mdSIGN
공개된 디자인 md 들을 목업으로 확인하고 다운로드 하세요.
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfaf6; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfaf6; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7a7a78; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f5ef; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fbfaf6; color: #000000;
border: 1px solid #f7f5ef; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fbfaf6; color: #111111;
border: 1px solid #d6d5d1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a78; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #faf9f5; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FBFAF6; color:#1A1A1A; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-variant-numeric: tabular-nums; }
* { box-sizing:border-box; }
.screen { display:flex; flex-direction:column; width:960px; height:640px; }
nav { height:48px; flex:0 0 48px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #E4E1D8; }
.brand { font-size:15px; font-weight:800; letter-spacing:-0.2px; color:#1A1A1A; }
.brand span { color:#FC7E0F; }
main { flex:1; display:grid; grid-template-columns:400px 1fr; }
.player { padding:22px 30px; border-right:1px solid #E4E1D8; display:flex; flex-direction:column; align-items:center; gap:10px; }
.np-label { font-size:12px; font-weight:700; letter-spacing:0.1em; color:#6E6E6E; text-transform:uppercase; align-self:flex-start; }
.cover { width:180px; height:180px; border-radius:10px; margin-top:4px;
background:linear-gradient(135deg,#3a3a3a,#1a1a1a);
box-shadow:rgba(0,0,0,0.18) 0 18px 40px -18px; position:relative; overflow:hidden; }
.cover::after { content:''; position:absolute; left:0; right:0; bottom:0; height:5px; background:#FC7E0F; }
.ep-title { font-size:19px; font-weight:700; text-align:center; margin-top:6px; letter-spacing:-0.2px; }
.ep-show { font-size:13px; font-weight:500; color:#6E6E6E; margin-top:2px; }
.scrub-wrap { width:100%; margin-top:12px; }
.scrub-track { width:100%; height:3px; background:#E4E1D8; border-radius:2px; position:relative; }
.scrub-fill { position:absolute; left:0; top:0; height:100%; width:38%; background:#FC7E0F; border-radius:2px; }
.scrub-knob { position:absolute; left:38%; top:50%; width:12px; height:12px; margin-left:-6px; margin-top:-6px;
border-radius:50%; background:#FC7E0F; box-shadow:rgba(0,0,0,0.5) 0 1px 4px; }
.scrub-times { display:flex; justify-content:space-between; font-size:11px; color:#9A9A9A; margin-top:6px; }
.transport { display:flex; align-items:center; justify-content:center; gap:26px; margin-top:16px; }
.skip { display:flex; flex-direction:column; align-items:center; gap:2px; }
.skip-glyph { font-size:24px; color:#6E6E6E; line-height:1; }
.skip-num { font-size:9px; font-weight:700; color:#6E6E6E; }
.play-ring { width:60px; height:60px; border-radius:50%; border:2.5px solid #FC7E0F;
display:flex; align-items:center; justify-content:center; }
.play-ring .glyph { width:0; height:0; border-top:11px solid transparent; border-bottom:11px solid transparent;
border-left:16px solid #FC7E0F; margin-left:4px; }
.effects { display:flex; justify-content:center; gap:26px; margin-top:16px; }
.fx { display:flex; flex-direction:column; align-items:center; gap:4px; }
.fx-glyph { width:19px; height:19px; border-radius:5px; }
.fx-label { font-size:9px; font-weight:600; color:#6E6E6E; }
.fx.active .fx-glyph { background:#FC7E0F; }
.fx.active .fx-label { color:#FC7E0F; }
.fx:not(.active) .fx-glyph { border:1.5px solid #9A9A9A; }
.saved-stat { margin-top:14px; font-size:10px; font-weight:600; letter-spacing:0.04em; color:#FC7E0F; text-transform:uppercase; text-align:center; }
.rightcol { padding:22px 30px; display:flex; flex-direction:column; }
.rc-title { font-size:26px; font-weight:800; letter-spacing:-0.3px; margin-bottom:6px; }
.plist { display:flex; flex-direction:column; }
.prow { display:flex; align-items:center; gap:14px; height:64px; border-bottom:1px solid #E4E1D8; }
.picon { width:38px; height:38px; border-radius:9px; flex:0 0 38px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; }
.pinfo { flex:1; min-width:0; }
.pname { font-size:15px; font-weight:600; }
.pdesc { font-size:12px; color:#6E6E6E; margin-top:2px; }
.pcount { font-size:14px; font-weight:600; color:#6E6E6E; }
.rec-card { margin-top:18px; display:flex; align-items:center; gap:12px; padding:14px; background:#F7F5EF; border-radius:10px; }
.rec-avatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#FC7E0F,#E06A00); flex:0 0 28px; }
.rec-text { font-size:12px; color:#6E6E6E; }
.rec-text b { color:#1A1A1A; font-weight:600; }
.tabbar { flex:0 0 52px; display:flex; align-items:center; justify-content:space-around;
background:rgba(251,250,246,0.94); border-top:1px solid #E4E1D8; }
.tab { display:flex; flex-direction:column; align-items:center; gap:3px; }
.tab-dot { width:8px; height:8px; border-radius:2px; }
.tab.active .tab-dot { background:#FC7E0F; }
.tab:not(.active) .tab-dot { background:none; border:1.5px solid #9A9A9A; }
.tab-label { font-size:10px; font-weight:600; }
.tab.active .tab-label { color:#FC7E0F; }
.tab:not(.active) .tab-label { color:#9A9A9A; }
</style></head>
<body>
<div class="screen">
<nav><span class="brand">Overcast (iOS)<span>.</span></span></nav>
<main>
<div class="player">
<span class="np-label">Now Playing</span>
<div class="cover"></div>
<div class="ep-title">The Slow Unwind of Everything</div>
<div class="ep-show">Track Changes</div>
<div class="scrub-wrap">
<div class="scrub-track"><div class="scrub-fill"></div><div class="scrub-knob"></div></div>
<div class="scrub-times"><span>48:12</span><span>-1:22:40</span></div>
</div>
<div class="transport">
<div class="skip"><span class="skip-glyph">‹‹</span><span class="skip-num">30</span></div>
<div class="play-ring"><div class="glyph"></div></div>
<div class="skip"><span class="skip-glyph">››</span><span class="skip-num">30</span></div>
</div>
<div class="effects">
<div class="fx"><span class="fx-glyph" style="border:1.5px solid #9A9A9A;display:flex;align-items:center;justify-content:center;font-size:9px;color:#6E6E6E;">1.3×</span><span class="fx-label">Speed</span></div>
<div class="fx active"><span class="fx-glyph"></span><span class="fx-label">Smart Speed</span></div>
<div class="fx active"><span class="fx-glyph"></span><span class="fx-label">Voice Boost</span></div>
<div class="fx"><span class="fx-glyph" style="border:1.5px solid #9A9A9A;"></span><span class="fx-label">Star</span></div>
</div>
<div class="saved-stat">Saved 1 hr 12 min with Smart Speed</div>
</div>
<div class="rightcol">
<div class="rc-title">Playlists</div>
<div class="plist">
<div class="prow">
<div class="picon" style="background:#FC7E0F;">▶</div>
<div class="pinfo"><div class="pname">All Episodes</div><div class="pdesc">Every episode from every show you follow</div></div>
<div class="pcount">142</div>
</div>
<div class="prow">
<div class="picon" style="background:#2D7FF9;">◐</div>
<div class="pinfo"><div class="pname">In Progress</div><div class="pdesc">Episodes you've started but not finished</div></div>
<div class="pcount">6</div>
</div>
<div class="prow">
<div class="picon" style="background:#34C759;">★</div>
<div class="pinfo"><div class="pname">Starred</div><div class="pdesc">Episodes you've marked as favorites</div></div>
<div class="pcount">23</div>
</div>
<div class="prow">
<div class="picon" style="background:#5856D6;">⬇</div>
<div class="pinfo"><div class="pname">Downloaded</div><div class="pdesc">Available offline on this device</div></div>
<div class="pcount">11</div>
</div>
</div>
<div class="rec-card">
<div class="rec-avatar"></div>
<div class="rec-text"><b>Marco</b> recommended "The Slow Unwind of Everything" — "This one's worth the full hour."</div>
</div>
</div>
</main>
<div class="tabbar">
<div class="tab active"><span class="tab-dot"></span><span class="tab-label">Playlists</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Podcasts</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Search</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Settings</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.35; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #aaccaa; color: #000000;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f6f6f6; color: #121212;
border: 1px solid #aaccaa; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f6f6f6; color: #3a3a3a;
border: 1px solid #bdbdbd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fb8077; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6f6f6; color:#121212; box-sizing:border-box;
font-family:'DM Sans', Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.brand { font-size:20px; font-weight:600; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:14px; font-weight:500; color:#777777; }
.navlinks span.on { color:#aaccaa; }
.hero { height:210px; background:#ffffff; display:flex; align-items:center; padding:0 32px; gap:30px; }
.hero .copy { flex:1.2; }
.hero h1 { font-size:32px; font-weight:600; letter-spacing:-0.5px; margin:0 0 10px; }
.hero p { font-size:15px; color:#3a3a3a; margin:0 0 16px; max-width:360px; }
.btn { display:inline-block; background:#aaccaa; color:#fff; font-size:15px; font-weight:600; padding:14px 28px;
border-radius:8px; }
.hero .art { flex:1; height:170px; border-radius:12px; background:radial-gradient(circle at 40% 30%,#d4e6d4,#8fb88f); }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:14px 32px; }
.card { background:#fff; border-radius:12px; overflow:hidden; }
.cover { height:100px; border-radius:12px 12px 0 0; margin:6px; height:94px; position:relative; }
.badge { position:absolute; top:4px; left:4px; font-size:9px; font-weight:700; letter-spacing:0.5px;
text-transform:uppercase; padding:4px 8px; border-radius:4px; }
.b-new { background:#73bec4; color:#fff; } .b-sale { background:#fb8077; color:#fff; } .b-sage { background:#aaccaa; color:#fff; }
.info { padding:4px 12px 12px; }
.t { font-size:14px; font-weight:500; margin:0 0 3px; }
.p { font-size:14px; color:#3a3a3a; }
.accordion { margin:0 32px; padding:10px 0; border-top:1px solid #dedede; display:flex; justify-content:space-between; align-items:center; }
.accordion span { font-size:16px; font-weight:500; }
.accordion i { font-size:12px; color:#777777; }
footer { position:absolute; bottom:0; left:0; right:0; height:56px; background:#121212; color:#fff;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
</style></head>
<body>
<nav>
<div class="brand">Ezpz Feeding 2</div>
<div class="navlinks"><span class="on">Mats</span><span>Bowls</span><span>Cups</span><span>Bundles</span></div>
</nav>
<div class="hero">
<div class="copy">
<h1>A pediatrician's waiting room, designed by a ceramicist.</h1>
<p>Sage-and-coral feeding essentials, sculpted to mirror the way little hands actually grip.</p>
<span class="btn">Shop Bundles</span>
</div>
<div class="art"></div>
</div>
<div class="grid">
<div class="card"><div class="cover" style="background:#e6efe6;"><span class="badge b-sage">Bestseller</span></div>
<div class="info"><p class="t">Happy Mat — Sage</p><p class="p">$29.95</p></div></div>
<div class="card"><div class="cover" style="background:#e4f2f3;"><span class="badge b-new">New</span></div>
<div class="info"><p class="t">Mini Cup Set</p><p class="p">$16.95</p></div></div>
<div class="card"><div class="cover" style="background:#fde7e5;"><span class="badge b-sale">Sale</span></div>
<div class="info"><p class="t">Snack Cup Duo</p><p class="p">$12.95</p></div></div>
<div class="card"><div class="cover" style="background:#f0f0f0;"></div>
<div class="info"><p class="t">Placemat + Bowl Bundle</p><p class="p">$44.95</p></div></div>
</div>
<div class="accordion"><span>Ingredients & Materials</span><i>—</i></div>
<div class="accordion"><span>Shipping & Returns</span><i>+</i></div>
<footer><span>© Ezpz Feeding 2 — Feeding essentials, reimagined</span><span>Support · Shipping · Contact</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #005df9; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #005df9; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b1f7; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #005df9; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #005df9; color: #f5f5f5;
border: 1px solid #2775f8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b1f7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2977fa; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#101828; box-sizing:border-box;
font-family:-apple-system,"Segoe UI",Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:800; margin:0; color:#005df9; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#475467; }
.hero { padding:30px 40px 20px; }
.hero h1 { font-size:32px; font-weight:800; letter-spacing:-0.64px; line-height:1.35; margin:0 0 6px; }
.hero p { font-size:14px; color:#667085; margin:0 0 18px; }
.cta { background:#005df9; color:#101828; border-radius:16px; padding:2px 12px; height:44px; display:inline-flex; align-items:center; font-size:14px; }
.badges { display:flex; gap:8px; padding:0 40px 16px; }
.bd { font-size:11px; font-weight:500; border-radius:12px; padding:2px 8px; }
.bd.red { background:#fff6f5; color:#f44f4f; }
.bd.blue { background:#ebf0ff; color:#005df9; }
.tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding:0 40px; }
.tile { background:#f8f9fc; border-radius:16px; padding:20px; }
.tile h3 { font-size:16px; margin:0 0 6px; }
.tile .capsule { display:inline-block; background:#f0f4fa; border-radius:20px; padding:8px 14px; font-size:13px; margin-top:10px; }
</style></head>
<body>
<nav>
<p class="brand">Shinhan Card</p>
<div class="navlinks"><span>Cards</span><span>SOL Pay</span><span>Loans</span><span>Events</span></div>
</nav>
<section class="hero">
<h1>Payments that connect<br>everyday life — SOL Pay</h1>
<p>Shinhan Card's digital platform linking financial life and daily life</p>
<span class="cta">Apply Now</span>
</section>
<div class="badges"><span class="bd red">Limited Offer</span><span class="bd blue">New Card</span></div>
<div class="tiles">
<div class="tile"><h3>Deep Dream Credit Card</h3><span class="capsule">See Benefits</span></div>
<div class="tile"><h3>The More Premium</h3><span class="capsule">See Benefits</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; letter-spacing: -0.2px; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6c7176; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #006fcf; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #006fcf;
border: 1px solid #006fcf; border-radius: 9999px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #444444;
border: 1px solid #c8c7c7; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c7176; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #006fcf; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#231f20; box-sizing:border-box;
font-family:'Inter', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; gap:22px; padding:0 28px; border-bottom:1px solid #e8e8e8; }
.logo { font-size:20px; font-weight:600; letter-spacing:-.3px; }
.navlink { font-size:15px; font-weight:500; color:#8a8f94; }
.navlink.active { color:#006fcf; border-bottom:2px solid #006fcf; padding-bottom:22px; margin-bottom:-23px; }
.searchw { margin-left:auto; width:240px; height:40px; border-radius:999px; background:#f7f7f7; border:1px solid #dedede;
display:flex; align-items:center; padding:0 16px; font-size:13px; color:#6c7176; }
.searchw::before { content:'⌕'; margin-right:8px; color:#006fcf; font-weight:700; }
.stage { display:flex; gap:30px; padding:24px 28px 0; }
.cover { width:230px; height:230px; border-radius:12px; flex:0 0 auto; position:relative; overflow:hidden;
background:linear-gradient(150deg,#006fcf 0%,#557b97 60%,#121212 130%); box-shadow:0 8px 24px rgba(0,0,0,.14); }
.cover::before { content:''; position:absolute; left:30px; top:30px; width:170px; height:170px; border-radius:50%;
border:2px solid rgba(255,255,255,.22); }
.cover::after { content:''; position:absolute; left:74px; top:74px; width:82px; height:82px; border-radius:50%;
background:rgba(255,255,255,.10); }
.hiresbadge { position:absolute; top:14px; left:14px; background:#006fcf; color:#fff; font-size:11px; font-weight:600;
text-transform:uppercase; letter-spacing:.5px; border-radius:8px; padding:4px 10px; }
.info { flex:1; }
h1 { font-size:26px; font-weight:600; margin:6px 0 4px; }
.artist { font-size:15px; color:#6c7176; margin-bottom:12px; }
.pillrow { display:flex; gap:8px; margin-bottom:18px; }
.pill { background:#f7f7f7; border-radius:999px; padding:8px 16px; font-size:13px; color:#6c7176; }
.pill.active { background:#006fcf; color:#fff; }
.pricerow { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.price { font-size:24px; font-weight:600; }
.btnrow { display:flex; gap:10px; }
.btn-p { background:#006fcf; color:#fff; border:none; border-radius:999px; height:48px; padding:0 28px;
font-size:16px; font-weight:600; }
.btn-s { background:#fff; color:#006fcf; border:2px solid #006fcf; border-radius:999px; height:48px; padding:0 22px;
font-size:16px; font-weight:600; }
.fmtnote { font-size:12px; color:#8a8f94; margin-top:10px; }
.trackwrap { padding:18px 28px 0; border-top:1px solid #e8e8e8; margin-top:18px; }
.trackhdr { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:#8a8f94; margin-bottom:10px; }
.track { display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px solid #f2f2f2; }
.track b { font-weight:400; color:#6c7176; }
</style></head>
<body>
<nav>
<span class="logo">Chesky Records</span>
<span class="navlink active">Jazz</span>
<span class="navlink">Classical</span>
<span class="navlink">Vocal</span>
<span class="navlink">Hi-Res Downloads</span>
<div class="searchw">Search artists, albums, genres…</div>
</nav>
<div class="stage">
<div class="cover"><span class="hiresbadge">Hi-Res 24-bit/192kHz</span></div>
<div class="info">
<h1>Late Autumn Sessions</h1>
<div class="artist">The Marlowe Quartet</div>
<div class="pillrow">
<span class="pill active">Vinyl LP</span>
<span class="pill">CD</span>
<span class="pill">Digital FLAC</span>
</div>
<div class="pricerow"><span class="price">$32.00</span></div>
<div class="btnrow">
<button class="btn-p">Add to Cart</button>
<button class="btn-s">Preview Album</button>
</div>
<div class="fmtnote">Mastered from the original analog session tapes. Includes liner notes and session photography.</div>
</div>
</div>
<div class="trackwrap">
<div class="trackhdr">Track Listing</div>
<div class="track"><span>1. Riverbend at Dusk</span><b>6:12</b></div>
<div class="track"><span>2. Late Autumn Sessions (Title Track)</span><b>7:48</b></div>
<div class="track"><span>3. Quiet Harbor</span><b>5:20</b></div>
<div class="track"><span>4. Marlowe's Waltz</span><b>4:55</b></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 800; line-height: 1.1; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6d7175; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 800; line-height: 1.25; letter-spacing: 0.5px; background: #2d77be; color: #ffffff;
border: none; border-radius: 2px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 800; line-height: 1.25; letter-spacing: 0.5px; background: #121212; color: #ffffff;
border: 1px solid #2d77be; border-radius: 2px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #dedede; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d7175; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 800; line-height: 1.18; letter-spacing: 0.5px; background: #2d77be; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f8f8; color:#222222; font-family:Arial,sans-serif; }
*{box-sizing:border-box;}
.promo{height:32px;background:#272e66;color:#fff;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;text-align:center;line-height:32px;}
.nav{height:60px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-size:24px;font-weight:900;letter-spacing:-1px;text-transform:uppercase;font-stretch:condensed;}
.navlinks{display:flex;gap:20px;color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.2px;}
.hero{height:220px;background:#121212;color:#fff;display:flex;align-items:center;padding:0 32px;}
.herotext{width:480px;}
.eyebrow{color:#2d77be;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;}
.herotext h1{font-size:38px;font-weight:800;text-transform:uppercase;line-height:1.05;margin:0 0 14px;letter-spacing:-.3px;}
.cta{display:inline-block;background:#2d77be;color:#fff;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:13px 26px;}
.grid{display:flex;gap:2px;background:#dedede;margin-top:2px;}
.card{flex:1;background:#fff;padding:14px;}
.thumb{height:80px;margin-bottom:8px;}
.badge{display:inline-block;background:#2d77be;color:#fff;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:2px 6px;margin-bottom:6px;}
.ptitle{font-size:14px;font-weight:700;}
.pprice{font-size:20px;font-weight:800;text-transform:uppercase;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#121212;color:#6d7175;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="promo">Free Grate Cover with Purchase</div>
<div class="nav">
<div class="logo">Pit Boss</div>
<div class="navlinks"><div>Grills</div><div>Smokers</div><div>Pellets</div><div>Accessories</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="eyebrow">Wood Pellet Technology</div>
<h1>Set It. Forget It. Own It.</h1>
<div class="cta">Shop Grills</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2d77be,#121212)"></div><div class="badge">New</div><div class="ptitle">Navigator 850 Pellet Grill</div><div class="pprice">$699</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#121212,#2d77be)"></div><div class="ptitle">Copperhead 5-Series Smoker</div><div class="pprice">$549</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#272e66,#121212)"></div><div class="badge">Sale</div><div class="ptitle">Competition Blend Pellets</div><div class="pprice">$19</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#555555,#121212)"></div><div class="ptitle">Grill Cover & Cast Iron Kit</div><div class="pprice">$49</div></div>
</div>
<div class="footer"><span>© Pit Boss · Wood Fired Perfection</span><span>WiFi Control · Dual-Sensor Lid</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #503396; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #503396; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ab9eca; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #503396; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #503396; color: #f5f5f5;
border: 1px solid #6a52a5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ab9eca; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #513ba5; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#444444; box-sizing:border-box;
font-family:"NanumBarunGothic", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; padding:0 32px; border-bottom:1px solid #ebebeb; }
.brand { font-size:16px; font-weight:700; color:#503396; margin:0; }
.navlinks { display:flex; gap:22px; margin-left:30px; }
.navlinks span { font-size:15px; color:#444444; }
.theater-pill { margin-left:auto; border:1px solid #666666; border-radius:30px; height:32px; padding:0 16px;
display:flex; align-items:center; font-size:13px; color:#666666; }
.section-title { font-size:22px; font-weight:400; letter-spacing:-1px; color:#333333; padding:18px 32px 10px; margin:0; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; padding:0 32px 16px; }
.poster { display:flex; flex-direction:column; gap:8px; }
.thumb { width:100%; aspect-ratio:230/330; position:relative; overflow:hidden; }
.thumb.a { background:linear-gradient(160deg,#503396,#7a5fc4); }
.thumb.b { background:linear-gradient(160deg,#33285f,#503396); }
.thumb.c { background:linear-gradient(160deg,#7a5fc4,#c9bce9); }
.thumb.d { background:linear-gradient(160deg,#2c2440,#503396); }
.thumb.e { background:linear-gradient(160deg,#503396,#33285f); }
.rank { position:absolute; top:6px; left:6px; background:#ffffff; color:#503396; font-size:11px; font-weight:700;
width:18px; height:18px; display:flex; align-items:center; justify-content:center; border-radius:4px; }
.poster .name { font-size:13px; color:#444444; font-weight:500; line-height:1.3; }
.like-row { display:flex; align-items:center; justify-content:space-between; }
.like-btn { background:#ffffff; color:#503396; border:1px solid #ebebeb; border-radius:4px; padding:0 5px;
height:22px; display:flex; align-items:center; font-size:11px; }
.banner { margin:6px 32px 0; height:150px; border-radius:8px; background:linear-gradient(120deg,#2c2440,#503396 60%,#7a5fc4);
display:flex; align-items:center; padding:0 30px; color:#ffffff; }
.banner h3 { font-size:24px; font-weight:700; margin:0 0 6px; }
.banner p { font-size:13px; margin:0; opacity:0.85; }
.banner .cta { margin-top:12px; display:inline-flex; background:#ffffff; color:#503396; border-radius:4px;
height:34px; padding:0 18px; align-items:center; font-size:13px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">MEGABOX</p>
<div class="navlinks"><span>Movies</span><span>Booking</span><span>Theaters</span><span>Events</span></div>
<div class="theater-pill">Find a theater</div>
</nav>
<h2 class="section-title">Now Showing</h2>
<div class="grid">
<div class="poster"><div class="thumb a"><span class="rank">1</span></div><span class="name">Midnight Signal</span>
<div class="like-row"><span>4.8</span><span class="like-btn">♡ Like</span></div></div>
<div class="poster"><div class="thumb b"><span class="rank">2</span></div><span class="name">The Last Voyage</span>
<div class="like-row"><span>4.6</span><span class="like-btn">♡ Like</span></div></div>
<div class="poster"><div class="thumb c"><span class="rank">3</span></div><span class="name">Paper Moonlight</span>
<div class="like-row"><span>4.5</span><span class="like-btn">♡ Like</span></div></div>
<div class="poster"><div class="thumb d"><span class="rank">4</span></div><span class="name">Iron Harbor</span>
<div class="like-row"><span>4.3</span><span class="like-btn">♡ Like</span></div></div>
<div class="poster"><div class="thumb e"><span class="rank">5</span></div><span class="name">Season of Kites</span>
<div class="like-row"><span>4.2</span><span class="like-btn">♡ Like</span></div></div>
</div>
<div class="banner">
<div>
<h3>Life Theater — more than a screening</h3>
<p>A place to meet stories, play, and share the experience together.</p>
<div class="cta">Book Now</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #171a21;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #171a21;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #171a21; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #3c65a6; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f5f5f5; color: #3c65a6;
border: 1px solid #3c65a6; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #171a21;
border: 1px solid #bebec0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d39e00; color: #171a21;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; color:#383d41; }
*{box-sizing:border-box;}
.nav{height:64px;background:#3c65a6;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:0;font-size:15px;font-weight:600;color:#fff;}
.navlinks div{padding:8px 12px;}
.navlinks .on{border-bottom:3px solid #fff;}
.hero{height:200px;background:#3c65a6;display:flex;flex-direction:column;justify-content:center;padding:0 24px;}
.h1{font-size:32px;font-weight:700;letter-spacing:-0.5px;color:#fff;margin:0 0 8px;}
.sub{font-size:18px;color:#dbe6f5;font-style:italic;}
.search{width:340px;height:44px;background:#fff;border-radius:9999px;margin-top:16px;display:flex;align-items:center;padding:0 18px;font-size:14px;color:#777777;}
.section{padding:16px 24px 0;}
.stitle{font-size:24px;font-weight:600;color:#171a21;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:206px;background:#fff;border-radius:12px;padding:14px;box-shadow:0 2px 4px rgba(0,0,0,0.08);}
.thumb{height:100px;border-radius:8px;margin-bottom:8px;}
.ptitle{font-size:16px;font-weight:600;color:#171a21;}
.artist{font-size:13px;color:#777777;}
.pprice{font-size:18px;font-weight:700;color:#171a21;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:52px;background:#171a21;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:13px;color:#818182;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Reference Recordings</div>
<div class="navlinks"><div class="on">Catalog</div><div>Artists</div><div>Formats</div><div>About</div></div>
</div>
<div class="hero">
<div class="h1">The Best Seat in the House</div>
<div class="sub">Since 1976 — a literal contract with the listener.</div>
<div class="search">Search the catalog...</div>
</div>
<div class="section">
<div class="stitle">New Releases</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3c65a6,#171a21)"></div><div class="ptitle">Nocturnes for Strings</div><div class="artist">Eleventh Chamber Ensemble</div><div class="pprice">$24.98</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#171a21,#3c65a6)"></div><div class="ptitle">Brass & Timpani Live</div><div class="artist">Meridian Wind Orchestra</div><div class="pprice">$27.98</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#777777,#3c65a6)"></div><div class="ptitle">Piano Sessions Vol. IV</div><div class="artist">Harlan Reyes</div><div class="pprice">$21.98</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3c65a6,#818182)"></div><div class="ptitle">Concerto in Blue</div><div class="artist">Fairbanks Philharmonic</div><div class="pprice">$29.98</div></div>
</div>
</div>
<div class="footer"><span>© Reference Recordings — recorded for the room you're in</span><span>Support · Shipping · Legal</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f4f1; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f4f1; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #e5067e; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #f6f4f1; color: #e5067e;
border: 1px solid #e5067e; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f6f4f1; color: #111111;
border: 1px solid #bbbab7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e5067e; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f4f1; font-family:Montserrat,Arial,sans-serif; color:#111111; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#f6f4f1;border-bottom:1px solid #cfcfcf;}
.logo{font-family:'Feeling Passionate',cursive,Montserrat,sans-serif;font-size:26px;font-weight:400;color:#e5067e;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#111111;}
.hero{height:250px;display:flex;align-items:center;padding:0 36px;background:linear-gradient(120deg,#f6f4f1 45%,#fce5ee 100%);}
.herotext{width:440px;}
.h1{font-family:'Feeling Passionate',cursive,Montserrat,sans-serif;font-size:40px;font-weight:400;line-height:1.15;color:#d90073;margin:0 0 14px;}
.sub{font-size:14px;line-height:1.5;color:#111111;margin:0 0 18px;max-width:340px;}
.cta{display:inline-block;background:#e5067e;color:#fff;font-size:13px;font-weight:700;padding:13px 28px;border-radius:9999px;}
.bottle{position:absolute;right:80px;top:50px;width:90px;height:170px;border-radius:20px 20px 40px 40px;background:linear-gradient(160deg,#e5067e,#d90073 80%);}
.cap{position:absolute;right:100px;top:36px;width:50px;height:24px;border-radius:8px;background:#111111;}
.bottle2{position:absolute;right:190px;top:80px;width:70px;height:140px;border-radius:16px 16px 32px 32px;background:linear-gradient(160deg,#f5c518,#e5067e 80%);}
.sec{padding:22px 36px 0;}
.secTitle{font-size:18px;font-weight:700;color:#111111;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border:1px solid #cfcfcf;border-radius:12px;padding:12px;position:relative;}
.badge{position:absolute;top:10px;left:10px;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:9999px;z-index:2;}
.badge-green{background:#1f7a1f;color:#fff;}
.badge-crimson{background:#c5003e;color:#fff;}
.thumb{height:100px;border-radius:8px;margin-bottom:10px;}
.pname{font-size:14px;font-weight:700;color:#111111;}
.pmeta{font-family:'JetBrains Mono',monospace;font-size:11px;color:#888888;margin-top:4px;}
.pprice{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:#e5067e;margin-top:8px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Viori Beauty</div>
<div class="navlinks"><span>Bath Bars</span><span>Shampoo</span><span>Gift Sets</span><span>Ingredients</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="h1">Bloom in the shower.</div>
<div class="sub">Bath and shower essentials formulated with plant-powered ingredients.</div>
<div class="cta">Shop Bestsellers</div>
</div>
<div class="bottle2"></div><div class="bottle"></div><div class="cap"></div>
</div>
<div class="sec">
<div class="secTitle">Bestselling Bars</div>
<div class="grid">
<div class="card"><span class="badge badge-green">Natural</span><div class="thumb" style="background:linear-gradient(135deg,#e5067e,#1f7a1f)"></div><div class="pname">Rose Clay Bar Soap</div><div class="pmeta">ph: 5.5 · vegan</div><div class="pprice">$14.00</div></div>
<div class="card"><span class="badge badge-crimson">New</span><div class="thumb" style="background:linear-gradient(135deg,#d90073,#f5c518)"></div><div class="pname">Coconut Shampoo Bar</div><div class="pmeta">sulfate-free</div><div class="pprice">$18.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ec008c,#111111)"></div><div class="pname">Body Butter Duo</div><div class="pmeta">shea + cocoa</div><div class="pprice">$26.00</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4800; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4800; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fcfcfa; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4800; color: #fcfcfa;
border: 1px solid #fcfcfa; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4800; color: #f5f5f5;
border: 1px solid #fd6427; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff6528; color: #fcfcfa;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcfcfa; color:#1f1f1f; box-sizing:border-box;
font-family:"HubSpot Sans","Inter",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.logo { font-size:19px; font-weight:700; color:#ff4800; }
.navlinks { display:flex; gap:20px; font-size:14px; }
.btn-primary { background:#ff4800; color:#ffffff; border-radius:8px; padding:10px 20px; font-size:14px;
font-weight:500; }
.hero { text-align:center; padding:30px 40px 24px; }
.hero h1 { font-family:"Georgia",serif; font-size:48px; font-weight:500; line-height:1.1; margin:0 0 14px; }
.hero p { font-size:16px; color:#60605f; margin:0 0 18px; max-width:480px; margin-left:auto; margin-right:auto; }
.row { display:flex; gap:10px; justify-content:center; }
.btn-outlined { background:#ffffff; color:#ff4800; border:2px solid #ff4800; border-radius:8px;
padding:14px 30px; font-size:16px; font-weight:500; }
.btn-primary-lg { background:#ff4800; color:#ffffff; border-radius:8px; padding:14px 30px; font-size:16px;
font-weight:500; }
.tabs { display:flex; gap:8px; justify-content:center; padding:0 40px 20px; }
.tab { border-radius:16px; padding:8px 16px; font-size:14px; font-weight:500; background:#ffffff; }
.tab.active { background:#f8f5ee; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 40px 24px; }
.card { background:#ffffff; border:1px solid #1f1f1f; border-radius:16px; padding:18px; }
.card h3 { font-size:16px; font-weight:500; margin:0 0 6px; }
.card p { font-size:13px; color:#60605f; margin:0; }
.badge { display:inline-block; background:#fcded2; color:#ff4800; border-radius:4px; padding:4px 8px;
font-size:12px; font-weight:500; margin-top:8px; }
.dark { background:#042729; color:#f8f5ee; padding:22px 40px; text-align:center; }
.dark h2 { font-family:"Georgia",serif; font-size:28px; font-weight:500; margin:0 0 10px; }
.btn-dark-out { background:rgba(0,0,0,0.11); border:2px solid #f8f5ee; color:#f8f5ee; border-radius:8px;
padding:10px 22px; font-size:14px; font-weight:500; }
</style></head>
<body>
<nav>
<span class="logo">HubSpot</span>
<div class="navlinks"><span>Marketing</span><span>Sales</span><span>Service</span></div>
<span class="btn-primary">Get a demo</span>
</nav>
<section class="hero">
<h1>The Customer Platform</h1>
<p>Grow better with software that's powerful, not complicated.</p>
<div class="row">
<button class="btn-primary-lg">Get a demo</button>
<button class="btn-outlined">Get started free</button>
</div>
</section>
<div class="tabs">
<span class="tab active">By Use Case</span>
<span class="tab">By Team Size</span>
<span class="tab">Why HubSpot?</span>
</div>
<div class="cards">
<div class="card"><h3>Marketing Hub</h3><p>Attract the right audience with content and SEO.</p><span class="badge">Popular</span></div>
<div class="card"><h3>Sales Hub</h3><p>Manage your pipeline without the busywork.</p></div>
<div class="card"><h3>Service Hub</h3><p>Delight customers with connected support.</p></div>
</div>
<div class="dark">
<h2>Grow better, together</h2>
<span class="btn-dark-out">Learn more about Revenue Hub</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #191919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #191919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #191919; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #5e5e5e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #15234a; color: #ffffff;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #fafafa; color: #191919;
border: 1px solid #15234a; border-radius: 12px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #262626;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5e5e5e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #d72c0d; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:'Assistant','Figtree','Helvetica Neue',sans-serif; color:#262626; }
*{box-sizing:border-box;}
.nav{height:72px;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-family:'AGaramondPro',Georgia,serif;font-size:22px;font-weight:700;color:#15234a;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:600;color:#191919;}
.navlinks div:first-child{color:#15234a;border-bottom:2px solid #15234a;padding-bottom:4px;}
.hero{height:220px;background:#15234a;display:flex;align-items:center;padding:0 30px;gap:24px;}
.heroimg{width:200px;height:180px;border-radius:12px;background:linear-gradient(160deg,#e0b5b2,#fff4fa);flex-shrink:0;}
.herotext h1{font-family:'AGaramondPro',Georgia,serif;font-size:32px;font-weight:600;color:#fff;margin:0 0 10px;}
.herotext p{font-size:14px;color:#dedede;margin:0 0 16px;max-width:380px;line-height:1.5;}
.btn{display:inline-block;background:#d72c0d;color:#fff;font-size:16px;font-weight:600;padding:14px 28px;border-radius:12px;}
.secTitle{font-family:'AGaramondPro',Georgia,serif;font-size:24px;font-weight:600;color:#15234a;padding:18px 30px 10px;}
.tiles{display:flex;gap:14px;padding:0 30px 10px;}
.tile{flex:1;background:#f3f3f3;border-radius:8px;padding:20px;text-align:center;font-size:16px;font-weight:600;color:#191919;}
.grid{display:flex;gap:14px;padding:4px 30px 0;}
.card{width:200px;background:#fff;border-radius:8px;overflow:hidden;position:relative;}
.cardimg{height:100px;background:linear-gradient(160deg,#dedede,#f3f3f3);}
.badge{position:absolute;top:8px;left:8px;background:#d72c0d;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:4px;z-index:2;}
.badgenew{position:absolute;top:8px;right:8px;background:#e0faef;color:#13a165;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:4px;z-index:2;}
.cardbody{padding:10px 12px;}
.ctitle{font-size:16px;font-weight:600;margin-bottom:4px;}
.cprice{font-size:16px;font-weight:600;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#191919;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:11px;color:#fafafa;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Silverts</div>
<div class="navlinks"><div>Women's Adaptive</div><div>Men's Adaptive</div><div>Care</div></div>
</div>
<div class="hero">
<div class="heroimg"></div>
<div class="herotext">
<h1>Adaptive clothing, made with dignity.</h1>
<p>Easy-dress fastenings and comfortable fits designed for care, not compromise.</p>
<div class="btn">Shop Now</div>
</div>
</div>
<div class="secTitle">Shop by Need</div>
<div class="tiles">
<div class="tile">Wheelchair Wear</div>
<div class="tile">Post-Surgical</div>
<div class="tile">Easy Dressing</div>
</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="cardimg"></div><div class="cardbody"><div class="ctitle">Side-Snap Cardigan</div><div class="cprice">$42.00</div></div></div>
<div class="card"><div class="badgenew">New</div><div class="cardimg"></div><div class="cardbody"><div class="ctitle">Open-Back Nightgown</div><div class="cprice">$36.00</div></div></div>
<div class="card"><div class="cardimg"></div><div class="cardbody"><div class="ctitle">Velcro-Close Trousers</div><div class="cprice">$48.00</div></div></div>
</div>
<div class="footer"><span>© Silverts</span><span>Sizing Guide · Care Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0f0f0; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0f0f0; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffc800; color: #231f20;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f0f0f0; color: #231f20;
border: 1px solid #ffc800; border-radius: 0px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #bdbcbc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffc800; color: #231f20;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f0f0f0; color:#231f20; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dedede;}
.logo{font-size:20px;font-weight:600;letter-spacing:-.5px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;}
.navlinks .active{color:#ffc800;}
.hero{padding:44px 36px 24px;}
.hero h1{font-size:44px;font-weight:500;margin:0 0 12px;letter-spacing:-1px;max-width:600px;}
.hero p{font-size:15px;color:#6a6a6a;margin:0;max-width:460px;}
.grid{display:flex;gap:24px;padding:20px 36px;}
.card{width:190px;background:#fff;border-radius:12px;overflow:hidden;}
.thumb{height:130px;border-radius:12px 12px 0 0;}
.tag{display:inline-block;background:#ffc800;color:#231f20;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:3px 10px;margin:10px 0 0 12px;}
.ptitle{font-size:15px;font-weight:600;padding:6px 12px 2px;}
.pprice{font-size:15px;font-weight:600;padding:0 12px 12px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:64px;background:#231f20;color:#f0f0f0;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:13px;}
.footer span:first-child{color:#ffc800;font-size:12px;letter-spacing:.5px;text-transform:uppercase;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Phaidon</div>
<div class="navlinks"><div class="active">Architecture</div><div>Art</div><div>Design</div><div>Food</div><div>Sale</div></div>
</div>
<div class="hero">
<h1>Books for the visually curious.</h1>
<p>Monographs, cookbooks, and design classics — printed to be kept.</p>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#231f20,#088f87)"></div><div class="tag">New</div><div class="ptitle">Living in Nature</div><div class="pprice">$59.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#bad2df,#231f20)"></div><div class="ptitle">The Art Museum</div><div class="pprice">$195.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#088f87,#f0f0f0)"></div><div class="ptitle">Vegetable Kingdom</div><div class="pprice">$49.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#231f20,#bad2df)"></div><div class="tag">Sale</div><div class="ptitle">Atlas of Furniture</div><div class="pprice">$79.95</div></div>
</div>
<div class="footer"><span>Categories</span><span>© Phaidon · Since 1923</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5efe4; color: #0e1c2c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5efe4; color: #0e1c2c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #0e1c2c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #5a5046; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.6px; background: #0e1c2c; color: #f5efe4;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.6px; background: transparent; color: #0e1c2c;
border: 1px solid #0e1c2c; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #faf5ec; color: #0e1c2c;
border: 1px solid #bbbab6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a5046; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.6px; background: #0e1c2c; color: #f5efe4;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5efe4; color:#0e1c2c; box-sizing:border-box;
font-family:'GT America','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.announce { height:32px; background:#1c2536; color:#f5efe4; display:flex; align-items:center; justify-content:center;
font-size:12px; letter-spacing:0.2px; }
nav { height:64px; background:#f5efe4; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #e3d9c8; }
.brand { font-size:18px; font-weight:500; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:500; color:#5a5046; text-transform:uppercase; letter-spacing:0.3px; }
main { display:flex; height:calc(640px - 96px); }
.gallery { width:44%; background:#faf5ec; display:flex; align-items:center; justify-content:center; }
.pot { width:220px; height:220px; border-radius:12px; background:radial-gradient(circle at 35% 30%,#e9b461,#d49a8b 70%);
position:relative; box-shadow:0 20px 40px rgba(14,28,44,0.1); }
.pot::before { content:''; position:absolute; left:-30px; top:90px; width:40px; height:16px; background:#0e1c2c; border-radius:8px; }
.pot::after { content:''; position:absolute; right:-30px; top:90px; width:40px; height:16px; background:#0e1c2c; border-radius:8px; }
.details { width:56%; padding:26px 36px; }
.badge-best { display:inline-block; background:#0e1c2c; color:#f5efe4; font-size:11px; font-weight:500; letter-spacing:0.6px;
text-transform:uppercase; border-radius:4px; padding:4px 10px; margin-bottom:10px; }
h1 { font-size:28px; font-weight:500; letter-spacing:-0.36px; margin:0 0 6px; }
.price { font-size:18px; font-weight:700; margin:0 0 14px; }
.desc { font-size:15px; line-height:1.5; color:#2c3140; margin:0 0 16px; max-width:400px; }
.colorpick { margin-bottom:8px; font-size:13px; color:#5a5046; }
.swrow { display:flex; gap:12px; margin-bottom:18px; }
.sw { width:32px; height:32px; border-radius:9999px; }
.sw.sel { box-shadow:0 0 0 2px #0e1c2c; }
.setincludes { margin-bottom:16px; border-top:1px solid #e3d9c8; padding-top:12px; }
.setincludes div { font-size:13px; color:#2c3140; padding:4px 0; }
.btn-primary { background:#0e1c2c; color:#f5efe4; border:none; border-radius:4px; padding:14px 28px;
font-size:14px; font-weight:500; letter-spacing:0.6px; text-transform:uppercase; }
</style></head>
<body>
<div class="announce">Free shipping on orders $90+</div>
<nav>
<p class="brand">Caraway</p>
<div class="navlinks"><span>Shop</span><span>Collections</span><span>Materials</span><span>About</span></div>
</nav>
<main>
<div class="gallery"><div class="pot"></div></div>
<div class="details">
<span class="badge-best">Best Seller</span>
<h1>Ceramic Nonstick Fry Pan Set</h1>
<p class="price">$145</p>
<p class="desc">Cookware made modern — non-toxic ceramic coating, oven safe, designed to live on your counter, not in a cupboard.</p>
<p class="colorpick">Color: Perracotta</p>
<div class="swrow">
<div class="sw sel" style="background:#d49a8b"></div>
<div class="sw" style="background:#a8b59a"></div>
<div class="sw" style="background:#2a3a52"></div>
<div class="sw" style="background:#e9b461"></div>
<div class="sw" style="background:#ece2cf"></div>
</div>
<div class="setincludes">
<div>10.5" Fry Pan</div>
<div>Storage Lid</div>
<div>Magnetic Pan Rack</div>
</div>
<button class="btn-primary">Add to Cart</button>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.3px; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.2px; background: #ea3927; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.2px; background: #ffffff; color: #1e1e1e;
border: 1px solid #ea3927; border-radius: 8px;
padding: 9px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1e1e1e;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ea3927; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; font-family:'Karla','Helvetica Neue',Arial,sans-serif; color:#1e1e1e; }
*{box-sizing:border-box;}
.nav{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#fff;border-bottom:1px solid #e2e2e2;}
.logo{font-family:'Jost','Helvetica Neue',Arial,sans-serif;font-size:20px;font-weight:600;letter-spacing:-.5px;}
.search{width:220px;height:28px;border:1px solid #e2e2e2;border-radius:3px;background:#f5f5f5;font-size:12px;color:#8a8a8a;display:flex;align-items:center;padding:0 10px;}
.cart{font-size:12px;font-weight:600;color:#ea3927;}
.marquee{height:34px;background:#1e1e1e;display:flex;align-items:center;gap:26px;padding:0 32px;overflow:hidden;}
.marquee span{font-size:11px;color:#f5f5f5;letter-spacing:.4px;white-space:nowrap;}
.marquee .hl{color:#f39b1e;font-weight:700;}
.body{display:flex;padding:26px 32px;gap:26px;}
.left{width:400px;}
.h1{font-family:'Jost','Helvetica Neue',Arial,sans-serif;font-size:26px;font-weight:600;letter-spacing:-.5px;margin:0 0 12px;line-height:1.2;}
.sub{font-size:14px;line-height:1.6;color:#4a4a4a;margin:0 0 20px;}
.cta{display:inline-block;background:#ea3927;color:#fff;font-size:14px;font-weight:600;padding:11px 26px;border-radius:2px;}
.rightgrid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.card{background:#fff;border:1px solid #e2e2e2;border-radius:6px;padding:10px;position:relative;}
.sleeve{aspect-ratio:1/1;border-radius:4px;margin-bottom:8px;}
.ptitle{font-size:12px;font-weight:600;line-height:1.3;height:30px;overflow:hidden;}
.pmeta{font-size:11px;color:#8a8a8a;margin-top:2px;}
.tag{position:absolute;top:8px;left:8px;background:#f39b1e;color:#1e1e1e;font-size:9px;font-weight:700;padding:2px 6px;border-radius:2px;text-transform:uppercase;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;background:#1e1e1e;display:flex;align-items:center;justify-content:center;gap:22px;}
.footer span{color:#9a9a9a;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Secretly Store</div>
<div class="search">Search catalog…</div>
<div class="cart">BAG (0)</div>
</div>
<div class="marquee">
<span class="hl">NOW RESTOCKED</span><span>Repress Vol. 12</span><span>Limited Colorway Pressing</span><span class="hl">PRE-ORDER</span><span>Studio Sessions Vinyl</span>
</div>
<div class="body">
<div class="left">
<div class="h1">A library of<br>artifacts, not<br>a discount bin.</div>
<div class="sub">Curated pressings, indexed like a reference collection. Every record earns its shelf.</div>
<div class="cta">Browse Catalog</div>
</div>
<div class="rightgrid">
<div class="card"><div class="sleeve" style="background:linear-gradient(135deg,#1e1e1e,#3a3a3a)"></div><div class="ptitle">Nightline Sessions</div><div class="pmeta">LP · $28</div></div>
<div class="card"><span class="tag">Ltd</span><div class="sleeve" style="background:linear-gradient(135deg,#ea3927,#1e1e1e)"></div><div class="ptitle">Marigold Static</div><div class="pmeta">LP · $34</div></div>
<div class="card"><div class="sleeve" style="background:linear-gradient(135deg,#8a8a8a,#1e1e1e)"></div><div class="ptitle">Interior Weather</div><div class="pmeta">LP · $26</div></div>
<div class="card"><div class="sleeve" style="background:linear-gradient(135deg,#f39b1e,#1e1e1e)"></div><div class="ptitle">Low Tide Archive</div><div class="pmeta">LP · $30</div></div>
<div class="card"><span class="tag">Pre-Order</span><div class="sleeve" style="background:linear-gradient(135deg,#3a3a3a,#ea3927)"></div><div class="ptitle">Reel to Reel II</div><div class="pmeta">2xLP · $42</div></div>
<div class="card"><div class="sleeve" style="background:linear-gradient(135deg,#1e1e1e,#8a8a8a)"></div><div class="ptitle">Corridor Loops</div><div class="pmeta">LP · $24</div></div>
</div>
</div>
<div class="footer"><span>Shipping</span><span>Trade-In</span><span>Store Hours</span><span>Newsletter</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b0b0b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b0b0b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c8c8c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #212121; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0b0b; color: #ffffff;
border: 1px solid #212121; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b0b0b; color: #f5f5f5;
border: 1px solid #303030; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0f0f0f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0b0b0b; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #212121; }
.brand { font-weight:700; font-size:15px; letter-spacing:-.5px; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#b9b9b9; }
.btnred { background:#f36458; color:#fff; border:none; border-radius:9999px; padding:8px 18px; font-size:13px; }
.hero { padding:44px 32px 24px; }
.hero h1 { font-size:80px; font-weight:400; line-height:1; letter-spacing:-3.2px; margin:0 0 14px; max-width:760px; }
.hero p { font-size:15px; color:#b9b9b9; margin:0 0 18px; max-width:440px; }
.heroctas { display:flex; gap:10px; }
.btnghost { background:#212121; color:#b9b9b9; border:none; border-radius:9999px; padding:8px 16px; font-size:13px; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 32px 20px; }
.darkcard { background:#212121; border:1px solid #353535; border-radius:6px; padding:18px; }
.darkcard h3 { font-size:16px; margin:0 0 6px; letter-spacing:-.24px; }
.darkcard p { font-size:12.5px; color:#b9b9b9; margin:0; line-height:1.5; }
.tag { display:inline-block; font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:9.5px;
text-transform:uppercase; color:#797979; letter-spacing:.05em; margin-bottom:8px; }
.codebar { margin:0 32px 20px; background:#0b0b0b; border:1px solid #212121; border-radius:6px; padding:14px 18px;
display:flex; align-items:center; gap:10px; }
.codebar .prompt { color:#19d600; }
.codebar span.cmd { color:#b9b9b9; font-size:12px; }
footer { display:flex; justify-content:space-between; padding:12px 32px; font-size:11px; color:#797979;
border-top:1px solid #212121; }
</style></head>
<body>
<nav>
<div class="brand">Sanity</div>
<div class="navlinks"><span>Platform</span><span>Solutions</span><span>Docs</span><span>Pricing</span></div>
<button class="btnred">Get started</button>
</nav>
<section class="hero">
<h1>Content as<br>structured data</h1>
<p>The unified content platform for developers who build with structured content, not documents.</p>
<div class="heroctas">
<button class="btnred">Start building</button>
<button class="btnghost">Read the docs</button>
</div>
</section>
<div class="split">
<div class="darkcard"><span class="tag mono">Sanity Studio</span><h3>A React app you fully own</h3><p>Customize every workflow without fighting your CMS.</p></div>
<div class="darkcard"><span class="tag mono">Content Lake</span><h3>Query content like a database</h3><p>GROQ lets you fetch exactly the shape you need.</p></div>
</div>
<div class="codebar mono">
<span class="prompt">$</span><span class="cmd">npx sanity@latest init --template blog</span>
</div>
<footer>
<span>© Sanity</span>
<span>Sanity · Docs · Community · Status</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0d0d0d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0d0d0d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #0d0d0d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #a2a2a2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #ff3333; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #ffffff; color: #0d0d0d;
border: 1px solid #ff3333; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #0d0d0d;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a2a2a2; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ff3333; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #f0f0f0;}
.logo{font-size:19px;font-weight:700;color:#0d0d0d;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;letter-spacing:0.3px;}
.search{width:170px;height:36px;border-radius:9999px;background:#f5f5f5;font-size:12px;color:#a2a2a2;display:flex;align-items:center;padding:0 16px;}
.hero{height:150px;background:#0d0d0d;display:flex;flex-direction:column;justify-content:center;padding:0 32px;}
.hero h1{font-size:30px;font-weight:700;letter-spacing:-0.5px;color:#fff;margin:0 0 6px;}
.hero p{font-size:14px;color:#abb8c3;margin:0;}
.filters{display:flex;gap:8px;padding:14px 32px 0;}
.chip{border:1px solid #e0e0e0;border-radius:9999px;font-size:13px;padding:6px 14px;}
.chip.active{background:#ff3333;color:#fff;border-color:#ff3333;}
.grid{display:flex;gap:14px;padding:14px 32px 0;}
.card{width:150px;border-radius:8px;position:relative;background:#fff;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#fff;border-radius:4px;padding:3px 7px;z-index:2;}
.thumb{height:190px;border-radius:8px 8px 0 0;}
.title{font-size:14px;font-weight:600;padding:8px 0 0;color:#0d0d0d;}
.price{font-size:15px;font-weight:700;color:#ff3333;padding:2px 0 0;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#0d0d0d;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Madman Entertainment</div>
<div class="navlinks"><span>Anime</span><span>Cult Cinema</span><span>Independent</span></div>
<div class="search">Search titles...</div>
</div>
<div class="hero">
<h1>Anime, cult cinema, independent film.</h1>
<p>Curated releases for collectors who read the credits.</p>
</div>
<div class="filters"><div class="chip active">All</div><div class="chip">Blu-ray</div><div class="chip">Pre-order</div><div class="chip">Box Sets</div></div>
<div class="grid">
<div class="card"><span class="badge" style="background:#ff3333;">New</span><div class="thumb" style="background:linear-gradient(160deg,#ff3333,#0d0d0d 70%);"></div><div class="title">Neon Requiem</div><div class="price">$24.99</div></div>
<div class="card"><span class="badge" style="background:#ff6900;">Pre-order</span><div class="thumb" style="background:linear-gradient(160deg,#9b51e0,#0d0d0d 70%);"></div><div class="title">Cold Static Vol.1</div><div class="price">$29.99</div></div>
<div class="card"><span class="badge" style="background:#00d084;">Sale</span><div class="thumb" style="background:linear-gradient(160deg,#0693e3,#0d0d0d 70%);"></div><div class="title">Paper Lantern Society</div><div class="price">$18.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#7bdcb5,#0d0d0d 70%);"></div><div class="title">Iron Blossom Complete</div><div class="price">$34.99</div></div>
</div>
<div class="footer"><span>© Madman Entertainment</span><span>Curated releases since collecting mattered</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FAF9F6; color: #0F0E1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FAF9F6; color: #0F0E1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.1px; margin: 0; color: #0F0E1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6B6A8A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; background: #7B2FBE; color: #FFFFFF;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; background: transparent; color: #7B2FBE;
border: 1px solid #7B2FBE; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FAF9F6; color: #0F0E1A;
border: 1px solid #bfbebf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B6A8A; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #e8ddee; color: #7B2FBE;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#FAF9F6; font-family:'Space Grotesk',Arial,sans-serif; color:#2C2B3E; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #E2E1EC;}
.logo{font-family:'Playfair Display',Georgia,serif;font-size:20px;font-weight:700;color:#0F0E1A;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;}
.hero{height:190px;background:#0F0E1A;display:flex;flex-direction:column;justify-content:center;padding:0 32px;position:relative;overflow:hidden;}
.hero h1{font-family:'Playfair Display',Georgia,serif;font-size:36px;font-weight:700;color:#F0EFF8;margin:0 0 8px;letter-spacing:-0.3px;}
.hero p{font-size:14px;color:#c9c7dd;margin:0 0 14px;max-width:440px;}
.hcta{display:inline-block;background:#7B2FBE;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;border-radius:8px;width:fit-content;}
.beaker{position:absolute;right:60px;top:30px;width:60px;height:90px;background:linear-gradient(180deg,transparent 40%,#00E5CC 40%);border:2px solid #6B6A8A;border-radius:0 0 16px 16px;opacity:0.8;}
.collection{height:44px;display:flex;align-items:center;gap:22px;padding:0 32px;background:#F2F1F8;border-bottom:1px solid #E2E1EC;font-size:14px;font-weight:600;}
.collection .active{border-bottom:2px solid #7B2FBE;padding-bottom:14px;color:#0F0E1A;}
.collection span{color:#6B6A8A;}
.grid{display:flex;gap:16px;padding:20px 32px 0;}
.card{width:206px;background:#fff;border:1px solid #E2E1EC;border-radius:12px;padding:16px;}
.thumb{height:96px;border-radius:8px;margin-bottom:10px;}
.catlab{font-family:'JetBrains Mono',monospace;font-size:11px;color:#6B6A8A;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px;}
.title{font-size:15px;font-weight:600;margin-bottom:6px;}
.swrow{display:flex;gap:6px;margin-bottom:8px;}
.sw{width:18px;height:18px;border-radius:9999px;border:2px solid #E2E1EC;}
.spec{display:inline-block;background:#F2F1F8;font-family:'JetBrains Mono',monospace;font-size:11px;border-radius:4px;padding:3px 8px;margin-right:4px;}
</style>
<div class="nav">
<div class="logo">Mad Science Pen CO</div>
<div class="navlinks"><span>Inks</span><span>Pens</span><span>Nibs</span><span>Limited</span></div>
</div>
<div class="hero">
<h1>Every ink, a formula. Every pen, an instrument.</h1>
<p>Small-batch fountain pens and specialty inks, engineered for people who measure flow in milliliters per minute.</p>
<div class="hcta">Shop Formulas</div>
<div class="beaker"></div>
</div>
<div class="collection"><span class="active">Ink · Series 04</span><span>Nibs</span><span>Limited</span><span>Collab</span></div>
<div class="grid">
<div class="card"><div class="catlab">Ink · Series 04</div><div class="thumb" style="background:linear-gradient(135deg,#7B2FBE,#00E5CC);"></div><div class="title">Reagent Violet Formula No.9</div><div class="swrow"><div class="sw" style="background:#7B2FBE;"></div><div class="sw" style="background:#00E5CC;"></div><div class="sw" style="background:#F5A623;"></div></div><div class="spec">EF · 0.4mm</div></div>
<div class="card"><div class="catlab">Pen · Formula 12</div><div class="thumb" style="background:linear-gradient(135deg,#0F0E1A,#7B2FBE);"></div><div class="title">Lab Coat Fountain Pen</div><div class="swrow"><div class="sw" style="background:#0F0E1A;"></div><div class="sw" style="background:#00BBA8;"></div></div><div class="spec">M · FLEX</div></div>
<div class="card"><div class="catlab">Ink · Limited</div><div class="thumb" style="background:linear-gradient(135deg,#00E5CC,#0F0E1A);"></div><div class="title">UV Reactive Formula No.3</div><div class="swrow"><div class="sw" style="background:#00E5CC;"></div><div class="sw" style="background:#7B2FBE;"></div></div><div class="spec">B · WET</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #191919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #191919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; margin: 0; color: #191919; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.23; margin: 0; color: #636466; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #dc1e1e; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #191919;
border: 1px solid #dc1e1e; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #191919;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #636466; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #dc1e1e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'DIN Next LT Pro','Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#333132; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.utilbar{height:32px;background:#dc1e1e;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#fff;}
.nav{height:64px;background:#191919;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#fff;text-transform:uppercase;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;color:#fff;}
.navlinks span:first-child{border-bottom:3px solid #dc1e1e;padding-bottom:20px;}
.hero{height:210px;background:#191919;display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;}
.heroText h1{font-size:38px;font-weight:600;color:#fff;margin:0 0 10px;letter-spacing:-0.5px;}
.heroText p{font-size:14px;color:#dedede;margin:0 0 16px;max-width:380px;}
.cta{display:inline-block;background:#dc1e1e;color:#fff;font-size:15px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:14px 28px;border-radius:4px;}
.grill{position:absolute;right:110px;top:50px;width:140px;height:100px;border-radius:50% 50% 20px 20px;background:linear-gradient(160deg,#4d4d4f,#191919);}
.leg{position:absolute;right:130px;top:145px;width:6px;height:30px;background:#4d4d4f;}
.leg2{position:absolute;right:200px;top:145px;width:6px;height:30px;background:#4d4d4f;}
.sec{padding:16px 32px 0;}
.tiles{display:flex;gap:10px;margin-bottom:16px;}
.tile{flex:1;background:#f7f7f7;border-radius:4px;text-align:center;padding:12px 4px;font-size:14px;font-weight:600;color:#191919;}
.secTitle{font-size:18px;font-weight:600;color:#191919;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border:1px solid #ededed;border-radius:4px;position:relative;}
.thumb{height:90px;background:#f7f7f7;border-radius:4px 4px 0 0;position:relative;overflow:hidden;}
.grillmini{position:absolute;left:60px;top:14px;width:80px;height:56px;border-radius:50% 50% 10px 10px;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:3px 8px;border-radius:4px;color:#fff;}
.badge.sale{background:#dc1e1e;}
.ctitle{font-size:16px;font-weight:600;color:#191919;padding:10px 12px 2px;}
.cprice{font-size:18px;font-weight:700;color:#191919;padding:0 12px 12px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#191919;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#9d9fa2;}
</style>
<div class="wrap">
<div class="utilbar">Free Shipping on Orders Over $49</div>
<div class="nav">
<div class="logo">Weber</div>
<div class="navlinks"><span>Gas Grills</span><span>Charcoal</span><span>Smokers</span><span>Recipes</span></div>
</div>
<div class="hero">
<div class="heroText">
<h1>Fire It Up</h1>
<p>Precision-engineered grills built to sear, smoke, and outlast the backyard.</p>
<div class="cta">Shop Grills</div>
</div>
<div class="grill"></div><div class="leg"></div><div class="leg2"></div>
</div>
<div class="sec">
<div class="tiles">
<div class="tile">Gas Grills</div><div class="tile">Charcoal</div><div class="tile">Smokers</div><div class="tile">Portable</div>
</div>
<div class="secTitle">Best Selling Grills</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge sale">Sale</div><div class="grillmini" style="background:linear-gradient(160deg,#4d4d4f,#191919)"></div></div><div class="ctitle">Genesis E-325s</div><div class="cprice">$949.00</div></div>
<div class="card"><div class="thumb"><div class="grillmini" style="background:linear-gradient(160deg,#636466,#191919)"></div></div><div class="ctitle">Original Kettle 22"</div><div class="cprice">$219.00</div></div>
<div class="card"><div class="thumb"><div class="grillmini" style="background:linear-gradient(160deg,#007581,#191919)"></div></div><div class="ctitle">Summit S-670</div><div class="cprice">$2,499.00</div></div>
</div>
</div>
<div class="footer"><span>© Grilling Since 1952</span><span>Find a Retailer</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafaf6; color: #2e2e28;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafaf6; color: #2e2e28;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #2e2e28; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b65; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #b74038; color: #fafaf6;
border: none; border-radius: 4px; padding: 13px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #fafaf6; color: #2e2e28;
border: 1px solid #b74038; border-radius: 4px;
padding: 12px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2e2e28;
border: 1px solid #c7c7c2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b65; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffb503; color: #2e2e28;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafaf6; color:#2e2e28; box-sizing:border-box;
font-family:'Figtree',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; border-bottom:1px solid #dedede; }
.brand { font-family:'Young Serif',Georgia,serif; font-size:20px; font-weight:400; color:#b74038; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#6b6b65; }
.btn-primary { background:#b74038; color:#fafaf6; border:none; border-radius:4px; padding:11px 20px; font-size:13px; font-weight:600; }
main { display:flex; height:calc(640px - 70px - 44px); }
.gallery { width:390px; background:#f4f6f8; position:relative; display:flex; align-items:center; justify-content:center; }
.pen { width:210px; height:20px; border-radius:9999px; background:linear-gradient(90deg,#b74038,#ffb503 60%,#2e2e28); transform:rotate(-8deg); box-shadow:0 10px 24px rgba(0,0,0,0.12); }
.info { flex:1; padding:28px 32px; display:flex; flex-direction:column; gap:13px; }
.cat { font-size:12px; color:#6b6b65; text-transform:uppercase; letter-spacing:0.4px; }
h1 { font-family:'Young Serif',Georgia,serif; font-size:24px; font-weight:400; margin:0; }
.price-row { display:flex; align-items:center; gap:10px; }
.price { font-size:20px; font-weight:700; }
.sale-tag { background:#ffb503; color:#2e2e28; font-size:11px; font-weight:700; padding:3px 9px; border-radius:4px; }
.desc { font-size:13px; color:#131313; line-height:1.55; max-width:340px; }
.inkrow { display:flex; align-items:center; gap:10px; }
.ink-label { font-size:11px; color:#6b6b65; }
.swatches { display:flex; gap:8px; }
.isw { width:24px; height:24px; border-radius:9999px; border:2px solid transparent; }
.isw.on { border-color:#2e2e28; }
.i1 { background:#b74038; } .i2 { background:#1c3b44; } .i3 { background:#2e2e28; } .i4 { background:#ffb503; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#b74038; color:#fafaf6; border:none; border-radius:4px; padding:14px; font-size:14px; font-weight:600; }
.btn-sec { background:#fff; color:#2e2e28; border:1px solid #dedede; border-radius:4px; padding:14px 18px; font-size:13px; font-weight:600; }
footer { padding:12px 36px; border-top:1px solid #dedede; font-size:11px; color:#6b6b65; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Birmingham Pen CO</div>
<div class="navlinks"><span>Fountain Pens</span><span>Inks</span><span>Paper</span><span>Gift Sets</span></div>
<button class="btn-primary">Shop Pens</button>
</nav>
<main>
<div class="gallery"><div class="pen"></div></div>
<div class="info">
<span class="cat">Handcrafted Fountain Pen</span>
<h1>Sloss Furnace No. 3</h1>
<div class="price-row"><span class="price">$185.00</span><span class="sale-tag">Small Batch</span></div>
<p class="desc">Turned from Alabama walnut, fitted with a Jowo #6 steel nib — named for the ironworks that shaped the city.</p>
<div class="inkrow"><span class="ink-label">Ink pairing:</span>
<div class="swatches"><span class="isw i1 on"></span><span class="isw i2"></span><span class="isw i3"></span><span class="isw i4"></span></div>
</div>
<div class="btn-row">
<button class="btn-add">Add to Cart</button>
<button class="btn-sec">Choose Nib Size</button>
</div>
</div>
</main>
<footer><span>© Birmingham Pen CO</span><span>Handmade in Birmingham, Alabama</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #545454; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #f9fafb; color: #141414;
border: 1px solid #108474; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9fafb; color: #333333;
border: 1px solid #c0c0c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #545454; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #d02f2e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:'DM Sans','Inter',sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dedede;}
.logo{font-family:'Syne','DM Sans',sans-serif;font-size:21px;font-weight:700;color:#108474;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#333333;}
.navcta{background:#108474;color:#fff;font-size:12px;font-weight:600;padding:10px 20px;border-radius:8px;}
.hero{height:250px;display:flex;align-items:center;padding:0 36px;background:linear-gradient(120deg,#102b26 0%,#108474 100%);}
.herotext{width:420px;}
.badge{display:inline-block;background:#f4b453;color:#141414;font-size:11px;font-weight:700;padding:4px 12px;border-radius:9999px;margin-bottom:14px;}
.headline{font-size:30px;font-weight:700;color:#fff;margin-bottom:12px;line-height:1.25;}
.sub{font-size:14px;color:#e9d8d1;margin-bottom:18px;max-width:340px;}
.btn{display:inline-block;background:#ff379c;color:#fff;font-size:14px;font-weight:600;padding:12px 26px;border-radius:8px;background:#fcd46c;color:#141414;}
.compact{width:220px;height:180px;margin-left:60px;position:relative;}
.puff{position:absolute;left:60px;top:20px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e9d8d1,#b05e69 70%);}
.gold{position:absolute;left:90px;top:130px;width:50px;height:14px;background:#f4b453;border-radius:9999px;}
.sec{padding:20px 36px 0;}
.sectitle{font-size:15px;font-weight:700;color:#141414;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border:1px solid #e8e8e8;border-radius:12px;padding:12px;position:relative;}
.tag{position:absolute;top:8px;left:8px;background:#d02f2e;color:#fff;font-size:9px;font-weight:700;padding:3px 8px;border-radius:8px;}
.thumb{height:88px;border-radius:8px;margin-bottom:10px;}
.pname{font-size:13px;font-weight:600;color:#141414;}
.pprice{font-size:13px;color:#108474;font-weight:700;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">NL Beauty</div>
<div class="navlinks"><span>Face</span><span>Eyes</span><span>Lips</span><span>Sets</span></div>
<div class="navcta">Shop All</div>
</div>
<div class="hero">
<div class="herotext">
<div class="badge">New: Terracotta Edit</div>
<div class="headline">Bold color, earthy confidence.</div>
<div class="sub">Makeup built for warmth, not perfection — colors that feel like your own skin.</div>
<div class="btn">Shop the Edit</div>
</div>
<div class="compact"><div class="puff"></div><div class="gold"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="tag">-20%</div><div class="thumb" style="background:linear-gradient(135deg,#108474,#031612)"></div><div class="pname">Velvet Matte Lipstick</div><div class="pprice">29.90 лв</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d8a598,#b05e69)"></div><div class="pname">Terracotta Blush Duo</div><div class="pprice">34.90 лв</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3c9342,#102b26)"></div><div class="pname">Botanical Setting Spray</div><div class="pprice">24.90 лв</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f4b453,#fcd46c)"></div><div class="pname">Gold Shimmer Palette</div><div class="pprice">49.90 лв</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #111111; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #111111;
border: 1px solid #111111; border-radius: 9999px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #cc0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'Noto Sans JP','Noto Sans',-apple-system,sans-serif; color:#111; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #eee;}
.logo{font-size:20px;font-weight:700;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;}
.navlinks .active{color:#111;border-bottom:2px solid #111;padding-bottom:20px;}
.navlinks .inact{color:#555;}
.searchwrap{padding:16px 40px 0;}
.searchpill{background:#f8f8f8;border:1px solid #e0e0e0;border-radius:9999px;height:48px;display:flex;align-items:center;padding:0 20px;font-size:14px;color:#888;max-width:520px;}
.cats{display:flex;gap:10px;padding:14px 40px 0;}
.tab{border-radius:9999px;padding:6px 16px;font-size:12px;font-weight:600;background:#f8f8f8;color:#555;}
.tab.active{background:#111;color:#fff;}
.sec{padding:18px 40px 0;}
.sectitle{font-size:18px;font-weight:600;margin-bottom:12px;}
.grid{display:flex;gap:16px;}
.card{width:180px;border:1px solid #eee;border-radius:4px;padding:16px;}
.cover{aspect-ratio:3/4;border-radius:4px;margin-bottom:10px;}
.ptitle{font-size:18px;font-weight:600;margin:0;}
.pprice{font-size:16px;color:#555;margin-top:4px;}
.badge{display:inline-block;background:#cc0000;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:4px;margin-bottom:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#f8f8f8;border-top:1px solid #e0e0e0;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;color:#555;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kinokuniya Usa</div>
<div class="navlinks"><div class="active">Books</div><div class="inact">Manga</div><div class="inact">Stationery</div><div class="inact">Events</div></div>
</div>
<div class="searchwrap"><div class="searchpill">Search by title, author, or ISBN...</div></div>
<div class="cats">
<div class="tab active">All</div>
<div class="tab">Fiction</div>
<div class="tab">Manga</div>
<div class="tab">Art & Design</div>
<div class="tab">Cooking</div>
</div>
<div class="sec">
<div class="sectitle">New Arrivals</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="cover" style="background:linear-gradient(160deg,#cc0000,#111)"></div><div class="ptitle">Salt Water Notes</div><div class="pprice">$18.00</div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#d4a017,#333)"></div><div class="ptitle">The Quiet Ledger</div><div class="pprice">$22.50</div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#111,#888)"></div><div class="ptitle">Kitchen Almanac</div><div class="pprice">$29.00</div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#888,#cc0000)"></div><div class="ptitle">Paper Lanterns Vol. 3</div><div class="pprice">$12.99</div></div>
</div>
</div>
<div class="footer"><span>Store Locations · Events Calendar</span><span>Membership</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 500; line-height: 1.2; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0.1em; background: #010101; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0.1em; background: #ffffff; color: #121212;
border: 1px solid #010101; border-radius: 0px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.05em; background: #f5f5f5; color: #6b6b6b;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#121212; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; }
*{box-sizing:border-box;}
.announce{height:32px;background:#010101;color:#fff;font-size:11px;letter-spacing:.05em;text-transform:uppercase;text-align:center;line-height:32px;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-size:15px;font-weight:300;letter-spacing:.02em;}
.navlinks{display:flex;gap:22px;font-size:13px;letter-spacing:.02em;}
.hero{height:280px;background:#010101;color:#fff;position:relative;display:flex;align-items:flex-end;padding:0 32px 28px;overflow:hidden;}
.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,#010101,#2c2c2c 60%,#010101);opacity:.9;}
.hero h1{position:relative;z-index:2;font-size:34px;font-weight:300;letter-spacing:-.02em;margin:0;max-width:520px;}
.grid{display:flex;gap:16px;padding:20px 32px;}
.card{width:190px;}
.thumb{width:100%;aspect-ratio:3/4;background:#f5f5f5;}
.title{font-size:13px;font-weight:500;margin-top:8px;}
.price{font-size:12px;color:#6b6b6b;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:60px;background:#010101;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;letter-spacing:.03em;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">Free shipping on orders over $150</div>
<div class="nav">
<div class="logo">Pilgrim Surf Supply</div>
<div class="navlinks"><div>Boards</div><div>Apparel</div><div>Wetsuits</div><div>Journal</div></div>
</div>
<div class="hero">
<h1>Goods for surf, skate, and the water in between.</h1>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#2c2c2c,#010101)"></div><div class="title">Brooklyn Twin Fin</div><div class="price">$780</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#dedede,#2c2c2c)"></div><div class="title">Wax Pocket Tee</div><div class="price">$48</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#010101,#dedede)"></div><div class="title">Full Suit 4/3mm</div><div class="price">$310</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#2c2c2c,#dedede)"></div><div class="title">Deck Grip Traction</div><div class="price">$45</div></div>
</div>
<div class="footer"><span>© Pilgrim Surf Supply · Brooklyn</span><span>Shop · About · Help</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; background: #72c02c; color: #000000;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; background: #ffffff; color: #444444;
border: 1px solid #72c02c; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #080808;
border: 1px solid #c1c1c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f7f7f7; color: #777777;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Open Sans',Arial,'Helvetica Neue',sans-serif; color:#080808; }
*{box-sizing:border-box;}
.nav{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #eeeeee;}
.logo{font-size:19px;font-weight:700;color:#72c02c;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;}
.hero{height:180px;background:#f5f5f5;display:flex;align-items:center;padding:0 30px;border-bottom:1px solid #eeeeee;}
.hero h1{font-size:34px;font-weight:700;margin:0 0 8px;}
.hero p{font-size:14px;color:#444;margin:0;}
.strip{display:flex;}
.side{width:220px;padding:20px;border-right:1px solid #eeeeee;}
.side h4{font-size:12px;text-transform:uppercase;color:#777;margin:0 0 10px;letter-spacing:0.5px;}
.frow{font-size:13px;color:#444;padding:6px 0;border-bottom:1px solid #eeeeee;}
.main{flex:1;padding:20px;}
.grid{display:flex;flex-wrap:wrap;gap:14px;}
.card{width:150px;border:1px solid #eeeeee;border-radius:4px;padding:10px;}
.thumb{height:90px;background:#f5f5f5;border-radius:4px;margin-bottom:8px;}
.ptitle{font-size:13px;font-weight:600;margin-bottom:4px;}
.ruling{display:inline-block;background:#f7f7f7;border:1px solid #eeeeee;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#777;padding:2px 6px;margin-bottom:6px;}
.pprice{font-size:14px;font-weight:700;color:#080808;}
.btn{margin-top:8px;background:#72c02c;color:#fff;font-size:12px;font-weight:600;text-align:center;padding:6px;border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Rhodia</div>
<div class="navlinks"><span>Notepads</span><span>Notebooks</span><span>Ruling Guide</span></div>
</div>
<div class="hero">
<div>
<h1>Ruled for precision.</h1>
<p>French-made paper systems, dot-grid to lined, since 1934.</p>
</div>
</div>
<div class="strip">
<div class="side">
<h4>Ruling Type</h4>
<div class="frow">Dot Grid</div>
<div class="frow">Lined</div>
<div class="frow">Graph</div>
<div class="frow">Blank</div>
<h4 style="margin-top:16px;">Format</h4>
<div class="frow">No. 16 (A5)</div>
<div class="frow">No. 18 (A4)</div>
</div>
<div class="main">
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ruling">Dot Grid</div><div class="ptitle">Rhodiarama No. 16</div><div class="pprice">$12.50</div><div class="btn">Add to Cart</div></div>
<div class="card"><div class="thumb" style="background:#f0f0f0"></div><div class="ruling">Lined</div><div class="ptitle">Basics Notepad A5</div><div class="pprice">$4.25</div><div class="btn">Add to Cart</div></div>
<div class="card"><div class="thumb" style="background:#f0f0f0"></div><div class="ruling">Graph</div><div class="ptitle">Classic Pad No. 18</div><div class="pprice">$6.90</div><div class="btn">Add to Cart</div></div>
<div class="card"><div class="thumb" style="background:#f0f0f0"></div><div class="ruling">Blank</div><div class="ptitle">Sketch Block A4</div><div class="pprice">$9.10</div><div class="btn">Add to Cart</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ebebeb; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ebebeb; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; background: #bd2426; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; background: #ffffff; color: #272727;
border: 1px solid #bd2426; border-radius: 4px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #272727;
border: 1px solid #bababa; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #bd2426; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ebebeb; color:#272727; box-sizing:border-box;
font-family:Arial, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; }
* { box-sizing:border-box; }
body { position:relative; }
nav { height:48px; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 20px; }
.brand { font-size:20px; font-weight:700; }
.brand small { font-size:11px; font-weight:600; color:#bd2426; margin-left:6px; text-transform:uppercase; }
.navlinks { display:flex; gap:16px; font-size:13px; font-weight:600; color:#404040; }
.search { background:#ffffff; border:1px solid #bfbfbf; border-radius:8px; height:32px; width:200px;
font-size:12px; color:#595959; display:flex; align-items:center; padding:0 10px; }
.catnav { height:34px; background:#ebebeb; display:flex; align-items:center; gap:14px; padding:0 20px;
font-size:12px; font-weight:600; color:#404040; }
.catnav .active { color:#bd2426; }
main { display:flex; gap:18px; padding:12px 20px 0; height:480px; }
.left { width:230px; display:flex; flex-direction:column; gap:8px; }
.case { background:#ffffff; border:1px solid #bfbfbf; border-radius:4px; height:340px; position:relative;
overflow:hidden; }
.case .art { position:absolute; inset:14px 14px 60px; border-radius:2px;
background:linear-gradient(200deg,#2b2b2b 0%,#521010 55%,#000 100%); }
.case .art::after { content:''; position:absolute; left:10%; right:10%; top:38%; height:2px; background:#f68b1f; opacity:.7; }
.case .spine { position:absolute; left:14px; right:14px; bottom:14px; top:284px; background:#f5f5f5;
border:1px solid #dedede; border-radius:2px; display:flex; align-items:center; padding:0 8px;
font-size:10px; color:#595959; font-family:Courier, monospace; }
.badges-float { position:absolute; top:8px; left:8px; display:flex; flex-direction:column; gap:5px; z-index:2; }
.badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
padding:2px 6px; border-radius:4px; color:#fff; }
.b-sale { background:#bd2426; }
.b-preorder { background:#f68b1f; }
.thumbs { display:flex; gap:6px; }
.thumb { flex:1; height:44px; background:#ffffff; border:1px solid #bfbfbf; border-radius:4px; }
.thumb.sel { border-color:#bd2426; border-width:2px; }
.right { flex:1; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.crumb { font-size:11px; color:#737373; }
h1 { font-size:19px; font-weight:700; margin:2px 0 0; line-height:1.3; }
.meta { font-size:11px; color:#595959; font-family:Courier, monaco, monospace; }
.stars { font-size:12px; color:#f68b1f; }
.stars span.n { color:#595959; margin-left:6px; font-family:Arial; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:2px; }
.price { font-size:22px; font-weight:700; color:#bd2426; }
.price-old { font-size:13px; color:#595959; text-decoration:line-through; }
.save { font-size:11px; font-weight:700; color:#516b1d; }
.formats { display:flex; gap:8px; margin-top:2px; }
.chip { font-size:12px; font-weight:600; color:#404040; background:#ffffff; border:1px solid #bfbfbf;
border-radius:4px; padding:7px 14px; }
.chip.sel { border-color:#bd2426; border-width:2px; color:#bd2426; }
.cta-row { display:flex; gap:10px; margin-top:6px; }
.btn-primary { background:#bd2426; color:#fff; font-size:13px; font-weight:700; border-radius:4px; height:40px;
padding:0 22px; display:flex; align-items:center; justify-content:center; }
.btn-secondary { background:#0051c3; color:#fff; font-size:13px; font-weight:700; border-radius:4px; height:40px;
padding:0 20px; display:flex; align-items:center; justify-content:center; }
.specs { margin-top:4px; background:#ffffff; border:1px solid #bfbfbf; border-radius:4px; padding:10px 14px;
display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; }
.spec-item { font-size:11px; }
.spec-item .lab { color:#737373; text-transform:uppercase; letter-spacing:.4px; font-size:10px; }
.spec-item .val { color:#272727; font-weight:600; font-size:12px; }
.related { display:flex; gap:8px; margin-top:auto; }
.rel { flex:1; height:50px; background:#ffffff; border:1px solid #dedede; border-radius:4px; }
footer { position:absolute; bottom:0; left:0; right:0; height:26px; background:#272727; color:#62a1d8;
display:flex; align-items:center; justify-content:space-between; padding:0 20px; font-size:10px; }
</style></head>
<body>
<nav>
<span class="brand">Amiami Movies A 2<small>Movies & Media</small></span>
<div class="navlinks"><span>Anime</span><span>Live Action</span><span>Box Sets</span><span>Pre-Order</span></div>
<div class="search">Search title, SKU…</div>
</nav>
<div class="catnav"><span class="active">Blu-ray</span><span>4K UHD</span><span>DVD</span><span>Steelbook</span><span>Box Sets</span></div>
<main>
<div class="left">
<div class="case">
<div class="badges-float">
<span class="badge b-sale">Sale</span>
<span class="badge b-preorder">Pre-Order</span>
</div>
<div class="art"></div>
<div class="spine">SKU BRAY-40912-LE</div>
</div>
<div class="thumbs">
<div class="thumb sel"></div><div class="thumb"></div><div class="thumb"></div>
</div>
</div>
<div class="right">
<div class="crumb">Home / Movies & Media / Blu-ray / <b>Crimson Static — Collector's Edition</b></div>
<h1>Crimson Static: Collector's Edition (Blu-ray + Booklet)</h1>
<div class="meta">Region A · Runtime 118 min · Reserve ships Q2 2027</div>
<div class="stars">★★★★★ <span class="n">4.8 (52 reviews)</span></div>
<div class="price-row">
<span class="price">$54.99</span>
<span class="price-old">$64.99</span>
<span class="save">Save 15%</span>
</div>
<div class="formats">
<span class="chip sel">Blu-ray + Booklet</span>
<span class="chip">4K UHD Steelbook</span>
<span class="chip">Standard DVD</span>
</div>
<div class="cta-row">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Proceed to Checkout</div>
</div>
<div class="specs">
<div class="spec-item"><div class="lab">Audio</div><div class="val">JP 5.1 / EN Dub 2.0</div></div>
<div class="spec-item"><div class="lab">Subtitles</div><div class="val">English, Japanese</div></div>
<div class="spec-item"><div class="lab">Extras</div><div class="val">40-page art booklet</div></div>
<div class="spec-item"><div class="lab">Case</div><div class="val">Rigid slipcase</div></div>
</div>
<div class="related"><div class="rel"></div><div class="rel"></div><div class="rel"></div><div class="rel"></div></div>
</div>
</main>
<footer><span>© Amiami Movies A 2</span><span>Region-locked — verify player compatibility</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #1f2021;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #1f2021;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #1f2021; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #5a5d60; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #d02e2e; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #f6f6f6; color: #1f2021;
border: 1px solid #d02e2e; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #1f2021;
border: 1px solid #c0c0c1; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a5d60; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #d02e2e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Fabriga','Roboto',Arial,sans-serif; background:#f6f6f6; color:#1f2021; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e6e6e6;}
.logo{font-size:19px;font-weight:600;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;}
.navlinks .a{border-bottom:2px solid #d02e2e;padding-bottom:24px;}
.hero{height:250px;background:#012b3a;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.herotext{max-width:400px;color:#fff;}
.herotext h1{font-size:32px;font-weight:600;letter-spacing:-.5px;margin:0 0 12px;line-height:1.25;}
.herotext p{font-size:15px;color:#a9c2cc;margin:0 0 18px;max-width:340px;}
.hbtn{display:inline-block;background:#d02e2e;color:#fff;font-size:16px;font-weight:600;letter-spacing:.25px;padding:14px 32px;border-radius:9999px;}
.bottle{width:90px;height:170px;border-radius:16px;background:linear-gradient(150deg,#69ced7,#025776);position:relative;box-shadow:0 14px 30px rgba(0,0,0,.3);}
.bottle:after{content:'';position:absolute;left:20px;top:-14px;width:50px;height:24px;border-radius:8px 8px 0 0;background:#012b3a;}
.sec{padding:20px 40px 0;}
.sectitle{font-size:18px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:196px;background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.08);padding-bottom:16px;}
.thumb{aspect-ratio:1;height:110px;border-radius:12px 12px 0 0;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;color:#fff;background:#d02e2e;}
.badge.sus{background:#69ced7;color:#1f2021;}
.badge.new{background:#56ad6a;}
.cbody{padding:10px 16px 0;}
.ctitle{font-size:16px;font-weight:500;}
.cprice{font-size:14px;color:#3d3f41;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:0;}
</style>
<div class="wrap">
<div class="nav"><div class="logo">Oars Alps</div><div class="navlinks"><span class="a">Skincare</span><span>Body</span><span>Hair</span><span>Sets</span></div></div>
<div class="hero"><div class="herotext"><h1>Grooming that smells like clean air.</h1><p>Trail-tested formulas for men who take the outdoors seriously.</p><div class="hbtn">Shop Bestsellers</div></div><div class="bottle"></div></div>
<div class="sec">
<div class="sectitle">Bestsellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#025776,#012b3a)"><div class="badge new">New</div></div><div class="cbody"><div class="ctitle">Daily Face Moisturizer</div><div class="cprice">$28</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#69ced7,#037ca8)"><div class="badge sus">Sustainable</div></div><div class="cbody"><div class="ctitle">Sea Salt Body Wash</div><div class="cprice">$18</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#56ad6a,#2f6e3f)"></div><div class="cbody"><div class="ctitle">Cedarwood Shave Cream</div><div class="cprice">$22</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#d02e2e,#7a1a1a)"><div class="badge">Sale</div></div><div class="cbody"><div class="ctitle">Trailhead Deodorant</div><div class="cprice">$14</div></div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f6ed; color: #231e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f6ed; color: #231e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.22px; margin: 0; color: #231e1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #7e7b71; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.56px; background: #ff5436; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.56px; background: #f8f6ed; color: #231e1e;
border: 1px solid #ff5436; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f6ed; color: #231e1e;
border: 1px solid #c3c0b9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7e7b71; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 10px; font-weight: 500; line-height: 1.2; letter-spacing: 0.60px; background: #ef4123; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f6ed; color:#333333; box-sizing:border-box;
font-family:'Oswald','Arial Narrow',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#231e1e; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { color:#ffffff; font-size:19px; font-weight:600; margin:0; letter-spacing:0.4px; }
.navlinks { display:flex; gap:24px; }
.navlinks span { color:#d8d4c4; font-size:12px; font-weight:500; letter-spacing:0.03em; }
.navlinks .cta { background:#ff5436; color:#fff; padding:8px 18px; border-radius:8px; font-size:11px; font-weight:600; }
.hero { height:250px; display:flex; align-items:center; padding:0 36px; gap:40px; }
.frame { width:190px; height:190px; position:relative; }
.frame .plank { position:absolute; left:0; right:0; height:24px; background:#d8d4c4; border-radius:2px; }
.frame .p1 { top:0; } .frame .p2 { top:50px; background:#ff5436; } .frame .p3 { top:100px; } .frame .p4 { top:150px; background:#1351ee; }
.heroTxt h1 { font-size:32px; font-weight:600; margin:0 0 12px; color:#231e1e; line-height:1.2; }
.heroTxt p { font-family:Georgia,serif; font-size:13px; color:#333333; margin:0 0 18px; max-width:340px; line-height:1.6; font-style:italic; }
.heroTxt .cta { display:inline-block; background:#ff5436; color:#fff; font-weight:600; font-size:13px; padding:12px 28px; border-radius:8px; }
.section-label { padding:16px 36px 10px; font-size:15px; font-weight:600; color:#231e1e; letter-spacing:0.02em; }
.grid { display:flex; gap:14px; padding:0 36px; }
.card { flex:1; background:#ffffff; border-radius:12px; padding:12px; }
.card .art { height:92px; border-radius:8px; margin-bottom:10px; }
.a1 { background:linear-gradient(160deg,#231e1e,#7e7b71); } .a2 { background:linear-gradient(160deg,#ff5436,#ef4123); }
.a3 { background:linear-gradient(160deg,#d8d4c4,#9e998f); } .a4 { background:linear-gradient(160deg,#386641,#d5fa44); }
.card h3 { font-size:12px; font-weight:600; color:#231e1e; margin:0 0 4px; }
.card p { font-family:'GT America Mono',Consolas,monospace; font-size:9px; color:#7e7b71; margin:0 0 8px; }
.card .price { font-size:14px; font-weight:600; color:#ff5436; }
footer { height:56px; margin-top:14px; background:#231e1e; display:flex; align-items:center; gap:26px; padding:0 36px; }
footer span { color:#d8d4c4; font-size:10px; font-weight:500; letter-spacing:0.03em; }
</style></head>
<body>
<nav>
<p class="brand">Floyd</p>
<div class="navlinks"><span>Sofas</span><span>Beds</span><span>Storage</span><span class="cta">Shop Furniture</span></div>
</nav>
<div class="hero">
<div class="frame"><div class="plank p1"></div><div class="plank p2"></div><div class="plank p3"></div><div class="plank p4"></div></div>
<div class="heroTxt">
<h1>Every joint exposed.<br>Every material declared.</h1>
<p>Detroit-built furniture designed to be lived with, repaired, and never disappeared into.</p>
<span class="cta">Shop the Collection</span>
</div>
</div>
<div class="section-label">Built to Stay</div>
<div class="grid">
<div class="card"><div class="art a1"></div><h3>The Sofa</h3><p>PLYWOOD / FELT / STEEL</p><div class="price">$1,795</div></div>
<div class="card"><div class="art a2"></div><h3>The Platform Bed</h3><p>POWDER-COATED STEEL</p><div class="price">$895</div></div>
<div class="card"><div class="art a3"></div><h3>The Storage Shelf</h3><p>BIRCH PLYWOOD</p><div class="price">$495</div></div>
<div class="card"><div class="art a4"></div><h3>The Side Table</h3><p>LIMITED EDITION</p><div class="price">$345</div></div>
</div>
<footer>
<span>LIFETIME WARRANTY</span><span>FLAT-PACK SHIPPING</span><span>REPLACEMENT PARTS</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e0e10; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e0e10; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8d8e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #53fc18; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e0e10; color: #53fc18;
border: 1px solid #53fc18; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0e0e10; color: #f5f5f5;
border: 1px solid #333335; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8d8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #193411; color: #53fc18;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0E0E10; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:640px; }
.main { flex:1; display:flex; flex-direction:column; }
.player { height:340px; background:linear-gradient(135deg,#1F1F23,#0E0E10); position:relative; display:flex; align-items:center; justify-content:center; }
.live { position:absolute; top:14px; left:14px; background:#FF1F44; font-size:11px; font-weight:900; letter-spacing:0.04em;
padding:4px 9px; border-radius:4px; }
.viewers { position:absolute; top:14px; left:66px; background:rgba(0,0,0,0.55); font-size:11px; font-weight:700; padding:4px 9px; border-radius:4px; }
.playicon { color:rgba(255,255,255,0.5); font-size:56px; }
.streamerbar { padding:12px 14px; display:flex; align-items:center; gap:12px; background:#161618; border-bottom:1px solid #2D2D31; }
.savatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#53FC18,#161618); border:2px solid #53FC18; }
.sname { font-size:15px; font-weight:800; display:flex; align-items:center; gap:6px; }
.check { color:#53FC18; font-size:13px; }
.scat { font-size:12px; color:#A6A6AD; margin-top:2px; }
.followbtn { margin-left:auto; background:#53FC18; color:#0E0E10; font-weight:800; font-size:13px; padding:8px 18px; border-radius:6px; }
.chat { width:320px; flex:0 0 auto; background:#161618; display:flex; flex-direction:column; border-left:1px solid #2D2D31; }
.chathead { padding:12px 14px; font-size:12px; font-weight:800; color:#A6A6AD; text-transform:uppercase; letter-spacing:0.05em; border-bottom:1px solid #2D2D31; }
.chatmsgs { flex:1; padding:10px 14px; overflow:hidden; }
.cmsg { font-size:13px; margin-bottom:9px; line-height:1.4; }
.badge { font-size:9px; font-weight:800; padding:1px 5px; border-radius:3px; margin-right:5px; }
.uname { font-weight:700; }
.body-c { color:#E4E4E9; }
.chatinput { padding:10px 14px; background:#1F1F23; display:flex; gap:8px; align-items:center; }
.cfield { flex:1; height:32px; background:#2A2A2E; border-radius:6px; }
.sendc { background:#53FC18; color:#0E0E10; font-weight:800; font-size:12px; padding:0 12px; height:32px; border-radius:6px; display:flex; align-items:center; }
</style></head>
<body>
<div class="wrap">
<div class="main">
<div class="player"><span class="live">LIVE</span><span class="viewers">12.4K</span><span class="playicon">▶</span></div>
<div class="streamerbar">
<div class="savatar"></div>
<div><div class="sname">Kick (iOS)<span class="check">✓</span></div><div class="scat">Just Chatting · 12,431 viewers</div></div>
<div class="followbtn">Follow</div>
</div>
</div>
<div class="chat">
<div class="chathead">Stream Chat</div>
<div class="chatmsgs">
<div class="cmsg"><span class="badge" style="background:#3EA6FF;color:#06121F;">MOD</span><span class="uname" style="color:#3EA6FF;">rileym: </span><span class="body-c">welcome everyone to the stream!</span></div>
<div class="cmsg"><span class="badge" style="background:#FFC700;color:#1A1500;">12</span><span class="uname" style="color:#FFC700;">devon_k: </span><span class="body-c">POGGERS that clip 🔥</span></div>
<div class="cmsg"><span class="badge" style="background:#FF4FD8;color:#2A0022;">VIP</span><span class="uname" style="color:#FF4FD8;">nika: </span><span class="body-c">let's gooo</span></div>
<div class="cmsg"><span class="uname" style="color:#7CE7A4;">guest2291: </span><span class="body-c">first time here, this is awesome</span></div>
<div class="cmsg" style="background:rgba(83,252,24,0.12);border-left:2px solid #53FC18;padding-left:8px;">
<span class="uname" style="color:#53FC18;">Kick (iOS): </span><span class="body-c">@guest2291 welcome! 🎉</span></div>
</div>
<div class="chatinput"><div class="cfield"></div><div class="sendc">Chat</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f3f7; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f3f7; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6c6c6c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #008827; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #111111;
border: 1px solid #008827; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #2d2d2d;
border: 1px solid #bababe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c6c6c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #0070cc; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Funko</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f3f3f7; font-family:'ProximaNova-Regular','Helvetica Neue',Arial,sans-serif; color:#2d2d2d; }
*{box-sizing:border-box;}
.util{background:#111;color:#fff;font-size:12px;font-weight:500;display:flex;justify-content:flex-end;gap:16px;padding:8px 24px;}
.nav{background:#111;height:48px;display:flex;align-items:center;justify-content:center;gap:0;}
.navlinks{display:flex;gap:0;}
.navlinks span{color:#fff;font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:12px 16px;}
.navlinks span.active{color:#008827;}
.logo{position:absolute;left:24px;top:14px;color:#fff;font-size:20px;font-weight:900;font-style:italic;}
.search{display:flex;background:#fff;margin:14px 24px;border-radius:8px;overflow:hidden;border:1px solid #d4d4e3;}
.search input{border:none;flex:1;padding:10px 16px;font-size:14px;color:#2d2d2d;}
.search button{background:#008827;color:#fff;border:none;padding:10px 20px;font-weight:700;font-size:14px;}
.hero{background:#111;color:#fff;text-align:center;padding:28px;min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.hero h1{font-family:'Dimbo-Regular',sans-serif;font-size:32px;font-weight:900;margin:0 0 10px;}
.hero button{background:#008827;color:#fff;border:none;border-radius:8px;padding:12px 28px;font-size:15px;font-weight:700;}
.section{padding:18px 24px 0;}
.section h2{font-size:22px;font-weight:900;margin:0 0 14px;font-family:'ProximaNova-Black',sans-serif;}
.grid{display:flex;gap:14px;}
.card{flex:1;background:#fff;border:1px solid #e6e6e6;border-radius:8px;padding:12px;}
.card-img{background:#f3f3f7;border-radius:4px;height:110px;position:relative;display:flex;align-items:center;justify-content:center;}
.pop{width:50px;height:60px;position:relative;}
.pop-head{width:44px;height:44px;background:#e8c9a0;border-radius:50%;position:absolute;top:0;left:3px;}
.pop-eye{width:6px;height:8px;background:#111;border-radius:50%;position:absolute;top:16px;}
.pop-eye.l{left:12px;}
.pop-eye.r{left:26px;}
.pop-body{width:34px;height:22px;background:#c92a1d;border-radius:6px;position:absolute;bottom:0;left:8px;}
.badge{position:absolute;top:6px;left:6px;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;color:#fff;}
.badge.excl{background:#0070cc;}
.badge.sale{background:#cc0000;}
.badge.new{background:#008827;}
.card-title{font-size:14px;font-weight:600;margin-top:10px;}
.card-num{font-family:'Geist Mono',monospace;font-size:12px;color:#6c6c6c;margin-top:2px;}
.price-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;}
.price{font-size:18px;font-weight:700;}
.price.sale{color:#c92a1d;}
.orig{font-size:14px;color:#6c6c6c;text-decoration:line-through;margin-left:4px;}
.stars{color:#fed555;font-size:12px;margin-top:2px;}
.addcart{background:#008827;color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:14px;font-weight:600;width:100%;margin-top:10px;}
</style>
<div class="util">Sign In Help Cart</div>
<div class="nav" style="position:relative;">
<div class="logo">Funko</div>
<div class="navlinks"><span class="active">POP!</span><span>GAMES</span><span>LOUNGEFLY</span><span>APPAREL</span><span>HOME</span><span>SALE</span></div>
</div>
<div class="search"><input placeholder="Search Pop! figures, series, characters..."><button>Search</button></div>
<div class="hero">
<h1>New drops just landed</h1>
<button>Shop New Arrivals</button>
</div>
<div class="section">
<h2>Trending Pop! Figures</h2>
<div class="grid">
<div class="card"><div class="card-img"><div class="badge excl">Exclusive</div><div class="pop"><div class="pop-head"><div class="pop-eye l"></div><div class="pop-eye r"></div></div><div class="pop-body"></div></div></div><div class="card-title">Galaxy Ranger #442</div><div class="card-num">FN-00442</div><div class="stars">★★★★★</div><div class="price-row"><span class="price">$12.99</span></div><button class="addcart">Add to Cart</button></div>
<div class="card"><div class="card-img"><div class="badge sale">Sale</div><div class="pop"><div class="pop-head" style="background:#c9c9c9;"><div class="pop-eye l"></div><div class="pop-eye r"></div></div><div class="pop-body" style="background:#0070cc;"></div></div></div><div class="card-title">Storm Knight #318</div><div class="card-num">FN-00318</div><div class="stars">★★★★☆</div><div class="price-row"><span class="price sale">$9.99</span><span class="orig">$14.99</span></div><button class="addcart">Add to Cart</button></div>
<div class="card"><div class="card-img"><div class="badge new">New</div><div class="pop"><div class="pop-head" style="background:#f2d9b0;"><div class="pop-eye l"></div><div class="pop-eye r"></div></div><div class="pop-body" style="background:#008827;"></div></div></div><div class="card-title">Forest Sprite #501</div><div class="card-num">FN-00501</div><div class="stars">★★★★★</div><div class="price-row"><span class="price">$12.99</span></div><button class="addcart">Add to Cart</button></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4f6e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4f6e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e8455f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4f6e; color: #000000;
border: 1px solid #e8455f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4f6e; color: #f5f5f5;
border: 1px solid #fd6a84; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fb4d6c; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:296px; height:640px; float:left;
background:radial-gradient(circle at 50% 30%, #3a1626, #121212 70%); overflow:hidden; }
.scrim-top { position:absolute; top:0; left:0; right:0; height:90px; padding:16px;
background:linear-gradient(rgba(0,0,0,0.55), transparent); display:flex; justify-content:space-between; align-items:flex-start; }
.badge-live { background:#ff4f6e; color:#fff; font-size:11px; font-weight:700; border-radius:4px; padding:2px 6px; }
.viewer { font-size:11px; font-weight:700; color:rgba(255,255,255,0.85); background:rgba(0,0,0,0.4); border-radius:4px; padding:2px 6px; }
.scrim-bottom { position:absolute; bottom:64px; left:0; right:0; padding:14px 16px;
background:linear-gradient(transparent, rgba(0,0,0,0.65)); }
.liver { display:flex; align-items:center; gap:8px; }
.avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#ff4f6e,#8b5cf6); border:2px solid #ff4f6e; }
.liver b { font-size:15px; font-weight:700; }
.liver span { display:block; font-size:11px; color:rgba(255,255,255,0.6); }
.chat { position:absolute; bottom:70px; left:16px; right:80px; display:flex; flex-direction:column; gap:5px; }
.msg { font-size:11px; background:rgba(0,0,0,0.35); border-radius:10px; padding:4px 8px; color:rgba(255,255,255,0.85); width:fit-content; }
.msg b { color:#ffc83d; margin-right:4px; }
.composer { position:absolute; bottom:14px; left:16px; right:16px; height:36px; border-radius:24px;
background:#2c2c2e; display:flex; align-items:center; padding:0 14px; }
.composer span.ph { font-size:12px; color:rgba(255,255,255,0.45); }
.composer span.send { margin-left:auto; color:#ff4f6e; font-weight:700; font-size:14px; }
.heart { position:absolute; right:14px; bottom:60px; font-size:20px; }
.main { margin-left:296px; padding:20px 24px; }
.topbar { display:flex; justify-content:space-between; align-items:center; }
.brand { font-size:20px; font-weight:700; color:#ff4f6e; }
.golive { background:#ff4f6e; color:#fff; border-radius:24px; padding:10px 22px; font-size:15px; font-weight:700; }
h3.sec { font-size:16px; font-weight:600; margin:20px 0 10px; color:#fff; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.scard { position:relative; height:120px; border-radius:12px; overflow:hidden; background:linear-gradient(160deg,#2c2c2e,#1c1c1e); }
.scard .tag { position:absolute; top:6px; left:6px; background:#ff4f6e; color:#fff; font-size:9px; font-weight:700; border-radius:4px; padding:1px 5px; }
.scard .vc { position:absolute; top:6px; right:6px; background:rgba(0,0,0,0.5); color:#fff; font-size:9px; font-weight:700; border-radius:4px; padding:1px 5px; }
.scard .nm { position:absolute; bottom:6px; left:8px; font-size:11px; font-weight:700; color:#fff; }
.rank { margin-top:18px; display:flex; flex-direction:column; gap:8px; }
.rrow { display:flex; align-items:center; gap:10px; background:#1c1c1e; border-radius:12px; padding:8px 12px; }
.rrow .num { width:20px; height:20px; border-radius:50%; background:#ffc83d; color:#121212; font-size:11px; font-weight:700;
display:flex; align-items:center; justify-content:center; }
.rrow .av { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#8b5cf6,#ff4f6e); }
.rrow b { font-size:13px; }
.rrow .fol { margin-left:auto; background:transparent; border:1px solid rgba(255,255,255,0.3); color:rgba(255,255,255,0.7);
border-radius:16px; padding:5px 14px; font-size:12px; font-weight:600; }
</style></head>
<body>
<div class="stage">
<div class="scrim-top">
<span class="badge-live">LIVE</span>
<span class="viewer">👁 12.4K</span>
</div>
<div class="chat">
<div class="msg"><b>Kevin</b>hi from Kaohsiung!</div>
<div class="msg"><b>Sakura</b>💗💗💗</div>
<div class="msg"><b>A-Zhe</b>let's gooo</div>
</div>
<div class="heart">💗</div>
<div class="scrim-bottom">
<div class="liver">
<div class="avatar"></div>
<div><b>17LIVE</b><span>Singing tonight · Fan club open</span></div>
</div>
</div>
<div class="composer"><span class="ph">Say something nice…</span><span class="send">➤</span></div>
</div>
<div class="main">
<div class="topbar">
<span class="brand">17LIVE</span>
<button class="golive">GO LIVE</button>
</div>
<h3 class="sec">Trending Now</h3>
<div class="grid">
<div class="scard"><span class="tag">LIVE</span><span class="vc">👁 8.1K</span><span class="nm">Mika</span></div>
<div class="scard"><span class="tag">LIVE</span><span class="vc">👁 5.6K</span><span class="nm">Ren</span></div>
<div class="scard"><span class="tag">LIVE</span><span class="vc">👁 3.2K</span><span class="nm">Yui</span></div>
<div class="scard"><span class="tag">LIVE</span><span class="vc">👁 2.9K</span><span class="nm">Kai</span></div>
<div class="scard"><span class="tag">LIVE</span><span class="vc">👁 1.7K</span><span class="nm">Sora</span></div>
<div class="scard"><span class="tag">LIVE</span><span class="vc">👁 940</span><span class="nm">Nao</span></div>
</div>
<h3 class="sec">Top Fan Ranking</h3>
<div class="rank">
<div class="rrow"><span class="num">1</span><div class="av"></div><b>A-Zhe</b><button class="fol">Following</button></div>
<div class="rrow"><span class="num">2</span><div class="av"></div><b>Sakura</b><button class="fol">Following</button></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #2dcb98; color: #000000;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #ffffff; color: #121212;
border: 1px solid #2dcb98; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #2dcb98; color: #000000;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dedede;}
.logo{font-size:18px;font-weight:700;color:#121212;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#333333;}
.cta-nav{background:#2dcb98;color:#ffffff;font-size:13px;font-weight:700;padding:8px 18px;border-radius:9999px;}
.hero{height:260px;display:flex;align-items:center;padding:0 40px;background:#dedede;}
.heroText{width:440px;}
.h1{font-size:34px;font-weight:700;line-height:1.2;color:#121212;margin:0 0 12px;}
.sub{font-size:16px;color:#333333;line-height:1.5;margin:0 0 22px;width:380px;}
.cta{display:inline-flex;align-items:center;justify-content:center;width:170px;height:48px;background:#2dcb98;color:#ffffff;font-size:15px;font-weight:700;border-radius:9999px;}
.rolls{position:relative;width:340px;height:200px;}
.roll{position:absolute;width:80px;height:80px;border-radius:9999px;background:radial-gradient(circle,#ffffff 34%,#2dcb98 36%,#2dcb98 100%);}
.r1{left:30px;top:60px;}
.r2{left:120px;top:20px;}
.r3{left:210px;top:70px;}
.sec{padding:24px 40px 0;}
.secTitle{font-size:20px;font-weight:700;color:#121212;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:196px;background:#f5f5f5;border-radius:16px;padding:14px;text-align:center;}
.thumb{height:100px;border-radius:12px;margin-bottom:10px;}
.pname{font-size:14px;font-weight:700;color:#121212;margin:0 0 4px;}
.pprice{font-size:14px;color:#333333;}
</style>
<div class="nav">
<div class="logo">Who Gives A Crap</div>
<div class="navlinks"><span>Toilet Paper</span><span>Tissues</span><span>Paper Towel</span></div>
<div class="cta-nav">Subscribe & Save</div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">100% Recycled. 50% Profits Fund Toilets.</div>
<div class="sub">Premium bamboo paper that does more good per square.</div>
<div class="cta">Shop Rolls</div>
</div>
<div class="rolls"><div class="roll r1"></div><div class="roll r2"></div><div class="roll r3"></div></div>
</div>
<div class="sec">
<div class="secTitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2dcb98,#dedede);"></div><div class="pname">Enormous Roll Box</div><div class="pprice">$44.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a7a5c,#dedede);"></div><div class="pname">Luxury Bamboo TP</div><div class="pprice">$36.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b3f0db,#dedede);"></div><div class="pname">Facial Tissue 6-Pack</div><div class="pprice">$18.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #161616; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #161616; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #919191; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fc6719; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #161616; color: #fc6719;
border: 1px solid #fc6719; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #161616; color: #f5f5f5;
border: 1px solid #3a3a3a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #919191; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3b2316; color: #fc6719;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#161616; color:#ffffff; box-sizing:border-box;
font-family:"Barlow Semi Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.world { position:relative; width:960px; height:640px; overflow:hidden;
background:
linear-gradient(180deg, #ff9d4d 0%, #ff7a3d 18%, #6b3a6a 40%, #2a2f57 62%, #16182c 100%); }
.world::before { content:''; position:absolute; left:0; right:0; bottom:0; height:260px;
background:linear-gradient(180deg, rgba(20,60,50,0) 0%, #163d33 55%, #0d251f 100%); }
.world::after { content:''; position:absolute; left:0; right:0; bottom:0; height:170px;
background:
radial-gradient(80% 200% at 50% 0%, rgba(180,120,60,0.35), rgba(180,120,60,0) 60%);
clip-path: polygon(0 100%, 8% 40%, 20% 62%, 32% 30%, 48% 55%, 60% 20%, 74% 48%, 88% 24%, 100% 60%, 100% 100%);
background-color:#1f5c3f; opacity:0.9; }
.road { position:absolute; left:50%; bottom:0; width:220px; height:420px; transform:translateX(-50%) perspective(500px) rotateX(28deg);
background:linear-gradient(180deg,#3a3a3a,#232323);
clip-path:polygon(38% 0, 62% 0, 100% 100%, 0 100%); z-index:1; }
.roadline { position:absolute; left:50%; bottom:0; width:6px; height:420px; transform:translateX(-50%) perspective(500px) rotateX(28deg);
background:repeating-linear-gradient(180deg,#e8c547 0 26px, transparent 26px 52px); z-index:1; opacity:0.85; }
.rider { position:absolute; left:50%; bottom:150px; transform:translateX(-50%); width:26px; height:44px; z-index:2; }
.rider .body { width:26px; height:30px; background:#FC6719; border-radius:6px 6px 3px 3px; }
.rider .head { width:12px; height:12px; background:#222; border-radius:50%; margin:0 auto -4px; }
.banner { position:absolute; top:14px; left:14px; right:14px; z-index:5; border-radius:12px;
background:rgba(15,15,15,0.62); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.10);
padding:10px 16px; display:flex; align-items:center; gap:14px; }
.flag { width:30px; height:30px; border-radius:8px; background:#FC6719; display:flex; align-items:center;
justify-content:center; font-size:14px; flex:none; }
.btexts { flex:1; }
.btexts h1 { font-family:"Barlow Semi Condensed", sans-serif; font-size:16px; font-weight:700; margin:0; }
.btexts p { font-family:Inter, sans-serif; font-size:11px; color:#A8AAAD; margin:2px 0 0; }
.progress { margin-top:8px; height:4px; background:rgba(255,255,255,0.18); border-radius:2px; }
.progress .fill { width:64%; height:4px; background:#FC6719; border-radius:2px; }
.powerup { width:52px; height:52px; border-radius:10px; background:#FC6719; display:flex; align-items:center;
justify-content:center; font-size:22px; flex:none; box-shadow:0 0 0 3px rgba(252,103,25,0.25); }
.hud { position:absolute; left:0; right:0; bottom:100px; z-index:5; display:flex; justify-content:center; gap:12px; }
.tile { min-width:112px; background:rgba(12,12,12,0.60); backdrop-filter:blur(8px); border-radius:12px;
border:1px solid rgba(255,255,255,0.10); padding:10px 16px; text-align:center; }
.tile .val { font-size:32px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; }
.tile .unit { font-size:11px; font-weight:700; letter-spacing:0.6pt; text-transform:uppercase; color:#A8AAAD; margin-top:4px; }
.power .val { color:#FC6719; }
.cad .val { color:#E8C547; }
.hr .val { color:#F0413E; }
.wkg .val { color:#2BD4D9; }
.actionbar { position:absolute; left:0; right:0; bottom:0; height:78px; z-index:5;
background:rgba(18,18,18,0.92); backdrop-filter:blur(20px); border-top:1px solid #303030;
display:flex; align-items:center; justify-content:space-evenly; }
.ab { display:flex; flex-direction:column; align-items:center; gap:4px; }
.ab .ic { font-size:22px; color:#A8AAAD; }
.ab .lb { font-family:Inter,sans-serif; font-size:10px; font-weight:600; color:#A8AAAD; }
.ab.pu .ic { color:#FC6719; }
.ab.pu .lb { color:#FC6719; }
</style></head>
<body>
<div class="world">
<div class="roadline"></div>
<div class="road"></div>
<div class="rider"><div class="head"></div><div class="body"></div></div>
<div class="banner">
<div class="flag">🚩</div>
<div class="btexts">
<h1>WATOPIA · VOLCANO FLAT</h1>
<p>12.4 / 19.3 km · Lap 2 of 3</p>
<p>Zwift (iOS)</p>
<div class="progress"><div class="fill"></div></div>
</div>
<div class="powerup">🪶</div>
</div>
<div class="hud">
<div class="tile power"><div class="val">248</div><div class="unit">Watts</div></div>
<div class="tile cad"><div class="val">91</div><div class="unit">RPM</div></div>
<div class="tile hr"><div class="val">156</div><div class="unit">BPM</div></div>
<div class="tile wkg"><div class="val">3.4</div><div class="unit">W/KG</div></div>
</div>
<div class="actionbar">
<div class="ab"><span class="ic">👋</span><span class="lb">Action</span></div>
<div class="ab pu"><span class="ic">🪶</span><span class="lb">Power-Up</span></div>
<div class="ab"><span class="ic">📋</span><span class="lb">Workout</span></div>
<div class="ab"><span class="ic">🚴</span><span class="lb">Riders</span></div>
<div class="ab"><span class="ic">☰</span><span class="lb">Menu</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f5f0; color: #1a1118;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f5f0; color: #1a1118;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #1a1118; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #707372; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #00a9e0; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f7f5f0; color: #1a1118;
border: 1px solid #00a9e0; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #555555;
border: 1px solid #c0bcba; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707372; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; background: #ffb81c; color: #1a1118;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f5f0; color:#555555; box-sizing:border-box;
font-family:'Century Gothic','Futura','Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#1a1118; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { color:#ffffff; font-size:20px; font-weight:700; margin:0; font-family:Georgia,serif; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:12px; color:#dedede; font-weight:600; }
.navlinks .cta { background:#00a9e0; color:#fff; padding:8px 18px; border-radius:8px; font-size:11px; font-weight:700; }
.hero { height:250px; background:#002554; display:flex; align-items:center; padding:0 36px; gap:36px; }
.box { width:150px; height:170px; position:relative; }
.box .lid { position:absolute; top:0; left:0; right:0; height:70px; background:linear-gradient(160deg,#00a9e0,#0090c0); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,0.3); }
.box .body2 { position:absolute; top:60px; left:10px; right:10px; bottom:0; background:#001a3a; border-radius:0 0 8px 8px; }
.meeple { position:absolute; top:20px; left:60px; width:30px; height:40px; background:#ffb81c; border-radius:12px 12px 4px 4px; }
.heroTxt h1 { color:#ffffff; font-size:30px; font-weight:700; margin:0 0 12px; font-family:Georgia,serif; line-height:1.25; }
.heroTxt p { color:#c8d8e8; font-size:13px; margin:0 0 18px; max-width:320px; }
.heroTxt .cta { display:inline-block; background:#00a9e0; color:#fff; font-weight:700; font-size:13px; padding:12px 26px; border-radius:8px; }
.section-label { padding:16px 34px 10px; font-size:16px; font-weight:700; color:#1a1118; font-family:Georgia,serif; }
.grid { display:flex; gap:14px; padding:0 34px; }
.card { flex:1; background:#ffffff; border-radius:12px; padding:12px; }
.card .art { height:88px; border-radius:8px; margin-bottom:10px; position:relative; }
.a1 { background:linear-gradient(160deg,#00a9e0,#002554); } .a2 { background:linear-gradient(160deg,#ffb81c,#002554); }
.a3 { background:linear-gradient(160deg,#ff6b6b,#f7f5f0); } .a4 { background:linear-gradient(160deg,#0090c0,#00a9e0); }
.card h3 { font-size:12px; font-weight:700; color:#1a1118; margin:0 0 4px; font-family:Georgia,serif; }
.card p { font-size:10px; color:#707372; margin:0 0 8px; }
.card .price { font-size:13px; font-weight:700; color:#00a9e0; }
.card .players { font-size:9px; color:#ffb81c; font-weight:700; margin-top:4px; }
footer { height:56px; margin-top:14px; background:#1a1118; display:flex; align-items:center; gap:26px; padding:0 34px; }
footer span { color:#dedede; font-size:10px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Floodgate Games</p>
<div class="navlinks"><span>New Releases</span><span>Party Games</span><span>Strategy</span><span class="cta">Shop All</span></div>
</nav>
<div class="hero">
<div class="box"><div class="lid"></div><div class="meeple"></div><div class="body2"></div></div>
<div class="heroTxt">
<h1>The lights go down.<br>The table comes alive.</h1>
<p>Board games built for the moment the box lid lifts and everyone leans in.</p>
<span class="cta">Shop New Releases</span>
</div>
</div>
<div class="section-label">Featured Games</div>
<div class="grid">
<div class="card"><div class="art a1"></div><h3>Lighthouse Signal</h3><p>Cooperative Strategy</p><div class="price">$44.99</div><div class="players">2-4 Players</div></div>
<div class="card"><div class="art a2"></div><h3>Marigold Market</h3><p>Family Trading Game</p><div class="price">$29.99</div><div class="players">3-6 Players</div></div>
<div class="card"><div class="art a3"></div><h3>Coral Reef Party</h3><p>Fast-Paced Party Game</p><div class="price">$19.99</div><div class="players">4-8 Players</div></div>
<div class="card"><div class="art a4"></div><h3>Deep Harbor</h3><p>Worker Placement</p><div class="price">$54.99</div><div class="players">1-5 Players</div></div>
</div>
<footer>
<span>DEMO VIDEOS</span><span>RETAILER LOCATOR</span><span>DESIGNER SPOTLIGHTS</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif; color:#4a4a4a; }
*{box-sizing:border-box;}
.nav{height:60px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:16px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#313131;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#313131;}
.hero{height:230px;display:flex;align-items:center;justify-content:center;padding:0 34px;background:#f8f8f8;}
.herotext{text-align:center;}
h1{font-size:30px;font-weight:700;color:#313131;margin:0 0 12px;letter-spacing:-.4px;}
.sub{font-size:14px;color:#4a4a4a;line-height:1.6;margin:0 auto 18px;width:440px;}
.cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 28px;background:#313131;color:#fff;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;border-radius:8px;}
.section{padding:0 34px;}
.sectitle{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#7a7a7a;margin:20px 0 14px;text-align:center;}
.grid{display:flex;gap:16px;justify-content:center;}
.card{width:200px;background:#fff;border-radius:12px;padding:12px;position:relative;}
.thumb{height:120px;border-radius:8px;margin-bottom:10px;position:relative;overflow:hidden;}
.bottle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36px;height:70px;border-radius:8px;background:rgba(255,255,255,.35);}
.tag{position:absolute;top:8px;left:8px;font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:9999px;color:#fff;background:#313131;}
.tag.sale{background:#c0392b;}
.ptitle{font-size:13px;font-weight:600;color:#313131;line-height:1.3;height:34px;overflow:hidden;}
.pprice{font-size:13px;color:#4a4a4a;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Youth TO The People</div>
<div class="navlinks"><div>Cleansers</div><div>Serums</div><div>Moisturizers</div><div>Kits</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Superfood skincare, lab-grade results.</h1>
<div class="sub">Clean, clinically-tested formulas built on kale, spinach, and green tea — vegan and cruelty-free.</div>
<div class="cta">Shop Bestsellers</div>
</div>
</div>
<div class="section">
<div class="sectitle">Bestsellers</div>
<div class="grid">
<div class="card"><span class="tag">New</span><div class="thumb" style="background:linear-gradient(160deg,#6b8f47,#e8e4d8)"><div class="bottle"></div></div><div class="ptitle">Superfood Cleanser</div><div class="pprice">$36.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#c9973f,#e8e4d8)"><div class="bottle"></div></div><div class="ptitle">Adaptogen Deep Moisture</div><div class="pprice">$48.00</div></div>
<div class="card"><span class="tag sale">Sale</span><div class="thumb" style="background:linear-gradient(160deg,#3a5a40,#e8e4d8)"><div class="bottle"></div></div><div class="ptitle">Kale + Green Tea Serum</div><div class="pprice">$58.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#8a8a8a,#e8e4d8)"><div class="bottle"></div></div><div class="ptitle">Superberry Eye Cream</div><div class="pprice">$44.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff2442; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff2442; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e01f3d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff2442; color: #000000;
border: 1px solid #e01f3d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff2442; color: #f5f5f5;
border: 1px solid #fd455f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fa2341; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; gap:18px; padding:0 24px; border-bottom:1px solid #eeeeee; }
.brand { font-size:18px; font-weight:700; color:#ff2442; margin:0; }
.search { flex:1; max-width:360px; background:#f5f5f5; border-radius:20px; height:36px; display:flex; align-items:center;
padding:0 16px; font-size:13px; color:#999999; }
.btn-post { margin-left:auto; background:#ff2442; color:#ffffff; border:none; border-radius:20px; height:34px;
padding:0 18px; font-size:13px; font-weight:500; }
.tabs { display:flex; gap:20px; padding:12px 24px 10px; font-size:13px; color:#999999; }
.tabs .active { color:#ff2442; font-weight:600; border-bottom:2px solid #ff2442; padding-bottom:8px; }
.feed { display:flex; gap:10px; padding:0 24px; }
.col { flex:1; display:flex; flex-direction:column; gap:10px; }
.note { background:#ffffff; border-radius:8px; overflow:hidden; display:flex; flex-direction:column; }
.cover { position:relative; }
.note-body { padding:8px 10px; display:flex; flex-direction:column; gap:6px; }
.note-title { font-size:14px; font-weight:500; color:#333333; line-height:1.3; }
.note-meta { display:flex; align-items:center; gap:6px; font-size:12px; color:#999999; }
.avatar { width:18px; height:18px; border-radius:50%; flex:none; }
.like { margin-left:auto; display:flex; align-items:center; gap:3px; color:#999999; }
.heart { color:#ff2442; }
.chiprow { display:flex; gap:6px; padding:10px 24px 0; flex-wrap:wrap; }
.chip { background:#f5f5f5; color:#333333; border-radius:16px; padding:4px 12px; font-size:11px; }
.chip.on { background:#ffecef; color:#ff2442; }
</style></head>
<body>
<nav>
<p class="brand">Xiaohongshu</p>
<div class="search">Search notes, places, ideas…</div>
<button class="btn-post">+ Post</button>
</nav>
<div class="tabs">
<span class="active">Recommend</span><span>Fashion</span><span>Food</span><span>Travel</span><span>Beauty</span><span>Home</span>
</div>
<div class="chiprow">
<span class="chip on">#skincare</span><span class="chip">#brunch</span><span class="chip">#dailyfit</span><span class="chip">#weekendtrip</span>
</div>
<div class="feed">
<div class="col">
<div class="note">
<div class="cover" style="height:150px;background:linear-gradient(160deg,#ffd8dd,#ff8fa3);"></div>
<div class="note-body">
<div class="note-title">5-step routine that finally fixed my dry skin</div>
<div class="note-meta"><span class="avatar" style="background:#f6c453;"></span><span>Alex Kim</span><span class="like"><span class="heart">♥</span>1.2k</span></div>
</div>
</div>
<div class="note">
<div class="cover" style="height:110px;background:linear-gradient(160deg,#cdeadb,#8fd4b3);"></div>
<div class="note-body">
<div class="note-title">Weekend brunch spots worth the wait</div>
<div class="note-meta"><span class="avatar" style="background:#7cc7e8;"></span><span>Jordan Lee</span><span class="like"><span class="heart">♥</span>860</span></div>
</div>
</div>
</div>
<div class="col">
<div class="note">
<div class="cover" style="height:120px;background:linear-gradient(160deg,#d9d3f7,#a99df0);"></div>
<div class="note-body">
<div class="note-title">Packing list for a 3-day city trip</div>
<div class="note-meta"><span class="avatar" style="background:#e79ec6;"></span><span>Sam Park</span><span class="like"><span class="heart">♥</span>2.4k</span></div>
</div>
</div>
<div class="note">
<div class="cover" style="height:150px;background:linear-gradient(160deg,#ffe3c7,#ffb680);"></div>
<div class="note-body">
<div class="note-title">Outfit ideas for the office that don't feel boring</div>
<div class="note-meta"><span class="avatar" style="background:#f6a3a3;"></span><span>Casey Moon</span><span class="like"><span class="heart">♥</span>1.7k</span></div>
</div>
</div>
</div>
<div class="col">
<div class="note">
<div class="cover" style="height:130px;background:linear-gradient(160deg,#c8e8f5,#7fbfe0);"></div>
<div class="note-body">
<div class="note-title">Home café corner on a small budget</div>
<div class="note-meta"><span class="avatar" style="background:#c9b6f2;"></span><span>Taylor Ryu</span><span class="like"><span class="heart">♥</span>930</span></div>
</div>
</div>
<div class="note">
<div class="cover" style="height:100px;background:linear-gradient(160deg,#ffd6e8,#ff9dc0);"></div>
<div class="note-body">
<div class="note-title">Sunscreen dupes I actually repurchased</div>
<div class="note-meta"><span class="avatar" style="background:#8fd4b3;"></span><span>Morgan Choi</span><span class="like"><span class="heart">♥</span>3.1k</span></div>
</div>
</div>
</div>
<div class="col">
<div class="note">
<div class="cover" style="height:160px;background:linear-gradient(160deg,#fff0c2,#ffce6b);"></div>
<div class="note-body">
<div class="note-title">One-pan dinner I make every week</div>
<div class="note-meta"><span class="avatar" style="background:#f6c453;"></span><span>Riley Han</span><span class="like"><span class="heart">♥</span>1.5k</span></div>
</div>
</div>
<div class="note">
<div class="cover" style="height:90px;background:linear-gradient(160deg,#e0d9f5,#b3a3ea);"></div>
<div class="note-body">
<div class="note-title">Small apartment shelf styling tips</div>
<div class="note-meta"><span class="avatar" style="background:#7cc7e8;"></span><span>Devon Baek</span><span class="like"><span class="heart">♥</span>640</span></div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.2; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; margin: 0; color: #9a9a9a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; background: #ef521b; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; background: #ffffff; color: #111111;
border: 1px solid #ef521b; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #dedede; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9a9a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.12em; background: #cb8a3d; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'museo-sans','Helvetica Neue',Arial,sans-serif; font-weight:300; background:#111111; color:#fff; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #2a2a2a;}
.logo{font-family:'Helvetica Neue',Helvetica,sans-serif;font-weight:400;font-size:18px;letter-spacing:-0.5px;}
.navlinks{display:flex;gap:22px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#9a9a9a;}
.navlinks .on{color:#fff;}
.hero{height:220px;display:flex;background:#111111;}
.herotxt{width:48%;padding:24px 36px;display:flex;flex-direction:column;justify-content:center;}
.tag{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#cb8a3d;margin-bottom:10px;}
.herotxt h1{font-family:'Helvetica Neue',Helvetica,sans-serif;font-weight:400;font-size:34px;margin:0 0 12px;line-height:1.05;letter-spacing:-0.5px;}
.herotxt p{font-size:14px;font-weight:300;color:#9a9a9a;margin:0 0 18px;max-width:280px;}
.cta{width:fit-content;font-size:12px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;background:#ef521b;color:#fff;padding:14px 28px;border-radius:2px;}
.plug{width:52%;position:relative;background:radial-gradient(circle at 60% 50%,#1a1a1a,#111111);}
.wire{position:absolute;left:60px;top:60px;width:180px;height:14px;border-radius:7px;background:repeating-linear-gradient(90deg,#cb8a3d 0 6px,#8a5c26 6px 12px);}
.head{position:absolute;left:230px;top:52px;width:34px;height:30px;background:#ef521b;border-radius:4px;}
.sec{padding:18px 36px 0;}
.sec h2{font-size:15px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;margin:0 0 14px;color:#fff;}
.grid{display:flex;gap:14px;}
.card{width:210px;background:#1a1a1a;padding:12px;}
.cimg{height:100px;margin-bottom:10px;}
.ctitle{font-size:13px;font-weight:500;color:#fff;}
.cprice{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:15px;font-weight:400;margin-top:4px;color:#ef521b;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#121212;border-top:1px solid #2a2a2a;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:10px;letter-spacing:0.4px;text-transform:uppercase;color:#9a9a9a;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Native Union Cables A 2</div>
<div class="navlinks"><div class="on">Cables</div><div>Chargers</div><div>Cases</div><div>Desk</div></div>
</div>
<div class="hero">
<div class="herotxt">
<div class="tag">Belt Cable Collection</div>
<h1>Built to survive<br>the daily carry</h1>
<p>Woven fabric jackets over reinforced connectors, rated for 20,000 bends.</p>
<div class="cta">Shop Cables</div>
</div>
<div class="plug"><div class="wire"></div><div class="head"></div></div>
</div>
<div class="sec">
<h2>The Cable Range</h2>
<div class="grid">
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#cb8a3d,#111111)"></div><div class="ctitle">Belt Cable USB-C to C, 1.2m</div><div class="cprice">$34.99</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#ef521b,#1a1a1a)"></div><div class="ctitle">Belt Cable Lightning, 3m</div><div class="cprice">$39.99</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#9a9a9a,#111111)"></div><div class="ctitle">Curve Wall Charger 65W</div><div class="cprice">$69.99</div></div>
</div>
</div>
<div class="footer"><span>© Precision Hardware Since 2009</span><span>Materials Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f1ec; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f1ec; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #626260; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; background: #111111; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; background: #ffffff; color: #111111;
border: 1px solid #111111; border-radius: 8px;
padding: 10px 18px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111111;
border: 1px solid #bcb9b5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #626260; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #d5d2cd; color: #111111;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f1ec; color:#111111; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:17px; font-weight:500; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#111; }
.btn-ink { background:#111; color:#fff; border:none; border-radius:8px; padding:9px 18px; font-size:13px; font-weight:500; }
.hero { text-align:center; padding:12px 40px 8px; }
.hero h1 { font-size:36px; font-weight:500; letter-spacing:-1px; line-height:1.12; margin:0 0 8px; }
.hero p { font-size:13px; color:#626260; margin:0 0 12px; }
.mockupwrap { margin:0 40px; background:#fff; border-radius:16px; padding:16px; display:flex; gap:14px; height:230px; }
.chatpane { flex:1.3; background:#f5f1ec; border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.msg { max-width:70%; padding:8px 10px; border-radius:10px; font-size:11px; line-height:1.4; }
.msg.in { background:#fff; align-self:flex-start; }
.msg.out { background:#ff5600; color:#fff; align-self:flex-end; }
.finbadge { display:inline-flex; align-items:center; gap:4px; background:#fff; border-radius:9999px; padding:4px 8px;
font-size:9px; font-weight:600; color:#ff5600; align-self:flex-start; }
.sidepane { flex:1; display:flex; flex-direction:column; gap:8px; }
.stat { background:#f5f1ec; border-radius:10px; padding:10px; }
.stat .n { font-size:18px; font-weight:500; }
.stat .l { font-size:10px; color:#626260; }
.featurerow { display:flex; gap:12px; padding:14px 40px 16px; }
.fcard { flex:1; background:#fff; border-radius:12px; padding:14px; }
.fcard h4 { font-size:13px; font-weight:500; margin:0 0 4px; }
.fcard p { font-size:11px; color:#626260; margin:0; line-height:1.4; }
.fcard.fin { background:#ff5600; color:#fff; }
.fcard.fin p { color:#ffe4d6; }
footer { margin-top:auto; padding:12px 40px; display:flex; justify-content:space-between; font-size:11px; color:#7b7b78; }
</style></head>
<body>
<nav>
<span class="brand">Intercom</span>
<div class="navlinks"><span>Product</span><span>Fin AI</span><span>Pricing</span><span>Customers</span></div>
<button class="btn-ink">Sign up</button>
</nav>
<section class="hero">
<h1>The AI customer service company</h1>
<p>Fin resolves 65% of your support volume, instantly.</p>
</section>
<div class="mockupwrap">
<div class="chatpane">
<span class="finbadge">✦ Fin AI Agent</span>
<div class="msg in">Hi! How can I help you with your order today?</div>
<div class="msg out">I need to change my shipping address.</div>
<div class="msg in">Done — updated to your new address. Anything else?</div>
</div>
<div class="sidepane">
<div class="stat"><div class="n">65%</div><div class="l">Resolution rate</div></div>
<div class="stat"><div class="n">2.4s</div><div class="l">Avg. response time</div></div>
<div class="stat"><div class="n">98%</div><div class="l">CSAT score</div></div>
</div>
</div>
<div class="featurerow">
<div class="fcard"><h4>Helpdesk</h4><p>Manage every conversation across email, chat, and social.</p></div>
<div class="fcard fin"><h4>Fin AI Agent</h4><p>Resolve tickets instantly with your own AI agent.</p></div>
<div class="fcard"><h4>Proactive support</h4><p>Answer questions before customers even ask.</p></div>
</div>
<footer>
<span>© Intercom</span>
<span>Intercom · Product · Fin AI · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.25px; background: #2f3192; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.25px; background: #f6f6f6; color: #2f3192;
border: 1px solid #2f3192; border-radius: 8px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #454545;
border: 1px solid #c1c1c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #ffdb7e; color: #222222;
border-radius: 6px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6f6f6; color:#222222; box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; background:#2f3192; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#fff; font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#fff; opacity:0.85; font-size:13px; }
.searchpill { background:#fff; border-radius:999px; height:30px; padding:0 16px; display:flex; align-items:center; font-size:12px; color:#aaaaaa; }
main { display:flex; height:582px; }
.stage { width:330px; background:#ececec; display:flex; align-items:center; justify-content:center; position:relative; }
.live-badge { position:absolute; top:20px; left:20px; background:#00c31e; color:#fff; font-size:11px; font-weight:700;
border-radius:4px; padding:4px 9px; display:flex; align-items:center; gap:5px; }
.live-dot { width:6px; height:6px; background:#fff; border-radius:999px; }
.capture-box { width:170px; height:110px; background:linear-gradient(160deg,#3a3a5a,#2f3192); border-radius:6px; position:relative; }
.capture-box::before { content:''; position:absolute; top:14px; left:14px; right:14px; height:12px; background:#5a91cb; border-radius:2px; }
.capture-box::after { content:''; position:absolute; bottom:14px; right:14px; width:24px; height:8px; background:#00c31e; border-radius:2px; }
.info { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:11px; }
.tagline { font-size:11px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; color:#2f3192; margin:0; }
h1 { font-size:23px; font-weight:700; margin:0; }
.sub { font-size:13px; color:#454545; margin:0; max-width:440px; line-height:1.5; }
.badges { display:flex; gap:8px; }
.badge { font-size:11px; font-weight:700; border-radius:4px; padding:3px 9px; }
.b-new { background:#ffdb7e; color:#5a4400; } .b-sale { background:#ff5b5b; color:#fff; }
.rating { font-size:13px; color:#e0b252; }
.rating span { color:#777777; font-size:12px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:4px; }
.price { font-size:24px; font-weight:700; }
.actions { display:flex; gap:10px; }
.btn-primary { background:#2f3192; color:#fff; border-radius:12px; height:44px; padding:0 24px; display:flex;
align-items:center; font-weight:700; font-size:13px; }
.btn-secondary { background:#fff; border:1px solid #d8d8d8; color:#222; border-radius:12px; height:44px;
padding:0 18px; display:flex; align-items:center; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Avermedia</p>
<div class="navlinks"><span>Capture Cards</span><span>Streaming</span><span>Webcams</span><span>Support</span></div>
<div class="searchpill">Search products…</div>
</nav>
<main>
<div class="stage">
<span class="live-badge"><span class="live-dot"></span>LIVE</span>
<div class="capture-box"></div>
</div>
<div class="info">
<p class="tagline">AI.STREAMING</p>
<h1>Live Gamer BOLT — 4K Capture Card</h1>
<p class="sub">Ultra-low latency HDMI passthrough capture with AI scene detection for one-click highlight clips.</p>
<div class="badges"><span class="badge b-new">New</span><span class="badge b-sale">Sale</span></div>
<div class="rating">★★★★★ <span>4.7 (1,204 reviews)</span></div>
<div class="price-row"><span class="price">$249.99</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Watch Demo</div>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00adf7; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00adf7; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7b61ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00adf7; color: #000000;
border: 1px solid #7b61ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00adf7; color: #000000;
border: 1px solid #27b9f7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #14a1f8; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#191a1f; box-sizing:border-box;
font-family:"Pretendard","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.logo { font-size:18px; font-weight:600; }
.navlinks { display:flex; gap:20px; font-size:15px; color:#1a1b1e; }
.tag { font-size:12px; font-weight:600; color:#7b61ff; }
.hero { background:#dfe7e4; text-align:center; padding:36px 40px; }
.hero h1 { font-size:44px; font-weight:500; line-height:1.2; margin:0 0 12px; }
.hero h1 .hl { color:#00adf7; }
.cta { display:inline-block; color:#28292d; border-bottom:1px solid #28292d; font-size:16px; padding-bottom:2px; }
.labels { display:flex; gap:30px; padding:20px 40px 10px; }
.labels .item span.idx { color:#7b61ff; font-size:14px; font-weight:500; margin-right:4px; }
.labels .item { font-size:14px; color:#191a1f; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:6px 40px 24px; }
.card { background:#f4f6f9; border-radius:24px; padding:16px; }
.card h3 { font-size:16px; font-weight:500; margin:0 0 6px; }
.card p { font-size:12px; color:#5d5d60; margin:0; }
.data { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 40px 24px; }
.dcard { background:#c7e1ff; border-radius:32px; padding:16px; text-align:center; }
.dcard .num { font-size:26px; font-weight:600; }
.dcard .lbl { font-size:12px; color:#191a1f; }
.dot { display:inline-block; width:10px; height:10px; border-radius:9999px; background:#00adf7; margin-right:4px; }
</style></head>
<body>
<nav>
<span class="logo">Humanscape</span>
<div class="navlinks"><span>About Us</span><span>Our Business</span><span>Career</span></div>
<span class="tag">we're hiring</span>
</nav>
<section class="hero">
<h1>eXploring human <span class="hl">Life</span> through data-driven Intelligence</h1>
<span class="cta">eXplore Our Business</span>
</section>
<div class="labels">
<div class="item"><span class="idx">1.</span>Built on Healthcare Network</div>
<div class="item"><span class="idx">2.</span>Powered by Global User Base</div>
<div class="item"><span class="idx">3.</span>Scaled by Data Intelligence</div>
</div>
<div class="cards">
<div class="card"><h3>AI Growth Monitoring</h3><p>Track developmental milestones with data.</p></div>
<div class="card"><h3>Developmental Care</h3><p>Personalized care pathways for every stage.</p></div>
<div class="card"><h3>Care Navigation</h3><p>Guidance for patients with serious illness.</p></div>
</div>
<div class="data">
<div class="dcard"><div class="num"><span class="dot"></span>1,800+</div><div class="lbl">Healthcare Network</div></div>
<div class="dcard"><div class="num"><span class="dot"></span>2.5M+</div><div class="lbl">Global User Base</div></div>
<div class="dcard"><div class="num"><span class="dot"></span>230M+</div><div class="lbl">Data Intelligence</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #ea205c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #ea205c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.15; margin: 0; color: #ea205c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #fac7d6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ea205c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Nunito Sans','Helvetica Neue',Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.ann{height:36px;background:#fbcd0a;color:#121212;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;}
.nav{height:64px;background:#108474;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-family:'Arial Narrow',Arial,sans-serif;font-size:24px;font-weight:700;color:#fff;letter-spacing:.5px;text-transform:uppercase;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;color:#fff;}
.hero{height:264px;display:flex;padding:0 30px;gap:26px;align-items:center;}
.herotext{width:300px;}
.kicker{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#ea205c;margin-bottom:8px;}
.herotext h1{font-family:'Arial Narrow',Arial,sans-serif;font-size:34px;font-weight:700;letter-spacing:-.3px;margin:0 0 10px;color:#121212;}
.herotext p{font-size:14px;color:#555;line-height:1.5;margin:0 0 16px;}
.cta{display:inline-block;background:#108474;color:#fff;font-size:14px;font-weight:700;padding:13px 24px;border-radius:8px;}
.grid56{flex:1;display:grid;grid-template-columns:repeat(8,1fr);gap:6px;}
.sw{width:100%;aspect-ratio:1/1;border-radius:9999px;border:2px solid transparent;}
.fam{margin:6px 30px 0;background:#f6f6f6;border-radius:8px;padding:14px 20px;border-left:4px solid #108474;}
.fam b{font-family:'Arial Narrow',Arial,sans-serif;font-size:20px;color:#121212;}
.grid{display:flex;gap:14px;padding:16px 30px 0;}
.card{width:196px;background:#eeeeee;border:1px solid #dedede;border-radius:8px;padding:10px;position:relative;}
.thumb{height:90px;border-radius:8px;background:#fff;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:4px;padding:8px;}
.mini{width:16px;height:16px;border-radius:9999px;}
.badge{position:absolute;top:8px;left:8px;background:#ea205c;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;border-radius:4px;padding:3px 7px;}
.ptitle{font-size:13px;font-weight:700;color:#121212;}
.pprice{font-size:14px;font-weight:700;color:#121212;margin-top:4px;}
</style>
<div class="ann">Free shipping on orders over $35</div>
<div class="nav">
<div class="logo">Tombow</div>
<div class="navlinks"><div>Dual Brush Pens</div><div>Drawing Pens</div><div>Adhesives</div><div>Colors</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">56 Shades, One Nib</div>
<h1>Every Color, Every Time.</h1>
<p>Dual brush pens in true ink pigment — the swatch grid is the catalog.</p>
<div class="cta">Shop All Colors</div>
</div>
<div class="grid56">
<div class="sw" style="background:#ea205c"></div><div class="sw" style="background:#ee9441"></div><div class="sw" style="background:#a89cc8"></div><div class="sw" style="background:#fbcd0a"></div><div class="sw" style="background:#108474"></div><div class="sw" style="background:#04626c"></div><div class="sw" style="background:#c1e6e6"></div><div class="sw" style="background:#035560"></div>
<div class="sw" style="background:#ee9441"></div><div class="sw" style="background:#108474"></div><div class="sw" style="background:#ea205c"></div><div class="sw" style="background:#a89cc8"></div><div class="sw" style="background:#c1e6e6"></div><div class="sw" style="background:#fbcd0a"></div><div class="sw" style="background:#04626c"></div><div class="sw" style="background:#ea205c"></div>
<div class="sw" style="background:#a89cc8"></div><div class="sw" style="background:#fbcd0a"></div><div class="sw" style="background:#04626c"></div><div class="sw" style="background:#108474"></div><div class="sw" style="background:#ee9441"></div><div class="sw" style="background:#c1e6e6"></div><div class="sw" style="background:#ea205c"></div><div class="sw" style="background:#a89cc8"></div>
</div>
</div>
<div class="fam"><b>MONO Drawing Pens</b> — waterproof archival ink, five tip widths</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb"><div class="mini" style="background:#ea205c"></div><div class="mini" style="background:#ee9441"></div><div class="mini" style="background:#108474"></div><div class="mini" style="background:#a89cc8"></div></div><div class="ptitle">Dual Brush Pen 10-Set</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="thumb"><div class="mini" style="background:#108474"></div></div><div class="ptitle">MONO Graphite Pencil</div><div class="pprice">$1.99</div></div>
<div class="card"><div class="thumb"><div class="mini" style="background:#fbcd0a"></div></div><div class="ptitle">MONO Eraser</div><div class="pprice">$2.49</div></div>
<div class="card"><div class="thumb"><div class="mini" style="background:#ea205c"></div><div class="mini" style="background:#c1e6e6"></div></div><div class="ptitle">ABT PRO Marker Set</div><div class="pprice">$32.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfbfb; color: #212934;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfbfb; color: #212934;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #212934; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #747474; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #00ffdd; color: #212934;
border: none; border-radius: 2px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: transparent; color: #000000;
border: 1px solid #00ffdd; border-radius: 2px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fbfbfb; color: #212934;
border: 1px solid #c4c6c9; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #747474; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: transparent; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fbfbfb; color:#32373c; font-family:'PT Sans',Arial,sans-serif; }
*{box-sizing:border-box;}
.top{height:36px;background:#212934;color:#aaa9a9;font-size:11px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.nav{height:64px;background:#212934;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:2px solid #00ffdd;}
.logo{font-family:Poppins,Arial,sans-serif;font-size:19px;font-weight:700;color:#fff;text-transform:uppercase;}
.navlinks{display:flex;gap:22px;font-family:Poppins,Arial,sans-serif;font-size:13px;font-weight:500;color:#fff;}
.hero{height:180px;background:#212934;position:relative;display:flex;align-items:center;padding:0 36px;}
.herotext{width:480px;}
.herotext h1{font-family:Poppins,Arial,sans-serif;font-size:28px;font-weight:700;color:#fff;margin:0 0 10px;}
.herotext p{font-size:14px;color:#c8ccd2;margin:0 0 14px;}
.cta{display:inline-block;background:#00ffdd;color:#212934;font-family:Poppins,Arial,sans-serif;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:11px 22px;border-radius:2px;}
.grid{display:flex;gap:14px;padding:18px 36px;}
.card{width:200px;background:#fff;border:1px solid #d2d2d2;border-radius:4px;padding:12px;}
.thumb{height:88px;background:#f4f4f4;border-radius:4px;margin-bottom:10px;}
.ptitle{font-family:Poppins,Arial,sans-serif;font-size:14px;font-weight:600;}
.psku{font-family:Consolas,Menlo,monospace;font-size:11px;color:#747474;margin-top:4px;letter-spacing:.5px;}
.badges{display:flex;gap:6px;margin-top:8px;}
.pill{border:1px solid #00ffdd;color:#008888;font-family:Poppins,Arial,sans-serif;font-size:9px;font-weight:600;text-transform:uppercase;padding:2px 8px;border-radius:9999px;}
.pillgreen{background:#65bc7b;color:#fff;border:none;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#212934;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:12px;border-top:2px solid #00ffdd;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="top">Region: US · Find a Dealer · Support</div>
<div class="nav">
<div class="logo">Phanteks</div>
<div class="navlinks"><div>Cases</div><div>Coolers</div><div>Fans</div><div>Power Supplies</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Precision hardware, addressable light.</h1>
<p>Engineered chassis and cooling built for builders who care about the details.</p>
<div class="cta">Shop Cases</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:radial-gradient(circle,#00ffdd,#212934 70%)"></div><div class="ptitle">Enthoo Pro 2 Case</div><div class="psku">PH-ES620PTG_BK02</div><div class="badges"><span class="pill">ARGB</span><span class="pillgreen">In Stock</span></div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle,#65bc7b,#212934 70%)"></div><div class="ptitle">Glacier One 360 AIO</div><div class="psku">PH-GO360MP_DBK01</div><div class="badges"><span class="pill">ARGB</span></div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle,#e0284f,#212934 70%)"></div><div class="ptitle">M25 PWM Fan 3-Pack</div><div class="psku">PH-F25MP_BK03</div><div class="badges"><span class="pillgreen">In Stock</span></div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle,#00ffdd,#32373c 70%)"></div><div class="ptitle">Revolt X 1000W PSU</div><div class="psku">PH-P1000RX_BK01</div><div class="badges"><span class="pillgreen">In Stock</span></div></div>
</div>
<div class="footer"><span>© Phanteks · PC Hardware Engineered</span><span>Support · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00d632; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00d632; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00d632; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00d632; color: #000000;
border: 1px solid #27db51; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00b42a; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Roboto Mono",Menlo,Consolas,monospace; }
.stage { position:relative; width:960px; height:640px; display:flex; align-items:center; }
.hero { position:relative; z-index:2; width:460px; padding:0 56px; display:flex; flex-direction:column; gap:16px; }
.amt { font-size:96px; font-weight:700; letter-spacing:-2pt; line-height:1; margin:0; }
.amt span { color:#9E9E9E; font-size:64px; }
.word { font-size:28px; font-weight:900; letter-spacing:-0.5pt; margin:4px 0 0; text-transform:uppercase; }
.tag { font-size:15px; color:#9E9E9E; line-height:1.4; max-width:340px; margin:0; }
.row { display:flex; gap:12px; align-items:center; margin-top:8px; }
.cta { background:#00D632; color:#000000; border-radius:30px; padding:16px 32px; font-weight:700; font-size:17px; }
.cta2 { background:#1A1A1A; color:#FFFFFF; border-radius:30px; padding:16px 28px; font-weight:700; font-size:15px; }
.cashtag { margin-top:10px; font-size:15px; color:#00D632; }
.phonewrap { position:relative; z-index:2; width:500px; height:640px; display:flex; align-items:center; justify-content:center; }
.phone { position:relative; width:296px; height:604px; background:#000000; border:1pt solid #1F1F1F; border-radius:46px;
box-shadow:0 30px 90px rgba(0,0,0,0.7); overflow:hidden; }
.notch { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:120px; height:22px; background:#0a0a0a; border-radius:12px; z-index:6; }
.pamtzone { text-align:center; padding:44px 0 8px; }
.psign { font-size:34px; color:#9E9E9E; font-weight:700; }
.pnum { font-size:56px; font-weight:700; letter-spacing:-1.5pt; text-shadow:0 0 10px rgba(0,214,50,0.55); }
.precip { text-align:center; font-size:12px; color:#6E6E6E; margin-bottom:16px; }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); padding:0 18px; row-gap:2px; }
.key { height:52px; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:400; }
.pbtns { display:flex; gap:8px; padding:14px 18px 0; }
.pbtn { flex:1; height:44px; border-radius:22px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; }
.req { background:#1A1A1A; color:#FFFFFF; }
.pay { background:#00D632; color:#000000; }
.ptabbar { position:absolute; left:0; right:0; bottom:0; height:58px; background:#000000; border-top:0.5pt solid #1F1F1F;
display:flex; align-items:center; justify-content:space-around; }
.tglyph { width:20px; height:20px; border:2pt solid #FFFFFF; border-radius:4px; }
.tglyph.on { border-color:#00D632; }
.dollarglyph { font-size:24px; font-weight:700; color:#00D632; }
</style></head>
<body>
<div class="stage">
<div class="hero">
<p class="amt mono">$<span>0</span></p>
<h1 class="word">Cash App (iOS)</h1>
<p class="tag">Pure black, one violently saturated green, and a keypad big enough to fill the screen. Type a number, name a person, hit Pay.</p>
<div class="row">
<div class="cta">Pay</div>
<div class="cta2">Request</div>
</div>
<div class="cashtag mono">$cashtag</div>
</div>
<div class="phonewrap">
<div class="phone">
<div class="notch"></div>
<div class="pamtzone mono">
<span class="psign">$</span><span class="pnum">247</span>
</div>
<div class="precip">to $johndoe</div>
<div class="keypad mono">
<span class="key">1</span><span class="key">2</span><span class="key">3</span>
<span class="key">4</span><span class="key">5</span><span class="key">6</span>
<span class="key">7</span><span class="key">8</span><span class="key">9</span>
<span class="key">.</span><span class="key">0</span><span class="key">⌫</span>
</div>
<div class="pbtns">
<div class="pbtn req">Request</div>
<div class="pbtn pay">Pay</div>
</div>
<div class="ptabbar">
<span class="tglyph"></span><span class="tglyph"></span>
<span class="dollarglyph">$</span>
<span class="tglyph"></span><span class="tglyph"></span>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fff6f6; color: #1b1c1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fff6f6; color: #1b1c1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 900; line-height: 1.3; margin: 0; color: #1b1c1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #9f3a38; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #fff6f6; color: #9f3a38;
border: 1px solid #9f3a38; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #fff6f6; color: #1b1c1d;
border: 1px solid #c6c0c0; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #2185d0; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff6f6; font-family:'Arial Black',Arial,sans-serif; color:#555555; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#9f3a38;}
.logo{font-size:19px;font-weight:900;color:#fff;letter-spacing:.3px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:400;font-family:Arial,sans-serif;color:#f3d6d6;}
.navcta{background:#db2828;color:#fff;font-size:11px;font-weight:400;font-family:Arial,sans-serif;padding:8px 14px;border-radius:3px;}
.hero{height:220px;display:flex;background:#fff;border-bottom:1px solid #eeeeee;}
.herotext{width:440px;padding:26px 36px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:11px;font-weight:400;font-family:Arial,sans-serif;color:#1e70bf;margin-bottom:10px;}
.h1{font-size:24px;font-weight:900;color:#1b1c1d;line-height:1.3;margin:0 0 10px;}
.sub{font-size:13px;font-family:Arial,sans-serif;font-weight:400;color:#767676;margin:0 0 14px;max-width:320px;}
.btn{width:160px;text-align:center;background:#9f3a38;color:#fff;font-size:12px;font-family:Arial,sans-serif;font-weight:700;padding:10px 0;border-radius:3px;}
.heroimg{flex:1;position:relative;background:#1b1c1d;}
.vinyl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#e0b4b4 0 4%,#1b1c1d 4% 40%,#9f3a38 40% 42%,#1b1c1d 42% 100%);}
.vinyl:after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;background:#e0b4b4;}
.strip{display:flex;gap:1px;background:#eeeeee;}
.cell{flex:1;background:#f7f7f7;text-align:center;padding:8px;font-family:Arial,sans-serif;}
.clabel{font-size:9px;color:#767676;text-transform:uppercase;}
.cval{font-size:12px;color:#1b1c1d;margin-top:2px;font-weight:700;}
.sec{padding:16px 36px 0;}
.sectitle{font-size:16px;font-weight:900;color:#1b1c1d;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:154px;border:1px solid #eeeeee;border-radius:3px;padding:9px;background:#fff;position:relative;}
.thumb{height:96px;border-radius:2px;margin-bottom:8px;}
.pname{font-size:11px;font-weight:400;font-family:Arial,sans-serif;color:#1b1c1d;line-height:1.3;height:28px;overflow:hidden;}
.pprice{font-size:12px;font-weight:700;font-family:Arial,sans-serif;color:#9f3a38;margin-top:4px;}
.tag{position:absolute;top:7px;left:7px;background:#db2828;color:#fff;font-size:9px;font-family:Arial,sans-serif;font-weight:700;padding:3px 6px;border-radius:2px;}
</style>
<div class="nav">
<div class="logo">Oldies Com</div>
<div class="navlinks"><span>Vinyl</span><span>50s & 60s</span><span>Motown</span><span>Rockabilly</span></div>
<div class="navcta">Search Catalog</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Deep Catalog, Deeper Cuts</div>
<div class="h1">Every oldie you thought was gone for good.</div>
<div class="sub">Rare vinyl, CD reissues, and out-of-print gems from the golden age of American radio.</div>
<div class="btn">Browse The Vault</div>
</div>
<div class="heroimg"><div class="vinyl"></div></div>
</div>
<div class="strip">
<div class="cell"><div class="clabel">Titles</div><div class="cval">40,000+</div></div>
<div class="cell"><div class="clabel">Decades</div><div class="cval">1950s–1980s</div></div>
<div class="cell"><div class="clabel">Format</div><div class="cval">Vinyl & CD</div></div>
<div class="cell"><div class="clabel">Ships</div><div class="cval">Within 24hrs</div></div>
</div>
<div class="sec">
<div class="sectitle">This Week's Finds</div>
<div class="grid">
<div class="card"><span class="tag">Sale</span><div class="thumb" style="background:linear-gradient(150deg,#e0b4b4,#1b1c1d)"></div><div class="pname">Doo-Wop Classics, Vol. 3</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#da9796,#1b1c1d)"></div><div class="pname">Motown Legends LP</div><div class="pprice">$22.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#1e70bf,#1b1c1d)"></div><div class="pname">Surf Rock Anthology</div><div class="pprice">$18.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#9f3a38,#1b1c1d)"></div><div class="pname">Rockabilly Rarities CD</div><div class="pprice">$11.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4efe1; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f4efe1; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfcfa; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#2A2A1F; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.screen { display:flex; flex-direction:column; width:960px; height:640px; }
nav { height:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.brand { font-size:17px; font-weight:700; letter-spacing:-0.3px; color:#4C8B2B; }
.navsearch { width:120px; height:26px; border-radius:999px; background:#FAF6EC; border:1px solid #E7E0CF; }
.rewards { margin:0 24px; border-radius:18px; padding:14px 18px;
background:linear-gradient(135deg,#4C8B2B,#6BBE45); box-shadow:rgba(60,40,10,0.10) 0 4px 16px;
display:flex; align-items:center; justify-content:space-between; }
.rw-left { flex:1; }
.rw-label { font-size:10px; font-weight:700; letter-spacing:0.4pt; text-transform:uppercase; color:rgba(255,255,255,0.92); }
.rw-headline { font-size:17px; font-weight:700; color:#FFFFFF; margin-top:3px; }
.rw-sub { font-size:11px; color:rgba(255,255,255,0.92); margin-top:3px; }
.rw-progress { width:220px; }
.rw-track { height:6px; border-radius:3px; background:rgba(255,255,255,0.28); }
.rw-fill { height:100%; width:64%; border-radius:3px; background:#FFFFFF; }
.rw-chev { font-size:18px; color:#FFFFFF; margin-left:14px; }
main { flex:1; display:grid; grid-template-columns:1.05fr 1fr; gap:18px; padding:16px 24px 0; min-height:0; }
.catstrip { display:flex; gap:10px; margin-bottom:10px; }
.cat { font-size:13px; font-weight:600; color:#6C6655; padding-bottom:4px; }
.cat.active { color:#4C8B2B; border-bottom:2px solid #4C8B2B; }
.mrow { display:flex; align-items:center; gap:12px; height:96px; border-bottom:0.5px solid #E7E0CF; }
.mphoto { width:80px; height:80px; border-radius:14px; flex:0 0 80px; }
.minfo { flex:1; min-width:0; }
.mname { font-size:15px; font-weight:600; }
.mdesc { font-size:12px; color:#6C6655; margin-top:2px; }
.mfoot { display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.mprice { font-size:14px; font-weight:700; }
.madd { width:26px; height:26px; border-radius:50%; background:#4C8B2B; color:#fff; font-size:14px;
display:flex; align-items:center; justify-content:center; }
.detail { background:#F4EFE1; border-radius:18px; padding:16px; display:flex; flex-direction:column; overflow:hidden; }
.dphoto { width:100%; height:130px; border-radius:14px; background:linear-gradient(135deg,#E07A2F,#B0324B); }
.dname { font-size:18px; font-weight:600; margin-top:12px; }
.dmeta { font-size:13px; color:#6C6655; margin-top:2px; }
.drow { display:flex; align-items:center; justify-content:space-between; height:38px; border-bottom:0.5px solid #E7E0CF; }
.drow-label { font-size:14px; }
.drow.selected .drow-label { color:#4C8B2B; }
.drow-check { width:16px; height:16px; border-radius:4px; border:1.5px solid #E7E0CF; }
.drow.selected .drow-check { background:#4C8B2B; border-color:#4C8B2B; }
.stepper { display:flex; align-items:center; justify-content:center; gap:16px; background:#FAF6EC;
border:1px solid #E7E0CF; border-radius:999px; padding:6px 18px; width:fit-content; margin:12px auto 0; }
.stepper span { font-size:16px; font-weight:700; color:#4C8B2B; }
.stepper .count { font-size:15px; font-weight:700; color:#2A2A1F; }
.sticky-cta { margin-top:auto; background:#4C8B2B; color:#fff; border-radius:999px; text-align:center;
padding:12px; font-size:15px; font-weight:700; box-shadow:rgba(60,40,10,0.10) 0 4px 16px; }
.tabbar { flex:0 0 56px; display:flex; align-items:center; justify-content:space-around;
background:rgba(255,255,255,0.94); border-top:0.5px solid #E7E0CF; }
.tab { display:flex; flex-direction:column; align-items:center; gap:4px; }
.tab-dot { width:8px; height:8px; border-radius:50%; }
.tab.active .tab-dot { background:#4C8B2B; }
.tab:not(.active) .tab-dot { background:#9C9684; }
.tab-label { font-size:10px; font-weight:600; }
.tab.active .tab-label { color:#4C8B2B; }
.tab:not(.active) .tab-label { color:#9C9684; }
</style></head>
<body>
<div class="screen">
<nav>
<span class="brand">Panera (iOS)</span>
<div class="navsearch"></div>
</nav>
<div class="rewards">
<div class="rw-left">
<div class="rw-label">MyPanera Rewards</div>
<div class="rw-headline">You're 2 visits from a reward</div>
<div class="rw-sub">Unlimited Sip Club renews May 28</div>
</div>
<div class="rw-progress"><div class="rw-track"><div class="rw-fill"></div></div></div>
<span class="rw-chev">›</span>
</div>
<main>
<div>
<div class="catstrip">
<span class="cat active">Soups</span><span class="cat">Sandwiches</span><span class="cat">Salads</span>
<span class="cat">Bowls</span><span class="cat">Bakery</span>
</div>
<div class="mrow">
<div class="mphoto" style="background:linear-gradient(135deg,#E07A2F,#a85018);"></div>
<div class="minfo">
<div class="mname">Broccoli Cheddar Soup</div>
<div class="mdesc">Creamy soup with sharp cheddar and fresh broccoli, 720 cal</div>
<div class="mfoot"><span class="mprice">$7.59</span><span class="madd">+</span></div>
</div>
</div>
<div class="mrow">
<div class="mphoto" style="background:linear-gradient(135deg,#D8B271,#8c6a35);"></div>
<div class="minfo">
<div class="mname">Napa Almond Chicken Salad</div>
<div class="mdesc">On toasted country bread with lettuce and grapes, 580 cal</div>
<div class="mfoot"><span class="mprice">$9.29</span><span class="madd">+</span></div>
</div>
</div>
<div class="mrow">
<div class="mphoto" style="background:linear-gradient(135deg,#B0324B,#6e1b2e);"></div>
<div class="minfo">
<div class="mname">Strawberry Poppyseed Salad</div>
<div class="mdesc">Mixed greens, strawberries, candied pecans, 460 cal</div>
<div class="mfoot"><span class="mprice">$8.49</span><span class="madd">+</span></div>
</div>
</div>
</div>
<div class="detail">
<div class="dphoto"></div>
<div class="dname">Broccoli Cheddar Soup</div>
<div class="dmeta">720 cal · $7.59</div>
<div class="drow selected"><span class="drow-label">Sourdough Bread Bowl</span><span class="drow-check"></span></div>
<div class="drow"><span class="drow-label">No tomatoes <span style="color:#6C6655;font-weight:400;">+$1.49</span></span><span class="drow-check"></span></div>
<div class="stepper"><span>−</span><span class="count">1</span><span>+</span></div>
<div class="sticky-cta">Add to Order · $7.59</div>
</div>
</main>
<div class="tabbar">
<div class="tab active"><span class="tab-dot"></span><span class="tab-label">Home</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Order</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Rewards</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Favorites</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Account</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f6f1; color: #101820;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f6f1; color: #101820;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 300; line-height: 1.3; margin: 0; color: #101820; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.55; margin: 0; color: #63666a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: 0.5px; background: #101820; color: #f8f6f1;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: 0.5px; background: transparent; color: #101820;
border: 1px solid #101820; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.6; background: #f8f6f1; color: #101820;
border: 1px solid #bebebd; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #63666a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: 0.3px; background: #243127; color: #f8f6f1;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:300; background:#f8f6f1; color:#101820; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 44px;}
.logo{font-size:20px;font-weight:300;letter-spacing:1px;text-transform:uppercase;}
.navlinks{display:flex;gap:30px;font-size:12px;font-weight:400;letter-spacing:1px;text-transform:uppercase;}
.navlinks div:first-child{border-bottom:1px solid #101820;padding-bottom:4px;}
.hero{height:280px;display:flex;}
.herotxt{width:44%;padding:20px 44px;display:flex;flex-direction:column;justify-content:center;}
.herotxt .k{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#63666a;margin-bottom:14px;}
.herotxt h1{font-size:38px;font-weight:300;line-height:1.2;margin:0 0 16px;letter-spacing:-0.5px;}
.herotxt p{font-size:14px;line-height:1.6;color:#2e3333;max-width:290px;margin:0 0 22px;}
.cta{width:fit-content;font-size:12px;letter-spacing:1px;text-transform:uppercase;background:#101820;color:#f8f6f1;padding:14px 32px;}
.pots{width:56%;background:linear-gradient(180deg,#e4e0d9,#f2f5f5);position:relative;}
.bowl{position:absolute;border-radius:50%;}
.b1{width:150px;height:150px;bottom:60px;left:60px;background:radial-gradient(circle at 35% 30%,#fff,#e7e7e7 70%);box-shadow:0 20px 30px rgba(16,24,32,0.1);}
.b2{width:100px;height:100px;bottom:90px;left:230px;background:radial-gradient(circle at 35% 30%,#fff,#e7b5aa 75%);box-shadow:0 14px 20px rgba(16,24,32,0.1);}
.b3{width:80px;height:80px;bottom:190px;left:130px;background:radial-gradient(circle at 35% 30%,#fff,#243127 80%);box-shadow:0 10px 16px rgba(16,24,32,0.1);}
.strip{padding:20px 44px 0;}
.strip h2{font-size:22px;font-weight:300;margin:0 0 16px;}
.grid{display:flex;gap:24px;}
.card{width:198px;}
.cimg{height:130px;background:#ffffff;position:relative;}
.dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;}
.ctitle{font-size:14px;font-weight:400;margin-top:10px;}
.cprice{font-size:13px;color:#63666a;margin-top:4px;}
.tag{position:absolute;top:8px;left:8px;font-size:10px;letter-spacing:0.5px;text-transform:uppercase;padding:3px 10px;color:#f8f6f1;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#101820;display:flex;align-items:center;justify-content:space-between;padding:0 44px;color:#f8f6f1;font-size:11px;letter-spacing:0.5px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mud Australia</div>
<div class="navlinks"><div>Dinnerware</div><div>Vases</div><div>Lighting</div><div>The Studio</div></div>
</div>
<div class="hero">
<div class="herotxt">
<div class="k">Handmade Porcelain</div>
<h1>Formed by hand,<br>fired by fire</h1>
<p>Each piece carries the maker's mark — no two glazes settle quite the same way.</p>
<div class="cta">Explore the Collection</div>
</div>
<div class="pots"><div class="bowl b1"></div><div class="bowl b2"></div><div class="bowl b3"></div></div>
</div>
<div class="strip">
<h2>New This Season</h2>
<div class="grid">
<div class="card"><div class="cimg"><div class="tag" style="background:#243127;">Collection</div><div class="dot" style="background:radial-gradient(circle at 35% 30%,#fff,#e7e7e7 75%);"></div></div><div class="ctitle">Bowl — Large, Sand</div><div class="cprice">$210</div></div>
<div class="card"><div class="cimg"><div class="tag" style="background:#e2462f;">Sale</div><div class="dot" style="background:radial-gradient(circle at 35% 30%,#fff,#e7b5aa 75%);"></div></div><div class="ctitle">Vase — Slim, Blush</div><div class="cprice">$165</div></div>
<div class="card"><div class="cimg"><div class="dot" style="background:radial-gradient(circle at 35% 30%,#fff,#a8ada4 75%);"></div></div><div class="ctitle">Plate — Stone Glaze</div><div class="cprice">$88</div></div>
</div>
</div>
<div class="footer"><span>Made in Australia</span><span>Care Guide Shipping</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #25d366; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #25d366; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #1a6837; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #075e54; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #25d366; color: #075e54;
border: 1px solid #075e54; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #25d366; color: #111111;
border: 1px solid #22b458; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #1a6837; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #20c063; color: #075e54;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ECE5DD; color:#111B21; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { width:960px; height:640px; display:flex; flex-direction:column; }
header { height:64px; background:#F0F2F5; border-bottom:1px solid #E9EDEF; flex:none;
display:flex; align-items:center; padding:0 22px; gap:12px; }
header .back { font-size:20px; color:#075E54; }
.avatar { width:38px; height:38px; border-radius:50%;
background:linear-gradient(135deg,#128C7E,#075E54); display:flex; align-items:center; justify-content:center;
color:#fff; font-weight:700; font-size:14px; }
.who { flex:1; }
.who .name { font-size:16px; font-weight:600; margin:0; }
.who .status { font-size:12px; color:#25D366; margin:1px 0 0; }
.hicons { display:flex; gap:22px; color:#075E54; font-size:17px; }
.thread { flex:1; position:relative; padding:18px 60px; overflow:hidden;
background-image:
radial-gradient(rgba(7,94,84,0.05) 1.4px, transparent 1.4px),
radial-gradient(rgba(7,94,84,0.045) 1.4px, transparent 1.4px);
background-size:64px 64px, 64px 64px;
background-position:0 0, 32px 32px; }
.daypill { text-align:center; margin:2px 0 16px; }
.daypill span { background:rgba(255,255,255,0.75); color:#54636D; font-size:12px; font-weight:600;
padding:5px 14px; border-radius:8px; }
.row { display:flex; margin-bottom:8px; }
.row.out { justify-content:flex-end; }
.bubble { max-width:420px; padding:8px 12px; font-size:15px; line-height:1.35; position:relative; }
.bubble.in { background:#FFFFFF; border-radius:12px 12px 12px 0; }
.bubble.out { background:#D9FDD3; border-radius:12px 12px 0 12px; }
.bubble .meta { display:flex; justify-content:flex-end; gap:4px; margin-top:4px; font-size:11px; color:#667781;
align-items:center; }
.bubble .meta .tick { color:#53BDEB; font-size:13px; }
.voice { display:flex; align-items:center; gap:10px; width:260px; }
.voice .pb { width:34px; height:34px; border-radius:50%; background:#25D366; color:#fff;
display:flex; align-items:center; justify-content:center; font-size:13px; flex:none; }
.voice .wave { flex:1; display:flex; align-items:center; gap:2px; height:20px; }
.voice .wave span { width:2px; background:#25D366; border-radius:1px; }
.voice .wave span.dim { background:#8696A0; }
.voice .dur { font-size:11px; color:#667781; }
.encbanner { text-align:center; margin:0 0 16px; }
.encbanner span { background:#FFF5C4; color:#54636D; font-size:12px; font-weight:500; padding:8px 16px;
border-radius:8px; display:inline-block; max-width:440px; }
.composer { flex:none; height:60px; background:#FFFFFF; border-top:1px solid #E9EDEF;
display:flex; align-items:center; padding:0 16px; gap:12px; }
.composer .ic { font-size:20px; color:#8696A0; }
.field { flex:1; background:#F0F2F5; border-radius:20px; height:40px; display:flex; align-items:center;
padding:0 16px; color:#8696A0; font-size:15px; }
.sendbtn { width:36px; height:36px; border-radius:50%; background:#25D366; color:#fff;
display:flex; align-items:center; justify-content:center; font-size:15px; }
</style></head>
<body>
<div class="app">
<header>
<span class="back">‹</span>
<div class="avatar">JW</div>
<div class="who">
<p class="name">Jihoon</p>
<p class="status">typing…</p>
</div>
<div class="hicons"><span>📹</span><span>📞</span><span>⋮</span></div>
</header>
<div class="thread">
<div class="daypill"><span>WhatsApp (iOS)</span></div>
<div class="encbanner"><span>🔒 Messages are end-to-end encrypted. No one outside of this chat can read them.</span></div>
<div class="daypill"><span>Today</span></div>
<div class="row"><div class="bubble in">Haven't packed away the camping tent yet, right?<div class="meta">10:04</div></div></div>
<div class="row out"><div class="bubble out">Not yet! Still sitting in the trunk lol<div class="meta">10:05 <span class="tick">✓✓</span></div></div></div>
<div class="row"><div class="bubble in">
<div class="voice">
<div class="pb">▶</div>
<div class="wave">
<span style="height:6px"></span><span style="height:14px"></span><span style="height:9px"></span>
<span style="height:18px"></span><span style="height:11px"></span><span style="height:7px"></span>
<span class="dim" style="height:13px"></span><span class="dim" style="height:8px"></span>
<span class="dim" style="height:15px"></span><span class="dim" style="height:6px"></span>
</div>
<div class="dur">0:23</div>
</div>
<div class="meta">10:06</div>
</div></div>
<div class="row out"><div class="bubble out">Sounds great, I'll pick you up at 6<div class="meta">10:07 <span class="tick">✓✓</span></div></div></div>
<div class="row"><div class="bubble in">Deal! Bring some coffee too ☕<div class="meta">10:08</div></div></div>
</div>
<div class="composer">
<span class="ic">😊</span>
<div class="field">Message</div>
<span class="ic">📎</span>
<span class="ic">📷</span>
<div class="sendbtn">🎙</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #374151;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #374151;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; margin: 0; color: #374151; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.25px; background: #108474; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.25px; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #555555;
border: 1px solid #c8ccd0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #fbcd0a; color: #374151;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9fafb; color:#374151; box-sizing:border-box;
font-family:'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#fff; border-bottom:1px solid #dedede; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.brand { font-size:22px; font-weight:800; margin:0; color:#108474; }
.navlinks { display:flex; align-items:center; gap:20px; font-size:15px; font-weight:600; }
.navicons { display:flex; gap:14px; align-items:center; }
.icon { width:40px; height:40px; border-radius:9999px; background:#f2f2f2; }
.cart { position:relative; }
.cart::after { content:'2'; position:absolute; top:-4px; right:-4px; width:16px; height:16px; border-radius:999px;
background:#fbcd0a; color:#374151; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.hero { background:#c1e6e6; padding:26px 40px; display:flex; align-items:center; gap:30px; border-radius:0 0 24px 24px; }
.hero-copy { flex:1.1; }
.hero h1 { font-size:30px; font-weight:800; line-height:1.2; letter-spacing:-0.3px; margin:0 0 10px; color:#0d6b5d; }
.hero p { font-size:14px; color:#374151; margin:0 0 16px; max-width:380px; line-height:1.4; }
.btn-primary { background:#108474; color:#fff; border:none; border-radius:9999px; padding:14px 30px;
font-size:15px; font-weight:700; height:48px; }
.hero-visual { flex:1; height:160px; border-radius:16px; background:#fff; position:relative; overflow:hidden; }
.hero-visual::before { content:''; position:absolute; width:100px; height:100px; border-radius:50%;
background:radial-gradient(circle at 35% 35%, #fff, #a89cc8); left:50px; top:22px; }
.hero-visual::after { content:''; position:absolute; width:60px; height:60px; border-radius:50%;
background:#fbcd0a; right:50px; bottom:16px; }
.section { padding:18px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-size:20px; font-weight:800; margin:0; }
.sec-head span { font-size:13px; font-weight:700; color:#108474; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.thumb { aspect-ratio:1/1; position:relative; }
.t1 { background:linear-gradient(150deg,#fdf0c2,#fbcd0a44); background:linear-gradient(150deg,#fef4d0,#f7dd7e); }
.t2 { background:linear-gradient(150deg,#e3f5f2,#a3d5c9); }
.t3 { background:linear-gradient(150deg,#ece8f5,#c8bee0); }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; letter-spacing:0.5px;
text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.badge.yellow { background:#fbcd0a; color:#374151; }
.badge.lav { background:#a89cc8; color:#fff; }
.cbody { padding:8px 14px 14px; }
.stars { color:#fbcd0a; font-size:12px; margin-bottom:2px; }
.card h3 { font-size:16px; font-weight:600; margin:2px 0 4px; }
.card .price { font-size:17px; font-weight:700; margin:0; }
footer { background:#374151; color:#e5e7eb; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#e5e7eb; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Bellzi</p>
<div class="navlinks"><span>Shop All</span></div>
<div class="navicons"><div class="icon"></div><div class="icon cart"></div></div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Meet your new best friend</h1>
<p>Squeezably soft, wonderfully weird plushies made for hugging, hoarding, and never growing up.</p>
<button class="btn-primary">Shop Now</button>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2>Fan Favorites</h2><span>Shop All →</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge yellow">Sale</span></div>
<div class="cbody"><div class="stars">★★★★★</div><h3>Blobby the Axolotl</h3><p class="price">$24.99</p></div>
</div>
<div class="card">
<div class="thumb t2"></div>
<div class="cbody"><div class="stars">★★★★★</div><h3>Chonk the Capybara</h3><p class="price">$29.99</p></div>
</div>
<div class="card">
<div class="thumb t3"><span class="badge lav">Limited</span></div>
<div class="cbody"><div class="stars">★★★★☆</div><h3>Nimbus the Cloud Cat</h3><p class="price">$34.99</p></div>
</div>
</div>
</section>
<footer>
<span>© Bellzi</span>
<div><a href="#">Shop</a><a href="#">Help</a><a href="#">Connect</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e8e8e1; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e8e8e1; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 600; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffde16; color: #231f20;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #231f20;
border: 1px solid #ffde16; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #231f20;
border: 1px solid #b7b6b1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #ffde16; color: #231f20;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Open Sans',sans-serif; background:#e8e8e1; color:#231f20; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dedede;}
.logo{font-size:19px;font-weight:700;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;letter-spacing:.3px;}
.hero{height:290px;background:#121212;display:flex;align-items:center;padding:0 44px;position:relative;overflow:hidden;}
.hero:after{content:'';position:absolute;right:70px;top:24px;width:60px;height:240px;border-radius:30px;background:linear-gradient(160deg,#3a2a1a,#1a1210);box-shadow:0 16px 34px rgba(0,0,0,.4);}
.hero:before{content:'';position:absolute;right:34px;top:70px;width:130px;height:150px;border-radius:50% 50% 40% 40%;background:linear-gradient(150deg,#6b4a2f,#2a1c10);}
.headstock{position:absolute;right:88px;top:10px;width:30px;height:56px;border-radius:6px 6px 14px 14px;background:#231f20;z-index:2;}
.herotext{width:440px;color:#e8e8e1;}
.herotext .kick{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#ffde16;margin-bottom:10px;}
.herotext h1{font-size:34px;font-weight:700;letter-spacing:-.5px;margin:0 0 12px;line-height:1.15;}
.herotext p{font-size:15px;color:#c9c9c1;margin:0 0 18px;max-width:340px;}
.hbtn{display:inline-block;background:#ffde16;color:#231f20;font-size:14px;font-weight:600;letter-spacing:.5px;padding:12px 26px;border-radius:4px;}
.sec{padding:22px 36px 0;}
.sectitle{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#767676;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:196px;background:#fff;border-radius:4px;overflow:hidden;}
.thumb{height:112px;position:relative;}
.chip{position:absolute;top:8px;left:8px;background:#ffde16;color:#231f20;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 8px;border-radius:2px;}
.cbody{padding:12px;}
.series{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#767676;margin-bottom:4px;}
.ptitle{font-size:18px;font-weight:600;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#231f20;color:#dedede;font-size:12px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.footer b{color:#ffde16;}
</style>
<div class="wrap">
<div class="nav"><div class="logo">Novo Guitars</div><div class="navlinks"><div>Serus</div><div>Oranger</div><div>Dandy</div><div>Contino</div></div></div>
<div class="hero">
<div class="headstock"></div>
<div class="herotext"><div class="kick">Hand-Shaped Since the First Neck</div><h1>Instruments, not inventory.</h1><p>Small-batch electric guitars finished the way a luthier finishes a neck heel — slowly.</p><div class="hbtn">Explore the Line</div></div>
</div>
<div class="sec">
<div class="sectitle">Current Builds</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#6b4a2f,#2a1c10)"><div class="chip">Serus</div></div><div class="cbody"><div class="series">Serus T Roasted</div><div class="ptitle">$2,895</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#231f20,#444444)"><div class="chip">Oranger</div></div><div class="cbody"><div class="series">Oranger HB</div><div class="ptitle">$3,150</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8a5a2f,#3a2410)"></div><div class="cbody"><div class="series">Dandy Cutlass</div><div class="ptitle">$2,650</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#444444,#231f20)"></div><div class="cbody"><div class="series">Contino Standard</div><div class="ptitle">$3,395</div></div></div>
</div>
</div>
<div class="footer"><span>Every model given room to read as an artifact</span><span>Find a <b>Dealer</b></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fee500; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fee500; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7009; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fee500; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fee500; color: #111111;
border: 1px solid #d8c303; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7009; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e3d127; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif; }
* { box-sizing:border-box; }
.nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #eeeeee; }
.nav .brand { display:flex; align-items:center; gap:8px; }
.bubble { width:26px; height:22px; background:#fae100; border-radius:11px 11px 11px 4px; position:relative; }
.bubble::after { content:''; position:absolute; left:6px; bottom:-6px; width:8px; height:8px; background:#fae100;
clip-path:polygon(0 0, 100% 0, 0 100%); }
.bubble-dot { position:absolute; width:3px; height:3px; background:#000; border-radius:50%; }
.nav .brand span { font-size:18px; font-weight:700; color:#333333; }
.pillnav { display:flex; gap:8px; }
.pill { background:#ffffff; color:#000000; border-radius:999px; padding:4px 16px 6px; height:37px;
font-size:17px; font-weight:400; display:flex; align-items:center; }
.search-control { width:36px; height:36px; border-radius:18px; display:flex; align-items:center; justify-content:center; }
.search-control span { width:12px; height:12px; border:2px solid #333333; border-radius:50%; position:relative; }
.search-control span::after { content:''; position:absolute; width:6px; height:2px; background:#333333;
right:-5px; bottom:0px; transform:rotate(45deg); }
.hero { padding:34px 32px 24px; display:flex; flex-direction:column; gap:14px; }
.hero .eyebrow { font-size:13px; font-weight:700; letter-spacing:.08em; color:#888888; margin:0; text-transform:uppercase; }
.hero h1 { font-size:44px; font-weight:700; line-height:1.2; letter-spacing:-1px; margin:0; max-width:640px; color:#333333; }
.hero p { font-size:14px; line-height:24.9px; letter-spacing:-.2px; color:#888888; margin:0; max-width:520px; }
.hero .ctas { display:flex; gap:12px; align-items:center; margin-top:6px; }
.tag-dark { background:#111111; color:#ffffff; border:2px solid #ffffff; outline:1px solid #111111; border-radius:16px;
padding:7px 8px 8px; height:32px; font-size:13px; font-weight:700; display:flex; align-items:center; }
.login-btn { background:#fee500; border-radius:12px; height:40px; padding:0 16px; display:flex; align-items:center;
gap:8px; color:rgba(0,0,0,.85); font-size:14px; font-weight:600; }
.login-symbol { width:16px; height:13px; background:#000000; border-radius:8px 8px 8px 2px; position:relative; }
.login-symbol::after { content:''; position:absolute; left:3px; bottom:-4px; width:5px; height:5px; background:#000;
clip-path:polygon(0 0, 100% 0, 0 100%); }
.filters { display:flex; gap:8px; padding:0 32px 18px; }
.mfilter { background:#eeeeee; color:#000000; border-radius:30px; padding:8px 20px 12px; height:44px;
font-size:16px; font-weight:700; display:flex; align-items:center; }
.mfilter.selected { background:#111111; color:#ffffff; border:2px solid #ffffff; outline:1px solid #111; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 32px; }
.card { background:#ffffff; border:1px solid #dbdbdb; border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:6px; }
.card h3 { font-size:20px; font-weight:700; margin:0; color:#333333; }
.card p { font-size:13px; color:#888888; margin:0; line-height:1.4; }
.footer { position:absolute; left:0; right:0; bottom:0; height:64px; border-top:1px solid #eeeeee; background:#ffffff;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.fpills { display:flex; gap:8px; }
.fpill { background:#eeeeee; color:#000000; border-radius:24px; padding:10px 20px 12px; height:40px; font-size:12px;
font-weight:400; display:flex; align-items:center; }
.footer .copy { font-size:12px; color:#888888; }
body { position:relative; }
</style></head>
<body>
<div class="nav">
<div class="brand"><span class="bubble"></span><span>Kakao</span></div>
<div class="pillnav">
<span class="pill">About</span>
<span class="pill">Services</span>
<span class="pill">Newsroom</span>
<span class="pill">Careers</span>
</div>
<span class="search-control"><span></span></span>
</div>
<div class="hero">
<p class="eyebrow">Mobile life platform</p>
<h1>Everyday connection, powered by technology that understands people.</h1>
<p>Messaging, commerce, mobility, and content — woven into one platform that quietly threads through daily life.</p>
<div class="ctas">
<span class="tag-dark">Discover Kakao ›</span>
<span class="login-btn"><span class="login-symbol"></span>Login with Kakao</span>
</div>
</div>
<div class="filters">
<span class="mfilter selected">All areas</span>
<span class="mfilter">Messaging</span>
<span class="mfilter">Commerce</span>
<span class="mfilter">Mobility</span>
<span class="mfilter">Content</span>
</div>
<div class="cards">
<div class="card"><h3>Messaging</h3><p>Everyday conversation as the entry point to channels, brands, and services.</p></div>
<div class="card"><h3>Commerce</h3><p>Gifting, shopping, and payments folded into the same familiar chat surface.</p></div>
<div class="card"><h3>Mobility</h3><p>Getting where you're going, connected back to the same ecosystem.</p></div>
</div>
<div class="footer">
<div class="fpills">
<span class="fpill">Investor Relations</span>
<span class="fpill">ESG</span>
<span class="fpill">Brand</span>
<span class="fpill">Newsroom</span>
</div>
<span class="copy">© Kakao Corp. All rights reserved.</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2c2a29;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2c2a29;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #2c2a29; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #63666a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #005875; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #005875;
border: 1px solid #005875; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #2c2a29;
border: 1px solid #e1e2e3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #63666a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #fabf01; color: #2c2a29;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,Helvetica,sans-serif; color:#2c2a29; }
*{box-sizing:border-box;}
.promo{height:36px;background:#ee911a;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e1e2e3;}
.logo{font-family:'Trebuchet MS',Arial,sans-serif;font-size:20px;font-weight:700;color:#005875;}
.navlinks{display:flex;gap:22px;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;font-weight:700;}
.hero{height:220px;background:#005875;display:flex;align-items:center;padding:0 40px;}
.herotext{width:440px;}
h1{font-family:'Trebuchet MS',Arial,sans-serif;font-size:32px;font-weight:700;color:#fff;margin:0 0 10px;letter-spacing:-0.3px;}
.sub{font-size:14px;color:#c9e4ec;margin:0 0 18px;max-width:360px;}
.cta{display:inline-block;background:#ee911a;color:#fff;font-size:16px;font-weight:700;padding:16px 36px;border-radius:4px;}
.sec{padding:22px 40px 0;}
.chips{display:flex;gap:8px;margin-bottom:16px;}
.chip{background:#ecf2f6;border:1px solid #005875;color:#005875;font-size:12px;padding:4px 12px;border-radius:9999px;}
.chip.active{background:#005875;color:#fff;}
.grid{display:flex;gap:16px;}
.card{width:210px;background:#fff;border:1px solid #e1e2e3;border-radius:8px;padding:14px;position:relative;}
.thumb{height:88px;background:#eeeeee;border-radius:6px;margin-bottom:10px;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.pname{font-family:'Trebuchet MS',Arial,sans-serif;font-size:16px;font-weight:700;margin:0 0 4px;}
.pprice{font-family:'Trebuchet MS',Arial,sans-serif;font-size:20px;font-weight:700;color:#005875;}
.pfrom{font-size:12px;color:#63666a;}
</style>
<div class="promo">FREE GROUND SHIPPING ON ORDERS OVER $99</div>
<div class="nav">
<div class="logo">Psprint</div>
<div class="navlinks"><span style="color:#005875">Business Cards</span><span>Flyers</span><span>Banners</span><span>Stickers</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Print Sharper. Ship Faster.</h1>
<p class="sub">Upload your file, pick a quantity break, and get proofs back before lunch.</p>
<div class="cta">Get a Quote</div>
</div>
</div>
<div class="sec">
<div class="chips">
<div class="chip active">All</div>
<div class="chip">Business Cards</div>
<div class="chip">Postcards</div>
<div class="chip">Signage</div>
</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#fabf01;color:#2c2a29">SALE</span><div class="thumb"></div><div class="pname">Standard Business Cards</div><div class="pfrom">from</div><div class="pprice">$19.99</div></div>
<div class="card"><span class="badge" style="background:#cb2a88;color:#fff">NEW</span><div class="thumb"></div><div class="pname">Vinyl Banner 3x6</div><div class="pfrom">from</div><div class="pprice">$44.99</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Glossy Postcards</div><div class="pfrom">from</div><div class="pprice">$29.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #49945f; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #49945f;
border: 1px solid #49945f; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #2daaac; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system, system-ui, 'Segoe UI', Roboto, sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{position:absolute; top:0; left:0; width:960px; height:72px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 40px;}
.logo{font-family:'Hepta Slab',Georgia,serif; font-size:20px; font-weight:700; color:#1a1a1a;}
.navlinks{display:flex; gap:22px; font-size:15px; font-weight:600; color:#1a1a1a;}
.search{width:150px; height:36px; border-radius:9999px; background:#f5f5f5; border:1px solid #d4d4d4; font-size:12px; color:#666; display:flex; align-items:center; padding:0 14px;}
.hero{position:absolute; top:72px; left:0; width:960px; height:270px; background:#f5f5f5; display:flex; align-items:center; justify-content:space-between; padding:0 50px;}
.heroText{width:420px;}
.headline{font-family:'Hepta Slab',Georgia,serif; font-size:32px; font-weight:600; line-height:1.2; color:#1a1a1a; margin-bottom:14px;}
.sub{font-size:15px; color:#333333; margin-bottom:20px; width:380px;}
.btn{display:inline-block; background:#49945f; color:#fff; font-size:16px; font-weight:600; letter-spacing:0.3px; padding:14px 28px; border-radius:8px;}
.craftGrid{position:relative; width:340px; height:230px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center;}
.pom{width:44px; height:44px; border-radius:50%;}
.p1{background:#49945f;} .p2{background:#2daaac;} .p3{background:#3d7db0;} .p4{background:#f5c542;} .p5{background:#49945f; opacity:0.7;} .p6{background:#2daaac; opacity:0.7;}
.sec{position:absolute; top:342px; left:0; width:960px; height:298px; padding:28px 40px;}
.secTitle{font-family:'Hepta Slab',Georgia,serif; font-size:24px; font-weight:600; margin-bottom:16px; color:#1a1a1a;}
.grid{display:flex; gap:16px;}
.card{width:216px; background:#fff; border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,0.06); padding:14px; position:relative;}
.cardImg{width:100%; height:96px; background:#f5f5f5; border-radius:8px; display:flex; align-items:center; justify-content:center;}
.craftIcon{width:60px; height:60px; border-radius:50%; background:conic-gradient(#49945f,#2daaac,#3d7db0,#f5c542,#49945f);}
.cardTitle{font-family:'Hepta Slab',Georgia,serif; font-size:16px; font-weight:600; margin-top:12px; color:#1a1a1a;}
.cardPrice{font-size:14px; color:#333; margin-top:4px;}
.badge{position:absolute; top:8px; left:8px; background:#2daaac; color:#fff; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:2px 8px; border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Kid Made Modern</div>
<div class="navlinks"><span>Kits</span><span>Projects</span><span>Art Supplies</span></div>
<div class="search">Search kits...</div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">Make Something<br>Today.</div>
<div class="sub">Craft kits and art supplies designed like a real studio, sized for small hands.</div>
<div class="btn">Shop Kits</div>
</div>
<div class="craftGrid">
<div class="pom p1"></div><div class="pom p2"></div><div class="pom p3"></div><div class="pom p4"></div><div class="pom p5"></div><div class="pom p6"></div>
</div>
</div>
<div class="sec">
<div class="secTitle">Featured Projects</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="cardImg"><div class="craftIcon"></div></div><div class="cardTitle">Pom-Pom Animal Kit</div><div class="cardPrice">$19.99</div></div>
<div class="card"><div class="cardImg"><div class="craftIcon"></div></div><div class="cardTitle">Acrylic Paint Set</div><div class="cardPrice">$14.99</div></div>
<div class="card"><div class="cardImg"><div class="craftIcon"></div></div><div class="cardTitle">Pipe Cleaner Studio</div><div class="cardPrice">$12.99</div></div>
<div class="card"><div class="cardImg"><div class="craftIcon"></div></div><div class="cardTitle">DIY Jewelry Box</div><div class="cardPrice">$22.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c1b1b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c1b1b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: #1c1b1b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #696969; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #4469af; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #1c1b1b;
border: 1px solid #4469af; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1c1b1b;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #696969; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c8232c; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Open Sans',Arial,sans-serif; color:#1c1b1b; }
*{box-sizing:border-box;}
.nav{height:72px;border-bottom:1px solid #d9d9d9;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:400;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;}
.navlinks div:first-child{color:#4469af;border-bottom:2px solid #4469af;padding-bottom:24px;}
.hero{height:280px;background:#121212;display:flex;align-items:center;padding:0 36px;position:relative;overflow:hidden;}
.overlay{position:absolute;inset:0;background:rgba(28,27,27,0.4);}
.herotext{position:relative;z-index:2;}
.herotext h1{font-size:36px;font-weight:400;color:#fff;margin:0 0 10px;line-height:1.15;max-width:420px;}
.herotext p{font-size:15px;color:#e2e2e2;margin:0 0 18px;max-width:360px;}
.cta{display:inline-block;background:#4469af;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:12px 26px;border-radius:4px;}
.tent{position:absolute;right:60px;top:80px;width:0;height:0;border-left:90px solid transparent;border-right:90px solid transparent;border-bottom:120px solid #363636;}
.tentr{position:absolute;right:60px;top:150px;width:180px;height:5px;background:#4469af;}
.grid{display:flex;gap:14px;padding:20px 36px 0;}
.card{width:196px;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.06);overflow:hidden;position:relative;}
.thumb{height:110px;}
.badgesale{position:absolute;top:8px;left:8px;background:#c8232c;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:2px 8px;border-radius:4px;}
.pname{font-size:16px;font-weight:600;padding:10px 12px 0;}
.pprice{font-size:16px;padding:4px 12px 12px;}
.spec{font-family:Consolas,Menlo,monospace;font-size:11px;color:#696969;padding:0 12px 10px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:50px;background:#1c1b1b;color:#a1a1a1;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;}
.footer span{margin-left:16px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Ostrya</div>
<div class="navlinks"><div>Tents</div><div>Packs</div><div>Sleep Systems</div><div>Field Gear</div></div>
</div>
<div class="hero">
<div class="overlay"></div><div class="tent"></div><div class="tentr"></div>
<div class="herotext">
<h1>Gear for people who pack by weight.</h1>
<p>Ultralight shelters and packs, tested against real weather.</p>
<div class="cta">Shop Tents</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4469af,#1c1b1b)"></div><div class="pname">Halcyon 2P Tent</div><div class="spec">2.1kg · 3-season</div><div class="pprice">$429</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#363636,#4469af)"></div><div class="badgesale">Sale</div><div class="pname">Vireo 40L Pack</div><div class="spec">40L · 1.3kg</div><div class="pprice">$219</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1c1b1b,#696969)"></div><div class="pname">Field Quilt 20°F</div><div class="spec">650-fill down</div><div class="pprice">$289</div></div>
</div>
<div class="footer"><span>© Field-Tested Gear</span><span>Shipping<span> Warranty<span> Field Notes</span></span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111010;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111010;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #111010; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #5d5d5d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #20366a; color: #ffffff;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #20366a;
border: 1px solid #20366a; border-radius: 12px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #242424;
border: 1px solid #c4c3c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5d5d5d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f05636; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Poppins', 'Helvetica Neue', sans-serif; color:#20366a; }
*{box-sizing:border-box;}
.nav{height:72px;background:#20366a;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:22px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#fff;}
.navlinks span:first-child{color:#00b3f0;}
.cta{background:#f05636;color:#fff;font-size:13px;font-weight:600;padding:10px 20px;border-radius:9999px;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;background:linear-gradient(120deg,#ffffff 55%,#e6f8ff 100%);position:relative;overflow:hidden;}
.heroText{width:440px;z-index:2;}
.badge{display:inline-block;background:#00b3f0;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:5px 12px;border-radius:9999px;margin-bottom:12px;}
.headline{font-size:32px;font-weight:700;line-height:1.2;margin:0 0 12px;color:#20366a;}
.sub{font-size:14px;line-height:1.55;color:#4a5678;margin:0 0 20px;max-width:370px;}
.btn{display:inline-block;background:#f05636;color:#fff;font-size:14px;font-weight:600;padding:13px 26px;border-radius:12px;}
.globe{position:absolute;right:90px;top:55px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#00b3f0,#20366a 80%);box-shadow:0 12px 30px rgba(32,54,106,.25);}
.globe:before{content:'';position:absolute;left:14px;top:60px;width:122px;height:2px;background:rgba(255,255,255,.5);}
.plane{position:absolute;right:60px;top:40px;width:34px;height:20px;background:#f05636;border-radius:0 12px 12px 0;}
.sec{position:relative;height:290px;padding:26px 40px;}
.secTitle{font-size:18px;font-weight:700;color:#20366a;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:216px;background:#f7f9fd;border-radius:20px;padding:12px;position:relative;}
.agebadge{position:absolute;top:8px;left:8px;background:#00b3f0;color:#fff;font-size:10px;font-weight:700;padding:3px 10px;border-radius:9999px;}
.thumb{height:96px;border-radius:12px;margin-bottom:10px;}
.cardTitle{font-size:14px;font-weight:600;color:#20366a;margin-bottom:4px;}
.cardPrice{font-size:13px;font-weight:700;color:#f05636;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#20366a;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#00b3f0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Little Passports</div>
<div class="navlinks"><span>Explorer Kits</span><span>World Edition</span><span>Science Expeditions</span></div>
<div class="cta">Start Adventure</div>
</div>
<div class="hero">
<div class="heroText">
<div class="badge">Ages 3–14</div>
<div class="headline">Adventure arrives<br>in the mailbox.</div>
<div class="sub">Hands-on kits that turn geography, science, and culture into a monthly mission.</div>
<div class="btn">Shop Kits</div>
</div>
<div class="globe"></div>
<div class="plane"></div>
</div>
<div class="sec">
<div class="secTitle">Explorer Kits by Age</div>
<div class="grid">
<div class="card"><div class="agebadge">3–4</div><div class="thumb" style="background:linear-gradient(135deg,#00b3f0,#20366a)"></div><div class="cardTitle">Early Explorers</div><div class="cardPrice">$27.95/mo</div></div>
<div class="card"><div class="agebadge">5–8</div><div class="thumb" style="background:linear-gradient(135deg,#f05636,#20366a)"></div><div class="cardTitle">World Edition</div><div class="cardPrice">$28.95/mo</div></div>
<div class="card"><div class="agebadge">9–12</div><div class="thumb" style="background:linear-gradient(135deg,#20366a,#00b3f0)"></div><div class="cardTitle">Science Expeditions</div><div class="cardPrice">$29.95/mo</div></div>
<div class="card"><div class="agebadge">10–14</div><div class="thumb" style="background:linear-gradient(135deg,#20366a,#f05636)"></div><div class="cardTitle">Culture Quest</div><div class="cardPrice">$29.95/mo</div></div>
</div>
</div>
<div class="footer"><span>© Adventure, Delivered Monthly</span><span>Gift a Subscription</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; letter-spacing: -0.11px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.16px; background: #c88282; color: #ffffff;
border: none; border-radius: 12px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.16px; background: #ffffff; color: #121212;
border: 1px solid #c88282; border-radius: 12px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #444444;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.27; letter-spacing: 0.11px; background: #a3f234; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Barlow', -apple-system, system-ui, 'Helvetica Neue', Arial, sans-serif; background:#ffffff; color:#444444; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #ececec;}
.logo{font-size:22px;font-weight:700;color:#121212;letter-spacing:-0.4px;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;letter-spacing:0.2px;color:#121212;}
.utility{display:flex;gap:14px;color:#121212;font-size:13px;}
.hero{height:236px;display:flex;background:#f7f7f7;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 34px;}
.overline{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#c88282;margin-bottom:10px;}
.herotext h1{font-size:34px;font-weight:700;color:#121212;margin:0 0 10px;letter-spacing:-0.7px;line-height:1.1;}
.herotext p{font-size:14px;color:#444444;margin:0 0 16px;max-width:300px;}
.cta{display:inline-block;background:#c88282;color:#fff;font-size:14px;font-weight:600;padding:13px 26px;border-radius:12px;width:fit-content;}
.heroimg{width:54%;position:relative;overflow:hidden;background:radial-gradient(circle at 65% 45%, #e4c1c1, #c88282 55%, #121212 130%);}
.heroimg:before{content:'';position:absolute;left:40%;top:35%;width:110px;height:110px;border-radius:50%;background:#f7f7f7;box-shadow:0 10px 24px rgba(0,0,0,0.25);}
.heroimg:after{content:'';position:absolute;left:calc(40% + 44px);top:calc(35% + 44px);width:22px;height:22px;border-radius:50%;background:#a3f234;}
.section{padding:18px 32px 0;}
.sectitle{font-size:13px;font-weight:600;letter-spacing:0.3px;color:#121212;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:150px;background:#f7f7f7;border-radius:12px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#a3f234;color:#121212;font-size:10px;font-weight:600;letter-spacing:0.6px;text-transform:uppercase;border-radius:4px;padding:2px 8px;}
.thumb{height:96px;border-radius:8px;margin-bottom:8px;}
.pname{font-size:14px;font-weight:600;color:#121212;line-height:1.3;}
.pprice{font-size:16px;font-weight:600;color:#121212;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#121212;color:#fff;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kreafunk</div>
<div class="navlinks"><div>Speakers</div><div>Earbuds</div><div>Home</div><div>Sale</div></div>
<div class="utility">Search · Cart (0)</div>
</div>
<div class="hero">
<div class="herotext">
<div class="overline">The aWAY Series</div>
<h1>Sound, shaped like a ceramic object.</h1>
<p>Lifestyle speakers and earbuds that look at home on a shelf, not a soundboard.</p>
<div class="cta">Shop Speakers</div>
</div>
<div class="heroimg"></div>
</div>
<div class="section">
<div class="sectitle">New This Season</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#c88282,#e4c1c1)"></div><div class="pname">aGO 2 Speaker</div><div class="pprice">$149</div></div>
<div class="card"><span class="badge" style="background:#e4c1c1;color:#121212">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#121212,#777777)"></div><div class="pname">aBEAT Earbuds</div><div class="pprice">$99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a3f234,#8cd92a)"></div><div class="pname">aCHARGE Pad</div><div class="pprice">$59</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c88282,#121212)"></div><div class="pname">aJAZZ Lamp Speaker</div><div class="pprice">$179</div></div>
</div>
</div>
<div class="footer"><span>© Kreafunk — Danish Design Since 2011</span><span>Warranty · Returns · Contact</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8b8b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #20b8cd; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a0a; color: #20b8cd;
border: 1px solid #20b8cd; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0a0a; color: #f5f5f5;
border: 1px solid #303030; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b8b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e2629; color: #20b8cd;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A0A0A; color:#FAFAFA; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.sidebar { width:220px; height:640px; border-right:0.5px solid #2A2A2A; padding:16px; display:flex;
flex-direction:column; gap:10px; }
.brandrow { display:flex; align-items:center; gap:8px; padding:0 4px 12px; }
.mark { width:20px; height:20px; position:relative; }
.mark span { position:absolute; width:10px; height:10px; border-radius:50%; background:#20B8CD; opacity:0.85; }
.mark span:nth-child(1){ left:0; top:6px; }
.mark span:nth-child(2){ left:6px; top:0; }
.mark span:nth-child(3){ left:10px; top:8px; }
.wordmark { font-size:15px; font-weight:700; letter-spacing:-0.2px; }
.new-thread { background:#171717; border:1px solid #2A2A2A; border-radius:10px; padding:10px 12px;
font-size:13px; font-weight:600; color:#FAFAFA; margin-bottom:4px; }
.group-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:#6E6E6E; margin:8px 0 4px; }
.thread-row { padding:8px 4px; }
.thread-title { font-size:13px; color:#FAFAFA; }
.thread-time { font-size:10px; color:#6E6E6E; margin-top:2px; }
.main { flex:1; height:640px; display:flex; flex-direction:column; }
.topbar { height:52px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
padding:0 20px; }
.conv-title { font-size:14px; font-weight:500; color:#FAFAFA; }
.overflow { color:#6E6E6E; font-size:14px; }
.content { flex:1; overflow:hidden; padding:0 20px 12px; display:flex; flex-direction:column; }
.question { font-size:20px; font-weight:600; letter-spacing:-0.3px; margin-bottom:14px; }
.src-row { display:flex; gap:10px; overflow:hidden; margin-bottom:16px; }
.src-card { width:150px; height:70px; flex-shrink:0; background:#171717; border:1px solid #2A2A2A;
border-radius:12px; padding:10px; position:relative; }
.src-top { display:flex; align-items:center; gap:6px; }
.favicon { width:12px; height:12px; border-radius:3px; background:#20B8CD; opacity:0.7; }
.domain { font-size:10px; color:#A1A1A1; }
.src-title { font-size:11px; color:#FAFAFA; margin-top:6px; line-height:1.3; font-weight:500; }
.num-badge { position:absolute; top:8px; right:8px; background:#1F1F1F; color:#A1A1A1; font-size:9px;
font-weight:700; padding:1px 5px; border-radius:4px; font-family:monospace; }
.answer-label { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:#A1A1A1; margin-bottom:8px; }
.answer-mark { width:14px; height:14px; border-radius:50%; background:#20B8CD; }
.answer-body { font-size:15px; line-height:1.5; color:#FAFAFA; }
.cite { display:inline-block; background:#1F1F1F; border:1px solid #2A2A2A; color:#20B8CD; font-size:10px;
font-weight:500; padding:0 5px; border-radius:4px; font-family:monospace; margin:0 1px; }
.action-row { display:flex; gap:8px; margin-top:16px; }
.apill { background:#1F1F1F; border:1px solid #2A2A2A; color:#FAFAFA; font-size:12px; font-weight:500;
padding:7px 14px; border-radius:8px; }
.search-wrap { padding:0 20px 18px; flex-shrink:0; }
.search-input { background:#171717; border:1.5px solid #20B8CD; border-radius:24px; min-height:52px;
display:flex; align-items:center; padding:0 60px 0 18px; position:relative;
box-shadow:rgba(32,184,205,0.25) 0 0 0 4px; }
.search-ph { font-size:15px; color:#FAFAFA; }
.send-circle { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:34px; height:34px;
border-radius:50%; background:#20B8CD; display:flex; align-items:center; justify-content:center;
color:#0A0A0A; font-weight:700; font-size:14px; }
</style></head>
<body>
<div class="app">
<div class="sidebar">
<div class="brandrow"><div class="mark"><span></span><span></span><span></span></div><div class="wordmark">Perplexity (iOS)</div></div>
<div class="new-thread">+ New thread</div>
<div class="group-label">Today</div>
<div class="thread-row"><div class="thread-title">Why is the sky blue at noon?</div><div class="thread-time">2h ago</div></div>
<div class="thread-row"><div class="thread-title">Bayesian inference history</div><div class="thread-time">5h ago</div></div>
<div class="group-label">Yesterday</div>
<div class="thread-row"><div class="thread-title">Compare M3 vs M4 chips</div><div class="thread-time">1d ago</div></div>
</div>
<div class="main">
<div class="topbar"><span class="conv-title">Bayesian inference history</span><span class="overflow">⋯</span></div>
<div class="content">
<div class="question">What is the history of Bayesian inference?</div>
<div class="src-row">
<div class="src-card"><div class="src-top"><div class="favicon"></div><span class="domain">wikipedia.org</span></div>
<div class="src-title">Bayes' theorem — Wikipedia</div><span class="num-badge">1</span></div>
<div class="src-card"><div class="src-top"><div class="favicon"></div><span class="domain">stanford.edu</span></div>
<div class="src-title">History of probability & inference</div><span class="num-badge">2</span></div>
<div class="src-card"><div class="src-top"><div class="favicon"></div><span class="domain">arxiv.org</span></div>
<div class="src-title">Modern Bayesian methods review</div><span class="num-badge">3</span></div>
</div>
<div class="answer-label"><div class="answer-mark"></div>Answer</div>
<div class="answer-body">
Bayesian inference traces back to Thomas Bayes' posthumously published essay in 1763<span class="cite">1</span>,
which introduced a rule for updating probabilities given new evidence. Pierre-Simon Laplace
independently generalized the approach decades later<span class="cite">2</span>, and it remained
a minority statistical framework until computational advances in the late 20th century made
Markov chain Monte Carlo methods practical<span class="cite">3</span>.
</div>
<div class="action-row">
<div class="apill">Copy</div>
<div class="apill">Share</div>
<div class="apill">Save to Library</div>
</div>
</div>
<div class="search-wrap">
<div class="search-input"><span class="search-ph">Ask anything…</span><div class="send-circle">↑</div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.24px; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #6c6762; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.14px; background: #063b26; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.14px; background: #f6f6f6; color: #141414;
border: 1px solid #063b26; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #f6f6f6; color: #141414;
border: 1px solid #bebebe; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c6762; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.22px; background: #063b26; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f6f6; font-family:Inter,-apple-system,'Segoe UI',sans-serif; color:#4d4d4d; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#f6f6f6;}
.logo{font-size:16px;font-weight:600;letter-spacing:-.2px;color:#141414;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;color:#6c6762;}
.navlinks span:first-child{color:#141414;border-bottom:2px solid #141414;padding-bottom:20px;}
.icon{width:36px;height:36px;border-radius:9999px;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:12px;}
.hero{height:280px;background:#141414;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,#3a3a3a,#141414 70%);}
.herotext{position:relative;z-index:2;color:#fff;}
.herotext h1{font-size:24px;font-weight:600;letter-spacing:-.24px;margin:0 0 14px;}
.herocta{display:inline-block;background:#063b26;color:#fff;font-size:14px;font-weight:600;letter-spacing:.14px;border-radius:4px;padding:12px 24px;}
.cup{position:absolute;width:60px;height:70px;border-radius:0 0 20px 20px;background:linear-gradient(180deg,#d8dadc,#b6b8ba);bottom:70px;left:400px;}
.cup:before{content:'';position:absolute;width:14px;height:26px;border:4px solid #b6b8ba;border-left:none;border-radius:0 10px 10px 0;right:-16px;top:14px;}
.grid{display:flex;gap:16px;padding:20px 36px 0;}
.card{width:200px;background:#fff;border-radius:8px;border:1px solid #dedede;}
.thumb{height:110px;border-radius:8px 8px 0 0;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#063b26;color:#fff;font-size:10px;font-weight:600;text-transform:uppercase;border-radius:2px;padding:2px 6px;}
.body{padding:12px;}
.ptitle{font-size:14px;font-weight:600;color:#141414;margin-bottom:4px;}
.pprice{font-size:14px;color:#4d4d4d;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#141414;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.footer span{color:#9e9a96;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Snow Peak</div>
<div class="navlinks"><span>Camping</span><span>Apparel</span><span>Cookware</span><span>Explore</span></div>
<div class="icon">⚲</div>
</div>
<div class="hero">
<div class="cup"></div>
<div class="herotext">
<h1>Titanium built for a lifetime of camps.</h1>
<div class="herocta">Shop Gear</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b6b8ba,#141414)"><span class="badge">New</span></div><div class="body"><div class="ptitle">Titanium Single Cup</div><div class="pprice">$38</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#063b26,#141414)"></div><div class="body"><div class="ptitle">IGT Table Frame</div><div class="pprice">$110</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a11b1b,#141414)"></div><div class="body"><div class="ptitle">Amenity Dome Tent</div><div class="pprice">$895</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#444444,#141414)"></div><div class="body"><div class="ptitle">Fireplace Grill Bridge</div><div class="pprice">$62</div></div></div>
</div>
<div class="footer"><span>© Snow Peak — a way of life</span><span>Warranty · Store Locator</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #256ef4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #256ef4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #97b8f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #256ef4; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #256ef4; color: #f5f5f5;
border: 1px solid #4684f4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #97b8f5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2d6df4; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1e2124; box-sizing:border-box;
font-family:"Pretendard GOV","Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px; overflow:hidden; display:flex; flex-direction:column; }
header.gv-top { height:52px; flex:0 0 52px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #e6e8ea; }
.gv-brand { font-size:17px; font-weight:700; color:#1e2124; margin:0; }
.gv-a11y { display:flex; gap:8px; align-items:center; }
.gv-a11y span { font-size:13px; color:#464c53; }
.gv-zoom { display:flex; border:1px solid #b1b8be; border-radius:6px; overflow:hidden; }
.gv-zoom div { padding:4px 8px; font-size:12px; color:#464c53; border-right:1px solid #b1b8be; }
.gv-zoom div:last-child { border-right:none; }
.gv-zoom div.on { background:#256ef4; color:#ffffff; font-weight:700; }
.gv-crumb { padding:14px 28px 0; font-size:13px; color:#6d7882; }
.gv-crumb b { color:#0b50d0; font-weight:400; }
main.gv-body { flex:1; padding:14px 28px 0; overflow:hidden; display:flex; gap:24px; }
.gv-left { flex:1; display:flex; flex-direction:column; gap:14px; }
.gv-badges { display:flex; gap:8px; }
.badge { display:inline-flex; align-items:center; height:24px; padding:0 8px; border-radius:4px; font-size:15px; font-weight:400; }
.badge-primary { background:#256ef4; color:#ffffff; border:1px solid #256ef4; }
.badge-success { background:#228738; color:#ffffff; }
.gv-h1 { font-size:32px; font-weight:700; line-height:1.3; margin:2px 0 0; letter-spacing:0.5px; }
.gv-sub { font-size:17px; line-height:1.5; color:#464c53; max-width:520px; margin:0; }
.gv-infobox { background:#f4f5f6; border-radius:8px; padding:16px 18px; display:flex; gap:28px; }
.gv-infobox div { font-size:15px; color:#6d7882; }
.gv-infobox strong { display:block; font-size:17px; color:#1e2124; font-weight:700; margin-top:4px; }
.gv-form { display:flex; flex-direction:column; gap:12px; margin-top:2px; }
.gv-field label { display:block; font-size:15px; font-weight:700; color:#1e2124; margin-bottom:6px; }
.gv-field label .req { color:#de3412; margin-left:2px; }
.gv-input { width:100%; height:48px; border:1px solid #58616a; border-radius:8px; padding:0 14px;
font-size:17px; color:#464c53; display:flex; align-items:center; background:#ffffff; }
.gv-select { width:100%; height:48px; border:1px solid #58616a; border-radius:6px; padding:0 14px;
font-size:17px; color:#1e2124; display:flex; align-items:center; justify-content:space-between; background:#ffffff; }
.gv-select .chev { font-size:12px; color:#58616a; }
.gv-right { flex:0 0 250px; display:flex; flex-direction:column; gap:14px; }
.gv-card { border:1px solid #b1b8be; border-radius:8px; padding:16px; }
.gv-card h3 { font-size:19px; font-weight:700; margin:0 0 10px; }
.gv-card ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.gv-card li { font-size:15px; color:#464c53; display:flex; justify-content:space-between; }
.gv-card li b { color:#1e2124; font-weight:700; }
.gv-tags { display:flex; gap:8px; flex-wrap:wrap; }
.tag-chip { border:1px solid #cdd1d5; border-radius:1000px; padding:8px 10px; font-size:15px; color:#1e2124; }
.tag-chip.active { background:#ecf2fe; color:#0b50d0; border-color:#256ef4; }
footer.gv-foot { flex:0 0 54px; border-top:1px solid #e6e8ea; padding:0 28px; display:flex; align-items:center;
justify-content:space-between; }
.gv-btn-row { display:flex; gap:10px; }
.btn { height:48px; padding:0 16px; border-radius:6px; font-size:17px; font-weight:400; display:flex; align-items:center; }
.btn-primary { background:#256ef4; color:#ffffff; border:1px solid #256ef4; }
.btn-tertiary { background:transparent; color:#1e2124; border:1px solid #58616a; }
.gv-cert { font-size:13px; color:#6d7882; display:flex; align-items:center; gap:6px; }
.gv-cert .dot { width:8px; height:8px; border-radius:50%; background:#228738; display:inline-block; }
</style></head>
<body>
<div class="stage">
<header class="gv-top">
<p class="gv-brand">KRDS</p>
<div class="gv-a11y">
<span>Text size</span>
<div class="gv-zoom"><div>90%</div><div class="on">100%</div><div>130%</div></div>
</div>
</header>
<div class="gv-crumb">Home › Civil Affairs › <b>Certificate Issuance</b></div>
<main class="gv-body">
<div class="gv-left">
<div class="gv-badges">
<span class="badge badge-primary">Online Application</span>
<span class="badge badge-success">No Visit Required</span>
</div>
<h1 class="gv-h1">Resident Registration<br>Certificate Application</h1>
<p class="gv-sub">Apply online to issue a resident registration certificate. Processed automatically and available for immediate download once approved.</p>
<div class="gv-infobox">
<div>Processing Time<strong>Immediate</strong></div>
<div>Fee<strong>Free of charge</strong></div>
<div>Validity<strong>90 days</strong></div>
</div>
<div class="gv-form">
<div class="gv-field">
<label>Applicant Name<span class="req">*</span></label>
<div class="gv-input">Morgan Lee</div>
</div>
<div class="gv-field">
<label>Purpose of Issuance<span class="req">*</span></label>
<div class="gv-select"><span>Employment submission</span><span class="chev">▾</span></div>
</div>
<div class="gv-field">
<label>Delivery Method</label>
<div class="gv-tags">
<span class="tag-chip active">Download PDF</span>
<span class="tag-chip">Postal mail</span>
<span class="tag-chip">Visit pickup</span>
</div>
</div>
</div>
</div>
<div class="gv-right">
<div class="gv-card">
<h3>Required Documents</h3>
<ul>
<li>Identity verification <b>Auto-checked</b></li>
<li>Address history <b>Auto-checked</b></li>
<li>Photo ID upload <b>Not needed</b></li>
</ul>
</div>
<div class="gv-card">
<h3>Need Help?</h3>
<ul>
<li>Contact center <b>110</b></li>
<li>Live chat <b>09:00–18:00</b></li>
</ul>
</div>
</div>
</main>
<footer class="gv-foot">
<div class="gv-cert"><span class="dot"></span> Web Accessibility Certified · KWCAG 2.1 AA</div>
<div class="gv-btn-row">
<button class="btn btn-tertiary">Save Draft</button>
<button class="btn btn-primary">Submit Application</button>
</div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #a4a4a4; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #7fddff; color: #1c1c1c;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #1c1c1c;
border: 1px solid #7fddff; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1c1c1c;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a4a4a4; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c80003; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Arial,sans-serif; color:#1c1c1c; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #cfcfcf;}
.logo{font-size:19px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;}
.navlinks .active{border-bottom:2px solid #1c1c1c;padding-bottom:24px;}
.hero{padding:34px 30px;}
.h1{font-size:44px;font-weight:700;line-height:1.1;letter-spacing:-0.5px;margin:0 0 14px;text-transform:uppercase;}
.sub{font-size:16px;color:#474747;margin:0 0 20px;max-width:400px;}
.btn{display:inline-block;background:#7fddff;color:#1c1c1c;font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:14px 32px;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:200px;}
.thumb{aspect-ratio:1/1;height:150px;border-radius:8px;}
.pname{font-size:16px;font-weight:500;margin-top:8px;}
.price{font-size:14px;color:#474747;margin-top:4px;}
.badge{display:inline-block;margin-top:6px;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:4px 8px;}
.b-sale{background:#c80003;color:#fff;}
.b-new{background:#7fddff;color:#1c1c1c;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#232933;color:#fff;font-size:13px;display:flex;align-items:center;padding:0 30px;gap:24px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Stance</div>
<div class="navlinks"><span class="active">Socks</span><span>Underwear</span><span>Apparel</span><span>Collabs</span></div>
</div>
<div class="hero">
<div class="h1">Feel good.<br>Do good.</div>
<div class="sub">The sock as a canvas — performance and culture built with GT Pressura precision.</div>
<div class="btn">Shop Socks</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7fddff,#1c1c1c)"></div><div class="pname">Icon Crew Sock</div><div class="price">$18.00</div><span class="badge b-new">New</span></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#5a6616,#1c1c1c)"></div><div class="pname">Olive Field Sock</div><div class="price">$16.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#b6cf2d,#1c1c1c)"></div><div class="pname">Performance Crew</div><div class="price">$14.00</div><span class="badge b-sale">Sale</span></div>
</div>
<div class="footer"><span>Support</span><span>Company</span><span>Feel Good, Do Good</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8f8f8f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #121212; color: #f5f5f5;
border: 1px solid #363636; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f8f8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #383838; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; border-bottom:1px solid #d9d9d9; }
.brand { font-size:20px; font-weight:800; margin:0; letter-spacing:-.4px; }
.navlinks { display:flex; gap:0; }
.menurow { height:40px; display:flex; align-items:center; padding:0 14px; font-size:10px; color:#121212; }
.chips { display:flex; gap:8px; padding:16px 40px 10px; }
.chip { background:#f4f4f4; color:#454545; border:1px solid #f4f4f4; border-radius:25px; padding:0 16px;
height:40px; display:flex; align-items:center; font-size:15px; }
.chip.on { background:#121212; color:#fff; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; padding:8px 40px 16px; }
.movie { position:relative; }
.poster { height:150px; border-radius:16px; position:relative; overflow:hidden; }
.m1 { background:linear-gradient(160deg,#1a1a2e,#fc5555); }
.m2 { background:linear-gradient(160deg,#0e2f2f,#26a862); }
.m3 { background:linear-gradient(160deg,#2a1a3a,#9933ff); }
.m4 { background:linear-gradient(160deg,#241a12,#f26d00); }
.m5 { background:linear-gradient(160deg,#101820,#209cff); }
.badge { position:absolute; top:8px; left:8px; background:rgba(0,0,0,0.55); color:#fff; border-radius:4px;
padding:0 5px; height:20px; display:flex; align-items:center; font-size:11px; font-weight:700; }
.movie .t { font-size:14px; font-weight:700; margin-top:8px; letter-spacing:-.4px; }
.movie .m { font-size:14px; color:#454545; margin-top:2px; letter-spacing:-.2px; }
.action { border:1px solid #d9d9d9; border-radius:20px; padding:9px 24px; font-size:14px; font-weight:500;
background:#fff; color:#121212; display:inline-block; margin:0 40px 20px; }
</style></head>
<body>
<nav>
<p class="brand">CGV</p>
<div class="navlinks">
<span class="menurow">Movie Chart</span><span class="menurow">Theaters</span><span class="menurow">Events</span>
</div>
<div class="chip on" style="height:36px;">Book Now</div>
</nav>
<section class="chips">
<span class="chip on">All</span><span class="chip">Action</span><span class="chip">Drama</span>
<span class="chip">SF</span><span class="chip">Animation</span>
</section>
<section class="grid">
<div class="movie"><div class="poster m1"><span class="badge">4DX</span></div><div class="t">Red Signal</div><div class="m">Action · 15+</div></div>
<div class="movie"><div class="poster m2"><span class="badge">IMAX</span></div><div class="t">Forest Memory</div><div class="m">Drama · 12+</div></div>
<div class="movie"><div class="poster m3"><span class="badge">SCREENX</span></div><div class="t">Void Run</div><div class="m">SF · 15+</div></div>
<div class="movie"><div class="poster m4"><span class="badge">2D</span></div><div class="t">Orange Days</div><div class="m">Comedy · All Ages</div></div>
<div class="movie"><div class="poster m5"><span class="badge">3D</span></div><div class="t">Deep Dive</div><div class="m">Animation · All Ages</div></div>
</section>
<div class="action">View Full Showtimes</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5e6ad2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5e6ad2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b1b6e5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5e6ad2; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5e6ad2; color: #f5f5f5;
border: 1px solid #7680d8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b1b6e5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5d69d7; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#08090a; color:#f7f8f8; box-sizing:border-box;
font-family:"Inter var","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #1c1d1e; }
.brand { font-size:14px; font-weight:590; color:#f7f8f8; letter-spacing:-0.2px; margin-right:20px; }
.navleft { display:flex; align-items:center; }
.navtrig { color:#8a8f98; font-size:13px; padding:0 12px; height:32px; border-radius:9999px;
display:flex; align-items:center; }
.navright { display:flex; align-items:center; gap:10px; }
.btn-secondary { background:rgba(255,255,255,0.05); color:#f7f8f8; border-radius:9999px;
padding:0 20px; height:36px; font-size:13px; font-weight:510; display:flex; align-items:center; }
.btn-primary { background:#e5e5e6; color:#08090a; border:1px solid #e5e5e6; border-radius:9999px;
padding:0 20px; height:36px; font-size:13px; font-weight:590; display:flex; align-items:center; }
.layout { display:flex; height:calc(640px - 56px); }
.sidebar { width:200px; border-right:1px solid #1c1d1e; padding:20px 12px; }
.sidebar .id-tag { font-family:"Berkeley Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
font-size:11px; color:#62666d; padding:0 8px 14px; }
.menuitem { border-radius:8px; padding:8px 12px; font-size:13px; color:#8a8f98; margin-bottom:2px;
display:flex; align-items:center; gap:8px; }
.menuitem.active { background:rgba(255,255,255,0.06); color:#f7f8f8; }
.dotstat { width:7px; height:7px; border-radius:50%; background:#5e6ad2; }
.main { flex:1; padding:24px 32px; overflow:hidden; }
.headline { font-size:32px; font-weight:510; letter-spacing:-0.7px; line-height:1.1; margin:0 0 4px; }
.sub { font-size:13px; color:#8a8f98; margin:0 0 20px; }
.issuelist { border:1px solid #1c1d1e; border-radius:8px; overflow:hidden; }
.issuerow { display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid #1c1d1e; }
.issuerow:last-child { border-bottom:none; }
.issuerow .idc { font-family:"Berkeley Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
font-size:12px; color:#62666d; width:64px; flex:none; }
.statusdot { width:14px; height:14px; border-radius:50%; flex:none; border:2px solid #8a8f98; }
.statusdot.done { background:#5e6ad2; border-color:#5e6ad2; }
.statusdot.progress { border-color:#e5e5e6; background:conic-gradient(#e5e5e6 0 50%, transparent 50% 100%); }
.issuerow .title { flex:1; font-size:13px; color:#f7f8f8; }
.priority { font-size:11px; color:#8a8f98; width:60px; flex:none; }
.avatar-issue { width:20px; height:20px; border-radius:50%; background:#5e6ad2; flex:none;
display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:#f7f8f8; }
.quote { margin-top:20px; background:transparent; border:1px solid #1c1d1e; border-radius:8px;
padding:24px 32px; }
.quote p { font-size:15px; line-height:1.6; letter-spacing:-0.16px; color:#d0d6e0; margin:0 0 10px; }
.quote .who { font-size:12px; color:#62666d; }
</style></head>
<body>
<nav>
<div class="navleft">
<span class="brand">Linear</span>
<span class="navtrig">Product</span>
<span class="navtrig">Method</span>
<span class="navtrig">Customers</span>
<span class="navtrig">Pricing</span>
</div>
<div class="navright">
<div class="btn-secondary">Contact sales</div>
<div class="btn-primary">Get started</div>
</div>
</nav>
<div class="layout">
<aside class="sidebar">
<div class="id-tag">ENG · Q3 CYCLE</div>
<div class="menuitem active"><span class="dotstat"></span>Active Issues</div>
<div class="menuitem">Projects</div>
<div class="menuitem">Cycles</div>
<div class="menuitem">Views</div>
<div class="menuitem">Triage</div>
<div class="menuitem">Backlog</div>
</aside>
<div class="main">
<h1 class="headline">Plan the work that matters</h1>
<p class="sub">Active Issues · 6 open · sorted by priority</p>
<div class="issuelist">
<div class="issuerow">
<span class="idc">ENG-142</span>
<span class="statusdot progress"></span>
<span class="title">Fix sync delay on offline reconnect</span>
<span class="priority">Urgent</span>
<span class="avatar-issue">AJ</span>
</div>
<div class="issuerow">
<span class="idc">ENG-138</span>
<span class="statusdot"></span>
<span class="title">Add keyboard shortcuts to command menu</span>
<span class="priority">High</span>
<span class="avatar-issue">PR</span>
</div>
<div class="issuerow">
<span class="idc">ENG-130</span>
<span class="statusdot done"></span>
<span class="title">Migrate webhook queue to new worker</span>
<span class="priority">Medium</span>
<span class="avatar-issue">JD</span>
</div>
<div class="issuerow">
<span class="idc">ENG-126</span>
<span class="statusdot progress"></span>
<span class="title">Investigate flaky export test</span>
<span class="priority">Low</span>
<span class="avatar-issue">CM</span>
</div>
</div>
<div class="quote">
<p>"Our team finally moved from a pile of tickets to a system we can actually plan around."</p>
<span class="who">Jordan Ahn · Head of Engineering</span>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #010102; color: #f7f8f8;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #010102; color: #f7f8f8;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -0.4px; margin: 0; color: #f7f8f8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.4px; margin: 0; color: #d0d6e0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; background: #5e6ad2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 14px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; background: #0f1011; color: #f7f8f8;
border: 1px solid #5e6ad2; border-radius: 8px;
padding: 8px 14px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.05px; background: #0f1011; color: #f7f8f8;
border: 1px solid #3e3f40; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #d0d6e0; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; background: #141516; color: #d0d6e0;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#010102; color:#f7f8f8; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:15px; font-weight:600; display:flex; align-items:center; gap:6px; }
.brand .dot { width:10px; height:10px; border-radius:3px; background:#5e6ad2; display:inline-block; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#8a8f98; }
.btn-lav { background:#5e6ad2; color:#fff; border:none; border-radius:8px; padding:7px 14px; font-size:13px; font-weight:500; }
.btn-sec { background:#0f1011; color:#f7f8f8; border:1px solid #23252a; border-radius:8px; padding:7px 14px; font-size:13px; font-weight:500; }
.hero { text-align:center; padding:14px 40px 10px; }
.hero h1 { font-size:44px; font-weight:600; letter-spacing:-1.6px; line-height:1.08; margin:0 0 8px; }
.hero p { font-size:13px; color:#8a8f98; margin:0 0 12px; }
.screenshot { margin:0 60px; background:#0f1011; border:1px solid #23252a; border-radius:16px; padding:16px;
height:230px; display:flex; flex-direction:column; gap:8px; }
.toolbar { display:flex; gap:6px; }
.toolbar span { width:6px; height:6px; border-radius:50%; background:#34343a; display:inline-block; }
.issuerow { display:flex; align-items:center; gap:10px; background:#141516; border-radius:6px; padding:8px 10px; }
.issuerow .status { width:8px; height:8px; border-radius:50%; }
.status.done { background:#5e6ad2; } .status.progress { background:#828fff; } .status.todo { background:#3e3e44; }
.issuerow .title { flex:1; font-size:11px; }
.issuerow .id { font-size:10px; color:#62666d; font-family:monospace; }
.issuerow .pill { background:#18191a; color:#8a8f98; font-size:9px; border-radius:9999px; padding:2px 8px; }
.pricingrow { display:flex; gap:12px; padding:16px 40px; }
.pcard { flex:1; background:#0f1011; border:1px solid #23252a; border-radius:12px; padding:16px; }
.pcard.feat { background:#141516; }
.pcard h4 { font-size:13px; font-weight:600; margin:0 0 4px; }
.pcard .price { font-size:20px; font-weight:600; letter-spacing:-0.6px; margin-bottom:6px; }
.pcard p { font-size:11px; color:#8a8f98; margin:0; }
footer { margin-top:auto; padding:12px 40px; display:flex; justify-content:space-between; font-size:11px; color:#8a8f98; }
</style></head>
<body>
<nav>
<span class="brand"><span class="dot"></span>Linear</span>
<div class="navlinks"><span>Product</span><span>Method</span><span>Customers</span><span>Pricing</span></div>
<div style="display:flex;gap:8px"><button class="btn-sec">Log in</button><button class="btn-lav">Get started</button></div>
</nav>
<section class="hero">
<h1>Linear is a purpose-built tool<br>for planning and building products</h1>
<p>Meet the system for modern software development.</p>
</section>
<div class="screenshot">
<div class="toolbar"><span></span><span></span><span></span></div>
<div class="issuerow"><div class="status done"></div><span class="title">Migrate billing to new provider</span><span class="id">ENG-142</span><span class="pill">Done</span></div>
<div class="issuerow"><div class="status progress"></div><span class="title">Add dark mode to settings panel</span><span class="id">ENG-158</span><span class="pill">In Progress</span></div>
<div class="issuerow"><div class="status todo"></div><span class="title">Investigate webhook latency spikes</span><span class="id">ENG-163</span><span class="pill">Todo</span></div>
<div class="issuerow"><div class="status todo"></div><span class="title">Write onboarding email sequence</span><span class="id">ENG-171</span><span class="pill">Todo</span></div>
</div>
<div class="pricingrow">
<div class="pcard"><h4>Free</h4><div class="price">$0</div><p>For individuals and small teams.</p></div>
<div class="pcard feat"><h4>Business</h4><div class="price">$14/mo</div><p>For growing teams that need more.</p></div>
<div class="pcard"><h4>Enterprise</h4><div class="price">Custom</div><p>For organizations that need control.</p></div>
</div>
<footer>
<span>© Linear</span>
<span>Linear · Method · Changelog · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00ccbc; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00ccbc; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #09655e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00ccbc; color: #121212;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00ccbc; color: #111111;
border: 1px solid #03aea1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #09655e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #03aea1; color: #121212;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:system-ui,-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #e0e0e0; }
.brand { font-size:20px; font-weight:700; font-style:italic; letter-spacing:-0.5px; color:#003733; }
.btn-teal { background:#00CCBC; color:#003733; border-radius:9999px; padding:10px 20px; font-size:14px; font-weight:600; }
.hero { padding:24px 40px; display:flex; gap:14px; align-items:center; }
.search { flex:1; background:#f5f5f5; border:1.5px solid #e0e0e0; border-radius:9999px; padding:12px 18px;
font-size:14px; color:#767676; }
.search-btn { background:#00CCBC; color:#003733; border-radius:9999px; padding:12px 22px; font-size:14px; font-weight:600; }
h1.title { font-family:Georgia,serif; font-style:italic; font-size:34px; font-weight:700; margin:8px 40px 4px;
letter-spacing:-0.5px; }
.sub { margin:0 40px 20px; color:#4a4a4a; font-size:15px; }
.cats { display:flex; gap:10px; padding:0 40px 20px; }
.cat { background:#f5f5f5; border-radius:9999px; padding:8px 16px; font-size:13px; color:#1a1a1a; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 40px; }
.card { background:#fff; border-radius:8px; box-shadow:0px 2px 8px rgba(0,0,0,0.10); overflow:hidden; }
.card .img { height:80px; background:linear-gradient(135deg,#FFC100,#00CCBC); }
.card .info { padding:12px 14px; }
.card h4 { font-size:15px; margin:0 0 4px; }
.card .row { display:flex; gap:8px; }
.badge-teal { background:#00CCBC; color:#003733; font-size:11px; font-weight:600; border-radius:9999px; padding:3px 9px; }
.badge-gray { background:#f5f5f5; color:#1a1a1a; font-size:11px; border-radius:9999px; padding:3px 9px; }
.promo { margin:18px 40px 0; background:#FFC100; color:#1a1a1a; border-radius:8px; padding:16px 20px;
display:flex; align-items:center; justify-content:space-between; }
.promo b { font-size:16px; }
.promo button { background:#1a1a1a; color:#fff; border-radius:9999px; padding:10px 18px; font-size:13px; font-weight:600; }
</style></head>
<body>
<nav>
<span class="brand">Deliveroo</span>
<button class="btn-teal">Sign up</button>
</nav>
<section class="hero">
<div class="search">Enter your delivery address</div>
<div class="search-btn">Find food</div>
</section>
<h1 class="title">Restaurants you love, delivered.</h1>
<p class="sub">Find your favourite cuisine, near you, right now.</p>
<div class="cats">
<div class="cat">Pizza</div><div class="cat">Sushi</div><div class="cat">Burgers</div><div class="cat">Asian</div><div class="cat">Healthy</div>
</div>
<div class="grid">
<div class="card"><div class="img"></div><div class="info"><h4>Mama's Kitchen</h4><div class="row"><span class="badge-teal">25–35 min</span><span class="badge-gray">Asian</span></div></div></div>
<div class="card"><div class="img"></div><div class="info"><h4>Burger Junction</h4><div class="row"><span class="badge-teal">15–25 min</span><span class="badge-gray">Fast food</span></div></div></div>
<div class="card"><div class="img"></div><div class="info"><h4>Green Bowl Co.</h4><div class="row"><span class="badge-teal">20–30 min</span><span class="badge-gray">Healthy</span></div></div></div>
</div>
<div class="promo"><b>20% off your next order</b><button>Claim deal</button></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0f0d13; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0f0d13; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e8d8f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #a238ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0f0d13; color: #a238ff;
border: 1px solid #a238ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0f0d13; color: #f5f5f5;
border: 1px solid #343237; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e8d8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #271439; color: #a238ff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#0F0D13; color:#FFFFFF; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; display:flex; flex-direction:column; align-items:center; padding:20px 0 0; position:relative; background:radial-gradient(circle at 50% -10%, #1a1522 0%, #0F0D13 55%); }
.topbar { width:380px; display:flex; align-items:center; justify-content:space-between; padding:0 4px 18px; }
.chev { font-size:20px; color:#fff; }
.ctx { text-align:center; }
.ctx .over { font-size:11px; font-weight:700; letter-spacing:0.4pt; color:#A29CB0; text-transform:uppercase; }
.ctx .title { font-size:13px; font-weight:700; color:#fff; margin-top:2px; }
.more { color:#fff; font-size:18px; letter-spacing:2px; }
.art { width:380px; height:380px; border-radius:16px; position:relative; overflow:hidden;
background: radial-gradient(circle at 85% 8%, rgba(255,255,255,0.28), transparent 40%),
radial-gradient(circle at 8% 92%, rgba(124,40,196,0.65), transparent 55%),
linear-gradient(135deg, #A238FF 0%, #C71F8E 45%, #FF0092 100%);
box-shadow: 0 24px 48px -20px rgba(162,56,255,0.55);
}
.badge { position:absolute; top:16px; left:16px; background:rgba(15,13,19,0.55); backdrop-filter:blur(8px); border-radius:999px; padding:7px 13px 7px 11px; display:flex; align-items:center; gap:5px; }
.badge .bolt { color:#fff; font-size:13px; }
.badge .txt { font-size:12px; font-weight:800; letter-spacing:0.4pt; color:#fff; }
.eq { position:absolute; bottom:22px; left:18px; right:18px; display:flex; align-items:flex-end; gap:4px; height:56px; }
.eq span { flex:1; background:rgba(255,255,255,0.62); border-radius:3px 3px 0 0; }
.meta { width:380px; margin-top:22px; }
.track-title { font-size:26px; font-weight:800; letter-spacing:-0.4pt; display:flex; align-items:center; justify-content:space-between; }
.heart { color:#FF0092; font-size:20px; }
.artist { font-size:15px; font-weight:500; color:#A29CB0; margin-top:4px; }
.scrub { width:380px; margin-top:22px; }
.track { height:4px; background:#221E2B; border-radius:2px; position:relative; }
.fill { position:absolute; left:0; top:0; height:4px; width:38%; background:linear-gradient(90deg,#A238FF,#FF0092); border-radius:2px; }
.knob { position:absolute; left:38%; top:50%; width:13px; height:13px; background:#fff; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 2px 6px rgba(0,0,0,0.5); }
.times { display:flex; justify-content:space-between; margin-top:8px; font-size:11px; font-weight:500; color:#A29CB0; font-variant-numeric:tabular-nums; }
.transport { width:380px; margin-top:26px; display:flex; align-items:center; justify-content:space-between; }
.tbtn { color:#A29CB0; font-size:22px; }
.play { width:68px; height:68px; border-radius:50%; background:linear-gradient(135deg,#A238FF,#FF0092); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px -8px rgba(255,0,146,0.6); }
.play span { color:#fff; font-size:24px; margin-left:3px; }
</style>
</head>
<body>
<div class="stage">
<div class="topbar">
<div class="chev">⌄</div>
<div class="ctx"><div class="over">FLOW · YOUR MIX</div><div class="title">Made for you</div></div>
<div class="more">⋯</div>
</div>
<div class="art">
<div class="badge"><span class="bolt">⚡</span><span class="txt">FLOW</span></div>
<div class="eq">
<span style="height:38%"></span><span style="height:70%"></span><span style="height:52%"></span>
<span style="height:88%"></span><span style="height:34%"></span><span style="height:64%"></span>
<span style="height:92%"></span><span style="height:48%"></span><span style="height:60%"></span>
<span style="height:40%"></span><span style="height:76%"></span><span style="height:56%"></span>
</div>
</div>
<div class="meta">
<div class="track-title">Deezer (iOS) Flow<span class="heart">♥</span></div>
<div class="artist">Various Artists · Personalized Mix</div>
</div>
<div class="scrub">
<div class="track"><div class="fill"></div><div class="knob"></div></div>
<div class="times"><span>1:24</span><span>-2:56</span></div>
</div>
<div class="transport">
<span class="tbtn">🔀</span>
<span class="tbtn">⏮</span>
<div class="play"><span>▶</span></div>
<span class="tbtn">⏭</span>
<span class="tbtn">🔁</span>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0088cc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0088cc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87c4e3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #40a7e3; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0088cc; color: #000000;
border: 1px solid #40a7e3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0088cc; color: #f5f5f5;
border: 1px solid #2799d3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87c4e3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0a8dd0; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.sidebar { width:300px; height:640px; background:#FFFFFF; border-right:1px solid #C7C7CC; display:flex; flex-direction:column; }
.sb-head { padding:20px 16px 8px; }
.sb-head h1 { margin:0; font-size:28px; font-weight:700; letter-spacing:0.3px; }
.search { margin:10px 16px 6px; height:34px; border-radius:10px; background:#F2F2F7; display:flex; align-items:center; padding:0 12px; color:#A0A6AD; font-size:14px; }
.rows { flex:1; overflow:hidden; }
.row { display:flex; align-items:center; gap:10px; padding:8px 14px; height:64px; }
.row.pinned { background:#F7F7F7; }
.av { width:46px; height:46px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:16px; }
.row .info { flex:1; min-width:0; border-bottom:1px solid #EFEFEF; padding-bottom:8px; height:56px; display:flex; flex-direction:column; justify-content:center; }
.row .top { display:flex; justify-content:space-between; }
.row .name { font-weight:600; font-size:15px; }
.row .time { font-size:12px; color:#A0A6AD; }
.row .prev { display:flex; justify-content:space-between; align-items:center; }
.row .msg { font-size:13px; color:#707579; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
.unread { background:#0088CC; color:#fff; font-size:11px; font-weight:700; border-radius:9px; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding:0 5px; }
.chatpane { flex:1; height:640px; background:#DBE7F4; display:flex; flex-direction:column; }
.chat-head { height:56px; background:rgba(255,255,255,0.92); border-bottom:1px solid #E5E5E5; display:flex; align-items:center; padding:0 18px; gap:12px; }
.chat-head .cav { width:34px; height:34px; border-radius:50%; background:#0088CC; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.chat-head .who { font-size:16px; font-weight:600; }
.chat-head .status { font-size:12px; color:#4DD364; }
.chat-head .icons { margin-left:auto; display:flex; gap:20px; color:#0088CC; font-size:17px; }
.msgs { flex:1; padding:20px 60px; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.bub { max-width:62%; padding:9px 13px; font-size:15px; line-height:1.3; position:relative; }
.in { align-self:flex-start; background:#FFFFFF; border:1px solid #E5E5E5; border-radius:17px 17px 17px 6px; color:#000; }
.out { align-self:flex-end; background:#2B86FD; border-radius:17px 17px 6px 17px; color:#fff; }
.meta { font-size:10.5px; opacity:0.75; margin-top:4px; text-align:right; }
.compose { height:52px; background:#FFFFFF; border-top:1px solid #E5E5E5; display:flex; align-items:center; padding:0 16px; gap:14px; }
.compose .field { flex:1; height:34px; display:flex; align-items:center; color:#A0A6AD; font-size:15px; }
.compose .send { color:#0088CC; font-size:22px; }
</style></head>
<body>
<div class="app">
<div class="sidebar">
<div class="sb-head"><h1>Chats</h1></div>
<div class="search">Search</div>
<div class="rows">
<div class="row pinned"><div class="av" style="background:#FC5C51">EL</div>
<div class="info"><div class="top"><span class="name">Elena · Telegram (iOS)</span><span class="time">10:24</span></div>
<div class="prev"><span class="msg">Sent you the deck, check it 📎</span><span class="unread">2</span></div></div></div>
<div class="row"><div class="av" style="background:#0FB297">Team</div>
<div class="info"><div class="top"><span class="name">Design Team</span><span class="time">09:58</span></div>
<div class="prev"><span class="msg">Marco: sounds good 👍</span><span></span></div></div></div>
<div class="row"><div class="av" style="background:#895DD5">DK</div>
<div class="info"><div class="top"><span class="name">Dana K.</span><span class="time">Yesterday</span></div>
<div class="prev"><span class="msg">Secret Chat 🔒</span><span></span></div></div></div>
<div class="row"><div class="av" style="background:#3CA5EC">City</div>
<div class="info"><div class="top"><span class="name">City Runners</span><span class="time">Mon</span></div>
<div class="prev"><span class="msg">128 members</span><span class="unread">14</span></div></div></div>
</div>
</div>
<div class="chatpane">
<div class="chat-head">
<div class="cav">EL</div>
<div><div class="who">Elena · Telegram (iOS)</div><div class="status">online</div></div>
<div class="icons"><span>📞</span><span>⋮</span></div>
</div>
<div class="msgs">
<div class="bub in">Where should we send the launch invites?<div class="meta" style="color:#707579">10:19</div></div>
<div class="bub out">Sending the segmented list now — silent send so nobody wakes up 😄<div class="meta">10:24 ✓✓</div></div>
<div class="bub in">Perfect, scheduling for 9am then.<div class="meta" style="color:#707579">10:24</div></div>
</div>
<div class="compose">
<span>📎</span>
<div class="field">Message</div>
<span>😊</span>
<span class="send">➤</span>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #1d2529;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #1d2529;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #1d2529; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6f7476; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #4acbd6; color: #000000;
border: none; border-radius: 4px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #fefefe; color: #000000;
border: 1px solid #4acbd6; border-radius: 4px;
padding: 9px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fefefe; color: #36444b;
border: 1px solid #c6c8c9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6f7476; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #4acbd6; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fefefe; font-family:'AktivGrotesk-Corp','Helvetica Neue',sans-serif; color:#1d2529; }
*{box-sizing:border-box;}
.nav{height:64px;border-bottom:1px solid #e1e1e1;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:20px;font-weight:700;color:#1d2529;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#36444b;}
.navlinks .active{color:#4acbd6;border-bottom:2px solid #4acbd6;padding-bottom:4px;}
.hero{height:210px;background:#212121;display:flex;align-items:center;padding:0 30px;}
.hero h1{color:#fefefe;font-size:28px;font-weight:600;line-height:1.25;letter-spacing:-.3px;margin:0 0 12px;max-width:400px;}
.cta{display:inline-block;background:#4acbd6;color:#fff;font-size:14px;font-weight:600;padding:14px 32px;border-radius:4px;}
.mesh{flex:1;height:140px;position:relative;}
.node{position:absolute;width:60px;height:60px;border-radius:4px;background:linear-gradient(135deg,#4acbd6,#1d2529);}
.spec{display:flex;gap:1px;background:#e1e1e1;margin:14px 30px 0;}
.cell{flex:1;background:#f8f9fb;padding:8px 10px;}
.cell b{font-size:12px;color:#1d2529;text-transform:uppercase;display:block;letter-spacing:.3px;}
.cell span{font-size:13px;color:#36444b;}
.rowlabel{padding:14px 30px 8px;font-size:18px;font-weight:600;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:196px;border:1px solid #e1e1e1;padding:0;}
.thumb{aspect-ratio:1/1;background:#f8f9fb;display:flex;align-items:center;justify-content:center;}
.shape{width:56%;height:56%;border-radius:4px;}
.body{padding:8px 14px 12px;}
.badge{display:inline-block;background:#4acbd6;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:2px 8px;margin:8px 0 0 14px;}
.ptitle{font-size:16px;font-weight:600;margin-top:4px;}
.pprice{font-size:16px;color:#36444b;margin-top:2px;}
</style>
<div class="nav">
<div class="logo">TP Link</div>
<div class="navlinks"><div class="active">Wi-Fi 6</div><div>Mesh</div><div>Smart Home</div><div>Business</div></div>
</div>
<div class="hero">
<h1>Connected reliability, engineered for control.</h1>
<div class="cta">Shop Deco Mesh</div>
</div>
<div class="mesh"></div>
<div class="spec">
<div class="cell"><b>Wi-Fi</b><span>AX3000</span></div>
<div class="cell"><b>Coverage</b><span>5,500 sq ft</span></div>
<div class="cell"><b>Ports</b><span>1x Gigabit LAN</span></div>
<div class="cell"><b>Devices</b><span>Up to 100</span></div>
</div>
<div class="rowlabel">Featured Routers</div>
<div class="grid">
<span class="badge">New</span>
<div class="grid" style="padding:0">
<div class="card"><div class="thumb"><div class="shape" style="background:linear-gradient(135deg,#4acbd6,#36444b)"></div></div><div class="body"><div class="ptitle">Archer AX55 Router</div><div class="pprice">$89.99</div></div></div>
<div class="card"><div class="thumb"><div class="shape" style="background:linear-gradient(135deg,#36444b,#4acbd6)"></div></div><div class="body"><div class="ptitle">Deco X20 Mesh (3-Pack)</div><div class="pprice">$179.99</div></div></div>
<div class="card"><div class="thumb"><div class="shape" style="background:linear-gradient(135deg,#1d2529,#4acbd6)"></div></div><div class="body"><div class="ptitle">Tapo Smart Plug</div><div class="pprice">$14.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1e1f26;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1e1f26;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1e1f26; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555d66; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #1890d7; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #272c51;
border: 1px solid #272c51; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1e1f26;
border: 1px solid #c7c7c9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555d66; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.2px; background: #382110; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family: 'Poppins', 'Century Gothic', sans-serif; background:#fff; color:#444; }
*{box-sizing:border-box;}
.narrow{font-stretch:condensed;letter-spacing:-0.3px;}
.nav{height:60px;background:#272c51;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{color:#fff;font-size:20px;font-weight:700;letter-spacing:-0.5px;}
.navlinks{display:flex;gap:20px;color:#fff;font-size:14px;font-weight:500;}
.navcta{background:#1890d7;color:#fff;font-size:13px;font-weight:600;padding:9px 18px;border-radius:9999px;}
.hero{height:250px;background:#f0f0f0;display:flex;align-items:center;padding:0 30px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:40px;top:30px;width:220px;height:170px;background:linear-gradient(135deg,#382110,#5c3a24);border-radius:8px;}
.hero:after{content:'';position:absolute;right:100px;top:60px;width:150px;height:60px;background:#1890d7;opacity:.5;border-radius:8px;}
.herotext{position:relative;z-index:1;max-width:380px;}
.herotext .tag{color:#382110;font-size:11px;text-transform:uppercase;letter-spacing:1.2px;font-weight:700;margin-bottom:10px;}
.herotext h1{font-size:32px;font-weight:700;color:#272c51;margin:0 0 12px;letter-spacing:-.5px;}
.herotext p{font-size:14px;color:#555d66;margin:0 0 18px;}
.herocta{display:inline-block;background:#1890d7;color:#fff;font-size:14px;font-weight:600;padding:12px 26px;border-radius:9999px;}
.grid{display:flex;gap:14px;padding:18px 30px 0;}
.card{width:150px;background:#fff;border-radius:8px;padding:8px;box-shadow:0 1px 3px rgba(0,0,0,.05);}
.thumb{height:100px;border-radius:8px;margin-bottom:6px;}
.matbadge{display:inline-block;background:#382110;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:9999px;margin-bottom:5px;}
.ptitle{font-size:13px;font-weight:600;color:#1e1f26;line-height:1.3;height:32px;overflow:hidden;}
.pprice{font-size:14px;font-weight:600;color:#272c51;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#272c51;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;color:#9a9db3;}
.footer span{margin-left:14px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Jensen Outdoor</div>
<div class="navlinks"><div>Seating</div><div>Dining</div><div>Loungers</div><div>Configurator</div></div>
<div class="navcta">Book a Consultation</div>
</div>
<div class="hero">
<div class="herotext">
<div class="tag">Handcrafted Teak</div>
<h1>Furniture Built For The Poolside</h1>
<p>Solid teak outdoor furniture, engineered for decades of weather and light.</p>
<div class="herocta">Explore Collections</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#382110,#5c3a24)"></div><div class="matbadge">Teak</div><div class="ptitle">Kubu Woven Lounge Chair</div><div class="pprice">$1,890</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1890d7,#272c51)"></div><div class="matbadge">Modular</div><div class="ptitle">Horizon Sectional Sofa</div><div class="pprice">$4,250</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#5c3a24,#272c51)"></div><div class="matbadge">Teak</div><div class="ptitle">Amalfi Dining Table — 8 Seat</div><div class="pprice">$3,120</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#faf8f5,#382110)"></div><div class="matbadge">Rope</div><div class="ptitle">Marina Hanging Daybed</div><div class="pprice">$2,640</div></div>
</div>
<div class="footer"><span>© Handcrafted Since 1974</span><span>Care Guide<span> Trade Program</span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #112337;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #112337;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.27; margin: 0; color: #112337; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #585e6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #003388; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #003388;
border: 1px solid #003388; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #112337;
border: 1px solid #bcc0c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #585e6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.23; letter-spacing: 0.4px; background: #dc3232; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; font-family:Roboto,-apple-system,system-ui,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:72px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #eeeeee;}
.logo{font-family:'IBM Plex Serif',Georgia,serif;font-size:20px;font-weight:700;color:#112337;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;color:#112337;}
.hero{background:#112337;color:#fff;padding:32px;min-height:230px;display:flex;align-items:center;}
.herotext{width:55%;}
.h1{font-family:'IBM Plex Serif',Georgia,serif;font-size:40px;font-weight:700;line-height:1.1;letter-spacing:-0.5px;margin:0 0 14px;}
.sub{font-size:16px;line-height:1.5;margin:0 0 18px;max-width:360px;}
.btn{display:inline-block;background:#f04923;color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;padding:14px 26px;border-radius:4px;}
.spectable{display:flex;gap:1px;background:#eeeeee;margin:0 32px;}
.speccell{flex:1;background:#fff;text-align:left;padding:14px 18px;}
.speclabel{font-size:12px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#585e6a;}
.specvalue{font-family:'IBM Plex Serif',Georgia,serif;font-size:20px;font-weight:700;color:#112337;margin-top:4px;}
.grid{display:flex;gap:16px;padding:20px 32px 0;}
.card{width:210px;background:#fff;border:1px solid #eeeeee;padding:16px;}
.thumb{height:100px;background:#f5f5f5;margin-bottom:10px;}
.title{font-family:'IBM Plex Serif',Georgia,serif;font-size:18px;font-weight:600;}
.spec{font-size:13px;color:#313131;margin-top:6px;}
.warranty{display:inline-block;background:#dc3232;color:#fff;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;padding:5px 10px;border-radius:4px;margin-top:8px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Speed Queen</div>
<div class="navlinks"><span>Washers</span><span>Dryers</span><span>Commercial</span><span>Find a Dealer</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="h1">Built to outlast<br>the warranty.</div>
<div class="sub">Rigid geometry, engineered lineage — a 25-year lifespan test result, not a lifestyle photograph.</div>
<div class="btn">Find a Dealer</div>
</div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Cycle Rating</div><div class="specvalue">25 yrs</div></div>
<div class="speccell"><div class="speclabel">Spin Speed</div><div class="specvalue">1140 RPM</div></div>
<div class="speccell"><div class="speclabel">Water Use</div><div class="specvalue">-40%</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003388,#112337)"></div><div class="title">TC5 Top Load Washer</div><div class="spec">1140 RPM · 25-yr rated</div><div class="warranty">Warranty</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#112337,#003388)"></div><div class="title">DC5 Dryer</div><div class="spec">Commercial-grade drum</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f0ec; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f0ec; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6c757d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: #003767; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: #f5f0ec; color: #1a1a1a;
border: 1px solid #003767; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f5f0ec; color: #1a1a1a;
border: 1px solid #bebab8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c757d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c70000; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f0ec; font-family:Georgia,'Times New Roman',serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:80px;background:#003767;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:Arial,sans-serif;font-size:20px;font-weight:700;color:#fff;letter-spacing:1px;text-transform:uppercase;}
.navlinks{display:flex;gap:22px;font-family:Arial,sans-serif;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#fff;}
.hero{height:250px;background:#003767;display:flex;align-items:center;padding:0 32px 20px;}
.herotext{width:420px;}
.herotext h1{font-family:Arial,sans-serif;font-size:34px;font-weight:700;color:#fff;margin:0 0 12px;line-height:1.15;}
.herotext p{font-size:15px;color:#dbe4eb;margin:0 0 18px;max-width:340px;line-height:1.5;}
.cta{display:inline-block;background:#ffb217;color:#1a1a1a;font-family:Arial,sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:13px 26px;border-radius:8px;}
.knife{position:absolute;right:80px;top:130px;width:220px;height:24px;background:linear-gradient(90deg,#dbe4eb 0%,#f7f7f7 55%,#703412 60%,#5a2a0f 100%);border-radius:12px 4px 4px 12px;transform:rotate(-8deg);box-shadow:0 4px 10px rgba(0,0,0,0.3);}
.tabs{display:flex;gap:10px;padding:16px 32px 0;}
.tab{background:#003767;color:#fff;font-family:Arial,sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;padding:8px 18px;border-radius:9999px;}
.tab.off{background:#f7f7f7;color:#303030;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:150px;background:#fff;border-radius:12px;padding:8px;position:relative;}
.thumb{height:96px;border-radius:8px;margin-bottom:6px;}
.badgesale{position:absolute;top:14px;left:14px;background:#c70000;color:#fff;font-family:Arial,sans-serif;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 7px;border-radius:8px;}
.pname{font-family:Arial,sans-serif;font-size:13px;font-weight:600;}
.pprice{font-family:Georgia,serif;font-size:14px;color:#303030;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:48px;background:#003767;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-family:Arial,sans-serif;font-size:11px;}
.footer span{margin-left:16px;color:#ffb217;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Opinel</div>
<div class="navlinks"><div>Pocket Knives</div><div>Kitchen</div><div>Garden</div><div>Heritage</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Steel and Wood,<br>Since 1890</h1>
<p>French-forged blades and beechwood handles, made to be carried for a lifetime.</p>
<div class="cta">Shop Knives</div>
</div>
<div class="knife"></div>
</div>
<div class="tabs">
<div class="tab">Pocket Knives</div>
<div class="tab off">Chef's Knives</div>
<div class="tab off">Garden Tools</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#703412,#dbe4eb)"></div><div class="badgesale">Sale</div><div class="pname">No.08 Carbone</div><div class="pprice">€24</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#dbe4eb,#003767)"></div><div class="pname">Chef's Knife 8"</div><div class="pprice">€45</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#909762,#703412)"></div><div class="pname">Garden Trowel</div><div class="pprice">€22</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffb217,#703412)"></div><div class="pname">No.06 Beechwood</div><div class="pprice">€18</div></div>
</div>
<div class="footer"><span>© Depuis 1890</span><span>Care Guide<span> Warranty<span> Our Story</span></span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #292933;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #292933;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #292933; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #f9fafb; color: #292933;
border: 1px solid #108474; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9fafb; color: #292933;
border: 1px solid #c5c6c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #d8e9e8; color: #108474;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif; color:#292933; }
*{box-sizing:border-box;}
.nav{height:64px;background:#292933;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;color:#f5f5f5;}
.hero{height:230px;background:#292933;display:flex;align-items:center;padding:0 32px;gap:26px;}
.herotext{width:46%;}
.herotext h1{font-size:34px;font-weight:700;color:#fff;margin:0 0 10px;line-height:1.15;letter-spacing:-.3px;}
.herotext p{font-size:14px;color:#dedede;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#108474;color:#fff;font-size:14px;font-weight:600;padding:12px 24px;border-radius:8px;}
.inkbar{flex:1;height:120px;display:flex;gap:8px;align-items:flex-end;}
.ink{flex:1;border-radius:8px 8px 4px 4px;}
.tabs{display:flex;gap:0;padding:16px 32px 0;border-bottom:1px solid #eeeeee;}
.tab{font-size:13px;font-weight:600;padding:8px 16px;color:#7b7b7b;}
.tab.active{color:#292933;border-bottom:2px solid #108474;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:150px;background:#f9f9f9;border:1px solid #eeeeee;border-radius:12px;padding:10px;}
.thumb{height:90px;background:#f5f5f5;border-radius:8px;margin-bottom:8px;position:relative;}
.swatch{position:absolute;bottom:8px;left:8px;width:14px;height:14px;border-radius:4px;border:2px solid #292933;}
.tag{display:inline-block;background:#edf5f5;color:#108474;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;border-radius:4px;padding:2px 6px;margin-bottom:4px;}
.ptitle{font-size:13px;font-weight:600;color:#292933;line-height:1.3;}
.pprice{font-size:14px;font-weight:700;color:#292933;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:34px;background:#211f1f;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;color:#a4a4a4;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Uni Ball</div>
<div class="navlinks"><div>Gel Pens</div><div>Rollerball</div><div>Highlighters</div><div>Refills</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Ink you can trust,<br>colors that speak.</h1>
<p>Pigment-ink pens engineered for precision, in every color the page needs.</p>
<div class="cta">Shop Pens</div>
</div>
<div class="inkbar">
<div class="ink" style="height:60%;background:#ec7965"></div>
<div class="ink" style="height:85%;background:#108474"></div>
<div class="ink" style="height:45%;background:#8b1538"></div>
<div class="ink" style="height:70%;background:#f7c970"></div>
<div class="ink" style="height:55%;background:#db3d34"></div>
</div>
</div>
<div class="tabs">
<div class="tab active">Signo Gel</div>
<div class="tab">Jetstream</div>
<div class="tab">Vision Elite</div>
<div class="tab">Chroma</div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="swatch" style="background:#ec7965"></div></div><div class="tag">Pigment</div><div class="ptitle">Signo 207 Coral</div><div class="pprice">$3.49</div></div>
<div class="card"><div class="thumb"><div class="swatch" style="background:#108474"></div></div><div class="tag">Gel</div><div class="ptitle">Signo UM-151 Teal</div><div class="pprice">$3.49</div></div>
<div class="card"><div class="thumb"><div class="swatch" style="background:#8b1538"></div></div><div class="tag">Archival</div><div class="ptitle">Jetstream Maroon</div><div class="pprice">$4.29</div></div>
<div class="card"><div class="thumb"><div class="swatch" style="background:#f7c970"></div></div><div class="tag">Gel</div><div class="ptitle">Vision Elite Gold</div><div class="pprice">$4.99</div></div>
</div>
<div class="footer"><span>© Precision Writing Instruments</span><span>Find a Store · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0071bb; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0071bb; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87badb; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #323746; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0071bb; color: #ffffff;
border: 1px solid #323746; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0071bb; color: #f5f5f5;
border: 1px solid #2786c4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87badb; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0868a8; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#323746; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.jpTitle { font-family:"Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 44px; border-bottom:1px solid #e2e2e6; background:#ffffff; }
.brand { font-size:18px; font-weight:700; margin:0; color:#000000; }
.navlinks { display:flex; gap:30px; font-size:13px; color:#323746; }
main { padding:26px 44px 0; height:522px; }
.kicker { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#0071bb; font-weight:500; }
h1.jpTitle { font-size:34px; font-weight:400; line-height:1.3; margin:8px 0 6px; color:#000000; max-width:640px; }
.lede { font-size:14px; line-height:1.75; color:#323746; max-width:560px; margin:0 0 18px; }
.tabs { display:flex; gap:10px; margin-bottom:20px; }
.tab { background:#dddddd; color:#000000; border-radius:4px; padding:2px 12px; height:38px;
display:flex; align-items:center; font-size:13px; }
.cols { display:flex; gap:32px; }
.colLeft { flex:1; }
.colRight { width:270px; flex:0 0 auto; }
.listRow { display:flex; padding:10px 0 10px 39px; border-bottom:1px solid #f0f0f2; font-size:14px; position:relative; }
.listRow::before { content:''; position:absolute; left:14px; top:16px; width:6px; height:6px; border-radius:50%; background:#0071bb; }
.listTitle { font-weight:500; color:#000000; margin-right:10px; }
.listMeta { color:#767a86; font-size:13px; }
.sectionHead { font-size:20px; font-weight:500; color:#0071bb; margin:22px 0 10px; }
.infoBox { background:#e7f6fd; border-radius:4px; padding:20px 22px; }
.infoBox h3 { font-size:15px; font-weight:700; color:#0071bb; margin:0 0 12px; }
.infoRow { display:flex; justify-content:space-between; font-size:13px; color:#323746; padding:7px 0;
border-bottom:1px solid rgba(0,0,0,.05); }
.infoRow:last-child { border-bottom:none; }
.infoRow b { color:#000000; font-weight:600; }
.plainBtn { margin-top:16px; width:100%; height:38px; border:1px solid #c8ccd4; background:#ffffff; color:#000000;
border-radius:4px; font-size:13px; display:flex; align-items:center; justify-content:center; }
footer { height:32px; border-top:1px solid #e2e2e6; padding:0 44px; display:flex; align-items:center;
justify-content:space-between; font-size:11px; color:#767a86; background:#ffffff; }
</style></head>
<body>
<nav>
<p class="brand">Mynavi</p>
<div class="navlinks"><span>Service Directory</span><span>Company</span><span>Recruit</span><span>Media</span></div>
</nav>
<main>
<span class="kicker">Service Directory</span>
<h1 class="jpTitle">Career Change Support</h1>
<p class="lede">Guidance and listings for people considering a career change, from first exploration to offer comparison. Browse related service categories below.</p>
<div class="tabs">
<div class="tab">Career Change</div>
<div class="tab">Part-time Work</div>
<div class="tab">New Graduate</div>
<div class="tab">Media</div>
</div>
<div class="cols">
<div class="colLeft">
<div class="listRow"><span class="listTitle">Career Change Consultation</span><span class="listMeta">Individual guidance, by appointment</span></div>
<div class="listRow"><span class="listTitle">Resume & Interview Support</span><span class="listMeta">Document review, mock interviews</span></div>
<div class="listRow"><span class="listTitle">Industry Comparison Guides</span><span class="listMeta">Updated monthly</span></div>
<div class="listRow"><span class="listTitle">Employer Information Sessions</span><span class="listMeta">Online and in-person</span></div>
<div class="sectionHead">Related Services</div>
<div class="listRow" style="border-bottom:none;"><span class="listTitle">Part-time & Temporary Listings</span><span class="listMeta">Nationwide coverage</span></div>
</div>
<div class="colRight">
<div class="infoBox">
<h3>Quick Facts</h3>
<div class="infoRow"><span>Support hours</span><b>9:00–18:00</b></div>
<div class="infoRow"><span>Coverage</span><b>Nationwide</b></div>
<div class="infoRow"><span>Format</span><b>Online / In-person</b></div>
<div class="infoRow"><span>Cost</span><b>No charge</b></div>
</div>
<button class="plainBtn">View Full Service Details</button>
</div>
</div>
</main>
<footer>
<span>© Mynavi</span>
<span>Mynavi · Company · Recruit · Media</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #e7e7e7;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #e7e7e7;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.3px; margin: 0; color: #e7e7e7; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #c7c7c7; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #e7e7e7; color: #121212;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #e7e7e7;
border: 1px solid #e7e7e7; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1c1c1c; color: #e7e7e7;
border: 1px solid #474747; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c7c7c7; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 2px; background: transparent; color: #e7e7e7;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#e7e7e7; box-sizing:border-box;
font-family:'Inter Tight','Inter',sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #2a2a2a; }
.brand { font-size:20px; font-weight:700; letter-spacing:-1px; }
.navlinks { display:flex; gap:28px; }
.navlinks span { font-size:13px; font-weight:500; letter-spacing:1px; text-transform:uppercase; color:#e7e7e7; }
.navlinks span.dim { color:#c7c7c7; }
.navcta { border:1px solid #e7e7e7; padding:8px 18px; font-size:12px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.hero { position:relative; height:300px; display:flex; align-items:center; padding:0 32px;
background:linear-gradient(120deg,#1c1c1c 0%,#161616 55%,#0d0d0d 100%); overflow:hidden; }
.hero::after { content:''; position:absolute; right:-40px; top:-20px; width:340px; height:340px;
background:linear-gradient(160deg,#8a5a2b,#3a2412 45%,#1a1006); border-radius:6px; transform:rotate(18deg);
box-shadow:0 30px 60px rgba(0,0,0,0.6); }
.hero::before { content:''; position:absolute; right:70px; top:40px; width:60px; height:260px;
background:linear-gradient(160deg,#2b2b2b,#111); transform:rotate(18deg); z-index:1; }
.heroText { position:relative; z-index:2; max-width:440px; }
.overline { font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#c7c7c7; margin-bottom:10px; }
.headline { font-size:44px; font-weight:700; letter-spacing:-1.5px; line-height:1.05; margin-bottom:14px; }
.sub { font-size:14px; color:#c7c7c7; line-height:1.5; margin-bottom:18px; max-width:340px; }
.heroBtn { display:inline-block; background:#e7e7e7; color:#121212; padding:13px 28px; font-size:13px;
font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.section { padding:24px 32px 0; }
.sectionHead { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; }
.sectionHead h2 { font-size:20px; font-weight:600; letter-spacing:-0.3px; margin:0; }
.filters { display:flex; gap:10px; }
.pill { border:1px solid #2a2a2a; font-size:11px; letter-spacing:1px; text-transform:uppercase; padding:6px 12px; color:#c7c7c7; }
.pill.active { background:#e7e7e7; color:#121212; border-color:#e7e7e7; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { background:#1c1c1c; padding:14px; }
.photo { aspect-ratio:4/3; margin-bottom:10px; position:relative; }
.c1 .photo { background:linear-gradient(150deg,#c9962f,#5a3915 60%,#2a1a0a); }
.c2 .photo { background:linear-gradient(150deg,#2c2c2c,#050505); }
.c3 .photo { background:linear-gradient(150deg,#7a1f1f,#2a0808 60%); }
.c4 .photo { background:linear-gradient(150deg,#3f3f3f,#0a0a0a); }
.badge { position:absolute; top:8px; left:8px; border:1px solid #e7e7e7; color:#e7e7e7; font-size:10px;
letter-spacing:1.5px; text-transform:uppercase; padding:3px 7px; }
.ov { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#c7c7c7; margin-bottom:4px; }
.name { font-size:15px; font-weight:600; margin-bottom:6px; }
.price { font-size:16px; font-weight:700; letter-spacing:-0.2px; }
</style></head>
<body>
<nav>
<div class="brand">Gibson</div>
<div class="navlinks">
<span>Electric</span><span class="dim">Acoustic</span><span class="dim">Bass</span><span class="dim">Custom Shop</span><span class="dim">Support</span>
</div>
<div class="navcta">Find a Dealer</div>
</nav>
<div class="hero">
<div class="heroText">
<div class="overline">Since 1894</div>
<div class="headline">Flame Maple.<br>Carved Mahogany.</div>
<div class="sub">Every instrument built the way it's always been — no shortcuts, no compromise.</div>
<div class="heroBtn">Shop Electrics</div>
</div>
</div>
<div class="section">
<div class="sectionHead">
<h2>Les Paul Collection</h2>
<div class="filters">
<div class="pill active">All</div>
<div class="pill">Standard</div>
<div class="pill">Custom</div>
</div>
</div>
<div class="grid">
<div class="card c1">
<div class="photo"><div class="badge">Limited</div></div>
<div class="ov">Les Paul</div>
<div class="name">Standard '60s</div>
<div class="price">$2,699</div>
</div>
<div class="card c2">
<div class="photo"></div>
<div class="ov">SG</div>
<div class="name">Standard '61</div>
<div class="price">$1,899</div>
</div>
<div class="card c3">
<div class="photo"></div>
<div class="ov">Les Paul</div>
<div class="name">Custom Ebony</div>
<div class="price">$3,199</div>
</div>
<div class="card c4">
<div class="photo"></div>
<div class="ov">Explorer</div>
<div class="name">'76 Reissue</div>
<div class="price">$2,199</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0.5px; background: #8a2432; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: 1px solid #8a2432; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #e1e1e1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.1; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Montserrat',sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #eeeeee;}
.logo{font-weight:700;font-size:19px;}
.search{background:#f9f9f9;border:1px solid #e1e1e1;border-radius:9999px;height:36px;width:220px;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#7b7b7b;}
.navicons{display:flex;gap:14px;font-size:12px;color:#7b7b7b;}
.catnav{height:44px;background:#f9f9f9;border-bottom:1px solid #e1e1e1;display:flex;align-items:center;gap:20px;padding:0 32px;font-size:13px;font-weight:600;}
.catnav span:first-child{color:#8a2432;border-bottom:2px solid #8a2432;padding-bottom:12px;}
.grid{display:flex;gap:16px;padding:20px 32px 0;}
.card{width:210px;border:1px solid #e1e1e1;border-radius:8px;padding:14px;}
.thumb{height:130px;background:#f7f7f7;border-radius:8px;margin-bottom:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#108474;color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:2px;}
.badge.feat{background:#fbcd0a;color:#1a1a1a;}
.title{font-size:15px;font-weight:600;}
.signer{font-size:12px;color:#7b7b7b;margin-top:4px;}
.stars{color:#fbcd0a;font-size:13px;margin-top:6px;}
.price{font-size:18px;font-weight:700;color:#8a2432;margin-top:6px;}
.seal{margin:0 32px;background:#edf5f5;border:1px solid #108474;border-radius:8px;padding:12px 16px;color:#108474;font-size:13px;font-weight:600;margin-top:16px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#1a1a1a;color:#fff;display:flex;align-items:center;justify-content:center;gap:26px;font-size:13px;border-top:3px solid #8a2432;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Pristine Marketplace</div>
<div class="search">Search authenticated items...</div>
<div class="navicons"><span>Cart</span><span>Account</span></div>
</div>
<div class="catnav"><span>Baseball</span><span>Football</span><span>Basketball</span><span>Pop Culture</span></div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">Authenticated</div></div><div class="title">Signed Rookie Card #7</div><div class="signer">Signed by D. Wallenberg</div><div class="stars">★★★★★</div><div class="price">$249.00</div></div>
<div class="card"><div class="thumb"><div class="badge feat">Featured</div></div><div class="title">Game-Worn Jersey</div><div class="signer">Signed by K. Muroya</div><div class="stars">★★★★★</div><div class="price">$610.00</div></div>
<div class="card"><div class="thumb"></div><div class="title">Framed Photo, 16x20</div><div class="signer">Signed by T. Onyekachi</div><div class="stars">★★★★☆</div><div class="price">$135.00</div></div>
</div>
<div class="seal">✅ Certificate of Authenticity included — Expert-Verified</div>
<div class="footer"><span>About</span><span>Authentication</span><span>Sell With Us</span><span>Contact</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f6f0; color: #0d0d0d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f6f0; color: #0d0d0d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #0d0d0d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #607380; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #0f193f; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #f7f6f0; color: #0f193f;
border: 1px solid #0f193f; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #f7f6f0; color: #0d0d0d;
border: 1px solid #bcbcb7; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #607380; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ec2c3e; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f6f0; color:#212121; box-sizing:border-box; position:relative;
font-family:'Lato','Karla',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#f7f6f0; }
.brand { font-family:'Karla',sans-serif; font-size:15px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#0f193f; margin:0; }
.navlinks { display:flex; gap:24px; font-family:'Karla',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#607380; }
.navlinks span.active { color:#0f193f; border-bottom:2px solid #0f193f; padding-bottom:4px; }
.search-pill { background:#fff; border-radius:999px; padding:8px 18px; font-size:12px; color:#607380; }
.hero { background:#0f193f; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:20px 32px; height:110px; }
.hero h1 { font-family:'Karla',sans-serif; font-size:26px; font-weight:700; margin:0; letter-spacing:-0.4px; }
.hero p { font-size:13px; margin:4px 0 0; color:#c7cde0; }
.hero-cta { background:#ec2c3e; color:#fff; border:none; border-radius:999px; padding:12px 26px; font-family:'Karla',sans-serif; font-weight:700; font-size:13px; letter-spacing:0.3px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:20px 32px; }
.card { background:#fff; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.card-img { height:120px; position:relative; display:flex; align-items:center; justify-content:center; }
.card:nth-child(1) .card-img { background:#e87621; }
.card:nth-child(2) .card-img { background:#00b4e1; }
.card:nth-child(3) .card-img { background:#aa5ea3; }
.card:nth-child(4) .card-img { background:#4cbea0; }
.toy-shape { width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,0.35); }
.badge-new { position:absolute; top:8px; left:8px; background:#ec2c3e; color:#fff; font-family:'Karla',sans-serif; font-size:10px; font-weight:700; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.card-body { padding:10px 12px; display:flex; flex-direction:column; gap:4px; flex:1; }
.card-body .stars { color:#ffdf00; font-size:11px; }
.card-body h3 { font-family:'Karla',sans-serif; font-size:13px; font-weight:600; margin:0; color:#0d0d0d; }
.card-body .price { font-size:14px; color:#ec2c3e; font-weight:400; }
.age-badge { align-self:flex-start; background:#4cbea0; color:#fff; font-family:'Karla',sans-serif; font-size:9px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:999px; }
.strip { display:flex; gap:12px; padding:0 32px; }
.cat-tab { flex:1; text-align:center; padding:10px; border-radius:999px; font-family:'Karla',sans-serif; font-size:12px; font-weight:600; text-transform:uppercase; }
.cat-tab.active { background:#0f193f; color:#fff; }
.cat-tab:not(.active) { background:#f2f3ee; color:#607380; }
footer { position:absolute; bottom:0; left:0; right:0; background:#0f193f; color:#d1d1db; padding:12px 32px;
display:flex; justify-content:space-between; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Baby Einstein</p>
<div class="navlinks"><span class="active">Newborn</span><span>Infant</span><span>Toddler</span><span>Bundles</span></div>
<div class="search-pill">🔍 Search toys</div>
</nav>
<div class="hero">
<div>
<h1>Curiosity starts here</h1>
<p>Wooden blocks, activity gyms, and musical toys built for tiny hands and big eyes.</p>
</div>
<button class="hero-cta">Shop New Arrivals</button>
</div>
<div class="strip">
<div class="cat-tab active">All Toys</div>
<div class="cat-tab">Activity Gyms</div>
<div class="cat-tab">Musical</div>
<div class="cat-tab">Wooden Blocks</div>
<div class="cat-tab">Bath Time</div>
</div>
<div class="grid">
<div class="card">
<div class="card-img"><div class="badge-new">New</div><div class="toy-shape"></div></div>
<div class="card-body"><span class="age-badge">0-6 Months</span><h3>Curiosity Activity Gym</h3><div class="stars">★★★★★</div><span class="price">$59.99</span></div>
</div>
<div class="card">
<div class="card-img"><div class="toy-shape"></div></div>
<div class="card-body"><span class="age-badge">6-12 Months</span><h3>Discover & Play Piano</h3><div class="stars">★★★★☆</div><span class="price">$44.99</span></div>
</div>
<div class="card">
<div class="card-img"><div class="toy-shape"></div></div>
<div class="card-body"><span class="age-badge">12-24 Months</span><h3>Wooden Stacking Blocks</h3><div class="stars">★★★★★</div><span class="price">$32.99</span></div>
</div>
<div class="card">
<div class="card-img"><div class="badge-new">New</div><div class="toy-shape"></div></div>
<div class="card-body"><span class="age-badge">2-4 Years</span><h3>World of Colors Puzzle</h3><div class="stars">★★★★☆</div><span class="price">$27.99</span></div>
</div>
</div>
<footer>
<span>© Baby Einstein</span>
<span>Baby Einstein · Shop · Learn · Connect</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6B6B6B; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #1660D8; color: #FFFFFF;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #FFFFFF; color: #1660D8;
border: 1px solid #1660D8; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B6B6B; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #E8320A; color: #FFFFFF;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>iDesign Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:'Helvetica Neue',Arial,sans-serif;
background:#ffffff; color:#3d3d3d;
}
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid #d8d8d8;}
.logo{font-size:19px;font-weight:700;color:#1660D8;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;color:#3d3d3d;text-transform:uppercase;letter-spacing:.3px;}
.cta-mini{background:#1660D8;color:#fff;font-size:11.5px;font-weight:700;padding:8px 16px;border-radius:8px;}
.catbar{display:flex;gap:10px;padding:12px 26px 0;}
.cat-tile{flex:1;background:#F5F6F8;border:1px solid #d8d8d8;border-radius:8px;padding:10px 8px;text-align:center;}
.cat-tile .ic{width:26px;height:26px;border-radius:6px;background:#1660D8;margin:0 auto 6px;}
.cat-tile span{font-size:10px;font-weight:700;color:#1A1A1A;text-transform:uppercase;letter-spacing:.4px;}
.hero{display:flex;padding:16px 26px 0;gap:20px;height:126px;}
.hero-copy{flex:1.3;display:flex;flex-direction:column;justify-content:center;}
.hero-copy h1{font-size:22px;font-weight:700;color:#1A1A1A;line-height:1.25;margin:0 0 6px;}
.hero-copy p{font-size:11.5px;color:#6B6B6B;margin:0 0 10px;max-width:360px;line-height:1.5;}
.hero-btn{display:inline-block;background:#1660D8;color:#fff;font-size:11.5px;font-weight:700;padding:9px 18px;border-radius:8px;width:fit-content;}
.hero-visual{flex:1;display:flex;gap:8px;align-items:flex-end;justify-content:center;}
.bin{width:38px;background:linear-gradient(160deg,#eef3fb,#d7e4f7);border:1px solid #c2d4ef;border-radius:6px 6px 2px 2px;}
.b1{height:70px;}.b2{height:92px;}.b3{height:56px;}.b4{height:80px;}
.section{padding:12px 26px 0;}
.section-title{font-size:12.5px;font-weight:800;color:#1A1A1A;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;display:flex;justify-content:space-between;}
.section-title span{color:#1660D8;font-size:10.5px;}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.card{background:#ffffff;border:1px solid #d8d8d8;border-radius:8px;padding:7px;}
.card-img{height:50px;border-radius:6px;background:#F5F6F8;border:1px solid #EDEDED;margin-bottom:6px;position:relative;}
.card-img .promo{position:absolute;top:3px;left:3px;background:#E8320A;color:#fff;font-size:7.5px;font-weight:800;padding:2px 4px;border-radius:3px;}
.card-img .shape{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26px;height:32px;border:1.5px solid #1660D8;border-radius:5px;background:rgba(22,96,216,.08);}
.card-name{font-size:9px;font-weight:600;color:#1A1A1A;line-height:1.3;height:23px;overflow:hidden;margin-bottom:3px;}
.card-price{font-size:11px;font-weight:800;color:#1660D8;}
.stickybar{margin-top:10px;background:#1A1A1A;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;}
.stickybar span{color:#fff;font-size:11px;font-weight:600;}
.stickybar .add{background:#1660D8;color:#fff;font-size:10.5px;font-weight:700;padding:5px 16px;border-radius:8px;}
</style>
<div class="nav">
<div class="logo">Idesign</div>
<div class="navlinks"><span>Drawers</span><span>Shelving</span><span>Bath</span><span>Kitchen</span><span>Closet</span></div>
<div class="cta-mini">Shop All</div>
</div>
<div class="catbar">
<div class="cat-tile"><div class="ic"></div><span>Drawer Bins</span></div>
<div class="cat-tile"><div class="ic"></div><span>Wire Shelving</span></div>
<div class="cat-tile"><div class="ic"></div><span>Bath Organize</span></div>
<div class="cat-tile"><div class="ic"></div><span>Pantry Kits</span></div>
<div class="cat-tile"><div class="ic"></div><span>Closet Systems</span></div>
</div>
<div class="hero">
<div class="hero-copy">
<h1>A system for every shelf, drawer, and bin.</h1>
<p>Clear acrylic and wire storage designed to be seen through — organize once, find everything after.</p>
<div class="hero-btn">Build Your System</div>
</div>
<div class="hero-visual">
<div class="bin b1"></div><div class="bin b2"></div><div class="bin b3"></div><div class="bin b4"></div>
</div>
</div>
<div class="section">
<div class="section-title">Drawer & Shelf Organizers <span>View All →</span></div>
<div class="grid">
<div class="card"><div class="card-img"><div class="shape"></div></div><div class="card-name">Clarity Drawer Bin, Small</div><div class="card-price">$8.99</div></div>
<div class="card"><div class="card-img"><div class="promo">SALE</div><div class="shape"></div></div><div class="card-name">Tension Mount Shelf</div><div class="card-price">$19.99</div></div>
<div class="card"><div class="card-img"><div class="shape"></div></div><div class="card-name">Mesh Pantry Basket</div><div class="card-price">$14.99</div></div>
<div class="card"><div class="card-img"><div class="shape"></div></div><div class="card-name">Suction Shower Caddy</div><div class="card-price">$16.99</div></div>
<div class="card"><div class="card-img"><div class="promo">SALE</div><div class="shape"></div></div><div class="card-name">Wire Shelf Riser Set</div><div class="card-price">$22.99</div></div>
<div class="card"><div class="card-img"><div class="shape"></div></div><div class="card-name">Stackable Bin, Large</div><div class="card-price">$11.99</div></div>
</div>
</div>
<div class="stickybar"><span>Clarity Drawer Bin — Small</span><div class="add">Add to Cart</div></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #728197; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: #ffffff; color: #141414;
border: 1px solid #108474; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #141414;
border: 1px solid #c0c0c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #728197; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.4px; background: #edf5f5; color: #108474;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#141414; color:#728197; box-sizing:border-box;
font-family:'Inter',sans-serif; }
* { box-sizing:border-box; }
h1,h2,.brand,.price { font-family:'AlibabaPuHuiTiM','Inter',sans-serif; }
nav { height:64px; background:#1f2021; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #4a5464; }
.brand { font-size:20px; font-weight:700; color:#108474; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:500; color:#fff; }
.search-pill { width:170px; height:34px; border-radius:9999px; background:#f6f6f6; font-size:12px; color:#728197;
display:flex; align-items:center; padding:0 16px; }
.hero { height:210px; background:#141414; display:flex; align-items:center; justify-content:space-between; padding:0 44px; }
.hero h1 { color:#fff; font-size:36px; font-weight:700; margin:0 0 12px; max-width:420px; line-height:1.2; }
.hero p { color:#b1b1b3; font-size:14px; margin:0 0 18px; max-width:340px; font-family:'Inter',sans-serif; }
.btn-teal { display:inline-block; background:#108474; color:#fff; font-size:16px; font-weight:700; padding:14px 28px; border-radius:8px; }
.chip-amber { display:inline-block; background:#ffaa00; color:#141414; font-size:11px; font-weight:700; text-transform:uppercase;
letter-spacing:0.4px; padding:4px 10px; border-radius:9999px; margin-bottom:10px; }
.robot { width:150px; height:150px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #2a2b2c, #0d0d0d 70%); position:relative;
box-shadow:0 8px 24px rgba(0,0,0,.4); }
.robot::before { content:''; position:absolute; top:24px; left:24px; width:100px; height:100px; border-radius:50%; border:2px solid #108474; opacity:.5; }
.grid { display:flex; gap:16px; padding:18px 44px 0; }
.card { flex:1; background:#ffffff; border-radius:12px; padding:16px; position:relative; box-shadow:0 8px 24px rgba(0,0,0,.10); }
.card .imgbox { height:78px; background:#f6f6f6; border-radius:8px; margin-bottom:8px; }
.promo-chip { position:absolute; top:14px; left:14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px;
padding:4px 10px; border-radius:9999px; }
.promo-chip.amber { background:#ffaa00; color:#141414; }
.promo-chip.orange { background:#f16d0e; color:#fff; }
.card .name { font-size:16px; font-weight:600; color:#141414; margin-bottom:4px; }
.card .price { font-size:22px; font-weight:700; color:#141414; }
.card .price.sale { color:#f16d0e; }
.card .price-old { font-size:12px; color:#728197; text-decoration:line-through; margin-left:6px; }
footer { position:absolute; bottom:0; left:0; right:0; height:82px; background:#1f2021; color:#b1b1b3; display:flex;
align-items:center; justify-content:space-between; padding:0 44px; border-top:1px solid #4a5464; }
footer .col { font-size:12px; line-height:1.9; }
footer .col b { display:block; color:#fff; margin-bottom:3px; }
.wrap { position:relative; height:640px; }
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="brand">Dreame</div>
<div class="navlinks"><span>Robot Vacuums</span><span>Cordless Stick</span><span>Wet-Dry</span><span>Accessories</span></div>
<div class="search-pill">Search products...</div>
</nav>
<div class="hero">
<div>
<span class="chip-amber">Limited Time</span>
<h1>Engineered precision, for every floor.</h1>
<p>LiDAR navigation and 5500Pa suction, in a robot that maps your home like an instrument.</p>
<a class="btn-teal">Shop Robot Vacuums</a>
</div>
<div class="robot"></div>
</div>
<div class="grid">
<div class="card"><span class="promo-chip amber">Best Seller</span><div class="imgbox"></div><div class="name">Dreame X40 Ultra</div><div class="price">$1,199</div></div>
<div class="card"><span class="promo-chip orange">-20%</span><div class="imgbox"></div><div class="name">Dreame L10s Pro</div><div class="price sale">$599 <span class="price-old">$749</span></div></div>
<div class="card"><div class="imgbox"></div><div class="name">Dreame H14 Wet-Dry</div><div class="price">$449</div></div>
<div class="card"><div class="imgbox"></div><div class="name">Dreame Cordless T30</div><div class="price">$329</div></div>
</div>
<footer>
<div class="col"><b>Shop</b>Robot Vacuums<br>Cordless</div>
<div class="col"><b>Support</b>Warranty<br>Setup Guides</div>
<div class="col"><b>Dreame</b>Precision-engineered clean.</div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5b52ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5b52ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b0acfa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5b52ff; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5b52ff; color: #f5f5f5;
border: 1px solid #746cfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b0acfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #756eff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0a0d14; box-sizing:border-box;
font-family:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #e2e4e9; }
.brand { font-weight:700; font-size:17px; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#52525b; }
.btn { background:#5b52ff; color:#ffffff; border:1px solid #5b52ff; border-radius:8px; padding:10px 18px;
font-weight:500; font-size:14px; }
.btn-outline { background:#ffffff; color:#5b52ff; border:1px solid #5b52ff; border-radius:8px; padding:10px 18px;
font-weight:500; font-size:14px; }
.hero { padding:40px 40px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.hero h1 { font-size:44px; font-weight:600; line-height:1.1; letter-spacing:-1px; margin:0; max-width:680px; }
.hero h1 span { color:#5b52ff; }
.hero p { font-size:16px; color:#52525b; margin:0; max-width:520px; line-height:1.5; }
.row { display:flex; gap:12px; margin-top:6px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:14px 40px 20px; }
.card { border:1px solid #e2e4e9; border-radius:8px; padding:18px; background:#ffffff; }
.card .tag { font-size:11px; font-weight:700; color:#5b52ff; text-transform:uppercase; letter-spacing:.05em; }
.card h3 { font-size:15px; font-weight:600; margin:8px 0 6px; }
.card p { font-size:12.5px; color:#52525b; line-height:1.5; margin:0; }
.pricing { margin:0 40px; border-top:1px solid #e2e4e9; padding-top:18px; display:flex; gap:14px; }
.pcard { flex:1; border:1px solid #cdd0d5; border-radius:8px; padding:18px 20px 18px 18px; background:#ffffff;
display:flex; flex-direction:column; gap:6px; }
.pcard.current { border:1px solid #e2e4e9; background:#fafafb; }
.ptag { font-size:11px; font-weight:500; color:#0a0d14; }
.ptitle { font-size:17px; font-weight:600; }
.pdesc { font-size:11.5px; color:#525866; line-height:1.5; }
</style></head>
<body>
<nav>
<span class="brand">Upstage</span>
<div class="navlinks"><span>Solar</span><span>Document AI</span><span>Studio</span><span>Pricing</span></div>
<div class="row"><button class="btn-outline">Sign in</button><button class="btn">Get started</button></div>
</nav>
<section class="hero">
<h1>Enterprise AI for <span>document-heavy</span> work</h1>
<p>Build controllable, traceable document intelligence for insurance, healthcare, and financial services workflows.</p>
<div class="row"><button class="btn">Talk to sales</button><button class="btn-outline">View documentation</button></div>
</section>
<section class="grid">
<div class="card"><span class="tag">Document Parse</span><h3>Structure any document</h3><p>Extract layout, tables, and text with production-grade accuracy.</p></div>
<div class="card"><span class="tag">Information Extract</span><h3>Turn pages into fields</h3><p>Pull structured values out of unstructured filings automatically.</p></div>
<div class="card"><span class="tag">Studio</span><h3>Design and deploy agents</h3><p>Operate document workflows with review, governance, and traceability.</p></div>
</section>
<section class="pricing">
<div class="pcard current"><span class="ptag">Solar Mini</span><span class="ptitle">Free tier</span><span class="pdesc">Best for prototyping and evaluation.</span></div>
<div class="pcard"><span class="ptag">Solar Pro 3</span><span class="ptitle">$0.002 / 1K tokens</span><span class="pdesc">Production document reasoning at scale.</span></div>
<div class="pcard"><span class="ptag">Enterprise</span><span class="ptitle">Custom</span><span class="pdesc">Dedicated deployment, security review, SLA.</span></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0e1a2b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0e1a2b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 900; line-height: 1.1; margin: 0; color: #0e1a2b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #5a6a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c8102e; color: #ffffff;
border: none; border-radius: 2px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #0e1a2b;
border: 1px solid #c8102e; border-radius: 2px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #0e1a2b;
border: 1px solid #c3c6ca; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a6a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #c9a84c; color: #0e1a2b;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial, 'Helvetica Neue', sans-serif; color:#1f2d3d; }
*{box-sizing:border-box;}
.nav{height:60px;background:#0e1a2b;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:800;letter-spacing:0.5px;color:#fff;text-transform:uppercase;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;color:#9fb0c2;}
.navlinks span:first-child{color:#c8102e;}
.ribbon{background:#c8102e;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:5px 12px;border-radius:2px;}
.hero{height:220px;background:#f5f5f5;display:flex;align-items:center;padding:0 32px;}
.heroText{width:460px;}
.h1{font-size:26px;font-weight:800;letter-spacing:-0.3px;text-transform:uppercase;line-height:1.2;margin:0 0 10px;color:#0e1a2b;}
.sub{font-size:13px;color:#5a6a7a;margin:0 0 16px;max-width:380px;}
.btn{height:42px;padding:0 24px;border-radius:2px;background:#c8102e;color:#fff;font-size:12px;font-weight:800;letter-spacing:0.3px;text-transform:uppercase;display:flex;align-items:center;}
.jerseywrap{width:380px;height:220px;position:relative;}
.jersey{position:absolute;left:130px;top:20px;width:120px;height:140px;border-radius:8px 8px 20px 20px;background:#0e1a2b;}
.stripe{position:absolute;left:150px;top:20px;width:80px;height:10px;background:#c8102e;}
.hologram{position:absolute;left:220px;top:60px;width:22px;height:22px;border-radius:4px;background:#c9a84c;}
.sec{padding:18px 32px;}
.sectitle{font-size:15px;font-weight:800;letter-spacing:0.3px;text-transform:uppercase;margin-bottom:12px;color:#0e1a2b;}
.grid{display:flex;gap:14px;}
.card{width:216px;background:#ffffff;border:1px solid #dde1e6;border-radius:4px;overflow:hidden;}
.thumb{height:86px;position:relative;}
.authribbon{position:absolute;bottom:0;left:0;right:0;background:rgba(14,26,43,0.85);color:#fff;font-size:9px;font-weight:700;letter-spacing:0.3px;text-align:center;padding:3px 0;}
.pbody{padding:10px 12px 12px;}
.athlete{font-size:13px;font-weight:800;text-transform:uppercase;margin-bottom:2px;}
.sportbadge{font-size:10px;font-weight:700;color:#c9a84c;margin-bottom:6px;}
.pprice{font-size:14px;font-weight:800;color:#c8102e;}
</style>
<div class="nav">
<div class="logo">Steiner Sports</div>
<div class="navlinks"><span>MLB</span><span>NFL</span><span>NBA</span><span>NHL</span><span>Soccer</span></div>
<div class="ribbon">100% Authentic</div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Certified provenance,<br>not just merchandise.</div>
<div class="sub">Autographed jerseys, game-used bats and framed collections with league-official authentication.</div>
<div class="btn">Shop Autographs</div>
</div>
<div class="jerseywrap"><div class="jersey"></div><div class="stripe"></div><div class="hologram"></div></div>
</div>
<div class="sec">
<div class="sectitle">Featured Authentics</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#0e1a2b"><div class="authribbon">Authenticated</div></div><div class="pbody"><div class="athlete">Rookie Season Jersey</div><div class="sportbadge">MLB · Framed</div><div class="pprice">$899.00</div></div></div>
<div class="card"><div class="thumb" style="background:#c9a84c"><div class="authribbon">Hall of Fame</div></div><div class="pbody"><div class="athlete">Signed Championship Bat</div><div class="sportbadge">MLB · Game-Used</div><div class="pprice">$1,499.00</div></div></div>
<div class="card"><div class="thumb" style="background:#5a6a7a"></div><div class="pbody"><div class="athlete">Autographed Helmet</div><div class="sportbadge">NFL · Full-Size</div><div class="pprice">$699.00</div></div></div>
<div class="card"><div class="thumb" style="background:#c8102e"></div><div class="pbody"><div class="athlete">Signed Action Photo</div><div class="sportbadge">NBA · 16x20 Framed</div><div class="pprice">$249.00</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1e1f26;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1e1f26;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; letter-spacing: 0.02em; margin: 0; color: #1e1f26; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.7; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: 0.10em; background: #382110; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: 0.10em; background: #ffffff; color: #1e1f26;
border: 1px solid #382110; border-radius: 0px;
padding: 11px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.7; background: #ffffff; color: #1e1f26;
border: 1px solid #c7c7c9; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0.10em; background: #382110; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Georgia,'Times New Roman',serif; color:#1e1f26; }
*{box-sizing:border-box;}
.nav{height:60px;border-bottom:1px solid #e1e1e1;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logobox{display:flex;flex-direction:column;line-height:1.2;}
.logobox b{font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#1e1f26;}
.logobox span{font-size:11px;color:#949494;letter-spacing:1px;}
.navlinks{display:flex;gap:24px;font-size:13px;letter-spacing:.5px;color:#1e1f26;}
.hero{height:250px;display:flex;align-items:center;padding:0 30px;gap:30px;}
.herotext{width:320px;}
.herotext h1{font-size:34px;font-weight:400;line-height:1.25;margin:0 0 16px;}
.cta{display:inline-block;background:#382110;color:#fff;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:12px 32px;}
.notebooks{flex:1;height:170px;display:flex;align-items:flex-end;justify-content:center;gap:16px;}
.nb{width:80px;height:110px;border-radius:2px;position:relative;}
.nb:before{content:'';position:absolute;left:6px;top:0;bottom:0;width:2px;background:rgba(0,0,0,.2);}
.rowlabel{padding:14px 30px 10px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#949494;}
.grid{display:flex;gap:20px;padding:0 30px;}
.card{width:180px;}
.thumb{aspect-ratio:3/4;position:relative;}
.badge{position:absolute;top:0;left:0;background:#382110;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;}
.ptitle{font-size:15px;margin-top:10px;}
.pprice{font-size:14px;color:#32373c;margin-top:2px;}
</style>
<div class="nav">
<div class="logobox"><b>Traveler S Company</b><span>トラベラーズカンパニー</span></div>
<div class="navlinks"><div>Notebooks</div><div>Refills</div><div>Accessories</div><div>Stores</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>A notebook that ages with you.</h1>
<div class="cta">Shop the Cover</div>
</div>
<div class="notebooks">
<div class="nb" style="background:#382110"></div>
<div class="nb" style="background:#1e1f26;height:130px"></div>
<div class="nb" style="background:#9b7a62;height:90px"></div>
</div>
</div>
<div class="rowlabel">The Refill System</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#382110,#f0f0f0)"><span class="badge">New</span></div><div class="ptitle">Leather Passport Cover</div><div class="pprice">$34.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#f0f0f0,#382110)"></div><div class="ptitle">Blank Notebook Refill</div><div class="pprice">$4.50</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#1e1f26,#f0f0f0)"></div><div class="ptitle">Brass Pen Case</div><div class="pprice">$22.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.33; letter-spacing: -0.2px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.625; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', system-ui, sans-serif; }
* { box-sizing:border-box; }
nav { height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #e8e8e8; }
.brand { font-size:15px; font-weight:400; letter-spacing:0.24em; text-transform:uppercase; }
.navlinks { display:flex; gap:30px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:#7a7a7a; }
.navlinks span.on { color:#313131; }
.cart-txt { font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:#313131; }
main { display:flex; height:574px; }
.gallery { width:430px; background:#f5f5f5; display:flex; align-items:center; justify-content:center; position:relative; }
.bottle { width:110px; height:230px; background:#313131; border-radius:2px; position:relative; }
.bottle::before { content:''; position:absolute; top:-16px; left:38px; width:34px; height:20px; background:#1a1a1a; }
.bottle .label { position:absolute; top:60px; left:8px; right:8px; bottom:60px; background:#f5f5f5;
display:flex; align-items:center; justify-content:center; }
.label span { font-size:8px; letter-spacing:0.16em; text-transform:uppercase; color:#313131; text-align:center; }
.info { flex:1; padding:40px 44px; display:flex; flex-direction:column; gap:16px; }
.cat { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#7a7a7a; }
h1 { font-size:24px; font-weight:400; margin:0; letter-spacing:-0.2px; line-height:1.35; }
.desc { font-size:14px; color:#4a4a4a; line-height:1.65; max-width:340px; }
.price-row { display:flex; align-items:baseline; gap:10px; padding-top:4px; }
.price { font-size:16px; font-weight:500; }
.size-row { display:flex; gap:8px; }
.size { border:1px solid #d4d4d4; padding:8px 16px; font-size:12px; }
.size.on { border-color:#313131; background:#313131; color:#fff; }
.btn-row { display:flex; gap:0; margin-top:auto; }
.btn-primary { flex:1; background:#313131; color:#fff; border:none; padding:14px 18px;
font-size:13px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; }
.note { font-size:11.5px; color:#a0a0a0; letter-spacing:0.02em; }
</style></head>
<body>
<nav>
<div class="brand">Aesop</div>
<div class="navlinks"><span class="on">Skin</span><span>Hair</span><span>Body</span><span>Fragrance</span></div>
<div class="cart-txt">Bag (0)</div>
</nav>
<main>
<div class="gallery">
<div class="bottle"><div class="label"><span>Parsley Seed<br>Anti-Oxidant<br>Serum</span></div></div>
</div>
<div class="info">
<span class="cat">Skin Care — Serum</span>
<h1>Parsley Seed Anti-Oxidant Facial Treatment</h1>
<p class="desc">A lightweight, oil-based serum formulated to help defend skin against environmental assault, leaving it clear, calm, and comfortable.</p>
<div class="price-row"><span class="price">$77.00</span></div>
<div class="size-row">
<span class="size on">30ml</span>
<span class="size">60ml</span>
</div>
<div class="btn-row"><button class="btn-primary">Add to Bag</button></div>
<span class="note">Complimentary samples with every order</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2b2b2b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2b2b2b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #2b2b2b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676767; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #003399; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #003399;
border: 1px solid #003399; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2b2b2b;
border: 1px solid #cacaca; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676767; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f6f6f6; color: #676767;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f7f5f0; font-family:'Figtree',Arial,sans-serif; color:#1a1a1a;
}
*{box-sizing:border-box;}
.nav{height:56px; background:#fff; display:flex; align-items:center; padding:0 30px; border-bottom:2px solid #003399;}
.logo{font-family:'Bitter',Georgia,serif; font-size:20px; font-weight:700; color:#003399;}
.navlinks{display:flex; gap:20px; margin-left:36px; font-size:12px; color:#5f3f3f;}
.navlinks span.active{color:#003399; border-bottom:2px solid #dad55e; padding-bottom:4px; font-weight:600;}
.searchpill{margin-left:auto; font-size:11px; color:#2f4550; border:1px solid #ccc; border-radius:4px; padding:7px 14px;}
.hero{display:flex; align-items:center; gap:32px; padding:24px 30px;}
.heroText{flex:1;}
.heroText .eyebrow{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#5f3f3f; font-weight:700; margin-bottom:10px;}
.heroText h1{font-family:'Bitter',Georgia,serif; font-size:30px; font-weight:700; line-height:1.25; margin:0 0 12px; max-width:400px;}
.heroText p{font-size:13.5px; color:#4a4a4a; line-height:1.55; max-width:380px; margin:0 0 16px;}
.heroBtn{display:inline-block; background:#003399; color:#fff; padding:11px 24px; font-size:12px; font-weight:600;}
.heroImg{width:180px; height:230px; background:linear-gradient(160deg,#5f3f3f,#2f4550); flex-shrink:0; box-shadow:0 6px 16px rgba(0,0,0,.15);}
.section{padding:14px 30px 0;}
.sectitle{font-family:'Bitter',Georgia,serif; font-size:18px; font-weight:700; margin:0 0 12px;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.card{text-align:center;}
.thumb{height:96px; margin-bottom:8px; box-shadow:0 2px 6px rgba(0,0,0,.12);}
.t1{background:linear-gradient(160deg,#003399,#5577cc);}
.t2{background:linear-gradient(160deg,#5f3f3f,#8a6a6a);}
.t3{background:linear-gradient(160deg,#2f4550,#5a7684);}
.t4{background:linear-gradient(160deg,#dad55e,#a89f2e);}
.pname{font-family:'Bitter',Georgia,serif; font-size:11.5px; font-weight:700; margin-bottom:3px; line-height:1.3;}
.pprice{font-size:11px; color:#5f3f3f;}
.footer{position:absolute; bottom:0; left:0; right:0; background:#003399; color:#c9d6f5; font-size:10px; text-align:center; padding:8px 0;}
</style>
<div class="nav">
<div class="logo">Hennessey Ingalls</div>
<div class="navlinks"><span class="active">Art & Design</span><span>Architecture</span><span>Rare Books</span><span>Photography</span></div>
<div class="searchpill">Search Catalog</div>
</div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">Since 1969</div>
<h1>A Place for Browsing, Not Flashy Promotions</h1>
<p>Rare, used, and new titles on art, architecture, and design — curated for scholars, collectors, and the curious.</p>
<div class="heroBtn">Browse Rare Finds</div>
</div>
<div class="heroImg"></div>
</div>
<div class="section">
<div class="sectitle">Recently Acquired</div>
<div class="grid">
<div class="card"><div class="thumb t1"></div><div class="pname">Modernism in Concrete</div><div class="pprice">$68.00</div></div>
<div class="card"><div class="thumb t2"></div><div class="pname">The Bauhaus Reader</div><div class="pprice">$45.00</div></div>
<div class="card"><div class="thumb t3"></div><div class="pname">Color Theory Notebooks</div><div class="pprice">$32.00</div></div>
<div class="card"><div class="thumb t4"></div><div class="pname">Photographs, 1961–1979</div><div class="pprice">$120.00</div></div>
</div>
</div>
<div class="footer">© Hennessey Ingalls — Rare & Used Books on Art and Architecture</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f7f3; color: #3f3e39;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f7f3; color: #3f3e39;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #3f3e39; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #727272; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #4d384b; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #f8f7f3; color: #4d384b;
border: 1px solid #4d384b; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #3f3e39;
border: 1px solid #cac9c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #727272; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #e6f1e5; color: #3e714e;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f7f3; font-family:'Instrument Sans','Helvetica Neue',sans-serif; color:#4f4f4f; }
*{box-sizing:border-box;}
.announce{height:36px;background:#4d384b;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.02em;}
.nav{height:60px;background:#f8f7f3;border-bottom:1px solid #e6e6e6;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:Garamond,serif;font-size:20px;color:#3f3e39;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#3f3e39;}
.hero{background:#eceae2;padding:40px;display:flex;align-items:center;justify-content:space-between;}
.heroText{width:52%;}
.h1{font-family:Garamond,'Times New Roman',serif;font-size:44px;line-height:1.15;color:#3f3e39;margin:0 0 16px;max-width:400px;}
.cta{display:inline-block;background:#4d384b;color:#fff;font-size:14px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;padding:14px 30px;}
.room{width:180px;height:150px;position:relative;}
.rug{position:absolute;bottom:0;width:180px;height:60px;background:#c2bcac;border-radius:8px;}
.chair{position:absolute;bottom:40px;left:40px;width:80px;height:80px;background:#739a79;border-radius:8px 8px 0 0;}
.grid{display:flex;gap:18px;padding:20px 40px 0;}
.card{width:210px;}
.thumb{height:130px;background:#ffffff;border:1px solid #e6e6e6;aspect-ratio:3/4;margin-bottom:8px;}
.badge{display:inline-block;background:#e6f1e5;color:#3e714e;font-size:11px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;padding:4px 8px;margin-bottom:6px;}
.ptitle{font-size:16px;font-weight:500;color:#3f3e39;}
.pprice{font-size:14px;color:#4f4f4f;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#f8f7f3;border-top:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;color:#727272;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">Free shipping on orders over $150</div>
<div class="nav">
<div class="logo">Mcgee And CO</div>
<div class="navlinks"><span>Furniture</span><span>Decor</span><span>Lighting</span><span>Studio Picks</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">A room, edited to feel already lived in.</div>
<div class="cta">Shop the Collection</div>
</div>
<div class="room"><div class="rug"></div><div class="chair"></div></div>
</div>
<div class="grid">
<div class="card"><div class="badge">Studio Pick</div><div class="thumb"></div><div class="ptitle">Linden Boucle Chair</div><div class="pprice">$1,295</div></div>
<div class="card"><div class="badge">New Arrival</div><div class="thumb"></div><div class="ptitle">Wheatgrass Table Lamp</div><div class="pprice">$210</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Havenwood Coffee Table</div><div class="pprice">$780</div></div>
</div>
<div class="footer"><span>© McGee & Co Home</span><span>Design Consult · Trade Program</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #383637;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #383637;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.1; margin: 0; color: #383637; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767374; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0.08em; background: #383637; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0.08em; background: #ffffff; color: #383637;
border: 1px solid #383637; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #383637;
border: 1px solid #cdcdcd; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767374; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.12em; background: #383637; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#383637; box-sizing:border-box;
font-family:'Muli','Mulish',-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; border-bottom:1px solid #e2e0e1; background:#ffffff; }
.brand { font-family:'Alternate Gothic No 2','Franklin Gothic Medium',sans-serif; font-size:22px;
font-weight:700; letter-spacing:0.02em; text-transform:uppercase; color:#383637; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:600; color:#767374; }
.navlinks span:first-child { color:#383637; }
.navicons { display:flex; gap:16px; align-items:center; font-size:13px; color:#383637; }
.cartdot { background:#383637; color:#fff; border-radius:9999px; width:18px; height:18px;
display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; }
.wrap { display:flex; height:calc(640px - 65px - 56px); }
.gallery { width:400px; background:#f9f7f6; display:flex; align-items:center; justify-content:center;
position:relative; border-right:1px solid #e2e0e1; }
.disc { width:230px; height:230px; border-radius:9999px;
background:radial-gradient(circle at 50% 50%, #6b4a3a 0 8px, #4c3527 9px 60px, #383637 61px 120px);
box-shadow:0 18px 40px rgba(56,54,55,0.25); position:relative; }
.disc::after { content:''; position:absolute; top:50%; left:50%; width:22px; height:22px;
background:#f9f7f6; border-radius:9999px; transform:translate(-50%,-50%); }
.swatchbar { position:absolute; bottom:24px; left:0; right:0; display:flex; gap:10px; justify-content:center; }
.sw { width:22px; height:22px; border-radius:9999px; border:2px solid transparent; }
.sw.active { border-color:#383637; box-shadow:0 0 0 2px #f9f7f6 inset; }
.badge-new { position:absolute; top:20px; left:20px; background:#383637; color:#fff;
font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; padding:4px 8px; }
.info { flex:1; padding:30px 36px; display:flex; flex-direction:column; gap:12px; }
.kicker { font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#767374; }
h1 { font-family:'Alternate Gothic No 2','Franklin Gothic Medium',sans-serif; font-size:34px;
font-weight:700; text-transform:uppercase; letter-spacing:0.01em; margin:0; line-height:1.0; }
.sub { font-family:'Source Serif Pro',Georgia,serif; font-size:16px; color:#4c4a4b; margin:0; line-height:1.4; }
.price { font-size:22px; font-weight:700; color:#383637; margin-top:4px; }
.colorlabel { font-size:12px; color:#767374; margin-top:6px; }
.colorlabel b { color:#383637; }
.stars { font-size:12px; color:#383637; }
.stars span { color:#767374; font-weight:600; margin-left:6px; }
.buyrow { display:flex; gap:10px; margin-top:10px; }
.btn-primary { background:#383637; color:#fff; border:none; border-radius:4px;
padding:14px 26px; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:0.08em; }
.btn-secondary { background:#fff; color:#383637; border:1px solid #383637; border-radius:4px;
padding:13px 25px; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:0.08em; }
.chips { display:flex; gap:8px; margin-top:14px; }
.chip { background:#f0eeed; color:#383637; font-size:11px; font-weight:700; text-transform:uppercase;
letter-spacing:0.08em; padding:6px 14px; border-radius:9999px; }
.chip.active { border:1px solid #383637; }
.featbox { margin-top:auto; border-top:1px solid #e2e0e1; padding-top:12px; display:flex; gap:24px; }
.featbox div { font-size:12px; color:#4c4a4b; }
.featbox b { display:block; font-size:13px; color:#383637; font-weight:700; }
footer { height:56px; background:#383637; color:#fff; display:flex; align-items:center;
justify-content:space-between; padding:0 36px; font-size:12px; }
footer span:last-child { color:#a8a6a7; }
</style></head>
<body>
<nav>
<div class="brand">Crosley Radio</div>
<div class="navlinks"><span>Turntables</span><span>Bluetooth</span><span>Accessories</span><span>Lifestyle</span></div>
<div class="navicons"><span>Search</span><span>Account</span><span class="cartdot">2</span></div>
</nav>
<div class="wrap">
<div class="gallery">
<span class="badge-new">New</span>
<div class="disc"></div>
<div class="swatchbar">
<div class="sw" style="background:#7a8b5a"></div>
<div class="sw active" style="background:#6b2f2a"></div>
<div class="sw" style="background:#e4dcc8"></div>
<div class="sw" style="background:#3a3a3a"></div>
</div>
</div>
<div class="info">
<div class="kicker">Cruiser Series</div>
<h1>Cruiser Deluxe Portable Turntable</h1>
<p class="sub">A three-speed suitcase player built for the record shelf and the road — cabinet-first design, catalog-grade craftsmanship.</p>
<div class="price">$99.95</div>
<div class="stars">★★★★☆ <span>4.3 · 812 reviews</span></div>
<div class="colorlabel">Colorway: <b>Burgundy</b></div>
<div class="buyrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Wishlist</button>
</div>
<div class="chips">
<span class="chip active">Turntables</span>
<span class="chip">Stack-O-Matic</span>
<span class="chip">Accessories</span>
</div>
<div class="featbox">
<div><b>Belt-Drive</b>3-speed motor</div>
<div><b>Bluetooth</b>Out to any speaker</div>
<div><b>Built-in</b>Stereo speakers</div>
</div>
</div>
</div>
<footer>
<span>© Crosley Radio</span>
<span>Shop · Support · About · Newsletter</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #181d26;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #181d26;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.35; letter-spacing: 0.12px; margin: 0; color: #181d26; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.25; margin: 0; color: #41454d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; background: #181d26; color: #ffffff;
border: none; border-radius: 12px; padding: 16px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; background: #ffffff; color: #181d26;
border: 1px solid #181d26; border-radius: 12px;
padding: 16px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.25; background: #ffffff; color: #181d26;
border: 1px solid #c5c6c9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #41454d; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dfdfe1; color: #181d26;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#181d26; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #dddddd; }
.brand { font-size:17px; font-weight:600; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#333840; }
.navcta { display:flex; gap:10px; align-items:center; }
.btn-primary { background:#181d26; color:#fff; border-radius:12px; padding:9px 18px; font-size:13px; font-weight:500; }
.btn-outline { background:#fff; color:#181d26; border:1px solid #dddddd; border-radius:12px; padding:9px 18px; font-size:13px; font-weight:500; }
.hero { padding:26px 32px 20px; }
.hero h1 { font-size:34px; font-weight:400; line-height:1.15; margin:0 0 8px; max-width:560px; }
.hero p { font-size:14px; color:#333840; margin:0 0 14px; }
.hero .row { display:flex; gap:10px; }
.coral { margin:0 32px 16px; background:#aa2d00; border-radius:12px; padding:26px 32px; color:#fff;
display:flex; align-items:center; justify-content:space-between; gap:24px; }
.coral .txt h2 { font-size:24px; font-weight:400; margin:0 0 8px; max-width:360px; line-height:1.2; }
.coral .txt p { font-size:13px; opacity:0.9; margin:0 0 12px; max-width:340px; }
.coral .btn-white { background:#fff; color:#181d26; border-radius:12px; padding:8px 16px; font-size:13px; font-weight:500; display:inline-block; }
.coral .art { width:170px; height:100px; border-radius:10px; background:
repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 34px),
repeating-linear-gradient(0deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 22px), #7a2200; }
.demorow { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:0 32px; }
.demo { border-radius:10px; padding:14px; height:112px; display:flex; flex-direction:column; justify-content:space-between; }
.demo .lbl { font-size:12px; font-weight:600; }
.demo .bar { height:6px; border-radius:4px; background:rgba(0,0,0,0.15); }
.demo .bar.b2 { width:60%; }
.d1 { background:#fcab79; }
.d2 { background:#a8d8c4; }
.d3 { background:#f5e9d4; }
.d4 { background:#f4d35e; }
</style></head>
<body>
<nav>
<div class="brand">Airtable</div>
<div class="navlinks"><span>Platform</span><span>Solutions</span><span>Resources</span><span>Pricing</span></div>
<div class="navcta"><span class="btn-outline">Book demo</span><span class="btn-primary">Sign up for free</span></div>
</nav>
<div class="hero">
<h1>Production apps<br>at prototype speed</h1>
<p>Connect your data, build workflows, ship the app your team actually needs.</p>
<div class="row"><span class="btn-primary">Sign up for free</span><span class="btn-outline">Book demo</span></div>
</div>
<div class="coral">
<div class="txt">
<h2>The path to 10× every person in your organization</h2>
<p>Turn spreadsheets of intent into shipped software — no engineering queue required.</p>
<span class="btn-white">See how it works</span>
</div>
<div class="art"></div>
</div>
<div class="demorow">
<div class="demo d1"><span class="lbl">Launch tracker</span><div class="bar"></div><div class="bar b2"></div></div>
<div class="demo d2"><span class="lbl">Content calendar</span><div class="bar"></div><div class="bar b2"></div></div>
<div class="demo d3"><span class="lbl">Product roadmap</span><div class="bar"></div><div class="bar b2"></div></div>
<div class="demo d4"><span class="lbl">Deal pipeline</span><div class="bar"></div><div class="bar b2"></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #226d7a; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #226d7a;
border: 1px solid #226d7a; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #226d7a; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Open Sans', Roboto, Arial, sans-serif; background:#f5f5f5; color:#333333; }
*{box-sizing:border-box;}
.nav{height:64px;background:#226d7a;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:19px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0.5px;}
.navlinks{display:flex;gap:10px;}
.navlinks span{color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:8px 12px;border-radius:4px;}
.navlinks .active{background:rgba(255,255,255,0.15);}
.hero{height:230px;background:linear-gradient(135deg,#226d7a,#22b8d1);display:flex;align-items:center;padding:0 30px;color:#fff;}
.herotext{max-width:420px;}
.headline{font-size:28px;font-weight:700;line-height:1.25;margin-bottom:10px;}
.sub{font-size:15px;margin-bottom:16px;opacity:0.9;}
.btn{display:inline-block;background:#fff;color:#226d7a;font-size:15px;font-weight:600;padding:12px 24px;border-radius:8px;}
.ball{position:absolute;right:70px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e4f5fa,#b0e0e9 70%);box-shadow:0 8px 24px rgba(0,0,0,0.15);}
.ball:before{content:'';position:absolute;top:20px;left:0;right:0;height:2px;background:#226d7a;opacity:0.3;}
.ball:after{content:'';position:absolute;left:20px;top:0;bottom:0;width:2px;background:#226d7a;opacity:0.3;}
.sec{padding:18px 30px;}
.sectitle{font-size:20px;font-weight:600;margin-bottom:14px;border-bottom:2px solid #226d7a;padding-bottom:8px;width:fit-content;}
.grid{display:flex;gap:14px;}
.card{width:210px;background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,0.08);}
.thumb{border-radius:8px;height:110px;margin-bottom:10px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#226d7a;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.badgenew{position:absolute;top:6px;right:6px;background:#22b8d1;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.title{font-size:16px;font-weight:600;}
.price{font-size:16px;font-weight:600;color:#226d7a;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Mikasa Sports</div>
<div class="navlinks"><span class="active">Volleyball</span><span>Soccer</span><span>Basketball</span><span>Training</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="headline">Precision-inflated. Built to last.</div>
<div class="sub">Competition-grade balls engineered for endurance, not hype.</div>
<div class="btn">Shop Volleyballs</div>
</div>
<div class="ball"></div>
</div>
<div class="sec">
<div class="sectitle">Competition Gear</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b0e0e9,#226d7a)"><div class="badgenew">New</div></div><div class="title">V330W Competition Volleyball</div><div class="price">$69.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#22b8d1,#226d7a)"><div class="badge">Volleyball</div></div><div class="title">MVA200 Official Match Ball</div><div class="price">$99.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#226d7a,#b0e0e9)"></div><div class="title">Training Net System</div><div class="price">$149.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c1b1b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c1b1b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #1c1b1b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fc4c03; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #1c1b1b;
border: 1px solid #fc4c03; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1c1b1b;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fc4c03; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Montserrat', 'Nunito Sans', sans-serif; background:#fff; color:#363636; }
*{box-sizing:border-box;}
.nav{height:64px;background:#1c1b1b;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:19px;font-weight:600;color:#fff;text-transform:uppercase;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#fff;text-transform:uppercase;letter-spacing:0.3px;}
.navlinks .active{color:#fc4c03;}
.hero{height:220px;background:#1c1b1b;display:flex;align-items:center;padding:0 30px;color:#fff;}
.reel{width:200px;height:140px;position:relative;margin-right:30px;}
.frame{position:absolute;width:120px;height:80px;border:6px solid #6a6a6a;border-radius:4px;top:20px;left:40px;background:linear-gradient(135deg,#cfcfcf,#6a6a6a);}
.frame:before{content:'';position:absolute;left:-16px;top:0;bottom:0;width:8px;background:repeating-linear-gradient(#111 0 6px,transparent 6px 12px);}
.frame:after{content:'';position:absolute;right:-16px;top:0;bottom:0;width:8px;background:repeating-linear-gradient(#111 0 6px,transparent 6px 12px);}
.herotext{max-width:400px;}
.tag{color:#fc4c03;font-size:12px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:8px;}
.headline{font-size:28px;font-weight:600;line-height:1.25;margin-bottom:10px;}
.btn{display:inline-block;background:#fc4c03;color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:12px 24px;}
.sec{padding:18px 30px;}
.sectitle{font-size:22px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:12px;}
.card{width:150px;background:#fff;border:1px solid #cfcfcf;border-radius:4px;padding:8px;}
.thumb{height:190px;border-radius:4px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#fc4c03;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;}
.title{font-size:14px;font-weight:600;margin-top:8px;line-height:1.3;height:36px;overflow:hidden;}
.price{font-size:15px;font-weight:700;color:#1c1b1b;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Milestone Films</div>
<div class="navlinks"><span class="active">Now Showing</span><span>Collections</span><span>Restorations</span><span>About</span></div>
</div>
<div class="hero">
<div class="reel"><div class="frame"></div></div>
<div class="herotext">
<div class="tag">Now Restoring</div>
<div class="headline">Independent cinema, preserved and playing.</div>
<div class="btn">Explore the Archive</div>
</div>
</div>
<div class="sec">
<div class="sectitle">New Restorations</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#909090,#1c1b1b)"><div class="badge">Sale</div></div><div class="title">The Long Silence (1962) Blu-ray</div><div class="price">$29.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#6a6a6a,#363636)"></div><div class="title">Harbor Light Restored DVD</div><div class="price">$19.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#1c1b1b,#6a6a6a)"><div class="badge">Sale</div></div><div class="title">Rooftop Season Collector's Set</div><div class="price">$44.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#cfcfcf,#6a6a6a)"></div><div class="title">Morning Trains 4K Restoration</div><div class="price">$34.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #242424;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #242424;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #242424; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6d6d6d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0.1px; background: #ea001c; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0.1px; background: #0039a6; color: #ffffff;
border: 1px solid #ea001c; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #242424;
border: 1px solid #b9b9b9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d6d6d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fcdbdf; color: #ea001c;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#242424; box-sizing:border-box;
font-family:'Century Gothic', 'Segoe UI', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; background:#0039a6; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#fff; font-size:18px; font-weight:700; margin:0; letter-spacing:0.2px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#fff; opacity:0.85; font-size:13px; }
.find-buy { display:flex; }
.find-buy input { border:none; height:34px; padding:0 14px; font-size:12px; width:150px; color:#383d46; }
.find-buy .go { background:#ea001c; color:#fff; height:34px; width:34px; display:flex; align-items:center; justify-content:center; font-size:13px; }
main { display:flex; height:582px; }
.stage { width:310px; background:#f1f1f1; display:flex; align-items:center; justify-content:center; }
.sheet { width:150px; height:190px; background:#fff; border:1px solid #b9b9b9; position:relative; box-shadow:0 12px 26px rgba(0,0,0,0.1); }
.label-row { position:absolute; left:14px; right:14px; height:24px; border:1px dashed #0039a6; border-radius:2px; }
.r1 { top:20px; } .r2 { top:52px; } .r3 { top:84px; } .r4 { top:116px; } .r5 { top:148px; }
.info { flex:1; padding:26px 32px; display:flex; flex-direction:column; gap:10px; }
.breadcrumb { font-size:11px; color:#6d6d6d; }
h1 { font-size:22px; font-weight:700; margin:0; }
.sub { font-size:13px; color:#383d46; margin:0; max-width:430px; line-height:1.5; }
.filters { display:flex; gap:8px; }
.chip { border:1px solid #b9b9b9; border-radius:999px; padding:6px 14px; font-size:12px; }
.chip.on { background:#0039a6; color:#fff; border-color:#0039a6; }
.stock-badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#07a200; font-weight:600; width:fit-content; }
.dot-g { width:8px; height:8px; background:#07a200; border-radius:999px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:2px; }
.price { font-size:24px; font-weight:700; color:#ea001c; }
.actions { display:flex; gap:0; margin-top:4px; }
.btn-primary { background:#ea001c; color:#fff; border-radius:2px 0 0 2px; height:44px; padding:0 22px; display:flex;
align-items:center; font-weight:700; font-size:13px; }
.btn-secondary { background:#f7f7f7; border:1px solid #b9b9b9; color:#242424; border-radius:0 2px 2px 0;
height:44px; padding:0 18px; display:flex; align-items:center; font-size:12px; border-left:none; }
</style></head>
<body>
<nav>
<p class="brand">Avery</p>
<div class="navlinks"><span>Labels</span><span>Binders</span><span>Cards</span><span>Design & Print</span></div>
<div class="find-buy"><input placeholder="Find your product"><div class="go">→</div></div>
</nav>
<main>
<div class="stage">
<div class="sheet"><div class="label-row r1"></div><div class="label-row r2"></div><div class="label-row r3"></div><div class="label-row r4"></div><div class="label-row r5"></div></div>
</div>
<div class="info">
<p class="breadcrumb">Labels / Shipping Labels / White Matte</p>
<h1>Avery 5163 Shipping Labels, 2" x 4", 250 Pack</h1>
<p class="sub">Permanent adhesive, laser and inkjet compatible, TrueBlock technology hides previously printed text underneath.</p>
<div class="filters"><div class="chip on">2" x 4"</div><div class="chip">1" x 2.63"</div><div class="chip">3.33" x 4"</div></div>
<span class="stock-badge"><span class="dot-g"></span>In Stock — Ships Today</span>
<div class="price-row"><span class="price">$24.99</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Design Online</div>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #141d28;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #141d28;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #141d28; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #636363; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #00468b; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #00468b;
border: 1px solid #00468b; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #141d28;
border: 1px solid #c4c6c9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #636363; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #0076ce; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#141d28; font-family:Arial,Helvetica,Roboto,sans-serif;
}
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #e0e1e2;}
.logo{font-weight:700;font-size:18px;color:#00468b;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#141d28;}
.hero{background:#141d28;color:#fff;padding:26px 28px;display:flex;gap:24px;align-items:center;}
.hero .text{flex:1;}
.hero h1{font-size:30px;font-weight:700;line-height:1.2;margin:0 0 8px;}
.hero p{font-size:14px;color:#c8c9c7;margin:0 0 14px;max-width:340px;}
.cta{display:inline-block;background:#00468b;color:#fff;font-size:14px;font-weight:700;letter-spacing:.3px;padding:11px 22px;border-radius:4px;}
.hero .img{flex:1;height:130px;border-radius:2px;background:linear-gradient(135deg,#0076ce,#00468b);}
.section{padding:18px 28px 0;}
.section h2{font-size:16px;font-weight:700;margin:0 0 12px;}
.grid{display:flex;gap:14px;}
.card{flex:1;border:1px solid #e0e1e2;padding:14px;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#0076ce;color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;border-radius:2px;}
.card .img{aspect-ratio:4/3;height:90px;margin-bottom:10px;}
.p1{background:linear-gradient(135deg,#444,#0672cb);}
.p2{background:linear-gradient(135deg,#636363,#006bbd);}
.p3{background:linear-gradient(135deg,#141d28,#0e0e0e);}
.card h3{font-size:16px;font-weight:600;margin:0 0 4px;color:#0e0e0e;}
.card .price{font-size:16px;font-weight:700;}
.card .cta-link{color:#00468b;font-size:14px;margin-top:6px;display:block;}
.table{margin-top:14px;background:#f5f6f7;padding:8px 14px;display:flex;font-size:12px;color:#444;font-weight:700;}
.table span{flex:1;}
</style>
<div class="nav">
<div class="logo">Dell</div>
<div class="navlinks"><span>Laptops</span><span>Desktops</span><span>Deals</span><span>Support</span></div>
</div>
<div class="hero">
<div class="text">
<h1>Precision engineered. Enterprise ready.</h1>
<p>Configure the workstation your team actually needs — spec by spec.</p>
<a class="cta">Build Yours</a>
</div>
<div class="img"></div>
</div>
<div class="section">
<h2>Top Deals</h2>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="img p1"></div><h3>XPS 15 Laptop</h3><div class="price">$1,499</div><span class="cta-link">Customize ›</span></div>
<div class="card"><span class="badge">Save $200</span><div class="img p2"></div><h3>Precision 5680</h3><div class="price">$2,199</div><span class="cta-link">Customize ›</span></div>
<div class="card"><div class="img p3"></div><h3>OptiPlex Tower</h3><div class="price">$899</div><span class="cta-link">Customize ›</span></div>
</div>
<div class="table"><span>CPU</span><span>RAM</span><span>Storage</span><span>Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #1990c6; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #1990c6;
border: 1px solid #1990c6; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f5c518; color: #121212;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Function of Beauty</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:Inter,-apple-system,'Segoe UI',Roboto,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid #e8e8e8;}
.logo{font-size:20px;font-weight:600;letter-spacing:-0.3px;}
.navlinks{position:absolute;left:32px;display:flex;gap:22px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0.2px;}
.navlinks span:first-child{color:#1990c6;border-bottom:2px solid #1990c6;padding-bottom:20px;}
.cart{position:absolute;right:32px;font-size:13px;}
.cart-badge{background:#1990c6;color:#fff;border-radius:9999px;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;margin-left:4px;}
.hero{background:#f5f5f5;padding:36px 32px;text-align:center;min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
h1{font-size:28px;font-weight:600;letter-spacing:-0.3px;margin:0 0 10px;max-width:520px;}
.sub{font-size:15px;color:#333;margin:0 0 20px;}
.quizbar{width:340px;height:4px;background:#dedede;border-radius:9999px;margin:0 auto 20px;position:relative;}
.quizfill{position:absolute;left:0;top:0;width:65%;height:100%;background:#1990c6;border-radius:9999px;}
.cta{background:#1990c6;color:#fff;border:none;border-radius:9999px;padding:14px 32px;font-size:16px;font-weight:600;letter-spacing:0.3px;}
.swatches{display:flex;gap:8px;justify-content:center;margin-top:20px;}
.sw{width:32px;height:32px;border-radius:9999px;border:2px solid #dedede;}
.sw.sel{border-color:#1990c6;}
.section{padding:22px 32px 0;}
.section h2{font-size:20px;font-weight:600;margin:0 0 16px;}
.grid{display:flex;gap:16px;}
.card{flex:1;background:#fff;border-radius:12px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.card-img{background:#f5f5f5;border-radius:8px;height:110px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:9999px;}
.badge.custom{background:#1990c6;color:#fff;}
.badge.new{background:#f5c518;color:#121212;}
.card-title{font-size:16px;font-weight:500;margin-top:10px;}
.stars{color:#f5c518;font-size:12px;margin-top:2px;}
.card-price{font-size:16px;font-weight:600;margin-top:4px;}
</style>
<div class="nav">
<div class="navlinks"><span>Build My Formula</span><span>Hair</span><span>Body</span><span>Skin</span></div>
<div class="logo">Function OF Beauty</div>
<div class="cart">Cart <span class="cart-badge">2</span></div>
</div>
<div class="hero">
<h1>Custom hair care, made just for you</h1>
<p class="sub">Answer a few questions. We formulate a shampoo, conditioner and treatment matched to your hair.</p>
<div class="quizbar"><div class="quizfill"></div></div>
<button class="cta">Start Your Quiz</button>
<div class="swatches">
<div class="sw" style="background:#f2e9d8;"></div>
<div class="sw sel" style="background:#e8c9a0;"></div>
<div class="sw" style="background:#a86b3f;"></div>
<div class="sw" style="background:#4a2e1f;"></div>
</div>
</div>
<div class="section">
<h2>Your custom formula, personalized for hair type</h2>
<div class="grid">
<div class="card"><div class="card-img"><div class="badge custom">Custom</div></div><div class="card-title">Shampoo, Custom Formula</div><div class="stars">★★★★★ 4.8</div><div class="card-price">$21.99</div></div>
<div class="card"><div class="card-img"><div class="badge new">New</div></div><div class="card-title">Conditioner, Custom Formula</div><div class="stars">★★★★★ 4.7</div><div class="card-price">$21.99</div></div>
<div class="card"><div class="card-img"><div class="badge custom">Custom</div></div><div class="card-title">Hair Mask, Custom Formula</div><div class="stars">★★★★☆ 4.5</div><div class="card-price">$29.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #002244; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #002244; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8796a5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1414ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #002244; color: #ffffff;
border: 1px solid #1414ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #002244; color: #f5f5f5;
border: 1px solid #274460; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8796a5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #032062; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A1424; color:#E9EEF6; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.passcol { width:400px; padding:30px; display:flex; align-items:center; }
.pass { width:100%; background:#111E33; border-radius:16px; border:1px solid #243652; overflow:hidden; box-shadow:rgba(0,0,0,0.45) 0 4px 14px; }
.passhead { background:#002244; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; }
.globe { width:16px; height:16px; border-radius:50%; border:2px solid #fff; display:inline-block; margin-right:6px; }
.uword { font-weight:800; font-size:13px; }
.premier { color:#D8B863; font-size:11px; font-weight:700; }
.passbody { padding:16px 18px; }
.plabel { font-size:10px; letter-spacing:0.6px; color:#97A6BE; text-transform:uppercase; }
.pname { font-size:18px; font-weight:700; text-transform:uppercase; margin-top:2px; }
.datagrid { display:flex; margin-top:16px; }
.dcell { flex:1; }
.dval { font-size:22px; font-weight:800; margin-top:2px; }
.dval.gold { color:#D8B863; }
.perf { margin:16px 0; height:1px; border-top:1px dashed #243652; position:relative; }
.perf::before, .perf::after { content:''; position:absolute; top:-6px; width:12px; height:12px; border-radius:50%; background:#0A1424; }
.perf::before { left:-18px; } .perf::after { right:-18px; }
.barcode { height:44px; background:repeating-linear-gradient(90deg,#E9EEF6 0 2px, transparent 2px 5px); border-radius:4px; }
.main { flex:1; padding:30px 34px; }
.flightheader { background:linear-gradient(160deg,#002244,#04152C); border-radius:14px; padding:16px 20px; }
.eyebrow { font-size:11px; letter-spacing:1px; color:#7FA0CE; text-transform:uppercase; }
.routerow { display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.iata { font-size:32px; font-weight:800; }
.city { font-size:12px; color:#9FBADC; }
.midinfo { text-align:center; font-size:12px; color:#CFE0F2; }
.timesrow { display:flex; justify-content:space-between; margin-top:12px; font-size:13px; font-weight:600; color:#CFE0F2; }
.seatmap { margin-top:20px; }
.smhead { font-size:15px; font-weight:700; }
.smsub { font-size:12px; color:#97A6BE; margin:4px 0 10px; }
.cabin { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; max-width:340px; }
.seat { height:26px; border-radius:6px 6px 3px 3px; background:#1A2A45; border:1px solid #243652; }
.seat.plus { background:rgba(20,20,255,0.18); border:1px solid rgba(74,74,255,0.4); }
.seat.taken { background:#0A1424; }
.seat.sel { background:#1414FF; box-shadow:0 0 0 2px #4A4AFF; }
.aisle { background:transparent; border:none; }
</style></head>
<body>
<div class="app">
<div class="passcol">
<div class="pass">
<div class="passhead"><div><span class="globe"></span><span class="uword">United (iOS)</span></div><div class="premier">PREMIER · GROUP 1</div></div>
<div class="passbody">
<div class="plabel">PASSENGER</div>
<div class="pname">J SMITH</div>
<div class="datagrid">
<div class="dcell"><div class="plabel">Gate</div><div class="dval">F12</div></div>
<div class="dcell"><div class="plabel">Seat</div><div class="dval">7A</div></div>
<div class="dcell"><div class="plabel">Boards</div><div class="dval gold">7:35A</div></div>
</div>
<div class="perf"></div>
<div class="barcode"></div>
</div>
</div>
</div>
<div class="main">
<div class="flightheader">
<div class="eyebrow">UA 482 · BOEING 777</div>
<div class="routerow">
<div><div class="iata">SFO</div><div class="city">San Francisco</div></div>
<div class="midinfo">✈<br>5h 32m</div>
<div style="text-align:right"><div class="iata">EWR</div><div class="city">Newark</div></div>
</div>
<div class="timesrow"><span>8:05 AM · Gate F12</span><span>4:37 PM · Term C</span></div>
</div>
<div class="seatmap">
<div class="smhead">Choose your seat</div>
<div class="smsub">Economy Plus · Row 7–9 · 7A selected</div>
<div class="cabin">
<div class="seat plus"></div><div class="seat plus"></div><div class="seat sel"></div><div class="aisle"></div><div class="seat plus"></div><div class="seat plus"></div><div class="seat plus"></div>
<div class="seat"></div><div class="seat taken"></div><div class="seat"></div><div class="aisle"></div><div class="seat"></div><div class="seat"></div><div class="seat taken"></div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b0f1f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b0f1f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c8e95; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0048ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0f1f; color: #0048ff;
border: 1px solid #0048ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b0f1f; color: #f5f5f5;
border: 1px solid #303441; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8e95; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #091843; color: #0048ff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0B0F1F; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { position:relative; width:960px; height:640px; background:#0B0F1F; }
.miniplayer { position:absolute; top:0; left:0; right:0; height:150px;
background:linear-gradient(135deg,#0048FF 0%, #00C2FF 60%, #0B0F1F 130%); overflow:hidden; }
.livechip { position:absolute; top:12px; left:14px; background:rgba(0,0,0,0.4); border-radius:999px;
padding:4px 10px; display:flex; align-items:center; gap:6px; }
.livedot { width:7px; height:7px; border-radius:50%; background:#FF3B5C; }
.livechip span.lbl { color:#fff; font-size:10px; font-weight:800; letter-spacing:0.05em; }
.mpbottom { position:absolute; left:14px; bottom:10px; right:14px; }
.mpchannel { color:#00C2FF; font-size:11px; font-weight:700; margin:0 0 4px; }
.mptitle { color:#fff; font-size:18px; font-weight:800; margin:0 0 8px; }
.mptrack { height:3px; background:rgba(255,255,255,0.2); border-radius:2px; }
.mpfill { height:3px; background:#FFE100; border-radius:2px; width:41%; }
.brandtag { position:absolute; top:12px; right:14px; color:#fff; font-size:13px; font-weight:800; letter-spacing:0.02em; }
.pillstrip { position:absolute; top:150px; left:0; right:0; height:40px; display:flex; align-items:center;
gap:8px; padding:0 14px; background:#0B0F1F; }
.pill { border-radius:999px; padding:6px 12px; font-size:11px; font-weight:700; color:#9DA8C7; background:#1C2440; }
.pill.active { background:#0048FF; color:#fff; }
.timebar { position:absolute; top:190px; left:86px; right:0; height:26px; background:#0B0F1F;
border-bottom:0.5px solid #2A3556; display:flex; align-items:center; }
.tlabel { width:218px; font-size:10px; font-weight:700; color:#6B7595; padding-left:10px; flex-shrink:0; }
.chcolhead { position:absolute; top:190px; left:0; width:86px; height:26px; background:#0B0F1F; }
.grid { position:absolute; top:216px; left:0; right:0; bottom:54px; overflow:hidden; }
.row { height:64px; display:flex; border-bottom:0.5px solid #2A3556; }
.chcol { width:86px; flex-shrink:0; background:#141A2E; border-right:0.5px solid #2A3556;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.chnum { font-size:10px; font-weight:800; color:#6B7595; }
.chlogo { width:40px; height:28px; border-radius:5px; display:flex; align-items:center; justify-content:center;
font-size:9px; font-weight:800; color:#fff; }
.lg1 { background:linear-gradient(135deg,#0048FF,#00C2FF); }
.lg2 { background:linear-gradient(135deg,#FF6B2C,#FF2C6B); }
.lg3 { background:linear-gradient(135deg,#21D07A,#00A6A6); }
.lg4 { background:linear-gradient(135deg,#7E57C2,#0048FF); }
.lg5 { background:linear-gradient(135deg,#FFE100,#FF6B2C); }
.timeline { flex:1; display:flex; }
.cell { width:218px; flex-shrink:0; border-right:1px solid #0B0F1F; background:#141A2E; padding:8px 10px;
display:flex; flex-direction:column; justify-content:center; gap:3px; }
.cell .t { font-size:13px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0; }
.cell .m { font-size:12px; font-weight:500; color:#6B7595; margin:0; }
.cell.now { background:#1C2440; border-left:3px solid #FFE100; }
.tabbar { position:absolute; left:0; right:0; bottom:0; height:54px; background:rgba(11,15,31,0.96);
border-top:0.5px solid #2A3556; display:flex; align-items:center; justify-content:space-around; }
.tab { display:flex; flex-direction:column; align-items:center; gap:3px; }
.tab .ic { font-size:19px; color:#6B7595; }
.tab .lb { font-size:10px; font-weight:600; color:#6B7595; }
.tab.active .ic, .tab.active .lb { color:#FFE100; }
</style></head>
<body>
<div class="app">
<div class="miniplayer">
<div class="livechip"><span class="livedot"></span><span class="lbl">LIVE</span></div>
<div class="brandtag">Pluto TV (iOS)</div>
<div class="mpbottom">
<p class="mpchannel">CH 612 · PLUTO TV ACTION</p>
<p class="mptitle">Nightwatch Protocol</p>
<div class="mptrack"><div class="mpfill"></div></div>
</div>
</div>
<div class="pillstrip">
<span class="pill active">All</span><span class="pill">Featured</span><span class="pill">Movies</span>
<span class="pill">News</span><span class="pill">Sports</span><span class="pill">Comedy</span>
</div>
<div class="chcolhead"></div>
<div class="timebar">
<span class="tlabel">9:00 PM</span><span class="tlabel">9:30 PM</span><span class="tlabel">10:00 PM</span><span class="tlabel">10:30 PM</span>
</div>
<div class="grid">
<div class="row">
<div class="chcol"><span class="chnum">612</span><div class="chlogo lg1">ACT</div></div>
<div class="timeline">
<div class="cell now"><p class="t">Nightwatch Protocol</p><p class="m">9:00 - 10:00 PM</p></div>
<div class="cell"><p class="t">Nightwatch Protocol</p><p class="m">9:00 - 10:00 PM</p></div>
<div class="cell"><p class="t">Signal Loss</p><p class="m">10:00 - 11:00 PM</p></div>
<div class="cell"><p class="t">Signal Loss</p><p class="m">10:00 - 11:00 PM</p></div>
</div>
</div>
<div class="row">
<div class="chcol"><span class="chnum">705</span><div class="chlogo lg2">MOV</div></div>
<div class="timeline">
<div class="cell"><p class="t">The Long Reel</p><p class="m">8:30 - 10:30 PM</p></div>
<div class="cell now"><p class="t">The Long Reel</p><p class="m">8:30 - 10:30 PM</p></div>
<div class="cell now"><p class="t">The Long Reel</p><p class="m">8:30 - 10:30 PM</p></div>
<div class="cell"><p class="t">Midnight Feature</p><p class="m">10:30 PM</p></div>
</div>
</div>
<div class="row">
<div class="chcol"><span class="chnum">318</span><div class="chlogo lg3">SPT</div></div>
<div class="timeline">
<div class="cell"><p class="t">Full Court Replay</p><p class="m">9:00 - 9:30 PM</p></div>
<div class="cell"><p class="t">League Highlights</p><p class="m">9:30 - 10:00 PM</p></div>
<div class="cell now"><p class="t">League Highlights</p><p class="m">9:30 - 10:00 PM</p></div>
<div class="cell"><p class="t">Overtime Show</p><p class="m">10:00 - 11:00 PM</p></div>
</div>
</div>
<div class="row">
<div class="chcol"><span class="chnum">140</span><div class="chlogo lg4">CMD</div></div>
<div class="timeline">
<div class="cell"><p class="t">Stand-Up Hour</p><p class="m">9:00 - 9:30 PM</p></div>
<div class="cell"><p class="t">Stand-Up Hour</p><p class="m">9:00 - 9:30 PM</p></div>
<div class="cell"><p class="t">Sketch Vault</p><p class="m">9:30 - 10:30 PM</p></div>
<div class="cell"><p class="t">Sketch Vault</p><p class="m">9:30 - 10:30 PM</p></div>
</div>
</div>
<div class="row">
<div class="chcol"><span class="chnum">201</span><div class="chlogo lg5">NWS</div></div>
<div class="timeline">
<div class="cell"><p class="t">Evening Report</p><p class="m">9:00 - 10:00 PM</p></div>
<div class="cell"><p class="t">Evening Report</p><p class="m">9:00 - 10:00 PM</p></div>
<div class="cell"><p class="t">World Desk</p><p class="m">10:00 - 11:00 PM</p></div>
<div class="cell"><p class="t">World Desk</p><p class="m">10:00 - 11:00 PM</p></div>
</div>
</div>
</div>
<div class="tabbar">
<div class="tab active"><span class="ic">📺</span><span class="lb">LIVE TV</span></div>
<div class="tab"><span class="ic">🎥</span><span class="lb">ON DEMAND</span></div>
<div class="tab"><span class="ic">🔍</span><span class="lb">SEARCH</span></div>
<div class="tab"><span class="ic">★</span><span class="lb">MY PLUTO</span></div>
<div class="tab"><span class="ic">👤</span><span class="lb">ACCOUNT</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0066ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0066ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b5fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6600; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0066ff; color: #ffffff;
border: 1px solid #ff6600; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0066ff; color: #f5f5f5;
border: 1px solid #277dfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b5fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2966d6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#171719; box-sizing:border-box;
font-family:"Pretendard Variable", -apple-system, sans-serif; }
* { box-sizing:border-box; }
header { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; }
.brand { font-size:18px; font-weight:700; color:#ff6600; margin:0; }
.navlinks { display:flex; gap:8px; }
.navlinks span { font-size:14px; color:#171719; padding:7px 14px; border-radius:8px; }
.auth { color:#0066ff; font-size:14px; padding:7px 14px; }
.search-btn { width:32px; height:32px; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-size:16px; color:#171719; }
.mapwrap { position:relative; height:520px; background:
linear-gradient(#eef0f2 1px, transparent 1px) 0 0/40px 40px,
linear-gradient(90deg,#eef0f2 1px, transparent 1px) 0 0/40px 40px,
#f7f8f9; }
.station-chip { position:absolute; font-size:22px; color:#171719; background:rgba(255,255,255,0.9); border-radius:10px; padding:7px 9px 7px 11px; }
.s1 { top:40px; left:80px; } .s2 { top:200px; left:340px; } .s3 { top:120px; right:120px; }
.rail { position:absolute; top:16px; left:16px; width:320px; display:flex; flex-direction:column; gap:10px; }
.listing-card { background:#ffffff; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.08); padding:12px; display:flex; gap:10px; }
.thumb { width:76px; height:76px; border-radius:8px; flex:none; }
.lc-body { display:flex; flex-direction:column; gap:2px; flex:1; }
.lc-price { font-size:16px; font-weight:700; color:#171719; }
.lc-meta { font-size:12px; color:#333333; }
.bookmark { margin-left:auto; width:24px; height:24px; border-radius:50%; color:#333333; font-size:14px; display:flex; align-items:center; justify-content:center; }
.paginator { position:absolute; bottom:16px; right:16px; display:flex; }
.pg { width:32px; height:32px; background:#ffffff; box-shadow:0 1px 4px rgba(0,0,0,0.1); display:flex; align-items:center; justify-content:center; font-size:14px; color:#333333; }
.pg.prev { border-radius:10px 0 0 10px; }
.pg.next { border-radius:0 10px 10px 0; color:rgba(55,56,60,0.28); }
footer { height:40px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; font-size:11px; color:#333333; }
</style></head>
<body>
<header>
<p class="brand">Zigbang</p>
<div class="navlinks"><span>Buy</span><span>Rent</span><span>New Build</span><span>Business Service</span></div>
<div style="display:flex;align-items:center;gap:6px;"><span class="auth">Sign Up / Log In</span><span class="search-btn">⌕</span></div>
</header>
<div class="mapwrap">
<span class="station-chip s1">Central Station</span>
<span class="station-chip s2">Riverside Ave</span>
<span class="station-chip s3">Market St</span>
<div class="rail">
<div class="listing-card">
<span class="thumb" style="background:linear-gradient(160deg,#dce9f7,#a9c9ec);"></span>
<div class="lc-body"><span class="lc-price">$1,850 / mo</span><span class="lc-meta">2 bed · 4th fl · Central Station</span></div>
<span class="bookmark">♡</span>
</div>
<div class="listing-card">
<span class="thumb" style="background:linear-gradient(160deg,#e5e0d5,#c9bfa3);"></span>
<div class="lc-body"><span class="lc-price">$2,400 / mo</span><span class="lc-meta">3 bed · 12th fl · Riverside Ave</span></div>
<span class="bookmark">♥</span>
</div>
<div class="listing-card">
<span class="thumb" style="background:linear-gradient(160deg,#dde7dc,#a9c5a3);"></span>
<div class="lc-body"><span class="lc-price">$1,200 / mo</span><span class="lc-meta">1 bed · 2nd fl · Market St</span></div>
<span class="bookmark">♡</span>
</div>
</div>
<div class="paginator"><span class="pg prev">‹</span><span class="pg next">›</span></div>
</div>
<footer>
<span>© Zigbang</span>
<span>Zigbang · Buy · Rent · Business Service</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #131313; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #131313; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8f8f8f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3cffd0; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #131313; color: #3cffd0;
border: 1px solid #3cffd0; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #131313; color: #f5f5f5;
border: 1px solid #373737; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f8f8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1a3931; color: #3cffd0;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#131313; color:#ffffff; box-sizing:border-box;
font-family:"Arial Narrow", Impact, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
nav { height:50px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
border-bottom:1px solid #ffffff; }
.wordmark { font-size:26px; font-weight:900; letter-spacing:-0.5px; text-transform:uppercase; color:#ffffff; }
.navlinks { display:flex; gap:20px; }
.navlinks span { font-family:-apple-system,Arial,sans-serif; font-size:12px; font-weight:600; color:#949494; text-transform:uppercase; letter-spacing:.04em; }
.navlinks span.on { color:#3cffd0; }
.masthead { padding:26px 28px 14px; }
.masthead h1 { font-size:74px; line-height:.92; font-weight:900; margin:0; letter-spacing:-1px;
text-transform:uppercase; color:#ffffff; }
.masthead .sub { font-family:-apple-system,Arial,sans-serif; font-size:13px; color:#949494; margin-top:8px; }
.stream { position:relative; padding:6px 28px 20px 54px; display:flex; flex-direction:column; gap:14px; }
.rule { position:absolute; left:36px; top:0; bottom:0; width:0; border-left:2px dashed #3d00bf; }
.tile { position:relative; border-radius:26px; border:1px solid #ffffff; padding:16px 20px; min-height:56px;
display:flex; align-items:center; justify-content:space-between; }
.tile .ts { position:absolute; left:-54px; top:50%; transform:translateY(-50%); font-size:10px; letter-spacing:.06em;
color:#949494; text-transform:uppercase; width:44px; text-align:right; }
.tile h3 { font-family:-apple-system,Arial,sans-serif; font-size:17px; font-weight:800; margin:0; line-height:1.15; max-width:640px; }
.tile .cat { font-family:-apple-system,Arial,sans-serif; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
.t-mint { background:#3cffd0; border-color:#309875; color:#131313; }
.t-mint h3 { color:#131313; }
.t-ultra { background:#5200ff; border-color:#3d00bf; color:#ffffff; opacity:.98; }
.t-slate { background:#2d2d2d; border-color:#313131; color:#ffffff; }
.t-white { background:#ffffff; border-color:#ffffff; color:#131313; }
.t-white h3 { color:#000000; }
.arrow { font-size:20px; }
</style></head>
<body>
<nav>
<div class="wordmark">The Verge</div>
<div class="navlinks"><span class="on">Tech</span><span>Reviews</span><span>Science</span><span>Ai</span><span>Video</span></div>
</nav>
<div class="masthead">
<h1>The Verge</h1>
<div class="sub">Technology, science, art, and culture — covered like a control panel.</div>
</div>
<div class="stream">
<div class="rule"></div>
<div class="tile t-mint"><div><span class="ts mono">09:41</span><span class="cat">Ai</span><h3>The chatbot wars just got a new front line</h3></div><span class="arrow">→</span></div>
<div class="tile t-slate"><div><span class="ts mono">08:14</span><span class="cat">Reviews</span><h3>We tested the phone nobody asked for. It's kind of great.</h3></div><span class="arrow">→</span></div>
<div class="tile t-ultra"><div><span class="ts mono">07:02</span><span class="cat">Science</span><h3>A satellite the size of a shoebox just changed forecasting</h3></div><span class="arrow">→</span></div>
<div class="tile t-white"><div><span class="ts mono">06:30</span><span class="cat">Policy</span><h3>Congress is arguing about chips again</h3></div><span class="arrow">→</span></div>
<div class="tile t-slate"><div><span class="ts mono">05:55</span><span class="cat">Video</span><h3>Inside the factory that builds the internet's routers</h3></div><span class="arrow">→</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -0.25px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #4945ff; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f7f7f7; color: #222222;
border: 1px solid #4945ff; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f7f7f7; color: #222222;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f1ff3b; color: #222222;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f7f7; font-family:'Unica77LLWeb',-apple-system,system-ui,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #eeeeee;}
.logo{font-family:Georgia,serif;font-size:22px;font-weight:400;letter-spacing:-.5px;color:#222222;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;}
.hero{height:250px;display:flex;align-items:center;padding:0 32px;gap:30px;}
.herotext{width:44%;}
.herotext h1{font-family:Georgia,serif;font-size:44px;font-weight:400;margin:0 0 14px;line-height:1.08;letter-spacing:-1.5px;}
.herotext p{font-size:14px;color:#6a6a6a;margin:0 0 18px;max-width:300px;}
.cta{display:inline-block;background:#4945ff;color:#fff;font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:14px 28px;border-radius:8px;}
.bikeart{flex:1;height:180px;position:relative;}
.wheel{position:absolute;width:70px;height:70px;border-radius:50%;border:5px solid #222222;bottom:10px;}
.wheel1{left:20%;} .wheel2{right:20%;}
.frame{position:absolute;left:28%;right:28%;top:70px;height:5px;background:#4945ff;}
.grid{display:flex;gap:16px;padding:20px 32px 0;}
.card{width:206px;background:#fff;border-radius:12px;padding:16px;}
.thumb{height:100px;border-radius:8px;margin-bottom:10px;position:relative;}
.status{position:absolute;top:8px;right:8px;background:#f1ff3b;color:#222;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;border-radius:4px;padding:2px 8px;}
.ptitle{font-size:16px;font-weight:600;}
.pprice{font-size:16px;font-weight:600;margin-top:6px;}
.mono{font-family:Consolas,monospace;font-size:12px;color:#6a6a6a;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:48px;background:#222222;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:13px;color:#9e9e9e;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Vanmoof</div>
<div class="navlinks"><div>Bikes</div><div>Accessories</div><div>App</div><div>Support</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Built for the city that never waits.</h1>
<p>Electric bikes engineered like instruments, unlocked with a single tap.</p>
<div class="cta">Book a Test Ride</div>
</div>
<div class="bikeart">
<div class="wheel wheel1"></div>
<div class="wheel wheel2"></div>
<div class="frame"></div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#f3f4f6"><div class="status">In Stock</div></div><div class="ptitle">S5 City Bike</div><div class="pprice">$2,798</div><div class="mono">RANGE 37mi · KICK-LOCK</div></div>
<div class="card"><div class="thumb" style="background:#f3f4f6"></div><div class="ptitle">A5 Electric Bike</div><div class="pprice">$3,398</div><div class="mono">RANGE 37mi · AUTO-SHIFT</div></div>
<div class="card"><div class="thumb" style="background:#f3f4f6"></div><div class="ptitle">Anti-Theft Bundle</div><div class="pprice">$249</div><div class="mono">GPS · ALARM SYSTEM</div></div>
</div>
<div class="footer"><span>© Electric Bikes for the City</span><span>App · Warranty · Service</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { position:relative; height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#000000; }
.brand { font-size:15px; font-weight:400; letter-spacing:0.1em; text-transform:uppercase; color:#ffffff; margin:0; }
.navlinks { display:flex; gap:26px; font-size:9px; letter-spacing:0.04em; color:#ffffff; opacity:0.85; }
.search-pill { background:rgba(255,255,255,0.16); border-radius:45px; height:30px; padding:0 18px;
color:#ffffff; font-size:9px; display:flex; align-items:center; }
.btn-white { background:#ffffff; color:#000000; border:1px solid #ffffff; border-radius:30px;
padding:8px 18px; font-size:9px; font-weight:350; white-space:nowrap; }
.hero { position:relative; height:280px; background:linear-gradient(160deg,#0f0c13 0%,#000000 70%);
display:flex; align-items:flex-end; padding:36px 40px; overflow:hidden; }
.hero::before { content:''; position:absolute; right:-60px; top:-40px; width:320px; height:320px;
border-radius:9999px; background:radial-gradient(circle at 30% 30%, #94bbff 0%, #002a57 75%); opacity:0.9; }
.hero::after { content:''; position:absolute; left:-40px; bottom:-90px; width:220px; height:220px;
border-radius:9999px; background:#71a0ff; opacity:0.35; }
.hero-inner { position:relative; z-index:2; }
.hero h1 { font-size:56px; font-weight:250; letter-spacing:-3.2px; line-height:0.98; color:#ffffff; margin:0 0 10px; }
.hero p { font-size:13px; color:rgba(255,255,255,0.6); margin:0; max-width:420px; }
.bands { display:flex; height:296px; }
.band { flex:1; padding:26px 26px; display:flex; flex-direction:column; gap:10px; }
.band-white { background:#ffffff; border-right:1px solid #cccccc; }
.band-periwinkle { background:#94bbff; color:#000000; }
.band-sage { background:#9fb08b; color:#000000; }
.band .eyebrow { font-size:9px; letter-spacing:0.05em; text-transform:uppercase; opacity:0.6; }
.band h3 { font-size:26px; font-weight:250; letter-spacing:-1px; margin:6px 0; line-height:1.05; }
.band p { font-size:12px; line-height:1.5; margin:0; opacity:0.85; max-width:220px; }
.stat { font-size:40px; font-weight:250; letter-spacing:-1.6px; margin-top:auto; }
.stat-label { font-size:10px; opacity:0.6; }
.card-mini { border:1px solid #cccccc; border-radius:20px; padding:14px; display:flex; gap:10px; align-items:center; }
.avatar { width:34px; height:34px; border-radius:9999px; background:#71a0ff; flex-shrink:0; }
.card-mini .name { font-size:12px; font-weight:400; }
.card-mini .sub { font-size:10px; color:#999999; }
.pill-btn { background:#000000; color:#ffffff; border-radius:30px; padding:9px 16px; font-size:9px;
font-weight:350; align-self:flex-start; }
footer { height:0; }
</style></head>
<body>
<nav>
<p class="brand">Patreon</p>
<div class="navlinks"><span>Creators</span><span>Features</span><span>Pricing</span><span>Resources</span></div>
<div style="display:flex; gap:10px; align-items:center;">
<span class="search-pill">Find a Creator</span>
<button class="btn-white">Get Started</button>
</div>
</nav>
<section class="hero">
<div class="hero-inner">
<h1>Where podcasts grow</h1>
<p>Start your Patreon for free — membership built for the work you actually make.</p>
</div>
</section>
<section class="bands">
<div class="band band-white">
<span class="eyebrow">Feature</span>
<h3 style="color:#1a1a1a;">Complete creative control</h3>
<p style="color:#3a3a3a;">Set your own tiers, pricing, and posting cadence — no algorithm decides your reach.</p>
<div class="stat" style="color:#1a1a1a;">10%</div>
<div class="stat-label" style="color:#999999;">of what fans give, kept simple</div>
</div>
<div class="band band-periwinkle">
<span class="eyebrow">Community</span>
<h3>Made by people who like color</h3>
<div class="card-mini" style="background:#ffffff;">
<div class="avatar"></div>
<div>
<div class="name">Jamie Lee</div>
<div class="sub">Illustrator · 3 tiers</div>
</div>
</div>
<button class="pill-btn">Get started</button>
</div>
<div class="band band-sage">
<span class="eyebrow">Pricing</span>
<h3>Earning made easy</h3>
<p>Secure payments handled for you. We handle taxes. No setup headaches.</p>
<button class="pill-btn">See plans</button>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2f2f2f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2f2f2f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #2f2f2f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #efc01d; color: #2f2f2f;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #006799;
border: 1px solid #efc01d; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2f2f2f;
border: 1px solid #cbcbcb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cc1818; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Furnish Me Vintage</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Open Sans',-apple-system,'Helvetica Neue',Arial,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d9d9d9;}
.logo{font-size:19px;font-weight:700;color:#2f2f2f;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;}
.icons{font-size:13px;color:#555;}
.hero{background:#f4f4f4;padding:30px 32px;min-height:200px;position:relative;display:flex;align-items:center;}
.scrim-content{max-width:440px;}
h1{font-size:36px;font-weight:700;line-height:1.2;letter-spacing:-0.5px;margin:0 0 10px;}
.sub{font-size:15px;color:#555;margin:0 0 18px;}
.btnrow{display:flex;gap:12px;}
.btn-gold{background:#efc01d;color:#2f2f2f;border:none;border-radius:8px;padding:12px 28px;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.btn-blue{background:#006799;color:#fff;border:none;border-radius:8px;padding:12px 28px;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.chips{display:flex;gap:8px;padding:16px 32px;}
.chip{background:#f4f4f4;border:1px solid #d9d9d9;border-radius:9999px;padding:6px 14px;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#555;}
.chip.active{background:#efc01d;color:#2f2f2f;border:none;}
.section{padding:6px 32px 0;}
.heading{font-size:22px;font-weight:600;margin:0 0 4px;position:relative;display:inline-block;padding-bottom:8px;}
.heading::after{content:'';position:absolute;bottom:0;left:0;width:48px;height:3px;background:#efc01d;}
.grid{display:flex;gap:16px;margin-top:16px;}
.card{flex:1;background:#f3f3f3;border:1px solid #d9d9d9;border-radius:8px;padding:16px;}
.card-img{background:#dadada;border-radius:6px;height:100px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:4px 8px;border-radius:4px;color:#fff;}
.badge.new{background:#efc01d;color:#2f2f2f;}
.badge.sold{background:#cc1818;}
.card-title{font-size:16px;font-weight:600;margin-top:12px;}
.card-meta{font-size:13px;color:#555;margin-top:2px;}
.card-price{font-size:20px;font-weight:700;margin-top:8px;}
</style>
<div class="nav">
<div class="logo">Furnish ME Vintage</div>
<div class="navlinks"><span>Seating</span><span>Tables</span><span>Lighting</span><span>Storage</span></div>
<div class="icons">Search Cart</div>
</div>
<div class="hero">
<div class="scrim-content">
<h1>Mid-century pieces,<br>found and restored</h1>
<p class="sub">Danish teak, Scandinavian design, and American studio furniture — each piece inspected and ready for your home.</p>
<div class="btnrow"><button class="btn-gold">Shop Now</button><button class="btn-blue">Make an Inquiry</button></div>
</div>
</div>
<div class="chips">
<div class="chip active">Mid-Century Modern</div><div class="chip">Danish Teak</div><div class="chip">Studio Craft</div><div class="chip">Lighting</div>
</div>
<div class="section">
<div class="heading">Recently Added</div>
<div class="grid">
<div class="card"><div class="card-img"><div class="badge new">New</div></div><div class="card-title">Danish Teak Credenza</div><div class="card-meta">Denmark, c. 1965</div><div class="card-price">$2,450</div></div>
<div class="card"><div class="card-img"><div class="badge sold">Sold</div></div><div class="card-title">Wegner Lounge Chair</div><div class="card-meta">Denmark, c. 1958</div><div class="card-price">$1,895</div></div>
<div class="card"><div class="card-img"></div><div class="card-title">Walnut Dining Table</div><div class="card-meta">USA, c. 1962</div><div class="card-price">$1,650</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fff5ed; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fff5ed; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7c8d8f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #859eab; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #fff5ed; color: #1a1a1a;
border: 1px solid #859eab; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6beb8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c8d8f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #859eab; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fff5ed; color:#1a1a1a; box-sizing:border-box;
font-family:'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #e4e9e9; background:#fff5ed; }
.brand { font-size:19px; font-weight:600; letter-spacing:-0.4px; margin:0; }
.navlinks { display:flex; gap:26px; font-size:15px; font-weight:500; color:#241f21; opacity:0.75; }
.btn-primary { background:#859eab; color:#fff; border:none; border-radius:8px; padding:11px 22px;
font-weight:600; font-size:14px; letter-spacing:0.3px; }
.hero { display:flex; align-items:center; gap:36px; padding:26px 36px; }
.hero-copy { flex:1.1; }
.kicker { display:inline-block; background:#668796; color:#fff; font-size:11px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; padding:4px 10px; border-radius:4px; margin-bottom:12px; }
.hero h1 { font-size:32px; font-weight:600; line-height:1.15; letter-spacing:-0.5px; margin:0 0 10px; }
.hero p { font-size:14px; color:#241f21; opacity:0.75; line-height:1.5; margin:0 0 16px; max-width:380px; }
.rating { display:flex; align-items:center; gap:6px; font-size:13px; color:#7c8d8f; margin-bottom:16px; }
.stars { color:#d39e00; letter-spacing:1px; }
.row { display:flex; gap:10px; }
.btn-secondary { background:#fff5ed; color:#1a1a1a; border:2px solid #dae0e5; border-radius:8px;
padding:10px 21px; font-weight:600; font-size:14px; }
.hero-visual { flex:1; height:280px; border-radius:20px; position:relative; overflow:hidden;
background:linear-gradient(155deg,#859eab 0%,#668796 55%,#3f5560 100%); }
.hero-visual::before { content:''; position:absolute; width:200px; height:200px; border-radius:24px;
background:rgba(255,255,255,0.08); top:-50px; right:-40px; transform:rotate(18deg); }
.hero-visual::after { content:''; position:absolute; width:120px; height:340px; border-radius:60px;
background:rgba(255,255,255,0.14); left:70px; bottom:-40px; transform:rotate(8deg); }
.badge-mil { position:absolute; bottom:16px; left:16px; background:rgba(26,26,26,0.55); color:#fff;
font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; padding:5px 10px; border-radius:4px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:6px 36px 20px; }
.card { background:#fff; border-radius:12px; padding:14px; position:relative; }
.card .imgbox { height:78px; border-radius:8px; background:#f2f2f2; margin-bottom:10px; position:relative; overflow:hidden; }
.card .imgbox::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,#859eab22,#668796 130%); opacity:0.5; }
.tagnew { position:absolute; top:8px; left:8px; background:#1e7e34; color:#fff; font-size:10px; font-weight:700;
letter-spacing:0.3px; text-transform:uppercase; padding:2px 7px; border-radius:4px; }
.card h3 { font-size:14px; font-weight:600; margin:0 0 3px; }
.card .price { font-size:14px; font-weight:700; color:#668796; }
.card .old { font-size:12px; color:#a8b8ba; text-decoration:line-through; margin-left:6px; }
footer { border-top:1px solid #e4e9e9; padding:12px 36px; display:flex; justify-content:space-between;
align-items:center; font-size:12px; color:#7c8d8f; background:#f2f2f2; }
</style></head>
<body>
<nav>
<p class="brand">Bodyguardz</p>
<div class="navlinks"><span>Phone Cases</span><span>Screen Protectors</span><span>Warranty</span></div>
<button class="btn-primary">Get Protected</button>
</nav>
<section class="hero">
<div class="hero-copy">
<span class="kicker">Military-Grade Drop Test</span>
<h1>Protection that doesn't get in the way</h1>
<p>Impact-tested cases and glass screen protectors, engineered so your phone survives the drop and your case still looks good.</p>
<div class="rating"><span class="stars">★★★★★</span> 4.8 · 12,406 reviews</div>
<div class="row">
<button class="btn-primary">Shop Cases</button>
<button class="btn-secondary">Compare Models</button>
</div>
</div>
<div class="hero-visual"><span class="badge-mil">Drop-Tested 12ft</span></div>
</section>
<section class="grid">
<div class="card"><div class="imgbox"><span class="tagnew">New</span></div><h3>Ace Pro Case</h3><div class="price">$39.99</div></div>
<div class="card"><div class="imgbox"></div><h3>UltraTough Glass</h3><div class="price">$29.99<span class="old">$44.99</span></div></div>
<div class="card"><div class="imgbox"></div><h3>MagSafe Wallet Case</h3><div class="price">$44.99</div></div>
</section>
<footer>
<span>© Bodyguardz</span>
<span>Free shipping over $35 · Lifetime warranty</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #778385; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f6b700; color: #222222;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #222222;
border: 1px solid #f6b700; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #778385; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f6b700; color: #222222;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#ffffff; color:#333c3e; box-sizing:border-box; font-family:'Obvia',sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#ffffff; border-bottom:1px solid #d6d6d6; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#222222; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; color:#333c3e; }
.navlinks span.active { color:#f6b700; }
.cart-badge { background:#f6b700; color:#222222; border-radius:8px; padding:8px 18px; font-size:12px; font-weight:700; }
.hero { background:#1f1f1f; color:#fff; height:130px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; right:0; top:0; bottom:0; width:220px; background:linear-gradient(160deg,#e4002b,#0069b1); opacity:0.3; }
.hero h1 { font-size:26px; font-weight:700; margin:0; letter-spacing:0.3px; position:relative; }
.hero p { font-size:12px; color:#969696; margin:4px 0 0; position:relative; }
.hero-cta { background:#f6b700; color:#222222; border:none; border-radius:8px; padding:10px 24px; font-weight:700; font-size:13px; position:relative; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:14px 32px; }
.card { background:#fff; border:1px solid #e0e0e0; border-radius:8px; overflow:hidden; }
.card-img { height:110px; position:relative; display:flex; align-items:center; justify-content:center; }
.card:nth-child(1) .card-img { background:#333c3e; }
.card:nth-child(2) .card-img { background:#778385; }
.card:nth-child(3) .card-img { background:#0069b1; }
.card:nth-child(4) .card-img { background:#e4002b; }
.figure { width:44px; height:70px; background:rgba(255,255,255,0.4); border-radius:6px; }
.badge-sale { position:absolute; top:8px; left:8px; background:#e4002b; color:#fff; font-size:9px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:2px; }
.badge-preorder { position:absolute; top:8px; left:8px; background:#0069b1; color:#fff; font-size:9px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:2px; }
.card-body { padding:10px 12px; }
.card-body h3 { font-size:13px; font-weight:700; margin:0 0 4px; text-transform:uppercase; }
.card-body .price { font-size:14px; font-weight:600; color:#222222; }
.card-body .price-old { font-size:11px; color:#969696; text-decoration:line-through; margin-left:6px; }
footer { position:absolute; bottom:0; left:0; right:0; background:#1f1f1f; color:#fff; padding:12px 32px; display:flex; justify-content:space-between; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Bandai Namco Store</p>
<div class="navlinks"><span class="active">Dragon Ball</span><span>One Piece</span><span>Elden Ring</span><span>Gundam</span></div>
<div class="cart-badge">🛒 3</div>
</nav>
<div class="hero">
<div><h1>Elden Ring Collector's Line</h1><p>Statues, apparel, and figures from the Lands Between</p></div>
<button class="hero-cta">Shop the Drop</button>
</div>
<div class="grid">
<div class="card">
<div class="card-img"><span class="badge-preorder">Pre-Order</span><div class="figure"></div></div>
<div class="card-body"><h3>Malenia Figure</h3><span class="price">$189.99</span></div>
</div>
<div class="card">
<div class="card-img"><div class="figure"></div></div>
<div class="card-body"><h3>Goku Ultra Instinct</h3><span class="price">$79.99</span></div>
</div>
<div class="card">
<div class="card-img"><span class="badge-sale">Sale</span><div class="figure"></div></div>
<div class="card-body"><h3>Luffy Gear 5 Statue</h3><span class="price">$64.99</span><span class="price-old">$89.99</span></div>
</div>
<div class="card">
<div class="card-img"><div class="figure"></div></div>
<div class="card-body"><h3>RX-78-2 Gunpla Kit</h3><span class="price">$54.99</span></div>
</div>
</div>
<footer>
<span>© Bandai Namco Store</span>
<span>Bandai Namco Store · Franchises · Support · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ede1d4; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ede1d4; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7d766f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #0e5540; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ede1d4; color: #121212;
border: 1px solid #0e5540; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #b6ada4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7d766f; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f4a620; color: #121212;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{
width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;
background:#ede1d4;font-family:'Times','Times New Roman',serif;
color:#322659;
}
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.logo{font-family:'CooperBT','Times New Roman',serif;font-weight:700;font-size:22px;color:#0e5540;}
.navlinks{display:flex;gap:22px;}
.navlinks span{font-size:13px;color:#322659;}
.cartbtn{background:#243d94;color:#fff;font-size:12px;font-weight:700;padding:9px 18px;border-radius:9999px;}
.hero{padding:12px 28px 18px;display:flex;gap:26px;align-items:center;}
.heroText{flex:1.15;}
.heroText .kick{color:#f4a620;font-weight:700;font-size:12px;letter-spacing:0.5px;margin-bottom:8px;}
.heroText h1{font-family:'CooperBT','Times New Roman',serif;font-size:32px;font-weight:700;color:#0e5540;line-height:1.15;margin:0 0 10px;}
.heroText p{font-size:14px;color:#322659;margin:0 0 16px;max-width:400px;}
.heroBtn{display:inline-block;background:#0e5540;color:#fff;font-size:13px;font-weight:700;padding:12px 28px;border-radius:9999px;}
.heroPot{flex:1;height:150px;display:flex;align-items:center;justify-content:center;}
.pot{width:120px;height:90px;background:linear-gradient(160deg,#f4a620,#0e5540 60%);border-radius:20px 20px 40px 40px;position:relative;}
.pot::before{content:"";position:absolute;top:-14px;left:10px;right:10px;height:20px;background:#0e5540;border-radius:20px;}
.handle{position:absolute;top:8px;left:-16px;width:16px;height:36px;border:6px solid #243d94;border-right:none;border-radius:20px 0 0 20px;}
.handle2{position:absolute;top:8px;right:-16px;width:16px;height:36px;border:6px solid #243d94;border-left:none;border-radius:0 20px 20px 0;}
.section{padding:8px 28px 0;}
.sectitle{font-size:15px;font-weight:700;color:#0e5540;margin:0 0 10px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{background:#f7f7f7;border-radius:8px;overflow:hidden;}
.photo{aspect-ratio:1/1;background:linear-gradient(150deg,#fdf6ec,#ede1d4);position:relative;}
.photo .pot2{position:absolute;bottom:16%;left:50%;transform:translateX(-50%);width:60%;height:48%;border-radius:14px 14px 26px 26px;}
.c1 .pot2{background:linear-gradient(160deg,#f4a620,#0e5540 65%);}
.c2 .pot2{background:linear-gradient(160deg,#243d94,#322659 65%);}
.c3 .pot2{background:linear-gradient(160deg,#df95a1,#bc004b 65%);}
.c4 .pot2{background:linear-gradient(160deg,#0e5540,#0a5640 65%);}
.salebadge{position:absolute;top:6px;left:6px;background:#f4a620;color:#322659;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:9999px;}
.ctitle{font-size:13px;font-weight:700;color:#322659;padding:8px 10px 0;}
.cprice{font-size:13px;font-weight:700;color:#0e5540;padding:2px 10px 10px;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#0e5540;color:#ede1d4;font-size:11px;padding:10px 28px;display:flex;justify-content:space-between;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Great Jones</div>
<div class="navlinks"><span>Cookware</span><span>Bakeware</span><span>Bundles</span><span>Gifts</span></div>
<div class="cartbtn">Cart (1)</div>
</div>
<div class="hero">
<div class="heroText">
<div class="kick">Free Shipping On Orders $95+</div>
<h1>Cookware that makes the kitchen feel like yours.</h1>
<p>Colorful, ceramic-coated, and built to actually get used — no fussy care instructions required.</p>
<div class="heroBtn">Shop The Dutchess</div>
</div>
<div class="heroPot"><div class="pot"><div class="handle"></div><div class="handle2"></div></div></div>
</div>
<div class="section">
<div class="sectitle">Bestselling Pieces</div>
<div class="grid">
<div class="card c1"><div class="photo"><div class="salebadge">Sale</div><div class="pot2"></div></div><div class="ctitle">The Dutchess 5.5qt</div><div class="cprice">$145.00</div></div>
<div class="card c2"><div class="photo"><div class="pot2"></div></div><div class="ctitle">The Holy Sheet Pan</div><div class="cprice">$45.00</div></div>
<div class="card c3"><div class="photo"><div class="pot2"></div></div><div class="ctitle">The Big Deal Skillet</div><div class="cprice">$95.00</div></div>
<div class="card c4"><div class="photo"><div class="salebadge">Sale</div><div class="pot2"></div></div><div class="ctitle">The Sunny Braiser</div><div class="cprice">$110.00</div></div>
</div>
</div>
<div class="footer"><span>© Great Jones</span><span>Dishwasher-safe · Oven-safe to 500°</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eaeaea; color: #31373d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eaeaea; color: #31373d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.35; margin: 0; color: #31373d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; margin: 0; color: #8a8a8a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #e9be33; color: #31373d;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #eaeaea; color: #31373d;
border: 1px solid #e9be33; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #31373d;
border: 1px solid #bcbdbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #479ccf; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#eaeaea; font-family:Arial,'Helvetica Neue',sans-serif; color:#6c6c6c; }
*{box-sizing:border-box;}
.nav{height:64px;background:#eaeaea;border-bottom:1px solid #cccccc;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#31373d;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#8a8a8a;}
.navlinks span:first-child{color:#e9be33;}
.hero{background:#e9be33;padding:34px 32px;color:#31373d;}
.h1{font-size:24px;font-weight:600;margin:0 0 8px;max-width:420px;line-height:1.35;}
.sub{font-size:15px;margin:0;max-width:400px;}
.grid{display:flex;gap:16px;padding:20px 32px 0;}
.card{width:210px;background:#fff;border-radius:12px;padding:12px;position:relative;}
.thumb{aspect-ratio:1/1;background:#f5f5f5;border-radius:8px;margin-bottom:8px;}
.catbadge{position:absolute;top:20px;left:20px;background:#479ccf;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:4px 8px;border-radius:4px;}
.salebadge{position:absolute;top:20px;right:20px;background:#e9be33;color:#31373d;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:4px 8px;border-radius:4px;}
.ptitle{font-size:16px;font-weight:500;color:#31373d;margin-top:2px;}
.pprice{font-size:15px;font-weight:600;color:#31373d;margin-top:4px;}
.pprice.sale{color:#c0392b;}
.footer{position:absolute;bottom:0;left:0;right:0;height:48px;background:#31373d;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#eaeaea;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mdesign</div>
<div class="navlinks"><span>Closet</span><span>Kitchen</span><span>Bath</span><span>Storage</span></div>
</div>
<div class="hero">
<div class="h1">Everything Has a Place. Everything Fits.</div>
<div class="sub">Bright, orderly storage solutions built for every closet, shelf, and drawer.</div>
</div>
<div class="grid">
<div class="card"><div class="catbadge">Closet</div><div class="thumb"></div><div class="ptitle">Stackable Storage Bins, Set of 3</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="salebadge">Sale</div><div class="thumb"></div><div class="ptitle">Over-Door Organizer Rack</div><div class="pprice sale">$18.99</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Drawer Divider Tray Set</div><div class="pprice">$14.99</div></div>
</div>
<div class="footer"><span>© mDesign Home Organization</span><span>Support · Returns · Newsletter</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#F5F5F5; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topnav { height:44px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid #222222; }
.at { font-size:24px; font-weight:700; }
.feed { width:560px; margin:0 auto; padding:8px 0; }
.post { display:flex; gap:12px; padding:16px 20px 12px; border-bottom:1px solid #222222; position:relative; }
.avwrap { display:flex; flex-direction:column; align-items:center; }
.av { width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px; }
.tline { width:1px; flex:1; background:#333333; margin-top:6px; }
.pbody { flex:1; }
.prow { display:flex; align-items:baseline; gap:6px; }
.pname { font-weight:600; font-size:15px; }
.ptime { color:#777777; font-size:14px; }
.ptext { font-size:15px; line-height:1.4; margin:4px 0 10px; }
.actions { display:flex; gap:20px; color:#777777; font-size:18px; }
.actions .liked { color:#FE2C55; }
.cnt { font-size:12px; color:#777777; margin-left:4px; }
.reply { margin-left:48px; padding-left:12px; border-left:2px solid #333333; margin-top:8px; }
.reply .prow { }
.reply .pname { font-size:13px; }
.reply .ptext { font-size:14px; }
.compose { position:absolute; right:40px; bottom:26px; width:52px; height:52px; border-radius:50%; background:#F5F5F5; color:#000; display:flex; align-items:center; justify-content:center; font-size:24px; }
</style></head>
<body>
<div class="topnav"><div class="at">@</div></div>
<div class="feed">
<div class="post">
<div class="avwrap"><div class="av" style="background:#405DE6">JD</div><div class="tline"></div></div>
<div class="pbody">
<div class="prow"><span class="pname">jamie.codes</span><span class="ptime">· 2h</span></div>
<div class="ptext">shipped the new onboarding for Threads (iOS) today — feels so much calmer now. thread below 🧵</div>
<div class="actions"><span class="liked">♥</span><span class="cnt">248</span><span>💬</span><span class="cnt">31</span><span>⟲</span><span class="cnt">9</span><span>↗</span></div>
<div class="reply">
<div class="prow"><span class="pname">reneeb</span><span class="ptime">· 1h</span></div>
<div class="ptext">this is such a good change, the old flow was rough</div>
<div class="actions"><span>♡</span><span class="cnt">12</span><span>💬</span><span class="cnt">2</span></div>
</div>
</div>
</div>
<div class="post">
<div class="avwrap"><div class="av" style="background:#833AB4">KL</div></div>
<div class="pbody">
<div class="prow"><span class="pname">kalel.m</span><span class="ptime">· 4h</span></div>
<div class="ptext">no hashtags, no trending panel, just people talking. this is what I wanted from the internet</div>
<div class="actions"><span>♡</span><span class="cnt">1.2K</span><span>💬</span><span class="cnt">87</span><span>⟲</span><span class="cnt">44</span><span>↗</span></div>
</div>
</div>
</div>
<div class="compose">+</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 400; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.0; letter-spacing: 1.2px; background: #313131; color: #ffffff;
border: none; border-radius: 0px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.0; letter-spacing: 1.2px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 0px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 2px; background: #b8965a; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,'Segoe UI',Arial,sans-serif; color:#4a4a4a; }
*{box-sizing:border-box;}
.announce{height:32px;background:#313131;color:#fff;font-size:11px;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e0e0e0;}
.logo{font-family:Georgia,serif;font-size:19px;color:#313131;}
.navlinks{display:flex;gap:26px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#313131;}
.util{font-size:16px;color:#313131;}
.hero{height:280px;position:relative;display:flex;align-items:center;padding:0 48px;overflow:hidden;background:linear-gradient(120deg,#313131,#5a5a5a 70%);}
.hero:before{content:'';position:absolute;right:0;top:0;bottom:0;width:46%;background:linear-gradient(160deg,#b8965a,#313131 80%);}
.herotext{position:relative;z-index:2;max-width:420px;}
.herotext .eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#b8965a;margin-bottom:12px;}
.herotext h1{font-family:Georgia,serif;font-size:44px;font-weight:300;color:#fff;margin:0 0 16px;line-height:1.15;}
.herocta{display:inline-block;background:#fff;color:#313131;font-size:13px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;padding:16px 32px;}
.grid{display:flex;gap:22px;padding:24px 48px 0;}
.card{width:200px;}
.thumb{height:190px;background:#f5f3f0;margin-bottom:8px;}
.ptitle{font-size:16px;font-weight:500;color:#313131;margin-bottom:3px;}
.pprice{font-size:14px;color:#4a4a4a;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#313131;display:flex;align-items:center;justify-content:space-between;padding:0 48px;}
.footer span{color:#e0e0e0;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">MEMBERS SAVE 15% ON FURNITURE — JOIN SOHO HOME+</div>
<div class="nav">
<div class="logo">Soho Home</div>
<div class="navlinks"><span>Furniture</span><span>Lighting</span><span>Tableware</span><span>Membership</span></div>
<div class="util">◍ ⚲</div>
</div>
<div class="hero">
<div class="herotext">
<div class="eyebrow">New Season</div>
<h1>Interiors with a members-club edge.</h1>
<div class="herocta">Shop The Edit</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#313131,#f5f3f0)"></div><div class="ptitle">Cecconi Bouclé Sofa</div><div class="pprice">£2,450</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b8965a,#f5f3f0)"></div><div class="ptitle">Marlowe Table Lamp</div><div class="pprice">£195</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#767676,#f5f3f0)"></div><div class="ptitle">Farrah Dinner Set</div><div class="pprice">£145</div></div>
</div>
<div class="footer"><span>© Soho Home</span><span>Members+ · Trade Programme</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #003399; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #ffffff; color: #003399;
border: 1px solid #003399; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #32373c;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#32373c; box-sizing:border-box;
font-family:'Roboto', Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
.hero { height:200px; background:#000000; position:relative; overflow:hidden; display:flex;
align-items:center; padding:0 34px; gap:30px; }
.hero::before { content:''; position:absolute; inset:0;
background:radial-gradient(circle at 85% 20%, rgba(0,51,153,0.55), transparent 55%); }
.hero .navrow { position:absolute; top:0; left:0; right:0; height:56px; display:flex; align-items:center;
justify-content:space-between; padding:0 34px; border-bottom:1px solid rgba(255,255,255,0.1); }
.logo { position:relative; z-index:2; font-size:16px; font-weight:600; color:#fff; letter-spacing:0.2px; }
.navlinks { position:relative; z-index:2; display:flex; gap:20px; font-size:14px; color:rgba(255,255,255,0.65); }
.heroshot { position:relative; z-index:2; width:220px; height:130px; margin-top:40px; border-radius:16px;
background:linear-gradient(150deg,#0693e3,#003399 65%,#000 120%); flex-shrink:0; }
.herotext { position:relative; z-index:2; margin-top:40px; }
.badge-new { display:inline-block; background:#00d084; color:#fff; font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:0.5px; border-radius:4px; padding:2px 8px; margin-bottom:8px; }
.hero h1 { font-size:28px; font-weight:700; color:#fff; margin:0 0 6px; letter-spacing:-0.3px; }
.hero .sub { font-size:16px; color:rgba(255,255,255,0.7); }
.body { display:flex; padding:18px 34px 0; gap:30px; height:210px; }
.spec-table { flex:1.1; border-collapse:collapse; width:100%; }
.spec-table tr { border-bottom:1px solid #ededed; }
.spec-table td { padding:8px 16px 8px 0; font-size:14px; }
.spec-table td:first-child { font-size:12px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase;
color:#555555; width:150px; }
.spec-table td .tip { display:inline-block; width:14px; height:14px; border-radius:9999px; background:#222;
color:#fff; font-size:10px; text-align:center; line-height:14px; margin-left:6px; }
.buy-col { width:230px; display:flex; flex-direction:column; }
.price { font-size:24px; font-weight:600; color:#222; margin-bottom:4px; }
.badge-spec { display:inline-block; background:#f7f7f7; color:#555555; font-size:11px; border-radius:9999px;
padding:4px 12px; margin-bottom:14px; width:fit-content; }
.btn-primary { background:#003399; color:#fff; border:none; border-radius:8px; height:48px; font-size:16px; font-weight:600; margin-bottom:8px; }
.btn-secondary { background:#fff; color:#003399; border:2px solid #003399; border-radius:8px; height:48px; font-size:16px; font-weight:600; }
.accordion { padding:8px 34px 0; }
.acc-item { border-bottom:1px solid #ededed; padding:10px 0; display:flex; justify-content:space-between; align-items:center; }
.acc-item .h { font-size:16px; font-weight:600; color:#222; }
.acc-item .chev { color:#003399; font-size:14px; }
footer { height:60px; background:#000000; color:#848484; display:flex; align-items:center;
justify-content:space-between; padding:0 34px; font-size:14px; }
footer b { color:#fff; }
</style></head>
<body>
<div class="hero">
<div class="navrow">
<div class="logo">Caldigit Docking 2</div>
<div class="navlinks"><span>Docks</span><span>Hubs</span><span>Adapters</span><span>Support</span></div>
</div>
<div class="heroshot"></div>
<div class="herotext">
<span class="badge-new">New</span>
<h1>Thunderbolt 4 Dual 4K Docking Station</h1>
<div class="sub">One cable. Two 4K displays. 98W of power.</div>
</div>
</div>
<div class="body">
<table class="spec-table">
<tr><td>Ports</td><td>15 total, dual DisplayPort 1.4<span class="tip">i</span></td></tr>
<tr><td>Charging</td><td>98W USB-C host charging</td></tr>
<tr><td>Data Speed</td><td>40Gbps Thunderbolt 4 throughput</td></tr>
<tr><td>Compatibility</td><td>Mac & Windows Thunderbolt / USB4 hosts</td></tr>
</table>
<div class="buy-col">
<span class="badge-spec">Thunderbolt 4 Certified</span>
<div class="price">$329.00</div>
<div style="font-size:13px;color:#848484;margin-bottom:14px;">In stock — ships in 1–2 days</div>
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Save for Later</button>
</div>
</div>
<div class="accordion">
<div class="acc-item"><span class="h">Will this work with my laptop?</span><span class="chev">+</span></div>
<div class="acc-item"><span class="h">What's included in the box?</span><span class="chev">+</span></div>
</div>
<footer>
<span>© Caldigit Docking 2</span>
<span><b>3-Year Warranty</b> · Engineered in California</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #0A0A0A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #0A0A0A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #0A0A0A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6B7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #00BD4F; color: #FFFFFF;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: transparent; color: #00BD4F;
border: 1px solid #00BD4F; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #F4F4F5; color: #0A0A0A;
border: 1px solid #c2c2c2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 1.5px; background: #dbf6e6; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,'Segoe UI',Arial,sans-serif; color:#1c1c1c; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#080808;}
.logo{font-size:19px;font-weight:700;color:#fff;letter-spacing:.3px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;color:#9ca3af;}
.navlinks .on{color:#00bd4f;}
.stage{height:270px;background:#080808;display:flex;align-items:center;padding:0 60px;position:relative;}
.stext{width:44%;}
.stext .k{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#00bd4f;margin-bottom:14px;}
.stext h1{font-size:40px;font-weight:700;color:#fff;margin:0 0 14px;line-height:1.1;}
.stext p{font-size:13.5px;color:#9ca3af;margin:0 0 20px;max-width:320px;line-height:1.5;}
.btn{width:fit-content;background:#00bd4f;color:#fff;font-size:13px;font-weight:700;padding:12px 24px;border-radius:6px;}
.drive{position:absolute;right:100px;top:80px;width:120px;height:110px;border-radius:8px;background:linear-gradient(160deg,#232323,#0a0a0a);box-shadow:0 0 40px rgba(0,189,79,.25);}
.drive:before{content:'';position:absolute;left:14px;top:14px;width:20px;height:20px;border-radius:50%;background:#00bd4f;}
.sec{padding:20px 36px 0;background:#fff;}
.seclabel{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#6b7280;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:150px;background:#f4f4f5;border-radius:8px;padding:10px;}
.thumb{height:76px;border-radius:6px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:600;color:#0a0a0a;height:30px;overflow:hidden;line-height:1.3;}
.tag{font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;display:inline-block;margin-bottom:4px;}
.price{font-size:13px;font-weight:700;color:#00bd4f;margin-top:2px;}
</style>
<div class="nav">
<div class="logo">Seagate</div>
<div class="navlinks"><div class="on">IronWolf</div><div>FireCuda</div><div>Exos</div><div>Barracuda</div></div>
</div>
<div class="stage">
<div class="stext">
<div class="k">FireCuda 530 NVMe</div>
<h1>Storage for what comes next.</h1>
<p>Enterprise-grade drives engineered for the workloads that don't wait.</p>
<div class="btn">Shop NVMe Drives</div>
</div>
<div class="drive"></div>
</div>
<div class="sec">
<div class="seclabel">Shop By Product Line</div>
<div class="grid">
<div class="card"><span class="tag" style="background:#e8fbf0;color:#00b8a2;">IronWolf</span><div class="thumb" style="background:linear-gradient(140deg,#00b8a2,#0a0a0a)"></div><div class="pname">IronWolf Pro 8TB NAS Drive</div><div class="price">$219.99</div></div>
<div class="card"><span class="tag" style="background:#fef3e2;color:#f59e0b;">FireCuda</span><div class="thumb" style="background:linear-gradient(140deg,#f59e0b,#0a0a0a)"></div><div class="pname">FireCuda 530 2TB NVMe SSD</div><div class="price">$179.99</div></div>
<div class="card"><span class="tag" style="background:#e9f0fe;color:#3b82f6;">Exos</span><div class="thumb" style="background:linear-gradient(140deg,#3b82f6,#0a0a0a)"></div><div class="pname">Exos X20 20TB Enterprise Drive</div><div class="price">$389.99</div></div>
<div class="card"><span class="tag" style="background:#f2ecfd;color:#8b5cf6;">Barracuda</span><div class="thumb" style="background:linear-gradient(140deg,#8b5cf6,#0a0a0a)"></div><div class="pname">Barracuda 4TB Desktop HDD</div><div class="price">$89.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5452; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5452; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f5f5; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5452; color: #f5f5f5;
border: 1px solid #f5f5f5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5452; color: #f5f5f5;
border: 1px solid #fd6e6c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fd6e6c; color: #f5f5f5;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:Pretendard, -apple-system, sans-serif; }
* { box-sizing:border-box; }
.accbar { background:#31313b; color:#fff; height:22px; display:flex; align-items:center; padding:0 26px; font-size:10px; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 26px; }
.brand { font-size:20px; font-weight:800; color:#ff5452; }
.search { flex:1; max-width:340px; margin:0 20px; border:1px solid #cfcfcf; height:34px; display:flex; align-items:center; padding:0 12px; font-size:12px; color:#777; }
.navlinks { display:flex; gap:14px; font-size:12px; font-weight:500; }
.pillrow { display:flex; gap:8px; padding:12px 26px 0; }
.pill { border-radius:24px; padding:0 16px; height:40px; display:flex; align-items:center; font-size:14px; color:#777; }
.pill.on { background:#222222; color:#fff; font-weight:700; }
.subtabs { display:flex; padding:8px 26px 0; border-bottom:1px solid #e5e5e5; }
.sub { height:36px; display:flex; align-items:center; padding:0 12px; font-size:13px; color:#666; }
.sub.on { background:#222; color:#fff; font-weight:700; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:16px 26px 0; }
.pcard { border:1px solid #e5e5e5; }
.pimg { height:96px; background:linear-gradient(135deg,#f0f0f0,#dcdcdc); position:relative; }
.dbadge { position:absolute; top:6px; left:6px; background:#ff5452; color:#fff; font-size:10px; font-weight:500; padding:2px 6px; }
.pinfo { padding:10px; }
.pinfo .lbl { background:#f5f5f5; color:#222; font-size:9.5px; padding:2px 5px; display:inline-block; margin-bottom:5px; }
.pinfo h4 { font-size:12px; margin:0 0 4px; font-weight:400; }
.pinfo .price { font-size:15px; font-weight:600; }
footer { position:absolute; bottom:0; width:960px; padding:12px 26px; display:flex; justify-content:space-between;
font-size:11px; color:#777; border-top:1px solid #e5e5e5; }
</style></head>
<body>
<div class="accbar">SSG.COM Quick Access Services</div>
<nav>
<p class="brand">SSG.COM</p>
<div class="search">Enter a search term</div>
<div class="navlinks"><span>Log In</span><span>Sign Up</span><span>Customer Center</span></div>
</nav>
<div class="pillrow">
<span class="pill on">Today's Picks</span><span class="pill">Special Deals</span><span class="pill">Closing Sale</span><span class="pill">Dept. Store Sale</span>
</div>
<div class="subtabs">
<span class="sub on">Fashion</span><span class="sub">Beauty</span><span class="sub">Luxury</span><span class="sub">Appliances</span><span class="sub">Food</span>
</div>
<div class="grid">
<div class="pcard"><div class="pimg"><span class="dbadge">30%</span></div><div class="pinfo"><span class="lbl">Free Shipping</span><h4>Spring New Knit Cardigan</h4><div class="price">$39.00</div></div></div>
<div class="pcard"><div class="pimg"><span class="dbadge">15%</span></div><div class="pinfo"><span class="lbl">Ships Today</span><h4>Minimal Leather Tote Bag</h4><div class="price">$128.00</div></div></div>
<div class="pcard"><div class="pimg"></div><div class="pinfo"><span class="lbl">Free Shipping</span><h4>Moisture Cream Set</h4><div class="price">$45.00</div></div></div>
<div class="pcard"><div class="pimg"><span class="dbadge">20%</span></div><div class="pinfo"><span class="lbl">Ships Today</span><h4>Wireless Earbuds</h4><div class="price">$89.00</div></div></div>
</div>
<footer>
<span>The joy of shopping with confidence, SSG.COM</span>
<span>Where to next? · Customer Center · Terms of Service</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fa114f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fa114f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #92e82a; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fa114f; color: #92e82a;
border: 1px solid #92e82a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fa114f; color: #f5f5f5;
border: 1px solid #f9356a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e93349; color: #92e82a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; background:#000000; border-bottom:1px solid #1C1C1E; }
.brand { font-size:15px; font-weight:800; letter-spacing:-0.3px; margin:0; color:#FFFFFF; }
.navlinks { display:flex; gap:22px; font-size:12px; font-weight:600; color:#98989F; }
.navlinks span.on { color:#FF375F; }
.avatar { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#2C2C2E,#3A3A3C); }
.wrap { display:flex; height:584px; }
/* left: summary column with rings + tiles */
.summary { width:520px; padding:18px 28px 0; border-right:1px solid #1C1C1E; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; color:#FF375F; margin:0; }
.date { font-size:26px; font-weight:800; letter-spacing:-0.6px; margin:2px 0 14px; }
.ringcard { background:#1C1C1E; border-radius:18px; padding:18px 20px; display:flex; align-items:center; gap:24px; }
.rings { position:relative; width:132px; height:132px; flex:0 0 auto; }
.ring { position:absolute; border-radius:50%; }
.track { position:absolute; border-radius:50%; }
/* Move outer */
.ring.move { inset:0; background:conic-gradient(#FA114F 0deg 298deg, transparent 298deg 360deg); filter:drop-shadow(0 0 6px rgba(250,17,79,0.55)); }
.track.move { inset:0; background:radial-gradient(closest-side, #000 79%, transparent 80% 81%, rgba(250,17,79,0.22) 82%); }
/* Exercise middle */
.ring.exercise { inset:16px; background:conic-gradient(#92E82A 0deg 228deg, transparent 228deg 360deg); filter:drop-shadow(0 0 5px rgba(146,232,42,0.55)); }
.track.exercise { inset:16px; background:radial-gradient(closest-side, #000 76%, transparent 77% 78%, rgba(146,232,42,0.22) 79%); }
/* Stand inner */
.ring.stand { inset:32px; background:conic-gradient(#1EE4E1 0deg 270deg, transparent 270deg 360deg); filter:drop-shadow(0 0 5px rgba(30,228,225,0.55)); }
.track.stand { inset:32px; background:radial-gradient(closest-side, #000 74%, transparent 75% 76%, rgba(30,228,225,0.22) 77%); }
.legend { display:flex; flex-direction:column; gap:10px; }
.lrow { display:flex; align-items:baseline; gap:8px; }
.llabel { font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; width:66px; }
.llabel.move { color:#FF375F; } .llabel.exercise { color:#92E82A; } .llabel.stand { color:#1EE4E1; }
.lval { font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; }
.lgoal { font-size:11px; font-weight:600; color:#EBEBF599; }
.tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.tile { background:#1C1C1E; border-radius:14px; padding:11px 12px; }
.tile .trow { display:flex; align-items:center; gap:5px; margin-bottom:6px; }
.dot { width:8px; height:8px; border-radius:50%; }
.tile .tlabel { font-size:10.5px; font-weight:600; color:#EBEBF599; }
.tile .tval { font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
.tile .tsub { font-size:9.5px; color:#EBEBF54D; margin-top:2px; }
/* right: Fitness+ shelf */
.plus { width:440px; padding:18px 24px; }
.sechead { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.sechead h2 { font-size:19px; font-weight:800; margin:0; letter-spacing:-0.3px; }
.seeall { font-size:12px; font-weight:600; color:#FF375F; }
.fpgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fpcard { border-radius:14px; overflow:hidden; background:#1C1C1E; }
.fpart { height:110px; position:relative; }
.fpart.a { background:linear-gradient(160deg,#FF375F,#7A0F2C); }
.fpart.b { background:linear-gradient(160deg,#66FF00,#2E6600); }
.fpart.c { background:linear-gradient(160deg,#00F0FF,#0B5C5B); }
.fpart.d { background:linear-gradient(160deg,#C969E0,#4E1F5A); }
.fpbadge { position:absolute; top:8px; left:8px; background:rgba(0,0,0,0.4); backdrop-filter:blur(6px);
font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; padding:3px 7px; border-radius:5px; }
.fpplay { position:absolute; bottom:8px; left:8px; width:26px; height:26px; border-radius:50%;
background:rgba(255,255,255,0.22); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; }
.fpplay::before { content:''; border-left:8px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent; margin-left:2px; }
.fpbody { padding:8px 10px 10px; }
.fptype { font-size:9px; font-weight:700; text-transform:uppercase; color:#FF375F; letter-spacing:0.3px; }
.fptitle { font-size:12.5px; font-weight:600; margin:3px 0 2px; }
.fpmeta { font-size:10.5px; color:#EBEBF599; }
.startbtn { margin-top:14px; width:100%; background:#FA114F; color:#fff; border-radius:14px;
padding:11px; text-align:center; font-size:13.5px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Apple Fitness (iOS)</p>
<div class="navlinks"><span class="on">Summary</span><span>Fitness+</span><span>Sharing</span></div>
<div class="avatar"></div>
</nav>
<div class="wrap">
<section class="summary">
<p class="eyebrow">Thursday</p>
<h1 class="date">May 14</h1>
<div class="ringcard">
<div class="rings">
<div class="track move"></div><div class="ring move"></div>
<div class="track exercise"></div><div class="ring exercise"></div>
<div class="track stand"></div><div class="ring stand"></div>
</div>
<div class="legend">
<div class="lrow"><span class="llabel move">Move</span><span class="lval">486</span><span class="lgoal">/620 KCAL</span></div>
<div class="lrow"><span class="llabel exercise">Exercise</span><span class="lval">38</span><span class="lgoal">/30 MIN</span></div>
<div class="lrow"><span class="llabel stand">Stand</span><span class="lval">9</span><span class="lgoal">/12 HR</span></div>
</div>
</div>
<div class="tiles">
<div class="tile"><div class="trow"><span class="dot" style="background:#FF375F"></span><span class="tlabel">Steps</span></div><div class="tval">8,214</div><div class="tsub">Avg 7,540</div></div>
<div class="tile"><div class="trow"><span class="dot" style="background:#0A84FF"></span><span class="tlabel">Distance</span></div><div class="tval">5.2 km</div><div class="tsub">Avg 4.8</div></div>
<div class="tile"><div class="trow"><span class="dot" style="background:#FF453A"></span><span class="tlabel">Heart</span></div><div class="tval">62</div><div class="tsub">bpm resting</div></div>
<div class="tile"><div class="trow"><span class="dot" style="background:#92E82A"></span><span class="tlabel">Workouts</span></div><div class="tval">3</div><div class="tsub">This week</div></div>
</div>
<div class="startbtn">Start Workout</div>
</section>
<section class="plus">
<div class="sechead"><h2>Fitness+</h2><span class="seeall">See All</span></div>
<div class="fpgrid">
<div class="fpcard"><div class="fpart a"><span class="fpbadge">New</span><span class="fpplay"></span></div>
<div class="fpbody"><div class="fptype">HIIT</div><div class="fptitle">20 min HIIT</div><div class="fpmeta">Bakari · Pop Anthems</div></div></div>
<div class="fpcard"><div class="fpart b"><span class="fpplay"></span></div>
<div class="fpbody"><div class="fptype">Strength</div><div class="fptitle">Full Body Burn</div><div class="fpmeta">Emily · Indie Rock</div></div></div>
<div class="fpcard"><div class="fpart c"><span class="fpplay"></span></div>
<div class="fpbody"><div class="fptype">Yoga</div><div class="fptitle">Morning Flow</div><div class="fpmeta">Jessica · Ambient</div></div></div>
<div class="fpcard"><div class="fpart d"><span class="fpbadge">Trending</span><span class="fpplay"></span></div>
<div class="fpbody"><div class="fptype">Cycling</div><div class="fptitle">Climb Ride</div><div class="fpmeta">Kyle · Electronic</div></div></div>
</div>
</section>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #2f2f2f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #2f2f2f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #2f2f2f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #43454b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #007cba; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #eeeeee; color: #2f2f2f;
border: 1px solid #cc1818; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #eeeeee; color: #2f2f2f;
border: 1px solid #bebebe; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #43454b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; background: #cd2653; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#eeeeee; font-family:-apple-system,'Segoe UI',Roboto,sans-serif; color:#2f2f2f; }
*{box-sizing:border-box;}
.nav{height:48px;background:#eeeeee;display:flex;align-items:center;justify-content:space-between;padding:0 20px;}
.logo{font-size:18px;font-weight:700;color:#cc1818;}
.navlinks{display:flex;gap:16px;font-size:14px;font-weight:600;}
.search{width:200px;height:36px;background:#fff;border:1px solid #dddddd;display:flex;align-items:center;padding:0 10px;font-size:13px;color:#43454b;}
.hero{height:190px;background:#2f2f2f;color:#fff;display:flex;align-items:center;padding:0 20px;}
.hero h1{font-size:32px;font-weight:700;line-height:1.25;margin:0 0 14px;max-width:420px;}
.cta{display:inline-block;background:#007cba;color:#fff;font-size:16px;font-weight:600;padding:12px 24px;}
.rowlabel{padding:16px 20px 8px;font-size:24px;font-weight:600;}
.grid{display:flex;gap:16px;padding:0 20px;}
.card{width:196px;background:#fff;padding:16px;position:relative;}
.thumb{height:96px;background:#eeeeee;margin-bottom:8px;}
.badge{position:absolute;top:16px;left:16px;background:#cd2653;color:#fff;font-size:12px;font-weight:700;padding:2px 8px;}
.ptitle{font-size:18px;font-weight:600;}
.pprice{font-size:16px;font-weight:700;margin-top:4px;}
.saleprice{color:#cd2653;}
.compare{font-size:13px;color:#43454b;text-decoration:line-through;margin-left:6px;}
.cart{background:#007cba;color:#fff;font-size:14px;font-weight:600;padding:10px 20px;margin-top:8px;display:inline-block;}
</style>
<div class="nav">
<div class="logo">Troma Direct</div>
<div class="navlinks"><div>Movies</div><div>Toxic Avenger</div><div>Merch</div></div>
<div class="search">Search products...</div>
</div>
<div class="hero">
<h1>We spent the budget on the films, not the website.</h1>
<div class="cta">Add to Cart</div>
</div>
<div class="rowlabel">New Releases</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#cc1818,#4ab866)"></div><div class="ptitle">Toxic Avenger Blu-ray</div><div class="pprice"><span class="saleprice">$14.99</span><span class="compare">$19.99</span></div><div class="cart">Add to Cart</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f0b849,#34e2e4)"></div><div class="ptitle">Class of Nuke 'Em High DVD</div><div class="pprice">$12.99</div><div class="cart">Add to Cart</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7a00df,#cd2653)"></div><div class="ptitle">Troma Slime T-Shirt</div><div class="pprice">$22.99</div><div class="cart">Add to Cart</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #232325; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #232325; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #060606; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { position:absolute; top:0; left:0; right:0; height:56px; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; border-bottom:0.5px solid #232325; background:#000000; }
.wordmark { margin:0; font-size:20px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
background:linear-gradient(135deg,#00D1C1,#0079D3); -webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; }
.navicons { display:flex; gap:20px; font-size:19px; color:#FFFFFF; }
.layout { position:absolute; top:56px; bottom:50px; left:0; right:0; display:flex; gap:26px;
padding:16px 40px 8px; }
.feedcol { flex:1.5; min-width:0; }
.feedhead { display:flex; align-items:baseline; justify-content:space-between; margin:2px 0 4px; }
.feedhead h2 { font-size:21px; font-weight:700; margin:0; letter-spacing:-0.3px; }
.caughtup { font-size:11px; color:#5E5E64; display:flex; align-items:center; gap:6px; }
.dot { width:6px; height:6px; border-radius:50%; background:#00C2B8; display:inline-block; }
.post { display:flex; gap:10px; padding:13px 0 12px; border-bottom:0.5px solid #232325; }
.avatar { width:38px; height:38px; border-radius:50%; flex-shrink:0;
background:linear-gradient(135deg,#00D1C1,#0079D3); }
.pcol { flex:1; min-width:0; }
.phead { font-size:14px; font-weight:700; color:#FFFFFF; }
.chip { font-size:10px; font-weight:700; color:#00C2B8; text-transform:uppercase; letter-spacing:0.4px; }
.meta { font-size:11px; color:#5E5E64; font-weight:400; text-transform:none; letter-spacing:0; }
.media { margin-top:8px; height:104px; border-radius:10px;
background:linear-gradient(150deg,#0f3d3a 0%,#00C2B8 45%,#0079D3 100%); }
.caption { margin-top:8px; font-size:13px; color:#9A9AA0; line-height:1.5; font-weight:500; }
.actionrow { margin-top:10px; display:flex; gap:22px; font-size:12px; color:#9A9AA0; align-items:center; }
.actionrow .liked { color:#00C2B8; font-weight:600; }
.typedcard { margin-top:8px; background:#0E0E10; border:1px solid #232325; border-radius:10px;
padding:12px; display:flex; gap:12px; }
.cover { width:56px; height:80px; border-radius:4px; flex-shrink:0;
background:linear-gradient(160deg,#0079D3,#00D1C1); }
.bookinfo { flex:1; }
.booktitle { font-size:15px; font-weight:600; color:#FFFFFF; margin:0 0 3px; }
.bookauthor { font-size:12px; color:#9A9AA0; margin:0 0 8px; }
.stars { font-size:11px; letter-spacing:1px; color:#E8B23A; font-weight:600; }
.sidecol { width:262px; flex-shrink:0; }
.panel { background:#161618; border:1px solid #232325; border-radius:14px; padding:16px; }
.panel h3 { font-size:14px; font-weight:700; margin:0 0 12px; }
.ptgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.ptcell { background:#0E0E10; border:1px solid #232325; border-radius:12px; padding:9px 2px;
display:flex; flex-direction:column; align-items:center; gap:4px; }
.ptcell .ic { font-size:17px; }
.ptcell .lb { font-size:9px; font-weight:600; color:#5E5E64; text-transform:uppercase; letter-spacing:0.3px; }
.ptcell.sel { border-color:#00C2B8; background:rgba(0,194,184,0.08); }
.ptcell.sel .lb { color:#00C2B8; }
.tierlabel { font-size:10px; font-weight:600; color:#5E5E64; text-transform:uppercase;
letter-spacing:0.4px; margin:14px 0 8px; }
.tier { display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:8px; font-size:12px;
color:#9A9AA0; font-weight:600; }
.tier .rdot { width:13px; height:13px; border-radius:50%; border:1.5px solid #5E5E64; flex-shrink:0; }
.tier.on { background:rgba(0,194,184,0.08); color:#00C2B8; }
.tier.on .rdot { border-color:#00C2B8; background:#00C2B8; }
.postbtn { margin-top:14px; width:100%; border:none; border-radius:999px; padding:12px 0;
font-size:14px; font-weight:700; color:#FFFFFF; text-align:center;
background:linear-gradient(135deg,#00D1C1,#0079D3); }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:50px; background:rgba(0,0,0,0.96);
border-top:0.5px solid #232325; display:flex; align-items:center; justify-content:space-around;
padding:0 60px; }
.tabicon { font-size:20px; color:#5E5E64; }
.tabicon.on { color:#00C2B8; }
.ring { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#00D1C1,#0079D3);
display:flex; align-items:center; justify-content:center; }
.ringhole { width:34px; height:34px; border-radius:50%; background:#000000; color:#FFFFFF;
font-size:18px; font-weight:700; display:flex; align-items:center; justify-content:center; }
</style></head>
<body>
<nav>
<p class="wordmark">Vero (iOS)</p>
<div class="navicons"><span>🔍</span><span>🔔</span></div>
</nav>
<div class="layout">
<div class="feedcol">
<div class="feedhead">
<h2>Feed</h2>
<span class="caughtup"><i class="dot"></i>Caught up · newest first</span>
</div>
<div class="post">
<div class="avatar"></div>
<div class="pcol">
<div class="phead">Marisol Cruz <span class="chip">📷 Photo</span> <span class="meta">· 14m</span></div>
<div class="media"></div>
<div class="caption">Golden hour on the roof again. Never gets old up here.</div>
<div class="actionrow"><span class="liked">♥ 218</span><span>💬 12</span><span>↗ Share</span></div>
</div>
</div>
<div class="post" style="border-bottom:none;">
<div class="avatar" style="background:linear-gradient(135deg,#8ec5ff,#0079D3);"></div>
<div class="pcol">
<div class="phead">Devon Park <span class="chip">📚 Book</span> <span class="meta">· 1h</span></div>
<div class="typedcard">
<div class="cover"></div>
<div class="bookinfo">
<p class="booktitle">Project Hail Mary</p>
<p class="bookauthor">Andy Weir</p>
<div class="stars">★★★★★</div>
</div>
</div>
<div class="caption" style="margin-top:10px;">Read this in two sittings. Absolutely worth the hype.</div>
<div class="actionrow"><span>♡ 61</span><span>💬 5</span><span>↗ Share</span></div>
</div>
</div>
</div>
<div class="sidecol">
<div class="panel">
<h3>New Post</h3>
<div class="ptgrid">
<div class="ptcell"><span class="ic">📷</span><span class="lb">Photo</span></div>
<div class="ptcell"><span class="ic">🎥</span><span class="lb">Video</span></div>
<div class="ptcell"><span class="ic">🔗</span><span class="lb">Link</span></div>
<div class="ptcell"><span class="ic">🎵</span><span class="lb">Music</span></div>
<div class="ptcell"><span class="ic">🎬</span><span class="lb">Film</span></div>
<div class="ptcell sel"><span class="ic">📚</span><span class="lb">Book</span></div>
<div class="ptcell"><span class="ic">📍</span><span class="lb">Place</span></div>
</div>
<div class="tierlabel">Who can see this</div>
<div class="tier"><span class="rdot"></span>Close Friends</div>
<div class="tier on"><span class="rdot"></span>Friends</div>
<div class="tier"><span class="rdot"></span>Acquaintances</div>
<div class="tier"><span class="rdot"></span>Followers</div>
<button class="postbtn">Post</button>
</div>
</div>
</div>
<div class="tabbar">
<span class="tabicon on">⌂</span>
<span class="tabicon">🔍</span>
<div class="ring"><div class="ringhole">+</div></div>
<span class="tabicon">✉</span>
<span class="tabicon">👤</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #003da5; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #003da5;
border: 1px solid #003da5; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.8px; background: #c8102e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Frigidaire</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d9d9d9;}
.logo{font-size:22px;font-weight:700;letter-spacing:-0.5px;color:#003da5;}
.navlinks{display:flex;gap:26px;font-size:14px;font-weight:500;}
.icons{font-size:13px;color:#333;}
.hero{background:#f4f4f4;min-height:230px;padding:40px 32px;display:flex;align-items:center;gap:40px;}
.hero-copy{flex:1;}
h1{font-size:36px;font-weight:700;line-height:1.2;letter-spacing:-0.5px;margin:0 0 10px;}
.sub{font-size:18px;color:#333;margin:0 0 20px;}
.cta{background:#003da5;color:#fff;border:none;border-radius:4px;padding:14px 32px;font-size:16px;font-weight:600;}
.fridge{width:260px;height:190px;position:relative;}
.fridge-body{position:absolute;bottom:0;left:30px;width:150px;height:180px;background:linear-gradient(180deg,#e2e2e2,#c9c9c9);border-radius:6px;border:2px solid #b0b0b0;}
.fridge-body::before{content:'';position:absolute;top:0;left:0;width:100%;height:38%;border-bottom:2px solid #b0b0b0;}
.handle{position:absolute;left:8px;top:10px;width:6px;height:60px;background:#8a8a8a;border-radius:3px;}
.handle2{position:absolute;left:8px;top:78px;width:6px;height:95px;background:#8a8a8a;border-radius:3px;}
.promo-badge{position:absolute;top:-8px;right:20px;background:#c8102e;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;padding:4px 8px;border-radius:4px;}
.row{padding:24px 32px 0;display:flex;justify-content:space-between;align-items:baseline;}
.row h2{font-size:20px;font-weight:600;margin:0;}
.filters{display:flex;gap:8px;padding:0 32px;margin:14px 0;}
.chip{border:1px solid #d9d9d9;border-radius:4px;padding:6px 14px;font-size:13px;font-weight:600;}
.chip.active{background:#003da5;color:#fff;border-color:#003da5;}
.grid{display:flex;gap:16px;padding:0 32px;}
.card{flex:1;border:1px solid #e8e8e8;border-radius:8px;padding:14px;position:relative;}
.card-img{background:#f4f4f4;border-radius:4px;height:100px;display:flex;align-items:center;justify-content:center;position:relative;}
.mini-fridge{width:48px;height:70px;background:linear-gradient(180deg,#e8e8e8,#cfcfcf);border-radius:4px;border:1px solid #b8b8b8;}
.energy{position:absolute;top:6px;left:6px;background:#2e7d32;color:#fff;font-size:10px;font-weight:500;padding:3px 6px;border-radius:4px;}
.card-title{font-size:15px;font-weight:600;margin-top:10px;}
.stars{color:#f9a825;font-size:12px;margin:4px 0;}
.price-row{display:flex;gap:8px;align-items:baseline;}
.price{font-size:20px;font-weight:700;}
.price.sale{color:#c8102e;}
.orig{font-size:14px;color:#6b6b6b;text-decoration:line-through;}
.compare-tray{position:absolute;bottom:0;left:0;right:0;height:56px;background:#1a1a1a;display:flex;align-items:center;padding:0 32px;gap:10px;}
.compare-tray span{color:#fff;font-size:13px;margin-right:8px;}
.thumb{width:36px;height:36px;background:#fff;border-radius:4px;}
</style>
<div style="position:relative;height:640px;">
<div class="nav">
<div class="logo">Frigidaire</div>
<div class="navlinks"><span>Refrigerators</span><span>Ranges</span><span>Dishwashers</span><span>Laundry</span><span>Support</span></div>
<div class="icons">Find a Dealer Cart</div>
</div>
<div class="hero">
<div class="hero-copy">
<h1>French Door Refrigerators</h1>
<p class="sub">Precise cooling. Flexible storage. Built to last.</p>
<button class="cta">Shop Refrigerators</button>
</div>
<div class="fridge">
<div class="promo-badge">Save $200</div>
<div class="fridge-body"><div class="handle"></div><div class="handle2"></div></div>
</div>
</div>
<div class="row"><h2>Shop by Capacity</h2><span style="font-size:13px;color:#003da5;font-weight:600;">Compare Models</span></div>
<div class="filters">
<div class="chip active">All</div><div class="chip">18-20 cu ft</div><div class="chip">21-24 cu ft</div><div class="chip">25+ cu ft</div>
</div>
<div class="grid">
<div class="card"><div class="card-img"><div class="energy">Energy Star</div><div class="mini-fridge"></div></div><div class="card-title">FRFS2823AS</div><div class="stars">★★★★☆ 4.3</div><div class="price-row"><span class="price sale">$1,499</span><span class="orig">$1,699</span></div></div>
<div class="card"><div class="card-img"><div class="mini-fridge"></div></div><div class="card-title">GRFC2353AF</div><div class="stars">★★★★★ 4.7</div><div class="price-row"><span class="price">$2,199</span></div></div>
<div class="card"><div class="card-img"><div class="energy">Energy Star</div><div class="mini-fridge"></div></div><div class="card-title">FRFN2813AS</div><div class="stars">★★★★☆ 4.2</div><div class="price-row"><span class="price">$1,899</span></div></div>
</div>
<div class="compare-tray"><span>Compare (2 of 4)</span><div class="thumb"></div><div class="thumb"></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4876ef; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4876ef; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a7bcf2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2d67ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4876ef; color: #000000;
border: 1px solid #2d67ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4876ef; color: #f5f5f5;
border: 1px solid #648af0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a7bcf2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4474f2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#292e41; box-sizing:border-box;
font-family:"Pretendard","Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #eaedf4; }
.brand { font-size:18px; font-weight:700; margin:0; color:#4876ef; }
.navlinks { display:flex; gap:22px; font-size:14px; }
.cta { background:#4876ef; color:#ffffff; border:none; border-radius:8px; padding:10px 20px; font-size:14px; font-weight:700; }
.searchwrap { padding:26px 40px 18px; text-align:center; }
.searchwrap h1 { font-size:24px; font-weight:700; margin:0 0 14px; }
.searchbar { max-width:520px; margin:0 auto; height:48px; border:2px solid #2d67ff; border-radius:28px;
display:flex; align-items:center; padding:0 20px; color:#8491a7; font-size:14px; background:#ffffff; }
.chiprow { display:flex; gap:8px; justify-content:center; padding:14px 40px 20px; flex-wrap:wrap; }
.chip { background:#eff5ff; color:#292e41; font-size:12px; border-radius:4px; padding:4px 10px; }
.chip.on { background:#4876ef; color:#ffffff; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 40px; }
.card { background:#ffffff; border:1px solid #d7dce5; border-radius:16px; padding:16px;
box-shadow: 2px 6px 16px rgba(17,42,128,0.08); }
.card .tag { font-size:11px; background:#fff7d6; color:#ff5656; border-radius:4px; padding:2px 6px; font-weight:700; }
.card h3 { font-size:15px; font-weight:700; margin:8px 0 4px; }
.card p { font-size:12px; color:#5c667b; margin:0; }
.footerband { display:flex; justify-content:space-between; align-items:center; padding:18px 40px 0; }
.pill-ai { background:#02c6ff; color:#ffffff; border-radius:20px; padding:8px 16px; font-size:13px; font-weight:700;
box-shadow:0 0 10px rgba(0,161,248,0.3); border:none; }
</style></head>
<body>
<nav>
<p class="brand">Saramin</p>
<div class="navlinks"><span>Job Listings</span><span>Company & Pay</span><span>Community</span></div>
<button class="cta">Register Resume</button>
</nav>
<section class="searchwrap">
<h1>Only the career that fits you — matched</h1>
<div class="searchbar">Search by job title or company</div>
</section>
<div class="chiprow">
<span class="chip on">Seoul (64,706)</span>
<span class="chip">Gyeonggi (55,520)</span>
<span class="chip">Incheon</span>
<span class="chip">Busan</span>
</div>
<section class="cards">
<div class="card"><span class="tag">D-3</span><h3>Backend Developer</h3><p>Seoul · Full-time · Any experience</p></div>
<div class="card"><span class="tag">D-7</span><h3>Frontend Engineer</h3><p>Pangyo · Full-time · 3+ years</p></div>
<div class="card"><span class="tag">Popular</span><h3>Data Analyst</h3><p>Seoul · Full-time · New grads welcome</p></div>
</section>
<div class="footerband">
<span style="font-size:12px;color:#67738e;">Chosen by 17 million members</span>
<button class="pill-ai">AI Search</button>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #1c1d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #1c1d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #1c1d1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #fa4500; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.25px; background: transparent; color: #009f7f;
border: 1px solid #009f7f; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1c1d1d;
border: 1px solid #c2c3c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #fbcd0a; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:'Nunito Sans',Arial,sans-serif; color:#555555; }
*{box-sizing:border-box;}
.nav{height:60px;background:#1c1d1d;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:19px;font-weight:800;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#fff;}
.hero{height:220px;background:#1c1d1d;display:flex;align-items:center;padding:0 34px;gap:36px;}
.herotext{width:410px;}
h1{font-size:32px;font-weight:800;color:#fff;margin:0 0 12px;line-height:1.2;}
.sub{font-size:14px;color:#c7c7c7;line-height:1.6;margin:0 0 18px;width:370px;}
.cta{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 26px;background:#fa4500;color:#fff;font-size:14px;font-weight:700;border-radius:8px;}
.battery{width:200px;height:130px;background:#121212;border-radius:12px;position:relative;border:1px solid #333;padding:14px;}
.charge{position:absolute;left:14px;right:14px;bottom:14px;height:20px;border-radius:9999px;background:#252525;overflow:hidden;}
.charge:before{content:'';position:absolute;left:0;top:0;bottom:0;width:70%;background:#009f7f;}
.pct{font-size:24px;font-weight:800;color:#fbcd0a;}
.section{padding:0 34px;}
.sectitle{font-size:20px;font-weight:700;color:#1c1d1d;margin:18px 0 14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:12px;padding:12px;position:relative;}
.thumb{height:104px;border-radius:8px;margin-bottom:10px;}
.tag{position:absolute;top:8px;left:8px;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:9999px;color:#fff;}
.tag.solar{background:#a89cc8;}
.tag.deal{background:#fa4500;}
.ptitle{font-size:13px;font-weight:600;color:#1c1d1d;line-height:1.3;height:32px;overflow:hidden;}
.pprice{font-size:14px;font-weight:700;color:#009f7f;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Zendure</div>
<div class="navlinks"><div>Power Stations</div><div>SolarFlow</div><div>Accessories</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Charge held. Charge released.</h1>
<div class="sub">Portable power stations and solar systems engineered to hold energy in reserve, then deliver it on demand.</div>
<div class="cta">Shop Power Stations</div>
</div>
<div class="battery"><div class="pct">70%</div><div class="charge"></div></div>
</div>
<div class="section">
<div class="sectitle">Featured Products</div>
<div class="grid">
<div class="card"><span class="tag deal">Deal</span><div class="thumb" style="background:linear-gradient(150deg,#009f7f,#1c1d1d)"></div><div class="ptitle">SuperBase V 1600 Power Station</div><div class="pprice">$1,199</div></div>
<div class="card"><span class="tag solar">Solar</span><div class="thumb" style="background:linear-gradient(150deg,#a89cc8,#1c1d1d)"></div><div class="ptitle">SolarFlow 400W Panel Kit</div><div class="pprice">$899</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#fbcd0a,#1c1d1d)"></div><div class="ptitle">Fuel Charger Fast Adapter</div><div class="pprice">$59</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#fa4500,#1c1d1d)"></div><div class="ptitle">Expansion Battery Pack</div><div class="pprice">$449</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #acacaf; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #0058a8; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: transparent; color: #0058a8;
border: 1px solid #0058a8; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #121212;
border: 1px solid #c0c0c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #acacaf; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #00a47c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f3f3f3; color:#171f32; font-family:'Assistant',Arial,sans-serif; }
*{box-sizing:border-box;}
.topbar{height:4px;background:#0058a8;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#171f32;}
.logo{font-size:20px;font-weight:700;color:#fff;letter-spacing:.2px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#c9d1e0;}
.navcta{background:#0058a8;color:#fff;font-size:12px;font-weight:700;padding:10px 18px;border-radius:6px;}
.hero{height:270px;display:flex;background:#dedede;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;}
.hkicker{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#0058a8;margin-bottom:10px;}
.herotext h1{font-size:36px;font-weight:700;color:#171f32;margin:0 0 12px;line-height:1.15;}
.herotext p{font-size:14px;color:#4a4f5c;margin:0 0 20px;max-width:320px;}
.btn{display:inline-block;height:48px;line-height:48px;padding:0 28px;background:#e25e49;color:#fff;font-size:14px;font-weight:700;border-radius:6px;width:fit-content;}
.heroimg{width:54%;position:relative;background:linear-gradient(135deg,#171f32,#0058a8);overflow:hidden;}
.fanring{position:absolute;right:110px;top:55px;width:150px;height:150px;border-radius:50%;border:14px solid #f3f3f3;}
.fanhub{position:absolute;right:170px;top:115px;width:30px;height:30px;border-radius:50%;background:#00a47c;}
.sec{padding:22px 40px 0;}
.sectitle{font-size:17px;font-weight:700;margin-bottom:14px;}
.specrow{display:flex;gap:1px;background:#dedede;margin-bottom:16px;}
.speccell{flex:1;background:#fff;text-align:center;padding:10px;}
.speclabel{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#7d818c;}
.specvalue{font-size:15px;font-weight:700;color:#171f32;margin-top:2px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border-radius:6px;padding:10px;position:relative;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.badge{position:absolute;top:8px;left:8px;background:#e25e49;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:4px;z-index:2;}
.thumb{height:96px;border-radius:6px;background:linear-gradient(135deg,#dedede,#c7cdd8);}
.pname{font-size:13px;font-weight:700;margin-top:8px;}
.pprice{font-size:13px;font-weight:700;color:#0058a8;margin-top:3px;}
</style>
<div class="topbar"></div>
<div class="nav">
<div class="logo">Lasko</div>
<div class="navlinks"><span>Fans</span><span>Heaters</span><span>Air Quality</span><span>Support</span></div>
<div class="navcta">Find a Retailer</div>
</div>
<div class="hero">
<div class="herotext">
<div class="hkicker">Since 1906</div>
<h1>Air that works as hard as you do</h1>
<p>Home comfort engineered with appliance-grade precision and clarity.</p>
<div class="btn">Shop Fans</div>
</div>
<div class="heroimg"><div class="fanring"></div><div class="fanhub"></div></div>
</div>
<div class="sec">
<div class="specrow">
<div class="speccell"><div class="speclabel">Wind Speeds</div><div class="specvalue">3</div></div>
<div class="speccell"><div class="speclabel">Energy Rating</div><div class="specvalue">A+</div></div>
<div class="speccell"><div class="speclabel">Noise Level</div><div class="specvalue">42dB</div></div>
<div class="speccell"><div class="speclabel">Warranty</div><div class="specvalue">3 Yr</div></div>
</div>
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb"></div><div class="pname">18" High Velocity Fan</div><div class="pprice">$59.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c7cdd8,#0058a8)"></div><div class="pname">Ceramic Tower Heater</div><div class="pprice">$79.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#dedede,#00a47c)"></div><div class="pname">HEPA Air Purifier</div><div class="pprice">$149.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#171f32,#dedede)"></div><div class="pname">Pedestal Fan Remote</div><div class="pprice">$64.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #070707;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #070707;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #070707; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #00b6a7; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #070707;
border: 1px solid #00b6a7; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #070707;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ab4399; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#ffffff; color:#333333; box-sizing:border-box; font-family:'Montserrat','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; background:#070707; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:18px; font-weight:700; color:#fff; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; letter-spacing:0.3px; color:#fff; }
.navlinks span.active { color:#00b6a7; }
.search-pill { background:#fff; border-radius:999px; padding:10px 20px; font-size:12px; color:#666; }
.strip { display:flex; gap:10px; padding:14px 32px; }
.cat-tile { flex:1; text-align:center; padding:10px; border-radius:12px; font-size:13px; font-weight:600; color:#fff; }
.cat-tile:nth-child(1) { background:#00b6a7; }
.cat-tile:nth-child(2) { background:#0097cf; }
.cat-tile:nth-child(3) { background:#ab4399; }
.cat-tile:nth-child(4) { background:#faa61a; color:#070707; }
.cat-tile:nth-child(5) { background:#f1647d; }
.main { display:flex; gap:20px; padding:8px 32px; height:308px; }
.gallery { width:400px; background:#f5f5f5; border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative; }
.tile-box { width:180px; height:130px; background:#cddc29; border-radius:12px; position:relative; }
.tile-box::before { content:'B A N'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:24px; letter-spacing:8px; color:#070707; }
.badge-limited { position:absolute; top:16px; left:16px; background:#faa61a; color:#070707; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:4px 10px; border-radius:4px; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; }
.info h1 { font-size:24px; font-weight:700; margin:0; }
.price-row { display:flex; gap:10px; align-items:baseline; }
.price { font-size:22px; font-weight:700; color:#070707; }
.badge-sale { background:#f1647d; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.desc { font-size:13px; line-height:1.5; color:#333; max-width:420px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:44px; background:#00b6a7; color:#fff; border:none; border-radius:8px; font-weight:600; font-size:14px; }
.btn-marigold { flex:1; height:44px; background:#faa61a; color:#070707; border:none; border-radius:8px; font-weight:600; font-size:14px; }
footer { position:absolute; bottom:0; left:0; right:0; background:#070707; color:#999999; padding:12px 32px; display:flex; justify-content:space-between; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Bananagrams</p>
<div class="navlinks"><span class="active">Word Games</span><span>Family Games</span><span>Travel Games</span></div>
<div class="search-pill">🔍 Search games</div>
</nav>
<div class="strip">
<div class="cat-tile">Classic</div>
<div class="cat-tile">Junior</div>
<div class="cat-tile">Party Edition</div>
<div class="cat-tile">Travel</div>
<div class="cat-tile">Deluxe</div>
</div>
<div class="main">
<div class="gallery">
<span class="badge-limited">Limited Edition</span>
<div class="tile-box"></div>
</div>
<div class="info">
<h1>Bananagrams Party Edition</h1>
<div class="price-row">
<span class="price">$16.99</span>
<span class="badge-sale">Sale</span>
</div>
<p class="desc">The fast-paced word game with 144 letter tiles and zero waiting for turns — dump the bunch, flip your tiles, and build your own crossword grid faster than everyone else at the table.</p>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-marigold">Gift Wrap +$3</button>
</div>
</div>
</div>
<footer>
<span>© Bananagrams</span>
<span>Bananagrams · Shop · Support · Connect</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #171717; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #171717; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #919191; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #171717; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #171717; color: #f5f5f5;
border: 1px solid #3b3b3b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #919191; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #21233a; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#171717; box-sizing:border-box;
font-family:Geist,-apple-system,BlinkMacSystemFont,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #ebebeb; }
.brand { font-weight:600; font-size:16px; display:flex; align-items:center; gap:8px; }
.tri { width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:14px solid #171717; }
.navlinks { display:flex; gap:24px; font-size:14px; color:#4d4d4d; }
.btn { background:#171717; color:#ffffff; border-radius:6px; padding:8px 16px; font-size:14px; font-weight:500; }
.hero { padding:44px 36px 26px; text-align:center; }
.hero h1 { font-size:52px; font-weight:400; letter-spacing:-2.5px; line-height:1; margin:0 0 14px; }
.hero p { font-size:16px; color:#4d4d4d; margin:0 auto; max-width:480px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid #ebebeb; margin:26px 36px 0; }
.cell { border-right:1px solid #ebebeb; border-top:1px solid #ebebeb; padding:20px; }
.cell:nth-child(3n) { border-right:none; }
.cell:nth-child(-n+3) { border-top:none; }
.cell .k { font-family:"Geist Mono",monospace; font-size:11px; color:#666666; margin-bottom:10px; }
.cell h3 { font-size:16px; font-weight:600; margin:0 0 8px; letter-spacing:-0.3px; }
.cell p { font-size:13px; color:#4d4d4d; margin:0; line-height:1.5; }
.code { background:#fafafa; border:1px solid #ebebeb; border-radius:6px; margin:16px 36px 0; padding:14px 18px;
font-family:"Geist Mono",monospace; font-size:12.5px; color:#171717; display:flex; justify-content:space-between; align-items:center; }
.code .prompt { color:#666666; }
</style></head>
<body>
<nav>
<span class="brand"><span class="tri"></span>Vercel</span>
<div class="navlinks"><span>Products</span><span>Solutions</span><span>Resources</span><span>Enterprise</span><span>Docs</span></div>
<button class="btn">Deploy</button>
</nav>
<section class="hero">
<h1>Build and deploy on the frontend cloud</h1>
<p>Your complete platform for the web — from framework to infrastructure to observability.</p>
</section>
<div class="code"><span class="prompt">$</span> vercel deploy --prod <span style="color:#666;">→ ready in 4.2s</span></div>
<div class="grid">
<div class="cell"><div class="k">01 / Framework</div><h3>Next.js on Vercel</h3><p>Zero-config builds with edge rendering and instant cache invalidation.</p></div>
<div class="cell"><div class="k">02 / Observability</div><h3>Speed Insights</h3><p>Real user metrics across every deployment, tied to the commit.</p></div>
<div class="cell"><div class="k">03 / AI</div><h3>AI SDK & v0</h3><p>Ship generative interfaces with the same pipeline as your app.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2f2f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f2f2f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F2F2F2; color:#14171A; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.top { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
background:rgba(255,255,255,0.96); border-bottom:0.5px solid #E5E5E5; }
.top h1 { font-size:24px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.top .icons { color:#14171A; font-size:17px; display:flex; gap:16px; }
.stage { display:flex; gap:24px; padding:22px 28px; }
/* DoubleTake 프로필 카드 */
.card { width:300px; background:#FFFFFF; border-radius:24px; box-shadow:0 8px 24px rgba(20,23,26,0.12); overflow:hidden; flex-shrink:0; }
.hero { height:270px; background:linear-gradient(150deg,#f6c6d6,#f0578a 60%,#c00244); position:relative; }
.hero .scrim { position:absolute; left:0; right:0; bottom:0; height:70px;
background:linear-gradient(to top, rgba(20,23,26,0.55), transparent); }
.hero .nm { position:absolute; left:16px; bottom:36px; color:#fff; font-size:24px; font-weight:700; letter-spacing:-0.3px; }
.badge { position:absolute; left:16px; bottom:8px; width:42px; height:42px; border-radius:50%; background:#FFFFFF;
border:3px solid #E2024F; display:flex; align-items:center; justify-content:center;
font-size:13px; font-weight:700; color:#E2024F; }
.card-body { padding:14px 16px; }
.card-body .bio { font-size:13px; line-height:1.5; color:#14171A; margin:0 0 10px; }
.prompt-mini { background:#F2F2F2; border-radius:12px; padding:8px 10px; font-size:12px; margin-bottom:6px; }
.prompt-mini b { font-weight:700; }
.actionbar { display:flex; align-items:center; justify-content:center; gap:22px; padding:0 0 16px; }
.circbtn { border-radius:50%; background:#FFFFFF; border:1px solid #E5E5E5; box-shadow:0 4px 14px rgba(20,23,26,0.16);
display:flex; align-items:center; justify-content:center; }
.circbtn.pass { width:48px; height:48px; color:#0500FF; font-size:20px; font-weight:700; }
.circbtn.like { width:58px; height:58px; color:#E2024F; font-size:24px; }
.circbtn.star { width:40px; height:40px; color:#9B9B9B; font-size:16px; }
/* 매치 질문 카드 */
.qwrap { flex:1; display:flex; flex-direction:column; gap:14px; }
.qcard { background:#FFFFFF; border-radius:20px; padding:20px; box-shadow:0 2px 8px rgba(20,23,26,0.06); }
.qcard .label { font-size:11px; font-weight:700; letter-spacing:0.06em; color:#9B9B9B; text-transform:uppercase; margin-bottom:8px; }
.qcard .prompt { font-size:19px; font-weight:600; margin:0 0 14px; }
.opt { display:block; width:100%; text-align:left; padding:12px 16px; border-radius:999px; border:1.5px solid #E5E5E5;
font-size:15px; font-weight:600; margin-bottom:10px; color:#14171A; }
.opt.sel { background:#E2024F; border-color:#E2024F; color:#fff; }
.imp { display:flex; gap:8px; margin-top:6px; }
.imp span { flex:1; text-align:center; padding:7px 0; border-radius:999px; background:#F2F2F2; color:#6B6B6B; font-size:12px; font-weight:600; }
.imp span.sel { background:#E2024F; color:#fff; }
.matchrow { display:flex; align-items:center; gap:12px; background:#FFFFFF; border-radius:16px; padding:12px 14px;
box-shadow:0 2px 8px rgba(20,23,26,0.06); }
.matchrow .av { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#f0578a,#0500FF); position:relative; flex-shrink:0; }
.matchrow .mini-badge { position:absolute; right:-4px; bottom:-4px; width:22px; height:22px; border-radius:50%;
background:#fff; border:2px solid #F0578A; font-size:9px; font-weight:700; color:#F0578A;
display:flex; align-items:center; justify-content:center; }
.matchrow .nm { font-size:16px; font-weight:600; }
.matchrow .meta { font-size:12.5px; color:#6B6B6B; }
</style></head>
<body>
<div class="top">
<h1>OkCupid (iOS)</h1>
<div class="icons">⚲ ⚙</div>
</div>
<div class="stage">
<div class="card">
<div class="hero">
<div class="badge">94%</div>
<div class="scrim"></div>
<div class="nm">Maya, 27</div>
</div>
<div class="card-body">
<p class="bio">substance over swipe — ask me about my terrible taste in podcasts.</p>
<div class="prompt-mini"><b>Together we could:</b> argue about board games for hours</div>
</div>
<div class="actionbar">
<div class="circbtn pass">✕</div>
<div class="circbtn like">♥</div>
<div class="circbtn star">★</div>
</div>
</div>
<div class="qwrap">
<div class="qcard">
<div class="label">Match Question</div>
<p class="prompt">Would you rather stay in on a Friday night or go out?</p>
<span class="opt sel">Stay in with good food</span>
<span class="opt">Out — I need the energy</span>
<span class="opt">Depends entirely on the week</span>
<div class="imp"><span>A little</span><span class="sel">Somewhat</span><span>Very</span></div>
</div>
<div class="matchrow"><div class="av"><span class="mini-badge">87%</span></div>
<div><div class="nm">Jordan</div><div class="meta">Active today</div></div></div>
<div class="matchrow"><div class="av"><span class="mini-badge">73%</span></div>
<div><div class="nm">Taylor</div><div class="meta">Last online yesterday</div></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0c0e14; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #0c0e14;
border: 1px solid #0c0e14; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d8d8d9; color: #0c0e14;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#10131A; box-sizing:border-box;
font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.tnum { font-variant-numeric:tabular-nums; }
.wrap { display:flex; height:640px; }
.left { width:400px; padding:20px 22px; overflow:hidden; position:relative; }
.brand { font-size:16px; font-weight:900; margin-bottom:14px; }
.od-card { background:#F4F5F8; border:1px solid #E3E5EC; border-radius:14px; padding:12px 14px; margin-bottom:16px; }
.od-row { display:flex; align-items:center; gap:10px; padding:5px 0; font-size:15px; font-weight:600; }
.dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.dot.from { background:#8A93A3; }
.dot.to { background:#2B5BFF; }
.od-line { width:2px; height:14px; background:#E3E5EC; margin-left:4px; }
.route { background:#F4F5F8; border:1px solid #E3E5EC; border-radius:16px; padding:14px 16px; margin-bottom:12px; }
.route.best { border-color:#00C281; }
.route-head { display:flex; align-items:baseline; margin-bottom:10px; }
.eta { font-size:22px; font-weight:800; }
.etamin { font-size:13px; font-weight:600; color:#5A6473; margin-left:4px; }
.tag { margin-left:auto; font-size:10px; font-weight:800; letter-spacing:0.4px; text-transform:uppercase;
padding:4px 9px; border-radius:999px; background:rgba(0,194,129,0.18); color:#00C281; }
.tag.blue { background:rgba(43,91,255,0.14); color:#2B5BFF; }
.legstrip { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.chip { display:flex; align-items:center; gap:4px; padding:4px 8px; border-radius:8px; color:#fff;
font-size:11px; font-weight:800; }
.arrow { color:#8A93A3; font-size:11px; }
.disrupt { display:flex; align-items:center; gap:8px; background:rgba(255,138,0,0.14); border:1px solid #FF8A00;
border-radius:10px; padding:9px 12px; font-size:13px; font-weight:700; color:#C96500; margin-top:6px; }
.go { position:absolute; left:22px; right:22px; bottom:20px; height:54px; border-radius:27px; background:#00C281;
display:flex; align-items:center; justify-content:center; gap:8px; color:#003322; font-size:18px; font-weight:900;
letter-spacing:0.4px; box-shadow:0 10px 22px -10px rgba(0,194,129,0.7); }
.right { flex:1; position:relative; background:linear-gradient(160deg,#EAF0FB,#DCE6F7); overflow:hidden; }
.mapline { position:absolute; border-radius:4px; }
.l1 { width:6px; height:210px; left:120px; top:60px; background:#00B894; transform:rotate(12deg); }
.l2 { width:6px; height:180px; left:220px; top:180px; background:#2B5BFF; transform:rotate(-18deg); }
.l3 { width:6px; height:150px; left:300px; top:320px; background:#E8453C; transform:rotate(30deg); }
.pin { position:absolute; width:16px; height:16px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,0.2); }
.pin.a { background:#8A93A3; left:112px; top:50px; }
.pin.b { background:#2B5BFF; left:292px; top:454px; }
.board { position:absolute; right:24px; top:24px; width:230px; background:#1E212B; border-radius:14px; overflow:hidden; }
.board-row { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid #282C38; }
.board-row:last-child { border-bottom:none; }
.lbadge { width:34px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center;
color:#fff; font-size:11px; font-weight:900; flex-shrink:0; }
.bdest { font-size:13px; font-weight:600; color:#ECEEF3; flex:1; }
.bmin { font-size:15px; font-weight:800; }
</style></head>
<body>
<div class="wrap">
<div class="left">
<div class="brand">Citymapper (iOS)</div>
<div class="od-card">
<div class="od-row"><span class="dot from"></span> Home — Maple St</div>
<div class="od-line"></div>
<div class="od-row"><span class="dot to"></span> Tate Modern</div>
</div>
<div class="route best">
<div class="route-head"><span class="eta tnum">24</span><span class="etamin">min</span><span class="tag">Fastest</span></div>
<div class="legstrip">
<span class="chip" style="background:#00B894;">🚶 4</span>
<span class="arrow">›</span>
<span class="chip" style="background:#2B5BFF;">◉ Victoria</span>
<span class="arrow">›</span>
<span class="chip" style="background:#00B894;">🚶 6</span>
</div>
</div>
<div class="route">
<div class="route-head"><span class="eta tnum">31</span><span class="etamin">min</span><span class="tag blue">Cheapest</span></div>
<div class="legstrip">
<span class="chip" style="background:#00B894;">🚶 8</span>
<span class="arrow">›</span>
<span class="chip" style="background:#E8453C;">🚌 63</span>
</div>
<div class="disrupt">⚠ Victoria line: minor delays</div>
</div>
<div class="go">▶ GO</div>
</div>
<div class="right">
<div class="mapline l1"></div>
<div class="mapline l2"></div>
<div class="mapline l3"></div>
<div class="pin a"></div>
<div class="pin b"></div>
<div class="board">
<div class="board-row"><div class="lbadge" style="background:#2B5BFF;">VIC</div><div class="bdest">Brixton</div><div class="bmin" style="color:#00C281;">4</div></div>
<div class="board-row"><div class="lbadge" style="background:#E8453C;">63</div><div class="bdest">Kings Cross</div><div class="bmin" style="color:#FF8A00;">2</div></div>
<div class="board-row"><div class="lbadge" style="background:#8E44D8;">NR</div><div class="bdest">Clapham Jn</div><div class="bmin" style="color:#00C281;">9</div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a2a30;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a2a30;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a2a30; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #6b8e99; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #226d7a; color: #ffffff;
border: none; border-radius: 8px; padding: 11px 22px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #226d7a;
border: 1px solid #226d7a; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #1a2a30;
border: 1px solid #c6cacb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b8e99; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #e4f5fa; color: #226d7a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#e4f5fa; color:#1a2a30; font-family:'Open Sans',Arial,Roboto,sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;background:#ffffff;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:19px;font-weight:600;color:#226d7a;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:400;color:#1a2a30;}
.searchbtn{width:110px;height:32px;border-radius:8px;background:#226d7a;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;background:linear-gradient(120deg,#e4f5fa 50%,#b0e0e9 100%);}
.htext{width:430px;}
.htext h1{font-size:29px;font-weight:600;line-height:1.3;margin:0 0 14px;}
.htext p{font-size:13px;color:#3a4d54;margin:0 0 18px;max-width:370px;line-height:1.6;}
.btn{display:inline-block;background:#226d7a;color:#fff;font-size:13px;font-weight:600;padding:12px 26px;border-radius:8px;}
.scope{position:absolute;right:90px;top:44px;width:210px;height:170px;}
.scopebody{position:absolute;left:60px;top:0;width:50px;height:110px;background:linear-gradient(180deg,#22b8d1,#226d7a);border-radius:8px 8px 4px 4px;}
.scopelens{position:absolute;left:52px;top:-14px;width:66px;height:26px;background:#1a2a30;border-radius:4px;}
.scopebase{position:absolute;left:20px;bottom:0;width:130px;height:16px;background:#1a2a30;border-radius:4px;}
.scopearm{position:absolute;left:78px;top:100px;width:34px;height:60px;background:#22b8d1;border-radius:0 0 8px 8px;}
.sec{padding:22px 40px 0;}
.sectitle{font-size:17px;font-weight:600;margin-bottom:14px;}
.spectable{border:1px solid #b0e0e9;border-radius:6px;overflow:hidden;}
.srow{display:flex;height:34px;align-items:center;background:#fff;}
.srow:nth-child(even){background:#f2fafd;}
.srow .c1{width:280px;padding-left:14px;font-size:12px;}
.srow .c2{flex:1;font-size:12px;color:#226d7a;font-weight:600;}
.srow .c3{width:100px;text-align:right;padding-right:14px;font-size:12px;font-weight:600;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;background:#1a2a30;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#b0e0e9;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Meiji Techno</div>
<div class="navlinks"><span>Microscopes</span><span>Optics</span><span>Laboratory</span></div>
<div class="searchbtn">Catalog</div>
</div>
<div class="hero">
<div class="htext">
<h1>The design stays out of the way of the optics.</h1>
<p>Precision instruments for classrooms and clinical laboratories — built to be seen through, not at.</p>
<div class="btn">Browse Catalog</div>
</div>
<div class="scope">
<div class="scopelens"></div>
<div class="scopebody"></div>
<div class="scopearm"></div>
<div class="scopebase"></div>
</div>
</div>
<div class="sec">
<div class="sectitle">Compound Microscopes</div>
<div class="spectable">
<div class="srow"><div class="c1">ML1000 Binocular Microscope</div><div class="c2">40x–1000x</div><div class="c3">$489.00</div></div>
<div class="srow"><div class="c1">MT4300L Trinocular Series</div><div class="c2">LED · Phase</div><div class="c3">$1,240.00</div></div>
<div class="srow"><div class="c1">SD100 Stereo Dissection Scope</div><div class="c2">10x–40x</div><div class="c3">$310.00</div></div>
</div>
</div>
<div class="footer"><span>© Instrument-Grade Optics</span><span>Calibration · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #1d1d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #1d1d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.35; margin: 0; color: #1d1d1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #1d1d1d; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #f5f5f5; color: #1d1d1d;
border: 1px solid #1d1d1d; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; background: transparent; color: #1d1d1d;
border: 1px solid #bfbfbf; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #569d5f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#f5f5f5; color:#1d1d1d; box-sizing:border-box; font-family:'SuisseIntl','Inter',-apple-system,system-ui,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;background:#f5f5f5;border-bottom:1px solid #e5e5e5;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.nav .logo{font-weight:600;font-size:16px;}
.nav .links{display:flex;gap:20px;font-size:14px;font-weight:500;}
.wrap{display:flex;height:576px;}
.left{width:420px;background:#e5e0dc;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;}
.bike{position:relative;width:280px;height:180px;}
.wheel{position:absolute;bottom:0;width:80px;height:80px;border-radius:50%;border:8px solid #1d1d1d;background:transparent;}
.wheel.front{left:0;}
.wheel.back{right:0;}
.frame{position:absolute;bottom:38px;left:40px;width:200px;height:6px;background:#1d1d1d;transform:rotate(-8deg);}
.frame2{position:absolute;bottom:38px;left:130px;width:6px;height:100px;background:#1d1d1d;}
.badge-battery{position:absolute;top:24px;left:24px;background:#569d5f;color:#fff;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.right{flex:1;padding:28px 32px;display:flex;flex-direction:column;}
h1{font-size:28px;font-weight:500;margin:0 0 8px;letter-spacing:-.25px;}
.sub{color:#737373;font-size:14px;margin:0 0 16px;}
.price{font-size:24px;font-weight:500;margin:0 0 18px;}
.range-chip{display:inline-flex;align-items:center;gap:8px;background:#dff0fd;color:#1d1d1d;font-size:13px;font-weight:600;padding:10px 16px;border-radius:9999px;margin-bottom:20px;width:fit-content;}
.dot{width:8px;height:8px;border-radius:50%;background:#569d5f;}
.config{background:#fff;border:1px solid #d4d4d4;border-radius:12px;padding:16px;margin-bottom:20px;}
.config .row{display:flex;justify-content:space-between;font-size:14px;padding:6px 0;color:#232323;}
.config .row span:first-child{color:#737373;}
.actions{display:flex;gap:10px;margin-top:auto;}
.btn-primary{background:#1d1d1d;color:#fff;font-size:16px;font-weight:500;border-radius:9999px;padding:14px 32px;height:48px;display:flex;align-items:center;}
.btn-secondary{background:#f5f5f5;color:#1d1d1d;font-size:16px;font-weight:500;border:1px solid #d4d4d4;border-radius:9999px;padding:13px 31px;height:48px;display:flex;align-items:center;}
</style>
</head>
<body>
<div class="nav"><div class="logo">Cowboy</div><div class="links"><span>Cross</span><span>ST</span><span>Accessories</span><span>Test Ride</span></div></div>
<div class="wrap">
<div class="left">
<div class="badge-battery">85% Battery</div>
<div class="bike">
<div class="wheel front"></div>
<div class="wheel back"></div>
<div class="frame"></div>
<div class="frame2"></div>
</div>
</div>
<div class="right">
<h1>Cowboy Cross</h1>
<p class="sub">Electric Bike · Matte Graphite</p>
<p class="price">€2,990</p>
<div class="range-chip"><span class="dot"></span>Up to 70km Range</div>
<div class="config">
<div class="row"><span>Frame Size</span><span>Medium</span></div>
<div class="row"><span>Motor</span><span>250W Rear Hub</span></div>
<div class="row"><span>Delivery</span><span>2–3 weeks</span></div>
</div>
<div class="actions">
<div class="btn-primary">Configure</div>
<div class="btn-secondary">Book Test Ride</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #6B6B6B; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.8px; background: #E8582D; color: #FFFFFF;
border: none; border-radius: 2px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.8px; background: transparent; color: #1A1A1A;
border: 1px solid #E8582D; border-radius: 2px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.625; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B6B6B; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.33; letter-spacing: 0.2px; background: #E8582D; color: #FFFFFF;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#3d3d3d; font-family:'Montserrat',Arial,sans-serif;
}
*, *::before, *::after { box-sizing:border-box; }
.wrap{ position:relative; width:960px; height:640px; }
.nav{ height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#ffffff; border-bottom:1px solid #ececec; }
.logo{ font-size:18px; font-weight:700; letter-spacing:0.02em; color:#1a1a1a; }
.navlinks{ display:flex; gap:24px; }
.navlinks span{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#5a5a5a; }
.navlinks span.active{ color:#E8582D; }
.cta{ font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:#ffffff; background:#E8582D; padding:10px 18px; border-radius:4px; }
.hero{ height:220px; position:relative; background:#161311; display:flex; align-items:center; padding:0 34px; overflow:hidden; }
.hero-text{ width:420px; position:relative; z-index:2; }
.kicker{ font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#E8582D; margin-bottom:10px; }
.h1{ font-size:28px; font-weight:700; line-height:1.2; color:#ffffff; margin-bottom:10px; }
.sub{ font-size:13px; line-height:1.5; color:#cfc9c2; max-width:340px; }
.glow{ position:absolute; right:60px; top:20px; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle,#E8582D 0%,#8a2f14 60%,transparent 75%); opacity:0.85; }
.grill{ position:absolute; right:100px; top:60px; width:130px; height:90px; background:#2b2b2b; border-radius:6px; }
.grate{ position:absolute; right:110px; top:70px; width:110px; height:6px; background:#E8582D; }
.grate2{ position:absolute; right:110px; top:84px; width:110px; height:6px; background:#c8451f; }
.config{ padding:16px 34px 0; }
.config-title{ font-size:14px; font-weight:700; color:#1a1a1a; margin-bottom:10px; }
.swatch-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; width:520px; }
.swatch{ width:34px; height:34px; border-radius:50%; border:2px solid #ffffff; box-shadow:0 0 0 1px #ececec; }
.swatch.active{ box-shadow:0 0 0 2px #E8582D; }
.grid{ display:flex; gap:16px; padding:16px 34px 0; }
.card{ width:200px; background:#ffffff; border:1px solid #ececec; border-radius:6px; padding:12px; }
.card-img{ width:100%; height:64px; border-radius:4px; margin-bottom:8px; }
.card-title{ font-size:12px; font-weight:700; color:#1a1a1a; margin-bottom:2px; }
.card-note{ font-size:10px; color:#8a8a8a; margin-bottom:8px; }
.row{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-size:12px; font-weight:700; color:#1a1a1a; }
.tag{ font-size:9px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:#fff; background:#E8582D; padding:3px 8px; border-radius:3px; }
.footer{ position:absolute; bottom:0; left:0; width:960px; height:48px; background:#161311; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.footer span{ font-size:10px; letter-spacing:0.05em; color:#cfc9c2; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Hestan Grills B 2</div>
<div class="navlinks">
<span class="active">Grills</span>
<span>Outdoor Kitchens</span>
<span>Accessories</span>
<span>Finishes</span>
</div>
<div class="cta">Build My Grill</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="kicker">Trellis Burner Technology</div>
<div class="h1">The infrared glow behind every finish.</div>
<div class="sub">Precision-engineered grills with twelve powder-coat finishes, built for performance over lifestyle aspiration.</div>
</div>
<div class="glow"></div>
<div class="grill"></div>
<div class="grate"></div>
<div class="grate2"></div>
</div>
<div class="config">
<div class="config-title">Choose Your Finish</div>
<div class="swatch-grid">
<div class="swatch active" style="background:#E8582D;"></div>
<div class="swatch" style="background:#3a5a6b;"></div>
<div class="swatch" style="background:#2b2b2b;"></div>
<div class="swatch" style="background:#c9c2b0;"></div>
<div class="swatch" style="background:#8a2f14;"></div>
<div class="swatch" style="background:#4a6741;"></div>
</div>
</div>
<div class="grid">
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#E8582D,#2b2b2b);"></div>
<div class="card-title">36" Trellis Grill</div>
<div class="card-note">Pacific Fog Finish</div>
<div class="row"><span class="price">$6,499</span><span class="tag">Configure</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#2b2b2b,#8a2f14);"></div>
<div class="card-title">Outdoor Kitchen Island</div>
<div class="card-note">Modular Frame</div>
<div class="row"><span class="price">$12,900</span><span class="tag">Configure</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#c9c2b0,#E8582D);"></div>
<div class="card-title">Grill Cart + Storage</div>
<div class="card-note">Sol Finish</div>
<div class="row"><span class="price">$2,199</span><span class="tag">Configure</span></div>
</div>
</div>
<div class="footer">
<span>© Hestan Grills</span>
<span>Warranty · Dealer Locator</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #003471; color: #ffffff;
border: none; border-radius: 2px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #003471;
border: 1px solid #003471; border-radius: 2px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #003471; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:Arial, "Helvetica Neue", Helvetica, sans-serif; }
* { box-sizing:border-box; }
.util { height:26px; background:#002557; color:#fff; display:flex; align-items:center; justify-content:space-between;
padding:0 20px; font-size:11px; }
.util span { opacity:.85; }
.navbar { height:56px; background:#003471; display:flex; align-items:center; padding:0 20px; gap:24px; }
.brand { color:#fff; font-weight:700; font-size:19px; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:18px; flex:1; }
.navlinks div { color:#fff; font-size:13px; font-weight:700; opacity:.92; }
.search { display:flex; align-items:center; background:#fff; border:2px solid #fff; border-radius:2px; height:34px; width:300px; }
.search input { border:none; outline:none; flex:1; padding:0 10px; font-size:12px; }
.search .btn { background:#003471; color:#fff; height:34px; width:40px; display:flex; align-items:center; justify-content:center; font-size:13px; }
.acct { color:#fff; font-size:11px; font-weight:700; border:1px solid rgba(255,255,255,.5); padding:6px 10px; border-radius:2px; }
.body { display:flex; height:calc(640px - 82px); }
.sidebar { width:190px; background:#f5f5f5; border-right:1px solid #ccc; padding:14px 12px; font-size:12px; }
.sidebar h4 { font-size:12px; color:#003471; text-transform:uppercase; margin:0 0 8px; letter-spacing:.3px; }
.sidebar .item { padding:6px 0; color:#333; border-bottom:1px solid #e5e5e5; }
.sidebar .item.active { color:#003471; font-weight:700; border-left:2px solid #003471; padding-left:6px; margin-left:-8px; }
.main { flex:1; padding:16px 20px; overflow:hidden; }
.crumb { font-size:11px; color:#666; margin-bottom:10px; }
.crumb b { color:#1a1a1a; }
.hero { background:#f5f5f5; border:1px solid #ccc; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.hero .t { font-size:20px; font-weight:700; color:#003471; }
.hero .s { font-size:12px; color:#333; margin-top:3px; }
.hero .cta { background:#CC1418; color:#fff; font-size:12px; font-weight:700; text-transform:uppercase; padding:10px 18px; border-radius:2px; letter-spacing:.5px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.card { border:1px solid #cccccc; border-radius:2px; padding:8px; background:#fff; }
.swatch { height:66px; border-radius:2px; margin-bottom:6px; }
.g1 { background:linear-gradient(135deg,#8099b8,#003471); }
.g2 { background:linear-gradient(135deg,#cc1418,#7a0d10); }
.g3 { background:linear-gradient(135deg,#c9c9c9,#6b6b6b); }
.g4 { background:linear-gradient(135deg,#003471,#00234f); }
.part { font-family:'Courier New', monospace; font-size:10px; color:#666; }
.name { font-size:11px; font-weight:700; margin:3px 0; }
.price { font-size:14px; font-weight:700; color:#CC1418; }
.uom { font-size:9px; color:#666; }
.badge { display:inline-block; background:#003471; color:#fff; font-size:8px; font-weight:700; text-transform:uppercase; padding:2px 5px; border-radius:2px; letter-spacing:.4px; margin-bottom:4px; }
</style></head>
<body>
<div class="util"><span>1-800-FASTENAL | Branch Locator | VMI Portal</span><span>Cart (0)</span></div>
<div class="navbar">
<div class="brand">Fastenal</div>
<div class="navlinks"><div>FASTENERS</div><div>SAFETY</div><div>ELECTRICAL</div><div>TOOLS</div><div>CUTTING TOOLS</div></div>
<div class="search"><input placeholder="Search part number, brand, category" /><div class="btn">🔍</div></div>
<div class="acct">MY ACCOUNT</div>
</div>
<div class="body">
<div class="sidebar">
<h4>Categories</h4>
<div class="item active">Fasteners</div>
<div class="item">Bolts & Screws</div>
<div class="item">Nuts & Washers</div>
<div class="item">Anchors</div>
<div class="item">Rivets</div>
<div class="item">Safety Supply</div>
<div class="item">Cutting Tools</div>
<div class="item">Material Handling</div>
</div>
<div class="main">
<div class="crumb">Home / Fasteners / <b>Hex Cap Screws</b></div>
<div class="hero">
<div><div class="t">Hex Cap Screws — Grade 8</div><div class="s">Tiered pricing available for VMI & EDI accounts</div></div>
<div class="cta">Request Quote</div>
</div>
<div class="grid">
<div class="card"><span class="badge">In Stock</span><div class="swatch g1"></div><div class="part">HXC-3/8-16</div><div class="name">Hex Cap Screw 3/8-16 Gr.8</div><div class="price">$0.42</div><div class="uom">EA · MOQ 25</div></div>
<div class="card"><span class="badge">In Stock</span><div class="swatch g2"></div><div class="part">HXC-1/2-13</div><div class="name">Hex Cap Screw 1/2-13 Gr.8</div><div class="price">$0.61</div><div class="uom">EA · MOQ 25</div></div>
<div class="card"><span class="badge">In Stock</span><div class="swatch g3"></div><div class="part">WSH-FLT-3/8</div><div class="name">Flat Washer 3/8 Zinc</div><div class="price">$0.08</div><div class="uom">EA · MOQ 100</div></div>
<div class="card"><span class="badge">In Stock</span><div class="swatch g4"></div><div class="part">NUT-HEX-1/2</div><div class="name">Hex Nut 1/2-13 Gr.8</div><div class="price">$0.19</div><div class="uom">EA · MOQ 50</div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.38; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #337ab7; color: #ffffff;
border: none; border-radius: 4px; padding: 6px 12px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #555555;
border: 1px solid #337ab7; border-radius: 4px;
padding: 6px 12px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #080808;
border: 1px solid #c1c1c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.2px; background: #777777; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Industrial Safety Gear</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; color:#555555; font-size:14px;
}
*{box-sizing:border-box;}
.nav{
height:50px; background:#337ab7; display:flex; align-items:center; justify-content:space-between; padding:0 30px;
}
.logo{ font-size:16px; font-weight:700; color:#ffffff; }
.navlinks{ display:flex; gap:18px; font-size:12px; color:#eaf3fb; }
.subnav{ background:#f5f5f5; border-bottom:1px solid #e5e5e5; padding:8px 30px; font-size:11px; color:#777777; display:flex; gap:16px; }
.alerts{ display:flex; gap:10px; padding:12px 30px; }
.alert{ flex:1; border-radius:4px; padding:8px 12px; font-size:11px; font-weight:400; border:1px solid transparent; }
.alert.success{ background:#dff0d8; color:#3c763d; border-color:#d6e9c6; }
.alert.warning{ background:#fcf8e3; color:#8a6d3b; border-color:#faebcc; }
.alert.danger{ background:#f2dede; color:#a94442; border-color:#ebccd1; }
.alert.info{ background:#d9edf7; color:#31708f; border-color:#bce8f1; }
.hero{ background:#eeeeee; margin:0 30px 14px; border-radius:4px; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; }
.hero h2{ font-size:19px; margin:0 0 6px; color:#333333; font-weight:700; }
.hero p{ font-size:12px; margin:0; color:#777777; max-width:400px; }
.btn{ border-radius:4px; padding:9px 18px; font-size:12px; font-weight:400; color:#fff; }
.btn.primary{ background:#337ab7; border:1px solid #2e6da4; }
.section{ padding:0 30px; }
.sectitle{ font-size:14px; font-weight:700; color:#333333; margin:0 0 10px; }
.grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.card{ background:#ffffff; border:1px solid #e5e5e5; border-radius:4px; padding:10px; display:flex; flex-direction:column; gap:6px; }
.imgph{ height:52px; background:#f5f5f5; border-radius:4px; }
.pname{ font-size:11px; font-weight:700; color:#333333; }
.badge{ font-size:9px; font-weight:700; padding:2px 6px; border-radius:4px; color:#fff; width:fit-content; }
.badge.success{ background:#5cb85c; }
.badge.warning{ background:#f0ad4e; }
.badge.danger{ background:#d9534f; }
.badge.info{ background:#5bc0de; }
.price{ font-size:12px; font-weight:700; color:#337ab7; margin-top:auto; }
</style>
<div class="nav">
<div class="logo">Industrial Safety Gear</div>
<div class="navlinks">
<span>Products</span><span>Categories</span><span>Bulk Orders</span><span>Sign In</span>
</div>
</div>
<div class="subnav">
<span>Head Protection</span><span>Respiratory</span><span>Hand & Arm</span><span>Fall Arrest</span><span>Hi-Vis</span>
</div>
<div class="alerts">
<div class="alert success"><strong>In Stock</strong> — ships same day</div>
<div class="alert warning"><strong>Caution</strong> — verify size before order</div>
<div class="alert danger"><strong>Recall Notice</strong> — Lot #4471 harnesses</div>
<div class="alert info"><strong>Info</strong> — bulk pricing tiers available</div>
</div>
<div class="hero">
<div>
<h2>PPE Distributor Since 2002</h2>
<p>Hard hats, respirators, and fall-arrest harnesses — every product classed to the OSHA hazard level it protects against.</p>
</div>
<div class="btn primary">Request Quote</div>
</div>
<div class="section">
<div class="sectitle">Featured Products</div>
<div class="grid">
<div class="card"><div class="imgph"></div><div class="pname">Full-Brim Hard Hat</div><span class="badge success">In Stock</span><div class="price">$16.25</div></div>
<div class="card"><div class="imgph"></div><div class="pname">Half-Mask Respirator</div><span class="badge info">NIOSH</span><div class="price">$22.00</div></div>
<div class="card"><div class="imgph"></div><div class="pname">Cut-Level 4 Gloves</div><span class="badge success">In Stock</span><div class="price">$7.50</div></div>
<div class="card"><div class="imgph"></div><div class="pname">Fall Arrest Harness</div><span class="badge danger">Recalled Lot</span><div class="price">$89.99</div></div>
<div class="card"><div class="imgph"></div><div class="pname">Class 2 Hi-Vis Jacket</div><span class="badge warning">Low Stock</span><div class="price">$41.75</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #096fc8; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #096fc8; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8bb9e1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #81b0da; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #096fc8; color: #ffffff;
border: 1px solid #81b0da; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #096fc8; color: #f5f5f5;
border: 1px solid #2f84cf; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8bb9e1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1c79cb; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6f6f6; color:#333333; box-sizing:border-box;
font-family:'My Galano Grotesque','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; overflow:hidden; background:#f6f6f6; }
nav { height:56px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; }
.brand { font-size:16px; font-weight:600; letter-spacing:-0.2px; color:#333333; margin:0; }
.navlinks { display:flex; gap:26px; font-size:14px; font-weight:400; color:#333333; }
.navlinks span:first-child { color:#096fc8; }
.hero { flex:0 0 auto; padding:2px 40px 14px; }
.eyebrow { font-size:14px; font-weight:400; color:#096fc8; display:block; margin-bottom:4px; }
.hero h1 { font-size:58px; font-weight:700; line-height:0.92; letter-spacing:-2px; margin:0; color:#333333; }
.hero p { font-size:14px; font-weight:400; color:#6e6e6e; margin:10px 0 0; max-width:520px; line-height:1.5; }
.grid { flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr);
gap:12px; padding:6px 40px; overflow:hidden; }
.work { background:#ffffff; border-radius:8px; padding:12px 14px; display:flex; flex-direction:column; gap:6px;
box-shadow:none; overflow:hidden; }
.swatch { height:44px; border-radius:6px; }
.swatch.a { background:#e8f1fd; }
.swatch.b { background:#ffe6e3; }
.swatch.c { background:#e6e2f5; }
.swatch.d { background:#dcf0ff; }
.swatch.e { background:#fff0ee; }
.swatch.f { background:#eee6f6; }
.worktag { font-size:11px; font-weight:400; color:#096fc8; text-transform:uppercase; letter-spacing:0.04em; }
.worktitle { font-size:19px; font-weight:600; letter-spacing:-0.4px; margin:0; color:#333333; line-height:1.15; }
.worktitle.sky { color:#81b0da; }
.work p { font-size:12px; color:#9096a2; margin:0; }
.contact { flex:0 0 auto; padding:16px 40px 24px; display:flex; align-items:center; justify-content:space-between; }
.contact .msg { font-size:15px; font-weight:400; color:#333333; }
.contact .msg b { font-weight:600; }
.ctarow { display:flex; gap:12px; }
.btn-primary { background:#096fc8; color:#ffffff; border:none; border-radius:9999px; padding:0 24px; height:46px;
font-size:14px; font-weight:400; }
.btn-outline { background:#ffffff; color:#096fc8; border:1px solid #096fc8; border-radius:9999px; padding:0 24px;
height:46px; font-size:14px; font-weight:400; }
</style></head>
<body>
<div class="page">
<nav>
<p class="brand">Goodpatch</p>
<div class="navlinks"><span>Why design</span><span>Services</span><span>Work</span><span>Company</span></div>
</nav>
<div class="hero">
<span class="eyebrow">Work</span>
<h1>Design to empower</h1>
<p>Selected case studies from a studio that treats design as a strategic force — bridging business, product, and craft.</p>
</div>
<div class="grid">
<div class="work">
<div class="swatch a"></div>
<span class="worktag">Fintech</span>
<h3 class="worktitle sky">Ledger for everyone</h3>
<p>Consumer banking app redesign</p>
</div>
<div class="work">
<div class="swatch b"></div>
<span class="worktag">Mobility</span>
<h3 class="worktitle">Fleet dispatch console</h3>
<p>Enterprise operations platform</p>
</div>
<div class="work">
<div class="swatch c"></div>
<span class="worktag">Healthcare</span>
<h3 class="worktitle">Care coordination</h3>
<p>Cross-team clinical workflow</p>
</div>
<div class="work">
<div class="swatch d"></div>
<span class="worktag">Retail</span>
<h3 class="worktitle">Store of the future</h3>
<p>Omnichannel commerce system</p>
</div>
<div class="work">
<div class="swatch e"></div>
<span class="worktag">Culture</span>
<h3 class="worktitle">Design maturity study</h3>
<p>Organizational design research</p>
</div>
<div class="work">
<div class="swatch f"></div>
<span class="worktag">Products</span>
<h3 class="worktitle">Prototyping toolkit</h3>
<p>In-house product for designers</p>
</div>
</div>
<div class="contact">
<span class="msg">Won't you <b>prove the power of design</b> together?</span>
<div class="ctarow">
<button class="btn-primary">View selected works</button>
<button class="btn-outline">View career info</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #df1e2e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #df1e2e;
border: 1px solid #df1e2e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #240507; color: #df1e2e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
/* left: class browse */
.browse { width:400px; height:640px; border-right:1px solid #2C2C2E; display:flex; flex-direction:column; }
.header { height:50px; flex-shrink:0; display:flex; align-items:center; padding:0 18px;
font-size:24px; font-weight:900; letter-spacing:-0.6px; }
.pills { display:flex; gap:8px; padding:8px 18px 12px; overflow:hidden; }
.pill { font-size:12px; font-weight:600; padding:7px 15px; border-radius:500px; white-space:nowrap; }
.pill.sel { background:#fff; color:#000; }
.pill.uns { background:#1C1C1E; border:1px solid #2C2C2E; color:#B5B5BA; }
.cards { flex:1; overflow:hidden; padding:0 18px; display:flex; flex-direction:column; gap:18px; }
.card { background:#121212; border:1px solid #2C2C2E; border-radius:14px; overflow:hidden; }
.thumb { height:110px; position:relative; background:linear-gradient(135deg,#3a1418,#121212); }
.thumb.b { background:linear-gradient(135deg,#3a2a10,#121212); }
.live-badge { position:absolute; top:8px; left:8px; background:#DF1E2E; color:#fff; font-size:9px;
font-weight:800; text-transform:uppercase; padding:3px 7px; border-radius:5px; display:flex; align-items:center; gap:4px; }
.live-dot { width:5px; height:5px; border-radius:50%; background:#fff; }
.dur-badge { position:absolute; top:8px; right:8px; background:rgba(0,0,0,0.6); color:#fff; font-size:10px;
font-weight:600; padding:3px 8px; border-radius:5px; }
.card-body { padding:12px 14px; }
.disc { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#FF4B57; }
.ctitle { font-size:16px; font-weight:800; margin-top:3px; }
.instr { font-size:13px; color:#B5B5BA; margin-top:2px; }
.meta { font-size:11px; color:#7A7A80; margin-top:5px; }
.meta .star { color:#F0A030; }
/* right: in-class metrics */
.inclass { flex:1; height:640px; display:flex; flex-direction:column; background:#000; position:relative; }
.video { height:220px; background:linear-gradient(160deg,#241012,#050505); position:relative;
display:flex; align-items:center; justify-content:center; }
.video .cue { color:#B5B5BA; font-size:12px; font-weight:600; letter-spacing:0.4px; }
.live-badge2 { position:absolute; top:12px; left:12px; background:#DF1E2E; color:#fff; font-size:10px;
font-weight:800; text-transform:uppercase; padding:4px 8px; border-radius:5px; display:flex; align-items:center; gap:5px; }
.metrics-panel { flex:1; padding:16px 20px; overflow:hidden; }
.ring-row { display:flex; gap:20px; align-items:center; }
.ring { width:96px; height:96px; border-radius:50%; flex-shrink:0;
background:conic-gradient(#DF1E2E 0deg 250deg, #262629 250deg 360deg);
display:flex; align-items:center; justify-content:center; position:relative; }
.ring::before { content:''; position:absolute; inset:9px; border-radius:50%; background:#000; }
.ring-inner { position:relative; text-align:center; }
.ring-val { font-size:26px; font-weight:900; }
.ring-label { font-size:8px; font-weight:700; text-transform:uppercase; color:#7A7A80; letter-spacing:0.4px; }
.metric-col { flex:1; display:flex; flex-direction:column; }
.metric-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0;
border-bottom:1px solid #2C2C2E; }
.m-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; color:#B5B5BA; }
.m-val { font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
.lb-header { font-size:11px; font-weight:700; text-transform:uppercase; color:#B5B5BA; margin:16px 0 8px; }
.lb-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #2C2C2E; }
.lb-rank { font-size:13px; font-weight:800; color:#B5B5BA; width:18px; font-variant-numeric:tabular-nums; }
.lb-rank.me { color:#FF4B57; }
.lb-avatar { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#DF1E2E,#3a1418); }
.lb-name { flex:1; font-size:13px; font-weight:600; }
.lb-out { font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
.lb-row.me { background:rgba(223,30,46,0.12); margin:0 -20px; padding:8px 20px; }
.lb-row.me .lb-out { color:#FF4B57; }
.take-cta { position:absolute; left:20px; right:20px; bottom:16px; background:#DF1E2E; color:#fff;
text-align:center; padding:14px 0; border-radius:500px; font-weight:700; font-size:15px; display:none; }
</style></head>
<body>
<div class="app">
<div class="browse">
<div class="header">Peloton (iOS)</div>
<div class="pills">
<div class="pill sel">All</div>
<div class="pill uns">Cycling</div>
<div class="pill uns">Strength</div>
<div class="pill uns">Yoga</div>
<div class="pill uns">Running</div>
</div>
<div class="cards">
<div class="card">
<div class="thumb"><div class="live-badge"><span class="live-dot"></span>LIVE</div><div class="dur-badge">45 min</div></div>
<div class="card-body">
<div class="disc">Power Zone Ride</div>
<div class="ctitle">45 min Power Zone Max</div>
<div class="instr">Olivia Amato</div>
<div class="meta"><span class="star">★</span> 4.9 · 12,408 taken</div>
</div>
</div>
<div class="card">
<div class="thumb b"><div class="dur-badge">30 min</div></div>
<div class="card-body">
<div class="disc">Strength</div>
<div class="ctitle">30 min Full Body</div>
<div class="instr">Callie Gullickson</div>
<div class="meta"><span class="star">★</span> 4.8 · 8,204 taken</div>
</div>
</div>
</div>
</div>
<div class="inclass">
<div class="video"><div class="live-badge2"><span class="live-dot"></span>LIVE</div><span class="cue">Studio feed</span></div>
<div class="metrics-panel">
<div class="ring-row">
<div class="ring"><div class="ring-inner"><div class="ring-val">312</div><div class="ring-label">Total kJ</div></div></div>
<div class="metric-col">
<div class="metric-row"><span class="m-label">Cadence</span><span class="m-val" style="color:#E5402A">94</span></div>
<div class="metric-row"><span class="m-label">Resistance</span><span class="m-val" style="color:#F0A030">52</span></div>
<div class="metric-row"><span class="m-label">Output</span><span class="m-val" style="color:#FF4B57">218 W</span></div>
<div class="metric-row"><span class="m-label">Heart Rate</span><span class="m-val">148</span></div>
</div>
</div>
<div class="lb-header">Leaderboard · 1,284 riders</div>
<div class="lb-row"><span class="lb-rank">4</span><div class="lb-avatar"></div><span class="lb-name">Marcus T.</span><span class="lb-out">241 W</span></div>
<div class="lb-row me"><span class="lb-rank me">5</span><div class="lb-avatar"></div><span class="lb-name">You</span><span class="lb-out">218 W</span></div>
<div class="lb-row"><span class="lb-rank">6</span><div class="lb-avatar"></div><span class="lb-name">Priya S.</span><span class="lb-out">205 W</span></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ebf2fb; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ebf2fb; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #003344; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #ebf2fb; color: #003344;
border: 1px solid #003344; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #484848;
border: 1px solid #b7bcc3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #b79b65; color: #1a1a1a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ebf2fb; font-family:'Roboto',arial,sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:60px;background:#1a1a1a;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:20px;font-weight:600;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#fff;}
.navlinks .active{color:#b79b65;}
.promo{height:32px;background:#f9c929;color:#1a1a1a;font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;}
.hero{height:210px;background:#003344;color:#fff;display:flex;align-items:center;padding:0 30px;}
.hero h1{font-size:32px;font-weight:600;line-height:1.2;letter-spacing:-.3px;margin:0 0 14px;max-width:400px;}
.cta{display:inline-block;background:#b79b65;color:#1a1a1a;font-size:15px;font-weight:500;letter-spacing:.5px;padding:14px 32px;border-radius:8px;}
.rowlabel{padding:14px 30px 8px;font-size:20px;font-weight:600;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:196px;background:#fff;border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;}
.thumb{aspect-ratio:4/3;background:#f8fafc;}
.body{padding:12px 14px;}
.badge{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;border-radius:4px;padding:4px 8px;margin-bottom:6px;}
.ptitle{font-size:16px;font-weight:500;}
.pprice{font-size:20px;font-weight:600;color:#003344;margin-top:4px;}
</style>
<div class="promo">Free shipping on orders over $50</div>
<div class="nav">
<div class="logo">Trek</div>
<div class="navlinks"><div class="active">Road</div><div>Mountain</div><div>Electric</div><div>Kids</div></div>
</div>
<div class="hero">
<h1>Precision engineering. Every ride.</h1>
<div class="cta">Find a Dealer</div>
</div>
<div class="rowlabel">Featured Bikes</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003344,#b79b65)"></div><div class="body"><span class="badge" style="background:#003344;color:#fff">New</span><div class="ptitle">Domane SL 6</div><div class="pprice">$3,899.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b79b65,#003344)"></div><div class="body"><span class="badge" style="background:#b79b65;color:#1a1a1a">Best Seller</span><div class="ptitle">Marlin 7 Mountain</div><div class="pprice">$1,099.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a1a1a,#b79b65)"></div><div class="body"><span class="badge" style="background:#c13515;color:#fff">Sale</span><div class="ptitle">Rail 5 Electric</div><div class="pprice">$3,499.99</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #646464; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #025f1d; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #025f1d;
border: 1px solid #025f1d; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #303030;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #646464; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #03912c; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:'brandon-grotesque','Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
background:linear-gradient(90deg,#012d0e,#025f1d); }
.brand { font-size:19px; font-weight:700; color:#fff; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#cfe9cf; }
.btn-primary { background:#fff; color:#025f1d; border:none; border-radius:8px; padding:11px 20px; font-size:13px; font-weight:700; }
main { display:flex; height:calc(640px - 66px - 42px); }
.gallery { width:380px; background:#f9f9f9; position:relative; display:flex; align-items:center; justify-content:center; }
.bottle { width:80px; height:210px; border-radius:10px 10px 4px 4px; background:linear-gradient(180deg,#03912c,#025f1d 70%);
position:relative; }
.bottle::before { content:''; position:absolute; top:-22px; left:26px; width:28px; height:26px; border-radius:4px; background:#012d0e; }
.badge-eco { position:absolute; top:20px; left:20px; background:#025f1d; color:#fff; font-size:11px; font-weight:600; padding:4px 10px; border-radius:8px; }
.info { flex:1; padding:28px 32px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:12px; color:#646464; text-transform:uppercase; letter-spacing:0.4px; }
h1 { font-size:22px; font-weight:700; margin:0; }
.price { font-size:20px; font-weight:700; color:#025f1d; }
.desc { font-family:'Open Sans',Arial,sans-serif; font-size:13px; color:#303030; line-height:1.55; max-width:340px; }
.sizes { display:flex; gap:8px; }
.size { border:1px solid #d1d1d1; border-radius:8px; padding:8px 14px; font-size:12px; }
.size.on { border-color:#025f1d; color:#025f1d; background:#f2f8f2; }
.alert { background:#fdecec; color:#e02b27; font-size:12px; padding:8px 12px; border-radius:8px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#025f1d; color:#fff; border:none; border-radius:8px; padding:14px; font-size:14px; font-weight:700; }
.btn-sec { background:#fff; color:#111; border:1px solid #d1d1d1; border-radius:8px; padding:14px 18px; font-size:13px; font-weight:600; }
.searchpill { background:#f5f5f5; border-radius:9999px; padding:8px 16px; font-size:12px; color:#646464; }
footer { padding:12px 32px; border-top:1px solid #e8e8e8; font-size:11px; color:#646464; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Bio Kleen</div>
<div class="navlinks"><span>Marine Care</span><span>Home & Auto</span><span>Concentrates</span></div>
<button class="btn-primary">Shop Now</button>
</nav>
<main>
<div class="gallery"><span class="badge-eco">Biodegradable</span><div class="bottle"></div></div>
<div class="info">
<span class="cat">Enzyme Concentrate Cleaner</span>
<h1>Bio-Kleen Marine Concentrate</h1>
<div class="price">$24.99</div>
<p class="desc">Plant-enzyme formula lifts grease and salt film without harsh solvents — safe for gelcoat, teak, and fabric.</p>
<div class="sizes"><span class="size on">32 oz</span><span class="size">1 gal</span><span class="size">5 gal</span></div>
<div class="alert">Low stock — 6 units left at this size</div>
<div class="btn-row">
<button class="btn-add">Add to Cart</button>
<button class="btn-sec">View Safety Data</button>
</div>
</div>
</main>
<footer><span>© Bio Kleen</span><span>Enzyme-based · Biodegradable · Made in the USA</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0052ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0052ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87acfa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7931a; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0052ff; color: #f7931a;
border: 1px solid #f7931a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0052ff; color: #f5f5f5;
border: 1px solid #276cfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87acfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #285cda; color: #f7931a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#0A0B0D; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-variant-numeric:tabular-nums; }
* { box-sizing:border-box; }
.screen { width:960px; height:640px; display:flex; flex-direction:column; }
.nav { height:52px; flex:0 0 52px; display:flex; align-items:center; justify-content:space-between;
padding:0 26px; border-bottom:0.5px solid #E1E4E8; }
.cmark { width:26px; height:26px; border-radius:50%; border:3px solid #0052FF; position:relative; }
.cmark::after { content:''; position:absolute; left:-1px; right:-1px; top:50%; height:3px;
background:#0052FF; transform:translateY(-1.5px); }
.navicons { display:flex; gap:18px; color:#5B616E; font-size:16px; }
.body { flex:1; display:flex; padding:20px 26px 0; gap:36px; overflow:hidden; }
.left { flex:1.15; }
.label { font-size:11px; font-weight:700; letter-spacing:0.6pt; color:#5B616E; text-transform:uppercase; }
.hero { font-size:38px; font-weight:700; margin:6px 0 2px; letter-spacing:-0.5pt; }
.change { font-size:15px; font-weight:500; color:#05B169; }
.chartwrap { margin-top:14px; }
.chips { display:flex; gap:6px; margin-top:8px; }
.chip { font-size:12px; font-weight:600; color:#5B616E; padding:5px 10px; border-radius:8px; letter-spacing:0.3pt; }
.chip.active { background:#EEF0F3; color:#0A0B0D; }
.quad { display:flex; gap:8px; margin-top:20px; }
.qbtn { flex:1; background:#F7F8FA; border-radius:12px; padding:12px 4px; text-align:center; }
.qbtn .ic { font-size:18px; color:#0052FF; }
.qbtn .lb { font-size:12px; font-weight:500; margin-top:6px; }
.right { flex:1; border-left:0.5px solid #E1E4E8; padding-left:30px; overflow:hidden; }
.sectitle { font-size:16px; font-weight:700; margin-bottom:8px; }
.row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:0.5px solid #E1E4E8; }
.icon { width:36px; height:36px; border-radius:50%; color:#fff; font-size:14px; font-weight:700;
display:flex; align-items:center; justify-content:center; flex:0 0 36px; }
.btc { background:#F7931A; }
.eth { background:#627EEA; }
.usdc { background:#2775CA; }
.amid { flex:1; }
.aname { font-size:14px; font-weight:600; }
.atick { font-size:11.5px; color:#5B616E; letter-spacing:0.3pt; }
.aend { text-align:right; }
.aprice { font-size:14px; font-weight:500; }
.achg { font-size:11.5px; font-weight:500; }
.up { color:#05B169; }
.down { color:#CF202F; }
.spark { width:44px; height:16px; }
</style></head>
<body>
<div class="screen">
<div class="nav"><div class="cmark"></div>
<div class="navicons"><span>🔔</span><span>🔍</span></div></div>
<div class="body">
<div class="left">
<div class="label">Portfolio Balance</div>
<div class="hero">$12,847.93</div>
<div class="change">+$847.93 (+6.59%)</div>
<div class="chartwrap">
<svg width="380" height="120" viewBox="0 0 380 120">
<polyline points="0,90 40,80 80,86 120,60 160,68 200,40 240,50 280,22 320,34 380,14"
fill="none" stroke="#05B169" stroke-width="2"/>
</svg>
<div class="chips"><span class="chip">1H</span><span class="chip active">1D</span>
<span class="chip">1W</span><span class="chip">1M</span><span class="chip">1Y</span><span class="chip">ALL</span></div>
</div>
<div class="quad">
<div class="qbtn"><div class="ic">↑</div><div class="lb">Buy</div></div>
<div class="qbtn"><div class="ic">↓</div><div class="lb">Sell</div></div>
<div class="qbtn"><div class="ic">✈</div><div class="lb">Send</div></div>
<div class="qbtn"><div class="ic">▤</div><div class="lb">Receive</div></div>
</div>
</div>
<div class="right">
<div class="sectitle">Coinbase (iOS)</div>
<div class="row"><div class="icon btc">₿</div>
<div class="amid"><div class="aname">Bitcoin</div><div class="atick">BTC · 0.1842 BTC</div></div>
<svg class="spark" viewBox="0 0 44 16"><polyline points="0,12 8,9 16,10 24,4 32,6 44,2" fill="none" stroke="#05B169" stroke-width="1.5"/></svg>
<div class="aend"><div class="aprice">$12,389.42</div><div class="achg up">+1.92%</div></div></div>
<div class="row"><div class="icon eth">◆</div>
<div class="amid"><div class="aname">Ethereum</div><div class="atick">ETH · 3.21 ETH</div></div>
<svg class="spark" viewBox="0 0 44 16"><polyline points="0,4 8,7 16,5 24,11 32,9 44,13" fill="none" stroke="#CF202F" stroke-width="1.5"/></svg>
<div class="aend"><div class="aprice">$8,102.10</div><div class="achg down">-0.84%</div></div></div>
<div class="row"><div class="icon usdc">$</div>
<div class="amid"><div class="aname">USD Coin</div><div class="atick">USDC · 356.51 USDC</div></div>
<svg class="spark" viewBox="0 0 44 16"><polyline points="0,8 8,8 16,8 24,8 32,8 44,8" fill="none" stroke="#05B169" stroke-width="1.5"/></svg>
<div class="aend"><div class="aprice">$356.51</div><div class="achg up">+0.01%</div></div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff1a1a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #ff1a1a;
border: 1px solid #ff1a1a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ffdada; color: #ff1a1a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#2B2B2B; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { width:100%; height:100%; display:flex; flex-direction:column; }
.photohdr { position:relative; height:154px; flex-shrink:0;
background:linear-gradient(135deg,#e6b980 0%,#c8895a 35%,#8a5a3a 70%,#5c3a24 100%); }
.circbtn { position:absolute; top:14px; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,0.45);
display:flex; align-items:center; justify-content:center; }
.circbtn.back { left:14px; } .circbtn.share { right:14px; }
.circbtn svg { width:16px; height:16px; }
.photocount { position:absolute; right:14px; bottom:12px; background:rgba(0,0,0,0.6); color:#fff; font-size:11px;
font-weight:600; padding:4px 8px; border-radius:6px; }
.content { flex:1; min-height:0; padding:0 20px; display:flex; flex-direction:column; }
.bizname { font-size:24px; font-weight:800; margin:12px 0 6px; letter-spacing:-0.3px; }
.starsrow { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.stars { display:flex; gap:2px; }
.stars svg { width:16px; height:16px; }
.ratenum { font-size:15px; font-weight:700; }
.revlink { font-size:14px; font-weight:700; color:#0073BB; }
.catline { font-size:14px; font-weight:600; color:#6E6E6E; margin-bottom:4px; }
.hoursline { font-size:14px; color:#6E6E6E; margin-bottom:10px; }
.hoursline b { color:#2DA44E; font-weight:700; }
.actionrow { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.writebtn { background:#FF1A1A; color:#fff; font-size:15px; font-weight:700; border-radius:8px; padding:11px 22px;
display:flex; align-items:center; gap:8px; }
.writebtn svg { width:16px; height:16px; }
.ghostbtn { width:56px; height:44px; border:1px solid #E0E0E0; border-radius:8px; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:3px; }
.ghostbtn svg { width:16px; height:16px; color:#6E6E6E; }
.ghostbtn span { font-size:9px; font-weight:600; color:#6E6E6E; }
.band { height:8px; background:#F0F0F0; margin:0 -20px 10px; flex-shrink:0; }
.sectionhdr { font-size:18px; font-weight:700; margin-bottom:8px; }
.reviews { flex:1; min-height:0; display:flex; flex-direction:column; gap:0; }
.rcard { display:flex; padding:12px 0; border-bottom:1px solid #E0E0E0; }
.rcard:last-child { border-bottom:none; }
.ravatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
color:#fff; font-size:14px; font-weight:700; }
.rav1 { background:linear-gradient(135deg,#D32323,#8A1818); }
.rav2 { background:linear-gradient(135deg,#0073BB,#163A55); }
.rbody { margin-left:12px; flex:1; min-width:0; }
.rtop { display:flex; justify-content:space-between; align-items:flex-start; }
.rname { font-size:14px; font-weight:700; }
.rloc { font-size:12px; font-weight:600; color:#6E6E6E; }
.rdate { font-size:12px; font-weight:600; color:#6E6E6E; }
.rstars { display:flex; gap:1px; margin:5px 0; }
.rstars svg { width:14px; height:14px; }
.rtext { font-size:13px; line-height:1.5; color:#2B2B2B; }
.votes { display:flex; gap:16px; margin-top:8px; }
.vote { display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:#6E6E6E; }
.vote svg { width:14px; height:14px; }
.vote.on { color:#FF1A1A; }
.star-f { fill:#F25C05; } .star-e { fill:#E3E3E0; }
</style></head>
<body>
<div class="wrap">
<div class="photohdr">
<div class="circbtn back"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4"><path d="M15 6l-6 6 6 6"/></svg></div>
<div class="circbtn share"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2"><circle cx="6" cy="12" r="2.4"/><circle cx="18" cy="6" r="2.4"/><circle cx="18" cy="18" r="2.4"/><path d="M8.2 10.8L15.8 7.2M8.2 13.2l7.6 3.6"/></svg></div>
<div class="photocount">1 / 248 photos</div>
</div>
<div class="content">
<p class="bizname">Yelp (iOS)</p>
<div class="starsrow">
<div class="stars">
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-e"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
</div>
<span class="ratenum">4.3</span>
<span class="revlink">3,812 reviews</span>
</div>
<div class="catline">$$ · Bakeries · Cafes</div>
<div class="hoursline"><b>Open</b> · Closes 8:00 PM</div>
<div class="actionrow">
<div class="writebtn"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z"/></svg>Write a Review</div>
<div class="ghostbtn"><svg viewBox="0 0 24 24" fill="none" stroke="#6E6E6E" stroke-width="2"><path d="M6 3h12v18l-6-4-6 4z"/></svg><span>Save</span></div>
<div class="ghostbtn"><svg viewBox="0 0 24 24" fill="none" stroke="#6E6E6E" stroke-width="2"><circle cx="6" cy="12" r="2.2"/><circle cx="18" cy="6" r="2.2"/><circle cx="18" cy="18" r="2.2"/><path d="M8 10.8l7.7-3.6M8 13.2l7.7 3.6"/></svg><span>Share</span></div>
<div class="ghostbtn"><svg viewBox="0 0 24 24" fill="none" stroke="#6E6E6E" stroke-width="2"><path d="M9 20l-5-2V5l5 2M9 20l6-2M9 20V7M15 18l5 2V7l-5-2M15 18V5M15 5L9 7"/></svg><span>Directions</span></div>
</div>
<div class="band"></div>
<div class="sectionhdr">Recommended Reviews</div>
<div class="reviews">
<div class="rcard">
<div class="ravatar rav1">HK</div>
<div class="rbody">
<div class="rtop">
<div><span class="rname">Hana Kim</span><div class="rloc">San Francisco, CA · 142 reviews</div></div>
<span class="rdate">Oct 9, 2024</span>
</div>
<div class="rstars">
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
</div>
<div class="rtext">The sourdough here ruined every other bakery for me. Got here right at open and the corner table by the window was worth the early alarm.</div>
<div class="votes">
<div class="vote on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 22V11M2 13v7a2 2 0 002 2h11.3a2 2 0 002-1.7l1.4-8A2 2 0 0016.7 10H13l1-5.5A1.5 1.5 0 0012.6 3L7 11"/></svg>Useful 24</div>
<div class="vote"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/></svg>Funny 3</div>
<div class="vote"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v3M12 18v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M3 12h3M18 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/></svg>Cool 8</div>
</div>
</div>
</div>
<div class="rcard">
<div class="ravatar rav2">TM</div>
<div class="rbody">
<div class="rtop">
<div><span class="rname">Theo Martins</span><div class="rloc">Oakland, CA · 61 reviews</div></div>
<span class="rdate">Sep 22, 2024</span>
</div>
<div class="rstars">
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-f"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
<svg viewBox="0 0 24 24" class="star-e"><path d="M12 2l3 6.5 7 1-5.2 5 1.3 7-6.1-3.5-6.1 3.5 1.3-7L2 9.5l7-1z"/></svg>
</div>
<div class="rtext">Line moves fast for how busy it gets. Ask for the almond croissant warmed — that's the move.</div>
<div class="votes">
<div class="vote"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 22V11M2 13v7a2 2 0 002 2h11.3a2 2 0 002-1.7l1.4-8A2 2 0 0016.7 10H13l1-5.5A1.5 1.5 0 0012.6 3L7 11"/></svg>Useful 9</div>
<div class="vote"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/></svg>Funny 1</div>
<div class="vote"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v3M12 18v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M3 12h3M18 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/></svg>Cool 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e8552d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e8552d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d14a26; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e8552d; color: #000000;
border: 1px solid #d14a26; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e8552d; color: #f5f5f5;
border: 1px solid #ea6f4d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e4532c; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1f1f1f; box-sizing:border-box;
font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing: border-box; }
.app { display:flex; width:960px; height:640px; }
.rail { width:76px; flex:0 0 76px; background:#f7f7f7; border-right:1px solid #e6e6e6;
display:flex; flex-direction:column; padding-top:8px; }
.rail-item { height:66px; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:6px; font-size:11px; font-weight:600; color:#888888; border-left:3px solid transparent; }
.rail-item .ico { width:22px; height:22px; border-radius:6px; background:#d4d4d4; }
.rail-item.active { background:#fdede7; color:#e8552d; border-left:3px solid #e8552d; }
.rail-item.active .ico { background:#e8552d; }
.main { flex:1 1 auto; display:flex; flex-direction:column; }
.topbar { height:56px; border-bottom:1px solid #e6e6e6; display:flex; align-items:center;
justify-content:space-between; padding:0 20px; background:#ffffff; }
.topbar .title { font-size:22px; font-weight:700; color:#1f1f1f; }
.topbar .brand { font-size:12px; font-weight:600; color:#888888; margin-left:10px; letter-spacing:0.02em; }
.topbar .shift { font-size:12px; font-weight:400; color:#888888; }
.work { flex:1 1 auto; display:flex; }
.grid-wrap { flex:1 1 auto; background:#f7f7f7; padding:16px; }
.tile-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.tile { background:#ffffff; border-radius:8px; padding:12px; display:flex; flex-direction:column;
gap:6px; min-height:78px; justify-content:center; }
.tile.active { background:#fdede7; border:1px solid #e8552d; }
.tile .name { font-size:17px; font-weight:600; color:#1f1f1f; line-height:1.3; }
.tile .price { font-size:15px; font-weight:400; color:#555555; }
.order { width:312px; flex:0 0 312px; background:#ffffff; border-left:1px solid #e6e6e6;
box-shadow:-2px 0 8px rgba(0,0,0,0.03); padding:16px; display:flex; flex-direction:column; }
.order-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.order-head h3 { font-size:22px; font-weight:700; margin:0; color:#1f1f1f; }
.badge { border-radius:4px; padding:2px 8px; font-size:12px; font-weight:600; color:#1f1f1f; background:#f5a623; }
.lines { flex:1 1 auto; margin-top:6px; }
.line { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #e6e6e6;
font-size:15px; font-weight:400; color:#1f1f1f; }
.line .qty { color:#888888; margin-right:8px; }
.total-row { display:flex; justify-content:space-between; align-items:baseline; padding:14px 0; }
.total-row .label { font-size:15px; font-weight:400; color:#555555; }
.total-row .amt { font-size:24px; font-weight:700; color:#1f1f1f; }
.charge { background:#e8552d; color:#ffffff; border:none; border-radius:8px; padding:12px 24px;
font-size:16px; font-weight:600; width:100%; height:48px; }
</style></head>
<body>
<div class="app">
<div class="rail">
<div class="rail-item active"><div class="ico"></div>Order</div>
<div class="rail-item"><div class="ico"></div>Tables</div>
<div class="rail-item"><div class="ico"></div>Menu</div>
<div class="rail-item"><div class="ico"></div>Reports</div>
<div class="rail-item"><div class="ico"></div>Settings</div>
</div>
<div class="main">
<div class="topbar">
<div><span class="title">Table 12 · Dine-in</span><span class="brand">iCHEF POS</span></div>
<span class="shift">Shift started 11:02 AM</span>
</div>
<div class="work">
<div class="grid-wrap">
<div class="tile-grid">
<div class="tile"><div class="name">Beef Noodle Soup</div><div class="price">$8.50</div></div>
<div class="tile active"><div class="name">Braised Pork Rice</div><div class="price">$6.00</div></div>
<div class="tile"><div class="name">Iced Oolong Tea</div><div class="price">$2.20</div></div>
<div class="tile"><div class="name">Pan-Fried Dumplings</div><div class="price">$5.80</div></div>
<div class="tile"><div class="name">Pickled Cucumber</div><div class="price">$2.00</div></div>
<div class="tile"><div class="name">Soy Egg</div><div class="price">$1.50</div></div>
<div class="tile"><div class="name">Spicy Wontons</div><div class="price">$6.20</div></div>
<div class="tile"><div class="name">Hot Soy Milk</div><div class="price">$1.80</div></div>
<div class="tile"><div class="name">Stir-Fried Greens</div><div class="price">$4.00</div></div>
</div>
</div>
<div class="order">
<div class="order-head">
<h3>Order #482</h3>
<span class="badge">Pending</span>
</div>
<div class="lines">
<div class="line"><span><span class="qty">2×</span>Braised Pork Rice</span><span>$12.00</span></div>
<div class="line"><span><span class="qty">1×</span>Beef Noodle Soup</span><span>$8.50</span></div>
<div class="line"><span><span class="qty">2×</span>Iced Oolong Tea</span><span>$4.40</span></div>
<div class="line"><span><span class="qty">1×</span>Pan-Fried Dumplings</span><span>$5.80</span></div>
</div>
<div class="total-row"><span class="label">Total</span><span class="amt">$30.70</span></div>
<button class="charge">Charge $30.70</button>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ff10a4; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #fafafa; color: #121212;
border: 1px solid #ff10a4; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #403629;
border: 1px solid #c0c0c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #ff10a4; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Ernie Ball — Home</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#fafafa; color:#403629;
font-family:'Gotham SSm A','Gotham SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
.page{width:960px;height:640px;display:flex;flex-direction:column;}
header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#121212;}
.logo{font-size:19px;font-weight:600;color:#fff;}
.logo span{color:#ff10a4;}
nav{display:flex;gap:20px;}
nav a{font-size:12px;font-weight:600;color:#d0d0d0;}
.nav-cta{background:#ff10a4;color:#fff;padding:8px 18px;border-radius:8px;font-size:12px;font-weight:600;}
.hero{display:flex;background:#003399;padding:26px 28px;gap:24px;position:relative;overflow:hidden;}
.hero::after{content:'';position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;background:rgba(255,16,164,0.18);}
.hero-copy{flex:1;z-index:2;}
.hero-copy .kicker{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#ff10a4;margin-bottom:8px;}
.hero-copy h1{font-size:32px;font-weight:600;color:#fff;margin:0 0 12px;line-height:1.15;letter-spacing:-0.3px;}
.hero-copy p{font-size:13px;color:#c2c2c2;max-width:340px;margin:0 0 16px;line-height:1.5;}
.hero-cta{display:inline-block;background:#ff10a4;color:#fff;padding:11px 22px;border-radius:8px;font-size:12px;font-weight:600;}
.strings{width:230px;height:150px;position:relative;z-index:2;}
.neck{position:absolute;left:0;top:20px;width:220px;height:16px;background:linear-gradient(90deg,#241912,#403629);border-radius:2px;transform:rotate(-8deg);}
.neck::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,#d0d0d0 0 1px, transparent 1px 22px);}
.pick{position:absolute;left:130px;top:90px;width:38px;height:44px;border-radius:50% 50% 50% 0;background:#ff10a4;transform:rotate(20deg);}
main{flex:1;padding:18px 28px 0;}
.row-head{display:flex;justify-content:space-between;margin-bottom:12px;}
.row-head h2{font-size:16px;margin:0;color:#121212;}
.row-head span{font-size:11px;color:#ff10a4;font-weight:600;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#ffffff;border:1px solid #d0d0d0;border-radius:8px;padding:10px;position:relative;}
.thumb{height:64px;border-radius:6px;background:linear-gradient(150deg,#ebebeb,#d8d8d8);margin-bottom:8px;}
.badge{position:absolute;top:6px;left:6px;font-size:8px;font-weight:600;padding:3px 6px;border-radius:4px;color:#fff;background:#ff10a4;text-transform:uppercase;}
.card h4{font-size:11px;margin:0 0 6px;color:#121212;font-weight:600;}
.card .stars{color:#e91e63;font-size:10px;margin-bottom:4px;}
.card .price{font-size:13px;font-weight:600;color:#121212;}
footer{background:#241912;padding:14px 28px;display:flex;justify-content:space-between;align-items:center;margin-top:14px;}
footer span{font-size:10px;color:#c2c2c2;}
</style>
<div class="page">
<header>
<div class="logo">Ernie Ball<span>.</span></div>
<nav><a>Strings</a><a>Straps</a><a>Cases</a><a>Accessories</a></nav>
<div class="nav-cta">Shop Now</div>
</header>
<div class="hero">
<div class="hero-copy">
<div class="kicker">California Since 1962</div>
<h1>Always, always in tune.</h1>
<p>The strings, straps, and picks trusted backstage — loud where it counts, serious where it matters.</p>
<div class="hero-cta">Shop Strings</div>
</div>
<div class="strings"><div class="neck"></div><div class="pick"></div></div>
</div>
<main>
<div class="row-head"><h2>Fan Favorites</h2><span>Shop All →</span></div>
<div class="grid">
<div class="card"><div class="badge">Best Seller</div><div class="thumb"></div><h4>Regular Slinky Electric</h4><div class="stars">★★★★★</div><div class="price">$8.99</div></div>
<div class="card"><div class="thumb"></div><h4>Earthwood Acoustic 80/20</h4><div class="stars">★★★★★</div><div class="price">$10.99</div></div>
<div class="card"><div class="thumb"></div><h4>Polypro Guitar Strap</h4><div class="stars">★★★★☆</div><div class="price">$16.99</div></div>
<div class="card"><div class="thumb"></div><h4>Cellulose Picks, 6-Pack</h4><div class="stars">★★★★★</div><div class="price">$5.99</div></div>
</div>
</main>
<footer>
<span>© Ernie Ball — Strings Since 1962</span>
<span>String Guide · Artists · Support</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfbfb; color: #090a3f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfbfb; color: #090a3f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #090a3f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; background: #2a93f4; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; background: #fbfbfb; color: #090a3f;
border: 1px solid #2a93f4; border-radius: 8px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fbfbfb; color: #606060;
border: 1px solid #bebfcc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #e89e50; color: #090a3f;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fbfbfb; font-family:'Lato',Arial,sans-serif; color:#606060; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#fbfbfb;border-bottom:1px solid #dadada;}
.logo{font-family:'Poppins',sans-serif;font-size:20px;font-weight:600;color:#090a3f;}
.navlinks{display:flex;gap:24px;font-family:'Poppins',sans-serif;font-size:15px;font-weight:500;}
.navlinks .active{color:#2a93f4;border-bottom:2px solid #2a93f4;padding-bottom:24px;}
.cta{height:44px;padding:0 24px;background:#2a93f4;color:#fff;border-radius:8px;display:flex;align-items:center;font-family:'Poppins',sans-serif;font-size:14px;font-weight:500;}
.hero{height:220px;background:linear-gradient(135deg,#090a3f 0%,#00449e 100%);display:flex;align-items:center;padding:0 34px;position:relative;overflow:hidden;}
.htxt{width:420px;z-index:2;}
.htxt h1{font-family:'Poppins',sans-serif;font-size:34px;font-weight:600;color:#fff;letter-spacing:-0.7px;line-height:1.2;margin:0 0 10px;}
.htxt p{font-size:15px;color:#cfe0f7;margin:0 0 16px;}
.hcta{display:inline-block;background:#2a93f4;color:#fff;font-family:'Poppins',sans-serif;font-size:16px;font-weight:500;padding:14px 30px;border-radius:8px;}
.orb{position:absolute;right:60px;top:40px;width:180px;height:180px;border-radius:9999px;background:radial-gradient(circle at 35% 35%,#53b8fb,#090a3f 75%);box-shadow:0 0 50px rgba(42,147,244,0.4);}
.orb:before{content:'';position:absolute;inset:14px;border-radius:9999px;border:2px solid rgba(255,255,255,0.25);}
.seclabel{padding:20px 34px 10px;font-family:'Poppins',sans-serif;font-size:20px;font-weight:500;color:#090a3f;}
.grid{display:flex;gap:16px;padding:0 34px;}
.card{width:206px;background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(9,10,63,0.06);padding:16px;position:relative;}
.badge{position:absolute;top:12px;left:12px;font-family:'Poppins',sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#090a3f;border-radius:4px;padding:2px 8px;z-index:2;}
.thumb{height:100px;border-radius:12px;margin-bottom:10px;}
.title{font-family:'Poppins',sans-serif;font-size:15px;font-weight:500;color:#090a3f;margin-bottom:4px;}
.sub{font-size:13px;margin-bottom:8px;}
.pill{display:inline-block;background:#eef6ff;color:#2a93f4;font-size:12px;font-weight:600;padding:4px 10px;border-radius:8px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#090a3f;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Lumina</div>
<div class="navlinks"><span class="active">Find Jobs</span><span>Webcams</span><span>Studios</span></div>
<div class="cta">Post a Listing</div>
</div>
<div class="hero">
<div class="htxt">
<h1>Job listings that look like media.</h1>
<p>Webcam-first hiring, presented as video, not paperwork.</p>
<div class="hcta">Browse Listings</div>
</div>
<div class="orb"></div>
</div>
<div class="seclabel">Featured Listings</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#e89e50;">New</span><div class="thumb" style="background:linear-gradient(135deg,#2a93f4,#090a3f);"></div><div class="title">Studio Host, Evenings</div><div class="sub">Remote · Flexible hours</div><div class="pill">Apply Now</div></div>
<div class="card"><span class="badge" style="background:#8f53e7;">Premium</span><div class="thumb" style="background:linear-gradient(135deg,#8459e9,#090a3f);"></div><div class="title">Lead Camera Operator</div><div class="sub">On-site · Full-time</div><div class="pill">Apply Now</div></div>
<div class="card"><span class="badge" style="background:#ff7a59;">Featured</span><div class="thumb" style="background:linear-gradient(135deg,#ff7a59,#090a3f);"></div><div class="title">Content Producer</div><div class="sub">Hybrid · Contract</div><div class="pill">Apply Now</div></div>
</div>
<div class="footer"><span>© Lumina</span><span>Direct-hire, capability-focused</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -0.5px; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #5f6360; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #116dff; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #080808;
border: 1px solid #116dff; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #080808;
border: 1px solid #d6d6d6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5f6360; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.2px; background: #7fccf7; color: #080808;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; color:#1c1c1c; }
*{box-sizing:border-box;}
.nav{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d6d6d6;}
.logo{font-family:'Arial Black',Arial,sans-serif;font-size:19px;font-weight:700;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;}
.cta{height:40px;padding:0 20px;background:#116dff;color:#fff;display:flex;align-items:center;font-size:14px;font-weight:600;border-radius:4px;}
.hero{height:220px;background:#0d0d0d;display:flex;align-items:center;padding:0 32px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;inset:0;background:rgba(8,8,8,0.45);}
.htxt{width:400px;z-index:2;}
.htxt h1{font-size:44px;font-weight:700;letter-spacing:-1.5px;color:#fff;line-height:1.1;margin:0 0 10px;}
.htxt p{font-size:14px;color:#d0d0d0;margin:0 0 16px;}
.hcta{display:inline-block;background:#116dff;color:#fff;font-size:15px;font-weight:600;padding:14px 28px;border-radius:4px;}
.frameline{position:absolute;right:60px;top:60px;width:280px;height:100px;}
.frameline .tube{position:absolute;background:#7fccf7;height:3px;}
.t1{width:180px;top:20px;left:40px;transform:rotate(-12deg);}
.t2{width:120px;top:60px;left:60px;transform:rotate(28deg);}
.t3{width:140px;top:60px;left:130px;transform:rotate(-20deg);}
.specrow{display:flex;padding:16px 32px 0;gap:1px;background:#d6d6d6;}
.speccell{flex:1;background:#080808;color:#fff;padding:10px 14px;}
.speccell .lab{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff;}
.speccell .val{font-size:13px;color:#d6d6d6;margin-top:2px;}
.badge{display:inline-block;margin:14px 32px 0;background:#7fccf7;color:#080808;font-size:11px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;border-radius:9999px;padding:6px 14px;}
.grid{display:flex;gap:12px;padding:12px 32px 0;}
.card{width:210px;border:1px solid #d6d6d6;}
.thumb{height:110px;}
.body{padding:10px 12px;}
.title{font-size:15px;font-weight:600;margin-bottom:4px;}
.price{font-size:20px;font-weight:700;}
</style>
<div class="nav">
<div class="logo">Lynskey</div>
<div class="navlinks"><span>Bikes</span><span>Custom</span><span>Racing</span><span>About</span></div>
<div class="cta">Build Yours</div>
</div>
<div class="hero">
<div class="htxt">
<h1>Titanium, milled in Chattanooga.</h1>
<p>Seventeen-degree tube angles. CNC-machined dropouts. Nothing looser than it needs to be.</p>
<div class="hcta">Build Yours</div>
</div>
<div class="frameline"><div class="tube t1"></div><div class="tube t2"></div><div class="tube t3"></div></div>
</div>
<div class="specrow">
<div class="speccell"><div class="lab">Material</div><div class="val">Grade 9 Titanium</div></div>
<div class="speccell"><div class="lab">Weight</div><div class="val">1,450g frame</div></div>
<div class="speccell"><div class="lab">Warranty</div><div class="val">Lifetime, USA made</div></div>
</div>
<div class="badge">USA Made Titanium</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7fccf7,#5f6360);"></div><div class="body"><div class="title">Ridgeline Gravel</div><div class="price">$2,895</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#5f6360,#7fccf7);"></div><div class="body"><div class="title">Summit Road</div><div class="price">$3,295</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3899ec,#080808);"></div><div class="body"><div class="title">Backroad Adventure</div><div class="price">$3,650</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1B1B1B;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1B1B1B;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1; margin: 0; color: #1B1B1B; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6B6B6B; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 1.5px; background: #CC1417; color: #FFFFFF;
border: none; border-radius: 2px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 1.5px; background: #FFFFFF; color: #1B1B1B;
border: 1px solid #CC1417; border-radius: 2px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1B1B1B;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B6B6B; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 1px; background: #F5F5F5; color: #6B6B6B;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#FFFFFF; font-family:'Gotham Narrow',Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #E0E0E0;}
.logo{font-family:Sentinel,Georgia,serif;font-size:19px;font-weight:700;color:#1B1B1B;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:#1B1B1B;}
.hero{height:220px;display:flex;background:#F5F5F5;}
.herotext{width:46%;padding:0 36px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#6B6B6B;margin-bottom:10px;}
.h1{font-family:Sentinel,Georgia,serif;font-size:30px;font-weight:700;line-height:1.15;color:#1B1B1B;margin:0 0 12px;}
.cta{display:inline-block;background:#CC1417;color:#fff;font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:12px 24px;border-radius:2px;}
.heroimg{width:54%;position:relative;background:linear-gradient(160deg,#F5F5F5,#E0E0E0 70%);}
.blender{position:absolute;left:70px;top:30px;width:80px;height:130px;border-radius:2px 2px 10px 10px;background:linear-gradient(180deg,#CC1417,#1B1B1B);}
.jar{position:absolute;left:78px;top:20px;width:64px;height:60px;border-radius:2px;background:#1B1B1B;}
.spectable{display:flex;gap:1px;background:#E0E0E0;margin:0 36px;}
.speccell{flex:1;background:#F5F5F5;text-align:center;padding:10px;}
.speclabel{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#6B6B6B;font-family:'Gotham Narrow',Arial,sans-serif;}
.specvalue{font-size:13px;color:#1B1B1B;margin-top:3px;}
.sec{padding:16px 36px 0;}
.secTitle{font-family:Sentinel,Georgia,serif;font-size:16px;font-weight:700;color:#1B1B1B;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#FFFFFF;border:1px solid #E0E0E0;border-radius:0;padding:12px;}
.thumb{height:84px;border-radius:0;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;color:#1B1B1B;}
.pmeta{font-size:10px;letter-spacing:.3px;text-transform:uppercase;color:#999999;margin-top:3px;font-family:'Gotham Narrow',Arial,sans-serif;}
.pprice{font-size:13px;font-weight:700;color:#CC1417;margin-top:6px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Vitamix Small KI 2</div>
<div class="navlinks"><span>Full Size</span><span>Personal</span><span>Immersion</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Compact. Powerful.</div>
<div class="h1">Full-size power, personal-size footprint.</div>
<div class="cta">Compare Models</div>
</div>
<div class="heroimg"><div class="blender"></div><div class="jar"></div></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Container Capacity</div><div class="specvalue">64 oz.</div></div>
<div class="speccell"><div class="speclabel">Motor</div><div class="specvalue">2.2 HP</div></div>
<div class="speccell"><div class="speclabel">Program Settings</div><div class="specvalue">5</div></div>
<div class="speccell"><div class="speclabel">Warranty</div><div class="specvalue">7 Years</div></div>
</div>
<div class="sec">
<div class="secTitle">Compact Series</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#CC1417,#1B1B1B)"></div><div class="pname">Compact Series C1</div><div class="pmeta">64 OZ Container</div><div class="pprice">$379.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#333333,#CC1417)"></div><div class="pname">Personal Cup Series</div><div class="pmeta">20 OZ Container</div><div class="pprice">$199.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#6B6B6B,#1B1B1B)"></div><div class="pname">Immersion Blender Pro</div><div class="pmeta">Variable Speed</div><div class="pprice">$129.95</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffaf0; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffaf0; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #0a0a0a; color: #ffffff;
border: none; border-radius: 12px; padding: 12px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #fffaf0; color: #0a0a0a;
border: 1px solid #0a0a0a; border-radius: 12px;
padding: 12px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #fffaf0; color: #0a0a0a;
border: 1px solid #c2beb6; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; background: #f5f0e0; color: #0a0a0a;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fffaf0; color:#0a0a0a; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:17px; font-weight:600; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#3a3a3a; }
.btnp { background:#0a0a0a; color:#fff; border-radius:12px; padding:9px 16px; font-size:13px; font-weight:600; }
.hero { display:flex; align-items:center; gap:26px; padding:14px 32px; height:216px; }
.hero .left { flex:1; }
.hero h1 { font-size:36px; font-weight:500; letter-spacing:-1.6px; margin:0 0 10px; line-height:1.08; }
.hero p { font-size:14px; color:#3a3a3a; margin:0 0 14px; max-width:320px; }
.scene { flex:1; height:180px; border-radius:24px; background:#faf5e8; position:relative; overflow:hidden; }
.peak { position:absolute; bottom:0; border-radius:14px 14px 0 0; }
.peak.p1 { left:10px; width:110px; height:100px; background:linear-gradient(160deg,#ffb084,#e8b94a); }
.peak.p2 { left:90px; width:140px; height:140px; background:linear-gradient(160deg,#b8a4ed,#8f74d6); }
.peak.p3 { right:10px; width:120px; height:90px; background:linear-gradient(160deg,#a4d4c5,#6fae99); }
.sun { position:absolute; top:18px; right:40px; width:34px; height:34px; border-radius:50%; background:#ff4d8b; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 32px; }
.fcard { border-radius:24px; padding:20px; height:150px; display:flex; flex-direction:column; justify-content:space-between; }
.fcard h3 { font-size:16px; font-weight:600; margin:0; }
.fcard p { font-size:12px; margin:0; line-height:1.4; }
.f1 { background:#ff4d8b; color:#fff; }
.f2 { background:#b8a4ed; color:#0a0a0a; }
.f3 { background:#ffb084; color:#0a0a0a; }
footer { position:relative; height:170px; margin-top:16px; background:#faf5e8; overflow:hidden; }
footer .mtnshape { position:absolute; bottom:0; left:0; width:100%; height:100px;
clip-path:polygon(0 100%, 10% 30%, 22% 75%, 38% 15%, 55% 70%, 72% 25%, 88% 60%, 100% 20%, 100% 100%);
background:linear-gradient(160deg,#c0a8dd,#a4d4c5); }
footer .flabel { position:absolute; top:20px; left:32px; font-size:12px; color:#6a6a6a; }
</style></head>
<body>
<nav>
<div class="brand">Clay</div>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Resources</span><span>Pricing</span></div>
<span class="btnp">Try free</span>
</nav>
<div class="hero">
<div class="left">
<h1>Go to market<br>with unique data</h1>
<p>Connect any data source, enrich with AI, and automate your entire outbound motion.</p>
<span class="btnp">Try free</span>
</div>
<div class="scene">
<div class="sun"></div>
<div class="peak p1"></div>
<div class="peak p2"></div>
<div class="peak p3"></div>
</div>
</div>
<div class="features">
<div class="fcard f1"><h3>Claygent AI agent</h3><p>Research any lead with an autonomous web agent.</p></div>
<div class="fcard f2"><h3>Sequencer</h3><p>Personalized outbound at a scale humans can't match.</p></div>
<div class="fcard f3"><h3>CRM enrichment</h3><p>Fill every field with data your CRM never had.</p></div>
</div>
<footer>
<span class="flabel">Clay</span>
<div class="mtnshape"></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #0d6160; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #f5f5f5; color: #222222;
border: 1px solid #0d6160; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f5f5f5; color: #222222;
border: 1px solid #c0c0c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffc863; color: #222222;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f5f5f5; color:#333333; font-family:'PT Sans', Georgia, serif;
}
*, *::before, *::after { box-sizing:border-box; }
.wrap{ position:relative; width:960px; height:640px; }
.nav{ height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; background:#f5f5f5; border-bottom:1px solid #e2e2df; }
.logo{ font-family:'Work Sans', sans-serif; font-weight:700; font-size:19px; letter-spacing:0.12em; text-transform:uppercase; color:#222222; }
.navlinks{ display:flex; gap:28px; }
.navlinks span{ font-family:'Work Sans', sans-serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#333333; padding-bottom:6px; }
.navlinks span.active{ color:#0d6160; border-bottom:2px solid #0d6160; }
.cart{ font-family:'Work Sans', sans-serif; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#222222; border:1px solid #222222; padding:6px 12px; border-radius:8px; }
.hero{ display:flex; height:290px; }
.hero-left{ width:420px; background:#121212; color:#f5f5f5; padding:40px 34px; display:flex; flex-direction:column; justify-content:center; }
.kicker{ font-family:'Work Sans', sans-serif; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:#ffc863; margin-bottom:14px; }
.h1{ font-family:'Work Sans', sans-serif; font-weight:700; font-size:34px; line-height:1.15; color:#ffffff; margin-bottom:14px; }
.sub{ font-family:'PT Sans', serif; font-size:14px; line-height:1.6; color:#cfcfcf; max-width:330px; margin-bottom:22px; }
.btn-primary{ font-family:'Work Sans', sans-serif; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; background:#0d6160; color:#ffffff; border:none; padding:14px 26px; border-radius:8px; width:fit-content; }
.hero-right{ flex:1; position:relative; background:linear-gradient(135deg,#e8e4d8 0%,#f5f5f5 60%); overflow:hidden; }
.bottle{ position:absolute; left:220px; top:36px; width:80px; height:170px; background:linear-gradient(180deg,#1990c6 0%,#0d6160 100%); border-radius:6px; box-shadow:0 18px 30px rgba(0,0,0,0.18); }
.bottle-cap{ position:absolute; left:238px; top:8px; width:44px; height:32px; background:#ffc863; border-radius:4px; }
.bottle-label{ position:absolute; left:232px; top:96px; width:56px; height:40px; background:rgba(255,255,255,0.85); border-radius:2px; }
.drop{ position:absolute; left:330px; top:150px; width:26px; height:26px; border-radius:50% 50% 50% 0; background:#d02e2e; transform:rotate(45deg); opacity:0.85; }
.badge-new{ position:absolute; right:40px; top:34px; background:#d02e2e; color:#fff; font-family:'Work Sans',sans-serif; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; padding:6px 14px; border-radius:999px; }
.section-title{ padding:22px 36px 10px; font-family:'Work Sans', sans-serif; font-weight:700; font-size:16px; letter-spacing:0.04em; color:#222222; }
.grid{ display:flex; gap:20px; padding:0 36px; }
.card{ width:186px; background:#ffffff; border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,0.06); padding:11px; }
.card-img{ width:100%; height:82px; border-radius:6px; margin-bottom:8px; }
.card-title{ font-family:'Work Sans', sans-serif; font-size:13px; font-weight:600; color:#222222; margin-bottom:4px; }
.card-note{ font-family:'PT Sans', serif; font-size:11px; color:#6b6b6b; margin-bottom:8px; }
.card-row{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-family:'Work Sans', sans-serif; font-size:13px; font-weight:700; color:#0d6160; }
.pill{ font-family:'Work Sans', sans-serif; font-size:9px; letter-spacing:0.08em; text-transform:uppercase; background:#ffc863; color:#222222; padding:3px 9px; border-radius:999px; }
.pill.eco{ background:#3f9c5b; color:#fff; }
.footer{ position:absolute; bottom:0; left:0; width:960px; height:56px; background:#121212; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.footer span{ font-family:'Work Sans', sans-serif; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:#9a9a9a; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Heretic Parfum</div>
<div class="navlinks">
<span class="active">Scents</span>
<span>Discovery</span>
<span>Journal</span>
<span>About</span>
</div>
<div class="cart">Bag (0)</div>
</div>
<div class="hero">
<div class="hero-left">
<div class="kicker">New Arrival — Alpha Series</div>
<div class="h1">Heretic No. 5</div>
<div class="sub">A forest-teal accord of vetiver, smoked cedar and bergamot, cut with restrained gold amber. Natural ingredients, refined without excess.</div>
<div class="btn-primary">Shop the Bottle</div>
</div>
<div class="hero-right">
<div class="badge-new">New</div>
<div class="bottle"></div>
<div class="bottle-cap"></div>
<div class="bottle-label"></div>
<div class="drop"></div>
</div>
</div>
<div class="section-title">Discovery Set</div>
<div class="grid">
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#0d6160,#1990c6);"></div>
<div class="card-title">No. 5 — Vetiver Smoke</div>
<div class="card-note">50ml Eau de Parfum</div>
<div class="card-row"><span class="price">$128</span><span class="pill">Gold Edition</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#222222,#0d6160);"></div>
<div class="card-title">No. 2 — Coral Ember</div>
<div class="card-note">30ml Eau de Parfum</div>
<div class="card-row"><span class="price">$96</span><span class="pill" style="background:#d02e2e;color:#fff;">New</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#ffc863,#0d6160);"></div>
<div class="card-title">No. 9 — Bergamot Root</div>
<div class="card-note">50ml Eau de Parfum</div>
<div class="card-row"><span class="price">$128</span><span class="pill eco">Eco</span></div>
</div>
</div>
<div class="footer">
<span>© Heretic Parfum</span>
<span>Shipping · Returns · Contact</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ff6900; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #003388;
border: 1px solid #003388; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.35; letter-spacing: 0.2px; background: #34e2e4; color: #004a59;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#eeeeee; font-family:'Barlow',Arial,sans-serif; color:#32373c; }
*{box-sizing:border-box;}
.nav{height:58px;background:#003388;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Barlow Semi Condensed',sans-serif;font-size:20px;font-weight:600;color:#fff;letter-spacing:.3px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;color:#fff;}
.hero{height:230px;background:#003388;display:flex;align-items:center;padding:0 32px;}
.heroText{width:430px;}
.spec{font-family:'Barlow Semi Condensed',sans-serif;font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#34e2e4;margin-bottom:10px;}
.h1{font-family:'Barlow Semi Condensed',sans-serif;font-size:32px;font-weight:600;line-height:1.15;color:#fff;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.5;color:#c5d0dc;margin:0 0 18px;max-width:370px;}
.btn{display:inline-block;background:#ff6900;color:#fff;font-size:13px;font-weight:600;padding:12px 24px;border-radius:2px;}
.flask{margin-left:auto;width:120px;height:170px;position:relative;}
.body{position:absolute;width:70px;height:130px;background:linear-gradient(180deg,#c5d0dc,#8fa2b8);border-radius:16px;top:20px;left:25px;}
.ring{position:absolute;width:70px;height:14px;background:#ff6900;top:16px;left:25px;border-radius:6px;}
.spectable{display:flex;gap:1px;background:#d6d6d6;margin:16px 32px 0;}
.speccell{flex:1;background:#fff;text-align:center;padding:9px;}
.speclabel{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#666;}
.specvalue{font-family:'Barlow Semi Condensed',sans-serif;font-size:15px;color:#003388;margin-top:2px;}
.sec{padding:16px 32px 0;}
.grid{display:flex;gap:12px;}
.card{width:224px;background:#fff;border-radius:2px;padding:10px;}
.thumb{height:88px;background:#eeeeee;border-radius:2px;margin-bottom:8px;}
.pname{font-family:'Barlow Semi Condensed',sans-serif;font-size:13px;font-weight:600;color:#003388;margin:0 0 4px;}
.pprice{font-size:14px;font-weight:700;color:#ff6900;}
</style>
<div class="nav">
<div class="logo">Tiger</div>
<div class="navlinks"><div>Bottles</div><div>Rice Cookers</div><div>Induction</div><div>Compare</div></div>
</div>
<div class="hero">
<div class="heroText">
<div class="spec">Keeps Cold 24 Hours</div>
<div class="h1">Precision temperature. Zero fuss.</div>
<div class="sub">Vacuum-insulated flasks and induction cooking, engineered for people who don't guess.</div>
<div class="btn">Shop Now</div>
</div>
<div class="flask"><div class="body"></div><div class="ring"></div></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Insulation</div><div class="specvalue">Vacuum</div></div>
<div class="speccell"><div class="speclabel">Cold Retention</div><div class="specvalue">24 hrs</div></div>
<div class="speccell"><div class="speclabel">Heat Retention</div><div class="specvalue">12 hrs</div></div>
<div class="speccell"><div class="speclabel">Capacity</div><div class="specvalue">500 ml</div></div>
</div>
<div class="sec">
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003388,#34e2e4);"></div><div class="pname">Vacuum Flask 500ml</div><div class="pprice">$39.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#34e2e4,#003388);"></div><div class="pname">IH Rice Cooker 5.5-Cup</div><div class="pprice">$249.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff6900,#003388);"></div><div class="pname">Stainless Lunch Jar</div><div class="pprice">$54.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003388,#ff6900);"></div><div class="pname">Induction Tea Kettle</div><div class="pprice">$44.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: 0.01em; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; letter-spacing: 0.01em; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.0; letter-spacing: 0.10em; background: #121212; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.0; letter-spacing: 0.10em; background: #ffffff; color: #121212;
border: 1px solid #121212; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; letter-spacing: 0.01em; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.45; letter-spacing: 0.08em; background: #121212; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Helvetica Neue', Arial, sans-serif; background:#ffffff; color:#121212; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.annbar{height:28px;background:#121212;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:.1em;text-transform:uppercase;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dedede;}
.logo{font-size:19px;font-weight:700;letter-spacing:.02em;}
.navlinks{display:flex;gap:26px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#121212;}
.body{display:flex;height:390px;}
.left{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;}
.cat{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#888;margin-bottom:10px;}
.left h1{font-size:38px;font-weight:700;line-height:1.1;margin:0 0 14px;}
.left p{font-size:14px;color:#3a3a3a;line-height:1.6;max-width:280px;margin:0 0 20px;}
.cta{display:inline-block;background:#121212;color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:14px 32px;width:fit-content;}
.right{width:54%;background:radial-gradient(circle at 35% 40%,#c6973f,#dedede 55%,#f7f7f7 100%);position:relative;}
.right:before{content:'';position:absolute;left:40%;top:30%;width:120px;height:120px;border-radius:50%;border:10px solid #121212;opacity:.9;}
.right:after{content:'';position:absolute;left:56%;top:52%;width:70px;height:70px;border-radius:50%;border:8px solid #c6973f;}
.section{padding:20px 36px 0;}
.sectitle{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#888;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:150px;}
.thumb{height:110px;background:#f7f7f7;margin-bottom:8px;position:relative;}
.dot{position:absolute;bottom:14px;left:14px;width:16px;height:16px;border-radius:50%;border:1px solid #121212;}
.ptitle{font-size:12px;color:#121212;margin-bottom:4px;}
.pprice{font-size:13px;color:#3a3a3a;}
</style>
<div class="wrap">
<div class="annbar">Free Shipping on Orders Over $150</div>
<div class="nav">
<div class="logo">Wolf Circus</div>
<div class="navlinks"><div>Rings</div><div>Necklaces</div><div>Earrings</div><div>About</div></div>
</div>
<div class="body">
<div class="left">
<div class="cat">Recycled Gold Vermeil</div>
<h1>Jewelry built like instruments.</h1>
<p>Mismatched stacking rings and segmented drops, cast in recycled sterling and gold vermeil.</p>
<div class="cta">Shop Now</div>
</div>
<div class="right"></div>
</div>
<div class="section">
<div class="sectitle">New Arrivals</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="dot" style="border-color:#c6973f"></div></div><div class="ptitle">Orbit Signet Ring</div><div class="pprice">$185</div></div>
<div class="card"><div class="thumb"><div class="dot" style="border-color:#b8b8b8"></div></div><div class="ptitle">Talisman Necklace</div><div class="pprice">$240</div></div>
<div class="card"><div class="thumb"><div class="dot" style="border-color:#d4a090"></div></div><div class="ptitle">Cascade Hoops</div><div class="pprice">$165</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1e1e1e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1e1e1e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #262626; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e1e1e; color: #ffffff;
border: 1px solid #262626; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1e1e1e; color: #f5f5f5;
border: 1px solid #404040; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1f1f1f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1E1E1E; color:#DCDDDE; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; }
.app { display:flex; width:960px; height:640px; }
.ribbon { width:40px; background:#1E1E1E; border-right:1px solid #363636; display:flex;
flex-direction:column; align-items:center; gap:18px; padding-top:16px; flex-shrink:0; }
.ribbon .ic { font-size:16px; color:#999999; }
.ribbon .ic.on { color:#A78BFA; }
.filetree { width:190px; background:#262626; border-right:1px solid #363636; padding:10px 0; flex-shrink:0; }
.ft-head { font-size:11px; font-weight:700; letter-spacing:0.06em; color:#999999; text-transform:uppercase; padding:4px 12px 8px; }
.ft-head.vault { color:#DCDDDE; text-transform:none; font-size:13px; letter-spacing:0; padding-top:10px; }
.ft-row { display:flex; align-items:center; gap:6px; height:28px; padding:0 12px; font-size:13px; color:#DCDDDE; }
.ft-row .chev { color:#6B6B6B; font-size:9px; width:8px; }
.ft-row .doc { font-size:11px; color:#6B6B6B; }
.ft-row.d1 { padding-left:28px; }
.ft-row.active { background:rgba(124,58,237,0.14); border-left:2px solid #7C3AED; padding-left:26px; }
.ft-row .dot { margin-left:auto; width:6px; height:6px; border-radius:50%; background:#A78BFA; }
.editor { width:340px; border-right:1px solid #363636; display:flex; flex-direction:column; flex-shrink:0; }
.note-toolbar { height:40px; display:flex; align-items:center; padding:0 14px; font-size:13px;
font-weight:600; color:#DCDDDE; border-bottom:1px solid #363636; justify-content:space-between; }
.note-toolbar .tt { color:#999999; font-weight:400; font-size:12px; }
.src { padding:14px; font-size:13px; line-height:1.55; flex:1; }
.src .marker { color:#6B6B6B; }
.src .h1 { font-weight:700; font-size:16px; }
.src .h2 { font-weight:700; font-size:14.5px; }
.src .link { color:#A78BFA; }
.src .ext { color:#7C9CBF; }
.src .tag { background:rgba(124,58,237,0.14); color:#A78BFA; border-radius:999px; padding:1px 8px; font-weight:600; font-size:11.5px; }
.src .quote { border-left:3px solid #7C3AED; padding-left:10px; color:#999999; display:block; margin:6px 0; }
.src .hi { background:rgba(255,213,79,0.25); }
.src p { margin:0 0 8px; }
.backlinks { border-top:1px solid #363636; background:#262626; padding:10px 14px; }
.bl-head { font-size:10.5px; font-weight:700; letter-spacing:0.06em; color:#999999; text-transform:uppercase; margin-bottom:6px; }
.bl-item { margin-bottom:6px; }
.bl-title { font-size:13px; font-weight:600; color:#DCDDDE; }
.bl-ctx { font-size:11.5px; color:#999999; }
.bl-ctx .link { color:#A78BFA; }
.graphpane { flex:1; position:relative; background:#1E1E1E; }
.g-head { position:absolute; top:12px; left:14px; font-size:11px; font-weight:700; letter-spacing:0.06em; color:#999999; text-transform:uppercase; }
.edge { position:absolute; height:1px; background:#363636; transform-origin:0 0; }
.edge.on { background:#7C3AED; }
.node { position:absolute; border-radius:50%; background:#7C3AED; }
.node.active { background:#A78BFA; box-shadow:0 0 0 14px rgba(124,58,237,0.14); }
.nlabel { position:absolute; font-size:10px; font-weight:600; color:#999999; white-space:nowrap; }
</style></head>
<body>
<div class="app">
<div class="ribbon">
<span class="ic on vaultmark" title="Obsidian (iOS)">◈</span>
<span class="ic">⌘</span>
<span class="ic">🔍</span>
<span class="ic">+</span>
<span class="ic">⚙</span>
</div>
<div class="filetree">
<div class="ft-head vault">Obsidian (iOS)</div>
<div class="ft-head">Files</div>
<div class="ft-row"><span class="chev">▾</span> 📁 Zettelkasten</div>
<div class="ft-row d1 active"><span class="doc">📄</span> Design Systems<span class="dot"></span></div>
<div class="ft-row d1"><span class="doc">📄</span> Type Scale</div>
<div class="ft-row d1"><span class="doc">📄</span> Color Theory</div>
<div class="ft-row"><span class="chev">▾</span> 📁 Daily</div>
<div class="ft-row d1"><span class="doc">📄</span> 2026-09-04</div>
<div class="ft-row d1"><span class="doc">📄</span> 2026-09-03</div>
</div>
<div class="editor">
<div class="note-toolbar">Design Systems <span class="tt">Source</span></div>
<div class="src mono">
<p><span class="marker">## </span><span class="h2">Structural accents</span></p>
<p>The <span class="tag">#design-system</span> lives between <span class="link">[[Type Scale]]</span> and <span class="link">[[Color Theory]]</span>.</p>
<p><span class="marker">**</span>Purple<span class="marker">**</span> marks the single connective color — see <span class="ext">Obsidian (iOS).md</span> for context.</p>
<p><span class="quote">Restraint is the identity — one accent, two type systems.</span></p>
<p>A note can <span class="hi">==highlight==</span> its own claims for later review.</p>
<p><span class="marker">- </span>Nodes scale with link count</p>
<p><span class="marker">- </span>Edges brighten toward the active note</p>
</div>
<div class="backlinks">
<div class="bl-head">Linked mentions · 2</div>
<div class="bl-item"><div class="bl-title">Type Scale</div><div class="bl-ctx">…builds on <span class="link">[[Design Systems]]</span> for hierarchy…</div></div>
<div class="bl-item"><div class="bl-title">Color Theory</div><div class="bl-ctx">…the accent rule from <span class="link">[[Design Systems]]</span> applies here…</div></div>
</div>
</div>
<div class="graphpane">
<div class="g-head">Graph</div>
<div class="edge on" style="left:195px; top:170px; width:100px; transform:rotate(18deg);"></div>
<div class="edge on" style="left:195px; top:170px; width:120px; transform:rotate(-22deg);"></div>
<div class="edge" style="left:295px; top:130px; width:90px; transform:rotate(-40deg);"></div>
<div class="edge" style="left:315px; top:220px; width:70px; transform:rotate(60deg);"></div>
<div class="edge" style="left:195px; top:170px; width:150px; transform:rotate(65deg);"></div>
<div class="edge" style="left:340px; top:280px; width:60px; transform:rotate(-10deg);"></div>
<div class="node active" style="left:180px; top:158px; width:24px; height:24px;"></div>
<div class="nlabel" style="left:150px; top:186px;">Design Systems</div>
<div class="node" style="left:288px; top:122px; width:16px; height:16px;"></div>
<div class="nlabel" style="left:270px; top:112px;">Type Scale</div>
<div class="node" style="left:308px; top:212px; width:14px; height:14px;"></div>
<div class="nlabel" style="left:288px; top:230px;">Color Theory</div>
<div class="node" style="left:60px; top:80px; width:8px; height:8px;"></div>
<div class="node" style="left:90px; top:340px; width:10px; height:10px;"></div>
<div class="node" style="left:210px; top:400px; width:8px; height:8px;"></div>
<div class="node" style="left:40px; top:430px; width:6px; height:6px;"></div>
<div class="node" style="left:130px; top:250px; width:6px; height:6px;"></div>
<div class="node" style="left:280px; top:420px; width:10px; height:10px;"></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.27; letter-spacing: -0.25px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #313131; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #1a1a1a;
border: 1px solid #313131; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #e53935; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#1a1a1a; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;}
.nav{height:64px;background:#1a1a1a;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{color:#fff;font-weight:700;font-size:16px;}
.navlinks{display:flex;gap:0;}
.navlinks span{color:#fff;font-size:15px;font-weight:600;padding:0 16px;height:64px;display:flex;align-items:center;}
.navlinks span.active{border-bottom:2px solid #fff;}
.hero{background:#1a1a1a;color:#fff;padding:24px 30px;}
.hero h1{font-size:32px;font-weight:700;margin:0 0 8px;}
.hero p{font-size:14px;color:#a0a0a0;margin:0 0 14px;max-width:400px;}
.cta{background:#fff;color:#1a1a1a;font-weight:600;font-size:18px;padding:16px 32px;border-radius:4px;display:inline-block;}
.section{padding:20px 30px;display:flex;gap:20px;}
.config{flex:1;background:#f5f5f5;border-radius:8px;padding:16px;}
.step{background:#fff;border:1px solid #e5e5e5;border-radius:4px;padding:10px 12px;margin-bottom:8px;display:flex;align-items:center;gap:10px;font-size:13px;}
.step.active{border-color:#313131;}
.stepnum{width:22px;height:22px;border-radius:9999px;background:#313131;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;}
.preview{flex:1;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:16px;}
.preview .img{height:130px;border-radius:4px;background:linear-gradient(135deg,#313131,#7a7a7a);margin-bottom:10px;}
.preview .price{font-size:22px;font-weight:700;}
</style>
<div class="nav">
<div class="logo">Digital Storm</div>
<div class="navlinks"><span class="active">Configure</span><span>Prebuilt</span><span>Laptops</span><span>Support</span></div>
</div>
<div class="hero">
<h1>Build your machine, spec by spec.</h1>
<p>Every component chosen, benchmarked, and shipped — no compromises.</p>
<a class="cta">Start Configuring</a>
</div>
<div class="section">
<div class="config">
<div class="step active"><div class="stepnum">1</div>CPU: Intel Core i9-14900K</div>
<div class="step"><div class="stepnum">2</div>GPU: RTX 4090 24GB</div>
<div class="step"><div class="stepnum">3</div>RAM: 64GB DDR5</div>
<div class="step"><div class="stepnum">4</div>Storage: 2TB NVMe SSD</div>
</div>
<div class="preview">
<div class="img"></div>
<div class="price">$3,499.00</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a2e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a2e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a2e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #5c5c6e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #003087; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #003087;
border: 1px solid #003087; border-radius: 4px;
padding: 9px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #1a1a2e;
border: 1px solid #c6c6cb; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5c5c6e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.8px; background: #e0f4fb; color: #007aa6;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>IDT Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:'Source Sans Pro','Open Sans','Helvetica Neue',Arial,sans-serif;
background:#ffffff; color:#2d2d2d;
}
*{box-sizing:border-box;}
.topbar{height:22px;background:#00256b;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 24px;font-size:10px;color:#cfe0f4;}
.nav{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#003087;}
.logo{font-size:19px;font-weight:800;color:#ffffff;letter-spacing:-.2px;}
.navlinks{display:flex;gap:18px;font-size:12px;font-weight:600;color:#cfe0f4;}
.navlinks span.on{color:#ffffff;border-bottom:2px solid #0095C8;padding-bottom:4px;}
.searchbar{display:flex;align-items:center;background:#ffffff;border-radius:4px;padding:0 4px 0 10px;height:30px;width:220px;}
.searchbar input{border:none;font-size:11px;color:#8e8ea0;flex:1;}
.searchbar .go{background:#0095C8;color:#fff;font-size:10px;font-weight:700;padding:6px 10px;border-radius:4px;}
.body-wrap{display:flex;padding:14px 24px 0;gap:16px;}
.sidebar{width:150px;flex-shrink:0;}
.sidebar h4{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#003087;margin:0 0 8px;}
.sidebar .item{font-size:10.5px;color:#2d2d2d;padding:6px 0;border-bottom:1px solid #eceff4;}
.main{flex:1;}
.hero{background:#f5f7fa;border:1px solid #d9dde6;border-radius:8px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.hero h1{font-size:19px;font-weight:700;color:#1a1a2e;margin:0 0 6px;line-height:1.3;max-width:400px;}
.hero p{font-size:11px;color:#5c5c6e;margin:0;max-width:400px;line-height:1.5;}
.hero-btn{background:#003087;color:#fff;font-size:11.5px;font-weight:700;padding:10px 18px;border-radius:4px;white-space:nowrap;}
.badge-row{display:flex;gap:6px;margin-bottom:10px;}
.cbadge{background:#f0f4ff;color:#003087;font-size:9px;font-weight:700;padding:4px 8px;border-radius:3px;border:1px solid #d9dde6;}
.spec-table{border:1px solid #d9dde6;border-radius:8px;overflow:hidden;}
.spec-row{display:flex;font-size:10.5px;padding:7px 12px;border-bottom:1px solid #eceff4;}
.spec-row:nth-child(even){background:#f5f7fa;}
.spec-row .lbl{width:170px;font-weight:700;color:#5c5c6e;text-transform:uppercase;letter-spacing:.3px;font-size:9.5px;}
.spec-row .val{color:#2d2d2d;}
.spec-row .val b{color:#0095C8;}
.promo{margin-top:10px;background:#ffc845;color:#1a1a2e;font-size:10px;font-weight:800;padding:6px 12px;border-radius:4px;display:inline-block;}
</style>
<div class="topbar">Order Status • Distributor Portal • Support</div>
<div class="nav">
<div class="logo">Idt Integrated Dna Technologies</div>
<div class="navlinks"><span class="on">Custom Oligos</span><span>CRISPR</span><span>NGS Prep</span><span>qPCR Assays</span><span>Resources</span></div>
<div class="searchbar"><input placeholder="Enter sequence or catalog #"/><div class="go">Order</div></div>
</div>
<div class="body-wrap">
<div class="sidebar">
<h4>Product Family</h4>
<div class="item">DNA Oligonucleotides</div>
<div class="item">gBlocks Gene Fragments</div>
<div class="item">CRISPR Reagents</div>
<div class="item">NGS Library Prep</div>
<div class="item">qPCR & Probes</div>
<div class="item">Plasmid Services</div>
</div>
<div class="main">
<div class="hero">
<div>
<h1>Every base matters. Synthesized to spec.</h1>
<p>Custom oligos, CRISPR reagents, and NGS kits ordered by principal investigators and genomics cores worldwide.</p>
</div>
<div class="hero-btn">Design My Oligo</div>
</div>
<div class="badge-row">
<div class="cbadge">ISO 13485</div>
<div class="cbadge">ISO 9001</div>
<div class="cbadge">GMP Manufacturing</div>
<div class="cbadge">Ships in 24hrs</div>
</div>
<div class="spec-table">
<div class="spec-row"><div class="lbl">Custom DNA Oligo</div><div class="val">25nm scale • standard desalting • <b>$0.14/base</b></div></div>
<div class="spec-row"><div class="lbl">gBlocks Gene Fragment</div><div class="val">125bp–3kb • sequence-verified • <b>from $59.00</b></div></div>
<div class="spec-row"><div class="lbl">Alt-R CRISPR-Cas9 crRNA</div><div class="val">2nm scale • HPLC purified • <b>from $15.20</b></div></div>
<div class="spec-row"><div class="lbl">PrimeTime qPCR Assay</div><div class="val">primer + probe set • <b>from $76.00</b></div></div>
</div>
<div class="promo">Bulk Order Discount: Save 15% on Plates of 96</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffcf9; color: #191008;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffcf9; color: #191008;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #191008; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #636666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #cc142b; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #fffcf9; color: #191008;
border: 1px solid #cc142b; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fffcf9; color: #3d4246;
border: 1px solid #c6c1bd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #636666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #cc142b; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family: 'Inter', Helvetica, sans-serif; background:#fffcf9; color:#3d4246; }
*{box-sizing:border-box;}
.serif{font-family: Garamond, 'EB Garamond', serif;}
.nav{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #e3dfd3;}
.logo{font-family:Garamond,serif;font-size:24px;color:#191008;}
.navlinks{display:flex;gap:22px;font-size:13px;color:#3d4246;letter-spacing:.2px;}
.navicons{display:flex;gap:16px;align-items:center;}
.cartdot{width:8px;height:8px;border-radius:9999px;background:#cc142b;position:relative;top:-6px;left:-14px;}
.hero{display:flex;height:280px;}
.heroimg{width:52%;background:linear-gradient(135deg,#f8f0e7,#977547);position:relative;overflow:hidden;}
.heroimg:before{content:'';position:absolute;left:30px;bottom:30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.35);}
.herotext{width:48%;display:flex;flex-direction:column;justify-content:center;padding:0 36px;}
.herotext h1{font-family:Garamond,serif;font-size:32px;font-weight:500;color:#191008;margin:0 0 12px;line-height:1.2;}
.herotext p{font-size:14px;color:#636666;margin:0 0 16px;max-width:290px;}
.herocta{display:inline-block;background:#cc142b;color:#fff;font-size:14px;font-weight:600;padding:12px 24px;border-radius:8px;width:fit-content;}
.catstrip{display:flex;gap:6px;padding:14px 30px;}
.catpill{font-size:13px;font-weight:500;padding:6px 14px;border-radius:8px;color:#3d4246;}
.catpill.on{background:#f0ede5;color:#191008;font-weight:600;}
.grid{display:flex;gap:12px;padding:0 30px;}
.card{width:150px;}
.thumb{height:110px;border-radius:12px;margin-bottom:8px;position:relative;overflow:hidden;background:#f8f0e7;}
.badge{position:absolute;top:6px;left:6px;background:#cc142b;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:4px;}
.ptitle{font-size:13px;color:#191008;line-height:1.3;height:32px;overflow:hidden;}
.pricerow{display:flex;gap:6px;align-items:baseline;margin-top:4px;}
.pnow{font-size:14px;font-weight:600;color:#cc142b;}
.pwas{font-size:12px;color:#9da1a0;text-decoration:line-through;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#f0ede5;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;color:#766456;}
.footer span{margin-left:14px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Jamie Kay</div>
<div class="navlinks"><div>New Arrivals</div><div>Baby</div><div>Toddler</div><div>Sale</div></div>
<div class="navicons"><span>Search</span><span>Account</span><span style="position:relative;">Cart<span class="cartdot"></span></span></div>
</div>
<div class="hero">
<div class="heroimg"></div>
<div class="herotext">
<h1>Organic Cotton, Held Gently</h1>
<p>Considered essentials for the earliest days, made to be worn and loved.</p>
<div class="herocta">Shop New Arrivals</div>
</div>
</div>
<div class="catstrip">
<div class="catpill on">New Arrivals</div><div class="catpill">Baby</div><div class="catpill">Toddler</div><div class="catpill">Sale</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f0ede5,#977547)"><span class="badge">Sale</span></div><div class="ptitle">Ribbed Growsuit — Oatmeal</div><div class="pricerow"><span class="pnow">$28.00</span><span class="pwas">$36.00</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e3dfd3,#a0917c)"></div><div class="ptitle">Organic Cotton Knit Blanket</div><div class="pricerow"><span class="pnow">$54.00</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#977547,#f8f0e7)"><span class="badge">Sale</span></div><div class="ptitle">Toddler Rib Legging Set</div><div class="pricerow"><span class="pnow">$32.00</span><span class="pwas">$40.00</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#baaa95,#f0ede5)"></div><div class="ptitle">Little Bunny Soft Toy</div><div class="pricerow"><span class="pnow">$22.00</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f0ede5,#766456)"></div><div class="ptitle">Muslin Wrap — Set of Two</div><div class="pricerow"><span class="pnow">$36.00</span></div></div>
</div>
<div class="footer"><span>© Considered Essentials</span><span>Gifting<span> Shipping</span><span> Newsletter</span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2e475b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2e475b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #2e475b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b8a9e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #61afd5; color: #000000;
border: none; border-radius: 6px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #ffffff; color: #2e475b;
border: 1px solid #61afd5; border-radius: 6px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #2e475b;
border: 1px solid #cbd1d6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b8a9e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #61afd5; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#ffffff; color:#3a5a6e; box-sizing:border-box; font-family:'Inter',-apple-system,system-ui,'Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; border-bottom:1px solid #e3eaf0; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:17px; font-weight:700; color:#2e475b; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:500; color:#6b8a9e; }
.navlinks span.active { color:#61afd5; }
.search-pill { background:#f4f7f9; border:1px solid #d0dce5; border-radius:999px; padding:10px 20px; font-size:13px; color:#6b8a9e; flex:1; max-width:280px; }
.filter-bar { display:flex; gap:8px; padding:12px 32px; border-bottom:1px solid #e3eaf0; }
.chip { background:#f4f7f9; border:1px solid #d0dce5; border-radius:999px; padding:6px 14px; font-size:12px; font-weight:600; color:#2e475b; }
.chip.active { background:#61afd5; color:#fff; border-color:#61afd5; }
.main { display:flex; gap:20px; padding:16px 32px; height:340px; }
.gallery { width:340px; background:#f4f7f9; border-radius:10px; display:flex; align-items:center; justify-content:center; position:relative; }
.sleeve { width:220px; height:220px; background:linear-gradient(135deg,#61afd5,#2e475b); border-radius:8px; position:relative; }
.sleeve::before { content:''; position:absolute; inset:0; margin:auto; width:70px; height:70px; border-radius:50%; background:#fff; }
.sleeve::after { content:''; position:absolute; inset:0; margin:auto; width:24px; height:24px; border-radius:50%; background:#2e475b; }
.badge-new { position:absolute; top:16px; left:16px; background:#e8a838; color:#fff; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; padding:2px 8px; border-radius:4px; }
.info { flex:1; display:flex; flex-direction:column; gap:6px; }
.info h1 { font-size:22px; font-weight:600; margin:0; }
.artist { font-size:14px; color:#6b8a9e; }
.format { font-size:11px; color:#9bb3c4; }
.price { font-size:18px; font-weight:600; color:#2e475b; margin-top:2px; }
.desc { font-size:13px; line-height:1.5; color:#3a5a6e; max-width:400px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:40px; background:#61afd5; color:#fff; border:none; border-radius:6px; font-weight:600; font-size:14px; }
.btn-secondary { flex:1; height:40px; background:#fff; color:#2e475b; border:1px solid #d0dce5; border-radius:6px; font-weight:600; font-size:14px; }
.related-header { padding:0 32px; font-size:16px; font-weight:600; color:#2e475b; }
.related { display:flex; gap:14px; padding:8px 32px; }
.rel-card { flex:1; }
.rel-card .rel-img { height:70px; background:#f4f7f9; border-radius:6px; margin-bottom:6px; }
.rel-card span { font-size:11px; font-weight:600; display:block; }
.rel-card small { font-size:10px; color:#9bb3c4; }
</style></head>
<body>
<nav>
<p class="brand">Banquet Records</p>
<div class="navlinks"><span class="active">New Releases</span><span>Vinyl</span><span>CDs</span><span>Events</span></div>
<div class="search-pill">🔍 Search by artist, label, or format</div>
</nav>
<div class="filter-bar">
<span class="chip active">Vinyl 12"</span>
<span class="chip">Vinyl 7"</span>
<span class="chip">CD</span>
<span class="chip">Cassette</span>
</div>
<div class="main">
<div class="gallery">
<span class="badge-new">New Release</span>
<div class="sleeve"></div>
</div>
<div class="info">
<h1>Night Frequencies</h1>
<span class="artist">The Coastline Society</span>
<span class="format">180g Vinyl LP · Gatefold</span>
<span class="price">$28.00</span>
<p class="desc">A hazy, guitar-driven record pressed on heavyweight vinyl with a full-color gatefold sleeve and a printed lyric insert. Limited first pressing of 500.</p>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Pre-Order</button>
</div>
</div>
</div>
<div class="related-header">More from this label</div>
<div class="related">
<div class="rel-card"><div class="rel-img"></div><span>Static Radio</span><small>Halcyon EP · 7"</small></div>
<div class="rel-card"><div class="rel-img"></div><span>Low Season</span><small>Winter Tapes · Cassette</small></div>
<div class="rel-card"><div class="rel-img"></div><span>Marion Hale</span><small>Departures · CD</small></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2f4f1; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f2f4f1; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1A1A; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #E2E6DF; }
.brand { font-size:19px; font-weight:700; margin:0; letter-spacing:-0.3px; }
.navtabs { display:flex; gap:24px; font-size:13px; font-weight:600; color:#9A9E96; }
.navtabs span.on { color:#428000; }
.record { width:34px; height:34px; border-radius:50%; background:#428000;
box-shadow:0 6px 14px -4px rgba(66,128,0,0.4); }
.wrap { display:flex; gap:20px; padding:18px 36px; }
.map { position:relative; width:520px; height:490px; border-radius:14px; overflow:hidden;
background:#F2F4F1;
background-image:
radial-gradient(circle at 20% 30%, rgba(66,128,0,0.10) 0, rgba(66,128,0,0.10) 60px, transparent 61px),
radial-gradient(circle at 70% 65%, rgba(66,128,0,0.08) 0, rgba(66,128,0,0.08) 90px, transparent 91px),
radial-gradient(circle at 45% 80%, rgba(66,128,0,0.07) 0, rgba(66,128,0,0.07) 70px, transparent 71px); }
.searchpill { position:absolute; top:14px; left:14px; right:14px; height:44px; background:#fff; border-radius:22px;
box-shadow:rgba(0,0,0,0.12) 0 4px 12px; display:flex; align-items:center; padding:0 16px; gap:10px;
font-size:13px; color:#9A9E96; }
.pin { position:absolute; width:20px; height:20px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
box-shadow:0 2px 5px rgba(0,0,0,0.25); }
.pin.sel { width:26px; height:26px; border:3px solid #fff; }
.toggle { position:absolute; bottom:70px; left:50%; transform:translateX(-50%); display:flex;
background:#fff; border-radius:20px; box-shadow:rgba(0,0,0,0.12) 0 4px 12px; overflow:hidden; }
.toggle span { padding:9px 22px; font-size:13px; font-weight:600; }
.toggle .on { background:#428000; color:#fff; }
.toggle .off { color:#428000; }
.sheet { position:absolute; bottom:0; left:0; right:0; height:64px; background:#fff; border-radius:16px 16px 0 0;
box-shadow:rgba(0,0,0,0.18) 0 -10px 24px; display:flex; align-items:center; padding:0 16px; gap:10px; }
.sheetphoto { width:44px; height:44px; border-radius:10px; background:linear-gradient(135deg,#c9d9a8,#6f9b4f); flex-shrink:0; }
.sheetname { font-size:13px; font-weight:600; }
.sheetstat { font-size:11px; color:#6B6F68; margin-top:2px; }
.list { flex:1; display:flex; flex-direction:column; gap:14px; }
.tcard { border:1px solid #E2E6DF; border-radius:12px; padding:12px; }
.tphoto { width:100%; height:104px; border-radius:10px; margin-bottom:9px; position:relative; }
.tphoto .pc { position:absolute; bottom:6px; left:6px; background:rgba(0,0,0,0.55); color:#fff; font-size:10px;
font-weight:700; padding:2px 6px; border-radius:6px; }
.trow1 { display:flex; align-items:center; justify-content:space-between; }
.pill { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; padding:3px 9px; border-radius:11px; }
.pill.easy { color:#428000; background:#E8F0DF; }
.pill.mod { color:#C77700; background:#FBEEDD; }
.rate { font-size:12px; color:#1A1A1A; font-weight:600; }
.tname { font-size:15px; font-weight:600; margin-top:7px; }
.tloc { font-size:12px; color:#6B6F68; margin-top:2px; }
.stats { font-size:12px; color:#6B6F68; margin-top:6px; }
.stats b { color:#1A1A1A; font-weight:700; }
</style></head>
<body>
<nav>
<p class="brand">AllTrails (iOS)</p>
<div class="navtabs"><span class="on">Explore</span><span>Saved</span><span>Community</span><span>Profile</span></div>
<div class="record"></div>
</nav>
<div class="wrap">
<div class="map">
<div class="searchpill">🔍 Search by city, park, or trail</div>
<div class="pin sel" style="left:150px; top:140px; background:#428000;"></div>
<div class="pin" style="left:260px; top:210px; background:#C77700;"></div>
<div class="pin" style="left:340px; top:120px; background:#428000;"></div>
<div class="pin" style="left:200px; top:280px; background:#B3261E;"></div>
<div class="pin" style="left:390px; top:260px; background:#428000;"></div>
<div class="toggle"><span class="on">Map</span><span class="off">List</span></div>
<div class="sheet">
<div class="sheetphoto"></div>
<div><div class="sheetname">Eagle Ridge Loop</div><div class="sheetstat">5.2 mi · ↑ 1,200 ft · Moderate</div></div>
</div>
</div>
<div class="list">
<div class="tcard">
<div class="tphoto" style="background:linear-gradient(135deg,#cbe0a8,#7fae54)"><span class="pc">📷 32</span></div>
<div class="trow1"><span class="pill easy">Easy</span><span class="rate">★ 4.7 (1,284)</span></div>
<div class="tname">Eagle Ridge Loop</div>
<div class="tloc">Marin County, California</div>
<div class="stats">Length <b>5.2 mi</b> · Est. <b>2h 45m</b> · ↑ <b>1,200 ft</b></div>
</div>
<div class="tcard">
<div class="tphoto" style="background:linear-gradient(135deg,#f0d7a8,#c98a3f)"><span class="pc">📷 18</span></div>
<div class="trow1"><span class="pill mod">Moderate</span><span class="rate">★ 4.5 (612)</span></div>
<div class="tname">Sunset Mesa Trail</div>
<div class="tloc">Boulder County, Colorado</div>
<div class="stats">Length <b>7.8 mi</b> · Est. <b>4h 10m</b> · ↑ <b>2,050 ft</b></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #17171c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #17171c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.2; letter-spacing: -0.1px; margin: 0; color: #17171c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #777576; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: 0.10em; background: #9681ff; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: 0.10em; background: transparent; color: #17171c;
border: 1px solid #9681ff; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #17171c;
border: 1px solid #dedede; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777576; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.08em; background: #f5f5f5; color: #777576;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Unica77,'Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#17171c; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dedede;}
.logo{font-size:16px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;}
.navlinks{display:flex;gap:24px;font-size:12px;letter-spacing:.06em;color:#17171c;}
.hero{height:290px;background:#17171c;color:#fff;display:flex;align-items:center;padding:0 44px;}
.left{max-width:520px;}
.left h1{font-size:44px;font-weight:300;line-height:1.1;margin:0 0 16px;}
.left p{font-size:14px;color:#9a97a5;max-width:400px;margin:0 0 20px;}
.btn{display:inline-block;background:#9681ff;color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:14px 28px;}
.section{padding:22px 44px 0;}
.sectitle{font-size:22px;font-weight:300;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:200px;}
.thumb{height:130px;background:#f5f5f5;margin-bottom:8px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#9681ff;color:#fff;font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:9999px;}
.ptitle{font-size:13px;color:#2d2d2d;margin-bottom:4px;}
.pprice{font-size:14px;color:#17171c;}
.swrow{display:flex;gap:6px;margin-top:8px;}
.sw{width:16px;height:16px;border-radius:50%;}
</style>
<div class="nav">
<div class="logo">Wwake</div>
<div class="navlinks"><div>Rings</div><div>Necklaces</div><div>Earrings</div><div>About</div></div>
</div>
<div class="hero">
<div class="left">
<h1>Structural jewelry for the modern collector.</h1>
<p>Segmented opal drops and mismatched stacking rings from a Brooklyn studio.</p>
<div class="btn">Shop New</div>
</div>
</div>
<div class="section">
<div class="sectitle">New Arrivals</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">New</div></div><div class="ptitle">Opal Drop Ring</div><div class="pprice">$680</div><div class="swrow"><div class="sw" style="background:#d4a574"></div><div class="sw" style="background:#c0c0c0"></div></div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Bezel Stacking Ring</div><div class="pprice">$420</div><div class="swrow"><div class="sw" style="background:#d4a574"></div></div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Mismatched Studs</div><div class="pprice">$310</div><div class="swrow"><div class="sw" style="background:#c0c0c0"></div><div class="sw" style="background:#d4a574"></div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #003399; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #003399;
border: 1px solid #003399; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #582c83; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Archivo',Arial,sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #ebebeb;}
.logo{font-family:'Archivo Black',Arial,sans-serif;font-size:20px;font-weight:900;letter-spacing:-0.5px;}
.navlinks{display:flex;gap:26px;font-size:14px;}
.navlinks .active{color:#003399;border-bottom:2px solid #003399;padding-bottom:20px;}
.hero{height:220px;display:flex;align-items:center;padding:0 36px;background:#f2f2f2;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:0;top:0;width:420px;height:220px;background:linear-gradient(160deg,#582c83 0%,#003399 55%,#1a1a1a 100%);opacity:0.9;}
.hero:after{content:'';position:absolute;right:60px;top:40px;width:260px;height:140px;border:8px solid #ffffff;box-shadow:0 8px 24px rgba(0,0,0,0.25);}
.htxt{width:400px;z-index:2;}
.htxt h1{font-family:'Archivo Black',Arial,sans-serif;font-size:34px;font-weight:900;line-height:1.1;letter-spacing:-0.5px;margin:0 0 10px;}
.htxt p{font-size:14px;color:#333;margin:0 0 14px;width:320px;}
.cta{display:inline-block;background:#003399;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;}
.rowlabel{padding:18px 36px 10px;font-size:12px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;color:#808080;}
.grid{display:flex;gap:20px;padding:0 36px;}
.card{width:206px;}
.thumb{height:130px;background:#f2f2f2;position:relative;margin-bottom:8px;}
.frame{position:absolute;inset:14px;border:2px solid #fff;box-shadow:0 0 0 1px #dddddd;}
.badge{position:absolute;top:6px;left:6px;font-size:11px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;color:#fff;padding:4px 8px;z-index:2;}
.title{font-size:15px;font-weight:600;margin-bottom:2px;}
.artist{font-size:13px;color:#808080;margin-bottom:6px;}
.price{font-size:20px;font-weight:700;}
.footer{position:absolute;bottom:0;left:0;right:0;height:52px;background:#1a1a1a;color:#f2f2f2;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:13px;}
.footer a{color:#7fccf7;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Lumas</div>
<div class="navlinks"><span class="active">Editions</span><span>Photography</span><span>Painting</span><span>Artists</span></div>
</div>
<div class="hero">
<div class="htxt">
<h1>Original art, museum quality.</h1>
<p>Limited editions and signed originals, printed and framed to gallery standard.</p>
<div class="cta">View Collection</div>
</div>
</div>
<div class="rowlabel">Curated Editions</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge" style="background:#582c83;">Editorial</span><div class="frame" style="background:linear-gradient(135deg,#3d85c6,#053a5c);"></div></div><div class="title">Urban Landscapes No.4</div><div class="artist">M. Reyes</div><div class="price">$480</div></div>
<div class="card"><div class="thumb"><span class="badge" style="background:#8b6f47;">Edition</span><div class="frame" style="background:linear-gradient(135deg,#9c9c9c,#3a3a3a);"></div></div><div class="title">Silent Coastline</div><div class="artist">A. Berg</div><div class="price">$620</div></div>
<div class="card"><div class="thumb"><span class="badge" style="background:#9678d3;">Original</span><div class="frame" style="background:linear-gradient(135deg,#e8907e,#582c83);"></div></div><div class="title">Chromatic Study I</div><div class="artist">L. Fontaine</div><div class="price">$1,240</div></div>
</div>
<div class="footer"><span>© Lumas Editions</span><span><a>Certificate of Authenticity</a> <a>Shipping</a></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000175;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000175;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #000175; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #587bda; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #133cd1; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #133cd1;
border: 1px solid #133cd1; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #000175;
border: 1px solid #bfc0dc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #587bda; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fffcbb; color: #000175;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000175; box-sizing:border-box;
font-family:'Sailec','Georgia',serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:14px; font-weight:500; margin:0; color:#133cd1; text-transform:uppercase; letter-spacing:0.3px; font-family:'GT-Pressura',sans-serif; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; text-transform:uppercase; letter-spacing:0.3px; color:#587bda; font-family:'GT-Pressura',sans-serif; }
.navlinks span.on { color:#133cd1; }
.util { font-size:13px; color:#587bda; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 72px); }
.stage { padding:24px; display:flex; flex-direction:column; gap:14px; background:#f0f7ff; }
.stepper-row { display:flex; gap:8px; align-items:center; }
.step { width:32px; height:32px; border-radius:999px; background:#f0f7ff; color:#587bda; font-size:12px; display:flex; align-items:center; justify-content:center; font-weight:600; border:1px solid #deeaff; }
.step.active { background:#133cd1; color:#fff; border:none; }
.step.complete { background:#c8faa1; color:#000175; border:none; }
.step-line { flex:1; height:2px; background:#deeaff; }
.panel { flex:1; position:relative; overflow:hidden; border-radius:12px; background:#fff; }
.panel .jar { position:absolute; left:50%; bottom:8%; width:40%; height:70%; transform:translateX(-50%); background:linear-gradient(180deg,#7d9ce8,#2c53c9); border-radius:10px; }
.panel .lid { position:absolute; left:50%; top:14%; width:44%; height:10%; transform:translateX(-50%); background:#000175; border-radius:6px; }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:12px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#7d9ce8; }
h1 { margin:0; font-size:24px; font-weight:600; font-family:'GT-Pressura',sans-serif; }
.subscription-card { border:1px solid #e3eafd; border-radius:12px; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; }
.subscription-card.on { background:#f0f7ff; border-color:#133cd1; }
.sub-name { font-size:14px; font-weight:600; }
.sub-price { font-size:14px; color:#587bda; }
.desc { font-size:14px; color:#2c53c9; line-height:1.6; font-family:'Sailec',sans-serif; }
.divider { height:1px; background:#e3eafd; margin:2px 0; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#133cd1; color:#fff; border:none; border-radius:8px; font-size:16px; font-weight:600; font-family:'GT-Pressura',sans-serif; }
.btn-secondary { width:170px; height:48px; background:#fff; border:1px solid #133cd1; color:#133cd1; border-radius:8px; font-size:16px; font-weight:600; font-family:'GT-Pressura',sans-serif; }
</style></head>
<body>
<nav>
<p class="brand">Blueland Cleaning 2</p>
<div class="navlinks"><span class="on">Build Your Kit</span><span>Refills</span><span>Learn</span></div>
<div class="util">Step 2 of 3</div>
</nav>
<main>
<div class="stage">
<div class="stepper-row">
<span class="step complete">1</span><span class="step-line"></span>
<span class="step active">2</span><span class="step-line"></span>
<span class="step">3</span>
</div>
<div class="panel"><div class="jar"></div><div class="lid"></div></div>
</div>
<div class="info">
<span class="cat">Choose Your Frequency</span>
<h1>Bathroom Cleaner Refill Plan</h1>
<div class="subscription-card on">
<span class="sub-name">Every 2 months</span>
<span class="sub-price">$11.20 (save 20%)</span>
</div>
<div class="divider"></div>
<div class="subscription-card">
<span class="sub-name">One-time purchase</span>
<span class="sub-price">$14.00</span>
</div>
<p class="desc">Concentrated tablet dissolves in water inside your Forever Bottle — no plastic shipped, no harsh fumes, same bathroom-clean shine.</p>
<div class="cta-row">
<button class="btn-primary">Continue</button>
<button class="btn-secondary">Back</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.2px; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #6B6B6B; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #005A9C; color: #FFFFFF;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #FFFFFF; color: #005A9C;
border: 1px solid #005A9C; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B6B6B; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.3px; background: #E8F0FA; color: #005A9C;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#FFFFFF; font-family:'Helvetica Neue',Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:54px;background:#005A9C;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;color:#cfe0f0;}
.wrap{display:flex;}
.sidebar{width:172px;padding:16px 14px;border-right:1px solid #DDDDDD;}
.filtergroup{margin-bottom:14px;}
.filtertitle{font-size:11px;font-weight:700;color:#1A1A1A;text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px;}
.filteritem{font-size:11px;color:#6B6B6B;margin-bottom:4px;}
.main{flex:1;padding:16px 26px;}
.secTitle{font-size:15px;font-weight:600;color:#1A1A1A;margin-bottom:12px;}
.row{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid #EEEEEE;}
.thumb{width:46px;height:46px;border-radius:4px;flex-shrink:0;background:#F0F4F8;}
.info{flex:1;}
.catno{font-family:'Courier New',monospace;font-size:10px;color:#333333;}
.cname{font-size:13px;font-weight:600;color:#1A1A1A;margin:2px 0;}
.target{font-size:11px;color:#6B6B6B;}
.badge{display:inline-block;background:#E8F0FA;color:#005A9C;font-size:9px;font-weight:700;padding:2px 6px;border-radius:2px;margin-left:6px;}
.price{width:62px;text-align:right;font-size:13px;font-weight:700;color:#005A9C;}
</style>
<div class="nav">
<div class="logo">Tocris Bioscience</div>
<div class="navlinks"><span>Products</span><span>Target Class</span><span>Pathways</span><span>Literature</span></div>
</div>
<div class="wrap">
<div class="sidebar">
<div class="filtergroup"><div class="filtertitle">Target Class</div><div class="filteritem">GPCR</div><div class="filteritem">Ion Channel</div><div class="filteritem">Kinase</div></div>
<div class="filtergroup"><div class="filtertitle">Research Area</div><div class="filteritem">Neuroscience</div><div class="filteritem">Cancer Biology</div><div class="filteritem">Immunology</div></div>
<div class="filtergroup"><div class="filtertitle">Product Type</div><div class="filteritem">Small Molecule</div><div class="filteritem">Antibody</div></div>
</div>
<div class="main">
<div class="secTitle">Compounds — Neuroscience</div>
<div class="row"><div class="thumb"></div><div class="info"><div class="catno">Cat. No. 1234</div><div class="cname">CGP 55845 <span class="badge">GABA-B</span></div><div class="target">Antagonist · MW 502.7 · Solubility: DMSO</div></div><div class="price">$89.00</div></div>
<div class="row"><div class="thumb"></div><div class="info"><div class="catno">Cat. No. 0546</div><div class="cname">SB 216763 <span class="badge">Kinase</span></div><div class="target">GSK-3 Inhibitor · MW 371.3 · Solubility: DMSO</div></div><div class="price">$142.00</div></div>
<div class="row"><div class="thumb"></div><div class="info"><div class="catno">Cat. No. 3312</div><div class="cname">NBQX Disodium <span class="badge">Ion Channel</span></div><div class="target">AMPA Antagonist · MW 409.2 · Solubility: Water</div></div><div class="price">$76.00</div></div>
<div class="row"><div class="thumb"></div><div class="info"><div class="catno">Cat. No. 2698</div><div class="cname">Anti-NeuN Antibody <span class="badge">Marker</span></div><div class="target">Neuronal Nuclei · Clone A60 · IHC/WB</div></div><div class="price">$310.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111432;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111432;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #111432; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #5a5e9a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #3c4fe0; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #3c4fe0;
border: 1px solid #3c4fe0; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #23263b;
border: 1px solid #c4c4cc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a5e9a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #aa1177; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Inter',-apple-system,system-ui,'Helvetica Neue',sans-serif; color:#23263b; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #ededed;}
.logo{font-family:'Source Serif Pro',Georgia,serif;font-size:19px;font-weight:700;color:#111432;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:.2px;}
.navlinks span:first-child{color:#3c4fe0;border-bottom:2px solid #3c4fe0;padding-bottom:20px;}
.hero{height:210px;background:#f5f5fa;display:flex;align-items:center;padding:0 40px;}
.hero h1{font-family:'Source Serif Pro',Georgia,serif;font-size:32px;font-weight:700;max-width:400px;line-height:1.2;}
.hero span{display:block;background:#3c4fe0;color:#fff;font-size:14px;font-weight:600;padding:12px 24px;border-radius:4px;width:fit-content;margin-top:16px;}
.grid{display:flex;gap:16px;padding:20px 40px 0;}
.card{width:150px;box-shadow:0 1px 3px rgba(17,20,50,.08);border-radius:4px;overflow:hidden;background:#fff;}
.cover{height:180px;background:linear-gradient(160deg,#3c4fe0,#111432);}
.info{padding:10px;}
.title{font-family:'Source Serif Pro',Georgia,serif;font-size:14px;font-weight:600;line-height:1.3;}
.author{font-size:12px;color:#5a5e9a;margin-top:4px;}
.price{font-size:13px;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#111432;color:#b6b7d5;display:flex;align-items:center;justify-content:center;gap:26px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Princeton University Press</div>
<div class="navlinks"><span>Subjects</span><span>New Releases</span><span>Series</span><span>Journals</span></div>
</div>
<div class="hero"><h1>Scholarship for the curious reader.</h1><span>Browse Catalog</span></div>
<div class="grid">
<div class="card"><div class="cover"></div><div class="info"><div class="title">The Grammar of Empire</div><div class="author">R. Okonkwo-Baptiste</div><div class="price">$32.00</div></div></div>
<div class="card"><div class="cover"></div><div class="info"><div class="title">Fields of Deferred Light</div><div class="author">Helene Marchetti</div><div class="price">$28.00</div></div></div>
<div class="card"><div class="cover"></div><div class="info"><div class="title">On Ledger and Loss</div><div class="author">D. Vaswani</div><div class="price">$45.00</div></div></div>
<div class="card"><div class="cover"></div><div class="info"><div class="title">Atlas of the Unspoken</div><div class="author">Ingrid Solheim</div><div class="price">$38.00</div></div></div>
</div>
<div class="footer"><span>About</span><span>Subject Areas</span><span>Series</span><span>Contact</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.38; margin: 0; color: #6e6e6e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #226d7a; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #226d7a;
border: 1px solid #226d7a; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e6e6e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.4px; background: #22b8d1; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Einova</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#1a1a1a; font-family:'Open Sans',Roboto,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #eeeeee; }
.logo { font-weight:700; font-size:19px; color:#226d7a; }
.navlinks { display:flex; gap:26px; font-size:14px; font-weight:600; }
.navlinks span.off { color:#6e6e6e; }
.btn { background:#226d7a; color:#fff; border-radius:8px; padding:12px 24px; font-size:14px; font-weight:600; }
.hero { height:200px; background:#e4f5fa; display:flex; align-items:center; padding:0 32px; gap:30px; }
.hero-copy { flex:1; }
.hero-copy h1 { font-size:34px; font-weight:700; letter-spacing:-.3px; margin:0 0 10px; line-height:1.15; }
.hero-copy p { font-size:14px; color:#3d3d3d; margin:0 0 14px; max-width:340px; }
.hero-art { flex:1; height:150px; display:flex; align-items:center; justify-content:center; }
.disc { width:130px; height:130px; border-radius:50%; background:radial-gradient(circle at 40% 35%,#5fcdd8,#226d7a 75%);
box-shadow:0 14px 28px rgba(34,109,122,.3); position:relative; }
.disc::after { content:''; position:absolute; inset:42%; border-radius:50%; background:#fff; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:22px 32px; }
.card { background:#fff; border:1px solid #eeeeee; border-radius:12px; padding:16px; }
.thumb { height:100px; background:#f5fcfe; border-radius:8px; margin-bottom:10px; display:flex; align-items:center; justify-content:center; }
.thumb .mini { width:60px; height:60px; border-radius:50%; background:linear-gradient(160deg,#b0e0e9,#226d7a); }
.badge { display:inline-block; background:#22b8d1; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase;
border-radius:4px; padding:3px 8px; margin-bottom:8px; letter-spacing:.4px; }
.name { font-size:16px; font-weight:600; margin:0 0 6px; }
.price { font-size:18px; font-weight:700; }
.compare { font-size:13px; color:#999; text-decoration:line-through; margin-left:6px; }
</style></head>
<body>
<nav>
<div class="logo">Einova</div>
<div class="navlinks"><span>Chargers</span><span class="off">Batteries</span><span class="off">Cables</span><span class="off">Support</span></div>
<div class="btn">Shop All</div>
</nav>
<div class="hero">
<div class="hero-copy">
<h1>Charge smarter. Every surface.</h1>
<p>Disc-shaped wireless chargers engineered for a cleaner desk and faster power.</p>
</div>
<div class="hero-art"><div class="disc"></div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="mini"></div></div><span class="badge">New</span><p class="name">Aria 15W Wireless Pad</p><p class="price">$34.99</p></div>
<div class="card"><div class="thumb"><div class="mini"></div></div><p class="name">Duo Charging Stand</p><p class="price">$49.99 <span class="compare">$59.99</span></p></div>
<div class="card"><div class="thumb"><div class="mini"></div></div><p class="name">Compact Power Bank 10K</p><p class="price">$44.99</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f4ed; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f4ed; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #797774; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d97757; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f8f4ed; color: #d97757;
border: 1px solid #d97757; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f8f4ed; color: #111111;
border: 1px solid #d3d0ca; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #797774; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f3e0d5; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F8F4ED; color:#2D2520; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; width:960px; height:640px; }
/* ---- sidebar: conversation history ---- */
.side { width:220px; flex:0 0 220px; background:#F0EAE0; border-right:1px solid #DDD2BD;
display:flex; flex-direction:column; padding:18px 14px; }
.newchat { display:flex; align-items:center; gap:8px; background:#FBF9F4; border:1px solid #DDD2BD;
border-radius:12px; padding:10px 14px; font-size:13px; font-weight:500; color:#2D2520; }
.newchat .plus { font-size:15px; color:#D97757; }
.grouplabel { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.4pt;
color:#8A7E72; margin:18px 0 6px 6px; }
.convo { padding:9px 10px; border-radius:8px; font-size:12.5px; color:#2D2520; margin-bottom:2px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.convo.active { background:#E8E0D2; border-left:3px solid #D97757; padding-left:7px; font-weight:500; }
.convo .time { display:block; font-size:10.5px; color:#8A7E72; margin-top:2px; }
/* ---- main chat ---- */
.main { flex:1; display:flex; flex-direction:column; background:#F8F4ED; }
.topbar { height:52px; flex:0 0 52px; display:flex; align-items:center; justify-content:space-between;
padding:0 22px; }
.topbar .title { font-size:16px; font-weight:600; }
.topbar .dots { color:#8A7E72; font-size:16px; letter-spacing:2px; }
.modelchip { align-self:flex-start; margin:0 22px 14px; display:inline-flex; align-items:center; gap:6px;
background:#F0EAE0; border-radius:16px; padding:6px 12px; width:fit-content; }
.modelchip .star { color:#D97757; font-size:13px; }
.modelchip .name { font-size:12px; font-weight:500; }
.modelchip .chev { font-size:9px; color:#8A7E72; }
.thread { flex:1; padding:0 26px; display:flex; flex-direction:column; gap:22px; overflow:hidden; }
.userpill { align-self:flex-end; max-width:78%; background:#F0EAE0; border-radius:18px;
padding:11px 16px; font-size:13.5px; line-height:1.5; }
.assistant { display:flex; gap:12px; }
.avatar { flex:0 0 20px; width:20px; height:20px; border-radius:50%; display:flex; align-items:center;
justify-content:center; color:#D97757; font-size:15px; margin-top:2px; }
.abody { flex:1; }
.sender { font-size:11.5px; font-weight:500; color:#5A4F44; margin-bottom:5px; }
.sender .model { color:#8A7E72; font-weight:400; }
.serifbody { font-family:Georgia,'Times New Roman',serif; font-size:14.5px; line-height:1.6; color:#2D2520; }
.serifbody h3 { font-size:16px; margin:0 0 6px; font-weight:600; }
.serifbody p { margin:0 0 8px; }
.cursor { display:inline-block; width:6px; height:14px; background:#D97757; border-radius:1px;
vertical-align:text-bottom; margin-left:2px; }
.inputbar { flex:0 0 74px; margin:10px 22px 20px; background:#FBF9F4; border:1.5px solid #D97757;
border-radius:20px; display:flex; align-items:center; padding:12px 12px 12px 18px; gap:10px; }
.inputbar .ph { flex:1; font-size:13.5px; color:#8A7E72; }
.clip { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
color:#5A4F44; font-size:14px; }
.send { width:38px; height:38px; border-radius:50%; background:#D97757; display:flex; align-items:center;
justify-content:center; color:#FBF9F4; font-size:15px; }
</style></head>
<body>
<div class="shell">
<div class="side">
<div class="newchat"><span class="plus">+</span> New chat</div>
<div class="grouplabel">Today</div>
<div class="convo active">Claude (iOS) paper aesthetic<span class="time">2:14 PM</span></div>
<div class="convo">Tiempos vs Styrene pairing<span class="time">11:02 AM</span></div>
<div class="grouplabel">Yesterday</div>
<div class="convo">Artifact tray layout ideas<span class="time">Yesterday</span></div>
<div class="convo">Warm syntax palette check<span class="time">Yesterday</span></div>
</div>
<div class="main">
<div class="topbar"><span class="title">Paper aesthetic</span><span class="dots">⋯</span></div>
<div class="modelchip"><span class="star">✻</span><span class="name">Claude Opus 4.5</span><span class="chev">▾</span></div>
<div class="thread">
<div class="userpill">Why does Claude (iOS) use a serif for its own replies instead of a sans like everyone else?</div>
<div class="assistant">
<div class="avatar">✻</div>
<div class="abody">
<div class="sender">Claude (iOS) <span class="model">· Opus 4.5</span></div>
<div class="serifbody">
<h3>It's a typographic role‑asymmetry</h3>
<p>Serif for me, sans for you — the pairing itself is the brand decision. Tiempos reads as essay, not chatbot.<span class="cursor"></span></p>
</div>
</div>
</div>
</div>
<div class="inputbar"><span class="ph">Reply to Claude (iOS)…</span><span class="clip">📎</span><span class="send">↑</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ede8db; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ede8db; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.25; letter-spacing: 0.02em; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #596a62; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; background: #334fb4; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; background: transparent; color: #121212;
border: 1px solid #334fb4; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ede8db; color: #121212;
border: 1px solid #b6b2a9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #596a62; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 1.2px; background: #334fb4; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Juniper Print Shop Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Work Sans','Assistant',sans-serif; background:#ede8db; color:#121212; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dedede;}
.logo{font-family:serif;font-variant:small-caps;letter-spacing:.02em;font-size:22px;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;}
.search{width:170px;height:34px;border-radius:999px;background:#f3f3f3;font-size:12px;color:#596a62;line-height:34px;padding:0 14px;}
.hero{padding:26px 36px;text-align:center;background:#ece8db;}
.hero h1{font-family:serif;font-variant:small-caps;letter-spacing:.02em;font-size:40px;font-weight:400;line-height:1.08;margin:0 0 10px;}
.hero p{font-size:14px;color:#2a2a2a;margin:0 0 14px;}
.btn{display:inline-block;background:#334fb4;color:#fff;padding:12px 28px;border-radius:4px;font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;}
.pills{display:flex;gap:8px;padding:14px 36px;}
.pill{border:1px solid #dedede;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;padding:6px 14px;}
.pill.active{background:#121212;color:#ede8db;border-color:#121212;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:0 36px;}
.card{background:#ede8db;}
.imgbox{aspect-ratio:1/1;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#334fb4;color:#fff;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;}
.badge.sage{background:#596a62;}
.title{font-size:13px;margin-top:8px;}
.price{font-size:13px;font-weight:500;margin-top:2px;}
</style>
<div class="nav">
<div class="logo">Juniper Print Shop</div>
<div class="navlinks"><span>Prints</span><span>Collections</span><span>Custom</span></div>
<div class="search">Search prints…</div>
</div>
<div class="hero">
<h1>Art For The Wall,<br>Not The Screen</h1>
<p>Fine art prints in limited editions, letterpress-inspired and ready to frame.</p>
<div class="btn">Shop Collection</div>
</div>
<div class="pills">
<div class="pill active">All</div><div class="pill">Botanical</div><div class="pill">Typography</div><div class="pill">Maps</div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#c9b8e0,#8f7cc4);"><div class="badge">Limited</div></div>
<div class="title">Cascade Botanical Study</div>
<div class="price">$45.00</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#e8d4ae,#ab8c52);"><div class="badge sage">New</div></div>
<div class="title">Modern Type Poster No.4</div>
<div class="price">$38.00</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#c3d9c9,#596a62);"></div>
<div class="title">Vintage City Map — Portland</div>
<div class="price">$52.00</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#e0d0d0,#9c6c6c);"></div>
<div class="title">Sunset Ridge Print</div>
<div class="price">$45.00</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #111111; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #111111; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: 0.5px; background: #44d62c; color: #111111;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: 0.5px; background: #222222; color: #44d62c;
border: 1px solid #44d62c; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #222222; color: #ffffff;
border: 1px solid #111111; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; background: #44d62c; color: #111111;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#111111; color:#fff; font-family:'Open Sans', 'Helvetica Neue', Arial, sans-serif; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:700;color:#44d62c;letter-spacing:0.5px;text-transform:uppercase;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.navlinks .active{color:#44d62c;}
.navlinks .in{color:#717171;}
.hero{padding:0 32px;background:#111111;}
.hero h1{font-size:28px;font-weight:700;margin:0 0 12px;max-width:420px;}
.hero p{font-size:16px;color:#717171;margin:0 0 20px;max-width:420px;}
.herocta{width:fit-content;background:#44d62c;color:#111;font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:14px 32px;border-radius:4px;}
.grid{display:flex;gap:16px;padding:16px 32px 0;}
.card{width:206px;background:#222222;border-radius:4px;padding:16px;position:relative;}
.thumb{height:96px;background:#111111;border-radius:4px;margin-bottom:10px;}
.badge{position:absolute;top:10px;left:10px;background:#44d62c;color:#111;font-size:11px;font-weight:700;padding:2px 6px;border-radius:2px;}
.badge.sale{background:#c8323c;color:#fff;}
.ptitle{font-size:14px;font-weight:600;}
.pprice{font-size:16px;font-weight:700;color:#44d62c;margin-top:6px;}
.toggle{display:flex;align-items:center;gap:10px;padding:16px 32px 0;font-size:14px;}
.tgl{width:44px;height:24px;border-radius:9999px;background:#44d62c;position:relative;}
.tgl:before{content:'';position:absolute;right:2px;top:2px;width:20px;height:20px;border-radius:50%;background:#fff;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#717171;border-top:1px solid #444444;}
.wrap{position:relative;height:640px;padding-top:26px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Razer</div>
<div class="navlinks"><div class="active">Mice</div><div class="in">Keyboards</div><div class="in">Headsets</div><div class="in">Laptops</div></div>
</div>
<div class="hero">
<h1>Built for reaction time.</h1>
<p>Competitive gaming hardware engineered for speed and clarity — no gradient, no blur, no compromise.</p>
<div class="herocta">Shop Peripherals</div>
</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#44d62c,#111);"></div><div class="ptitle">Viper V3 Pro Mouse</div><div class="pprice">$159.99</div></div>
<div class="card"><div class="badge sale">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#28aadc,#111);"></div><div class="ptitle">Huntsman V3 Keyboard</div><div class="pprice">$199.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff9c07,#111);"></div><div class="ptitle">BlackShark V2 Headset</div><div class="pprice">$99.99</div></div>
</div>
<div class="toggle"><div class="tgl"></div><span>Chroma RGB Enabled</span></div>
<div class="footer"><span>© Razer Gaming Hardware</span><span>Chroma Synapse Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px; overflow:hidden;
background:radial-gradient(circle at 30% 20%, #2a2422 0%, #000 55%),
radial-gradient(circle at 75% 75%, #201d2b 0%, #000 60%); }
.stage::after { content:''; position:absolute; inset:0;
background:repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 6px); }
.storybars { position:absolute; top:16px; left:16px; right:16px; display:flex; gap:5px; z-index:5; }
.storybars i { flex:1; height:2.5px; background:rgba(255,255,255,0.3); border-radius:2px; display:block; }
.storybars i.played { background:#FFFFFF; }
.ticker { position:absolute; top:30px; left:16px; z-index:5; display:flex; align-items:center; gap:8px; }
.note { width:13px; height:13px; border:2px solid #fff; border-radius:50%; position:relative; }
.ticker-text { font-size:11px; font-weight:500; color:rgba(255,255,255,0.85); }
.eq { display:flex; gap:2px; align-items:flex-end; height:10px; }
.eq span { width:2px; background:#fff; border-radius:1px; }
.eq span:nth-child(1){height:4px;} .eq span:nth-child(2){height:9px;} .eq span:nth-child(3){height:6px;} .eq span:nth-child(4){height:8px;}
.wordmark { position:absolute; top:16px; right:20px; font-size:20px; font-weight:600; letter-spacing:-0.5px; z-index:5; color:#fff; }
.scrim { position:absolute; left:0; right:0; bottom:0; height:62%;
background:linear-gradient(to top, rgba(0,0,0,0.92), transparent); z-index:2; }
.caption { position:absolute; left:20px; right:20px; bottom:96px; z-index:6; }
.name { font-size:28px; font-weight:600; letter-spacing:-0.4px; margin:0 0 6px; color:#fff; }
.role { font-size:13px; font-weight:500; letter-spacing:0.4px; text-transform:uppercase; color:rgba(255,255,255,0.92); margin-bottom:8px; }
.bio { font-size:15px; color:rgba(255,255,255,0.72); line-height:1.4; margin-bottom:8px; max-width:520px; }
.loc { font-size:13px; color:rgba(255,255,255,0.6); }
.actions { position:absolute; bottom:18px; left:0; right:0; display:flex; justify-content:center;
align-items:center; gap:56px; z-index:6; }
.skip { font-size:26px; color:rgba(255,255,255,0.9); font-weight:300; }
.heart { width:60px; height:60px; border-radius:50%; border:1px solid #fff; display:flex; align-items:center; justify-content:center; font-size:24px; }
.noteicon { font-size:22px; color:rgba(255,255,255,0.9); }
.chip-row { position:absolute; top:80px; right:20px; z-index:5; display:flex; gap:8px; flex-direction:column; align-items:flex-end; }
.chip { border:1px solid #2E2E2E; border-radius:999px; padding:6px 14px; font-size:12px; font-weight:500; color:#fff; }
.chip.selected { background:#fff; color:#000; border-color:#fff; }
</style></head>
<body>
<div class="stage">
<div class="wordmark">Raya (iOS)</div>
<div class="storybars">
<i class="played"></i><i class="played"></i><i></i><i></i><i></i>
</div>
<div class="ticker">
<span class="note"></span>
<span class="ticker-text">Frank Ocean — Pink + White</span>
<div class="eq"><span></span><span></span><span></span><span></span></div>
</div>
<div class="chip-row">
<span class="chip selected">Film</span>
<span class="chip">Music</span>
<span class="chip">Travel</span>
</div>
<div class="scrim"></div>
<div class="caption">
<p class="name">Elena</p>
<p class="role">DIRECTOR · FILM & MUSIC</p>
<p class="bio">Making quiet films about loud cities. Currently based between LA and Lisbon.</p>
<p class="loc">📍 Los Angeles · 4 mi</p>
</div>
<div class="actions">
<span class="skip">✕</span>
<div class="heart">♡</div>
<span class="noteicon">✉</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e4e2d5; color: #1d2124;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e4e2d5; color: #1d2124;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #1d2124; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #545b62; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #0062cc; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: transparent; color: #0062cc;
border: 1px solid #0062cc; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1d2124;
border: 1px solid #c8cbcf; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #545b62; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.2px; background: #0062cc; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Duesenberg Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
background:#e4e2d5; color:#1d2124;
}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #c8cbcf;}
.logo{font-size:19px;font-weight:700;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:24px;font-size:15px;font-weight:500;color:#383d41;}
.hero{background:#1d2124;color:#e4e2d5;min-height:220px;display:flex;align-items:center;padding:0 36px;}
.hero h1{font-size:40px;font-weight:700;letter-spacing:-0.6px;line-height:1.15;margin:0 0 16px;max-width:480px;}
.herobtn{background:transparent;border:2px solid #e4e2d5;color:#e4e2d5;font-size:16px;font-weight:600;padding:10px 22px;border-radius:4px;display:inline-block;}
.section{padding:20px 36px 0;}
.section-title{font-size:20px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{flex:1;background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.08);overflow:hidden;}
.card-img{height:120px;position:relative;}
.card-img.c1{background:linear-gradient(150deg,#0062cc,#1d2124);}
.card-img.c2{background:linear-gradient(150deg,#1d2124,#c8cbcf);}
.card-img.c3{background:linear-gradient(150deg,#004085,#c8cbcf);}
.card-img.c4{background:linear-gradient(150deg,#383d41,#0062cc);}
.seriestag{position:absolute;bottom:6px;left:6px;background:#0062cc;color:#fff;font-size:12px;padding:4px 10px;border-radius:4px;}
.card-body{padding:12px;}
.series{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#545b62;margin-bottom:4px;}
.title{font-size:16px;font-weight:600;margin-bottom:4px;}
</style>
<nav class="nav">
<div class="logo">Duesenberg</div>
<div class="navlinks">
<span>Guitars</span><span>Artists</span><span>Dealers</span><span>About</span>
</div>
</nav>
<div class="hero">
<h1>Handcrafted electric guitars.<br>Since 1980.</h1>
</div>
<div class="section">
<div class="section-title">Featured Models</div>
<div class="grid">
<div class="card"><div class="card-img c1"><span class="seriestag">Starplayer</span></div><div class="card-body"><div class="series">Starplayer Series</div><div class="title">Starplayer TV</div></div></div>
<div class="card"><div class="card-img c2"><span class="seriestag">Bonneville</span></div><div class="card-body"><div class="series">Bonneville Series</div><div class="title">Bonneville Deluxe</div></div></div>
<div class="card"><div class="card-img c3"><span class="seriestag">Fullerton</span></div><div class="card-body"><div class="series">Fullerton Series</div><div class="title">Fullerton Elite</div></div></div>
<div class="card"><div class="card-img c4"><span class="seriestag">Gran Majesto</span></div><div class="card-body"><div class="series">Gran Majesto Series</div><div class="title">Gran Majesto DE</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f0f0f3; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #f0f0f3;
border: 1px solid #f0f0f3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #262627; color: #f0f0f3;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f0f0f3; color:#1c2024; box-sizing:border-box;
font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
.wrap { display:flex; flex-direction:column; height:640px; }
nav { height:64px; flex:0 0 64px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; background:#ffffff; border-bottom:1px solid #e0e1e6; }
.brand { font-size:16px; font-weight:600; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#60646c; }
.navlinks span:first-child { color:#0d74ce; }
.btn-primary { background:#000000; color:#ffffff; border:none; border-radius:36px;
padding:0 18px; height:36px; display:inline-flex; align-items:center; font-weight:500; font-size:13px; white-space:nowrap; }
main { flex:1; display:flex; gap:20px; padding:24px 32px; min-height:0; }
.pipeline { width:308px; display:flex; flex-direction:column; gap:10px; }
.pipeline h2 { font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:#80838d; margin:0 0 2px; }
.step { background:#ffffff; border:1px solid #d9d9e0; border-radius:8px; padding:12px 14px;
display:flex; align-items:center; gap:10px; }
.step .dot { width:9px; height:9px; border-radius:9999px; flex:0 0 9px; }
.dot.ok { background:#0d74ce; }
.dot.now { background:#000000; box-shadow:0 0 0 3px rgba(0,0,0,0.12); }
.dot.pending { background:#d9d9e0; }
.step .t { flex:1; min-width:0; }
.step .t .name { font-size:13px; font-weight:600; }
.step .t .sub { font-size:11px; color:#80838d; }
.step .st { font-size:10px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:#80838d; }
.step.now { border-color:#1c2024; }
.step.now .st { color:#1c2024; }
.term { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.phone { width:220px; height:388px; border-radius:28px; background:#1c2024; padding:10px; position:relative; }
.phone .screen { width:100%; height:100%; border-radius:20px; background:#0d0e10; overflow:hidden; padding:16px 14px; }
.phone .notch { position:absolute; top:10px; left:50%; transform:translateX(-50%); width:64px; height:14px; border-radius:9999px; background:#000; }
.screen .line { font-size:10.5px; line-height:1.7; white-space:pre; }
.l-prompt { color:#66d9ef; }
.l-ok { color:#8ce99a; }
.l-dim { color:#6b7280; }
.l-cursor { color:#e6e6e6; }
.caption { max-width:220px; text-align:center; font-size:12px; color:#60646c; line-height:1.5; }
.caption b { color:#1c2024; }
footer { flex:0 0 40px; border-top:1px solid #e0e1e6; padding:0 32px; display:flex;
align-items:center; justify-content:space-between; font-size:11px; color:#80838d; background:#ffffff; }
</style></head>
<body>
<div class="wrap">
<nav>
<p class="brand">Expo</p>
<div class="navlinks"><span>Docs</span><span>Build</span><span>Submit</span><span>Pricing</span></div>
<button class="btn-primary">Get started</button>
</nav>
<main>
<div class="pipeline">
<h2>Build pipeline</h2>
<div class="step">
<span class="dot ok"></span>
<span class="t"><span class="name">Install</span><br><span class="sub">Dependencies resolved</span></span>
<span class="st">Done</span>
</div>
<div class="step">
<span class="dot ok"></span>
<span class="t"><span class="name">Bundle</span><br><span class="sub">JavaScript and native modules</span></span>
<span class="st">Done</span>
</div>
<div class="step now">
<span class="dot now"></span>
<span class="t"><span class="name">Build</span><br><span class="sub">Compiling for iOS and Android</span></span>
<span class="st">Running</span>
</div>
<div class="step">
<span class="dot pending"></span>
<span class="t"><span class="name">Submit</span><br><span class="sub">Store review queue</span></span>
<span class="st">Queued</span>
</div>
<div class="step">
<span class="dot pending"></span>
<span class="t"><span class="name">Update</span><br><span class="sub">Push a fix without a rebuild</span></span>
<span class="st">Queued</span>
</div>
</div>
<div class="term">
<div class="phone">
<div class="notch"></div>
<div class="screen mono">
<div class="line l-prompt">$ app build --platform all</div>
<div class="line l-ok">✓ Bundling JavaScript</div>
<div class="line l-ok">✓ Compiling native runtime</div>
<div class="line l-ok">✓ Uploading build artifact</div>
<div class="line l-dim">... waiting for store queue</div>
<div class="line l-cursor">█</div>
</div>
</div>
<p class="caption">Scan the build, install it on a real device, and iterate <b>without waiting on a store review.</b></p>
</div>
</main>
<footer>
<span>© Expo</span>
<span>Expo · Docs · Pricing · Status</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #f9fafb; color: #111111;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #444444;
border: 1px solid #bfc0c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; color:#111111; font-family:'Nunito Sans', Arial, sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#111111;}
.logo{font-family:'Archivo',Arial,sans-serif;font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-family:'Archivo',Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:#fff;}
.hero{height:240px;display:flex;background:#111111;color:#fff;}
.herotext{width:48%;padding:0 32px;display:flex;flex-direction:column;justify-content:center;}
.herotext h1{font-family:'Archivo',Arial,sans-serif;font-size:30px;font-weight:700;letter-spacing:-0.5px;margin:0 0 10px;line-height:1.2;}
.herotext p{font-size:14px;color:#cfcfcf;margin:0 0 16px;max-width:300px;}
.herocta{width:fit-content;background:#108474;color:#fff;font-family:'Archivo',Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:12px 24px;border-radius:8px;}
.heroimg{width:52%;position:relative;overflow:hidden;}
.phone{position:absolute;right:110px;top:30px;width:120px;height:180px;background:linear-gradient(160deg,#108474,#0d6b5c);border-radius:16px;border:4px solid #444;}
.phone:before{content:'';position:absolute;inset:8px;background:#0e6a5c;border-radius:10px;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:210px;background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.08);padding:14px;}
.thumb{height:96px;border-radius:12px 12px 0 0;margin:-14px -14px 10px;background:linear-gradient(135deg,#c1e6e6,#108474);}
.badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;background:#ffac00;color:#111;}
.ptitle{font-size:16px;font-weight:600;margin-top:8px;}
.pprice{font-size:18px;font-weight:700;margin-top:4px;}
.stars{color:#ffac00;font-size:13px;margin-top:2px;}
.accordion{margin:16px 32px 0;background:#fff;border:1px solid #dedede;border-radius:8px;padding:12px 16px;}
.accordion .h{font-size:15px;font-weight:600;color:#111;}
.footer{position:absolute;bottom:0;left:0;right:0;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#aaa;background:#121212;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Raptic</div>
<div class="navlinks"><div>Phone Cases</div><div>Screen Armor</div><div>Chargers</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Armor with precision, not grit.</h1>
<p>Military-grade drop protection engineered with the confidence of surgical precision.</p>
<div class="herocta">Shop Cases</div>
</div>
<div class="heroimg"><div class="phone"></div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="badge">Sale</div><div class="ptitle">Shockproof Case — Onyx</div><div class="pprice">$24.99</div><div class="stars">★★★★★ 4.8</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a89cc8,#108474);"></div><div class="ptitle">Tempered Glass — Clear</div><div class="pprice">$14.99</div><div class="stars">★★★★★ 4.9</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#108474,#e9e9e9);"></div><div class="ptitle">30W Fast Charger</div><div class="pprice">$29.99</div><div class="stars">★★★★★ 4.7</div></div>
</div>
<div class="accordion"><div class="h">Warranty & Drop Test Certification</div></div>
<div class="footer"><span>© Raptic Protective Gear</span><span>Warranty Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -0.25px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6887a0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.75px; background: #aa0000; color: #ffffff;
border: none; border-radius: 0px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.75px; background: transparent; color: #000000;
border: 1px solid #aa0000; border-radius: 0px;
padding: 14px 30px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6887a0; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #aa0000; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; color:#3c4862; }
*{box-sizing:border-box;}
.nav{height:64px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid rgba(255,255,255,0.1);}
.logo{font-size:20px;font-weight:800;color:#fff;letter-spacing:-0.5px;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;color:#fff;letter-spacing:0.25px;}
.hero{height:290px;position:relative;background:linear-gradient(rgba(18,18,18,0.55),rgba(18,18,18,0.55)),repeating-linear-gradient(100deg,#1c3a52 0,#1c3a52 40px,#264a68 40px,#264a68 80px);display:flex;align-items:center;padding:0 34px;}
.bar{position:absolute;top:0;left:0;width:100%;height:4px;background:#aa0000;}
.h1{font-size:44px;font-weight:800;color:#fff;letter-spacing:-1.2px;line-height:1.05;margin:0 0 12px;}
.sub{font-size:15px;color:#e5e5e5;margin:0 0 20px;max-width:400px;}
.ctas{display:flex;gap:14px;}
.btnp{background:#aa0000;color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;padding:15px 28px;}
.btns{background:transparent;color:#fff;border:2px solid #fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;padding:13px 26px;}
.strip{height:44px;background:#fff;border-bottom:1px solid #dedede;display:flex;align-items:center;gap:22px;padding:0 30px;font-size:13px;font-weight:600;color:#222222;}
.strip .chip{background:#aa0000;color:#fff;border-radius:9999px;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:4px 10px;}
.grid{display:flex;gap:14px;padding:16px 30px 0;}
.card{width:206px;border:1px solid #dedede;border-radius:4px;padding:12px;}
.thumb{height:104px;border-radius:2px;margin-bottom:8px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#aa0000;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;border-radius:9999px;padding:3px 9px;}
.ptitle{font-size:16px;font-weight:600;color:#222222;}
.pprice{font-size:15px;font-weight:700;color:#222222;margin-top:4px;}
.award{display:inline-block;margin-top:6px;border:1px solid #f48037;color:#222222;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:48px;background:#121212;border-top:3px solid #aa0000;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;color:#dedede;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Red Paddle CO</div>
<div class="navlinks"><div>Boards</div><div>Kayaks</div><div>Accessories</div><div>Compare</div></div>
</div>
<div class="hero">
<div class="bar"></div>
<div>
<div class="h1">Built for open<br>water, not showrooms.</div>
<div class="sub">Inflatable paddle boards designed to survive conditions that punish the underbuilt.</div>
<div class="ctas"><div class="btnp">Shop Boards</div><div class="btns">Find Your Size</div></div>
</div>
</div>
<div class="strip">
<div class="chip">Sale</div><div>All-Round</div><div>Touring</div><div>Whitewater</div><div>Compact</div>
</div>
<div class="grid">
<div class="card"><div class="badge">Award</div><div class="thumb" style="background:linear-gradient(160deg,#aa0000,#121212)"></div><div class="ptitle">Ride 10'6" SE</div><div class="pprice">$1,249</div><div class="award">SUP Mag Top Pick</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#121212,#aa0000)"></div><div class="ptitle">Voyager+ 13'2"</div><div class="pprice">$1,749</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#3c4862,#121212)"></div><div class="ptitle">Compact 9'6"</div><div class="pprice">$999</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#121212,#3c4862)"></div><div class="ptitle">Titan Pump 2.0</div><div class="pprice">$189</div></div>
</div>
<div class="footer"><span>© Red Paddle CO — offshore-tested since day one</span><span>Warranty · Dealers</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.25px; background: #313131; color: #ffffff;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.25px; background: #f9f9f9; color: #313131;
border: 1px solid #313131; border-radius: 6px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9f9f9; color: #313131;
border: 1px solid #c7c7c7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9f9f9; color:#313131; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#f9f9f9; border-bottom:1px solid #e5e5e5; }
.brand { font-size:19px; font-weight:600; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:14px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; color:#7a7a7a; }
.navlinks span.active { color:#313131; border-bottom:2px solid #313131; padding-bottom:20px; }
.navcta { background:#313131; color:#fff; border-radius:6px; padding:11px 22px; font-size:14px; font-weight:500; }
.hero { display:flex; align-items:center; padding:36px 32px; gap:32px; background:#f0f0f0; }
.heroText { flex:1; }
.headline { font-size:32px; font-weight:600; letter-spacing:-0.5px; line-height:1.2; margin-bottom:10px; }
.sub { font-size:16px; color:#4a4a4a; line-height:1.5; max-width:340px; margin-bottom:16px; }
.heroBtn { display:inline-block; background:#313131; color:#fff; border-radius:6px; padding:12px 26px; font-size:16px; font-weight:500; }
.heroImg { flex:1; height:180px; border-radius:12px;
background:linear-gradient(135deg,#e8825a,#f0a86f 50%,#e8825a); position:relative; }
.heroImg::after { content:''; position:absolute; left:30px; top:30px; width:120px; height:120px; border-radius:50%;
background:#2b2b2b; }
.heroImg::before { content:''; position:absolute; right:40px; bottom:20px; width:80px; height:80px; border-radius:12px;
background:#7a4a2e; }
.section { padding:24px 32px 0; }
.section h2 { font-size:24px; font-weight:600; margin-bottom:16px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { background:#fff; border:1px solid #e5e5e5; border-radius:12px; padding:16px; }
.photo { aspect-ratio:1/1; border-radius:8px; margin-bottom:8px; position:relative; }
.c1 .photo { background:linear-gradient(150deg,#4a4a4a,#1a1a1a); }
.c2 .photo { background:linear-gradient(150deg,#e8825a,#c25a35); }
.c3 .photo { background:linear-gradient(150deg,#7a9a7a,#4a6a4a); }
.c4 .photo { background:linear-gradient(150deg,#c1c9d1,#8a97a3); }
.badge { position:absolute; top:8px; left:8px; background:#313131; color:#fff; font-size:11px; font-weight:600;
letter-spacing:0.5px; text-transform:uppercase; border-radius:2px; padding:2px 8px; }
.name { font-size:16px; font-weight:500; margin-bottom:2px; }
.price { font-size:16px; color:#313131; }
</style></head>
<body>
<nav>
<div class="brand">Gir</div>
<div class="navlinks">
<span class="active">Shop</span><span>Ultimate Spatula</span><span>Kitchen Tools</span><span>About</span>
</div>
<div class="navcta">Cart (0)</div>
</nav>
<div class="hero">
<div class="heroText">
<div class="headline">Get It Right,<br>every time.</div>
<div class="sub">Premium silicone kitchen tools built to last a lifetime in your drawer.</div>
<div class="heroBtn">Shop the Ultimate Spatula</div>
</div>
<div class="heroImg"></div>
</div>
<div class="section">
<h2>Best Sellers</h2>
<div class="grid">
<div class="card c1"><div class="photo"><div class="badge">New</div></div><div class="name">Ultimate Spatula</div><div class="price">$14.99</div></div>
<div class="card c2"><div class="photo"></div><div class="name">Mini Spatula Set</div><div class="price">$24.99</div></div>
<div class="card c3"><div class="photo"></div><div class="name">Ultimate Turner</div><div class="price">$16.99</div></div>
<div class="card c4"><div class="photo"></div><div class="name">Ultimate Whisk</div><div class="price">$18.99</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #555555;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #555555;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #555555;
border: 1px solid #d0d1d2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f5af19; color: #555555;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:'Nunito Sans',Arial,sans-serif; color:#555555; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#ffffff;}
.logo{font-size:19px;font-weight:700;color:#108474;text-transform:uppercase;}
.search{width:220px;height:36px;border-radius:9999px;border:1px solid #e9e9e9;background:#fff;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#7b7b7b;}
.cart{background:#f5af19;color:#555;font-size:12px;font-weight:700;border-radius:4px;padding:8px 14px;}
.catstrip{display:flex;gap:22px;padding:10px 32px;background:#fff;border-bottom:1px solid #e9e9e9;font-size:13px;font-weight:600;text-transform:uppercase;color:#7b7b7b;}
.catstrip span:first-child{color:#108474;border-bottom:2px solid #108474;padding-bottom:8px;}
.hero{height:174px;background:#108474;display:flex;align-items:center;padding:0 32px;}
.herotext h1{color:#fff;font-size:24px;font-weight:700;margin:0 0 10px;}
.herocta{display:inline-block;background:#f5af19;color:#555;font-size:14px;font-weight:600;border-radius:8px;padding:12px 24px;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:150px;background:#fff;border-radius:12px;padding:8px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#f5af19;color:#555;font-size:9px;font-weight:700;text-transform:uppercase;border-radius:4px;padding:2px 6px;z-index:2;}
.thumb{height:96px;border-radius:8px;margin-bottom:6px;}
.ptitle{font-size:13px;font-weight:600;color:#222;height:32px;overflow:hidden;}
.pprice{font-size:13px;color:#108474;font-weight:700;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#555555;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.footer span{color:#fff;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Solaris Japan</div>
<div class="search">Search imports...</div>
<div class="cart">Cart (3)</div>
</div>
<div class="catstrip"><span>Electronics</span><span>Figures</span><span>Snacks</span><span>Stationery</span><span>Pre-Order</span></div>
<div class="hero">
<div class="herotext">
<h1>Direct from Tokyo, curated for you.</h1>
<div class="herocta">Shop New Arrivals</div>
</div>
</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#108474,#f5af19)"></div><div class="ptitle">Retro Game Console</div><div class="pprice">¥12,800</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f5af19,#108474)"></div><div class="ptitle">Collectible Figure Set</div><div class="pprice">¥5,400</div></div>
<div class="card"><span class="badge" style="background:#108474;color:#fff;">Pre-Order</span><div class="thumb" style="background:linear-gradient(135deg,#555,#108474)"></div><div class="ptitle">Limited Snack Box</div><div class="pprice">¥3,200</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7b7b7b,#f5af19)"></div><div class="ptitle">Washi Stationery Kit</div><div class="pprice">¥2,100</div></div>
</div>
<div class="footer"><span>© Solaris Japan — imports done right</span><span>Shipping · Returns</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #5b5b5b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #5b5b5b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #5b5b5b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8a8a8a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.2px; background: #c1e9ff; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.2px; background: #ffffff; color: #5b5b5b;
border: 1px solid #c1e9ff; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #5b5b5b;
border: 1px solid #d6d6d6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #c1e9ff; color: #5b5b5b;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,'Helvetica Neue',sans-serif; color:#5b5b5b; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:19px;font-weight:600;color:#5b5b5b;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;color:#8a8a8a;}
.cta{background:#c1e9ff;color:#5b5b5b;font-size:13px;font-weight:600;padding:10px 22px;border-radius:9999px;}
.hero{height:250px;display:flex;background:#ecf7fc;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 36px;}
.herotext h1{font-size:30px;font-weight:600;margin:0 0 12px;line-height:1.3;color:#5b5b5b;}
.herotext p{font-size:14px;color:#8a8a8a;margin:0 0 18px;max-width:290px;}
.btn{display:inline-block;background:#c1e9ff;color:#5b5b5b;font-size:13px;font-weight:600;padding:12px 26px;border-radius:9999px;width:fit-content;}
.heroimg{width:54%;position:relative;overflow:hidden;background:linear-gradient(160deg,#e1fcff,#bde7ff 70%);}
.box{position:absolute;bottom:40px;left:110px;width:140px;height:110px;background:#fff;border-radius:14px;box-shadow:0 8px 20px rgba(0,0,0,0.06);}
.box2{position:absolute;bottom:60px;left:260px;width:90px;height:80px;background:#eceafb;border-radius:14px;}
.circle{position:absolute;bottom:210px;left:150px;width:40px;height:40px;border-radius:50%;background:#f0edfe;}
.sec{padding:22px 36px 0;}
.sectitle{font-size:17px;font-weight:600;color:#5b5b5b;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#f4f5f6;border-radius:14px;padding:12px;}
.thumb{height:96px;border-radius:10px;margin-bottom:8px;}
.pname{font-size:14px;font-weight:600;color:#5b5b5b;}
.pprice{font-size:13px;color:#8a8a8a;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Monti Kids</div>
<div class="navlinks"><span>Play Kits</span><span>By Age</span><span>Montessori 101</span></div>
<div class="cta">Start a Subscription</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Play kits, thoughtfully staged for every month of growth.</h1>
<p>Montessori-aligned materials curated by child development experts, delivered on time.</p>
<div class="btn">Find Your Kit</div>
</div>
<div class="heroimg"><div class="circle"></div><div class="box2"></div><div class="box"></div></div>
</div>
<div class="sec">
<div class="sectitle">Popular Kits</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c1e9ff,#eceafb)"></div><div class="pname">Explorer Kit (6-9mo)</div><div class="pprice">$52 / mo</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#bde7ff,#f0edfe)"></div><div class="pname">Practical Life Kit</div><div class="pprice">$52 / mo</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e1fcff,#c1e9ff)"></div><div class="pname">Sensory Play Set</div><div class="pprice">$38</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#eceafb,#bde7ff)"></div><div class="pname">Wooden Nesting Bowls</div><div class="pprice">$24</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; margin: 0; color: #323232; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.3px; background: #1a9cfc; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.3px; background: #f8f8f8; color: #1e1e1e;
border: 1px solid #1a9cfc; border-radius: 8px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f8f8f8; color: #222222;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #323232; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #03dfdc; color: #1e1e1e;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f8f8; font-family:'Lato','Montserrat',Helvetica,Arial,sans-serif; color:#222; }
*{box-sizing:border-box;}
.nav{height:56px;background:#1e1e1e;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-size:19px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;color:#fff;}
.search{background:#1a9cfc;color:#fff;border-radius:8px;height:32px;width:180px;display:flex;align-items:center;padding:0 14px;font-size:12px;}
.hero{height:200px;background:#1e1e1e;display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:40px;top:20px;width:120px;height:160px;background:linear-gradient(160deg,#03dfdc,#1a9cfc);border-radius:8px;}
.herotext{max-width:460px;}
.herotext h1{font-family:'Georgia',serif;font-size:34px;font-weight:400;color:#fff;margin:0 0 10px;}
.herotext p{font-size:14px;color:#b7b7b7;margin:0 0 14px;}
.btn{display:inline-block;background:#1a9cfc;color:#fff;font-size:14px;font-weight:700;letter-spacing:0.3px;padding:10px 20px;border-radius:8px;}
.sec{padding:18px 32px 0;}
.sectitle{font-size:18px;font-weight:700;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:172px;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#03dfdc;color:#1e1e1e;font-size:10px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.badge.sale{background:#e31937;color:#fff;}
.poster{aspect-ratio:2/3;border-radius:8px;margin-bottom:8px;}
.ptitle{font-size:15px;font-weight:700;margin:0 0 2px;}
.director{font-size:12px;color:#323232;margin:0 0 6px;}
.pprice{font-size:14px;color:#222;}
.footer{position:absolute;bottom:0;left:0;right:0;height:34px;background:#1e1e1e;color:#b7b7b7;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kino Lorber</div>
<div class="navlinks"><div>New Releases</div><div>Classics</div><div>Studio Editions</div></div>
<div class="search">Search catalog...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Deep-catalog cinema,<br>curated for keeps.</h1>
<p>Restored classics and studio editions, shipped on Blu-ray and 4K UHD.</p>
<div class="btn">Shop Now</div>
</div>
</div>
<div class="sec">
<div class="sectitle">New This Week</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="poster" style="background:linear-gradient(160deg,#1a9cfc,#1e1e1e)"></div><div class="ptitle">The Long Silence</div><div class="director">Dir. M. Ardennes</div><div class="pprice">$24.95</div></div>
<div class="card"><div class="poster" style="background:linear-gradient(160deg,#03dfdc,#222)"></div><div class="ptitle">Winter Harbor</div><div class="director">Dir. R. Kessel</div><div class="pprice">$19.95</div></div>
<div class="card"><div class="badge sale">Sale</div><div class="poster" style="background:linear-gradient(160deg,#1e1e1e,#1a9cfc)"></div><div class="ptitle">Restoration: Vol. 2</div><div class="director">Dir. Various</div><div class="pprice">$34.95</div></div>
<div class="card"><div class="poster" style="background:linear-gradient(160deg,#222,#03dfdc)"></div><div class="ptitle">A Quiet Ledger</div><div class="director">Dir. T. Oyelaran</div><div class="pprice">$22.95</div></div>
</div>
</div>
<div class="footer"><span>Studio Classics · Kino Cult</span><span>Customer Service</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3d3d3d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #3d3d3d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0a0a0a; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Pretendard Std", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; gap:22px; padding:0 32px; }
.brand { font-size:19px; font-weight:700; color:#222; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#5d5d5d; }
.navlinks .active { color:#222; font-weight:700; }
.navr { margin-left:auto; display:flex; gap:10px; }
.btn { border-radius:8px; padding:10px 16px; font-size:14px; font-weight:400; }
.btn.primary { background:#3d3d3d; color:#f9f9f9; }
.btn.outline { border:1px solid #d0d0d0; color:#222; }
.chips { display:flex; gap:8px; padding:0 32px 12px; }
.chip { border-radius:9999px; background:#f9f9f9; color:#222; font-size:13px; font-weight:500; padding:6px 14px; }
.chip.active { background:#222222; color:#fff; }
.shelf { padding:0 32px 8px; }
.shelf h2 { font-size:22px; font-weight:700; margin:0 0 12px; }
.grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.book { display:flex; flex-direction:column; }
.cover { aspect-ratio:2/3; border-radius:4px; box-shadow:0 4px 16px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.08); }
.cv1 { background:linear-gradient(160deg,#3d3d3d,#111); }
.cv2 { background:linear-gradient(160deg,#1f8ce6,#0a3f6b); }
.cv3 { background:linear-gradient(160deg,#03aa5a,#0a4a2a); }
.cv4 { background:linear-gradient(160deg,#f4361e,#7a1a0e); }
.cv5 { background:linear-gradient(160deg,#9d9d9d,#5d5d5d); }
.cv6 { background:linear-gradient(160deg,#222,#5d5d5d); }
.book .t { font-size:13px; font-weight:600; margin:8px 0 2px; color:#222; }
.book .a { font-size:12px; color:#9d9d9d; margin:0; }
.badge { display:inline-block; font-size:11px; border-radius:9999px; padding:1px 8px; margin-top:4px; }
.badge.sub { background:#03aa5a; color:#fff; }
.badge.sale { background:#f4361e; color:#fff; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #f0f0f0; padding:12px 32px;
display:flex; justify-content:space-between; font-size:11px; color:#9d9d9d; }
</style></head>
<body style="position:relative">
<nav>
<span class="brand">RIDI</span>
<div class="navlinks"><span class="active">Home</span><span>Webtoon</span><span>Serial</span><span>Ranking</span><span>Subscription</span></div>
<div class="navr"><span class="btn outline">Log In</span><span class="btn primary">Subscribe</span></div>
</nav>
<div class="chips">
<span class="chip active">All</span><span class="chip">Fiction</span><span class="chip">Essay</span><span class="chip">Self-Help</span><span class="chip">Comics</span>
</div>
<div class="shelf">
<h2>This Week's Bestsellers</h2>
<div class="grid">
<div class="book"><div class="cover cv1"></div><p class="t">Sketch of the Night</p><p class="a">John Carter</p><span class="badge sale">30% Off</span></div>
<div class="book"><div class="cover cv2"></div><p class="t">The Blue Mailbox</p><p class="a">Sarah Kim</p><span class="badge sub">Subscribed</span></div>
<div class="book"><div class="cover cv3"></div><p class="t">Summer Warmth</p><p class="a">Alex Park</p></div>
<div class="book"><div class="cover cv4"></div><p class="t">Crimson River</p><p class="a">Mia Choi</p><span class="badge sale">50% Off</span></div>
<div class="book"><div class="cover cv5"></div><p class="t">Gray City</p><p class="a">Jordan Lee</p></div>
<div class="book"><div class="cover cv6"></div><p class="t">Notes of Warmth</p><p class="a">Grace Han</p><span class="badge sub">Subscribed</span></div>
</div>
</div>
<footer>
<span>© RIDI</span>
<span>Home · Webtoon · Serial · Ranking · Subscription</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f2ec; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f2ec; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.4px; background: #2d4a1e; color: #f5f2ec;
border: none; border-radius: 4px; padding: 10px 22px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.4px; background: #f5f2ec; color: #2d4a1e;
border: 1px solid #2d4a1e; border-radius: 4px;
padding: 9px 21px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #bebcb8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; background: transparent; color: #666666;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif; background:#f5f2ec; color:#2e2e2e; }
*{box-sizing:border-box;}
.topstrip{height:24px;background:#2d4a1e;color:#f5f2ec;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 32px;font-size:10px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.nav{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#1a1a1a;border-bottom:2px solid #b8962e;}
.logo{font-size:18px;font-weight:700;color:#f5f2ec;letter-spacing:0.3px;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:#f5f2ec;}
.hero{height:220px;position:relative;background:#2d4a1e;overflow:hidden;display:flex;align-items:center;padding:0 32px;}
.hero:before{content:'';position:absolute;inset:0;background:#000;opacity:0.35;}
.herotext{position:relative;width:420px;}
.herotext h1{font-family:Georgia,'Times New Roman',serif;font-size:30px;font-weight:700;color:#f5f2ec;margin:0 0 8px;letter-spacing:-0.3px;line-height:1.2;border-top:3px solid #b8962e;padding-top:10px;}
.herotext p{font-size:14px;color:#e0dbd2;margin:0 0 14px;max-width:320px;}
.cta{display:inline-block;background:#2d4a1e;border:1.5px solid #f5f2ec;color:#f5f2ec;font-size:13px;font-weight:600;letter-spacing:0.3px;padding:10px 20px;}
.dagger{position:absolute;right:100px;top:34px;width:16px;height:140px;background:linear-gradient(180deg,#d4be8a,#8a6e1a);border-radius:2px;}
.hilt{position:absolute;right:92px;top:150px;width:32px;height:14px;background:#b8962e;}
.section{padding:16px 32px 0;}
.sectitle{font-family:Georgia,serif;font-size:18px;font-weight:700;color:#272727;margin-bottom:10px;}
.grid{display:flex;gap:12px;}
.card{width:150px;background:#fff;border:1px solid #c8c2b8;padding:10px;}
.thumb{aspect-ratio:4/3;margin-bottom:6px;}
.pname{font-family:Georgia,serif;font-size:14px;font-weight:700;color:#2e2e2e;}
.lot{font-size:10px;font-weight:600;letter-spacing:0.6px;text-transform:uppercase;color:#666666;border-top:1px solid #c8c2b8;margin-top:6px;padding-top:4px;}
.cond{display:inline-block;font-size:10px;background:#eee9e0;border:1px solid #c8c2b8;padding:2px 6px;margin-top:6px;}
.price{font-family:Georgia,serif;font-size:16px;font-weight:700;color:#2d4a1e;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#1a1a1a;color:#d4be8a;font-size:11px;border-top:2px solid #b8962e;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="topstrip">My Account · Order Status · Contact Us</div>
<div class="nav">
<div class="logo">Lakesidetrader</div>
<div class="navlinks"><div>German Daggers</div><div>Medals</div><div>Field Equipment</div><div>Documents</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>German WWII Daggers, Medals & Militaria</h1>
<p>Authenticated collector pieces, catalogued with provenance.</p>
<div class="cta">Request Full Catalog</div>
</div>
<div class="dagger"></div><div class="hilt"></div>
</div>
<div class="section">
<div class="sectitle">Recent Acquisitions</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8a6e1a,#2d4a1e)"></div><div class="pname">Army Officer's Dagger</div><div class="lot">Lot #DG-4412</div><div class="cond">Very Good</div><div class="price">$1,850</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b8962e,#4a4a4a)"></div><div class="pname">Iron Cross 2nd Class</div><div class="lot">Lot #MD-2205</div><div class="cond">Excellent</div><div class="price">$425</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2d4a1e,#8a6e1a)"></div><div class="pname">Field Belt Buckle</div><div class="lot">Lot #FE-0871</div><div class="cond">Good</div><div class="price">$310</div></div>
</div>
</div>
<div class="footer"><span>© Lakesidetrader</span><span>Provenance Available on Request</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0f14; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #0b0f14;
border: 1px solid #0b0f14; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d8d9d9; color: #0b0f14;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0B0F14; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; border-bottom:1px solid #E2E8F0; }
.brandwrap { display:flex; align-items:center; gap:8px; }
.fly { width:26px; height:26px; border-radius:50%; background:#1185FE; position:relative; }
.fly::after { content:''; position:absolute; inset:7px; border-radius:2px; background:#fff; transform:rotate(45deg); }
.brand { font-size:16px; font-weight:700; margin:0; }
.row { display:flex; gap:10px; align-items:center; }
.btn-ghost { background:transparent; color:#0B0F14; border:1px solid #E2E8F0; border-radius:999px; padding:8px 18px; font-weight:600; font-size:13px; }
.btn-blue { background:#1185FE; color:#fff; border:none; border-radius:999px; padding:8px 20px; font-weight:600; font-size:13px; }
.hero { padding:22px 36px 12px; }
.hero h1 { font-size:26px; font-weight:700; margin:0 0 4px; letter-spacing:-0.4px; }
.hero p { font-size:13px; color:#697787; margin:0; }
.feedtabs { display:flex; gap:26px; padding:14px 36px 0; border-bottom:1px solid #E2E8F0; }
.feedtabs span { font-size:14px; font-weight:600; color:#697787; padding-bottom:12px; }
.feedtabs span.on { color:#0B0F14; border-bottom:3px solid #1185FE; }
.body-wrap { display:flex; padding:0 36px; gap:28px; }
.feed { flex:1.35; padding-top:6px; }
.skeet { display:flex; gap:10px; padding:14px 0; border-bottom:1px solid #E2E8F0; }
.ava { width:38px; height:38px; border-radius:50%; flex-shrink:0; background:linear-gradient(140deg,#8ec5ff,#1185FE); }
.skcol { flex:1; }
.skhead { font-size:13px; }
.skhead b { font-weight:600; }
.skhead .handle { color:#697787; font-weight:400; }
.skbody { font-size:13px; line-height:1.4; margin:4px 0 8px; }
.skbody .link { color:#1185FE; }
.skactions { display:flex; gap:22px; }
.skactions span { font-size:11px; color:#697787; }
.skactions span.liked { color:#EC4899; font-weight:600; }
.skactions span.reposted { color:#2DBE85; font-weight:600; }
.sidecol { width:210px; padding-top:6px; }
.fabcard { }
.fab { width:52px; height:52px; border-radius:50%; background:#1185FE; color:#fff; display:flex; align-items:center;
justify-content:center; font-size:20px; margin-left:auto; box-shadow:rgba(17,133,254,0.35) 0 6px 20px; }
.sidecard { background:#F1F3F5; border-radius:12px; padding:14px; margin-top:16px; }
.sidecard b { font-size:13px; font-weight:700; display:block; margin-bottom:6px; }
.sugrow { display:flex; align-items:center; gap:8px; margin-top:10px; }
.sugava { width:28px; height:28px; border-radius:50%; background:linear-gradient(140deg,#c9b8ff,#1185FE); }
.sugcol b { font-size:12px; font-weight:600; display:block; }
.sugcol small { font-size:10px; color:#697787; }
.followbtn { margin-left:auto; font-size:10px; font-weight:600; color:#0B0F14; border:1px solid #E2E8F0; border-radius:999px; padding:4px 10px; }
footer { position:absolute; bottom:0; left:0; right:0; height:40px; border-top:1px solid #E2E8F0;
display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; color:#697787; }
</style></head>
<body>
<nav>
<div class="brandwrap"><div class="fly"></div><p class="brand">Bluesky (iOS)</p></div>
<div class="row"><span style="font-size:13px;color:#697787;">Following · Discover</span></div>
<div class="row">
<button class="btn-ghost">Log in</button>
<button class="btn-blue">Create account</button>
</div>
</nav>
<div class="hero">
<h1>What's happening?</h1>
<p>An open, public conversation — pick your feed, pick your comfort.</p>
</div>
<div class="feedtabs">
<span class="on">Following</span>
<span>Discover</span>
<span>Science</span>
<span>Art</span>
</div>
<div class="body-wrap">
<div class="feed">
<div class="skeet">
<div class="ava"></div>
<div class="skcol">
<div class="skhead"><b>Paul</b> <span class="handle">@pfrazee.com · 2h</span></div>
<div class="skbody">Shipped custom feeds today — pin your own algorithm at the top of Home. <span class="link">#atproto</span></div>
<div class="skactions"><span>💬 12</span><span class="reposted">🔁 34</span><span class="liked">♥ 218</span><span>↗ Share</span></div>
</div>
</div>
<div class="skeet">
<div class="ava" style="background:linear-gradient(140deg,#ffd18e,#1185FE);"></div>
<div class="skcol">
<div class="skhead"><b>mei</b> <span class="handle">@mei.bsky.social · 4h</span></div>
<div class="skbody">the timeline should belong to the reader, not the algorithm. glad this exists.</div>
<div class="skactions"><span>💬 3</span><span>🔁 9</span><span>♥ 61</span><span>↗ Share</span></div>
</div>
</div>
<div class="skeet" style="border-bottom:none;">
<div class="ava" style="background:linear-gradient(140deg,#a1ffd1,#1185FE);"></div>
<div class="skcol">
<div class="skhead"><b>dev.log</b> <span class="handle">@devlog.bsky.social · 6h</span></div>
<div class="skbody">Reply-controls chip shipped — you can see exactly who's allowed to reply. Consent, visibly.</div>
<div class="skactions"><span>💬 7</span><span>🔁 5</span><span>♥ 40</span><span>↗ Share</span></div>
</div>
</div>
</div>
<div class="sidecol">
<div class="fab">✎</div>
<div class="sidecard">
<b>Who to follow</b>
<div class="sugrow"><div class="sugava"></div><div class="sugcol"><b>Ana Ruiz</b><small>@ana.bsky.social</small></div><span class="followbtn">Follow</span></div>
<div class="sugrow"><div class="sugava" style="background:linear-gradient(140deg,#ffb3d1,#1185FE);"></div><div class="sugcol"><b>Theo Park</b><small>@theo.bsky.social</small></div><span class="followbtn">Follow</span></div>
</div>
</div>
</div>
<footer>
<span>© Bluesky (iOS)</span>
<span>Bluesky (iOS) · Following · Discover · Feeds</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5c00; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5c00; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e65300; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5c00; color: #000000;
border: 1px solid #e65300; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5c00; color: #f5f5f5;
border: 1px solid #fd7427; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fb5b00; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.header { width:960px; height:56px; border-bottom:1px solid #e5e5e6; display:flex; align-items:center;
justify-content:space-between; padding:0 24px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.brand { font-size:18px; font-weight:700; color:#ff5c00; }
.header-right { display:flex; gap:18px; align-items:center; }
.header-link { font-size:13px; font-weight:500; color:#4a4a4a; }
.header-cta { background:#ff5c00; color:#ffffff; font-size:13px; font-weight:600; border-radius:8px;
padding:7px 16px; }
.stage { width:960px; height:584px; display:flex; }
.gallery { width:552px; height:584px; padding:20px; position:relative; }
.gallery-main { width:100%; height:380px; border-radius:8px; position:relative; overflow:hidden;
background: linear-gradient(160deg, #ffd9a8 0%, #ff8a3d 45%, #e65300 100%); }
.gallery-main::after { content:""; position:absolute; inset:0;
background: radial-gradient(circle at 75% 15%, rgba(255,255,255,0.35), transparent 40%),
linear-gradient(0deg, rgba(0,0,0,0.25), transparent 55%); }
.sale-badge { position:absolute; top:14px; left:14px; background:#ff5c00; color:#ffffff; font-size:12px;
font-weight:700; border-radius:4px; padding:2px 8px; z-index:2; }
.thumbs { display:flex; gap:10px; margin-top:10px; }
.thumb { width:calc((100% - 30px)/4); height:78px; border-radius:8px; }
.thumb.t1 { background:linear-gradient(160deg,#ffd9a8,#ff8a3d); }
.thumb.t2 { background:linear-gradient(160deg,#bfe6ff,#4fa6d6); }
.thumb.t3 { background:linear-gradient(160deg,#c9f2d6,#4caf7d); }
.thumb.t4 { background:linear-gradient(160deg,#f2d9ff,#b06fd6); }
.highlights { margin-top:16px; }
.highlights-title { font-size:15px; font-weight:700; margin-bottom:8px; }
.highlight-row { display:flex; gap:8px; font-size:13px; color:#4a4a4a; margin-bottom:6px; align-items:flex-start; }
.dot { width:5px; height:5px; border-radius:50%; background:#ff5c00; margin-top:6px; flex-shrink:0; }
.info { width:408px; height:584px; padding:20px 24px; border-left:1px solid #e5e5e6; display:flex; flex-direction:column; }
.loc { font-size:12px; font-weight:500; color:#888888; text-transform:uppercase; letter-spacing:0.04em; }
.title { font-size:23px; font-weight:700; margin:6px 0 8px; line-height:1.25; }
.rating-row { display:flex; align-items:center; gap:6px; font-size:13px; color:#888888; margin-bottom:14px; }
.stars { color:#ffb400; font-size:14px; }
.rating-val { color:#1a1a1a; font-weight:700; }
.chip-row { display:flex; gap:8px; margin-bottom:16px; }
.chip { font-size:12px; font-weight:500; border-radius:4px; padding:3px 8px; }
.chip.trust { background:#fff0e8; color:#1fa463; }
.chip.info { background:#f7f7f8; color:#1a1a1a; }
.price-block { display:flex; align-items:baseline; gap:8px; margin-bottom:16px; }
.price-old { font-size:14px; color:#bdbdbd; text-decoration:line-through; }
.price-new { font-size:26px; font-weight:700; color:#1a1a1a; }
.price-unit { font-size:12px; color:#888888; }
.field-label { font-size:12px; font-weight:600; color:#4a4a4a; margin:0 0 6px; }
.select-input { border:1px solid #d9d9d9; border-radius:8px; height:42px; display:flex; align-items:center;
padding:0 12px; font-size:14px; color:#1a1a1a; margin-bottom:14px; justify-content:space-between; }
.select-input .arrow { color:#888888; font-size:12px; }
.book-btn { margin-top:auto; background:#ff5c00; color:#ffffff; height:48px; border-radius:8px;
display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; }
.urgency { font-size:12px; font-weight:600; color:#f5a623; text-align:center; margin-top:8px; }
</style></head>
<body>
<div class="header">
<div class="brand">KKday</div>
<div class="header-right">
<span class="header-link">Tours & Tickets</span>
<span class="header-link">Transport</span>
<span class="header-link">SIM & WiFi</span>
<div class="header-cta">Sign In</div>
</div>
</div>
<div class="stage">
<div class="gallery">
<div class="gallery-main"><div class="sale-badge">20% OFF</div></div>
<div class="thumbs">
<div class="thumb t1"></div>
<div class="thumb t2"></div>
<div class="thumb t3"></div>
<div class="thumb t4"></div>
</div>
<div class="highlights">
<div class="highlights-title">Highlights</div>
<div class="highlight-row"><div class="dot"></div><span>Small-group sunrise tea ceremony with a licensed local host</span></div>
<div class="highlight-row"><div class="dot"></div><span>Hotel pickup and drop-off included</span></div>
<div class="highlight-row"><div class="dot"></div><span>English, Mandarin and Korean guiding available</span></div>
</div>
</div>
<div class="info">
<div class="loc">Kyoto, Japan</div>
<div class="title">Sunrise Tea Ceremony & Garden Walk</div>
<div class="rating-row"><span class="stars">★★★★★</span>
<span class="rating-val">4.8</span><span>· 1,240 reviews</span></div>
<div class="chip-row">
<div class="chip trust">Instant confirmation</div>
<div class="chip trust">Free cancellation</div>
</div>
<div class="price-block">
<span class="price-old">NT$1,680</span>
<span class="price-new">NT$1,344</span>
<span class="price-unit">/ person</span>
</div>
<div class="field-label">Select Date</div>
<div class="select-input"><span>Sat, Oct 17, 2026</span><span class="arrow">▾</span></div>
<div class="field-label">Travelers</div>
<div class="select-input"><span>2 Adults</span><span class="arrow">▾</span></div>
<div class="book-btn">Book Now</div>
<div class="urgency">Only 3 spots left for this date</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f6; color: #373a36;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f6; color: #373a36;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #373a36; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #737572; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #3e7a5e; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #f4f4f6; color: #373a36;
border: 1px solid #3e7a5e; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f4f4f6; color: #373a36;
border: 1px solid #c5c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737572; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fbc641; color: #1e201e;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Free Fly Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'ABC Diatype Mono',monospace; background:#f4f4f6; color:#373a36; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
.nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; background:#f4f4f6; }
.logo { font-family:'New Spirit Condensed',Georgia,serif; font-weight:700; font-size:20px; color:#373a36; }
.navlinks { display:flex; gap:24px; font-size:12px; color:#4a4d53; }
.navcta { background:#3e7a5e; color:#fff; font-size:12px; padding:9px 18px; border-radius:999px; }
.searchband { background:#5ac3b5; padding:10px 40px; }
.searchbar { background:#fff; border-radius:999px; padding:8px 18px; font-size:11.5px; color:#9a9db1; max-width:340px; }
.hero { display:flex; padding:32px 40px; gap:36px; align-items:center; }
.hero-copy { flex:1; }
.hero h1 { font-family:'New Spirit Condensed',Georgia,serif; font-size:44px; font-weight:700; letter-spacing:-.3px; line-height:1.12; margin:0 0 14px; color:#373a36; }
.hero p { font-size:13px; color:#4a4d53; line-height:1.7; max-width:400px; margin:0 0 20px; }
.btn-pill { background:#3e7a5e; color:#fff; font-size:13px; padding:12px 24px; border-radius:999px; display:inline-block; }
.hero-visual { flex:1; height:200px; background:#e5e5e5; border-radius:16px; display:flex; align-items:center; justify-content:center; }
.apparel { width:130px; height:150px; background:linear-gradient(160deg,#3e7a5e,#5ac3b5); border-radius:16px; position:relative; }
.apparel::after { content:''; position:absolute; top:16px; left:20px; right:20px; height:8px; background:#fbc641; border-radius:4px; }
.section { padding:22px 40px; flex:1; }
.section h2 { font-family:'New Spirit Condensed',Georgia,serif; font-size:20px; font-weight:600; margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { background:#fff; border-radius:10px; padding:12px; border:1px solid #dbdde4; }
.card .ph { height:70px; border-radius:10px; margin-bottom:8px; }
.card .badge { display:inline-block; background:#fbc641; color:#373a36; font-size:8.5px; font-weight:700; padding:2px 8px; border-radius:999px; margin-bottom:6px; }
.card .name { font-size:12px; font-weight:700; margin-bottom:4px; }
.card .price { font-size:12.5px; font-weight:700; color:#3e7a5e; }
</style>
<div class="page">
<div class="nav">
<div class="logo">Free Fly</div>
<div class="navlinks"><span>Men</span><span>Women</span><span>Fishing</span><span>Bamboo Tech</span></div>
<div class="navcta">Shop All</div>
</div>
<div class="searchband"><div class="searchbar">Search bamboo tees, hoodies, sun shirts…</div></div>
<div class="hero">
<div class="hero-copy">
<h1>Bamboo fiber, sun-lit,<br>calmly competent.</h1>
<p>The fabric is the story — the interface just gets out of the way, with generous whitespace and precise, thin hairlines.</p>
<div class="btn-pill">Shop Bestsellers</div>
</div>
<div class="hero-visual"><div class="apparel"></div></div>
</div>
<div class="section">
<h2>Bestsellers</h2>
<div class="grid">
<div class="card"><div class="ph" style="background:linear-gradient(160deg,#3e7a5e,#5ac3b5);"></div><span class="badge">Bestseller</span><div class="name">Bamboo Motion Tee</div><div class="price">$48.00</div></div>
<div class="card"><div class="ph" style="background:linear-gradient(160deg,#5ac3b5,#c6e6e4);"></div><div class="name">Elevate Hoody</div><div class="price">$68.00</div></div>
<div class="card"><div class="ph" style="background:linear-gradient(160deg,#fbc641,#3e7a5e);"></div><span class="badge">New</span><div class="name">Bamboo Flex Pant</div><div class="price">$84.00</div></div>
<div class="card"><div class="ph" style="background:linear-gradient(160deg,#373a36,#5ac3b5);"></div><div class="name">Angler Sun Hoody</div><div class="price">$59.00</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; margin: 0; color: #93939f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.71; background: #17171c; color: #ffffff;
border: none; border-radius: 32px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; background: transparent; color: #212121;
border: 1px solid #17171c; border-radius: 4px;
padding: 8px 0; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #212121;
border: 1px solid #c8c8c8; border-radius: 16px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #93939f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: -0.32px; background: transparent; color: #ff7759;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212121; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:16px; font-weight:600; }
.navlinks { display:flex; gap:22px; font-size:13px; }
.btnp { background:#17171c; color:#fff; border-radius:32px; padding:11px 20px; font-size:13px; font-weight:500; }
.hero { text-align:center; padding:14px 32px 18px; }
.hero h1 { font-size:52px; font-weight:400; letter-spacing:-1.2px; line-height:1.0; margin:0 0 14px; }
.hero p { font-size:15px; color:#616161; margin:0 auto 16px; max-width:460px; }
.trust { display:flex; align-items:center; justify-content:center; gap:40px; padding:8px 0 18px;
color:#93939f; font-size:13px; letter-spacing:0.5px; font-weight:600; }
.greenband { background:#003c33; color:#fff; border-radius:22px; margin:0 32px; padding:30px 32px;
display:flex; gap:20px; }
.greenband .txt { flex:0 0 260px; }
.greenband h2 { font-size:28px; font-weight:400; margin:0 0 10px; letter-spacing:-0.5px; }
.greenband p { font-size:13px; color:#c9d6d3; margin:0; line-height:1.5; }
.capcards { flex:1; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.capcard { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:12px; padding:16px; }
.capcard h3 { font-size:14px; font-weight:400; margin:0 0 6px; }
.capcard p { font-size:12px; color:#9fb8b3; margin:0; line-height:1.4; }
.capcard .ic { width:20px; height:20px; border:1.5px solid #edfce9; border-radius:4px; margin-bottom:10px; }
</style></head>
<body>
<nav>
<div class="brand">Cohere</div>
<div class="navlinks"><span>Platform</span><span>Solutions</span><span>Research</span><span>Pricing</span></div>
<span class="btnp">Contact sales</span>
</nav>
<div class="hero">
<h1>The leading AI<br>platform for enterprise</h1>
<p>Reduce complexity and deploy AI agents and applications powered by the world's leading AI models.</p>
<span class="btnp">Talk to our team</span>
</div>
<div class="trust">TELUS NOTION OKTA LG FUJITSU</div>
<div class="greenband">
<div class="txt">
<h2>Secure AI for the enterprise</h2>
<p>Deploy in your own VPC, on-prem, or air-gapped — your data never leaves your control.</p>
</div>
<div class="capcards">
<div class="capcard"><div class="ic"></div><h3>North</h3><p>An agentic platform for the modern workforce.</p></div>
<div class="capcard"><div class="ic"></div><h3>Command</h3><p>Enterprise-grade language models built for scale.</p></div>
<div class="capcard"><div class="ic"></div><h3>Embed</h3><p>State-of-the-art retrieval for search and RAG.</p></div>
<div class="capcard"><div class="ic"></div><h3>Rerank</h3><p>Boost search relevance in a single API call.</p></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.35; letter-spacing: -0.3px; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; background: #f68b1f; color: #000000;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; background: #ffffff; color: #2f7bbf;
border: 1px solid #2f7bbf; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #272727;
border: 1px solid #c9c9c9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.2px; background: #bd2426; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; background:#fff; color:#404040; }
*{box-sizing:border-box;}
.utility{height:26px;background:#fff;border-bottom:1px solid #ebebeb;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:11px;color:#595959;}
.nav{height:44px;background:#163959;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:18px;font-weight:700;color:#fff;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:700;color:#fff;}
.search{width:230px;height:26px;background:#fff;border-radius:4px 0 0 4px;display:flex;align-items:center;padding:0 10px;font-size:11px;color:#737373;}
.body{display:flex;height:474px;}
.side{width:150px;background:#f7f7f7;border-right:1px solid #dedede;padding:14px 12px;}
.side h4{font-size:12px;font-weight:700;color:#272727;margin:0 0 8px;}
.side .opt{font-size:12px;color:#404040;margin-bottom:6px;}
.main{flex:1;padding:16px 22px;}
.crumb{font-size:11px;color:#2f7bbf;margin-bottom:10px;}
.grid{display:flex;gap:12px;flex-wrap:wrap;}
.card{width:206px;border:1px solid #dedede;background:#fff;}
.thumb{height:118px;background:#f7f7f7;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#bd2426;color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;text-transform:uppercase;}
.stock{position:absolute;bottom:6px;left:6px;background:#9bca3e;color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;}
.info{padding:8px 10px 10px;}
.title{font-size:13px;font-weight:700;color:#272727;line-height:1.3;height:34px;overflow:hidden;}
.model{font-size:11px;color:#595959;margin-top:4px;}
.price{font-size:17px;font-weight:700;color:#272727;margin-top:4px;}
.cta{margin-top:6px;background:#f68b1f;color:#fff;font-size:12px;font-weight:700;text-align:center;padding:7px 0;border-radius:4px;}
.spectable{margin-top:12px;border:1px solid #dedede;}
.row{display:flex;font-size:11px;}
.row:nth-child(odd){background:#ebebeb;}
.row .l{width:130px;padding:5px 8px;font-weight:700;color:#595959;text-transform:uppercase;letter-spacing:0.3px;}
.row .v{padding:5px 8px;color:#272727;font-family:courier,monospace;}
</style>
<div class="utility"><span>1-800-555-0192 | Support</span><span>Sign In Account Cart (0)</span></div>
<div class="nav">
<div class="logo">Microscope Com</div>
<div class="navlinks"><div>Compound</div><div>Stereo</div><div>Digital</div><div>Electron</div><div>Fluorescence</div></div>
<div class="search">Search model, spec, SKU...</div>
</div>
<div class="body">
<div class="side">
<h4>Magnification</h4>
<div class="opt">40x – 400x (12)</div>
<div class="opt">100x – 1000x (8)</div>
<h4 style="margin-top:14px">Illumination</h4>
<div class="opt">LED (14)</div>
<div class="opt">Halogen (5)</div>
</div>
<div class="main">
<div class="crumb">Home / Compound Microscopes / Trinocular</div>
<div class="grid">
<div class="card">
<div class="thumb"><div class="badge">Sale</div><div class="stock">In Stock</div></div>
<div class="info"><div class="title">T490B Trinocular LED Compound</div><div class="model">MODEL T490B-PL</div><div class="price">$1,249.00</div><div class="cta">Add to Cart</div></div>
</div>
<div class="card">
<div class="thumb"><div class="stock">In Stock</div></div>
<div class="info"><div class="title">SM-4TZ-P Stereo Zoom Boom Stand</div><div class="model">MODEL SM-4TZ-P</div><div class="price">$899.00</div><div class="cta">Add to Cart</div></div>
</div>
</div>
<div class="spectable">
<div class="row"><div class="l">Total Magnification</div><div class="v">40x - 2500x</div></div>
<div class="row"><div class="l">Stage Dimensions</div><div class="v">220mm x 140mm</div></div>
<div class="row"><div class="l">Illumination Type</div><div class="v">3W LED, variable</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:"Poppins","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px; overflow:hidden; }
/* top nav */
nav.kf-nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #393939; }
.kf-brand { font-size:22px; font-weight:700; letter-spacing:1px; color:#ffffff; margin:0; }
.kf-links { display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.kf-links li { font-size:13px; font-weight:600; color:#a2a2a2; }
.kf-links li.on { color:#ffffff; }
/* hero split */
.kf-hero { position:relative; display:flex; height:394px; border-bottom:1px solid #393939; }
.kf-art { flex:0 0 540px; position:relative; overflow:hidden;
background:
radial-gradient(120% 90% at 20% 10%, rgba(61,127,217,0.35), transparent 55%),
linear-gradient(160deg,#151515 0%, #050505 55%, #000000 100%); }
.kf-art .glow1 { position:absolute; width:340px; height:340px; border-radius:50%;
background:radial-gradient(circle, rgba(237,41,41,0.28), transparent 65%); top:-90px; right:-80px; }
.kf-art .glow2 { position:absolute; width:260px; height:260px; border-radius:50%;
background:radial-gradient(circle, rgba(61,127,217,0.30), transparent 65%); bottom:-70px; left:40px; }
.kf-art .grid { position:absolute; inset:0;
background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 38px 38px; }
.kf-art .tag { position:absolute; left:24px; bottom:20px; font-size:12px; font-weight:600;
letter-spacing:2px; color:#777777; text-transform:uppercase; }
.kf-info { flex:1; padding:28px 32px; display:flex; flex-direction:column; gap:14px; position:relative; }
.kf-badge-row { display:flex; gap:8px; }
.kf-badge { font-size:11px; font-weight:700; letter-spacing:0.5px; padding:4px 10px;
border:1px solid #393939; color:#a2a2a2; text-transform:uppercase; }
.kf-title { font-size:38px; font-weight:800; line-height:1.05; letter-spacing:-0.5px; margin:4px 0 0; }
.kf-studio { font-size:13px; color:#777777; font-weight:500; }
.kf-desc { font-size:14px; line-height:1.7; color:#a9a9a9; max-width:340px; }
.kf-meta { display:flex; gap:22px; margin-top:4px; }
.kf-meta div { font-size:11px; color:#777777; text-transform:uppercase; letter-spacing:1px; }
.kf-meta strong { display:block; font-size:13px; color:#ffffff; font-weight:600; margin-top:4px; text-transform:none; letter-spacing:0; }
.kf-cta-row { display:flex; gap:14px; align-items:center; margin-top:auto; }
.kf-btn { background:#ffffff; color:#000000; border:2px solid #000000; padding:11px 34px 11px 18px;
font-size:14px; font-weight:700; letter-spacing:0.3px; }
.kf-link { font-size:13px; font-weight:500; color:#e6e6e6; position:relative; padding-bottom:3px;
border-bottom:2px solid #ffffff; }
/* screenshot strip */
.kf-strip { display:flex; gap:10px; padding:20px 32px; }
.kf-shot { flex:1; height:96px; position:relative; overflow:hidden; }
.kf-shot.s1 { background:linear-gradient(135deg,#1c1c1c,#050505 60%); }
.kf-shot.s1::after { content:""; position:absolute; width:130px; height:130px; border-radius:50%;
background:radial-gradient(circle, rgba(61,127,217,0.4), transparent 70%); top:-40px; left:-30px; }
.kf-shot.s2 { background:linear-gradient(135deg,#101010,#000000 70%); }
.kf-shot.s2::after { content:""; position:absolute; width:120px; height:120px; border-radius:50%;
background:radial-gradient(circle, rgba(237,41,41,0.35), transparent 70%); bottom:-40px; right:-20px; }
.kf-shot.s3 { background:linear-gradient(135deg,#161616,#020202 65%); }
.kf-shot.s3::after { content:""; position:absolute; width:150px; height:80px;
background:radial-gradient(ellipse, rgba(255,255,255,0.12), transparent 70%); top:20px; left:30%; }
.kf-shot.s4 { background:linear-gradient(135deg,#141414,#000000 65%); }
.kf-shot.s4::after { content:""; position:absolute; width:100px; height:180px;
background:radial-gradient(ellipse, rgba(61,127,217,0.25), transparent 70%); bottom:-30px; right:20%; }
footer.kf-foot { position:absolute; left:0; right:0; bottom:0; height:44px; display:flex;
align-items:center; justify-content:space-between; padding:0 32px; border-top:1px solid #393939; }
footer.kf-foot span { font-size:11px; color:#777777; }
</style></head>
<body>
<div class="stage">
<nav class="kf-nav">
<p class="kf-brand">KRAFTON</p>
<ul class="kf-links">
<li class="on">Games</li>
<li>Studios</li>
<li>News</li>
<li>Careers</li>
</ul>
</nav>
<div class="kf-hero">
<div class="kf-art">
<div class="grid"></div>
<div class="glow1"></div>
<div class="glow2"></div>
<span class="tag">Key Art — Frontier Protocol</span>
</div>
<div class="kf-info">
<div class="kf-badge-row">
<span class="kf-badge">Battle Royale</span>
<span class="kf-badge">New Update</span>
</div>
<h1 class="kf-title">FRONTIER<br>PROTOCOL</h1>
<div class="kf-studio">Developed by Bluehole Frontier Studio</div>
<p class="kf-desc">Drop into a shifting frontier where a hundred pioneers race to claim the last uncharted zone. Built for scale, tuned for split-second decisions.</p>
<div class="kf-meta">
<div>Genre<strong>Survival</strong></div>
<div>Platform<strong>PC / Console</strong></div>
<div>Release<strong>Live Now</strong></div>
</div>
<div class="kf-cta-row">
<button class="kf-btn">Wishlist Now</button>
<span class="kf-link">View system requirements</span>
</div>
</div>
</div>
<div class="kf-strip">
<div class="kf-shot s1"></div>
<div class="kf-shot s2"></div>
<div class="kf-shot s3"></div>
<div class="kf-shot s4"></div>
</div>
<footer class="kf-foot">
<span>© KRAFTON. Pioneer the Undiscovered.</span>
<span>Global · EN</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.35; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #272727; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #f5f5f5; color: #272727;
border: 1px solid #272727; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #272727;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ea0202; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; font-family:'Libre Baskerville',Georgia,serif; color:#4c4c4c; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#fff;border-bottom:1px solid #e5e5e5;}
.logo{font-size:20px;font-weight:700;letter-spacing:1px;color:#272727;}
.navlinks{display:flex;gap:26px;font-size:13px;color:#4c4c4c;}
.navcta{font-size:12px;color:#272727;border-bottom:1px solid #272727;padding-bottom:2px;}
.hero{height:260px;display:flex;background:#f9fafb;}
.herotext{width:440px;padding:40px 40px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#6b6b6b;margin-bottom:12px;font-family:Arial,sans-serif;}
.h1{font-size:30px;font-weight:700;line-height:1.3;color:#272727;margin:0 0 14px;}
.sub{font-size:14px;line-height:1.6;color:#6b6b6b;margin:0 0 20px;max-width:340px;}
.btn{width:170px;text-align:center;background:#272727;color:#fff;font-size:12px;letter-spacing:.5px;text-transform:uppercase;font-family:Arial,sans-serif;padding:13px 0;}
.heroimg{flex:1;position:relative;background:linear-gradient(160deg,#e5e5e5 0%,#ffffff 60%);}
.crib{position:absolute;bottom:40px;left:60px;width:180px;height:100px;border:6px solid #272727;border-radius:6px;}
.crib:before{content:'';position:absolute;left:-6px;right:-6px;top:-30px;height:30px;border:6px solid #272727;border-bottom:none;border-radius:10px 10px 0 0;}
.tag{position:absolute;top:26px;right:40px;background:#ea0202;color:#fff;font-size:10px;letter-spacing:.5px;text-transform:uppercase;font-family:Arial,sans-serif;padding:5px 10px;}
.strip{display:flex;gap:1px;background:#e5e5e5;}
.cell{flex:1;background:#fff;text-align:center;padding:10px;font-family:Arial,sans-serif;}
.clabel{font-size:10px;letter-spacing:.4px;text-transform:uppercase;color:#6b6b6b;}
.cval{font-size:13px;color:#272727;margin-top:3px;}
.sec{padding:16px 40px 0;}
.sectitle{font-size:16px;color:#272727;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:154px;background:#fff;border:1px solid #e5e5e5;padding:9px;}
.thumb{height:96px;margin-bottom:8px;background:#eaeaea;}
.pname{font-size:12px;color:#272727;line-height:1.35;height:32px;overflow:hidden;font-family:Arial,sans-serif;}
.pprice{font-size:13px;color:#272727;margin-top:4px;font-family:Arial,sans-serif;}
</style>
<div class="nav">
<div class="logo">Oeuf</div>
<div class="navlinks"><span>Cribs</span><span>Dressers</span><span>Seating</span><span>Registry</span></div>
<div class="navcta">Find a Retailer</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Eco-Conscious Since 2002</div>
<div class="h1">Nursery furniture that outlasts the nursery.</div>
<div class="sub">Formaldehyde-free, sustainably built pieces designed to grow quietly alongside your family.</div>
<div class="btn">Shop Collection</div>
</div>
<div class="heroimg"><div class="crib"></div><div class="tag">Low-VOC</div></div>
</div>
<div class="strip">
<div class="cell"><div class="clabel">Materials</div><div class="cval">FSC Birch Wood</div></div>
<div class="cell"><div class="clabel">Finish</div><div class="cval">Water-Based</div></div>
<div class="cell"><div class="clabel">Made</div><div class="cval">European Craft</div></div>
<div class="cell"><div class="clabel">Converts</div><div class="cval">Toddler Bed</div></div>
</div>
<div class="sec">
<div class="sectitle">The Nursery Collection</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#e5e5e5,#fff)"></div><div class="pname">Sparrow Crib</div><div class="pprice">$895.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#eaeaea,#f5f5f5)"></div><div class="pname">Merlin Dresser</div><div class="pprice">$1,095.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#e5e5e5,#f9fafb)"></div><div class="pname">Pipsqueak Chair</div><div class="pprice">$375.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#f5f5f5,#eaeaea)"></div><div class="pname">Otto Storage Bed</div><div class="pprice">$1,295.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #2e2d2d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #2e2d2d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 300; line-height: 1.3; margin: 0; color: #2e2d2d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #6F534A; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #fafafa; color: #2e2d2d;
border: 1px solid #6F534A; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #2e2d2d;
border: 1px solid #c7c7c7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #1a2f5b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#fafafa; color:#2e2d2d; box-sizing:border-box; font-family:'Work Sans','Inter',sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fafafa;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.nav .logo{font-family:'September Spirit',Georgia,serif;font-size:20px;font-weight:400;}
.nav .links{display:flex;gap:20px;font-size:14px;font-weight:500;letter-spacing:.2px;}
.wrap{display:flex;height:576px;}
.left{width:400px;background:#f4f4f6;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;}
.sheet{width:220px;height:230px;background:linear-gradient(160deg,#ffffff,#e5e0dc);border-radius:20px;box-shadow:0 16px 30px rgba(0,0,0,.08);position:relative;}
.sheet::before{content:'';position:absolute;top:20px;left:20px;right:20px;height:40px;background:rgba(111,83,74,.15);border-radius:12px;}
.badge-new{position:absolute;top:24px;left:24px;background:#1a2f5b;color:#fff;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:4px 8px;border-radius:4px;}
.right{flex:1;padding:28px 32px;display:flex;flex-direction:column;}
h1{font-family:'September Spirit',Georgia,serif;font-size:32px;font-weight:400;margin:0 0 8px;line-height:1.15;}
.stars{color:#2e2d2d;font-size:14px;margin-bottom:12px;}
.price{font-size:18px;font-weight:500;margin:0 0 16px;}
.swatch-row{display:flex;gap:10px;margin-bottom:18px;}
.sw{width:32px;height:32px;border-radius:9999px;}
.sw.sel{outline:2px solid #6F534A;outline-offset:2px;}
.c1{background:#e5e0dc;} .c2{background:#8b645a;} .c3{background:#1a2f5b;} .c4{background:#493338;}
.sizes{display:flex;gap:8px;margin-bottom:20px;}
.size{background:#fff;font-size:14px;padding:8px 16px;border:1px solid #d8d8d8;border-radius:8px;height:40px;display:flex;align-items:center;}
.size.sel{background:#2e2d2d;color:#fff;border-color:#2e2d2d;}
.desc{font-size:16px;color:#404040;line-height:1.6;margin:0 0 20px;}
.actions{display:flex;gap:10px;margin-top:auto;}
.btn-primary{background:#6F534A;color:#fff;font-size:15px;font-weight:500;letter-spacing:.5px;border-radius:8px;padding:14px 28px;height:48px;display:flex;align-items:center;}
.btn-secondary{background:#fafafa;color:#2e2d2d;font-size:15px;font-weight:500;border:1px solid #d8d8d8;border-radius:8px;padding:13px 27px;height:48px;display:flex;align-items:center;}
</style>
</head>
<body>
<div class="nav"><div class="logo">Cozy Earth</div><div class="links"><span>Bedding</span><span>Loungewear</span><span>Bath</span><span>Bestsellers</span></div></div>
<div class="wrap">
<div class="left"><div class="badge-new">Bestseller</div><div class="sheet"></div></div>
<div class="right">
<h1>Bamboo Sheet Set</h1>
<div class="stars">★★★★★ 4.9 (18,204 reviews)</div>
<p class="price">$249.00</p>
<div class="swatch-row">
<span class="sw sel c1"></span>
<span class="sw c2"></span>
<span class="sw c3"></span>
<span class="sw c4"></span>
</div>
<div class="sizes">
<span class="size">Twin</span>
<span class="size sel">Queen</span>
<span class="size">King</span>
</div>
<p class="desc">Woven from viscose from bamboo for a silky, temperature-regulating feel that gets softer with every wash. Life-changing comfort, wrapped around every night.</p>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">View Details</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f2f2f2; color: #0d0d0d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f2f2f2; color: #0d0d0d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #0d0d0d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #607380; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ec2c3e; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #f2f2f2; color: #0f193f;
border: 1px solid #ec2c3e; border-radius: 8px;
padding: 13px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #212121;
border: 1px solid #b9b9b9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #607380; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ec2c3e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f2f2f2; color:#0d0d0d; box-sizing:border-box;
font-family:'Karla','Lato',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#0f193f; }
.brand { font-size:19px; font-weight:700; color:#fff; margin:0; }
.navlinks { display:flex; gap:22px; font-size:15px; font-weight:600; text-transform:uppercase; color:#fff; }
.util { font-size:13px; color:#fff; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 72px); }
.stage { padding:26px; display:flex; flex-direction:column; gap:12px; background:#f7f7f7; }
.crumb { font-size:11px; color:#607380; }
.pan { flex:1; border-radius:8px; background:#ffffff; position:relative; overflow:hidden; }
.pan::before { content:''; position:absolute; left:50%; top:50%; width:200px; height:200px; transform:translate(-50%,-50%); border-radius:50%;
background:radial-gradient(circle at 35% 30%,#76dca1,#3c5345 75%); box-shadow:0 18px 30px rgba(0,0,0,0.12); }
.pan::after { content:''; position:absolute; left:50%; top:50%; width:70px; height:70px; transform:translate(-50%,-50%); border-radius:50%;
background:#ffdf00; }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; border-radius:8px; background:#ffffff; border:1px solid #d9d9d9; }
.info { padding:24px 34px; display:flex; flex-direction:column; gap:11px; overflow:hidden; }
.cat { font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#ec2c3e; }
h1 { margin:0; font-size:24px; font-weight:700; line-height:1.33; }
.rating { display:flex; align-items:center; gap:8px; font-size:13px; color:#607380; }
.stars { color:#fdb515; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:700; }
.badge-new { background:#76dca1; color:#0d0d0d; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.desc { font-family:'Lato','Karla',Arial,sans-serif; font-size:14px; color:#212121; line-height:1.5; }
.badge-fit { display:inline-flex; align-items:center; gap:6px; background:#0f193f; color:#fff; font-size:14px; font-weight:600;
letter-spacing:0.2px; padding:8px 16px; border-radius:9999px; width:fit-content; }
.trust { background:#f7f6f0; border-radius:8px; font-size:13px; color:#314439; font-weight:600; padding:10px 14px; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#ec2c3e; color:#fff; border:none; height:48px; font-size:16px; font-weight:600;
letter-spacing:0.3px; border-radius:9999px; }
.btn-secondary { width:150px; background:#f2f2f2; border:2px solid #0f193f; color:#0f193f; height:48px; font-size:16px; font-weight:600; border-radius:8px; }
</style></head>
<body>
<nav>
<p class="brand">Bright Starts</p>
<div class="navlinks"><span>Bouncers</span><span>Play Gyms</span><span>Toys</span><span>Sleep</span></div>
<div class="util">Search Account Cart (2)</div>
</nav>
<main>
<div class="stage">
<div class="crumb">Bright Starts / Play Gyms / 0-12 Months</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Bounce Bounce Baby</span>
<h1>Bounce Bounce Baby Activity Center</h1>
<div class="rating"><span class="stars">★★★★☆</span> 4.6 · 5,381 reviews</div>
<div class="price-row"><span class="price">$59.99</span><span class="badge-new">New</span></div>
<p class="desc">A 360-degree spinning seat with removable toy bar and soft plush textures encourages leg strength, grasping, and discovery.</p>
<div class="badge-fit">Run Happy · 4–24 Months</div>
<div class="trust">Machine-washable seat pad · No batteries required</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Add to Registry</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00ccbc; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #00ccbc; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6f7f4; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#FFFFFF; color:#1D1D1B; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; display:flex; }
.left { width:960px; height:640px; overflow:hidden; position:relative; }
.hero { height:200px; background:linear-gradient(160deg,#00524B,#00CCBC 130%); position:relative; }
.backbtn { position:absolute; top:18px; left:20px; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,0.35); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; }
.restname { position:absolute; bottom:16px; left:20px; color:#fff; }
.restname .n { font-size:22px; font-weight:800; letter-spacing:-0.2pt; }
.restname .r { font-size:13px; font-weight:400; margin-top:4px; opacity:0.9; }
.rating { position:absolute; bottom:18px; right:20px; color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; gap:4px; }
.rating .star { color:#00CCBC; }
.catnav { height:44px; display:flex; align-items:center; gap:22px; padding:0 20px; border-bottom:1px solid #E8E8E6; font-size:14px; font-weight:700; color:#6B6B6B; }
.catnav .on { color:#1D1D1B; border-bottom:2px solid #00CCBC; height:44px; display:flex; align-items:center; }
.list { padding:14px 20px; }
.row { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid #E8E8E6; }
.rowtext { max-width:560px; }
.rowtext .nm { font-size:15px; font-weight:700; color:#1D1D1B; }
.rowtext .desc { font-size:13px; color:#6B6B6B; margin-top:4px; max-width:520px; }
.rowtext .price { font-size:14px; font-weight:800; margin-top:6px; }
.thumbwrap { position:relative; width:84px; height:84px; flex-shrink:0; margin-left:16px; }
.thumb { width:84px; height:84px; border-radius:12px; background:linear-gradient(135deg,#f6d9c4,#e8a878); }
.plus { position:absolute; bottom:-8px; right:-8px; width:28px; height:28px; border-radius:50%; background:#00CCBC; color:#003733; font-weight:800; font-size:16px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,0.18); }
.basketbar { position:absolute; bottom:16px; left:20px; right:20px; height:52px; border-radius:999px; background:#00CCBC; display:flex; align-items:center; justify-content:space-between; padding:0 22px; }
.basketbar .txt { color:#003733; font-weight:800; font-size:15px; }
</style>
</head>
<body>
<div class="stage">
<div class="left">
<div class="hero">
<div class="backbtn">←</div>
<div style="position:absolute; top:18px; right:20px; font-size:14px; font-weight:800; color:#fff; letter-spacing:0.2pt;">Deliveroo (iOS)</div>
<div class="restname"><div class="n">Bao & Broth Kitchen</div><div class="r">Ramen · Bao · 25–35 min</div></div>
<div class="rating"><span class="star">★</span>4.8</div>
</div>
<div class="catnav">
<div class="on">Popular</div><div>Mains</div><div>Bao Buns</div><div>Sides</div><div>Drinks</div>
</div>
<div class="list">
<div class="row">
<div class="rowtext"><div class="nm">Tonkotsu Ramen</div><div class="desc">Slow-simmered pork broth, chashu, ajitama egg, nori, scallion</div><div class="price">£12.50</div></div>
<div class="thumbwrap"><div class="thumb" style="background:linear-gradient(135deg,#e8c99a,#c98a4a)"></div><div class="plus">+</div></div>
</div>
<div class="row">
<div class="rowtext"><div class="nm">Pork Belly Bao (x2)</div><div class="desc">Steamed bun, braised pork belly, pickled cucumber, hoisin</div><div class="price">£7.90</div></div>
<div class="thumbwrap"><div class="thumb" style="background:linear-gradient(135deg,#f0e0c8,#d8a860)"></div><div class="plus">+</div></div>
</div>
<div class="row">
<div class="rowtext"><div class="nm">Spicy Miso Ramen</div><div class="desc">Miso broth, chili oil, minced pork, bean sprouts, corn</div><div class="price">£13.20</div></div>
<div class="thumbwrap"><div class="thumb" style="background:linear-gradient(135deg,#e6a898,#b8402e)"></div><div class="plus">+</div></div>
</div>
<div class="row">
<div class="rowtext"><div class="nm">Edamame</div><div class="desc">Steamed, sea salt</div><div class="price">£3.50</div></div>
<div class="thumbwrap"><div class="thumb" style="background:linear-gradient(135deg,#c8dca0,#8ab060)"></div><div class="plus">+</div></div>
</div>
</div>
<div class="basketbar"><span class="txt">View basket · 2 items</span><span class="txt">£20.40</span></div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #faff1f; color: #0a0a0a;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: transparent; color: #0a0a0a;
border: 1px solid #faff1f; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #fafafa; color: #0a0a0a;
border: 1px solid #bebebe; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 1.0px; background: transparent; color: #757575;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#1a1a1a; box-sizing:border-box;
font-family:"AvenirNext",Helvetica,"Helvetica Neue",sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #e8e8e8; }
.brand { font-family:"AvenirDemi","AvenirNext",Helvetica,sans-serif; font-size:16px; font-weight:700; color:#0a0a0a;
letter-spacing:0.5px; }
.nlinks { display:flex; gap:26px; }
.nlinks div { font-size:12px; font-weight:500; color:#0a0a0a; padding-bottom:20px; border-bottom:1px solid transparent; }
.nlinks div.on { border-bottom:1px solid #0a0a0a; }
.navcta { border:1px solid #0a0a0a; color:#0a0a0a; font-size:12px; padding:9px 18px; }
.hero { height:280px; background:#0a0a0a; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
padding:0 44px; }
.herotxt .k { color:#faff1f; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:2px; margin-bottom:12px; }
.herotxt h1 { color:#fafafa; font-size:34px; font-weight:700; margin:0 0 10px; letter-spacing:-0.3px; }
.herotxt p { color:#9ca3af; font-family:Consolas,"Courier New",monospace; font-size:13px; margin:0 0 18px; }
.herobtn { display:inline-block; background:#faff1f; color:#0a0a0a; font-size:12px; font-weight:700; padding:12px 26px; }
.section { padding:24px 36px 0; }
.sechead { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; color:#0a0a0a; margin-bottom:16px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card { }
.shot { aspect-ratio:4/5; background:#f5f5f5; position:relative; }
.c1 .shot { background:linear-gradient(150deg,#112054,#334155); }
.c2 .shot { background:linear-gradient(150deg,#dc2626,#0a0a0a); }
.c3 .shot { background:linear-gradient(150deg,#0d9a0d,#0a0a0a); }
.c4 .shot { background:linear-gradient(150deg,#fbbf24,#b51912); }
.cmeta { font-family:Consolas,"Courier New",monospace; font-size:10px; color:#757575; margin-top:8px; }
.ctitle { font-size:13px; font-weight:600; color:#0a0a0a; margin:3px 0; }
.cprice { font-size:12px; color:#1a1a1a; }
</style></head>
<body>
<nav>
<div class="brand">David Zwirner</div>
<div class="nlinks"><div class="on">Exhibitions</div><div>Artists</div><div>Editions</div><div>News</div></div>
<div class="navcta">Inquire</div>
</nav>
<div class="hero">
<div class="herotxt">
<div class="k">On View Now</div>
<h1>Editions & Works On Paper</h1>
<p>New York — London — Hong Kong — Paris</p>
<div class="herobtn">View Available Works</div>
</div>
</div>
<div class="section">
<div class="sechead">Available Editions</div>
<div class="grid">
<div class="card"><div class="shot c1"></div><div class="cmeta">Edition 12/50, 2019</div><div class="ctitle">Untitled (Field Study)</div><div class="cprice">Price on request</div></div>
<div class="card"><div class="shot c2"></div><div class="cmeta">Edition 4/25, 2021</div><div class="ctitle">Red Interior No. 3</div><div class="cprice">$18,000</div></div>
<div class="card"><div class="shot c3"></div><div class="cmeta">Edition 30/60, 2017</div><div class="ctitle">Green Room Study</div><div class="cprice">$6,500</div></div>
<div class="card"><div class="shot c4"></div><div class="cmeta">Edition 8/15, 2023</div><div class="ctitle">Amber Composition VI</div><div class="cprice">$42,000</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf8f5; color: #1c1917;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf8f5; color: #1c1917;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #1c1917; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6b6560; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.08em; background: #45768d; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.08em; background: transparent; color: #1c1917;
border: 1px solid #1c1917; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #faf8f5; color: #1c1917;
border: 1px solid #d6d0c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6560; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.15em; background: #e1e6e6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#faf8f5; color:#1c1917; font-family:'Jost','Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d6d0c8;}
.logo{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;}
.navlinks{display:flex;gap:22px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;}
.hero{background:#1c1917;color:#f2ede6;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.hero .kicker{color:#c9a84c;font-size:11px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:10px;}
.hero h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:52px;font-weight:400;margin:0 0 10px;}
.hero p{font-size:14px;color:#cfc7bd;margin:0 0 18px;max-width:400px;}
.cta{background:#45768d;color:#fff;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:13px 26px;border-radius:8px;}
.section{padding:22px 32px;}
.grid{display:flex;gap:18px;}
.card{flex:1;background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(28,25,23,.08);padding:12px;position:relative;}
.badge{position:absolute;top:-6px;left:12px;background:#45768d;color:#fff;font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;padding:3px 8px;border-radius:4px;}
.card .img{aspect-ratio:4/5;height:150px;border-radius:8px;margin-bottom:10px;}
.g1{background:linear-gradient(160deg,#8c9a94,#3d4a44);}
.g2{background:linear-gradient(160deg,#c9a84c,#45768d);}
.g3{background:linear-gradient(160deg,#6b6560,#1c1917);}
.card h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;margin:0 0 4px;}
.card .price{font-size:15px;font-weight:700;}
</style>
<div class="nav">
<div class="logo">Design Toscano</div>
<div class="navlinks"><span>Garden</span><span>Statues</span><span>Gothic</span><span>Furnishings</span></div>
</div>
<div class="hero">
<div class="kicker">Reimagined. Refined. Returning.</div>
<h1>A home should feel like a museum.</h1>
<p>Life-size figures, gargoyles, and antiquities cast for gardens and galleries alike.</p>
<a class="cta">Explore The Collection</a>
</div>
<div class="section">
<div class="grid">
<div class="card"><span class="badge">New</span><div class="img g1"></div><h3>Guardian Gargoyle</h3><div class="price">$389</div></div>
<div class="card"><div class="img g2"></div><h3>Romanov Figure</h3><div class="price">$1,240</div></div>
<div class="card"><span class="badge" style="background:#8c1a1a;">Sale</span><div class="img g3"></div><h3>Medieval Knight</h3><div class="price">$895</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #21252b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #21252b;
border: 1px solid #21252b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdcdd; color: #21252b;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#21252B; color:#E8EAED; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.serif-italic { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; }
.mono { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
main { display:flex; height:640px; }
/* pane 1: tag sidebar — Bear has no folders, only hashtags */
.sidebar { width:190px; background:#282C34; padding:20px 0 0; flex:0 0 auto; }
.sbrand { font-size:15px; font-weight:700; padding:0 18px 16px; }
.filt { padding:8px 18px; font-size:12px; color:#9DA3AD; }
.filt.active { color:#E8EAED; background:#2F343D; }
.tagrow { display:flex; align-items:center; gap:8px; padding:7px 18px; font-size:13px; font-weight:500; }
.tagrow .dot { width:6px; height:6px; border-radius:50%; background:#E0566F; }
.tagrow.nest { padding-left:34px; color:#9DA3AD; font-size:12px; }
.tagrow.nest .dot { background:#5AAFEF; }
/* pane 2: note list */
.notelist { width:230px; background:#282C34; border-left:1px solid #353A42; border-right:1px solid #353A42;
padding-top:20px; flex:0 0 auto; }
.lsection { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; color:#E0566F; padding:0 16px 8px; }
.lrow { padding:10px 16px; border-bottom:1px solid #353A42; }
.lrow.sel { background:#2F343D; border-left:3px solid #E0566F; padding-left:13px; }
.lrow .lt { font-size:14px; font-weight:600; margin-bottom:3px; }
.lrow .lp { font-size:11px; color:#9DA3AD; line-height:1.4; }
.lrow .ld { font-size:10px; color:#6B7280; margin-top:4px; }
/* pane 3: editor — the actual product */
.editor { flex:1; padding:26px 34px 0; position:relative; }
.h1 { font-size:22px; font-weight:700; margin:0 0 14px; }
.p1 { font-size:14px; line-height:1.6; margin:0 0 12px; }
.h2 { font-size:16px; font-weight:700; margin:16px 0 8px; }
.tag-inline { color:#E0566F; font-weight:500; }
.quote { border-left:3px solid #FF8A65; padding:2px 0 2px 14px; margin:12px 0; }
.quote span { font-size:14px; color:#9DA3AD; }
.cbrow { display:flex; align-items:center; gap:10px; margin:6px 0; font-size:14px; }
.cb { width:16px; height:16px; border-radius:4px; border:2px solid #6B7280; flex:0 0 auto; }
.cb.done { background:linear-gradient(135deg,#E0566F,#FF8A65); border:none; position:relative; }
.cb.done::after { content:'✓'; position:absolute; inset:0; color:#fff; font-size:10px; display:flex; align-items:center; justify-content:center; }
.strike { text-decoration:line-through; color:#6B7280; }
.code { background:#282C34; border-radius:5px; padding:2px 6px; font-size:13px; }
.infobar { position:absolute; left:0; right:0; bottom:0; height:38px; border-top:0.5px solid #353A42;
background:rgba(40,44,52,0.9); display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.infobar span { font-size:11px; color:#6B7280; }
.infobar .acts { color:#FF8A65; font-size:13px; letter-spacing:6px; }
.fab { position:absolute; right:26px; bottom:56px; width:46px; height:46px; border-radius:50%;
background:linear-gradient(135deg,#E0566F,#FF8A65); color:#fff; font-size:20px; font-weight:300;
display:flex; align-items:center; justify-content:center; box-shadow:rgba(224,86,111,0.35) 0 6px 16px; }
</style></head>
<body>
<main>
<div class="sidebar">
<p class="sbrand">Bear (iOS)</p>
<div class="filt active">☰ Notes</div>
<div class="filt">◷ Today</div>
<div class="filt">☐ Todo</div>
<div class="tagrow" style="margin-top:10px"><span class="dot"></span>#work</div>
<div class="tagrow nest"><span class="dot"></span>#work/sprint</div>
<div class="tagrow"><span class="dot"></span>#reading</div>
<div class="tagrow"><span class="dot"></span>#journal</div>
</div>
<div class="notelist">
<p class="lsection">#work/sprint</p>
<div class="lrow sel">
<div class="lt">Sprint 42 retro notes</div>
<div class="lp">Went well: shipped the onboarding flow a day early. Needs work: QA...</div>
<div class="ld">Edited 2h ago</div>
</div>
<div class="lrow">
<div class="lt">API migration checklist</div>
<div class="lp">- [ ] Freeze old endpoints - [x] Notify partners...</div>
<div class="ld">Edited yesterday</div>
</div>
<div class="lrow">
<div class="lt">Standup talking points</div>
<div class="lp">Blocked on design review, otherwise on track for Friday.</div>
<div class="ld">Edited Mon</div>
</div>
</div>
<div class="editor">
<p class="h1"># Sprint 42 retro notes</p>
<p class="p1">Overall a strong sprint. Shipped the onboarding redesign a day early and closed out the <span class="tag-inline">#work/sprint</span> backlog.</p>
<p class="h2">## What went well</p>
<div class="cbrow"><div class="cb done"></div><span class="strike">Onboarding flow shipped early</span></div>
<div class="cbrow"><div class="cb done"></div><span class="strike">Zero P1 bugs this cycle</span></div>
<div class="cbrow"><div class="cb"></div><span>Write up the migration doc for <span class="code">v2-api</span></span></div>
<div class="quote"><span class="serif-italic">"Slower is smoother, and smoother is faster." — keep this for next planning.</span></div>
<p class="p1">Tagged for follow-up: <span class="tag-inline">#reading/process</span></p>
<div class="infobar">
<span>248 words · 1,492 chars</span>
<span class="acts">⤴ ⧉ ⓘ</span>
</div>
<div class="fab">+</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.35; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0.5px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 4px;
padding: 9px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #e2e2e2; color: #313131;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:#4a4a4a; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:20px;font-weight:400;color:#313131;letter-spacing:0.5px;}
.navlinks{display:flex;gap:26px;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;}
.navlinks .on{color:#313131;}
.navlinks span:not(.on){color:#9e9e9e;}
.hero{height:260px;display:flex;padding:0 34px;gap:20px;}
.hcol{flex:1;background:#f8f8f8;border-radius:2px;}
.hcol.mid{flex:1.2;}
.htext{display:flex;flex-direction:column;justify-content:center;padding:0 10px;}
.h1{font-size:24px;font-weight:400;color:#313131;margin:0 0 10px;}
.hsub{font-size:14px;color:#4a4a4a;line-height:1.5;margin:0 0 14px;}
.btn{display:inline-block;background:#313131;color:#fff;font-size:14px;font-weight:500;letter-spacing:0.5px;padding:10px 24px;border-radius:4px;}
.section{padding:18px 34px 0;}
.sectitle{font-size:18px;font-weight:400;color:#313131;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:198px;}
.thumb{height:120px;margin-bottom:8px;}
.ptitle{font-size:14px;font-weight:500;color:#313131;}
.pprice{font-size:14px;color:#4a4a4a;margin-top:2px;}
</style>
<div class="nav">
<div class="logo">Quincy Mae</div>
<div class="navlinks"><span class="on">Baby</span><span>Swaddles</span><span>Sleep</span><span>Gifting</span></div>
</div>
<div class="hero">
<div class="hcol" style="background:linear-gradient(160deg,#e6ddd0,#cfc3b0);"></div>
<div class="hcol mid htext">
<div class="h1">Considered essentials for the first years.</div>
<div class="hsub">Swaddles, rompers, and sleep sacks in muted earth tones — the clothes are the color, not the interface.</div>
<div class="btn">Shop New Arrivals</div>
</div>
<div class="hcol" style="background:linear-gradient(160deg,#b9c2ab,#8f9a7e);"></div>
</div>
<div class="section">
<div class="sectitle">New Arrivals</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#e3dccb;"></div><div class="ptitle">Organic Cotton Swaddle</div><div class="pprice">$36.00</div></div>
<div class="card"><div class="thumb" style="background:#c9beae;"></div><div class="ptitle">Ribbed Footie Romper</div><div class="pprice">$42.00</div></div>
<div class="card"><div class="thumb" style="background:#a9b598;"></div><div class="ptitle">Sage Sleep Sack</div><div class="pprice">$48.00</div></div>
<div class="card"><div class="thumb" style="background:#b0a190;"></div><div class="ptitle">Clay Waffle Blanket</div><div class="pprice">$54.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #333333;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #333333;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #333333; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.3; background: #333333; color: #f5f5f5;
border: none; border-radius: 0px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.3; background: #f5f5f5; color: #333333;
border: 1px solid #f5f5f5; border-radius: 0px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #f5f5f5; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f5; color:#333333; box-sizing:border-box; font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:48px; display:flex; align-items:center; padding:0 24px; border-bottom:1px solid #dddddd; background:#f5f5f5; }
.brand { font-size:16px; font-weight:700; color:#333; letter-spacing:.5px; }
.navlinks { display:flex; gap:20px; margin-left:32px; }
.navlinks div { font-size:14px; font-weight:600; }
.navlinks div.active { border-bottom:2px solid #333; padding-bottom:4px; }
.page-title { font-size:24px; font-weight:700; padding:20px 24px 4px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:10px 24px 20px; }
.card { padding:16px; }
.img { aspect-ratio:1/1; background:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.img div { width:70%; height:34%; border-radius:2px; }
.g1 { background:linear-gradient(90deg,#1a1a1a,#3a3a3a); }
.g2 { background:linear-gradient(90deg,#e5e5e5,#bbb); }
.g3 { background:linear-gradient(90deg,#1a1a2e,#3a3a5e); }
.g4 { background:linear-gradient(90deg,#cc0000,#5a0000); }
.name { font-size:14px; font-weight:600; margin-bottom:4px; }
.price { font-size:12px; color:#888; }
.section-heading { font-size:18px; font-weight:700; padding:16px 24px 8px; border-bottom:1px solid #dddddd; margin:0 24px; }
.spec { display:grid; grid-template-columns:1fr 1fr; padding:8px 24px; font-size:11px; }
.spec div { padding:4px 0; }
.spec .label { font-weight:600; color:#888; }
.footer { background:#1a1a2e; color:#ccc; padding:20px 24px; font-size:12px; margin-top:16px; }
.footer a { color:#ccc; text-decoration:underline; }
</style></head>
<body>
<nav>
<div class="brand">Filco</div>
<div class="navlinks"><div class="active">Majestouch</div><div>Minila</div><div>Keycaps</div><div>Accessories</div></div>
</nav>
<div class="page-title">Majestouch 2 Series</div>
<div class="grid">
<div class="card"><div class="img"><div class="g1"></div></div><div class="name">Majestouch 2 Tenkeyless</div><div class="price">¥16,800</div></div>
<div class="card"><div class="img"><div class="g2"></div></div><div class="name">Majestouch 2 Full Size Ivory</div><div class="price">¥18,900</div></div>
<div class="card"><div class="img"><div class="g3"></div></div><div class="name">Majestouch Convertible 2</div><div class="price">¥19,800</div></div>
<div class="card"><div class="img"><div class="g4"></div></div><div class="name">Majestouch Minila-R Red</div><div class="price">¥14,500</div></div>
</div>
<div class="section-heading">Specifications</div>
<div class="spec">
<div><span class="label">Switch Type:</span> Cherry MX Blue</div>
<div><span class="label">Interface:</span> USB / PS2</div>
<div><span class="label">Keycap Material:</span> ABS Double Shot</div>
<div><span class="label">Dimensions:</span> 361 x 130 x 33mm</div>
</div>
<div class="footer">Company Info | <a>Support</a> | <a>Warranty</a></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfbfb; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfbfb; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #a2a2a2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #2bbaf4; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #0044cc;
border: 1px solid #2bbaf4; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c5c5c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a2a2a2; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.25px; background: #f89406; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; color:#444444; font-family:Arial,Helvetica,sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;background:#2bbaf4;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:18px;font-weight:700;color:#003399;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:700;color:#002a80;}
.navcta{background:#0044cc;color:#fff;font-size:12px;font-weight:700;padding:8px 16px;border-radius:4px;}
.hero{height:130px;display:flex;align-items:center;padding:0 34px;border-bottom:1px solid #d9d9d9;}
.hero h1{font-size:26px;font-weight:700;color:#222222;margin:0 0 6px;}
.hero p{font-size:13px;color:#444444;margin:0;max-width:500px;}
.chiprow{display:flex;gap:10px;padding:16px 34px;}
.chip{font-size:11px;font-weight:700;color:#fff;padding:7px 16px;border-radius:4px;}
.c1{background:#f89406;} .c2{background:#51a351;} .c3{background:#2f96b4;} .c4{background:#bd362f;}
.seclabel{font-size:13px;font-weight:700;color:#222222;padding:6px 34px 12px;}
.grid{display:flex;gap:14px;padding:0 34px;}
.card{width:150px;background:#fff;border-radius:8px;padding:10px;position:relative;border-top:4px solid #2bbaf4;}
.card.o{border-top-color:#f89406;} .card.g{border-top-color:#51a351;} .card.t{border-top-color:#2f96b4;}
.thumb{height:88px;border-radius:6px;margin-bottom:8px;background:#f0f4f8;}
.ptitle{font-size:12px;font-weight:700;color:#222222;line-height:1.3;height:30px;overflow:hidden;}
.pmeta{font-size:10px;color:#a2a2a2;margin-top:4px;}
.pprice{font-size:13px;font-weight:700;color:#0044cc;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:11px;color:#a2a2a2;border-top:1px solid #d9d9d9;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Thames And Kosmos Educatio 2 Education</div>
<div class="navlinks"><span>Curriculum</span><span>Grade Level</span><span>Classroom Sets</span></div>
<div class="navcta">Educator Login</div>
</div>
<div class="hero">
<h1>Standards-Aligned Kits for Every Classroom</h1>
<p>Hands-on science, math, and reading materials mapped to grade-level learning outcomes.</p>
</div>
<div class="chiprow">
<div class="chip c1">Math</div>
<div class="chip c2">Reading</div>
<div class="chip c3">Science</div>
<div class="chip c4">Assessment</div>
</div>
<div class="seclabel">Recommended for Grade 4-6</div>
<div class="grid">
<div class="card o"><div class="thumb"></div><div class="ptitle">Fractions Manipulative Set</div><div class="pmeta">Math · Grade 4-5</div><div class="pprice">$34.95</div></div>
<div class="card g"><div class="thumb"></div><div class="ptitle">Guided Reading Library</div><div class="pmeta">Reading · Grade 3-5</div><div class="pprice">$89.00</div></div>
<div class="card t"><div class="thumb"></div><div class="ptitle">Ecosystems Lab Kit</div><div class="pmeta">Science · Grade 5-6</div><div class="pprice">$54.95</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Classroom Assessment Pack</div><div class="pmeta">Assessment · All Grades</div><div class="pprice">$28.00</div></div>
</div>
<div class="footer"><span>© Standards-Aligned Curriculum</span><span>Bulk Classroom Pricing</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.25px; background: #313131; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.25px; background: #ffffff; color: #000000;
border: 1px solid #313131; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #cc0000; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#ffffff; color:#313131; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:48px;background:#000;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.nav .logo{font-weight:700;font-size:13px;letter-spacing:.5px;text-transform:uppercase;}
.nav .links{display:flex;gap:20px;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;}
.nav .links span:first-child{border-bottom:2px solid #fff;padding-bottom:14px;}
.wrap{display:flex;height:592px;}
.left{width:340px;background:#fff;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;}
.poster{width:200px;height:300px;background:linear-gradient(160deg,#313131,#000);position:relative;box-shadow:0 8px 20px rgba(0,0,0,.15);}
.poster::before{content:'';position:absolute;top:30px;left:20px;right:20px;height:2px;background:#666;}
.poster::after{content:'STALKER';position:absolute;bottom:40px;left:20px;right:20px;color:#fff;font-size:16px;font-weight:700;letter-spacing:1px;}
.badge{position:absolute;top:24px;left:24px;background:#000;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 6px;border-radius:2px;}
.right{flex:1;padding:28px 32px;display:flex;flex-direction:column;}
h1{font-size:28px;font-weight:700;margin:0 0 6px;letter-spacing:-.25px;}
.director{font-size:18px;font-weight:600;color:#666;margin:0 0 4px;}
.year{font-size:16px;color:#999;margin:0 0 16px;}
.badges{display:flex;gap:8px;margin-bottom:16px;}
.b{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:2px;}
.b-approved{background:#000;color:#fff;}
.b-4k{background:#1565c0;color:#fff;}
.price{font-size:16px;color:#313131;font-weight:600;margin:0 0 18px;}
.desc{font-size:16px;color:#313131;line-height:1.6;margin:0 0 18px;}
.specs{border-top:1px solid #d9d9d9;padding-top:14px;font-size:14px;}
.spec-row{display:flex;justify-content:space-between;padding:4px 0;}
.spec-row .k{color:#666;font-weight:600;font-size:13px;text-transform:uppercase;}
.actions{display:flex;gap:10px;margin-top:auto;}
.btn-primary{background:#313131;color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.25px;border-radius:4px;padding:12px 24px;height:44px;display:flex;align-items:center;}
.btn-secondary{background:#fff;color:#000;font-size:14px;font-weight:600;text-transform:uppercase;border:1px solid #d9d9d9;border-radius:4px;padding:11px 23px;height:44px;display:flex;align-items:center;}
</style>
</head>
<body>
<div class="nav"><div class="logo">Criterion Collection</div><div class="links"><span>The Collection</span><span>Shop</span><span>My Criterion</span></div></div>
<div class="wrap">
<div class="left"><div class="badge">4K UHD</div><div class="poster"></div></div>
<div class="right">
<h1>Stalker</h1>
<p class="director">Directed by Andrei Tarkovsky</p>
<p class="year">1979 · Soviet Union · 162 min</p>
<div class="badges"><span class="b b-approved">Director-Approved</span><span class="b b-4k">4K Restoration</span></div>
<p class="price">$39.95</p>
<p class="desc">A new 4K digital restoration, supervised by cinematographer Alexander Knyazhinsky's estate, of Tarkovsky's meditative journey into the Zone. Special edition features include a 1979 interview and a booklet essay.</p>
<div class="specs">
<div class="spec-row"><span class="k">Aspect Ratio</span><span>1.37:1</span></div>
<div class="spec-row"><span class="k">Audio</span><span>Russian 1.0 LPCM</span></div>
<div class="spec-row"><span class="k">Subtitles</span><span>English</span></div>
</div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">View Details</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfbfb; color: #555555;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfbfb; color: #555555;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #999999; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; letter-spacing: 0.5px; background: #81191f; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; letter-spacing: 0.5px; background: #fbfbfb; color: #555555;
border: 1px solid #81191f; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fbfbfb; color: #555555;
border: 1px solid #d2d2d2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #999999; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.27; letter-spacing: 0.5px; background: #e4752b; color: #ffffff;
border-radius: 3px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Roboto',Verdana,sans-serif; background:#fbfbfb; color:#555555; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e6e6e6;}
.logo{font-size:20px;font-weight:600;color:#555555;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;letter-spacing:.3px;color:#555555;}
.hero{height:296px;display:flex;background:#f7f7f7;}
.heroimg{width:46%;position:relative;overflow:hidden;background:linear-gradient(150deg,#81191f 0%,#3a0b0e 65%);}
.heroimg:before{content:'';position:absolute;left:38%;top:22%;width:120px;height:220px;border-radius:16px;background:linear-gradient(120deg,#6a1419,#81191f);box-shadow:0 12px 30px rgba(0,0,0,.35);}
.heroimg:after{content:'';position:absolute;left:41%;top:26%;width:96px;height:60px;border-radius:8px;border:1px solid rgba(255,255,255,.25);}
.herotext{width:54%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;}
.herotext .kick{font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#e4752b;margin-bottom:10px;}
.herotext h1{font-size:28px;font-weight:600;color:#555555;margin:0 0 12px;letter-spacing:0;}
.herotext p{font-size:15px;color:#777777;margin:0 0 20px;max-width:340px;line-height:1.5;}
.cta{display:inline-flex;align-items:center;justify-content:center;background:#81191f;color:#fff;font-size:14px;font-weight:500;letter-spacing:.5px;padding:12px 28px;border-radius:9999px;width:fit-content;}
.cta.sec{background:#fbfbfb;color:#555555;border:1px solid #d4d4d4;margin-left:12px;}
.ctarow{display:flex;}
.sec{padding:24px 36px 0;}
.sectitle{font-size:16px;font-weight:600;color:#555555;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:196px;background:#fff;border-radius:6px;overflow:hidden;}
.thumb{height:110px;border-radius:6px 6px 0 0;position:relative;background:#f7f7f7;}
.badge{position:absolute;top:8px;left:8px;background:#e4752b;color:#fff;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:3px;}
.pbody{padding:10px 12px 14px;}
.ptitle{font-size:14px;font-weight:600;color:#555555;}
.pprice{font-size:16px;font-weight:600;color:#555555;margin-top:4px;}
.pprice.sale{color:#e4752b;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:12px;color:#b0b0b0;background:#555555;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Noreve</div>
<div class="navlinks"><div>Cases</div><div>Chargers</div><div>Leather Care</div><div>Editions</div></div>
</div>
<div class="hero">
<div class="heroimg"></div>
<div class="herotext">
<div class="kick">Full-Grain Calfskin</div>
<h1>Cases cut like saddlery.</h1>
<p>Hand-stitched leather goods that happen to protect a phone. Every edge is painted, every stitch is pulled by hand.</p>
<div class="ctarow"><div class="cta">Shop the Atelier</div><div class="cta sec">Our Craft</div></div>
</div>
</div>
<div class="sec">
<div class="sectitle">New This Season</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#81191f,#3a0b0e)"><div class="badge">Sale</div></div><div class="pbody"><div class="ptitle">Ambition Folio Case</div><div class="pprice sale">€79</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#6a1419,#81191f)"></div><div class="pbody"><div class="ptitle">Tradition Wallet Case</div><div class="pprice">€94</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#428bca,#2c5a7a)"></div><div class="pbody"><div class="ptitle">Perpetual Card Sleeve</div><div class="pprice">€49</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e4752b,#a34f16)"></div><div class="pbody"><div class="ptitle">Ambition MagSafe Charger</div><div class="pprice">€59</div></div></div>
</div>
</div>
<div class="footer"><span>Made in France since the atelier's first stitch</span><span>Leather Care Guide</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #6c47ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #6c47ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b7a7fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6430f7; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6c47ff; color: #ffffff;
border: 1px solid #6430f7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #6c47ff; color: #f5f5f5;
border: 1px solid #8263fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b7a7fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6b43fe; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #f7f7f8; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
nav { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; background: #ffffff; border-bottom: 1px solid #eeeef0; }
.brand { font-size: 17px; font-weight: 700; color: #212126; margin: 0; }
.brand span { color: #6c47ff; }
.navlinks { display: flex; gap: 26px; font-size: 13px; color: #747686; }
.cta { background: #6c47ff; color: #fff; border: none; border-radius: 8px; padding: 9px 18px; font-weight: 600; font-size: 13px; }
.main { display: flex; gap: 36px; padding: 44px 44px 0; height: 480px; }
.copy { width: 340px; flex-shrink: 0; }
.copy .kicker { font-size: 12px; font-weight: 600; color: #6c47ff; letter-spacing: 0.02em; }
.copy h1 { font-size: 44px; font-weight: 700; color: #212126; margin: 10px 0 14px; line-height: 1.05; }
.copy p { font-size: 15px; color: #747686; line-height: 1.55; margin: 0 0 22px; }
.rowbtn { display: flex; gap: 10px; }
.btn-p { background: #6c47ff; color: #fff; border: none; border-radius: 8px; padding: 11px 20px; font-weight: 600; font-size: 14px; }
.btn-s { background: #ffffff; color: #212126; border: 1px solid #eeeef0; border-radius: 8px; padding: 11px 20px; font-weight: 600; font-size: 14px; }
.code { margin-top: 22px; background: #131316; border-radius: 12px; padding: 16px 18px; box-shadow: 0 8px 20px rgba(20,20,25,0.18); }
.code .dots { display: flex; gap: 5px; margin-bottom: 10px; }
.code .dot { width: 8px; height: 8px; border-radius: 50%; background: #3a3a42; }
.code pre { margin: 0; font-family: Menlo, Monaco, Consolas, monospace; font-size: 12px; color: #eeeef0; line-height: 1.6; }
.code .kw { color: #00aee3; }
.code .str { color: #22c543; }
.authcard { width: 320px; background: #ffffff; border-radius: 16px; padding: 28px 26px; box-shadow: 0 2px 6px rgba(20,20,25,0.04), 0 12px 28px rgba(20,20,25,0.10), 0 30px 60px rgba(20,20,25,0.08); align-self: flex-start; margin-top: 10px; }
.authcard .logo { width: 36px; height: 36px; border-radius: 10px; background: #6c47ff; margin: 0 auto 14px; }
.authcard h3 { text-align: center; font-size: 17px; font-weight: 600; color: #212126; margin: 0 0 4px; }
.authcard .sub { text-align: center; font-size: 12px; color: #747686; margin: 0 0 20px; }
.social { display: flex; gap: 8px; margin-bottom: 16px; }
.social div { flex: 1; height: 38px; border: 1px solid #eeeef0; border-radius: 8px; }
.divider { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.divider .line { flex: 1; height: 1px; background: #eeeef0; }
.divider span { font-size: 11px; color: #747686; }
.field { margin-bottom: 12px; }
.field .lbl { font-size: 12px; color: #212126; font-weight: 500; margin-bottom: 5px; }
.field .box { height: 38px; border-radius: 8px; border: 1px solid #eeeef0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02); background: #fafafa; }
.continue { margin-top: 6px; height: 40px; background: #6c47ff; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 13px; }
.footlink { text-align: center; font-size: 11px; color: #747686; margin-top: 14px; }
.footlink span { color: #6c47ff; font-weight: 600; }
.strip { display: flex; gap: 24px; padding: 30px 44px; }
.mini { flex: 1; background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 1px 2px rgba(20,20,25,0.04), 0 6px 16px rgba(20,20,25,0.06); }
.mini .dot { width: 22px; height: 22px; border-radius: 6px; margin-bottom: 10px; }
.mini h4 { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: #212126; }
.mini p { margin: 0; font-size: 11px; color: #747686; }
</style>
<nav>
<p class="brand">Clerk</p>
<div class="navlinks"><span>Products</span><span>Docs</span><span>Pricing</span><span>Changelog</span></div>
<button class="cta">Start building</button>
</nav>
<div class="main">
<div class="copy">
<div class="kicker">Authentication, done</div>
<h1>Ship user management in minutes.</h1>
<p>Drop-in components for sign-in, sign-up and user profiles. We handle the auth so you can get out of the way.</p>
<div class="rowbtn">
<button class="btn-p">Get started</button>
<button class="btn-s">Read the docs</button>
</div>
<div class="code">
<div class="dots"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
<pre><span class="kw">import</span> { SignIn } <span class="kw">from</span> <span class="str">'@clerk/nextjs'</span>
<span class="kw">export default function</span> Page() {
<span class="kw">return</span> <SignIn />
}</pre>
</div>
</div>
<div class="authcard">
<div class="logo"></div>
<h3>Sign in to Acme</h3>
<p class="sub">Welcome back, please sign in to continue</p>
<div class="social"><div></div><div></div><div></div></div>
<div class="divider"><div class="line"></div><span>or</span><div class="line"></div></div>
<div class="field"><div class="lbl">Email address</div><div class="box"></div></div>
<div class="field"><div class="lbl">Password</div><div class="box"></div></div>
<div class="continue">Continue</div>
<div class="footlink">No account? <span>Sign up</span></div>
</div>
</div>
<div class="strip">
<div class="mini"><div class="dot" style="background:#6c47ff"></div><h4>Primary CTA</h4><p>#6c47ff — brand anchor, never purple-600</p></div>
<div class="mini"><div class="dot" style="background:#00aee3"></div><h4>Secondary accent</h4><p>Sky #00aee3 for links and highlights</p></div>
<div class="mini"><div class="dot" style="background:#22c543"></div><h4>Success state</h4><p>Green #22c543 for confirmations</p></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4262ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4262ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a4b3fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3652d8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4262ff; color: #ffffff;
border: 1px solid #3652d8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4262ff; color: #f5f5f5;
border: 1px solid #5f7afd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a4b3fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #405ff9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:"Pretendard", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.techno { font-family:"Orbitron", "Pretendard", sans-serif; }
.jamsil { font-family:"Jamsil", "Pretendard", sans-serif; }
nav { height:58px; display:flex; align-items:center; padding:0 36px; }
.brand { font-size:15px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; margin-left:32px; }
.navlinks span { font-size:16px; font-weight:700; color:#8e8e8e; }
.navlinks span.on { color:#111111; }
.cta-primary { margin-left:auto; background:#4262ff; color:#ffffff; border:1px solid #3652d8;
border-radius:8px; height:40px; padding:0 20px; display:flex; align-items:center; font-size:14px; font-weight:700; }
.hero { text-align:center; padding:12px 36px 20px; }
.hero .wordmark { font-size:78px; font-weight:700; line-height:1.0; color:#111111; letter-spacing:1px; }
.hero h2 { font-family:"Pretendard",sans-serif; font-size:28px; font-weight:700; margin:6px 0 8px; color:#111111; }
.hero p { font-size:15px; color:#5b636d; margin:0 0 16px; }
.cta-big { display:inline-flex; align-items:center; background:#4262ff; color:#ffffff; border:1px solid #3652d8;
border-radius:8px; height:46px; padding:0 30px; font-size:16px; font-weight:700; }
.cards { display:flex; gap:16px; padding:14px 36px 20px; }
.card { flex:1; border-radius:20px; border:1px solid #ffffff; background:#111111; padding:30px 18px;
display:flex; flex-direction:column; align-items:flex-start; gap:14px; height:150px; position:relative; overflow:hidden; }
.card::after { content:''; position:absolute; right:-30px; bottom:-30px; width:110px; height:110px; border-radius:50%;
background:rgba(66,98,255,0.25); }
.card .tag { font-size:12px; color:#ff4d4d; font-weight:700; }
.card .t { font-size:16px; color:#ffffff; font-weight:700; line-height:1.3; }
.pill { background:#343434; color:#ffffff; border-radius:9999px; padding:0 14px; height:30px; display:flex;
align-items:center; font-size:12px; font-weight:600; }
.bottom { display:flex; gap:16px; padding:0 36px; }
.surface { flex:1; background:#f2f3f8; border-radius:20px; padding:18px 20px; }
.surface h4 { margin:0 0 6px; font-size:14px; color:#111111; }
.surface p { margin:0; font-size:13px; color:#5b636d; }
</style></head>
<body>
<nav>
<p class="brand">maum.ai (ex-MindsLab)</p>
<div class="navlinks"><span class="on">Physical AI</span><span>Defense</span><span>Foundation Model</span><span>Company</span></div>
<div class="cta-primary">Get Started</div>
</nav>
<div class="hero">
<div class="wordmark techno">MAIED</div>
<h2 class="jamsil">MAUM.AI Foundation Model</h2>
<p>One core model, applied outward into robots, industrial systems, and defense platforms.</p>
<div class="cta-big">Get Started</div>
</div>
<div class="cards">
<div class="card"><span class="tag">ROBOTICS</span><span class="t">JINDO BOT — field-ready autonomy</span><span class="pill">Visit</span></div>
<div class="card"><span class="tag">CONVERSATION</span><span class="t">AIden — voice & language engine</span><span class="pill">Visit</span></div>
<div class="card"><span class="tag">DEFENSE</span><span class="t">Mission-grade physical AI systems</span><span class="pill">Visit</span></div>
</div>
<div class="bottom">
<div class="surface"><h4>Enterprise deployment</h4><p>Bring the foundation model into existing industrial workflows.</p></div>
<div class="surface"><h4>Research-first</h4><p>Built in the open with a dedicated research team.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #742ddd; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #742ddd; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bb9bea; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6211c8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #742ddd; color: #ffffff;
border: 1px solid #6211c8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #742ddd; color: #f5f5f5;
border: 1px solid #894de1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bb9bea; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7129da; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0D0D0D; box-sizing:border-box;
font-family:Georgia, "Times New Roman", serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 44px;
font-family:-apple-system, sans-serif; }
.brand { font-size:16px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:20px; font-size:15px; font-weight:500; }
.pill-dark { background:#0D0D0D; color:#FFFFFF; border:1px solid #0D0D0D; border-radius:24px; height:38px;
padding:0 20px; display:flex; align-items:center; font-size:13px; font-weight:600; font-family:-apple-system,sans-serif; }
.hero { padding:26px 44px 16px; }
.hero h1 { font-size:56px; font-weight:500; line-height:1.05; margin:0 0 14px; max-width:700px; }
.hero p { font-family:-apple-system, sans-serif; font-size:18px; color:#424242; margin:0; max-width:480px; }
.chatpanel { margin:20px 44px 0; background:#f2f3f7; border:1px solid #e3e5ef; border-radius:12px; padding:20px;
font-family:-apple-system, sans-serif; }
.bubble { max-width:60%; padding:10px 14px; border-radius:16px; font-size:14px; margin-bottom:10px; }
.in { background:#EEEEEE; color:rgba(0,0,0,0.87); }
.out { background:#742DDD; color:#ffffff; margin-left:auto; }
.row-cta { display:flex; gap:12px; padding:18px 44px 0; font-family:-apple-system, sans-serif; }
.outline-pill { background:#ffffff; color:#0D0D0D; border:1px solid #0D0D0D; border-radius:24px; padding:12px 20px; font-size:13px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Sendbird</p>
<div class="navlinks"><span>Products</span><span>Solutions</span><span>Docs</span></div>
<button class="pill-dark">Get started</button>
</nav>
<section class="hero">
<h1>The AI customer experience platform</h1>
<p>Chat, calls, and AI agents your users never have to think twice about.</p>
</section>
<div class="chatpanel">
<div class="bubble in">Hey — is this refund still processing?</div>
<div class="bubble out">Yes! It'll land in 2–3 business days.</div>
<div class="bubble in">Perfect, thank you.</div>
</div>
<div class="row-cta">
<button class="pill-dark">Talk to sales</button>
<button class="outline-pill">See docs</button>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfaf7; color: #0f0f0f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfaf7; color: #0f0f0f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #0f0f0f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #575757; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; background: #d2815f; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; background: #fcfaf7; color: #0f0f0f;
border: 1px solid #d2815f; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fcfaf7; color: #0f0f0f;
border: 1px solid #c1bfbd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #575757; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #ff2a00; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#fcfaf7; color:#0f0f0f; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-size:19px;font-weight:600;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;}
.navlinks .on{border-bottom:2px solid #d2815f;padding-bottom:22px;}
.hero{height:250px;display:flex;background:#f3ece7;}
.herotxt{width:48%;padding:24px 36px;display:flex;flex-direction:column;justify-content:center;}
.herotxt .tag{font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:#c35121;margin-bottom:8px;}
.herotxt h1{font-size:28px;font-weight:600;margin:0 0 10px;line-height:1.25;}
.herotxt p{font-size:14px;color:#4e4e50;margin:0 0 18px;max-width:290px;}
.cta{width:fit-content;font-size:14px;font-weight:500;background:#d2815f;color:#fff;padding:12px 26px;border-radius:16px;}
.set{width:52%;display:flex;align-items:center;justify-content:center;gap:14px;padding:20px;}
.piece{border-radius:16px;}
.p1{width:120px;height:120px;background:linear-gradient(150deg,#f8f0e7,#d2815f);}
.p2{width:90px;height:150px;background:linear-gradient(150deg,#e4d8ce,#748cab);align-self:flex-end;}
.p3{width:70px;height:70px;background:linear-gradient(150deg,#fff,#c35121);border-radius:50%;}
.sec{padding:20px 36px 0;}
.sec h2{font-size:18px;font-weight:600;margin:0 0 14px;}
.grid{display:flex;gap:14px;}
.card{width:210px;background:#fff;border-radius:16px;border:1px solid #dedede;padding:10px;position:relative;}
.badge{position:absolute;top:18px;left:18px;font-size:10px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:#fff;padding:2px 8px;border-radius:4px;z-index:1;}
.cimg{height:100px;border-radius:12px;margin-bottom:8px;}
.ctitle{font-size:14px;font-weight:500;}
.price-row{display:flex;gap:8px;align-items:baseline;margin-top:4px;}
.now{font-size:14px;font-weight:700;color:#ff2a00;}
.was{font-size:12px;color:#747477;text-decoration:line-through;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#0f0f0f;color:#fcfaf7;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:11px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mushie Feeding 2</div>
<div class="navlinks"><div>Toys</div><div class="on">Feeding</div><div>Bath</div><div>Sleep</div></div>
</div>
<div class="hero">
<div class="herotxt">
<div class="tag">Feeding Set — New Colors</div>
<h1>Mealtime, made<br>for tiny hands</h1>
<p>Silicone bibs, suction plates, and utensils that actually stay put.</p>
<div class="cta">Shop Feeding Set</div>
</div>
<div class="set"><div class="piece p1"></div><div class="piece p2"></div><div class="piece p3"></div></div>
</div>
<div class="sec">
<h2>Complete the Set</h2>
<div class="grid">
<div class="card"><div class="badge" style="background:#ff2a00;">Sale</div><div class="cimg" style="background:linear-gradient(135deg,#f3ece7,#d2815f)"></div><div class="ctitle">Suction Plate, Clay</div><div class="price-row"><span class="now">$16</span><span class="was">$20</span></div></div>
<div class="card"><div class="badge" style="background:#d2815f;">New</div><div class="cimg" style="background:linear-gradient(135deg,#e4d8ce,#748cab)"></div><div class="ctitle">Silicone Bib, Slate</div><div class="ctitle" style="font-weight:400;color:#4e4e50;font-size:13px;">$19</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#fff,#c35121)"></div><div class="ctitle">Bent Spoon Set</div><div class="ctitle" style="font-weight:400;color:#4e4e50;font-size:13px;">$12</div></div>
</div>
</div>
<div class="footer"><span>BPA & Phthalate Free</span><span>Shipping Registry</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f4ef; color: #1d1b3e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f4ef; color: #1d1b3e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #1d1b3e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8e7e76; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffb600; color: #1d1b3e;
border: none; border-radius: 20px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f8f4ef; color: #1d1b3e;
border: 1px solid #ffb600; border-radius: 20px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f4ef; color: #373737;
border: 1px solid #c1bec3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e7e76; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.1; letter-spacing: 0.5px; background: #f0eede; color: #1d1b3e;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f4ef; font-family:'Maison Neue',Arial,Helvetica,sans-serif; color:#373737; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:'Mabry Pro','Maison Neue',sans-serif;font-size:22px;font-weight:500;color:#1d1b3e;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;color:#8e7e76;}
.navlinks .active{color:#1d1b3e;border-bottom:2px solid #ffb600;padding-bottom:24px;}
.hero{height:250px;display:flex;align-items:center;padding:0 44px;}
.herotext{width:50%;}
.herotext h1{font-family:'Mabry Pro','Maison Neue',sans-serif;font-size:36px;font-weight:500;color:#1d1b3e;margin:0 0 14px;letter-spacing:-0.7px;line-height:1.1;}
.herotext p{font-size:15px;color:#373737;margin:0 0 20px;max-width:320px;}
.cta{display:inline-block;background:#ffb600;color:#1d1b3e;font-size:16px;font-weight:600;padding:14px 28px;border-radius:20px;}
.heroimg{width:42%;height:180px;border-radius:12px;background:linear-gradient(140deg,#c9bcac,#9c8d85 70%);}
.section{padding:22px 44px 0;}
.seclabel{font-family:'Mabry Pro','Maison Neue',sans-serif;font-size:24px;font-weight:500;color:#1d1b3e;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:190px;background:#fff;border-radius:12px;overflow:hidden;}
.thumb{height:110px;background:#f0eede;}
.cardbody{padding:10px 14px 14px;}
.ptitle{font-size:16px;font-weight:600;color:#373737;}
.pprice{font-size:16px;color:#373737;margin-top:4px;}
.pillbadge{display:inline-block;background:#f0eede;color:#1d1b3e;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:4px 10px;border-radius:9999px;margin-top:8px;}
</style>
<div class="nav">
<div class="logo">Sabai</div>
<div class="navlinks"><div class="active">Sofas</div><div>Chairs</div><div>Sectionals</div><div>Fabric Swatches</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Furniture that stays out of the landfill.</h1>
<p>Modular, reupholsterable, and built to be loved for a decade, not a season.</p>
<div class="cta">Shop Sofas</div>
</div>
<div class="heroimg"></div>
</div>
<div class="section">
<div class="seclabel">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c9bcac,#f8f4ef)"></div><div class="cardbody"><div class="ptitle">Essential Sofa</div><div class="pprice">$1,299</div><div class="pillbadge">Sustainable</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#9c8d85,#c9bcac)"></div><div class="cardbody"><div class="ptitle">Cloud Sectional</div><div class="pprice">$2,199</div><div class="pillbadge">New</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f0eede,#c9bcac)"></div><div class="cardbody"><div class="ptitle">Lounge Chair, Boucle</div><div class="pprice">$649</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #272d45;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #272d45;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #272d45; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #959799; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #53565a; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #53565a;
border: 1px solid #53565a; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #626262;
border: 1px solid #c9cad0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #959799; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d63a2f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#626262; box-sizing:border-box;
font-family:inherit,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#ffffff; border-bottom:1px solid #c6c6c6; }
.brand { font-size:19px; font-weight:600; color:#272d45; }
.nlinks { display:flex; gap:22px; }
.nlinks div { font-size:12px; font-weight:600; color:#53565a; text-transform:uppercase; }
.nlinks div.on { color:#d63a2f; }
.navcta { background:#d63a2f; color:#fff; font-size:13px; font-weight:600; border-radius:8px; padding:9px 18px; }
.hero { height:220px; background:#f0f5f2; display:flex; align-items:center; justify-content:center; text-align:center;
flex-direction:column; padding:0 40px; }
.herotxt .k { color:#959799; font-size:12px; letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; }
.herotxt h1 { color:#272d45; font-size:32px; font-weight:700; line-height:1.25; margin:0 0 10px; }
.herotxt p { color:#626262; font-size:15px; line-height:1.5; max-width:420px; margin:0 auto 16px; }
.herobtn { display:inline-block; background:#53565a; color:#fff; font-size:14px; font-weight:600; border-radius:8px; padding:11px 24px; }
.section { padding:22px 32px 0; }
.sechead { font-size:18px; font-weight:600; color:#272d45; margin-bottom:14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { background:#ffffff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.06); padding:10px; }
.shot { aspect-ratio:1/1; background:#f4f4f6; border-radius:8px; position:relative; }
.shot .jar { position:absolute; left:50%; top:52%; width:44px; height:56px; border-radius:6px 6px 12px 12px;
transform:translate(-50%,-50%); }
.c1 .jar { background:linear-gradient(160deg,#dae6df,#0e7a82 140%); }
.c2 .jar { background:linear-gradient(160deg,#f0f5f2,#c5c1be); }
.c3 .jar { background:linear-gradient(160deg,#bcb2a8,#53565a); }
.c4 .jar { background:linear-gradient(160deg,#dae6df,#53565a); }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; text-transform:uppercase;
padding:2px 8px; border-radius:20px; background:#dae6df; color:#272d45; }
.badge.sale { border-radius:4px; background:#d63a2f; color:#fff; }
.ctitle { font-size:13px; font-weight:600; color:#272d45; margin:8px 0 3px; }
.cprice { font-size:14px; color:#626262; }
</style></head>
<body>
<nav>
<div class="brand">Davids</div>
<div class="nlinks"><div class="on">Tinctures</div><div>Teas</div><div>Skincare</div><div>Bundles</div></div>
<div class="navcta">Add To Cart</div>
</nav>
<div class="hero">
<div class="herotxt">
<div class="k">Small-Batch Apothecary</div>
<h1>Herbal Remedies,<br>Made Slowly</h1>
<p>Tinctures, teas, and salves formulated in small batches — nothing clinical about it.</p>
<div class="herobtn">Shop Best Sellers</div>
</div>
</div>
<div class="section">
<div class="sechead">Everyday Essentials</div>
<div class="grid">
<div class="card c1"><div class="shot"><span class="badge">Ingredient+</span><div class="jar"></div></div>
<div class="ctitle">Calm Root Tincture</div><div class="cprice">$32.00</div></div>
<div class="card c2"><div class="shot"><div class="jar"></div></div>
<div class="ctitle">Chamomile Evening Tea</div><div class="cprice">$18.00</div></div>
<div class="card c3"><div class="shot"><span class="badge sale">Sale</span><div class="jar"></div></div>
<div class="ctitle">Restorative Salve</div><div class="cprice">$24.00</div></div>
<div class="card c4"><div class="shot"><div class="jar"></div></div>
<div class="ctitle">Immune Support Drops</div><div class="cprice">$29.00</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e0e16; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e0e16; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8d91; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #181826; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e0e16; color: #ffffff;
border: 1px solid #181826; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0e0e16; color: #f5f5f5;
border: 1px solid #33333a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8d91; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #101019; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0E0E16; color:#F3F3FB; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { padding:30px 40px; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:1.2px; color:#C2F94E; text-transform:uppercase; }
.title { font-size:30px; font-weight:800; letter-spacing:-.4px; margin-top:6px; }
.strip { display:flex; gap:8px; margin-top:22px; }
.cell { flex:1; aspect-ratio:.68; background:#181826; border:1px solid #2C2C42; border-radius:14px;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.cell .dow { font-size:10px; font-weight:700; color:#65657E; }
.cell .date { font-size:15px; font-weight:800; }
.cell .dot { width:7px; height:7px; border-radius:50%; }
.cell.done { background:rgba(52,211,153,0.12); border-color:rgba(52,211,153,0.35); }
.cell.done .date { color:#34D399; }
.cell.today { background:#4F46E5; border-color:#6366F1; }
.cell.today .dow, .cell.today .date { color:#fff; }
.cell.today .dot { background:#C2F94E; }
.cell.rest .date { color:#65657E; }
.session { margin-top:22px; border-radius:22px; padding:22px; position:relative; overflow:hidden;
background:linear-gradient(150deg,#4F46E5,#3A33B8); box-shadow: rgba(79,70,229,0.30) 0 10px 28px; }
.session::after { content:''; position:absolute; width:220px; height:220px; border-radius:50%;
background:rgba(194,249,78,0.14); right:-70px; bottom:-90px; }
.tag { display:inline-block; background:#C2F94E; color:#1A1A1A; font-size:10px; font-weight:800; text-transform:uppercase;
padding:5px 10px; border-radius:8px; }
.sess-title { font-size:21px; font-weight:800; margin-top:12px; }
.stats { display:flex; gap:32px; margin-top:16px; position:relative; z-index:1; }
.stat b { font-size:18px; font-weight:800; display:block; }
.stat span { font-size:10px; font-weight:600; text-transform:uppercase; color:rgba(255,255,255,.7); }
.go { margin-top:18px; background:#C2F94E; color:#1A1A1A; font-size:16px; font-weight:800; text-align:center;
padding:13px; border-radius:14px; position:relative; z-index:1; }
.side { position:absolute; top:30px; right:40px; width:300px; }
.struct-hdr { font-size:13px; font-weight:700; margin-bottom:10px; }
.bar { display:flex; height:30px; border-radius:8px; overflow:hidden; gap:3px; }
.bar div { height:100%; }
.step { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #2C2C42; }
.phase { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#1A1A1A; }
.step-title { font-size:15px; font-weight:700; }
.step-desc { font-size:11px; color:#9C9CB8; }
.pace { margin-left:auto; text-align:right; font-size:13px; font-weight:800; }
.pace span { display:block; font-size:10px; color:#65657E; font-weight:600; }
</style></head>
<body>
<div class="wrap">
<div class="eyebrow">Runna (iOS) · 5K Plan · Week 4 of 8</div>
<div class="title">Your plan</div>
<div class="strip">
<div class="cell done"><div class="dow">MON</div><div class="date">12</div><div class="dot" style="background:#34D399"></div></div>
<div class="cell done"><div class="dow">TUE</div><div class="date">13</div><div class="dot" style="background:#34D399"></div></div>
<div class="cell rest"><div class="dow">WED</div><div class="date">14</div><div class="dot" style="background:#65657E"></div></div>
<div class="cell today"><div class="dow">THU</div><div class="date">15</div><div class="dot"></div></div>
<div class="cell"><div class="dow">FRI</div><div class="date">16</div><div class="dot" style="background:#FBBF24"></div></div>
<div class="cell"><div class="dow">SAT</div><div class="date">17</div><div class="dot" style="background:#4F46E5"></div></div>
<div class="cell rest"><div class="dow">SUN</div><div class="date">18</div><div class="dot" style="background:#65657E"></div></div>
</div>
<div style="display:flex; gap:24px; margin-top:22px;">
<div class="session" style="flex:1.3;">
<div class="tag">Today · Intervals</div>
<div class="sess-title">6 × 800m @ 5K pace</div>
<div class="stats">
<div class="stat"><b>8.4 km</b><span>Distance</span></div>
<div class="stat"><b>48 min</b><span>Duration</span></div>
<div class="stat"><b>4:52</b><span>Avg Pace</span></div>
</div>
<div class="go">▶ Start guided run</div>
</div>
<div style="flex:1;">
<div class="struct-hdr">Workout structure</div>
<div class="bar"><div style="flex:1;background:#34D399;"></div><div style="flex:3;background:#FB7185;"></div><div style="flex:1;background:#34D399;"></div></div>
<div class="step"><div class="phase" style="background:#34D399;">WU</div><div><div class="step-title">Warm-up</div><div class="step-desc">10 min easy jog</div></div><div class="pace">6:10<span>/km</span></div></div>
<div class="step"><div class="phase" style="background:#FB7185;">6×</div><div><div class="step-title">Main set</div><div class="step-desc">800m · 90s recovery</div></div><div class="pace">4:35<span>/km</span></div></div>
<div class="step"><div class="phase" style="background:#34D399;">CD</div><div><div class="step-title">Cool-down</div><div class="step-desc">8 min easy jog</div></div><div class="pace">6:20<span>/km</span></div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffefb; color: #1d1d1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffefb; color: #1d1d1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 300; line-height: 1.3; margin: 0; color: #1d1d1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #787573; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #1d1d1c; color: #fffefb;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fffefb; color: #1d1d1c;
border: 1px solid #1d1d1c; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fffefb; color: #1d1d1c;
border: 1px solid #c6c6c3; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787573; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #bd2828; color: #fffefb;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fffefb; color:#1d1d1c; box-sizing:border-box;
font-family:'Georgia', serif; }
* { box-sizing:border-box; }
.sans { font-family:Arial, Helvetica, sans-serif; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
background:#fffefb; border-bottom:1px solid #edede9; }
.brand { font-size:20px; font-weight:400; margin:0; letter-spacing:0.5px; }
.navlinks { display:flex; gap:26px; font-size:12px; font-weight:500; letter-spacing:0.6px; text-transform:uppercase; color:#787573; }
.navlinks span:first-child { color:#1d1d1c; border-bottom:2px solid #1d1d1c; padding-bottom:4px; }
.btn-primary { background:#1d1d1c; color:#fffefb; border:none; border-radius:0; padding:12px 26px;
font-size:12px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.hero { position:relative; height:320px; background:linear-gradient(120deg,#ebe1d5 0%,#f9f8f3 60%);
display:flex; align-items:center; padding:0 40px; }
.hero::after { content:''; position:absolute; right:40px; top:30px; bottom:30px; width:280px;
background:linear-gradient(160deg,#ffffff,#ebe1d5 80%); border:1px solid #d9d9d6; }
.hero-copy { max-width:440px; z-index:1; }
.hero h1 { font-size:34px; font-weight:400; line-height:1.2; margin:0 0 12px; }
.hero p { font-size:14px; font-family:Arial,sans-serif; color:#616161; line-height:1.6; margin:0 0 18px; max-width:380px; }
.row { display:flex; gap:0; }
.btn-outline { background:#fffefb; color:#1d1d1c; border:1px solid #1d1d1c; border-radius:0; padding:12px 26px;
font-family:Arial,sans-serif; font-size:12px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding:22px 40px; }
.card .imgbox { aspect-ratio:1/1; height:96px; background:#f9f8f3; border:1px solid #edede9; margin-bottom:10px; }
.card h3 { font-family:Arial,sans-serif; font-size:15px; font-weight:600; margin:0 0 3px; }
.card .price { font-family:Arial,sans-serif; font-size:13px; color:#787573; }
.stars { color:#b78c47; font-size:12px; margin-top:2px; }
footer { background:#1d1d1c; color:#fffefb; padding:16px 40px; display:flex; justify-content:space-between;
align-items:center; font-family:Arial,sans-serif; font-size:12px; }
footer span:last-child { color:#c8c8c8; }
</style></head>
<body>
<nav>
<p class="brand">Boll And Branch</p>
<div class="navlinks"><span>Sheets</span><span>Bedding</span><span>Towels</span><span>Gifts</span></div>
<button class="btn-primary">Shop Sheets</button>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Organic cotton, quietly perfected</h1>
<p class="sans">Fair Trade Certified sheets and bedding made for the way you actually sleep — soft, breathable, built to last for years.</p>
<div class="row">
<button class="btn-primary">Shop Bedding</button>
<button class="btn-outline">Learn More</button>
</div>
</div>
</section>
<section class="grid">
<div class="card"><div class="imgbox"></div><h3>Signature Hemmed Sheet Set</h3><div class="price">$219</div><div class="stars">★★★★★</div></div>
<div class="card"><div class="imgbox"></div><h3>Organic Turkish Towels</h3><div class="price">$59</div><div class="stars">★★★★☆</div></div>
<div class="card"><div class="imgbox"></div><h3>Down Alternative Comforter</h3><div class="price">$189</div><div class="stars">★★★★★</div></div>
</section>
<footer>
<span>© Boll And Branch</span>
<span>Fair Trade Certified · Organic Cotton</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.25px; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.2px; background: #0099db; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #0099db;
border: 1px solid #0099db; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #231f20;
border: 1px solid #c8c7c7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #00a651; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Neuzeit Office Pro',Arial,sans-serif; background:#ffffff; color:#231f20; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e5e5e9;}
.logo{font-family:'Helvetica Rounded',Arial,sans-serif;font-size:20px;font-weight:700;color:#231f20;}
.navlinks{display:flex;gap:22px;font-family:'Helvetica Rounded',Arial,sans-serif;font-size:14px;font-weight:700;color:#231f20;}
.navlinks .a{color:#0099db;border-bottom:2px solid #0099db;padding-bottom:20px;}
.hero{height:250px;background:#0099db;display:flex;align-items:center;padding:0 36px;position:relative;overflow:hidden;}
.hero:after{content:'';position:absolute;right:60px;top:64px;width:300px;height:110px;border-radius:10px;background:#231f20;box-shadow:0 14px 30px rgba(0,0,0,.3);}
.keys{position:absolute;right:76px;top:78px;display:grid;grid-template-columns:repeat(10,1fr);gap:4px;width:270px;}
.key{height:16px;background:#3e5c9a;border-radius:3px;}
.key.r{background:#ca2929;}
.herotext{width:420px;color:#fff;}
.herotext h1{font-family:'Helvetica Rounded',Arial,sans-serif;font-size:32px;font-weight:900;letter-spacing:-.5px;margin:0 0 12px;line-height:1.15;}
.herotext p{font-size:15px;color:#e4f4fc;margin:0 0 18px;max-width:320px;}
.hbtn{display:inline-block;background:#fff;color:#0099db;font-family:'Helvetica Rounded',Arial,sans-serif;font-size:14px;font-weight:700;padding:11px 24px;border-radius:8px;}
.tabs{display:flex;gap:24px;padding:16px 36px 0;font-family:'Helvetica Rounded',Arial,sans-serif;font-size:14px;font-weight:700;color:#bbbbbb;border-bottom:1px solid #e5e5e9;}
.tabs .active{color:#0099db;border-bottom:2px solid #0099db;padding-bottom:10px;}
.grid{display:flex;gap:14px;padding:16px 36px 0;}
.card{width:190px;border:1px solid #e5e5e9;border-radius:8px;padding:12px;}
.thumb{height:96px;background:#f0f0f0;border-radius:8px;margin-bottom:8px;position:relative;}
.stock{position:absolute;top:8px;left:8px;font-family:'Helvetica Rounded',Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#fff;background:#00a651;padding:3px 8px;border-radius:4px;}
.stock.low{background:#ca2929;}
.pname{font-family:'Helvetica Rounded',Arial,sans-serif;font-size:14px;font-weight:700;margin-bottom:4px;}
.pprice{font-family:'Helvetica Rounded',Arial,sans-serif;font-size:18px;font-weight:900;}
.swatches{display:flex;gap:6px;margin-top:8px;}
.sw{width:16px;height:16px;border-radius:9999px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#231f20;color:#bbbbbb;font-size:12px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.footer b{color:#0099db;}
</style>
<div class="wrap">
<div class="nav"><div class="logo">Novelkeys</div><div class="navlinks"><span class="a">Keyboards</span><span>Switches</span><span>Keycaps</span><span>Group Buys</span></div></div>
<div class="hero">
<div class="herotext"><h1>Built for the next drop.</h1><p>Boards, switches and keycaps for people who read GB threads for fun.</p><div class="hbtn">Shop Keyboards</div></div>
<div class="keys"><div class="key r"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key r"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key r"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div></div>
</div>
<div class="tabs"><span class="active">All Boards</span><span>Switches</span><span>Keycap Sets</span><span>Deskmats</span></div>
<div class="grid">
<div class="card"><div class="thumb"><span class="stock">In Stock</span></div><div class="pname">NK65 Entry Edition</div><div class="pprice">$115</div><div class="swatches"><div class="sw" style="background:#ca2929"></div><div class="sw" style="background:#3e5c9a"></div><div class="sw" style="background:#a1ad62"></div></div></div>
<div class="card"><div class="thumb"><span class="stock low">Low Stock</span></div><div class="pname">NK87 Gasket Mount</div><div class="pprice">$245</div><div class="swatches"><div class="sw" style="background:#231f20"></div><div class="sw" style="background:#0099db"></div></div></div>
<div class="card"><div class="thumb"><span class="stock">In Stock</span></div><div class="pname">Cream Tactile Switches x90</div><div class="pprice">$36</div><div class="swatches"><div class="sw" style="background:#a1ad62"></div></div></div>
<div class="card"><div class="thumb"><span class="stock">In Stock</span></div><div class="pname">Sherbet DSA Keycap Set</div><div class="pprice">$79</div><div class="swatches"><div class="sw" style="background:#67b8cd"></div><div class="sw" style="background:#ca2929"></div></div></div>
</div>
<div class="footer"><span>Group buys ship when the run finishes, not before</span><span>Track a Group Buy · <b>Live Chat</b></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1e1f26;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1e1f26;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 26px; font-weight: 400; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #1e1f26; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.08em; background: #003388; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.08em; background: #ffffff; color: #1e1f26;
border: 1px solid #003388; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1e1f26;
border: 1px solid #c7c7c9; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0.08em; background: #444444; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'visuelt-regular','Gotham A','Gotham B',Helvetica,sans-serif; background:#ffffff; color:#32373c; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #949494;}
.logo{font-family:'Chronicle Display A',Georgia,serif;font-size:20px;color:#1e1f26;}
.navlinks{display:flex;gap:24px;font-size:13px;color:#32373c;}
.hero{height:290px;display:flex;padding:0 36px;align-items:center;}
.heroImg{width:34%;height:250px;background:linear-gradient(160deg,#003388,#1e1f26);}
.heroText{width:66%;padding-left:40px;}
.h1{font-family:'Chronicle Display A',Georgia,serif;font-size:44px;font-weight:400;color:#1e1f26;line-height:1.08;margin:0 0 12px;}
.artist{font-family:'Chronicle Display A',Georgia,serif;font-style:italic;font-size:15px;color:#808080;margin-bottom:16px;}
.cta{display:inline-block;background:#003388;color:#fff;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;padding:12px 26px;width:fit-content;}
.sec{padding:16px 36px 0;}
.secTitle{font-family:'Chronicle Display A',Georgia,serif;font-size:20px;color:#1e1f26;margin-bottom:12px;}
.grid{display:flex;gap:16px;}
.card{width:150px;}
.thumb{width:150px;height:188px;margin-bottom:8px;}
.pname{font-family:'Chronicle Display A',Georgia,serif;font-style:italic;font-size:13px;color:#1e1f26;}
.pprice{font-size:13px;color:#32373c;margin-top:2px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Poster Club</div>
<div class="navlinks"><span>Artists</span><span>Collections</span><span>Frames</span><span>Gift Cards</span></div>
</div>
<div class="hero">
<div class="heroImg"></div>
<div class="heroText">
<div class="h1">Wall-worthy, edition by edition.</div>
<div class="artist">Curated prints from independent artists, matted for gallery walls.</div>
<div class="cta">Add to Cart</div>
</div>
</div>
<div class="sec">
<div class="secTitle">New Editions</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#003388,#808080);"></div><div class="pname">Marlowe Reyes</div><div class="pprice">$45.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#1e1f26,#003388);"></div><div class="pname">Ines Duarte</div><div class="pprice">$52.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#808080,#1e1f26);"></div><div class="pname">Tomas Berg</div><div class="pprice">$45.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#003388,#f0f0f0);"></div><div class="pname">Adah Kessler</div><div class="pprice">$58.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#1e1f26,#808080);"></div><div class="pname">Priya Vance</div><div class="pprice">$45.00</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fff0f3; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #fff0f3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fffdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1A2E; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#FFFFFF; padding:28px 20px; position:relative;
border-right:1px solid #F3DDE3; }
.greet { font-size:20px; font-weight:700; letter-spacing:-0.3px; margin:6px 0 20px; }
.wheelbox { display:flex; justify-content:center; margin:10px 0 18px; }
.wheel { width:220px; height:220px; border-radius:50%; position:relative;
background: conic-gradient(#FF6B81 0 22%, #FFD9DF 22% 30%, #C5B3E6 30% 46%, #A893D6 46% 50%, #F3DDE3 50% 100%);
display:flex; align-items:center; justify-content:center; }
.wheel::before { content:''; position:absolute; inset:22px; background:#FFFFFF; border-radius:50%; }
.wheelcenter { position:relative; text-align:center; }
.wheelcenter .day { font-size:28px; font-weight:700; }
.wheelcenter .phase { font-size:12px; color:#6E6A82; margin-top:2px; }
.today-dot { position:absolute; width:10px; height:10px; background:#FF6B81; border-radius:50%;
top:8px; left:50%; transform:translateX(-50%); box-shadow:0 0 0 4px rgba(255,107,129,0.25); }
.pill { display:block; margin:0 auto 16px; background:#FF6B81; color:#fff; font-size:13px; font-weight:600;
border-radius:26px; padding:10px 0; text-align:center; width:170px; }
.predcard { background:#FFF0F3; border-radius:20px; padding:16px; }
.predcard .lbl { font-size:11px; font-weight:700; text-transform:uppercase; color:#6E6A82; letter-spacing:0.4px; }
.predcard .em { font-size:19px; font-weight:700; color:#FF6B81; margin:4px 0; }
.predcard .sub { font-size:12px; color:#6E6A82; }
.chipgrid { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.chipgrid span { background:#FFF0F3; color:#1A1A2E; font-size:12px; font-weight:600;
padding:8px 12px; border-radius:18px; }
.chipgrid span.sel { background:#FFD9DF; border:1.5px solid #FF6B81; color:#E85870; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:56px; background:rgba(255,255,255,0.96);
border-top:1px solid #F3DDE3; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:#A09CB0; text-align:center; }
.tab.on { color:#FF6B81; font-weight:700; }
.tab .dot { display:block; width:6px; height:6px; border-radius:50%; margin:0 auto 3px; background:currentColor; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:700; letter-spacing:-0.4px; margin:0; color:#1A1A2E; }
.brand span { color:#FF6B81; }
.tag { font-size:14px; color:#6E6A82; line-height:1.55; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:12px; border:1px solid #F3DDE3; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#6E6A82; text-align:center; }
.typeblock .t1 { font-size:26px; font-weight:700; letter-spacing:-0.4px; }
.typeblock .t2 { font-size:13px; color:#6E6A82; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:999px;
background:#FFF0F3; border:1px solid #F3DDE3; color:#6E6A82; }
.footer { margin-top:auto; border-top:1px solid #F3DDE3; padding-top:16px; font-size:11px; color:#A09CB0; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<p class="greet">Good morning, Mia</p>
<div class="wheelbox">
<div class="wheel">
<span class="today-dot"></span>
<div class="wheelcenter"><div class="day">Day 14</div><div class="phase">Follicular phase</div></div>
</div>
</div>
<div class="pill">Log period</div>
<div class="predcard">
<div class="lbl">Next period</div>
<div class="em">In 5 days</div>
<div class="sub">Expected May 19 · 87% confidence</div>
</div>
<div class="chipgrid">
<span class="sel">Cramps</span><span>Mood</span><span>Energy</span><span>Sleep</span><span>Headache</span>
</div>
<div class="tabbar">
<div class="tab on"><span class="dot"></span>Today</div>
<div class="tab"><span class="dot"></span>Calendar</div>
<div class="tab"><span class="dot"></span>Insights</div>
<div class="tab"><span class="dot"></span>Partner</div>
<div class="tab"><span class="dot"></span>More</div>
</div>
</div>
<div class="info">
<div>
<h1 class="brand">Flo (iOS)<span>.</span></h1>
<p class="tag">A soft blush world built around one circular object — the cycle wheel — where color reassures instead of alarms.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#FF6B81"></div><small>#FF6B81</small></div>
<div class="sw"><div class="chip2" style="background:#C5B3E6"></div><small>#C5B3E6</small></div>
<div class="sw"><div class="chip2" style="background:#FFF0F3"></div><small>#FFF0F3</small></div>
<div class="sw"><div class="chip2" style="background:#7DC9A8"></div><small>#7DC9A8</small></div>
<div class="sw"><div class="chip2" style="background:#F2B36B"></div><small>#F2B36B</small></div>
</div>
<div class="typeblock">
<div class="t1">Period in 5 days</div>
<div class="t2">Inter · 20pt / 700 · reassuring forecast copy, never alarming</div>
</div>
<div class="taglist">
<span>Cycle phase wheel</span><span>Prediction card</span><span>Symptom chip grid</span>
<span>Phase legend</span><span>Gentle motion, no red</span>
</div>
<div class="footer">Pure-white canvas · blush surface #FFF0F3 · coral leads, lavender partners</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb1700; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb1700; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #191919; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb1700; color: #191919;
border: 1px solid #191919; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb1700; color: #f5f5f5;
border: 1px solid #ed3b27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #c91704; color: #191919;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#191919; box-sizing:border-box;
font-family:-apple-system,"system-ui","Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-weight:900; font-size:20px; letter-spacing:-1px; }
.navlinks { display:flex; gap:24px; font-size:15px; }
.pill-red { background:#eb1700; color:#fff; border-radius:9999px; padding:10px 20px; font-size:14px; font-weight:600; }
.banner { background:#eb1700; text-align:center; padding:10px; color:#fff; font-weight:900; font-size:20px;
letter-spacing:-0.3px; }
.hero { padding:36px 40px; text-align:center; }
.hero h1 { font-size:38px; font-weight:800; margin:0 0 20px; line-height:1; }
.addr-row { display:flex; gap:10px; max-width:480px; margin:0 auto; }
.addr { flex:1; border:1px solid #ccc; padding:12px 16px; font-size:16px; color:#191919; }
.find { background:#eb1700; color:#fff; border-radius:9999px; padding:0 24px; font-size:16px; height:44px;
display:flex; align-items:center; }
.sec { padding:24px 40px; }
.sec.tint { background:#f6f6f6; }
.sec h2 { font-size:24px; font-weight:800; margin:0 0 14px; }
.cols { display:flex; gap:20px; }
.col { flex:1; background:#fff; border-radius:8px; padding:16px; }
.col .icon { width:36px; height:36px; border-radius:8px; background:#eb1700; margin-bottom:10px; }
.col h4 { font-size:15px; margin:0 0 6px; }
.col p { font-size:12.5px; color:#767676; margin:0; }
.dasher { display:flex; align-items:center; justify-content:space-between; }
.dasher .txt { max-width:400px; }
.dasher .visual { width:240px; height:100px; border-radius:8px;
background:linear-gradient(135deg,#eb1700,#191919); }
</style></head>
<body>
<div class="banner">$0 DELIVERY FEE ON FIRST ORDER</div>
<nav>
<span class="brand">DoorDash</span>
<div class="navlinks"><span>Restaurants</span><span>Grocery</span><span>Convenience</span></div>
<div class="pill-red">Sign In</div>
</nav>
<section class="hero">
<h1>Everything you crave, delivered.</h1>
<div class="addr-row"><div class="addr">Enter delivery address</div><div class="find">Find restaurants</div></div>
</section>
<section class="sec tint">
<h2>Explore what's nearby</h2>
<div class="cols">
<div class="col"><div class="icon"></div><h4>Restaurants</h4><p>Local favorites, delivered fast.</p></div>
<div class="col"><div class="icon"></div><h4>Groceries</h4><p>Weekly shop, no lines.</p></div>
<div class="col"><div class="icon"></div><h4>DashPass</h4><p>Delivery for less.</p></div>
</div>
</section>
<section class="sec dasher">
<div class="txt">
<h2 style="margin-bottom:6px;">Become a Dasher</h2>
<p style="color:#767676; font-size:14px;">As a delivery driver, make money and work on your schedule.</p>
</div>
<div class="visual"></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #999999; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: 0.5px; background: #747474; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #747474; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #999999; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #121212; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#dedede; font-family:Georgia,'Times New Roman',serif; color:#747474; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#dedede;}
.logo{font-size:19px;color:#121212;letter-spacing:.5px;}
.navlinks{display:flex;gap:24px;font-size:13px;color:#747474;}
.cta{border:1px solid #121212;color:#121212;font-size:12px;padding:9px 20px;border-radius:6px;font-family:Arial,sans-serif;}
.hero{height:250px;display:flex;background:#e8e8e8;}
.herotext{width:44%;display:flex;flex-direction:column;justify-content:center;padding:0 36px;}
.herotext h1{font-size:34px;font-weight:400;margin:0 0 14px;line-height:1.25;color:#121212;}
.herotext p{font-size:14px;color:#747474;margin:0 0 18px;max-width:290px;}
.btn{display:inline-block;background:#121212;color:#dedede;font-size:12px;letter-spacing:.4px;padding:12px 24px;border-radius:6px;width:fit-content;font-family:Arial,sans-serif;}
.heroimg{width:56%;position:relative;overflow:hidden;background:linear-gradient(180deg,#f5f5f5,#c4a882 90%);}
.dresser{position:absolute;bottom:26px;left:110px;width:220px;height:130px;background:#747474;border-radius:4px;}
.drawer{position:absolute;left:126px;width:188px;height:34px;background:#5a5a5a;border-radius:3px;}
.knob{position:absolute;width:6px;height:6px;background:#121212;border-radius:50%;}
.sec{padding:22px 36px 0;}
.sectitle{font-size:18px;color:#121212;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#e8e8e8;border-radius:8px;padding:12px;}
.thumb{height:96px;border-radius:6px;margin-bottom:8px;}
.pname{font-size:14px;color:#121212;}
.pprice{font-size:13px;color:#747474;margin-top:4px;font-family:Arial,sans-serif;}
</style>
<div class="nav">
<div class="logo">Monte Design Nursery 2</div>
<div class="navlinks"><span>Furniture</span><span>Nursery</span><span>Lookbook</span><span>Studio</span></div>
<div class="cta">Visit Showroom</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Quiet materials. Considered form.</h1>
<p>Solid-wood pieces designed to recede so the room, and the child in it, can lead.</p>
<div class="btn">View the Studio Line</div>
</div>
<div class="heroimg">
<div class="dresser"></div>
<div class="drawer" style="top:96px;"><div class="knob" style="left:88px;top:14px;"></div></div>
<div class="drawer" style="top:134px;"><div class="knob" style="left:88px;top:14px;"></div></div>
</div>
</div>
<div class="sec">
<div class="sectitle">The Studio Collection</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#747474,#dedede)"></div><div class="pname">Como Crib</div><div class="pprice">$1,480</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#5a5a5a,#c4a882)"></div><div class="pname">Milo Dresser</div><div class="pprice">$1,120</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#121212,#747474)"></div><div class="pname">Sten Glider</div><div class="pprice">$960</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#dedede,#5a5a5a)"></div><div class="pname">Elm Bookcase</div><div class="pprice">$640</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #18181b; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #18181b; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #71717b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #53eafd; color: #101828;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #27272a; color: #e5e7eb;
border: 1px solid #53eafd; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #27272a; color: #e5e7eb;
border: 1px solid #1a1a21; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #71717b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #53eafd; color: #101828;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#18181b; color:#e5e7eb; font-family:'GeneralSans',Arial,sans-serif;
}
*, *::before, *::after { box-sizing:border-box; }
.wrap{ position:relative; width:960px; height:640px; }
.nav{ height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#222233; }
.logo{ font-size:18px; font-weight:700; color:#53eafd; }
.navlinks{ display:flex; gap:22px; }
.navlinks span{ font-size:12px; color:#e5e7eb; }
.navlinks span.active{ color:#53eafd; }
.search-pill{ font-size:11px; color:#9aa0a6; background:#18181b; border:1px solid #33333e; border-radius:999px; padding:8px 18px; }
.cart-fab{ width:34px; height:34px; border-radius:50%; background:#53eafd; color:#18181b; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.hero{ height:230px; display:flex; align-items:center; padding:0 34px; gap:26px; background:linear-gradient(135deg,#1c1c22,#0f2c30); }
.hero-text{ width:400px; }
.kicker{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#53eafd; margin-bottom:10px; }
.h1{ font-size:30px; font-weight:600; line-height:1.2; color:#ffffff; margin-bottom:10px; }
.sub{ font-size:13px; line-height:1.5; color:#a1a1aa; max-width:330px; margin-bottom:16px; }
.btn{ font-size:12px; font-weight:600; color:#18181b; background:#53eafd; padding:12px 22px; border-radius:999px; width:fit-content; }
.slab-area{ flex:1; height:180px; position:relative; }
.slab{ position:absolute; width:76px; height:104px; background:#222233; border:2px solid #53eafd; border-radius:8px; box-shadow:0 0 16px rgba(83,234,253,0.35); }
.s1{ left:60px; top:14px; transform:rotate(-6deg); }
.s2{ left:150px; top:2px; }
.s3{ left:238px; top:20px; transform:rotate(7deg); }
.slab-inner{ position:absolute; left:8px; top:8px; right:8px; bottom:8px; border-radius:4px; }
.section-title{ padding:14px 34px 8px; font-size:15px; font-weight:600; color:#ffffff; }
.grid{ display:flex; gap:14px; padding:0 34px; }
.card{ width:204px; background:#222233; border-radius:12px; padding:10px; }
.card-img{ width:100%; height:96px; background:#18181b; border-radius:8px; margin-bottom:8px; display:flex; align-items:center; justify-content:center; }
.card-title{ font-size:12px; font-weight:600; color:#ffffff; margin-bottom:2px; }
.card-note{ font-size:10px; color:#9aa0a6; margin-bottom:8px; }
.row{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-size:13px; font-weight:700; color:#53eafd; }
.tag{ font-size:9px; font-weight:600; text-transform:uppercase; color:#18181b; background:#53eafd; padding:3px 8px; border-radius:999px; }
.footer{ position:absolute; bottom:0; left:0; width:960px; height:48px; background:#222233; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.footer span{ font-size:10px; color:#9aa0a6; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Hidden Gems Card Shop</div>
<div class="navlinks">
<span class="active">Singles</span>
<span>Sealed</span>
<span>Graded Slabs</span>
<span>Sell to Us</span>
</div>
<div class="search-pill">Search cards, sets, PSA #</div>
<div class="cart-fab">0</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="kicker">Graded Slabs, Verified Daily</div>
<div class="h1">Every rare pull, one pulse away.</div>
<div class="sub">Sold badges and prices pulse in neon cyan the moment a slab is added to your cart — nothing else on the page competes with it.</div>
<div class="btn">Browse Graded Slabs</div>
</div>
<div class="slab-area">
<div class="slab s1"><div class="slab-inner" style="background:linear-gradient(160deg,#53eafd,#222233);"></div></div>
<div class="slab s2"><div class="slab-inner" style="background:linear-gradient(160deg,#e5e7eb,#53eafd);"></div></div>
<div class="slab s3"><div class="slab-inner" style="background:linear-gradient(160deg,#222233,#53eafd);"></div></div>
</div>
</div>
<div class="section-title">Trending This Week</div>
<div class="grid">
<div class="card">
<div class="card-img"><div style="width:56px;height:76px;border-radius:6px;background:linear-gradient(160deg,#53eafd,#18181b);"></div></div>
<div class="card-title">Charizard VMAX PSA 10</div>
<div class="card-note">Champion's Path</div>
<div class="row"><span class="price">$389.00</span><span class="tag">Hot</span></div>
</div>
<div class="card">
<div class="card-img"><div style="width:56px;height:76px;border-radius:6px;background:linear-gradient(160deg,#e5e7eb,#222233);"></div></div>
<div class="card-title">Booster Box — Sealed</div>
<div class="card-note">Base Set 2</div>
<div class="row"><span class="price">$1,249.00</span><span class="tag">Sold Out</span></div>
</div>
<div class="card">
<div class="card-img"><div style="width:56px;height:76px;border-radius:6px;background:linear-gradient(160deg,#222233,#53eafd);"></div></div>
<div class="card-title">Alt Art Rayquaza</div>
<div class="card-note">Evolving Skies PSA 9</div>
<div class="row"><span class="price">$142.00</span><span class="tag">New</span></div>
</div>
</div>
<div class="footer">
<span>© Hidden Gems Card Shop</span>
<span>Grading Guide · Shipping · Support</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1e1e1e; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1e1e1e; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #a2a2a2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 400; line-height: 1.25; letter-spacing: 0.5px; background: #1990c6; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 400; line-height: 1.25; letter-spacing: 0.5px; background: transparent; color: #dedede;
border: 1px solid #1990c6; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #252525; color: #dedede;
border: 1px solid #1e1e1e; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a2a2a2; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #dc143c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#1e1e1e; font-family:'Average', Georgia, 'Times New Roman', serif; color:#dedede; }
*{box-sizing:border-box;}
.nav{position:absolute; top:0; left:0; width:960px; height:72px; background:#1e1e1e; border-bottom:1px solid #424242; display:flex; align-items:center; justify-content:space-between; padding:0 32px;}
.logo{font-size:22px; letter-spacing:0.5px; color:#ffffff;}
.navlinks{display:flex; gap:28px; font-size:13px; letter-spacing:0.5px; text-transform:uppercase; color:#a2a2a2;}
.navlinks span:first-child{color:#dedede;}
.cart{width:36px; height:36px; border-radius:9999px; border:1px solid #424242; display:flex; align-items:center; justify-content:center; font-size:12px; color:#dedede;}
.hero{position:absolute; top:72px; left:0; width:960px; height:340px; display:flex; align-items:center; padding:0 60px; background:linear-gradient(120deg, #1e1e1e 45%, #252525 100%);}
.heroText{width:440px;}
.eyebrow{font-size:11px; letter-spacing:0.5px; text-transform:uppercase; color:#a2a2a2; margin-bottom:14px;}
.headline{font-size:46px; line-height:1.12; color:#ffffff; margin-bottom:16px; font-weight:400;}
.sub{font-size:15px; line-height:1.6; color:#a2a2a2; margin-bottom:22px; width:380px;}
.btn-primary{display:inline-block; background:#1990c6; color:#ffffff; font-size:14px; letter-spacing:0.5px; text-transform:uppercase; padding:14px 30px; border-radius:8px;}
.blade{position:absolute; right:60px; top:96px; width:300px; height:300px;}
.bladeShape{position:absolute; width:260px; height:52px; background:linear-gradient(135deg,#3a3a3a,#0d0d0d 60%,#5a5a5a); border-radius:4px 30px 30px 4px; top:120px; left:20px; transform:rotate(-8deg); box-shadow:0 12px 30px rgba(0,0,0,0.6);}
.handle{position:absolute; width:110px; height:30px; background:#111111; border-radius:4px; top:132px; left:-40px; transform:rotate(-8deg);}
.rivets{position:absolute; width:6px; height:6px; border-radius:50%; background:#a2a2a2;}
.r1{top:140px; left:-15px;} .r2{top:145px; left:0px;} .r3{top:150px; left:15px;}
.sec{position:absolute; top:412px; left:0; width:960px; height:228px; padding:36px 60px;}
.secTitle{font-size:26px; color:#ffffff; margin-bottom:22px;}
.grid{display:flex; gap:20px;}
.card{width:224px; height:150px; background:#252525; border-radius:12px; padding:14px; position:relative;}
.cardImg{width:100%; height:78px; border-radius:8px; background:linear-gradient(135deg,#333,#111);}
.cardTitle{font-size:16px; color:#dedede; margin-top:10px;}
.cardPrice{font-size:14px; color:#a2a2a2; margin-top:4px;}
.badge{position:absolute; top:10px; left:10px; background:#dc143c; color:#fff; font-size:10px; letter-spacing:0.5px; text-transform:uppercase; padding:2px 8px; border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Kamikoto</div>
<div class="navlinks"><span>Knives</span><span>Sets</span><span>Care</span><span>Journal</span></div>
<div class="cart">💼</div>
</div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">Forged in Tradition</div>
<div class="headline">Precision Steel,<br>Quietly Confident</div>
<div class="sub">Hand-honed Japanese blades built for cooks who trust their edge over their marketing.</div>
<div class="btn-primary">Shop Knives</div>
</div>
<div class="blade">
<div class="handle"></div>
<div class="rivets r1"></div><div class="rivets r2"></div><div class="rivets r3"></div>
<div class="bladeShape"></div>
</div>
</div>
<div class="sec">
<div class="secTitle">The Atelier Collection</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="cardImg"></div><div class="cardTitle">Nagare Chef 8"</div><div class="cardPrice">$219</div></div>
<div class="card"><div class="cardImg"></div><div class="cardTitle">Kanpeki Santoku</div><div class="cardPrice">$179</div></div>
<div class="card"><div class="cardImg"></div><div class="cardTitle">Hibachi Paring</div><div class="cardPrice">$89</div></div>
<div class="card"><div class="cardImg"></div><div class="cardTitle">Kessaku Bunka</div><div class="cardPrice">$249</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #476bef;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #476bef;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #476bef; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #f1a500; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #03354c;
border: 1px solid #03354c; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #444444;
border: 1px solid #e5e5e5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #395663; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Home Science Tools Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Outfit',sans-serif; background:#ffffff; color:#444444; }
*{box-sizing:border-box;}
.announce{height:28px;background:#f1a500;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;}
.nav{height:52px;background:#03354c;color:#fff;display:flex;align-items:center;padding:0 32px;gap:24px;}
.logo{font-family:'Montserrat',sans-serif;font-weight:700;font-size:17px;}
.navlinks{display:flex;gap:18px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;}
.searchpill{margin-left:auto;background:#fff;border-radius:999px;height:30px;width:220px;font-size:11px;color:#444;padding:0 14px;line-height:30px;display:flex;align-items:center;justify-content:space-between;}
.searchpill span.dot{background:#03354c;color:#fff;border-radius:999px;width:20px;height:20px;text-align:center;line-height:20px;font-size:10px;}
.hero{background:#03354c;color:#fff;display:flex;align-items:center;padding:22px 32px;gap:30px;height:200px;}
.hero-txt h1{font-family:'Montserrat',sans-serif;font-size:28px;font-weight:700;line-height:1.2;margin:0 0 8px;}
.hero-txt p{font-size:14px;color:#cfe0ea;margin:0 0 14px;max-width:340px;}
.btn{display:inline-block;background:#f1a500;color:#fff;font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;padding:11px 22px;border-radius:8px;}
.hero-visual{flex:1;height:160px;background:linear-gradient(135deg,#0d4a67,#1a6788);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#8ec6e6;font-size:11px;}
.section{padding:8px 32px;}
.section h2{font-family:'Montserrat',sans-serif;color:#03354c;font-size:18px;font-weight:600;margin:0 0 10px;border-bottom:3px solid #f1a500;padding-bottom:6px;display:inline-block;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px;}
.card{background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:10px;position:relative;}
.imgbox{aspect-ratio:4/3;height:70px;background:#f5f5f5;border-radius:8px;margin-bottom:6px;display:flex;align-items:center;justify-content:center;color:#757575;font-size:9px;text-align:center;}
.badge{position:absolute;top:8px;left:8px;background:#395663;color:#fff;font-family:'Montserrat',sans-serif;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:4px;}
.pname{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;margin:2px 0 2px;color:#03354c;}
.price{font-size:15px;font-weight:700;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#03354c;color:#5cbceb;padding:12px 32px;display:flex;justify-content:space-between;font-size:11px;}
</style>
<div class="announce">Free shipping on orders over $50</div>
<div class="nav">
<div class="logo">Home Science Tools</div>
<div class="navlinks"><span>Chemistry</span><span>Biology</span><span>Physics</span><span>Earth Science</span></div>
<div class="searchpill">Search by grade or kit<span class="dot">⌕</span></div>
</div>
<div class="hero">
<div class="hero-txt">
<h1>Real science kits<br>for every grade.</h1>
<p>Dissection kits, microscopes, and curriculum-ready experiments for homeschool families.</p>
<div class="btn">Browse by Grade</div>
</div>
<div class="hero-visual">LAB EQUIPMENT PHOTOGRAPHY</div>
</div>
<div class="section">
<h2>Featured Kits</h2>
<div class="grid">
<div class="card"><div class="badge">Grades 3–8</div><div class="imgbox">Microscope</div><div class="pname">Student Compound Microscope</div><div class="price">$149.00</div></div>
<div class="card"><div class="badge">Grades 6–12</div><div class="imgbox">Dissection Kit</div><div class="pname">Complete Dissection Kit</div><div class="price">$34.00</div></div>
<div class="card"><div class="badge">Grades K–5</div><div class="imgbox">Rock Set</div><div class="pname">Earth Science Rock & Mineral Set</div><div class="price">$22.00</div></div>
<div class="card"><div class="badge">Grades 9–12</div><div class="imgbox">Chem Set</div><div class="pname">Advanced Chemistry Refill Kit</div><div class="price">$59.00</div></div>
</div>
</div>
<div class="footer"><span>© Home Science Tools</span><span>Shop · Resources · About · Contact</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #92fa72; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #92fa72; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #4b7a3d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #92fa72; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #92fa72; color: #111111;
border: 1px solid #7dd562; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4b7a3d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #89e286; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family: "Pretendard", -apple-system, "Segoe UI", Arial, sans-serif; }
* { box-sizing:border-box; }
.header { width:960px; height:56px; background:#212224; display:flex; align-items:center;
justify-content:space-between; padding:0 24px; }
.brand { color:#ffffff; font-size:18px; font-weight:700; }
.search-shell { width:360px; height:36px; background:#ffffff; border-radius:24px; display:flex;
align-items:center; padding:0 16px; color:#555969; font-size:13px; }
.header-action { background:#92fa72; color:#212224; font-size:13px; font-weight:500; border-radius:8px;
padding:8px 16px; }
.stage { width:960px; height:584px; display:flex; }
.main { flex:1; height:584px; padding:24px 28px; overflow:hidden; }
.crumbs { font-size:12px; color:#555969; margin-bottom:10px; }
.gig-title { font-size:22px; font-weight:700; color:#212224; line-height:1.3; margin-bottom:12px; max-width:520px; }
.seller-row { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.avatar { width:38px; height:38px; border-radius:9999px; background:linear-gradient(135deg,#9be89a,#3fae5e); }
.seller-name { font-size:14px; font-weight:700; color:#212224; }
.seller-meta { font-size:12px; color:#555969; }
.rating-inline { font-size:12px; color:#212224; margin-left:auto; }
.rating-inline b { color:#212224; }
.cover { width:100%; height:200px; border-radius:12px; margin-bottom:18px; position:relative; overflow:hidden;
background: linear-gradient(135deg, #d7ffce 0%, #92fa72 55%, #3fae5e 100%); }
.cover::after { content:""; position:absolute; inset:0;
background: radial-gradient(circle at 20% 80%, rgba(0,0,0,0.12), transparent 40%); }
.section-title { font-size:15px; font-weight:700; color:#212224; margin:0 0 8px; }
.desc { font-size:14px; font-weight:400; color:#333333; line-height:1.55; margin-bottom:16px; max-width:540px; }
.include-row { display:flex; gap:8px; font-size:13px; color:#333333; margin-bottom:6px; align-items:flex-start; }
.check { color:#3fae5e; font-weight:700; margin-top:1px; }
.side { width:300px; height:584px; border-left:1px solid #e4e5ed; padding:20px 20px; display:flex; flex-direction:column; }
.pkg-tabs { display:flex; border:1px solid #e4e5ed; border-radius:8px; overflow:hidden; margin-bottom:16px; }
.pkg-tab { flex:1; text-align:center; padding:9px 0; font-size:13px; font-weight:500; color:#555969;
background:#fafafc; }
.pkg-tab.active { background:#212224; color:#ffffff; font-weight:700; }
.pkg-title { font-size:16px; font-weight:700; color:#212224; margin-bottom:4px; }
.pkg-price { font-size:24px; font-weight:700; color:#212224; margin-bottom:12px; }
.pkg-desc { font-size:13px; color:#555969; margin-bottom:14px; line-height:1.5; }
.feature-row { display:flex; justify-content:space-between; font-size:13px; color:#333333; padding:7px 0;
border-bottom:1px solid #f2f3f7; }
.feature-row .fv { font-weight:700; color:#212224; }
.continue-btn { margin-top:auto; background:#92fa72; color:#212224; height:52px; border-radius:4px;
display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:500; }
</style></head>
<body>
<div class="header">
<div class="brand">Kmong</div>
<div class="search-shell">Search for a service…</div>
<div class="header-action">Sign In</div>
</div>
<div class="stage">
<div class="main">
<div class="crumbs">Home / Design & Branding / Logo Design</div>
<div class="gig-title">I will design a modern minimalist logo for your brand</div>
<div class="seller-row">
<div class="avatar"></div>
<div>
<div class="seller-name">Jamie Park</div>
<div class="seller-meta">Level 2 Seller · Joined 2023</div>
</div>
<div class="rating-inline"><b>★ 4.9</b> (1,082 orders)</div>
</div>
<div class="cover"></div>
<div class="section-title">About This Service</div>
<div class="desc">A clean, distinctive logo package built for startups and small businesses — three initial
concepts, unlimited revisions on the chosen direction, and final files ready for print and web.</div>
<div class="section-title">What's Included</div>
<div class="include-row"><span class="check">✓</span><span>3 initial logo concepts</span></div>
<div class="include-row"><span class="check">✓</span><span>Source files (AI, EPS, SVG, PNG)</span></div>
<div class="include-row"><span class="check">✓</span><span>Brand color palette guide</span></div>
</div>
<div class="side">
<div class="pkg-tabs">
<div class="pkg-tab">Basic</div>
<div class="pkg-tab active">Standard</div>
<div class="pkg-tab">Premium</div>
</div>
<div class="pkg-title">Standard Package</div>
<div class="pkg-price">₩180,000</div>
<div class="pkg-desc">2 concepts, 3 revisions, full source files, and a one-page brand guide.</div>
<div class="feature-row"><span>Delivery Time</span><span class="fv">3 days</span></div>
<div class="feature-row"><span>Revisions</span><span class="fv">3</span></div>
<div class="feature-row"><span>Source Files</span><span class="fv">Included</span></div>
<div class="feature-row"><span>Brand Guide</span><span class="fv">Included</span></div>
<div class="continue-btn">Continue (₩180,000)</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FAF7F4; color: #1C1410;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FAF7F4; color: #1C1410;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #1C1410; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #7A6255; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #6B3D1E; color: #FFFFFF;
border: none; border-radius: 8px; padding: 13px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #FAF7F4; color: #6B3D1E;
border: 1px solid #6B3D1E; border-radius: 8px;
padding: 12px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FAF7F4; color: #1C1410;
border: 1px solid #c2bebb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7A6255; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; background: #EDE0D0; color: #6B3D1E;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#faf7f4; font-family:'Helvetica Neue',Arial,sans-serif; color:#1c1410;
}
*{box-sizing:border-box;}
.nav{height:64px; background:#fff; display:flex; align-items:center; padding:0 30px; border-bottom:1px solid #eee0d5;}
.logo{font-family:Georgia,'Times New Roman',serif; font-size:22px; color:#6b3d1e;}
.navlinks{display:flex; gap:22px; margin-left:36px; font-size:13px; color:#5a4c3e;}
.navcta{margin-left:auto; background:#3b5e45; color:#fff; padding:10px 20px; border-radius:8px; font-size:12px; font-weight:600;}
.hero{display:flex; align-items:center; gap:32px; padding:24px 30px;}
.heroText{flex:1;}
.heroText .eyebrow{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#3b5e45; font-weight:700; margin-bottom:10px;}
.heroText h1{font-family:Georgia,'Times New Roman',serif; font-size:32px; line-height:1.25; margin:0 0 12px; max-width:400px; color:#1c1410;}
.heroText p{font-size:13.5px; color:#5a4c3e; line-height:1.55; max-width:380px; margin:0 0 16px;}
.heroBtn{display:inline-block; background:#6b3d1e; color:#fff; padding:12px 26px; border-radius:8px; font-size:12px; font-weight:600;}
.heroImg{width:250px; height:170px; border-radius:8px; background:linear-gradient(150deg,#6b3d1e,#1c1410); flex-shrink:0; position:relative;}
.heroImg::before{content:''; position:absolute; left:14px; right:14px; top:14px; bottom:14px; border:1px solid rgba(255,255,255,.25);}
.section{padding:14px 30px 0;}
.sectitle{font-family:Georgia,serif; font-size:19px; margin:0 0 12px; color:#1c1410;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.card{background:#fff; border-radius:8px; padding:8px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.05); position:relative;}
.thumb{height:78px; border-radius:6px; margin-bottom:8px;}
.t1{background:linear-gradient(135deg,#6b3d1e,#a4703f);}
.t2{background:linear-gradient(135deg,#3b5e45,#6f9c7c);}
.t3{background:linear-gradient(135deg,#8a5a2e,#6b3d1e);}
.t4{background:linear-gradient(135deg,#1c1410,#4a3524);}
.badge{position:absolute; top:5px; left:5px; background:#3b5e45; color:#fff; font-size:8px; font-weight:700; padding:2px 6px; border-radius:4px;}
.pname{font-size:12px; font-weight:600; margin-bottom:3px;}
.pprice{font-size:12px; color:#6b3d1e; font-weight:700;}
.footer{position:absolute; bottom:0; left:0; right:0; background:#2a221b; color:#c9baa8; font-size:10px; text-align:center; padding:8px 0;}
</style>
<div class="nav">
<div class="logo">Heartwood</div>
<div class="navlinks"><span>Storage Systems</span><span>Filing</span><span>Workstations</span><span>Specs</span></div>
<div class="navcta">Request a Quote</div>
</div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">Built for Decades</div>
<h1>Office Storage That Ages Like Walnut</h1>
<p>Canadian-manufactured filing and storage systems engineered for institutional durability and quiet good taste.</p>
<div class="heroBtn">Get a Spec Sheet</div>
</div>
<div class="heroImg"></div>
</div>
<div class="section">
<div class="sectitle">Core Product Lines</div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="badge">New</span></div><div class="pname">Grove Lateral File</div><div class="pprice">$1,240</div></div>
<div class="card"><div class="thumb t2"></div><div class="pname">Canopy Shelving Unit</div><div class="pprice">$980</div></div>
<div class="card"><div class="thumb t3"><span class="badge">Bestseller</span></div><div class="pname">Timberline Credenza</div><div class="pprice">$1,650</div></div>
<div class="card"><div class="thumb t4"></div><div class="pname">Heartwood Locker Set</div><div class="pprice">$2,100</div></div>
</div>
</div>
<div class="footer">© Heartwood — Manufacturing Ltd., Ontario, Canada</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #003268; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #003268; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #879db6; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c8102e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #003268; color: #ffffff;
border: 1px solid #c8102e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #003268; color: #f5f5f5;
border: 1px solid #27517f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #879db6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #202d5f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#0B1320; color:#E8ECF3; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; padding:26px 40px; display:flex; gap:36px; }
.left { width:520px; }
.header { display:flex; align-items:center; justify-content:space-between; }
.header .lbl { font-size:11px; font-weight:700; letter-spacing:0.6pt; color:#8FB4DD; text-transform:uppercase; }
.header .val { font-size:13px; font-weight:700; margin-top:4px; }
.timeline { margin-top:26px; background:#131C2B; border-radius:16px; padding:20px; }
.timeline h3 { font-size:13px; font-weight:700; margin:0 0 16px; }
.step { display:flex; gap:12px; padding-bottom:16px; position:relative; }
.step:last-child { padding-bottom:0; }
.rail { display:flex; flex-direction:column; align-items:center; }
.dot { width:12px; height:12px; border-radius:50%; }
.dot.done { background:#1E8E5A; box-shadow:0 0 0 2px rgba(30,142,90,0.3); }
.dot.now { background:#0F4C9A; box-shadow:0 0 0 2px rgba(15,76,154,0.4); }
.dot.up { background:#5F6E88; box-shadow:0 0 0 2px rgba(95,110,136,0.3); }
.bar { width:2px; flex:1; background:#25314A; margin-top:2px; }
.steplabel .t { font-size:13px; font-weight:700; }
.steplabel .m { font-size:12px; color:#9AA6BC; margin-top:2px; }
.right { width:340px; }
.pass { background:#131C2B; border-radius:18px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,0.55); }
.strip { height:6px; background:linear-gradient(90deg,#003268,#C8102E); }
.passbody { padding:18px 18px 0; }
.plbl { font-size:10px; font-weight:700; letter-spacing:0.6pt; color:#9AA6BC; text-transform:uppercase; }
.pname { font-size:18px; font-weight:700; text-transform:uppercase; margin-top:4px; }
.grid3 { display:flex; margin-top:18px; }
.cell { flex:1; }
.cell .cl { font-size:10px; font-weight:700; letter-spacing:0.6pt; color:#9AA6BC; text-transform:uppercase; }
.cell .cv { font-size:22px; font-weight:800; margin-top:4px; }
.cell .cv.gold { color:#C99700; }
.zone { margin:18px 18px 0; background:#1C2738; border-radius:10px; padding:10px 14px; font-size:14px; font-weight:800; }
.barcode { margin:16px 0 0; height:56px; background:repeating-linear-gradient(90deg,#E8ECF3 0 2px, transparent 2px 5px, #E8ECF3 5px 7px, transparent 7px 12px); }
.route { margin-top:26px; text-align:center; }
.iata { font-size:34px; font-weight:800; letter-spacing:-0.5pt; display:flex; align-items:center; justify-content:center; gap:18px; }
.plane { font-size:18px; color:#8FB4DD; }
.subrow { display:flex; justify-content:space-between; margin-top:8px; font-size:12px; color:#8FB4DD; }
.statuspill { display:inline-block; margin-top:14px; padding:6px 14px; border-radius:999px; background:rgba(30,142,90,0.12); color:#1E8E5A; font-size:12px; font-weight:700; }
</style>
</head>
<body>
<div class="stage">
<div class="left">
<div class="header"><div><div class="lbl">Today · DL 1248</div><div class="val">ATL → JFK</div></div><span class="statuspill">On Time</span></div>
<div class="route">
<div class="iata">ATL <span class="plane">✈</span> JFK</div>
<div class="subrow"><span>Gate B16 · 10:42 AM</span><span>Seat 14C · 1:02 PM</span></div>
</div>
<div class="timeline">
<h3>Flight Status</h3>
<div class="step"><div class="rail"><div class="dot done"></div><div class="bar"></div></div><div class="steplabel"><div class="t">Departed ATL — On Time</div><div class="m">Gate B16 · 10:42 AM EDT</div></div></div>
<div class="step"><div class="rail"><div class="dot now"></div><div class="bar"></div></div><div class="steplabel"><div class="t">In Air — Cruising</div><div class="m">35,000 ft · Est. arrival 1:02 PM EDT</div></div></div>
<div class="step"><div class="rail"><div class="dot up"></div></div><div class="steplabel"><div class="t" style="color:#5F6E88">Arrive JFK</div><div class="m">Terminal 4 · Baggage Carousel 7</div></div></div>
</div>
</div>
<div class="right">
<div class="pass">
<div class="strip"></div>
<div class="passbody">
<div style="font-size:11px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:#8FB4DD;margin-bottom:6px;">Delta (iOS)</div>
<div class="plbl">Passenger</div>
<div class="pname">M. Rodriguez</div>
<div class="grid3">
<div class="cell"><div class="cl">Gate</div><div class="cv">B16</div></div>
<div class="cell"><div class="cl">Seat</div><div class="cv">14C</div></div>
<div class="cell"><div class="cl">Group</div><div class="cv gold">Zone 2</div></div>
</div>
<div class="zone">Boards 10:12 AM · SKY PRIORITY</div>
</div>
<div class="barcode"></div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffff99; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffff99; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; background: #0000ff; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; background: #ff9933; color: #000000;
border: 1px solid #0000ff; border-radius: 4px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #000000;
border: 1px solid #bfbf73; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; background: #ffff00; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffff99; color:#000000; box-sizing:border-box;
font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; }
* { box-sizing:border-box; }
a.l { color:#0000ff; font-weight:bold; text-decoration:none; }
a.l:hover { text-decoration:underline; }
.topbar { background:#ffff99; padding:6px 16px; font-size:11px; color:#333; border-bottom:1px solid #cccccc;
display:flex; justify-content:space-between; }
.topbar a.l { font-weight:normal; text-decoration:underline; }
nav.catnav { background:#ffff99; padding:8px 16px; border-bottom:1px solid #cccccc; font-size:13px; font-weight:bold; }
nav.catnav span { color:#0000ff; }
nav.catnav span.sep { color:#000; font-weight:normal; margin:0 6px; }
.searchrow { background:#ffffa0; padding:8px 16px; border-bottom:1px solid #cccccc; display:flex; gap:8px; align-items:center; }
.searchrow input { width:260px; height:22px; background:#ffff99; border:1px solid #0000ff; font-size:12px; padding:2px 6px; }
.searchrow button { height:24px; background:#0000ff; color:#fff; border:none; font-weight:bold; font-size:12px; border-radius:4px; padding:0 12px; }
.breadcrumb { padding:8px 16px 0; font-size:11px; color:#333; }
main { display:flex; padding:10px 16px; gap:16px; height:calc(640px - 30px - 34px - 34px - 20px - 8px); }
.stage { width:300px; background:#ffffff; border:1px solid #cccccc; padding:10px; position:relative; }
.figbox { position:relative; height:280px; display:flex; align-items:center; justify-content:center; }
.fig { position:relative; width:110px; height:220px; }
.fig .head { width:46px; height:46px; border-radius:50%; background:#f0c9a0; margin:0 auto; position:relative; z-index:2; }
.fig .hair { position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:60px; height:38px;
background:#2244aa; border-radius:50% 50% 0 0; z-index:1; }
.fig .body { width:70px; height:100px; background:linear-gradient(180deg,#ff3333,#cc0000); margin:0 auto;
border-radius:10px 10px 4px 4px; }
.fig .legs { width:60px; height:70px; background:#1a1a2e; margin:0 auto; border-radius:0 0 6px 6px; }
.fig .base { width:100px; height:12px; background:#333; border-radius:50%; margin:4px auto 0; }
.badge-new { position:absolute; top:8px; left:8px; background:#ffff00; color:#000; font-size:11px; font-weight:bold;
border-radius:4px; padding:2px 6px; border:1px solid #cccc00; }
.badge-sale { position:absolute; top:8px; right:8px; background:#ff0000; color:#fff; font-size:11px; font-weight:bold;
border-radius:4px; padding:2px 6px; }
.thumbs { display:flex; gap:6px; margin-top:10px; }
.thumb { width:52px; height:52px; background:#ffffa0; border:1px solid #cccccc; }
.thumb.active { border:2px solid #0000ff; }
.info { flex:1; background:#ffffff; border:1px solid #cccccc; padding:14px 18px; overflow:hidden; }
h1 { font-size:20px; margin:0 0 6px; color:#0000ff; }
.sku { font-size:11px; color:#666; margin-bottom:8px; }
.stars { font-size:13px; color:#ff9933; margin-bottom:8px; }
.stars span.n { color:#666; font-size:11px; margin-left:6px; }
.price-row { margin-bottom:12px; }
.price { font-size:20px; font-weight:bold; color:#ff9933; }
.was { font-size:12px; color:#999; text-decoration:line-through; margin-left:8px; }
p.desc { font-size:13px; line-height:1.5; color:#333; margin:0 0 12px; }
table.spec { width:100%; border-collapse:collapse; margin-bottom:14px; }
table.spec td { border:1px solid #e0e0e0; font-size:11px; padding:4px 8px; }
table.spec td.k { background:#ffffa0; font-weight:bold; width:110px; }
.opt-label { font-size:11px; font-weight:bold; margin-bottom:6px; }
.variants { display:flex; gap:6px; margin-bottom:14px; }
.variant { border:1px solid #cccccc; background:#ffffa0; font-size:11px; padding:5px 10px; font-weight:bold; }
.variant.active { border:2px solid #0000ff; background:#ffff00; }
.cta-row { display:flex; gap:8px; }
.btn-primary { background:#0000ff; color:#fff; border:none; border-radius:4px; padding:8px 20px; font-size:13px; font-weight:bold; }
.btn-secondary { background:#ff9933; color:#fff; border:none; border-radius:4px; padding:8px 20px; font-size:13px; font-weight:bold; }
footer { border-top:1px solid #cccccc; padding:6px 16px; font-size:11px; color:#666; display:flex; justify-content:space-between; }
</style></head>
<body>
<div class="topbar"><span>Welcome to Anime Corner Store — over 40,000 items in stock</span>
<span><a class="l" href="#">Sign In</a> | <a class="l" href="#">Register</a> | <a class="l" href="#">Order Status</a></span></div>
<nav class="catnav">
<span>Figurines</span><span class="sep">|</span><span>DVDs</span><span class="sep">|</span>
<span>Soundtracks</span><span class="sep">|</span><span>Apparel</span><span class="sep">|</span>
<span>Manga</span><span class="sep">|</span><span>Books</span><span class="sep">|</span><span>Collectibles</span>
</nav>
<div class="searchrow">
<input type="text" value="mecha figure" />
<button>Search</button>
<span style="font-size:11px;color:#333;">42,118 items in catalog</span>
</div>
<div class="breadcrumb"><a class="l" href="#">Home</a> > <a class="l" href="#">Figurines</a> > <a class="l" href="#">Scale Figures</a></div>
<main>
<div class="stage">
<div class="figbox">
<div class="badge-new">NEW</div>
<div class="badge-sale">SALE</div>
<div class="fig">
<div class="hair"></div>
<div class="head"></div>
<div class="body"></div>
<div class="legs"></div>
<div class="base"></div>
</div>
</div>
<div class="thumbs"><div class="thumb active"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<h1>Crimson Blade Warrior 1/7 Scale Figure</h1>
<div class="sku">Item #ACS-77451 · Manufacturer: Nagoya Studio</div>
<div class="stars">★★★★☆ <span class="n">(318 reviews)</span></div>
<div class="price-row"><span class="price">$84.99</span><span class="was">$99.99</span></div>
<p class="desc">Pre-painted PVC scale figure with interchangeable hands and display base. Officially licensed, limited production run — ships in original window box.</p>
<table class="spec">
<tr><td class="k">Scale</td><td>1/7</td></tr>
<tr><td class="k">Height</td><td>24 cm</td></tr>
<tr><td class="k">Material</td><td>PVC / ABS</td></tr>
</table>
<div class="opt-label">Version</div>
<div class="variants">
<span class="variant active">Standard Ver.</span>
<span class="variant">Limited Ver.</span>
<span class="variant">Pre-Order (Dec)</span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Pre-Order</button>
</div>
</div>
</main>
<footer><span>© Anime Corner Store</span><span><a class="l" href="#">About Us</a> | <a class="l" href="#">Site Help</a> | <a class="l" href="#">Privacy Policy</a> | <a class="l" href="#">Contact</a></span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf8f4; color: #212225;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf8f4; color: #212225;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #212225; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.55; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #314438; color: #ffffff;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #faf8f4; color: #314438;
border: 1px solid #314438; border-radius: 6px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.6; background: #faf8f4; color: #212225;
border: 1px solid #c4c2c0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: 1.2px; background: #f3eeea; color: #314438;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#faf8f4; color:#212225; box-sizing:border-box;
font-family:'Quicksand', sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:'Georgia', serif; }
.promo { height:34px; background:#da5f4d; color:#fff; display:flex; align-items:center; justify-content:center;
font-size:12px; font-weight:600; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; border-bottom:1px solid #d3d2d0; }
.brand { color:#314438; font-size:19px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; color:#212225; }
.btn-primary { background:#314438; color:#fff; border:none; border-radius:6px; padding:11px 22px; font-size:14px; font-weight:700; }
.trust { height:40px; background:#314438; color:#fff; display:flex; align-items:center; justify-content:center; gap:24px; font-size:13px; }
.hero { display:flex; align-items:center; padding:22px 36px; gap:30px; }
.hero-copy { flex:1.1; }
.stamp { font-size:12px; font-weight:400; letter-spacing:1.5px; text-transform:uppercase; color:#314438; margin-bottom:8px; display:block; }
.hero h1 { font-family:Georgia,serif; font-size:30px; font-weight:600; line-height:1.15; margin:0 0 10px; }
.hero p { font-size:14px; color:#4b4e53; line-height:1.5; margin:0 0 14px; max-width:380px; }
.hero-visual { flex:0.9; height:170px; border-radius:6px; background:linear-gradient(160deg,#9fb59e,#314438); position:relative; }
.hero-visual::before { content:''; position:absolute; left:30px; top:30px; width:160px; height:90px; background:#faf8f4; border-radius:6px; opacity:0.9; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:14px 36px 20px; }
.card { background:#f9f9f9; border-radius:6px; padding:12px; }
.card .imgbox { aspect-ratio:3/2; height:70px; background:#f3eeea; border-radius:6px; margin-bottom:8px; }
.card h3 { font-size:15px; font-weight:700; margin:0 0 3px; }
.card .price { font-family:Georgia,serif; font-size:16px; font-weight:600; }
.cat-tag { display:inline-block; background:#f3eeea; color:#314438; font-size:10px; font-weight:400; text-transform:uppercase;
letter-spacing:0.8px; padding:2px 8px; border:1px solid #d6dad7; border-radius:4px; margin-bottom:6px; }
footer { background:#272d45; color:#fff; padding:14px 36px; display:flex; justify-content:space-between;
align-items:center; font-size:12px; }
footer span:last-child { color:#d6dad7; }
</style></head>
<body>
<div class="promo">30-Day Home Trial · Free Shipping</div>
<nav>
<p class="brand">Branch Furniture</p>
<div class="navlinks"><span>Desks</span><span>Storage</span><span>Lighting</span></div>
<button class="btn-primary">Configure Your Desk</button>
</nav>
<div class="trust">
<span>Free Shipping</span><span>30-Day Home Trial</span><span>Lifetime Warranty</span>
</div>
<section class="hero">
<div class="hero-copy">
<span class="stamp">The Home Office Desk</span>
<h1>Standing desks built for the room you work in</h1>
<p>Configure dimensions, finish, and add-on shelving — furniture designed to look right in a home, not a cubicle.</p>
<button class="btn-primary">Configure Your Desk</button>
</div>
<div class="hero-visual"></div>
</section>
<section class="grid">
<div class="card"><div class="imgbox"></div><span class="cat-tag">Standing Desk</span><h3>The Adjustable Desk</h3><div class="price">$598</div></div>
<div class="card"><div class="imgbox"></div><span class="cat-tag">Storage</span><h3>Filing Cabinet</h3><div class="price">$298</div></div>
<div class="card"><div class="imgbox"></div><span class="cat-tag">Lighting</span><h3>Task Lamp</h3><div class="price">$98</div></div>
</section>
<footer>
<span>© Branch Furniture</span>
<span>As seen in Wired · Lifetime Warranty</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #002a53;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #002a53;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #002a53; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.25; margin: 0; color: #80888d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #31c3f0; color: #000000;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #002a53;
border: 1px solid #31c3f0; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #002a53;
border: 1px solid #d1d1d1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #80888d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.25; background: #eafaff; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#002a53; box-sizing:border-box;
font-family:'Poppins',system-ui,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e8ecee; }
.brand { font-size:18px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:15px; font-weight:500; color:#002a53; }
.util { font-size:13px; color:#59636a; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 72px); }
.stage { padding:26px; display:flex; flex-direction:column; gap:12px; background:#f1f6f8; }
.crumb { font-size:11px; color:#80888d; }
.pan { flex:1; border-radius:12px; background:#eafaff; box-shadow:0 2px 8px rgba(0,42,83,0.08); position:relative; overflow:hidden; }
.pan::before { content:''; position:absolute; left:50%; top:50%; width:130px; height:210px; transform:translate(-50%,-50%); border-radius:16px 16px 60px 60px;
background:linear-gradient(180deg,#31c3f0,#113993 85%); box-shadow:0 18px 30px rgba(0,42,83,0.16); }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; border-radius:8px; background:#eafaff; }
.info { padding:24px 34px; display:flex; flex-direction:column; gap:11px; overflow:hidden; }
.cat { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#31c3f0; }
h1 { margin:0; font-size:28px; font-weight:700; line-height:1.25; letter-spacing:-0.2px; }
.rating { display:flex; align-items:center; gap:8px; font-size:12px; color:#80888d; }
.stars { color:#fc7702; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:700; }
.badge-eco { background:#48cd3f; color:#fff; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border-radius:9999px; }
.desc { font-size:14px; color:#59636a; line-height:1.57; }
.checker { background:#ffffff; border:1px solid #e8ecee; border-radius:20px; box-shadow:0 4px 24px rgba(0,42,83,0.06); padding:12px 16px; font-size:13px; color:#002a53; }
.checker b { color:#31c3f0; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#31c3f0; color:#fff; border:none; height:48px; font-size:16px; font-weight:600; letter-spacing:0.3px; border-radius:8px; }
.btn-secondary { width:170px; background:#ffffff; border:2px solid #002a53; color:#002a53; height:48px; font-size:16px; font-weight:600; border-radius:8px; }
</style></head>
<body>
<nav>
<p class="brand">Brita</p>
<div class="navlinks"><span>Pitchers</span><span>Filters</span><span>Bottles</span><span>Find My Filter</span></div>
<div class="util">Search Account Cart (1)</div>
</nav>
<main>
<div class="stage">
<div class="crumb">Brita / Pitchers / Elite</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Elite Filtration</span>
<h1>Elite Filter Pitcher, 10-Cup</h1>
<div class="rating"><span class="stars">★★★★★</span> 4.7 · 12,904 reviews</div>
<div class="price-row"><span class="price">$44.99</span><span class="badge-eco">Longevity</span></div>
<p class="desc">Reduces 99% of lead plus 30 additional contaminants, providing cold, filtered water that lasts up to 6 months per filter.</p>
<div class="checker">Not sure it fits? <b>Find a Filter →</b> compatibility checker</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compare Models</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #111111; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #111111; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #0099e5; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #272727; color: #fafafa;
border: 1px solid #0099e5; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1e1e1e; color: #fafafa;
border: 1px solid #111111; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #0099e5; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Kali Audio Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Montserrat',Arial,Helvetica,'Helvetica Neue',sans-serif; background:#111111; color:#fafafa; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#111111;}
.logo{font-weight:700;font-size:19px;color:#fafafa;letter-spacing:.5px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;}
.navlinks .active{color:#0099e5;}
.search{width:170px;height:36px;background:#1e1e1e;border-radius:8px;border:1px solid #272727;font-size:12px;color:#aaaaaa;line-height:36px;padding:0 12px;}
.hero{padding:26px 36px;text-align:center;}
.hero h1{font-size:32px;font-weight:700;letter-spacing:-.4px;line-height:1.2;margin:0 0 10px;}
.hero p{font-size:14px;color:#cccccc;max-width:460px;margin:0 auto 16px;}
.btn{display:inline-block;background:#0099e5;color:#fff;padding:12px 26px;border-radius:8px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px 36px;}
.card{background:#272727;border-radius:8px;padding:14px;}
.imgbox{background:#1e1e1e;border-radius:8px;height:96px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#0099e5;color:#fff;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:4px;}
.badge.sale{background:#f94877;}
.title{font-size:14px;font-weight:500;margin-top:10px;}
.price{font-size:13px;color:#aaaaaa;margin-top:3px;}
</style>
<div class="nav">
<div class="logo">Kali Audio</div>
<div class="navlinks"><span class="active">Monitors</span><span>Subwoofers</span><span>Accessories</span><span>Support</span></div>
<div class="search">Search monitors…</div>
</div>
<div class="hero">
<h1>Studio monitors,<br>engineered for accuracy.</h1>
<p>Precision-tuned reference monitors trusted by producers and mix engineers around the world.</p>
<div class="btn">Shop Monitors</div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#2a2a2a,#0099e5);"><div class="badge">New</div></div>
<div class="title">Kali Audio LP-6 V2</div>
<div class="price">$149.00</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#2a2a2a,#3a3a3a);"><div class="badge sale">Sale</div></div>
<div class="title">Kali Audio LP-8 V2</div>
<div class="price">$219.00</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#2a2a2a,#4a4a4a);"></div>
<div class="title">Kali Audio WS-12 Subwoofer</div>
<div class="price">$399.00</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#2a2a2a,#5a5a5a);"></div>
<div class="title">Kali Audio IN-8 V2</div>
<div class="price">$279.00</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #1990c6; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #1990c6;
border: 1px solid #1990c6; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #1990c6; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Source Sans Pro','Helvetica Neue',Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e8e8e8;}
.logo{font-size:19px;font-weight:600;color:#1a1a1a;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;color:#666;}
.navlinks span:first-child{color:#1990c6;}
.hero{height:210px;display:flex;flex-direction:column;justify-content:center;padding:0 32px;}
.h1{font-size:34px;font-weight:600;letter-spacing:-0.5px;color:#1a1a1a;margin:0 0 10px;line-height:1.2;}
.sub{font-size:16px;color:#333;line-height:1.5;margin:0 0 18px;max-width:440px;}
.btn{display:inline-block;background:#1990c6;color:#fff;font-size:16px;font-weight:600;padding:13px 30px;border-radius:9999px;width:fit-content;}
.quizsec{padding:0 32px;}
.quizq{font-size:18px;font-weight:600;color:#1a1a1a;margin-bottom:12px;}
.progtrack{height:4px;background:#e0e0e0;border-radius:9999px;margin-bottom:16px;}
.progfill{height:4px;width:60%;background:#1990c6;border-radius:9999px;}
.qcards{display:flex;gap:12px;}
.qcard{flex:1;background:#fff;border:1px solid #d0d0d0;border-radius:8px;padding:14px;font-size:14px;text-align:center;}
.qcard.sel{border:2px solid #1990c6;background:#f5f7f8;color:#1990c6;font-weight:600;}
.grid{display:flex;gap:16px;padding:20px 32px 0;}
.card{width:150px;background:#fff;border:1px solid #e8e8e8;border-radius:8px;padding:10px;}
.thumb{height:90px;border-radius:4px;background:linear-gradient(135deg,#a0d4eb,#1990c6);margin-bottom:6px;}
.ctitle{font-size:13px;font-weight:600;}
.cprice{font-size:14px;font-weight:600;margin-top:4px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Modern Fertility</div>
<div class="navlinks"><span>Fertility Test</span><span>Hormone Health</span><span>Learn</span></div>
</div>
<div class="hero">
<div class="h1">Know your fertility, clearly.</div>
<p class="sub">Evidence-based hormone testing built around a calm, unclouded interface.</p>
<div class="btn">Start the Quiz</div>
</div>
<div class="quizsec">
<div class="quizq">Are you currently tracking your cycle?</div>
<div class="progtrack"><div class="progfill"></div></div>
<div class="qcards">
<div class="qcard sel">Yes, regularly</div>
<div class="qcard">Sometimes</div>
<div class="qcard">Not yet</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ctitle">Fertility Test Kit</div><div class="cprice">$159</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Ovulation Test Kit</div><div class="cprice">$49</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Hormone Panel</div><div class="cprice">$189</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #e87722; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #e87722;
border: 1px solid #e87722; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #e87722; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Manrope',Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.header{height:82px;background:#1c2b3a;display:flex;flex-direction:column;justify-content:center;padding:0 32px;}
.toprow{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.logo{font-family:'Ysabeau',Georgia,serif;font-size:20px;font-weight:600;color:#fff;letter-spacing:.3px;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:#cdd6de;}
.search{height:34px;background:#fff;border-radius:2px;display:flex;align-items:center;padding:0 14px;font-size:12px;color:#666;}
.catrow{background:#f5f5f5;height:38px;display:flex;align-items:center;gap:24px;padding:0 32px;border-bottom:1px solid #d6d6d6;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#1c2b3a;}
.sec{padding:18px 32px 0;}
.secTitle{font-family:'Ysabeau',Georgia,serif;font-size:20px;font-weight:600;color:#1a1a1a;margin-bottom:14px;}
.grid{display:flex;gap:12px;}
.card{width:224px;border:1px solid #d6d6d6;border-radius:2px;padding:10px;}
.thumb{height:82px;background:#f5f5f5;border-radius:2px;margin-bottom:8px;}
.partno{font-family:'Manrope',Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#444444;margin-bottom:3px;}
.ptitle{font-size:12px;font-weight:600;color:#1a1a1a;line-height:1.3;margin:0 0 6px;height:32px;overflow:hidden;}
.specrow{display:flex;justify-content:space-between;font-size:10px;color:#666;border-top:1px solid #ebebeb;padding-top:6px;margin-bottom:6px;}
.pprice{font-size:14px;font-weight:600;color:#e87722;}
</style>
<div class="header">
<div class="toprow">
<div class="logo">Thorlabs</div>
<div class="navlinks"><span>Photonics</span><span>Optomechanics</span><span>Spectroscopy</span><span>Microscopy</span></div>
</div>
<div class="search">Search by part number, e.g. "AC254-050-A"…</div>
</div>
<div class="catrow"><span>Lenses</span><span>Mirrors</span><span>Mounts</span><span>Lasers</span><span>Detectors</span><span>Stages</span></div>
<div class="sec">
<div class="secTitle">Frequently Ordered Parts</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="partno">AC254-050-A</div><div class="ptitle">Achromatic Doublet, f=50mm, AR Coated</div><div class="specrow"><span>Ø1"</span><span>350–700nm</span></div><div class="pprice">$132.00</div></div>
<div class="card"><div class="thumb"></div><div class="partno">PM4-M01</div><div class="ptitle">Kinematic Mirror Mount, Ø1" Optics</div><div class="specrow"><span>4 Screws</span><span>±4° Adj.</span></div><div class="pprice">$189.71</div></div>
<div class="card"><div class="thumb"></div><div class="partno">CLD1015</div><div class="ptitle">Compact Laser Diode Controller</div><div class="specrow"><span>1.5A Max</span><span>TEC Enabled</span></div><div class="pprice">$1,876.15</div></div>
<div class="card"><div class="thumb"></div><div class="partno">PDA36A2</div><div class="ptitle">Switchable Gain Si Photodetector</div><div class="specrow"><span>350–1100nm</span><span>10MHz BW</span></div><div class="pprice">$489.85</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #868a89; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #4efac0; color: #141414;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: transparent; color: #000000;
border: 1px solid #4efac0; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #141414;
border: 1px solid #c0c0c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #868a89; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ff5742; color: #fafafa;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#141414; color:#e8e8e8; font-family:'Inter',Arial,sans-serif;
}
*, *::before, *::after { box-sizing:border-box; }
.wrap{ position:relative; width:960px; height:640px; }
.nav{ height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#141414; border-bottom:1px solid #262626; }
.logo{ font-family:'Brown',Arial,sans-serif; font-size:19px; font-weight:600; color:#ffffff; }
.navlinks{ display:flex; gap:24px; }
.navlinks span{ font-size:12px; color:#c9c9c9; }
.navlinks span.active{ color:#4efac0; }
.cta{ font-size:12px; font-weight:600; color:#141414; background:#4efac0; padding:12px 22px; border-radius:999px; }
.hero{ height:232px; display:flex; align-items:center; padding:0 34px; gap:26px; }
.hero-text{ width:400px; }
.kicker{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#ff5742; margin-bottom:10px; }
.h1{ font-family:'Brown',Arial,sans-serif; font-size:30px; font-weight:500; line-height:1.2; color:#ffffff; margin-bottom:10px; }
.sub{ font-size:13px; line-height:1.55; color:#c9c9c9; max-width:330px; margin-bottom:16px; }
.btn{ font-size:13px; font-weight:600; color:#141414; background:#4efac0; padding:14px 26px; border-radius:999px; width:fit-content; }
.otc{ flex:1; height:180px; position:relative; }
.bottle{ position:absolute; left:190px; top:14px; width:60px; height:110px; border-radius:8px; background:linear-gradient(160deg,#0018ff,#1a1a1a); }
.bottle-cap{ position:absolute; left:198px; top:0px; width:44px; height:20px; background:#4efac0; border-radius:4px; }
.bottle2{ position:absolute; left:270px; top:34px; width:60px; height:90px; border-radius:8px; background:linear-gradient(160deg,#ff5742,#1a1a1a); }
.bottle2-cap{ position:absolute; left:278px; top:20px; width:44px; height:18px; background:#f5f5f5; border-radius:4px; }
.section-title{ padding:14px 34px 8px; font-size:15px; font-weight:600; color:#ffffff; }
.grid{ display:flex; gap:16px; padding:0 34px; }
.card{ width:200px; background:#fafafa; border-radius:8px; padding:12px; }
.card-img{ width:100%; height:78px; border-radius:8px; margin-bottom:8px; }
.card-title{ font-size:12px; font-weight:600; color:#1a1a1a; margin-bottom:2px; }
.card-note{ font-size:10px; color:#6b6b6b; margin-bottom:8px; }
.row{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-size:12px; font-weight:700; color:#1a1a1a; }
.tag{ font-size:9px; font-weight:600; text-transform:uppercase; color:#fff; padding:3px 9px; border-radius:999px; }
.tag.mint{ background:#0a9e78; }
.tag.coral{ background:#ff5742; }
.footer{ position:absolute; bottom:0; left:0; width:960px; height:52px; background:#0d0d0d; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.footer span{ font-size:10px; color:#9da1a0; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Higherdose Otc Well 2</div>
<div class="navlinks">
<span class="active">OTC Wellness</span>
<span>Supplements</span>
<span>Devices</span>
<span>Bundles</span>
</div>
<div class="cta">Shop OTC</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="kicker">Editorial, Not Loud</div>
<div class="h1">Over-the-counter wellness, held with restraint.</div>
<div class="sub">Coral and cyber-lime accents on a near-ink canvas — confident sizing, never shouting, for the everyday supplement aisle.</div>
<div class="btn">Shop Best Sellers</div>
</div>
<div class="otc">
<div class="bottle"></div>
<div class="bottle-cap"></div>
<div class="bottle2"></div>
<div class="bottle2-cap"></div>
</div>
</div>
<div class="section-title">OTC Best Sellers</div>
<div class="grid">
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#0018ff,#1a1a1a);"></div>
<div class="card-title">Magnesium Recovery</div>
<div class="card-note">30-Day Supply</div>
<div class="row"><span class="price">$34</span><span class="tag mint">Bestseller</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#ff5742,#1a1a1a);"></div>
<div class="card-title">Daily Recovery Gummies</div>
<div class="card-note">60 Count</div>
<div class="row"><span class="price">$28</span><span class="tag coral">New</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#4efac0,#1a1a1a);"></div>
<div class="card-title">Sleep Support Tincture</div>
<div class="card-note">Non-Habit Forming</div>
<div class="row"><span class="price">$42</span><span class="tag mint">Best Value</span></div>
</div>
</div>
<div class="footer">
<span>© HigherDOSE OTC Wellness</span>
<span>Ingredients · Shipping · Support</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0046ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0046ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87a6fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #005df9; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0046ff; color: #ffffff;
border: 1px solid #005df9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0046ff; color: #f5f5f5;
border: 1px solid #2762fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87a6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #004afe; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#24272d; box-sizing:border-box;
font-family:"Pretendard",sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 44px; }
.brand { font-size:20px; font-weight:700; margin:0; color:#0046ff; }
.navlinks { display:flex; gap:20px; }
.hero { position:relative; height:280px; background:linear-gradient(120deg,#0046ff,#005df9); display:flex;
flex-direction:column; justify-content:center; align-items:center; text-align:center; color:#ffffff; }
.hero h1 { font-size:38px; font-weight:700; margin:0 0 10px; }
.hero p { font-size:15px; opacity:0.85; margin:0 0 20px; }
.row { display:flex; gap:12px; }
.outl { background:rgba(0,93,249,0.3); border:1px solid #ffffff; color:#ffffff; border-radius:30px; padding:0 24px; height:48px; display:flex; align-items:center; font-size:16px; }
.dl { background:rgba(255,255,255,0.2); border:1px solid #ffffff; color:#ffffff; border-radius:30px; padding:0 24px; height:48px; display:flex; align-items:center; font-size:16px; }
.fsband { padding:26px 44px; }
.fsband h2 { font-size:20px; font-weight:700; margin:0 0 16px; }
.selectorrow { display:flex; gap:12px; }
.selector { background:#f3f6fb; color:#24272d; border-radius:24px; padding:0 20px; height:48px; display:flex; align-items:center; font-size:16px; }
</style></head>
<body>
<nav>
<p class="brand">Shinhan Bank</p>
<div class="navlinks" style="font-size:14px;color:#666;"><span>Personal Banking</span><span>Business Banking</span><span>Retirement</span></div>
</nav>
<section class="hero">
<h1>Easier, more comfortable, newer finance</h1>
<p>Making the world a better place through finance — Shinhan's next chapter</p>
<div class="row"><span class="outl">Services</span><span class="dl">Download the App</span></div>
</section>
<section class="fsband">
<h2>Family Site</h2>
<div class="selectorrow">
<span class="selector">Shinhan Card</span>
<span class="selector">Shinhan Securities</span>
<span class="selector">Shinhan Life</span>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 700; line-height: 1.35; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #8da7b6; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #7796a8; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #231f20;
border: 1px solid #7796a8; border-radius: 0px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #444444;
border: 1px solid #c8c7c7; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8da7b6; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff4136; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#231f20; box-sizing:border-box;
font-family:'Helvetica Neue', Arial, 'Lucida Grande', sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 62px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; background:#ffffff; border-bottom:none; }
.brand { font-family:Georgia,'Times New Roman','Palatino Linotype',serif; font-size:19px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:12px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#231f20; }
.searchbtn { border:1px solid #dedede; border-radius:4px; padding:6px 14px; font-size:12px; color:#8da7b6; background:#ffffff; }
.hero { flex:0 0 116px; background:#f5f5f5; display:flex; flex-direction:column; justify-content:center;
padding:0 30px; gap:6px; }
.hero h1 { font-family:Georgia,'Times New Roman',serif; font-size:24px; font-weight:700; line-height:1.3; margin:0; max-width:640px; letter-spacing:-0.3px; }
.hero p { font-size:13px; color:#444444; margin:0; max-width:560px; line-height:1.5; }
.breadcrumb { flex:0 0 32px; display:flex; align-items:center; gap:6px; padding:0 30px; font-size:12px; color:#8da7b6;
border-bottom:1px solid #dedede; }
.breadcrumb .active { color:#231f20; }
.cards { flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:20px 30px; align-content:center; overflow:hidden; }
.card { display:flex; flex-direction:column; gap:8px; }
.card-image { height:150px; background:#f5f5f5; position:relative; display:flex; align-items:flex-end; justify-content:center;
gap:5px; padding:14px 0 0; overflow:hidden; }
.spine { width:18px; border-radius:0; align-self:flex-end; }
.card-badge { position:absolute; top:8px; left:8px; background:#ff4136; color:#ffffff; font-size:10px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; padding:2px 8px; }
.card h3 { font-family:Georgia,'Times New Roman',serif; font-size:15px; font-weight:600; margin:0; line-height:1.3; }
.card .meta { font-size:12px; color:#8da7b6; margin:0; }
.card .price { font-size:14px; color:#444444; margin:0; }
footer { flex:0 0 56px; background:#231f20; color:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; font-size:11px; }
footer .link { color:#aec3cf; }
</style></head>
<body>
<nav>
<p class="brand">Attic Books</p>
<div class="navlinks">
<span>Fiction</span><span>Non-Fiction</span><span>Rare & Antiquarian</span><span>Maps & Prints</span><span>Sell Your Books</span>
</div>
<span class="searchbtn">Search</span>
</nav>
<section class="hero">
<h1>First editions. Well-worn pages. Honest prices.</h1>
<p>Browsing our shelves since 1978 — restored, catalogued, and ready for their next reader.</p>
</section>
<div class="breadcrumb">
<span>Home</span><span>/</span><span>Fiction</span><span>/</span><span class="active">Literary Classics</span>
</div>
<section class="cards">
<div class="card">
<div class="card-image">
<span class="card-badge">Rare</span>
<div class="spine" style="height:80px;background:#7796a8;"></div>
<div class="spine" style="height:96px;background:#3d9970;"></div>
<div class="spine" style="height:70px;background:#231f20;"></div>
<div class="spine" style="height:88px;background:#aec3cf;"></div>
</div>
<h3>The Quiet Harbor</h3>
<p class="meta">Margaret Hollis · First Edition, 1978</p>
<p class="price">$48.00</p>
</div>
<div class="card">
<div class="card-image">
<div class="spine" style="height:100px;width:120px;background:linear-gradient(135deg,#8da7b6,#e8e8e8);border-radius:2px;"></div>
</div>
<h3>A City Atlas, 1932</h3>
<p class="meta">Antique Fold-Out Map</p>
<p class="price">$65.00</p>
</div>
<div class="card">
<div class="card-image">
<span class="card-badge">Sale</span>
<div class="spine" style="height:74px;background:#3d9970;"></div>
<div class="spine" style="height:60px;background:#7796a8;"></div>
<div class="spine" style="height:84px;background:#dedede;"></div>
<div class="spine" style="height:66px;background:#231f20;"></div>
<div class="spine" style="height:78px;background:#aec3cf;"></div>
</div>
<h3>Coastal Notebooks, Set of 4</h3>
<p class="meta">Used Paperbacks · Good Condition</p>
<p class="price">$12.00</p>
</div>
</section>
<footer>
<span>© Attic Books</span>
<span><span class="link">Fiction</span> · <span class="link">Rare Books</span> · <span class="link">Sell to Us</span></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #1c1d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #1c1d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 900; line-height: 1.15; margin: 0; color: #1c1d1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 1.5px; background: #108474; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 1.5px; background: transparent; color: #000000;
border: 1px solid #108474; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1c1d1d; color: #eeeeee;
border: 1px solid #dedede; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.0; letter-spacing: 0.5px; background: #fbcd0a; color: #121212;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#eeeeee; box-sizing:border-box;
font-family:'Barlow', Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#121212; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.brand { font-family:Arial,sans-serif; font-weight:900; font-size:20px; letter-spacing:-0.5px; color:#fff;
text-transform:uppercase; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#eeeeee; }
.navlinks span.on { color:#108474; }
.navicons { display:flex; gap:16px; font-size:11px; color:#7b7b7b; }
.hero { height:270px; position:relative; display:flex; flex-direction:column; justify-content:center;
padding:0 32px; background:linear-gradient(120deg,#0c0c0c 40%,#1c1d1d 100%); }
.overline { color:#108474; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin:0 0 8px; }
.hero h1 { font-weight:900; font-size:56px; line-height:0.95; text-transform:uppercase; letter-spacing:-1px;
margin:0 0 16px; font-family:Arial, Helvetica, sans-serif; }
.hero .btn { display:inline-block; width:fit-content; background:#108474; color:#fff; font-size:14px;
font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:14px 28px; }
.tiles { display:flex; gap:2px; height:150px; }
.tile { flex:1; position:relative; display:flex; align-items:flex-end; padding:12px; background:#1c1d1d; }
.tile span { color:#fff; font-weight:900; text-transform:uppercase; font-size:16px; }
.tile::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,0.35); }
.tile span { position:relative; }
.cardsrow { display:flex; gap:14px; padding:16px 32px; }
.card { flex:1; background:#1c1d1d; border:1px solid #2a2a2a; padding:12px; }
.card .swatch { height:70px; margin-bottom:8px; }
.card .t { font-size:14px; font-weight:600; margin:0 0 6px; }
.card .price { font-family:Arial,sans-serif; font-weight:900; font-size:20px; color:#fff; }
footer { position:absolute; bottom:0; left:0; right:0; height:44px; background:#121212; border-top:1px solid #2a2a2a;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; color:#7b7b7b; }
</style></head>
<body>
<nav>
<div class="brand">Evil Bikes</div>
<div class="navlinks"><span class="on">Enduro</span><span>Trail</span><span>All-Mountain</span><span>Components</span></div>
<div class="navicons"><span>Search</span><span>Cart</span></div>
</nav>
<div class="hero">
<p class="overline">Enduro / Bellingham, WA</p>
<h1>The Wreckoning</h1>
<span class="btn">Configure Build</span>
</div>
<div class="tiles">
<div class="tile" style="background:linear-gradient(160deg,#1c1d1d,#108474);"><span>Following</span></div>
<div class="tile" style="background:linear-gradient(160deg,#1c1d1d,#a89cc8);"><span>Offering</span></div>
<div class="tile" style="background:linear-gradient(160deg,#1c1d1d,#333);"><span>Calling</span></div>
<div class="tile" style="background:linear-gradient(160deg,#1c1d1d,#fbcd0a);"><span>Patron</span></div>
</div>
<div class="cardsrow">
<div class="card"><div class="swatch" style="background:#108474;"></div><p class="t">Wreckoning V4</p><p class="price">$6,499</p></div>
<div class="card"><div class="swatch" style="background:#a89cc8;"></div><p class="t">Following MB</p><p class="price">$5,299</p></div>
<div class="card"><div class="swatch" style="background:#fbcd0a;"></div><p class="t">Offering V2</p><p class="price">$4,799</p></div>
</div>
<footer><span>© Evil Bikes — Bellingham, WA</span><span>Geometry · Warranty · Dealers</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafaf5; color: #231e20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafaf5; color: #231e20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #231e20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #5c5c5c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #e22631; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #fafaf5; color: #e22631;
border: 1px solid #e22631; border-radius: 8px;
padding: 12px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafaf5; color: #231e20;
border: 1px solid #c4c3c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5c5c5c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #e22631; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafaf5; font-family:'Apercu','Helvetica Neue',sans-serif; color:#3c3839; }
*{box-sizing:border-box;}
.nav{position:absolute; top:0; left:0; width:960px; height:80px; background:#fafaf5; border-bottom:1px solid #e7e7e7; display:flex; align-items:center; justify-content:space-between; padding:0 44px;}
.logo{font-size:22px; font-weight:700; color:#231e20;}
.logo span{color:#e22631;}
.navlinks{display:flex; gap:26px; font-size:14px; font-weight:600; color:#231e20;}
.navcta{background:#e22631; color:#fff; font-size:13px; font-weight:600; padding:8px 20px; border-radius:8px;}
.hero{position:absolute; top:80px; left:0; width:960px; height:270px; display:flex; align-items:center; padding:0 60px; justify-content:space-between;}
.heroText{width:440px;}
.headline{font-family:'TiemposHeadline',Georgia,serif; font-size:34px; font-weight:700; line-height:1.2; color:#231e20; margin-bottom:14px;}
.sub{font-size:15px; line-height:1.5; color:#5c5c5c; margin-bottom:20px; width:400px;}
.btn{display:inline-block; background:#e22631; color:#fff; font-size:15px; font-weight:600; padding:14px 26px; border-radius:8px;}
.consult{width:340px; background:#f5f3ed; border:1px solid #dcd7ce; border-radius:8px; padding:20px;}
.step{display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:14px; font-weight:600;}
.stepnum{width:24px; height:24px; border-radius:9999px; background:#e22631; color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; font-weight:700;}
.sec{position:absolute; top:350px; left:0; width:960px; height:290px; padding:30px 60px;}
.secTitle{font-size:22px; font-weight:700; margin-bottom:18px; color:#231e20;}
.grid{display:flex; gap:18px;}
.card{width:210px; background:#fbfbfb; border:1px solid #dcd7ce; border-radius:8px; padding:14px; position:relative;}
.cardImg{width:100%; height:96px; border-radius:4px; background:#f5f3ed; display:flex; align-items:center; justify-content:center;}
.bottle{width:34px; height:70px; background:#e7e7e7; border-radius:4px 4px 8px 8px; border:2px solid #231e20;}
.cardTitle{font-size:15px; font-weight:600; margin-top:10px;}
.cardPrice{font-size:16px; font-weight:600; margin-top:4px;}
.badge{position:absolute; top:8px; right:8px; background:#38a169; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Keeps</div>
<div class="navlinks"><span>Hair Loss</span><span>Skincare</span><span>Learn</span></div>
<div class="navcta">Get Started</div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">Get real treatment.<br>Not another gimmick.</div>
<div class="sub">Doctor-backed hair loss and skincare, delivered discreetly to your door.</div>
<div class="btn">Start Consultation</div>
</div>
<div class="consult">
<div class="step"><div class="stepnum">1</div>Answer a few questions</div>
<div class="step"><div class="stepnum">2</div>Get matched with a doctor</div>
<div class="step"><div class="stepnum">3</div>Treatment ships free</div>
</div>
</div>
<div class="sec">
<div class="secTitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="badge">FDA Approved</div><div class="cardImg"><div class="bottle"></div></div><div class="cardTitle">Finasteride</div><div class="cardPrice">$25/mo</div></div>
<div class="card"><div class="cardImg"><div class="bottle"></div></div><div class="cardTitle">Minoxidil Foam</div><div class="cardPrice">$20/mo</div></div>
<div class="card"><div class="cardImg"><div class="bottle"></div></div><div class="cardTitle">Biotin Gummies</div><div class="cardPrice">$15/mo</div></div>
<div class="card"><div class="cardImg"><div class="bottle"></div></div><div class="cardTitle">Thickening Shampoo</div><div class="cardPrice">$18</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #833ab4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #833ab4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c2a1d8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fd1d1d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #833ab4; color: #ffffff;
border: 1px solid #fd1d1d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #833ab4; color: #f5f5f5;
border: 1px solid #9558be; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c2a1d8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #97359c; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:640px; }
.col { flex:1; border-right:1px solid #DBDBDB; padding:18px 20px; overflow:hidden; }
.nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.logotype { font-family:Georgia, serif; font-size:24px; font-weight:400; }
.navicons { display:flex; gap:16px; font-size:18px; }
.stories { display:flex; gap:16px; margin-bottom:18px; }
.story { display:flex; flex-direction:column; align-items:center; gap:6px; }
.ring { width:60px; height:60px; border-radius:50%; padding:2.5px;
background:linear-gradient(45deg,#833AB4,#FD1D1D,#FCAF45); }
.ring i { display:block; width:100%; height:100%; border-radius:50%; background:linear-gradient(135deg,#ccc,#eee); border:2px solid #fff; }
.story span { font-size:11px; }
.post { border-bottom:1px solid #DBDBDB; padding-bottom:14px; margin-bottom:14px; }
.phead { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.pav { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#833AB4,#FCAF45); }
.puser { font-size:14px; font-weight:600; }
.pmore { margin-left:auto; }
.pimg { height:260px; border-radius:4px; background:linear-gradient(160deg,#dbe4ee,#aeb9c7); }
.pactions { display:flex; gap:16px; padding:10px 0 6px; font-size:20px; }
.plikes { font-size:13px; font-weight:600; }
.pcap { font-size:13px; margin-top:4px; }
.col2 { width:340px; flex:0 0 auto; padding:20px; }
.col2 h3 { font-size:15px; font-weight:600; margin:0 0 10px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.gcell { aspect-ratio:1; }
.g1 { background:linear-gradient(135deg,#e5b7c9,#c7899e); }
.g2 { background:linear-gradient(135deg,#b9d6ec,#7ea9c9); }
.g3 { background:linear-gradient(135deg,#c9e2c0,#93bd85); }
.g4 { background:linear-gradient(135deg,#e8d3a8,#c8a765); }
.g5 { background:linear-gradient(135deg,#d8c7ea,#a988ce); }
.g6 { background:linear-gradient(135deg,#f0c9c0,#d99a8d); }
.g7 { background:linear-gradient(135deg,#c0dede,#83b8b8); }
.g8 { background:linear-gradient(135deg,#e0e0a0,#bcbc70); }
.g9 { background:linear-gradient(135deg,#cfd8e8,#9fb0cc); }
.reelbadge { position:relative; }
.followbtn { margin-top:16px; background:#0095F6; color:#fff; text-align:center; padding:9px; border-radius:8px; font-size:14px; font-weight:600; }
</style></head>
<body>
<div class="wrap">
<div class="col">
<div class="nav"><span class="logotype">Instagram (iOS)</span><div class="navicons"><span>♡</span><span>✉</span></div></div>
<div class="stories">
<div class="story"><div class="ring"><i></i></div><span>Your story</span></div>
<div class="story"><div class="ring"><i></i></div><span>ava</span></div>
<div class="story"><div class="ring"><i></i></div><span>marco</span></div>
<div class="story"><div class="ring"><i></i></div><span>lin</span></div>
<div class="story"><div class="ring"><i></i></div><span>noah</span></div>
</div>
<div class="post">
<div class="phead"><div class="pav"></div><div class="puser">creator.studio</div><div class="pmore">⋯</div></div>
<div class="pimg"></div>
<div class="pactions"><span>♡</span><span>💬</span><span>➤</span><span style="margin-left:auto;">🔖</span></div>
<div class="plikes">12,483 likes</div>
<div class="pcap"><b>creator.studio</b> golden hour, no filter needed ✨</div>
</div>
</div>
<div class="col2">
<h3>Profile grid</h3>
<div class="grid3">
<div class="gcell g1"></div><div class="gcell g2"></div><div class="gcell g3"></div>
<div class="gcell g4"></div><div class="gcell g5"></div><div class="gcell g6"></div>
<div class="gcell g7"></div><div class="gcell g8"></div><div class="gcell g9"></div>
</div>
<div class="followbtn">Follow</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.2; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #0096ff; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #ffffff; color: #0096ff;
border: 1px solid #0096ff; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #e5e7eb; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #da532c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:#333; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #eee;}
.logo{font-size:20px;font-weight:700;color:#1e3a5f;}
.search{flex:1;max-width:400px;height:36px;border-radius:4px;border:1px solid #ccc;display:flex;align-items:center;padding:0 12px;font-size:12px;color:#999;}
.searchbtn{width:70px;height:36px;background:#0096ff;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;border-radius:4px;}
.hero{padding:22px 34px;background:#f7fafd;}
.h1{font-size:22px;font-weight:700;color:#1e3a5f;margin:0 0 4px;}
.sub{font-size:13px;color:#666;}
.sec{padding:16px 34px 0;}
.grid{display:flex;gap:14px;flex-wrap:wrap;}
.card{width:216px;border:1px solid #eee;border-radius:8px;padding:10px;position:relative;}
.thumb{width:100%;height:100px;background:#f0f6fb;border-radius:4px;margin-bottom:8px;position:relative;overflow:hidden;}
.sheetline{position:absolute;border:1px dashed #0096ff;}
.l1{top:14px;left:14px;right:14px;bottom:14px;}
.ptitle{font-size:13px;font-weight:700;margin:0 0 4px;}
.dims{font-size:12px;color:#333;font-weight:700;}
.persheet{font-size:11px;color:#666;margin:2px 0;}
.pprice{font-size:14px;font-weight:700;color:#1e3a5f;margin:4px 0;}
.sku{font-family:'Courier New',Courier,monospace;font-size:10px;color:#999;}
.matbadge{display:inline-block;background:#e6f3ff;color:#0096ff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;margin-top:4px;}
.badge{position:absolute;top:8px;left:8px;background:#da532c;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#1e3a5f;display:flex;align-items:center;justify-content:center;color:#cfe0ee;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Sheetlabels Com</div>
<div class="search">Search by SKU, size, or material…</div>
<div class="searchbtn">Search</div>
</div>
<div class="hero"><div class="h1">Custom Label Sheets, Cut to Spec</div><div class="sub">Dimension strings, per-sheet counts, material badges — spec in hand.</div></div>
<div class="sec">
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb"><div class="sheetline l1"></div></div><div class="ptitle">White Matte Address Labels</div><div class="dims">1" x 2.625"</div><div class="persheet">30 per sheet</div><div class="pprice">$18.99 / 100ct</div><div class="sku">SKU-WM-1263</div><div class="matbadge">Matte Paper</div></div>
<div class="card"><div class="thumb"><div class="sheetline l1"></div></div><div class="ptitle">Clear Gloss Product Labels</div><div class="dims">2" x 3"</div><div class="persheet">10 per sheet</div><div class="pprice">$24.99 / 100ct</div><div class="sku">SKU-CG-2300</div><div class="matbadge">Clear Gloss</div></div>
<div class="card"><div class="thumb"><div class="sheetline l1"></div></div><div class="ptitle">Kraft Brown Shipping Labels</div><div class="dims">4" x 6"</div><div class="persheet">4 per sheet</div><div class="pprice">$16.99 / 100ct</div><div class="sku">SKU-KB-4600</div><div class="matbadge">Kraft Brown</div></div>
</div>
</div>
<div class="footer">Free die-cut proofs on custom orders over 500 sheets</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #747474; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #1990c6; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #1990c6; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #333333;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #747474; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #1990c6; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Georgia,'Times New Roman',serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e8e8e8;}
.logo{font-size:19px;color:#121212;letter-spacing:.4px;}
.navlinks{display:flex;gap:24px;font-size:13px;color:#747474;}
.cta{background:#1990c6;color:#fff;font-size:12px;font-weight:600;padding:10px 22px;border-radius:9999px;font-family:Arial,sans-serif;}
.hero{height:250px;display:flex;background:#f5f5f5;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 36px;}
.herotext h1{font-size:32px;font-weight:400;margin:0 0 12px;line-height:1.25;color:#121212;}
.herotext p{font-size:14px;color:#747474;margin:0 0 18px;max-width:300px;}
.btn{display:inline-block;background:#1990c6;color:#fff;font-size:13px;font-weight:600;padding:12px 26px;border-radius:9999px;width:fit-content;font-family:Arial,sans-serif;}
.heroimg{width:54%;position:relative;overflow:hidden;background:linear-gradient(180deg,#dedede,#b0d4e8);}
.crib{position:absolute;bottom:24px;left:100px;width:220px;height:100px;border:8px solid #747474;border-radius:16px;background:transparent;}
.cribbase{position:absolute;bottom:14px;left:120px;width:180px;height:12px;background:#747474;border-radius:6px;}
.sec{padding:22px 36px 0;}
.sectitle{font-size:18px;color:#121212;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border:1px solid #e8e8e8;border-radius:18px;padding:12px;}
.thumb{height:96px;border-radius:14px;margin-bottom:8px;}
.pname{font-size:14px;color:#121212;}
.pprice{font-size:13px;color:#747474;margin-top:4px;font-family:Arial,sans-serif;}
</style>
<div class="nav">
<div class="logo">Monte Design</div>
<div class="navlinks"><span>Nursery</span><span>Cribs</span><span>Seating</span><span>Storage</span></div>
<div class="cta">Book a Design Call</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Furniture that grows with quiet confidence.</h1>
<p>Modern nursery pieces shaped for calm rooms and lasting use.</p>
<div class="btn">Shop the Collection</div>
</div>
<div class="heroimg"><div class="crib"></div><div class="cribbase"></div></div>
</div>
<div class="sec">
<div class="sectitle">New Arrivals</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#dedede,#1990c6)"></div><div class="pname">Amble Convertible Crib</div><div class="pprice">$1,290</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#747474,#b0d4e8)"></div><div class="pname">Luca Glider Chair</div><div class="pprice">$980</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#121212,#747474)"></div><div class="pname">Grove 3-Drawer Dresser</div><div class="pprice">$1,050</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1990c6,#dedede)"></div><div class="pname">Nova Bookshelf</div><div class="pprice">$620</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #a0522d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #a0522d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #cfac9b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4623a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #a0522d; color: #ffffff;
border: 1px solid #f4623a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #a0522d; color: #f5f5f5;
border: 1px solid #ae6c4d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #cfac9b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ad552f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#14100D; color:#EFE6DA; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.screen { width:960px; height:640px; display:flex; flex-direction:column; align-items:center;
padding:20px 0 22px; }
.batch { text-align:center; margin-bottom:16px; }
.batch .t { font-size:19px; font-weight:700; }
.batch .s { font-size:12px; color:#B7A48E; margin-top:2px; }
.stage { flex:1; display:flex; align-items:center; gap:60px; }
.card { width:280px; height:400px; border-radius:24px; overflow:hidden; position:relative;
background:linear-gradient(160deg,#8A5A3A 0%,#5C3D26 55%,#3A2717 100%);
box-shadow:0 16px 40px -16px rgba(0,0,0,0.7); }
.card::after { content:''; position:absolute; left:0; right:0; bottom:0; height:55%;
background:linear-gradient(to bottom, rgba(20,16,13,0), rgba(20,16,13,0.95)); }
.badge { position:absolute; top:14px; left:14px; background:rgba(20,16,13,0.55); backdrop-filter:blur(2px);
color:#F3E4CF; font-size:11px; font-weight:700; padding:5px 10px; border-radius:999px; z-index:2; }
.cardinfo { position:absolute; left:20px; right:20px; bottom:18px; z-index:2; }
.namerow { font-size:24px; font-weight:700; color:#fff; }
.namerow .age { font-weight:500; }
.meta { font-size:13px; color:#F3E4CF; margin:4px 0 10px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { font-size:11.5px; font-weight:600; color:#F3E4CF; background:rgba(243,228,207,0.18);
border:1px solid rgba(243,228,207,0.28); padding:4px 11px; border-radius:999px; }
.actions { display:flex; flex-direction:column; align-items:center; gap:26px; }
.act { border-radius:50%; display:flex; align-items:center; justify-content:center;
box-shadow:0 8px 20px -8px rgba(0,0,0,0.6); }
.pass { width:56px; height:56px; background:#2A2017; border:1.5px solid #33281D; color:#B7A48E; font-size:20px; }
.like { width:72px; height:72px; background:#F4623A; color:#fff; font-size:30px; }
.sendb { width:52px; height:52px; background:#A0522D; color:#F3E4CF; font-size:18px; }
.brand { position:absolute; top:20px; right:26px; font-size:13px; font-weight:700; color:#F4623A; }
</style></head>
<body>
<div class="screen">
<div class="brand">Coffee Meets Bagel (iOS)</div>
<div class="batch"><div class="t">Today's Bagels</div><div class="s">6 fresh picks · expires in 23h</div></div>
<div class="stage">
<div class="card">
<div class="badge">🕐 Active today</div>
<div class="cardinfo">
<div class="namerow">Maya<span class="age">, 28</span></div>
<div class="meta">Designer · 2 mi away · ☕ Latte person</div>
<div class="chips"><span class="chip">🥾 Hiking</span><span class="chip">📚 Book club</span><span class="chip">🎹 Piano</span></div>
</div>
</div>
<div class="actions">
<div class="act pass">✕</div>
<div class="act like">♥</div>
<div class="act sendb">★</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #a45cec; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #fefefe; color: #141414;
border: 1px solid #a45cec; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fefefe; color: #141414;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #a45cec; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fefefe; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:#141414; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-family:'Montserrat',Inter,sans-serif;font-size:20px;font-weight:700;color:#141414;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;color:#141414;}
.navlinks .active{color:#a45cec;}
.hero{height:260px;background:#f6f6f6;display:flex;align-items:center;padding:0 44px;}
.herotext{width:50%;}
.herotext h1{font-family:'Montserrat',Inter,sans-serif;font-size:36px;font-weight:700;color:#141414;margin:0 0 14px;letter-spacing:-0.5px;line-height:1.15;}
.herotext p{font-size:15px;color:#545454;margin:0 0 20px;max-width:340px;}
.cta{display:inline-block;background:#a45cec;color:#fff;font-size:16px;font-weight:600;letter-spacing:0.3px;padding:14px 24px;border-radius:8px;}
.heroshape{width:44%;height:200px;border-radius:12px;background:radial-gradient(circle at 35% 35%,#a45cec,#8b3fd6 70%);}
.section{padding:20px 44px 0;}
.seclabel{font-size:18px;font-weight:600;color:#141414;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:190px;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.04);overflow:hidden;background:#fff;}
.thumb{height:110px;background:#f6f6f6;border-radius:8px;margin:6px;position:relative;}
.badge{position:absolute;top:6px;left:0;background:#a45cec;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 6px;border-radius:0 4px 4px 0;}
.cardbody{padding:6px 12px 12px;}
.ptitle{font-size:15px;font-weight:600;color:#141414;}
.pprice{font-size:14px;color:#545454;margin-top:4px;}
.swatchrow{display:flex;gap:6px;margin-top:6px;}
.swatch{width:16px;height:16px;border-radius:9999px;}
</style>
<div class="nav">
<div class="logo">Saalt</div>
<div class="navlinks"><div class="active">Shop</div><div>Period Underwear</div><div>Cups</div><div>Learn</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Period care that just works.</h1>
<p>Clinical-grade reliability, designed without the pink and glitter.</p>
<div class="cta">Shop Best Sellers</div>
</div>
<div class="heroshape"></div>
</div>
<div class="section">
<div class="seclabel">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge">New</span></div><div class="cardbody"><div class="ptitle">Saalt Cup, Regular</div><div class="pprice">$32.00</div><div class="swatchrow"><div class="swatch" style="background:#a45cec"></div><div class="swatch" style="background:#141414"></div></div></div></div>
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="ptitle">Period Underwear, Bikini</div><div class="pprice">$28.00</div><div class="swatchrow"><div class="swatch" style="background:#f7d6c5"></div><div class="swatch" style="background:#3f4759"></div></div></div></div>
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="ptitle">Reusable Pad Set</div><div class="pprice">$24.00</div><div class="swatchrow"><div class="swatch" style="background:#a45cec"></div></div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.25px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #573837; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #573837;
border: 1px solid #573837; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f2ece9; color: #6b6b6b;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Verdana, Geneva, 'Trebuchet MS', sans-serif; color:#3a3a3a; }
*{box-sizing:border-box;}
.nav{position:absolute; top:0; left:0; width:960px; height:64px; background:#ffffff; border-bottom:1px solid #d8d0ce; display:flex; align-items:center; justify-content:space-between; padding:0 40px;}
.logo{font-family:Geneva, Verdana, sans-serif; font-size:19px; font-weight:600; color:#573837;}
.navlinks{display:flex; gap:24px; font-size:13px; font-weight:500; color:#3a3a3a;}
.cart{width:36px; height:36px; border-radius:9999px; background:#092fb8; color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px;}
.hero{position:absolute; top:64px; left:0; width:960px; height:340px; background:#f8f5f3; display:flex; align-items:center; padding:0 50px;}
.heroText{width:420px;}
.headline{font-family:Geneva, Verdana, sans-serif; font-size:34px; font-weight:600; line-height:1.2; color:#1a1a1a; margin-bottom:14px;}
.sub{font-size:14px; line-height:1.6; color:#3a3a3a; margin-bottom:20px; width:360px;}
.btn{display:inline-block; background:#573837; color:#fff; font-size:15px; font-weight:600; padding:14px 26px; border-radius:8px;}
.penWrap{position:absolute; right:60px; top:100px; width:340px; height:220px;}
.pen{position:absolute; width:280px; height:22px; border-radius:11px 3px 3px 11px; background:linear-gradient(90deg,#3d2827,#573837 60%,#092fb8); top:80px; left:20px; transform:rotate(-18deg);}
.penTip{position:absolute; width:0; height:0; border-top:11px solid transparent; border-bottom:11px solid transparent; border-left:22px solid #092fb8; top:80px; left:296px; transform:rotate(-18deg); transform-origin: left center;}
.inkDrop{position:absolute; width:14px; height:14px; border-radius:50%; background:#00ccff; top:180px; left:250px; opacity:0.7;}
.sec{position:absolute; top:404px; left:0; width:960px; height:236px; padding:32px 40px;}
.secTitle{font-family:Geneva, Verdana, sans-serif; font-size:22px; font-weight:600; color:#1a1a1a; margin-bottom:18px;}
.grid{display:flex; gap:18px;}
.card{width:216px; background:#fff; border:1px solid #ede8e7; border-radius:12px; padding:12px; position:relative;}
.cardImg{width:100%; height:100px; border-radius:8px; background:#f2ece9; position:relative;}
.penMini{position:absolute; width:150px; height:14px; border-radius:7px 2px 2px 7px; background:#573837; top:44px; left:22px; transform:rotate(-10deg);}
.cardTitle{font-family:Geneva, Verdana, sans-serif; font-size:15px; font-weight:600; text-transform:uppercase; margin-top:10px; color:#1a1a1a;}
.cardPrice{font-family:Geneva, Verdana, sans-serif; font-size:15px; font-weight:600; margin-top:4px; color:#573837;}
.chip{position:absolute; top:8px; left:8px; background:#092fb8; color:#fff; font-size:10px; font-weight:600; letter-spacing:0.3px; padding:3px 8px; border-radius:4px; text-transform:uppercase;}
</style>
<div class="nav">
<div class="logo">Kanilea Pen CO</div>
<div class="navlinks"><span>Fountain Pens</span><span>Rollerballs</span><span>Ink</span><span>About</span></div>
<div class="cart">2</div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">Hand-Turned Pens,<br>Cast in Koa & Resin</div>
<div class="sub">Nib grades from Extra Fine to Broad. Fill systems built to last a lifetime of letters.</div>
<div class="btn">Shop Collection</div>
</div>
<div class="penWrap">
<div class="pen"></div><div class="penTip"></div><div class="inkDrop"></div>
</div>
</div>
<div class="sec">
<div class="secTitle">Signature Barrels</div>
<div class="grid">
<div class="card"><div class="chip">Limited</div><div class="cardImg"><div class="penMini"></div></div><div class="cardTitle">Koa Wave</div><div class="cardPrice">$185</div></div>
<div class="card"><div class="cardImg"><div class="penMini"></div></div><div class="cardTitle">Ebonite Classic</div><div class="cardPrice">$129</div></div>
<div class="card"><div class="cardImg"><div class="penMini"></div></div><div class="cardTitle">Urushi Lacquer</div><div class="cardPrice">$245</div></div>
<div class="card"><div class="cardImg"><div class="penMini"></div></div><div class="cardTitle">Titanium EDC</div><div class="cardPrice">$95</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #0e6eb8; color: #ffffff;
border: none; border-radius: 10px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #0e6eb8;
border: 1px solid #0e6eb8; border-radius: 10px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #c8c8c8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #0e6eb8; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #c4c4c4;}
.logo{font-size:20px;font-weight:700;color:#0e6eb8;}
.navlinks{display:flex;gap:20px;font-size:15px;font-weight:500;}
.navlinks .on{color:#0e6eb8;border-bottom:2px solid #0e6eb8;padding-bottom:20px;}
.cartbtn{background:#0e6eb8;color:#fff;font-size:16px;font-weight:600;padding:10px 22px;border-radius:10px;}
.catstrip{display:flex;gap:8px;padding:12px 32px;background:#f5f5f5;}
.cattab{background:#0e6eb8;color:#fff;font-size:13px;font-weight:600;padding:6px 16px;border-radius:9999px;}
.cattab.off{background:#fff;color:#333;border:1px solid #c4c4c4;}
.hero{height:170px;background:#0e6eb8;display:flex;align-items:center;padding:0 32px;}
.h1{font-size:28px;font-weight:600;color:#fff;margin-bottom:8px;}
.sub{font-size:14px;color:#e0eefc;}
.ctabtn{display:inline-block;background:#e94b35;color:#fff;font-size:16px;font-weight:600;padding:12px 28px;border-radius:10px;margin-top:10px;}
.section{padding:18px 32px 0;}
.stitle{font-size:18px;font-weight:600;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:150px;border:1px solid #d8d8d8;border-radius:6px;padding:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;text-transform:uppercase;color:#fff;padding:2px 8px;border-radius:2px;background:#e94b35;}
.thumb{height:80px;border-radius:6px;background:#f5f5f5;margin-bottom:8px;}
.pname{font-size:15px;font-weight:600;margin-bottom:4px;}
.pprice{font-size:15px;font-weight:600;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#222222;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#fff;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Techmatte</div>
<div class="navlinks"><div class="on">Screen Protection</div><div>Car Mounts</div><div>Cables</div></div>
<div class="cartbtn">Cart (1)</div>
</div>
<div class="catstrip"><div class="cattab">All</div><div class="cattab off">Tempered Glass</div><div class="cattab off">Mounts</div><div class="cattab off">Chargers</div></div>
<div class="hero">
<div><div class="h1">Screen Protection & Car Mounts, Made Simple.</div><div class="sub">Budget-friendly accessories that just work.</div><div class="ctabtn">Shop Flash Sale</div></div>
</div>
<div class="section">
<div class="stitle">Popular Right Now</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(150deg,#0e6eb8,#337ab7);"></div><div class="pname">Tempered Glass 2-Pack</div><div class="pprice">$7.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#337ab7,#0e6eb8);"></div><div class="pname">Magnetic Vent Mount</div><div class="pprice">$14.99</div></div>
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(150deg,#808080,#0e6eb8);"></div><div class="pname">USB-C Fast Charger</div><div class="pprice">$11.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#0e6eb8,#808080);"></div><div class="pname">Dash Cam Mount</div><div class="pprice">$9.99</div></div>
</div>
</div>
<div class="footer"><span>© Everyday Mobile Accessories</span><span>Warranty · Returns</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #32373c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #32373c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 400; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #32373c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.2; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.2; background: #ff1900; color: #ffffff;
border: none; border-radius: 0px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.2; background: #ffffff; color: #32373c;
border: 1px solid #ff1900; border-radius: 0px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #32373c;
border: 1px solid #cccdce; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #ffdfdb; color: #ff1900;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Arial,sans-serif; color:#32373c; }
*{box-sizing:border-box;}
.nav{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #bdc3c7;}
.logo{font-size:16px;color:#ff1900;}
.navlinks{display:flex;gap:20px;font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:#707070;}
.navlinks .active{color:#ff1900;}
.hero{padding:0;}
.heroimg{width:100%;height:220px;background:linear-gradient(135deg,#e8e6df,#c9c7c0);}
.caption{font-size:10px;color:#707070;padding:6px 30px 0;}
.title{font-size:28px;font-weight:400;letter-spacing:-0.4px;padding:14px 30px 0;}
.divider{border-top:1px solid #bdc3c7;margin:20px 30px;}
.grid{display:flex;gap:0;padding:0 30px;}
.card{width:33.33%;padding-right:20px;}
.name{font-size:13px;font-weight:500;}
.meta{font-size:11px;color:#707070;margin-top:2px;}
.artthumb{height:130px;background:#eaedf2;margin-bottom:8px;}
.filters{display:flex;gap:24px;padding:0 30px;font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:#707070;}
.filters .active{color:#32373c;border-bottom:2px solid #ff1900;padding-bottom:6px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Spruth Magers</div>
<div class="navlinks"><span class="active">Artists</span><span>Exhibitions</span><span>News</span><span>About</span></div>
</div>
<div class="hero">
<div class="heroimg"></div>
<div class="caption">Installation view, current exhibition</div>
</div>
<div class="title">Current Exhibitions</div>
<div class="filters">
<span class="active">Current</span><span>Upcoming</span><span>Past</span>
</div>
<div class="divider"></div>
<div class="grid">
<div class="card"><div class="artthumb" style="background:linear-gradient(135deg,#d9d7cf,#8f8d85)"></div><div class="name">Untitled Structures</div><div class="meta">Berlin — through Sept 2026</div></div>
<div class="card"><div class="artthumb" style="background:linear-gradient(160deg,#c9c7c0,#5a5a5a)"></div><div class="name">Field Notation</div><div class="meta">London — through Oct 2026</div></div>
<div class="card"><div class="artthumb" style="background:linear-gradient(200deg,#e2e0d8,#a3a19a)"></div><div class="name">Grid & Ground</div><div class="meta">Los Angeles — through Nov 2026</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.27; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.38; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; background: #313131; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; background: #388e3c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Estarland — Home</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#4a4a4a;
font-family:Arial,'Helvetica Neue',sans-serif;
font-size:14px;
}
*{box-sizing:border-box;}
.page{width:960px;height:640px;display:flex;flex-direction:column;}
header{height:48px;background:#313131;display:flex;align-items:center;justify-content:space-between;padding:0 22px;}
.logo{font-size:16px;font-weight:700;color:#ffffff;}
.search-bar{flex:1;max-width:400px;margin:0 20px;background:#ffffff;border-radius:2px;height:28px;display:flex;align-items:center;padding:0 10px;font-size:12px;color:#888;}
nav{display:flex;gap:14px;}
nav a{font-size:11px;color:#dddddd;}
.subnav{height:28px;background:#f5f5f5;border-bottom:1px solid #d0d0d0;display:flex;align-items:center;gap:14px;padding:0 22px;}
.subnav span{font-size:11px;color:#4a4a4a;}
main{flex:1;display:flex;padding:12px 22px 0;gap:14px;overflow:hidden;}
aside{width:120px;}
aside h5{font-size:11px;color:#313131;margin:0 0 8px;text-transform:uppercase;}
aside .cat{font-size:11px;color:#4a4a4a;padding:4px 0;border-bottom:1px solid #e0e0e0;}
.content{flex:1;}
.row-head{display:flex;justify-content:space-between;margin-bottom:8px;}
.row-head h2{font-size:13px;margin:0;color:#313131;font-weight:700;}
.row-head span{font-size:10px;color:#6a6a6a;}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.card{border:1px solid #d0d0d0;border-radius:8px;padding:6px;position:relative;background:#fff;}
.thumb{height:50px;border-radius:2px;background:linear-gradient(150deg,#eeeeee,#dcdcdc);margin-bottom:6px;}
.badge{position:absolute;top:4px;left:4px;font-size:7px;font-weight:700;padding:2px 4px;border-radius:2px;color:#fff;text-transform:uppercase;}
.b-stock{background:#388e3c;}
.b-sold{background:#c62828;}
.card h4{font-size:9.5px;margin:0 0 4px;color:#313131;font-weight:700;line-height:1.25;height:24px;overflow:hidden;}
.card .price{font-size:12px;color:#2e7d32;font-weight:700;}
.card .btn{margin-top:4px;background:#313131;color:#fff;font-size:8px;font-weight:700;text-align:center;padding:4px 0;border-radius:8px;}
footer{background:#313131;padding:9px 22px;display:flex;justify-content:space-between;margin-top:10px;}
footer span{font-size:9px;color:#bbbbbb;}
</style>
<div class="page">
<header>
<div class="logo">Estarland</div>
<div class="search-bar">🔍</div>
<nav><a>Sell to Us</a><a>Track Order</a><a>Account</a></nav>
</header>
<div class="subnav">
<span>NES</span><span>SNES</span><span>N64</span><span>Genesis</span><span>PS1</span><span>PS2</span><span>Game Boy</span><span>Sega Saturn</span>
</div>
<main>
<aside>
<h5>Systems</h5>
<div class="cat">Nintendo</div>
<div class="cat">Sega</div>
<div class="cat">Sony</div>
<div class="cat">Atari</div>
<div class="cat">Handhelds</div>
<div class="cat">Accessories</div>
<div class="cat">Repro/Homebrew</div>
</aside>
<div class="content">
<div class="row-head"><h2>Recently Restocked</h2><span>1,204 titles in stock</span></div>
<div class="grid">
<div class="card"><div class="badge b-stock">In Stock</div><div class="thumb"></div><h4>Chrono Trigger (SNES)</h4><div class="price">$89.99</div><div class="btn">Add to Cart</div></div>
<div class="card"><div class="badge b-sold">Sold Out</div><div class="thumb"></div><h4>EarthBound (SNES)</h4><div class="price">$249.99</div><div class="btn">Notify Me</div></div>
<div class="card"><div class="badge b-stock">In Stock</div><div class="thumb"></div><h4>Panzer Dragoon Saga</h4><div class="price">$319.99</div><div class="btn">Add to Cart</div></div>
<div class="card"><div class="badge b-stock">In Stock</div><div class="thumb"></div><h4>Mega Man X (SNES)</h4><div class="price">$44.99</div><div class="btn">Add to Cart</div></div>
<div class="card"><div class="badge b-stock">In Stock</div><div class="thumb"></div><h4>Pokemon Crystal (GBC)</h4><div class="price">$129.99</div><div class="btn">Add to Cart</div></div>
</div>
</div>
</main>
<footer>
<span>© Estarland — Retro Games & Consoles</span>
<span>Sell Your Collection · Grading · Shipping Policy</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #06c167; color: #000000;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #06c167; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d7f5e7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { padding:16px 30px 8px; }
.addr { font-size:16px; font-weight:700; }
.searchbar { height:48px; background:#F3F3F3; border-radius:12px; margin-top:10px; display:flex; align-items:center; padding:0 16px; color:#6B6B6B; font-size:15px; }
.pills { display:flex; gap:10px; padding:12px 30px; }
.pill { height:40px; background:#F3F3F3; border-radius:999px; display:flex; align-items:center; padding:0 16px; font-size:14px; font-weight:500; gap:6px; }
.pill.on { background:#06C167; color:#fff; }
.cards { display:flex; gap:20px; padding:0 30px; }
.card { flex:1; }
.photo { height:150px; border-radius:12px; position:relative; }
.p1 { background:linear-gradient(150deg,#e8c98a,#a05a2a); }
.p2 { background:linear-gradient(150deg,#c9dfae,#4a7a3a); }
.ribbon { position:absolute; top:8px; left:8px; background:#fff; color:#06C167; font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px; }
.heart { position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; }
.rname { font-size:17px; font-weight:700; margin-top:10px; }
.rmeta { font-size:14px; color:#6B6B6B; margin-top:4px; }
.rmeta .free { color:#06C167; }
.cartbar { position:absolute; left:24px; right:24px; bottom:76px; height:56px; background:#06C167; border-radius:12px; display:flex; align-items:center; padding:0 18px; box-shadow:rgba(0,0,0,0.12) 0 -2px 12px; }
.cartcount { width:26px; height:26px; border-radius:50%; background:#fff; color:#06C167; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
.cartmid { margin-left:14px; font-weight:700; font-size:16px; color:#fff; }
.carttotal { margin-left:auto; font-weight:700; font-size:16px; color:#fff; }
.tabbar { position:absolute; left:0; right:0; bottom:0; height:52px; background:rgba(255,255,255,0.96); border-top:1px solid #E8E8E8; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:10px; color:#A6A6A6; text-align:center; }
.tab.on { color:#000; }
</style></head>
<body>
<div class="topbar"><div class="addr">Deliver to · Uber Eats (iOS) ▾</div><div class="searchbar">Search Uber Eats</div></div>
<div class="pills">
<div class="pill on">🍔 Burgers</div>
<div class="pill">🍕 Pizza</div>
<div class="pill">🥗 Healthy</div>
<div class="pill">🍜 Asian</div>
</div>
<div class="cards">
<div class="card">
<div class="photo p1"><span class="ribbon">$0 Delivery Fee</span><span class="heart">♡</span></div>
<div class="rname">Sunrise Diner</div>
<div class="rmeta">★ 4.8 · 25 min · <span class="free">$0 Delivery Fee</span></div>
</div>
<div class="card">
<div class="photo p2"><span class="heart">♡</span></div>
<div class="rname">Green Bowl Co.</div>
<div class="rmeta">★ 4.6 · 18 min · $0.99 Delivery Fee</div>
</div>
</div>
<div class="cartbar"><div class="cartcount">3</div><div class="cartmid">View cart</div><div class="carttotal">$28.40</div></div>
<div class="tabbar">
<div class="tab on">Home</div><div class="tab">Browse</div><div class="tab">Search</div><div class="tab">Cart</div><div class="tab">Account</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f7; color: #080a0f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f7; color: #080a0f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #080a0f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #75787f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; letter-spacing: 0.3px; background: #00befa; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; letter-spacing: 0.3px; background: #f5f5f7; color: #080a0f;
border: 1px solid #00befa; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f5f5f7; color: #1d1d1f;
border: 1px solid #bababd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #75787f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #2c7ed0; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f7; color:#1d1d1f; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:64px; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.brand { font-size:16px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#75787f; }
.navlinks .active { color:#1d1d1f; border-bottom:2px solid #00befa; padding-bottom:20px; margin-bottom:-21px; }
.search { width:180px; height:32px; border-radius:8px; background:#f2f2f2; border:1px solid #e2e2e2; }
main { flex:1 1 auto; display:flex; gap:20px; padding:20px 32px; min-height:0; }
.left { flex:1.1; display:flex; flex-direction:column; gap:12px; min-height:0; }
.gallery { flex:1; border-radius:12px; position:relative; min-height:0;
background:linear-gradient(145deg,#e9ecef,#c7d2da 55%,#8f9aa5); border:1px solid #e4e5e6; }
.gallery::after { content:''; position:absolute; left:16px; right:16px; bottom:16px; height:10px; border-radius:4px;
background:rgba(0,0,0,0.15); }
.thumbs { flex:0 0 40px; display:flex; gap:8px; }
.thumbs span { flex:1; border-radius:8px; background:#dfe3e6; border:1px solid #e4e5e6; }
.thumbs span.active { border:2px solid #00befa; }
.right { flex:1; display:flex; flex-direction:column; min-height:0; }
.title { font-size:22px; font-weight:600; margin:0 0 6px; letter-spacing:-0.3px; }
.stars { color:#ff9900; font-size:13px; margin:0 0 10px; }
.price { font-size:22px; font-weight:700; margin:0 0 12px; }
.badges { display:flex; gap:8px; margin-bottom:12px; }
.badge { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; padding:2px 8px; border-radius:4px; color:#fff; }
.badge.tech { background:#2c7ed0; }
.badge.green { background:#00db84; }
.spectable { flex:1; background:#ffffff; border:1px solid #e4e5e6; border-radius:12px; padding:12px 16px; min-height:0; }
.row { display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px solid #f1f3f5; }
.row span:first-child { color:#75787f; text-transform:uppercase; font-size:11px; letter-spacing:0.3px; }
.row span:last-child { font-family:SFMono-Regular, Consolas, monospace; }
.cta { margin-top:12px; background:#00befa; color:#fff; border:none; border-radius:8px; padding:12px 0;
font-size:16px; font-weight:600; text-align:center; }
footer { flex:0 0 auto; height:48px; background:#080a0f; color:#e2e2e2; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Anker Docking 2</p>
<div class="navlinks"><span>Chargers</span><span class="active">Docking</span><span>Displays</span><span>Cables</span></div>
<div class="search"></div>
</nav>
<main>
<div class="left">
<div class="gallery"></div>
<div class="thumbs"><span class="active"></span><span></span><span></span><span></span></div>
</div>
<div class="right">
<h1 class="title">14-in-1 USB-C Docking Station</h1>
<div class="stars">★★★★★ 4.7 (2,318 ratings)</div>
<div class="badges"><span class="badge tech">100W PD</span><span class="badge green">GaN</span></div>
<div class="price">$129.99</div>
<div class="spectable">
<div class="row"><span>Ports</span><span>14 total</span></div>
<div class="row"><span>Display Out</span><span>Dual 4K@60Hz</span></div>
<div class="row"><span>Data Speed</span><span>10Gbps USB-C</span></div>
<div class="row"><span>Dimensions</span><span>210 × 78 × 20mm</span></div>
</div>
<div class="cta">Add to Cart</div>
</div>
</main>
<footer>
<span>© Anker Docking 2</span>
<span>Free returns within 30 days</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #5e5047; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #271f1f; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fafafa; color: #271f1f;
border: 1px solid #271f1f; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #1a1a1a;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5e5047; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff5742; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>ILIA Beauty mockup</title>
<style>
:host, html, body {
width: 960px; height: 640px; margin: 0; padding: 0;
overflow: hidden; box-sizing: border-box;
font-family: 'Brown', 'Post Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: #fafafa; color: #271f1f;
}
*, *::before, *::after { box-sizing: border-box; }
.wrap { width: 960px; height: 640px; position: relative; overflow: hidden; background: #fafafa; }
.nav { height: 56px; background: #fafafa; border-bottom: 1px solid #e5e5e5;
display: flex; align-items: center; justify-content: space-between; padding: 0 40px; }
.logo { font-size: 18px; font-weight: 600; letter-spacing: 0.2px; color: #271f1f; }
.navlinks { display: flex; gap: 22px; }
.navlinks a { font-size: 12.5px; font-weight: 500; color: #5e5047; text-decoration: none; }
.navcta { background: #271f1f; color: #ffffff; font-size: 11.5px; font-weight: 600; padding: 9px 16px; border-radius: 9999px; }
.hero { height: 226px; display: flex; align-items: center; padding: 0 40px; gap: 24px; background: #f7f7f8; }
.hero-text { width: 460px; }
.eyebrow { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 1px;
text-transform: uppercase; color: #5e5047; margin-bottom: 10px; }
.sun-dot { width: 8px; height: 8px; border-radius: 9999px; background: #ffcf2a; }
.headline { font-size: 32px; font-weight: 600; color: #271f1f; line-height: 1.2; letter-spacing: -0.2px; }
.sub { font-size: 13.5px; color: #5e5047; margin-top: 12px; width: 400px; line-height: 1.6; }
.btn-primary { display: inline-block; margin-top: 20px; background: #271f1f; color: #ffffff; font-size: 13px;
font-weight: 600; padding: 13px 24px; border-radius: 10px; }
.hero-art { position: relative; width: 340px; height: 180px; }
.tube { position: absolute; border-radius: 12px; box-shadow: 0 12px 22px rgba(39,31,31,0.12); }
.tube-cap { position: absolute; border-radius: 8px; }
.t1 { left: 60px; top: 30px; width: 70px; height: 128px; background: linear-gradient(160deg,#bba293,#a08c7c); }
.t1cap { left: 60px; top: 14px; width: 70px; height: 24px; background: #271f1f; border-radius: 12px 12px 6px 6px; }
.t2 { left: 150px; top: 60px; width: 84px; height: 96px; background: linear-gradient(160deg,#ffffff,#efe9e2); border: 1px solid #e5e5e5; }
.t2cap { left: 178px; top: 44px; width: 28px; height: 22px; background: #ffcf2a; }
.t3 { left: 250px; top: 84px; width: 60px; height: 74px; background: linear-gradient(160deg,#ff5742,#d9432f); }
.section-head { padding: 10px 40px 0 40px; display: flex; align-items: baseline; justify-content: space-between; }
.section-title { font-size: 17px; font-weight: 600; color: #271f1f; }
.section-link { font-size: 12px; font-weight: 600; color: #5e5047; }
.grid { display: flex; gap: 18px; padding: 16px 40px 0 40px; width: 880px; }
.card { flex: 1; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 12px; padding: 14px; position: relative;
display: flex; flex-direction: column; align-items: center; }
.badge { position: absolute; top: 10px; left: 10px; font-size: 9px; font-weight: 700; letter-spacing: 0.4px;
text-transform: uppercase; color: #ffffff; padding: 3px 8px; border-radius: 6px; }
.badge-new { background: #ff5742; }
.badge-clean { background: #00caaa; }
.swatch { width: 58px; height: 58px; border-radius: 12px; margin: 16px 0 12px 0; }
.p-title { font-size: 12.5px; font-weight: 600; color: #271f1f; text-align: center; }
.p-meta { font-size: 10.5px; color: #9da1a0; margin-top: 3px; }
.p-price { font-size: 13.5px; font-weight: 600; color: #271f1f; margin-top: 8px; }
.footer { position: absolute; left: 0; bottom: 0; width: 960px; height: 40px; background: #271f1f; color: #bba293;
display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0.3px; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Ilia Beauty</div>
<div class="navlinks">
<a href="#">Skin</a>
<a href="#">Makeup</a>
<a href="#">Sets</a>
<a href="#">Clean Beauty</a>
</div>
<div class="navcta">Shop New</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="eyebrow"><span class="sun-dot"></span> Skin First, Makeup Second</div>
<div class="headline">Clean beauty, warmed by daylight</div>
<div class="sub">Skin-loving formulas with visible, sun-kissed pigment — makeup that lets your actual skin still show through.</div>
<div class="btn-primary">Shop Bestsellers</div>
</div>
<div class="hero-art">
<div class="tube t1"></div>
<div class="tube-cap t1cap"></div>
<div class="tube t2"></div>
<div class="tube-cap t2cap"></div>
<div class="tube t3"></div>
</div>
</div>
<div class="section-head">
<div class="section-title">Clean Beauty Bestsellers</div>
<div class="section-link">Shop all →</div>
</div>
<div class="grid">
<div class="card">
<div class="badge badge-clean">Clean</div>
<div class="swatch" style="background:#bba293;"></div>
<div class="p-title">Super Serum Skin Tint</div>
<div class="p-meta">SPF 40 · Buildable coverage</div>
<div class="p-price">$42.00</div>
</div>
<div class="card">
<div class="badge badge-new">New</div>
<div class="swatch" style="background:#ff5742;"></div>
<div class="p-title">Balmy Days Lip Tint</div>
<div class="p-meta">Sheer coral wash</div>
<div class="p-price">$26.00</div>
</div>
<div class="card">
<div class="swatch" style="background:#5e5047;"></div>
<div class="p-title">Multi-Stick Cream Blush</div>
<div class="p-meta">Cheeks, lips, eyes</div>
<div class="p-price">$30.00</div>
</div>
<div class="card">
<div class="badge badge-clean">Clean</div>
<div class="swatch" style="background:#ffcf2a;"></div>
<div class="p-title">Bronzing Face Powder</div>
<div class="p-meta">Sun-kissed, no shimmer</div>
<div class="p-price">$38.00</div>
</div>
</div>
<div class="footer">Ilia Beauty — Clean makeup, quietly luxurious.</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfcfc; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfcfc; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.2; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 0.25px; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #fcfcfc; color: #108474;
border: 1px solid #108474; border-radius: 4px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfcfc; color: #121212;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #fbcd0a; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fcfcfc; font-family:'Nunito Sans','Open Sans',Arial,sans-serif; color:#4f4f4f; }
*{box-sizing:border-box;}
.announce{height:30px;background:#fbcd0a;color:#121212;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;letter-spacing:.4px;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #eeeeee;}
.logo{font-family:'Montserrat',Arial,sans-serif;font-size:20px;font-weight:700;color:#108474;letter-spacing:-.3px;}
.navlinks{display:flex;gap:22px;font-family:'Montserrat',Arial,sans-serif;font-size:13px;font-weight:600;color:#4f4f4f;}
.hero{height:216px;display:flex;background:linear-gradient(120deg,#c1e6e6,#f9fafb 70%);padding:0 32px;align-items:center;}
.heroText{width:430px;}
.eyebrow{font-family:'Montserrat',Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#67ba94;margin-bottom:10px;}
.h1{font-family:'Montserrat',Arial,sans-serif;font-size:32px;font-weight:700;letter-spacing:-.5px;line-height:1.2;color:#121212;margin:0 0 12px;}
.sub{font-size:15px;line-height:1.5;color:#4f4f4f;margin:0 0 18px;max-width:370px;}
.btn{display:inline-block;background:#108474;color:#fff;font-family:'Montserrat',Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:.3px;padding:11px 24px;border-radius:4px;}
.boardWrap{margin-left:auto;width:300px;height:184px;background:#fff;border-radius:8px;border:1px solid #aadddd;box-shadow:0 10px 26px rgba(16,132,116,.18);position:relative;padding:14px;}
.boardline{height:6px;border-radius:3px;background:#eeeeee;margin-bottom:12px;}
.boardline.short{width:60%;}
.boardline.accent{background:#a89cc8;width:40%;}
.sec{padding:22px 32px 0;}
.secTitle{font-family:'Montserrat',Arial,sans-serif;font-size:18px;font-weight:600;color:#121212;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:203px;background:#f9fafb;border:1px solid #eeeeee;border-radius:6px;padding:10px;}
.thumb{height:96px;border-radius:4px;margin-bottom:8px;}
.pname{font-family:'Montserrat',Arial,sans-serif;font-size:13px;font-weight:600;color:#121212;margin:0 0 4px;}
.pprice{font-size:13px;color:#108474;font-weight:700;}
.badge{display:inline-block;background:#67ba94;color:#fff;font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2px 7px;border-radius:2px;margin-bottom:6px;}
</style>
<div class="announce">FREE SHIPPING ON ORDERS OVER $75</div>
<div class="nav">
<div class="logo">Think Board</div>
<div class="navlinks"><div>Boards</div><div>Accessories</div><div>Bundles</div><div>Learn</div></div>
</div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">Dry-Erase, Reinvented</div>
<div class="h1">A surface built for thinking out loud.</div>
<div class="sub">Glass whiteboards and modular writing systems for teams who work things out by hand.</div>
<div class="btn">Shop Boards</div>
</div>
<div class="boardWrap">
<div class="boardline" style="width:80%"></div>
<div class="boardline accent"></div>
<div class="boardline short"></div>
<div class="boardline" style="width:70%"></div>
</div>
</div>
<div class="sec">
<div class="secTitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#108474,#c1e6e6);"></div><div class="pname">Glass Board 36x24</div><div class="pprice">$189</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a89cc8,#c1e6e6);"></div><div class="pname">Magnetic Marker Set</div><div class="pprice">$24</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#67ba94,#108474);"></div><div class="pname">Rolling Easel Stand</div><div class="pprice">$149</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c1e6e6,#67ba94);"></div><div class="pname">Frameless Wall Panel</div><div class="pprice">$219</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1d15;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1d15;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1d1d15; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #fb5100; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #ffffff; color: #fb5100;
border: 1px solid #fb5100; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1d1d15;
border: 1px solid #c6c6c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.33; letter-spacing: 0.2px; background: #f5f5f5; color: #333336;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#1d1d15; color:#f0f1f2; font-family:'Helvetica Neue',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #292926;}
.logo{font-size:19px;font-weight:700;color:#fb5100;letter-spacing:0.5px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:700;color:#aaaaaa;text-transform:uppercase;letter-spacing:0.5px;}
.navcta{background:#fb5100;color:#1d1d15;font-size:12px;font-weight:800;padding:9px 18px;border-radius:2px;}
.hero{height:240px;display:flex;padding:0 34px;align-items:center;}
.herotext{width:48%;}
.kicker{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#ff6b00;margin-bottom:10px;}
.herotext h1{font-size:29px;font-weight:800;letter-spacing:-0.5px;margin:0 0 12px;line-height:1.15;}
.herotext p{font-size:13px;color:#737373;margin:0 0 18px;max-width:300px;line-height:1.5;}
.cta{display:inline-block;background:#fb5100;color:#1d1d15;font-size:12px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;padding:12px 24px;border-radius:2px;width:fit-content;}
.chassis{width:44%;position:relative;height:150px;}
.box{position:absolute;left:20px;top:40px;width:220px;height:70px;background:#0e0e0b;border-radius:4px;}
.led{position:absolute;left:36px;top:66px;width:12px;height:12px;border-radius:50%;background:#fb5100;box-shadow:0 0 14px 4px rgba(251,81,0,0.6);}
.antenna{position:absolute;width:6px;height:50px;background:#333336;top:-4px;border-radius:3px;}
.a1{left:70px;} .a2{left:110px;} .a3{left:150px;} .a4{left:190px;}
.spectable{display:flex;gap:1px;background:#292926;margin:0 34px;}
.speccell{flex:1;background:#161611;text-align:center;padding:12px 6px;}
.speclabel{font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#737373;}
.specvalue{font-size:16px;font-weight:800;color:#fb5100;margin-top:4px;}
.grid{display:flex;gap:14px;padding:18px 34px 0;}
.card{width:150px;background:#161611;border-radius:2px;padding:10px;}
.thumb{height:88px;border-radius:2px;margin-bottom:8px;background:#0e0e0b;}
.ptitle{font-size:12px;font-weight:700;color:#f0f1f2;line-height:1.3;height:30px;overflow:hidden;}
.pprice{font-size:13px;font-weight:800;color:#fb5100;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#212121;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:11px;color:#aaaaaa;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Tenda</div>
<div class="navlinks"><span>Routers</span><span>Mesh Systems</span><span>Cameras</span><span>Support</span></div>
<div class="navcta">Compare Specs</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Wi-Fi 7 Tri-Band</div>
<h1>Connections Either Work, Or They Don't</h1>
<p>Networking hardware engineered for coverage, throughput, and one indicator light you can trust.</p>
<div class="cta">Shop Routers</div>
</div>
<div class="chassis"><div class="antenna a1"></div><div class="antenna a2"></div><div class="antenna a3"></div><div class="antenna a4"></div><div class="box"></div><div class="led"></div></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Max Speed</div><div class="specvalue">18 Gbps</div></div>
<div class="speccell"><div class="speclabel">Coverage</div><div class="specvalue">6,500 sq ft</div></div>
<div class="speccell"><div class="speclabel">Bands</div><div class="specvalue">Tri-Band</div></div>
<div class="speccell"><div class="speclabel">Ports</div><div class="specvalue">2.5G x2</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#fb5100,#1d1d15)"></div><div class="ptitle">RX27 Pro Mesh Router</div><div class="pprice">$189.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1d1d15,#fb5100)"></div><div class="ptitle">Nova MW21 Mesh System</div><div class="pprice">$149.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#333336,#fb5100)"></div><div class="ptitle">4G Cat6 LTE Router</div><div class="pprice">$99.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#fb5100,#333336)"></div><div class="ptitle">TC Pro Wi-Fi Camera</div><div class="pprice">$59.99</div></div>
</div>
<div class="footer"><span>© Global Networking Since 1999</span><span>Firmware Downloads</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #121212; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #121212; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:'Ssw Fontello', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; border-bottom:1px solid #dedede; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; }
.navlinks span:first-child { border-bottom:2px solid #121212; padding-bottom:20px; }
.navlinks span:not(:first-child) { color:#666666; }
.search { width:150px; height:34px; border:1px solid #dedede; border-radius:8px; font-size:12px; color:#999999;
display:flex; align-items:center; padding-left:14px; }
.collection-header { padding:22px 40px; border-bottom:1px solid #dedede; }
.collection-header h1 { font-size:28px; font-weight:600; margin:0 0 6px; }
.crumb { font-size:13px; color:#666666; }
.crumb b { color:#121212; font-weight:400; }
.section { padding:20px 40px 0; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { border:1px solid #e8e8e8; border-radius:8px; overflow:hidden; }
.thumb { aspect-ratio:1/1; position:relative; }
.t1 { background:linear-gradient(150deg,#cc3333,#8a1717); }
.t2 { background:linear-gradient(150deg,#2a6f97,#0d3d57); }
.t3 { background:linear-gradient(150deg,#dedede,#a0a0a0); }
.t4 { background:linear-gradient(150deg,#e0b13e,#a67a1a); }
.badge { position:absolute; top:6px; left:6px; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
padding:2px 8px; border-radius:4px; color:#fff; }
.badge.new { background:#121212; }
.badge.sale { background:#cc0000; }
.cbody { padding:8px 14px 14px; }
.card h3 { font-size:16px; font-weight:600; margin:0 0 2px; }
.price { font-size:16px; font-weight:400; margin:0; }
.cta-row { display:flex; gap:10px; padding:20px 40px 0; }
.btn-primary { background:#121212; color:#fff; border:none; border-radius:8px; padding:12px 24px;
font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; height:44px; }
.btn-secondary { background:#fff; color:#121212; border:1px solid #dedede; border-radius:8px; padding:11px 23px;
font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; height:44px; }
footer { background:#f5f5f5; color:#666666; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; border-top:1px solid #dedede; }
footer a { color:#666666; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Bezier Games</p>
<div class="navlinks"><span>Board Games</span><span>Card Games</span><span>Expansions</span><span>Accessories</span></div>
<div class="search">Search…</div>
</nav>
<div class="collection-header">
<h1>Worker Placement</h1>
<div class="crumb">Home / Board Games / <b>Worker Placement</b></div>
</div>
<section class="section">
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge new">New</span></div>
<div class="cbody"><h3>Cutthroat Caverns</h3><p class="price">$44.95</p></div>
</div>
<div class="card">
<div class="thumb t2"></div>
<div class="cbody"><h3>Suburbia</h3><p class="price">$54.95</p></div>
</div>
<div class="card">
<div class="thumb t3"><span class="badge sale">Sale</span></div>
<div class="cbody"><h3>Belfort</h3><p class="price">$39.95</p></div>
</div>
<div class="card">
<div class="thumb t4"></div>
<div class="cbody"><h3>Belle of the Ball</h3><p class="price">$29.95</p></div>
</div>
</div>
<div class="cta-row"><button class="btn-primary">Add to Cart</button><button class="btn-secondary">View Details</button></div>
</section>
<footer>
<span>© Bezier Games</span>
<div><a href="#">Support</a><a href="#">Rulebooks</a><a href="#">Retailers</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f5f4; color: #0c2f30;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f5f4; color: #0c2f30;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; color: #0c2f30; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #626262; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #0e3739; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #f7f5f4; color: #0c2f30;
border: 1px solid #0e3739; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f7f5f4; color: #0c2f30;
border: 1px solid #bcc4c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #626262; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cc4d0f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f5f4; color:#2d2d2d; font-family:Lato,Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 44px;background:#f7f5f4;border-bottom:1px solid #e3e2e1;}
.logo{font-family:Lustria,Georgia,serif;font-size:22px;font-weight:400;color:#0e3739;}
.navlinks{display:flex;gap:24px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#0e3739;}
.hero{height:280px;display:flex;align-items:center;padding:0 44px;background:#0e3739;}
.herotext{width:440px;}
.herotext h1{font-family:Lustria,Georgia,serif;font-size:36px;font-weight:400;color:#fff;margin:0 0 14px;line-height:1.25;}
.herotext p{font-size:14px;color:#bcd4d3;margin:0 0 22px;max-width:340px;}
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 30px;background:#cc4d0f;color:#fff;font-size:14px;font-weight:700;border-radius:9999px;width:fit-content;}
.bedgraphic{position:absolute;right:100px;width:220px;height:140px;}
.pillow{position:absolute;width:90px;height:60px;border-radius:20px;background:#f7f5f4;}
.p1{left:0;top:20px;}
.p2{left:70px;top:0;background:#edcc6c;}
.sec{padding:24px 44px 0;position:relative;}
.sectitle{font-family:Lustria,Georgia,serif;font-size:18px;font-weight:400;margin-bottom:16px;color:#0e3739;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#fff;border-radius:20px;padding:12px;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#2453ce;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:9999px;z-index:2;}
.thumb{height:96px;border-radius:14px;background:#f7f5f4;}
.pname{font-size:13px;font-weight:700;color:#0e3739;margin-top:10px;}
.pprice{font-size:13px;color:#cc4d0f;font-weight:700;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Leesa</div>
<div class="navlinks"><span>Mattresses</span><span>Bedding</span><span>Pillows</span><span>Sale</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Structured enough to support, soft enough to stay.</h1>
<p>Sleep essentials designed like a well-made bed — warm, tactile, restful.</p>
<div class="btn">Shop Mattresses</div>
</div>
<div class="bedgraphic"><div class="pillow p1"></div><div class="pillow p2"></div></div>
</div>
<div class="sec">
<div class="sectitle">Sleep Better Tonight</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb"></div><div class="pname">Original Hybrid Mattress</div><div class="pprice">$999</div></div>
<div class="card"><div class="thumb" style="background:#edcc6c"></div><div class="pname">Legend Luxury Hybrid</div><div class="pprice">$1,599</div></div>
<div class="card"><div class="thumb" style="background:#f7f5f4"></div><div class="pname">Down Alternative Pillow</div><div class="pprice">$89</div></div>
<div class="card"><div class="thumb" style="background:#e3e2e1"></div><div class="pname">Organic Cotton Sheet Set</div><div class="pprice">$129</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0f1111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0f1111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #0f1111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #888c8c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #1c89e3; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #ffffff; color: #0f1111;
border: 1px solid #1c89e3; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #0f1111;
border: 1px solid #c3c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888c8c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; background: #edf8ff; color: #0c3353;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#edf8ff; font-family:'Amazon Ember',Arial,sans-serif; color:#0f1111;
}
*{box-sizing:border-box;}
.topbar{height:22px; background:#0f1111; color:#fff; font-size:10px; display:flex; align-items:center; padding:0 16px; justify-content:space-between;}
.nav{height:56px; background:#fff; display:flex; align-items:center; padding:0 20px; gap:16px; border-bottom:1px solid #ddd;}
.logo{font-size:20px; font-weight:700; color:#1c89e3;}
.searchbox{flex:1; max-width:380px; height:32px; border:1px solid #cccccc; padding:0 12px; font-size:12px; border-radius:4px 0 0 4px;}
.searchbtn{height:32px; width:38px; background:#ff9900; border:none; border-radius:0 4px 4px 0; font-size:12px;}
.navicons{margin-left:auto; font-size:11px; color:#0f1111; display:flex; gap:16px;}
.catbar{height:30px; background:#f0f8ff; display:flex; align-items:center; padding:0 20px; gap:16px; font-size:11px; color:#2162a1; border-bottom:1px solid #d5e8f5;}
.banner{padding:10px 20px 0;}
.bannerbox{background:#fff; border:1px solid #d5e8f5; border-radius:4px; padding:12px 16px; display:flex; align-items:center; gap:20px;}
.bannerText h1{font-size:18px; margin:0 0 4px; color:#0f1111;}
.bannerText p{font-size:12px; margin:0; color:#565959;}
.bannerImg{width:120px; height:60px; background:linear-gradient(135deg,#1c89e3,#ff9900); border-radius:4px; margin-left:auto;}
.section{padding:10px 20px 0;}
.sectitle{font-size:15px; font-weight:700; margin:0 0 10px;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.card{background:#fff; border:1px solid #ddd; border-radius:4px; padding:8px; text-align:center;}
.thumb{height:66px; border-radius:4px; margin-bottom:6px;}
.t1{background:linear-gradient(135deg,#a8e0ff,#1c89e3);}
.t2{background:linear-gradient(135deg,#ffe0a0,#ff9900);}
.t3{background:linear-gradient(135deg,#c8f0d8,#4caf7a);}
.t4{background:linear-gradient(135deg,#ffd0d8,#e36767);}
.pname{font-size:10.5px; height:26px; overflow:hidden; margin-bottom:3px; text-align:left;}
.stars{color:#ff9900; font-size:10px; text-align:left; margin-bottom:3px;}
.pprice{font-size:13px; font-weight:700; text-align:left;}
.pprice small{font-size:9px; vertical-align:top;}
.prime{font-size:9px; color:#2162a1; font-weight:700; text-align:left;}
.footer{position:absolute; bottom:0; left:0; right:0; background:#0f1111; color:#ccc; font-size:9.5px; text-align:center; padding:7px 0;}
</style>
<div class="topbar"><span>Deliver to Seoul 06234</span><span>Hello, Sign in | Returns & Orders | Cart</span></div>
<div class="nav">
<div class="logo">Healthy Nest</div>
<input class="searchbox" placeholder="Search baby essentials..."/>
<button class="searchbtn">🔍</button>
<div class="navicons"><span>Today's Deals</span><span>Baby Registry</span></div>
</div>
<div class="catbar"><span>Diapers & Wipes</span><span>Feeding</span><span>Bath & Skin</span><span>Nursery</span><span>Toys 0-2</span></div>
<div class="banner">
<div class="bannerbox">
<div class="bannerText"><h1>Gentle Essentials for Every Nest</h1><p>Plant-based, pediatrician-reviewed baby care — shipped fast with Prime.</p></div>
<div class="bannerImg"></div>
</div>
</div>
<div class="section">
<div class="sectitle">Frequently Bought Together</div>
<div class="grid">
<div class="card"><div class="thumb t1"></div><div class="pname">Sensitive Skin Diapers, Size 2 (144ct)</div><div class="stars">★★★★☆ 2,104</div><div class="pprice">$34.99</div><div class="prime">✓ prime</div></div>
<div class="card"><div class="thumb t2"></div><div class="pname">Fragrance-Free Baby Wipes, 6-Pack</div><div class="stars">★★★★★ 3,890</div><div class="pprice">$19.99</div><div class="prime">✓ prime</div></div>
<div class="card"><div class="thumb t3"></div><div class="pname">Organic Oatmeal Bath Soak</div><div class="stars">★★★★☆ 812</div><div class="pprice">$14.49</div><div class="prime">✓ prime</div></div>
<div class="card"><div class="thumb t4"></div><div class="pname">Silicone Feeding Set, 5pc</div><div class="stars">★★★★☆ 1,566</div><div class="pprice">$22.99</div><div class="prime">✓ prime</div></div>
</div>
</div>
<div class="footer">© Healthy Nest — An Independent Storefront for Modern Parents</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #008cff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #008cff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2f2f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #008cff; color: #f2f2f2;
border: 1px solid #f2f2f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #008cff; color: #f5f5f5;
border: 1px solid #279dfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #279cfd; color: #f2f2f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#2F3033; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.feedcol { width:520px; padding:20px 0; }
.fh { font-size:22px; font-weight:700; padding:0 24px 10px; }
.row { display:flex; gap:12px; padding:12px 24px; border-bottom:1px solid #F2F2F2; }
.av { width:40px; height:40px; border-radius:50%; flex-shrink:0; }
.line1 { font-size:15px; }
.line1 b { font-weight:600; }
.line1 .ts { color:#6B6E76; font-size:13px; }
.memo { font-size:15px; margin-top:4px; }
.social { display:flex; gap:16px; margin-top:6px; font-size:13px; color:#6B6E76; }
.payside { width:440px; background:#F7F7F7; padding:26px; display:flex; flex-direction:column; gap:18px; }
.balcard { height:170px; border-radius:20px; background:linear-gradient(180deg,#008CFF,#0078DE); padding:18px 20px; color:#fff; display:flex; flex-direction:column; }
.baltop { font-size:14px; opacity:0.85; }
.balnum { font-size:52px; font-weight:700; margin-top:6px; }
.balbtns { margin-top:auto; display:flex; gap:10px; }
.balbtn { background:#fff; color:#008CFF; font-size:13px; font-weight:600; padding:8px 16px; border-radius:16px; }
.paypill { height:50px; border-radius:25px; background:#008CFF; display:flex; box-shadow:rgba(0,140,255,0.25) 0 4px 12px; }
.paypill .half { flex:1; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:16px; }
.paypill .half:first-child { border-right:1px solid rgba(255,255,255,0.5); }
.amtscreen { background:#fff; border-radius:16px; border:1px solid #F2F2F2; padding:20px; text-align:center; }
.amt { font-size:44px; font-weight:700; letter-spacing:-0.6px; }
.memoin { color:#9AA0A8; font-size:15px; margin-top:8px; }
.emojis { display:flex; gap:6px; justify-content:center; margin-top:12px; font-size:18px; }
</style></head>
<body>
<div class="app">
<div class="feedcol">
<div class="fh">Venmo (iOS)</div>
<div class="row"><div class="av" style="background:#F5A623"></div>
<div><div class="line1"><b>Alex</b> paid <b>Jordan</b> <span class="ts">· 2h</span></div>
<div class="memo">🍕🍺 Pizza Friday</div>
<div class="social">♡ 8 💬 2</div></div></div>
<div class="row"><div class="av" style="background:#4BB543"></div>
<div><div class="line1"><b>Priya</b> paid <b>You</b> <span class="ts">· 5h</span></div>
<div class="memo">🚗 Gas money</div>
<div class="social">♡ 3 💬 0</div></div></div>
<div class="row"><div class="av" style="background:#008CFF"></div>
<div><div class="line1"><b>Sam</b> paid <b>Nina</b> <span class="ts">· Yesterday</span></div>
<div class="memo">🏠 Rent split</div>
<div class="social">♡ 12 💬 4</div></div></div>
</div>
<div class="payside">
<div class="balcard"><div class="baltop">Venmo balance</div><div class="balnum">$124.50</div>
<div class="balbtns"><div class="balbtn">Transfer to bank</div><div class="balbtn">Add money</div></div></div>
<div class="amtscreen">
<div class="amt">$24.50</div>
<div class="memoin">What's it for?</div>
<div class="emojis">🍕 🍺 🚗 💰 🎉 ☕</div>
</div>
<div class="paypill"><div class="half">Pay</div><div class="half">Request</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #197b2e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #197b2e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #92be9b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #14371b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #197b2e; color: #ffffff;
border: 1px solid #14371b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #197b2e; color: #f5f5f5;
border: 1px solid #3c8f4e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #92be9b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #18702b; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1e1e1f; box-sizing:border-box;
font-family:"Pretendard JP Variable","Pretendard JP","Pretendard Variable","Apple SD Gothic Neo",sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:Georgia,"Iowan Old Style","Palatino Linotype","Noto Serif KR",serif; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; }
.brand { font-size:16px; font-weight:700; color:#000000; }
.navlinks { display:flex; gap:26px; font-size:16px; color:#000000; }
.navright { display:flex; align-items:center; gap:10px; }
.btn-outline { background:#ffffff; color:#1e1e1f; border:1px solid rgba(109,109,112,0.24);
border-radius:8px; height:40px; padding:0 18px; font-size:15px; font-weight:500; display:flex; align-items:center; }
.btn-primary { background:#197b2e; color:#ffffff; border-radius:8px; height:40px; padding:0 18px;
font-size:15px; font-weight:500; display:flex; align-items:center; }
.hero { text-align:center; padding:8px 40px 0; }
.hero h1 { font-size:40px; font-weight:400; line-height:1.15; color:#14371b; margin:0 auto 10px; max-width:640px; }
.hero p { font-size:16px; color:rgba(109,109,112,0.8); margin:0 auto 20px; max-width:460px; line-height:1.5; }
.tabsrow { display:flex; justify-content:center; gap:8px; margin-bottom:22px; }
.tab { border-radius:9999px; padding:0 20px; height:40px; display:flex; align-items:center;
font-size:15px; color:#000000; }
.tab.active { background:#edf3ed; font-weight:600; }
.searchbar { max-width:600px; margin:0 auto 24px; background:#f9f9fa; border:1px solid rgba(109,109,112,0.12);
border-radius:8px; height:48px; display:flex; align-items:center; padding:0 18px; gap:10px; }
.searchbar .ph { font-size:15px; color:rgba(109,109,112,0.8); }
.searchbar .gobtn { margin-left:auto; background:#197b2e; color:#ffffff; border-radius:9999px;
width:30px; height:30px; display:flex; align-items:center; justify-content:center; font-size:13px; }
.cols { display:flex; gap:20px; padding:0 40px; }
.highlights { flex:1.3; display:flex; flex-direction:column; gap:12px; }
.hl-card { background:#f9f9fa; border-radius:12px; padding:16px 18px; }
.hl-card .mark { background:#edf3ed; color:#000000; padding:1px 4px; border-radius:3px; }
.hl-card p { margin:0; font-size:13px; line-height:1.5; color:#1e1e1f; }
.hl-card .src { margin-top:8px; font-size:12px; color:rgba(109,109,112,0.8); display:flex; gap:8px; align-items:center; }
.hl-card .src .dot { width:5px; height:5px; border-radius:50%; background:#197b2e; }
.side { flex:1; display:flex; flex-direction:column; gap:12px; }
.side .card { background:#ffffff; border-radius:12px; padding:18px; box-shadow:0 1px 4px rgba(0,0,0,0.08); }
.side .card h3 { font-size:17px; margin:0 0 6px; font-weight:400; }
.side .card p { font-size:13px; color:rgba(109,109,112,0.8); margin:0; line-height:1.45; }
.side .badge { display:inline-block; background:#fe8f16; color:#ffffff; font-size:11px; font-weight:500;
border-radius:9999px; padding:2px 10px; margin-top:10px; }
</style></head>
<body>
<nav>
<span class="brand">Liner</span>
<div class="navlinks"><span>Search</span><span>Research</span><span>Write</span><span>Pricing</span></div>
<div class="navright">
<div class="btn-outline">Start for free</div>
<div class="btn-primary">Get started</div>
</div>
</nav>
<section class="hero">
<h1 class="serif">Grounded answers, backed by real sources</h1>
<p>Search, research, and write with citations you can actually check — built for people who don't have time for guesses.</p>
</section>
<div class="tabsrow">
<div class="tab active">Search</div>
<div class="tab">Research</div>
<div class="tab">Write</div>
</div>
<div class="searchbar">
<span class="ph">Ask about renewable energy storage trends in 2026...</span>
<span class="gobtn">→</span>
</div>
<div class="cols">
<div class="highlights">
<div class="hl-card">
<p>"Grid-scale battery costs fell <span class="mark">18% year over year</span>, driven mainly by lithium iron phosphate adoption."</p>
<div class="src"><span class="dot"></span>Energy Policy Review, 2026</div>
</div>
<div class="hl-card">
<p>Long-duration storage pilots are shifting from lithium to <span class="mark">iron-air and thermal batteries</span> for seasonal balancing.</p>
<div class="src"><span class="dot"></span>Grid Futures Journal</div>
</div>
<div class="hl-card">
<p>Three cited sources agree that permitting timelines, not battery chemistry, are now the primary bottleneck.</p>
<div class="src"><span class="dot"></span>3 sources · saved to Research</div>
</div>
</div>
<div class="side">
<div class="card">
<h3 class="serif">Research report</h3>
<p>12 sources reviewed · draft ready in 2 min · exportable with full citations.</p>
<span class="badge">Save 20%</span>
</div>
<div class="card">
<h3 class="serif">Saved highlights</h3>
<p>14 highlights this week across 6 articles. Connected to your active research thread.</p>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #202020;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #202020;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #202020; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #9a9a9a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #202020; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #f9f9f9; color: #202020;
border: 1px solid #202020; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9f9f9; color: #202020;
border: 1px solid #c3c3c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9a9a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #8d1919; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Ideal of Sweden Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:'Avenir Next','Helvetica Neue',Arial,sans-serif;
background:#f9f9f9; color:#4c4c4c;
}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid #e9e9e9;background:#ffffff;}
.logo{font-size:20px;font-weight:700;letter-spacing:3px;color:#202020;text-transform:uppercase;}
.navlinks{position:absolute;left:30px;display:flex;gap:18px;font-size:11.5px;font-weight:600;letter-spacing:.5px;color:#4c4c4c;text-transform:uppercase;}
.navicons{position:absolute;right:30px;display:flex;gap:14px;}
.navicons span{width:18px;height:18px;border-radius:9999px;background:#e9e9e9;display:inline-block;}
.hero{display:flex;padding:26px 30px 0;gap:26px;height:220px;}
.hero-copy{flex:1;display:flex;flex-direction:column;justify-content:center;}
.hero-copy .eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:#910048;text-transform:uppercase;margin-bottom:10px;}
.hero-copy h1{font-size:28px;font-weight:700;color:#202020;line-height:1.2;margin:0 0 12px;letter-spacing:-.3px;}
.hero-copy p{font-size:12.5px;color:#4c4c4c;line-height:1.6;margin:0 0 16px;max-width:340px;}
.hero-btn{display:inline-block;background:#202020;color:#fff;font-size:12px;font-weight:600;letter-spacing:.5px;padding:12px 26px;border-radius:8px;width:fit-content;text-transform:uppercase;}
.hero-swatches{flex:1;display:flex;align-items:center;justify-content:center;gap:16px;}
.case{width:78px;height:158px;border-radius:32px;position:relative;box-shadow:0 10px 24px rgba(0,0,0,.12);}
.case:before{content:"";position:absolute;left:10px;top:10px;right:10px;bottom:10px;border-radius:24px;background:rgba(255,255,255,.18);}
.c1{background:linear-gradient(160deg,#ed2939,#8d1919);}
.c2{background:linear-gradient(160deg,#ffc0ca,#ea9686);margin-top:20px;}
.c3{background:linear-gradient(160deg,#164194,#00247d);}
.section{padding:14px 30px 0;}
.section-title{font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#202020;margin-bottom:12px;text-align:center;}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
.card{background:#ffffff;border:1px solid #e9e9e9;border-radius:8px;padding:8px;text-align:center;}
.card-img{height:74px;border-radius:20px;margin-bottom:8px;position:relative;}
.g1{background:linear-gradient(160deg,#ffc400,#df2507);}
.g2{background:linear-gradient(160deg,#9daf3f,#004b87);}
.g3{background:linear-gradient(160deg,#ffc0ca,#910048);}
.g4{background:linear-gradient(160deg,#00247d,#164194);}
.g5{background:linear-gradient(160deg,#ea9686,#ac7d78);}
.g6{background:linear-gradient(160deg,#ffce00,#bc002d);}
.card-name{font-size:10px;font-weight:600;color:#202020;}
.card-price{font-size:10px;color:#9a9a9a;margin-top:2px;}
</style>
<div class="nav">
<div class="navlinks"><span>Cases</span><span>Collections</span><span>New In</span></div>
<div class="logo">Ideal OF Sweden</div>
<div class="navicons"><span></span><span></span><span></span></div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="eyebrow">Scandinavian Design House</div>
<h1>A case for every color of you.</h1>
<p>Curved silicone shells and printed hardbacks in a spectrum drawn from flags, florals, and fashion runways — reissued every season.</p>
<div class="hero-btn">Shop New Colors</div>
</div>
<div class="hero-swatches">
<div class="case c1"></div>
<div class="case c2"></div>
<div class="case c3"></div>
</div>
</div>
<div class="section">
<div class="section-title">This Week's Palette</div>
<div class="grid">
<div class="card"><div class="card-img g1"></div><div class="card-name">Golden Hour</div><div class="card-price">$34.90</div></div>
<div class="card"><div class="card-img g2"></div><div class="card-name">Olive Harbor</div><div class="card-price">$34.90</div></div>
<div class="card"><div class="card-img g3"></div><div class="card-name">Blush Bloom</div><div class="card-price">$29.90</div></div>
<div class="card"><div class="card-img g4"></div><div class="card-name">Midnight Navy</div><div class="card-price">$34.90</div></div>
<div class="card"><div class="card-img g5"></div><div class="card-name">Terracotta</div><div class="card-price">$29.90</div></div>
<div class="card"><div class="card-img g6"></div><div class="card-name">Nordic Flag</div><div class="card-price">$39.90</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #9ca3af; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ff0000; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #232323; color: #ffffff;
border: 1px solid #ff0000; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #232323; color: #ffffff;
border: 1px solid #161616; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ca3af; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #1a1a1a; color: #9ca3af;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121212; font-family:'Montserrat','Helvetica Neue',Arial,sans-serif; color:#fff; }
*{box-sizing:border-box;}
.nav{height:60px;background:#121212;border-bottom:1px solid #dedede22;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:20px;font-weight:700;letter-spacing:0.5px;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#9ca3af;}
.navlinks .on{color:#fff;border-bottom:2px solid #ff0000;padding-bottom:18px;}
.search{width:220px;height:36px;background:#232323;border:1px solid #dedede44;border-radius:8px;display:flex;align-items:center;padding:0 12px;font-size:13px;color:#9ca3af;}
.hero{height:170px;background:linear-gradient(rgba(18,18,18,0.75),rgba(18,18,18,0.75)),repeating-linear-gradient(135deg,#1a1a1a 0,#1a1a1a 16px,#232323 16px,#232323 32px);display:flex;align-items:center;padding:0 30px;}
.h1{font-size:32px;font-weight:700;letter-spacing:-0.5px;margin:0 0 8px;color:#fff;}
.sub{font-size:14px;color:#cfcfcf;max-width:400px;}
.strip{height:44px;display:flex;align-items:center;gap:8px;padding:0 30px;}
.chip{background:#232323;border:1px solid #dedede33;border-radius:8px;padding:6px 14px;font-size:12px;color:#9ca3af;}
.chip.on{background:#ff0000;color:#fff;}
.grid{display:flex;gap:12px;padding:8px 30px 0;}
.card{width:150px;background:#232323;border-radius:4px;padding:8px;position:relative;}
.thumb{height:100px;border-radius:4px;margin-bottom:8px;}
.badge{position:absolute;top:14px;left:14px;background:#ff0000;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;border-radius:4px;padding:2px 6px;}
.badge.blue{background:#332fd0;}
.ptitle{font-size:14px;font-weight:600;color:#fff;line-height:1.2;height:34px;overflow:hidden;}
.pprice{font-size:12px;color:#9ca3af;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#121212;border-top:1px solid #dedede22;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;color:#9ca3af;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Relapse Records</div>
<div class="navlinks"><div class="on">All</div><div>Vinyl</div><div>Merch</div><div>Pre-Orders</div></div>
<div class="search">Search the label...</div>
</div>
<div class="hero">
<div>
<div class="h1">Three decades of extreme music.</div>
<div class="sub">Limited pressings, pre-orders, and merch from the label that never softened.</div>
</div>
</div>
<div class="strip">
<div class="chip on">Vinyl</div><div class="chip">CD</div><div class="chip">Cassette</div><div class="chip">Apparel</div>
</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#ff0000,#232323)"></div><div class="ptitle">Hollow Earth Doctrine</div><div class="pprice">$22.00</div></div>
<div class="card"><div class="badge blue">Pre-Order</div><div class="thumb" style="background:linear-gradient(135deg,#232323,#332fd0)"></div><div class="ptitle">Ashwake Sessions</div><div class="pprice">$26.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#5f605d,#121212)"></div><div class="ptitle">Bonewrought Litany</div><div class="pprice">$19.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#232323,#ff0000)"></div><div class="ptitle">Chapel of Static</div><div class="pprice">$24.00</div></div>
</div>
<div class="footer"><span>© Relapse Records — since the underground still meant something</span><span>Shipping · Wholesale</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #616161; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #32b6f3; color: #000000;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fefefe; color: #121212;
border: 1px solid #32b6f3; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fefefe; color: #121212;
border: 1px solid #c3c3c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #616161; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.33; letter-spacing: 0.2px; background: #cdfee1; color: #29845a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Figtree',-apple-system,system-ui,sans-serif; background:#fefefe; color:#303030; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;background:#2a3048;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:18px;font-weight:700;color:#fff;letter-spacing:0.3px;}
.logo span{color:#32b6f3;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;color:#fff;}
.hero{height:210px;display:flex;background:#2a3048;}
.herotxt{width:48%;padding:20px 34px;display:flex;flex-direction:column;justify-content:center;color:#fff;}
.tag{font-size:12px;font-weight:600;color:#32b6f3;letter-spacing:0.3px;margin-bottom:8px;}
.herotxt h1{font-size:28px;font-weight:700;margin:0 0 10px;line-height:1.2;}
.herotxt p{font-size:13px;color:#adb2b6;margin:0 0 16px;max-width:280px;}
.cta{width:fit-content;font-size:14px;font-weight:600;background:#32b6f3;color:#fff;padding:12px 26px;border-radius:8px;}
.bank{width:52%;display:flex;align-items:center;justify-content:center;}
.pack{width:180px;height:100px;border-radius:8px;background:linear-gradient(135deg,#48a0e0,#171717);position:relative;}
.pack:before{content:'';position:absolute;left:16px;top:16px;width:40px;height:20px;border-radius:4px;background:#32b6f3;}
.pack:after{content:'';position:absolute;right:16px;top:16px;bottom:16px;width:6px;background:#54575a;}
.specs{display:flex;gap:1px;background:#dedede;margin:18px 34px 0;}
.spec{flex:1;background:#f3f3f3;text-align:center;padding:10px 4px;}
.spec .lbl{font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#616161;}
.spec .val{font-size:20px;font-weight:700;color:#2a3048;margin-top:2px;}
.sec{padding:18px 34px 0;}
.sec h2{font-size:17px;font-weight:700;margin:0 0 14px;}
.grid{display:flex;gap:14px;}
.card{width:210px;background:#fefefe;border:1px solid #dedede;border-radius:12px;padding:12px;position:relative;}
.badge{position:absolute;top:20px;left:20px;font-size:9px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;background:#cdfee1;color:#29845a;padding:2px 8px;border-radius:4px;}
.cimg{height:90px;border-radius:8px;margin-bottom:8px;}
.ctitle{font-size:14px;font-weight:600;}
.cprice{font-size:13px;margin-top:4px;color:#616161;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;background:#2a3048;color:#adb2b6;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:11px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo"><span>Mycharge</span></div>
<div class="navlinks"><div>Power Banks</div><div>Car Chargers</div><div>Cables</div><div>Support</div></div>
</div>
<div class="hero">
<div class="herotxt">
<div class="tag">Adventure Series</div>
<h1>Never run out<br>of charge, again</h1>
<p>High-capacity portable power built for travel, camping, and daily carry.</p>
<div class="cta">Shop Power Banks</div>
</div>
<div class="bank"><div class="pack"></div></div>
</div>
<div class="specs">
<div class="spec"><div class="lbl">Capacity</div><div class="val">10,050mAh</div></div>
<div class="spec"><div class="lbl">Output</div><div class="val">20W</div></div>
<div class="spec"><div class="lbl">Ports</div><div class="val">USB-C + A</div></div>
</div>
<div class="sec">
<h2>Best Sellers</h2>
<div class="grid">
<div class="card"><div class="badge">Charged</div><div class="cimg" style="background:linear-gradient(135deg,#32b6f3,#2a3048)"></div><div class="ctitle">Adventure H2O 6000</div><div class="cprice">$59.99</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#48a0e0,#171717)"></div><div class="ctitle">HubMax Wireless 10K</div><div class="cprice">$79.99</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#171717,#32b6f3)"></div><div class="ctitle">RaceCharge Car Kit</div><div class="cprice">$34.99</div></div>
</div>
</div>
<div class="footer"><span>2-Year Warranty</span><span>Compatibility Register</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #2b2f2d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #2b2f2d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.27; margin: 0; color: #2b2f2d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #f9fafb; color: #2b2f2d;
border: 1px solid #108474; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9fafb; color: #2b2f2d;
border: 1px solid #c6c7c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.3px; background: #ddf6cf; color: #2f3434;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:'Figtree',Arial,sans-serif; color:#4a4a4a; }
*{box-sizing:border-box;}
.nav{height:60px;background:#2b2f2d;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:19px;font-weight:600;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:400;color:#fff;}
.hero{height:210px;display:flex;align-items:center;padding:0 34px;gap:36px;}
.herotext{width:400px;}
h1{font-size:28px;font-weight:600;color:#2b2f2d;margin:0 0 12px;line-height:1.25;}
.sub{font-size:14px;color:#4a4a4a;line-height:1.6;margin:0 0 18px;width:360px;}
.cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;background:#108474;color:#fff;font-size:14px;font-weight:600;border-radius:8px;}
.kb{width:220px;height:100px;background:#2b2f2d;border-radius:10px;display:grid;grid-template-columns:repeat(12,1fr);grid-gap:4px;padding:12px;}
.key{background:#3a3f3d;border-radius:3px;height:14px;}
.key.hl{background:#108474;}
.section{padding:0 34px;}
.sectitle{font-size:20px;font-weight:600;color:#2b2f2d;margin:20px 0 14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:12px;padding:12px;box-shadow:0 2px 6px rgba(0,0,0,.06);position:relative;}
.thumb{height:104px;border-radius:8px;margin-bottom:10px;}
.tag{position:absolute;top:8px;left:8px;font-size:10px;font-weight:600;padding:3px 8px;border-radius:9999px;color:#fff;background:#ed9741;}
.ptitle{font-size:13px;font-weight:600;color:#2b2f2d;line-height:1.3;height:32px;overflow:hidden;}
.pprice{font-size:13px;font-weight:600;color:#de4c39;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Yunzii</div>
<div class="navlinks"><div>Keyboards</div><div>Switches</div><div>Keycaps</div><div>Accessories</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Precision typing, built like a tool.</h1>
<div class="sub">Aluminum-frame mechanical keyboards for people who take their setup seriously.</div>
<div class="cta">Shop Keyboards</div>
</div>
<div class="kb">
<div class="key"></div><div class="key"></div><div class="key hl"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
<div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key hl"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
</div>
</div>
<div class="section">
<div class="sectitle">Featured Keyboards</div>
<div class="grid">
<div class="card"><span class="tag">Sale</span><div class="thumb" style="background:linear-gradient(150deg,#108474,#2b2f2d)"></div><div class="ptitle">YZ75 Wireless Keyboard</div><div class="pprice">$99.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#2b2f2d,#108474)"></div><div class="ptitle">YZ98 Aluminum Keyboard</div><div class="pprice">$189.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#ed9741,#2b2f2d)"></div><div class="ptitle">PBT Keycap Set</div><div class="pprice">$39.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#4a4a4a,#108474)"></div><div class="ptitle">Linear Switch Set (90pc)</div><div class="pprice">$24.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f8f6; color: #101010;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f8f6; color: #101010;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.25; margin: 0; color: #101010; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f9f8f6; color: #101010;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9f8f6; color: #333333;
border: 1px solid #bfbebc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fbcd0a; color: #101010;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9f8f6; color:#101010; box-sizing:border-box;
font-family:'Space Grotesk','Nunito Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; border-bottom:1px solid #dddddd; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.search { background:#f9f8f6; border:1px solid #dddddd; border-radius:999px; padding:9px 20px; font-size:12px; color:#666666; width:200px; }
.hero { padding:24px 36px; display:flex; justify-content:space-between; align-items:center; }
.hero h1 { font-size:30px; font-weight:700; margin:0 0 8px; letter-spacing:-.3px; }
.hero p { font-size:13px; color:#333333; margin:0; max-width:320px; font-family:'Nunito Sans',sans-serif; }
.btn-pill { display:inline-block; background:#108474; color:#fff; font-size:13px; font-weight:700; text-transform:uppercase; padding:12px 24px; border-radius:999px; margin-top:12px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 36px 16px; }
.card { background:#fff; border-radius:8px; overflow:hidden; }
.card-img { height:104px; background:linear-gradient(135deg,#101010,#108474); position:relative; }
.badge { position:absolute; top:8px; left:8px; font-size:9px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:4px; }
.badge.new { background:#fbcd0a; color:#101010; }
.badge.best { background:#a89cc8; color:#fff; }
.cbody { padding:10px 12px; font-family:'Nunito Sans',sans-serif; }
.cbody h3 { font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:600; margin:0 0 4px; }
.stars { color:#fbcd0a; font-size:11px; }
.price { font-size:15px; font-weight:700; margin-top:4px; font-family:'Space Grotesk',sans-serif; }
footer { position:absolute; bottom:0; left:0; right:0; height:48px; background:#101010; color:#888888;
display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; font-family:'Nunito Sans',sans-serif; }
</style></head>
<body>
<nav>
<p class="brand">Beardbrand</p>
<div class="navlinks"><span>Beard Oil</span><span>Grooming</span><span>Blades</span><span>Kits</span></div>
<div class="search">Search...</div>
</nav>
<section class="hero">
<div>
<h1>A Rugged, Refined Grooming System</h1>
<p>Beard oils and utilitarian tools for the modern bearded man — sturdy, unpretentious, effective.</p>
<span class="btn-pill">Shop Beard Oil</span>
</div>
</section>
<div class="grid">
<div class="card">
<div class="card-img"><span class="badge new">New</span></div>
<div class="cbody"><h3>Utility Beard Oil</h3><div class="stars">★★★★★ 4.8</div><div class="price">$29</div></div>
</div>
<div class="card">
<div class="card-img"><span class="badge best">Best Seller</span></div>
<div class="cbody"><h3>Beard Softener</h3><div class="stars">★★★★★ 4.9</div><div class="price">$24</div></div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody"><h3>Sea Salt Spray</h3><div class="stars">★★★★☆ 4.6</div><div class="price">$26</div></div>
</div>
</div>
<footer>
<span>© Beardbrand</span>
<span>Beardbrand · Ingredients · Shipping · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #2c2c2c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #2c2c2c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #2c2c2c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #9ca3af; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #ce2525; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #f5f5f5; color: #2c2c2c;
border: 1px solid #ce2525; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f5f5f5; color: #2c2c2c;
border: 1px solid #c3c3c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ca3af; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #ce2525; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; font-family:'Inter',-apple-system,'Segoe UI',Arial,sans-serif; color:#707070; }
*{box-sizing:border-box;}
.nav{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 38px;background:#fff;border-bottom:1px solid #dcdcdc;}
.logo{font-size:19px;font-weight:700;color:#2c2c2c;letter-spacing:.3px;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;color:#2c2c2c;}
.hero{height:246px;display:flex;background:#f0f0f0;}
.htext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 38px;}
.htext .k{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#ce2525;margin-bottom:12px;}
.htext h1{font-size:28px;font-weight:700;color:#2c2c2c;margin:0 0 10px;line-height:1.28;}
.htext p{font-size:13.5px;line-height:1.55;color:#707070;margin:0 0 18px;max-width:290px;}
.btn{width:fit-content;background:#ce2525;color:#fff;font-size:13px;font-weight:600;padding:12px 24px;border-radius:8px;}
.himg{width:54%;position:relative;background:#dcdcdc;}
.lamp{position:absolute;left:120px;top:36px;width:6px;height:90px;background:#9ca3af;}
.shade{position:absolute;left:90px;top:20px;width:66px;height:40px;border-radius:6px 6px 30px 30px;background:linear-gradient(180deg,#ce2525,#a81e1e);}
.tablebase{position:absolute;left:60px;top:126px;width:200px;height:40px;border-radius:6px;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.08);}
.seclabel{padding:18px 38px 10px;font-size:19px;font-weight:700;color:#2c2c2c;}
.grid{display:flex;gap:14px;padding:0 38px;}
.card{width:150px;background:#fff;border:1px solid #dcdcdc;border-radius:12px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#5a31f4;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 7px;border-radius:8px;}
.thumb{height:76px;border-radius:8px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:600;color:#2c2c2c;height:30px;overflow:hidden;line-height:1.3;}
.price{font-size:13px;font-weight:700;color:#ce2525;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Schoolhouse</div>
<div class="navlinks"><div>Lighting</div><div>Furniture</div><div>Decor</div><div>Sale</div></div>
</div>
<div class="hero">
<div class="htext">
<div class="k">Fall Collection</div>
<h1>A home that feels considered, not staged.</h1>
<p>Heritage lighting and furnishings made to be lived with, not just looked at.</p>
<div class="btn">Shop The Collection</div>
</div>
<div class="himg"><div class="lamp"></div><div class="shade"></div><div class="tablebase"></div></div>
</div>
<div class="seclabel">New Arrivals</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(140deg,#ce2525,#2c2c2c)"></div><div class="pname">Amherst Table Lamp</div><div class="price">$228</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#9ca3af,#2c2c2c)"></div><div class="pname">Cushing Wall Sconce</div><div class="price">$168</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#dcdcdc,#707070)"></div><div class="pname">Warren Side Table</div><div class="price">$395</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#2c2c2c,#5a31f4)"></div><div class="pname">Ashfield Pendant</div><div class="price">$312</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #dd006f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #dd006f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ea87b9; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #dd006f; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #dd006f; color: #f5f5f5;
border: 1px solid #e12784; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ea87b9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #c81084; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#231815; box-sizing:border-box;
font-family:"PT Serif", "Noto Sans TC", Georgia, serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; border-bottom:1px solid #cfcfcf; }
.brand { font-weight:700; font-size:19px; color:#231815; }
.search { flex:1; max-width:340px; margin:0 24px; height:45px; border-radius:99px; background:#fff1f5; color:#5e4d48;
display:flex; align-items:center; padding:0 25px; font-size:14px; }
.btn { background:#dd006f; color:#fff; border:1px solid #dd006f; border-radius:99px; padding:10px 22px; font-size:14px; height:45px; display:flex; align-items:center; }
.hero { padding:26px 30px 14px; text-align:center; }
.hero h1 { font-size:26px; margin:0 0 6px; }
.hero p { font-size:14px; color:#5e4d48; margin:0; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:16px 30px; }
.card { border:1px solid #cfcfcf; border-radius:8px; overflow:hidden; text-align:center; }
.thumb { height:110px; }
.t1 { background:linear-gradient(150deg,#ffd7e6,#dd006f); }
.t2 { background:linear-gradient(150deg,#ffe6c2,#f0a848); }
.t3 { background:linear-gradient(150deg,#dcecff,#7fb0e6); }
.t4 { background:linear-gradient(150deg,#e6dcff,#b98fe0); }
.name { font-size:13px; padding:10px 8px 2px; }
.price { font-size:14px; color:#dd006f; font-weight:700; padding:0 8px 12px; }
</style></head>
<body>
<nav>
<div class="brand">POYA</div>
<div class="search">Search products, brands</div>
<button class="btn">Member Login</button>
</nav>
<div class="hero">
<h1>Discover Everyday Wonders</h1>
<p>Beauty, Trendy, and Enrichment — skincare & makeup · fashion accessories · lifestyle goods</p>
</div>
<div class="grid">
<div class="card"><div class="thumb t1"></div><div class="name">Hydrating Serum</div><div class="price">NT$390</div></div>
<div class="card"><div class="thumb t2"></div><div class="name">Autumn Knit Cardigan</div><div class="price">NT$690</div></div>
<div class="card"><div class="thumb t3"></div><div class="name">Aroma Diffuser</div><div class="price">NT$450</div></div>
<div class="card"><div class="thumb t4"></div><div class="name">Makeup Brush Set</div><div class="price">NT$780</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff385c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff385c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff385c; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff385c; color: #f5f5f5;
border: 1px solid #fd5674; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e43f74; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
header { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:20px; font-weight:700; color:#ff385c; }
.hosting { border:none; background:transparent; color:#222222; border-radius:20px; padding:11px 12px; height:40px; font-size:14px; font-weight:500; }
.tabs { display:flex; gap:6px; padding:0 32px; }
.tab { background:transparent; color:#6a6a6a; border-radius:8px; padding:0 16px; height:32px; font-size:14px; font-weight:500; display:flex; align-items:center; }
.tab.sel { color:#222222; font-weight:700; }
.searchshell { margin:16px 32px; height:66px; border-radius:32px; background:#ebebeb; display:flex; align-items:center;
padding:0 8px 0 24px; gap:16px; }
.searchshell .seg { font-size:14px; font-weight:500; color:#222222; }
.searchshell .div { width:1px; height:32px; background:#dddddd; }
.searchshell .go { margin-left:auto; width:48px; height:48px; border-radius:9999px; background:#ff385c; color:#fff; border:none; }
.sectitle { padding:6px 32px 10px; font-size:22px; font-weight:500; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:0 32px; }
.lcard { display:flex; flex-direction:column; gap:6px; }
.lcard .img { aspect-ratio:1/1; border-radius:12px; background:linear-gradient(150deg,#f2f2f2,#dadada); position:relative; }
.lcard .heart { position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:9999px; background:#f2f2f2; }
.lcard .row { display:flex; justify-content:space-between; font-size:14px; }
.lcard .place { font-weight:500; color:#222222; }
.lcard .rate { color:#222222; }
.lcard .sub { font-size:14px; color:#6a6a6a; }
.lcard .price { font-size:14px; font-weight:700; margin-top:2px; }
footer { position:absolute; bottom:0; left:0; right:0; padding:12px 32px; border-top:1px solid #dddddd; display:flex; justify-content:space-between; font-size:11px; color:#6a6a6a; }
</style></head>
<body>
<header>
<span class="brand">Airbnb</span>
<button class="hosting">Become a host</button>
</header>
<div class="tabs">
<span class="tab sel">Homes</span><span class="tab">Experiences</span><span class="tab">Services</span>
</div>
<div class="searchshell">
<span class="seg">Anywhere</span><span class="div"></span>
<span class="seg">Any week</span><span class="div"></span>
<span class="seg" style="color:#6a6a6a;">Add guests</span>
<button class="go">⌕</button>
</div>
<div class="sectitle">Popular homes</div>
<div class="grid">
<div class="lcard"><div class="img"><div class="heart"></div></div><div class="row"><span class="place">Seoul, Korea</span><span class="rate">★4.92</span></div><span class="sub">Hongdae studio loft</span><span class="price">₩89,000 / night</span></div>
<div class="lcard"><div class="img" style="background:linear-gradient(150deg,#eef4ff,#cfe0ff);"><div class="heart"></div></div><div class="row"><span class="place">Busan, Korea</span><span class="rate">★4.87</span></div><span class="sub">Oceanfront apartment</span><span class="price">₩120,000 / night</span></div>
<div class="lcard"><div class="img" style="background:linear-gradient(150deg,#fff2ec,#ffd8c8);"><div class="heart"></div></div><div class="row"><span class="place">Jeju, Korea</span><span class="rate">★4.95</span></div><span class="sub">Countryside cottage</span><span class="price">₩98,000 / night</span></div>
<div class="lcard"><div class="img" style="background:linear-gradient(150deg,#f0f7ee,#d3e8c9);"><div class="heart"></div></div><div class="row"><span class="place">Gangneung, Korea</span><span class="rate">★4.90</span></div><span class="sub">Cozy beach house</span><span class="price">₩75,000 / night</span></div>
</div>
<footer><span>© Airbnb</span><span>Belong anywhere</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #108474; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f9fafb; color: #1e1e1e;
border: 1px solid #108474; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9fafb; color: #1e1e1e;
border: 1px solid #c2c3c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.25px; background: #fff302; color: #1e1e1e;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:'Nunito Sans',Arial,sans-serif; color:#1e1e1e; }
*{box-sizing:border-box;}
.nav{height:60px;background:#108474;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-size:19px;font-weight:700;}
.navlinks{display:flex;gap:20px;font-size:15px;font-weight:600;color:#fff;}
.navlinks span:first-child{color:#fff302;}
.hero{height:180px;background:#108474;display:flex;align-items:center;padding:0 32px;}
.heroText{width:56%;}
.heroText h1{color:#fff;font-size:30px;font-weight:700;letter-spacing:-.3px;margin:0 0 10px;}
.heroText p{color:#eee;font-size:14px;max-width:340px;margin:0 0 12px;}
.btn{display:inline-block;background:#fff302;color:#1e1e1e;font-size:16px;font-weight:600;padding:12px 24px;border-radius:4px;}
.heroImg{width:44%;height:130px;position:relative;}
.reel{position:absolute;right:60px;top:10px;width:110px;height:110px;border-radius:9999px;background:radial-gradient(circle,#1e1e1e 0 16px,#fbcd0a 16px 20px,#0d6b5e 20px 55px);}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:206px;background:#fff;border-radius:8px;padding:8px;position:relative;}
.badge{position:absolute;top:16px;left:16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.25px;padding:2px 8px;border-radius:4px;z-index:2;}
.thumb{aspect-ratio:2/3;border-radius:4px;}
.ptitle{font-size:16px;font-weight:600;margin:8px 0 4px;}
.pprice{font-size:16px;color:#555;margin:0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Umbrella Entertainment</div>
<div class="navlinks"><span>New Releases</span><span>Cult Classics</span><span>Box Sets</span><span>Pre-Order</span></div>
</div>
<div class="hero">
<div class="heroText">
<h1>Film collecting, done properly.</h1>
<p>Restored classics, cult horror, and limited-edition box sets curated by people who love film.</p>
<div class="btn">Browse Catalog</div>
</div>
<div class="heroImg"><div class="reel"></div></div>
</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#fff302;color:#1e1e1e;">Sale</span><div class="thumb" style="background:linear-gradient(160deg,#108474,#1e1e1e)"></div><div class="ptitle">Midnight Reel Collector's Edition</div><div class="pprice">$34.95</div></div>
<div class="card"><span class="badge" style="background:#108474;color:#fff;">New</span><div class="thumb" style="background:linear-gradient(160deg,#fbcd0a,#1e1e1e)"></div><div class="ptitle">Salt Flats 4K Restoration</div><div class="pprice">$29.95</div></div>
<div class="card"><span class="badge" style="background:#a89cc8;color:#fff;">Signed</span><div class="thumb" style="background:linear-gradient(160deg,#a89cc8,#1e1e1e)"></div><div class="ptitle">The Long Corridor Box Set</div><div class="pprice">$79.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#7b7b7b,#1e1e1e)"></div><div class="ptitle">Harbor Light Blu-ray</div><div class="pprice">$24.95</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ec0047; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ec0047; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff1553; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ec0047; color: #000000;
border: 1px solid #ff1553; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ec0047; color: #f5f5f5;
border: 1px solid #ed2763; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ef0349; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard Variable", "Malgun Gothic", "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { background:#181818; height:210px; padding:20px 30px; display:flex; flex-direction:column; }
.hero nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.brand { color:#ffffff; font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; }
.navlinks span { color:#ffffff; font-size:14px; opacity:0.85; }
.cta { background:#ec0047; color:#ffffff; border:none; border-radius:9999px; height:34px; padding:0 18px; font-size:13px; font-weight:700; }
.hero h1 { color:#ffffff; font-size:32px; font-weight:700; margin:0 0 8px; letter-spacing:-0.5px; }
.hero h1 span { color:#00b7ff; }
.hero p { color:#cccccc; font-size:14px; margin:0 0 12px; }
.glasspill { display:inline-flex; align-items:center; width:fit-content; color:#00b7ff; border:1px solid rgba(255,255,255,0.4);
background:rgba(255,255,255,0.05); border-radius:9999px; height:36px; padding:0 20px; font-size:14px; }
.body { padding:18px 30px; height:390px; }
.tagrow { display:flex; gap:8px; margin-bottom:16px; }
.tag { border:1px solid #ec0047; color:#ec0047; border-radius:5px; font-size:12px; padding:4px 10px; font-weight:500; }
.heatpanel { display:flex; gap:20px; }
.heatmap { width:460px; height:280px; background:#f1f1f1; border-radius:20px; position:relative; overflow:hidden; }
.heatmap .ui-line { position:absolute; left:20px; right:20px; height:10px; background:#dcdcdc; border-radius:4px; }
.l1{top:22px;} .l2{top:44px; width:60%;} .l3{top:70px;}
.blob { position:absolute; border-radius:50%; filter:blur(2px); }
.b1 { width:110px; height:110px; left:40px; top:110px; background:radial-gradient(circle, rgba(246,225,54,0.9), rgba(246,225,54,0) 70%); }
.b2 { width:150px; height:150px; left:170px; top:90px; background:radial-gradient(circle, rgba(236,0,71,0.75), rgba(236,0,71,0) 70%); }
.b3 { width:90px; height:90px; left:320px; top:150px; background:radial-gradient(circle, rgba(19,165,191,0.6), rgba(19,165,191,0) 70%); }
.statcol { flex:1; display:flex; flex-direction:column; gap:12px; }
.sc { background:#e0f6fa; border-radius:20px; padding:16px 18px; }
.sc .n { font-size:22px; font-weight:700; color:#222222; margin:0; }
.sc .l { font-size:12px; color:#444444; margin:4px 0 0; }
.back { display:inline-flex; align-items:center; gap:6px; background:#ffffff; color:#00b7ff; border-radius:20px;
padding:9px 15px; font-size:14px; box-shadow:rgba(0,0,0,0.05) 0px 9px 11px -5px; width:fit-content; margin-top:auto; }
</style></head>
<body>
<div class="hero">
<nav>
<p class="brand">Beusable</p>
<div class="navlinks"><span>Features</span><span>Pricing</span><span>Resources</span></div>
<button class="cta">Get Started</button>
</nav>
<h1>UX <span>Heatmap</span> for every page</h1>
<p>See exactly where users click, scroll, and hesitate — in real time.</p>
<div class="glasspill">Watch a live demo →</div>
</div>
<div class="body">
<div class="tagrow"><span class="tag">Click map</span><span class="tag">Scroll depth</span><span class="tag">Journey map</span></div>
<div class="heatpanel">
<div class="heatmap">
<div class="ui-line l1"></div><div class="ui-line l2"></div><div class="ui-line l3"></div>
<div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
</div>
<div class="statcol">
<div class="sc"><p class="n">62.4%</p><p class="l">Users who scroll past the fold</p></div>
<div class="sc"><p class="n">4.1s</p><p class="l">Avg. time to first click</p></div>
<div class="back">← Back to features</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.4; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #9e1d22; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #ffffff; color: #9e1d22;
border: 1px solid #9e1d22; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; background: #d03b40; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Hiragino Kaku Gothic ProN','Meiryo',Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#9e1d22;}
.logo{font-size:20px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#fff;}
.cart{font-size:12px;font-weight:700;background:#fff;color:#9e1d22;padding:4px 10px;border-radius:4px;}
.hero{height:250px;display:flex;background:#fff;border-bottom:1px solid #eee;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 36px;}
.herotext .kick{font-size:11px;font-weight:700;color:#9e1d22;margin-bottom:10px;}
.herotext h1{font-size:28px;font-weight:700;color:#333;margin:0 0 12px;line-height:1.3;}
.herotext p{font-size:13px;color:#666;margin:0 0 18px;max-width:290px;line-height:1.6;}
.btn{display:inline-block;background:#9e1d22;color:#fff;font-size:13px;font-weight:700;padding:12px 24px;border-radius:4px;width:fit-content;}
.heroimg{width:54%;background:linear-gradient(135deg,#f6f6f6,#9e1d22 90%);position:relative;}
.stamp{position:absolute;right:70px;top:60px;width:110px;height:110px;border:3px solid #9e1d22;border-radius:9999px;display:flex;align-items:center;justify-content:center;background:#fff;font-weight:700;color:#9e1d22;font-size:14px;text-align:center;}
.sec{padding:20px 36px 0;}
.sectitle{font-size:16px;font-weight:700;color:#333;margin-bottom:14px;border-left:4px solid #9e1d22;padding-left:10px;}
.grid{display:flex;gap:1px;background:#e6e6e6;}
.card{flex:1;background:#fff;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#9e1d22;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;}
.thumb{height:110px;background:#f6f6f6;margin-bottom:8px;}
.pname{font-size:12px;font-weight:600;color:#333;line-height:1.3;height:32px;overflow:hidden;}
.pprice{font-size:14px;font-weight:700;color:#9e1d22;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Mandarake</div>
<div class="navlinks"><span>Manga</span><span>Figures</span><span>Cards</span><span>Idol Goods</span></div>
<div class="cart">CART (3)</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kick">今週の入荷</div>
<h1>Rare finds, catalogued daily.</h1>
<p>Secondhand manga, figures, and collectibles from across Japan, graded and priced by condition.</p>
<div class="btn">Browse Inventory</div>
</div>
<div class="heroimg"><div class="stamp">鑑定<br>済み</div></div>
</div>
<div class="sec">
<div class="sectitle">New Arrivals</div>
<div class="grid">
<div class="card"><span class="badge">NEW</span><div class="thumb" style="background:linear-gradient(135deg,#9e1d22,#f6f6f6);"></div><div class="pname">Limited Edition Figure Set</div><div class="pprice">¥12,800</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#666,#f6f6f6);"></div><div class="pname">First Print Manga Volume</div><div class="pprice">¥3,200</div></div>
<div class="card"><span class="badge">SALE</span><div class="thumb" style="background:linear-gradient(135deg,#9e1d22,#666);"></div><div class="pname">Vintage Trading Card Pack</div><div class="pprice">¥5,400</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#333,#f6f6f6);"></div><div class="pname">Idol Photo Book</div><div class="pprice">¥2,600</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #052f47;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #052f47;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #052f47; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5897bf; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f32b27; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #052f47; color: #ffffff;
border: 1px solid #f32b27; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c0cbd1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5897bf; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #70d800; color: #052f47;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:'Montserrat', -apple-system, system-ui, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#052f47; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.brand { color:#fff; font-weight:700; font-size:19px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#81cce3; font-size:14px; font-weight:600; letter-spacing:0.3px; padding-bottom:6px; }
.navlinks span.on { color:#fff; border-bottom:2px solid #f32b27; }
.hero { height:150px; background:#052f47; display:flex; flex-direction:column; align-items:center;
justify-content:center; text-align:center; }
.hero h1 { color:#fff; font-size:30px; font-weight:700; margin:0 0 12px; }
.search { width:460px; height:44px; border-radius:9999px; background:#fff; display:flex; align-items:center;
padding:0 20px; font-size:13px; color:#121212; }
.search::before { content:'🔍 '; color:#f32b27; }
.tags { display:flex; gap:8px; padding:14px 32px; }
.tag { background:#f7f7f7; font-size:13px; font-weight:600; padding:6px 16px; border-radius:9999px; }
.tag.on { background:#f32b27; color:#fff; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:0 32px; }
.card { background:#fff; border:1px solid #dedede; border-radius:12px; overflow:hidden; }
.cover { aspect-ratio:1/1; height:100px; position:relative; }
.badge { position:absolute; top:6px; left:6px; font-size:10px; font-weight:700; letter-spacing:0.8px;
text-transform:uppercase; padding:4px 10px; border-radius:9999px; color:#fff; }
.b-new { background:#70d800; color:#052f47; } .b-sale { background:#f32b27; } .b-ex { background:#d1007a; }
.info { padding:8px 12px 12px; }
.t { font-size:14px; font-weight:600; margin:0 0 4px; }
.p { font-size:14px; color:#f32b27; }
footer { position:absolute; bottom:0; left:0; right:0; height:52px; background:#052f47; color:#5897bf;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
</style></head>
<body>
<nav>
<div class="brand">Fangamer</div>
<div class="navlinks"><span class="on">Plush</span><span>Apparel</span><span>Pins</span><span>Vinyl</span></div>
</nav>
<div class="hero"><h1>Merch made by fans, for fans</h1><div class="search">Search games, artists, plush…</div></div>
<div class="tags"><span class="tag on">Best Sellers</span><span class="tag">New Drops</span><span class="tag">Plush</span><span class="tag">Enamel Pins</span></div>
<div class="grid">
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#f32b27,#d1007a);"><span class="badge b-new">New</span></div>
<div class="info"><p class="t">Slime Plush — Blue</p><p class="p">$24.00</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#70d800,#4fa300);"></div>
<div class="info"><p class="t">Pixel Cat Enamel Pin</p><p class="p">$12.00</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#81cce3,#3f9dbd);"><span class="badge b-sale">Sale</span></div>
<div class="info"><p class="t">Retro Logo Tee</p><p class="p">$22.00</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#d1007a,#8f0056);"><span class="badge b-ex">Exclusive</span></div>
<div class="info"><p class="t">Soundtrack Vinyl LP</p><p class="p">$35.00</p></div></div>
</div>
<footer><span>© Fangamer — Indie game merch</span><span>Shipping · Support · About</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #868a89; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ff5742; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #fafafa; color: #141414;
border: 1px solid #ff5742; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #141414;
border: 1px solid #c0c0c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #868a89; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff5742; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#141414; box-sizing:border-box;
font-family:'Inter', 'Helvetica', system-ui, sans-serif; }
* { box-sizing:border-box; }
.brownfont { font-family:'Helvetica', 'Inter', system-ui, sans-serif; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:19px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:15px; font-weight:500; color:#141414; }
.btn-primary { background:#ff5742; color:#fff; border:none; border-radius:8px; padding:12px 26px; font-size:15px; font-weight:600; }
.hero { background:#f6f6f6; padding:24px 36px; display:flex; align-items:center; gap:30px; }
.hero-copy { flex:1.1; }
.hero h1 { font-size:32px; font-weight:700; line-height:1.15; letter-spacing:-0.6px; margin:0 0 10px; }
.hero p { font-size:15px; color:#545454; margin:0 0 16px; max-width:400px; }
.dots { display:flex; gap:6px; margin-bottom:16px; }
.dot { width:7px; height:7px; border-radius:50%; background:#dedede; }
.dot.active { background:#ff5742; }
.hero-visual { flex:0.9; height:180px; border-radius:12px; background:#fff; position:relative;
box-shadow:0 4px 20px rgba(0,0,0,0.06); }
.hero-visual::before { content:''; position:absolute; left:70px; top:20px; width:60px; height:120px; border-radius:8px 8px 20px 20px;
background:linear-gradient(180deg,#ff5742,#e63e2a); }
.hero-visual::after { content:''; position:absolute; left:150px; top:60px; width:44px; height:80px; border-radius:6px;
background:#4efac0; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:14px 36px 20px; }
.card { background:#fff; border-radius:12px; padding:12px; }
.card .imgbox { aspect-ratio:1/1; height:80px; background:#f6f6f6; border-radius:12px; margin-bottom:8px; position:relative; }
.badge-new { position:absolute; top:8px; left:8px; background:#ff5742; color:#fff; font-size:10px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.card h3 { font-size:16px; font-weight:600; margin:0 0 4px; }
.card .price { font-size:14px; color:#545454; }
footer { background:#141414; color:#fafafa; padding:14px 36px; display:flex; justify-content:space-between;
align-items:center; font-size:12px; }
footer span:last-child { color:#9da1a0; }
</style></head>
<body>
<nav>
<p class="brand">Branch Basics</p>
<div class="navlinks"><span>Concentrate</span><span>Starter Kit</span><span>Refills</span></div>
<button class="btn-primary">Shop Now</button>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>One concentrate. Every surface, safely clean.</h1>
<p>Plant and mineral-based cleaning that replaces the toxic stuff under your sink — dilute it your way, from bathroom to baby toys.</p>
<div class="dots"><span class="dot active"></span><span class="dot"></span><span class="dot"></span></div>
<button class="btn-primary">Shop the Starter Kit</button>
</div>
<div class="hero-visual"></div>
</section>
<section class="grid">
<div class="card"><div class="imgbox"><span class="badge-new">New</span></div><h3>Premium Starter Kit</h3><div class="price">$79.00</div></div>
<div class="card"><div class="imgbox"></div><h3>Concentrate Refill</h3><div class="price">$29.00</div></div>
<div class="card"><div class="imgbox"></div><h3>Reusable Spray Bottles</h3><div class="price">$18.00</div></div>
</section>
<footer>
<span>© Branch Basics</span>
<span>Non-toxic · Plant & Mineral Based</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4fc3c4; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4fc3c4; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #2d6162; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #b7e1da; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4fc3c4; color: #000000;
border: 1px solid #b7e1da; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4fc3c4; color: #111111;
border: 1px solid #45a7a7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #2d6162; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #60c8c8; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbf2eb; color:#292929; box-sizing:border-box;
font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#f5f4ef; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; box-shadow:0 2px 12px rgba(0,0,0,0.08); position:relative; z-index:2; }
.brand { font-size:17px; font-weight:700; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:6px; }
.navitem { font-size:13px; font-weight:500; color:#4d4d4d; border-radius:9999px; padding:7px 12px; }
.icon-btn { width:36px; height:36px; border-radius:9999px; background:#ece9df; border:1.5px solid #d9d2bf; }
.dl-btn { background:#b7e1da; color:#292929; border:1.5px solid #2db59e; border-radius:9999px;
padding:8px 16px; font-size:13px; font-weight:500; }
.hero { position:relative; padding:26px 40px 20px; display:flex; align-items:center; gap:36px; }
.herotext { flex:1; }
.h1 { font-family:"Zilla Slab",Georgia,serif; font-size:38px; font-weight:600; line-height:1.08; margin:0 0 10px;
background:linear-gradient(87deg,#8235b8,#974dcb 30%,#ef4967 70%,#ee604d);
-webkit-background-clip:text; background-clip:text; color:transparent; }
.sub { font-size:16px; font-weight:500; color:#4d4d4d; line-height:1.4; margin:0 0 16px; max-width:380px; }
.ctarow { display:flex; gap:12px; }
.cta-primary { background:#4fc3c4; color:#ffffff; border:none; border-radius:9999px; padding:12px 24px;
font-size:14px; font-weight:700; }
.cta-secondary { background:#ffffff; color:#292929; border:1.5px solid #d9d2bf; border-radius:9999px;
padding:12px 24px; font-size:14px; font-weight:500; }
.collage { width:280px; height:180px; position:relative; flex-shrink:0; }
.piece { position:absolute; border-radius:14px; box-shadow:0 0 8px rgba(0,0,0,0.15); }
.pc1 { width:150px; height:110px; background:linear-gradient(135deg,#ffd166,#ffcf3d); left:0; top:10px; transform:rotate(-7deg); }
.pc2 { width:140px; height:100px; background:linear-gradient(135deg,#7ad2c3,#4fc3c4); right:0; top:0; transform:rotate(6deg); }
.pc3 { width:120px; height:90px; background:linear-gradient(135deg,#ff9fb8,#f85482); left:60px; bottom:0; transform:rotate(4deg); }
.features { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
padding:8px 40px 24px; }
.card { background:#ffffff; border:2px solid #e8e4d9; border-radius:16px; padding:16px 18px;
box-shadow:0 0 12px #E8E8E8; display:flex; flex-direction:column; gap:6px; }
.card .tag { font-size:11px; font-weight:700; color:#4fc3c4; text-transform:uppercase; letter-spacing:0.04em; }
.card h3 { font-size:15px; font-weight:700; margin:0; }
.card p { font-size:12px; color:#4d4d4d; margin:0; line-height:1.4; }
</style></head>
<body>
<nav>
<span class="brand">PicCollage</span>
<div class="navlinks">
<span class="navitem">Templates</span>
<span class="navitem">Stickers</span>
<span class="navitem">Company</span>
</div>
<div style="display:flex; gap:10px; align-items:center;">
<span class="icon-btn"></span>
<button class="dl-btn">Download the App</button>
</div>
</nav>
<section class="hero">
<div class="herotext">
<h1 class="h1">Create & Celebrate</h1>
<p class="sub">The easiest photo & video editing app to add a little magic to your treasured memories.</p>
<div class="ctarow">
<button class="cta-primary">Get PicCollage free</button>
<button class="cta-secondary">See templates</button>
</div>
</div>
<div class="collage">
<div class="piece pc1"></div>
<div class="piece pc2"></div>
<div class="piece pc3"></div>
</div>
</section>
<section class="features">
<div class="card"><span class="tag">Templates</span><h3>A new drop every week</h3><p>Fresh layouts and stickers so you never run out of inspiration.</p></div>
<div class="card"><span class="tag">AI assist</span><h3>Magic that stays out of your way</h3><p>AI tools expand your idea — they never take the creative process out of your hands.</p></div>
<div class="card"><span class="tag">Sharing</span><h3>Made for every small moment</h3><p>Not just birthdays — celebrate the Tuesday photo dump too.</p></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfbfb; color: #16160e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfbfb; color: #16160e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.3px; margin: 0; color: #16160e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.38; margin: 0; color: #9d9d9d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #0205be; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fbfbfb; color: #16160e;
border: 1px solid #0205be; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fbfbfb; color: #16160e;
border: 1px solid #c2c2c0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9d9d9d; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f5f5f5; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fbfbfb; font-family:'Akkurat',-apple-system,system-ui,sans-serif; color:#16160e; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e6e6e6;}
.logo{font-size:20px;font-weight:700;letter-spacing:-.5px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;letter-spacing:.2px;text-transform:uppercase;}
.navlinks .active{color:#0205be;}
.navlinks .inactive{color:#9d9d9d;}
.hero{height:220px;display:flex;align-items:center;padding:0 32px;gap:26px;}
.herotext{width:46%;}
.herotext h1{font-size:32px;font-weight:700;margin:0 0 10px;line-height:1.25;letter-spacing:-.5px;}
.herotext p{font-size:16px;color:#5b5b5b;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#0205be;color:#fff;font-size:15px;font-weight:600;letter-spacing:.3px;padding:12px 24px;border-radius:8px;}
.hmdart{flex:1;height:150px;display:flex;align-items:center;justify-content:center;}
.visor{width:200px;height:80px;background:#16160e;border-radius:40px;position:relative;}
.visor:before{content:'';position:absolute;left:20px;top:20px;width:60px;height:40px;background:#0205be;border-radius:20px;}
.visor:after{content:'';position:absolute;right:20px;top:20px;width:60px;height:40px;background:#0205be;border-radius:20px;}
.spectable{margin:14px 32px 0;border:1px solid #e6e6e6;}
.specrow{display:flex;padding:12px 16px;border-bottom:1px solid #f5f5f5;}
.speclabel{width:200px;font-size:12px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:#5b5b5b;}
.specvalue{font-size:14px;color:#16160e;}
.grid{display:flex;gap:14px;padding:14px 32px 0;}
.card{width:290px;background:#fff;border:1px solid #e6e6e6;padding:20px;}
.thumb{aspect-ratio:16/9;height:110px;margin-bottom:12px;}
.spectag{display:inline-block;background:#f5f5f5;color:#5b5b5b;font-size:11px;font-weight:500;letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;margin-right:6px;}
.ptitle{font-size:16px;font-weight:600;margin-top:8px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#141414;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#aaaaaa;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Varjo</div>
<div class="navlinks"><div class="active">Headsets</div><div class="inactive">Software</div><div class="inactive">Industries</div><div class="inactive">Support</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Simulation fidelity for real-world stakes.</h1>
<p>Human-eye resolution VR for pilot training and surgical simulation.</p>
<div class="cta">Request a Demo</div>
</div>
<div class="hmdart"><div class="visor"></div></div>
</div>
<div class="spectable">
<div class="specrow"><div class="speclabel">Resolution</div><div class="specvalue">70 PPD Human-Eye Res.</div></div>
<div class="specrow"><div class="speclabel">Field of View</div><div class="specvalue">115° Horizontal</div></div>
<div class="specrow"><div class="speclabel">Certification</div><div class="specvalue">Aviation & Medical Grade</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#0205be,#16160e)"></div><div class="spectag">Simulation</div><div class="spectag">Enterprise</div><div class="ptitle">XR-4 Mixed Reality Headset</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#16160e,#0205be)"></div><div class="spectag">Compact</div><div class="ptitle">Aero VR Headset</div></div>
</div>
<div class="footer"><span>© Human-Eye Resolution VR</span><span>Contact Sales · Documentation</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #1a1a2e; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fafafa; color: #1a1a2e;
border: 1px solid #1a1a2e; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #fafafa; color: #222222;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #e8e8e8; color: #1a1a2e;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:'Helvetica Neue', Arial, sans-serif; color:#333333; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;background:#1a1a2e;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:600;color:#fff;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;letter-spacing:0.3px;color:#fff;}
.navlinks span.active{background:rgba(255,255,255,0.1);padding:6px 10px;border-radius:4px;}
.subnav{height:36px;background:#f2f2f2;display:flex;align-items:center;gap:20px;padding:0 32px;font-size:12px;color:#666;border-bottom:1px solid #d4d4d4;}
.subnav span:first-child{color:#1a1a2e;border-bottom:2px solid #1a1a2e;padding-bottom:8px;}
.hero{height:180px;background:#1a1a2e;display:flex;align-items:center;padding:0 32px;}
.heroText{max-width:520px;}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#e8e8e8;opacity:0.85;margin-bottom:8px;}
.h1{font-size:26px;font-weight:600;color:#fff;margin:0 0 8px;letter-spacing:-0.4px;}
.sub{font-family:Georgia,serif;font-size:15px;color:#fff;opacity:0.85;line-height:1.5;margin:0;}
.grid{display:flex;gap:16px;padding:22px 32px 0;}
.card{width:210px;background:#fff;border:1px solid #d4d4d4;}
.thumb{height:150px;background:linear-gradient(160deg,#1a1a2e,#333);position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#e8e8e8;color:#1a1a2e;font-size:9px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;padding:3px 7px;}
.ctitle{font-family:'Helvetica Neue',Arial,sans-serif;font-size:15px;font-weight:600;padding:12px 12px 2px;color:#222;}
.cauthor{font-family:Georgia,serif;font-size:12px;color:#666;padding:0 12px 8px;}
.cprice{font-size:13px;font-weight:600;color:#222;padding:0 12px 12px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:64px;background:#1a1a2e;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#fff;font-size:11px;opacity:0.85;}
.imprints{display:flex;gap:6px;}
.impd{width:30px;height:14px;background:rgba(255,255,255,0.15);}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mit Press</div>
<div class="navlinks"><span class="active">Books</span><span>Journals</span><span>Open Access</span><span>Series</span></div>
</div>
<div class="subnav"><span>Featured</span><span>New Releases</span><span>Essential Knowledge</span><span>Bestsellers</span></div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">Essential Knowledge Series</div>
<div class="h1">Rigorous ideas, plainly argued.</div>
<p class="sub">Scholarship built for the reader who needs to find the citation in under three seconds.</p>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge">Series</span></div><div class="ctitle">The Architecture of Reason</div><div class="cauthor">M. Ferreira</div><div class="cprice">$24.95</div></div>
<div class="card"><div class="thumb"><span class="badge">New</span></div><div class="ctitle">Systems of Practical Ethics</div><div class="cauthor">D. Okonkwo</div><div class="cprice">$32.00</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">A Short History of Computing</div><div class="cauthor">R. Tanaka</div><div class="cprice">$19.95</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Language, Logic, Form</div><div class="cauthor">S. Whitfield</div><div class="cprice">$27.50</div></div>
</div>
<div class="footer"><span>© Mit Press · Cambridge, MA</span><div class="imprints"><div class="impd"></div><div class="impd"></div><div class="impd"></div><div class="impd"></div><div class="impd"></div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00e013; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00e013; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00e013; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00e013; color: #000000;
border: 1px solid #27e337; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00bc10; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:'Cash Sans','Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:17px; font-weight:600; margin:0; color:#fff; }
.navlinks { display:flex; gap:24px; font-size:16px; font-weight:600; }
.actions { display:flex; gap:10px; }
.btn-light { background:#fff; color:#000; border:none; border-radius:999px; height:40px; padding:0 18px; font-size:13px; font-weight:500; }
.btn-outline { background:transparent; color:#fff; border:1px solid #444; border-radius:999px; height:40px; padding:0 18px; font-size:13px; font-weight:500; }
.hero { display:flex; align-items:center; padding:20px 40px; gap:36px; }
.hero-l { flex:1.1; }
.hero h1 { font-size:52px; font-weight:400; line-height:1.0; margin:0 0 16px; }
.hero .g { color:#00e013; }
.hero p { font-size:16px; color:#b8b8b8; margin:0 0 20px; max-width:340px; }
.btn-green { background:#00e013; color:#000; border:none; border-radius:999px; height:46px; padding:0 22px; font-size:14px; font-weight:500; }
.card-wrap { flex:1; display:flex; justify-content:center; }
.cash-card { width:280px; height:170px; border-radius:20px; background:linear-gradient(135deg,#00e013,#0bbf14);
padding:20px; position:relative; box-shadow:0 20px 60px rgba(0,224,19,0.25); }
.cash-card .top { display:flex; justify-content:space-between; font-size:13px; font-weight:500; color:#000; }
.cash-card .num { font-size:20px; letter-spacing:2px; color:#000; margin-top:50px; font-weight:600; }
.cash-card .name { font-size:13px; color:#000; margin-top:10px; font-weight:500; }
.bottom { background:#27455c; padding:26px 40px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.b-card { background:#000; border-radius:20px; padding:18px; }
.b-card .n { font-size:24px; font-weight:500; color:#00e013; }
.b-card .l { font-size:12px; color:#c9c9c9; margin-top:6px; }
.citron { display:inline-block; background:#d8ff14; color:#000; border-radius:9999px; padding:3px 10px; font-size:11px; font-weight:500; margin-bottom:8px; }
</style></head>
<body>
<nav>
<p class="brand">Cash App</p>
<div class="navlinks"><span>Personal</span><span>Business</span><span>Card</span></div>
<div class="actions"><button class="btn-outline">Log in</button><button class="btn-light">Sign up</button></div>
</nav>
<section class="hero">
<div class="hero-l">
<h1>The easy way<br>to <span class="g">send money.</span></h1>
<p>Spend, save, invest, and send — all from one green button.</p>
<button class="btn-green">Get Cash App</button>
</div>
<div class="card-wrap">
<div class="cash-card">
<div class="top"><span>Cash Card</span><span>●●●●</span></div>
<div class="num">•••• 4471</div>
<div class="name">ALEX MORGAN</div>
</div>
</div>
</section>
<section class="bottom">
<div class="b-card"><span class="citron">Boost</span><div class="n">15%</div><div class="l">Cash back at coffee shops</div></div>
<div class="b-card"><div class="n">$0</div><div class="l">Monthly fees, always</div></div>
<div class="b-card"><div class="n">Instant</div><div class="l">Deposits, no waiting</div></div>
<div class="b-card"><div class="n">Bitcoin</div><div class="l">Buy & sell in the app</div></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f2ec; color: #201111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f2ec; color: #201111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.25; letter-spacing: 0.02em; margin: 0; color: #201111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.6; margin: 0; color: #a28586; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.12em; background: #ab8c52; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.12em; background: transparent; color: #212121;
border: 1px solid #ab8c52; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #f5f2ec; color: #212121;
border: 1px solid #c0bab5; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a28586; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 9px; font-weight: 600; line-height: 1.3; letter-spacing: 0.14em; background: #ab8c52; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f2ec; font-family:'Poppins',sans-serif; color:#2e2e2e; }
*{box-sizing:border-box;}
.announce{height:36px;background:#643335;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;}
.nav{height:64px;background:#f5f2ec;border-bottom:1px solid #ece7db;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:20px;letter-spacing:.04em;color:#212121;}
.navlinks{display:flex;gap:26px;font-size:13px;letter-spacing:.08em;color:#212121;}
.hero{height:280px;display:flex;align-items:center;padding:0 40px;background:#f5f2ec;}
.heroText{width:46%;}
.kicker{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#ab8c52;margin-bottom:14px;}
.h1{font-size:42px;font-weight:300;line-height:1.15;letter-spacing:.02em;margin:0 0 14px;}
.sub{font-size:15px;color:#2e2e2e;line-height:1.65;margin:0 0 22px;max-width:340px;}
.cta{display:inline-block;background:#ab8c52;color:#fff;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:14px 32px;}
.heroImg{width:54%;height:220px;position:relative;background:radial-gradient(circle at 40% 40%,#e8d4ae,#ab8c52 70%);}
.heroImg:before{content:'';position:absolute;width:90px;height:90px;border-radius:9999px;border:3px solid #643335;top:50px;left:60px;}
.heroImg:after{content:'';position:absolute;width:50px;height:50px;border-radius:9999px;background:#debeb3;bottom:30px;right:70px;}
.grid{display:flex;gap:20px;padding:20px 40px 0;}
.card{width:200px;position:relative;}
.thumb{height:130px;background:#f7f4ef;margin-bottom:10px;position:relative;}
.gold-badge{position:absolute;top:8px;left:8px;background:#ab8c52;color:#fff;font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;}
.new-badge{position:absolute;top:8px;left:8px;background:#643335;color:#fff;font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;}
.ptitle{font-family:'Poppins',sans-serif;font-size:14px;font-weight:500;color:#212121;margin-bottom:2px;}
.pmeta{font-size:12px;color:#a49c8b;margin-bottom:6px;}
.pprice{font-size:14px;color:#212121;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#282c2e;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#a49c8b;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">Complimentary resizing on every order</div>
<div class="nav">
<div class="logo">Marrow Fine</div>
<div class="navlinks"><span>Rings</span><span>Necklaces</span><span>Earrings</span><span>Bespoke</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="kicker">Modern Heirlooms</div>
<div class="h1">Made to be worn twice a lifetime.</div>
<div class="sub">Hand-poured gold and diamonds cut to carry the memory of something already loved.</div>
<div class="cta">Discover the Collection</div>
</div>
<div class="heroImg"></div>
</div>
<div class="grid">
<div class="card"><div class="gold-badge">Bestseller</div><div class="thumb"></div><div class="ptitle">Whisper Solitaire Ring</div><div class="pmeta">14k gold · 0.5ct</div><div class="pprice">$2,180</div></div>
<div class="card"><div class="new-badge">New Arrival</div><div class="thumb"></div><div class="ptitle">Heirloom Bezel Band</div><div class="pmeta">18k gold · lab grown</div><div class="pprice">$1,640</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Dune Drop Earrings</div><div class="pmeta">14k gold · pearl</div><div class="pprice">$980</div></div>
</div>
<div class="footer"><span>© Modern Heirlooms Fine Jewelry</span><span>Ring Size Guide · Care</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbf9f3; color: #463a29;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbf9f3; color: #463a29;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.5; margin: 0; color: #463a29; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #959264; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.5px; background: #ba6a6a; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.5px; background: transparent; color: #ba6a6a;
border: 1px solid #ba6a6a; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fbf9f3; color: #463a29;
border: 1px solid #cec9c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #959264; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.6px; background: #f4f6f8; color: #959264;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fbf9f3; font-family:'Cabin','Lato',sans-serif; color:#463a29; }
*{box-sizing:border-box;}
.announce{height:40px;background:#f4ad3a;display:flex;align-items:center;justify-content:center;font-family:'AvenirCustom','Cabin',sans-serif;font-size:12px;color:#121212;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #dedede;}
.logo{font-family:'PPEditorial',Georgia,serif;font-size:22px;}
.navlinks{display:flex;gap:20px;font-family:'AvenirCustom','Cabin',sans-serif;font-size:14px;font-weight:500;color:#463a29;}
.hero{height:230px;display:flex;align-items:center;padding:0 34px;background:#f4f6f8;}
.herotext{width:420px;}
.herotext h1{font-family:'PPEditorial',Georgia,serif;font-size:38px;font-weight:400;line-height:1.15;margin:0 0 12px;letter-spacing:-.5px;}
.herotext p{font-size:14px;color:#5c4a36;margin:0 0 16px;max-width:340px;}
.btn{display:inline-block;background:#ba6a6a;color:#fff;font-family:'AvenirCustom','Cabin',sans-serif;font-size:14px;font-weight:600;letter-spacing:.5px;padding:12px 24px;border-radius:8px;}
.heroart{flex:1;height:170px;border-radius:12px;background:linear-gradient(135deg,#f4ad3a,#ba6a6a 65%);}
.grid{display:flex;gap:14px;padding:16px 30px 0;}
.card{width:210px;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(70,58,41,.08);padding:12px;}
.thumb{height:110px;background:#f4f6f8;border-radius:8px;margin-bottom:8px;}
.ctitle{font-family:'AvenirCustom','Cabin',sans-serif;font-size:15px;font-weight:600;margin:0;}
.cprice{font-family:'AvenirCustom','Cabin',sans-serif;font-size:14px;font-weight:700;margin-top:4px;}
.swatches{display:flex;gap:6px;margin-top:8px;}
.sw{width:16px;height:16px;border-radius:9999px;border:2px solid transparent;}
.sw.on{border-color:#463a29;}
.footer{position:absolute;bottom:0;left:0;right:0;height:96px;background:#463a29;color:#fbf9f3;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">Free shipping on orders over $50 · New 2027 collection now live</div>
<div class="nav">
<div class="logo">Passion Planner</div>
<div class="navlinks"><div>Planners</div><div>Journals</div><div>Accessories</div><div>Digital</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>A plan for the life you actually want.</h1>
<p>Undated planners built for goal-setting, reflection, and the everyday follow-through.</p>
<div class="btn">Shop Planners</div>
</div>
<div class="heroart"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ctitle">Weekly Planner, Undated</div><div class="cprice">$36.95</div><div class="swatches"><div class="sw on" style="background:#ba6a6a;"></div><div class="sw" style="background:#959264;"></div><div class="sw" style="background:#f4ad3a;"></div><div class="sw" style="background:#463a29;"></div></div></div>
<div class="card"><div class="thumb" style="background:#fef8e2;"></div><div class="ctitle">Daily Planner, A5</div><div class="cprice">$32.95</div><div class="swatches"><div class="sw" style="background:#ba6a6a;"></div><div class="sw on" style="background:#959264;"></div><div class="sw" style="background:#f4ad3a;"></div></div></div>
<div class="card"><div class="thumb" style="background:#dedede;"></div><div class="ctitle">Gratitude Journal, Pocket</div><div class="cprice">$18.95</div><div class="swatches"><div class="sw on" style="background:#463a29;"></div><div class="sw" style="background:#ba6a6a;"></div></div></div>
<div class="card"><div class="thumb" style="background:#f4ad3a;"></div><div class="ctitle">Goal Setting Workbook</div><div class="cprice">$24.95</div><div class="swatches"><div class="sw on" style="background:#f4ad3a;"></div><div class="sw" style="background:#463a29;"></div></div></div>
</div>
<div class="footer"><span>© Passion Planner</span><span>Shop Community Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #1a237e; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #1a1a1a;
border: 1px solid #1a237e; border-radius: 4px;
padding: 9px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e53935; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background:#fff; color:#333; }
*{box-sizing:border-box;}
.nav{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:19px;font-weight:700;color:#1a237e;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#333;}
.searchbox{width:220px;height:30px;border:1px solid #e0e0e0;display:flex;align-items:center;padding:0 10px;font-size:12px;color:#999;}
.divider{height:2px;background:#1a237e;margin:0 30px;}
.hero{padding:26px 30px;}
.hero h1{font-size:24px;font-weight:700;color:#1a1a1a;margin:0 0 8px;}
.hero p{font-size:14px;color:#666;margin:0;max-width:520px;}
.grid{display:flex;gap:14px;padding:8px 30px 0;}
.card{width:150px;}
.thumb{aspect-ratio:1/1;height:145px;margin-bottom:8px;}
.artist{font-size:14px;font-weight:700;color:#1a1a1a;}
.album{font-size:13px;color:#666;margin-top:1px;}
.pprice{font-size:14px;font-weight:700;color:#1a237e;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#f5f5f5;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;color:#666;}
.footer span{margin-left:16px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Jet Set Records</div>
<div class="navlinks"><div>Jazz</div><div>Soul</div><div>Rock</div><div>New Arrivals</div><div>Sell</div></div>
<div class="searchbox">Search catalog…</div>
</div>
<div class="divider"></div>
<div class="hero">
<h1>Worldwide Shipping, Every Tuesday</h1>
<p>New pressings and original vinyl, shipped from Japan every week. Deferential to the music, quiet on everything else.</p>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a237e,#333)"></div><div class="artist">Yusef Marchand</div><div class="album">Blue Harbor Sessions</div><div class="pprice">$32.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#333,#1a237e)"></div><div class="artist">Nadia Okonkwo</div><div class="album">Late Bloom — LP</div><div class="pprice">$26.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#666,#1a237e)"></div><div class="artist">The River Line</div><div class="album">Static Season</div><div class="pprice">$24.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a237e,#999)"></div><div class="artist">Kenji Amano Trio</div><div class="album">Nocturne 07</div><div class="pprice">$29.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#333,#666)"></div><div class="artist">Margit Sol</div><div class="album">Quiet Hour</div><div class="pprice">$21.00</div></div>
</div>
<div class="footer"><span>Worldwide Shipping</span><span>Instagram<span> Twitter</span><span> Bandcamp</span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2a6fd6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2a6fd6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9ab9e7; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b1e3f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2a6fd6; color: #0b1e3f;
border: 1px solid #0b1e3f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2a6fd6; color: #f5f5f5;
border: 1px solid #4a84db; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ab9e7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2562be; color: #0b1e3f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0B1E3F; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:Georgia,"Times New Roman",serif; }
.sky { position:relative; width:960px; height:640px;
background:linear-gradient(180deg,#2A6FD6 0%,#1A4A8F 46%,#0B1E3F 100%);
display:flex; align-items:center; }
.hero { position:relative; z-index:2; width:470px; padding:0 56px; display:flex; flex-direction:column; gap:14px; }
.greet { font-size:32px; font-weight:600; letter-spacing:-0.3pt; margin:0; }
.tag { font-size:16px; color:#B8C4D8; line-height:1.55; max-width:360px; margin:0; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
.row { display:flex; gap:12px; align-items:center; margin-top:8px; }
.cta { background:#2A6FD6; color:#FFFFFF; border-radius:26px; padding:14px 30px; font-weight:600; font-size:16px; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
.cta2 { background:rgba(255,255,255,0.12); border:1pt solid rgba(255,255,255,0.16); color:#FFFFFF; border-radius:26px; padding:13px 24px; font-weight:600; font-size:15px; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
.glasscard { margin-top:16px; background:rgba(255,255,255,0.08); border:1pt solid rgba(255,255,255,0.12); border-radius:20px; padding:18px 20px; max-width:360px; }
.glasscard .k { font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#FFFFFF; opacity:0.8; }
.glasscard .t { font-size:20px; font-weight:600; margin:6px 0 2px; }
.glasscard .s { font-size:13px; color:#B8C4D8; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
.streak { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:13px; color:#B8C4D8; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
.flame { width:14px; height:14px; border-radius:50% 50% 50% 0; background:#F2C94C; transform:rotate(45deg); }
.phonewrap { position:relative; z-index:2; width:490px; height:640px; display:flex; align-items:center; justify-content:center; }
.phone { position:relative; width:296px; height:604px; border-radius:46px; overflow:hidden;
background:linear-gradient(180deg,#2A6FD6 0%,#123067 60%,#0B1E3F 100%);
box-shadow:0 30px 90px rgba(0,0,0,0.55); border:1pt solid rgba(255,255,255,0.14); }
.notch { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:120px; height:22px; background:#08152c; border-radius:12px; z-index:6; }
.ptop { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:34px 20px 0; }
.avatar { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,0.18); }
.ptopstreak { font-size:12px; color:#FFFFFF; display:flex; align-items:center; gap:6px; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
.bubblezone { position:relative; height:340px; display:flex; align-items:center; justify-content:center; }
.glow { position:absolute; width:230px; height:230px; border-radius:50%; background:radial-gradient(circle, rgba(74,133,224,0.55), rgba(74,133,224,0) 70%); }
.bubble { position:relative; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,0.92);
box-shadow:0 0 50px rgba(74,133,224,0.55); display:flex; align-items:center; justify-content:center; }
.cue { position:absolute; bottom:36px; left:0; right:0; text-align:center; font-size:19px; color:#FFFFFF; letter-spacing:0.4pt; }
.ringzone { position:relative; margin:0 auto; width:88px; height:88px; }
.ring { position:absolute; inset:0; border-radius:50%; border:3pt solid rgba(255,255,255,0.16); }
.ringfill { position:absolute; inset:0; border-radius:50%; background:conic-gradient(#2A6FD6 0deg 230deg, rgba(255,255,255,0) 230deg 360deg); }
.ringcenter { position:absolute; inset:8px; border-radius:50%; background:rgba(11,30,63,0.6); display:flex; align-items:center; justify-content:center; }
.playglyph { width:0; height:0; border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:14px solid #FFFFFF; margin-left:4px; }
.caption { text-align:center; font-size:12px; color:#B8C4D8; margin-top:14px; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
.ptabbar { position:absolute; left:14px; right:14px; bottom:16px; height:56px; border-radius:24px;
background:rgba(11,30,63,0.72); border:1pt solid rgba(255,255,255,0.12);
display:flex; align-items:center; justify-content:space-around; }
.tdot { width:20px; height:20px; border-radius:6px; background:rgba(255,255,255,0.55); }
.tdot.on { background:#2A6FD6; }
</style></head>
<body>
<div class="sky">
<div class="hero">
<div style="font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#FFFFFF;opacity:0.55;margin-bottom:4px;">Calm (iOS)</div>
<p class="tag" style="margin-bottom:-6px; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.7);">Good evening</p>
<h1 class="greet serif">Breathe. Rest. Return.</h1>
<p class="tag">A night-sky gradient, glass cards you can see the sky through, and a breathing bubble that expands and contracts on a true 4-7-8 cycle.</p>
<div class="row">
<div class="cta">Play</div>
<div class="cta2">Add to favorites</div>
</div>
<div class="glasscard">
<div class="k">Daily Calm</div>
<div class="t serif">Falling Asleep</div>
<div class="s">Narrated by Tamara · 10 min</div>
</div>
<div class="streak"><span class="flame"></span> 214-day streak</div>
</div>
<div class="phonewrap">
<div class="phone">
<div class="notch"></div>
<div class="ptop"><span class="avatar"></span><span class="ptopstreak"><span class="flame" style="width:10px;height:10px;"></span>214</span></div>
<div class="bubblezone">
<span class="glow"></span>
<span class="bubble"></span>
<span class="cue serif">Breathe in</span>
</div>
<div class="ringzone">
<span class="ring"></span>
<span class="ringfill"></span>
<span class="ringcenter"><span class="playglyph"></span></span>
</div>
<div class="caption">6 min remaining</div>
<div class="ptabbar">
<span class="tdot"></span><span class="tdot"></span><span class="tdot on"></span><span class="tdot"></span><span class="tdot"></span>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0176d3; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0176d3; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bce6; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b5cab; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0176d3; color: #ffffff;
border: 1px solid #0b5cab; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0176d3; color: #f5f5f5;
border: 1px solid #288ad8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bce6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0372cd; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#080707; box-sizing:border-box;
font-family:"Salesforce Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
* { box-sizing:border-box; }
.display { font-family:"Century Gothic", "Futura", "Avenir Next", -apple-system, sans-serif; font-weight:400; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #e5e5e5; background:#ffffff; }
.navleft { display:flex; align-items:center; gap:28px; }
.brand { font-size:17px; font-weight:700; color:#032d60; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:22px; font-size:13.5px; color:#080707; }
.navlinks span.on { color:#0176d3; font-weight:700; }
.btn-primary { background:#0176d3; color:#ffffff; border:2px solid #0176d3; border-radius:4px;
padding:8px 20px; font-size:13.5px; font-weight:700; letter-spacing:0.02em; white-space:nowrap; }
.btn-secondary { background:#ffffff; color:#0176d3; border:2px solid #0176d3; border-radius:4px;
padding:8px 20px; font-size:13.5px; font-weight:700; letter-spacing:0.02em; white-space:nowrap; }
.hero { padding:22px 32px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
.hero h1 { font-size:38px; line-height:1.05; color:#002c6e; margin:0; max-width:640px; }
.hero p { font-size:14px; color:#080707; margin:0; max-width:460px; line-height:1.5; }
.hero .row { display:flex; gap:10px; margin-top:4px; }
.agentband { background:linear-gradient(120deg, #002c6e, #032d60 55%, #014486);
padding:20px 32px 22px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.agentband h2 { font-size:22px; color:#ffffff; margin:0; text-align:center; }
.tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; width:100%; }
.tile { background:rgba(255,255,255,0.05); border:2px solid rgba(255,255,255,0.1); border-radius:24px;
padding:12px 14px; display:flex; flex-direction:column; gap:4px; }
.tile .nm { font-size:13.5px; font-weight:700; color:#ffffff; }
.tile .ds { font-size:10.5px; color:#aacbff; line-height:1.35; }
.bands { display:flex; }
.band { flex:1; padding:16px 22px; }
.band.grey { background:#f4f4f4; }
.band.tint { background:#eaf5fe; }
.band h3 { font-size:14.5px; color:#032d60; margin:0 0 4px; }
.band p { font-size:11.5px; color:#080707; line-height:1.45; margin:0 0 8px; }
.learnmore { font-size:11px; font-weight:700; color:#032d60; }
.carousel { display:flex; align-items:center; justify-content:space-between; padding:12px 32px;
background:#080707; }
.cc-btn { width:30px; height:30px; border-radius:9999px; border:2px solid #ffffff; color:#ffffff;
display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.card-media { flex:1; margin:0 16px; background:#181818; border-radius:22px; padding:10px 18px;
display:flex; align-items:center; justify-content:space-between; }
.card-media .qt { font-size:12px; color:#ffffff; font-style:italic; }
.card-media .who { font-size:10.5px; color:#78b0fd; font-weight:700; white-space:nowrap; margin-left:14px; }
</style></head>
<body>
<nav>
<div class="navleft">
<span class="brand">Salesforce</span>
<div class="navlinks"><span class="on">Agentforce</span><span>Sales</span><span>Service</span><span>Industries</span><span>Pricing</span></div>
</div>
<button class="btn-primary">Start for free</button>
</nav>
<section class="hero">
<h1 class="display">Welcome to the Agentic Enterprise.</h1>
<p>Humans and agents drive customer success together — on the #1 Agentic CRM.</p>
<div class="row">
<button class="btn-primary">Start for free</button>
<button class="btn-secondary">Watch demo</button>
</div>
</section>
<section class="agentband">
<h2 class="display">Bring your brand to life.</h2>
<div class="tiles">
<div class="tile"><span class="nm">Agentforce</span><span class="ds">Autonomous AI agents for every workflow</span></div>
<div class="tile"><span class="nm">Customer 360</span><span class="ds">One customer record, every team</span></div>
<div class="tile"><span class="nm">Data 360</span><span class="ds">Unified, trusted data foundation</span></div>
<div class="tile"><span class="nm">Slack</span><span class="ds">Where agents and teams work together</span></div>
</div>
</section>
<div class="bands">
<div class="band">
<h3>Retail & Consumer Goods</h3>
<p>Simply put, an agentic enterprise is a business where humans and AI agents work together toward customer success.</p>
<span class="learnmore">Learn more →</span>
</div>
<div class="band grey">
<h3>Financial Services</h3>
<p>Trust is our #1 value — every workflow ships with an analyst-cited claim and a plain-language explainer.</p>
<span class="learnmore">Learn more →</span>
</div>
<div class="band tint">
<h3>Healthcare & Life Sciences</h3>
<p>Calculate pricing built on the same brand-blue token that powers every button across the platform.</p>
<span class="learnmore">Learn more →</span>
</div>
</div>
<div class="carousel">
<span class="cc-btn">‹</span>
<div class="card-media">
<span class="qt">"We didn't just adopt a CRM — we became Trailblazers."</span>
<span class="who">— VP Operations, Fortune 500 Retailer</span>
</div>
<span class="cc-btn">›</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #201d1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #201d1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #201d1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #a7a9ac; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #0ba348; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #fafafa; color: #201d1c;
border: 1px solid #0ba348; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #201d1c;
border: 1px solid #c4c3c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a7a9ac; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #01426a; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#201d1c; box-sizing:border-box;
font-family:system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:SFMono-Regular, Consolas, 'Courier New', monospace; }
nav { height:64px; background:#fafafa; border-bottom:1px solid #e5e5e5; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.brand { font-weight:700; font-size:19px; }
.brand span { color:#0ba348; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:15px; font-weight:500; color:#3c4043; }
.navlinks span.on { color:#0ba348; border-bottom:2px solid #0ba348; padding-bottom:4px; }
.hero { height:150px; background:#f5f5f5; display:flex; flex-direction:column; align-items:center;
justify-content:center; }
.hero h1 { font-size:26px; font-weight:700; margin:0 0 12px; }
.search { width:480px; height:52px; border-radius:9999px; background:#fff; border:1px solid #e5e5e5;
display:flex; align-items:center; padding:0 22px; font-size:14px; color:#3c4043; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:18px 32px; }
.card { background:#fff; border:1px solid #e5e5e5; border-radius:12px; padding:16px; }
.domain { font-size:18px; font-weight:700; margin:0 0 8px; }
.badge { display:inline-block; background:#01426a; color:#fff; font-size:10px; font-weight:700;
letter-spacing:0.3px; text-transform:uppercase; padding:2px 8px; border-radius:4px; margin-bottom:8px; }
.price { font-size:20px; font-weight:600; margin:0 0 8px; }
.btnrow { display:flex; gap:8px; }
.btn { background:#0ba348; color:#fff; font-size:12px; font-weight:600; padding:8px 16px; border-radius:8px; }
.btn2 { background:#fff; border:1px solid #e5e5e5; color:#201d1c; font-size:12px; font-weight:600; padding:8px 16px; border-radius:8px; }
.pay { display:flex; gap:8px; padding:0 32px; align-items:center; }
.pay span { background:#fff; border:1px solid #e5e5e5; border-radius:4px; padding:4px 10px; font-size:10px; font-weight:600; }
footer { position:absolute; bottom:0; left:0; right:0; height:44px; background:#201d1c; color:#fafafa;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
</style></head>
<body>
<nav>
<div class="brand">Fabled<span>.</span></div>
<div class="navlinks"><span class="on">Browse</span><span>Auctions</span><span>Sell a Domain</span><span>How it Works</span></div>
</nav>
<div class="hero"><h1>Premium domains for premium ideas</h1><div class="search">Search for a domain name…</div></div>
<div class="grid">
<div class="card"><span class="badge">Premium</span><p class="domain mono">streamvault.com</p><p class="price">$28,000</p>
<div class="btnrow"><span class="btn">Make Offer</span><span class="btn2">Save</span></div></div>
<div class="card"><span class="badge">Auction</span><p class="domain mono">nova.media</p><p class="price">$4,200</p>
<div class="btnrow"><span class="btn">Bid Now</span><span class="btn2">Save</span></div></div>
<div class="card"><span class="badge">Make Offer</span><p class="domain mono">castlist.io</p><p class="price">$1,850</p>
<div class="btnrow"><span class="btn">Make Offer</span><span class="btn2">Save</span></div></div>
</div>
<div class="pay"><span>Visa</span><span>Mastercard</span><span>PayPal</span><span>Amex</span></div>
<footer><span>© Fabled — Domain marketplace</span><span>Escrow · Support · Terms</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #191919; color: #e8144b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #191919; color: #e8144b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #e8144b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #e0faef; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: transparent; color: #eeeeee;
border: 1px solid #108474; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #262626; color: #eeeeee;
border: 1px solid #4d1826; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e0faef; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.6px; background: #182826; color: #108474;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Nunito Sans','Assistant',Arial,sans-serif; background:#191919; color:#eeeeee; }
*{box-sizing:border-box;}
.nav{height:64px;background:#212121;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #262626;}
.logo{font-family:'Asap',sans-serif;font-size:18px;font-weight:600;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;color:#cbcbcb;}
.hero{height:260px;display:flex;align-items:center;padding:0 44px;}
.left{width:52%;}
.left h1{font-family:'Asap',sans-serif;font-size:40px;font-weight:600;line-height:1.15;margin:0 0 14px;}
.left p{font-size:15px;color:#cbcbcb;max-width:340px;margin:0 0 20px;}
.btn{display:inline-block;background:#108474;color:#fff;font-size:15px;font-weight:700;padding:12px 24px;border-radius:8px;}
.right{width:44%;height:160px;border-radius:12px;background:linear-gradient(135deg,#a89cc8,#e0b5b2);position:relative;}
.right:before{content:'';position:absolute;left:30px;top:30px;width:120px;height:16px;border-radius:8px;background:rgba(0,0,0,.2);}
.section{padding:22px 40px 0;}
.sectitle{font-size:18px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#262626;border:1px solid #303030;border-radius:8px;padding:14px;}
.thumb{height:90px;background:#303030;border-radius:4px;margin-bottom:8px;position:relative;}
.status{position:absolute;top:6px;left:6px;background:#108474;color:#fff;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:9999px;}
.ptitle{font-family:'Asap',sans-serif;font-size:15px;font-weight:600;}
.pprice{font-family:'Asap',sans-serif;font-size:16px;margin-top:4px;}
.dots{display:flex;gap:4px;margin-top:8px;}
.dot{width:14px;height:14px;border-radius:50%;}
</style>
<div class="nav">
<div class="logo">Wuque Studio</div>
<div class="navlinks"><div>Keyboards</div><div>Keycaps</div><div>Group Buys</div><div>About</div></div>
</div>
<div class="hero">
<div class="left">
<h1>Precision anodized aluminum, built for typists.</h1>
<p>Custom mechanical keyboards with chamfered edges and colorways named for seasons.</p>
<div class="btn">Shop Now</div>
</div>
<div class="right"></div>
</div>
<div class="section">
<div class="sectitle">Active Group Buys</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="status">Group Buy</div></div><div class="ptitle">Mizu65 Kit</div><div class="pprice">$310</div><div class="dots"><div class="dot" style="background:#a89cc8"></div><div class="dot" style="background:#e0b5b2"></div><div class="dot" style="background:#fbcd0a"></div></div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Ikki68 Aurora</div><div class="pprice">$275</div><div class="dots"><div class="dot" style="background:#e8144b"></div><div class="dot" style="background:#108474"></div></div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Mizu Max Keycaps</div><div class="pprice">$95</div><div class="dots"><div class="dot" style="background:#a89cc8"></div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #3c3c3c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #3c3c3c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #3c3c3c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #0099ff; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #f7f7f7; color: #3c3c3c;
border: 1px solid #0099ff; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f7f7f7; color: #3c3c3c;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fbf0a5; color: #3c3c3c;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f7; color:#3c3c3c; box-sizing:border-box;
font-family:'Messina Sans Web Regular', 'Inter', -apple-system, system-ui, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #e0e0e0; }
.logo { font-size:18px; font-weight:600; letter-spacing:-0.2px; color:#0099ff; }
.navlinks { display:flex; gap:24px; font-size:15px; color:#b8b8b8; }
.navlinks span:first-child { color:#3c3c3c; }
.search { background:#f7f7f7; border-radius:8px; padding:9px 16px; font-size:13px; color:#5e5e5e; }
main { display:flex; height:492px; }
.shot { width:380px; background:#cce3eb; position:relative; overflow:hidden; }
.shot::before { content:''; position:absolute; inset:0;
background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.7), transparent 45%),
radial-gradient(circle at 75% 80%, rgba(0,153,255,0.18), transparent 50%); }
.badge-best { position:absolute; top:16px; left:16px; background:#fbf0a5; color:#3c3c3c; font-size:11px;
font-weight:600; letter-spacing:0.5px; text-transform:uppercase; border-radius:4px; padding:5px 10px; }
.jar { position:absolute; left:50%; bottom:50px; transform:translateX(-50%); width:120px; height:170px;
background:#ffffff; border-radius:12px 12px 20px 20px; border:1px solid #b1d3f2; }
.jar::before { content:''; position:absolute; top:-14px; left:20px; right:20px; height:20px; background:#0099ff; border-radius:6px; }
.jar::after { content:''; position:absolute; top:36px; left:14px; right:14px; height:60px; background:#f39f52; opacity:0.18; border-radius:6px; }
.info { flex:1; padding:26px 34px 0; display:flex; flex-direction:column; }
.eyebrow { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; color:#5288ba; margin-bottom:6px; }
.name { font-size:27px; font-weight:400; letter-spacing:-0.3px; line-height:1.2; margin:0 0 8px; }
.stars { font-size:13px; color:#cab667; margin-bottom:10px; }
.stars span { color:#5e5e5e; font-weight:400; font-size:13px; margin-left:6px; }
.price { font-size:18px; font-weight:600; margin-bottom:16px; }
.price span { font-size:13px; color:#5e5e5e; font-weight:400; margin-left:8px; }
.field { margin-bottom:16px; }
.field .lbl { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; color:#5e5e5e; margin-bottom:9px; }
.chips { display:flex; gap:8px; }
.chip { padding:9px 16px; border-radius:8px; background:#f2f2f2; font-size:13px; font-weight:400; color:#5e5e5e; }
.chip.active { background:#0099ff; color:#fff; font-weight:600; }
.spec { display:flex; gap:20px; margin-bottom:16px; padding:12px 0; border-top:1px solid #e0e0e0; }
.spec div { font-size:12px; color:#5e5e5e; }
.spec b { display:block; font-size:13px; color:#3c3c3c; font-weight:600; }
.cta { margin-top:auto; display:flex; gap:10px; padding-bottom:22px; }
.btn-add { flex:1; background:#0099ff; color:#fff; border-radius:8px; height:48px; font-size:16px; font-weight:600; letter-spacing:0.2px; }
.btn-outline { background:#f7f7f7; color:#3c3c3c; border:1px solid #b8b8b8; border-radius:8px; height:48px; padding:0 20px;
font-size:15px; font-weight:600; white-space:nowrap; }
footer { background:#3c3c3c; color:#cce3eb; padding:12px 36px; display:flex; justify-content:space-between;
font-size:11px; letter-spacing:0.2px; border-top:2px solid #cab667; }
</style></head>
<body>
<nav>
<div class="logo">Cabinet Health</div>
<div class="navlinks"><span>Refills</span><span>Medicine Cabinet</span><span>Bathroom Storage</span></div>
<div class="search">⌕ Search medications...</div>
</nav>
<main>
<div class="shot">
<span class="badge-best">Best Seller</span>
<div class="jar"></div>
</div>
<div class="info">
<div class="eyebrow">Refillable Pill Bottle System</div>
<h1 class="name">Cabinet Health Prescription Refill</h1>
<div class="stars">★★★★★ <span>4.9 (6,730 reviews)</span></div>
<div class="price">$0.00 <span>+ your insurance copay</span></div>
<div class="field">
<div class="lbl">Delivery Frequency</div>
<div class="chips">
<span class="chip active">Monthly</span><span class="chip">90-Day</span><span class="chip">As Needed</span>
</div>
</div>
<div class="spec">
<div><b>Reusable Jar</b>Ships once, refills after</div>
<div><b>Free Transfer</b>We call your pharmacy</div>
<div><b>Childproof Cap</b>Standard on all orders</div>
</div>
<div class="cta">
<button class="btn-add">Start My Refill</button>
<button class="btn-outline">One-Time Order</button>
</div>
</div>
</main>
<footer>
<span>© Cabinet Health</span>
<span>Pharmacy Transfer · Insurance · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0065ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0065ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b4fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2962ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0065ff; color: #ffffff;
border: 1px solid #2962ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0065ff; color: #f5f5f5;
border: 1px solid #277cfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b4fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0765ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#151618; box-sizing:border-box;
font-family:"Montserrat","Pretendard",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#ffffff; border-bottom:1px solid #d6d9df; }
.logo { font-size:19px; font-weight:700; color:#000000; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#000000; }
.cta-mui { background:#2962ff; color:#ffffff; border-radius:4px; padding:8px 16px; font-size:12px;
font-weight:500; }
.hero { text-align:center; padding:34px 40px 24px; }
.hero h1 { font-size:40px; font-weight:700; line-height:1.1; margin:0 0 12px; color:#000000; }
.hero p { font-size:15px; color:#4a4d52; margin:0 0 20px; }
.row { display:flex; gap:12px; justify-content:center; }
.btn-primary { background:#0065ff; color:#ffffff; border-radius:8px; padding:12px 32px; height:46px;
font-size:16px; font-weight:700; display:flex; align-items:center; }
.btn-outline { background:#ffffff; color:#0065ff; border:1px solid #0065ff; border-radius:8px;
padding:12px 32px; height:46px; font-size:16px; font-weight:700; display:flex; align-items:center; }
.band { padding:24px 40px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#ffffff; border-radius:8px; padding:16px; }
.card h3 { font-size:14px; font-weight:700; margin:0 0 6px; }
.card p { font-size:12px; color:#6a6e75; margin:0; line-height:1.4; }
.chips { display:flex; gap:10px; padding:0 40px 24px; }
.chip-dark { background:#000000; color:#fff; border-radius:5px; padding:0 18px; height:38px;
font-size:13px; font-weight:500; display:flex; align-items:center; }
.chip-white { background:#ffffff; color:#151618; border-radius:5px; padding:8px 16px; height:38px;
font-size:13px; font-weight:500; display:flex; align-items:center; }
.docs { background:#f6f7f9; margin:0 40px 24px; border-radius:8px; padding:18px; display:flex; gap:18px; }
.docs .side { width:120px; font-size:12px; color:#6a6e75; line-height:2.2; }
.docs .side .active { color:#0c408d; font-weight:600; }
.docs .main { flex:1; }
.docs input { width:100%; border:1px solid #d6d9df; border-radius:8px; padding:8px; font-size:13px;
background:#ffffff; color:#1c1d1e; }
.callout { background:#ebf4fd; color:#0c408d; border-radius:8px; padding:10px 14px; margin-top:10px;
font-size:12px; }
</style></head>
<body>
<nav>
<span class="logo">Hackle</span>
<div class="navlinks"><span>Overview</span><span>Guides</span><span>Pricing</span></div>
<span class="cta-mui">Contact Us</span>
</nav>
<section class="hero">
<h1>Growth, powered by AI and data</h1>
<p>An all-in-one AI growth platform you can set up in 5 minutes — web, app, or server.</p>
<div class="row">
<button class="btn-primary">Explore Demo</button>
<button class="btn-outline">Request a Demo</button>
</div>
</section>
<div class="band">
<div class="card"><h3>A/B Testing</h3><p>From experiment design to statistical analysis, all in one place.</p></div>
<div class="card"><h3>Feature Flags</h3><p>Control deployments and releases safely.</p></div>
<div class="card"><h3>CRM Marketing</h3><p>Automatically send messages based on user segments.</p></div>
</div>
<div class="chips">
<span class="chip-dark">Quick Send</span>
<span class="chip-white">Download the Guidebook</span>
</div>
<div class="docs">
<div class="side">
<div class="active">Getting Started</div>
<div>A/B Testing</div>
<div>Feature Flags</div>
<div>SDK Integration</div>
</div>
<div class="main">
<input type="text" placeholder="Search for a feature or keyword" readonly />
<div class="callout">Step 1. Find Churned Users</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eaeaea; color: #31373d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eaeaea; color: #31373d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #31373d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6c6c6c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #e9be33; color: #31373d;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #eaeaea; color: #31373d;
border: 1px solid #e9be33; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #31373d;
border: 1px solid #bcbdbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c6c6c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e9be33; color: #31373d;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Innersloth Shop</title>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#eaeaea;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;color:#4a4f55;}
*{box-sizing:border-box;}
.nav{position:absolute;top:0;left:0;width:960px;height:64px;background:#fff;border-bottom:1px solid #d8d8d8;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-weight:700;font-size:19px;color:#31373d;}
.logo span{color:#e9be33;}
.navlinks{display:flex;gap:24px;font-size:15px;font-weight:600;}
.navlinks span.active{color:#e9be33;}
.navlinks span.inactive{color:#6c6c6c;}
.cartbadge{background:#e9be33;color:#31373d;font-size:11px;font-weight:700;border-radius:9999px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;}
.hero{position:absolute;top:64px;left:0;width:960px;height:220px;background:#31373d;display:flex;align-items:center;padding:0 48px;}
.hero h1{color:#eaeaea;font-size:32px;font-weight:700;margin:0 0 14px 0;width:460px;line-height:1.25;}
.hero-accent{display:inline-block;background:#e9be33;color:#31373d;font-size:24px;font-weight:700;border-radius:8px;padding:10px 20px;margin-bottom:16px;}
.hero-btn{display:inline-block;background:#e9be33;color:#31373d;font-size:16px;font-weight:600;border-radius:8px;padding:12px 26px;}
.crewrow{position:absolute;right:60px;top:80px;display:flex;gap:14px;}
.crewmate{width:60px;height:80px;border-radius:30px 30px 10px 10px;position:relative;}
.crewmate.red{background:#d94f4f;}
.crewmate.cyan{background:#479ccf;}
.crewmate.yellow{background:#e9be33;}
.crewmate::after{content:'';position:absolute;top:14px;left:12px;width:32px;height:20px;background:#dfeefc;border-radius:10px;}
.catrow{position:absolute;top:300px;left:32px;width:896px;height:32px;display:flex;gap:12px;}
.navlink-active{color:#e9be33;background:transparent;font-size:14px;font-weight:600;border:2px solid #31373d;border-radius:8px;padding:8px 18px;}
.navlink-inactive{color:#31373d;font-size:14px;font-weight:600;border:2px solid #c4c4c4;border-radius:8px;padding:8px 18px;}
.grid{position:absolute;top:352px;left:32px;width:896px;height:250px;display:flex;gap:18px;}
.card{width:207px;background:#fff;border-radius:12px;overflow:hidden;}
.imgbox{width:207px;height:207px;position:relative;}
.imgbox.a{background:linear-gradient(135deg,#e9be33,#d4a92e);}
.imgbox.b{background:linear-gradient(135deg,#479ccf,#3b87b5);}
.imgbox.c{background:linear-gradient(135deg,#31373d,#4a4f55);}
.imgbox.d{background:linear-gradient(135deg,#d94f4f,#b53c3c);}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;border-radius:9999px;padding:4px 10px;color:#fff;}
.badge.new{background:#e9be33;color:#31373d;}
.badge.sale{background:#d94f4f;}
.title{font-size:18px;font-weight:600;color:#31373d;padding:14px 14px 4px;}
.price{font-size:16px;color:#31373d;padding:0 14px 14px;}
</style>
<div class="nav">
<div class="logo">Innersloth Shop</div>
<div class="navlinks"><span class="active">All Merch</span><span class="inactive">Apparel</span><span class="inactive">Plush</span><span class="inactive">Pins</span></div>
<div class="cartbadge">3</div>
</div>
<div class="hero">
<div>
<h1>Wear the ship.<br>Trust no one.</h1>
<div class="hero-btn">Shop Crewmates</div>
</div>
<div class="crewrow">
<div class="crewmate red"></div>
<div class="crewmate cyan"></div>
<div class="crewmate yellow"></div>
</div>
</div>
<div class="catrow">
<div class="navlink-active">All</div>
<div class="navlink-inactive">Plush</div>
<div class="navlink-inactive">Apparel</div>
<div class="navlink-inactive">Pins & Enamel</div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox a"><div class="badge new">New</div></div>
<div class="title">Crewmate Plush — Yellow</div>
<div class="price">$19.99</div>
</div>
<div class="card">
<div class="imgbox b"></div>
<div class="title">Admin Terminal Tee</div>
<div class="price">$24.99</div>
</div>
<div class="card">
<div class="imgbox c"></div>
<div class="title">Impostor Enamel Pin Set</div>
<div class="price">$14.99</div>
</div>
<div class="card">
<div class="imgbox d"><div class="badge sale">Sale</div></div>
<div class="title">Emergency Meeting Hoodie</div>
<div class="price">$39.99</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #272d45;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #272d45;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #272d45; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 1.5px; background: #0e7a82; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 1.5px; background: #ffffff; color: #272d45;
border: 1px solid #0e7a82; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #272d45;
border: 1px solid #c9cad0; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 1px; background: #c64836; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#414141; box-sizing:border-box;
font-family:"Avenir Next",Inter,-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #e5e5eb; }
.brand { font-family:Lora,Georgia,serif; font-size:21px; font-weight:700; color:#272d45; }
.nlinks { display:flex; gap:28px; }
.nlinks div { font-size:13px; font-weight:500; color:#414141; }
.nlinks div.on { color:#0e7a82; font-weight:600; }
.navcta { background:#0e7a82; color:#fff; font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; padding:11px 22px; }
.hero { height:250px; position:relative; background:linear-gradient(120deg,#1f3b34 0%,#0e7a82 70%); display:flex; align-items:center; padding:0 44px; }
.hero::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,0.25); }
.herotxt { position:relative; z-index:2; max-width:440px; }
.herotxt h1 { font-family:Lora,Georgia,serif; color:#ffffff; font-size:40px; font-weight:700; margin:0 0 12px; }
.herotxt p { color:#f4f4f6; font-size:15px; line-height:1.6; margin:0 0 16px; }
.herobtn { display:inline-block; background:#0e7a82; color:#fff; font-size:13px; font-weight:600; letter-spacing:1.5px;
text-transform:uppercase; padding:13px 26px; border:1px solid #fff; }
.section { padding:22px 36px 0; }
.sechead { font-family:Lora,Georgia,serif; font-size:18px; font-weight:600; color:#272d45; margin-bottom:14px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card { }
.shot { aspect-ratio:5/4; background:#f7f7f8; position:relative; overflow:hidden; }
.c1 .shot::after { content:''; position:absolute; inset:14px; background:repeating-linear-gradient(45deg,#c64836 0 8px,#1f3b34 8px 16px); }
.c2 .shot::after { content:''; position:absolute; inset:14px; background:repeating-linear-gradient(0deg,#0e7a82 0 10px,#b2f9e9 10px 20px); }
.c3 .shot::after { content:''; position:absolute; inset:14px; background:repeating-linear-gradient(90deg,#272d45 0 6px,#d3d4dd 6px 12px); }
.badge { position:absolute; top:10px; left:10px; font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:1.5px;
padding:3px 9px; color:#fff; z-index:2; }
.badge.sale { background:#c64836; } .badge.new { background:#1f3b34; }
.ctitle { font-size:14px; color:#272d45; margin:10px 0 3px; }
.cprice { font-size:16px; color:#414141; }
</style></head>
<body>
<nav>
<div class="brand">Dash And Albert</div>
<div class="nlinks"><div class="on">Rugs</div><div>Bath</div><div>Bedding</div><div>Sale</div></div>
<div class="navcta">Shop New</div>
</nav>
<div class="hero">
<div class="herotxt">
<h1>Rugs Woven For A Room You Care About</h1>
<p>Indoor/outdoor rugs and textiles designed with an unhurried, coastal-modern eye.</p>
<div class="herobtn">Shop The Collection</div>
</div>
</div>
<div class="section">
<div class="sechead">New This Season</div>
<div class="grid">
<div class="card"><div class="shot"><span class="badge sale">Sale</span></div><div class="ctitle">Bindi Terra Cotta Rug</div><div class="cprice">$298</div></div>
<div class="card"><div class="shot"><span class="badge new">New</span></div><div class="ctitle">Catalina Aqua Stripe</div><div class="cprice">$412</div></div>
<div class="card"><div class="shot"></div><div class="ctitle">Heirloom Slate Weave</div><div class="cprice">$356</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffdfc; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffdfc; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #ff5601; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #fffdfc; color: #121212;
border: 1px solid #ff5601; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fffdfc; color: #121212;
border: 1px solid #c4c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff5601; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fffdfc; color:#121212; box-sizing:border-box;
font-family:'DM Sans','Sofia Pro',sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:0; font-size:14px; font-weight:500; text-transform:uppercase; letter-spacing:.5px; }
.navlinks span { padding:0 14px; }
.navlinks span.active { color:#121212; background:#f8f3ec; border-radius:999px; padding:6px 16px; }
.cart { width:44px; height:44px; border-radius:999px; background:#f8f3ec; display:flex; align-items:center; justify-content:center; }
.hero { display:flex; align-items:center; gap:20px; padding:6px 36px 18px; }
.heroimg { flex:1; height:180px; border-radius:12px; background:linear-gradient(135deg,#333333,#ff5601); position:relative; }
.herotext { flex:1; }
.herotext h1 { font-size:32px; font-weight:700; margin:0 0 8px; letter-spacing:-.5px; }
.herotext p { font-size:13px; color:#666666; margin:0 0 14px; max-width:300px; }
.btn { display:inline-block; background:#ff5601; color:#fff; font-size:15px; font-weight:600; padding:14px 30px; border-radius:999px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 36px; }
.card { background:#fff; border-radius:12px; overflow:hidden; }
.card-img { height:96px; background:#f8f3ec; position:relative; }
.card-img::after { content:''; position:absolute; left:50%; top:50%; width:50px; height:60px; background:linear-gradient(180deg,#333,#121212); border-radius:8px 8px 20px 20px; transform:translate(-50%,-50%); }
.badgep { position:absolute; top:8px; left:8px; background:#ff5601; color:#fff; font-size:9px; font-weight:700; text-transform:uppercase; padding:3px 10px; border-radius:999px; }
.cbody { padding:10px 12px; }
.cbody h3 { font-size:13px; font-weight:500; margin:0 0 6px; }
.stars { color:#ffd45d; font-size:11px; font-weight:600; }
.price { font-size:18px; font-weight:600; margin-top:4px; }
footer { position:absolute; bottom:0; left:0; right:0; height:52px; background:#121212; color:#999999;
display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Beast Health</p>
<div class="navlinks"><span class="active">Blenders</span><span>Accessories</span><span>Recipes</span></div>
<div class="cart">🛒</div>
</nav>
<section class="hero">
<div class="heroimg"></div>
<div class="herotext">
<h1>Performance-Driven Blending</h1>
<p>Industrial power meets culinary science — every blend engineered for texture and speed.</p>
<span class="btn">Shop Blenders</span>
</div>
</section>
<div class="grid">
<div class="card">
<div class="card-img"><span class="badgep">Best Seller</span></div>
<div class="cbody"><h3>Beast Blender B10</h3><div class="stars">★★★★★ 4.9</div><div class="price">$799</div></div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody"><h3>Travel Blender Cup</h3><div class="stars">★★★★☆ 4.6</div><div class="price">$59</div></div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody"><h3>Ceramic Blade Upgrade</h3><div class="stars">★★★★★ 4.8</div><div class="price">$89</div></div>
</div>
</div>
<footer>
<span>© Beast Health</span>
<span>Beast Health · Warranty · Recipes · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffd0; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffd0; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; background: #ffffd0; color: #000000;
border: none; border-radius: 0px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; background: #ffffd0; color: #000000;
border: 1px solid #ffffd0; border-radius: 0px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffe0; color: #000000;
border: 1px solid #bfbf9c; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.33; background: #ffffd0; color: #000000;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffd0; font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:48px;background:#ffffd0;display:flex;align-items:center;gap:24px;padding:0 20px;border-bottom:1px solid #cccccc;font-size:14px;}
.nav a{color:#0000ee;}
.nav .visited{color:#551a8b;}
.title{padding:14px 20px 6px;font-size:20px;font-weight:700;}
.search{margin:0 20px 10px;height:36px;background:#ffffe0;border:1px solid #cccccc;display:flex;align-items:center;padding:0 12px;font-size:14px;width:280px;}
.table{margin:0 20px;border:1px solid #cccccc;}
.row{display:flex;padding:6px 12px;font-size:13px;}
.row.alt{background:#f5f5c0;}
.row.head{background:#ffffd0;font-weight:700;border-bottom:1px solid #cccccc;}
.c1{width:340px;}
.c2{width:150px;}
.c3{width:110px;}
.c4{width:140px;}
.instock{background:#ffffd0;border:1px solid #cccccc;font-size:11px;padding:1px 6px;}
.outstock{background:#999999;color:#fff;font-size:11px;padding:1px 6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:26px;background:#ffffd0;border-top:1px solid #cccccc;display:flex;align-items:center;justify-content:center;font-size:11px;color:#666666;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav"><b>Up1 CO UK</b> <a>Home</a> <a>Catalogue</a> <a class="visited">Formats</a> <a>Contact</a></div>
<div class="title">Catalogue: Feature Films (A-Z)</div>
<div class="search">Search title, year, format...</div>
<div class="table">
<div class="row head"><div class="c1">Title</div><div class="c2">Format</div><div class="c3">Price</div><div class="c4">Stock</div></div>
<div class="row"><div class="c1">A Quiet Harbour (1987)</div><div class="c2">VHS PAL</div><div class="c3">£8.50</div><div class="c4"><span class="instock">In Stock</span></div></div>
<div class="row alt"><div class="c1">Borderline Season (1994)</div><div class="c2">DVD R2</div><div class="c3">£11.00</div><div class="c4"><span class="instock">In Stock</span></div></div>
<div class="row"><div class="c1">Coldwater Junction (1979)</div><div class="c2">VHS NTSC</div><div class="c3">£14.25</div><div class="c4"><span class="outstock">Out of Stock</span></div></div>
<div class="row alt"><div class="c1">Driftwood & Rust (2001)</div><div class="c2">DVD R1</div><div class="c3">£9.75</div><div class="c4"><span class="instock">In Stock</span></div></div>
<div class="row"><div class="c1">Everstill (1985)</div><div class="c2">Betamax</div><div class="c3">£22.00</div><div class="c4"><span class="instock">In Stock</span></div></div>
<div class="row alt"><div class="c1">Fenwick Road (1991)</div><div class="c2">DVD R2</div><div class="c3">£10.50</div><div class="c4"><span class="instock">In Stock</span></div></div>
<div class="row"><div class="c1">Grayline Terminal (1996)</div><div class="c2">VHS PAL</div><div class="c3">£7.00</div><div class="c4"><span class="outstock">Out of Stock</span></div></div>
</div>
<div class="footer">© Catalogue Listings · All titles subject to availability</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6c757d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f9644b; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f7f7f7; color: #231f20;
border: 1px solid #f9644b; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #231f20;
border: 1px solid #c2c1c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c757d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.1; letter-spacing: 0.5px; background: #f9644b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f7; color:#231f20; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#f7f7f7; }
.brand { font-family:'FK-Screamer','IC-Grand',sans-serif; font-size:22px; font-weight:700; color:#f9644b; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#231f20; }
.util { font-size:13px; color:#6c757d; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 64px); }
.stage { padding:26px; display:flex; flex-direction:column; gap:12px; background:#f8f9fa; }
.crumb { font-size:11px; color:#adb5bd; }
.pan { flex:1; border-radius:12px; background:#ffffff; position:relative; overflow:hidden; }
.pan::before { content:''; position:absolute; left:50%; top:50%; width:150px; height:200px; transform:translate(-50%,-50%); border-radius:20px;
background:linear-gradient(160deg,#f9644b,#e04a30 80%); box-shadow:0 18px 30px rgba(0,0,0,0.12); }
.pan::after { content:''; position:absolute; left:50%; top:36%; width:90px; height:20px; transform:translate(-50%,0); border-radius:9999px; background:#fff; opacity:0.9; }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; border-radius:12px; background:#ffffff; }
.info { padding:24px 34px; display:flex; flex-direction:column; gap:11px; overflow:hidden; }
.cat { font-size:12px; font-weight:500; color:#6c757d; }
h1 { font-family:'FK-Screamer','IC-Grand',sans-serif; margin:0; font-size:28px; font-weight:600; line-height:1.2; }
.rating { display:flex; align-items:center; gap:8px; font-size:12px; color:#6c757d; }
.stars { color:#ffc107; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:16px; font-weight:600; color:#6c757d; }
.badge-new { background:#f9644b; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.desc { font-size:16px; color:#343a40; line-height:1.5; }
.chip-row { display:flex; gap:8px; }
.chip { border-radius:9999px; padding:9px 20px; font-size:13px; font-weight:600; background:transparent; border:none; color:#231f20; }
.chip.on { background:#f9644b; color:#fff; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#f9644b; color:#fff; border:none; height:44px; border-radius:8px; font-size:15px; font-weight:600; letter-spacing:0.3px; }
.btn-secondary { width:150px; background:#f7f7f7; border:none; color:#231f20; height:44px; border-radius:8px; font-size:15px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Bubble</p>
<div class="navlinks"><span>Shop</span><span>Routine</span><span>About</span><span>Sale</span></div>
<div class="util">Search Account Cart (2)</div>
</nav>
<main>
<div class="stage">
<div class="crumb">Bubble / Cleansers / Acne</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Slam Dunk</span>
<h1>Slam Dunk Acne Cleanser</h1>
<div class="rating"><span class="stars">★★★★☆</span> 4.3 · 6,720 reviews</div>
<div class="price-row"><span class="price">$14.00</span><span class="badge-new">New</span></div>
<p class="desc">2% salicylic acid gently exfoliates while soothing botanicals calm breakouts — a fresh start, every wash.</p>
<div class="chip-row">
<span class="chip on">2oz</span><span class="chip">8oz</span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Learn More</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.38; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.2px; background: #db0025; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.2px; background: #ffffff; color: #990000;
border: 1px solid #990000; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #303030;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.33; background: #f2f2f2; color: #555555;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Open Sans','Helvetica Neue',Arial,sans-serif; color:#303030; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#111111;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#e2e2e2;}
.hero{height:250px;display:flex;background:#f2f2f2;}
.herotext{width:46%;padding:0 36px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#db0025;margin-bottom:10px;}
.h1{font-size:30px;font-weight:700;line-height:1.2;color:#111111;margin:0 0 12px;}
.sub{font-size:13px;color:#555555;margin:0 0 18px;max-width:300px;}
.cta{display:inline-block;background:linear-gradient(90deg,#990000,#db0025);color:#fff;font-size:13px;font-weight:700;padding:12px 24px;border-radius:2px;}
.heroimg{width:54%;position:relative;background:#111111;}
.monitor{position:absolute;left:60px;top:40px;width:280px;height:170px;background:#000;border-radius:6px;border:8px solid #303030;}
.screen{position:absolute;left:68px;top:48px;width:264px;height:154px;background:linear-gradient(135deg,#7fbbe7,#990000);border-radius:2px;}
.stand{position:absolute;left:190px;top:210px;width:16px;height:24px;background:#303030;}
.sec{padding:22px 36px 0;}
.secTitle{font-size:18px;font-weight:700;color:#111111;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border:1px solid #e2e2e2;border-radius:2px;padding:12px;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#ff5501;color:#fff;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;z-index:2;}
.thumb{height:100px;border-radius:2px;margin-bottom:10px;}
.pname{font-size:14px;font-weight:600;color:#111111;}
.pmeta{font-size:11px;color:#777777;margin-top:3px;}
.pprice{font-size:14px;font-weight:700;color:#990000;margin-top:6px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Viewsonic</div>
<div class="navlinks"><span>Monitors</span><span>Projectors</span><span>Business</span><span>Gaming</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Precision Display Technology</div>
<div class="h1">Color you can measure.</div>
<div class="sub">Monitors engineered for professionals who trust the numbers, not the marketing.</div>
<div class="cta">Shop Monitors</div>
</div>
<div class="heroimg"><div class="monitor"></div><div class="screen"></div><div class="stand"></div></div>
</div>
<div class="sec">
<div class="secTitle">Popular Monitors</div>
<div class="grid">
<div class="card"><span class="badge">Gaming</span><div class="thumb" style="background:linear-gradient(135deg,#ff5501,#111111)"></div><div class="pname">XG Series 27" 240Hz</div><div class="pmeta">Elite Gaming</div><div class="pprice">$449.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7fbbe7,#111111)"></div><div class="pname">VP Series ColorPro 32"</div><div class="pmeta">Business</div><div class="pprice">$699.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c5d7ce,#111111)"></div><div class="pname">VG Series EcoLine 24"</div><div class="pmeta">Sustainable</div><div class="pprice">$219.99</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a2e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a2e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #1a1a2e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b80; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #1a2a3a; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #1a2a3a;
border: 1px solid #1a2a3a; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2d2d44;
border: 1px solid #c6c6cb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b80; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e8a838; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#2d2d44;
}
*{box-sizing:border-box;}
.nav{height:64px; display:flex; align-items:center; padding:0 30px; border-bottom:1px solid #e6e8ec;}
.logo{font-size:22px; font-weight:700; color:#1a2a3a;}
.navlinks{display:flex; gap:22px; margin-left:36px; font-size:13px; color:#4a5a6a;}
.navcta{margin-left:auto; background:#1a2a3a; color:#fff; padding:11px 22px; border-radius:6px; font-size:13px; font-weight:600;}
.hero{display:flex; align-items:center; gap:32px; padding:24px 30px; background:#f3f6f8;}
.heroText{flex:1;}
.heroText .eyebrow{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#3a7b8a; font-weight:700; margin-bottom:10px;}
.heroText h1{font-size:32px; font-weight:700; line-height:1.2; margin:0 0 12px; max-width:400px; color:#1a2a3a;}
.heroText p{font-size:13.5px; color:#5a6a78; line-height:1.55; max-width:380px; margin:0 0 16px;}
.heroBtn{display:inline-block; background:#3a7b8a; color:#fff; padding:12px 26px; border-radius:6px; font-size:12px; font-weight:600;}
.heroImg{width:250px; height:170px; border-radius:8px; background:linear-gradient(150deg,#1a2a3a,#3a7b8a); flex-shrink:0; position:relative;}
.heroImg .pillow{position:absolute; left:20px; bottom:20px; width:100px; height:36px; background:#fff; border-radius:14px; opacity:.9;}
.section{padding:14px 30px 0;}
.sectitle{font-size:19px; font-weight:700; margin:0 0 12px; color:#1a2a3a;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.card{background:#fff; border-radius:8px; padding:8px; text-align:center; box-shadow:0 2px 8px rgba(26,42,58,.08);}
.thumb{height:60px; border-radius:6px; margin-bottom:8px; position:relative;}
.t1{background:linear-gradient(135deg,#1a2a3a,#3a7b8a);}
.t2{background:linear-gradient(135deg,#3a7b8a,#8fc2ce);}
.t3{background:linear-gradient(135deg,#c0392b,#e0796e);}
.t4{background:linear-gradient(135deg,#2d2d44,#5a5a78);}
.badge{position:absolute; top:4px; left:4px; background:#c0392b; color:#fff; font-size:8px; font-weight:700; padding:2px 6px; border-radius:4px;}
.pname{font-size:12px; font-weight:600; margin-bottom:3px;}
.pprice{font-size:12px; color:#1a2a3a; font-weight:700;}
.footer{position:absolute; bottom:0; left:0; right:0; background:#1a2a3a; color:#a8bcc9; font-size:10px; text-align:center; padding:8px 0;}
</style>
<div class="nav">
<div class="logo">Helix Sleep</div>
<div class="navlinks"><span>Mattresses</span><span>Sleep Quiz</span><span>Bedding</span><span>Reviews</span></div>
<div class="navcta">Take the Sleep Quiz</div>
</div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">2-Minute Sleep Quiz</div>
<h1>A Mattress Personalized to You</h1>
<p>Clinical clarity meets warm approachability — find your ideal firmness, support, and cooling in one quick quiz.</p>
<div class="heroBtn">Find My Mattress</div>
</div>
<div class="heroImg"><div class="pillow"></div></div>
</div>
<div class="section">
<div class="sectitle">Shop by Mattress</div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="badge">Sale</span></div><div class="pname">Midnight Luxe</div><div class="pprice">$1,699</div></div>
<div class="card"><div class="thumb t2"></div><div class="pname">Sunset Elite</div><div class="pprice">$1,499</div></div>
<div class="card"><div class="thumb t3"><span class="badge">Sale</span></div><div class="pname">Dusk DLX Hybrid</div><div class="pprice">$1,299</div></div>
<div class="card"><div class="thumb t4"></div><div class="pname">Cooling Sheet Set</div><div class="pprice">$129</div></div>
</div>
</div>
<div class="footer">© Helix Sleep — Personalized Comfort, Delivered</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #475569; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.5px; background: #121212; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #121212; border-radius: 4px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #475569; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #f5f5f4; color: #475569;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Aktiv Grotesk','Helvetica Neue',Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dedede;}
.logo{font-size:18px;font-weight:600;letter-spacing:.3px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:400;color:#121212;}
.hero{height:250px;display:flex;background:#f7f7f7;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;}
.herotext h1{font-size:32px;font-weight:500;margin:0 0 14px;line-height:1.3;}
.herotext p{font-size:15px;color:#475569;margin:0 0 20px;max-width:300px;line-height:1.5;}
.btn{display:inline-block;background:#121212;color:#fff;font-size:14px;font-weight:500;padding:14px 28px;border-radius:4px;width:fit-content;}
.heroimg{width:54%;position:relative;overflow:hidden;background:linear-gradient(150deg,#dedede,#475569 90%);}
.heroimg:before{content:'';position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.15);}
.heroimg .tee{position:absolute;left:100px;top:50px;width:130px;height:140px;border-radius:16px 16px 40px 40px;background:#fff;opacity:.9;}
.sec{padding:24px 40px 0;}
.sectitle{font-size:19px;font-weight:500;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:206px;}
.thumb{height:140px;border-radius:4px;margin-bottom:10px;}
.pname{font-size:14px;font-weight:400;}
.pprice{font-size:13px;color:#475569;margin-top:4px;}
.pill{display:inline-block;background:#f7f7f7;border-radius:9999px;font-size:10px;padding:2px 10px;margin-top:6px;color:#475569;}
</style>
<div class="nav">
<div class="logo">Marine Layer</div>
<div class="navlinks"><span>Men</span><span>Women</span><span>New</span><span>Sale</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>The garment is soft. Everything else stays out of the way.</h1>
<p>Signature cotton fleece and tees, made for a good wash and a better fit.</p>
<div class="btn">Shop New</div>
</div>
<div class="heroimg"><div class="tee"></div></div>
</div>
<div class="sec">
<div class="sectitle">New Arrivals</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#121212,#dedede);"></div><div class="pname">Signature Crew Sweatshirt</div><div class="pprice">$78</div><div class="pill">Recycled Cotton</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#475569,#f7f7f7);"></div><div class="pname">Classic Pocket Tee</div><div class="pprice">$38</div><div class="pill">Recycled Cotton</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b0b0b0,#fff);"></div><div class="pname">Weekend Zip Hoodie</div><div class="pprice">$98</div><div class="pill">Recycled Cotton</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #404040;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #404040;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; letter-spacing: -0.25px; margin: 0; color: #404040; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.25px; background: #bd2426; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.25px; background: #ffffff; color: #404040;
border: 1px solid #bd2426; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.47; background: #ffffff; color: #404040;
border: 1px solid #cfcfcf; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #f6e0e1; color: #bd2426;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system, Arial, 'Helvetica Neue', sans-serif; color:#404040; }
*{box-sizing:border-box;}
.nav{height:56px;background:#ffffff;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #dedede;}
.logo{font-size:18px;font-weight:700;color:#404040;}
.tabs{display:flex;gap:18px;font-size:13px;font-weight:600;color:#737373;}
.tabs span:first-child{color:#404040;border-bottom:2px solid #bd2426;padding-bottom:16px;}
.searchbox{width:200px;height:32px;border:1px solid #dedede;border-radius:4px;background:#fff;display:flex;align-items:center;padding:0 10px;font-size:11px;color:#737373;}
.cart{font-size:12px;font-weight:700;color:#404040;background:#f5f5f5;border-radius:4px;padding:6px 10px;}
.banner{height:150px;background:#f5f5f5;display:flex;align-items:center;padding:0 28px;}
.bText{width:480px;}
.bTitle{font-size:24px;font-weight:700;letter-spacing:-0.25px;margin:0 0 8px;}
.bSub{font-size:13px;color:#595959;margin:0 0 14px;}
.btn{display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:4px;background:#bd2426;color:#fff;font-size:13px;font-weight:700;letter-spacing:0.25px;}
.diagram{width:420px;height:130px;position:relative;}
.port{position:absolute;width:52px;height:24px;border-radius:2px;background:#404040;}
.p1{left:20px;top:30px;} .p2{left:90px;top:30px;background:#595959;} .p3{left:160px;top:30px;background:#404040;}
.pline{position:absolute;height:1px;background:#bfbfbf;top:54px;left:20px;width:192px;}
.speclabel{position:absolute;top:66px;font-size:10px;color:#737373;}
.l1{left:22px;} .l2{left:92px;} .l3{left:158px;}
.spectable{display:flex;gap:1px;background:#dedede;margin:0 28px;}
.speccell{flex:1;background:#f5f5f5;text-align:center;padding:8px;}
.slabel{font-size:10px;font-weight:700;text-transform:uppercase;color:#737373;}
.svalue{font-size:13px;color:#404040;margin-top:2px;}
.sec{padding:16px 28px;}
.sectitle{font-size:15px;font-weight:700;margin-bottom:10px;}
.grid{display:flex;gap:12px;}
.card{width:216px;background:#ffffff;border:1px solid #dedede;border-radius:8px;padding:12px;position:relative;}
.thumb{height:82px;border-radius:4px;margin-bottom:8px;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;color:#fff;padding:2px 6px;border-radius:4px;}
.model{font-size:13px;font-weight:600;margin-bottom:2px;}
.desc{font-size:11px;color:#737373;margin-bottom:6px;}
.price{font-size:15px;font-weight:700;color:#bd2426;}
</style>
<div class="nav">
<div class="logo">Startech</div>
<div class="tabs"><span>Docking Stations</span><span>Cables</span><span>Adapters</span><span>Mounts</span></div>
<div class="searchbox">Search products...</div>
<div class="cart">CART (0)</div>
</div>
<div class="banner">
<div class="bText">
<div class="bTitle">USB4 Docking Station, 12-in-1</div>
<div class="bSub">Triple 4K display support. 100W power delivery. Built for the modern workstation.</div>
<div class="btn">Add to Cart</div>
</div>
<div class="diagram">
<div class="port p1"></div><div class="port p2"></div><div class="port p3"></div>
<div class="pline"></div>
<div class="speclabel l1">HDMI</div><div class="speclabel l2">USB-C</div><div class="speclabel l3">RJ45</div>
</div>
</div>
<div class="spectable">
<div class="speccell"><div class="slabel">Ports</div><div class="svalue">12</div></div>
<div class="speccell"><div class="slabel">Power</div><div class="svalue">100W PD</div></div>
<div class="speccell"><div class="slabel">Displays</div><div class="svalue">3x 4K</div></div>
<div class="speccell"><div class="slabel">Warranty</div><div class="svalue">2 Years</div></div>
</div>
<div class="sec">
<div class="sectitle">Compatible Accessories</div>
<div class="grid">
<div class="card"><div class="badge" style="background:#9bca3e">In Stock</div><div class="thumb" style="background:#404040"></div><div class="model">USB-C to HDMI Adapter</div><div class="desc">4K 60Hz, aluminum housing</div><div class="price">$24.99</div></div>
<div class="card"><div class="badge" style="background:#2f7bbf">New</div><div class="thumb" style="background:#595959"></div><div class="model">Thunderbolt 4 Cable 1m</div><div class="desc">40Gbps, certified</div><div class="price">$34.99</div></div>
<div class="card"><div class="badge" style="background:#f68b1f">Legacy</div><div class="thumb" style="background:#bfbfbf"></div><div class="model">VGA to HDMI Converter</div><div class="desc">1080p, active adapter</div><div class="price">$29.99</div></div>
<div class="card"><div class="thumb" style="background:#404040"></div><div class="model">Dual Monitor Mount Arm</div><div class="desc">Gas-spring, VESA 100</div><div class="price">$89.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faff69; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faff69; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7a7c39; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #131312; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #faff69; color: #131312;
border: 1px solid #131312; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #faff69; color: #111111;
border: 1px solid #d5d95b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7c39; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d5d95b; color: #131312;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#131312; color:#dfdfdf; box-sizing:border-box;
font-family:Inter, -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid #414141; }
.nav .brand { font-weight:700; font-size:16px; color:#ffffff; }
.nav .links { display:flex; gap:20px; font-size:13px; color:#dfdfdf; }
.navbtn { background:#faff69; color:#151515; border-radius:6px; padding:8px 16px; font-size:13px; font-weight:600; }
.hero { padding:24px 28px 0; }
.hero h1 { font-size:36px; font-weight:600; color:#fff; margin:0 0 8px; line-height:1.25; }
.hero p { font-size:15px; color:#dfdfdf; margin:0 0 16px; max-width:520px; }
.herobtn { background:#faff69; color:#151515; border-radius:6px; padding:10px 22px; font-size:14px; font-weight:600; display:inline-block; }
.codeblock { margin:20px 28px 0; background:#1c1c1a; border:1px solid #414141; border-radius:8px; padding:14px 18px;
font-family:'Courier New', monospace; font-size:12.5px; line-height:1.8; }
.k{color:#faff69;} .s{color:#9fd6a3;} .c{color:#8a8a86;}
.stats { display:flex; gap:14px; padding:20px 28px 0; }
.stat { flex:1; background:#282828; border-radius:6px; padding:16px 18px; border:1px solid #414141; }
.stat .num { font-size:26px; font-weight:600; color:#faff69; }
.stat .lbl { font-size:12px; color:#a5a5a2; margin-top:4px; }
</style></head>
<body>
<nav class="nav">
<div class="brand">ClickHouse</div>
<div class="links"><span>Docs</span><span>Cloud</span><span>Benchmarks</span><span>Pricing</span></div>
<button class="navbtn">Get started free</button>
</nav>
<div class="hero">
<h1>The fastest analytics database on Earth</h1>
<p>Column-oriented SQL built for real-time reporting at any scale.</p>
<span class="herobtn">Start free trial</span>
</div>
<div class="codeblock">
<span class="c">-- query 1B rows in milliseconds</span><br>
<span class="k">SELECT</span> region, <span class="k">count</span>(*) <span class="k">AS</span> events<br>
<span class="k">FROM</span> analytics.pageviews<br>
<span class="k">WHERE</span> event_date >= <span class="s">'2026-09-01'</span><br>
<span class="k">GROUP BY</span> region <span class="k">ORDER BY</span> events <span class="k">DESC</span>;
</div>
<div class="stats">
<div class="stat"><div class="num">1.2B</div><div class="lbl">rows/sec ingest, single node</div></div>
<div class="stat"><div class="num">0.03s</div><div class="lbl">median query latency</div></div>
<div class="stat"><div class="num">10x</div><div class="lbl">cheaper than legacy warehouses</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #999999; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #f15a22; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: transparent; color: #ffffff;
border: 1px solid #f15a22; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1a1a1a; color: #ffffff;
border: 1px solid #404040; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #999999; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffd100; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:'Open Sans', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:64px; background:#000000; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #333333; }
.brand { font-family:'Montserrat', 'Helvetica Neue', Arial, sans-serif; font-size:20px; font-weight:700;
letter-spacing:0.5px; margin:0; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-family:'Montserrat', Arial, sans-serif; font-size:13px; font-weight:600;
letter-spacing:0.4px; text-transform:uppercase; color:#ffffff; padding-bottom:4px; }
.navlinks span.active { color:#f15a22; border-bottom:2px solid #f15a22; }
.navicons { font-size:15px; color:#f15a22; }
.hero { height:148px; background:#1a1a1a; display:flex; flex-direction:column; justify-content:center;
padding:0 44px; gap:6px; }
.hero h1 { font-family:'Montserrat', Arial, sans-serif; font-size:30px; font-weight:700; line-height:1.2;
letter-spacing:-0.3px; margin:0; max-width:520px; }
.hero p { font-size:14px; color:#999999; margin:0 0 6px; max-width:460px; }
.hero button { align-self:flex-start; background:#f15a22; color:#ffffff; border:none; border-radius:4px;
padding:11px 24px; font-family:'Montserrat', Arial, sans-serif; font-size:13px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; cursor:default; }
.strip { height:36px; background:#000000; border-bottom:1px solid #333333; display:flex; align-items:center;
gap:22px; padding:0 40px; }
.strip span { font-family:'Montserrat', Arial, sans-serif; font-size:12px; font-weight:600;
letter-spacing:0.3px; text-transform:uppercase; color:#999999; padding:4px 0; }
.strip span.active { color:#f15a22; border-bottom:2px solid #f15a22; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:18px 40px; }
.card { background:#1a1a1a; border:1px solid #333333; border-radius:4px; padding:16px; display:flex;
flex-direction:column; gap:6px; }
.thumb { position:relative; width:100%; height:118px; border-radius:4px; }
.t1 { background:linear-gradient(135deg,#5a3a2a,#f15a22 60%,#9c3814); }
.t2 { background:linear-gradient(135deg,#2a3a4a,#37628f 60%,#12222f); }
.t3 { background:linear-gradient(135deg,#3a2a4a,#7a4fb0 60%,#241633); }
.badge { position:absolute; top:8px; left:8px; background:#ffd100; color:#000000; font-size:11px;
font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:2px 8px; border-radius:2px; }
.badge.sale { background:#f15a22; color:#ffffff; }
.card .title { font-family:'Montserrat', Arial, sans-serif; font-size:16px; font-weight:600; margin:4px 0 0; }
.row2 { display:flex; align-items:center; justify-content:space-between; }
.price { font-size:16px; font-weight:700; color:#f15a22; }
.players { font-size:12px; color:#999999; }
footer { height:86px; background:#000000; border-top:1px solid #333333; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.footcol span { display:block; font-size:12px; color:#666666; line-height:1.8; }
.footcol .head { font-family:'Montserrat', Arial, sans-serif; font-size:13px; font-weight:600; color:#ffffff;
margin-bottom:2px; }
</style></head>
<body>
<nav>
<p class="brand">Asmodee</p>
<div class="navlinks"><span class="active">New Releases</span><span>Board Games</span><span>Card Games</span><span>Expansions</span></div>
<div class="navicons">⚲</div>
</nav>
<section class="hero">
<h1>Every game is a world</h1>
<p>Strategy, discovery, and story — new titles and classic favorites for every table.</p>
<button>Shop New Releases</button>
</section>
<div class="strip">
<span class="active">All Games</span><span>Strategy</span><span>Party</span><span>Cooperative</span><span>Family</span>
</div>
<section class="cards">
<div class="card">
<div class="thumb t1"><span class="badge">New</span></div>
<p class="title">Ember Ridge</p>
<div class="row2"><span class="players">2–4 players · 45 min</span><span class="price">$39.99</span></div>
</div>
<div class="card">
<div class="thumb t2"><span class="badge sale">Sale</span></div>
<p class="title">Deep Current</p>
<div class="row2"><span class="players">1–5 players · 60 min</span><span class="price">$34.99</span></div>
</div>
<div class="card">
<div class="thumb t3"></div>
<p class="title">Violet Crown</p>
<div class="row2"><span class="players">3–6 players · 30 min</span><span class="price">$24.99</span></div>
</div>
</section>
<footer>
<div class="footcol"><span class="head">Shop</span><span>New Releases</span><span>Expansions</span></div>
<div class="footcol"><span class="head">Support</span><span>Rulebooks</span><span>FAQ</span></div>
<div class="footcol"><span class="head">Asmodee</span><span>© Asmodee</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eae0d2; color: #151414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eae0d2; color: #151414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; letter-spacing: -0.25px; margin: 0; color: #151414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #d43747; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #f7f7f7; color: #c4936f;
border: 1px solid #d43747; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #f7f7f7; color: #484747;
border: 1px solid #b5ada2; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #d02e2e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{
width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;
background:#eae0d2;font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;
color:#484747;
}
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:58px;background:#eae0d2;display:flex;align-items:center;justify-content:center;position:relative;padding:0 24px;}
.logo{font-weight:500;font-size:20px;letter-spacing:1px;color:#151414;}
.navicons{position:absolute;right:24px;top:50%;transform:translateY(-50%);display:flex;gap:14px;font-size:14px;color:#151414;}
.navburg{position:absolute;left:24px;top:50%;transform:translateY(-50%);font-size:16px;color:#151414;}
.hero{padding:20px 30px 8px;text-align:center;}
.hero .kick{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#c4936f;font-weight:600;margin-bottom:8px;}
.hero h1{font-size:28px;font-weight:500;letter-spacing:0.3px;margin:0 0 8px;color:#151414;}
.hero p{font-size:13px;color:#7b7a7a;margin:0 0 14px;max-width:460px;margin-left:auto;margin-right:auto;}
.heroBtn{display:inline-block;background:#d43747;color:#fff;font-size:13px;font-weight:600;padding:12px 34px;border-radius:9999px;}
.section{padding:12px 30px 0;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{background:#f7f7f7;border-radius:12px;overflow:hidden;position:relative;}
.photo{aspect-ratio:1/1;background:linear-gradient(160deg,#eae6df,#dac8af);position:relative;}
.photo .gown{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);width:50%;height:70%;background:linear-gradient(180deg,#c4936f,#eae0d2);border-radius:24px 24px 10px 10px;}
.heart{position:absolute;top:8px;right:8px;color:#d43747;font-size:14px;}
.salebadge{position:absolute;top:8px;left:8px;background:#d02e2e;color:#fff;font-size:9px;font-weight:600;text-transform:uppercase;padding:3px 8px;border-radius:9999px;}
.ctitle{font-size:13px;font-weight:500;color:#151414;padding:10px 12px 0;}
.cprice{font-size:14px;font-weight:600;color:#d43747;padding:2px 12px 12px;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#eae6df;border-top:1px solid #dac8af;color:#7b7a7a;font-size:11px;padding:10px 30px;display:flex;justify-content:space-between;}
</style>
<div class="wrap">
<div class="nav">
<div class="navburg">☰</div>
<div class="logo">Goumi Kids</div>
<div class="navicons"><span>⚲</span><span>♡</span><span>👜</span></div>
</div>
<div class="hero">
<div class="kick">Soft Since Day One</div>
<h1>Clothes as gentle as a swaddle.</h1>
<p>Convertible gowns, mitts that actually stay on, and fabrics soft enough for the first hundred days.</p>
<div class="heroBtn">Shop Newborn</div>
</div>
<div class="section">
<div class="grid">
<div class="card"><div class="photo"><div class="salebadge">Sale</div><div class="heart">♡</div><div class="gown"></div></div>
<div class="ctitle">Convertible Gown</div><div class="cprice">$38.00</div></div>
<div class="card"><div class="photo"><div class="heart">♡</div><div class="gown"></div></div>
<div class="ctitle">No-Scratch Mitts</div><div class="cprice">$16.00</div></div>
<div class="card"><div class="photo"><div class="heart">♡</div><div class="gown"></div></div>
<div class="ctitle">Ribbed Footie</div><div class="cprice">$34.00</div></div>
<div class="card"><div class="photo"><div class="salebadge">Sale</div><div class="heart">♡</div><div class="gown"></div></div>
<div class="ctitle">Swaddle Set</div><div class="cprice">$42.00</div></div>
</div>
</div>
<div class="footer"><span>© Goumi Kids</span><span>Free shipping on orders $75+</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #333333;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #333333;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.1px; margin: 0; color: #333333; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #54473f; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #54473f;
border: 1px solid #54473f; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #333333;
border: 1px solid #d9d9d9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.8px; background: #54473f; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:Pretendard,-apple-system,'Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; border-bottom:1px solid #d9d9d9; }
.brand { font-size:15px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:500; }
.catstrip { display:flex; gap:8px; padding:12px 30px; }
.chip { background:#fff; border:1px solid #d9d9d9; color:#555555; font-size:13px; font-weight:600; border-radius:9999px; padding:7px 14px; }
.chip.active { background:#54473f; color:#fff; border:none; }
main { display:flex; height:calc(640px - 56px - 44px); }
.gallery { width:38%; background:#f5f5f5; display:flex; align-items:center; justify-content:center; }
.jacket { width:150px; height:210px; background:linear-gradient(160deg,#54473f,#3a3028 70%); position:relative; }
.jacket::before { content:''; position:absolute; left:60px; top:-14px; width:30px; height:20px; background:#008bcc; }
.details { width:62%; padding:24px 32px; }
.badge { display:inline-block; background:#54473f; color:#fff; font-size:11px; font-weight:600; letter-spacing:0.8px;
text-transform:uppercase; padding:3px 6px; margin-bottom:12px; }
h1 { font-size:26px; font-weight:700; letter-spacing:-0.3px; margin:0 0 8px; }
.price { font-size:16px; font-weight:700; margin:0 0 14px; }
.desc { font-size:15px; line-height:1.6; color:#555555; margin:0 0 16px; max-width:400px; }
.sizes { display:flex; gap:8px; margin-bottom:16px; }
.size { border:1px solid #d9d9d9; border-radius:2px; height:40px; min-width:48px; display:flex; align-items:center; justify-content:center; font-size:13px; }
.size.sel { background:#333333; color:#fff; border:none; }
.buyrow { display:flex; gap:0; }
.btn-primary { background:#54473f; color:#fff; border:none; border-radius:4px; padding:12px 24px; font-size:15px; font-weight:600; height:48px; }
.btn-secondary { background:#fff; color:#54473f; border:1px solid #54473f; border-radius:4px; padding:11px 23px; font-size:15px; font-weight:600; height:48px; margin-left:10px; }
</style></head>
<body>
<nav>
<p class="brand">Cayl</p>
<div class="navlinks"><span>Trail</span><span>Mountain</span><span>Urban</span><span>Archive</span></div>
</nav>
<div class="catstrip"><span class="chip active">Jackets</span><span class="chip">Layers</span><span class="chip">Footwear</span></div>
<main>
<div class="gallery"><div class="jacket"></div></div>
<div class="details">
<span class="badge">New</span>
<h1>Ridge Shell Jacket</h1>
<p class="price">₩248,000</p>
<p class="desc">A weatherproof shell built for alpine conditions — flat-seam construction, box stitching, no ornament.</p>
<div class="sizes">
<div class="size">S</div><div class="size sel">M</div><div class="size">L</div><div class="size">XL</div>
</div>
<div class="buyrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Size Guide</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b64dd; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b64dd; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8cb4ea; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1d2a3e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b64dd; color: #1d2a3e;
border: 1px solid #1d2a3e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b64dd; color: #f5f5f5;
border: 1px solid #307be1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8cb4ea; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e5bc4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1d2a3e; box-sizing:border-box;
font-family:Inter,-apple-system,Helvetica,Arial,sans-serif; font-size:14px; }
* { box-sizing:border-box; }
.shell { display:flex; height:640px; }
.sidebar { width:220px; background:#ffffff; border-right:1px solid #cad3e2; padding:16px 0; }
.sidebar .brand { font-weight:700; font-size:15px; padding:0 16px 16px; color:#111c2c; }
.sidebar .cat { font-size:11px; text-transform:uppercase; color:#1d2a3e; opacity:0.6; padding:10px 16px 4px; letter-spacing:0.04em; }
.sidebar li { list-style:none; font-size:14px; font-weight:500; color:#1d2a3e; padding:6px 16px; }
.sidebar li.on { color:#0b64dd; background:#d9e8ff; }
.content { flex:1; padding:24px 32px; }
.breadcrumb { font-size:12px; color:#1d2a3e; opacity:0.6; margin-bottom:6px; }
.content h1 { font-size:20.0004px; font-weight:600; margin:0 0 6px; color:#111c2c; }
.content > p { font-size:14px; color:#1d2a3e; opacity:0.75; margin:0 0 20px; max-width:560px; line-height:1.5; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.card { background:#ecf1f9; border-radius:4px; padding:16px; }
.card h3 { font-size:16px; margin:0 0 6px; color:#111c2c; }
.card p { font-size:13px; color:#1d2a3e; opacity:0.7; margin:0 0 12px; }
.row-btns { display:flex; gap:8px; }
.btn { background:#0b64dd; color:#fff; border-radius:4px; padding:6px 14px; font-size:13px; font-weight:500; }
.btn.sub { background:#d9e8ff; color:#0b64dd; }
.codebox { margin-top:18px; background:#ecf1f9; border:1px solid #cad3e2; border-radius:4px; padding:12px 16px;
font-family:monospace; font-size:12.5px; color:#1d2a3e; }
</style></head>
<body>
<div class="shell">
<div class="sidebar">
<div class="brand">Elastic UI</div>
<div class="cat">Layout</div>
<ul style="margin:0;padding:0;">
<li>Grid</li><li>Flex</li><li>Page template</li>
</ul>
<div class="cat">Containers</div>
<ul style="margin:0;padding:0;">
<li class="on">Card</li><li>Panel</li><li>Modal</li>
</ul>
<div class="cat">Forms</div>
<ul style="margin:0;padding:0;">
<li>Form control</li><li>Combo box</li><li>Date picker</li>
</ul>
</div>
<div class="content">
<div class="breadcrumb">Components / Containers / Card</div>
<h1>Card</h1>
<p>Cards are used throughout the app for containing content. They can be interactive, clickable, and stateful.</p>
<div class="grid">
<div class="card"><h3>Selectable card</h3><p>Toggle a card into a selected state to build option pickers.</p>
<div class="row-btns"><div class="btn">Primary</div><div class="btn sub">Docs</div></div></div>
<div class="card"><h3>Beta badge card</h3><p>Flag a feature as beta or experimental directly on the card.</p>
<div class="row-btns"><div class="btn">Primary</div><div class="btn sub">Docs</div></div></div>
</div>
<div class="codebox"><EuiCard title="Elastic" description="..." /></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0f0f10; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0f0f10; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e8e8e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c1c1f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0f0f10; color: #ffffff;
border: 1px solid #1c1c1f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0f0f10; color: #f5f5f5;
border: 1px solid #343435; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e8e8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #111112; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0F0F10; color:#ECECEE; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px; display:flex; align-items:center; }
.hero { position:relative; z-index:2; width:460px; padding:0 56px; display:flex; flex-direction:column; gap:16px; }
.word { font-size:40px; font-weight:700; letter-spacing:-0.6pt; line-height:1.08; margin:0; }
.tag { font-size:15px; color:#9A9AA2; line-height:1.55; max-width:340px; margin:0; }
.row { display:flex; gap:12px; align-items:center; margin-top:6px; }
.cta { background:#3A7BFD; color:#FFFFFF; border-radius:999px; padding:13px 26px; font-weight:600; font-size:15px; }
.cta2 { background:#1B2A4A; color:#9FC0FF; border-radius:999px; padding:13px 24px; font-weight:600; font-size:14px; }
.card { margin-top:8px; background:#1E1E21; border:1pt solid #2A2A2E; border-radius:16px; padding:14px; display:flex; gap:12px; align-items:center; max-width:340px; }
.cavatar { width:44px; height:44px; border-radius:50%; background:radial-gradient(circle at 36% 30%, #6FA0FF, #3A7BFD 55%, #274FB0); flex-shrink:0; }
.card b { font-size:14px; font-weight:600; display:block; }
.card span { font-size:12px; color:#9A9AA2; }
.phonewrap { position:relative; z-index:2; width:500px; height:640px; display:flex; align-items:center; justify-content:center; }
.phone { position:relative; width:296px; height:604px; background:#0F0F10; border:1pt solid #2A2A2E; border-radius:46px;
box-shadow:0 30px 90px rgba(0,0,0,0.6); overflow:hidden; }
.notch { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:120px; height:22px; background:#000; border-radius:12px; z-index:6; }
.pheader { display:flex; align-items:center; gap:10px; padding:36px 16px 12px; border-bottom:0.5pt solid #2A2A2E; }
.pavatar { width:34px; height:34px; border-radius:50%; background:radial-gradient(circle at 36% 30%, #6FA0FF, #3A7BFD 55%, #274FB0); }
.pheader b { font-size:15px; font-weight:600; display:block; }
.pheader span { font-size:10px; color:#9A9AA2; }
.stream { padding:14px 14px 10px; display:flex; flex-direction:column; gap:10px; }
.row-msg { display:flex; gap:8px; align-items:flex-start; }
.row-msg.user { justify-content:flex-end; }
.mavatar { width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 36% 30%, #6FA0FF, #3A7BFD 55%, #274FB0); flex-shrink:0; margin-top:2px; }
.bubble { max-width:78%; font-size:12px; line-height:1.5; padding:9px 12px; }
.bubble.ai { background:#1C1C1F; border:1pt solid #2A2A2E; border-radius:4px 16px 16px 16px; }
.bubble.user { background:#26262A; border-radius:16px 4px 16px 16px; }
.action { color:#9A9AA2; font-style:italic; }
.composer { position:absolute; left:14px; right:14px; bottom:16px; height:40px; background:#1E1E21; border:1pt solid #2A2A2E;
border-radius:20px; display:flex; align-items:center; padding:0 6px 0 14px; }
.composer span { font-size:11px; color:#66666E; flex:1; }
.send { width:30px; height:30px; border-radius:50%; background:#3A7BFD; display:flex; align-items:center; justify-content:center; }
.send i { width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:8px solid #fff; }
</style></head>
<body>
<div class="stage">
<div class="hero">
<div style="font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#9A9AA2;margin-bottom:2px;">Character.AI (iOS)</div>
<h1 class="word">The chat is the product.</h1>
<p class="tag">A near-black room where speaker isn't color — it's a single tucked corner. Roleplay actions fade into italics; everything else stays quiet.</p>
<div class="row">
<div class="cta">Start chat</div>
<div class="cta2">Create a Character</div>
</div>
<div class="card">
<span class="cavatar"></span>
<div><b>Aria</b><span>A curious starship navigator · by @lumen</span></div>
</div>
</div>
<div class="phonewrap">
<div class="phone">
<div class="notch"></div>
<div class="pheader">
<span class="pavatar"></span>
<div><b>Aria</b><span>by @lumen · 2.4M chats</span></div>
</div>
<div class="stream">
<div class="row-msg">
<span class="mavatar"></span>
<div class="bubble ai"><span class="action">*she looks up from the star charts*</span><br>You're early. Good — the readings just changed.</div>
</div>
<div class="row-msg user">
<div class="bubble user">What changed?</div>
</div>
<div class="row-msg">
<span class="mavatar"></span>
<div class="bubble ai">There's a signal three sectors out. I want you to see it before I log it.</div>
</div>
</div>
<div class="composer">
<span>Message Aria…</span>
<span class="send"><i></i></span>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f3e4; color: #303030;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f3e4; color: #303030;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #303030; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.27; letter-spacing: 0.2px; background: #1f3521; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.27; letter-spacing: 0.2px; background: #f7f3e4; color: #1f3521;
border: 1px solid #1f3521; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #303030;
border: 1px solid #c5c2b7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.18; letter-spacing: 0.2px; background: #1f3521; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:flex; flex-direction:column; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f3e4; color:#707070; box-sizing:border-box;
font-family:'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 38px;
border-bottom:1px solid #dedede; }
.brand { font-family:'Georgia',serif; font-size:19px; font-weight:700; color:#1f3521; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; font-weight:500; color:#303030; }
.cart { background:#1f3521; color:#fff; font-size:12px; padding:7px 15px; border-radius:8px; }
.hero { padding:24px 38px 16px; max-width:640px; }
.hero .kicker { font-size:11px; font-weight:700; color:#bf339d; text-transform:uppercase; letter-spacing:0.8px; margin-bottom:8px; }
.hero h1 { font-family:'Georgia',serif; font-size:27px; font-weight:700; color:#303030; margin:0 0 10px; line-height:1.3; }
.hero p { font-size:14px; color:#707070; line-height:1.5; margin:0; }
.ecorow { display:flex; gap:14px; padding:6px 38px 16px; }
.ecocard { flex:1; background:#ffffff; border-radius:12px; padding:14px; display:flex; align-items:center; gap:12px; }
.ecodot { width:36px; height:36px; border-radius:999px; flex-shrink:0; }
.e1 { background:#cdec85; } .e2 { background:#aaf2f3; } .e3 { background:#bf339d; }
.ecocard .t { font-size:13px; font-weight:700; color:#303030; margin:0 0 2px; }
.ecocard .d { font-size:11px; color:#707070; }
.section { padding:0 38px; }
.section h2 { font-family:'Georgia',serif; font-size:18px; font-weight:700; color:#303030; margin:0 0 12px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { background:#ffffff; border-radius:12px; padding:10px; }
.cover { height:66px; border-radius:8px; margin-bottom:8px; }
.g1 .cover { background:#cc6328; } .g2 .cover { background:#1f3521; } .g3 .cover { background:#cdec85; } .g4 .cover { background:#aaf2f3; }
.card .t { font-size:12px; font-weight:500; color:#303030; margin:0 0 4px; }
.card .p { font-size:12px; font-weight:700; color:#1f3521; }
footer { margin-top:auto; flex-shrink:0; padding:12px 38px; border-top:1px solid #eeeeee; display:flex;
justify-content:space-between; font-size:11px; color:#aaaaaa; }
</style></head>
<body>
<nav>
<div class="brand">Grove Collaborative Cleaning 2</div>
<div class="navlinks"><span>Cleaning</span><span>Ingredients</span><span>Eco Score</span><span>Refills</span></div>
<div class="cart">Cart · 3</div>
</nav>
<div class="hero">
<div class="kicker">Read the label, not just the price</div>
<h1>A cleaning aisle built on ingredient transparency.</h1>
<p>Every bottle carries a full ingredient list and an eco-score — because sustainability should be legible, not a marketing slogan.</p>
</div>
<div class="ecorow">
<div class="ecocard"><div class="ecodot e1"></div><div><div class="t">Plant-Derived</div><div class="d">No petroleum surfactants</div></div></div>
<div class="ecocard"><div class="ecodot e2"></div><div><div class="t">Biodegradable</div><div class="d">Breaks down in 28 days</div></div></div>
<div class="ecocard"><div class="ecodot e3"></div><div><div class="t">Cruelty-Free</div><div class="d">Never tested on animals</div></div></div>
</div>
<div class="section">
<h2>Cleaning Essentials</h2>
<div class="grid">
<div class="card g1"><div class="cover"></div><div class="t">Bathroom Cleaner</div><div class="p">$5.95</div></div>
<div class="card g2"><div class="cover"></div><div class="t">Glass Cleaner</div><div class="p">$4.95</div></div>
<div class="card g3"><div class="cover"></div><div class="t">Floor Cleaner</div><div class="p">$6.95</div></div>
<div class="card g4"><div class="cover"></div><div class="t">All-Purpose Refill</div><div class="p">$3.95</div></div>
</div>
</div>
<footer><span>Made in USA · Certified B Corp</span><span>Refillable bottles, forever</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.6; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.8px; background: #00b4b3; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.8px; background: #ffffff; color: #222222;
border: 1px solid #00b4b3; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.4px; background: #00b4b3; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#3e3e3e; font-family:'Helvetica Neue',Roboto,Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #ececec;}
.logo{font-size:20px;font-weight:700;color:#222222;letter-spacing:.1px;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#3e3e3e;}
.cart{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#00b4b3;}
.hero{height:270px;display:flex;align-items:center;padding:0 44px;background:#f6f6f6;}
.herotext{width:440px;}
.herotext h1{font-size:38px;font-weight:300;color:#222222;margin:0 0 14px;line-height:1.2;}
.herotext p{font-size:15px;color:#3e3e3e;margin:0 0 22px;max-width:340px;}
.btn{display:inline-block;height:46px;line-height:46px;padding:0 28px;background:#00b4b3;color:#fff;font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-radius:6px;width:fit-content;}
.bagbox{position:absolute;right:100px;width:220px;height:180px;}
.bag{position:absolute;right:0;bottom:0;width:170px;height:130px;border-radius:6px;background:linear-gradient(135deg,#382110,#5a3419);}
.handle{position:absolute;right:60px;bottom:120px;width:50px;height:26px;border:6px solid #382110;border-bottom:none;border-radius:20px 20px 0 0;}
.sec{padding:24px 44px 0;position:relative;}
.sectitle{font-size:16px;font-weight:700;margin-bottom:16px;color:#222222;}
.grid{display:flex;gap:14px;}
.card{width:198px;border:1px solid #ececec;padding:0;}
.thumb{height:110px;background:#f6f6f6;}
.body{padding:10px;}
.pname{font-size:13px;font-weight:600;color:#222222;}
.pprice{font-size:13px;color:#00b4b3;font-weight:700;margin-top:4px;}
.swatchrow{display:flex;gap:6px;margin-top:8px;}
.swatch{width:16px;height:16px;border-radius:9999px;}
</style>
<div class="nav">
<div class="logo">Laura Davidson</div>
<div class="navlinks"><span>Briefcases</span><span>Backpacks</span><span>Travel</span><span>Leather Care</span></div>
<div class="cart">Cart (0)</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Work tools, not lifestyle accessories.</h1>
<p>Utilitarian leather goods built for the daily commute and the long meeting.</p>
<div class="btn">Shop Bags</div>
</div>
<div class="bagbox"><div class="handle"></div><div class="bag"></div></div>
</div>
<div class="sec">
<div class="sectitle">Considered Purchases</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#382110,#6b4423)"></div><div class="body"><div class="pname">Leather Briefcase</div><div class="pprice">$395</div><div class="swatchrow"><div class="swatch" style="background:#382110;"></div><div class="swatch" style="background:#5a3419;"></div><div class="swatch" style="background:#222222;"></div></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#222222,#3e3e3e)"></div><div class="body"><div class="pname">Rolling Laptop Bag</div><div class="pprice">$260</div><div class="swatchrow"><div class="swatch" style="background:#222222;"></div><div class="swatch" style="background:#382110;"></div></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#5a3419,#382110)"></div><div class="body"><div class="pname">Weekender Duffel</div><div class="pprice">$310</div><div class="swatchrow"><div class="swatch" style="background:#5a3419;"></div><div class="swatch" style="background:#222222;"></div></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00b4b3,#5adfcb)"></div><div class="body"><div class="pname">Leather Conditioner</div><div class="pprice">$18</div><div class="swatchrow"><div class="swatch" style="background:#00b4b3;"></div></div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #337ab7;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #337ab7;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #337ab7; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.38; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ff6600; color: #ffffff;
border: none; border-radius: 4px; padding: 6px 12px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #f5f5f5; color: #555555;
border: 1px solid #ff6600; border-radius: 4px;
padding: 6px 12px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #110011;
border: 1px solid #e5e5e5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.33; background: #ffeadb; color: #ff6600;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#110011; box-sizing:border-box;
font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; }
* { box-sizing: border-box; }
body { display:flex; flex-direction:column; font-size:14px; }
nav { flex:0 0 50px; height:50px; background:#080808; display:flex; align-items:center;
justify-content:space-between; padding:0 24px; }
.brand { font-size:18px; font-weight:700; margin:0; color:#ff6600; }
.navlinks { display:flex; gap:20px; }
.navlinks span { font-size:13px; color:#9d9d9d; }
.navlinks span:hover, .navlinks span.on { color:#ffffff; }
.navsearch { display:flex; align-items:center; }
.navsearch input { width:150px; height:30px; border:1px solid #333333; border-radius:3px 0 0 3px;
background:#1a1a1a; color:#cccccc; font-size:12px; padding:0 10px; }
.navsearch .go { height:30px; width:34px; background:#ff6600; border-radius:0 3px 3px 0;
display:flex; align-items:center; justify-content:center; }
.glass { width:12px; height:12px; border:1.5px solid #ffffff; border-radius:50%; position:relative; }
.glass::after { content:''; position:absolute; width:5px; height:1.5px; background:#ffffff; right:-4px; bottom:0; transform:rotate(45deg); }
.subbar { flex:0 0 34px; height:34px; background:#f5f5f5; border-bottom:1px solid #eeeeee;
display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.crumb { font-size:12px; color:#777777; }
.crumb b { color:#777777; font-weight:400; }
.crumb .cur { color:#777777; }
.crumb a { color:#337ab7; }
.info-pill { background:#d9edf7; color:#31708f; border:1px solid #bce8f1; border-radius:4px;
padding:3px 10px; font-size:11.5px; }
.body-row { flex:1 1 auto; display:flex; overflow:hidden; }
aside { flex:0 0 188px; width:188px; background:#f5f5f5; border-right:1px solid #eeeeee; padding:14px 16px; }
aside h4 { margin:0 0 10px; font-size:13px; font-weight:700; color:#110011; }
aside .cat { display:block; font-size:12.5px; color:#337ab7; margin:7px 0; }
aside .cat.active { color:#ff6600; font-weight:700; }
aside .sub { display:block; font-size:12px; color:#337ab7; margin:5px 0 5px 12px; }
.content { flex:1 1 auto; overflow:hidden; padding:12px 20px 0; display:flex; flex-direction:column; }
.content h2 { margin:0 0 8px; font-size:17px; font-weight:700; color:#110011; }
table.cat-table { width:100%; border-collapse:collapse; }
table.cat-table thead th { background:#f5f5f5; text-align:left; font-size:12.5px; font-weight:700;
color:#555555; padding:6px 10px; border-bottom:1px solid #eeeeee; }
table.cat-table tbody td { padding:8px 10px; border-bottom:1px solid #eeeeee; font-size:13px; vertical-align:middle; }
table.cat-table tbody tr:nth-child(even) { background:#f5f5f5; }
.lot { font-family:Consolas, 'Courier New', Courier, monospace; font-size:11.5px; color:#777777; }
.stamp-title { color:#337ab7; }
.country { color:#777777; font-size:12px; }
.cond { display:inline-block; font-size:11px; padding:2px 7px; border-radius:4px; border:1px solid transparent; }
.cond.mint { background:#dff0d8; color:#3c763d; border-color:#d6e9c6; }
.cond.used { background:#fcf8e3; color:#8a6d3b; border-color:#faebcc; }
.cond.dmg { background:#f2dede; color:#a94442; border-color:#ebccd1; }
.lot-price { text-align:right; font-weight:700; color:#110011; }
.lot-add { text-align:right; }
.btn-add { background:#ff6600; color:#fff; border:none; border-radius:4px; padding:4px 10px; font-size:11.5px; }
.pagination { flex:0 0 30px; height:30px; display:flex; align-items:center; justify-content:center; gap:4px;
border-top:1px solid #eeeeee; }
.pg { font-size:12px; color:#337ab7; border:1px solid #eeeeee; border-radius:4px; padding:3px 9px; }
.pg.on { background:#ff6600; color:#fff; border-color:#ff6600; }
footer { flex:0 0 40px; height:40px; background:#080808; color:#9d9d9d; display:flex; align-items:center;
justify-content:space-between; padding:0 24px; font-size:11.5px; }
</style></head>
<body>
<nav>
<p class="brand">Arpin Philately</p>
<div class="navlinks">
<span class="on">Catalogue</span><span>Great Britain</span><span>Commonwealth</span><span>Topicals</span><span>Sell</span>
</div>
<div class="navsearch">
<input type="text" placeholder="Search lot #, country..." readonly>
<div class="go"><div class="glass"></div></div>
</div>
</nav>
<div class="subbar">
<span class="crumb"><a>Home</a> / <a>Europe</a> / <span class="cur">Great Britain</span></span>
<span class="info-pill">Free tracked shipping over $75</span>
</div>
<div class="body-row">
<aside>
<h4>Categories</h4>
<span class="cat">Europe</span>
<span class="sub active">Great Britain</span>
<span class="sub">France</span>
<span class="cat">Commonwealth</span>
<span class="cat">United States</span>
<span class="cat">Topical</span>
<span class="cat">Errors & Varieties</span>
</aside>
<div class="content">
<h2>Great Britain — Catalogue Listings</h2>
<table class="cat-table">
<thead>
<tr><th>Lot #</th><th>Description</th><th>Country</th><th>Condition</th><th style="text-align:right">Price</th><th></th></tr>
</thead>
<tbody>
<tr>
<td class="lot">GB-1840-001</td>
<td class="stamp-title">Penny Black, 1d, plate 1b</td>
<td class="country">Great Britain</td>
<td><span class="cond used">Used</span></td>
<td class="lot-price">$1,240.00</td>
<td class="lot-add"><button class="btn-add">Add</button></td>
</tr>
<tr>
<td class="lot">GB-1902-014</td>
<td class="stamp-title">Edward VII, 2½d Definitive</td>
<td class="country">Great Britain</td>
<td><span class="cond mint">Mint / NH</span></td>
<td class="lot-price">$68.00</td>
<td class="lot-add"><button class="btn-add">Add</button></td>
</tr>
<tr>
<td class="lot">GB-1929-072</td>
<td class="stamp-title">PUC Congress, 1s Green</td>
<td class="country">Great Britain</td>
<td><span class="cond mint">Mint / Hinged</span></td>
<td class="lot-price">$212.50</td>
<td class="lot-add"><button class="btn-add">Add</button></td>
</tr>
<tr>
<td class="lot">GB-1963-231</td>
<td class="stamp-title">Freedom From Hunger, 3d</td>
<td class="country">Great Britain</td>
<td><span class="cond dmg">Faulty</span></td>
<td class="lot-price">$4.25</td>
<td class="lot-add"><button class="btn-add">Add</button></td>
</tr>
<tr>
<td class="lot">GB-1978-105</td>
<td class="stamp-title">Coronation 25th Anniv. Set</td>
<td class="country">Great Britain</td>
<td><span class="cond mint">Mint / NH</span></td>
<td class="lot-price">$31.00</td>
<td class="lot-add"><button class="btn-add">Add</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="pagination">
<span class="pg">«</span><span class="pg on">1</span><span class="pg">2</span><span class="pg">3</span><span class="pg">»</span>
</div>
<footer>
<span>© Arpin Philately</span>
<span>Arpin Philately · Shipping · Returns · Contact</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5a2b82; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5a2b82; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #af9ac1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6fbf4e; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5a2b82; color: #6fbf4e;
border: 1px solid #6fbf4e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5a2b82; color: #f5f5f5;
border: 1px solid #734b94; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #af9ac1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5d437a; color: #6fbf4e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F5F3F8; color:#1F1A2B; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#FFFFFF; border-bottom:1px solid #E5E1EC; }
.brand { font-size:19px; font-weight:900; color:#1F1A2B; letter-spacing:-0.3px; margin:0; }
.navtabs { display:flex; gap:26px; font-size:13px; font-weight:700; color:#9C92AD; }
.navtabs span.on { color:#5A2B82; }
.navpill { background:#6FBF4E; color:#14302A; border-radius:999px; padding:8px 18px; font-size:13px; font-weight:800; }
.wrap { display:flex; gap:22px; padding:22px 36px; }
.left { width:372px; display:flex; flex-direction:column; align-items:center; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; color:#6E6480; }
.total { font-size:36px; font-weight:900; letter-spacing:-1pt; margin:2px 0 0; }
.delta { font-size:13px; font-weight:700; color:#6FBF4E; margin-top:4px; }
.delta span { color:#6E6480; font-weight:600; }
.donutbox { position:relative; width:150px; height:150px; margin:18px 0 6px; }
.donut { width:150px; height:150px; border-radius:50%;
background:conic-gradient(#5A2B82 0deg 136.8deg, #6FBF4E 136.8deg 230.4deg, #45C2B0 230.4deg 295.2deg, #F2C84B 295.2deg 360deg); }
.donuthole { position:absolute; left:20px; top:20px; width:110px; height:110px; border-radius:50%;
background:#F5F3F8; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.donuthole .style { font-size:9px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; color:#6E6480; }
.donuthole .pct { font-size:15px; font-weight:800; margin-top:2px; }
.legend { width:100%; margin-top:10px; }
.lrow { display:flex; align-items:center; padding:6px 4px; border-bottom:1px solid #E5E1EC; font-size:13px; }
.lrow:last-child { border-bottom:none; }
.chip { width:11px; height:11px; border-radius:3px; margin-right:9px; flex-shrink:0; }
.lname { font-weight:700; flex:1; }
.lpct { color:#6E6480; font-weight:600; margin-right:12px; }
.lval { font-weight:800; width:64px; text-align:right; }
.right { flex:1; display:flex; flex-direction:column; gap:16px; }
.roundups { border-radius:18px; padding:18px 20px; color:#FFFFFF;
background:linear-gradient(150deg, #5A2B82, #7B43A8);
box-shadow:0 10px 24px -12px rgba(74,32,106,0.4); }
.ru-top { display:flex; align-items:center; justify-content:space-between; }
.ru-eyebrow { font-size:12px; font-weight:700; letter-spacing:0.4px; opacity:0.85; text-transform:uppercase; }
.ru-auto { background:rgba(255,255,255,0.16); border-radius:999px; padding:3px 10px; font-size:10px; font-weight:800; }
.ru-amt { font-size:28px; font-weight:900; margin-top:8px; }
.ru-sub { font-size:12px; font-weight:600; opacity:0.8; margin-top:2px; }
.earn-title { font-size:13px; font-weight:800; color:#6E6480; text-transform:uppercase; letter-spacing:0.4px; }
.earnrow { display:flex; align-items:center; padding:10px 0; border-bottom:1px solid #E5E1EC; }
.earnrow:last-child { border-bottom:none; }
.brandchip { width:38px; height:38px; border-radius:11px; margin-right:12px; flex-shrink:0;
display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:14px; }
.ename { font-weight:700; font-size:14px; }
.esub { font-size:12px; color:#6E6480; font-weight:600; margin-top:1px; }
.eplus { margin-left:auto; color:#6FBF4E; font-weight:800; font-size:14px; }
.cta { margin-top:auto; background:#6FBF4E; color:#14302A; text-align:center; font-weight:800; font-size:15px;
border-radius:999px; padding:13px 0; }
</style></head>
<body>
<nav>
<p class="brand">Acorns (iOS)</p>
<div class="navtabs"><span class="on">Invest</span><span>Later</span><span>Spend</span><span>Earn</span></div>
<span class="navpill">Invest now</span>
</nav>
<div class="wrap">
<div class="left">
<span class="eyebrow">All Time</span>
<div class="total">$8,142.67</div>
<div class="delta">▲ $214.38 (2.7%) <span>all time</span></div>
<div class="donutbox">
<div class="donut"></div>
<div class="donuthole"><span class="style">Aggressive</span><span class="pct">100% invested</span></div>
</div>
<div class="legend">
<div class="lrow"><span class="chip" style="background:#5A2B82"></span><span class="lname">Large Company</span><span class="lpct">38%</span><span class="lval">$3,094</span></div>
<div class="lrow"><span class="chip" style="background:#6FBF4E"></span><span class="lname">Small Company</span><span class="lpct">26%</span><span class="lval">$2,117</span></div>
<div class="lrow"><span class="chip" style="background:#45C2B0"></span><span class="lname">International</span><span class="lpct">18%</span><span class="lval">$1,466</span></div>
<div class="lrow"><span class="chip" style="background:#F2C84B"></span><span class="lname">Real Estate</span><span class="lpct">18%</span><span class="lval">$1,466</span></div>
</div>
</div>
<div class="right">
<div class="roundups">
<div class="ru-top"><span class="ru-eyebrow">Round-Ups</span><span class="ru-auto">Auto</span></div>
<div class="ru-amt">$4.62</div>
<div class="ru-sub">Pending · invests at $5.00</div>
</div>
<div>
<div class="earn-title">Found Money</div>
<div class="earnrow">
<span class="brandchip" style="background:#F2785C">N</span>
<div><div class="ename">Nike</div><div class="esub">1% back · 3 days ago</div></div>
<span class="eplus">+$3.20</span>
</div>
<div class="earnrow">
<span class="brandchip" style="background:#45C2B0">W</span>
<div><div class="ename">Walmart</div><div class="esub">2% back · 5 days ago</div></div>
<span class="eplus">+$1.86</span>
</div>
<div class="earnrow">
<span class="brandchip" style="background:#F2C84B">A</span>
<div><div class="ename">Apple</div><div class="esub">3% back · 1 week ago</div></div>
<span class="eplus">+$5.94</span>
</div>
</div>
<div class="cta">Invest now</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1f75cb; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1f75cb; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #95bbe2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fc6d26; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1f75cb; color: #ffffff;
border: 1px solid #fc6d26; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1f75cb; color: #f5f5f5;
border: 1px solid #4189d2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #95bbe2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4274b1; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#171321; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #dcdcde; background:#ffffff; }
.brand { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:660; letter-spacing:-0.3px; }
.brand .dot { width:10px; height:10px; border-radius:3px; background:#fc6d26; transform:rotate(20deg); }
.navlinks { display:flex; gap:24px; font-size:14px; color:#74717a; }
.navlinks span.on { color:#171321; font-weight:660; }
.navbtns { display:flex; gap:10px; }
.btn-white { background:#ffffff; color:#171321; border:1px solid #bfbfc3; border-radius:4px;
padding:9px 14px; font-size:13px; font-weight:660; }
.btn-ink { background:#171321; color:#ffffff; border:none; border-radius:4px;
padding:9px 14px; font-size:13px; font-weight:660; }
.hero { padding:26px 32px 18px; }
.hero h1 { font-size:42px; font-weight:660; letter-spacing:-1.4px; line-height:1.05; margin:0 0 8px; max-width:560px; }
.hero h1 span { color:#7759c2; }
.hero p { font-size:15px; color:#4c4b51; margin:0 0 16px; max-width:480px; line-height:1.5; }
.hero .row { display:flex; gap:10px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:6px 32px 20px; }
.stat { background:#1f1c2e; border-radius:16px; padding:16px 18px; color:#ffffff; }
.stat .num { font-size:26px; font-weight:660; letter-spacing:-0.6px; }
.stat .cap { font-size:12px; color:#bcbac2; margin-top:4px; line-height:1.4; }
.stat.orange .num { color:#fc6d26; }
.stat.purple .num { color:#a793e6; }
.panel { margin:0 32px; border:1px solid #dcdcde; border-radius:16px; overflow:hidden; }
.panel-head { display:flex; justify-content:space-between; align-items:center;
padding:12px 18px; background:#f4f4f4; border-bottom:1px solid #dcdcde; }
.panel-head b { font-size:14px; font-weight:660; }
.panel-head span { font-size:12px; color:#74717a; }
.row-item { display:flex; align-items:center; justify-content:space-between;
padding:11px 18px; border-bottom:1px solid #f2f1f5; font-size:13px; }
.row-item:last-child { border-bottom:none; }
.ri-left { display:flex; align-items:center; gap:10px; }
.ri-left .icon { width:16px; height:16px; border-radius:4px; background:#f2f1f5; flex:0 0 auto; }
.ri-title { font-weight:500; color:#28272d; }
.ri-meta { color:#74717a; font-size:12px; }
.pill { border-radius:160px; padding:2px 8px; font-size:11px; font-weight:500; white-space:nowrap; }
.pill.success { background:#c3e6cd; color:#306440; }
.pill.danger { background:#fdd4cd; color:#a32c12; }
.pill.tier { background:#e1d8f9; color:#5c47a6; }
.pill.duo { background:#f6f3fe; color:#7759c2; border:1px solid #e1d8f9; }
</style></head>
<body>
<nav>
<div class="brand"><span class="dot"></span>GitLab</div>
<div class="navlinks"><span class="on">Platform</span><span>Product</span><span>Why GitLab</span><span>Pricing</span></div>
<div class="navbtns"><button class="btn-white">Request a demo</button><button class="btn-ink">Get free trial</button></div>
</nav>
<section class="hero">
<h1>Ship faster.<br>With <span>trust</span>.</h1>
<p>One DevSecOps platform for the entire software lifecycle — plan, build, secure, and deploy from a single application.</p>
<div class="row"><button class="btn-ink">Get free trial</button><button class="btn-white">Try for free</button></div>
</section>
<div class="stats">
<div class="stat"><div class="num">4 hrs</div><div class="cap">saved per engineer, per week</div></div>
<div class="stat orange"><div class="num">82%</div><div class="cap">decrease in cycle time</div></div>
<div class="stat purple"><div class="num">3.1x</div><div class="cap">faster reviews with GitLab Duo</div></div>
</div>
<div class="panel">
<div class="panel-head"><b>Merge requests</b><span>4 open</span></div>
<div class="row-item">
<div class="ri-left"><span class="icon"></span><div><div class="ri-title">Refactor auth token cache</div><div class="ri-meta">!482 · main ← feature/auth-cache</div></div></div>
<span class="pill success">Passed</span>
</div>
<div class="row-item">
<div class="ri-left"><span class="icon"></span><div><div class="ri-title">Add rate limiting to public API</div><div class="ri-meta">!481 · main ← feature/rate-limit</div></div></div>
<span class="pill duo">Duo reviewed</span>
</div>
<div class="row-item">
<div class="ri-left"><span class="icon"></span><div><div class="ri-title">Bump vendored dependencies</div><div class="ri-meta">!479 · main ← chore/deps</div></div></div>
<span class="pill danger">Failed</span>
</div>
<div class="row-item">
<div class="ri-left"><span class="icon"></span><div><div class="ri-title">Enable Ultimate security scanning</div><div class="ri-meta">!477 · main ← chore/security</div></div></div>
<span class="pill tier">Ultimate</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ede8e3; color: #1a1918;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ede8e3; color: #1a1918;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; margin: 0; color: #1a1918; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5c5c5c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; background: #4d3159; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; background: transparent; color: #4d3159;
border: 1px solid #4d3159; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ede8e3; color: #1a1918;
border: 1px solid #b8b4b0; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5c5c5c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #f1e02b; color: #1a1918;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ede8e3; font-family:'brandon-grotesque', Inter, sans-serif; color:#3d3b3a; }
*{box-sizing:border-box;}
.promo{position:absolute; top:0; left:0; width:960px; height:26px; background:#192f5d; color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; letter-spacing:0.3px;}
.nav{position:absolute; top:26px; left:0; width:960px; height:60px; background:#ede8e3; border-bottom:1px solid #eeeeee; display:flex; align-items:center; justify-content:space-between; padding:0 40px;}
.logo{font-family:'Cormorant',Georgia,serif; font-size:24px; color:#1a1918;}
.navlinks{display:flex; gap:22px; font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#1a1918;}
.cart{font-size:11px; font-weight:700; color:#4d3159;}
.hero{position:absolute; top:86px; left:0; width:960px; height:270px; display:flex;}
.heroImgSide{width:440px; height:270px; background:linear-gradient(135deg,#eddeff,#d9c3d2);}
.heroText{width:520px; display:flex; flex-direction:column; justify-content:center; padding:0 44px;}
.headline{font-family:'Cormorant',Georgia,serif; font-size:44px; font-weight:400; line-height:1.1; color:#1a1918; margin-bottom:14px;}
.sub{font-size:14px; color:#3d3b3a; margin-bottom:20px; width:380px;}
.btn{display:inline-block; background:#4d3159; color:#fff; font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:14px 30px;}
.colorbar{position:absolute; top:356px; left:40px; width:880px; height:64px; display:flex; align-items:center; gap:12px;}
.swatch{width:32px; height:32px; border-radius:9999px; border:2px solid transparent;}
.s1{background:#eddeff;} .s2{background:#fce5d4;} .s3{background:#b5e5e1;} .s4{background:#d9c3d2; border:2px solid #4d3159;} .s5{background:#f9e7a7;}
.colorbarLabel{font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#5c5c5c; margin-right:8px;}
.sec{position:absolute; top:436px; left:0; width:960px; height:204px; padding:20px 40px;}
.secTitle{font-family:'Cormorant',Georgia,serif; font-size:26px; margin-bottom:14px; color:#1a1918;}
.grid{display:flex; gap:16px;}
.card{width:216px; background:#fff; position:relative; padding:12px;}
.cardImg{width:100%; height:88px; background:#fcf6de; display:flex; align-items:center; justify-content:center;}
.gem{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#eddeff,#4d3159);}
.cardTitle{font-size:13px; font-weight:600; letter-spacing:0.5px; margin-top:10px;}
.cardPrice{font-size:14px; margin-top:4px;}
.badge{position:absolute; top:8px; left:8px; background:#f1e02b; color:#1a1918; font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border-radius:9999px;}
</style>
<div class="promo">FREE SHIPPING ON ORDERS $50+</div>
<div class="nav">
<div class="logo">Kendra Scott</div>
<div class="navlinks"><span>Earrings</span><span>Necklaces</span><span>Color Bar</span><span>Gifts</span></div>
<div class="cart">BAG (1)</div>
</div>
<div class="hero">
<div class="heroImgSide"></div>
<div class="heroText">
<div class="headline">Choose Your<br>Color Bar</div>
<div class="sub">Mix stones, metals, and settings to build jewelry that's entirely yours.</div>
<div class="btn">Shop Color Bar</div>
</div>
</div>
<div class="colorbar">
<span class="colorbarLabel">Color Bar:</span>
<div class="swatch s1"></div><div class="swatch s2"></div><div class="swatch s3"></div><div class="swatch s4"></div><div class="swatch s5"></div>
</div>
<div class="sec">
<div class="secTitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="cardImg"><div class="gem"></div></div><div class="cardTitle">ELISA PENDANT</div><div class="cardPrice">$65</div></div>
<div class="card"><div class="cardImg"><div class="gem" style="background:linear-gradient(135deg,#fce5d4,#e7772f)"></div></div><div class="cardTitle">DIRA HUGGIE</div><div class="cardPrice">$48</div></div>
<div class="card"><div class="cardImg"><div class="gem" style="background:linear-gradient(135deg,#b5e5e1,#437191)"></div></div><div class="cardTitle">DAY LINK BRACELET</div><div class="cardPrice">$78</div></div>
<div class="card"><div class="cardImg"><div class="gem" style="background:linear-gradient(135deg,#f9e7a7,#f1e02b)"></div></div><div class="cardTitle">RAE STUD SET</div><div class="cardPrice">$55</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.25; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #000000; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f5f5f5; color: #000000;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #f5f5f5; color: #000000;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:'SFProDisplay-Bold',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:17px; font-weight:700; letter-spacing:-0.2px; }
.btn-primary { background:#fff; color:#000; border:none; border-radius:9999px; padding:10px 22px; font-size:13px; font-weight:700; }
main { height:calc(640px - 66px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; position:relative; }
.glow { position:absolute; width:420px; height:420px; border-radius:9999px;
background:radial-gradient(circle,rgba(0,255,150,0.16),transparent 70%); top:60px; }
.hmd { width:210px; height:130px; border-radius:36px; position:relative; z-index:2;
background:linear-gradient(160deg,#3a3a3a,#0a0a0a); box-shadow:0 30px 60px rgba(0,0,0,0.6); }
.hmd::before { content:''; position:absolute; left:24px; top:34px; width:70px; height:62px; border-radius:20px;
background:radial-gradient(circle,#00ff88,#003322 75%); }
.hmd::after { content:''; position:absolute; right:24px; top:34px; width:70px; height:62px; border-radius:20px;
background:radial-gradient(circle,#00ff88,#003322 75%); }
h1 { font-size:34px; font-weight:700; letter-spacing:-0.6px; margin:0; z-index:2; }
.sub { font-size:14px; color:#999999; z-index:2; max-width:440px; text-align:center; }
.specs { display:flex; gap:26px; z-index:2; margin-top:6px; }
.spec { text-align:center; }
.spec b { display:block; font-size:18px; font-weight:700; }
.spec span { font-size:11px; color:#666; letter-spacing:0.3px; }
.row { display:flex; gap:12px; z-index:2; margin-top:6px; }
.btn-buy { background:#fff; color:#000; border:none; border-radius:9999px; padding:14px 32px; font-size:14px; font-weight:700; }
.btn-out { background:transparent; color:#fff; border:1px solid #333; border-radius:9999px; padding:14px 26px; font-size:14px; font-weight:600; }
.price { font-size:13px; color:#999; z-index:2; }
</style></head>
<body>
<nav><div class="brand">Bigscreen Beyond</div><button class="btn-primary">Buy Now</button></nav>
<main>
<div class="glow"></div>
<div class="hmd"></div>
<h1>Beyond</h1>
<p class="sub">The world's smallest PC VR headset. Machined aluminum, custom-molded facial interface, per-eye OLED microdisplays.</p>
<div class="specs">
<div class="spec"><b>127g</b><span>WEIGHT</span></div>
<div class="spec"><b>2560×2560</b><span>PER EYE</span></div>
<div class="spec"><b>90 Hz</b><span>REFRESH</span></div>
</div>
<span class="price">From $1,019</span>
<div class="row"><button class="btn-buy">Buy Now</button><button class="btn-out">Get Scanned</button></div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6B5E57; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #D96C3A; color: #FFFFFF;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #D96C3A; border-radius: 12px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B5E57; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #F0A847; color: #1A1A1A;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'Inter','DM Sans',sans-serif; color:#1A1A1A; }
*{box-sizing:border-box;}
.promo{height:30px;background:#F0A847;color:#1A1A1A;font-size:12px;display:flex;align-items:center;justify-content:center;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #EDE8E5;}
.logo{font-size:19px;font-weight:600;}
.navlinks{display:flex;gap:20px;font-size:15px;font-weight:500;}
.filterbar{display:flex;gap:8px;padding:14px 32px;border-bottom:1px solid #EDE8E5;}
.pill{border:1px solid #E0D8D3;border-radius:9999px;font-size:13px;font-weight:600;padding:7px 16px;background:#fff;}
.pill.active{background:#1A1A1A;color:#fff;border-color:#1A1A1A;}
.hero{height:220px;background:#FAF6F1;display:flex;align-items:center;padding:0 32px;}
.heroText{width:48%;}
.heroText h1{font-size:32px;font-weight:500;letter-spacing:-.4px;margin:0 0 10px;line-height:1.2;}
.heroText p{font-size:14px;color:#3D3430;max-width:320px;margin:0 0 14px;}
.btn{display:inline-block;background:#D96C3A;color:#fff;font-size:14px;font-weight:600;padding:14px 26px;border-radius:12px;}
.rugimg{width:52%;height:170px;border-radius:12px;background:repeating-linear-gradient(45deg,#D96C3A,#D96C3A 20px,#F5F0EA 20px,#F5F0EA 40px);}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:206px;border-radius:12px;overflow:hidden;background:#fff;border:1px solid #EDE8E5;}
.thumb{height:120px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#F0A847;color:#1A1A1A;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 9px;border-radius:9999px;}
.info{padding:10px;}
.ptitle{font-size:16px;font-weight:600;margin:0 0 4px;}
.pprice{font-size:15px;font-weight:600;margin:0 0 8px;}
.swatches{display:flex;gap:6px;}
.swatch{width:18px;height:18px;border-radius:9999px;border:1.5px solid #E0D8D3;}
.swatch.active{border:2px solid #1A1A1A;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="promo">New geometric collection — indoor/outdoor rated</div>
<div class="nav">
<div class="logo">Tumble</div>
<div class="navlinks"><span>Rugs</span><span>Runners</span><span>Outdoor</span><span>Sale</span></div>
</div>
<div class="filterbar">
<div class="pill active">All</div><div class="pill">Geometric</div><div class="pill">Solid</div><div class="pill">Stripe</div><div class="pill">Outdoor</div>
</div>
<div class="hero">
<div class="heroText">
<h1>Machine wash. Air dry. Done.</h1>
<p>Rugs designed for the mess of real life — spills, muddy paws, and everything between.</p>
<div class="btn">Shop Now</div>
</div>
<div class="rugimg"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:repeating-linear-gradient(45deg,#D96C3A,#D96C3A 12px,#fff 12px,#fff 24px)"><span class="badge">New</span></div><div class="info"><div class="ptitle">Marmol Diamond</div><div class="pprice">$189</div><div class="swatches"><div class="swatch active" style="background:#D96C3A"></div><div class="swatch" style="background:#1A1A1A"></div><div class="swatch" style="background:#F5F0EA"></div></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#F0A847,#D96C3A)"></div><div class="info"><div class="ptitle">Sunset Stripe</div><div class="pprice">$149</div><div class="swatches"><div class="swatch active" style="background:#F0A847"></div><div class="swatch" style="background:#6B5E57"></div></div></div></div>
<div class="card"><div class="thumb" style="background:repeating-radial-gradient(circle,#3D3430 0 6px,#F5F0EA 6px 14px)"></div><div class="info"><div class="ptitle">Pebble Solid</div><div class="pprice">$99</div><div class="swatches"><div class="swatch active" style="background:#3D3430"></div><div class="swatch" style="background:#9E918C"></div></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(90deg,#D96C3A 25%,#1A1A1A 25% 50%,#D96C3A 50% 75%,#1A1A1A 75%)"></div><div class="info"><div class="ptitle">Coastal Grid</div><div class="pprice">$219</div><div class="swatches"><div class="swatch active" style="background:#D96C3A"></div></div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #191919; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #191919; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #040404; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#EDEDED; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Roboto Mono",Menlo,Consolas,monospace; }
.topbar { height:44px; display:flex; align-items:center; padding:0 24px; gap:10px; border-bottom:0.5px solid #2E2E2E; }
.tri { width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:14px solid #EDEDED; }
.pname { font-size:17px; font-weight:600; }
.avatar { margin-left:auto; width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#7928CA,#0070F3); }
.main { display:flex; height:calc(640px - 44px - 52px); }
.col { flex:1; padding:20px 24px; }
.sectitle { font-size:22px; font-weight:700; margin-bottom:12px; }
.card { background:#0A0A0A; border:1px solid #2E2E2E; border-radius:12px; padding:14px; margin-bottom:10px; }
.row1 { display:flex; align-items:center; gap:8px; }
.dot { width:9px; height:9px; border-radius:50%; box-shadow:0 0 0 3px rgba(12,206,107,0.15); }
.dot.b { background:#F5A623; box-shadow:0 0 0 3px rgba(245,166,35,0.15); }
.dot.r { background:#0CCE6B; }
.dot.e { background:#E5484D; box-shadow:0 0 0 3px rgba(229,72,77,0.15); }
.state { font-size:14px; font-weight:600; }
.state.b { color:#F5A623; }
.state.e { color:#E5484D; }
.envtag { margin-left:auto; background:#1A1A1A; border:1px solid #333333; color:#A1A1A1; font-size:10px; padding:3px 7px; border-radius:5px; }
.url { font-size:13px; margin-top:8px; }
.row3 { display:flex; justify-content:space-between; margin-top:6px; font-size:13px; color:#A1A1A1; }
.analytics { background:#111111; border-radius:12px; padding:16px; }
.bars { display:flex; align-items:flex-end; gap:10px; height:100px; margin-top:12px; }
.bar { flex:1; background:#0070F3; border-radius:3px 3px 0 0; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:52px; background:rgba(0,0,0,0.92); border-top:0.5px solid #2E2E2E; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:10px; color:#707070; }
.tab.on { color:#fff; }
</style></head>
<body>
<div class="topbar"><div class="tri"></div><div class="pname">Vercel (iOS)</div><div class="avatar"></div></div>
<div class="main">
<div class="col">
<div class="sectitle">Deployments</div>
<div class="card"><div class="row1"><span class="dot r"></span><span class="state">Ready</span><span class="envtag">Production</span></div>
<div class="url mono">brand-name-git-main.vercel.app</div>
<div class="row3"><span class="mono">main · 4a91f2c</span><span>2m ago</span></div></div>
<div class="card"><div class="row1"><span class="dot b"></span><span class="state b">Building</span><span class="envtag">Preview</span></div>
<div class="url mono">brand-name-pr-88.vercel.app</div>
<div class="row3"><span class="mono">feat/nav · 9c02aa1</span><span>just now</span></div></div>
<div class="card"><div class="row1"><span class="dot e"></span><span class="state e">Error</span><span class="envtag">Preview</span></div>
<div class="url mono">brand-name-pr-84.vercel.app</div>
<div class="row3"><span class="mono">fix/build · 11dfe30</span><span>1h ago</span></div></div>
</div>
<div class="col">
<div class="sectitle">Analytics</div>
<div class="analytics">
<div class="mono" style="font-size:11px;color:#707070">WEB VITALS · LCP (ms)</div>
<div class="bars">
<div class="bar" style="height:40%"></div><div class="bar" style="height:60%"></div><div class="bar" style="height:35%"></div>
<div class="bar" style="height:80%"></div><div class="bar" style="height:55%"></div><div class="bar" style="height:70%"></div>
<div class="bar" style="height:45%"></div><div class="bar" style="height:65%"></div>
</div>
</div>
</div>
</div>
<div class="tabbar">
<div class="tab on">Overview</div><div class="tab">Deployments</div><div class="tab">Analytics</div><div class="tab">Settings</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 20px; font-weight: 400; line-height: 1.3; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; background: #343333; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; background: transparent; color: #343333;
border: 1px solid #343333; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #1c1c1c;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.15em; background: #343333; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Arial,sans-serif; color:#343333; }
*{box-sizing:border-box;}
.announce{height:36px;background:#121212;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #dedede;}
.logo{font-size:16px;font-weight:500;text-transform:uppercase;letter-spacing:0.15em;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:0.08em;}
.hero{display:flex;min-height:280px;}
.heroimg{width:50%;background:linear-gradient(160deg,#1c1c1c,#343333);}
.herotext{width:50%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;}
.h1{font-size:40px;font-weight:400;line-height:1.1;letter-spacing:-0.3px;margin:0 0 16px;}
.sub{font-size:16px;line-height:1.55;margin:0 0 20px;max-width:340px;color:#343333;}
.btn{display:inline-block;background:#343333;color:#fff;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:0.1em;padding:14px 28px;width:fit-content;}
.mantra{background:#121212;color:#fff;text-align:center;padding:20px 40px;font-family:monospace;font-size:20px;letter-spacing:0;}
.grid{display:flex;gap:2px;padding-top:14px;}
.card{width:33.33%;}
.thumb{aspect-ratio:3/4;height:150px;}
.pname{font-size:14px;margin-top:8px;padding:0 12px;}
.price{font-size:15px;margin-top:2px;padding:0 12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">Free Shipping On Orders Over $75</div>
<div class="nav">
<div class="logo">Spiritual Gangster</div>
<div class="navlinks"><span>New</span><span>Bestsellers</span><span>Collections</span><span>Mantras</span></div>
</div>
<div class="hero">
<div class="heroimg"></div>
<div class="herotext">
<div class="h1">Namaste<br>All Day.</div>
<div class="sub">Spiritual-meets-streetwear — mantras stitched into every layer.</div>
<div class="btn">Shop New Arrivals</div>
</div>
</div>
<div class="mantra">good vibes only.</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1c1c1c,#6b6b6b)"></div><div class="pname">Warrior Crop Hoodie</div><div class="price">$68</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#343333,#dedede)"></div><div class="pname">Om Legging</div><div class="price">$78</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(200deg,#121212,#9c9c9c)"></div><div class="pname">Rise Tank</div><div class="price">$42</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #2b2b2b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #2b2b2b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.35; letter-spacing: -0.2px; margin: 0; color: #2b2b2b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #75767e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0.2px; background: #1990c6; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0.2px; background: #f5f5f5; color: #2b2b2b;
border: 1px solid #1990c6; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2b2b2b;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #75767e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #16c793; color: #2b2b2b;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; font-family:'Bio Sans','Brutal',Arial,sans-serif; color:#4d4e55; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fff;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:19px;font-weight:600;color:#2b2b2b;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;color:#4d4e55;}
.navlinks .active{color:#1990c6;}
.hero{height:220px;display:flex;align-items:center;padding:0 34px;gap:36px;}
.herotext{width:400px;}
.kicker{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#1990c6;margin-bottom:10px;}
h1{font-size:28px;font-weight:500;color:#2b2b2b;margin:0 0 12px;line-height:1.25;letter-spacing:-.3px;}
.sub{font-size:14px;color:#4d4e55;line-height:1.6;margin:0 0 16px;width:360px;}
.cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;background:#1990c6;color:#fff;font-size:14px;font-weight:600;border-radius:8px;}
.hut{width:220px;height:170px;position:relative;}
.rack{position:absolute;width:150px;height:120px;right:20px;top:20px;background:#e0e0e0;border-radius:12px;}
.rackbar{position:absolute;height:4px;background:#2b2b2b;right:36px;width:118px;}
.rackbar.b1{top:44px;}.rackbar.b2{top:76px;}.rackbar.b3{top:108px;}
.eco{position:absolute;left:8px;top:8px;background:#16c793;color:#fff;font-size:10px;font-weight:600;padding:3px 9px;border-radius:9999px;}
.section{padding:0 34px;}
.sectitle{font-size:20px;font-weight:500;color:#2b2b2b;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:12px;padding:12px;position:relative;}
.thumb{height:110px;border-radius:8px;margin-bottom:10px;background:#e0e0e0;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:600;padding:3px 8px;border-radius:9999px;color:#fff;}
.badge.sale{background:#c33b31;}
.badge.eco{background:#16c793;}
.ptitle{font-size:14px;font-weight:500;color:#2b2b2b;line-height:1.3;height:36px;overflow:hidden;}
.pprice{font-size:14px;color:#4d4e55;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Yamazaki Home</div>
<div class="navlinks"><span class="active">Storage</span><span>Kitchen</span><span>Bath</span><span>Living Room</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Quiet Organization</div>
<h1>Order that never raises its voice.</h1>
<div class="sub">Steel-framed storage and home organizers designed with the calm, considered lines of a Japanese studio.</div>
<div class="cta">Shop Storage</div>
</div>
<div class="hut"><div class="rack"></div><div class="rackbar b1"></div><div class="rackbar b2"></div><div class="rackbar b3"></div><div class="eco">Eco</div></div>
</div>
<div class="section">
<div class="sectitle">Featured Organizers</div>
<div class="grid">
<div class="card"><span class="badge eco">Eco</span><div class="thumb" style="background:linear-gradient(145deg,#dedede,#f5f5f5)"></div><div class="ptitle">Tosca Dish Rack</div><div class="pprice">$34.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(145deg,#e0e0e0,#f5f5f5)"></div><div class="ptitle">Plate Standing Shelf</div><div class="pprice">$28.00</div></div>
<div class="card"><span class="badge sale">Sale</span><div class="thumb" style="background:linear-gradient(145deg,#c33b31,#f5f5f5)"></div><div class="ptitle">Tower Bath Caddy</div><div class="pprice">$22.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(145deg,#1990c6,#f5f5f5)"></div><div class="ptitle">Frame Cutting Board Stand</div><div class="pprice">$18.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; letter-spacing: -0.2px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.38; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #DA291C; color: #FFFFFF;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #FFFFFF; color: #313131;
border: 1px solid #DA291C; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #FFFFFF; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #DA291C; color: #FFFFFF;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.promo{height:32px;background:#2D3142;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;}
.nav{height:64px;border-bottom:1px solid #D9D9D9;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#313131;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#313131;}
.navlinks div:first-child{color:#DA291C;border-bottom:2px solid #DA291C;padding-bottom:22px;}
.hero{height:200px;background:#F5F5F5;display:flex;align-items:center;padding:0 32px;}
.herotext h1{font-size:28px;font-weight:700;margin:0 0 8px;line-height:1.2;max-width:400px;}
.herotext p{font-size:16px;color:#4A4A4A;margin:0 0 16px;max-width:360px;}
.cta{display:inline-block;background:#DA291C;color:#fff;font-size:14px;font-weight:600;padding:14px 28px;border-radius:4px;}
.appliance{position:absolute;right:70px;top:150px;width:120px;height:100px;background:linear-gradient(160deg,#c9c9c9,#f0f0f0);border-radius:8px;}
.grid{display:flex;gap:14px;padding:20px 32px 0;}
.card{width:196px;background:#fff;border:1px solid #EBEBEB;border-radius:8px;overflow:hidden;position:relative;}
.thumb{height:100px;background:#F5F5F5;}
.badge{position:absolute;top:8px;left:8px;background:#DA291C;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.pname{font-size:16px;font-weight:600;padding:10px 12px 0;}
.stars{color:#F5A623;font-size:12px;padding:2px 12px 0;}
.pprice{font-size:14px;padding:6px 12px 12px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:48px;background:#2D3142;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;}
.footer span{margin-left:16px;color:#EBEBEB;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="promo">Memorial Day Sale — Up to 30% Off</div>
<div class="nav">
<div class="logo">Oster</div>
<div class="navlinks"><div>Blenders</div><div>Toasters</div><div>Air Fryers</div><div>Parts</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Small Appliances, Built to Last Decades</h1>
<p>Brushed steel and simple controls — nothing to get in your way.</p>
<div class="cta">Shop Blenders</div>
</div>
<div class="appliance"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c9c9c9,#f0f0f0)"></div><div class="badge">Sale</div><div class="pname">Versa Pro Blender</div><div class="stars">★★★★★</div><div class="pprice">$129</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#DA291C,#c9c9c9)"></div><div class="pname">4-Slice Toaster Oven</div><div class="stars">★★★★☆</div><div class="pprice">$89</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2D3142,#c9c9c9)"></div><div class="pname">DiamondForce Air Fryer</div><div class="stars">★★★★★</div><div class="pprice">$99</div></div>
</div>
<div class="footer"><span>© Trusted Since 1924</span><span>Warranty<span> Parts & Manuals<span> Support</span></span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #929292; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #0070f3; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #0070f3;
border: 1px solid #0070f3; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929292; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.33; background: #0070f3; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; border-bottom:1px solid #ebebeb; }
.brand { font-size:19px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:26px; font-size:16px; font-weight:500; }
.navlinks span.active { color:#0070f3; border-bottom:2px solid #0070f3; padding-bottom:4px; }
.search { background:#f7f7f7; border-radius:9999px; padding:10px 20px; font-size:13px; color:#929292; width:160px; }
main { display:flex; height:calc(640px - 72px); }
.gallery { width:40%; background:#f7f7f7; display:flex; align-items:center; justify-content:center; }
.prod { width:180px; height:220px; background:#ffffff; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.08); position:relative; }
.prod::before { content:''; position:absolute; left:50%; top:40px; transform:translateX(-50%); width:90px; height:90px;
border-radius:9999px; background:#dedede; }
.prod::after { content:''; position:absolute; left:20px; bottom:20px; right:20px; height:12px; background:#0070f3; border-radius:6px; opacity:0.15; }
.details { width:60%; padding:28px 36px; }
.badge { display:inline-block; background:#0070f3; color:#fff; font-size:12px; font-weight:600; border-radius:4px; padding:4px 8px; margin-bottom:12px; }
h1 { font-size:26px; font-weight:600; margin:0 0 8px; }
.price { font-size:20px; font-weight:700; color:#0070f3; margin:0 0 16px; }
.desc { font-size:16px; line-height:1.5; color:#6a6a6a; margin:0 0 18px; max-width:420px; }
.chips { display:flex; gap:8px; margin-bottom:20px; }
.chip { background:#f7f7f7; color:#222222; border-radius:9999px; padding:8px 16px; font-size:13px; font-weight:600; }
.chip.active { background:#0070f3; color:#fff; }
.buyrow { display:flex; gap:12px; }
.btn-primary { background:#0070f3; color:#fff; border:none; border-radius:8px; padding:12px 24px; font-size:16px; font-weight:600; height:48px; }
.btn-secondary { background:#fff; color:#0070f3; border:none; border-radius:8px; padding:12px 24px; font-size:16px; font-weight:600; height:48px; }
</style></head>
<body>
<nav>
<p class="brand">Carewell</p>
<div class="navlinks"><span class="active">Incontinence</span><span>Mobility</span><span>Bath Safety</span></div>
<span class="search">Search products…</span>
</nav>
<main>
<div class="gallery"><div class="prod"></div></div>
<div class="details">
<span class="badge">Best Seller</span>
<h1>Adjustable Bath Safety Rail</h1>
<p class="price">$89.99</p>
<p class="desc">A sturdy, tool-free grab bar that installs in minutes — designed for confident, independent bathing.</p>
<div class="chips"><span class="chip active">White</span><span class="chip">Chrome</span><span class="chip">Bronze</span></div>
<div class="buyrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary" style="border:1px solid #0070f3">Learn More</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FDF8F3; color: #1A1208;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FDF8F3; color: #1A1208;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.1px; margin: 0; color: #1A1208; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 0.1px; margin: 0; color: #7A6558; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #F0621E; color: #FFFFFF;
border: none; border-radius: 32px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: transparent; color: #F0621E;
border: 1px solid #F0621E; border-radius: 32px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FDF8F3; color: #1A1208;
border: 1px solid #c4beb8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7A6558; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #2C5F2E; color: #FFFFFF;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Four Sigmatic Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'GT Walsheim','Helvetica Neue',Arial,sans-serif; background:#FDF8F3; color:#1A1208; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
.nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; background:#FDF8F3; }
.logo { font-weight:700; font-size:19px; color:#F0621E; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:600; color:#3D2B1F; }
.navcta { background:#2C5F2E; color:#fff; font-weight:700; font-size:12.5px; padding:10px 20px; border-radius:999px; }
.hero { display:flex; padding:32px 40px; gap:36px; align-items:center; }
.hero-copy { flex:1; }
.hero h1 { font-size:36px; font-weight:700; letter-spacing:-.3px; line-height:1.2; margin:0 0 12px; color:#1A1208; }
.hero p { font-size:14.5px; color:#3D2B1F; line-height:1.6; max-width:400px; margin:0 0 18px; }
.btn-primary { background:#F0621E; color:#fff; font-weight:700; font-size:13.5px; padding:12px 22px; border-radius:999px; display:inline-block; }
.hero-visual { flex:1; height:210px; display:flex; align-items:center; justify-content:center; background:#F5EDE4; border-radius:16px; }
.pouch { width:110px; height:150px; background:linear-gradient(160deg,#F0621E,#C9952B); border-radius:12px; position:relative; }
.pouch::before { content:''; position:absolute; top:14px; left:14px; right:14px; height:44px; border-radius:8px; background:rgba(255,255,255,.35); }
.pouch::after { content:''; position:absolute; bottom:20px; left:20px; right:20px; height:6px; background:#2C5F2E; border-radius:4px; }
.strip { display:flex; gap:14px; padding:12px 40px; background:#F5EDE4; }
.chip { background:#fff; border:1px solid #DDD4CC; border-radius:999px; padding:6px 14px; font-size:11px; font-weight:600; color:#3D2B1F; }
.section { padding:22px 40px; flex:1; }
.section h2 { font-size:20px; font-weight:700; margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#fff; border-radius:14px; padding:14px; border:1px solid #EDE6DF; }
.card .ph { height:74px; border-radius:10px; margin-bottom:10px; }
.ingchip { display:inline-block; background:#F5EDE4; border-radius:999px; font-size:9.5px; font-weight:600; color:#2C5F2E; padding:2px 8px; margin-right:4px; margin-bottom:6px; }
.card .name { font-weight:700; font-size:13.5px; margin-bottom:6px; }
.card .pricerow { display:flex; justify-content:space-between; align-items:center; }
.card .price { font-weight:700; font-size:14px; color:#1A1208; }
.toggle { font-size:9.5px; font-weight:700; color:#2C5F2E; border:1px solid #2C5F2E; border-radius:999px; padding:3px 8px; }
</style>
<div class="page">
<div class="nav">
<div class="logo">Four Sigmatic</div>
<div class="navlinks"><span>Coffee</span><span>Elixirs</span><span>Bundles</span><span>Learn</span></div>
<div class="navcta">Subscribe & Save</div>
</div>
<div class="hero">
<div class="hero-copy">
<h1>Lion's Mane & Chaga,<br>250 mg each.</h1>
<p>Adaptogen mushrooms in a field guide, not a pharmacy shelf — every product names its fungi twice, on the label and in your ritual.</p>
<div class="btn-primary">Shop Mushroom Coffee</div>
</div>
<div class="hero-visual"><div class="pouch"></div></div>
</div>
<div class="strip"><span class="chip">USDA Organic</span><span class="chip">Non-GMO Verified</span><span class="chip">Informed Sport</span></div>
<div class="section">
<h2>Bestsellers</h2>
<div class="grid">
<div class="card"><div class="ph" style="background:linear-gradient(160deg,#F0621E,#C9952B);"></div><div><span class="ingchip">Lion's Mane</span><span class="ingchip">Chaga</span></div><div class="name">Think Mushroom Coffee</div><div class="pricerow"><span class="price">$24.99</span><span class="toggle">Subscribe</span></div></div>
<div class="card"><div class="ph" style="background:linear-gradient(160deg,#2C5F2E,#1E4820);"></div><div><span class="ingchip">Reishi</span></div><div class="name">Calm Elixir</div><div class="pricerow"><span class="price">$19.99</span><span class="toggle">Subscribe</span></div></div>
<div class="card"><div class="ph" style="background:linear-gradient(160deg,#C9952B,#7A6558);"></div><div><span class="ingchip">Cordyceps</span></div><div class="name">Focus Blend</div><div class="pricerow"><span class="price">$27.99</span><span class="toggle">Subscribe</span></div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f3f3; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f3f3; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #696969; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #e01e2a; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #121212;
border: 1px solid #e01e2a; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #bbbbbb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #696969; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e01e2a; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f3f3f3; color:#231f20; box-sizing:border-box;
font-family:'Nunito Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
.util-bar { height:28px; background:#121212; color:#fff; font-size:11px; font-weight:600; display:flex; align-items:center;
justify-content:center; letter-spacing:0.3px; }
nav { height:60px; background:#ffffff; border-bottom:1px solid #dedede; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.brand { font-size:22px; font-weight:800; color:#e01e2a; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; }
.navlinks span.active { color:#e01e2a; border-bottom:2px solid #e01e2a; padding-bottom:16px; }
.navlinks span:not(.active) { color:#231f20; }
.cart-icn { width:26px; height:22px; border:2px solid #121212; border-radius:3px; position:relative; }
.cat-tabs { height:38px; background:#ffffff; display:flex; gap:24px; align-items:center; padding:0 32px;
border-bottom:1px solid #d9d9d9; font-size:12px; font-weight:700; text-transform:uppercase; }
.cat-tabs span { color:#696969; padding-bottom:10px; }
.cat-tabs span.active { color:#e01e2a; border-bottom:2px solid #e01e2a; }
.hero { height:190px; background:#121212; display:flex; align-items:center; justify-content:space-between; padding:0 48px; }
.hero h1 { color:#fff; font-size:38px; font-weight:800; line-height:1.05; margin:0 0 10px; letter-spacing:-0.5px; max-width:420px; }
.hero p { color:#d9d9d9; font-size:14px; margin:0 0 16px; }
.btn-red { display:inline-block; background:#e01e2a; color:#fff; font-size:14px; font-weight:700; text-transform:uppercase;
padding:13px 26px; border-radius:8px; letter-spacing:0.3px; }
.device { width:120px; height:150px; position:relative; }
.device .body { position:absolute; bottom:0; left:30px; width:60px; height:110px; background:linear-gradient(180deg,#e01e2a,#a8151e); border-radius:10px 10px 4px 4px; }
.device .head { position:absolute; bottom:0; left:10px; width:100px; height:22px; background:#242833; border-radius:6px; }
.device .handle { position:absolute; top:0; left:52px; width:16px; height:60px; background:#242833; border-radius:6px; }
.strip { background:#fceaed; padding:12px 32px; font-size:12px; color:#e01e2a; font-weight:700; text-align:center; }
.grid { display:flex; gap:16px; padding:16px 32px 0; }
.card { flex:1; background:#ffffff; border:1px solid #dedede; border-radius:8px; padding:14px; position:relative; }
.card .imgbox { height:88px; background:#f3f3f3; border-radius:6px; margin-bottom:10px; display:flex; align-items:center; justify-content:center; }
.card .imgbox .mini { width:26px; height:52px; background:linear-gradient(180deg,#e01e2a,#a8151e); border-radius:6px 6px 2px 2px; }
.badge { position:absolute; top:10px; left:10px; background:#e01e2a; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase;
padding:3px 7px; border-radius:4px; letter-spacing:0.5px; }
.card .title { font-size:13px; font-weight:700; color:#121212; margin-bottom:4px; }
.card .price { font-size:19px; font-weight:800; color:#e01e2a; }
footer { position:absolute; bottom:0; left:0; right:0; height:78px; background:#242833; color:#fff; display:flex;
align-items:center; justify-content:space-between; padding:0 32px; }
footer .col { font-size:11px; color:#d9d9d9; line-height:1.8; }
footer .col b { display:block; color:#fff; font-size:12px; margin-bottom:3px; }
.wrap { position:relative; height:640px; }
</style>
</head>
<body>
<div class="wrap">
<div class="util-bar">FREE SHIPPING ON ORDERS OVER $49 • 90-DAY RETURNS</div>
<nav>
<div class="brand">Dirt Devil</div>
<div class="navlinks"><span class="active">Upright</span><span>Stick</span><span>Hand</span><span>Canister</span><span>Wet/Dry</span></div>
<div class="cart-icn"></div>
</nav>
<div class="cat-tabs"><span class="active">Best Sellers</span><span>New Arrivals</span><span>Parts & Filters</span><span>Deals</span></div>
<div class="hero">
<div>
<h1>Suction that means business.</h1>
<p>Chrome-red housings, cyclonic power, and filters built to outlast the carpet.</p>
<a class="btn-red">Shop Now</a>
</div>
<div class="device"><div class="handle"></div><div class="body"></div><div class="head"></div></div>
</div>
<div class="strip">SALE — UP TO 30% OFF UPRIGHT VACUUMS THIS WEEK</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="imgbox"><div class="mini"></div></div><div class="title">Endura Reach Upright</div><div class="price">$129.99</div></div>
<div class="card"><span class="badge">New</span><div class="imgbox"><div class="mini"></div></div><div class="title">Power Swerve Pet</div><div class="price">$149.99</div></div>
<div class="card"><div class="imgbox"><div class="mini"></div></div><div class="title">Simpli-Stik Lightweight</div><div class="price">$59.99</div></div>
<div class="card"><span class="badge">Best Seller</span><div class="imgbox"><div class="mini"></div></div><div class="title">Gator Handheld Corded</div><div class="price">$39.99</div></div>
</div>
<footer>
<div class="col"><b>Products</b>Uprights<br>Handhelds</div>
<div class="col"><b>Support</b>Find a Retailer<br>Filter Finder</div>
<div class="col"><b>About</b>Our Heritage<br>Warranty</div>
<div class="col"><b>Dirt Devil</b>© Since 1905</div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.18; letter-spacing: -0.4px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.71; margin: 0; color: #b2b6bd; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #ffffff; color: #000000;
border: none; border-radius: 8px; padding: 10px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #1f232b; color: #ffffff;
border: 1px solid #000000; border-radius: 8px;
padding: 10px 18px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.5; background: #15181e; color: #ffffff;
border: 1px solid #404040; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b2b6bd; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #000000; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #252830; }
.brand { font-size:16px; font-weight:700; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#b2b6bd; }
.btn-w { background:#fff; color:#000; border:none; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:600; }
.hero { text-align:center; padding:20px 36px 8px; }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:0.6px; text-transform:uppercase; color:#b2b6bd; }
.hero h1 { font-size:38px; font-weight:700; letter-spacing:-1px; line-height:1.15; margin:8px 0 6px; }
.hero p { font-size:13px; color:#b2b6bd; margin:0; }
.products { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px 36px; }
.pcard { border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:6px; min-height:110px; }
.pcard .name { font-size:14px; font-weight:600; }
.pcard .desc { font-size:10.5px; line-height:1.4; opacity:0.9; }
.terraform { background:#7b42bc; }
.vault { background:#ffcf25; color:#000; }
.vault .desc { color:#000; opacity:0.75; }
.waypoint { background:#14c6cb; color:#000; }
.waypoint .desc { color:#000; opacity:0.75; }
.neutral { background:#15181e; border:1px solid #3b3d45; }
.featurerow { display:flex; gap:12px; padding:0 36px 16px; }
.fcard { flex:1; background:#15181e; border:1px solid #3b3d45; border-radius:12px; padding:16px; }
.fcard h4 { font-size:14px; font-weight:600; margin:0 0 6px; }
.fcard p { font-size:11px; color:#b2b6bd; margin:0; line-height:1.5; }
.pill { display:inline-block; background:#1f232b; color:#b2b6bd; font-size:10px; border-radius:9999px;
padding:3px 8px; margin-bottom:8px; }
footer { margin-top:auto; padding:12px 36px; border-top:1px solid #252830; display:flex; justify-content:space-between;
font-size:11px; color:#656a76; }
</style></head>
<body>
<nav>
<span class="brand">HashiCorp</span>
<div class="navlinks"><span>Products</span><span>Solutions</span><span>Enterprise</span><span>Docs</span></div>
<button class="btn-w">Sign up</button>
</nav>
<section class="hero">
<div class="eyebrow">Infrastructure Cloud</div>
<h1>A unified cloud platform, one workflow</h1>
<p>Provision, secure, connect, and run any infrastructure for any application.</p>
</section>
<div class="products">
<div class="pcard terraform"><span class="name">Terraform</span><span class="desc">Provision infrastructure as code across any cloud.</span></div>
<div class="pcard vault"><span class="name">Vault</span><span class="desc">Secure, store, and tightly control secrets access.</span></div>
<div class="pcard waypoint"><span class="name">Waypoint</span><span class="desc">Ship applications with a consistent workflow.</span></div>
<div class="pcard neutral"><span class="name">Nomad</span><span class="desc">Deploy and manage applications at any scale.</span></div>
</div>
<div class="featurerow">
<div class="fcard"><span class="pill">Terraform</span><h4>Consistent workflow</h4><p>Provision every layer of the stack with a single, declarative language.</p></div>
<div class="fcard"><span class="pill">Vault</span><h4>Secrets, unified</h4><p>Broker and enforce access to secrets and systems with dynamic policy.</p></div>
<div class="fcard"><span class="pill">Waypoint</span><h4>Ship with confidence</h4><p>Build, deploy, and release applications across any platform.</p></div>
</div>
<footer>
<span>© HashiCorp</span>
<span>HashiCorp · Terraform · Vault · Waypoint · Nomad</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f1f1f2; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f1f1f2; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #808085; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #027aef; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #027aef;
border: 1px solid #027aef; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #0a0a0a;
border: 1px solid #cacaca; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808085; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #027aef; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Fractal Design Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Centra No2',Avenir,'Helvetica Neue',Arial,sans-serif; background:#f1f1f2; color:#0a0a0a; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
.nav { background:#0a0a0a; height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.logo { color:#fff; font-weight:700; font-size:19px; }
.navlinks { display:flex; gap:24px; color:#cfd6d6; font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.navcta { background:#027aef; color:#fff; font-weight:700; font-size:12px; padding:9px 18px; border-radius:8px; text-transform:uppercase; letter-spacing:.5px; }
.hero { display:flex; padding:34px 40px; gap:36px; align-items:center; background:#0a0a0a; }
.hero-copy { flex:1; }
.hero h1 { font-size:34px; font-weight:700; letter-spacing:-.4px; line-height:1.18; margin:0 0 12px; color:#fff; }
.hero p { font-size:14px; color:#b7c5cd; line-height:1.6; max-width:400px; margin:0 0 18px; }
.btn-primary { background:#027aef; color:#fff; font-weight:700; font-size:13px; padding:11px 22px; border-radius:8px; text-transform:uppercase; letter-spacing:.5px; display:inline-block; }
.hero-visual { flex:1; height:200px; background:#232323; border-radius:8px; display:flex; align-items:center; justify-content:center; border:1px solid #282828; }
.pccase { width:110px; height:170px; background:linear-gradient(160deg,#282828,#0a0a0a); border-radius:6px; border:1px solid #4f5b5f; position:relative; }
.pccase .fan { position:absolute; top:20px; left:50%; transform:translateX(-50%); width:60px; height:60px; border-radius:50%; border:4px solid #027aef; background:#0a0a0a; }
.pccase .fan::after { content:''; position:absolute; top:22px; left:22px; width:12px; height:12px; border-radius:50%; background:#1aafff; }
.strip { display:flex; padding:10px 40px; gap:16px; background:#282828; }
.well { padding:4px 12px; border-radius:2px; font-size:10.5px; font-weight:700; }
.well.err { background:#f2dede; color:#a94442; }
.well.ok { background:#dff0d8; color:#3c763d; }
.well.warn { background:#fcf8e3; color:#8a6d3b; }
.section { padding:20px 40px; flex:1; background:#f1f1f2; }
.section h2 { font-size:19px; font-weight:700; margin:0 0 16px; text-transform:uppercase; letter-spacing:.3px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#fff; border-radius:8px; padding:14px; }
.card .ph { height:78px; border-radius:8px; margin-bottom:10px; background:linear-gradient(160deg,#282828,#4f5b5f); position:relative; }
.card .ph .fanmini { position:absolute; top:14px; left:14px; width:36px; height:36px; border-radius:50%; border:3px solid #1aafff; }
.card .name { font-weight:700; font-size:13.5px; margin-bottom:2px; text-transform:uppercase; letter-spacing:.3px; }
.card .desc { font-size:11px; color:#4f5b5f; margin-bottom:8px; }
.card .pricerow { display:flex; justify-content:space-between; align-items:center; }
.card .price { font-weight:700; font-size:14px; }
.badge-sale { background:#ff5268; color:#fff; font-size:9px; font-weight:700; padding:3px 8px; border-radius:4px; }
</style>
<div class="page">
<div class="nav">
<div class="logo">Fractal Design</div>
<div class="navlinks"><span>Cases</span><span>Cooling</span><span>Power</span><span>Accessories</span></div>
<div class="navcta">Configure Build</div>
</div>
<div class="hero">
<div class="hero-copy">
<h1>Engineering confidence,<br>machined precision.</h1>
<p>Dark panels around cases and cooling components photograph as intentional context — a grid built for hardware, not marketing gloss.</p>
<div class="btn-primary">Shop Cases</div>
</div>
<div class="hero-visual"><div class="pccase"><div class="fan"></div></div></div>
</div>
<div class="strip"><span class="well err">ALERT: THERMAL</span><span class="well ok">STATUS: NOMINAL</span><span class="well warn">WARNING: FAN RPM</span></div>
<div class="section">
<h2>Cases & Cooling</h2>
<div class="grid">
<div class="card"><div class="ph"><div class="fanmini"></div></div><div class="name">North XL</div><div class="desc">Mid-tower · Mesh front</div><div class="pricerow"><span class="price">$189.99</span><span class="badge-sale">Sale</span></div></div>
<div class="card"><div class="ph"><div class="fanmini"></div></div><div class="name">Torrent Compact</div><div class="desc">High-airflow ATX</div><div class="pricerow"><span class="price">$139.99</span></div></div>
<div class="card"><div class="ph"><div class="fanmini"></div></div><div class="name">Celsius+ S28</div><div class="desc">AIO Liquid Cooler</div><div class="pricerow"><span class="price">$169.99</span></div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0.4px; background: #006fcf; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0.4px; background: transparent; color: #000000;
border: 1px solid #006fcf; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #006fcf; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:Arial, 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
.promo { height:26px; background:#006fcf; color:#fff; display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
nav { height:56px; display:flex; align-items:center; gap:22px; padding:0 24px; border-bottom:2px solid #006fcf; }
.logo { font-size:19px; font-weight:900; font-family:'Arial Black',Arial,sans-serif; letter-spacing:-.3px; }
.navlink { font-size:13px; font-weight:600; color:#e0e0e0; text-transform:uppercase; }
.navlink.active { color:#006fcf; }
.searchw { margin-left:auto; width:200px; height:34px; background:#1a1a1a; border:1px solid #2e2e2e; border-radius:4px;
display:flex; align-items:center; padding:0 12px; font-size:12px; color:#9e9e9e; }
.stage { display:flex; gap:24px; padding:20px 24px 0; }
.rack { width:250px; height:230px; border-radius:4px; flex:0 0 auto; position:relative; overflow:hidden;
background:linear-gradient(160deg,#1a1a1a 0%,#222 55%,#006fcf 160%); border:1px solid #2e2e2e; }
.rack::before { content:''; position:absolute; left:0; right:0; top:70px; height:4px; background:#000; opacity:.5; }
.rack::after { content:''; position:absolute; left:0; right:0; top:140px; height:4px; background:#000; opacity:.5; }
.promobadge { position:absolute; top:10px; left:10px; background:#006fcf; color:#fff; font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:.5px; padding:4px 8px; }
.info { flex:1; }
h1 { font-family:'Arial Black',Arial,sans-serif; font-size:24px; font-weight:900; margin:4px 0 6px; letter-spacing:-.3px; }
.desc { font-size:14px; color:#e0e0e0; line-height:1.55; max-width:520px; margin-bottom:14px; }
.stars { color:#f4a81d; font-size:13px; margin-bottom:10px; }
.stars span { color:#9e9e9e; font-size:11px; margin-left:6px; }
.pricerow { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.price { font-family:'Arial Black',Arial,sans-serif; font-size:28px; font-weight:900; }
.btnrow { display:flex; gap:10px; }
.btn-p { background:#006fcf; color:#fff; border:none; border-radius:4px; height:48px; padding:0 28px;
font-size:15px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
.btn-s { background:transparent; color:#fff; border:2px solid #dedede; border-radius:4px; height:48px; padding:0 22px;
font-size:15px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
.specwrap { padding:16px 24px 0; border-top:1px solid #2e2e2e; margin-top:16px; }
.spechdr { font-size:11px; text-transform:uppercase; color:#9e9e9e; letter-spacing:.5px; margin-bottom:10px; font-weight:700; }
.specgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#2e2e2e; border:1px solid #2e2e2e; }
.sc { background:#1a1a1a; padding:12px 14px; }
.sc .l { font-size:11px; text-transform:uppercase; color:#9e9e9e; letter-spacing:.5px; }
.sc .v { font-family:'Arial Black',Arial,sans-serif; font-size:20px; font-weight:900; margin-top:4px; }
</style></head>
<body>
<div class="promo">Free Freight on Orders Over $999 · Financing Available</div>
<nav>
<span class="logo">Champion Tool Storage</span>
<span class="navlink active">Tool Chests</span>
<span class="navlink">Workbenches</span>
<span class="navlink">Accessories</span>
<div class="searchw">Search cabinets, drawers…</div>
</nav>
<div class="stage">
<div class="rack"><span class="promobadge">Bestseller</span></div>
<div class="info">
<h1>52" 11-Drawer Steel Roller Cabinet</h1>
<div class="stars">★★★★★ <span>4.8 (612 reviews)</span></div>
<div class="desc">Powder-coated 18-gauge steel construction with ball-bearing drawer slides rated for 100 lb per drawer. Built for the shop floor, not the showroom.</div>
<div class="pricerow"><span class="price">$1,899.00</span></div>
<div class="btnrow">
<button class="btn-p">Add to Cart</button>
<button class="btn-s">Compare</button>
</div>
</div>
</div>
<div class="specwrap">
<div class="spechdr">Cabinet Specifications</div>
<div class="specgrid">
<div class="sc"><div class="l">Load Capacity</div><div class="v">100 lb/drawer</div></div>
<div class="sc"><div class="l">Drawers</div><div class="v">11</div></div>
<div class="sc"><div class="l">Dimensions</div><div class="v">52 x 24 x 43 in</div></div>
<div class="sc"><div class="l">Finish</div><div class="v">Gloss Black</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #222428; color: #ffffff;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #222428; color: #ffffff;
border: 1px solid #121212; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ee9441; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121212; color:#ffffff; font-family:'Instrument Sans',-apple-system,system-ui,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:18px;font-weight:700;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;}
.navlinks .active{color:#c8ff00;}
.navlinks .off{color:#9f9f9f;}
.hero{height:210px;display:flex;align-items:center;padding:0 32px;}
.herotext{width:460px;}
.herotext h1{font-family:'Playfair Display',Georgia,serif;font-size:36px;font-weight:700;margin:0 0 12px;}
.herotext p{font-size:14px;color:#9f9f9f;margin:0 0 16px;}
.cta{display:inline-block;background:#c8ff00;color:#121212;font-size:15px;font-weight:600;padding:13px 28px;border-radius:8px;}
.grid{display:flex;gap:14px;padding:16px 32px;}
.card{width:200px;background:#222428;border-radius:12px;padding:14px;}
.thumb{width:100%;aspect-ratio:16/9;background:#2a2d33;border-radius:8px;margin-bottom:10px;}
.ptitle{font-size:14px;font-weight:500;}
.pprice{font-size:20px;font-weight:700;margin-top:4px;}
.badge{display:inline-block;background:#ee9441;color:#121212;font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:2px 8px;border-radius:4px;margin-top:8px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#121212;color:#9f9f9f;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;border-top:1px solid #222428;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Pixio</div>
<div class="navlinks"><div class="active">Monitors</div><div class="off">Portable</div><div class="off">Accessories</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>See every frame that matters.</h1>
<p>Gaming monitors engineered for the split second between win and loss.</p>
<div class="cta">Shop Now</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#108474,#222428)"></div><div class="ptitle">Pixio PX279 Prime S 280Hz</div><div class="pprice">$449</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c8ff00,#222428)"></div><div class="ptitle">Pixio PXC277 Curved OLED</div><div class="pprice">$599</div><div class="badge">Sale</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff4200,#222428)"></div><div class="ptitle">Pixio PX248 Wave 165Hz</div><div class="pprice">$249</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#222428,#108474)"></div><div class="ptitle">Foldable Stand Mount</div><div class="pprice">$89</div></div>
</div>
<div class="footer"><span>© Pixio · Built for Competitive Play</span><span>Specs · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ef3f24; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ef3f24; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d63b22; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ef3f24; color: #000000;
border: 1px solid #d63b22; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ef3f24; color: #f5f5f5;
border: 1px solid #f05c45; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #eb3e24; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family: "Meiryo", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Arial, sans-serif; }
* { box-sizing:border-box; }
.header { width:960px; height:56px; background:#ef3f24; display:flex; align-items:center;
justify-content:space-between; padding:0 20px; }
.brand { color:#ffffff; font-size:18px; font-weight:700; }
.app-name { color:#ffffff; font-size:14px; font-weight:400; opacity:0.9; margin-left:14px; border-left:1px solid rgba(255,255,255,0.4); padding-left:14px; }
.header-left { display:flex; align-items:center; }
.save-btn { background:#ffffff; color:#ef3f24; font-size:13px; font-weight:700; border-radius:4px;
padding:8px 18px; }
.body { width:960px; height:584px; display:flex; }
.sidebar { width:196px; height:584px; background:#ffffff; border-right:1px solid #dddddd; padding:16px 12px; }
.sidebar-label { font-size:12px; font-weight:700; color:#999999; letter-spacing:0.02em; margin:4px 8px 8px; }
.app-tile { display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:6px; margin-bottom:4px; }
.app-tile.active { background:#fff0ee; }
.tile-icon { width:26px; height:26px; border-radius:6px; flex-shrink:0; }
.tile-icon.red { background:#ef3f24; } .tile-icon.green { background:#3fa862; }
.tile-icon.blue { background:#00afec; } .tile-icon.teal { background:#00afaa; }
.tile-icon.yellow { background:#ffba00; }
.tile-name { font-size:13px; font-weight:400; color:#333333; }
.app-tile.active .tile-name { font-weight:700; color:#ef3f24; }
.canvas { flex:1; height:584px; background:#fafafa; padding:22px 24px; overflow:hidden; }
.canvas-title { font-size:20px; font-weight:700; color:#333333; margin-bottom:4px; }
.canvas-sub { font-size:13px; font-weight:400; color:#666666; margin-bottom:18px; }
.form-card { background:#ffffff; border:1px solid #dddddd; border-radius:6px; padding:20px;
box-shadow:0 1px 3px rgba(0,0,0,0.08); }
.field-group { margin-bottom:16px; }
.field-label { font-size:13px; font-weight:700; color:#333333; margin-bottom:6px; }
.field-input { background:#ffffff; border:1px solid #dddddd; border-radius:4px; height:36px;
display:flex; align-items:center; padding:0 10px; font-size:14px; color:#333333; }
.field-input.focused { border:1px solid #00afec; box-shadow:0 0 0 2px rgba(0,175,236,0.15); }
.field-input.value { color:#333333; }
.field-input.placeholder { color:#999999; }
.two-col { display:flex; gap:14px; }
.two-col .field-group { flex:1; }
.add-field { border:1px dashed #bbbbbb; border-radius:4px; height:38px; display:flex; align-items:center;
justify-content:center; color:#999999; font-size:13px; font-weight:700; margin-top:6px; }
.side-panel { width:220px; height:584px; background:#ffffff; border-left:1px solid #dddddd; padding:18px 16px; }
.side-title { font-size:14px; font-weight:700; color:#333333; margin-bottom:14px; }
.prop-row { margin-bottom:14px; }
.prop-label { font-size:12px; font-weight:700; color:#666666; margin-bottom:6px; }
.prop-value { background:#ffffff; border:1px solid #dddddd; border-radius:4px; height:32px;
display:flex; align-items:center; padding:0 10px; font-size:13px; color:#333333; }
.chip-row { display:flex; gap:6px; }
.chip { padding:2px 10px; border-radius:12px; font-size:12px; font-weight:700; }
.chip.success { background:#e7f5ed; color:#3fa862; }
.chip.info { background:#e6f7fd; color:#00afec; }
.chip.neutral { background:#f5f5f5; color:#555555; border:1px solid #dddddd; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.toggle { width:36px; height:20px; border-radius:9999px; background:#3fa862; position:relative; }
.toggle::after { content:""; position:absolute; right:2px; top:2px; width:16px; height:16px; border-radius:50%;
background:#ffffff; }
</style></head>
<body>
<div class="header">
<div class="header-left">
<div class="brand">kintone</div>
<div class="app-name">Sales Pipeline App</div>
</div>
<div class="save-btn">Save</div>
</div>
<div class="body">
<div class="sidebar">
<div class="sidebar-label">MY APPS</div>
<div class="app-tile active"><div class="tile-icon red"></div><div class="tile-name">Sales Pipeline</div></div>
<div class="app-tile"><div class="tile-icon green"></div><div class="tile-name">Expense Reports</div></div>
<div class="app-tile"><div class="tile-icon blue"></div><div class="tile-name">Customer List</div></div>
<div class="app-tile"><div class="tile-icon teal"></div><div class="tile-name">Facility Booking</div></div>
<div class="app-tile"><div class="tile-icon yellow"></div><div class="tile-name">Onboarding Tasks</div></div>
</div>
<div class="canvas">
<div class="canvas-title">Record Editor — New Deal</div>
<div class="canvas-sub">Drag fields from the left to build this app. Everyone can create.</div>
<div class="form-card">
<div class="two-col">
<div class="field-group">
<div class="field-label">Client Name</div>
<div class="field-input value">Riverstone Traders</div>
</div>
<div class="field-group">
<div class="field-label">Deal Owner</div>
<div class="field-input focused">Jamie Wells</div>
</div>
</div>
<div class="field-group">
<div class="field-label">Deal Stage</div>
<div class="field-input placeholder">Select a stage…</div>
</div>
<div class="two-col">
<div class="field-group">
<div class="field-label">Expected Amount</div>
<div class="field-input value">¥1,240,000</div>
</div>
<div class="field-group">
<div class="field-label">Close Date</div>
<div class="field-input value">2026 / 10 / 02</div>
</div>
</div>
<div class="add-field">+ Add Field</div>
</div>
</div>
<div class="side-panel">
<div class="side-title">Field Settings</div>
<div class="prop-row">
<div class="prop-label">Field Type</div>
<div class="prop-value">Drop-down</div>
</div>
<div class="prop-row">
<div class="prop-label">Required</div>
<div class="prop-value">Yes</div>
</div>
<div class="prop-row">
<div class="prop-label">Status</div>
<div class="chip-row">
<div class="chip success">Active</div>
<div class="chip info">Shared</div>
</div>
</div>
<div class="toggle-row">
<div class="prop-label" style="margin-bottom:0;">Show in list view</div>
<div class="toggle"></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #094e7f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #094e7f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #094e7f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #828282; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #3f3ec6; color: #ffffff;
border: none; border-radius: 12px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #3f3ec6;
border: 1px solid #3f3ec6; border-radius: 12px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #4e4534;
border: 1px solid #c2d3df; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #828282; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #db0090; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#4e4534; }
*{box-sizing:border-box;}
.topbar{height:36px;background:#094e7f;display:flex;align-items:center;padding:0 30px;gap:20px;font-size:12px;color:#cacddb;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #e0dafe;}
.logo{font-size:22px;font-weight:700;color:#094e7f;letter-spacing:-0.5px;}
.navlinks{display:flex;gap:26px;font-size:15px;font-weight:500;color:#094e7f;}
.navlinks .active{color:#3f3ec6;border-bottom:2px solid #3f3ec6;padding-bottom:20px;}
.btn-primary{background:#3f3ec6;color:#fff;font-size:14px;font-weight:600;padding:10px 20px;border-radius:12px;}
.hero{height:150px;background:#094e7f;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.herotext h1{font-size:26px;font-weight:700;color:#fff;margin:0 0 6px;}
.herotext p{font-size:14px;color:#cacddb;margin:0;max-width:440px;}
.specrow{display:flex;gap:1px;background:#cacddb;margin:0 30px;transform:translateY(-1px);}
.speccell{flex:1;background:#f7f7f7;padding:10px;text-align:center;}
.speclabel{font-size:10px;font-weight:700;text-transform:uppercase;color:#828282;letter-spacing:0.3px;}
.specvalue{font-size:15px;color:#094e7f;font-weight:600;margin-top:2px;}
.section{padding:20px 30px 0;}
.sectitle{font-size:14px;font-weight:600;color:#094e7f;margin-bottom:12px;text-transform:uppercase;letter-spacing:0.3px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#fff;border:1px solid #e0dafe;border-radius:8px;padding:12px;position:relative;box-shadow:0 1px 3px rgba(9,78,127,0.06);}
.thumb{height:80px;border-radius:8px;margin-bottom:8px;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;text-transform:uppercase;color:#fff;padding:2px 8px;border-radius:4px;letter-spacing:0.3px;}
.ptitle{font-size:13px;font-weight:600;color:#094e7f;}
.pspec{font-size:11px;color:#828282;margin-top:2px;}
.pprice{font-size:13px;font-weight:700;color:#3f3ec6;margin-top:6px;}
</style>
<div class="topbar">Enterprise NAS & Storage Solutions</div>
<div class="nav">
<div class="logo">Qnap</div>
<div class="navlinks"><div class="active">Products</div><div>Software</div><div>Solutions</div><div>Support</div></div>
<div class="btn-primary">Find a Reseller</div>
</div>
<div class="hero">
<div class="herotext"><h1>Storage That Scales With You</h1><p>Enterprise-grade NAS and expansion units built for data seriousness, not sold on looks.</p></div>
</div>
<div class="specrow">
<div class="speccell"><div class="speclabel">Bays</div><div class="specvalue">4 / 8 / 12</div></div>
<div class="speccell"><div class="speclabel">Max Capacity</div><div class="specvalue">240 TB</div></div>
<div class="speccell"><div class="speclabel">RAM</div><div class="specvalue">Up to 64GB</div></div>
<div class="speccell"><div class="speclabel">Warranty</div><div class="specvalue">5 Years</div></div>
</div>
<div class="section">
<div class="sectitle">Featured Systems</div>
<div class="grid">
<div class="card"><div class="badge" style="background:#db0090;">New</div><div class="thumb" style="background:linear-gradient(135deg,#3f3ec6,#094e7f);"></div><div class="ptitle">TS-464 4-Bay NAS</div><div class="pspec">2.5GbE · ARM Quad-Core</div><div class="pprice">$549.00</div></div>
<div class="card"><div class="badge" style="background:#ff0022;">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#1891e4,#094e7f);"></div><div class="ptitle">TS-873A 8-Bay NAS</div><div class="pspec">AMD Ryzen · 10GbE</div><div class="pprice">$999.00</div></div>
<div class="card"><div class="badge" style="background:#1891e4;">Featured</div><div class="thumb" style="background:linear-gradient(135deg,#67447e,#094e7f);"></div><div class="ptitle">TVS-h1288X Rackmount</div><div class="pspec">Xeon · ZFS Storage</div><div class="pprice">$3,299.00</div></div>
<div class="card"><div class="badge" style="background:#009ba5;">Beta</div><div class="thumb" style="background:linear-gradient(135deg,#129800,#094e7f);"></div><div class="ptitle">QuTS hero 6.0</div><div class="pspec">Snapshot · Dedup</div><div class="pprice">Included</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.2px; background: #ffd700; color: #121212;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #121212;
border: 1px solid #ffd700; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff7d00; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Cabin',sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#fff8d6;}
.logo{font-size:20px;font-weight:700;color:#121212;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:700;color:#121212;}
.cart{background:#121212;color:#ffd700;font-size:13px;font-weight:700;padding:9px 18px;border-radius:9999px;}
.hero{height:224px;display:flex;align-items:center;padding:0 40px;background:linear-gradient(120deg,#ffd700 0%,#ff7d00 100%);position:relative;overflow:hidden;}
.pop{position:absolute;right:80px;top:30px;width:120px;height:150px;border-radius:60px 60px 20px 20px;background:#121212;}
.pop:before{content:'';position:absolute;left:20px;top:14px;width:80px;height:80px;border-radius:9999px;background:#fff8d6;}
.herotext{max-width:420px;position:relative;z-index:2;}
.h1{font-size:36px;font-weight:700;line-height:1.15;letter-spacing:-0.3px;color:#121212;margin:0 0 10px;}
.sub{font-size:14px;color:#121212;line-height:1.5;margin:0 0 16px;max-width:330px;}
.btn{display:inline-block;background:#121212;color:#ffd700;font-size:14px;font-weight:700;padding:12px 26px;border-radius:8px;}
.grid{display:flex;gap:14px;padding:16px 40px 0;}
.card{width:196px;background:#fff;border-radius:8px;overflow:hidden;position:relative;box-shadow:0 1px 3px rgba(0,0,0,0.08);}
.badge{position:absolute;top:8px;left:8px;background:#ff7d00;color:#121212;font-size:10px;font-weight:700;text-transform:uppercase;padding:4px 10px;border-radius:9999px;z-index:2;}
.thumb{height:96px;position:relative;}
.cbody{padding:11px 13px;}
.ctitle{font-size:14px;font-weight:700;margin:0 0 4px;}
.stars{color:#ffd700;font-size:11px;text-shadow:0 0 1px #999;margin-bottom:4px;}
.cprice{font-size:15px;font-weight:700;color:#121212;margin:0;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#fff8d6;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;color:#6b6b6b;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Ozzie Collectables</div>
<div class="navlinks"><span>Funko Pops</span><span>Trading Cards</span><span>New Arrivals</span></div>
<div class="cart">Cart (4)</div>
</div>
<div class="hero">
<div class="pop"></div>
<div class="herotext">
<div class="h1">Collect what you love.</div>
<div class="sub">Funko Pops, trading cards, and pop culture grails — stocked to the edges, gold-lit and ready.</div>
<div class="btn">Shop New Arrivals</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="badge">Hot Pick</div><div class="thumb" style="background:linear-gradient(135deg,#ffd700,#121212)"></div><div class="cbody"><div class="ctitle">Galactic Hero Pop! #482</div><div class="stars">★★★★★</div><div class="cprice">$14.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff7d00,#121212)"></div><div class="cbody"><div class="ctitle">Holo Chase Card Pack</div><div class="stars">★★★★☆</div><div class="cprice">$8.99</div></div></div>
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#121212,#ffd700)"></div><div class="cbody"><div class="ctitle">Legends Pop! Deluxe</div><div class="stars">★★★★★</div><div class="cprice">$29.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#dedede,#121212)"></div><div class="cbody"><div class="ctitle">Display Case, Acrylic</div><div class="stars">★★★★★</div><div class="cprice">$19.99</div></div></div>
</div>
<div class="footer"><span>Authenticity Guaranteed</span><span>Ships Same Day</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4081; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4081; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ea306f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4081; color: #000000;
border: 1px solid #ea306f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4081; color: #f5f5f5;
border: 1px solid #fd5d94; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fc3d7e; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#2d3035; box-sizing:border-box;
font-family:"Lific","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
* { box-sizing:border-box; }
.head { padding:16px 32px 0; display:flex; flex-direction:column; gap:12px; }
.chiprow { display:flex; gap:10px; align-items:center; }
.wordmark { font-size:18px; font-weight:900; color:#ff4081; letter-spacing:-0.3px; margin-right:2px; }
.chip { background:#fff1f5; color:#000000; font-size:13px; font-weight:700; letter-spacing:-0.2px;
border-radius:36px; padding:4px 14px 4px 16px; height:32px; display:flex; align-items:center; gap:6px; }
.chip .car { font-size:10px; opacity:0.5; }
.search { background:#ffffff; border:1px solid #e9ebec; border-radius:6px; height:48px;
display:flex; align-items:center; padding:0 16px; color:#9ca1aa; font-size:17px; font-weight:500; }
.kwrow { display:flex; gap:8px; }
.kw { background:rgba(255,170,199,0.55); color:#ffffff; font-size:12px; font-weight:500;
border-radius:15px; padding:4px 14px; }
.section { padding:14px 32px 0; }
.headline { font-size:17px; font-weight:700; letter-spacing:-0.2px; margin:0 0 12px; }
.headline b { font-weight:900; color:#ff4081; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:0 32px; }
.card { background:#f8f8f8; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.thumb { height:96px; position:relative; }
.th1 { background:linear-gradient(135deg,#ffd9e6,#ff9dc0); }
.th2 { background:linear-gradient(135deg,#ffe9b0,#ffbf6b); }
.th3 { background:linear-gradient(135deg,#d8f0e0,#8fd8ac); }
.th4 { background:linear-gradient(135deg,#dfe6ff,#a9baff); }
.disc { position:absolute; top:8px; left:8px; background:#f33f46; color:#fff; font-size:11px;
font-weight:700; border-radius:5px; padding:2px 6px; }
.cbody { padding:9px 10px 12px; display:flex; flex-direction:column; gap:5px; }
.pname { font-size:12px; color:#2d3035; line-height:1.35; letter-spacing:-0.2px; }
.prow { display:flex; align-items:baseline; gap:6px; }
.pct { font-size:14px; font-weight:700; color:#f33f46; letter-spacing:-0.3px; }
.price { font-size:13px; font-weight:700; color:#2d3035; }
.bottom { margin-top:12px; padding:0 32px; display:flex; align-items:center; justify-content:space-between; }
.reorder { font-size:11px; color:#9ca1aa; }
.buy { background:#ff4081; color:#ffffff; font-size:14px; font-weight:700; border:none;
border-radius:9999px; padding:10px 22px; }
</style></head>
<body>
<div class="head">
<div class="chiprow">
<span class="wordmark">Pet Friends</span>
<span class="chip">Dogs <span class="car">▾</span></span>
<span class="chip">Deliver to Home <span class="car">▾</span></span>
</div>
<div class="search">What are you looking for today?</div>
<div class="kwrow">
<span class="kw">Grain-free food</span>
<span class="kw">Cooling mat</span>
<span class="kw">Dental chews</span>
<span class="kw">Litter</span>
</div>
</div>
<div class="section">
<p class="headline">Loved by repeat buyers — <b>92% reorder rate</b> on this pick</p>
</div>
<div class="grid">
<div class="card">
<div class="thumb th1"><span class="disc">17%</span></div>
<div class="cbody"><span class="pname">Salmon & Sweet Potato Grain-Free Kibble 3kg</span>
<div class="prow"><span class="pct">17%</span><span class="price">₩28,900</span></div></div>
</div>
<div class="card">
<div class="thumb th2"><span class="disc">30%</span></div>
<div class="cbody"><span class="pname">Freeze-Dried Chicken Training Treats 200g</span>
<div class="prow"><span class="pct">30%</span><span class="price">₩12,400</span></div></div>
</div>
<div class="card">
<div class="thumb th3"></div>
<div class="cbody"><span class="pname">Cooling Gel Mat for Summer, Size M</span>
<div class="prow"><span class="price">₩19,900</span></div></div>
</div>
<div class="card">
<div class="thumb th4"><span class="disc">50%</span></div>
<div class="cbody"><span class="pname">Unscented Clumping Cat Litter 10L</span>
<div class="prow"><span class="pct">50%</span><span class="price">₩9,900</span></div></div>
</div>
</div>
<div class="bottom">
<span class="reorder">Trusted by 1.2M pet parents this month</span>
<button class="buy">Shop today's deals</button>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeecec; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeecec; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #9b0000; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #eeecec; color: #121212;
border: 1px solid #9b0000; border-radius: 9999px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #b7b6b6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #15975a; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#eeecec; font-family:'Inter',sans-serif; color:#444444; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#121212;}
.logo{font-family:'Bricolage Grotesque',Inter,sans-serif;font-size:20px;font-weight:700;color:#fff;letter-spacing:.2px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;color:#eeecec;}
.navcta{background:#9b0000;color:#fff;font-family:'Satoshi',Inter,sans-serif;font-size:12px;font-weight:600;padding:9px 18px;border-radius:9999px;}
.hero{height:250px;background:linear-gradient(120deg,#121212 40%,#9b0000 100%);display:flex;align-items:center;padding:0 36px;}
.herotext{width:480px;}
.kicker{font-family:'Satoshi',Inter,sans-serif;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#ee9441;margin-bottom:12px;}
.h1{font-family:'Bricolage Grotesque',Inter,sans-serif;font-size:34px;font-weight:700;line-height:1.15;color:#fff;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.5;color:#dedede;margin:0 0 18px;max-width:400px;}
.cta{display:inline-block;background:#fff;color:#121212;font-family:'Satoshi',Inter,sans-serif;font-size:13px;font-weight:600;padding:12px 26px;border-radius:9999px;}
.reels{position:absolute;right:60px;top:60px;width:220px;height:130px;}
.reel{position:absolute;width:70px;height:70px;border-radius:50%;border:8px solid #eeecec;top:20px;}
.reel1{left:0;}
.reel2{left:70px;top:40px;}
.sec{padding:24px 36px 0;}
.secTitle{font-family:'Bricolage Grotesque',Inter,sans-serif;font-size:19px;font-weight:600;color:#121212;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:210px;background:#fff;border-radius:12px;overflow:hidden;position:relative;}
.thumb{height:130px;position:relative;}
.badge{position:absolute;top:10px;left:10px;font-family:'Satoshi',Inter,sans-serif;font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:3px 8px;border-radius:9999px;z-index:2;}
.badge-red{background:#9b0000;color:#fff;}
.badge-green{background:#15975a;color:#fff;}
.badge-orange{background:#ee9441;color:#121212;}
.body{padding:12px;}
.pname{font-size:14px;font-weight:600;color:#121212;}
.pmeta{font-size:11px;color:#808080;margin-top:3px;}
.pprice{font-size:13px;font-weight:700;color:#9b0000;margin-top:6px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Via Vision Entertainment</div>
<div class="navlinks"><span>New Releases</span><span>Horror</span><span>Cult Classics</span><span>Box Sets</span></div>
<div class="navcta">Pre-Order</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Limited Edition Blu-ray</div>
<div class="h1">Collector's cinema, restored in full.</div>
<div class="sub">4K remasters and collector's editions of horror, drama, and cult-classic film.</div>
<div class="cta">Shop Collection</div>
</div>
<div class="reels"><div class="reel reel1"></div><div class="reel reel2"></div></div>
</div>
<div class="sec">
<div class="secTitle">New This Month</div>
<div class="grid">
<div class="card"><span class="badge badge-red">Ltd. Ed.</span><div class="thumb" style="background:linear-gradient(160deg,#9b0000,#121212 70%)"></div><div class="body"><div class="pname">The Hollow Reel</div><div class="pmeta">4K Ultra HD</div><div class="pprice">$34.99</div></div></div>
<div class="card"><span class="badge badge-green">Restored</span><div class="thumb" style="background:linear-gradient(160deg,#8b0000,#121212 70%)"></div><div class="body"><div class="pname">Midnight Curfew</div><div class="pmeta">Blu-ray</div><div class="pprice">$29.99</div></div></div>
<div class="card"><span class="badge badge-orange">Box Set</span><div class="thumb" style="background:linear-gradient(160deg,#121212,#9b0000 80%)"></div><div class="body"><div class="pname">Cult Trilogy Set</div><div class="pmeta">3-Disc Set</div><div class="pprice">$59.99</div></div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ebebeb; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ebebeb; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #163959; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #f68b1f; color: #000000;
border: 1px solid #163959; border-radius: 9999px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #404040;
border: 1px solid #bababa; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #62a1d8; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ebebeb; color:#272727; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.topbar { height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:19px; font-weight:700; letter-spacing:-0.2px; color:#163959; }
.search { flex:1; max-width:360px; height:34px; margin:0 30px; background:#ffffff; border-radius:9999px;
border:1px solid #dedede; }
.btn-primary { background:#163959; color:#ffffff; border:none; border-radius:9999px; padding:9px 20px;
font-size:12.5px; font-weight:700; }
.banner { margin:0 36px 20px; height:130px; border-radius:10px; background:#163959; color:#ffffff;
display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.banner h1 { margin:0; font-size:26px; font-weight:700; letter-spacing:-0.3px; }
.banner p { margin:4px 0 0; font-size:13px; color:#bada7a; }
.banner .disc { background:#f68b1f; color:#163959; font-weight:700; font-size:13px; padding:10px 18px;
border-radius:9999px; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; padding:0 36px; }
.card { background:#ffffff; border-radius:8px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.sleeve { height:100px; border-radius:6px; position:relative; }
.sleeve.s1 { background:#f68b1f; }
.sleeve.s2 { background:#bd2426; }
.sleeve.s3 { background:#9bca3e; }
.sleeve.s4 { background:#62a1d8; }
.tag { position:absolute; top:8px; right:8px; background:#ffffff; color:#163959; font-size:9.5px;
font-weight:700; padding:3px 7px; border-radius:9999px; }
.title { font-size:12.5px; font-weight:700; }
.artist { font-size:11px; color:#595959; }
.price { font-size:13px; font-weight:700; color:#163959; }
</style></head>
<body>
<div class="topbar">
<div class="brand">Euclid Records</div>
<div class="search"></div>
<button class="btn-primary">Sell Your Records</button>
</div>
<div class="banner">
<div><h1>New Arrivals, Every Friday.</h1><p>Rare pressings for the deeply knowledgeable.</p></div>
<div class="disc">Members Save 15%</div>
</div>
<div class="grid">
<div class="card"><div class="sleeve s1"><span class="tag">New</span></div>
<div class="title">Midnight Transit</div><div class="artist">The Faraway Station</div><div class="price">$28.00</div></div>
<div class="card"><div class="sleeve s2"></div>
<div class="title">Analog Heart</div><div class="artist">June Roads</div><div class="price">$34.50</div></div>
<div class="card"><div class="sleeve s3"><span class="tag">Rare</span></div>
<div class="title">Static & Bloom</div><div class="artist">Coastline Radio</div><div class="price">$52.00</div></div>
<div class="card"><div class="sleeve s4"></div>
<div class="title">Faded Liner Notes</div><div class="artist">Harbor & Vine</div><div class="price">$21.00</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #4c616d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #cf4646; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #3483ac; color: #ffffff;
border: 1px solid #cf4646; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #231f20;
border: 1px solid #eeeeee; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4c616d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fae351; color: #231f20;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f9fb; color:#3d4d57; box-sizing:border-box;
font-family:'Century Gothic','Futura','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#002e47; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#ffffff; font-size:20px; font-weight:800; margin:0; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:20px; }
.navlinks span { color:#ddeaf2; font-size:12px; font-weight:700; }
.navlinks .cta { background:#cf4646; color:#fff; padding:8px 16px; border-radius:8px; font-size:12px; font-weight:800; }
.hero { height:230px; background:linear-gradient(120deg,#e0ecf4,#f5f9fb); display:flex; align-items:center; padding:0 40px; }
.hero .txt { max-width:430px; }
.hero h1 { font-size:34px; font-weight:800; color:#002e47; margin:0 0 10px; line-height:1.15; }
.hero p { font-size:14px; color:#3483ac; margin:0 0 16px; font-weight:700; }
.hero .cta { display:inline-block; background:#cf4646; color:#fff; font-weight:800; font-size:14px; padding:12px 26px; border-radius:8px; }
.calc { margin-left:auto; width:280px; background:#ffffff; border-radius:12px; padding:16px; box-shadow:0 8px 24px rgba(0,46,71,0.12); }
.calc h4 { margin:0 0 10px; font-size:12px; font-weight:800; color:#002e47; }
.calc .row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #ddeaf2; font-size:11px; color:#3d4d57; }
.calc .total { display:flex; justify-content:space-between; padding-top:10px; font-size:14px; font-weight:800; color:#cf4646; }
.flags { display:flex; gap:8px; padding:14px 30px 6px; }
.flag { font-size:10px; font-weight:800; padding:5px 12px; border-radius:8px; color:#231f20; }
.f1 { background:#fae351; } .f2 { background:#9cd15a; } .f3 { background:#dc9600; color:#fff; }
.grid { display:flex; gap:14px; padding:6px 30px 0; }
.card { flex:1; background:#ffffff; border:1px solid #ddeaf2; border-radius:12px; padding:12px; }
.card .art { height:88px; border-radius:8px; margin-bottom:10px; }
.a1 { background:linear-gradient(135deg,#3483ac,#cadfeb); }
.a2 { background:linear-gradient(135deg,#76ae31,#9cd15a); }
.a3 { background:linear-gradient(135deg,#cf4646,#e9abab); }
.a4 { background:linear-gradient(135deg,#dc9600,#fae351); }
.card h3 { font-size:12px; font-weight:800; color:#231f20; margin:0 0 4px; }
.card p { font-size:10px; color:#4c616d; margin:0 0 8px; }
.card .price { font-size:14px; font-weight:800; color:#cf4646; }
footer { height:56px; background:#002e47; margin-top:14px; display:flex; align-items:center; gap:20px; padding:0 30px; }
footer span { color:#cadfeb; font-size:11px; font-weight:700; }
</style></head>
<body>
<nav>
<p class="brand">Fireball Printing</p>
<div class="navlinks"><span>Business Cards</span><span>Banners</span><span>Apparel</span><span>Stickers</span><span class="cta">Get a Quote</span></div>
</nav>
<div class="hero">
<div class="txt">
<h1>Print it fast.<br>Print it right.</h1>
<p>RUSH TURNAROUND · ECO-STOCK OPTIONS</p>
<span class="cta">Configure & Order</span>
</div>
<div class="calc">
<h4>QUICK QUOTE CALCULATOR</h4>
<div class="row"><span>Quantity</span><span>500 pcs</span></div>
<div class="row"><span>Paper Stock</span><span>14pt Gloss</span></div>
<div class="row"><span>Turnaround</span><span>2-Day Rush</span></div>
<div class="total"><span>Estimate</span><span>$189.00</span></div>
</div>
</div>
<div class="flags"><span class="flag f1">RUSH</span><span class="flag f2">ECO-STOCK</span><span class="flag f3">BULK DISCOUNT</span></div>
<div class="grid">
<div class="card"><div class="art a1"></div><h3>Business Cards</h3><p>14pt · Gloss / Matte</p><div class="price">from $19</div></div>
<div class="card"><div class="art a2"></div><h3>Vinyl Banners</h3><p>Eco-Stock Available</p><div class="price">from $45</div></div>
<div class="card"><div class="art a3"></div><h3>Custom Apparel</h3><p>Screen or DTG Print</p><div class="price">from $12</div></div>
<div class="card"><div class="art a4"></div><h3>Die-Cut Stickers</h3><p>Amber Rush Available</p><div class="price">from $9</div></div>
</div>
<footer>
<span>PAPER STOCK GUIDE</span><span>TURNAROUND TIMES</span><span>UPLOAD ARTWORK</span><span>TRACK YOUR ORDER</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ebebeb; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ebebeb; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #2f7bbf; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #ffffff; color: #272727;
border: 1px solid #2f7bbf; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #404040;
border: 1px solid #bababa; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #bd2426; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ebebeb; color:#272727; box-sizing:border-box;
font-family:-apple-system, Arial, BlinkMacSystemFont, "Helvetica Neue", Oxygen, Roboto, "Segoe UI", Ubuntu, sans-serif; }
* { box-sizing:border-box; }
nav { height:48px; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 20px; border-bottom:1px solid #dedede; }
.brand { font-size:20px; font-weight:700; color:#272727; }
.navlinks { display:flex; gap:18px; font-size:13px; font-weight:600; color:#404040; }
.searchbox { display:flex; align-items:center; background:#f5f5f5; border:1px solid #dedede; border-radius:8px;
padding:0 10px; height:32px; width:220px; font-size:12px; color:#737373; }
.catnav { height:36px; background:#ffffff; border-bottom:1px solid #dedede; display:flex; align-items:center;
gap:8px; padding:0 20px; }
.cat { font-size:12px; font-weight:600; color:#737373; padding:5px 12px; border-radius:2px; }
.cat.active { background:#2f7bbf; color:#ffffff; }
.crumb { font-size:11px; color:#737373; padding:6px 20px 0; }
.crumb b { color:#272727; font-weight:600; }
main { display:flex; padding:10px 20px 0; gap:20px; height:454px; }
.gallery { width:340px; display:flex; flex-direction:column; gap:8px; }
.mainshot { flex:1; background:#ffffff; border:1px solid #dedede; border-radius:2px; position:relative;
overflow:hidden; display:flex; align-items:center; justify-content:center; }
.mainshot .box { width:210px; height:270px; border-radius:2px; position:relative;
background:linear-gradient(160deg,#f4f7fa 0%,#dfe9f2 45%,#c7dbec 100%); border:1px solid #c3d3e0; }
.mainshot .box::before { content:''; position:absolute; left:14px; right:14px; top:16px; height:150px;
border-radius:2px; background:linear-gradient(150deg,#2f7bbf,#163959); opacity:.9; }
.mainshot .box::after { content:''; position:absolute; left:26px; right:26px; bottom:20px; height:10px;
background:#bfbfbf; border-radius:2px; }
.badges-float { position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:5px; }
.thumbs { display:flex; gap:6px; }
.thumb { flex:1; height:52px; background:#ffffff; border:1px solid #dedede; border-radius:2px; }
.thumb.sel { border-color:#2f7bbf; border-width:2px; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
padding:2px 6px; border-radius:2px; color:#fff; }
.b-preorder { background:#f68b1f; }
.b-limited { background:#de5052; }
.b-new { background:#62a1d8; }
.badgerow { display:flex; gap:6px; }
h1 { font-size:19px; font-weight:600; margin:2px 0 0; line-height:1.3; }
.sku { font-family:Courier, monospace; font-size:11px; color:#737373; }
.stars { font-size:12px; color:#f68b1f; }
.stars span.n { color:#737373; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:2px; }
.price { font-size:24px; font-weight:700; color:#272727; }
.release { font-size:12px; color:#404040; background:#f5f5f5; border:1px solid #dedede; border-radius:4px; padding:4px 10px; }
.release b { color:#272727; }
.variants { display:flex; gap:8px; margin-top:4px; }
.chip { font-size:12px; font-weight:600; color:#404040; background:#ffffff; border:1px solid #dedede;
border-radius:2px; padding:7px 14px; }
.chip.sel { border-color:#2f7bbf; border-width:2px; color:#2f7bbf; }
.qty { display:flex; align-items:center; border:1px solid #dedede; border-radius:2px; height:36px; width:96px; }
.qty div { flex:1; text-align:center; font-size:13px; }
.cta-row { display:flex; gap:10px; margin-top:6px; }
.btn-primary { background:#2f7bbf; color:#fff; font-size:14px; font-weight:600; border-radius:4px; height:36px;
padding:0 22px; display:flex; align-items:center; justify-content:center; }
.btn-secondary { background:#ffffff; color:#272727; font-size:14px; font-weight:600; border-radius:4px; height:36px;
padding:0 18px; border:1px solid #dedede; display:flex; align-items:center; justify-content:center; }
.specs { margin-top:6px; background:#f5f5f5; border-radius:4px; padding:10px 14px; display:grid;
grid-template-columns:1fr 1fr; gap:6px 16px; }
.spec-item { font-size:11px; }
.spec-item .lab { color:#737373; text-transform:uppercase; letter-spacing:.4px; font-size:10px; }
.spec-item .val { color:#272727; font-weight:600; font-size:12px; }
footer { position:absolute; bottom:0; left:0; right:0; height:26px; background:#163959; color:#bada7a;
display:flex; align-items:center; justify-content:space-between; padding:0 20px; font-size:10px; }
body { position:relative; }
</style></head>
<body>
<nav>
<span class="brand">Amiami</span>
<div class="navlinks"><span>Figures</span><span>Model Kits</span><span>Pre-Order</span><span>Games</span><span>Sale</span></div>
<div class="searchbox">Search inventory…</div>
</nav>
<div class="catnav">
<span class="cat active">Figures</span><span class="cat">Nendoroid</span><span class="cat">Scale Figures</span><span class="cat">Prize Items</span>
</div>
<div class="crumb">Home / Figures / Scale Figures / <b>1/7 Starlight Aria — Night Bloom Ver.</b></div>
<main>
<div class="gallery">
<div class="mainshot">
<div class="badges-float">
<span class="badge b-preorder">Pre-Order</span>
<span class="badge b-limited">Limited</span>
</div>
<div class="box"></div>
</div>
<div class="thumbs">
<div class="thumb sel"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div>
</div>
</div>
<div class="info">
<div class="badgerow"><span class="badge b-new">New Listing</span></div>
<h1>1/7 Scale Figure — Starlight Aria: Night Bloom Ver.</h1>
<div class="sku">SKU FIGR-88213-JP · Manufacturer: Lumen Craft</div>
<div class="stars">★★★★☆ <span class="n">4.3 (128 reviews)</span></div>
<div class="price-row">
<span class="price">¥18,480</span>
<span class="release">Release: <b>Mar 2027</b> · Payment due on release</span>
</div>
<div class="variants">
<span class="chip sel">Standard Edition</span>
<span class="chip">Deluxe + Diorama Base</span>
</div>
<div class="cta-row">
<div class="qty"><div>−</div><div>1</div><div>+</div></div>
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Add to Wishlist</div>
</div>
<div class="specs">
<div class="spec-item"><div class="lab">Scale</div><div class="val">1/7 Non-scale base</div></div>
<div class="spec-item"><div class="lab">Height</div><div class="val">Approx. 260mm</div></div>
<div class="spec-item"><div class="lab">Material</div><div class="val">PVC, ABS</div></div>
<div class="spec-item"><div class="lab">Sculptor</div><div class="val">Studio Kaen</div></div>
</div>
</div>
</main>
<footer><span>© Amiami</span><span>Import fees may apply at checkout</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #050038;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #050038;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #050038; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: #1c1c1e; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: transparent; color: #1c1c1e;
border: 1px solid #1c1c1e; border-radius: 9999px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1c1c1e;
border: 1px solid #c0bfcd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background: #ffd02f; color: #1c1c1e;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c1c1e; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #eef0f3; position:relative; z-index:3; background:#fff; }
.brand { font-size:18px; font-weight:700; color:#050038; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#555a6a; }
.btn { background:#1c1c1e; color:#fff; border:none; border-radius:999px; padding:9px 20px; font-weight:600; font-size:13px; }
/* 화이트보드 캔버스: 실제 제품처럼 색색 스티키노트가 흩어져 있고 그 위에
캔버스 야옐로 워드마크가 얹힌다 — Miro 의 "진짜 정체성"은 이 산만한 배치다. */
.board { position:relative; height:400px; background:
radial-gradient(circle,#eef0f3 1px,transparent 1.4px) 0 0/22px 22px, #fafbfc; overflow:hidden; }
.sticky { position:absolute; width:130px; height:110px; border-radius:6px; padding:12px; font-size:12px;
box-shadow:0 6px 16px rgba(5,0,56,0.10); font-weight:600; line-height:1.35; }
.s1 { background:#ffd02f; top:36px; left:60px; transform:rotate(-5deg); color:#746019; }
.s2 { background:#ffd8f4; top:24px; left:230px; transform:rotate(4deg); color:#600043; }
.s3 { background:#c3faf5; top:70px; right:250px; transform:rotate(-3deg); color:#187574; }
.s4 { background:#ffe6cd; top:30px; right:70px; transform:rotate(6deg); color:#7a3d00; }
.s5 { background:#ffc6c6; bottom:40px; left:150px; transform:rotate(3deg); color:#600000; }
.s6 { background:#dcecfa; bottom:30px; right:170px; transform:rotate(-4deg); color:#1a3d7a; }
.center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; z-index:2; }
.badge { background:#fff8e0; color:#746019; border:1.5px solid #ffd02f; border-radius:999px; padding:4px 14px; font-size:11px; font-weight:700; }
.center h1 { font-size:44px; font-weight:500; letter-spacing:-1.2px; margin:0; text-align:center; color:#050038; }
.center h1 .hl { color:#4262ff; }
.center p { font-size:14px; color:#555a6a; margin:0; }
.row { display:flex; gap:10px; }
.btn-yellow { background:#ffd02f; color:#050038; border:none; border-radius:999px; padding:10px 22px; font-weight:700; font-size:13px; }
.btn-outline { background:#fff; color:#1c1c1e; border:1.5px solid #1c1c1e; border-radius:999px; padding:9px 22px; font-weight:700; font-size:13px; }
.strip { display:flex; height:180px; border-top:1px solid #eef0f3; }
.tile { flex:1; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 26px;
border-right:1px solid #eef0f3; }
.tile:last-child { border-right:none; }
.tile .dot { width:26px; height:26px; border-radius:8px; }
.t1 .dot { background:#ffd02f; } .t2 .dot { background:#0fbcb0; } .t3 .dot { background:#ff9999; }
.tile h4 { font-size:14px; font-weight:700; margin:0; color:#050038; }
.tile p { font-size:12px; color:#555a6a; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">Miro</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Templates</span><span>Pricing</span></div>
<button class="btn">Sign up free</button>
</nav>
<div class="board">
<div class="sticky s1">Sprint plan</div>
<div class="sticky s2">Kickoff!</div>
<div class="sticky s3">User flow v2</div>
<div class="sticky s4">Retro notes</div>
<div class="sticky s5">Roadmap Q3</div>
<div class="sticky s6">Ask design</div>
<div class="center">
<span class="badge">AI Workflows</span>
<h1>Where teams<br><span class="hl">think together</span></h1>
<p>The visual workspace for innovation, powered by AI.</p>
<div class="row"><button class="btn-yellow">Sign up free</button><button class="btn-outline">Take a tour</button></div>
</div>
</div>
<div class="strip">
<div class="tile t1"><span class="dot"></span><h4>Brainstorm</h4><p>Sticky notes, at scale</p></div>
<div class="tile t2"><span class="dot"></span><h4>Diagram</h4><p>Flowcharts and maps</p></div>
<div class="tile t3"><span class="dot"></span><h4>Present</h4><p>Turn boards into decks</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #108474; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #f3fde8; color: #5a8a2e;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Figtree','Helvetica Neue',Arial,sans-serif; color:#3d3d3d; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e6e6e6;}
.logo{font-family:'Barlow',sans-serif;font-size:22px;font-weight:700;color:#222222;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:22px;font-size:15px;color:#3d3d3d;}
.navlinks .active{color:#108474;border-bottom:2px solid #108474;padding-bottom:4px;}
.search{width:220px;height:38px;border-radius:9999px;border:2px solid #e6e6e6;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#7b7b7b;}
.catbar{height:44px;background:#f9fafb;display:flex;align-items:center;gap:24px;padding:0 32px;font-size:13px;color:#3d3d3d;border-bottom:1px solid #e6e6e6;}
.hero{height:210px;display:flex;background:#222222;position:relative;overflow:hidden;}
.heroimg{width:44%;background:linear-gradient(160deg,#5f8c32,#108474 60%,#222222);position:relative;}
.heroimg:before{content:'';position:absolute;left:40px;bottom:0;width:60px;height:120px;background:linear-gradient(#8abb54,#5f8c32);border-radius:30px 30px 0 0;}
.heroimg:after{content:'';position:absolute;left:90px;bottom:0;width:44px;height:90px;background:linear-gradient(#8abb54,#5f8c32);border-radius:22px 22px 0 0;}
.herotext{width:56%;display:flex;flex-direction:column;justify-content:center;padding:0 36px;}
.herotext .kicker{font-family:'Barlow',sans-serif;font-size:12px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;color:#ffdb27;margin-bottom:8px;}
.herotext h1{font-family:'Barlow',sans-serif;font-size:30px;font-weight:700;color:#ffffff;margin:0 0 8px;letter-spacing:-0.3px;line-height:1.15;}
.herotext p{font-size:14px;color:#e6e6e6;margin:0 0 14px;max-width:340px;}
.herocta{display:inline-flex;align-items:center;background:#8abb54;color:#fff;font-family:'Barlow',sans-serif;font-size:14px;font-weight:600;padding:12px 26px;border-radius:9999px;width:fit-content;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:150px;border:1px solid #e6e6e6;border-radius:8px;padding:8px;position:relative;}
.thumb{height:96px;border-radius:4px;margin-bottom:6px;}
.badge{position:absolute;top:14px;left:14px;background:#b71c1c;color:#fff;font-family:'Barlow',sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 6px;border-radius:4px;}
.zone{display:inline-block;background:#f3fde8;color:#5a8a2e;font-family:'Barlow',sans-serif;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;margin-bottom:4px;}
.ptitle{font-family:'Figtree',sans-serif;font-size:13px;font-weight:600;color:#222222;line-height:1.25;}
.pprice{font-family:'Barlow',sans-serif;font-size:14px;font-weight:700;color:#108474;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Nature Hills</div>
<div class="navlinks"><div class="active">Trees</div><div>Shrubs</div><div>Perennials</div><div>Roses</div></div>
<div class="search">Search plants...</div>
</div>
<div class="catbar"><span>Zone Finder</span><span>Fruit & Nut</span><span>Vines</span><span>Guarantee</span></div>
<div class="hero">
<div class="herotext">
<div class="kicker">Zones 4-9 Guaranteed</div>
<h1>Grown for Your<br>Garden, Not a Catalog</h1>
<p>Hand-selected trees and shrubs, shipped alive and ready to root.</p>
<div class="herocta">Shop Trees</div>
</div>
<div class="heroimg"></div>
</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb" style="background:linear-gradient(160deg,#8abb54,#5f8c32)"></div><div class="zone">Zones 4-8</div><div class="ptitle">Japanese Maple 'Bloodgood'</div><div class="pprice">$89.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#5f8c32,#8c564b)"></div><div class="zone">Zones 3-7</div><div class="ptitle">October Glory Maple</div><div class="pprice">$64.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#108474,#5f8c32)"></div><div class="zone">Zones 5-9</div><div class="ptitle">Endless Summer Hydrangea</div><div class="pprice">$39.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#8abb54,#413389)"></div><div class="zone">Zones 4-9</div><div class="ptitle">Knock Out Rose Collection</div><div class="pprice">$49.95</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0d0d0d; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0d0d0d; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.57; margin: 0; color: #8a8a8a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 1.5px; background: #c9a96e; color: #0d0d0d;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 1.5px; background: transparent; color: #c9a96e;
border: 1px solid #c9a96e; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.6; background: #151515; color: #d4d4d4;
border: 1px solid #4a4a4a; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 2px; background: #c9a96e; color: #0d0d0d;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#0d0d0d; font-family:'Roboto','Helvetica Neue',Arial,sans-serif; color:#d4d4d4; }
*{box-sizing:border-box;}
.topstrip{height:28px;background:#c9a96e;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#0d0d0d;}
.nav{height:60px;border-bottom:1px solid #2e2e2e;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-family:'Oswald','Barlow Condensed',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.3px;text-transform:uppercase;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;letter-spacing:.4px;text-transform:uppercase;color:#d4d4d4;}
.stage{height:270px;display:flex;gap:24px;padding:20px 30px;}
.pedestal{width:220px;height:230px;background:#1c1c1c;border:1px solid #2e2e2e;border-radius:4px;position:relative;overflow:hidden;flex-shrink:0;}
.pedestal:before{content:'';position:absolute;left:50%;top:20px;transform:translateX(-50%);width:80px;height:150px;background:radial-gradient(circle at 40% 20%,#c9a96e,#3a3020 70%);border-radius:8px 8px 0 0;}
.pedestal:after{content:'';position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:130px;height:14px;background:#242424;border-radius:2px;}
.edbadge{position:absolute;top:10px;left:10px;font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#c9a96e;border:1px solid #c9a96e;padding:3px 8px;}
.infoblock{flex:1;}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#c9a96e;margin-bottom:10px;}
.h1{font-family:'Oswald','Barlow Condensed',sans-serif;font-size:32px;font-weight:700;text-transform:uppercase;line-height:1.1;color:#fff;margin:0 0 10px;}
.desc{font-size:14px;font-weight:300;color:#d4d4d4;margin:0 0 16px;max-width:400px;line-height:1.6;}
.price{font-size:24px;font-weight:700;color:#fff;margin-bottom:4px;}
.layaway{font-size:12px;color:#8a8a8a;margin-bottom:16px;}
.cta{display:inline-block;background:#c9a96e;color:#0d0d0d;font-size:15px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:14px 30px;}
.secTitle{padding:6px 30px 12px;font-family:'Oswald','Barlow Condensed',sans-serif;font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#8a8a8a;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:180px;background:#1c1c1c;border:1px solid #2e2e2e;}
.thumb{height:130px;background:#151515;position:relative;}
.thumb:before{content:'';position:absolute;left:50%;top:16px;transform:translateX(-50%);width:60px;height:100px;background:radial-gradient(circle at 40% 25%,#c9a96e,#2a2a2a 70%);border-radius:6px;}
.cbadge{position:absolute;top:8px;left:8px;font-size:9px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#c9a96e;border:1px solid #c9a96e;padding:2px 6px;}
.cbody{padding:8px 10px;}
.ctitle{font-size:13px;color:#fff;margin-bottom:4px;}
.cprice{font-size:15px;font-weight:700;color:#c9a96e;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="topstrip">Free Shipping Over $150 · Pre-Orders Ship Q3</div>
<div class="nav">
<div class="logo">Sideshow</div>
<div class="navlinks"><div>Statues</div><div>Sixth Scale</div><div>Props</div><div>Apparel</div></div>
</div>
<div class="stage">
<div class="pedestal"><div class="edbadge">Premium Format</div></div>
<div class="infoblock">
<div class="eyebrow">Sideshow Exclusive</div>
<div class="h1">Guardian of the Vault</div>
<div class="desc">Hand-painted polystone figure with interchangeable portraits and a lit diorama base. Limited edition run.</div>
<div class="price">$749.99</div>
<div class="layaway">or 4 payments of $187.50 with FlexPay</div>
<div class="cta">Add to Cart</div>
</div>
</div>
<div class="secTitle">More From This Line</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="cbadge">Sixth Scale</div></div><div class="cbody"><div class="ctitle">Vault Sentinel</div><div class="cprice">$289.99</div></div></div>
<div class="card"><div class="thumb"><div class="cbadge">Statue</div></div><div class="cbody"><div class="ctitle">Iron Ledger Bust</div><div class="cprice">$189.99</div></div></div>
<div class="card"><div class="thumb"><div class="cbadge">Exclusive</div></div><div class="cbody"><div class="ctitle">Twilight Marauder</div><div class="cprice">$429.99</div></div></div>
<div class="card"><div class="thumb"><div class="cbadge">Life-Size</div></div><div class="cbody"><div class="ctitle">Vault Guardian Bust</div><div class="cprice">$899.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fef6ef; color: #141b38;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fef6ef; color: #141b38;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #141b38; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #434960; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #00587c; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #fef6ef; color: #00587c;
border: 1px solid #00587c; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1c1c1a;
border: 1px solid #c4bfc1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #434960; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.18; letter-spacing: 0.5px; background: #cedc00; color: #141b38;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; font-family:'GT Walsheim','Avenir Next','Open Sans',Arial,sans-serif; color:#141b38;
}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#00587c;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:12.5px;color:#cdeaf5;font-weight:500;}
.search-pill{background:#fff;border-radius:999px;height:34px;width:190px;display:flex;align-items:center;padding:0 14px;font-size:11.5px;color:#00587c;}
.hero{display:flex;padding:26px 32px 16px;gap:24px;align-items:center;}
.hero-copy{width:370px;}
.hero-title{font-size:32px;font-weight:700;line-height:1.15;margin-bottom:12px;color:#00587c;}
.hero-sub{font-size:13.5px;line-height:1.55;color:#334;margin-bottom:16px;}
.btn-main{display:inline-block;background:#00afd7;color:#fff;padding:12px 24px;font-size:12.5px;font-weight:700;border-radius:999px;}
.hero-visual{flex:1;height:210px;border-radius:16px;background:linear-gradient(135deg,#fa9b57 0%,#00afd7 60%,#00587c 100%);position:relative;}
.drop{position:absolute;border-radius:50% 50% 50% 0;transform:rotate(45deg);}
.d1{width:44px;height:44px;background:#cedc00;top:30px;left:40px;}
.d2{width:30px;height:30px;background:#f7763f;bottom:36px;right:70px;}
.chart{position:absolute;bottom:0;left:0;right:0;height:60px;background:#141b38;border-radius:0 0 16px 16px;display:flex;align-items:center;padding:0 20px;justify-content:space-between;}
.chart span{font-size:9px;color:#cedc00;font-weight:700;text-transform:uppercase;}
.section{padding:6px 32px 0;}
.section-title{font-size:17px;font-weight:700;margin-bottom:14px;color:#00587c;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{background:#fff;border-radius:12px;box-shadow:0 3px 10px rgba(0,0,0,.07);padding:12px;}
.card-img{height:86px;border-radius:8px;margin-bottom:10px;background:linear-gradient(150deg,#fa9b57,#00afd7);}
.badge-cat{display:inline-block;background:#cedc00;color:#141b38;font-size:8.5px;font-weight:700;padding:3px 8px;border-radius:999px;margin-bottom:6px;}
.card-name{font-size:12.5px;font-weight:600;margin-bottom:4px;}
.card-price{font-size:12.5px;font-weight:700;color:#00587c;}
</style>
<div class="nav">
<div class="logo">Ecos</div>
<div class="navlinks"><span>Dish</span><span>Laundry</span><span>Hand Soap</span><span>Bundles</span></div>
<div class="search-pill">Search products...</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="hero-title">Cleaning, reimagined in color.</div>
<div class="hero-sub">Plant-powered formulas in bold scents and brighter bottles — sustainability that doesn't apologize for having personality.</div>
<div class="btn-main">Shop All Scents</div>
</div>
<div class="hero-visual">
<div class="drop d1"></div><div class="drop d2"></div>
<div class="chart"><span>Certified Sustainable</span><span>Plant-Based</span></div>
</div>
</div>
<div class="section">
<div class="section-title">Shop By Scent</div>
<div class="grid">
<div class="card"><div class="card-img"></div><div class="badge-cat">Dish</div><div class="card-name">Free & Clear Dish Soap</div><div class="card-price">$6.49</div></div>
<div class="card"><div class="card-img"></div><div class="badge-cat">Laundry</div><div class="card-name">Sea Minerals Laundry</div><div class="card-price">$14.99</div></div>
<div class="card"><div class="card-img"></div><div class="badge-cat">Hand Soap</div><div class="card-name">Grapefruit Hand Soap</div><div class="card-price">$5.99</div></div>
<div class="card"><div class="card-img"></div><div class="badge-cat">Bundle</div><div class="card-name">Kitchen Starter Bundle</div><div class="card-price">$28.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f0; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f0; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #707170; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.25px; background: #05301a; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.25px; background: #f6f6f0; color: #05301a;
border: 1px solid #05301a; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f6f6f0; color: #444444;
border: 1px solid #bdbdb8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707170; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #c60808; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6f6f0; color:#111111; box-sizing:border-box;
font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#05301a; color:#fff; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.brand { font-weight:700; font-size:18px; }
.navlinks { display:flex; gap:4px; }
.navlinks span { font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; padding:8px 16px;
border-radius:6px; }
.navlinks span.on { background:rgba(255,255,255,0.15); }
.search { width:180px; height:32px; border-radius:9999px; background:#f6f6f0; color:#444; font-size:11px;
display:flex; align-items:center; padding:0 14px; }
.hero { height:180px; background:#05301a; color:#fff; display:flex; flex-direction:column; justify-content:center;
padding:0 32px; position:relative; }
.hero h1 { font-size:32px; font-weight:700; margin:0 0 10px; }
.hero p { font-size:15px; color:#cfe0d5; margin:0 0 16px; max-width:400px; }
.btn { display:inline-block; width:fit-content; background:#c60808; color:#fff; font-size:13px; font-weight:600;
letter-spacing:0.5px; padding:12px 26px; border-radius:9999px; }
.tiles { display:flex; gap:12px; padding:16px 32px; }
.tile { flex:1; background:#fff; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,0.08); padding:12px; text-align:center; }
.tile .sw { height:60px; border-radius:6px; margin-bottom:8px; }
.tile p { font-size:13px; font-weight:600; margin:0; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:0 32px; }
.card { background:#fff; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,0.08); overflow:hidden; }
.cover { height:90px; position:relative; }
.badge { position:absolute; top:6px; left:6px; font-size:9px; font-weight:700; letter-spacing:0.5px;
text-transform:uppercase; padding:2px 8px; border-radius:2px; color:#fff; }
.b-sale { background:#c60808; } .b-new { background:#05301a; }
.info { padding:8px 10px; }
.t { font-size:13px; font-weight:600; margin:0 0 4px; }
.p { font-size:13px; color:#111; }
footer { position:absolute; bottom:0; left:0; right:0; height:44px; background:#05301a; color:#fff;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; opacity:0.9; }
</style></head>
<body>
<nav>
<div class="brand">Faber Castell</div>
<div class="navlinks"><span class="on">Colored Pencils</span><span>Markers</span><span>Art Sets</span><span>Erasers</span></div>
<div class="search">Search…</div>
</nav>
<div class="hero">
<h1>Serious craft, since 1761</h1>
<p>Art supplies trusted by illustrators and children's first pencil sets alike.</p>
<span class="btn">SHOP ART SETS</span>
</div>
<div class="tiles">
<div class="tile"><div class="sw" style="background:linear-gradient(160deg,#05301a,#0c4a29);"></div><p>Colored Pencils</p></div>
<div class="tile"><div class="sw" style="background:linear-gradient(160deg,#c60808,#8f0505);"></div><p>Markers</p></div>
<div class="tile"><div class="sw" style="background:linear-gradient(160deg,#eedd22,#c9b91b);"></div><p>Art Sets</p></div>
<div class="tile"><div class="sw" style="background:linear-gradient(160deg,#707170,#444;);"></div><p>Erasers</p></div>
</div>
<div class="grid">
<div class="card"><div class="cover" style="background:#eedd22;"><span class="badge b-new">New</span></div>
<div class="info"><p class="t">Polychromos 36-Set</p><p class="p">$68.00</p></div></div>
<div class="card"><div class="cover" style="background:#05301a;"></div>
<div class="info"><p class="t">Pitt Artist Pen Set</p><p class="p">$24.00</p></div></div>
<div class="card"><div class="cover" style="background:#c60808;"><span class="badge b-sale">Sale</span></div>
<div class="info"><p class="t">Castell 9000 Graphite</p><p class="p">$14.00</p></div></div>
<div class="card"><div class="cover" style="background:#707170;"></div>
<div class="info"><p class="t">Grip Eraser Set</p><p class="p">$6.50</p></div></div>
</div>
<footer><span>© Faber Castell — Art supplies since 1761</span><span>Colored Pencils · Markers · Art Sets</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 500; line-height: 1.45; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; background: #009ee0; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; background: #ffffff; color: #009ee0;
border: 1px solid #009ee0; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #dde2e8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; background: #e5f5fc; color: #0078aa;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Eppendorf — Home</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#333333;
font-family:'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
.page{width:960px;height:640px;display:flex;flex-direction:column;}
header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #dde2e8;}
.logo{font-size:20px;font-weight:700;color:#1a1a1a;letter-spacing:-0.3px;}
.logo span{color:#009ee0;}
nav{display:flex;gap:22px;}
nav a{font-size:12.5px;font-weight:600;color:#333333;}
.nav-cta{background:#009ee0;color:#fff;padding:8px 18px;border-radius:8px;font-size:12px;font-weight:600;}
.hero{display:flex;padding:26px 30px;gap:26px;background:#f2f7fb;border-bottom:1px solid #dde2e8;}
.hero-copy{flex:1;}
.hero-copy .kicker{font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#009ee0;margin-bottom:8px;}
.hero-copy h1{font-size:28px;font-weight:700;color:#1a1a1a;margin:0 0 10px;line-height:1.25;}
.hero-copy p{font-size:13px;color:#333333;max-width:360px;margin:0 0 16px;line-height:1.6;}
.hero-cta{display:inline-block;background:#009ee0;color:#fff;padding:10px 20px;border-radius:6px;font-size:12px;font-weight:700;}
.instrument{width:220px;height:150px;border-radius:8px;background:linear-gradient(160deg,#ffffff,#e5f5fc);border:1px solid #99d6f3;position:relative;}
.instrument::after{content:'';position:absolute;left:24px;right:24px;top:24px;bottom:60px;background:#009ee0;border-radius:6px;}
.instrument .disp{position:absolute;left:24px;right:24px;bottom:24px;height:22px;background:#1a1a1a;border-radius:4px;color:#00e0a0;font-size:10px;display:flex;align-items:center;padding-left:8px;font-family:monospace;}
main{flex:1;padding:18px 30px 0;}
.spec-table{display:flex;border:1px solid #dde2e8;border-radius:6px;overflow:hidden;margin-bottom:16px;}
.spec-table div{flex:1;padding:9px 14px;border-right:1px solid #dde2e8;font-family:monospace;}
.spec-table div:last-child{border-right:none;}
.spec-table b{display:block;font-size:15px;color:#009ee0;}
.spec-table span{font-size:9.5px;color:#6b7280;text-transform:uppercase;letter-spacing:0.4px;font-family:'Source Sans Pro';}
.row-head{font-size:16px;font-weight:700;color:#1a1a1a;margin:0 0 12px;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.card{border:1px solid #dde2e8;border-radius:8px;overflow:hidden;}
.thumb{height:70px;background:linear-gradient(150deg,#e5f5fc,#cdeaf8);position:relative;}
.thumb::after{content:'';position:absolute;left:40%;right:40%;top:20%;bottom:35%;background:#009ee0;border-radius:3px;}
.card .info{padding:10px 12px;border-left:3px solid #009ee0;}
.card h4{font-size:13px;margin:0 0 4px;color:#1a1a1a;font-weight:700;}
.card .sku{font-size:9.5px;color:#6b7280;font-family:monospace;margin-bottom:6px;}
.card .price{font-size:13px;font-weight:700;color:#0078aa;}
footer{border-top:1px solid #dde2e8;padding:12px 30px;display:flex;justify-content:space-between;margin-top:14px;}
footer span{font-size:10px;color:#6b7280;}
</style>
<div class="page">
<header>
<div class="logo">Eppendorf<span>.</span></div>
<nav><a>Liquid Handling</a><a>Centrifugation</a><a>Cell Culture</a><a>Genomics</a><a>Service</a></nav>
<div class="nav-cta">Request Quote</div>
</header>
<div class="hero">
<div class="hero-copy">
<div class="kicker">Instrument-Grade Precision</div>
<h1>Calibrated to the microliter. Trusted since the bench was invented.</h1>
<p>Pipettes, centrifuges, and thermal cyclers built to protocol — with certificates of conformance on every unit.</p>
<div class="hero-cta">Browse Instruments</div>
</div>
<div class="instrument"><div class="disp">RPM 14,500 · 4°C</div></div>
</div>
<main>
<div class="spec-table">
<div><b>0.1–10,000µL</b><span>Volume Range</span></div>
<div><b>30,130 × g</b><span>Max RCF</span></div>
<div><b>±0.5%</b><span>Accuracy Rating</span></div>
<div><b>ISO 9001</b><span>Certification</span></div>
</div>
<div class="row-head">Instrument Catalog</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="info"><h4>Research Plus Pipette</h4><div class="sku">SKU EP-3120</div><div class="price">$389.00</div></div></div>
<div class="card"><div class="thumb"></div><div class="info"><h4>Centrifuge 5425 R</h4><div class="sku">SKU EP-5425R</div><div class="price">$6,240.00</div></div></div>
<div class="card"><div class="thumb"></div><div class="info"><h4>Mastercycler X50 Thermal Cycler</h4><div class="sku">SKU EP-X50</div><div class="price">$4,890.00</div></div></div>
</div>
</main>
<footer>
<span>© Eppendorf — Life Science Instruments</span>
<span>Certificates of Conformance · Application Notes · Service Contracts</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6fbf8; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6fbf8; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #787a79; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1ec677; color: #000000;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f6fbf8; color: #000000;
border: 1px solid #1ec677; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f6fbf8; color: #111111;
border: 1px solid #d1d6d3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787a79; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d3f3e3; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F6FBF8; color:#0F1A14; box-sizing:border-box;
font-family:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.tnum { font-variant-numeric:tabular-nums; }
.topbar { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.greet { font-size:19px; font-weight:700; }
.icons { display:flex; gap:14px; align-items:center; font-size:18px; color:#5C6E63; }
.wrap { display:flex; gap:24px; padding:0 28px 20px; height:560px; }
.left { width:400px; flex-shrink:0; }
.hero { background:linear-gradient(150deg,#1EC677,#12A862); border-radius:24px; padding:22px 24px;
box-shadow:0 16px 32px -16px rgba(30,198,119,0.45); }
.hero .lbl { font-size:13px; font-weight:600; color:rgba(6,32,20,0.7); }
.hero .amt { font-size:44px; font-weight:700; letter-spacing:-1.5px; color:#062014; margin:2px 0; }
.hero .amt sup { font-size:26px; }
.hero .sub { font-size:13px; font-weight:600; color:rgba(6,32,20,0.65); margin-bottom:16px; }
.hero .acts { display:flex; gap:10px; }
.hbtn { flex:1; background:rgba(6,32,20,0.14); border-radius:12px; height:40px; display:flex; align-items:center;
justify-content:center; gap:6px; color:#062014; font-size:13px; font-weight:700; }
.spotme { background:#FFFFFF; border:1px solid #E4EDE8; border-radius:16px; padding:14px 16px; margin-top:16px;
display:flex; align-items:center; gap:12px; }
.spot-icon { width:38px; height:38px; border-radius:12px; background:#E4F7EE; display:flex; align-items:center;
justify-content:center; color:#12B981; font-size:16px; flex-shrink:0; }
.spot-title { font-size:14px; font-weight:700; }
.spot-sub { font-size:12px; color:#5C6E63; }
.spot-val { margin-left:auto; font-size:15px; font-weight:700; color:#12B981; }
.right { flex:1; min-width:0; }
.sec-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.sec-h h3 { font-size:18px; font-weight:700; margin:0; }
.seeall { font-size:13px; font-weight:700; color:#0FAE63; }
.txn { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid #E4EDE8; }
.tile { width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center;
font-weight:700; color:#fff; font-size:14px; flex-shrink:0; }
.tname { font-size:15px; font-weight:600; }
.tmeta { font-size:12px; color:#5C6E63; margin-top:1px; }
.tamt { margin-left:auto; font-size:15px; font-weight:700; }
.pos { color:#0FAE63; }
.neu { color:#0F1A14; }
.early { color:#0FAE63; font-weight:600; }
.chip { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; margin-left:6px; }
.chip.posted { background:#E4F7EE; color:#0FAE63; }
.chip.pending { background:#FCEEDA; color:#E08600; }
</style></head>
<body>
<div class="topbar">
<div class="greet">Hi, Jordan</div>
<div style="font-size:13px;font-weight:800;letter-spacing:0.2pt;color:#0F1A14;">Chime (iOS)</div>
<div class="icons"><span>🔔</span><span>👤</span></div>
</div>
<div class="wrap">
<div class="left">
<div class="hero">
<div class="lbl">Checking 💳</div>
<div class="amt tnum">$2,847<sup>.19</sup></div>
<div class="sub">Available to spend</div>
<div class="acts">
<div class="hbtn">⇄ Move money</div>
<div class="hbtn">💬 Pay anyone</div>
</div>
</div>
<div class="spotme">
<div class="spot-icon">★</div>
<div>
<div class="spot-title">SpotMe is on</div>
<div class="spot-sub">Overdraft up to your limit, fee-free</div>
</div>
<div class="spot-val tnum">$200</div>
</div>
</div>
<div class="right">
<div class="sec-h"><h3>Recent activity</h3><span class="seeall">See all</span></div>
<div class="txn">
<div class="tile" style="background:#1EC677;">DD</div>
<div><div class="tname">Direct Deposit — Payroll</div><div class="tmeta">Fri · <span class="early">2 days early</span></div></div>
<div class="tamt pos tnum">+$1,284.10</div>
</div>
<div class="txn">
<div class="tile" style="background:#8A6B4F;">MC</div>
<div><div class="tname">Trader Joe's</div><div class="tmeta">Today · Card ····4821 <span class="chip posted">Posted</span></div></div>
<div class="tamt neu tnum">-$38.42</div>
</div>
<div class="txn">
<div class="tile" style="background:#5C8CE0;">LY</div>
<div><div class="tname">Lyft</div><div class="tmeta">Today · Card ····4821 <span class="chip pending">Pending</span></div></div>
<div class="tamt neu tnum">-$14.20</div>
</div>
<div class="txn">
<div class="tile" style="background:#E4F7EE; color:#0FAE63;">PA</div>
<div><div class="tname">Pay Anyone — Sam R.</div><div class="tmeta">Yesterday <span class="chip posted">Posted</span></div></div>
<div class="tamt pos tnum">+$60.00</div>
</div>
<div class="txn" style="border-bottom:none;">
<div class="tile" style="background:#B08968;">SB</div>
<div><div class="tname">Starbucks</div><div class="tmeta">Yesterday · Card ····4821</div></div>
<div class="tamt neu tnum">-$6.75</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2f2d2d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2f2d2d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #2f2d2d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7d7d7d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #abbd26; color: #000000;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: transparent; color: #2f2d2d;
border: 1px solid #2f2d2d; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2f2d2d;
border: 1px solid #d1d3d4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7d7d7d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #efefef; color: #58595b;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;font-family:'NeueMontreal-Regular',Rand,Arial,sans-serif;color:#58595b;}
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #d1d3d4;}
.logo{font-family:Archer,'Roboto Slab',Georgia,serif;font-size:19px;font-weight:700;color:#2f2d2d;}
.navlinks{display:flex;gap:24px;font-size:11px;font-weight:700;letter-spacing:1.2px;color:#58595b;text-transform:uppercase;}
.cta-nav{padding:8px 16px;background:#abbd26;color:#ffffff;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;border-radius:2px;}
.hero{height:250px;display:flex;padding:30px 40px;gap:34px;background:#f5f5f5;}
.hero-text{width:400px;display:flex;flex-direction:column;justify-content:center;}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.5px;color:#9aab8b;text-transform:uppercase;margin-bottom:10px;}
.headline{font-family:Archer,'Roboto Slab',Georgia,serif;font-size:32px;font-weight:600;letter-spacing:-0.3px;line-height:1.2;color:#2f2d2d;margin-bottom:12px;}
.sub{font-size:14px;color:#7d7d7d;line-height:1.5;width:365px;margin-bottom:18px;}
.cta{display:inline-block;padding:12px 26px;background:#abbd26;color:#ffffff;border-radius:2px;font-size:13px;font-weight:600;letter-spacing:0.3px;}
.hero-visual{flex:1;background:#ffffff;border:1px solid #d1d3d4;border-radius:2px;position:relative;padding:16px;}
.spec-row{display:flex;justify-content:space-between;font-size:11px;color:#7d7d7d;border-bottom:1px solid #eeeeee;padding:7px 0;}
.spec-row b{color:#2f2d2d;font-weight:700;}
.armgraphic{position:absolute;right:16px;bottom:14px;width:110px;height:80px;}
.armbase{position:absolute;left:0;bottom:0;width:24px;height:24px;background:#3c5956;border-radius:2px;}
.armpole{position:absolute;left:10px;bottom:20px;width:6px;height:50px;background:#9aab8b;}
.armhead{position:absolute;left:16px;top:0;width:70px;height:16px;background:#51b5e0;border-radius:2px;}
.section{padding:20px 40px 0 40px;display:flex;justify-content:space-between;align-items:baseline;}
.section-title{font-family:Archer,serif;font-size:20px;font-weight:600;color:#2f2d2d;}
.section-link{font-size:11px;font-weight:700;letter-spacing:0.5px;color:#51b5e0;text-transform:uppercase;}
.grid{display:flex;gap:24px;padding:14px 40px 0 40px;}
.card{width:204px;background:#ffffff;border:1px solid #d1d3d4;border-radius:2px;overflow:hidden;}
.swatch{height:96px;background:#f5f5f5;position:relative;display:flex;align-items:center;justify-content:center;}
.swatch .arm{width:70px;height:50px;border:2px solid #58595b;border-radius:2px;}
.card-body{padding:11px 13px 13px 13px;}
.card-title{font-size:13px;font-weight:600;color:#2f2d2d;margin-bottom:5px;}
.card-spec{font-family:'Conv_UniversLTStd-BoldCn','Arial Narrow',Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:0.3px;color:#7d7d7d;margin-bottom:8px;}
.card-price{font-size:14px;font-weight:700;color:#2f2d2d;}
</style>
<div class="nav">
<div class="logo">Humanscale Arms</div>
<div class="navlinks"><span>Monitor Arms</span><span>Task Chairs</span><span>Sit-Stand</span><span>Compare</span></div>
<div class="cta-nav">Configure</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="eyebrow">Engineered Ergonomics</div>
<div class="headline">Precision that holds<br/>its position.</div>
<div class="sub">Gas-spring monitor arms rated for real payloads, real reach, real range of motion — no marketing gloss required.</div>
<div class="cta">Shop Monitor Arms</div>
</div>
<div class="hero-visual">
<div class="spec-row"><span>Payload Range</span><b>2–20 lbs</b></div>
<div class="spec-row"><span>Reach</span><b>25.5 in</b></div>
<div class="spec-row"><span>Height Adjust</span><b>15.7 in</b></div>
<div class="armgraphic"><div class="armbase"></div><div class="armpole"></div><div class="armhead"></div></div>
</div>
</div>
<div class="section"><div class="section-title">Monitor Arms</div><div class="section-link">Compare Specs</div></div>
<div class="grid">
<div class="card">
<div class="swatch"><div class="arm" style="border-color:#abbd26;"></div></div>
<div class="card-body"><div class="card-title">M8.1 Single Arm</div><div class="card-spec">2–20 LBS · REACH 25.5"</div><div class="card-price">$309.00</div></div>
</div>
<div class="card">
<div class="swatch"><div class="arm" style="border-color:#51b5e0;"></div></div>
<div class="card-body"><div class="card-title">M/Flex Dual</div><div class="card-spec">4–20 LBS · REACH 21.5"</div><div class="card-price">$419.00</div></div>
</div>
<div class="card">
<div class="swatch"><div class="arm" style="border-color:#3c5956;"></div></div>
<div class="card-body"><div class="card-title">M2.1 Single Arm</div><div class="card-spec">2–20 LBS · REACH 25.5"</div><div class="card-price">$219.00</div></div>
</div>
<div class="card">
<div class="swatch"><div class="arm" style="border-color:#9aab8b;"></div></div>
<div class="card-body"><div class="card-title">Quickstand Lite</div><div class="card-spec">SIT-STAND · 12 LBS</div><div class="card-price">$489.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0f172a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0f172a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.25; margin: 0; color: #0f172a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #64748b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.08em; background: #0f172a; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.08em; background: #ffffff; color: #0f172a;
border: 1px solid #0f172a; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #0f172a;
border: 1px solid #e2e8f0; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #64748b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.12em; background: #0f172a; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>IXXI</title>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;font-family:'Futura','Century Gothic','Trebuchet MS',Arial,sans-serif;color:#334155;}
*{box-sizing:border-box;}
.nav{position:absolute;top:0;left:0;width:960px;height:60px;background:#fff;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:Georgia,serif;font-size:20px;color:#0f172a;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;}
.hero{position:absolute;top:60px;left:0;width:960px;height:280px;background:#fff;display:flex;}
.herocopy{width:440px;padding:56px 40px;}
.herocopy h1{font-family:Georgia,serif;font-weight:400;font-size:42px;line-height:1.08;color:#0f172a;margin:0 0 16px 0;}
.herocopy p{font-size:14px;color:#334155;margin:0 0 20px 0;line-height:1.5;}
.btn-primary{background:#0f172a;color:#fff;font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;padding:14px 28px;border-radius:4px;display:inline-block;}
.heroimg{width:520px;height:280px;position:relative;overflow:hidden;}
.tile{position:absolute;background:linear-gradient(135deg,#334155,#0f172a);}
.tile1{left:0;top:0;width:174px;height:140px;background:linear-gradient(135deg,#64748b,#334155);border-right:1px solid #cbd5e1;border-bottom:1px solid #cbd5e1;}
.tile2{left:174px;top:0;width:174px;height:140px;background:linear-gradient(135deg,#94a3b8,#475569);border-right:1px solid #cbd5e1;border-bottom:1px solid #cbd5e1;}
.tile3{left:348px;top:0;width:172px;height:140px;background:linear-gradient(135deg,#334155,#0f172a);border-bottom:1px solid #cbd5e1;}
.tile4{left:0;top:140px;width:174px;height:140px;background:linear-gradient(135deg,#475569,#1e293b);border-right:1px solid #cbd5e1;}
.tile5{left:174px;top:140px;width:174px;height:140px;background:linear-gradient(135deg,#0f172a,#334155);border-right:1px solid #cbd5e1;}
.tile6{left:348px;top:140px;width:172px;height:140px;background:linear-gradient(135deg,#64748b,#94a3b8);}
.sectitle{position:absolute;top:360px;left:32px;font-family:Georgia,serif;font-size:20px;color:#0f172a;}
.grid{position:absolute;top:404px;left:32px;width:896px;height:216px;display:flex;gap:20px;}
.card{width:207px;}
.imgbox{width:207px;height:180px;position:relative;}
.imgbox.a{background:linear-gradient(160deg,#334155,#0f172a);}
.imgbox.b{background:linear-gradient(160deg,#94a3b8,#64748b);}
.imgbox.c{background:linear-gradient(160deg,#475569,#1e293b);}
.imgbox.d{background:linear-gradient(160deg,#cbd5e1,#94a3b8);}
.badge{position:absolute;top:8px;left:8px;background:#0f172a;color:#fff;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;padding:4px 8px;}
.title{font-size:14px;color:#0f172a;margin:10px 0 2px;}
.caption{font-size:12px;color:#64748b;margin-bottom:6px;}
.price{font-size:16px;font-weight:600;color:#0f172a;}
</style>
<div class="nav">
<div class="logo">Ixxi</div>
<div class="navlinks"><span>Art</span><span>Photo</span><span>Build Your Own</span><span>About</span></div>
</div>
<div class="hero">
<div class="herocopy">
<h1>Your photo,<br>on the wall.</h1>
<p>Upload an image and IXXI cuts it into rectangular panels that interlock by hand — a wall-scale artwork, built by you.</p>
<div class="btn-primary">Start Building</div>
</div>
<div class="heroimg">
<div class="tile tile1"></div><div class="tile tile2"></div><div class="tile tile3"></div>
<div class="tile tile4"></div><div class="tile tile5"></div><div class="tile tile6"></div>
</div>
</div>
<div class="sectitle">Curated Collections</div>
<div class="grid">
<div class="card">
<div class="imgbox a"><div class="badge">New</div></div>
<div class="title">Nocturne Study</div>
<div class="caption">6 panels · 90 × 60 cm</div>
<div class="price">$189.00</div>
</div>
<div class="card">
<div class="imgbox b"></div>
<div class="title">Marble Fragment</div>
<div class="caption">9 panels · 120 × 90 cm</div>
<div class="price">$249.00</div>
</div>
<div class="card">
<div class="imgbox c"></div>
<div class="title">Slate Horizon</div>
<div class="caption">4 panels · 60 × 60 cm</div>
<div class="price">$139.00</div>
</div>
<div class="card">
<div class="imgbox d"></div>
<div class="title">Build Your Own</div>
<div class="caption">Upload any photo</div>
<div class="price">From $99.00</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px; background: #313131; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e53935; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e5e5e5;}
.logo{font-size:18px;font-weight:700;color:#1a1a1a;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;}
.navlinks .active{color:#313131;}
.navlinks .inactive{color:#6b6b6b;}
.hero{height:180px;background:#f5f5f5;display:flex;align-items:center;padding:0 32px;gap:26px;}
.herotext{width:46%;}
.herotext h1{font-size:28px;font-weight:700;margin:0 0 8px;line-height:1.3;}
.herotext p{font-size:16px;margin:0;}
.mouseart{flex:1;height:100px;display:flex;align-items:center;justify-content:center;}
.mouse{width:70px;height:100px;background:#1a1a1a;border-radius:35px 35px 15px 15px;}
.grid{display:flex;flex-wrap:wrap;gap:12px;padding:20px 32px 0;}
.card{width:225px;}
.thumb{aspect-ratio:1/1;height:130px;background:#f5f5f5;margin-bottom:6px;}
.ptitle{font-size:16px;font-weight:500;margin-top:6px;}
.pprice{font-size:14px;color:#313131;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#313131;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#fff;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Vaxee</div>
<div class="navlinks"><div class="active">Mice</div><div class="inactive">Mousepads</div><div class="inactive">Accessories</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Precision hardware for competitive play.</h1>
<p>Esports mice engineered for millisecond decisions.</p>
</div>
<div class="mouseart"><div class="mouse"></div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#313131,#6b6b6b)"></div><div class="ptitle">XE Wireless</div><div class="pprice">$79.90</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#6b6b6b,#1a1a1a)"></div><div class="ptitle">Zygen NP-01</div><div class="pprice">$59.90</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a1a1a,#313131)"></div><div class="ptitle">Outset AX Symmetrical</div><div class="pprice">$69.90</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#9e9e9e,#313131)"></div><div class="ptitle">Speed Control Mousepad</div><div class="pprice">$24.90</div></div>
</div>
<div class="footer"><span>© Precision Esports Peripherals</span><span>Configurator · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.35; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.65; margin: 0; color: #32373c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #036248; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #036248;
border: 1px solid #036248; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.7; background: #ffffff; color: #111111;
border: 1px solid #c0c0c0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #32373c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #f2f2f2; color: #036248;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Trebuchet MS', sans-serif; background:#fafafa; color:#111111; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fff;border-bottom:1px solid #e5e5e5;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:600;color:#111;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.navlinks .active{color:#036248;}
.icons{display:flex;gap:14px;font-size:14px;color:#111;}
.hero{height:220px;background:#f2f2f2;display:flex;align-items:center;padding:0 32px;}
.herotext{width:420px;}
.jp{font-size:13px;color:#036248;margin-bottom:8px;}
.headline{font-size:34px;font-weight:700;line-height:1.25;letter-spacing:-0.3px;margin-bottom:10px;}
.sub{font-size:15px;color:#313131;margin-bottom:14px;}
.btn{display:inline-block;background:#036248;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.3px;padding:12px 24px;border-radius:8px;}
.stationery{margin-left:auto;width:280px;height:160px;position:relative;}
.book{position:absolute;width:130px;height:150px;background:linear-gradient(135deg,#036248,#004a59);border-radius:4px;top:5px;left:40px;box-shadow:0 6px 16px rgba(0,0,0,0.15);}
.book:before{content:'';position:absolute;left:10px;top:14px;right:10px;height:4px;background:rgba(255,255,255,0.35);}
.book:after{content:'';position:absolute;left:10px;top:26px;right:24px;height:4px;background:rgba(255,255,255,0.2);}
.pen{position:absolute;width:8px;height:120px;background:#4f917f;border-radius:4px;top:20px;left:190px;transform:rotate(18deg);}
.sec{padding:18px 32px;}
.bar{width:40px;height:3px;background:#036248;margin-bottom:8px;}
.sectitle{font-size:24px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:212px;background:#fcfcfc;border:1px solid #e5e5e5;border-radius:4px;padding:12px;}
.thumb{height:100px;border-radius:4px;margin-bottom:8px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#036248;color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;text-transform:uppercase;}
.title{font-size:14px;font-weight:600;}
.price{font-size:16px;font-weight:600;color:#313131;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Midori</div>
<div class="navlinks"><span class="active">Notebooks</span><span>Pens</span><span>Planners</span><span>Gifts</span></div>
<div class="icons">🔍 ♡ 🛒</div>
</div>
<div class="hero">
<div class="herotext">
<div class="jp">紙と、思考の道具</div>
<div class="headline">Made for the way you think.</div>
<div class="sub">Stationery built with the quiet discipline of Japanese craft.</div>
<div class="btn">Shop Notebooks</div>
</div>
<div class="stationery"><div class="book"></div><div class="pen"></div></div>
</div>
<div class="sec">
<div class="bar"></div>
<div class="sectitle">New This Season</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#036248,#4f917f)"><div class="badge">New</div></div><div class="title">MD Notebook A5 Lined</div><div class="price">$8.50</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4f917f,#036248)"></div><div class="title">Brass Bullet Pencil</div><div class="price">$32.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#036248,#004a59)"></div><div class="title">Traveler's Notebook Refill</div><div class="price">$11.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#004a59,#4f917f)"></div><div class="title">Cross Field Notebook</div><div class="price">$7.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #3a6e2f; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #ffffff; color: #3a6e2f;
border: 1px solid #3a6e2f; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1c1c1c;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e3ebe2; color: #3a6e2f;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c1c1c; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.util { height:36px; background:#3a6e2f; color:#ffffff; display:flex; align-items:center;
justify-content:center; font-size:12px; gap:6px; }
nav { height:64px; border-bottom:1px solid #dde3d8; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.logo { font-family:Georgia,serif; font-weight:700; font-size:20px; color:#3a6e2f; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; color:#1c1c1c; }
.navicons { display:flex; gap:16px; font-size:15px; color:#1c1c1c; }
main { display:flex; height:400px; }
.shot { width:300px; position:relative; padding:16px; }
.packet { position:relative; width:100%; height:100%; border-radius:8px; overflow:hidden;
background:linear-gradient(160deg,#fdf0e6,#f3f7f0); border:1px solid #dde3d8; }
.packet::before { content:''; position:absolute; left:20px; right:20px; top:30px; height:150px; border-radius:6px;
background:radial-gradient(circle at 40% 30%, #e07228, #b85a18 70%); }
.packet::after { content:''; position:absolute; left:36px; right:36px; top:190px; height:8px; border-radius:4px;
background:#3a6e2f; opacity:0.5; }
.badge-org { position:absolute; top:26px; left:26px; background:#3a6e2f; color:#fff; font-size:11px;
font-weight:700; letter-spacing:0.5px; text-transform:uppercase; border-radius:4px; padding:3px 8px; }
.info { flex:1; display:flex; flex-direction:column; padding:24px 32px; }
.crumb { font-size:12px; color:#6b6b6b; margin-bottom:8px; }
.name { font-family:Georgia,serif; font-size:26px; font-weight:700; letter-spacing:-0.2px; margin:0 0 8px; }
.stars { font-size:14px; color:#e07228; margin-bottom:10px; }
.stars span { color:#6b6b6b; font-size:13px; margin-left:6px; }
.price { font-size:20px; font-weight:700; margin-bottom:14px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px 14px; background:#f3f7f0;
border-radius:8px; padding:12px 14px; margin-bottom:14px; }
.g .l { font-size:11px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#6b6b6b; }
.g .v { font-size:13px; color:#1c1c1c; }
.badges { display:flex; gap:8px; margin-bottom:16px; }
.bd { font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; border-radius:4px; padding:3px 8px; color:#fff; }
.bd.heir { background:#6b3d2e; }
.bd.org { background:#3a6e2f; }
.bd.new { background:#e07228; }
.cta { margin-top:auto; display:flex; gap:12px; }
.btn-add { flex:1; background:#e07228; color:#fff; border:none; border-radius:8px; height:44px;
font-size:15px; font-weight:600; }
.btn-outline { padding:0 22px; height:44px; border-radius:8px; border:2px solid #3a6e2f; color:#3a6e2f;
background:#ffffff; font-size:15px; font-weight:600; }
.zone { margin:0 40px; background:#2c6a9a; color:#fff; border-radius:8px; padding:12px 16px; font-size:13px;
display:flex; align-items:center; justify-content:space-between; }
.zone input { border-radius:4px; border:1px solid #eef1eb; padding:6px 10px; font-size:12px; width:90px; }
footer { background:#1c1c1c; color:#eef1eb; padding:12px 40px; display:flex; justify-content:space-between;
align-items:center; font-size:12px; margin-top:12px; }
</style></head>
<body>
<div class="util">Free shipping on orders over $35 · Find your zone</div>
<nav>
<div class="logo">Burpee</div>
<div class="navlinks"><span>Vegetables</span><span>Flowers</span><span>Herbs</span><span>Garden Supplies</span></div>
<div class="navicons">⌕ ♡ ⛃</div>
</nav>
<main>
<div class="shot">
<div class="packet"><span class="badge-org">Organic</span></div>
</div>
<div class="info">
<div class="crumb">Vegetables / Tomatoes</div>
<h1 class="name">Brandywine Heirloom Tomato Seeds</h1>
<div class="stars">★★★★★ <span>4.9 (884 reviews)</span></div>
<div class="price">$5.95</div>
<div class="grid">
<div class="g"><div class="l">Days to Maturity</div><div class="v">85 days</div></div>
<div class="g"><div class="l">Sun Exposure</div><div class="v">Full Sun</div></div>
<div class="g"><div class="l">Hardiness Zone</div><div class="v">3–9</div></div>
</div>
<div class="badges"><span class="bd heir">Heirloom</span><span class="bd org">Organic</span><span class="bd new">New</span></div>
<div class="cta">
<button class="btn-add">Add to Cart</button>
<button class="btn-outline">Save</button>
</div>
</div>
</main>
<div class="zone">
<span>Find planting dates for your area</span>
<span style="display:flex;gap:8px;align-items:center;"><input type="text" placeholder="Zip code" readonly>Go</span>
</div>
<footer>
<span>© Burpee</span>
<span>150 YEARS OF GROWING · SUPPORT</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #181818;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #181818;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.2; letter-spacing: 0.03em; margin: 0; color: #181818; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #8c8c8c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.1em; background: #003399; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.1em; background: #ffffff; color: #181818;
border: 1px solid #003399; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #181818;
border: 1px solid #c5c5c5; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8c; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.4; background: #f6f6f6; color: #444444;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Akzidenz-Grotesk',Helvetica,Arial,sans-serif; color:#181818; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #e5e5e5;}
.logo{font-family:'Akzidenz-Grotesk-Extended',Helvetica,sans-serif;font-size:16px;letter-spacing:.08em;text-transform:uppercase;}
.navlinks{display:flex;gap:22px;font-size:13px;letter-spacing:.04em;}
.navlinks div:nth-child(1){color:#003399;}
.loc{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8c8c8c;}
.hero{height:230px;background:#181818;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:0 34px;}
.hero .sub{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#e0e0e0;margin-bottom:10px;}
.hero h1{font-family:'Akzidenz-Grotesk-Extended',Helvetica,sans-serif;font-size:44px;font-weight:400;letter-spacing:.03em;text-transform:uppercase;line-height:1.1;margin:0;}
.gridlabel{padding:16px 30px 0;font-family:'Akzidenz-Grotesk-Extended',Helvetica,sans-serif;font-size:13px;letter-spacing:.06em;text-transform:uppercase;border-top:1px solid #e5e5e5;padding-top:16px;}
.grid{display:flex;gap:20px;padding:12px 30px 0;}
.card{width:180px;}
.thumb{width:180px;height:216px;background:#f6f6f6;margin-bottom:8px;}
.artist{font-family:'Akzidenz-Grotesk-Extended',Helvetica,sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:0;}
.wtitle{font-size:12px;color:#8c8c8c;margin-top:2px;}
.edition{font-family:'Fira Code','JetBrains Mono',monospace;font-size:11px;color:#444444;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:96px;background:#181818;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Perrotin</div>
<div class="navlinks"><div>Exhibitions</div><div>Artists</div><div>News</div><div>Fairs</div></div>
<div class="loc">Paris — New York — Seoul</div>
</div>
<div class="hero">
<div class="sub">Current Exhibition</div>
<h1>Chromatic Silence</h1>
</div>
<div class="gridlabel">Available Works</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="artist">Mira Aldous</div><div class="wtitle">Untitled Composition</div><div class="edition">Ed. 5/30</div></div>
<div class="card"><div class="thumb" style="background:#e0e0e0;"></div><div class="artist">Theo Vantel</div><div class="wtitle">Field Study No. 4</div><div class="edition">Unique, 60×80cm</div></div>
<div class="card"><div class="thumb" style="background:#f2f2f2;"></div><div class="artist">Sun-hee Baek</div><div class="wtitle">Interior Weather</div><div class="edition">Ed. 12/50</div></div>
</div>
<div class="footer"><span>© Perrotin — Contemporary Art</span><span>Newsletter Legal Contact</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ff580d; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #f9f9f9; color: #121212;
border: 1px solid #ff580d; border-radius: 9999px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #121212;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #899df1; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f9f9; font-family:Arial,'Helvetica Neue',sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:56px;background:#34343d;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:18px;font-weight:900;color:#dedede;letter-spacing:0.3px;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#dedede;}
.search{width:220px;height:32px;border-radius:9999px;background:#fff;font-size:11px;color:#777777;display:flex;align-items:center;padding:0 14px;}
.hero{background:#e3dacc;padding:22px 32px;}
.hero h1{font-size:22px;font-weight:700;margin:0 0 4px;}
.hero p{font-size:13px;color:#34343d;margin:0;}
.grid{display:flex;gap:14px;padding:18px 32px 0;flex-wrap:wrap;}
.card{width:135px;background:#f2f2f2;border-radius:8px;overflow:hidden;position:relative;}
.thumb{height:190px;background:#ddd3c2;}
.badgenew{position:absolute;top:8px;left:8px;background:#899df1;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:2px 8px;border-radius:4px;}
.badgesale{position:absolute;top:8px;left:8px;background:#ff580d;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:2px 8px;border-radius:4px;}
.ptitle{font-size:14px;font-weight:600;padding:8px 8px 0;}
.pmeta{font-size:11px;color:#777777;padding:2px 8px 0;}
.pprice{font-size:16px;font-weight:700;color:#ff580d;padding:4px 8px 8px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#34343d;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#dedede;font-size:11px;}
.footer span{margin-left:14px;color:#aaaaaa;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Orbit Dvd</div>
<div class="navlinks"><div>New Releases</div><div>Genres ▾</div><div>4K/Blu-ray</div><div>Sale</div></div>
<div class="search">Search titles...</div>
</div>
<div class="hero">
<h1>This Week's New Releases</h1>
<p>Boutique 4K and Blu-ray, curated like a real video store.</p>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e3dacc,#34343d)"></div><div class="badgenew">New</div><div class="ptitle">Nightshift</div><div class="pmeta">2024 · Dir. Reyes</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#ddd3c2,#ad9173)"></div><div class="badgesale">Sale</div><div class="ptitle">The Long Take</div><div class="pmeta">2019 · Dir. Kowalski</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e8e1d6,#baa98f)"></div><div class="ptitle">Static Bloom</div><div class="pmeta">2021 · Dir. Adeyemi</div><div class="pprice">$19.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#baa98f,#34343d)"></div><div class="badgenew">New</div><div class="ptitle">Salt Water Town</div><div class="pmeta">2023 · Dir. Lindqvist</div><div class="pprice">$27.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e3dacc,#ad9173)"></div><div class="ptitle">Concrete Hymn</div><div class="pmeta">2017 · Dir. Marchetti</div><div class="pprice">$16.99</div></div>
</div>
<div class="footer"><span>© Boutique Home Video</span><span>Shipping<span> About<span> Contact</span></span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f6f2; color: #20211a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f6f2; color: #20211a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #20211a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #0868d5; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f5f6f2; color: #20211a;
border: 1px solid #0868d5; border-radius: 4px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f5f6f2; color: #313130;
border: 1px solid #c0c1bc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fed134; color: #20211a;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f6f2; font-family:'Helvetica Neue',Arial,sans-serif; color:#313130; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#f5f6f2;}
.logo{font-size:20px;font-weight:700;color:#20211a;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0.3px;}
.search{width:170px;height:40px;border-radius:9999px;background:#eeeeee;font-size:12px;color:#767676;display:flex;align-items:center;padding:0 16px;}
.hero{height:180px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#f5f6f2;}
.hero h1{font-size:34px;font-weight:700;letter-spacing:-0.5px;color:#20211a;margin:0 0 10px;}
.hero p{font-size:14px;color:#767676;margin:0 0 16px;}
.cta{display:inline-block;background:#0868d5;color:#fff;font-size:15px;font-weight:600;text-transform:uppercase;padding:12px 28px;border-radius:4px;}
.tilerow{display:flex;gap:16px;padding:0 32px;}
.tile{flex:1;height:70px;background:#eeeeee;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500;color:#20211a;}
.rowlabel{padding:18px 32px 12px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;color:#767676;}
.grid{display:flex;gap:16px;padding:0 32px;}
.card{width:206px;background:#fff;border-radius:8px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#20211a;border-radius:4px;padding:2px 8px;z-index:2;background:#fed134;}
.thumb{height:110px;border-radius:8px 8px 0 0;background:#eeeeee;}
.body{padding:10px 12px 14px;}
.title{font-size:16px;font-weight:500;color:#20211a;}
</style>
<div class="nav">
<div class="logo">Made IN</div>
<div class="navlinks"><span>Carbon Steel</span><span>Stainless</span><span>Knives</span></div>
<div class="search">Search...</div>
</div>
<div class="hero">
<h1>Cookware for the working kitchen.</h1>
<p>Restaurant-grade, sold direct — built to season, not to shine.</p>
<div class="cta">Shop Now</div>
</div>
<div class="tilerow">
<div class="tile" style="background:linear-gradient(135deg,#eeeeee,#7d8b83);">Carbon Steel</div>
<div class="tile" style="background:linear-gradient(135deg,#eeeeee,#20211a);">Stainless Clad</div>
<div class="tile" style="background:linear-gradient(135deg,#eeeeee,#0868d5);">Knives</div>
</div>
<div class="rowlabel">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge">Best Seller</span><div class="thumb" style="background:linear-gradient(135deg,#4d4d48,#20211a);"></div><div class="body"><div class="title">Carbon Steel Wok</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7d8b83,#4d4d48);"></div><div class="body"><div class="title">10in Stainless Pan</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#20211a,#0868d5);"></div><div class="body"><div class="title">Chef's Knife 8in</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #727272; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffc20e; color: #212121;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #003b78;
border: 1px solid #ffc20e; border-radius: 4px;
padding: 9px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #212121;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #727272; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #f2f2f2; color: #555555;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Fluke Corporation Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Noto Sans',Arial,Verdana,sans-serif; background:#ffffff; color:#212121; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; position:relative; display:flex; flex-direction:column; }
.topbar { background:#003b78; color:#fff; font-size:11px; padding:5px 24px; display:flex; justify-content:space-between; letter-spacing:.3px; }
.nav { background:#212121; padding:0 24px; height:56px; display:flex; align-items:center; justify-content:space-between; border-bottom:3px solid #ffc20e; }
.logo { font-weight:700; font-size:20px; color:#fff; letter-spacing:-.5px; }
.logo b { color:#ffc20e; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; color:#dfe2e8; }
.navlinks span.active { color:#ffc20e; }
.navcta { background:#ffc20e; color:#212121; font-weight:700; font-size:12px; padding:8px 16px; border-radius:2px; }
.megawrap { position:relative; }
.mega { position:absolute; top:56px; left:0; width:300px; background:#242a37; color:#fff; padding:14px 16px; font-size:12px; z-index:5; border-top:2px solid #ffc20e; }
.mega .cat { padding:6px 0; border-bottom:1px solid #434b5c; color:#c7cddb; }
.mega .cat b { color:#fff; }
.hero { display:flex; height:250px; background:#f2f2f2; border-bottom:1px solid #c4ccda; }
.hero-copy { flex:1.1; padding:34px 40px; display:flex; flex-direction:column; justify-content:center; }
.eyebrow { color:#336699; font-weight:700; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:8px; }
.hero h1 { font-size:34px; font-weight:700; letter-spacing:-.5px; margin:0 0 10px; color:#212121; line-height:1.15; }
.hero p { font-size:14px; color:#555; max-width:420px; line-height:1.5; margin:0 0 16px; }
.btnrow { display:flex; gap:10px; }
.btn-primary { background:#ffc20e; color:#212121; font-weight:700; font-size:13px; padding:10px 20px; border-radius:2px; }
.btn-outline { border:1.5px solid #003b78; color:#003b78; font-weight:700; font-size:13px; padding:9px 18px; border-radius:2px; }
.hero-visual { flex:1; position:relative; background:linear-gradient(135deg,#003b78,#264d73); display:flex; align-items:center; justify-content:center; }
.meter { width:150px; height:170px; background:#32394a; border-radius:8px; position:relative; box-shadow:0 12px 30px rgba(0,0,0,.35); border:2px solid #ffc20e; }
.meter .screen { position:absolute; top:16px; left:14px; right:14px; height:56px; background:#212121; border-radius:2px; display:flex; align-items:center; justify-content:center; color:#3fa21c; font-family:monospace; font-size:22px; font-weight:700; }
.meter .dial { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); width:70px; height:70px; border-radius:50%; background:#242a37; border:5px solid #ffc20e; }
.strip { display:flex; background:#212121; height:34px; align-items:center; padding:0 24px; gap:18px; }
.status { display:flex; align-items:center; gap:6px; font-size:11px; color:#c7cddb; }
.dot { width:9px; height:9px; border-radius:50%; }
.body { flex:1; display:flex; }
.sidebar { width:190px; background:#32394a; color:#c7cddb; padding:16px 14px; font-size:11px; }
.sidebar h4 { color:#fff; font-size:12px; text-transform:uppercase; letter-spacing:.5px; margin:0 0 10px; border-bottom:1px solid #434b5c; padding-bottom:8px; }
.facet { display:flex; justify-content:space-between; padding:5px 0; color:#a7a7a7; }
.facet.on { color:#ffc20e; }
.grid { flex:1; padding:18px 22px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; background:#fff; }
.card { border:1px solid #d0d0d0; border-radius:2px; padding:12px; display:flex; flex-direction:column; background:#fff; }
.card .imgbox { height:80px; background:#ededed; border-radius:2px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; position:relative; }
.card .imgbox .body-block { width:42px; height:56px; background:#264d73; border-radius:4px; border:2px solid #ffc20e; }
.card .cert { position:absolute; top:4px; left:4px; font-size:8px; background:#3fa21c; color:#fff; padding:1px 4px; border-radius:1px; font-weight:700; }
.card .name { font-size:12.5px; font-weight:600; color:#212121; margin-bottom:3px; }
.card .spec { font-size:10px; color:#727272; margin-bottom:6px; }
.card .pricerow { display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
.card .price { font-weight:700; font-size:14px; color:#212121; }
.card .buy { background:#ffc20e; color:#212121; font-size:10px; font-weight:700; padding:5px 9px; border-radius:2px; }
</style>
<div class="page">
<div class="topbar"><span>PROFESSIONAL & INDUSTRIAL TEST TOOLS</span><span>Support · Calibration · Distributors</span></div>
<div class="nav">
<div class="logo">Fluke Corporation</div>
<div class="navlinks"><span class="active">Meters & Testers</span><span>Thermal Imaging</span><span>Calibration</span><span>Software</span><span>Industries</span></div>
<div class="navcta">Get a Quote</div>
</div>
<div class="megawrap"><div class="mega">
<div class="cat"><b>Clamp Meters</b></div>
<div class="cat"><b>Digital Multimeters</b></div>
<div class="cat"><b>Insulation Testers</b> · CAT III/IV</div>
</div></div>
<div class="hero">
<div class="hero-copy">
<div class="eyebrow">New — Series 3000 Platform</div>
<h1>Readings you can stake<br>a shutdown on.</h1>
<p>Handheld multimeters through industrial power analyzers, built to the same display-contrast standard that keeps a misread voltage from becoming an incident report.</p>
<div class="btnrow"><div class="btn-primary">Shop Multimeters</div><div class="btn-outline">Download Datasheet</div></div>
</div>
<div class="hero-visual"><div class="meter"><div class="screen">417.2V</div><div class="dial"></div></div></div>
</div>
<div class="strip">
<div class="status"><span class="dot" style="background:#ffc20e"></span>CAUTION · CAT IV 600V</div>
<div class="status"><span class="dot" style="background:#3fa21c"></span>OK · Calibration Current</div>
<div class="status"><span class="dot" style="background:#e03d3d"></span>FAULT · Overload Protected</div>
</div>
<div class="body">
<div class="sidebar">
<h4>Filter Facets</h4>
<div class="facet on">CAT Rating: IV<span>✓</span></div>
<div class="facet">Voltage Range</div>
<div class="facet">True RMS</div>
<div class="facet">Bluetooth</div>
<div class="facet">ATEX Certified</div>
<h4 style="margin-top:16px;">Industries</h4>
<div class="facet">Electrical</div>
<div class="facet">HVAC/R</div>
<div class="facet">Aerospace</div>
</div>
<div class="grid">
<div class="card"><div class="imgbox"><div class="body-block"></div><span class="cert">CE</span></div><div class="name">Fluke 87V MAX</div><div class="spec">True-RMS · CAT IV 600V</div><div class="pricerow"><span class="price">$509.00</span><span class="buy">Add</span></div></div>
<div class="card"><div class="imgbox"><div class="body-block"></div><span class="cert">CAT III</span></div><div class="name">Fluke 376 FC</div><div class="spec">Clamp Meter · Bluetooth</div><div class="pricerow"><span class="price">$639.00</span><span class="buy">Add</span></div></div>
<div class="card"><div class="imgbox"><div class="body-block"></div><span class="cert">ATEX</span></div><div class="name">Fluke Ti300+</div><div class="spec">Thermal Imager · 320x240</div><div class="pricerow"><span class="price">$5,999.00</span><span class="buy">Add</span></div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffef9; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffef9; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -0.1px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #113988; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #fffef9; color: #113988;
border: 1px solid #113988; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fffef9; color: #121212;
border: 1px solid #c4c3bf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.35px; background: #aec9e3; color: #113988;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#fffef9; font-family:'Segoe UI',Arial,sans-serif; color:#173a63; font-weight:400;
}
*{box-sizing:border-box;}
.nav{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #f0ecdf;}
.logo{font-size:19px;font-weight:600;color:#113988;}
.navlinks{display:flex;gap:26px;font-size:13px;color:#3b5a86;font-weight:400;}
.pill-btn{background:#113988;color:#fff;border-radius:999px;padding:11px 22px;font-size:12px;font-weight:600;}
.hero{display:flex;padding:26px 34px 18px;gap:30px;align-items:center;}
.hero-copy{width:400px;}
.hero-eyebrow{display:inline-block;background:#aec9e3;color:#0e2c56;font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:5px 12px;border-radius:999px;font-weight:600;margin-bottom:14px;}
.hero-title{font-size:34px;font-weight:600;line-height:1.15;color:#0e2c56;margin-bottom:12px;}
.hero-sub{font-size:14px;line-height:1.6;color:#456;margin-bottom:18px;max-width:340px;}
.hero-visual{flex:1;height:210px;border-radius:24px;background:linear-gradient(135deg,#e0a6bc 0%,#74d1f6 100%);position:relative;overflow:hidden;}
.bubble{position:absolute;border-radius:50%;background:rgba(255,255,255,0.55);}
.b1{width:90px;height:90px;top:20px;left:40px;}
.b2{width:50px;height:50px;bottom:30px;right:80px;}
.b3{width:34px;height:34px;top:60px;right:40px;background:rgba(17,57,136,0.25);}
.sub-toggle{display:inline-flex;background:#f3ede4;border-radius:999px;padding:3px;font-size:11px;margin-top:4px;}
.sub-toggle span{padding:6px 14px;border-radius:999px;}
.sub-toggle .on{background:#113988;color:#fff;font-weight:600;}
.sub-toggle .off{color:#7a8ba6;}
.section{padding:8px 34px 0;}
.section-title{font-size:17px;font-weight:600;color:#0e2c56;margin-bottom:14px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{background:#fff;border:1px solid #f0ecdf;border-radius:12px;padding:14px;}
.card-img{height:88px;border-radius:8px;margin-bottom:10px;background:linear-gradient(160deg,#cfe3f5,#aec9e3);position:relative;}
.leaf{position:absolute;width:28px;height:40px;border-radius:0 60% 0 60%;background:#8fc7a0;top:24px;left:50%;transform:translateX(-50%);}
.card-name{font-size:12.5px;font-weight:600;color:#173a63;margin-bottom:4px;}
.card-desc{font-size:10.5px;color:#7a8ba6;margin-bottom:8px;}
.badges{display:flex;gap:6px;margin-bottom:8px;}
.badge{font-size:8.5px;letter-spacing:.5px;text-transform:uppercase;font-weight:600;padding:3px 8px;border-radius:999px;}
.badge.eco{background:#aec9e3;color:#0e2c56;}
.badge.trust{background:#e0a6bc;color:#5c1f38;}
.card-price{font-size:13px;font-weight:600;color:#113988;}
</style>
<div class="nav">
<div class="logo">Earth Breeze</div>
<div class="navlinks"><span>Laundry</span><span>Dish</span><span>Surface</span><span>Bundles</span><span>Our Mission</span></div>
<div class="pill-btn">Subscribe & Save</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="hero-eyebrow">Plastic-Free Since Day One</div>
<div class="hero-title">Cleaning that feels like self-care.</div>
<div class="hero-sub">Tree-free laundry sheets, dish bars, and surface sprays — zero plastic jugs, zero harsh chemicals.</div>
<div class="sub-toggle"><span class="on">Subscribe</span><span class="off">One-Time</span></div>
</div>
<div class="hero-visual">
<div class="bubble b1"></div><div class="bubble b2"></div><div class="bubble b3"></div>
</div>
</div>
<div class="section">
<div class="section-title">Bestselling Essentials</div>
<div class="grid">
<div class="card"><div class="card-img"><div class="leaf"></div></div><div class="card-name">Laundry Detergent Sheets</div><div class="card-desc">Fresh Linen · 60 loads</div><div class="badges"><span class="badge eco">Eco Cert</span><span class="badge trust">Vegan</span></div><div class="card-price">$19.99</div></div>
<div class="card"><div class="card-img"><div class="leaf"></div></div><div class="card-name">Dish Soap Bar</div><div class="card-desc">Lemon Verbena · Zero waste</div><div class="badges"><span class="badge eco">Eco Cert</span></div><div class="card-price">$8.99</div></div>
<div class="card"><div class="card-img"><div class="leaf"></div></div><div class="card-name">All-Purpose Cleaner</div><div class="card-desc">Refillable glass bottle</div><div class="badges"><span class="badge trust">Non-Toxic</span></div><div class="card-price">$14.99</div></div>
<div class="card"><div class="card-img"><div class="leaf"></div></div><div class="card-name">Starter Bundle</div><div class="card-desc">4-piece essentials kit</div><div class="badges"><span class="badge eco">Eco Cert</span><span class="badge trust">Vegan</span></div><div class="card-price">$44.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #181b34; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #181b34;
border: 1px solid #181b34; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dadbdf; color: #181b34;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#323338; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.head { height:60px; display:flex; align-items:center; padding:0 22px; gap:12px; }
.head .dot { width:12px; height:12px; border-radius:50%; background:#0073EA; }
.head .title { font-size:22px; font-weight:800; letter-spacing:-0.3px; }
.head .spacer { flex:1; }
.fab { width:40px; height:40px; border-radius:50%; background:#0073EA; color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow:0 8px 20px rgba(0,115,234,0.45); }
.views { display:flex; gap:20px; padding:0 22px 10px; border-bottom:1px solid #E6E9F0; }
.views span { font-size:13px; font-weight:600; color:#676879; padding-bottom:9px; }
.views span.active { color:#323338; border-bottom:2.5px solid #0073EA; }
.board { padding:14px 0 0; }
.group { padding:0 0 6px; }
.ghead { display:flex; align-items:center; gap:8px; padding:10px 22px 6px; }
.ghead .caret { font-size:12px; }
.ghead .gname { font-size:20px; font-weight:800; }
.ghead .count { font-size:12px; color:#9699A6; font-weight:500; }
.row { height:44px; display:flex; align-items:center; border-bottom:1px solid #E6E9F0; }
.stripe { width:6px; height:100%; flex-shrink:0; }
.itemname { flex:1; font-size:14px; font-weight:500; padding:0 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.person { width:26px; height:26px; border-radius:50%; margin-right:14px; flex-shrink:0; }
.cell { width:118px; height:28px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; margin-right:8px; text-transform:uppercase; flex-shrink:0; }
.cell.navy { background:#333D6E; }
.cell.green { background:#00C875; }
.cell.orange { background:#FDAB3D; }
.cell.red { background:#E2445C; }
.datecell { width:78px; font-size:13px; color:#676879; margin-right:16px; text-align:right; flex-shrink:0; }
.g1 .stripe, .g1 .ghead .gname { color:#0073EA; }
.g1 .stripe { background:#0073EA; }
.g2 .stripe { background:#A25DDC; }
.g2 .ghead .gname { color:#A25DDC; }
.battery { margin:8px 22px 4px; height:24px; border-radius:4px; overflow:hidden; display:flex; }
.battery span { height:100%; }
</style></head>
<body>
<div class="head"><div class="dot"></div><div class="title">monday.com (iOS)</div><div class="spacer"></div><div class="fab">+</div></div>
<div class="views"><span class="active">Main Table</span><span>Kanban</span><span>Timeline</span><span>Calendar</span><span>Chart</span></div>
<div class="board">
<div class="group g1">
<div class="ghead"><span class="caret">▾</span><span class="gname">This week</span><span class="count">4 items</span></div>
<div class="row"><div class="stripe"></div><div class="itemname">Redesign onboarding flow</div><div class="person" style="background:#579BFC"></div><div class="cell green">Done</div><div class="cell" style="background:#FFCB00;color:#323338">High</div><div class="datecell">Sep 3</div></div>
<div class="row"><div class="stripe"></div><div class="itemname">API contract review</div><div class="person" style="background:#FF158A"></div><div class="cell orange">Working</div><div class="cell navy">Med</div><div class="datecell">Sep 6</div></div>
<div class="row"><div class="stripe"></div><div class="itemname">Fix checkout bug</div><div class="person" style="background:#9CD326"></div><div class="cell red">Stuck</div><div class="cell red">Urgent</div><div class="datecell">Sep 5</div></div>
<div class="battery"><span style="width:50%;background:#00C875"></span><span style="width:25%;background:#FDAB3D"></span><span style="width:25%;background:#E2445C"></span></div>
</div>
<div class="group g2">
<div class="ghead"><span class="caret">▾</span><span class="gname">Next sprint</span><span class="count">2 items</span></div>
<div class="row"><div class="stripe"></div><div class="itemname">Design system audit</div><div class="person" style="background:#00D2D2"></div><div class="cell navy">Not started</div><div class="cell navy">Low</div><div class="datecell">Sep 12</div></div>
<div class="row"><div class="stripe"></div><div class="itemname">Partner integration</div><div class="person" style="background:#A25DDC"></div><div class="cell navy">Not started</div><div class="cell navy">Med</div><div class="datecell">Sep 15</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #bc0000; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #fafafa; color: #222222;
border: 1px solid #bc0000; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #222222;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #bc0000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Electric And Rose</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#fafafa; color:#222222; font-family:'Times New Roman',Times,serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e5e5e5; }
.logo { font-family:'Arapey','Times New Roman',serif; font-size:22px; }
.navlinks { display:flex; gap:26px; font-family:'Arapey',serif; font-size:16px; }
.navlinks span.on { color:#bc0000; }
.cart { border:1px solid #d5d5d5; padding:10px 18px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; font-weight:700; }
.hero { background:#faf4e8; padding:36px 32px; text-align:center; }
.hero h1 { font-family:'Arapey',serif; font-size:44px; margin:0 0 12px; letter-spacing:-.3px; font-style:italic; }
.hero p { font-size:14px; color:#808080; margin:0 auto 18px; max-width:400px; }
.hero-cta { display:inline-block; background:#bc0000; color:#fff; padding:14px 30px; font-size:12px;
text-transform:uppercase; letter-spacing:1px; font-weight:700; }
.strip { display:flex; gap:2px; height:170px; }
.panel { flex:1; position:relative; }
.p1 { background:linear-gradient(160deg,#fdd0d0,#bc0000); }
.p2 { background:linear-gradient(160deg,#f9d3d3,#ffeae8); }
.p3 { background:linear-gradient(160deg,#e5fff8,#007f5f); }
.p4 { background:linear-gradient(160deg,#faf4e8,#d5d5d5); }
.tag { position:absolute; top:10px; left:10px; background:#bc0000; color:#fff; font-size:10px; text-transform:uppercase;
letter-spacing:.5px; padding:3px 8px; font-weight:700; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; padding-top:2px; }
.card { background:#fff; padding:14px 12px; }
.card .name { font-family:'Arapey',serif; font-size:16px; margin:0 0 6px; }
.card .price { font-size:14px; color:#313131; }
</style></head>
<body>
<nav>
<div class="logo">Electric And Rose</div>
<div class="navlinks"><span class="on">New</span><span>Bottoms</span><span>Tops</span><span>Sale</span></div>
<div class="cart">Bag (0)</div>
</nav>
<div class="hero">
<h1>Coastal ease, everyday</h1>
<p>Sun-bleached basics with a red-hot signature — built for the beach and beyond.</p>
<div class="hero-cta">Shop The Edit</div>
</div>
<div class="strip">
<div class="panel p1"><span class="tag">Sale</span></div>
<div class="panel p2"></div>
<div class="panel p3"><span class="tag" style="background:#007f5f">Eco</span></div>
<div class="panel p4"></div>
</div>
<div class="grid">
<div class="card"><p class="name">Bardot Rib Tank</p><p class="price">$68</p></div>
<div class="card"><p class="name">Wide Leg Beach Pant</p><p class="price">$118</p></div>
<div class="card"><p class="name">Cropped Zip Hoodie</p><p class="price">$98</p></div>
<div class="card"><p class="name">Rose Terry Short</p><p class="price">$64</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A18;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A18;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #1A1A18; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #7A7A76; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.1em; background: #3B5234; color: #FFFFFF;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.1em; background: #FFFFFF; color: #1A1A18;
border: 1px solid #3B5234; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A18;
border: 1px solid #c6c6c5; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7A7A76; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: 0.03em; background: #F8F6F2; color: #3D3D3B;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Georgia,'Times New Roman',serif; color:#1A1A18; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #E0DDD8;font-family:Arial,sans-serif;}
.logo{font-family:Georgia,serif;font-size:20px;letter-spacing:.5px;}
.navlinks{display:flex;gap:24px;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:#1A1A18;}
.hero{height:340px;display:flex;}
.herotext{width:44%;padding:0 40px;display:flex;flex-direction:column;justify-content:center;}
h1{font-size:34px;font-weight:400;margin:0 0 16px;line-height:1.3;}
.sub{font-family:Arial,sans-serif;font-size:13px;color:#5a5a56;margin:0 0 22px;max-width:280px;letter-spacing:.2px;}
.cta{font-family:Arial,sans-serif;display:inline-block;background:#3B5234;color:#fff;font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:14px 30px;width:fit-content;}
.heroimg{width:56%;position:relative;background:#f4f2ee;overflow:hidden;}
.plant{position:absolute;left:120px;bottom:0;width:6px;height:200px;background:#3B5234;}
.leaf{position:absolute;border-radius:0 100% 0 100%;background:#3B5234;}
.l1{width:70px;height:40px;left:90px;top:60px;}
.l2{width:60px;height:34px;left:150px;top:90px;transform:scaleX(-1);}
.l3{width:50px;height:30px;left:100px;top:130px;}
.pot{position:absolute;left:100px;bottom:0;width:100px;height:70px;background:#C8B99A;}
.sec{padding:26px 40px 0;font-family:Arial,sans-serif;}
.sectitle{font-size:17px;font-weight:400;font-family:Georgia,serif;margin-bottom:16px;}
.grid{display:flex;gap:20px;}
.card{width:200px;}
.thumb{height:120px;background:#f4f2ee;margin-bottom:10px;}
.pname{font-family:Georgia,serif;font-size:14px;margin-bottom:4px;}
.pprice{font-size:12px;color:#5a5a56;}
</style>
<div class="nav">
<div class="logo">Leon And George</div>
<div class="navlinks"><span>Plants</span><span>Pots</span><span>Care</span><span>Journal</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>A quiet specimen, considered.</h1>
<div class="sub">Delivered to your door the way a shelter magazine would frame a still life.</div>
<div class="cta">Discover the Collection</div>
</div>
<div class="heroimg"><div class="pot"></div><div class="plant"></div><div class="leaf l1"></div><div class="leaf l2"></div><div class="leaf l3"></div></div>
</div>
<div class="sec">
<div class="sectitle">The Collection</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="pname">Fiddle Leaf Fig</div><div class="pprice">$185</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Olive Tree, Potted</div><div class="pprice">$165</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Stoneware Planter</div><div class="pprice">$95</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6b6d6f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #e2231a; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #231f20;
border: 1px solid #e2231a; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #231f20;
border: 1px solid #c8c7c7; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6d6f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 1.2px; background: #e2231a; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Kamado Joe Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#231f20; }
*{box-sizing:border-box;}
.announce{background:#e2231a;color:#fff;font-size:11px;text-align:center;padding:6px;}
.nav{height:56px;background:#343738;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-weight:700;font-size:19px;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;color:#fff;}
.icons{color:#fff;}
.hero{background:#121212;color:#fff;padding:26px 36px;display:flex;align-items:center;justify-content:space-between;}
.hero-text h1{font-size:32px;font-weight:700;line-height:1.1;letter-spacing:-.4px;margin:0 0 10px;}
.hero-text p{font-size:14px;color:#c9c9c9;max-width:340px;margin:0 0 16px;}
.btn{display:inline-block;background:#e2231a;color:#fff;padding:14px 30px;border-radius:4px;font-size:14px;font-weight:600;}
.hero-art{width:190px;height:130px;border-radius:4px;background:radial-gradient(circle at 40% 40%,#e2231a,#4a1c18 70%);}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px 36px;}
.card{background:#fff;border:1px solid #dedede;border-radius:8px;overflow:hidden;}
.imgbox{height:96px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#e2231a;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:4px 8px;border-radius:4px;}
.badge.dark{background:#343738;}
.body{padding:10px 12px 12px;}
.title{font-size:14px;font-weight:600;}
.price{font-size:16px;font-weight:700;margin-top:4px;}
</style>
<div class="announce">🔥 FREE SHIPPING ON ALL GRILLS — LIMITED TIME</div>
<div class="nav">
<div class="logo">Kamado Joe</div>
<div class="navlinks"><span>Grills</span><span>Accessories</span><span>Recipes</span><span>Compare</span></div>
<div class="icons">◎ ⛃</div>
</div>
<div class="hero">
<div class="hero-text">
<h1>The Ultimate<br>Ceramic Grill.</h1>
<p>Precision air-control, cast-iron hardware, and the glowing red glaze that started it all.</p>
<div class="btn">Shop Grills</div>
</div>
<div class="hero-art"></div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#e2b0a8,#e2231a);"><div class="badge">Sale</div></div>
<div class="body"><div class="title">Kamado Joe Classic III</div><div class="price">$1,999</div></div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#d8d8d8,#343738);"><div class="badge dark">New</div></div>
<div class="body"><div class="title">Kamado Joe Big Joe III</div><div class="price">$2,599</div></div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#e5e5e5,#6b6d6f);"></div>
<div class="body"><div class="title">Cast Iron Half Moon Grate</div><div class="price">$79.99</div></div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#efefef,#a5a5a5);"></div>
<div class="body"><div class="title">Joe Jr. Portable Grill</div><div class="price">$449</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e9e9e8; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e9e9e8; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6e7075; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #ad1519; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #e9e9e8; color: #121212;
border: 1px solid #ad1519; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #b3b3b2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e7075; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #fabd00; color: #121212;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#e9e9e8; color:#3a3a3a; box-sizing:border-box;
font-family:'Manrope',sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#121212; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:20px; font-weight:700; color:#fff; letter-spacing:-1px; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.navlinks span.active { color:#fabd00; }
.navlinks span:not(.active) { color:#fff; }
.search-pill { width:180px; height:34px; border-radius:9999px; background:#fff; font-size:12px; color:#3a3a3a;
display:flex; align-items:center; padding:0 16px; }
.catstrip { display:flex; gap:10px; padding:12px 32px; background:#e9e9e8; }
.cat-pill { padding:8px 18px; border-radius:9999px; font-size:13px; font-weight:600; }
.cat-pill.active { background:#121212; color:#fff; }
.cat-pill:not(.active) { background:#f0f2f3; color:#3a3a3a; }
.hero { height:200px; background:#121212; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; right:-40px; top:-40px; width:200px; height:200px; border-radius:50%; background:#ad1519; opacity:.5; }
.hero-inner { position:relative; z-index:2; }
.hero h1 { color:#fff; font-size:40px; font-weight:700; letter-spacing:-1.5px; line-height:1.05; margin:0 0 14px; max-width:420px; }
.btn-red { display:inline-block; background:#ad1519; color:#fff; font-size:16px; font-weight:600; letter-spacing:0.25px;
padding:14px 30px; border-radius:9999px; }
.board { position:relative; z-index:2; width:60px; height:170px; border-radius:30px; background:linear-gradient(180deg,#fabd00,#ad1519); }
.grid { display:flex; gap:14px; padding:16px 32px 0; }
.card { flex:1; background:#ffffff; border-radius:12px; padding:12px; position:relative; }
.card .art { height:82px; background:#f0f2f3; border-radius:12px; margin-bottom:8px; }
.badge { position:absolute; top:10px; left:10px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
padding:4px 8px; border-radius:8px; color:#fff; }
.badge.new { background:#ad1519; }
.badge.sale { background:#de0000; }
.badge.yellow { background:#fabd00; color:#121212; }
.card .name { font-size:16px; font-weight:600; color:#121212; margin-bottom:4px; }
.card .price { font-size:14px; color:#3a3a3a; }
footer { position:absolute; bottom:0; left:0; right:0; height:88px; background:#121212; color:#d0cecb; display:flex;
align-items:center; justify-content:space-between; padding:0 32px; }
footer .col { font-size:12px; line-height:1.9; }
footer .col b { display:block; color:#fff; margin-bottom:3px; }
.wrap { position:relative; height:640px; }
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="brand">Dope Snow</div>
<div class="navlinks"><span class="active">Men's</span><span>Women's</span><span>Boards</span><span>Accessories</span></div>
<div class="search-pill">Search the drop...</div>
</nav>
<div class="catstrip">
<div class="cat-pill active">All</div><div class="cat-pill">Snowboards</div><div class="cat-pill">Outerwear</div><div class="cat-pill">Goggles</div>
</div>
<div class="hero">
<div class="hero-inner">
<h1>Ride loud.<br>After‑ski, louder.</h1>
<a class="btn-red">Shop the Drop</a>
</div>
<div class="board"></div>
</div>
<div class="grid">
<div class="card"><span class="badge new">New</span><div class="art"></div><div class="name">Blackout Snowboard 156</div><div class="price">$389.00</div></div>
<div class="card"><span class="badge sale">Sale</span><div class="art"></div><div class="name">Nightlift Shell Jacket</div><div class="price">$249.00</div></div>
<div class="card"><div class="art"></div><div class="name">Ridge Line Beanie</div><div class="price">$28.00</div></div>
<div class="card"><span class="badge yellow">Hot</span><div class="art"></div><div class="name">Voltage Goggles</div><div class="price">$149.00</div></div>
</div>
<footer>
<div class="col"><b>Shop</b>Boards<br>Outerwear</div>
<div class="col"><b>Company</b>About<br>Ambassadors</div>
<div class="col"><b>Dope Snow</b>© Mountain-town loud.</div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00dc64; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00dc64; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096c36; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00dc64; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00dc64; color: #111111;
border: 1px solid #03bc57; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096c36; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29e27d; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; height:100%; }
/* left rail: search + creator entry, black on white */
nav.top { position:absolute; top:0; left:0; right:0; height:56px; display:flex; align-items:center;
justify-content:space-between; padding:0 28px; border-bottom:1px solid #ececec; z-index:5; background:#fff; }
.brand { font-size:19px; font-weight:700; letter-spacing:-0.3px; }
.search { flex:1; max-width:340px; margin:0 24px; height:35px; border:1px solid #ececec; border-radius:0;
display:flex; align-items:center; padding:0 65px 0 10px; font-size:14px; color:#000; background:#fff; }
.creator { background:#00dc64; color:#000; border-radius:4px; padding:11px 22px; font-size:12px; font-weight:700; white-space:nowrap; }
.body { position:absolute; top:56px; left:0; right:0; bottom:0; padding:20px 200px 0 28px; overflow:hidden; }
.tabs { display:flex; gap:26px; border-bottom:1px solid #ececec; padding-bottom:10px; margin-bottom:16px; }
.tab { font-size:15px; font-weight:500; color:#666666; line-height:1.4; }
.tab.on { color:#00dc64; font-weight:700; }
.weekday-head { background:#00dc64; color:#fff; font-size:20px; font-weight:600; border-radius:4px;
padding:9px 16px; display:inline-block; margin-bottom:16px; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px 12px; }
.card { display:flex; flex-direction:column; gap:6px; }
.thumb { width:100%; aspect-ratio:3/4; border-radius:6px;
background-image:
linear-gradient(145deg, rgba(0,220,100,0.16), rgba(0,0,0,0.02)),
repeating-linear-gradient(120deg, rgba(0,0,0,0.05) 0 10px, transparent 10px 22px);
background-color:#f6f6f6; position:relative; overflow:hidden; }
.thumb::after { content:''; position:absolute; left:10px; right:10px; bottom:12px; height:6px; border-radius:3px;
background:rgba(0,0,0,0.08); }
.thumb::before { content:''; position:absolute; left:10px; top:12px; width:38px; height:10px; border-radius:3px;
background:#00dc64; opacity:0.85; }
.ctitle { font-size:13px; font-weight:700; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cauthor { font-size:11px; color:#666666; }
.tags { display:flex; gap:4px; flex-wrap:wrap; }
.tag { background:#f6f6f6; color:#666666; font-size:11px; font-weight:500; border-radius:4px; padding:1px 8px; }
.side-rank { position:absolute; right:28px; top:88px; width:150px; background:#fff; border:1px solid #ececec;
border-radius:6px; padding:14px 14px 6px; }
.side-rank h4 { font-size:13px; font-weight:700; margin:0 0 10px; }
.rank-item { display:flex; align-items:center; gap:8px; font-size:12px; padding:6px 0; border-top:1px solid #f6f6f6; }
.rank-item:first-child { border-top:none; }
.rank-num { font-size:13px; font-weight:700; color:#00dc64; width:16px; }
.rank-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#000; }
.page { position:absolute; bottom:16px; left:28px; display:flex; gap:14px; font-size:14px; font-weight:500; color:#000; }
.page .active { color:#00dc64; }
</style></head>
<body>
<nav class="top">
<span class="brand">Naver Webtoon</span>
<div class="search">Search comics, creators, tags</div>
<span class="creator">Become a Creator</span>
</nav>
<div class="body">
<div class="tabs">
<span class="tab on">Home</span>
<span class="tab">Webtoon</span>
<span class="tab">Best Challenge</span>
<span class="tab">Originals</span>
<span class="tab">Genre</span>
</div>
<span class="weekday-head">Monday New Episodes</span>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ctitle">Midnight Delivery</div><div class="cauthor">John Carter</div><div class="tags"><span class="tag">Fantasy</span></div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Iron Orchard</div><div class="cauthor">Sarah Lee</div><div class="tags"><span class="tag">Drama</span></div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Second Life Guild</div><div class="cauthor">Daniel Moore</div><div class="tags"><span class="tag">Action</span></div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Paper Moon Diner</div><div class="cauthor">Amy Clark</div><div class="tags"><span class="tag">Slice of Life</span></div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Ghost Semester</div><div class="cauthor">Ryan Park</div><div class="tags"><span class="tag">Horror</span></div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Quiet Reactor</div><div class="cauthor">Emily Kim</div><div class="tags"><span class="tag">SF</span></div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">The Last Bloom</div><div class="cauthor">Nathan Reed</div><div class="tags"><span class="tag">Romance</span></div></div>
</div>
<div class="page">
<span class="active">1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>
</div>
<div class="side-rank">
<h4>Best Challenge Rank</h4>
<div class="rank-item"><span class="rank-num">1</span><span class="rank-name">Rooftop Garden Club</span></div>
<div class="rank-item"><span class="rank-num">2</span><span class="rank-name">Neon Alley Diaries</span></div>
<div class="rank-item"><span class="rank-num">3</span><span class="rank-name">Wandering Merchant</span></div>
<div class="rank-item"><span class="rank-num">4</span><span class="rank-name">Small Town Ace</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eee9e7; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eee9e7; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.18; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #8e8e8e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; letter-spacing: 0.3px; background: #0a0a0a; color: #eee9e7;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; letter-spacing: 0.3px; background: #eee9e7; color: #0a0a0a;
border: 1px solid #d2cfc4; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #eee9e7; color: #4d413b;
border: 1px solid #b5b1b0; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e8e8e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 400; line-height: 1.2; letter-spacing: 0.4px; background: #a0a776; color: #000000;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#eee9e7; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#0a0a0a; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid #e2e2e2;}
.logo{font-size:18px;letter-spacing:1px;}
.navlinks{position:absolute;left:40px;top:0;height:64px;display:flex;align-items:center;gap:20px;font-size:13px;letter-spacing:0.3px;text-transform:uppercase;color:#8e8e8e;}
.icons{position:absolute;right:40px;top:0;height:64px;display:flex;align-items:center;gap:16px;font-size:13px;text-transform:uppercase;}
.hero{height:340px;display:flex;background:#d2cfc4;}
.heroimg{width:56%;background:linear-gradient(160deg,#b0a59f,#4d413b);position:relative;}
.herotext{width:44%;padding:0 40px;display:flex;flex-direction:column;justify-content:center;}
.herotext h1{font-size:32px;font-weight:400;margin:0 0 14px;line-height:1.15;}
.herotext p{font-size:14px;color:#4d413b;margin:0 0 22px;max-width:280px;}
.cta{background:#0a0a0a;color:#eee9e7;font-size:14px;text-transform:uppercase;letter-spacing:0.3px;padding:14px 32px;width:fit-content;}
.label{padding:20px 40px 10px;font-size:11px;letter-spacing:0.5px;text-transform:uppercase;color:#8e8e8e;}
.grid{display:flex;gap:14px;padding:0 40px;}
.card{width:200px;}
.thumb{aspect-ratio:3/4;height:200px;position:relative;background:#fafafa;}
.badge{position:absolute;top:8px;left:8px;background:#a0a776;color:#eee9e7;font-size:10px;letter-spacing:0.4px;text-transform:uppercase;padding:4px 8px;}
.pname{font-size:14px;margin:8px 0 4px;}
.pprice{font-size:16px;}
.pprice.sale{color:#651818;}
</style>
<div class="nav">
<div class="navlinks"><span>Men</span><span>Women</span><span>Gear</span></div>
<div class="logo">Roa</div>
<div class="icons"><span>Search</span><span>Cart</span></div>
</div>
<div class="hero">
<div class="heroimg"></div>
<div class="herotext">
<h1>Built for the ridge line.</h1>
<p>Technical hiking apparel in a limestone-and-umber palette, engineered for the mountains.</p>
<div class="cta">Shop Collection</div>
</div>
</div>
<div class="label">New Arrivals</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b0a59f,#4d413b)"><div class="badge">New</div></div><div class="pname">Ridge Line Shell Jacket</div><div class="pprice">$340</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a0a776,#4d413b)"></div><div class="pname">Sage Trek Pant</div><div class="pprice">$210</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7c6783,#0a0a0a)"></div><div class="pname">Violet Alpine Vest</div><div class="pprice sale">$180</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #E8F0FF; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #E8F0FF; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-size: 20px; font-weight:700; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-size: 12px; font-weight:400; line-height:1.4; margin: 0; color: #676a70; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #C7DAFF; color: #000000;
border: none; border-radius: 999; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #E8F0FF; color: #000000;
border: 1px solid #C7DAFF; border-radius: 999;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #E8F0FF; color: #111111;
border: 1px solid #b2b8c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676a70; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #e3edff; color: #000000;
border-radius: 999; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #F7F8FA; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
.wrap { width:960px; height:640px; display:flex; flex-direction:column; color:#212429; }
nav { flex:0 0 56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#FFFFFF; box-shadow:0 1px 2px rgba(33,36,41,0.06); position:relative; z-index:2; }
.logo { font-size:16px; font-weight:800; letter-spacing:-.02em; color:#212429; display:flex; align-items:center; gap:8px; }
.logo .mark { width:18px; height:18px; border-radius:2px; background:#1D63FF; position:relative; }
.logo .mark::after { content:''; position:absolute; width:8px; height:8px; background:#E8F0FF; right:-2px; bottom:-2px; border-radius:2px; }
.navlinks { display:flex; gap:28px; font-size:14px; color:#6B7280; font-weight:400; }
.navlinks span.on { color:#1D63FF; font-weight:700; }
.navcta { display:flex; gap:10px; align-items:center; }
.btn { font-size:14px; font-weight:700; padding:9px 18px; border-radius:2px; border:none; cursor:default; white-space:nowrap; }
.btn-primary { background:#1D63FF; color:#FFFFFF; }
.btn-ghost { background:transparent; color:#4A5568; border:1px solid #D3D7DE; }
main { flex:1 1 auto; display:flex; flex-direction:column; }
.hero { flex:0 0 340px; display:flex; align-items:center; gap:32px; padding:0 32px; }
.hero-left { flex:0 0 400px; display:flex; flex-direction:column; gap:14px; }
.eyebrow { display:flex; gap:6px; }
.eyebrow span { font-size:12px; font-weight:700; letter-spacing:.01em; color:#3D2E8C; background:#F0F0FF; padding:5px 10px; border-radius:2px; }
.hero h1 { font-size:36px; line-height:46px; font-weight:800; letter-spacing:-0.02em; margin:0; color:#212429; }
.hero p { font-size:16px; line-height:24px; color:#6B7280; margin:0; max-width:380px; }
.hero .row { display:flex; gap:10px; margin-top:6px; }
.hero-right { flex:1 1 auto; height:280px; background:#FFFFFF; border:1px solid #ECEEF2; border-radius:2px; box-shadow:0 4px 12px rgba(33,36,41,0.08); padding:20px 22px; display:flex; flex-direction:column; gap:14px; }
.dash-head { display:flex; align-items:center; justify-content:space-between; }
.dash-head span.t { font-size:14px; font-weight:700; color:#212429; }
.dash-head span.d { font-size:12px; color:#9BA2AD; }
.chart { display:flex; align-items:flex-end; gap:10px; height:110px; padding:0 4px; }
.chart .bar { width:22px; border-radius:2px 2px 0 0; }
.chart .lbl { font-size:11px; color:#9BA2AD; text-align:center; margin-top:6px; }
.chart-col { display:flex; flex-direction:column; align-items:center; }
.stats-row { display:flex; gap:24px; border-top:1px solid #ECEEF2; padding-top:12px; }
.stat .num { font-size:24px; font-weight:800; letter-spacing:-.01em; color:#212429; }
.stat .lab { font-size:12px; color:#6B7280; }
.products { flex:0 0 200px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:20px 32px; }
.pcard { background:#FFFFFF; border:1px solid #D3D7DE; border-radius:2px; padding:16px 18px; display:flex; flex-direction:column; gap:8px; }
.pcard .icon { width:32px; height:32px; border-radius:2px; display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff; font-weight:700; }
.pcard h3 { font-size:16px; font-weight:700; margin:0; color:#212429; }
.pcard p { font-size:13px; color:#6B7280; margin:0; line-height:1.4; }
.pcard .tagpill { align-self:flex-start; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; }
footer { flex:0 0 44px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-top:1px solid #ECEEF2; font-size:12px; color:#9BA2AD; background:#FFFFFF; }
</style>
<div class="wrap">
<nav>
<div class="logo"><span class="mark"></span>RD Station Tangram</div>
<div class="navlinks"><span class="on">Product</span><span>Marketing</span><span>CRM</span><span>Service</span><span>Pricing</span></div>
<div class="navcta">
<button class="btn btn-ghost">Log in</button>
<button class="btn btn-primary">Start free</button>
</div>
</nav>
<main>
<section class="hero">
<div class="hero-left">
<div class="eyebrow"><span>MARKETING · CRM · SERVICE</span></div>
<h1>Marketing and Sales, working in rhythm.</h1>
<p>One platform to attract leads, close deals and support customers — built on a token-driven design system with WCAG AA contrast by default.</p>
<div class="row">
<button class="btn btn-primary">Try it free</button>
<button class="btn btn-ghost">Watch demo</button>
</div>
</div>
<div class="hero-right">
<div class="dash-head"><span class="t">Pipeline overview</span><span class="d">Last 30 days</span></div>
<div class="chart">
<div class="chart-col"><div class="bar" style="height:36px;background:#FF6B6B"></div><span class="lbl">Mon</span></div>
<div class="chart-col"><div class="bar" style="height:58px;background:#FFCC4D"></div><span class="lbl">Tue</span></div>
<div class="chart-col"><div class="bar" style="height:44px;background:#4BD89E"></div><span class="lbl">Wed</span></div>
<div class="chart-col"><div class="bar" style="height:78px;background:#5B93FF"></div><span class="lbl">Thu</span></div>
<div class="chart-col"><div class="bar" style="height:64px;background:#8B8BFF"></div><span class="lbl">Fri</span></div>
<div class="chart-col"><div class="bar" style="height:52px;background:#FF8F73"></div><span class="lbl">Sat</span></div>
<div class="chart-col"><div class="bar" style="height:34px;background:#79E2F2"></div><span class="lbl">Sun</span></div>
</div>
<div class="stats-row">
<div class="stat"><div class="num">2,481</div><div class="lab">New leads</div></div>
<div class="stat"><div class="num">R$ 96k</div><div class="lab">Deals won</div></div>
<div class="stat"><div class="num">98.2%</div><div class="lab">SLA met</div></div>
</div>
</div>
</section>
<section class="products">
<div class="pcard">
<div class="icon" style="background:#1D63FF">M</div>
<h3>RD Station Marketing</h3>
<p>Automate campaigns, landing pages and lead scoring end to end.</p>
<span class="tagpill" style="background:#E8F0FF;color:#0A3FC7">Marketing</span>
</div>
<div class="pcard">
<div class="icon" style="background:#5243AA">C</div>
<h3>RD Station CRM</h3>
<p>Track every deal on a visual pipeline built for fast-moving teams.</p>
<span class="tagpill" style="background:#F0F0FF;color:#3D2E8C">Sales</span>
</div>
<div class="pcard">
<div class="icon" style="background:#00875A">S</div>
<h3>RD Station Conversas</h3>
<p>Unify chat, WhatsApp and email into one shared inbox.</p>
<span class="tagpill" style="background:#E6FAF0;color:#006644">Service</span>
</div>
</section>
</main>
<footer>
<span>© RD Station Tangram</span>
<span>Built with tangram-design-tokens · DM Sans</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.3; margin: 0; color: #676767; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; background: #415d6f; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; background: transparent; color: #415d6f;
border: 1px solid #415d6f; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #313131;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676767; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #415d6f; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:Poppins,Arial,sans-serif; color:#444444; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#283c48;}
.logo{font-family:Raleway,Arial,sans-serif;font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;color:#ebf0f1;}
.hero{height:250px;display:flex;background:#ebf0f1;}
.herotext{width:46%;padding:0 36px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-family:Raleway,Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#415d6f;margin-bottom:12px;}
.h1{font-family:Raleway,Arial,sans-serif;font-size:26px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;line-height:1.25;color:#283c48;margin:0 0 12px;}
.sub{font-family:Baskerville,Georgia,serif;font-style:italic;font-size:14px;color:#444444;margin:0 0 18px;max-width:300px;}
.cta{display:inline-block;background:#415d6f;color:#fff;font-family:Raleway,Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:12px 24px;border-radius:2px;}
.heroimg{width:54%;position:relative;background:linear-gradient(160deg,#b5c2c7,#283c48 80%);}
.fixture{position:absolute;left:80px;top:60px;width:180px;height:24px;border-radius:4px;background:#283c48;box-shadow:0 30px 40px rgba(65,93,111,.4);}
.pole{position:absolute;left:160px;top:82px;width:8px;height:100px;background:#283c48;}
.specrow{position:absolute;bottom:20px;left:20px;right:20px;background:rgba(255,255,255,.85);border-radius:2px;padding:8px 14px;font-size:11px;color:#283c48;display:flex;justify-content:space-between;font-family:Poppins,Arial,sans-serif;}
.sec{padding:22px 36px 0;}
.secTitle{font-family:Raleway,Arial,sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#283c48;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#eeeeee;border:1px solid #b5c2c7;border-radius:4px;padding:12px;}
.thumb{height:90px;border-radius:2px;margin-bottom:10px;}
.pname{font-size:13px;font-weight:600;color:#283c48;}
.pmeta{font-size:11px;color:#676767;margin-top:4px;}
.pprice{font-size:13px;font-weight:700;color:#415d6f;margin-top:8px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Vista Pro</div>
<div class="navlinks"><span>Area Lighting</span><span>Wall Packs</span><span>Photometrics</span><span>Specifiers</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Architectural Exterior Lighting</div>
<div class="h1">Specification-Grade Fixtures</div>
<div class="sub">Photometric data and DLC listings for every luminaire.</div>
<div class="cta">Download IES Files</div>
</div>
<div class="heroimg"><div class="fixture"></div><div class="pole"></div>
<div class="specrow"><span>CCT: 4000K</span><span>DLC Listed</span><span>IP66</span></div>
</div>
</div>
<div class="sec">
<div class="secTitle">Site & Area Fixtures</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#415d6f,#283c48)"></div><div class="pname">LED Area Light 150W</div><div class="pmeta">4000K · Type III</div><div class="pprice">$419.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b5c2c7,#283c48)"></div><div class="pname">Wall Pack Cutoff 60W</div><div class="pmeta">5000K · Full Cutoff</div><div class="pprice">$189.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a5acb5,#003388)"></div><div class="pname">Canopy Fixture 80W</div><div class="pmeta">3000K · IP66</div><div class="pprice">$249.00</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f0; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f0; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #707170; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #05301a; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #f6f6f0; color: #05301a;
border: 1px solid #05301a; border-radius: 8px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f6f6f0; color: #444444;
border: 1px solid #bdbdb8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707170; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #eedd22; color: #111111;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#f6f6f0; color:#111111; box-sizing:border-box; font-family:Arial,'Helvetica Neue',sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;background:#f6f6f0;display:flex;align-items:center;justify-content:space-between;padding:0 26px;}
.nav .logo{font-family:Georgia,serif;font-weight:700;font-size:18px;color:#05301a;}
.nav .links{display:flex;gap:18px;font-size:15px;font-weight:600;letter-spacing:.2px;}
.wrap{display:flex;height:576px;}
.left{width:400px;background:#fff;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;}
.kit{width:210px;height:210px;background:linear-gradient(160deg,#a79d79,#05301a);border-radius:12px;box-shadow:0 14px 26px rgba(0,0,0,.1);position:relative;}
.kit::before{content:'';position:absolute;top:20px;left:20px;width:60px;height:60px;border-radius:50%;background:#eedd22;}
.kit::after{content:'';position:absolute;bottom:20px;right:20px;width:50px;height:50px;border-radius:8px;background:#c7bd98;}
.badge-age{position:absolute;top:24px;left:24px;background:#eedd22;color:#111;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 10px;border-radius:9999px;}
.right{flex:1;padding:28px 32px;display:flex;flex-direction:column;}
h1{font-family:Georgia,serif;font-size:28px;font-weight:700;margin:0 0 8px;}
.sub{color:#444;font-size:16px;margin:0 0 16px;}
.price{font-size:18px;font-weight:400;margin:0 0 18px;}
.chips{display:flex;gap:8px;margin-bottom:20px;}
.chip{background:#f3f3f3;color:#707170;font-size:13px;border-radius:9999px;padding:8px 16px;}
.chip.active{background:#05301a;color:#fff;}
.desc{font-size:16px;color:#444;line-height:1.5;margin:0 0 20px;}
.actions{display:flex;gap:10px;margin-top:auto;}
.btn-primary{background:#05301a;color:#fff;font-size:16px;font-weight:700;letter-spacing:.5px;border-radius:8px;padding:12px 28px;height:48px;display:flex;align-items:center;}
.btn-secondary{background:#f6f6f0;color:#05301a;font-size:16px;font-weight:700;letter-spacing:.3px;border:2px solid #05301a;border-radius:8px;padding:12px 28px;height:48px;display:flex;align-items:center;}
</style>
</head>
<body>
<div class="nav"><div class="logo">Creativity For Kids</div><div class="links"><span>Craft Kits</span><span>Art Supplies</span><span>Nature</span><span>Gifts</span></div></div>
<div class="wrap">
<div class="left"><div class="badge-age">Ages 5+</div><div class="kit"></div></div>
<div class="right">
<h1>Weave a Basket Craft Kit</h1>
<p class="sub">Nature-Inspired Weaving · All Materials Included</p>
<p class="price">$16.99</p>
<div class="chips"><span class="chip active">Craft Kits</span><span class="chip">Nature</span><span class="chip">Fine Motor</span></div>
<p class="desc">Everything needed to weave a real basket from natural reed, laid out one material at a time for a calm, unhurried craft session at the table.</p>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Shop All</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f4; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f4; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #003399; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f4f4f4; color: #003399;
border: 1px solid #003399; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c0c0c0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #0078a8; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f4f4; color:#222222; box-sizing:border-box;
font-family:'Poppins',sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#f4f4f4; }
.brand { font-size:16px; font-weight:900; margin:0; color:#003399; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; color:#777777; }
.navlinks span.on { color:#003399; }
.util { font-size:13px; color:#777777; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 64px); }
.stage { padding:24px; display:flex; flex-direction:column; gap:10px; background:#eeeeee; }
.panel { flex:1; position:relative; overflow:hidden; border-radius:4px; background:#fff; }
.panel::before { content:''; position:absolute; left:12%; top:8%; width:76%; height:84%; background:linear-gradient(160deg,#003399,#0078a8); border-radius:2px; box-shadow:6px 6px 0 #c3c3c3; }
.panel::after { content:'BS'; position:absolute; left:20%; top:16%; color:#fff; font-size:40px; font-weight:900; }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; background:#fff; border-radius:4px; }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:13px; font-weight:400; color:#777777; }
h1 { margin:0; font-size:24px; font-weight:900; letter-spacing:-0.3px; line-height:1.2; }
.author { font-size:14px; color:#333333; }
.badge-event { background:#0078a8; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.5px; padding:2px 8px; border-radius:2px; display:inline-block; width:fit-content; }
.price { font-size:18px; font-weight:400; }
.desc { font-size:14px; color:#333333; line-height:1.6; }
.event-card { border:1px solid #dddddd; border-radius:4px; background:#fff; padding:12px 14px; font-size:13px; color:#333333; }
.event-card b { display:block; font-size:14px; font-weight:700; margin-bottom:2px; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:44px; background:#003399; color:#fff; border:none; border-radius:4px; font-size:15px; font-weight:700; letter-spacing:0.5px; }
.btn-secondary { width:170px; height:44px; background:#f4f4f4; border:none; color:#003399; border-radius:4px; font-size:15px; font-weight:700; }
</style></head>
<body>
<nav>
<p class="brand">Bluestockings</p>
<div class="navlinks"><span class="on">Books</span><span>Events</span><span>About</span><span>Donate</span></div>
<div class="util">Search Account Cart (2)</div>
</nav>
<main>
<div class="stage">
<div class="panel"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Feminist Theory</span>
<h1>Bodies That Matter</h1>
<div class="author">Judith Butler</div>
<span class="badge-event">Staff Pick</span>
<div class="price">$24.00</div>
<p class="desc">A foundational text on the discursive limits of sex — new introduction from the author reflecting on three decades of reception.</p>
<div class="event-card"><b>Book Launch · Thu 7pm</b>In-store reading with local zine collective, free RSVP.</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">RSVP to Event</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.35; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #112233; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #112233;
border: 1px solid #112233; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ff6600; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'Montserrat','Helvetica Neue',Arial,sans-serif; color:#222; }
*{box-sizing:border-box;}
.nav{height:48px;background:#112233;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.logo{color:#fff;font-size:15px;font-weight:600;letter-spacing:0.3px;}
.navlinks{display:flex;gap:0;font-size:13px;font-weight:500;letter-spacing:0.3px;text-transform:uppercase;}
.navlinks div{color:#fff;padding:0 16px;}
.navlinks .active{background:#0d1a26;}
.hero{padding:20px 32px 0;}
.hero h1{font-size:26px;font-weight:600;margin:0 0 6px;color:#222;}
.hero p{font-size:14px;color:#666;margin:0;max-width:460px;}
.sec{padding:16px 32px 0;}
.grid{display:flex;gap:14px;}
.card{width:172px;background:#fff;border-radius:4px;padding:12px;position:relative;}
.badge{position:absolute;top:6px;left:6px;font-size:10px;font-weight:600;text-transform:uppercase;padding:2px 6px;border-radius:2px;color:#fff;}
.thumb{aspect-ratio:2/3;border-radius:4px;margin-bottom:8px;}
.ptitle{font-size:16px;font-weight:500;margin:0;}
.pprice{font-size:14px;color:#666;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:120px;background:#fff;border-top:1px solid #e0e0e0;padding:14px 32px;}
.footer .title{font-size:11px;font-weight:600;text-transform:uppercase;color:#666;margin-bottom:10px;}
.socialrow{display:flex;flex-wrap:wrap;gap:6px;}
.sicon{width:26px;height:26px;border-radius:9999px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kinokuniya Usa Movies A 2</div>
<div class="navlinks"><div class="active">Movies A-Z</div><div>New Releases</div><div>Anime</div><div>Boxed Sets</div></div>
</div>
<div class="hero">
<h1>Movies & Anime, catalogued A to Z.</h1>
<p>A near-black reading room of a store — the movie is the color, we're just the shelf.</p>
</div>
<div class="sec">
<div class="grid">
<div class="card"><div class="badge" style="background:#ff6600">New</div><div class="thumb" style="background:linear-gradient(160deg,#112233,#666)"></div><div class="ptitle">Harbor Nights</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#84bd00,#112233)"></div><div class="ptitle">Spirit Engine</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="badge" style="background:#f94877">Sale</div><div class="thumb" style="background:linear-gradient(160deg,#00b4b3,#333)"></div><div class="ptitle">Paper Moon Vol. 1</div><div class="pprice">$19.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#333,#0099e5)"></div><div class="ptitle">The Last Almanac</div><div class="pprice">$29.99</div></div>
</div>
</div>
<div class="footer">
<div class="title">Follow Us</div>
<div class="socialrow">
<div class="sicon" style="background:#3b5998"></div><div class="sicon" style="background:#55acee"></div><div class="sicon" style="background:#e4405f"></div><div class="sicon" style="background:#cc2127"></div><div class="sicon" style="background:#7dbb00"></div><div class="sicon" style="background:#1ab7ea"></div><div class="sicon" style="background:#e52d27"></div><div class="sicon" style="background:#00b4b3"></div><div class="sicon" style="background:#1769ff"></div><div class="sicon" style="background:#382110"></div><div class="sicon" style="background:#dc4e41"></div><div class="sicon" style="background:#007ee5"></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.25; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.25; letter-spacing: 1.5px; background: #121f36; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.25; letter-spacing: 1.5px; background: #ffffff; color: #121f36;
border: 1px solid #121f36; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #272727;
border: 1px solid #c9c9c9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #121f36; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Georgia, 'Baskerville', serif; background:#fff; color:#272727; }
*{box-sizing:border-box;}
.announce{height:36px;background:#121f36;color:#fff;font-size:12px;text-align:center;line-height:36px;font-family:Arial,sans-serif;}
.nav{height:64px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #e8e8e8;position:relative;}
.logo{font-size:21px;}
.navlinks{position:absolute;left:32px;display:flex;gap:18px;font-size:13px;font-family:Arial,sans-serif;font-weight:500;letter-spacing:0.5px;}
.hero{height:250px;background:#e6f7f4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.headline{font-size:44px;color:#121f36;margin-bottom:14px;}
.btn{display:inline-block;background:#121f36;color:#fff;font-family:Arial,sans-serif;font-size:13px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;padding:14px 30px;}
.sec{padding:16px 32px;}
.sectitle{font-size:24px;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;}
.thumb{aspect-ratio:1/1;background:#f5f5f5;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#121f36;color:#fff;font-family:Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:3px 8px;}
.badgegold{position:absolute;top:8px;left:8px;background:#f59e0b;color:#fff;font-family:Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:3px 8px;}
.title{font-size:18px;margin-top:10px;}
.price{font-family:Arial,sans-serif;font-size:14px;color:#888;margin-top:2px;}
</style>
<div class="announce">FREE SHIPPING ON U.S. ORDERS OVER $100</div>
<div class="nav">
<div class="navlinks"><span>Necklaces</span><span>Rings</span><span>Earrings</span></div>
<div class="logo">Miranda Frye</div>
</div>
<div class="hero">
<div class="headline">Wearable precision, made to last.</div>
<div class="btn">Explore the Collection</div>
</div>
<div class="sec">
<div class="sectitle">New This Week</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e6f7f4,#b1b7c3)"><div class="badge">New</div></div><div class="title">Signet Initial Ring</div><div class="price">$68</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#999ea8,#e6f7f4)"><div class="badgegold">Bestseller</div></div><div class="title">Paperclip Chain Necklace</div><div class="price">$95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#fef3e2,#b1b7c3)"></div><div class="title">Huggie Hoop Earrings</div><div class="price">$54</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 1.2px; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 1.2px; background: #ffffff; color: #1a1a1a;
border: 1px solid #1a1a1a; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 1.5px; background: #c0392b; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#1a1a1a; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e5e5e5;}
.logo{font-weight:300;font-size:20px;letter-spacing:1px;}
.navlinks{display:flex;gap:24px;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;}
.hero{display:flex;background:#faf9f7;padding:26px 32px;gap:28px;}
.hero .text{flex:1;padding-top:14px;}
.hero h1{font-size:36px;font-weight:300;line-height:1.15;margin:0 0 10px;}
.hero p{font-size:14px;color:#333;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#1a1a1a;color:#fff;font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;padding:13px 26px;}
.hero .img{flex:1;height:150px;background:linear-gradient(160deg,#e9e2d5,#8f8163);}
.section{padding:24px 32px 0;}
.grid{display:flex;gap:24px;}
.card{flex:1;}
.card .img{aspect-ratio:3/4;height:170px;position:relative;margin-bottom:8px;}
.p1{background:linear-gradient(180deg,#c8b89b,#2c2620);}
.p2{background:linear-gradient(180deg,#dcd4c8,#5a4a3a);}
.p3{background:linear-gradient(180deg,#efe9dd,#7a6a56);}
.badge{position:absolute;top:8px;left:8px;background:#c0392b;color:#fff;font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;padding:2px 8px;border-radius:9999px;}
.card h3{font-size:13px;font-weight:400;margin:0 0 3px;}
.card .price{font-size:16px;}
.swatches{display:flex;gap:6px;margin-top:22px;}
.swatch{width:20px;height:20px;border-radius:9999px;}
.sw1{background:#111;border:2px solid #1a1a1a;}
.sw2{background:#fff;border:1px solid #e5e5e5;}
.sw3{background:#b08d5f;border:1px solid #e5e5e5;}
.sw4{background:#4a3423;border:1px solid #e5e5e5;}
</style>
<div class="nav">
<div class="logo">Desenio</div>
<div class="navlinks"><span>New</span><span>Posters</span><span>Frames</span><span>Room Sets</span></div>
</div>
<div class="hero">
<div class="text">
<h1>Art for every wall.</h1>
<p>Curated posters, framed to become the object it will hang as.</p>
<a class="cta">Shop Posters</a>
<div class="swatches"><div class="swatch sw1"></div><div class="swatch sw2"></div><div class="swatch sw3"></div><div class="swatch sw4"></div></div>
</div>
<div class="img"></div>
</div>
<div class="section">
<div class="grid">
<div class="card"><div class="img p1"><span class="badge">Sale</span></div><h3>Golden Hour No.2</h3><div class="price">£12.95</div></div>
<div class="card"><div class="img p2"></div><h3>Botanical Study</h3><div class="price">£9.95</div></div>
<div class="card"><div class="img p3"><span class="badge" style="background:#1a1a1a;">New</span></div><h3>Abstract Form 04</h3><div class="price">£14.95</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #313131; color: #ffffff;
border: none; border-radius: 2px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 2px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.25; letter-spacing: 0.2px; background: #313131; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#4a4a4a; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #e8e8e8; }
.brand { font-size:16px; font-weight:400; color:#313131; letter-spacing:5px; text-transform:uppercase; }
.nlinks { display:flex; gap:30px; }
.nlinks div { font-size:12px; font-weight:500; color:#4a4a4a; letter-spacing:1px; text-transform:uppercase; }
.nlinks div.on { color:#000000; }
.navcta { border:1px solid #313131; color:#313131; font-size:11px; font-weight:500; text-transform:uppercase;
letter-spacing:1.5px; padding:10px 20px; }
.hero { height:290px; background:#313131; position:relative; display:flex; align-items:center; padding:0 60px; }
.hero::after { content:''; position:absolute; right:0; top:0; bottom:0; width:46%;
background:linear-gradient(135deg,#4a4a4a,#1a1a1a 60%,#313131); }
.hero::before { content:''; position:absolute; right:8%; top:30%; width:180px; height:130px; border:1px solid #767676; }
.herotxt { position:relative; z-index:2; max-width:420px; }
.herotxt .k { color:#c0c0c0; font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; }
.herotxt h1 { color:#ffffff; font-size:44px; font-weight:300; margin:10px 0 12px; line-height:1.15; }
.herotxt p { color:#c0c0c0; font-size:14px; line-height:1.6; margin:0 0 18px; }
.herobtn { display:inline-block; background:transparent; border:1px solid #ffffff; color:#fff; font-size:12px;
font-weight:500; letter-spacing:1px; text-transform:uppercase; padding:13px 26px; }
.section { padding:26px 36px 0; }
.sechead { text-align:center; margin-bottom:18px; }
.sechead h2 { font-size:14px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:#313131; margin:0; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid #d9d9d9; border-left:1px solid #d9d9d9; }
.card { border-right:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9; padding:16px; text-align:center; }
.shot { aspect-ratio:4/3; background:#f5f5f5; margin-bottom:12px; position:relative; }
.shot .ln { position:absolute; left:10%; right:10%; top:50%; height:1px; background:#b0b0b0; }
.shot .ln2 { position:absolute; top:10%; bottom:10%; left:50%; width:1px; background:#b0b0b0; }
.ctitle { font-size:12px; font-weight:500; letter-spacing:1px; text-transform:uppercase; color:#313131; margin-bottom:4px; }
.cmodel { font-size:11px; font-weight:500; letter-spacing:1.5px; color:#767676; }
</style></head>
<body>
<nav>
<div class="brand">Dacor</div>
<div class="nlinks"><div class="on">Ranges</div><div>Ovens</div><div>Refrigeration</div><div>Ventilation</div></div>
<div class="navcta">Find A Dealer</div>
</nav>
<div class="hero">
<div class="herotxt">
<div class="k">Since 1965</div>
<h1>Precision-Built<br>Culinary Instruments</h1>
<p>Architectural kitchen appliances engineered for chefs who measure everything, including the silence between courses.</p>
<div class="herobtn">Explore The Range</div>
</div>
</div>
<div class="section">
<div class="sechead"><h2>Signature Collection</h2></div>
<div class="grid">
<div class="card"><div class="shot"><span class="ln"></span><span class="ln2"></span></div>
<div class="ctitle">Contemporary Range</div><div class="cmodel">HGER48SS</div></div>
<div class="card"><div class="shot"><span class="ln"></span><span class="ln2"></span></div>
<div class="ctitle">Wall Oven Duo</div><div class="cmodel">DOB30S86DS</div></div>
<div class="card"><div class="shot"><span class="ln"></span><span class="ln2"></span></div>
<div class="ctitle">Column Refrigerator</div><div class="cmodel">DYF36BFTS</div></div>
<div class="card"><div class="shot"><span class="ln"></span><span class="ln2"></span></div>
<div class="ctitle">Modernist Hood</div><div class="cmodel">DHD48U</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #181818;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #181818;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #181818; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #c74c00; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #c74c00;
border: 1px solid #c74c00; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #221f1f;
border: 1px solid #c5c5c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #80b800; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,'Helvetica Neue',sans-serif; color:#221f1f; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #d0d0d0;}
.logo{font-family:'Roboto Condensed',Arial,sans-serif;font-size:22px;font-weight:700;color:#c74c00;}
.navlinks{display:flex;gap:20px;font-family:'Roboto Condensed',Arial,sans-serif;font-size:16px;font-weight:600;}
.searchpill{background:#f7f7f7;border:1px solid #d0d0d0;border-radius:9999px;padding:8px 16px;font-size:13px;color:#444444;}
.hero{height:230px;background:#eef9fd;border-radius:0 0 20px 20px;display:flex;align-items:center;padding:0 40px;}
.herotext{width:420px;}
.herotext h1{font-family:'Roboto Condensed',Arial,sans-serif;font-size:28px;font-weight:700;line-height:1.2;margin:0 0 12px;}
.herotext p{font-size:14px;color:#221f1f;margin:0 0 16px;max-width:340px;}
.btn{display:inline-block;background:#c74c00;color:#fff;font-family:'Roboto Condensed',Arial,sans-serif;font-size:16px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:12px 28px;border-radius:9999px;}
.heroart{flex:1;height:170px;border-radius:20px;background:linear-gradient(135deg,#fac300,#ee5f9e 60%);}
.grid{display:flex;gap:14px;padding:16px 30px 0;}
.card{width:210px;border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.08);background:#fff;overflow:hidden;}
.thumb{height:110px;background:#f7f7f7;border-radius:20px 20px 0 0;position:relative;}
.badge{position:absolute;top:8px;left:8px;color:#fff;font-family:'Roboto Condensed',Arial,sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;border-radius:9999px;padding:4px 10px;}
.cbody{padding:8px 14px 12px;}
.ctitle{font-family:'Roboto Condensed',Arial,sans-serif;font-size:16px;font-weight:600;margin:0;}
.stars{color:#fac300;font-size:12px;margin-top:4px;}
.cprice{font-family:'Roboto Condensed',Arial,sans-serif;font-size:18px;font-weight:700;margin-top:2px;}
.cta{display:inline-block;background:#c74c00;color:#fff;font-family:'Roboto Condensed',Arial,sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;border-radius:9999px;padding:6px 18px;margin-top:8px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:96px;background:#acc9d4;color:#2c2c2c;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Peaceable Kingdom</div>
<div class="navlinks"><div>Games</div><div>Puzzles</div><div>Ages 4+</div></div>
<div class="searchpill">Search toys...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Play that grows with your family.</h1>
<p>Award-winning cooperative games and puzzles for every age in the house.</p>
<div class="btn">Shop Games</div>
</div>
<div class="heroart"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge" style="background:#80b800;">New</div></div><div class="cbody"><div class="ctitle">Stack Up Cooperative Game</div><div class="stars">★★★★★</div><div class="cprice">$19.99</div><div class="cta">Add to Cart</div></div></div>
<div class="card"><div class="thumb" style="background:#eef9fd;"><div class="badge" style="background:#ee5f9e;">Sale</div></div><div class="cbody"><div class="ctitle">First Orchard Board Game</div><div class="stars">★★★★★</div><div class="cprice">$22.99</div><div class="cta">Add to Cart</div></div></div>
<div class="card"><div class="thumb" style="background:#f7f7f7;"><div class="badge" style="background:#1f9cd8;">Ages 4+</div></div><div class="cbody"><div class="ctitle">100-Piece Floor Puzzle</div><div class="stars">★★★★☆</div><div class="cprice">$15.99</div><div class="cta">Add to Cart</div></div></div>
<div class="card"><div class="thumb" style="background:#d0d0d0;"></div><div class="cbody"><div class="ctitle">Memory Match Card Set</div><div class="stars">★★★★★</div><div class="cprice">$12.99</div><div class="cta">Add to Cart</div></div></div>
</div>
<div class="footer"><span>© Peaceable Kingdom</span><span>Shop About Support Connect</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #226d7a; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #1a1a1a;
border: 1px solid #226d7a; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #22b8d1; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:'Open Sans', Roboto, Arial, sans-serif; }
* { box-sizing:border-box; }
.promo { height:40px; background:#226d7a; color:#ffffff; display:flex; align-items:center;
justify-content:center; font-size:13px; }
nav { height:64px; border-bottom:1px solid #e5e7eb; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.logo { font-weight:700; font-size:19px; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:24px; font-size:15px; font-weight:600; }
.navlinks .on { color:#226d7a; border-bottom:2px solid #226d7a; padding-bottom:6px; }
.navlinks .off { color:#6b7280; }
.navicons { display:flex; gap:16px; font-size:15px; }
main { display:flex; height:420px; }
.shot { width:400px; position:relative; background:#e4f5fa; overflow:hidden; }
.shot::before { content:''; position:absolute; inset:0;
background:
radial-gradient(circle at 30% 70%, rgba(34,184,209,0.25), transparent 50%),
linear-gradient(160deg, #2a2a2a 0%, #121212 100%); }
.grill { position:absolute; left:70px; top:110px; width:260px; height:130px; border-radius:16px;
background:linear-gradient(160deg,#3a3a3a,#161616); box-shadow:0 20px 30px rgba(0,0,0,0.3); }
.grill::before { content:''; position:absolute; left:20px; right:20px; top:16px; height:6px; border-radius:3px;
background:repeating-linear-gradient(90deg,#226d7a 0 8px, transparent 8px 14px); opacity:0.7; }
.lid { position:absolute; left:100px; top:60px; width:200px; height:70px; border-radius:100px 100px 8px 8px;
background:linear-gradient(160deg,#4a4a4a,#222222); box-shadow:0 10px 18px rgba(0,0,0,0.25); }
.badge-best { position:absolute; top:14px; left:14px; background:#226d7a; color:#fff; font-size:11px;
font-weight:700; letter-spacing:0.4px; text-transform:uppercase; border-radius:9999px; padding:4px 10px; }
.info { flex:1; display:flex; flex-direction:column; padding:24px 36px; }
.name { font-size:26px; font-weight:700; letter-spacing:-0.2px; margin:0 0 8px; }
.stars { font-size:14px; color:#f59e0b; margin-bottom:10px; }
.stars span { color:#6b7280; font-size:13px; margin-left:6px; }
.price { font-size:20px; font-weight:700; margin-bottom:16px; }
.specs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px 16px; background:#f5f7f8;
border-radius:12px; padding:14px 16px; margin-bottom:16px; }
.spec .l { font-size:12px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; color:#6b7280; }
.spec .v { font-size:14px; color:#1a1a1a; }
.cta { margin-top:auto; display:flex; gap:12px; }
.btn-add { flex:1; background:#226d7a; color:#fff; border:none; border-radius:8px; height:48px;
font-size:16px; font-weight:600; }
.btn-cyan { padding:0 24px; height:48px; border-radius:8px; border:none; background:#22b8d1; color:#fff;
font-size:14px; font-weight:600; }
.feat { display:flex; gap:16px; padding:16px 40px; }
.fitem { flex:1; background:#ffffff; border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px;
font-size:13px; color:#333333; display:flex; gap:10px; align-items:center; }
.fitem span { color:#226d7a; font-size:18px; }
footer { background:#1a1a1a; color:#9ca3af; padding:14px 40px; display:flex; justify-content:space-between;
align-items:center; font-size:12px; }
</style></head>
<body>
<div class="promo">Free shipping on orders over $99 — Ends Sunday</div>
<nav>
<div class="logo">Burn Shop</div>
<div class="navlinks"><span class="on">Grills</span><span class="off">Smokers</span><span class="off">Accessories</span><span class="off">Fuel</span></div>
<div class="navicons">⌕ ♡ ⛃</div>
</nav>
<main>
<div class="shot">
<span class="badge-best">Best Seller</span>
<div class="lid"></div>
<div class="grill"></div>
</div>
<div class="info">
<h1 class="name">36" Griddle Master Flat-Top Grill</h1>
<div class="stars">★★★★★ <span>4.8 (1,140 reviews)</span></div>
<div class="price">$589.00</div>
<div class="specs">
<div class="spec"><div class="l">BTU</div><div class="v">48,000</div></div>
<div class="spec"><div class="l">Cook Area</div><div class="v">720 sq in</div></div>
<div class="spec"><div class="l">Fuel</div><div class="v">Propane</div></div>
</div>
<div class="cta">
<button class="btn-add">Add to Cart</button>
<button class="btn-cyan">Shop Now</button>
</div>
</div>
</main>
<div class="feat">
<div class="fitem"><span>🔥</span>4-Burner Even Heat</div>
<div class="fitem"><span>🛡</span>2-Year Warranty</div>
<div class="fitem"><span>🚚</span>Ships Assembled</div>
</div>
<footer>
<span>© Burn Shop</span>
<span>SHIPPING · WARRANTY · RECIPES</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.27; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.33; background: #F47B20; color: #FFFFFF;
border: none; border-radius: 2px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.33; background: #FFFFFF; color: #1C3A6E;
border: 1px solid #F47B20; border-radius: 2px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.3px; background: #CC0000; color: #FFFFFF;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:Arial,Helvetica,'Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
.topbar { height:26px; background:#132850; color:#fff; font-size:11px; display:flex; align-items:center;
justify-content:space-between; padding:0 24px; }
nav { height:44px; background:#1c3a6e; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.brand { color:#fff; font-size:17px; font-weight:700; }
.navlinks { display:flex; gap:18px; }
.navlinks span { color:#fff; font-size:13px; font-weight:700; }
.searchRow { display:flex; padding:10px 24px; gap:10px; }
.searchInput { flex:1; border:2px solid #f47b20; height:36px; padding:0 12px; font-size:13px; display:flex; align-items:center; color:#666; }
.searchBtn { background:#f47b20; color:#fff; font-size:13px; font-weight:700; padding:0 18px; height:36px; display:flex; align-items:center; }
.promo { background:#1c3a6e; color:#fff; padding:12px 24px; font-size:14px; font-weight:700; display:flex; justify-content:space-between; align-items:center; }
.promo span.acc { color:#f47b20; }
.body { display:flex; gap:16px; padding:16px 24px 0; }
.rail { width:180px; }
.railHead { font-size:13px; font-weight:700; margin-bottom:8px; }
.railItem { font-size:12px; color:#333; padding:4px 0; border-bottom:1px solid #eeeeee; }
.grid { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.card { border:1px solid #dddddd; border-radius:2px; padding:8px; }
.photo { aspect-ratio:1/1; background:#f5f5f5; margin-bottom:6px; position:relative; }
.c1 .photo { background:linear-gradient(150deg,#e8e8e8,#cfcfcf); }
.c2 .photo { background:linear-gradient(150deg,#dde5ee,#b8c9dc); }
.c3 .photo { background:linear-gradient(150deg,#eee0d0,#d8c0a0); }
.badge { position:absolute; top:4px; left:4px; background:#cc0000; color:#fff; font-size:10px; font-weight:700;
text-transform:uppercase; padding:2px 5px; }
.sku { font-family:'Courier New',monospace; font-size:11px; color:#555; }
.title { font-size:13px; margin:3px 0; }
.price { font-size:18px; font-weight:700; }
.addBtn { background:#f47b20; color:#fff; font-size:12px; font-weight:700; text-align:center; padding:6px; margin-top:6px; }
</style></head>
<body>
<div class="topbar"><span>Call 1-888-000-0000 to Order</span><span>Sign In | Track Order</span></div>
<nav>
<div class="brand">Global Industrial</div>
<div class="navlinks"><span>Material Handling</span><span>Furniture</span><span>Safety</span><span>HVAC</span><span>Electrical</span></div>
</nav>
<div class="searchRow">
<div class="searchInput">Search by part number or keyword...</div>
<div class="searchBtn">Search</div>
</div>
<div class="promo">Save 15% on Shelving Units This Week<span class="acc">Shop Now →</span></div>
<div class="body">
<div class="rail">
<div class="railHead">Shop by Category</div>
<div class="railItem">Shelving & Racking</div>
<div class="railItem">Pallet Trucks</div>
<div class="railItem">Safety Cabinets</div>
<div class="railItem">Workbenches</div>
<div class="railItem">HEPA Filtration</div>
</div>
<div class="grid">
<div class="card c1">
<div class="photo"><div class="badge">Clearance</div></div>
<div class="sku">SKU# 4471829</div>
<div class="title">Heavy Duty Steel Shelving 48x24x72</div>
<div class="price">$249.00</div>
<div class="addBtn">Add to Cart</div>
</div>
<div class="card c2">
<div class="photo"></div>
<div class="sku">SKU# 3390211</div>
<div class="title">Electric Pallet Jack 4500 lb</div>
<div class="price">$1,899.00</div>
<div class="addBtn">Add to Cart</div>
</div>
<div class="card c3">
<div class="photo"></div>
<div class="sku">SKU# 2201847</div>
<div class="title">Fire-Rated Safety Cabinet 30 Gal</div>
<div class="price">$679.00</div>
<div class="addBtn">Add to Cart</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5700; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5700; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff793e; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5700; color: #000000;
border: 1px solid #ff793e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5700; color: #f5f5f5;
border: 1px solid #fd7027; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff5c0a; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#050403; box-sizing:border-box;
font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.herodark { height:236px; background:#050403; padding:26px 40px; display:flex; flex-direction:column;
justify-content:space-between; }
.herotop { display:flex; align-items:center; justify-content:space-between; }
.brand { font-weight:600; font-size:17px; color:#f8f7f4; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#f8f7f4; opacity:0.75; }
.navlinks span.active { opacity:1; color:#ff793e; }
.herobody h1 { font-size:38px; font-weight:600; letter-spacing:-1.4px; line-height:1.05; margin:0 0 8px;
color:#f8f7f4; max-width:600px; }
.herobody p { font-size:14px; color:#a09e9a; margin:0 0 14px; max-width:520px; line-height:1.5; }
.ctarow { display:flex; gap:10px; }
.btn-primary { background:#ff5700; color:#ffffff; border-radius:6px; padding:0 18px; height:40px;
font-size:14px; font-weight:500; display:flex; align-items:center; white-space:nowrap; }
.btn-ghost { background:transparent; color:#f8f7f4; border:1px solid rgba(255,255,255,0.25); border-radius:6px;
padding:0 18px; height:40px; font-size:14px; font-weight:500; display:flex; align-items:center; white-space:nowrap; }
.specwrap { padding:22px 40px; background:#ffffff; height:284px; }
.spechead { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.spechead h2 { font-size:22px; font-weight:600; letter-spacing:-0.6px; margin:0; color:#050403; }
.spechead a { font-size:13px; font-weight:500; color:#dd4300; }
.table { border:1px solid #dfdeda; border-radius:6px; overflow:hidden; }
.trow { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; }
.trow.head { background:#f8f7f4; }
.trow.head div { font-size:11px; font-weight:600; color:#65635f; text-transform:uppercase; letter-spacing:0.04em; }
.trow div { padding:11px 16px; font-size:13px; color:#050403; border-top:1px solid #dfdeda; }
.trow.head div { border-top:none; }
.trow:nth-child(2) div { border-top:none; }
.accentcell { color:#ff5700; font-weight:600; }
.callouts { display:flex; gap:16px; margin-top:16px; }
.callout-inverse { flex:1; background:#050403; color:#f8f7f4; border-radius:6px; padding:14px 18px; }
.callout-inverse .k { font-size:20px; font-weight:600; letter-spacing:-0.6px; }
.callout-inverse .d { font-size:12px; color:#a09e9a; margin-top:2px; }
.callout-accent { flex:1; background:#ff5700; color:#ffffff; border-radius:6px; padding:14px 18px; }
.callout-accent .k { font-size:20px; font-weight:600; letter-spacing:-0.6px; }
.callout-accent .d { font-size:12px; color:rgba(255,255,255,0.85); margin-top:2px; }
.callout-plain { flex:1; background:#f8f7f4; border:1px solid #dfdeda; color:#050403; border-radius:6px;
padding:14px 18px; }
.callout-plain .k { font-size:20px; font-weight:600; letter-spacing:-0.6px; }
.callout-plain .d { font-size:12px; color:#65635f; margin-top:2px; }
footer { height:120px; background:#1c1a18; padding:20px 40px; display:flex; flex-direction:column;
justify-content:space-between; }
footer .frow { display:flex; align-items:center; justify-content:space-between; }
footer .fbrand { color:#f8f7f4; font-weight:600; font-size:14px; }
footer .flinks { display:flex; gap:20px; }
.pill { border:1px solid #2a2926; color:#a09e9a; border-radius:6px; padding:6px 12px; font-size:11px;
letter-spacing:0.06em; }
footer .fcopy { font-size:11px; color:#65635f; letter-spacing:0.04em; }
</style></head>
<body>
<section class="herodark">
<div class="herotop">
<p class="brand">Moreh</p>
<div class="navlinks"><span class="active">Products</span><span>Solutions</span><span>Performance</span><span>Resources</span><span>Company</span></div>
</div>
<div class="herobody">
<h1>Optimal LLM Inference on Every Accelerator</h1>
<p>The MoAI Inference Framework runs frontier models on the hardware you already have — no single-vendor lock-in, no rewritten stack.</p>
<div class="ctarow">
<button class="btn-primary">Request Demo</button>
<button class="btn-ghost">View Benchmarks</button>
</div>
</div>
</section>
<section class="specwrap">
<div class="spechead">
<h2>MoAI Inference Framework — spec sheet</h2>
<a>View all benchmarks →</a>
</div>
<div class="table">
<div class="trow head">
<div>Accelerator</div><div>Throughput</div><div>Cost / token</div><div>Cluster fabric</div>
</div>
<div class="trow">
<div>AMD Instinct MI300X</div><div class="accentcell">1.00x baseline</div><div>$0.42</div><div>MoAI Fabric</div>
</div>
<div class="trow">
<div>Tenstorrent Wormhole</div><div>0.94x</div><div>$0.31</div><div>MoAI Fabric</div>
</div>
<div class="trow">
<div>Mixed heterogeneous cluster</div><div>1.08x</div><div>$0.27</div><div>MoAI Fabric</div>
</div>
</div>
<div class="callouts">
<div class="callout-inverse"><div class="k">Vendor-neutral</div><div class="d">One framework, every accelerator</div></div>
<div class="callout-accent"><div class="k">Request Demo</div><div class="d">See it on your own workload</div></div>
<div class="callout-plain"><div class="k">Disaggregated serving</div><div class="d">Prefill and decode scale independently</div></div>
</div>
</section>
<footer>
<div class="frow">
<span class="fbrand">Moreh</span>
<div class="flinks">
<span class="pill">Privacy Policy</span>
<span class="pill">Terms of Use</span>
<span class="pill">Careers</span>
</div>
</div>
<span class="fcopy">Infrastructure software for hyperscale AI</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.2px; margin: 0; color: #606060; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #45bea6; color: #000000;
border: none; border-radius: 4px; padding: 13px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #121212;
border: 1px solid #45bea6; border-radius: 4px;
padding: 12px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #606060; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.8px; background: #45bea6; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#121212; }
*{box-sizing:border-box;}
.annbar{height:40px;background:#1b175d;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #d1d1d1;}
.logo{font-size:19px;font-weight:700;color:#1b175d;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.hero{height:236px;background:#ddfaf4;display:flex;align-items:center;padding:0 44px;}
.left{width:52%;}
.left h1{font-size:36px;font-weight:700;line-height:1.2;color:#1b175d;margin:0 0 14px;}
.left p{font-size:15px;color:#1f2937;max-width:340px;margin:0 0 18px;}
.btn{display:inline-block;background:#45bea6;color:#fff;font-size:15px;font-weight:600;padding:13px 24px;border-radius:4px;}
.right{width:44%;height:160px;background:#fff;border-radius:4px;position:relative;background-image:repeating-linear-gradient(#fff 0 22px,#d1d1d1 22px 23px);}
.right:before{content:'';position:absolute;left:20px;top:0;bottom:0;width:2px;background:#e94c89;opacity:.4;}
.section{padding:20px 44px 0;}
.sectitle{font-size:18px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;border:1px solid #d1d1d1;border-radius:8px;padding:14px;position:relative;}
.thumb{height:110px;background:#f3f4f6;border-radius:4px;margin-bottom:8px;}
.badge{position:absolute;top:8px;left:8px;background:#45bea6;color:#fff;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.ptitle{font-size:15px;font-weight:600;}
.pprice{font-size:17px;font-weight:600;margin-top:4px;}
</style>
<div class="annbar">Free Shipping on Orders Over $50</div>
<div class="nav">
<div class="logo">Write Notepads And CO</div>
<div class="navlinks"><div>Notepads</div><div>Pens</div><div>Bags</div><div>Journals</div></div>
</div>
<div class="hero">
<div class="left">
<h1>For professionals and creatives.</h1>
<p>Considered paper goods and everyday carry designed for the working day.</p>
<div class="btn">Shop New Arrivals</div>
</div>
<div class="right"></div>
</div>
<div class="section">
<div class="sectitle">Bestselling Notepads</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb"></div><div class="ptitle">Classic Ruled Notepad</div><div class="pprice">$12.00</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Leather Portfolio</div><div class="pprice">$68.00</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Brass Ferrule Pencil Set</div><div class="pprice">$24.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0d0c1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0d0c1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #0d0c1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #242424; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #2c56ee; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #2c56ee;
border: 1px solid #2c56ee; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #232323;
border: 1px solid #c2c2c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #242424; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fb5b75; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#232323; box-sizing:border-box;
font-family:'Poppins', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:64px; background:#0d0c1a; color:#fff; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:8px; font-size:15px; font-weight:600; }
.navlinks span { padding:8px 12px; border-radius:6px; }
.navlinks .active { background:#2c56ee; }
main { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.hero { flex:1 1 auto; background:#0d0c1a; color:#fff; display:flex; align-items:center; gap:26px;
padding:0 30px; min-height:0; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0;
background:radial-gradient(circle at 20% 80%, rgba(44,86,238,0.25), transparent 55%),
radial-gradient(circle at 80% 20%, rgba(251,91,117,0.2), transparent 50%); }
.hero-copy { position:relative; flex:1; }
.hero-copy h1 { font-size:32px; font-weight:700; margin:0 0 8px; line-height:1.2; }
.hero-copy p { font-size:14px; color:#c9c9dd; margin:0 0 14px; max-width:320px; }
.hero-copy button { background:#2c56ee; color:#fff; border:none; border-radius:8px; padding:12px 24px; font-weight:600; font-size:16px; }
.cab { position:relative; flex:0 0 180px; height:220px; border-radius:8px;
background:linear-gradient(160deg,#1a1a2e,#0d0c1a 70%); border:1px solid #2c2c44; }
.cab::after { content:''; position:absolute; left:20px; right:20px; top:20px; height:60px; border-radius:4px;
background:radial-gradient(circle at 50% 50%, rgba(251,91,117,0.5), transparent 70%), #14142a;
box-shadow:0 0 24px rgba(44,86,238,0.4); }
.grid { flex:0 0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:16px 30px 18px; }
.card { border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.08); display:flex; flex-direction:column; overflow:hidden; }
.thumb { aspect-ratio:4/3; position:relative; }
.t1 { background:linear-gradient(150deg,#3982b6,#0d0c1a 130%); }
.t2 { background:linear-gradient(150deg,#fb5b75,#621620 130%); }
.t3 { background:linear-gradient(150deg,#2c56ee,#0d0c1a 130%); }
.badge { position:absolute; top:8px; left:8px; font-size:11px; font-weight:600; text-transform:uppercase;
letter-spacing:0.5px; padding:2px 8px; border-radius:4px; color:#fff; }
.badge.pink { background:#fb5b75; }
.badge.maroon { background:#621620; }
.info { padding:10px 12px 12px; }
.info h3 { font-size:16px; font-weight:500; margin:0 0 4px; }
.info .price { font-size:22px; font-weight:700; margin:0; }
footer { flex:0 0 auto; height:52px; background:#0d0c1a; color:#fff; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Arcade1up</p>
<div class="navlinks"><span class="active">Arcade</span><span>Pinball</span><span>Accessories</span></div>
</nav>
<main>
<div class="hero">
<div class="hero-copy">
<h1>Bring the arcade home.</h1>
<p>Full-size cabinets with neon bezel lighting and dozens of classic titles built in.</p>
<button>Shop Cabinets</button>
</div>
<div class="cab"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb t1"></div>
<div class="info"><h3>Street Fighter II Cabinet</h3><p class="price">$599.00</p></div></div>
<div class="card"><div class="thumb t2"><span class="badge pink">Special Edition</span></div>
<div class="info"><h3>Pac-Man 40th Anniversary</h3><p class="price">$449.00</p></div></div>
<div class="card"><div class="thumb t3"><span class="badge maroon">Limited</span></div>
<div class="info"><h3>Marvel vs. Capcom Pinball</h3><p class="price">$799.00</p></div></div>
</div>
</main>
<footer>
<span>© Arcade1up</span>
<span>Assembly Guide · Warranty · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #090b0d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #090b0d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #090b0d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #242833; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #fe5000; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #090b0d;
border: 1px solid #fe5000; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #242d35;
border: 1px solid #c2c2c2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #242833; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #fe5000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:flex; flex-direction:column; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#242d35; box-sizing:border-box;
font-family:'colfax-web','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
background:#090b0d; }
.brand { font-size:19px; font-weight:600; color:#ffffff; letter-spacing:0.5px; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:13px; font-weight:500; color:#abc7ca; }
.cart { background:#fe5000; color:#fff; font-size:12px; font-weight:600; padding:8px 16px; border-radius:4px; }
.hero { position:relative; height:320px; background:linear-gradient(120deg,#242d35,#090b0d 70%);
display:flex; align-items:center; padding:0 40px; flex-shrink:0; }
.hero::after { content:''; position:absolute; right:60px; top:50%; transform:translateY(-50%); width:220px; height:220px;
border-radius:12px; background:linear-gradient(150deg,#abc7ca,#242833); }
.htext { max-width:420px; z-index:1; }
.htext .kicker { font-size:12px; font-weight:600; color:#fe5000; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:12px; }
.htext h1 { font-size:34px; font-weight:600; color:#ffffff; margin:0 0 14px; line-height:1.15; }
.htext p { font-size:14px; color:#abc7ca; line-height:1.5; margin:0 0 18px; }
.btn { display:inline-block; background:#fe5000; color:#fff; font-size:13px; font-weight:600; padding:12px 26px; border-radius:4px; }
.section { padding:24px 40px 0; }
.section h2 { font-size:18px; font-weight:600; color:#242d35; margin:0 0 14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.card { padding:0; }
.cover { height:88px; border-radius:6px; margin-bottom:10px; }
.r1 .cover { background:#fe5000; } .r2 .cover { background:#242833; } .r3 .cover { background:#abc7ca; } .r4 .cover { background:#334fb4; }
.card .t { font-size:14px; font-weight:600; color:#242d35; margin:0 0 4px; }
.card .p { font-size:13px; color:#4a5259; }
.trust { margin-top:auto; flex-shrink:0; display:flex; padding:14px 40px; background:#191919; }
.trust span { flex:1; text-align:center; font-size:11px; font-weight:500; color:#abc7ca; }
</style></head>
<body>
<nav>
<div class="brand">Grundens</div>
<div class="navlinks"><span>Rain Gear</span><span>Bibs</span><span>Footwear</span><span>Commercial</span></div>
<div class="cart">Cart · 0</div>
</nav>
<div class="hero">
<div class="htext">
<div class="kicker">Built for the deck, not the runway</div>
<h1>Foul weather gear that doesn't quit.</h1>
<p>Gore-Tex, PVC, and neoprene built for the harshest marine conditions — trusted by commercial fishermen since 1911.</p>
<span class="btn">Shop Rain Gear</span>
</div>
</div>
<div class="section">
<h2>Best Sellers</h2>
<div class="grid">
<div class="card r1"><div class="cover"></div><div class="t">Brigg 40 Jacket</div><div class="p">$249.99</div></div>
<div class="card r2"><div class="cover"></div><div class="t">Neptune Bib</div><div class="p">$189.99</div></div>
<div class="card r3"><div class="cover"></div><div class="t">Deck-Boss Boot</div><div class="p">$129.99</div></div>
<div class="card r4"><div class="cover"></div><div class="t">Weather Watch Jacket</div><div class="p">$99.99</div></div>
</div>
</div>
<div class="trust"><span>Since 1911</span><span>Commercial-Grade</span><span>Free Returns</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #143a57; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #143a57;
border: 1px solid #143a57; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #444444;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #da4c26; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#222; font-family:Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #e3e3e3;}
.logo{font-family:'Bebas Neue','Arial Narrow',sans-serif;font-size:24px;letter-spacing:1px;color:#143a57;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.3px;}
.hero{background:#143a57;background-image:linear-gradient(rgba(20,58,87,.55),rgba(20,58,87,.75)),linear-gradient(120deg,#3d6d8f,#143a57 70%);color:#fff;min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.hero h1{font-family:'Bebas Neue','Arial Narrow',sans-serif;font-size:48px;letter-spacing:1px;margin:0 0 8px;}
.hero p{font-size:14px;color:#dce8f0;margin:0 0 16px;}
.ctas{display:flex;gap:12px;}
.cta{background:#143a57;color:#fff;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:12px 26px;border-radius:9999px;}
.cta.accent{background:#83e20c;color:#222;}
.section{padding:22px 30px;}
.grid{display:flex;gap:18px;}
.card{flex:1;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.08);overflow:hidden;}
.card .img{aspect-ratio:4/3;height:110px;}
.k1{background:linear-gradient(135deg,#f4d35e,#143a57);}
.k2{background:linear-gradient(135deg,#83e20c,#0f2d44);}
.k3{background:linear-gradient(135deg,#0caeff,#143a57);}
.card .info{padding:12px 14px;position:relative;}
.badge{position:absolute;top:-30px;left:12px;background:#da4c26;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 7px;border-radius:2px;}
.card h3{font-size:17px;font-weight:500;margin:0 0 4px;}
.card .price{font-size:19px;font-weight:600;color:#143a57;}
</style>
<div class="nav">
<div class="logo">Delta Kayaks</div>
<div class="navlinks"><span>Touring</span><span>Fishing</span><span>Recreational</span><span>Dealers</span></div>
</div>
<div class="hero">
<h1>Lightweight. Thermoform. Fast.</h1>
<p>North American built touring kayaks for water that doesn't wait.</p>
<div class="ctas"><a class="cta accent">Shop Now</a><a class="cta" style="background:transparent;border:2px solid #fff;">Find a Dealer</a></div>
</div>
<div class="section">
<div class="grid">
<div class="card"><div class="img k1"></div><div class="info"><span class="badge">Sale</span><h3>Delta 14</h3><div class="price">$2,199</div></div></div>
<div class="card"><div class="img k2"></div><div class="info"><h3>Delta 12S</h3><div class="price">$1,899</div></div></div>
<div class="card"><div class="img k3"></div><div class="info"><span class="badge" style="background:#003388;">New</span><h3>Delta Angler</h3><div class="price">$2,599</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #29292d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #29292d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #29292d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #90a7a3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f7f7f7; color: #29292d;
border: 1px solid #108474; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f7f7f7; color: #485354;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #90a7a3; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ea3d26; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family: 'Nunito Sans', Arial, sans-serif; background:#f7f7f7; color:#485354; }
*{box-sizing:border-box;}
.pier{font-family:'Courier New', monospace; font-weight:700;}
.nav{height:56px;background:#29292d;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.logo{color:#fff;font-size:18px;font-weight:700;letter-spacing:-.5px;font-family:'Courier New',monospace;}
.navlinks{display:flex;gap:20px;}
.navlinks div{color:#fff;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.heroimg{height:280px;background:linear-gradient(160deg,#108474 0%, #90a7a3 55%, #c8c6c5 100%);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:26px 28px;}
.heroimg:before{content:'';position:absolute;right:-40px;top:40px;width:200px;height:200px;background:#ea3d26;opacity:.2;border-radius:50%;}
.heroimg:after{content:'';position:absolute;left:60px;top:-60px;width:150px;height:150px;background:#f6f1a0;opacity:.25;border-radius:50%;}
.herotext{position:relative;z-index:1;}
.herotext h1{color:#fff;font-family:'Courier New',monospace;font-weight:700;font-size:32px;margin:0 0 6px;letter-spacing:-.5px;text-shadow:0 2px 8px rgba(0,0,0,.2);}
.herotext p{color:#f0efef;font-size:14px;margin:0 0 14px;max-width:400px;}
.herocta{display:inline-block;background:#ea3d26;color:#fff;font-size:14px;font-weight:600;letter-spacing:.3px;padding:11px 24px;border-radius:9999px;}
.catstrip{display:flex;gap:8px;padding:14px 28px;}
.pill{padding:6px 16px;border-radius:9999px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;}
.pill.on{background:#108474;color:#fff;}
.pill.off{color:#90a7a3;border:1px solid #c8c6c5;}
.grid{display:flex;gap:12px;padding:0 28px;}
.card{width:150px;background:#fff;border-radius:8px;padding:8px;}
.thumb{height:105px;border-radius:8px;margin-bottom:6px;}
.ptitle{font-size:13px;font-weight:600;color:#29292d;line-height:1.25;height:32px;overflow:hidden;}
.pprice{font-size:14px;font-weight:700;color:#108474;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#29292d;display:flex;align-items:center;justify-content:space-between;padding:0 28px;font-size:12px;color:#c8c6c5;}
.footer span{margin-left:14px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Janji</div>
<div class="navlinks"><div>Journeys</div><div>Apparel</div><div>Gear</div><div>Our Story</div></div>
</div>
<div class="heroimg">
<div class="herotext">
<h1>RUN THE PLACES YOU'VE NEVER BEEN</h1>
<p>Technical gear inspired by the trails, jungles, and altitudes we've run through.</p>
<div class="herocta">Shop Journeys</div>
</div>
</div>
<div class="catstrip">
<div class="pill on">Costa Rica</div><div class="pill off">Peru</div><div class="pill off">Iceland</div><div class="pill off">Apparel</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#108474,#485354)"></div><div class="ptitle">Costa Rica Trail Runner Tee</div><div class="pprice">$48.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ea3d26,#899379)"></div><div class="ptitle">Volcanic Ridge Running Short</div><div class="pprice">$54.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f6f1a0,#108474)"></div><div class="ptitle">Altitude Hydration Vest</div><div class="pprice">$78.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b45457,#29292d)"></div><div class="ptitle">Basalt Windbreaker Jacket</div><div class="pprice">$95.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#90a7a3,#c8c6c5)"></div><div class="ptitle">Mossy Sage Long Sleeve</div><div class="pprice">$42.00</div></div>
</div>
<div class="footer"><span>© Run the Places</span><span>Journeys Fund<span> Returns</span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4e2eed; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4e2eed; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #aa9bf1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5d4cf2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4e2eed; color: #ffffff;
border: 1px solid #5d4cf2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4e2eed; color: #f5f5f5;
border: 1px solid #694eee; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aa9bf1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5033ee; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body {
display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#010a26; box-sizing:border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #dedede; }
.brand { font-size:17px; font-weight:800; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; color:#010a26; }
.navlinks span.active { color:#4e2eed; font-weight:700; }
.cta-violet { background:#4e2eed; color:#fff; border:none; border-radius:100px; padding:8px 18px; font-size:12px; font-weight:700; white-space:nowrap; }
.hero { flex:0 0 auto; padding:20px 32px 12px; }
.badge { display:inline-block; background:#5d4cf2; color:#fff; border-radius:9999px; padding:3px 10px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:10px; }
.hero h1 { font-size:30px; font-weight:800; letter-spacing:-0.6px; line-height:1.15; margin:0 0 6px; max-width:560px; }
.hero p { font-size:14px; color:#3a415a; margin:0 0 14px; max-width:520px; }
.chiprow { display:flex; gap:10px; }
.chip { background:#15161b; color:#f5f6fa; border-radius:60px; padding:9px 18px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; }
.chip .dot { width:6px; height:6px; border-radius:50%; background:#4e2eed; }
.tablewrap { flex:1 1 auto; margin:8px 32px 0; background:#f5f6fa; border-radius:16px; padding:16px 20px; overflow:hidden; }
.tw-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.tw-head h2 { font-size:15px; font-weight:800; margin:0; }
.tw-head span { font-size:12px; color:#65798e; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:11px; font-weight:700; color:#737a94; text-transform:uppercase; letter-spacing:.04em; padding:0 0 8px; border-bottom:1px solid #dedede; }
td { padding:10px 0; border-bottom:1px solid #dedede; font-size:13px; }
tr:last-child td { border-bottom:none; }
.bankname { display:flex; align-items:center; gap:10px; font-weight:700; }
.bankdot { width:28px; height:28px; border-radius:8px; flex:0 0 28px; }
.rate { font-weight:800; color:#010a26; }
.rate small { font-weight:400; color:#65798e; font-size:11px; }
.applybtn { background:#ffffff; color:#4e2eed; border:1.5px solid #4e2eed; border-radius:100px; padding:5px 14px; font-size:11px; font-weight:700; }
footer { flex:0 0 40px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-top:1px solid #dedede; font-size:11px; color:#65798e; }
</style></head>
<body>
<nav>
<p class="brand">Finda</p>
<div class="navlinks"><span class="active">Loans</span><span>Insurance</span><span>Compare</span><span>About</span></div>
<button class="cta-violet">Get the app</button>
</nav>
<section class="hero">
<span class="badge">1-min compare</span>
<h1>See every bank's rate before you apply</h1>
<p>Finda lines up offers from Korea's largest lenders side by side — no steering, no hidden terms.</p>
<div class="chiprow">
<div class="chip"><span class="dot"></span>Loan Interest</div>
<div class="chip"><span class="dot"></span>Take-home Pay</div>
<div class="chip"><span class="dot"></span>DSR Calculator</div>
</div>
</section>
<section class="tablewrap">
<div class="tw-head"><h2>Top matches for you</h2><span>Updated just now</span></div>
<table>
<thead><tr><th>Lender</th><th>APR</th><th>Monthly</th><th>Term</th><th></th></tr></thead>
<tbody>
<tr><td><div class="bankname"><span class="bankdot" style="background:#c5b0f4"></span>Silverline Bank</div></td><td class="rate">3.4%<br><small>fixed</small></td><td>₩412,000</td><td>36 mo</td><td><button class="applybtn">Apply</button></td></tr>
<tr><td><div class="bankname"><span class="bankdot" style="background:#dceeb1"></span>Northgate Trust</div></td><td class="rate">3.9%<br><small>variable</small></td><td>₩398,500</td><td>48 mo</td><td><button class="applybtn">Apply</button></td></tr>
<tr><td><div class="bankname"><span class="bankdot" style="background:#efd4d4"></span>Crestview Capital</div></td><td class="rate">4.2%<br><small>fixed</small></td><td>₩375,200</td><td>60 mo</td><td><button class="applybtn">Apply</button></td></tr>
<tr><td><div class="bankname"><span class="bankdot" style="background:#c8e6cd"></span>Bluewave Savings</div></td><td class="rate">4.6%<br><small>variable</small></td><td>₩361,000</td><td>60 mo</td><td><button class="applybtn">Apply</button></td></tr>
</tbody>
</table>
</section>
<footer>
<span>© Finda</span>
<span>Finda · Terms · Privacy · Partner lenders</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #c0151e; color: #ffffff;
border: none; border-radius: 0px; padding: 10px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #1a1a1a;
border: 1px solid #c0151e; border-radius: 0px;
padding: 9px 17px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #1a1a1a;
border: 1px solid #d8d8d8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.9px; background: #f5f5f5; color: #6a6a6a;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#2e2e2e; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:54px; background:#ffffff; border-bottom:1px solid #d8d8d8; display:flex; align-items:center;
justify-content:space-between; padding:0 24px; }
.brand { font-size:18px; font-weight:700; color:#1a1a1a; }
.navlinks { display:flex; gap:18px; font-size:14px; font-weight:500; color:#1a1a1a; }
.search-box { width:180px; height:32px; border:1px solid #d8d8d8; background:#f5f5f5; font-size:12px; color:#6a6a6a;
display:flex; align-items:center; padding:0 12px; }
.fmttabs { display:flex; gap:20px; padding:8px 24px; border-bottom:1px solid #d8d8d8; font-size:11px; font-weight:700;
letter-spacing:0.9px; text-transform:uppercase; }
.fmttabs span.active { color:#1a1a1a; border-bottom:2px solid #1a1a1a; padding-bottom:8px; }
.fmttabs span:not(.active) { color:#6a6a6a; padding-bottom:8px; }
.hero { height:130px; background:#111111; display:flex; align-items:center; padding:0 24px; }
.hero h1 { color:#f0f0f0; font-size:26px; font-weight:700; margin:0 0 4px; }
.hero p { color:#9a9a9a; font-size:13px; margin:0; }
.section-header { font-size:11px; font-weight:700; letter-spacing:0.9px; text-transform:uppercase; color:#6a6a6a;
border-bottom:1px solid #d8d8d8; padding:14px 24px 8px; }
.row { display:flex; align-items:center; gap:12px; padding:9px 24px; border-bottom:1px solid #d8d8d8; }
.row .art { width:80px; height:80px; background:linear-gradient(150deg,#1a1a1a,#c0151e); flex-shrink:0; }
.row .info { flex:1; }
.row .title { font-size:14px; font-weight:600; color:#1a1a1a; }
.row .artist { font-size:13px; color:#6a6a6a; }
.row .label { font-size:12px; color:#9a9a9a; }
.row .fmt { font-size:11px; font-weight:700; text-transform:uppercase; color:#6a6a6a; background:#f5f5f5; padding:2px 6px; margin-right:8px; }
.row .price { font-size:14px; font-weight:700; color:#1a1a1a; width:64px; text-align:right; }
.row .newflag { background:#c0151e; color:#fff; font-size:11px; font-weight:700; padding:3px 6px; margin-right:8px; }
footer { position:absolute; bottom:0; left:0; right:0; height:0; }
.wrap { position:relative; height:640px; }
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="brand">Downtown Music Gallery</div>
<div class="navlinks"><span>Jazz</span><span>Avant-Garde</span><span>Rock</span><span>Imprints</span></div>
<div class="search-box">Search the catalog...</div>
</nav>
<div class="fmttabs"><span class="active">Vinyl</span><span>CD</span><span>Cassette</span><span>Digital</span><span>Books</span></div>
<div class="hero">
<div><h1>Forty years of avant-garde inventory.</h1><p>New York's outpost for jazz, noise, and niche-genre listening.</p></div>
</div>
<div class="section-header">New Arrivals</div>
<div class="row"><span class="newflag">NEW</span><div class="art"></div><div class="info"><div class="title">Spiral Chamber Sessions</div><div class="artist">Marcus Feld Quartet</div><div class="label">Tzadik Editions</div></div><span class="fmt">LP</span><div class="price">$32.00</div></div>
<div class="row"><div class="art"></div><div class="info"><div class="title">Frequencies of Silence</div><div class="artist">Anaïs Rouge</div><div class="label">Downtown Imprint</div></div><span class="fmt">CD</span><div class="price">$18.00</div></div>
<div class="row"><span class="newflag">NEW</span><div class="art"></div><div class="info"><div class="title">Nocturne for Broken Reeds</div><div class="artist">The Loft Ensemble</div><div class="label">Nonesuch Rarities</div></div><span class="fmt">LP</span><div class="price">$28.00</div></div>
<div class="row"><div class="art"></div><div class="info"><div class="title">Field Recordings Vol. IV</div><div class="artist">Otis Vane</div><div class="label">Downtown Imprint</div></div><span class="fmt">CASS</span><div class="price">$14.00</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FAFAF7; color: #1A1917;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FAFAF7; color: #1A1917;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.25; margin: 0; color: #1A1917; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #7A736E; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; letter-spacing: 0.04em; background: #BF7B5E; color: #FFFFFF;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; letter-spacing: 0.04em; background: #FAFAF7; color: #1A1917;
border: 1px solid #BF7B5E; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FAFAF7; color: #1A1917;
border: 1px solid #c2c2bf; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7A736E; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.45; letter-spacing: 0.12em; background: #F0E6DC; color: #A66548;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FAFAF7; color:#1A1917; box-sizing:border-box;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#FAFAF7; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #EDE8E3; }
.brand { font-size:18px; font-weight:500; margin:0; letter-spacing:0.01em; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:13px; font-weight:500; letter-spacing:0.02em; color:#1A1917; }
.cart { background:transparent; border:1px solid #DDD8D3; border-radius:999px; padding:8px 18px; font-size:13px; font-weight:500; }
main { display:flex; height:576px; }
.stage { width:340px; background:#F0E6DC; display:flex; align-items:center; justify-content:center; }
.bottle { width:120px; height:230px; position:relative; }
.bottle-cap { width:60px; height:26px; background:#BF7B5E; border-radius:8px 8px 4px 4px; margin:0 auto; }
.bottle-body { width:120px; height:200px; margin-top:-4px; border-radius:14px; background:linear-gradient(180deg,#fff 0%,#f6ede6 100%);
border:1px solid #E3C2B4; display:flex; align-items:center; justify-content:center; box-shadow:0 20px 40px rgba(191,123,94,0.18); }
.bottle-label { width:80px; height:100px; border:1px solid #A66548; border-radius:4px; display:flex; align-items:center;
justify-content:center; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:#A66548; text-align:center; padding:6px; }
.info { flex:1; padding:30px 34px; display:flex; flex-direction:column; gap:12px; }
.label-caps { font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:#7A736E; margin:0; }
h1 { font-size:30px; font-weight:300; margin:0; letter-spacing:-0.02em; line-height:1.15; }
.sub { font-size:14px; color:#3C3835; margin:0; line-height:1.5; max-width:460px; }
.shade-row { display:flex; gap:10px; align-items:center; margin-top:4px; }
.shade-row .lbl { font-size:11px; color:#7A736E; margin-right:6px; }
.sw { width:34px; height:34px; border-radius:999px; border:2px solid transparent; }
.sw.on { border-color:#1A1917; }
.sw1{background:#3b241a;} .sw2{background:#6b3d24;} .sw3{background:#a9714a;} .sw4{background:#c99a6a;} .sw5{background:#e6c99b;}
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:6px; }
.price { font-size:22px; font-weight:400; }
.badge { display:inline-flex; background:#F0E6DC; color:#A66548; font-size:11px; font-weight:600; letter-spacing:0.12em;
text-transform:uppercase; border-radius:4px; padding:4px 8px; width:fit-content; }
.actions { display:flex; gap:12px; margin-top:8px; }
.btn-primary { background:#BF7B5E; color:#fff; border-radius:999px; padding:14px 28px; height:48px;
display:flex; align-items:center; font-size:14px; font-weight:500; letter-spacing:0.04em; }
.btn-secondary { background:#FAFAF7; color:#1A1917; border:1px solid #DDD8D3; border-radius:999px; padding:13px 27px;
height:48px; display:flex; align-items:center; font-size:14px; font-weight:500; }
.quiz-note { margin-top:auto; border-top:1px solid #EDE8E3; padding-top:12px; display:flex; align-items:center; gap:10px; }
.quiz-note .bar { flex:1; height:3px; background:#DDD8D3; border-radius:999px; position:relative; }
.quiz-note .bar::after { content:''; position:absolute; left:0; top:0; height:100%; width:72%; background:#BF7B5E; border-radius:999px; }
.quiz-note span { font-size:11px; color:#7A736E; white-space:nowrap; }
</style></head>
<body>
<nav>
<p class="brand">Aura Hair Care</p>
<div class="navlinks"><span>Quiz</span><span>Shop</span><span>How It Works</span><span>Reviews</span></div>
<div class="cart">Bag (1)</div>
</nav>
<main>
<div class="stage">
<div class="bottle">
<div class="bottle-cap"></div>
<div class="bottle-body"><div class="bottle-label">AURA<br>Color<br>No. 6.3</div></div>
</div>
</div>
<div class="info">
<p class="label-caps">Your Formula</p>
<h1>Custom Color, Golden Brown 6.3</h1>
<p class="sub">Mixed to your exact quiz results — ammonia-free permanent color with a 20-volume developer, matched to your natural warmth.</p>
<div class="shade-row"><span class="lbl">Shade family</span>
<div class="sw sw1"></div><div class="sw sw2"></div><div class="sw sw3 on"></div><div class="sw sw4"></div><div class="sw sw5"></div>
</div>
<span class="badge">Recommended For You</span>
<div class="price-row"><span class="price">$38.00</span></div>
<div class="actions">
<div class="btn-primary">Add to Formula</div>
<div class="btn-secondary">Retake Quiz</div>
</div>
<div class="quiz-note"><div class="bar"></div><span>Step 5 of 7 — Developer Volume</span></div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f7fa; color: #303133;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f7fa; color: #303133;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #303133; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #909399; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; background: #409eff; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #f5f7fa; color: #409eff;
border: 1px solid #409eff; border-radius: 999px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #f5f7fa; color: #303133;
border: 1px solid #c4c6c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #909399; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.33; background: #ecf5ff; color: #409eff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f7fa; font-family:'Helvetica Neue',Arial,sans-serif; color:#606266; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#fff;border-bottom:1px solid #c0c4cc;}
.logo{font-size:19px;font-weight:700;color:#303133;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;color:#606266;}
.hero{height:230px;display:flex;background:#fff;}
.herotext{width:46%;padding:0 36px;display:flex;flex-direction:column;justify-content:center;}
h1{font-size:28px;font-weight:700;color:#303133;margin:0 0 10px;line-height:1.2;}
.sub{font-size:13px;color:#606266;margin:0 0 16px;max-width:300px;}
.cta{display:inline-block;background:#409eff;color:#fff;font-size:13px;font-weight:600;padding:11px 24px;border-radius:4px;width:fit-content;}
.heroimg{width:54%;background:#f5f7fa;position:relative;}
.card1{position:absolute;left:80px;top:60px;width:140px;height:90px;background:linear-gradient(135deg,#409eff,#303133);border-radius:8px;}
.card2{position:absolute;left:140px;top:100px;width:70px;height:40px;background:#67c23a;border-radius:4px;}
.spectable{display:flex;background:#fff;border-top:1px solid #c0c4cc;border-bottom:1px solid #c0c4cc;}
.speccell{flex:1;text-align:center;padding:10px;border-right:1px solid #ebeef5;}
.speccell:last-child{border-right:none;}
.speclabel{font-size:10px;color:#909399;text-transform:uppercase;letter-spacing:.4px;}
.specvalue{font-size:14px;font-weight:600;color:#303133;margin-top:2px;}
.sec{padding:18px 36px 0;}
.sectitle{font-size:16px;font-weight:600;margin-bottom:14px;color:#303133;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#fff;border-radius:4px;border:1px solid #ebeef5;padding:10px;position:relative;}
.thumb{height:82px;background:#f5f7fa;border-radius:4px;margin-bottom:8px;}
.badge{position:absolute;top:16px;left:16px;background:#e6a23c;color:#fff;font-size:9px;font-weight:600;padding:2px 8px;border-radius:4px;}
.pname{font-size:13px;font-weight:500;color:#303133;margin-bottom:3px;}
.pprice{font-size:13px;font-weight:600;color:#409eff;}
</style>
<div class="nav">
<div class="logo">Lexar</div>
<div class="navlinks"><span>SD Cards</span><span>SSDs</span><span>Flash Drives</span><span>Compatibility</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Storage You Can Verify.</h1>
<div class="sub">Read/write specs and compatibility tables built for repeat technical evaluation.</div>
<div class="cta">Compare Products</div>
</div>
<div class="heroimg"><div class="card1"></div><div class="card2"></div></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Read Speed</div><div class="specvalue">1,700MB/s</div></div>
<div class="speccell"><div class="speclabel">Write Speed</div><div class="specvalue">1,000MB/s</div></div>
<div class="speccell"><div class="speclabel">Capacity</div><div class="specvalue">Up to 2TB</div></div>
<div class="speccell"><div class="speclabel">Warranty</div><div class="specvalue">Limited Lifetime</div></div>
</div>
<div class="sec">
<div class="sectitle">Popular Products</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb"></div><div class="pname">Professional NM790 SSD</div><div class="pprice">$89.99</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Professional 1066x SD</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="thumb"></div><div class="pname">JumpDrive S80 USB</div><div class="pprice">$14.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2a2622;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2a2622;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #2a2622; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #948e88; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #f38230; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #2a2622;
border: 1px solid #f38230; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #2a2622;
border: 1px solid #cac9c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #948e88; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.6px; background: #f38230; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Sofia Sans', 'Helvetica Neue', Arial, sans-serif; background:#ffffff; color:#555555; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e5e5e5;}
.logo{font-family:'Gotham-Black','Helvetica Neue',Arial,sans-serif;font-size:20px;font-weight:700;color:#2a2622;}
.navlinks{display:flex;gap:24px;font-family:'Gotham-Black',Arial,sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;color:#2a2622;}
.navlinks .on{border-bottom:3px solid #f38230;padding-bottom:20px;}
.hero{height:230px;display:flex;background:#222222;}
.herotext{width:48%;display:flex;flex-direction:column;justify-content:center;padding:0 32px;}
.herotext h1{font-family:'EurostileNextLTPro-Regular',Arial,sans-serif;font-size:32px;font-weight:800;color:#fff;margin:0 0 10px;letter-spacing:-0.4px;line-height:1.12;}
.herotext p{font-size:14px;color:#eaeeef;margin:0 0 16px;max-width:300px;}
.cta{display:inline-block;background:#f38230;color:#fff;font-family:'Gotham-Black',Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:12px 24px;border-radius:4px;width:fit-content;}
.heroimg{width:52%;position:relative;background:linear-gradient(160deg,#222222,#2a2622);}
.machine{position:absolute;left:60px;top:36px;width:150px;height:150px;border-radius:8px;background:#040404;}
.crema{position:absolute;left:100px;top:76px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#f38230,#7a3a10 80%);}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:150px;background:#fff;border:1px solid #eeeeee;border-radius:8px;padding:12px;position:relative;}
.card:hover{}
.thumb{height:88px;border-radius:6px;margin-bottom:8px;}
.pname{font-family:'Gotham-Black',Arial,sans-serif;font-size:13px;font-weight:700;color:#2a2622;}
.pprice{font-family:'Gotham-Black',Arial,sans-serif;font-size:16px;font-weight:700;color:#2a2622;margin-top:4px;}
.badge{position:absolute;top:8px;left:8px;background:#f38230;color:#fff;font-family:'Gotham-Black',Arial,sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;border-radius:4px;padding:3px 7px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#222222;color:#fff;font-size:12px;border-top:4px solid #f38230;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Krups</div>
<div class="navlinks"><div class="on">Espresso</div><div>Coffee Makers</div><div>Grinders</div><div>Accessories</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Precision brewed. Every single cup.</h1>
<p>Full-bean espresso systems engineered for a crema that never quits.</p>
<div class="cta">Shop Espresso</div>
</div>
<div class="heroimg"><div class="machine"></div><div class="crema"></div></div>
</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#f38230,#2a2622)"></div><div class="pname">EA895 Espresseria</div><div class="pprice">$699.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#eaeeef,#948e88)"></div><div class="pname">Precise Pour Kettle</div><div class="pprice">$79.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2a2622,#f38230)"></div><div class="pname">Silent Vortex Grinder</div><div class="pprice">$149.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f38230,#948e88)"></div><div class="pname">Duo Filter Coffee Maker</div><div class="pprice">$99.99</div></div>
</div>
<div class="footer"><span>© Krups Kitchen Authority</span><span>Warranty · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; background: #ff5501; color: #ffffff;
border: none; border-radius: 3px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; background: #ffffff; color: #1979c3;
border: 1px solid #ff5501; border-radius: 3px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.2px; background: #ff5501; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:'Open Sans',Arial,'Helvetica Neue',Helvetica,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#ffffff; border-bottom:1px solid #d1d1d1; display:flex; align-items:center;
justify-content:space-between; padding:0 28px; }
.brand { font-size:20px; font-weight:700; color:#ff5501; }
.searchbar { flex:1; max-width:380px; margin:0 24px; display:flex; }
.searchbar input { flex:1; border:1px solid #d1d1d1; border-radius:3px 0 0 3px; padding:9px 12px; font-size:13px; color:#303030; background:#f2f2f2; }
.searchbar .go { background:#1979c3; color:#fff; border:none; border-radius:0 3px 3px 0; padding:0 16px; font-size:12px; font-weight:700; }
.acct { font-size:12px; color:#1979c3; font-weight:600; }
.breadcrumb { height:24px; padding:6px 28px 0; font-size:11px; color:#777777; }
.wrap { display:flex; height:508px; padding:14px 28px; gap:26px; }
.gallery { width:260px; flex-shrink:0; }
.shot { height:300px; border-radius:4px; background:linear-gradient(160deg,#f2f2f2,#ffffff); border:1px solid #e4e4e4;
display:flex; align-items:center; justify-content:center; position:relative; }
.cart-shape { width:60px; height:150px; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,#303030,#111111); position:relative; }
.cart-shape::before { content:''; position:absolute; top:0; left:8px; right:8px; height:34px; background:#ff5501; border-radius:6px 6px 0 0; }
.save-badge { position:absolute; top:12px; left:12px; background:#c07600; color:#fff; font-size:10px; font-weight:700; padding:4px 8px; border-radius:3px; }
.thumbs { display:flex; gap:8px; margin-top:10px; }
.thumb { width:44px; height:44px; border:1px solid #d1d1d1; border-radius:3px; background:#f2f2f2; }
.info { flex:1; display:flex; flex-direction:column; gap:10px; }
.info h1 { margin:0; font-size:22px; font-weight:700; line-height:1.25; }
.sku { font-size:12px; color:#555555; }
.stars-row { font-size:12px; color:#555555; }
.stars { color:#ff5501; }
.price-block { background:#fdf0d5; border-radius:4px; padding:12px 16px; display:flex; align-items:baseline; gap:10px; }
.price { font-size:26px; font-weight:700; color:#6f4400; }
.price-old { font-size:14px; color:#777; text-decoration:line-through; }
.price-save { font-size:12px; color:#6f4400; font-weight:700; }
.compat { font-size:12px; color:#303030; }
.compat b { color:#111; }
.badges { display:flex; gap:8px; }
.badges span { font-size:11px; border:1px solid #d1d1d1; border-radius:3px; padding:4px 8px; color:#303030; }
.buy-row { display:flex; gap:10px; margin-top:auto; }
.qty { width:56px; border:1px solid #d1d1d1; border-radius:3px; text-align:center; font-size:13px; padding:9px 0; }
.btn-buy { flex:1; background:#ff5501; color:#fff; border:none; border-radius:3px; font-size:14px; font-weight:700; }
.btn-buy:after { content:'Add to Cart'; }
footer { height:52px; background:#f2f2f2; border-top:1px solid #d1d1d1; display:flex; align-items:center;
justify-content:space-between; padding:0 28px; font-size:11px; color:#555555; }
.footer-badges { display:flex; gap:18px; }
.footer-badges span b { color:#1979c3; }
</style></head>
<body>
<nav>
<p class="brand">123inkjets</p>
<div class="searchbar"><input placeholder="Search by printer model, e.g. HP OfficeJet 6978"><span class="go">Search</span></div>
<span class="acct">My Account</span>
</nav>
<div class="breadcrumb">Ink & Toner / Compatible Cartridges / Multi-Pack</div>
<div class="wrap">
<div class="gallery">
<div class="shot"><span class="save-badge">Save 62% vs OEM</span><div class="cart-shape"></div></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<h1>Compatible Ink Cartridge 4-Pack — High Yield Replacement</h1>
<span class="sku">SKU: 123-CMY-BK-HY · In Stock, ships today</span>
<div class="stars-row"><span class="stars">★★★★★</span> 4.7 (2,184 reviews)</div>
<div class="price-block">
<span class="price">$34.99</span>
<span class="price-old">$92.00</span>
<span class="price-save">You save $57.01</span>
</div>
<p class="compat">Works with: <b>HP OfficeJet 6978, 6968, Pro 6978</b> — verify your printer model above before ordering.</p>
<div class="badges"><span>2-Year Guarantee</span><span>Free Returns</span><span>Ships Same Day</span></div>
<div class="buy-row">
<input class="qty" value="1">
<button class="btn-buy"></button>
</div>
</div>
</div>
<footer>
<span>© 123inkjets</span>
<div class="footer-badges"><span><b>✓</b> 100% Satisfaction</span><span><b>✓</b> Price Match</span><span><b>✓</b> Free Shipping $50+</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.5rem; font-weight: 600; line-height: 2rem; letter-spacing: -0.04rem; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.5rem; font-weight: 600; line-height: 2rem; letter-spacing: -0.04rem; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #0366DD; color: #ffffff;
border: none; border-radius: 999px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #FFFFFF; color: #0366DD;
border: 1px solid #0366DD; border-radius: 999px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #FFFFFF; color: #111111;
border: 1px solid #c4c4c4; border-radius: 0.5rem;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dceafa; color: #0366DD;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; background: #FFFFFF; box-sizing: border-box; letter-spacing: -0.00875rem; }
*, *::before, *::after { box-sizing: border-box; }
.topbar { height: 52px; width: 960px; display: flex; align-items: center; justify-content: space-between;
padding: 0 20px; background: #FFFFFF; border-bottom: 1px solid #E0E0E0; }
.brand-mark { display: flex; align-items: center; gap: 8px; }
.brand-dot { width: 20px; height: 20px; border-radius: 0.5rem; background: #0366DD; }
.brand-name { font-size: 15px; font-weight: 600; letter-spacing: -0.04rem; color: #1F1F1F; }
.search-box { width: 300px; height: 30px; background: #F5F5F5; border-radius: 0.5rem; display: flex;
align-items: center; padding: 0 10px; font-size: 12px; color: #707070; }
.top-right { display: flex; align-items: center; gap: 14px; }
.avatar { width: 26px; height: 26px; border-radius: 9999rem; background: #0366DD; color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.body-row { display: flex; height: 588px; width: 960px; }
.sidebar { width: 172px; background: #F5F5F5; border-right: 1px solid #E0E0E0; padding: 12px 0; display: flex; flex-direction: column; gap: 1px; }
.side-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 13px; font-weight: 500; color: #3D3D3D; border-left: 3px solid transparent; }
.side-item .ico { width: 14px; text-align: center; }
.side-item.active { background: #FFFFFF; color: #0366DD; border-left: 3px solid #0366DD; font-weight: 600; }
.main { flex: 1; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.page-head { display: flex; align-items: center; justify-content: space-between; }
.page-head h1 { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 2rem; letter-spacing: -0.04rem; color: #1F1F1F; }
.btn-primary { background: #0366DD; color: #fff; border: none; border-radius: 0.25rem; padding: 8px 16px;
font-size: 0.875rem; font-weight: 600; letter-spacing: -0.00875rem; }
.stats-row { display: flex; gap: 12px; height: 78px; }
.stat { flex: 1; border: 1px solid #E0E0E0; border-radius: 0.5rem; padding: 10px 14px; display: flex; flex-direction: column; justify-content: space-between; }
.stat .cap { font-size: 0.75rem; font-weight: 500; color: #707070; }
.stat .num { font-size: 1.25rem; font-weight: 600; color: #1F1F1F; }
.delta { font-size: 0.75rem; font-weight: 500; width: fit-content; padding: 1px 6px; border-radius: 0.25rem; }
.delta.up { background: #E9FCE3; color: #017D10; }
.delta.down { background: #FDF6F5; color: #B40202; }
.panel { flex: 1; border: 1px solid #E0E0E0; border-radius: 0.5rem; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.panel-toolbar { display: flex; align-items: center; justify-content: space-between; }
.toolbar-left { display: flex; gap: 8px; }
.search-input { height: 30px; width: 220px; background: #F5F5F5; border-radius: 0.25rem; padding: 0 10px; display: flex; align-items: center; font-size: 0.75rem; color: #707070; }
.filter-chip { height: 30px; padding: 0 12px; border: 1px solid #E0E0E0; border-radius: 9999rem; font-size: 0.75rem; font-weight: 500; color: #3D3D3D; display: flex; align-items: center; }
.btn-secondary { border: 1px solid #E0E0E0; background: #fff; border-radius: 0.25rem; padding: 6px 12px; font-size: 0.75rem; font-weight: 600; color: #1F1F1F; }
table.coll { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
table.coll th { text-align: left; color: #707070; font-weight: 500; font-size: 0.75rem; padding: 6px 10px; border-bottom: 1px solid #E0E0E0; }
table.coll td { padding: 7px 10px; color: #1F1F1F; border-bottom: 1px solid #F5F5F5; }
.status-pill { display: inline-flex; padding: 2px 9px; border-radius: 9999rem; font-size: 0.7rem; font-weight: 500; }
.status-pill.info { background: #E1F3FF; color: #0155B7; }
.status-pill.success { background: #E9FCE3; color: #017D10; }
.status-pill.warn { background: #FBF7D4; color: #9C7901; }
.status-pill.critical { background: #FDF6F5; color: #D31A15; }
.pager { display: flex; justify-content: flex-end; gap: 6px; font-size: 0.75rem; color: #707070; margin-top: auto; }
.pg { width: 22px; height: 22px; border-radius: 0.25rem; display: flex; align-items: center; justify-content: center; }
.pg.on { background: #0366DD; color: #fff; font-weight: 600; }
</style>
<div class="topbar">
<div class="brand-mark"><div class="brand-dot"></div><span class="brand-name">VTEX</span></div>
<div class="search-box">Search orders, SKUs, buyers…</div>
<div class="top-right"><span style="font-size:12px;color:#707070">Storefront: Live</span><div class="avatar">OP</div></div>
</div>
<div class="body-row">
<div class="sidebar">
<div class="side-item active"><span class="ico">▣</span>Orders</div>
<div class="side-item"><span class="ico">◫</span>Catalog</div>
<div class="side-item"><span class="ico">◔</span>Pricing</div>
<div class="side-item"><span class="ico">◱</span>Promotions</div>
<div class="side-item"><span class="ico">◲</span>Shipping</div>
<div class="side-item"><span class="ico">◈</span>Analytics</div>
<div class="side-item"><span class="ico">⚙</span>Settings</div>
</div>
<div class="main">
<div class="page-head">
<h1>Orders</h1>
<button class="btn-primary">+ Create order</button>
</div>
<div class="stats-row">
<div class="stat"><span class="cap">Gross revenue</span><span class="num">$284,910</span><span class="delta up">▲ 6.1%</span></div>
<div class="stat"><span class="cap">Orders (30d)</span><span class="num">3,842</span><span class="delta up">▲ 2.4%</span></div>
<div class="stat"><span class="cap">Conversion rate</span><span class="num">3.28%</span><span class="delta down">▼ 0.3%</span></div>
<div class="stat"><span class="cap">Avg. ticket</span><span class="num">$74.15</span><span class="delta up">▲ 1.2%</span></div>
</div>
<div class="panel">
<div class="panel-toolbar">
<div class="toolbar-left">
<div class="search-input">🔍 Filter collection…</div>
<div class="filter-chip">Status: All</div>
<div class="filter-chip">Channel: Web</div>
</div>
<button class="btn-secondary">Export CSV</button>
</div>
<table class="coll">
<thead><tr><th>Order</th><th>Buyer account</th><th>Channel</th><th>Status</th><th>Total</th></tr></thead>
<tbody>
<tr><td>#98213</td><td>Acme Retail Co.</td><td>Web</td><td><span class="status-pill success">Paid</span></td><td>$412.00</td></tr>
<tr><td>#98212</td><td>Northline Supply</td><td>Marketplace</td><td><span class="status-pill info">Invoiced</span></td><td>$88.40</td></tr>
<tr><td>#98211</td><td>Beacon Traders</td><td>Web</td><td><span class="status-pill warn">Pending</span></td><td>$220.00</td></tr>
<tr><td>#98210</td><td>Harbor Goods</td><td>App</td><td><span class="status-pill critical">Cancelled</span></td><td>$54.90</td></tr>
<tr><td>#98209</td><td>Cedar & Co.</td><td>Web</td><td><span class="status-pill success">Paid</span></td><td>$301.75</td></tr>
</tbody>
</table>
<div class="pager"><div class="pg on">1</div><div class="pg">2</div><div class="pg">3</div><span>›</span></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #181818; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #181818; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 500; line-height: 1.5; letter-spacing: 0.195px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 1.4px; background: #da291c; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 1.4px; background: transparent; color: #ffffff;
border: 1px solid #da291c; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #181818; color: #ffffff;
border: 1px solid #525252; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 1.1px; background: #303030; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#181818; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.cinema { position:relative; height:420px; background:
linear-gradient(180deg, rgba(24,24,24,0) 0%, rgba(24,24,24,0.2) 55%, #181818 100%),
radial-gradient(ellipse 90% 70% at 30% 20%, #4a0000 0%, #181818 60%),
linear-gradient(120deg, #2a2a2a, #0d0d0d 60%, #1a0000);
display:flex; flex-direction:column; }
nav { display:flex; align-items:center; justify-content:space-between; padding:20px 40px; }
.brand { font-size:13px; font-weight:600; letter-spacing:0.65px; text-transform:uppercase; }
.navlinks { display:flex; gap:26px; font-size:12px; font-weight:600; letter-spacing:0.65px; text-transform:uppercase; color:#fff; opacity:0.85; }
.heroin { flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding:0 40px 26px; }
.heroin h1 { font-size:56px; font-weight:500; letter-spacing:-1.1px; line-height:1.02; margin:0 0 6px;
text-transform:uppercase; max-width:640px; }
.heroin p { font-size:13px; color:#969696; margin:0 0 16px; max-width:420px; }
.row { display:flex; gap:10px; }
.btn-red { background:#da291c; color:#fff; border:none; border-radius:0; padding:13px 26px; font-size:12px;
font-weight:700; letter-spacing:1.4px; text-transform:uppercase; }
.btn-ghost { background:transparent; color:#fff; border:1px solid #fff; border-radius:0; padding:12px 26px;
font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; }
.specrow { display:flex; justify-content:center; gap:56px; padding:22px 40px; border-bottom:1px solid #303030; }
.spec { text-align:center; }
.spec .num { font-size:40px; font-weight:700; letter-spacing:-0.8px; line-height:1; }
.spec .lbl { font-size:10px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase; color:#969696; margin-top:6px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); flex:1; }
.tile { position:relative; border-right:1px solid #303030; padding:18px 20px; display:flex; flex-direction:column; justify-content:flex-end; }
.tile:last-child { border-right:none; }
.tile .ph { position:absolute; inset:0; opacity:0.9; }
.t1 .ph { background:linear-gradient(160deg,#3c0a0a,#181818 70%); }
.t2 .ph { background:linear-gradient(160deg,#2a2a2a,#181818 70%); }
.t3 .ph { background:linear-gradient(160deg,#4a1a00,#181818 70%); }
.tile .tag { position:relative; font-size:11px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase; color:#da291c; }
.tile h3 { position:relative; font-size:16px; font-weight:700; margin:6px 0 0; text-transform:uppercase; letter-spacing:0.2px; }
footer { border-top:1px solid #303030; padding:12px 40px; display:flex; justify-content:space-between;
font-size:11px; color:#969696; }
</style></head>
<body>
<div class="cinema">
<nav>
<span class="brand">Ferrari</span>
<div class="navlinks"><span>Models</span><span>F1</span><span>Lifestyle</span><span>Owners</span></div>
<div class="navlinks"><span>Preowned</span></div>
</nav>
<div class="heroin">
<h1>Purosangue</h1>
<p>The Ferrari of a new kind. Four seats, four doors, no compromise.</p>
<div class="row"><button class="btn-red">Discover more</button><button class="btn-ghost">Configure</button></div>
</div>
</div>
<div class="specrow">
<div class="spec"><div class="num">725</div><div class="lbl">CV Max Power</div></div>
<div class="spec"><div class="num">3.3</div><div class="lbl">0–100 km/h (s)</div></div>
<div class="spec"><div class="num" style="color:#da291c">310</div><div class="lbl">Km/h Top Speed</div></div>
</div>
<div class="grid3">
<div class="tile t1"><div class="ph"></div><span class="tag">Racing</span><h3>Scuderia Ferrari</h3></div>
<div class="tile t2"><div class="ph"></div><span class="tag">Heritage</span><h3>Preowned Ferrari</h3></div>
<div class="tile t3"><div class="ph"></div><span class="tag">Lifestyle</span><h3>Hypersail</h3></div>
</div>
<footer>
<span>© Ferrari</span>
<span>Ferrari · Models · F1 · Owners · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c1c3a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c1c3a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.27; letter-spacing: -0.2px; margin: 0; color: #1c1c3a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b8f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #4e54c8; color: #ffffff;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #4e54c8;
border: 1px solid #4e54c8; border-radius: 6px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1c1c3a;
border: 1px solid #c6c6ce; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b8f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #4e54c8; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Geneva,'Segoe UI',Tahoma,Verdana,sans-serif; color:#3d3d5c; }
*{box-sizing:border-box;}
.nav{height:60px;border-bottom:1px solid #dddde8;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:19px;font-weight:700;background:linear-gradient(135deg,#4e54c8,#8f94fb);-webkit-background-clip:text;background-clip:text;color:transparent;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#1c1c3a;}
.search{width:200px;height:36px;border-radius:9999px;background:#f4f4fb;border:1px solid #dddde8;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#6b6b8f;}
.hero{height:220px;background:linear-gradient(135deg,#4e54c8,#8f94fb);display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.herotext{max-width:420px;}
.herotext h1{font-size:34px;font-weight:700;color:#fff;margin:0 0 10px;letter-spacing:-.5px;}
.herotext p{font-size:14px;color:#eceeff;margin:0 0 16px;}
.btn{display:inline-block;background:#fff;color:#4e54c8;font-size:14px;font-weight:600;padding:12px 24px;border-radius:6px;}
.cablegfx{width:200px;height:140px;position:relative;}
.cablegfx:before{content:'';position:absolute;left:40px;top:60px;width:120px;height:8px;background:rgba(255,255,255,.5);border-radius:4px;}
.cablegfx:after{content:'';position:absolute;left:150px;top:48px;width:32px;height:32px;background:#fff;border-radius:6px;}
.chiprow{display:flex;gap:8px;padding:16px 30px 0;flex-wrap:wrap;}
.chip{background:#f4f4fb;border:1px solid #dddde8;border-radius:9999px;padding:4px 12px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#4e54c8;}
.chip.active{background:linear-gradient(135deg,#4e54c8,#8f94fb);color:#fff;border:none;}
.secTitle{font-size:20px;font-weight:700;color:#1c1c3a;padding:18px 30px 10px;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:200px;background:#fff;border:1px solid #dddde8;border-radius:10px;padding:12px;}
.thumb{height:90px;background:#f4f4fb;border-radius:6px;margin-bottom:8px;}
.ctitle{font-size:15px;font-weight:600;color:#1c1c3a;margin-bottom:6px;}
.minichips{display:flex;gap:4px;margin-bottom:8px;}
.minichip{background:#f4f4fb;border:1px solid #dddde8;border-radius:9999px;padding:2px 8px;font-size:9px;font-weight:700;color:#4e54c8;text-transform:uppercase;}
.cprice{font-size:16px;font-weight:700;color:#1c1c3a;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#1c1c3a;border-top:3px solid #4e54c8;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:11px;color:#8f94fb;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Silkland</div>
<div class="navlinks"><div>Cables</div><div>Chargers</div><div>Adapters</div></div>
<div class="search">Search cables...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Power that keeps up.</h1>
<p>USB-C, Thunderbolt 4, and 240W cables built for every device you own.</p>
<div class="btn">Shop Now</div>
</div>
<div class="cablegfx"></div>
</div>
<div class="chiprow">
<div class="chip active">USB-C</div>
<div class="chip">Thunderbolt 4</div>
<div class="chip">MFi-Certified</div>
<div class="chip">240W</div>
</div>
<div class="secTitle">Popular Cables</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ctitle">240W USB-C Braided Cable</div><div class="minichips"><div class="minichip">USB-C</div><div class="minichip">240W</div></div><div class="cprice">$24.99</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Thunderbolt 4 Pro Cable</div><div class="minichips"><div class="minichip">TB4</div></div><div class="cprice">$39.99</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">MFi Lightning Cable 2m</div><div class="minichips"><div class="minichip">MFi</div></div><div class="cprice">$18.99</div></div>
</div>
<div class="footer"><span>© Silkland</span><span>Compatibility Guide · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.5px; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #004EA8; color: #FFFFFF;
border: none; border-radius: 12px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #FFFFFF; color: #004EA8;
border: 1px solid #004EA8; border-radius: 12px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #EAF3FF; color: #004EA8;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#FFFFFF; font-family:-apple-system,'Segoe UI',Roboto,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.strip{height:32px;background:#313131;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:flex-end;gap:20px;padding:0 30px;}
.nav{height:64px;border-bottom:1px solid #D9D9D9;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:20px;font-weight:700;color:#004EA8;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;}
.search{flex:1;max-width:320px;margin:0 20px;height:36px;border:2px solid #004EA8;border-radius:8px;display:flex;align-items:center;padding:0 12px;font-size:13px;color:#767676;}
.hero{height:190px;background:#313131;color:#fff;display:flex;align-items:center;padding:0 30px;}
.hero h1{font-size:30px;font-weight:700;line-height:1.2;letter-spacing:-.3px;margin:0 0 10px;max-width:420px;}
.cta{display:inline-block;background:#004EA8;color:#fff;font-size:15px;font-weight:600;padding:12px 26px;border-radius:12px;}
.rowlabel{padding:14px 30px 8px;font-size:16px;font-weight:600;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:196px;border:1px solid #D9D9D9;border-radius:8px;padding:12px;position:relative;}
.thumb{aspect-ratio:1/1;background:#F5F6F8;border-radius:8px;margin-bottom:8px;}
.model{font-family:'Courier New',monospace;font-size:12px;color:#767676;}
.ptitle{font-size:14px;font-weight:600;margin:2px 0 6px;}
.badges{display:flex;gap:4px;margin-bottom:6px;}
.bd{font-size:10px;font-weight:700;text-transform:uppercase;border-radius:4px;padding:3px 6px;}
.cal{background:#EAF3FF;color:#004EA8;}
.rent{background:#FFF4E5;color:#B45309;}
.price{font-size:20px;font-weight:700;}
</style>
<div class="strip"><span>My Account</span><span>1-800-555-0100</span></div>
<div class="nav">
<div class="logo">Transcat</div>
<div class="search">Search by model or manufacturer...</div>
<div class="navlinks"><div>Test Equipment</div><div>Calibration</div></div>
</div>
<div class="hero">
<h1>Precision measurement, ISO/IEC 17025 certified.</h1>
<div class="cta">Request a Quote</div>
</div>
<div class="rowlabel">Featured Instruments</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#004EA8,#EBEBEB)"></div><div class="model">FLK-87-V</div><div class="ptitle">Fluke Digital Multimeter</div><div class="badges"><span class="bd cal">Calibrated</span></div><div class="price">$429.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#767676,#EBEBEB)"></div><div class="model">KS-N9010B</div><div class="ptitle">Keysight Signal Analyzer</div><div class="badges"><span class="bd cal">Calibrated</span><span class="bd rent">Rental</span></div><div class="price">$12,900.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#E85D04,#EBEBEB)"></div><div class="model">TK-TDS2024C</div><div class="ptitle">Tektronix Oscilloscope</div><div class="badges"><span class="bd rent">Rental</span></div><div class="price">$1,749.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #202020;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #202020;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.2px; margin: 0; color: #202020; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #ffffff; color: #202020;
border: 1px solid #108474; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #202020;
border: 1px solid #c7c7c7; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Function101</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'Montserrat','Helvetica Neue',Arial,sans-serif; color:#202020; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e9eaec;}
.logo{font-size:19px;font-weight:600;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.navlinks span:first-child{color:#108474;}
.icons{display:flex;gap:10px;}
.icon-circle{width:36px;height:36px;border-radius:9999px;background:#f5f5f5;display:inline-block;}
.hero{background:#f5f5f5;padding:36px 32px;min-height:220px;display:flex;align-items:center;gap:30px;}
.hero-copy{flex:1;}
h1{font-size:32px;font-weight:600;letter-spacing:-0.5px;line-height:1.25;margin:0 0 10px;}
.sub{font-size:16px;color:#444749;margin:0 0 18px;}
.cta{background:#108474;color:#fff;border:none;border-radius:8px;padding:14px 32px;font-size:15px;font-weight:600;letter-spacing:0.2px;}
.cable-graphic{width:280px;height:170px;position:relative;}
.organizer{position:absolute;top:20px;left:40px;width:180px;height:130px;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.1);}
.cable{position:absolute;top:60px;left:60px;width:140px;height:6px;background:#75bcfb;border-radius:3px;}
.cable2{position:absolute;top:78px;left:60px;width:100px;height:6px;background:#108474;border-radius:3px;}
.section{padding:22px 32px 0;border-top:1px solid #e9eaec;}
.section h2{font-size:24px;font-weight:600;letter-spacing:-0.2px;margin:0 0 16px;}
.grid{display:flex;gap:16px;}
.card{flex:1;border:1px solid #e9eaec;border-radius:8px;overflow:hidden;}
.card-img{background:#f5f5f5;height:110px;display:flex;align-items:center;justify-content:center;}
.accessory{width:70px;height:50px;background:linear-gradient(160deg,#919da9,#5d6b82);border-radius:6px;}
.card-body{padding:12px 16px 16px;}
.card-title{font-size:16px;font-weight:500;}
.card-price{font-size:16px;margin-top:6px;}
.badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;padding:2px 8px;border-radius:4px;margin-top:8px;}
.badge.new{background:#108474;color:#fff;}
.badge.info{background:#75bcfb;color:#202020;}
</style>
<div class="nav">
<div class="logo">Function101</div>
<div class="navlinks"><span>New</span><span>Cable Organizers</span><span>Docks</span><span>Cases</span></div>
<div class="icons"><span class="icon-circle"></span><span class="icon-circle"></span></div>
</div>
<div class="hero">
<div class="hero-copy">
<h1>Organize the mess<br>behind your desk</h1>
<p class="sub">Cable management and docking accessories built for the Apple ecosystem — clean, centered, purpose-built.</p>
<button class="cta">Shop Organizers</button>
</div>
<div class="cable-graphic">
<div class="organizer"></div>
<div class="cable"></div>
<div class="cable2"></div>
</div>
</div>
<div class="section">
<h2>New arrivals</h2>
<div class="grid">
<div class="card"><div class="card-img"><div class="accessory"></div></div><div class="card-body"><div class="card-title">DeskTube Cable Organizer</div><div class="card-price">$34.99</div><span class="badge new">New</span></div></div>
<div class="card"><div class="card-img"><div class="accessory" style="background:linear-gradient(160deg,#75bcfb,#4a90e2);"></div></div><div class="card-body"><div class="card-title">MagPad Wireless Dock</div><div class="card-price">$59.99</div><span class="badge info">Compatible</span></div></div>
<div class="card"><div class="card-img"><div class="accessory" style="background:linear-gradient(160deg,#7b7b7b,#444749);"></div></div><div class="card-body"><div class="card-title">CableBox Mini</div><div class="card-price">$24.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1e1f26;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1e1f26;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1e1f26; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #003388; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #ffffff; color: #003388;
border: 1px solid #003388; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #1e1f26;
border: 1px solid #c7c7c9; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff9900; color: #1e1f26;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1e1f26; box-sizing:border-box;
font-family:'Open Sans', Roboto, Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:56px; background:#003388; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:18px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:16px; font-size:14px; font-weight:600; }
.search-wrap { display:flex; align-items:center; padding:12px 32px; gap:0; }
.search { flex:1; height:44px; border:1px solid #eeeeee; border-radius:8px 0 0 8px; display:flex; align-items:center;
padding:0 16px; font-size:13px; color:#949494; }
.search-btn { width:44px; height:44px; background:#003388; border-radius:0 8px 8px 0; }
.breadcrumb { padding:0 32px; font-size:12px; color:#949494; margin-bottom:8px; }
.breadcrumb b { color:#1e1f26; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:0 32px 14px; }
.card { background:#fff; border-radius:8px; padding:8px; position:relative; }
.card .imgbox { aspect-ratio:1/1; height:76px; background:#f0f0f0; border-radius:4px; margin-bottom:8px; position:relative; overflow:hidden; }
.badge-sale { position:absolute; top:5px; left:5px; background:#ff9900; color:#1e1f26; font-size:9px; font-weight:700;
text-transform:uppercase; letter-spacing:0.3px; padding:2px 6px; border-radius:4px; }
.badge-soldout { position:absolute; top:5px; left:5px; background:#dc3232; color:#fff; font-size:9px; font-weight:700;
text-transform:uppercase; letter-spacing:0.3px; padding:2px 6px; border-radius:4px; }
.card h3 { font-size:12px; font-weight:400; margin:0 0 4px; }
.card .price { font-size:15px; font-weight:700; }
.card .price.sale { color:#ff9900; }
.promo { margin:0 32px 14px; background:#003388; border-radius:8px; padding:14px 18px; display:flex;
justify-content:space-between; align-items:center; }
.promo h4 { color:#fff; font-size:16px; margin:0; }
.promo .btn-sale { background:#ff9900; color:#1e1f26; border:none; border-radius:8px; padding:8px 16px; font-size:12px; font-weight:600; }
footer { background:#003388; color:#fff; padding:12px 32px; display:flex; justify-content:space-between;
align-items:center; font-size:11px; opacity:0.95; }
</style></head>
<body>
<div class="topbar">
<p class="brand">Bookoff Usa</p>
<div class="navlinks"><span>Books</span><span>Movies</span><span>Music</span><span>Video Games</span></div>
</div>
<div class="search-wrap">
<div class="search">Search by title, ISBN, or barcode...</div>
<div class="search-btn"></div>
</div>
<div class="breadcrumb">Home / Video Games / PlayStation / <b>Used Games</b></div>
<section class="grid">
<div class="card"><div class="imgbox"><span class="badge-sale">Sale</span></div><h3>Elden Ring (PS5)</h3><div class="price sale">$34.99</div></div>
<div class="card"><div class="imgbox"><span class="badge-soldout">Sold Out</span></div><h3>Zelda: TOTK</h3><div class="price">$49.99</div></div>
<div class="card"><div class="imgbox"></div><h3>Persona 5 Royal</h3><div class="price">$24.99</div></div>
<div class="card"><div class="imgbox"></div><h3>Ghost of Tsushima</h3><div class="price">$19.99</div></div>
</section>
<div class="promo">
<h4>Trade in your games for store credit</h4>
<button class="btn-sale">Get a Quote</button>
</div>
<footer>
<span>© Bookoff Usa</span>
<span>Buy · Sell · Trade — Books, Movies, Music & Games</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #4a4a4a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #18acf2; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #18acf2;
border: 1px solid #18acf2; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #212121;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4a4a4a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #78d318; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Roboto,'Helvetica Neue',Arial,sans-serif; color:#212121; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #e1e3e4;}
.logo{font-family:Montserrat,sans-serif;font-size:20px;font-weight:900;color:#121212;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;font-family:Montserrat,sans-serif;}
.navlinks .active{color:#18acf2;border-bottom:2px solid #18acf2;padding-bottom:24px;}
.navlinks span{color:#4a4a4a;}
.hero{background:#f5f5f5;padding:28px 30px;display:flex;align-items:center;min-height:210px;}
.herotext{width:52%;}
.h1{font-family:Montserrat,sans-serif;font-size:34px;font-weight:700;line-height:1.15;margin:0 0 12px;letter-spacing:-0.3px;}
.sub{font-size:15px;color:#212121;margin:0 0 18px;max-width:340px;}
.btn{display:inline-block;background:#18acf2;color:#fff;font-family:Montserrat,sans-serif;font-size:16px;font-weight:700;letter-spacing:0.5px;padding:12px 26px;border-radius:8px;}
.heroimg{width:44%;height:150px;border-radius:9999px;background:radial-gradient(circle at 35% 35%,#78d318,#18acf2 70%);}
.grid{display:flex;gap:14px;padding:20px 30px 0;}
.card{width:200px;background:#fff;border:1px solid #e1e3e4;border-radius:8px;padding:14px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-family:Montserrat,sans-serif;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.b-purple{background:#5f249f;color:#fff;}
.b-green{background:#78d318;color:#fff;}
.thumb{height:100px;background:#f5f5f5;border-radius:4px;margin-bottom:10px;}
.title{font-family:Montserrat,sans-serif;font-size:16px;font-weight:600;}
.price{font-size:16px;color:#4a4a4a;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#121212;color:#696969;font-size:12px;display:flex;align-items:center;padding:0 30px;gap:20px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Sphero</div>
<div class="navlinks"><span class="active">Robots</span><span>Coding</span><span>Curriculum</span><span>Support</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="h1">Coding is a<br>creative act.</div>
<div class="sub">Color-coded robots that make learning feel like play — a classroom that feels like a playground.</div>
<div class="btn">Shop Robots</div>
</div>
<div class="heroimg"></div>
</div>
<div class="grid">
<div class="card"><span class="badge b-purple">New</span><div class="thumb" style="background:linear-gradient(135deg,#18acf2,#5f249f)"></div><div class="title">Sphero BOLT</div><div class="price">$149.99</div></div>
<div class="card"><span class="badge b-green">Kit</span><div class="thumb" style="background:linear-gradient(135deg,#78d318,#18acf2)"></div><div class="title">Sphero indi</div><div class="price">$99.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#f54055,#18acf2)"></div><div class="title">Sphero RVR+</div><div class="price">$299.99</div></div>
</div>
<div class="footer"><span>Shop</span><span>Educators</span><span>Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 2rem; font-weight: 700; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #D52B1E; color: #ffffff;
border: none; border-radius: 999px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #FFFFFF; color: #D52B1E;
border: 1px solid #D52B1E; border-radius: 999px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #FFFFFF; color: #000000;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #f9e1e0; color: #D52B1E;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: Arial, Helvetica, sans-serif; background: #FFFFFF; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
nav { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; border-bottom: 4px solid #000000; }
.brand { font-size: 20px; font-weight: 700; color: #000; margin: 0; }
.brand span { color: #D52B1E; }
.navlinks { display: flex; gap: 24px; font-size: 13px; color: #000; font-weight: 700; }
.cta { background: #D52B1E; color: #fff; border: 2px solid #000; padding: 9px 20px; font-weight: 700; font-size: 13px; }
.grid { display: grid; grid-template-columns: 340px 1fr 200px; grid-template-rows: 220px 140px 216px; gap: 0; height: 576px; }
.block { border: 4px solid #000000; margin: -4px 0 0 -4px; padding: 22px; position: relative; overflow: hidden; }
.block.red { background: #D52B1E; }
.block.white { background: #FFFFFF; }
.block.gray { background: #ADAFAF; }
.hero-block { grid-column: 1 / 2; grid-row: 1 / 3; }
.hero-block h1 { color: #fff; font-size: 32px; font-weight: 700; margin: 0 0 10px; line-height: 1.15; }
.hero-block p { color: #fff; font-size: 13px; line-height: 1.5; margin: 0 0 18px; opacity: 0.95; }
.hero-block .btn { display: inline-block; background: #fff; color: #D52B1E; font-weight: 700; font-size: 12px; padding: 9px 18px; }
.mid-block { grid-column: 2 / 3; grid-row: 1 / 2; display: flex; align-items: center; justify-content: center; }
.mid-block .num { font-size: 40px; font-weight: 700; color: #000; }
.mid-block .lbl { font-size: 12px; color: #000; margin-top: 4px; }
.mid-wrap { text-align: center; }
.small-red { grid-column: 3 / 4; grid-row: 1 / 2; display: flex; align-items: center; justify-content: center; }
.small-red span { color: #fff; font-size: 13px; font-weight: 700; text-align: center; }
.plans-block { grid-column: 2 / 4; grid-row: 2 / 3; display: flex; gap: 12px; align-items: center; }
.plan { flex: 1; border: 2px solid #000; background: #fff; padding: 10px 12px; }
.plan .gb { font-size: 18px; font-weight: 700; color: #D52B1E; }
.plan .price { font-size: 11px; color: #000; }
.wide-block { grid-column: 1 / 3; grid-row: 3 / 4; display: flex; gap: 20px; align-items: center; }
.wide-block .col { flex: 1; }
.wide-block h3 { font-size: 16px; font-weight: 700; color: #000; margin: 0 0 6px; }
.wide-block p { font-size: 12px; color: #333; margin: 0; line-height: 1.5; }
.last-block { grid-column: 3 / 4; grid-row: 3 / 4; display: flex; align-items: center; justify-content: center; }
.last-block span { color: #fff; font-size: 13px; font-weight: 700; text-align: center; }
</style>
<nav>
<p class="brand">Mondrian (Claro)</p>
<div class="navlinks"><span>Mobile</span><span>Internet</span><span>TV</span><span>Support</span></div>
<button class="cta">See plans</button>
</nav>
<div class="grid">
<div class="block red hero-block">
<h1>Connection that fits your structure.</h1>
<p>One design system across web and apps — six platforms, one source of truth.</p>
<span class="btn">Explore plans</span>
</div>
<div class="block white mid-block"><div class="mid-wrap"><div class="num">100%</div><div class="lbl">of web products</div></div></div>
<div class="block red small-red"><span>80% of native apps unified</span></div>
<div class="block white plans-block">
<div class="plan"><div class="gb">20 GB</div><div class="price">$19.90 / month</div></div>
<div class="plan"><div class="gb">50 GB</div><div class="price">$29.90 / month</div></div>
<div class="plan"><div class="gb">100 GB</div><div class="price">$39.90 / month</div></div>
</div>
<div class="block gray wide-block">
<div class="col"><h3>Six platforms, one token library</h3><p>Figma, Vanilla, React, React Native, Android and Kotlin — every button updated once, everywhere.</p></div>
<div class="col"><h3>Structural, disciplined design</h3><p>Clear blocks, primary colors reduced to red, and a grid that never leaves anything ambiguous.</p></div>
</div>
<div class="block red last-block"><span>In production since 2019</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; background: #337ab7; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; background: #f5f5f5; color: #080808;
border: 1px solid #337ab7; border-radius: 4px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #555555;
border: 1px solid #c1c1c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; background: #e2ecf5; color: #337ab7;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background:#fff; color:#555; }
*{box-sizing:border-box;}
.nav{height:50px;border-bottom:1px solid #e5e5e5;display:flex;align-items:center;justify-content:space-between;padding:0 20px;}
.logo{font-weight:700;font-size:18px;color:#080808;}
.logo span{color:#337ab7;}
.navlinks{display:flex;gap:18px;font-size:13px;font-weight:700;color:#337ab7;}
.navlinks .on{color:#080808;border-bottom:2px solid #337ab7;padding-bottom:14px;}
.searchrow{height:44px;background:#f5f5f5;display:flex;align-items:center;padding:0 20px;gap:8px;border-bottom:1px solid #e5e5e5;}
.searchbox{flex:1;max-width:420px;height:32px;background:#fff;border:1px solid #e5e5e5;border-radius:0;font-size:13px;color:#777;display:flex;align-items:center;padding:0 10px;}
.searchbtn{height:32px;padding:0 16px;background:#337ab7;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;border-radius:4px;}
.body{display:flex;padding:14px 20px;gap:14px;}
.sidebar{width:150px;font-size:12px;color:#555;}
.sidebar h4{font-size:12px;text-transform:uppercase;color:#080808;margin:0 0 8px;letter-spacing:.4px;}
.sidebar div{padding:5px 0;border-bottom:1px solid #eeeeee;}
.main{flex:1;}
.tablehead{display:flex;background:#f5f5f5;font-size:12px;font-weight:700;color:#080808;padding:8px 10px;border-bottom:2px solid #e5e5e5;}
.tablehead div{flex:1;}
.grid{display:flex;gap:10px;margin-top:10px;}
.card{width:150px;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:8px;}
.thumb{height:96px;border-radius:4px;margin-bottom:6px;}
.ptitle{font-size:14px;font-weight:700;color:#080808;line-height:1.3;height:32px;overflow:hidden;}
.pprice{font-size:16px;font-weight:700;color:#080808;margin-top:4px;}
.pstock{font-size:11px;color:#777;margin-top:3px;}
.pbadge{display:inline-block;font-size:11px;font-weight:700;padding:2px 6px;border-radius:4px;margin-top:5px;border:1px solid;}
.b-success{background:#dff0d8;color:#3c763d;border-color:#d6e9c6;}
.b-warn{background:#fcf8e3;color:#8a6d3b;border-color:#faebcc;}
.b-info{background:#d9edf7;color:#31708f;border-color:#bce8f1;}
.trackrow{display:flex;justify-content:space-between;font-size:11px;font-family:Consolas,Menlo,Monaco,monospace;color:#555;background:#f5f5f5;padding:6px 10px;margin-top:4px;border-bottom:1px solid #eeeeee;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#f5f5f5;border-top:1px solid #e5e5e5;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:12px;color:#777;}
.footer span{color:#337ab7;margin-left:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">J Subculture</div>
<div class="navlinks"><div class="on">Home</div><div>Figures</div><div>Games</div><div>Idol Goods</div><div>Proxy Service</div><div>Order Status</div></div>
</div>
<div class="searchrow">
<div class="searchbox">Search by SKU, series, or artist…</div>
<div class="searchbtn">SEARCH</div>
</div>
<div class="body">
<div class="sidebar">
<h4>Categories</h4>
<div>Trading Figures</div>
<div>Doujin Games</div>
<div>Idol CDs</div>
<div>Acrylic Goods</div>
<div>Apparel</div>
<h4 style="margin-top:14px;">Shipping</h4>
<div class="pbadge b-info">Air: 7–14d</div>
<div class="pbadge b-warn" style="margin-top:6px;">Sea: 30–45d</div>
<div class="trackrow"><span>JP-88213</span><span>customs</span></div>
<div class="trackrow"><span>JP-88190</span><span>shipped</span></div>
</div>
<div class="main">
<div class="tablehead"><div>Item</div><div>Series</div><div>Stock</div><div>Price</div></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#337ab7,#080808)"></div><div class="ptitle">Nendoroid-style Figure — Reprint</div><div class="pprice">¥6,200</div><div class="pstock">Warehouse: Osaka</div><div class="pbadge b-success">In Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#5cb85c,#286090)"></div><div class="ptitle">Idol Live Blu-ray Box Set</div><div class="pprice">¥9,800</div><div class="pstock">Warehouse: Tokyo</div><div class="pbadge b-warn">Low Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#5bc0de,#337ab7)"></div><div class="ptitle">Doujin Visual Novel — Vol. 2</div><div class="pprice">¥2,400</div><div class="pstock">Warehouse: Osaka</div><div class="pbadge b-info">Pre-Order</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f0ad4e,#080808)"></div><div class="ptitle">Acrylic Charm Set — Series 12</div><div class="pprice">¥3,100</div><div class="pstock">Warehouse: Osaka</div><div class="pbadge b-success">In Stock</div></div>
</div>
</div>
</div>
<div class="footer"><span>© Proxy Shopping Service</span><span>Help<span> Terms</span><span> Privacy</span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f4ef; color: #484848;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f4ef; color: #484848;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #484848; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; background: #f17506; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; background: #ffffff; color: #f17506;
border: 1px solid #f17506; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #484848;
border: 1px solid #cac9c5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #a72d2c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f4ef; color:#484848; box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
.promo { height:26px; background:#f17506; color:#fff; font-size:12px; font-weight:700;
display:flex; align-items:center; justify-content:center; letter-spacing:0.2px; }
nav { height:58px; background:#ffffff; border-bottom:1px solid #dedede; display:flex;
align-items:center; justify-content:space-between; padding:0 28px; }
.logo { font-size:18px; font-weight:700; color:#222222; letter-spacing:-0.3px; }
.search { flex:1; max-width:340px; margin:0 24px; height:34px; border:1px solid #dedede;
display:flex; align-items:stretch; }
.search span { flex:1; display:flex; align-items:center; padding:0 12px; font-size:13px; color:#757575; }
.search .go { width:40px; background:#f17506; color:#fff; display:flex; align-items:center; justify-content:center; }
.navicons { display:flex; gap:18px; font-size:13px; font-weight:700; color:#484848; }
.breadcrumb { padding:10px 28px 0; font-size:12px; color:#0263c1; }
.breadcrumb b { color:#595959; font-weight:400; }
main { display:flex; padding:14px 28px 0; gap:26px; height:344px; }
.gallery { width:300px; display:flex; flex-direction:column; gap:8px; }
.shot { flex:1; background:#ffffff; border:1px solid #dedede; position:relative; overflow:hidden; }
.shot::before { content:''; position:absolute; inset:22px; border-radius:4px;
background:linear-gradient(135deg,#2b2b2b,#484848 55%,#f17506 140%); }
.shot::after { content:''; position:absolute; left:22px; right:22px; top:52%; height:8px;
background:#1a1a1a; border-radius:4px; box-shadow:0 0 0 3px #0d0d0d inset; }
.badge-new { position:absolute; top:10px; left:10px; background:#f17506; color:#fff; font-size:11px;
font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:3px 8px; border-radius:4px; z-index:2; }
.thumbs { display:flex; gap:8px; }
.thumbs div { flex:1; height:44px; background:#fff; border:1px solid #dedede; }
.info { flex:1; display:flex; flex-direction:column; min-width:0; }
.cat-chip-row { display:flex; gap:8px; margin-bottom:10px; }
.chip { background:#f5f5f5; border:1px solid #dedede; border-radius:4px; padding:4px 8px; font-size:12px; color:#484848; }
.chip.active { background:#f17506; border-color:#f17506; color:#fff; }
h1 { font-size:20px; font-weight:700; color:#222222; margin:0 0 6px; line-height:1.3; }
.rating { font-size:13px; color:#f17506; margin-bottom:10px; }
.rating u { color:#0263c1; text-decoration:underline; font-weight:400; margin-left:6px; font-size:12px; }
.price-block { margin-bottom:14px; }
.price-now { font-size:22px; font-weight:700; color:#d20000; }
.price-was { font-size:13px; color:#757575; text-decoration:line-through; margin-left:8px; }
.badge-sale { background:#a72d2c; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase;
letter-spacing:0.5px; padding:3px 8px; border-radius:4px; margin-left:8px; }
.field { margin-bottom:12px; }
.field .lbl { font-size:13px; font-weight:700; color:#484848; margin-bottom:6px; }
.opts { display:flex; gap:8px; }
.opt { border:1px solid #dedede; border-radius:4px; padding:6px 12px; font-size:13px; color:#484848; }
.opt.active { background:#f17506; border-color:#f17506; color:#fff; font-weight:700; }
.cta { margin-top:auto; display:flex; gap:10px; }
.btn-primary { flex:1; background:#f17506; color:#fff; border:none; border-radius:4px; height:42px;
font-size:15px; font-weight:700; }
.btn-secondary { background:#ffffff; color:#f17506; border:1px solid #f17506; border-radius:4px;
height:42px; padding:0 18px; font-size:15px; font-weight:700; }
.spec-strip { margin:16px 28px 0; border:1px solid #dedede; background:#fff; }
.spec-head { background:#f5f5f5; display:flex; border-bottom:1px solid #dedede; }
.spec-head div { flex:1; padding:8px 14px; font-size:13px; font-weight:700; color:#484848; }
.spec-row { display:flex; }
.spec-row div { flex:1; padding:9px 14px; font-size:13px; color:#595959; border-right:1px solid #eaeaea; }
.spec-row div:last-child { border-right:none; }
.spec-row:nth-child(2) { background:#f5f4ef; }
footer { margin-top:16px; height:56px; background:#484848; color:#9d9da1; border-top:3px solid #f17506;
display:flex; align-items:center; justify-content:space-between; padding:0 28px; font-size:12px; }
footer b { color:#fff; }
</style></head>
<body>
<div class="promo">Free shipping on orders over $49 · Certified Thunderbolt 5 now in stock</div>
<nav>
<div class="logo">Cable Matters</div>
<div class="search"><span>Search connectors, adapters, cables…</span><div class="go">⌕</div></div>
<div class="navicons"><span>Account</span><span>Cart (2)</span></div>
</nav>
<div class="breadcrumb"><b>Home</b> / <b>USB-C Cables</b> / Active Optical Cables</div>
<main>
<div class="gallery">
<div class="shot"><span class="badge-new">New</span></div>
<div class="thumbs"><div></div><div></div><div></div></div>
</div>
<div class="info">
<div class="cat-chip-row"><span class="chip active">USB4</span><span class="chip">100W PD</span><span class="chip">8K60Hz</span></div>
<h1>Active Optical USB4 Cable, 5m, 40Gbps</h1>
<div class="rating">★★★★☆ 4.6 <u>(1,284 reviews)</u></div>
<div class="price-block">
<span class="price-now">$64.99</span><span class="price-was">$79.99</span>
<span class="badge-sale">Sale</span>
</div>
<div class="field">
<div class="lbl">Length</div>
<div class="opts"><span class="opt">1m</span><span class="opt">2m</span><span class="opt active">5m</span><span class="opt">10m</span></div>
</div>
<div class="cta">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compare</button>
</div>
</div>
</main>
<div class="spec-strip">
<div class="spec-head"><div>Bandwidth</div><div>Power Delivery</div><div>Certification</div><div>Warranty</div></div>
<div class="spec-row"><div>40 Gbps</div><div>100W (20V/5A)</div><div>USB-IF, Thunderbolt 5</div><div>2-Year Limited</div></div>
</div>
<footer>
<span>© Cable Matters</span>
<span><b>Free returns</b> · Bulk pricing available · Same-day shipping</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #2f2f2f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #2f2f2f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; letter-spacing: -0.2px; margin: 0; color: #2f2f2f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.23; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #0c4242; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #0c4242;
border: 1px solid #0c4242; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #2f2f2f;
border: 1px solid #cfcabe; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 1.2px; background: #d8613c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f9f9; font-family:'Inter',-apple-system,'Segoe UI',Arial,sans-serif; color:#2f2f2f; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#f9f9f9;border-bottom:1px solid #cfcabe;}
.logo{font-family:'Cardo',Georgia,serif;font-size:22px;font-weight:700;color:#0c4242;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#444444;}
.navcta{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#0c4242;border:1px solid #0c4242;padding:8px 16px;border-radius:2px;}
.hero{height:250px;display:flex;background:#0c4242;}
.herotext{width:46%;padding:0 36px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#b1c5a4;margin-bottom:12px;}
.herotext h1{font-family:'Cardo',Georgia,serif;font-size:32px;font-weight:400;line-height:1.25;margin:0 0 12px;color:#fff;}
.herotext p{font-size:14px;line-height:1.5;color:#cfcabe;margin:0 0 18px;max-width:290px;}
.cta{display:inline-block;background:#d8613c;color:#fff;font-size:13px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;padding:13px 26px;border-radius:2px;width:fit-content;}
.heroimg{width:54%;position:relative;background:radial-gradient(circle at 55% 55%,#1a5555,#0c4242 75%);overflow:hidden;}
.range{position:absolute;bottom:20px;left:60px;width:280px;height:140px;background:linear-gradient(180deg,#43454b,#111111);border-radius:6px;}
.knob{position:absolute;bottom:145px;left:80px;width:16px;height:16px;border-radius:50%;background:#d8613c;}
.knob2{position:absolute;bottom:145px;left:112px;width:16px;height:16px;border-radius:50%;background:#b1c5a4;}
.sec{position:absolute;top:312px;left:0;width:960px;height:290px;padding:28px 36px;}
.secTitle{font-family:'Cardo',Georgia,serif;font-size:22px;font-weight:400;color:#0c4242;margin-bottom:6px;}
.secSub{font-size:13px;color:#949494;margin-bottom:18px;}
.grid{display:flex;gap:16px;}
.card{width:210px;background:#fff;border:1px solid #eeeeee;border-radius:4px;padding:12px;}
.thumb{height:100px;border-radius:4px;margin-bottom:10px;}
.pname{font-size:15px;font-weight:600;color:#2f2f2f;}
.pmeta{font-size:12px;color:#949494;margin-top:3px;}
.pprice{font-size:15px;font-weight:700;color:#0c4242;margin-top:6px;}
.badge{display:inline-block;background:#d8613c;color:#fff;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:2px;margin-bottom:8px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Verona</div>
<div class="navlinks"><span>Ranges</span><span>Ovens</span><span>Ventilation</span><span>Design Studio</span></div>
<div class="navcta">Find a Dealer</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Italian Engineering</div>
<h1>Professional heat, made for the home.</h1>
<p>Enameled ranges built with the precision of a restaurant kitchen.</p>
<div class="cta">Shop Ranges</div>
</div>
<div class="heroimg"><div class="range"></div><div class="knob"></div><div class="knob2"></div></div>
</div>
<div class="sec">
<div class="secTitle">The Range Collection</div>
<div class="secSub">Enameled finishes for every kitchen</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#0c4242,#d8613c)"></div><div class="pname">36" Dual Fuel Range</div><div class="pmeta">Teal Enamel</div><div class="pprice">$6,499</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#97aeae,#0c4242)"></div><div class="pname">Wall Oven Duo</div><div class="pmeta">Convection</div><div class="pprice">$3,899</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d8613c,#43454b)"></div><div class="pname">Under-Cabinet Hood</div><div class="pmeta">Stainless</div><div class="pprice">$1,299</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #030303; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #030303; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #030303; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #030303; color: #f5f5f5;
border: 1px solid #2a2a2a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #111329; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#030303; box-sizing:border-box;
font-family:"Camera Plain Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; gap:26px; padding:0 32px;
border-bottom:1px solid #eceae4; }
.brand { font-weight:600; font-size:16px; letter-spacing:-0.2px; margin:0; }
.nlink { font-size:15px; color:#030303; padding:4px 0 4px 6px; }
.navlinks { display:flex; gap:22px; }
.primary-action { margin-left:auto; background:rgba(0,0,0,0.88); color:#fafafa; border-radius:8px;
padding:6px 14px; font-size:14px; height:32px; display:flex; align-items:center; font-weight:400; }
.hero { padding:52px 32px 30px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
.eyebrow { font-size:13px; color:#77776f; letter-spacing:0.02em; }
.hero h1 { font-size:42px; font-weight:600; letter-spacing:-1px; line-height:1.1; margin:0; max-width:620px; }
.hero p { font-size:16px; color:#4a4a45; margin:0; max-width:440px; line-height:1.5; }
.prompt-box { margin-top:8px; width:560px; background:#ffffff; border:1px solid #eceae4; border-radius:12px;
padding:14px 16px; display:flex; align-items:center; gap:12px;
box-shadow: rgb(255,255,255) 0px 0px 0px 1px, rgba(119,119,113,0.16) 0px 0px 0px 2px,
rgba(0,0,0,0.04) 0px 2px 1px 0px, rgba(0,0,0,0.04) 0px 4px 3px -1.5px, rgba(0,0,0,0.04) 0px 13px 12px -6px; }
.prompt-box span { font-size:15px; color:#77776f; flex:1; text-align:left; }
.send { width:30px; height:30px; border-radius:8px; background:rgba(0,0,0,0.88); flex:none;
display:flex; align-items:center; justify-content:center; }
.send::before { content:'→'; color:#fafafa; font-size:14px; }
.preview { margin:26px 32px 0; height:210px; border-radius:12px; overflow:hidden; border:1px solid #e7e7e6;
background:#ffffff; box-shadow: rgba(0,0,0,0.04) 0px 2px 1px 0px, rgba(0,0,0,0.04) 0px 7px 6px -3px; }
.preview-bar { height:30px; background:#f3f2ee; display:flex; align-items:center; gap:6px; padding:0 12px;
border-bottom:1px solid #e7e7e6; }
.dot { width:8px; height:8px; border-radius:50%; background:#dedcd4; }
.preview-body { display:flex; height:180px; }
.preview-side { width:150px; background:#f7f6f2; border-right:1px solid #e7e7e6; padding:14px 12px; display:flex; flex-direction:column; gap:8px; }
.preview-side .ln { height:8px; border-radius:4px; background:#e5e3dc; }
.preview-main { flex:1; padding:18px 22px; display:flex; flex-direction:column; gap:10px; }
.preview-main .block { height:46px; border-radius:9999px; background:rgba(0,0,0,0.88); width:150px;
display:flex; align-items:center; justify-content:center; color:#fafafa; font-size:13px; }
.preview-main .row { display:flex; gap:10px; }
.preview-card { flex:1; height:60px; border-radius:8px; background:#f3f2ee; border:1px solid #eceae4; }
</style></head>
<body>
<nav>
<p class="brand">Lovable</p>
<div class="navlinks">
<span class="nlink">Product</span><span class="nlink">Enterprise</span><span class="nlink">Docs</span><span class="nlink">Pricing</span>
</div>
<div class="primary-action">Sign up</div>
</nav>
<section class="hero">
<span class="eyebrow">FROM IDEA TO APP</span>
<h1>Build software by describing it</h1>
<p>Turn a plain-language idea into a working, editable web app — no setup, no boilerplate.</p>
<div class="prompt-box"><span>A landing page for a coffee subscription, with a signup form...</span><div class="send"></div></div>
</section>
<div class="preview">
<div class="preview-bar"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>
<div class="preview-body">
<div class="preview-side"><div class="ln" style="width:70%"></div><div class="ln" style="width:90%"></div><div class="ln" style="width:50%"></div><div class="ln" style="width:80%"></div></div>
<div class="preview-main">
<div class="block">Get started</div>
<div class="row"><div class="preview-card"></div><div class="preview-card"></div><div class="preview-card"></div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1d1b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1d1b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; font-weight: 400; line-height: 1.25; margin: 0; color: #1d1d1b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9b9b9b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 0.6px; background: #cd4c20; color: #ffffff;
border: none; border-radius: 0px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 0.6px; background: transparent; color: #1d1d1b;
border: 1px solid #cd4c20; border-radius: 0px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1d1d1b;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9b9b9b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.2px; background: #cd4c20; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1d1d1b; box-sizing:border-box;
font-family:'Lato', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:'GTUltra', 'GTUltraFine', 'Frank Ruhl Libre', Georgia, serif; }
nav { height:64px; border-bottom:1px solid #eeeeee; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:700; margin:0; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#1d1d1b; }
.navlinks span:first-child { font-weight:600; }
.strip { display:flex; gap:24px; padding:12px 40px; border-bottom:1px solid #eeeeee; font-size:13px; font-weight:700;
text-transform:uppercase; letter-spacing:0.4px; color:#9b9b9b; }
.strip span:first-child { color:#1d1d1b; border-bottom:2px solid #1d1d1b; padding-bottom:10px; }
.hero { padding:30px 40px; display:flex; align-items:center; gap:36px; }
.hero-copy { flex:1.2; }
.eyebrow { color:#cd4c20; font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:8px; display:block; }
.hero h1 { font-size:44px; font-weight:400; line-height:1.08; letter-spacing:-0.5px; margin:0 0 12px; max-width:460px; }
.hero p { font-size:15px; color:#222222; margin:0 0 18px; max-width:400px; line-height:1.5; }
.btn-primary { background:#cd4c20; color:#fff; border:none; border-radius:0; padding:16px 30px;
font-size:13px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; height:48px; }
.btn-secondary { background:transparent; color:#1d1d1b; border:1px solid #1d1d1b; border-radius:0; padding:15px 29px;
font-size:13px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; height:48px; margin-left:8px; }
.hero-visual { flex:1; height:170px; background:#f7f7f7; position:relative; overflow:hidden; }
.hero-visual::before { content:''; position:absolute; width:130px; height:90px; background:#cd4c20; left:40px; top:40px; }
.hero-visual::after { content:''; position:absolute; width:60px; height:60px; background:#1d1d1b; right:60px; bottom:26px; }
.section { padding:20px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-size:22px; font-weight:400; margin:0; }
.sec-head span { font-size:12px; font-weight:700; color:#cd4c20; letter-spacing:0.5px; text-transform:uppercase; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card { position:relative; }
.thumb { aspect-ratio:1/1; position:relative; margin-bottom:10px; }
.t1 { background:linear-gradient(150deg,#f7f7f7,#e2c3ab); }
.t2 { background:linear-gradient(150deg,#f7f7f7,#c9cac8); }
.t3 { background:linear-gradient(150deg,#f7f7f7,#a3a29b); }
.badge { position:absolute; top:8px; left:8px; background:#cd4c20; color:#fff; font-size:10px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; padding:4px 8px; }
.card h3 { font-size:16px; font-weight:600; margin:0 0 2px; }
.card .price { font-size:15px; font-weight:400; margin:0 0 8px; }
.swatches { display:flex; gap:6px; }
.sw { width:16px; height:16px; border-radius:9999px; border:1px solid #d0d1d0; }
.sw.active { border:2px solid #1d1d1b; }
.sw.c1 { background:#cd4c20; } .sw.c2 { background:#1d1d1b; } .sw.c3 { background:#9b9b9b; }
footer { background:#1d1d1b; color:#fff; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#c9c9c9; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand serif">Bellroy</p>
<div class="navlinks"><span>Wallets</span><span>Bags</span><span>Phone Cases</span><span>Accessories</span></div>
</nav>
<div class="strip"><span>Slim Wallets</span><span>Bifolds</span><span>Travel</span><span>Cardholders</span></div>
<section class="hero">
<div class="hero-copy">
<span class="eyebrow">Carry Considered</span>
<h1 class="serif">The wallet, engineered down to the millimeter</h1>
<p>Full-grain leather, RFID-blocking, and a form built for one pocket — nothing extra, nothing missing.</p>
<div>
<button class="btn-primary">Shop Wallets</button>
<button class="btn-secondary">Find In Store</button>
</div>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2 class="serif">New Arrivals</h2><span>Shop All</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge">New</span></div>
<h3>Note Sleeve Wallet</h3>
<p class="price">$99</p>
<div class="swatches"><div class="sw c1 active"></div><div class="sw c2"></div><div class="sw c3"></div></div>
</div>
<div class="card">
<div class="thumb t2"></div>
<h3>Venture Sling 6L</h3>
<p class="price">$139</p>
<div class="swatches"><div class="sw c2 active"></div><div class="sw c3"></div></div>
</div>
<div class="card">
<div class="thumb t3"></div>
<h3>Travel Wallet</h3>
<p class="price">$129</p>
<div class="swatches"><div class="sw c3 active"></div><div class="sw c1"></div></div>
</div>
</div>
</section>
<footer>
<span>© Bellroy</span>
<div><a href="#">Shipping</a><a href="#">Warranty</a><a href="#">Our Story</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.25; letter-spacing: 0.01em; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.25; letter-spacing: 0.06em; background: #313131; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.25; letter-spacing: 0.06em; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1em; background: transparent; color: #767676;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #e0e0e0; }
.logo { font-size:15px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; }
.navlinks { display:flex; gap:26px; font-size:12px; font-weight:400; letter-spacing:0.08em; text-transform:uppercase;
color:#767676; }
.navlinks b { color:#313131; border-bottom:1px solid #313131; padding-bottom:3px; }
.cart { font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:#313131; }
main { display:flex; height:calc(640px - 64px - 26px); }
.stage { width:460px; background:#0d0d10; position:relative; overflow:hidden; }
.sky { position:absolute; inset:0; background:linear-gradient(180deg,#1a2a52 0%,#2c4a7a 38%,#7a8fb8 62%,#e8c9a0 82%,#f2d9ad 100%); }
.tower { position:absolute; bottom:0; background:linear-gradient(180deg,#0e1220,#181c2c); }
.t1 { left:40px; width:38px; height:280px; } .t2 { left:86px; width:26px; height:340px; }
.t3 { left:120px; width:48px; height:230px; } .t4 { left:176px; width:30px; height:390px; }
.t5 { left:214px; width:56px; height:260px; } .t6 { left:278px; width:34px; height:320px; }
.t7 { left:320px; width:44px; height:200px; } .t8 { left:372px; width:28px; height:270px; }
.streak { position:absolute; bottom:0; height:2px; background:linear-gradient(90deg,transparent,#ffb35c,#ff8a3d,transparent);
opacity:0.85; }
.s1 { left:20px; width:340px; bottom:120px; } .s2 { left:60px; width:280px; bottom:180px; }
.win { position:absolute; width:2px; height:2px; background:#ffdca0; opacity:0.9; }
.edition { position:absolute; bottom:20px; left:24px; color:#e8e8e8; font-size:10px; letter-spacing:0.1em;
text-transform:uppercase; font-weight:600; }
.info { flex:1; padding:32px 40px; display:flex; flex-direction:column; }
.crumb { font-size:12px; letter-spacing:0.04em; color:#767676; margin-bottom:10px; }
.crumb b { color:#313131; }
h1 { font-size:32px; font-weight:300; letter-spacing:0.02em; margin:0 0 6px; line-height:1.2; }
.subtitle { font-size:13px; color:#767676; margin-bottom:18px; letter-spacing:0.02em; }
.price { font-size:18px; font-weight:400; margin-bottom:20px; }
p.desc { font-size:15px; line-height:1.65; color:#4a4a4a; margin:0 0 22px; max-width:400px; }
.opt-label { font-size:13px; font-weight:500; margin-bottom:10px; }
.sizes { display:flex; gap:10px; margin-bottom:24px; }
.size { border:1px solid #e0e0e0; font-size:13px; padding:8px 14px; color:#313131; }
.size.active { border-color:#313131; background:#f8f8f8; }
.cta-row { display:flex; gap:12px; margin-top:auto; margin-bottom:20px; }
.btn-primary { background:#313131; color:#fff; border:none; padding:14px 30px; font-size:13px; font-weight:500;
letter-spacing:0.06em; text-transform:uppercase; }
.btn-secondary { background:#fff; color:#313131; border:1px solid #313131; padding:13px 26px; font-size:13px;
font-weight:500; letter-spacing:0.06em; text-transform:uppercase; }
.meta { display:flex; gap:24px; font-size:12px; color:#767676; border-top:1px solid #f0f0f0; padding-top:16px; }
.meta b { display:block; color:#313131; font-size:13px; font-weight:400; margin-top:2px; }
</style></head>
<body>
<nav>
<span class="logo">Andrew Prokos</span>
<div class="navlinks"><span>New York</span><span>Europe</span><b>Skylines</b><span>About</span></div>
<span class="cart">Cart (0)</span>
</nav>
<main>
<div class="stage">
<div class="sky"></div>
<div class="tower t1"></div><div class="tower t2"></div><div class="tower t3"></div>
<div class="tower t4"></div><div class="tower t5"></div><div class="tower t6"></div>
<div class="tower t7"></div><div class="tower t8"></div>
<div class="streak s1"></div><div class="streak s2"></div>
<div class="win" style="left:96px;bottom:220px;"></div>
<div class="win" style="left:184px;bottom:260px;"></div>
<div class="win" style="left:224px;bottom:200px;"></div>
<div class="win" style="left:330px;bottom:150px;"></div>
<div class="edition">Edition of 50</div>
</div>
<div class="info">
<div class="crumb">Prints / New York / <b>Blue Hour Skyline</b></div>
<h1>Blue Hour, Midtown Skyline</h1>
<div class="subtitle">Archival pigment print · Fine art paper</div>
<div class="price">$340.00</div>
<p class="desc">A long-exposure study of Midtown at blue hour — traffic trails carve light through glass towers as the sky shifts from indigo to amber. Signed and numbered.</p>
<div class="opt-label">Print Size</div>
<div class="sizes">
<span class="size">20×30 cm</span><span class="size active">40×60 cm</span><span class="size">60×90 cm</span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Add to Wishlist</button>
</div>
<div class="meta">
<div>Paper<b>Hahnemühle Photo Rag</b></div>
<div>Framing<b>Unframed</b></div>
<div>Ships<b>Rolled Tube</b></div>
</div>
</div>
</main>
<footer style="height:26px; border-top:1px solid #e0e0e0; display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; letter-spacing:0.04em; color:#767676;">
<span>© Andrew Prokos</span><span>Fine art architectural photography</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0e7d8; color: #1d1d1b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0e7d8; color: #1d1d1b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #1d1d1b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #7a8991; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.01em; background: #590202; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.01em; background: #ffffff; color: #590202;
border: 1px solid #590202; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1d1d1b;
border: 1px solid #bbb4a9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a8991; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.25; letter-spacing: 0.02em; background: #51ae32; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f0e7d8; color:#545452; box-sizing:border-box;
font-family:'Inter','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#590202; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#ffffff; font-size:19px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; }
.navlinks span { color:#f0e7d8; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; }
.catbar { height:32px; background:#ffffff; display:flex; align-items:center; gap:14px; padding:0 30px; border-bottom:1px solid #d9d9d9; }
.chip { font-size:9px; font-weight:700; padding:3px 10px; border-radius:2px; color:#fff; }
.c1{background:#0d6a71;} .c2{background:#d64f38;} .c3{background:#d03c8e;} .c4{background:#7c6eb0;} .c5{background:#51ae32;}
.hero { height:190px; display:flex; align-items:center; padding:0 30px; gap:30px; }
.hero h1 { font-size:26px; font-weight:800; color:#590202; margin:0 0 8px; }
.hero p { font-size:12px; color:#545452; margin:0 0 14px; max-width:400px; }
.hero .cta { display:inline-block; background:#590202; color:#fff; font-size:12px; font-weight:700; padding:10px 22px; border-radius:2px; }
.gauge { width:160px; height:120px; background:#ffffff; border:1px solid #d9d9d9; border-radius:2px; margin-left:auto; position:relative; }
.gauge::before { content:''; position:absolute; left:14px; right:14px; top:14px; height:26px; background:#0d6a71; }
.gauge::after { content:''; position:absolute; left:14px; bottom:14px; width:50px; height:24px; background:#d64f38; }
.section-label { padding:12px 30px 8px; font-size:13px; font-weight:800; color:#590202; }
.grid { display:flex; gap:12px; padding:0 30px; }
.card { flex:1; background:#ffffff; border:1px solid #d9d9d9; border-radius:2px; padding:10px; }
.card .art { height:74px; border-radius:2px; margin-bottom:8px; }
.a1 { background:#cdeafa; } .a2 { background:#ffe680; } .a3 { background:#e5f5da; } .a4 { background:#f2e0ee; }
.card .part { font-family:Consolas,monospace; font-size:9px; color:#7a8991; margin-bottom:3px; }
.card h3 { font-size:11px; font-weight:700; color:#1d1d1b; margin:0 0 4px; }
.card .stock { font-size:9px; color:#51ae32; font-weight:700; margin-bottom:6px; text-transform:uppercase; }
.card .price { font-size:13px; font-weight:800; color:#590202; }
footer { height:60px; margin-top:12px; background:#590202; display:flex; align-items:center; gap:26px; padding:0 30px; }
footer span { color:#f0e7d8; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; }
</style></head>
<body>
<nav>
<p class="brand">Flotec</p>
<div class="navlinks"><span>Hydraulics</span><span>Pneumatics</span><span>Fittings</span><span>Valves</span><span>Seals</span></div>
</nav>
<div class="catbar">
<span class="chip c1">TEAL LINE</span><span class="chip c2">RUST-ORANGE SERIES</span><span class="chip c3">PINK CATALOG</span><span class="chip c4">VIOLET GRADE</span><span class="chip c5">LIME CERTIFIED</span>
</div>
<div class="hero">
<div>
<h1>The catalog you keep on the shelf.</h1>
<p>Hydraulics, pneumatics, and fittings — every product line, its own color, its own part number, always in stock.</p>
<span class="cta">Request a Quote</span>
</div>
<div class="gauge"></div>
</div>
<div class="section-label">Popular Reorders</div>
<div class="grid">
<div class="card"><div class="art a1"></div><div class="part">FT-3082-HYD</div><h3>Hydraulic Cylinder, 2"</h3><div class="stock">IN STOCK</div><div class="price">$214.00</div></div>
<div class="card"><div class="art a2"></div><div class="part">FT-1147-PNU</div><h3>Pneumatic Actuator</h3><div class="stock">IN STOCK</div><div class="price">$89.00</div></div>
<div class="card"><div class="art a3"></div><div class="part">FT-0956-VLV</div><h3>Ball Valve, Brass 1"</h3><div class="stock">IN STOCK</div><div class="price">$34.50</div></div>
<div class="card"><div class="art a4"></div><div class="part">FT-2210-SEAL</div><h3>O-Ring Seal Kit</h3><div class="stock">IN STOCK</div><div class="price">$18.00</div></div>
</div>
<footer>
<span>REQUEST A QUOTE</span><span>SPEC SHEET LIBRARY</span><span>BULK PROCUREMENT</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f8f9; color: #282824;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f8f9; color: #282824;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.2; margin: 0; color: #282824; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #737368; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 1.2px; background: #c94b1d; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 1.2px; background: transparent; color: #282824;
border: 1px solid #c94b1d; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f7f8f9; color: #282824;
border: 1px solid #c3c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737368; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.0; letter-spacing: 0.8px; background: #c94b1d; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f8f9; font-family:'Basis Grotesque Pro','Acumin Pro',sans-serif; color:#434240; }
*{box-sizing:border-box;}
.utility{height:32px;background:#43433c;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;}
.nav{height:52px;background:#282824;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-family:'Acumin Pro Extra Condensed',sans-serif;font-size:22px;font-weight:700;letter-spacing:-.3px;color:#fff;text-transform:uppercase;}
.navlinks{display:flex;gap:20px;font-size:13px;color:#e8e5e0;}
.hero{height:220px;background:#121212;display:flex;align-items:center;padding:0 30px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(18,18,18,.85) 40%,transparent);}
.hero:after{content:'';position:absolute;right:0;top:0;bottom:0;width:340px;background:linear-gradient(160deg,#c94b1d,#282824 70%);}
.herotext{position:relative;z-index:2;max-width:440px;}
.herotext .kicker{font-family:'CSBloom',cursive;font-size:28px;color:#c94b1d;margin-bottom:6px;}
.herotext h1{font-family:'Acumin Pro Extra Condensed',sans-serif;font-size:56px;font-weight:700;line-height:.95;color:#fff;margin:0 0 12px;letter-spacing:-.5px;text-transform:uppercase;}
.herotext p{font-size:14px;color:#dfdedc;margin:0 0 16px;}
.btn{display:inline-block;background:#c94b1d;color:#fff;font-size:13px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;padding:14px 26px;}
.secTitle{font-family:'Acumin Pro Extra Condensed',sans-serif;font-size:24px;font-weight:700;text-transform:uppercase;color:#282824;padding:18px 30px 10px;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:200px;background:#f7f8f9;position:relative;}
.thumb{height:110px;background:#f5f4f3;margin-bottom:8px;}
.badge{position:absolute;top:8px;left:8px;background:#282824;color:#fff;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:3px 8px;z-index:2;}
.ctitle{font-family:'Acumin Pro Semibold','Acumin Pro',sans-serif;font-size:15px;font-weight:600;color:#282824;margin-bottom:4px;}
.swatches{display:flex;gap:4px;margin-bottom:6px;}
.sw{width:14px;height:14px;border-radius:50%;}
.cprice{font-family:'Acumin Pro Semibold','Acumin Pro',sans-serif;font-size:18px;font-weight:600;color:#282824;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#282824;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:11px;color:#989990;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="utility">Free Shipping Over $150 · Bozeman, Montana</div>
<div class="nav">
<div class="logo">Simms Fishing</div>
<div class="navlinks"><div>Waders</div><div>Outerwear</div><div>Wading Boots</div><div>Accessories</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">River Season</div>
<h1>Built for the water.</h1>
<p>Waders, wading boots, and technical outerwear engineered in Bozeman, Montana.</p>
<div class="btn">Shop Waders</div>
</div>
</div>
<div class="secTitle">Featured Gear</div>
<div class="grid">
<div class="card"><div class="badge">Featured</div><div class="thumb" style="background:linear-gradient(135deg,#989990,#43433c);"></div><div class="ctitle">G4Z Stockingfoot Wader</div><div class="swatches"><div class="sw" style="background:#282824;"></div><div class="sw" style="background:#c46441;"></div></div><div class="cprice">$699.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c46441,#282824);"></div><div class="ctitle">Challenger Insulated Jacket</div><div class="swatches"><div class="sw" style="background:#43433c;"></div><div class="sw" style="background:#c94b1d;"></div></div><div class="cprice">$249.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#43433c,#989990);"></div><div class="ctitle">Freestone Wading Boot</div><div class="swatches"><div class="sw" style="background:#282824;"></div></div><div class="cprice">$179.95</div></div>
</div>
<div class="footer"><span>© Simms Fishing</span><span>Find a Dealer · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; background: #428bca; color: #ffffff;
border: none; border-radius: 8px; padding: 6px 12px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; background: #ffffff; color: #555555;
border: 1px solid #428bca; border-radius: 8px;
padding: 5px 12px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #555555;
border: 1px solid #c1c1c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; background: #f2ea2c; color: #080808;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>DVD Empire Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
background:#ffffff; color:#080808;
}
*{box-sizing:border-box;}
.topbar{height:34px;background:#080808;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px;font-size:12px;font-weight:700;}
.subnav{height:36px;background:#eeeeee;display:flex;align-items:center;gap:16px;padding:0 28px;font-size:13px;font-weight:700;color:#555;}
.subnav span.active{background:#428bca;color:#fff;padding:4px 12px;border-radius:4px;}
.searchrow{display:flex;justify-content:center;padding:14px 28px;gap:0;}
.searchbar{background:#fff;border:1px solid #dadada;border-radius:8px 0 0 8px;padding:8px 14px;font-size:13px;width:400px;}
.searchbtn{background:#428bca;color:#fff;border-radius:0 8px 8px 0;padding:8px 20px;font-size:13px;font-weight:700;}
.section{padding:0 28px;}
.grid{display:flex;gap:1px;background:#dadada;border:1px solid #dadada;}
.card{flex:1;background:#fff;padding:8px;}
.card-img{aspect-ratio:2/3;background:#f5f5f5;position:relative;}
.card-img.c1{background:linear-gradient(150deg,#428bca,#080808);}
.card-img.c2{background:linear-gradient(150deg,#f2ea2c,#080808);}
.card-img.c3{background:linear-gradient(150deg,#491a79,#080808);}
.card-img.c4{background:linear-gradient(150deg,#468847,#080808);}
.badge{position:absolute;top:4px;left:4px;background:#f2ea2c;color:#080808;font-size:10px;font-weight:700;padding:1px 6px;border-radius:2px;}
.stockbadge{position:absolute;top:4px;right:4px;background:#468847;color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:2px;}
.title{font-weight:700;font-size:13px;margin:6px 0 2px;}
.price{color:#b94a48;font-weight:700;font-size:15px;}
</style>
<div class="topbar">
<div>Dvd Empire</div>
<div>My Account | Order Status | Cart (0)</div>
</div>
<div class="subnav">
<span class="active">DVD</span><span>Blu-ray</span><span>4K UHD</span><span>New Releases</span><span>Pre-Orders</span>
</div>
<div class="searchrow">
<div class="searchbar">Search movies, TV shows, actors…</div>
<div class="searchbtn">SEARCH</div>
</div>
<div class="section">
<div class="grid">
<div class="card"><div class="card-img c1"><span class="badge">Sale</span><span class="stockbadge">In Stock</span></div><div class="title">Midnight Frontier (4K)</div><div class="price">$19.99</div></div>
<div class="card"><div class="card-img c2"></div><div class="title">The Last Reel (Blu-ray)</div><div class="price">$14.99</div></div>
<div class="card"><div class="card-img c3"></div><div class="title">Silver Coast (DVD)</div><div class="price">$9.99</div></div>
<div class="card"><div class="card-img c4"><span class="stockbadge">In Stock</span></div><div class="title">Harbor Lights Box Set</div><div class="price">$34.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #e43d30; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #e43d30; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #e43d30; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#2a2a2a; }
*{box-sizing:border-box;}
.nav{position:absolute; top:0; left:0; width:960px; height:64px; background:#ffffff; border-bottom:1px solid #dedede; display:flex; align-items:center; justify-content:space-between; padding:0 40px;}
.logo{font-size:20px; font-weight:700; letter-spacing:-0.3px;}
.navlinks{display:flex; gap:26px; font-size:13px; font-weight:600; letter-spacing:0.3px; text-transform:uppercase; color:#2a2a2a;}
.cart{font-size:13px; font-weight:600; color:#e43d30;}
.hero{position:absolute; top:64px; left:0; width:960px; height:360px; background:#f5f5f5; display:flex;}
.heroImg{width:520px; height:360px; position:relative; overflow:hidden; background:linear-gradient(160deg,#3a2b1f 0%, #6b4a2f 40%, #2d3f28 100%);}
.rock1{position:absolute; width:180px; height:120px; background:#4a4a4a; border-radius:40% 60% 55% 45%; bottom:-30px; left:20px;}
.rock2{position:absolute; width:150px; height:100px; background:#5a5a5a; border-radius:50% 50% 45% 55%; bottom:-20px; right:10px;}
.hammockLine{position:absolute; top:120px; left:60px; width:400px; height:2px; background:#3a2b1f;}
.hammock{position:absolute; top:118px; left:150px; width:220px; height:60px; border-radius:0 0 100px 100px; background:#e43d30; opacity:0.9;}
.heroText{width:440px; padding:56px 44px; display:flex; flex-direction:column; justify-content:center;}
.headline{font-size:32px; font-weight:500; line-height:1.2; letter-spacing:-0.5px; margin-bottom:16px;}
.sub{font-size:15px; line-height:1.5; color:#6b6b6b; margin-bottom:24px; width:340px;}
.btn{display:inline-block; width:160px; text-align:center; background:#e43d30; color:#fff; font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; padding:14px 0; border-radius:8px;}
.sec{position:absolute; top:424px; left:0; width:960px; height:216px; padding:28px 40px;}
.secTitle{font-size:20px; font-weight:500; margin-bottom:18px;}
.grid{display:flex; gap:18px;}
.card{width:216px; background:#fff; border:1px solid #dedede; border-radius:8px; padding:12px; position:relative;}
.cardImg{width:100%; height:100px; border-radius:8px; background:#f5f5f5; position:relative;}
.dot{position:absolute; width:60px; height:24px; border-radius:0 0 30px 30px; background:#9e9e9e; top:30px; left:78px;}
.cardTitle{font-size:15px; font-weight:500; margin-top:10px;}
.cardPrice{font-size:14px; color:#2a2a2a; margin-top:4px;}
.badge{position:absolute; top:8px; left:8px; background:#e43d30; color:#fff; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:2px 8px; border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Kammok</div>
<div class="navlinks"><span>Shop</span><span>Hammocks</span><span>Sleep</span><span>Gear</span></div>
<div class="cart">CART (2)</div>
</div>
<div class="hero">
<div class="heroImg">
<div class="rock1"></div><div class="rock2"></div>
<div class="hammockLine"></div><div class="hammock"></div>
</div>
<div class="heroText">
<div class="headline">Gear built for<br>sleeping outside<br>on purpose.</div>
<div class="sub">Ultralight hammocks and quilts engineered for the backcountry, not the backyard.</div>
<div class="btn">Shop Now</div>
</div>
</div>
<div class="sec">
<div class="secTitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="cardImg"><div class="dot"></div></div><div class="cardTitle">Roo Double Hammock</div><div class="cardPrice">$129</div></div>
<div class="card"><div class="cardImg"><div class="dot"></div></div><div class="cardTitle">Firebelly Quilt</div><div class="cardPrice">$189</div></div>
<div class="card"><div class="cardImg"><div class="dot"></div></div><div class="cardTitle">Python Straps</div><div class="cardPrice">$29</div></div>
<div class="card"><div class="cardImg"><div class="dot"></div></div><div class="cardTitle">Glider Suspension</div><div class="cardPrice">$45</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #17214a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #17214a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.18; letter-spacing: -0.3px; margin: 0; color: #17214a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #929a9d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ff7012; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #17214a;
border: 1px solid #ff7012; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #c5c8d2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929a9d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ff7012; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Proxima Nova','Roboto','Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#313131; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e1e1e1;}
.logo{font-size:19px;font-weight:700;color:#17214a;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:600;color:#17214a;}
.navlinks span:first-child{border-bottom:3px solid #ff7012;padding-bottom:24px;}
.navcta{background:#ff7012;color:#fff;font-size:14px;font-weight:600;padding:8px 20px;border-radius:9999px;}
.hero{height:220px;background:#17214a;display:flex;align-items:center;padding:0 40px;}
.heroText h1{font-size:32px;font-weight:700;color:#fff;margin:0 0 10px;}
.heroText p{font-size:18px;font-weight:400;color:#c3c3c3;margin:0 0 18px;max-width:400px;}
.cta{display:inline-block;background:#ff7012;color:#fff;font-size:18px;font-weight:600;padding:14px 32px;border-radius:9999px;}
.drive{position:absolute;right:130px;top:60px;width:130px;height:100px;border-radius:8px;background:linear-gradient(160deg,#929a9d,#17214a);}
.sec{padding:20px 34px 0;}
.secTitle{font-size:18px;font-weight:600;color:#17214a;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;border:1px solid #e1e1e1;border-radius:8px;padding:16px;}
.thumb{aspect-ratio:1/1;height:80px;background:#f5f5f5;border-radius:4px;margin-bottom:10px;position:relative;overflow:hidden;}
.disk{position:absolute;left:66px;top:14px;width:52px;height:52px;border-radius:6px;}
.badge{position:absolute;top:6px;left:6px;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;color:#fff;background:#ff7012;}
.ctitle{font-size:14px;font-weight:600;color:#313131;margin-top:6px;}
.cprice{font-size:22px;font-weight:700;color:#ff7012;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#17214a;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:12px;color:#c3c3c3;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Western Digital</div>
<div class="navlinks"><span>Internal Storage</span><span>External Storage</span><span>NAS</span></div>
<div class="navcta">Buy Now</div>
</div>
<div class="hero">
<div class="heroText">
<h1>Storage That Scales With You</h1>
<p>Reliable data infrastructure for creators, teams, and the petabytes they ship.</p>
<div class="cta">Shop Storage</div>
</div>
<div class="drive"></div>
</div>
<div class="sec">
<div class="secTitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">New</div><div class="disk" style="background:linear-gradient(160deg,#929a9d,#17214a)"></div></div><div class="ctitle">My Passport 4TB Portable</div><div class="cprice">$99.99</div></div>
<div class="card"><div class="thumb"><div class="disk" style="background:linear-gradient(160deg,#7f7f7f,#17214a)"></div></div><div class="ctitle">Black SN850X NVMe 2TB</div><div class="cprice">$149.99</div></div>
<div class="card"><div class="thumb"><div class="disk" style="background:linear-gradient(160deg,#c3c3c3,#17214a)"></div></div><div class="ctitle">Red Plus NAS Drive 8TB</div><div class="cprice">$189.99</div></div>
</div>
</div>
<div class="footer"><span>© Data Infrastructure You Can Trust</span><span>Compare Products</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f1f2f5; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f1f2f5; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #909090; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #6638b6; color: #ffffff;
border: none; border-radius: 12px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #ffffff; color: #121212;
border: 1px solid #6638b6; border-radius: 12px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #b9babc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #909090; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #6638b6; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Freestyle Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'GroteskNeue',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:#f1f2f5; color:#121212; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
.nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; background:#fff; }
.logo { font-family:'FK Roman Standard',Georgia,serif; font-weight:700; font-size:20px; color:#6638b6; }
.navlinks { display:flex; gap:24px; font-size:13px; font-weight:600; color:#212121; }
.navcta { background:#6638b6; color:#fff; font-weight:600; font-size:13px; padding:9px 18px; border-radius:8px; }
.hero { display:flex; padding:32px 40px; gap:36px; align-items:center; }
.hero-copy { flex:1; }
.hero h1 { font-family:'FK Roman Standard',Georgia,serif; font-size:34px; font-weight:700; letter-spacing:-.3px; line-height:1.2; margin:0 0 12px; color:#121212; }
.hero p { font-size:14px; color:#212121; line-height:1.6; max-width:400px; margin:0 0 18px; }
.btn-primary { background:#6638b6; color:#fff; font-weight:600; font-size:13.5px; padding:11px 22px; border-radius:8px; display:inline-block; }
.tcf-badge { display:inline-flex; align-items:center; gap:6px; background:#6638b6; color:#fff; font-size:10.5px; font-weight:700; padding:5px 12px; border-radius:4px; margin-top:14px; }
.hero-visual { flex:1; height:200px; background:#e8c7e8; border-radius:14px; display:flex; align-items:center; justify-content:center; }
.diaper { width:150px; height:110px; background:#fff; border-radius:60px 60px 20px 20px; position:relative; box-shadow:0 12px 24px rgba(0,0,0,.1); }
.diaper::after { content:''; position:absolute; top:16px; left:20px; right:20px; height:10px; background:#6638b6; border-radius:6px; }
.section { padding:22px 40px; flex:1; background:#f1f2f5; }
.section h2 { font-family:'FK Roman Standard',Georgia,serif; font-size:19px; font-weight:700; margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#fff; border-radius:8px; padding:14px; position:relative; }
.card .sale { position:absolute; top:8px; right:8px; background:#ee2737; color:#fff; font-size:9px; font-weight:700; padding:3px 8px; border-radius:2px; }
.card .ph { height:70px; border-radius:6px; margin-bottom:10px; background:#e8c7e8; }
.card .badge-tcf { display:inline-block; background:#6638b6; color:#fff; font-size:8.5px; font-weight:700; padding:2px 8px; border-radius:2px; margin-bottom:6px; }
.card .name { font-weight:700; font-size:13px; margin-bottom:3px; }
.card .desc { font-size:11px; color:#909090; margin-bottom:8px; }
.card .price { font-weight:700; font-size:14px; }
</style>
<div class="page">
<div class="nav">
<div class="logo">Freestyle</div>
<div class="navlinks"><span>Diapers</span><span>Wipes</span><span>Bundles</span><span>Learn</span></div>
<div class="navcta">Shop Now</div>
</div>
<div class="hero">
<div class="hero-copy">
<h1>Chlorine-free is<br>a design problem.</h1>
<p>Clean, clinical in the best sense — like a well-designed pediatrician's office that happens to sell diapers.</p>
<div class="btn-primary">Shop Diapers</div>
<div><span class="tcf-badge">✓ Total Chlorine Free</span></div>
</div>
<div class="hero-visual"><div class="diaper"></div></div>
</div>
<div class="section">
<h2>Shop the Essentials</h2>
<div class="grid">
<div class="card"><span class="badge-tcf" style="position:absolute;top:8px;left:8px;">TCF</span><div class="ph" style="margin-top:16px;"></div><div class="name">Freestyle Diapers Size 3</div><div class="desc">40 count · Chlorine-Free</div><div class="price">$18.99</div></div>
<div class="card"><span class="sale">Sale</span><div class="ph" style="background:#f4bc96;"></div><div class="name">Sensitive Wipes</div><div class="desc">80 count · Fragrance-Free</div><div class="price">$6.99</div></div>
<div class="card"><div class="ph" style="background:#dadaff;"></div><div class="name">Overnight Bundle</div><div class="desc">Diapers + Wipes Set</div><div class="price">$29.99</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7eee3; color: #383633;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7eee3; color: #383633;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #383633; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #767472; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #e46950; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #f7eee3; color: #383633;
border: 1px solid #e46950; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f7eee3; color: #383633;
border: 1px solid #c7c0b7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767472; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #e46950; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7eee3; color:#383633; box-sizing:border-box;
font-family:'Suisse Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #d4d2cf; }
.logo { font-size:19px; font-weight:600; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; font-size:15px; font-weight:500; color:#767472; }
.navlinks span:first-child { color:#383633; border-bottom:2px solid #e46950; padding-bottom:20px; }
.icons { display:flex; gap:16px; font-size:15px; color:#383633; }
main { display:flex; height:492px; }
.shot { width:420px; position:relative; overflow:hidden; background:#edeadf; }
.shot::before { content:''; position:absolute; inset:0;
background:
radial-gradient(circle at 25% 20%, rgba(169,177,153,0.55), transparent 50%),
radial-gradient(circle at 80% 75%, rgba(175,139,102,0.45), transparent 55%),
linear-gradient(150deg, #d9d2c2 0%, #c7bfae 100%); }
.tool-badge { position:absolute; top:16px; left:16px; background:#e46950; color:#fff; font-size:11px;
font-weight:600; letter-spacing:0.5px; text-transform:uppercase; border-radius:4px; padding:5px 10px; }
.shape { position:absolute; border-radius:20px; }
.shape.s1 { width:220px; height:120px; left:70px; bottom:90px; background:#a9b199; opacity:0.85; }
.shape.s2 { width:140px; height:120px; right:40px; bottom:60px; background:#af8b66; opacity:0.8; transform:rotate(4deg); }
.thumbrow { position:absolute; bottom:0; left:0; right:0; display:flex; gap:1px; }
.thumbrow div { flex:1; height:56px; }
.thumbrow div:nth-child(1) { background:#7e4f3b; }
.thumbrow div:nth-child(2) { background:#49574a; }
.thumbrow div:nth-child(3) { background:#3d4b64; }
.thumbrow div:nth-child(4) { background:#514f4d; }
.info { flex:1; padding:28px 36px 0; display:flex; flex-direction:column; }
.eyebrow { font-size:13px; font-weight:500; letter-spacing:0.3px; color:#7e4f3b; margin-bottom:6px; }
.name { font-size:28px; font-weight:500; letter-spacing:-0.3px; line-height:1.2; margin:0 0 8px; }
.stars { font-size:13px; color:#e5be96; margin-bottom:8px; }
.stars span { color:#767472; font-weight:500; margin-left:6px; }
.price { font-size:19px; font-weight:600; margin-bottom:18px; }
.price .was { font-size:14px; font-weight:400; color:#767472; text-decoration:line-through; margin-left:8px; }
.field { margin-bottom:16px; }
.field .lbl { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:#767472; margin-bottom:9px; }
.swatches { display:flex; gap:10px; }
.swatch { width:32px; height:32px; border-radius:9999px; border:2px solid transparent; }
.swatch.a { background:#49574a; border-color:#383633; }
.swatch.b { background:#af8b66; }
.swatch.c { background:#514f4d; }
.swatch.d { background:#3d4b64; }
.chips { display:flex; gap:8px; }
.chip { padding:9px 16px; border-radius:8px; background:#edeadf; font-size:13px; font-weight:500; color:#474543; }
.chip.active { background:#383633; color:#fff; }
.cta { margin-top:auto; display:flex; gap:10px; padding-bottom:20px; }
.btn-add { flex:1; background:#e46950; color:#fff; border-radius:8px; height:48px; font-size:15px;
font-weight:600; letter-spacing:0.2px; }
.btn-outline { background:#f7eee3; color:#383633; border:1px solid #d4d2cf; border-radius:8px; height:48px;
padding:0 22px; font-size:15px; font-weight:600; white-space:nowrap; }
footer { border-top:1px solid #262626; background:#202020; color:#fff; padding:14px 36px;
display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:0.3px; color:#b6b4b4; }
</style></head>
<body>
<nav>
<div class="logo">Burrow</div>
<div class="navlinks"><span>Sofas</span><span>Sectionals</span><span>Outdoor</span><span>Configurator</span></div>
<div class="icons">⌕ ♡ ⬭</div>
</nav>
<main>
<div class="shot">
<span class="tool-badge">Tool-Free Assembly</span>
<div class="shape s1"></div>
<div class="shape s2"></div>
<div class="thumbrow"><div></div><div></div><div></div><div></div></div>
</div>
<div class="info">
<div class="eyebrow">The Nomad Collection</div>
<h1 class="name">Nomad 3-Seat Modular Sectional</h1>
<div class="stars">★★★★★ <span>4.7 (1,842 reviews)</span></div>
<div class="price">$2,395 <span class="was">$2,795</span></div>
<div class="field">
<div class="lbl">Fabric — Olive Boucle</div>
<div class="swatches">
<span class="swatch a"></span><span class="swatch b"></span>
<span class="swatch c"></span><span class="swatch d"></span>
</div>
</div>
<div class="field">
<div class="lbl">Leg Finish</div>
<div class="chips">
<span class="chip active">Walnut</span><span class="chip">Black Metal</span><span class="chip">White Oak</span>
</div>
</div>
<div class="cta">
<button class="btn-add">Add to Cart</button>
<button class="btn-outline">Configure Room</button>
</div>
</div>
</main>
<footer>
<span>© Burrow</span>
<span>Ships flat · No tools required · 30-day trial</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #c8102e; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #c8102e; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #272c32;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #c8102e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{
width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;
background:#ffffff;font-family:'Maison Neue Demi','Helvetica Neue',Helvetica,Arial,sans-serif;
color:#272c32;
}
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:58px;background:#272c32;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.logo{color:#fff;font-weight:700;font-size:19px;letter-spacing:-0.3px;}
.logo span{color:#c8102e;}
.navlinks{display:flex;gap:22px;}
.navlinks span{color:#dedede;font-size:12px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.navlinks span.active{color:#fff;border-bottom:2px solid #c8102e;padding-bottom:4px;}
.hero{background:#272c32;color:#fff;padding:28px 24px 24px;display:flex;gap:24px;align-items:center;}
.heroText{flex:1.15;}
.heroText h1{font-size:34px;font-weight:700;letter-spacing:-1px;line-height:1.1;margin:0 0 10px;}
.heroText p{color:#9ca3af;font-size:14px;font-family:'Maison Neue Book',sans-serif;line-height:1.6;margin:0 0 16px;max-width:420px;}
.heroBtn{display:inline-block;background:#c8102e;color:#fff;font-size:13px;font-weight:700;padding:12px 24px;border-radius:8px;letter-spacing:0.5px;}
.heroOven{flex:1;height:150px;position:relative;}
.oven{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:170px;height:100px;background:linear-gradient(180deg,#4a5158,#272c32);border-radius:50px 50px 12px 12px;}
.ovenmouth{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:70px;height:36px;background:radial-gradient(circle,#c8102e 0%,#7a0a1c 70%);border-radius:8px;}
.glow3{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:120px;height:60px;background:radial-gradient(ellipse,rgba(200,16,46,0.35),transparent 70%);}
.section{padding:16px 24px 0;}
.sectitle{font-size:15px;font-weight:700;margin:0 0 10px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#fff;border:1px solid #dedede;border-radius:12px;overflow:hidden;}
.photo{aspect-ratio:1/1;background:linear-gradient(160deg,#f5f5f5,#dedede);position:relative;}
.photo .oven2{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);width:70%;height:55%;background:linear-gradient(180deg,#4a5158,#272c32);border-radius:30px 30px 6px 6px;}
.navybadge{position:absolute;top:6px;left:6px;background:#012169;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:8px;}
.stat{font-family:'Maison Neue Mono',monospace;font-size:11px;color:#c8102e;font-weight:700;padding:6px 10px 0;}
.ctitle{font-size:13px;font-weight:700;padding:2px 10px 0;}
.cprice{font-size:13px;font-weight:700;color:#c8102e;padding:2px 10px 10px;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#272c32;color:#9ca3af;font-size:11px;padding:10px 24px;display:flex;justify-content:space-between;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Gozney<span>.</span></div>
<div class="navlinks"><span class="active">Ovens</span><span>Accessories</span><span>Recipes</span><span>Compare</span></div>
</div>
<div class="hero">
<div class="heroText">
<h1>950°F in fifteen<br>minutes flat.</h1>
<p>Precision-engineered outdoor pizza ovens built to hold live-fire temperature no home kitchen can touch.</p>
<div class="heroBtn">Shop Ovens</div>
</div>
<div class="heroOven"><div class="glow3"></div><div class="oven"></div><div class="ovenmouth"></div></div>
</div>
<div class="section">
<div class="sectitle">Featured Ovens</div>
<div class="grid">
<div class="card"><div class="photo"><div class="navybadge">Made in UK</div><div class="oven2"></div></div>
<div class="stat">MAX 950°F</div><div class="ctitle">Dome S1</div><div class="cprice">$599.00</div></div>
<div class="card"><div class="photo"><div class="oven2"></div></div>
<div class="stat">MAX 900°F</div><div class="ctitle">Roccbox Bundle</div><div class="cprice">$499.00</div></div>
<div class="card"><div class="photo"><div class="oven2"></div></div>
<div class="stat">14″ STONE</div><div class="ctitle">Tourbox Portable</div><div class="cprice">$429.00</div></div>
<div class="card"><div class="photo"><div class="navybadge">Made in UK</div><div class="oven2"></div></div>
<div class="stat">2 MIN RECOVERY</div><div class="ctitle">Dual Fuel Pro Bundle</div><div class="cprice">$899.00</div></div>
</div>
</div>
<div class="footer"><span>© Gozney</span><span>Dorset, UK · Built for fire</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #434343;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #434343;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #434343; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #007681; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: transparent; color: #007681;
border: 1px solid #007681; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.6; background: #ffffff; color: #434343;
border: 1px solid #d0d0d0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 300; line-height: 1.33; letter-spacing: 0.25px; background: #eeeeee; color: #707070;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Hot Spring Spas Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'MuseoSans-300',Roboto,Arial,sans-serif; background:#ffffff; color:#424242; }
*{box-sizing:border-box;}
.topstripe{height:4px;background:#007681;}
.nav{height:56px;background:#32373c;color:#fff;display:flex;align-items:center;padding:0 32px;justify-content:space-between;}
.logo{font-family:'Roboto Slab',serif;font-weight:700;font-size:18px;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;letter-spacing:.2px;}
.hero{background:#32373c;color:#fff;height:230px;display:flex;align-items:center;padding:0 32px;position:relative;}
.hero::after{content:'';position:absolute;inset:0;background:rgba(3,84,87,0.45);}
.hero-txt{position:relative;z-index:1;max-width:400px;}
.hero-txt h1{font-family:'Roboto Slab',serif;font-size:36px;font-weight:700;line-height:1.2;margin:0 0 10px;}
.hero-txt p{font-size:15px;color:#e0e0e0;margin:0 0 16px;}
.btnrow{position:relative;z-index:1;display:flex;gap:12px;}
.btn-primary{background:#007681;color:#fff;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.5px;padding:13px 26px;border-radius:4px;}
.btn-ghost{border:2px solid #fff;color:#fff;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.5px;padding:11px 24px;border-radius:4px;}
.section{background:#eeeeee;padding:16px 32px;}
.section h2{font-family:'Roboto Slab',serif;font-size:22px;font-weight:600;color:#434343;margin:0 0 12px;text-align:center;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.card{background:#fff;border:1px solid #eeeeee;border-radius:8px;padding:14px;box-shadow:0 4px 16px rgba(0,0,0,0.1);}
.imgbox{aspect-ratio:4/3;height:80px;background:#f5f5f5;border-radius:4px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:#707070;font-size:9px;text-align:center;}
.pname{font-size:16px;font-weight:600;color:#434343;margin:0 0 4px;}
.pdesc{font-size:12px;color:#707070;margin:0 0 8px;}
.price{font-family:'Roboto Slab',serif;font-size:20px;font-weight:700;color:#007681;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#32373c;color:#fff;padding:12px 32px;display:flex;justify-content:space-between;font-size:11px;}
</style>
<div class="topstripe"></div>
<div class="nav">
<div class="logo">Hot Spring Spas</div>
<div class="navlinks"><span>Highlife Series</span><span>Limelight Series</span><span>Accessories</span><span>Find a Dealer</span></div>
</div>
<div class="hero">
<div class="hero-txt">
<h1>Hydrotherapy,<br>engineered to last.</h1>
<p>Premium hot tubs built with FreshWater Salt System and energy-efficient insulation.</p>
<div class="btnrow"><div class="btn-primary">Shop Spas</div><div class="btn-ghost">Find a Dealer</div></div>
</div>
</div>
<div class="section">
<h2>Shop by Series</h2>
<div class="grid">
<div class="card"><div class="imgbox">Highlife NXT</div><div class="pname">Highlife NXT Grandee</div><div class="pdesc">7-person · 65 jets · FreshWater System</div><div class="price">from $14,999</div></div>
<div class="card"><div class="imgbox">Limelight Pulse</div><div class="pname">Limelight Pulse</div><div class="pdesc">5-person · 45 jets · Value series</div><div class="price">from $8,999</div></div>
<div class="card"><div class="imgbox">Highlife Jetsetter</div><div class="pname">Highlife Jetsetter LX</div><div class="pdesc">2-person · Compact plunge spa</div><div class="price">from $6,499</div></div>
</div>
</div>
<div class="footer"><span>© Hot Spring Spas</span><span>Dealer Locator · Support · Warranty</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #191919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #191919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #191919; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #5e5e5e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.25px; background: #d72c0d; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.25px; background: #fafafa; color: #191919;
border: 1px solid #d72c0d; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #191919;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5e5e5e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #d72c0d; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:'Roboto',-apple-system,'Helvetica Neue',sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:72px;background:#191c2f;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:19px;font-weight:600;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.25px;color:#fff;}
.navlinks div:first-child{color:#d72c0d;}
.hero{height:200px;background:#f1f1f1;display:flex;align-items:center;padding:0 30px;gap:24px;}
.heroimg{width:200px;height:170px;border-radius:12px;background:linear-gradient(160deg,#b8e3e7,#191c2f);flex-shrink:0;}
.herotext h1{font-size:30px;font-weight:500;color:#191919;margin:0 0 10px;}
.herotext p{font-size:14px;color:#333;margin:0 0 16px;max-width:360px;}
.btn{display:inline-block;background:#d72c0d;color:#fff;font-size:16px;font-weight:500;padding:14px 28px;border-radius:8px;}
.secTitle{font-size:20px;font-weight:500;padding:16px 30px 10px;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:200px;background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.06);overflow:hidden;}
.thumb{height:110px;background:linear-gradient(160deg,#b8e3e7,#1990c6);position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#13a165;color:#fff;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.badgesale{position:absolute;top:8px;right:8px;background:#d72c0d;color:#fff;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.cardbody{padding:10px 12px;}
.ctitle{font-size:16px;font-weight:500;margin-bottom:4px;}
.cprice{font-size:16px;font-weight:500;color:#191919;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#191c2f;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:11px;color:#9ea2a2;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Slumber Cloud</div>
<div class="navlinks"><div>Bedding</div><div>Pillows</div><div>Sleepwear</div></div>
</div>
<div class="hero">
<div class="heroimg"></div>
<div class="herotext">
<h1>Cooler nights, restful sleep.</h1>
<p>Temperature-regulating bedding engineered to keep you cool without the clinical feel.</p>
<div class="btn">Shop Now</div>
</div>
</div>
<div class="secTitle">Bestselling Cooling Gear</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">In Stock</div></div><div class="cardbody"><div class="ctitle">Cryotherapy Comforter</div><div class="cprice">$249</div></div></div>
<div class="card"><div class="thumb"><div class="badgesale">Sale</div></div><div class="cardbody"><div class="ctitle">Stratus Cooling Sheets</div><div class="cprice">$169</div></div></div>
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="ctitle">Chill Pillow Set</div><div class="cprice">$89</div></div></div>
</div>
<div class="footer"><span>© Slumber Cloud</span><span>Cooling Technology · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f4; color: #171a1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f4; color: #171a1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #171a1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #636b74; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #003399; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #f4f4f4; color: #003399;
border: 1px solid #003399; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f4f4f4; color: #171a1c;
border: 1px solid #bdbebe; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #636b74; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #a5212d; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#f4f4f4; color:#171a1c; box-sizing:border-box; font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#000235; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:16px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#fff; margin:0; }
.navlinks { display:flex; gap:20px; font-size:12px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#fff; }
.navlinks span.active { color:#e3d18c; }
.gold-btn { background:#e3d18c; color:#171a1c; border:none; border-radius:4px; padding:8px 18px; font-size:12px; font-weight:600; }
.breadcrumb { padding:10px 32px 0; font-size:11px; color:#636b74; }
.breadcrumb b { color:#32383e; }
.main { display:flex; gap:24px; padding:16px 32px; height:460px; }
.gallery { width:400px; background:#fbfcfe; border-radius:8px; display:flex; align-items:center; justify-content:center; position:relative; }
.horn { width:200px; height:220px; position:relative; }
.horn::before { content:''; position:absolute; left:40px; top:20px; width:120px; height:120px; border-radius:50%; border:14px solid #e3d18c; }
.horn::after { content:''; position:absolute; left:70px; top:120px; width:60px; height:90px; background:linear-gradient(180deg,#a5842a,#e3d18c); border-radius:8px; }
.badge-heritage { position:absolute; top:16px; left:16px; background:#e3d18c; color:#171a1c; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:3px 8px; border-radius:2px; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; }
.info h1 { font-size:26px; font-weight:700; margin:0; letter-spacing:-0.4px; }
.subline { font-size:13px; color:#636b74; }
.price-row { display:flex; align-items:center; gap:10px; margin-top:4px; }
.price { font-size:24px; font-weight:700; color:#003399; }
.badge-sale { background:#a5212d; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:2px; }
.desc { font-size:13px; line-height:1.55; color:#32383e; max-width:460px; }
.spec-table { margin-top:8px; border-top:1px solid #dde7ee; }
.spec-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #dde7ee; font-size:12px; }
.spec-row span:first-child { color:#636b74; }
.spec-row span:last-child { font-weight:600; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:44px; background:#003399; color:#fff; border:none; border-radius:4px; font-weight:600; font-size:14px; }
.btn-gold { flex:1; height:44px; background:#e3d18c; color:#171a1c; border:none; border-radius:4px; font-weight:600; font-size:14px; }
footer { position:absolute; bottom:0; left:0; right:0; background:#000235; color:#9fa6ad; padding:12px 32px;
display:flex; justify-content:space-between; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Bach Brass</p>
<div class="navlinks"><span class="active">Trumpets</span><span>Trombones</span><span>Mouthpieces</span><span>Heritage Collection</span></div>
<button class="gold-btn">Customize</button>
</nav>
<div class="breadcrumb">Home / Trumpets / <b>Heritage Series Bb Trumpet</b></div>
<div class="main">
<div class="gallery">
<div class="badge-heritage">Heritage</div>
<div class="horn"></div>
</div>
<div class="info">
<h1>Heritage Series Bb Trumpet</h1>
<span class="subline">Hand-lacquered brass · Monel valves · Includes case</span>
<div class="price-row">
<span class="price">$1,249.00</span>
<span class="badge-sale">Sale</span>
</div>
<p class="desc">Precision-machined valves and a hand-hammered bell deliver a warm, projecting tone favored by orchestral and marching players alike. Every horn is inspected and playtested before it ships.</p>
<div class="spec-table">
<div class="spec-row"><span>Bore Size</span><span>0.459" Medium-Large</span></div>
<div class="spec-row"><span>Bell Material</span><span>Yellow Brass, Hand-Hammered</span></div>
<div class="spec-row"><span>Finish</span><span>Lacquer, Gold Trim</span></div>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-gold">Request a Fitting</button>
</div>
</div>
</div>
<footer>
<span>© Bach Brass</span>
<span>Bach Brass · About · Support · Connect</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #282828;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #282828;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #282828; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #696969; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; letter-spacing: 0.2px; background: #fdbc00; color: #282828;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; letter-spacing: 0.2px; background: #ffffff; color: #282828;
border: 1px solid #fdbc00; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #282828;
border: 1px solid #c9c9c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #696969; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.2px; background: #dd2c00; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#282828; box-sizing:border-box;
font-family:'DM Sans','Inter',-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #ececec; }
.brand { font-size:17px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:0; font-size:14px; font-weight:500; color:#696969; }
.navlinks span { padding:0 14px; height:64px; display:flex; align-items:center; }
.navlinks span.active { color:#282828; border-bottom:2px solid #fdbc00; }
.search { background:#f5f5f5; border-radius:999px; padding:8px 16px; font-size:13px; color:#696969; width:220px; }
.hero { background:#f5f5f5; padding:26px 36px; display:flex; justify-content:space-between; align-items:center; }
.hero h1 { font-size:26px; font-weight:600; margin:0 0 6px; line-height:1.25; }
.hero p { font-size:13px; color:#464646; margin:0; }
.btn { display:inline-block; background:#fdbc00; color:#282828; font-size:14px; font-weight:600; padding:11px 24px; border-radius:8px; margin-top:12px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:18px 36px; }
.card { background:#fff; border:1px solid #ececec; border-radius:12px; overflow:hidden; position:relative; }
.card-img { height:96px; background:linear-gradient(135deg,#fdbc00,#ffe38a); position:relative; }
.card-img::after { content:''; position:absolute; left:50%; top:50%; width:34px; height:34px; border-radius:50%; background:#282828; transform:translate(-50%,-50%); }
.badge { position:absolute; top:8px; left:8px; font-size:9px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.badge.sale { background:#dd2c00; color:#fff; }
.badge.new { background:#00aeef; color:#fff; }
.cbody { padding:10px 12px; }
.cbody h3 { font-size:13px; font-weight:500; margin:0 0 4px; }
.stars { color:#fdbc00; font-size:11px; }
.price { font-size:14px; font-weight:600; margin-top:4px; }
.price .old { font-size:11px; color:#888888; text-decoration:line-through; font-weight:400; margin-left:4px; }
footer { position:absolute; bottom:0; left:0; right:0; height:48px; background:#282828; color:#fff;
display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Baseus</p>
<div class="navlinks"><span class="active">Charging</span><span>Audio</span><span>Car</span><span>Smart Home</span></div>
<div class="search">Search products...</div>
</nav>
<section class="hero">
<div>
<h1>Power That Keeps Up With You</h1>
<p>GaN chargers, fast cables, and smart accessories engineered for everyday carry.</p>
<span class="btn">Shop Chargers</span>
</div>
</section>
<div class="grid">
<div class="card">
<div class="card-img"><span class="badge sale">Sale</span></div>
<div class="cbody">
<h3>65W GaN5 Pro Charger</h3>
<div class="stars">★★★★★ 4.8</div>
<div class="price">$39.99<span class="old">$49.99</span></div>
</div>
</div>
<div class="card">
<div class="card-img"><span class="badge new">New</span></div>
<div class="cbody">
<h3>Blade2 USB-C Cable 100W</h3>
<div class="stars">★★★★★ 4.9</div>
<div class="price">$16.99</div>
</div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody">
<h3>MagPro Wireless Stand</h3>
<div class="stars">★★★★☆ 4.6</div>
<div class="price">$44.99</div>
</div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody">
<h3>10000mAh Power Bank</h3>
<div class="stars">★★★★★ 4.7</div>
<div class="price">$32.99</div>
</div>
</div>
</div>
<footer>
<span>© Baseus</span>
<span>Baseus · Support · Warranty · Where to Buy</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #111827;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #111827;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #111827; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6B7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #0CBECE; color: #000000;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #FFFFFF; color: #111827;
border: 1px solid #0CBECE; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #111827;
border: 1px solid #c4c5c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #E0F9FB; color: #09A8B7;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#374151; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:60px;background:#0D1729;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#fff;letter-spacing:-0.5px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#9ca3af;}
.hero{height:260px;background:radial-gradient(ellipse at center,#162035,#0D1729 70%);position:relative;display:flex;align-items:center;justify-content:center;}
.floor{width:280px;height:180px;border-radius:8px;background:#111827;position:relative;box-shadow:0 0 0 1px rgba(12,190,206,0.3);}
.ring{position:absolute;border-radius:50%;border:1px solid rgba(12,190,206,0.35);}
.r1{width:60px;height:60px;left:50%;top:50%;transform:translate(-50%,-50%);}
.r2{width:110px;height:110px;left:50%;top:50%;transform:translate(-50%,-50%);}
.r3{width:160px;height:160px;left:50%;top:50%;transform:translate(-50%,-50%);}
.bot{position:absolute;left:50%;top:50%;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#0CBECE,#111827);transform:translate(-50%,-50%);}
.herolabel{position:absolute;left:32px;top:24px;color:#fff;}
.herolabel .k{font-size:11px;font-weight:600;color:#0CBECE;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:6px;}
.herolabel h1{font-size:24px;font-weight:700;margin:0;letter-spacing:-0.5px;max-width:280px;line-height:1.2;}
.cta{position:absolute;left:32px;bottom:24px;font-size:14px;font-weight:600;background:#0CBECE;color:#fff;padding:11px 24px;border-radius:8px;}
.specs{display:flex;gap:1px;background:#E5E7EB;margin:16px 32px 0;}
.spec{flex:1;background:#F9FAFB;text-align:center;padding:10px 6px;}
.spec .lbl{font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#6B7280;}
.spec .val{font-size:18px;font-weight:700;color:#111827;margin-top:2px;}
.sec{padding:16px 32px 0;}
.sec h2{font-size:16px;font-weight:700;margin:0 0 12px;}
.grid{display:flex;gap:14px;}
.card{width:210px;border:1px solid #E5E7EB;border-radius:12px;padding:12px;}
.cimg{height:90px;border-radius:8px;margin-bottom:8px;background:radial-gradient(circle at 40% 40%,#0CBECE,#0D1729);}
.ctitle{font-size:13px;font-weight:600;color:#111827;}
.cprice{font-size:13px;margin-top:4px;color:#6B7280;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#0D1729;color:#9ca3af;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Narwal</div>
<div class="navlinks"><div>Robot Vacuums</div><div>Stations</div><div>Compare</div><div>Support</div></div>
</div>
<div class="hero">
<div class="herolabel"><div class="k">Freo Series</div><h1>Full-coverage cleaning, mapped in real time</h1></div>
<div class="floor"><div class="ring r3"></div><div class="ring r2"></div><div class="ring r1"></div><div class="bot"></div></div>
<div class="cta">Shop Freo Z10</div>
</div>
<div class="specs">
<div class="spec"><div class="lbl">Suction</div><div class="val">22,000 Pa</div></div>
<div class="spec"><div class="lbl">Station</div><div class="val">Self-Empty</div></div>
<div class="spec"><div class="lbl">Mapping</div><div class="val">LIDAR 3D</div></div>
</div>
<div class="sec">
<h2>The Lineup</h2>
<div class="grid">
<div class="card"><div class="cimg"></div><div class="ctitle">Freo Z10 Ultra</div><div class="cprice">$1,299</div></div>
<div class="card"><div class="cimg" style="background:radial-gradient(circle at 40% 40%,#9DDDE4,#111827);"></div><div class="ctitle">Freo X Plus</div><div class="cprice">$899</div></div>
<div class="card"><div class="cimg" style="background:radial-gradient(circle at 40% 40%,#0CBECE,#374151);"></div><div class="ctitle">Freo Pro</div><div class="cprice">$599</div></div>
</div>
</div>
<div class="footer"><span>2-Year Limited Warranty</span><span>Compatibility Coverage Maps</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0f4f7; color: #161a1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0f4f7; color: #161a1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #161a1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #5e6266; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #114400; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #ffffff; color: #161a1c;
border: 1px solid #114400; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; background: #ffffff; color: #242c31;
border: 1px solid #babec0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5e6266; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #667481; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f0f4f7; color:#242c31; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 30px;
background:#114400; }
.brand { font-size:18px; font-weight:700; color:#ffffff; letter-spacing:0.3px; }
.nlinks { display:flex; gap:20px; }
.nlinks div { font-size:12px; font-weight:600; color:#c9dbc0; }
.nlinks div.on { color:#ffffff; }
.navcta { background:#ffffff; color:#114400; font-size:11px; font-weight:700; padding:7px 14px; border-radius:3px; }
.subhead { background:#e9eff4; padding:8px 30px; font-size:11px; color:#5e6266; border-bottom:1px solid #c9cedb; }
.section { padding:14px 30px 0; }
.sechead { font-size:14px; font-weight:700; color:#161a1c; text-transform:uppercase; letter-spacing:0.3px; margin-bottom:10px; }
.grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.card { background:#ffffff; border:1px solid #d4dae0; padding:6px; }
.shot { aspect-ratio:2/3; position:relative; margin-bottom:6px; }
.c1 .shot { background:linear-gradient(160deg,#114400,#0c3300); }
.c2 .shot { background:linear-gradient(160deg,#525f6b,#222a30); }
.c3 .shot { background:linear-gradient(160deg,#667481,#161a1c); }
.c4 .shot { background:linear-gradient(160deg,#353d43,#0c0e0f); }
.c5 .shot { background:linear-gradient(160deg,#114400,#222a30); }
.c6 .shot { background:linear-gradient(160deg,#8ba67a,#114400); }
.c7 .shot { background:linear-gradient(160deg,#525f6b,#0c3300); }
.badge { position:absolute; top:3px; left:3px; font-size:7px; font-weight:700; text-transform:uppercase; padding:1px 4px; color:#fff; background:#667481; }
.badge.sold { background:#aebbc5; }
.ctitle { font-size:9px; font-weight:600; color:#242c31; line-height:1.25; height:22px; overflow:hidden; }
.cprice { font-size:10px; font-weight:700; color:#114400; margin-top:2px; }
</style></head>
<body>
<nav>
<div class="brand">Dcbs</div>
<div class="nlinks"><div class="on">New Releases</div><div>Back Issues</div><div>Graphic Novels</div><div>Pull List</div></div>
<div class="navcta">My Account</div>
</nav>
<div class="subhead">Weekly new comics ship every Wednesday · Subscription boxes available</div>
<div class="section">
<div class="sechead">This Week's New Releases</div>
<div class="grid">
<div class="card c1"><div class="shot"><span class="badge">In Stock</span></div><div class="ctitle">Void Runners #14</div><div class="cprice">$3.99</div></div>
<div class="card c2"><div class="shot"></div><div class="ctitle">Ashen Vale Vol. 3</div><div class="cprice">$17.99</div></div>
<div class="card c3"><div class="shot"><span class="badge sold">Sold Out</span></div><div class="ctitle">Iron Choir #1</div><div class="cprice">$4.99</div></div>
<div class="card c4"><div class="shot"></div><div class="ctitle">Static Dominion #7</div><div class="cprice">$3.99</div></div>
<div class="card c5"><div class="shot"><span class="badge">Pre-Order</span></div><div class="ctitle">Nightbound Annual</div><div class="cprice">$6.99</div></div>
<div class="card c6"><div class="shot"></div><div class="ctitle">Copper Age Omnibus</div><div class="cprice">$49.99</div></div>
<div class="card c7"><div class="shot"></div><div class="ctitle">Wraithborn #22</div><div class="cprice">$3.99</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #f95346; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: transparent; color: #121212;
border: 1px solid #f95346; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.4px; background: #f95346; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Source Sans Pro','Open Sans',sans-serif; color:#202020; }
*{box-sizing:border-box;}
.nav{height:64px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.5px;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;color:#fff;}
.hero{height:230px;background:#121212;display:flex;align-items:center;padding:0 32px;gap:24px;}
.herotext{width:46%;}
.herotext h1{font-size:36px;font-weight:700;color:#fff;margin:0 0 10px;line-height:1.15;letter-spacing:-.3px;}
.herotext p{font-size:14px;color:#d3d3d3;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#f95346;color:#fff;font-size:15px;font-weight:600;padding:12px 26px;border-radius:9999px;}
.countdown{display:flex;gap:8px;margin-bottom:16px;}
.cbox{background:#1a1a1a;border-radius:8px;padding:8px 12px;text-align:center;}
.cbox .n{font-size:20px;font-weight:700;color:#fff;}
.cbox .l{font-size:9px;color:#84bd00;letter-spacing:.5px;text-transform:uppercase;}
.heroart{flex:1;height:160px;border-radius:12px;background:linear-gradient(135deg,#f95346,#228848);position:relative;}
.heroart:before{content:'';position:absolute;left:30%;top:20%;width:80px;height:110px;background:rgba(255,255,255,.12);border-radius:12px;}
.strip{display:flex;gap:8px;padding:14px 32px 0;}
.franchise{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#fff;border-radius:9999px;padding:6px 14px;}
.grid{display:flex;gap:14px;padding:14px 32px 0;}
.card{width:150px;background:#f4f4f4;border-radius:12px;padding:10px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#f95346;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;border-radius:4px;padding:2px 8px;}
.thumb{aspect-ratio:1/1;height:96px;border-radius:8px;margin-bottom:8px;}
.ptitle{font-size:13px;font-weight:600;}
.pprice{font-size:14px;font-weight:700;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;color:#d3d3d3;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Unstable Games</div>
<div class="navlinks"><div>Card Games</div><div>Family</div><div>Limited</div><div>Rulebooks</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Chaos, boxed and shipped to your table.</h1>
<div class="countdown">
<div class="cbox"><div class="n">02</div><div class="l">Days</div></div>
<div class="cbox"><div class="n">14</div><div class="l">Hrs</div></div>
<div class="cbox"><div class="n">36</div><div class="l">Min</div></div>
</div>
<div class="cta">Back This Drop</div>
</div>
<div class="heroart"></div>
</div>
<div class="strip">
<div class="franchise" style="background:#23b192">Flagship</div>
<div class="franchise" style="background:#84bd00">Family</div>
<div class="franchise" style="background:#ff8441">Limited</div>
</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#23b192,#121212)"></div><div class="ptitle">Feral Beasts Expansion</div><div class="pprice">$19.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#84bd00,#228848)"></div><div class="ptitle">Family Party Deck</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff8441,#f95346)"></div><div class="ptitle">Limited Foil Edition</div><div class="pprice">$34.99</div></div>
</div>
<div class="footer"><span>© Chaotic Card Games</span><span>Rulebooks · FAQ · Discord</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3b7de9; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3b7de9; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a1bff0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0054ac; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3b7de9; color: #000000;
border: 1px solid #0054ac; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3b7de9; color: #f5f5f5;
border: 1px solid #5990eb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a1bff0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3276df; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Noto Sans JP", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; }
.side { flex:0 0 168px; background:#333333; color:#ffffff; display:flex; flex-direction:column; padding:16px 0; }
.side .logo { font-size:15px; font-weight:700; padding:0 16px 14px; border-bottom:1px solid rgba(255,255,255,0.15); margin-bottom:10px; }
.side .item { padding:9px 16px; font-size:13px; color:#cfd6e0; }
.side .item.active { background:#0054ac; color:#ffffff; font-weight:700; }
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { flex:0 0 52px; border-bottom:1px solid #d4d8dd; display:flex; align-items:center;
justify-content:space-between; padding:0 24px; }
.topbar h1 { font-size:20px; font-weight:700; color:#333333; margin:0; }
.btn { border-radius:4px; font-size:14px; font-weight:400; height:32px; padding:0 12px; border:1px solid; }
.btn-primary { background:linear-gradient(to bottom,#3b7de9,#0054ac); color:#ffffff; border-color:rgba(0,0,0,0.15); font-weight:700; }
.btn-default { background:linear-gradient(to bottom,#ffffff,#ecf2fd); color:#333333; border-color:#d4d8dd; }
.content { flex:1; padding:16px 24px; display:flex; flex-direction:column; gap:12px; min-height:0; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.stat { background:#ffffff; border:1px solid #d4d8dd; border-radius:4px; padding:10px 14px; }
.stat .lbl { font-size:12px; color:#999999; }
.stat .val { font-size:20px; font-weight:700; color:#333333; }
.stat .val.err { color:#d0021b; }
.stat .val.ok { color:#65ab51; }
.notice { background:#fcf8e3; color:#8a6d3b; border-radius:4px; padding:8px 14px; font-size:13px; }
.block { flex:1; background:#ffffff; border:1px solid #d4d8dd; border-radius:4px; display:flex; flex-direction:column; min-height:0; }
.block .bhead { padding:10px 16px; border-bottom:1px solid #d4d8dd; display:flex; justify-content:space-between; align-items:center; }
.block .bhead h2 { font-size:16px; font-weight:700; margin:0; color:#333333; }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead th { text-align:left; background:#f7f7f7; color:#666666; font-weight:400; font-size:12px;
padding:7px 14px; border-bottom:1px solid #d4d8dd; }
tbody td { padding:7px 14px; border-bottom:1px solid #d4d8dd; color:#333333; }
tbody tr:nth-child(even) td { background:#f7f7f7; }
td.num { text-align:right; font-variant-numeric:tabular-nums; }
.tag { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700; }
.tag-ok { background:#eef7ec; color:#65ab51; }
.tag-wait { background:#fcf8e3; color:#8a6d3b; }
.tag-err { background:#ffeeeb; color:#d0021b; }
</style></head>
<body>
<div class="side">
<div class="logo">Money Forward Cloud</div>
<div class="item active">Invoices</div>
<div class="item">Accounting</div>
<div class="item">Expenses</div>
<div class="item">Payroll</div>
<div class="item">Tax filing</div>
</div>
<div class="main">
<div class="topbar">
<h1>Invoices</h1>
<div style="display:flex;gap:8px;">
<button class="btn btn-default">Cancel</button>
<button class="btn btn-primary">Save</button>
</div>
</div>
<div class="content">
<div class="stats">
<div class="stat"><div class="lbl">Billed this month</div><div class="val">¥3,248,600</div></div>
<div class="stat"><div class="lbl">Paid</div><div class="val ok">¥2,910,000</div></div>
<div class="stat"><div class="lbl">Outstanding</div><div class="val err">¥338,600</div></div>
<div class="stat"><div class="lbl">Drafts</div><div class="val">4</div></div>
</div>
<div class="notice">2 invoices are past their due date. Please review the payment status.</div>
<div class="block">
<div class="bhead"><h2>Recent invoices</h2><button class="btn btn-default">New invoice</button></div>
<table>
<thead><tr><th>Invoice #</th><th>Client</th><th>Issued</th><th>Due date</th><th style="text-align:right;">Amount</th><th>Status</th></tr></thead>
<tbody>
<tr><td>INV-2026-0142</td><td>Sample Trading Co.</td><td>2026-08-01</td><td>2026-08-31</td><td class="num">¥528,000</td><td><span class="tag tag-ok">Paid</span></td></tr>
<tr><td>INV-2026-0143</td><td>Yamada Industries Inc.</td><td>2026-08-04</td><td>2026-09-04</td><td class="num">¥312,400</td><td><span class="tag tag-wait">Outstanding</span></td></tr>
<tr><td>INV-2026-0144</td><td>Aoi Design LLC</td><td>2026-08-09</td><td>2026-08-20</td><td class="num">¥96,800</td><td><span class="tag tag-err">Overdue</span></td></tr>
<tr><td>INV-2026-0145</td><td>Forward Logistics Inc.</td><td>2026-08-12</td><td>2026-09-12</td><td class="num">¥1,240,000</td><td><span class="tag tag-ok">Paid</span></td></tr>
<tr><td>INV-2026-0146</td><td>Tanaka Shoten</td><td>2026-08-15</td><td>2026-08-25</td><td class="num">¥241,800</td><td><span class="tag tag-err">Overdue</span></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #35373c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #35373c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #35373c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #007581; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #007581;
border: 1px solid #007581; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #35373c;
border: 1px solid #cccdce; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c8a84e; color: #35373c;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Jupiter Music Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#ffffff; color:#35373c; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #f0f0f0;}
.logo{font-weight:700;font-size:20px;color:#35373c;}
.navlinks{display:flex;gap:24px;font-size:15px;font-weight:500;}
.navlinks .active{color:#007581;border-bottom:2px solid #007581;padding-bottom:5px;}
.search{width:200px;height:36px;border-radius:999px;border:1px solid #e0e0e0;font-size:12px;color:#555;line-height:36px;padding:0 16px;}
.hero{padding:26px 36px;background:#f7f7f7;text-align:center;}
.hero h1{font-size:32px;font-weight:700;letter-spacing:-.4px;margin:0 0 10px;max-width:600px;margin-left:auto;margin-right:auto;}
.hero p{font-size:16px;color:#555;max-width:500px;margin:0 auto 14px;}
.chips{display:flex;justify-content:center;gap:8px;}
.chip{background:#fff;border-radius:999px;font-size:12px;font-weight:600;padding:8px 16px;box-shadow:0 1px 4px rgba(0,0,0,.06);}
.chip.active{background:#007581;color:#fff;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px 36px;}
.card{background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);padding:14px;}
.imgbox{aspect-ratio:4/3;border-radius:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:4px;background:#c8a84e;color:#35373c;}
.badge.blue{background:#007581;color:#fff;}
.title{font-size:15px;font-weight:600;margin-top:10px;}
.price{font-size:13px;color:#555;margin-top:3px;}
</style>
<div class="nav">
<div class="logo">Jupiter Music</div>
<div class="navlinks"><span class="active">Instruments</span><span>Accessories</span><span>Education</span><span>Support</span></div>
<div class="search">Search instruments…</div>
</div>
<div class="hero">
<h1>Instruments built<br>to be played for a lifetime.</h1>
<p>Brass, woodwinds, and marching instruments crafted for the professional musician and the aspiring student.</p>
<div class="chips"><div class="chip">Brass</div><div class="chip active">Woodwinds</div><div class="chip">Marching</div><div class="chip">Strings</div></div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#e5d5a8,#c8a84e);"><div class="badge">Sale</div></div>
<div class="title">Jupiter JFL700 Flute</div>
<div class="price">$799.00</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#a8d0d5,#3f8f97);"><div class="badge blue">New</div></div>
<div class="title">Jupiter JAS500 Alto Sax</div>
<div class="price">$1,499.00</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#d0c8b8,#8f7a52);"></div>
<div class="title">Jupiter JTR700 Trumpet</div>
<div class="price">$899.00</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#c8d0d5,#6a7a85);"></div>
<div class="title">Jupiter JCL700 Clarinet</div>
<div class="price">$649.00</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f4; color: #3a3a3a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f4; color: #3a3a3a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #3a3a3a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #979797; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; letter-spacing: 0.3px; background: #007396; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; letter-spacing: 0.3px; background: #f4f4f4; color: #007396;
border: 1px solid #007396; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f4f4f4; color: #3a3a3a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #979797; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.4px; background: #4ad5ff; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f4f4f4; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#3a3a3a; }
*{box-sizing:border-box;}
.nav{height:64px;background:#f4f4f4;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #d8d8d8;}
.logo{font-size:18px;font-weight:500;color:#3a3a3a;}
.navlinks{display:flex;gap:20px;font-size:15px;font-weight:500;}
.navlinks .active{color:#007396;border-bottom:2px solid #007396;padding-bottom:20px;}
.catheader{background:#007396;color:#fff;padding:22px 34px;font-size:22px;font-weight:500;}
.hero{height:170px;display:flex;align-items:center;padding:0 34px;gap:26px;}
.herotext{width:46%;}
.herotext p{font-size:16px;line-height:1.6;color:#3a3a3a;margin:0 0 14px;max-width:340px;}
.cta{display:inline-block;background:#007396;color:#fff;font-size:15px;font-weight:500;letter-spacing:.3px;padding:10px 20px;border-radius:4px;}
.stack{flex:1;height:130px;display:flex;align-items:flex-end;gap:6px;justify-content:center;}
.book{width:34px;border-radius:2px 2px 0 0;}
.grid{display:flex;gap:16px;padding:14px 34px 0;}
.card{width:206px;background:#fff;border:1px solid #dae0e5;border-radius:4px;padding:16px;}
.thumb{aspect-ratio:3/4;height:120px;border-radius:4px;margin-bottom:10px;}
.series{display:inline-block;background:#59315f;color:#fff;font-size:11px;font-weight:500;letter-spacing:.4px;text-transform:uppercase;border-radius:2px;padding:2px 6px;margin-bottom:6px;}
.ptitle{font-size:16px;font-weight:500;color:#3a3a3a;}
.author{font-size:13px;color:#979797;margin-top:2px;}
.pprice{font-size:14px;font-weight:500;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#39203d;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:13px;color:#d1c5d2;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">University OF Chicago Press</div>
<div class="navlinks"><div class="active">Books</div><div>Journals</div><div>Authors</div><div>About</div></div>
</div>
<div class="catheader">Featured: History & Political Science</div>
<div class="hero">
<div class="herotext">
<p>Scholarship that shapes how the world reads, argues, and remembers — from a press that has published rigorous work for over a century.</p>
<div class="cta">Browse New Releases</div>
</div>
<div class="stack">
<div class="book" style="height:70%;background:#007396"></div>
<div class="book" style="height:95%;background:#59315f"></div>
<div class="book" style="height:60%;background:#4ad5ff"></div>
<div class="book" style="height:85%;background:#d39e00"></div>
<div class="book" style="height:75%;background:#007396"></div>
</div>
</div>
<div class="grid">
<div class="card"><div class="series">Phoenix Fiction</div><div class="thumb" style="background:linear-gradient(160deg,#007396,#59315f)"></div><div class="ptitle">The Long Archive</div><div class="author">M. Alden Osei</div><div class="pprice">$28.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#4ad5ff,#007396)"></div><div class="ptitle">Cartographies of Empire</div><div class="author">R. Talvik</div><div class="pprice">$35.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#d39e00,#59315f)"></div><div class="ptitle">A Grammar of Silence</div><div class="author">J. Ferro Vance</div><div class="pprice">$24.00</div></div>
</div>
<div class="footer"><span>© University Press · Est. 1891</span><span>Rights & Permissions · Desk Copies</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5be3d3; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5be3d3; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #327068; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #24cdb9; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5be3d3; color: #000000;
border: 1px solid #24cdb9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5be3d3; color: #111111;
border: 1px solid #4fc1b4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #327068; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #52dfcf; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#4b4b4b; box-sizing:border-box;
font-family:"Segoe UI", -apple-system, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:600; color:#4b4b4b; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#6d6d6d; }
.pill-primary { background:#5be3d3; color:#4b4b4b; border-radius:50px; padding:11px 22px; font-size:16px; font-weight:700; }
.hero { display:flex; align-items:center; gap:30px; padding:20px 40px 26px; }
.hero .txt { flex:1; }
.hero h1 { font-size:38px; font-weight:600; line-height:1.2; margin:0 0 10px; }
.hero p { font-size:15px; color:#6d6d6d; margin:0 0 16px; max-width:400px; }
.hero .art { width:280px; height:170px; border-radius:20px; background:radial-gradient(circle at 30% 30%, #bbefe9, #5be3d3 70%); position:relative; }
.hero .art::after { content:''; position:absolute; width:60px; height:60px; border-radius:50%; background:#ffcf68; top:20px; right:24px; }
.pills { display:flex; gap:12px; padding:0 40px 22px; }
.fp { background:#24cdb9; color:#fff; border-radius:9999px; padding:8px 18px; font-size:15px; font-weight:600; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 40px 30px; }
.card { background:#ffffff; border:1px solid #dedede; border-radius:12px; padding:16px; box-shadow:rgba(0,0,0,0.06) 0px 4px 6px 0px; }
.card .dot { width:34px; height:34px; border-radius:50%; margin-bottom:10px; }
.card h3 { font-size:14px; margin:0 0 4px; }
.card p { font-size:12px; color:#9a9a9a; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">Cubo Ai</p>
<div class="navlinks"><span>About Us</span><span>Features</span><span>Support</span></div>
<button class="pill-primary">Go to Shop</button>
</nav>
<div class="hero">
<div class="txt">
<h1>Sleep easy, every night</h1>
<p>AI covered-face and rollover detection, true cry detection, and sleep analytics — peace of mind for new parents.</p>
<button class="pill-primary">Go to Shop</button>
</div>
<div class="art"></div>
</div>
<div class="pills">
<span class="fp">Safety</span><span class="fp">Sleep</span><span class="fp">Health</span><span class="fp">Memories</span>
</div>
<div class="cards">
<div class="card"><div class="dot" style="background:#ff8784"></div><h3>Covered-face alert</h3><p>Real-time AI monitoring, day and night.</p></div>
<div class="card"><div class="dot" style="background:#ffb516"></div><h3>Sleep analytics</h3><p>Understand naps and night sleep patterns.</p></div>
<div class="card"><div class="dot" style="background:#4cc3e5"></div><h3>Auto memories</h3><p>The best moments, saved automatically.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f7fa; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f5f7fa; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfefe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#F5F7FA; color:#1A1F26; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; padding:20px 32px 0; }
.segrow { display:flex; gap:8px; }
.seg { flex:1; text-align:center; padding:9px 0; border-radius:10px; font-size:14px; font-weight:600; background:#fff; border:0.5px solid #E3E7ED; color:#5A6573; }
.seg.on { background:#FFC94D; color:#00355F; border:none; }
.searchpill { margin-top:14px; background:#fff; border:0.5px solid #E3E7ED; border-radius:14px; box-shadow:0 4px 12px rgba(0,0,0,0.08); padding:12px 18px; }
.searchpill .l1 { font-size:14px; font-weight:700; }
.searchpill .l2 { font-size:11px; color:#5A6573; margin-top:2px; }
.cards { display:flex; gap:16px; margin-top:18px; }
.rcard { width:290px; background:#fff; border-radius:16px; border:0.5px solid #E3E7ED; box-shadow:0 4px 12px rgba(0,0,0,0.08); overflow:hidden; }
.rphoto { height:170px; position:relative; }
.dealflag { position:absolute; top:12px; left:12px; background:#FFC94D; color:#00355F; font-size:12px; font-weight:800; padding:4px 9px; border-radius:6px; }
.saveheart { position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,0.4); color:#fff; display:flex; align-items:center; justify-content:center; }
.rbody { padding:12px 14px 14px; }
.rname { font-size:18px; font-weight:700; }
.rloc { font-size:15px; font-weight:600; color:#5A6573; margin-top:3px; }
.scorerow { display:flex; align-items:center; gap:6px; margin-top:8px; }
.scorebadge { background:#1A8B4B; color:#fff; font-size:15px; font-weight:800; padding:3px 7px; border-radius:6px; }
.scoretext { font-size:12px; color:#5A6573; }
.pricerow { margin-top:10px; }
.strike { text-decoration:line-through; color:#8A95A3; font-size:13px; margin-right:6px; }
.now { font-size:18px; font-weight:800; }
.perday { font-size:12px; color:#5A6573; }
.onekey { margin-top:7px; font-size:11px; font-weight:700; color:#F5C518; }
</style>
</head>
<body>
<div class="stage">
<div style="font-size:20px;font-weight:800;color:#00355F;margin-bottom:10px">Expedia (iOS)</div>
<div class="segrow"><div class="seg on">Stays</div><div class="seg">Flights</div><div class="seg">Cars</div><div class="seg">Bundle</div></div>
<div class="searchpill"><div class="l1">San Diego, CA</div><div class="l2">Oct 12 – 17 · 2 travelers · 1 room</div></div>
<div class="cards">
<div class="rcard">
<div class="rphoto" style="background:linear-gradient(135deg,#a8c8e0,#5888b8)"><div class="dealflag">−24% Bundle</div><div class="saveheart">♡</div></div>
<div class="rbody">
<div class="rname">Ocean Bluff Resort</div><div class="rloc">Mission Beach</div>
<div class="scorerow"><span class="scorebadge">9.2</span><span class="scoretext">Wonderful · 1,847 reviews</span></div>
<div class="pricerow"><span class="strike">$268</span><span class="now">$204</span> <span class="perday">/ night</span></div>
<div class="onekey">● Earn 2,040 One Key cash</div>
</div>
</div>
<div class="rcard">
<div class="rphoto" style="background:linear-gradient(135deg,#e0c8a8,#a87858)"><div class="saveheart" style="background:#1668E3">♥</div></div>
<div class="rbody">
<div class="rname">Gaslamp Boutique Hotel</div><div class="rloc">0.4 mi from center</div>
<div class="scorerow"><span class="scorebadge" style="background:#1668E3">8.4</span><span class="scoretext">Excellent · 962 reviews</span></div>
<div class="pricerow"><span class="now">$149</span> <span class="perday">/ night</span></div>
<div class="onekey">● Earn 1,490 One Key cash</div>
</div>
</div>
<div class="rcard">
<div class="rphoto" style="background:linear-gradient(135deg,#c8d8b8,#788858)"><div class="dealflag">Member price</div><div class="saveheart">♡</div></div>
<div class="rbody">
<div class="rname">Balboa Park Inn</div><div class="rloc">Balboa Park</div>
<div class="scorerow"><span class="scorebadge" style="background:#14416B">7.6</span><span class="scoretext">Good · 421 reviews</span></div>
<div class="pricerow"><span class="strike">$132</span><span class="now">$99</span> <span class="perday">/ night</span></div>
<div class="onekey">● Earn 990 One Key cash</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6f5b1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #003399; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #141414;
border: 1px solid #003399; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #141414;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6f5b1f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #003399; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Montserrat','Helvetica Neue',Arial,sans-serif; color:#373b3e; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#141414;}
.logo{font-size:19px;font-weight:600;color:#fff;letter-spacing:.5px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:500;color:#dfe0e1;text-transform:uppercase;letter-spacing:.3px;}
.navcta{background:#003399;color:#fff;font-size:12px;font-weight:600;padding:9px 18px;border-radius:3px;}
.hero{height:260px;display:flex;align-items:center;padding:0 36px;background:#141414;}
.herotext{width:410px;}
.kicker{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#003399;margin-bottom:14px;}
.headline{font-size:30px;font-weight:600;color:#fff;margin-bottom:14px;line-height:1.2;letter-spacing:-0.3px;}
.sub{font-size:13px;color:#cbccce;margin-bottom:20px;max-width:320px;}
.btn{display:inline-block;background:#003399;color:#fff;font-size:13px;font-weight:600;padding:12px 26px;border-radius:3px;}
.chair{width:220px;height:220px;margin-left:60px;position:relative;}
.back{position:absolute;left:60px;top:0;width:90px;height:150px;background:linear-gradient(180deg,#1c1c1c,#003399 120%);border-radius:14px 14px 6px 6px;}
.seat{position:absolute;left:50px;top:150px;width:110px;height:30px;background:#1c1c1c;border-radius:6px;}
.base{position:absolute;left:95px;top:180px;width:8px;height:30px;background:#373b3e;}
.sec{padding:18px 36px 0;}
.sectitle{font-size:14px;font-weight:600;color:#141414;margin-bottom:14px;letter-spacing:.2px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border:1px solid #dfe0e1;border-radius:4px;padding:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#cc1420;color:#fff;font-size:9px;font-weight:600;padding:3px 8px;border-radius:3px;text-transform:uppercase;}
.thumb{height:88px;border-radius:3px;margin-bottom:10px;}
.pname{font-size:13px;font-weight:600;color:#141414;}
.pprice{font-size:13px;color:#003399;font-weight:700;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Noblechairs</div>
<div class="navlinks"><span>Gaming</span><span>Office</span><span>Accessories</span></div>
<div class="navcta">Configure</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">German Engineering</div>
<div class="headline">Built like a cockpit, not a chair.</div>
<div class="sub">Precision-engineered seating for the hours that actually count.</div>
<div class="btn">Shop Chairs</div>
</div>
<div class="chair"><div class="back"></div><div class="seat"></div><div class="base"></div></div>
</div>
<div class="sec">
<div class="sectitle">Featured Models</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#141414,#003399)"></div><div class="pname">EPIC Series</div><div class="pprice">$549</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003399,#141414)"></div><div class="pname">HERO Series</div><div class="pprice">$499</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#cbccce,#141414)"></div><div class="pname">Adjustable Armrest Set</div><div class="pprice">$89</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f4; color: #26251e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f4; color: #26251e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -0.11px; margin: 0; color: #26251e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #807d72; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background: #f54e00; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background: #ffffff; color: #26251e;
border: 1px solid #f54e00; border-radius: 8px;
padding: 9px 17px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #26251e;
border: 1px solid #c3c2be; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #807d72; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; background: #e6e5e0; color: #26251e;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f4; color:#26251e; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:16px; font-weight:400; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#5a5852; }
.btnd { background:#26251e; color:#f7f7f4; border-radius:8px; padding:10px 18px; font-size:13px; font-weight:500; }
.hero { text-align:center; padding:6px 32px 14px; }
.hero h1 { font-size:38px; font-weight:400; letter-spacing:-1.4px; margin:0 0 8px; line-height:1.1; }
.hero p { font-size:14px; color:#5a5852; margin:0 auto 14px; max-width:400px; }
.btnf { background:#f54e00; color:#fff; border-radius:8px; padding:10px 18px; font-size:13px; font-weight:500; }
.idecard { margin:0 32px; background:#fff; border:1px solid #e6e5e0; border-radius:12px; display:flex; height:250px; overflow:hidden; }
.sidebar { width:120px; background:#fafaf7; border-right:1px solid #e6e5e0; padding:12px; font-size:11px; color:#807d72; }
.sidebar div { padding:5px 0; }
.editor { flex:1; padding:14px; font-family:"Courier New", monospace; font-size:12px; color:#26251e; line-height:1.7; }
.editor .kw { color:#f54e00; } .editor .cm { color:#a09c92; }
.chat { width:220px; background:#fafaf7; border-left:1px solid #e6e5e0; padding:12px; font-size:11px; }
.chat .msg { background:#fff; border:1px solid #e6e5e0; border-radius:8px; padding:8px; margin-bottom:8px; color:#5a5852; }
.timeline { display:flex; gap:10px; padding:16px 32px 0; align-items:center; }
.pill { border-radius:999px; padding:4px 10px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.t1 { background:#dfa88f; color:#26251e; } .t2 { background:#9fc9a2; color:#26251e; }
.t3 { background:#9fbbe0; color:#26251e; } .t4 { background:#c0a8dd; color:#26251e; } .t5 { background:#c08532; color:#fff; }
.timeline span.arrow { color:#a09c92; font-size:11px; }
</style></head>
<body>
<nav>
<div class="brand">Cursor</div>
<div class="navlinks"><span>Pricing</span><span>Features</span><span>Enterprise</span><span>Blog</span></div>
<span class="btnd">Download</span>
</nav>
<div class="hero">
<h1>The AI code editor</h1>
<p>Built to make you extraordinarily productive, Cursor is the best way to code with AI.</p>
<span class="btnf">Download for macOS</span>
</div>
<div class="idecard">
<div class="sidebar"><div>▾ src</div><div> app.tsx</div><div> utils.ts</div><div> api.ts</div><div>▸ tests</div></div>
<div class="editor"><span class="cm">// authenticate user</span><br><span class="kw">async function</span> login(user) {<br> <span class="kw">return</span> api.post(user);<br>}</div>
<div class="chat"><div class="msg">Add error handling to the login function</div><div class="msg">Done — added try/catch and a toast on failure.</div></div>
</div>
<div class="timeline">
<span class="pill t1">Thinking</span><span class="arrow">→</span>
<span class="pill t2">Grepping</span><span class="arrow">→</span>
<span class="pill t3">Reading</span><span class="arrow">→</span>
<span class="pill t4">Editing</span><span class="arrow">→</span>
<span class="pill t5">Done</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #202223;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #202223;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.2; margin: 0; color: #202223; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6d7175; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: #132558; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: #ffffff; color: #132558;
border: 1px solid #132558; border-radius: 0px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #202223;
border: 1px solid #c7c8c8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d7175; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #ffffff; color: #393939;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#393939; box-sizing:border-box;
font-family:Georgia, "Times New Roman", serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #dedede; }
.brand { font-family:Oswald,Helvetica,Arial,sans-serif; font-size:19px; font-weight:600; color:#202223;
text-transform:uppercase; letter-spacing:2px; }
.nlinks { display:flex; gap:26px; font-family:Helvetica,Arial,sans-serif; }
.nlinks div { font-size:11px; font-weight:600; color:#202223; text-transform:uppercase; letter-spacing:1px; }
.nlinks div.on { color:#132558; border-bottom:2px solid #132558; padding-bottom:20px; }
.searchbtn { border:1px solid #202223; color:#202223; font-family:Helvetica,Arial,sans-serif; font-size:11px;
font-weight:600; text-transform:uppercase; letter-spacing:1px; padding:10px 20px; }
.hero { height:250px; background:#f3f3f3; display:flex; align-items:center; padding:0 40px; position:relative; }
.hero .watchring { position:absolute; right:70px; top:50%; transform:translateY(-50%); width:170px; height:170px;
border-radius:50%; border:10px solid #202223; background:radial-gradient(circle at 40% 35%,#ffffff,#dedede 70%); }
.hero .watchring::after { content:''; position:absolute; left:50%; top:50%; width:2px; height:55px; background:#202223;
transform:translate(-50%,-100%) rotate(20deg); transform-origin:bottom; }
.herotxt .k { font-family:Helvetica,Arial,sans-serif; font-size:11px; font-weight:600; text-transform:uppercase;
letter-spacing:2px; color:#6d7175; }
.herotxt h1 { font-family:Oswald,Helvetica,Arial,sans-serif; font-size:34px; font-weight:600; text-transform:uppercase;
letter-spacing:1px; color:#132558; margin:10px 0 12px; }
.herotxt p { font-size:15px; line-height:1.5; max-width:400px; margin:0 0 16px; color:#393939; }
.herobtn { display:inline-block; background:#132558; color:#fff; font-family:Helvetica,Arial,sans-serif; font-size:11px;
font-weight:600; text-transform:uppercase; letter-spacing:1.5px; padding:13px 26px; }
.section { padding:22px 32px 0; }
.sechead { font-family:Oswald,Helvetica,Arial,sans-serif; font-size:16px; font-weight:600; text-transform:uppercase;
letter-spacing:1.5px; color:#202223; margin-bottom:14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { border:1px solid #dedede; }
.shot { aspect-ratio:1/1; background:#f3f3f3; position:relative; display:flex; align-items:center; justify-content:center; }
.dial { width:64%; height:64%; border-radius:50%; border:5px solid #202223; }
.c1 .dial { background:radial-gradient(circle,#fff,#e8e8e8 75%); }
.c2 .dial { background:radial-gradient(circle,#dedede,#959ea9 75%); }
.c3 .dial { background:radial-gradient(circle,#fff,#dedede 75%); }
.c4 .dial { background:radial-gradient(circle,#e8e8e8,#c8c8c8 75%); }
.badge { position:absolute; top:10px; left:10px; font-family:Helvetica,Arial,sans-serif; font-size:10px; font-weight:700;
text-transform:uppercase; padding:3px 8px; border-radius:2px; }
.badge.new { background:#ff6a6a; color:#fff; }
.badge.exc { border:1px solid #41b883; color:#41b883; background:#fff; }
.cinfo { padding:10px 4px 4px; }
.cref { font-family:Helvetica,Arial,sans-serif; font-size:10px; color:#6d7175; text-transform:uppercase; letter-spacing:0.5px; }
.ctitle { font-size:15px; margin:3px 0; color:#202223; }
.cprice { font-family:Helvetica,Arial,sans-serif; font-size:15px; font-weight:700; color:#132558; }
</style></head>
<body>
<nav>
<div class="brand">Danny S Vintage Watches</div>
<div class="nlinks"><div class="on">Rolex</div><div>Omega</div><div>Patek Philippe</div><div>Sell A Watch</div></div>
<div class="searchbtn">Ref. Lookup</div>
</nav>
<div class="hero">
<div class="watchring"></div>
<div class="herotxt">
<div class="k">Est. 1987 · Buy · Sell · Trade</div>
<h1>Provenance You<br>Can Trust</h1>
<p>Authenticated vintage timepieces, hand-inspected and catalogued for the serious collector.</p>
<div class="herobtn">View The Catalogue</div>
</div>
</div>
<div class="section">
<div class="sechead">Recently Acquired</div>
<div class="grid">
<div class="card c1"><div class="shot"><span class="badge new">New Arrival</span><div class="dial"></div></div>
<div class="cinfo"><div class="cref">Ref. 1016</div><div class="ctitle">Rolex Explorer, 1967</div><div class="cprice">$18,400</div></div></div>
<div class="card c2"><div class="shot"><span class="badge exc">Excellent</span><div class="dial"></div></div>
<div class="cinfo"><div class="cref">Ref. 2915</div><div class="ctitle">Omega Speedmaster, 1971</div><div class="cprice">$9,750</div></div></div>
<div class="card c3"><div class="shot"><div class="dial"></div></div>
<div class="cinfo"><div class="cref">Ref. 6694</div><div class="ctitle">Rolex Oysterdate, 1979</div><div class="cprice">$4,200</div></div></div>
<div class="card c4"><div class="shot"><span class="badge exc">Excellent</span><div class="dial"></div></div>
<div class="cinfo"><div class="cref">Ref. 3970</div><div class="ctitle">Patek Perpetual Calendar, 1988</div><div class="cprice">$142,000</div></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4f5f7; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f4f5f7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfdfe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F4F5F7; color:#16191C; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.top { background:#fff; padding:16px 28px; border-bottom:1px solid #E2E5E9; }
.brand { font-size:15px; font-weight:800; color:#FF690F; margin:0 0 6px; }
.route { font-size:18px; font-weight:800; }
.routesub { font-size:12px; color:#5C656E; margin-top:2px; }
.cal { display:flex; gap:6px; padding:14px 28px; overflow:hidden; }
.day { flex:1; background:#fff; border:1px solid #E2E5E9; border-radius:8px; padding:8px 4px; text-align:center; }
.day.sel { background:#FF690F; border-color:#FF690F; }
.day.sel .dn, .day.sel .dp { color:#fff; }
.dn { font-size:11px; color:#5C656E; }
.dp { font-size:13px; font-weight:800; margin-top:4px; }
.dp.low { color:#1E9E5A; }
.dp.high { color:#E5484D; }
.forecast { margin:0 28px 14px; background:#FFF0E6; border:1px solid #FF8A42; border-radius:10px; padding:12px 16px; display:flex; align-items:center; gap:10px; }
.fc-glyph { color:#FF690F; font-size:18px; }
.fc-text { font-size:13px; font-weight:600; }
.fc-sub { font-size:11px; color:#5C656E; }
.fare { margin:0 28px 12px; background:#fff; border:1px solid #E2E5E9; border-radius:10px; padding:14px 16px; }
.airline-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.alogo { width:26px; height:26px; border-radius:6px; background:linear-gradient(135deg,#21262B,#101214); }
.aname { font-size:13px; font-weight:700; }
.hacker { background:#FF690F; color:#fff; font-size:10px; font-weight:800; padding:2px 8px; border-radius:4px; margin-left:auto; }
.legrow { display:flex; align-items:center; justify-content:space-between; }
.time { font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; }
.apt { font-size:11px; color:#5C656E; }
.arc { flex:1; text-align:center; }
.arc .dur { font-size:11px; color:#5C656E; }
.arc .line { height:1px; background:#E2E5E9; margin:6px 0; position:relative; }
.bottomrow { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:10px; border-top:1px solid #E2E5E9; }
.provider { font-size:11px; color:#5C656E; }
.price { font-size:20px; font-weight:800; color:#16191C; font-variant-numeric:tabular-nums; }
.pricesub { font-size:10px; color:#5C656E; text-align:right; }
</style></head>
<body>
<div class="top">
<p class="brand">KAYAK (iOS)</p>
<div class="route">SFO → JFK</div>
<div class="routesub">Oct 12 · 1 adult · Economy · Round-trip</div>
</div>
<div class="cal">
<div class="day"><div class="dn">SUN</div><div class="dp low">$210</div></div>
<div class="day"><div class="dn">MON</div><div class="dp">$254</div></div>
<div class="day sel"><div class="dn">TUE</div><div class="dp">$232</div></div>
<div class="day"><div class="dn">WED</div><div class="dp high">$318</div></div>
<div class="day"><div class="dn">THU</div><div class="dp">$268</div></div>
<div class="day"><div class="dn">FRI</div><div class="dp high">$342</div></div>
<div class="day"><div class="dn">SAT</div><div class="dp low">$198</div></div>
</div>
<div class="forecast">
<span class="fc-glyph">↗</span>
<div><div class="fc-text">Prices are likely to rise — book soon</div><div class="fc-sub">87% confidence</div></div>
</div>
<div class="fare">
<div class="airline-row"><div class="alogo"></div><div class="aname">JetBlue</div><div class="hacker">HACKER FARE</div></div>
<div class="legrow">
<div><div class="time">7:45a</div><div class="apt">SFO</div></div>
<div class="arc"><div class="dur">5h 32m · 1 stop</div><div class="line"></div></div>
<div style="text-align:right;"><div class="time">4:17p</div><div class="apt">JFK</div></div>
</div>
<div class="bottomrow"><span class="provider">2 booking sites</span><div><div class="price">$232</div><div class="pricesub">round-trip</div></div></div>
</div>
<div class="fare">
<div class="airline-row"><div class="alogo"></div><div class="aname">Delta</div></div>
<div class="legrow">
<div><div class="time">9:10a</div><div class="apt">SFO</div></div>
<div class="arc"><div class="dur">5h 05m · Nonstop</div><div class="line"></div></div>
<div style="text-align:right;"><div class="time">5:15p</div><div class="apt">JFK</div></div>
</div>
<div class="bottomrow"><span class="provider">Delta.com</span><div><div class="price">$318</div><div class="pricesub">round-trip</div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #333333;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #333333;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: 0.25px; margin: 0; color: #333333; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #f9fafb; color: #333333;
border: 1px solid #108474; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #333333;
border: 1px solid #c8c8c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cb932d; color: #333333;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9fafb; color:#333333; box-sizing:border-box; font-family:'Jost', 'Nunito Sans', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; padding:0 32px; background:#ffffff; }
.brand { font-size:20px; font-weight:600; letter-spacing:1px; }
.navlinks { display:flex; gap:20px; margin-left:auto; }
.navlinks div { font-size:15px; font-weight:600; letter-spacing:.5px; }
.navlinks div.active { color:#108474; }
.hero { background:#f2f2f2; padding:36px 32px; text-align:center; }
.hero h1 { font-size:36px; font-weight:600; letter-spacing:1px; margin:0 0 10px; }
.hero p { font-size:14px; margin:0 0 16px; }
.hero .cta { display:inline-block; background:#108474; color:#fff; font-size:16px; font-weight:600; letter-spacing:.5px; padding:14px 32px; border-radius:52px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:22px 32px; }
.card { background:#fff; border-radius:12px; overflow:hidden; }
.img { aspect-ratio:1/1; }
.g1 { background:radial-gradient(circle,#108474,#0d6b5c); }
.g2 { background:radial-gradient(circle,#cb932d,#7a5a1a); }
.g3 { background:radial-gradient(circle,#a89cc8,#4b3e6b); }
.info { padding:14px; }
.badge { display:inline-block; background:#cb932d; color:#333; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:4px 8px; border-radius:4px; margin-bottom:6px; }
.name { font-size:16px; font-weight:600; margin-bottom:4px; }
.price { font-size:16px; }
</style></head>
<body>
<nav>
<div class="brand">Finex</div>
<div class="navlinks"><div class="active">Skillets</div><div>Woks</div><div>Sets</div><div>Care</div></div>
</nav>
<div class="hero">
<h1>Heirloom Cast Iron</h1>
<p>Cookware built to be handed down for generations</p>
<div class="cta">Shop All Cookware</div>
</div>
<div class="grid">
<div class="card"><div class="img g1"></div><div class="info"><span class="badge">Best Seller</span><div class="name">10.25" Cast Iron Skillet</div><div class="price">$175</div></div></div>
<div class="card"><div class="img g2"></div><div class="info"><div class="name">12" Carbon Steel Wok</div><div class="price">$195</div></div></div>
<div class="card"><div class="img g3"></div><div class="info"><div class="name">3-Piece Cookware Set</div><div class="price">$420</div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #696969; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ff1716; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #fafafa; color: #231f20;
border: 1px solid #ff1716; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #231f20;
border: 1px solid #c4c3c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #696969; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #ff1716; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#231f20;color:#4a4a4a;font-family:'Jost','Helvetica Neue',Arial,sans-serif;}
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#231f20;border-bottom:1px solid #3a3a3a;}
.logo{font-size:20px;font-weight:600;color:#fff;letter-spacing:.5px;}
.logo span{color:#ff1716;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:500;color:#e7e7e7;}
.hero{background:#231f20;padding:20px 28px 26px;display:flex;align-items:center;gap:28px;}
.hero-txt{width:360px;}
.hero-txt h1{font-size:32px;font-weight:600;color:#fff;margin:0 0 10px;line-height:1.2;}
.hero-txt p{font-size:12px;color:#b4b4b4;margin:0 0 16px;}
.cta{background:#ff1716;color:#fff;padding:11px 26px;border-radius:2px;font-weight:600;font-size:12px;display:inline-block;}
.binwall{flex:1;height:190px;background:#1a1616;border-radius:4px;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;}
.sleeve{width:60px;height:150px;border-radius:2px;}
.s1{background:linear-gradient(160deg,#ff1716,#a30f0f);}
.s2{background:linear-gradient(160deg,#333,#111);height:160px;}
.s3{background:linear-gradient(160deg,#e7e7e7,#c4c4c4);}
.s4{background:linear-gradient(160deg,#4a4a4a,#231f20);height:170px;}
.tagrow{display:flex;gap:8px;padding:12px 28px 0;}
.tag{background:#e7e7e7;color:#4a4a4a;border-radius:2px;padding:6px 14px;font-size:11px;font-weight:600;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:14px 28px;}
.card{background:#fafafa;border-radius:2px;padding:10px;}
.box{height:82px;border-radius:2px;margin-bottom:8px;position:relative;}
.b1{background:linear-gradient(160deg,#ff1716,#a30f0f);}
.b2{background:linear-gradient(160deg,#231f20,#3a3a3a);}
.b3{background:linear-gradient(160deg,#e7e7e7,#bcbcbc);}
.b4{background:linear-gradient(160deg,#4a4a4a,#231f20);}
.badge{position:absolute;top:6px;left:6px;background:#ff1716;color:#fff;font-size:8px;font-weight:700;padding:3px 6px;border-radius:2px;text-transform:uppercase;}
.name{font-size:12px;font-weight:600;color:#231f20;margin:0 0 3px;}
.price{font-size:13px;font-weight:700;color:#231f20;}
</style>
<div class="nav">
<div class="logo">Get ON Down<span>.</span></div>
<div class="navlinks"><span>Vinyl</span><span>Box Sets</span><span>Cassettes</span><span>Exclusives</span></div>
</div>
<div class="hero">
<div class="hero-txt">
<h1>Flip through the crates, online</h1>
<p>Limited pressings, box sets, and exclusives — the sleeve does the talking, we just make it easy to buy.</p>
<a class="cta">Shop New Arrivals</a>
</div>
<div class="binwall"><div class="sleeve s1"></div><div class="sleeve s2"></div><div class="sleeve s3"></div><div class="sleeve s4"></div></div>
</div>
<div class="tagrow">
<div class="tag">Rock</div><div class="tag">Hip-Hop</div><div class="tag">Jazz</div><div class="tag">Soul</div>
</div>
<div class="grid">
<div class="card"><div class="box b1"><span class="badge">Limited Edition</span></div><div class="name">Colored Vinyl Box Set</div><div class="price">$64.99</div></div>
<div class="card"><div class="box b2"><span class="badge">Pre-Order</span></div><div class="name">Deluxe Reissue LP</div><div class="price">$32.99</div></div>
<div class="card"><div class="box b3"><span class="badge">Exclusive</span></div><div class="name">Store-Exclusive Pressing</div><div class="price">$28.99</div></div>
<div class="card"><div class="box b4"></div><div class="name">Cassette Tape Reissue</div><div class="price">$14.99</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f4; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f4; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #e74c3c; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f4f4f4; color: #111111;
border: 1px solid #e74c3c; border-radius: 0px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f4f4f4; color: #222222;
border: 1px solid #bbbbbb; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e03939; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f4f4; color:#222222; box-sizing:border-box;
font-family:"Proxima Nova","Open Sans","Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; background:#111111; }
.brand { font-family:"Kingthings Calligraphica",Georgia,serif; font-size:22px; color:#f4f4f4; letter-spacing:1px; }
.brand span { color:#e74c3c; }
.nlinks { display:flex; gap:22px; }
.nlinks div { font-family:Oswald,Arial,sans-serif; font-size:12px; font-weight:600; color:#e3e5e7; text-transform:uppercase; letter-spacing:1px; }
.nlinks div.on { color:#e74c3c; }
.searchbtn { background:#222222; border:1px solid #444; color:#f4f4f4; font-size:11px; padding:8px 16px; border-radius:8px; }
.hero { background:#111111; padding:44px 40px; text-align:center; }
.herotxt .k { font-family:Oswald,Arial,sans-serif; color:#e74c3c; font-size:11px; letter-spacing:2px; text-transform:uppercase; }
.herotxt h1 { font-family:"Kingthings Calligraphica",Georgia,serif; color:#ffffff; font-size:38px; font-weight:400;
margin:12px 0 12px; }
.herotxt p { color:#ced0d2; font-size:14px; max-width:520px; margin:0 auto 18px; }
.herobtn { display:inline-block; background:#e74c3c; color:#fff; font-family:Oswald,Arial,sans-serif; font-size:12px;
font-weight:600; text-transform:uppercase; letter-spacing:1px; padding:12px 26px; }
.section { padding:22px 30px 0; }
.sechead { font-family:Oswald,Arial,sans-serif; font-size:16px; font-weight:600; text-transform:uppercase;
letter-spacing:1px; color:#111111; margin-bottom:14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { background:#ffffff; border:1px solid #ced0d2; }
.shot { height:100px; position:relative; }
.c1 .shot { background:linear-gradient(160deg,#222,#e74c3c 130%); }
.c2 .shot { background:linear-gradient(160deg,#111,#525252); }
.c3 .shot { background:linear-gradient(160deg,#222,#f5871f 140%); }
.c4 .shot { background:linear-gradient(160deg,#111,#e74c3c 120%); }
.badge { position:absolute; top:8px; left:8px; font-family:Oswald,Arial,sans-serif; font-size:10px; font-weight:700;
text-transform:uppercase; padding:2px 8px; color:#fff; }
.badge.sale { background:#e03939; } .badge.new { background:#6688ff; }
.cbody { padding:10px 12px 12px; }
.ctitle { font-size:13px; font-weight:600; margin-bottom:4px; }
.cprice { color:#e74c3c; font-weight:700; font-size:14px; }
.stars { color:#ff9b00; font-size:11px; margin-top:4px; }
</style></head>
<body>
<nav>
<div class="brand">Dark Delicacies</div>
<div class="nlinks"><div class="on">Books</div><div>Signed Editions</div><div>Merch</div><div>Events</div></div>
<div class="searchbtn">⌕ Search</div>
</nav>
<div class="hero">
<div class="herotxt">
<div class="k">Since 1990 · Burbank, CA</div>
<h1>A Candlelit Library For Horror Readers</h1>
<p>Signed first editions, rare horror fiction, and curated darkness for the discerning collector.</p>
<div class="herobtn">Browse Signed Editions</div>
</div>
</div>
<div class="section">
<div class="sechead">New & Notable</div>
<div class="grid">
<div class="card c1"><div class="shot"><span class="badge new">New</span></div>
<div class="cbody"><div class="ctitle">The Blackwood Estate</div><div class="cprice">$28.00</div><div class="stars">★★★★★</div></div></div>
<div class="card c2"><div class="shot"></div>
<div class="cbody"><div class="ctitle">Signed: Coffin Songs</div><div class="cprice">$45.00</div><div class="stars">★★★★☆</div></div></div>
<div class="card c3"><div class="shot"><span class="badge sale">Sale</span></div>
<div class="cbody"><div class="ctitle">Whistler's Grave, First Ed.</div><div class="cprice">$32.00</div><div class="stars">★★★★★</div></div></div>
<div class="card c4"><div class="shot"></div>
<div class="cbody"><div class="ctitle">The Hollow Choir</div><div class="cprice">$24.00</div><div class="stars">★★★★☆</div></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #181818;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #181818;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.4; margin: 0; color: #181818; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px; background: #cc3333; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px; background: #ffffff; color: #181818;
border: 1px solid #cc3333; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #181818;
border: 1px solid #c5c5c5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cc3333; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Open Sans',Arial,Verdana,sans-serif; color:#4b4b4b; }
*{box-sizing:border-box;}
.nav{height:64px;background:#181818;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:600;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;color:#fff;}
.navlinks .on{color:#cc3333;border-bottom:2px solid #cc3333;padding-bottom:20px;}
.hero{height:200px;background:#181818;display:flex;align-items:center;padding:0 32px;justify-content:space-between;}
.h1{font-size:28px;font-weight:600;color:#fff;margin:0 0 8px;max-width:400px;}
.sub{font-size:14px;color:#c9c9c9;max-width:380px;}
.deck{width:210px;height:150px;position:relative;}
.platter{position:absolute;width:130px;height:130px;border-radius:50%;background:repeating-conic-gradient(#2a2a2a 0deg 8deg,#333 8deg 16deg);top:10px;right:50px;border:3px solid #4b4b4b;}
.jog{position:absolute;width:40px;height:40px;border-radius:50%;background:#cc3333;top:55px;right:95px;}
.strip{height:44px;background:#f5f5f5;display:flex;align-items:center;gap:8px;padding:0 32px;}
.chip{background:#fff;border:1px solid #d9d9d9;border-radius:4px;padding:6px 14px;font-size:12px;font-weight:600;color:#4b4b4b;}
.chip.on{background:#cc3333;color:#fff;border-color:#cc3333;}
.grid{display:flex;gap:14px;padding:14px 32px 0;}
.card{width:206px;background:#f2f2f2;border-radius:8px;padding:14px;border:1px solid #e5e5e5;}
.thumb{height:104px;border-radius:4px;margin-bottom:10px;object-fit:cover;}
.ptitle{font-size:14px;font-weight:600;color:#181818;}
.pprice{font-size:18px;font-weight:700;color:#cc3333;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:52px;background:#181818;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#999999;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Reloop</div>
<div class="navlinks"><div class="on">Mixers</div><div>Turntables</div><div>Controllers</div><div>Accessories</div></div>
</div>
<div class="hero">
<div>
<div class="h1">Built for the booth, not the shelf.</div>
<div class="sub">DJ hardware engineered for scanning specs fast and playing sets faster.</div>
</div>
<div class="deck"><div class="platter"></div><div class="jog"></div></div>
</div>
<div class="strip">
<div class="chip on">All</div><div class="chip">Mixers</div><div class="chip">Turntables</div><div class="chip">Controllers</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#181818,#cc3333)"></div><div class="ptitle">RP-8000 MK2 Turntable</div><div class="pprice">$599.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#cc3333,#181818)"></div><div class="ptitle">Elite Battle Mixer</div><div class="pprice">$949.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4b4b4b,#181818)"></div><div class="ptitle">Beatpad 2 Controller</div><div class="pprice">$399.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#181818,#4b4b4b)"></div><div class="ptitle">Concealed Carry Case</div><div class="pprice">$89.00</div></div>
</div>
<div class="footer"><span>© Reloop — utilitarian, high-contrast, built to scan</span><span>Warranty · Dealers</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f9ff; color: #1a1b18;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f9ff; color: #1a1b18;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1b18; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767167; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #ff9f1c; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #ffffff; color: #50596c;
border: 1px solid #ff9f1c; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1b18;
border: 1px solid #dedede; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767167; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e63946; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f9ff; color:#1a1b18; box-sizing:border-box;
font-family:'Raleway',sans-serif; }
* { box-sizing:border-box; }
.promo { height:30px; background:#faeaa1; display:flex; align-items:center; justify-content:center;
font-size:14px; font-weight:700; letter-spacing:0.2px; }
nav { height:64px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #dedede; }
.brand { font-size:18px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; color:#50596c; }
main { display:flex; height:calc(640px - 94px); }
.gallery { width:42%; background:#e1e6f9; display:flex; align-items:center; justify-content:center; gap:14px; }
.paper { width:110px; height:150px; border-radius:8px; box-shadow:0 8px 16px rgba(0,0,0,0.08); }
.details { width:58%; padding:26px 34px; }
.cats { display:flex; gap:8px; margin-bottom:14px; }
.pill { background:#bbc1e1; color:#50596c; font-size:13px; font-weight:600; border-radius:9999px; padding:6px 16px; }
.pill.active { background:#899df1; color:#fff; }
h1 { font-size:26px; font-weight:700; letter-spacing:-0.3px; margin:0 0 8px; }
.price { font-size:18px; font-weight:700; margin:0 0 4px; }
.price .sale { color:#e63946; }
.price .old { color:#767167; text-decoration:line-through; font-size:14px; font-weight:400; margin-left:8px; }
.desc { font-size:14px; line-height:1.6; color:#50596c; margin:14px 0 18px; max-width:420px; }
.badges { display:flex; gap:6px; margin-bottom:16px; }
.badge { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; border-radius:4px; padding:3px 8px; color:#fff; }
.badge.sale { background:#e63946; }
.badge.stock { background:#2e7e4b; }
.buyrow { display:flex; gap:12px; }
.btn-primary { background:#ff9f1c; color:#fff; border:none; border-radius:8px; padding:12px 24px; font-size:15px; font-weight:600; letter-spacing:0.3px; }
.btn-secondary { background:#fff; color:#50596c; border:1px solid #50596c; border-radius:8px; padding:11px 23px; font-size:15px; font-weight:600; }
</style></head>
<body>
<div class="promo">Free shipping on orders over $50</div>
<nav>
<p class="brand">Cardstock Warehouse</p>
<div class="navlinks"><span>Cardstock</span><span>Vellum</span><span>Envelopes</span><span>Sale</span></div>
</nav>
<main>
<div class="gallery">
<div class="paper" style="background:#e63946"></div>
<div class="paper" style="background:#899df1"></div>
<div class="paper" style="background:#e9b461"></div>
</div>
<div class="details">
<div class="cats"><span class="pill active">Cardstock</span><span class="pill">100lb</span></div>
<h1>Periwinkle Blue Heavyweight Cardstock (25pk)</h1>
<div class="badges"><span class="badge sale">Sale</span><span class="badge stock">In Stock</span></div>
<p class="price"><span class="sale">$14.99</span><span class="old">$18.99</span></p>
<p class="desc">Premium 100lb cover-weight cardstock in a soft periwinkle blue — ideal for invitations, cardmaking, and studio projects.</p>
<div class="buyrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">View All Colors</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfbfb; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfbfb; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #f57e61; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #fbfbfb; color: #222222;
border: 1px solid #f57e61; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.625; background: #fbfbfb; color: #222222;
border: 1px solid #c5c5c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #ff3300; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Inside Weather</title>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#fbfbfb;font-family:'Poppins','Helvetica Neue',Arial,sans-serif;color:#31373d;}
*{box-sizing:border-box;}
.nav{position:absolute;top:0;left:0;width:960px;height:64px;background:#fbfbfb;border-bottom:1px solid #e3e3e3;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-weight:600;font-size:18px;color:#222222;}
.navlinks{display:flex;gap:26px;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:0.2px;}
.navlinks span.active{border-bottom:2px solid #222222;padding-bottom:20px;color:#222222;}
.navlinks span.inactive{color:#7a7a7a;}
.navicons{font-size:12px;color:#7a7a7a;}
.hero{position:absolute;top:64px;left:0;width:960px;height:230px;background:#f6f6f7;display:flex;align-items:center;padding:0 44px;}
.hero h1{font-size:32px;font-weight:600;color:#222222;letter-spacing:-0.5px;margin:0 0 12px 0;width:420px;line-height:1.25;}
.hero p{font-size:15px;color:#31373d;width:400px;margin:0 0 18px 0;line-height:1.6;}
.cta{background:#f57e61;color:#fff;border-radius:8px;padding:14px 30px;font-size:15px;font-weight:500;display:inline-block;}
.sofaart{position:absolute;right:60px;top:40px;width:240px;height:150px;background:linear-gradient(160deg,#e8e9eb,#d9dade);border-radius:12px;}
.sofaart::after{content:'';position:absolute;bottom:-14px;left:20px;width:200px;height:24px;background:#f57e61;border-radius:12px;opacity:0.85;}
.sectitle{position:absolute;top:322px;left:36px;font-size:20px;font-weight:500;color:#222222;}
.grid{position:absolute;top:364px;left:36px;width:888px;height:230px;display:flex;gap:20px;}
.card{width:212px;background:#fbfbfb;border-radius:12px;overflow:hidden;}
.imgbox{width:212px;height:150px;border-radius:12px 12px 0 0;position:relative;}
.imgbox.a{background:linear-gradient(135deg,#f6f6f7,#f57e61);}
.imgbox.b{background:linear-gradient(135deg,#eef2f0,#3ea36a);}
.imgbox.c{background:linear-gradient(135deg,#e9e9eb,#7a7a7a);}
.imgbox.d{background:linear-gradient(135deg,#f1f2f3,#ff3300);}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;border-radius:4px;padding:2px 8px;color:#fff;}
.badge.sale{background:#ff3300;}
.badge.new{background:#3ea36a;}
.title{font-size:16px;font-weight:500;padding:8px 4px 2px;color:#222222;}
.price{font-size:16px;color:#222222;padding:0 4px;}
</style>
<div class="nav">
<div class="logo">Inside Weather</div>
<div class="navlinks"><span class="active">SOFAS</span><span class="inactive">SECTIONALS</span><span class="inactive">CHAIRS</span><span class="inactive">TABLES</span></div>
<div class="navicons">Search · Account · Cart</div>
</div>
<div class="hero">
<h1>Furniture that fits your life, not the other way around.</h1>
<p>Modular sofas built to order and shipped in weeks, not months — designed in Los Angeles.</p>
<div class="cta">Shop Now</div>
<div class="sofaart"></div>
</div>
<div class="sectitle">Shop Bestsellers</div>
<div class="grid">
<div class="card">
<div class="imgbox a"><div class="badge sale">Sale</div></div>
<div class="title">Cloud Modular Sectional</div>
<div class="price">$2,895</div>
</div>
<div class="card">
<div class="imgbox b"><div class="badge new">New</div></div>
<div class="title">Nook Lounge Chair</div>
<div class="price">$895</div>
</div>
<div class="card">
<div class="imgbox c"></div>
<div class="title">Round Oak Coffee Table</div>
<div class="price">$695</div>
</div>
<div class="card">
<div class="imgbox d"></div>
<div class="title">Two-Seat Sofa in Boucle</div>
<div class="price">$1,895</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f8; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f8; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.1px; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #6600ff; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #6600ff;
border: 1px solid #6600ff; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #141414;
border: 1px solid #bebebf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.22px; background: #6600ff; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f8; color:#272d45; box-sizing:border-box;
font-family:'Inter',sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#f7f7f8; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { color:#6600ff; font-size:22px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:24px; align-items:center; }
.navlinks span { font-size:12px; color:#676986; font-weight:600; }
.navlinks .cta { background:#6600ff; color:#fff; padding:9px 20px; border-radius:999px; font-size:12px; font-weight:700; }
.hero { height:250px; background:linear-gradient(120deg,#2b1453,#6600ff); display:flex; align-items:center; padding:0 40px; border-radius:0 0 32px 32px; overflow:hidden; position:relative; }
.blob { position:absolute; right:60px; top:20px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #c299ff, #6600ff 70%); }
.blob2 { position:absolute; right:180px; bottom:-40px; width:140px; height:140px; border-radius:50%; background:rgba(194,153,255,0.35); }
.heroTxt { position:relative; z-index:2; max-width:400px; }
.heroTxt h1 { color:#fff; font-size:32px; font-weight:700; margin:0 0 12px; letter-spacing:-0.5px; line-height:1.1; }
.heroTxt p { color:#e5e5eb; font-size:13px; margin:0 0 18px; }
.heroTxt .cta { display:inline-block; background:#ffffff; color:#6600ff; font-weight:700; font-size:13px; padding:12px 28px; border-radius:999px; }
.section-label { padding:18px 36px 10px; font-size:14px; font-weight:700; color:#272d45; }
.grid { display:flex; gap:14px; padding:0 36px; }
.card { flex:1; background:#ffffff; border-radius:8px; padding:12px; border:1px solid #e5e5eb; }
.card .art { height:92px; border-radius:8px; margin-bottom:10px; }
.a1 { background:linear-gradient(160deg,#6600ff,#c299ff); } .a2 { background:linear-gradient(160deg,#2b1453,#5a00e0); }
.a3 { background:linear-gradient(160deg,#c299ff,#f4f4f6); } .a4 { background:linear-gradient(160deg,#5a00e0,#2b1453); }
.card h3 { font-size:12px; font-weight:700; color:#272d45; margin:0 0 4px; }
.card p { font-size:10px; color:#9a9db1; margin:0 0 8px; }
.card .price { font-size:14px; font-weight:700; color:#6600ff; }
.card .pill { display:inline-block; background:#f4f4f6; color:#6600ff; font-size:9px; font-weight:700; padding:3px 10px; border-radius:999px; margin-top:6px; }
footer { height:60px; margin-top:14px; background:#272d45; display:flex; align-items:center; gap:26px; padding:0 36px; border-radius:16px 16px 0 0; }
footer span { color:#c299ff; font-size:10px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Flamingo</p>
<div class="navlinks"><span>Shave</span><span>Hair Removal</span><span>Skincare</span><span class="cta">Shop All</span></div>
</nav>
<div class="hero">
<div class="blob2"></div><div class="blob"></div>
<div class="heroTxt">
<h1>Body care with<br>the volume turned up.</h1>
<p>Electric violet, everywhere it counts. Bathroom essentials that don't apologize for showing up.</p>
<span class="cta">Shop Bestsellers</span>
</div>
</div>
<div class="section-label">Bathroom Favorites</div>
<div class="grid">
<div class="card"><div class="art a1"></div><h3>The Razor</h3><p>Reusable Handle Kit</p><div class="price">$24</div><div class="pill">Bestseller</div></div>
<div class="card"><div class="art a2"></div><h3>Smooth Serum</h3><p>Post-Shave Care</p><div class="price">$18</div></div>
<div class="card"><div class="art a3"></div><h3>Refill Blades, 8pk</h3><p>Subscribe & Save</p><div class="price">$16</div></div>
<div class="card"><div class="art a4"></div><h3>Exfoliating Mitt</h3><p>Pre-Shave Prep</p><div class="price">$12</div></div>
</div>
<footer>
<span>SUBSCRIBE & SAVE 20%</span><span>REFERRAL PROGRAM</span><span>SUSTAINABILITY PLEDGE</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #163959;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #163959;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.35; margin: 0; color: #163959; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #bd2426; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #163959;
border: 1px solid #bd2426; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #404040;
border: 1px solid #c5ced6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #bd2426; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ebebeb; font-family:Arial,'Helvetica Neue',sans-serif; color:#404040; }
*{box-sizing:border-box;}
.nav{height:56px;background:#163959;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;text-transform:uppercase;color:#fff;}
.navlinks span:first-child{border-bottom:3px solid #bd2426;padding-bottom:4px;}
.search{width:220px;height:30px;border-radius:8px;background:#fff;display:flex;align-items:center;padding:0 12px;font-size:12px;color:#595959;}
.hero{height:180px;background:#fff;display:flex;align-items:center;padding:0 28px;gap:24px;}
.heroimg{width:130px;height:150px;border-radius:8px;background:linear-gradient(160deg,#163959,#2f7bbf);flex-shrink:0;}
.herotext h1{font-size:26px;font-weight:700;color:#163959;margin:0 0 8px;}
.herotext p{font-size:13px;color:#404040;margin:0 0 12px;max-width:420px;line-height:1.5;}
.btn{display:inline-block;background:#bd2426;color:#fff;font-size:14px;font-weight:700;padding:10px 22px;border-radius:8px;}
.secTitle{font-size:18px;font-weight:700;color:#163959;padding:16px 28px 10px;}
.grid{display:flex;gap:14px;padding:0 28px;}
.card{width:200px;background:#fff;border-radius:8px;overflow:hidden;position:relative;}
.cardimg{height:110px;background:#f5f5f5;position:relative;}
.disc{position:absolute;width:70px;height:70px;border-radius:50%;top:20px;left:65px;background:radial-gradient(circle,#163959 0 8px,#2f7bbf 8px 40px,#163959 40px);}
.badge{position:absolute;top:6px;left:6px;background:#bd2426;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.stock{position:absolute;bottom:6px;right:6px;background:#9bca3e;color:#163959;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;}
.cardbody{padding:10px 12px;}
.ctitle{font-size:14px;font-weight:600;color:#163959;margin-bottom:4px;}
.cprice{font-size:14px;font-weight:700;color:#404040;}
.footer{position:absolute;bottom:0;left:0;right:0;height:34px;background:#163959;display:flex;align-items:center;justify-content:space-between;padding:0 28px;font-size:11px;color:#dedede;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Shout Factory</div>
<div class="navlinks"><span>Blu-ray</span><span>DVD</span><span>Vinyl</span><span>Collections</span></div>
<div class="search">Search titles, artists...</div>
</div>
<div class="hero">
<div class="heroimg"></div>
<div class="herotext">
<h1>Cult classics, catalog deep.</h1>
<p>Curated genre film, TV, and vinyl reissues — thousands of titles, one well-organized shelf.</p>
<div class="btn">Add to Cart</div>
</div>
</div>
<div class="secTitle">New This Week</div>
<div class="grid">
<div class="card"><div class="cardimg"><div class="disc"></div><div class="badge">Sale</div><div class="stock">In Stock</div></div><div class="cardbody"><div class="ctitle">Midnight Reel Vol. 3</div><div class="cprice">$19.98</div></div></div>
<div class="card"><div class="cardimg"><div class="disc"></div><div class="stock">In Stock</div></div><div class="cardbody"><div class="ctitle">Analog Sessions LP</div><div class="cprice">$27.99</div></div></div>
<div class="card"><div class="cardimg"><div class="disc"></div><div class="badge" style="background:#f68b1f;">New</div><div class="stock">In Stock</div></div><div class="cardbody"><div class="ctitle">Vault Series Box Set</div><div class="cprice">$54.99</div></div></div>
<div class="card"><div class="cardimg"><div class="disc"></div><div class="badge" style="background:#ee730a;">Pre-Order</div></div><div class="cardbody"><div class="ctitle">Reissue: Frontier Reel</div><div class="cprice">$22.98</div></div></div>
</div>
<div class="footer"><span>© Shout Factory</span><span>Shipping · Returns · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #003399; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #222222;
border: 1px solid #003399; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f4477b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:'AvenirNext','Avenir-Roman',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #eaeaea; }
.brand { color:#003399; font-size:18px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.navlinks span.active { color:#003399; border-bottom:2px solid #003399; padding-bottom:4px; }
.catstrip { display:flex; gap:10px; padding:12px 32px; }
.tab { background:#f2f2f2; color:#444444; font-size:13px; font-weight:600; border-radius:9999px; padding:6px 18px; white-space:nowrap; }
.tab.active { background:#003399; color:#fff; }
main { display:flex; height:calc(640px - 64px - 44px); }
.gallery { width:40%; background:#ffffff; display:flex; align-items:center; justify-content:center; }
.case { width:150px; height:280px; border-radius:24px; position:relative; background:
linear-gradient(160deg,#f4477b,#5dd7d7 33%,#edcf43 66%,#b8e356); box-shadow:0 16px 30px rgba(0,0,0,0.12); }
.case::before { content:''; position:absolute; left:50%; top:30px; transform:translateX(-50%); width:36px; height:36px; border-radius:9999px; background:rgba(255,255,255,0.6); }
.details { width:60%; padding:26px 34px; }
.badge { display:inline-block; background:#f4477b; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:0.5px; border-radius:4px; padding:2px 8px; margin-bottom:12px; }
h1 { font-size:26px; font-weight:600; margin:0 0 8px; }
.price { font-size:18px; font-weight:600; margin:0 0 14px; }
.desc { font-size:15px; line-height:1.5; color:#444444; margin:0 0 16px; max-width:400px; }
.colorrow { display:flex; gap:8px; margin-bottom:20px; }
.colordot { width:24px; height:24px; border-radius:9999px; border:2px solid #d9d9d9; }
.colordot.sel { border:2px solid #222222; }
.buyrow { display:flex; gap:12px; }
.btn-primary { background:#003399; color:#fff; border:none; border-radius:8px; padding:14px 28px; font-size:16px; font-weight:600; height:48px; }
.btn-secondary { background:#fff; color:#222222; border:2px solid #222222; border-radius:8px; padding:13px 27px; font-size:16px; font-weight:600; height:48px; }
</style></head>
<body>
<nav>
<p class="brand">Casetify</p>
<div class="navlinks"><span class="active">Phone Cases</span><span>AirPods</span><span>Bags</span></div>
</nav>
<div class="catstrip">
<span class="tab active">New Drops</span><span class="tab">Limited Edition</span><span class="tab">Collabs</span><span class="tab">Eco</span>
</div>
<main>
<div class="gallery"><div class="case"></div></div>
<div class="details">
<span class="badge">New</span>
<h1>Gradient Wave iPhone Case</h1>
<p class="price">$45.00</p>
<p class="desc">A phone case that becomes a canvas — bold, saturated color-blocked gradients with military-grade drop protection.</p>
<div class="colorrow">
<div class="colordot sel" style="background:#f4477b"></div>
<div class="colordot" style="background:#5dd7d7"></div>
<div class="colordot" style="background:#edcf43"></div>
<div class="colordot" style="background:#da2eda"></div>
</div>
<div class="buyrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Customize</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #0e0f0f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #0e0f0f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #0e0f0f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6e6f6f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #2668ff; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f7f7f7; color: #0e0f0f;
border: 1px solid #2668ff; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f7f7f7; color: #0e0f0f;
border: 1px solid #bdbdbd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e6f6f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #182ba4; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Eero</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f7f7f7; color:#0e0f0f; font-family:'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#f7f7f7; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #e0e0e0; }
.logo { font-weight:700; font-size:19px; letter-spacing:-.5px; }
.navlinks { display:flex; gap:28px; font-size:14px; font-weight:500; }
.navlinks span.on { font-weight:600; }
.navlinks span.off { color:#6e6f6f; }
.btn-primary { background:#2668ff; color:#fff; border-radius:8px; padding:10px 20px; font-size:14px; font-weight:600; }
.hero { padding:40px 32px 24px; text-align:center; }
.hero h1 { font-size:36px; font-weight:600; letter-spacing:-.5px; margin:0 0 10px; }
.hero p { font-size:15px; color:#404040; margin:0 auto 18px; max-width:460px; }
.hero-cta { display:inline-block; background:#2668ff; color:#fff; border-radius:8px; padding:14px 24px; font-size:15px; font-weight:600; }
.stage { height:190px; margin:16px 32px; border-radius:12px; background:#111214; position:relative; overflow:hidden;
display:flex; align-items:center; justify-content:center; }
.puck { width:120px; height:120px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#3a3a3a,#0e0f0f 70%);
box-shadow:0 0 0 2px #2668ff inset, 0 10px 30px rgba(38,104,255,.35); position:relative; }
.puck::after { content:''; position:absolute; inset:44%; border-radius:50%; background:#2668ff; box-shadow:0 0 18px 6px rgba(38,104,255,.7); }
.row { display:flex; gap:16px; padding:0 32px; margin-top:8px; }
.card { flex:1; background:#ffffff; border:1px solid #d8d8d8; border-radius:12px; padding:16px; }
.card .sw { height:64px; border-radius:8px 8px 0 0; margin:-16px -16px 12px; background:linear-gradient(160deg,#e9e9e9,#c7c7c7); }
.card h3 { font-size:16px; font-weight:600; margin:0 0 4px; }
.card p { font-size:13px; color:#6e6f6f; margin:0 0 10px; line-height:1.4; }
.card .price { font-size:15px; font-weight:600; }
.badge { display:inline-block; background:#182ba4; color:#fff; font-size:11px; font-weight:600; letter-spacing:.5px;
text-transform:uppercase; border-radius:4px; padding:2px 8px; margin-bottom:8px; }
</style></head>
<body>
<nav>
<div class="logo">Eero</div>
<div class="navlinks"><span class="on">Wifi Systems</span><span class="off">Secure</span><span class="off">Cameras</span><span class="off">Support</span></div>
<div class="btn-primary">Shop eero</div>
</nav>
<div class="hero">
<h1>Wifi that just works.</h1>
<p>Fast, reliable connectivity in every room — set up in minutes, managed from your phone.</p>
</div>
<div class="stage"><div class="puck"></div></div>
<div class="row">
<div class="card"><div class="sw"></div><span class="badge">New</span><h3>eero Pro 6E</h3><p>Tri-band mesh wifi with up to 2,000 sq ft coverage per unit.</p><p class="price">$229.00</p></div>
<div class="card"><div class="sw"></div><h3>eero 6+</h3><p>Reliable whole-home wifi for growing households.</p><p class="price">$139.00</p></div>
<div class="card"><div class="sw"></div><h3>eero Secure</h3><p>Advanced security and parental controls, monthly.</p><p class="price">$2.99/mo</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #19181d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #19181d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #19181d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #636466; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #023e8a; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #19181d;
border: 1px solid #023e8a; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #3d4246;
border: 1px solid #c6c5c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #636466; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff5742; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:flex; flex-direction:column; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#3d4246; box-sizing:border-box;
font-family:'Inter','Helvetica',sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
background:#19181d; }
.brand { font-family:'Poppins','Helvetica',sans-serif; font-size:19px; font-weight:700; color:#ffffff; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:13px; font-weight:500; color:#cfcfd2; }
.cart { background:#023e8a; color:#fff; font-size:12px; font-weight:600; padding:8px 16px; border-radius:6px; }
.hero { display:flex; align-items:center; gap:34px; padding:26px 40px 20px; background:#ebe3d5; }
.htext { max-width:400px; }
.htext h1 { font-family:'Poppins','Helvetica',sans-serif; font-size:28px; font-weight:700; color:#023e8a; margin:0 0 12px; line-height:1.25; }
.htext p { font-size:14px; color:#3d4246; line-height:1.5; margin:0 0 16px; }
.btn { display:inline-block; background:#023e8a; color:#fff; font-size:13px; font-weight:600; padding:11px 24px; border-radius:8px; }
.heroimg { width:230px; height:150px; border-radius:8px; flex-shrink:0; background:linear-gradient(150deg,#f3d196,#023e8a 130%); position:relative; }
.heroimg::after { content:'SALE'; position:absolute; top:12px; right:12px; background:#ff5742; color:#fff; font-size:10px;
font-weight:700; padding:3px 10px; border-radius:6px; }
.section { padding:22px 40px 0; }
.section h2 { font-family:'Poppins','Helvetica',sans-serif; font-size:18px; font-weight:600; color:#023e8a; margin:0 0 14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card { background:#f7f7f7; border-radius:8px; padding:12px; }
.cover { height:78px; border-radius:6px; margin-bottom:10px; }
.q1 .cover { background:#023e8a; } .q2 .cover { background:#f3d196; } .q3 .cover { background:#ebe3d5; } .q4 .cover { background:#ff5742; }
.card .t { font-size:13px; font-weight:600; color:#19181d; margin:0 0 4px; }
.card .p { font-size:13px; font-weight:600; color:#023e8a; }
.trust { margin-top:auto; flex-shrink:0; display:flex; padding:14px 40px; background:#353740; }
.trust span { flex:1; text-align:center; font-size:11px; font-weight:500; color:#ebebeb; }
</style></head>
<body>
<nav>
<div class="brand">Guidecraft</div>
<div class="navlinks"><span>Furniture</span><span>Play Kitchens</span><span>Preschool Tools</span><span>Blocks</span></div>
<div class="cart">Cart · 1</div>
</nav>
<div class="hero">
<div class="htext">
<h1>Furniture built for little hands.</h1>
<p>Children's furniture and preschool tools, arranged with the same care as a favorite classroom — unhurried, warm, built to last.</p>
<span class="btn">Shop Kids Furniture</span>
</div>
<div class="heroimg"></div>
</div>
<div class="section">
<h2>Classroom Favorites</h2>
<div class="grid">
<div class="card q1"><div class="cover"></div><div class="t">Table & Chair Set</div><div class="p">$189.99</div></div>
<div class="card q2"><div class="cover"></div><div class="t">Wooden Play Kitchen</div><div class="p">$249.99</div></div>
<div class="card q3"><div class="cover"></div><div class="t">Reading Nook Shelf</div><div class="p">$139.99</div></div>
<div class="card q4"><div class="cover"></div><div class="t">Block Cart, 100pc</div><div class="p">$89.99</div></div>
</div>
</div>
<div class="trust"><span>Preschool-Trusted</span><span>Non-Toxic Finishes</span><span>Free Shipping $75+</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #272d45;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #272d45;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #272d45; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #beb132; color: #000000;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f9f9f9; color: #272d45;
border: 1px solid #beb132; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9f9f9; color: #2c3e50;
border: 1px solid #c4c6cc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #0e7a82; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Fur</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f9f9; font-family:-apple-system,'Segoe UI',Roboto,sans-serif; color:#2c3e50; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#f9f9f9;}
.logo{font-family:'Superior Title Web',Georgia,serif;font-size:22px;font-weight:500;color:#272d45;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;letter-spacing:0.3px;text-transform:uppercase;color:#272d45;}
.navlinks span:first-child{color:#beb132;}
.icons{font-size:13px;color:#676986;}
.hero{display:flex;align-items:center;padding:34px 32px;gap:32px;}
.hero-copy{flex:1;}
h1{font-family:'Superior Title Web',Georgia,serif;font-size:36px;font-weight:500;line-height:1.15;letter-spacing:-0.5px;margin:0 0 12px;color:#272d45;}
.sub{font-size:15px;color:#2c3e50;line-height:1.55;margin:0 0 20px;max-width:380px;}
.cta{background:#beb132;color:#fff;border:none;border-radius:8px;padding:14px 28px;font-size:15px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.visual{width:300px;height:200px;background:linear-gradient(135deg,#f4f4f6,#e5e5eb);border-radius:12px;position:relative;}
.jar{position:absolute;bottom:24px;left:60px;width:70px;height:80px;background:#fff;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,0.1);}
.jar::before{content:'';position:absolute;top:-10px;left:15px;width:40px;height:14px;background:#beb132;border-radius:4px;}
.jar2{position:absolute;bottom:24px;left:160px;width:70px;height:100px;background:#0e7a82;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,0.1);}
.ingredient{position:absolute;top:16px;right:16px;background:#b2f9e9;color:#0e7a82;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:4px 12px;border-radius:9999px;}
.section{padding:22px 32px 0;}
.section h2{font-family:'Superior Title Web',Georgia,serif;font-size:22px;font-weight:500;margin:0 0 16px;color:#272d45;}
.grid{display:flex;gap:16px;}
.card{flex:1;background:#fff;border-radius:12px;overflow:hidden;}
.card-img{background:#f4f4f6;height:100px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#0e7a82;color:#fff;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.card-body{padding:14px 16px;}
.card-title{font-family:'Superior Title Web',Georgia,serif;font-size:16px;font-weight:500;color:#272d45;}
.stars{color:#beb132;font-size:13px;margin-top:4px;}
.card-price{font-size:16px;margin-top:6px;color:#272d45;}
</style>
<div class="nav">
<div class="logo">Fur</div>
<div class="navlinks"><span>Face</span><span>Body</span><span>Ingredients</span><span>The Ritual</span></div>
<div class="icons">Search Cart</div>
</div>
<div class="hero">
<div class="hero-copy">
<h1>Grooming, treated<br>as a ritual of care</h1>
<p class="sub">Oil-based formulations made from botanical ingredients — for a routine that feels intimate, not clinical.</p>
<button class="cta">Shop the Ritual</button>
</div>
<div class="visual">
<div class="ingredient">Aloe · Jojoba</div>
<div class="jar"></div>
<div class="jar2"></div>
</div>
</div>
<div class="section">
<h2>Best sellers</h2>
<div class="grid">
<div class="card"><div class="card-img"><div class="badge">Best Seller</div></div><div class="card-body"><div class="card-title">Face Oil</div><div class="stars">★★★★★ 4.9</div><div class="card-price">$45.00</div></div></div>
<div class="card"><div class="card-img"></div><div class="card-body"><div class="card-title">Body Wash</div><div class="stars">★★★★☆ 4.6</div><div class="card-price">$28.00</div></div></div>
<div class="card"><div class="card-img"><div class="badge">New</div></div><div class="card-body"><div class="card-title">Beard Oil</div><div class="stars">★★★★★ 4.8</div><div class="card-price">$32.00</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f8f5; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f8f5; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0.01em; margin: 0; color: #62605e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.04em; background: #dc4a12; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.04em; background: #f9f8f5; color: #121212;
border: 1px solid #dc4a12; border-radius: 9999px;
padding: 14px 32px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: 0.01em; background: #f9f8f5; color: #121212;
border: 1px solid #bfbebc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #62605e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.04em; background: #dc4a12; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f8f5; color:#1e1e1e; font-family:'Akzidenz-Grotesk','Helvetica Neue',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:center;gap:30px;}
.logo{position:absolute;left:40px;top:16px;font-family:'Instrument Serif',Georgia,serif;font-size:21px;font-weight:400;}
.navlinks{display:flex;gap:30px;font-size:12px;letter-spacing:0.04em;text-transform:uppercase;color:#1e1e1e;}
.hero{height:250px;display:flex;align-items:center;padding:0 48px;background:#f2f0ec;}
.htext{width:430px;}
.htext h1{font-family:'Instrument Serif',Georgia,serif;font-size:36px;font-weight:400;line-height:1.2;margin:0 0 16px;}
.htext p{font-size:14px;color:#1e1e1e;margin:0 0 20px;max-width:370px;line-height:1.6;}
.btn{display:inline-block;background:#dc4a12;color:#fff;font-size:13px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;padding:13px 30px;border-radius:9999px;}
.compact{position:absolute;right:80px;top:52px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f2d0c0,#dc4a12 80%);box-shadow:0 20px 40px rgba(220,74,18,0.2);}
.compact:before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90px;height:90px;border-radius:50%;background:#f9f8f5;}
.sec{padding:24px 48px 0;}
.sectitle{font-family:'Instrument Serif',Georgia,serif;font-size:20px;font-weight:400;margin-bottom:16px;}
.grid{display:flex;gap:18px;}
.card{width:206px;}
.cardimg{width:100%;height:130px;border-radius:12px;background:#f2f0ec;}
.cardtitle{font-size:13px;margin-top:12px;}
.cardprice{font-size:12px;color:#0057ff;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;font-size:11px;color:#7a7a7a;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Merit</div>
<div class="navlinks"><span>Skin</span><span>Face</span><span>Eyes</span><span>Lips</span></div>
</div>
<div class="hero">
<div class="htext">
<h1>Skin-first, makeup-second.</h1>
<p>A warm, tactile minimalism that feels like a deep breath in a cluttered world.</p>
<div class="btn">Shop Best Sellers</div>
</div>
<div class="compact"></div>
</div>
<div class="sec">
<div class="sectitle">Editor's Picks</div>
<div class="grid">
<div class="card"><div class="cardimg" style="background:linear-gradient(135deg,#f2d0c0,#dc4a12);"></div><div class="cardtitle">The Minimalist Complexion Stick</div><div class="cardprice">$38.00</div></div>
<div class="card"><div class="cardimg" style="background:linear-gradient(135deg,#dc4a12,#f2d0c0);"></div><div class="cardtitle">Great Skin Concealer</div><div class="cardprice">$26.00</div></div>
<div class="card"><div class="cardimg" style="background:linear-gradient(135deg,#f2f0ec,#dc4a12);"></div><div class="cardtitle">Clean Lash Mascara</div><div class="cardprice">$24.00</div></div>
</div>
</div>
<div class="footer"><span>© Quiet Confidence</span><span>Ingredients · Contact</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #050505;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #050505;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #050505; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #1a1a1a;
border: 1px solid #c0c0c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffd700; color: #050505;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Lato','Helvetica Neue',sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:64px;background:#ffffff;border-bottom:1px solid #edf5f5;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:Lora,serif;font-size:21px;font-weight:700;color:#1a1a1a;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:#1a1a1a;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;background:#edf5f5;position:relative;overflow:hidden;}
.heroText{width:430px;}
.headline{font-family:Lora,serif;font-size:34px;font-weight:700;line-height:1.2;color:#1a1a1a;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.55;color:#4a4a4a;margin:0 0 20px;max-width:370px;}
.btn{display:inline-block;background:#108474;color:#fff;font-size:14px;font-weight:600;padding:13px 28px;border-radius:8px;}
.kb{position:absolute;right:80px;top:80px;width:230px;height:90px;background:#1a1a1a;border-radius:12px;transform:rotate(-8deg);box-shadow:0 14px 30px rgba(0,0,0,.2);display:grid;grid-template-columns:repeat(12,1fr);gap:4px;padding:12px;}
.key{background:#e8e8e8;border-radius:3px;height:14px;}
.key.gold{background:#ffd700;}
.sec{position:relative;height:290px;padding:26px 40px;}
.secTitle{font-family:Lora,serif;font-size:19px;font-weight:700;color:#1a1a1a;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:216px;background:#fafafa;border-radius:12px;padding:12px;position:relative;box-shadow:0 2px 8px rgba(0,0,0,.05);}
.badge{position:absolute;top:8px;left:8px;background:#ffd700;color:#1a1a1a;font-family:'Roboto Condensed',sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 9px;border-radius:8px;}
.badgeNew{background:#108474;color:#fff;}
.thumb{height:100px;border-radius:8px;margin-bottom:10px;}
.cardTitle{font-family:'Roboto Condensed',sans-serif;font-size:14px;font-weight:700;color:#1a1a1a;margin-bottom:4px;}
.cardPrice{font-size:14px;font-weight:700;color:#108474;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#050505;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#fff;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Lofree</div>
<div class="navlinks"><span>Keyboards</span><span>Speakers</span><span>Accessories</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">Desk jewelry,<br>not peripherals.</div>
<div class="sub">Mechanical keyboards built for people who take their workspace seriously.</div>
<div class="btn">Shop Keyboards</div>
</div>
<div class="kb">
<div class="key"></div><div class="key gold"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key gold"></div><div class="key"></div><div class="key"></div>
<div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key gold"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
</div>
</div>
<div class="sec">
<div class="secTitle">Featured Keyboards</div>
<div class="grid">
<div class="card"><div class="badgeNew badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#108474,#1a1a1a)"></div><div class="cardTitle">Lofree Flow84</div><div class="cardPrice">$109</div></div>
<div class="card"><div class="badge">Limited</div><div class="thumb" style="background:linear-gradient(135deg,#ffd700,#1a1a1a)"></div><div class="cardTitle">Lofree Block Gold</div><div class="cardPrice">$139</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a1a1a,#108474)"></div><div class="cardTitle">Lofree Edge</div><div class="cardPrice">$219</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#108474,#ffd700)"></div><div class="cardTitle">Lofree Flow Lite</div><div class="cardPrice">$89</div></div>
</div>
</div>
<div class="footer"><span>© Designed for the Desk</span><span>Warranty & Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfaf9; color: #1e1814;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfaf9; color: #1e1814;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #1e1814; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #bb4192; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: transparent; color: #1e1814;
border: 1px solid #bb4192; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fcfaf9; color: #121212;
border: 1px solid #c4c2c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #00caaa; color: #1e1814;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fcfaf9; font-family:'Helvetica Neue',sans-serif; color:#1e1814; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fcfaf9;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:22px;font-weight:800;letter-spacing:-.5px;color:#bb4192;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#1e1814;}
.hero{height:230px;display:flex;align-items:center;padding:0 40px;background:#bb4192;color:#fff;}
.heroText{width:440px;}
.headline{font-size:32px;font-weight:800;letter-spacing:-.5px;line-height:1.15;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.55;color:#f3d6e8;margin:0 0 20px;max-width:370px;}
.btn{display:inline-block;background:#00caaa;color:#121212;font-size:14px;font-weight:700;padding:13px 28px;border-radius:9999px;}
.shape1{position:absolute;right:100px;top:60px;width:120px;height:120px;border-radius:50%;background:#9f377c;}
.shape2{position:absolute;right:150px;top:110px;width:60px;height:60px;border-radius:50%;background:#00caaa;}
.sec{position:relative;height:296px;padding:26px 40px;}
.secTitle{font-size:18px;font-weight:800;color:#1e1814;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:216px;border-radius:14px;padding:12px;box-shadow:0 4px 14px rgba(0,0,0,.06);position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 10px;border-radius:9999px;color:#fff;}
.thumb{height:96px;border-radius:10px;margin-bottom:10px;}
.cardTitle{font-size:14px;font-weight:700;color:#1e1814;margin-bottom:4px;}
.cardPrice{font-size:13px;font-weight:700;color:#bb4192;}
.accordion{margin-top:14px;background:#f3f0ee;border-radius:10px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;color:#00caaa;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#1e1814;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#00caaa;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Love Wellness</div>
<div class="navlinks"><span>Probiotics</span><span>Feminine Care</span><span>Skin</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">Health that<br>refuses to be beige.</div>
<div class="sub">Wellness essentials made with the ingredients you'd actually want to know about.</div>
<div class="btn">Shop Bestsellers</div>
</div>
<div class="shape2"></div>
<div class="shape1"></div>
</div>
<div class="sec">
<div class="secTitle">Shop Bestsellers</div>
<div class="grid">
<div class="card"><div class="badge" style="background:#00caaa">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#bb4192,#00caaa)"></div><div class="cardTitle">Good Girl Probiotic</div><div class="cardPrice">$34.99</div></div>
<div class="card"><div class="badge" style="background:#9f377c">New</div><div class="thumb" style="background:linear-gradient(135deg,#00caaa,#bb4192)"></div><div class="cardTitle">The Killer Wash</div><div class="cardPrice">$14.99</div></div>
<div class="card"><div class="badge" style="background:#bb4192">Bestseller</div><div class="thumb" style="background:linear-gradient(135deg,#9f377c,#00caaa)"></div><div class="cardTitle">pH Balance Suppositories</div><div class="cardPrice">$29.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#bb4192,#9f377c)"></div><div class="cardTitle">Detox Vaginal Wipes</div><div class="cardPrice">$9.99</div>
<div class="accordion"><span>Good to Know</span><span>+</span></div>
</div>
</div>
</div>
<div class="footer"><span>© Health, Unapologetically Pink</span><span>Bye Bye</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffd700; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffd700; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6a09; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007aff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffd700; color: #007aff;
border: 1px solid #007aff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffd700; color: #111111;
border: 1px solid #d9b703; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6a09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6c829; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212121; box-sizing:border-box;
font-family:"Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 30px;
background:#ffffff; border-bottom:2px solid #212121; }
.logo { font-size:20px; font-weight:700; }
.pill-nav { background:#007aff; color:#ffffff; border:2px solid #212121; border-radius:9999px;
padding:8px 18px; font-size:13px; font-weight:700; }
.hero { padding:26px 30px 18px; text-align:center; background:#fff8d6; }
.badge { display:inline-block; background:#212121; color:#ffd700; border-radius:99px; width:44px; height:44px;
line-height:44px; font-size:10px; font-weight:700; margin-bottom:10px; }
h1 { font-size:26px; font-weight:700; margin:0 0 8px; }
.sub { font-size:13px; color:#212121; margin:0 0 16px; }
.ctarow { display:flex; justify-content:center; }
.cta { background:#ffd700; color:#212121; border:2px solid #212121; border-radius:9999px;
padding:14px 26px; font-size:17px; font-weight:700; box-shadow:0px 6px 0px 0px #212121; }
.filters { display:flex; gap:8px; justify-content:center; padding:16px 20px 6px; flex-wrap:wrap; }
.chip { background:#eaeaea; color:#212121; border:1px solid #212121; border-radius:999px;
padding:7px 16px; font-size:13px; font-weight:700; }
.chip.active { background:#212121; color:#ffffff; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:18px 30px 24px; }
.card { background:#ffffff; border:2px solid #212121; border-radius:16px; padding:16px;
box-shadow:0px 6px 0px 0px #212121; display:flex; flex-direction:column; gap:6px; }
.card .thumb { height:56px; border-radius:8px; background:linear-gradient(135deg,#ffe985,#ffd700); }
.card .t { font-size:14px; font-weight:700; }
.card .wage { font-size:15px; font-weight:700; color:#ff3b30; }
.card .meta { font-size:11px; color:#666666; }
</style></head>
<body>
<nav>
<div class="logo">Timee</div>
<div class="pill-nav">For businesses</div>
</nav>
<section class="hero">
<div class="badge">NEW!!</div>
<h1>Work today, get paid today</h1>
<p class="sub">No resume. No interview. Pick a shift that fits your free time.</p>
<div class="ctarow"><button class="cta">Find shifts near you</button></div>
</section>
<div class="filters">
<span class="chip active">18+</span>
<span class="chip">20s</span>
<span class="chip">30s</span>
<span class="chip">40s</span>
<span class="chip">50+</span>
</div>
<div class="cards">
<div class="card"><div class="thumb"></div><span class="t">Warehouse sorting</span><span class="wage">$14 / hr</span><span class="meta">Beginners welcome</span></div>
<div class="card"><div class="thumb"></div><span class="t">Cafe counter</span><span class="wage">$13 / hr</span><span class="meta">Same-day pay</span></div>
<div class="card"><div class="thumb"></div><span class="t">Event staffing</span><span class="wage">$16 / hr</span><span class="meta">Weekend only</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f8; color: #121713;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f8; color: #121713;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; margin: 0; color: #121713; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #637473; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.0; letter-spacing: 0.5px; background: #045c7d; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.0; letter-spacing: 0.5px; background: transparent; color: #121713;
border: 1px solid #045c7d; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121713;
border: 1px solid #bebfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #637473; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.0; letter-spacing: 0.8px; background: #00caaa; color: #121713;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f7f8; font-family:Arial,sans-serif; color:#121713; }
*{box-sizing:border-box;}
.announce{height:34px;background:#121713;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;}
.announce span{color:#00caaa;margin-left:6px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#fff;border-bottom:1px solid #e5e5e5;}
.logo{font-size:20px;font-weight:800;letter-spacing:-.5px;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;}
.hero{height:210px;background:#121713;display:flex;align-items:center;padding:0 32px;}
.heroText{width:56%;}
.heroText h1{font-size:44px;font-weight:800;color:#fff;letter-spacing:-1px;line-height:1;margin:0 0 10px;text-transform:uppercase;}
.heroText p{font-size:14px;color:#c8c8c8;max-width:340px;margin:0 0 14px;}
.btn{display:inline-block;background:#045c7d;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;border-radius:8px;}
.heroImg{width:44%;height:150px;position:relative;}
.cable{position:absolute;right:60px;top:40px;width:180px;height:12px;border-radius:6px;background:linear-gradient(90deg,#00caaa,#045c7d);}
.cable:before{content:'';position:absolute;left:-10px;top:-14px;width:34px;height:40px;border-radius:4px;background:#1a1b18;}
.tags{display:flex;gap:8px;padding:16px 32px;}
.tag{border:1px solid #e5e5e5;border-radius:9999px;font-size:11px;font-weight:500;padding:5px 14px;background:#eff5f3;}
.grid{display:flex;gap:14px;padding:0 32px;}
.card{width:206px;background:#fff;border:1px solid #eff5f3;border-radius:8px;padding:14px;position:relative;}
.badge{position:absolute;top:22px;left:22px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:3px 8px;border-radius:4px;z-index:2;}
.thumb{height:88px;border-radius:6px;background:#f4f4f6;margin-bottom:10px;}
.pname{font-size:15px;font-weight:500;margin:0 0 4px;}
.pprice{font-size:20px;font-weight:700;margin:0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">Free shipping on orders over $50 <span>· Shop Cables</span></div>
<div class="nav">
<div class="logo">Twelve South Cables A 2</div>
<div class="navlinks"><span>Cables</span><span>Adapters</span><span>Chargers</span><span>Stands</span></div>
</div>
<div class="hero">
<div class="heroText">
<h1>Built for the ecosystem you already own</h1>
<p>Braided USB-C cables and GaN chargers designed to disappear into your daily carry.</p>
<div class="btn">Shop Cables</div>
</div>
<div class="heroImg"><div class="cable"></div></div>
</div>
<div class="tags">
<div class="tag">iPhone 16 Pro</div><div class="tag">MacBook Air M3</div><div class="tag">USB-C PD 100W</div>
</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#00caaa;color:#121713;">New</span><div class="thumb" style="background:linear-gradient(90deg,#00caaa,#045c7d)"></div><div class="pname">Braided USB-C Cable 2m</div><div class="pprice">$24.99</div></div>
<div class="card"><span class="badge" style="background:#ff4127;color:#fff;">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#045c7d,#121713)"></div><div class="pname">65W GaN Wall Charger</div><div class="pprice">$39.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffcf2a,#045c7d)"></div><div class="pname">MagSafe Car Mount</div><div class="pprice">$49.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00caaa,#1a1b18)"></div><div class="pname">4-Port Desktop Hub</div><div class="pprice">$59.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5fe0ee; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5fe0ee; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #346e74; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1c1d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5fe0ee; color: #1a1c1d;
border: 1px solid #1a1c1d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5fe0ee; color: #111111;
border: 1px solid #53bfcb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #346e74; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #54c1cd; color: #1a1c1d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1a1c1d; color:#ffffff; box-sizing:border-box; font-family:"Noto Sans",sans-serif; }
* { box-sizing:border-box; }
nav { height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:transparent; }
.brand { font-weight:700; font-size:20px; letter-spacing:1px; }
.navlinks { display:flex; gap:26px; font-size:20px; font-weight:400; }
.btn { background:#5fe0ee; color:#000; border:2px solid #fff; border-radius:3px; padding:0 16px; height:40px; font-size:16px; font-weight:700; display:flex; align-items:center; }
.hero { height:340px; display:flex; align-items:center; justify-content:center; position:relative;
background:radial-gradient(circle at 30% 40%, rgba(95,224,238,0.18), transparent 60%); }
.hero-inner { text-align:center; }
.hero-inner .tag { font-size:14px; letter-spacing:3px; color:#5fe0ee; margin-bottom:14px; }
.hero-inner h1 { font-size:40px; font-weight:700; margin:0 0 20px; }
.catalog { display:flex; gap:16px; padding:26px 34px; }
.tile { flex:1; height:110px; border-radius:3px; position:relative; display:flex; align-items:flex-end; padding:10px; }
.tile span { font-size:14px; font-weight:700; }
.t1 { background:linear-gradient(160deg,#2b3a3f,#0f4a52); }
.t2 { background:linear-gradient(160deg,#3a2b3f,#521f47); }
.t3 { background:linear-gradient(160deg,#2b3f2e,#1f5230); }
.t4 { background:linear-gradient(160deg,#3f2b2b,#521f1f); }
</style></head>
<body>
<nav>
<div class="brand">Rayark</div>
<div class="navlinks"><span>Games</span><span>About</span><span>Careers</span></div>
<button class="btn">Play Now</button>
</nav>
<div class="hero">
<div class="hero-inner">
<div class="tag">TAIPEI INDIE STUDIO</div>
<h1>Music. Rhythm. Play.</h1>
<button class="btn" style="margin:0 auto;">Play Now</button>
</div>
</div>
<div class="catalog">
<div class="tile t1"><span>Cytus</span></div>
<div class="tile t2"><span>Deemo</span></div>
<div class="tile t3"><span>VOEZ</span></div>
<div class="tile t4"><span>Sdorica</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #0000c9; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f5f5f5; color: #0000c9;
border: 1px solid #0000c9; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f5f5f5; color: #141414;
border: 1px solid #bdbdbd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e43030; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#f5f5f5; color:#141414; box-sizing:border-box; font-family:'__suisseIntl_d9088a','__coterieSuisse_ba454c',sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;background:#0000c9;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.nav .logo{font-weight:600;font-size:16px;}
.nav .links{display:flex;gap:20px;font-size:14px;font-weight:500;}
.wrap{display:flex;height:576px;}
.left{width:400px;background:#ffffff;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;}
.pack{width:200px;height:250px;border-radius:16px;background:linear-gradient(160deg,#d1e3fb,#f5f5f5);border:1px solid #e0e0e0;position:relative;display:flex;align-items:center;justify-content:center;}
.pack::before{content:'';width:120px;height:150px;border-radius:60px 60px 30px 30px;background:#ffffff;border:2px solid #0000c9;}
.badge-new{position:absolute;top:20px;left:20px;background:#d1e3fb;color:#0000c9;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;border-radius:9999px;}
.right{flex:1;padding:28px 32px;display:flex;flex-direction:column;}
h1{font-size:24px;font-weight:600;margin:0 0 6px;letter-spacing:0;}
.sub{color:#515151;font-size:14px;margin:0 0 14px;}
.price-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.price{font-size:20px;font-weight:600;}
.badge-sub{background:#008544;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;border-radius:9999px;}
.sizes{display:flex;gap:8px;margin-bottom:18px;}
.size{background:#f5f5f5;border:1px solid #e0e0e0;font-size:14px;padding:8px 14px;border-radius:8px;}
.size.sel{background:#0000c9;color:#fff;border-color:#0000c9;}
.desc{font-size:14px;color:#515151;line-height:1.5;margin:0 0 18px;}
.accordion{border-top:1px solid #e7e7e7;padding:12px 0;font-size:16px;font-weight:500;display:flex;justify-content:space-between;}
.actions{display:flex;gap:10px;margin-top:auto;}
.btn-primary{background:#0000c9;color:#fff;font-size:15px;font-weight:600;letter-spacing:.3px;border-radius:8px;padding:14px 28px;height:48px;display:flex;align-items:center;}
.btn-secondary{background:#f5f5f5;color:#0000c9;font-size:15px;font-weight:600;border-radius:8px;padding:13px 27px;height:48px;border:1px solid transparent;display:flex;align-items:center;}
</style>
</head>
<body>
<div class="nav"><div class="logo">Coterie</div><div class="links"><span>Diapers</span><span>Wipes</span><span>Bundles</span><span>Subscribe & Save</span></div></div>
<div class="wrap">
<div class="left"><div class="badge-new">New</div><div class="pack"></div></div>
<div class="right">
<h1>The Diaper, Size 3</h1>
<p class="sub">Ultra-Soft Organic Cotton · 25-count</p>
<div class="price-row"><span class="price">$21.00</span><span class="badge-sub">Subscribe & Save 20%</span></div>
<div class="sizes">
<span class="size">Size 1</span>
<span class="size">Size 2</span>
<span class="size sel">Size 3</span>
<span class="size">Size 4</span>
</div>
<p class="desc">Clinically tested and dermatologist approved. Made with sustainably sourced organic cotton for a performance-first, judgment-free changing experience.</p>
<div class="accordion"><span>Ingredients & Materials</span><span>+</span></div>
<div class="accordion"><span>Shipping & Returns</span><span>+</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Learn More</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf6f1; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf6f1; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0.08em; background: #6b6158; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0.08em; background: transparent; color: #474747;
border: 1px solid #6b6158; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #faf6f1; color: #121212;
border: 1px solid #c0bdb9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.12em; background: #f0ede2; color: #6b6b6b;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Esker Beauty — Home</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#faf6f1; color:#474747;
font-family:'Roboto','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;}
.page{width:960px;height:640px;display:flex;flex-direction:column;}
header{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dedede;}
.logo{font-family:'Big Caslon Reg','Big Caslon',Georgia,serif;font-size:22px;color:#121212;letter-spacing:0.5px;}
nav{display:flex;gap:26px;}
nav a{font-size:11px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;color:#474747;}
.icons{font-size:11px;color:#474747;letter-spacing:0.3px;}
.hero{display:flex;padding:34px 40px;gap:30px;align-items:center;}
.hero-copy{flex:1;}
.hero-copy .kicker{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#6b6158;margin-bottom:10px;}
.hero-copy h1{font-family:'Big Caslon Reg','Big Caslon',Georgia,serif;font-size:38px;font-weight:400;color:#121212;line-height:1.15;margin:0 0 14px;}
.hero-copy p{font-size:13px;color:#474747;max-width:320px;margin:0 0 18px;line-height:1.7;}
.hero-cta{display:inline-block;background:#6b6158;color:#fff;padding:11px 24px;font-size:11px;letter-spacing:1px;text-transform:uppercase;}
.bottle{width:230px;height:180px;position:relative;display:flex;align-items:flex-end;justify-content:center;}
.bottle::before{content:'';width:90px;height:130px;background:linear-gradient(160deg,#f0ede2,#dbccbc);border:1px solid #b0a89e;}
.bottle::after{content:'';position:absolute;top:12px;left:50%;transform:translateX(-50%);width:36px;height:30px;background:#6b6158;border-radius:4px 4px 0 0;}
main{flex:1;padding:14px 40px 0;}
.row-head{display:flex;justify-content:space-between;margin-bottom:14px;}
.row-head h2{font-family:'Big Caslon Reg','Big Caslon',Georgia,serif;font-size:19px;font-weight:400;margin:0;color:#121212;}
.row-head span{font-size:10px;color:#6b6158;letter-spacing:0.5px;text-transform:uppercase;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.card{}
.thumb{height:90px;background:linear-gradient(150deg,#f0ede2,#e5dfd0);margin-bottom:10px;position:relative;}
.thumb::after{content:'';position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:32px;height:44px;background:#b0a89e;border-radius:3px;}
.card h4{font-family:'Big Caslon Reg','Big Caslon',Georgia,serif;font-size:15px;margin:0 0 5px;color:#121212;font-weight:400;}
.card .desc{font-size:10.5px;color:#6b6b6b;margin-bottom:8px;line-height:1.5;}
.card .price{font-size:12px;color:#6b6158;letter-spacing:0.3px;}
footer{border-top:1px solid #dedede;padding:16px 40px;display:flex;justify-content:space-between;margin-top:16px;}
footer span{font-size:10px;color:#6b6b6b;letter-spacing:0.3px;}
</style>
<div class="page">
<header>
<div class="logo">Esker Beauty</div>
<nav><a>Body Care</a><a>Rituals</a><a>Ingredients</a><a>Journal</a></nav>
<div class="icons">Search · Account · Bag (0)</div>
</header>
<div class="hero">
<div class="hero-copy">
<div class="kicker">Intentional Body Care</div>
<h1>Unhurried attention, bottled.</h1>
<p>Formulas built around presence rather than performance — the kind of care that asks you to slow down.</p>
<div class="hero-cta">Shop the Ritual</div>
</div>
<div class="bottle"></div>
</div>
<main>
<div class="row-head"><h2>The Body Care Edit</h2><span>Shop All</span></div>
<div class="grid">
<div class="card"><div class="thumb"></div><h4>Warm Sand Body Oil</h4><div class="desc">Dry-touch oil, clay-brown notes</div><div class="price">$48</div></div>
<div class="card"><div class="thumb"></div><h4>Linen Field Body Wash</h4><div class="desc">Sage-washed, low-foam formula</div><div class="price">$32</div></div>
<div class="card"><div class="thumb"></div><h4>Pressed Earth Balm</h4><div class="desc">Concentrated, for elbows & heels</div><div class="price">$28</div></div>
</div>
</main>
<footer>
<span>© Esker Beauty — Intentional Body Care</span>
<span>Ingredient Glossary · Journal · Wholesale</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.4; margin: 0; color: #1d1d1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.55; margin: 0; color: #696969; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.38; letter-spacing: 0.2px; background: #4a154b; color: #ffffff;
border: none; border-radius: 90px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.38; letter-spacing: 0.2px; background: #f9f0ff; color: #1d1d1d;
border: 1px solid #4a154b; border-radius: 90px;
padding: 10px 30px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #1d1d1d;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #696969; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #e6dee6; color: #4a154b;
border-radius: 90px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1d1d1d; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:700; font-size:16px; color:#4a154b; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#1d1d1d; }
.pill { border-radius:90px; padding:10px 28px; font-size:14px; font-weight:700; border:none; }
.pill.primary { background:#4a154b; color:#fff; }
.pill.secondary { background:#f9f0ff; color:#1d1d1d; }
.hero { position:relative; padding:24px 32px 20px; overflow:hidden;
background:
radial-gradient(ellipse 420px 220px at 15% 20%, rgba(255,214,168,.55), transparent 65%),
radial-gradient(ellipse 460px 260px at 85% 10%, rgba(233,216,255,.6), transparent 65%),
radial-gradient(ellipse 400px 240px at 60% 90%, rgba(197,224,197,.45), transparent 65%),
#f9f0ff; }
.hero h1 { position:relative; font-size:52px; font-weight:700; line-height:1.12; letter-spacing:-.7px; margin:0 0 12px; max-width:560px; }
.hero p { position:relative; font-size:14px; margin:0 0 16px; max-width:400px; color:#1d1d1d; }
.heroctas { position:relative; display:flex; gap:10px; }
.mockrow { position:relative; margin-top:10px; display:flex; gap:14px; }
.mock { width:190px; height:100px; border-radius:12px; background:#fff; box-shadow:0 0 32px rgba(0,0,0,.12); padding:10px; }
.mock .line { height:7px; border-radius:4px; background:#e6e6e6; margin-bottom:6px; }
.mock .line.short { width:60%; background:#4a154b; opacity:.5; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:22px 32px; text-align:center; }
.stat .num { font-size:44px; font-weight:700; color:#4a154b; letter-spacing:-.5px; line-height:1; }
.stat .cap { font-size:11.5px; color:#696969; margin-top:6px; }
.band { background:#4a154b; color:#fff; padding:28px 32px; text-align:center; }
.band h2 { font-size:26px; font-weight:700; margin:0 0 14px; }
footer { padding:12px 32px; display:flex; justify-content:space-between; font-size:11px; color:#696969; }
</style></head>
<body>
<nav>
<div class="brand">Slack</div>
<div class="navlinks"><span>Features</span><span>Enterprise</span><span>Pricing</span></div>
<div style="display:flex;gap:8px;">
<button class="pill secondary" style="padding:8px 20px;font-size:13px;">Sign In</button>
<button class="pill primary" style="padding:8px 20px;font-size:13px;">Try For Free</button>
</div>
</nav>
<section class="hero">
<h1>Where work<br>happens</h1>
<p>Slack brings the team, tools, and automation together in one place.</p>
<div class="heroctas">
<button class="pill primary">Try for free</button>
<button class="pill secondary">See how it works</button>
</div>
<div class="mockrow">
<div class="mock"><div class="line"></div><div class="line short"></div><div class="line"></div></div>
<div class="mock"><div class="line"></div><div class="line"></div><div class="line short"></div></div>
</div>
</section>
<section class="stats">
<div class="stat"><div class="num">90%</div><div class="cap">of Fortune 100 companies use Slack</div></div>
<div class="stat"><div class="num">43</div><div class="cap">minutes saved per user per week</div></div>
<div class="stat"><div class="num">87%</div><div class="cap">of teams report faster decisions</div></div>
</section>
<div class="band">
<h2>Bring your team together, wherever you are.</h2>
<button class="pill" style="background:#fff;color:#4a154b;">Try Slack for free</button>
</div>
<footer>
<span>© Slack</span>
<span>Slack · Enterprise · Pricing · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00704a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00704a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b9a8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a862; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00704a; color: #ffffff;
border: 1px solid #00a862; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00704a; color: #f5f5f5;
border: 1px solid #278565; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b9a8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00794e; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#1e1e1e; box-sizing:border-box;
font-family:"SoDo Sans", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e8e8e8; }
.brand { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:600; }
.siren { width:34px; height:34px; border-radius:50%; background:#00704a; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; }
.row { display:flex; gap:10px; }
.out { border:1px solid #00704a; color:#00704a; border-radius:9999px; padding:9px 18px; font-size:13px; font-weight:600; }
.fill { background:#00704a; color:#fff; border-radius:9999px; padding:9px 18px; font-size:13px; font-weight:600; }
.hero { background:#1e3932; color:#fff; padding:34px 40px; display:flex; align-items:center; gap:30px; }
.hero .txt h1 { font-size:38px; font-weight:700; line-height:1.1; margin:0 0 12px; max-width:420px; }
.hero .txt p { font-size:15px; color:#d4e9e2; margin:0 0 16px; }
.cta-w { display:inline-block; background:#fafafa; color:#00704a; border-radius:9999px; padding:12px 24px; font-size:14px; font-weight:600; }
.photo { flex:1; height:150px; border-radius:20px; background:linear-gradient(135deg,#00a862,#1e3932); }
.band { padding:22px 40px; background:#f1f8f4; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#ffffff; border:1px solid #e8e8e8; border-radius:16px; overflow:hidden; }
.cimg { height:70px; background:linear-gradient(135deg,#d4e9e2,#00a862); }
.cbody { padding:12px 14px; }
.cbody h4 { font-size:14px; font-weight:600; margin:0 0 4px; }
.cbody .price { font-size:14px; font-weight:700; color:#00704a; }
.tag { display:inline-block; background:#d4e9e2; color:#00704a; border-radius:9999px; font-size:10px; padding:2px 8px; margin-top:4px; }
.rewards { margin:0 40px 0; background:linear-gradient(135deg,#00704a,#1e3932); color:#fff; border-radius:16px; padding:18px 22px;
display:flex; justify-content:space-between; align-items:center; }
.rewards h3 { font-size:16px; margin:0; }
.rewards .stars { font-size:22px; font-weight:700; color:#cba258; }
</style></head>
<body>
<nav>
<p class="brand"><span class="siren"></span>Starbucks</p>
<div class="navlinks"><span>Menu</span><span>Rewards</span><span>Gift Cards</span></div>
<div class="row"><span class="out">Sign in</span><span class="fill">Join now</span></div>
</nav>
<section class="hero">
<div class="txt">
<h1>Good with money starts here.</h1>
<p>Order now — earn Stars with every cup.</p>
<span class="cta-w">Order now</span>
</div>
<div class="photo"></div>
</section>
<section class="band">
<div class="card"><div class="cimg"></div><div class="cbody"><h4>Iced Matcha Latte</h4><div class="price">$5.25</div><span class="tag">New</span></div></div>
<div class="card"><div class="cimg"></div><div class="cbody"><h4>Pike Place Roast</h4><div class="price">$2.95</div><span class="tag">Classic</span></div></div>
<div class="card"><div class="cimg"></div><div class="cbody"><h4>Honey Oat Latte</h4><div class="price">$5.75</div><span class="tag">Limited Time</span></div></div>
</section>
<div class="rewards"><h3>You've earned 25 Stars</h3><span class="stars">★ 350</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f2e9; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f2e9; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777279; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fe2873; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f5f2e9; color: #1e1e1e;
border: 1px solid #fe2873; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1e1e1e;
border: 1px solid #bfbdb6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777279; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fe2873; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f2e9; color:#1e1e1e; box-sizing:border-box; font-family:'Nunito Sans', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; padding:0 32px; border-bottom:1px solid #ededed; background:#f5f2e9; }
.brand { font-family:'Georgia', serif; font-size:22px; font-weight:700; color:#fe2873; }
.navlinks { display:flex; gap:20px; margin-left:auto; }
.navlinks div { font-family:'Montserrat', sans-serif; font-size:14px; font-weight:500; letter-spacing:.3px; }
.navlinks div.active { color:#fe2873; border-bottom:2px solid #fe2873; padding-bottom:4px; }
.hero { background:#1e1e1e; color:#f5f2e9; padding:40px 32px; text-align:center; }
.hero h1 { font-family:Georgia, serif; font-size:44px; font-weight:700; margin:0 0 10px; }
.hero p { font-size:14px; color:#d4d4d4; margin:0 0 16px; }
.hero .cta { display:inline-block; background:#fe2873; color:#fff; font-family:'Montserrat', sans-serif; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; padding:12px 26px; border-radius:8px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:22px 32px; }
.card { background:#fff; border-radius:12px; overflow:hidden; }
.poster { aspect-ratio:2/3; position:relative; }
.g1 { background:linear-gradient(160deg,#fe2873,#016684); }
.g2 { background:linear-gradient(160deg,#016684,#1e1e1e); }
.g3 { background:linear-gradient(160deg,#f8d063,#7a5a00); }
.g4 { background:linear-gradient(160deg,#2bb4df,#1e1e1e); }
.badge { position:absolute; top:8px; left:8px; background:#fe2873; color:#fff; font-family:'Montserrat', sans-serif; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:2px 8px; border-radius:4px; }
.info { padding:12px; }
.title { font-family:'Montserrat', sans-serif; font-size:15px; font-weight:600; margin-bottom:2px; }
.meta { font-size:11px; color:#777279; }
</style></head>
<body>
<nav>
<div class="brand">Film Movement</div>
<div class="navlinks"><div class="active">Now Playing</div><div>Collections</div><div>Membership</div><div>Documentaries</div></div>
</nav>
<div class="hero">
<h1>Independent Cinema, Curated</h1>
<p>Award-winning films from around the world, hand-picked for you</p>
<div class="cta">Join Film Movement Plus</div>
</div>
<div class="grid">
<div class="card"><div class="poster g1"><span class="badge">New</span></div><div class="info"><div class="title">The Last Reel</div><div class="meta">Dir. M. Sarno · 2023 · 108 min</div></div></div>
<div class="card"><div class="poster g2"></div><div class="info"><div class="title">Coastal Light</div><div class="meta">Dir. A. Voss · 2022 · 94 min</div></div></div>
<div class="card"><div class="poster g3"></div><div class="info"><div class="title">Winter's Ledger</div><div class="meta">Dir. K. Haddad · 2024 · 121 min</div></div></div>
<div class="card"><div class="poster g4"></div><div class="info"><div class="title">Blue Hour Diaries</div><div class="meta">Dir. R. Toivo · 2021 · 88 min</div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5865f2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5865f2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #aeb4f4; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e1f22; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #1e1f22;
border: 1px solid #1e1f22; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5865f2; color: #f5f5f5;
border: 1px solid #717cf2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aeb4f4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4f5ad1; color: #1e1f22;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#313338; color:#F2F3F5; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; display:flex; }
.rail { width:72px; background:#1E1F22; display:flex; flex-direction:column; align-items:center; padding-top:12px; gap:8px; flex-shrink:0; }
.railicon { width:48px; height:48px; border-radius:16px; background:#383A40; display:flex; align-items:center; justify-content:center; font-size:18px; color:#B5BAC1; }
.railicon.home { background:linear-gradient(135deg,#5865F2,#7289DA); color:#fff; border-radius:12px; }
.railicon.active { border-radius:12px; background:#5865F2; color:#fff; position:relative; }
.railicon.active::before { content:''; position:absolute; left:-16px; top:50%; transform:translateY(-50%); width:4px; height:40px; background:#fff; border-radius:0 4px 4px 0; }
.divider48 { width:32px; height:2px; background:#3F4147; margin:4px 0; }
.channels { width:210px; background:#2B2D31; flex-shrink:0; padding:14px 8px; }
.servername { font-size:15px; font-weight:700; padding:6px 10px 14px; }
.section { font-size:11px; font-weight:700; letter-spacing:0.5pt; color:#949BA4; text-transform:uppercase; padding:10px 10px 6px; }
.chrow { display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:4px; font-size:15px; color:#949BA4; }
.chrow.active { background:#404249; color:#fff; }
.chat { flex:1; display:flex; flex-direction:column; background:#313338; }
.chattop { height:48px; border-bottom:1px solid #3F4147; display:flex; align-items:center; padding:0 16px; font-size:15px; font-weight:600; gap:8px; }
.msgs { flex:1; padding:16px; overflow:hidden; }
.msg { display:flex; gap:12px; margin-bottom:16px; }
.avatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; }
.msgbody .head { display:flex; align-items:baseline; gap:8px; }
.msgbody .name { font-size:16px; font-weight:600; }
.msgbody .time { font-size:12px; color:#949BA4; }
.msgbody .txt { font-size:16px; line-height:1.375; margin-top:2px; max-width:520px; }
.reacts { display:flex; gap:6px; margin-top:8px; }
.react { display:flex; align-items:center; gap:6px; background:#2B2D31; border:1px solid #3F4147; border-radius:8px; padding:2px 8px; font-size:13px; font-weight:500; }
.react.mine { background:#3B4EAF; border-color:#5865F2; }
.compose { margin:0 16px 16px; height:52px; background:#383A40; border-radius:8px; display:flex; align-items:center; padding:0 14px; gap:10px; color:#949BA4; font-size:15px; }
</style>
</head>
<body>
<div class="stage">
<div class="rail">
<div class="railicon home">D</div>
<div class="divider48"></div>
<div class="railicon active">GD</div>
<div class="railicon" style="background:linear-gradient(135deg,#7C5CFF,#1ABCFE)">A</div>
<div class="railicon">W</div>
<div class="railicon" style="color:#23A55A;font-weight:700">+</div>
</div>
<div class="channels">
<div style="font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#949BA4;padding:6px 10px 0;">Discord (iOS)</div>
<div class="servername">Game Devs Guild</div>
<div class="section">Text Channels</div>
<div class="chrow active"># general</div>
<div class="chrow"># showcase</div>
<div class="chrow"># feedback</div>
<div class="section">Voice Channels</div>
<div class="chrow">🔊 lounge</div>
</div>
<div class="chat">
<div class="chattop"># general</div>
<div class="msgs">
<div class="msg">
<div class="avatar" style="background:linear-gradient(135deg,#57F287,#1ABCFE)"></div>
<div class="msgbody">
<div class="head"><span class="name" style="color:#57F287">Mira_Dev</span><span class="time">Today at 2:14 PM</span></div>
<div class="txt">just pushed the new shader pass — check the ``glow.frag`` file, should fix the banding on the terrain</div>
<div class="reacts"><div class="react mine">🔥 3</div><div class="react">👀 1</div></div>
</div>
</div>
<div class="msg">
<div class="avatar" style="background:linear-gradient(135deg,#ED4245,#EB459E)"></div>
<div class="msgbody">
<div class="head"><span class="name" style="color:#ED4245">kestrel.admin</span><span class="time">Today at 2:16 PM</span></div>
<div class="txt">nice!! pulling now, ||spoiler: the boss fight is basically done too||</div>
</div>
</div>
</div>
<div class="compose">Message #general</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5c46ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5c46ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b0a6fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f323ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5c46ff; color: #ffffff;
border: 1px solid #f323ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5c46ff; color: #f5f5f5;
border: 1px solid #7462fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b0a6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7440ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#292930; box-sizing:border-box;
font-family:ui-sans-serif, system-ui, -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.brand { font-size:19px; font-weight:800; margin:0; color:#292930; }
.navlinks { display:flex; gap:18px; font-size:14px; color:#5c5c61; }
.btn-login { background:#292930; color:#ffffff; border:none; border-radius:8px; padding:0 16px; height:36px; font-size:14px; font-weight:500; }
.btn-secondary { background:#f5f5f6; color:#292930; border:none; border-radius:8px; padding:0 16px; height:36px; font-size:14px; margin-right:8px; }
.heroband { background:linear-gradient(135deg,#5c46ff,#7a5eff); padding:26px 60px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; }
.heroband h1 { font-size:36px; font-weight:800; color:#ffffff; margin:0; line-height:1.1; }
.heroband p { font-size:14px; color:rgba(255,255,255,0.85); margin:0; }
.btn-invert { background:#ffffff; color:#5c46ff; border:none; border-radius:26px; padding:0 30px; height:48px; font-size:16px; font-weight:700; box-shadow:rgba(0,0,0,0.2) 0px 0px 20px 0px; }
.avatar-row { display:flex; justify-content:center; gap:14px; padding:16px 0 4px; }
.avatar-circle { width:56px; height:56px; border-radius:50%; border:3px solid #ffffff; }
.section { padding:18px 60px 0; }
.section h2 { font-size:22px; font-weight:700; margin:0 0 10px; text-align:center; }
.pillars { display:flex; gap:14px; }
.pillar { flex:1; background:#f8f8fa; border-radius:24px; padding:16px; display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; }
.pillar .ic { width:44px; height:44px; border-radius:50%; }
.pillar h3 { font-size:16px; font-weight:700; margin:0; }
.pillar p { font-size:11px; color:#75757a; margin:0; }
.badge-row { display:flex; justify-content:center; gap:8px; padding:14px 0 0; }
.badge { background:#5c46ff; color:#ffffff; border-radius:9999px; padding:4px 14px; font-size:12px; font-weight:500; }
footer { position:absolute; bottom:0; left:0; right:0; padding:10px 28px; font-size:11px; color:#75757a; text-align:center; }
</style></head>
<body>
<nav>
<p class="brand">ZEPETO</p>
<div class="navlinks"><span>Contents</span><span>Creator Program</span><span>Business</span><span>Guides</span></div>
<div style="display:flex;"><button class="btn-secondary">Buy Coins</button><button class="btn-login">Login</button></div>
</nav>
<section class="heroband">
<h1>All you've imagined,<br>at ZEPETO.</h1>
<p>Style your avatar, build worlds, and go live — limitless possibilities in the palm of your hand.</p>
<div class="avatar-row">
<span class="avatar-circle" style="background:linear-gradient(160deg,#ffd6e8,#ff9dc0);"></span>
<span class="avatar-circle" style="background:linear-gradient(160deg,#cdeadb,#8fd4b3);"></span>
<span class="avatar-circle" style="background:linear-gradient(160deg,#ffe3c7,#ffb680);"></span>
<span class="avatar-circle" style="background:linear-gradient(160deg,#d9d3f7,#a99df0);"></span>
</div>
<button class="btn-invert">Get Started</button>
</section>
<section class="section">
<h2>Made for the Creators</h2>
<div class="pillars">
<div class="pillar"><span class="ic" style="background:#5c46ff;"></span><h3>Items</h3><p>Design and sell avatar fashion.</p></div>
<div class="pillar"><span class="ic" style="background:#f323ff;"></span><h3>World</h3><p>Build interactive spaces to explore.</p></div>
<div class="pillar"><span class="ic" style="background:#5c46ff;"></span><h3>Live</h3><p>Host shows for a global audience.</p></div>
</div>
<div class="badge-row">
<span class="badge">New Drop</span>
<span class="badge">Trending World</span>
<span class="badge">Live Now</span>
</div>
</section>
<footer>© ZEPETO · Studio · Guides · Support</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #212121; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #212121; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #fbd616; color: #1a1a1a;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #212121; color: #fbd616;
border: 1px solid #fbd616; border-radius: 0px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #212121; color: #ffffff;
border: 1px solid #585858; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #fbd616; color: #1a1a1a;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#1a1a1a; font-family:Arial,Helvetica,sans-serif; color:#eeeeee; }
*{box-sizing:border-box;}
.nav{height:56px;background:#181818;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #333;}
.logo{font-family:Consolas,Menlo,Monaco,'Courier New',monospace;font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#fbd616;}
.navlinks{display:flex;gap:20px;font-family:Consolas,Menlo,monospace;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#949494;}
.hero{height:180px;display:flex;align-items:center;padding:0 32px;background:#212121;border-bottom:1px solid #333;}
.slate{width:130px;height:130px;background:#1f1f1f;border:2px solid #555;border-radius:2px;margin-right:28px;position:relative;}
.slate:before{content:'';position:absolute;top:0;left:0;right:0;height:26px;background:repeating-linear-gradient(45deg,#1a1a1a,#1a1a1a 8px,#fbd616 8px,#fbd616 16px);}
.h1{font-family:Consolas,Menlo,monospace;font-size:24px;font-weight:700;text-transform:uppercase;color:#f5f5f5;margin:0 0 10px;letter-spacing:.5px;}
.sub{font-size:13px;color:#949494;max-width:380px;line-height:1.6;margin:0 0 14px;}
.cta{display:inline-block;background:#fbd616;color:#1a1a1a;font-family:Consolas,Menlo,monospace;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:10px 22px;}
.sec{padding:18px 32px 0;}
.seclabel{font-family:Consolas,Menlo,monospace;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#949494;margin-bottom:12px;}
.grid{display:flex;gap:12px;}
.card{width:150px;background:#212121;padding:8px;position:relative;}
.thumb{width:100%;aspect-ratio:1/1.4;background:#181818;margin-bottom:8px;}
.ptitle{font-size:11px;color:#eeeeee;line-height:1.3;height:28px;overflow:hidden;}
.pprice{font-family:Consolas,Menlo,monospace;font-size:12px;color:#fbd616;font-weight:700;margin-top:4px;}
.badge{position:absolute;top:6px;left:6px;background:#fbd616;color:#1a1a1a;font-family:Consolas,Menlo,monospace;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 6px;}
</style>
<div class="nav">
<div class="logo">Shameless Films</div>
<div class="navlinks"><div>Cult</div><div>Documentary</div><div>Rare Prints</div><div>Merch</div></div>
</div>
<div class="hero">
<div class="slate"></div>
<div>
<div class="h1">A Repertory Lobby.<br>A Collector's Basement.</div>
<div class="sub">Yellow appears in tight doses — a button, a tag, a star. It never floods the layout.</div>
<div class="cta">Browse Rare Prints</div>
</div>
</div>
<div class="sec">
<div class="seclabel">Just Restocked</div>
<div class="grid">
<div class="card"><span class="badge">Ltd</span><div class="thumb" style="background:linear-gradient(160deg,#fbd616,#1a1a1a 70%)"></div><div class="ptitle">Backlot Reels No. 09</div><div class="pprice">$21.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#555,#1a1a1a 70%)"></div><div class="ptitle">Sixteen MM Anthology</div><div class="pprice">$34.00</div></div>
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(160deg,#e2bd00,#1a1a1a 70%)"></div><div class="ptitle">Grindhouse Double Bill</div><div class="pprice">$18.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#949494,#1a1a1a 70%)"></div><div class="ptitle">Director's Cut Box</div><div class="pprice">$58.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #656565; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.43; background: #109ad7; color: #ffffff;
border: none; border-radius: 0px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.43; background: #ffffff; color: #109ad7;
border: 1px solid #109ad7; border-radius: 0px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #444444;
border: 1px solid #bfbfbf; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #656565; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; background: #df191a; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>HMV Japan Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; background:#ffffff; color:#444444; }
*{box-sizing:border-box;}
.nav{height:44px;border-bottom:1px solid #cccccc;display:flex;align-items:center;padding:0 20px;gap:18px;}
.logo{font-weight:700;font-size:19px;color:#109ad7;margin-right:12px;}
.navlinks{display:flex;gap:14px;font-size:13px;font-weight:600;color:#109ad7;text-transform:uppercase;letter-spacing:.3px;}
.navlinks .active{color:#000;border-bottom:2px solid #109ad7;padding-bottom:12px;}
.searchwrap{margin-left:auto;display:flex;}
.search{height:28px;width:220px;border:1px solid #109ad7;font-size:12px;color:#444;padding:0 8px;line-height:28px;}
.searchbtn{height:28px;width:28px;background:#109ad7;color:#fff;text-align:center;line-height:28px;font-size:12px;}
.catheader{background:#f7f7f7;border-bottom:2px solid #109ad7;padding:12px 20px;font-size:18px;font-weight:600;color:#000;}
.body-wrap{display:flex;padding:14px 20px;gap:14px;}
.col{flex:1;display:flex;flex-direction:column;gap:10px;}
.pcard{display:flex;border:1px solid #e0e0e0;border-radius:4px;padding:8px;gap:10px;background:#fff;}
.thumb{width:64px;height:64px;background:#f7f7f7;border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;color:#999;text-align:center;}
.pinfo{flex:1;position:relative;}
.badge{position:absolute;top:-6px;left:-6px;background:#df191a;color:#fff;font-size:9px;font-weight:700;padding:2px 6px;text-transform:uppercase;}
.ptitle{font-size:14px;font-weight:600;color:#000;margin:2px 0 2px;}
.pmeta{font-size:11px;color:#656565;margin-bottom:4px;}
.pprice{font-size:14px;font-weight:700;color:#df191a;}
.pold{font-size:11px;color:#a3a3a3;text-decoration:line-through;margin-left:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#f7f7f7;border-top:1px solid #cccccc;padding:10px 20px;display:flex;justify-content:space-between;font-size:11px;color:#109ad7;}
</style>
<div class="nav">
<div class="logo">Hmv Japan</div>
<div class="navlinks"><span>CD</span><span>DVD</span><span class="active">Books</span><span>Games</span><span>Vinyl</span></div>
<div class="searchwrap"><div class="search">Search title, artist, ISBN…</div><div class="searchbtn">⌕</div></div>
</div>
<div class="catheader">Latest 100 Arrivals — Books</div>
<div class="body-wrap">
<div class="col">
<div class="pcard"><div class="thumb">Cover A</div><div class="pinfo"><div class="badge">Sale</div><div class="ptitle">Tokyo Sound Archive Vol.3</div><div class="pmeta">Various Artists · Photo Book</div><div class="pprice">¥2,400<span class="pold">¥3,200</span></div></div></div>
<div class="pcard"><div class="thumb">Cover B</div><div class="pinfo"><div class="ptitle">City Pop Liner Notes</div><div class="pmeta">Yamada Kenji · Softcover</div><div class="pprice">¥1,800</div></div></div>
<div class="pcard"><div class="thumb">Cover C</div><div class="pinfo"><div class="badge" style="background:#0000cc;">Limited</div><div class="ptitle">Vinyl Culture Japan</div><div class="pmeta">Studio Editorial · Hardcover</div><div class="pprice">¥4,200</div></div></div>
</div>
<div class="col">
<div class="pcard"><div class="thumb">Cover D</div><div class="pinfo"><div class="badge" style="background:#109ad7;">New</div><div class="ptitle">Shibuya Record Guide 2026</div><div class="pmeta">Various · Paperback</div><div class="pprice">¥1,500</div></div></div>
<div class="pcard"><div class="thumb">Cover E</div><div class="pinfo"><div class="ptitle">Anime Soundtrack Companion</div><div class="pmeta">Editorial Staff · Softcover</div><div class="pprice">¥2,100</div></div></div>
<div class="pcard"><div class="thumb">Cover F</div><div class="pinfo"><div class="ptitle">Jazz Kissa Photobook</div><div class="pmeta">M. Sato · Hardcover</div><div class="pprice">¥3,600</div></div></div>
</div>
</div>
<div class="footer"><span>© Hmv Japan</span><span>Help · About HMV · International · Follow Us</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2f2f2f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2f2f2f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: 0.1px; margin: 0; color: #2f2f2f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #918c8c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 1px; background: #cbab63; color: #000000;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 1px; background: #ffffff; color: #2f2f2f;
border: 1px solid #cbab63; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2f2f2f;
border: 1px solid #cbcbcb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #918c8c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #6c2136; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Kamaka Hawaii Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif; background:#ffffff; color:#2f2f2f; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #eeeeee;}
.logo{font-family:'Oswald','Work Sans',sans-serif;font-weight:500;font-size:20px;letter-spacing:.5px;text-transform:uppercase;color:#2f2f2f;}
.navlinks{display:flex;gap:22px;font-family:'Oswald','Work Sans',sans-serif;font-size:13px;font-weight:400;letter-spacing:.5px;text-transform:uppercase;}
.navlinks .active{color:#cbab63;}
.searchpill{width:190px;height:36px;border-radius:999px;border:1px solid #d4d4d4;font-size:12px;color:#918c8c;line-height:36px;padding:0 16px;}
.hero{background:#f8f6f2;padding:26px 36px;text-align:center;}
.hero h1{font-family:'Oswald','Work Sans',sans-serif;font-size:40px;font-weight:500;letter-spacing:.4px;line-height:1.15;margin:0 0 10px;}
.hero p{font-size:14px;color:#918c8c;max-width:420px;margin:0 auto 16px;}
.btn{display:inline-block;background:#cbab63;color:#fff;padding:12px 28px;border-radius:8px;font-family:'Oswald','Work Sans',sans-serif;font-size:14px;font-weight:500;letter-spacing:1px;text-transform:uppercase;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px 36px;}
.card{background:#fff;border-radius:12px;overflow:hidden;}
.imgbox{aspect-ratio:4/3;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#6c2136;color:#fff;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:4px;}
.body{padding:10px 14px 14px;}
.title{font-size:14px;font-weight:600;}
.price{font-size:14px;color:#cbab63;margin-top:3px;}
</style>
<div class="nav">
<div class="logo">Kamaka Hawaii</div>
<div class="navlinks"><span class="active">Soprano</span><span>Concert</span><span>Tenor</span><span>Baritone</span></div>
<div class="searchpill">Search ukuleles…</div>
</div>
<div class="hero">
<h1>A Century of<br>Hawaiian Craft.</h1>
<p>Handmade koa ukuleles, built by a family business shaping the instrument's history since 1916.</p>
<div class="btn">Shop Ukuleles</div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#e5cba0,#7c3f09);"><div class="badge">Limited</div></div>
<div class="body"><div class="title">Kamaka Standard Soprano</div><div class="price">$895.00</div></div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#d8b888,#6c2136);"></div>
<div class="body"><div class="title">Kamaka Concert Ukulele</div><div class="price">$1,095.00</div></div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#e0c898,#a06c2a);"></div>
<div class="body"><div class="title">Kamaka Tenor Ukulele</div><div class="price">$1,295.00</div></div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#d0b078,#7c3f09);"></div>
<div class="body"><div class="title">Kamaka Pineapple Soprano</div><div class="price">$925.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.27; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; background: #1979c3; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; background: #ffffff; color: #1979c3;
border: 1px solid #1979c3; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.22px; background: #006400; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f2f2f2; color:#333; font-family:'Open Sans',Arial,sans-serif; }
*{box-sizing:border-box;}
.accbar{height:32px;background:#1a1a1a;display:flex;align-items:center;padding:0 40px;font-size:11px;color:#d1d1d1;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#1979c3;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.searchbar{display:flex;width:340px;height:34px;}
.searchin{flex:1;background:#fff;border-radius:4px 0 0 4px;display:flex;align-items:center;padding:0 12px;font-size:12px;color:#7d7d7d;}
.searchbtn{width:60px;background:#ff5501;border-radius:0 4px 4px 0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;}
.hero{height:200px;display:flex;align-items:center;padding:0 40px;background:#fff;border-bottom:1px solid #d1d1d1;}
.herotext{width:460px;}
.herotext h1{font-size:26px;font-weight:700;color:#1a1a1a;margin:0 0 8px;}
.herotext p{font-size:13px;color:#7d7d7d;margin:0 0 14px;}
.savings{display:inline-flex;align-items:center;gap:10px;background:#fdf0d5;padding:8px 16px;border-radius:4px;font-size:13px;color:#1a1a1a;}
.savings b{color:#006400;}
.sec{padding:20px 40px 0;}
.sectitle{font-size:15px;font-weight:700;margin-bottom:12px;color:#1a1a1a;}
.grid{display:flex;gap:12px;}
.card{width:200px;background:#fff;border:1px solid #d1d1d1;border-radius:4px;padding:10px;}
.thumb{height:88px;border-radius:4px;background:linear-gradient(135deg,#d1d1d1,#f2f2f2);}
.pname{font-size:12px;font-weight:700;color:#1a1a1a;margin-top:8px;line-height:1.3;height:30px;overflow:hidden;}
.priceline{display:flex;align-items:baseline;gap:8px;margin-top:6px;}
.oemprice{font-size:11px;color:#7d7d7d;text-decoration:line-through;}
.ldprice{font-size:16px;font-weight:700;color:#1979c3;}
.cartbtn{margin-top:8px;width:100%;height:30px;background:#ff5501;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;border-radius:3px;display:flex;align-items:center;justify-content:center;}
</style>
<div class="accbar">My Account | Order Status | Help</div>
<div class="nav">
<div class="logo">LD Products</div>
<div class="searchbar"><div class="searchin">Search by model or cartridge #</div><div class="searchbtn">Search</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Compatible Ink & Toner, Verified.</h1>
<p>Pricing mathematics and savings transparency on every cartridge.</p>
<div class="savings">Save up to <b>70%</b> vs. OEM pricing</div>
</div>
</div>
<div class="sec">
<div class="sectitle">Best Selling Cartridges</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="pname">Compatible HP 63XL Black</div><div class="priceline"><span class="oemprice">$32.99</span><span class="ldprice">$14.95</span></div><div class="cartbtn">Add to Cart</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f2f2f2,#1979c3)"></div><div class="pname">Compatible Canon 245XL Combo</div><div class="priceline"><span class="oemprice">$54.99</span><span class="ldprice">$22.95</span></div><div class="cartbtn">Add to Cart</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d1d1d1,#7d7d7d)"></div><div class="pname">Compatible Brother TN660 Toner</div><div class="priceline"><span class="oemprice">$68.99</span><span class="ldprice">$28.95</span></div><div class="cartbtn">Add to Cart</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff5501,#f2f2f2)"></div><div class="pname">Compatible Epson 802XL Set</div><div class="priceline"><span class="oemprice">$79.99</span><span class="ldprice">$34.95</span></div><div class="cartbtn">Add to Cart</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0182ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0182ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f6f6f9; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0182ff; color: #f6f6f9;
border: 1px solid #f6f6f9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0182ff; color: #f5f5f5;
border: 1px solid #2894fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2895fe; color: #f6f6f9;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#17191c; box-sizing:border-box;
font-family:Pretendard, -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
border-bottom:1px solid #e8ebed; }
.brand { font-size:18px; font-weight:800; }
.search { flex:1; max-width:420px; margin:0 24px; background:#f6f6f6; border-radius:45px;
padding:0 70px 0 16px; height:36px; display:flex; align-items:center; color:#525661; font-size:13px; }
.navlinks { display:flex; gap:18px; font-size:14px; }
.navlinks a { color:#0182ff; }
.catrow { display:flex; gap:8px; padding:14px 28px 0; }
.chip { border-radius:30px; padding:6px 14px; background:#e8ebed; color:#757b8a; font-size:13px; }
.chip.active { background:#17191c; color:#fff; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:16px 28px 0; }
.room { background:#f6f6f9; border-radius:10px; overflow:hidden; }
.room .thumb { height:78px; background:linear-gradient(160deg,#cfe0ff,#0182ff55); position:relative; }
.room .live { position:absolute; top:6px; left:6px; background:#ff3b30; color:#fff; font-size:9.5px;
font-weight:700; border-radius:3px; padding:2px 5px; }
.room .info { padding:8px 10px; }
.room h4 { font-size:12.5px; font-weight:600; margin:0 0 3px; }
.room span { font-size:10.5px; color:#757b8a; }
.esrow { display:flex; gap:14px; padding:20px 28px 0; }
.escard { flex:1; background:#17191c; border-radius:10px; padding:16px; color:#fff; }
.escard h3 { font-size:14px; font-weight:700; margin:0 0 6px; }
.escard span { font-size:11px; color:#a9afb3; }
footer { position:absolute; bottom:0; width:960px; padding:12px 28px; border-top:1px solid #e8ebed;
display:flex; justify-content:space-between; font-size:11px; color:#757b8a; }
</style></head>
<body>
<nav>
<p class="brand">SOOP</p>
<div class="search">Search streams, hosts, categories</div>
<div class="navlinks"><span>Home</span><span>Community</span><a>Esports</a></div>
</nav>
<div class="catrow">
<span class="chip active">All</span><span class="chip">Just Chatting</span><span class="chip">Gaming</span>
<span class="chip">Esports</span><span class="chip">Music</span>
</div>
<div class="grid">
<div class="room"><div class="thumb"><span class="live">LIVE</span></div><div class="info"><h4>Streaming today too!</h4><span>1.2k viewers</span></div></div>
<div class="room"><div class="thumb"><span class="live">LIVE</span></div><div class="info"><h4>Looking for co-op players</h4><span>842 viewers</span></div></div>
<div class="room"><div class="thumb"><span class="live">LIVE</span></div><div class="info"><h4>Evening chill chat</h4><span>356 viewers</span></div></div>
<div class="room"><div class="thumb"><span class="live">LIVE</span></div><div class="info"><h4>New song cover live</h4><span>2.4k viewers</span></div></div>
</div>
<div class="esrow">
<div class="escard"><h3>Esports Finals Tonight</h3><span>Exclusive coverage on SOOP Esports</span></div>
<div class="escard"><h3>This Week's Highlights</h3><span>Catch up on plays you missed</span></div>
</div>
<footer>
<span>Find the stream you want to watch right now.</span>
<span>SOOP · Community · Esports</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0d0d0d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0d0d0d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.25; margin: 0; color: #0d0d0d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #878888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.6px; background: #008827; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.6px; background: #ffffff; color: #0d0d0d;
border: 1px solid #008827; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #0d0d0d;
border: 1px solid #c2c2c2; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #baa85a; color: #0d0d0d;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Gravity','Libre Baskerville',Arial,sans-serif; color:#444444; }
*{box-sizing:border-box;}
.nav{height:62px;background:#0d0d0d;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-family:'Arizona','Libre Baskerville',Georgia,serif;font-size:19px;color:#fff;letter-spacing:.5px;}
.navlinks{display:flex;gap:24px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#cfcfcf;}
.hero{height:230px;background:#0d0d0d;display:flex;align-items:center;padding:0 34px;gap:36px;}
.herotext{width:400px;}
h1{font-family:'Arizona','Libre Baskerville',Georgia,serif;font-size:32px;font-weight:400;color:#fff;margin:0 0 14px;line-height:1.2;}
.sub{font-size:14px;color:#bdbdbd;line-height:1.6;margin:0 0 18px;width:360px;}
.cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 26px;background:#008827;color:#fff;font-size:13px;letter-spacing:.5px;}
.frame{width:190px;height:170px;position:relative;background:linear-gradient(150deg,#e5debf,#a7d6b4);border:6px solid #1a1a1a;}
.corner{position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;background:#ffcf0b;}
.section{padding:0 34px;}
.sectitle{font-family:'Arizona','Libre Baskerville',Georgia,serif;font-size:20px;font-weight:400;color:#0d0d0d;margin:20px 0 14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;position:relative;}
.thumb{height:130px;position:relative;}
.corner-sm{position:absolute;right:0;bottom:0;width:12px;height:12px;background:#ffcf0b;}
.cardbody{padding:10px 0;}
.ptitle{font-size:13px;color:#0d0d0d;}
.pprice{font-size:13px;color:#444444;margin-top:6px;}
.gold{color:#baa85a;font-size:10px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px;}
</style>
<div class="nav">
<div class="logo">Yellowkorner</div>
<div class="navlinks"><span>Photographers</span><span>Collections</span><span>Limited Editions</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Fine art photography, editioned and framed.</h1>
<div class="sub">Limited-edition prints, each shipped with its signature yellow corner — a mark, not a decoration.</div>
<div class="cta">Discover Editions</div>
</div>
<div class="frame"><div class="corner"></div></div>
</div>
<div class="section">
<div class="sectitle">Limited Editions</div>
<div class="grid">
<div class="card"><div class="gold">Limited</div><div class="thumb" style="background:linear-gradient(150deg,#e5debf,#0d0d0d)"><div class="corner-sm"></div></div><div class="cardbody"><div class="ptitle">Botanical Study No. 4</div><div class="pprice">$490</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#a7d6b4,#0d0d0d)"><div class="corner-sm"></div></div><div class="cardbody"><div class="ptitle">Cityscape at Dusk</div><div class="pprice">$390</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#a6070f,#0d0d0d)"><div class="corner-sm"></div></div><div class="cardbody"><div class="ptitle">Coastal Fragments</div><div class="pprice">$450</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#008827,#0d0d0d)"><div class="corner-sm"></div></div><div class="cardbody"><div class="ptitle">Still Life, Editioned</div><div class="pprice">$350</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #191919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #191919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #191919; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #5e5e5e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #d72c0d; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #fafafa; color: #191919;
border: 1px solid #d72c0d; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #191919;
border: 1px solid #c2c2c2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5e5e5e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #f4f4f3; color: #5e5e5e;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:'Maison Neue','Helvetica Neue',Arial,sans-serif; color:#191919; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;border-bottom:1px solid #eee;}
.logo{font-size:18px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;}
.navlinks{display:flex;gap:26px;font-size:12px;font-weight:400;text-transform:uppercase;letter-spacing:.8px;color:#191919;}
.hero{height:260px;position:relative;background:linear-gradient(0deg,rgba(25,25,25,.15),rgba(25,25,25,.15)),linear-gradient(120deg,#e6f7f4,#fff4fa 60%,#fafafa);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;}
.hero .kick{font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:#b1b7c3;margin-bottom:16px;}
.hero h1{font-size:30px;font-weight:400;color:#191919;margin:0 0 14px;letter-spacing:.3px;}
.hero p{font-size:14px;color:#5a5a5a;margin:0 0 20px;max-width:400px;line-height:1.6;}
.btn{background:#d72c0d;color:#fff;font-size:13px;font-weight:500;letter-spacing:1px;text-transform:uppercase;padding:14px 30px;border-radius:8px;}
.sec{padding:24px 42px 0;}
.sectitle{font-size:12px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;color:#8a8a8a;margin-bottom:16px;text-align:center;}
.grid{display:flex;gap:18px;justify-content:center;}
.card{width:196px;text-align:center;}
.thumb{width:196px;height:196px;border-radius:4px;margin-bottom:12px;}
.ptitle{font-size:14px;font-weight:500;color:#191919;}
.psub{font-size:12px;color:#8a8a8a;margin-top:3px;}
.pprice{font-size:13px;font-weight:500;color:#d72c0d;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Maison Louis Marie</div>
<div class="navlinks"><span>Candles</span><span>Fragrance</span><span>Body</span><span>Journal</span></div>
</div>
<div class="hero">
<div class="kick">No. 4 Basilic</div>
<h1>Fragrance that whispers rather than shouts.</h1>
<p>Clean, French-inspired scents built for quiet rooms and quiet mornings.</p>
<div class="btn">Shop Fragrance</div>
</div>
<div class="sec">
<div class="sectitle">Signature Scents</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d72c0d,#fff4fa);"></div><div class="ptitle">No. 4 Basilic</div><div class="psub">Herbal, Fresh</div><div class="pprice">$68</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#191919,#e6f7f4);"></div><div class="ptitle">No. 2 Amber Fig</div><div class="psub">Warm, Woody</div><div class="pprice">$68</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b1b7c3,#fafafa);"></div><div class="ptitle">No. 9 Vetiver</div><div class="psub">Earthy, Green</div><div class="pprice">$68</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121e37;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121e37;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #121e37; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.25px; background: #f8ca14; color: #121e37;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.25px; background: #108474; color: #ffffff;
border: 1px solid #f8ca14; border-radius: 9999px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121e37;
border: 1px solid #c4c7cd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #4cbb87; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Work Sans',-apple-system,sans-serif; color:#121e37; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:center;position:relative;padding:0 40px;border-bottom:1px solid #eeeeee;}
.logo{font-size:19px;font-weight:600;color:#121e37;}
.navlinks{position:absolute;left:40px;display:flex;gap:18px;font-size:13px;font-weight:500;color:#1a2847;}
.cart{position:absolute;right:40px;background:#f8ca14;color:#121e37;font-size:12px;font-weight:600;padding:9px 18px;border-radius:9999px;}
.hero{height:220px;display:flex;align-items:center;padding:0 40px;background:linear-gradient(120deg,#121e37 0%,#1a2847 60%,#108474 130%);position:relative;overflow:hidden;}
.box{position:absolute;right:90px;top:32px;width:150px;height:150px;border-radius:8px;background:linear-gradient(135deg,#f8ca14,#f26e21);transform:rotate(-6deg);box-shadow:0 10px 24px rgba(0,0,0,0.25);}
.box:before{content:'';position:absolute;left:14px;top:14px;right:14px;bottom:14px;border:3px solid rgba(18,30,55,0.25);border-radius:4px;}
.herotext{max-width:400px;position:relative;z-index:2;}
.h1{font-size:32px;font-weight:600;line-height:1.2;color:#fff;margin:0 0 10px;}
.sub{font-size:14px;color:#dbe2ee;line-height:1.5;margin:0 0 16px;max-width:320px;}
.btn{display:inline-block;background:#f8ca14;color:#121e37;font-size:14px;font-weight:600;padding:12px 26px;border-radius:9999px;}
.grid{display:flex;gap:14px;padding:16px 40px 0;}
.card{width:196px;background:#f9fafb;border-radius:8px;overflow:hidden;}
.thumb{height:96px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#4cbb87;color:#fff;font-size:10px;font-weight:600;padding:4px 8px;border-radius:8px;}
.cbody{padding:11px 13px;}
.ctitle{font-size:14px;font-weight:600;margin:0 0 4px;}
.players{font-size:11px;color:#7b7b7b;margin:0 0 4px;}
.cprice{font-size:15px;font-weight:600;color:#108474;margin:0;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#121e37;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;color:#9fb0c8;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="navlinks"><span>New Releases</span><span>Games</span></div>
<div class="logo">Pandasaurus Games</div>
<div class="cart">Cart (3)</div>
</div>
<div class="hero">
<div class="box"></div>
<div class="herotext">
<div class="h1">Game night, unboxed.</div>
<div class="sub">Tabletop games built for the table that stays up past midnight — one more round, always.</div>
<div class="btn">Shop New Releases</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#f8ca14,#121e37)"></div><div class="cbody"><div class="ctitle">Dinosaur World: Rampage</div><div class="players">2–5 players · 60 min</div><div class="cprice">$44.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#108474,#121e37)"></div><div class="cbody"><div class="ctitle">Trekking the World</div><div class="players">2–5 players · 45 min</div><div class="cprice">$34.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f26e21,#121e37)"></div><div class="cbody"><div class="ctitle">Boomtown Bandits</div><div class="players">3–5 players · 30 min</div><div class="cprice">$29.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#121e37,#f8ca14)"></div><div class="cbody"><div class="ctitle">Kitchen Rush Deluxe</div><div class="players">2–4 players · 40 min</div><div class="cprice">$39.99</div></div></div>
</div>
<div class="footer"><span>Free shipping over $50</span><span>Designed for game night</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #110011;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #110011;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #110011; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #78be20; color: #000000;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #016e9f; color: #ffffff;
border: 1px solid #78be20; border-radius: 4px;
padding: 10px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #110011;
border: 1px solid #e2e8f0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #78be20; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;color:#2a2a35;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;gap:20px;padding:0 26px;border-bottom:1px solid #e2e8f0;}
.logo{font-weight:700;font-size:19px;color:#110011;}
.logo span{color:#78be20;}
.searchbar{flex:1;max-width:420px;height:44px;background:#f4f9ee;border-radius:6px;display:flex;overflow:hidden;}
.searchbar input{flex:1;border:none;background:transparent;padding:0 14px;font-size:12px;color:#2a2a35;}
.searchbar button{background:#78be20;color:#fff;border:none;padding:0 20px;font-weight:700;font-size:12px;}
.navlinks{display:flex;gap:16px;font-size:11px;font-weight:600;color:#2a2a35;}
.catrow{background:#e8f4fa;display:flex;padding:0 26px;}
.catrow div{padding:9px 14px;font-size:11px;font-weight:700;color:#016e9f;border-right:1px solid #d5e9f2;}
.body{display:flex;padding:16px 26px;gap:16px;}
.col-l{width:150px;font-size:11px;}
.col-l h4{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:#6b7280;margin:0 0 6px;}
.col-l div{padding:4px 0;color:#2a2a35;}
.grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.card{border:1px solid #e2e8f0;border-radius:6px;padding:10px;background:#fff;}
.box{height:80px;border-radius:4px;margin-bottom:8px;}
.b1{background:linear-gradient(160deg,#78be20,#5d9a10);}
.b2{background:linear-gradient(160deg,#016e9f,#015580);}
.b3{background:linear-gradient(160deg,#110011,#2a2a35);}
.b4{background:linear-gradient(160deg,#78be20,#016e9f);}
.sku{font-family:Consolas,monospace;font-size:9px;color:#6b7280;}
.pname{font-size:11px;font-weight:700;color:#110011;margin:3px 0;line-height:1.2;}
.instock{font-size:9px;color:#78be20;font-weight:700;text-transform:uppercase;}
.addcart{display:block;margin-top:6px;background:#78be20;color:#fff;text-align:center;font-size:10px;font-weight:700;padding:6px 0;border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Genesee Scientific<span>.</span></div>
<div class="searchbar"><input value="pipette tips 200uL sterile" readonly><button>Search</button></div>
<div class="navlinks"><span>Reagents</span><span>Consumables</span><span>Equipment</span></div>
</div>
<div class="catrow">
<div>Molecular Biology</div><div>Cell Culture</div><div>Pipette Tips</div><div>Chemicals</div><div>Lab Equipment</div><div>PPE</div>
</div>
<div class="body">
<div class="col-l">
<h4>Category</h4>
<div>Reagents</div><div>Consumables</div><div>Capital Equipment</div>
<h4 style="margin-top:12px;">Brand</h4>
<div>Fisherbrand</div><div>Corning</div><div>USA Scientific</div>
</div>
<div class="grid">
<div class="card"><div class="box b1"></div><div class="sku">SKU 24-160</div><div class="pname">Sterile Filter Pipette Tips, 200μL</div><div class="instock">In Stock</div><div class="addcart">Add to Cart</div></div>
<div class="card"><div class="box b2"></div><div class="sku">SKU 25-608</div><div class="pname">Cell Culture Flask, T-75</div><div class="instock">In Stock</div><div class="addcart">Add to Cart</div></div>
<div class="card"><div class="box b3"></div><div class="sku">SKU 18-405</div><div class="pname">Benchtop Microcentrifuge</div><div class="instock">In Stock</div><div class="addcart">Add to Cart</div></div>
<div class="card"><div class="box b4"></div><div class="sku">SKU 30-901</div><div class="pname">Tris-EDTA Buffer, 1L</div><div class="instock">In Stock</div><div class="addcart">Add to Cart</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #006fcf; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #231f20; color: #f48120;
border: 1px solid #006fcf; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #000000; color: #ffffff;
border: 1px solid #070707; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ffffff; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f48120; color: #1d1c1c;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#000000; font-family:Arial,Helvetica,sans-serif; color:#ffffff; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:20px;font-weight:800;letter-spacing:-0.5px;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.navlinks .active{color:#f48120;}
.navlinks span{color:#444;}
.search{position:relative;height:48px;margin:0 30px;background:#231f20;display:flex;align-items:center;padding:0 16px;font-size:14px;color:#444;}
.hero{height:150px;display:flex;flex-direction:column;justify-content:center;padding:0 30px;}
.hero h1{font-size:34px;font-weight:800;letter-spacing:-0.5px;margin:0 0 6px;}
.hero .sub{color:#f48120;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.rowlabel{padding:12px 30px 8px;font-size:20px;font-weight:800;}
.grid{display:flex;gap:8px;padding:0 30px;}
.card{width:150px;background:#231f20;border-radius:4px;position:relative;}
.badge{position:absolute;top:6px;left:6px;font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#1d1c1c;border-radius:2px;padding:2px 6px;z-index:2;}
.sleeve{height:200px;border-radius:4px 4px 0 0;position:relative;}
.tape{position:absolute;left:14px;bottom:14px;width:60px;height:36px;background:rgba(0,0,0,0.55);border-radius:2px;}
.tape:before,.tape:after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,0.5);top:10px;}
.tape:before{left:8px;}
.tape:after{right:8px;}
.body{padding:8px 10px 12px;}
.title{font-size:13px;font-weight:600;line-height:1.3;margin-bottom:6px;height:34px;overflow:hidden;}
.price{font-size:16px;font-weight:700;color:#f48120;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;color:#5f6368;}
.footer a{color:#f48120;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Lunchmeat Vhs</div>
<div class="navlinks"><span class="active">Horror</span><span>Sci-Fi</span><span>Action</span><span>Merch</span></div>
</div>
<div class="search">Search the archive...</div>
<div class="hero">
<div class="sub">Blockbuster After Closing Time</div>
<h1>Analog horror, straight from the shelf.</h1>
</div>
<div class="rowlabel">New Arrivals</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#ffd800;">New</span><div class="sleeve" style="background:linear-gradient(160deg,#f48120,#1d1c1c 70%);"><div class="tape"></div></div><div class="body"><div class="title">Nightshift Terror VHS</div><div class="price">$18</div></div></div>
<div class="card"><span class="badge" style="background:#f48120;">Sale</span><div class="sleeve" style="background:linear-gradient(160deg,#cc0066,#1d1c1c 70%);"><div class="tape"></div></div><div class="body"><div class="title">The Basement Tapes Vol.2</div><div class="price">$14</div></div></div>
<div class="card"><span class="badge" style="background:#cc0066;">Exclusive</span><div class="sleeve" style="background:linear-gradient(160deg,#006fcf,#1d1c1c 70%);"><div class="tape"></div></div><div class="body"><div class="title">Static Channel Blu-ray</div><div class="price">$26</div></div></div>
<div class="card"><div class="sleeve" style="background:linear-gradient(160deg,#fba900,#1d1c1c 70%);"><div class="tape"></div></div><div class="body"><div class="title">Rewind or Die</div><div class="price">$20</div></div></div>
<div class="card"><div class="sleeve" style="background:linear-gradient(160deg,#f58720,#1d1c1c 70%);"><div class="tape"></div></div><div class="body"><div class="title">Video Store Massacre</div><div class="price">$16</div></div></div>
</div>
<div class="footer"><span>© Lunchmeat Vhs</span><span><a>About</a> <a>Shipping</a> <a>Returns</a></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0075de; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0075de; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bbeb; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #005bab; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0075de; color: #000000;
border: 1px solid #005bab; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0075de; color: #f5f5f5;
border: 1px solid #2789e2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bbeb; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0071d6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"NotionInter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.page { width:960px; height:640px; display:flex; }
.sidebar { flex:0 0 220px; height:640px; background:#f9f9f8; border-right:1px solid rgba(0,0,0,0.08);
padding:16px 12px; display:flex; flex-direction:column; gap:2px; }
.ws { display:flex; align-items:center; gap:8px; padding:6px 8px; margin-bottom:10px; }
.ws .mark { width:20px; height:20px; border-radius:5px; background:#0075de; }
.ws span { font-size:13px; font-weight:600; color:rgba(0,0,0,0.9); }
.sidebar .item { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:5px;
font-size:12.5px; color:rgba(0,0,0,0.65); }
.sidebar .item.active { background:rgba(0,0,0,0.06); color:rgba(0,0,0,0.95); font-weight:500; }
.sidebar .icon { width:14px; height:14px; border-radius:3px; background:rgba(0,0,0,0.16); flex:0 0 14px; }
.sidebar .sep { height:1px; background:rgba(0,0,0,0.08); margin:10px 4px; }
.sidebar .label { font-size:10.5px; color:rgba(0,0,0,0.4); padding:4px 8px; text-transform:uppercase; letter-spacing:0.04em; }
.main { flex:1; height:640px; display:flex; flex-direction:column; min-width:0; }
.topbar { flex:0 0 48px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid rgba(0,0,0,0.08); }
.crumb { font-size:12.5px; color:rgba(0,0,0,0.54); }
.crumb b { color:rgba(0,0,0,0.9); font-weight:500; }
.btn-primary { background:#0075de; color:#ffffff; border:1px solid transparent; border-radius:8px;
height:32px; padding:0 16px; font-size:13px; font-weight:500; font-family:inherit; white-space:nowrap; }
.doc { flex:1; padding:24px 40px; overflow:hidden; min-height:0; }
.doc h1 { margin:0 0 14px; font-size:26px; font-weight:700; color:rgba(0,0,0,0.95); letter-spacing:-0.4px; }
.bar { height:9px; border-radius:5px; background:rgba(0,0,0,0.08); margin-bottom:8px; }
.bar.w1 { width:96%; } .bar.w2 { width:88%; } .bar.w3 { width:62%; }
.todo { display:flex; align-items:center; gap:8px; margin:6px 0; font-size:13px; color:rgba(0,0,0,0.75); }
.todo .box { width:14px; height:14px; border-radius:3px; border:1.5px solid rgba(0,0,0,0.3); flex:0 0 14px; }
.todo .box.done { background:#0075de; border-color:#0075de; }
.todo.done span { text-decoration:line-through; color:rgba(0,0,0,0.4); }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; }
.card { background:#ffffff; border:1px solid rgba(0,0,0,0.1); border-radius:12px; padding:14px; }
.card .chip { display:inline-block; font-size:10px; font-weight:500; color:#0075de; background:#e6f3fe;
border-radius:999px; padding:2px 8px; margin-bottom:8px; }
.card h3 { margin:0 0 4px; font-size:13.5px; font-weight:600; color:rgba(0,0,0,0.95); }
.card p { margin:0; font-size:11px; color:rgba(0,0,0,0.54); line-height:1.4; }
footer { flex:0 0 34px; padding:0 40px; display:flex; align-items:center; font-size:10.5px; color:rgba(0,0,0,0.4); }
</style></head>
<body>
<div class="page">
<div class="sidebar">
<div class="ws"><span class="mark"></span><span>Notion</span></div>
<div class="item active"><span class="icon"></span>Getting Started</div>
<div class="item"><span class="icon"></span>Project Plan</div>
<div class="item"><span class="icon"></span>Templates</div>
<div class="item"><span class="icon"></span>Trash</div>
<div class="sep"></div>
<div class="label">Shared</div>
<div class="item"><span class="icon"></span>Team Wiki</div>
<div class="item"><span class="icon"></span>Roadmap</div>
</div>
<div class="main">
<div class="topbar">
<div class="crumb">Workspace / <b>Project Plan</b></div>
<button class="btn-primary">Share</button>
</div>
<div class="doc">
<h1>Q4 Launch Plan</h1>
<div class="bar w1"></div>
<div class="bar w2"></div>
<div class="bar w3"></div>
<div class="todo"><span class="box done"></span><span>Draft the product brief</span></div>
<div class="todo done"><span class="box done"></span><span>Align on scope with design</span></div>
<div class="todo"><span class="box"></span><span>Schedule the kickoff review</span></div>
<div class="cards">
<div class="card"><span class="chip">Docs</span><h3>Building blocks</h3><p>Compose pages from flexible, configurable blocks.</p></div>
<div class="card"><span class="chip">Projects</span><h3>Toolmaking, made ubiquitous</h3><p>Shape software around the work, not the other way around.</p></div>
<div class="card"><span class="chip">AI</span><h3>A companion you can mold</h3><p>Surface intent and sources, keep control in your hands.</p></div>
</div>
</div>
<footer>Notion Workspace</footer>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #12b886; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #12b886; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #20c997; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #12b886; color: #000000;
border: 1px solid #20c997; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #12b886; color: #000000;
border: 1px solid #36c298; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #14bb89; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f9fa; color:#212529; box-sizing:border-box;
font-family:-apple-system,system-ui,sans-serif; }
* { box-sizing:border-box; }
header { background:#ffffff; height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.brand { font-weight:800; font-size:18px; color:#12b886; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#495057; }
.loginpill { background:#212529; color:#ffffff; border-radius:16px; padding:0 16px; height:32px;
display:flex; align-items:center; font-weight:700; font-size:14px; }
main { padding:28px 100px; }
.feat { display:flex; gap:22px; margin-bottom:22px; }
.fmain { flex:2; background:#ffffff; border-radius:8px; padding:20px; }
.fmain .tag { color:#12b886; font-size:12px; font-weight:700; }
.fmain h1 { font-size:24px; margin:8px 0 6px; line-height:1.3; }
.fmain p { font-size:14px; color:#868e96; margin:0; line-height:1.5; }
.fside { flex:1; background:#ffffff; border-radius:8px; padding:18px; display:flex; flex-direction:column; gap:10px; }
.fside .stitle { font-size:13px; font-weight:700; color:#212529; }
.fside .srow { font-size:13px; color:#495057; border-top:1px solid #e9ecef; padding-top:8px; }
.writebtn { background:#12b886; color:#ffffff; border-radius:6px; padding:8px 18px; font-size:13px;
font-weight:700; align-self:flex-start; }
.list h2 { font-size:15px; color:#495057; margin:0 0 12px; }
.post { display:flex; gap:16px; background:#ffffff; border-radius:8px; padding:16px; margin-bottom:12px; }
.thumb { width:120px; height:76px; border-radius:6px; flex-shrink:0; }
.t1 { background:linear-gradient(135deg,#c3faE8,#12b886); }
.t2 { background:linear-gradient(135deg,#e9ecef,#868e96); }
.t3 { background:linear-gradient(135deg,#96f2d7,#0ca678); }
.post .body h3 { margin:0 0 6px; font-size:16px; }
.post .body p { margin:0 0 6px; font-size:13px; color:#868e96; line-height:1.4; }
.post .meta { font-size:11px; color:#adb5bd; }
</style></head>
<body>
<header>
<span class="brand">velog</span>
<div class="navlinks"><span>Trending</span><span>Recent</span><span>Tags</span></div>
<div class="loginpill">Sign in</div>
</header>
<main>
<section class="feat">
<div class="fmain">
<span class="tag">EDITOR'S PICK</span>
<h1>Writing a React state machine from scratch, in plain hooks</h1>
<p>A calm walkthrough of building predictable state transitions without a library — what breaks, and why.</p>
</div>
<div class="fside">
<span class="stitle">Start writing today</span>
<span class="srow">Markdown editor, code blocks, and instant publish.</span>
<div class="writebtn">Write a post</div>
</div>
</section>
<section class="list">
<h2>Recent posts</h2>
<div class="post"><div class="thumb t1"></div><div class="body">
<h3>Understanding the event loop, once and for all</h3>
<p>Microtasks, macrotasks, and why your promise resolves later than you expect.</p>
<span class="meta">Jisoo Kang · 2026.06.11</span>
</div></div>
<div class="post"><div class="thumb t2"></div><div class="body">
<h3>Migrating a monorepo to pnpm workspaces</h3>
<p>What actually changed after the switch, and the two gotchas we hit.</p>
<span class="meta">Minho Jang · 2026.06.09</span>
</div></div>
<div class="post"><div class="thumb t3"></div><div class="body">
<h3>A minimal design system in 300 lines of CSS</h3>
<p>Tokens, spacing, and a handful of components — nothing more.</p>
<span class="meta">Yuna Park · 2026.06.07</span>
</div></div>
</section>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6d6d6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:15px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:12px; font-weight:500; }
.navlinks .on { color:#FA2D48; font-weight:700; }
.navlinks span:not(.on) { color:#98989F99; color:#8E8E93; }
.content { padding:6px 32px 0; height:492px; overflow:hidden; }
h1.big { font-size:30px; font-weight:700; margin:6px 0 14px; letter-spacing:-0.2px; }
.hero { position:relative; border-radius:16px; overflow:hidden; height:206px;
background:linear-gradient(135deg,#5B2A86 0%, #A22A4E 55%, #FA2D48 100%); margin-bottom:20px; }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.72) 100%); }
.heroinner { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:18px 22px; }
.herotag { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.herotitle { font-size:26px; font-weight:700; margin:6px 0 2px; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
.herosub { font-size:13px; color:#EBEBF599; }
.shelfhead { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.shelfhead h2 { font-size:19px; font-weight:700; margin:0; }
.row { display:flex; gap:16px; }
.tile { width:118px; }
.art { width:118px; height:118px; border-radius:12px; }
.a1 { background:linear-gradient(160deg,#2D6E7E,#0D2C33); }
.a2 { background:linear-gradient(160deg,#8E6C3C,#2A1E0C); }
.a3 { background:linear-gradient(160deg,#4A2D6E,#160B24); }
.a4 { background:linear-gradient(160deg,#C0392B,#3A0E09); }
.tt { font-size:13px; font-weight:600; margin:8px 0 2px; }
.ta { font-size:11.5px; color:#8E8E93; }
.player { position:absolute; left:0; right:0; bottom:0; height:76px;
background:rgba(28,28,30,0.86); backdrop-filter:blur(20px); display:flex; align-items:center; padding:0 24px; gap:14px;
border-top:1px solid #2C2C2E; }
.part { width:44px; height:44px; border-radius:8px; background:linear-gradient(160deg,#FA2D48,#5B2A86); }
.pinfo { flex:1; }
.pt { font-size:14.5px; font-weight:600; }
.pa { font-size:12px; color:#8E8E93; margin-top:1px; }
.scrub { height:3px; background:rgba(255,255,255,0.15); border-radius:2px; margin-top:6px; position:relative; width:220px; }
.scrub::before { content:''; position:absolute; left:0; top:0; bottom:0; width:38%; background:#FA2D48; border-radius:2px; }
.pctrl { display:flex; align-items:center; gap:20px; }
.playbtn { width:30px; height:30px; border-radius:50%; background:#FA2D48; display:flex; align-items:center; justify-content:center; }
.playbtn::before { content:''; border-left:9px solid #fff; border-top:6px solid transparent; border-bottom:6px solid transparent; margin-left:2px; }
.skip { width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid #EBEBF5; opacity:0.8; }
.heart { width:16px; height:16px; position:relative; }
.heart::before, .heart::after { content:''; position:absolute; width:9px; height:14px; background:#FA2D48; border-radius:9px 9px 0 0; top:0; }
.heart::before { left:0; transform:rotate(-45deg); transform-origin:bottom right; }
.heart::after { right:0; transform:rotate(45deg); transform-origin:bottom left; }
.atmos { margin-left:auto; background:#D4A857; color:#fff; font-size:9px; font-weight:600; padding:3px 8px; border-radius:500px; }
</style></head>
<body>
<nav>
<p class="brand">Apple Music (iOS)</p>
<div class="navlinks"><span class="on">Home</span><span>New</span><span>Radio</span><span>Library</span><span>Search</span></div>
<span style="width:26px;height:26px;border-radius:50%;background:#2C2C2E;display:block;"></span>
</nav>
<div class="content">
<h1 class="big">Listen Now</h1>
<div class="hero">
<div class="heroinner">
<span class="herotag">New Release</span>
<p class="herotitle">Night Drive</p>
<p class="herosub">The Weekend Collective · Alternative</p>
</div>
</div>
<div class="shelfhead"><h2>Recently Played</h2><span style="font-size:12px;color:#8E8E93;">See All</span></div>
<div class="row">
<div class="tile"><div class="art a1"></div><div class="tt">Blue Hour</div><div class="ta">Mira Sol</div></div>
<div class="tile"><div class="art a2"></div><div class="tt">Analog Heart</div><div class="ta">The Levers</div></div>
<div class="tile"><div class="art a3"></div><div class="tt">Static Bloom</div><div class="ta">Kessler</div></div>
<div class="tile"><div class="art a4"></div><div class="tt">Ember Line</div><div class="ta">Roan Fields</div></div>
</div>
</div>
<div class="player">
<div class="part"></div>
<div class="pinfo">
<div class="pt">Night Drive</div>
<div class="pa">The Weekend Collective</div>
<div class="scrub"></div>
</div>
<div class="pctrl">
<span class="heart"></span>
<span class="skip" style="transform:rotate(180deg)"></span>
<span class="playbtn"></span>
<span class="skip"></span>
</div>
<span class="atmos">Dolby Atmos</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-size: 20px; font-weight:700; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-size: 12px; font-weight:400; line-height:1.4; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #0086FF; color: #ffffff;
border: none; border-radius: 999; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #FFFFFF; color: #0086FF;
border: 1px solid #0086FF; border-radius: 999;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #FFFFFF; color: #111111;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dbeeff; color: #0086FF;
border-radius: 999; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #FFFFFF; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
.topbar { background: #004D99; color: #fff; font-size: 11px; text-align: center; padding: 5px 0; }
header { height: 60px; background: #0086FF; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; }
.brand { color: #fff; font-size: 20px; font-weight: 900; margin: 0; }
.searchbar { width: 380px; height: 38px; background: #fff; border-radius: 8px; display: flex; align-items: center; padding: 0 14px; }
.searchbar span { font-size: 12px; color: #999999; }
.navicons { display: flex; gap: 16px; }
.navicons .ic { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.3); }
.catnav { display: flex; gap: 20px; padding: 10px 32px; background: #F0F1F3; }
.catnav span { font-size: 12px; color: #333333; font-weight: 600; }
.hero { display: flex; gap: 16px; padding: 18px 32px 0; }
.banner { flex: 2; height: 130px; border-radius: 12px; background: linear-gradient(135deg, #339EFF, #0086FF); position: relative; display: flex; align-items: center; padding: 0 24px; }
.banner h2 { color: #fff; font-size: 20px; font-weight: 800; margin: 0; }
.banner p { color: #E5F2FF; font-size: 12px; margin: 4px 0 0; }
.lu { flex: 1; height: 130px; border-radius: 12px; background: #FFF0E6; display: flex; align-items: center; gap: 12px; padding: 0 18px; }
.lu .avatar { width: 46px; height: 46px; border-radius: 50%; background: #0086FF; flex-shrink: 0; }
.lu .txt b { display: block; font-size: 12px; color: #212121; }
.lu .txt span { font-size: 11px; color: #666666; }
.section { padding: 20px 32px 0; }
.section h3 { font-size: 15px; font-weight: 800; color: #212121; margin: 0 0 12px; }
.cards { display: flex; gap: 14px; }
.card { flex: 1; border: 1px solid #E0E0E0; border-radius: 8px; padding: 10px; position: relative; }
.card .badge { position: absolute; top: 8px; left: 8px; background: #E22D2D; color: #fff; font-size: 9px; font-weight: 800; padding: 3px 6px; border-radius: 4px; }
.card .img { height: 76px; border-radius: 6px; margin-bottom: 8px; }
.card h4 { margin: 0 0 4px; font-size: 11px; font-weight: 600; color: #333333; line-height: 1.3; }
.card .stars { font-size: 9px; color: #FFC107; margin-bottom: 6px; }
.card .old { font-size: 10px; color: #999999; text-decoration: line-through; }
.card .now { font-size: 14px; font-weight: 800; color: #212121; }
.card .ship { display: inline-block; margin-top: 6px; font-size: 9px; font-weight: 700; color: #00A650; }
</style>
<div class="topbar">Free shipping on orders over $99 · Use MAGALU10 for 10% off</div>
<header>
<p class="brand">Magazine Luiza</p>
<div class="searchbar"><span>Search products, brands and more...</span></div>
<div class="navicons"><div class="ic"></div><div class="ic"></div><div class="ic"></div></div>
</header>
<div class="catnav"><span>Electronics</span><span>Home</span><span>Fashion</span><span>Beauty</span><span>Sports</span><span>Deals</span></div>
<div class="hero">
<div class="banner"><div><h2>Weekend Sale — up to 40% off</h2><p>Electronics, home & more, this weekend only</p></div></div>
<div class="lu"><div class="avatar"></div><div class="txt"><b>Ask Lu</b><span>Your virtual shopping assistant</span></div></div>
</div>
<div class="section">
<h3>Deals for you</h3>
<div class="cards">
<div class="card"><span class="badge">-24%</span><div class="img" style="background:linear-gradient(135deg,#66B7FF,#0086FF)"></div><h4>Wireless Headphones Pro</h4><div class="stars">★★★★★</div><div class="old">$249.00</div><div class="now">$189.00</div><span class="ship">Free shipping</span></div>
<div class="card"><span class="badge">-15%</span><div class="img" style="background:linear-gradient(135deg,#FF7033,#FF4C00)"></div><h4>Air Fryer 5L Digital</h4><div class="stars">★★★★☆</div><div class="old">$139.00</div><div class="now">$118.00</div><span class="ship">Free shipping</span></div>
<div class="card"><div class="img" style="background:linear-gradient(135deg,#339EFF,#004D99)"></div><h4>Smart TV 50" 4K</h4><div class="stars">★★★★★</div><div class="old">$1,199.00</div><div class="now">$999.00</div><span class="ship">12x no interest</span></div>
<div class="card"><span class="badge">-30%</span><div class="img" style="background:linear-gradient(135deg,#00C8FF,#0086FF)"></div><h4>Robot Vacuum Cleaner</h4><div class="stars">★★★★☆</div><div class="old">$429.00</div><div class="now">$299.00</div><span class="ship">Free shipping</span></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; letter-spacing: -0.25px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.33; letter-spacing: 0.3px; background: #0066a4; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.33; letter-spacing: 0.3px; background: #ffffff; color: #0066a4;
border: 1px solid #0066a4; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.4px; background: #e07b00; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.util { height:28px; background:#004d7a; color:#fff; display:flex; align-items:center; justify-content:flex-end; padding:0 24px; font-size:11px; }
nav { height:48px; background:#0066a4; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.brand { color:#fff; font-size:14px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:18px; }
.navlinks span { color:#fff; font-size:12px; font-weight:600; }
main { display:flex; height:calc(640px - 76px); }
.gallery { width:36%; background:#f5f7f9; display:flex; align-items:center; justify-content:center; }
.jar { width:110px; height:150px; border-radius:0 0 12px 12px; background:linear-gradient(180deg,#e6f1f8,#0066a4 90%); position:relative; border:2px solid #0066a4; }
.jar::before { content:''; position:absolute; left:20px; top:-12px; width:70px; height:16px; background:#37474f; border-radius:3px; }
.details { width:64%; padding:20px 30px; }
.sku { font-family:'Courier New',monospace; font-size:12px; color:#666666; margin:0 0 6px; }
h1 { font-size:22px; font-weight:700; margin:0 0 8px; }
.badges { display:flex; gap:6px; margin-bottom:12px; }
.badge { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; padding:2px 6px; color:#fff; }
.badge.ngss { background:#1565c0; }
.badge.grade { background:#37474f; }
.badge.safety { background:#b71c1c; }
.price { font-size:18px; font-weight:700; color:#004d7a; margin:0 0 14px; }
.desc { font-size:14px; line-height:1.5; color:#333333; margin:0 0 16px; max-width:440px; }
.alert { background:#fdf2e3; border:1px solid #e07b00; border-radius:8px; padding:10px 14px; font-size:13px; color:#b86200; margin-bottom:18px; max-width:440px; }
.buyrow { display:flex; gap:10px; }
.btn-accent { background:#e07b00; color:#fff; border:none; border-radius:4px; padding:10px 20px; font-size:15px; font-weight:700; height:42px; }
.btn-secondary { background:#fff; color:#0066a4; border:1.5px solid #0066a4; border-radius:4px; padding:9px 19px; font-size:15px; font-weight:700; height:42px; }
</style></head>
<body>
<div class="util">Account · Cart (5) · 1-800-334-5551</div>
<nav>
<p class="brand">Carolina Biological Supply</p>
<div class="navlinks"><span>Science Kits</span><span>Living Organisms</span><span>Lab Supplies</span><span>Chemicals</span></div>
</nav>
<main>
<div class="gallery"><div class="jar"></div></div>
<div class="details">
<p class="sku">CAT# 173070</p>
<h1>Frog Dissection Specimen, Preserved</h1>
<div class="badges"><span class="badge ngss">NGSS Aligned</span><span class="badge grade">Grades 6–8</span><span class="badge safety">Handle w/ Care</span></div>
<p class="price">$4.95 / each</p>
<p class="desc">Double-injected preserved specimen for classroom dissection, aligned with life science standards.</p>
<div class="alert">Live specimens ship Monday–Wednesday only.</div>
<div class="buyrow">
<button class="btn-accent">Add to Cart</button>
<button class="btn-secondary">Request a Quote</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #dc4c3e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #dc4c3e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #eaa9a3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fafafa; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #dc4c3e; color: #fafafa;
border: 1px solid #fafafa; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #dc4c3e; color: #f5f5f5;
border: 1px solid #e0675b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #eaa9a3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e1685c; color: #fafafa;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#202020; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.sidebar { width:250px; background:#FAFAFA; padding:22px 16px; }
.sb-user { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.sb-user .av { width:36px; height:36px; border-radius:50%; background:#DC4C3E; }
.sb-item { display:flex; align-items:center; gap:10px; height:36px; font-size:15px; }
.sb-item .cnt { margin-left:auto; color:#808080; font-size:13px; }
.sb-hdr { font-size:12px; letter-spacing:0.6px; text-transform:uppercase; color:#808080; margin:16px 0 4px; }
.dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.main { flex:1; padding:26px 40px; position:relative; }
.maintitle { font-size:34px; font-weight:700; margin:0 0 14px; }
.row { display:flex; align-items:center; gap:12px; height:52px; border-bottom:0.5px solid #EEEEEE; }
.cb { width:22px; height:22px; border-radius:50%; border:1.5px solid #B0B0B0; flex-shrink:0; }
.cb.p1 { border-color:#DC4C3E; background:rgba(220,76,62,0.10); }
.cb.p2 { border-color:#EB8909; background:rgba(235,137,9,0.08); }
.cb.p3 { border-color:#246FE0; background:rgba(36,111,224,0.08); }
.cb.done { background:#DC4C3E; border-color:#DC4C3E; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; }
.tcontent { flex:1; }
.ttitle { font-size:16px; }
.ttitle.done { color:#B0B0B0; text-decoration:line-through; }
.tmeta { display:flex; gap:10px; margin-top:2px; font-size:13px; }
.date { color:#808080; }
.date.today { color:#058527; }
.date.over { color:#DC4C3E; }
.proj { color:#808080; }
.fab { position:absolute; right:32px; bottom:32px; width:56px; height:56px; border-radius:50%; background:#DC4C3E; color:#fff;
font-size:28px; display:flex; align-items:center; justify-content:center; box-shadow:rgba(220,76,62,0.35) 0 6px 16px; }
</style></head>
<body>
<div class="app">
<div class="sidebar">
<div class="sb-user"><div class="av"></div><span style="font-weight:600">Todoist (iOS)</span></div>
<div class="sb-item">📥 Inbox<span class="cnt">4</span></div>
<div class="sb-item">☀ Today<span class="cnt">5</span></div>
<div class="sb-item">📅 Upcoming</div>
<div class="sb-hdr">My Projects</div>
<div class="sb-item"><span class="dot" style="background:#4073FF"></span>Product<span class="cnt">6</span></div>
<div class="sb-item"><span class="dot" style="background:#FF9933"></span>Marketing<span class="cnt">2</span></div>
<div class="sb-item"><span class="dot" style="background:#299438"></span>Personal</div>
</div>
<div class="main">
<div class="maintitle">Today</div>
<div class="row"><div class="cb p1"></div><div class="tcontent"><div class="ttitle">Ship the Todoist (iOS) release notes</div>
<div class="tmeta"><span class="date over">Overdue</span><span class="proj"># Product</span></div></div></div>
<div class="row"><div class="cb done">✓</div><div class="tcontent"><div class="ttitle done">Reply to design feedback</div></div></div>
<div class="row"><div class="cb p2"></div><div class="tcontent"><div class="ttitle">Review pricing page copy</div>
<div class="tmeta"><span class="date today">Today</span><span class="proj"># Marketing</span></div></div></div>
<div class="row"><div class="cb p3"></div><div class="tcontent"><div class="ttitle">Sync with design on icons</div>
<div class="tmeta"><span class="date today">Today 3:00 PM</span></div></div></div>
<div class="row"><div class="cb"></div><div class="tcontent"><div class="ttitle">Buy groceries for the week</div>
<div class="tmeta"><span class="proj"># Personal</span></div></div></div>
<div class="fab">+</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #003399; color: #ffffff;
border: none; border-radius: 2px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #003399;
border: 1px solid #003399; border-radius: 2px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; background: #f5f6f7; color: #707070;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Century Gothic','Segoe UI',Arial,sans-serif; color:#3d3d3d; }
*{box-sizing:border-box; border-radius:2px !important;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#003399;}
.logo{font-size:19px;font-weight:700;color:#fff;letter-spacing:.5px;text-transform:uppercase;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.4px;color:#fff;}
.hero{height:240px;display:flex;background:#003399;position:relative;}
.hero:before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.15);}
.herotext{width:46%;padding:0 36px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1;}
h1{font-size:28px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.3px;margin:0 0 12px;line-height:1.25;}
.sub{font-size:13px;color:#cfd9f2;margin:0 0 18px;max-width:300px;}
.cta{display:inline-block;background:#008bd2;color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;padding:12px 26px;width:fit-content;}
.heroimg{width:54%;position:relative;z-index:1;}
.cabinet{position:absolute;left:80px;top:30px;width:130px;height:170px;background:linear-gradient(160deg,#e8e8e8,#c9c9c9);}
.drawer{position:absolute;width:110px;height:26px;background:#f5f5f5;border:1px solid #b0b0b0;}
.d1{left:90px;top:44px;}
.d2{left:90px;top:76px;}
.d3{left:90px;top:108px;}
.spectable{display:flex;gap:1px;background:#e0e0e0;}
.speccell{flex:1;background:#fff;text-align:center;padding:10px;border:1px solid #e0e0e0;}
.speclabel{font-size:10px;color:#707070;text-transform:uppercase;letter-spacing:.5px;}
.specvalue{font-size:14px;font-weight:700;color:#003399;margin-top:2px;}
.sec{padding:18px 36px 0;}
.sectitle{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;border:1px solid #e0e0e0;padding:10px;}
.thumb{height:82px;background:#f5f5f5;margin-bottom:8px;}
.pname{font-size:12px;font-weight:700;text-transform:uppercase;margin-bottom:3px;}
.pprice{font-size:13px;color:#3d3d3d;}
</style>
<div class="nav">
<div class="logo">Lista</div>
<div class="navlinks"><span>Workbenches</span><span>Cabinets</span><span>Systems</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Precision Storage, Specified.</h1>
<div class="sub">Load ratings and dimensions before the showroom gesture, for procurement that reads specs.</div>
<div class="cta">Request Quote</div>
</div>
<div class="heroimg"><div class="cabinet"></div><div class="drawer d1"></div><div class="drawer d2"></div><div class="drawer d3"></div></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Load Rating</div><div class="specvalue">200 kg/drawer</div></div>
<div class="speccell"><div class="speclabel">Material</div><div class="specvalue">14-ga Steel</div></div>
<div class="speccell"><div class="speclabel">Finish</div><div class="specvalue">Powder Coat</div></div>
<div class="speccell"><div class="speclabel">Warranty</div><div class="specvalue">10 Years</div></div>
</div>
<div class="sec">
<div class="sectitle">Product Lines</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="pname">72-Series Cabinet</div><div class="pprice">Request Quote</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Perfect Workbench</div><div class="pprice">Request Quote</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Modular Drawer Unit</div><div class="pprice">Request Quote</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: 0.01em; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; background: #fe0000; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; background: transparent; color: #111111;
border: 1px solid #fe0000; border-radius: 0px;
padding: 10px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #111111;
border: 1px solid #c0c0c0; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.1em; background: #fe0000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:'Arial Narrow',Arial,sans-serif; color:#111111; }
*{box-sizing:border-box; border-radius:0 !important;}
.nav{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #ddd;background:#fff;}
.logo{font-size:22px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.navlinks{display:flex;gap:26px;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#111;}
.navlinks span:first-child{border-bottom:3px solid #fe0000;padding-bottom:6px;}
.hero{height:280px;display:flex;background:#111111;}
.herotext{width:46%;padding:0 34px;display:flex;flex-direction:column;justify-content:center;}
.spec{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#fe0000;margin-bottom:12px;}
.herotext h1{font-size:32px;font-weight:700;color:#fff;letter-spacing:.2px;margin:0 0 12px;line-height:1.15;}
.herotext p{font-size:13px;color:#e3ddd8;margin:0 0 20px;max-width:300px;}
.cta{display:inline-block;background:#fe0000;color:#fff;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:14px 28px;width:fit-content;}
.heroimg{width:54%;position:relative;background:linear-gradient(180deg,#1a1a1a,#111);}
.machine{position:absolute;left:60px;top:50px;width:180px;height:180px;background:linear-gradient(135deg,#3a3a3a,#0a0a0a);}
.lever{position:absolute;left:250px;top:70px;width:14px;height:100px;background:#fe0000;}
.gauge{position:absolute;left:90px;top:80px;width:40px;height:40px;border:3px solid #003388;}
.spectable{display:flex;gap:1px;background:#ddd;}
.speccell{flex:1;background:#f4f3f1;text-align:center;padding:10px;}
.speclabel{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#666;}
.specvalue{font-size:15px;color:#111;margin-top:3px;font-weight:700;}
.seclabel{padding:18px 34px 12px;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#111;}
.grid{display:flex;gap:14px;padding:0 34px;}
.card{width:200px;background:#fff;border:1px solid #ddd;}
.thumb{height:90px;background:#e3ddd8;}
.badge{display:inline-block;margin:8px 8px 0;background:#003388;color:#fff;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;}
.pname{font-size:12px;font-weight:700;color:#111;margin:8px 8px 2px;text-transform:uppercase;letter-spacing:.3px;}
.pprice{font-size:14px;font-weight:700;color:#fe0000;margin:0 8px 10px;}
</style>
<div class="nav">
<div class="logo">Lelit</div>
<div class="navlinks"><span>Machines</span><span>Grinders</span><span>Parts</span><span>Support</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="spec">9-Bar Dual Boiler System</div>
<h1>Engineered, Not Decorated.</h1>
<p>Precision espresso instruments for those who read boiler temps like weather reports.</p>
<div class="cta">Configure Machine</div>
</div>
<div class="heroimg"><div class="machine"></div><div class="lever"></div><div class="gauge"></div></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Boiler</div><div class="specvalue">Dual, 9 bar</div></div>
<div class="speccell"><div class="speclabel">Portafilter</div><div class="specvalue">58mm</div></div>
<div class="speccell"><div class="speclabel">Body</div><div class="specvalue">Stainless</div></div>
<div class="speccell"><div class="speclabel">Warranty</div><div class="specvalue">2 Years</div></div>
</div>
<div class="seclabel">Current Series</div>
<div class="grid">
<div class="card"><div class="badge">Series</div><div class="thumb"></div><div class="pname">Bianca V3</div><div class="pprice">$2,395.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Mara X V2</div><div class="pprice">$1,545.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Anna PL</div><div class="pprice">$895.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">PL64 Grinder</div><div class="pprice">$449.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #242428; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #242428; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #979799; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #242428; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #242428; color: #f5f5f5;
border: 1px solid #454549; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #979799; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2c2e48; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f6f3; color:#000000; box-sizing:border-box;
font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:24px; font-size:16px; font-weight:600; color:#716f6d; }
.btn { background:#242428; color:#fff; border:none; border-radius:9999px; height:40px; padding:0 22px; font-size:16px; font-weight:400; }
.hero { text-align:center; padding:20px 40px 20px; }
.hero h1 { font-size:44px; font-weight:600; line-height:1.35; letter-spacing:-.5px; margin:0 0 10px; }
.hero p { font-size:18px; color:#716f6d; margin:0 0 18px; line-height:1.4; }
.widget-stage { display:flex; justify-content:center; padding:6px 40px 20px; }
.phone { width:300px; height:220px; background:#3a3530; border-radius:35px; padding:16px; position:relative; }
.chatbox { background:#fff; border-radius:16px; height:100%; padding:14px; display:flex; flex-direction:column; gap:8px; }
.bubble { max-width:70%; border-radius:12px; padding:8px 12px; font-size:12px; }
.bubble.them { background:#f0efec; align-self:flex-start; color:#000; }
.bubble.me { background:#242428; align-self:flex-end; color:#fff; }
.fab { position:absolute; bottom:-14px; right:6px; width:52px; height:52px; border-radius:50%; background:#242428;
display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; }
.tabs { display:flex; gap:10px; justify-content:center; padding:0 40px 14px; }
.tab { border-radius:6px; padding:8px 16px; font-size:16px; font-weight:600; color:#716f6d; }
.tab.on { color:#000; background:#fff; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 40px 24px; }
.card { background:#fff; border:1px solid #e4e4e5; border-radius:35px; padding:20px; }
.card h3 { font-size:15px; font-weight:700; margin:0 0 6px; }
.card p { font-size:13px; color:#716f6d; margin:0; line-height:1.5; }
</style></head>
<body>
<nav>
<p class="brand">Channel Talk</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span></div>
<button class="btn">Start for Free</button>
</nav>
<section class="hero">
<h1>Every conversation with your customers,<br>in one channel</h1>
<p>From support to marketing to AI auto-response — Channel Talk is all you need.</p>
</section>
<section class="widget-stage">
<div class="phone">
<div class="chatbox">
<div class="bubble them">Hello! How can I help you today? 😊</div>
<div class="bubble me">I'd like to track my shipment</div>
<div class="bubble them">Share your order number and I'll check right away.</div>
</div>
<div class="fab">💬</div>
</div>
</section>
<section class="tabs">
<span class="tab on">Support</span><span class="tab">Marketing</span><span class="tab">AI Chatbot</span>
</section>
<section class="cards">
<div class="card"><h3>Live Support</h3><p>Respond to customer inquiries instantly while your whole team collaborates.</p></div>
<div class="card"><h3>Personalized Marketing</h3><p>Send messages at exactly the right time, based on customer data.</p></div>
<div class="card"><h3>AI Auto-Response</h3><p>AI handles repetitive questions first, reducing your team's workload.</p></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfbfd; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfbfd; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7a7a7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fbfbfd; color: #121212;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fbfbfd; color: #111111;
border: 1px solid #d6d6d7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6d6d7; color: #121212;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FBFBFD; color:#1A1A1F; box-sizing:border-box;
font-family:'Poppins', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; width:960px; height:640px; }
.main { flex:1; padding:26px 30px 20px; overflow:hidden; }
.greet { font-size:26px; font-weight:700; letter-spacing:-0.3pt; }
.greetsub { font-size:13px; color:#6A6A70; margin-top:2px; margin-bottom:16px; }
.lesson { position:relative; border-radius:20px; padding:20px 22px; overflow:hidden;
background: linear-gradient(135deg, #2A5DF6, #1FC29B); box-shadow: rgba(42,93,246,0.22) 0 10px 26px; }
.lesson::after { content:''; position:absolute; top:-40px; right:-40px; width:130px; height:130px; border-radius:50%;
background: rgba(255,255,255,0.10); }
.eyebrow { position:relative; font-size:11px; font-weight:700; letter-spacing:1pt; color:rgba(255,255,255,0.85); text-transform:uppercase; }
.lesson-title { position:relative; font-size:19px; font-weight:700; color:#fff; margin:6px 0 14px; max-width:80%; line-height:1.3; }
.progtrack { position:relative; height:6px; background:rgba(255,255,255,0.25); border-radius:3px; margin-bottom:8px; }
.progfill { height:100%; width:40%; background:#fff; border-radius:3px; }
.progline { position:relative; display:flex; justify-content:space-between; align-items:center; }
.proglabel { font-size:11px; font-weight:700; color:rgba(255,255,255,0.85); }
.whitepill { background:#fff; color:#2A5DF6; font-size:13px; font-weight:700; padding:9px 16px; border-radius:999px; }
.cards2 { display:flex; gap:14px; margin:16px 0; }
.datacard { flex:1; background:#fff; border:1px solid #E6E7EC; border-radius:18px; padding:16px; box-shadow: rgba(20,27,77,0.06) 0 6px 18px; }
.dc-head { display:flex; justify-content:space-between; font-size:14px; font-weight:700; }
.dc-range { font-size:11px; font-weight:600; color:#6A6A70; }
.dc-hero { font-size:24px; font-weight:800; margin-top:8px; }
.dc-delta { font-size:13px; font-weight:600; color:#1FC29B; margin-left:6px; }
.chartline { margin-top:10px; height:46px; position:relative; }
.chartline svg { width:100%; height:100%; display:block; }
.foodhead { display:flex; justify-content:space-between; font-size:14px; font-weight:700; margin-bottom:8px; }
.foodhead .kcal { font-size:12px; font-weight:600; color:#6A6A70; }
.ratiobar { height:10px; border-radius:5px; overflow:hidden; display:flex; margin-bottom:10px; }
.ratiobar div:nth-child(1) { width:55%; background:#34C759; }
.ratiobar div:nth-child(2) { width:30%; background:#FFC531; }
.ratiobar div:nth-child(3) { width:15%; background:#FF5A52; }
.frow { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #E6E7EC; }
.fdot { width:10px; height:10px; border-radius:50%; flex:none; }
.fname { font-size:14px; font-weight:600; flex:1; }
.fpill { font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; }
.fkcal { font-size:13px; font-weight:700; color:#6A6A70; width:44px; text-align:right; }
.side { width:300px; height:640px; background:#F2F3F7; border-left:1px solid #E6E7EC; padding:24px 20px; display:flex; flex-direction:column; gap:16px; }
.streak { display:flex; align-items:center; gap:6px; background:#fff; border-radius:999px; padding:8px 14px; width:fit-content; font-size:13px; font-weight:700; }
.coachcard { background:#fff; border-radius:18px; padding:14px; }
.coach-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.coach-avatar { width:36px; height:36px; border-radius:50%; background:#7B61FF; }
.bubble-in { background:#F2F0FF; border-radius:18px; padding:10px 14px; font-size:13px; margin-bottom:8px; max-width:85%; }
.bubble-out { background:#2A5DF6; color:#fff; border-radius:18px; padding:10px 14px; font-size:13px; margin-left:auto; max-width:75%; }
.ctabtn { margin-top:auto; background:#2A5DF6; color:#fff; border-radius:999px; height:50px; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; }
</style></head>
<body>
<div class="shell">
<div class="main">
<div class="greet">Good morning, Maya</div>
<div class="greetsub">Day 24 · You're building momentum</div>
<div class="lesson">
<div class="eyebrow">Today's Lesson · 4 Min</div>
<div class="lesson-title">Noom (iOS): Why Willpower Is a Myth</div>
<div class="progtrack"><div class="progfill"></div></div>
<div class="progline"><span class="proglabel">2 of 5</span><span class="whitepill">Continue lesson →</span></div>
</div>
<div class="cards2">
<div class="datacard">
<div class="dc-head"><span>Weight</span><span class="dc-range">Last 30 days</span></div>
<div style="display:flex; align-items:baseline;"><span class="dc-hero">164.2 lb</span><span class="dc-delta">▼ 6.8 lb</span></div>
<div class="chartline">
<svg viewBox="0 0 220 46" preserveAspectRatio="none">
<path d="M0,30 C40,26 60,10 100,16 C140,22 160,4 220,8" fill="none" stroke="#2A5DF6" stroke-width="2.5"/>
<path d="M0,20 L220,20" stroke="#1FC29B" stroke-width="1.5" stroke-dasharray="4 4"/>
</svg>
</div>
</div>
<div class="datacard">
<div class="dc-head"><span>Goal</span><span class="dc-range">Weekly</span></div>
<div class="dc-hero" style="font-size:20px;">72%</div>
<div style="font-size:12px; color:#6A6A70; margin-top:6px;">5 of 7 days logged</div>
</div>
</div>
<div class="foodhead"><span>Today's food</span><span class="kcal">1,240 / 1,500 kcal</span></div>
<div class="ratiobar"><div></div><div></div><div></div></div>
<div class="frow">
<span class="fdot" style="background:#34C759"></span>
<span class="fname">Grilled Chicken Salad</span>
<span class="fpill" style="color:#34C759; background:rgba(52,199,89,0.16)">Green</span>
<span class="fkcal">320</span>
</div>
<div class="frow">
<span class="fdot" style="background:#FFC531"></span>
<span class="fname">Whole Grain Toast</span>
<span class="fpill" style="color:#FFC531; background:rgba(255,197,49,0.16)">Yellow</span>
<span class="fkcal">180</span>
</div>
<div class="frow">
<span class="fdot" style="background:#FF5A52"></span>
<span class="fname">Chocolate Croissant</span>
<span class="fpill" style="color:#FF5A52; background:rgba(255,90,82,0.16)">Red</span>
<span class="fkcal">410</span>
</div>
</div>
<div class="side">
<div class="streak"><span>🔥</span>Day 24</div>
<div class="coachcard">
<div class="coach-head"><div class="coach-avatar"></div><span style="font-size:13px; font-weight:700;">Coach Sam</span></div>
<div class="bubble-in">You're on a great streak! How did today's lesson land?</div>
<div class="bubble-out">Honestly it clicked — willpower isn't the whole story.</div>
</div>
<div class="ctabtn">Log Food</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.25px; background: #eeafaf; color: #222222;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.25px; background: #eeeeee; color: #222222;
border: 1px solid #eeafaf; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; background: #eeeeee; color: #222222;
border: 1px solid #bbbbbb; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #eeafaf; color: #222222;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,system-ui,'Helvetica Neue',sans-serif; background:#eeeeee; color:#222222; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dddddd;}
.logo{font-size:18px;font-weight:600;text-transform:uppercase;letter-spacing:1px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;}
.navlinks .a{color:#eeafaf;}
.navlinks .i{color:#666666;}
.hero{height:240px;background:#eeeeee;display:flex;align-items:center;justify-content:space-between;padding:0 40px;position:relative;}
.herotext{max-width:400px;}
.herotext h1{font-size:32px;font-weight:700;letter-spacing:-.4px;margin:0 0 12px;}
.herotext p{font-size:14px;color:#333333;margin:0 0 16px;}
.hbtn{display:inline-block;background:#eeafaf;color:#222222;font-size:14px;font-weight:600;letter-spacing:.25px;padding:10px 20px;}
.deck{width:230px;height:150px;background:linear-gradient(150deg,#333333,#111111);position:relative;}
.deck:after{content:'';position:absolute;left:20px;top:20px;width:70px;height:70px;border-radius:9999px;background:#1a1a1a;border:6px solid #eeafaf;}
.deck:before{content:'';position:absolute;right:20px;top:20px;width:34px;height:110px;background:#222222;}
.catstrip{display:flex;gap:0;padding:8px 40px;border-bottom:1px solid #dddddd;}
.ctab{font-size:14px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:#666666;margin-right:24px;padding-bottom:8px;}
.ctab.a{color:#222222;border-bottom:2px solid #eeafaf;}
.sec{padding:16px 40px 0;}
.grid{display:flex;gap:14px;}
.card{width:196px;background:#fff;border:1px solid #dddddd;padding:14px;}
.thumb{aspect-ratio:1;height:100px;background:#f5f5f5;position:relative;margin-bottom:8px;}
.badge{position:absolute;top:6px;left:6px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;color:#222222;background:#eeafaf;}
.badge.sale{background:#222222;color:#eeeeee;}
.ptitle{font-size:16px;font-weight:500;}
.pprice{font-size:18px;font-weight:600;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:0;}
</style>
<div class="wrap">
<div class="nav"><div class="logo">Numark</div><div class="navlinks"><span class="a">Controllers</span><span class="i">Mixers</span><span class="i">Turntables</span><span class="i">Software</span></div></div>
<div class="hero"><div class="herotext"><h1>Built for the booth.</h1><p>Professional DJ hardware engineered for working DJs who care about the numbers.</p><div class="hbtn">Shop Controllers</div></div><div class="deck"></div></div>
<div class="catstrip"><span class="ctab a">Controllers</span><span class="ctab">Mixers</span><span class="ctab">Turntables</span><span class="ctab">Accessories</span></div>
<div class="sec">
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">New</div></div><div class="ptitle">Mixstream Pro Go</div><div class="pprice">$599</div></div>
<div class="card"><div class="thumb"><div class="badge sale">Sale</div></div><div class="ptitle">Party Mix II</div><div class="pprice">$99</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">NS7III Motorized Deck</div><div class="pprice">$899</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Scratch 2-Channel Mixer</div><div class="pprice">$249</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #242424; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #242424; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #979797; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #242424; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #242424; color: #f5f5f5;
border: 1px solid #454545; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #979797; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #474747; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#242424; box-sizing:border-box;
font-family:"Pretendard Variable", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; padding:0 32px; }
.brand { font-size:15px; font-weight:700; color:#242424; margin:0; }
.navlinks { display:flex; gap:20px; margin-left:28px; }
.navlinks span { font-size:13px; color:#6f6f6f; }
.util-btn { margin-left:auto; background:#333333; color:#ffffff; border-radius:4px; height:32px; padding:0 12px;
display:flex; align-items:center; font-size:12px; }
.hero { position:relative; margin:0 32px; height:260px; border-radius:20px; overflow:hidden;
background:linear-gradient(135deg,#3a3a3a,#1a1a1a); }
.hero-caption { position:absolute; left:24px; bottom:50px; color:#ffffff; }
.hero-caption .k { font-size:12px; opacity:0.75; }
.hero-caption h1 { font-size:24px; font-weight:700; margin:4px 0 0; }
.play { position:absolute; left:24px; bottom:14px; width:32px; height:32px; border-radius:100px;
background:rgba(0,0,0,0.3); }
.play::before { content:'▶'; color:#ffffff; font-size:11px; position:absolute; left:11px; top:8px; }
.pagi { position:absolute; right:24px; bottom:14px; height:32px; border-radius:100px; background:rgba(0,0,0,0.3);
padding:4px 10px; color:#ffffff; font-size:12px; display:flex; align-items:center; }
.row-title { font-size:14px; font-weight:600; color:#242424; padding:16px 32px 8px; }
.cards { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; padding:0 32px 20px; }
.book { background:#f7f7f7; border-radius:16px; padding:16px 12px 12px; display:flex; flex-direction:column; gap:8px; }
.cover { width:100%; aspect-ratio:3/4; border-radius:8px; }
.cover.a{background:linear-gradient(150deg,#d8d8d8,#a8a8a8);} .cover.b{background:linear-gradient(150deg,#e6ded0,#bfb29a);}
.cover.c{background:linear-gradient(150deg,#d9e2e6,#9fb2ba);} .cover.d{background:linear-gradient(150deg,#e6d6d6,#b99a9a);}
.cover.e{background:linear-gradient(150deg,#dde6d6,#a9bf9a);}
.book span { font-size:12px; color:#242424; line-height:1.4; }
</style></head>
<body>
<nav>
<p class="brand">Millie</p>
<div class="navlinks"><span>Recommend</span><span>Category</span><span>Audio</span><span>Web Novel</span></div>
<div class="util-btn">Login</div>
</nav>
<div class="hero">
<div class="hero-caption"><div class="k">Today's Pick</div><h1>An ordinary day, a good book</h1></div>
<div class="play"></div>
<div class="pagi">1 / 5</div>
</div>
<div class="row-title">Recommended for you</div>
<div class="cards">
<div class="book"><div class="cover a"></div><span>Notes on a Quiet Morning</span></div>
<div class="book"><div class="cover b"></div><span>The Long Way Home</span></div>
<div class="book"><div class="cover c"></div><span>Small Rooms, Big Ideas</span></div>
<div class="book"><div class="cover d"></div><span>A Season Without Rain</span></div>
<div class="book"><div class="cover e"></div><span>Letters Never Sent</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1f2937;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1f2937;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.5; margin: 0; color: #1f2937; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #808285; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #04a7e9; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #04a7e9;
border: 1px solid #04a7e9; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1f2937;
border: 1px solid #d3d3d3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808285; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; letter-spacing: 0.4px; background: #f7f7f7; color: #808285;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f7f2; font-family:'Open Sans',sans-serif; color:#444444; }
*{box-sizing:border-box;}
.promo{height:32px;background:#063255;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.nav{height:60px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #ededed;}
.logo{font-size:19px;font-weight:700;color:#063255;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;color:#1f2937;}
.hero{height:210px;display:flex;align-items:center;padding:0 32px;gap:26px;}
.herotext{width:46%;}
.herotext h1{font-size:28px;font-weight:700;margin:0 0 10px;line-height:1.2;color:#063255;}
.herotext p{font-size:14px;margin:0 0 14px;max-width:320px;}
.cta{display:inline-block;background:#04a7e9;color:#fff;font-size:16px;font-weight:600;padding:14px 28px;border-radius:8px;}
.deskart{flex:1;height:140px;position:relative;}
.desktop{position:absolute;left:10%;top:20px;width:80%;height:14px;background:#08406f;border-radius:2px;}
.leg{position:absolute;top:34px;width:8px;height:80px;background:#90a4ae;}
.leg1{left:20%;} .leg2{right:20%;}
.badge-blue{position:absolute;right:12%;top:0;background:#04a7e9;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-radius:4px;padding:3px 8px;}
.spec{display:flex;gap:1px;background:#d3d3d3;margin:0 32px;}
.speccell{flex:1;background:#f7f6f4;text-align:center;padding:12px;}
.speclabel{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#808285;}
.specvalue{font-size:18px;font-weight:700;color:#08406f;margin-top:4px;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:206px;background:#f7f6f4;border-radius:8px;padding:14px;}
.thumb{height:96px;border-radius:4px;margin-bottom:8px;}
.ptitle{font-size:16px;font-weight:600;color:#1f2937;}
.pprice{font-size:22px;font-weight:700;color:#041f33;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#041f33;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#cfd8dc;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="promo">Free Shipping · 15-Year Warranty on Every Frame</div>
<div class="nav">
<div class="logo">Uplift Desk</div>
<div class="navlinks"><div>Standing Desks</div><div>Chairs</div><div>Accessories</div><div>Build Your Desk</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Engineered to move with you, all day.</h1>
<p>Configure height, finish, and top material for a desk built to your exact workflow.</p>
<div class="cta">Start Configuring</div>
</div>
<div class="deskart">
<div class="badge-blue">Best Seller</div>
<div class="desktop"></div>
<div class="leg leg1"></div>
<div class="leg leg2"></div>
</div>
</div>
<div class="spec">
<div class="speccell"><div class="speclabel">Height Range</div><div class="specvalue">25.3–50.9"</div></div>
<div class="speccell"><div class="speclabel">Lift Capacity</div><div class="specvalue">355 lbs</div></div>
<div class="speccell"><div class="speclabel">Motors</div><div class="specvalue">Dual</div></div>
<div class="speccell"><div class="speclabel">Warranty</div><div class="specvalue">15 Years</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#04a7e9,#08406f)"></div><div class="ptitle">V2 Standing Desk Frame</div><div class="pprice">$439.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#08406f,#041f33)"></div><div class="ptitle">Solid Bamboo Top</div><div class="pprice">$249.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ed6325,#08406f)"></div><div class="ptitle">Vari Task Chair</div><div class="pprice">$295.00</div></div>
</div>
<div class="footer"><span>© Standing Desk Company</span><span>Configurator · Warranty · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a2e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a2e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #1a1a2e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #718096; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #6aaa64; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #1a1a2e;
border: 1px solid #6aaa64; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #2d3748;
border: 1px solid #c6c6cb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #718096; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #f7f7f7; color: #718096;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#0d1117; font-family:-apple-system,BlinkMacSystemFont,Roboto,'Segoe UI',system-ui,sans-serif; color:#e2e8f0; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#0d1117;border-bottom:1px solid #16213e;}
.logo{font-size:20px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:15px;font-weight:500;color:#fff;}
.hero{height:220px;background:#16213e;display:flex;align-items:center;padding:0 40px;}
.herotext{width:420px;}
h1{font-size:32px;font-weight:700;letter-spacing:-0.5px;color:#fff;margin:0 0 12px;}
.sub{font-size:16px;color:#a0aec0;margin:0 0 20px;max-width:340px;}
.cta{display:inline-block;background:#6aaa64;color:#fff;font-size:16px;font-weight:600;padding:12px 24px;border-radius:8px;}
.wgrid{display:grid;grid-template-columns:repeat(5,32px);gap:5px;margin-left:80px;}
.wcell{width:32px;height:32px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:14px;}
.sec{padding:22px 40px 0;}
.sectitle{font-size:20px;font-weight:600;margin:0 0 14px;color:#fff;}
.grid{display:flex;gap:16px;}
.card{width:210px;background:#1a1a2e;border:1px solid #16213e;border-radius:12px;padding:16px;}
.thumb{height:80px;border-radius:8px;margin-bottom:10px;}
.badgerow{display:flex;gap:6px;margin-bottom:8px;}
.cbadge{background:#0d1117;color:#718096;font-size:11px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:4px 12px;border-radius:9999px;}
.dbadge{font-size:11px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:2px 8px;border-radius:4px;color:#fff;}
.pname{font-size:16px;font-weight:600;margin:8px 0 0;color:#fff;}
</style>
<div class="nav">
<div class="logo">Puzz</div>
<div class="navlinks"><span>Crosswords</span><span>Word Search</span><span>Sudoku</span><span>Archive</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>47,000+ Puzzles. Zero Fluff.</h1>
<p class="sub">Browser-based crosswords, word search, and sudoku since 1999. No app required.</p>
<div class="cta">Play Now</div>
</div>
<div class="wgrid">
<div class="wcell" style="background:#6aaa64">P</div><div class="wcell" style="background:#b59f3b">U</div><div class="wcell" style="background:#3a3a3c">Z</div><div class="wcell" style="background:#6aaa64">Z</div><div class="wcell" style="background:#3a3a3c">L</div>
</div>
</div>
<div class="sec">
<div class="sectitle">Featured Puzzles</div>
<div class="grid">
<div class="card"><div class="badgerow"><span class="cbadge">Crossword</span><span class="dbadge" style="background:#6aaa64">Easy</span></div><div class="thumb" style="background:linear-gradient(135deg,#6aaa64,#0f3460)"></div><div class="pname">Sunday Classic #4821</div></div>
<div class="card"><div class="badgerow"><span class="cbadge">Word Search</span><span class="dbadge" style="background:#b59f3b">Medium</span></div><div class="thumb" style="background:linear-gradient(135deg,#b59f3b,#0f3460)"></div><div class="pname">Animal Kingdom Search</div></div>
<div class="card"><div class="badgerow"><span class="cbadge">Sudoku</span><span class="dbadge" style="background:#e74c3c">Hard</span></div><div class="thumb" style="background:linear-gradient(135deg,#8b5cf6,#0f3460)"></div><div class="pname">Diagonal Challenge #92</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #11aac1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #11aac1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #117e96; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #11aac1; color: #000000;
border: 1px solid #117e96; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #11aac1; color: #f5f5f5;
border: 1px solid #35b6c9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #11a3ba; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f8f8; color:#464646; box-sizing:border-box;
font-family:"Helvetica Neue", Helvetica, Arial, "PingFang TC", "Microsoft JhengHei", sans-serif; }
* { box-sizing:border-box; }
.topnav { height:44px; background:#ffffff; border-bottom:1px solid #e5e7eb; display:flex;
align-items:center; padding:0 20px; gap:8px; }
.brand { font-size:16px; font-weight:700; color:#2d2d2d; margin-right:14px; }
.tab { font-size:14px; font-weight:400; padding:8px 12px; border-radius:4px; color:#464646; }
.tab.active { background:#11aac1; color:#ffffff; font-weight:700; }
.navspacer { flex:1; }
.searchbar { width:180px; height:26px; border:1px solid #e5e7eb; border-radius:4px; font-size:12px;
color:#8c8c8c; display:flex; align-items:center; padding:0 10px; }
.authlink { font-size:13px; color:#117e96; font-weight:700; margin-left:14px; }
.body { display:flex; padding:14px 20px; gap:14px; }
.col-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; }
.col-side { width:220px; flex:0 0 220px; display:flex; flex-direction:column; gap:12px; }
.card { background:#ffffff; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,0.08); padding:14px 16px; }
.card h3 { font-size:15px; font-weight:700; color:#2d2d2d; margin:0 0 10px; display:flex;
align-items:center; justify-content:space-between; }
.card h3 .more { font-size:12px; font-weight:400; color:#117e96; }
.thread { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid #f3f3f3; font-size:13px; }
.thread:last-child { border-bottom:none; }
.thread .badge { background:#e60012; color:#ffffff; border-radius:2px; font-size:10px; font-weight:700;
padding:2px 5px; flex:0 0 auto; }
.thread .tt { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#464646; }
.thread .cnt { color:#8c8c8c; font-size:12px; flex:0 0 auto; }
.gamegrid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.gametile { border-radius:4px; height:64px; display:flex; align-items:flex-end; padding:6px 8px;
color:#ffffff; font-size:11px; font-weight:700; }
.g1 { background:linear-gradient(135deg,#11aac1,#117e96); }
.g2 { background:linear-gradient(135deg,#8c8c8c,#464646); }
.g3 { background:linear-gradient(135deg,#e60012,#a6000d); }
.g4 { background:linear-gradient(135deg,#009cad,#2d2d2d); }
.rankrow { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:12px; }
.rankrow .num { width:16px; color:#8c8c8c; font-weight:700; }
.rankrow .num.top { color:#e60012; }
.rankrow .nm { flex:1; color:#464646; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tag-mini { background:#f3f3f3; color:#464646; border-radius:4px; font-size:11px; padding:3px 7px; margin-right:6px; }
</style></head>
<body>
<div class="topnav">
<span class="brand">Bahamut</span>
<span class="tab active">Home</span>
<span class="tab">GNN News</span>
<span class="tab">Forums</span>
<span class="tab">Games</span>
<div class="navspacer"></div>
<div class="searchbar">Search boards</div>
<span class="authlink">Login</span>
<span class="authlink">Register</span>
</div>
<div class="body">
<div class="col-main">
<div class="card">
<h3>GNN News <span class="more">More ›</span></h3>
<div class="thread"><span class="badge">HOT</span><span class="tt">New patch brings full controller remapping and 4K UI scaling</span><span class="cnt">2.1k</span></div>
<div class="thread"><span class="tt">Interview: the localization team behind this season's biggest RPG</span><span class="cnt">884</span></div>
<div class="thread"><span class="badge">HOT</span><span class="tt">Ranked season 12 begins next week with new map rotation</span><span class="cnt">1.6k</span></div>
<div class="thread"><span class="tt">Indie spotlight: five community favorites climbing the charts</span><span class="cnt">412</span></div>
<div class="thread"><span class="tt">Anime adaptation announced for long-running fantasy series</span><span class="cnt">905</span></div>
</div>
<div class="card">
<h3>Game Boards <span class="more">More ›</span></h3>
<div class="gamegrid">
<div class="gametile g1">Star Voyage</div>
<div class="gametile g2">Iron Frontline</div>
<div class="gametile g3">Crimson Order</div>
<div class="gametile g4">Nightfall Tactics</div>
</div>
</div>
</div>
<div class="col-side">
<div class="card">
<h3>Weekly Ranking</h3>
<div class="rankrow"><span class="num top">1</span><span class="nm">Star Voyage</span></div>
<div class="rankrow"><span class="num top">2</span><span class="nm">Crimson Order</span></div>
<div class="rankrow"><span class="num">3</span><span class="nm">Iron Frontline</span></div>
<div class="rankrow"><span class="num">4</span><span class="nm">Nightfall Tactics</span></div>
<div class="rankrow"><span class="num">5</span><span class="nm">Ember Rally</span></div>
</div>
<div class="card">
<h3>Categories</h3>
<span class="tag-mini">RPG</span><span class="tag-mini">Strategy</span><span class="tag-mini">ACG</span>
<span class="tag-mini">Mobile</span><span class="tag-mini">Anime</span><span class="tag-mini">Esports</span>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfcfc; color: #222255;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfcfc; color: #222255;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #222255; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #7777cc; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #0000ff; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #fcfcfc; color: #222255;
border: 1px solid #0000ff; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fcfcfc; color: #222255;
border: 1px solid #c6c6d2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7777cc; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #dd1144; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fcfcfc; font-family:'Helvetica Neue',Arial,sans-serif; color:#222255; }
*{box-sizing:border-box; border-radius:0 !important;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:2px solid #0000ff;}
.logo{font-size:19px;font-weight:700;color:#0000ff;}
.navlinks{display:flex;gap:18px;font-size:12px;font-weight:700;text-transform:uppercase;color:#222255;}
.searchbar{width:200px;height:28px;border:1px solid #e1e1e8;display:flex;align-items:center;padding:0 10px;font-size:11px;color:#888;font-family:Consolas,Monaco,monospace;}
.sec{padding:16px 30px 0;}
.sectitle{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;}
.tagline{font-size:20px;font-weight:700;color:#222255;margin:14px 30px 4px;}
.subtag{font-size:12px;color:#666;margin:0 30px 14px;font-family:Consolas,Monaco,monospace;}
.grid{display:flex;gap:1px;background:#e1e1e8;flex-wrap:wrap;}
.card{width:170px;background:#fff;padding:8px;}
.thumb{height:130px;background:#222255;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#dd1144;color:#fff;font-family:Consolas,Monaco,monospace;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 6px;}
.pname{font-size:12px;font-weight:700;margin:8px 0 2px;}
.pprice{font-family:Consolas,Monaco,monospace;font-size:12px;color:#0000ff;}
.artist{font-size:10px;color:#888;margin-bottom:4px;}
</style>
<div class="nav">
<div class="logo">Lighthouse Records</div>
<div class="navlinks"><span>New Arrivals</span><span>Used Vinyl</span><span>Sell</span></div>
<div class="searchbar">search catalog...</div>
</div>
<div class="tagline">This week's crate.</div>
<div class="subtag">421 records in stock // updated daily</div>
<div class="sec">
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">Sold Out</div></div><div class="artist">Various Artists</div><div class="pname">Basement Sessions LP</div><div class="pprice">$24.00</div></div>
<div class="card"><div class="thumb"></div><div class="artist">Field Recordings Co.</div><div class="pname">Static & Bone</div><div class="pprice">$18.00</div></div>
<div class="card"><div class="thumb"><div class="badge">Sale</div></div><div class="artist">Northbound</div><div class="pname">Low Tide 7"</div><div class="pprice">$9.00</div></div>
<div class="card"><div class="thumb"></div><div class="artist">Glass Radio</div><div class="pname">Analog Dreams LP</div><div class="pprice">$28.00</div></div>
<div class="card"><div class="thumb"></div><div class="artist">The Nightliners</div><div class="pname">Coastal EP</div><div class="pprice">$14.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 0.08em; background: #121212; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 0.08em; background: #ffffff; color: #121212;
border: 1px solid #121212; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; background: #121212; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#3d3d3d; font-family:Georgia,'Times New Roman',serif; }
*{box-sizing:border-box;}
.annbar{height:28px;background:#121212;color:#ffffff;display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dedede;}
.logo{font-size:19px;font-weight:700;letter-spacing:0.5px;}
.navlinks{display:flex;gap:24px;font-family:Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#3d3d3d;}
.hero{height:216px;display:flex;padding:0 36px;align-items:center;border-bottom:1px solid #dedede;}
.herotext{width:52%;}
.herotext h1{font-size:32px;font-weight:400;margin:0 0 12px;line-height:1.3;color:#121212;}
.herotext p{font-family:Arial,sans-serif;font-size:13px;color:#767676;margin:0 0 18px;max-width:320px;line-height:1.6;}
.cta{display:inline-block;background:#121212;color:#fff;font-family:Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:13px 26px;width:fit-content;}
.card-visual{width:44%;height:150px;position:relative;}
.paper{position:absolute;width:130px;height:150px;background:#f6f6f6;border:1px solid #dedede;left:40px;top:0;}
.paper2{position:absolute;width:130px;height:150px;background:#ffffff;border:1px solid #909090;left:80px;top:14px;}
.seclabel{font-family:Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#767676;padding:18px 36px 12px;}
.grid{display:flex;gap:14px;padding:0 36px;}
.card{width:150px;border:1px solid #dedede;padding:10px;}
.thumb{height:96px;margin-bottom:8px;background:#efefef;}
.ptitle{font-size:13px;font-weight:400;color:#121212;line-height:1.3;}
.pprice{font-family:Arial,sans-serif;font-size:12px;color:#3d3d3d;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#121212;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-family:Arial,sans-serif;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="annbar">Complimentary Engraving On Orders Over $150</div>
<div class="nav">
<div class="logo">Terrapin Stationers</div>
<div class="navlinks"><span>Correspondence</span><span>Desk</span><span>Wedding</span><span>Custom Print</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Ink on paper, and nothing else.</h1>
<p>Letterpress correspondence cards and engraved stationery from a print house four generations deep.</p>
<div class="cta">Shop Correspondence</div>
</div>
<div class="card-visual"><div class="paper"></div><div class="paper2"></div></div>
</div>
<div class="seclabel">Correspondence Cards</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(180deg,#f6f6f6,#dedede)"></div><div class="ptitle">Engraved Card Set</div><div class="pprice">$95.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(180deg,#ffffff,#efefef)"></div><div class="ptitle">Letterpress Notecards</div><div class="pprice">$62.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(180deg,#efefef,#909090)"></div><div class="ptitle">Personal Monogram Stamp</div><div class="pprice">$110.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(180deg,#dedede,#f6f6f6)"></div><div class="ptitle">Wedding Invitation Suite</div><div class="pprice">$240.00</div></div>
</div>
<div class="footer"><span>© Since 1892</span><span>A Division of GHP Media, Inc.</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #dedede;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #dedede;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -0.25px; margin: 0; color: #dedede; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 0.08em; background: #dedede; color: #121212;
border: none; border-radius: 2px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 0.08em; background: transparent; color: #dedede;
border: 1px solid #dedede; border-radius: 2px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #191919; color: #dedede;
border: 1px solid #454545; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; background: #1f1f1f; color: #777777;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#dedede; box-sizing:border-box;
font-family:'Inter', system-ui, -apple-system, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:monospace; }
nav { height:64px; background:#171717; border-bottom:1px solid #1e1e1e; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.brand { font-size:16px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:500; letter-spacing:0.04em; color:#dedede; }
.navlinks span:first-child { color:#ffffff; border-bottom:2px solid #dedede; padding-bottom:4px; }
.search { width:160px; height:36px; background:#1f1f1f; border-radius:4px; display:flex; align-items:center; padding:0 12px; font-size:12px; color:#777777; }
.colhead { border-bottom:1px solid #2c2c2c; padding:16px 32px 14px; }
.colhead .overline { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#777777; }
.colhead h1 { font-size:26px; font-weight:700; margin:6px 0 0; letter-spacing:-0.4px; }
.filters { display:flex; gap:8px; padding:12px 32px; }
.pill { background:#1f1f1f; border:1px solid #2c2c2c; color:#777777; font-size:11px; padding:6px 14px; border-radius:999px; }
.pill.active { background:#dedede; color:#121212; border:none; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:8px 32px 18px; }
.card { background:#191919; border:1px solid #1e1e1e; border-radius:2px; padding:10px; }
.card .imgbox { aspect-ratio:1/1; height:66px; background:#121212; margin-bottom:8px; position:relative; }
.card .imgbox::before { content:''; position:absolute; inset:14px; border:1px solid #3a3a3a; }
.badge-new { position:absolute; top:6px; left:6px; background:#dedede; color:#121212; font-size:9px; font-weight:700;
text-transform:uppercase; letter-spacing:0.08em; padding:2px 6px; }
.series { font-size:10px; color:#777777; text-transform:uppercase; letter-spacing:0.04em; }
.card h3 { font-size:13px; font-weight:600; margin:4px 0 2px; color:#dedede; }
.card .sku { font-size:9px; color:#555555; }
.card .price { font-size:13px; font-weight:600; color:#dedede; margin-top:4px; }
footer { border-top:1px solid #2c2c2c; background:#171717; padding:12px 32px; display:flex;
justify-content:space-between; align-items:center; font-size:11px; color:#777777; }
</style></head>
<body>
<nav>
<p class="brand">Boss Fight Studio</p>
<div class="navlinks"><span>Vitruvian HACKS</span><span>1:12 Series</span><span>Parts & Accessories</span></div>
<div class="search">Search figures...</div>
</nav>
<div class="colhead">
<span class="overline">Collection</span>
<h1>Vitruvian H.A.C.K.S. — Wave 12</h1>
</div>
<div class="filters">
<span class="pill active">All</span><span class="pill">Faction: Xenomorph</span><span class="pill">Scale: 1/12</span><span class="pill">In Stock</span>
</div>
<section class="grid">
<div class="card"><div class="imgbox"><span class="badge-new">New</span></div><div class="series">Wave 12</div><h3>Warlord Prime</h3><div class="sku mono">SKU BF-1204</div><div class="price">$34.99</div></div>
<div class="card"><div class="imgbox"></div><div class="series">Wave 12</div><h3>Battlefield Medic</h3><div class="sku mono">SKU BF-1205</div><div class="price">$34.99</div></div>
<div class="card"><div class="imgbox"></div><div class="series">Wave 11</div><h3>Skeleton Warriors</h3><div class="sku mono">SKU BF-1188</div><div class="price">$29.99</div></div>
<div class="card"><div class="imgbox"></div><div class="series">Accessory Pack</div><h3>Weapons Cache A</h3><div class="sku mono">SKU BF-0091</div><div class="price">$14.99</div></div>
</section>
<footer>
<span>© Boss Fight Studio</span>
<span>Highly Articulated Collectible Kit System</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffbed; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffbed; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7a74; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fffbed; color: #1a1a1a;
border: 1px solid #1a1a1a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fffbed; color: #111111;
border: 1px solid #d9d6ca; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7a74; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dad7cb; color: #1a1a1a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFBED; color:#1C1C1E; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #EDEAD8; }
.brand { font-size:15px; font-weight:700; margin:0; color:#1C1C1E; }
.navlinks { display:flex; gap:20px; font-size:12px; font-weight:600; color:#F09A38; }
.wrap { display:flex; height:584px; }
.sidebar { width:270px; padding:20px 0 0; border-right:1px solid #EDEAD8; }
h1.title { font-size:30px; font-weight:800; letter-spacing:-0.4px; margin:0 0 14px 20px; }
.folderrow { display:flex; align-items:center; gap:10px; height:40px; padding:0 20px; }
.folder { position:relative; width:22px; height:17px; }
.folder::before { content:''; position:absolute; inset:0; background:#F5D773; border:1px solid #F09A38; border-radius:2px 4px 4px 4px; }
.folder::after { content:''; position:absolute; left:0; top:-4px; width:11px; height:5px; background:#F5D773; border:1px solid #F09A38; border-bottom:none; border-radius:2px 4px 0 0; }
.fname { font-size:14px; flex:1; }
.fcount { font-size:13px; color:#8E8E93; }
.main { flex:1; padding:18px 26px 0; }
.tags { display:flex; gap:8px; margin-bottom:14px; }
.chip { height:26px; display:flex; align-items:center; padding:0 12px; background:#FFF1DD; border-radius:16px;
font-size:12px; font-weight:500; color:#F09A38; }
.chip.sel { background:#F09A38; color:#fff; }
.pinhead { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1.2px; color:#8E8E93; margin:6px 0 8px; }
.pinstrip { display:flex; gap:10px; margin-bottom:16px; }
.pincard { width:150px; height:88px; background:#FAF6E3; border-radius:10px; padding:10px 12px; position:relative; }
.pintitle { font-size:13.5px; font-weight:600; margin:0 0 4px; }
.pinprev { font-size:11px; color:#8E8E93; line-height:1.35; }
.pinglyph { position:absolute; top:8px; right:10px; width:8px; height:8px; background:#F09A38; border-radius:2px; transform:rotate(45deg); }
.noterow { display:flex; flex-direction:column; justify-content:center; height:64px; padding:0 4px;
border-bottom:1px solid #EDEAD8; position:relative; }
.rowtitle { font-size:14.5px; font-weight:600; }
.rowprev { font-size:12.5px; color:#8E8E93; margin-top:2px; }
.rowdate { position:absolute; right:4px; top:10px; font-size:11px; color:#8E8E93; }
.pin11 { position:absolute; left:-2px; top:12px; width:6px; height:6px; background:#F09A38; border-radius:1px; transform:rotate(45deg); }
.fab { position:absolute; right:32px; bottom:26px; width:52px; height:52px; border-radius:50%; background:#F09A38;
box-shadow:0 4px 12px rgba(240,154,56,0.30); display:flex; align-items:center; justify-content:center; }
.fab::before { content:'+'; color:#fff; font-size:26px; font-weight:400; line-height:1; }
</style></head>
<body>
<nav>
<p class="brand">Apple Notes (iOS)</p>
<div class="navlinks"><span>Edit</span><span>⋯</span></div>
</nav>
<div class="wrap">
<aside class="sidebar">
<h1 class="title">Folders</h1>
<div class="folderrow"><span class="folder"></span><span class="fname">Notes</span><span class="fcount">12</span></div>
<div class="folderrow"><span class="folder"></span><span class="fname">Recipes</span><span class="fcount">8</span></div>
<div class="folderrow"><span class="folder"></span><span class="fname">Travel</span><span class="fcount">5</span></div>
<div class="folderrow"><span class="folder"></span><span class="fname">Work</span><span class="fcount">21</span></div>
<div class="folderrow"><span class="folder"></span><span class="fname">Ideas</span><span class="fcount">3</span></div>
</aside>
<main class="main">
<div class="tags">
<span class="chip sel">#all</span>
<span class="chip">#recipes</span>
<span class="chip">#books</span>
<span class="chip">#ideas</span>
</div>
<p class="pinhead">Pinned</p>
<div class="pinstrip">
<div class="pincard"><span class="pinglyph"></span><p class="pintitle">Grocery list</p><p class="pinprev">Milk, eggs, butter, sourdough bread, spinach</p></div>
<div class="pincard"><span class="pinglyph"></span><p class="pintitle">Trip packing</p><p class="pinprev">Passport, charger, hiking boots, sunscreen</p></div>
<div class="pincard"><span class="pinglyph"></span><p class="pintitle">Book quotes</p><p class="pinprev">"The only way out is through" — collected lines</p></div>
</div>
<div class="noterow"><span class="pin11"></span><span class="rowtitle">Meeting notes — Q3 planning</span><span class="rowprev">Budget review, hiring plan, roadmap sync for next quarter</span><span class="rowdate">Yesterday</span></div>
<div class="noterow"><span class="rowtitle">Sourdough starter log</span><span class="rowprev">Day 6 — bubbly, doubled in 4hrs, ready to bake</span><span class="rowdate">May 12</span></div>
<div class="noterow"><span class="rowtitle">Weekend hike route</span><span class="rowprev">Trailhead at 8am, 6.2mi loop, bring extra water</span><span class="rowdate">May 10</span></div>
<div class="noterow"><span class="rowtitle">Gift ideas</span><span class="rowprev">Ceramic mug set, hardcover novel, film camera</span><span class="rowdate">May 6</span></div>
</main>
</div>
<div class="fab"></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #141414; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #141414; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #969595; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #039aff; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #141414; color: #039aff;
border: 1px solid #039aff; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #1e1e1e; color: #ffffff;
border: 1px solid #141414; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969595; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #d21625; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Poppins','Segoe UI',Roboto,sans-serif; background:#141414; color:#444444; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#121212;}
.logo{font-size:19px;font-weight:700;color:#fff;letter-spacing:0.3px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;color:#dedede;}
.navlinks .on{color:#039aff;border-bottom:2px solid #039aff;padding-bottom:20px;}
.hero{height:220px;display:flex;align-items:center;background:#141414;padding:0 32px;}
.herotext{width:420px;}
.herotext h1{font-family:'Prompt',Poppins,sans-serif;font-size:34px;font-weight:700;color:#fff;margin:0 0 10px;letter-spacing:-0.6px;line-height:1.15;}
.herotext p{font-size:14px;color:#dedede;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#039aff;color:#fff;font-size:15px;font-weight:600;letter-spacing:0.3px;padding:12px 24px;border-radius:8px;}
.mousewrap{width:260px;height:150px;margin-left:auto;position:relative;}
.mouse{position:absolute;left:80px;top:20px;width:90px;height:130px;border-radius:40px 40px 50px 50px;background:linear-gradient(160deg,#323232,#121212);box-shadow:0 0 30px rgba(3,154,255,0.35);}
.glow{position:absolute;left:110px;top:120px;width:30px;height:8px;border-radius:9999px;background:#039aff;}
.section{padding:18px 32px 0;}
.sectitle{font-size:16px;font-weight:600;color:#fff;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:150px;background:#1e1e1e;border-radius:12px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:9px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;border-radius:4px;padding:2px 8px;}
.thumb{aspect-ratio:1/1;border-radius:8px;margin-bottom:8px;}
.pname{font-size:14px;font-weight:500;color:#fff;}
.pprice{font-size:14px;color:#039aff;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#141414;color:#969595;font-size:12px;border-top:1px solid #323232;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Lamzu</div>
<div class="navlinks"><div class="on">Mice</div><div>Keyboards</div><div>Accessories</div><div>Sale</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Precision that reads like a laser sight.</h1>
<p>Ultralight gaming mice engineered for the frame that wins the match.</p>
<div class="cta">Shop Mice</div>
</div>
<div class="mousewrap"><div class="mouse"></div><div class="glow"></div></div>
</div>
<div class="section">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#039aff;color:#fff">New</span><div class="thumb" style="background:linear-gradient(135deg,#039aff,#121212)"></div><div class="pname">ATLANTIS Mini</div><div class="pprice">$59.99</div></div>
<div class="card"><span class="badge" style="background:#d21625;color:#fff">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#323232,#039aff)"></div><div class="pname">THORN</div><div class="pprice">$49.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#121212,#323232)"></div><div class="pname">MAYA X</div><div class="pprice">$44.99</div></div>
<div class="card"><span class="badge" style="background:#ffff00;color:#121212">-20%</span><div class="thumb" style="background:linear-gradient(135deg,#039aff,#323232)"></div><div class="pname">G5 Wireless</div><div class="pprice">$39.99</div></div>
</div>
</div>
<div class="footer"><span>© Lamzu</span><span>Warranty · Firmware</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ef7014; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ef7014; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4b50; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ef7014; color: #000000;
border: 1px solid #ff4b50; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ef7014; color: #f5f5f5;
border: 1px solid #f08538; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f26a1e; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing: border-box; }
.utility { height:28px; display:flex; justify-content:flex-end; align-items:center; gap:16px;
padding:0 24px; font-size:12px; font-weight:400; color:#666666; border-bottom:1px solid #d9d9d9; }
header { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; border-bottom:1px solid #d9d9d9; }
.brand { font-size:20px; font-weight:700; color:#333333; }
.brand span { color:#ef7014; }
.search-shell { flex:0 0 380px; height:36px; border:1px solid #d9d9d9; border-radius:2px;
display:flex; align-items:center; padding:0 15px; }
.search-shell .txt { font-size:14px; font-weight:400; color:#999999; }
.icons { display:flex; gap:20px; }
.icon-item { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px;
font-weight:400; color:#666666; }
.icon-item .dot { width:18px; height:18px; border-radius:50%; border:1.5px solid #666666; }
nav.tabs { height:36px; display:flex; align-items:center; gap:22px; padding:0 24px;
border-bottom:1px solid #d9d9d9; }
.tab { font-size:16px; font-weight:400; color:#666666; padding-bottom:2px; }
.tab.active { color:#333333; border-bottom:2px solid #ef7014; }
.grid-wrap { padding:16px 24px; }
.pgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.pcard { background:#ffffff; border-radius:12px; overflow:hidden; }
.photo { height:96px; position:relative; }
.g1 { background:linear-gradient(135deg,#f7c59f,#ef7014); }
.g2 { background:linear-gradient(135deg,#e8d5c4,#c99a6c); }
.g3 { background:linear-gradient(135deg,#f3d9ce,#d98a6b); }
.g4 { background:linear-gradient(135deg,#e0e6d9,#a3b18a); }
.rank { position:absolute; top:0; left:10px; background:#ef7014; color:#ffffff; font-size:16px;
font-weight:700; border-radius:0 0 6px 6px; padding:2px 10px; }
.pill { position:absolute; bottom:8px; left:8px; right:8px; background:#ef7014; color:#ffffff;
border-radius:100px; height:24px; font-size:11px; font-weight:700; display:flex; align-items:center;
justify-content:center; }
.pbody { padding:10px; }
.pbody .maker { font-size:11px; font-weight:400; color:#999999; margin:0 0 2px; }
.pbody .name { font-size:14px; font-weight:400; color:#333333; margin:0 0 6px; line-height:1.3; }
.price-row { display:flex; align-items:baseline; gap:6px; }
.sale { font-size:14px; font-weight:700; color:#ff4b50; }
.orig { font-size:11px; font-weight:400; color:#999999; text-decoration:line-through; }
.rating { font-size:11px; font-weight:400; color:#ffaf00; margin-top:4px; }
.outline-btn { margin-top:8px; display:inline-flex; align-items:center; justify-content:center;
height:26px; padding:0 10px; font-size:12px; font-weight:700; color:#ef7014;
border:1px solid #ef7014; border-radius:2px; }
</style></head>
<body>
<div class="utility"><span>Log in</span><span>Sign up</span><span>Help</span></div>
<header>
<span class="brand">idus (Backpackr)<span>.</span></span>
<div class="search-shell"><span class="txt">Looking for a maker or a work?</span></div>
<div class="icons">
<div class="icon-item"><div class="dot"></div>Wishlist</div>
<div class="icon-item"><div class="dot"></div>My Page</div>
<div class="icon-item"><div class="dot"></div>Cart</div>
</div>
</header>
<nav class="tabs">
<span class="tab active">Best</span>
<span class="tab">Gift Guide</span>
<span class="tab">Sale</span>
<span class="tab">Discover</span>
<span class="tab">Live</span>
<span class="tab">New Works</span>
<span class="tab">Community</span>
</nav>
<div class="grid-wrap">
<div class="pgrid">
<div class="pcard">
<div class="photo g1"><span class="rank">1</span><span class="pill">128 purchased recently</span></div>
<div class="pbody">
<p class="maker">Studio Haneul</p>
<p class="name">Hand-thrown ceramic mug</p>
<div class="price-row"><span class="orig">$32</span><span class="sale">$24</span></div>
<div class="rating">★★★★★ 4.9</div>
</div>
</div>
<div class="pcard">
<div class="photo g2"><span class="rank">2</span></div>
<div class="pbody">
<p class="maker">Maru Leather</p>
<p class="name">Full-grain card wallet</p>
<div class="price-row"><span class="sale">$41</span></div>
<div class="rating">★★★★★ 4.8</div>
</div>
</div>
<div class="pcard">
<div class="photo g3"><span class="rank">3</span></div>
<div class="pbody">
<p class="maker">Soft Ember Candles</p>
<p class="name">Soy wax candle, cedar</p>
<div class="price-row"><span class="orig">$19</span><span class="sale">$15</span></div>
<div class="rating">★★★★☆ 4.6</div>
</div>
</div>
<div class="pcard">
<div class="photo g4"></div>
<div class="pbody">
<p class="maker">Jieum Studio</p>
<p class="name">Linen table runner, natural</p>
<div class="price-row"><span class="sale">$28</span></div>
<span class="outline-btn">Follow</span>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffdea; color: #444444;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffdea; color: #444444;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fd5757; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #221155; color: #ffffff;
border: 1px solid #221155; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fffdea; color: #444444;
border: 1px solid #d0cfc0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fd5757; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fffdea; color:#444444; box-sizing:border-box;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#221155; display:flex; align-items:center; gap:20px; padding:0 26px; }
.logo { font-size:19px; font-weight:700; color:#fff; }
.navlink { font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; color:#fff; padding:8px 12px; border-radius:4px; }
.navlink.active { background:rgba(255,255,255,.12); }
.searchw { margin-left:auto; width:210px; height:36px; border-radius:4px; background:#fffdea; border:1px solid #dfdfdf;
display:flex; align-items:center; padding:0 12px; font-size:12px; color:#757575; }
.stage { display:flex; gap:28px; padding:22px 26px 0; }
.book { width:220px; height:290px; border-radius:8px; flex:0 0 auto; position:relative; overflow:hidden;
background:linear-gradient(160deg,#221155 0%,#632244 60%,#16140e 130%); box-shadow:0 10px 26px rgba(34,17,85,.3); }
.book::before { content:''; position:absolute; left:24px; top:38px; width:170px; height:170px; border-radius:50%;
border:2px solid rgba(253,87,87,.35); }
.book::after { content:''; position:absolute; left:60px; top:74px; width:98px; height:98px; border-radius:50%;
border:1px solid rgba(241,165,0,.4); }
.badgesale { position:absolute; top:12px; left:12px; background:#fd5757; color:#fff; font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:.5px; border-radius:4px; padding:4px 8px; }
.info { flex:1; }
h1 { font-size:24px; font-weight:700; margin:6px 0 6px; color:#221155; }
.desc { font-size:14px; line-height:1.6; max-width:520px; margin-bottom:14px; }
.fmtrow { display:flex; gap:8px; margin-bottom:16px; }
.fmt { border:2px solid #221155; border-radius:4px; padding:8px 16px; font-size:13px; font-weight:600; color:#221155; }
.fmt.active { background:#221155; color:#fff; }
.pricerow { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.price { font-size:24px; font-weight:700; color:#fd5757; }
.old { font-size:13px; color:#8a8a8a; text-decoration:line-through; }
.btnrow { display:flex; gap:10px; }
.btn-p { background:#fd5757; color:#fff; border:none; border-radius:4px; height:44px; padding:0 26px;
font-size:15px; font-weight:600; letter-spacing:.5px; }
.btn-s { background:transparent; color:#221155; border:2px solid #221155; border-radius:4px; height:44px; padding:0 20px;
font-size:15px; font-weight:600; }
.relwrap { padding:16px 26px 0; border-top:1px solid #dfdfdf; margin-top:16px; }
.relhdr { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#221155; margin-bottom:10px; }
.relgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.rc { background:#ffffff; border-radius:8px; padding:8px; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.rc .th { height:60px; border-radius:4px 4px 0 0; background:linear-gradient(150deg,#4496f6,#221155); margin-bottom:6px; }
.rc .t { font-size:11px; font-weight:600; color:#221155; padding:0 4px 4px; }
.rc .p { font-size:12px; color:#fd5757; font-weight:600; padding:0 4px; }
</style></head>
<body>
<nav>
<span class="logo">Chaosium</span>
<span class="navlink active">Core Rulebooks</span>
<span class="navlink">Scenarios</span>
<span class="navlink">Miniatures</span>
<div class="searchw">Search mythos titles…</div>
</nav>
<div class="stage">
<div class="book"><span class="badgesale">Sale</span></div>
<div class="info">
<h1>The Undertow Codex: Core Rulebook</h1>
<div class="desc">A complete horror roleplaying system set along a drowned coastline where fishermen whisper of things that answer back. Includes character creation, sanity mechanics, and three ready-to-run scenarios.</div>
<div class="fmtrow">
<span class="fmt active">Hardcover</span>
<span class="fmt">PDF</span>
<span class="fmt">Bundle</span>
</div>
<div class="pricerow"><span class="price">$34.99</span><span class="old">$44.99</span></div>
<div class="btnrow">
<button class="btn-p">Add to Cart</button>
<button class="btn-s">Read Sample</button>
</div>
</div>
</div>
<div class="relwrap">
<div class="relhdr">Companion Scenarios</div>
<div class="relgrid">
<div class="rc"><div class="th"></div><div class="t">The Salt Choir</div><div class="p">$16.99</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(150deg,#f1a500,#221155)"></div><div class="t">Nine Fathoms Down</div><div class="p">$14.99</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(150deg,#fd5757,#16140e)"></div><div class="t">Widow's Lantern</div><div class="p">$14.99</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(150deg,#632244,#221155)"></div><div class="t">Keeper's Screen Set</div><div class="p">$22.99</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f5ef; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f5ef; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #f7f5ef; color: #108474;
border: 1px solid #108474; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #f7f5ef; color: #121212;
border: 1px solid #bebcb8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.8px; background: #edf5f5; color: #108474;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f7f5ef; color:#121212; font-family:'Poppins',Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box;}
.announce{height:26px;background:#1c3930;color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #e9e9e9;}
.logo{font-weight:700;font-size:16px;color:#1c3930;}
.navlinks{display:flex;gap:20px;font-size:13px;font-family:'Poppins',sans-serif;}
.hero{background:#1c3930;color:#fff;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;}
.hero h1{font-size:38px;font-weight:700;margin:0 0 10px;}
.hero p{font-family:'Nunito Sans',Arial,sans-serif;font-size:15px;line-height:1.6;margin:0 0 16px;max-width:420px;}
.cta{background:#108474;color:#fff;font-weight:600;font-size:15px;padding:13px 26px;border-radius:8px;}
.section{padding:20px 30px;}
.chips{display:flex;gap:8px;margin-bottom:14px;}
.chip{background:#f2f2f2;border:1px solid #dedede;font-size:12px;font-weight:600;padding:6px 14px;border-radius:9999px;}
.chip.active{background:#108474;color:#fff;border-color:#108474;}
.grid{display:flex;gap:16px;}
.card{flex:1;background:#fff;border:1px solid #e9e9e9;border-radius:12px;overflow:hidden;}
.card .img{aspect-ratio:3/4;height:130px;position:relative;}
.n1{background:linear-gradient(160deg,#adcd62,#1c3930);}
.n2{background:linear-gradient(160deg,#a89cc8,#1c3930);}
.n3{background:linear-gradient(160deg,#fbcd0a,#108474);}
.eco{position:absolute;top:8px;left:8px;background:#edf5f5;color:#108474;border:1px solid #c1e6e6;font-family:'Barlow',sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:.8px;font-weight:700;padding:3px 8px;border-radius:4px;}
.info{padding:10px 12px;}
.card h3{font-size:14px;font-weight:600;margin:0 0 4px;}
.card .price{font-size:16px;font-weight:700;}
</style>
<div class="announce">FREE CARBON-NEUTRAL SHIPPING ON ORDERS OVER $40</div>
<div class="nav">
<div class="logo">Dingbats</div>
<div class="navlinks"><span>Notebooks</span><span>Planners</span><span>Accessories</span><span>Sustainability</span></div>
</div>
<div class="hero">
<h1>Paper made to earn its footnote.</h1>
<p>Recycled, FSC-certified, and disclosed down to the fiber — notebooks with nothing to hide.</p>
<a class="cta">Shop Notebooks</a>
</div>
<div class="section">
<div class="chips"><div class="chip active">All</div><div class="chip">Dotted</div><div class="chip">Ruled</div><div class="chip">Planners</div></div>
<div class="grid">
<div class="card"><div class="img n1"><span class="eco">Recycled</span></div><div class="info"><h3>Forest Floor Journal</h3><div class="price">$18.00</div></div></div>
<div class="card"><div class="img n2"><span class="eco">FSC Cert</span></div><div class="info"><h3>Lavender Cover A5</h3><div class="price">$16.00</div></div></div>
<div class="card"><div class="img n3"></div><div class="info"><h3>Sun Planner 2027</h3><div class="price">$22.00</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eaeaea; color: #31373d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eaeaea; color: #31373d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #31373d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #8a8a8a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #e9be33; color: #31373d;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #eaeaea; color: #31373d;
border: 1px solid #e9be33; border-radius: 6px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #31373d;
border: 1px solid #bcbdbf; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #e9be33; color: #31373d;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eaeaea; color:#31373d; box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; background:#31373d; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#e9be33; font-size:18px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#fff; opacity:0.85; font-size:13px; }
.cart { color:#e9be33; font-size:13px; font-weight:600; }
main { display:flex; height:582px; }
.stage { width:320px; background:#f5f5f5; display:flex; align-items:center; justify-content:center; }
.mat { width:200px; height:70px; background:linear-gradient(100deg,#e9be33,#d4a92e); border-radius:16px; position:relative;
box-shadow:0 16px 30px rgba(0,0,0,0.15); }
.mat-roll { position:absolute; left:-14px; top:-6px; width:34px; height:82px; border-radius:16px; background:#31373d; }
.info { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:11px; }
h1 { font-size:24px; font-weight:700; margin:0; }
.sub { font-size:13px; color:#6c6c6c; margin:0; max-width:440px; line-height:1.5; }
.swatches { display:flex; gap:10px; }
.sw { width:30px; height:30px; border-radius:999px; border:2px solid transparent; }
.sw.on { border-color:#31373d; }
.sw1 { background:#e9be33; } .sw2 { background:#479ccf; } .sw3 { background:#31373d; }
.rating { font-size:13px; color:#e9be33; }
.rating span { color:#8a8a8a; font-size:12px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:2px; }
.price { font-size:24px; font-weight:700; }
.actions { display:flex; gap:12px; }
.btn-primary { background:#e9be33; color:#31373d; border-radius:8px; height:46px; padding:0 26px; display:flex;
align-items:center; font-weight:700; font-size:14px; }
.btn-secondary { background:#fff; border:1px solid #d4d4d4; color:#31373d; border-radius:8px; height:46px;
padding:0 20px; display:flex; align-items:center; font-size:13px; font-weight:500; }
.link { font-size:12px; color:#479ccf; margin-top:auto; }
</style></head>
<body>
<nav>
<p class="brand">B Yoga</p>
<div class="navlinks"><span>Mats</span><span>Props</span><span>Apparel</span><span>Studio Finder</span></div>
<span class="cart">Cart (0)</span>
</nav>
<main>
<div class="stage"><div class="mat-roll"></div><div class="mat"></div></div>
<div class="info">
<h1>The Alpha Mat — 4.5mm Non-Slip</h1>
<p class="sub">A studio-grade travel mat with a closed-cell surface that stays dry through the hottest vinyasa flow.</p>
<div class="swatches"><div class="sw sw1 on"></div><div class="sw sw2"></div><div class="sw sw3"></div></div>
<div class="rating">★★★★★ <span>4.9 (1,340 reviews)</span></div>
<div class="price-row"><span class="price">$88.00</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Find a Studio</div>
</div>
<span class="link">Free shipping on orders over $75</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00b0f0; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00b0f0; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #82bc23; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b0f0; color: #000000;
border: 1px solid #82bc23; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00b0f0; color: #000000;
border: 1px solid #27bbf1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #15b2cf; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#16181B; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:640px; }
.list { width:320px; flex:0 0 auto; background:#fff; border-right:1px solid #E1E2E5; }
.lh { padding:16px 16px 6px; font-size:22px; font-weight:800; }
.row { display:flex; gap:12px; padding:12px 16px; align-items:center; }
.row.on { background:#F3F4F6; }
.av { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#4FCBF7,#00B0F0); flex:0 0 auto; position:relative; }
.bottag { position:absolute; bottom:-3px; right:-3px; background:#0093C8; color:#fff; font-size:8px; font-weight:800; padding:1px 4px; border-radius:4px; }
.rn { font-size:15px; font-weight:700; }
.rp { font-size:13px; color:#6C6F77; margin-top:2px; }
.thread { flex:1; display:flex; flex-direction:column; }
.nav { height:64px; border-bottom:1px solid #E1E2E5; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.nav b { font-size:15px; }
.nav span { font-size:11px; color:#9A9DA5; }
.msgs { flex:1; padding:20px 24px; display:flex; flex-direction:column; }
.bub { max-width:60%; padding:8px 13px; font-size:15px; line-height:1.35; margin-bottom:4px; border-radius:16px; }
.in { align-self:flex-start; background:#E9EAEC; }
.out { align-self:flex-end; background:#00B0F0; color:#002A36; font-weight:500; }
.receipt { align-self:flex-end; font-size:11px; color:#9CA0A8; margin-bottom:14px; display:flex; gap:5px; }
.rletter { font-weight:800; color:#00B0F0; }
.kikcode { width:100px; height:100px; border-radius:16px; margin:10px auto; background:#00B0F0;
display:flex; align-items:center; justify-content:center; }
.kikcode i { width:70px; height:70px; border-radius:50%; border:6px dotted #fff; }
.composer { padding:10px 16px; display:flex; align-items:center; gap:10px; border-top:1px solid #E1E2E5; }
.plus { width:30px; height:30px; border-radius:50%; background:#F3F4F6; display:flex; align-items:center; justify-content:center; font-weight:700; color:#6C6F77; }
.field { flex:1; height:36px; border-radius:18px; background:#F3F4F6; }
</style></head>
<body>
<div class="wrap">
<div class="list">
<div class="lh">Chats</div>
<div class="row on"><div class="av"><span class="bottag">BOT</span></div><div><div class="rn">@Kik (iOS)</div><div class="rp">Kik Code · scan to add</div></div></div>
<div class="row"><div class="av"></div><div><div class="rn">@luna.codes</div><div class="rp">omg yes 😂</div></div></div>
<div class="row"><div class="av"></div><div><div class="rn">Study Group</div><div class="rp">jay: anyone free tonight?</div></div></div>
</div>
<div class="thread">
<div class="nav"><b>@luna.codes</b><span>online</span></div>
<div class="msgs">
<div class="bub in">hey! did you get the Kik Code I sent?</div>
<div class="bub out">yeah just added you!</div>
<div class="receipt"><span class="rletter">R</span> Read</div>
<div class="kikcode"><i></i></div>
<div class="bub in">perfect, see you in the group chat</div>
</div>
<div class="composer"><div class="plus">+</div><div class="field"></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e4e3de; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #e4e3de;
border: 1px solid #e4e3de; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #242424; color: #e4e3de;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbfbf8; color:#000000; box-sizing:border-box;
font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.display { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.mono { font-family:"Space Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
nav { height:48px; display:flex; align-items:stretch; border-bottom:1px solid #e4e3de; }
.brand { font-size:15px; font-weight:500; letter-spacing:0.16px; margin:0; display:flex; align-items:center;
padding:0 20px; border-right:1px solid #e4e3de; }
.navlinks { display:flex; flex:1; }
.navlinks span { display:flex; align-items:center; padding:0 18px; font-size:15px; font-weight:500;
letter-spacing:0.16px; border-right:1px solid #e4e3de; }
.navcta { margin-left:auto; display:flex; align-items:center; padding:0 20px; font-size:15px; font-weight:500;
letter-spacing:0.16px; }
.hero { display:grid; grid-template-columns:1fr 300px; border-bottom:1px solid #e4e3de; }
.hero .left { padding:30px 32px; border-right:1px solid #e4e3de; }
.eyebrow { font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:#000000; opacity:0.55; margin-bottom:14px; }
.hero h1 { font-size:46px; font-weight:500; line-height:1.08; letter-spacing:-0.56px; margin:0 0 14px; max-width:480px; }
.hero p { font-size:16px; line-height:1.5; margin:0 0 20px; max-width:440px; color:#000000; opacity:0.75; }
.row { display:flex; gap:0; }
.btn { font-size:15px; font-weight:500; letter-spacing:0.16px; padding:11px 20px; border:1px solid #000000;
background:#000000; color:#fbfbf8; }
.btn.ghost { background:transparent; color:#000000; border-left:none; }
.hero .right { padding:24px 24px; display:flex; flex-direction:column; justify-content:center; gap:10px; }
.hero .right .cap { font-size:11px; letter-spacing:0.02em; margin-bottom:6px; opacity:0.55; }
.swatchrow { display:flex; gap:8px; margin-bottom:16px; }
.swatch { width:34px; height:34px; }
.s1 { background:#000000; }
.s2 { background:linear-gradient(135deg,#ff7a3d,#ff3d77 50%,#7a3dff); }
.s3 { background:#f5f4ef; border:1px solid #e4e3de; }
.s4 { background:#fbfbf8; border:1px solid #e4e3de; }
.rows { border-bottom:1px solid #e4e3de; }
.lrow { display:flex; align-items:center; justify-content:space-between; padding:13px 32px;
border-bottom:1px solid #e4e3de; font-size:16px; }
.lrow:last-child { border-bottom:none; }
.lrow .name { font-weight:400; }
.lrow .val { opacity:0.55; font-size:14px; }
.plans { display:grid; grid-template-columns:repeat(3,1fr); }
.plan { border-right:1px solid #e4e3de; padding:20px 24px; }
.plan:last-child { border-right:none; }
.plan.alt { background:#f5f4ef; }
.plan .pname { font-size:11px; text-transform:uppercase; letter-spacing:0.04em; opacity:0.55; margin-bottom:8px; }
.plan .price { font-size:26px; font-weight:500; margin-bottom:6px; }
.plan .desc { font-size:13px; opacity:0.6; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #e4e3de; padding:12px 32px;
display:flex; justify-content:space-between; align-items:center; font-size:12px; opacity:0.6; background:#fbfbf8; }
</style></head>
<body>
<nav>
<p class="brand display">Mistral AI</p>
<div class="navlinks display"><span>Models</span><span>Developers</span><span>Enterprise</span><span>Pricing</span></div>
<div class="navcta display">Try the API</div>
</nav>
<section class="hero">
<div class="left">
<div class="eyebrow mono">FRONTIER AI, BUILT IN EUROPE</div>
<h1 class="display">Putting frontier AI in everyone's hands</h1>
<p>Open, portable, and controllable models — plus the developer tools and compute to run them on your terms.</p>
<div class="row">
<button class="btn display">Try the API</button>
<button class="btn ghost display">Read the docs</button>
</div>
</div>
<div class="right">
<div class="cap mono">MODEL FAMILY</div>
<div class="swatchrow">
<div class="swatch s1"></div>
<div class="swatch s2"></div>
<div class="swatch s3"></div>
<div class="swatch s4"></div>
</div>
<div class="cap mono">DEPLOYMENT</div>
<div style="font-size:14px;">Cloud · on-prem · self-hosted</div>
</div>
</section>
<section class="rows">
<div class="lrow"><span class="name">Large — flagship reasoning model</span><span class="val mono">128K CTX</span></div>
<div class="lrow"><span class="name">Small — fast, cost-efficient</span><span class="val mono">32K CTX</span></div>
<div class="lrow"><span class="name">Codestral — built for code</span><span class="val mono">256K CTX</span></div>
</section>
<section class="plans">
<div class="plan"><div class="pname mono">FREE</div><div class="price">$0</div><div class="desc">Experiment with the API</div></div>
<div class="plan alt"><div class="pname mono">PRO</div><div class="price">$14 / mo</div><div class="desc">For individual developers</div></div>
<div class="plan"><div class="pname mono">ENTERPRISE</div><div class="price">Custom</div><div class="desc">Control, ownership, reliability</div></div>
</section>
<footer>
<span>© Mistral AI</span>
<span>Mistral AI · Models · Developers · Enterprise</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #141414; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #141414; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #909090; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e50914; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #141414; color: #e50914;
border: 1px solid #e50914; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #141414; color: #f5f5f5;
border: 1px solid #383838; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #909090; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #351214; color: #e50914;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#141414; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { position:relative; width:960px; height:340px;
background: linear-gradient(120deg, #3a1010 0%, #1e1e1e 60%, #141414 100%); overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0;
background: radial-gradient(ellipse at 30% 30%, rgba(229,9,20,0.25), transparent 55%); }
.hero-grad { position:absolute; left:0; right:0; bottom:0; height:60%;
background: linear-gradient(180deg, rgba(20,20,20,0) 0%, #141414 100%); }
.wordmark { position:absolute; top:20px; left:32px; font-weight:800; font-size:22px; letter-spacing:-0.5pt;
color:#E50914; font-family:Arial, sans-serif; }
.heroinfo { position:absolute; left:32px; bottom:26px; width:520px; }
.genres { font-size:13px; font-weight:500; color:#fff; opacity:0.9; margin-bottom:10px; }
.titlelogo { font-size:40px; font-weight:800; letter-spacing:-1pt; line-height:1.02; margin-bottom:14px; color:#fff; }
.btnrow { display:flex; gap:10px; }
.btn-primary { background:#E50914; color:#fff; border-radius:4px; padding:12px 26px; font-size:15px; font-weight:700;
display:flex; align-items:center; gap:8px; }
.btn-secondary { background:rgba(255,255,255,0.15); color:#fff; border-radius:4px; padding:11px 20px; font-size:14px; font-weight:600; }
.rows { padding:14px 0 0; }
.row-head { font-size:16px; font-weight:700; padding:0 32px 8px; }
.row-strip { display:flex; gap:8px; padding:0 32px 16px; overflow:hidden; }
.tile { flex:none; width:118px; height:170px; border-radius:4px; background-size:cover; background-position:center; position:relative; }
.t1 { background: linear-gradient(160deg,#4a1620,#1a1a2e); }
.t2 { background: linear-gradient(160deg,#123024,#0e1a1a); }
.t3 { background: linear-gradient(160deg,#3a2a10,#1a140a); }
.t4 { background: linear-gradient(160deg,#241a3a,#12101c); }
.t5 { background: linear-gradient(160deg,#2a1a3a,#160a1c); }
.t6 { background: linear-gradient(160deg,#1a2a3a,#0a121c); }
.top10 { display:flex; gap:14px; padding:0 32px 16px; align-items:flex-end; }
.num10 { font-size:150px; font-weight:900; line-height:0.7; color:#141414;
-webkit-text-stroke: 2px rgba(255,255,255,0.35); margin-right:-38px; z-index:1; font-family:Arial, sans-serif; }
.top10 .tile { z-index:2; }
.cw-tile { position:relative; }
.cw-bar-track { position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,0.3); }
.cw-bar-fill { position:absolute; left:0; bottom:0; height:2px; width:60%; background:#E50914; }
</style></head>
<body>
<div class="hero">
<div class="wordmark">NETFLIX</div>
<div class="hero-grad"></div>
<div class="heroinfo">
<div class="genres">Gripping • Dramas • Thrillers</div>
<div class="titlelogo">Netflix (iOS)</div>
<div class="btnrow">
<div class="btn-secondary">+ My List</div>
<div class="btn-primary">▶ Play</div>
<div class="btn-secondary">ⓘ Info</div>
</div>
</div>
</div>
<div class="rows">
<div class="row-head">Continue Watching</div>
<div class="row-strip">
<div class="tile t1 cw-tile"><div class="cw-bar-track"></div><div class="cw-bar-fill"></div></div>
<div class="tile t2 cw-tile"><div class="cw-bar-track"></div><div class="cw-bar-fill" style="width:30%"></div></div>
<div class="tile t3 cw-tile"><div class="cw-bar-track"></div><div class="cw-bar-fill" style="width:85%"></div></div>
<div class="tile t4 cw-tile"><div class="cw-bar-track"></div><div class="cw-bar-fill" style="width:12%"></div></div>
<div class="tile t5 cw-tile"><div class="cw-bar-track"></div><div class="cw-bar-fill" style="width:50%"></div></div>
</div>
<div class="row-head">Top 10 in Your Country Today</div>
<div class="top10">
<div><span class="num10">1</span></div><div class="tile t2"></div>
<div><span class="num10">2</span></div><div class="tile t3"></div>
<div><span class="num10">3</span></div><div class="tile t4"></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #a8aab2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; background: #0a0a0a; color: #ffffff;
border: none; border-radius: 9999px; padding: 11px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; background: transparent; color: #0a0a0a;
border: 1px solid #0a0a0a; border-radius: 9999px;
padding: 11px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #0a0a0a;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a8aab2; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.5; background: #e8ffea; color: #1ba673;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0a0a; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #222222; }
.brand { font-size:17px; font-weight:600; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; color:#a8aab2; }
.btn { background:#ffffff; color:#0a0a0a; border:none; border-radius:999px;
padding:9px 20px; font-weight:600; font-size:13px; white-space:nowrap; }
.hero { padding:44px 40px 28px; text-align:center; }
.hero .tag { font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:#3daeff; }
.hero h1 { font-size:56px; font-weight:600; letter-spacing:-1.6px; line-height:1.05; margin:10px 0 0; }
.hero p { font-size:15px; color:#8e8e93; margin:14px auto 0; max-width:480px; }
/* MiniMax 의 진짜 신원은 텍스트가 아니라 모델별 그라디언트 카드다 —
coral/magenta/blue/purple 4색을 각각 독립 카드로 노출한다. */
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:20px 40px 36px; }
.card { position:relative; border-radius:18px; padding:18px; height:170px;
display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.card .glow { position:absolute; inset:-30% -30% auto auto; width:140px; height:140px; border-radius:50%;
filter:blur(2px); opacity:0.55; }
.c1 { background:linear-gradient(155deg,#ff5530,#7a1e00); }
.c1 .glow { background:#ffb199; }
.c2 { background:linear-gradient(155deg,#ea5ec1,#5c1049); }
.c2 .glow { background:#ffc2ec; }
.c3 { background:linear-gradient(155deg,#1456f0,#0a1c4d); }
.c3 .glow { background:#8db4ff; }
.c4 { background:linear-gradient(155deg,#a855f7,#3a1263); }
.c4 .glow { background:#dcb8ff; }
.card .k { position:relative; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:rgba(255,255,255,0.75); }
.card h3 { position:relative; font-size:19px; font-weight:600; margin:0; letter-spacing:-0.4px; }
.card p { position:relative; font-size:12px; color:rgba(255,255,255,0.7); margin:0; line-height:1.4; }
footer { border-top:1px solid #222222; padding:14px 40px; display:flex; justify-content:space-between;
align-items:center; font-size:11px; color:#5f5f5f; }
</style></head>
<body>
<nav>
<p class="brand">Minimax</p>
<div class="navlinks"><span>Models</span><span>Docs</span><span>Pricing</span><span>Blog</span></div>
<button class="btn">Get started</button>
</nav>
<section class="hero">
<span class="tag">New release</span>
<h1>Frontier intelligence, deployed</h1>
<p>Premium AI infrastructure for teams who ship at the edge of what models can do.</p>
</section>
<section class="cards">
<div class="card c1"><span class="glow"></span><span class="k">Text</span><h3>MiniMax-M2</h3><p>Reasoning at native speed</p></div>
<div class="card c2"><span class="glow"></span><span class="k">Vision</span><h3>abab-Vision</h3><p>See, read, and reason</p></div>
<div class="card c3"><span class="glow"></span><span class="k">Voice</span><h3>Speech-02</h3><p>Studio-grade synthesis</p></div>
<div class="card c4"><span class="glow"></span><span class="k">Video</span><h3>Hailuo</h3><p>Cinematic generation</p></div>
</section>
<footer>
<span>© Minimax</span>
<span>Models · Developers · Enterprise · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfaf8; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfaf8; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #002360; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fcfaf8; color: #002360;
border: 1px solid #002360; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfaf8; color: #121212;
border: 1px solid #c6c4c2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #1990c6; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcfaf8; color:#121212; box-sizing:border-box;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#002360; }
.brand { font-size:18px; font-weight:500; color:#fff; letter-spacing:0.02em; }
.navlinks { display:flex; gap:26px; font-size:13px; color:#c5d9ed; }
.navlinks span.on { color:#fff; border-bottom:2px solid #1990c6; padding-bottom:20px; }
.cart { width:30px; height:30px; border-radius:9999px; background:#1990c6; color:#fff; font-size:12px;
font-weight:700; display:flex; align-items:center; justify-content:center; }
main { display:flex; height:576px; }
.gallery { width:410px; background:linear-gradient(180deg,#eef4fa 0%,#f6ece2 100%); position:relative;
display:flex; align-items:center; justify-content:center; }
.diffuser { width:140px; height:170px; position:relative; }
.diffuser .base { position:absolute; bottom:0; left:10px; right:10px; height:70px; background:#002360;
border-radius:8px; box-shadow:0 18px 32px rgba(0,35,96,0.25); }
.diffuser .cap { position:absolute; top:0; left:30px; right:30px; height:100px; background:
linear-gradient(180deg,#ffffff, #eef4fa); border-radius:70px 70px 8px 8px; border:1px solid #dedede; }
.diffuser .glow { position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:70px; height:24px;
background:#1990c6; border-radius:9999px; opacity:0.3; filter:blur(4px); }
.badge-scent { position:absolute; top:22px; left:22px; background:#002360; color:#fff; font-size:10px;
font-weight:600; letter-spacing:0.05em; padding:5px 12px; border-radius:9999px; }
.info { flex:1; padding:32px 38px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:#136f99; }
h1 { font-size:24px; font-weight:500; margin:0; letter-spacing:-0.2px; line-height:1.3; }
.stars { font-size:12px; color:#222222; }
.stars .n { color:#6a6a6a; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:21px; font-weight:500; }
.desc { font-size:13.5px; color:#6a6a6a; line-height:1.6; max-width:340px; }
.scent-row { display:flex; gap:8px; }
.scent { border:1px solid #dedede; border-radius:9999px; padding:7px 16px; font-size:12px; }
.scent.on { border-color:#1990c6; color:#1990c6; background:#eef4fa; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#002360; color:#fff; border:none; border-radius:4px; padding:13px 18px;
font-size:14px; font-weight:500; }
.btn-outline { border:1.5px solid #002360; color:#002360; background:#fff; border-radius:4px; padding:11.5px 16px;
font-size:12.5px; font-weight:500; white-space:nowrap; }
.meta { font-size:11px; color:#929292; }
</style></head>
<body>
<nav>
<div class="brand">Aera</div>
<div class="navlinks"><span class="on">Devices</span><span>Fragrances</span><span>How It Works</span><span>Gifting</span></div>
<div class="cart">2</div>
</nav>
<main>
<div class="gallery">
<span class="badge-scent">Smart Diffusion</span>
<div class="diffuser"><div class="glow"></div><div class="cap"></div><div class="base"></div></div>
</div>
<div class="info">
<span class="cat">Fragrance System</span>
<h1>Aera Home Scent Diffuser + Capsule</h1>
<div class="stars">★★★★★ <span class="n">4.6 · 812 reviews</span></div>
<div class="price-row"><span class="price">$129.00</span></div>
<p class="desc">Precision-engineered diffusion delivers a consistent scent experience for months — app-controlled intensity, no flame, no mess.</p>
<div class="scent-row">
<span class="scent on">Amber Musc</span>
<span class="scent">Fig Leaf</span>
<span class="scent">Sea Salt</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add Device + Capsule</button>
<button class="btn-outline">Gift This</button>
</div>
<span class="meta">Free shipping · 60-day scent guarantee</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #333333;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #333333;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #333333; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f9fafb; color: #108474;
border: 1px solid #108474; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9fafb; color: #333333;
border: 1px solid #c8c8c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #dc143c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Honey-Can-Do Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Nunito Sans',Arial,Helvetica,sans-serif; background:#f9fafb; color:#555555; }
*{box-sizing:border-box;}
.nav{height:64px;background:#f9fafb;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #eeeeee;}
.logo{font-family:'Montserrat',sans-serif;font-weight:700;font-size:19px;color:#333;}
.navlinks{display:flex;gap:22px;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;color:#333;}
.navlinks .active{color:#108474;}
.hero{background:#12465b;color:#fff;padding:24px 36px;display:flex;align-items:center;height:220px;justify-content:space-between;}
.hero-txt h1{font-family:'Montserrat',sans-serif;font-size:28px;font-weight:600;line-height:1.25;margin:0 0 10px;}
.hero-txt p{font-size:14px;color:#cfe4e0;margin:0 0 6px;max-width:320px;}
.btn{display:inline-block;background:#fbcd0a;color:#333;font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;padding:14px 32px;border-radius:8px;margin-top:10px;}
.hero-visual{width:280px;height:170px;background:linear-gradient(135deg,#0d3040,#12465b);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#5fa2a8;font-size:11px;flex-shrink:0;}
.section{padding:8px 36px;}
.section h2{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:600;margin:0 0 12px;color:#333;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{background:#fff;border-radius:12px;padding:16px;position:relative;}
.imgbox{height:74px;background:#f2f2f2;border-radius:12px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:#888;font-size:10px;text-align:center;}
.badge{position:absolute;top:10px;left:10px;font-family:'Montserrat',sans-serif;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:4px;}
.badge.sale{background:#dc143c;color:#fff;}
.badge.new{background:#108474;color:#fff;}
.pname{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;margin:4px 0 2px;color:#333;}
.price{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:700;color:#333;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#12465b;color:#fff;padding:14px 36px;display:flex;justify-content:space-between;font-size:11px;}
</style>
<div class="nav">
<div class="logo">Honey Can DO</div>
<div class="navlinks"><span class="active">Storage</span><span>Closet</span><span>Laundry</span><span>Garage</span></div>
</div>
<div class="hero">
<div class="hero-txt">
<h1>Organization made<br>easy — and warm.</h1>
<p>Shelving, bins and closet systems that turn a chaotic room into a calm one.</p>
<div class="btn">Shop Storage Solutions</div>
</div>
<div class="hero-visual">PANTRY / CLOSET PHOTOGRAPHY</div>
</div>
<div class="section">
<h2>Best Sellers</h2>
<div class="grid">
<div class="card"><div class="badge sale">Sale</div><div class="imgbox">Shelving Unit</div><div class="pname">5-Tier Wire Shelving</div><div class="price">$64.99</div></div>
<div class="card"><div class="badge new">New</div><div class="imgbox">Closet System</div><div class="pname">Expandable Closet Organizer</div><div class="price">$89.99</div></div>
<div class="card"><div class="imgbox">Storage Bins</div><div class="pname">Set of 6 Fabric Bins</div><div class="price">$32.99</div></div>
<div class="card"><div class="imgbox">Drying Rack</div><div class="pname">Foldable Drying Rack</div><div class="price">$28.99</div></div>
</div>
</div>
<div class="footer"><span>© Honey Can DO</span><span>Shipping · Returns · Support · Contact</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb1700; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb1700; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb1700; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb1700; color: #f5f5f5;
border: 1px solid #ed3b27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ee3c29; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#FFFFFF; color:#191919; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; padding:22px 32px 0; position:relative; }
.addr { display:flex; justify-content:space-between; align-items:center; }
.addr .lbl { font-size:15px; font-weight:700; display:flex; align-items:center; gap:6px; }
.search { margin-top:14px; height:44px; background:#F7F7F7; border-radius:12px; display:flex; align-items:center; padding:0 14px; color:#757575; font-size:15px; gap:8px; }
.chips { display:flex; gap:10px; margin-top:14px; }
.chip { background:#191919; color:#fff; border-radius:20px; padding:8px 16px; font-size:14px; font-weight:600; }
.chip.off { background:#F7F7F7; color:#191919; }
.sectiontitle { font-size:22px; font-weight:700; margin:18px 0 12px; letter-spacing:-0.3pt; }
.carousel { display:flex; gap:14px; overflow:hidden; }
.mcard { width:230px; flex-shrink:0; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.mimg { width:230px; height:143px; border-radius:12px 12px 0 0; position:relative; }
.mimg .badge { position:absolute; top:10px; left:10px; background:#FFEBE8; color:#EB1700; font-size:11px; font-weight:700; padding:4px 8px; border-radius:4px; text-transform:uppercase; }
.mimg .heart { position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:50%; background:rgba(0,0,0,0.4); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; }
.mtext { padding:12px; }
.mtext .nm { font-size:18px; font-weight:700; letter-spacing:-0.2pt; }
.mtext .meta { font-size:13px; color:#757575; margin-top:6px; display:flex; align-items:center; gap:6px; }
.mtext .meta .g { color:#008B4A; font-weight:600; }
.floatcta { position:absolute; bottom:20px; left:32px; right:32px; height:52px; border-radius:28px; background:#EB1700; display:flex; align-items:center; justify-content:space-between; padding:0 22px; box-shadow:0 8px 24px rgba(0,0,0,0.16); }
.floatcta span { color:#fff; font-weight:700; font-size:16px; }
</style>
</head>
<body>
<div class="stage">
<div class="addr"><div class="lbl">📍 Home ▾</div><span style="font-size:13px;font-weight:800;letter-spacing:0.2pt;color:#EB1700;">DoorDash (iOS)</span><div style="font-size:22px">🔍</div></div>
<div class="search">🔍 Find food or restaurants</div>
<div class="chips"><div class="chip">🍕 Pizza</div><div class="chip off">🍣 Sushi</div><div class="chip off">🥗 Healthy</div><div class="chip off">🌮 Mexican</div></div>
<div class="sectiontitle">$0 delivery fee near you</div>
<div class="carousel">
<div class="mcard">
<div class="mimg" style="background:linear-gradient(135deg,#e8a05a,#c85a2a)"><div class="badge">Free Delivery</div><div class="heart">♡</div></div>
<div class="mtext"><div class="nm">Sunrise Diner</div><div class="meta">⭐ 4.8 · 20 min · <span class="g">$0 delivery</span></div></div>
</div>
<div class="mcard">
<div class="mimg" style="background:linear-gradient(135deg,#8ac0a0,#3a7a5a)"><div class="badge">20% OFF</div><div class="heart">♡</div></div>
<div class="mtext"><div class="nm">Greenleaf Bowls</div><div class="meta">⭐ 4.6 · 15 min · <span class="g">$0 delivery</span></div></div>
</div>
<div class="mcard">
<div class="mimg" style="background:linear-gradient(135deg,#e07a6a,#a83a2a)"><div class="badge">New</div><div class="heart">♡</div></div>
<div class="mtext"><div class="nm">Casa Molcajete</div><div class="meta">⭐ 4.9 · 25 min · $1.99 fee</div></div>
</div>
</div>
<div class="floatcta"><span>Checkout</span><span>$23.40</span></div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #1990c6; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #1990c6;
border: 1px solid #1990c6; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.25px; background: #1990c6; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:22px;font-weight:600;color:#1a1a1a;}
.navlinks{display:flex;gap:26px;font-size:14px;font-weight:600;color:#1a1a1a;}
.cta{background:#1990c6;color:#fff;font-size:14px;font-weight:600;padding:10px 22px;border-radius:8px;}
.hero{height:220px;background:#f5f5f5;display:flex;align-items:center;padding:0 40px;}
.herotext{max-width:520px;}
.herotext h1{font-size:32px;font-weight:600;letter-spacing:-0.5px;margin:0 0 12px;color:#1a1a1a;}
.herotext p{font-size:16px;color:#666666;margin:0 0 20px;}
.btn{display:inline-block;background:#1990c6;color:#fff;font-size:16px;font-weight:600;letter-spacing:0.5px;padding:12px 24px;border-radius:8px;}
.grid{display:flex;gap:20px;padding:24px 40px 0;}
.card{flex:1;background:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:20px;}
.badge{display:inline-block;background:#1990c6;color:#fff;font-size:11px;padding:2px 10px;border-radius:9999px;margin-bottom:10px;}
.ctitle{font-size:18px;font-weight:600;color:#1a1a1a;margin:0 0 8px;}
.cdesc{font-size:14px;color:#666666;line-height:1.5;margin:0 0 14px;}
.cprice{font-size:20px;font-weight:600;color:#1a1a1a;margin-bottom:10px;}
.clink{font-size:14px;font-weight:600;color:#1990c6;}
.trust{display:flex;justify-content:space-around;padding:20px 40px;margin-top:8px;}
.trust div{font-size:13px;color:#999999;text-align:center;}
</style>
<div class="nav">
<div class="logo">Roman</div>
<div class="navlinks"><div>Hair</div><div>Skin</div><div>Sexual Health</div><div>Longevity</div></div>
<div class="cta">Get Started</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Straightforward healthcare, delivered.</h1>
<p>Doctor-guided treatment plans shipped discreetly, no waiting room required.</p>
<div class="btn">Start Free Visit</div>
</div>
</div>
<div class="grid">
<div class="card"><span class="badge">FDA Approved</span><div class="ctitle">Hair Loss Treatment</div><div class="cdesc">Custom formula chewable, prescribed after a quick online consult.</div><div class="cprice">$25/month</div><div class="clink">Learn More →</div></div>
<div class="card"><span class="badge">Most Popular</span><div class="ctitle">ED Treatment</div><div class="cdesc">Generic sildenafil or tadalafil, delivered in discreet packaging.</div><div class="cprice">$2/dose</div><div class="clink">Learn More →</div></div>
<div class="card"><div class="ctitle">Daily Multivitamin</div><div class="cdesc">A once-daily formula built around the nutrients men actually need.</div><div class="cprice">$20/month</div><div class="clink">Learn More →</div></div>
</div>
<div class="trust"><div>Board-Certified Doctors</div><div>Free Shipping</div><div>Ongoing Care</div><div>Cancel Anytime</div></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6c757d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #203d3e; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f6f6f6; color: #203d3e;
border: 1px solid #203d3e; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f6f6f6; color: #141414;
border: 1px solid #bebebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c757d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #b68b32; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f6f6; font-family:'Inter', Arial, sans-serif; color:#333029; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#f6f6f6;border-bottom:1px solid #dedede;}
.logo{font-size:20px;font-weight:700;letter-spacing:.5px;color:#203d3e;text-transform:uppercase;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:#6c757d;}
.navlinks span:first-child{color:#203d3e;}
.icon{width:40px;height:40px;border-radius:9999px;background:#f6f6f6;border:1px solid #dedede;display:flex;align-items:center;justify-content:center;font-size:12px;}
.hero{height:250px;background:#203d3e;display:flex;align-items:center;padding:0 40px;gap:30px;}
.herotext{width:46%;color:#fff;}
.herotext h1{font-size:34px;font-weight:700;margin:0 0 12px;line-height:1.15;}
.herotext p{font-size:14px;opacity:.85;margin:0 0 18px;max-width:300px;}
.herocta{display:inline-block;background:#b68b32;color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:8px;padding:14px 28px;}
.heroimg{width:48%;height:170px;border-radius:20px;background:radial-gradient(circle at 35% 30%,#b68b32,#0d1e1e 75%);position:relative;overflow:hidden;}
.heroimg:before{content:'';position:absolute;width:120px;height:120px;border-radius:50%;border:10px solid #f6f6f6;top:22px;left:60px;}
.heroimg:after{content:'';position:absolute;width:60px;height:14px;background:#f6f6f6;border-radius:6px;top:72px;right:30px;}
.grid{display:flex;gap:16px;padding:22px 36px 0;}
.card{width:200px;background:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.08);}
.thumb{height:110px;}
.body{padding:12px 14px;}
.ptitle{font-size:16px;font-weight:600;color:#141414;margin-bottom:6px;}
.pprice{font-size:15px;font-weight:600;color:#203d3e;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#203d3e;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.footer span{color:#fff;font-size:11px;opacity:.85;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Smithey</div>
<div class="navlinks"><span>Skillets</span><span>Dutch Ovens</span><span>Carbon Steel</span><span>Our Story</span></div>
<div class="icon">⚲</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Heirloom cast iron, forged for generations.</h1>
<p>Hand-poured in South Carolina and seasoned to outlast you.</p>
<div class="herocta">Shop Skillets</div>
</div>
<div class="heroimg"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#203d3e,#111)"></div><div class="body"><div class="ptitle">No. 10 Skillet</div><div class="pprice">$225</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b68b32,#203d3e)"></div><div class="body"><div class="ptitle">Farmhouse Dutch Oven</div><div class="pprice">$325</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#333029,#203d3e)"></div><div class="body"><div class="ptitle">Carbon Steel Skillet</div><div class="pprice">$150</div></div></div>
</div>
<div class="footer"><span>© Smithey Ironware Co. — Charleston, SC</span><span>Care Guide · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff367c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff367c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d0d12; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff367c; color: #0d0d12;
border: 1px solid #0d0d12; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff367c; color: #f5f5f5;
border: 1px solid #fd558f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d82f6b; color: #0d0d12;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0d0d12; color:rgba(255,255,255,0.87); box-sizing:border-box;
font-family:Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.wrap { position:relative; height:100%; }
.glow-a { position:absolute; width:360px; height:360px; border-radius:50%; top:-140px; left:-100px;
background:radial-gradient(circle, rgba(255,54,124,0.35), transparent 70%); filter:blur(10px); }
.glow-b { position:absolute; width:340px; height:340px; border-radius:50%; bottom:-160px; right:-80px;
background:radial-gradient(circle, rgba(110,134,255,0.32), transparent 70%); filter:blur(10px); }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; }
.brand { font-size:16px; font-weight:600; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:26px; font-size:12px; color:#fff; opacity:0.85; }
.cta { position:relative; z-index:2; height:36px; border-radius:999px; padding:0 20px; display:flex;
align-items:center; font-size:12px; color:#fff; font-weight:600;
background:linear-gradient(274deg, #6e86ff, #ff367c);
box-shadow: rgba(255,89,0,0.55) -10px 0px 18px -3px, rgb(255,56,132) -5px 0px 8px -5px; }
.hero { position:relative; z-index:2; padding:36px 40px 20px; text-align:center; }
.hero h1 { font-size:38px; font-weight:400; letter-spacing:-1.6px; line-height:1.15; margin:0 0 10px; }
.hero p { font-size:15px; color:#d0d0d0; margin:0 auto; max-width:520px; }
.cards { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
padding:24px 40px 0; }
.plan { border-radius:20px; padding:20px; display:flex; flex-direction:column; gap:8px; }
.plan.free { background:#323648; }
.plan.pro { background:#1a1d31; border:1px solid transparent; position:relative;
box-shadow: rgba(255,128,176,0.28) 0px -4px 32px 0px, rgba(87,95,255,0.25) 0px 0px 32px 0px; }
.plan.pro::before { content:''; position:absolute; inset:0; border-radius:20px; padding:1px;
background:linear-gradient(150deg, #ff367c, #a963ff, #6e86ff); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }
.plan .name { font-size:16px; font-weight:400; }
.plan .price { font-size:26px; font-weight:400; margin:4px 0; }
.plan .feat { font-size:12px; color:#bba2e0; }
.plan.free .feat { color:#8897e3; }
.chart { position:relative; z-index:2; margin:20px 40px 0; padding:16px 18px; background:#1a1d31;
border-radius:20px; display:flex; align-items:flex-end; gap:10px; height:76px; }
.bar { flex:1; border-radius:6px 6px 0 0; }
.bar:nth-child(1){ height:40%; background:#f58327; }
.bar:nth-child(2){ height:65%; background:#f0c732; }
.bar:nth-child(3){ height:52%; background:#4dff64; }
.bar:nth-child(4){ height:80%; background:#8897e3; }
.bar:nth-child(5){ height:34%; background:#a963ff; }
.bar:nth-child(6){ height:70%; background:#ff367c; }
.bar:nth-child(7){ height:58%; background:#6e86ff; }
.bar:nth-child(8){ height:44%; background:#f58327; }
footer { position:relative; z-index:2; position:absolute; bottom:0; left:0; right:0; height:44px;
display:flex; align-items:center; justify-content:space-between; padding:0 40px; font-size:11px; color:#7b7c8c; }
</style></head>
<body>
<div class="wrap">
<div class="glow-a"></div><div class="glow-b"></div>
<nav>
<div class="brand">MOZE</div>
<div class="navlinks"><span>Pricing</span><span>Guide</span><span>FAQ</span><span>Contact</span></div>
<div class="cta">Download free</div>
</nav>
<section class="hero">
<h1>Simplify your financial journey, elegantly</h1>
<p>Bookkeeping is the first step of money management — refined charts, multi-currency, AI-assisted logging.</p>
</section>
<div class="cards">
<div class="plan free"><span class="name">Basic</span><span class="price">$0</span><span class="feat">Manual entry · Core charts</span></div>
<div class="plan pro"><span class="name">Pro + AI</span><span class="price">$4.99</span><span class="feat">AI logging · Multi-currency · Sync</span></div>
<div class="plan free"><span class="name">Family</span><span class="price">$7.99</span><span class="feat">Shared budgets · Apple Watch</span></div>
</div>
<div class="chart">
<div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
<div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
</div>
<footer>
<span>© MOZE</span>
<span>MOZE · Pricing · Guide · FAQ</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.35; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8a8a8a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #008aa4; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fefefe; color: #0a0a0a;
border: 1px solid #008aa4; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #fefefe; color: #0a0a0a;
border: 1px solid #c1c1c1; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffdd00; color: #0a0a0a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fefefe; font-family:Roboto,Arial,sans-serif; color:#0a0a0a; }
*{box-sizing:border-box;}
.topnav{height:56px;background:#0a0a0a;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:1px;}
.search{width:320px;height:34px;background:#fff;border-radius:20px;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#8a8a8a;}
.carticon{color:#fff;font-size:13px;font-weight:600;text-transform:uppercase;}
.catstrip{height:38px;background:#0a0a0a;display:flex;align-items:center;gap:20px;padding:0 32px;font-size:12px;color:#fff;text-transform:uppercase;letter-spacing:.5px;font-weight:500;border-top:1px solid #222;}
.hero{height:180px;display:flex;align-items:center;padding:0 32px;background:linear-gradient(135deg,#0a0a0a,#00303a);}
.heroText{width:56%;}
.heroText h1{color:#fff;font-size:28px;font-weight:700;margin:0 0 10px;letter-spacing:-.3px;}
.heroText p{color:#c8cedd;font-size:13px;max-width:340px;margin:0 0 12px;}
.btn{display:inline-block;background:#008aa4;color:#fff;font-size:14px;font-weight:600;padding:11px 22px;border-radius:8px;}
.heroImg{width:44%;height:140px;position:relative;}
.disc{position:absolute;right:60px;top:10px;width:100px;height:130px;border-radius:8px;background:linear-gradient(160deg,#7469ff,#00c248);}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:206px;background:#fefefe;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;z-index:2;color:#fff;}
.heart{position:absolute;top:8px;right:8px;color:#00c248;font-size:16px;}
.thumb{height:116px;background:#f2f2f2;}
.pname{font-size:16px;font-weight:500;margin:8px 0 4px;}
.pprice{font-size:16px;color:#444;margin:0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="topnav">
<div class="logo">Ubisoft Store</div>
<div class="search">Search games...</div>
<div class="carticon">CART</div>
</div>
<div class="catstrip"><span>Action</span><span>RPG</span><span>Strategy</span><span>Sports</span><span>Deals</span></div>
<div class="hero">
<div class="heroText">
<h1>New Season, New Battlegrounds</h1>
<p>Pre-order the latest releases and jump into live events before anyone else.</p>
<div class="btn">Shop Now</div>
</div>
<div class="heroImg"><div class="disc"></div></div>
</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#cc4b37">Sale</span><span class="heart">♥</span><div class="thumb" style="background:linear-gradient(135deg,#7469ff,#008aa4)"></div><div class="pname">Frostline Chronicles</div><div class="pprice">$39.99</div></div>
<div class="card"><span class="badge" style="background:#ffdd00;color:#0a0a0a;">Pre-Order</span><div class="thumb" style="background:linear-gradient(135deg,#008aa4,#00c248)"></div><div class="pname">Warfront Legacy</div><div class="pprice">$69.99</div></div>
<div class="card"><span class="badge" style="background:#00c248">New</span><div class="thumb" style="background:linear-gradient(135deg,#9b93ff,#0a0a0a)"></div><div class="pname">Skyline Racers 4</div><div class="pprice">$49.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0a0a0a,#008aa4)"></div><div class="pname">Rogue Sector</div><div class="pprice">$29.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f2ed; color: #2c1f1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f2ed; color: #2c1f1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #2c1f1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8a7f7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #4a2c2a; color: #f5f2ed;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #f5f2ed; color: #4a2c2a;
border: 1px solid #4a2c2a; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f5f2ed; color: #2c1f1d;
border: 1px solid #c3bdb9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a7f7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #c66b4d; color: #f5f2ed;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:flex; flex-direction:column; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f2ed; color:#4a3f3c; box-sizing:border-box;
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #d9d4ce; }
.brand { font-size:17px; font-weight:400; color:#2c1f1d; letter-spacing:0.5px; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:13px; font-weight:400; color:#4a3f3c; }
.cart { border:1px solid #4a2c2a; color:#4a2c2a; font-size:12px; padding:6px 14px; border-radius:4px; }
.hero { display:flex; align-items:center; gap:40px; padding:30px 40px 24px; }
.htext { max-width:380px; }
.htext h1 { font-size:26px; font-weight:400; color:#2c1f1d; margin:0 0 12px; line-height:1.35; }
.htext p { font-size:14px; color:#4a3f3c; line-height:1.6; margin:0 0 18px; }
.btn { display:inline-block; background:#4a2c2a; color:#f5f2ed; font-size:13px; font-weight:400; padding:10px 22px; border-radius:4px; }
.heroimg { width:240px; height:150px; border-radius:8px; flex-shrink:0; background:linear-gradient(150deg,#6b4c3b,#2c1f1d); }
.section { padding:0 40px; }
.section h2 { font-size:17px; font-weight:400; color:#2c1f1d; margin:0 0 14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card { background:#faf8f5; border:1px solid #d9d4ce; border-radius:8px; padding:12px; }
.cover { height:78px; border-radius:4px; margin-bottom:10px; }
.m1 .cover { background:#6b4c3b; } .m2 .cover { background:#c66b4d; } .m3 .cover { background:#d4b896; } .m4 .cover { background:#2c1f1d; }
.card .t { font-size:13px; font-weight:400; color:#2c1f1d; margin:0 0 4px; }
.card .p { font-size:12px; color:#c66b4d; font-weight:400; }
.trust { margin-top:auto; flex-shrink:0; display:flex; padding:12px 40px; border-top:1px solid #d9d4ce; }
.trust span { flex:1; text-align:center; font-size:11px; color:#8a7f7a; }
</style></head>
<body>
<nav>
<div class="brand">Grovemade</div>
<div class="navlinks"><span>Desk</span><span>Home</span><span>Wallets</span><span>About</span></div>
<div class="cart">Cart (2)</div>
</nav>
<div class="hero">
<div class="htext">
<h1>Cut from a single sheet of walnut.</h1>
<p>Desk accessories machined in Portland from solid wood, leather, and steel — built to hold their weight for decades, not seasons.</p>
<span class="btn">Shop Desk Accessories</span>
</div>
<div class="heroimg"></div>
</div>
<div class="section">
<h2>The Desk Collection</h2>
<div class="grid">
<div class="card m1"><div class="cover"></div><div class="t">Walnut Desk Shelf</div><div class="p">$185.00</div></div>
<div class="card m2"><div class="cover"></div><div class="t">Leather Pen Cup</div><div class="p">$45.00</div></div>
<div class="card m3"><div class="cover"></div><div class="t">Maple Wireless Pad</div><div class="p">$95.00</div></div>
<div class="card m4"><div class="cover"></div><div class="t">Steel & Wood Tray</div><div class="p">$65.00</div></div>
</div>
</div>
<div class="trust"><span>Made in Portland, OR</span><span>Solid Materials Only</span><span>Lifetime Warranty</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #f15623; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #111111;
border: 1px solid #f15623; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.4px; background: #e8ff7a; color: #111111;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Instrument Sans',-apple-system,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #ebebeb;}
.logo{font-family:'Cormorant',serif;font-size:24px;font-weight:600;color:#111;}
.navlinks{display:flex;gap:20px;font-family:'Poppins',sans-serif;font-size:14px;font-weight:500;color:#111;}
.cart{position:relative;font-size:18px;}
.dot{position:absolute;top:-4px;right:-8px;width:8px;height:8px;border-radius:50%;background:#f15623;}
.hero{height:260px;background:#ebf2f2;display:flex;align-items:center;padding:0 40px;gap:30px;}
.herotext{width:48%;}
.herotext h1{font-family:'Cormorant',serif;font-size:44px;font-weight:600;color:#111;margin:0 0 14px;line-height:1.1;}
.herotext p{font-size:15px;color:#121212;margin:0 0 18px;max-width:320px;}
.herocta{display:inline-block;background:#f15623;color:#fff;font-family:'Poppins',sans-serif;font-size:15px;font-weight:500;border-radius:9999px;padding:14px 28px;}
.heroimg{width:44%;height:180px;border-radius:20px;background:linear-gradient(180deg,#dbe7e8,#f15623 90%);position:relative;overflow:hidden;}
.heroimg:before{content:'';position:absolute;width:60px;height:130px;background:#fff;border-radius:30px;top:20px;left:110px;box-shadow:0 8px 18px rgba(0,0,0,0.08);}
.grid{display:flex;gap:16px;padding:20px 40px 0;}
.card{width:196px;background:#fff;border-radius:12px;border:1px solid #ebebeb;padding:12px;}
.badge{display:inline-block;background:#e8ff7a;color:#111;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;border-radius:9999px;padding:3px 10px;margin-bottom:8px;}
.thumb{height:110px;border-radius:8px;margin-bottom:8px;}
.ptitle{font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;color:#111;}
.pprice{font-size:15px;font-weight:600;color:#111;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#111111;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.footer span{color:#dedede;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Soma</div>
<div class="navlinks"><span>Water Filters</span><span>Pitchers</span><span>Bottles</span><span>Impact</span></div>
<div class="cart">🛒<span class="dot"></span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Beautiful objects that remove microplastics.</h1>
<p>Filtered water designed to sit on your counter, not hide in your fridge.</p>
<div class="herocta">Shop Filters</div>
</div>
<div class="heroimg"></div>
</div>
<div class="grid">
<div class="card"><span class="badge">Subscribe & Save</span><div class="thumb" style="background:linear-gradient(135deg,#f15623,#dbe7e8)"></div><div class="ptitle">Glass Water Filter Pitcher</div><div class="pprice">$52</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#dbe7e8,#f15623)"></div><div class="ptitle">Plant-Based Filter 4-Pack</div><div class="pprice">$32</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e8ff7a,#f15623)"></div><div class="ptitle">Stainless Water Bottle</div><div class="pprice">$38</div></div>
</div>
<div class="footer"><span>© Soma — filtered, beautifully</span><span>Sustainability · Carbon Offset</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f2ec; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f2ec; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.35; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #636262; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #ab8c52; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #f5f2ec; color: #212121;
border: 1px solid #ab8c52; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #f5f2ec; color: #2e2e2e;
border: 1px solid #c0beb9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #636262; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fab240; color: #212121;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Drift Records Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:'Georgia', 'Times New Roman', serif;
background:#f5f2ec; color:#212121;
}
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #ece7db;background:#f5f2ec;}
.logo{font-family:Helvetica,Arial,sans-serif;font-size:20px;font-weight:400;letter-spacing:-0.5px;}
.navlinks{display:flex;gap:26px;font-family:Helvetica,Arial,sans-serif;font-size:13px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;color:#636262;}
.navlinks span.active{color:#ab8c52;border-bottom:2px solid #ab8c52;padding-bottom:16px;}
.searchbar{background:#f7f4ef;border:1px solid #ece7db;border-radius:9999px;padding:8px 18px;font-family:Helvetica,sans-serif;font-size:12px;color:#a09e99;width:180px;}
.hero{padding:40px 40px 24px;text-align:left;}
.hero h1{font-family:'Helvetica Neue',Arial,sans-serif;font-size:32px;font-weight:400;letter-spacing:-0.5px;margin:0 0 12px;max-width:560px;}
.hero p{font-size:16px;color:#636262;max-width:460px;margin:0 0 18px;line-height:1.5;}
.hero-cta{display:inline-block;background:#ab8c52;color:#fff;font-family:Helvetica,sans-serif;font-size:14px;font-weight:500;letter-spacing:0.3px;padding:12px 28px;border-radius:9999px;}
.genres{display:flex;gap:10px;padding:0 40px 20px;}
.chip{border:1px solid #d9d9d9;border-radius:9999px;padding:6px 16px;font-family:Helvetica,sans-serif;font-size:12px;color:#2e2e2e;background:#f7f4ef;}
.chip.active{background:#ab8c52;color:#fff;border-color:#ab8c52;}
.grid{display:flex;gap:18px;padding:0 40px;}
.card{flex:1;background:#fcfbf9;border:1px solid #ece7db;border-radius:8px;overflow:hidden;}
.card-img{height:150px;position:relative;}
.card-img.c1{background:linear-gradient(160deg,#e8d4ae,#ab8c52);}
.card-img.c2{background:linear-gradient(160deg,#806430,#e8d4ae);}
.card-img.c3{background:linear-gradient(160deg,#fadada,#ab8c52);}
.card-img.c4{background:linear-gradient(160deg,#ab8c52,#212121);}
.badge{position:absolute;top:8px;left:8px;background:#fab240;color:#212121;font-family:Helvetica,sans-serif;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:2px 8px;border-radius:4px;}
.card-info{padding:10px 14px;}
.artist{font-family:Helvetica,sans-serif;font-size:11px;color:#636262;}
.title{font-size:16px;margin:2px 0 4px;}
.price{font-family:Helvetica,sans-serif;font-size:14px;color:#2e2e2e;}
</style>
<nav class="nav">
<div class="logo">Drift Records</div>
<div class="navlinks">
<span class="active">New Arrivals</span><span>Genres</span><span>Sales</span><span>About</span>
</div>
<div class="searchbar">Search the crates…</div>
</nav>
<div class="hero">
<h1>Records worth<br>the trip to the shop.</h1>
<p>Chicago's crate-digger paradise — pressings, liner notes, and paper stock that matter.</p>
<div class="hero-cta">Browse New Arrivals</div>
</div>
<div class="genres">
<div class="chip active">Jazz</div>
<div class="chip">Soul & Funk</div>
<div class="chip">Post-Punk</div>
<div class="chip">Ambient</div>
<div class="chip">Reissues</div>
</div>
<div class="grid">
<div class="card"><div class="card-img c1"><span class="badge">New</span></div><div class="card-info"><div class="artist">Sun Halo</div><div class="title">Marsh Light</div><div class="price">$28.00</div></div></div>
<div class="card"><div class="card-img c2"></div><div class="card-info"><div class="artist">Loom Trio</div><div class="title">Brass & Bone</div><div class="price">$24.00</div></div></div>
<div class="card"><div class="card-img c3"><span class="badge">Sale</span></div><div class="card-info"><div class="artist">Coastwalk</div><div class="title">Blush Season</div><div class="price">$19.00</div></div></div>
<div class="card"><div class="card-img c4"></div><div class="card-info"><div class="artist">Night Ledger</div><div class="title">Long Grain</div><div class="price">$32.00</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #0066ff; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fafafa; color: #1c1c1c;
border: 1px solid #0066ff; border-radius: 8px;
padding: 14px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #1c1c1c;
border: 1px solid #c2c2c2; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #0066ff; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#1c1c1c; box-sizing:border-box;
font-family:'DinPro', -apple-system, sans-serif; }
* { box-sizing:border-box; }
.cond { font-family:'DinProCondensed', 'DinPro', sans-serif; }
nav { height:64px; background:#fafafa; border-bottom:1px solid #dedede; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.brand { font-size:19px; font-weight:700; margin:0; text-transform:uppercase; letter-spacing:0.5px; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#777; }
.navlinks span:first-child { color:#1c1c1c; border-bottom:2px solid #0066ff; padding-bottom:20px; }
.search { width:150px; height:34px; background:#fff; border:1px solid #dedede; border-radius:9999px; font-size:12px;
color:#a4a4a4; display:flex; align-items:center; padding-left:14px; }
.hero { background:#121212; padding:30px 40px; display:flex; align-items:center; gap:32px; }
.hero-copy { flex:1.2; }
.hero h1 { color:#fff; font-family:'DinProCondensed'; font-size:40px; font-weight:700; line-height:1.1;
letter-spacing:-0.5px; margin:0 0 10px; max-width:420px; }
.hero p { color:#a4a4a4; font-size:14px; margin:0 0 18px; max-width:380px; line-height:1.5; }
.btn-primary { background:#0066ff; color:#fff; border:none; border-radius:8px; padding:16px 32px;
font-size:15px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; height:56px; }
.hero-visual { flex:1; height:150px; border-radius:8px; background:#1c1c1c; position:relative; overflow:hidden; }
.hero-visual::before { content:''; position:absolute; width:60px; height:110px; border-radius:8px 8px 20px 20px;
background:linear-gradient(160deg,#0066ff,#0052cc); left:70px; top:16px; }
.hero-visual::after { content:''; position:absolute; width:50px; height:90px; border-radius:8px 8px 20px 20px;
background:linear-gradient(160deg,#1990c6,#136f99); right:80px; bottom:16px; }
.section { padding:18px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-family:'DinProCondensed'; font-size:22px; font-weight:700; margin:0; }
.sec-head span { font-size:12px; color:#0066ff; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#fff; border:1px solid #dedede; border-radius:12px; padding:16px; }
.thumb { aspect-ratio:1/1; border-radius:8px; position:relative; margin-bottom:10px; }
.t1 { background:linear-gradient(150deg,#0066ff,#0052cc); }
.t2 { background:linear-gradient(150deg,#1990c6,#136f99); }
.t3 { background:linear-gradient(150deg,#dedede,#a4a4a4); }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
padding:2px 8px; border-radius:4px; color:#fff; }
.badge.new { background:#0066ff; }
.badge.sale { background:#1990c6; }
.card h3 { font-size:16px; font-weight:600; margin:4px 0 2px; }
.price { font-size:16px; margin:0; }
footer { background:#121212; color:#a4a4a4; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#a4a4a4; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Bevel</p>
<div class="navlinks"><span>Shave</span><span>Skin</span><span>Hair</span><span>Trial Kit</span></div>
<div class="search">Search…</div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1 class="cond">Precision built for every man</h1>
<p>Single-blade razors and formulations engineered to prevent bumps and ingrown hairs.</p>
<button class="btn-primary">Shop the Kit</button>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2>Best Sellers</h2><span>Shop All</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge new">New</span></div>
<h3>Single Blade Razor</h3>
<p class="price">$65.00</p>
</div>
<div class="card">
<div class="thumb t2"><span class="badge sale">Sale</span></div>
<h3>Priming Shave Oil</h3>
<p class="price">$18.00</p>
</div>
<div class="card">
<div class="thumb t3"></div>
<h3>Trial Kit, Full Routine</h3>
<p class="price">$39.95</p>
</div>
</div>
</section>
<footer>
<span>© Bevel</span>
<div><a href="#">Shave School</a><a href="#">Support</a><a href="#">Company</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #2b6b3e; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #2b6b3e;
border: 1px solid #2b6b3e; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; background: #2b6b3e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,'Helvetica Neue',Roboto,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #d9d9d9;}
.logo{font-size:20px;font-weight:600;color:#1e5430;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#4a4a4a;}
.cta{background:#2b6b3e;color:#fff;font-size:13px;font-weight:600;padding:9px 18px;border-radius:6px;}
.hero{height:250px;display:flex;background:#f5f3f0;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 34px;}
.tag{display:inline-block;background:#2b6b3e;color:#fff;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;border-radius:9999px;padding:5px 12px;width:fit-content;margin-bottom:12px;}
.herotext h1{font-size:38px;font-weight:600;margin:0 0 10px;line-height:1.15;color:#1e5430;}
.herotext p{font-size:14px;color:#717171;margin:0 0 16px;max-width:320px;}
.btn{display:inline-block;background:#2b6b3e;color:#fff;font-size:13px;font-weight:600;padding:12px 22px;border-radius:6px;width:fit-content;}
.heroimg{width:54%;position:relative;overflow:hidden;background:linear-gradient(180deg,#a3c5ad,#2b6b3e 80%);}
.pot{position:absolute;bottom:20px;width:74px;height:64px;border-radius:6px 6px 20px 20px;background:#a86e2d;}
.pot1{left:60px;}
.pot2{left:150px;height:80px;bottom:20px;background:#c4853b;}
.pot3{left:240px;background:#a86e2d;}
.leaf{position:absolute;width:40px;height:60px;border-radius:0 100% 0 100%;background:#1e5430;}
.leaf1{left:70px;bottom:80px;}
.leaf2{left:158px;bottom:96px;}
.leaf3{left:250px;bottom:80px;}
.sec{padding:20px 34px 0;}
.sectitle{font-size:17px;font-weight:600;color:#1e5430;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:8px;padding:10px;}
.thumb{height:100px;border-radius:8px;margin-bottom:8px;position:relative;overflow:hidden;background:#f5f3f0;}
.thumb-plant{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:38px;height:56px;border-radius:0 100% 0 100%;}
.badge{position:absolute;top:8px;left:8px;background:#2b6b3e;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;border-radius:9999px;padding:3px 9px;}
.pname{font-size:14px;font-weight:600;color:#313131;}
.pprice{font-size:13px;color:#717171;margin-top:3px;}
</style>
<div class="nav">
<div class="logo">Monrovia</div>
<div class="navlinks"><span>Shrubs</span><span>Trees</span><span>Perennials</span><span>Find a Retailer</span></div>
<div class="cta">Find Plants</div>
</div>
<div class="hero">
<div class="herotext">
<div class="tag">Grower Direct</div>
<h1>Well-Rooted, Ready to Thrive</h1>
<p>Cultivars raised on the nursery bench, tagged and shipped when they're ready — not before.</p>
<div class="btn">Shop This Season</div>
</div>
<div class="heroimg">
<div class="pot pot1"></div><div class="leaf leaf1"></div>
<div class="pot pot2"></div><div class="leaf leaf2"></div>
<div class="pot pot3"></div><div class="leaf leaf3"></div>
</div>
</div>
<div class="sec">
<div class="sectitle">Featured Plants</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge">New</span><div class="thumb-plant" style="background:#1e5430"></div></div><div class="pname">Hydrangea 'Limelight'</div><div class="pprice">$42.99</div></div>
<div class="card"><div class="thumb"><div class="thumb-plant" style="background:#2b6b3e"></div></div><div class="pname">Japanese Maple</div><div class="pprice">$89.99</div></div>
<div class="card"><div class="thumb"><div class="thumb-plant" style="background:#a3c5ad"></div></div><div class="pname">Boxwood 'Green Velvet'</div><div class="pprice">$34.99</div></div>
<div class="card"><div class="thumb"><div class="thumb-plant" style="background:#1e5430"></div></div><div class="pname">Rosa 'Knock Out'</div><div class="pprice">$28.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.36; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: 0.5px; background: #002147; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: 0.5px; background: #ffffff; color: #002147;
border: 1px solid #002147; border-radius: 4px;
padding: 9px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.63; background: #ffffff; color: #333333;
border: 1px solid #bfbfbf; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: 0.5px; background: #c8102e; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; color:#333333; font-size:13px; }
*{box-sizing:border-box;}
.utility{height:26px;background:#002147;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 24px;font-size:11px;color:#fff;}
.masthead{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:2px solid #002147;}
.shield{width:34px;height:34px;border-radius:2px;background:#002147;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;margin-right:10px;}
.brandrow{display:flex;align-items:center;}
.brand{font-size:17px;font-weight:700;color:#002147;}
.search{width:220px;height:28px;border:1px solid #cccccc;display:flex;align-items:center;padding:0 8px;font-size:12px;color:#666;}
.megabar{height:30px;background:#f5f5f5;border-bottom:1px solid #cccccc;display:flex;align-items:center;gap:18px;padding:0 24px;font-size:11px;color:#002147;font-weight:700;}
.body{display:flex;padding:14px 24px 0;gap:20px;}
.sidenav{width:150px;font-size:11px;color:#002147;line-height:2.1;border-right:1px solid #e6e6e6;padding-right:14px;}
.sidenav .h{font-weight:700;color:#000;margin-bottom:4px;}
.main{flex:1;}
.pagetitle{font-size:20px;font-weight:700;color:#000;margin:0 0 4px;}
.pagesub{font-size:12px;color:#666;margin:0 0 12px;}
.books{display:flex;gap:14px;}
.book{width:150px;}
.cover{height:110px;background:#002147;border:1px solid #001a36;position:relative;}
.cover:before{content:'';position:absolute;left:8px;top:8px;right:8px;height:1px;background:rgba(255,255,255,0.4);}
.btitle{font-size:12px;font-weight:700;color:#000;margin:6px 0 2px;line-height:1.3;}
.bauthor{font-size:11px;color:#666;margin:0 0 3px;}
.bprice{font-size:12px;color:#002147;font-weight:700;margin:0;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#002147;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:11px;color:#b3c4d4;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="utility"><span>Login</span><span>Cart (0)</span><span>Help</span></div>
<div class="masthead">
<div class="brandrow"><div class="shield">OUP</div><div class="brand">Oxford University Press</div></div>
<div class="search">Search 40,000+ titles...</div>
</div>
<div class="megabar"><span>History</span><span>Law</span><span>Medicine</span><span>Philosophy</span><span>Linguistics</span><span>Economics</span><span>Reference</span></div>
<div class="body">
<div class="sidenav">
<div class="h">Subjects</div>
<div>Ancient History</div>
<div>Classical Studies</div>
<div>Political Science</div>
<div>Biological Sciences</div>
<div>Music</div>
<div>Religion</div>
<div>Mathematics</div>
</div>
<div class="main">
<div class="pagetitle">A History of Western Philosophy, Vol. II</div>
<div class="pagesub">Hardcover · 612 pages · ISBN 978-0-19-928176-2</div>
<div class="books">
<div class="book"><div class="cover"></div><div class="btitle">Western Philosophy, Vol. II</div><div class="bauthor">R. Aldworth</div><div class="bprice">$64.00</div></div>
<div class="book"><div class="cover"></div><div class="btitle">The Oxford Companion to Law</div><div class="bauthor">D. Marchand</div><div class="bprice">$89.00</div></div>
<div class="book"><div class="cover"></div><div class="btitle">Principles of Linguistics</div><div class="bauthor">S. Whitfield</div><div class="bprice">$52.00</div></div>
<div class="book"><div class="cover"></div><div class="btitle">Concise Medical Dictionary</div><div class="bauthor">OUP Editorial Board</div><div class="bprice">$41.00</div></div>
</div>
</div>
</div>
<div class="footer"><span>© Oxford University Press</span><span>Terms · Privacy · Accessibility</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e7e9ea; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #e7e9ea;
border: 1px solid #e7e9ea; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #252525; color: #e7e9ea;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#E7E9EA; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-feature-settings:"zero" 1; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#000; padding:22px 16px; position:relative; border-right:1px solid #2F3336; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.modepill { background:#16181C; border:1px solid #2F3336; border-radius:18px; padding:6px 4px; display:flex; font-size:12px; }
.modepill span { padding:6px 14px; border-radius:14px; font-weight:600; }
.modepill span.act { background:#fff; color:#000; }
.userbub { background:#16181C; border-radius:20px 20px 6px 20px; padding:12px 16px; font-size:14px;
max-width:78%; margin-left:auto; margin-bottom:16px; }
.assist { font-size:14px; line-height:1.55; margin-bottom:14px; }
.assist .sp { color:#E7E9EA; }
.citecard { background:#1E2126; border:1px solid #2F3336; border-radius:16px; padding:12px; margin-bottom:16px; }
.cite-head { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.cav { width:24px; height:24px; border-radius:50%; background:#3B4754; }
.cname { font-size:13px; font-weight:700; }
.chandle { font-size:12px; color:#71767B; }
.citebody { font-size:12px; color:#E7E9EA; }
.promptbar { position:absolute; left:16px; right:16px; bottom:20px; height:48px; border-radius:24px; background:#16181C;
border:1px solid #2F3336; display:flex; align-items:center; padding:0 14px; gap:10px; }
.promptbar .ph { font-size:14px; color:#71767B; flex:1; }
.sendbtn { width:32px; height:32px; border-radius:50%; background:#fff; color:#000; display:flex;
align-items:center; justify-content:center; font-size:14px; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:700; letter-spacing:-0.4px; margin:0; }
.brand span { color:#1D9BF0; }
.tag { font-size:14px; color:#71767B; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:14px; border:1px solid #2F3336; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#71767B; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:700; }
.typeblock .t2 { font-size:13px; color:#71767B; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:14px;
background:#16181C; border:1px solid #2F3336; color:#71767B; }
.footer { margin-top:auto; border-top:1px solid #2F3336; padding-top:16px; font-size:11px; color:#4D5156; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="topbar"><span>☰</span><div class="modepill"><span class="act">Regular</span><span>Fun</span></div><span>✎</span></div>
<div class="userbub">What's the latest on the satellite launch?</div>
<div class="assist">Live coverage confirms the launch window opened on schedule; telemetry shows nominal orbit insertion.<span class="sp">▍</span></div>
<div class="citecard">
<div class="cite-head"><span class="cav"></span><span class="cname">Space Desk</span><span style="color:#1D9BF0">✓</span><span class="chandle">@spacedesk · 2h</span></div>
<div class="citebody">Confirmed: stage separation nominal, second burn in T-4 minutes. 🚀</div>
</div>
<div class="promptbar"><span class="ph">Ask Grok anything</span><div class="sendbtn">↑</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">Grok (iOS)<span>.</span></h1>
<p class="tag">A true-black terminal for a conversation — monochrome by design, with X's link blue reserved for live post citations.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#000000"></div><small>#000000</small></div>
<div class="sw"><div class="chip2" style="background:#1D9BF0"></div><small>#1D9BF0</small></div>
<div class="sw"><div class="chip2" style="background:#16181C"></div><small>#16181C</small></div>
<div class="sw"><div class="chip2" style="background:#1E2126"></div><small>#1E2126</small></div>
<div class="sw"><div class="chip2" style="background:#00BA7C"></div><small>#00BA7C</small></div>
</div>
<div class="typeblock">
<div class="t1">Ask Grok anything</div>
<div class="t2">Inter · slashed-zero on · streaming tokens with a blinking block cursor ▍</div>
</div>
<div class="taglist">
<span>X post citation card</span><span>No bubble on replies</span><span>Regular / Fun toggle</span>
<span>History slide-over</span><span>No bottom tab bar</span>
</div>
<div class="footer">True black #000000 inherited from X · monochrome + one link blue, nothing else</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #6366f1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #6366f1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0007cd; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6366f1; color: #000000;
border: 1px solid #0007cd; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #6366f1; color: #f5f5f5;
border: 1px solid #7a7df2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5357eb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0f0f0f; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.glow { position:absolute; width:520px; height:520px; border-radius:50%; top:-180px; left:220px;
background:radial-gradient(circle, rgba(0,255,255,0.12) 0%, rgba(0,255,255,0) 70%); }
nav { position:relative; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid rgba(255,255,255,0.08); }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; color:rgba(255,255,255,0.6); }
.btn-white { background:#fff; color:#0f0f0f; border-radius:4px; padding:9px 18px; font-size:13px; font-weight:500; }
.hero { position:relative; padding:44px 40px 20px; }
.hero h1 { font-size:52px; font-weight:400; line-height:0.9; letter-spacing:-1px; margin:0 0 14px; max-width:600px; }
.hero p { font-size:16px; color:rgba(255,255,255,0.6); max-width:440px; margin:0 0 18px; }
.row { display:flex; gap:10px; }
.btn-cyan { background:rgba(0,255,255,0.12); border:1px solid #0096ff; color:#fff; border-radius:4px; padding:9px 18px; font-size:13px; font-weight:500; }
.btn-ghost { background:transparent; border:1px solid #2c2c2c; color:#fff; border-radius:4px; padding:9px 18px; font-size:13px; font-weight:500; }
.grid { position:relative; display:grid; grid-template-columns:1.2fr 1fr; gap:16px; padding:8px 40px 30px; }
.code { background:#000; border:1px solid rgba(255,255,255,0.10); border-radius:4px; padding:16px;
font-family:"Consolas","Menlo",monospace; font-size:12px; line-height:1.7; color:rgba(255,255,255,0.85);
box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.15); }
.code .kw { color:#00ffff; } .code .str { color:#0089ff; }
.side { display:flex; flex-direction:column; gap:10px; }
.stat { background:#000; border:1px solid rgba(255,255,255,0.08); border-radius:4px; padding:14px; }
.stat .num { font-family:"Menlo",monospace; font-size:26px; font-weight:700; }
.stat .lbl { font-size:11px; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:0.05em; margin-top:4px;}
</style></head>
<body>
<div class="glow"></div>
<nav>
<p class="brand">Composio</p>
<div class="navlinks"><span>Tools</span><span>Agents</span><span>Docs</span><span>Pricing</span></div>
<button class="btn-white">GET STARTED</button>
</nav>
<section class="hero">
<h1>Tool calling for AI agents</h1>
<p>200+ integrations your agent can call — auth handled, latency measured, nothing hidden behind abstraction.</p>
<div class="row">
<button class="btn-cyan">ADD TO MY AGENT</button>
<button class="btn-ghost">TRY IT OUT</button>
</div>
</section>
<section class="grid">
<div class="code">
<span class="kw">from</span> composio <span class="kw">import</span> Composio<br>
client = Composio(api_key=<span class="str">"..."</span>)<br>
tools = client.tools.get(user_id=<span class="str">"u_1"</span>,<br>
toolkits=[<span class="str">"github"</span>, <span class="str">"slack"</span>])<br>
result = agent.run(tools=tools)
</div>
<div class="side">
<div class="stat"><div class="num">200+</div><div class="lbl">Tools & APIs</div></div>
<div class="stat"><div class="num">100K+</div><div class="lbl">Developers</div></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ededed; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ededed; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #747474; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ededed; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ededed; color: #111111;
border: 1px solid #cacaca; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #747474; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f0f0f0; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#EDEDED; color:#181818; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { position:relative; }
.phone { position:absolute; top:20px; width:300px; height:600px; background:#0B0C0D; border-radius:36px; padding:9px; box-shadow:0 20px 50px rgba(0,0,0,0.25); }
.screen { position:relative; width:100%; height:100%; border-radius:27px; overflow:hidden; background:#EDEDED; }
.notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width:116px; height:20px; background:#0B0C0D; border-radius:0 0 12px 12px; z-index:9; }
/* ---- middle brand column ---- */
.brandcol { position:absolute; left:358px; top:0; width:244px; height:640px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; }
.wordmark { font-size:26px; font-weight:600; color:#07C160; letter-spacing:-0.3px; }
.brandcol p { font-size:13px; color:#888888; max-width:190px; line-height:1.5; margin:0; }
.reddot-demo { display:flex; align-items:center; gap:8px; background:#fff; border-radius:10px; padding:10px 14px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.reddot-demo .dot { width:9px; height:9px; border-radius:50%; background:#FA5151; }
.reddot-demo span { font-size:12px; color:#181818; font-weight:400; }
.avatar-demo { width:44px; height:44px; border-radius:9px; background:linear-gradient(160deg,#95EC69,#07C160); }
/* ===================== phone 1 : chat ===================== */
.p1 { left:32px; }
.topbar { height:44px; padding-top:6px; display:flex; align-items:center; justify-content:space-between; padding-left:12px; padding-right:12px; background:#EDEDED; border-bottom:0.5px solid #D9D9D9; }
.topbar .back { font-size:18px; color:#181818; }
.topbar .title { font-size:17px; font-weight:600; }
.topbar .more { font-size:18px; color:#181818; }
.thread { padding:10px 8px; }
.timesep { text-align:center; font-size:12px; color:#888888; margin:6px 0 12px; }
.msgrow { display:flex; align-items:flex-end; gap:8px; margin-bottom:12px; }
.msgrow.out { justify-content:flex-end; }
.av { width:38px; height:38px; border-radius:8px; flex:none; }
.av.in { background:linear-gradient(160deg,#F4E6CE,#F1D9DC); }
.av.out { background:linear-gradient(160deg,#95EC69,#07C160); }
.bub { max-width:180px; padding:9px 12px; border-radius:6px; font-size:15px; line-height:1.4; position:relative; }
.bub.in { background:#FFFFFF; }
.bub.in::after { content:''; position:absolute; left:-5px; bottom:11px; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-right:6px solid #FFFFFF; }
.bub.out { background:#95EC69; }
.bub.out::after { content:''; position:absolute; right:-5px; bottom:11px; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:6px solid #95EC69; }
.packet { width:190px; background:linear-gradient(160deg,#FA5151,#D33A3A); border-radius:8px; padding:14px 14px 12px; box-shadow:0 2px 8px rgba(0,0,0,0.14); color:#fff; }
.packet .seal { width:40px; height:40px; border-radius:50%; background:#FBE3B3; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; font-size:16px; color:#B8892B; }
.packet .wish { text-align:center; font-size:13px; font-weight:600; }
.packet .sender { text-align:center; font-size:11px; opacity:.85; margin-top:4px; border-top:1px solid rgba(255,255,255,0.25); padding-top:8px; }
.composer { position:absolute; bottom:0; left:0; right:0; background:#EDEDED; border-top:0.5px solid #D9D9D9; padding:8px 10px; display:flex; align-items:center; gap:8px; }
.composer .mic { font-size:20px; }
.composer .field { flex:1; height:34px; background:#FFFFFF; border-radius:6px; }
.composer .send { background:#07C160; color:#fff; font-size:13px; font-weight:600; padding:0 14px; height:30px; display:flex; align-items:center; border-radius:4px; }
/* ===================== phone 2 : discover ===================== */
.p2 { left:628px; }
.dtitle { text-align:center; font-size:17px; font-weight:600; height:44px; line-height:44px; background:#EDEDED; border-bottom:0.5px solid #D9D9D9; }
.gutter { height:12px; }
.drow { height:56px; background:#FFFFFF; display:flex; align-items:center; padding:0 12px; gap:12px; border-bottom:0.5px solid #D9D9D9; }
.drow:last-child { border-bottom:none; }
.dicon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; flex:none; }
.drow .dt { flex:1; font-size:17px; }
.drow .badge { width:8px; height:8px; border-radius:50%; background:#FA5151; }
.drow .chev { color:#B2B2B2; font-size:15px; }
.tabbar2 { position:absolute; bottom:0; left:0; right:0; height:56px; background:#F7F7F7; border-top:0.5px solid #D9D9D9; display:flex; }
.tab2 { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:10px; color:#999999; }
.tab2 .ts { width:20px; height:20px; border-radius:5px; background:#999999; }
.tab2.active { color:#07C160; }
.tab2.active .ts { background:#07C160; }
</style></head>
<body>
<div class="phone p1">
<div class="screen">
<div class="notch"></div>
<div class="topbar"><span class="back">‹</span><span class="title">Family Group</span><span class="more">⋮</span></div>
<div class="thread">
<div class="timesep">2:14 PM</div>
<div class="msgrow"><div class="av in"></div><div class="bub in">Are we still on for dinner at 7?</div></div>
<div class="msgrow out"><div class="bub out">Yes! I'll bring the mooncakes 🥮</div><div class="av out"></div></div>
<div class="msgrow"><div class="av in"></div><div class="bub in">Perfect, see you soon</div></div>
<div class="msgrow out">
<div class="packet">
<div class="seal">🧧</div>
<div class="wish">Best wishes!</div>
<div class="sender">From Li Wei · Tap to open</div>
</div>
</div>
<div class="msgrow"><div class="av in"></div><div class="bub in">😍 thank you!!</div></div>
</div>
<div class="composer"><span class="mic">🎙️</span><div class="field"></div><div class="send">Send</div></div>
</div>
</div>
<div class="brandcol">
<div class="avatar-demo"></div>
<div class="wordmark">WeChat (iOS)</div>
<p>Chats, Moments, payments and Mini Programs — one calm gray list holds the whole ecosystem.</p>
<div class="reddot-demo"><span class="dot"></span><span>Unread activity uses one red dot, everywhere</span></div>
</div>
<div class="phone p2">
<div class="screen">
<div class="notch"></div>
<div class="dtitle">Discover</div>
<div class="drow"><div class="dicon" style="background:#3F7DD5;">◐</div><div class="dt">Moments</div><div class="badge"></div><div class="chev">›</div></div>
<div class="gutter"></div>
<div class="drow"><div class="dicon" style="background:#FA9D3B;">▶</div><div class="dt">Channels</div><div class="chev">›</div></div>
<div class="drow"><div class="dicon" style="background:#2EA0F8;">▣</div><div class="dt">Scan</div><div class="chev">›</div></div>
<div class="drow"><div class="dicon" style="background:#EB6F6F;">✦</div><div class="dt">Top Stories</div><div class="chev">›</div></div>
<div class="gutter"></div>
<div class="drow"><div class="dicon" style="background:#5C7CFA;">⌕</div><div class="dt">Search</div><div class="chev">›</div></div>
<div class="drow"><div class="dicon" style="background:#F76F34;">⌖</div><div class="dt">People Nearby</div><div class="chev">›</div></div>
<div class="gutter"></div>
<div class="drow"><div class="dicon" style="background:#3CC51F;">▦</div><div class="dt">Mini Programs</div><div class="chev">›</div></div>
<div class="tabbar2">
<div class="tab2"><div class="ts"></div>Chats</div>
<div class="tab2"><div class="ts"></div>Contacts</div>
<div class="tab2 active"><div class="ts"></div>Discover</div>
<div class="tab2"><div class="ts"></div>Me</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f5; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f5; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #272d3f; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f6f6f5; color: #272d3f;
border: 1px solid #272d3f; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f6f6f5; color: #333333;
border: 1px solid #bdbdbc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #088f87; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; background:#f6f6f5; color:#333; }
*{box-sizing:border-box;}
.nav{height:60px;background:#272d3f;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{color:#fff;font-family:Georgia,serif;font-size:21px;letter-spacing:.5px;}
.navlinks{display:flex;gap:20px;color:#fff;font-size:13px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;}
.searchicon{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.1);}
.hero{display:flex;height:260px;}
.heroimg{width:58%;background:linear-gradient(135deg,#272d3f,#088f87 85%);position:relative;overflow:hidden;}
.heroimg:before{content:'';position:absolute;left:30px;top:30px;width:130px;height:90px;border-radius:8px;background:rgba(255,255,255,.12);}
.heroimg:after{content:'';position:absolute;right:30px;bottom:30px;width:100px;height:100px;border-radius:8px;background:rgba(255,255,255,.1);}
.herotext{width:42%;display:flex;flex-direction:column;justify-content:center;padding:0 32px;background:#f6f6f5;}
.herotext h1{font-family:Georgia,serif;font-size:28px;font-weight:700;color:#121212;margin:0 0 10px;line-height:1.25;}
.herotext p{font-size:14px;color:#767676;margin:0 0 16px;max-width:300px;}
.herocta{display:inline-block;background:#272d3f;color:#fff;font-size:13px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;padding:12px 24px;border-radius:8px;width:fit-content;}
.grid{display:flex;gap:14px;padding:18px 30px 0;}
.card{width:150px;background:#fff;border-radius:4px;padding:8px;}
.thumb{height:105px;border-radius:4px;margin-bottom:8px;position:relative;overflow:hidden;}
.badge{position:absolute;top:6px;left:6px;background:#088f87;color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;border-radius:2px;}
.ptitle{font-family:Georgia,serif;font-size:14px;color:#121212;height:32px;overflow:hidden;line-height:1.3;}
.pprice{font-size:14px;font-weight:600;color:#272d3f;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#272d3f;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;color:#adadad;}
.footer span{margin-left:14px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Jayson Home</div>
<div class="navlinks"><div>Furniture</div><div>Lighting</div><div>Decor</div><div>Outdoor</div></div>
<div class="searchicon"></div>
</div>
<div class="hero">
<div class="heroimg"></div>
<div class="herotext">
<h1>Considered Living, Chicago-Made</h1>
<p>A well-edited room, curated one piece at a time.</p>
<div class="herocta">Shop the Collection</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#272d3f,#1990c6)"><span class="badge">New</span></div><div class="ptitle">Antique Brass Table Lamp</div><div class="pprice">$248.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#088f87,#272d3f)"></div><div class="ptitle">Reclaimed Oak Console Table</div><div class="pprice">$890.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1990c6,#136f99)"></div><div class="ptitle">Woven Rattan Armchair</div><div class="pprice">$620.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#767676,#272d3f)"></div><div class="ptitle">Hand-Thrown Ceramic Vase Set</div><div class="pprice">$96.00</div></div>
</div>
<div class="footer"><span>© Chicago, Since 1998</span><span>Design Services<span> Trade Program</span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2f2f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f2f2f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1A1A1A; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.appbar { height:56px; background:#003580; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; }
.appbar b { color:#fff; font-size:15px; font-weight:700; }
.appbar span { color:rgba(255,255,255,0.7); font-size:12px; }
.appbar .btn { background:#0071C2; color:#fff; border-radius:8px; padding:8px 16px; font-size:12px; font-weight:700; }
.searchcard { position:relative; margin:-24px 36px 0; background:#fff; border-radius:8px;
box-shadow:rgba(26,26,26,0.12) 0 4px 14px; padding:6px 0; z-index:2; }
.srow { display:flex; align-items:center; gap:10px; padding:9px 18px; border-bottom:1px solid #E0E0E0; font-size:13px; }
.srow:last-child { border-bottom:none; }
.srow .ic { font-size:14px; }
.srow b { font-weight:600; }
.srowbtn { padding:8px 16px; }
.searchbtn { width:100%; background:#0071C2; color:#fff; border:none; border-radius:8px; padding:11px 0;
font-weight:700; font-size:14px; }
.genius { margin:16px 36px 0; background:#003580; border-radius:8px; padding:12px 18px; display:flex; align-items:center; justify-content:space-between; }
.genius b { color:#fff; font-size:13px; font-weight:700; }
.genius span.sub { color:rgba(255,255,255,0.75); font-size:11px; display:block; margin-top:1px; }
.genius .chip { background:#FEBB02; color:#1A1A1A; font-size:11px; font-weight:700; border-radius:999px; padding:5px 12px; }
.cards { display:flex; gap:16px; padding:16px 36px 0; }
.pcard { flex:1; background:#fff; border:1px solid #E0E0E0; border-radius:8px; overflow:hidden; display:flex; }
.pphoto { width:100px; flex-shrink:0; background:linear-gradient(155deg,#dfeaf5,#8bb8dd); }
.pinfo { flex:1; padding:10px 12px; }
.pinfo .pname { font-size:14px; font-weight:700; margin:0 0 2px; }
.ploc { font-size:11px; color:#0071C2; } .pdist { font-size:11px; color:#6B6B6B; }
.pfree { font-size:11px; color:#008009; font-weight:600; margin-top:3px; }
.scorerow { display:flex; align-items:center; gap:6px; margin-top:6px; }
.scorebadge { background:#003580; color:#fff; font-size:12px; font-weight:700; border-radius:5px; padding:3px 6px; }
.scoreword { font-size:11px; font-weight:700; }
.scorect { font-size:10px; color:#6B6B6B; }
.pricebox { text-align:right; margin-top:8px; }
.pstrike { font-size:11px; color:#949494; text-decoration:line-through; }
.pprice { font-size:15px; font-weight:700; }
.ptax { font-size:9px; color:#6B6B6B; }
.urgency { font-size:10px; color:#CC0000; font-weight:600; margin-top:3px; }
footer { position:absolute; bottom:0; left:0; right:0; height:52px; border-top:1px solid #E0E0E0;
display:flex; align-items:center; justify-content:space-around; padding:0 36px; font-size:10px; color:#6B6B6B; font-weight:600; }
footer span.on { color:#0071C2; }
</style></head>
<body>
<div class="appbar">
<b>Booking.com (iOS)</b>
<span>Seoul · Fri 12 Jul — Sun 14 Jul · 2 adults</span>
<span class="btn">Search</span>
</div>
<div class="searchcard">
<div class="srow"><span class="ic">📍</span><b>Where are you going?</b></div>
<div class="srow"><span class="ic">📅</span>Fri 12 Jul — Sun 14 Jul</div>
<div class="srow"><span class="ic">🧑</span>2 adults · 0 children · 1 room</div>
<div style="padding:8px 18px 4px;"><button class="searchbtn">Search</button></div>
</div>
<div class="genius">
<div><b>Genius</b><span class="sub">You're a Genius Level 1 member</span></div>
<span class="chip">10% off</span>
</div>
<div class="cards">
<div class="pcard">
<div class="pphoto"></div>
<div class="pinfo">
<p class="pname">Grand Plaza Hotel</p>
<span class="ploc">City centre</span> <span class="pdist">· 0.5 km</span>
<div class="pfree">Free cancellation</div>
<div class="scorerow"><span class="scorebadge">8.9</span><span class="scoreword">Fabulous</span><span class="scorect">· 1,284 reviews</span></div>
<div class="pricebox">
<div class="pstrike">$240</div>
<div class="pprice">$198</div>
<div class="ptax">Includes taxes and fees</div>
<div class="urgency">Only 2 rooms left</div>
</div>
</div>
</div>
<div class="pcard">
<div class="pphoto" style="background:linear-gradient(155deg,#f5e6d3,#d9b285);"></div>
<div class="pinfo">
<p class="pname">Riverside Boutique Inn</p>
<span class="ploc">Mapo-gu</span> <span class="pdist">· 2.1 km</span>
<div class="pfree">Breakfast included</div>
<div class="scorerow"><span class="scorebadge">9.2</span><span class="scoreword">Exceptional</span><span class="scorect">· 642 reviews</span></div>
<div class="pricebox">
<div class="pprice">$142</div>
<div class="ptax">Includes taxes and fees</div>
</div>
</div>
</div>
</div>
<footer>
<span class="on">Search</span><span>Saved</span><span>Bookings</span><span>Profile</span><span>Help</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fd267a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fd267a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6036; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fd267a; color: #000000;
border: 1px solid #ff6036; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fd267a; color: #f5f5f5;
border: 1px solid #fc478e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fd2f6f; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#424242; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { display:flex; width:960px; height:640px; }
.hero { width:340px; padding:0 48px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.flame { width:44px; height:44px; border-radius:50% 50% 50% 0; background:linear-gradient(135deg,#FD267A,#FF6036); transform:rotate(45deg); }
.word { font-size:26px; font-weight:700; margin:6px 0 0; }
.tag { font-size:15px; color:#737373; line-height:1.5; }
.swipeside { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:20px; }
.card { position:relative; width:280px; height:373px; border-radius:16px; overflow:hidden; box-shadow:rgba(0,0,0,0.15) 0 4px 16px;
background:linear-gradient(160deg,#e0c9a6,#8a6a4a 75%); }
.dots { position:absolute; top:8px; left:16px; right:16px; display:flex; gap:3px; }
.dots i { flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,0.4); }
.dots i.on { background:#fff; }
.grad { position:absolute; left:0; right:0; bottom:0; height:36%; background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.7)); }
.nameage { position:absolute; left:16px; bottom:44px; color:#fff; font-size:28px; font-weight:700; }
.nameage span { font-size:24px; font-weight:400; }
.metarow { position:absolute; left:16px; bottom:20px; color:rgba(255,255,255,0.9); font-size:13px; }
.stamp { position:absolute; top:60px; left:20px; border:4px solid #00D68F; color:#00D68F; font-size:28px; font-weight:800; font-style:italic; padding:4px 10px; transform:rotate(-15deg); }
.actionrow { display:flex; align-items:center; gap:14px; }
.abtn { border-radius:50%; background:#fff; box-shadow:rgba(0,0,0,0.1) 0 2px 8px; display:flex; align-items:center; justify-content:center; }
.a-rw { width:48px; height:48px; border:2px solid #FFBD3B; color:#FFBD3B; font-size:16px; }
.a-no { width:56px; height:56px; border:2px solid #FF4458; color:#FF4458; font-size:20px; }
.a-sl { width:40px; height:40px; border:2px solid #5D8DF1; color:#5D8DF1; font-size:16px; }
.a-li { width:56px; height:56px; border:2px solid #00D68F; color:#00D68F; font-size:20px; }
.a-bo { width:48px; height:48px; border:2px solid #A952FF; color:#A952FF; font-size:16px; }
</style></head>
<body>
<div class="stage">
<div class="hero">
<div class="flame"></div>
<div class="word">Tinder (iOS)</div>
<p class="tag">One card, five colored verbs. The gradient stays sealed behind glass until two people say yes at the same time.</p>
</div>
<div class="swipeside">
<div class="card">
<div class="dots"><i class="on"></i><i></i><i></i></div>
<div class="stamp">LIKE</div>
<div class="grad"></div>
<div class="nameage">Jamie<span>, 27</span></div>
<div class="metarow">2 miles away · Product Designer</div>
</div>
<div class="actionrow">
<div class="abtn a-rw">↺</div>
<div class="abtn a-no">✕</div>
<div class="abtn a-sl">★</div>
<div class="abtn a-li">♥</div>
<div class="abtn a-bo">⚡</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #155dfc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #155dfc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #90b1f8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0970ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #155dfc; color: #ffffff;
border: 1px solid #0970ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #155dfc; color: #f5f5f5;
border: 1px solid #3975fb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #90b1f8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1360fc; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0a0c; color:#fafafa; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { display:flex; justify-content:space-between; align-items:center; padding:18px 32px; }
.navlinks { display:flex; gap:18px; font-size:14px; }
.navlinks span.act { background:rgba(255,255,255,0.08); border-radius:10px; padding:8px 12px; }
.ghost { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); color:#fafafa;
border-radius:8px; height:36px; padding:0 20px; font-size:14px; font-weight:500; }
.hero { padding:8px 32px 20px; }
.hero h1 { font-size:44px; font-weight:600; letter-spacing:-0.8px; margin:0 0 10px; max-width:640px;
background:linear-gradient(90deg,#ffffff,#8fb0ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.heroctas { display:flex; gap:12px; }
.primary { background:#155dfc; color:#fafafa; border:none; border-radius:8px; height:44px; padding:0 20px; font-size:15px; font-weight:500;
box-shadow:rgba(21,93,252,0.15) 0px 0px 0px 4px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:6px 32px 0; }
.dcard { background:#18181b; border-radius:16px; padding:18px; }
.dcard .lbl { font-size:14px; font-weight:700; color:#98989f; margin-bottom:8px; }
.dcard .val { font-size:32px; font-weight:700; color:#fafafa; }
.dcard .mint { color:#7eedb8; font-size:12px; font-weight:700; margin-top:6px; }
.chartcard { margin:14px 32px 0; background:#18181b; border-radius:16px; padding:18px; height:180px; position:relative; }
.chartcard .lbl { font-size:14px; font-weight:700; color:#98989f; margin-bottom:12px; }
.bars { display:flex; align-items:flex-end; gap:10px; height:110px; }
.bar { flex:1; background:linear-gradient(180deg,#155dfc,#0970ff); border-radius:4px 4px 0 0; }
footer { position:absolute; bottom:0; left:0; right:0; padding:12px 32px; font-size:11px; color:#98989f;
border-top:1px solid rgba(255,255,255,0.08); }
</style></head>
<body>
<nav>
<span style="font-weight:700; font-size:16px;">Airbridge</span>
<div class="navlinks"><span class="act">Features</span><span>Solutions</span><span>Insights</span><span>Pricing</span></div>
<button class="ghost">Request a Demo</button>
</nav>
<div class="hero">
<h1>Complete your ad performance measurement with AI.</h1>
<div class="heroctas">
<button class="primary">Request a Demo</button>
<button class="ghost">View Pricing</button>
</div>
</div>
<div class="cards">
<div class="dcard"><div class="lbl">TOTAL EVENTS</div><div class="val">1.2B+</div><div class="mint">▲ 12.4% this week</div></div>
<div class="dcard"><div class="lbl">DEVICES TRACKED</div><div class="val">108M</div><div class="mint">▲ 4.1% this week</div></div>
<div class="dcard"><div class="lbl">RPM (LIVE)</div><div class="val">1.03M</div><div class="mint">▲ real-time</div></div>
</div>
<div class="chartcard">
<div class="lbl">Attribution by channel</div>
<div class="bars">
<div class="bar" style="height:60%"></div>
<div class="bar" style="height:85%"></div>
<div class="bar" style="height:40%"></div>
<div class="bar" style="height:95%"></div>
<div class="bar" style="height:55%"></div>
<div class="bar" style="height:70%"></div>
</div>
</div>
<footer>Make decisions on data, not gut feeling · Airbridge</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #dedede;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #dedede;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -0.3px; margin: 0; color: #dedede; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #dedede; color: #121212;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: transparent; color: #dedede;
border: 1px solid #dedede; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1f1f1f; color: #dedede;
border: 1px solid #454545; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 300; line-height: 1.4; letter-spacing: 0.2px; background: #dedede; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Hypershop mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#121212; color:#dedede;
font-family:'myFontRegular', Inter, sans-serif;
}
*{box-sizing:border-box;}
.nav{
height:64px; background:#171717; border-bottom:1px solid #2c2c2c;
display:flex; align-items:center; justify-content:space-between; padding:0 32px;
}
.logo{font-family:'myFontBold', Inter, sans-serif; font-size:22px; font-weight:700; letter-spacing:-0.3px; color:#ffffff;}
.navlinks{display:flex; gap:28px; align-items:center;}
.navlinks span{font-family:'myFontMedium', Inter, sans-serif; font-size:14px; font-weight:500; color:#888888;}
.navlinks .active{color:#ffffff; border-bottom:2px solid #dedede; padding-bottom:8px;}
.navsearch{width:180px; height:32px; background:#1f1f1f; border:1px solid #2c2c2c; border-radius:4px; color:#888888; font-size:12px; display:flex; align-items:center; padding:0 10px;}
.hero{
display:flex; padding:32px 32px 24px 32px; height:236px;
}
.hero-left{width:520px; display:flex; flex-direction:column; justify-content:center;}
.eyebrow{font-family:'myFontMedium', Inter, sans-serif; font-size:11px; font-weight:500; letter-spacing:1.2px; text-transform:uppercase; color:#888888; margin-bottom:12px;}
.headline{font-family:'myFontBold', Inter, sans-serif; font-size:40px; font-weight:700; line-height:1.1; letter-spacing:-0.5px; color:#ffffff; margin:0 0 12px 0;}
.sub{font-family:'myFontRegular', Inter, sans-serif; font-size:16px; line-height:1.5; color:#c4c4c4; max-width:440px; margin:0 0 20px 0;}
.cta{
display:inline-flex; align-items:center; justify-content:center; width:180px; height:44px;
background:#dedede; color:#121212; border-radius:4px;
font-family:'myFontBold', Inter, sans-serif; font-size:14px; font-weight:700; letter-spacing:0.3px;
}
.hero-right{
flex:1; display:flex; align-items:center; justify-content:center;
}
.device{
width:280px; height:180px; border-radius:8px;
background:linear-gradient(160deg,#1f1f1f 0%, #171717 60%, #121212 100%);
border:1px solid #2c2c2c; position:relative;
}
.device:before{
content:''; position:absolute; top:18px; left:18px; right:18px; bottom:18px;
border-radius:4px; border:1px solid #2c2c2c;
background:linear-gradient(135deg,#2c2c2c 0%, #1a1a1a 100%);
}
.device-dot{position:absolute; width:8px; height:8px; border-radius:50%; background:#dedede; top:30px; left:30px;}
.section-label{
font-family:'myFontMedium', Inter, sans-serif; font-size:11px; font-weight:500; letter-spacing:1.2px; text-transform:uppercase; color:#888888;
padding:0 32px; margin-bottom:14px;
}
.grid{display:flex; gap:16px; padding:0 32px;}
.card{
width:190px; background:#1f1f1f; border:1px solid transparent; border-radius:8px; padding:16px;
position:relative;
}
.badge{
position:absolute; top:12px; left:12px; background:#dedede; color:#121212;
font-size:10px; font-weight:700; letter-spacing:0.2px; border-radius:4px; padding:3px 7px;
font-family:'myFontMedium', Inter, sans-serif;
}
.badge-sale{background:#c0392b; color:#ffffff;}
.thumb{
width:100%; height:96px; border-radius:4px; margin-bottom:12px;
background:linear-gradient(135deg,#2c2c2c, #171717);
display:flex; align-items:center; justify-content:center;
}
.thumb-shape{width:60px; height:36px; border-radius:6px; background:#3a3a3a; border:1px solid #444;}
.pname{font-family:'myFontMedium', Inter, sans-serif; font-size:16px; font-weight:500; color:#dedede; margin:0 0 6px 0;}
.pprice{font-family:'myFontBold', Inter, sans-serif; font-size:20px; font-weight:700; color:#dedede; margin:0;}
.spec{font-size:11px; color:#888888; margin-top:6px; font-family:'myFontLight', Inter, sans-serif;}
</style>
<div class="nav">
<div class="logo">Hypershop</div>
<div class="navlinks">
<span class="active">Docks</span>
<span>Battery</span>
<span>Cables</span>
<span>Displays</span>
</div>
<div class="navsearch">Search hardware...</div>
</div>
<div class="hero">
<div class="hero-left">
<div class="eyebrow">HyperDrive Series 4</div>
<h1 class="headline">Power, precisely engineered.</h1>
<p class="sub">Aluminum-machined docks and battery packs built for the desk you actually use.</p>
<div class="cta">Shop HyperDrive</div>
</div>
<div class="hero-right">
<div class="device"><div class="device-dot"></div></div>
</div>
</div>
<div class="section-label">Featured Hardware</div>
<div class="grid">
<div class="card">
<span class="badge">NEW</span>
<div class="thumb"><div class="thumb-shape"></div></div>
<p class="pname">HyperDrive Dock 12-in-1</p>
<p class="pprice">$129</p>
<div class="spec">USB-C · 100W PD</div>
</div>
<div class="card">
<div class="thumb"><div class="thumb-shape" style="width:40px;height:40px;border-radius:50%;"></div></div>
<p class="pname">HyperJuice Battery Pack</p>
<p class="pprice">$89</p>
<div class="spec">245Wh · 3 Ports</div>
</div>
<div class="card">
<span class="badge badge-sale">SALE</span>
<div class="thumb"><div class="thumb-shape" style="width:70px;height:20px;"></div></div>
<p class="pname">HyperCable Braided 2m</p>
<p class="pprice">$24</p>
<div class="spec">USB4 · 40Gbps</div>
</div>
<div class="card">
<div class="thumb"><div class="thumb-shape" style="width:50px;height:50px;border-radius:8px;"></div></div>
<p class="pname">HyperDisk SSD Enclosure</p>
<p class="pprice">$59</p>
<div class="spec">NVMe · 10Gbps</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6B7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #1B5FAF; color: #FFFFFF;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #FFFFFF; color: #1B5FAF;
border: 1px solid #1B5FAF; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #2E8B57; color: #FFFFFF;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1A1A1A; box-sizing:border-box;
font-family:Inter,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.trust-bar { height:28px; background:#F0F5FC; border-bottom:1px solid #DDE3EC; display:flex; align-items:center; justify-content:center; gap:24px; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#3D3D3D; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #DDE3EC; }
.brand { font-size:16px; font-weight:700; margin:0; color:#1B5FAF; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; color:#1A1A1A; }
.navlinks span.on { color:#1B5FAF; }
.util { font-size:12px; color:#6B7280; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 92px); }
.stage { padding:24px; border-right:1px solid #DDE3EC; display:flex; flex-direction:column; gap:10px; background:#F0F5FC; }
.panel { flex:1; position:relative; overflow:hidden; border-radius:8px; background:#fff; }
.panel::before { content:''; position:absolute; left:50%; top:14%; width:60%; height:60%; transform:translateX(-50%); background:linear-gradient(180deg,#e9edf3,#c7d2e0); border-radius:8px; box-shadow:0 10px 24px rgba(27,95,175,0.1); }
.panel::after { content:''; position:absolute; left:50%; bottom:14%; width:64%; height:16%; transform:translateX(-50%); background:#1B5FAF; border-radius:8px; }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; background:#fff; border:1px solid #DDE3EC; border-radius:6px; }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:12px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#6B7280; }
h1 { margin:0; font-size:22px; font-weight:600; }
.badge-energy { background:#2E8B57; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; padding:3px 8px; border-radius:4px; display:inline-block; width:fit-content; }
.price { font-size:26px; font-weight:700; letter-spacing:-0.3px; }
.spec-table { background:#F0F5FC; border:1px solid #DDE3EC; border-radius:12px; }
.spec-row { display:flex; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #DDE3EC; }
.spec-row:last-child { border-bottom:none; }
.spec-row .l { font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#6B7280; }
.spec-row .v { font-size:20px; font-weight:700; letter-spacing:-0.2px; }
.btu-row { display:flex; gap:8px; }
.btu-chip { border:1px solid #DDE3EC; border-radius:4px; padding:10px 18px; font-size:16px; font-weight:600; color:#3D3D3D; }
.btu-chip.on { background:#1B5FAF; color:#fff; border-color:#1B5FAF; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#1B5FAF; color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; }
.btn-secondary { width:160px; height:48px; background:#fff; border:1.5px solid #1B5FAF; color:#1B5FAF; border-radius:8px; font-size:15px; font-weight:600; }
</style></head>
<body>
<div class="trust-bar">Free Shipping Over $99 · 3-Year Warranty · Energy Star Certified</div>
<nav>
<p class="brand">Blueridge</p>
<div class="navlinks"><span class="on">Portable AC</span><span>Mini-Split</span><span>Window Units</span><span>Heaters</span></div>
<div class="util">Search Find a Dealer Cart (0)</div>
</nav>
<main>
<div class="stage">
<div class="panel"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Portable Air Conditioner</span>
<h1>14,000 BTU Portable AC & Heater</h1>
<span class="badge-energy">Energy Star</span>
<div class="price">$449.00</div>
<div class="spec-table">
<div class="spec-row"><span class="l">BTU Rating</span><span class="v">14,000</span></div>
<div class="spec-row"><span class="l">Coverage Area</span><span class="v">500 sq ft</span></div>
<div class="spec-row"><span class="l">SEER Rating</span><span class="v">10.2</span></div>
</div>
<div class="btu-row">
<span class="btu-chip">8,000</span><span class="btu-chip">10,000</span><span class="btu-chip on">14,000</span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">View Full Specs</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffee9; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffee9; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ff9cdc; color: #222222;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #fffee9; color: #222222;
border: 1px solid #ff9cdc; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c7b7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #ffd801; color: #222222;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Hismile Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Pulp','Circular',Helvetica,sans-serif; background:#fffee9; color:#222222; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e0e0e0;}
.logo{font-family:'PP Right Grotesk',Helvetica,sans-serif;font-weight:700;font-size:22px;letter-spacing:-.5px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.navlinks .active{color:#ff9cdc;border-bottom:2px solid #ff9cdc;padding-bottom:4px;}
.cart{background:#ffd801;border-radius:999px;padding:6px 16px;font-size:12px;font-weight:700;}
.hero{display:flex;align-items:center;padding:26px 34px;gap:28px;height:236px;}
.hero-txt{max-width:400px;}
.hero-txt h1{font-family:'PP Right Grotesk',Helvetica,sans-serif;font-size:42px;font-weight:700;line-height:1.05;letter-spacing:-1px;margin:0 0 12px;}
.hero-txt p{font-size:15px;color:#333;margin:0 0 16px;}
.btn{display:inline-block;background:#ff9cdc;color:#222;font-weight:600;font-size:14px;padding:12px 26px;border-radius:999px;margin-right:8px;}
.btn.yellow{background:#ffd801;}
.hero-visual{flex:1;height:190px;border-radius:20px;background:linear-gradient(135deg,#ffd1e8,#fff3a8);display:flex;align-items:center;justify-content:center;color:#c77;font-size:12px;font-weight:600;position:relative;}
.dot{position:absolute;width:26px;height:26px;border-radius:999px;}
.d1{background:#7ae28d;top:14px;left:20px;}
.d2{background:#59cdc9;bottom:14px;right:26px;}
.section{padding:6px 34px;}
.section h2{font-size:18px;font-weight:600;margin:0 0 12px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{background:#fff;border:1px solid #e0e0e0;border-radius:20px;padding:12px;position:relative;text-align:center;}
.swatchbox{height:74px;border-radius:12px;background:#fdf2f8;margin-bottom:8px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#e8a;}
.badge{position:absolute;top:8px;left:8px;background:#ffef29;color:#222;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 9px;border-radius:999px;}
.pname{font-size:13px;font-weight:600;margin:2px 0;}
.price{font-size:13px;color:#666;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#f2f2f7;padding:12px 34px;display:flex;justify-content:space-between;font-size:11px;color:#666;}
</style>
<div class="nav">
<div class="logo">Hismile</div>
<div class="navlinks"><span class="active">Whitening</span><span>Oral Care</span><span>Kits</span><span>About</span></div>
<div class="cart">Cart (0)</div>
</div>
<div class="hero">
<div class="hero-txt">
<h1>Smile like<br>you mean it.</h1>
<p>Vegan, cruelty-free teeth whitening that doesn't wreck your enamel — or your vibe.</p>
<div><span class="btn">Shop Whitening</span><span class="btn yellow">Take the Quiz</span></div>
</div>
<div class="hero-visual">PRODUCT PHOTOGRAPHY<div class="dot d1"></div><div class="dot d2"></div></div>
</div>
<div class="section">
<h2>Best Sellers</h2>
<div class="grid">
<div class="card"><div class="badge">Best Seller</div><div class="swatchbox">V34 Kit</div><div class="pname">PAP+ Whitening Kit</div><div class="price">$79.00</div></div>
<div class="card"><div class="swatchbox">Mint</div><div class="pname">Whitening Toothpaste</div><div class="price">$14.00</div></div>
<div class="card"><div class="swatchbox">Charcoal</div><div class="pname">Charcoal Toothpaste</div><div class="price">$14.00</div></div>
<div class="card"><div class="swatchbox">Serum</div><div class="pname">Teeth Whitening Serum</div><div class="price">$45.00</div></div>
</div>
</div>
<div class="footer"><span>© Hismile</span><span>Shop · Support · Socials · Newsletter</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #001a41;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #001a41;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #001a41; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #5a5a5a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #00938d; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #00938d;
border: 1px solid #00938d; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #bfc6d0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a5a5a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #001a41; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Apercu',-apple-system,system-ui,'Helvetica Neue',sans-serif; color:#121212; }
*{box-sizing:border-box;}
.topbar{height:32px;background:#00938d;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:600;letter-spacing:0.2px;text-transform:uppercase;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dde4e6;}
.logo{font-size:20px;font-weight:600;color:#001a41;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;}
.hero{height:230px;background:#f5f7f8;display:flex;align-items:center;padding:0 40px;}
.herotext{width:420px;}
h1{font-size:34px;font-weight:600;letter-spacing:-0.4px;color:#001a41;margin:0 0 12px;}
.sub{font-size:16px;color:#121212;margin:0 0 20px;max-width:340px;line-height:1.5;}
.cta{display:inline-block;background:#00938d;color:#fff;font-size:15px;font-weight:500;padding:14px 30px;border-radius:9999px;}
.fjord{width:200px;height:170px;position:relative;margin-left:60px;}
.fjord .peak{position:absolute;left:30px;top:20px;width:150px;height:120px;background:linear-gradient(160deg,#00daaf,#001a41);clip-path:polygon(50% 0%, 0% 100%, 100% 100%);}
.sec{padding:22px 40px 0;}
.sectitle{font-size:20px;font-weight:500;margin:0 0 14px;}
.grid{display:flex;gap:16px;}
.card{width:210px;background:#fff;border:1px solid #e8edef;border-radius:12px;overflow:hidden;}
.thumb{height:100px;border-radius:12px 12px 0 0;}
.info{padding:14px;}
.badge{display:inline-block;background:#001a41;color:#fff;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:4px 8px;border-radius:4px;margin-bottom:8px;}
.pname{font-size:18px;font-weight:500;margin:0 0 4px;}
.pprice{font-size:16px;}
</style>
<div class="topbar">Third-Party Tested · Free Shipping Over $50</div>
<div class="nav">
<div class="logo">Puori</div>
<div class="navlinks"><span>Vitamins</span><span>Omega-3</span><span>Protein</span><span>Bundles</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Pure. Natural. Superior.</h1>
<p class="sub">Third-party tested supplements formulated with Nordic clarity and clinical dosing.</p>
<div class="cta">Shop Now</div>
</div>
<div class="fjord"><div class="peak"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00938d,#001a41)"></div><div class="info"><span class="badge">Certified</span><div class="pname">Omega-3 Fish Oil</div><div class="pprice">$39</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00daaf,#001a41)"></div><div class="info"><span class="badge" style="background:#00daaf;color:#001a41">Sale</span><div class="pname">PW1 Multivitamin</div><div class="pprice">$29</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#5a5a5a,#001a41)"></div><div class="info"><span class="badge">Vegan</span><div class="pname">CP1 Protein</div><div class="pprice">$44</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4f4f4; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f4f4f4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#FFFFFF; color:#1F1F1F; box-sizing:border-box; font-family:'Archivo','Helvetica Neue',-apple-system,BlinkMacSystemFont,'SF Pro Text',Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; padding:26px 40px; }
.topnav { display:flex; justify-content:space-between; align-items:center; }
.storesel { font-size:15px; font-weight:700; }
.carticon { width:40px; height:40px; border-radius:8px; background:#F4F4F4; display:flex; align-items:center; justify-content:center; font-size:18px; position:relative; }
.badge { position:absolute; top:-4px; right:-4px; background:#E31837; color:#fff; font-size:10px; font-weight:700; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.tracker { margin-top:18px; background:#fff; border-radius:12px; padding:20px; box-shadow:0 4px 14px rgba(31,31,31,0.12); }
.tracker h2 { font-size:22px; font-weight:700; margin:0; }
.eta { font-size:13px; color:#6E6E6E; margin-top:4px; }
.rail { display:flex; align-items:flex-start; margin-top:22px; }
.node-wrap { flex:1; display:flex; flex-direction:column; align-items:center; position:relative; }
.node { width:24px; height:24px; border-radius:50%; z-index:2; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; }
.node.done { background:#006491; }
.node.active { background:#E31837; }
.node.up { background:#fff; border:2px solid #E2E2E2; }
.linebar { position:absolute; top:12px; left:-50%; width:100%; height:4px; z-index:1; }
.linebar.done { background:#006491; }
.linebar.active { background:linear-gradient(90deg,#006491 50%,#E31837 50%); }
.linebar.up { background:#E2E2E2; }
.nlabel { font-size:11px; font-weight:700; margin-top:10px; text-align:center; color:#9A9A9A; }
.nlabel.on { color:#E31837; }
.nlabel.done-lbl { color:#1F1F1F; }
.build { display:flex; gap:32px; margin-top:26px; }
.pizza { width:190px; height:190px; border-radius:50%; position:relative; flex-shrink:0;
background: radial-gradient(circle at 50% 50%, #f0c56a 0%, #e0a838 55%, #c8901f 100%);
box-shadow: inset 0 0 0 10px #d9b45a;
}
.pizza::before { content:''; position:absolute; inset:14%; border-radius:50%; background:radial-gradient(circle,#d84a3a 0%,#b8331f 100%); }
.pep { position:absolute; width:16px; height:16px; border-radius:50%; background:#8a1c14; }
.opts { flex:1; }
.optrow { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #E2E2E2; font-size:14px; font-weight:700; }
.optval { color:#6E6E6E; font-weight:400; font-size:13px; }
</style>
</head>
<body>
<div class="stage">
<div class="topnav">
<div class="storesel">Carryout ▾ · Store #4821</div>
<div style="font-size:15px;font-weight:800;letter-spacing:0.2pt;">Domino's (iOS)</div>
<div class="carticon">🛒<div class="badge">2</div></div>
</div>
<div class="tracker">
<h2>Your pizza is in the oven!</h2>
<div class="eta">Estimated delivery 7:45 PM</div>
<div class="rail">
<div class="node-wrap"><div class="node done">✓</div><div class="nlabel done-lbl">Prep</div></div>
<div class="node-wrap"><div class="linebar active"></div><div class="node active">●</div><div class="nlabel on">Bake</div></div>
<div class="node-wrap"><div class="linebar up"></div><div class="node up"></div><div class="nlabel">Box</div></div>
<div class="node-wrap"><div class="linebar up"></div><div class="node up"></div><div class="nlabel">Quality Check</div></div>
<div class="node-wrap"><div class="linebar up"></div><div class="node up"></div><div class="nlabel">Out for delivery</div></div>
</div>
</div>
<div class="build">
<div class="pizza">
<div class="pep" style="top:30%;left:30%"></div>
<div class="pep" style="top:40%;left:65%"></div>
<div class="pep" style="top:62%;left:38%"></div>
<div class="pep" style="top:58%;left:60%"></div>
<div class="pep" style="top:35%;left:50%"></div>
</div>
<div class="opts">
<div class="optrow">Size <span class="optval">Medium (12")</span></div>
<div class="optrow">Crust <span class="optval">Hand Tossed</span></div>
<div class="optrow">Sauce <span class="optval">Robust Tomato</span></div>
<div class="optrow">Cheese <span class="optval">Extra</span></div>
<div class="optrow">Toppings <span class="optval">Pepperoni, Mushroom</span></div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff7200; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff7200; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c3d09; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff432b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff7200; color: #000000;
border: 1px solid #ff432b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff7200; color: #111111;
border: 1px solid #d96203; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c3d09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff6a07; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#423e3c; box-sizing:border-box;
font-family:"Noto Serif TC", "Times New Roman", serif; letter-spacing:0.6px; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#ffffff; border-bottom:1px solid #eaeae9; }
.brand { font-weight:700; font-size:19px; color:#423e3c; }
.navlinks { display:flex; gap:26px; font-size:15px; }
.navlinks span:first-child { font-weight:700; font-size:16px; }
.login { background:#ff7200; color:#fff; border:none; border-radius:6px; padding:8px 16px; font-size:13px; font-weight:500; }
.hero { display:flex; height:210px; }
.hero-left { width:640px; padding:26px 32px; display:flex; flex-direction:column; justify-content:center; gap:10px; }
.hero-left h1 { font-size:26px; font-weight:700; margin:0; line-height:1.35; }
.hero-left p { font-size:15px; color:#575451; margin:0; line-height:1.5; }
.hero-right { flex:1; background:linear-gradient(135deg,#ffd8b8,#ff7200); position:relative; }
.hero-right::after { content:'熱門'; position:absolute; bottom:14px; left:14px; background:#ff432b; color:#fff;
font-size:12px; font-weight:700; padding:4px 10px; border-radius:6px; }
.tags { display:flex; gap:10px; padding:14px 32px; border-bottom:1px solid #eaeae9; }
.tag { border:1px solid #eaeae9; border-radius:6px; padding:7px 12px; font-size:14px; font-weight:700; color:#423e3c; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:20px 32px; }
.card { border:1px solid #eaeae9; border-radius:6px; overflow:hidden; background:#fff; }
.cover { height:110px; }
.c1 .cover { background:linear-gradient(160deg,#f6cba0,#e69b5c); }
.c2 .cover { background:linear-gradient(160deg,#c9e0c7,#8fbd8b); }
.c3 .cover { background:linear-gradient(160deg,#d9c9e0,#a980b8); }
.ctitle { font-size:15px; font-weight:700; padding:12px 14px 4px; line-height:1.4; }
.cmeta { font-size:13px; color:#817f7d; padding:0 14px 14px; }
footer { position:absolute; bottom:0; left:0; right:0; height:64px; background:#f4f4f4; display:flex;
align-items:center; justify-content:space-between; padding:0 32px; font-size:13px; color:#423e3c; }
</style></head>
<body>
<nav>
<div class="brand">PIXNET</div>
<div class="navlinks">
<span>gogo+ Travel</span><span style="font-weight:400;">Food</span><span style="font-weight:400;">Film & TV</span><span style="font-weight:400;">Parenting</span>
</div>
<button class="login">Log in</button>
</nav>
<div class="hero">
<div class="hero-left">
<h1>Discover the latest trending posts<br>and fill your life with inspiration</h1>
<p>Taiwan's lifestyle blogging platform — travel, food, film & TV, parenting — every post a real story.</p>
</div>
<div class="hero-right"></div>
</div>
<div class="tags">
<div class="tag">#EVAAir</div>
<div class="tag">#FamilyTravel</div>
<div class="tag">#JapanTrip</div>
<div class="tag">#FallOutfits</div>
</div>
<div class="grid">
<div class="card c1"><div class="cover"></div><div class="ctitle">Kyoto in autumn: three walking routes we recommend most</div><div class="cmeta">Travel · 8 min read</div></div>
<div class="card c2"><div class="cover"></div><div class="ctitle">Japanese-style rice cooker meals in three easy steps</div><div class="cmeta">Food · 5 min read</div></div>
<div class="card c3"><div class="cover"></div><div class="ctitle">Our kid's first camping trip: the packing checklist</div><div class="cmeta">Parenting · 10 min read</div></div>
</div>
<footer>
<span>© PIXNET</span>
<span>PIXNET · About Us · Privacy Policy · Terms of Service</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: #1990c6; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: #ffffff; color: #000000;
border: 1px solid #1990c6; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dfeff7; color: #1990c6;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
body { position:relative; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #cccccc; }
.logo { display:flex; align-items:center; gap:10px; }
.mark { width:28px; height:28px; background:#cc0000; position:relative; }
.mark::before { content:''; position:absolute; inset:6px; background:#ffffff; }
.wordmark { font-size:18px; font-weight:700; }
.navlinks { display:flex; gap:24px; font-size:14px; }
main { padding:24px 32px 0; display:flex; gap:32px; }
.left { width:420px; }
.imgbox { height:300px; border:1px solid #cccccc; display:flex; align-items:center; justify-content:center;
color:#999999; font-size:12px; }
.meta-line { font-size:14px; font-style:italic; color:#666666; margin-top:16px; }
.desc { font-size:16px; color:#333333; line-height:1.5; margin-top:16px; }
.right { flex:1; }
h1 { font-size:24px; font-weight:700; margin:0; line-height:1.33; }
.tagline { font-size:14px; color:#666666; margin-top:6px; }
.price { font-size:20px; font-weight:700; margin-top:16px; }
.facts { margin-top:16px; font-size:14px; color:#333333; line-height:1.9; }
.facts b { color:#000000; }
.btnrow { display:flex; gap:12px; margin-top:20px; }
.btn-primary { background:#1990c6; color:#ffffff; font-size:16px; font-weight:700; height:44px;
padding:0 24px; display:flex; align-items:center; }
.btn-secondary { background:#ffffff; color:#000000; border:1px solid #000000; font-size:16px; font-weight:700;
height:44px; padding:0 23px; display:flex; align-items:center; }
.related { margin-top:24px; font-size:14px; }
.related a { color:#1990c6; text-decoration:underline; display:block; margin-top:6px; }
footer { position:absolute; bottom:0; left:0; right:0; padding:14px 32px; border-top:1px solid #cccccc;
font-size:14px; color:#666666; }
footer a { color:#1990c6; text-decoration:underline; }
</style></head>
<body>
<nav>
<div class="logo"><span class="mark"></span><span class="wordmark">Amigo Games</span></div>
<div class="navlinks"><span>Games</span><span>About</span><span>Press</span><span>Contact</span></div>
</nav>
<main>
<div class="left">
<div class="imgbox">Box Art</div>
<div class="meta-line">Released — For immediate distribution</div>
<div class="desc">A cooperative strategy card game for players who prefer to win or lose together. No decoration, no gimmicks — just the mechanism, printed clearly and shipped on time.</div>
</div>
<div class="right">
<h1>Meridian Line — Card Game</h1>
<div class="tagline">By Amigo Games · 3rd Printing</div>
<div class="price">$24.99</div>
<div class="facts">
<div>[2–5 Players]</div>
<div>[30–45 Min]</div>
<div>[Ages 10+]</div>
<div><b>In stock</b> — ships within 2 business days</div>
</div>
<div class="btnrow">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Learn More</div>
</div>
<div class="related">
Related Titles:
<a>Saboteur — Duel</a>
<a>The Game — Extreme</a>
<a>Meridian Line — Expansion Pack</a>
</div>
</div>
</main>
<footer>Amigo Games · Press & Sales Inquiries: <a>[email protected]</a></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a14; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a14; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8b90; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #140e26; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a14; color: #ffffff;
border: 1px solid #140e26; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0a14; color: #f5f5f5;
border: 1px solid #303038; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b90; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0c0b17; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A0A14; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.screen { position:relative; width:960px; height:640px; overflow:hidden; }
.topbar { position:absolute; top:0; left:0; right:0; height:48px; z-index:5; display:flex;
align-items:center; justify-content:space-between; padding:0 24px; }
.logo { display:flex; align-items:center; gap:8px; }
.feather { width:26px; height:26px; border-radius:50%;
background:conic-gradient(from 200deg,#FACC15,#F97316,#EC4899,#8B5CF6,#2563EB,#FACC15); }
.wordmark { font-size:19px; font-weight:800; letter-spacing:-0.3px; }
.top-icons { font-size:15px; color:#fff; opacity:0.9; }
.hero { position:relative; height:340px; background:
linear-gradient(135deg,#241a3f 0%,#140E26 55%,#0A0A14 100%); }
.hero::after { content:''; position:absolute; inset:0;
background:linear-gradient(180deg, transparent 38%, rgba(10,10,20,0.7) 70%, #0A0A14 100%); }
.hero-content { position:absolute; left:0; right:0; bottom:28px; z-index:2; display:flex;
flex-direction:column; align-items:center; gap:10px; text-align:center; }
.eyebrow { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px; color:#FACC15; }
.hero-title { font-size:30px; font-weight:800; letter-spacing:-0.5px; }
.hero-meta { font-size:13px; color:#B5B2C2; }
.hero-meta span { margin:0 6px; }
.hero-btns { display:flex; gap:10px; margin-top:6px; }
.btn-white { background:#FFFFFF; color:#0A0A14; font-weight:700; font-size:15px; padding:12px 26px;
border-radius:6px; display:flex; align-items:center; gap:6px; }
.btn-glass { background:rgba(255,255,255,0.14); color:#fff; font-weight:600; font-size:13px;
padding:11px 18px; border-radius:6px; }
.channels { padding:14px 0 4px 18px; display:flex; gap:10px; overflow:hidden; }
.chtile { width:56px; height:56px; border-radius:14px; flex-shrink:0; display:flex; align-items:center;
justify-content:center; font-size:10px; font-weight:800; color:#fff; position:relative; }
.chtile.nbc { background:linear-gradient(135deg,#1E3A8A,#0F1E4D); }
.chtile.bravo { background:linear-gradient(135deg,#6D28D9,#3B1576); }
.chtile.usa { background:linear-gradient(135deg,#0E7490,#073B47); }
.chtile.e { background:linear-gradient(135deg,#F97316,#7c2d05); }
.chtile.snl { background:linear-gradient(135deg,#E5142B,#5c0510); }
.live-pill { position:absolute; top:-6px; right:-6px; background:#E5142B; color:#fff; font-size:8px;
font-weight:800; padding:2px 5px; border-radius:4px; letter-spacing:0.4px; }
.row-header { padding:16px 0 8px 18px; font-size:16px; font-weight:700; letter-spacing:-0.1px; }
.poster-row { display:flex; gap:10px; padding:0 0 4px 18px; overflow:hidden; }
.poster { width:104px; height:150px; border-radius:8px; flex-shrink:0; position:relative;
background:linear-gradient(160deg,#3a2f5c,#1a1530); }
.poster.p1 { background:linear-gradient(160deg,#5c2f4a,#1a1530); }
.poster.p2 { background:linear-gradient(160deg,#2f5c4a,#1a1530); }
.poster.p3 { background:linear-gradient(160deg,#5c4a2f,#1a1530); }
.poster.p4 { background:linear-gradient(160deg,#2f3a5c,#1a1530); }
.poster.p5 { background:linear-gradient(160deg,#4a2f5c,#1a1530); }
.rank { position:absolute; bottom:6px; left:6px; background:rgba(10,10,20,0.55); color:#fff;
font-size:15px; font-weight:800; padding:1px 8px; border-radius:5px; }
.top10badge { position:absolute; top:6px; left:6px; font-size:8px; font-weight:800; text-transform:uppercase;
color:#fff; padding:2px 6px; border-radius:4px; background:linear-gradient(90deg,#F97316,#EC4899); }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:52px; background:rgba(10,10,20,0.96);
border-top:0.5px solid #2C2545; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:10px; color:#7A7689; display:flex; flex-direction:column; align-items:center; gap:4px; }
.tab.active { color:#fff; }
.tab .ic { width:18px; height:18px; border-radius:4px; background:#7A7689; }
.tab.active .ic { background:#fff; }
</style></head>
<body>
<div class="screen">
<div class="hero">
<div class="topbar">
<div class="logo"><div class="feather"></div><div class="wordmark">Peacock (iOS)</div></div>
<div class="top-icons">🔍 👤</div>
</div>
<div class="hero-content">
<div class="eyebrow">New Original Series</div>
<div class="hero-title">Midnight Harbor</div>
<div class="hero-meta"><span>2026</span>·<span>Drama</span>·<span>TV-MA</span></div>
<div class="hero-btns">
<div class="btn-white">▶ Play</div>
<div class="btn-glass">+ My Stuff</div>
</div>
</div>
</div>
<div class="channels">
<div class="chtile nbc">NBC<span class="live-pill">LIVE</span></div>
<div class="chtile bravo">BRAVO</div>
<div class="chtile usa">USA</div>
<div class="chtile e">E!</div>
<div class="chtile snl">SNL</div>
</div>
<div class="row-header">Top 10 Today</div>
<div class="poster-row">
<div class="poster p1"><span class="top10badge">Top 10</span><span class="rank">1</span></div>
<div class="poster p2"><span class="rank">2</span></div>
<div class="poster p3"><span class="rank">3</span></div>
<div class="poster p4"><span class="rank">4</span></div>
<div class="poster p5"><span class="rank">5</span></div>
</div>
<div class="tabbar">
<div class="tab active"><div class="ic"></div>Home</div>
<div class="tab"><div class="ic"></div>Channels</div>
<div class="tab"><div class="ic"></div>Search</div>
<div class="tab"><div class="ic"></div>My Stuff</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #161d25;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #161d25;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #161d25; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #849bb6; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #510c76; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #ffffff; color: #510c76;
border: 1px solid #510c76; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #3c0f7a;
border: 1px solid #c5c6c8; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #849bb6; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #510c76; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Gotham','Helvetica Neue',Helvetica,Arial,sans-serif; color:#161d25; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dedede;}
.logo{font-size:20px;font-weight:600;color:#510c76;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;color:#161d25;}
.navcta{background:#510c76;color:#fff;font-size:12px;font-weight:600;padding:10px 18px;border-radius:8px;}
.hero{height:224px;display:flex;background:#fdebeb;}
.herotext{width:440px;padding:28px 36px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:11px;font-weight:600;color:#ce275e;margin-bottom:10px;}
.h1{font-size:27px;font-weight:600;line-height:1.25;color:#510c76;margin:0 0 10px;}
.sub{font-size:14px;color:#3c0f7a;margin:0 0 16px;max-width:340px;}
.btn{width:160px;text-align:center;background:#510c76;color:#fff;font-size:13px;font-weight:600;padding:11px 0;border-radius:9999px;}
.heroimg{flex:1;position:relative;}
.gum{position:absolute;border-radius:50%;box-shadow:0 8px 16px rgba(81,12,118,.2);}
.strip{display:flex;gap:8px;padding:14px 36px 0;}
.pill{border-radius:9999px;padding:6px 14px;font-size:11px;font-weight:600;color:#fff;}
.sec{padding:14px 36px 0;}
.sectitle{font-size:14px;font-weight:600;color:#510c76;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:154px;background:#fff;border:1px solid #dedede;border-radius:10px;padding:9px;box-shadow:0 2px 6px rgba(22,29,37,.05);}
.thumb{height:92px;border-radius:8px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;}
.gummy{width:46px;height:46px;border-radius:50%;}
.pname{font-size:12px;font-weight:600;line-height:1.3;height:30px;overflow:hidden;color:#161d25;}
.pprice{font-size:13px;font-weight:600;color:#510c76;margin-top:3px;}
</style>
<div class="nav">
<div class="logo">Olly</div>
<div class="navlinks"><span>Sleep</span><span>Stress</span><span>Immunity</span><span>Beauty</span></div>
<div class="navcta">Shop Bestsellers</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Vitamins, But Make Them Fun</div>
<div class="h1">Wellness that tastes<br>like a reason to smile.</div>
<div class="sub">Gummy vitamins formulated for real results, wrapped in flavors you'll actually crave.</div>
<div class="btn">Shop All Gummies</div>
</div>
<div class="heroimg">
<div class="gum" style="width:90px;height:90px;background:radial-gradient(circle at 35% 30%,#f0f7cf,#2e6e36 75%);top:30px;left:50px;"></div>
<div class="gum" style="width:70px;height:70px;background:radial-gradient(circle at 35% 30%,#ffe5ef,#ce275e 75%);top:100px;left:160px;"></div>
<div class="gum" style="width:60px;height:60px;background:radial-gradient(circle at 35% 30%,#cbf7f6,#006383 75%);top:40px;left:220px;"></div>
</div>
</div>
<div class="strip">
<div class="pill" style="background:#2e6e36;">Superfoods</div>
<div class="pill" style="background:#ce275e;">Women's Multi</div>
<div class="pill" style="background:#006383;">Stress</div>
<div class="pill" style="background:#da3910;">Energy</div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#f0f7cf;"><div class="gummy" style="background:radial-gradient(circle at 35% 30%,#c9e884,#2e6e36)"></div></div><div class="pname">Sleep Gummies</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb" style="background:#ffe5ef;"><div class="gummy" style="background:radial-gradient(circle at 35% 30%,#ff9dbf,#ce275e)"></div></div><div class="pname">Women's Multi Gummies</div><div class="pprice">$16.99</div></div>
<div class="card"><div class="thumb" style="background:#cbf7f6;"><div class="gummy" style="background:radial-gradient(circle at 35% 30%,#7fdede,#006383)"></div></div><div class="pname">Stress Gummies</div><div class="pprice">$15.99</div></div>
<div class="card"><div class="thumb" style="background:#fff6dc;"><div class="gummy" style="background:radial-gradient(circle at 35% 30%,#ffb27a,#da3910)"></div></div><div class="pname">Energy Gummies</div><div class="pprice">$15.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5f6360; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #3899ec; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #080808;
border: 1px solid #3899ec; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #080808;
border: 1px solid #c1c1c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5f6360; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #7fccf7; color: #080808;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#080808; font-family:'Helvetica Neue',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid #e5e5e5;}
.logo{font-size:20px;font-weight:700;letter-spacing:.2px;}
.navlinks{position:absolute;left:32px;display:flex;gap:20px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;}
.search{position:absolute;right:32px;width:170px;height:34px;border-radius:9999px;border:1px solid #d8d8d8;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#5f6360;}
.hero{height:340px;position:relative;background:linear-gradient(180deg,#3a2f26 0%,#1c1712 55%,#080808 100%);overflow:hidden;display:flex;align-items:center;justify-content:center;}
.tunnel{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-end;}
.shelfrow{display:flex;gap:3px;}
.book{width:16px;background:#5f6360;}
.herocopy{position:relative;z-index:2;text-align:center;color:#fff;}
.herocopy h1{font-family:Georgia,serif;font-size:34px;font-weight:600;margin:0 0 10px;}
.herocopy p{font-size:14px;color:#d8d8d8;margin:0 0 18px;}
.searchbig{display:inline-flex;align-items:center;width:320px;height:44px;border-radius:9999px;background:#fff;padding:0 20px;font-size:13px;color:#5f6360;}
.searchbig .go{margin-left:auto;color:#7fccf7;font-weight:700;}
.sec{padding:22px 40px 0;}
.sectitle{font-size:18px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:196px;border:1px solid #dedede;padding:10px;}
.thumb{height:110px;background:#f3f3f3;position:relative;}
.spine{position:absolute;left:20px;top:0;bottom:0;width:14px;background:#3899ec;}
.spine2{position:absolute;left:44px;top:6px;bottom:6px;width:10px;background:#7fccf7;}
.pname{font-size:13px;font-weight:600;margin-top:8px;}
.pauthor{font-size:11px;color:#5f6360;margin-top:2px;}
.pprice{font-size:13px;font-weight:700;margin-top:5px;}
</style>
<div class="nav">
<div class="navlinks"><span>Fiction</span><span>Rare</span><span>Events</span></div>
<div class="logo">Last Bookstore</div>
<div class="search">Search titles...</div>
</div>
<div class="hero">
<div class="tunnel">
<div class="shelfrow" style="align-self:flex-end;">
<div class="book" style="height:120px;"></div><div class="book" style="height:150px;"></div><div class="book" style="height:100px;"></div><div class="book" style="height:170px;"></div><div class="book" style="height:130px;"></div><div class="book" style="height:160px;"></div><div class="book" style="height:110px;"></div><div class="book" style="height:180px;"></div><div class="book" style="height:140px;"></div><div class="book" style="height:120px;"></div><div class="book" style="height:160px;"></div><div class="book" style="height:100px;"></div><div class="book" style="height:150px;"></div><div class="book" style="height:130px;"></div><div class="book" style="height:170px;"></div><div class="book" style="height:110px;"></div><div class="book" style="height:150px;"></div><div class="book" style="height:190px;"></div><div class="book" style="height:120px;"></div><div class="book" style="height:140px;"></div><div class="book" style="height:160px;"></div><div class="book" style="height:100px;"></div><div class="book" style="height:150px;"></div><div class="book" style="height:130px;"></div><div class="book" style="height:170px;"></div><div class="book" style="height:110px;"></div><div class="book" style="height:150px;"></div><div class="book" style="height:190px;"></div><div class="book" style="height:120px;"></div><div class="book" style="height:140px;"></div>
</div>
</div>
<div class="herocopy">
<h1>Last Bookstore</h1>
<p>A labyrinth of books housed in a landmark bank building.</p>
<div class="searchbig">Search our shelves<span class="go">Go</span></div>
</div>
</div>
<div class="sec">
<div class="sectitle">Staff Picks</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="spine"></div><div class="spine2"></div></div><div class="pname">The Maze of Words</div><div class="pauthor">Vintage Fiction</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb"><div class="spine" style="background:#7fccf7"></div><div class="spine2" style="background:#3899ec"></div></div><div class="pname">Rare First Editions</div><div class="pauthor">Collector's Corner</div><div class="pprice">$85.00</div></div>
<div class="card"><div class="thumb"><div class="spine"></div><div class="spine2"></div></div><div class="pname">Poetry in the Vault</div><div class="pauthor">Local Author</div><div class="pprice">$18.50</div></div>
<div class="card"><div class="thumb"><div class="spine" style="background:#7fccf7"></div><div class="spine2" style="background:#3899ec"></div></div><div class="pname">Bookstore Tote</div><div class="pauthor">Merch</div><div class="pprice">$22.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeede5; color: #232323;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeede5; color: #232323;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #232323; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #888887; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #d72c0d; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #eeede5; color: #232323;
border: 1px solid #d72c0d; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #232323;
border: 1px solid #bbbab4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888887; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #21301d; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#eeede5; font-family:'Montserrat',Arial,sans-serif; color:#21301d;
}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#21301d;}
.logo{font-size:19px;font-weight:800;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:12.5px;font-weight:600;color:#e2ead9;}
.cta{background:#d72c0d;color:#fff;padding:11px 20px;font-size:12px;font-weight:700;border-radius:999px;}
.hero{display:flex;padding:26px 32px 16px;gap:24px;align-items:center;}
.hero-copy{width:380px;}
.hero-title{font-size:34px;font-weight:800;line-height:1.12;margin-bottom:12px;color:#21301d;}
.hero-sub{font-size:13.5px;line-height:1.5;color:#3a4a35;margin-bottom:16px;}
.btn-main{display:block;width:260px;text-align:center;background:#d72c0d;color:#fff;padding:15px 0;font-size:13px;font-weight:700;border-radius:14px;}
.hero-visual{flex:1;height:210px;border-radius:20px;background:linear-gradient(135deg,#e2aa79,#d38571);position:relative;}
.eco-badge{position:absolute;top:16px;left:16px;background:#21301d;color:#fff;font-size:9px;font-weight:700;padding:6px 12px;border-radius:999px;letter-spacing:.5px;text-transform:uppercase;}
.ochre-dot{position:absolute;bottom:20px;right:30px;width:60px;height:60px;border-radius:50%;background:#f1e04d;}
.section{padding:6px 32px 0;}
.section-title{font-size:18px;font-weight:800;margin-bottom:14px;color:#21301d;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{background:#fff;border-radius:16px;overflow:hidden;}
.card-img{height:82px;background:linear-gradient(150deg,#f1e04d,#d38571);position:relative;}
.badge-mini{position:absolute;top:6px;left:6px;background:#21301d;color:#fff;font-size:7.5px;font-weight:700;padding:3px 7px;border-radius:999px;}
.card-body{padding:11px;}
.card-name{font-size:12.5px;font-weight:700;margin-bottom:6px;}
.add-btn{background:#d72c0d;color:#fff;text-align:center;font-size:11px;font-weight:700;padding:9px 0;border-radius:10px;margin-bottom:6px;}
.card-price{font-size:12.5px;font-weight:700;color:#21301d;}
</style>
<div class="nav">
<div class="logo">Ecoriginals</div>
<div class="navlinks"><span>Diapers</span><span>Pants</span><span>Wipes</span><span>Bundles</span></div>
<div class="cta">Shop Bold</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="hero-title">Plant-based. Confident. Zero compromise.</div>
<div class="hero-sub">Sugarcane-based diapers that perform like the mainstream brands — without the plastic guilt.</div>
<div class="btn-main">Shop Plant-Based Diapers</div>
</div>
<div class="hero-visual">
<div class="eco-badge">Plant-Based</div>
<div class="ochre-dot"></div>
</div>
</div>
<div class="section">
<div class="section-title">Bestselling Essentials</div>
<div class="grid">
<div class="card"><div class="card-img"><div class="badge-mini">ECO</div></div><div class="card-body"><div class="card-name">Diapers, Size 4</div><div class="add-btn">Add To Cart</div><div class="card-price">$18.99</div></div></div>
<div class="card"><div class="card-img"><div class="badge-mini">ECO</div></div><div class="card-body"><div class="card-name">Training Pants</div><div class="add-btn">Add To Cart</div><div class="card-price">$21.99</div></div></div>
<div class="card"><div class="card-img"><div class="badge-mini">ECO</div></div><div class="card-body"><div class="card-name">Bamboo Wet Wipes</div><div class="add-btn">Add To Cart</div><div class="card-price">$9.99</div></div></div>
<div class="card"><div class="card-img"><div class="badge-mini">ECO</div></div><div class="card-body"><div class="card-name">Monthly Bundle Box</div><div class="add-btn">Add To Cart</div><div class="card-price">$54.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #00B386; color: #FFFFFF;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #FFFFFF; color: #00B386;
border: 1px solid #00B386; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; background: #F5F5F5; color: #4A4A4A;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:60px;background:#ffffff;border-bottom:1px solid #eeeeee;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:20px;font-weight:700;color:#00B386;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#313131;}
.hero{height:214px;display:flex;align-items:center;padding:0 40px;background:#f5f5f5;}
.heroText{width:460px;}
.headline{font-size:28px;font-weight:700;line-height:1.3;color:#313131;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.55;color:#767676;margin:0 0 20px;max-width:390px;}
.btn{display:inline-block;background:#00B386;color:#fff;font-size:14px;font-weight:600;padding:13px 28px;border-radius:6px;}
.book{position:absolute;right:110px;top:50px;width:90px;height:120px;background:linear-gradient(160deg,#313131,#00B386);border-radius:4px;}
.sec{position:relative;height:366px;padding:26px 40px;}
.secTitle{font-size:16px;font-weight:700;color:#313131;margin-bottom:18px;}
.steps{display:flex;gap:14px;margin-bottom:22px;}
.step{flex:1;background:#fff;border:1px solid #eeeeee;border-radius:6px;padding:14px;}
.stepnum{width:24px;height:24px;border-radius:9999px;background:#00B386;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.stepnum.done{background:#313131;}
.steptitle{font-size:13px;font-weight:700;color:#313131;}
.chipsTitle{font-size:13px;font-weight:700;color:#313131;margin-bottom:10px;}
.chips{display:flex;gap:10px;}
.chip{border:1px solid #dddddd;color:#313131;font-size:12px;font-weight:600;padding:9px 18px;border-radius:9999px;}
.chip.active{background:#00B386;color:#fff;border-color:#00B386;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#1E1E1E;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#999999;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Lulu</div>
<div class="navlinks"><span>Print a Book</span><span>Distribution</span><span>Pricing</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">From manuscript<br>to bound book.</div>
<div class="sub">Print, publish, and distribute your book worldwide — no upfront cost, no inventory.</div>
<div class="btn">Start Your Book</div>
</div>
<div class="book"></div>
</div>
<div class="sec">
<div class="secTitle">Your Publishing Workflow</div>
<div class="steps">
<div class="step"><div class="stepnum done">1</div><div class="steptitle">Choose Format</div></div>
<div class="step"><div class="stepnum done">2</div><div class="steptitle">Upload Manuscript</div></div>
<div class="step"><div class="stepnum">3</div><div class="steptitle">Design Cover</div></div>
<div class="step"><div class="stepnum">4</div><div class="steptitle">Set Distribution</div></div>
<div class="step"><div class="stepnum">5</div><div class="steptitle">Set Pricing</div></div>
</div>
<div class="chipsTitle">Select a Format</div>
<div class="chips">
<div class="chip active">Hardcover</div>
<div class="chip">Softcover</div>
<div class="chip">Coil-Bound</div>
<div class="chip">Ebook</div>
</div>
</div>
<div class="footer"><span>© Publish On Your Own Terms</span><span>Author Resources</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a0a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #0a0a0a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #020202; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { display:flex; width:960px; height:640px; }
.hero { width:460px; padding:0 56px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.word { font-size:26px; font-weight:700; letter-spacing:-0.4px; text-transform:uppercase; margin:0; }
.tag { font-size:15px; color:#9A9A9A; line-height:1.5; max-width:340px; margin:0; }
.badgebig { display:inline-flex; align-items:center; gap:6px; border:1px solid #00FFFF; color:#00FFFF; font-size:11px; font-weight:700; letter-spacing:1px; padding:5px 10px; border-radius:4px; width:fit-content; margin-top:6px; }
.pillbtn { background:#FFFFFF; color:#000; border-radius:999px; padding:12px 28px; font-weight:700; font-size:15px; width:fit-content; margin-top:10px; }
.player { width:500px; padding:36px 40px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.art { width:280px; height:280px; background:linear-gradient(150deg,#3a2a55,#0a0a0a 70%); }
.track { text-align:center; }
.ttitle { font-size:22px; font-weight:700; display:flex; align-items:center; gap:10px; justify-content:center; }
.artist { color:#9A9A9A; font-size:14px; margin-top:4px; }
.scrub { width:280px; height:3px; background:#5C5C5C; border-radius:2px; margin-top:6px; position:relative; }
.scrub i { position:absolute; left:0; top:0; bottom:0; width:38%; background:#FFFFFF; border-radius:2px; }
.times { display:flex; justify-content:space-between; width:280px; font-size:11px; color:#9A9A9A; font-weight:600; }
.transport { display:flex; align-items:center; gap:28px; margin-top:4px; }
.transport span { color:#9A9A9A; font-size:18px; }
.play { width:64px; height:64px; border-radius:50%; background:#FFFFFF; color:#000; display:flex; align-items:center; justify-content:center; font-size:22px; }
.shelf { margin-top:8px; }
.shelflabel { font-size:10px; letter-spacing:1px; color:#9A9A9A; text-transform:uppercase; margin-bottom:8px; }
.tiles { display:flex; gap:12px; }
.tile { width:70px; height:70px; position:relative; }
.tile1 { background:linear-gradient(160deg,#333,#111); }
.tile2 { background:linear-gradient(160deg,#2a2a44,#0a0a0a); }
.tile3 { background:linear-gradient(160deg,#442a2a,#0a0a0a); }
.tile4 { background:linear-gradient(160deg,#2a442a,#0a0a0a); }
</style></head>
<body>
<div class="stage">
<div class="hero">
<p class="word">TIDAL (iOS)</p>
<p class="tag">Square art on true black. Nothing floats — nothing casts a shadow. Fidelity is the only color the app allows itself.</p>
<span class="badgebig">MASTER</span>
<div class="pillbtn">Play</div>
</div>
<div class="player">
<div class="art"></div>
<div class="track">
<div class="ttitle">Black Skinhead <span class="badgebig">HIFI</span></div>
<div class="artist">Kanye West</div>
</div>
<div class="scrub"><i></i></div>
<div class="times"><span>1:23</span><span>-2:09</span></div>
<div class="transport"><span>⇄</span><span>◀◀</span><div class="play">▶</div><span>▶▶</span><span>⟳</span></div>
<div class="shelf">
<div class="shelflabel">My Mix</div>
<div class="tiles"><div class="tile tile1"></div><div class="tile tile2"></div><div class="tile tile3"></div><div class="tile tile4"></div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f1f0ed; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f1f0ed; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.35; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #848587; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0.3px; background: #272d45; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0.3px; background: #f1f0ed; color: #222222;
border: 1px solid #272d45; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f1f0ed; color: #222222;
border: 1px solid #bdbcba; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #848587; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #b2f9e9; color: #121212;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f1f0ed; font-family:'Geist','-apple-system','Helvetica Neue',sans-serif; color:#2c2c2c; }
*{box-sizing:border-box;}
.banner{height:30px;background:#2c2c2c;color:#f1f0ed;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:0.3px;}
.nav{height:60px;background:#ffffff;box-shadow:0 1px 0 #e5e5e5;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-size:19px;font-weight:600;letter-spacing:-0.5px;color:#272d45;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;color:#2c2c2c;}
.navlinks .a{color:#272d45;font-weight:600;}
.hero{height:266px;display:flex;background:#f1f0ed;}
.heroText{width:460px;padding:44px 40px;display:flex;flex-direction:column;justify-content:center;}
.h1{font-size:32px;font-weight:600;letter-spacing:-0.5px;line-height:1.25;margin:0 0 12px;color:#121212;}
.sub{font-size:15px;color:#848587;line-height:1.5;margin:0 0 22px;width:340px;}
.cta{display:inline-flex;align-items:center;justify-content:center;width:168px;height:46px;background:#272d45;color:#ffffff;font-size:14px;font-weight:500;border-radius:4px;}
.heroimg{width:500px;position:relative;background:linear-gradient(160deg,#dedede 0%,#848587 55%,#272d45 100%);overflow:hidden;}
.duffel{position:absolute;bottom:36px;left:170px;width:210px;height:110px;border-radius:16px;background:#121212;opacity:0.85;}
.duffelHandle{position:absolute;bottom:130px;left:230px;width:90px;height:26px;border:6px solid #121212;border-bottom:none;border-radius:20px 20px 0 0;opacity:0.85;}
.mint{position:absolute;top:32px;right:60px;width:52px;height:20px;background:#b2f9e9;border-radius:4px;}
.sec{padding:26px 36px 0;}
.secTitle{font-size:15px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;color:#848587;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#ffffff;border:1px solid #dedede;border-radius:4px;padding:12px;position:relative;}
.thumb{height:96px;border-radius:4px;margin-bottom:10px;}
.badge{position:absolute;top:20px;left:20px;background:#b2f9e9;color:#121212;font-size:10px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;padding:3px 8px;border-radius:2px;}
.pname{font-size:14px;font-weight:500;color:#121212;margin:0 0 4px;}
.pprice{font-size:14px;color:#0e7a82;font-weight:600;}
</style>
<div class="banner">Free Shipping & Returns on Every Order</div>
<div class="nav">
<div class="logo">Western Rise</div>
<div class="navlinks"><span class="a">Jackets</span><span>Pants</span><span>Shirts</span><span>Travel</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Technical fabric. Untechnical looks.</div>
<div class="sub">Performance apparel built for travel, work, and the space between them.</div>
<div class="cta">Shop the Duffel</div>
</div>
<div class="heroimg">
<div class="duffelHandle"></div>
<div class="duffel"></div>
<div class="mint"></div>
</div>
</div>
<div class="sec">
<div class="secTitle">New Arrivals</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#272d45,#848587);"></div><div class="pname">Diversion Jacket</div><div class="pprice">$168</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#848587,#f1f0ed);"></div><div class="pname">Evolution Pant</div><div class="pprice">$118</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#121212,#272d45);"></div><div class="pname">AirLoft Shirt</div><div class="pprice">$78</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b2f9e9,#848587);"></div><div class="pname">Traveler Duffel</div><div class="pprice">$228</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffc52e; color: #121212;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #f5f5f5; color: #121212;
border: 1px solid #ffc52e; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f5f5f5; color: #2c2d2c;
border: 1px solid #bcbcbc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.2px; background: #ffc52e; color: #121212;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; font-family:'Segoe UI',Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#121212;}
.logo{font-size:20px;font-weight:700;color:#ffc52e;letter-spacing:.3px;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#fff;}
.hero{height:250px;display:flex;background:#ffc52e;}
.herotext{width:48%;padding:0 36px;display:flex;flex-direction:column;justify-content:center;}
.herotext h1{font-size:34px;font-weight:700;color:#121212;margin:0 0 12px;line-height:1.2;}
.herotext p{font-size:15px;color:#3a3a1e;margin:0 0 18px;max-width:340px;}
.cta{display:inline-flex;align-items:center;justify-content:center;background:#121212;color:#ffc52e;font-size:14px;font-weight:600;padding:14px 26px;border-radius:24px;width:fit-content;}
.heroimg{width:52%;position:relative;background:radial-gradient(circle at 40% 50%,#3ed660,#ffc52e 70%);overflow:hidden;}
.bubble{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);}
.b1{width:80px;height:80px;left:60px;top:30px;}
.b2{width:50px;height:50px;left:180px;top:120px;}
.b3{width:110px;height:110px;left:260px;top:60px;background:rgba(255,255,255,.2);}
.sec{padding:24px 36px 0;}
.sectitle{font-size:20px;font-weight:700;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:12px;padding:12px;position:relative;}
.thumb{height:100px;border-radius:12px;background:#d9d9d9;margin-bottom:10px;}
.badge{position:absolute;top:20px;left:20px;background:#3ed660;color:#121212;font-size:10px;font-weight:700;padding:3px 10px;border-radius:9999px;}
.badge.orange{background:#ee9441;}
.pname{font-size:14px;font-weight:700;color:#121212;margin-bottom:4px;}
.pprice{font-size:14px;font-weight:600;color:#6a6a6a;}
</style>
<div class="nav">
<div class="logo">Lemi Shine</div>
<div class="navlinks"><span>Dish</span><span>Kitchen</span><span>Bath</span><span>Bundles</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Cuts Through Hard Water. Loudly.</h1>
<p>Citrus-powered cleaning that announces its efficacy, not whispers it.</p>
<div class="cta">Shop Best Sellers</div>
</div>
<div class="heroimg"><div class="bubble b3"></div><div class="bubble b1"></div><div class="bubble b2"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb"></div><div class="pname">Dishwasher Detergent Booster</div><div class="pprice">$8.99</div></div>
<div class="card"><div class="badge orange">Sale</div><div class="thumb"></div><div class="pname">Sink & Faucet Cleaner</div><div class="pprice">$6.49</div></div>
<div class="card"><div class="thumb"></div><div class="pname">All-Purpose Citrus Spray</div><div class="pprice">$5.99</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Stainless Steel Cleaner</div><div class="pprice">$7.29</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1d1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1d1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #1d1d1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #75787f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #005d8e; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: transparent; color: #005d8e;
border: 1px solid #005d8e; border-radius: 4px;
padding: 10px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1d1d1f;
border: 1px solid #c6c6c7; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #75787f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #f84d4f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Eufy — Home</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#323232;
font-family:DINNextLT,'Helvetica Neue',Helvetica,sans-serif;
}
*{box-sizing:border-box;}
.page{width:960px;height:640px;display:flex;flex-direction:column;}
header{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#080a0f;}
.logo{font-family:'Mach','Mach Tera',DINNextLT,sans-serif;font-size:19px;font-weight:700;color:#fff;letter-spacing:-0.3px;}
nav{display:flex;gap:22px;}
nav a{font-size:12px;font-weight:500;color:#c8c8c8;}
.nav-cta{background:#005d8e;color:#fff;padding:8px 18px;border-radius:4px;font-size:12px;font-weight:600;}
.hero{display:flex;background:#1d1d1f;padding:26px 30px;gap:24px;}
.hero-copy{flex:1;}
.hero-copy .kicker{font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#10b5ec;margin-bottom:8px;}
.hero-copy h1{font-family:'Mach','Mach Tera',DINNextLT,sans-serif;font-size:34px;font-weight:700;color:#fff;margin:0 0 12px;line-height:1.1;letter-spacing:-0.4px;}
.hero-copy p{font-size:13px;color:#a7a9ab;max-width:340px;margin:0 0 16px;line-height:1.6;}
.hero-cta{display:inline-block;background:#005d8e;color:#fff;padding:11px 22px;border-radius:4px;font-size:12px;font-weight:600;}
.robovac{width:230px;height:150px;display:flex;align-items:center;justify-content:center;}
.disc{width:130px;height:130px;border-radius:50%;background:linear-gradient(160deg,#2b2b2f,#0e0e10);border:2px solid #10b5ec;box-shadow:0 0 30px rgba(16,181,236,0.25);position:relative;}
.disc::after{content:'';position:absolute;inset:38%;border-radius:50%;background:#10b5ec;box-shadow:0 0 12px #10b5ec;}
main{flex:1;padding:18px 30px 0;}
.spec-strip{display:flex;gap:0;border-radius:6px;overflow:hidden;margin-bottom:16px;background:#f5f6f7;}
.spec-strip div{flex:1;padding:10px 14px;border-right:1px solid #e2e2e4;}
.spec-strip div:last-child{border-right:none;}
.spec-strip b{display:block;font-family:'Mach',DINNextLT,sans-serif;font-size:17px;color:#005d8e;}
.spec-strip span{font-size:9.5px;color:#75787f;text-transform:uppercase;letter-spacing:0.4px;}
.row-head{font-family:'Mach',DINNextLT,sans-serif;font-size:17px;font-weight:700;color:#1d1d1f;margin:0 0 12px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.card{background:#f5f6f7;border-radius:6px;padding:10px;position:relative;}
.thumb{height:60px;border-radius:4px;background:linear-gradient(150deg,#e0e0e2,#c8c8ca);margin-bottom:8px;}
.badge{position:absolute;top:6px;left:6px;font-size:8px;font-weight:700;padding:3px 6px;border-radius:4px;color:#fff;background:#f84d4f;text-transform:uppercase;}
.card h4{font-size:11px;margin:0 0 4px;color:#1d1d1f;font-weight:600;}
.card .price{font-size:13px;font-weight:700;color:#005d8e;}
footer{background:#080a0f;padding:14px 30px;display:flex;justify-content:space-between;align-items:center;margin-top:14px;}
footer span{font-size:10px;color:#8b8d92;}
</style>
<div class="page">
<header>
<div class="logo">Eufy</div>
<nav><a>Robovacs</a><a>Security</a><a>Baby Monitors</a><a>Trimmers</a></nav>
<div class="nav-cta">Shop All</div>
</header>
<div class="hero">
<div class="hero-copy">
<div class="kicker">Mach Tera Series</div>
<h1>Suction ratings that read like specifications, not marketing.</h1>
<p>Self-emptying robovacs and always-watching security cams, engineered for the numbers on the box.</p>
<div class="hero-cta">Shop Robovacs</div>
</div>
<div class="robovac"><div class="disc"></div></div>
</div>
<main>
<div class="spec-strip">
<div><b>8,000 Pa</b><span>Suction Power</span></div>
<div><b>180 min</b><span>Runtime</span></div>
<div><b>2K</b><span>Camera Resolution</span></div>
<div><b>IP65</b><span>Weather Rating</span></div>
</div>
<div class="row-head">Featured Devices</div>
<div class="grid">
<div class="card"><div class="thumb"></div><h4>RoboVac Omni X9 Pro</h4><div class="price">$599.99</div></div>
<div class="card"><div class="badge">Sale</div><div class="thumb"></div><h4>SoloCam S340 Outdoor</h4><div class="price">$149.99</div></div>
<div class="card"><div class="thumb"></div><h4>Video Baby Monitor E30</h4><div class="price">$99.99</div></div>
<div class="card"><div class="thumb"></div><h4>Smart Scale P3</h4><div class="price">$39.99</div></div>
</div>
</main>
<footer>
<span>© Eufy — Smart Home Devices</span>
<span>Warranty · App Support · Trade-In</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #34e0a1; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #34e0a1; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dffaf0; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topnav { height:56px; display:flex; align-items:center; padding:0 30px; gap:16px; border-bottom:1px solid #E0E0E0; }
.owl { width:30px; height:30px; border-radius:50%; background:#000; position:relative; }
.owl::before, .owl::after { content:''; position:absolute; width:8px; height:8px; border-radius:50%; background:#34E0A1; top:9px; }
.owl::before { left:5px; } .owl::after { right:5px; }
.locpill { background:#F2F2F2; border-radius:999px; padding:8px 18px; font-size:14px; font-weight:600; }
.searchbar { flex:1; height:40px; background:#F2F2F2; border-radius:999px; display:flex; align-items:center; padding:0 16px; color:#6B6B6B; font-size:14px; }
.body { padding:20px 30px; display:flex; gap:24px; }
.catgrid { width:270px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cat { height:80px; background:#F2F2F2; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.cat span:first-child { font-size:22px; }
.cat span:last-child { font-size:13px; font-weight:600; }
.cards { flex:1; display:flex; flex-direction:column; gap:16px; }
.card { display:flex; gap:14px; }
.thumb { width:150px; height:100px; border-radius:16px; flex-shrink:0; position:relative; }
.thumb1 { background:linear-gradient(160deg,#d9c39a,#8a6a3a); }
.thumb2 { background:linear-gradient(160deg,#a9c9d9,#3a6a8a); }
.badge { position:absolute; top:8px; left:8px; background:#34E0A1; color:#000; font-size:10px; font-weight:700; padding:3px 8px; border-radius:999px; text-transform:uppercase; }
.cinfo { flex:1; }
.cname { font-size:17px; font-weight:700; }
.bubbles { display:flex; align-items:center; gap:3px; margin:6px 0; }
.bubbles span { width:14px; height:14px; border-radius:50%; background:#34E0A1; }
.bubbles span.e { background:#D9D9D9; }
.rcnt { font-size:13px; color:#6B6B6B; margin-left:6px; }
.catmeta { font-size:13px; color:#6B6B6B; }
</style></head>
<body>
<div class="topnav">
<div class="owl"></div>
<div class="locpill">Tripadvisor (iOS) ▾</div>
<div class="searchbar">Hotels, things to do, restaurants…</div>
</div>
<div class="body">
<div class="catgrid">
<div class="cat"><span>🏨</span><span>Hotels</span></div>
<div class="cat"><span>🎡</span><span>Things to do</span></div>
<div class="cat"><span>🍽️</span><span>Restaurants</span></div>
<div class="cat"><span>✈️</span><span>Flights</span></div>
</div>
<div class="cards">
<div class="card">
<div class="thumb thumb1"><span class="badge">Travelers' Choice</span></div>
<div class="cinfo">
<div class="cname">Hotel Vista Mar</div>
<div class="bubbles"><span></span><span></span><span></span><span></span><span class="e"></span><span class="rcnt">4.5 (1,284)</span></div>
<div class="catmeta">Hotel · $$ - $$$ · 0.4 mi</div>
</div>
</div>
<div class="card">
<div class="thumb thumb2"></div>
<div class="cinfo">
<div class="cname">Skyline Rooftop Bar</div>
<div class="bubbles"><span></span><span></span><span></span><span></span><span></span><span class="rcnt">4.9 (982)</span></div>
<div class="catmeta">Bar · $$ · 0.8 mi</div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0d0d0d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0d0d0d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #0d0d0d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ff5c28; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #0d0d0d;
border: 1px solid #ff5c28; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #0d0d0d;
border: 1px solid #c2c2c2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.8px; background: #ff5c28; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#0d0d0d; font-family:'Inter',Arial,sans-serif; color:#f0eff8; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #2a2a2a;}
.logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;color:#a0a0a0;}
.cta{height:40px;padding:0 22px;background:#ff5c28;color:#fff;border-radius:4px;display:flex;align-items:center;font-size:14px;font-weight:600;}
.hero{height:150px;display:flex;flex-direction:column;justify-content:center;padding:0 32px;}
.hero h1{font-size:40px;font-weight:700;letter-spacing:-1.2px;line-height:1.1;margin:0 0 8px;}
.hero p{font-size:15px;color:#c9c9c9;margin:0;}
.calc{margin:0 32px;background:#f5f5f5;border-radius:12px;border:1px solid #2a2a2a;padding:20px 24px;display:flex;gap:20px;color:#1a1a1a;}
.field{flex:1;}
.field .lab{font-size:11px;font-weight:600;letter-spacing:0.8px;text-transform:uppercase;color:#6b6b6b;margin-bottom:8px;}
.field .val{height:44px;border:1px solid #e5e5e5;border-radius:4px;display:flex;align-items:center;padding:0 12px;font-size:14px;background:#fff;}
.field.active .val{border:2px solid #ff5c28;}
.priceout{width:150px;text-align:right;}
.priceout .lab{font-size:11px;font-weight:600;letter-spacing:0.8px;text-transform:uppercase;color:#6b6b6b;}
.priceout .num{font-size:28px;font-weight:700;color:#ff5c28;letter-spacing:-0.3px;}
.chips{display:flex;gap:8px;padding:20px 32px 0;}
.chip{background:#171717;color:#f0eff8;font-family:'JetBrains Mono',monospace;font-size:12px;border-radius:4px;padding:5px 10px;}
.tracker{margin:16px 32px 0;display:flex;gap:24px;align-items:center;}
.step{font-size:11px;letter-spacing:0.6px;text-transform:uppercase;color:#9da8bc;display:flex;align-items:center;gap:6px;}
.dot{width:8px;height:8px;border-radius:50%;background:#404040;}
.dot.active{background:#ff5c28;}
.dot.done{background:#22c55e;}
</style>
<div class="nav">
<div class="logo">Lumi</div>
<div class="navlinks"><span>Mailer Boxes</span><span>Poly Mailers</span><span>Labels</span><span>Pricing</span></div>
<div class="cta">Get Started</div>
</div>
<div class="hero">
<h1>Packaging, built like infrastructure.</h1>
<p>Custom mailer boxes and shipping materials, priced live, shipped on schedule.</p>
</div>
<div class="calc">
<div class="field active"><div class="lab">Type</div><div class="val">Mailer Box</div></div>
<div class="field"><div class="lab">Dimensions</div><div class="val">10 x 8 x 4 in</div></div>
<div class="field"><div class="lab">Quantity</div><div class="val">2,500 units</div></div>
<div class="priceout"><div class="lab">Est. Unit Cost</div><div class="num">$0.62</div></div>
</div>
<div class="chips"><div class="chip">MAT · E-FLUTE</div><div class="chip">PRINT · 2-COLOR</div><div class="chip">LEAD · 12 DAYS</div></div>
<div class="tracker">
<div class="step"><div class="dot done"></div>Ordered</div>
<div class="step"><div class="dot active"></div>In Production</div>
<div class="step"><div class="dot"></div>Shipped</div>
<div class="step"><div class="dot"></div>Delivered</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #262626;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #262626;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 300; line-height: 1.2; margin: 0; color: #262626; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #0b427a; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #262626;
border: 1px solid #0b427a; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #262626;
border: 1px solid #c9c9c9; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #fa4d5a; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#262626; box-sizing:border-box;
font-family:'Open Sans',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:18px; font-weight:700; margin:0; font-family:'Helvetica Neue',Arial,sans-serif; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#4d4d4d; }
.navlinks span.on { color:#0b427a; border-bottom:2px solid #0b427a; padding-bottom:24px; }
.util { font-size:13px; color:#949494; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 72px); }
.stage { padding:24px; display:flex; flex-direction:column; gap:10px; background:#1a1a1a; }
.panel { flex:1; position:relative; overflow:hidden; }
.panel::before { content:''; position:absolute; left:50%; top:50%; width:74%; height:74%; transform:translate(-50%,-50%); background:radial-gradient(circle,#262626 0 8%,#0b427a 8% 12%,#262626 12% 20%,#0b427a 20% 24%,#111 24% 100%); border-radius:50%; box-shadow:0 0 40px rgba(0,0,0,0.6); }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; background:#262626; }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:14px; color:#949494; }
h1 { margin:0; font-size:24px; font-weight:700; }
.artist { font-size:16px; font-weight:300; color:#4d4d4d; }
.badge-row { display:flex; gap:6px; }
.badge-new { background:#2098d1; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:2px 8px; }
.price { font-size:16px; font-weight:700; }
.format-row { display:flex; gap:8px; }
.fmt { border:1px solid #d9d9d9; padding:8px 14px; font-size:13px; font-weight:700; }
.fmt.on { background:#262626; color:#fff; border-color:#262626; }
.desc { font-size:14px; color:#4d4d4d; line-height:1.5; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:44px; background:#0b427a; color:#fff; border:none; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.btn-secondary { width:150px; height:44px; background:#fff; border:1px solid #262626; color:#262626; font-size:14px; font-weight:700; text-transform:uppercase; }
</style></head>
<body>
<nav>
<p class="brand">Blue Note Shop</p>
<div class="navlinks"><span class="on">Vinyl</span><span>CDs</span><span>Merch</span><span>New Arrivals</span></div>
<div class="util">Search Account Cart (0)</div>
</nav>
<main>
<div class="stage">
<div class="panel"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Classic Vinyl Series</span>
<h1>Speak No Evil</h1>
<div class="artist">Wayne Shorter</div>
<div class="badge-row"><span class="badge-new">Reissue</span></div>
<div class="price">$32.98</div>
<div class="format-row">
<span class="fmt on">180g Vinyl</span><span class="fmt">CD</span><span class="fmt">Digital</span>
</div>
<p class="desc">Tone Poet Series remaster, mastered from the original analog tapes and pressed at Optimal — includes original liner notes.</p>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Track List</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.38; background: #313131; color: #ffffff;
border: none; border-radius: 0px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.38; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 0px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #333333;
border: 1px solid #c8c8c8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; background: #cc0000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>HobbySearch Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; background:#ffffff; color:#333333; }
*{box-sizing:border-box;}
.wrap{width:920px;margin:0 auto;}
.nav{height:40px;background:#313131;color:#fff;display:flex;align-items:center;padding:0 16px;}
.navlinks{display:flex;gap:2px;}
.navlinks span{padding:0 12px;font-size:14px;font-weight:600;height:40px;line-height:40px;}
.navlinks span.active{background:#1a1a1a;}
.catstrip{height:36px;background:#f5f5f5;display:flex;align-items:center;padding:0 16px;gap:2px;}
.catstrip span{padding:0 12px;font-size:14px;font-weight:600;color:#666;}
.catstrip span.active{background:#313131;color:#fff;height:36px;line-height:36px;}
.searchbar{display:flex;padding:10px 16px;gap:0;}
.search{height:32px;flex:1;border:1px solid #cccccc;font-size:14px;padding:0 10px;line-height:32px;color:#333;}
.searchbtn{height:32px;width:60px;background:#313131;color:#fff;text-align:center;line-height:32px;font-size:12px;font-weight:600;}
.section{padding:0 16px;}
.section h2{font-size:16px;font-weight:600;margin:6px 0 10px;}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.card{background:#fff;border:1px solid #e0e0e0;padding:8px;position:relative;}
.imgbox{height:75px;background:#f5f5f5;margin-bottom:6px;display:flex;align-items:center;justify-content:center;color:#999;font-size:9px;text-align:center;}
.badge{position:absolute;top:6px;left:6px;background:#cc0000;color:#fff;font-size:9px;font-weight:700;padding:2px 6px;}
.title{font-size:12px;font-weight:600;color:#222;line-height:1.3;height:31px;overflow:hidden;margin-bottom:4px;}
.price{font-size:14px;font-weight:600;color:#313131;}
.stock{font-size:10px;color:#2e7d32;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#313131;color:#fff;padding:10px 16px;display:flex;justify-content:space-between;font-size:11px;}
</style>
<div class="wrap">
<div class="nav">
<div class="navlinks"><span>Plastic Models</span><span>Diecast</span><span class="active">New Items</span><span>Figures</span><span>Tools</span></div>
</div>
<div class="catstrip">
<span class="active">All Items</span><span>Sale</span><span>Preorder</span><span>Restock</span>
</div>
<div class="searchbar"><div class="search">Enter product code or keyword</div><div class="searchbtn">SEARCH</div></div>
<div class="section">
<h2>New Items — Aircraft Scale Models</h2>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="imgbox">1/48 F-14</div><div class="title">1/48 F-14 Tomcat Kit</div><div class="price">$42.00</div><div class="stock">In Stock</div></div>
<div class="card"><div class="imgbox">1/72 Zero</div><div class="title">1/72 A6M Zero Fighter</div><div class="price">$21.50</div><div class="stock">In Stock</div></div>
<div class="card"><div class="imgbox">1/35 M4</div><div class="title">1/35 M4 Sherman Tank</div><div class="price">$36.00</div><div class="stock" style="color:#e65100;">Low Stock</div></div>
<div class="card"><div class="imgbox">Figure A</div><div class="title">1/12 Pilot Figure Set</div><div class="price">$14.00</div><div class="stock">In Stock</div></div>
<div class="card"><div class="imgbox">Diecast B</div><div class="title">1/64 Diecast Sedan</div><div class="price">$18.90</div><div class="stock">In Stock</div></div>
</div>
</div>
</div>
<div class="footer"><span>© Hobbysearch</span><span>Help · Shipping · Returns · Contact</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f3f3; color: #181818;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f3f3; color: #181818;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.35; margin: 0; color: #181818; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5c5c5c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ff5e00; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f3f3f3; color: #181818;
border: 1px solid #ff5e00; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #181818;
border: 1px solid #d1d1d1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5c5c5c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff5e00; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f3f3f3; font-family:'Lato',system-ui,sans-serif; color:#1a1918; }
*{box-sizing:border-box;}
.nav{height:56px;background:#141519;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{color:#fff;font-family:'Nutmeg','Lato',sans-serif;font-size:20px;font-weight:600;}
.navlinks{display:flex;gap:2px;}
.navlinks span{color:#fff;font-size:13px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;padding:8px 14px;border-radius:4px;}
.navlinks span.on{background:#23252b;color:#ff5e00;}
.search{background:#fff;border-radius:4px;padding:10px 16px;font-size:13px;color:#5c5c5c;width:180px;}
.pillrow{display:flex;gap:8px;padding:14px 30px;background:#141519;}
.pill{background:#23252b;color:#fff;border-radius:9999px;font-size:12px;font-weight:600;padding:6px 16px;}
.grid{display:flex;flex-wrap:wrap;gap:14px;padding:20px 30px;}
.card{width:170px;background:#fff;border-radius:4px;overflow:hidden;}
.thumb{height:190px;background:linear-gradient(160deg,#23252b,#141519);position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;color:#fff;}
.badge.sale{background:#ff5e00;}
.badge.pre{background:#029ddf;}
.badge.ltd{background:#fab818;color:#181818;}
.info{padding:8px 12px;}
.pname{font-size:14px;font-weight:600;margin-bottom:4px;}
.pprice{font-size:16px;font-weight:700;}
.pprice.sale{color:#ff5e00;}
</style>
<div class="nav">
<div class="logo">Rightstuf Anime Legacy Link</div>
<div class="navlinks"><span class="on">Blu-ray</span><span>Manga</span><span>Figures</span><span>Import</span></div>
<div class="search">Search titles...</div>
</div>
<div class="pillrow">
<div class="pill">All Series</div><div class="pill">Steelbook</div><div class="pill">Import</div><div class="pill">Clearance</div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge sale">Sale</div></div><div class="info"><div class="pname">Neon Static Vol. 3 Blu-ray</div><div class="pprice sale">$19.99</div></div></div>
<div class="card"><div class="thumb"><div class="badge pre">Pre-Order</div></div><div class="info"><div class="pname">Ghost Circuit Steelbook</div><div class="pprice">$54.99</div></div></div>
<div class="card"><div class="thumb"><div class="badge ltd">Limited</div></div><div class="info"><div class="pname">Iron Lotus Import Edition</div><div class="pprice">$68.00</div></div></div>
<div class="card"><div class="thumb"></div><div class="info"><div class="pname">Wandering Star Manga Box</div><div class="pprice">$42.00</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #0066cc; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #000000; color: #ffffff;
border: 1px solid #0066cc; border-radius: 0px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #111111; color: #ffffff;
border: 1px solid #000000; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff6600; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#000000; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#ffffff; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #333333;}
.logo{font-size:18px;font-weight:600;color:#fff;letter-spacing:.3px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:400;color:#808080;}
.navcta{font-size:13px;color:#0066cc;font-weight:600;}
.hero{height:250px;display:flex;align-items:center;padding:0 36px;gap:30px;}
.cover{width:190px;height:190px;border-radius:0;}
.herotext{flex:1;}
.meta{font-size:12px;color:#808080;margin-bottom:10px;}
.headline{font-size:24px;font-weight:600;color:#fff;margin-bottom:10px;line-height:1.3;}
.sub{font-size:14px;color:#a0a0a0;margin-bottom:18px;max-width:340px;}
.btn{display:inline-block;background:#0066cc;color:#fff;font-size:13px;font-weight:600;padding:11px 24px;border-radius:8px;}
.sec{padding:18px 36px 0;}
.sectitle{font-size:14px;font-weight:600;color:#fff;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;}
.thumb{height:120px;margin-bottom:8px;}
.rtitle{font-size:13px;font-weight:600;color:#fff;}
.rmeta{font-size:11px;color:#808080;margin-top:2px;}
</style>
<div class="nav">
<div class="logo">Nonesuch Records</div>
<div class="navlinks"><span>Artists</span><span>New Releases</span><span>Vinyl</span></div>
<div class="navcta">Sign In</div>
</div>
<div class="hero">
<div class="cover" style="background:linear-gradient(135deg,#333333,#0066cc)"></div>
<div class="herotext">
<div class="meta">CAT. NO. 79876-1 · RELEASED 03.14</div>
<div class="headline">Quiet Rooms, Volume II</div>
<div class="sub">A listening room in record form — the design gets out of the way.</div>
<div class="btn">Shop Vinyl</div>
</div>
</div>
<div class="sec">
<div class="sectitle">Recent Catalog</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0066cc,#000)"></div><div class="rtitle">Field Recordings, Vol. 3</div><div class="rmeta">CAT. NO. 79812 · LP</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#808080,#000)"></div><div class="rtitle">Piano Études, Live</div><div class="rmeta">CAT. NO. 79790 · CD</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#333333,#0066cc)"></div><div class="rtitle">Chamber Sessions</div><div class="rmeta">CAT. NO. 79765 · LP</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0a; color: #ebebeb;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0a; color: #ebebeb;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 500; line-height: 1.15; letter-spacing: 0.5px; margin: 0; color: #ebebeb; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 1.5px; background: #41529a; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 1.5px; background: transparent; color: #ebebeb;
border: 1px solid #41529a; border-radius: 0px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #222222; color: #ebebeb;
border: 1px solid #424242; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #41529a; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Ibanez mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#0a0a0a; color:#ebebeb;
font-family:'Open Sans', Arial, sans-serif;
}
*{box-sizing:border-box;}
.nav{
height:64px; background:#0a0a0a; border-bottom:1px solid #303030;
display:flex; align-items:center; justify-content:space-between; padding:0 32px;
}
.logo{font-family:'Oswald', Arial, sans-serif; font-size:22px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#ebebeb;}
.navlinks{display:flex; gap:26px;}
.navlinks span{font-family:'Raleway', Arial, sans-serif; font-size:12px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:#888888;}
.navlinks .active{color:#41529a;}
.navcta{height:34px; padding:0 18px; display:flex; align-items:center; justify-content:center; background:#41529a; color:#fff; border-radius:4px; font-family:'Oswald',Arial,sans-serif; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px;}
.hero{
height:260px; position:relative; display:flex; align-items:center; padding:0 32px; overflow:hidden;
background:radial-gradient(ellipse at 70% 50%, #1a1a2e 0%, #0a0a0a 65%);
}
.hero-left{width:440px; z-index:2;}
.hkicker{font-family:'Raleway',Arial,sans-serif; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#00a7cb; margin-bottom:14px;}
.h1{font-family:'Oswald',Arial,sans-serif; font-size:38px; font-weight:700; text-transform:uppercase; line-height:1.1; letter-spacing:0.5px; margin:0 0 14px 0; color:#ebebeb;}
.hsub{font-size:15px; line-height:1.6; color:#bcbcbc; margin:0 0 20px 0; max-width:400px;}
.cta{display:inline-flex; align-items:center; justify-content:center; width:190px; height:46px; background:#41529a; color:#fff; border-radius:4px; font-family:'Oswald',Arial,sans-serif; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px;}
.hero-right{position:absolute; right:70px; top:30px; width:220px; height:200px;}
.guitar-body{
position:absolute; right:20px; top:20px; width:160px; height:160px; border-radius:50% 50% 50% 20%;
background:radial-gradient(circle at 35% 35%, #61b14b 0%, #1a1a1a 60%);
box-shadow:0 0 40px rgba(97,177,75,0.35);
}
.guitar-neck{position:absolute; right:150px; top:70px; width:90px; height:20px; background:linear-gradient(90deg,#303030,#111); border-radius:4px;}
.swatchrow{display:flex; gap:8px; padding:0 32px 12px 32px;}
.swatch{width:18px; height:18px; border-radius:50%;}
.seclabel{padding:6px 32px 12px 32px; font-family:'Raleway',Arial,sans-serif; font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:#888888;}
.grid{display:flex; gap:16px; padding:0 32px;}
.card{width:190px; background:#303030; border-radius:8px; padding:14px; position:relative;}
.badge{position:absolute; top:10px; left:10px; background:#41529a; color:#fff; font-family:'Oswald',Arial,sans-serif; font-size:10px; font-weight:600; text-transform:uppercase; border-radius:4px; padding:3px 7px; z-index:2;}
.badge-sale{background:#dd2211;}
.thumb{height:92px; background:#222222; border-radius:6px; margin-bottom:12px; display:flex; align-items:center; justify-content:center;}
.thumb-shape{width:50px; height:70px; border-radius:50% 50% 50% 20%;}
.pname{font-family:'Oswald',Arial,sans-serif; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; margin:0 0 6px 0; color:#ebebeb;}
.pprice{font-size:15px; font-weight:700; color:#ebebeb; margin:0;}
</style>
<div class="nav">
<div class="logo">Ibanez</div>
<div class="navlinks">
<span class="active">Electric</span>
<span>Acoustic</span>
<span>Bass</span>
<span>Amps</span>
</div>
<div class="navcta">Find a Dealer</div>
</div>
<div class="hero">
<div class="hero-left">
<div class="hkicker">RG Series</div>
<h1 class="h1">Materialized from the void.</h1>
<p class="hsub">Precision necks and finishes engineered for players who chase the impossible riff.</p>
<div class="cta">Explore RG Series</div>
</div>
<div class="hero-right">
<div class="guitar-neck"></div>
<div class="guitar-body"></div>
</div>
</div>
<div class="swatchrow">
<div class="swatch" style="background:#dd2211;"></div>
<div class="swatch" style="background:#eb5505;"></div>
<div class="swatch" style="background:#61b14b;"></div>
<div class="swatch" style="background:#724c8c;"></div>
<div class="swatch" style="background:#00a7cb;"></div>
<div class="swatch" style="background:#0066aa;"></div>
</div>
<div class="seclabel">Featured Finishes</div>
<div class="grid">
<div class="card">
<span class="badge">NEW</span>
<div class="thumb"><div class="thumb-shape" style="background:radial-gradient(circle at 35% 35%,#dd2211,#1a1a1a 70%);"></div></div>
<p class="pname">RG550 Genesis</p>
<p class="pprice">$899.99</p>
</div>
<div class="card">
<div class="thumb"><div class="thumb-shape" style="background:radial-gradient(circle at 35% 35%,#00a7cb,#1a1a1a 70%);"></div></div>
<p class="pname">AZ Prestige</p>
<p class="pprice">$1,899.00</p>
</div>
<div class="card">
<span class="badge badge-sale">SALE</span>
<div class="thumb"><div class="thumb-shape" style="background:radial-gradient(circle at 35% 35%,#724c8c,#1a1a1a 70%);"></div></div>
<p class="pname">SR Bass Standard</p>
<p class="pprice">$549.99</p>
</div>
<div class="card">
<div class="thumb"><div class="thumb-shape" style="background:radial-gradient(circle at 35% 35%,#eb5505,#1a1a1a 70%);"></div></div>
<p class="pname">Artcore Hollowbody</p>
<p class="pprice">$699.99</p>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #181818;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #181818;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #181818; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #52606d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #029ddf; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #029ddf;
border: 1px solid #029ddf; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #181818;
border: 1px solid #c5c5c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #52606d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #029ddf; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#1a1918; font-family:'Outfit',system-ui,sans-serif; color:#2b3749; }
*{box-sizing:border-box;}
.nav{height:64px;background:#181818;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#fff;}
.navlinks .active{color:#029ddf;}
.hero{height:230px;background:#1a1918;display:flex;align-items:center;padding:0 32px;position:relative;overflow:hidden;}
.ring{position:absolute;right:80px;top:40px;width:150px;height:150px;border-radius:50%;border:2px solid #029ddf;opacity:0.5;}
.ring2{position:absolute;right:110px;top:70px;width:90px;height:90px;border-radius:50%;border:2px solid #029ddf;opacity:0.8;}
.router{position:absolute;right:135px;top:95px;width:40px;height:40px;border-radius:8px;background:linear-gradient(160deg,#029ddf,#192f5d);}
.herotext{max-width:440px;}
.herotext h1{font-size:36px;font-weight:700;color:#fff;margin:0 0 10px;line-height:1.15;}
.herotext p{font-size:15px;color:#eeeeee;margin:0 0 16px;}
.herocta{display:inline-block;background:#029ddf;color:#fff;font-size:16px;font-weight:600;padding:14px 28px;border-radius:8px;}
.grid{display:flex;gap:14px;padding:18px 32px 0;background:#ffffff;padding-top:18px;padding-bottom:18px;}
.card{width:216px;background:#fff;border:1px solid #d1d1d1;border-radius:12px;padding:14px;position:relative;}
.thumb{height:70px;border-radius:8px;margin-bottom:10px;}
.badge{position:absolute;top:14px;left:14px;background:#029ddf;color:#fff;font-size:10px;font-weight:600;text-transform:uppercase;padding:3px 10px;border-radius:9999px;}
.b-alert{background:#bd3d44;}
.ptitle{font-size:16px;font-weight:500;color:#181818;margin-bottom:6px;}
.specrow{display:flex;gap:6px;margin-bottom:8px;}
.spec{background:#e2e8f0;border-radius:4px;padding:4px 8px;font-size:10px;color:#52606d;}
.specval{font-family:'SFMono-Regular',Consolas,monospace;color:#181818;}
.pprice{font-size:18px;font-weight:600;color:#181818;}
</style>
<div class="nav">
<div class="logo">Netgear</div>
<div class="navlinks"><div class="active">Wi-Fi 7</div><div>Nighthawk</div><div>Mesh</div><div>Cable Modems</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Coverage That Never<br>Drops the Signal.</h1>
<p>Enterprise-grade Wi-Fi 7 routers engineered for the whole house.</p>
<div class="herocta">Shop Nighthawk</div>
</div>
<div class="ring"></div><div class="ring2"></div><div class="router"></div>
</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(160deg,#029ddf,#192f5d)"></div><div class="ptitle">Nighthawk RAXE500</div><div class="specrow"><span class="spec">BE19000</span><span class="spec">3,500 sq ft</span></div><div class="pprice">$599.99</div></div>
<div class="card"><span class="badge b-alert">Armor</span><div class="thumb" style="background:linear-gradient(160deg,#bd3d44,#192f5d)"></div><div class="ptitle">Nighthawk Pro Gaming XR1000</div><div class="specrow"><span class="spec">AXE6000</span><span class="spec">2,500 sq ft</span></div><div class="pprice">$349.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#192f5d,#029ddf)"></div><div class="ptitle">Orbi Mesh System (3-pack)</div><div class="specrow"><span class="spec">Wi-Fi 6E</span><span class="spec">6,000 sq ft</span></div><div class="pprice">$699.99</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-size: 20px; font-weight:700; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-size: 12px; font-weight:400; line-height:1.4; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #E55A00; color: #ffffff;
border: none; border-radius: 999; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #FFFFFF; color: #E55A00;
border: 1px solid #E55A00; border-radius: 999;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #FFFFFF; color: #111111;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #fbe8db; color: #E55A00;
border-radius: 999; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, sans-serif; background: #FCF9F8; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
nav { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 36px; background: #FFFFFF; }
.brand { display: flex; align-items: center; gap: 8px; }
.marklogo { width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(#FF7020 0deg 180deg, #1D1D1D 180deg 360deg); }
.brand p { margin: 0; font-size: 19px; font-weight: 800; color: #1D1D1D; }
.navlinks { display: flex; gap: 24px; font-size: 13px; color: #1D1D1D; font-weight: 700; opacity: 0.7; }
.cta { background: #FF7020; color: #fff; border: none; border-radius: 999px; padding: 10px 22px; font-weight: 700; font-size: 13px; }
.hero { padding: 32px 36px 0; }
.hero h1 { font-size: 34px; font-weight: 800; color: #1D1D1D; margin: 0 0 4px; letter-spacing: -0.5px; }
.hero p { font-size: 14px; color: #737373; margin: 0 0 20px; }
.searchbox { background: #ffffff; border-radius: 24px; padding: 20px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); display: flex; gap: 12px; align-items: flex-end; }
.field { flex: 1; }
.field label { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; color: #A3A3A3; margin-bottom: 6px; letter-spacing: 0.04em; }
.field .box { height: 42px; border-radius: 12px; background: #F5F5F5; display: flex; align-items: center; padding: 0 14px; font-size: 13px; font-weight: 700; color: #1D1D1D; }
.searchbtn { background: #FF7020; color: #fff; border: none; border-radius: 999px; height: 42px; padding: 0 26px; font-weight: 800; font-size: 13px; white-space: nowrap; }
.deals { padding: 26px 36px 0; }
.deals h2 { font-size: 18px; font-weight: 800; color: #1D1D1D; margin: 0 0 14px; }
.destcards { display: flex; gap: 16px; }
.dest { flex: 1; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.dest .img { height: 90px; background: linear-gradient(135deg, #FFB86C, #FF7020); position: relative; }
.dest .img .from { position: absolute; bottom: 8px; left: 12px; color: #fff; font-size: 10px; font-weight: 700; background: rgba(0,0,0,0.25); padding: 2px 8px; border-radius: 999px; }
.dest .info { padding: 12px 14px; }
.dest .info h4 { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: #1D1D1D; }
.dest .info .price { font-size: 12px; color: #737373; }
.dest .info .price b { color: #FF7020; font-size: 15px; }
.strip { display: flex; gap: 0; margin: 24px 36px 0; border-radius: 16px; overflow: hidden; }
.strip .s { flex: 1; padding: 14px 18px; }
.strip .s.orange { background: #FF7020; color: #fff; }
.strip .s.dark { background: #1D1D1D; color: #fff; }
.strip .s.light { background: #F5F5F5; color: #1D1D1D; }
.strip .s b { display: block; font-size: 16px; font-weight: 800; }
.strip .s span { font-size: 11px; opacity: 0.85; }
</style>
<nav>
<div class="brand"><div class="marklogo"></div><p>GOL Linhas Aéreas</p></div>
<div class="navlinks"><span>Book</span><span>Check-in</span><span>My trips</span><span>Loyalty</span></div>
<button class="cta">Sign in</button>
</nav>
<div class="hero">
<h1>Fly with the orange sunset.</h1>
<p>Simple fares, friendly service, everywhere in Brazil and beyond.</p>
<div class="searchbox">
<div class="field"><label>From</label><div class="box">São Paulo (GRU)</div></div>
<div class="field"><label>To</label><div class="box">Rio de Janeiro (SDU)</div></div>
<div class="field"><label>Departure</label><div class="box">Sep 12</div></div>
<div class="field"><label>Passengers</label><div class="box">1 adult</div></div>
<button class="searchbtn">Search flights</button>
</div>
</div>
<div class="deals">
<h2>Deals this week</h2>
<div class="destcards">
<div class="dest"><div class="img"><span class="from">from GRU</span></div><div class="info"><h4>Salvador</h4><div class="price">Starting at <b>$89</b></div></div></div>
<div class="dest"><div class="img"><span class="from">from GRU</span></div><div class="info"><h4>Recife</h4><div class="price">Starting at <b>$104</b></div></div></div>
<div class="dest"><div class="img"><span class="from">from GRU</span></div><div class="info"><h4>Fortaleza</h4><div class="price">Starting at <b>$96</b></div></div></div>
<div class="dest"><div class="img"><span class="from">from GRU</span></div><div class="info"><h4>Manaus</h4><div class="price">Starting at <b>$132</b></div></div></div>
</div>
</div>
<div class="strip">
<div class="s orange"><b>4 brands, 1 system</b><span>Airline, loyalty, cargo & corporate travel</span></div>
<div class="s dark"><b>iF Design Award 2025</b><span>Recognized design system in Latin America</span></div>
<div class="s light"><b>Warm off-white surfaces</b><span>The signature #FCF9F8 background</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #121212;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d9d9d9; color: #121212;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1A1A; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#fff; padding:24px 18px; position:relative; border-right:1px solid #E4E6E6; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.doctitle { font-size:15px; font-weight:600; }
.ring { width:38px; height:38px; border-radius:50%; background:conic-gradient(#15C39A 0 87%, #E4E6E6 87% 100%);
display:flex; align-items:center; justify-content:center; }
.ring span { width:28px; height:28px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:700; color:#15C39A; }
.doc { font-size:15px; line-height:1.65; color:#1A1A1A; margin-bottom:100px; }
.u1 { text-decoration:none; border-bottom:2px wavy #E5484D; }
.u2 { background:rgba(59,130,246,0.18); border-bottom:2px solid #3B82F6; }
.suggcard { position:absolute; left:0; right:0; bottom:64px; background:#F7F8F8; border:1px solid #E4E6E6;
border-radius:16px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,0.12); margin:0 18px; }
.catrow { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase;
color:#6B6B70; letter-spacing:0.4px; }
.catdot { width:9px; height:9px; border-radius:50%; background:#E5484D; }
.swapline { font-size:15px; margin:8px 0; }
.swapline .old { color:#E5484D; text-decoration:line-through; }
.swapline .arrow { color:#9A9A9F; margin:0 4px; }
.swapline .new { color:#15C39A; font-weight:600; }
.expl { font-size:12px; color:#6B6B70; line-height:1.5; margin-bottom:10px; }
.acceptbtn { background:#15C39A; color:#06281F; text-align:center; border-radius:999px; padding:9px; font-size:13px; font-weight:700; }
.assistbar { position:absolute; bottom:0; left:0; right:0; height:56px; background:rgba(255,255,255,0.96);
border-top:0.5px solid #E4E6E6; display:flex; align-items:center; padding:0 16px; gap:10px; }
.orb { width:32px; height:32px; border-radius:50%; background:#15C39A; color:#fff; display:flex; align-items:center;
justify-content:center; font-size:13px; font-weight:700; }
.assistmeta .l1 { font-size:13px; font-weight:700; }
.assistmeta .l2 { font-size:10px; color:#6B6B70; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:800; letter-spacing:-0.4px; margin:0; }
.brand span { color:#15C39A; }
.tag { font-size:14px; color:#6B6B70; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:16px; border:1px solid #E4E6E6; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#6B6B70; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:700; }
.typeblock .t2 { font-size:13px; color:#6B6B70; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:999px;
background:#F7F8F8; border:1px solid #E4E6E6; color:#6B6B70; }
.footer { margin-top:auto; border-top:1px solid #E4E6E6; padding-top:16px; font-size:11px; color:#9A9A9F; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="topbar"><span>‹</span><span class="doctitle">Q3 Product Brief</span><div class="ring"><span>87</span></div></div>
<div class="doc">The <span class="u1">recieve</span> team has finalized the roadmap, and we believe <span class="u2">it is important that we should</span> ship the onboarding redesign before the next release cycle begins.</div>
<div class="suggcard">
<div class="catrow"><span class="catdot"></span>CORRECTNESS</div>
<div class="swapline"><span class="old">recieve</span><span class="arrow">→</span><span class="new">receive</span></div>
<div class="expl">This word is commonly misspelled — "i" before "e" except after "c".</div>
<div class="acceptbtn">Accept</div>
</div>
<div class="assistbar">
<div class="orb">G</div>
<div class="assistmeta"><div class="l1">14 suggestions</div><div class="l2">3 Correctness · 6 Clarity · 5 Engagement</div></div>
</div>
</div>
<div class="info">
<div>
<h1 class="brand">Grammarly (iOS)<span>.</span></h1>
<p class="tag">A calm writing surface where color-coded underlines mark the text and a single suggestion card floats up at a time.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#15C39A"></div><small>#15C39A</small></div>
<div class="sw"><div class="chip2" style="background:#E5484D"></div><small>#E5484D</small></div>
<div class="sw"><div class="chip2" style="background:#3B82F6"></div><small>#3B82F6</small></div>
<div class="sw"><div class="chip2" style="background:#8B5CF6"></div><small>#8B5CF6</small></div>
<div class="sw"><div class="chip2" style="background:#E0A82E"></div><small>#E0A82E</small></div>
</div>
<div class="typeblock">
<div class="t1">Score: 87</div>
<div class="t2">Inter · 16pt / 1.65 · editor body reads like calm prose, not a dashboard</div>
</div>
<div class="taglist">
<span>Suggestion card</span><span>Document score ring</span><span>Category underlines</span>
<span>Tone detector</span><span>Pill buttons everywhere</span>
</div>
<div class="footer">Single brand green #15C39A · four category colors mark text only, never CTAs</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f1; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f1; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6c757d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #334fb4; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f5f5f1; color: #1c1c1c;
border: 1px solid #334fb4; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1c1c1c;
border: 1px solid #bfbfbc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c757d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #334fb4; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f1; font-family:'Maison Neue','Helvetica Neue',Arial,sans-serif; color:#1c1c1c; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dedede;}
.logo{font-family:'ABC Whyte','Helvetica Neue',Arial,sans-serif;font-size:19px;font-weight:500;letter-spacing:.5px;}
.navlinks{display:flex;gap:24px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:1.1px;color:#1c1c1c;}
.navlinks .on{color:#334fb4;}
.hero{height:250px;display:flex;background:#eceae2;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 42px;}
.herotext h1{font-family:'ABC Whyte','Helvetica Neue',Arial,sans-serif;font-size:30px;font-weight:500;color:#1c1c1c;margin:0 0 14px;line-height:1.25;}
.herotext p{font-size:15px;color:#6c757d;margin:0 0 20px;max-width:320px;line-height:1.5;}
.btn{display:inline-block;background:#334fb4;color:#fff;font-size:13px;font-weight:600;letter-spacing:.4px;padding:14px 28px;border-radius:9999px;width:fit-content;}
.heroimg{width:54%;position:relative;overflow:hidden;background:linear-gradient(150deg,#dedcd0,#c9c6b8 60%);}
.heroimg .sofa{position:absolute;left:60px;bottom:40px;width:280px;height:100px;border-radius:16px;background:#334fb4;opacity:.85;}
.heroimg .sofa:before{content:'';position:absolute;left:16px;top:-30px;width:70px;height:60px;border-radius:12px;background:#334fb4;}
.heroimg .sofa:after{content:'';position:absolute;right:16px;top:-30px;width:70px;height:60px;border-radius:12px;background:#334fb4;}
.sec{padding:24px 42px 0;}
.sectitle{font-size:19px;font-weight:500;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:206px;}
.thumb{height:120px;border-radius:8px;margin-bottom:10px;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#fff;color:#1c1c1c;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:3px 9px;border-radius:9999px;}
.ptitle{font-size:14px;font-weight:500;color:#1c1c1c;}
.pprice{font-size:13px;color:#6c757d;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Maiden Home</div>
<div class="navlinks"><div class="on">Sofas</div><div>Chairs</div><div>Tables</div><div>Custom</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Furniture that invites you to sit down.</h1>
<p>Heirloom-quality upholstery, built to order and made to last generations.</p>
<div class="btn">Design Yours</div>
</div>
<div class="heroimg"><div class="sofa"></div></div>
</div>
<div class="sec">
<div class="sectitle">Considered Classics</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#334fb4,#dedcd0);"><span class="badge">New</span></div><div class="ptitle">Cloud Sofa, 3-Seat</div><div class="pprice">From $3,995</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1c1c1c,#c9c6b8);"></div><div class="ptitle">Ashford Lounge Chair</div><div class="pprice">From $1,895</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#6c757d,#eceae2);"></div><div class="ptitle">Corbin Coffee Table</div><div class="pprice">From $1,295</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1990c6,#dedcd0);"></div><div class="ptitle">Marlow Sectional</div><div class="pprice">From $5,495</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00b6e1; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00b6e1; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #111111; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b6e1; color: #111111;
border: 1px solid #111111; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00b6e1; color: #000000;
border: 1px solid #27c0e4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #039cc0; color: #111111;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#111111; color:#ffffff; box-sizing:border-box;
font-family: "Work Sans", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.rail { width:200px; flex:0 0 200px; height:640px; padding:28px 20px; display:flex; flex-direction:column;
gap:6px; }
.rail-brand { font-size:20px; font-weight:600; margin-bottom:26px; letter-spacing:0.02em; }
.rail-item { font-size:14px; font-weight:400; color:#8a8a8a; padding:10px 8px; border-radius:6px; }
.rail-item.active { color:#ffffff; font-weight:500; background:rgba(255,255,255,0.06); }
.main { flex:1; height:640px; padding:32px 36px 0; position:relative; display:flex; flex-direction:column; }
.now-label { font-size:12px; font-weight:500; color:#00b6e1; letter-spacing:0.08em; margin-bottom:14px; }
.content-row { display:flex; gap:32px; flex:1; }
.art-col { width:300px; flex:0 0 300px; }
.cover { width:300px; height:300px; border-radius:10px;
background: linear-gradient(135deg, #1c4d63 0%, #00b6e1 45%, #0a2530 100%); position:relative; overflow:hidden; }
.cover::after { content:""; position:absolute; inset:0;
background: radial-gradient(circle at 70% 20%, rgba(255,255,255,0.18), transparent 45%); }
.track-title { font-size:34px; font-weight:600; margin:22px 0 6px; line-height:1.15; }
.track-artist { font-size:15px; font-weight:400; color:#9a9a9a; }
.progress-wrap { margin-top:20px; }
.progress-track { width:300px; height:4px; border-radius:9999px; background:#2a2a2a; position:relative; }
.progress-fill { position:absolute; left:0; top:0; height:4px; width:62%; border-radius:9999px; background:#00b6e1; }
.progress-time { display:flex; justify-content:space-between; font-size:12px; color:#7a7a7a; margin-top:8px; }
.queue-col { flex:1; padding-top:4px; }
.queue-title { font-size:14px; font-weight:600; color:#cfcfcf; margin-bottom:16px; letter-spacing:0.02em; }
.queue-item { display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid #1e1e1e; }
.queue-thumb { width:40px; height:40px; border-radius:6px; flex-shrink:0; }
.queue-thumb.t1 { background:linear-gradient(135deg,#7b5cff,#2a1e5c); }
.queue-thumb.t2 { background:linear-gradient(135deg,#ff5e7e,#5c1e3a); }
.queue-thumb.t3 { background:linear-gradient(135deg,#3fd6a0,#0f4d3a); }
.queue-thumb.t4 { background:linear-gradient(135deg,#ffb84d,#5c3b0f); }
.queue-text .qt { font-size:13px; font-weight:500; color:#e6e6e6; }
.queue-text .qa { font-size:12px; font-weight:400; color:#7a7a7a; margin-top:2px; }
.queue-dur { margin-left:auto; font-size:12px; color:#7a7a7a; }
.now-playing { margin-top:20px; margin-bottom:26px; display:flex; align-items:center; gap:18px;
padding:16px 20px; background:#1a1a1a; border-radius:14px; }
.np-art { width:44px; height:44px; border-radius:8px; flex:0 0 44px;
background: linear-gradient(135deg, #1c4d63 0%, #00b6e1 45%, #0a2530 100%); }
.np-text .npt { font-size:14px; font-weight:600; color:#ffffff; }
.np-text .npa { font-size:12px; font-weight:400; color:#8a8a8a; margin-top:2px; }
.np-controls { margin-left:auto; display:flex; align-items:center; gap:16px; }
.ctl { font-size:14px; color:#b0b0b0; }
.play-pill { width:38px; height:38px; border-radius:9999px; background:#f2f2f2; color:#00b6e1;
display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; }
</style></head>
<body>
<div class="app">
<div class="rail">
<div class="rail-brand">KKBOX</div>
<div class="rail-item active">Home</div>
<div class="rail-item">Discover</div>
<div class="rail-item">Charts</div>
<div class="rail-item">Library</div>
<div class="rail-item">Playlists</div>
</div>
<div class="main">
<div class="now-label">NOW PLAYING</div>
<div class="content-row">
<div class="art-col">
<div class="cover"></div>
<div class="track-title">Midnight Frequency</div>
<div class="track-artist">Alex Rivers</div>
<div class="progress-wrap">
<div class="progress-track"><div class="progress-fill"></div></div>
<div class="progress-time"><span>2:14</span><span>3:36</span></div>
</div>
</div>
<div class="queue-col">
<div class="queue-title">UP NEXT</div>
<div class="queue-item">
<div class="queue-thumb t1"></div>
<div class="queue-text"><div class="qt">Paper Skies</div><div class="qa">Morgan Lane</div></div>
<div class="queue-dur">3:02</div>
</div>
<div class="queue-item">
<div class="queue-thumb t2"></div>
<div class="queue-text"><div class="qt">Glass Harbor</div><div class="qa">Sam Ito</div></div>
<div class="queue-dur">4:11</div>
</div>
<div class="queue-item">
<div class="queue-thumb t3"></div>
<div class="queue-text"><div class="qt">Low Tide</div><div class="qa">Casey Wen</div></div>
<div class="queue-dur">2:48</div>
</div>
<div class="queue-item">
<div class="queue-thumb t4"></div>
<div class="queue-text"><div class="qt">Neon Hallway</div><div class="qa">Taylor Feng</div></div>
<div class="queue-dur">3:29</div>
</div>
</div>
</div>
<div class="now-playing">
<div class="np-art"></div>
<div class="np-text"><div class="npt">Midnight Frequency</div><div class="npa">Alex Rivers</div></div>
<div class="np-controls">
<span class="ctl">⇤</span>
<div class="play-pill">▮▮</div>
<span class="ctl">⇥</span>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0098db; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0098db; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a6e2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0098db; color: #000000;
border: 1px solid #00a6e2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0098db; color: #f5f5f5;
border: 1px solid #27a7df; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #009adc; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#16181C; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { position:relative; width:960px; height:640px; background:#F4F5F7; }
nav.top { position:absolute; top:0; left:0; right:0; height:60px; background:#FFFFFF;
border-bottom:1px solid #E4E6EA; display:flex; align-items:center; justify-content:space-between; padding:0 20px; }
.brand { font-size:20px; font-weight:900; color:#0098DB; letter-spacing:-0.4px; margin:0; }
.segstrip { display:flex; gap:22px; align-items:center; }
.seg { font-size:13px; font-weight:800; color:#9BA1AB; padding-bottom:6px; border-bottom:3px solid transparent; }
.seg.active { color:#0098DB; border-bottom-color:#0098DB; }
.navicons { display:flex; gap:14px; color:#0098DB; font-size:18px; font-weight:700; }
.gridwrap { position:absolute; top:60px; bottom:64px; left:0; right:0; padding:16px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; height:100%; }
.card { position:relative; border-radius:16px; overflow:hidden; box-shadow:rgba(22,24,28,0.10) 0 4px 14px; }
.c1 { background:linear-gradient(160deg,#8fd0ee 0%,#a98be8 100%); }
.c2 { background:linear-gradient(160deg,#f2b9c4 0%,#f4d58a 100%); }
.c3 { background:linear-gradient(160deg,#9be0c9 0%,#6fb7e0 100%); }
.online-pill { position:absolute; top:10px; left:10px; background:rgba(0,0,0,0.42); border-radius:999px;
padding:4px 10px; display:flex; align-items:center; gap:5px; }
.online-dot { width:7px; height:7px; border-radius:50%; background:#00C9B7; }
.online-pill span { color:#FFFFFF; font-size:11px; font-weight:700; letter-spacing:0.02em; }
.scrim { position:absolute; left:0; right:0; bottom:0; height:44%;
background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.78));
display:flex; flex-direction:column; justify-content:flex-end; padding:12px; }
.scrim .name { color:#FFFFFF; font-size:16px; font-weight:700; margin:0 0 3px; }
.scrim .meta { color:#FFFFFF; font-size:12px; font-weight:600; opacity:0.95; margin:0; }
.likebtn { position:absolute; right:10px; bottom:10px; width:36px; height:36px; border-radius:50%;
background:#0098DB; display:flex; align-items:center; justify-content:center;
box-shadow:rgba(0,152,219,0.5) 0 6px 16px; color:#fff; font-size:16px; }
nav.bottom { position:absolute; left:0; right:0; bottom:0; height:64px; background:rgba(255,255,255,0.94);
border-top:1px solid #E4E6EA; display:flex; align-items:center; justify-content:space-around; }
.tab { display:flex; flex-direction:column; align-items:center; gap:4px; position:relative; }
.tab .ic { font-size:20px; color:#9BA1AB; }
.tab .lb { font-size:10px; font-weight:800; color:#9BA1AB; letter-spacing:0.04em; }
.tab.active .ic, .tab.active .lb { color:#0098DB; }
.badge { position:absolute; top:-4px; right:-10px; background:#FF4F8B; color:#fff; font-size:9px; font-weight:800;
min-width:16px; height:16px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 3px; }
</style></head>
<body>
<div class="app">
<nav class="top">
<p class="brand">Plenty of Fish (iOS)</p>
<div class="segstrip">
<span class="seg active">Matches</span>
<span class="seg">Meet Me</span>
<span class="seg">Search</span>
</div>
<div class="navicons"><span>⚙</span><span>🔍</span></div>
</nav>
<div class="gridwrap">
<div class="grid">
<div class="card c1">
<div class="online-pill"><span class="online-dot"></span><span>Online</span></div>
<div class="scrim"><p class="name">Sofia, 27</p><p class="meta">3 mi · Active now</p></div>
<div class="likebtn">♡</div>
</div>
<div class="card c2">
<div class="scrim"><p class="name">Maya, 31</p><p class="meta">6 mi · 2h ago</p></div>
<div class="likebtn">♡</div>
</div>
<div class="card c3">
<div class="online-pill"><span class="online-dot"></span><span>Online</span></div>
<div class="scrim"><p class="name">Jordan, 29</p><p class="meta">1 mi · Active now</p></div>
<div class="likebtn">♡</div>
</div>
</div>
</div>
<nav class="bottom">
<div class="tab active"><span class="ic">♡</span><span class="lb">MATCHES</span></div>
<div class="tab"><span class="ic">⚡</span><span class="lb">MEET ME</span></div>
<div class="tab"><span class="ic">🔍</span><span class="lb">SEARCH</span></div>
<div class="tab" style="position:relative;"><span class="ic">💬</span><span class="lb">MESSAGES</span><span class="badge">3</span></div>
<div class="tab"><span class="ic">👤</span><span class="lb">ME</span></div>
</nav>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #32373c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #32373c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #32373c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #003388; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #ffffff; color: #003388;
border: 1px solid #003388; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #32373c;
border: 1px solid #cccdce; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #8dc63f; color: #32373c;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif; color:#555d66; }
*{box-sizing:border-box;}
.nav{height:72px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:700;color:#32373c;}
.navlinks{display:flex;gap:20px;font-size:15px;font-weight:500;color:#949494;}
.navlinks span:first-child{color:#003388;}
.searchbar{width:260px;height:44px;background:#fff;border:1px solid #ebebeb;border-radius:8px;display:flex;align-items:center;padding:0 14px;font-size:13px;color:#949494;}
.catstrip{background:#f8f9f9;padding:8px 32px;display:flex;gap:10px;}
.cattab{font-size:13px;font-weight:600;padding:8px 16px;border-radius:8px;color:#949494;}
.cattab.active{background:#003388;color:#fff;}
.hero{height:190px;background:#003388;display:flex;align-items:center;padding:0 32px;}
.h1{font-family:'Poppins',sans-serif;font-size:32px;font-weight:700;color:#fff;margin:0;max-width:460px;line-height:1.25;}
.grid{display:flex;gap:12px;padding:16px 32px 0;}
.card{width:150px;background:#fff;position:relative;}
.thumb{height:110px;background:#f8f9f9;margin-bottom:8px;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:8px;color:#fff;}
.badge.limited{background:#003388;}
.badge.new{background:#8dc63f;color:#32373c;}
.badge.sale{background:#cf2e2e;}
.ptitle{font-size:16px;font-weight:500;color:#32373c;line-height:1.25;height:40px;overflow:hidden;}
.pprice{font-size:16px;font-weight:600;color:#32373c;margin-top:4px;}
.pprice.sale{color:#cf2e2e;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#949494;border-top:1px solid #ebebeb;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mcfarlane Toys</div>
<div class="navlinks"><span>New Releases</span><span>Spawn</span><span>Sports Picks</span><span>Build-A-Figure</span></div>
<div class="searchbar">Search figures...</div>
</div>
<div class="catstrip">
<div class="cattab active">All Figures</div><div class="cattab">Limited Edition</div><div class="cattab">Deluxe Sets</div>
</div>
<div class="hero">
<div class="h1">Collector's Display, Straight Off the Panel.</div>
</div>
<div class="grid">
<div class="card"><div class="badge limited">Limited</div><div class="thumb"></div><div class="ptitle">Gold Label Variant Figure</div><div class="pprice">$29.99</div></div>
<div class="card"><div class="badge new">New</div><div class="thumb"></div><div class="ptitle">Deluxe Boxed Set 7"</div><div class="pprice">$44.99</div></div>
<div class="card"><div class="badge sale">Sale</div><div class="thumb"></div><div class="ptitle">Sports Picks Rookie Figure</div><div class="pprice sale">$19.99</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Build-A-Figure Wave 3</div><div class="pprice">$24.99</div></div>
</div>
<div class="footer"><span>© McFarlane Toys Collectibles</span><span>Support · Retailers · Newsletter</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 1.2px; background: #f94877; color: #fafafa;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 1.2px; background: transparent; color: #000000;
border: 1px solid #f94877; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1e1e1e; color: #fafafa;
border: 1px solid #112233; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #7dbb00; color: #040404;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#040404; font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; color:#fafafa; }
*{box-sizing:border-box;}
.nav{position:absolute; top:0; left:0; width:960px; height:60px; background:#040404; border-bottom:1px solid #112233; display:flex; align-items:center; justify-content:space-between; padding:0 40px;}
.logo{font-size:19px; font-weight:700; color:#fafafa; letter-spacing:0.5px;}
.navlinks{display:flex; gap:22px; font-size:13px; font-weight:600; letter-spacing:0.3px; color:#aaaaaa;}
.navlinks span:nth-child(2){color:#f94877; border-bottom:2px solid #f94877; padding-bottom:4px;}
.cart{font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#f94877;}
.hero{position:absolute; top:60px; left:0; width:960px; height:340px; background:linear-gradient(180deg,#040404 60%, #111111 100%); display:flex; align-items:center; padding:0 50px;}
.heroText{width:440px;}
.headline{font-size:34px; font-weight:700; line-height:1.18; color:#fff; margin-bottom:14px;}
.sub{font-size:15px; color:#aaaaaa; margin-bottom:22px; width:380px; line-height:1.5;}
.btn{display:inline-block; background:#f94877; color:#fafafa; font-size:13px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; padding:12px 26px; border-radius:4px;}
.guitar{position:absolute; right:70px; top:40px; width:260px; height:280px;}
.body{position:absolute; width:180px; height:220px; border-radius:50% 50% 40% 40%; background:linear-gradient(160deg,#8a4a2f,#c96a3f 60%,#2d1c12); top:60px; left:30px;}
.neck{position:absolute; width:26px; height:170px; background:linear-gradient(90deg,#2a1a10,#4a2f1a); top:-90px; left:98px; border-radius:4px;}
.headstock{position:absolute; width:52px; height:44px; background:#1a1108; top:-120px; left:85px; border-radius:6px;}
.pickup{position:absolute; width:70px; height:14px; background:#111; top:150px; left:60px; border-radius:2px;}
.sec{position:absolute; top:400px; left:0; width:960px; height:240px; padding:28px 40px;}
.secTitle{font-size:20px; font-weight:700; margin-bottom:16px; color:#fff;}
.grid{display:flex; gap:18px;}
.card{width:216px; background:#1e1e1e; border-radius:4px; padding:14px;}
.cardImg{width:100%; height:96px; background:#111111; border-radius:4px; position:relative;}
.miniGuitar{position:absolute; width:70px; height:90px; border-radius:50% 50% 40% 40%; background:linear-gradient(160deg,#8a4a2f,#c96a3f); top:5px; left:70px;}
.cardTitle{font-size:15px; font-weight:600; margin-top:12px; color:#fff;}
.cardSpec{font-size:12px; color:#aaaaaa; margin-top:2px;}
.cardPrice{font-size:18px; font-weight:700; margin-top:6px; color:#fff;}
.stockBadge{position:absolute; top:8px; left:8px; background:#7dbb00; color:#040404; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:3px 8px; border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Kauer Guitars</div>
<div class="navlinks"><span>Daylighter</span><span>Banshee</span><span>Super Chief</span><span>Custom</span></div>
<div class="cart">CART</div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">Short-Run Electrics.<br>Built to Sing.</div>
<div class="sub">Boutique guitars carved in Sacramento, one small batch at a time.</div>
<div class="btn">Shop Guitars</div>
</div>
<div class="guitar">
<div class="headstock"></div><div class="neck"></div><div class="body"></div><div class="pickup"></div>
</div>
</div>
<div class="sec">
<div class="secTitle">In Stock Now</div>
<div class="grid">
<div class="card" style="position:relative;"><div class="stockBadge">In Stock</div><div class="cardImg"><div class="miniGuitar"></div></div><div class="cardTitle">Daylighter Special</div><div class="cardSpec">Alder / Maple</div><div class="cardPrice">$2,395</div></div>
<div class="card"><div class="cardImg"><div class="miniGuitar" style="background:linear-gradient(160deg,#3a2a1a,#5a3f22)"></div></div><div class="cardTitle">Banshee Uke</div><div class="cardSpec">Mahogany</div><div class="cardPrice">$1,895</div></div>
<div class="card"><div class="cardImg"><div class="miniGuitar" style="background:linear-gradient(160deg,#222,#444)"></div></div><div class="cardTitle">Super Chief V2</div><div class="cardSpec">Korina</div><div class="cardPrice">$2,695</div></div>
<div class="card"><div class="cardImg"><div class="miniGuitar" style="background:linear-gradient(160deg,#7a2a2a,#a94a4a)"></div></div><div class="cardTitle">Arcturus</div><div class="cardSpec">Swamp Ash</div><div class="cardPrice">$2,195</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a3a5c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a3a5c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #92a1b0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a3a5c; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a3a5c; color: #f5f5f5;
border: 1px solid #3d5874; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #92a1b0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #244174; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#050505; box-sizing:border-box;
font-family:"Roboto Flex","Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
header { background:#1a3a5c; color:#ffffff; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.brandbar { display:flex; align-items:center; gap:22px; }
.brand { font-size:16px; font-weight:700; }
.hnav { display:flex; gap:18px; font-size:13px; color:rgba(255,255,255,0.75); }
.search { background:rgba(255,255,255,0.14); color:#ffffff; border-radius:0; height:32px; padding:0 12px; display:flex; align-items:center; font-size:13px; width:220px; }
.layout { display:flex; height:calc(100% - 56px); }
.sidebar { width:210px; background:#f6f8fa; border-right:1px solid #e1e6ec; padding:18px 0; }
.side-item { padding:10px 22px; font-size:14px; color:#3a4552; display:flex; align-items:center; gap:10px; }
.side-item.active { background:#e8f3fb; color:#0b6dd3; font-weight:700; border-right:3px solid #0b6dd3; }
.side-dot { width:6px; height:6px; border-radius:50%; background:#9aa7b5; }
.side-item.active .side-dot { background:#0b6dd3; }
.content { flex:1; padding:26px 32px; overflow:hidden; }
.pagehead { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.pagehead h1 { font-size:24px; font-weight:500; margin:0; }
.action-primary { background:#03102e; color:#ffffff; border:1px solid #ffffff; border-radius:32px; padding:10px 22px; font-size:14px; font-weight:700; box-shadow:0 0 0 1px #03102e; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.stat { border:1px solid #e1e6ec; padding:14px 16px; }
.stat .n { font-size:22px; font-weight:500; color:#1a3a5c; }
.stat .l { font-size:12px; color:#5b6675; margin-top:4px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead th { text-align:left; font-weight:700; color:#3a4552; border-bottom:1px solid #d7dde4; padding:8px 10px; background:#f6f8fa; }
tbody td { padding:10px 10px; border-bottom:1px solid #edf1f5; color:#050505; }
.case-id { color:#0b6dd3; font-weight:700; }
.status-pill { display:inline-block; border-radius:2px; padding:2px 8px; font-size:11px; font-weight:700; }
.st-progress { background:#e8f3fb; color:#0b6dd3; }
.st-review { background:#fdf1de; color:#a15c00; }
.st-done { background:#e4f6ea; color:#1c7a3e; }
</style></head>
<body>
<header>
<div class="brandbar">
<span class="brand">Pega UX Design System</span>
<div class="hnav"><span>Cases</span><span>Workflows</span><span>Reports</span><span>Admin</span></div>
</div>
<div class="search">Search cases, workflows...</div>
</header>
<div class="layout">
<aside class="sidebar">
<div class="side-item active"><span class="side-dot"></span>Case Manager</div>
<div class="side-item"><span class="side-dot"></span>My Assignments</div>
<div class="side-item"><span class="side-dot"></span>Workflow Designer</div>
<div class="side-item"><span class="side-dot"></span>Decisioning</div>
<div class="side-item"><span class="side-dot"></span>Reports & Insights</div>
<div class="side-item"><span class="side-dot"></span>Data Model</div>
</aside>
<section class="content">
<div class="pagehead">
<h1>Claims Onboarding Cases</h1>
<div class="action-primary">New Case</div>
</div>
<div class="stats">
<div class="stat"><div class="n">128</div><div class="l">Open cases</div></div>
<div class="stat"><div class="n">34</div><div class="l">Pending review</div></div>
<div class="stat"><div class="n">92%</div><div class="l">SLA compliance</div></div>
<div class="stat"><div class="n">4.2d</div><div class="l">Avg cycle time</div></div>
</div>
<table>
<thead>
<tr><th>Case ID</th><th>Applicant</th><th>Assigned to</th><th>Stage</th><th>Status</th></tr>
</thead>
<tbody>
<tr><td class="case-id">CL-40219</td><td>Jamie Lee</td><td>Alex Kim</td><td>Underwriting</td><td><span class="status-pill st-progress">In Progress</span></td></tr>
<tr><td class="case-id">CL-40218</td><td>Morgan Diaz</td><td>Taylor Reed</td><td>Documentation</td><td><span class="status-pill st-review">Needs Review</span></td></tr>
<tr><td class="case-id">CL-40216</td><td>Sam Patel</td><td>Alex Kim</td><td>Verification</td><td><span class="status-pill st-progress">In Progress</span></td></tr>
<tr><td class="case-id">CL-40211</td><td>Riley Chen</td><td>Jordan Blake</td><td>Approval</td><td><span class="status-pill st-done">Completed</span></td></tr>
<tr><td class="case-id">CL-40205</td><td>Casey Nolan</td><td>Taylor Reed</td><td>Underwriting</td><td><span class="status-pill st-review">Needs Review</span></td></tr>
</tbody>
</table>
</section>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f4; color: #171717;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f4; color: #171717;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #171717; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #6a7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #d02c2e; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f4f4f4; color: #171717;
border: 1px solid #d02c2e; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f4f4f4; color: #171717;
border: 1px solid #bdbdbd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c6ad6f; color: #171717;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f4f4f4; font-family:Montserrat,'Helvetica Neue',Arial,sans-serif; color:#171717; }
*{box-sizing:border-box;}
.nav{height:72px;background:#f4f4f4;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:700;color:#3b4459;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;}
.navlinks div:first-child{color:#d02c2e;border-bottom:2px solid #d02c2e;padding-bottom:24px;}
.hero{height:230px;background:#3b4459;display:flex;align-items:center;padding:0 36px;position:relative;overflow:hidden;}
.herotext h1{font-size:34px;font-weight:700;color:#fff;margin:0 0 10px;line-height:1.15;max-width:420px;}
.herotext p{font-size:14px;color:#c8ceda;margin:0 0 18px;max-width:360px;}
.cta{display:inline-block;background:#d02c2e;color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:14px 30px;border-radius:9999px;}
.cooler{position:absolute;right:70px;top:60px;width:160px;height:110px;background:linear-gradient(160deg,#c6ad6f,#3b4459);border-radius:12px;}
.latch{position:absolute;right:140px;top:100px;width:20px;height:30px;background:#d02c2e;border-radius:4px;}
.grid{display:flex;gap:14px;padding:20px 36px 0;}
.card{width:150px;background:#fff;border:1px solid #e9eaea;border-radius:0;position:relative;}
.thumb{height:96px;background:#e9eaea;}
.badge{position:absolute;top:8px;left:8px;background:#c6ad6f;color:#171717;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:3px 7px;border-radius:4px;}
.badgeg{background:#108043;color:#fff;}
.pname{font-size:14px;font-weight:600;padding:10px 12px 0;}
.pprice{font-size:14px;color:#3b4459;padding:2px 12px 8px;}
.pcta{display:inline-block;background:#d02c2e;color:#fff;font-size:11px;font-weight:600;text-transform:uppercase;padding:6px 14px;border-radius:9999px;margin:0 12px 12px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:52px;background:#171717;color:#f4f4f4;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;}
.footer span{margin-left:16px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Orca Coolers</div>
<div class="navlinks"><div>Coolers</div><div>Drinkware</div><div>Bags</div><div>Accessories</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Built for the deck,<br>not the driveway.</h1>
<p>Rotomolded coolers rated to keep ice for days, not hours.</p>
<div class="cta">Shop Coolers</div>
</div>
<div class="cooler"></div><div class="latch"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d02c2e,#3b4459)"></div><div class="badge">Limited</div><div class="pname">Orca 26 Cooler</div><div class="pprice">$279</div><div class="pcta">Add to Cart</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3b4459,#6a7280)"></div><div class="badge badgeg">BPA-Free</div><div class="pname">Orca Tumbler 20oz</div><div class="pprice">$34</div><div class="pcta">Add to Cart</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c6ad6f,#171717)"></div><div class="pname">Podium Bottle</div><div class="pprice">$29</div><div class="pcta">Add to Cart</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#dd9a1a,#3b4459)"></div><div class="pname">Cooler Backpack</div><div class="pprice">$199</div><div class="pcta">Add to Cart</div></div>
</div>
<div class="footer"><span>© Built for the Outdoors</span><span>Warranty<span> Shipping<span> Sustainability</span></span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 500; line-height: 1.35; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #156165; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #156165;
border: 1px solid #156165; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #c0392b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:flex; flex-direction:column; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#323232; box-sizing:border-box;
font-family:'Work Sans',-apple-system,system-ui,'Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
background:#156165; }
.brand { font-family:'Playfair Display',Georgia,serif; font-size:20px; font-weight:600; color:#ffffff; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:13px; font-weight:500; color:#e6f0f0; }
.search { width:170px; height:26px; border-radius:999px; background:#ffffff; display:flex; align-items:center;
padding:0 12px; font-size:11px; color:#bcbcbc; }
.hero { display:flex; align-items:center; gap:34px; padding:26px 40px 20px; }
.htext { max-width:400px; }
.htext h1 { font-family:'Playfair Display',Georgia,serif; font-size:28px; font-weight:600; color:#121212; margin:0 0 12px; line-height:1.3; }
.htext p { font-size:14px; color:#323232; line-height:1.5; margin:0 0 16px; }
.btn { display:inline-block; background:#156165; color:#fff; font-size:13px; font-weight:500; padding:11px 24px; border-radius:8px; }
.heroimg { width:230px; height:150px; border-radius:12px; flex-shrink:0; background:linear-gradient(150deg,#c0392b,#156165 60%,#27ae60); }
.section { padding:0 40px; }
.section h2 { font-family:'Playfair Display',Georgia,serif; font-size:19px; font-weight:600; color:#121212; margin:0 0 14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card { background:#f5f5f5; border-radius:12px; padding:12px; }
.cover { height:78px; border-radius:8px; margin-bottom:10px; }
.t1 .cover { background:#c0392b; } .t2 .cover { background:#f39c12; } .t3 .cover { background:#27ae60; } .t4 .cover { background:#156165; }
.card .t { font-size:13px; font-weight:500; color:#121212; margin:0 0 4px; }
.card .star { font-size:10px; color:#f1c40f; margin-bottom:2px; }
.card .p { font-size:13px; font-weight:600; color:#156165; }
footer { margin-top:auto; flex-shrink:0; background:#323232; display:flex; align-items:center; justify-content:space-between;
padding:14px 40px; }
footer span { font-size:11px; color:#dedede; }
</style></head>
<body>
<nav>
<div class="brand">Haba</div>
<div class="navlinks"><span>Wooden Toys</span><span>Games</span><span>Baby</span><span>Dolls</span></div>
<div class="search">Search toys…</div>
</nav>
<div class="hero">
<div class="htext">
<h1>Wooden toys, tactile from the first touch.</h1>
<p>German-crafted play for every age — bright colors, real wood grain, and educational design that never talks down to kids.</p>
<span class="btn">Shop Wooden Toys</span>
</div>
<div class="heroimg"></div>
</div>
<div class="section">
<h2>Loved by Little Hands</h2>
<div class="grid">
<div class="card t1"><div class="cover"></div><div class="t">Farm Animal Puzzle</div><div class="star">★★★★★</div><div class="p">$22.99</div></div>
<div class="card t2"><div class="cover"></div><div class="t">Rolling Duck Pull-Toy</div><div class="star">★★★★☆</div><div class="p">$18.99</div></div>
<div class="card t3"><div class="cover"></div><div class="t">Wooden Grocery Set</div><div class="star">★★★★★</div><div class="p">$34.99</div></div>
<div class="card t4"><div class="cover"></div><div class="t">First Building Blocks</div><div class="star">★★★★★</div><div class="p">$29.99</div></div>
</div>
</div>
<footer><span>© Haba · educational toys since 1938</span><span>Free shipping over $50</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e60023; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #e60023;
border: 1px solid #e60023; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fbd6dc; color: #e60023;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#111111; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.screen { position:relative; width:960px; height:640px; overflow:hidden; padding-top:12px; }
.search-pill { position:absolute; top:12px; left:16px; right:16px; height:44px; background:#FFFFFF;
box-shadow:rgba(0,0,0,0.08) 0 2px 8px; border-radius:500px; display:flex; align-items:center;
padding:0 18px; z-index:5; gap:10px; }
.search-ic { font-size:16px; color:#111111; }
.search-ph { font-size:15px; color:#767676; }
.masonry { position:absolute; top:70px; bottom:56px; left:16px; right:16px; overflow:hidden;
display:flex; gap:8px; }
.col { flex:1; display:flex; flex-direction:column; gap:8px; }
.pin { position:relative; border-radius:16px; overflow:hidden; }
.pin img-area { display:block; }
.pin-h1 { height:210px; background:linear-gradient(160deg,#f6c453,#e88a3b); }
.pin-h2 { height:140px; background:linear-gradient(160deg,#8fd3c7,#4aa8a0); }
.pin-h3 { height:250px; background:linear-gradient(160deg,#c99adf,#8a5bb8); }
.pin-h4 { height:170px; background:linear-gradient(160deg,#f79ca0,#e6607a); }
.pin-h5 { height:120px; background:linear-gradient(160deg,#9fc7f2,#4f7fd6); }
.pin-h6 { height:230px; background:linear-gradient(160deg,#f2e28a,#d9b23c); }
.save-btn { position:absolute; top:8px; right:8px; background:#E60023; color:#fff; font-size:12px;
font-weight:700; padding:8px 16px; border-radius:500px; }
.video-badge { position:absolute; top:8px; left:8px; background:rgba(0,0,0,0.55); color:#fff; font-size:9px;
font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:8px; letter-spacing:0.4px; }
.pin-caption { padding:6px 2px 0; }
.pin-title { font-size:14px; font-weight:500; line-height:1.3; }
.pin-creator { display:flex; align-items:center; gap:6px; margin-top:6px; }
.avatar { width:20px; height:20px; border-radius:50%; background:#e0607a; }
.uname { font-size:12px; color:#767676; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:56px; background:#FFFFFF;
border-top:1px solid #E9E9E9; display:flex; align-items:center; justify-content:space-around; }
.tab-ic { width:26px; height:26px; border-radius:6px; background:#767676; }
.tab-ic.active { background:#111111; }
.tab-create { width:48px; height:48px; border-radius:14px; background:#E60023; color:#fff;
display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:400; }
.brandmark { position:absolute; bottom:66px; right:20px; font-size:11px; font-weight:700; color:#111111;
opacity:0.55; z-index:5; }
</style></head>
<body>
<div class="screen">
<div class="search-pill"><span class="search-ic">🔍</span><span class="search-ph">Search for ideas</span></div>
<div class="masonry">
<div class="col">
<div class="pin pin-h1"><div class="save-btn">Save</div></div>
<div class="pin-caption"><div class="pin-title">Golden hour kitchen remodel with warm oak cabinetry</div>
<div class="pin-creator"><div class="avatar"></div><span class="uname">homebyhannah</span></div></div>
<div class="pin pin-h4" style="margin-top:14px"><div class="video-badge">Video</div><div class="save-btn">Save</div></div>
<div class="pin-caption"><div class="pin-title">5-minute desk stretch routine</div>
<div class="pin-creator"><div class="avatar"></div><span class="uname">moveflowco</span></div></div>
<div class="pin pin-h5" style="margin-top:14px"><div class="save-btn">Save</div></div>
</div>
<div class="col">
<div class="pin pin-h2"><div class="save-btn">Save</div></div>
<div class="pin-caption"><div class="pin-title">Minimalist entryway styling ideas</div>
<div class="pin-creator"><div class="avatar"></div><span class="uname">studio.lin</span></div></div>
<div class="pin pin-h3" style="margin-top:14px"><div class="save-btn">Save</div></div>
<div class="pin-caption"><div class="pin-title">Autumn palette editorial fashion shoot inspiration board</div>
<div class="pin-creator"><div class="avatar"></div><span class="uname">edenwears</span></div></div>
</div>
<div class="col">
<div class="pin pin-h6"><div class="save-btn">Save</div></div>
<div class="pin-caption"><div class="pin-title">Hand-lettered wedding invitation set</div>
<div class="pin-creator"><div class="avatar"></div><span class="uname">inkandquill</span></div></div>
<div class="pin pin-h1" style="height:150px; margin-top:14px"><div class="save-btn">Save</div></div>
<div class="pin-caption"><div class="pin-title">Ceramic vase collection, earthy tones</div>
<div class="pin-creator"><div class="avatar"></div><span class="uname">clay.form</span></div></div>
</div>
</div>
<div class="brandmark">Pinterest (iOS)</div>
<div class="tabbar">
<div class="tab-ic active"></div>
<div class="tab-ic"></div>
<div class="tab-create">+</div>
<div class="tab-ic"></div>
<div class="tab-ic"></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #d54d4d; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #121212;
border: 1px solid #d54d4d; border-radius: 0px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d54d4d; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:system-ui,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#121212; }
.brand { font-size:19px; font-weight:700; color:#ffffff; text-transform:uppercase; letter-spacing:1px; }
.brand span { color:#d54d4d; }
.nlinks { display:flex; gap:22px; }
.nlinks div { font-size:13px; font-weight:600; color:#f8f7f7; text-transform:uppercase; letter-spacing:0.5px; }
.nlinks div.on { color:#d54d4d; }
.cartwrap { position:relative; color:#fff; font-size:16px; }
.cartbadge { position:absolute; top:-6px; right:-10px; background:#d54d4d; color:#fff; font-size:9px; font-weight:700;
border-radius:50%; width:15px; height:15px; display:flex; align-items:center; justify-content:center; }
.hero { height:230px; background:#121212; display:flex; align-items:center; padding:0 44px; position:relative; overflow:hidden; }
.hero::after { content:''; position:absolute; right:0; top:0; bottom:0; width:40%;
background:repeating-linear-gradient(135deg,#1d2727 0 10px,#121212 10px 20px); }
.herotxt h1 { color:#ffffff; font-size:36px; font-weight:700; margin:0 0 12px; text-transform:uppercase; letter-spacing:0.5px; }
.herotxt p { color:#c0c0c0; font-size:14px; max-width:420px; margin:0 0 18px; }
.herobtn { display:inline-block; background:#d54d4d; color:#fff; font-size:14px; font-weight:600; text-transform:uppercase;
letter-spacing:0.3px; padding:13px 28px; }
.section { padding:22px 32px 0; }
.sechead { font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#121212; margin-bottom:14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid #dedede; border-left:1px solid #dedede; }
.card { border-right:1px solid #dedede; border-bottom:1px solid #dedede; padding:12px; position:relative; }
.shot { aspect-ratio:1/1; position:relative; }
.c1 .shot { background:linear-gradient(150deg,#121212,#d54d4d); }
.c2 .shot { background:linear-gradient(150deg,#1d2727,#121212); }
.c3 .shot { background:linear-gradient(150deg,#d54d4d,#b33a3a); }
.c4 .shot { background:linear-gradient(150deg,#121212,#c0c0c0); }
.badge { position:absolute; top:16px; left:16px; font-size:9px; font-weight:700; text-transform:uppercase; padding:3px 8px; color:#fff; }
.badge.sale { background:#d54d4d; } .badge.new { background:#121212; }
.ctitle { font-size:13px; font-weight:600; color:#121212; margin:8px 0 3px; text-transform:uppercase; }
.cprice { font-size:14px; font-weight:600; color:#121212; }
</style></head>
<body>
<nav>
<div class="brand">Deathwish Inc</div>
<div class="nlinks"><div class="on">Vinyl</div><div>Merch</div><div>Artists</div><div>Vault</div></div>
<div class="cartwrap">🛒<span class="cartbadge">2</span></div>
</nav>
<div class="hero">
<div class="herotxt">
<h1>Merch That Hits As Hard As The Records</h1>
<p>Vinyl, apparel, and limited runs from the label built on riffs and no compromise.</p>
<div class="herobtn">Shop New Drops</div>
</div>
</div>
<div class="section">
<div class="sechead">New Drops</div>
<div class="grid">
<div class="card"><div class="shot c1"><span class="badge sale">Sale</span></div><div class="ctitle">Coldworld LP, Red Vinyl</div><div class="cprice">$28.00</div></div>
<div class="card"><div class="shot c2"></div><div class="ctitle">Deathwish Logo Tee</div><div class="cprice">$25.00</div></div>
<div class="card"><div class="shot c3"><span class="badge new">New</span></div><div class="ctitle">Ironclad LP, Black Vinyl</div><div class="cprice">$24.00</div></div>
<div class="card"><div class="shot c4"></div><div class="ctitle">Vault Zine Vol. 4</div><div class="cprice">$12.00</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.27; letter-spacing: 0.2px; background: #f8494a; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.27; letter-spacing: 0.2px; background: #f5f5f5; color: #111111;
border: 1px solid #f8494a; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: rgba(255, 255, 255, 0.1); color: #ffffff;
border: 1px solid #bcbcbc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.2px; background: #009758; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f5; color:#111111; box-sizing:border-box;
font-family:'Diatype', -apple-system, system-ui, 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#f5f5f5; }
.logo { font-weight:600; font-size:19px; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; }
.navlinks .on { color:#f8494a; }
.navlinks .off { color:#888888; }
.navicons { display:flex; gap:8px; }
.navicons div { width:40px; height:40px; border-radius:9999px; background:#f4f4f6; display:flex;
align-items:center; justify-content:center; font-size:15px; position:relative; }
.cart-badge { position:absolute; top:-2px; right:-2px; width:16px; height:16px; border-radius:9999px;
background:#f8494a; color:#fff; font-size:9px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.hero { padding:14px 40px 0; display:flex; gap:28px; height:400px; }
.shot { flex:0 0 320px; position:relative; border-radius:12px; overflow:hidden; }
.shot::before { content:''; position:absolute; inset:0;
background:
radial-gradient(circle at 25% 20%, rgba(255,207,42,0.85), transparent 45%),
radial-gradient(circle at 80% 75%, rgba(190,77,196,0.75), transparent 50%),
linear-gradient(150deg, #f8494a 0%, #d63a3b 100%); }
.case-shape { position:absolute; left:100px; top:56px; width:120px; height:238px; border-radius:22px;
background:linear-gradient(160deg,#111111,#333333); box-shadow:0 24px 40px rgba(0,0,0,0.35); }
.case-shape::after { content:''; position:absolute; inset:8px; border-radius:16px;
background:radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 60%); }
.badge-new { position:absolute; top:14px; left:14px; background:#009758; color:#fff; font-size:11px;
font-weight:600; letter-spacing:0.2px; text-transform:uppercase; border-radius:4px; padding:2px 6px; }
.info { flex:1; display:flex; flex-direction:column; padding-top:6px; }
.eyebrow { font-size:13px; font-weight:500; color:#888888; margin-bottom:8px; }
.name { font-size:26px; font-weight:500; line-height:1.25; letter-spacing:-0.3px; margin:0 0 10px; }
.stars { font-size:14px; color:#ffcf2a; margin-bottom:12px; }
.stars span { color:#888888; font-size:13px; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:20px; }
.price { font-size:20px; font-weight:600; color:#f8494a; }
.price-was { font-size:13px; color:#888888; text-decoration:line-through; }
.field { margin-bottom:16px; }
.lbl { font-size:13px; font-weight:600; margin-bottom:8px; }
.swatches { display:flex; gap:10px; }
.sw { width:32px; height:32px; border-radius:9999px; border:2px solid transparent; }
.sw.a { background:#f8494a; border-color:#111111; }
.sw.b { background:#ffcf2a; }
.sw.c { background:#be4dc4; }
.sw.d { background:#2332e6; }
.sw.e { background:#111111; }
.cta { margin-top:auto; display:flex; gap:10px; }
.btn-add { flex:1; background:#f8494a; color:#fff; border:none; border-radius:8px; height:48px;
font-size:15px; font-weight:600; letter-spacing:0.2px; }
.btn-fav { width:48px; height:48px; border-radius:9999px; border:1px solid #e5e5e5; display:flex;
align-items:center; justify-content:center; background:#fff; }
.strip { margin:0 40px; display:flex; gap:16px; padding:16px 0; border-top:1px solid #e5e5e5; }
.pill { background:#fff; border:1px solid #e5e5e5; border-radius:12px; padding:10px 16px; font-size:12px;
display:flex; align-items:center; gap:8px; color:#555555; }
.dot { width:8px; height:8px; border-radius:9999px; background:#009758; }
footer { padding:12px 40px; display:flex; justify-content:space-between; align-items:center;
background:#111111; color:#a89b79; font-size:11px; }
</style></head>
<body>
<nav>
<div class="logo">Burga</div>
<div class="navlinks"><span class="on">iPhone</span><span class="off">Samsung</span><span class="off">AirPods</span><span class="off">MagSafe</span></div>
<div class="navicons"><div>⌕</div><div>♡</div><div>⛃<span class="cart-badge">2</span></div></div>
</nav>
<div class="hero">
<div class="shot">
<span class="badge-new">New</span>
<div class="case-shape"></div>
</div>
<div class="info">
<div class="eyebrow">Crystal Clear Collection</div>
<h1 class="name">Marble Bloom Impact Case</h1>
<div class="stars">★★★★★ <span>4.9 (3,204)</span></div>
<div class="price-row"><span class="price">$34.00</span><span class="price-was">$44.00</span></div>
<div class="field">
<div class="lbl">Color</div>
<div class="swatches"><span class="sw a"></span><span class="sw b"></span><span class="sw c"></span><span class="sw d"></span><span class="sw e"></span></div>
</div>
<div class="cta">
<button class="btn-add">Add to Cart</button>
<div class="btn-fav">♡</div>
</div>
</div>
</div>
<div class="strip">
<div class="pill"><span class="dot"></span>Military Grade Drop Protection</div>
<div class="pill"><span class="dot"></span>Wireless Charging Compatible</div>
<div class="pill"><span class="dot"></span>Ships in 2 Days</div>
</div>
<footer>
<span>© Burga</span>
<span>SHIPPING · RETURNS · SUPPORT</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #151515;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #151515;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; letter-spacing: -0.25px; margin: 0; color: #151515; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #5f5f5f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ee7d53; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #151515;
border: 1px solid #ee7d53; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #222222;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5f5f5f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f04f36; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Avenir Next','Helvetica Neue',Arial,sans-serif; color:#222222; }
*{box-sizing:border-box;}
.nav{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:16px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:#5f5f5f;}
.hero{height:250px;display:flex;align-items:center;padding:0 34px;gap:32px;}
.herotext{width:44%;}
.herotext h1{font-size:32px;font-weight:600;margin:0 0 12px;line-height:1.25;letter-spacing:-.5px;}
.herotext p{font-size:16px;color:#5f5f5f;margin:0 0 18px;max-width:320px;}
.cta{display:inline-block;background:#ee7d53;color:#fff;font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:14px 32px;border-radius:8px;}
.heroimg{flex:1;height:180px;border-radius:8px;background:linear-gradient(135deg,#8b8b8b,#151515);}
.grid{display:flex;gap:32px;padding:24px 34px 0;}
.card{width:206px;}
.thumb{aspect-ratio:1/1;height:120px;margin-bottom:10px;background:#f4f4f4;}
.ptitle{font-size:18px;font-weight:600;}
.pprice{font-size:16px;color:#5f5f5f;margin-top:4px;}
.badge{display:inline-block;background:#f04f36;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-radius:2px;padding:2px 8px;margin-bottom:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#1d1d1d;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:14px;color:#8b8b8b;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Vaja Cases</div>
<div class="navlinks"><div>iPhone Cases</div><div>Wallets</div><div>Bags</div><div>Custom</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Argentine leather, cut and stitched by hand.</h1>
<p>Cases and accessories made to age with you, not against you.</p>
<div class="cta">Shop Leather Cases</div>
</div>
<div class="heroimg"></div>
</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#5f5f5f,#151515)"></div><div class="ptitle">Wallet Agenda Case</div><div class="pprice">$89.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#363636,#151515)"></div><div class="ptitle">Grip Leather Back Case</div><div class="pprice">$59.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8b8b8b,#363636)"></div><div class="ptitle">Card Sleeve Wallet</div><div class="pprice">$44.95</div></div>
</div>
<div class="footer"><span>© Handcrafted Leather Goods</span><span>Custom Orders · Care Guide</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #70707a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #0071d0; color: #ffffff;
border: none; border-radius: 2px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #ffffff; color: #0071d0;
border: 1px solid #0071d0; border-radius: 2px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #70707a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.33; background: #0071d0; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; color:#555759; font-family:'Helvetica Neue',Arial,sans-serif; }
*{box-sizing:border-box;}
.utility{height:26px;background:#262262;display:flex;align-items:center;justify-content:flex-end;gap:18px;padding:0 34px;font-size:10px;color:#c9c6e8;}
.nav{height:54px;background:#ffffff;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e5e5e5;}
.logo{font-size:18px;font-weight:500;color:#0071d0;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:500;color:#555759;}
.searchpill{background:#f3f3f3;border-radius:9999px;padding:7px 18px;font-size:11px;color:#70707a;}
.hero{height:110px;display:flex;align-items:center;padding:0 34px;background:#ebf2fa;}
.hero h1{font-size:21px;font-weight:500;color:#1b1b1d;margin:0 0 4px;}
.hero p{font-size:12px;color:#555759;margin:0;}
.specband{display:flex;gap:1px;background:#e5e5e5;margin:0;}
.speccell{flex:1;background:#f8f8f8;padding:12px 20px;}
.speclabel{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#70707a;}
.specvalue{font-size:13px;color:#222222;margin-top:3px;font-family:Consolas,Menlo,monospace;}
.seclabel{font-size:13px;font-weight:500;color:#1b1b1d;padding:16px 34px 10px;}
.grid{display:flex;gap:14px;padding:0 34px;}
.card{width:150px;background:#ffffff;border:1px solid #e5e5e5;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#e71316;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 7px;z-index:2;}
.thumb{height:80px;margin-bottom:8px;background:#f4f4f4;}
.ptitle{font-size:11px;font-weight:500;color:#1b1b1d;line-height:1.3;height:28px;overflow:hidden;}
.sku{font-family:Consolas,Menlo,monospace;font-size:10px;color:#802eff;margin-top:4px;}
.pprice{font-size:12px;font-weight:700;color:#0071d0;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:10px;color:#70707a;border-top:1px solid #e5e5e5;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="utility">Sign In · Order History · Support</div>
<div class="nav">
<div class="logo">Thermo Fisher Scientific</div>
<div class="navlinks"><span>Reagents</span><span>Instruments</span><span>Lab Equipment</span></div>
<div class="searchpill">Search by SKU or CAS number...</div>
</div>
<div class="hero">
<div><h1>Reagents and Instrumentation for the Modern Lab</h1><p>Certified purity, validated protocols, and same-day quotes for research-grade materials.</p></div>
</div>
<div class="specband">
<div class="speccell"><div class="speclabel">Grade</div><div class="specvalue">ACS Reagent</div></div>
<div class="speccell"><div class="speclabel">CAS Number</div><div class="specvalue">64-17-5</div></div>
<div class="speccell"><div class="speclabel">Purity</div><div class="specvalue">≥99.5%</div></div>
<div class="speccell"><div class="speclabel">Package Size</div><div class="specvalue">4 x 4L</div></div>
</div>
<div class="seclabel">Related Products</div>
<div class="grid">
<div class="card"><div class="badge">Alert</div><div class="thumb" style="background:linear-gradient(135deg,#0071d0,#262262)"></div><div class="ptitle">Ethanol, ACS Grade</div><div class="sku">SKU A4094</div><div class="pprice">$142.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#262262,#0071d0)"></div><div class="ptitle">Benchtop pH Meter</div><div class="sku">SKU S71010</div><div class="pprice">$895.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#802eff,#0071d0)"></div><div class="ptitle">Centrifuge Tubes, 50mL</div><div class="sku">SKU 339652</div><div class="pprice">$68.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0071d0,#802eff)"></div><div class="ptitle">Micropipette Set</div><div class="sku">SKU F123601</div><div class="pprice">$412.00</div></div>
</div>
<div class="footer"><span>© Serving Science Since 1902</span><span>Certificate of Analysis Available</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c446b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c446b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #1c446b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #d33600; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #d33600;
border: 1px solid #d33600; border-radius: 9999px;
padding: 12px 30px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1c446b;
border: 1px solid #c6d0da; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #c5ecf4; color: #1c446b;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'Centra',Arial,Helvetica,sans-serif; color:#1c446b; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e2e2e2;}
.logo{font-family:cursive;font-size:22px;color:#d33600;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;}
.hero{background:#c5ecf4;padding:24px 40px;display:flex;justify-content:space-between;align-items:center;}
.hero h1{font-family:cursive;font-size:38px;font-weight:700;margin:0 0 10px;max-width:420px;line-height:1.15;}
.hero p{font-size:14px;margin:0 0 14px;max-width:360px;}
.btn{display:inline-block;background:#d33600;color:#fff;font-size:15px;font-weight:700;letter-spacing:0.4px;padding:12px 28px;border-radius:9999px;}
.herovis{width:180px;height:130px;background:linear-gradient(160deg,#dbb300,#da532c);border-radius:9999px;}
.sec{padding:20px 40px 0;}
.sectitle{font-size:16px;font-weight:600;margin-bottom:14px;color:#1c446b;}
.tiers{display:flex;gap:14px;}
.tier{width:150px;background:#fff;border:2px solid #e2e2e2;border-radius:20px;padding:14px;text-align:center;}
.tier.selected{border-color:#07b261;}
.tiername{font-family:cursive;font-size:20px;color:#1c446b;margin-bottom:4px;}
.tierage{display:inline-block;background:#c5ecf4;color:#1c446b;font-size:10px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;padding:3px 10px;border-radius:9999px;margin-bottom:8px;}
.tierprice{font-size:13px;color:#444;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#1c446b;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kiwico Educatio 2</div>
<div class="navlinks"><div>Panda</div><div>Koala</div><div>Tinker</div><div>Eureka</div><div>Doodle</div></div>
</div>
<div class="hero">
<div>
<h1>Find the crate they'll beg to open.</h1>
<p>Nine tiers, one subscription — from a first spark of curiosity to a full engineering habit.</p>
<div class="btn">Subscribe Now</div>
</div>
<div class="herovis"></div>
</div>
<div class="sec">
<div class="sectitle">Choose Your Tier</div>
<div class="tiers">
<div class="tier"><div class="tiername">Koala</div><div class="tierage">Ages 0-24mo</div><div class="tierprice">$24.95/mo</div></div>
<div class="tier selected"><div class="tiername">Kiwi</div><div class="tierage">Ages 5-8</div><div class="tierprice">$29.95/mo</div></div>
<div class="tier"><div class="tiername">Atlas</div><div class="tierage">Ages 6-11</div><div class="tierprice">$29.95/mo</div></div>
<div class="tier"><div class="tiername">Eureka</div><div class="tierage">Ages 14-104</div><div class="tierprice">$29.95/mo</div></div>
<div class="tier"><div class="tiername">Doodle</div><div class="tierage">Ages 3-4</div><div class="tierprice">$19.95/mo</div></div>
</div>
</div>
<div class="footer"><span>Shop · Learn · Company</span><span>Give the Gift of KiwiCo</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a1a1a; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a1a1a; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #e8740c; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: transparent; color: #ffffff;
border: 1px solid #e8740c; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #242424; color: #d4d4d4;
border: 1px solid #202020; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 1.2px; background: #313131; color: #d4d4d4;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1a1a1a; color:#d4d4d4; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#1a1a1a; border-bottom:1px solid #3d3d3d; }
.brand { font-size:18px; font-weight:600; color:#fff; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; color:#fff; }
.util { font-size:13px; color:#a8a8a8; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 72px); }
.stage { padding:26px; display:flex; flex-direction:column; gap:12px; background:#242424; }
.crumb { font-size:11px; color:#888888; }
.pan { flex:1; border-radius:4px; background:#2c2c2c; position:relative; overflow:hidden; }
.pan::before { content:''; position:absolute; left:50%; top:50%; width:230px; height:60px; transform:translate(-50%,-50%); border-radius:4px;
background:linear-gradient(90deg,#2c2c2c,#4a4a4a 50%,#2c2c2c); box-shadow:0 18px 30px rgba(0,0,0,0.3); }
.pan::after { content:''; position:absolute; left:50%; top:50%; width:230px; height:60px; transform:translate(-50%,-50%);
background:radial-gradient(ellipse at center, rgba(245,166,35,0.35) 0%, transparent 70%); }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; border-radius:4px; background:#2c2c2c; }
.info { padding:24px 34px; display:flex; flex-direction:column; gap:11px; overflow:hidden; }
.cat { font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:#e8740c; }
h1 { margin:0; font-size:32px; font-weight:600; line-height:1.19; letter-spacing:-0.5px; color:#fff; }
.rating { display:flex; align-items:center; gap:8px; font-size:12px; color:#888888; }
.stars { color:#f5a623; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:600; color:#fff; }
.desc { font-size:16px; color:#d4d4d4; line-height:1.5; }
.spec-table { border-top:1px solid #3d3d3d; }
.spec-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #3d3d3d; font-size:12px; }
.spec-label { text-transform:uppercase; letter-spacing:0.5px; color:#888888; font-weight:600; }
.spec-value { color:#fff; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#e8740c; color:#fff; border:none; height:48px; font-size:16px; font-weight:600; letter-spacing:0.3px; border-radius:4px; }
.btn-secondary { width:170px; background:transparent; border:1px solid #3d3d3d; color:#fff; height:48px; font-size:16px; font-weight:600; border-radius:4px; }
</style></head>
<body>
<nav>
<p class="brand">Bromic Heating</p>
<div class="navlinks"><span>Products</span><span>Commercial</span><span>Residential</span><span>Support</span></div>
<div class="util">Find a Dealer Cart (1)</div>
</nav>
<main>
<div class="stage">
<div class="crumb">Bromic Heating / Products / Tungsten</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Tungsten Smart-Heat</span>
<h1>Tungsten Smart-Heat Electric Heater</h1>
<div class="rating"><span class="stars">★★★★★</span> 4.6 · 214 reviews</div>
<div class="price-row"><span class="price">$1,249.00</span></div>
<p class="desc">Low-profile infrared heating panel delivers focused warmth for outdoor dining and patio spaces, rated to 4400W with weatherproof housing.</p>
<div class="spec-table">
<div class="spec-row"><span class="spec-label">Coverage</span><span class="spec-value">20m²</span></div>
<div class="spec-row"><span class="spec-label">Output</span><span class="spec-value">6.0 kW</span></div>
<div class="spec-row"><span class="spec-label">Rating</span><span class="spec-value">IP65 Weatherproof</span></div>
</div>
<div class="cta-row">
<button class="btn-primary">Request a Quote</button>
<button class="btn-secondary">Download Spec Sheet</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d2327;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d2327;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #1d2327; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #003388; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #003388;
border: 1px solid #003388; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1d2327;
border: 1px solid #c6c8c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #cf2e2e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#1d2327; font-family:Roboto, 'Segoe UI', sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;background:#003388;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:16px;font-size:15px;font-weight:600;color:#fff;}
.hero{background:#f6f7f7;padding:20px 32px;display:flex;gap:20px;}
.heroimg{width:220px;height:190px;border-radius:8px;background:linear-gradient(160deg,#1d2327,#003388);flex-shrink:0;position:relative;}
.heroimg .label{position:absolute;left:70px;top:70px;width:80px;height:80px;border-radius:50%;background:#f6f7f7;border:6px solid #1d2327;}
.herotext{flex:1;padding-top:8px;}
.herotext h1{font-size:24px;font-weight:700;margin:0 0 6px;}
.herotext .artist{font-size:15px;color:#444;margin-bottom:10px;}
.herotext p{font-size:14px;color:#555;margin:0 0 14px;max-width:380px;}
.btnrow{display:flex;gap:10px;}
.btn{background:#003388;color:#fff;font-size:16px;font-weight:600;letter-spacing:0.3px;padding:12px 24px;border-radius:8px;}
.btn2{background:#fff;color:#003388;font-size:16px;font-weight:600;padding:11px 23px;border-radius:8px;border:2px solid #003388;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:206px;background:#fff;border-radius:8px;padding:8px;}
.thumb{aspect-ratio:1/1;height:110px;border-radius:4px;margin-bottom:8px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#b94a48;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.ptitle{font-size:16px;font-weight:600;margin-top:8px;}
.pprice{font-size:16px;color:#444;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:52px;background:#1d2327;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Rasputin Music</div>
<div class="navlinks"><div>Vinyl</div><div>CDs</div><div>Cassettes</div><div>Movies</div></div>
</div>
<div class="hero">
<div class="heroimg"><div class="label"></div></div>
<div class="herotext">
<h1>Live at the Fillmore</h1>
<div class="artist">The Allman Brothers Band · Original Pressing</div>
<p>Keep'n the Bay Area bump'n since 1971 — used, new, and rare vinyl, priced to move.</p>
<div class="btnrow"><div class="btn">Add to Cart</div><div class="btn2">View Condition</div></div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003388,#1d2327);"><div class="badge">New</div></div><div class="ptitle">Kind of Blue — LP</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b94a48,#1d2327);"></div><div class="ptitle">Rumours — CD</div><div class="pprice">$8.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3582c4,#1d2327);"></div><div class="ptitle">Nevermind — LP</div><div class="pprice">$32.99</div></div>
</div>
<div class="footer"><span>© Rasputin Music, Bay Area since 1971</span><span>Store Hours Locations Trade-Ins</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e071e; color: #ff2d6f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e071e; color: #ff2d6f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #ff2d6f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #9b9b9b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #cc0040; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: transparent; color: #ffffff;
border: 1px solid #cc0040; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #2b2b2b; color: #ffffff;
border: 1px solid #4a1032; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9b9b9b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.27; letter-spacing: 0.3px; background: #492582; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Poppins','Montserrat',Arial,sans-serif; background:#0e071e; color:#eeeeee; }
*{box-sizing:border-box;}
.nav{height:64px;background:#0e071e;border-bottom:1px solid #2b2b2b;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-family:'Montserrat',sans-serif;font-size:19px;font-weight:700;color:#ffffff;letter-spacing:.5px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;letter-spacing:.3px;color:#9b9b9b;}
.navlinks span.active{color:#ffffff;font-weight:600;}
.hero{height:230px;position:relative;display:flex;align-items:center;padding:0 34px;overflow:hidden;}
.hero:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 78% 40%, rgba(204,0,64,.35), transparent 55%),radial-gradient(circle at 30% 80%, rgba(73,37,130,.4), transparent 60%);}
.heroText{position:relative;z-index:1;}
.tag{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#cc0040;margin-bottom:10px;}
.hero h1{font-family:'Montserrat',sans-serif;font-size:34px;font-weight:700;line-height:1.15;letter-spacing:-.5px;color:#ffffff;margin:0 0 10px;}
.hero p{font-size:14px;color:#9b9b9b;max-width:380px;margin:0 0 16px;}
.btn{display:inline-block;background:#cc0040;color:#fff;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:13px 26px;border-radius:4px;width:fit-content;}
.mouse{position:absolute;right:70px;top:44px;width:150px;height:140px;border-radius:60px 60px 40px 40px;background:linear-gradient(160deg,#2b2b2b,#0e071e);border:1px solid #492582;z-index:1;}
.mouse:after{content:'';position:absolute;left:50%;top:14px;width:2px;height:60px;background:#cc0040;transform:translateX(-50%);}
.spectable{display:flex;gap:1px;background:#2b2b2b;margin:0 34px;}
.speccell{flex:1;background:#1a1a2e;text-align:center;padding:12px 4px;}
.speclabel{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#757575;}
.specvalue{font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#ffffff;margin-top:4px;}
.grid{display:flex;gap:12px;padding:16px 34px 0;}
.card{width:190px;position:relative;overflow:hidden;height:150px;background:#1a1a2e;}
.cardimg{position:absolute;inset:0;}
.fade{position:absolute;inset:0;background:linear-gradient(to bottom, transparent 50%, #0e071e 100%);}
.ctag{position:relative;z-index:1;font-family:'Montserrat',sans-serif;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#fff;background:#cc0040;display:inline-block;padding:2px 6px;border-radius:8px;margin:10px 0 0 10px;}
.ctag.divina{background:#492582;}
.ctext{position:absolute;left:10px;bottom:8px;z-index:1;}
.ctitle{font-size:12px;font-weight:600;color:#ffffff;}
.cprice{font-size:12px;color:#cc0040;font-weight:700;margin-top:2px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Zowie</div>
<div class="navlinks"><span class="active">Mice</span><span>Monitors</span><span>Divina</span><span>Mousepads</span><span>Support</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="tag">240Hz Competitive Series</div>
<h1>Built for the<br>frame you need.</h1>
<p>Zero-latency peripherals engineered for players who read the game one frame ahead.</p>
<div class="btn">Shop The Lineup</div>
</div>
<div class="mouse"></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Refresh Rate</div><div class="specvalue">240Hz</div></div>
<div class="speccell"><div class="speclabel">Sensor DPI</div><div class="specvalue">26K</div></div>
<div class="speccell"><div class="speclabel">Weight</div><div class="specvalue">59g</div></div>
<div class="speccell"><div class="speclabel">Polling Rate</div><div class="specvalue">8000Hz</div></div>
</div>
<div class="grid">
<div class="card"><div class="cardimg" style="background:linear-gradient(140deg,#492582,#0e071e)"></div><div class="fade"></div><div class="ctag divina">Divina</div><div class="ctext"><div class="ctitle">EC3-C Divina</div><div class="cprice">$79.90</div></div></div>
<div class="card"><div class="cardimg" style="background:linear-gradient(140deg,#2b2b2b,#0e071e)"></div><div class="fade"></div><div class="ctag">New</div><div class="ctext"><div class="ctitle">XL2586X 240Hz Monitor</div><div class="cprice">$399.00</div></div></div>
<div class="card"><div class="cardimg" style="background:linear-gradient(140deg,#5f3f3f,#0e071e)"></div><div class="fade"></div><div class="ctext" style="bottom:8px"><div class="ctitle">FK2-C Ambidextrous</div><div class="cprice">$59.90</div></div></div>
<div class="card"><div class="cardimg" style="background:linear-gradient(140deg,#293f98,#0e071e)"></div><div class="fade"></div><div class="ctext" style="bottom:8px"><div class="ctitle">G-SR-SE Mousepad</div><div class="cprice">$34.90</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #25282b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #25282b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 24px; margin: 0; color: #25282b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 800; line-height: 24px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 28px; background: #e60000; color: #ffffff;
border: none; border-radius: 60px; padding: {spacing.md} {spacing.2xl};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 28px; background: #ffffff; color: #e60000;
border: 1px solid #e60000; border-radius: 60px;
padding: {spacing.md} {spacing.2xl}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background: #ffffff; color: #25282b;
border: 1px solid #25282b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 21px; background: #f2f2f2; color: #25282b;
border-radius: 32px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#25282b; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.heroband { background:#25282b; color:#ffffff; padding:0 32px; height:400px; position:relative; overflow:hidden; }
.heroband::before { content:''; position:absolute; inset:0;
background:radial-gradient(500px 300px at 85% 20%, rgba(230,0,0,.35), transparent 65%),
linear-gradient(200deg,#3a3f44,#25282b 60%); }
nav { position:relative; z-index:2; height:60px; display:flex; align-items:center; justify-content:space-between; }
.brandwrap { display:flex; align-items:center; gap:8px; }
.speech { width:26px; height:26px; border-radius:50%; background:#e60000; position:relative; }
.speech::after { content:''; position:absolute; width:9px; height:9px; border-radius:50%; background:#ffffff; left:8.5px; top:8.5px; }
.brand { font-size:15px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:12px; font-weight:700; text-transform:uppercase; opacity:.85; }
.pillred { background:#e60000; color:#ffffff; border-radius:999px; padding:9px 20px; font-size:13px; font-weight:700; }
.heroband h1 { position:relative; z-index:2; font-size:64px; font-weight:800; text-transform:uppercase;
line-height:.98; letter-spacing:-.5px; margin:56px 0 14px; max-width:640px; }
.heroband p { position:relative; z-index:2; font-size:15px; opacity:.9; max-width:480px; margin:0 0 22px; }
.heroctas { position:relative; z-index:2; display:flex; gap:12px; }
.pillout { background:transparent; border:1.5px solid #ffffff; color:#ffffff; border-radius:999px; padding:9px 20px; font-size:13px; font-weight:700; }
.contentband { padding:26px 32px; }
.chips { display:flex; gap:16px; }
.chip { flex:1; background:#f2f2f2; border-radius:12px; padding:18px; }
.chip .tag { font-size:11px; font-weight:800; text-transform:uppercase; color:#e60000; }
.chip h3 { font-size:18px; font-weight:800; margin:8px 0 6px; }
.chip p { font-size:12px; color:#7e7e7e; margin:0; line-height:1.4; }
</style></head>
<body>
<div class="heroband">
<nav>
<div class="brandwrap"><div class="speech"></div><div class="brand">Vodafone</div></div>
<div class="navlinks"><span>Mobile</span><span>Broadband</span><span>Business</span><span>Discover</span></div>
<div class="pillred">Shop deals</div>
</nav>
<h1>Together We Can</h1>
<p>Unlimited data, calls and texts — plus the network built for what's next.</p>
<div class="heroctas"><button class="pillred">Shop now</button><button class="pillout">Explore plans</button></div>
</div>
<div class="contentband">
<div class="chips">
<div class="chip"><div class="tag">Mobile</div><h3>5G Ultra</h3><p>Our fastest network yet, in more places than ever.</p></div>
<div class="chip"><div class="tag">Broadband</div><h3>Full Fibre</h3><p>Reliable speed for every device in the house.</p></div>
<div class="chip"><div class="tag">Business</div><h3>V-Hub</h3><p>Free tools and advice to help your business grow.</p></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.2px; background: #f68b1f; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.2px; background: #ffffff; color: #121212;
border: 1px solid #664283; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #b28500; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f3f3f3; font-family:'Poppins','Segoe UI',sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:56px;background:#664283;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:20px;font-weight:600;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#fff;}
.search{margin:0 20px;flex:1;max-width:260px;height:36px;border-radius:9999px;background:#fff;display:flex;align-items:center;padding:0 16px;font-size:13px;color:#929292;}
.hero{height:200px;background:#f0f0f0;display:flex;align-items:center;padding:0 30px;}
.hero h1{font-size:28px;font-weight:600;letter-spacing:-.5px;margin:0 0 14px;max-width:400px;}
.cta{display:inline-block;background:#f68b1f;color:#fff;font-size:14px;font-weight:500;letter-spacing:.2px;padding:14px 32px;border-radius:8px;}
.rowlabel{padding:14px 30px 8px;font-size:16px;font-weight:600;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:180px;background:#fff;border:1px solid #efefef;border-radius:8px;padding:10px;position:relative;}
.thumb{aspect-ratio:2/3;border-radius:6px;position:relative;overflow:hidden;}
.badge{position:absolute;top:6px;left:6px;font-size:11px;font-weight:600;letter-spacing:.2px;border-radius:9999px;padding:2px 10px;z-index:2;}
.ptitle{font-size:14px;font-weight:500;margin-top:8px;}
.pprice{font-size:14px;font-weight:600;margin-top:2px;}
</style>
<div class="nav">
<div class="logo">Troll And Toad</div>
<div class="search">Search cards, sets, singles...</div>
<div class="navlinks"><div>Pokémon</div><div>Magic</div><div>Yu-Gi-Oh!</div></div>
</div>
<div class="hero">
<h1>Every set, every rarity, organized.</h1>
<div class="cta">Shop Singles</div>
</div>
<div class="rowlabel">Rare Finds</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#b28500;color:#fff">Rare</span><div class="thumb" style="background:linear-gradient(160deg,#664283,#f68b1f)"></div><div class="ptitle">Charizard VMAX Alt Art</div><div class="pprice">$189.99</div></div>
<div class="card"><span class="badge" style="background:#f68b1f;color:#fff">Sale</span><div class="thumb" style="background:linear-gradient(160deg,#f68b1f,#664283)"></div><div class="ptitle">Black Lotus Reprint</div><div class="pprice">$44.99</div></div>
<div class="card"><span class="badge" style="background:#664283;color:#fff">Holo</span><div class="thumb" style="background:linear-gradient(160deg,#b28500,#664283)"></div><div class="ptitle">Blue-Eyes White Dragon</div><div class="pprice">$29.99</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #dedede; color: #121212;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #f5f5f5; color: #121212;
border: 1px solid #dedede; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f5f5f5; color: #121212;
border: 1px solid #bcbcbc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #121212; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f5; color:#121212; box-sizing:border-box;
font-family:'GT America',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e8e8e8; }
.brand { font-size:20px; font-weight:400; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:14px; font-weight:500; color:#7a7a7a; }
.navlinks span.active { color:#121212; border-bottom:2px solid #121212; padding-bottom:20px; }
.hero { padding:36px 32px; text-align:center; }
.headline { font-size:36px; font-weight:400; letter-spacing:-0.5px; margin-bottom:8px; }
.sub { font-size:16px; color:#3a3a3a; margin-bottom:18px; }
.heroBtn { display:inline-block; background:#dedede; color:#121212; border-radius:9999px; padding:14px 28px; font-size:14px; font-weight:500; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:8px 32px 0; }
.card { }
.photo { aspect-ratio:1/1; border-radius:12px; margin-bottom:8px; position:relative; background:#fff; }
.c1 .photo { background:linear-gradient(150deg,#f4a2b8,#f7c9d6); }
.c2 .photo { background:linear-gradient(150deg,#b8c9b8,#dbe6db); }
.c3 .photo { background:linear-gradient(150deg,#d4a574,#e8cfa8); }
.c4 .photo { background:linear-gradient(150deg,#dedede,#f5f5f5); }
.badge { position:absolute; top:8px; left:8px; background:#121212; color:#fff; font-size:10px; font-weight:600;
letter-spacing:0.5px; text-transform:uppercase; border-radius:9999px; padding:4px 10px; }
.name { font-size:14px; font-weight:500; margin-top:6px; }
.price { font-size:14px; color:#7a7a7a; }
.section2 { padding:28px 32px 0; }
.section2 h2 { font-size:24px; font-weight:400; margin-bottom:4px; }
</style></head>
<body>
<nav>
<div class="brand">Glossier</div>
<div class="navlinks"><span class="active">Skin</span><span>Makeup</span><span>Body</span><span>Sets</span></div>
</nav>
<div class="hero">
<div class="headline">skin first. makeup second.</div>
<div class="sub">the products people actually use, made with the people who actually use them.</div>
<div class="heroBtn">shop bestsellers</div>
</div>
<div class="grid">
<div class="card c1"><div class="photo"><div class="badge">new</div></div><div class="name">Balm Dotcom</div><div class="price">$14</div></div>
<div class="card c2"><div class="photo"></div><div class="name">Milky Jelly Cleanser</div><div class="price">$20</div></div>
<div class="card c3"><div class="photo"></div><div class="name">Futuredew</div><div class="price">$28</div></div>
<div class="card c4"><div class="photo"></div><div class="name">Cloud Paint</div><div class="price">$20</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #121212; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #121212;
border: 1px solid #121212; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #27ae60; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box; font-family:'Figtree', 'Inter', sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; padding:0 32px; border-bottom:1px solid #e8e8e8; }
.brand { font-family:'Fraunces', Georgia, serif; font-size:20px; font-weight:600; }
.navlinks { display:flex; gap:18px; margin:0 auto; }
.navlinks div { font-size:15px; font-weight:500; }
.search { background:#f5f5f5; border-radius:9999px; height:40px; width:220px; padding:0 16px; font-size:13px; color:#666; display:flex; align-items:center; }
.hero { background:#f5f5f5; padding:36px 32px; text-align:center; }
.hero h1 { font-family:'Fraunces', Georgia, serif; font-size:36px; font-weight:600; margin:0 0 8px; }
.hero p { font-size:14px; color:#666; margin:0 0 16px; }
.hero .cta { display:inline-block; background:#121212; color:#fff; font-size:15px; font-weight:600; padding:12px 24px; border-radius:4px; }
.cats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:20px 32px 4px; }
.catcard { border-radius:4px; text-align:center; padding:20px; box-shadow:0 1px 3px rgba(0,0,0,0.08); font-family:'Fraunces', Georgia, serif; font-size:18px; font-weight:500; }
.catcard div.sh { width:100%; height:60px; border-radius:4px; margin-bottom:10px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:16px 32px 20px; }
.card { border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,0.08); overflow:hidden; }
.img { aspect-ratio:1/1; }
.g1 { background:linear-gradient(135deg,#c0392b,#333); }
.g2 { background:linear-gradient(135deg,#333,#000); }
.g3 { background:linear-gradient(135deg,#27ae60,#0a3d20); }
.g4 { background:linear-gradient(135deg,#666,#111); }
.info { padding:10px 12px; }
.name { font-size:16px; font-weight:600; margin-bottom:2px; }
.price { font-size:16px; font-weight:600; }
</style></head>
<body>
<nav>
<div class="brand">Fiddlershop</div>
<div class="navlinks"><div>Violins</div><div>Violas</div><div>Cellos</div><div>Basses</div><div>Accessories</div></div>
<div class="search">Search instruments...</div>
</nav>
<div class="hero">
<h1>Instruments Built to Last a Lifetime</h1>
<p>Curated string instruments for players at every level</p>
<div class="cta">Shop Violins</div>
</div>
<div class="cats">
<div class="catcard"><div class="sh" style="background:linear-gradient(135deg,#c0392b,#333)"></div>Violin</div>
<div class="catcard"><div class="sh" style="background:linear-gradient(135deg,#333,#000)"></div>Viola</div>
<div class="catcard"><div class="sh" style="background:linear-gradient(135deg,#27ae60,#0a3d20)"></div>Cello</div>
<div class="catcard"><div class="sh" style="background:linear-gradient(135deg,#666,#111)"></div>Bass</div>
</div>
<div class="grid">
<div class="card"><div class="img g1"></div><div class="info"><div class="name">Student Violin 4/4</div><div class="price">$219</div></div></div>
<div class="card"><div class="img g2"></div><div class="info"><div class="name">Ebony Fitted Cello</div><div class="price">$1,299</div></div></div>
<div class="card"><div class="img g3"></div><div class="info"><div class="name">Carbon Fiber Bow</div><div class="price">$149</div></div></div>
<div class="card"><div class="img g4"></div><div class="info"><div class="name">Upright Bass 3/4</div><div class="price">$2,450</div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #5F5F5F; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #E4002B; color: #FFFFFF;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #E4002B; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5F5F5F; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.88px; background: #E4002B; color: #FFFFFF;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'Helvetica Neue', Arial, sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #ddd;}
.logo{font-size:19px;font-weight:700;letter-spacing:.2px;}
.navlinks{display:flex;gap:24px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#1a1a1a;}
.navlinks span:first-child{color:#E4002B;border-bottom:2px solid #E4002B;padding-bottom:18px;}
.hero{height:280px;background:#1a1a1a;display:flex;align-items:center;padding:0 32px;}
.heroText{width:52%;}
.spec-kick{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#E4002B;margin-bottom:10px;}
.heroText h1{font-size:34px;font-weight:700;color:#fff;margin:0 0 12px;letter-spacing:-.5px;line-height:1.1;}
.heroText p{font-size:14px;color:#ccc;max-width:340px;margin:0 0 18px;}
.ctarow{display:flex;gap:12px;}
.btn-primary{background:#E4002B;color:#fff;font-size:13px;font-weight:600;letter-spacing:.3px;padding:13px 22px;}
.btn-secondary{background:transparent;color:#fff;border:1.5px solid #fff;font-size:13px;font-weight:600;padding:12px 21px;}
.heroImg{width:48%;height:280px;position:relative;}
.machine{position:absolute;right:40px;top:60px;width:220px;height:140px;background:linear-gradient(135deg,#2d2d2d,#0a0a0a);border-radius:4px;}
.machine:before{content:'';position:absolute;left:20px;top:20px;width:180px;height:8px;background:#E4002B;}
.machine:after{content:'';position:absolute;left:20px;top:40px;width:180px;height:80px;background:#111;border:1px solid #333;}
.spectable{display:flex;border:1px solid #ddd;border-top:none;}
.speccell{flex:1;text-align:center;padding:14px 8px;border-right:1px solid #ddd;}
.speccell:last-child{border-right:none;}
.spec-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#666;}
.spec-value{font-size:16px;font-weight:600;margin-top:4px;}
.catsec{padding:20px 32px 0;}
.catlabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#E4002B;margin-bottom:12px;}
.catgrid{display:flex;gap:12px;}
.catcard{flex:1;border:1px solid #ddd;padding:14px;border-left:3px solid #E4002B;}
.catcard h3{font-size:14px;font-weight:600;margin:0 0 4px;}
.catcard p{font-size:11px;color:#666;margin:0;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#1a1a1a;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.footer span{font-size:11px;color:#aaa;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Trotec Laser</div>
<div class="navlinks"><span>Engravers</span><span>Cutters</span><span>Markers</span><span>Software</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="spec-kick">Boils Down To Precision</div>
<h1>Engineered for the Fabrication Floor</h1>
<p>Industrial laser cutting and engraving systems built for production workflows, not hobby benches.</p>
<div class="ctarow"><div class="btn-primary">Request a Demo</div><div class="btn-secondary">Get a Quote</div></div>
</div>
<div class="heroImg"><div class="machine"></div></div>
</div>
<div class="spectable">
<div class="speccell"><div class="spec-label">Work Area</div><div class="spec-value">900 x 600mm</div></div>
<div class="speccell"><div class="spec-label">Laser Power</div><div class="spec-value">80–120W</div></div>
<div class="speccell"><div class="spec-label">Positioning</div><div class="spec-value">±0.05mm</div></div>
<div class="speccell"><div class="spec-label">Materials</div><div class="spec-value">Acrylic / Wood / Metal</div></div>
</div>
<div class="catsec">
<div class="catlabel">Browse by Application</div>
<div class="catgrid">
<div class="catcard"><h3>Signage</h3><p>Dimensional lettering & displays</p></div>
<div class="catcard"><h3>Packaging</h3><p>Die-line prototyping</p></div>
<div class="catcard"><h3>Textiles</h3><p>Fabric cutting at scale</p></div>
<div class="catcard"><h3>Architecture</h3><p>Scale models & fixtures</p></div>
</div>
</div>
<div class="footer"><span>© Engineered in Central Europe</span><span>Support · Warranty · Compliance</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfaf7; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfaf7; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 26px; font-weight: 600; line-height: 1.2; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: #05154b; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: transparent; color: #05154b;
border: 1px solid #05154b; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fbfaf7; color: #121212;
border: 1px solid #dedede; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.2px; background: #05154b; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fbfaf7; font-family:'Mark-Pro',Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:64px;background:#05154b;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-family:'Quarto-Semibold',Georgia,serif;font-size:19px;font-weight:600;color:#fff;letter-spacing:.5px;}
.navlinks{display:flex;gap:26px;font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:#fff;}
.hero{height:230px;display:flex;align-items:center;padding:0 34px;gap:40px;}
.herotext{width:400px;}
h1{font-family:'Quarto-Semibold',Georgia,serif;font-size:34px;font-weight:600;color:#121212;margin:0 0 14px;line-height:1.15;}
.sub{font-size:14px;color:#121212;line-height:1.6;margin:0 0 18px;width:360px;}
.chip{display:inline-flex;align-items:center;background:#05154b;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:6px 14px;margin-bottom:16px;}
.cta{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 26px;background:#05154b;color:#fff;font-size:13px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;}
.plate{width:180px;height:180px;border-radius:9999px;background:radial-gradient(circle at 40% 35%,#fbfaf7,#f9f2ec 70%,#dedede);box-shadow:0 6px 20px rgba(0,0,0,.08);position:relative;}
.plate:before{content:'';position:absolute;inset:26px;border-radius:9999px;border:1px solid #dedede;}
.section{padding:0 34px;}
.sectitle{font-family:'Quarto-Semibold',Georgia,serif;font-size:20px;font-weight:600;color:#121212;margin:20px 0 14px;}
.grid{display:flex;gap:18px;}
.card{width:190px;background:#f9f2ec;padding:14px;}
.thumb{height:110px;border-radius:9999px;margin:0 auto 12px;width:110px;}
.ptitle{font-size:13px;font-weight:500;color:#121212;text-align:center;}
.pprice{font-size:13px;color:#6b6b6b;text-align:center;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Year And Day</div>
<div class="navlinks"><span>Dinnerware</span><span>Serveware</span><span>The Chip Guarantee</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="chip">Guaranteed Against Chips</div>
<h1>Porcelain built to outlast the dinner party.</h1>
<div class="sub">Minimal, decisive dinnerware — objects considered enough to speak for themselves.</div>
<div class="cta">Shop The Collection</div>
</div>
<div class="plate"></div>
</div>
<div class="section">
<div class="sectitle">The Essentials</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 40% 35%,#fbfaf7,#dedede 75%)"></div><div class="ptitle">Dinner Plate</div><div class="pprice">$28</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 40% 35%,#fbfaf7,#dedede 75%)"></div><div class="ptitle">Salad Bowl</div><div class="pprice">$24</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 40% 35%,#fbfaf7,#dedede 75%)"></div><div class="ptitle">Coupe Mug</div><div class="pprice">$18</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 40% 35%,#fbfaf7,#dedede 75%)"></div><div class="ptitle">Serving Platter</div><div class="pprice">$46</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313f49;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313f49;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #313f49; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.57; margin: 0; color: #99a5af; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #f53794; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #ffffff; color: #313f49;
border: 1px solid #f53794; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313f49;
border: 1px solid #cccfd2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #99a5af; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #f53794; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Foreo Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Montserrat',Arial,sans-serif; background:#ffffff; color:#313f49; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
.nav { height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.logo { font-weight:800; font-size:20px; letter-spacing:.5px; color:#313f49; }
.navlinks { display:flex; gap:26px; font-size:12.5px; font-weight:500; color:#54636d; }
.navcta { background:#f53794; color:#fff; font-weight:600; font-size:13px; padding:10px 22px; border-radius:999px; }
.hero { height:270px; position:relative; display:flex; align-items:center; padding:0 44px; background:linear-gradient(120deg,#313f49 0%,#78278b 55%,#dbc088 120%); }
.hero-copy { max-width:420px; z-index:2; color:#fff; }
.weight-light { font-weight:200; }
.hero h1 { font-size:38px; font-weight:200; line-height:1.2; margin:0 0 6px; }
.hero h1 b { font-weight:700; }
.hero p { font-weight:300; font-size:14.5px; line-height:1.6; margin:0 0 20px; color:#f0e6ee; max-width:360px; }
.btn-pill { background:#f53794; color:#fff; font-weight:700; font-size:13px; padding:12px 26px; border-radius:999px; display:inline-block; }
.device { position:absolute; right:60px; top:40px; width:70px; height:190px; border-radius:35px; background:linear-gradient(160deg,#ff6dac,#78278b); box-shadow:0 20px 30px rgba(0,0,0,.3); }
.device::after { content:''; position:absolute; top:14px; left:10px; right:10px; height:60px; border-radius:20px; background:rgba(255,255,255,.25); }
.strip { display:flex; gap:0; background:#313f49; }
.strip div { flex:1; text-align:center; padding:10px; font-size:11px; font-weight:600; color:#fff; }
.strip div:nth-child(1){background:#2aa9f6;}
.strip div:nth-child(2){background:#25d7ff; color:#313f49;}
.strip div:nth-child(3){background:#00c7b1;}
.strip div:nth-child(4){background:#f53794;}
.section { padding:24px 40px; flex:1; background:#f4f5f6; }
.section h2 { font-size:20px; font-weight:600; margin:0 0 16px; color:#313f49; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { background:#fff; border-radius:16px; padding:14px; box-shadow:0 6px 16px rgba(49,63,73,.08); text-align:center; }
.card .ph { height:74px; border-radius:24px; margin:0 auto 10px; width:44px; }
.card .name { font-weight:600; font-size:12.5px; margin-bottom:2px; }
.card .desc { font-size:10.5px; color:#99a5af; margin-bottom:8px; }
.card .price { font-weight:700; font-size:14px; color:#f53794; }
.card .buy { background:#313f49; color:#fff; font-size:10.5px; font-weight:600; padding:6px 14px; border-radius:999px; margin-top:8px; display:inline-block; }
</style>
<div class="page">
<div class="nav">
<div class="logo">Foreo</div>
<div class="navlinks"><span>Cleansing</span><span>LED Therapy</span><span>Anti-Aging</span><span>Wellness</span></div>
<div class="navcta">Shop Now</div>
</div>
<div class="hero">
<div class="hero-copy">
<h1><b>Beauty-tech</b><br>with a heartbeat.</h1>
<p>Swedish engineering that turns skincare into a clinical ritual — precise enough to trust, vivid enough to remember.</p>
<div class="btn-pill">Take the Skin Quiz</div>
</div>
<div class="device"></div>
</div>
<div class="strip"><div>T-Sonic Pulsations</div><div>Subscribe & Save</div><div>60-Day Trial</div><div>App Connected</div></div>
<div class="section">
<h2>Bestselling Devices</h2>
<div class="grid">
<div class="card"><div class="ph" style="background:linear-gradient(160deg,#ff6dac,#78278b);"></div><div class="name">LUNA 4</div><div class="desc">Facial Cleansing</div><div class="price">$219</div><div class="buy">Add to Cart</div></div>
<div class="card"><div class="ph" style="background:linear-gradient(160deg,#dbc088,#78278b);"></div><div class="name">BEAR 2</div><div class="desc">Microcurrent Toning</div><div class="price">$379</div><div class="buy">Add to Cart</div></div>
<div class="card"><div class="ph" style="background:linear-gradient(160deg,#2aa9f6,#00c7b1);"></div><div class="name">UFO 3</div><div class="desc">LED Mask Treatment</div><div class="price">$279</div><div class="buy">Add to Cart</div></div>
<div class="card"><div class="ph" style="background:linear-gradient(160deg,#25d7ff,#313f49);"></div><div class="name">ESPADA 2</div><div class="desc">Blue Light Acne</div><div class="price">$179</div><div class="buy">Add to Cart</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfbf9; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfbf9; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f3ae5f; color: #000000;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fcfbf9; color: #212121;
border: 1px solid #f3ae5f; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfbf9; color: #212121;
border: 1px solid #c5c4c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f3ae5f; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#fcfbf9; color:#393b3a; box-sizing:border-box; font-family:'Nunito Sans','Poppins',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; border-bottom:1px solid #e4e4e4; display:flex; align-items:center; justify-content:center; position:relative; padding:0 32px; }
.brand { font-family:'Petrona',serif; font-size:22px; font-weight:600; margin:0; color:#212121; }
.navlinks { position:absolute; left:32px; display:flex; gap:20px; font-family:'Poppins',sans-serif; font-size:13px; font-weight:500; text-transform:uppercase; letter-spacing:0.5px; color:#212121; }
.cart-ico { position:absolute; right:32px; width:40px; height:40px; border-radius:999px; background:#f7f4ef; display:flex; align-items:center; justify-content:center; font-size:15px; }
.main { display:flex; gap:20px; padding:16px 32px; height:400px; }
.gallery { width:400px; background:#f7f4ef; border-radius:8px; display:flex; align-items:center; justify-content:center; position:relative; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.block-stack { display:flex; align-items:flex-end; gap:8px; }
.block { width:44px; border-radius:8px; }
.block.b1 { height:60px; background:#f3ae5f; }
.block.b2 { height:90px; background:#108474; }
.block.b3 { height:70px; background:#93c8be; }
.block.b4 { height:50px; background:#ab8c52; }
.badge-wood { position:absolute; top:16px; left:16px; background:#ab8c52; color:#fff; font-family:'Poppins',sans-serif; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:4px 8px; border-radius:4px; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; }
.info h1 { font-family:'Petrona',serif; font-size:24px; font-weight:600; margin:0; }
.stars { color:#ab8c52; font-size:13px; }
.price { font-family:'Poppins',sans-serif; font-weight:600; color:#108474; font-size:20px; }
.desc { font-size:14px; line-height:1.55; color:#393b3a; max-width:420px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#f3ae5f; color:#fff; border:none; border-radius:999px; font-family:'Poppins',sans-serif; font-weight:600; font-size:15px; }
.btn-secondary { flex:1; height:48px; background:#fcfbf9; color:#212121; border:2px solid #d9d9d9; border-radius:999px; font-family:'Poppins',sans-serif; font-weight:600; font-size:15px; }
footer { position:absolute; bottom:0; left:0; right:0; background:#282c2e; color:#f5f2ec; padding:14px 32px; display:flex; justify-content:space-between; font-size:12px; }
</style></head>
<body>
<nav>
<div class="navlinks"><span>Wooden Toys</span><span>Montessori</span><span>Bath Time</span></div>
<p class="brand">Bannor Toys</p>
<div class="cart-ico">🛍</div>
</nav>
<div class="main">
<div class="gallery">
<span class="badge-wood">Solid Wood</span>
<div class="block-stack">
<div class="block b1"></div>
<div class="block b2"></div>
<div class="block b3"></div>
<div class="block b4"></div>
</div>
</div>
<div class="info">
<h1>Rainbow Stacking Blocks</h1>
<div class="stars">★★★★★ 4.9 (410 reviews)</div>
<span class="price">$38.00</span>
<p class="desc">Hand-sanded beechwood blocks in warm, natural finishes — safe for little hands, built for stacking, sorting, and open-ended imaginative play from age one and up.</p>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Shop Baby Toys</button>
</div>
</div>
</div>
<footer>
<span>© Bannor Toys</span>
<span>Bannor Toys · Shop · Support · Connect</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #728197; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #00b2ff; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #000000;
border: 1px solid #00b2ff; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #728197; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #00b2ff; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'DM Sans',-apple-system,system-ui,sans-serif; background:#ffffff; color:#4a5464; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #dcdfe5;}
.logo{font-size:19px;font-weight:700;color:#121212;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;text-transform:uppercase;color:#4a5464;}
.hero{height:210px;display:flex;background:#f7f8fa;}
.herotxt{width:48%;padding:22px 34px;display:flex;flex-direction:column;justify-content:center;}
.herotxt h1{font-size:28px;font-weight:700;color:#121212;margin:0 0 10px;line-height:1.25;}
.herotxt p{font-size:14px;margin:0 0 16px;max-width:280px;}
.cta{width:fit-content;font-size:14px;font-weight:600;background:#00b2ff;color:#fff;padding:12px 26px;border-radius:8px;}
.data{width:52%;padding:20px;}
.datacard{background:#fff;border-radius:12px;border:1px solid #dcdfe5;padding:16px;height:100%;}
.datacard .lbl{font-size:11px;font-weight:500;color:#728197;text-transform:uppercase;letter-spacing:0.3px;}
.datacard .val{font-family:'Courier New',monospace;font-size:26px;font-weight:700;color:#121212;margin-top:6px;}
.bar{display:flex;gap:4px;margin-top:14px;}
.dot{flex:1;height:8px;border-radius:4px;background:#dcdfe5;}
.dot.on{background:#00b2ff;}
.sec{padding:18px 34px 0;}
.sec h2{font-size:17px;font-weight:700;color:#121212;margin:0 0 14px;}
.grid{display:flex;gap:14px;}
.card{width:210px;background:#fff;border:1px solid #dcdfe5;border-radius:8px;padding:12px;}
.cimg{height:90px;border-radius:8px;margin-bottom:8px;}
.ctitle{font-size:14px;font-weight:600;color:#121212;}
.cprice{font-size:13px;margin-top:4px;color:#728197;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;background:#23282f;color:#c1c8d1;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:11px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Natalist</div>
<div class="navlinks"><div>Fertility</div><div>Pregnancy</div><div>Postpartum</div><div>Learn</div></div>
</div>
<div class="hero">
<div class="herotxt">
<h1>Support for every<br>step of the journey</h1>
<p>Prenatal vitamins and testing kits designed with OB-GYNs, not marketers.</p>
<div class="cta">Take the Quiz</div>
</div>
<div class="data"><div class="datacard"><div class="lbl">Cycle Day</div><div class="val">Day 14</div><div class="bar"><div class="dot on"></div><div class="dot on"></div><div class="dot on"></div><div class="dot"></div><div class="dot"></div></div></div></div>
</div>
<div class="sec">
<h2>Shop the Essentials</h2>
<div class="grid">
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#00b2ff,#dcdfe5)"></div><div class="ctitle">Prenatal Daily Packets</div><div class="cprice">$44.00</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#dcdfe5,#728197)"></div><div class="ctitle">Ovulation Test Kit</div><div class="cprice">$29.00</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#c1c8d1,#00b2ff)"></div><div class="ctitle">Folate + Choline Gummies</div><div class="cprice">$32.00</div></div>
</div>
</div>
<div class="footer"><span>Formulated with OB-GYNs</span><span>Subscribe & Save Learn</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; font-weight: 500; line-height: 1.2; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.08em; background: #338fb1; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.08em; background: #ffffff; color: #121212;
border: 1px solid #338fb1; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1em; background: #338fb1; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121212; font-family:'Georgia','Times New Roman',serif; color:#ebebeb; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid rgba(255,255,255,0.08);}
.logo{font-family:Georgia,serif;font-size:19px;font-weight:400;letter-spacing:-0.3px;color:#fff;}
.navlinks{display:flex;gap:22px;font-family:Arial,sans-serif;font-size:12px;font-weight:400;letter-spacing:0.1em;text-transform:uppercase;color:#fff;}
.hero{height:230px;display:flex;flex-direction:column;justify-content:center;padding:0 32px;}
.h1{font-family:Georgia,serif;font-size:44px;font-weight:300;letter-spacing:-1px;line-height:1.08;margin:0 0 12px;color:#fff;}
.sub{font-family:Arial,sans-serif;font-size:14px;color:#dedede;line-height:1.5;margin:0;max-width:420px;}
.specblock{display:flex;gap:1px;background:#243225;margin:0 32px;}
.speccell{flex:1;background:#1c291f;text-align:center;padding:10px 6px;}
.speclabel{font-family:Arial,sans-serif;font-size:10px;color:#9db5a0;text-transform:uppercase;letter-spacing:0.05em;}
.specval{font-family:'Courier New',monospace;font-size:13px;color:#338fb1;margin-top:4px;}
.grid{display:flex;gap:12px;padding:18px 32px 0;}
.card{width:150px;background:#fafafa;border:1px solid #dedede;border-radius:2px;padding:8px;}
.thumb{height:100px;background:linear-gradient(135deg,#338fb1,#1c291f);border-radius:2px;margin-bottom:6px;}
.ctitle{font-family:Georgia,serif;font-size:13px;font-weight:500;color:#121212;}
.cprice{font-family:Georgia,serif;font-size:15px;font-weight:500;color:#338fb1;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-family:Arial,sans-serif;font-size:11px;color:#9db5a0;border-top:1px solid rgba(255,255,255,0.08);}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mode Designs</div>
<div class="navlinks"><span>Keyboards</span><span>Switches</span><span>Keycaps</span><span>Compare</span></div>
</div>
<div class="hero">
<div class="h1">Precision, machined.</div>
<p class="sub">1.5mm of pre-travel, anodized top cases, and a product page that reads beautifully.</p>
</div>
<div class="specblock">
<div class="speccell"><div class="speclabel">Actuation</div><div class="specval">45g</div></div>
<div class="speccell"><div class="speclabel">Stem Travel</div><div class="specval">4.0mm</div></div>
<div class="speccell"><div class="speclabel">Polling</div><div class="specval">1000Hz</div></div>
<div class="speccell"><div class="speclabel">Layout</div><div class="specval">75%</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ctitle">Sonnet65 Keyboard</div><div class="cprice">$249</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Envoy Linear Switches</div><div class="cprice">$29</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Ivyora Keycap Set</div><div class="cprice">$89</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Anodized Case — Slate</div><div class="cprice">$139</div></div>
</div>
<div class="footer"><span>Engineered tolerances, editorial type</span><span>© Mode Designs</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f2f2f2; color: #1b1e21;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f2f2f2; color: #1b1e21;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1b1e21; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6c757d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #efbd16; color: #1b1e21;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f2f2f2; color: #1b1e21;
border: 1px solid #efbd16; border-radius: 4px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f2f2f2; color: #1b1e21;
border: 1px solid #bcbdbe; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c757d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #efbd16; color: #1b1e21;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>DXRacer Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:Arial,'Helvetica Neue',sans-serif;
background:#f2f2f2; color:#1b1e21;
}
*{box-sizing:border-box;}
.nav{height:64px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-family:'Montserrat',Arial,sans-serif;font-size:19px;font-weight:700;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:20px;font-family:'Montserrat',Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:0.25px;text-transform:uppercase;color:#1b1e21;}
.navlinks span.active{color:#efbd16;}
.hero{background:#1b1e21;color:#f2f2f2;padding:40px 36px;}
.hero h1{font-family:'Montserrat',Arial,sans-serif;font-size:36px;font-weight:700;letter-spacing:-0.5px;line-height:1.2;margin:0 0 14px;max-width:440px;}
.herobtn{background:#efbd16;color:#1b1e21;font-family:'Montserrat',Arial,sans-serif;font-size:15px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:14px 36px;border-radius:4px;display:inline-block;}
.section{padding:20px 36px 0;}
.grid{display:flex;gap:24px;}
.card{flex:1;background:#fff;border-radius:8px;padding:16px;}
.card-img{height:110px;border-radius:4px;margin-bottom:10px;position:relative;}
.card-img.c1{background:linear-gradient(140deg,#efbd16,#1b1e21);}
.card-img.c2{background:linear-gradient(140deg,#5357d6,#1b1e21);}
.card-img.c3{background:linear-gradient(140deg,#fc337c,#1b1e21);}
.card-img.c4{background:linear-gradient(140deg,#efbd16,#5357d6);}
.badge{position:absolute;top:6px;left:6px;background:#efbd16;color:#1b1e21;font-family:'Montserrat',Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:2px;}
.title{font-family:'Montserrat',Arial,sans-serif;font-size:16px;font-weight:500;margin-bottom:4px;}
.price{font-size:16px;font-weight:700;color:#1b1e21;}
</style>
<nav class="nav">
<div class="logo">Dxracer</div>
<div class="navlinks">
<span class="active">Gaming Chairs</span><span>Racing Series</span><span>Desks</span><span>Accessories</span>
</div>
</nav>
<div class="hero">
<h1>ENGINEERED FOR<br>THE GRIND.</h1>
<div class="herobtn">Shop Racing Series</div>
</div>
<div class="section">
<div class="grid">
<div class="card"><div class="card-img c1"><span class="badge">Best Seller</span></div><div class="title">Formula Series</div><div class="price">$349.00</div></div>
<div class="card"><div class="card-img c2"></div><div class="title">Air Series Mesh</div><div class="price">$449.00</div></div>
<div class="card"><div class="card-img c3"><span class="badge" style="background:#fc337c;color:#fff;">New</span></div><div class="title">Craft Series Pro</div><div class="price">$399.00</div></div>
<div class="card"><div class="card-img c4"></div><div class="title">Standing Desk</div><div class="price">$599.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfcfc; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfcfc; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #103948; color: #fcfcfc;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #fcfcfc; color: #103948;
border: 1px solid #103948; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fcfcfc; color: #333333;
border: 1px solid #c2c2c2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #bc5631; color: #fcfcfc;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fcfcfc; font-family:'Rubik',sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #ebeced;}
.logo{font-family:'Josefin Sans',sans-serif;font-size:21px;font-weight:600;color:#103948;letter-spacing:.5px;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:500;color:#333;}
.cart{font-size:11px;color:#bc5631;font-weight:600;}
.hero{height:250px;display:flex;align-items:center;padding:0 36px;background:#f5f5f5;}
.herotext{width:420px;}
.tag{display:inline-block;background:#103948;color:#fcfcfc;font-size:11px;font-weight:500;padding:4px 10px;margin-bottom:14px;}
.headline{font-family:'Josefin Sans',sans-serif;font-size:32px;font-weight:600;color:#103948;margin-bottom:12px;line-height:1.15;}
.sub{font-size:14px;color:#333;margin-bottom:18px;max-width:340px;}
.btn{display:inline-block;background:#bc5631;color:#fcfcfc;font-size:14px;font-weight:500;padding:12px 24px;}
.sleeve{width:200px;height:200px;margin-left:70px;background:linear-gradient(135deg,#103948,#bc5631);position:relative;}
.disc{position:absolute;left:60px;top:60px;width:80px;height:80px;border-radius:50%;background:#121212;}
.disc:before{content:'';position:absolute;left:34px;top:34px;width:12px;height:12px;border-radius:50%;background:#fcfcfc;}
.sec{padding:20px 36px 0;}
.sectitle{font-family:'Josefin Sans',sans-serif;font-size:16px;font-weight:500;color:#103948;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border:1px solid #ebeced;padding:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#bc5631;color:#fff;font-size:9px;font-weight:600;padding:3px 8px;text-transform:uppercase;}
.thumb{height:88px;margin-bottom:10px;}
.pname{font-family:'Josefin Sans',sans-serif;font-size:14px;font-weight:500;color:#103948;}
.pprice{font-size:12px;color:#bc5631;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">NO Idea Records</div>
<div class="navlinks"><span>Vinyl</span><span>Cassettes</span><span>Merch</span></div>
<div class="cart">Cart (2)</div>
</div>
<div class="hero">
<div class="herotext">
<div class="tag">New Arrivals</div>
<div class="headline">A zine that happens to sell vinyl.</div>
<div class="sub">If you're here, you already know what you want. So we won't get in the way.</div>
<div class="btn">Browse the Grid</div>
</div>
<div class="sleeve"><div class="disc"></div></div>
</div>
<div class="sec">
<div class="sectitle">Just In</div>
<div class="grid">
<div class="card"><div class="badge">Sold Out</div><div class="thumb" style="background:linear-gradient(135deg,#103948,#bc5631)"></div><div class="pname">Basement Show, LP</div><div class="pprice">$22</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#bc5631,#103948)"></div><div class="pname">Telephone Pole 7"</div><div class="pprice">$9</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#121212,#103948)"></div><div class="pname">Marquee Nights, Cassette</div><div class="pprice">$8</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0d74ce;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0d74ce;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.5px; margin: 0; color: #0d74ce; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #999999; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background: #ffffff; color: #171717;
border: 1px solid #000000; border-radius: 8px;
padding: 9px 17px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #171717;
border: 1px solid #c2dcf3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #999999; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; background: #f0f0f3; color: #171717;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#171717; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.skywash { position:absolute; top:-60px; left:0; right:0; height:340px;
background:radial-gradient(ellipse 70% 100% at 50% 0%, #cfe7ff 0%, #a8c8e8 40%, transparent 75%); z-index:0; }
nav { position:relative; z-index:2; height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #f0f0f3; }
.brand { font-size:17px; font-weight:600; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#60646c; font-weight:500; }
.btn-black { background:#000000; color:#fff; border:none; border-radius:8px; padding:9px 16px;
font-size:13px; font-weight:500; white-space:nowrap; }
.hero { position:relative; z-index:2; padding:30px 40px 6px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap:10px; }
.hero h1 { font-size:38px; font-weight:600; letter-spacing:-1.1px; line-height:1.08; margin:0; max-width:600px; }
.hero p { font-size:14px; color:#60646c; margin:0; }
.row { display:flex; gap:10px; margin-top:4px; }
.btn-outline { background:#fff; color:#171717; border:1px solid #dcdee0; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:500; }
.devicewrap { position:relative; z-index:2; display:flex; justify-content:center; margin-top:10px; }
.macbook { width:560px; background:#171717; border-radius:14px 14px 4px 4px; padding:16px 16px 26px; position:relative; }
.macbook::after { content:''; position:absolute; left:50%; bottom:8px; transform:translateX(-50%); width:60px; height:4px;
background:#3a3a3a; border-radius:2px; }
.screen { background:#0d0d0d; border-radius:6px; height:150px; padding:10px; display:flex; gap:8px; }
.dash-col { flex:1; background:#1a1a1a; border-radius:6px; padding:8px; }
.dash-bar { height:8px; background:#2a2a2a; border-radius:3px; margin-bottom:6px; }
.dash-bar.blue { background:#0d74ce; width:60%; }
.dash-code { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:9px; color:#8ad0ff; line-height:1.6; }
.iphone { position:absolute; right:-30px; bottom:-16px; width:100px; height:200px; background:#111; border-radius:20px;
border:3px solid #2a2a2a; padding:8px; }
.iphone .app { background:linear-gradient(160deg,#0d74ce,#000); height:100%; border-radius:12px; display:flex;
align-items:center; justify-content:center; }
.iphone .app span { color:#fff; font-size:9px; font-weight:600; }
.steps { position:relative; z-index:2; display:flex; gap:16px; padding:28px 40px 14px; }
.step { flex:1; background:#fff; border:1px solid #dcdee0; border-radius:12px; padding:16px; }
.step .icon { width:30px; height:30px; background:#f0f0f3; border-radius:8px; margin-bottom:8px; }
.step h4 { font-size:14px; font-weight:600; margin:0 0 4px; }
.step p { font-size:11px; color:#60646c; margin:0; line-height:1.4; }
.codeblock { position:relative; z-index:2; margin:0 40px; background:#171717; border-radius:12px; padding:12px 16px;
font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:10px; color:#fff; line-height:1.6; }
.codeblock .c1 { color:#7fd97f; } .codeblock .c2 { color:#8ad0ff; } .codeblock .c3 { color:#e8b96a; }
footer { position:relative; z-index:2; margin-top:auto; border-top:1px solid #f0f0f3; padding:10px 40px;
display:flex; justify-content:space-between; font-size:10px; color:#60646c; }
</style></head>
<body>
<div class="skywash"></div>
<nav>
<p class="brand">Expo</p>
<div class="navlinks"><span>Tools</span><span>Workflows</span><span>EAS</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-black">Get started</button>
</nav>
<section class="hero">
<h1>Build apps for iOS and Android</h1>
<p>The universal React platform. Ship native apps with a single codebase.</p>
<div class="row"><button class="btn-black">Create a project</button><button class="btn-outline">View docs</button></div>
</section>
<div class="devicewrap">
<div class="macbook">
<div class="screen">
<div class="dash-col">
<div class="dash-bar" style="width:40%"></div>
<div class="dash-bar blue"></div>
<div class="dash-bar" style="width:70%"></div>
<div class="dash-bar" style="width:30%"></div>
</div>
<div class="dash-col">
<div class="dash-code">$ eas build --platform ios<br>✓ Bundling JS<br>✓ Uploading assets<br>✓ Build queued</div>
</div>
</div>
<div class="iphone"><div class="app"><span>Expo Go</span></div></div>
</div>
</div>
<div class="steps">
<div class="step"><div class="icon"></div><h4>Write once</h4><p>One codebase for iOS, Android, and web.</p></div>
<div class="step"><div class="icon"></div><h4>Build in the cloud</h4><p>EAS Build compiles native binaries for you.</p></div>
<div class="step"><div class="icon"></div><h4>Ship instantly</h4><p>Push OTA updates without an app-store review.</p></div>
</div>
<div class="codeblock"><span class="c1">npx</span> create-expo-app my-app <span class="c3">&&</span> <span class="c2">cd</span> my-app <span class="c3">&&</span> npx expo start</div>
<footer>
<span>© Expo</span>
<span>Expo · Docs · Showcase · GitHub</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #1f1d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #1f1d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1f1d1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #8a8585; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #1f2a34; color: #f9f9f9;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #f9f9f9; color: #1f1d1d;
border: 1px solid #1f2a34; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9f9f9; color: #1f1d1d;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8585; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #1990c6; color: #f9f9f9;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f9f9; font-family:'TradeGothicLT',Arial,sans-serif; color:#1f1d1d; }
*{box-sizing:border-box;}
.nav{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #eee;}
.logo{font-family:'Adelaila-Brush','TradeGothicLT',Arial,sans-serif;font-size:24px;font-style:italic;color:#1f2a34;}
.navlinks{display:flex;gap:24px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:#1f1d1d;}
.hero{height:250px;display:flex;background:#fff;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;}
.herotext .kick{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#1990c6;margin-bottom:12px;}
.herotext h1{font-size:32px;font-weight:700;color:#1f1d1d;margin:0 0 14px;line-height:1.2;}
.herotext p{font-size:14px;color:#8a8585;margin:0 0 20px;max-width:300px;line-height:1.5;}
.btn{display:inline-block;background:#1f2a34;color:#fff;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:14px 28px;border-radius:10px;width:fit-content;}
.heroimg{width:54%;position:relative;background:linear-gradient(150deg,#e8dede,#1f2a34 75%);}
.heroimg .palette{position:absolute;right:70px;top:60px;width:160px;height:110px;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.15);display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px;}
.swatch{border-radius:9999px;}
.sec{padding:24px 40px 0;}
.sectitle{font-size:19px;font-weight:700;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:206px;}
.thumb{height:120px;border-radius:12px;margin-bottom:10px;}
.pname{font-size:14px;font-weight:600;}
.pprice{font-size:13px;color:#1990c6;font-weight:700;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Makeup BY Mario</div>
<div class="navlinks"><span>Face</span><span>Eyes</span><span>Tools</span><span>Masterclass</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kick">Soft Glam Collection</div>
<h1>Quiet confidence, applied with intent.</h1>
<p>Artist-formulated makeup built for the glow you control, not the trend of the week.</p>
<div class="btn">Shop Collection</div>
</div>
<div class="heroimg">
<div class="palette">
<div class="swatch" style="background:#f2d3c1;"></div><div class="swatch" style="background:#e8b39a;"></div><div class="swatch" style="background:#c98a6c;"></div><div class="swatch" style="background:#8a5a3c;"></div>
<div class="swatch" style="background:#1990c6;"></div><div class="swatch" style="background:#1f2a34;"></div><div class="swatch" style="background:#f5e6de;"></div><div class="swatch" style="background:#a9776a;"></div>
</div>
</div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1f2a34,#e8b39a);"></div><div class="pname">Master Mattes Eyeshadow Palette</div><div class="pprice">$62</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1990c6,#f5e6de);"></div><div class="pname">Soft Sculpt Bronzer</div><div class="pprice">$40</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c98a6c,#fff);"></div><div class="pname">Glow Highlighter Duo</div><div class="pprice">$46</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #313131; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #313131; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #ffcc00; color: #000000;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #3a3a3a; color: #cccccc;
border: 1px solid #313131; border-radius: 4px;
padding: 10px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #3a3a3a; color: #cccccc;
border: 1px solid #646464; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffcc00; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; background:#313131; color:#cccccc; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #444444;}
.logo{font-size:18px;font-weight:700;color:#ffffff;}
.searchbar{width:340px;height:30px;border:1px solid #444444;display:flex;align-items:center;padding:0 12px;font-size:13px;color:#888888;background:#3a3a3a;}
.catstrip{height:34px;display:flex;align-items:center;gap:20px;padding:0 28px;border-bottom:1px solid #3a3a3a;font-size:13px;color:#cccccc;}
.catstrip span:first-child{color:#ffcc00;font-weight:700;}
.sec{padding:14px 28px 0;}
.secTitle{font-size:14px;font-weight:600;color:#ffffff;margin-bottom:10px;}
.grid{display:flex;gap:10px;}
.card{width:145px;position:relative;}
.thumb{width:145px;height:145px;background:#3a3a3a;margin-bottom:6px;position:relative;overflow:hidden;}
.badge{position:absolute;top:6px;left:6px;font-size:9px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;padding:2px 6px;color:#1a1a1a;}
.ptitle{font-size:12px;font-weight:600;color:#ffffff;line-height:1.35;height:32px;overflow:hidden;}
.pprice{font-size:15px;font-weight:700;color:#ffffff;margin:4px 0;}
.region{font-size:10px;color:#888888;}
.footerwall{position:absolute;bottom:0;left:0;right:0;height:104px;background:#2a2a2a;border-top:1px solid #444444;padding:12px 28px;display:flex;gap:40px;}
.fcol{font-size:11px;color:#888888;line-height:2;}
.fcol b{display:block;font-size:12px;color:#dddddd;margin-bottom:2px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Play Asia Movies A 2</div>
<div class="searchbar">Search Movies, Anime, Figures...</div>
</div>
<div class="catstrip"><span>Anime</span><span>PlayStation</span><span>Nintendo</span><span>PC</span><span>Figures</span><span>Blu-ray/DVD</span></div>
<div class="sec">
<div class="secTitle">Pre-Order — Region Free Steelbooks</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3a3a3a,#1a1a1a);"><div class="badge" style="background:#ffcc00;">Pre-order</div></div><div class="ptitle">Steelbook Collector's Edition</div><div class="pprice">$44.90</div><div class="region">JP · Region A/B</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3a3a3a,#1a1a1a);"><div class="badge" style="background:#e53935;color:#fff;">Sale</div></div><div class="ptitle">Complete Series Box Set</div><div class="pprice">$68.20</div><div class="region">JP · Region Free</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3a3a3a,#1a1a1a);"></div><div class="ptitle">Limited Figure + Blu-ray Bundle</div><div class="pprice">$112.00</div><div class="region">JP · Region A</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3a3a3a,#1a1a1a);"><div class="badge" style="background:#4caf50;color:#fff;">In Stock</div></div><div class="ptitle">Original Motion Picture OST</div><div class="pprice">$19.40</div><div class="region">JP · All Regions</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3a3a3a,#1a1a1a);"></div><div class="ptitle">Director's Cut Import Set</div><div class="pprice">$52.60</div><div class="region">HK · Region 3</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3a3a3a,#1a1a1a);"><div class="badge" style="background:#ffcc00;">Pre-order</div></div><div class="ptitle">Art Book & Poster Set</div><div class="pprice">$28.90</div><div class="region">JP · N/A</div></div>
</div>
</div>
<div class="footerwall">
<div class="fcol"><b>Regions</b>Ships to 200+ countries<br>Multiple warehouses</div>
<div class="fcol"><b>Payment</b>Visa · Mastercard<br>PayPal</div>
<div class="fcol"><b>Support</b>Order tracking<br>Help center</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; background: #F47920; color: #FFFFFF;
border: none; border-radius: 3px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; background: #FFFFFF; color: #0073AE;
border: 1px solid #0073AE; border-radius: 3px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 3px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #2E7D32; color: #FFFFFF;
border-radius: 3px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1A1A1A; box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:26px; background:#002A5C; color:#fff; font-size:11px; display:flex; align-items:center;
justify-content:center; letter-spacing:0.2px; }
nav { height:54px; background:#003E7E; display:flex; align-items:center; justify-content:space-between; padding:0 26px; }
.brand { color:#fff; font-size:16px; font-weight:700; margin:0; }
.searchbox { flex:1; max-width:380px; margin:0 20px; background:#fff; border-radius:3px; height:32px;
display:flex; align-items:center; padding:0 12px; font-size:12px; color:#666; }
.cart-pill { background:#F47920; color:#fff; font-size:12px; font-weight:700; padding:6px 14px; border-radius:3px; }
main { display:flex; height:560px; }
.stage { width:300px; background:#EAF4FA; display:flex; align-items:center; justify-content:center; position:relative; }
.in-stock { position:absolute; top:16px; left:16px; background:#2E7D32; color:#fff; font-size:10px; font-weight:700;
text-transform:uppercase; padding:3px 8px; border-radius:2px; }
.plc { width:150px; height:100px; background:linear-gradient(160deg,#3a3a3a,#1a1a1a); border-radius:3px; position:relative;
box-shadow:0 14px 28px rgba(0,0,0,0.25); }
.plc .led { position:absolute; top:8px; left:8px; width:6px; height:6px; background:#2E7D32; border-radius:999px; }
.plc .led2 { position:absolute; top:8px; left:20px; width:6px; height:6px; background:#F47920; border-radius:999px; }
.plc .terms { position:absolute; bottom:8px; left:8px; right:8px; height:20px; background:#0073AE; border-radius:2px; }
.info { flex:1; padding:24px 30px; display:flex; flex-direction:column; gap:9px; }
.breadcrumb { font-size:11px; color:#666; }
h1 { font-size:20px; font-weight:700; margin:0; }
.partno { font-size:12px; color:#666; }
table.specs { width:100%; border-collapse:collapse; margin-top:6px; font-size:12px; }
table.specs td { border:1px solid #CCCCCC; padding:5px 10px; }
table.specs td.k { background:#F5F5F5; font-weight:700; width:170px; color:#333; }
.price-row { display:flex; align-items:baseline; gap:12px; margin-top:8px; }
.price { font-size:24px; font-weight:700; color:#0073AE; }
.list-price { font-size:13px; color:#666; text-decoration:line-through; }
.actions { display:flex; gap:10px; margin-top:4px; }
.btn-primary { background:#F47920; color:#fff; border-radius:2px; height:42px; padding:0 26px; display:flex;
align-items:center; font-weight:700; font-size:13px; }
.btn-secondary { background:#fff; border:1px solid #CCCCCC; color:#1A1A1A; border-radius:2px; height:42px;
padding:0 18px; display:flex; align-items:center; font-size:12px; }
.qty-note { margin-top:auto; font-size:11px; color:#666; border-top:1px solid #E5E5E5; padding-top:10px; }
</style></head>
<body>
<div class="topbar">FREE 2-DAY SHIPPING ON ORDERS OVER $49 · SAME-DAY SHIP BEFORE 9PM ET</div>
<nav>
<p class="brand">Automationdirect</p>
<div class="searchbox">Search by part number, model, or category…</div>
<div class="cart-pill">Cart (0) · $0.00</div>
</nav>
<main>
<div class="stage">
<span class="in-stock">In Stock</span>
<div class="plc"><span class="led"></span><span class="led2"></span><div class="terms"></div></div>
</div>
<div class="info">
<p class="breadcrumb">PLCs & Controllers / Micro PLCs / DL06 Series</p>
<h1>DL06 Micro PLC, 20-Point, 24VDC Input/Output</h1>
<p class="partno">Part No. D0-06DR · In Stock — Ships Today</p>
<table class="specs">
<tr><td class="k">I/O Points</td><td>20 (12 in / 8 relay out)</td></tr>
<tr><td class="k">Power Input</td><td>100-240VAC</td></tr>
<tr><td class="k">Programming</td><td>DirectSOFT6, free download</td></tr>
<tr><td class="k">Warranty</td><td>1-year replacement</td></tr>
</table>
<div class="price-row"><span class="price">$189.00</span><span class="list-price">$249.00</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Download Datasheet</div>
</div>
<div class="qty-note">Volume pricing available — 10+ units qualify for tiered discount at checkout.</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f2f2f2; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f2f2f2; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #4990e2; color: #ffffff;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #f2f2f2; color: #121212;
border: 1px solid #4990e2; border-radius: 6px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f2f2f2; color: #121212;
border: 1px solid #bababa; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ad1e36; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{
width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;
background:#f2f2f2;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
color:#242833;
}
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:60px;background:#ffffff;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.logo{font-weight:700;font-size:18px;color:#121212;letter-spacing:-0.3px;}
.logo span{color:#4990e2;}
.navlinks{display:flex;gap:22px;}
.navlinks span{font-size:13px;font-weight:600;color:#242833;text-transform:uppercase;letter-spacing:0.3px;}
.navlinks span.active{color:#4990e2;}
.cartbtn{background:#4990e2;color:#fff;font-size:13px;font-weight:600;padding:9px 18px;border-radius:6px;}
.hero{padding:28px 24px;display:flex;gap:26px;align-items:center;}
.heroText{flex:1.1;}
.heroText .kick{color:#6b7280;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;}
.heroText h1{font-size:34px;font-weight:700;letter-spacing:-0.5px;line-height:1.1;margin:0 0 10px;color:#121212;}
.heroText p{font-size:14px;color:#6b7280;margin:0 0 16px;max-width:400px;}
.heroBtn{display:inline-block;background:#4990e2;color:#fff;font-size:14px;font-weight:600;padding:12px 24px;border-radius:6px;}
.heroImg{flex:1;height:150px;background:linear-gradient(160deg,#dedede,#ededed);border-radius:6px;position:relative;overflow:hidden;}
.heroImg .tent{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:120px;height:0;border-left:60px solid transparent;border-right:60px solid transparent;border-bottom:70px solid #4990e2;opacity:0.85;}
.heroImg .ground{position:absolute;bottom:0;left:0;right:0;height:16px;background:#c9c9c9;}
.section{padding:14px 24px 0;}
.sectitle{font-size:15px;font-weight:600;margin:0 0 10px;color:#121212;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#ededed;border-radius:6px;overflow:hidden;}
.photo{aspect-ratio:1/1;background:linear-gradient(150deg,#dedede,#c9c9c9);position:relative;}
.photo .pack{position:absolute;bottom:14%;left:50%;transform:translateX(-50%);width:46%;height:56%;background:#4990e2;border-radius:6px;}
.salebadge{position:absolute;top:6px;left:6px;background:#ad1e36;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 7px;border-radius:2px;}
.ctitle{font-size:13px;font-weight:600;color:#121212;padding:8px 10px 0;}
.cprice{font-size:15px;font-weight:700;color:#121212;padding:2px 10px 10px;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#242833;color:#9ca3af;font-size:11px;padding:12px 24px;display:flex;justify-content:space-between;}
.footer b{color:#fff;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Gossamer Gear<span>.</span></div>
<div class="navlinks">
<span class="active">Packs</span>
<span>Shelters</span>
<span>Apparel</span>
<span>Gear Lists</span>
</div>
<div class="cartbtn">Cart (0)</div>
</div>
<div class="hero">
<div class="heroText">
<div class="kick">Take Less. Do More.</div>
<h1>Ultralight gear built for the long trail.</h1>
<p>Every gram matters. Shelters, packs, and apparel engineered to disappear on your back.</p>
<div class="heroBtn">Shop The Mariposa</div>
</div>
<div class="heroImg"><div class="tent"></div><div class="ground"></div></div>
</div>
<div class="section">
<div class="sectitle">Trail-Tested Favorites</div>
<div class="grid">
<div class="card"><div class="photo"><div class="salebadge">Sale</div><div class="pack"></div></div>
<div class="ctitle">Mariposa 60 Pack</div><div class="cprice">$285.00</div></div>
<div class="card"><div class="photo"><div class="pack"></div></div>
<div class="ctitle">The One Tent</div><div class="cprice">$319.00</div></div>
<div class="card"><div class="photo"><div class="pack"></div></div>
<div class="ctitle">LT5 Trekking Poles</div><div class="cprice">$149.00</div></div>
<div class="card"><div class="photo"><div class="salebadge">Sale</div><div class="pack"></div></div>
<div class="ctitle">Whisper Quilt 32°</div><div class="cprice">$259.00</div></div>
</div>
</div>
<div class="footer">
<span><b>Gossamer Gear</b></span>
<span>Free shipping over $50 · Made for the trail</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #050505;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #050505;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.25; margin: 0; color: #050505; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #008fa1; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #008fa1;
border: 1px solid #008fa1; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #050505;
border: 1px solid #c0c0c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #a70100; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#050505; box-sizing:border-box;
font-family:'Arimo',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:80px; display:flex; align-items:center; justify-content:center; position:relative; }
.brand { font-family:'Fraunces',Georgia,serif; font-size:20px; font-weight:600; }
.cart-dot { position:absolute; right:34px; width:34px; height:34px; border-radius:9999px; border:1px solid #dedede;
display:flex; align-items:center; justify-content:center; font-size:12px; }
.cart-dot::after { content:''; position:absolute; top:-2px; right:-2px; width:9px; height:9px; border-radius:9999px; background:#008fa1; }
main { display:flex; height:calc(640px - 80px - 44px); }
.gallery { width:400px; background:#fafafa; display:flex; align-items:center; justify-content:center; position:relative; }
.panel { width:180px; height:120px; border-radius:12px; background:linear-gradient(135deg,#008f9d,#00343b);
display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,1fr); gap:4px; padding:10px; }
.cell { background:rgba(255,255,255,0.12); border-radius:3px; }
.sale { position:absolute; top:22px; left:22px; background:#a70100; color:#fff; font-size:11px; font-weight:600; padding:4px 12px; border-radius:9999px; }
.info { flex:1; padding:30px 34px; display:flex; flex-direction:column; gap:14px; }
.cat { font-size:12px; color:#808080; }
h1 { font-family:'Fraunces',Georgia,serif; font-size:24px; font-weight:600; margin:0; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:600; }
.was { font-size:13px; color:#a70100; text-decoration:line-through; }
.desc { font-size:13px; color:#414141; line-height:1.55; max-width:340px; }
.row { display:flex; gap:20px; font-size:12px; color:#414141; }
.row b { display:block; font-size:15px; color:#050505; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#008fa1; color:#fff; border:none; border-radius:9999px; padding:15px; font-size:14px; font-weight:600; height:48px; }
.btn-sec { background:transparent; color:#008fa1; border:1.5px solid #008fa1; border-radius:9999px; padding:15px 20px; font-size:13px; font-weight:600; height:48px; }
footer { padding:12px 34px; font-size:11px; color:#414141; text-align:center; }
</style></head>
<body>
<nav><div class="brand">Biolite Cell Pho 2</div><div class="cart-dot">2</div></nav>
<main>
<div class="gallery"><span class="sale">Sale</span>
<div class="panel"><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
<div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
<div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div></div>
</div>
<div class="info">
<span class="cat">Solar Panel + Power Bank</span>
<h1>SolarPanel 10+ Charging Kit</h1>
<div class="price-row"><span class="price">$99.95</span><span class="was">$119.95</span></div>
<p class="desc">Foldable 10W solar panel paired with a 3,200mAh power pack — enough for two full phone charges off-grid.</p>
<div class="row">
<div><b>10W</b>Solar output</div>
<div><b>3,200mAh</b>Battery</div>
<div><b>310g</b>Weight</div>
</div>
<div class="btn-row">
<button class="btn-add">Add to Cart</button>
<button class="btn-sec">View Details</button>
</div>
</div>
</main>
<footer>© Biolite Cell Pho 2 · Off-grid power, made simple</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdfdfd; color: #2c2d33;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdfdfd; color: #2c2d33;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.35; margin: 0; color: #2c2d33; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #5d7380; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #c90000; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #fdfdfd; color: #2c2d33;
border: 1px solid #c90000; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fdfdfd; color: #2c2d33;
border: 1px solid #c9c9ca; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5d7380; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c90000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Eureka Entertainment — Home</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#fdfdfd; color:#43454b;
font-family:'Helvetica Neue',Arial,BlinkMacSystemFont,-apple-system,sans-serif;
}
*{box-sizing:border-box;}
.page{width:960px;height:640px;display:flex;flex-direction:column;}
header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dadada;}
.logo{font-size:19px;font-weight:700;color:#2c2d33;letter-spacing:0.3px;}
.logo span{color:#c90000;}
nav{display:flex;gap:22px;}
nav a{font-size:12px;font-weight:600;color:#43454b;}
.nav-cta{background:#c90000;color:#fff;padding:8px 18px;border-radius:8px;font-size:12px;font-weight:600;}
.hero{display:flex;padding:26px 32px;gap:24px;}
.hero-copy{flex:1;}
.hero-copy .kicker{font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#c90000;margin-bottom:8px;}
.hero-copy h1{font-size:28px;font-weight:700;color:#2c2d33;margin:0 0 10px;line-height:1.25;}
.hero-copy p{font-size:13px;color:#5d7380;max-width:340px;margin:0 0 16px;line-height:1.6;}
.hero-cta{display:inline-block;background:#c90000;color:#fff;padding:11px 22px;border-radius:8px;font-size:12px;font-weight:600;}
.poster{width:150px;height:200px;background:linear-gradient(160deg,#2c2d33,#111111);border-radius:4px;position:relative;box-shadow:0 8px 20px rgba(0,0,0,0.2);}
.poster::after{content:'MASTERS OF CINEMA';position:absolute;bottom:14px;left:12px;right:12px;font-size:9px;letter-spacing:1px;color:#c90000;font-weight:700;}
.poster::before{content:'';position:absolute;left:18px;right:18px;top:20px;height:2px;background:#c90000;}
.poster-row{display:flex;gap:14px;}
.poster2,.poster3{width:110px;height:170px;background:linear-gradient(160deg,#3a3a3a,#1a1a1a);border-radius:4px;align-self:flex-end;}
main{flex:1;padding:16px 32px 0;}
.row-head{display:flex;justify-content:space-between;margin-bottom:12px;}
.row-head h2{font-size:16px;margin:0;color:#2c2d33;}
.row-head span{font-size:11px;color:#c90000;font-weight:600;}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.card{border:1px solid #dadada;border-radius:8px;overflow:hidden;background:#fff;}
.thumb{height:74px;background:linear-gradient(160deg,#3a3a3a,#161616);position:relative;}
.badge{position:absolute;top:5px;left:5px;font-size:7px;font-weight:700;padding:2px 5px;border-radius:3px;color:#fff;text-transform:uppercase;}
.b-new{background:#1e7e34;}
.b-soon{background:#117a8b;}
.card .info{padding:8px 9px;}
.card h4{font-size:10px;margin:0 0 4px;color:#2c2d33;font-weight:600;line-height:1.3;}
.meta{font-family:'Andale Mono','Courier New',monospace;font-size:8px;color:#5d7380;margin-bottom:5px;}
.card .price{font-size:11.5px;font-weight:700;color:#2c2d33;}
footer{border-top:1px solid #dadada;padding:12px 32px;display:flex;justify-content:space-between;margin-top:14px;background:#eeeeee;}
footer span{font-size:10px;color:#5d7380;}
</style>
<div class="page">
<header>
<div class="logo">Eureka Entertainment<span>.</span></div>
<nav><a>Masters of Cinema</a><a>New Releases</a><a>Box Sets</a><a>4K UHD</a></nav>
<div class="nav-cta">Shop All Titles</div>
</header>
<div class="hero">
<div class="hero-copy">
<div class="kicker">Masters of Cinema Series</div>
<h1>Restored prints. Definitive editions.</h1>
<p>Collector's Blu-ray and 4K UHD releases of the films that built the medium — remastered from original negatives.</p>
<div class="hero-cta">Browse the Series</div>
</div>
<div class="poster-row"><div class="poster"></div><div class="poster2"></div><div class="poster3"></div></div>
</div>
<main>
<div class="row-head"><h2>New This Month</h2><span>View Catalogue →</span></div>
<div class="grid">
<div class="card"><div class="badge b-new">New</div><div class="thumb"></div><div class="info"><h4>Late Spring</h4><div class="meta">1949 · 4K UHD · 108min</div><div class="price">$34.95</div></div></div>
<div class="card"><div class="badge b-soon">Pre-Order</div><div class="thumb"></div><div class="info"><h4>The Naked Kiss</h4><div class="meta">1964 · Blu-ray · 90min</div><div class="price">$29.95</div></div></div>
<div class="card"><div class="thumb"></div><div class="info"><h4>Sansho the Bailiff</h4><div class="meta">1954 · Blu-ray · 124min</div><div class="price">$29.95</div></div></div>
<div class="card"><div class="thumb"></div><div class="info"><h4>Le Samouraï</h4><div class="meta">1967 · 4K UHD · 105min</div><div class="price">$34.95</div></div></div>
<div class="card"><div class="thumb"></div><div class="info"><h4>Ugetsu Monogatari</h4><div class="meta">1953 · Blu-ray · 96min</div><div class="price">$29.95</div></div></div>
</div>
</main>
<footer>
<span>© Eureka Entertainment — Cinema Restorations</span>
<span>Series Index · Region Info · Trade Enquiries</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: 0.3px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #cc3b3b; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #fafafa; color: #111111;
border: 1px solid #cc3b3b; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #111111;
border: 1px solid #c0c0c0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #bd0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#111111; box-sizing:border-box;
font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stencil { font-family:'Allerta Stencil','Arial Narrow',Impact,sans-serif; text-transform:uppercase; letter-spacing:0.5px; }
nav { height:56px; background:#222222; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.brand { color:#ffffff; font-size:18px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#ffffff; font-size:12px; opacity:.75; }
.navlinks span.on { color:#cc3b3b; opacity:1; }
.search { background:#fafafa; border-radius:9999px; padding:7px 18px; font-size:12px; color:#111; width:180px; }
.stage { display:flex; height:552px; }
.art { width:400px; background:#111111; position:relative; display:flex; align-items:center; justify-content:center; }
.disc { width:280px; height:280px; border-radius:50%;
background:repeating-radial-gradient(circle, #2a2a2a 0px, #2a2a2a 2px, #1a1a1a 3px, #1a1a1a 7px);
box-shadow:0 0 0 6px #050505 inset; position:relative; }
.disc::after { content:''; position:absolute; inset:0; margin:auto; width:96px; height:96px; border-radius:50%; background:#cc3b3b; }
.disc::before { content:''; position:absolute; inset:0; margin:auto; width:14px; height:14px; border-radius:50%; background:#111; z-index:2; }
.sale-tag { position:absolute; top:20px; left:20px; background:#bd0000; color:#fff; font-size:11px; padding:4px 8px; }
.info { flex:1; padding:28px 32px; display:flex; flex-direction:column; gap:14px; }
.tag-line { font-size:11px; color:#aaaaaa; }
.info h1 { font-size:26px; margin:0; line-height:1.15; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:22px; font-weight:600; }
.price-old { font-size:14px; color:#aaaaaa; text-decoration:line-through; }
.meta { display:flex; gap:8px; flex-wrap:wrap; }
.pill { border:1px solid #e1e1e1; padding:5px 12px; font-size:11px; color:#222; }
.desc { font-size:13px; color:#222222; line-height:1.55; }
.btnrow { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#cc3b3b; color:#fff; border:none; padding:12px; font-size:13px; letter-spacing:.5px; }
.btn-secondary { background:#fafafa; border:1.5px solid #111; color:#111; padding:12px 18px; font-size:13px; }
.tracklist { border-top:1px solid #e1e1e1; margin-top:2px; padding-top:10px; font-size:12px; color:#222; }
.tracklist .row { display:flex; justify-content:space-between; padding:3px 0; }
.tracklist .num { color:#aaaaaa; width:20px; }
footer { background:#040404; color:#aaaaaa; font-size:11px; height:32px;
padding:0 28px; display:flex; align-items:center; justify-content:space-between; }
</style></head>
<body>
<nav>
<p class="brand stencil">1 2 3 4 GO Records</p>
<div class="navlinks"><span>Vinyl</span><span class="on">Merch</span><span>New Arrivals</span><span>About</span></div>
<div class="search">Search stock…</div>
</nav>
<div class="stage">
<div class="art">
<span class="sale-tag stencil">Sale</span>
<div class="disc"></div>
</div>
<div class="info">
<span class="tag-line stencil">Vinyl · LP · Garage Rock</span>
<h1 class="stencil">Static Voltage — Self Titled</h1>
<div class="price-row">
<span class="price">$24.00</span>
<span class="price-old">$29.00</span>
</div>
<div class="meta">
<span class="pill">180g Pressing</span>
<span class="pill">Gatefold</span>
<span class="pill">Limited 500</span>
</div>
<p class="desc">Raw, three-chord fury cut straight to wax. Recorded live to tape in one take — no overdubs, no polish, just voltage against the needle.</p>
<div class="tracklist">
<div class="row"><span><span class="num">01</span>No Return Policy</span><span>2:41</span></div>
<div class="row"><span><span class="num">02</span>Marshall Stack Blues</span><span>3:08</span></div>
<div class="row"><span><span class="num">03</span>Zine Paper Heart</span><span>2:57</span></div>
</div>
<div class="btnrow">
<button class="btn-primary stencil">Add to Cart</button>
<button class="btn-secondary stencil">Wishlist</button>
</div>
</div>
</div>
<footer><span>© 1 2 3 4 GO Records</span><span>Shipping · Returns · Store Hours</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.1px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #112244; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #112244;
border: 1px solid #112244; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #f5f5f5; color: #222222;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#444444; font-family:'Open Sans',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:2px solid #112244;}
.logo{font-family:Montserrat,Arial,sans-serif;font-size:19px;font-weight:700;letter-spacing:-.3px;color:#112244;}
.navlinks{display:flex;gap:22px;font-family:Montserrat,Arial,sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#222222;}
.hero{height:260px;display:flex;align-items:center;padding:0 40px;background:#112244;}
.herotext{width:440px;}
.hkicker{font-family:Montserrat;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#8fa8d6;margin-bottom:12px;}
.herotext h1{font-family:Montserrat,Arial,sans-serif;font-size:32px;font-weight:700;letter-spacing:-.3px;color:#fff;margin:0 0 14px;line-height:1.25;}
.herotext p{font-size:14px;color:#c2ccdc;margin:0 0 20px;max-width:340px;}
.btn{display:inline-block;height:44px;line-height:44px;padding:0 26px;background:#fff;color:#112244;font-family:Montserrat;font-size:12px;font-weight:700;text-transform:uppercase;border-radius:6px;width:fit-content;}
.stack{position:absolute;right:100px;width:180px;height:150px;}
.sheet{position:absolute;width:150px;height:110px;border-radius:4px;}
.sh1{background:#112233;top:0;left:0;}
.sh2{background:#112244;top:8px;left:14px;}
.sh3{background:#112255;top:16px;left:28px;}
.sec{padding:22px 40px 0;position:relative;}
.sectitle{font-family:Montserrat;font-size:16px;font-weight:700;margin-bottom:5px;color:#222222;border-bottom:2px solid #112244;padding-bottom:10px;}
.grid{display:flex;gap:14px;margin-top:12px;}
.card{width:198px;border:1px solid #dddddd;border-radius:6px;padding:10px;}
.thumb{height:96px;border-radius:4px;background:#f5f5f5;}
.pname{font-size:13px;font-weight:600;color:#222222;margin-top:8px;}
.pspec{font-size:11px;color:#6b6b6b;margin-top:3px;text-transform:uppercase;letter-spacing:.3px;}
.pprice{font-size:13px;font-weight:700;color:#112244;margin-top:5px;}
</style>
<div class="nav">
<div class="logo">Legion Paper</div>
<div class="navlinks"><span>Fine Art Paper</span><span>Printmaking</span><span>Bulk Rolls</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="hkicker">Trusted By Studios Since 1979</div>
<h1>Specification data over persuasion.</h1>
<p>Catalog-precise fine art and printmaking papers for professionals.</p>
<div class="btn">Browse Catalog</div>
</div>
<div class="stack"><div class="sheet sh1"></div><div class="sheet sh2"></div><div class="sheet sh3"></div></div>
</div>
<div class="sec">
<div class="sectitle">Featured Papers</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="pname">Somerset Velvet 255gsm</div><div class="pspec">Cotton · Matte</div><div class="pprice">$4.20/sheet</div></div>
<div class="card"><div class="thumb" style="background:#eeeeee"></div><div class="pname">Hahnemuhle Photo Rag</div><div class="pspec">Bright White · Archival</div><div class="pprice">$5.85/sheet</div></div>
<div class="card"><div class="thumb" style="background:#f5f5f5"></div><div class="pname">Rives BFK Printmaking</div><div class="pspec">Natural · 280gsm</div><div class="pprice">$3.95/sheet</div></div>
<div class="card"><div class="thumb" style="background:#eeeeee"></div><div class="pname">Legion Bulk Roll 44"</div><div class="pspec">Matte · 50ft</div><div class="pprice">$189.00/roll</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1b1c1f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #1b1c1f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #040405; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1b1c1f; box-sizing:border-box;
font-family:"Pretendard", -apple-system, "system-ui", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #dadbdf; }
.brand { font-size:18px; font-weight:700; color:#000000; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#1b1c1f; }
.util-btn { background:#ffffff; color:#000000; border:none; border-radius:16px; height:40px; padding:0 18px;
font-size:14px; font-weight:700; box-shadow:0 0 8px rgba(0,0,0,0.1); }
.hero { padding:20px 32px 12px; }
.hero h2 { font-size:32px; font-weight:700; line-height:1.19; margin:0 0 12px; color:#1b1c1f; }
.search-bar { background:#ffffff; border-radius:16px; box-shadow:0 0 8px rgba(0,0,0,0.1); height:64px;
display:flex; align-items:center; gap:0; padding:0 6px; }
.seg { flex:1; padding:0 16px; border-right:1px solid #dadbdf; display:flex; flex-direction:column; justify-content:center; height:44px; }
.seg:last-of-type { border-right:none; }
.seg .lbl { font-size:11px; color:#6e6f73; }
.seg .val { font-size:18px; font-weight:700; }
.search-go { background:#000000; color:#ffffff; border:none; border-radius:9999px; padding:4px 16px; height:52px; width:80px; font-size:16px; font-weight:700; margin-left:8px; }
.chiprow { display:flex; gap:10px; padding:16px 32px 0; }
.chip { background:#f7f8fb; color:#1b1c1f; border-radius:9999px; padding:2px 12px 2px 6px; font-size:12px; height:26px; display:flex; align-items:center; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px 32px 0; }
.card { background:#ffffff; border:1px solid #dadbdf; border-radius:16px; overflow:hidden; }
.cover { height:100px; }
.cbody { padding:10px 12px; display:flex; flex-direction:column; gap:4px; }
.cbody .name { font-size:13px; font-weight:700; color:#1b1c1f; }
.cbody .loc { font-size:11px; color:#6e6f73; }
.cbody .price { font-size:14px; font-weight:700; color:#000000; margin-top:2px; }
footer { position:absolute; bottom:0; left:0; right:0; padding:12px 32px; border-top:1px solid #dadbdf; font-size:11px; color:#6e6f73; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<p class="brand">Yanolja</p>
<div class="navlinks"><span>Stay</span><span>Leisure</span><span>Flight</span><span>Culture</span></div>
<button class="util-btn">Log In</button>
</nav>
<section class="hero">
<h2>Where do you want to stay?</h2>
<div class="search-bar">
<div class="seg"><span class="lbl">Destination</span><span class="val">Busan</span></div>
<div class="seg"><span class="lbl">Check-in — Check-out</span><span class="val">Sep 12 — Sep 14</span></div>
<div class="seg"><span class="lbl">Guests</span><span class="val">2 Adults</span></div>
<button class="search-go">Search</button>
</div>
</section>
<div class="chiprow">
<span class="chip">Hotel</span>
<span class="chip">Pension</span>
<span class="chip">Pool Villa</span>
<span class="chip">Leisure Ticket</span>
</div>
<div class="grid">
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#dce9f7,#a9c9ec);"></div><div class="cbody"><span class="name">Haeundae Bay Hotel</span><span class="loc">Busan · Haeundae</span><span class="price">₩128,000</span></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#e5e0d5,#c9bfa3);"></div><div class="cbody"><span class="name">Jeju Ocean Pension</span><span class="loc">Jeju · Aewol</span><span class="price">₩215,000</span></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#dde7dc,#a9c5a3);"></div><div class="cbody"><span class="name">Gapyeong Forest Villa</span><span class="loc">Gapyeong</span><span class="price">₩340,000</span></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#e6dee6,#c3a9cb);"></div><div class="cbody"><span class="name">Seoul City View Suites</span><span class="loc">Seoul · Jongno</span><span class="price">₩98,000</span></div></div>
</div>
<footer>
<span>© Yanolja</span>
<span>Yanolja · Stay · Leisure · Flight · Culture</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5200ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5200ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ac87fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3cffd0; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5200ff; color: #3cffd0;
border: 1px solid #3cffd0; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5200ff; color: #f5f5f5;
border: 1px solid #6c27fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ac87fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4e29f7; color: #3cffd0;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#131313; color:#ffffff; box-sizing:border-box;
font-family:"Helvetica", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:900; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:600; }
.navlinks span:hover, .navlinks span.on { color:#3cffd0; }
.sub-btn { background:#5200ff; color:#fff; border-radius:3px; padding:8px 16px; font-size:12px; font-weight:600; }
.grid { display:grid; grid-template-columns:1.4fr 1fr; gap:12px; padding:8px 40px 0; }
.tile-main { background:#5200ff; border-radius:3px; padding:22px; display:flex; flex-direction:column;
justify-content:flex-end; height:300px; }
.tile-main .kicker { font-family:monospace; font-size:11px; letter-spacing:0.06em; color:#fff; opacity:0.85; }
.tile-main h1 { font-size:44px; font-weight:900; line-height:0.98; letter-spacing:-0.02em; margin:8px 0; }
.side { display:flex; flex-direction:column; gap:12px; }
.tile-sm { flex:1; border-radius:3px; padding:16px; display:flex; flex-direction:column; justify-content:flex-end; }
.ts1 { background:#3cffd0; color:#131313; }
.ts2 { background:#2d2d2d; }
.tile-sm .kicker { font-family:monospace; font-size:10px; letter-spacing:0.06em; opacity:0.8; }
.tile-sm h3 { font-size:20px; font-weight:900; margin:6px 0 0; line-height:1.05; }
.rail { display:flex; gap:20px; padding:14px 40px 0; }
.story { display:flex; align-items:center; gap:10px; }
.story .dot { width:8px; height:8px; border-radius:50%; background:#3cffd0; }
.story .txt { font-size:13px; font-weight:700; }
.story .time { font-family:monospace; font-size:10px; color:#949494; letter-spacing:0.06em; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #313131; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#949494; }
</style></head>
<body>
<nav>
<div class="brand">The Verge</div>
<div class="navlinks"><span class="on">Tech</span><span>Science</span><span>Reviews</span><span>Culture</span></div>
<div class="sub-btn">Subscribe</div>
</nav>
<div class="grid">
<div class="tile-main">
<span class="kicker">EXCLUSIVE</span>
<h1>The interface between the present and the future</h1>
</div>
<div class="side">
<div class="tile-sm ts1"><span class="kicker">REVIEW</span><h3>We tried the new AI notebook — verdict inside</h3></div>
<div class="tile-sm ts2"><span class="kicker">TECH</span><h3>Chargers are getting weird again</h3></div>
</div>
</div>
<div class="rail">
<div class="story"><span class="dot"></span><span class="txt">This foldable finally makes sense</span><span class="time">2H AGO</span></div>
<div class="story"><span class="dot"></span><span class="txt">A quick note on the new streaming price hikes</span><span class="time">4H AGO</span></div>
</div>
<footer><span>© The Verge</span><span>The Verge · Reviews · Newsletters</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 300; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #474746; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.8px; background: #fdc79e; color: #1a1a1a;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.8px; background: #ffffff; color: #1a1a1a;
border: 1px solid #fdc79e; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f5f5f3; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #474746; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.2px; background: #f0eee9; color: #474746;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,'Helvetica Neue',Arial,sans-serif; color:#222222; }
*{box-sizing:border-box;}
.nav{position:absolute; top:0; left:0; width:960px; height:64px; background:#fff; border-bottom:1px solid #eae9e7; display:flex; align-items:center; justify-content:space-between; padding:0 40px;}
.logo{font-family:'Portrait Light Web',Georgia,serif; font-size:18px; font-weight:300; letter-spacing:2px; text-transform:uppercase; color:#1a1a1a;}
.navlinks{display:flex; gap:24px; font-size:14px; color:#1a1a1a;}
.hero{position:absolute; top:64px; left:0; width:960px; height:270px; background:#eae9e7; display:flex; align-items:center; padding:0 50px;}
.heroText{width:460px;}
.headline{font-family:'Portrait Light Web',Georgia,serif; font-size:48px; font-weight:300; line-height:1.1; margin-bottom:16px; color:#1a1a1a;}
.sub{font-size:14px; color:#474746; margin-bottom:20px; width:400px;}
.btn{display:inline-block; background:#fdc79e; color:#1a1a1a; font-size:13px; font-weight:500; letter-spacing:0.8px; text-transform:uppercase; padding:14px 28px;}
.frame{position:absolute; right:80px; top:35px; width:180px; height:220px; background:#fff; border:8px solid #1a1a1a; box-shadow:0 8px 24px rgba(0,0,0,0.15);}
.frameArt{width:100%; height:100%; background:linear-gradient(135deg,#70a345,#b64646 60%,#e2bf24);}
.tags{position:absolute; top:350px; left:40px; width:880px; height:40px; display:flex; gap:10px;}
.tag{font-size:10px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase; padding:5px 10px; color:#1a1a1a;}
.t1{background:#fdc79e;} .t2{background:#70a345; color:#fff;} .t3{background:#b64646; color:#fff;} .t4{background:#708b9e; color:#fff;} .t5{background:#addbb3;} .t6{background:#e2bf24;}
.sec{position:absolute; top:404px; left:0; width:960px; height:236px; padding:20px 40px;}
.secTitle{font-family:'Portrait Light Web',Georgia,serif; font-size:24px; font-weight:300; margin-bottom:16px; color:#1a1a1a;}
.grid{display:flex; gap:16px;}
.card{width:216px; position:relative;}
.cardImg{width:100%; height:130px; background:#f0eee9;}
.artFill{width:100%; height:100%;}
.cardTitle{font-size:13px; font-weight:500; margin-top:10px;}
.cardArtist{font-family:'Portrait Light Web',Georgia,serif; font-size:11px; letter-spacing:0.8px; text-transform:uppercase; color:#474746; margin-top:2px;}
.cardPrice{font-size:15px; font-weight:500; margin-top:4px;}
</style>
<div class="nav">
<div class="logo">King And Mcgaw</div>
<div class="navlinks"><span>Photography</span><span>Abstract</span><span>Mid-Century</span><span>Artists</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">Fine Art Prints,<br>Museum Framed</div>
<div class="sub">Curated prints from a century of photography and painting, framed like a gallery wall.</div>
<div class="btn">Shop Prints</div>
</div>
<div class="frame"><div class="frameArt"></div></div>
</div>
<div class="tags">
<div class="tag t1">Apricot</div><div class="tag t2">Sage</div><div class="tag t3">Brick</div><div class="tag t4">Slate</div><div class="tag t5">Mint</div><div class="tag t6">Gold</div>
</div>
<div class="sec">
<div class="secTitle">Featured Artists</div>
<div class="grid">
<div class="card"><div class="cardImg"><div class="artFill" style="background:linear-gradient(135deg,#70a345,#3a5522)"></div></div><div class="cardTitle">Coastal Study No. 4</div><div class="cardArtist">Elena Vance</div><div class="cardPrice">$85</div></div>
<div class="card"><div class="cardImg"><div class="artFill" style="background:linear-gradient(135deg,#b64646,#6e2222)"></div></div><div class="cardTitle">Red Interior</div><div class="cardArtist">Marcus Reyes</div><div class="cardPrice">$120</div></div>
<div class="card"><div class="cardImg"><div class="artFill" style="background:linear-gradient(135deg,#708b9e,#3d4f5c)"></div></div><div class="cardTitle">Harbor at Dusk</div><div class="cardArtist">Anya Kowalski</div><div class="cardPrice">$95</div></div>
<div class="card"><div class="cardImg"><div class="artFill" style="background:linear-gradient(135deg,#e2bf24,#a6890f)"></div></div><div class="cardTitle">Golden Field</div><div class="cardArtist">Thomas Ridge</div><div class="cardPrice">$110</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #da3743; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #da3743;
border: 1px solid #da3743; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f9dfe1; color: #da3743;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1A1C; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { height:190px; background:linear-gradient(140deg,#3a2620,#6b4438 60%,#c99a6b); position:relative; }
.hero .navcirc { position:absolute; top:14px; width:32px; height:32px; border-radius:50%;
background:rgba(20,20,20,0.4); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; }
.hero .back { left:18px; }
.hero .heart { right:60px; }
.hero .share { right:18px; }
.content { padding:14px 28px 0; }
.name-row { display:flex; align-items:center; justify-content:space-between; }
.rname { font-size:25px; font-weight:800; letter-spacing:-0.4px; margin:0; }
.rating { display:flex; align-items:center; gap:6px; font-size:13px; color:#6B6B70; margin-top:4px; }
.stars { color:#E8A33D; letter-spacing:1px; font-size:13px; }
.meta { font-size:13.5px; color:#6B6B70; margin:6px 0 8px; }
.proof { display:inline-flex; align-items:center; gap:5px; background:rgba(47,168,106,0.16); color:#2FA86A;
border-radius:999px; padding:5px 12px; font-size:11px; font-weight:700; margin-bottom:12px; }
.selecttime { font-size:17px; font-weight:700; margin:6px 0 3px; }
.context { font-size:12.5px; color:#6B6B70; margin-bottom:10px; }
.slots { display:flex; gap:9px; margin-bottom:14px; }
.slot { width:78px; height:52px; border-radius:10px; background:#F6F6F7; border:1px solid #E4E4E7;
display:flex; flex-direction:column; align-items:center; justify-content:center; }
.slot .t { font-size:14px; font-weight:700; }
.slot .pts { font-size:9px; font-weight:700; color:#1F8A8A; margin-top:2px; }
.slot.sel { background:#DA3743; border:none; }
.slot.sel .t { color:#fff; }
.slot.sel .pts { color:rgba(255,255,255,0.85); }
.paramrow { display:flex; gap:10px; margin-bottom:16px; }
.paramchip { display:flex; align-items:center; gap:6px; background:#F6F6F7; border:1px solid #E4E4E7;
border-radius:999px; padding:8px 16px; font-size:13px; font-weight:600; }
.divider { border-top:0.5px solid #E4E4E7; margin:10px 0; }
.rec-title { font-size:15px; font-weight:700; margin:8px 0; }
.reccard { display:flex; gap:12px; margin-bottom:10px; }
.reccard .thumb { width:64px; height:64px; border-radius:14px; background:linear-gradient(135deg,#e8c9a0,#a06a3f); flex-shrink:0; }
.reccard .nm { font-size:14px; font-weight:700; }
.reccard .mt { font-size:12px; color:#6B6B70; }
.reccard .mini-slots { display:flex; gap:5px; margin-top:4px; }
.reccard .mslot { font-size:10px; font-weight:700; padding:3px 7px; border-radius:6px; background:#F6F6F7; border:1px solid #E4E4E7; }
.sticky { position:absolute; left:0; right:0; bottom:0; padding:12px 28px 16px; background:#FFFFFF;
box-shadow:0 -2px 16px rgba(0,0,0,0.10); }
.reservebtn { width:100%; height:50px; border-radius:999px; background:#DA3743; color:#fff;
display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; }
</style></head>
<body style="position:relative;">
<div class="hero">
<div class="navcirc back">‹</div>
<div class="navcirc heart">♡</div>
<div class="navcirc share">↗</div>
</div>
<div class="content">
<div class="name-row">
<h1 class="rname">OpenTable (iOS)</h1>
</div>
<div class="rating"><span class="stars">★★★★★</span> 4.7 <span style="color:#9A9A9F;">(412)</span></div>
<div class="meta">Steakhouse · $$$$ · Downtown</div>
<div class="proof">🔥 Booked 38 times today</div>
<div class="selecttime">Select a time</div>
<div class="context">Tonight · Wed May 21 · Party of 2</div>
<div class="slots">
<div class="slot"><span class="t">6:45</span></div>
<div class="slot sel"><span class="t">7:00</span></div>
<div class="slot"><span class="t">7:15</span><span class="pts">+1,000</span></div>
<div class="slot"><span class="t">7:30</span></div>
<div class="slot"><span class="t">8:15</span><span class="pts">+1,000</span></div>
</div>
<div class="paramrow">
<div class="paramchip">👤 2 people</div>
<div class="paramchip">📅 May 21</div>
</div>
<div class="divider"></div>
<div class="rec-title">Recently viewed</div>
<div class="reccard">
<div class="thumb"></div>
<div><div class="nm">Casa Lumen</div><div class="mt">Italian · $$$ · Riverside</div>
<div class="mini-slots"><span class="mslot">6:30</span><span class="mslot">7:45</span><span class="mslot">8:00</span></div></div>
</div>
</div>
<div class="sticky"><div class="reservebtn">Reserve for 7:00 PM</div></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7234e0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7234e0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ba9eec; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #8243f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7234e0; color: #ffffff;
border: 1px solid #8243f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7234e0; color: #f5f5f5;
border: 1px solid #8753e3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ba9eec; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7536e3; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0f1011; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.hero { position:relative; height:270px; background:
radial-gradient(600px 300px at 80% 0%, rgba(114,52,224,0.55), transparent 60%),
linear-gradient(120deg, #1b1024 0%, #241536 45%, #33204a 100%); overflow:hidden; }
.hero::before { content:''; position:absolute; right:-60px; top:-60px; width:340px; height:340px; border-radius:50%;
background:radial-gradient(circle, rgba(130,67,242,0.55), transparent 70%); }
.hero::after { content:''; position:absolute; left:40px; bottom:-90px; width:260px; height:260px; border-radius:24px;
background:rgba(255,255,255,0.05); transform:rotate(18deg); }
nav { position:relative; z-index:3; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.brand { color:#fff; font-size:18px; font-weight:700; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:24px; }
.navlinks span { color:rgba(255,255,255,0.65); font-size:14px; font-weight:500; }
.navlinks span.on { color:#fff; font-weight:700; }
.ctrl { width:36px; height:36px; border-radius:9999px; background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.25); }
.herotext { position:relative; z-index:3; padding:26px 32px 0; max-width:520px; }
.kicker { color:#c9a9ff; font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:10px; }
.hero h1 { color:#fff; font-size:40px; font-weight:700; line-height:1.15; margin:0 0 14px; letter-spacing:-0.5px; }
.cta-row { display:flex; gap:10px; }
.btn-purple { background:#7234e0; color:#fff; border-radius:6px; padding:0 18px; height:40px; font-size:14px; font-weight:500;
display:flex; align-items:center; }
.btn-ghost { background:rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.3); border-radius:6px;
padding:0 18px; height:40px; font-size:14px; font-weight:500; display:flex; align-items:center; }
.body { position:absolute; top:270px; left:0; right:0; bottom:0; background:#ffffff; padding:20px 32px; }
.section-title { font-size:20px; font-weight:700; margin:0 0 4px; color:#0f1011; }
.section-sub { font-size:13px; color:#62626a; margin:0 0 14px; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.card { background:#ffffff; border:1px solid #f2f2f3; border-radius:16px; overflow:hidden; }
.art { height:96px; background:
linear-gradient(135deg, rgba(114,52,224,0.22), rgba(29,75,153,0.14));
position:relative; }
.art::after { content:''; position:absolute; right:10px; bottom:-14px; width:60px; height:60px; border-radius:14px;
background:rgba(114,52,224,0.35); transform:rotate(20deg); }
.cinfo { padding:10px 12px 12px; }
.ctitle { font-size:14px; font-weight:700; color:#0f1011; margin-bottom:4px; }
.cgenre { font-size:11px; color:#888890; }
.badge { display:inline-block; margin-top:6px; background:#f1415e; color:#fff; font-size:10px; font-weight:500;
border-radius:6px; padding:1px 7px; }
</style></head>
<body>
<div class="hero">
<nav>
<span class="brand">NCSOFT</span>
<div class="navlinks"><span class="on">Games</span><span>Play</span><span>News</span><span>Company</span></div>
<span class="ctrl"></span>
</nav>
<div class="herotext">
<div class="kicker">Now Pre-registering</div>
<h1>Connected through joy.</h1>
<div class="cta-row">
<span class="btn-purple">Pre-register</span>
<span class="btn-ghost">Watch trailer</span>
</div>
</div>
</div>
<div class="body">
<div class="section-title">MMORPG</div>
<div class="section-sub">Titles grouped by genre — updated this week</div>
<div class="grid">
<div class="card"><div class="art"></div><div class="cinfo"><div class="ctitle">Throne Beyond</div><div class="cgenre">MMORPG · PC / Console</div><span class="badge">60% off</span></div></div>
<div class="card"><div class="art"></div><div class="cinfo"><div class="ctitle">Blade Requiem</div><div class="cgenre">Action RPG · PC</div></div></div>
<div class="card"><div class="art"></div><div class="cinfo"><div class="ctitle">Sky Legion</div><div class="cgenre">MMORPG · Mobile</div></div></div>
<div class="card"><div class="art"></div><div class="cinfo"><div class="ctitle">Aion Origins</div><div class="cgenre">MMORPG · PC</div></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #e87722; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #ffffff; color: #313131;
border: 1px solid #e87722; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.27; letter-spacing: 0.5px; background: #f5f5f5; color: #767676;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Formaspace Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#313131; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
.nav { background:#313131; height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.logo { color:#fff; font-weight:700; font-size:19px; }
.navlinks { display:flex; gap:24px; color:#d9d9d9; font-size:13px; font-weight:600; }
.navcta { background:#e87722; color:#fff; font-weight:700; font-size:12.5px; padding:9px 18px; border-radius:4px; }
.hero { display:flex; padding:36px 40px; gap:36px; align-items:center; }
.hero-copy { flex:1.1; }
.hero h1 { font-size:32px; font-weight:700; color:#313131; letter-spacing:-.5px; line-height:1.2; margin:0 0 14px; }
.hero p { font-size:14.5px; color:#4a4a4a; line-height:1.6; max-width:420px; margin:0 0 20px; }
.btn-primary { background:#e87722; color:#fff; font-weight:700; font-size:14px; padding:11px 22px; border-radius:4px; display:inline-block; }
.hero-visual { flex:1; height:220px; background:#f5f5f5; border:1px solid #d9d9d9; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.bench { width:220px; height:120px; position:relative; }
.bench .top { width:220px; height:16px; background:#313131; border-radius:2px; }
.bench .leg { position:absolute; bottom:0; width:12px; height:90px; background:#767676; }
.bench .leg1 { left:10px; } .bench .leg2 { right:10px; }
.bench .drawer { position:absolute; top:20px; left:30px; width:160px; height:34px; background:#e87722; border-radius:2px; }
.strip { display:flex; background:#f5f5f5; border-top:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9; }
.strip div { flex:1; text-align:center; padding:12px; font-size:11.5px; font-weight:700; color:#313131; text-transform:uppercase; letter-spacing:.4px; border-right:1px solid #d9d9d9; }
.strip div:last-child { border-right:none; }
.body-split { flex:1; display:flex; }
.sidebar { width:200px; background:#fff; border-right:1px solid #d9d9d9; padding:18px; font-size:12px; }
.sidebar h4 { font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:#313131; margin:0 0 10px; border-bottom:2px solid #e87722; padding-bottom:8px; }
.facet { display:flex; justify-content:space-between; padding:6px 0; color:#767676; border-bottom:1px solid #eeeeee; }
.grid { flex:1; padding:18px 22px; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.card { border:1px solid #d9d9d9; border-radius:8px; padding:14px; display:flex; gap:14px; }
.card .ph { width:90px; height:70px; background:#f5f5f5; border-radius:4px; flex-shrink:0; position:relative; }
.card .ph .strut { position:absolute; bottom:0; left:14px; width:6px; height:60px; background:#313131; }
.card .ph .strut2 { position:absolute; bottom:0; right:14px; width:6px; height:60px; background:#313131; }
.card .ph .top2 { position:absolute; top:8px; left:8px; right:8px; height:10px; background:#e87722; border-radius:2px; }
.card .info .name { font-weight:700; font-size:13.5px; margin-bottom:3px; }
.card .info .desc { font-size:11px; color:#767676; margin-bottom:8px; }
.card .info .price { font-weight:700; font-size:14px; color:#313131; }
.quote { color:#e87722; font-size:11px; font-weight:700; margin-top:6px; }
</style>
<div class="page">
<div class="nav">
<div class="logo">Formaspace</div>
<div class="navlinks"><span>Lab Furniture</span><span>Workbenches</span><span>Configurator</span><span>Industries</span></div>
<div class="navcta">Request Quote</div>
</div>
<div class="hero">
<div class="hero-copy">
<h1>Configurable furniture for the assembly line, not the showroom.</h1>
<p>Modular workbenches and lab casework specified for aerospace assembly, university chemistry labs, and warehouse operations — load ratings first, aspiration later.</p>
<div class="btn-primary">Start Configurator</div>
</div>
<div class="hero-visual"><div class="bench"><div class="top"></div><div class="drawer"></div><div class="leg leg1"></div><div class="leg leg2"></div></div></div>
</div>
<div class="strip"><div>Aerospace-Grade Steel</div><div>Custom Load Ratings</div><div>Made in USA</div><div>Lifetime Warranty</div></div>
<div class="body-split">
<div class="sidebar">
<h4>Filter by Industry</h4>
<div class="facet">Aerospace</div>
<div class="facet">Electronics Mfg</div>
<div class="facet">University Lab</div>
<div class="facet">Warehouse</div>
<h4 style="margin-top:16px;">Surface Material</h4>
<div class="facet">Stainless Steel</div>
<div class="facet">ESD Laminate</div>
<div class="facet">Butcher Block</div>
</div>
<div class="grid">
<div class="card"><div class="ph"><div class="top2"></div><div class="strut"></div><div class="strut2"></div></div><div class="info"><div class="name">TearDrop Workbench</div><div class="desc">Adjustable height · ESD-safe</div><div class="price">$2,140.00</div><div class="quote">Add to Quote →</div></div></div>
<div class="card"><div class="ph"><div class="top2"></div><div class="strut"></div><div class="strut2"></div></div><div class="info"><div class="name">Fusion Lab Bench</div><div class="desc">Stainless top · Modular</div><div class="price">$3,480.00</div><div class="quote">Add to Quote →</div></div></div>
<div class="card"><div class="ph"><div class="top2"></div><div class="strut"></div><div class="strut2"></div></div><div class="info"><div class="name">Moduline Cart</div><div class="desc">Mobile · 1,000 lb capacity</div><div class="price">$1,120.00</div><div class="quote">Add to Quote →</div></div></div>
<div class="card"><div class="ph"><div class="top2"></div><div class="strut"></div><div class="strut2"></div></div><div class="info"><div class="name">CleanTop Chem Bench</div><div class="desc">Epoxy resin surface</div><div class="price">$2,950.00</div><div class="quote">Add to Quote →</div></div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7eee3; color: #202020;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7eee3; color: #202020;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #202020; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767472; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.2px; background: #e46950; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #202020;
border: 1px solid #e46950; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #202020;
border: 1px solid #c1bab2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767472; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.4px; background: #e46950; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7eee3; color:#202020; box-sizing:border-box;
font-family:'Suisse Intl', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.announce { height:34px; background:#032033; color:#fff; display:flex; align-items:center; justify-content:center;
font-size:12px; letter-spacing:0.2px; }
nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #ddd6ce; }
.logo { font-size:18px; font-weight:600; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; color:#767472; }
.navlinks span.on { color:#202020; }
.icons { display:flex; gap:14px; font-size:14px; }
main { display:flex; height:548px; }
.shot { width:400px; position:relative; overflow:hidden; }
.shot::before { content:''; position:absolute; inset:0;
background:
radial-gradient(circle at 70% 20%, rgba(165,177,132,0.55), transparent 55%),
radial-gradient(circle at 20% 85%, rgba(66,74,46,0.5), transparent 50%),
linear-gradient(160deg, #cfd0be 0%, #a9b199 100%); }
.lifegrid { position:absolute; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.lifegrid div { height:64px; }
.lifegrid div:nth-child(1) { background:#424a2e; }
.lifegrid div:nth-child(2) { background:#af8b66; }
.lifegrid div:nth-child(3) { background:#032033; }
.info { flex:1; padding:26px 34px 0; display:flex; flex-direction:column; }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:0.4px; text-transform:uppercase; color:#864c37; margin-bottom:6px; }
.name { font-size:30px; font-weight:600; letter-spacing:-0.3px; line-height:1.15; margin:0 0 10px; }
.badgerow { display:flex; gap:8px; margin-bottom:14px; }
.mbadge { font-family:'DM Mono', 'Courier New', monospace; font-size:11px; letter-spacing:0.5px; text-transform:uppercase;
color:#767472; background:#edeadf; border-radius:4px; padding:4px 8px; }
.price { font-family:'DM Mono', 'Courier New', monospace; font-size:20px; font-weight:500; margin-bottom:16px; }
.price span { font-size:13px; color:#767472; margin-left:8px; font-family:'Suisse Intl',sans-serif; }
.spec { display:flex; gap:22px; margin-bottom:16px; padding:14px 0; border-top:1px solid #ddd6ce; border-bottom:1px solid #ddd6ce; }
.spec div { font-size:12px; color:#767472; }
.spec b { display:block; font-size:14px; color:#202020; font-weight:600; margin-bottom:2px; }
.quote { background:#ffffff; border:1px solid #ddd6ce; border-radius:12px; padding:14px 16px; margin-bottom:16px; }
.quote p { margin:0 0 8px; font-size:14px; line-height:1.5; color:#474543; }
.quote span { font-size:12px; color:#767472; }
.cta { margin-top:auto; display:flex; gap:10px; padding-bottom:22px; }
.btn-add { flex:1; background:#e46950; color:#fff; border-radius:8px; height:48px; font-size:15px; font-weight:500; letter-spacing:0.2px; }
.btn-dark { background:#202020; color:#fff; border-radius:8px; height:48px; padding:0 22px; font-size:15px; font-weight:500; white-space:nowrap; }
footer { background:#262626; color:#b6b4b4; padding:12px 36px; display:flex; justify-content:space-between;
font-size:11px; letter-spacing:0.2px; }
</style></head>
<body>
<div class="announce">Free shipping on all outdoor sectionals · Weatherproof, 5-year warranty</div>
<nav>
<div class="logo">Burrow Outdoor 2</div>
<div class="navlinks"><span>Indoor</span><span class="on">Outdoor</span><span>Office</span><span>Sale</span></div>
<div class="icons">⌕ ♡ ⬭</div>
</nav>
<main>
<div class="shot">
<div class="lifegrid"><div></div><div></div><div></div></div>
</div>
<div class="info">
<div class="eyebrow">Outdoor Collection</div>
<h1 class="name">Range Outdoor Sectional — 4pc</h1>
<div class="badgerow">
<span class="mbadge">Teak Frame</span>
<span class="mbadge">Olefin Cushion</span>
<span class="mbadge">All-Weather</span>
</div>
<div class="price">$3,195 <span>or 12 mo. financing</span></div>
<div class="spec">
<div><b>Weatherproof</b>Rain, sun, salt air</div>
<div><b>Modular</b>Reconfigure anytime</div>
<div><b>Assembly</b>Tool-free, 20 min</div>
</div>
<div class="quote">
<p>"We rearrange it every season — patio, then poolside. Still looks new after two summers."</p>
<span>— Diane R., verified owner</span>
</div>
<div class="cta">
<button class="btn-add">Add to Cart</button>
<button class="btn-dark">Build Your Set</button>
</div>
</div>
</main>
<footer>
<span>© Burrow Outdoor 2</span>
<span>Materials · Care Guide · Warranty</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #78c500; color: #000000;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #1a1a1a;
border: 1px solid #78c500; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 1px; background: #da532c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;font-family:'azo-sans-web',-apple-system,Arial,sans-serif;color:#333333;}
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #eeeeee;}
.logo{font-family:'korolev-condensed','Arial Narrow',sans-serif;font-size:22px;font-weight:700;letter-spacing:1px;color:#1a1a1a;text-transform:uppercase;}
.navlinks{display:flex;gap:26px;font-size:13px;font-weight:500;color:#333333;}
.cta-nav{padding:9px 20px;background:#78c500;color:#ffffff;font-size:12px;font-weight:700;border-radius:2px;}
.hero{height:264px;display:flex;padding:32px 40px;gap:36px;}
.hero-text{width:410px;display:flex;flex-direction:column;justify-content:center;}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:1px;color:#da532c;text-transform:uppercase;margin-bottom:10px;}
.headline{font-family:'korolev-condensed','Arial Narrow',sans-serif;font-size:46px;font-weight:700;letter-spacing:-0.3px;line-height:1.05;color:#1a1a1a;text-transform:uppercase;margin-bottom:14px;}
.sub{font-size:15px;color:#666666;line-height:1.55;width:375px;margin-bottom:20px;}
.cta{display:inline-block;height:48px;line-height:48px;padding:0 30px;background:#78c500;color:#ffffff;border-radius:2px;font-size:14px;font-weight:600;}
.hero-visual{flex:1;background:linear-gradient(180deg,#faf8f5,#f7f7f5);border-radius:2px;position:relative;}
.juicer{position:absolute;left:60px;bottom:20px;width:70px;height:130px;border-radius:4px 4px 16px 16px;background:linear-gradient(180deg,#ffffff,#e8e8e8);border:1px solid #dddddd;}
.juicer-top{position:absolute;left:70px;bottom:146px;width:50px;height:20px;border-radius:4px;background:#333333;}
.glass{position:absolute;right:80px;bottom:20px;width:56px;height:80px;border-radius:4px 4px 10px 10px;background:linear-gradient(180deg,rgba(120,197,0,0.15),rgba(120,197,0,0.75));border:2px solid #78c500;}
.veg1{position:absolute;right:150px;top:30px;width:44px;height:44px;border-radius:22px;background:#78c500;}
.veg2{position:absolute;right:190px;top:60px;width:30px;height:30px;border-radius:15px;background:#da532c;}
.section{padding:22px 40px 0 40px;display:flex;justify-content:space-between;align-items:baseline;}
.section-title{font-family:'korolev-condensed','Arial Narrow',sans-serif;font-size:26px;font-weight:700;letter-spacing:0.5px;color:#1a1a1a;text-transform:uppercase;}
.section-link{font-size:12px;font-weight:600;color:#78c500;}
.grid{display:flex;gap:24px;padding:14px 40px 0 40px;}
.card{width:204px;background:#ffffff;border:1px solid #e0e0e0;border-radius:2px;overflow:hidden;}
.swatch{height:104px;background:#faf8f5;position:relative;display:flex;align-items:center;justify-content:center;}
.swatch .jmini{width:44px;height:76px;border-radius:2px 2px 12px 12px;background:linear-gradient(180deg,#ffffff,#dddddd);border:1px solid #cccccc;}
.badge{position:absolute;left:8px;top:8px;background:#da532c;color:#fff;font-size:9px;font-weight:700;padding:3px 8px;border-radius:2px;text-transform:uppercase;}
.card-body{padding:11px 13px 14px 13px;}
.card-title{font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:6px;}
.card-price{font-size:15px;font-weight:700;color:#1a1a1a;}
</style>
<div class="nav">
<div class="logo">Hurom</div>
<div class="navlinks"><span>Slow Juicers</span><span>Blenders</span><span>Recipes</span><span>Parts</span></div>
<div class="cta-nav">Shop Now</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="eyebrow">Slow Extraction Technology</div>
<div class="headline">PRESS SLOW.<br/>DRINK FRESH.</div>
<div class="sub">Low-speed juicing that preserves nutrients, enzymes and flavor — one glass at a time.</div>
<div class="cta">Shop Juicers</div>
</div>
<div class="hero-visual">
<div class="veg1"></div>
<div class="veg2"></div>
<div class="juicer"></div>
<div class="juicer-top"></div>
<div class="glass"></div>
</div>
</div>
<div class="section"><div class="section-title">Slow Juicers</div><div class="section-link">View collection</div></div>
<div class="grid">
<div class="card">
<div class="swatch"><div class="jmini"></div><div class="badge">New</div></div>
<div class="card-body"><div class="card-title">H-AA Slow Juicer</div><div class="card-price">$599.00</div></div>
</div>
<div class="card">
<div class="swatch"><div class="jmini"></div></div>
<div class="card-body"><div class="card-title">H-AI Easy Clean</div><div class="card-price">$399.00</div></div>
</div>
<div class="card">
<div class="swatch"><div class="jmini"></div><div class="badge">Sale</div></div>
<div class="card-body"><div class="card-title">H-100 Elite</div><div class="card-price">$299.00</div></div>
</div>
<div class="card">
<div class="swatch"><div class="jmini"></div></div>
<div class="card-body"><div class="card-title">Cell Juicer Fresh</div><div class="card-price">$249.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.8; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; background: #313131; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; background: #ffffff; color: #1a1a1a;
border: 1px solid #313131; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.7; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#313131; font-family:-apple-system, 'Helvetica Neue', Arial, sans-serif; }
*{box-sizing:border-box;}
.nav{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:16px;font-weight:500;color:#1a1a1a;}
.navlinks{display:flex;gap:4px;font-size:14px;font-weight:500;letter-spacing:0.3px;text-transform:uppercase;}
.navlinks div{padding:12px 16px;color:#1a1a1a;}
.navlinks .active{color:#313131;font-weight:600;}
.hero{padding:16px 32px 0;}
.hero h1{font-size:28px;font-weight:400;line-height:1.6;margin:0 0 8px;}
.hero p{font-size:15px;color:#313131;line-height:1.7;max-width:460px;margin:0;}
.body{display:flex;gap:20px;padding:16px 32px 0;}
.pimg{width:200px;height:200px;background:#f5f5f5;border-radius:4px;flex-shrink:0;}
.info{flex:1;}
.info h2{font-size:16px;font-weight:500;margin:0 0 4px;}
.info .price{font-size:18px;margin:8px 0;}
.spectable{width:100%;border-collapse:collapse;font-size:14px;}
.spectable tr td{padding:6px 12px;}
.spectable tr:nth-child(odd) td{background:#f5f5f5;}
.spectable td:first-child{color:#6a6a6a;width:130px;}
.btn{background:#313131;color:#fff;font-size:14px;font-weight:500;padding:12px 24px;width:fit-content;margin-top:12px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#313131;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Realforce</div>
<div class="navlinks"><div class="active">Keyboards</div><div>Accessories</div><div>Support</div><div>About</div></div>
</div>
<div class="hero">
<h1>Electrostatic capacitive. Precisely engineered.</h1>
<p>A single actuation force, measured in grams. Nothing decorative — every character earns its place.</p>
</div>
<div class="body">
<div class="pimg"></div>
<div class="info">
<h2>R3 Full-Size Keyboard, 45g Uniform</h2>
<div class="price">$249.00</div>
<table class="spectable">
<tr><td>Actuation Force</td><td>45g uniform</td></tr>
<tr><td>Key Layout</td><td>104 keys, US ANSI</td></tr>
<tr><td>Connection</td><td>USB-C, wired</td></tr>
<tr><td>Switch Life</td><td>50 million keystrokes</td></tr>
</table>
<div class="btn">Add to Cart</div>
</div>
</div>
<div class="footer"><span>© Realforce Precision Keyboards</span><span>Warranty Manuals</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeede9; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeede9; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #9ca3af; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #83b579; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: transparent; color: #121212;
border: 1px solid #83b579; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #eeede9; color: #121212;
border: 1px solid #b7b6b3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ca3af; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.5px; background: #f5f5f5; color: #4d4d4d;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Noto Sans',Roboto,Arial,sans-serif; background:#eeede9; color:#4d4d4d; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e2e2e2;}
.logo{font-family:'Manuale',Georgia,serif;font-size:20px;font-weight:600;color:#121212;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#121212;}
.hero{height:250px;background:#121212;display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;}
.heroText{width:420px;z-index:1;}
.heroText h1{font-family:'Manuale',Georgia,serif;font-size:38px;font-weight:700;color:#eeede9;margin:0 0 12px;line-height:1.15;}
.heroText p{font-size:14px;color:#c9c7d2;margin:0 0 18px;}
.cta{display:inline-block;background:#83b579;color:#eeede9;font-size:13px;font-weight:600;letter-spacing:0.3px;padding:12px 26px;border-radius:8px;}
.keycaps{position:absolute;right:60px;top:65px;display:grid;grid-template-columns:repeat(6,26px);grid-gap:5px;}
.kc{width:26px;height:26px;border-radius:4px;}
.sec{padding:20px 32px 0;}
.secTitle{font-family:'Manuale',Georgia,serif;font-size:18px;color:#121212;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#f3f3f3;border-radius:4px;padding:14px;}
.thumb{height:90px;background:#e2e2e2;border-radius:4px;margin-bottom:10px;position:relative;overflow:hidden;}
.kbrow{position:absolute;left:10px;top:26px;display:grid;grid-template-columns:repeat(8,18px);grid-gap:3px;}
.kbk{width:18px;height:14px;border-radius:2px;background:#4d4d4d;}
.swrow{display:flex;gap:6px;margin-bottom:8px;}
.sw{width:16px;height:16px;border-radius:50%;border:2px solid transparent;}
.sw.active{border-color:#121212;}
.ctitle{font-size:16px;font-weight:600;color:#121212;margin-bottom:6px;}
.badge{display:inline-block;font-size:12px;font-family:'Consolas','Liberation Mono',monospace;background:#f5f5f5;border:1px solid #e2e2e2;border-radius:4px;padding:2px 7px;margin-right:5px;color:#4d4d4d;}
.cprice{font-family:'Manuale',Georgia,serif;font-size:18px;font-weight:700;color:#121212;margin-top:8px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#9ca3af;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Vortex</div>
<div class="navlinks"><span>Keyboards</span><span>Keycaps</span><span>Switches</span><span>Accessories</span></div>
</div>
<div class="hero">
<div class="heroText">
<h1>Built for Typists,<br>Colored for Collectors</h1>
<p>Mechanical keyboards and keycap sets in colorways worth showing off.</p>
<div class="cta">Shop Colorways</div>
</div>
<div class="keycaps">
<div class="kc" style="background:#83b579"></div><div class="kc" style="background:#dfb52c"></div><div class="kc" style="background:#788fe2"></div><div class="kc" style="background:#93353e"></div><div class="kc" style="background:#4d4d4f"></div><div class="kc" style="background:#eeede9"></div>
<div class="kc" style="background:#dfb52c"></div><div class="kc" style="background:#788fe2"></div><div class="kc" style="background:#93353e"></div><div class="kc" style="background:#83b579"></div><div class="kc" style="background:#eeede9"></div><div class="kc" style="background:#4d4d4f"></div>
</div>
</div>
<div class="sec">
<div class="secTitle">Featured Boards</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="kbrow"><div class="kbk"></div><div class="kbk"></div><div class="kbk"></div><div class="kbk"></div><div class="kbk"></div><div class="kbk"></div><div class="kbk"></div><div class="kbk"></div></div></div><div class="swrow"><div class="sw active" style="background:#83b579"></div><div class="sw" style="background:#dfb52c"></div><div class="sw" style="background:#93353e"></div></div><div class="ctitle">Vortex Race 3 75%</div><span class="badge">PBT</span><span class="badge">Hot-Swap</span><div class="cprice">$99.00</div></div>
<div class="card"><div class="thumb"><div class="kbrow"><div class="kbk"></div><div class="kbk"></div><div class="kbk"></div><div class="kbk"></div><div class="kbk"></div><div class="kbk"></div><div class="kbk"></div><div class="kbk"></div></div></div><div class="swrow"><div class="sw" style="background:#788fe2"></div><div class="sw active" style="background:#93353e"></div></div><div class="ctitle">Vortex Core TKL</div><span class="badge">ABS</span><span class="badge">65%</span><div class="cprice">$79.00</div></div>
<div class="card"><div class="thumb"><div class="kbrow"><div class="kbk"></div><div class="kbk"></div><div class="kbk"></div><div class="kbk"></div><div class="kbk"></div><div class="kbk"></div><div class="kbk"></div><div class="kbk"></div></div></div><div class="swrow"><div class="sw active" style="background:#dfb52c"></div></div><div class="ctitle">Vortex Pok3r Full</div><span class="badge">Cherry MX</span><div class="cprice">$119.00</div></div>
</div>
</div>
<div class="footer"><span>Products</span><span>Community</span><span>Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #333333;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #333333;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #333333; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.23; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #5aa039; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #ffffff; color: #333333;
border: 1px solid #5aa039; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 1px; background: #5aa039; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dddddd;}
.logo{font-size:19px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.country{border:1px solid #dddddd;border-radius:4px;padding:8px 14px;font-size:13px;}
.hero{height:280px;background:#2b2b2b;display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to right,rgba(0,0,0,0.6),transparent);}
.herotext{position:relative;color:#fff;width:50%;}
.hero h1{font-size:32px;font-weight:700;margin:0 0 12px;line-height:1.2;}
.hero p{font-size:14px;opacity:0.85;margin:0 0 20px;max-width:320px;}
.cta{background:#5aa039;color:#fff;font-size:16px;font-weight:600;padding:14px 32px;border-radius:8px;width:fit-content;position:relative;}
.machine{position:absolute;right:100px;top:70px;width:130px;height:140px;background:linear-gradient(160deg,#e5e5e5,#5aa039 90%);border-radius:8px;}
.label{padding:20px 40px 10px;font-size:18px;font-weight:600;}
.grid{display:flex;gap:16px;padding:0 40px;}
.card{width:200px;border:1px solid #eeeeee;border-radius:4px;padding:16px;}
.thumb{height:100px;background:#f5f5f5;border-radius:4px;margin-bottom:10px;}
.tag{display:inline-block;background:#5aa039;color:#fff;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;border-radius:4px;padding:4px 10px;margin-bottom:8px;}
.pname{font-size:16px;font-weight:600;margin-bottom:4px;}
.pdesc{font-size:13px;color:#707070;margin-bottom:10px;}
.discover{background:#5aa039;color:#fff;font-size:14px;font-weight:600;text-align:center;padding:12px;border-radius:8px;}
</style>
<div class="nav">
<div class="logo">Robot Coupe</div>
<div class="navlinks"><span>Vegetable Preparation</span><span>Cutter Mixers</span><span>Blenders</span></div>
<div class="country">🌐 United States</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Commercial food processing since 1963.</h1>
<p>Belt-driven precision built for professional kitchens that never stop.</p>
<div class="cta">Discover</div>
</div>
<div class="machine"></div>
</div>
<div class="label">Vegetable Preparation Machines</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="tag">Best Seller</div><div class="pname">CL52 Gourmet</div><div class="pdesc">Continuous-feed vegetable prep for high-volume kitchens.</div><div class="discover">Discover</div></div>
<div class="card"><div class="thumb" style="background:#f0f0f0"></div><div class="tag">New</div><div class="pname">R 301 Ultra</div><div class="pdesc">Compact cutter mixer for bowl capacities up to 4.5 qt.</div><div class="discover">Discover</div></div>
<div class="card"><div class="thumb" style="background:#f0f0f0"></div><div class="tag">Pro</div><div class="pname">Blixer 6</div><div class="pdesc">Blender-mixer for purées, soups, and emulsions.</div><div class="discover">Discover</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2c2e33;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2c2e33;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #2c2e33; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5c5f66; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #001f60; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #001f60;
border: 1px solid #001f60; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #373a40;
border: 1px solid #cacbcc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5c5f66; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c41230; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#373a40; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; gap:22px; padding:0 28px; border-bottom:1px solid #c1c2c5; }
.logo { font-size:19px; font-weight:700; color:#001f60; }
.navlink { font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:#5c5f66; }
.navlink.active { color:#001f60; border-bottom:2px solid #001f60; padding-bottom:24px; margin-bottom:-25px; }
.searchw { margin-left:auto; width:200px; height:36px; border:1px solid #a6a7ab; border-radius:8px;
display:flex; align-items:center; padding:0 12px; font-size:12px; color:#5c5f66; }
.alertbar { background:#fffaeb; color:#b54708; border:1px solid #fef0c7; margin:10px 28px 0; border-radius:8px;
padding:8px 14px; font-size:12px; }
.stage { display:flex; gap:26px; padding:16px 28px 0; }
.prod { width:220px; height:250px; flex:0 0 auto; border-radius:12px; position:relative; overflow:hidden;
background:linear-gradient(160deg,#001f60 0%,#c41230 130%); box-shadow:0 6px 18px rgba(0,31,96,.16); }
.prod::before { content:''; position:absolute; left:70px; top:40px; width:80px; height:160px; border-radius:40px;
background:rgba(255,255,255,.16); }
.ecobadge { position:absolute; top:12px; left:12px; background:#c41230; color:#fff; font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:.4px; border-radius:4px; padding:3px 8px; }
.info { flex:1; }
.kicker { font-size:12px; font-weight:700; letter-spacing:.3px; color:#c41230; text-transform:uppercase; }
h1 { font-size:24px; font-weight:700; margin:6px 0 8px; color:#2c2e33; }
.desc { font-size:14px; line-height:1.5; max-width:500px; margin-bottom:14px; }
.pricerow { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.price { font-size:22px; font-weight:700; color:#001f60; }
.btnrow { display:flex; gap:10px; }
.btn-p { background:#001f60; color:#fff; border:none; border-radius:8px; height:48px; padding:0 28px;
font-size:16px; font-weight:600; }
.btn-r { background:#c41230; color:#fff; border:none; border-radius:8px; height:48px; padding:0 22px;
font-size:16px; font-weight:600; }
.valuewrap { padding:16px 28px 0; border-top:1px solid #c1c2c5; margin-top:16px; display:flex; gap:14px; }
.valuecard { flex:1; border:1px solid #c1c2c5; border-radius:12px; padding:12px 14px; }
.valuecard .ic { width:32px; height:32px; border-radius:8px; background:#001f60; margin-bottom:8px; }
.valuecard b { font-size:13px; color:#2c2e33; display:block; margin-bottom:4px; }
.valuecard span { font-size:12px; color:#5c5f66; }
</style></head>
<body>
<nav>
<span class="logo">Clean Cult</span>
<span class="navlink active">Refills</span>
<span class="navlink">Starter Kits</span>
<span class="navlink">Our Mission</span>
<div class="searchw">Search products…</div>
</nav>
<div class="alertbar">Subscribe & save 20% on every refill — cancel anytime.</div>
<div class="stage">
<div class="prod"><span class="ecobadge">Plastic-Free</span></div>
<div class="info">
<div class="kicker">More Power. Less Plastic.</div>
<h1>Coconut-Powered Dish Soap Refill Pods</h1>
<div class="desc">A concentrated pod that dissolves in your existing refillable bottle — coconut-based surfactants that cut grease without a single-use plastic bottle behind them.</div>
<div class="pricerow"><span class="price">$14.00</span></div>
<div class="btnrow">
<button class="btn-p">Add to Cart</button>
<button class="btn-r">Shop Sale</button>
</div>
</div>
</div>
<div class="valuewrap">
<div class="valuecard"><div class="ic"></div><b>Refillable Forever</b><span>One bottle, endless refill pods.</span></div>
<div class="valuecard"><div class="ic" style="background:#c41230"></div><b>Coconut-Powered</b><span>Plant-based, biodegradable formula.</span></div>
<div class="valuecard"><div class="ic" style="background:#f79009"></div><b>Zero Plastic Waste</b><span>Pods ship in compostable paper.</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #007aff; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #007aff;
border: 1px solid #007aff; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.5px; background: #007aff; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#333333; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*, *::before, *::after { box-sizing:border-box; }
.wrap{ position:relative; width:960px; height:640px; }
.nav{ height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#ffffff; border-bottom:1px solid #dedede; }
.logo{ font-size:19px; font-weight:700; color:#121212; }
.search-pill{ font-size:12px; color:#8a8a8a; background:#f5f5f5; border-radius:999px; padding:10px 20px; width:260px; }
.navlinks{ display:flex; gap:22px; }
.navlinks span{ font-size:12px; color:#333333; }
.navlinks span.active{ color:#007aff; font-weight:700; }
.hero{ height:246px; display:flex; align-items:center; padding:0 34px; gap:28px; }
.hero-text{ width:400px; }
.kicker{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#007aff; margin-bottom:12px; }
.h1{ font-size:32px; font-weight:700; line-height:1.2; color:#121212; margin-bottom:12px; }
.sub{ font-size:14px; line-height:1.55; color:#333333; max-width:340px; margin-bottom:18px; }
.btn{ font-size:13px; font-weight:700; color:#ffffff; background:#007aff; padding:13px 24px; border-radius:8px; width:fit-content; }
.science{ flex:1; height:210px; position:relative; background:#f7fbff; border-radius:8px; }
.molecule{ position:absolute; left:190px; top:30px; width:150px; height:150px; }
.node{ position:absolute; width:26px; height:26px; border-radius:50%; background:#007aff; }
.n1{ left:0; top:60px; } .n2{ left:60px; top:0; } .n3{ left:60px; top:120px; } .n4{ left:120px; top:60px; }
.bond{ position:absolute; background:#b8dcff; height:3px; }
.bd1{ left:26px; top:70px; width:36px; transform:rotate(-30deg); }
.bd2{ left:26px; top:70px; width:36px; transform:rotate(30deg); }
.bd3{ left:84px; top:70px; width:36px; transform:rotate(-30deg); }
.bd4{ left:84px; top:70px; width:36px; transform:rotate(30deg); }
.section-title{ padding:16px 34px 8px; font-size:15px; font-weight:700; color:#121212; }
.grid{ display:flex; gap:16px; padding:0 34px; }
.card{ width:200px; background:#ffffff; border:1px solid #dedede; border-radius:8px; padding:12px; }
.card-img{ width:100%; height:78px; border-radius:6px; margin-bottom:8px; }
.card-title{ font-size:13px; font-weight:700; color:#121212; margin-bottom:2px; }
.card-note{ font-size:10px; color:#8a8a8a; margin-bottom:8px; }
.row{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-size:12px; font-weight:700; color:#121212; }
.tag{ font-size:9px; font-weight:700; text-transform:uppercase; color:#007aff; }
.footer{ position:absolute; bottom:0; left:0; width:960px; height:52px; background:#121212; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.footer span{ font-size:11px; color:#dedede; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Hilma</div>
<div class="navlinks">
<span class="active">Birth Control</span>
<span>Pregnancy</span>
<span>Menopause</span>
<span>Science</span>
</div>
<div class="search-pill">Search treatments</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="kicker">FDA-Regulated, Clinically Reviewed</div>
<div class="h1">Trustworthy care, plainly stated.</div>
<div class="sub">A restrained clinical blue on white — treatment options explained the way a doctor would, not a marketer.</div>
<div class="btn">Check Eligibility</div>
</div>
<div class="science">
<div class="molecule">
<div class="bond bd1"></div>
<div class="bond bd2"></div>
<div class="bond bd3"></div>
<div class="bond bd4"></div>
<div class="node n1"></div>
<div class="node n2"></div>
<div class="node n3"></div>
<div class="node n4"></div>
</div>
</div>
</div>
<div class="section-title">Popular Treatments</div>
<div class="grid">
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#007aff,#b8dcff);"></div>
<div class="card-title">Daily Birth Control</div>
<div class="card-note">Delivered Monthly</div>
<div class="row"><span class="price">$0–20/mo</span><span class="tag">Rx</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#121212,#007aff);"></div>
<div class="card-title">Prenatal Vitamin</div>
<div class="card-note">30-Day Supply</div>
<div class="row"><span class="price">$25/mo</span><span class="tag">Non-Rx</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#b8dcff,#007aff);"></div>
<div class="card-title">Menopause Support</div>
<div class="card-note">Provider Consult</div>
<div class="row"><span class="price">$45/mo</span><span class="tag">Rx</span></div>
</div>
</div>
<div class="footer">
<span>© Hilma</span>
<span>Clinical Studies · Privacy · Support</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; background: #866a41; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; background: #ffffff; color: #1c1c1c;
border: 1px solid #866a41; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1c1c1c;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c1c1c; box-sizing:border-box;
font-family:'Futura PT',sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:16px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; text-transform:uppercase; letter-spacing:0.5px; }
.navlinks span:not(.active) { color:#777777; }
main { display:flex; height:calc(640px - 72px); }
.gallery { width:44%; background:#f9f9f9; display:flex; align-items:center; justify-content:center; }
.case { width:110px; height:220px; background:linear-gradient(160deg,#866a41,#108474 80%); position:relative; }
.case::before { content:''; position:absolute; left:10px; top:20px; right:10px; bottom:20px; border:1px solid rgba(255,255,255,0.3); }
.details { width:56%; padding:28px 34px; }
.badge { display:inline-block; background:#108474; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.5px;
text-transform:uppercase; padding:2px 8px; margin-bottom:14px; }
h1 { font-size:26px; font-weight:600; margin:0 0 8px; }
.price { font-size:16px; font-weight:400; color:#363636; margin:0 0 16px; }
.desc { font-size:16px; line-height:1.5; color:#363636; margin:0 0 18px; max-width:400px; }
.swrow { display:flex; gap:8px; margin-bottom:20px; }
.sw { width:24px; height:24px; border-radius:9999px; }
.sw.sel { border:2px solid #1c1c1c; }
.buyrow { display:flex; gap:0; }
.btn-primary { background:#866a41; color:#fff; border:none; padding:14px 32px; font-size:14px; font-weight:600;
letter-spacing:1px; text-transform:uppercase; height:48px; }
.btn-secondary { background:#fff; color:#1c1c1c; border:none; padding:13px 31px; font-size:14px; font-weight:600;
letter-spacing:1px; text-transform:uppercase; height:48px; margin-left:10px; }
</style></head>
<body>
<nav>
<p class="brand">Caudabe</p>
<div class="navlinks"><span class="active">Cases</span><span>Screen Protectors</span><span>Accessories</span></div>
</nav>
<main>
<div class="gallery"><div class="case"></div></div>
<div class="details">
<span class="badge">New</span>
<h1>Sheath Leather Case</h1>
<p class="price">$44.95</p>
<p class="desc">Precision-tooled from genuine leather with a slim profile — engineered for durability, not decoration.</p>
<div class="swrow">
<div class="sw sel" style="background:#866a41"></div>
<div class="sw" style="background:#1c1c1c"></div>
<div class="sw" style="background:#108474"></div>
</div>
<div class="buyrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Read Reviews</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #222222; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #222222; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: 0px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; letter-spacing: 0px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0px; background: #cd0a0a; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0px; background: #302b2c; color: #ffffff;
border: 1px solid #cd0a0a; border-radius: 4px;
padding: 10px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; letter-spacing: 0px; background: #302b2c; color: #ffffff;
border: 1px solid #201f20; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ffffff; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #5a6572; color: #fbf9ee;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#222222; color:#fbf9ee; box-sizing:border-box;
font-family:Arial, Verdana, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:64px; background:#212121; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-size:18px; font-weight:700; color:#a58e4a; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; color:#9e9e9e; }
.navlinks span:first-child { color:#a58e4a; }
.layout { display:flex; height:calc(640px - 64px); }
.media { width:340px; flex-shrink:0; background:#302b2c; position:relative; display:flex; align-items:center; justify-content:center; }
.card-img { width:170px; height:230px; border-radius:8px; background:linear-gradient(160deg, #a58e4a 0%, #302b2c 60%, #cd0a0a 100%);
border:1px solid #363636; }
.badge-hot { position:absolute; top:18px; left:18px; background:#cd0a0a; color:#ffffff; font-size:11px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; border-radius:2px; padding:2px 6px; }
.detail { flex:1; padding:24px 34px; display:flex; flex-direction:column; gap:12px; }
.kicker { font-size:14px; color:#9e9e9e; }
h1 { font-size:22px; font-weight:600; margin:0; color:#fbf9ee; }
.price { font-size:22px; font-weight:700; color:#a58e4a; }
.condition-row { display:flex; gap:8px; }
.condition { background:#5a6572; color:#fbf9ee; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
border-radius:2px; padding:2px 6px; }
.condition.active { background:#a58e4a; }
.card-frame { border:1px solid #363636; border-radius:8px; padding:10px 14px; background:#302b2c; font-size:14px; color:#9e9e9e; }
.actions { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#cd0a0a; color:#ffffff; border:none; border-radius:4px; height:40px; font-size:14px; font-weight:600; }
.btn-secondary { background:#302b2c; color:#fbf9ee; border:none; border-radius:4px; height:40px; padding:0 20px; font-size:14px; font-weight:600; }
</style></head>
<body>
<div class="topbar">
<div class="brand">Collector S Cache</div>
<div class="navlinks"><span>Singles</span><span>Sealed</span><span>Sell</span><span>Watchlist</span></div>
</div>
<div class="layout">
<div class="media">
<div class="badge-hot">Hot</div>
<div class="card-img"></div>
</div>
<div class="detail">
<div class="kicker">Vintage Booster — Reprint Set</div>
<h1>Emberwing Dragon, Foil</h1>
<div class="price">$142.50</div>
<div class="condition-row">
<span class="condition active">NM</span>
<span class="condition">LP</span>
<span class="condition">HP</span>
</div>
<div class="card-frame">3 copies available · Ships from vault within 24 hours</div>
<div class="actions">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">View Details</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f4f2; color: #170c0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f4f2; color: #170c0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 400; line-height: 1.25; letter-spacing: 0.08em; margin: 0; color: #170c0a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 400; line-height: 1.6; margin: 0; color: #606060; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0.12em; background: #170c0a; color: #f8f4f2;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0.12em; background: transparent; color: #170c0a;
border: 1px solid #170c0a; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f4f2; color: #170c0a;
border: 1px solid #c0bab8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #606060; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.3; letter-spacing: 0.08em; background: #170c0a; color: #f8f4f2;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f4f2; font-family:'Pitch Sans','EB Garamond',Georgia,serif; color:#170c0a; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:'Ortica-Light','EB Garamond',serif;font-size:20px;font-weight:300;letter-spacing:1px;color:#170c0a;}
.navlinks{display:flex;gap:20px;font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#373737;font-family:'Pitch Sans',Arial,sans-serif;}
.hero{height:230px;display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;}
.talon{position:absolute;right:90px;top:20px;width:180px;height:180px;border-radius:9999px;background:radial-gradient(circle at 35% 30%,#c89173,#170c0a 75%);}
.talon:before{content:'';position:absolute;left:60px;top:70px;width:60px;height:60px;border-radius:9999px;background:#f8f4f2;opacity:0.15;}
.herotext{max-width:400px;position:relative;z-index:2;}
.h1{font-family:'Ortica-Light','EB Garamond',serif;font-size:38px;font-weight:300;line-height:1.15;color:#170c0a;margin:0 0 12px;}
.sub{font-family:'EB Garamond',Georgia,serif;font-size:15px;color:#373737;line-height:1.5;margin:0 0 18px;max-width:320px;font-style:italic;}
.btn{display:inline-block;background:#170c0a;color:#f8f4f2;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:13px 28px;font-family:'Pitch Sans',Arial,sans-serif;}
.divider{height:1px;background:#dbdbdb;margin:0 40px;}
.grid{display:flex;gap:14px;padding:16px 40px 0;}
.card{width:196px;}
.thumb{height:120px;background:#d3cfce;position:relative;overflow:hidden;}
.ctitle{font-family:'EB Garamond',Georgia,serif;font-size:15px;font-weight:400;margin:10px 0 2px;}
.cprice{font-family:'Pitch Sans',Arial,sans-serif;font-size:13px;color:#956c56;margin:0;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-family:'Pitch Sans',Arial,sans-serif;font-size:11px;letter-spacing:0.4px;color:#606060;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Pamela Love</div>
<div class="navlinks"><span>Rings</span><span>Necklaces</span><span>Earrings</span><span>Archive</span></div>
</div>
<div class="hero">
<div class="talon"></div>
<div class="herotext">
<div class="h1">Cast in bronze,<br>worn like armor.</div>
<div class="sub">Talons, celestial arcs, oxidized settings — jewelry excavated, not designed.</div>
<div class="btn">Shop the Collection</div>
</div>
</div>
<div class="divider"></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#956c56,#170c0a)"></div><div class="ctitle">Talon Ring, Bronze</div><div class="cprice">$285</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#c89173,#170c0a)"></div><div class="ctitle">Celestial Arc Necklace</div><div class="cprice">$340</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#812a17,#170c0a)"></div><div class="ctitle">Molten Drop Earrings</div><div class="cprice">$210</div></div>
</div>
<div class="footer"><span>Handcast in New York</span><span>© Pamela Love</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1b1b1b; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1b1b1b; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #9a9a9a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #00fdcf; color: #1b1b1b;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: transparent; color: #00fdcf;
border: 1px solid #00fdcf; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #2a2a2a; color: #d7d7d7;
border: 1px solid #1b1b1b; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9a9a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #00fdcf; color: #1b1b1b;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#1b1b1b; font-family:'Helvetica Neue', Arial, sans-serif; color:#d7d7d7; }
*{box-sizing:border-box;}
.nav{height:64px;background:#1b1b1b;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:19px;font-weight:700;letter-spacing:.5px;color:#fff;text-transform:uppercase;}
.navlinks{display:flex;gap:26px;font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#d7d7d7;}
.pillbtn{background:#00fdcf;color:#1b1b1b;font-size:12px;font-weight:700;text-transform:uppercase;padding:9px 20px;border-radius:9999px;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;background:#000000;position:relative;overflow:hidden;}
.heroText{width:440px;z-index:2;}
.kicker{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#00fdcf;margin-bottom:14px;}
.headline{font-size:34px;font-weight:700;line-height:1.15;color:#fff;margin:0 0 14px;}
.sub{font-size:14px;line-height:1.6;color:#a0a0a0;margin:0 0 22px;max-width:380px;}
.btn{display:inline-flex;align-items:center;justify-content:center;width:190px;height:46px;background:#00fdcf;color:#1b1b1b;font-size:13px;font-weight:700;text-transform:uppercase;border-radius:9999px;}
.pad{position:absolute;right:90px;top:80px;width:220px;height:120px;background:#242424;border-radius:60px;}
.pad:before{content:'';position:absolute;left:30px;top:44px;width:32px;height:32px;border-radius:50%;background:#00b8fc;}
.pad:after{content:'';position:absolute;right:30px;top:44px;width:32px;height:32px;border-radius:50%;background:#00fdcf;}
.sec{position:relative;height:290px;padding:26px 40px;}
.secTitle{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#808080;margin-bottom:16px;}
.grid{display:flex;gap:14px;}
.card{width:216px;background:#242424;padding:14px;}
.thumb{height:96px;background:#1b1b1b;margin-bottom:12px;display:flex;align-items:center;justify-content:center;}
.thumbshape{width:70px;height:44px;border-radius:22px;}
.stockrow{display:flex;align-items:center;gap:6px;font-size:11px;color:#20a50a;margin-bottom:6px;}
.stockdot{width:6px;height:6px;border-radius:50%;background:#20a50a;}
.cardTitle{font-size:14px;font-weight:600;color:#fff;margin-bottom:4px;}
.cardPrice{font-size:14px;font-weight:700;color:#00fdcf;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#000000;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#808080;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Logitech G Controll 2</div>
<div class="navlinks"><span>Controllers</span><span>Software</span><span>Compatibility</span></div>
<div class="pillbtn">Register Device</div>
</div>
<div class="hero">
<div class="heroText">
<div class="kicker">Controll 2</div>
<div class="headline">Every input,<br>tuned to the rig.</div>
<div class="sub">A pro-grade control surface for players who treat every millisecond as a resource.</div>
<div class="btn">Shop Controll 2</div>
</div>
<div class="pad"></div>
</div>
<div class="sec">
<div class="secTitle">Compatible Gear</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="thumbshape" style="background:linear-gradient(90deg,#00b8fc,#00fdcf)"></div></div><div class="stockrow"><div class="stockdot"></div>In Stock</div><div class="cardTitle">Controll 2 Base Unit</div><div class="cardPrice">$199.99</div></div>
<div class="card"><div class="thumb"><div class="thumbshape" style="background:linear-gradient(90deg,#00fdcf,#006b59)"></div></div><div class="stockrow"><div class="stockdot"></div>In Stock</div><div class="cardTitle">Modular Thumbstick Kit</div><div class="cardPrice">$49.99</div></div>
<div class="card"><div class="thumb"><div class="thumbshape" style="background:linear-gradient(90deg,#006b59,#00b8fc)"></div></div><div class="stockrow"><div class="stockdot"></div>In Stock</div><div class="cardTitle">Precision Paddle Set</div><div class="cardPrice">$34.99</div></div>
<div class="card"><div class="thumb"><div class="thumbshape" style="background:linear-gradient(90deg,#00b8fc,#006b59)"></div></div><div class="stockrow"><div class="stockdot"></div>In Stock</div><div class="cardTitle">Charging Dock</div><div class="cardPrice">$29.99</div></div>
</div>
</div>
<div class="footer"><span>© Precision. Every Input.</span><span>Firmware Updates</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0064c7;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0064c7;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #0064c7; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; background: #cc0000; color: #ffffff;
border: none; border-radius: 0px; padding: 6px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; background: #ffffff; color: #003366;
border: 1px solid #cc0000; border-radius: 0px;
padding: 5px 17px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; background: #ffffff; color: #000000;
border: 1px solid #bfd8f1; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.3; background: #ffff00; color: #000000;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:Arial,Helvetica,sans-serif; color:#000; }
*{box-sizing:border-box;}
.utility{height:26px;background:#f6f6f6;border-bottom:1px solid #d3d3d3;display:flex;align-items:center;gap:16px;padding:0 32px;font-size:11px;color:#555;}
.utility span{color:#0064c7;}
.nav{height:42px;background:#003366;display:flex;align-items:center;gap:24px;padding:0 32px;border-bottom:3px solid #cc0000;}
.logo{color:#fff;font-size:16px;font-weight:700;letter-spacing:.5px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;}
.searchrow{display:flex;padding:12px 32px;gap:0;}
.searchbox{flex:1;height:36px;border:2px solid #cc0000;display:flex;align-items:center;padding:0 12px;font-size:13px;color:#000;max-width:500px;}
.searchbtn{width:88px;height:36px;background:#cc0000;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.catheader{background:#003366;color:#fff;font-size:16px;font-weight:700;padding:8px 32px;border-bottom:3px solid #cc0000;margin:0 32px 12px;}
.grid{display:flex;gap:0;padding:0 32px;}
.card{width:160px;border:1px solid #d3d3d3;padding:8px;}
.thumb{height:80px;background:#f6f6f6;margin-bottom:6px;}
.itemnum{font-size:10px;font-weight:700;color:#808080;letter-spacing:.3px;}
.title{font-size:12px;color:#0064c7;margin:2px 0;}
.price{font-size:15px;font-weight:700;color:#000;margin-bottom:6px;}
.pricetable{border:1px solid #d3d3d3;font-size:10px;}
.pricetable .hdr{display:flex;background:#f2f2f2;font-weight:700;}
.pricetable .row{display:flex;}
.pricetable div div{flex:1;padding:2px 4px;border-right:1px solid #d3d3d3;text-align:center;}
.pricetable div div:last-child{border-right:none;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="utility"><span>Account</span><span>Order Status</span><span>Request a Catalog</span></div>
<div class="nav">
<div class="logo">Uline</div>
<div class="navlinks"><span>Shipping</span><span>Storage</span><span>Packaging</span><span>Office</span><span>Retail</span></div>
</div>
<div class="searchrow">
<div class="searchbox">Search by item # or keyword</div>
<div class="searchbtn">SEARCH</div>
</div>
<div class="catheader">Corrugated Boxes — Shipping Supplies</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="itemnum">S-4738</div><div class="title">12x12x12 Corrugated Boxes</div><div class="price">$0.68 ea</div>
<div class="pricetable"><div class="hdr"><div>Qty</div><div>25</div><div>100</div><div>500</div></div><div class="row"><div>Price</div><div>$0.79</div><div>$0.71</div><div>$0.68</div></div></div>
</div>
<div class="card"><div class="thumb"></div><div class="itemnum">S-1901</div><div class="title">2" Clear Packing Tape</div><div class="price">$3.10 ea</div>
<div class="pricetable"><div class="hdr"><div>Qty</div><div>6</div><div>36</div><div>72</div></div><div class="row"><div>Price</div><div>$3.45</div><div>$3.22</div><div>$3.10</div></div></div>
</div>
<div class="card"><div class="thumb"></div><div class="itemnum">H-1595</div><div class="title">Wire Shelving Unit 48x18x72</div><div class="price">$129.00</div>
<div class="pricetable"><div class="hdr"><div>Qty</div><div>1</div><div>4</div><div>8</div></div><div class="row"><div>Price</div><div>$139</div><div>$132</div><div>$129</div></div></div>
</div>
<div class="card"><div class="thumb"></div><div class="itemnum">S-2020</div><div class="title">Stretch Wrap Film 18"x1500'</div><div class="price">$52.00</div>
<div class="pricetable"><div class="hdr"><div>Qty</div><div>4</div><div>16</div><div>32</div></div><div class="row"><div>Price</div><div>$58</div><div>$55</div><div>$52</div></div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0.2px; background: #557b97; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0.2px; background: #ffffff; color: #557b97;
border: 1px solid #557b97; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #557b97; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #dedede; }
.brand { font-family:'Playfair Display',Georgia,serif; font-size:19px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:15px; font-weight:500; }
.navlinks span.active { color:#557b97; border-bottom:2px solid #557b97; padding-bottom:4px; }
main { display:flex; height:calc(640px - 64px); }
.gallery { width:34%; background:#f5f5f5; display:flex; align-items:center; justify-content:center; }
.poster { width:170px; height:255px; border-radius:4px; background:linear-gradient(160deg,#557b97,#121212 70%);
box-shadow:0 12px 24px rgba(0,0,0,0.15); }
.details { width:66%; padding:26px 34px; }
.badge { display:inline-block; background:#557b97; color:#fff; font-size:11px; font-weight:600; letter-spacing:0.3px;
text-transform:uppercase; border-radius:4px; padding:2px 8px; margin-bottom:12px; }
h1 { font-family:'Playfair Display',Georgia,serif; font-size:30px; font-weight:600; letter-spacing:-0.2px; margin:0 0 6px; }
.meta { font-size:14px; color:#444444; margin:0 0 14px; }
.price { font-size:17px; font-weight:600; margin:0 0 14px; }
.desc { font-size:14px; line-height:1.6; color:#444444; margin:0 0 16px; max-width:440px; }
.genres { display:flex; gap:8px; margin-bottom:20px; }
.genretag { background:#f5f5f5; color:#444444; font-size:12px; border-radius:9999px; padding:4px 12px; }
.buyrow { display:flex; gap:12px; }
.btn-primary { background:#557b97; color:#fff; border:none; border-radius:4px; padding:12px 24px; font-size:15px; font-weight:500; height:44px; }
.btn-secondary { background:#fff; color:#557b97; border:1px solid #557b97; border-radius:4px; padding:11px 23px; font-size:15px; font-weight:500; height:44px; }
</style></head>
<body>
<nav>
<p class="brand">Cauldron Films</p>
<div class="navlinks"><span class="active">New Releases</span><span>Catalog</span><span>About</span></div>
</nav>
<main>
<div class="gallery"><div class="poster"></div></div>
<div class="details">
<span class="badge">New</span>
<h1>The Nightwatch Archive</h1>
<p class="meta">Dir. Marguerite Lund · 1978 · Restored Blu-ray</p>
<p class="price">$29.99</p>
<p class="desc">A rediscovered giallo classic, restored in 4K from the original negative with newly translated subtitles.</p>
<div class="genres"><span class="genretag">Giallo</span><span class="genretag">Horror</span><span class="genretag">Exploitation</span></div>
<div class="buyrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Browse Catalog</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f3f4; color: #322a26;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f3f4; color: #322a26;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #322a26; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #1990c6; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #f3f3f4; color: #322a26;
border: 1px solid #1990c6; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #444444;
border: 1px solid #c3c1c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #1990c6; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f3f3f4; font-family:-apple-system,'Segoe UI',Roboto,sans-serif; color:#322a26; }
*{box-sizing:border-box;}
.nav{height:64px;background:#f3f3f4;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:600;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:0.4px;text-transform:uppercase;}
.navlinks div:first-child{border-bottom:2px solid #322a26;padding-bottom:20px;}
.navlinks div{color:#6a6a6a;}
.navlinks div:first-child{color:#322a26;}
.search{width:170px;height:36px;border-radius:9999px;background:#fff;font-size:11px;color:#929292;display:flex;align-items:center;padding:0 14px;}
.hero{height:230px;background:#d6cbc4;display:flex;align-items:center;padding:0 36px;}
.herotext h1{font-size:28px;font-weight:600;margin:0 0 10px;line-height:1.25;max-width:380px;}
.herotext p{font-size:14px;color:#444444;margin:0 0 16px;max-width:340px;}
.cta{display:inline-block;background:#1990c6;color:#fff;font-size:14px;font-weight:600;padding:12px 24px;border-radius:8px;}
.bottle{position:absolute;right:100px;top:150px;width:56px;height:120px;background:linear-gradient(180deg,#e8e0db,#1990c6 90%);border-radius:8px 8px 20px 20px;}
.grid{display:flex;gap:16px;padding:22px 36px 0;}
.card{width:150px;background:#fff;border-radius:12px;padding:10px;}
.thumb{height:100px;border-radius:12px;margin-bottom:8px;}
.badge{display:inline-block;background:#1990c6;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 7px;border-radius:4px;margin-bottom:4px;}
.pname{font-size:14px;font-weight:600;}
.pprice{font-size:13px;color:#444444;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:50px;background:#322a26;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;}
.footer span{margin-left:16px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Ouai</div>
<div class="navlinks"><div>Hair</div><div>Body</div><div>Sets</div><div>About</div></div>
<div class="search">Search products...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Clean, editorial haircare for real life.</h1>
<p>Dry shampoos, oils, and leave-ins made for effortless days.</p>
<div class="cta">Shop Best Sellers</div>
</div>
<div class="bottle"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1990c6,#d6cbc4)"></div><div class="badge">New</div><div class="pname">Dry Shampoo Foam</div><div class="pprice">$26</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d6cbc4,#322a26)"></div><div class="pname">St. Barts Hair Oil</div><div class="pprice">$32</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e8e0db,#1990c6)"></div><div class="pname">Rose Hip Leave-In</div><div class="pprice">$28</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#322a26,#d6cbc4)"></div><div class="pname">Body Cleanser</div><div class="pprice">$22</div></div>
</div>
<div class="footer"><span>© Effortless, By Design</span><span>Ingredients<span> Community<span> Support</span></span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: 0.5px; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #116600; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #ffffff; color: #116600;
border: 1px solid #116600; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0.5px; background: #f5f5f5; color: #1a1a1a;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:'Courier New', Courier, 'Lucida Console', monospace; }
.top { height:28px; background:#1a1a1a; color:#fff; font-size:11px; display:flex; align-items:center;
justify-content:space-between; padding:0 36px; }
nav { height:52px; background:#116600; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { color:#fff; font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; color:#fff; font-size:13px; font-weight:600; }
.search { width:220px; height:32px; background:#fff; border-radius:4px; font-size:12px; color:#666; display:flex;
align-items:center; padding-left:12px; }
.body { display:flex; }
.sidebar { width:170px; border-right:1px solid #dddddd; padding:14px 16px; flex-shrink:0; }
.sidebar h4 { font-size:11px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; margin:0 0 8px; }
.filt { font-size:12px; color:#333; display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.filt .box { width:12px; height:12px; border:1px solid #dddddd; display:inline-block; }
.filt.on .box { background:#116600; border-color:#116600; }
.main { flex:1; padding:14px 28px 0; }
.crumb { font-size:12px; color:#666; margin-bottom:10px; }
.quote { background:#116600; color:#fff; padding:14px 20px; display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.quote h2 { font-size:16px; margin:0; }
.quote p { font-size:12px; margin:2px 0 0; opacity:0.9; }
.btn-white { background:#fff; color:#116600; border:1px solid #fff; border-radius:4px; padding:8px 16px; font-size:13px; font-weight:600; }
.btn-primary { background:#116600; color:#fff; border:none; border-radius:4px; padding:9px 18px; font-size:13px; font-weight:600; height:42px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { border:1px solid #dddddd; border-radius:4px; padding:14px; }
.thumb { aspect-ratio:1/1; background:#f5f5f5; margin-bottom:8px; position:relative; }
.t1::after { content:''; position:absolute; inset:22%; background:linear-gradient(150deg,#116600,#0d4f00); }
.t2::after { content:''; position:absolute; inset:22%; background:linear-gradient(150deg,#666,#333); }
.t3::after { content:''; position:absolute; inset:22%; background:linear-gradient(150deg,#999,#666); }
.card h3 { font-size:14px; font-weight:600; margin:0 0 4px; }
.part { font-size:12px; font-weight:700; letter-spacing:0.5px; background:#f5f5f5; border:1px solid #ebebeb;
padding:2px 6px; border-radius:2px; display:inline-block; margin-bottom:8px; }
.mfr { font-size:10px; border:1px solid #dddddd; padding:2px 8px; border-radius:2px; margin-left:6px; text-transform:uppercase; }
footer { background:#1a1a1a; color:#dddddd; font-size:12px; padding:14px 36px; display:flex;
justify-content:space-between; align-items:center; margin-top:14px; }
footer a { color:#dddddd; margin-left:14px; }
</style></head>
<body>
<div class="top"><span>Mon–Fri 7AM–6PM CST · (800) 555-0142</span><span>My Account | Order Status</span></div>
<nav>
<p class="brand">Bernell Hydraulics</p>
<div class="navlinks"><span>Pumps</span><span>Cylinders</span><span>Fittings</span><span>Filtration</span></div>
<div class="search">Search by part number, keyword, or manufacturer…</div>
</nav>
<div class="body">
<div class="sidebar">
<h4>Manufacturer</h4>
<div class="filt on"><span class="box"></span>Parker</div>
<div class="filt"><span class="box"></span>Bosch Rexroth</div>
<div class="filt"><span class="box"></span>Eaton</div>
<h4 style="margin-top:12px;">Pressure Rating</h4>
<div class="filt on"><span class="box"></span>0–3000 PSI</div>
<div class="filt"><span class="box"></span>3000–5000 PSI</div>
<h4 style="margin-top:12px;">In Stock</h4>
<div class="filt on"><span class="box"></span>Ships Today</div>
</div>
<div class="main">
<div class="crumb">Home / Pumps / <b>Gear Pumps</b></div>
<div class="quote">
<div><h2>Need volume pricing?</h2><p>Request a custom quote for bulk hydraulic orders.</p></div>
<button class="btn-white">Request Quote</button>
</div>
<div class="grid">
<div class="card">
<div class="thumb t1"></div>
<span class="part mono">PGP511A0080</span>
<h3>Parker Gear Pump, 0.80 CID</h3>
<span class="mfr">Parker</span>
<div style="margin-top:10px;"><button class="btn-primary">Add to Cart</button></div>
</div>
<div class="card">
<div class="thumb t2"></div>
<span class="part mono">A10VSO28DR</span>
<h3>Rexroth Piston Pump 28cc</h3>
<span class="mfr">Rexroth</span>
<div style="margin-top:10px;"><button class="btn-primary">Add to Cart</button></div>
</div>
<div class="card">
<div class="thumb t3"></div>
<span class="part mono">EATON-421AK</span>
<h3>Eaton Vickers Vane Pump</h3>
<span class="mfr">Eaton</span>
<div style="margin-top:10px;"><button class="btn-primary">Add to Cart</button></div>
</div>
</div>
</div>
</div>
<footer>
<span>© Bernell Hydraulics</span>
<div><a href="#">Products</a><a href="#">Services</a><a href="#">Contact</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0075eb; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0075eb; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bbf0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #191c1f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0075eb; color: #191c1f;
border: 1px solid #191c1f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0075eb; color: #f5f5f5;
border: 1px solid #2789ed; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bbf0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0467ca; color: #191c1f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#191c1f; box-sizing:border-box;
font-family:"Inter", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:18px; font-weight:600; }
.navlinks { display:flex; gap:24px; font-size:15px; font-weight:500; }
.pill { border-radius:9999px; padding:12px 24px; font-size:14px; font-weight:600; }
.pill.dark { background:#191c1f; color:#fff; }
.hero { padding:16px 32px 24px; text-align:center; }
.hero h1 { font-size:56px; font-weight:500; letter-spacing:-1.4px; line-height:1; margin:0 0 16px; }
.hero p { font-size:16px; color:#5a5f66; margin:0 0 22px; }
.herobtns { display:flex; gap:10px; justify-content:center; }
.pill.light { background:#f4f4f4; color:#000; }
.pill.outline { background:transparent; border:2px solid #191c1f; color:#191c1f; }
.darkband { background:#191c1f; padding:32px; display:flex; gap:20px; }
.darkcard { flex:1; border-radius:20px; padding:24px; background:#232629; }
.darkcard .lab { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; padding:4px 10px; border-radius:9999px; display:inline-block; margin-bottom:10px; }
.lab.blue { background:rgba(73,79,223,0.2); color:#7c81f7; }
.lab.teal { background:rgba(0,168,126,0.2); color:#34d6a8; }
.darkcard h3 { color:#fff; font-size:22px; font-weight:500; margin:0 0 8px; }
.darkcard p { color:#a5a9ad; font-size:13px; margin:0; line-height:1.6; }
.ghost { display:inline-block; margin-top:16px; border:2px solid #f4f4f4; color:#f4f4f4; border-radius:9999px; padding:8px 18px; font-size:13px; }
.lightband { display:flex; gap:20px; padding:24px 32px; }
.lightcard { flex:1; border-radius:20px; background:#f4f4f4; padding:22px; text-align:center; }
.lightcard .num { font-size:32px; font-weight:500; margin:0 0 4px; }
.lightcard p { font-size:12px; color:#5a5f66; margin:0; }
footer { border-top:1px solid #f4f4f4; padding:12px 32px; display:flex; justify-content:space-between; font-size:12px; color:#8d969e; }
</style></head>
<body>
<nav>
<span class="brand">Revolut</span>
<div class="navlinks"><span>Personal</span><span>Business</span><span>Crypto</span><span>Help</span></div>
<span class="pill dark">Get the app</span>
</nav>
<section class="hero">
<h1>One app,<br>all your money</h1>
<p>Spend, save, and invest — in one place, in any currency.</p>
<div class="herobtns">
<span class="pill dark">Get started</span>
<span class="pill outline">Learn more</span>
</div>
</section>
<div class="darkband">
<div class="darkcard">
<span class="lab blue">Spending</span>
<h3>Spend abroad, fee-free</h3>
<p>Real exchange rates in 150+ currencies, no hidden markups.</p>
<span class="ghost">See rates</span>
</div>
<div class="darkcard">
<span class="lab teal">Investing</span>
<h3>Grow your money</h3>
<p>Stocks, ETFs, and crypto — all inside the same app.</p>
<span class="ghost">Start investing</span>
</div>
</div>
<div class="lightband">
<div class="lightcard"><p class="num">45M+</p><p>customers worldwide</p></div>
<div class="lightcard"><p class="num">150+</p><p>currencies supported</p></div>
<div class="lightcard"><p class="num">38</p><p>countries and counting</p></div>
</div>
<footer>
<span>© Revolut Ltd</span>
<span>Personal · Business · Crypto · Help</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #2d398e; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #2d398e;
border: 1px solid #2d398e; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #bcbcbc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #eb2429; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; color:#121212; font-family:'Mulish', Arial, sans-serif; }
*{box-sizing:border-box;}
.topnav{height:56px;background:#2d398e;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:6px;font-size:14px;font-weight:600;letter-spacing:0.3px;color:#fff;}
.navlinks span{padding:0 12px;}
.searchpill{width:200px;height:34px;border-radius:9999px;background:#fff;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#999;}
.hero{padding:20px 32px;display:flex;gap:20px;}
.heroimg{width:260px;height:190px;border-radius:8px;background:linear-gradient(160deg,#652f8e,#2d398e);position:relative;flex-shrink:0;}
.heroimg .disc{position:absolute;left:90px;top:55px;width:80px;height:80px;border-radius:50%;background:#111;border:4px solid #fbd600;}
.herotext{flex:1;padding-top:8px;}
.herotext .eyebrow{font-family:'Playfair Display',Georgia,serif;font-size:14px;font-style:italic;color:#652f8e;margin-bottom:4px;}
.herotext h1{font-family:'Playfair Display',Georgia,serif;font-size:28px;font-weight:700;margin:0 0 8px;}
.herotext p{font-size:14px;color:#666;margin:0 0 12px;max-width:380px;}
.btnrow{display:flex;gap:10px;}
.btn{background:#2d398e;color:#fff;font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:12px 24px;border-radius:8px;}
.btn2{background:#fbd600;color:#121212;font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:12px 24px;border-radius:8px;}
.tags{display:flex;gap:8px;padding:0 32px;}
.tag{font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:4px 12px;border-radius:9999px;color:#fff;}
.grid{display:flex;gap:14px;padding:14px 32px 0;}
.card{width:206px;background:#fff;border-radius:8px;padding:12px;position:relative;}
.thumb{height:96px;border-radius:4px;margin-bottom:8px;}
.sale{position:absolute;top:8px;left:8px;background:#eb2429;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.ptitle{font-size:16px;font-weight:600;}
.pprice{font-size:16px;font-weight:700;margin-top:4px;color:#eb2429;}
.pcompare{font-size:13px;color:#999;text-decoration:line-through;margin-left:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:34px;background:#2d398e;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="topnav">
<div class="logo">Rarewaves</div>
<div class="navlinks"><span>Movies</span><span>Music</span><span>Books</span><span>Games</span></div>
<div class="searchpill">Search catalog...</div>
</div>
<div class="hero">
<div class="heroimg"><div class="disc"></div></div>
<div class="herotext">
<div class="eyebrow">Vinyl · New Arrival</div>
<h1>Discovery Bin, Digitized.</h1>
<p>Discount entertainment marketplace — vinyl, Blu-ray, books, and games, priced to browse.</p>
<div class="btnrow"><div class="btn">Add to Cart</div><div class="btn2">Buy Now</div></div>
</div>
</div>
<div class="tags"><div class="tag" style="background:#652f8e;">Rock</div><div class="tag" style="background:#00a54f;">Classic Film</div><div class="tag" style="background:#29aae1;">Jazz</div><div class="tag" style="background:#ea088e;">Action</div></div>
<div class="grid">
<div class="card"><div class="sale">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#652f8e,#2d398e);"></div><div class="ptitle">Abbey Road — LP</div><div class="pprice">$19.99<span class="pcompare">$28.99</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00a54f,#2d398e);"></div><div class="ptitle">Casablanca — Blu-ray</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#29aae1,#2d398e);"></div><div class="ptitle">Dune — Hardcover</div><div class="pprice">$11.99</div></div>
</div>
<div class="footer"><span>© Rarewaves Marketplace</span><span>Track Order Returns</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffff3; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffff3; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 26px; font-weight: 400; line-height: 1.25; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #356687; color: #fffff3;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fffff3; color: #356687;
border: 1px solid #356687; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #fffff3; color: #141414;
border: 1px solid #c4c4bb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffb6; color: #141414;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fffff3; color:#545454; font-family:'Inter',sans-serif; }
*{box-sizing:border-box;}
.announce{height:34px;background:#356687;color:#fffff3;display:flex;align-items:center;justify-content:center;font-family:'Franklin Gothic Cond ITC','Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e2e2e2;}
.logo{font-size:19px;font-weight:600;color:#141414;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#141414;}
.hero{padding:22px 32px 0;display:flex;align-items:center;gap:26px;}
.herotext{max-width:400px;}
.eyebrow{font-family:'Franklin Gothic Cond ITC','Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:#356687;margin-bottom:10px;}
.herotext h1{font-family:'Rhymes Display',Georgia,serif;font-size:38px;font-weight:400;line-height:1.1;color:#141414;margin:0 0 12px;}
.herotext p{font-size:15px;line-height:1.5;color:#545454;margin:0 0 16px;}
.cta{display:inline-block;background:#356687;color:#fffff3;font-size:15px;font-weight:600;padding:14px 28px;border-radius:8px;}
.artcard{margin-left:auto;width:190px;height:170px;border-radius:12px;background:radial-gradient(circle at 35% 35%,#eaae9d,#e08a73 70%);position:relative;}
.artcard:before{content:'Clinically Studied';position:absolute;bottom:14px;left:14px;right:14px;background:#ffffb6;color:#141414;font-family:'Franklin Gothic Cond ITC','Inter',sans-serif;font-size:12px;font-weight:700;padding:6px 12px;border-radius:9999px;text-align:center;}
.grid{display:flex;gap:14px;padding:20px 32px 0;}
.card{width:200px;background:#f7f8fa;border-radius:12px;padding:14px;}
.thumb{height:100px;border-radius:12px;margin-bottom:10px;}
.ptitle{font-size:15px;font-weight:600;color:#141414;margin:0 0 4px;}
.ptag{font-family:'Franklin Gothic Cond ITC','Inter',sans-serif;font-size:12px;color:#356687;border:1px solid #70aac8;border-radius:4px;padding:2px 8px;display:inline-block;margin-bottom:6px;}
.pprice{font-size:15px;color:#141414;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#141414;color:#f8f8f8;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">Free shipping over $50 — science-backed relief, delivered</div>
<div class="nav">
<div class="logo">Stripes Beauty</div>
<div class="navlinks"><span>Symptoms</span><span>Shop</span><span>Take the Quiz</span><span>Our Science</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="eyebrow">Hormone-Free Relief</div>
<h1>Menopause, treated like it matters.</h1>
<p>Science-backed formulas for hot flashes, sleep, and mood — designed by women who refuse to whisper about it.</p>
<div class="cta">Take the Symptom Quiz</div>
</div>
<div class="artcard"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#356687,#eaae9d)"></div><div class="ptag">Cooling</div><div class="ptitle">Night Sweat Serum</div><div class="pprice">$38.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e08a73,#356687)"></div><div class="ptag">Sleep</div><div class="ptitle">Rest Support Capsules</div><div class="pprice">$42.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#70aac8,#e08a73)"></div><div class="ptag">Mood</div><div class="ptitle">Calm Daily Blend</div><div class="pprice">$36.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#356687,#70aac8)"></div><div class="ptag">Bundle</div><div class="ptitle">Full Symptom Kit</div><div class="pprice">$96.00</div></div>
</div>
<div class="footer"><span>© Stripes Beauty</span><span>Ingredients Clinical Evidence FAQ</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7fafc; color: #1d1d1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7fafc; color: #1d1d1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1d1d1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #c8102e; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f7fafc; color: #1d1d1f;
border: 1px solid #c8102e; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f7fafc; color: #1d1d1f;
border: 1px solid #c0c3c5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c8102e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7fafc; font-family:'Raleway',sans-serif; color:#393939; }
*{box-sizing:border-box;}
.nav{height:64px;background:#f7fafc;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Montserrat',sans-serif;font-weight:700;font-size:19px;color:#1d1d1f;}
.navlinks{display:flex;gap:20px;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#666666;}
.navlinks span:first-child{color:#1d1d1f;}
.hero{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;}
.heroText{width:52%;}
.h1{font-family:'Montserrat',sans-serif;font-weight:700;font-size:38px;color:#1d1d1f;line-height:1.12;letter-spacing:-1px;margin:0 0 12px;}
.sub{font-size:15px;color:#393939;margin:0 0 18px;max-width:340px;}
.cta{display:inline-block;background:#c8102e;color:#fff;font-family:'Montserrat',sans-serif;font-weight:600;font-size:13px;letter-spacing:.5px;text-transform:uppercase;padding:14px 28px;border-radius:8px;}
.probering{width:150px;height:150px;border-radius:9999px;border:4px solid #c8102e;display:flex;align-items:center;justify-content:center;background:#edf2f7;}
.tempval{font-family:'Montserrat',sans-serif;font-weight:300;font-size:44px;color:#1d1d1f;}
.gaugebox{margin:0 32px;background:#fff;border:1px solid #e2e8f0;border-radius:4px;padding:14px 20px;}
.gaugelabel{font-size:11px;font-weight:500;color:#666666;margin-bottom:6px;}
.gaugetrack{height:8px;background:#edf2f7;border-radius:9999px;position:relative;}
.gaugefill{height:8px;width:64%;background:#c8102e;border-radius:9999px;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:200px;background:#fff;border-radius:4px;overflow:hidden;}
.thumb{aspect-ratio:1/1;background:#edf2f7;}
.cardbody{padding:12px 16px 16px;}
.ptitle{font-size:16px;font-weight:600;color:#1d1d1f;}
.pprice{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:700;color:#1d1d1f;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#1a202c;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#a0aec0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Meater</div>
<div class="navlinks"><span>Probes</span><span>Block</span><span>App</span><span>Recipes</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Precision Cooking, Wirelessly Instrumented.</div>
<div class="sub">Wireless smart thermometers built for perfectly cooked meat, every time.</div>
<div class="cta">Shop Probes</div>
</div>
<div class="probering"><div class="tempval">132°</div></div>
</div>
<div class="gaugebox">
<div class="gaugelabel">Internal Temp Progress to Target</div>
<div class="gaugetrack"><div class="gaugefill"></div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="ptitle">MEATER 2 Plus Probe</div><div class="pprice">$109</div></div></div>
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="ptitle">MEATER Block Charging Dock</div><div class="pprice">$179</div></div></div>
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="ptitle">MEATER Ambient Air Probe</div><div class="pprice">$99</div></div></div>
</div>
<div class="footer"><span>© MEATER Smart Thermometers</span><span>App · Support · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f4; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f4; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #e74c3c; color: #ffffff;
border: none; border-radius: 0px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #f4f4f4; color: #222222;
border: 1px solid #e74c3c; border-radius: 0px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #f4f4f4; color: #222222;
border: 1px solid #c0c0c0; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; background: #e74c3c; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f4f4f4; font-family:'Proxima Nova','Helvetica Neue',Helvetica,Arial,sans-serif; color:#222222; }
*{box-sizing:border-box;}
.nav{height:56px;background:#f4f4f4;border-bottom:1px solid #e3e5e7;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.logo{font-size:18px;font-weight:700;}
.navlinks{display:flex;gap:18px;font-size:14px;font-weight:600;}
.navlinks div:nth-child(1){font-weight:700;}
.navlinks div:not(:nth-child(1)){color:#777777;}
.search{border:1px solid #ced0d2;border-radius:9999px;padding:6px 16px;font-size:13px;color:#444444;}
.hero{background:#eeeeee;padding:20px 24px;}
.hlabel{font-size:16px;font-weight:600;padding-bottom:10px;border-bottom:1px solid #e3e5e7;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border:1px solid #e3e5e7;padding:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#e74c3c;color:#fff;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:2px 8px;}
.thumb{height:110px;background:#eeeeee;margin-bottom:8px;}
.ctitle{font-size:14px;font-weight:600;margin:0;}
.cartist{font-size:14px;color:#777777;margin-top:2px;}
.cprice{font-size:16px;font-weight:600;margin-top:6px;}
.cprice.sale{color:#e74c3c;}
.body{padding:16px 24px 0;}
.pdp{display:flex;gap:20px;}
.pdpimg{width:220px;height:170px;background:#222222;}
.pdpinfo{flex:1;}
.pdpinfo h2{font-size:22px;font-weight:700;margin:0 0 4px;}
.pdpinfo .artist{font-size:14px;color:#777777;margin-bottom:10px;}
.cta{display:inline-block;background:#ff9b00;color:#222222;font-size:14px;font-weight:600;padding:10px 20px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:76px;background:#222222;color:#aaaaaa;border-top:1px solid #ced0d2;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Permanent Records</div>
<div class="navlinks"><div>New Arrivals</div><div>Vinyl</div><div>Merch</div><div>Pre-Orders</div></div>
<div class="search">Search records...</div>
</div>
<div class="hero">
<div class="hlabel">New Arrivals</div>
<div class="grid">
<div class="card"><div class="badge">Sold Out</div><div class="thumb"></div><div class="ctitle">Fever Dream</div><div class="cartist">The Low Static</div><div class="cprice sale">$24.99</div></div>
<div class="card"><div class="thumb" style="background:#dcdcdc;"></div><div class="ctitle">Concrete Bloom</div><div class="cartist">Marigold Wire</div><div class="cprice">$28.99</div></div>
<div class="card"><div class="thumb" style="background:#cccccc;"></div><div class="ctitle">Nightshift EP</div><div class="cartist">Pale Radio</div><div class="cprice">$16.99</div></div>
</div>
</div>
<div class="body">
<div class="pdp">
<div class="pdpimg"></div>
<div class="pdpinfo">
<h2>Concrete Bloom</h2>
<div class="artist">Marigold Wire — LP, 180g</div>
<div class="cta">Add to Cart</div>
</div>
</div>
</div>
<div class="footer"><span>© Permanent Records</span><span>Store Hours About Contact</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8f8f8f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #181818; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: 1px solid #181818; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #121212; color: #f5f5f5;
border: 1px solid #363636; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f8f8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #131313; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; height:640px; }
.sidebar { width:190px; background:#000; padding:20px 14px; flex-shrink:0; }
.sidebar .brand { display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; margin-bottom:24px; }
.sidebar .dot { width:22px; height:22px; border-radius:50%; background:#1ed760; }
.navitem { font-size:13px; font-weight:700; color:#fff; padding:8px 0; }
.navitem.inactive { color:#b3b3b3; font-weight:400; }
.plsection { margin-top:18px; }
.plsection .title { font-size:11px; color:#b3b3b3; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.pl { font-size:12.5px; color:#b3b3b3; padding:5px 0; }
.main { flex:1; padding:20px 26px; overflow:hidden; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.search { background:#1f1f1f; border-radius:9999px; padding:9px 16px; font-size:12px; color:#b3b3b3; width:220px;
box-shadow: rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset; }
.pillbtn { background:#1f1f1f; color:#fff; border:none; border-radius:9999px; padding:8px 16px; font-size:12px;
font-weight:700; text-transform:uppercase; letter-spacing:1.4px; }
h2 { font-size:22px; font-weight:700; margin:0 0 12px; }
.cardgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.card { background:#181818; border-radius:8px; padding:12px; box-shadow:rgba(0,0,0,.3) 0px 8px 8px; position:relative; }
.art { height:78px; border-radius:6px; margin-bottom:8px; }
.art.a1 { background:linear-gradient(135deg,#ff6b6b,#c92a2a); }
.art.a2 { background:linear-gradient(135deg,#1ed760,#0a5c2e); }
.art.a3 { background:linear-gradient(135deg,#ffd43b,#e8590c); }
.art.a4 { background:linear-gradient(135deg,#748ffc,#364fc7); }
.card .t { font-size:12.5px; font-weight:700; }
.card .s { font-size:11px; color:#b3b3b3; margin-top:3px; }
.play { position:absolute; right:10px; bottom:56px; width:32px; height:32px; border-radius:50%; background:#1ed760;
display:flex; align-items:center; justify-content:center; box-shadow:rgba(0,0,0,.5) 0px 8px 24px; }
.play::after { content:''; width:0; height:0; border-style:solid; border-width:6px 0 6px 9px; border-color:transparent transparent transparent #121212; margin-left:2px; }
.nowplaying { position:absolute; left:0; right:0; bottom:0; height:64px; background:#181818; border-top:1px solid #282828;
display:flex; align-items:center; padding:0 16px; gap:12px; }
.np-art { width:44px; height:44px; border-radius:4px; background:linear-gradient(135deg,#ff6b6b,#c92a2a); }
.np-text .t { font-size:12px; }
.np-text .s { font-size:10.5px; color:#b3b3b3; }
</style></head>
<body>
<div class="app">
<div class="sidebar">
<div class="brand"><span class="dot"></span>Spotify</div>
<div class="navitem">Home</div>
<div class="navitem inactive">Search</div>
<div class="navitem inactive">Your Library</div>
<div class="plsection">
<div class="title">Playlists</div>
<div class="pl">Discover Weekly</div>
<div class="pl">Release Radar</div>
<div class="pl">Daily Mix 1</div>
<div class="pl">Liked Songs</div>
</div>
</div>
<div class="main">
<div class="topbar">
<div class="search">Search</div>
<button class="pillbtn">Upgrade</button>
</div>
<h2>Good afternoon</h2>
<div class="cardgrid">
<div class="card"><div class="art a1"></div><div class="t">Today's Top Hits</div><div class="s">The hits right now</div><div class="play"></div></div>
<div class="card"><div class="art a2"></div><div class="t">Discover Weekly</div><div class="s">Made for you</div><div class="play"></div></div>
<div class="card"><div class="art a3"></div><div class="t">RapCaviar</div><div class="s">New hip-hop</div><div class="play"></div></div>
<div class="card"><div class="art a4"></div><div class="t">Chill Hits</div><div class="s">Kick back and relax</div><div class="play"></div></div>
</div>
<h2>Recently played</h2>
<div class="cardgrid">
<div class="card"><div class="art a4"></div><div class="t">Daily Mix 1</div><div class="s">Spotify · Mixed for you</div></div>
<div class="card"><div class="art a3"></div><div class="t">Release Radar</div><div class="s">New music this week</div></div>
<div class="card"><div class="art a2"></div><div class="t">On Repeat</div><div class="s">Songs you love right now</div></div>
<div class="card"><div class="art a1"></div><div class="t">Liked Songs</div><div class="s">342 songs</div></div>
</div>
</div>
<div class="nowplaying">
<div class="np-art"></div>
<div class="np-text"><div class="t">Track Name</div><div class="s">Artist Name</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e0e10; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e0e10; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8d8e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #18181b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e0e10; color: #ffffff;
border: 1px solid #18181b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0e0e10; color: #f5f5f5;
border: 1px solid #333335; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8d8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #101012; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0E0E10; color:#EFEFF1; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.grid { width:340px; padding:16px; display:flex; flex-direction:column; gap:14px; overflow:hidden; }
.gridhead { font-size:16px; font-weight:700; }
.lcard { border-radius:6px; overflow:hidden; }
.thumb { height:110px; position:relative; }
.t1 { background:linear-gradient(160deg,#3a1a55,#111); }
.t2 { background:linear-gradient(160deg,#1a3a3a,#111); }
.livepill { position:absolute; top:6px; left:6px; background:#EB0400; color:#fff; font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px; }
.viewpill { position:absolute; bottom:6px; left:6px; background:rgba(0,0,0,0.6); color:#fff; font-size:11px; padding:2px 6px; border-radius:4px; }
.lmeta { display:flex; gap:8px; padding:6px 2px; }
.lav { width:28px; height:28px; border-radius:50%; background:#9146FF; flex-shrink:0; }
.ltitle { font-size:13px; font-weight:600; }
.lchan { font-size:12px; color:#ADADB8; }
.stream { flex:1; display:flex; flex-direction:column; }
.video { flex:1; background:linear-gradient(160deg,#1a1a1a,#000); position:relative; }
.channelbar { height:56px; display:flex; align-items:center; gap:12px; padding:0 16px; background:#0E0E10; border-bottom:1px solid #2A2A2D; }
.cav { width:36px; height:36px; border-radius:50%; background:#9146FF; border:2px solid #EB0400; }
.cname { font-size:16px; font-weight:700; }
.followbtn { margin-left:auto; background:#9146FF; color:#fff; font-size:14px; font-weight:700; padding:8px 16px; border-radius:6px; }
.viewers { font-size:13px; color:#ADADB8; margin-left:16px; }
.chat { height:220px; background:#18181B; padding:10px 14px; display:flex; flex-direction:column; gap:6px; overflow:hidden; }
.cline { font-size:14px; line-height:1.35; }
.cline b { font-weight:700; }
.chatinput { height:44px; background:#1F1F23; border-radius:8px; margin:0 14px 14px; display:flex; align-items:center; padding:0 14px; color:#ADADB8; font-size:15px; }
</style></head>
<body>
<div class="app">
<div class="grid">
<div class="gridhead">Live Channels</div>
<div class="lcard"><div class="thumb t1"><span class="livepill">● LIVE</span><span class="viewpill">● 12.4K</span></div>
<div class="lmeta"><div class="lav"></div><div><div class="ltitle">Ranked grind to Masters</div><div class="lchan">proplayer · League</div></div></div></div>
<div class="lcard"><div class="thumb t2"><span class="livepill">● LIVE</span><span class="viewpill">● 3.1K</span></div>
<div class="lmeta"><div class="lav"></div><div><div class="ltitle">late night jazz + code</div><div class="lchan">lofi.dev · Music</div></div></div></div>
</div>
<div class="stream">
<div class="channelbar">
<div class="cav"></div>
<div class="cname">Twitch (iOS)</div>
<span class="viewers">12.4K viewers</span>
<div class="followbtn">♥ Follow</div>
</div>
<div class="video"><span class="livepill" style="position:absolute;top:12px;left:12px">● LIVE</span></div>
<div class="chat">
<div class="cline"><b style="color:#9146FF">modjess:</b> welcome in everyone 👋</div>
<div class="cline"><b style="color:#00C16E">newbie22:</b> what game is this</div>
<div class="cline" style="background:rgba(145,70,255,0.20);border-left:2px solid #9146FF;padding-left:6px"><b style="color:#F5A623">@you</b> mentioned you</div>
<div class="cline"><b style="color:#579DFF">chatterbox:</b> that play was clean 🔥</div>
</div>
<div class="chatinput">Send a message</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1d1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1d1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: 0.231px; margin: 0; color: #1d1d1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.0; letter-spacing: -0.12px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.47; letter-spacing: -0.374px; background: #0066cc; color: #ffffff;
border: none; border-radius: 9999px; padding: 11px 22px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.47; letter-spacing: -0.374px; background: #ffffff; color: #0066cc;
border: 1px solid #0066cc; border-radius: 9999px;
padding: 11px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.47; letter-spacing: -0.374px; background: #ffffff; color: #1d1d1f;
border: 1px solid #c6c6c7; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.43; letter-spacing: -0.224px; background: #ffffff; color: #1d1d1f;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f7; color:#1d1d1f; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; background:#000000; }
.brand { color:#f5f5f7; font-size:15px; font-weight:600; letter-spacing:-0.2px; margin:0; }
.navlinks { display:flex; gap:26px; }
.navlinks span { color:#f5f5f7; opacity:0.72; font-size:12px; font-weight:400; }
.stage { display:flex; height:588px; }
.productPane { width:520px; background:#000000; position:relative; display:flex;
flex-direction:column; align-items:center; justify-content:center; padding:28px; overflow:hidden; }
.productPane .eyebrow { color:#6e6e73; font-size:13px; font-weight:600; letter-spacing:0.02em; margin:0 0 6px; }
.productPane h1 { color:#f5f5f7; font-size:34px; font-weight:600; letter-spacing:-0.6px; margin:0 0 10px; text-align:center; }
.productPane p.tag { color:#a1a1a6; font-size:15px; margin:0 0 28px; text-align:center; max-width:360px; }
.device { position:relative; width:230px; height:230px; margin-bottom:20px; }
.device .ring { position:absolute; inset:0; border-radius:50%;
background:radial-gradient(circle at 34% 28%, #3a3a3c, #0071e3 46%, #000000 100%);
box-shadow: inset 0 0 40px rgba(255,255,255,0.08); }
.device .core { position:absolute; left:50%; top:50%; width:96px; height:96px; margin:-48px 0 0 -48px;
border-radius:22px; background:linear-gradient(145deg,#2997ff,#0071e3); }
.pillrow { display:flex; gap:12px; }
.btn-primary { background:#0071e3; color:#ffffff; border:none; border-radius:980px;
padding:11px 21px; font-weight:400; font-size:15px; }
.btn-outline { background:transparent; color:#2997ff; border:1px solid #2997ff; border-radius:980px;
padding:11px 21px; font-weight:400; font-size:15px; }
.thumbrow { position:absolute; bottom:20px; left:28px; right:28px; display:flex; gap:10px; justify-content:center; }
.thumb { width:40px; height:40px; border-radius:10px; background:#1d1d1f; border:1px solid #3a3a3c; }
.thumb.active { border-color:#2997ff; background:#0071e3; }
.buyPane { flex:1; background:#ffffff; padding:30px 32px; display:flex; flex-direction:column; }
.buyPane h2 { font-size:22px; font-weight:600; letter-spacing:-0.3px; margin:0 0 4px; }
.buyPane .price { font-size:19px; font-weight:400; color:#1d1d1f; margin:0 0 18px; }
.buyPane .price span { color:#6e6e73; font-size:13px; font-weight:400; margin-left:8px; }
.swatchLabel { font-size:12px; color:#6e6e73; margin:0 0 8px; font-weight:400; }
.swatches { display:flex; gap:10px; margin-bottom:22px; }
.swatch { width:26px; height:26px; border-radius:50%; border:2px solid transparent; }
.s1{background:#e3e4e6;} .s2{background:#1d1d1f; border-color:#0071e3;} .s3{background:#0071e3;} .s4{background:#8e6b4f;}
.specs { border-top:1px solid #d2d2d7; padding-top:16px; margin-top:auto; }
.specrow { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #e8e8ed; font-size:13px; }
.specrow span:first-child { color:#6e6e73; }
.specrow span:last-child { color:#1d1d1f; font-weight:400; }
.buyBtn { margin-top:18px; background:#0071e3; color:#ffffff; border:none; border-radius:980px;
padding:12px 0; width:100%; font-size:16px; font-weight:400; text-align:center; }
.buyOutline { margin-top:10px; background:transparent; color:#0066cc; border:1px solid #0066cc; border-radius:980px;
padding:11px 0; width:100%; font-size:15px; font-weight:400; text-align:center; }
</style></head>
<body>
<nav>
<p class="brand">Apple</p>
<div class="navlinks"><span>Store</span><span>Mac</span><span>iPad</span><span>Watch</span><span>Support</span></div>
</nav>
<div class="stage">
<div class="productPane">
<p class="eyebrow">Apple</p>
<h1>Designed to feel inevitable.</h1>
<p class="tag">Precision hardware, calm software, and a single blue action to move forward.</p>
<div class="device"><div class="ring"></div><div class="core"></div></div>
<div class="pillrow">
<button class="btn-primary">Buy</button>
<button class="btn-outline">Learn more</button>
</div>
<div class="thumbrow">
<div class="thumb active"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div>
</div>
</div>
<div class="buyPane">
<h2>Apple Studio, 256GB</h2>
<p class="price">$1,199.00 <span>or $99.91/mo. for 12 mo.</span></p>
<p class="swatchLabel">Finish</p>
<div class="swatches">
<div class="swatch s1"></div><div class="swatch s2"></div><div class="swatch s3"></div><div class="swatch s4"></div>
</div>
<div class="specs">
<div class="specrow"><span>Chip</span><span>M-series, 12-core</span></div>
<div class="specrow"><span>Display</span><span>13.6-inch Liquid Retina</span></div>
<div class="specrow"><span>Battery</span><span>Up to 18 hours</span></div>
<div class="specrow"><span>Finish</span><span>Space Grey</span></div>
</div>
<button class="buyBtn">Add to Bag</button>
<button class="buyOutline">Check availability</button>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0ece6; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0ece6; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 13px; font-weight: 400; line-height: 1.35; letter-spacing: 0.2px; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #221155; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #f0ece6; color: #221155;
border: 1px solid #221155; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #b8b5b1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #e84040; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f0ece6; font-family:'Rubik',Arial,sans-serif; color:#111111;
}
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#221155;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:12px;color:#cfc7ea;font-weight:500;}
.cta{background:#e84040;color:#fff;padding:9px 16px;font-size:11.5px;font-weight:700;}
.hero{display:flex;padding:24px 30px 16px;gap:0;border-bottom:1px solid #ddd6c9;}
.hero-copy{width:360px;padding-right:20px;}
.hero-eyebrow{font-family:'Times New Roman',serif;font-style:italic;font-size:13px;color:#221155;margin-bottom:8px;}
.hero-title{font-size:32px;font-weight:700;line-height:1.1;margin-bottom:12px;}
.hero-sub{font-size:13px;line-height:1.55;color:#333;margin-bottom:14px;}
.btn-flat{display:inline-block;background:#221155;color:#fff;padding:11px 20px;font-size:12px;font-weight:700;}
.hero-visual{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.art{border-radius:0;background:#fff;border:1px solid #ddd6c9;position:relative;}
.art .frame{position:absolute;inset:10px;background:linear-gradient(160deg,#e84040,#221155);}
.art.b .frame{background:linear-gradient(160deg,#b5340f,#e64a19);}
.art.c .frame{background:linear-gradient(160deg,#221155,#111);}
.section{padding:14px 30px 0;}
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;}
.section-title{font-size:16px;font-weight:700;}
.section-sub{font-family:'Times New Roman',serif;font-style:italic;font-size:12px;color:#555;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.card{background:#fff;border:1px solid #ddd6c9;}
.card-img{height:112px;background:#e8e2d6;position:relative;}
.card-img .art-fill{position:absolute;inset:0;background:linear-gradient(155deg,#e84040 0%,#221155 100%);}
.badge{position:absolute;top:6px;left:6px;background:#e64a19;color:#fff;font-size:8px;font-weight:700;padding:3px 6px;}
.card-body{padding:8px 8px 10px;}
.artist{font-family:'Times New Roman',serif;font-size:10px;color:#555;margin-bottom:2px;}
.card-name{font-size:12px;font-weight:600;margin-bottom:5px;}
.card-price{font-size:12px;font-weight:700;color:#221155;}
</style>
<div class="nav">
<div class="logo">East End Prints</div>
<div class="navlinks"><span>Prints</span><span>Artists</span><span>Frames</span><span>Sale</span></div>
<div class="cta">Shop Sale</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="hero-eyebrow">Independent art, honestly priced</div>
<div class="hero-title">Original work should cost less than dinner out.</div>
<div class="hero-sub">Limited-edition prints from independent artists across London — printed on museum-grade stock, shipped rolled or ready to hang.</div>
<div class="btn-flat">Browse The Gallery</div>
</div>
<div class="hero-visual">
<div class="art"><div class="frame"></div></div>
<div class="art b"><div class="frame"></div></div>
<div class="art c"><div class="frame"></div></div>
</div>
</div>
<div class="section">
<div class="section-head"><div class="section-title">New This Week</div><div class="section-sub">from the studio</div></div>
<div class="grid">
<div class="card"><div class="card-img"><div class="art-fill"></div><div class="badge">NEW</div></div><div class="card-body"><div class="artist">A. Winterbourne</div><div class="card-name">Coastal Fragments No.3</div><div class="card-price">£45.00</div></div></div>
<div class="card"><div class="card-img"><div class="art-fill"></div></div><div class="card-body"><div class="artist">R. Halloway</div><div class="card-name">Midnight Terrace</div><div class="card-price">£38.00</div></div></div>
<div class="card"><div class="card-img"><div class="art-fill"></div><div class="badge">-20%</div></div><div class="card-body"><div class="artist">M. Osei</div><div class="card-name">Quiet Geometry II</div><div class="card-price">£29.00</div></div></div>
<div class="card"><div class="card-img"><div class="art-fill"></div></div><div class="card-body"><div class="artist">L. Petrenko</div><div class="card-name">Field Study, Ochre</div><div class="card-price">£52.00</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2d3142;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2d3142;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #2d3142; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8b8b8b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0.6px; background: #e5c225; color: #2d3142;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0.6px; background: #2d3142; color: #ffffff;
border: 1px solid #e5c225; border-radius: 4px;
padding: 14px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2d3142;
border: 1px solid #dedede; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b8b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.4px; background: #d76800; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; color:#33363f; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-size:20px;font-weight:800;color:#2d3142;letter-spacing:-.3px;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:700;color:#2d3142;}
.hero{height:230px;background:#f5f5f5;display:flex;align-items:center;padding:0 32px;}
.heroText{width:420px;}
.h1{font-size:30px;font-weight:800;line-height:1.15;color:#2d3142;margin:0 0 12px;letter-spacing:-.4px;}
.sub{font-size:14px;line-height:1.5;color:#33363f;margin:0 0 18px;max-width:360px;}
.btn{display:inline-block;background:#e5c225;color:#2d3142;font-size:13px;font-weight:700;padding:12px 24px;border-radius:2px;}
.swatchwrap{margin-left:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.swatch{width:38px;height:38px;border-radius:9999px;}
.sec{padding:20px 32px 0;}
.secTitle{font-size:17px;font-weight:800;color:#2d3142;margin-bottom:14px;}
.grid{display:flex;gap:12px;}
.card{width:224px;border:1px solid #dedede;border-radius:4px;padding:10px;}
.thumb{height:96px;background:#f5f5f5;border-radius:2px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:700;color:#2d3142;margin:0 0 4px;}
.pprice{font-size:13px;font-weight:700;color:#33363f;}
.custom{font-size:10px;color:#d76800;font-weight:700;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Timbuk2</div>
<div class="navlinks"><div>Backpacks</div><div>Messengers</div><div>Custom Builder</div><div>Travel</div></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Built by messengers.<br>Customized by you.</div>
<div class="sub">Mix panel, strap, and lining colors to build a bag that's built like nobody else's.</div>
<div class="btn">Build Your Bag</div>
</div>
<div class="swatchwrap">
<div class="swatch" style="background:#e5c225;"></div>
<div class="swatch" style="background:#42583f;"></div>
<div class="swatch" style="background:#f03680;"></div>
<div class="swatch" style="background:#d76800;"></div>
<div class="swatch" style="background:#9370b3;"></div>
<div class="swatch" style="background:#0ab968;"></div>
<div class="swatch" style="background:#c23838;"></div>
<div class="swatch" style="background:#2d3142;"></div>
</div>
</div>
<div class="sec">
<div class="secTitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e5c225,#2d3142);"></div><div class="pname">Especial Messenger Bag</div><div class="pprice">$149</div><div class="custom">8 colorways</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#42583f,#e8daca);"></div><div class="pname">Classic Backpack</div><div class="pprice">$119</div><div class="custom">12 colorways</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f03680,#ebccc7);"></div><div class="pname">Especial Cycling Pannier</div><div class="pprice">$139</div><div class="custom">6 colorways</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d76800,#f6c960);"></div><div class="pname">Command Laptop Sleeve</div><div class="pprice">$59</div><div class="custom">5 colorways</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #313131; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 4px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #bfbfbf; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffc107; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Dusty Groove Independent Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
background:#ffffff; color:#000000;
}
*{box-sizing:border-box;}
.nav{height:48px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.logo{font-weight:700;font-size:16px;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;color:#333;}
.navlinks span.active{color:#313131;font-weight:700;}
.searchbar{background:#fff;border:1px solid #cccccc;border-radius:4px;padding:10px 16px;font-size:14px;color:#333;width:280px;}
.filters{display:flex;gap:8px;padding:14px 28px 0;}
.filterchip{background:#f5f5f5;border:1px solid #e0e0e0;border-radius:9999px;padding:6px 14px;font-size:12px;font-weight:600;color:#333;}
.filterchip.active{background:#313131;color:#fff;border-color:#313131;}
.section{padding:14px 28px 0;}
.grid{display:flex;gap:14px;}
.card{flex:1;background:#fff;border:1px solid #e0e0e0;border-radius:4px;padding:8px;}
.card-img{aspect-ratio:1/1;border-radius:2px;margin-bottom:8px;position:relative;}
.card-img.c1{background:linear-gradient(135deg,#313131,#007bff);}
.card-img.c2{background:linear-gradient(135deg,#666,#ffc107);}
.card-img.c3{background:linear-gradient(135deg,#dc3545,#313131);}
.card-img.c4{background:linear-gradient(135deg,#2d8a2d,#313131);}
.badge{position:absolute;top:6px;left:6px;background:#ffc107;color:#000;font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:2px;}
.artist{color:#666;font-size:13px;}
.title{font-weight:600;font-size:16px;margin:4px 0;}
.price{color:#2d8a2d;font-weight:600;font-size:15px;}
.cartstrip{display:flex;justify-content:flex-end;padding:16px 28px 0;}
.checkoutbtn{background:#2d8a2d;color:#fff;font-size:14px;font-weight:600;padding:12px 24px;border-radius:4px;}
</style>
<nav class="nav">
<div class="logo">Dusty Groove Independ 2</div>
<div class="navlinks">
<span class="active">Vinyl</span><span>CDs</span><span>Rarities</span><span>Sell Your Records</span>
</div>
<div class="searchbar">Search artist, label, or catalog number…</div>
</nav>
<div class="filters">
<div class="filterchip active">Jazz</div>
<div class="filterchip">Soul</div>
<div class="filterchip">Funk</div>
<div class="filterchip">Reissue</div>
<div class="filterchip">Sealed</div>
</div>
<div class="section">
<div class="grid">
<div class="card"><div class="card-img c1"><span class="badge">New</span></div><div class="artist">Pharoah Sanders</div><div class="title">Tauhid</div><div class="price">$27.99</div></div>
<div class="card"><div class="card-img c2"></div><div class="artist">Marlena Shaw</div><div class="title">Live at Montreux</div><div class="price">$21.99</div></div>
<div class="card"><div class="card-img c3"></div><div class="artist">The Meters</div><div class="title">Cabbage Alley</div><div class="price">$18.99</div></div>
<div class="card"><div class="card-img c4"><span class="badge" style="background:#dc3545;color:#fff;">Sale</span></div><div class="artist">Gil Scott-Heron</div><div class="title">Winter in America</div><div class="price">$16.99</div></div>
</div>
</div>
<div class="cartstrip">
<div class="checkoutbtn">Proceed to Checkout</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ccff00; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ccff00;
border: 1px solid #ccff00; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #212900; color: #ccff00;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Arial Narrow", "Helvetica Neue Condensed Bold", Arial, sans-serif; }
* { box-sizing:border-box; }
.cond { font-stretch:condensed; letter-spacing:0.3pt; }
.shell { display:flex; width:960px; height:640px; }
.track { flex:1; display:flex; flex-direction:column; align-items:center; padding:26px 20px 22px; position:relative; }
.statrow { display:flex; justify-content:space-between; width:100%; max-width:460px; margin-bottom:6px; }
.stat { text-align:center; }
.stat .l { font-size:12px; font-weight:700; letter-spacing:1pt; color:rgba(255,255,255,0.7); text-transform:uppercase; }
.stat .v { font-size:42px; font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:0.3pt; }
.ring-wrap { position:relative; width:230px; height:230px; margin:14px 0; }
.ring-track { position:absolute; inset:0; border-radius:50%; border:6px solid rgba(255,255,255,0.1); }
.ring-fill { position:absolute; inset:0; border-radius:50%;
background: conic-gradient(#CCFF00 0deg 260deg, transparent 260deg 360deg);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
transform: rotate(-90deg); }
.ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-center .time { font-size:56px; font-weight:900; font-variant-numeric:tabular-nums; }
.ring-center .lbl { font-size:12px; font-weight:700; letter-spacing:1pt; color:rgba(255,255,255,0.7); text-transform:uppercase; margin-top:2px; }
.btnrow { display:flex; align-items:center; gap:16px; margin-top:10px; }
.pausebtn { width:64px; height:64px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; color:#000; }
.lockbtn { width:40px; height:40px; border-radius:50%; background:#1A1A1A; display:flex; align-items:center; justify-content:center; font-size:16px; }
.side { width:300px; height:640px; background:#0A0A0A; border-left:1px solid #333; padding:22px 20px; display:flex; flex-direction:column; gap:16px; }
.brandline { font-size:13px; font-weight:900; letter-spacing:1pt; color:#CCFF00; text-transform:uppercase; }
.headline { font-size:28px; font-weight:900; letter-spacing:0.3pt; text-transform:uppercase; line-height:0.98; }
.plancard { position:relative; height:150px; border-radius:16px; overflow:hidden;
background: linear-gradient(160deg,#3a2410,#120c04); }
.plancard::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,0.75), transparent 60%); }
.plancard .c { position:absolute; left:14px; right:14px; bottom:12px; z-index:2; }
.plancard .eyebrow { font-size:10px; font-weight:600; letter-spacing:0.5pt; color:rgba(255,255,255,0.7); text-transform:uppercase; }
.plancard .title { font-size:20px; font-weight:900; text-transform:uppercase; margin-top:2px; }
.medal { display:flex; align-items:center; gap:14px; background:#1A1A1A; border-radius:16px; padding:14px; }
.hex { width:56px; height:56px; flex:none; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
background: linear-gradient(135deg,#CCFF00,#FA5400); display:flex; align-items:center; justify-content:center;
font-weight:900; font-size:18px; color:#000; }
.medal .mt { font-size:14px; font-weight:900; text-transform:uppercase; }
.medal .ms { font-size:11px; color:#8E8E8E; margin-top:2px; }
.ctabtn { margin-top:auto; height:52px; border-radius:26px; background:#fff; color:#000; display:flex; align-items:center; justify-content:center;
font-size:15px; font-weight:900; text-transform:uppercase; letter-spacing:0.4pt; }
</style></head>
<body>
<div class="shell">
<div class="track">
<div class="statrow">
<div class="stat"><div class="l">Distance</div><div class="v">1.4</div></div>
<div class="stat"><div class="l">Pace</div><div class="v">8:42</div></div>
<div class="stat"><div class="l">BPM</div><div class="v">152</div></div>
</div>
<div class="ring-wrap">
<div class="ring-track"></div>
<div class="ring-fill"></div>
<div class="ring-center">
<span class="time">12:34</span>
<span class="lbl">Elapsed</span>
</div>
</div>
<div class="btnrow">
<div class="pausebtn">❚❚</div>
<div class="lockbtn">🔒</div>
</div>
</div>
<div class="side">
<div class="brandline">Nike Run Club (iOS)</div>
<div class="headline">Let's Do This</div>
<div class="plancard">
<div class="c">
<div class="eyebrow">Coach Bennett · 30 min</div>
<div class="title">Recovery Mile</div>
</div>
</div>
<div class="medal">
<div class="hex">100</div>
<div>
<div class="mt">100 Miles</div>
<div class="ms">Lifetime distance</div>
</div>
</div>
<div class="ctabtn">Start Run</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #222222; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #222222; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #969696; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #98ffac; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #222222; color: #98ffac;
border: 1px solid #98ffac; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #222222; color: #f5f5f5;
border: 1px solid #444444; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969696; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #354538; color: #98ffac;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #eeeeee; }
.brand { font-size:16px; font-weight:600; color:#222; }
.navlinks { display:flex; gap:24px; font-size:14px; color:#222; font-weight:500; }
.btn-sm { background:#222222; color:#fff; border-radius:4px; padding:10px; font-size:14px; font-weight:600; }
.hero { padding:30px 32px 20px; text-align:center; }
.hero p.eyebrow { font-size:13px; color:#999; margin:0 0 8px; }
.hero h1 { font-size:32px; font-weight:600; margin:0 0 14px; }
.herobtns { display:flex; gap:10px; justify-content:center; }
.btn { height:48px; padding:0 28px; font-size:16px; font-weight:600; display:flex; align-items:center; border-radius:4px; }
.btn.dark { background:#222222; color:#fff; }
.btn.light { background:#fff; color:#222; border:1px solid #bbbbbb; }
.demo { margin:0 32px 20px; border:1px solid #eeeeee; border-radius:4px; padding:16px; display:flex; gap:14px; align-items:center; }
.demo .tabs { display:flex; gap:16px; font-size:13px; color:#999; }
.demo .tabs .active { color:#3a89ff; font-weight:700; }
.demo .record { margin-left:auto; background:#3a89ff; color:#fff; border-radius:60px; padding:8px 22px; font-size:13px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); background:#222222; }
.stat { padding:24px; text-align:center; border-right:1px solid #333; }
.stat:last-child { border-right:none; }
.stat .num { font-size:52px; font-weight:300; color:#fff; margin:0; }
.stat .num.mint { color:#98ffac; font-size:36px; font-weight:600; }
.stat p.lab { font-size:12px; color:#999; margin:6px 0 0; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:20px 32px; }
.card { border:1px solid #eeeeee; border-radius:4px; padding:16px; }
.card h4 { font-size:14px; font-weight:600; color:#2e67fe; margin:0 0 6px; }
.card p { font-size:12px; color:#666; margin:0; line-height:1.5; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #eeeeee; padding:10px 32px;
display:flex; justify-content:space-between; font-size:11px; color:#999; }
</style></head>
<body style="position:relative">
<nav>
<span class="brand">Return Zero</span>
<div class="navlinks"><span>COMPANY</span><span>STT</span><span>CALLABO</span><span>VITO</span></div>
<span class="btn-sm">Contact Us</span>
</nav>
<section class="hero">
<p class="eyebrow">RTZR STT — Speech Recognition Infrastructure</p>
<h1>The Most Accurate Korean Speech Recognition</h1>
<div class="herobtns">
<span class="btn dark">Explore RTZR STT</span>
<span class="btn light">Try It Now</span>
</div>
</section>
<div class="demo">
<div class="tabs"><span class="active">Live Recording</span><span>File Upload</span><span>Sample File</span></div>
<span class="record">● Start Recording</span>
</div>
<div class="stats">
<div class="stat"><p class="num">35</p><p class="lab">Languages Supported</p></div>
<div class="stat"><p class="num mint">2.5x</p><p class="lab">Faster Processing</p></div>
<div class="stat"><p class="num">48</p><p class="lab">Industry Domains</p></div>
</div>
<div class="cards">
<div class="card"><h4>Callabo</h4><p>Automatically analyzes call quality and insights.</p></div>
<div class="card"><h4>Vito</h4><p>Automatically summarizes and organizes meeting notes.</p></div>
<div class="card"><h4>Developers</h4><p>Build your own voice service with the STT API.</p></div>
</div>
<footer>
<span>© Return Zero</span>
<span>COMPANY · RTZR STT · CALLABO · VITO</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #343434;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #343434;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #343434; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #8a8a8a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.7px; background: #bbaf80; color: #000000;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.7px; background: #ffffff; color: #343434;
border: 1px solid #bbaf80; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; background: transparent; color: #343434;
border: 1px solid #cccccc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.6px; background: #bbaf80; color: #000000;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#343434; box-sizing:border-box;
font-family:'Roboto Condensed',Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:Georgia,'Times New Roman',serif; }
nav { height:56px; background:#ffffff; border-bottom:1px solid #d4d4d4; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.brand { font-size:18px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.navlinks { display:flex; gap:26px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#343434; }
.navlinks span.on { color:#a3946a; }
.wrap { display:flex; height:520px; }
.cover { width:420px; background:linear-gradient(160deg,#1a1a1a 0%,#343434 100%); position:relative; }
.cover::after { content:''; position:absolute; inset:40px; border:1px solid rgba(187,175,128,.4); }
.cover-year { position:absolute; top:60px; left:60px; color:#bbaf80; font-size:13px; letter-spacing:.1em; }
.info { flex:1; padding:44px 44px; display:flex; flex-direction:column; gap:16px; }
.info .cat { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:#8a8a8a; }
.info h1 { font-family:Georgia,serif; font-size:26px; font-weight:700; margin:0; line-height:1.3; }
.artist { font-size:13px; color:#4a4a4a; }
.format-row { display:flex; gap:10px; }
.format { border:1px solid #d4d4d4; padding:8px 16px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.format.on { border-color:#a3946a; color:#a3946a; }
.desc { font-size:13px; color:#4a4a4a; line-height:1.7; max-width:420px; font-family:Georgia,serif; }
.price { font-family:Georgia,serif; font-size:19px; color:#343434; }
.buy-row { display:flex; align-items:center; gap:16px; margin-top:auto; }
.btn-buy { background:transparent; border:1px solid #bbaf80; color:#a3946a; padding:12px 30px; font-size:12px;
text-transform:uppercase; letter-spacing:.1em; border-radius:8px; }
footer { height:64px; background:#f2f2f2; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; font-size:11px; color:#4a4a4a; }
</style></head>
<body>
<nav>
<p class="brand">4ad</p>
<div class="navlinks"><span>Releases</span><span class="on">Shop</span><span>Artists</span><span>Journal</span></div>
</nav>
<div class="wrap">
<div class="cover"><span class="cover-year">MMXXVI</span></div>
<div class="info">
<span class="cat">LP · Album</span>
<h1>Slow Light in Reverse</h1>
<span class="artist">Wren Sorrow</span>
<div class="format-row">
<span class="format on">Vinyl LP</span>
<span class="format">CD</span>
<span class="format">Digital</span>
</div>
<p class="desc">A quiet, corrosive record built from tape loops and half-remembered melodies — the label's first release in this register since its earliest years.</p>
<span class="price">£22.00</span>
<div class="buy-row">
<button class="btn-buy">Buy</button>
</div>
</div>
</div>
<footer><span>© 4ad, since 1980</span><span>Mailing List · Shipping · Contact</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #009ddc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #009ddc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #003b5c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #009ddc; color: #003b5c;
border: 1px solid #003b5c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #009ddc; color: #f5f5f5;
border: 1px solid #27abe0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #008dc8; color: #003b5c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#10222E; box-sizing:border-box;
font-family:'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.tnum { font-variant-numeric:tabular-nums; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
border-bottom:1px solid #DBE3E8; background:#FFFFFF; }
.brand { font-size:17px; font-weight:800; letter-spacing:-0.3px; color:#003B5C; margin:0; }
.bell { width:30px; height:30px; border-radius:50%; border:1.5px solid #DBE3E8; display:flex;
align-items:center; justify-content:center; font-size:13px; color:#5A707C; }
.wrap { display:flex; height:588px; }
/* LEFT: accounts rail */
.rail { width:360px; border-right:1px solid #DBE3E8; overflow:hidden; }
.hero { background:linear-gradient(160deg,#003B5C,#002A42); padding:20px 22px 22px; color:#fff; }
.hero .lbl { font-size:11px; font-weight:600; letter-spacing:0.5px; color:#9DC4D8; text-transform:uppercase; margin:0 0 6px; }
.hero .val { font-size:32px; font-weight:800; letter-spacing:-0.8px; margin:0; }
.hero .chg { font-size:12px; font-weight:700; color:#5FE3B0; margin-top:6px; }
.hero .chg span { color:#9DC4D8; font-weight:400; margin-left:4px; }
.acct-list { padding:6px 0; }
.acct { display:flex; align-items:center; gap:12px; padding:11px 20px; border-bottom:1px solid #DBE3E8; }
.acct.sel { background:#F2F6F8; }
.aicon { width:34px; height:34px; border-radius:9px; background:#18303F; display:flex; align-items:center;
justify-content:center; color:#46BEEC; font-size:14px; font-weight:800; flex-shrink:0; }
.aname { font-size:14px; font-weight:700; margin:0; }
.amask { font-size:11px; color:#5A707C; margin:2px 0 0; }
.abal { margin-left:auto; text-align:right; }
.abal .b { font-size:14px; font-weight:800; }
.abal .p { font-size:11px; font-weight:700; margin-top:2px; }
.gain { color:#16895F; } .loss { color:#C8443D; }
/* RIGHT: trade ticket */
.ticket-pane { flex:1; padding:22px 30px; overflow:hidden; }
.quote { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.quote .sym { font-size:22px; font-weight:800; }
.quote .px { font-size:22px; font-weight:800; margin-left:auto; }
.quote .chg { font-size:13px; font-weight:700; }
.card { background:#F2F6F8; border-radius:12px; padding:16px; }
.seg { display:flex; background:#FFFFFF; border-radius:8px; padding:3px; margin-bottom:16px; width:220px; }
.seg div { flex:1; text-align:center; padding:8px 0; font-size:13px; font-weight:700; border-radius:6px; color:#5A707C; }
.seg .buy { background:#009DDC; color:#002233; }
.frow { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid #DBE3E8; }
.frow:last-child { border-bottom:none; }
.frow .lab { font-size:13px; font-weight:600; color:#5A707C; }
.frow .v { font-size:16px; font-weight:800; }
.est { display:flex; justify-content:space-between; margin-top:14px; padding-top:14px; border-top:1px solid #DBE3E8; }
.est .lab { font-size:13px; font-weight:600; color:#5A707C; }
.est .v { font-size:18px; font-weight:800; color:#003B5C; }
.review { margin-top:18px; width:100%; background:#009DDC; color:#002233; border:none; border-radius:8px;
padding:14px; font-size:16px; font-weight:800; text-align:center; }
.balances { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.btile { background:#18303F; color:#fff; border-radius:12px; padding:12px 14px; }
.btile .l { font-size:11px; font-weight:600; color:#9DB2BF; }
.btile .v { font-size:17px; font-weight:800; margin-top:3px; }
</style></head>
<body>
<nav>
<p class="brand">Charles Schwab (iOS)</p>
<div class="bell">🔔</div>
</nav>
<div class="wrap">
<div class="rail">
<div class="hero">
<p class="lbl">Total Value</p>
<p class="val tnum">$612,408.55</p>
<p class="chg tnum">▲ +$5,204.18 <span>(+0.86%) today</span></p>
</div>
<div class="acct-list">
<div class="acct sel">
<div class="aicon">B</div>
<div><p class="aname">Individual Brokerage</p><p class="amask">••4471</p></div>
<div class="abal"><div class="b tnum">$402,118.30</div><div class="p gain tnum">+1.12%</div></div>
</div>
<div class="acct">
<div class="aicon">R</div>
<div><p class="aname">Roth IRA</p><p class="amask">••7790</p></div>
<div class="abal"><div class="b tnum">$168,902.00</div><div class="p loss tnum">-0.34%</div></div>
</div>
<div class="acct">
<div class="aicon">C</div>
<div><p class="aname">Schwab Bank Checking</p><p class="amask">••1024</p></div>
<div class="abal"><div class="b tnum">$41,388.25</div><div class="p tnum" style="color:#5A707C">0.00%</div></div>
</div>
</div>
</div>
<div class="ticket-pane">
<div class="quote">
<span class="sym">SCHW</span>
<span class="chg gain tnum">+1.8%</span>
<span class="px tnum">$74.62</span>
</div>
<div class="card">
<div class="seg"><div class="buy">Buy</div><div>Sell</div></div>
<div class="frow"><span class="lab">Symbol</span><span class="v">SCHW</span></div>
<div class="frow"><span class="lab">Quantity</span><span class="v tnum">50</span></div>
<div class="frow"><span class="lab">Order type</span><span class="v">Limit</span></div>
<div class="frow"><span class="lab">Limit price</span><span class="v tnum">$74.60</span></div>
<div class="est"><span class="lab">Estimated cost</span><span class="v tnum">$3,730.00</span></div>
</div>
<div class="review">Review order</div>
<div class="balances">
<div class="btile"><div class="l">CASH AVAILABLE</div><div class="v tnum">$18,204</div></div>
<div class="btile"><div class="l">BUYING POWER</div><div class="v tnum">$36,408</div></div>
<div class="btile"><div class="l">MARKET VALUE</div><div class="v tnum">$594,204</div></div>
<div class="btile"><div class="l">DAY CHANGE</div><div class="v gain tnum">+$5,204</div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #224099; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #224099; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #96a4cc; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0f1c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #224099; color: #ffffff;
border: 1px solid #0b0f1c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #224099; color: #f5f5f5;
border: 1px solid #445da8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #96a4cc; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1e3885; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0B0F1C; color:#EDF0F7; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-variant-numeric: tabular-nums; }
* { box-sizing:border-box; }
.screen { display:flex; flex-direction:column; width:960px; height:640px; }
main { flex:1; display:grid; grid-template-columns:1fr 320px; min-height:0; }
.nowplaying { position:relative; display:flex; flex-direction:column; align-items:center;
background:linear-gradient(180deg, #5B3A9E 0%, #1A2240 46%, #0B0F1C 82%); padding:18px 24px 22px; }
.np-topbar { width:100%; display:flex; align-items:center; justify-content:space-between; }
.np-chev { font-size:20px; color:#EDF0F7; opacity:0.9; }
.np-station { text-align:center; }
.np-eyebrow { font-size:11px; font-weight:700; letter-spacing:1pt; text-transform:uppercase; color:#9AA3BD; }
.np-name { font-size:13px; font-weight:700; margin-top:1px; }
.np-more { font-size:18px; color:#9AA3BD; letter-spacing:2px; }
.album { width:150px; height:150px; margin-top:14px; border-radius:10px;
background:linear-gradient(135deg,#8f5fd6,#3a2a63); box-shadow:rgba(0,0,0,0.7) 0 24px 50px -16px; }
.track-title { font-size:20px; font-weight:800; margin-top:14px; letter-spacing:-0.3px; text-align:center; }
.track-artist { font-size:14px; font-weight:500; color:#9AA3BD; margin-top:3px; }
.track-album { font-size:12px; font-weight:500; color:#646E8C; margin-top:1px; }
.scrub-wrap { width:78%; margin-top:16px; }
.scrub-track { width:100%; height:4px; background:#1E2538; border-radius:2px; position:relative; }
.scrub-fill { position:absolute; left:0; top:0; height:100%; width:44%; background:#3668FF; border-radius:2px; }
.scrub-knob { position:absolute; left:44%; top:50%; width:12px; height:12px; margin-left:-6px; margin-top:-6px; border-radius:50%; background:#fff; }
.scrub-times { display:flex; justify-content:space-between; font-size:11px; color:#646E8C; margin-top:6px; }
.transport { display:flex; align-items:center; justify-content:center; gap:22px; margin-top:14px; }
.thumb { font-size:22px; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.thumb-up { color:#fff; background:#3668FF; }
.thumb-down { color:#9AA3BD; border:1.5px solid #9AA3BD; background:transparent; }
.skipbtn { font-size:22px; color:#EDF0F7; }
.play-btn { width:58px; height:58px; border-radius:50%; background:#3668FF;
box-shadow:rgba(54,104,255,0.7) 0 10px 26px -8px; display:flex; align-items:center; justify-content:center; }
.play-btn .glyph { width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:15px solid #fff; margin-left:4px; }
.rightcol { background:#141A2B; padding:20px 18px; display:flex; flex-direction:column; overflow:hidden; }
.rc-title { font-size:19px; font-weight:800; letter-spacing:-0.2px; margin-bottom:10px; }
.srow { display:flex; align-items:center; gap:10px; height:58px; border-radius:12px; padding:0 8px; }
.srow.active { background:#1E2538; }
.sart { width:42px; height:42px; border-radius:8px; flex:0 0 42px; }
.sinfo { flex:1; min-width:0; }
.sname { font-size:14px; font-weight:700; }
.ssub { font-size:11px; color:#9AA3BD; margin-top:2px; }
.eq { display:flex; align-items:flex-end; gap:2px; height:16px; }
.eq span { width:3px; background:#3668FF; border-radius:1px; }
.tabbar { flex:0 0 62px; display:flex; align-items:center; justify-content:space-around;
background:#0B0F1C; border-top:0.5px solid #28304A; }
.tab { display:flex; flex-direction:column; align-items:center; gap:4px; }
.tab-dot { width:8px; height:8px; border-radius:2px; }
.tab.active .tab-dot { background:#EDF0F7; }
.tab:not(.active) .tab-dot { background:none; border:1.5px solid #646E8C; }
.tab-label { font-size:10px; font-weight:600; }
.tab.active .tab-label { color:#EDF0F7; }
.tab:not(.active) .tab-label { color:#646E8C; }
</style></head>
<body>
<div class="screen">
<main>
<div class="nowplaying">
<div class="np-topbar">
<span class="np-chev">⌄</span>
<div class="np-station">
<div class="np-eyebrow">Station</div>
<div class="np-name">Pandora (iOS) Frequencies Radio</div>
</div>
<span class="np-more">⋯</span>
</div>
<div class="album"></div>
<div class="track-title">Neon Reverie</div>
<div class="track-artist">The Glass Hours</div>
<div class="track-album">Neon Reverie · 2023</div>
<div class="scrub-wrap">
<div class="scrub-track"><div class="scrub-fill"></div><div class="scrub-knob"></div></div>
<div class="scrub-times"><span>1:42</span><span>-2:18</span></div>
</div>
<div class="transport">
<div class="thumb thumb-down">▽</div>
<span class="skipbtn">‹‹</span>
<div class="play-btn"><div class="glyph"></div></div>
<span class="skipbtn">››</span>
<div class="thumb thumb-up">△</div>
</div>
</div>
<div class="rightcol">
<div class="rc-title">My Collection</div>
<div class="srow active">
<div class="sart" style="background:linear-gradient(135deg,#8f5fd6,#3a2a63);"></div>
<div class="sinfo"><div class="sname">Neon Frequencies Radio</div><div class="ssub">Now playing · The Glass Hours</div></div>
<div class="eq"><span style="height:16px;"></span><span style="height:9px;"></span><span style="height:13px;"></span><span style="height:6px;"></span></div>
</div>
<div class="srow">
<div class="sart" style="background:linear-gradient(135deg,#3668FF,#1a2b6b);"></div>
<div class="sinfo"><div class="sname">Indie Folk Roots</div><div class="ssub">Station · 312 thumbs up</div></div>
</div>
<div class="srow">
<div class="sart" style="background:linear-gradient(135deg,#c4784a,#5c2f18);"></div>
<div class="sinfo"><div class="sname">Late Night Jazz Piano</div><div class="ssub">Station · 89 thumbs up</div></div>
</div>
<div class="srow">
<div class="sart" style="background:linear-gradient(135deg,#2f9e6b,#123527);"></div>
<div class="sinfo"><div class="sname">Sunday Morning Acoustic</div><div class="ssub">Station · 204 thumbs up</div></div>
</div>
</div>
</main>
<div class="tabbar">
<div class="tab active"><span class="tab-dot"></span><span class="tab-label">For You</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Browse</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">My Collection</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Recents</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #404040;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #404040;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #404040; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #bd2426; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #ffffff; color: #404040;
border: 1px solid #bd2426; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #404040;
border: 1px solid #cfcfcf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #bd2426; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family: Arial, 'Helvetica Neue', sans-serif; background:#fff; color:#595959; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #ebebeb;}
.logo{color:#bd2426;font-size:24px;font-weight:700;}
.navlinks{display:flex;gap:18px;font-size:14px;font-weight:600;color:#404040;}
.searchpill{width:200px;height:36px;border-radius:9999px;background:#f7f7f7;display:flex;align-items:center;padding:0 14px;font-size:13px;color:#737373;}
.hero{height:190px;background:#163959;display:flex;align-items:center;padding:0 30px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:20px;top:-20px;width:150px;height:150px;border-radius:9999px;background:#f68b1f;opacity:.85;}
.hero:after{content:'';position:absolute;right:150px;bottom:-40px;width:100px;height:100px;border-radius:9999px;background:#9bca3e;opacity:.85;}
.herotext{position:relative;z-index:1;max-width:400px;}
.herotext h1{color:#fff;font-size:26px;font-weight:700;margin:0 0 8px;}
.herotext p{color:#dedede;font-size:13px;margin:0 0 14px;}
.herocta{display:inline-block;background:#bd2426;color:#fff;font-size:14px;font-weight:600;padding:11px 24px;border-radius:8px;}
.agerow{display:flex;gap:8px;padding:14px 28px;}
.agepill{background:#f68b1f;color:#fff;font-size:11px;font-weight:700;padding:5px 12px;border-radius:9999px;}
.agepill.alt{background:#516b1d;}
.agepill.alt2{background:#0051c3;}
.grid{display:flex;gap:12px;padding:0 28px;}
.card{width:150px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08);border-radius:8px;padding:8px;}
.thumb{height:105px;border-radius:8px;margin-bottom:6px;position:relative;overflow:hidden;}
.badge{position:absolute;top:5px;left:5px;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 7px;border-radius:4px;color:#fff;letter-spacing:.5px;}
.ptitle{font-size:13px;color:#404040;line-height:1.3;height:32px;overflow:hidden;font-weight:600;}
.pprice{font-size:15px;font-weight:700;color:#163959;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#163959;display:flex;align-items:center;justify-content:space-between;padding:0 28px;font-size:12px;color:#dedede;}
.footer span{margin-left:14px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Janod</div>
<div class="navlinks"><div>Wooden Toys</div><div>Puzzles</div><div>Baby</div><div>Furniture</div></div>
<div class="searchpill">Search toys…</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Handmade for Little Hands, Since 1919</h1>
<p>French wooden toys built to be passed down, not thrown away.</p>
<div class="herocta">Shop Best Sellers</div>
</div>
</div>
<div class="agerow">
<div class="agepill">0–12 Months</div><div class="agepill alt">1–3 Years</div><div class="agepill alt2">3–6 Years</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#bd2426,#163959)"><span class="badge" style="background:#bd2426;">New</span></div><div class="ptitle">Classic Wooden Train Set</div><div class="pprice">$54.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#516b1d,#9bca3e)"><span class="badge" style="background:#516b1d;">Bestseller</span></div><div class="ptitle">Stacking Rainbow Puzzle</div><div class="pprice">$28.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f68b1f,#c16508)"></div><div class="ptitle">Farmyard Sound Puzzle Board</div><div class="pprice">$32.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0051c3,#62a1d8)"></div><div class="ptitle">Sea Life Building Blocks</div><div class="pprice">$46.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#163959,#516b1d)"><span class="badge" style="background:#516b1d;">Bestseller</span></div><div class="ptitle">Little Chef Wooden Kitchen</div><div class="pprice">$128.00</div></div>
</div>
<div class="footer"><span>© Made in France Since 1919</span><span>Gift Finder<span> Warranty</span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff153c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff153c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff153c; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff153c; color: #f5f5f5;
border: 1px solid #fd395a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d61232; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:Pretendard, -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:18px; font-weight:700; }
.navlinks { display:flex; gap:20px; font-size:13.2px; color:#a3a3a3; }
.navlinks span.on { color:#ffffff; }
.menutrig { border:1px solid #a3a3a3; color:#a3a3a3; border-radius:5px; padding:0 16.5px; height:28px;
display:flex; align-items:center; font-size:13.2px; }
.livebar { display:flex; gap:8px; padding:10px 32px 4px; }
.livetab { border-radius:110px; padding:8.8px 13.2px; font-size:14.3px; color:#a3a3a3; border:1px solid transparent; }
.livetab.on { background:rgba(255,255,255,0.2); color:#ffffff; border-color:#ffffff; font-weight:700; }
h2 { font-size:22px; font-weight:700; padding:16px 32px 10px; margin:0; }
.row { display:flex; gap:12px; padding:0 32px; }
.poster { width:150px; flex-shrink:0; }
.poster .art { height:200px; border-radius:6px; background:linear-gradient(160deg,#2e2e2e,#141414); position:relative; border:1px solid #4f4f4f; }
.poster .t { font-size:13px; margin-top:8px; color:#ffffff; }
.poster .m { font-size:11px; color:#6e6e6e; }
</style></head>
<body>
<nav>
<span class="brand">TVING</span>
<div class="navlinks"><span class="on">Home</span><span>Series</span><span>Movies</span><span>Live</span><span>Sports</span></div>
<span class="menutrig">All ▾</span>
</nav>
<div class="livebar">
<span class="livetab on">Channel 1</span>
<span class="livetab">Channel 2</span>
<span class="livetab">Sports</span>
<span class="livetab">News</span>
</div>
<h2>Continue watching</h2>
<div class="row">
<div class="poster"><div class="art"></div><div class="t">Late Autumn Letters</div><div class="m">S1 · Ep 4</div></div>
<div class="poster"><div class="art"></div><div class="t">Northbound</div><div class="m">Movie</div></div>
<div class="poster"><div class="art"></div><div class="t">Signal Zero</div><div class="m">S2 · Ep 1</div></div>
<div class="poster"><div class="art"></div><div class="t">The Long Harbor</div><div class="m">Movie</div></div>
<div class="poster"><div class="art"></div><div class="t">Studio Live: Weekend</div><div class="m">Live</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2d2d2d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2d2d2d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #2d2d2d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #005faa; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #005faa;
border: 1px solid #005faa; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #2d2d2d;
border: 1px solid #dae0e5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #005faa; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#2d2d2d; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #dae0e5;}
.logo{font-weight:700;font-size:18px;color:#005faa;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;}
.hero{background:#1d2124;background-image:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.2)),linear-gradient(135deg,#3a2318,#1d2124 60%);color:#fff;padding:30px;min-height:200px;display:flex;flex-direction:column;justify-content:center;}
.hero h1{font-size:38px;font-weight:700;line-height:1.15;margin:0 0 10px;max-width:460px;}
.hero p{font-size:16px;margin:0 0 16px;max-width:420px;}
.cta{background:#005faa;color:#fff;font-weight:600;font-size:16px;padding:14px 32px;border-radius:4px;display:inline-block;width:fit-content;}
.section{padding:20px 30px;}
.grid{display:flex;gap:16px;}
.card{flex:1;background:#fafafa;border-radius:4px;padding:0;overflow:hidden;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:4px 8px;border-radius:4px;color:#fff;}
.b1{background:#005faa;}
.b2{background:#15576f;}
.card .img{aspect-ratio:4/3;height:100px;background:#f5f5f5;}
.f1{background:linear-gradient(135deg,#ff7a3d,#1d2124);}
.f2{background:linear-gradient(135deg,#15576f,#005faa);}
.f3{background:linear-gradient(135deg,#85644f,#1d2124);}
.info{padding:10px 12px;}
.card h3{font-size:16px;font-weight:600;margin:0 0 4px;}
.card .sub{font-size:12px;color:#6d6d6d;margin:0;}
</style>
<div class="nav">
<div class="logo">Dimplex</div>
<div class="navlinks"><span>Fireplaces</span><span>Outdoor</span><span>Heaters</span><span>Dealers</span></div>
</div>
<div class="hero">
<h1>Warmth, engineered with precision.</h1>
<p>Electric fireplaces and heating solutions for every room and every season.</p>
<a class="cta">Find a Dealer</a>
</div>
<div class="section">
<div class="grid">
<div class="card"><span class="badge b1">Indoor</span><div class="img f1"></div><div class="info"><h3>Linear Flame Wall 60"</h3><p class="sub">2000W · Ember Bed</p></div></div>
<div class="card"><span class="badge b2">Outdoor</span><div class="img f2"></div><div class="info"><h3>Patio Heater Pro</h3><p class="sub">42,000 BTU</p></div></div>
<div class="card"><span class="badge b1">Indoor</span><div class="img f3"></div><div class="info"><h3>Mantel Surround Insert</h3><p class="sub">1500W · Realistic Flame</p></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdf7ef; color: #0b1511;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdf7ef; color: #0b1511;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 800; line-height: 1.3; letter-spacing: 0.5px; margin: 0; color: #0b1511; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #697870; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 800; line-height: 1.3; letter-spacing: 1px; background: #2a4239; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 800; line-height: 1.3; letter-spacing: 1px; background: #fdf7ef; color: #2a4239;
border: 1px solid #2a4239; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #212121;
border: 1px solid #c0beb8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #697870; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; background: #f9dee5; color: #0b1511;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fdf7ef; font-family:'Avenir LT Pro Roman','Figtree',sans-serif; color:#212121; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:Georgia,serif;font-size:22px;color:#2a4239;}
.navlinks{display:flex;gap:24px;font-size:13px;color:#697870;letter-spacing:0.3px;}
.hero{height:220px;background:#faecd8;display:flex;align-items:center;padding:0 40px;}
.h1{font-family:Georgia,serif;font-size:36px;font-weight:400;color:#0b1511;margin:0 0 12px;letter-spacing:-0.3px;max-width:420px;}
.hsub{font-size:14px;color:#697870;max-width:360px;margin:0;}
.section{padding:18px 32px 0;}
.sectitle{font-family:'Avenir LT Pro Heavy',sans-serif;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:0.5px;color:#0b1511;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#fff;border-radius:8px;overflow:hidden;}
.thumb{height:100px;border-radius:8px 8px 0 0;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:500;letter-spacing:0.3px;color:#0b1511;background:#f9dee5;padding:3px 10px;border-radius:9999px;}
.badge.sage{background:#789f90;color:#fff;}
.pbody{padding:10px 14px 14px;}
.ptitle{font-family:'Avenir LT Pro Heavy',sans-serif;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:0.3px;color:#0b1511;}
.pprice{font-size:15px;color:#2a4239;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Rael</div>
<div class="navlinks"><span>Period Care</span><span>Skincare</span><span>Cycle Guide</span><span>About</span></div>
</div>
<div class="hero">
<div><div class="h1">Holistic Care for Every Phase</div><div class="hsub">Menstrual and skin care rooted in botanical ingredients, built around your cycle.</div></div>
</div>
<div class="section">
<div class="sectitle">Shop by Phase</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#789f90,#2a4239);"><div class="badge">Menstrual</div></div><div class="pbody"><div class="ptitle">Organic Cotton Pads</div><div class="pprice">$8.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f9dee5,#2a4239);"><div class="badge sage">Follicular</div></div><div class="pbody"><div class="ptitle">Vitamin C Serum</div><div class="pprice">$28.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#faecd8,#789f90);"><div class="badge">Luteal</div></div><div class="pbody"><div class="ptitle">Overnight Menstrual Cup</div><div class="pprice">$19.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2a4239,#789f90);"></div><div class="pbody"><div class="ptitle">Aloe Vera Cleansing Wipes</div><div class="pprice">$6.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.25; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #6d6d6d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0.04em; background: #dbac86; color: #272727;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0.04em; background: #ffffff; color: #272727;
border: 1px solid #dbac86; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #272727;
border: 1px solid #c9c9c9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d6d6d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.08em; background: #f3f4f6; color: #4b5563;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Inter,Arial,sans-serif; color:#4b5563; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dde0e3;}
.logo{font-family:Didot,Georgia,serif;font-size:24px;color:#272727;}
.navlinks{display:flex;gap:20px;font-family:'Gotham Narrow',Arial,sans-serif;font-size:13px;font-weight:500;letter-spacing:0.5px;color:#272727;}
.body{display:flex;height:576px;}
.rail{width:170px;border-right:1px solid #dde0e3;padding:20px 16px;}
.raillabel{font-family:'Gotham Narrow',Arial,sans-serif;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#6d6d6d;margin-bottom:8px;}
.railopt{font-size:13px;color:#272727;margin-bottom:8px;}
.railopt.sel{color:#dbac86;}
.main{flex:1;padding:20px 24px;}
.hero{margin-bottom:16px;}
.hero h1{font-family:Didot,Georgia,serif;font-size:34px;font-weight:400;color:#272727;margin:0 0 6px;}
.hero p{font-size:14px;color:#4b5563;margin:0;}
.grid{display:flex;gap:14px;}
.card{width:180px;border:1px solid #e5e7eb;border-radius:8px;padding:10px;position:relative;}
.thumb{height:120px;border-radius:4px;margin-bottom:8px;}
.badge{position:absolute;top:16px;left:16px;background:#f3f4f6;color:#4b5563;font-family:'Gotham Narrow',Arial,sans-serif;font-size:9px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.badgesold{background:#194321;color:#fff;}
.artist{font-family:Didot,Georgia,serif;font-size:16px;color:#272727;}
.atitle{font-size:12px;color:#4b5563;margin:2px 0;}
.pprice{font-family:'Gotham Narrow',Arial,sans-serif;font-size:14px;font-weight:500;color:#272727;}
</style>
<div class="nav">
<div class="logo">New Blood Art</div>
<div class="navlinks"><div>Shop</div><div>Artists</div><div>Themes</div><div>Gifts</div></div>
</div>
<div class="body">
<div class="rail">
<div class="raillabel">Medium</div>
<div class="railopt sel">Oil on Canvas</div>
<div class="railopt">Giclée Print</div>
<div class="railopt">Photography</div>
<div class="raillabel" style="margin-top:16px;">Price Range</div>
<div class="railopt">Under £500</div>
<div class="railopt">£500 – £2,000</div>
</div>
<div class="main">
<div class="hero"><h1>Original Art, Direct from the Artist</h1><p>A wall in mind, not a vague desire to scroll.</p></div>
<div class="grid">
<div class="card"><span class="badge">Oil</span><div class="thumb" style="background:linear-gradient(160deg,#dbac86,#272727)"></div><div class="artist">Marina Holt</div><div class="atitle">Quiet Harbour, Dusk</div><div class="pprice">£1,200</div></div>
<div class="card"><span class="badge badgesold">Sold</span><div class="thumb" style="background:linear-gradient(160deg,#194321,#dbac86)"></div><div class="artist">Julian Reyes</div><div class="atitle">Structures No. 4</div><div class="pprice">£2,400</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#272727,#dbac86)"></div><div class="artist">Amara Cole</div><div class="atitle">Fieldnotes III</div><div class="pprice">£680</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.2; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #259ce1; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #259ce1;
border: 1px solid #259ce1; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #e63946; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Nunito', 'Helvetica Neue', sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:68px;background:#259ce1;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:'Oswald',sans-serif;font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#fff;}
.navlinks{display:flex;gap:24px;font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;color:#fff;}
.searchpill{width:170px;height:34px;border-radius:9999px;background:#fff;display:flex;align-items:center;padding:0 16px;font-size:11px;color:#22569c;}
.trustbar{height:26px;background:#22569c;display:flex;align-items:center;justify-content:center;font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;letter-spacing:.5px;color:#fff;text-transform:uppercase;}
.hero{height:216px;display:flex;align-items:center;padding:0 40px;background:#f5fafe;}
.heroText{width:440px;}
.headline{font-size:32px;font-weight:800;line-height:1.2;color:#22569c;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.5;color:#3a3a3a;margin:0 0 18px;max-width:370px;}
.btn{display:inline-block;background:#e63946;color:#fff;font-family:'Oswald',sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;padding:13px 26px;border-radius:8px;}
.toyshape{position:absolute;right:100px;top:60px;width:140px;height:110px;background:radial-gradient(circle at 35% 30%,#259ce1,#22569c 80%);border-radius:50%;}
.toywheel{position:absolute;right:90px;top:150px;width:44px;height:44px;background:#e63946;border-radius:50%;}
.sec{position:relative;height:290px;padding:24px 40px;}
.secTitle{font-family:'Oswald',sans-serif;font-size:18px;font-weight:700;text-transform:uppercase;color:#22569c;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:216px;background:#fff;border:1px solid #dedede;border-radius:12px;padding:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#e63946;color:#fff;font-family:'Oswald',sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 9px;border-radius:6px;}
.thumb{height:100px;border-radius:8px;margin-bottom:10px;}
.cardTitle{font-size:14px;font-weight:700;color:#1a1a1a;margin-bottom:4px;}
.cardPrice{font-size:14px;font-weight:800;color:#22569c;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#22569c;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#fff;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Little Tikes</div>
<div class="navlinks"><span>Ride-Ons</span><span>Outdoor Play</span><span>Toddler Toys</span></div>
<div class="searchpill">Search toys...</div>
</div>
<div class="trustbar">Parent Trusted for Over 50 Years</div>
<div class="hero">
<div class="heroText">
<div class="headline">Play built to<br>be climbed on.</div>
<div class="sub">Bright, tough, backyard-ready toys made for real kids, every single day.</div>
<div class="btn">Shop Best Sellers</div>
</div>
<div class="toyshape"></div>
<div class="toywheel"></div>
</div>
<div class="sec">
<div class="secTitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#259ce1,#22569c)"></div><div class="cardTitle">Cozy Coupe Ride-On</div><div class="cardPrice">$59.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e63946,#22569c)"></div><div class="cardTitle">Backyard Slide & Climb</div><div class="cardPrice">$249.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#22569c,#259ce1)"></div><div class="cardTitle">Splash Water Table</div><div class="cardPrice">$44.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#22569c,#e63946)"></div><div class="cardTitle">Giant Building Blocks</div><div class="cardPrice">$79.99</div></div>
</div>
</div>
<div class="footer"><span>© Play Built for Real Kids</span><span>Find a Store</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #040404; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #040404; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.25; letter-spacing: 0.5px; background: #cc3b3b; color: #fbfbfb;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.25; letter-spacing: 0.5px; background: #fafafa; color: #040404;
border: 1px solid #cc3b3b; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #fafafa; color: #111111;
border: 1px solid #272727; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.18; letter-spacing: 0.5px; background: #bd0000; color: #fbfbfb;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; color:#111111; font-family:'Epilogue',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;background:#1e1e1e;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-family:'Anton',Impact,sans-serif;font-size:22px;letter-spacing:1px;text-transform:uppercase;color:#cc3b3b;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#e1e1e1;}
.searchpill{background:#111111;border-radius:9999px;padding:8px 18px;font-size:11px;color:#aaaaaa;}
.hero{height:220px;background:#040404;display:flex;align-items:center;padding:0 34px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 40%,rgba(204,59,59,0.25),transparent 60%);}
.herotext{position:relative;z-index:2;}
.kicker{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#e99292;margin-bottom:10px;}
.herotext h1{font-family:'Anton',Impact,sans-serif;font-size:44px;letter-spacing:0.5px;text-transform:uppercase;color:#fff;margin:0 0 12px;line-height:1;}
.herotext p{font-size:14px;color:#aaaaaa;margin:0 0 16px;max-width:400px;}
.cta{display:inline-block;background:#cc3b3b;color:#fff;font-size:13px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:12px 26px;border-radius:6px;width:fit-content;}
.seclabel{font-family:'Anton',Impact,sans-serif;font-size:16px;letter-spacing:0.5px;text-transform:uppercase;color:#111111;padding:20px 34px 12px;}
.grid{display:flex;gap:14px;padding:0 34px;}
.card{width:150px;background:#ffffff;border-radius:6px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#bd0000;color:#fff;font-size:9px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;padding:3px 7px;border-radius:6px;z-index:2;}
.thumb{height:96px;border-radius:6px;margin-bottom:8px;background:#1e1e1e;}
.ptitle{font-size:12px;font-weight:700;color:#111111;line-height:1.3;height:30px;overflow:hidden;text-transform:uppercase;}
.pprice{font-size:13px;font-weight:800;color:#cc3b3b;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#272727;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:11px;color:#aaaaaa;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Terror Vision</div>
<div class="navlinks"><span>VHS</span><span>Blu-ray</span><span>Vinyl</span><span>Apparel</span></div>
<div class="searchpill">Search the archive...</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Limited Edition Slipcase</div>
<h1>Midnight Screening<br>Never Sleeps</h1>
<p>Collector-grade horror releases, engineered for the shelf as much as the screen.</p>
<div class="cta">Shop New Releases</div>
</div>
</div>
<div class="seclabel">Collector's Row</div>
<div class="grid">
<div class="card"><div class="badge">Sold Out</div><div class="thumb" style="background:linear-gradient(135deg,#cc3b3b,#040404)"></div><div class="ptitle">Blood Moon Steelbook</div><div class="pprice">$34.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#040404,#cc3b3b)"></div><div class="ptitle">Grindhouse Vinyl Score</div><div class="pprice">$28.99</div></div>
<div class="card"><div class="badge">Limited</div><div class="thumb" style="background:linear-gradient(135deg,#272727,#cc3b3b)"></div><div class="ptitle">Directors Cut Blu-ray</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#cc3b3b,#272727)"></div><div class="ptitle">Slasher Enamel Pin Set</div><div class="pprice">$14.99</div></div>
</div>
<div class="footer"><span>© Cult Cinema Since 1996</span><span>Ships in Plain Packaging</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #616161; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #212121; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #fafafa; color: #212121;
border: 1px solid #212121; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #fafafa; color: #212121;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #616161; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #de3535; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:'NordicSans','Helvetica Neue',Arial,sans-serif; color:#424242; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 44px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:19px;font-weight:600;color:#212121;letter-spacing:.2px;}
.navlinks{display:flex;gap:26px;font-size:13px;font-weight:500;color:#212121;}
.cart{font-size:12px;font-weight:500;color:#616161;}
.hero{height:270px;display:flex;align-items:center;padding:0 44px;}
.herotext{width:410px;}
.headline{font-size:32px;font-weight:500;letter-spacing:-0.5px;line-height:1.25;color:#212121;margin-bottom:16px;}
.sub{font-size:14px;line-height:1.6;color:#616161;margin-bottom:24px;max-width:340px;}
.btn{display:inline-block;background:#212121;color:#fff;font-size:13px;font-weight:500;padding:13px 28px;border-radius:4px;}
.rug{width:280px;height:200px;margin-left:60px;border-radius:6px;background:repeating-linear-gradient(90deg,#e0e0e0 0 18px,#bdbdbd 18px 36px);position:relative;}
.rug:before{content:'';position:absolute;inset:16px;background:repeating-linear-gradient(0deg,#9e9e9e 0 10px,#757575 10px 20px);opacity:.4;}
.sec{padding:20px 44px 0;}
.sectitle{font-size:14px;font-weight:600;color:#212121;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:4px;padding:12px;position:relative;}
.tag{position:absolute;top:8px;left:8px;background:#ff9800;color:#fff;font-size:9px;font-weight:600;padding:3px 8px;border-radius:2px;}
.thumb{height:88px;border-radius:2px;margin-bottom:10px;}
.pname{font-size:13px;font-weight:500;color:#212121;}
.pprice{font-size:13px;color:#616161;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Nordic Knots</div>
<div class="navlinks"><span>Rugs</span><span>Runners</span><span>Materials</span></div>
<div class="cart">Bag (0)</div>
</div>
<div class="hero">
<div class="herotext">
<div class="headline">Texture over ornament.<br>Weight over noise.</div>
<div class="sub">Flat-weave rugs in wool, linen, and cotton — a quiet material language, made in Sweden.</div>
<div class="btn">Shop Rugs</div>
</div>
<div class="rug"></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="tag">Limited</div><div class="thumb" style="background:linear-gradient(135deg,#e0e0e0,#212121)"></div><div class="pname">Stockholm Flat-Weave</div><div class="pprice">$495</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#bdbdbd,#616161)"></div><div class="pname">Nordic Wool Runner</div><div class="pprice">$320</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#9e9e9e,#212121)"></div><div class="pname">Linen Blend Rug</div><div class="pprice">$275</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #364156;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #364156;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #364156; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #108474; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #364156;
border: 1px solid #cdd0d5; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffcf00; color: #364156;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Fira Sans',Arial,sans-serif; color:#3c506d; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #eeeeee;}
.logo{font-family:Georgia,serif;font-size:22px;color:#108474;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:500;color:#364156;}
.search{width:170px;height:40px;border-radius:9999px;background:#f4f2f0;font-size:12px;color:#3c506d;display:flex;align-items:center;padding:0 16px;}
.hero{height:200px;border-radius:12px;margin:16px 34px 0;background:#f4f2f0;display:flex;align-items:center;padding:0 32px;}
.htxt{width:400px;}
.htxt h1{font-family:Georgia,serif;font-size:32px;font-weight:400;color:#364156;margin:0 0 8px;}
.htxt p{font-size:15px;color:#3c506d;margin:0 0 14px;}
.cta{display:inline-block;background:#108474;color:#fff;font-size:16px;font-weight:600;padding:14px 30px;border-radius:9999px;}
.rowlabel{padding:18px 34px 10px;font-family:Georgia,serif;font-size:22px;color:#364156;}
.grid{display:flex;gap:16px;padding:0 34px;}
.card{width:206px;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.06);padding:16px;position:relative;}
.badge{position:absolute;top:12px;left:12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;border-radius:4px;padding:4px 8px;z-index:2;}
.thumb{height:100px;border-radius:8px;margin-bottom:10px;}
.title{font-size:18px;font-weight:500;color:#364156;margin-bottom:4px;}
.price{font-size:16px;color:#3c506d;}
</style>
<div class="nav">
<div class="logo">Made OF</div>
<div class="navlinks"><span>Feeding</span><span>Bath</span><span>Sleep</span></div>
<div class="search">Search...</div>
</div>
<div class="hero">
<div class="htxt">
<h1>Baby care, grown up.</h1>
<p>Botanical formulas and thoughtful design, for a category that deserves better than pastel.</p>
<div class="cta">Shop Now</div>
</div>
</div>
<div class="rowlabel">Everyday Essentials</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#ffcf00;color:#364156;">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#108474,#3c506d);"></div><div class="title">Ceramic Feeding Set</div><div class="price">$34</div></div>
<div class="card"><span class="badge" style="background:#108474;color:#fff;">New</span><div class="thumb" style="background:linear-gradient(135deg,#3c506d,#108474);"></div><div class="title">Botanical Bath Wash</div><div class="price">$18</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#108474,#ffcf00);"></div><div class="title">Weighted Sleep Sack</div><div class="price">$48</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #404040; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #fe5000; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #142978;
border: 1px solid #fe5000; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #404040; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fe5000; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#242833; box-sizing:border-box;
font-family:Assistant,-apple-system,system-ui,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#ffffff; border-bottom:1px solid #e6e6e6; display:flex; align-items:center;
justify-content:space-between; padding:0 36px; }
.brand { font-size:22px; font-weight:700; color:#142978; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:22px; font-size:15px; font-weight:600; }
.navlinks span.active { color:#142978; border-bottom:2px solid #142978; padding-bottom:20px; }
.navlinks span:not(.active) { color:#404040; }
.btn-join { background:#fe5000; color:#fff; font-size:14px; font-weight:600; padding:10px 22px; border-radius:9999px; }
.catstrip { display:flex; gap:20px; padding:10px 36px; font-size:13px; font-weight:600; color:#404040; }
.catstrip span.active { color:#142978; border-bottom:2px solid #142978; padding-bottom:8px; }
.hero { height:190px; background:#f5ecdf; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.hero h1 { font-size:34px; font-weight:700; color:#142978; margin:0 0 8px; line-height:1.1; max-width:420px; letter-spacing:-0.3px; }
.hero p { font-size:14px; color:#242833; margin:0 0 16px; }
.btn-cta { display:inline-block; background:#fe5000; color:#fff; font-size:16px; font-weight:700; letter-spacing:0.3px;
padding:15px 34px; border-radius:9999px; }
.dots { display:flex; gap:10px; }
.dot { width:56px; height:56px; border-radius:9999px; }
.dot.a { background:#52c9ff; }
.dot.b { background:#7fb800; margin-top:30px; }
.dot.c { background:#ffb400; }
.razor { width:16px; height:130px; background:linear-gradient(180deg,#142978,#0e1c54); border-radius:8px; position:relative; }
.razor::before { content:''; position:absolute; top:-8px; left:-8px; width:32px; height:20px; background:#fe5000; border-radius:6px; }
.grid { display:flex; gap:16px; padding:18px 36px 0; align-items:flex-start; }
.card { flex:1; background:#ffffff; border-radius:12px; padding:16px; position:relative; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.card .imgbox { height:84px; background:#f5ecdf; border-radius:8px; margin-bottom:10px; display:flex; align-items:center; justify-content:center; }
.badge { position:absolute; top:10px; left:10px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
padding:4px 10px; border-radius:9999px; }
.badge.orange { background:#fe5000; color:#fff; }
.badge.lime { background:#7fb800; color:#fff; }
.badge.cyan { background:#52c9ff; color:#142978; }
.card .name { font-size:16px; font-weight:600; color:#121212; margin-bottom:6px; }
.card .price { font-size:16px; color:#121212; font-weight:700; }
.card .cta { display:inline-block; margin-top:10px; background:#142978; color:#fff; font-size:13px; font-weight:600;
padding:8px 18px; border-radius:9999px; }
footer { position:absolute; bottom:0; left:0; right:0; height:88px; background:#142978; color:#fff; display:flex;
align-items:center; justify-content:space-between; padding:0 36px; }
footer .col { font-size:12px; line-height:1.9; }
footer .col b { display:block; margin-bottom:3px; }
footer .col a { color:#83d8ff; }
.wrap { position:relative; height:640px; }
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="brand">Dollar Shave Club</div>
<div class="navlinks"><span class="active">Shave</span><span>Hair</span><span>Skin</span><span>Body</span></div>
<a class="btn-join">Join Now</a>
</nav>
<div class="catstrip"><span class="active">Razors</span><span>Shave</span><span>Hair</span><span>Skin</span></div>
<div class="hero">
<div>
<h1>A great shave for a few bucks a month.</h1>
<p>No-BS blades and grooming, shipped straight to your door.</p>
<a class="btn-cta">Get Started</a>
</div>
<div style="display:flex; align-items:center; gap:14px;">
<div class="dots"><div class="dot a"></div><div class="dot b"></div><div class="dot c"></div></div>
<div class="razor"></div>
</div>
</div>
<div class="grid">
<div class="card"><span class="badge orange">New</span><div class="imgbox"></div><div class="name">The 4X Razor</div><div class="price">$9/mo</div><a class="cta">Shop Now</a></div>
<div class="card"><span class="badge lime">Sale</span><div class="imgbox"></div><div class="name">Shave Butter</div><div class="price">$7</div><a class="cta">Shop Now</a></div>
<div class="card"><div class="imgbox"></div><div class="name">Body Wash 3-in-1</div><div class="price">$10</div><a class="cta">Shop Now</a></div>
<div class="card"><span class="badge cyan">New</span><div class="imgbox"></div><div class="name">Hair Fiber Paste</div><div class="price">$14</div><a class="cta">Shop Now</a></div>
</div>
<footer>
<div class="col"><b>Shop</b><a>Razors</a><br><a>Hair & Skin</a></div>
<div class="col"><b>Company</b><a>Our Story</a><br><a>Careers</a></div>
<div class="col"><b>Dollar Shave Club</b>Shave time. Shave money.</div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #242424;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #242424;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 300; line-height: 1.2; letter-spacing: 0.01em; margin: 0; color: #242424; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 0.12em; background: #ccb17b; color: #121212;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 0.12em; background: transparent; color: #000000;
border: 1px solid #ccb17b; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f5f5f5; color: #242424;
border: 1px solid #dedede; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.10em; background: #ccb17b; color: #121212;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Assistant',sans-serif; background:#ffffff; color:#3a3a3a; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #242424;}
.logo{font-size:20px;font-weight:600;color:#ccb17b;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#dedede;}
.hero{height:230px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.heroText h1{font-size:36px;font-weight:300;color:#dedede;margin:0 0 8px;letter-spacing:0.02em;}
.heroText p{font-size:15px;font-weight:300;color:#dedede;margin:0 0 16px;}
.rule{width:80px;height:2px;background:#ccb17b;margin-bottom:16px;}
.watch{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#3a3a3a,#121212 75%);border:6px solid #ccb17b;position:relative;}
.watch:before{content:'';position:absolute;left:70px;top:20px;width:4px;height:44px;background:#dedede;transform-origin:bottom;}
.sec{padding:20px 32px 0;}
.secTitle{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#6b6b6b;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;border:1px solid #dedede;border-radius:4px;padding:12px;}
.thumb{height:100px;background:#121212;border-radius:2px;margin-bottom:10px;position:relative;overflow:hidden;}
.wm{position:absolute;left:76px;top:24px;width:48px;height:48px;border-radius:50%;border:4px solid #ccb17b;background:#242424;}
.badgerow{display:flex;gap:5px;margin-bottom:6px;}
.auth{background:#ccb17b;color:#121212;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:3px 7px;}
.cond{background:#d4d9db;color:#242424;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:3px 7px;}
.ctitle{font-size:15px;font-weight:600;color:#242424;margin-bottom:2px;}
.cref{font-size:12px;color:#6b6b6b;margin-bottom:6px;}
.cprice{font-size:20px;font-weight:300;color:#242424;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#6b6b6b;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Watch Collectors</div>
<div class="navlinks"><span>Rolex</span><span>Omega</span><span>Patek</span><span>Vintage</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="rule"></div>
<h1>Curated. Authenticated.<br>Collectible.</h1>
<p>Pre-owned timepieces vetted piece by piece before they ever reach you.</p>
</div>
<div class="watch"></div>
</div>
<div class="sec">
<div class="secTitle">Recently Authenticated</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="wm"></div></div><div class="badgerow"><div class="auth">Box & Papers</div><div class="cond">Mint</div></div><div class="ctitle">Submariner Date</div><div class="cref">Ref. 126610LN</div><div class="cprice">$14,250</div></div>
<div class="card"><div class="thumb"><div class="wm" style="border-color:#e0cfa3"></div></div><div class="badgerow"><div class="auth">Certified</div><div class="cond">Excellent</div></div><div class="ctitle">Speedmaster Professional</div><div class="cref">Ref. 311.30.42</div><div class="cprice">$6,890</div></div>
<div class="card"><div class="thumb"><div class="wm" style="border-color:#b8945e"></div></div><div class="badgerow"><div class="auth">Service Records</div></div><div class="ctitle">Nautilus 5711</div><div class="cref">Ref. 5711/1A</div><div class="cprice">$142,000</div></div>
</div>
</div>
<div class="footer"><span>© Private Dealer Network</span><span>Authentication Standards</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffe01b; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffe01b; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6e16; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #231e15; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffe01b; color: #231e15;
border: 1px solid #231e15; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffe01b; color: #111111;
border: 1px solid #d9bf19; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6e16; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dcc11a; color: #231e15;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#231e15; box-sizing:border-box;
font-family:"Graphik Web", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:"Means Web", Georgia, "Times New Roman", serif; }
nav { height:64px; display:flex; align-items:center; gap:26px; padding:0 32px; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; font-weight:500; color:#231e15; padding:8px; }
.navbtns { margin-left:auto; display:flex; gap:10px; }
.pill { display:inline-flex; align-items:center; height:36px; padding:0 20px; border-radius:26px;
font-size:13px; font-weight:500; box-shadow: rgb(35,30,21) 0px 0px 0px 1px; }
.pill.fill { background:#ffe01b; color:#231e15; }
.pill.outline { background:transparent; color:#231e15; }
.hero { padding:24px 32px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.hero h1 { font-size:44px; font-weight:400; line-height:1.02; letter-spacing:-1px; margin:0; max-width:640px; }
.hero p { font-size:16px; font-weight:400; line-height:1.35; color:#403b3b; margin:0; max-width:440px; }
.badge { display:inline-flex; background:#231e15; color:#ffffff; border-radius:8px; padding:4px 12px;
font-size:13px; font-weight:500; margin-top:2px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:16px 32px 24px; }
.card { background:#ffffff; border:1px solid #bcbab6; border-radius:10px; padding:20px 16px; text-align:center; }
.card.featured { box-shadow: rgba(35,30,21,0.15) 0px 0px 20px 3px; border-color:transparent; }
.card h3 { font-family:"Graphik Web",sans-serif; font-size:20px; font-weight:500; letter-spacing:-0.3px; margin:0 0 6px; }
.card .price { font-size:28px; font-weight:700; margin:6px 0; }
.card .price span { font-size:13px; font-weight:400; color:#706d67; }
.card p { font-size:13px; color:#706d67; margin:0 0 12px; }
.card .cta { display:inline-flex; align-items:center; justify-content:center; width:100%; height:36px;
border-radius:26px; font-size:13px; font-weight:500; box-shadow: rgb(35,30,21) 0px 0px 0px 1px; }
.card.featured .cta { background:#ffe01b; color:#231e15; }
.card:not(.featured) .cta { background:transparent; color:#231e15; }
.strip { background:#ebe1cd; padding:14px 32px; display:flex; align-items:center; justify-content:center; }
.strip span { font-size:13px; font-weight:500; color:#231e15; }
</style></head>
<body>
<nav>
<p class="brand">Mailchimp</p>
<div class="navlinks"><span>Marketing Platform</span><span>Automations</span><span>Integrations</span><span>Pricing</span></div>
<div class="navbtns"><div class="pill outline">Log In</div><div class="pill fill">Start Free Trial</div></div>
</nav>
<div class="hero">
<h1 class="serif">Email & SMS marketing<br>minus the learning curve</h1>
<p>Everything a small business needs to look, sound, and sell like a much bigger one.</p>
<div class="badge">Risk-Free · No Credit Card Required</div>
</div>
<div class="cards">
<div class="card"><h3>Free</h3><div class="price">$0</div><p>1 audience, up to 500 contacts</p><div class="cta">Choose Free</div></div>
<div class="card featured"><h3>Standard</h3><div class="price">$20<span>/mo</span></div><p>Automations, A/B testing, custom branding</p><div class="cta">Choose Standard</div></div>
<div class="card"><h3>Essentials</h3><div class="price">$13<span>/mo</span></div><p>Scheduling, basic reporting, 3 audiences</p><div class="cta">Choose Essentials</div></div>
</div>
<div class="strip"><span>Trusted by small businesses worldwide · Cancel anytime</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.25; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: #d42b2b; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: #ffffff; color: #111111;
border: 1px solid #d42b2b; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #d42b2b; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Barlow',Arial,sans-serif; color:#111111; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#1a1a1a;}
.logo{font-family:'Barlow Condensed',Arial,sans-serif;font-size:22px;font-weight:800;text-transform:uppercase;color:#fff;letter-spacing:-.3px;}
.navlinks{display:flex;gap:24px;font-family:'Barlow Condensed',Arial,sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#ccc;}
.hero{height:250px;display:flex;background:#1a1a1a;border-top:3px solid #d42b2b;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;}
.herotext .kick{font-family:'Barlow Condensed',Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#f5c518;margin-bottom:10px;}
.herotext h1{font-family:'Barlow Condensed',Arial,sans-serif;font-size:40px;font-weight:800;text-transform:uppercase;color:#fff;margin:0 0 12px;line-height:.95;}
.herotext p{font-size:14px;color:#bbb;margin:0 0 18px;max-width:300px;}
.btn{display:inline-block;background:#d42b2b;color:#fff;font-family:'Barlow Condensed',Arial,sans-serif;font-size:15px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:13px 28px;border-radius:2px;width:fit-content;}
.heroimg{width:54%;position:relative;background:#111;}
.heroimg .rack{position:absolute;left:70px;top:30px;width:14px;height:180px;background:#333;}
.heroimg .rack2{position:absolute;left:180px;top:30px;width:14px;height:180px;background:#333;}
.heroimg .beam{position:absolute;left:70px;top:70px;width:124px;height:10px;background:#d42b2b;}
.spectable{display:flex;gap:1px;background:#e6e6e6;margin:0 40px;}
.speccell{flex:1;background:#f7f7f7;text-align:center;padding:10px;}
.speclabel{font-family:'Barlow Condensed',Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#666;}
.specvalue{font-family:'Barlow Condensed',Arial,sans-serif;font-size:16px;font-weight:700;color:#111;margin-top:2px;}
.sec{padding:20px 40px 0;}
.sectitle{font-family:'Barlow Condensed',Arial,sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px;border-top:3px solid #d42b2b;padding-top:10px;}
.grid{display:flex;gap:14px;}
.card{width:212px;border:1px solid #e6e6e6;padding:10px;}
.thumb{height:100px;background:#f7f7f7;margin-bottom:8px;}
.pname{font-family:'Barlow Condensed',Arial,sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;}
.pprice{font-size:14px;font-weight:700;color:#d42b2b;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Major Fitness</div>
<div class="navlinks"><div>Racks</div><div>Barbells</div><div>Plates</div><div>Accessories</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kick">Commercial Grade</div>
<h1>Built for the load, not the lifestyle.</h1>
<p>Rated for thousand-pound lifts and the gyms that put them there.</p>
<div class="btn">Shop Racks</div>
</div>
<div class="heroimg"><div class="rack"></div><div class="rack2"></div><div class="beam"></div></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Weight Capacity</div><div class="specvalue">1,000 LB</div></div>
<div class="speccell"><div class="speclabel">Steel Gauge</div><div class="specvalue">11-Gauge</div></div>
<div class="speccell"><div class="speclabel">Hole Spacing</div><div class="specvalue">2"</div></div>
<div class="speccell"><div class="speclabel">Warranty</div><div class="specvalue">Lifetime</div></div>
</div>
<div class="sec">
<div class="sectitle">Power Racks</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#111,#d42b2b);"></div><div class="pname">MR-1 Power Rack</div><div class="pprice">$899.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#333,#d42b2b);"></div><div class="pname">Olympic Barbell 20KG</div><div class="pprice">$249.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#111,#f5c518);"></div><div class="pname">Bumper Plate Set</div><div class="pprice">$449.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #25282a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #25282a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #25282a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #575a5d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffc633; color: #17191a;
border: none; border-radius: 4px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: transparent; color: #25282a;
border: 1px solid #ffc633; border-radius: 4px;
padding: 12px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #25282a;
border: 1px solid #c1c2c2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #575a5d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.6px; background: #f6eeda; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; font-family:-apple-system,'Helvetica Neue',Arial,sans-serif; color:#25282a; }
*{box-sizing:border-box;}
.nav{height:56px;background:#25282a;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:18px;font-weight:700;color:#ffc633;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;color:#f5f5f5;}
.hero{height:230px;background:#25282a;display:flex;align-items:center;padding:0 32px 24px;}
.herotext{width:420px;}
.herotext h1{font-size:44px;font-weight:700;color:#f5f5f5;text-transform:uppercase;line-height:1.05;margin:0 0 10px;}
.herotext p{font-size:14px;color:#c1c2c3;margin:0 0 16px;max-width:340px;}
.cta{display:inline-block;background:#ffc633;color:#17191a;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:12px 22px;border-radius:4px;}
.stats{display:flex;gap:28px;margin-left:auto;}
.stat{text-align:center;}
.statnum{font-size:36px;font-weight:700;color:#ffc633;line-height:1;}
.statunit{font-size:14px;color:#c1c2c3;margin-top:4px;}
.statlabel{font-size:10px;color:#8a8a88;text-transform:uppercase;letter-spacing:0.5px;margin-top:2px;}
.fuelrow{display:flex;gap:8px;padding:16px 32px 0;}
.fuel{border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:5px 12px;color:#f5f5f5;}
.f1{background:#bc3c26;}
.f2{background:#293035;}
.f3{background:#0b1318;}
.f4{background:#f48120;color:#17191a;}
.spectable{margin:16px 32px 0;background:#fff;border-radius:8px;border:1px solid #c1c2c3;overflow:hidden;}
.specrow{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #c1c2c3;font-size:14px;}
.specrow:last-child{border-bottom:none;}
.speclabel2{color:#575a5d;}
.specval2{font-weight:600;color:#25282a;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:150px;background:#fff;border:1px solid #e2e2e2;border-radius:8px;padding:8px;}
.thumb{height:80px;border-radius:4px;margin-bottom:6px;}
.pname{font-size:13px;font-weight:600;}
.pprice{font-size:13px;color:#ffc633;font-weight:700;margin-top:2px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Ooni Pizza OV 2</div>
<div class="navlinks"><div>OV2 Series</div><div>Fuel</div><div>Compare</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Materialized from Fire</h1>
<p>The OV2 upgrade brings faster preheat and a wider heat zone to every fuel type.</p>
<div class="cta">Configure OV2</div>
</div>
<div class="stats">
<div class="stat"><div class="statnum">950</div><div class="statunit">°F</div><div class="statlabel">Max Oven Temp</div></div>
<div class="stat"><div class="statnum">60</div><div class="statunit">sec</div><div class="statlabel">Preheat Time</div></div>
</div>
</div>
<div class="fuelrow">
<div class="fuel f1">Wood</div><div class="fuel f2">Gas</div><div class="fuel f3">Charcoal</div><div class="fuel f4">Multi-Fuel</div>
</div>
<div class="spectable">
<div class="specrow"><span class="speclabel2">Weight</span><span class="specval2">20.4 kg</span></div>
<div class="specrow"><span class="speclabel2">Internal Floor</span><span class="specval2">40 x 40 cm</span></div>
<div class="specrow"><span class="speclabel2">Warranty</span><span class="specval2">3 Years</span></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffc633,#bc3c26)"></div><div class="pname">Karu 16 OV2</div><div class="pprice">$429</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f48120,#293035)"></div><div class="pname">Koda 16 OV2</div><div class="pprice">$549</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e16f27,#0b1318)"></div><div class="pname">Fyra 12 OV2</div><div class="pprice">$379</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #404040;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #404040;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #404040; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.27; letter-spacing: 0.2px; background: #bd2426; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.27; letter-spacing: 0.2px; background: #ffffff; color: #404040;
border: 1px solid #bd2426; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #404040;
border: 1px solid #cfcfcf; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #bd2426; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#272727; color:#e5e5e5; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#1a1a1a;border-bottom:1px solid #404040;}
.logo{font-size:19px;font-weight:700;color:#fff;letter-spacing:0.5px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;color:#bdbdbd;}
.navlinks span:first-child{color:#bd2426;}
.searchpill{width:130px;height:30px;border-radius:9999px;background:#2f2f2f;display:flex;align-items:center;padding:0 14px;font-size:10px;color:#8a8a8a;}
.hero{height:240px;display:flex;align-items:center;padding:0 36px;background:#404040;}
.htext{width:440px;}
.htext h1{font-size:28px;font-weight:700;color:#fff;line-height:1.3;margin:0 0 12px;}
.htext p{font-size:13px;color:#c2c2c2;margin:0 0 18px;max-width:380px;line-height:1.5;}
.btn{display:inline-block;background:#bd2426;color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:12px 26px;border-radius:4px;}
.figure{position:absolute;right:80px;top:26px;width:90px;height:180px;}
.fhead{position:absolute;left:23px;top:0;width:44px;height:44px;border-radius:50%;background:#62a1d8;}
.fbody{position:absolute;left:10px;top:40px;width:70px;height:90px;background:linear-gradient(180deg,#5a5a5a,#2a2a2a);border-radius:8px;}
.flegs{position:absolute;left:16px;top:126px;width:58px;height:50px;background:#1a1a1a;border-radius:0 0 8px 8px;}
.preorder{position:absolute;left:5px;top:2px;background:#bd2426;color:#fff;font-size:8px;font-weight:700;text-transform:uppercase;padding:3px 6px;border-radius:2px;}
.catstrip{display:flex;gap:20px;padding:12px 36px;background:#1a1a1a;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;color:#8a8a8a;}
.catstrip span:first-child{color:#bd2426;}
.sec{padding:16px 36px 0;}
.sectitle{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;margin-bottom:14px;color:#fff;}
.grid{display:flex;gap:14px;}
.card{width:158px;border:1px solid #4a4a4a;border-radius:4px;padding:10px;background:#333333;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#bd2426;color:#fff;font-size:8px;font-weight:700;text-transform:uppercase;padding:3px 6px;border-radius:2px;}
.thumb{height:96px;border-radius:2px;margin-bottom:8px;}
.ptitle{font-size:11px;font-weight:600;line-height:1.3;height:28px;overflow:hidden;color:#e5e5e5;}
.pprice{font-size:12px;font-weight:700;color:#bd2426;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;background:#1a1a1a;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:10px;color:#8a8a8a;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mezco Toyz</div>
<div class="navlinks"><span>Marvel</span><span>Horror</span><span>Star Wars</span><span>One:12 Collective</span></div>
<div class="searchpill">Search figures...</div>
</div>
<div class="hero">
<div class="htext">
<h1>Sculpted for the collector's shelf, not the toy box.</h1>
<p>Highly-articulated figures with archival-grade detail — every stitch and seam accounted for.</p>
<div class="btn">Shop Pre-Orders</div>
</div>
<div class="figure">
<div class="preorder">Pre-Order</div>
<div class="fhead"></div>
<div class="fbody"></div>
<div class="flegs"></div>
</div>
</div>
<div class="catstrip"><span>Marvel</span><span>DC</span><span>Horror</span><span>Star Wars</span></div>
<div class="sec">
<div class="sectitle">New Releases</div>
<div class="grid">
<div class="card"><span class="badge">Pre-Order</span><div class="thumb" style="background:linear-gradient(135deg,#bd2426,#404040);"></div><div class="ptitle">One:12 Collective Wraith</div><div class="pprice">$85.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#62a1d8,#404040);"></div><div class="ptitle">Living Dead Dolls Set</div><div class="pprice">$65.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#404040,#bd2426);"></div><div class="ptitle">Mega-Scale Talking Figure</div><div class="pprice">$120.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#404040,#62a1d8);"></div><div class="ptitle">5 Points Deluxe Box Set</div><div class="pprice">$45.00</div></div>
</div>
</div>
<div class="footer"><span>© Collector-Grade Since 2000</span><span>Pre-Order Policy · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.4px; background: #1a5196; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.4px; background: #ffffff; color: #1a5196;
border: 1px solid #1a5196; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e8f5e9; color: #2e7d32;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:Arial,Roboto,'Helvetica Neue',sans-serif; color:#444444; }
*{box-sizing:border-box;}
.util{height:32px;background:#1a5196;color:#fff;font-size:12px;display:flex;align-items:center;padding:0 30px;justify-content:space-between;}
.nav{height:56px;background:#313131;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:20px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#fff;}
.searchwrap{padding:14px 30px;}
.searchbar{height:44px;border:2px solid #1a5196;border-radius:8px;display:flex;align-items:center;justify-content:space-between;padding:0 0 0 16px;font-size:14px;color:#767676;}
.searchbtn{height:44px;width:80px;background:#1a5196;color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;display:flex;align-items:center;justify-content:center;border-radius:0 6px 6px 0;}
.section{padding:6px 30px 0;}
.sectitle{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;color:#313131;margin-bottom:10px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#fff;border:1px solid #dddddd;border-radius:4px;padding:12px;}
.thumb{width:70px;height:70px;background:#f5f5f5;border-radius:4px;margin-bottom:8px;}
.mfr{font-size:11px;color:#767676;}
.partno{font-family:'Courier New',monospace;font-size:13px;font-weight:700;color:#1a5196;margin:2px 0 6px;}
.condbadge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;padding:2px 8px;border-radius:4px;margin-bottom:6px;}
.pprice{font-size:18px;font-weight:700;color:#313131;}
.stock{font-size:11px;color:#2e7d32;margin-top:2px;}
.trustrow{display:flex;gap:12px;padding:12px 30px 0;}
.trustcard{flex:1;background:#f5f5f5;border:1px solid #dddddd;border-radius:4px;padding:8px 10px;font-size:11px;color:#313131;font-weight:700;text-align:center;}
</style>
<div class="util"><div>5M+ Parts In Stock · ISO 9001 Certified</div><div>Request a Quote · 1-800-555-0193</div></div>
<div class="nav">
<div class="logo">Radwell International</div>
<div class="navlinks"><span>PLC Brands</span><span>Drives & Motion</span><span>Safety</span><span>Sensors</span><span>Repair Services</span></div>
</div>
<div class="searchwrap">
<div class="searchbar">Search by part number, manufacturer, or keyword...<div class="searchbtn">Search</div></div>
</div>
<div class="section">
<div class="sectitle">Recent Search Results</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a5196,#313131);"></div><div class="mfr">Allen-Bradley</div><div class="partno">1756-L73</div><div class="condbadge" style="background:#e8f5e9;color:#2e7d32;">New</div><div class="pprice">$2,450.00</div><div class="stock">In Stock · 12 units</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e07820,#313131);"></div><div class="mfr">Siemens</div><div class="partno">6ES7-214-1AG</div><div class="condbadge" style="background:#fff3e0;color:#e07820;">Repaired</div><div class="pprice">$389.00</div><div class="stock">In Stock · 4 units</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1565c0,#313131);"></div><div class="mfr">Schneider Electric</div><div class="partno">ATV61HD15N4</div><div class="condbadge" style="background:#e3f2fd;color:#1565c0;">Recertified</div><div class="pprice">$1,120.00</div><div class="stock">In Stock · 2 units</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#767676,#313131);"></div><div class="mfr">Banner Engineering</div><div class="partno">QS30LLP</div><div class="condbadge" style="background:#e8f5e9;color:#2e7d32;">New</div><div class="pprice">$74.00</div><div class="stock">In Stock · 41 units</div></div>
</div>
</div>
<div class="trustrow">
<div class="trustcard">5M+ Parts In Stock</div>
<div class="trustcard">Same-Day Shipping</div>
<div class="trustcard">1-Year Repair Warranty</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a1a2e; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a1a2e; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #8899aa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.25px; background: #1990c6; color: #ffffff;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.25px; background: #16213e; color: #1990c6;
border: 1px solid #1990c6; border-radius: 6px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #16213e; color: #e0e0e0;
border: 1px solid #1a1a2e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8899aa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #1990c6; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#1a1a2e; font-family:'Inter',-apple-system,system-ui,'Segoe UI',Roboto,'Helvetica Neue',sans-serif; color:#e0e0e0; }
*{box-sizing:border-box;}
.nav{height:64px;background:#1a1a2e;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#e0e0e0;}
.icons{display:flex;gap:14px;align-items:center;font-size:16px;}
.cartb{background:#1990c6;color:#fff;border-radius:9999px;font-size:10px;font-weight:700;padding:2px 7px;}
.hero{height:190px;display:flex;align-items:center;padding:0 30px;}
.h1{font-size:30px;font-weight:600;line-height:1.25;color:#e0e0e0;margin:0 0 10px;max-width:420px;}
.sub{font-size:15px;color:#8899aa;max-width:380px;margin-bottom:16px;}
.btn{display:inline-block;background:#1990c6;color:#fff;font-size:15px;font-weight:600;padding:14px 32px;border-radius:6px;}
.strip{display:flex;gap:8px;padding:0 30px 14px;}
.chip{background:#16213e;color:#e0e0e0;border-radius:9999px;font-size:12px;padding:6px 16px;}
.chip.on{background:#1990c6;color:#fff;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:206px;background:#16213e;border-radius:10px;overflow:hidden;}
.thumb{height:120px;border-radius:10px 10px 0 0;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#d4a843;color:#1a1a2e;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:2px;}
.body{padding:8px 14px 14px;}
.ptitle{font-size:14px;font-weight:600;color:#e0e0e0;}
.pprice{font-size:16px;color:#1990c6;margin-top:4px;}
.rating{font-size:12px;color:#d4a843;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:52px;background:#1a1a2e;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;color:#8899aa;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Renegade Game Studios</div>
<div class="navlinks"><div>Card Games</div><div>Board Games</div><div>Expansions</div><div>Coming Soon</div></div>
<div class="icons"><span>🔍</span><span>🛒<span class="cartb">3</span></span></div>
</div>
<div class="hero">
<div>
<div class="h1">A game table at dusk, always ready.</div>
<div class="sub">Bold tabletop titles built on sharp mechanics and even sharper box art.</div>
<div class="btn">Browse Catalog</div>
</div>
</div>
<div class="strip">
<div class="chip on">All Games</div><div class="chip">Strategy</div><div class="chip">Party</div><div class="chip">Cooperative</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1990c6,#1a1a2e)"><div class="badge">New</div></div><div class="body"><div class="ptitle">Ironhold Siege</div><div class="pprice">$54.99</div><div class="rating">★★★★★ 4.8</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a1a2e,#c0392b)"></div><div class="body"><div class="ptitle">Wraithbound</div><div class="pprice">$44.99</div><div class="rating">★★★★☆ 4.4</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#27ae60,#16213e)"></div><div class="body"><div class="ptitle">Signal Fires</div><div class="pprice">$39.99</div><div class="rating">★★★★★ 4.9</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1990c6,#16213e)"></div><div class="body"><div class="ptitle">Depths of Karn</div><div class="pprice">$59.99</div><div class="rating">★★★★☆ 4.6</div></div></div>
</div>
<div class="footer"><span>© Renegade Game Studios — let the box art speak</span><span>Retailers · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #dedede; color: #121212;
border: none; border-radius: 9999px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 9999px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #e91e63; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Segoe UI',Roboto,Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid #dedede;}
.logo{font-size:20px;font-weight:600;letter-spacing:-0.3px;}
.icons{position:absolute;right:32px;top:0;height:64px;display:flex;align-items:center;gap:10px;}
.ic{width:36px;height:36px;border-radius:9999px;background:#f5f5f5;}
.hero{text-align:center;padding:36px 32px 20px;}
.hero h1{font-size:28px;font-weight:600;letter-spacing:-0.5px;margin:0 0 8px;}
.hero p{font-size:14px;color:#555;margin:0 0 18px;}
.cta{display:inline-block;background:#f5c518;color:#121212;font-size:14px;font-weight:600;letter-spacing:0.2px;padding:12px 28px;border-radius:9999px;}
.search{width:520px;margin:20px auto 0;height:44px;border-radius:9999px;background:#f5f5f5;border:1px solid #e8e8e8;display:flex;align-items:center;padding:0 20px;font-size:13px;color:#888;}
.cats{display:flex;justify-content:center;gap:14px;padding:20px 32px 0;}
.cat{background:#f5f5f5;border-radius:12px;padding:14px 22px;font-size:14px;font-weight:500;text-align:center;}
.grid{display:flex;justify-content:center;gap:14px;padding:20px 32px 0;}
.card{width:160px;background:#fff;border:1px solid #dedede;border-radius:12px;padding:8px;position:relative;}
.thumb{height:110px;border-radius:8px;margin-bottom:6px;}
.badgen{position:absolute;top:14px;left:14px;background:#e91e63;color:#fff;font-size:9px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:2px 7px;border-radius:6px;}
.badges{position:absolute;top:14px;left:14px;background:#f5c518;color:#121212;font-size:9px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:2px 7px;border-radius:6px;}
.pname{font-size:14px;font-weight:500;margin-top:6px;}
.pprice{font-size:14px;font-weight:600;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:46px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#fff;font-size:12px;}
.footer span{margin-left:18px;color:#c4c4c4;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="icons"><div class="ic"></div><div class="ic"></div><div class="ic"></div></div>
<div class="logo">Ooly</div>
</div>
<div class="hero">
<h1>Create Your Happy!</h1>
<p>Markers, paint, and clay for anyone who still likes to make a mess.</p>
<div class="cta">Shop Now</div>
<div class="search">Search markers, paint, clay...</div>
</div>
<div class="cats">
<div class="cat">Markers</div>
<div class="cat">Paint</div>
<div class="cat">Clay</div>
<div class="cat">Stickers</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f5c518,#e91e63)"></div><div class="badgen">New</div><div class="pname">Rainbow Marker Set</div><div class="pprice">$14</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4caf50,#f5c518)"></div><div class="pname">Air-Dry Clay Kit</div><div class="pprice">$18</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e91e63,#4caf50)"></div><div class="badges">Sale</div><div class="pname">Sticker Book</div><div class="pprice">$9</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#121212,#555555)"></div><div class="pname">Doodle Paint Set</div><div class="pprice">$22</div></div>
</div>
<div class="footer"><span>© Made With Ooly</span><span>Shop<span> Support<span> Journal</span></span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.25px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #6d6e71; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; background: #de1f27; color: #ffffff;
border: none; border-radius: 2px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; background: #ffffff; color: #de1f27;
border: 1px solid #de1f27; border-radius: 2px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d6e71; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #de1f27; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; color:#3d3d3d; }
*{box-sizing:border-box;}
.topbar{height:32px;background:#de1f27;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:11px;font-weight:600;}
.nav{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:19px;font-weight:700;color:#222222;}
.search{flex:1;max-width:400px;height:34px;border:1px solid #de1f27;border-radius:2px;display:flex;align-items:center;padding:0 12px;font-size:12px;color:#6d6e71;margin:0 20px;}
.searchbtn{background:#de1f27;color:#fff;font-size:12px;font-weight:700;padding:8px 18px;border-radius:2px;}
.catrow{display:flex;gap:1px;background:#e0e0e0;padding:14px 30px 0;}
.cattile{flex:1;background:#b3d4fc;padding:10px;text-align:center;font-size:12px;font-weight:700;color:#222222;}
.sec{padding:16px 30px 0;}
.secTitle{font-size:16px;font-weight:700;color:#222222;margin-bottom:12px;}
.grid{display:flex;gap:12px;}
.card{width:224px;background:#fff;border:1px solid #e0e0e0;border-radius:4px;padding:10px;}
.thumb{height:80px;background:#f5f5f5;border-radius:2px;margin-bottom:8px;}
.partno{font-family:'Courier New',monospace;font-size:11px;color:#6d6e71;margin-bottom:3px;}
.ptitle{font-size:12px;font-weight:600;color:#222222;line-height:1.3;margin:0 0 4px;height:32px;overflow:hidden;}
.pmeta{font-size:11px;color:#6d6e71;margin-bottom:6px;}
.pprice{font-size:14px;font-weight:700;color:#de1f27;}
.stock{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.3px;color:#116600;text-transform:uppercase;margin-left:8px;}
</style>
<div class="topbar"><span>Account · Order History · Quick Order</span><span>Need Help? 1-800-345-2100</span></div>
<div class="nav">
<div class="logo">Thomas Scientific</div>
<div class="search">Search by CAS #, catalog #, or product name…</div>
<div class="searchbtn">Search</div>
</div>
<div class="catrow">
<div class="cattile">Lab Equipment</div>
<div class="cattile">Chemicals</div>
<div class="cattile">Safety & PPE</div>
<div class="cattile">Glassware</div>
</div>
<div class="sec">
<div class="secTitle">Frequently Reordered</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="partno">CAT# TS-4471-B</div><div class="ptitle">Borosilicate Beaker, 250mL, Graduated</div><div class="pmeta">Pack of 12<span class="stock">In Stock</span></div><div class="pprice">$84.60</div></div>
<div class="card"><div class="thumb"></div><div class="partno">CAT# TS-8823-A</div><div class="ptitle">Nitrile Exam Gloves, Powder-Free, Medium</div><div class="pmeta">Box of 100<span class="stock">In Stock</span></div><div class="pprice">$19.95</div></div>
<div class="card"><div class="thumb"></div><div class="partno">CAT# TS-1190-C</div><div class="ptitle">Digital Analytical Balance, 0.1mg</div><div class="pmeta">Each<span class="stock">In Stock</span></div><div class="pprice">$1,249.00</div></div>
<div class="card"><div class="thumb"></div><div class="partno">CAT# TS-5502-D</div><div class="ptitle">PTFE Stir Bar Set, Assorted Sizes</div><div class="pmeta">Pack of 6<span class="stock">In Stock</span></div><div class="pprice">$46.20</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #cccacc; color: #1b1e21;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #cccacc; color: #1b1e21;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #1b1e21; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #545b62; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #dd1d0b; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #cccacc; color: #1b1e21;
border: 1px solid #dd1d0b; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1b1e21;
border: 1px solid #a09fa1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #545b62; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #dd1d0b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#cccacc; color:#1b1e21; box-sizing:border-box;
font-family:'Cabin','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; background:#ffffff; border-bottom:1px solid #d6d8db; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; }
.brand { font-size:17px; font-weight:700; color:#1b1e21; }
.navlinks { display:flex; gap:24px; font-size:12px; }
.navlinks span { color:#545b62; }
.navlinks span.on { color:#dd1d0b; border-bottom:2px solid #dd1d0b; padding-bottom:16px; }
.cart { font-size:12px; color:#1b1e21; border:1px solid #d6d8db; padding:6px 14px; border-radius:8px; }
.wrap { display:flex; height:552px; padding:26px 30px; gap:28px; }
.poster { width:260px; height:100%; border-radius:8px; flex-shrink:0; position:relative; overflow:hidden;
background:linear-gradient(160deg,#1b1e21 0%,#383d41 55%,#545b62 100%); }
.poster::before { content:''; position:absolute; inset:0;
background:repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px); }
.reel { position:absolute; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; }
.reel span { width:12px; height:12px; border-radius:50%; border:2px solid rgba(255,255,255,.5); }
.poster-title { position:absolute; bottom:18px; left:16px; right:16px; color:#fff; font-size:20px; font-weight:700; line-height:1.15; }
.fmt-badge { position:absolute; top:14px; right:14px; background:#dd1d0b; color:#fff; font-size:10px;
padding:3px 8px; border-radius:4px; text-transform:uppercase; letter-spacing:.05em; }
.info { flex:1; display:flex; flex-direction:column; gap:14px; }
.genre-row { display:flex; gap:8px; }
.genre-row span { font-size:11px; color:#545b62; border:1px solid #d6d8db; border-radius:8px; padding:4px 10px; }
.info h1 { margin:0; font-size:26px; font-weight:700; }
.rating-row { display:flex; align-items:center; gap:10px; font-size:12px; color:#545b62; }
.stars { color:#dd1d0b; letter-spacing:1px; }
.synopsis { font-size:13px; line-height:1.6; color:#383d41; max-width:560px; }
.fmt-select { display:flex; gap:8px; }
.fmt-opt { border:1px solid #d6d8db; border-radius:8px; padding:8px 16px; font-size:12px; background:#fff; }
.fmt-opt.on { border-color:#dd1d0b; color:#dd1d0b; font-weight:700; }
.buy-row { display:flex; align-items:center; gap:16px; margin-top:auto; }
.price { font-size:24px; font-weight:700; }
.btn-buy { background:#dd1d0b; color:#fff; border:none; border-radius:8px; padding:12px 28px; font-size:14px; font-weight:700; }
.divider { height:1px; background:#d6d8db; }
.credits { font-size:11px; color:#545b62; display:flex; gap:20px; }
.credits b { color:#1b1e21; display:block; font-size:11px; }
footer { height:36px; background:#ffffff; border-top:1px solid #d6d8db; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:11px; color:#545b62; }
</style></head>
<body>
<nav>
<p class="brand">101 Films</p>
<div class="navlinks"><span>Horror</span><span class="on">Cult</span><span>Documentary</span><span>Box Sets</span></div>
<span class="cart">Cart (0)</span>
</nav>
<div class="wrap">
<div class="poster">
<div class="reel"><span></span><span></span></div>
<span class="fmt-badge">4K UHD</span>
<div class="poster-title">The Quiet Reel</div>
</div>
<div class="info">
<div class="genre-row"><span>Cult</span><span>1978</span><span>Region B</span></div>
<h1>The Quiet Reel</h1>
<div class="rating-row"><span class="stars">★★★★☆</span><span>4.2 · 318 reviews</span></div>
<p class="synopsis">A restored 4K scan of the 1978 regional cult favorite, struck from the original camera negative. Includes a new commentary track and the never-before-seen workprint cut.</p>
<div class="fmt-select">
<span class="fmt-opt">DVD — $14.99</span>
<span class="fmt-opt on">Blu-ray — $22.99</span>
<span class="fmt-opt">4K UHD — $29.99</span>
</div>
<div class="divider"></div>
<div class="credits">
<div><b>Director</b>Jordan Whitfield</div>
<div><b>Runtime</b>96 min</div>
<div><b>Extras</b>Commentary, Workprint</div>
</div>
<div class="buy-row">
<span class="price">$22.99</span>
<button class="btn-buy">Add to Cart</button>
</div>
</div>
</div>
<footer><span>© 101 Films — restorations from the archive shelf</span><span>Shipping · Region Info · Contact</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #262629; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #262629; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #060607; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.mono { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:22px; font-weight:700; letter-spacing:0.3px; margin:0; }
.addbtn { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.12);
display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; }
main { display:flex; gap:24px; padding:8px 32px 0; height:556px; }
/* ---- left: the card stack, Wallet's one true signature ---- */
.stack { position:relative; width:432px; height:280px; margin-top:4px; }
.card { position:absolute; left:0; width:400px; border-radius:10px; box-shadow:rgba(0,0,0,0.5) 0 8px 24px; }
.card3 { top:170px; height:110px; z-index:1;
background:linear-gradient(120deg,#8a5a1e,#3a2a12); }
.card3 .band { height:38px; border-radius:10px 10px 0 0; background:rgba(0,0,0,0.18); }
.card3 .issuer { padding:10px 16px 0; font-size:12px; font-weight:600; color:rgba(255,255,255,0.85); }
.card2 { top:90px; height:150px; z-index:2;
background:linear-gradient(160deg,#1A2D4F,#0E1B30); padding:16px; }
.card2 .issuer { font-size:16px; font-weight:600; }
.card2 .last4 { position:absolute; bottom:16px; right:16px; font-size:15px; letter-spacing:0.5px; color:rgba(255,255,255,0.9); }
.card2 .holder { position:absolute; bottom:16px; left:16px; font-size:11px; letter-spacing:0.6px; text-transform:uppercase; color:rgba(255,255,255,0.75); }
.card1 { top:0; height:220px; z-index:3; padding:18px;
background:linear-gradient(135deg,#E8E8EB 0%,#A8A8AD 55%,#3D3D3F 100%); }
.card1 .top { display:flex; justify-content:space-between; align-items:flex-start; }
.card1 .chip { width:26px; height:20px; border-radius:4px; background:#C7AC73; }
.card1 .aplogo { font-size:16px; font-weight:700; color:#ffffff; }
.card1 .issuer { position:absolute; top:52px; left:18px; font-size:15px; font-weight:600; color:#1a1a1a; }
.card1 .holder { position:absolute; bottom:18px; left:18px; font-size:11px; letter-spacing:0.6px; text-transform:uppercase; color:#1a1a1a; }
.card1 .cash { position:absolute; bottom:14px; right:14px; width:28px; height:28px; border-radius:50%;
background:#FF3B30; color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
/* ---- right: expanded Apple Card detail ---- */
.detail { flex:1; padding-top:4px; }
.dhead { font-size:13px; font-weight:600; letter-spacing:0.5px; color:#A0A0A5; text-transform:uppercase; margin:0 0 4px; }
.balance { font-size:38px; font-weight:700; margin:0 0 2px; }
.balsub { font-size:12px; color:#A0A0A5; margin:0 0 22px; }
.sectiontitle { font-size:12px; font-weight:600; letter-spacing:0.6px; color:#A0A0A5; text-transform:uppercase; margin:0 0 6px; }
.txn { display:flex; align-items:center; padding:12px 0; border-bottom:0.5px solid #262629; }
.txn .dot { width:32px; height:32px; border-radius:50%; margin-right:12px; flex:0 0 auto; }
.txn .who { font-size:15px; }
.txn .when { font-size:12px; color:#A0A0A5; margin-top:2px; }
.txn .amt { margin-left:auto; text-align:right; font-size:15px; font-weight:500; }
.txn .cash2 { font-size:10px; color:#FF3B30; margin-top:2px; }
.toolbar { margin-top:14px; height:52px; border-radius:14px; background:rgba(255,255,255,0.06);
display:flex; align-items:center; justify-content:center; gap:26px; }
.toolbar .tb { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.12);
display:flex; align-items:center; justify-content:center; font-size:14px; }
footer { height:28px; border-top:0.5px solid #262629; margin:0 32px; padding-top:6px;
display:flex; justify-content:space-between; font-size:11px; color:#A0A0A5; }
</style></head>
<body>
<nav>
<p class="brand">Apple Wallet (iOS)</p>
<div class="addbtn">+</div>
</nav>
<main>
<div class="stack">
<div class="card card3">
<div class="band"></div>
<div class="issuer">BOS → SFO · Boarding Pass</div>
</div>
<div class="card card2">
<div class="issuer">Chase Sapphire</div>
<div class="holder">CARDHOLDER</div>
<div class="last4 mono">•••• 4521</div>
</div>
<div class="card card1">
<div class="top">
<div class="chip"></div>
<div class="aplogo">Apple Wallet (iOS)</div>
</div>
<div class="issuer">Card</div>
<div class="holder">CARDHOLDER NAME</div>
<div class="cash">$</div>
</div>
</div>
<div class="detail">
<p class="dhead">Available Balance</p>
<p class="balance mono">$1,284.20</p>
<p class="balsub">as of 9:42 AM today</p>
<p class="sectiontitle">Latest Transactions</p>
<div class="txn">
<div class="dot" style="background:#4573D2"></div>
<div><div class="who">Blue Bottle Coffee</div><div class="when">Aug 12 · 8:14 AM</div></div>
<div class="amt"><div class="mono">$6.50</div><div class="cash2">+$0.13</div></div>
</div>
<div class="txn">
<div class="dot" style="background:#62D26F"></div>
<div><div class="who">Whole Foods Market</div><div class="when">Aug 11 · 6:32 PM</div></div>
<div class="amt"><div class="mono">$84.20</div><div class="cash2">+$1.68</div></div>
</div>
<div class="txn">
<div class="dot" style="background:#F1BD6C"></div>
<div><div class="who">Delta Air Lines</div><div class="when">Aug 9 · 11:02 AM</div></div>
<div class="amt"><div class="mono">$412.00</div><div class="cash2">+$8.24</div></div>
</div>
<div class="toolbar">
<div class="tb">💳</div>
<div class="tb">≡</div>
<div class="tb">···</div>
</div>
</div>
</main>
<footer>
<span>Apple Wallet (iOS)</span>
<span>Card · Cash · Settings</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.25px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #55595c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ee7f00; color: #ffffff;
border: none; border-radius: 2px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #222222;
border: 1px solid #ee7f00; border-radius: 2px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #55595c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #5cb85c; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#373a3c; box-sizing:border-box;
font-family:'Open Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#1a1a1a; }
.brand { font-size:15px; font-weight:700; color:#fff; margin:0; text-transform:lowercase; }
.navlinks { display:flex; gap:0; font-size:14px; font-weight:600; color:#fff; }
.navlinks span { padding:0 14px; height:56px; display:flex; align-items:center; border-bottom:3px solid transparent; }
.navlinks span.active { border-bottom-color:#ee7f00; }
.cart { color:#ee7f00; font-size:13px; font-weight:700; }
.content { display:flex; padding:20px 32px; gap:20px; }
.gallery { flex:1.1; }
.mainimg { height:210px; background:#eceeef; position:relative; }
.mainimg::after { content:''; position:absolute; left:50%; top:50%; width:120px; height:120px; border-radius:50%;
background:radial-gradient(circle,#373a3c 0%,#1a1a1a 70%); transform:translate(-50%,-50%); }
.mainimg::before { content:''; position:absolute; left:50%; top:50%; width:60px; height:60px; border-radius:50%;
border:6px solid #ee7f00; transform:translate(-50%,-50%); z-index:1; }
.details { flex:1; }
.details h1 { font-size:22px; font-weight:700; margin:0 0 6px; }
.details .sub { font-size:12px; color:#818a91; margin:0 0 12px; }
.price { font-size:24px; font-weight:700; color:#ee7f00; margin-bottom:12px; }
.badges { display:flex; gap:6px; margin-bottom:14px; }
.bad { font-size:10px; font-weight:700; text-transform:uppercase; padding:2px 7px; color:#fff; border-radius:2px; }
.bad.ok { background:#5cb85c; }
.bad.info { background:#5bc0de; }
.btn { display:block; text-align:center; background:#ee7f00; color:#fff; font-weight:700; font-size:14px; text-transform:uppercase;
letter-spacing:.5px; padding:12px; border-radius:2px; margin-bottom:14px; }
.spec { border:1px solid #eeeeee; }
.row { display:flex; justify-content:space-between; padding:8px 12px; font-size:12px; border-bottom:1px solid #eeeeee; }
.row:nth-child(odd) { background:#f5f5f5; }
.row span:first-child { font-weight:700; text-transform:uppercase; font-size:11px; letter-spacing:.3px; color:#55595c; }
footer { position:absolute; bottom:0; left:0; right:0; height:44px; background:#222222; color:#929395;
border-top:3px solid #ee7f00; display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">BE Quiet</p>
<div class="navlinks"><span class="active">Cooling</span><span>Cases</span><span>Power Supplies</span><span>Fans</span></div>
<div class="cart">Cart (1)</div>
</nav>
<div class="content">
<div class="gallery"><div class="mainimg"></div></div>
<div class="details">
<h1>Dark Rock Pro 5 CPU Cooler</h1>
<p class="sub">Dual-tower · Twin 135mm Silent Wings</p>
<div class="price">$99.90</div>
<div class="badges"><span class="bad ok">AM5 Compatible</span><span class="bad info">Requires Mounting Kit</span></div>
<span class="btn">Add to Cart</span>
<div class="spec">
<div class="row"><span>TDP Rating</span><span>270W</span></div>
<div class="row"><span>Fan Speed</span><span>1200–1700 RPM</span></div>
<div class="row"><span>Noise Level</span><span>21.6–24.3 dB(A)</span></div>
<div class="row"><span>Height</span><span>162.8 mm</span></div>
</div>
</div>
</div>
<footer>
<span>© BE Quiet</span>
<span>PSU Calculator · Cooler Compatibility · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f4f5; color: #090909;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f4f5; color: #090909;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.35; margin: 0; color: #090909; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #f0263c; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #003388; color: #ffffff;
border: 1px solid #f0263c; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #32373c;
border: 1px solid #b8b9ba; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f0263c; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Iello mockup</title>
<style>
:host, html, body {
width: 960px; height: 640px; margin: 0; padding: 0;
overflow: hidden; box-sizing: border-box;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f3f4f5; color: #32373c;
}
*, *::before, *::after { box-sizing: border-box; }
.wrap { width: 960px; height: 640px; position: relative; overflow: hidden; background: #f3f4f5; }
.nav {
height: 60px; background: #ffffff; border-bottom: 1px solid #e5e7eb;
display: flex; align-items: center; justify-content: space-between; padding: 0 40px;
}
.logo { font-weight: 800; font-size: 20px; color: #f0263c; letter-spacing: -0.3px; }
.logo span { color: #003388; }
.navlinks { display: flex; gap: 26px; }
.navlinks a { font-size: 13px; font-weight: 600; color: #32373c; text-decoration: none; }
.navlinks a.active { color: #f0263c; }
.navcta { background: #003388; color: #ffffff; font-size: 12px; font-weight: 700; padding: 8px 16px; border-radius: 8px; }
.hero { height: 220px; display: flex; align-items: center; padding: 0 40px; gap: 20px; }
.hero-text { width: 460px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #003388; margin-bottom: 10px; }
.headline { font-size: 34px; font-weight: 800; color: #090909; line-height: 1.15; letter-spacing: -0.5px; }
.headline em { font-style: normal; color: #f0263c; }
.sub { font-size: 14px; color: #6b7280; margin-top: 12px; line-height: 1.5; width: 400px; }
.cta-row { display: flex; gap: 12px; margin-top: 20px; }
.btn-primary { background: #f0263c; color: #ffffff; font-size: 14px; font-weight: 700; padding: 12px 22px; border-radius: 8px; }
.btn-ghost { background: transparent; color: #003388; font-size: 14px; font-weight: 700; padding: 12px 18px; border-radius: 8px; border: 1px solid #e5e7eb; }
.hero-art { position: relative; width: 400px; height: 180px; }
.box { position: absolute; border-radius: 10px; box-shadow: 0 10px 24px rgba(9,9,9,0.14); border: 1px solid rgba(0,0,0,0.06); }
.box-title { position: absolute; left: 12px; bottom: 10px; color: #ffffff; font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; }
.box1 { left: 30px; top: 10px; width: 150px; height: 120px; background: linear-gradient(135deg,#f0263c,#c01d30); transform: rotate(-7deg); z-index: 2; }
.box2 { left: 150px; top: 40px; width: 150px; height: 120px; background: linear-gradient(135deg,#003388,#00245e); transform: rotate(6deg); z-index: 3; }
.box3 { left: 230px; top: 4px; width: 140px; height: 110px; background: linear-gradient(135deg,#e0a458,#c1863a); transform: rotate(-3deg); z-index: 1; }
.section-head { padding: 6px 40px 0 40px; display: flex; align-items: baseline; justify-content: space-between; }
.section-title { font-size: 18px; font-weight: 800; color: #090909; }
.section-link { font-size: 12px; font-weight: 700; color: #003388; }
.grid { display: flex; gap: 18px; padding: 16px 40px 0 40px; width: 880px; }
.card { flex: 1; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.art { height: 100px; position: relative; }
.pill { position: absolute; top: 8px; left: 8px; font-size: 9px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: #ffffff; padding: 4px 9px; border-radius: 9999px; }
.pill-red { background: #f0263c; }
.pill-blue { background: #003388; }
.info { padding: 10px 12px 12px 12px; }
.title { font-size: 13px; font-weight: 700; color: #090909; }
.meta { font-size: 10.5px; color: #6b7280; margin-top: 4px; }
.price { font-size: 14px; font-weight: 800; color: #f0263c; margin-top: 8px; }
.footer { position: absolute; left: 0; bottom: 0; width: 960px; height: 40px; background: #003388; color: #cfe0ff;
display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0.2px; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Iello<span>.</span></div>
<div class="navlinks">
<a class="active" href="#">New Releases</a>
<a href="#">Strategy</a>
<a href="#">Party</a>
<a href="#">Family</a>
<a href="#">Co-op</a>
</div>
<div class="navcta">Find a Store</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="eyebrow">Board Games & Card Games</div>
<div class="headline">Games worth <em>gathering</em> around</div>
<div class="sub">From weekend strategy epics to five-minute party chaos — pick a box, pull up a chair, and let the dice do the talking.</div>
<div class="cta-row">
<div class="btn-primary">Shop New Releases</div>
<div class="btn-ghost">Browse Catalog</div>
</div>
</div>
<div class="hero-art">
<div class="box box3"></div>
<div class="box box1"><span class="box-title">Cargo Run</span></div>
<div class="box box2"><span class="box-title">Nightfall</span></div>
</div>
</div>
<div class="section-head">
<div class="section-title">This Week's Table</div>
<div class="section-link">View all games →</div>
</div>
<div class="grid">
<div class="card">
<div class="art" style="background:linear-gradient(135deg,#f0263c,#c01d30);"><span class="pill pill-blue">Strategy</span></div>
<div class="info">
<div class="title">Cargo Run</div>
<div class="meta">2–5 players · 45 min</div>
<div class="price">$34.99</div>
</div>
</div>
<div class="card">
<div class="art" style="background:linear-gradient(135deg,#003388,#00245e);"><span class="pill pill-red">Party</span></div>
<div class="info">
<div class="title">Nightfall</div>
<div class="meta">3–8 players · 20 min</div>
<div class="price">$24.99</div>
</div>
</div>
<div class="card">
<div class="art" style="background:linear-gradient(135deg,#e0a458,#c1863a);"><span class="pill pill-red">Family</span></div>
<div class="info">
<div class="title">Harvest Fair</div>
<div class="meta">2–4 players · 30 min</div>
<div class="price">$29.99</div>
</div>
</div>
<div class="card">
<div class="art" style="background:linear-gradient(135deg,#4a7c59,#375d43);"><span class="pill pill-blue">Co-op</span></div>
<div class="info">
<div class="title">Deepwatch</div>
<div class="meta">1–4 players · 60 min</div>
<div class="price">$39.99</div>
</div>
</div>
</div>
<div class="footer">© Iello — Bringing people together, one box at a time.</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1890ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1890ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f5f5; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1890ff; color: #f5f5f5;
border: 1px solid #f5f5f5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1890ff; color: #f5f5f5;
border: 1px solid #3ba0fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3ba0fd; color: #f5f5f5;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F5F5F5; color:#000000; box-sizing:border-box;
font-family:-apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
* { box-sizing:border-box; }
.nav { height:52px; background:#ffffff; display:flex; align-items:center; padding:0 24px; gap:26px;
border-bottom:1px solid #eeeeee; }
.nav .logo { font-weight:700; font-size:16px; color:#1890FF; }
.nav a { font-size:14px; color:#333333; }
.nav a.cur { color:#1890FF; font-weight:500; }
.navspacer { flex:1; }
.search { width:220px; height:30px; border:1px solid #999999; border-radius:2px; font-size:14px; color:#999999;
display:flex; align-items:center; padding:4px 8px 4px 11px; }
.banner { margin:20px 24px 0; background:linear-gradient(90deg,#0f4ba0,#1890FF); border-radius:8px; height:150px;
display:flex; align-items:center; justify-content:space-between; padding:0 40px; color:#fff; }
.banner h1 { font-size:26px; font-weight:600; margin:0 0 8px; }
.banner p { font-size:14px; margin:0; opacity:0.9; max-width:360px; line-height:1.5; }
.banner .cta { background:#1890FF; color:#fff; border:none; border-radius:2px; padding:0.01px 15px 4px; height:40px;
font-size:16px; font-weight:400; box-shadow:0 2px 0 rgba(0,0,0,0.043); }
.bannerart { width:170px; height:110px; border-radius:8px; background:
repeating-linear-gradient(45deg, rgba(255,255,255,0.12) 0 10px, rgba(255,255,255,0.02) 10px 20px); }
.section { padding:22px 24px 0; }
.section h3 { font-size:15px; font-weight:600; margin:0 0 12px; color:#000000; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#FFFFFF; border-radius:8px; padding:22px 10px; text-align:center; }
.card .ic { width:40px; height:40px; border-radius:10px; margin:0 auto 12px; }
.ic1{background:#e6f4ff;} .ic2{background:#e9fbf1;} .ic3{background:#fff3e0;}
.ic1::after,.ic2::after,.ic3::after{content:'';display:block;width:20px;height:20px;margin:10px auto 0;border-radius:5px;}
.ic1::after{background:#1890FF;} .ic2::after{background:#00c853;} .ic3::after{background:#ff9800;}
.card h4 { font-size:14px; font-weight:600; margin:0 0 6px; }
.card p { font-size:12px; color:#666; margin:0; line-height:1.5; }
.codebox { margin:18px 24px 0; background:#1e1e1e; border-radius:8px; padding:14px 18px; color:#d4d4d4;
font-family:'Courier New', monospace; font-size:12px; line-height:1.7; }
.codebox .k { color:#569cd6; } .codebox .s { color:#ce9178; } .codebox .c { color:#6a9955; }
footer { display:flex; padding:14px 24px 0; gap:20px; font-size:12px; color:#000000; }
</style></head>
<body>
<nav class="nav">
<span class="logo">Alipay</span>
<a class="cur">Overview</a><a>Web / Mobile App</a><a>Payments</a><a>Marketing APIs</a><a>Tools</a>
<div class="navspacer"></div>
<div class="search">Search docs…</div>
</nav>
<div class="banner">
<div>
<h1>Build with the Alipay Open Platform</h1>
<p>Payments, marketing, and data capabilities for web and mobile apps — one API key to get started.</p>
<button class="cta">Get API Key</button>
</div>
<div class="bannerart"></div>
</div>
<div class="section">
<h3>Developer tools</h3>
<div class="cards">
<div class="card"><div class="ic ic1"></div><h4>Payment SDK</h4><p>Drop-in checkout for web and native apps.</p></div>
<div class="card"><div class="ic ic2"></div><h4>Merchant Console</h4><p>Manage orders, refunds, and settlement.</p></div>
<div class="card"><div class="ic ic3"></div><h4>Sandbox Keys</h4><p>Test transactions before going live.</p></div>
</div>
</div>
<div class="codebox">
<span class="c">// Create a payment session</span><br>
<span class="k">const</span> session = <span class="k">await</span> alipay.<span class="k">create</span>({<br>
amount: <span class="s">"128.00"</span>, currency: <span class="s">"CNY"</span>,<br>
notify_url: <span class="s">"https://example.com/webhook"</span><br>
});
</div>
<footer>
<span>© Alipay Open Platform</span>
<span>Docs</span><span>Status</span><span>Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffeb00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffeb00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7309; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffeb00; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffeb00; color: #111111;
border: 1px solid #d9c803; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7309; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6c500; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>KakaoPay detail mock</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:'KakaoSmall', 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
* { box-sizing:border-box; }
.wrap { width:960px; height:640px; display:grid; grid-template-rows:64px 176px 108px 32px 1fr; padding:0 32px; gap:14px; }
.header { display:flex; align-items:center; justify-content:space-between; padding-top:14px; }
.header .brand { font-family:'KakaoBig','Pretendard',sans-serif; font-size:20px; font-weight:700; color:#000000; }
.bell { width:32px; height:32px; border-radius:999px; background:#f3f3f3; position:relative; }
.bell::after { content:''; position:absolute; width:6px; height:6px; border-radius:50%; background:#ffeb00; top:6px; right:6px; }
.balance { border-radius:16px; background:linear-gradient(135deg,#141414,#000000); color:#ffffff; padding:22px 26px;
display:flex; flex-direction:column; justify-content:center; gap:8px; position:relative; overflow:hidden; }
.balance .glow { position:absolute; width:220px; height:220px; border-radius:50%; right:-60px; top:-80px;
background:radial-gradient(circle, rgba(255,235,0,0.28), rgba(255,235,0,0) 70%); }
.balance .label { font-size:13px; font-weight:400; color:#cccccc; position:relative; z-index:1; }
.balance .amount { font-size:34px; font-weight:700; letter-spacing:-0.6px; position:relative; z-index:1; }
.balance .sub { font-size:12px; color:#999999; position:relative; z-index:1; }
.actions { display:flex; gap:14px; }
.actions .a { flex:1; background:#f3f3f3; border-radius:24px; display:flex; flex-direction:column; align-items:center;
justify-content:center; gap:8px; font-size:12px; font-weight:400; color:#333333; }
.actions .icon { width:36px; height:36px; border-radius:999px; background:#ffeb00; display:flex; align-items:center; justify-content:center; }
.actions .icon.dark { background:#000000; }
.actions .glyph-send { width:12px; height:12px; border-left:2px solid #000000; border-bottom:2px solid #000000; transform:rotate(135deg); }
.actions .glyph-qr { width:16px; height:16px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:1px; }
.actions .glyph-qr span { background:#000000; }
.actions .glyph-qr span:nth-child(5) { background:transparent; }
.actions .glyph-plus { position:relative; width:14px; height:14px; }
.actions .glyph-plus::before,.actions .glyph-plus::after { content:''; position:absolute; background:#ffffff; }
.actions .glyph-plus::before { left:6px; top:0; width:2px; height:14px; }
.actions .glyph-plus::after { left:0; top:6px; width:14px; height:2px; }
.actions .glyph-more { display:flex; gap:3px; }
.actions .glyph-more span { width:4px; height:4px; border-radius:50%; background:#000000; }
.sectiontitle { font-size:14px; font-weight:700; color:#333333; align-self:end; }
.history { border-radius:16px; background:#eeeeee; padding:6px 18px; overflow:hidden; }
.row { display:flex; align-items:center; gap:14px; height:64px; border-bottom:1px solid #e2e2e2; }
.row:last-child { border-bottom:none; }
.row .dot { width:36px; height:36px; border-radius:999px; background:#ffffff; flex:0 0 36px; }
.row .mid { flex:1; }
.row .mid .t { font-size:14px; font-weight:400; color:#333333; }
.row .mid .d { margin-top:2px; font-size:12px; font-weight:400; color:#888888; }
.row .amt { font-size:14px; font-weight:700; color:#000000; }
</style></head>
<body>
<div class="wrap">
<div class="header">
<div class="brand">KakaoPay</div>
<div class="bell"></div>
</div>
<div class="balance">
<div class="glow"></div>
<div class="label">Available balance</div>
<div class="amount">$1,284.50</div>
<div class="sub">Linked to Everyday Checking</div>
</div>
<div class="actions">
<div class="a"><div class="icon"><div class="glyph-send"></div></div>Send</div>
<div class="a"><div class="icon dark"><span class="glyph-qr"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></div>Scan to Pay</div>
<div class="a"><div class="icon dark"><div class="glyph-plus"></div></div>Top up</div>
<div class="a"><div class="icon"><div class="glyph-more"><span></span><span></span><span></span></div></div>More</div>
</div>
<div class="sectiontitle">Recent activity</div>
<div class="history">
<div class="row"><div class="dot"></div><div class="mid"><div class="t">Corner Grocery</div><div class="d">Today, 9:41 AM</div></div><div class="amt">-$12.40</div></div>
<div class="row"><div class="dot"></div><div class="mid"><div class="t">Received from Alex</div><div class="d">Today, 8:02 AM</div></div><div class="amt">+$50.00</div></div>
<div class="row"><div class="dot"></div><div class="mid"><div class="t">Riverside Coffee</div><div class="d">Yesterday, 6:15 PM</div></div><div class="amt">-$4.20</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5f6368; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #226d7a; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #ffffff; color: #226d7a;
border: 1px solid #226d7a; border-radius: 4px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5f6368; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; background: #e4f5fa; color: #226d7a;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Element Case</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#1a1a1a; font-family:'Open Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #d8e8ec; }
.logo { font-weight:700; font-size:19px; color:#226d7a; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:600; }
.btn { background:#226d7a; color:#fff; border-radius:4px; padding:12px 24px; font-size:14px; font-weight:700;
text-transform:uppercase; letter-spacing:.6px; }
.selector { display:flex; gap:10px; padding:16px 32px; background:#f8fbfc; }
.sel-item { border:1px solid #d8e8ec; border-radius:4px; padding:8px 16px; font-size:13px; background:#f8fbfc; }
.sel-item.on { border:2px solid #226d7a; background:#e4f5fa; color:#226d7a; font-weight:600; }
.hero { height:200px; background:#226d7a; display:flex; align-items:center; padding:0 32px; gap:30px; color:#fff; }
.hero-copy { flex:1; }
.hero-copy h1 { font-size:32px; font-weight:700; margin:0 0 10px; }
.hero-copy p { font-size:14px; color:#b0e0e9; max-width:340px; margin:0 0 16px; }
.btn-inv { display:inline-block; background:#fff; color:#226d7a; border-radius:4px; padding:12px 24px; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; }
.hero-art { flex:1; height:150px; display:flex; align-items:center; justify-content:center; }
.phone { width:80px; height:150px; background:linear-gradient(160deg,#eef6f9,#b0e0e9); border-radius:14px; border:3px solid #fff;
box-shadow:0 14px 26px rgba(0,0,0,.25); }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:20px 32px; }
.card { background:#fff; border:1px solid #d8e8ec; border-radius:4px; padding:16px; }
.thumb { height:100px; background:#f8fbfc; border-radius:4px; margin-bottom:10px; display:flex; align-items:center; justify-content:center; }
.thumb .p { width:50px; height:90px; border-radius:8px; }
.p1 { background:linear-gradient(160deg,#b0e0e9,#226d7a); }
.p2 { background:linear-gradient(160deg,#e4f5fa,#22b8d1); }
.p3 { background:linear-gradient(160deg,#d8e8ec,#1a5560); }
.spec { display:inline-block; background:#e4f5fa; color:#226d7a; font-size:11px; text-transform:uppercase; letter-spacing:.4px;
border:1px solid #b0e0e9; border-radius:4px; padding:3px 8px; margin-bottom:8px; }
.name { font-size:16px; font-weight:600; margin:0 0 4px; }
.price { font-size:16px; font-weight:700; color:#226d7a; }
</style></head>
<body>
<nav>
<div class="logo">Element Case</div>
<div class="navlinks"><span>iPhone Cases</span><span>Galaxy Cases</span><span>Straps</span><span>About</span></div>
<div class="btn">Find My Case</div>
</nav>
<div class="selector">
<span class="sel-item on">iPhone 16 Pro</span><span class="sel-item">iPhone 16</span><span class="sel-item">Galaxy S25</span><span class="sel-item">Pixel 9</span>
</div>
<div class="hero">
<div class="hero-copy">
<h1>Aerospace-grade protection.</h1>
<p>Machined aluminum cases engineered for drop protection without sacrificing form.</p>
<div class="btn-inv">Shop Solace Line</div>
</div>
<div class="hero-art"><div class="phone"></div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="p p1"></div></div><span class="spec">MIL-SPEC 810G</span><p class="name">Solace Case — Ocean</p><p class="price">$79.95</p></div>
<div class="card"><div class="thumb"><div class="p p2"></div></div><span class="spec">Aerospace Alu</span><p class="name">Black Ops X5 Case</p><p class="price">$99.95</p></div>
<div class="card"><div class="thumb"><div class="p p3"></div></div><span class="spec">Slim Profile</span><p class="name">Vapor Sleek Case</p><p class="price">$69.95</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbf8f5; color: #1d1b1b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbf8f5; color: #1d1b1b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #1d1b1b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #74716f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #cfa363; color: #000000;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fbf8f5; color: #1d1b1b;
border: 1px solid #cfa363; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fbf8f5; color: #1d1b1b;
border: 1px solid #c4c1be; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #74716f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #708265; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fbf8f5; font-family:'Apercu','Helvetica Neue','Arial',sans-serif; color:#1d1b1b; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #eae5e2;}
.logo{font-size:20px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;color:#74716f;}
.navlinks span:first-child{color:#1d1b1b;border-bottom:2px solid #cfa363;padding-bottom:24px;}
.hero{height:230px;background:#f4efd1;display:flex;align-items:center;padding:0 40px;}
.herotext{width:420px;}
h1{font-family:'ITC Garamond',Georgia,serif;font-size:38px;font-weight:400;letter-spacing:-0.3px;line-height:1.15;margin:0 0 14px;}
.sub{font-size:15px;color:#4f4c4a;margin:0 0 20px;max-width:340px;}
.cta{display:inline-block;background:#cfa363;color:#fff;font-size:13px;font-weight:600;letter-spacing:0.3px;padding:14px 28px;border-radius:9999px;}
.diffuser{width:100px;height:170px;position:relative;margin-left:100px;}
.diffuser .top{position:absolute;left:20px;top:0;width:60px;height:20px;background:#724d39;border-radius:6px 6px 0 0;}
.diffuser .body{position:absolute;left:10px;top:20px;width:80px;height:120px;background:radial-gradient(circle at 40% 30%,#d9b582,#724d39);border-radius:8px;}
.sec{padding:22px 40px 0;}
.sectitle{font-family:'ITC Garamond',Georgia,serif;font-size:24px;margin:0 0 14px;}
.grid{display:flex;gap:16px;}
.card{width:210px;background:#fff;border-radius:12px;overflow:hidden;}
.thumb{height:100px;border-radius:12px 12px 0 0;}
.info{padding:14px 16px 18px;}
.badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:9999px;margin-bottom:8px;}
.pname{font-size:16px;font-weight:600;margin:0 0 4px;}
.pprice{font-size:16px;color:#4f4c4a;}
</style>
<div class="nav">
<div class="logo">Pura</div>
<div class="navlinks"><span>Diffusers</span><span>Fragrances</span><span>Bundles</span><span>Gifts</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Scent, made intelligent.</h1>
<p class="sub">Smart diffusers and artisanal fragrance oils for a calmer, more intentional home.</p>
<div class="cta">Shop Now</div>
</div>
<div class="diffuser"><div class="top"></div><div class="body"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#cfa363,#724d39)"></div><div class="info"><span class="badge" style="background:#708265;color:#fff">New</span><div class="pname">Pura 4 Smart Diffuser</div><div class="pprice">$89</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f1dac8,#724d39)"></div><div class="info"><span class="badge" style="background:#eab308;color:#1d1b1b">Limited</span><div class="pname">Santal Vanille Oil</div><div class="pprice">$24</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a6824f,#1d1b1b)"></div><div class="info"><span class="badge" style="background:#724d39;color:#fff">Best Seller</span><div class="pname">Cozy Cabin Duo</div><div class="pprice">$44</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #1b1e21;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #1b1e21;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1b1e21; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.38; margin: 0; color: #818182; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #336633; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #336633;
border: 1px solid #336633; border-radius: 4px;
padding: 11px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1b1e21;
border: 1px solid #bebfc0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #818182; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #cc0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background:#f5f5f5; color:#444; }
*{box-sizing:border-box;}
.utilbar{height:28px;background:#1b1e21;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.navbar{height:48px;background:#336633;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.logo{color:#fff;font-size:20px;font-weight:700;letter-spacing:-.3px;}
.navlinks{display:flex;gap:16px;color:#fff;font-size:14px;font-weight:500;}
.searchbtn{width:34px;height:34px;background:#fff;border-radius:4px;}
.hero{position:relative;height:220px;background:linear-gradient(120deg,#336633,#286510);display:flex;align-items:center;padding:0 34px;overflow:hidden;}
.hero:before{content:'';position:absolute;right:-30px;top:20px;width:180px;height:180px;border-radius:50%;background:#d39e00;opacity:.18;}
.hero:after{content:'';position:absolute;right:120px;bottom:-60px;width:130px;height:130px;border-radius:50%;background:#ffaacc;opacity:.22;}
.herotext{position:relative;z-index:1;color:#fff;}
.herotext h1{font-size:32px;font-weight:700;margin:0 0 8px;letter-spacing:-.3px;}
.herotext p{font-size:15px;color:#e0ebcc;margin:0 0 14px;max-width:420px;}
.herocta{display:inline-block;background:#fff;color:#336633;font-size:16px;font-weight:600;padding:12px 30px;border-radius:4px;}
.badgeaward{position:absolute;top:16px;right:34px;background:#d39e00;border:1px solid #d39e00;color:#1b1e21;font-size:11px;font-weight:700;padding:4px 10px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;}
.strip{display:flex;gap:12px;padding:16px 24px 8px;}
.tile{flex:1;background:#fff;border:1px solid #eeeeee;border-radius:8px;padding:10px;text-align:center;}
.tileimg{height:60px;border-radius:6px;margin-bottom:8px;}
.tilelabel{font-size:14px;font-weight:600;color:#1b1e21;}
.grid{display:flex;gap:12px;padding:12px 24px 0;}
.card{width:150px;background:#fff;border:1px solid #eeeeee;border-radius:8px;padding:8px;position:relative;}
.thumb{height:100px;border-radius:4px;margin-bottom:6px;position:relative;overflow:hidden;}
.badge{position:absolute;top:5px;left:5px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 7px;border-radius:4px;color:#fff;}
.ptitle{font-size:13px;font-weight:600;color:#1b1e21;line-height:1.3;height:32px;overflow:hidden;}
.pprice{font-size:15px;font-weight:700;color:#336633;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#1b1e21;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:13px;color:#c9c9c9;}
.footer span{margin-left:14px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="utilbar"><span>Since 1872 · Award-Winning Roses</span><span>Track Order · Zone Finder · Help</span></div>
<div class="navbar">
<div class="logo">Jackson And Perkins</div>
<div class="navlinks"><div>Roses</div><div>Perennials</div><div>Shrubs & Trees</div><div>Gift Collections</div><div>Care Guides</div></div>
<div class="searchbtn"></div>
</div>
<div class="hero">
<div class="badgeaward">AARS Award Winner</div>
<div class="herotext">
<h1>Grow Something Worth Waiting For</h1>
<p>Hybrid tea roses, hardy perennials, and gift-ready collections shipped bare-root to your door.</p>
<div class="herocta">Shop Spring Roses</div>
</div>
</div>
<div class="strip">
<div class="tile"><div class="tileimg" style="background:linear-gradient(135deg,#cc0000,#286510)"></div><div class="tilelabel">Hybrid Teas</div></div>
<div class="tile"><div class="tileimg" style="background:linear-gradient(135deg,#508632,#e0ebcc)"></div><div class="tilelabel">Perennials</div></div>
<div class="tile"><div class="tileimg" style="background:linear-gradient(135deg,#ffaacc,#336633)"></div><div class="tilelabel">Gift Gardens</div></div>
<div class="tile"><div class="tileimg" style="background:linear-gradient(135deg,#3b7528,#1b1e21)"></div><div class="tilelabel">Shrubs & Trees</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#cc0000,#336633)"><span class="badge" style="background:#cc0000;">Sale</span></div><div class="ptitle">Midnight Blush Hybrid Tea Rose</div><div class="pprice">$34.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d39e00,#508632)"><span class="badge" style="background:#d39e00;">Award</span></div><div class="ptitle">Golden Celebration Climbing Rose</div><div class="pprice">$42.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#48822e,#286510)"></div><div class="ptitle">Sunset Coral Grandiflora — 3 Gal.</div><div class="pprice">$29.50</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffaacc,#508632)"><span class="badge" style="background:#ffaacc;color:#1b1e21;">Limited</span></div><div class="ptitle">Valentine Rose Gift Set</div><div class="pprice">$54.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#336633,#1b1e21)"></div><div class="ptitle">Everblooming Lavender Border Set</div><div class="pprice">$38.00</div></div>
</div>
<div class="footer"><span>© Since 1872</span><span>Hardiness Zones<span> Shipping</span><span> Contact</span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f7f3; color: #202020;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f7f3; color: #202020;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.35px; margin: 0; color: #202020; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #646464; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.0; background: #ea2804; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.0; background: #ffffff; color: #202020;
border: 1px solid #ea2804; border-radius: 9999px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #202020;
border: 1px solid #c3c1be; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #646464; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.33; background: #2b9a66; color: #fcfcfc;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9f7f3; color:#202020; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid rgba(32,32,32,.12); }
.brand { font-weight:700; font-size:16px; letter-spacing:-.5px; }
.navlinks { display:flex; gap:24px; font-size:13.5px; color:#3a3a3a; font-weight:600; }
.gh { background:#24292e; color:#fff; border:none; border-radius:999px; padding:8px 16px; font-size:13px; font-weight:600; }
.hero { position:relative; background:radial-gradient(ellipse 900px 400px at 20% -20%, #ea2804 0%, #ff6a3d 45%, #f4a8a0 70%, #f9f7f3 100%);
padding:46px 32px 34px; color:#fff; overflow:hidden; }
.hero h1 { font-size:64px; font-weight:700; line-height:.92; letter-spacing:-2px; margin:0 0 12px; max-width:640px; }
.hero p { font-size:15px; margin:0 0 18px; max-width:420px; opacity:.92; }
.heroctas { display:flex; gap:10px; }
.btn-w { background:#fff; color:#ea2804; border:none; border-radius:999px; padding:11px 22px; font-size:14px; font-weight:600; }
.btn-d { background:#202020; color:#fff; border:none; border-radius:999px; padding:11px 22px; font-size:14px; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:22px 32px 8px; }
.mcard { background:#fff; border-radius:10px; padding:12px; }
.mthumb { height:64px; border-radius:8px; margin-bottom:8px; }
.mthumb.t1 { background:linear-gradient(135deg,#ffb199,#ea2804); }
.mthumb.t2 { background:linear-gradient(135deg,#c9c7d2,#7d6f9a); }
.mthumb.t3 { background:linear-gradient(135deg,#ffd8a8,#ff6a3d); }
.mthumb.t4 { background:linear-gradient(135deg,#a8d8c9,#2b9a66); }
.mname { font-size:12.5px; font-weight:600; }
.mowner { font-size:11px; color:#8d8d8d; margin-bottom:4px; }
.mtag { display:inline-block; background:#2b9a66; color:#fff; font-size:9.5px; font-weight:600; border-radius:999px; padding:2px 8px; margin-top:6px; }
.codewrap { margin:16px 32px 20px; background:#202020; border-radius:10px; padding:18px; }
.codetabs { display:flex; gap:6px; margin-bottom:10px; }
.ctab { background:#000; color:rgba(252,252,252,.72); font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
font-size:10px; padding:4px 10px; border-radius:4px; }
.ctab.active { color:#fcfcfc; border-bottom:2px solid #ea2804; }
pre { color:#fcfcfc; font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:12px; line-height:1.5; margin:0; }
.tok-fn { color:#ff9b6a; } .tok-str { color:#c2e8c2; }
footer { display:flex; justify-content:space-between; padding:12px 32px; font-size:11px; color:#646464;
border-top:1px solid rgba(32,32,32,.12); }
</style></head>
<body>
<nav>
<div class="brand">Replicate</div>
<div class="navlinks"><span>Explore</span><span>Pricing</span><span>Docs</span><span>Blog</span></div>
<button class="gh">Sign in with GitHub</button>
</nav>
<section class="hero">
<h1>Run AI with<br>an API</h1>
<p>Get an API for a model without having to think about GPUs, or scaling.</p>
<div class="heroctas">
<button class="btn-w">Explore models</button>
<button class="btn-d">Try a model</button>
</div>
</section>
<div class="grid">
<div class="mcard"><div class="mthumb t1"></div><div class="mowner">stability-ai /</div><div class="mname">sdxl</div><span class="mtag">running</span></div>
<div class="mcard"><div class="mthumb t2"></div><div class="mowner">meta /</div><div class="mname">llama-3</div><span class="mtag">running</span></div>
<div class="mcard"><div class="mthumb t3"></div><div class="mowner">black-forest /</div><div class="mname">flux-schnell</div><span class="mtag">running</span></div>
<div class="mcard"><div class="mthumb t4"></div><div class="mowner">openai /</div><div class="mname">whisper</div><span class="mtag">running</span></div>
</div>
<div class="codewrap">
<div class="codetabs"><span class="ctab active">Python</span><span class="ctab">Node.js</span><span class="ctab">cURL</span></div>
<pre><span class="tok-fn">import</span> replicate
output = replicate.run(
<span class="tok-str">"stability-ai/sdxl"</span>,
input={ <span class="tok-str">"prompt"</span>: <span class="tok-str">"an astronaut riding a horse"</span> }
)</pre>
</div>
<footer>
<span>© Replicate</span>
<span>Replicate · Pricing · Docs · Status</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.25px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #0a2d6e; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #ffffff; color: #0a2d6e;
border: 1px solid #0a2d6e; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #dde2eb; color: #0a2d6e;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; background:#fafaf7; color:#333333; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:60px;background:#0a2d6e;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:Georgia,'Times New Roman',serif;font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#cfd8ea;}
.hero{height:190px;display:flex;background:#fff;border-bottom:1px solid #dddddd;}
.herotxt{width:48%;padding:22px 32px;display:flex;flex-direction:column;justify-content:center;}
.herotxt .k{font-family:Georgia,serif;font-size:12px;font-weight:700;color:#c8102e;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:8px;}
.herotxt h1{font-family:Georgia,'Times New Roman',serif;font-size:24px;font-weight:700;margin:0 0 8px;}
.herotxt p{font-size:13px;color:#666;margin:0 0 14px;max-width:280px;}
.cta{width:fit-content;font-size:13px;font-weight:600;background:#0a2d6e;color:#fff;padding:11px 22px;border-radius:2px;}
.stamps{width:52%;display:flex;align-items:center;justify-content:center;gap:14px;background:#f3f3ef;}
.stamp{width:80px;height:100px;border:6px dashed #fff;box-shadow:0 4px 10px rgba(0,0,0,0.15);}
.sec{padding:16px 32px 0;}
.sec h2{font-family:Georgia,serif;font-size:16px;font-weight:700;margin:0 0 12px;}
.grid{display:flex;gap:14px;}
.card{width:210px;background:#fff;border:1px solid #dddddd;padding:10px;position:relative;}
.cimg{height:90px;background:#f3f3ef;margin-bottom:8px;border:4px dashed #fff;box-sizing:border-box;}
.grade{position:absolute;top:16px;left:16px;font-size:9px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:2px 6px;background:#e6f4ea;color:#1a6b2f;}
.ctitle{font-size:13px;font-weight:600;}
.cnum{font-family:'Courier New',monospace;font-size:11px;color:#666;margin-top:2px;}
.cprice{font-family:Georgia,serif;font-size:16px;font-weight:700;color:#0a2d6e;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#0a2d6e;color:#cfd8ea;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mystic Stamp Company</div>
<div class="navlinks"><div>US Stamps</div><div>Worldwide</div><div>Supplies</div><div>Grading Guide</div></div>
</div>
<div class="hero">
<div class="herotxt">
<div class="k">First Day Covers</div>
<h1>Trusted by collectors<br>since 1923</h1>
<p>Graded, provenance-verified stamps from Golden Age to modern issues.</p>
<div class="cta">Browse Catalog</div>
</div>
<div class="stamps"><div class="stamp" style="background:linear-gradient(160deg,#0a2d6e,#c8102e)"></div><div class="stamp" style="background:linear-gradient(160deg,#1a6b2f,#0a2d6e)"></div></div>
</div>
<div class="sec">
<h2>Featured Lots</h2>
<div class="grid">
<div class="card"><div class="grade">Mint NH</div><div class="cimg" style="background:linear-gradient(135deg,#0a2d6e,#c8102e)"></div><div class="ctitle">1918 Inverted Jenny Reprint</div><div class="cnum">Scott #C3a</div><div class="cprice">$1,250.00</div></div>
<div class="card"><div class="grade" style="background:#e8eeff;color:#003399;">Fine-VF</div><div class="cimg" style="background:linear-gradient(135deg,#666,#0a2d6e)"></div><div class="ctitle">1901 Pan-American Expo</div><div class="cnum">Scott #294</div><div class="cprice">$85.00</div></div>
<div class="card"><div class="grade" style="background:#fdf6e0;color:#5a4a00;">Used</div><div class="cimg" style="background:linear-gradient(135deg,#999,#333)"></div><div class="ctitle">1932 Washington Bicentennial</div><div class="cnum">Scott #704</div><div class="cprice">$6.50</div></div>
</div>
</div>
<div class="footer"><span>© American Philately</span><span>Grading Guide Club Membership</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffc00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffc00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7b09; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0096e5; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fffc00; color: #0096e5;
border: 1px solid #0096e5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fffc00; color: #111111;
border: 1px solid #d9d603; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7b09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6ec25; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121314; color:#ffffff; box-sizing:border-box;
font-family:"Avenir Next", Helvetica, Tahoma, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:19px; font-weight:700; letter-spacing:-0.2px; }
.brand span { color:#FFFC00; }
.navlinks { display:flex; gap:26px; font-size:15px; font-weight:500; color:#C7C7CC; }
.cta { background:#FFFC00; color:#000000; border-radius:64px; padding:11px 26px; font-size:14px; font-weight:500; }
.hero { text-align:center; padding:44px 40px 30px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.hero h1 { font-size:42px; font-weight:400; line-height:1.08; margin:0; max-width:640px; }
.hero h1 b { display:block; color:#FFFC00; font-weight:700; }
.hero p { font-size:16px; color:#C7C7CC; margin:0; max-width:460px; font-weight:500; }
.hero .row { display:flex; gap:12px; margin-top:6px; }
.btn-y { background:#FFFC00; color:#000; border-radius:64px; padding:11px 28px; font-size:16px; font-weight:500; }
.btn-d { background:#000000; color:#fff; border-radius:64px; padding:11px 28px; font-size:16px; font-weight:500; }
.strip { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:10px 40px 30px; }
.card { background:#3A3E41; border-radius:8px; padding:18px; display:flex; flex-direction:column; gap:8px; }
.card .ghost { width:34px; height:34px; border-radius:50%; background:#FFFC00; position:relative; }
.card .ghost::after { content:''; position:absolute; inset:8px; background:#3A3E41; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; }
.card h3 { font-size:15px; font-weight:700; margin:0; color:#fff; }
.card p { font-size:12.5px; color:#C7C7CC; margin:0; line-height:1.4; }
footer { display:flex; justify-content:center; align-items:center; gap:34px; padding:14px 0;
border-top:1px solid rgba(255,255,255,0.08); }
.avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#FFFC00,#3A3E41); }
</style></head>
<body>
<nav>
<p class="brand"><span>●</span> Snapchat</p>
<div class="navlinks"><span>Why Snapchat?</span><span>Goals</span><span>Products</span><span>Resources</span></div>
<span class="cta">Get Started</span>
</nav>
<section class="hero">
<h1>Talk to your friends.<b>Speak with Snap.</b></h1>
<p>Chat, snap, and video call — camera-first communication built for how you actually talk.</p>
<div class="row">
<span class="btn-y">Get Started</span>
<span class="btn-d">See Success Stories</span>
</div>
</section>
<section class="strip">
<div class="card"><div class="ghost"></div><h3>Stories</h3><p>Share moments that disappear — ephemeral by design, honest by default.</p></div>
<div class="card"><div class="ghost"></div><h3>Spotlight</h3><p>Discover creators and trends before they hit anywhere else.</p></div>
<div class="card"><div class="ghost"></div><h3>Lenses</h3><p>Playful AR that turns a plain photo into something worth sending.</p></div>
</section>
<footer>
<div class="avatar"></div><div class="avatar"></div><div class="avatar"></div>
<span style="font-size:13px;color:#C7C7CC;">Friends over followers — built for close relationships</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d2124;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d2124;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1d2124; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #545b62; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #0062cc; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #1d2124;
border: 1px solid #dae0e5; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1d2124;
border: 1px solid #dae0e5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #545b62; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #0062cc; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#383d41; }
*{box-sizing:border-box;}
.nav{height:60px;background:#ffffff;border-bottom:1px solid #dae0e5;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-size:18px;font-weight:700;color:#1d2124;letter-spacing:-.2px;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#1d2124;}
.cart{font-size:13px;font-weight:600;color:#0062cc;}
.hero{height:210px;display:flex;background:#ececf6;}
.heroText{width:48%;padding:26px 36px;display:flex;flex-direction:column;justify-content:center;}
.heroText h1{font-size:26px;font-weight:700;color:#1d2124;line-height:1.25;margin:0 0 8px;letter-spacing:-.25px;}
.heroText p{font-size:14px;color:#545b62;margin:0 0 14px;max-width:300px;}
.btn{display:inline-block;background:#0062cc;color:#fff;font-size:14px;font-weight:600;padding:11px 22px;border-radius:4px;width:fit-content;}
.heroImg{width:52%;position:relative;background:#dae0e5;}
.pot{position:absolute;left:120px;top:34px;width:130px;height:120px;border-radius:4px 4px 20px 20px;background:linear-gradient(160deg,#c8cbcf,#818182);box-shadow:0 6px 14px rgba(0,0,0,.15);}
.lid{position:absolute;left:112px;top:20px;width:146px;height:22px;border-radius:4px;background:linear-gradient(90deg,#d39e00,#ffe8a1);}
.steam{position:absolute;left:180px;top:2px;width:6px;height:18px;background:#ffffff;opacity:.7;border-radius:4px;}
.spectable{display:flex;gap:1px;background:#dae0e5;margin:16px 36px 0;}
.speccell{flex:1;background:#f7f7fb;text-align:center;padding:9px;}
.speclabel{font-size:11px;font-weight:600;letter-spacing:.2px;text-transform:uppercase;color:#545b62;}
.specvalue{font-size:14px;font-weight:600;color:#1d2124;margin-top:3px;}
.sectitle{font-size:15px;font-weight:700;color:#1d2124;padding:16px 36px 8px;}
.grid{display:flex;gap:12px;padding:0 36px;}
.card{width:150px;border:1px solid #d6d8db;border-radius:4px;padding:8px;position:relative;}
.thumb{height:88px;border-radius:4px;margin-bottom:6px;}
.badge{position:absolute;top:16px;left:16px;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;color:#1d2124;}
.badge.new{background:#0062cc;color:#fff;}
.badge.sale{background:#d39e00;}
.ptitle{font-size:12px;font-weight:600;color:#1d2124;line-height:1.3;height:30px;overflow:hidden;}
.pprice{font-size:13px;font-weight:700;color:#1d2124;margin-top:4px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Zojirushi</div>
<div class="navlinks"><span>Rice Cookers</span><span>Water Boilers</span><span>Thermal</span><span>Bread</span><span>Kitchen</span></div>
<div class="cart">CART (0)</div>
</div>
<div class="hero">
<div class="heroText">
<h1>Engineered for the<br>perfect seal.</h1>
<p>Vacuum insulation and Neuro Fuzzy precision, built to hold temperature exactly as long as you need it to.</p>
<div class="btn">Shop Rice Cookers</div>
</div>
<div class="heroImg"><div class="pot"></div><div class="lid"></div><div class="steam"></div></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Capacity</div><div class="specvalue">5.5 Cups</div></div>
<div class="speccell"><div class="speclabel">Keep Warm</div><div class="specvalue">12 Hrs</div></div>
<div class="speccell"><div class="speclabel">Wattage</div><div class="specvalue">1170 W</div></div>
<div class="speccell"><div class="speclabel">Weight</div><div class="specvalue">10.5 lb</div></div>
</div>
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="badge new">New</div><div class="thumb" style="background:linear-gradient(135deg,#c8cbcf,#545b62)"></div><div class="ptitle">Neuro Fuzzy Rice Cooker</div><div class="pprice">$219.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#818182,#c8cbcf)"></div><div class="ptitle">Stainless Vacuum Bottle</div><div class="pprice">$39.00</div></div>
<div class="card"><div class="badge sale">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#545b62,#818182)"></div><div class="ptitle">Micom Water Boiler</div><div class="pprice">$149.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c8cbcf,#818182)"></div><div class="ptitle">Home Bakery Bread Maker</div><div class="pprice">$259.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfaf7; color: #0f0f0f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfaf7; color: #0f0f0f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.33; margin: 0; color: #0f0f0f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #575757; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #d2815f; color: #fcfaf7;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #fcfaf7; color: #0f0f0f;
border: 1px solid #d2815f; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fcfaf7; color: #0f0f0f;
border: 1px solid #c1bfbd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #575757; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #0f0f0f; color: #fcfaf7;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#fcfaf7; color:#0f0f0f; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e7e7e7;}
.logo{font-size:19px;font-weight:500;}
.icons{display:flex;gap:16px;}
.ic{width:22px;height:22px;border-radius:50%;background:#f3ece7;}
.hero{height:220px;background:#f3ece7;display:flex;align-items:center;padding:0 36px;}
.herotxt{width:46%;}
.herotxt h1{font-size:30px;font-weight:400;margin:0 0 10px;line-height:1.25;}
.herotxt p{font-size:14px;color:#4e4e50;margin:0 0 18px;max-width:280px;}
.cta{width:fit-content;font-size:13px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;background:#d2815f;color:#fcfaf7;padding:12px 26px;border-radius:8px;}
.toys{width:54%;display:flex;justify-content:center;gap:18px;}
.toy{border-radius:50%;}
.t1{width:80px;height:80px;background:radial-gradient(circle at 35% 30%,#f3ece7,#d2815f);align-self:flex-end;}
.t2{width:110px;height:110px;background:radial-gradient(circle at 35% 30%,#fff,#c35121);}
.t3{width:64px;height:64px;background:radial-gradient(circle at 35% 30%,#fff,#748cab);align-self:flex-end;}
.sec{padding:22px 36px 0;}
.sec h2{font-size:18px;font-weight:500;margin:0 0 14px;}
.grid{display:flex;gap:16px;}
.card{width:196px;background:#fcfaf7;border-radius:12px;position:relative;}
.cimg{height:120px;border-radius:12px 12px 0 0;background:#f8f0e7;position:relative;overflow:hidden;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;color:#fcfaf7;padding:2px 8px;border-radius:4px;}
.ctitle{font-size:14px;font-weight:500;padding:8px 12px 0;}
.cprice{font-size:14px;color:#4e4e50;padding:2px 12px 12px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#0f0f0f;color:#fcfaf7;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:11px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mushie</div>
<div class="icons"><div class="ic"></div><div class="ic"></div></div>
</div>
<div class="hero">
<div class="herotxt">
<h1>Softly designed<br>for small hands</h1>
<p>Silicone teethers and pacifiers in earthy, muted tones — made in Sweden.</p>
<div class="cta">Shop Newborn</div>
</div>
<div class="toys"><div class="toy t1"></div><div class="toy t2"></div><div class="toy t3"></div></div>
</div>
<div class="sec">
<h2>Best Sellers</h2>
<div class="grid">
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#f3ece7,#d2815f)"><div class="badge" style="background:#eecba5;color:#0f0f0f;">New</div></div><div class="ctitle">Pacifier Clip, Clay</div><div class="cprice">$16</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#f8f0e7,#c35121)"></div><div class="ctitle">Silicone Teether Ring</div><div class="cprice">$14</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#e4d8ce,#748cab)"><div class="badge" style="background:#ff2a00;">Sale</div></div><div class="ctitle">Textured Rattle</div><div class="cprice">$18</div></div>
</div>
</div>
<div class="footer"><span>Free shipping over $45</span><span>Returns Contact</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #e53624; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #f9f9f9; color: #e53624;
border: 1px solid #e53624; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #333333;
border: 1px solid #c1c1c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffdf66; color: #1a1a1a;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#f9f9f9; color:#333333; box-sizing:border-box; font-family:'Lora',Georgia,serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-family:'Roboto',sans-serif; font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; color:#1a1a1a; margin:0; }
.navlinks { display:flex; gap:20px; font-family:'Roboto',sans-serif; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; color:#1a1a1a; }
.navlinks span.active { color:#e53624; }
.search-pill { background:#fff; border-radius:999px; padding:10px 20px; font-family:'Roboto',sans-serif; font-size:12px; color:#666666; }
.cat-strip { display:flex; gap:10px; padding:0 32px 12px; }
.cat-pill { background:#efefef; border-radius:999px; padding:8px 18px; font-family:'Roboto',sans-serif; font-size:12px; font-weight:600; color:#333333; }
.cat-pill.active { background:#e53624; color:#fff; }
.main { display:flex; gap:20px; padding:8px 32px; height:344px; }
.gallery { width:360px; background:#f9eae7; border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative; }
.book { width:150px; height:190px; background:linear-gradient(160deg,#98d108,#33cccc); border-radius:8px; box-shadow:8px 8px 0 rgba(0,0,0,0.06); }
.badge-award { position:absolute; top:16px; left:16px; background:#ffdf66; color:#1a1a1a; font-family:'Roboto',sans-serif; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:4px 8px; border-radius:8px; }
.age-badge { position:absolute; bottom:16px; right:16px; background:#785ba7; color:#fff; font-family:'Roboto',sans-serif; font-size:11px; font-weight:700; text-transform:uppercase; padding:4px 12px; border-radius:999px; }
.info { flex:1; display:flex; flex-direction:column; gap:6px; }
.info h1 { font-size:24px; font-weight:700; margin:0; }
.author { font-family:'Roboto',sans-serif; font-size:13px; color:#666666; }
.stars { color:#ff9635; font-family:'Roboto',sans-serif; font-size:13px; }
.price { font-family:'Roboto',sans-serif; font-size:18px; font-weight:700; color:#e53624; text-transform:uppercase; margin-top:2px; }
.desc { font-size:14px; line-height:1.55; color:#333333; max-width:420px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#e53624; color:#fff; border:none; border-radius:999px; font-family:'Roboto',sans-serif; font-weight:600; font-size:15px; }
.btn-secondary { flex:1; height:48px; background:#f9f9f9; color:#e53624; border:2px solid #e53624; border-radius:999px; font-family:'Roboto',sans-serif; font-weight:600; font-size:15px; }
footer { position:absolute; bottom:0; left:0; right:0; background:#003399; color:#ffffff; padding:14px 32px; display:flex; justify-content:space-between; font-family:'Roboto',sans-serif; font-size:12px; }
footer span { opacity:0.9; }
</style></head>
<body>
<nav>
<p class="brand">Barefoot Books</p>
<div class="navlinks"><span class="active">Books</span><span>Gifts</span><span>About</span><span>Blog</span></div>
<div class="search-pill">🔍 Search stories</div>
</nav>
<div class="cat-strip">
<span class="cat-pill active">Adventure</span>
<span class="cat-pill">Folktales</span>
<span class="cat-pill">Nature</span>
<span class="cat-pill">Bedtime</span>
</div>
<div class="main">
<div class="gallery">
<span class="badge-award">Staff Pick</span>
<div class="book"></div>
<span class="age-badge">3-7 Years</span>
</div>
<div class="info">
<h1>The Lantern of the World</h1>
<span class="author">Written by Maya Torres · Illustrated by Ben Okafor</span>
<div class="stars">★★★★★</div>
<span class="price">$16.99</span>
<p class="desc">A story-time favorite that follows a curious fox around the globe, meeting the animals and traditions of six continents along the way — with a fold-out map inside the cover.</p>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">View Details</button>
</div>
</div>
</div>
<footer>
<span>© Barefoot Books</span>
<span>Barefoot Books · About Us · Customer Service · Connect</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #282a2c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #282a2c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.32; margin: 0; color: #282a2c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #7a6c60; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.25px; background: #154775; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.25px; background: #ffffff; color: #154775;
border: 1px solid #154775; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #282a2c;
border: 1px solid #c9caca; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a6c60; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #be1414; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f7; font-family:'Nunito Sans',Arial,sans-serif; color:#282a2c; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#154775;}
.logo{font-size:19px;font-weight:800;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#7a9cba;}
.cta{background:#fff;color:#154775;font-size:12px;font-weight:800;padding:9px 18px;border-radius:8px;}
.hero{height:250px;display:flex;background:#f3f3f3;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 34px;}
.herotext h1{font-size:34px;font-weight:800;margin:0 0 12px;line-height:1.2;color:#282a2c;}
.herotext p{font-size:14px;font-weight:400;line-height:1.6;color:#4a4e52;margin:0 0 16px;max-width:290px;}
.btn{display:inline-block;background:#154775;color:#fff;font-size:13px;font-weight:800;padding:12px 24px;border-radius:8px;width:fit-content;}
.heroimg{width:54%;position:relative;overflow:hidden;background:linear-gradient(160deg,#7a9cba,#154775 70%);}
.arm{position:absolute;bottom:40px;left:130px;width:8px;height:130px;background:#282a2c;border-radius:4px;}
.armjoint{position:absolute;bottom:160px;left:110px;width:44px;height:44px;border-radius:50%;background:#964b00;}
.monitor{position:absolute;bottom:180px;left:170px;width:140px;height:90px;border-radius:6px;background:#774d3b;}
.sec{padding:20px 34px 0;}
.sectitle{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#4a4e52;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border-radius:8px;padding:10px;}
.thumb{height:96px;border-radius:8px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:800;}
.pprice{font-size:13px;font-weight:800;color:#154775;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Mount IT</div>
<div class="navlinks"><span>Monitor Arms</span><span>Desks</span><span>Carts</span><span>TV Mounts</span></div>
<div class="cta">Shop Deals</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Built to hold your setup steady, every day.</h1>
<p>Precision-machined aluminum arms and mounts for the desk you actually use.</p>
<div class="btn">Shop Monitor Arms</div>
</div>
<div class="heroimg"><div class="monitor"></div><div class="armjoint"></div><div class="arm"></div></div>
</div>
<div class="sec">
<div class="sectitle">Top Rated Gear</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#154775,#964b00)"></div><div class="pname">Dual Monitor Arm</div><div class="pprice">$79.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#774d3b,#7a9cba)"></div><div class="pname">Standing Desk Converter</div><div class="pprice">$149.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7a6c60,#154775)"></div><div class="pname">Rolling Laptop Cart</div><div class="pprice">$89.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#282a2c,#964b00)"></div><div class="pname">Full Motion TV Mount</div><div class="pprice">$59.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #444444;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #444444;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #4d4d4d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #044573; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #044573;
border: 1px solid #044573; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #d0d0d0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4d4d4d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #baf0c6; color: #444444;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#444444; box-sizing:border-box;
font-family:'Zilla Slab', 'Noto Sans', -apple-system, sans-serif; }
* { box-sizing:border-box; }
.head { font-family:'Poppins', 'Montserrat', sans-serif; }
nav { height:64px; background:#044573; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { color:#fff; font-size:19px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:500; color:#fff; }
.search { width:220px; height:36px; background:#f5f5f5; border-radius:9999px; font-size:12px; color:#4d4d4d; display:flex; align-items:center; padding-left:16px; }
.hero { background:#f5f5f5; padding:30px 40px; display:flex; align-items:center; gap:32px; }
.hero-copy { flex:1.2; }
.hero h1 { font-family:'Poppins'; font-size:32px; font-weight:700; line-height:1.2; letter-spacing:-0.4px; margin:0 0 10px; max-width:440px; }
.hero p { font-size:15px; color:#313131; margin:0 0 16px; max-width:400px; line-height:1.5; }
.btn-primary { background:#044573; color:#fff; border:none; border-radius:8px; padding:12px 24px; font-family:'Poppins';
font-size:14px; font-weight:600; letter-spacing:0.5px; height:44px; }
.hero-visual { flex:1; height:160px; border-radius:8px; background:#fff; position:relative; overflow:hidden; border:1px solid #eee; }
.hero-visual .book { position:absolute; width:52px; height:76px; border-radius:2px; bottom:14px; }
.b1 { background:#044573; left:60px; transform:rotate(-4deg); }
.b2 { background:#baf0c6; left:120px; transform:rotate(3deg); }
.b3 { background:#f11e28; left:180px; transform:rotate(-2deg); }
.section { padding:20px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-family:'Poppins'; font-size:20px; font-weight:600; margin:0; }
.sec-head span { font-size:13px; color:#044573; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { background:#fff; border-radius:8px; padding:12px; }
.thumb { aspect-ratio:2/3; border-radius:4px; position:relative; margin-bottom:8px; }
.t1 { background:linear-gradient(150deg,#044573,#02335a); }
.t2 { background:linear-gradient(150deg,#baf0c6,#7fd89a); }
.t3 { background:linear-gradient(150deg,#f11e28,#a5141c); }
.t4 { background:linear-gradient(150deg,#8baac4,#5a7e9c); }
.badge { position:absolute; top:6px; left:6px; font-size:10px; font-weight:600; padding:2px 8px; border-radius:4px; }
.badge.green { background:#baf0c6; color:#444; }
.badge.red { background:#f11e28; color:#fff; }
.card h3 { font-family:'Poppins'; font-size:13px; font-weight:600; margin:0 0 2px; }
.author { font-size:12px; color:#4d4d4d; margin:0 0 6px; }
.price { font-family:'Poppins'; font-size:15px; font-weight:600; margin:0; }
.orig { font-size:11px; color:#aaaaaa; text-decoration:line-through; margin-left:4px; font-weight:400; }
footer { background:#044573; color:#dbe7f0; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#dbe7f0; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand head">Better World Books</p>
<div class="navlinks"><span>Textbooks</span><span>Fiction</span><span>Nonfiction</span><span>Our Mission</span></div>
<div class="search">Search books, authors, ISBN…</div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Every book bought funds literacy</h1>
<p>Millions of used books, carbon-balanced shipping, and a growing global library fund.</p>
<button class="btn-primary">Shop Now</button>
</div>
<div class="hero-visual"><div class="book b1"></div><div class="book b2"></div><div class="book b3"></div></div>
</section>
<section class="section">
<div class="sec-head"><h2 class="head">Staff Picks</h2><span>Browse All</span></div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="badge green">Eco Ship</span></div><h3>The Overstory</h3><p class="author">Richard Powers</p><p class="price">$6.99</p></div>
<div class="card"><div class="thumb t2"></div><h3>Educated</h3><p class="author">Tara Westover</p><p class="price">$7.49</p></div>
<div class="card"><div class="thumb t3"><span class="badge red">Sale</span></div><h3>Sapiens</h3><p class="author">Yuval Noah Harari</p><p class="price">$5.99<span class="orig">$9.99</span></p></div>
<div class="card"><div class="thumb t4"></div><h3>Circe</h3><p class="author">Madeline Miller</p><p class="price">$6.49</p></div>
</div>
</section>
<footer>
<span>© Better World Books</span>
<div><a href="#">Sell Books</a><a href="#">Donate</a><a href="#">Our Impact</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f5; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f5; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7e736d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #bc7b02; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #f8f8f5; color: #1a1a1a;
border: 1px solid #bc7b02; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f8f5; color: #1a1a1a;
border: 1px solid #c0c0be; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7e736d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #bc7b02; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f8f5; font-family:'GT Eesti Light',-apple-system,sans-serif; color:#111111; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #f2f1ec;}
.logo{font-family:Georgia,serif;font-size:22px;font-weight:700;color:#1a1a1a;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#1a1a1a;}
.cart{width:38px;height:38px;border-radius:8px;background:#f2f1ec;display:flex;align-items:center;justify-content:center;font-size:12px;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;gap:30px;}
.herotext{width:48%;}
.herotext h1{font-family:Georgia,serif;font-size:36px;font-weight:700;color:#1a1a1a;margin:0 0 14px;line-height:1.15;}
.herotext p{font-size:14px;color:#111111;margin:0 0 20px;max-width:300px;}
.herocta{display:inline-block;background:#bc7b02;color:#fff;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;border-radius:8px;padding:14px 30px;margin-right:10px;}
.herocta2{display:inline-block;background:transparent;color:#1a1a1a;border:1px solid #1a1a1a;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;border-radius:8px;padding:13px 28px;}
.heroimg{width:44%;height:180px;border-radius:12px;background:linear-gradient(135deg,#e8e5dc,#7e736d 75%);}
.grid{display:flex;gap:16px;padding:20px 40px 0;}
.card{width:200px;background:#fff;border-radius:12px;overflow:hidden;}
.thumb{height:114px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#bc7b02;color:#fff;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;padding:3px 8px;}
.body{padding:12px 14px 14px;}
.ptitle{font-size:16px;font-weight:500;color:#1a1a1a;margin-bottom:4px;}
.pprice{font-size:14px;color:#111111;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#1a1a1a;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.footer span{color:#aaaaaa;font-size:11px;text-transform:uppercase;letter-spacing:.5px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Soft Services</div>
<div class="navlinks"><span>Body Wash</span><span>Serums</span><span>Sets</span><span>The Science</span></div>
<div class="cart">◍</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Clinical results, sensory ritual.</h1>
<p>Body care formulated with dermatologist-grade actives, wrapped in a warmer sensory hand.</p>
<div class="herocta">Shop Now</div><div class="herocta2">Learn More</div>
</div>
<div class="heroimg"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#bc7b02,#7e736d)"><span class="badge">New</span></div><div class="body"><div class="ptitle">Body Serum 15%</div><div class="pprice">$48</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7e736d,#f2f1ec)"></div><div class="body"><div class="ptitle">Exfoliating Wash</div><div class="pprice">$32</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e8e5dc,#bc7b02)"></div><div class="body"><div class="ptitle">Ritual Duo Set</div><div class="pprice">$76</div></div></div>
</div>
<div class="footer"><span>© Soft Services</span><span>Ingredients · Results</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e1116; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e1116; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8e91; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #161b22; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e1116; color: #ffffff;
border: 1px solid #161b22; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0e1116; color: #f5f5f5;
border: 1px solid #33353a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8e91; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0f1318; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0E1116; color:#F2F4F8; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-variant-numeric:tabular-nums; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#0E1116; padding:22px 16px; position:relative; }
.rtitle { font-size:20px; font-weight:700; }
.metricrow { display:flex; gap:22px; margin:10px 0 14px; }
.metricrow .m .lbl { font-size:10px; color:#9BA3B0; }
.metricrow .m .val { font-size:15px; font-weight:700; }
.metricrow .m.dur .val { color:#1E6FFF; }
.restpill { height:40px; border-radius:12px; background:#14233F; border:1px solid rgba(30,111,255,0.35);
display:flex; align-items:center; padding:0 12px; gap:10px; margin-bottom:14px; }
.rring { width:20px; height:20px; border-radius:50%; background:conic-gradient(#1E6FFF 0 60%, rgba(30,111,255,0.3) 60% 100%); }
.resttxt { font-size:13px; font-weight:600; color:#1E6FFF; flex:1; }
.skiptxt { font-size:12px; color:#9BA3B0; }
.excard { background:#161B22; border:1px solid #262C36; border-radius:16px; padding:12px; margin-bottom:10px; }
.exhead { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.exthumb { width:28px; height:28px; border-radius:6px; background:#283040; }
.exname { color:#1E6FFF; font-weight:700; font-size:15px; }
.setrow { display:grid; grid-template-columns:26px 1fr 44px 44px 22px; align-items:center; gap:6px; font-size:12px; padding:5px 0; }
.idx { background:#1F2630; border-radius:6px; text-align:center; color:#9BA3B0; font-weight:700; padding:2px 0; }
.prev { color:#5E6675; }
.cell { background:#1F2630; border-radius:6px; text-align:center; padding:4px 0; font-weight:600; }
.chk { width:20px; height:20px; border-radius:5px; border:1.5px solid #262C36; }
.chk.done { background:#2FBF71; border-color:#2FBF71; color:#fff; text-align:center; font-size:12px; line-height:20px; }
.setrow.done { background:rgba(47,191,113,0.09); border-radius:8px; }
.prbadge { display:inline-block; background:rgba(245,184,61,0.18); color:#F5B83D; font-size:9px; font-weight:800;
text-transform:uppercase; padding:3px 8px; border-radius:6px; margin-top:6px; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:60px; background:rgba(14,17,22,0.94);
border-top:0.5px solid #262C36; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:#5E6675; text-align:center; }
.tab.on { color:#1E6FFF; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:800; letter-spacing:-0.5px; margin:0; }
.brand span { color:#1E6FFF; }
.tag { font-size:14px; color:#9BA3B0; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:8px; border:1px solid #262C36; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#9BA3B0; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:800; }
.typeblock .t2 { font-size:13px; color:#9BA3B0; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:10px;
background:#161B22; border:1px solid #262C36; color:#9BA3B0; }
.footer { margin-top:auto; border-top:1px solid #262C36; padding-top:16px; font-size:11px; color:#5E6675; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="rtitle">Push Day</div>
<div class="metricrow"><div class="m dur"><div class="lbl">DURATION</div><div class="val">42:18</div></div>
<div class="m"><div class="lbl">VOLUME</div><div class="val">8,420 kg</div></div>
<div class="m"><div class="lbl">SETS</div><div class="val">14</div></div></div>
<div class="restpill"><div class="rring"></div><div class="resttxt">Rest · 1:24</div><div class="skiptxt">Skip</div></div>
<div class="excard">
<div class="exhead"><div class="exthumb"></div><div class="exname">Bench Press</div></div>
<div class="setrow" style="color:#9BA3B0;font-weight:700"><span>SET</span><span>PREV</span><span>KG</span><span>REPS</span><span></span></div>
<div class="setrow done"><span class="idx">1</span><span class="prev">60 × 10</span><span class="cell">62.5</span><span class="cell">10</span><span class="chk done">✓</span></div>
<div class="setrow"><span class="idx">2</span><span class="prev">60 × 10</span><span class="cell">62.5</span><span class="cell">9</span><span class="chk"></span></div>
<span class="prbadge">★ NEW PR · 1RM 87.5 kg</span>
</div>
<div class="tabbar"><div class="tab">Home</div><div class="tab">Profile</div><div class="tab on">Workout</div><div class="tab">History</div><div class="tab">Exercises</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">Hevy (iOS)<span>.</span></h1>
<p class="tag">A dark gym-floor instrument — a dense set table with a Previous column so you always know the target.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#0E1116"></div><small>#0E1116</small></div>
<div class="sw"><div class="chip2" style="background:#1E6FFF"></div><small>#1E6FFF</small></div>
<div class="sw"><div class="chip2" style="background:#2FBF71"></div><small>#2FBF71</small></div>
<div class="sw"><div class="chip2" style="background:#F5B83D"></div><small>#F5B83D</small></div>
<div class="sw"><div class="chip2" style="background:#161B22"></div><small>#161B22</small></div>
</div>
<div class="typeblock">
<div class="t1">62.5 kg × 10</div>
<div class="t2">Inter · tabular figures on every number — the table must never reflow</div>
</div>
<div class="taglist">
<span>Set table w/ Previous</span><span>Rest-timer pill</span><span>Gold PR badge</span>
<span>Green set-done wash</span><span>Live Activity rest ring</span>
</div>
<div class="footer">Near-black blue-cool #0E1116 · Hevy Blue is the only action color in the app</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0f0f0; color: #1e1f26;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0f0f0; color: #1e1f26;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #1e1f26; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: 1px; background: #eac078; color: #1e1f26;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: 1px; background: #f0f0f0; color: #1e1f26;
border: 1px solid #eac078; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #555555;
border: 1px solid #bcbcbe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 10px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #02e49b; color: #1e1f26;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f0f0f0; color:#1e1f26; box-sizing:border-box;
font-family:Georgia, 'Times New Roman', serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#f0f0f0; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:18px; font-weight:400; letter-spacing:0.5px; margin:0; }
.navlinks { display:flex; gap:24px; font-family:'Segoe UI', Arial, sans-serif; }
.navlinks span { font-size:12px; letter-spacing:0.3px; color:#555555; text-transform:uppercase; }
.cart { font-family:'Consolas', monospace; font-size:12px; color:#1e1f26; }
main { display:flex; height:580px; }
.stage { width:320px; background:#e6ded1; display:flex; align-items:center; justify-content:center; }
.dropper { width:70px; height:170px; position:relative; }
.cap2 { width:40px; height:34px; background:#1e1f26; border-radius:4px 4px 0 0; margin:0 auto; }
.glass { width:70px; height:130px; margin-top:-4px; border-radius:10px; background:linear-gradient(180deg,rgba(234,192,120,0.5),rgba(234,192,120,0.15));
border:1px solid rgba(30,31,38,0.15); }
.info { flex:1; padding:30px 34px; display:flex; flex-direction:column; gap:11px; }
.kicker { font-family:'Segoe UI', Arial, sans-serif; font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:#949494; margin:0; }
h1 { font-size:26px; font-weight:400; margin:0; letter-spacing:0; line-height:1.25; }
.sub { font-family:'Segoe UI', Arial, sans-serif; font-size:13px; color:#555555; margin:0; max-width:440px; line-height:1.6; }
.ingredients { font-family:'Consolas','Menlo','Monaco',monospace; font-size:11px; color:#555555; background:#fff;
border:1px solid #dddddd; border-radius:6px; padding:10px 12px; line-height:1.7; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:2px; }
.price { font-size:22px; font-weight:400; color:#1e1f26; }
.badge { display:inline-flex; background:#f0f0f0; color:#1ea0c3; font-size:11px; letter-spacing:0.4px; border-radius:4px;
padding:4px 9px; font-family:'Segoe UI',Arial,sans-serif; width:fit-content; }
.actions { display:flex; gap:12px; margin-top:6px; font-family:'Segoe UI', Arial, sans-serif; }
.btn-primary { background:#eac078; color:#1e1f26; border-radius:8px; height:46px; padding:0 26px; display:flex;
align-items:center; font-weight:500; font-size:13px; }
.btn-secondary { background:#f0f0f0; border:1px solid #dddddd; color:#1e1f26; border-radius:8px; height:46px;
padding:0 20px; display:flex; align-items:center; font-size:13px; font-weight:500; }
</style></head>
<body>
<nav>
<p class="brand">Ayuna</p>
<div class="navlinks"><span>Serums</span><span>Rituals</span><span>Journal</span><span>About</span></div>
<span class="cart">Cart (0)</span>
</nav>
<main>
<div class="stage"><div class="dropper"><div class="cap2"></div><div class="glass"></div></div></div>
<div class="info">
<p class="kicker">Clinical, Conscious Skincare</p>
<h1>Golden Hour Repair Serum</h1>
<p class="sub">A quiet, deliberate formula built on bakuchiol and squalane — for skin that prefers evidence to fragrance.</p>
<div class="ingredients">Aqua · Bakuchiol 1.2% · Squalane · Niacinamide 4% · Panthenol</div>
<span class="badge">Dermatologist Tested</span>
<div class="price-row"><span class="price">$58.00</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Read the Study</div>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f3f3; color: #303030;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f3f3; color: #303030;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #303030; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #2332d5; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f3f3f3; color: #303030;
border: 1px solid #2332d5; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #303030;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; background: #2332d5; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f3f3f3; font-family:'Montserrat', 'Helvetica Neue', Arial, sans-serif; color:#303030; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:72px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d0d0d0;}
.logo{font-size:20px;font-weight:600;color:#303030;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;}
.navlinks span:first-child{color:#2332d5;}
.cart{position:relative;width:34px;height:34px;border-radius:8px;background:#f0f0f0;}
.cart:after{content:'';position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:9999px;background:#2332d5;}
.hero{height:250px;display:flex;align-items:center;padding:0 32px;gap:32px;}
.herotxt{max-width:340px;}
.h1{font-size:30px;font-weight:600;letter-spacing:-0.4px;margin:0 0 10px;color:#303030;}
.sub{font-size:14px;color:#616161;line-height:1.5;margin:0 0 18px;}
.btn{display:inline-block;background:#2332d5;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.2px;padding:12px 26px;border-radius:8px;}
.bottleimg{width:180px;height:220px;border-radius:20px;background:linear-gradient(160deg,#4a5cf0,#2332d5 55%,#1a1a1a);position:relative;}
.bottleimg:before{content:'';position:absolute;top:14px;left:64px;width:52px;height:26px;border-radius:10px;background:#1a1a1a;}
.strip{display:flex;gap:14px;padding:0 32px;}
.grid{display:flex;gap:16px;padding:16px 32px 0;}
.card{width:210px;background:#fff;border-radius:12px;overflow:hidden;}
.thumb{height:150px;background:linear-gradient(135deg,#dee6ff,#2332d5);position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#cdfee1;color:#29845a;font-size:10px;font-weight:600;padding:2px 8px;border-radius:4px;}
.ctitle{font-size:14px;font-weight:600;padding:10px 12px 2px;}
.cprice{font-size:14px;color:#616161;padding:0 12px 12px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#303030;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#b5b5b5;font-size:11px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mizu</div>
<div class="navlinks"><span>Bottles</span><span>Straw Lids</span><span>Accessories</span></div>
<div class="cart"></div>
</div>
<div class="hero">
<div class="herotxt">
<div class="h1">Cold-touch steel, warmed up.</div>
<p class="sub">Insulated bottles built for a well-organized gear closet, not a lab bench.</p>
<div class="btn">Shop Bottles</div>
</div>
<div class="bottleimg"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge">New</span></div><div class="ctitle">Summit 24oz Bottle</div><div class="cprice">$38</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Trail Straw Lid</div><div class="cprice">$14</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Basecamp 40oz Jug</div><div class="cprice">$52</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Carry Sling</div><div class="cprice">$18</div></div>
</div>
<div class="footer"><span>Free shipping over $50</span><span>© Mizu</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefffe; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefffe; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #003399; color: #ffffff;
border: none; border-radius: 0px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fefffe; color: #222222;
border: 1px solid #003399; border-radius: 0px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fefffe; color: #222222;
border: 1px solid #c7c8c7; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f16e22; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fefffe; color:#222222; font-family:Arial,'Helvetica Neue',sans-serif; }
*{box-sizing:border-box;}
.nav{height:48px;background:#003399;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-family:Georgia,serif;font-size:20px;}
.navlinks{display:flex;gap:18px;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;}
.catstrip{display:flex;gap:8px;padding:10px 30px;border-bottom:1px solid #eeeeee;}
.tab{font-size:12px;padding:6px 14px;}
.tab.active{background:#003399;color:#fff;}
.tab:not(.active){color:#222;}
.grid{display:flex;gap:14px;padding:14px 30px;}
.card{width:200px;border:1px solid #eeeeee;}
.thumb{height:100px;background:#f7f7f7;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#f16e22;color:#fff;font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2px 6px;}
.artist{font-size:12px;color:#666;padding:8px 8px 0;}
.title{font-size:13px;font-weight:700;padding:2px 8px 0;}
.price{font-size:13px;padding:4px 8px 8px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:64px;background:#222222;display:flex;align-items:center;justify-content:space-between;padding:0 30px;color:#adacac;font-size:11px;}
.footer .h{color:#fff;font-weight:700;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Piccadilly Records</div>
<div class="navlinks"><div>New Releases</div><div>Chart</div><div>Second Hand</div><div>Sale</div></div>
</div>
<div class="catstrip">
<div class="tab active">Techno</div><div class="tab">House</div><div class="tab">Disco</div><div class="tab">Electronica</div><div class="tab">Reggae</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003399,#e5d974)"><div class="badge">Sale</div></div><div class="artist">Underworld</div><div class="title">Dubnobasswithmyheadman</div><div class="price">£26.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f16e22,#003399)"></div><div class="artist">The Chemical Brothers</div><div class="title">Exit Planet Dust</div><div class="price">£24.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e5d974,#222)"></div><div class="artist">Aphex Twin</div><div class="title">Selected Ambient Works</div><div class="price">£29.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#222,#f16e22)"></div><div class="artist">New Order</div><div class="title">Technique</div><div class="price">£22.99</div></div>
</div>
<div class="footer"><span class="h">Piccadilly Records</span><span>Manchester's Independent Record Shop · Since 1978</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ff6600; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #222222;
border: 1px solid #ff6600; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff6600; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{
width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;
background:#ffffff;font-family:'Helvetica Neue',Helvetica,Arial,'Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif;
color:#555555;
}
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:60px;background:#ffffff;border-bottom:1px solid #e6e6e6;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.logo{color:#222222;font-weight:700;font-size:18px;}
.logo span{color:#ff6600;}
.navlinks{display:flex;gap:20px;}
.navlinks span{font-size:13px;font-weight:600;color:#222222;padding-bottom:4px;}
.navlinks span.active{color:#ff6600;border-bottom:2px solid #ff6600;}
.searchbar{background:#f5f5f5;border-radius:8px;padding:8px 14px;font-size:12px;color:#888888;width:220px;}
.hero{background:#f5f5f5;padding:26px 24px;text-align:center;}
.hero h1{font-size:30px;font-weight:700;letter-spacing:-0.5px;color:#222222;margin:0 0 8px;}
.hero p{font-size:14px;color:#555555;margin:0 0 14px;}
.heroBtn{display:inline-block;background:#ff6600;color:#fff;font-size:13px;font-weight:600;padding:11px 26px;border-radius:9999px;}
.section{padding:16px 24px 0;}
.sectitle{font-size:15px;font-weight:600;color:#222222;margin:0 0 10px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#fff;border-radius:8px;overflow:hidden;border:1px solid #e6e6e6;}
.photo{aspect-ratio:1/1;background:linear-gradient(160deg,#eeeeee,#dddddd);border-radius:8px 8px 0 0;position:relative;}
.photo .fig{position:absolute;bottom:10%;left:50%;transform:translateX(-50%);width:42%;height:64%;background:linear-gradient(180deg,#ff6600,#ff8400);border-radius:16px 16px 4px 4px;}
.badgeNew{position:absolute;top:6px;left:6px;background:#ff6600;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.badgePre{position:absolute;top:6px;left:6px;background:#f89406;color:#222;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.ctitle{font-size:13px;font-weight:600;color:#222222;padding:8px 10px 0;}
.cprice{font-size:14px;font-weight:700;color:#ff6600;padding:2px 10px 10px;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#222222;color:#ffffff;font-size:11px;padding:12px 24px;display:flex;justify-content:space-between;}
.footer a{color:#ffffff;margin-right:12px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Good Smile Company Collecti 2<span>.</span></div>
<div class="navlinks">
<span class="active">Catalog</span>
<span>Nendoroid</span>
<span>Figma</span>
<span>Statues</span>
<span>Support</span>
</div>
<div class="searchbar">Search figures & statues...</div>
</div>
<div class="hero">
<h1>Every figure, catalogued.</h1>
<p>Browse the full Good Smile Company lineup — pre-orders, restocks, and collector statues.</p>
<div class="heroBtn">View Full Catalog</div>
</div>
<div class="section">
<div class="sectitle">Popular Right Now</div>
<div class="grid">
<div class="card"><div class="photo"><div class="badgeNew">New</div><div class="fig"></div></div>
<div class="ctitle">Nendoroid No. 2201</div><div class="cprice">¥6,800</div></div>
<div class="card"><div class="photo"><div class="badgePre">Pre-Order</div><div class="fig"></div></div>
<div class="ctitle">Figma No. 588</div><div class="cprice">¥8,900</div></div>
<div class="card"><div class="photo"><div class="fig"></div></div>
<div class="ctitle">Scale Figure 1/8</div><div class="cprice">¥22,000</div></div>
<div class="card"><div class="photo"><div class="badgeNew">New</div><div class="fig"></div></div>
<div class="ctitle">Nendoroid No. 2214</div><div class="cprice">¥7,200</div></div>
</div>
</div>
<div class="footer">
<span>© Good Smile Company Collecti 2</span>
<span><a>Shipping</a><a>Returns</a><a>Support</a></span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdfaf7; color: #1a1714;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdfaf7; color: #1a1714;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.33; margin: 0; color: #1a1714; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #7a6f68; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.25; letter-spacing: 0.1em; background: #c9a87c; color: #000000;
border: none; border-radius: 4px; padding: 13px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.25; letter-spacing: 0.1em; background: transparent; color: #1a1714;
border: 1px solid #c9a87c; border-radius: 4px;
padding: 12px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fdfaf7; color: #1a1714;
border: 1px solid #c4c1be; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a6f68; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1em; background: #4a7c59; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fdfaf7; color:#1a1714; box-sizing:border-box;
font-family:'Cormorant Garamond','Cormorant',Georgia,'Times New Roman',serif; }
* { box-sizing:border-box; }
nav { height:74px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:21px; font-weight:600; letter-spacing:0.5px; }
.navlinks { display:flex; gap:28px; font-family:'Helvetica Neue',Arial,sans-serif; font-size:12px; letter-spacing:0.5px; color:#3d3530; text-transform:uppercase; }
.cart-txt { font-family:'Helvetica Neue',Arial,sans-serif; font-size:12px; letter-spacing:0.5px; }
main { display:flex; height:calc(640px - 74px - 46px); }
.gallery { width:400px; background:#f8f3ee; position:relative; display:flex; align-items:center; justify-content:center; }
.ring { width:110px; height:110px; border-radius:9999px; border:14px solid #c9a87c; box-shadow:0 14px 30px rgba(0,0,0,0.1); }
.info { flex:1; padding:32px 38px; display:flex; flex-direction:column; gap:14px; }
.cat { font-family:'Helvetica Neue',Arial,sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#7a6f68; }
h1 { font-size:30px; font-weight:600; margin:0; letter-spacing:0.3px; }
.price { font-family:'Helvetica Neue',Arial,sans-serif; font-size:18px; font-weight:400; }
.cause { display:inline-flex; align-items:center; gap:8px; background:#4a7c59; color:#fff; font-family:'Helvetica Neue',Arial,sans-serif;
font-size:11px; letter-spacing:0.3px; padding:6px 12px; border-radius:9999px; width:fit-content; }
.desc { font-size:16px; color:#3d3530; line-height:1.5; max-width:340px; }
.materials { display:flex; gap:10px; }
.mat { border:1px solid #e0d8d0; border-radius:8px; padding:8px 14px; font-family:'Helvetica Neue',Arial,sans-serif; font-size:11px; letter-spacing:0.3px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#1a1714; color:#fff; border:none; border-radius:8px; padding:14px; font-family:'Helvetica Neue',Arial,sans-serif; font-size:13px; font-weight:600; letter-spacing:0.5px; }
.btn-sec { background:transparent; color:#1a1714; border:1px solid #1a1714; border-radius:8px; padding:14px 18px; font-family:'Helvetica Neue',Arial,sans-serif; font-size:12px; letter-spacing:0.3px; }
footer { padding:14px 40px; border-top:1px solid #e0d8d0; font-family:'Helvetica Neue',Arial,sans-serif; font-size:10px; letter-spacing:0.3px; color:#7a6f68; text-align:center; }
</style></head>
<body>
<nav>
<div class="brand">Bird Stone</div>
<div class="navlinks"><span>Rings</span><span>Necklaces</span><span>Earrings</span><span>Our Causes</span></div>
<div class="cart-txt">Cart (1)</div>
</nav>
<main>
<div class="gallery"><div class="ring"></div></div>
<div class="info">
<span class="cat">Gold-Fill Stacking Ring</span>
<h1>The Wren Ring</h1>
<span class="price">$68</span>
<span class="cause">This piece funds 1 month of clean water access</span>
<p class="desc">Hand-finished 14k gold-fill, cast from a single wren feather found on a Vermont farm.</p>
<div class="materials"><span class="mat">14k Gold-Fill</span><span class="mat">Size 6–9</span></div>
<div class="btn-row">
<button class="btn-add">Add to Cart</button>
<button class="btn-sec">Read the Story</button>
</div>
</div>
</main>
<footer>© Bird Stone · Every piece funds a cause</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #0033ab; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #ffffff; color: #0033ab;
border: 1px solid #0033ab; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #3a3a3a;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #dfedf3; color: #0033ab;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9f9f9; color:#111111; box-sizing:border-box;
font-family:'Open Sans', Arial, 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#ffffff; border-bottom:1px solid #e6e6e6; }
.brand { font-family:'Montserrat', Arial, sans-serif; font-size:19px; font-weight:700; color:#0033ab; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; font-weight:600; text-transform:uppercase;
letter-spacing:0.3px; color:#777777; }
.navlinks span:first-child { color:#0033ab; border-bottom:3px solid #0033ab; padding-bottom:4px; }
.btn-primary { background:#0033ab; color:#fff; border:none; border-radius:8px; padding:10px 22px;
font-family:'Montserrat',Arial,sans-serif; font-weight:600; font-size:14px; }
.hero { display:flex; padding:22px 36px; gap:30px; background:#dfedf3; }
.hero-copy { flex:1.2; }
.hero h1 { font-family:'Montserrat',Arial,sans-serif; font-size:26px; font-weight:700; line-height:1.25; margin:0 0 8px; }
.hero p { font-size:14px; color:#3a3a3a; line-height:1.5; margin:0 0 14px; max-width:400px; }
.pillrow { display:flex; gap:8px; margin-bottom:14px; }
.dpill { background:#0170b9; color:#fff; font-size:12px; font-weight:600; padding:5px 13px; border-radius:999px; }
.dpill.active { background:#0033ab; }
.btn-teal { background:#00acad; color:#fff; border:none; border-radius:999px; padding:9px 20px; font-size:13px; font-weight:600; }
.hero-visual { flex:0.9; display:flex; align-items:center; justify-content:center; }
.bottle { width:110px; height:180px; border-radius:14px; background:linear-gradient(180deg,#ffffff 0%,#dfedf3 60%,#0170b9 100%);
border:2px solid #003388; position:relative; }
.bottle::before { content:''; position:absolute; top:-14px; left:38px; width:34px; height:20px; background:#003388; border-radius:4px 4px 0 0; }
.bottle::after { content:'30C'; position:absolute; bottom:16px; left:0; right:0; text-align:center; font-family:'Montserrat',Arial; font-weight:700; color:#003388; font-size:13px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:18px 36px; }
.card { background:#fff; border:1px solid #e6e6e6; border-radius:12px; padding:14px; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.card .imgbox { height:70px; border-radius:8px; background:#dfedf3; margin-bottom:10px; position:relative; }
.badge-g { position:absolute; top:6px; left:6px; background:#61a229; color:#fff; font-size:10px; font-weight:700;
text-transform:uppercase; letter-spacing:0.3px; padding:2px 8px; border-radius:999px; }
.card h3 { font-family:'Montserrat',Arial,sans-serif; font-size:14px; font-weight:600; margin:0 0 4px; }
.card .price { font-size:13px; color:#111; font-weight:700; }
.card .sub { font-size:11px; color:#949494; }
footer { background:#003399; color:#fff; padding:14px 36px; display:flex; justify-content:space-between;
align-items:center; font-size:12px; }
footer span:last-child { opacity:0.85; }
</style></head>
<body>
<nav>
<p class="brand">Boiron</p>
<div class="navlinks"><span>Cold & Flu</span><span>Allergy</span><span>Pain Relief</span><span>Kids</span></div>
<button class="btn-primary">Find a Store</button>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Homeopathic relief, dosed with care</h1>
<p>Since 1932, small pellets formulated for the moment you need them — no drowsiness, no drug interactions.</p>
<div class="pillrow"><span class="dpill active">Adults</span><span class="dpill">Kids 2+</span><span class="dpill">Nighttime</span></div>
<button class="btn-teal">Find Relief</button>
</div>
<div class="hero-visual"><div class="bottle"></div></div>
</section>
<section class="grid">
<div class="card"><div class="imgbox"><span class="badge-g">Natural</span></div><h3>Oscillococcinum</h3><div class="price">$14.99</div><div class="sub">6 doses</div></div>
<div class="card"><div class="imgbox"></div><h3>Arnicare Gel</h3><div class="price">$11.49</div><div class="sub">2.6 oz</div></div>
<div class="card"><div class="imgbox"></div><h3>Children's ColdCalm</h3><div class="price">$9.99</div><div class="sub">Ages 2+</div></div>
</section>
<footer>
<span>© Boiron</span>
<span>Homeopathic medicines · Talk to your pharmacist</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; background: #00b87c; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; background: #ffffff; color: #1a1a1a;
border: 1px solid #00b87c; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.36; letter-spacing: 0.5px; background: #ff6666; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family: Arial, Helvetica, 'Helvetica Neue', sans-serif; background:#fff; color:#333; }
*{box-sizing:border-box;}
.nav{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid #dddddd;}
.logo{font-size:19px;font-weight:700;color:#1a1a1a;}
.navlinks{display:flex;gap:18px;font-size:14px;font-weight:600;color:#333;}
.navlinks .on{color:#00b87c;}
.searchpill{width:200px;height:34px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;padding:0 12px;font-size:13px;color:#666;}
.hero{height:170px;background:#00b87c;display:flex;align-items:center;padding:0 30px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:-30px;top:-30px;width:170px;height:170px;background:#0067b8;opacity:.3;border-radius:8px;transform:rotate(15deg);}
.hero:after{content:'';position:absolute;right:130px;bottom:-40px;width:110px;height:110px;background:#ff6666;opacity:.3;border-radius:8px;transform:rotate(-10deg);}
.herotext{position:relative;z-index:1;}
.herotext h1{color:#fff;font-size:26px;font-weight:700;margin:0 0 8px;letter-spacing:-.3px;}
.herotext p{color:#e6fff5;font-size:13px;margin:0 0 12px;}
.herocta{display:inline-block;background:#fff;color:#00b87c;font-size:13px;font-weight:700;padding:10px 20px;border-radius:8px;}
.chiprow{display:flex;gap:8px;padding:14px 26px;}
.chip{padding:6px 14px;border-radius:8px;font-size:12px;font-weight:700;}
.chip.on{background:#00b87c;color:#fff;}
.chip.off{background:#f5f5f5;color:#666;}
.grid{display:flex;gap:12px;padding:0 26px;}
.card{width:150px;background:#fff;border-radius:8px;padding:8px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.thumb{aspect-ratio:1/1;height:105px;border-radius:8px;margin-bottom:6px;position:relative;overflow:hidden;}
.badge{position:absolute;top:5px;left:5px;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 7px;border-radius:4px;color:#fff;letter-spacing:.4px;}
.ptitle{font-size:13px;font-weight:600;color:#1a1a1a;line-height:1.3;height:32px;overflow:hidden;}
.pprice{font-size:16px;font-weight:700;color:#1a1a1a;margin-top:4px;}
.pstock{font-size:11px;color:#00b87c;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#111111;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:12px;color:#999;}
.footer span{margin-left:14px;color:#00b87c;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Jazz Messengers</div>
<div class="navlinks"><div class="on">Jazz</div><div>Soul</div><div>World</div><div>New Releases</div></div>
<div class="searchpill">Search catalog…</div>
</div>
<div class="hero">
<div class="herotext">
<h1>The Setlist, Pressed to Wax</h1>
<p>Curated jazz and soul vinyl, restocked weekly from the vault.</p>
<div class="herocta">Browse Genres</div>
</div>
</div>
<div class="chiprow">
<div class="chip on">All</div><div class="chip off">Bebop</div><div class="chip off">Fusion</div><div class="chip off">Soul</div><div class="chip off">Limited</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00b87c,#0067b8)"></div><div class="ptitle">Blue Hour Sessions — LP</div><div class="pprice">$32.00</div><div class="pstock">In Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0067b8,#111)"><span class="badge" style="background:#0067b8;">New</span></div><div class="ptitle">Harlem Nightline — Reissue</div><div class="pprice">$28.00</div><div class="pstock">In Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff6666,#00b87c)"><span class="badge" style="background:#ff6666;">Sale</span></div><div class="ptitle">Modal Currents — 180g</div><div class="pprice">$24.00</div><div class="pstock" style="color:#ff6666;">Low Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#111,#0067b8)"></div><div class="ptitle">Soul Cargo — Double LP</div><div class="pprice">$38.00</div><div class="pstock">In Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00b87c,#111)"></div><div class="ptitle">Quiet Storm Sessions Vol. 3</div><div class="pprice">$26.00</div><div class="pstock">In Stock</div></div>
</div>
<div class="footer"><span>© Vinyl Vault Since 1994</span><span>Streaming Links<span> Contact</span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; background: #E2001A; color: #FFFFFF;
border: none; border-radius: 2px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; background: #FFFFFF; color: #E2001A;
border: 1px solid #E2001A; border-radius: 2px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #DDDDDD; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.5; background: #E2001A; color: #FFFFFF;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; background:#fff; color:#333333; }
*{box-sizing:border-box;}
.util{height:32px;background:#1a1a1a;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;}
.nav{height:48px;background:#003865;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:18px;font-weight:700;color:#fff;text-transform:uppercase;}
.navlinks{display:flex;gap:18px;font-size:14px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0.2px;}
.searchrow{height:40px;background:#f5f5f5;display:flex;align-items:center;padding:0 30px;gap:8px;}
.search{flex:1;height:30px;background:#fff;border:1px solid #dddddd;border-radius:2px;display:flex;align-items:center;padding:0 10px;font-size:12px;color:#666;}
.searchbtn{background:#e2001a;color:#fff;font-size:13px;font-weight:700;padding:6px 20px;border-radius:2px;}
.body{padding:14px 30px;}
.crumb{font-size:12px;color:#666;margin-bottom:10px;}
.grid{display:flex;gap:12px;}
.card{width:220px;background:#fff;border:1px solid #dddddd;border-radius:2px;padding:10px;}
.thumb{height:100px;background:#f5f5f5;border-radius:2px;}
.name{font-size:16px;font-weight:700;color:#0066cc;margin-top:8px;}
.catalog{font-family:'Courier New',monospace;font-size:13px;font-weight:700;letter-spacing:0.5px;margin-top:4px;}
.cas{font-family:'Courier New',monospace;font-size:12px;color:#999;margin-top:2px;}
.price{font-size:18px;font-weight:700;margin-top:6px;}
.pricingtable{margin-top:14px;border:1px solid #dddddd;}
.ptrow{display:flex;font-size:13px;}
.ptrow.head{background:#003865;color:#fff;font-weight:700;}
.ptrow:nth-child(even):not(.head){background:#f9f9f9;}
.ptrow div{padding:6px 10px;flex:1;}
.ptrow .c1{flex:1.4;}
.addcart{background:#e2001a;color:#fff;font-size:11px;font-weight:700;text-align:center;padding:3px 0;border-radius:2px;}
</style>
<div class="util"><span>Milliporesigma | Analytical Biochemistry Labware</span><span>My Account Cart (0)</span></div>
<div class="nav">
<div class="logo">Milliporesigma</div>
<div class="navlinks"><div>Analytical</div><div>Biochemistry</div><div>Labware</div><div>Life Science</div></div>
</div>
<div class="searchrow"><div class="search">Search by catalog number, CAS, product name...</div><div class="searchbtn">Search</div></div>
<div class="body">
<div class="crumb">Home / Analytical / Solvents / Chromatography Grade</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="name">Acetonitrile, HPLC Grade</div><div class="catalog">CAT# 34851</div><div class="cas">CAS 75-05-8</div><div class="price">$84.20</div></div>
<div class="card"><div class="thumb"></div><div class="name">Methanol, LC-MS Grade</div><div class="catalog">CAT# 34860</div><div class="cas">CAS 67-56-1</div><div class="price">$76.50</div></div>
</div>
<div class="pricingtable">
<div class="ptrow head"><div class="c1">Catalog Number</div><div>Pack Size</div><div>Price</div><div></div></div>
<div class="ptrow"><div class="c1">34851-1L</div><div>1 L</div><div>$84.20</div><div><div class="addcart">Add</div></div></div>
<div class="ptrow"><div class="c1">34851-4L</div><div>4 L</div><div>$268.00</div><div><div class="addcart">Add</div></div></div>
<div class="ptrow"><div class="c1">34851-20L</div><div>20 L</div><div>$1,140.00</div><div><div class="addcart">Add</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff6719; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff6719; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4a6fe3; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6719; color: #000000;
border: 1px solid #4a6fe3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff6719; color: #f5f5f5;
border: 1px solid #fd7e3c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e26839; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1F1F1F; box-sizing:border-box;
font-family:"Source Serif 4", Georgia, "Times New Roman", serif; }
* { box-sizing:border-box; }
.sans { font-family:"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; }
.wrap { max-width:600px; margin:0 auto; padding:26px 30px; }
.pub-row { display:flex; align-items:center; gap:10px; }
.logo-tile { width:34px; height:34px; border-radius:6px; background:linear-gradient(135deg,#FF6719,#e5560e); }
.pub-name { font-size:14px; font-weight:600; }
.pub-sub { font-size:12px; color:#8A8A8A; }
.p-title { font-size:26px; font-weight:700; margin-top:14px; letter-spacing:-.3px; line-height:1.22; }
.dek { font-size:17px; font-style:italic; color:#57534E; margin-top:8px; line-height:1.4; }
.byline-row { display:flex; align-items:center; gap:10px; margin-top:14px; padding-bottom:14px; border-bottom:0.5px solid #ECECEC; }
.b-av { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#89b,#456); }
.b-meta { font-size:13px; color:#8A8A8A; }
.body-p { font-size:18px; line-height:1.65; margin-top:18px; }
.pull { font-size:21px; font-weight:600; font-style:italic; border-left:3px solid #FF6719; padding-left:18px; margin:18px 0; }
.sub-card { margin-top:20px; background:#FFF7F2; border:1px solid #FFD9C2; border-radius:10px; padding:14px; text-align:center; }
.sub-hdr { font-size:15px; font-weight:700; }
.sub-sub { font-size:12px; color:#8A8A8A; margin-top:4px; }
.sub-btn { margin-top:10px; height:42px; border-radius:6px; background:#FF6719; color:#fff; font-size:15px; font-weight:700;
display:flex; align-items:center; justify-content:center; }
.price-line { font-size:11px; color:#A0A0A0; margin-top:8px; }
.action-bar { display:flex; gap:22px; margin-top:16px; font-size:13px; font-weight:600; color:#57534E; }
.action-bar .like { color:#FF6719; }
</style></head>
<body>
<div class="wrap">
<div class="pub-sub sans">Substack (iOS)</div>
<div class="pub-row"><div class="logo-tile"></div><div><div class="pub-name sans">The Generalist</div><div class="pub-sub sans">312,400 subscribers</div></div></div>
<div class="p-title">The Quiet Compounding of Small Bets</div>
<div class="dek">Why the best portfolios are built one unglamorous decision at a time</div>
<div class="byline-row"><div class="b-av"></div><span class="b-meta sans">Mario Gabriele · May 14 · 18 min read</span></div>
<div class="body-p">Every year a handful of investors quietly outperform, and almost none of them do it with a single dramatic call. What separates them is a discipline that never gets a headline.</div>
<div class="pull">"The compounding always happens quietly, in the background, while everyone is watching something louder."</div>
<div class="body-p">Keep reading with a subscription to see the full framework and three case studies.</div>
<div class="sub-card sans">
<div class="sub-hdr">Keep reading with a subscription</div>
<div class="sub-sub">Unlock this post and the full archive</div>
<div class="sub-btn">Subscribe</div>
<div class="price-line">$8/month · $80/year · cancel anytime</div>
</div>
<div class="action-bar sans"><span class="like">♥ 842</span><span>💬 63</span><span>↻ Restack</span><span>↗ Share</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #dedede; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #dedede; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #121212; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: transparent; color: #121212;
border: 1px solid #121212; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #ababab; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #cc0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#dedede; font-family:'aktiv-grotesk','Helvetica Neue',Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#dedede;border-bottom:1px solid #121212;}
.logo{font-size:19px;font-weight:300;color:#121212;letter-spacing:-.3px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:400;color:#121212;}
.search{font-size:13px;color:#666666;}
.hero{padding:26px 36px 18px;}
.h1{font-size:32px;font-weight:300;line-height:1.25;letter-spacing:-.5px;color:#121212;margin:0 0 6px;max-width:600px;}
.hsub{font-size:14px;color:#333333;margin:0;}
.grid{display:flex;flex-wrap:wrap;gap:12px;padding:0 36px;}
.card{width:222px;background:#fff;border-radius:0;padding:0;position:relative;}
.cover{height:230px;position:relative;overflow:hidden;}
.stripe{position:absolute;left:0;right:0;height:8px;background:#121212;}
.title{position:absolute;bottom:16px;left:14px;right:14px;font-size:13px;font-weight:400;color:#fff;line-height:1.3;}
.author{position:absolute;bottom:44px;left:14px;font-size:11px;color:#dedede;text-transform:uppercase;letter-spacing:.5px;}
.meta{padding:8px 4px;}
.mtitle{font-size:14px;font-weight:400;color:#121212;line-height:1.3;}
.mauthor{font-size:12px;color:#666666;margin-top:2px;}
.price{font-size:13px;color:#333333;margin-top:6px;}
.badge{position:absolute;top:10px;left:10px;font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;padding:2px 8px;z-index:2;}
.badge-sale{background:#cc0000;color:#fff;}
.badge-new{background:#e6a817;color:#121212;}
.footer{position:absolute;bottom:0;left:0;right:0;height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:11px;color:#666666;border-top:1px solid #d0d0d0;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Verso Books</div>
<div class="navlinks"><span>Theory</span><span>History</span><span>Fiction</span><span>Politics</span></div>
<div class="search">Search</div>
</div>
<div class="hero">
<div class="h1">The book is the object, not the interface.</div>
<div class="hsub">Radical publishing since 1970 — new titles in theory, history, and fiction.</div>
</div>
<div class="grid">
<div class="card"><span class="badge badge-new">New</span>
<div class="cover" style="background:linear-gradient(180deg,#c62828,#121212 70%);"><div class="stripe" style="top:0;background:#fddab5;"></div><div class="author">V. Marchetti</div><div class="title">Capital and the Common Ruin</div></div>
<div class="meta"><div class="mtitle">Capital and the Common Ruin</div><div class="mauthor">V. Marchetti</div><div class="price">$24.95</div></div>
</div>
<div class="card">
<div class="cover" style="background:linear-gradient(180deg,#454545,#121212 75%);"><div class="stripe" style="top:60px;background:#dedede;height:2px;"></div><div class="author">R. Cassano</div><div class="title">The Long Emergency</div></div>
<div class="meta"><div class="mtitle">The Long Emergency</div><div class="mauthor">R. Cassano</div><div class="price">$19.95</div></div>
</div>
<div class="card"><span class="badge badge-sale">Sale</span>
<div class="cover" style="background:linear-gradient(180deg,#333333,#121212 80%);"><div class="author">L. Obiora</div><div class="title">Notes from the Occupied City</div></div>
<div class="meta"><div class="mtitle">Notes from the Occupied City</div><div class="mauthor">L. Obiora</div><div class="price">$16.00</div></div>
</div>
<div class="card">
<div class="cover" style="background:linear-gradient(180deg,#5a5a5a,#121212 75%);"><div class="author">S. Turay</div><div class="title">A Grammar of Revolt</div></div>
<div class="meta"><div class="mtitle">A Grammar of Revolt</div><div class="mauthor">S. Turay</div><div class="price">$21.95</div></div>
</div>
</div>
<div class="footer"><span>Verso Books, est. 1970</span><span>Twitter · Instagram · Blog</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.2; letter-spacing: 0.2em; margin: 0; color: #1d1d1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; letter-spacing: 0.02em; margin: 0; color: #848484; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.15em; background: #3d5aff; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.15em; background: transparent; color: #1d1d1d;
border: 1px solid #3d5aff; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: 0.02em; background: #ffffff; color: #1d1d1d;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #848484; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.08em; background: #1d1d1d; color: #f2f2f2;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Arial,sans-serif; color:#1d1d1d; }
*{box-sizing:border-box;}
.ticker{height:36px;background:#1d1d1d;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;letter-spacing:.4px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #eee;}
.logo{font-size:16px;font-weight:300;letter-spacing:6px;text-transform:uppercase;}
.navlinks{display:flex;gap:26px;font-size:12px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:#1d1d1d;}
.hero{display:flex;height:260px;}
.left{width:420px;padding:44px 40px;display:flex;flex-direction:column;justify-content:center;}
.h1{font-size:36px;font-weight:300;letter-spacing:1px;text-transform:uppercase;line-height:1.25;margin:0 0 16px;}
.sub{font-size:14px;letter-spacing:.3px;line-height:1.7;color:#5a5a5a;max-width:320px;margin:0 0 20px;}
.cta{display:inline-block;background:#3d5aff;color:#fff;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:14px 28px;width:fit-content;}
.right{flex:1;position:relative;background:linear-gradient(135deg,#f2d9cf,#ffffff);}
.bangle{position:absolute;left:60px;top:40px;width:100px;height:100px;border-radius:50%;border:16px solid #d2815f;}
.bangle2{position:absolute;left:180px;top:70px;width:70px;height:70px;border-radius:50%;border:12px solid #c35121;}
.filterrow{display:flex;gap:10px;padding:16px 40px 12px;}
.chip{background:#f7f7f7;border:1px solid #e4e4e4;border-radius:9999px;padding:6px 16px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:#5a5a5a;}
.chip.on{background:#1d1d1d;color:#fff;border-color:#1d1d1d;}
.grid{display:flex;gap:14px;padding:0 40px;}
.card{width:200px;}
.thumb{aspect-ratio:3/4;background:#f7f7f7;margin-bottom:8px;}
.ptitle{font-size:13px;font-weight:500;letter-spacing:.3px;margin:0 0 4px;}
.pprice{font-size:13px;color:#5a5a5a;}
</style>
<div class="ticker">FREE SHIPPING ON ORDERS OVER $75 — NEW ARRIVALS WEEKLY</div>
<div class="nav">
<div class="logo">Shashi</div>
<div class="navlinks"><div>Bangles</div><div>Necklaces</div><div>Earrings</div><div>Sale</div></div>
</div>
<div class="hero">
<div class="left">
<div class="h1">Geometric<br>Ceremony</div>
<div class="sub">Each glyph spaced for scroll, not speed. Burnished vs. galvanic, earth-warm vs. spark-cold.</div>
<div class="cta">Shop New Arrivals</div>
</div>
<div class="right"><div class="bangle"></div><div class="bangle2"></div></div>
</div>
<div class="filterrow"><div class="chip on">All</div><div class="chip">Copper</div><div class="chip">Cobalt</div><div class="chip">Rust</div></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d2815f,#f2d9cf)"></div><div class="ptitle">Copper Cuff Bangle</div><div class="pprice">$68</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3d5aff,#f7f7f7)"></div><div class="ptitle">Cobalt Link Necklace</div><div class="pprice">$92</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c35121,#f7f7f7)"></div><div class="ptitle">Rust Drop Earrings</div><div class="pprice">$54</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#94553a,#f2d9cf)"></div><div class="ptitle">Bronze Chain Bracelet</div><div class="pprice">$76</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #d32f2f; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;font-family:Arial,'Helvetica Neue',Roboto,sans-serif;color:#4a4a4a;}
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:20px;font-weight:700;letter-spacing:-0.3px;color:#313131;}
.navlinks{display:flex;gap:26px;font-size:13px;font-weight:600;color:#313131;text-transform:uppercase;letter-spacing:0.4px;}
.carticon{width:36px;height:36px;border-radius:999px;background:#f5f5f5;}
.hero{height:264px;display:flex;align-items:center;padding:0 40px;gap:40px;}
.hero-text{width:400px;}
.headline{font-size:34px;font-weight:700;letter-spacing:-0.4px;line-height:1.2;color:#313131;margin-bottom:14px;}
.sub{font-size:14px;color:#757575;line-height:1.55;width:365px;margin-bottom:20px;}
.cta{display:inline-block;height:48px;line-height:48px;padding:0 32px;background:#313131;color:#ffffff;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;}
.hero-visual{flex:1;height:220px;position:relative;display:flex;align-items:flex-end;justify-content:center;gap:26px;}
.bottle{width:52px;height:150px;border-radius:26px 26px 10px 10px;position:relative;}
.bottle::before{content:'';position:absolute;left:14px;top:-14px;width:24px;height:18px;border-radius:4px;background:inherit;filter:brightness(0.85);}
.b1{background:#9caf88;height:150px;}
.b2{background:#c9a8d4;height:170px;}
.b3{background:#e8917a;height:130px;}
.b4{background:#313131;height:190px;}
.section{padding:22px 40px 0 40px;display:flex;justify-content:space-between;align-items:baseline;}
.section-title{font-size:22px;font-weight:700;color:#313131;}
.section-link{font-size:12px;font-weight:600;color:#313131;text-decoration:underline;}
.grid{display:flex;gap:24px;padding:14px 40px 0 40px;}
.card{width:204px;background:#ffffff;border:1px solid #e0e0e0;border-radius:12px;overflow:hidden;}
.swatch{height:104px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;position:relative;}
.swatch .mini{width:34px;height:80px;border-radius:16px 16px 6px 6px;}
.badge{position:absolute;left:8px;top:8px;background:#d32f2f;color:#fff;font-size:9px;font-weight:700;padding:3px 8px;border-radius:999px;text-transform:uppercase;}
.card-body{padding:11px 13px 14px 13px;}
.card-title{font-size:13px;font-weight:700;color:#313131;margin-bottom:6px;}
.card-price{font-size:14px;font-weight:700;color:#313131;}
</style>
<div class="nav">
<div class="logo">Hydro Flask</div>
<div class="navlinks"><span>Bottles</span><span>Tumblers</span><span>Food Flasks</span><span>Gear</span></div>
<div class="carticon"></div>
</div>
<div class="hero">
<div class="hero-text">
<div class="headline">Keeps cold cold.<br/>Keeps hot hot.</div>
<div class="sub">TempShield insulated bottles built for the trail, the office, and everywhere in between.</div>
<div class="cta">Shop Bottles</div>
</div>
<div class="hero-visual">
<div class="bottle b1"></div>
<div class="bottle b2"></div>
<div class="bottle b3"></div>
<div class="bottle b4"></div>
</div>
</div>
<div class="section"><div class="section-title">Wide Mouth Bottles</div><div class="section-link">Shop all colors</div></div>
<div class="grid">
<div class="card">
<div class="swatch"><div class="mini" style="background:#9caf88;"></div></div>
<div class="card-body"><div class="card-title">32 oz Wide Mouth — Sage</div><div class="card-price">$44.95</div></div>
</div>
<div class="card">
<div class="swatch"><div class="mini" style="background:#c9a8d4;"></div><div class="badge">New</div></div>
<div class="card-body"><div class="card-title">32 oz Wide Mouth — Lilac</div><div class="card-price">$44.95</div></div>
</div>
<div class="card">
<div class="swatch"><div class="mini" style="background:#e8917a;"></div></div>
<div class="card-body"><div class="card-title">24 oz Standard — Coral</div><div class="card-price">$39.95</div></div>
</div>
<div class="card">
<div class="swatch"><div class="mini" style="background:#313131;"></div></div>
<div class="card-body"><div class="card-title">40 oz Wide Mouth — Black</div><div class="card-price">$49.95</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #737376; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #014d93; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f7f7f7; color: #014d93;
border: 1px solid #014d93; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #272727;
border: 1px solid #c3c3c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737376; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.3px; background: #bad3c0; color: #272727;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f7; color:#272727; box-sizing:border-box;
font-family:'Avenir','Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:70px; background:#f7f7f7; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:20px; font-weight:600; color:#014d93; }
.navlinks { display:flex; gap:26px; font-size:15px; font-weight:500; }
.navlinks span.active { color:#014d93; }
.navlinks span:not(.active) { color:#737376; }
.search-pill { width:180px; height:36px; border-radius:9999px; background:#fff; border:1px solid #c7c7c7; display:flex;
align-items:center; padding:0 16px; font-size:12px; color:#737376; }
.hero { height:220px; background:linear-gradient(120deg,#bad3c0 0%, #a9ccec 55%, #aadddd 100%); display:flex;
align-items:center; justify-content:space-between; padding:0 44px; }
.hero-text h1 { font-size:32px; font-weight:600; color:#014d93; margin:0 0 10px; letter-spacing:-0.5px; max-width:420px; line-height:1.2; }
.hero-text p { font-size:15px; color:#1b1b1b; opacity:.75; margin:0 0 16px; max-width:380px; }
.btn-navy { display:inline-block; background:#014d93; color:#fff; font-size:16px; font-weight:600; padding:14px 30px; border-radius:8px; }
.beaker { width:110px; height:150px; position:relative; }
.beaker .glass { position:absolute; bottom:0; left:20px; width:70px; height:100px; border:4px solid #ffffff; border-top:none;
border-radius:0 0 14px 14px; background:rgba(255,255,255,.35); }
.beaker .liquid { position:absolute; bottom:4px; left:24px; width:62px; height:50px; background:#014d93; border-radius:0 0 10px 10px; opacity:.85; }
.beaker .bubble { position:absolute; width:8px; height:8px; border-radius:50%; background:#fff; opacity:.8; }
.beaker .bubble.b1 { bottom:30px; left:40px; }
.beaker .bubble.b2 { bottom:50px; left:65px; }
.badges-row { display:flex; gap:12px; padding:14px 44px 0; }
.pill-tag { background:#bad3c0; color:#272727; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px;
padding:6px 16px; border-radius:9999px; }
.pill-tag.blue { background:#aadddd; }
.pill-tag.red { background:#cb1f2b; color:#fff; }
.grid { display:flex; gap:16px; padding:16px 44px 0; }
.card { flex:1; background:#ffffff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); padding:14px; position:relative; }
.card .imgbox { height:92px; background:#f4f4f4; border-radius:10px; margin-bottom:10px; display:flex; align-items:center; justify-content:center; }
.bottle { width:30px; height:58px; border-radius:8px 8px 4px 4px; background:linear-gradient(180deg,#014d93,#003d75); }
.badge { position:absolute; top:10px; left:10px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px;
padding:3px 9px; border-radius:9999px; }
.badge.sage { background:#bad3c0; color:#272727; }
.badge.teal { background:#aadddd; color:#272727; }
.card .name { font-size:16px; font-weight:500; color:#272727; margin-bottom:4px; }
.card .price { font-size:16px; color:#545454; }
footer { position:absolute; bottom:0; left:0; right:0; height:92px; background:#272727; color:#f7f7f7; display:flex;
align-items:center; justify-content:space-between; padding:0 44px; }
footer .col { font-size:12px; line-height:1.9; }
footer .col b { display:block; color:#fff; margin-bottom:3px; }
footer .col a { color:#a9ccec; }
.wrap { position:relative; height:640px; }
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="brand">Dirty Labs</div>
<div class="navlinks"><span class="active">Shop</span><span>Learn</span><span>Support</span><span>Connect</span></div>
<div class="search-pill">Search enzymes...</div>
</nav>
<div class="hero">
<div class="hero-text">
<h1>Nontoxic laundry, backed by real chemistry.</h1>
<p>Plant-surfactant detergent engineered by scientists, gentle enough for skin, tough enough for turf.</p>
<a class="btn-navy">Shop Detergent</a>
</div>
<div class="beaker"><div class="glass"></div><div class="liquid"></div><div class="bubble b1"></div><div class="bubble b2"></div></div>
</div>
<div class="badges-row">
<div class="pill-tag">Plant-Based</div>
<div class="pill-tag blue">Enzyme Powered</div>
<div class="pill-tag red">Sale</div>
</div>
<div class="grid">
<div class="card"><span class="badge teal">New</span><div class="imgbox"><div class="bottle"></div></div><div class="name">Laundry Detergent Sheets</div><div class="price">$24</div></div>
<div class="card"><span class="badge sage">Best Seller</span><div class="imgbox"><div class="bottle"></div></div><div class="name">Bio Enzyme Detergent</div><div class="price">$32</div></div>
<div class="card"><div class="imgbox"><div class="bottle"></div></div><div class="name">Fabric Refresh Spray</div><div class="price">$18</div></div>
<div class="card"><span class="badge sage">Eco-Friendly</span><div class="imgbox"><div class="bottle"></div></div><div class="name">Stain Stick</div><div class="price">$14</div></div>
</div>
<footer>
<div class="col"><b>Shop</b><a>Detergent</a><br><a>Bundles</a></div>
<div class="col"><b>Learn</b><a>The Science</a><br><a>Ingredients</a></div>
<div class="col"><b>Support</b><a>FAQ</a><br><a>Subscriptions</a></div>
<div class="col"><b>Dirty Labs</b>Clean, chemistry-first.</div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; background: #000000; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #000000;
border: 1px solid #e0e0e0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d4af37; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:19px;font-weight:700;color:#000000;}
.search{width:280px;height:34px;border-radius:9999px;border:1px solid #e0e0e0;background:#f5f5f5;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#666666;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#1a1a1a;}
.hero{padding:24px 36px 16px;}
.h1{font-size:26px;font-weight:700;color:#000000;margin:0 0 6px;}
.sub{font-size:13px;color:#666666;}
.grid{display:flex;gap:14px;padding:14px 36px 0;}
.card{width:200px;border:1px solid #e0e0e0;border-radius:4px;padding:10px;position:relative;}
.thumb{height:180px;border-radius:2px;margin-bottom:10px;position:relative;overflow:hidden;}
.groove{position:absolute;inset:0;border-radius:50%;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:2px;z-index:2;}
.badge-gold{background:#d4af37;color:#000;}
.badge-sale{background:#cc0000;color:#fff;}
.pname{font-size:14px;font-weight:700;color:#000000;}
.pmeta{font-size:12px;color:#666666;margin-top:3px;}
.pprice{font-size:14px;font-weight:700;color:#000000;margin-top:8px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:11px;color:#666666;border-top:1px solid #e0e0e0;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Vintage Vinyl</div>
<div class="navlinks"><span>New Arrivals</span><span>Rock</span><span>Jazz</span><span>Soul</span></div>
<div class="search">Search records, artists...</div>
</div>
<div class="hero">
<div class="h1">Crate-Digger Approved</div>
<div class="sub">New pressings and rare finds, straight from the shop floor.</div>
</div>
<div class="grid">
<div class="card"><span class="badge badge-gold">Sold Out</span><div class="thumb" style="background:linear-gradient(160deg,#1a1a1a,#666666)"></div><div class="pname">Nightfall Sessions</div><div class="pmeta">180g Vinyl · LP</div><div class="pprice">$32.99</div></div>
<div class="card"><span class="badge badge-sale">Sale</span><div class="thumb" style="background:linear-gradient(160deg,#333333,#999999)"></div><div class="pname">Backroom Blues</div><div class="pmeta">Reissue · LP</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#000000,#555555)"></div><div class="pname">Corner Store Soul</div><div class="pmeta">Original Press</div><div class="pprice">$45.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#1a1a1a,#d4af37)"></div><div class="pname">Studio Cuts Vol. 3</div><div class="pmeta">Limited Edition</div><div class="pprice">$38.50</div></div>
</div>
<div class="footer"><span>In-store since 1978</span><span>Shipping · Hours · Trade-Ins</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #111111; color: #FFFFFF;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #111111; color: #FFFFFF;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -0.2px; margin: 0; color: #FFFFFF; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9A9A9A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #00AE42; color: #FFFFFF;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: transparent; color: #FFFFFF;
border: 1px solid #00AE42; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #1E1E1E; color: #FFFFFF;
border: 1px solid #4c4c4c; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9A9A9A; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #1E1E1E; color: #E0E0E0;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#111111; color:#FFFFFF; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; border-bottom:1px solid #3D3D3D; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:15px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:500; color:#9A9A9A; }
.navlinks span.active { color:#fff; border-bottom:2px solid #00AE42; padding-bottom:20px; }
.search-bar { background:#1E1E1E; border:1px solid #3D3D3D; border-radius:4px; padding:8px 14px; font-size:12px; color:#9A9A9A; }
.main { display:flex; gap:0; height:380px; }
.left-col { width:460px; padding:24px 32px; display:flex; flex-direction:column; gap:10px; justify-content:center; }
.eyebrow { color:#00AE42; font-size:11px; font-weight:500; letter-spacing:0.6px; text-transform:uppercase; }
.left-col h1 { font-size:36px; font-weight:700; margin:0; letter-spacing:-0.4px; line-height:1.1; }
.left-col p { font-size:14px; color:#9A9A9A; max-width:380px; }
.cta-row { display:flex; gap:10px; margin-top:8px; }
.btn-primary { height:44px; padding:0 22px; background:#00AE42; color:#fff; border:none; border-radius:4px; font-weight:600; font-size:14px; }
.btn-secondary { height:44px; padding:0 22px; background:transparent; color:#fff; border:1px solid #3D3D3D; border-radius:4px; font-weight:600; font-size:14px; }
.right-col { flex:1; background:#1E1E1E; display:flex; align-items:center; justify-content:center; }
.printer { width:220px; height:200px; position:relative; }
.printer::before { content:''; position:absolute; inset:0; border:3px solid #3D3D3D; border-radius:6px; }
.printer::after { content:''; position:absolute; top:30%; left:15%; right:15%; bottom:15%; background:#252525; border:2px solid #00AE42; border-radius:4px; }
.spec-strip { display:flex; border-top:1px solid #3D3D3D; border-bottom:1px solid #3D3D3D; }
.spec-item { flex:1; text-align:center; padding:14px 0; border-right:1px solid #3D3D3D; }
.spec-item:last-child { border-right:none; }
.spec-item b { display:block; font-size:20px; font-weight:700; }
.spec-item span { font-size:10px; letter-spacing:0.5px; text-transform:uppercase; color:#6B6B6B; }
.ams { display:flex; align-items:center; gap:14px; padding:14px 32px; }
.ams-grid { display:grid; grid-template-columns:repeat(4,32px); gap:6px; }
.ams-slot { width:32px; height:32px; border-radius:4px; border:2px solid #3D3D3D; background:#252525; }
.ams-slot.a1 { border-color:#00AE42; background:#00AE42; }
.ams-slot.a2 { border-color:#00AE42; background:#FF9800; }
.ams-slot.a3 { border-color:#00AE42; background:#2196F3; }
.ams-label { font-size:12px; color:#9A9A9A; }
.status-badge { background:#00AE42; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:4px; margin-left:auto; }
</style></head>
<body>
<nav>
<p class="brand">Bambu Lab</p>
<div class="navlinks"><span class="active">Printers</span><span>AMS</span><span>Filament</span><span>Makerworld</span></div>
<div class="search-bar">🔍 Search printers</div>
</nav>
<div class="main">
<div class="left-col">
<span class="eyebrow">X1 Carbon Series</span>
<h1>X1C 3D Printer</h1>
<p>Multi-material printing with automatic calibration, LiDAR-assisted first-layer inspection, and enclosed chamber heating for high-temperature engineering filaments.</p>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compare Models</button>
</div>
</div>
<div class="right-col"><div class="printer"></div></div>
</div>
<div class="spec-strip">
<div class="spec-item"><b>256³mm</b><span>Build Volume</span></div>
<div class="spec-item"><b>0.05mm</b><span>Layer Resolution</span></div>
<div class="spec-item"><b>500mm/s</b><span>Print Speed</span></div>
</div>
<div class="ams">
<div class="ams-grid">
<div class="ams-slot a1"></div>
<div class="ams-slot a2"></div>
<div class="ams-slot a3"></div>
<div class="ams-slot"></div>
</div>
<span class="ams-label">AMS · 3 of 4 slots loaded</span>
<span class="status-badge">In Stock</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000033;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000033;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #000033; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; margin: 0; color: #6699cc; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; background: #0000cc; color: #ffffff;
border: none; border-radius: 2px; padding: 6px 14px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; background: #eeeeee; color: #000033;
border: 1px solid #0000cc; border-radius: 2px;
padding: 5px 13px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #000033;
border: 1px solid #bfbfcc; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6699cc; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #eeeeee; color: #000033;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#000033; font-family:sans-serif;
}
*{box-sizing:border-box;}
.nav{height:36px;background:#000033;display:flex;align-items:center;gap:20px;padding:0 20px;}
.logo{color:#fff;font-weight:700;font-size:13px;}
.navlinks{display:flex;gap:16px;font-size:12px;font-weight:700;color:#fff;}
.navlinks span.active{color:#75be55;}
.subnav{height:24px;background:#d1dfed;display:flex;align-items:center;gap:16px;padding:0 20px;font-size:11px;font-weight:700;text-transform:uppercase;color:#0000cc;}
.section{padding:16px 20px;display:flex;gap:14px;}
.sidebar{width:150px;background:#eeeeee;border-right:1px solid #d1dfed;padding:10px;font-size:12px;}
.sidebar .h{font-weight:700;margin-bottom:8px;}
.sidebar div.link{color:#0000cc;padding:3px 0;}
.sidebar div.link.active{color:#116600;font-weight:700;}
.main{flex:1;}
.title{background:#000033;color:#fff;font-size:14px;font-weight:700;padding:6px 12px;margin-bottom:8px;}
.row{display:flex;font-size:13px;padding:5px 10px;border:1px solid #d1dfed;}
.row.alt{background:#d1dfed;}
.row span{flex:1;}
.lotnum{background:#eeeeee;font-size:11px;font-weight:700;padding:1px 6px;border-radius:2px;}
.cond{background:#eeeeee;font-size:11px;font-weight:700;padding:1px 5px;border:1px solid #d1dfed;border-radius:2px;}
.price{color:#cc0000;font-weight:700;}
.avail{color:#116600;font-weight:700;}
</style>
<div class="nav">
<div class="logo">Dick Keiser</div>
<div class="navlinks"><span class="active">U.S. Stamps</span><span>Worldwide</span><span>Covers</span><span>Revenues</span></div>
</div>
<div class="subnav"><span>Air Mail</span><span>Postcards</span><span>Special Delivery</span></div>
<div class="section">
<div class="sidebar">
<div class="h">Categories</div>
<div class="link active">U.S. Definitives</div>
<div class="link">Commemoratives</div>
<div class="link">Plate Blocks</div>
<div class="link">First Day Covers</div>
</div>
<div class="main">
<div class="title">U.S. Definitives — Lot Listing</div>
<div class="row"><span class="lotnum">LOT 1042</span><span>Scott #632, 2c Washington</span><span class="cond">VF</span><span class="price">$18.00</span><span class="avail">Available</span></div>
<div class="row alt"><span class="lotnum">LOT 1043</span><span>Scott #695, 4c Hoover</span><span class="cond">XF</span><span class="price">$42.00</span><span class="avail" style="color:#cc0000;">Sold</span></div>
<div class="row"><span class="lotnum">LOT 1044</span><span>Scott #C18, Air Mail Special</span><span class="cond">F-VH</span><span class="price">$95.00</span><span class="avail" style="color:#6699cc;">Pending</span></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #231f20; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #231f20;
border: 1px solid #231f20; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #231f20;
border: 1px solid #c8c7c7; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #36ace3; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Lato','Helvetica Neue',Arial,sans-serif; color:#231f20; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#555;}
.cart{position:relative;font-size:13px;font-weight:700;}
.cbadge{position:absolute;top:-8px;right:-14px;width:18px;height:18px;border-radius:9999px;background:#36ace3;color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;}
.hero{height:280px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:0 30px;}
.hero h1{font-size:34px;font-weight:700;letter-spacing:-.5px;margin:0 0 10px;}
.hero p{font-size:15px;color:#444;margin:0 0 20px;}
.cta{display:inline-block;background:#231f20;color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:14px 32px;}
.phones{display:flex;gap:16px;margin-top:20px;}
.phone{width:56px;height:112px;border-radius:14px;background:#efefef;position:relative;}
.phone .notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:20px;height:4px;border-radius:9999px;background:#c8c8c8;}
.rowlabel{padding:0 30px 8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#555;text-align:center;}
.grid{display:flex;gap:0;justify-content:center;padding:0 30px;}
.card{width:150px;text-align:center;padding:0 12px;}
.thumb{height:110px;display:flex;align-items:center;justify-content:center;}
.pt2{width:44px;height:90px;border-radius:12px;}
.ptitle{font-size:16px;font-weight:700;margin-top:6px;}
.pprice{font-size:16px;color:#444;margin-top:2px;}
</style>
<div class="nav">
<div class="logo">Totallee</div>
<div class="navlinks"><div>iPhone</div><div>Samsung</div><div>Accessories</div></div>
<div class="cart">CART<span class="cbadge">2</span></div>
</div>
<div class="hero">
<h1>The Thin Case.</h1>
<p>0.35mm of pure protection — no logo, no bulk, nearly invisible.</p>
<div class="cta">Shop Now</div>
<div class="phones">
<div class="phone"><div class="notch"></div></div>
<div class="phone"><div class="notch"></div></div>
<div class="phone"><div class="notch"></div></div>
</div>
</div>
<div class="rowlabel">Thin Cases</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="pt2" style="background:#231f20"></div></div><div class="ptitle">Thin Case</div><div class="pprice">$29</div></div>
<div class="card"><div class="thumb"><div class="pt2" style="background:#efefef;border:1px solid #dedede"></div></div><div class="ptitle">Clear Case</div><div class="pprice">$29</div></div>
<div class="card"><div class="thumb"><div class="pt2" style="background:#555555"></div></div><div class="ptitle">Wireless Charger</div><div class="pprice">$34</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #545b62; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #004085; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #ffffff; color: #004085;
border: 1px solid #004085; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #383d41;
border: 1px solid #c8c7c7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #545b62; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #155724; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; color:#383d41; }
*{box-sizing:border-box;}
.trust{height:28px;background:#f7f7f7;display:flex;align-items:center;justify-content:center;gap:20px;font-size:11px;font-weight:600;border-bottom:1px solid #dae0e5;}
.tb{padding:2px 10px;border-radius:3px;color:#ffffff;}
.tb1{background:#155724;}
.tb2{background:#0c5460;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dae0e5;}
.logo{font-family:'Big Caslon',Georgia,serif;font-size:20px;font-weight:700;color:#231f20;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#383d41;}
.hero{height:262px;display:flex;align-items:center;padding:0 40px;background:#ffffff;}
.heroText{width:460px;}
.h1{font-family:'Big Caslon',Georgia,serif;font-size:32px;font-weight:700;line-height:1.2;color:#231f20;margin:0 0 14px;}
.sub{font-size:14px;color:#545b62;line-height:1.5;margin:0 0 20px;width:380px;}
.cta{display:inline-flex;align-items:center;justify-content:center;width:180px;height:44px;background:#004085;color:#ffffff;font-size:14px;font-weight:600;border-radius:6px;}
.glass{width:340px;height:200px;position:relative;}
.phone{position:absolute;left:100px;top:14px;width:130px;height:170px;border-radius:16px;background:linear-gradient(160deg,#f7f7f7,#dae0e5);border:2px solid #dae0e5;}
.shine{position:absolute;left:110px;top:24px;width:110px;height:60px;background:linear-gradient(135deg,rgba(255,255,255,0.9),rgba(255,255,255,0));border-radius:10px;}
.sec{padding:24px 40px 0;}
.secTitle{font-size:16px;font-weight:700;color:#231f20;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;border:1px solid #dae0e5;border-radius:6px;padding:12px;position:relative;}
.thumb{height:100px;border-radius:4px;margin-bottom:10px;}
.badge{position:absolute;top:22px;left:22px;font-size:9px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;color:#ffffff;padding:3px 8px;border-radius:3px;}
.bg{background:#155724;}
.ba{background:#856404;}
.pname{font-size:13px;font-weight:600;color:#231f20;margin:0 0 4px;}
.pprice{font-size:14px;font-weight:700;color:#004085;}
</style>
<div class="trust"><span class="tb tb1">Lifetime Warranty</span><span class="tb tb2">Free Shipping</span></div>
<div class="nav">
<div class="logo">Whitestone Dome</div>
<div class="navlinks"><span>Screen Protectors</span><span>Cases</span><span>Compatibility</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Precision glass, heirloom durability.</div>
<div class="sub">Tempered protection engineered like an instrument, not a gadget accessory.</div>
<div class="cta">Find Your Fit</div>
</div>
<div class="glass"><div class="phone"></div><div class="shine"></div></div>
</div>
<div class="sec">
<div class="secTitle">Featured Protection</div>
<div class="grid">
<div class="card"><span class="badge bg">Tempered Glass</span><div class="thumb" style="background:linear-gradient(135deg,#004085,#dae0e5);"></div><div class="pname">Dome Glass Pro Kit</div><div class="pprice">$44.99</div></div>
<div class="card"><span class="badge ba">UV Cure Required</span><div class="thumb" style="background:linear-gradient(135deg,#dae0e5,#004085);"></div><div class="pname">Camera Lens Dome</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f7f7f7,#004085);"></div><div class="pname">Privacy Dome Glass</div><div class="pprice">$39.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0055ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0055ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87adfa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0055ff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0055ff; color: #f5f5f5;
border: 1px solid #276ffd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87adfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0047d6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.display { font-family:"GT Walsheim Medium", "Inter", -apple-system, sans-serif; font-weight:600; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #1c1c1c; }
.brand { font-size:16px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; color:#999999; }
.cta-accent { background:#0099ff; color:#ffffff; border-radius:8px; padding:0 10px; height:28px;
font-size:12px; font-weight:600; display:flex; align-items:center; white-space:nowrap; }
.hero { padding:38px 36px 30px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.hero .eyebrow { font-size:12px; color:#999999; letter-spacing:0.08em; text-transform:uppercase; }
.hero h1 { font-size:46px; font-weight:600; letter-spacing:-1.6px; line-height:1.04; margin:0; max-width:680px; }
.hero h1 em { color:#0099ff; font-style:normal; }
.hero p { font-size:14px; color:#999999; line-height:14px; margin:6px 0 0; max-width:460px; }
.hero-row { display:flex; gap:10px; margin-top:6px; }
.btn-outline { border:1px solid #333333; color:#ffffff; border-radius:8px; padding:0 18px; height:34px;
font-size:13px; font-weight:500; display:flex; align-items:center; }
.btn-accent { background:#0099ff; color:#ffffff; border-radius:8px; padding:0 18px; height:34px;
font-size:13px; font-weight:600; display:flex; align-items:center; }
.mkt { padding:22px 36px 30px; }
.mkt-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.mkt-head .title { font-size:13px; font-weight:600; color:#ffffff; }
.mkt-head .sub { font-size:12px; color:#999999; }
.filters { display:flex; gap:8px; margin-bottom:14px; }
.filter { background:#242424; color:#ffffff; border-radius:8px; padding:0 10px; height:24px; font-size:12px;
font-weight:500; display:flex; align-items:center; }
.filter.tab-off { color:#666666; background:transparent; border:1px solid #242424; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.cat { background:#111111; border:1px solid #1c1c1c; border-radius:20px; padding:16px 14px; height:118px;
display:flex; flex-direction:column; justify-content:space-between; }
.cat .icon { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,#242424,#0099ff33); }
.cat .name { font-size:13px; font-weight:600; }
.cat .count { font-size:12px; color:#999999; }
footer { border-top:1px solid #1c1c1c; padding:12px 36px; display:flex; justify-content:space-between;
align-items:center; font-size:11px; color:#666666; }
</style></head>
<body>
<nav>
<p class="brand">Framer</p>
<div class="navlinks"><span>Product</span><span>Templates</span><span>Marketplace</span><span>Pricing</span></div>
<div class="cta-accent">Sign up</div>
</nav>
<section class="hero">
<span class="eyebrow">Sites, made simple</span>
<h1 class="display">Make the web<br><em>more creative</em></h1>
<p>Design, publish, and host incredible sites — with AI-assisted creation built in.</p>
<div class="hero-row">
<div class="btn-accent">Start building</div>
<div class="btn-outline">Explore templates</div>
</div>
</section>
<section class="mkt">
<div class="mkt-head">
<span class="title">Marketplace / Components</span>
<span class="sub">Community-built, ready to drop in</span>
</div>
<div class="filters">
<div class="filter">Filter ▾</div>
<div class="filter tab-off">Sort</div>
<div class="filter tab-off">Free</div>
<div class="filter tab-off">Pro</div>
</div>
<div class="grid">
<div class="cat"><div class="icon"></div><div><div class="name">Navigation</div><div class="count">128 components</div></div></div>
<div class="cat"><div class="icon"></div><div><div class="name">Sliders</div><div class="count">64 components</div></div></div>
<div class="cat"><div class="icon"></div><div><div class="name">Forms</div><div class="count">211 components</div></div></div>
<div class="cat"><div class="icon"></div><div><div class="name">Effects</div><div class="count">93 components</div></div></div>
</div>
</section>
<footer>
<span>© Framer</span>
<span>Framer · Product · Marketplace · Pricing</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #191919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #191919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #191919; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #40d9f1; color: #191919;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #191919;
border: 1px solid #40d9f1; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #40d9f1; color: #191919;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Lora',Georgia,'Times New Roman',serif; color:#222222; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #eeeeee;font-family:'Montserrat',Helvetica,Arial,sans-serif;}
.logo{font-size:20px;font-weight:700;color:#191919;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:#191919;}
.navlinks .active{border-bottom:2px solid #191919;padding-bottom:20px;}
.hero{height:240px;background:#191919;display:flex;align-items:center;padding:0 44px;}
.herotext{width:56%;}
.herotext h1{font-family:'Montserrat',Helvetica,sans-serif;font-size:32px;font-weight:700;color:#fff;margin:0 0 12px;letter-spacing:-0.4px;}
.herotext p{font-size:15px;color:#dddddd;margin:0 0 18px;max-width:340px;font-family:'Lora',Georgia,serif;}
.cta{display:inline-block;background:#40d9f1;color:#191919;font-family:'Montserrat',Helvetica,sans-serif;font-size:14px;font-weight:600;letter-spacing:0.3px;padding:14px 30px;border-radius:9999px;}
.section{padding:20px 44px 0;}
.seclabel{font-family:'Montserrat',Helvetica,sans-serif;font-size:22px;font-weight:600;color:#191919;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:190px;background:#fff;border:1px solid #eeeeee;border-radius:8px;overflow:hidden;}
.thumb{height:110px;background:#f7f7f7;border-radius:8px 8px 0 0;}
.cardbody{padding:10px 12px 12px;}
.ptitle{font-family:'Montserrat',Helvetica,sans-serif;font-size:15px;font-weight:600;color:#191919;}
.pprice{font-size:15px;color:#222222;margin-top:4px;}
.badge{display:inline-block;background:#40d9f1;color:#191919;font-family:'Montserrat',Helvetica,sans-serif;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 10px;border-radius:9999px;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Saddle Creek</div>
<div class="navlinks"><div class="active">Releases</div><div>Artists</div><div>Merch</div><div>Community</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Records made by a community, not a committee.</h1>
<p>New vinyl drops, limited merch runs, and the artists behind them.</p>
<div class="cta">Shop New Releases</div>
</div>
</div>
<div class="section">
<div class="seclabel">This Week's Drop</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#40d9f1,#191919)"></div><div class="cardbody"><div class="ptitle">Wide Awake, LP</div><div class="pprice">$28.00</div><div class="badge">New</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#191919,#40d9f1)"></div><div class="cardbody"><div class="ptitle">Field Notes, Cassette</div><div class="pprice">$12.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#767676,#40d9f1)"></div><div class="cardbody"><div class="ptitle">Label Tee, Cyan Print</div><div class="pprice">$24.00</div><div class="badge">New</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f1e2; color: #130c0d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f1e2; color: #130c0d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #130c0d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #f3ce00; color: #130c0d;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #130c0d;
border: 1px solid #f3ce00; border-radius: 4px;
padding: 10px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #130c0d;
border: 1px solid #bcb8ad; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f3ce00; color: #130c0d;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f1e2; font-family:'Neue Haas Grotesk Text', Arial, sans-serif; color:#130c0d; }
*{box-sizing:border-box;}
.nav{height:58px;background:#343741;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#f3ce00;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:500;color:#cfcfd4;}
.navlinks span:first-child{color:#fff;}
.btn{height:38px;padding:0 20px;border-radius:4px;background:#f3ce00;color:#130c0d;font-size:12px;font-weight:600;display:flex;align-items:center;}
.hero{height:230px;background:#f5f1e2;display:flex;align-items:center;padding:0 32px;}
.heroText{width:440px;}
.h1{font-size:28px;font-weight:600;line-height:1.2;margin:0 0 10px;}
.sub{font-size:13px;color:#343741;margin:0 0 16px;max-width:340px;}
.ropewrap{width:400px;height:230px;position:relative;}
.ring{position:absolute;border-radius:9999px;box-sizing:border-box;}
.r1{left:130px;top:35px;width:170px;height:170px;border:14px solid #130c0d;}
.r2{left:150px;top:55px;width:130px;height:130px;border:10px solid #f3ce00;}
.r3{left:170px;top:75px;width:90px;height:90px;border:8px solid #343741;}
.sec{padding:18px 32px;}
.sectitle{font-size:15px;font-weight:600;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:216px;background:#ffffff;border-radius:8px;padding:12px;}
.thumb{height:86px;border-radius:4px;margin-bottom:10px;position:relative;}
.carabiner{position:absolute;left:34%;top:20%;width:40%;height:60%;border:6px solid #130c0d;border-radius:20px 20px 20px 4px;}
.ptitle{font-size:13px;font-weight:600;margin-bottom:4px;}
.pprice{font-size:14px;font-weight:700;}
.footer{height:36px;background:#343741;color:#cfcfd4;font-size:11px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
</style>
<div class="nav">
<div class="logo">Sterling Rope</div>
<div class="navlinks"><span>Ropes</span><span>Hardware</span><span>Slings</span><span>Rescue</span></div>
<div class="btn">Find a Dealer</div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Every element has<br>a job. Nothing ornamental.</div>
<div class="sub">Climbing ropes and hardware built with the same functional urgency as a rescue whistle.</div>
<div class="btn" style="display:inline-flex;">Shop Ropes</div>
</div>
<div class="ropewrap"><div class="ring r1"></div><div class="ring r2"></div><div class="ring r3"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#130c0d"><div class="carabiner"></div></div><div class="ptitle">Evolution 9.8mm Rope</div><div class="pprice">$219.95</div></div>
<div class="card"><div class="thumb" style="background:#343741"><div class="carabiner"></div></div><div class="ptitle">Fusion Nano IX 9mm</div><div class="pprice">$249.95</div></div>
<div class="card"><div class="thumb" style="background:#f3ce00"></div><div class="ptitle">Nylon Runner Sling 60cm</div><div class="pprice">$9.95</div></div>
<div class="card"><div class="thumb" style="background:#757575"></div><div class="ptitle">Rope Bag & Tarp</div><div class="pprice">$59.95</div></div>
</div>
</div>
<div class="footer"><span>© Built for the Vertical World</span><span>Warranty Dealer Locator</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f3f3; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f3f3; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #2d8fce; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #f3f3f3; color: #2d8fce;
border: 1px solid #2d8fce; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #bbbbbb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #2d8fce; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f3f3f3; color:#121212; box-sizing:border-box;
font-family:'Assistant','Cabin',-apple-system,system-ui,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid #e8e8e8; }
.brand { font-family:'Cabin','Assistant',sans-serif; font-size:19px; font-weight:700; color:#2d8fce; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; color:#666; }
.navlinks span.on { color:#2d8fce; border-bottom:2px solid #2d8fce; padding-bottom:18px; }
.search { background:#fff; border:1px solid #dedede; border-radius:999px; padding:6px 16px; font-size:12px; color:#999; }
main { display:grid; grid-template-columns:380px 1fr; height:calc(640px - 60px); gap:0; }
.stage { padding:24px; display:flex; gap:14px; }
.cover { flex:1; border-radius:12px; position:relative; overflow:hidden;
background:linear-gradient(160deg,#2d8fce 0%,#334fb4 100%); box-shadow:0 8px 20px rgba(0,0,0,0.12); }
.cover::before { content:''; position:absolute; left:14px; top:14px; right:14px; bottom:60px; border-radius:8px;
background:linear-gradient(200deg,rgba(255,255,255,0.22),rgba(255,255,255,0.02) 60%); }
.cover .spine { position:absolute; left:0; top:0; bottom:0; width:16px; background:rgba(0,0,0,0.18); }
.cover .label { position:absolute; left:26px; bottom:16px; right:16px; color:#fff; font-family:'Cabin',sans-serif; font-weight:700; font-size:15px; line-height:1.2; }
.thumbcol { display:flex; flex-direction:column; gap:8px; width:56px; }
.thumb { flex:1; border-radius:8px; background:#fff; border:1px solid #e8e8e8; }
.info { padding:24px 30px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.badges { display:flex; gap:6px; }
.badge-preorder { background:#2d8fce; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.badge-exclusive { background:#334fb4; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
h1 { margin:0; font-family:'Cabin','Assistant',sans-serif; font-size:24px; font-weight:600; line-height:1.25; }
.rating { display:flex; align-items:center; gap:8px; font-size:13px; color:#666; }
.stars { color:#2d8fce; font-size:16px; letter-spacing:1px; }
.price { font-size:20px; font-weight:600; }
.desc { font-size:14px; color:#333; line-height:1.55; }
.fmt-row { display:flex; gap:10px; }
.fmt { border:1px solid #dedede; border-radius:8px; padding:8px 14px; font-size:14px; font-weight:600; background:#fff; }
.fmt.on { border:2px solid #2d8fce; color:#2d8fce; }
.qty-row { display:flex; align-items:center; gap:12px; margin-top:auto; }
.qty { display:flex; align-items:center; border:1px solid #dedede; border-radius:8px; overflow:hidden; }
.qty span { width:32px; height:40px; display:flex; align-items:center; justify-content:center; font-size:14px; }
.qty .n { border-left:1px solid #dedede; border-right:1px solid #dedede; }
.btn-primary { flex:1; height:48px; background:#2d8fce; color:#fff; border:none; border-radius:8px; font-size:16px; font-weight:600; }
.rel { display:flex; gap:8px; }
.rel div { flex:1; height:44px; background:#fff; border:1px solid #e8e8e8; border-radius:8px; }
</style></head>
<body>
<nav>
<p class="brand">All The Anime</p>
<div class="navlinks"><span class="on">Blu-ray</span><span>Art Books</span><span>Figures</span><span>Pre-orders</span></div>
<span class="search">Search collection...</span>
</nav>
<main>
<div class="stage">
<div class="cover"><div class="spine"></div><div class="label">Collector's Edition Steelbook</div></div>
<div class="thumbcol"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<div class="badges"><span class="badge-preorder">Pre-order</span><span class="badge-exclusive">Exclusive</span></div>
<h1>Nebula Drifters: Complete Series Blu-ray</h1>
<div class="rating"><span class="stars">★★★★★</span> 4.9 · 318 reviews · Sold by All The Anime</div>
<div class="price">$64.99</div>
<p class="desc">The full 24-episode series plus 40 minutes of unaired footage, in a rigid steelbook case with double-sided art. Ships day-and-date with theatrical release.</p>
<div class="fmt-row">
<span class="fmt on">Blu-ray</span><span class="fmt">Blu-ray + Art Book</span>
</div>
<div class="qty-row">
<div class="qty"><span>−</span><span class="n">1</span><span>+</span></div>
<button class="btn-primary">Add to Cart</button>
</div>
<div class="rel"><div></div><div></div><div></div><div></div></div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfaf6; color: #35312e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfaf6; color: #35312e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; font-weight: 400; line-height: 1.24; margin: 0; color: #35312e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #60605e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 1px; background: #35312e; color: #fcfaf6;
border: none; border-radius: 4px; padding: 20px 40px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 1px; background: #f7f3eb; color: #35312e;
border: 1px solid #d37556; border-radius: 4px;
padding: 16px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fcfaf6; color: #35312e;
border: 1px solid #cac8c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #60605e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 400; line-height: 1.2; letter-spacing: 1.2px; background: #d37556; color: #fcfaf6;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fcfaf6; font-family:Georgia,'Times New Roman',serif; color:#35312e; }
*{box-sizing:border-box;}
.announce{height:28px;background:#35312e;color:#fcfaf6;display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif;font-size:10px;letter-spacing:1px;text-transform:uppercase;}
.nav{height:60px;background:#fcfaf6;border-bottom:1px solid #ebe5d4;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:400;letter-spacing:0.3px;}
.navlinks{display:flex;gap:22px;font-family:Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;color:#35312e;}
.hero{padding:26px 36px 0;text-align:center;}
.hero h1{font-size:38px;font-weight:300;margin:0 0 10px;}
.hero p{font-family:Arial,sans-serif;font-size:13px;color:#4f463f;margin:0 0 16px;}
.cta{display:inline-block;background:#35312e;color:#fcfaf6;font-family:Arial,sans-serif;font-size:12px;font-weight:400;letter-spacing:1px;text-transform:uppercase;padding:14px 30px;}
.grid{display:flex;justify-content:center;gap:24px;padding:18px 36px 0;}
.card{width:150px;text-align:center;}
.thumb{height:120px;background:#f7f3eb;border-radius:0;margin-bottom:8px;}
.ptitle{font-size:16px;font-weight:400;}
.pprice{font-family:Arial,sans-serif;font-size:13px;color:#4f463f;margin:2px 0 8px;}
.dots{display:flex;justify-content:center;gap:6px;}
.dot{width:16px;height:16px;border-radius:9999px;}
.dotsel{outline:1px solid #35312e;outline-offset:3px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#5d2020;color:#fbf9f5;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-family:Arial,sans-serif;font-size:11px;}
.footer span{margin-left:16px;color:#ede5da;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">Free Shipping on Orders $95+</div>
<div class="nav">
<div class="logo">Our Place</div>
<div class="navlinks"><div>Shop</div><div>Our Story</div><div>Recipes</div></div>
</div>
<div class="hero">
<h1>Welcome to Our Place</h1>
<p>Cookware built for the table, in finishes named like a pantry list.</p>
<div class="cta">Shop the Always Pan</div>
</div>
<div class="grid">
<div class="card">
<div class="thumb" style="background:linear-gradient(160deg,#d37556,#af5d3e)"></div>
<div class="ptitle">The Always Pan</div>
<div class="pprice">$150</div>
<div class="dots"><div class="dot dotsel" style="background:#d37556"></div><div class="dot" style="background:#7d836e"></div><div class="dot" style="background:#748ea1"></div></div>
</div>
<div class="card">
<div class="thumb" style="background:linear-gradient(160deg,#7d836e,#35312e)"></div>
<div class="ptitle">The Perfect Pot</div>
<div class="pprice">$145</div>
<div class="dots"><div class="dot" style="background:#d37556"></div><div class="dot dotsel" style="background:#7d836e"></div><div class="dot" style="background:#e4d3be"></div></div>
</div>
<div class="card">
<div class="thumb" style="background:linear-gradient(160deg,#e4d3be,#748ea1)"></div>
<div class="ptitle">The Wonder Oven</div>
<div class="pprice">$195</div>
<div class="dots"><div class="dot" style="background:#e4d3be"></div><div class="dot dotsel" style="background:#748ea1"></div><div class="dot" style="background:#35312e"></div></div>
</div>
</div>
<div class="footer"><span>© Gather at the Table</span><span>Sustainability<span> Recipes<span> Support</span></span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2f7bbf;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2f7bbf;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #2f7bbf; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #0051c3; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #0051c3;
border: 1px solid #0051c3; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cbdeef; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #f5f5f5; color: #404040;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>iWalk</title>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:#404040;}
*{box-sizing:border-box;}
.promo{position:absolute;top:0;left:0;width:960px;height:30px;background:#0051c3;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;}
.nav{position:absolute;top:30px;left:0;width:960px;height:60px;background:#fff;border-bottom:1px solid #ebebeb;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-weight:700;font-size:18px;color:#313131;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;}
.navlinks span.active{color:#0051c3;border-bottom:2px solid #0051c3;padding-bottom:19px;}
.hero{position:absolute;top:90px;left:0;width:960px;height:230px;background:#1a1a1a;display:flex;align-items:center;padding:0 44px;}
.hero h1{color:#fff;font-size:34px;font-weight:700;margin:0 0 14px 0;width:420px;line-height:1.15;}
.cta{background:#0051c3;color:#fff;font-size:15px;font-weight:600;border-radius:4px;padding:12px 24px;display:inline-block;}
.powerbank{position:absolute;right:100px;top:60px;width:200px;height:110px;border-radius:12px;background:linear-gradient(160deg,#2f7bbf,#003681);}
.powerbank::after{content:'';position:absolute;top:40px;left:20px;width:60px;height:30px;border-radius:4px;background:#f68b1f;}
.specrow{position:absolute;top:340px;left:32px;width:896px;height:36px;display:flex;gap:10px;}
.specbadge{background:#f5f5f5;color:#404040;font-size:12px;font-weight:600;border-radius:4px;padding:8px 14px;}
.specbadge.hi{background:#0051c3;color:#fff;}
.grid{position:absolute;top:394px;left:32px;width:896px;height:216px;display:flex;gap:16px;}
.card{width:212px;background:#fff;border:1px solid #ebebeb;border-radius:8px;padding:16px;position:relative;}
.imgbox{width:180px;height:90px;background:#f5f5f5;border-radius:4px;margin-bottom:10px;}
.imgbox.a{background:linear-gradient(135deg,#2f7bbf,#003681);}
.imgbox.b{background:linear-gradient(135deg,#9bca3e,#7aa82f);}
.imgbox.c{background:linear-gradient(135deg,#f68b1f,#ee730a);}
.imgbox.d{background:linear-gradient(135deg,#003681,#0051c3);}
.comp{display:inline-block;background:#9bca3e;color:#fff;font-size:10px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;border-radius:9999px;padding:3px 10px;margin-bottom:8px;}
.title{font-size:16px;font-weight:600;color:#313131;margin-bottom:6px;}
.price{font-size:20px;font-weight:700;color:#313131;}
</style>
<div class="promo">FREE SHIPPING ON ORDERS OVER $35</div>
<div class="nav">
<div class="logo">Iwalk</div>
<div class="navlinks"><span class="active">Power Banks</span><span>Cables</span><span>Accessories</span></div>
</div>
<div class="hero">
<h1>Never run out of charge.</h1>
<div class="cta">Shop Power Banks</div>
<div class="powerbank"></div>
</div>
<div class="specrow">
<div class="specbadge hi">45W Fast Charge</div>
<div class="specbadge">5000mAh</div>
<div class="specbadge">USB-C PD</div>
<div class="specbadge">MagSafe</div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox a"></div>
<div class="comp">iPhone 15</div>
<div class="title">LinkPod Pro MagSafe</div>
<div class="price">$49.99</div>
</div>
<div class="card">
<div class="imgbox b"></div>
<div class="comp">USB-C Laptops</div>
<div class="title">PowerCore 20000</div>
<div class="price">$59.99</div>
</div>
<div class="card">
<div class="imgbox c"></div>
<div class="comp">Galaxy S24</div>
<div class="title">FastLink Braided Cable</div>
<div class="price">$14.99</div>
</div>
<div class="card">
<div class="imgbox d"></div>
<div class="comp">USB-C Laptops</div>
<div class="title">GaN 65W Duo Charger</div>
<div class="price">$39.99</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f2f2f2; color: #1b2121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f2f2f2; color: #1b2121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: 0.02px; margin: 0; color: #1b2121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #e6ef00; color: #1b2121;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f2f2f2; color: #1b2121;
border: 1px solid #e6ef00; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f2f2f2; color: #1b2121;
border: 1px solid #bcbebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #e6ef00; color: #1b2121;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f2f2f2; font-family:'Ordinary-Text','Open Sans',-apple-system,BlinkMacSystemFont,sans-serif; color:#444444; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#f2f2f2;border-bottom:1px solid #e5e5e5;}
.logo{font-family:'Ordinary-Display','VictorSerif',Georgia,serif;font-size:22px;color:#1b2121;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;color:#1b2121;}
.navlinks .active{border-bottom:2px solid #e6ef00;padding-bottom:20px;}
.hero{height:240px;display:flex;align-items:center;padding:0 44px;background:#f2f3f2;}
.herotext{width:52%;}
.herotext h1{font-family:'Ordinary-Display','VictorSerif',Georgia,serif;font-size:34px;font-weight:400;color:#1b2121;margin:0 0 14px;letter-spacing:-0.3px;}
.herotext p{font-size:14px;color:#444444;margin:0 0 18px;max-width:300px;}
.cta{display:inline-block;background:#e6ef00;color:#1b2121;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:14px 26px;border-radius:8px;}
.heroshape{width:40%;height:170px;border-radius:12px;background:radial-gradient(circle at 40% 40%,#d0af91,#91889d 80%);}
.section{padding:20px 44px 0;}
.seclabel{font-family:'Ordinary-Display','VictorSerif',Georgia,serif;font-size:24px;color:#1b2121;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:190px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.04);}
.thumb{height:105px;background:#f2f3f2;border-radius:12px 12px 0 0;}
.cardbody{padding:10px 12px 12px;}
.ptitle{font-size:16px;font-weight:500;color:#1b2121;}
.pprice{font-size:14px;color:#444444;margin-top:4px;}
.swatchrow{display:flex;gap:6px;margin-top:8px;}
.swatch{width:18px;height:18px;border-radius:9999px;border:1px solid #dedede;}
.badge{display:inline-block;background:#e6ef00;color:#1b2121;font-size:10px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;padding:2px 8px;border-radius:4px;margin-bottom:6px;}
</style>
<div class="nav">
<div class="logo">Saie</div>
<div class="navlinks"><div class="active">Face</div><div>Eyes</div><div>Lips</div><div>Bestsellers</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Skin-first makeup, no filter needed.</h1>
<p>Clean formulas that feel like skincare, in shades that actually match.</p>
<div class="cta">Shop Bestsellers</div>
</div>
<div class="heroshape"></div>
</div>
<div class="section">
<div class="seclabel">Bestsellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d0af91,#f2f3f2)"></div><div class="cardbody"><div class="badge">New</div><div class="ptitle">Dew Blush, Cream</div><div class="pprice">$22.00</div><div class="swatchrow"><div class="swatch" style="background:#d0af91"></div><div class="swatch" style="background:#c79f7c"></div><div class="swatch" style="background:#9387a0"></div></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#91889d,#f2f2f2)"></div><div class="cardbody"><div class="ptitle">Sunvisor Serum SPF 35</div><div class="pprice">$34.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8f7a64,#efe0c1)"></div><div class="cardbody"><div class="ptitle">Featherweight Concealer</div><div class="pprice">$24.00</div><div class="swatchrow"><div class="swatch" style="background:#d7d3cf"></div><div class="swatch" style="background:#a9a096"></div><div class="swatch" style="background:#8f7a64"></div></div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #75767e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #16c793; color: #000000;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #16c793; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #75767e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 1.2px; background: #dff3e7; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Bio Sans',Arial,sans-serif; color:#2b2b2b; }
*{box-sizing:border-box;}
.nav{height:60px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'LibreBaskerville',Georgia,serif;font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#dedede;}
.hero{height:210px;display:flex;align-items:center;padding:0 32px;gap:34px;border-bottom:1px solid #dedede;}
.herotext{width:400px;}
h1{font-family:'LibreBaskerville',Georgia,serif;font-size:32px;font-weight:700;color:#121212;margin:0 0 12px;line-height:1.2;}
.sub{font-size:14px;color:#4d4e55;line-height:1.55;margin:0 0 16px;width:360px;}
.cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 26px;background:#16c793;color:#fff;font-size:14px;font-weight:600;}
.wiregrid{width:220px;height:160px;position:relative;background:
repeating-linear-gradient(0deg,#4d4e55 0 2px,transparent 2px 22px),
repeating-linear-gradient(90deg,#4d4e55 0 2px,transparent 2px 22px);
border:2px solid #4d4e55;}
.instock{position:absolute;left:-8px;top:-8px;background:#16c793;color:#fff;font-size:9px;font-weight:700;padding:3px 8px;text-transform:uppercase;letter-spacing:.4px;}
.section{padding:0 32px;}
.sectitle{font-family:'LibreBaskerville',Georgia,serif;font-size:20px;font-weight:700;color:#121212;margin:16px 0 14px;}
.grid{display:flex;gap:14px;}
.card{width:210px;border:1px solid #dedede;padding:12px;position:relative;}
.thumb{height:110px;margin-bottom:10px;background:#f5f5f5;border:1px solid #dedede;}
.tag{position:absolute;top:8px;left:8px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:3px 7px;background:#dff3e7;color:#0fa878;}
.tag.err{background:#f6d9d6;color:#c33b31;}
.ptitle{font-size:13px;font-weight:600;color:#121212;line-height:1.3;height:32px;overflow:hidden;}
.pprice{font-size:14px;font-weight:600;color:#121212;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Yamazaki Home Desk Acc 2</div>
<div class="navlinks"><div>Desk</div><div>Cable Mgmt</div><div>Trays</div><div>Lighting</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Every wire, in its lane.</h1>
<div class="sub">Steel-wire desk organizers built for the logic of a workspace, not the aspiration of one.</div>
<div class="cta">Shop Desk Accessories</div>
</div>
<div class="wiregrid"><div class="instock">In Stock</div></div>
</div>
<div class="section">
<div class="sectitle">Desk Organizers</div>
<div class="grid">
<div class="card"><span class="tag">New</span><div class="thumb"></div><div class="ptitle">Wire Pen Stand</div><div class="pprice">$16.00</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Cable Box Organizer</div><div class="pprice">$24.00</div></div>
<div class="card"><span class="tag err">Sale</span><div class="thumb"></div><div class="ptitle">Monitor Riser Tray</div><div class="pprice">$32.00</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Steel Document Rack</div><div class="pprice">$28.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f9f9; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f9f9; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #1561a8; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #f8f9f9; color: #1561a8;
border: 1px solid #1561a8; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f8f9f9; color: #111111;
border: 1px solid #bebfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #34e2e4; color: #111111;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f9f9; color:#111111; box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; border-bottom:1px solid #d6d6d6; }
.brand { font-size:18px; font-weight:700; margin:0; color:#1561a8; }
.navlinks { display:flex; gap:20px; font-size:15px; font-weight:600; }
.navlinks .active { color:#1561a8; border-bottom:2px solid #1561a8; padding-bottom:20px; margin-bottom:-21px; }
.search { width:170px; height:32px; border-radius:999px; border:1px solid #d6d6d6; background:#fff; }
main { flex:1 1 auto; display:flex; flex-direction:column; padding:18px 30px; min-height:0; }
.hero { flex:0 0 auto; background:#111111; color:#f8f9f9; padding:18px 24px; border-radius:4px; margin-bottom:16px;
display:flex; align-items:center; justify-content:space-between; }
.hero h1 { font-size:26px; font-weight:700; margin:0 0 4px; }
.hero p { font-size:13px; color:#777777; margin:0; }
.hero button { background:#1561a8; color:#fff; border:none; border-radius:8px; padding:11px 22px; font-size:14px; font-weight:600; }
.grid { flex:1 1 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; min-height:0; }
.card { background:#ffffff; border:1px solid #e9e9e9; border-radius:8px; padding:12px; display:flex; flex-direction:column; gap:6px; }
.poster { flex:1; border-radius:4px; min-height:0; position:relative; }
.poster::after { content:''; position:absolute; top:6px; left:6px; background:#34e2e4; color:#111; font-size:10px;
font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:2px 6px; }
.p1 { background:linear-gradient(170deg,#003388,#1561a8 130%); }
.p2 { background:linear-gradient(170deg,#4721fb,#111 130%); }
.p3 { background:linear-gradient(170deg,#006ba1,#003388 130%); }
.p4 { background:linear-gradient(170deg,#111,#444 130%); }
.card h3 { font-size:14px; font-weight:600; margin:0; }
.card .meta { font-size:12px; color:#444444; margin:0; }
.card .price { font-size:14px; font-weight:700; margin:2px 0 0; }
footer { flex:0 0 auto; height:52px; background:#111111; color:#f8f9f9; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; }
footer .links { color:#777777; display:flex; gap:16px; }
</style></head>
<body>
<nav>
<p class="brand">Arbelos Films</p>
<div class="navlinks"><span class="active">Catalog</span><span>New Restorations</span><span>Directors</span></div>
<div class="search"></div>
</nav>
<main>
<div class="hero">
<div>
<h1>Restored in 4K, Preserved Forever</h1>
<p>A film library curated as text worth studying.</p>
</div>
<button>Pre-order</button>
</div>
<div class="grid">
<div class="card"><div class="poster p1"></div><h3>The Salt Line</h3><p class="meta">Dir. R. Halvorsen, 1974</p><p class="price">$19.99</p></div>
<div class="card"><div class="poster p2"></div><h3>Nightgarden</h3><p class="meta">Dir. E. Marchetti, 1989</p><p class="price">$24.99</p></div>
<div class="card"><div class="poster p3"></div><h3>Low Tide City</h3><p class="meta">Dir. J. Okafor, 1996</p><p class="price">$18.50</p></div>
<div class="card"><div class="poster p4"></div><h3>A Quiet Ledger</h3><p class="meta">Dir. S. Vance, 1982</p><p class="price">$21.00</p></div>
</div>
</main>
<footer>
<span>© Arbelos Films</span>
<div class="links"><span>Newsletter</span><span>Press</span><span>Contact</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #6d6d6d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #00b2a9; color: #ffffff;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: transparent; color: #00b2a9;
border: 1px solid #00b2a9; border-radius: 12px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #141414;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d6d6d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #126072; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#141414; box-sizing:border-box;
font-family:'ITC Avant Garde Gothic','Avant Garde',Montserrat,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#ffffff; border-bottom:1px solid #dde0e3; }
.brand { font-size:19px; font-weight:700; color:#00b2a9; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#364151; font-weight:600; }
.cart { background:#00b2a9; color:#fff; font-size:12px; font-weight:700; padding:7px 14px; border-radius:9999px; }
main { display:flex; height:576px; }
.gallery { width:400px; background:linear-gradient(180deg,#f4f9f9 0%,#bee6e3 100%); position:relative;
display:flex; align-items:center; justify-content:center; }
.tower { width:110px; height:230px; background:linear-gradient(180deg,#ffffff,#e8f4f4); border-radius:16px;
position:relative; box-shadow:0 20px 40px rgba(18,96,114,0.2); }
.tower::before { content:''; position:absolute; top:16px; left:16px; right:16px; bottom:16px;
border:2px solid #00a4a1; border-radius:10px; opacity:0.5; }
.tower .ring { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); width:56px; height:56px;
border-radius:50%; border:6px solid #00b2a9; }
.airflow { position:absolute; top:60px; width:150px; height:150px; border-radius:50%;
background:radial-gradient(circle, rgba(0,178,169,0.15), transparent 70%); }
.badge-clean { position:absolute; top:22px; left:22px; background:#126072; color:#fff; font-size:10px;
font-weight:700; padding:5px 12px; border-radius:9999px; }
.info { flex:1; padding:30px 38px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#6d6d6d; }
h1 { font-size:22px; font-weight:700; margin:0; line-height:1.3; }
.stars { font-size:12px; color:#f3712a; }
.stars .n { color:#6d6d6d; margin-left:6px; font-size:11.5px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:21px; font-weight:700; }
.desc { font-size:13.5px; color:#364151; line-height:1.55; max-width:340px; }
.feat-row { display:flex; gap:8px; flex-wrap:wrap; }
.feat { background:#f6f6f6; border-radius:8px; padding:6px 12px; font-size:11.5px; font-weight:600; color:#364151; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#00b2a9; color:#fff; border:none; border-radius:8px; padding:13px 18px;
font-size:14px; font-weight:700; }
.btn-outline { border:1.5px solid #00b2a9; color:#00b2a9; background:#fff; border-radius:8px; padding:11.5px 16px;
font-size:12.5px; font-weight:700; white-space:nowrap; }
.meta { font-size:11px; color:#6d6d6d; }
</style></head>
<body>
<nav>
<div class="brand">Alen</div>
<div class="navlinks"><span>Air Purifiers</span><span>Filters</span><span>Room Guide</span><span>Reviews</span></div>
<div class="cart">Cart · 1</div>
</nav>
<main>
<div class="gallery">
<span class="badge-clean">HEPA-Silent</span>
<div class="airflow"></div>
<div class="tower"><div class="ring"></div></div>
</div>
<div class="info">
<span class="cat">Air Purifier · Large Room</span>
<h1>Alen BreatheSmart 75i HEPA Purifier</h1>
<div class="stars">★★★★★ <span class="n">4.7 · 3,340 reviews</span></div>
<div class="price-row"><span class="price">$599.00</span></div>
<p class="desc">Covers up to 1,300 sq ft with true HEPA filtration — whisper-quiet operation and swappable filter styles.</p>
<div class="feat-row">
<span class="feat">1,300 sq ft coverage</span>
<span class="feat">Auto Mode Sensor</span>
<span class="feat">Lifetime Warranty</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">Build Your Filter</button>
</div>
<span class="meta">Free shipping · 30-day trial</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #272725;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #272725;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #272725; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #676767; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; background: #272725; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; background: #ffffff; color: #272725;
border: 1px solid #272725; border-radius: 4px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #272725;
border: 1px solid #c9c9c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676767; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.8px; background: #272725; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial, 'Helvetica Neue', sans-serif; color:#272725; }
*{box-sizing:border-box;}
.nav{height:56px;background:#ffffff;border-bottom:1px solid #e3e3e3;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:18px;font-weight:700;}
.catlist{display:flex;gap:20px;font-size:13px;font-weight:600;color:#676767;}
.catlist span:first-child{color:#272725;border-bottom:2px solid #272725;padding-bottom:16px;}
.searchbox{width:180px;height:30px;border:1px solid #e3e3e3;border-radius:2px;font-size:11px;color:#676767;display:flex;align-items:center;padding:0 10px;}
.hero{height:200px;background:#f5f5f5;display:flex;align-items:center;padding:0 30px;}
.heroText{width:440px;}
.h1{font-size:24px;font-weight:700;line-height:1.3;margin:0 0 8px;}
.sub{font-size:13px;color:#555555;margin:0 0 14px;max-width:360px;}
.btn{height:38px;padding:0 20px;border-radius:2px;display:flex;align-items:center;font-size:12px;font-weight:700;}
.btnDark{background:#272725;color:#fff;}
.alertbadge{position:absolute;top:14px;right:210px;background:#b85455;color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:2px;}
.chairbig{width:400px;height:200px;position:relative;}
.cb{position:absolute;left:150px;top:10px;width:100px;height:110px;border-radius:14px 14px 4px 4px;background:#272725;}
.cs{position:absolute;left:160px;top:120px;width:80px;height:20px;border-radius:4px;background:#080808;}
.cl{position:absolute;left:190px;top:140px;width:8px;height:40px;background:#555555;}
.sec{padding:16px 30px;}
.sectitle{font-size:14px;font-weight:700;margin-bottom:10px;}
.grid{display:flex;gap:12px;}
.card{width:216px;background:#fff;border:1px solid #e3e3e3;border-radius:4px;padding:10px;}
.thumb{height:84px;border-radius:2px;margin-bottom:8px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#b85455;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:2px;}
.ptitle{font-size:13px;font-weight:700;margin-bottom:2px;}
.pprice{font-size:13px;color:#272725;margin-bottom:4px;}
.configlink{font-size:11px;color:#003388;text-decoration:underline;}
</style>
<div class="nav">
<div class="logo">Steelcase Chairs Chairs</div>
<div class="catlist"><span>Seating</span><span>Desks</span><span>Storage</span><span>Accessories</span></div>
<div class="searchbox">Search chairs...</div>
</div>
<div class="hero">
<div class="heroText">
<div class="alertbadge">Limited Stock</div>
<div class="h1">Seating specified<br>before it's purchased.</div>
<div class="sub">Configure fabric, base and arm options before you buy — built for facilities and procurement teams.</div>
<div class="btn btnDark">Configure Fabric</div>
</div>
<div class="chairbig"><div class="cb"></div><div class="cs"></div><div class="cl"></div></div>
</div>
<div class="sec">
<div class="sectitle">Seating Catalog</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#272725"><div class="badge">Alert</div></div><div class="ptitle">Gesture Task Chair</div><div class="pprice">$1,299.00</div><div class="configlink">Configure Fabric ›</div></div>
<div class="card"><div class="thumb" style="background:#555555"></div><div class="ptitle">Leap Ergonomic Chair</div><div class="pprice">$1,049.00</div><div class="configlink">Configure Fabric ›</div></div>
<div class="card"><div class="thumb" style="background:#9d9d9d"></div><div class="ptitle">Amia Guest Chair</div><div class="pprice">$549.00</div><div class="configlink">Configure Fabric ›</div></div>
<div class="card"><div class="thumb" style="background:#676767"></div><div class="ptitle">Series 2 Stool</div><div class="pprice">$425.00</div><div class="configlink">Configure Finish ›</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf9f7; color: #001c0e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf9f7; color: #001c0e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #001c0e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5f7a6d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #001c0e; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #faf9f7; color: #001c0e;
border: 1px solid #001c0e; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #001c0e;
border: 1px solid #bcc2bd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5f7a6d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.33; letter-spacing: 0.1px; background: #3d8c5c; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#faf9f7; color:#2c3e35; font-family:'Inter',-apple-system,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;background:#001c0e;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-size:18px;font-weight:600;}
.navlinks{display:flex;gap:22px;color:#fff;font-size:14px;font-weight:500;}
.hero{background:#001c0e;padding:24px 32px 30px;display:flex;align-items:center;gap:24px;}
.herotext h1{font-family:'Lora',Georgia,serif;font-size:36px;font-weight:700;color:#fff;line-height:1.1;margin:0 0 10px;max-width:420px;}
.herotext p{font-size:15px;color:#c9d6cf;margin:0 0 16px;max-width:400px;}
.cta{display:inline-block;background:#fff;color:#001c0e;font-size:14px;font-weight:600;padding:14px 28px;border-radius:8px;}
.lawnring{margin-left:auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#3d8c5c,#001c0e 85%);flex-shrink:0;}
.plancard{margin:18px 32px 0;background:#fff;border:2px solid #3d8c5c;border-radius:12px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;}
.plancard .name{font-size:16px;font-weight:600;color:#001c0e;}
.plancard .badge{background:#3d8c5c;color:#fff;font-size:12px;font-weight:600;border-radius:9999px;padding:4px 12px;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:200px;background:#fff;border-radius:12px;border:1px solid #e8edea;padding:12px;}
.thumb{aspect-ratio:1/1;height:100px;border-radius:8px;margin-bottom:8px;}
.ptitle{font-size:15px;font-weight:600;color:#001c0e;margin:0 0 2px;}
.pprice{font-size:14px;color:#5f7a6d;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#001c0e;color:#c9d6cf;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Sunday</div>
<div class="navlinks"><span>Take the Soil Quiz</span><span>Shop</span><span>How It Works</span></div>
</div>
<div class="hero">
<div class="herotext"><h1>A custom nutrient plan for your lawn.</h1><p>Soil-test-driven care that replaces dozens of hardware-store trips.</p><div class="cta">Start Your Lawn Plan</div></div>
<div class="lawnring"></div>
</div>
<div class="plancard"><div class="name">Your Fall Nutrient Plan</div><span class="badge">Active</span></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3d8c5c,#001c0e)"></div><div class="ptitle">Fall Nutrient Pouch</div><div class="pprice">$29.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#5f7a6d,#001c0e)"></div><div class="ptitle">Grub & Pest Control</div><div class="pprice">$34.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8fa89a,#001c0e)"></div><div class="ptitle">Soil Test Kit</div><div class="pprice">$19.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#001c0e,#3d8c5c)"></div><div class="ptitle">Overseed Blend</div><div class="pprice">$42.00</div></div>
</div>
<div class="footer"><span>© Sunday</span><span>How It Works Reviews Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f7; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f7; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #787878; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #202024; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f5f7; color: #202024;
border: 1px solid #202024; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f5f5f7; color: #111111;
border: 1px solid #d1d1d2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787878; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d3d3d5; color: #202024;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F5F5F7; color:#050038; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.board { position:relative; width:960px; height:640px;
background-image: radial-gradient(#D7D7DE 1.6px, transparent 1.6px);
background-size: 26px 26px; }
.topbar { position:absolute; top:0; left:0; right:0; height:48px; display:flex; align-items:center; padding:0 20px; gap:10px; z-index:3; }
.topbar .back { font-size:18px; color:#050038; }
.topbar .brandcrumb { font-size:13px; font-weight:600; color:#6B6B7B; }
.topbar .name { font-size:15px; font-weight:700; }
.topbar .chev { font-size:10px; color:#6B6B7B; }
.topbar .spacer { flex:1; }
.avstack { display:flex; }
.avstack .a { width:26px; height:26px; border-radius:50%; margin-left:-8px; border:2px solid #F5F5F7; }
/* 캔버스 오브젝트들 */
.sticky { position:absolute; width:118px; height:118px; border-radius:4px; box-shadow:0 8px 18px -8px rgba(0,0,0,0.18); display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; font-size:14px; font-weight:600; color:#2A2A33; }
.s1 { top:96px; left:64px; background:#FEF3B6; transform:rotate(-3deg); }
.s2 { top:88px; left:210px; background:#BCE0F5; transform:rotate(2deg); }
.s3 { top:230px; left:64px; background:#F8C8D8; transform:rotate(-1deg); }
.s4 { top:250px; left:210px; background:#C7E8C7; transform:rotate(3deg); }
.selected { position:absolute; top:82px; left:200px; width:142px; height:142px; border:2px solid #4262FF; border-radius:8px; z-index:2; }
.selected .handle { position:absolute; width:9px; height:9px; background:#fff; border:2px solid #4262FF; border-radius:2px; }
.selected .h-tl { top:-5px; left:-5px; } .selected .h-tr { top:-5px; right:-5px; }
.selected .h-bl { bottom:-5px; left:-5px; } .selected .h-br { bottom:-5px; right:-5px; }
.selected .grip { position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); width:32px; height:8px; background:#4262FF; border-radius:4px; }
.frame { position:absolute; top:80px; left:440px; width:280px; height:300px; border:2px dashed #9A9AA4; border-radius:6px; }
.frame .flabel { position:absolute; top:-26px; left:0; font-size:15px; font-weight:700; color:#6B6B7B; }
.frame .shape { position:absolute; top:24px; left:24px; width:100px; height:64px; border:2px solid #050038; border-radius:8px; }
.frame .conn { position:absolute; top:56px; left:124px; width:80px; height:2px; background:#6B6B7B; }
.frame .conn::after { content:'▶'; position:absolute; right:-8px; top:-7px; font-size:10px; color:#6B6B7B; }
.frame .sticky2 { position:absolute; top:130px; left:60px; width:90px; height:90px; background:#DCC9F0; }
.cursor { position:absolute; z-index:5; display:flex; flex-direction:column; align-items:flex-start; }
.cursor .arrow { width:0; height:0; border-left:10px solid #F24822; border-bottom:16px solid transparent; transform:rotate(-8deg); }
.cursor .tag { background:#F24822; color:#fff; font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px; margin-top:-4px; margin-left:10px; white-space:nowrap; }
.cur1 { top:210px; left:520px; }
.toolbar { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); background:#FFFFFF; border:1px solid #E3E3E8; border-radius:16px; padding:8px; display:flex; gap:6px; box-shadow:0 14px 32px -12px rgba(0,0,0,0.22); z-index:4; }
.toolbar .tool { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:17px; color:#6B6B7B; }
.toolbar .tool.active { background:#FFD02F; color:#050038; }
.zoom { position:absolute; bottom:24px; right:22px; background:#FFFFFF; border-radius:12px; box-shadow:0 8px 20px -10px rgba(0,0,0,0.16); display:flex; flex-direction:column; align-items:center; padding:6px 0; width:38px; z-index:4; }
.zoom .z { font-size:16px; padding:6px 0; color:#050038; }
.zoom .pct { font-size:11px; font-weight:600; color:#6B6B7B; padding:2px 0; }
</style></head>
<body>
<div class="board">
<div class="topbar">
<span class="back">‹</span><span class="brandcrumb">Miro (iOS) /</span><span class="name">Sprint Planning</span><span class="chev">▾</span>
<span class="spacer"></span>
<div class="avstack">
<div class="a" style="background:#F24822"></div>
<div class="a" style="background:#14AE5C"></div>
<div class="a" style="background:#9747FF"></div>
</div>
</div>
<div class="sticky s1">Define scope</div>
<div class="sticky s2">API contracts</div>
<div class="sticky s3">QA plan</div>
<div class="sticky s4">Ship it 🚀</div>
<div class="selected">
<div class="handle h-tl"></div><div class="handle h-tr"></div>
<div class="handle h-bl"></div><div class="handle h-br"></div>
<div class="grip"></div>
</div>
<div class="frame">
<div class="flabel">Onboarding flow</div>
<div class="shape"></div>
<div class="conn"></div>
<div class="sticky2"></div>
</div>
<div class="cursor cur1"><div class="arrow"></div><div class="tag">Dana</div></div>
<div class="toolbar">
<div class="tool">↖</div>
<div class="tool active">▤</div>
<div class="tool">✎</div>
<div class="tool">◇</div>
<div class="tool">T</div>
<div class="tool">▭</div>
<div class="tool">💬</div>
<div class="tool">+</div>
</div>
<div class="zoom"><span class="z">+</span><span class="pct">100%</span><span class="z">−</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.1; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6e6e6e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; background: #c73226; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; background: #ffffff; color: #c73226;
border: 1px solid #c73226; border-radius: 8px;
padding: 10px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e6e6e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 800; line-height: 1.2; letter-spacing: 0.5px; background: #c73226; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#3c3c3c; font-family:'Helvetica Neue',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#1a1a1a;}
.logo{font-family:'Arial Narrow',Impact,sans-serif;font-size:26px;font-weight:900;text-transform:uppercase;letter-spacing:-.5px;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#e0e0e0;}
.cart{background:#c73226;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:8px 16px;}
.hero{height:280px;display:flex;align-items:center;padding:0 40px;background:linear-gradient(120deg,#420500,#1a1a1a);position:relative;overflow:hidden;}
.herotext{width:440px;z-index:2;}
.hkicker{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#c73226;margin-bottom:12px;}
.herotext h1{font-family:'Arial Narrow',Impact,sans-serif;font-size:42px;font-weight:900;text-transform:uppercase;letter-spacing:-.5px;color:#fff;margin:0 0 12px;line-height:.95;}
.herotext p{font-size:14px;color:#d8cfcf;margin:0 0 20px;max-width:320px;}
.btn{display:inline-block;height:46px;line-height:46px;padding:0 28px;background:#c73226;color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;width:fit-content;}
.cardstack{position:absolute;right:60px;top:40px;width:130px;height:182px;border-radius:8px;background:linear-gradient(135deg,#c73226,#420500);box-shadow:8px 8px 0 rgba(0,0,0,.3);}
.cardstack2{position:absolute;right:90px;top:60px;width:130px;height:182px;border-radius:8px;background:linear-gradient(135deg,#420500,#1a1a1a);}
.sec{padding:22px 40px 0;}
.chips{display:flex;gap:8px;margin-bottom:16px;}
.chip{background:#f5f5f5;border-radius:9999px;padding:6px 16px;font-size:11px;font-weight:700;text-transform:uppercase;color:#3c3c3c;}
.chip.active{background:#c73226;color:#fff;}
.grid{display:flex;gap:12px;}
.card{width:135px;aspect-ratio:2.5/3.5;border-radius:8px;background:#f5f5f5;position:relative;}
.serial{position:absolute;bottom:6px;right:6px;background:#c73226;color:#fff;font-size:8px;font-weight:700;text-transform:uppercase;padding:2px 5px;border-radius:2px;}
.packlabel{position:absolute;top:6px;left:6px;background:#420500;color:#fff;font-size:8px;font-weight:700;text-transform:uppercase;padding:2px 5px;border-radius:2px;}
</style>
<div class="nav">
<div class="logo">Leaf Trading Cards</div>
<div class="navlinks"><span>New Releases</span><span>Boxes</span><span>Singles</span></div>
<div class="cart">Cart</div>
</div>
<div class="hero">
<div class="herotext">
<div class="hkicker">1/1 Serial Numbered</div>
<h1>Made for the collector who reads the back</h1>
<p>Premium trading cards with visible print runs and serial precision.</p>
<div class="btn">Shop New Releases</div>
</div>
<div class="cardstack2"></div>
<div class="cardstack"></div>
</div>
<div class="sec">
<div class="chips"><div class="chip active">All</div><div class="chip">Baseball</div><div class="chip">Basketball</div><div class="chip">Autographs</div></div>
<div class="grid">
<div class="card" style="background:linear-gradient(135deg,#c73226,#420500)"><div class="packlabel">Hobby</div><div class="serial">1/1</div></div>
<div class="card" style="background:linear-gradient(135deg,#420500,#1a1a1a)"><div class="packlabel">Presale</div><div class="serial">25/99</div></div>
<div class="card" style="background:linear-gradient(135deg,#3c3c3c,#c73226)"><div class="packlabel">Hobby</div><div class="serial">7/25</div></div>
<div class="card" style="background:linear-gradient(135deg,#1a1a1a,#420500)"><div class="packlabel">Auto</div><div class="serial">1/1</div></div>
<div class="card" style="background:linear-gradient(135deg,#420500,#c73226)"><div class="packlabel">Hobby</div><div class="serial">3/10</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1d2eff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1d2eff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #949bfa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1626d9; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1d2eff; color: #ffffff;
border: 1px solid #1626d9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1d2eff; color: #f5f5f5;
border: 1px solid #404efd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949bfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1c2df9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#101130; box-sizing:border-box;
font-family:-apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { position:relative; height:300px; background:#101130; overflow:hidden; }
.glow { position:absolute; width:520px; height:520px; border-radius:50%;
background:radial-gradient(circle, rgba(0,212,255,0.35), rgba(29,46,255,0.25) 45%, transparent 70%);
top:-180px; right:-140px; }
.navrow { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.navrow .brand { color:#fff; font-weight:700; font-size:17px; }
.navrow .links { display:flex; gap:22px; font-size:13px; color:rgba(255,255,255,0.7); }
.navrow .cta { background:#1D2EFF; color:#fff; border-radius:8px; padding:9px 18px; font-size:13px; font-weight:600; }
.herobody { position:relative; z-index:2; padding:22px 32px 0; max-width:600px; }
.herobody .eyebrow { color:#00D4FF; font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:10px; }
.herobody h1 { color:#fff; font-size:38px; font-weight:700; line-height:1.2; margin:0 0 12px; }
.herobody p { color:rgba(255,255,255,0.75); font-size:15px; margin:0; max-width:480px; }
.clouds { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:24px 32px 0; }
.cloud { background:#fff; border:1px solid #E6E8F0; border-radius:12px; padding:20px; box-shadow:0 4px 16px rgba(16,17,48,0.08); }
.cloud .wand { width:34px; height:34px; border-radius:9px; margin-bottom:12px; }
.w1{background:linear-gradient(135deg,#1D2EFF,#5a67ff);} .w2{background:linear-gradient(135deg,#00D4FF,#1D2EFF);} .w3{background:linear-gradient(135deg,#1626D9,#1D2EFF);}
.cloud h4 { font-size:15px; font-weight:600; margin:0 0 6px; }
.cloud p { font-size:12px; color:#4A4E69; margin:0 0 10px; line-height:1.5; }
.cloud a { font-size:12px; color:#1D2EFF; font-weight:600; }
.stats { display:flex; gap:16px; padding:22px 32px 0; }
.stat { flex:1; background:#F5F6FA; border-radius:12px; padding:18px 20px; }
.stat .num { font-size:34px; font-weight:700; color:#1D2EFF; line-height:1; }
.stat .lbl { font-size:12px; color:#4A4E69; margin-top:6px; }
.badges { display:flex; gap:10px; align-items:center; }
.badge { background:#fff; border:1px solid #E6E8F0; border-radius:6px; padding:5px 10px; font-size:11px; font-weight:600; color:#101130; }
</style></head>
<body>
<div class="hero">
<div class="glow"></div>
<div class="navrow">
<div class="brand">Appier</div>
<div class="links"><span>Ad Cloud</span><span>Personalization</span><span>Data Cloud</span><span>Customers</span></div>
<div class="cta">Book a Demo</div>
</div>
<div class="herobody">
<div class="eyebrow">Enterprise AI</div>
<h1>Empowering businesses to turn AI into ROI</h1>
<p>Autonomous, adaptive, and agentic AI across marketing, personalization, and data.</p>
</div>
</div>
<div class="clouds">
<div class="cloud"><div class="wand w1"></div><h4>Ad Cloud</h4><p>AI-driven acquisition across every channel.</p><a>Learn more →</a></div>
<div class="cloud"><div class="wand w2"></div><h4>Personalization Cloud</h4><p>Real-time recommendations that convert.</p><a>Learn more →</a></div>
<div class="cloud"><div class="wand w3"></div><h4>Data Cloud</h4><p>Unify customer data into one activation layer.</p><a>Learn more →</a></div>
</div>
<div class="stats">
<div class="stat"><div class="num">41%</div><div class="lbl">Conversion boost, retail customer case study</div></div>
<div class="stat"><div class="num">3.2x</div><div class="lbl">Return on ad spend after 90 days</div></div>
<div class="stat" style="display:flex;align-items:center;gap:10px;">
<div class="badges"><span class="badge">Gartner</span><span class="badge">ISO 27001</span><span class="badge">TAG Certified</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefeff; color: #111827;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefeff; color: #111827;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #111827; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; background: #00205b; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; background: #fefeff; color: #00205b;
border: 1px solid #00205b; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #fefeff; color: #111827;
border: 1px solid #c3c4c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.2px; background: #70c8b5; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Dubray Books Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:'Poppins',sans-serif;
background:#fefeff; color:#111827;
}
*{box-sizing:border-box;}
.topnav{height:56px;background:#00205b;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-size:18px;font-weight:600;}
.navlinks{display:flex;gap:6px;font-size:14px;font-weight:500;color:#fff;}
.navlinks span{padding:6px 12px;border-radius:4px;}
.navlinks span.active{background:rgba(255,255,255,0.15);font-weight:600;}
.secondarynav{height:40px;background:#f4f4f4;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:20px;padding:0 32px;font-size:13px;color:#374151;}
.secondarynav span.active{color:#00205b;font-weight:600;border-bottom:2px solid #00205b;padding-bottom:10px;}
.hero{background:#00205b;color:#fff;padding:36px 32px;min-height:170px;position:relative;}
.hero h1{font-size:28px;font-weight:500;margin:0 0 10px;max-width:400px;}
.herocta{background:#ef7b3d;color:#fff;font-size:16px;font-weight:600;padding:14px 28px;border-radius:8px;display:inline-block;margin-top:8px;}
.section{padding:20px 32px 0;}
.chips{display:flex;gap:10px;margin-bottom:16px;}
.chip{background:#f4f4f4;border:1px solid #d1d5db;border-radius:9999px;padding:6px 16px;font-size:12px;color:#374151;}
.chip.active{background:#00205b;color:#fff;border-color:#00205b;}
.grid{display:flex;gap:16px;}
.card{flex:1;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px;}
.card-img{height:130px;border-radius:8px;margin-bottom:10px;position:relative;background:#f4f4f4;}
.card-img.c1{background:linear-gradient(160deg,#00205b,#70c8b5);}
.card-img.c2{background:linear-gradient(160deg,#ef7b3d,#fb681c);}
.card-img.c3{background:linear-gradient(160deg,#3e34d3,#00bbff);}
.card-img.c4{background:linear-gradient(160deg,#70c8b5,#00205b);}
.badge{position:absolute;top:8px;left:8px;background:#70c8b5;color:#fff;font-size:11px;font-weight:600;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.author{font-size:13px;color:#6b7280;}
.title{font-size:16px;font-weight:600;margin:2px 0 6px;}
.price{font-size:16px;font-weight:600;}
</style>
<div class="topnav">
<div class="logo">Dubray Books</div>
<div class="navlinks">
<span class="active">Home</span><span>Books</span><span>Gifts</span><span>Bestsellers</span>
</div>
</div>
<div class="secondarynav">
<span class="active">Fiction</span><span>Non-Fiction</span><span>Children's</span><span>Irish Interest</span><span>New in Paperback</span>
</div>
<div class="hero">
<h1>Your next favourite<br>book is waiting.</h1>
<div class="herocta">Shop Bestsellers</div>
</div>
<div class="section">
<div class="chips">
<div class="chip active">Fiction</div><div class="chip">Biography</div><div class="chip">Poetry</div><div class="chip">Kids</div>
</div>
<div class="grid">
<div class="card"><div class="card-img c1"><span class="badge">Staff Pick</span></div><div class="author">Nora Ainsley</div><div class="title">The Long Ferry</div><div class="price">€14.99</div></div>
<div class="card"><div class="card-img c2"><span class="badge" style="background:#fb681c;">Sale</span></div><div class="author">Cormac Reilly</div><div class="title">Under Blackrock</div><div class="price">€9.99</div></div>
<div class="card"><div class="card-img c3"></div><div class="author">Elena Voss</div><div class="title">Salt Water Notes</div><div class="price">€16.50</div></div>
<div class="card"><div class="card-img c4"><span class="badge" style="background:#39b757;">New</span></div><div class="author">Owen Fitzgerald</div><div class="title">The Quiet Coast</div><div class="price">€12.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #222222; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #222222;
border: 1px solid #222222; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #e20000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#222222; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { color:#fff; font-size:16px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; margin:0; }
.navlinks { display:flex; gap:24px; }
.navlinks span { color:#fff; font-size:13px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; padding-bottom:4px; }
.navlinks span.active { border-bottom:2px solid #fff; }
.cart { color:#fff; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
main { display:flex; height:calc(640px - 56px); }
.gallery { width:48%; background:#f2f2f2; display:flex; align-items:center; justify-content:center; position:relative; }
.frame { width:340px; height:210px; position:relative; }
.frame::before { content:''; position:absolute; left:20px; top:90px; width:300px; height:70px; border-radius:50%;
background:linear-gradient(90deg,#222222,#4c4c4c); }
.frame::after { content:''; position:absolute; left:30px; top:20px; width:250px; height:8px; background:#e20000; transform:rotate(-8deg); }
.sale-tag { position:absolute; top:20px; left:20px; background:#e20000; color:#fff; font-size:11px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; padding:4px 8px; }
.details { width:52%; padding:28px 36px; }
.cat { color:#767676; font-size:12px; text-transform:uppercase; letter-spacing:0.5px; font-weight:600; margin:0 0 6px; }
h1 { font-size:26px; font-weight:700; letter-spacing:-0.5px; margin:0 0 10px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.price { font-size:22px; font-weight:700; color:#222222; }
.price-old { font-size:15px; color:#767676; text-decoration:line-through; }
.desc { font-size:14px; line-height:1.5; color:#4c4c4c; margin:0 0 18px; max-width:400px; }
.specs { border:1px solid #d8d8d8; margin-bottom:20px; }
.specrow { display:flex; justify-content:space-between; padding:8px 12px; font-size:13px; border-bottom:1px solid #f2f2f2; }
.specrow:last-child { border-bottom:none; }
.specrow span:first-child { color:#767676; }
.specrow span:last-child { font-weight:600; }
.buyrow { display:flex; gap:0; }
.btn-primary { background:#222222; color:#fff; border:none; padding:12px 28px; font-size:13px; font-weight:600;
letter-spacing:0.5px; text-transform:uppercase; }
.btn-outline { background:#fff; color:#222222; border:2px solid #222222; padding:10px 26px; font-size:13px; font-weight:600;
letter-spacing:0.5px; text-transform:uppercase; margin-left:10px; }
</style></head>
<body>
<nav>
<p class="brand">Canyon</p>
<div class="navlinks"><span class="active">Road</span><span>Gravel</span><span>Mountain</span><span>Components</span></div>
<span class="cart">Cart (0)</span>
</nav>
<main>
<div class="gallery">
<span class="sale-tag">Sale</span>
<div class="frame"></div>
</div>
<div class="details">
<p class="cat">Road Bikes</p>
<h1>Ultimate CF SLX 8</h1>
<div class="price-row"><span class="price">$4,199</span><span class="price-old">$4,999</span></div>
<p class="desc">A carbon-fiber race frame engineered for climbing and sprinting — precision components, no compromises.</p>
<div class="specs">
<div class="specrow"><span>Frame</span><span>Carbon Fiber</span></div>
<div class="specrow"><span>Groupset</span><span>Shimano 105 Di2</span></div>
<div class="specrow"><span>Weight</span><span>7.9 kg</span></div>
</div>
<div class="buyrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">Compare</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eaeef0; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eaeef0; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #142b6f; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #ffffff; color: #142b6f;
border: 1px solid #142b6f; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2b2727;
border: 1px solid #b4b8b9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffd600; color: #141414;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#eaeef0; font-family:'CircularXX',-apple-system,sans-serif; color:#141414; }
*{box-sizing:border-box;}
.nav{height:72px;background:#142b6f;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{color:#fff;font-size:20px;font-weight:500;}
.navlinks{display:flex;gap:24px;font-size:15px;font-weight:500;}
.navlinks span{color:#fff;opacity:0.8;}
.navlinks span.on{opacity:1;border-bottom:2px solid #ffd600;padding-bottom:24px;}
.search{background:#fff;border-radius:9999px;padding:12px 20px;font-size:13px;color:#717171;width:170px;}
.hero{height:280px;padding:48px 40px;display:flex;align-items:center;}
.herotext{width:48%;}
.hero h1{font-size:42px;font-weight:500;margin:0 0 14px;line-height:1.15;}
.hero p{font-size:16px;color:#2b2727;margin:0 0 20px;max-width:340px;}
.cta{background:#ffd600;color:#141414;font-size:16px;font-weight:500;padding:14px 28px;border-radius:8px;width:fit-content;}
.heroimg{width:52%;height:180px;position:relative;background:radial-gradient(circle at 50% 50%,#ffffff,#a1aac5 70%);border-radius:12px;}
.heroimg::before{content:'';position:absolute;left:50%;top:50%;width:70px;height:70px;border-radius:50%;background:#ffffff;border:2px solid #142b6f;transform:translate(-50%,-50%);}
.label{padding:22px 40px 10px;font-size:16px;font-weight:500;}
.grid{display:flex;gap:16px;padding:0 40px;}
.card{width:200px;background:#fff;border-radius:12px;overflow:hidden;padding:14px;}
.thumb{height:100px;border-radius:8px;margin-bottom:10px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#142b6f;color:#fff;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;border-radius:9999px;padding:3px 10px;}
.badge.new{background:#ffd600;color:#141414;}
.stars{color:#ffd600;font-size:14px;margin:2px 0;}
.pname{font-size:16px;margin-bottom:2px;}
.pprice{font-size:16px;color:#2b2727;}
</style>
<div class="nav">
<div class="logo">Ritual</div>
<div class="navlinks"><span class="on">Multivitamin</span><span>Prenatal</span><span>Protein</span></div>
<div class="search">Search products...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Start your ritual.</h1>
<p>Traceable, science-backed nutrients your body can actually use — nothing to hide.</p>
<div class="cta">Start Your Ritual</div>
</div>
<div class="heroimg"></div>
</div>
<div class="label">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a1aac5,#eaeef0)"><div class="badge">Subscribe</div></div><div class="pname">Essential for Women</div><div class="stars">★★★★★</div><div class="pprice">$36 / mo</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f6ede0,#eaeef0)"><div class="badge new">New</div></div><div class="pname">Essential Prenatal</div><div class="stars">★★★★★</div><div class="pprice">$39 / mo</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f6ede0,#c83d1e)"></div><div class="pname">Synbiotic+</div><div class="stars">★★★★☆</div><div class="pprice">$59 / mo</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ebcb45; color: #1a1a1a;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #1a1a1a;
border: 1px solid #ebcb45; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ebcb45; color: #1a1a1a;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:'proxima-nova',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; border-bottom:1px solid #ececec; }
.brand { font-size:19px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:500; letter-spacing:.8px; text-transform:uppercase; }
.navlinks span.active { color:#ebcb45; border-bottom:2px solid #ebcb45; padding-bottom:4px; }
.search { background:#f7f7f7; border-radius:999px; padding:9px 18px; font-size:12px; color:#666666; width:200px; }
.hero { background:#f7f7f7; padding:26px 40px; text-align:center; }
.hero h1 { font-size:28px; font-weight:600; margin:0 0 8px; }
.hero p { font-size:13px; color:#666666; margin:0; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:20px 40px; }
.card { background:#fff; border-radius:4px; }
.cover { height:120px; background:linear-gradient(160deg,#3a2f1c,#5c4a2a); border-radius:4px; position:relative; }
.cover::after { content:''; position:absolute; left:8px; top:8px; right:8px; height:2px; background:#ebcb45; }
.cond { position:absolute; top:8px; right:8px; background:#ebcb45; color:#1a1a1a; font-size:9px; font-weight:700; text-transform:uppercase; padding:2px 7px; border-radius:2px; }
.cbody { padding:8px 2px; }
.cbody h3 { font-size:13px; font-weight:600; margin:0 0 2px; }
.cbody .author { font-size:11px; color:#666666; margin:0 0 6px; }
.price { font-size:15px; font-weight:600; color:#ebcb45; }
footer { position:absolute; bottom:0; left:0; right:0; background:#f7f7f7; color:#333333; padding:14px 40px;
display:flex; justify-content:space-between; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Bauman Rare Books</p>
<div class="navlinks"><span class="active">Shop</span><span>Authors</span><span>Browse</span><span>About</span></div>
<div class="search">Search rare books...</div>
</nav>
<section class="hero">
<h1>First Editions, Finely Bound</h1>
<p>Rare, signed, and antiquarian books for collectors who read the provenance as closely as the text.</p>
</section>
<div class="grid" style="position:relative;">
<div class="card">
<div class="cover"><span class="cond">Fine</span></div>
<div class="cbody"><h3>The Great Gatsby</h3><p class="author">F. Scott Fitzgerald, 1925</p><div class="price">$18,500</div></div>
</div>
<div class="card">
<div class="cover"><span class="cond">Near Fine</span></div>
<div class="cbody"><h3>Moby-Dick</h3><p class="author">Herman Melville, 1851</p><div class="price">$42,000</div></div>
</div>
<div class="card">
<div class="cover"><span class="cond">Very Good</span></div>
<div class="cbody"><h3>Pride and Prejudice</h3><p class="author">Jane Austen, 1813</p><div class="price">$65,000</div></div>
</div>
<div class="card">
<div class="cover"><span class="cond">Fine</span></div>
<div class="cbody"><h3>Ulysses</h3><p class="author">James Joyce, 1922</p><div class="price">$28,750</div></div>
</div>
</div>
<footer>
<span>© Bauman Rare Books</span>
<span>Bauman Rare Books · Customer Service · Events · Sign Up</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #d8d4c2; color: #1f2a44;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #d8d4c2; color: #1f2a44;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; margin: 0; color: #1f2a44; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #687782; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #0086c9; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #1f2a44; color: #ffffff;
border: 1px solid #0086c9; border-radius: 8px;
padding: 14px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #323232;
border: 1px solid #aaaaa2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #687782; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cf4520; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#d8d4c2; font-family:'Arial Narrow',Arial,sans-serif; color:#323232; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#1f2a44;}
.logo{font-size:19px;font-weight:700;letter-spacing:.3px;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;color:#fff;}
.hero{height:238px;display:flex;background:#f8f8f9;}
.htext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 36px;}
.htext .k{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#cf4520;margin-bottom:12px;}
.htext h1{font-size:27px;font-weight:700;color:#1f2a44;margin:0 0 10px;line-height:1.25;}
.htext p{font-size:13.5px;line-height:1.5;color:#323232;margin:0 0 18px;max-width:290px;}
.btn{width:fit-content;background:#0086c9;color:#fff;font-size:13px;font-weight:700;padding:12px 24px;border-radius:8px;}
.himg{width:54%;position:relative;background:#e8e5dc;}
.pack{position:absolute;left:130px;top:40px;width:80px;height:120px;border-radius:14px;background:linear-gradient(180deg,#0086c9,#1f2a44);}
.strap{position:absolute;left:150px;top:30px;width:40px;height:8px;border-radius:4px;background:#cf4520;}
.seclabel{padding:16px 36px 10px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#687782;}
.grid{display:flex;gap:14px;padding:0 36px;}
.card{width:150px;background:#fff;border-radius:12px;padding:10px;box-shadow:0 4px 10px rgba(0,0,0,.06);position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#a3cf00;color:#1f2a44;font-size:9px;font-weight:700;padding:2px 7px;border-radius:8px;}
.thumb{height:76px;border-radius:8px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:600;color:#1f2a44;height:30px;overflow:hidden;line-height:1.3;}
.price{font-size:13px;font-weight:700;color:#0086c9;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Sea TO Summit</div>
<div class="navlinks"><div>Sleep</div><div>Hydration</div><div>Cook</div><div>Packs</div></div>
</div>
<div class="hero">
<div class="htext">
<div class="k">Trailhead to Ridge</div>
<h1>Gear that trusts the miles ahead.</h1>
<p>Ultralight sleep systems and hydration gear engineered for the backcountry.</p>
<div class="btn">Shop Sleep Systems</div>
</div>
<div class="himg"><div class="pack"></div><div class="strap"></div></div>
</div>
<div class="seclabel">Trail Essentials</div>
<div class="grid">
<div class="card"><span class="badge">Eco</span><div class="thumb" style="background:linear-gradient(140deg,#0086c9,#1f2a44)"></div><div class="pname">Ultralight Sleeping Mat</div><div class="price">$189</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#cf4520,#1f2a44)"></div><div class="pname">Compression Dry Sack</div><div class="price">$44</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#a3cf00,#1f2a44)"></div><div class="pname">Collapsible Water Cell</div><div class="price">$32</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#d8d4c2,#687782)"></div><div class="pname">Alpha Pot Cook Set</div><div class="price">$65</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.28; letter-spacing: 0.01em; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.12em; background: #000000; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.12em; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1c1c1c;
border: 1px solid #d4d0cc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; background: #c5a028; color: #000000;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Georgia,'Times New Roman',serif; color:#1c1c1c; }
*{box-sizing:border-box;}
.nav{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #ebebeb;font-family:Arial,sans-serif;}
.logo{font-family:Georgia,serif;font-size:20px;letter-spacing:1px;color:#000;}
.navlinks{display:flex;gap:30px;font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:#000;}
.cta{border:1px solid #000;color:#000;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:10px 20px;}
.hero{height:250px;display:flex;border-bottom:1px solid #ebebeb;}
.herotext{width:44%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;border-right:1px solid #ebebeb;}
.herotext .k{font-family:Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#c5a028;margin-bottom:14px;}
.herotext h1{font-size:46px;font-weight:400;margin:0 0 16px;line-height:1.1;letter-spacing:.3px;}
.btn{display:inline-block;font-family:Arial,sans-serif;border:1px solid #000;color:#000;font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;padding:14px 26px;width:fit-content;}
.heroimg{width:56%;position:relative;background:linear-gradient(180deg,#f5f3f0,#e8d49a 90%);}
.starmark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;background:#000;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}
.pen{position:absolute;left:130px;top:60px;width:14px;height:220px;border-radius:7px 7px 30% 30%;background:linear-gradient(90deg,#111,#3d3d3d 50%,#111);}
.penclip{position:absolute;left:141px;top:70px;width:4px;height:70px;background:#c5a028;}
.sec{padding:24px 40px 0;}
.sectitle{font-family:Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:#767676;margin-bottom:16px;}
.grid{display:flex;gap:1px;background:#ebebeb;}
.card{flex:1;background:#fff;padding:14px;}
.thumb{height:96px;margin-bottom:10px;}
.pname{font-family:Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:.3px;}
.pprice{font-family:Arial,sans-serif;font-size:13px;color:#8c8c8c;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Montblanc</div>
<div class="navlinks"><span>Writing</span><span>Leather</span><span>Watches</span><span>Fragrance</span></div>
<div class="cta">Boutiques</div>
</div>
<div class="hero">
<div class="herotext">
<div class="k">Since 1913</div>
<h1>The Art of Writing</h1>
<div class="btn">Discover the Collection</div>
</div>
<div class="heroimg">
<div class="pen"></div><div class="penclip"></div><div class="starmark" style="left:80%;"></div>
</div>
</div>
<div class="sec">
<div class="sectitle">Icons of the House</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#1c1c1c,#3d3d3d)"></div><div class="pname">Meisterstück 149</div><div class="pprice">$935</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#3d3d3d,#c5a028)"></div><div class="pname">Heritage Rollerball</div><div class="pprice">$465</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#1c1c1c,#e8d49a)"></div><div class="pname">Sartorial Card Holder</div><div class="pprice">$310</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#000000,#2a2a2a)"></div><div class="pname">Star Legacy Watch</div><div class="pprice">$3,200</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5f00; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5f00; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff8200; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5f00; color: #000000;
border: 1px solid #ff8200; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5f00; color: #f5f5f5;
border: 1px solid #fd7727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff6500; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FF5F00; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#FF5F00; }
.brand { color:#fff; font-weight:900; font-size:18px; letter-spacing:-0.3px; text-transform:uppercase; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#fff; opacity:0.85; font-size:13px; font-weight:800; text-transform:uppercase; }
.btn-secondary { background:#000; color:#fff; border:none; border-radius:36px; padding:9px 20px;
font-weight:800; font-size:13px; text-transform:uppercase; }
.hero { padding:26px 32px 18px; text-align:center; }
.badge { display:inline-block; background:#FFCE00; color:#000; border-radius:36px; padding:5px 14px;
font-size:11px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:12px; }
.hero h1 { color:#fff; font-size:36px; font-weight:900; margin:0 0 8px; letter-spacing:-0.5px; text-transform:uppercase; }
.hero p { color:#F8E8DA; font-size:14px; margin:0 auto; max-width:520px; font-weight:500; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:20px 32px 24px; }
.card { position:relative; background:#fff; border-radius:20px; padding:20px; overflow:hidden;
display:flex; flex-direction:column; gap:8px; }
.card::before { content:''; position:absolute; top:-26px; right:-26px; width:76px; height:76px; border-radius:22px; }
.card.c1::before { background:#FFCE00; transform:rotate(-8deg); }
.card.c2::before { background:#FF8200; transform:rotate(10deg); }
.card.c3::before { background:#F8E8DA; transform:rotate(-6deg); }
.card .tag { position:relative; font-size:10px; font-weight:800; text-transform:uppercase; color:#000; opacity:0.5; letter-spacing:0.05em; }
.card h3 { position:relative; font-size:16px; font-weight:900; margin:0; }
.card p { position:relative; font-size:12px; color:#666666; margin:0; line-height:1.45; }
.card .cta { position:relative; margin-top:auto; align-self:flex-start; background:#FF5F00; color:#fff;
border-radius:36px; padding:7px 16px; font-size:11px; font-weight:800; text-transform:uppercase; }
.strip { background:#000; padding:14px 32px; display:flex; align-items:center; justify-content:space-between; }
.strip .badges { display:flex; gap:8px; }
.strip .chip { background:#FFCE00; color:#000; border-radius:36px; padding:4px 12px; font-size:10px; font-weight:800; text-transform:uppercase; }
.strip .num { color:#fff; font-size:12px; font-weight:700; }
footer { padding:12px 32px; display:flex; justify-content:space-between; align-items:center;
font-size:11px; color:#F8E8DA; background:#FF5F00; font-weight:600; }
</style></head>
<body>
<nav>
<span class="brand">Devsisters</span>
<div class="navlinks"><span>Games</span><span>Studios</span><span>Careers</span><span>News</span></div>
<button class="btn-secondary">Play Now</button>
</nav>
<section class="hero">
<span class="badge">Now Trending</span>
<h1>Run Brave, Bake Joy</h1>
<p>We build worlds people live inside — Cookie Run and beyond, for more people, for longer.</p>
</section>
<section class="cards">
<div class="card c1"><span class="tag">Kingdom</span><h3>Cookie Run: Kingdom</h3><p>Build your kingdom, bake cookies, and battle across the Earthbread saga.</p><span class="cta">Download</span></div>
<div class="card c2"><span class="tag">OvenBreak</span><h3>Cookie Run: OvenBreak</h3><p>The classic runner that started it all — still baking after all these years.</p><span class="cta">Play</span></div>
<div class="card c3"><span class="tag">Studio</span><h3>Devsisters Ventures</h3><p>Investing in the next generation of joyful, globally loved play.</p><span class="cta">Explore</span></div>
</section>
<div class="strip">
<div class="badges"><span class="chip">300M+ Users</span><span class="chip">4 Studios</span></div>
<span class="num">Seoul · Est. 2007</span>
</div>
<footer>
<span>© Devsisters</span>
<span>Devsisters · Games · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #252525;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #252525;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #252525; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #616161; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #e22d00; color: #ffffff;
border: none; border-radius: 2px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #252525;
border: 1px solid #e22d00; border-radius: 2px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #252525;
border: 1px solid #c8c8c8; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #616161; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; letter-spacing: 0.8px; background: #323131; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#fafafa; color:#252525; font-family:'Meta', Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing:border-box; }
.wrap{ position:relative; width:960px; height:640px; }
.nav{ height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#fafafa; border-bottom:1px solid #e2e2e2; }
.logo{ font-size:18px; font-weight:700; letter-spacing:0.01em; color:#252525; }
.navlinks{ display:flex; gap:24px; }
.navlinks span{ font-size:12px; color:#0073ce; letter-spacing:0.01em; }
.navlinks span.gray{ color:#5a5a5a; }
.cta{ font-size:12px; font-weight:700; color:#ffffff; background:#e22d00; padding:9px 18px; border-radius:3px; }
.hero{ height:270px; display:flex; padding:34px; gap:30px; }
.hero-text{ width:380px; display:flex; flex-direction:column; justify-content:center; }
.kicker{ font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#0073ce; margin-bottom:12px; }
.h1{ font-size:38px; font-weight:700; line-height:1.1; color:#252525; margin-bottom:12px; }
.sub{ font-size:14px; line-height:1.55; color:#5a5a5a; max-width:340px; margin-bottom:18px; }
.btn{ font-size:13px; font-weight:700; color:#ffffff; background:#e22d00; padding:12px 22px; border-radius:3px; width:fit-content; }
.hero-visual{ flex:1; position:relative; background:#ececec; border-radius:2px; }
.chair-back{ position:absolute; left:180px; top:14px; width:110px; height:104px; border-radius:16px 16px 36px 36px; background:linear-gradient(160deg,#3a3a3a,#1c1c1c); }
.chair-seat{ position:absolute; left:160px; top:112px; width:150px; height:26px; border-radius:10px; background:#2a2a2a; }
.chair-leg{ position:absolute; left:230px; top:134px; width:10px; height:50px; background:#0073ce; }
.swatch{ position:absolute; right:26px; top:22px; width:44px; height:44px; border-radius:3px; background:#e22d00; }
.section-title{ padding:16px 34px 8px; font-size:15px; font-weight:700; color:#252525; }
.grid{ display:flex; gap:16px; padding:0 34px; }
.card{ width:200px; background:#ffffff; border:1px solid #e2e2e2; border-radius:2px; padding:12px; }
.card-img{ width:100%; height:82px; border-radius:2px; margin-bottom:8px; }
.card-title{ font-size:13px; font-weight:700; color:#252525; margin-bottom:3px; }
.card-note{ font-size:11px; color:#8a8a8a; margin-bottom:8px; }
.row{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-size:13px; font-weight:700; color:#252525; }
.badge{ font-size:9px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#0073ce; }
.footer{ position:absolute; bottom:0; left:0; width:960px; height:52px; background:#1c1c1c; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.footer span{ font-size:11px; color:#b4b4b4; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Herman Miller</div>
<div class="navlinks">
<span class="gray">Seating</span>
<span class="gray">Workspaces</span>
<span>Configure</span>
<span class="gray">Trade</span>
</div>
<div class="cta">Order Sample</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="kicker">Design Since 1905</div>
<div class="h1">Engineered to outlast the desk it sits at.</div>
<div class="sub">Precision seating and systems, unsentimental about decoration. A catalog of forms that hold up under decades of use.</div>
<div class="btn">Configure Aeron</div>
</div>
<div class="hero-visual">
<div class="swatch"></div>
<div class="chair-back"></div>
<div class="chair-seat"></div>
<div class="chair-leg"></div>
</div>
</div>
<div class="section-title">Featured Systems</div>
<div class="grid">
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#252525,#0073ce);"></div>
<div class="card-title">Aeron Chair</div>
<div class="card-note">3 sizes · 8Z Pellicle</div>
<div class="row"><span class="price">$1,895</span><span class="badge">Configure</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#e22d00,#252525);"></div>
<div class="card-title">Sayl Chair</div>
<div class="card-note">Y-Tower suspension</div>
<div class="row"><span class="price">$695</span><span class="badge">Configure</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#0073ce,#252525);"></div>
<div class="card-title">Renew Sit-Stand</div>
<div class="card-note">Electric · 3 memory presets</div>
<div class="row"><span class="price">$1,199</span><span class="badge">Configure</span></div>
</div>
</div>
<div class="footer">
<span>© Herman Miller</span>
<span>Trade Program · Warranty · Contract</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #716a56; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 0.09em; background: #94d5d4; color: #121212;
border: none; border-radius: 8px; padding: 13px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 0.09em; background: transparent; color: #121212;
border: 1px solid #94d5d4; border-radius: 8px;
padding: 12px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #716a56; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.12em; background: #3f5147; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Jost',sans-serif; color:#2c332f; }
*{box-sizing:border-box;}
.announce{height:36px;background:#2c332f;color:#dedede;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;}
.nav{height:64px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-size:18px;font-weight:600;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;letter-spacing:.05em;color:#dedede;}
.hero{min-height:230px;background:#121212;display:flex;align-items:center;padding:0 32px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(to right,#000 20%,transparent 75%);}
.heroInner{position:relative;z-index:1;width:50%;}
.h1{font-size:44px;font-weight:700;color:#fff;line-height:1.08;letter-spacing:-.5px;margin:0 0 14px;}
.sub{font-size:15px;color:#dedede;margin:0 0 20px;max-width:320px;}
.cta{display:inline-block;background:#94d5d4;color:#121212;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:13px 28px;border-radius:8px;}
.shapes{position:absolute;right:60px;top:40px;width:220px;height:150px;}
.box1{position:absolute;width:90px;height:90px;background:#3f5147;border-radius:8px;top:20px;left:20px;}
.box2{position:absolute;width:70px;height:70px;background:#716a56;border-radius:8px;top:70px;left:100px;}
.chiprow{display:flex;gap:8px;padding:16px 32px 0;}
.chip{border:1px solid #dedede;border-radius:9999px;padding:7px 16px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#2c332f;}
.chip.active{background:#94d5d4;color:#121212;border:none;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:150px;border:1px solid #dedede;border-radius:8px;padding:8px;position:relative;}
.thumb{height:100px;background:#f2f1ee;border-radius:6px;margin-bottom:8px;}
.badge{position:absolute;top:14px;left:14px;background:#3f5147;color:#fff;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.ptitle{font-size:14px;font-weight:600;color:#121212;line-height:1.3;}
.edition{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#716a56;margin:4px 0;}
.pprice{font-size:16px;font-weight:700;color:#121212;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#2c332f;border-top:2px solid #3f5147;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#dedede;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">New Drop · Series 07 Restock Friday</div>
<div class="nav">
<div class="logo">Martian Toys</div>
<div class="navlinks"><span>New Drops</span><span>Vinyl Figures</span><span>Collabs</span><span>Archive</span></div>
</div>
<div class="hero">
<div class="heroInner">
<div class="h1">Collector shelving, digitized.</div>
<div class="sub">Limited-run art toys and designer vinyl, curated for display cases, not toy boxes.</div>
<div class="cta">Shop the Drop</div>
</div>
<div class="shapes"><div class="box1"></div><div class="box2"></div></div>
</div>
<div class="chiprow">
<div class="chip active">All</div><div class="chip">Vinyl</div><div class="chip">Resin</div><div class="chip">Sold Out</div>
</div>
<div class="grid">
<div class="card"><div class="badge">Limited</div><div class="thumb"></div><div class="ptitle">Basalt Wanderer 6"</div><div class="edition">Edition of 300</div><div class="pprice">$85</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Spectral Kin Figure</div><div class="edition">Edition of 150</div><div class="pprice">$120</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Moss Golem Set</div><div class="edition">Open Edition</div><div class="pprice">$45</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Auction Lot No.12</div><div class="edition">One of One</div><div class="pprice">$310</div></div>
</div>
<div class="footer"><span>© Collector-Grade Art Toys</span><span>Authenticity · Care · Shipping</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2b333f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2b333f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #2b333f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #73859f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: 0.8px; background: #ffdb00; color: #2b333f;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: 0.8px; background: transparent; color: #2b333f;
border: 1px solid #ffdb00; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.625; background: #ffffff; color: #2b333f;
border: 1px solid #cacccf; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #73859f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #b5dfad; color: #2b333f;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Roboto,Arial,Helvetica,sans-serif; background:#ffffff; color:#223344; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;background:#2b333f;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#fff;}
.navlinks span:first-child{border-bottom:2px solid #ffdb00;padding-bottom:20px;}
.hero{height:250px;background:#2b333f;display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;}
.heroText h1{font-size:34px;font-weight:700;color:#fff;margin:0 0 12px;line-height:1.2;}
.heroText p{font-size:14px;color:#ffffffb8;margin:0 0 18px;max-width:380px;}
.cta{display:inline-block;background:#ffdb00;color:#2b333f;font-size:14px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;padding:14px 28px;border-radius:4px;}
.tablet{position:absolute;right:100px;top:65px;width:180px;height:120px;border-radius:8px;background:linear-gradient(160deg,#3a4356,#223344);}
.pen{position:absolute;right:90px;top:150px;width:100px;height:12px;border-radius:6px;background:#ffdb00;transform:rotate(-20deg);}
.sec{padding:20px 32px 0;}
.secTitle{font-size:18px;font-weight:500;color:#2b333f;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border:1px solid #d4dae3;border-radius:8px;padding:14px;}
.thumb{height:80px;background:#f5f7f9;border-radius:4px;margin-bottom:10px;position:relative;overflow:hidden;}
.tabmini{position:absolute;left:56px;top:16px;width:88px;height:56px;border-radius:6px;background:linear-gradient(160deg,#3a4356,#2b333f);}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:4px 10px;border-radius:4px;margin-bottom:8px;color:#2b333f;}
.badge.sage{background:#b5dfad;}
.badge.blush{background:#ffe3e5;}
.badge.amber{background:#ffcc66;}
.ctitle{font-size:18px;font-weight:500;color:#2b333f;margin-bottom:4px;}
.cprice{font-size:20px;font-weight:700;color:#2b333f;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#2b333f;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#73859f;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Wacom</div>
<div class="navlinks"><span>Tablets</span><span>Displays</span><span>Styluses</span><span>Software</span></div>
</div>
<div class="hero">
<div class="heroText">
<h1>Draw It. Design It.<br>Make It Real.</h1>
<p>Precision creative tablets built for pen pressure sensitivity down to the level.</p>
<div class="cta">Shop Tablets</div>
</div>
<div class="tablet"></div><div class="pen"></div>
</div>
<div class="sec">
<div class="secTitle">Featured Tablets</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="tabmini"></div></div><div class="badge sage">Studio</div><div class="ctitle">Intuos Pro Medium</div><div class="cprice">$379.95</div></div>
<div class="card"><div class="thumb"><div class="tabmini" style="background:linear-gradient(160deg,#556,#223344)"></div></div><div class="badge blush">Entry</div><div class="ctitle">Wacom One 12</div><div class="cprice">$399.95</div></div>
<div class="card"><div class="thumb"><div class="tabmini" style="background:linear-gradient(160deg,#445,#2b333f)"></div></div><div class="badge amber">Portable</div><div class="ctitle">Intuos Small</div><div class="cprice">$79.95</div></div>
</div>
</div>
<div class="footer"><span>© Creative Professional Tools</span><span>Compare Models</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; background: #313131; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #c0392b; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d4d4d4;}
.logo{font-size:20px;font-weight:700;letter-spacing:-.3px;color:#313131;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;}
.navlinks span:first-child{color:#313131;border-bottom:2px solid #313131;padding-bottom:16px;}
.subnav{height:40px;background:#f5f5f5;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;gap:24px;padding:0 32px;font-size:13px;color:#6a6a6a;font-weight:500;}
.searchrow{padding:16px 32px 0;}
.searchbar{height:48px;border:2px solid #d4d4d4;display:flex;align-items:center;padding:0 16px;font-size:15px;color:#6a6a6a;gap:10px;}
.searchbar b{background:#313131;color:#fff;height:48px;width:48px;display:flex;align-items:center;justify-content:center;margin:0 -16px -0 auto;position:relative;left:16px;}
.grid{display:flex;gap:20px;padding:20px 32px 0;}
.card{width:200px;}
.cover{height:220px;background:#f5f5f5;position:relative;margin-bottom:10px;}
.badge{position:absolute;top:6px;left:6px;background:#c0392b;color:#fff;font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:2px 8px;}
.title{font-size:16px;font-weight:600;line-height:1.3;}
.author{font-size:14px;color:#6a6a6a;margin-top:4px;}
.price{font-size:16px;font-weight:600;margin-top:8px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#313131;color:#fff;display:flex;align-items:center;justify-content:center;gap:32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Powell S Books</div>
<div class="navlinks"><span>Books</span><span>Gifts</span><span>Events</span><span>Used</span></div>
</div>
<div class="subnav">Shop by Department · New Arrivals · Bestsellers · Staff Picks</div>
<div class="searchrow">
<div class="searchbar">Search 4 million books<b>🔍</b></div>
</div>
<div class="grid">
<div class="card"><div class="cover"><div class="badge">Sale</div></div><div class="title">The Long Winter Road</div><div class="author">Marta Feldkamp</div><div class="price">$18.00</div></div>
<div class="card"><div class="cover"></div><div class="title">Field Notes on Rivers</div><div class="author">Owen Castellan</div><div class="price">$24.95</div></div>
<div class="card"><div class="cover"></div><div class="title">A Cartographer's Diary</div><div class="author">Ines Wollrath</div><div class="price">$16.50</div></div>
<div class="card"><div class="cover"></div><div class="title">Salt & Cedar</div><div class="author">Priya Anand</div><div class="price">$21.00</div></div>
</div>
<div class="footer"><span>About</span><span>Customer Service</span><span>Events</span><span>Locations</span><span>Community</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdfdfd; color: #50595e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdfdfd; color: #50595e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #50595e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #9b8266; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #005e96; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #fdfdfd; color: #005e96;
border: 1px solid #005e96; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fdfdfd; color: #50595e;
border: 1px solid #d2d4d5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9b8266; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #8da94e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; background:#fdfdfd; color:#757577; }
*{box-sizing:border-box;}
.nav{height:58px;background:#ffffff;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:18px;font-weight:700;color:#50595e;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#50595e;}
.searchpill{width:170px;height:32px;border-radius:9999px;background:#f5f5f5;border:1px solid #dedede;display:flex;align-items:center;padding:0 14px;font-size:11px;color:#9b8266;}
.hero{height:230px;display:flex;background:linear-gradient(180deg,#cfe8f5 0%,#eef6f2 70%,#dfe8d4 100%);position:relative;overflow:hidden;}
.mtn{position:absolute;bottom:0;width:0;height:0;border-style:solid;}
.mtn1{left:520px;border-width:0 90px 100px 90px;border-color:transparent transparent #536a8f transparent;opacity:.55;}
.mtn2{left:600px;border-width:0 120px 140px 120px;border-color:transparent transparent #648c32 transparent;opacity:.7;}
.tent{position:absolute;left:640px;bottom:0;width:0;height:0;border-style:solid;border-width:0 34px 46px 34px;border-color:transparent transparent #005e96 transparent;}
.heroText{width:46%;padding:30px 36px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1;}
.heroText h1{font-size:28px;font-weight:700;color:#50595e;line-height:1.25;margin:0 0 10px;letter-spacing:-.3px;}
.heroText p{font-size:14px;color:#757577;margin:0 0 16px;max-width:300px;}
.btn{display:inline-block;background:#005e96;color:#fff;font-size:14px;font-weight:600;padding:12px 24px;border-radius:4px;width:fit-content;}
.sectitle{font-size:15px;font-weight:700;color:#50595e;padding:16px 34px 8px;}
.grid{display:flex;gap:12px;padding:0 34px;}
.card{width:190px;background:#ffffff;border:1px solid #dedede;border-radius:4px;padding:9px;position:relative;}
.thumb{height:96px;border-radius:4px;margin-bottom:8px;}
.badge{position:absolute;top:17px;left:17px;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 7px;border-radius:4px;color:#50595e;}
.badge.sage{background:#8da94e;color:#ffffff;}
.badge.chart{background:#e5fd6e;}
.title{font-size:13px;font-weight:700;color:#50595e;line-height:1.3;height:34px;overflow:hidden;}
.weight{font-size:11px;color:#9b8266;margin:2px 0 6px;font-weight:600;}
.price{font-size:14px;font-weight:700;color:#005e96;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Zpacks</div>
<div class="navlinks"><span>Tents</span><span>Packs</span><span>Sleep Systems</span><span>Accessories</span></div>
<div class="searchpill">Search gear...</div>
</div>
<div class="hero">
<div class="mtn mtn1"></div><div class="mtn mtn2"></div><div class="tent"></div>
<div class="heroText">
<h1>Every gram<br>justified.</h1>
<p>Ultralight tents, frameless packs, and titanium cookware built for miles, not comfort you'll never use.</p>
<div class="btn">Shop Ultralight Gear</div>
</div>
</div>
<div class="sectitle">Trail-Tested Favorites</div>
<div class="grid">
<div class="card"><div class="badge sage">Ultralight</div><div class="thumb" style="background:linear-gradient(135deg,#005e96,#0a96cf)"></div><div class="title">Duplex Zip Tent</div><div class="weight">17.9 oz</div><div class="price">$669.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2055a3,#005e96)"></div><div class="title">Arc Haul Frameless Pack</div><div class="weight">21.7 oz</div><div class="price">$349.00</div></div>
<div class="card"><div class="badge chart">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#648c32,#8da94e)"></div><div class="title">Titanium Cookware Set</div><div class="weight">4.2 oz</div><div class="price">$59.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0a96cf,#2055a3)"></div><div class="title">20°F Down Sleeping Bag</div><div class="weight">19.4 oz</div><div class="price">$399.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: #5645d4; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: transparent; color: #1a1a1a;
border: 1px solid #5645d4; border-radius: 8px;
padding: 10px 18px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #1a1a1a;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background: #5645d4; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
/* 딥 네이비 히어로 밴드 위에 스티키노트 색점 + 워크스페이스 UI 목업 —
그 아래는 데이터베이스 속성처럼 파스텔 카드 그리드. */
.hero { background:linear-gradient(160deg,#0a1530,#1a2a52); height:290px; position:relative; overflow:hidden; }
.dot { position:absolute; width:16px; height:16px; border-radius:4px; }
.d1 { background:#f5d75e; top:40px; left:60px; transform:rotate(12deg); }
.d2 { background:#ff64c8; top:70px; left:120px; transform:rotate(-8deg); }
.d3 { background:#2a9d99; top:36px; right:100px; transform:rotate(6deg); }
.d4 { background:#7b3ff2; top:100px; right:180px; transform:rotate(-10deg); }
.d5 { background:#1aae39; bottom:26px; left:200px; transform:rotate(8deg); }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:17px; font-weight:600; color:#fff; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; color:rgba(255,255,255,0.72); }
.btn { background:#5645d4; color:#fff; border:none; border-radius:999px; padding:9px 20px; font-weight:600; font-size:13px; }
.herocopy { position:relative; z-index:2; text-align:center; padding-top:6px; }
.herocopy h1 { font-size:42px; font-weight:600; letter-spacing:-1px; margin:0; color:#fff; line-height:1.1; }
.herocopy p { font-size:14px; color:rgba(255,255,255,0.65); margin:10px 0 16px; }
/* 워크스페이스 미니 목업 — 히어로 안쪽에 떠있는 작은 UI 카드 */
.mockup { position:relative; z-index:2; margin:0 auto; width:420px; background:#fff; border-radius:10px;
box-shadow:0 20px 50px rgba(0,0,0,0.35); padding:14px 18px; text-align:left; }
.mockup .mrow { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:12px; color:#37352f; }
.mockup .chip { width:14px; height:14px; border-radius:3px; }
.ch1 { background:#dcecfa; } .ch2 { background:#d9f3e1; } .ch3 { background:#fde0ec; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:22px 40px 30px; }
.card { border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:6px; }
.card.a { background:#ffe8d4; } .card.b { background:#e6e0f5; } .card.c { background:#d9f3e1; } .card.d { background:#dcecfa; }
.card h5 { font-size:13px; font-weight:700; margin:0; color:#1a1a1a; }
.card p { font-size:11px; color:#5d5b54; margin:0; }
</style></head>
<body>
<div class="hero">
<div class="dot d1"></div><div class="dot d2"></div><div class="dot d3"></div><div class="dot d4"></div><div class="dot d5"></div>
<nav>
<p class="brand">Notion</p>
<div class="navlinks"><span>Product</span><span>AI</span><span>Enterprise</span><span>Pricing</span></div>
<button class="btn">Get Notion free</button>
</nav>
<div class="herocopy">
<h1>Your wiki, docs, & projects.<br>Together.</h1>
<p>One workspace, every team.</p>
</div>
<div class="mockup">
<div class="mrow"><span class="chip ch1"></span> Product roadmap</div>
<div class="mrow"><span class="chip ch2"></span> Design sprint notes</div>
<div class="mrow"><span class="chip ch3"></span> Q3 OKRs</div>
</div>
</div>
<div class="cards">
<div class="card a"><h5>Docs</h5><p>Write it down, once</p></div>
<div class="card b"><h5>AI</h5><p>Ask your workspace</p></div>
<div class="card c"><h5>Projects</h5><p>Track what matters</p></div>
<div class="card d"><h5>Wiki</h5><p>One source of truth</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8f8f8f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #121212; color: #f5f5f5;
border: 1px solid #363636; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f8f8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #383838; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#292b2b; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; height:640px; }
/* left rail: quick-menu style circular category nav, per DESIGN.md's quick-menu-arrow component */
.rail { width:76px; flex-shrink:0; border-right:1px solid #ecedee; padding:20px 0; display:flex;
flex-direction:column; align-items:center; gap:18px; }
.rail .mark { width:36px; height:36px; border-radius:8px; background:#121212; color:#fff; font-size:13px;
font-weight:700; display:flex; align-items:center; justify-content:center; }
.rail .arrow { width:32px; height:32px; border-radius:50%; border:1px solid #ecedee; background:transparent;
display:flex; align-items:center; justify-content:center; font-size:13px; color:#000; }
.rail .arrow.disabled { color:rgba(16,16,16,0.3); }
.rail .catlabel { writing-mode:vertical-rl; font-size:11px; color:#878f91; letter-spacing:0.02em; margin-top:auto; }
.main { flex:1; min-width:0; display:flex; flex-direction:column; }
nav { height:56px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #ecedee; }
.brand { font-size:17px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.navr { display:flex; align-items:center; gap:16px; font-size:13px; color:#878f91; }
.search { width:220px; height:32px; border:1px solid #ecedee; border-radius:24px; display:flex; align-items:center;
padding:0 14px; font-size:12px; color:#878f91; }
.body { flex:1; min-height:0; display:flex; }
/* product media */
.media { width:380px; flex-shrink:0; background:#ecedee; position:relative; display:flex; align-items:center;
justify-content:center; }
.media .swatches { position:absolute; left:16px; bottom:16px; display:flex; gap:6px; }
.media .swatches span { width:8px; height:8px; border-radius:50%; background:#fff; border:1px solid #cfd2d3; }
.media .swatches span.on { background:#121212; border-color:#121212; }
.media .placeholder { width:220px; height:280px; background:linear-gradient(160deg,#f4f5f5,#e2e4e5);
border-radius:0px; position:relative; }
.media .placeholder::before { content:''; position:absolute; inset:28px; border:1px solid #d7dadb; }
.info { flex:1; min-width:0; padding:22px 28px 0; display:flex; flex-direction:column; }
.brandline { font-size:14px; font-weight:700; color:#121212; margin:0 0 6px; }
.title { font-size:16px; font-weight:400; line-height:normal; color:#292b2b; margin:0 0 12px; max-width:420px; }
.price-row { display:flex; align-items:baseline; gap:8px; margin-bottom:18px; }
.price { font-size:24px; font-weight:700; color:#121212; }
.price-note { font-size:12px; color:#878f91; }
.tabs { display:flex; gap:20px; border-bottom:1px solid #ecedee; }
.tab { padding:0 4px 17.5px; font-size:14px; font-weight:500; color:#878f91; }
.tab.sel { font-weight:600; color:#121212; border-bottom:2px solid #121212; }
.meta { padding:18px 0; display:flex; flex-direction:column; gap:10px; }
.meta-row { display:flex; justify-content:space-between; font-size:13px; color:#606567; max-width:420px; }
.meta-row b { color:#292b2b; font-weight:500; }
.cta-row { margin-top:auto; padding:18px 0 22px; display:flex; gap:10px; }
.btn-outline { flex:1; height:48px; border:1px solid #121212; border-radius:24px; background:#fff; color:#121212;
font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.btn-fill { flex:2; height:48px; border-radius:24px; background:#121212; color:#fff; font-size:14px;
font-weight:600; display:flex; align-items:center; justify-content:center; }
/* recommended row using the product-card token: 0px card, ecedee thumb */
.recs { border-top:1px solid #ecedee; padding:14px 28px 16px; }
.recs h4 { font-size:12px; font-weight:600; color:#878f91; margin:0 0 10px; text-transform:uppercase;
letter-spacing:0.05em; }
.rec-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.rec-card { display:flex; flex-direction:column; gap:6px; }
.rec-thumb { width:100%; aspect-ratio:1/1.2; background:#ecedee; }
.rec-card .rname { font-size:11px; color:#606567; }
.rec-card .rprice { font-size:12px; font-weight:600; color:#121212; }
</style></head>
<body>
<div class="app">
<div class="rail">
<div class="mark">Z</div>
<div class="arrow disabled">‹</div>
<div class="arrow">›</div>
<div class="catlabel">DAILY LOOK</div>
</div>
<div class="main">
<nav>
<p class="brand">ZIGZAG</p>
<div class="navr">
<div class="search">Search brand, item, style</div>
<span>♡</span>
<span>Bag</span>
</div>
</nav>
<div class="body">
<div class="media">
<div class="placeholder"></div>
<div class="swatches"><span class="on"></span><span></span><span></span></div>
</div>
<div class="info">
<p class="brandline">STUDIO NUMÉRO</p>
<p class="title">Wide-fit wool blend trousers with pressed center crease, cropped ankle length</p>
<div class="price-row">
<span class="price">₩68,900</span>
<span class="price-note">Free shipping over ₩30,000</span>
</div>
<div class="tabs">
<span class="tab sel">Details</span>
<span class="tab">Reviews 412</span>
<span class="tab">Size guide</span>
<span class="tab">Q&A</span>
</div>
<div class="meta">
<div class="meta-row"><span>Color</span><b>Charcoal grey</b></div>
<div class="meta-row"><span>Fabric</span><b>Wool 62% / Polyester 38%</b></div>
<div class="meta-row"><span>Fit</span><b>Wide straight, mid-rise</b></div>
</div>
<div class="cta-row">
<div class="btn-outline">Save</div>
<div class="btn-fill">Add to bag</div>
</div>
</div>
</div>
<div class="recs">
<h4>You may also like</h4>
<div class="rec-grid">
<div class="rec-card"><div class="rec-thumb"></div><span class="rname">Cotton crewneck tee</span><span class="rprice">₩22,900</span></div>
<div class="rec-card"><div class="rec-thumb"></div><span class="rname">Belted trench coat</span><span class="rprice">₩142,000</span></div>
<div class="rec-card"><div class="rec-thumb"></div><span class="rname">Suede ankle boots</span><span class="rprice">₩89,000</span></div>
<div class="rec-card"><div class="rec-thumb"></div><span class="rname">Knit vest, cream</span><span class="rprice">₩38,500</span></div>
<div class="rec-card"><div class="rec-thumb"></div><span class="rname">Pleated midi skirt</span><span class="rprice">₩54,900</span></div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.35; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #aa1c07; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #231f20;
border: 1px solid #aa1c07; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #231f20;
border: 1px solid #c8c7c7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f48120; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,'Segoe UI',Arial,sans-serif; color:#1d1c1c; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#231f20;}
.logo{font-size:18px;font-weight:700;color:#fff;letter-spacing:.3px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;color:#f5f5f5;}
.hero{height:236px;display:flex;background:#f5f5f5;}
.htext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 36px;}
.htext .k{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#f48120;margin-bottom:12px;}
.htext h1{font-size:26px;font-weight:700;color:#231f20;margin:0 0 10px;line-height:1.25;}
.htext p{font-size:13px;line-height:1.5;color:#1d1c1c;margin:0 0 18px;max-width:280px;}
.btn{width:fit-content;background:#aa1c07;color:#fff;font-size:13px;font-weight:700;padding:12px 24px;border-radius:8px;}
.himg{width:54%;position:relative;background:#ebebeb;display:flex;gap:10px;align-items:center;justify-content:center;}
.poster{width:80px;height:118px;border-radius:6px;}
.seclabel{padding:16px 36px 10px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#637381;}
.grid{display:flex;gap:14px;padding:0 36px;}
.card{width:150px;border-radius:8px;padding:8px;border:1px solid #dedede;position:relative;}
.badge{position:absolute;top:6px;left:6px;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 7px;border-radius:8px;}
.thumb{height:96px;border-radius:6px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:600;color:#231f20;height:30px;overflow:hidden;line-height:1.3;}
.price{font-size:13px;font-weight:700;color:#aa1c07;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Second Sight Films</div>
<div class="navlinks"><div>Horror</div><div>Cult</div><div>Limited Editions</div><div>Pre-Orders</div></div>
</div>
<div class="hero">
<div class="htext">
<div class="k">Collector's Edition</div>
<h1>Cinema preserved, restored, unforgotten.</h1>
<p>Limited Blu-ray and 4K restorations for the serious film archivist.</p>
<div class="btn">Shop Pre-Orders</div>
</div>
<div class="himg">
<div class="poster" style="background:linear-gradient(160deg,#aa1c07,#231f20);"></div>
<div class="poster" style="background:linear-gradient(160deg,#006fcf,#231f20);"></div>
</div>
</div>
<div class="seclabel">Now Available</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#f48120;">Limited</span><div class="thumb" style="background:linear-gradient(160deg,#aa1c07,#231f20)"></div><div class="pname">The Hollow Reel (4K UHD)</div><div class="price">$44.99</div></div>
<div class="card"><span class="badge" style="background:#ffd800;color:#231f20;">Sale</span><div class="thumb" style="background:linear-gradient(160deg,#006fcf,#231f20)"></div><div class="pname">Midnight Archive Blu-ray</div><div class="price">$29.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#f58720,#1d1c1c)"></div><div class="pname">Second Sight Slipcase Vol. II</div><div class="price">$59.99</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #6e6e6e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #e85d1a; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #ffffff; color: #111111;
border: 1px solid #e85d1a; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e6e6e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.9px; background: #fce8df; color: #e85d1a;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; color:#111111; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#0f0f0f;}
.logo{font-family:'Arial Narrow',sans-serif;font-size:20px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;text-transform:uppercase;color:#e0e0e0;}
.hero{height:200px;background:#0f0f0f;display:flex;flex-direction:column;justify-content:center;padding:0 32px;}
.h1{font-family:'Arial Narrow',sans-serif;font-size:38px;font-weight:800;text-transform:uppercase;letter-spacing:-0.5px;line-height:1.0;color:#fff;margin:0 0 12px;}
.certrow{display:flex;gap:10px;}
.cert{background:#1c1c1c;border:1px solid #c0c0c0;color:#f5c518;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:6px 12px;}
.filters{display:flex;gap:8px;padding:16px 32px 0;}
.chip{background:#f2f2f2;border:1px solid #dedede;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:8px 14px;}
.chip.on{background:#0f0f0f;color:#fff;border-color:#0f0f0f;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:150px;border:1px solid #dedede;padding:12px;}
.thumb{height:80px;margin-bottom:8px;}
.device{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#6e6e6e;}
.tier{display:inline-block;background:#e8e8e8;color:#e85d1a;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:2px 8px;margin:4px 0;}
.pname{font-size:14px;font-weight:600;margin-bottom:4px;}
.pprice{font-size:15px;font-weight:600;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#0f0f0f;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;letter-spacing:0.5px;text-transform:uppercase;color:#e0e0e0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Survivor</div>
<div class="navlinks"><div>Phone Cases</div><div>Tablet</div><div>Screen Protection</div><div>Compare</div></div>
</div>
<div class="hero">
<div class="h1">Drop-Tested. Field-Proven.</div>
<div class="certrow">
<div class="cert">MIL-STD-810G</div>
<div class="cert">6FT Drop Tested</div>
<div class="cert">IP68 Rated</div>
</div>
</div>
<div class="filters"><div class="chip on">All Devices</div><div class="chip">iPhone</div><div class="chip">Galaxy</div><div class="chip">Pixel</div></div>
<div class="grid">
<div class="card"><div class="device">iPhone 15 Pro</div><div class="thumb" style="background:linear-gradient(150deg,#111,#e85d1a);"></div><div class="tier">Extreme</div><div class="pname">Strong Series Case</div><div class="pprice">$49.99</div></div>
<div class="card"><div class="device">Galaxy S24</div><div class="thumb" style="background:linear-gradient(150deg,#111,#6e6e6e);"></div><div class="tier" style="color:#6e6e6e;">Basic</div><div class="pname">Clear Series Case</div><div class="pprice">$29.99</div></div>
<div class="card"><div class="device">iPad Pro 12.9"</div><div class="thumb" style="background:linear-gradient(150deg,#e85d1a,#111);"></div><div class="tier">Advanced</div><div class="pname">Tab Armor Kit</div><div class="pprice">$59.99</div></div>
<div class="card"><div class="device">Pixel 9</div><div class="thumb" style="background:linear-gradient(150deg,#f5c518,#111);"></div><div class="tier" style="color:#f5c518;">Extreme</div><div class="pname">Endurance Case</div><div class="pprice">$54.99</div></div>
</div>
<div class="footer"><span>© Built To Survive</span><span>Warranty · Find Your Case</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #767d88; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #767d88; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bcbfc4; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7d848e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #767d88; color: #000000;
border: 1px solid #7d848e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #767d88; color: #f5f5f5;
border: 1px solid #8a9099; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bcbfc4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #777e89; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { position:absolute; top:0; left:0; right:0; z-index:5; height:56px; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.brand { font-size:15px; font-weight:400; }
.navlinks { display:flex; gap:20px; font-size:13px; }
.navlinks span:hover { color:#fff; }
.hero { position:relative; height:300px; overflow:hidden;
background:
radial-gradient(ellipse 500px 260px at 75% 30%, rgba(120,90,180,.35), transparent 60%),
radial-gradient(ellipse 460px 300px at 30% 75%, rgba(60,70,110,.4), transparent 60%),
linear-gradient(180deg,#050505,#0e0e12 60%,#000); }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%); }
.herotext { position:absolute; left:32px; bottom:22px; z-index:2; max-width:560px; }
.herotext h1 { font-size:48px; font-weight:400; line-height:1; letter-spacing:-1.2px; margin:0 0 8px; }
.herotext p { font-size:14px; color:#767d88; margin:0; }
.gridwrap { padding:16px 32px; display:grid; grid-template-columns:1.3fr 1fr; gap:14px; }
.bigcard { position:relative; border-radius:8px; overflow:hidden; height:170px;
background:linear-gradient(140deg,#1a1a1a,#2a2a30 50%,#111); }
.bigcard::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.8) 100%); }
.bigcap { position:absolute; left:14px; bottom:12px; z-index:2; font-size:20px; font-weight:400; line-height:1; }
.stack { display:flex; flex-direction:column; gap:14px; }
.smcard { position:relative; border-radius:8px; overflow:hidden; height:78px;
background:linear-gradient(135deg,#2a2226,#151515); }
.smcard.b { background:linear-gradient(135deg,#1c2430,#0e1015); }
.smcard::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.75) 100%); }
.smcap { position:absolute; left:12px; bottom:8px; z-index:2; font-size:13px; }
.trust { padding:14px 32px; display:flex; gap:26px; align-items:center; opacity:.6; font-size:11px; letter-spacing:.35px; text-transform:uppercase; }
.mission { background:#000; text-align:center; padding:26px 32px; }
.mission p { font-size:22px; font-weight:400; line-height:1; letter-spacing:-.7px; margin:0; max-width:640px; margin:0 auto; }
</style></head>
<body>
<div style="position:relative;">
<nav>
<div class="brand">Runway</div>
<div class="navlinks"><span>Product</span><span>Research</span><span>Pricing</span><span>Sign in</span></div>
</nav>
<div class="hero">
<div class="herotext">
<h1>Runway<br>AI Filmmaking</h1>
<p>Tools for the next generation of storytellers.</p>
</div>
</div>
</div>
<div class="gridwrap">
<div class="bigcard"><span class="bigcap">Gen-4: A new frontier</span></div>
<div class="stack">
<div class="smcard"><span class="smcap">Research</span></div>
<div class="smcard b"><span class="smcap">Act-Two</span></div>
</div>
</div>
<div class="trust">TRUSTED BY · LEADING STUDIOS · RESEARCH LABS · CREATIVES</div>
<div class="mission">
<p>We are building AI to simulate the world through imagination, art and aesthetics.</p>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #221155;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #221155;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #221155; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #221155; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #221155;
border: 1px solid #221155; border-radius: 9999px;
padding: 12px 32px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #c8c4d4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #dc2626; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #f0f0f0;}
.logo{font-size:20px;font-weight:700;color:#221155;}
.search{width:340px;height:40px;background:#f7f7f7;border-radius:9999px;display:flex;align-items:center;padding:0 18px;font-size:13px;color:#666;}
.cartbtn{background:#221155;color:#fff;font-size:14px;font-weight:600;padding:11px 22px;border-radius:9999px;}
.hero{height:120px;display:flex;align-items:center;padding:0 32px;background:#f7f7f7;}
.h1{font-size:24px;font-weight:700;color:#221155;}
.sub{font-size:13px;color:#666;margin-top:4px;}
.section{padding:20px 32px 0;}
.stitle{font-size:16px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:150px;background:#fff;border-radius:12px;padding:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#fff;padding:2px 6px;border-radius:4px;background:#dc2626;}
.thumb{height:90px;border-radius:8px;background:#f7f7f7;margin-bottom:8px;display:flex;align-items:center;justify-content:center;}
.phone{width:44px;height:70px;border-radius:8px;}
.compat{font-size:10px;color:#666;margin-bottom:4px;}
.pname{font-size:13px;font-weight:600;color:#221155;margin-bottom:4px;}
.stars{font-size:10px;color:#f59e0b;margin-bottom:4px;}
.pprice{font-size:18px;font-weight:700;color:#221155;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#f7f7f7;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#666;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Supershieldz</div>
<div class="search">Search by phone model...</div>
<div class="cartbtn">Cart (3)</div>
</div>
<div class="hero">
<div><div class="h1">Screen Protection, Sorted by Fit.</div><div class="sub">Tempered glass and film for every device — cheap, effective, ships fast.</div></div>
</div>
<div class="section">
<div class="stitle">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb"><div class="phone" style="background:linear-gradient(160deg,#221155,#8a7bb5);"></div></div><div class="compat">Fits iPhone 15 Pro</div><div class="pname">Tempered Glass 3-Pack</div><div class="stars">★★★★★</div><div class="pprice">$9.99</div></div>
<div class="card"><div class="thumb"><div class="phone" style="background:linear-gradient(160deg,#1a0f44,#221155);"></div></div><div class="compat">Fits Galaxy S24</div><div class="pname">Privacy Screen Film</div><div class="stars">★★★★☆</div><div class="pprice">$12.99</div></div>
<div class="card"><div class="thumb"><div class="phone" style="background:linear-gradient(160deg,#8a7bb5,#221155);"></div></div><div class="compat">Fits Pixel 9</div><div class="pname">Camera Lens Guard</div><div class="stars">★★★★★</div><div class="pprice">$6.99</div></div>
<div class="card"><div class="thumb"><div class="phone" style="background:linear-gradient(160deg,#221155,#666);"></div></div><div class="compat">Universal Fit</div><div class="pname">Anti-Glare Film 2-Pack</div><div class="stars">★★★★☆</div><div class="pprice">$8.99</div></div>
</div>
</div>
<div class="footer"><span>© Screen Protection Since Day One</span><span>Shipping · Returns · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0e0f0c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0e0f0c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 31.2px; letter-spacing: -0.48px; margin: 0; color: #0e0f0c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; margin: 0; color: #868685; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 24px; background: #9fe870; color: #0e0f0c;
border: none; border-radius: 24px; padding: {spacing.md} {spacing.xl};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 24px; background: #e8ebe6; color: #0e0f0c;
border: 1px solid #9fe870; border-radius: 24px;
padding: {spacing.md} {spacing.xl}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; background: #ffffff; color: #0e0f0c;
border: 1px solid #0e0f0c; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #868685; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 20px; background: #e2f6d5; color: #054d28;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#e8ebe6; color:#0e0f0c; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:17px; font-weight:900; letter-spacing:-.3px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; font-weight:700; }
.pill { border-radius:999px; padding:9px 20px; font-size:13px; font-weight:800; }
.pill-lime { background:#9fe870; color:#0e0f0c; }
.hero { padding:20px 32px 26px; }
.hero h1 { font-size:56px; font-weight:900; letter-spacing:-1.6px; line-height:.98; margin:0 0 16px; max-width:640px; }
.hero p { font-size:15px; color:#454745; margin:0 0 20px; max-width:420px; }
.converter { display:flex; gap:0; align-items:stretch; max-width:560px; border-radius:16px; overflow:hidden;
background:#ffffff; }
.cside { flex:1; padding:16px 20px; }
.cside + .cside { border-left:1px solid #e8ebe6; }
.cside .lbl { font-size:11px; color:#868685; font-weight:700; text-transform:uppercase; }
.cside .amt { font-size:22px; font-weight:900; margin-top:4px; }
.cbtn { width:76px; background:#9fe870; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:900; }
.badge { display:inline-flex; align-items:center; gap:6px; background:#c5edab; color:#163300; border-radius:999px;
padding:6px 14px; font-size:12px; font-weight:800; margin-top:16px; }
.cardsrow { display:flex; gap:16px; padding:0 32px 30px; }
.wcard { flex:1; background:#ffffff; border-radius:16px; padding:18px; }
.wcard .tag { font-size:11px; font-weight:800; text-transform:uppercase; color:#868685; }
.wcard h3 { font-size:17px; font-weight:900; margin:8px 0 6px; }
.wcard p { font-size:12px; color:#454745; margin:0; line-height:1.4; }
.wcard .num { font-size:26px; font-weight:900; color:#054d28; }
</style></head>
<body>
<nav>
<div class="brand">Wise</div>
<div class="navlinks"><span>Send money</span><span>Spend</span><span>Business</span><span>Help</span></div>
<div class="pill pill-lime">Get started</div>
</nav>
<div class="hero">
<h1>Money without borders</h1>
<p>Send, spend, and receive money internationally at the real exchange rate.</p>
<div class="converter">
<div class="cside"><div class="lbl">You send</div><div class="amt">1,000.00 USD</div></div>
<div class="cbtn">→</div>
<div class="cside"><div class="lbl">Recipient gets</div><div class="amt">923,450 KRW</div></div>
</div>
<div class="badge">✓ Save up to 6x vs. your bank</div>
</div>
<div class="cardsrow">
<div class="wcard"><div class="tag">Transfer</div><h3 class="num">0.4%</h3><p>Low, transparent fees on every transfer — no markup.</p></div>
<div class="wcard"><div class="tag">Card</div><h3 class="num">40+</h3><p>Hold and spend in 40+ currencies with one card.</p></div>
<div class="wcard"><div class="tag">Trust</div><h3 class="num">16M</h3><p>People and businesses moving money with Wise.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e60023; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e60023; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e60023; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e60023; color: #f5f5f5;
border: 1px solid #e82745; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ffffff; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cf1044; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#211922; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
background:#ffffff; border-bottom:1px solid #f0f0ea; }
.brand { display:flex; align-items:center; gap:8px; font-weight:800; font-size:18px; color:#211922; }
.brand .dot { width:26px; height:26px; border-radius:50%; background:#e60023; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; font-weight:800; font-style:italic; }
.search { flex:1; max-width:420px; margin:0 24px; height:36px; border-radius:16px; background:#e5e5e0;
display:flex; align-items:center; padding:0 14px; color:#62625b; font-size:13px; }
.navactions { display:flex; align-items:center; gap:10px; }
.btn-red { background:#e60023; color:#fff; border:none; border-radius:16px; padding:8px 18px; font-size:13px; font-weight:600; }
.btn-ghost { background:#e5e5e0; color:#211922; border:none; border-radius:16px; padding:8px 18px; font-size:13px; font-weight:600; }
.body { display:flex; height:calc(640px - 60px); }
.rail { width:64px; background:#ffffff; border-right:1px solid #f0f0ea; display:flex; flex-direction:column;
align-items:center; gap:18px; padding-top:22px; }
.rail .ic { width:34px; height:34px; border-radius:12px; background:#f6f6f2; display:flex; align-items:center; justify-content:center; color:#62625b; font-size:15px; }
.rail .ic.active { background:#211922; color:#fff; }
.grid { flex:1; overflow:hidden; padding:18px 22px; display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; }
.pin { border-radius:16px; overflow:hidden; position:relative; background:#f2f2ee; display:flex; flex-direction:column; }
.pin .art { width:100%; border-radius:16px 16px 0 0; }
.pin .cap { padding:9px 10px 11px; font-size:11.5px; color:#211922; font-weight:600; line-height:1.3; }
.pin .meta { padding:0 10px 10px; font-size:10.5px; color:#62625b; display:flex; align-items:center; gap:5px; }
.pin .meta .av { width:16px; height:16px; border-radius:50%; }
.save { position:absolute; top:8px; right:8px; background:#e60023; color:#fff; font-size:10px; font-weight:700;
border-radius:14px; padding:5px 10px; }
.p1 .art { height:150px; background:linear-gradient(160deg,#f7c9b0,#efb08f); }
.p2 .art { height:210px; background:linear-gradient(160deg,#c9dcae,#9fbf7e); }
.p3 .art { height:120px; background:linear-gradient(160deg,#d7c9f0,#b79fe0); }
.p4 .art { height:190px; background:linear-gradient(160deg,#f0d3d3,#e0a8a8); }
.p5 .art { height:160px; background:linear-gradient(160deg,#bcd8e6,#8cb6cc); }
.p6 .art { height:130px; background:linear-gradient(160deg,#f4e1a8,#e0c274); }
.p7 .art { height:175px; background:linear-gradient(160deg,#dcb8c9,#c98aa5); }
.p8 .art { height:145px; background:linear-gradient(160deg,#b8cfc2,#8fae9c); }
.p9 .art { height:200px; background:linear-gradient(160deg,#e6c6a0,#d19f6f); }
.p10 .art { height:135px; background:linear-gradient(160deg,#cdd8ec,#9fb3d9); }
</style></head>
<body>
<nav>
<div class="brand"><span class="dot">P</span>Pinterest</div>
<div class="search">Search for ideas</div>
<div class="navactions">
<button class="btn-ghost">Log in</button>
<button class="btn-red">Sign up</button>
</div>
</nav>
<div class="body">
<div class="rail">
<div class="ic active">⌂</div>
<div class="ic">🔍</div>
<div class="ic">+</div>
<div class="ic">✉</div>
<div class="ic">◔</div>
</div>
<div class="grid">
<div class="pin p1"><div class="art"></div><div class="save" style="top:8px;right:8px;">Save</div><div class="cap">Autumn reading nook ideas</div><div class="meta"><span class="av" style="background:#f0b090;"></span>homeandhearth</div></div>
<div class="pin p2"><div class="art"></div><div class="cap">Balcony herb garden layout</div><div class="meta"><span class="av" style="background:#9fbf7e;"></span>greenthumb.co</div></div>
<div class="pin p3"><div class="art"></div><div class="cap">Minimal desk setup</div><div class="meta"><span class="av" style="background:#b79fe0;"></span>studio.notes</div></div>
<div class="pin p4"><div class="art"></div><div class="cap">Weekend brunch table</div><div class="meta"><span class="av" style="background:#e0a8a8;"></span>tablescapes</div></div>
<div class="pin p5"><div class="art"></div><div class="cap">Coastal bedroom palette</div><div class="meta"><span class="av" style="background:#8cb6cc;"></span>seasideliving</div></div>
<div class="pin p6"><div class="art"></div><div class="cap">Hand-lettering practice</div><div class="meta"><span class="av" style="background:#e0c274;"></span>inkandquill</div></div>
<div class="pin p7"><div class="art"></div><div class="cap">Terracotta color story</div><div class="meta"><span class="av" style="background:#c98aa5;"></span>palette.log</div></div>
<div class="pin p8"><div class="art"></div><div class="cap">Small kitchen storage hacks</div><div class="meta"><span class="av" style="background:#8fae9c;"></span>tidyhome</div></div>
<div class="pin p9"><div class="art"></div><div class="cap">Vintage travel poster set</div><div class="meta"><span class="av" style="background:#d19f6f;"></span>retroroute</div></div>
<div class="pin p10"><div class="art"></div><div class="cap">Capsule wardrobe basics</div><div class="meta"><span class="av" style="background:#9fb3d9;"></span>fewnthings</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0f0f0; color: #353434;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0f0f0; color: #353434;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: 0.25px; margin: 0; color: #353434; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 400; line-height: 1.55; margin: 0; color: #5b6f80; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.75px; background: #e87746; color: #ffffff;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.75px; background: #f0f0f0; color: #353434;
border: 1px solid #e87746; border-radius: 12px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f0f0f0; color: #353434;
border: 1px solid #c1c1c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5b6f80; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #198754; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Georgia, 'Palatino Linotype', serif; background:#f0f0f0; color:#454545; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e4e4e4;}
.logo{font-size:20px;font-family:Georgia,serif;color:#353434;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;font-family:Arial,sans-serif;}
.hero{height:230px;background:#edecec;display:flex;align-items:center;padding:0 34px;}
.herotext{max-width:440px;}
.headline{font-size:40px;font-weight:600;line-height:1.2;margin-bottom:14px;}
.btn{display:inline-block;background:#e87746;color:#fff;font-size:13px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;font-family:Arial,sans-serif;padding:14px 26px;border-radius:12px;}
.sec{padding:18px 34px;}
.sectitle{font-size:28px;font-weight:600;border-bottom:2px solid #e87746;padding-bottom:8px;width:fit-content;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:150px;background:#f2f2f2;border-radius:8px;padding:12px;}
.thumb{aspect-ratio:2/3;border-radius:6px;position:relative;margin-bottom:8px;}
.badge{position:absolute;top:6px;right:6px;background:#198754;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 7px;border-radius:4px;font-family:Arial,sans-serif;}
.badgesale{position:absolute;top:6px;right:6px;background:#e87746;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 7px;border-radius:4px;font-family:Arial,sans-serif;}
.title{font-size:15px;line-height:1.3;}
.author{font-size:13px;color:#7993a5;margin-top:4px;font-family:Arial,sans-serif;}
</style>
<div class="nav">
<div class="logo">Milkweed Editions</div>
<div class="navlinks"><span>Fiction</span><span>Poetry</span><span>Nonfiction</span><span>World Literature</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="headline">Stories worth binding.</div>
<div class="btn">Browse New Releases</div>
</div>
</div>
<div class="sec">
<div class="sectitle">New Releases</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#7993a5,#5b6f80)"><div class="badge">New</div></div><div class="title">The Long Field Road</div><div class="author">Elena Marsh</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#5b6f80,#c7c1ba)"><div class="badgesale">Sale</div></div><div class="title">Salt & Prairie</div><div class="author">Owen Farrow</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#c7c1ba,#7993a5)"></div><div class="title">A Season of Quiet</div><div class="author">Marta Lindqvist</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e87746,#7993a5)"><div class="badge">Award</div></div><div class="title">Where the River Bends North</div><div class="author">Thomas Reyes</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #191919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #191919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #191919; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #9ca3af; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #a42121; color: #ffffff;
border: none; border-radius: 6px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #191919;
border: 1px solid #a42121; border-radius: 6px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #191919;
border: 1px solid #c6c6c6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ca3af; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e7ff14; color: #191919;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#191919; color:#ffffff; font-family:'DM Sans',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #2a2a2f;}
.logo{font-size:19px;font-weight:600;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;}
.navlinks .active{color:#a42121;border-bottom:2px solid #a42121;padding-bottom:22px;}
.hero{height:250px;background:#101010;display:flex;align-items:center;padding:0 36px;position:relative;overflow:hidden;}
.herotext{width:480px;z-index:2;}
.herotext h1{font-family:'Playfair Display',Georgia,serif;font-size:36px;font-weight:700;margin:0 0 12px;line-height:1.2;}
.herotext p{font-size:15px;color:#d6d6d6;margin:0 0 16px;}
.cta{display:inline-block;background:#a42121;color:#fff;font-size:14px;font-weight:600;padding:13px 26px;border-radius:6px;}
.shard{position:absolute;right:60px;top:40px;width:150px;height:170px;background:linear-gradient(135deg,#67b2ff,#1a7ac4);clip-path:polygon(20% 0,100% 15%,80% 100%,0 85%);opacity:.85;}
.grid{display:flex;gap:14px;padding:20px 36px;}
.card{width:200px;background:#191919;border:1px solid #2a2a2f;border-radius:6px;padding:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#e7ff14;color:#191919;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:2px;}
.thumb{height:90px;background:#252529;border-radius:4px;margin-bottom:10px;}
.ptitle{font-size:15px;font-weight:600;}
.pprice{font-size:14px;color:#d6d6d6;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#101010;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:12px;color:#9ca3af;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Phantom Glass</div>
<div class="navlinks"><div class="active">Screen Protection</div><div>Camera Glass</div><div>Warranty</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Invisible armor, forged in glass.</h1>
<p>Tempered protection engineered for the phone you can't afford to crack.</p>
<div class="cta">Shop Protection</div>
</div>
<div class="shard"></div>
</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#1a7ac4,#191919)"></div><div class="ptitle">iPhone 16 Pro Glass</div><div class="pprice">$34.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a42121,#191919)"></div><div class="ptitle">Camera Lens Shield</div><div class="pprice">$19.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#67b2ff,#191919)"></div><div class="ptitle">Privacy Screen Glass</div><div class="pprice">$39.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e7ff14,#191919)"></div><div class="ptitle">Installation Kit</div><div class="pprice">$9.99</div></div>
</div>
<div class="footer"><span>© Phantom Glass · Lifetime Warranty</span><span>Find My Device</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.35; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #6fa237; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #222222;
border: 1px solid #6fa237; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ec0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,Helvetica,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:#222222; }
*{box-sizing:border-box;}
.notice{height:32px;background:#6fa237;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d8d8d8;}
.logo{font-size:20px;font-weight:700;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:700;text-transform:uppercase;}
.navlinks span:first-child{color:#6fa237;border-bottom:3px solid #6fa237;padding-bottom:20px;}
.hero{height:180px;background:#f2f2f2;display:flex;align-items:center;padding:0 32px;}
.hero h1{font-size:30px;font-weight:700;max-width:400px;}
.hero span{display:block;background:#6fa237;color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;padding:14px 32px;border-radius:8px;width:fit-content;margin-top:14px;}
.spectable{display:flex;gap:1px;background:#e2e2e2;margin:0 32px;}
.speccell{flex:1;background:#eeeeee;text-align:center;padding:10px;}
.speclabel{font-size:12px;font-weight:700;color:#767676;text-transform:uppercase;}
.specvalue{font-size:15px;margin-top:2px;}
.grid{display:flex;gap:14px;padding:14px 32px 0;}
.card{width:210px;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #d8d8d8;}
.thumb{height:100px;background:#f5f5f5;}
.info{padding:10px 14px 14px;}
.pname{font-size:16px;font-weight:700;}
.pprice{font-size:18px;font-weight:700;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#1b1b1b;color:#fff;display:flex;align-items:center;justify-content:center;gap:26px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="notice">Free Shipping on Orders Over $50</div>
<div class="nav">
<div class="logo">Presto</div>
<div class="navlinks"><span>Pressure Cookers</span><span>Griddles</span><span>Deep Fryers</span></div>
</div>
<div class="hero"><h1>Built for the family kitchen.<span>Shop Now</span></h1></div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Capacity</div><div class="specvalue">6 Qt</div></div>
<div class="speccell"><div class="speclabel">Wattage</div><div class="specvalue">1000W</div></div>
<div class="speccell"><div class="speclabel">Warranty</div><div class="specvalue">2 Years</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="info"><div class="pname">Digital Pressure Cooker</div><div class="pprice">$79.99</div></div></div>
<div class="card"><div class="thumb"></div><div class="info"><div class="pname">Electric Griddle 22"</div><div class="pprice">$44.99</div></div></div>
<div class="card"><div class="thumb"></div><div class="info"><div class="pname">Deep Fryer 8-Cup</div><div class="pprice">$54.99</div></div></div>
</div>
<div class="footer"><span>Warranty</span><span>Recipes</span><span>Parts & Accessories</span><span>Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eff4f8; color: #2b333f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eff4f8; color: #2b333f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #2b333f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #73859f; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #eff4f8; color: #2b333f;
border: 1px solid #73859f; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2b333f;
border: 1px solid #bec4ca; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #bce7f4; color: #2b333f;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eff4f8; color:#2b333f; box-sizing:border-box;
font-family:'Inter', Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
background:#73859f; }
.brand { font-size:18px; font-weight:700; color:#fff; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#eff4f8; font-weight:600; }
.cart { background:#ff7734; color:#fff; font-size:12px; font-weight:700; padding:7px 14px; border-radius:9999px; }
main { display:flex; height:578px; }
.gallery { width:390px; background:#f8f8f8; position:relative; display:flex; align-items:center; justify-content:center; }
.bookcover { width:170px; height:220px; background:linear-gradient(160deg,#bce7f4,#73859f); border-radius:8px;
box-shadow:0 18px 34px rgba(43,51,63,0.2); position:relative; }
.bookcover::before { content:''; position:absolute; top:24px; left:24px; right:24px; height:60px;
background:#fff; opacity:0.85; border-radius:6px; }
.bookcover::after { content:'ALICE'; position:absolute; bottom:26px; left:0; right:0; text-align:center;
color:#2b333f; font-size:14px; font-weight:800; letter-spacing:0.06em; }
.cloud { position:absolute; width:60px; height:24px; background:#ffffff; border-radius:9999px; opacity:0.8; }
.cloud.a { top:40px; left:40px; } .cloud.b { bottom:60px; right:50px; width:44px; height:18px; }
.badge-age { position:absolute; top:22px; left:22px; background:#2b333f; color:#fff; font-size:10px;
font-weight:700; padding:5px 12px; border-radius:9999px; }
.info { flex:1; padding:30px 38px; display:flex; flex-direction:column; gap:12px; background:#eff4f8; }
.cat { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#73859f; }
h1 { font-size:22px; font-weight:700; margin:0; line-height:1.3; }
.author { font-size:13px; color:#707070; }
.stars { font-size:12px; color:#ff7734; }
.stars .n { color:#707070; margin-left:6px; font-size:11.5px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:700; }
.desc { font-size:13.5px; color:#3d4853; line-height:1.55; max-width:340px; }
.fmt-row { display:flex; gap:8px; }
.fmt { border:1px solid #d6d6d6; border-radius:9999px; padding:7px 16px; font-size:12px; background:#fff; }
.fmt.on { border-color:#73859f; color:#73859f; background:#e8eef5; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#73859f; color:#fff; border:none; border-radius:9999px; padding:13px 18px;
font-size:14px; font-weight:700; }
.btn-outline { border:1.5px solid #73859f; color:#73859f; background:#fff; border-radius:9999px; padding:11.5px 16px;
font-size:12.5px; font-weight:700; white-space:nowrap; }
.meta { font-size:11px; color:#919191; }
</style></head>
<body>
<nav>
<div class="brand">Alice Ever After Books</div>
<div class="navlinks"><span>Picture Books</span><span>Chapter Books</span><span>Author Visits</span><span>Buffalo, NY</span></div>
<div class="cart">Cart · 2</div>
</nav>
<main>
<div class="gallery">
<div class="cloud a"></div><div class="cloud b"></div>
<span class="badge-age">Ages 4–8</span>
<div class="bookcover"></div>
</div>
<div class="info">
<span class="cat">Picture Book · Hardcover</span>
<h1>The Rabbit Who Read Backwards</h1>
<span class="author">by June Ferris · illus. Tomás Ruiz</span>
<div class="stars">★★★★★ <span class="n">4.9 · 128 reviews</span></div>
<div class="price-row"><span class="price">$17.99</span></div>
<p class="desc">A gentle, whimsical story about a rabbit who discovers his own way of seeing the world — perfect for bedtime.</p>
<div class="fmt-row">
<span class="fmt on">Hardcover</span>
<span class="fmt">Paperback</span>
<span class="fmt">Signed Copy</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">Gift Wrap +$3</button>
</div>
<span class="meta">Shop local — 295 Parkside Ave, Buffalo NY</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fee500; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fee500; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7009; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3c1e1e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fee500; color: #3c1e1e;
border: 1px solid #3c1e1e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fee500; color: #111111;
border: 1px solid #d8c303; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7009; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dfc505; color: #3c1e1e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#191919; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:640px; }
.list { width:300px; flex:0 0 auto; background:#fff; border-right:1px solid #E6E6E6; }
.lh { padding:16px 16px 6px; font-size:20px; font-weight:700; }
.myrow { display:flex; gap:12px; padding:12px 16px; align-items:center; border-bottom:1px solid #E6E6E6; }
.rsq { width:44px; height:44px; border-radius:14px; background:linear-gradient(135deg,#FEE500,#e6cf00); flex:0 0 auto; }
.rsq.b { background:linear-gradient(135deg,#8fb0c9,#5a7b96); }
.rsq.c { background:linear-gradient(135deg,#f0b8b8,#d98a8a); }
.rsq.d { background:linear-gradient(135deg,#b8d8b8,#8ac98a); }
.rn { font-size:15px; font-weight:600; }
.rs { font-size:12px; color:#6A6A6A; margin-top:2px; }
.sec { padding:10px 16px 6px; font-size:12px; color:#6A6A6A; font-weight:600; }
.frow { display:flex; gap:12px; padding:9px 16px; align-items:center; }
.thread { flex:1; display:flex; flex-direction:column; background:#B2C7DA; }
.nav { height:56px; background:#fff; border-bottom:1px solid #E6E6E6; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; }
.msgs { flex:1; padding:20px; display:flex; flex-direction:column; }
.inrow { display:flex; gap:8px; align-items:flex-end; margin-bottom:12px; }
.av { width:36px; height:36px; border-radius:12px; background:linear-gradient(135deg,#8fb0c9,#5a7b96); }
.inname { font-size:12px; color:#3a3a3a; margin-bottom:4px; }
.bub-in { background:#fff; border-radius:4px 14px 14px 14px; padding:10px 14px; font-size:15px; max-width:280px; }
.outrow { display:flex; justify-content:flex-end; align-items:flex-end; gap:6px; margin-bottom:12px; }
.unread { font-size:11px; color:#FEE500; font-weight:800; text-shadow:0 0 1px #3C1E1E; }
.time { font-size:10px; color:#3a3a3a; opacity:0.7; }
.metastack { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.bub-out { background:#FEE500; color:#3C1E1E; border-radius:14px 4px 14px 14px; padding:10px 14px; font-size:15px; font-weight:500; max-width:280px; }
.composer { background:#fff; padding:10px 14px; display:flex; align-items:center; gap:10px; }
.plus { width:30px; height:30px; border-radius:50%; background:#F5F5F5; display:flex; align-items:center; justify-content:center; font-weight:700; color:#6A6A6A; }
.field { flex:1; height:36px; background:#F5F5F5; border-radius:18px; }
.emo { font-size:18px; }
</style></head>
<body>
<div class="wrap">
<div class="list">
<div class="lh">Friends</div>
<div class="myrow"><div class="rsq"></div><div><div class="rn">KakaoTalk (iOS)</div><div class="rs">Heading to work... ☕</div></div></div>
<div class="sec">Friends · 128</div>
<div class="frow"><div class="rsq b"></div><div><div class="rn">Jiwoo</div><div class="rs">🎵 Now playing — IU</div></div></div>
<div class="frow"><div class="rsq c"></div><div><div class="rn">Minho</div><div class="rs">You've got this today!</div></div></div>
<div class="frow"><div class="rsq d"></div><div><div class="rn">Design Team</div><div class="rs">Channel</div></div></div>
</div>
<div class="thread">
<div class="nav">Jiwoo</div>
<div class="msgs">
<div class="inrow"><div class="av"></div><div><div class="inname">Jiwoo</div><div class="bub-in">Free this weekend?</div></div></div>
<div class="outrow">
<div class="metastack"><span class="unread">1</span><span class="time">2:14 PM</span></div>
<div class="bub-out">Yeah, Saturday works!</div>
</div>
<div class="inrow"><div class="av"></div><div><div class="bub-in">Great, let's meet at the station at 2 😊</div></div></div>
</div>
<div class="composer"><div class="plus">+</div><div class="field"></div><div class="emo">😊</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.2; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #5e5e5e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #c8102e; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #fefefe; color: #c8102e;
border: 1px solid #c8102e; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fefefe; color: #222222;
border: 1px solid #cbcbcb; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5e5e5e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #d2de28; color: #222222;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fefefe; font-family:Arial,'Helvetica Neue',Verdana,sans-serif; color:#444444; }
*{box-sizing:border-box;}
.topbar{height:32px;background:#393b44;color:#fff;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;display:flex;align-items:center;padding:0 30px;justify-content:space-between;}
.nav{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #cbcbcb;}
.logo{font-family:Arial Narrow,Arial,sans-serif;font-size:22px;font-weight:700;text-transform:uppercase;color:#222;letter-spacing:0.5px;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;}
.hero{height:180px;background:#393b44;display:flex;align-items:center;padding:0 32px;position:relative;}
.h1{font-family:Arial Narrow,Arial,sans-serif;font-size:26px;font-weight:700;text-transform:uppercase;color:#fff;margin:0 0 8px;}
.hsub{font-size:13px;color:#ddd;max-width:400px;margin:0 0 12px;}
.hbtn{display:inline-block;background:#c8102e;color:#fff;font-family:Arial Narrow,Arial,sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:11px 22px;border-radius:4px;}
.stripe{position:absolute;top:16px;left:32px;background:#d2de28;color:#222;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 8px;letter-spacing:0.5px;}
.catstrip{display:flex;background:#f3f3f3;border-bottom:3px solid #c8102e;padding:0 30px;}
.catitem{font-family:Arial Narrow,Arial,sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;padding:12px 18px;}
.catitem.on{background:#c8102e;color:#fff;}
.section{padding:16px 30px 0;}
.sectitle{font-family:Arial Narrow,Arial,sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#fefefe;border:1px solid #dedede;border-radius:4px;padding:10px;}
.thumb{height:76px;background:#f3f3f3;border-radius:4px;margin-bottom:8px;}
.compliance{background:#d2de28;color:#222;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 6px;letter-spacing:0.5px;display:inline-block;margin-bottom:4px;}
.ptitle{font-family:Arial Narrow,Arial,sans-serif;font-size:14px;font-weight:700;color:#222;}
.rating{background:#393b44;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 6px;display:inline-block;margin-top:4px;}
.pprice{font-family:Arial Narrow,Arial,sans-serif;font-size:16px;font-weight:700;color:#222;margin-top:6px;}
</style>
<div class="topbar"><div>Dealer Login · Find a Distributor</div><div>1-800-555-0177</div></div>
<div class="nav">
<div class="logo">Radians</div>
<div class="navlinks"><span>Eye Protection</span><span>Hearing</span><span>Gloves</span><span>Hi-Vis</span><span>Head Protection</span></div>
</div>
<div class="hero">
<div class="stripe">ANSI / ISEA Compliant</div>
<div><div class="h1">Safety Equipment, Engineered Like Aerospace</div><div class="hsub">PPE built and rated to spec — protection your workforce can actually verify.</div><div class="hbtn">Get a Quote</div></div>
</div>
<div class="catstrip"><div class="catitem on">Eye Protection</div><div class="catitem">Hearing</div><div class="catitem">Gloves</div><div class="catitem">Hi-Vis</div></div>
<div class="section">
<div class="sectitle">Featured Products</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c8102e,#393b44);"></div><div class="compliance">ANSI Z87.1+</div><br><div class="ptitle">Rad-Atac Safety Glasses</div><div class="rating">Type II</div><div class="pprice">$8.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1e8ecd,#393b44);"></div><div class="compliance">ANSI S3.19</div><br><div class="ptitle">Rad Sequel Earmuffs</div><div class="rating">Class E</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d2de28,#393b44);"></div><div class="compliance">ANSI/ISEA 105</div><br><div class="ptitle">Cut-Resistant Work Gloves</div><div class="rating">ARC 2</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c8102e,#5e5e5e);"></div><div class="compliance">ANSI 107</div><br><div class="ptitle">Hi-Vis Class 3 Vest</div><div class="rating">Type R</div><div class="pprice">$19.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #557777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #3a4d4d;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #557777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.1; letter-spacing: 0.5px; background: #d2de31; color: #1a1a1a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Geologica','Inter',Arial,sans-serif; color:#3a4d4d; }
*{box-sizing:border-box;}
.nav{height:60px;background:#108474;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:19px;font-weight:600;color:#ffffff;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;color:#ffffff;}
.hero{height:262px;display:flex;align-items:center;padding:0 40px;background:linear-gradient(120deg,#ffffff 55%,#e7f3f0 100%);}
.heroText{width:440px;}
.h1{font-size:30px;font-weight:500;line-height:1.2;color:#1a1a1a;margin:0 0 14px;}
.sub{font-size:14px;color:#557777;line-height:1.5;margin:0 0 20px;width:370px;}
.cta{display:inline-flex;align-items:center;justify-content:center;width:170px;height:46px;background:#108474;color:#ffffff;font-size:14px;font-weight:600;border-radius:8px;}
.kayak{position:relative;width:340px;height:200px;}
.hull{position:absolute;left:40px;top:100px;width:280px;height:44px;border-radius:22px;background:linear-gradient(90deg,#0c5132,#108474,#d2de31);}
.paddle{position:absolute;left:100px;top:20px;width:6px;height:120px;background:#277158;border-radius:3px;transform:rotate(20deg);}
.sec{padding:22px 40px 0;}
.secTitle{font-size:18px;font-weight:500;color:#1a1a1a;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#ffffff;border:1px solid #dedede;border-radius:8px;padding:10px;position:relative;}
.thumb{height:98px;border-radius:6px;margin-bottom:10px;}
.stars{position:absolute;top:20px;left:20px;color:#fbcd0a;font-size:11px;}
.pname{font-size:13px;font-weight:600;color:#1a1a1a;margin:0 0 4px;}
.pprice{font-size:14px;font-weight:600;color:#108474;}
</style>
<div class="nav">
<div class="logo">Wilderness Systems</div>
<div class="navlinks"><span>Kayaks</span><span>Paddles</span><span>Accessories</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Built for the current, not the catalog.</div>
<div class="sub">Capable kayaks and gear engineered for real rivers and real adventure.</div>
<div class="cta">Shop Kayaks</div>
</div>
<div class="kayak"><div class="paddle"></div><div class="hull"></div></div>
</div>
<div class="sec">
<div class="secTitle">Top Rated</div>
<div class="grid">
<div class="card"><span class="stars">★★★★★</span><div class="thumb" style="background:linear-gradient(135deg,#108474,#d2de31);"></div><div class="pname">Tarpon 120 Kayak</div><div class="pprice">$999</div></div>
<div class="card"><span class="stars">★★★★</span><div class="thumb" style="background:linear-gradient(135deg,#277158,#108474);"></div><div class="pname">Bending Branches Paddle</div><div class="pprice">$129</div></div>
<div class="card"><span class="stars">★★★★★</span><div class="thumb" style="background:linear-gradient(135deg,#d2de31,#108474);"></div><div class="pname">Deck Rigging Kit</div><div class="pprice">$39</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f1e8d9; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f1e8d9; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #545454; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #655dc6; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f1e8d9; color: #141414;
border: 1px solid #655dc6; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fefefe; color: #333333;
border: 1px solid #bab3a8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #545454; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cfde3e; color: #141414;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>K18 Hair Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Inter','Helvetica Neue',Arial,sans-serif; background:#f1e8d9; color:#141414; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-weight:700;font-size:19px;letter-spacing:-.5px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;letter-spacing:.2px;}
.navlinks .active{color:#655dc6;}
.searchpill{width:190px;height:36px;border-radius:999px;background:#fefefe;border:1px solid #dedede;font-size:12px;color:#545454;line-height:36px;padding:0 16px;}
.hero{padding:24px 36px 20px;text-align:center;}
.hero h1{font-size:38px;font-weight:700;letter-spacing:-1px;line-height:1.1;margin:0 0 10px;}
.hero p{font-size:15px;color:#545454;max-width:440px;margin:0 auto 16px;}
.btn{display:inline-block;background:#655dc6;color:#fff;padding:14px 30px;border-radius:999px;font-size:14px;font-weight:600;letter-spacing:.4px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 36px;}
.card{background:#fefefe;border-radius:20px;padding:14px;position:relative;}
.imgbox{background:#eee6d8;border-radius:12px;aspect-ratio:1/1;position:relative;}
.badge{position:absolute;top:8px;left:8px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:4px 9px;background:#cfde3e;color:#141414;}
.badge.pink{background:#f6418e;color:#fff;}
.title{font-size:14px;font-weight:600;margin-top:10px;}
.price{font-size:14px;font-weight:600;margin-top:3px;}
</style>
<div class="nav">
<div class="logo">K18 Hair</div>
<div class="navlinks"><span class="active">Repair</span><span>Styling</span><span>Bestsellers</span><span>Science</span></div>
<div class="searchpill">Search products…</div>
</div>
<div class="hero">
<h1>Biomimetic haircare,<br>backed by science.</h1>
<p>The first bond-building treatment that works on every hair type, in just 4 minutes.</p>
<div class="btn">Shop the Mask</div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#d9d3f0,#655dc6);"><div class="badge">New</div></div>
<div class="title">K18 Leave-In Molecular Repair Hair Mask</div>
<div class="price">$29.00</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#f0d0e0,#c94c8a);"><div class="badge pink">Sale</div></div>
<div class="title">K18 Peptide Prep Detox Shampoo</div>
<div class="price">$32.00</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#e5e0c8,#c8ba5a);"></div>
<div class="title">K18 Molecular Repair Hair Oil</div>
<div class="price">$48.00</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#d0e5dc,#4c9c8a);"></div>
<div class="title">K18 Biomimetic Hairscience Kit</div>
<div class="price">$75.00</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #201d1d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #201d1d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #050505; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#201d1d; color:#fdfcfc; box-sizing:border-box;
font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid rgba(15,0,0,0.12); }
.brand { font-size:16px; font-weight:700; letter-spacing:-0.02em; }
.navlinks { display:flex; gap:24px; font-size:16px; font-weight:500; }
.navlinks span { text-decoration:underline; color:#9a9898; }
.navlinks span.gh { color:#fdfcfc; text-decoration:none; }
.wrap { display:flex; height:584px; }
.col-left { width:492px; padding:36px 32px 0; }
.eyebrow { color:#9a9898; font-size:14px; line-height:2.0; margin:0 0 6px; }
h1 { font-size:38px; font-weight:700; line-height:1.28; margin:0 0 14px; letter-spacing:-0.01em; }
h1 span { color:#9a9898; }
p.lead { font-size:16px; font-weight:400; line-height:1.5; color:#9a9898; margin:0 0 24px; max-width:420px; }
.install { background:#302c2c; border:1px solid #646262; border-radius:4px; padding:14px 16px;
font-size:14px; color:#fdfcfc; display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.install .dollar { color:#9a9898; }
.row { display:flex; gap:12px; }
.btn { background:#201d1d; color:#fdfcfc; border:1px solid #646262; border-radius:4px;
padding:4px 20px; font-size:16px; font-weight:500; height:40px; display:flex; align-items:center; }
.btn.solid { background:#fdfcfc; color:#201d1d; border:1px solid #fdfcfc; }
.feature-list { margin-top:28px; }
.feature { padding:8px 0; font-size:16px; }
.feature b { font-weight:700; }
.feature .desc { color:#9a9898; font-weight:400; }
.feature .dot { color:#30d158; margin-right:8px; }
.col-right { flex:1; padding:36px 32px 0 0; }
.term { background:#171414; border:1px solid rgba(15,0,0,0.12); border-radius:4px;
height:480px; padding:16px; font-size:13px; line-height:2.0; overflow:hidden; }
.term .tbar { display:flex; gap:6px; margin-bottom:12px; }
.term .tbar i { width:10px; height:10px; border-radius:9999px; background:#646262; display:inline-block; }
.term .prompt { color:#30d158; }
.term .path { color:#007aff; }
.term .comment { color:#6e6e73; }
.term .out { color:#fdfcfc; }
.term .diff-add { color:#30d158; }
.term .diff-rm { color:#ff3b30; }
.term .muted { color:#9a9898; }
</style></head>
<body>
<nav>
<div class="brand">OpenCode AI</div>
<div class="navlinks"><span>Docs</span><span>Providers</span><span class="gh">GitHub</span></div>
</nav>
<div class="wrap">
<div class="col-left">
<p class="eyebrow">open source · terminal-first</p>
<h1>The AI coding<br>agent, <span>built for<br>the terminal.</span></h1>
<p class="lead">Any model. Any provider. Runs in your terminal, connects to any client.</p>
<div class="install"><span class="dollar">$</span> curl -fsSL https://get.OpenCode AI/install | sh</div>
<div class="row">
<div class="btn solid">Install</div>
<div class="btn">Read the docs</div>
</div>
<div class="feature-list">
<div class="feature"><span class="dot">▸</span><b>Provider agnostic</b> <span class="desc">— bring your own model</span></div>
<div class="feature"><span class="dot">▸</span><b>Client / server</b> <span class="desc">— terminal, desktop, or web</span></div>
<div class="feature"><span class="dot">▸</span><b>Self-hostable</b> <span class="desc">— your infra, your rules</span></div>
</div>
</div>
<div class="col-right">
<div class="term">
<div class="tbar"><i></i><i></i><i></i></div>
<div class="out"><span class="prompt">➜</span> <span class="path">~/projects/app</span> OpenCode AI chat</div>
<div class="muted comment"># connected to provider: anthropic/claude</div>
<div class="out">> refactor the auth middleware to use sessions</div>
<div class="out muted">reading src/middleware/auth.ts ...</div>
<div class="out muted">applying patch to 2 files</div>
<div class="diff-rm">- import { verifyToken } from './jwt'</div>
<div class="diff-add">+ import { getSession } from './session'</div>
<div class="diff-add">+ export async function auth(req) {</div>
<div class="diff-add">+ return getSession(req.cookies.sid)</div>
<div class="diff-add">+ }</div>
<div class="out muted">2 files changed, running tests ...</div>
<div class="out">✓ 14 passed</div>
<div class="out"><span class="prompt">➜</span> <span class="path">~/projects/app</span> <span class="muted">_</span></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222529;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222529;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #222529; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.2px; background: #ff5501; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.2px; background: #ffffff; color: #0088cc;
border: 1px solid #0088cc; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #222529;
border: 1px solid #c8c8ca; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ff5501; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Ink4Less</title>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#f6f6f6;font-family:'Open Sans',Arial,Helvetica,sans-serif;color:#303030;}
*{box-sizing:border-box;}
.utilbar{position:absolute;top:0;left:0;width:960px;height:26px;background:#514943;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.nav{position:absolute;top:26px;left:0;width:960px;height:52px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e7e7e7;}
.logo{font-weight:700;font-size:18px;color:#0088cc;}
.logo b{color:#ff5501;}
.searchbar{width:340px;height:32px;display:flex;border:1px solid #c1c1c1;border-radius:4px;overflow:hidden;}
.searchbar .inp{flex:1;background:#fff;font-size:12px;color:#777777;display:flex;align-items:center;padding:0 10px;}
.searchbar .go{width:44px;background:#ff5501;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;}
.cartlink{font-size:12px;font-weight:600;color:#0088cc;}
.catnav{position:absolute;top:78px;left:0;width:960px;height:34px;background:#fff;border-bottom:1px solid #e7e7e7;display:flex;align-items:center;gap:20px;padding:0 32px;font-size:12px;font-weight:600;color:#303030;}
.catnav span.active{color:#0088cc;border-bottom:2px solid #0088cc;padding-bottom:8px;}
.heroband{position:absolute;top:112px;left:0;width:960px;height:110px;background:#0088cc;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.heroband h1{color:#fff;font-size:22px;font-weight:700;margin:0;}
.heroband p{color:#dbeeff;font-size:12px;margin:4px 0 0 0;}
.heroband .cta{background:#ff5501;color:#fff;font-size:13px;font-weight:600;border-radius:4px;padding:12px 22px;}
.body{position:absolute;top:236px;left:0;width:960px;height:404px;display:flex;}
.sidebar{width:180px;height:404px;background:#f6f6f6;border-right:1px solid #e7e7e7;padding:16px;font-size:12px;color:#303030;}
.sidebar h4{font-size:13px;margin:0 0 8px 0;color:#222529;}
.sidebar .item{margin-bottom:6px;color:#444444;}
.sidebar .section{margin-top:16px;}
.main{flex:1;padding:16px;}
.breadcrumb{font-size:11px;color:#777777;margin-bottom:10px;}
.grid{display:flex;gap:14px;}
.card{width:170px;background:#fff;border:1px solid #e7e7e7;border-radius:4px;padding:10px;position:relative;}
.imgbox{width:148px;height:80px;background:#f6f6f6;border-radius:2px;margin-bottom:8px;}
.imgbox.a{background:linear-gradient(135deg,#c9e8f7,#0088cc);}
.imgbox.b{background:linear-gradient(135deg,#ffe0c9,#ff5501);}
.imgbox.c{background:linear-gradient(135deg,#e7e7e7,#aaaaaa);}
.compat{display:inline-block;font-family:Consolas,monospace;font-size:9px;color:#777777;border:1px solid #e7e7e7;border-radius:9999px;padding:2px 6px;margin-bottom:6px;}
.title{font-size:11px;color:#222529;margin-bottom:6px;}
.price{font-size:19px;font-weight:700;color:#ff5501;}
.listprice{font-size:11px;color:#777777;text-decoration:line-through;margin-left:6px;}
.savings{font-size:10px;color:#0cc485;font-weight:700;margin-top:2px;}
.addcart{margin-top:8px;background:#ff5501;color:#fff;font-size:11px;font-weight:600;text-align:center;border-radius:4px;padding:6px 0;}
.badge{position:absolute;top:8px;left:8px;background:#eb2771;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;border-radius:9999px;padding:2px 8px;}
</style>
<div class="utilbar"><span>1-800-INK-4LESS</span><span>Track Order | My Account | 26 Years in Business</span></div>
<div class="nav">
<div class="logo">Ink4less</div>
<div class="searchbar"><div class="inp">HP OfficeJet 5252 ink…</div><div class="go">GO</div></div>
<div class="cartlink">Cart (0)</div>
</div>
<div class="catnav">
<span class="active">HP</span><span>Canon</span><span>Epson</span><span>Brother</span><span>Toner</span><span>Clearance</span>
</div>
<div class="heroband">
<div><h1>10,000+ Compatible Cartridges</h1><p>Up to 80% off MSRP — free shipping on orders over $50</p></div>
<div class="cta">Shop Deals</div>
</div>
<div class="body">
<div class="sidebar">
<h4>Brand</h4>
<div class="item">☐ HP (2,140)</div>
<div class="item">☐ Canon (980)</div>
<div class="item">☐ Epson (712)</div>
<div class="section">
<h4>Page Yield</h4>
<div class="item">☐ Standard</div>
<div class="item">☐ High Yield</div>
</div>
<div class="section">
<h4>Price</h4>
<div class="item">☐ Under $10</div>
<div class="item">☐ $10 – $25</div>
</div>
</div>
<div class="main">
<div class="breadcrumb">Home / Ink Cartridges / HP / OfficeJet Series</div>
<div class="grid">
<div class="card">
<div class="badge">Sale</div>
<div class="imgbox a"></div>
<div class="compat">HP 63XL</div>
<div class="title">HP 63XL Compatible Ink 2-Pack</div>
<div class="price">$18.99<span class="listprice">$34.99</span></div>
<div class="savings">SAVE $16.00</div>
<div class="addcart">Add to Cart</div>
</div>
<div class="card">
<div class="imgbox b"></div>
<div class="compat">Canon PG-245</div>
<div class="title">Canon PG-245XL Black</div>
<div class="price">$14.49<span class="listprice">$24.99</span></div>
<div class="savings">SAVE $10.50</div>
<div class="addcart">Add to Cart</div>
</div>
<div class="card">
<div class="imgbox c"></div>
<div class="compat">Epson 702</div>
<div class="title">Epson 702 4-Color Set</div>
<div class="price">$29.99<span class="listprice">$52.00</span></div>
<div class="savings">SAVE $22.01</div>
<div class="addcart">Add to Cart</div>
</div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #646464; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; background: #e32525; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; background: #fafafa; color: #1c1c1c;
border: 1px solid #e32525; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #333333;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #646464; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #b2f9e9; color: #1c1c1c;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#1c1c1c; box-sizing:border-box;
font-family:'Jost','Myriad',Georgia,serif; }
* { box-sizing:border-box; }
.serif { font-family:'Big Caslon','Bodoni MT',Cardo,Georgia,serif; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.logo { font-family:'Big Caslon','Bodoni MT',Cardo,Georgia,serif; font-size:22px; font-weight:600; letter-spacing:0.5px; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:500; letter-spacing:1px; text-transform:uppercase; }
.icons { display:flex; gap:16px; font-size:14px; }
.stage { margin:8px 36px 0; background:#f7f7f8; border-radius:32px; padding:28px 36px;
display:flex; gap:36px; height:452px; }
.shot { width:340px; position:relative; display:flex; align-items:center; justify-content:center; }
.knife { position:relative; width:280px; }
.blade { width:220px; height:46px; background:linear-gradient(180deg,#e9ecef,#b7bec7);
clip-path:polygon(0 30%, 78% 0, 100% 50%, 78% 100%, 0 70%); margin-left:50px; }
.handle { width:100px; height:34px; background:linear-gradient(180deg,#333844,#0d0d0d); border-radius:6px;
margin-top:-40px; }
.badge-new { position:absolute; top:0; left:0; background:#b2f9e9; color:#1c1c1c; font-size:10px;
font-weight:700; letter-spacing:0.5px; text-transform:uppercase; border-radius:4px; padding:2px 8px; }
.thumbstrip { position:absolute; bottom:-6px; display:flex; gap:8px; }
.thumbstrip div { width:44px; height:44px; border-radius:8px; background:#e5e5e5; }
.thumbstrip div:nth-child(1) { background:linear-gradient(180deg,#e9ecef,#0d0d0d); }
.thumbstrip div:nth-child(2) { background:linear-gradient(135deg,#272d45,#676986); }
.thumbstrip div:nth-child(3) { background:linear-gradient(135deg,#333,#111); }
.info { flex:1; display:flex; flex-direction:column; min-width:0; }
.eyebrow { font-size:11px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; color:#646464; margin-bottom:8px; }
.name { font-family:'Big Caslon','Bodoni MT',Cardo,Georgia,serif; font-size:32px; font-weight:600;
line-height:1.2; letter-spacing:-0.3px; margin:0 0 10px; max-width:420px; }
.badges { display:flex; gap:8px; margin-bottom:14px; }
.badge-mat { background:#676986; color:#fff; font-size:11px; font-weight:500; letter-spacing:0.5px;
text-transform:uppercase; border-radius:9999px; padding:4px 12px; }
.badge-sale { background:#e32525; color:#fff; font-size:10px; font-weight:700; letter-spacing:0.5px;
text-transform:uppercase; border-radius:4px; padding:3px 8px; }
.stars { font-size:14px; color:#2c3e50; margin-bottom:10px; }
.stars span { color:#646464; font-family:'Jost',sans-serif; font-weight:400; margin-left:6px; font-size:13px; }
.price { font-family:'Jost',sans-serif; font-size:22px; font-weight:600; margin-bottom:18px; }
.desc { font-size:14px; color:#333; line-height:1.6; margin-bottom:18px; max-width:420px;
font-family:'Jost','Myriad',Georgia,serif; }
.cta-row { display:flex; gap:12px; margin-top:auto; }
.btn-add { flex:1; background:#e32525; color:#fff; border:none; border-radius:9999px; height:48px;
font-family:'Jost',sans-serif; font-size:14px; font-weight:600; letter-spacing:1px; text-transform:uppercase; }
.btn-sec { width:150px; background:#fafafa; color:#1c1c1c; border:1px solid #e5e5e5; border-radius:9999px; height:48px;
font-family:'Jost',sans-serif; font-size:14px; font-weight:600; letter-spacing:1px; text-transform:uppercase; }
footer { padding:14px 36px; display:flex; justify-content:space-between; align-items:center;
font-size:12px; color:#aaaaaa; background:#1c1c1c; }
footer .fl span { margin-left:20px; color:#fafafa; letter-spacing:0.5px; }
</style></head>
<body>
<nav>
<div class="logo">Cangshan</div>
<div class="navlinks"><span>Forged</span><span>German Steel</span><span>Cookware</span><span>Sets</span></div>
<div class="icons">⌕ ♡ 🛒</div>
</nav>
<div class="stage">
<div class="shot">
<span class="badge-new">New</span>
<div class="knife">
<div class="blade"></div>
<div class="handle"></div>
</div>
<div class="thumbstrip"><div></div><div></div><div></div></div>
</div>
<div class="info">
<div class="eyebrow">Haku Series</div>
<h1 class="name">8" Damascus Chef's Knife</h1>
<div class="badges"><span class="badge-mat">Damascus Steel</span><span class="badge-sale">Sale</span></div>
<div class="stars">★★★★★ <span>4.8 (562 reviews)</span></div>
<div class="price">$189.00</div>
<p class="desc">67-layer Damascus-clad blade forged around a VG-10 core, hand-finished with a full tang and rosewood handle for balance through every cut.</p>
<div class="cta-row">
<button class="btn-add">Add to Cart</button>
<button class="btn-sec">View Details</button>
</div>
</div>
</div>
<footer>
<span>© Cangshan</span>
<div class="fl"><span>Care Guide</span><span>Warranty</span><span>Sharpening</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.3; background: #313131; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.3; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #e2e2e2; color: #313131;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Juno Records Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#313131; }
*{box-sizing:border-box;}
.nav{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #dcdcdc;}
.logo{font-weight:600;font-size:17px;}
.navlinks{display:flex;gap:16px;font-size:13px;font-weight:600;}
.navlinks .active{color:#313131;font-weight:700;}
.search{width:220px;height:28px;border:1px solid #dcdcdc;border-radius:4px;font-size:12px;color:#777;line-height:28px;padding:0 10px;}
.genres{display:flex;gap:6px;padding:8px 20px;background:#f5f5f5;}
.gpill{background:#f5f5f5;border-radius:999px;font-size:11px;padding:4px 12px;border:1px solid transparent;}
.gpill.active{background:#313131;color:#fff;}
.main{display:flex;gap:12px;padding:12px 20px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;flex:1;}
.card{background:#fff;padding:8px;}
.imgbox{width:100%;height:90px;position:relative;border-radius:4px;}
.badge{position:absolute;top:0;left:0;font-size:9px;font-weight:600;text-transform:uppercase;padding:2px 6px;color:#313131;background:#ffcc00;}
.badge.new{background:#ff6600;color:#fff;}
.title{font-size:13px;font-weight:600;margin-top:6px;}
.artist{font-size:12px;color:#777;}
.price{font-size:13px;font-weight:600;margin-top:2px;}
.stock{font-size:10px;color:#2ecc71;margin-top:2px;}
</style>
<div class="nav">
<div class="logo">Juno Records</div>
<div class="navlinks"><span class="active">Vinyl</span><span>CD</span><span>Digital</span><span>Equipment</span><span>Charts</span></div>
<div class="search">Search artist, label, catalog no…</div>
</div>
<div class="genres">
<div class="gpill active">House</div><div class="gpill">Techno</div><div class="gpill">Drum & Bass</div><div class="gpill">Disco</div><div class="gpill">Ambient</div>
</div>
<div class="main">
<div class="grid">
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#d0a8d8,#7a3f9c);"><div class="badge">Sale</div></div>
<div class="title">Nocturne EP</div>
<div class="artist">Marcus Weld</div>
<div class="price">£12.99</div>
<div class="stock">In Stock</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#a8d8d0,#3f9c8a);"><div class="badge new">New</div></div>
<div class="title">Deep Sessions Vol. 3</div>
<div class="artist">Rae Solis</div>
<div class="price">£14.99</div>
<div class="stock">In Stock</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#d8c8a8,#9c7a3f);"></div>
<div class="title">Analog Fragments</div>
<div class="artist">Ives Corren</div>
<div class="price">£16.99</div>
<div class="stock" style="color:#ff9900;">Low Stock</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#a8b0d8,#3f4f9c);"></div>
<div class="title">Warehouse Cuts 002</div>
<div class="artist">DJ Halvorsen</div>
<div class="price">£11.99</div>
<div class="stock">In Stock</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#d8a8b0,#9c3f4f);"><div class="badge">Sale</div></div>
<div class="title">Late Night Frequencies</div>
<div class="artist">Ondine Park</div>
<div class="price">£13.99</div>
<div class="stock">In Stock</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#c8d8a8,#7a9c3f);"></div>
<div class="title">Root & Rhythm</div>
<div class="artist">Tobin Reyes</div>
<div class="price">£15.99</div>
<div class="stock" style="color:#cc0000;">Out of Stock</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#e0d0c0,#a08060);"></div>
<div class="title">Sundial Sessions</div>
<div class="artist">Freya Nash</div>
<div class="price">£12.49</div>
<div class="stock">In Stock</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#c0c0e0,#5050a0);"><div class="badge new">New</div></div>
<div class="title">Static Bloom EP</div>
<div class="artist">Kite & Ember</div>
<div class="price">£13.49</div>
<div class="stock">In Stock</div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #76b900; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #76b900; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #3e5d09; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #bff230; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #76b900; color: #000000;
border: 1px solid #bff230; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #76b900; color: #111111;
border: 1px solid #669e03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #3e5d09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #82c208; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:"Arial", "Helvetica", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #5e5e5e; }
.brand { font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; }
.btn-green { border:2px solid #76b900; border-radius:2px; padding:9px 13px; font-size:14px; font-weight:700;
color:#ffffff; }
.hero { padding:30px 32px 0; }
.label-green { color:#76b900; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:10px; }
.hero h1 { font-size:36px; font-weight:700; line-height:1.25; margin:0 0 12px; max-width:560px; }
.hero p { font-size:18px; color:#a7a7a7; line-height:1.6; max-width:500px; margin:0 0 20px; }
.metricbar { display:flex; gap:24px; margin-bottom:24px; }
.metric { border-left:2px solid #76b900; padding-left:14px; }
.metric .num { font-size:32px; font-weight:700; }
.metric .unit { font-size:14px; color:#a7a7a7; }
.cards { display:flex; gap:16px; padding:0 32px; }
.card { flex:1; background:#ffffff; color:#000000; border-radius:2px; padding:18px; box-shadow:rgba(0,0,0,0.3) 0px 0px 5px 0px; }
.card h3 { font-size:20px; font-weight:700; margin:0 0 8px; border-bottom:2px solid #76b900; display:inline-block; padding-bottom:4px; }
.card p { font-size:15px; color:#757575; line-height:1.6; margin:0 0 12px; }
.card .cta { display:inline-block; border:1px solid #76b900; border-radius:2px; padding:6px 12px; font-size:13px; font-weight:700; }
.darkcard { flex:1; background:#1a1a1a; color:#ffffff; border-radius:2px; padding:18px; border:1px solid #5e5e5e; }
.darkcard h3 { font-size:20px; font-weight:700; margin:0 0 8px; border-bottom:2px solid #76b900; display:inline-block; padding-bottom:4px; }
.darkcard p { font-size:15px; color:#a7a7a7; line-height:1.6; margin:0; }
</style></head>
<body>
<nav>
<span class="brand">NVIDIA</span>
<div class="navlinks"><span>Platforms</span><span>Solutions</span><span>Developer</span></div>
<span class="btn-green">Learn More</span>
</nav>
<div class="hero">
<div class="label-green">Accelerated Computing</div>
<h1>The lowest cost per token, at scale.</h1>
<p>Cost per token is the key metric for inference TCO — and this platform leads on the metric that matters.</p>
<div class="metricbar">
<div class="metric"><div class="num">4.2x</div><div class="unit">tokens / sec</div></div>
<div class="metric"><div class="num">192GB</div><div class="unit">HBM memory</div></div>
<div class="metric"><div class="num">99.9%</div><div class="unit">uptime</div></div>
</div>
</div>
<div class="cards">
<div class="card"><h3>Platform</h3><p>A single stack from silicon to application, built for training and inference.</p><span class="cta">Explore Platform</span></div>
<div class="darkcard"><h3>Research</h3><p>Open papers, reference code, and reproducible benchmarks published together.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"SST W20 Roman", -apple-system, Arial, sans-serif; }
* { box-sizing:border-box; }
header { height:60px; background:#000000; display:flex; align-items:center; }
.navlist { display:flex; height:100%; }
.navlist a { color:#ffffff; font-size:14px; padding:20px 13px; }
main { padding:36px 44px; }
h1.m-h1 { font-size:30px; font-weight:700; line-height:42px; margin:0 0 10px; color:#191919; }
p.m-text-lead { font-size:16px; font-weight:400; line-height:32px; color:#656565; margin:0 0 28px; max-width:600px; }
.products { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid #ddd; border-left:1px solid #ddd; }
.p { border-right:1px solid #ddd; border-bottom:1px solid #ddd; padding:20px 16px; }
.p .sw { height:70px; margin-bottom:14px; background:linear-gradient(160deg,#e8e8e8,#c9c9c9); }
.p h3 { font-size:14px; font-weight:700; margin:0 0 4px; color:#191919; }
.p span { font-size:11.5px; color:#656565; }
footer { position:absolute; bottom:0; width:960px; height:48px; background:#0a0a0a; color:#bbb;
display:flex; align-items:center; justify-content:space-between; padding:0 44px; font-size:11px; }
</style></head>
<body>
<header>
<div class="navlist">
<a>Sony</a><a>Electronics</a><a>Entertainment</a><a>Games & Network</a><a>Music</a><a>Pictures</a>
</div>
</header>
<main>
<h1 class="m-h1">Fill the world with emotion.</h1>
<p class="m-text-lead">Creativity and technology, across every business — from imaging and sensing to games, music, and pictures.</p>
<div class="products">
<div class="p"><div class="sw"></div><h3>BRAVIA</h3><span>Television</span></div>
<div class="p"><div class="sw"></div><h3>Xperia</h3><span>Mobile</span></div>
<div class="p"><div class="sw"></div><h3>PlayStation</h3><span>Games & Network</span></div>
<div class="p"><div class="sw"></div><h3>α (Alpha)</h3><span>Imaging</span></div>
</div>
</main>
<footer>
<span>© Sony Group Corporation</span>
<span>Purpose & Values · History · Careers</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf6f0; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf6f0; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #727272; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #ef776a; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #faf6f0; color: #212121;
border: 1px solid #ef776a; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #212121;
border: 1px solid #c4c1bc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #727272; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #ef776a; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#faf6f0; color:#43423c; box-sizing:border-box;
font-family:-apple-system,system-ui,'Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; background:#faf6f0; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:20px; font-weight:500; color:#212121; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; text-transform:uppercase; letter-spacing:0.2px; }
.navlinks span.active { color:#ef776a; }
.navlinks span:not(.active) { color:#727272; }
.search-pill { width:170px; height:38px; border-radius:9999px; background:#fff; border:1px solid #d1d5db; font-size:12px; color:#727272;
display:flex; align-items:center; padding:0 18px; }
.hero { height:200px; display:flex; align-items:center; justify-content:space-between; padding:0 44px; }
.hero h1 { font-size:36px; font-weight:700; color:#212121; margin:0 0 12px; line-height:1.15; max-width:420px; letter-spacing:-0.5px; }
.hero p { font-size:15px; color:#43423c; margin:0 0 16px; max-width:380px; }
.btn-coral { display:inline-block; background:#ef776a; color:#fff; font-size:16px; font-weight:500; letter-spacing:0.3px;
padding:14px 32px; border-radius:9999px; }
.bottles { display:flex; gap:14px; align-items:flex-end; }
.bottle { width:44px; height:104px; border-radius:16px 16px 6px 6px; background:linear-gradient(160deg,#ebdfcf,#dcc8ab); position:relative; }
.bottle.tall { height:130px; background:linear-gradient(160deg,#ef776a,#da2a17); }
.bottle::before { content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:14px; height:14px; border-radius:3px; background:#cdb087; }
.grid { display:flex; gap:16px; padding:16px 44px 0; }
.card { flex:1; background:#ffffff; border-radius:8px; overflow:hidden; }
.card .imgbox { height:110px; background:#f7f5f4; display:flex; align-items:center; justify-content:center; position:relative; }
.mini-bottle { width:28px; height:62px; border-radius:10px 10px 4px 4px; background:linear-gradient(160deg,#ef776a,#b83520); }
.badge { position:absolute; top:8px; left:8px; font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:0.5px;
color:#fff; padding:4px 12px; border-radius:9999px; }
.badge.red { background:#da2a17; }
.badge.green { background:#24c761; }
.badge.beige { background:#cdb087; color:#212121; }
.card .body { padding:12px 14px 14px; }
.card .name { font-size:16px; font-weight:500; color:#212121; margin-bottom:4px; }
.card .price { font-size:16px; color:#43423c; }
footer { position:absolute; bottom:0; left:0; right:0; height:90px; background:#212121; color:#faf6f0; display:flex;
align-items:center; justify-content:space-between; padding:0 44px; }
footer .col { font-size:12px; line-height:1.9; color:#9ca3af; }
footer .col b { display:block; color:#faf6f0; margin-bottom:3px; }
.wrap { position:relative; height:640px; }
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="brand">Dossier</div>
<div class="navlinks"><span class="active">Fragrance</span><span>Sets</span><span>About</span><span>Journal</span></div>
<div class="search-pill">Find your scent</div>
</nav>
<div class="hero">
<div>
<h1>Made-in-France perfume, without the luxury markup.</h1>
<p>The same houses, the same ingredients, an honest price.</p>
<a class="btn-coral">Shop Fragrance</a>
</div>
<div class="bottles"><div class="bottle"></div><div class="bottle tall"></div><div class="bottle"></div></div>
</div>
<div class="grid">
<div class="card"><span class="badge red">New</span><div class="imgbox"><div class="mini-bottle"></div></div><div class="body"><div class="name">Ambre Nuit EDP</div><div class="price">$49</div></div></div>
<div class="card"><span class="badge green">Sale</span><div class="imgbox"><div class="mini-bottle"></div></div><div class="body"><div class="name">Bergamot Bloom EDT</div><div class="price">$39</div></div></div>
<div class="card"><span class="badge beige">Best Seller</span><div class="imgbox"><div class="mini-bottle"></div></div><div class="body"><div class="name">Santal Rouge EDP</div><div class="price">$49</div></div></div>
<div class="card"><div class="imgbox"><div class="mini-bottle"></div></div><div class="body"><div class="name">Discovery Set, 5x2ml</div><div class="price">$25</div></div></div>
</div>
<footer>
<div class="col"><b>Shop</b>Fragrance<br>Discovery Sets</div>
<div class="col"><b>Learn</b>Notes Guide<br>Journal</div>
<div class="col"><b>Dossier</b>Fair prices, French-made.</div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 26px; font-weight: 400; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5a5a5a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #1990c6; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #1990c6; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a5a5a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #1990c6; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#121212; font-family:'Montserrat','Figtree',Arial,sans-serif; color:#f5f0e8;
}
*{box-sizing:border-box;}
.nav{height:60px; display:flex; align-items:center; padding:0 30px; border-bottom:1px solid #2a2a2a;}
.logo{font-family:'Baskerville','Iowan Old Style',Georgia,serif; font-size:22px; letter-spacing:1px; color:#f5f0e8;}
.navlinks{display:flex; gap:22px; margin-left:36px; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#c9c2b3;}
.navicons{margin-left:auto; font-size:11px; letter-spacing:1px; color:#c9c2b3;}
.hero{display:flex; align-items:center; gap:34px; padding:26px 30px; background:linear-gradient(120deg,#121212 0%,#1a2a33 100%);}
.heroText{flex:1;}
.heroText .eyebrow{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#c9a96e; margin-bottom:10px;}
.heroText h1{font-family:'Baskerville','Iowan Old Style',Georgia,serif; font-size:34px; line-height:1.2; margin:0 0 12px; max-width:400px;}
.heroText p{font-size:13px; color:#c9c2b3; line-height:1.6; max-width:380px; margin:0 0 16px;}
.heroBtn{display:inline-block; background:#1990c6; color:#fff; padding:12px 26px; border-radius:8px; font-size:12px; font-weight:600;}
.heroArt{width:230px; height:170px; border-radius:10px; background:radial-gradient(circle at 40% 30%, #1990c6 0%, #136f99 55%, #121212 100%); position:relative; flex-shrink:0;}
.heroArt::after{content:''; position:absolute; left:35%; right:35%; top:20%; bottom:35%; background:#c9a96e; opacity:.3; border-radius:6px 6px 20px 20px;}
.section{padding:14px 30px 0;}
.sectitle{font-family:'Baskerville','Iowan Old Style',Georgia,serif; font-size:19px; margin:0 0 12px;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.card{background:#1a1a1a; border-radius:10px; padding:10px; text-align:center; position:relative;}
.thumb{height:76px; border-radius:8px; margin-bottom:8px; position:relative;}
.t1{background:radial-gradient(circle at 40% 30%,#c9a96e,#7a5a2e);}
.t2{background:radial-gradient(circle at 40% 30%,#1990c6,#0d4a63);}
.t3{background:radial-gradient(circle at 40% 30%,#e94c89,#8a1f4a);}
.t4{background:radial-gradient(circle at 40% 30%,#dedede,#8a8a8a);}
.badge{position:absolute; top:5px; right:5px; background:#c13515; color:#fff; font-size:8px; font-weight:700; padding:2px 6px; border-radius:999px;}
.pname{font-size:12px; font-weight:600; margin-bottom:3px; color:#f5f0e8;}
.pprice{font-size:12px; color:#c9a96e; font-weight:700;}
.footer{position:absolute; bottom:0; left:0; right:0; background:#000; color:#8a8a8a; font-size:10px; text-align:center; padding:8px 0;}
</style>
<div class="nav">
<div class="logo">Harlem Candle Company</div>
<div class="navlinks"><span>Candles</span><span>Fragrance</span><span>Gift Sets</span><span>Journal</span></div>
<div class="navicons">Search · Account · Bag</div>
</div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">The Renaissance Collection</div>
<h1>Scent as a Story of Harlem</h1>
<p>Hand-poured candles that channel the cultural and artistic energy of the Harlem Renaissance through scent.</p>
<div class="heroBtn">Shop Candles</div>
</div>
<div class="heroArt"></div>
</div>
<div class="section">
<div class="sectitle">Signature Scents</div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="badge">SALE</span></div><div class="pname">Bronzeville Nights</div><div class="pprice">$48</div></div>
<div class="card"><div class="thumb t2"></div><div class="pname">Cotton Club Noir</div><div class="pprice">$52</div></div>
<div class="card"><div class="thumb t3"></div><div class="pname">Marcus Garvey Rum</div><div class="pprice">$48</div></div>
<div class="card"><div class="thumb t4"></div><div class="pname">The Society Set</div><div class="pprice">$96</div></div>
</div>
</div>
<div class="footer">© Harlem Candle Company — Luxury Candles, Harlem Made</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b0b0f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b0b0f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c8c8e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4fd1c5; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0b0f; color: #4fd1c5;
border: 1px solid #4fd1c5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b0b0f; color: #f5f5f5;
border: 1px solid #303034; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #162b2c; color: #4fd1c5;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0B0B0F; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-variant-numeric: tabular-nums; }
* { box-sizing:border-box; }
.screen { display:flex; flex-direction:column; width:960px; height:640px; }
nav { height:56px; flex:0 0 56px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; }
.date-sel { font-size:20px; font-weight:700; letter-spacing:-0.3px; color:#FFFFFF; display:flex; align-items:center; gap:6px; }
.date-sel span { color:#6A6A73; font-size:14px; }
.topright { display:flex; align-items:center; gap:16px; }
.battery { width:20px; height:20px; border-radius:50%; background:conic-gradient(#9A9AA5 0deg 232deg, #27272F 232deg 360deg);
display:flex; align-items:center; justify-content:center; }
.battery::after { content:''; width:13px; height:13px; border-radius:50%; background:#0B0B0F; }
.battery-pct { font-size:11px; color:#9A9AA5; font-weight:600; }
.avatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#4FD1C5,#7C6FF0); }
main { flex:1; display:grid; grid-template-columns:1.55fr 1fr; gap:22px; padding:6px 28px 0 28px; }
.col { display:flex; flex-direction:column; gap:14px; }
.hero-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:6px; }
.ring-hero { width:172px; height:172px; border-radius:50%;
background:conic-gradient(#4FD1C5 0deg 295deg, #27272F 295deg 360deg);
display:flex; align-items:center; justify-content:center; }
.ring-hero-inner { width:150px; height:150px; border-radius:50%; background:#0B0B0F;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.ring-score { font-size:44px; font-weight:700; letter-spacing:-1pt; line-height:1; }
.ring-label { font-size:12px; font-weight:700; letter-spacing:0.8pt; color:#4FD1C5; text-transform:uppercase; }
.hero-note { font-size:13px; color:#9A9AA5; text-align:center; max-width:320px; }
.card { background:#16161C; border-radius:16px; padding:16px 18px; }
.card-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#9A9AA5; margin-bottom:8px; }
.contrib-row { display:flex; align-items:center; justify-content:space-between; height:38px; border-bottom:1px solid #2A2A33; }
.contrib-row:last-child { border-bottom:none; }
.contrib-name { font-size:14px; font-weight:600; color:#FFFFFF; width:130px; flex:0 0 130px; }
.minibar-track { flex:1; height:6px; border-radius:3px; background:#27272F; margin:0 12px; overflow:hidden; }
.minibar-fill { height:100%; border-radius:3px; }
.contrib-val { font-size:13px; font-weight:600; color:#FFFFFF; width:42px; text-align:right; flex:0 0 42px; }
.rings-row { display:flex; gap:14px; }
.ring-med-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; background:#16161C; border-radius:16px; padding:12px 8px; }
.ring-med { width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.ring-med-inner { width:64px; height:64px; border-radius:50%; background:#16161C;
display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-med-score { font-size:20px; font-weight:700; }
.ring-med-label { font-size:10px; font-weight:700; letter-spacing:0.6pt; text-transform:uppercase; margin-top:2px; }
.tile-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tile { background:#16161C; border-radius:16px; padding:12px 14px; display:flex; flex-direction:column; gap:5px; }
.tile-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#9A9AA5; }
.tile-value { font-size:20px; font-weight:600; }
.tile-unit { font-size:12px; font-weight:400; color:#9A9AA5; }
.tile-delta { font-size:12px; font-weight:600; }
.insight { display:flex; gap:12px; align-items:flex-start; }
.insight-glyph { width:26px; height:26px; border-radius:8px; flex:0 0 26px; background:linear-gradient(135deg,#7C6FF0,#4FD1C5); margin-top:2px; }
.insight-title { font-size:15px; font-weight:600; color:#FFFFFF; }
.insight-body { font-size:12px; color:#9A9AA5; margin-top:2px; line-height:1.4; }
.tabbar { flex:0 0 56px; display:flex; align-items:center; justify-content:space-around;
background:rgba(11,11,15,0.82); border-top:1px solid #2A2A33; }
.tab { display:flex; flex-direction:column; align-items:center; gap:4px; }
.tab-dot { width:6px; height:6px; border-radius:50%; }
.tab.active .tab-dot { background:#FFFFFF; }
.tab:not(.active) .tab-dot { background:#6A6A73; }
.tab-label { font-size:11px; font-weight:600; letter-spacing:0.2pt; }
.tab.active .tab-label { color:#FFFFFF; }
.tab:not(.active) .tab-label { color:#6A6A73; }
</style></head>
<body>
<div class="screen">
<nav>
<div class="date-sel">Oura (iOS) <span>Today ⌄</span></div>
<div class="topright">
<div class="battery"></div>
<span class="battery-pct">86%</span>
<div class="avatar"></div>
</div>
</nav>
<main>
<div class="col">
<div class="hero-wrap">
<div class="ring-hero">
<div class="ring-hero-inner">
<div class="ring-score">82</div>
<div class="ring-label">Readiness</div>
</div>
</div>
<div class="hero-note">Your recovery is strong today — HRV trending up and resting heart rate is low.</div>
</div>
<div class="card">
<div class="card-title">Contributors</div>
<div class="contrib-row">
<span class="contrib-name">Sleep Balance</span>
<div class="minibar-track"><div class="minibar-fill" style="width:88%;background:#4FD1C5;"></div></div>
<span class="contrib-val">Optimal</span>
</div>
<div class="contrib-row">
<span class="contrib-name">Resting Heart Rate</span>
<div class="minibar-track"><div class="minibar-fill" style="width:74%;background:#4FD1C5;"></div></div>
<span class="contrib-val">54 bpm</span>
</div>
<div class="contrib-row">
<span class="contrib-name">HRV Balance</span>
<div class="minibar-track"><div class="minibar-fill" style="width:80%;background:#4FD1C5;"></div></div>
<span class="contrib-val">62 ms</span>
</div>
<div class="contrib-row">
<span class="contrib-name">Recovery Index</span>
<div class="minibar-track"><div class="minibar-fill" style="width:69%;background:#4FD1C5;"></div></div>
<span class="contrib-val">Good</span>
</div>
</div>
</div>
<div class="col">
<div class="rings-row">
<div class="ring-med-wrap">
<div class="ring-med" style="background:conic-gradient(#7C6FF0 0deg 266deg, #27272F 266deg 360deg);">
<div class="ring-med-inner"><div class="ring-med-score">74</div></div>
</div>
<div class="ring-med-label" style="color:#7C6FF0;">Sleep</div>
</div>
<div class="ring-med-wrap">
<div class="ring-med" style="background:conic-gradient(#F5A623 0deg 328deg, #27272F 328deg 360deg);">
<div class="ring-med-inner"><div class="ring-med-score">91</div></div>
</div>
<div class="ring-med-label" style="color:#F5A623;">Activity</div>
</div>
</div>
<div class="tile-grid">
<div class="tile">
<span class="tile-label">HRV</span>
<span><span class="tile-value">62</span><span class="tile-unit"> ms</span></span>
<span class="tile-delta" style="color:#4FD1C5;">+4</span>
</div>
<div class="tile">
<span class="tile-label">Resting HR</span>
<span><span class="tile-value">54</span><span class="tile-unit"> bpm</span></span>
<span class="tile-delta" style="color:#E0746B;">−2</span>
</div>
</div>
<div class="card insight">
<div class="insight-glyph"></div>
<div>
<div class="insight-title">Your HRV is trending up</div>
<div class="insight-body">A steady rise over 7 days suggests your body is adapting well to recent training load.</div>
</div>
</div>
</div>
</main>
<div class="tabbar">
<div class="tab active"><span class="tab-dot"></span><span class="tab-label">Today</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Vitals</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">My Health</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Explore</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0b0b0b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0b0b0b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.25; margin: 0; color: #0b0b0b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6d7175; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: #f94c43; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: #ffffff; color: #0b0b0b;
border: 1px solid #f94c43; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #0b0b0b;
border: 1px solid #c2c2c2; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d7175; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 800; line-height: 1.2; letter-spacing: 0.6px; background: #f94c43; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0b0b0b; box-sizing:border-box;
font-family:Mulish,sans-serif; }
* { box-sizing:border-box; }
.announce { height:32px; background:#0b0b0b; color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; letter-spacing:.4px; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; border-bottom:1px solid #dedede; }
.brand { font-family:Georgia,serif; font-size:20px; margin:0; }
.navlinks { display:flex; gap:20px; font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; }
.cart { font-size:11px; font-weight:700; text-transform:uppercase; }
.hero { display:flex; padding:22px 36px; gap:20px; align-items:center; }
.heroimg { flex:1; height:200px; background:linear-gradient(135deg,#f94c43,#f6a429); position:relative; }
.heroimg::after { content:''; position:absolute; left:20px; top:16px; font-family:Georgia,serif; font-size:13px; font-weight:700; color:#fff; content:'JUST DROPPED'; }
.herotext { flex:1; }
.herotext .eyebrow { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#f94c43; margin:0 0 8px; }
.herotext h1 { font-family:Georgia,serif; font-size:32px; font-weight:400; margin:0 0 10px; line-height:1.1; }
.herotext p { font-size:13px; color:#6d7175; margin:0 0 12px; }
.btn { display:inline-block; background:#f94c43; color:#fff; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:13px 26px; }
.pillrow { display:flex; gap:8px; padding:0 36px 14px; }
.fpill { border:1px solid #dedede; border-radius:999px; padding:6px 14px; font-size:11px; font-weight:700; text-transform:uppercase; }
.fpill.active { background:#0b0b0b; color:#fff; border-color:#0b0b0b; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:0 36px; }
.card { position:relative; }
.card-img { height:96px; background:linear-gradient(135deg,#f6a429,#f94c43); position:relative; }
.badge { position:absolute; top:6px; left:6px; font-size:9px; font-weight:800; text-transform:uppercase; padding:3px 7px; }
.badge.new { background:#0b0b0b; color:#fff; }
.badge.personalize { background:#f6a429; color:#0b0b0b; }
.card h3 { font-size:13px; font-weight:400; margin:8px 0 4px; }
.price { font-size:14px; font-weight:700; }
.swrow { display:flex; gap:5px; margin-top:6px; }
.sw { width:14px; height:14px; border-radius:50%; }
footer { position:absolute; bottom:0; left:0; right:0; height:40px; background:#0b0b0b; color:#c5c8d1;
display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; }
</style></head>
<body>
<div class="announce">JUST DROPPED: The Aurora Charm Collection — Shop Now</div>
<nav>
<p class="brand">Baublebar</p>
<div class="navlinks"><span>New</span><span>Charms</span><span>Bracelets</span><span>Gifting</span></div>
<div class="cart">Bag (3)</div>
</nav>
<section class="hero">
<div class="heroimg"></div>
<div class="herotext">
<p class="eyebrow">Limited Drop</p>
<h1>Charm Bracelets, Layered Your Way</h1>
<p>Personalize your set with initials, birthstones, and charms that actually mean something.</p>
<span class="btn">Shop the Drop</span>
</div>
</section>
<div class="pillrow">
<div class="fpill active">All</div><div class="fpill">Charms</div><div class="fpill">Gold</div><div class="fpill">Gifting</div>
</div>
<div class="grid">
<div class="card">
<div class="card-img"><span class="badge new">New</span></div>
<h3>Sherbet Charm Set</h3>
<div class="price">$58</div>
<div class="swrow"><div class="sw" style="background:#f94c43"></div><div class="sw" style="background:#f6a429"></div></div>
</div>
<div class="card">
<div class="card-img"><span class="badge personalize">Personalize</span></div>
<h3>Initial Pendant Necklace</h3>
<div class="price">$42</div>
<div class="swrow"><div class="sw" style="background:#c9a961"></div></div>
</div>
<div class="card">
<div class="card-img"></div>
<h3>Lavender Beaded Bracelet</h3>
<div class="price">$36</div>
<div class="swrow"><div class="sw" style="background:#c5c8d1"></div></div>
</div>
<div class="card">
<div class="card-img"></div>
<h3>Layered Chain Set</h3>
<div class="price">$64</div>
<div class="swrow"><div class="sw" style="background:#009879"></div></div>
</div>
</div>
<footer>
<span>© Baublebar</span>
<span>Baublebar · Gifting · Personalize · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.8px; background: #f78f1e; color: #000000;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.8px; background: #ffffff; color: #212121;
border: 1px solid #f78f1e; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #212121;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.2px; background: #00c2c7; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212121; box-sizing:border-box;
font-family:'Jost', Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
.promo { height:34px; background:#f78f1e; color:#fff; display:flex; align-items:center; justify-content:center;
font-size:12px; font-weight:500; letter-spacing:0.2px; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; border-bottom:1px solid #e5e5e5; }
.brand { color:#f78f1e; font-size:20px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:24px; font-size:15px; color:#212121; }
.btn-primary { background:#f78f1e; color:#fff; border:none; border-radius:8px; padding:12px 26px;
font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.6px; }
.hero { display:flex; align-items:center; padding:24px 36px; gap:30px; background:#fbf8e7; }
.hero-copy { flex:1.1; }
.hero h1 { font-size:32px; font-weight:700; line-height:1.15; margin:0 0 10px; }
.hero p { font-size:15px; color:#444; margin:0 0 16px; max-width:400px; }
.hero-visual { flex:0.9; height:180px; display:flex; align-items:flex-end; gap:5px; justify-content:center; }
.peg { width:9px; height:100px; background:#00c2c7; border-radius:5px; }
.peg:nth-child(2n) { height:130px; background:#f78f1e; }
.peg:nth-child(3n) { height:70px; background:#ffbb49; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:14px 36px 20px; }
.card { background:#f2f2f2; border-radius:12px; padding:12px; position:relative; }
.card .imgbox { aspect-ratio:1/1; height:74px; background:#fff; border-radius:12px; margin-bottom:8px; }
.age-badge { position:absolute; top:8px; left:8px; background:#00c2c7; color:#fff; font-size:10px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; padding:3px 8px; border-radius:4px; }
.card h3 { font-size:15px; font-weight:600; margin:0 0 3px; }
.card .price { font-size:17px; font-weight:700; }
footer { background:#212121; color:#fff; padding:14px 36px; display:flex; justify-content:space-between;
align-items:center; font-size:12px; }
footer span:last-child { color:#8f8f8f; }
</style></head>
<body>
<div class="promo">Free shipping on orders over $49</div>
<nav>
<p class="brand">Boon</p>
<div class="navlinks"><span>Feeding</span><span>Bath</span><span>Play</span><span>Travel</span></div>
<button class="btn-primary">Shop Now</button>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Everyday baby gear you'll actually leave out</h1>
<p>The grass countertop drying rack that started it all — practical baby products designed to look good on your counter.</p>
<button class="btn-primary">Shop the Grass Rack</button>
</div>
<div class="hero-visual">
<div class="peg"></div><div class="peg"></div><div class="peg"></div><div class="peg"></div><div class="peg"></div><div class="peg"></div>
</div>
</section>
<section class="grid">
<div class="card"><div class="imgbox"><span class="age-badge">0–6M</span></div><h3>Grass Drying Rack</h3><div class="price">$32.99</div></div>
<div class="card"><div class="imgbox"><span class="age-badge">6–18M</span></div><h3>Frog Pod Bath Toy</h3><div class="price">$19.99</div></div>
<div class="card"><div class="imgbox"><span class="age-badge">2–4Y</span></div><h3>Flair High Chair</h3><div class="price">$249.99</div></div>
</section>
<footer>
<span>© Boon</span>
<span>Dishwasher safe · BPA free</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0096fa; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0096fa; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0086e0; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0096fa; color: #000000;
border: 1px solid #0086e0; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0096fa; color: #f5f5f5;
border: 1px solid #27a5f9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0093f6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 24px;
background:#ffffff; border-bottom:1px solid #dddddd; }
.brand { font-weight:700; font-size:19px; color:#1a1a1a; }
.brand span { color:#0096fa; }
.search { flex:1; max-width:400px; margin:0 20px; height:34px; border-radius:20px; background:#f5f5f5;
display:flex; align-items:center; padding:0 16px; color:#999999; font-size:13px; }
.navr { display:flex; align-items:center; gap:10px; }
.btn-blue { background:#0096fa; color:#fff; border:none; border-radius:6px; padding:8px 18px; font-size:13px; font-weight:700; }
.btn-out { background:#fff; color:#0096fa; border:1px solid #0096fa; border-radius:6px; padding:7px 16px; font-size:13px; font-weight:700; }
.tabs { height:42px; display:flex; align-items:center; gap:22px; padding:0 24px; border-bottom:1px solid #eeeeee; background:#fff; }
.tab { font-size:13px; color:#858585; font-weight:700; padding:0 2px; }
.tab.active { color:#0096fa; border-bottom:2px solid #0096fa; padding-bottom:12px; }
.grid { padding:16px 24px; display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; }
.card { background:#fff; border-radius:8px; overflow:hidden; }
.thumb { width:100%; height:150px; border-radius:8px; position:relative; }
.badge { position:absolute; top:6px; right:6px; background:rgba(0,0,0,0.6); color:#fff; font-size:10px; font-weight:700; border-radius:10px; padding:2px 7px; }
.r18 { position:absolute; top:6px; left:6px; background:#ff4060; color:#fff; font-size:10px; font-weight:700; border-radius:4px; padding:2px 6px; }
.title { font-size:12px; font-weight:700; color:#1a1a1a; margin-top:6px; padding:0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.author { display:flex; align-items:center; gap:5px; font-size:11px; color:#666666; margin-top:3px; padding:0 2px; }
.av { width:16px; height:16px; border-radius:50%; }
.heart { display:flex; align-items:center; gap:3px; margin-left:auto; font-size:10.5px; color:#858585; }
.heart.filled { color:#ff4060; }
.t1 { background:linear-gradient(145deg,#ffd6e0,#ff9db3); }
.t2 { background:linear-gradient(145deg,#c7e9ff,#7fc4ff); }
.t3 { background:linear-gradient(145deg,#d9f0d1,#9fd88a); }
.t4 { background:linear-gradient(145deg,#fff0c2,#ffd166); }
.t5 { background:linear-gradient(145deg,#e3d6ff,#b79bff); }
.t6 { background:linear-gradient(145deg,#ffe0d1,#ffab8a); }
.t7 { background:linear-gradient(145deg,#d1f0ea,#8adfce); }
.t8 { background:linear-gradient(145deg,#f0d1e6,#dd9dc0); }
.t9 { background:linear-gradient(145deg,#cfd9ff,#9aabff); }
.t10 { background:linear-gradient(145deg,#ffe8b0,#f5c26b); }
.side { position:absolute; right:0; top:98px; width:200px; height:522px; background:#fafafa; border-left:1px solid #eeeeee; padding:16px; }
.side h4 { font-size:13px; font-weight:700; margin:0 0 10px; color:#1a1a1a; }
.tag { display:inline-block; background:#f5f5f5; color:#0096fa; font-size:11px; padding:4px 8px; border-radius:4px; margin:0 5px 6px 0; }
</style></head>
<body>
<nav>
<div class="brand">pixiv</div>
<div class="search">Search by tag or artist</div>
<div class="navr">
<button class="btn-out">Log in</button>
<button class="btn-blue">Sign up</button>
</div>
</nav>
<div class="tabs">
<div class="tab active">All</div>
<div class="tab">Illustrations</div>
<div class="tab">Manga</div>
<div class="tab">Novels</div>
<div class="tab">Rankings</div>
</div>
<div class="grid" style="width:calc(960px - 200px);">
<div class="card"><div class="thumb t1"><div class="badge">3P</div></div><div class="title">Corner at Dusk</div><div class="author"><span class="av" style="background:#ff9db3;"></span>hana_art<span class="heart filled">♥ 812</span></div></div>
<div class="card"><div class="thumb t2"></div><div class="title">Under a Falling Star</div><div class="author"><span class="av" style="background:#7fc4ff;"></span>umi_draws<span class="heart">♡ 340</span></div></div>
<div class="card"><div class="thumb t3"><div class="r18">R-18</div></div><div class="title">Fragments of Memory</div><div class="author"><span class="av" style="background:#9fd88a;"></span>midori.k<span class="heart filled">♥ 1.2k</span></div></div>
<div class="card"><div class="thumb t4"></div><div class="title">Cat Nap</div><div class="author"><span class="av" style="background:#ffd166;"></span>nekomaru<span class="heart">♡ 205</span></div></div>
<div class="card"><div class="thumb t5"><div class="badge">6P</div></div><div class="title">Library of Another World</div><div class="author"><span class="av" style="background:#b79bff;"></span>ruri_sketch<span class="heart filled">♥ 640</span></div></div>
<div class="card"><div class="thumb t6"></div><div class="title">Beneath the Cherry Blossoms</div><div class="author"><span class="av" style="background:#ffab8a;"></span>sakura_ink<span class="heart">♡ 118</span></div></div>
<div class="card"><div class="thumb t7"></div><div class="title">Reflections on Water</div><div class="author"><span class="av" style="background:#8adfce;"></span>mizu.works<span class="heart filled">♥ 990</span></div></div>
<div class="card"><div class="thumb t8"></div><div class="title">Pastel Girl</div><div class="author"><span class="av" style="background:#dd9dc0;"></span>momo_illust<span class="heart">♡ 77</span></div></div>
<div class="card"><div class="thumb t9"><div class="badge">2P</div></div><div class="title">Clockwork City</div><div class="author"><span class="av" style="background:#9aabff;"></span>tetsu_draw<span class="heart filled">♥ 455</span></div></div>
<div class="card"><div class="thumb t10"></div><div class="title">An Autumn Gift</div><div class="author"><span class="av" style="background:#f5c26b;"></span>momiji.art<span class="heart">♡ 63</span></div></div>
</div>
<div class="side">
<h4>Popular tags</h4>
<span class="tag">#original</span><span class="tag">#landscape</span><span class="tag">#watercolor</span>
<span class="tag">#creative</span><span class="tag">#cat</span><span class="tag">#fantasy</span>
<span class="tag">#study</span><span class="tag">#sketch</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.35; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #3858e9; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #eeeeee; color: #1e1e1e;
border: 1px solid #3858e9; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f8f8f8; color: #1e1e1e;
border: 1px solid #bababa; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cc1818; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; background:#eeeeee; color:#424242; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:60px;background:#ffffff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d5d5d5;}
.logo{font-size:20px;font-weight:700;color:#3858e9;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;color:#424242;}
.hero{height:220px;display:flex;align-items:center;padding:0 34px;background:#f8f8f8;}
.heroText{width:48%;}
.h1{font-size:30px;font-weight:700;color:#1e1e1e;line-height:1.2;margin:0 0 10px;letter-spacing:-0.5px;}
.sub{font-size:15px;color:#757575;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#3858e9;color:#fff;font-size:15px;font-weight:600;padding:11px 24px;border-radius:8px;}
.heroImg{width:52%;height:170px;border-radius:12px;background:radial-gradient(circle at 35% 35%,#7f54b3,#3858e9 70%);position:relative;}
.dot{position:absolute;border-radius:50%;}
.d1{width:38px;height:38px;background:#fffce5;top:20px;left:40px;}
.d2{width:26px;height:26px;background:#cc1818;top:90px;left:110px;}
.d3{width:30px;height:30px;background:#4ab866;top:40px;right:60px;}
.sec{padding:18px 32px 0;}
.secTitle{font-size:18px;font-weight:600;color:#1e1e1e;margin-bottom:12px;}
.grid{display:flex;gap:16px;}
.card{width:198px;background:#f8f8f8;border-radius:12px;padding:12px;position:relative;}
.badge{position:absolute;top:10px;left:10px;font-size:10px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;color:#fff;padding:3px 8px;border-radius:8px;background:#cc1818;}
.thumb{height:96px;border-radius:8px;margin-bottom:10px;}
.ptitle{font-size:14px;font-weight:600;color:#1e1e1e;line-height:1.3;height:36px;overflow:hidden;}
.pprice{font-size:15px;font-weight:700;color:#1e1e1e;margin-top:6px;}
.stars{color:#e6db55;font-size:12px;margin-top:2px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Playmonster</div>
<div class="navlinks"><span>Games</span><span>Puzzles</span><span>Outdoor Play</span><span>New Releases</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Family game night, reinvented.</div>
<div class="sub">Award-winning games and toys built for the whole table to play together.</div>
<div class="cta">Shop New Releases</div>
</div>
<div class="heroImg"><div class="dot d1"></div><div class="dot d2"></div><div class="dot d3"></div></div>
</div>
<div class="sec">
<div class="secTitle">Best-Selling Games</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#3858e9,#7f54b3);"></div><div class="ptitle">Hoot Owl Hoot! Cooperative Game</div><div class="pprice">$16.99</div><div class="stars">★★★★★</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7f54b3,#3858e9);"></div><div class="ptitle">5 Second Rule Family Edition</div><div class="pprice">$14.99</div><div class="stars">★★★★☆</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4ab866,#3858e9);"></div><div class="ptitle">Backyard Bocce Ball Set</div><div class="pprice">$29.99</div><div class="stars">★★★★★</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3858e9,#4ab866);"></div><div class="ptitle">World's Smallest Puzzle Tin</div><div class="pprice">$9.99</div><div class="stars">★★★★☆</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #003388; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #f9f9f9; color: #003388;
border: 1px solid #003388; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9f9f9; color: #313131;
border: 1px solid #c7c7c7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #00d084; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Free League Publishing Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Open Sans',Arial,sans-serif; background:#f9f9f9; color:#313131; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
.nav { background:#003388; height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.logo { color:#fff; font-family:'Eksell Display Small',Georgia,serif; font-weight:700; font-size:21px; }
.navlinks { display:flex; gap:26px; color:#dbe6f7; font-family:'futura-pt','Open Sans',sans-serif; font-size:13px; font-weight:600; }
.navcta { background:#fff; color:#003388; font-weight:700; font-size:12.5px; padding:9px 18px; border-radius:999px; }
.hero { display:flex; padding:34px 40px; gap:36px; align-items:center; background:#003388; }
.hero-copy { flex:1; }
.hero h1 { font-family:'Eksell Display Small',Georgia,serif; font-size:36px; font-weight:700; letter-spacing:-.3px; line-height:1.2; margin:0 0 14px; color:#fff; }
.hero p { font-size:14px; color:#cddbf0; line-height:1.6; max-width:400px; margin:0 0 20px; }
.btn-primary { background:#cf6363; color:#fff; font-weight:700; font-size:13.5px; padding:11px 22px; border-radius:4px; display:inline-block; }
.hero-visual { flex:1; height:190px; display:flex; align-items:center; justify-content:center; }
.book { width:120px; height:160px; background:linear-gradient(160deg,#cf6363,#313131); border-radius:4px; box-shadow:0 20px 30px rgba(0,0,0,.35); position:relative; }
.book::after { content:''; position:absolute; top:20px; left:14px; right:14px; height:3px; background:rgba(255,255,255,.5); }
.strip { display:flex; background:#eeeeee; }
.strip div { flex:1; text-align:center; padding:10px; font-size:11px; font-weight:700; color:#313131; border-right:1px solid #dcdcdc; }
.strip div:last-child { border-right:none; }
.section { padding:22px 40px; flex:1; }
.section h2 { font-family:'Eksell Display Small',Georgia,serif; font-size:20px; font-weight:700; margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#fff; border:1px solid #dcdcdc; border-radius:4px; padding:14px; }
.card .ph { height:76px; border-radius:4px; margin-bottom:10px; }
.card .name { font-family:'beaufort-pro',serif; font-weight:700; font-size:14px; margin-bottom:3px; }
.card .desc { font-size:11px; color:#444; margin-bottom:8px; }
.card .pricerow { display:flex; justify-content:space-between; align-items:center; }
.card .price { font-weight:700; font-size:14px; color:#003388; }
.card .buy { border:1.5px solid #003388; color:#003388; font-size:10.5px; font-weight:700; padding:5px 12px; border-radius:999px; }
</style>
<div class="page">
<div class="nav">
<div class="logo">Free League Publishing</div>
<div class="navlinks"><span>Tabletop RPGs</span><span>Miniatures</span><span>Expansions</span><span>Lore</span></div>
<div class="navcta">Search Games</div>
</div>
<div class="hero">
<div class="hero-copy">
<h1>A midnight sky over<br>a Nordic forest.</h1>
<p>Guild-hall trustworthy, lore-heavy at the core — rulebooks for The One Ring and Forbidden Lands, lit by a single unwavering blue.</p>
<div class="btn-primary">Shop New Releases</div>
</div>
<div class="hero-visual"><div class="book"></div></div>
</div>
<div class="strip"><div>Free Worldwide Shipping</div><div>PDF Included</div><div>Award-Winning Design</div></div>
<div class="section">
<h2>Featured Games</h2>
<div class="grid">
<div class="card"><div class="ph" style="background:linear-gradient(160deg,#003388,#313131);"></div><div class="name">The One Ring</div><div class="desc">Core Rulebook · Hardcover</div><div class="pricerow"><span class="price">$49.99</span><span class="buy">Add</span></div></div>
<div class="card"><div class="ph" style="background:linear-gradient(160deg,#cf6363,#393939);"></div><div class="name">Forbidden Lands</div><div class="desc">Limited Edition Box Set</div><div class="pricerow"><span class="price">$74.99</span><span class="buy">Add</span></div></div>
<div class="card"><div class="ph" style="background:linear-gradient(160deg,#67a671,#003388);"></div><div class="name">Blade Runner RPG</div><div class="desc">Core Rulebook</div><div class="pricerow"><span class="price">$54.99</span><span class="buy">Add</span></div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 300; line-height: 1.25; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 300; line-height: 1.3; letter-spacing: 0.5px; margin: 0; color: #54565b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #008375; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #008375;
border: 1px solid #008375; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #080808;
border: 1px solid #c1c1c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #54565b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #008375; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#323339; box-sizing:border-box;
font-family:'Museo Sans', 'Helvetica Neue LT Std', sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#080808; color:#fff; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; }
.brand { font-family:'Industry','Helvetica Neue LT Std',sans-serif; font-weight:300; font-size:20px; }
.brand b { color:#008375; font-weight:700; }
.search { width:220px; height:34px; background:#1a1d20; border:1px solid #54565b; border-radius:4px;
display:flex; align-items:center; padding:0 12px; font-size:12px; color:#80c1ba; }
.navicons { font-size:11px; color:#eeeeee; }
.catnav { height:40px; background:#f6f6f6; border-bottom:1px solid #e0e0e0; display:flex; align-items:center;
gap:22px; padding:0 28px; }
.catnav span { font-size:13px; font-weight:500; color:#323339; }
.catnav span.on { color:#008375; border-bottom:2px solid #008375; padding-bottom:11px; }
.hero { height:170px; background:#080808; display:flex; align-items:center; padding:0 28px; gap:24px; }
.hero h1 { color:#fff; font-family:'Industry','Helvetica Neue LT Std',sans-serif; font-weight:300; font-size:34px;
margin:0 0 8px; letter-spacing:-0.3px; }
.hero p { color:#eeeeee; font-size:14px; margin:0 0 12px; max-width:340px; }
.btn { display:inline-block; background:#008375; color:#fff; font-size:15px; font-weight:600; padding:11px 22px;
border-radius:4px; }
.specrow { display:flex; gap:14px; }
.spec { background:#1a1d20; border-radius:4px; padding:10px 16px; text-align:center; }
.spec .v { color:#008375; font-family:'Industry',sans-serif; font-weight:300; font-size:22px; }
.spec .l { color:#80c1ba; font-size:9px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:14px 28px; }
.card { background:#fff; border:1px solid #e0e0e0; border-radius:4px; padding:10px; }
.cover { height:80px; background:#f6f6f6; border-radius:4px; margin-bottom:8px; }
.model { font-size:10px; color:#54565b; text-transform:uppercase; letter-spacing:0.5px; margin:0 0 2px; }
.t { font-size:13px; font-weight:600; margin:0 0 4px; }
.p { font-size:14px; color:#004f46; font-weight:600; }
.badge { display:inline-block; background:#008375; color:#fff; font-size:9px; font-weight:700; padding:2px 6px;
border-radius:4px; margin-top:4px; }
footer { position:absolute; bottom:0; left:0; right:0; height:38px; background:#1a1d20; color:#80c1ba;
border-top:2px solid #008375; display:flex; align-items:center; justify-content:space-between; padding:0 28px; font-size:11px; }
</style></head>
<body>
<nav>
<div class="brand"><b>Extech Instruments</b></div>
<div class="search">Search model number…</div>
<div class="navicons">Account · Cart</div>
</nav>
<div class="catnav">
<span class="on">HVAC</span><span>Electrical</span><span>Environmental</span><span>Thermal Imaging</span><span>Safety</span>
</div>
<div class="hero">
<div style="flex:1.3;">
<h1>Precision instruments for the field</h1>
<p>Multi-function meters, clamp meters, and thermal cameras built for professionals and tradespeople.</p>
<span class="btn">Shop Meters</span>
</div>
<div class="specrow">
<div class="spec"><div class="v">±0.5°C</div><div class="l">Accuracy</div></div>
<div class="spec"><div class="v">CAT IV</div><div class="l">Rating</div></div>
</div>
</div>
<div class="grid">
<div class="card"><div class="cover"></div><p class="model">EX623</p><p class="t">True RMS Multimeter</p><p class="p">$129.00</p><span class="badge">IP54</span></div>
<div class="card"><div class="cover"></div><p class="model">MA640</p><p class="t">Clamp Meter</p><p class="p">$89.00</p><span class="badge">CAT III</span></div>
<div class="card"><div class="cover"></div><p class="model">FLIR-EX</p><p class="t">Thermal Camera</p><p class="p">$449.00</p><span class="badge">Bluetooth</span></div>
<div class="card"><div class="cover"></div><p class="model">SL130</p><p class="t">Sound Level Meter</p><p class="p">$99.00</p><span class="badge">Data Logging</span></div>
</div>
<footer><span>© Extech Instruments — Test & measurement instruments</span><span>Datasheets · Support · Certifications</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #5b5b5b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #5b5b5b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.35; margin: 0; color: #5b5b5b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8a8a8a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #c1e9ff; color: #5b5b5b;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #5b5b5b;
border: 1px solid #c1e9ff; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #5b5b5b;
border: 1px solid #d6d6d6; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #eceafb; color: #5b5b5b;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#5b5b5b; box-sizing:border-box;
font-family:'Shopify Sans Medium','Shopify Sans Regular',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:18px; font-weight:600; color:#3d3d3d; }
.navlinks { display:flex; gap:24px; font-size:12px; color:#8a8a8a; }
.navlinks span.on { color:#3d3d3d; font-weight:600; }
.cart { background:#c1e9ff; color:#3d3d3d; border-radius:9999px; padding:8px 18px; font-size:12px; font-weight:600; }
.wrap { display:flex; height:518px; padding:0 36px; gap:36px; align-items:center; }
.photo { width:320px; height:88%; background:linear-gradient(180deg,#ecf7fc,#e1fcff); border-radius:20px; display:flex; align-items:center; justify-content:center; position:relative; }
.pan { width:200px; height:120px; border-radius:50%/40%; background:linear-gradient(160deg,#5b5b5b,#2f2f2f); position:relative; }
.pan::after { content:''; position:absolute; right:-56px; top:44px; width:64px; height:16px; border-radius:9999px; background:#3d3d3d; }
.new-badge { position:absolute; top:18px; left:18px; background:#eceafb; color:#5b5b5b; font-size:11px; font-weight:600; padding:5px 12px; border-radius:9999px; }
.info { flex:1; display:flex; flex-direction:column; gap:14px; }
.cat { font-size:12px; color:#8a8a8a; }
.info h1 { font-size:27px; font-weight:600; margin:0; color:#3d3d3d; }
.stars { font-size:12px; color:#5b5b5b; }
.price { font-size:20px; font-weight:600; color:#3d3d3d; }
.size-row { display:flex; gap:8px; }
.size-opt { border:1px solid #d4e8f0; border-radius:12px; padding:8px 16px; font-size:12px; background:#ecf7fc; }
.size-opt.on { background:#c1e9ff; border-color:#c1e9ff; font-weight:600; }
.desc { font-size:13px; color:#5b5b5b; line-height:1.65; max-width:420px; }
.buy-row { display:flex; gap:12px; margin-top:auto; }
.btn-buy { flex:1; background:#c1e9ff; color:#3d3d3d; border:none; border-radius:9999px; padding:14px; font-size:13px; font-weight:600; }
.btn-wish { border:1px solid #d4e8f0; border-radius:9999px; padding:14px 20px; font-size:13px; background:#ffffff; }
footer { height:62px; background:#f4f5f6; display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; color:#8a8a8a; }
</style></head>
<body>
<nav>
<p class="brand">Abbio</p>
<div class="navlinks"><span>Cookware</span><span class="on">Sauté Pan</span><span>Bakeware</span><span>Recipes</span></div>
<span class="cart">Cart · 1</span>
</nav>
<div class="wrap">
<div class="photo"><span class="new-badge">New</span><div class="pan"></div></div>
<div class="info">
<span class="cat">Cookware · Ceramic Nonstick</span>
<h1>The Everyday Sauté Pan</h1>
<span class="stars">★★★★★ 4.9 (1,204 reviews)</span>
<span class="price">$115.00</span>
<div class="size-row">
<span class="size-opt on">3.5 qt</span>
<span class="size-opt">5 qt</span>
</div>
<p class="desc">Ceramic nonstick that doesn't ask you to change how you cook — oven-safe, dishwasher-safe, and calm enough to hand down. A quiet morning in a well-loved kitchen.</p>
<div class="buy-row">
<button class="btn-buy">Add to Cart</button>
<button class="btn-wish">♡</button>
</div>
</div>
</div>
<footer><span>© Abbio</span><span>Care Guide · Shipping · Recipes</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.35; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.27; letter-spacing: 0.3px; background: #77804b; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.27; letter-spacing: 0.3px; background: #f5f5f5; color: #111111;
border: 1px solid #77804b; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111111;
border: 1px solid #bcbcbc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #d0473e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f5; color:#444444; box-sizing:border-box;
font-family:Archivo,Roboto,"Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#111111; }
.brand { font-size:18px; font-weight:700; color:#ffffff; letter-spacing:0.5px; }
.brand span { color:#77804b; }
.nlinks { display:flex; gap:22px; }
.nlinks div { font-size:12px; font-weight:500; color:#c8c8c8; }
.nlinks div.on { color:#ffffff; }
.navcta { background:#77804b; color:#fff; font-size:12px; font-weight:600; border-radius:8px; padding:9px 18px; }
.hero { height:230px; background:#111111; display:flex; align-items:center; justify-content:center; text-align:center;
flex-direction:column; position:relative; }
.hero::before { content:''; position:absolute; left:0; right:0; top:0; height:12px; background:repeating-linear-gradient(90deg,#000 0 20px,#1a1a1a 20px 40px); }
.hero::after { content:''; position:absolute; left:0; right:0; bottom:0; height:12px; background:repeating-linear-gradient(90deg,#000 0 20px,#1a1a1a 20px 40px); }
.herotxt .k { color:#77804b; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:2px; }
.herotxt h1 { color:#ffffff; font-size:32px; font-weight:500; margin:10px 0 10px; }
.herotxt p { color:#c8c8c8; font-size:14px; max-width:440px; margin:0 auto 16px; }
.herobtn { display:inline-block; background:#77804b; color:#fff; font-size:12px; font-weight:600; border-radius:8px; padding:11px 24px; }
.section { padding:22px 32px 0; }
.sechead { font-size:16px; font-weight:600; color:#111111; margin-bottom:14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { background:#ffffff; border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.06); }
.shot { aspect-ratio:2/3; position:relative; }
.c1 .shot { background:linear-gradient(150deg,#111111,#77804b); }
.c2 .shot { background:linear-gradient(150deg,#7396a2,#111111); }
.c3 .shot { background:linear-gradient(150deg,#7e31b5,#111111); }
.c4 .shot { background:linear-gradient(150deg,#5487a0,#111111); }
.badge { position:absolute; top:8px; left:8px; font-size:9px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:2px; color:#fff; }
.badge.sale { background:#d0473e; } .badge.col { background:#7396a2; }
.cbody { padding:10px 12px 12px; }
.ctitle { font-size:13px; font-weight:600; color:#111111; margin-bottom:4px; }
.cprice { font-size:13px; color:#444444; }
.stars { color:#907341; font-size:10px; margin-top:3px; }
</style></head>
<body>
<nav>
<div class="brand">Deaf Crocodile</div>
<div class="nlinks"><div class="on">New Releases</div><div>Blu-ray</div><div>4K UHD</div><div>Restorations</div></div>
<div class="navcta">Pre-Order</div>
</nav>
<div class="hero">
<div class="herotxt">
<div class="k">Restored Classics · Curated</div>
<h1>The Curtain Before The Film</h1>
<p>Rare and restored world cinema on collectible Blu-ray, curated one title at a time.</p>
<div class="herobtn">Shop New Releases</div>
</div>
</div>
<div class="section">
<div class="sechead">Recently Restored</div>
<div class="grid">
<div class="card c1"><div class="shot"><span class="badge sale">Sale</span></div>
<div class="cbody"><div class="ctitle">The Glass Forest (1974)</div><div class="cprice">$29.99</div><div class="stars">★★★★★</div></div></div>
<div class="card c2"><div class="shot"><span class="badge col">Collection</span></div>
<div class="cbody"><div class="ctitle">Winter Cinema Trilogy</div><div class="cprice">$54.99</div><div class="stars">★★★★★</div></div></div>
<div class="card c3"><div class="shot"></div>
<div class="cbody"><div class="ctitle">Red Fable (1968)</div><div class="cprice">$34.99</div><div class="stars">★★★★☆</div></div></div>
<div class="card c4"><div class="shot"></div>
<div class="cbody"><div class="ctitle">Nightingale's Eye (1981)</div><div class="cprice">$29.99</div><div class="stars">★★★★★</div></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcd535; color: #181a20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcd535; color: #181a20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #181a20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #707a8a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #fcd535; color: #181a20;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #1e2329; color: #ffffff;
border: 1px solid #fcd535; border-radius: 6px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #1e2329; color: #ffffff;
border: 1px solid #c3a630; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background: #1e2329; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0b0e11; color:#eaecef; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-size:18px; font-weight:700; color:#fcd535; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#eaecef; opacity:0.85; }
.navcta { background:#fcd535; color:#181a20; border-radius:6px; padding:9px 18px; font-size:13px; font-weight:600; }
.hero { padding:6px 30px 14px; }
.hero h1 { font-size:30px; font-weight:700; letter-spacing:-0.6px; margin:0 0 6px; max-width:640px; line-height:1.15; }
.hero p { font-size:13px; color:#929aa5; margin:0 0 12px; }
.search { display:flex; align-items:center; background:#1e2329; border-radius:8px; padding:8px 14px; width:340px; gap:8px; }
.search span { font-size:13px; color:#707a8a; }
.search .go { margin-left:auto; background:#fcd535; color:#181a20; border-radius:999px; padding:6px 16px; font-size:12px; font-weight:700; }
.stats { display:flex; gap:50px; padding:6px 30px 16px; }
.stat b { display:block; color:#fcd535; font-size:26px; font-weight:700; letter-spacing:-0.4px; font-family:"Courier New", monospace; }
.stat span { font-size:11px; color:#929aa5; }
.marketscard { margin:0 30px; background:#1e2329; border-radius:12px; padding:18px 20px; }
.tabs2 { display:flex; gap:18px; font-size:12px; color:#707a8a; margin-bottom:10px; }
.tabs2 .on { color:#fcd535; font-weight:600; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:10px; color:#707a8a; font-weight:500; padding:4px 0; }
th.r, td.r { text-align:right; }
td { padding:8px 0; font-size:13px; border-top:1px solid #2b3139; font-family:"Courier New", monospace; }
td.name { font-family:-apple-system,sans-serif; display:flex; align-items:center; gap:8px; }
.coin { width:22px; height:22px; border-radius:999px; display:inline-block; }
.c-btc { background:#f7931a; }
.c-eth { background:#8a92b2; }
.c-sol { background:#14f195; }
.up { color:#0ecb81; }
.down { color:#f6465d; }
</style></head>
<body>
<nav>
<div class="brand">Binance</div>
<div class="navlinks"><span>Buy Crypto</span><span>Markets</span><span>Trade</span><span>Futures</span><span>Earn</span></div>
<div class="navcta">Sign Up</div>
</nav>
<div class="hero">
<h1>316,258,026 USERS TRUST US</h1>
<p>The world's largest crypto exchange, trusted by millions.</p>
<div class="search"><span>🔍 Search coin name</span><span class="go">Sign Up</span></div>
</div>
<div class="stats">
<div class="stat"><b>15,000 BTC</b><span>Held in reserve</span></div>
<div class="stat"><b>$429M</b><span>Funds recovered</span></div>
<div class="stat"><b>7,488,223</b><span>Users protected</span></div>
</div>
<div class="marketscard">
<div class="tabs2"><span class="on">Popular</span><span>New listing</span><span>Top gainers</span></div>
<table>
<tr><th>Pair</th><th class="r">Last Price</th><th class="r">24h Change</th><th class="r">24h Volume</th></tr>
<tr><td class="name"><span class="coin c-btc"></span>BTC/USDT</td><td class="r">83,214.50</td><td class="r up">+2.14%</td><td class="r">$1.82B</td></tr>
<tr><td class="name"><span class="coin c-eth"></span>ETH/USDT</td><td class="r">3,142.08</td><td class="r down">-0.87%</td><td class="r">$742M</td></tr>
<tr><td class="name"><span class="coin c-sol"></span>SOL/USDT</td><td class="r">168.42</td><td class="r up">+5.62%</td><td class="r">$318M</td></tr>
</table>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.35; letter-spacing: -0.1px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.2px; background: #7d7a56; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.2px; background: #f8f8f8; color: #121212;
border: 1px solid #7d7a56; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #f8f8f8; color: #121212;
border: 1px solid #bebebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.3px; background: #7d7a56; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f8f8; color:#3a3a3a; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; gap:24px; padding:0 30px; background:#f8f8f8; }
.logo { font-size:19px; font-weight:500; color:#121212; }
.navlink { font-size:14px; font-weight:500; color:#6a6a6a; }
.navlink.active { color:#121212; }
.searchpill { margin-left:auto; width:230px; height:44px; border-radius:999px; background:#f2f2f2;
display:flex; align-items:center; padding:0 18px; font-size:13px; color:#6a6a6a; }
.stage { display:flex; gap:30px; padding:12px 30px 0; }
.prod { width:230px; height:280px; flex:0 0 auto; border-radius:20px; position:relative; overflow:hidden;
background:linear-gradient(150deg,#7d7a56 0%,#b88a6a 55%,#996c49 130%); box-shadow:0 8px 22px rgba(0,0,0,.12); }
.prod::before { content:''; position:absolute; left:30px; top:70px; width:170px; height:120px; border-radius:16px;
background:rgba(255,255,255,.14); }
.newbadge { position:absolute; top:14px; left:14px; background:#7d7a56; color:#fff; font-size:11px; font-weight:600;
text-transform:uppercase; letter-spacing:.3px; border-radius:999px; padding:4px 12px; }
.info { flex:1; }
.kicker { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; color:#899df1; }
h1 { font-size:24px; font-weight:500; margin:6px 0 8px; color:#121212; }
.desc { font-size:14px; line-height:1.5; max-width:500px; margin-bottom:14px; }
.swrow { display:flex; gap:8px; margin-bottom:6px; }
.swchip { width:28px; height:28px; border-radius:999px; border:2px solid transparent; }
.swchip.active { border-color:#121212; }
.swlabel { font-size:12px; color:#6a6a6a; margin-bottom:16px; }
.pricerow { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.price { font-size:22px; font-weight:600; color:#121212; }
.btnrow { display:flex; gap:10px; }
.btn-p { background:#7d7a56; color:#fff; border:none; border-radius:999px; height:44px; padding:0 28px;
font-size:14px; font-weight:500; }
.btn-s { background:#f8f8f8; color:#121212; border:1px solid #dedede; border-radius:999px; height:44px; padding:0 22px;
font-size:14px; font-weight:500; }
.acwrap { padding:16px 30px 0; border-top:1px solid #ebebeb; margin-top:16px; }
.acrow { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #ebebeb; font-size:14px; font-weight:600; color:#121212; }
.acrow span.chev { color:#899df1; font-size:12px; }
.acbody { font-size:13px; color:#6a6a6a; padding:6px 0 10px; }
</style></head>
<body>
<nav>
<span class="logo">Citizenry</span>
<span class="navlink active">Textiles</span>
<span class="navlink">Ceramics</span>
<span class="navlink">Lighting</span>
<div class="searchpill">Search rugs, pillows, decor…</div>
</nav>
<div class="stage">
<div class="prod"><span class="newbadge">Handwoven</span></div>
<div class="info">
<div class="kicker">Artisan Made · Oaxaca, Mexico</div>
<h1>Mesilla Handwoven Throw Pillow</h1>
<div class="desc">Hand-loomed from undyed cotton by a family workshop, each pillow carries the small irregularities of a piece made slowly, by hand, over generations of technique.</div>
<div class="swrow">
<span class="swchip active" style="background:#7d7a56"></span>
<span class="swchip" style="background:#996c49"></span>
<span class="swchip" style="background:#c5c3b0"></span>
<span class="swchip" style="background:#121212"></span>
</div>
<div class="swlabel">Color: Olive</div>
<div class="pricerow"><span class="price">$128.00</span></div>
<div class="btnrow">
<button class="btn-p">Add to Cart</button>
<button class="btn-s">Add to Wishlist</button>
</div>
</div>
</div>
<div class="acwrap">
<div class="acrow">Materials & Care <span class="chev">▾</span></div>
<div class="acbody">100% undyed cotton, hand-loomed. Spot clean only, insert sold separately.</div>
<div class="acrow">Shipping & Returns <span class="chev">▾</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #141414; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #141414; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.35; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9da1a0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #4efac0; color: #141414;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #1a1a1a; color: #f5f5f5;
border: 1px solid #4efac0; border-radius: 8px;
padding: 14px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #141414;
border: 1px solid #141414; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9da1a0; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #4efac0; color: #141414;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#141414; color:#f5f5f5; font-family:'Suisse Int\'l',Arial,sans-serif;
}
*, *::before, *::after { box-sizing:border-box; }
.wrap{ position:relative; width:960px; height:640px; }
.nav{ height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#141414; border-bottom:1px solid #262626; }
.logo{ font-size:18px; font-weight:600; letter-spacing:0.02em; color:#f5f5f5; }
.navlinks{ display:flex; gap:24px; }
.navlinks span{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#9da1a0; }
.navlinks span.active{ color:#4efac0; }
.cta{ font-size:12px; font-weight:600; color:#141414; background:#4efac0; padding:10px 18px; border-radius:8px; }
.hero{ height:250px; display:flex; align-items:center; padding:0 34px; gap:26px; }
.hero-text{ width:400px; }
.kicker{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#4efac0; margin-bottom:12px; }
.h1{ font-size:32px; font-weight:500; line-height:1.2; color:#ffffff; margin-bottom:12px; }
.sub{ font-size:14px; line-height:1.55; color:#c9c9c9; max-width:340px; margin-bottom:18px; }
.btn{ font-size:13px; font-weight:600; color:#141414; background:#4efac0; padding:13px 24px; border-radius:8px; width:fit-content; }
.device{ flex:1; height:210px; position:relative; }
.sauna{ position:absolute; left:150px; top:20px; width:150px; height:170px; border-radius:14px; background:linear-gradient(160deg,#1a1a1a,#0018ff); box-shadow:0 20px 34px rgba(0,0,0,0.4); }
.panel-glow{ position:absolute; left:180px; top:52px; width:90px; height:40px; border-radius:8px; background:rgba(78,250,192,0.18); border:1px solid #4efac0; }
.progress{ position:absolute; left:180px; top:110px; width:90px; height:6px; background:#262626; border-radius:3px; overflow:hidden; }
.progress-fill{ width:70%; height:100%; background:#4efac0; }
.section-title{ padding:16px 34px 8px; font-size:15px; font-weight:600; color:#ffffff; }
.grid{ display:flex; gap:16px; padding:0 34px; }
.card{ width:200px; background:#fafafa; border-radius:12px; padding:12px; }
.card-img{ width:100%; height:78px; border-radius:8px; margin-bottom:8px; }
.card-title{ font-size:12px; font-weight:600; color:#1a1a1a; margin-bottom:2px; }
.card-note{ font-size:10px; color:#6b6b6b; margin-bottom:8px; }
.row{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-size:12px; font-weight:700; color:#1a1a1a; }
.tag{ font-size:9px; font-weight:600; text-transform:uppercase; color:#141414; background:#4efac0; padding:3px 9px; border-radius:999px; }
.footer{ position:absolute; bottom:0; left:0; width:960px; height:50px; background:#0d0d0d; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.footer span{ font-size:10px; letter-spacing:0.04em; text-transform:uppercase; color:#9da1a0; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Higherdose</div>
<div class="navlinks">
<span class="active">Infrared Saunas</span>
<span>Recovery Devices</span>
<span>PEMF</span>
<span>Science</span>
</div>
<div class="cta">Shop Saunas</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="kicker">Wellness As High-Voltage Tech</div>
<div class="h1">Recovery, engineered like electronics.</div>
<div class="sub">Infrared saunas and recovery devices with the restraint of luxury tech — the green only ever shows up when it's functional.</div>
<div class="btn">Shop the Dome</div>
</div>
<div class="device">
<div class="sauna"></div>
<div class="panel-glow"></div>
<div class="progress"><div class="progress-fill"></div></div>
</div>
</div>
<div class="section-title">Best Sellers</div>
<div class="grid">
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#1a1a1a,#4efac0);"></div>
<div class="card-title">Infrared Sauna Dome</div>
<div class="card-note">Full Spectrum</div>
<div class="row"><span class="price">$599</span><span class="tag">Bestseller</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#0018ff,#1a1a1a);"></div>
<div class="card-title">PEMF Mat Pro</div>
<div class="card-note">Pulsed Electromagnetic</div>
<div class="row"><span class="price">$1,295</span><span class="tag">New</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#4efac0,#1a1a1a);"></div>
<div class="card-title">Red Light Panel</div>
<div class="card-note">Face + Body</div>
<div class="row"><span class="price">$449</span><span class="tag">Sale</span></div>
</div>
</div>
<div class="footer">
<span>© HigherDOSE</span>
<span>Science · Warranty · Support</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a73e8; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a73e8; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #92baef; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a73e8; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a73e8; color: #f5f5f5;
border: 1px solid #3d88ea; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #92baef; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2471ea; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#3c4043; box-sizing:border-box;
font-family:'Google Sans Text','Google Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; overflow:hidden; background:#ffffff; }
.search-zone { flex:0 0 auto; height:236px; background:#22242a; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:14px; padding:14px 40px; }
.marks { display:flex; gap:8px; margin-bottom:2px; }
.dot { width:14px; height:14px; border-radius:50%; }
.dot.d1 { background:#1a73e8; }
.dot.d2 { background:#e8734a; }
.dot.d3 { background:#e8b91a; }
.dot.d4 { background:#3fa66a; }
.brand-dark { font-size:15px; font-weight:500; color:#e8e8e8; letter-spacing:0.2px; margin:0 0 6px; }
.searchbar { width:480px; height:48px; background:#ffffff; border-radius:24px; display:flex; align-items:center;
gap:10px; padding:0 20px; box-shadow:0 1px 6px rgba(0,0,0,0.25); }
.searchbar .glass { width:15px; height:15px; border:2px solid #5f6368; border-radius:50%; position:relative; flex:0 0 auto; }
.searchbar .glass::after { content:''; position:absolute; width:6px; height:2px; background:#5f6368;
right:-6px; bottom:-1px; transform:rotate(45deg); }
.searchbar span { font-size:16px; color:#474747; font-family:Arial,sans-serif; }
.keyrow { display:flex; gap:10px; margin-top:2px; }
.search-key { background:#303134; color:#e8eaed; border:1px solid #303134; border-radius:8px; padding:0 16px;
height:36px; font-size:14px; font-weight:500; font-family:Arial,sans-serif; }
.biz-zone { flex:1 1 auto; display:flex; padding:22px 40px; gap:26px; overflow:hidden; }
.results { flex:1 1 auto; display:flex; flex-direction:column; gap:12px; min-width:0; }
.biz-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.biz-head h2 { font-size:20px; font-weight:500; color:#202124; margin:0; letter-spacing:-0.2px; }
.biz-actions { display:flex; gap:10px; }
.btn-biz-primary { background:#1a73e8; color:#ffffff; border:1px solid transparent; border-radius:1000px;
padding:0 16px; height:42px; font-size:16px; font-weight:500; }
.btn-biz-secondary { background:#ffffff; color:#1a73e8; border:1px solid #dadce0; border-radius:1000px;
padding:0 16px; height:42px; font-size:16px; font-weight:500; }
.result-card { background:#ffffff; border-radius:24px; padding:18px 18px 20px; box-shadow:none;
border:1px solid #ecedf0; display:flex; flex-direction:column; gap:5px; }
.result-card .url { font-size:12px; color:#5f6368; }
.result-card .title { font-size:18px; color:#1a73e8; font-weight:500; margin:0; }
.result-card .snippet { font-size:14px; color:#3c4043; line-height:1.5; margin:0; }
.sidebar { width:210px; flex:0 0 auto; display:flex; flex-direction:column; gap:8px; }
.side-label { font-size:12px; font-weight:500; color:#5f6368; text-transform:uppercase; letter-spacing:0.06em;
margin-bottom:2px; }
.nav-item { height:48px; display:flex; align-items:center; padding:0 10px; border-radius:4px; font-size:14px;
font-weight:500; color:#202124; }
.nav-item.on { background:#e8f1fd; color:#1a73e8; }
</style></head>
<body>
<div class="page">
<div class="search-zone">
<div class="marks"><span class="dot d1"></span><span class="dot d2"></span><span class="dot d3"></span><span class="dot d4"></span></div>
<p class="brand-dark">Google</p>
<div class="searchbar"><span class="glass"></span><span>local bakery near me open now</span></div>
<div class="keyrow">
<button class="search-key">Google Search</button>
<button class="search-key">I'm Feeling Lucky</button>
</div>
</div>
<div class="biz-zone">
<div class="results">
<div class="biz-head">
<h2>Business Profile</h2>
<div class="biz-actions">
<button class="btn-biz-secondary">Message</button>
<button class="btn-biz-primary">Call now</button>
</div>
</div>
<div class="result-card">
<span class="url">maple-and-rye.example › home</span>
<p class="title">Maple & Rye Bakehouse</p>
<p class="snippet">Open now · Closes 7 PM · Sourdough, pastries, and cold brew on Elm Street. Rated 4.8 from 1,204 reviews.</p>
</div>
<div class="result-card">
<span class="url">riverside-coffee.example › locations</span>
<p class="title">Riverside Coffee Roasters</p>
<p class="snippet">Open now · Closes 8 PM · Small-batch roastery with a corner reading nook two blocks from the river.</p>
</div>
</div>
<div class="sidebar">
<span class="side-label">Menu</span>
<div class="nav-item on">Overview</div>
<div class="nav-item">Photos</div>
<div class="nav-item">Reviews</div>
<div class="nav-item">Hours</div>
<div class="nav-item">Products</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #444444;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #444444;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.35; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #979797; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #e61a4f; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f8f8f8; color: #444444;
border: 1px solid #e61a4f; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #444444;
border: 1px solid #cbcbcb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #979797; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e61a4f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f8f8; color:#444444; box-sizing:border-box;
font-family:'Plus Jakarta Sans',sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#f8f8f8; }
.brand { font-family:'Haffer SemiBold','Plus Jakarta Sans',sans-serif; font-size:18px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:22px; font-family:'Haffer SemiBold','Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:600;
letter-spacing:0.3px; text-transform:uppercase; color:#444444; }
.util { font-size:13px; color:#757575; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 72px); }
.stage { padding:26px; display:flex; flex-direction:column; gap:12px; background:#f5f5f5; }
.crumb { font-size:11px; color:#979797; }
.pan { flex:1; border-radius:8px; background:#ffffff; position:relative; overflow:hidden; }
.pan::before { content:''; position:absolute; left:50%; top:50%; width:120px; height:200px; transform:translate(-50%,-50%); border-radius:16px 16px 8px 8px;
background:linear-gradient(160deg,#d74388,#552e90 70%); box-shadow:0 18px 30px rgba(0,0,0,0.12); }
.pan::after { content:''; position:absolute; left:50%; top:34%; width:70px; height:26px; transform:translate(-50%,0); border-radius:6px; background:#14a34a; }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; border-radius:8px; background:#ffffff; }
.info { padding:24px 34px; display:flex; flex-direction:column; gap:11px; overflow:hidden; }
.cat { font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#e61a4f; }
h1 { font-family:'Tiempos',Georgia,serif; margin:0; font-size:22px; font-weight:400; line-height:1.35; }
.rating { display:flex; align-items:center; gap:8px; font-size:12px; color:#979797; }
.stars { color:#e61a4f; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:16px; font-weight:600; }
.badge-vegan { background:#00a19b; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.desc { font-size:15px; color:#757575; line-height:1.6; }
.ingredients { display:flex; gap:8px; flex-wrap:wrap; }
.ing-chip { background:#f5f5f5; border-radius:9999px; padding:4px 12px; font-size:11px; color:#444444; }
.trust { background:#f5f5f5; border-radius:8px; font-size:12px; color:#555555; padding:10px 14px; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#e61a4f; color:#fff; border:none; height:48px; font-size:14px; font-weight:600;
letter-spacing:0.5px; text-transform:uppercase; border-radius:8px; }
.btn-secondary { width:150px; background:#f8f8f8; border:none; color:#444444; height:48px; font-size:14px; font-weight:600;
letter-spacing:0.5px; text-transform:uppercase; border-radius:8px; }
</style></head>
<body>
<nav>
<p class="brand">Briogeo</p>
<div class="navlinks"><span>Shampoo</span><span>Scalp Care</span><span>Styling</span><span>Sets</span></div>
<div class="util">Search Account Cart (1)</div>
</nav>
<main>
<div class="stage">
<div class="crumb">Briogeo / Repair / Masks</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Don’t Despair, Repair!®</span>
<h1>Don’t Despair, Repair! Deep Conditioning Mask</h1>
<div class="rating"><span class="stars">★★★★★</span> 4.7 · 9,442 reviews</div>
<div class="price-row"><span class="price">$42.00</span><span class="badge-vegan">Vegan</span></div>
<p class="desc">A rich, rosehip-oil-infused mask that repairs split ends and strengthens strands from root to tip in one 5-minute treatment.</p>
<div class="ingredients">
<span class="ing-chip">Rosehip Oil</span><span class="ing-chip">Biotin</span><span class="ing-chip">B5</span>
</div>
<div class="trust">Cruelty-Free · Free of Sulfates & Parabens</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Add to Wishlist</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f43e37; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f43e37; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f43e37; color: #1a1a1a;
border: 1px solid #1a1a1a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f43e37; color: #f5f5f5;
border: 1px solid #f45b55; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d13832; color: #1a1a1a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1A1A1A; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { position:relative; width:960px; height:640px; background:#1A1A1A; display:flex; }
.queue { width:260px; height:588px; border-right:1px solid #383838; padding:16px; flex-shrink:0; }
.queuehdr { font-size:15px; font-weight:700; color:#FFFFFF; margin:0 0 12px; }
.qrow { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #383838; }
.qhandle { color:#757575; font-size:14px; }
.qthumb { width:40px; height:40px; border-radius:6px; flex-shrink:0; }
.qt1 { background:linear-gradient(150deg,#E0533C,#3E7BC2); }
.qt2 { background:linear-gradient(150deg,#3FA66A,#7E57C2); }
.qt3 { background:linear-gradient(150deg,#D6457E,#E0533C); }
.qt4 { background:linear-gradient(150deg,#3E7BC2,#3FA66A); }
.qmeta { flex:1; min-width:0; }
.qtitle { font-size:13px; font-weight:600; color:#FFFFFF; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qshow { font-size:11px; font-weight:400; color:#757575; margin:0; }
.qremove { color:#757575; font-size:14px; }
.player { flex:1; height:588px; padding:20px 36px; display:flex; flex-direction:column; align-items:center; }
.ptop { width:100%; display:flex; align-items:center; justify-content:space-between; height:20px; margin-bottom:16px; }
.pchev { color:#B8B8B8; font-size:16px; }
.peyebrow { font-size:12px; font-weight:700; letter-spacing:0.08em; color:#B8B8B8; }
.pmenu { color:#B8B8B8; font-size:16px; }
.cover { width:240px; height:240px; border-radius:8px; background:linear-gradient(150deg,#E0533C,#7E3F2c);
box-shadow:rgba(224,83,60,0.55) 0 8px 24px -6px; margin-bottom:16px; }
.etitle { font-size:20px; font-weight:700; color:#FFFFFF; margin:0 0 4px; text-align:center; }
.eshow { font-size:14px; font-weight:500; color:#E0533C; margin:0 0 12px; text-align:center; }
.scrubwrap { width:100%; max-width:440px; margin-bottom:12px; }
.scrubtrack { height:4px; border-radius:2px; background:#2E2E2E; position:relative; }
.scrubfill { position:absolute; left:0; top:0; height:4px; border-radius:2px; background:#E0533C; width:38%; }
.scrubknob { position:absolute; top:50%; left:38%; width:13px; height:13px; border-radius:50%; background:#fff;
transform:translate(-50%,-50%); box-shadow:rgba(0,0,0,0.5) 0 1px 4px; }
.timerow { display:flex; justify-content:space-between; font-size:12px; font-weight:500; color:#B8B8B8; margin-top:6px; }
.transport { display:flex; align-items:center; gap:22px; margin-bottom:16px; }
.tbtn { color:#B8B8B8; font-size:20px; }
.playbtn { width:68px; height:68px; border-radius:50%; background:#E0533C; display:flex; align-items:center;
justify-content:center; color:#fff; font-size:24px; box-shadow:rgba(224,83,60,0.55) 0 8px 24px -6px; }
.chiprow { display:flex; gap:26px; }
.chip { display:flex; flex-direction:column; align-items:center; gap:5px; }
.chip .ci { font-size:17px; color:#B8B8B8; }
.chip .cl { font-size:10px; font-weight:600; color:#B8B8B8; }
.chip.active .ci, .chip.active .cl { color:#E0533C; }
.tabbar { position:absolute; left:0; right:0; bottom:0; height:52px; background:rgba(26,26,26,0.94);
border-top:0.5px solid #383838; display:flex; align-items:center; justify-content:space-around; }
.tab { display:flex; flex-direction:column; align-items:center; gap:3px; }
.tab .ic { font-size:19px; color:#757575; }
.tab .lb { font-size:10px; font-weight:600; color:#757575; }
.tab.active .ic, .tab.active .lb { color:#F43E37; }
.brandtag { position:absolute; top:8px; left:16px; font-size:12px; font-weight:700; color:#F43E37; letter-spacing:0.04em; }
</style></head>
<body>
<div class="app">
<span class="brandtag">Pocket Casts (iOS)</span>
<div class="queue">
<p class="queuehdr">Up Next</p>
<div class="qrow"><span class="qhandle">≡</span><div class="qthumb qt1"></div>
<div class="qmeta"><p class="qtitle">The Signal Room</p><p class="qshow">Late Night Frequencies</p></div>
<span class="qremove">×</span></div>
<div class="qrow"><span class="qhandle">≡</span><div class="qthumb qt2"></div>
<div class="qmeta"><p class="qtitle">Field Notes Ep. 44</p><p class="qshow">Wild Air</p></div>
<span class="qremove">×</span></div>
<div class="qrow"><span class="qhandle">≡</span><div class="qthumb qt3"></div>
<div class="qmeta"><p class="qtitle">A Quiet Correction</p><p class="qshow">Ledger & Light</p></div>
<span class="qremove">×</span></div>
<div class="qrow"><span class="qhandle">≡</span><div class="qthumb qt4"></div>
<div class="qmeta"><p class="qtitle">Deep Dive: Coral</p><p class="qshow">Ocean Desk</p></div>
<span class="qremove">×</span></div>
</div>
<div class="player">
<div class="ptop"><span class="pchev">⌄</span><span class="peyebrow">NOW PLAYING</span><span class="pmenu">⋮</span></div>
<div class="cover"></div>
<p class="etitle">The Signal Room</p>
<p class="eshow">Late Night Frequencies</p>
<div class="scrubwrap">
<div class="scrubtrack"><div class="scrubfill"></div><div class="scrubknob"></div></div>
<div class="timerow"><span>14:22</span><span>-19:48</span></div>
</div>
<div class="transport">
<span class="tbtn">15</span>
<span class="tbtn">⏮</span>
<div class="playbtn">▌▌</div>
<span class="tbtn">⏭</span>
<span class="tbtn">30</span>
</div>
<div class="chiprow">
<div class="chip active"><span class="ci">≡</span><span class="cl">UP NEXT</span></div>
<div class="chip active"><span class="ci">1.2×</span><span class="cl">SPEED</span></div>
<div class="chip"><span class="ci">✂</span><span class="cl">TRIM</span></div>
<div class="chip"><span class="ci">★</span><span class="cl">STAR</span></div>
<div class="chip"><span class="ci">⚙</span><span class="cl">EFFECTS</span></div>
</div>
</div>
<div class="tabbar">
<div class="tab active"><span class="ic">🎤</span><span class="lb">PODCASTS</span></div>
<div class="tab"><span class="ic">☰</span><span class="lb">FILTERS</span></div>
<div class="tab"><span class="ic">✦</span><span class="lb">DISCOVER</span></div>
<div class="tab"><span class="ic">👤</span><span class="lb">PROFILE</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f1ec; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f1ec; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.1px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #909090; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ff379c; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #f7f1ec; color: #2c1847;
border: 1px solid #2c1847; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfaf7; color: #111111;
border: 1px solid #d8d8d8; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #909090; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #22b38c; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f1ec; font-family:'PPMori',Helvetica,'Helvetica Neue',-apple-system,sans-serif; color:#4f4f4f; }
*{box-sizing:border-box;}
.nav{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:20px;font-weight:700;color:#2c1847;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#2c1847;}
.navcta{background:#ff379c;color:#fff;font-size:12px;font-weight:700;padding:10px 22px;border-radius:9999px;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;}
.herotext{width:420px;}
.badge{display:inline-block;background:#22b38c;color:#fff;font-size:11px;font-weight:600;padding:4px 12px;border-radius:9999px;margin-bottom:16px;}
.headline{font-size:38px;font-weight:700;color:#2c1847;margin-bottom:14px;line-height:1.15;letter-spacing:-0.4px;}
.sub{font-size:14px;color:#4f4f4f;margin-bottom:20px;max-width:340px;}
.btn{display:inline-block;background:#ff379c;color:#fff;font-size:14px;font-weight:700;padding:14px 30px;border-radius:9999px;}
.boxes{width:230px;height:190px;margin-left:60px;position:relative;}
.box{position:absolute;border-radius:12px;}
.b1{left:20px;top:40px;width:110px;height:110px;background:linear-gradient(135deg,#2c1847,#ff379c);}
.b2{left:110px;top:10px;width:90px;height:80px;background:linear-gradient(135deg,#22b38c,#39bd97);}
.sec{padding:20px 40px 0;}
.sectitle{font-size:15px;font-weight:700;color:#2c1847;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fcfaf7;border-radius:12px;padding:14px;position:relative;}
.tag{position:absolute;top:10px;left:10px;background:#22b38c;color:#fff;font-size:9px;font-weight:700;padding:3px 10px;border-radius:9999px;}
.thumb{height:88px;border-radius:10px;margin-bottom:12px;}
.pname{font-size:14px;font-weight:600;color:#2c1847;}
.pprice{font-size:13px;color:#ff379c;font-weight:700;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Noissue</div>
<div class="navlinks"><span>Custom Boxes</span><span>Tape</span><span>Stickers</span></div>
<div class="navcta">Start Designing</div>
</div>
<div class="hero">
<div class="herotext">
<div class="badge">100% Compostable</div>
<div class="headline">Packaging that unboxes like a gift.</div>
<div class="sub">Custom, sustainable packaging designed by you and printed on real paper stock.</div>
<div class="btn">Start Designing</div>
</div>
<div class="boxes"><div class="box b1"></div><div class="box b2"></div></div>
</div>
<div class="sec">
<div class="sectitle">Popular Products</div>
<div class="grid">
<div class="card"><div class="tag">Eco-Certified</div><div class="thumb" style="background:linear-gradient(135deg,#2c1847,#ff379c)"></div><div class="pname">Custom Mailer Box</div><div class="pprice">from $0.89</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#22b38c,#39bd97)"></div><div class="pname">Branded Tissue Paper</div><div class="pprice">from $0.35</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff379c,#fd566f)"></div><div class="pname">Custom Stickers</div><div class="pprice">from $0.12</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #1461A4; color: #FFFFFF;
border: none; border-radius: 2px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #FFFFFF; color: #1461A4;
border: 1px solid #1461A4; border-radius: 2px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.27; letter-spacing: 0.5px; background: #1461A4; color: #FFFFFF;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Electrolux</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#1a1a1a; font-family:'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.promo { height:40px; background:#1461A4; color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #E0E0E0; }
.logo { font-weight:600; font-size:20px; color:#1461A4; }
.navlinks { display:flex; gap:26px; font-size:15px; font-weight:500; }
.btn { background:#1461A4; color:#fff; border-radius:2px; padding:12px 24px; font-size:16px; font-weight:600; }
.hero { height:220px; background:#F4F4F4; display:flex; align-items:center; padding:0 32px; gap:30px; }
.hero-copy { flex:1; }
.hero-copy h1 { font-size:36px; font-weight:600; letter-spacing:-.5px; margin:0 0 12px; line-height:1.15; }
.hero-copy p { font-size:15px; color:#444; margin:0 0 16px; max-width:360px; }
.hero-art { flex:1; height:170px; border-radius:4px; position:relative; background:linear-gradient(160deg,#dfe9f2,#1461A4); overflow:hidden; }
.machine { position:absolute; width:110px; height:130px; background:#fff; border-radius:4px; bottom:14px; left:40px; box-shadow:0 10px 20px rgba(0,0,0,.2); }
.machine::after { content:''; position:absolute; width:70px; height:70px; border-radius:50%; border:6px solid #1461A4; top:36px; left:20px; }
.row { display:flex; gap:16px; padding:20px 32px 0; }
.card { flex:1; background:#fff; border:1px solid #E0E0E0; border-radius:4px; padding:16px; }
.thumb { height:70px; border-radius:2px; margin-bottom:10px; }
.th1 { background:linear-gradient(160deg,#cfe0ef,#1461A4); }
.th2 { background:linear-gradient(160deg,#dedede,#444); }
.th3 { background:linear-gradient(160deg,#e8f1f9,#0D4A87); }
.energy { display:inline-block; width:36px; height:20px; background:#009640; color:#fff; font-size:11px; font-weight:700;
text-align:center; line-height:20px; margin-bottom:8px; }
.name { font-size:16px; font-weight:600; margin:0 0 4px; }
.spec { font-size:13px; color:#767676; margin:0 0 6px; }
.price { font-size:22px; font-weight:700; }
</style></head>
<body>
<div class="promo">Free delivery on orders over $499</div>
<nav>
<div class="logo">Electrolux</div>
<div class="navlinks"><span>Laundry</span><span>Kitchen</span><span>Dishwashers</span><span>Support</span></div>
<div class="btn">Shop Now</div>
</nav>
<div class="hero">
<div class="hero-copy">
<h1>Engineered for a better everyday.</h1>
<p>Premium laundry and kitchen appliances built on a century of Swedish design.</p>
</div>
<div class="hero-art"><div class="machine"></div></div>
</div>
<div class="row">
<div class="card"><div class="thumb th1"></div><span class="energy">A+</span><p class="name">FrontLoad Washer 5000</p><p class="spec">9kg · 1600 rpm</p><p class="price">$1,299</p></div>
<div class="card"><div class="thumb th2"></div><span class="energy" style="background:#ED1C24">F</span><p class="name">Compact Dryer 3000</p><p class="spec">7kg · Sensor Dry</p><p class="price">$899</p></div>
<div class="card"><div class="thumb th3"></div><span class="energy">A+</span><p class="name">Built-In Dishwasher</p><p class="spec">14 place settings</p><p class="price">$749</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.6; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px; background: #00ff00; color: #000000;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px; background: #ffffff; color: #000000;
border: 1px solid #00ff00; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #00ff00; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Inter',-apple-system,sans-serif; background:#ffffff; color:#000000; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #444;}
.logo{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:600;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;color:#666;}
.hero{height:270px;background:#000;display:flex;align-items:center;padding:0 44px;color:#fff;}
.left{width:52%;}
.left h1{font-family:'JetBrains Mono',monospace;font-size:28px;font-weight:600;line-height:1.3;margin:0 0 14px;}
.left p{font-size:16px;color:#ccc;max-width:340px;margin:0 0 20px;}
.btn{display:inline-block;background:#00ff00;color:#000;font-size:14px;font-weight:600;letter-spacing:.3px;padding:12px 24px;border-radius:4px;}
.right{width:44%;height:150px;border-radius:8px;background:#111;border:1px solid #333;display:grid;grid-template-columns:repeat(8,1fr);grid-gap:4px;padding:10px;}
.key{background:#1a1a1a;border-radius:2px;height:16px;}
.key.hl{background:#00ff00;}
.section{padding:22px 40px 0;}
.sectitle{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:600;margin-bottom:14px;}
.grid2{display:flex;gap:16px;}
.card{width:200px;border:1px solid #444;border-radius:8px;overflow:hidden;}
.thumb{height:100px;background:#f5f5f5;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#00ff00;color:#000;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 6px;}
.cbody{padding:12px;}
.ptitle{font-size:14px;font-weight:600;}
.pprice{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:600;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Wooting</div>
<div class="navlinks"><div>Keyboards</div><div>Analog</div><div>Software</div></div>
</div>
<div class="hero">
<div class="left">
<h1>Analog input. Zero compromise.</h1>
<p>Keyboards that measure keypress depth, not just on/off — for players who need precision.</p>
<div class="btn">Shop Wooting</div>
</div>
<div class="right">
<div class="key"></div><div class="key"></div><div class="key hl"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
<div class="key"></div><div class="key hl"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
</div>
</div>
<div class="section">
<div class="sectitle">// featured</div>
<div class="grid2">
<div class="card"><div class="thumb"><div class="badge">New</div></div><div class="cbody"><div class="ptitle">Wooting 60HE</div><div class="pprice">$175.00</div></div></div>
<div class="card"><div class="thumb"></div><div class="cbody"><div class="ptitle">Wooting 80HE</div><div class="pprice">$199.00</div></div></div>
<div class="card"><div class="thumb"></div><div class="cbody"><div class="ptitle">Wooting Two HE</div><div class="pprice">$220.00</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f4; color: #00365a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f4; color: #00365a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #00365a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #545454; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #0257a6; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #ffffff; color: #0257a6;
border: 1px solid #0257a6; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #353535;
border: 1px solid #b7c4ce; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #545454; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #e31c3d; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Open Sans', Arial, sans-serif; background:#f4f4f4; color:#353535; }
*{box-sizing:border-box;}
.nav{height:56px;background:#00365a;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.logo{font-size:20px;font-weight:700;color:#fff;text-transform:uppercase;}
.navlinks{display:flex;gap:16px;font-size:13px;font-weight:600;text-transform:uppercase;color:#fff;}
.search{width:220px;height:32px;background:#fff;border-radius:9999px;display:flex;align-items:center;padding:0 14px;font-size:12px;color:#939393;}
.body{padding:16px 28px;}
.filters{display:flex;gap:8px;margin-bottom:14px;}
.pill{background:#eaeaea;border-radius:9999px;padding:6px 14px;font-size:12px;font-weight:600;}
.pill.active{background:#0257a6;color:#fff;}
.grid{display:flex;gap:12px;}
.card{width:180px;background:#fff;border:1px solid #e1e1e1;border-radius:4px;padding:8px;position:relative;}
.thumb{height:150px;border-radius:2px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#e31c3d;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:2px;text-transform:uppercase;}
.badgenew{position:absolute;top:6px;right:6px;background:#f9c642;color:#00365a;font-size:10px;font-weight:700;padding:2px 8px;border-radius:9999px;text-transform:uppercase;}
.title{font-size:14px;font-weight:500;margin-top:8px;line-height:1.3;height:36px;overflow:hidden;}
.stars{font-size:11px;color:#f9c642;margin-top:4px;}
.price{font-size:16px;font-weight:700;color:#00365a;margin-top:4px;}
.preorder{display:inline-block;margin-top:6px;border:1px solid #0257a6;color:#0257a6;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:64px;background:#00365a;display:flex;align-items:center;justify-content:space-between;padding:0 28px;color:#fff;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Midtown Comics</div>
<div class="navlinks"><div>New Arrivals</div><div>Back Issues</div><div>Graphic Novels</div><div>Toys</div></div>
<div class="search">Search comics, issues...</div>
</div>
<div class="body">
<div class="filters"><div class="pill active">All</div><div class="pill">Marvel</div><div class="pill">DC</div><div class="pill">Indie</div><div class="pill">Manga</div></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#0257a6,#026cd0)"><div class="badge">Sale</div></div><div class="title">Amazing Web-Slinger #14</div><div class="stars">★★★★★ 4.9</div><div class="price">$3.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#1058a8,#0080ff)"><div class="badgenew">New</div></div><div class="title">Dark Knight Legends #221</div><div class="stars">★★★★☆ 4.6</div><div class="price">$4.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#026cd0,#0057a8)"></div><div class="title">Cosmic Guardians Vol. 3 TPB</div><div class="stars">★★★★★ 5.0</div><div class="price">$19.99</div><div class="preorder">Pre-Order</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#0057a8,#0257a6)"><div class="badge">Sale</div></div><div class="title">Iron Sentinel Origins #1</div><div class="stars">★★★★☆ 4.4</div><div class="price">$2.99</div></div>
</div>
</div>
<div class="footer"><span>Shop About Resources Support</span><span>© Est. in the direct market</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1f1f1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1f1f1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1f1f1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #300064; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #300064;
border: 1px solid #300064; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1f1f1f;
border: 1px solid #c7c7c7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #fffe64; color: #1f1f1f;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; font-family:'Alexandria',Arial,sans-serif; color:#300064;
}
*{box-sizing:border-box;}
.nav{height:64px; background:#fff; display:flex; align-items:center; padding:0 30px; border-bottom:1px solid #efe9ff;}
.logo{font-size:23px; font-weight:700; color:#300064;}
.navlinks{display:flex; gap:20px; margin-left:36px; font-size:13px; font-weight:600; color:#6b6180;}
.navcta{margin-left:auto; background:#300064; color:#fff; border-radius:999px; padding:11px 22px; font-size:12px; font-weight:700;}
.hero{display:flex; align-items:center; gap:30px; padding:24px 30px; background:#f2edff;}
.heroText{flex:1;}
.heroText h1{font-size:32px; font-weight:700; line-height:1.2; margin:0 0 12px; max-width:400px; color:#300064;}
.heroText p{font-size:14px; color:#5c5470; line-height:1.5; max-width:380px; margin:0 0 16px;}
.heroBtn{display:inline-block; background:#300064; color:#fff; border-radius:999px; padding:12px 26px; font-size:13px; font-weight:700;}
.heroArt{width:230px; height:170px; position:relative; flex-shrink:0;}
.blob{position:absolute; border-radius:50%;}
.b1{width:140px; height:140px; background:#ff6dff; top:10px; left:10px; opacity:.85;}
.b2{width:100px; height:100px; background:#00fc87; bottom:0; right:10px; opacity:.9;}
.b3{width:60px; height:60px; background:#fffe64; top:30px; right:50px; opacity:.95;}
.section{padding:14px 30px 0;}
.sectitle{font-size:19px; font-weight:700; margin:0 0 12px; color:#300064;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.card{background:#fff; border-radius:20px; padding:9px; text-align:center; box-shadow:0 3px 10px rgba(48,0,100,.08); position:relative;}
.thumb{height:74px; border-radius:16px; margin-bottom:8px;}
.t1{background:linear-gradient(135deg,#ff6dff,#300064);}
.t2{background:linear-gradient(135deg,#00fc87,#7a60ff);}
.t3{background:linear-gradient(135deg,#fffe64,#ff9ecf);}
.t4{background:linear-gradient(135deg,#7a60ff,#300064);}
.badge{position:absolute; top:5px; right:5px; background:#fffe64; color:#300064; font-size:8px; font-weight:700; padding:3px 8px; border-radius:999px;}
.pname{font-size:12px; font-weight:700; margin-bottom:3px;}
.pprice{font-size:12px; color:#300064; font-weight:700;}
.footer{position:absolute; bottom:0; left:0; right:0; background:#300064; color:#d9c9ff; font-size:10px; text-align:center; padding:8px 0;}
</style>
<div class="nav">
<div class="logo">Hello Bello</div>
<div class="navlinks"><span>Diapers</span><span>Wipes</span><span>Bath</span><span>Bundles</span></div>
<div class="navcta">Start a Bundle</div>
</div>
<div class="hero">
<div class="heroText">
<h1>Playful, Affordable Baby Care</h1>
<p>Plant-based diapers, wipes, and essentials in colors that make diaper duty a little more fun.</p>
<div class="heroBtn">Shop Bundles</div>
</div>
<div class="heroArt"><div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div></div>
</div>
<div class="section">
<div class="sectitle">Fan Favorites</div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="badge">New</span></div><div class="pname">Rainbow Print Diapers</div><div class="pprice">$32.99</div></div>
<div class="card"><div class="thumb t2"></div><div class="pname">Sensitive Wipes 8pk</div><div class="pprice">$28.99</div></div>
<div class="card"><div class="thumb t3"></div><div class="pname">Bubbly Bath Wash</div><div class="pprice">$12.99</div></div>
<div class="card"><div class="thumb t4"></div><div class="pname">Starter Bundle Box</div><div class="pprice">$64.99</div></div>
</div>
</div>
<div class="footer">© Hello Bello — Baby Care with a Wink</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f2f6fa; color: #23282f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f2f6fa; color: #23282f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #23282f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #728197; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #004d9d; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f2f6fa; color: #004d9d;
border: 1px solid #004d9d; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #23282f;
border: 1px solid #bec2c7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #728197; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #00b2ff; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#f2f6fa; color:#4a5464; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #dcdfe5;}
.logo{font-size:19px;font-weight:600;color:#004d9d;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:0.3px;text-transform:uppercase;color:#4a5464;}
.hero{height:220px;background:linear-gradient(90deg,#fff 46%,#f2f6fa 46%);display:flex;}
.herotxt{width:46%;padding:24px 34px;display:flex;flex-direction:column;justify-content:center;}
.herotxt .k{font-size:13px;font-weight:500;color:#00b2ff;letter-spacing:0.2px;text-transform:uppercase;margin-bottom:8px;}
.herotxt h1{font-size:26px;font-weight:600;color:#004d9d;margin:0 0 10px;line-height:1.3;}
.herotxt p{font-size:14px;margin:0 0 16px;max-width:280px;}
.cta{width:fit-content;font-size:14px;font-weight:600;background:#004d9d;color:#fff;padding:12px 26px;border-radius:8px;}
.bottles{width:54%;display:flex;align-items:flex-end;justify-content:center;gap:16px;padding:20px;}
.bottle{border-radius:12px 12px 4px 4px;position:relative;}
.bottle:before{content:'';position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:18px;height:14px;background:#4a5464;border-radius:3px;}
.b1{width:60px;height:120px;background:linear-gradient(160deg,#e8f2fb,#004d9d);}
.b2{width:70px;height:150px;background:linear-gradient(160deg,#e8f2fb,#00b2ff);}
.b3{width:50px;height:100px;background:linear-gradient(160deg,#fff,#728197);}
.sec{padding:20px 34px 0;}
.sec h2{font-size:18px;font-weight:600;color:#004d9d;margin:0 0 14px;}
.grid{display:flex;gap:14px;}
.card{width:210px;background:#fff;border:1px solid #dcdfe5;border-radius:8px;padding:12px;}
.cimg{height:100px;border-radius:6px;margin-bottom:8px;}
.ctitle{font-size:14px;font-weight:600;color:#23282f;}
.cprice{font-size:13px;margin-top:4px;color:#728197;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#23282f;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:11px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mustela</div>
<div class="navlinks"><div>Newborn</div><div>Skin Care</div><div>Bath & Sun</div><div>Advice</div></div>
</div>
<div class="hero">
<div class="herotxt">
<div class="k">Dermo-Pediatrics</div>
<h1>Tested on the most<br>sensitive skin: yours.</h1>
<p>Plant-based formulas developed with pediatricians since 1950.</p>
<div class="cta">Shop Skin Care</div>
</div>
<div class="bottles"><div class="bottle b1"></div><div class="bottle b2"></div><div class="bottle b3"></div></div>
</div>
<div class="sec">
<h2>Recommended for You</h2>
<div class="grid">
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#e8f2fb,#004d9d)"></div><div class="ctitle">Stelatopia Cream, 6.7oz</div><div class="cprice">$21.99</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#e8f2fb,#00b2ff)"></div><div class="ctitle">Mineral Sunscreen SPF 50</div><div class="cprice">$18.99</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#fff,#728197)"></div><div class="ctitle">2-in-1 Hair & Body Wash</div><div class="cprice">$14.99</div></div>
</div>
</div>
<div class="footer"><span>Dermatologist Tested</span><span>Ingredients Find a Store</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f6f0; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f6f0; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #4e4e4e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #d8385a; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f9f6f0; color: #d8385a;
border: 1px solid #d8385a; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #c2c0bc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4e4e4e; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cc0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f6f0; font-family:Georgia,'Times New Roman',serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Josefin Sans',Georgia,serif;font-size:20px;font-weight:600;color:#1e1e1e;}
.navlinks{display:flex;gap:22px;font-family:'Josefin Sans',sans-serif;font-size:14px;font-weight:500;letter-spacing:0.3px;text-transform:uppercase;color:#1e1e1e;}
.navlinks .on{color:#d8385a;}
.hero{height:210px;display:flex;align-items:center;padding:0 32px;}
.h1{font-family:'Josefin Sans',Georgia,serif;font-size:32px;font-weight:600;letter-spacing:-0.3px;line-height:1.2;margin:0 0 12px;width:400px;}
.sub{font-size:14px;margin:0 0 18px;width:340px;}
.btn{display:inline-block;background:#d8385a;color:#fff;font-family:'Josefin Sans',sans-serif;font-size:14px;font-weight:600;letter-spacing:0.4px;padding:12px 26px;border-radius:8px;}
.book{position:absolute;right:70px;top:60px;width:130px;height:160px;background:linear-gradient(150deg,#bedcd2,#d8385a 80%);border-radius:0 8px 8px 0;box-shadow:-4px 0 0 #a29f9b;}
.section{padding:18px 32px 0;}
.stitle{font-family:'Josefin Sans',sans-serif;font-size:18px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:150px;background:#fff;border-radius:12px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-family:'Courier New',monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#fff;padding:2px 8px;border-radius:4px;background:#cc0000;}
.thumb{height:96px;border-radius:8px 8px 0 0;margin-bottom:8px;}
.pname{font-family:'Josefin Sans',sans-serif;font-size:14px;font-weight:500;margin-bottom:4px;}
.pprice{color:#d8385a;font-size:15px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#faf4e8;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#4e4e4e;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Tales For Tadpoles</div>
<div class="navlinks"><div class="on">Picture Books</div><div>Board Books</div><div>Gift Sets</div><div>Ages</div></div>
</div>
<div class="hero">
<div>
<div class="h1">Storybooks worth the bedtime routine.</div>
<div class="sub">Warm, well-made picture books for the youngest readers in the house.</div>
<div class="btn">Shop New Arrivals</div>
</div>
<div class="book"></div>
</div>
<div class="section">
<div class="stitle">This Week's Picks</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(150deg,#bedcd2,#f1c142);"></div><div class="pname">The Sleepy Garden</div><div class="pprice">$12.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#d8385a,#a62f48);"></div><div class="pname">Bear's First Snow</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#f1c142,#bedcd2);"></div><div class="pname">Counting Tadpoles</div><div class="pprice">$9.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#a29f9b,#d8385a);"></div><div class="pname">Goodnight, Pond</div><div class="pprice">$11.99</div></div>
</div>
</div>
<div class="footer"><span>© Storybooks For Little Ones</span><span>Gift Wrapping · Age Guide</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #242833;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #242833;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.25px; margin: 0; color: #242833; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: 0.2px; background: #108474; color: #ffffff;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: 0.2px; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 6px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #242833;
border: 1px solid #c8c9cc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #e66c41; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Inkjets.com</title>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#f9fafb;font-family:'Nunito Sans','Segoe UI',Roboto,Arial,sans-serif;color:#555555;}
*{box-sizing:border-box;}
.utilbar{position:absolute;top:0;left:0;width:960px;height:32px;background:#108474;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.nav{position:absolute;top:32px;left:0;width:960px;height:60px;background:#fff;border-bottom:1px solid #eeeeee;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-weight:700;font-size:19px;color:#242833;}
.logo b{color:#108474;}
.searchbar{width:340px;height:34px;border:1px solid #dedede;border-radius:6px 0 0 6px;display:flex;}
.searchbar .inp{flex:1;font-size:12px;color:#888;display:flex;align-items:center;padding:0 12px;}
.searchbar .go{width:44px;background:#108474;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;border-radius:0 6px 6px 0;}
.navicons{font-size:12px;color:#242833;font-weight:600;}
.hero{position:absolute;top:92px;left:0;width:960px;height:220px;background:#108474;display:flex;align-items:center;padding:0 44px;}
.hero::after{content:'';position:absolute;right:0;top:0;width:280px;height:220px;background:#c1e6e6;opacity:0.25;}
.hero h1{color:#fff;font-size:30px;font-weight:700;letter-spacing:-0.5px;margin:0 0 12px 0;width:480px;line-height:1.25;}
.hero p{color:#e8f5f4;font-size:15px;margin:0 0 18px 0;width:420px;}
.cta{background:#fbcd0a;color:#121212;font-size:15px;font-weight:700;border-radius:6px;padding:12px 24px;display:inline-block;}
.trust{position:absolute;top:312px;left:0;width:960px;height:56px;background:#f9fafb;border-top:1px solid #dedede;display:flex;align-items:center;justify-content:space-around;font-size:12px;color:#555;}
.trust span{color:#108474;font-weight:700;margin-right:4px;}
.catrow{position:absolute;top:388px;left:32px;width:896px;height:32px;display:flex;gap:0;border-bottom:1px solid #eeeeee;}
.tab{padding:8px 16px;font-size:13px;font-weight:600;color:#555;border-bottom:2px solid transparent;}
.tab.active{color:#108474;border-bottom:2px solid #108474;}
.grid{position:absolute;top:436px;left:32px;width:896px;height:188px;display:flex;gap:16px;}
.card{width:212px;background:#fff;border:1px solid #eeeeee;border-radius:6px;padding:14px;position:relative;}
.imgbox{width:184px;height:78px;background:#f5f5f5;border-radius:4px;margin-bottom:8px;}
.imgbox.a{background:linear-gradient(135deg,#c1e6e6,#108474);}
.imgbox.b{background:linear-gradient(135deg,#fde8dc,#e66c41);}
.imgbox.c{background:linear-gradient(135deg,#fff6cf,#fbcd0a);}
.tags{display:flex;gap:4px;margin-bottom:6px;}
.tag{font-size:9px;font-weight:700;text-transform:uppercase;border-radius:4px;padding:2px 6px;color:#fff;}
.tag.oem{background:#242833;}
.tag.compat{background:#108474;}
.title{font-size:14px;font-weight:600;color:#242833;margin-bottom:4px;}
.price{font-size:19px;font-weight:700;color:#242833;}
.savebadge{position:absolute;top:10px;right:10px;background:#e66c41;color:#fff;font-size:9px;font-weight:700;border-radius:9999px;padding:3px 8px;}
</style>
<div class="utilbar"><span>Free Shipping on Orders $35+</span><span>1-800-465-5387 | Rewards | Track Order</span></div>
<div class="nav">
<div class="logo">Inkjets Com</div>
<div class="searchbar"><div class="inp">HP OfficeJet Pro 9015e…</div><div class="go">🔍</div></div>
<div class="navicons">Account · Cart (0)</div>
</div>
<div class="hero">
<h1>Find your cartridge. Save every time.</h1>
<p>Genuine OEM, compatible, and remanufactured ink & toner for every printer we support.</p>
<div class="cta">Find My Cartridges</div>
</div>
<div class="trust">
<div><span>✓</span>Compatibility Guarantee</div>
<div><span>✓</span>Free Shipping $35+</div>
<div><span>✓</span>Secure Checkout</div>
<div><span>✓</span>Easy Returns</div>
</div>
<div class="catrow">
<div class="tab active">Best Sellers</div>
<div class="tab">New Arrivals</div>
<div class="tab">Bundles</div>
<div class="tab">Clearance</div>
</div>
<div class="grid">
<div class="card">
<div class="savebadge">Save 30%</div>
<div class="imgbox a"></div>
<div class="tags"><div class="tag compat">Compatible</div></div>
<div class="title">HP 65XL Black & Color Combo</div>
<div class="price">$24.99</div>
</div>
<div class="card">
<div class="imgbox b"></div>
<div class="tags"><div class="tag oem">OEM</div></div>
<div class="title">Canon PGI-280 Genuine Set</div>
<div class="price">$42.50</div>
</div>
<div class="card">
<div class="imgbox c"></div>
<div class="tags"><div class="tag compat">Compatible</div></div>
<div class="title">Epson 702XL 4-Pack</div>
<div class="price">$36.99</div>
</div>
<div class="card">
<div class="imgbox a"></div>
<div class="tags"><div class="tag oem">OEM</div></div>
<div class="title">Brother TN660 Toner</div>
<div class="price">$29.99</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #0e0c0c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #0e0c0c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 26px; font-weight: 600; line-height: 1.25; margin: 0; color: #0e0c0c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #656565; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #d73246; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fafafa; color: #0e0c0c;
border: 1px solid #d73246; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #3c3c3c;
border: 1px solid #bfbebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #656565; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d73246; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Work Sans', Arial, sans-serif; color:#0e0c0c; }
*{box-sizing:border-box;}
.nav{height:60px;background:#ffffff;border-bottom:1px solid #ebebeb;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Bodoni Moda', Georgia, serif;font-size:22px;font-weight:600;letter-spacing:0.3px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;color:#3c3c3c;}
.navlinks span:first-child{color:#d73246;}
.searchpill{width:170px;height:36px;border-radius:9999px;border:1px solid #ebebeb;display:flex;align-items:center;padding:0 16px;font-size:11px;color:#656565;}
.hero{height:230px;background:#fafafa;display:flex;align-items:center;padding:0 32px;}
.heroText{width:440px;}
.kicker{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#656565;margin-bottom:12px;}
.h1{font-family:'Bodoni Moda', Georgia, serif;font-size:30px;font-weight:500;line-height:1.2;margin:0 0 12px;}
.sub{font-size:13px;color:#3c3c3c;margin:0 0 18px;max-width:340px;}
.btn{display:inline-flex;align-items:center;height:44px;padding:0 28px;border-radius:9999px;background:#d73246;color:#fff;font-size:13px;font-weight:600;}
.bearwrap{width:400px;height:230px;position:relative;}
.head{position:absolute;left:180px;top:30px;width:80px;height:80px;border-radius:9999px;background:#c89a6a;}
.ear{position:absolute;width:26px;height:26px;border-radius:9999px;background:#c89a6a;}
.e1{left:170px;top:14px;} .e2{left:240px;top:14px;}
.body1{position:absolute;left:160px;top:100px;width:100px;height:110px;border-radius:40% 40% 30% 30%;background:#b3835a;}
.button{position:absolute;left:220px;top:118px;width:18px;height:18px;border-radius:9999px;background:#d73246;border:2px solid #fff;}
.sec{padding:18px 32px;}
.sectitle{font-size:15px;font-weight:600;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:216px;background:#ffffff;border:1px solid #ebebeb;border-radius:8px;padding:12px;}
.thumb{height:86px;border-radius:6px;margin-bottom:10px;}
.ptitle{font-size:13px;font-weight:500;margin-bottom:4px;}
.pprice{font-size:14px;font-weight:600;}
.footer{height:44px;background:#fafafa;border-top:1px solid #ebebeb;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;color:#3c3c3c;}
</style>
<div class="nav">
<div class="logo">Steiff</div>
<div class="navlinks"><span>Shop</span><span>Bears</span><span>Nursery</span><span>Collectors</span></div>
<div class="searchpill">Search...</div>
</div>
<div class="hero">
<div class="heroText">
<div class="kicker">Since 1904</div>
<div class="h1">Every bear carries<br>its button in ear.</div>
<div class="sub">Mohair bears and heirloom plush, made with the same careful stitching for over a century.</div>
<div class="btn">Shop Bears</div>
</div>
<div class="bearwrap"><div class="ear e1"></div><div class="ear e2"></div><div class="head"></div><div class="body1"></div><div class="button"></div></div>
</div>
<div class="sec">
<div class="sectitle">Collector Favorites</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#c89a6a"></div><div class="ptitle">Classic Teddy Bear, 35cm</div><div class="pprice">$189.00</div></div>
<div class="card"><div class="thumb" style="background:#b3835a"></div><div class="ptitle">Limited Edition Bear</div><div class="pprice">$349.00</div></div>
<div class="card"><div class="thumb" style="background:#e6d3b8"></div><div class="ptitle">Nursery Comforter Set</div><div class="pprice">$79.00</div></div>
<div class="card"><div class="thumb" style="background:#9a7148"></div><div class="ptitle">Miniature Bear, 12cm</div><div class="pprice">$59.00</div></div>
</div>
</div>
<div class="footer"><span>© Steiff Heritage Since 1904</span><span>Care Guide Newsletter</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0f171e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0f171e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e9194; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a242f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0f171e; color: #ffffff;
border: 1px solid #1a242f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0f171e; color: #f5f5f5;
border: 1px solid #343b40; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e9194; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #111921; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0F171E; color:#FFFFFF; box-sizing:border-box;
font-family:'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.billboard { position:relative; width:960px; height:340px; overflow:hidden;
background:linear-gradient(135deg,#1c3448 0%,#0F171E 65%); }
.billboard::before { content:''; position:absolute; inset:0;
background:radial-gradient(circle at 78% 22%, rgba(0,168,225,0.28), transparent 45%),
radial-gradient(circle at 30% 70%, rgba(46,59,71,0.9), transparent 55%); }
.billboard::after { content:''; position:absolute; left:0; right:0; bottom:0; height:220px;
background:linear-gradient(to top, #0F171E 10%, rgba(15,23,30,0) 100%); }
nav { position:absolute; top:0; left:0; right:0; height:48px; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; z-index:5; }
.brand { font-size:18px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.navicons { display:flex; gap:18px; align-items:center; }
.avatar { width:26px; height:26px; border-radius:50%; background:#2E3B47; border:1px solid #3a4a58; }
.bb-content { position:absolute; left:32px; bottom:28px; z-index:3; max-width:520px; }
.bb-content h1 { font-size:30px; font-weight:700; letter-spacing:-0.4px; margin:0 0 8px; line-height:1.1; }
.bb-meta { font-size:13px; color:#AAB7C4; margin:0 0 16px; }
.bb-meta .imdb { color:#F5C518; font-weight:600; }
.bb-actions { display:flex; gap:10px; align-items:center; }
.btn-play { background:#00A8E1; color:#0F171E; border:none; border-radius:8px; padding:11px 22px 11px 18px;
font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px; box-shadow:0 8px 24px rgba(0,168,225,0.32); }
.btn-play .tri { width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid #0F171E; }
.btn-ghost { background:rgba(255,255,255,0.14); color:#fff; border:none; border-radius:8px; padding:11px 20px; font-weight:600; font-size:14px; }
.xray-pill { background:rgba(255,255,255,0.16); color:#fff; border-radius:6px; padding:6px 14px; font-size:12px; font-weight:700; letter-spacing:0.02em; }
.rows { position:relative; padding:20px 32px 0; z-index:2; }
.row-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.row-head h3 { font-size:18px; font-weight:700; margin:0; letter-spacing:-0.2px; }
.row-head .more { font-size:12px; color:#AAB7C4; font-weight:600; }
.tiles { display:flex; gap:12px; }
.tile { width:110px; border-radius:6px; position:relative; overflow:hidden; }
.tile .art { width:110px; height:150px; border-radius:6px; }
.tile .title { font-size:12px; font-weight:600; margin-top:6px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile .sub { font-size:11px; color:#00A8E1; margin-top:2px; }
.a1 { background:linear-gradient(160deg,#3a2450,#17202b); }
.a2 { background:linear-gradient(160deg,#1f4d3a,#0F171E); }
.a3 { background:linear-gradient(160deg,#5a2a2a,#0F171E); }
.a4 { background:linear-gradient(160deg,#264a5c,#0F171E); }
.a5 { background:linear-gradient(160deg,#4a3f1f,#0F171E); }
.a6 { background:linear-gradient(160deg,#2a2a5a,#0F171E); }
.progress { position:absolute; left:0; bottom:0; width:100%; height:3px; background:rgba(255,255,255,0.25); }
.progress i { display:block; height:100%; width:55%; background:#00A8E1; }
.tabbar { position:absolute; left:0; right:0; bottom:0; height:52px; background:rgba(15,23,30,0.94);
display:flex; align-items:center; justify-content:space-around; border-top:1px solid #2E3B47; }
.tab { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; font-weight:600; color:#AAB7C4; }
.tab.active { color:#00A8E1; }
.tab .dot { width:20px; height:20px; border-radius:5px; background:currentColor; opacity:0.85; }
</style></head>
<body>
<div class="billboard">
<nav>
<p class="brand">Prime Video (iOS)</p>
<div class="navicons"><span class="avatar"></span></div>
</nav>
<div class="bb-content">
<h1>The Citadel Files</h1>
<p class="bb-meta">2024 · 16+ · 1 Season · <span class="imdb">★ 8.4 IMDb</span></p>
<div class="bb-actions">
<button class="btn-play"><span class="tri"></span>Play</button>
<button class="btn-ghost">+ Watchlist</button>
<span class="xray-pill">X-Ray</span>
</div>
</div>
</div>
<div class="rows">
<div class="row-head"><h3>Continue Watching</h3><span class="more">See more</span></div>
<div class="tiles">
<div class="tile"><div class="art a1"><div class="progress"><i></i></div></div><div class="title">Nightfall Bay</div><div class="sub">S2 E4</div></div>
<div class="tile"><div class="art a2"><div class="progress"><i style="width:30%"></i></div></div><div class="title">Harborline</div><div class="sub">S1 E9</div></div>
<div class="tile"><div class="art a3"><div class="progress"><i style="width:80%"></i></div></div><div class="title">Vantage</div><div class="sub">Movie</div></div>
<div class="tile"><div class="art a4"><div class="progress"><i style="width:12%"></i></div></div><div class="title">Cold Circuit</div><div class="sub">S3 E1</div></div>
<div class="tile"><div class="art a5"><div class="progress"><i style="width:65%"></i></div></div><div class="title">The Long Shift</div><div class="sub">S1 E2</div></div>
</div>
<div class="row-head" style="margin-top:18px;"><h3>Included with Prime</h3><span class="more">See more</span></div>
<div class="tiles">
<div class="tile"><div class="art a6" style="height:150px;"></div><div class="title">Redline City</div><div class="sub">Included</div></div>
<div class="tile"><div class="art a3" style="height:150px;"></div><div class="title">Salt & Static</div><div class="sub">Included</div></div>
<div class="tile"><div class="art a2" style="height:150px;"></div><div class="title">Windfall</div><div class="sub">Included</div></div>
<div class="tile"><div class="art a1" style="height:150px;"></div><div class="title">The Understudy</div><div class="sub">Included</div></div>
<div class="tile"><div class="art a4" style="height:150px;"></div><div class="title">Perimeter</div><div class="sub">Included</div></div>
</div>
</div>
<div class="tabbar">
<div class="tab active"><span class="dot"></span>Home</div>
<div class="tab"><span class="dot"></span>Store</div>
<div class="tab"><span class="dot"></span>Live</div>
<div class="tab"><span class="dot"></span>Find</div>
<div class="tab"><span class="dot"></span>Downloads</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #010101;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #010101;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: 0.15px; margin: 0; color: #010101; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #494949; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #db1e36; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #010101;
border: 1px solid #db1e36; border-radius: 4px;
padding: 9px 23px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #010101;
border: 1px solid #c0c0c0; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #494949; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #db1e36; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:Arial,Helvetica,sans-serif; color:#231f20; }
*{box-sizing:border-box;}
.nav{height:72px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Anton',Arial,sans-serif;font-size:24px;letter-spacing:1px;color:#010101;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;text-transform:uppercase;color:#010101;}
.navlinks span:first-child{color:#db1e36;border-bottom:2px solid #db1e36;padding-bottom:24px;}
.hero{height:280px;background:#010101;position:relative;display:flex;align-items:center;padding:0 32px;overflow:hidden;}
.h1{font-family:'Anton',Arial,sans-serif;font-size:48px;color:#fff;letter-spacing:1px;text-transform:uppercase;line-height:1.05;margin:0 0 16px;max-width:460px;}
.cta{display:inline-block;background:#db1e36;color:#fff;font-family:Arial,sans-serif;font-weight:700;font-size:14px;letter-spacing:.5px;text-transform:uppercase;padding:10px 26px;border-radius:4px;}
.bat{position:absolute;right:60px;top:40px;width:20px;height:200px;background:linear-gradient(#c4c4c4,#888);border-radius:10px;transform:rotate(20deg);}
.bat:after{content:'';position:absolute;top:-10px;left:-6px;width:32px;height:32px;border-radius:9999px;background:#a52a2a;}
.grid{display:flex;gap:12px;padding:20px 32px 0;}
.card{width:150px;background:#fff;position:relative;}
.thumb{height:110px;background:#f4f4f4;margin-bottom:8px;}
.pricebadge{position:absolute;top:8px;left:8px;background:#db1e36;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:4px;}
.saletag{position:absolute;top:8px;right:8px;background:#da020f;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:4px;}
.ptitle{font-size:14px;font-weight:600;color:#010101;text-transform:uppercase;line-height:1.3;height:34px;}
.swatches{display:flex;gap:4px;margin:6px 0;}
.sw{width:12px;height:12px;border-radius:9999px;}
.pprice{font-family:'Anton',Arial,sans-serif;font-size:16px;color:#db1e36;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#010101;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#888;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Marucci Sports</div>
<div class="navlinks"><span>Bats</span><span>Gloves</span><span>Apparel</span><span>Pro Line</span></div>
</div>
<div class="hero">
<div>
<div class="h1">Built for the Crack of the Bat.</div>
<div class="cta">Shop Bats</div>
</div>
<div class="bat"></div>
</div>
<div class="grid">
<div class="card"><div class="pricebadge">$299</div><div class="thumb"></div><div class="ptitle">CAT9 Composite BBCOR Bat</div><div class="swatches"><div class="sw" style="background:#db1e36"></div><div class="sw" style="background:#010101"></div></div><div class="pprice">$299.99</div></div>
<div class="card"><div class="saletag">Sale</div><div class="thumb"></div><div class="ptitle">Cypress Series Fielding Glove</div><div class="swatches"><div class="sw" style="background:#231f20"></div><div class="sw" style="background:#888"></div></div><div class="pprice">$219.99</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Youth Pro Batting Helmet</div><div class="swatches"><div class="sw" style="background:#db1e36"></div></div><div class="pprice">$79.99</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Performance Compression Sleeve</div><div class="swatches"><div class="sw" style="background:#010101"></div></div><div class="pprice">$24.99</div></div>
</div>
<div class="footer"><span>© Marucci Sports Equipment</span><span>Warranty · Fittings · Team Orders</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #58cc02; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #58cc02; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e4f7d7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#FFFFFF; color:#4B4B4B; box-sizing:border-box; font-family:'SF Pro Rounded',-apple-system,BlinkMacSystemFont,'Nunito',sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; display:flex; }
.path { width:420px; padding:26px; position:relative; }
.hud { display:flex; gap:14px; margin-bottom:20px; }
.hchip { display:flex; align-items:center; gap:6px; font-weight:700; font-size:18px; }
.hchip.fire { color:#FF9600; } .hchip.gem { color:#1CB0F6; } .hchip.heart { color:#FF4B4B; }
.node-col { display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:10px; }
.noderow { display:flex; align-items:center; width:100%; }
.node { width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; color:#fff; box-shadow:0 4px 0 #58A700; position:relative; }
.node.locked { background:#E5E5E5; box-shadow:none; color:#AFAFAF; }
.node.current { background:#58CC02; }
.node.gold { background:#FFC800; box-shadow:0 4px 0 #E29F03; }
.crown { position:absolute; top:-14px; font-size:16px; }
.left-off { margin-right:80px; } .right-off { margin-left:80px; }
.right { flex:1; background:#F7F7F7; padding:0; display:flex; align-items:center; justify-content:center; }
.qcard { width:460px; padding:30px; }
.qtitle { font-size:22px; font-weight:700; text-align:center; }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:26px; }
.tile { border:2px solid #E5E5E5; box-shadow:0 2px 0 #E5E5E5; border-radius:12px; padding:14px 18px; font-size:17px; font-weight:700; text-align:center; background:#fff; }
.tile.correct { background:#D7FFB8; border-color:#58CC02; color:#58A700; }
.tile.wrong { background:#FFDFE0; border-color:#FF4B4B; color:#EA2B2B; }
.bigbtn { margin-top:30px; background:#58CC02; box-shadow:0 4px 0 #58A700; border-radius:16px; color:#fff; text-align:center; padding:16px; font-weight:800; font-size:17px; letter-spacing:0.4pt; text-transform:uppercase; }
</style>
</head>
<body>
<div class="stage">
<div class="path">
<div style="font-size:15px;font-weight:800;color:#58CC02;margin-bottom:8px">Duolingo (iOS)</div>
<div class="hud"><div class="hchip fire">🔥 12</div><div class="hchip gem">♦ 245</div><div class="hchip heart">♥ 5</div></div>
<div class="node-col">
<div class="noderow"><div class="node right-off">★</div></div>
<div class="noderow"><div class="node current"><span class="crown">👑</span>★</div></div>
<div class="noderow"><div class="node right-off">★</div></div>
<div class="noderow"><div class="node locked">🔒</div></div>
<div class="noderow"><div class="node gold right-off">★</div></div>
</div>
</div>
<div class="right">
<div class="qcard">
<div class="qtitle">Translate this sentence</div>
<div style="text-align:center;margin-top:14px;font-size:16px;color:#4B4B4B">"El gato duerme en la ventana."</div>
<div class="tiles">
<div class="tile correct">The cat</div>
<div class="tile">is running</div>
<div class="tile correct">sleeps</div>
<div class="tile wrong">on the door</div>
<div class="tile correct">on the window</div>
<div class="tile">in the garden</div>
</div>
<div class="bigbtn">Check</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1979c2;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1979c2;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.25px; margin: 0; color: #1979c2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7d7d7d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #00b5d1; color: #000000;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #000000;
border: 1px solid #00b5d1; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #242424;
border: 1px solid #c6def0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7d7d7d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #e02b27; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Gotham A','Gotham B',Arial,sans-serif; color:#242424; }
*{box-sizing:border-box;}
.utility{height:28px;background:#242424;color:#bbbbbb;font-size:11px;display:flex;align-items:center;justify-content:center;}
.nav{height:52px;background:#1a1a1a;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;color:#fff;}
.navlinks div:first-child{border-bottom:3px solid #00b5d1;padding-bottom:4px;}
.hero{height:210px;background:#f6f6f6;display:flex;align-items:center;padding:0 30px;}
.herotext{max-width:420px;}
.herotext h1{font-size:32px;font-weight:700;color:#242424;margin:0 0 10px;letter-spacing:-.4px;}
.herotext p{font-size:14px;color:#303030;margin:0 0 16px;}
.btn{display:inline-block;background:#00b5d1;color:#fff;font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:12px 24px;border-radius:4px;}
.heroimg{width:280px;height:150px;margin-left:auto;position:relative;}
.heroimg:before{content:'';position:absolute;left:60px;top:20px;width:120px;height:90px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e8e8e8,#242424 85%);}
.heroimg:after{content:'';position:absolute;left:180px;top:60px;width:80px;height:16px;background:#00b5d1;border-radius:8px;}
.secTitle{font-size:20px;font-weight:700;color:#242424;padding:16px 30px 10px;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:200px;background:#fcfcfc;border:1px solid #e8e8e8;border-radius:4px;padding:12px;position:relative;}
.badge{position:absolute;top:20px;left:20px;background:#e02b27;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:4px;z-index:2;}
.thumb{height:90px;background:#f6f6f6;border-radius:4px;margin-bottom:8px;}
.ctitle{font-size:16px;font-weight:600;margin-bottom:4px;}
.cprice{font-size:22px;font-weight:700;color:#242424;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#242424;border-top:3px solid #00b5d1;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:11px;color:#fff;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="utility">Free shipping on orders over $99 · Find a Dealer</div>
<div class="nav">
<div class="logo">Simplicity</div>
<div class="navlinks"><div>Vacuums</div><div>Steam Mops</div><div>Accessories</div><div>Parts</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Simply powerful cleaning.</h1>
<p>Bagged upright vacuums engineered for suction that lasts the life of the machine.</p>
<div class="btn">Shop Vacuums</div>
</div>
<div class="heroimg"></div>
</div>
<div class="secTitle">Top Rated</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb"></div><div class="ctitle">Symmetry Upright Vacuum</div><div class="cprice">$449.99</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">S3 Freedom Vacuum</div><div class="cprice">$329.99</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Steam Mop Pro</div><div class="cprice">$149.99</div></div>
</div>
<div class="footer"><span>© Simplicity</span><span>Find a Dealer · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9b9b9b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #ff8900; color: #000000;
border: none; border-radius: 9999px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #f9f9f9; color: #212121;
border: 1px solid #ff8900; border-radius: 9999px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9f9f9; color: #323232;
border: 1px solid #c3c3c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9b9b9b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ff9f00; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f9f9; color:#323232; font-family:'General Sans Variable','LL Brown',Helvetica,Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;background:#f9f9f9;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:600;color:#212121;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;}
.navlinks .active{color:#ff8900;}
.navlinks .muted{color:#9b9b9b;}
.search{background:#f0f0f0;border-radius:9999px;padding:10px 20px;font-size:13px;color:#9b9b9b;width:200px;}
.hero{padding:14px 32px 0;}
.headline{font-size:26px;font-weight:600;margin:0 0 4px;}
.sub{font-size:14px;color:#9b9b9b;margin:0 0 14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:8px;overflow:hidden;position:relative;}
.thumb{height:200px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.badge.new{background:#ff9f00;color:#fff;}
.badge.sale{background:#e94c89;color:#fff;}
.pbody{padding:10px 12px 14px;}
.ptitle{font-size:14px;font-weight:500;color:#212121;margin:0 0 4px;}
.pprice{font-size:13px;color:#9b9b9b;}
.section{padding:20px 32px 0;}
.footer{position:absolute;bottom:0;left:0;right:0;height:46px;background:#212121;color:#d9d9d9;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Stones Throw Records</div>
<div class="navlinks"><span class="active">Vinyl</span><span class="muted">Artists</span><span class="muted">Merch</span><span class="muted">Digital</span></div>
<div class="search">Search releases...</div>
</div>
<div class="hero">
<div class="headline">New arrivals from the crates.</div>
<div class="sub">Fresh pressings and rare reissues, curated one label at a time.</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#ff8900,#212121)"><span class="badge sale">Sale</span></div><div class="pbody"><div class="ptitle">Midnight Session LP</div><div class="pprice">$26.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#fc7f1b,#323232)"><span class="badge new">New</span></div><div class="pbody"><div class="ptitle">Backyard Tapes Vol. 2</div><div class="pprice">$22.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#212121,#ff8900)"></div><div class="pbody"><div class="ptitle">Loop Study No. 4</div><div class="pprice">$28.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#323232,#ff9f00)"></div><div class="pbody"><div class="ptitle">Analog Dust EP</div><div class="pprice">$18.00</div></div></div>
</div>
</div>
<div class="footer"><span>© Stones Throw Records</span><span>Shop Artists About</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c4cc; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c4cc; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c4cc; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c4cc; color: #000000;
border: 1px solid #27ccd3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29cdd4; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F8F7F6; color:#23221F; box-sizing:border-box;
font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#ffffff; border-bottom:1px solid #EDEBE6; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:700; margin:0; color:#00C4CC; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#4E4C49; }
.cta { background:#00C4CC; color:#ffffff; border-radius:6px; padding:0 18px; height:36px; display:flex; align-items:center; font-size:15px; font-weight:700; }
.hero { padding:30px 40px 20px; }
.hero h1 { font-size:28px; font-weight:700; margin:0 0 8px; }
.hero p { font-size:14px; color:#4E4C49; margin:0; }
.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; padding:20px 40px 0; }
.card { background:#ffffff; border:1px solid #EDEBE6; border-radius:8px; padding:18px; }
.card h3 { font-size:16px; font-weight:700; margin:0 0 10px; }
.row { display:flex; gap:8px; }
.field { flex:1; border:1px solid #AAA69F; border-radius:4px; height:36px; }
.notices { display:flex; gap:10px; padding:20px 40px 0; }
.notice { flex:1; border-radius:4px; padding:10px 14px; font-size:13px; }
.info { background:#DDF2FB; color:#1376A0; }
.success { background:#E6F2C8; color:#378445; }
.warn { background:#FAF2D0; color:#F56121; }
</style></head>
<body>
<nav>
<p class="brand">SmartHR</p>
<div class="navlinks"><span>Employees</span><span>Labor Procedures</span><span>Year-End Tax</span></div>
<span class="cta">Save</span>
</nav>
<section class="hero">
<h1>Anyone, efficiently, without getting lost</h1>
<p>All of labor administration, brought into one platform.</p>
</section>
<div class="cards">
<div class="card"><h3>Onboarding</h3><div class="row"><div class="field"></div><div class="field"></div></div></div>
<div class="card"><h3>Year-End Tax Adjustment</h3><div class="row"><div class="field"></div><div class="field"></div></div></div>
</div>
<div class="notices">
<div class="notice info">The filing deadline is the end of this month</div>
<div class="notice success">Saved successfully</div>
<div class="notice warn">Some documents are still missing</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.2; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c82027; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #c82027;
border: 1px solid #c82027; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #c82027; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:flex; flex-direction:column; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
nav { height:54px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
background:#c82027; }
.brand { font-size:19px; font-weight:700; color:#ffffff; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:12px; font-weight:700; color:#ffe6e7; text-transform:uppercase; }
.cart { background:#ffffff; color:#c82027; font-size:11px; font-weight:700; padding:6px 14px; border-radius:2px; }
.hero { display:flex; align-items:center; gap:30px; padding:24px 40px 18px; }
.htext { max-width:400px; }
.htext h1 { font-size:28px; font-weight:700; color:#1a1a1a; margin:0 0 10px; line-height:1.2; letter-spacing:-0.3px; }
.htext p { font-size:14px; color:#333333; line-height:1.5; margin:0 0 14px; }
.btn { display:inline-block; background:#c82027; color:#fff; font-size:14px; font-weight:700; padding:10px 22px;
text-transform:uppercase; letter-spacing:0.5px; border-radius:2px; }
.heroimg { width:220px; height:140px; border-radius:2px; flex-shrink:0; background:linear-gradient(150deg,#eeeeee,#c82027 140%); }
.section { padding:0 40px; background:#eeeeee; }
.section h2 { font-size:17px; font-weight:700; color:#1a1a1a; margin:0; padding:14px 0; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding-bottom:16px; }
.card { background:#ffffff; border-radius:2px; padding:10px; position:relative; }
.cover { height:70px; border-radius:2px; margin-bottom:8px; }
.a1 .cover { background:#c82027; } .a2 .cover { background:#333333; } .a3 .cover { background:#767676; } .a4 .cover { background:#c82027; opacity:0.6; }
.badge { position:absolute; top:6px; left:6px; background:#c82027; color:#fff; font-size:9px; font-weight:700; padding:2px 6px; border-radius:2px; }
.card .t { font-size:12px; font-weight:600; color:#1a1a1a; margin:0 0 4px; }
.card .p { font-size:14px; font-weight:700; color:#c82027; }
.trust { margin-top:auto; flex-shrink:0; display:flex; padding:12px 40px; background:#333333; }
.trust span { flex:1; text-align:center; font-size:11px; font-weight:600; color:#eeeeee; }
</style></head>
<body>
<nav>
<div class="brand">Hamilton Beach</div>
<div class="navlinks"><span>Blenders</span><span>Slow Cookers</span><span>Coffee Makers</span><span>Air Fryers</span></div>
<div class="cart">Cart · 0</div>
</nav>
<div class="hero">
<div class="htext">
<h1>Kitchen appliances built for everyday use.</h1>
<p>Trusted specs, honest prices, and a catalog built for the value-minded home cook — no lifestyle upsell, just what works.</p>
<span class="btn">Shop All Appliances</span>
</div>
<div class="heroimg"></div>
</div>
<div class="section">
<h2>Best Selling Appliances</h2>
<div class="grid">
<div class="card a1"><div class="badge">BEST SELLER</div><div class="cover"></div><div class="t">Power Elite Blender</div><div class="p">$39.99</div></div>
<div class="card a2"><div class="badge">NEW</div><div class="cover"></div><div class="t">6-Qt Slow Cooker</div><div class="p">$34.99</div></div>
<div class="card a3"><div class="badge">SALE</div><div class="cover"></div><div class="t">12-Cup Coffee Maker</div><div class="p">$29.99</div></div>
<div class="card a4"><div class="badge">SALE</div><div class="cover"></div><div class="t">Digital Air Fryer</div><div class="p">$59.99</div></div>
</div>
</div>
<div class="trust"><span>Free Shipping $35+</span><span>1-Year Warranty</span><span>Easy Returns</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; background: #e85d04; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; background: #ffffff; color: #1a1a1a;
border: 1px solid #1c1c1c; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.08em; background: #f5f4f2; color: #1a1a1a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1c1c1c; color:#ffffff; box-sizing:border-box;
font-family:'Inter', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#1c1c1c; }
.brand { font-size:19px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; color:#fff; }
.btn-primary { background:#e85d04; color:#fff; border:none; border-radius:4px; padding:11px 22px; font-size:14px; font-weight:600; }
.hero { position:relative; padding:26px 36px 20px; }
.hero h1 { font-size:38px; font-weight:700; line-height:1.1; letter-spacing:-0.5px; margin:0 0 10px; max-width:520px; }
.hero p { font-size:14px; color:#aaaaaa; line-height:1.5; margin:0 0 16px; max-width:420px; }
.row { display:flex; gap:10px; }
.btn-outline { background:transparent; color:#fff; border:1.5px solid #fff; border-radius:4px; padding:10px 22px; font-size:14px; font-weight:600; }
.flame { position:absolute; right:40px; top:20px; width:160px; height:200px; }
.flame::before { content:''; position:absolute; bottom:0; left:30px; width:100px; height:70px; border-radius:50%;
background:radial-gradient(circle,#e85d04,#c74e03 70%,transparent 100%); }
.flame::after { content:''; position:absolute; bottom:60px; left:50px; width:60px; height:90px; border-radius:50% 50% 50% 50% / 70% 70% 30% 30%;
background:linear-gradient(0deg,#e85d04,#f4c09e); opacity:0.9; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:14px 36px 20px; }
.card { background:#191919; border:1px solid #2c2c2c; border-radius:4px; padding:14px; }
.card .imgbox { aspect-ratio:4/3; height:70px; background:#111; border-radius:4px; margin-bottom:10px; }
.spec-badge { display:inline-block; background:#2a2a2a; color:#dedede; font-size:10px; font-weight:700;
text-transform:uppercase; letter-spacing:0.4px; padding:4px 8px; border-radius:4px; margin-right:4px; }
.card h3 { font-size:15px; font-weight:600; margin:8px 0 4px; }
.card .price { font-size:15px; font-weight:600; }
footer { border-top:1px solid #333333; background:#1c1c1c; padding:14px 36px; display:flex;
justify-content:space-between; align-items:center; font-size:12px; color:#777777; }
</style></head>
<body>
<nav>
<p class="brand">Bond Manufacturing</p>
<div class="navlinks"><span>Fire Pits</span><span>Patio Heaters</span><span>Parts & Support</span></div>
<button class="btn-primary">Shop Now</button>
</nav>
<section class="hero">
<h1>Steel geometry. Open flame.</h1>
<p>Cast-iron and rolled-steel fire pits built for the outdoor ritual — CSA certified, engineered to last for seasons.</p>
<div class="row">
<button class="btn-primary">Shop Fire Pits</button>
<button class="btn-outline">Find a Retailer</button>
</div>
<div class="flame"></div>
</section>
<section class="grid">
<div class="card"><div class="imgbox"></div><span class="spec-badge">50,000 BTU</span><span class="spec-badge">CSA Certified</span><h3>Aurora Fire Pit</h3><div class="price">$499</div></div>
<div class="card"><div class="imgbox"></div><span class="spec-badge">Auto Ignition</span><h3>Patio Heater Pro</h3><div class="price">$329</div></div>
<div class="card"><div class="imgbox"></div><span class="spec-badge">Propane</span><h3>Ember Grate Set</h3><div class="price">$89</div></div>
</section>
<footer>
<span>© Bond Manufacturing</span>
<span>CSA · UL Certified — Find replacement parts by model number</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #677279; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: 0.25px; background: #ff0000; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: 0.25px; background: #ffffff; color: #1a1a1a;
border: 1px solid #ff0000; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.625; background: #ffffff; color: #303030;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #677279; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ff0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Montserrat','Open Sans',Arial,sans-serif; color:#303030; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#1a1a1a;}
.logo{font-size:18px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.4px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;color:#e1e3e4;text-transform:uppercase;}
.hero{height:232px;display:flex;background:#252525;}
.htext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 36px;}
.htext .k{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#ff0000;margin-bottom:12px;}
.htext h1{font-size:26px;font-weight:700;color:#fff;margin:0 0 10px;line-height:1.22;}
.htext p{font-size:13px;line-height:1.5;color:#d4d6d8;margin:0 0 18px;max-width:280px;}
.btn{width:fit-content;background:#ff0000;color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;padding:11px 22px;border-radius:8px;}
.himg{width:54%;position:relative;background:#2e2e2e;}
.phone{position:absolute;left:130px;top:30px;width:80px;height:150px;border-radius:12px;background:#303030;border:3px solid #444;}
.shield{position:absolute;left:130px;top:30px;width:80px;height:150px;border-radius:12px;background:linear-gradient(160deg,rgba(255,0,0,.25),transparent);}
.seclabel{padding:16px 36px 10px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#677279;}
.grid{display:flex;gap:14px;padding:0 36px;}
.card{width:150px;border:1px solid #e1e3e4;border-radius:12px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#11ae66;color:#fff;font-size:9px;font-weight:700;padding:2px 7px;border-radius:8px;text-transform:uppercase;}
.thumb{height:78px;border-radius:8px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:600;color:#1a1a1a;height:30px;overflow:hidden;line-height:1.3;}
.price{font-size:13px;font-weight:700;color:#ff0000;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Screenshield</div>
<div class="navlinks"><div>Phone</div><div>Tablet</div><div>Laptop</div><div>Cases</div></div>
</div>
<div class="hero">
<div class="htext">
<div class="k">Military-Grade Protection</div>
<h1>Drop it. Scratch it. It doesn't care.</h1>
<p>Tempered glass and impact film engineered to outlast the accident.</p>
<div class="btn">Add to Cart</div>
</div>
<div class="himg"><div class="phone"></div><div class="shield"></div></div>
</div>
<div class="seclabel">Best Selling Protection</div>
<div class="grid">
<div class="card"><span class="badge">In Stock</span><div class="thumb" style="background:linear-gradient(140deg,#ff0000,#1a1a1a)"></div><div class="pname">Tempered Glass Screen Protector</div><div class="price">$19.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#677279,#1a1a1a)"></div><div class="pname">Full-Body Impact Film</div><div class="price">$24.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#303030,#8a8a8a)"></div><div class="pname">Rugged Phone Case</div><div class="price">$34.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#3d8cf4,#1a1a1a)"></div><div class="pname">Laptop Privacy Filter</div><div class="price">$44.99</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #2d293c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #2d293c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.27; margin: 0; color: #2d293c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; margin: 0; color: #808184; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.8px; background: #5b5378; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.8px; background: transparent; color: #2d293c;
border: 1px solid #5b5378; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; background: #ffffff; color: #2d293c;
border: 1px solid #c4c4c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808184; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.18; letter-spacing: 0.6px; background: #0081c6; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f7f7; color:#4c4d4f; font-family:'Museo Sans',-apple-system,sans-serif; }
*{box-sizing:border-box;}
.brandbar{height:34px;background:#2d293c;display:flex;align-items:center;justify-content:center;gap:30px;font-size:11px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;}
.brandbar span{color:#a09bb5;}
.brandbar .active{color:#fff;border-bottom:2px solid #0081c6;padding-bottom:8px;}
.nav{height:56px;background:#2d293c;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-size:13px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;}
.navlinks{display:flex;gap:20px;color:#fff;font-size:13px;font-weight:500;letter-spacing:.4px;text-transform:uppercase;}
.hero{height:230px;background:linear-gradient(90deg,rgba(45,41,60,.9),rgba(45,41,60,.35)),linear-gradient(120deg,#5b5378,#2d293c);display:flex;align-items:center;padding:0 40px;}
.herotext{max-width:420px;color:#fff;}
.herotext h1{font-size:34px;font-weight:200;line-height:1.15;margin:0 0 10px;}
.herotext p{font-size:15px;color:#d7d3e2;margin:0 0 16px;max-width:340px;}
.cta{display:inline-block;background:transparent;border:1px solid #fff;color:#fff;font-size:13px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;padding:12px 26px;border-radius:8px;}
.specrow{display:flex;gap:1px;background:#dedede;margin:16px 32px 0;}
.speccell{flex:1;background:#ececec;text-align:center;padding:10px 4px;}
.speclabel{font-family:'Courier New',monospace;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:#808184;}
.specvalue{font-size:22px;font-weight:200;color:#2d293c;margin-top:2px;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:210px;background:#fff;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.06);}
.thumb{height:110px;border-radius:4px 4px 0 0;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;padding:4px 10px;border-radius:4px;color:#fff;}
.ptitle{font-size:15px;font-weight:500;color:#2d293c;padding:10px 12px 0;}
.pmodel{font-family:'Courier New',monospace;font-size:11px;color:#808184;padding:2px 12px 12px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:46px;background:#2d293c;color:#808184;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="brandbar"><span class="active">Sub-Zero</span><span>Wolf</span><span>Cove</span></div>
<div class="nav">
<div class="logo">Sub Zero</div>
<div class="navlinks"><span>Refrigeration</span><span>Configurator</span><span>Dealers</span><span>Support</span></div>
</div>
<div class="hero">
<div class="herotext"><h1>Materials specified, not decorated.</h1><p>Full-height refrigeration engineered for kitchens built to a showroom standard.</p><div class="cta">Find a Dealer</div></div>
</div>
<div class="specrow">
<div class="speccell"><div class="speclabel">Capacity</div><div class="specvalue">24.3 cu ft</div></div>
<div class="speccell"><div class="speclabel">Width</div><div class="specvalue">36 in</div></div>
<div class="speccell"><div class="speclabel">Noise</div><div class="specvalue">42 dB</div></div>
<div class="speccell"><div class="speclabel">Warranty</div><div class="specvalue">12 yr seal</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0081c6,#2d293c)"><span class="badge" style="background:#0081c6">Sub-Zero</span></div><div class="ptitle">Classic Series 36in</div><div class="pmodel">BI-36U/S/PH</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#af272e,#2d293c)"><span class="badge" style="background:#af272e">Wolf</span></div><div class="ptitle">Dual Fuel Range 48in</div><div class="pmodel">DF48450</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00393b,#2d293c)"><span class="badge" style="background:#00393b">Cove</span></div><div class="ptitle">Dishwasher Panel-Ready</div><div class="pmodel">DW2450</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c4d600,#2d293c)"><span class="badge" style="background:#5b5378">Energy</span></div><div class="ptitle">Efficiency Compressor</div><div class="pmodel">Certified</div></div>
</div>
<div class="footer"><span>© Sub-Zero Wolf Cove</span><span>Dealer Locator Compare Models</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f4; color: #111100;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f4; color: #111100;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #111100; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #88888d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #006341; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #ffffff; color: #006341;
border: 1px solid #006341; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111100;
border: 1px solid #bbbbb7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #88888d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ce3525; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'proxima-nova','Helvetica Neue',Arial,sans-serif; background:#f4f4f4; color:#5c677a; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:58px;background:#ffffff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e2e2e2;}
.logo{font-size:20px;font-weight:700;color:#006341;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;color:#111100;}
.hero{height:200px;display:flex;align-items:center;padding:0 34px;background:linear-gradient(120deg,#006341,#267e47);}
.heroText{width:52%;}
.h1{font-size:28px;font-weight:700;color:#fff;line-height:1.25;margin:0 0 10px;}
.sub{font-size:14px;color:#d7ece3;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#fff;color:#006341;font-size:15px;font-weight:600;padding:11px 24px;border-radius:4px;width:fit-content;}
.heroImg{width:48%;height:130px;position:relative;}
.port{position:absolute;width:110px;height:26px;background:#262626;border-radius:4px;}
.p1{top:14px;left:20px;}
.p2{top:50px;left:60px;}
.p3{top:86px;left:10px;}
.sec{padding:16px 32px 0;}
.secTitle{font-size:17px;font-weight:600;color:#111100;margin-bottom:12px;}
.grid{display:flex;gap:16px;}
.card{width:198px;background:#ffffff;border:1px solid #e2e2e2;border-radius:4px;padding:12px;position:relative;}
.badge{position:absolute;top:10px;left:10px;font-size:9px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;color:#fff;padding:3px 7px;border-radius:2px;background:#006341;}
.thumb{height:90px;border-radius:3px;margin-bottom:10px;}
.ptitle{font-size:13px;font-weight:600;color:#111100;line-height:1.3;height:34px;overflow:hidden;}
.pspec{font-size:11px;color:#88888d;margin-top:2px;}
.pprice{font-size:15px;font-weight:700;color:#111100;margin-top:6px;}
.stars{color:#f9b434;font-size:11px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Plugable</div>
<div class="navlinks"><span>Docking Stations</span><span>USB Hubs</span><span>Chargers</span><span>Support</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Certified. Tested. Works with everything.</div>
<div class="sub">Docking stations and USB accessories engineered for reliability, not just specs on a box.</div>
<div class="cta">Shop Docking Stations</div>
</div>
<div class="heroImg"><div class="port p1"></div><div class="port p2"></div><div class="port p3"></div></div>
</div>
<div class="sec">
<div class="secTitle">Top-Rated Accessories</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#006341,#5c677a);"></div><div class="ptitle">14-in-1 USB-C Docking Station</div><div class="pspec">100W PD · Dual 4K</div><div class="pprice">$149.95</div><div class="stars">★★★★★</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#267e47,#5c677a);"></div><div class="ptitle">7-Port USB 3.0 Hub with Charging</div><div class="pspec">5Gbps · BC 1.2</div><div class="pprice">$34.95</div><div class="stars">★★★★★</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#5c677a,#006341);"></div><div class="ptitle">65W GaN Wall Charger, 3-Port</div><div class="pspec">USB-C PD + USB-A</div><div class="pprice">$39.95</div><div class="stars">★★★★☆</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#006341,#ce3525);"></div><div class="ptitle">Dual HDMI Universal Docking Station</div><div class="pspec">USB-A/C · Gigabit</div><div class="pprice">$119.95</div><div class="stars">★★★★★</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #d00000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #d00000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e48787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1f1f2c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d00000; color: #1f1f2c;
border: 1px solid #1f1f2c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #d00000; color: #f5f5f5;
border: 1px solid #d62727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e48787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #b40507; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #e6e6e6; background:#ffffff; }
.brand { font-size:20px; font-weight:700; margin:0; color:#1f1f2c; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; font-size:14px; font-weight:500; color:#222222; }
.navlinks span:nth-child(1){ color:#d00000; font-weight:700; }
.navicons { display:flex; gap:16px; align-items:center; font-size:12px; color:#888888; }
.cartdot { position:relative; }
.cartdot::after{ content:'2'; position:absolute; top:-8px; right:-10px; background:#d00000; color:#fff;
font-size:10px; font-weight:700; border-radius:9999px; width:14px; height:14px; display:flex;
align-items:center; justify-content:center; }
main { display:flex; gap:36px; padding:22px 40px 0; height:534px; }
.gallery { width:380px; flex:0 0 auto; }
.shot { width:380px; height:380px; background:
linear-gradient(135deg,#1f1f2c 0%,#3a3a52 45%,#8c1e46 100%); position:relative; overflow:hidden; }
.shot::before{ content:''; position:absolute; inset:0; background:rgba(0,0,0,.03); }
.shot .ring{ position:absolute; left:50%; top:50%; width:190px; height:190px; margin:-95px 0 0 -95px;
border:2px solid rgba(255,255,255,.35); border-radius:50%; }
.shot .ring2{ position:absolute; left:50%; top:50%; width:120px; height:120px; margin:-60px 0 0 -60px;
border:2px solid rgba(255,255,255,.55); border-radius:50%; }
.shot .lbl { position:absolute; left:16px; bottom:14px; color:#fff; font-size:11px; font-weight:700;
letter-spacing:.05em; text-transform:uppercase; opacity:.85; }
.thumbrow { display:flex; gap:8px; margin-top:8px; }
.thumb { width:88px; height:88px; background:#f5f5f5; border:1px solid #f0f0f0; }
.thumb.active { border:1px solid #222222; }
.detail { flex:1; display:flex; flex-direction:column; gap:12px; padding-top:2px; }
.eyebrow { font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#888888; }
.title { font-size:24px; font-weight:700; line-height:1.33; margin:0; color:#222222; max-width:420px; }
.priceRow { display:flex; align-items:baseline; gap:10px; }
.oldPrice { font-size:14px; color:#888888; text-decoration:line-through; }
.newPrice { font-size:28px; font-weight:700; color:#d00000; }
.pct { font-size:14px; font-weight:700; color:#d00000; }
.infoTag { display:inline-flex; align-items:center; gap:6px; border:1px solid #3083e4; color:#3083e4;
border-radius:2px; height:24px; padding:0 10px; font-size:12px; width:fit-content; }
.outletBadge { display:inline-flex; align-items:center; background:#8c1e46; color:#ffffff; border-radius:2px;
height:22px; padding:0 8px; font-size:11px; font-weight:700; width:fit-content; margin-left:8px; }
.sectionLabel { font-size:12px; font-weight:700; color:#888888; text-transform:uppercase; letter-spacing:.04em; margin-top:4px; }
.chips { display:flex; gap:8px; }
.chip { border:1px solid #cccccc; border-radius:17px; height:34px; padding:0 16px; display:flex; align-items:center;
font-size:13px; font-weight:700; color:#222222; }
.chip.active { border:1px solid #d00000; color:#d00000; }
.tabs { display:flex; gap:24px; border-bottom:1px solid #f0f0f0; margin-top:6px; }
.tab { padding-bottom:8px; font-size:16px; font-weight:500; color:#aaaaaa; }
.tab.active { font-weight:700; color:#222222; border-bottom:2px solid #222222; }
.tabBody { font-size:13px; color:#555555; line-height:1.5; max-width:420px; }
.ctaRow { display:flex; gap:10px; margin-top:auto; }
.btnPrimary { background:#333333; color:#ffffff; border:none; border-radius:4px; height:48px; padding:0 20px;
font-size:15px; font-weight:600; flex:1; display:flex; align-items:center; justify-content:center; }
.btnConfirm { background:#d00000; color:#ffffff; border:1px solid #d00000; border-radius:4px; height:48px;
padding:0 20px; font-size:16px; font-weight:500; flex:1; display:flex; align-items:center; justify-content:center; }
footer { height:30px; border-top:1px solid #e6e6e6; padding:0 40px; display:flex; align-items:center;
justify-content:space-between; font-size:11px; color:#888888; background:#fafafa; }
</style></head>
<body>
<nav>
<p class="brand">MUSTIT</p>
<div class="navlinks"><span>New In</span><span>Women</span><span>Men</span><span>Outlet</span></div>
<div class="navicons"><span>Search</span><span class="cartdot">Bag</span></div>
</nav>
<main>
<div class="gallery">
<div class="shot">
<div class="ring"></div>
<div class="ring2"></div>
<div class="lbl">Authenticated Item Photo</div>
</div>
<div class="thumbrow">
<div class="thumb active"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
<div class="detail">
<span class="eyebrow">Designer Leather Goods</span>
<h1 class="title">Structured Top-Handle Bag, Midnight Calfskin</h1>
<div class="priceRow">
<span class="oldPrice">$2,480</span>
<span class="newPrice">$1,690</span>
<span class="pct">-32%</span>
</div>
<div>
<span class="infoTag">100% Authenticity Guaranteed</span>
<span class="outletBadge">OUTLET</span>
</div>
<span class="sectionLabel">Size</span>
<div class="chips">
<div class="chip active">Small</div>
<div class="chip">Medium</div>
<div class="chip">Large</div>
</div>
<div class="tabs">
<div class="tab active">Details</div>
<div class="tab">Shipping</div>
<div class="tab">Seller</div>
</div>
<p class="tabBody">Grained calfskin exterior, brushed gold hardware, suede-lined interior with card slots. Verified by our in-house authentication team before dispatch.</p>
<div class="ctaRow">
<button class="btnPrimary">Add to Bag</button>
<button class="btnConfirm">Buy Now</button>
</div>
</div>
</main>
<footer>
<span>© MUSTIT</span>
<span>1,300+ Luxury Brands · Verified Sellers · Smart Luxury</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.22; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #8a8a8a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: 0.12em; background: #fe3981; color: #ffffff;
border: none; border-radius: 0px; padding: 13px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: 0.12em; background: #ffffff; color: #121212;
border: 1px solid #fe3981; border-radius: 0px;
padding: 12px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #121212;
border: 1px solid #e6e6e6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.10em; background: #e32c2b; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'MinSansBook', Arial, sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:60px;background:#ffffff;border-bottom:1px solid #e6e6e6;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'ChromaticGeometricLight',Georgia,serif;font-size:22px;font-weight:300;letter-spacing:0.5px;}
.navlinks{display:flex;gap:22px;font-family:'Jost',Arial,sans-serif;font-size:12px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:#3d3d3d;}
.searchpill{width:150px;height:34px;border-radius:9999px;border:1px solid #e6e6e6;display:flex;align-items:center;padding:0 14px;font-size:11px;color:#8a8a8a;}
.hero{height:220px;display:flex;align-items:center;padding:0 32px;background:#ffffff;}
.heroText{width:420px;}
.h1{font-family:'ChromaticGeometricLight',Georgia,serif;font-size:34px;font-weight:300;line-height:1.15;margin:0 0 14px;}
.sub{font-size:13px;color:#3d3d3d;margin:0 0 18px;max-width:320px;}
.btn{display:inline-flex;align-items:center;height:42px;padding:0 26px;background:#fe3981;color:#fff;font-size:12px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.ringwrap{width:400px;height:220px;position:relative;}
.ring{position:absolute;left:170px;top:60px;width:100px;height:100px;border-radius:9999px;background:radial-gradient(circle at 40% 35%, #ffffff, #e6e6e6 55%, #dedede 100%);border:6px solid #dedede;}
.stone{position:absolute;left:200px;top:44px;width:40px;height:40px;background:conic-gradient(from 0deg,#ffffff,#dedede,#ffffff,#fe3981,#ffffff);border-radius:4px;transform:rotate(45deg);}
.sec{padding:18px 32px;}
.sectitle{font-family:'Jost',Arial,sans-serif;font-size:14px;font-weight:500;letter-spacing:0.8px;text-transform:uppercase;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:216px;background:#fff;border:1px solid #e6e6e6;overflow:hidden;}
.thumb{height:88px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#e32c2b;color:#fff;font-size:10px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;padding:2px 8px;}
.pbody{padding:10px 12px 12px;}
.ptitle{font-size:13px;font-weight:400;margin-bottom:4px;}
.pprice{font-size:14px;font-weight:500;}
</style>
<div class="nav">
<div class="logo">Stephanie Gottlieb</div>
<div class="navlinks"><span>Rings</span><span>Necklaces</span><span>Custom</span><span>Bridal</span></div>
<div class="searchpill">Search...</div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Fine jewelry, made<br>to be worn boldly.</div>
<div class="sub">Round-brilliant diamonds and custom commissions, set against a bold rose signal.</div>
<div class="btn">Shop Rings</div>
</div>
<div class="ringwrap"><div class="ring"></div><div class="stone"></div></div>
</div>
<div class="sec">
<div class="sectitle">New Arrivals</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#f5f5f5"><div class="badge">Low Stock</div></div><div class="pbody"><div class="ptitle">Solitaire Halo Ring</div><div class="pprice">$4,200</div></div></div>
<div class="card"><div class="thumb" style="background:#e6e6e6"></div><div class="pbody"><div class="ptitle">Tennis Bracelet, 3ct</div><div class="pprice">$6,800</div></div></div>
<div class="card"><div class="thumb" style="background:#dedede"></div><div class="pbody"><div class="ptitle">Custom Engraved Band</div><div class="pprice">$1,950</div></div></div>
<div class="card"><div class="thumb" style="background:#3d3d3d"></div><div class="pbody"><div class="ptitle">Diamond Huggie Earrings</div><div class="pprice">$1,200</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0f0f0f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0f0f0f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; color: #0f0f0f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #4d5bcd; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #4d5bcd;
border: 1px solid #4d5bcd; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #262428;
border: 1px solid #c3c3c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ec523e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;color:#262428;font-family:'TT Norms Pro','Montserrat',sans-serif;}
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #dedede;}
.logo{font-weight:700;font-size:20px;color:#0f0f0f;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;color:#262428;}
.hero{display:flex;padding:24px 30px;gap:30px;align-items:center;}
.hero-txt{width:380px;}
.hero-txt h1{font-size:30px;font-weight:700;color:#0f0f0f;margin:0 0 10px;line-height:1.2;}
.hero-txt .quote{font-family:GalaxieCopernicus,Georgia,serif;font-style:italic;font-size:14px;color:#4d5bcd;margin:0 0 14px;line-height:1.5;}
.cta{background:#4d5bcd;color:#fff;padding:11px 24px;border-radius:8px;font-weight:700;font-size:13px;display:inline-block;}
.scene{flex:1;height:200px;border-radius:8px;position:relative;background:#121212;overflow:hidden;}
.scene::before{content:'';position:absolute;inset:0;background:rgba(18,18,18,.4);}
.bottle{position:absolute;bottom:20px;left:80px;width:50px;height:110px;background:#f1efeb;border-radius:8px 8px 4px 4px;z-index:2;}
.bottle::after{content:'';position:absolute;top:14px;left:6px;right:6px;height:26px;background:#4d5bcd;border-radius:2px;}
.badge-sale{position:absolute;top:14px;right:16px;background:#ec523e;color:#fff;font-size:9px;font-weight:800;padding:5px 10px;border-radius:4px;z-index:2;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:14px 30px;}
.card{background:#f1efeb;border-radius:8px;padding:10px;}
.box{height:84px;border-radius:6px;margin-bottom:8px;}
.b1{background:linear-gradient(160deg,#4d5bcd,#3a47b0);}
.b2{background:linear-gradient(160deg,#ec523e,#c93a29);}
.b3{background:linear-gradient(160deg,#0f0f0f,#262428);}
.b4{background:linear-gradient(160deg,#dedede,#c3c3c3);}
.name{font-size:12px;font-weight:600;color:#0f0f0f;margin:0 0 3px;}
.spec{font-size:10px;color:#757575;margin:0 0 5px;}
.price{font-size:13px;font-weight:700;color:#4d5bcd;}
</style>
<div class="nav">
<div class="logo">Genexa</div>
<div class="navlinks"><span>Pain & Fever</span><span>Cough & Cold</span><span>Kids</span><span>Ingredients</span></div>
</div>
<div class="hero">
<div class="hero-txt">
<h1>Real medicine. Clean ingredients.</h1>
<p class="quote">"We asked why medicine had to smell like a hospital. Then we built one that doesn't."</p>
<a class="cta">Shop Clean Medicine</a>
</div>
<div class="scene"><div class="badge-sale">Save 15%</div><div class="bottle"></div></div>
</div>
<div class="grid">
<div class="card"><div class="box b1"></div><div class="name">Kids' Pain Reliever</div><div class="spec">No Artificial Dyes</div><div class="price">$9.99</div></div>
<div class="card"><div class="box b2"></div><div class="name">Multi-Symptom Cold Relief</div><div class="spec">Clean Label · 24 Caplets</div><div class="price">$12.99</div></div>
<div class="card"><div class="box b3"></div><div class="name">Allergy Relief, Non-Drowsy</div><div class="spec">Sugar-Free</div><div class="price">$11.49</div></div>
<div class="card"><div class="box b4"></div><div class="name">Fever Reducer, Adult</div><div class="spec">Acetaminophen 500mg</div><div class="price">$8.99</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8e8e8e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #1174dc; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #1174dc;
border: 1px solid #1174dc; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e8e8e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #1ab759; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 30px;
border-bottom:1px solid #f2f2f2; }
.brand { font-family:Georgia, serif; font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; color:#4a4a4a; }
.cart { background:#1174dc; color:#fff; font-size:12px; font-weight:600; border-radius:6px; padding:8px 14px; }
main { display:flex; height:582px; }
.stage { width:330px; background:#eff5f8; display:flex; align-items:center; justify-content:center; }
.chair { width:130px; height:200px; position:relative; }
.back { width:100px; height:120px; background:linear-gradient(160deg,#78b5f5,#1174dc); border-radius:16px 16px 6px 6px; margin:0 auto; }
.seat { width:120px; height:16px; background:#111; border-radius:4px; margin:6px auto 0; }
.leg3 { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:6px; height:60px; background:#4a4a4a; }
.info { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:11px; }
.status-row { display:flex; gap:8px; }
.badge { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; border-radius:4px; padding:3px 9px; color:#fff; }
.b-stock { background:#1ab759; } .b-warn { background:#ff9900; }
h1 { font-family:Georgia, serif; font-size:24px; font-weight:700; margin:0; }
.sub { font-size:13px; color:#555555; margin:0; max-width:440px; line-height:1.55; }
.spectable { font-family:'Consolas','Courier New',monospace; font-size:11px; color:#222; background:#f5f5f5;
border-radius:6px; padding:10px 12px; line-height:1.7; margin-top:4px; }
.spectable b { color:#1174dc; }
.filters { display:flex; gap:8px; margin-top:2px; }
.chip { border:1px solid #d3d3d3; border-radius:999px; padding:6px 14px; font-size:12px; }
.chip.on { background:#1174dc; color:#fff; border-color:#1174dc; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:4px; }
.price { font-family:Georgia, serif; font-size:25px; font-weight:700; }
.actions { display:flex; gap:10px; }
.btn-primary { background:#1174dc; color:#fff; border-radius:8px; height:46px; padding:0 26px; display:flex;
align-items:center; font-weight:600; font-size:13px; }
.btn-secondary { background:#fafafa; border:1px solid #d3d3d3; color:#111; border-radius:8px; height:46px;
padding:0 20px; display:flex; align-items:center; font-size:13px; font-weight:500; }
</style></head>
<body>
<nav>
<p class="brand">Autonomous AI Chairs</p>
<div class="navlinks"><span>Chairs</span><span>Desks</span><span>Bundles</span><span>Warranty</span></div>
<span class="cart">Cart · 0</span>
</nav>
<main>
<div class="stage">
<div class="chair"><div class="back"></div><div class="seat"></div><div class="leg3"></div></div>
</div>
<div class="info">
<div class="status-row"><span class="badge b-stock">In Stock</span><span class="badge b-warn">Deal — 6h left</span></div>
<h1>ErgoChair Ultra — Mesh Task Chair</h1>
<p class="sub">Full lumbar articulation and adjustable armrests built for people who treat their home office as infrastructure.</p>
<div class="spectable">Weight Capacity: <b>150 kg</b><br>Lumbar Range: <b>±40 mm</b><br>Seat Depth: <b>460–510 mm</b></div>
<div class="filters"><div class="chip on">Black Mesh</div><div class="chip">Grey Mesh</div><div class="chip">Blue Mesh</div></div>
<div class="price-row"><span class="price">$429</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Compare Chairs</div>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a2e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a2e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #1a1a2e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b82; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; background: #603cba; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; background: #ffffff; color: #603cba;
border: 1px solid #603cba; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #2d2d44;
border: 1px solid #c6c6cb; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b82; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #5bbad5; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#2d2d44; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
background:#1a1a2e; clip-path:polygon(0 0,100% 0,100% 100%,0 100%); }
.brand { font-size:19px; font-weight:700; color:#ffffff; letter-spacing:0.5px; }
.brand b { color:#5bbad5; }
.nlinks { display:flex; gap:24px; }
.nlinks span { font-size:12px; font-weight:700; color:#c8c8dd; text-transform:uppercase; letter-spacing:0.4px; }
.nlinks span.on { color:#5bbad5; }
.navcta { background:#603cba; color:#fff; font-size:12px; font-weight:700; text-transform:uppercase;
padding:9px 18px; clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%); }
.configstrip { background:#603cba; height:34px; display:flex; align-items:center; gap:22px; padding:0 28px; }
.configstrip span { color:#e9dfff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.configstrip span.hot { color:#5bbad5; }
.hero { height:210px; background:linear-gradient(120deg,#1a1a2e 0%,#2d1f5e 55%,#4e2f9e 100%); position:relative;
display:flex; align-items:center; padding:0 40px; overflow:hidden; }
.hero::after { content:''; position:absolute; right:-40px; top:-60px; width:340px; height:340px;
background:linear-gradient(135deg,#5bbad5 0%,transparent 70%); opacity:0.28; transform:rotate(18deg); clip-path:polygon(20% 0,100% 0,80% 100%,0 100%); }
.herotxt { position:relative; z-index:2; }
.herotxt .k { color:#5bbad5; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; }
.herotxt h1 { color:#fff; font-size:34px; font-weight:700; margin:6px 0; letter-spacing:-0.3px; }
.herotxt p { color:#c8c8dd; font-size:13px; margin:0 0 14px; max-width:420px; }
.herobtn { display:inline-block; background:#5bbad5; color:#1a1a2e; font-size:12px; font-weight:700;
text-transform:uppercase; padding:11px 22px; clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%); }
.section { padding:18px 28px 0; }
.sechead { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.sechead h2 { font-size:16px; font-weight:700; color:#1a1a2e; text-transform:uppercase; letter-spacing:0.4px; margin:0; }
.sechead span { font-size:11px; font-weight:700; color:#603cba; text-transform:uppercase; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { background:#fafafe; border:1px solid #d0d0e0; border-radius:8px; padding:10px; position:relative; }
.badge { position:absolute; top:8px; left:8px; font-size:9px; font-weight:700; text-transform:uppercase;
padding:2px 7px; border-radius:3px; color:#fff; z-index:2; }
.badge.new { background:#5bbad5; }
.badge.sale { background:#e74c3c; }
.shot { height:88px; border-radius:6px; margin-bottom:8px; position:relative; overflow:hidden; }
.c1 .shot { background:linear-gradient(160deg,#1a1a2e,#603cba 70%); }
.c2 .shot { background:linear-gradient(160deg,#1a1a2e,#4e2f9e 60%,#5bbad5); }
.c3 .shot { background:linear-gradient(160deg,#2d2d44,#603cba); }
.c4 .shot { background:linear-gradient(160deg,#1a1a2e,#5bbad5 90%); }
.shot::after { content:''; position:absolute; right:8px; bottom:8px; width:26px; height:26px; border-radius:50%;
background:radial-gradient(circle at 35% 35%, #ffffff55, transparent 60%); }
.ctitle { font-size:12px; font-weight:700; color:#1a1a2e; margin-bottom:3px; }
.cspec { font-size:10px; color:#6b6b82; margin-bottom:6px; }
.cprice-row { display:flex; align-items:center; justify-content:space-between; }
.cprice { font-size:14px; font-weight:700; color:#1a1a2e; }
.cstar { font-size:10px; color:#f1c40f; }
.cbtn { margin-top:8px; text-align:center; background:#603cba; color:#fff; font-size:10px; font-weight:700;
text-transform:uppercase; padding:7px 0; border-radius:4px; }
</style></head>
<body>
<nav>
<div class="brand">CYBER<b>POWER</b>Cyberpowerpc</div>
<div class="nlinks"><span class="on">Gaming PCs</span><span>Laptops</span><span>Components</span><span>Deals</span></div>
<div class="navcta">Build Now</div>
</nav>
<div class="configstrip">
<span class="hot">⚡ Configurator Live</span><span>Free Shipping Over $999</span><span>0% APR Financing</span>
</div>
<div class="hero">
<div class="herotxt">
<div class="k">Hard Angles / High FPS</div>
<h1>Engineered For The Frag</h1>
<p>Custom gaming desktops built to spec, tested on the bench, shipped ready to overclock.</p>
<div class="herobtn">Configure Your Rig</div>
</div>
</div>
<div class="section">
<div class="sechead"><h2>Trending Builds</h2><span>View All Systems</span></div>
<div class="grid">
<div class="card c1"><span class="badge new">New</span><div class="shot"></div>
<div class="ctitle">Gamer Xtreme VR</div><div class="cspec">RTX 5070 · Ryzen 7 · 32GB</div>
<div class="cprice-row"><span class="cprice">$1,899</span><span class="cstar">★★★★★</span></div>
<div class="cbtn">Configure</div></div>
<div class="card c2"><span class="badge sale">Sale</span><div class="shot"></div>
<div class="ctitle">Infinity X99</div><div class="cspec">RTX 5080 · i7 · 64GB</div>
<div class="cprice-row"><span class="cprice">$2,749</span><span class="cstar">★★★★★</span></div>
<div class="cbtn">Configure</div></div>
<div class="card c3"><div class="shot"></div>
<div class="ctitle">Titan Mini ITX</div><div class="cspec">RTX 5060 · Ryzen 5 · 16GB</div>
<div class="cprice-row"><span class="cprice">$1,299</span><span class="cstar">★★★★☆</span></div>
<div class="cbtn">Configure</div></div>
<div class="card c4"><span class="badge new">New</span><div class="shot"></div>
<div class="ctitle">Hyper Liquid Z1</div><div class="cspec">RTX 5090 · i9 · 64GB</div>
<div class="cprice-row"><span class="cprice">$3,999</span><span class="cstar">★★★★★</span></div>
<div class="cbtn">Configure</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #002873; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #002873;
border: 1px solid #002873; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f26522; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Rubik',-apple-system,system-ui,'Helvetica Neue',sans-serif; color:#121212; }
*{box-sizing:border-box;}
.announce{height:32px;background:#f26522;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
.nav{height:64px;background:#002873;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-size:20px;font-weight:700;}
.navlinks{display:flex;gap:24px;color:#fff;font-size:14px;font-weight:500;}
.hero{height:250px;background:#002873;display:flex;align-items:center;padding:0 32px;position:relative;overflow:hidden;}
.hero h1{color:#fff;font-size:38px;font-weight:700;line-height:1.1;max-width:400px;}
.hero span{display:block;background:#f26522;color:#fff;font-size:14px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;padding:14px 32px;border-radius:4px;width:fit-content;margin-top:18px;}
.hero .prod{position:absolute;right:70px;top:60px;width:170px;height:130px;background:linear-gradient(160deg,#fff,#cfd8e6);border-radius:12px;}
.grid{display:flex;gap:16px;padding:20px 32px 0;}
.card{width:210px;background:#fff;border:1px solid #eeeeee;border-radius:8px;padding:14px;}
.thumb{height:100px;background:#f5f5f5;border-radius:8px;margin-bottom:10px;}
.pname{font-size:16px;font-weight:600;}
.pricerow{display:flex;align-items:baseline;gap:8px;margin-top:6px;}
.pprice{font-size:22px;font-weight:700;}
.pold{font-size:14px;color:#6b6b6b;text-decoration:line-through;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#002873;color:#fff;display:flex;align-items:center;justify-content:center;gap:30px;font-size:13px;opacity:.9;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">Free Shipping on Orders Over $50</div>
<div class="nav">
<div class="logo">Powerxl</div>
<div class="navlinks"><div>Air Fryers</div><div>Multi-Cookers</div><div>Grills</div></div>
</div>
<div class="hero"><h1>Countertop power, dialed in.<span>Shop Best Sellers</span></h1><div class="prod"></div></div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="pname">7-QT Air Fryer</div><div class="pricerow"><span class="pprice">$79.99</span><span class="pold">$99.99</span></div></div>
<div class="card"><div class="thumb"></div><div class="pname">Smokeless Grill</div><div class="pricerow"><span class="pprice">$64.99</span></div></div>
<div class="card"><div class="thumb"></div><div class="pname">Multi-Cooker 10-in-1</div><div class="pricerow"><span class="pprice">$89.99</span></div></div>
</div>
<div class="footer"><span>Warranty</span><span>Recipes</span><span>Support</span><span>Register Product</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; background: #4d65ff; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; background: #ffffff; color: #111111;
border: 1px solid #4d65ff; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #e0e0e0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.06em; background: #4d65ff; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#333333; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:20px;font-weight:700;color:#111111;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#333333;}
.hero{height:190px;background:#4d65ff;display:flex;align-items:center;padding:0 40px;}
.heroText{width:50%;}
.h1{font-size:32px;font-weight:700;color:#fff;line-height:1.15;margin:0 0 12px;letter-spacing:-0.3px;}
.sub{font-size:14px;color:#e6eaff;margin:0 0 16px;max-width:300px;}
.cta{display:inline-block;background:#fff;color:#4d65ff;font-size:14px;font-weight:600;padding:11px 26px;border-radius:9999px;width:fit-content;}
.heroImg{width:50%;height:130px;position:relative;}
.circ{position:absolute;border-radius:50%;}
.c1{width:60px;height:60px;background:#084935;top:20px;left:30px;}
.c2{width:40px;height:40px;background:#fff;opacity:0.85;top:60px;left:100px;}
.c3{width:36px;height:36px;background:#084935;opacity:0.7;top:10px;left:160px;}
.strip{background:#084935;height:38px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:500;letter-spacing:0.4px;text-transform:uppercase;}
.sec{padding:16px 34px 0;}
.secTitle{font-size:16px;font-weight:600;color:#111111;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;}
.thumb{height:110px;border-radius:6px;margin-bottom:8px;}
.swrow{display:flex;gap:6px;margin-bottom:6px;}
.sw{width:14px;height:14px;border-radius:50%;border:1px solid #e0e0e0;}
.ptitle{font-size:13px;font-weight:500;color:#111111;line-height:1.3;height:34px;overflow:hidden;}
.pprice{font-size:14px;font-weight:500;color:#333333;margin-top:4px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Poketo</div>
<div class="navlinks"><span>Notebooks</span><span>Bags</span><span>Home</span><span>Gifts</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Color is the whole point.</div>
<div class="sub">Everyday paper goods and totes designed to make ordinary days a little brighter.</div>
<div class="cta">Shop the Collection</div>
</div>
<div class="heroImg"><div class="circ c1"></div><div class="circ c2"></div><div class="circ c3"></div></div>
</div>
<div class="strip">Free shipping over $50</div>
<div class="sec">
<div class="secTitle">New This Week</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4d65ff,#084935);"></div><div class="swrow"><div class="sw" style="background:#4d65ff;"></div><div class="sw" style="background:#084935;"></div><div class="sw" style="background:#ffcc66;"></div></div><div class="ptitle">Dot Grid Notebook, A5</div><div class="pprice">$14.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#084935,#4d65ff);"></div><div class="swrow"><div class="sw" style="background:#084935;"></div><div class="sw" style="background:#4d65ff;"></div></div><div class="ptitle">Canvas Tote, Two-Tone</div><div class="pprice">$28.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffcc66,#084935);"></div><div class="swrow"><div class="sw" style="background:#ffcc66;"></div><div class="sw" style="background:#4d65ff;"></div></div><div class="ptitle">Desk Calendar, Weekly Layout</div><div class="pprice">$22.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4d65ff,#ffcc66);"></div><div class="swrow"><div class="sw" style="background:#4d65ff;"></div><div class="sw" style="background:#084935;"></div></div><div class="ptitle">Ceramic Mug, Set of Two</div><div class="pprice">$32.00</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f7f6; color: #2b2b2b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f7f6; color: #2b2b2b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #2b2b2b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #e10600; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f9f7f6; color: #2b2b2b;
border: 1px solid #e10600; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #f9f7f6; color: #2b2b2b;
border: 1px solid #c6c4c3; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ff7012; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f7f6; font-family:sans-serif,-apple-system,'Segoe UI','Helvetica Neue',sans-serif; color:#2b2b2b; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#f9f7f6;}
.logo{font-size:19px;font-weight:700;color:#e10600;}
.navlinks{display:flex;gap:20px;font-size:15px;font-weight:500;color:#2b2b2b;}
.searchbar{width:220px;height:36px;border-radius:9999px;border:1px solid #e3e3e3;background:#fff;display:flex;align-items:center;padding:0 14px;font-size:12px;color:#6a6a6a;}
.hero{height:220px;background:#f9f7f6;display:flex;align-items:center;padding:0 44px;}
.herotext{width:52%;}
.herotext h1{font-family:monospace,'SF Mono','Consolas',sans-serif;font-size:30px;font-weight:700;color:#2b2b2b;margin:0 0 12px;letter-spacing:-0.4px;}
.herotext p{font-size:15px;color:#6a6a6a;margin:0 0 18px;max-width:320px;}
.cta{display:inline-block;background:#e10600;color:#fff;font-size:16px;font-weight:600;padding:12px 24px;border-radius:8px;}
.heroimg{width:40%;height:150px;border-radius:8px;background:linear-gradient(135deg,#2b2b2b,#e10600);}
.pillrow{display:flex;gap:10px;padding:14px 44px 0;}
.pill{background:#f9f7f6;border:1px solid #e3e3e3;color:#6a6a6a;font-size:13px;font-weight:500;padding:6px 16px;border-radius:9999px;}
.pill.active{background:#e10600;color:#fff;border-color:#e10600;}
.section{padding:16px 44px 0;}
.seclabel{font-size:18px;font-weight:600;color:#2b2b2b;margin-bottom:10px;}
.grid{display:flex;gap:14px;}
.card{width:190px;background:#fffcf9;border:1px solid #efefef;border-radius:8px;overflow:hidden;position:relative;}
.accentbar{height:4px;background:#e10600;}
.cardbody{padding:10px 12px 12px;}
.thumb{height:88px;background:#f5f3ef;}
.badge{position:absolute;top:12px;left:8px;background:#ff7012;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:2px 7px;border-radius:4px;}
.spec{font-family:monospace,'SF Mono',sans-serif;font-size:11px;color:#6a6a6a;margin-top:4px;}
.ptitle{font-size:14px;font-weight:600;color:#2b2b2b;margin-top:6px;}
.pprice{font-size:16px;font-weight:600;color:#2b2b2b;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Sandisk</div>
<div class="navlinks"><div>Memory Cards</div><div>SSDs</div><div>Flash Drives</div></div>
<div class="searchbar">Search products...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>STORAGE THAT KEEPS UP.</h1>
<p>Speed you can measure, reliability you can trust — since 1988.</p>
<div class="cta">Shop Storage</div>
</div>
<div class="heroimg"></div>
</div>
<div class="pillrow">
<div class="pill active">Extreme Pro</div>
<div class="pill">Portable SSD</div>
<div class="pill">iXpand</div>
</div>
<div class="section">
<div class="seclabel">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge">5-Yr Warranty</span><div class="accentbar"></div><div class="thumb" style="background:linear-gradient(135deg,#e10600,#2b2b2b)"></div><div class="cardbody"><div class="ptitle">Extreme Pro 1TB SSD</div><div class="spec">R:2000MB/s W:2000MB/s</div><div class="pprice">$129.99</div></div></div>
<div class="card"><div class="accentbar"></div><div class="thumb" style="background:linear-gradient(135deg,#2b2b2b,#e10600)"></div><div class="cardbody"><div class="ptitle">Extreme microSD 256GB</div><div class="spec">R:190MB/s W:130MB/s</div><div class="pprice">$39.99</div></div></div>
<div class="card"><div class="accentbar"></div><div class="thumb" style="background:linear-gradient(135deg,#824dd8,#2b2b2b)"></div><div class="cardbody"><div class="ptitle">iXpand Flash Drive 128GB</div><div class="spec">Lightning + USB-C</div><div class="pprice">$34.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #dedede;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #dedede;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #dedede; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #999999; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #874cd3; color: #ffffff;
border: none; border-radius: 10px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #222222; color: #dedede;
border: 1px solid #874cd3; border-radius: 10px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #222222; color: #dedede;
border: 1px solid #454545; border-radius: 10px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #999999; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.3px; background: #874cd3; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>DrunkDeer Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:'Montserrat','Poppins',sans-serif;
background:#121212; color:#dedede;
}
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #333333;}
.logo{font-size:19px;font-weight:600;letter-spacing:-0.5px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;color:#999999;}
.navlinks span.active{color:#874cd3;}
.searchbar{background:#222222;border:1px solid #333333;border-radius:10px;padding:9px 16px;font-size:13px;color:#dedede;width:170px;}
.hero{height:230px;display:flex;align-items:center;padding:0 36px;background:linear-gradient(120deg,#121212,#1a1a1a);}
.hero h1{font-size:32px;font-weight:600;letter-spacing:-0.5px;margin:0 0 10px;max-width:460px;line-height:1.25;}
.hero p{font-size:14px;color:#999999;max-width:420px;margin:0 0 16px;}
.herobtn{background:#874cd3;color:#fff;font-size:15px;font-weight:600;letter-spacing:0.5px;padding:14px 28px;border-radius:10px;display:inline-block;}
.section{padding:18px 36px 0;}
.grid{display:flex;gap:14px;}
.card{flex:1;background:#222222;border-radius:10px;padding:16px;}
.card-img{height:110px;border-radius:10px;margin-bottom:10px;position:relative;}
.card-img.c1{background:linear-gradient(135deg,#874cd3,#111111);}
.card-img.c2{background:linear-gradient(135deg,#c72d00,#222222);}
.card-img.c3{background:linear-gradient(135deg,#31862d,#222222);}
.card-img.c4{background:linear-gradient(135deg,#07ccd7,#111111);}
.badge{position:absolute;top:8px;left:8px;background:#874cd3;color:#fff;font-size:11px;font-weight:600;text-transform:uppercase;padding:4px 8px;border-radius:4px;}
.card-title{font-size:16px;font-weight:500;margin-bottom:8px;}
.specrow{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;}
.spec{background:#1a1a1a;color:#999999;font-size:11px;padding:4px 10px;border-radius:8px;}
.card-price{font-size:18px;font-weight:600;color:#874cd3;}
</style>
<nav class="nav">
<div class="logo">Drunkdeer</div>
<div class="navlinks">
<span class="active">Keyboards</span><span>Switches</span><span>Accessories</span><span>Support</span>
</div>
<div class="searchbar">Search gear…</div>
</nav>
<div class="hero">
<div>
<h1>Precision built for<br>competitive play.</h1>
<p>Magnetic switches. Per-key RGB. Zero compromise on speed.</p>
<div class="herobtn">Shop A75 Pro</div>
</div>
</div>
<div class="section">
<div class="grid">
<div class="card"><div class="card-img c1"><span class="badge">New</span></div><div class="card-title">A75 Pro</div><div class="specrow"><span class="spec">Hall Effect</span><span class="spec">75%</span></div><div class="card-price">$149</div></div>
<div class="card"><div class="card-img c2"></div><div class="card-title">A65 Lite</div><div class="specrow"><span class="spec">Linear</span><span class="spec">65%</span></div><div class="card-price">$109</div></div>
<div class="card"><div class="card-img c3"></div><div class="card-title">G60 Compact</div><div class="specrow"><span class="spec">Clicky</span><span class="spec">60%</span></div><div class="card-price">$99</div></div>
<div class="card"><div class="card-img c4"><span class="badge">Pre-Order</span></div><div class="card-title">A75 Ultra</div><div class="specrow"><span class="spec">Bump</span><span class="spec">TKL</span></div><div class="card-price">$179</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #798490; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #6ed59f; color: #1c1c1c;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: transparent; color: #242e39;
border: 1px solid #6ed59f; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #798490; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 1px; background: #e2f7ec; color: #2c5540;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9f9f9; color:#1c1c1c; box-sizing:border-box;
font-family:'Lato', sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:64px; background:#242e39; color:#fff; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:700; }
.navlinks .active { border-bottom:2px solid #6ed59f; padding-bottom:20px; margin-bottom:-21px; }
main { flex:1 1 auto; display:flex; gap:20px; padding:18px 30px; min-height:0; }
.left { flex:1; border-radius:8px; position:relative; min-height:0;
background:#f9f9f9; border:1px solid #e6e6e6; }
.left::after { content:''; position:absolute; inset:20px; border-radius:50%;
background:radial-gradient(circle, #2c5540 0 12%, transparent 13%),
conic-gradient(#6ed59f 0 8deg, transparent 8deg 24deg, #6ed59f 24deg 32deg, transparent 32deg 48deg,
#6ed59f 48deg 56deg, transparent 56deg 72deg, #6ed59f 72deg 80deg, transparent 80deg 96deg,
#6ed59f 96deg 104deg, transparent 104deg 120deg, #6ed59f 120deg 128deg, transparent 128deg 144deg,
#6ed59f 144deg 152deg, transparent 152deg 168deg, #6ed59f 168deg 176deg, transparent 176deg 192deg,
#6ed59f 192deg 200deg, transparent 200deg 216deg, #6ed59f 216deg 224deg, transparent 224deg 240deg,
#6ed59f 240deg 248deg, transparent 248deg 264deg, #6ed59f 264deg 272deg, transparent 272deg 288deg,
#6ed59f 288deg 296deg, transparent 296deg 312deg, #6ed59f 312deg 320deg, transparent 320deg 336deg,
#6ed59f 336deg 344deg, transparent 344deg 360deg);
}
.right { flex:1; display:flex; flex-direction:column; min-height:0; }
.cat-badge { display:inline-block; background:#e2f7ec; color:#2c5540; font-size:11px; font-weight:700; letter-spacing:1px;
text-transform:uppercase; padding:4px 10px; margin-bottom:8px; align-self:flex-start; }
.title { font-size:22px; font-weight:700; margin:0 0 6px; }
.price { font-size:24px; font-weight:700; margin:0 0 12px; }
.btnrow { display:flex; gap:10px; margin-bottom:14px; }
.btn-primary { background:#6ed59f; color:#1c1c1c; border:none; border-radius:8px; padding:12px 24px; font-weight:700; font-size:14px; }
.btn-secondary { background:transparent; border:2px solid #242e39; color:#242e39; border-radius:8px; padding:10px 22px; font-weight:700; font-size:14px; }
.spectable { flex:1; background:#f9f9f9; border:1px solid #e6e6e6; border-radius:8px; padding:10px 14px; min-height:0; }
.srow { display:flex; justify-content:space-between; font-size:12px; padding:6px 0; border-bottom:1px solid #eeeeee; }
.srow span:first-child { text-transform:uppercase; letter-spacing:0.5px; font-size:11px; font-weight:700; color:#798490; }
footer { flex:0 0 auto; height:52px; background:#161c22; color:#fff; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; }
footer .links { color:#bcc1c7; display:flex; gap:16px; }
</style></head>
<body>
<nav>
<p class="brand">Arctic</p>
<div class="navlinks"><span class="active">Fans</span><span>CPU Coolers</span><span>Cases</span><span>Thermal Compound</span></div>
</nav>
<main>
<div class="left"></div>
<div class="right">
<span class="cat-badge">Fan</span>
<h1 class="title">P14 PWM PST — 140mm Case Fan</h1>
<div class="price">$14.99</div>
<div class="btnrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compatibility</button>
</div>
<div class="spectable">
<div class="srow"><span>Airflow (CFM)</span><span>82.5</span></div>
<div class="srow"><span>Static Pressure</span><span>2.81 mmH₂O</span></div>
<div class="srow"><span>Noise Level</span><span>29.7 dBA</span></div>
<div class="srow"><span>Bearing Type</span><span>Fluid Dynamic</span></div>
</div>
</div>
</main>
<footer>
<span>© Arctic</span>
<div class="links"><span>Value Quality Performance</span><span>Support</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #5e74c4;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #5e74c4;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #5e74c4; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #252525; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #055e94; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #fefefe; color: #055e94;
border: 1px solid #055e94; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fefefe; color: #222222;
border: 1px solid #d8d8d8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #252525; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f7b818; color: #1a1a1a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fefefe; font-family:'Open Sans',sans-serif; color:#222222; }
*{box-sizing:border-box;}
.stripe{height:36px;background:#003388;color:#fff;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 24px;font-size:13px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #d8d8d8;}
.logo{font-size:24px;font-weight:700;color:#003388;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:600;color:#222;}
.hero{background:#003388;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:26px 32px;}
.herotext{max-width:460px;}
.herotext h1{font-size:32px;font-weight:700;margin:0 0 10px;letter-spacing:-0.3px;}
.herotext p{font-size:15px;color:#c9d4ea;margin:0 0 16px;}
.btn-gold{background:#f7b818;color:#1a1a1a;font-size:14px;font-weight:600;padding:12px 24px;border-radius:8px;}
.grid{display:flex;gap:14px;padding:20px 24px;}
.card{flex:1;border:1px solid #d8d8d8;border-radius:8px;padding:14px;position:relative;}
.badge{position:absolute;top:10px;left:10px;font-size:11px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:4px;color:#fff;}
.thumb{aspect-ratio:1/1;background:#f4f4f4;border-radius:8px;margin-bottom:10px;}
.pname{font-size:16px;font-weight:600;}
.pprice{font-size:18px;font-weight:600;color:#003388;margin:6px 0;}
.specrow{display:flex;justify-content:space-between;font-size:12px;border-top:1px solid #eaeaea;padding:4px 0;}
.speclabel{color:#6b6b6b;text-transform:uppercase;letter-spacing:0.4px;font-weight:600;}
</style>
<div class="stripe">Support | Where to Buy | EN / FR</div>
<div class="nav">
<div class="logo">Royal Consumer Information</div>
<div class="navlinks"><div>Shredders</div><div>Calculators</div><div>Accessories</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Paper handling since 1904.</h1>
<p>Institutional-grade shredders and calculators built to a DIN standard you can trust.</p>
<div class="btn-gold">Compare Models</div>
</div>
</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#f7b818;color:#1a1a1a;">Sale</span><div class="thumb"></div><div class="pname">CD1500MX Shredder</div><div class="pprice">$249.99</div><div class="specrow"><span class="speclabel">DIN Level</span><span>P-4</span></div><div class="specrow"><span class="speclabel">Sheet Capacity</span><span>18 sheets</span></div></div>
<div class="card"><span class="badge" style="background:#6246d7;">Premium</span><div class="thumb"></div><div class="pname">CX18 Commercial</div><div class="pprice">$599.99</div><div class="specrow"><span class="speclabel">DIN Level</span><span>P-5</span></div><div class="specrow"><span class="speclabel">Sheet Capacity</span><span>24 sheets</span></div></div>
<div class="card"><span class="badge" style="background:#055e94;">New</span><div class="thumb"></div><div class="pname">RE-46F Calculator</div><div class="pprice">$18.99</div><div class="specrow"><span class="speclabel">Display</span><span>12-digit</span></div><div class="specrow"><span class="speclabel">Memory</span><span>4-key</span></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fbfb; color: #2a2a2a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fbfb; color: #2a2a2a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.25; margin: 0; color: #2a2a2a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #ff0000; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #e1e1e1; color: #2a2a2a;
border: 1px solid #ff0000; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #2a2a2a;
border: 1px solid #c5c7c7; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.2px; background: #2a2a2a; color: #f9fbfb;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9fbfb; color:#2a2a2a; box-sizing:border-box;
font-family:'Arial Narrow', Arial, 'Franklin Gothic Medium', sans-serif; font-stretch:condensed; }
* { box-sizing:border-box; }
nav { height:52px; background:#e1e1e1; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; border-bottom:2px solid #c0c0c0; }
.brand { font-size:18px; font-weight:700; letter-spacing:0.5px; margin:0; color:#2a2a2a; }
.navlinks { display:flex; gap:20px; font-size:12px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; color:#5f5f5f; }
.partno { font-size:12px; color:#767676; }
main { display:flex; height:588px; }
.stage { width:320px; background:#e1e1e1; display:flex; align-items:center; justify-content:center; border-right:2px solid #c0c0c0; }
.shredder { width:150px; height:190px; position:relative; }
.body-top { width:150px; height:70px; background:linear-gradient(180deg,#c0c0c0,#a4a4a4); border-radius:4px 4px 0 0; }
.slot { width:110px; height:8px; background:#2a2a2a; margin:16px auto 0; border-radius:2px; position:relative; }
.warn { position:absolute; right:-2px; top:-22px; background:#ff0000; color:#fff; font-size:8px; font-weight:700; padding:2px 4px; }
.body-bin { width:150px; height:120px; background:linear-gradient(180deg,#e1e1e1,#c0c0c0); border:2px solid #a4a4a4; border-top:none; }
.info { flex:1; padding:26px 32px; display:flex; flex-direction:column; gap:10px; }
.model { font-size:12px; color:#767676; margin:0; }
h1 { font-size:24px; font-weight:700; margin:0; letter-spacing:0.2px; }
table.specs { width:100%; border-collapse:collapse; margin-top:6px; font-size:12px; }
table.specs td { border:1px solid #c1c1c1; padding:6px 10px; }
table.specs td.k { background:#e1e1e1; font-weight:700; width:170px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:8px; }
.price { font-size:26px; font-weight:700; color:#ff0000; }
.instock { color:#2e7d32; font-size:12px; font-weight:700; text-transform:uppercase; }
.actions { display:flex; gap:10px; margin-top:6px; }
.btn-primary { background:#ff0000; color:#fff; border-radius:4px; height:42px; padding:0 24px;
display:flex; align-items:center; font-weight:700; font-size:13px; letter-spacing:0.3px; }
.btn-secondary { background:#fff; border:1px solid #c1c1c1; color:#2a2a2a; border-radius:4px; height:42px;
padding:0 18px; display:flex; align-items:center; font-size:12px; }
.link { color:#0000ff; text-decoration:underline; font-size:12px; margin-top:auto; }
</style></head>
<body>
<nav>
<p class="brand">Aurora Corp</p>
<div class="navlinks"><span>Shredders</span><span>Calculators</span><span>Office Supply</span><span>Support</span></div>
<span class="partno">Model No. AC-4400X</span>
</nav>
<main>
<div class="stage">
<div class="shredder">
<div class="body-top"><div class="slot"><span class="warn">DANGER</span></div></div>
<div class="body-bin"></div>
</div>
</div>
<div class="info">
<p class="model">SKU AC-4400X · In Stock</p>
<h1>AC-4400X Cross-Cut Paper Shredder — 12 Sheet</h1>
<table class="specs">
<tr><td class="k">Sheet Capacity</td><td>12 sheets, continuous duty</td></tr>
<tr><td class="k">Cut Type</td><td>Cross-cut, 5/32" x 1-1/2"</td></tr>
<tr><td class="k">Bin Capacity</td><td>9 gallons</td></tr>
<tr><td class="k">Warranty</td><td>5-year limited, cutter head</td></tr>
</table>
<div class="price-row"><span class="price">$189.00</span><span class="instock">In Stock</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Request Quote</div>
</div>
<span class="link">View full specification sheet (PDF)</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #414a51;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #414a51;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.2px; margin: 0; color: #414a51; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #8a9299; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.2px; background: #ff6900; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #414a51;
border: 1px solid #ff6900; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #414a51;
border: 1px solid #d0d2d4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a9299; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #ffc100; color: #414a51;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue', Arial, sans-serif; color:#414a51; }
*{box-sizing:border-box;}
.nav{position:absolute; top:0; left:0; width:960px; height:64px; background:#ffffff; border-bottom:1px solid #e5e8eb; display:flex; align-items:center; justify-content:space-between; padding:0 40px;}
.logo{font-size:22px; font-weight:600; color:#ff6900;}
.navlinks{display:flex; gap:22px; font-size:13px; font-weight:600; text-transform:uppercase; color:#8a9299;}
.navlinks span:nth-child(1){color:#ff6900; border-bottom:2px solid #ff6900; padding-bottom:4px;}
.cart{width:40px; height:40px; border-radius:9999px; background:#ff6900; color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px;}
.hero{position:absolute; top:64px; left:0; width:960px; height:250px; background:#f5f6f7; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
.headline{font-size:32px; font-weight:600; letter-spacing:-0.5px; color:#414a51; margin-bottom:10px;}
.sub{font-size:16px; color:#5a636a; margin-bottom:20px; width:520px;}
.btn{display:inline-block; background:#ff6900; color:#fff; font-size:16px; font-weight:500; padding:14px 32px; border-radius:9999px;}
.kits{position:absolute; top:330px; left:40px; width:880px; height:60px; display:flex; align-items:center; gap:14px;}
.kitmod{width:64px; height:44px; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,0.08);}
.k1{background:#ff6900;} .k2{background:#8a59c6;} .k3{background:#ffc100;} .k4{background:#ff5266;} .k5{background:#1093f5;}
.sec{position:absolute; top:410px; left:0; width:960px; height:230px; padding:26px 40px;}
.secTitle{font-size:20px; font-weight:600; margin-bottom:16px;}
.grid{display:flex; gap:18px;}
.card{width:216px; background:#fff; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,0.06); overflow:hidden; position:relative;}
.cardImg{width:100%; height:96px; background:linear-gradient(135deg,#ffe0c2,#ffb380);}
.cardBody{padding:12px;}
.cardTitle{font-size:16px; font-weight:600;}
.cardPrice{font-size:15px; color:#ff6900; margin-top:4px;}
.badge{position:absolute; top:8px; left:8px; background:#ffc100; color:#414a51; font-size:10px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:4px 8px; border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Kano</div>
<div class="navlinks"><span>Make</span><span>Kits</span><span>Coding</span><span>Projects</span></div>
<div class="cart">💼</div>
</div>
<div class="hero">
<div class="headline">Build. Code. Make.</div>
<div class="sub">A computer kit that turns kids into creators — snap it together, then power it up.</div>
<div class="btn">Start Making</div>
</div>
<div class="kits">
<div class="kitmod k1"></div><div class="kitmod k2"></div><div class="kitmod k3"></div><div class="kitmod k4"></div><div class="kitmod k5"></div>
</div>
<div class="sec">
<div class="secTitle">Featured Kits</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="cardImg"></div><div class="cardBody"><div class="cardTitle">Kano PC Kit</div><div class="cardPrice">$299</div></div></div>
<div class="card"><div class="cardImg" style="background:linear-gradient(135deg,#dcd0f5,#8a59c6)"></div><div class="cardBody"><div class="cardTitle">Motion Sensor Kit</div><div class="cardPrice">$79</div></div></div>
<div class="card"><div class="cardImg" style="background:linear-gradient(135deg,#ffe680,#ffc100)"></div><div class="cardBody"><div class="cardTitle">Pixel Kit</div><div class="cardPrice">$99</div></div></div>
<div class="card"><div class="cardImg" style="background:linear-gradient(135deg,#a9e0ff,#1093f5)"></div><div class="cardBody"><div class="cardTitle">Coding Camera</div><div class="cardPrice">$59</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #7796a8; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #121212;
border: 1px solid #7796a8; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 1.2px; background: #daa751; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Futura PT',Futura,-apple-system,Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-size:19px;font-weight:600;color:#121212;letter-spacing:0.2px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:0.3px;}
.announce{height:32px;background:#435650;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;}
.hero{height:250px;background:#121212;display:flex;align-items:center;padding:0 32px;gap:32px;}
.herotxt{max-width:380px;}
.h1{font-size:36px;font-weight:600;letter-spacing:-0.3px;color:#fff;margin:0 0 12px;line-height:1.15;}
.sub{font-size:15px;color:#dedede;line-height:1.5;margin:0 0 18px;}
.btn{display:inline-block;background:#7796a8;color:#fff;font-size:16px;font-weight:500;letter-spacing:0.3px;padding:14px 26px;border-radius:4px;}
.planterimg{width:190px;height:180px;position:relative;}
.planterimg .bowl{position:absolute;top:0;left:35px;width:120px;height:90px;border-radius:0 0 60px 60px;background:linear-gradient(160deg,#daa751,#7796a8);}
.planterimg .leg{position:absolute;bottom:0;width:4px;height:70px;background:#7796a8;}
.planterimg .leg1{left:60px;transform:rotate(-22deg);}
.planterimg .leg2{left:95px;}
.planterimg .leg3{left:130px;transform:rotate(22deg);}
.grid{display:flex;gap:14px;padding:20px 32px 0;}
.card{width:210px;background:#fff;padding:0;}
.thumb{height:130px;background:linear-gradient(135deg,#daa751,#435650);position:relative;}
.thumb:hover{opacity:0.85;}
.ctitle{font-size:16px;font-weight:500;margin:8px 0 2px;color:#121212;}
.cprice{font-size:14px;font-weight:600;color:#121212;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#dedede;font-size:11px;}
</style>
<div class="wrap">
<div class="announce">Free shipping on orders over $150</div>
<div class="nav">
<div class="logo">Modernica</div>
<div class="navlinks"><span>Case Study</span><span>Furniture</span><span>Planters</span><span>Configurator</span></div>
</div>
<div class="hero">
<div class="herotxt">
<div class="h1">A precise 22-degree splay.</div>
<p class="sub">Powder-coated steel legs bolted to a ceramic bowl — architecture, not decoration.</p>
<div class="btn">Build Yours</div>
</div>
<div class="planterimg"><div class="bowl"></div><div class="leg leg1"></div><div class="leg leg2"></div><div class="leg leg3"></div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ctitle">Case Study Planter, Medium</div><div class="cprice">$210</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Shell Chair, Walnut</div><div class="cprice">$895</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Wire Basket Table</div><div class="cprice">$450</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Cylinder Planter, Tall</div><div class="cprice">$165</div></div>
</div>
<div class="footer"><span>Case Study® ceramics since 1947</span><span>© Modernica</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2a75fc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2a75fc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9abbf8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2a75fc; color: #121212;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2a75fc; color: #f5f5f5;
border: 1px solid #4a89fb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9abbf8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2665d7; color: #121212;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#ffffff; box-sizing:border-box;
font-family:"Pretendard Variable", "Malgun Gothic", "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; background:#121212; border-bottom:1px solid #232323; }
.brand { font-size:17px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:14px; color:#ffffff; }
.navlinks span.active { color:#2a75fc; }
.cta { background:#2a75fc; color:#ffffff; border:none; border-radius:0px; padding:9px 14px; font-size:13px; }
.body { display:flex; height:584px; }
.rail { width:130px; padding:22px 16px; border-right:1px solid #232323; }
.rail .lbl { font-size:11px; color:#444e57; text-transform:uppercase; letter-spacing:0.05em; margin:0 0 10px; }
.rail .row { font-size:13px; color:#ffffff; padding:8px 0; opacity:0.75; }
.rail .row.on { color:#2a75fc; opacity:1; font-weight:600; }
.main { flex:1; padding:26px 30px; display:flex; flex-direction:column; }
.headline { font-size:26px; font-weight:600; margin:0 0 4px; }
.sub { font-size:13px; color:#a1a1a1; margin:0 0 20px; }
.scoreRow { display:flex; gap:20px; margin-bottom:20px; }
.scoreCard { background:#1a1a1a; border:1px solid #232323; padding:18px 20px; flex:1; }
.scoreCard .big { font-size:38px; font-weight:600; color:#2a75fc; margin:0; }
.scoreCard .lbl { font-size:12px; color:#888; margin:4px 0 0; }
.wave { height:120px; background:#1a1a1a; border:1px solid #232323; position:relative; margin-bottom:20px; overflow:hidden; }
.bars { display:flex; align-items:flex-end; gap:4px; height:100%; padding:14px 16px; }
.bar { flex:1; background:linear-gradient(180deg,#2a75fc,#118cfd); }
.stageRow { display:flex; gap:14px; margin-top:auto; }
.stagecard { flex:1; background:#1a1a1a; border:1px solid #232323; padding:14px; }
.stagecard .pct { font-size:20px; font-weight:600; margin:0; }
.stagecard .name { font-size:11px; color:#888; margin:2px 0 0; text-transform:uppercase; letter-spacing:0.04em; }
.swatch { width:10px; height:10px; display:inline-block; margin-right:6px; }
</style></head>
<body>
<nav>
<p class="brand">Asleep</p>
<div class="navlinks"><span class="active">Products</span><span>Research</span><span>Company</span><span>FAQ</span></div>
<button class="cta">API Docs</button>
</nav>
<div class="body">
<div class="rail">
<p class="lbl">Reports</p>
<div class="row on">Last night</div>
<div class="row">7-day trend</div>
<div class="row">30-day trend</div>
<p class="lbl" style="margin-top:20px;">Devices</p>
<div class="row">Bedside API</div>
<div class="row">Partner SDK</div>
</div>
<div class="main">
<h1 class="headline">Last night's sleep report</h1>
<p class="sub">Measured from breathing sound alone — no wearable required.</p>
<div class="scoreRow">
<div class="scoreCard"><p class="big">86</p><p class="lbl">Sleep score</p></div>
<div class="scoreCard"><p class="big">7h 12m</p><p class="lbl">Total sleep time</p></div>
<div class="scoreCard"><p class="big">94%</p><p class="lbl">Sleep efficiency</p></div>
</div>
<div class="wave">
<div class="bars">
<div class="bar" style="height:30%"></div><div class="bar" style="height:55%"></div>
<div class="bar" style="height:80%"></div><div class="bar" style="height:65%"></div>
<div class="bar" style="height:90%"></div><div class="bar" style="height:70%"></div>
<div class="bar" style="height:40%"></div><div class="bar" style="height:60%"></div>
<div class="bar" style="height:85%"></div><div class="bar" style="height:50%"></div>
<div class="bar" style="height:75%"></div><div class="bar" style="height:35%"></div>
<div class="bar" style="height:95%"></div><div class="bar" style="height:60%"></div>
<div class="bar" style="height:45%"></div><div class="bar" style="height:80%"></div>
</div>
</div>
<div class="stageRow">
<div class="stagecard"><p class="pct">18%</p><p class="name"><span class="swatch" style="background:#2a75fc"></span>REM</p></div>
<div class="stagecard"><p class="pct">54%</p><p class="name"><span class="swatch" style="background:#118cfd"></span>Light</p></div>
<div class="stagecard"><p class="pct">22%</p><p class="name"><span class="swatch" style="background:#3a61f2"></span>Deep</p></div>
<div class="stagecard"><p class="pct">6%</p><p class="name"><span class="swatch" style="background:#444e57"></span>Awake</p></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9e9e9e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #007aff; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: transparent; color: #dedede;
border: 1px solid #007aff; border-radius: 9999px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #1a1a1a; color: #dedede;
border: 1px solid #121212; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9e9e9e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #007aff; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#121212;color:#dedede;font-family:'Roboto',Arial,sans-serif;}
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #2a2a2a;}
.logo{font-family:'futura-pt-condensed','Arial Narrow',sans-serif;font-weight:700;font-size:26px;color:#fff;letter-spacing:1px;}
.navlinks{display:flex;gap:22px;font-size:11px;font-weight:700;color:#9e9e9e;text-transform:uppercase;letter-spacing:.5px;}
.hero{padding:26px 30px;position:relative;}
.hero-tag{font-family:'futura-pt-condensed','Arial Narrow',sans-serif;font-size:36px;font-weight:700;color:#fff;letter-spacing:1px;margin:0 0 8px;line-height:1.05;}
.hero-tag span{color:#007aff;}
.hero p{font-size:12px;color:#9e9e9e;margin:0 0 16px;max-width:400px;}
.cta{background:#007aff;color:#fff;padding:12px 30px;border-radius:999px;font-weight:700;font-size:12px;letter-spacing:.5px;text-transform:uppercase;display:inline-block;}
.cutout{position:absolute;top:20px;right:30px;width:220px;height:150px;background:#1e1e1e;border-radius:0;position:absolute;}
.cutout .can{position:absolute;bottom:12px;left:80px;width:56px;height:110px;background:#000;border-radius:0;border:2px solid #007aff;}
.cutout .can::after{content:'';position:absolute;top:20px;left:8px;right:8px;height:30px;background:#007aff;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#2a2a2a;margin:16px 30px 0;}
.card{background:#1e1e1e;padding:12px;}
.box{height:82px;margin-bottom:8px;position:relative;}
.b1{background:linear-gradient(160deg,#007aff,#0055b3);}
.b2{background:linear-gradient(160deg,#121212,#2a2a2a);}
.b3{background:linear-gradient(160deg,#3a3a3a,#1a1a1a);}
.b4{background:linear-gradient(160deg,#007aff,#003d80);}
.pillbadge{position:absolute;top:6px;left:6px;background:#007aff;color:#fff;font-size:8px;font-weight:800;padding:3px 8px;border-radius:999px;text-transform:uppercase;}
.name{font-family:'futura-pt-condensed','Arial Narrow',sans-serif;font-size:15px;font-weight:700;color:#fff;letter-spacing:.3px;margin:0 0 3px;}
.spec{font-size:10px;color:#757575;margin:0 0 6px;}
.price{font-size:13px;font-weight:700;color:#007aff;}
</style>
<div class="nav">
<div class="logo">Ghost Lifestyle</div>
<div class="navlinks"><span>Pre-Workout</span><span>Legacy</span><span>Whey</span><span>Apparel</span></div>
</div>
<div class="hero">
<div class="hero-tag">BE SEEN<br>BEYOND THE <span>WALLS</span><br>OF THE GYM</div>
<p>Supplements built for people who train hard and dress like it. No filler, no compromise.</p>
<a class="cta">Shop Pre-Workout</a>
<div class="cutout"><div class="can"></div></div>
</div>
<div class="grid">
<div class="card"><div class="box b1"><span class="pillbadge">Best Seller</span></div><div class="name">LEGACY PRE-WORKOUT</div><div class="spec">Sour Watermelon · 30 Servings</div><div class="price">$44.99</div></div>
<div class="card"><div class="box b2"><span class="pillbadge">New</span></div><div class="name">WHEY PROTEIN ISOLATE</div><div class="spec">Chocolate Peanut Butter</div><div class="price">$54.99</div></div>
<div class="card"><div class="box b3"></div><div class="name">GHOST LIFESTYLE TEE</div><div class="spec">Black · Unisex</div><div class="price">$29.99</div></div>
<div class="card"><div class="box b4"></div><div class="name">HYDRATION ELECTROLYTES</div><div class="spec">Blue Raspberry</div><div class="price">$27.99</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffc000; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffc000;
border: 1px solid #ffc000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #291f00; color: #ffc000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { position:relative; height:420px; background:
linear-gradient(180deg, transparent 60%, #000 100%),
radial-gradient(ellipse 80% 60% at 50% 30%, #1a1a1a 0%, #000 70%);
display:flex; flex-direction:column; }
nav { display:flex; align-items:center; justify-content:space-between; padding:20px 30px; }
.navside { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:400; text-transform:uppercase; letter-spacing:0.5px; }
.bull { font-size:15px; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.heroin { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; }
.heroin h1 { font-size:76px; font-weight:400; letter-spacing:0; line-height:0.92; margin:0; text-transform:uppercase; }
.heroin p { font-size:13px; color:#c4c4c4; margin:0; text-transform:uppercase; letter-spacing:0.5px; }
.hexbtn { position:absolute; right:30px; bottom:20px; width:34px; height:34px; border:1.5px solid #fff;
clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); display:flex; align-items:center; justify-content:center; }
.hexbtn::after { content:''; border-style:solid; border-width:6px 0 6px 9px; border-color:transparent transparent transparent #fff; }
.progress { position:absolute; left:30px; right:30px; bottom:8px; height:1px; background:rgba(255,255,255,0.3); }
.progress::after { content:''; position:absolute; left:0; top:0; bottom:0; width:35%; background:#fff; }
.row { display:flex; gap:10px; justify-content:center; margin-top:8px; }
.btn-gold { background:#FFC000; color:#000; border:none; border-radius:0; padding:12px 26px; font-size:12px;
font-weight:400; text-transform:uppercase; }
.btn-ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.5); border-radius:0; padding:11px 26px;
font-size:11px; font-weight:300; letter-spacing:0.2px; text-transform:uppercase; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); flex:1; }
.tile { position:relative; border-right:1px solid #202020; padding:16px 18px; display:flex; flex-direction:column; justify-content:flex-end; }
.tile:last-child { border-right:none; }
.tile .ph { position:absolute; inset:0; }
.t1 .ph { background:linear-gradient(160deg,#202020,#000 70%); }
.t2 .ph { background:linear-gradient(160deg,#181818,#000 70%); }
.t3 .ph { background:linear-gradient(160deg,#221a00,#000 70%); }
.tile .lbl { position:relative; font-size:10px; font-weight:400; letter-spacing:0.96px; text-transform:uppercase; color:#969696; }
.tile h3 { position:relative; font-size:20px; font-weight:400; margin:6px 0 0; text-transform:uppercase; }
footer { border-top:1px solid #202020; padding:10px 30px; display:flex; justify-content:space-between;
font-size:10px; color:#7D7D7D; text-transform:uppercase; letter-spacing:0.5px; }
</style></head>
<body>
<div class="hero">
<nav>
<div class="navside">☰ Menu</div>
<div class="bull">Lamborghini</div>
<div class="navside">⌕ ♡</div>
</nav>
<div class="heroin">
<h1>Temerario</h1>
<p>The new era of super sports cars</p>
<div class="row"><button class="btn-gold">Discover more</button><button class="btn-ghost">Start configuration</button></div>
</div>
<div class="hexbtn"></div>
<div class="progress"></div>
</div>
<div class="grid3">
<div class="tile t1"><div class="ph"></div><span class="lbl">Racing</span><h3>Squadra Corse</h3></div>
<div class="tile t2"><div class="ph"></div><span class="lbl">Heritage</span><h3>Museo</h3></div>
<div class="tile t3"><div class="ph"></div><span class="lbl">Configurator</span><h3>Ad Personam</h3></div>
</div>
<footer>
<span>© Lamborghini</span>
<span>Lamborghini · Models · Racing · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; letter-spacing: -0.2px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.2px; background: #313131; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.2px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #2e7d32; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#4a4a4a; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e8e8e8;}
.logo{font-size:20px;font-weight:600;color:#313131;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#313131;}
.search{background:#fff;border:1px solid #d4d4d4;border-radius:4px;padding:9px 14px;font-size:13px;color:#757575;width:200px;}
.banner{background:#f5f5f5;padding:14px 32px;font-size:13px;color:#313131;}
.banner b{font-weight:600;}
.grid{display:flex;gap:16px;padding:18px 32px 0;}
.card{width:210px;background:#fff;border:1px solid #e8e8e8;border-radius:4px;position:relative;}
.thumb{aspect-ratio:3/4;height:170px;border-radius:4px 4px 0 0;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.badge.new{background:#2e7d32;color:#fff;}
.badge.sale{background:#c62828;color:#fff;}
.ptitle{font-size:16px;font-weight:600;color:#313131;padding:8px 12px 2px;}
.pauthor{font-size:14px;color:#757575;padding:0 12px;}
.pprice{font-size:16px;font-weight:600;color:#313131;padding:4px 12px 12px;}
.pprice.sale{color:#c62828;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#313131;color:#ffffff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:13px;}
.footer .tag{color:#9e9e9e;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Strand Books</div>
<div class="navlinks"><span>Fiction</span><span>Non-Fiction</span><span>Rare Books</span><span>Sale</span></div>
<div class="search">Search 18 miles of books...</div>
</div>
<div class="banner"><b>Est. 1927.</b> New arrivals restocked daily from a rotating used and rare inventory.</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#313131,#9e9e9e)"></div><span class="badge new">New</span><div class="ptitle">The Quiet Ledger</div><div class="pauthor">M. Halloway</div><div class="pprice">$18.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#4a4a4a,#757575)"></div><span class="badge sale">Sale</span><div class="ptitle">Cartography of Rain</div><div class="pauthor">J. Ostrander</div><div class="pprice sale">$11.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#313131,#a0a0a0)"></div><div class="ptitle">First Editions: Vol. II</div><div class="pauthor">Strand Rare Books</div><div class="pprice">$85.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#757575,#313131)"></div><div class="ptitle">Notebooks of a Reader</div><div class="pauthor">E. Marsh</div><div class="pprice">$22.00</div></div>
</div>
<div class="footer"><span>© Strand Books — 18 Miles of Books</span><span class="tag">Store Hours Shipping About</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #202020;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #202020;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.35; margin: 0; color: #202020; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6f6f6f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #aaccaa; color: #202020;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #f8f8f8; color: #202020;
border: 1px solid #aaccaa; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f8f8; color: #202020;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6f6f6f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #970c11; color: #f8f8f8;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Arial,'Helvetica Neue',Roboto,sans-serif; background:#f8f8f8; color:#3a3a3a; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#f8f8f8;border-bottom:1px solid #e8e9eb;}
.logo{font-size:20px;font-weight:700;color:#202020;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;color:#202020;}
.searchpill{width:170px;height:36px;border-radius:9999px;background:#f4f4f4;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#6f6f6f;}
.hero{height:230px;position:relative;display:flex;align-items:center;padding:0 32px;background:#121212;overflow:hidden;}
.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,#121212 40%,#3a4a3a 100%);}
.herotext{position:relative;width:420px;}
.herotext h1{font-size:32px;font-weight:700;color:#f8f8f8;margin:0 0 10px;letter-spacing:-0.5px;line-height:1.15;}
.herotext p{font-size:14px;color:#dedede;margin:0 0 16px;max-width:340px;}
.cta{display:inline-block;background:#aaccaa;color:#202020;font-size:16px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;padding:14px 28px;border-radius:8px;width:fit-content;}
.terrain{position:absolute;right:60px;top:40px;width:260px;height:150px;}
.ridge{position:absolute;bottom:0;width:0;height:0;border-style:solid;}
.r1{left:0;border-width:0 60px 90px 0;border-color:transparent transparent #6f6c42 transparent;}
.r2{left:70px;border-width:0 0 130px 70px;border-color:transparent transparent #4c6e87 transparent;}
.r3{left:150px;border-width:0 55px 100px 0;border-color:transparent transparent #aaccaa transparent;}
.section{padding:16px 32px 0;}
.sectitle{font-size:13px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:#6f6f6f;margin-bottom:10px;}
.grid{display:flex;gap:14px;}
.card{width:150px;background:#fff;border-radius:8px;padding:10px;position:relative;}
.thumb{height:88px;border-radius:8px;margin-bottom:8px;}
.pname{font-size:14px;font-weight:600;color:#202020;}
.pprice{font-size:15px;font-weight:600;color:#202020;margin-top:4px;}
.pprice.sale{color:#970c11;}
.badge{position:absolute;top:8px;left:8px;background:#970c11;color:#f8f8f8;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;border-radius:4px;padding:2px 8px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#121212;color:#dedede;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kuiu</div>
<div class="navlinks"><div>Hunting</div><div>Apparel</div><div>Packs</div><div>Gear</div></div>
<div class="searchpill">Search...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Built for the alpine, not the aisle.</h1>
<p>Performance-first backcountry hunting gear engineered for legibility in field conditions.</p>
<div class="cta">Shop Now</div>
</div>
<div class="terrain"><div class="ridge r1"></div><div class="ridge r2"></div><div class="ridge r3"></div></div>
</div>
<div class="section">
<div class="sectitle">Shop By Category</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#aaccaa,#6f6c42)"></div><div class="pname">Pro Hunting Pack</div><div class="pprice sale">$249.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#dbbb07,#6f6c42)"></div><div class="pname">Guide Jacket</div><div class="pprice">$379.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4c6e87,#202020)"></div><div class="pname">Merino Base Layer</div><div class="pprice">$99.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#aaccaa,#202020)"></div><div class="pname">Peak Pants</div><div class="pprice">$199.00</div></div>
</div>
</div>
<div class="footer"><span>© KUIU — Performance First. Decoration Never.</span><span>Warranty · Field Guide</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #111111; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #111111; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #093836; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #414141; color: #ffffff;
border: 1px solid #093836; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #414141; color: #ffffff;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #6ff787; color: #111111;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Elgato</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#111111; color:#ffffff; font-family:'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.logo { font-weight:700; font-size:19px; text-transform:uppercase; letter-spacing:.5px; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.navlinks span.on { color:#40ddd3; }
.navlinks span.off { color:#595959; }
.btn { background:#093836; color:#fff; border-radius:8px; padding:12px 24px; font-size:14px; font-weight:700; }
.hero { padding:36px 24px; }
.hero .kicker { color:#6ff787; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.hero h1 { font-size:38px; font-weight:700; letter-spacing:-1px; margin:10px 0 14px; }
.hero p { color:#858585; font-size:14px; max-width:420px; margin:0 0 18px; }
.btn-accent { display:inline-block; background:#40ddd3; color:#111; border-radius:8px; padding:12px 24px; font-size:14px; font-weight:700; text-transform:uppercase; }
.stage { margin:0 24px 20px; height:170px; border-radius:8px; background:linear-gradient(150deg,#093836,#111); position:relative; overflow:hidden; }
.keylight { position:absolute; width:120px; height:60px; border-radius:8px; background:linear-gradient(160deg,#6ff787,#40ddd3);
top:50px; left:60px; box-shadow:0 0 40px 10px rgba(64,221,211,.4); }
.rec { position:absolute; top:16px; right:20px; background:#e12a40; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase;
padding:4px 10px; border-radius:4px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:0 24px; }
.card { background:#414141; border-radius:8px; padding:14px; }
.thumb { height:70px; border-radius:8px; margin-bottom:8px; }
.t1 { background:linear-gradient(160deg,#40ddd3,#093836); }
.t2 { background:linear-gradient(160deg,#a638fe,#204cfe); }
.t3 { background:linear-gradient(160deg,#6ff787,#093836); }
.t4 { background:linear-gradient(160deg,#525252,#111); }
.badge { display:inline-block; background:#6ff787; color:#111; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:.4px; border-radius:4px; padding:2px 8px; margin-bottom:8px; }
.name { font-size:14px; font-weight:600; margin:0 0 4px; }
.price { font-size:15px; font-weight:700; }
</style></head>
<body>
<nav>
<div class="logo">Elgato</div>
<div class="navlinks"><span class="on">Stream Deck</span><span class="off">Capture</span><span class="off">Lighting</span><span class="off">Audio</span></div>
<div class="btn">Shop Now</div>
</nav>
<div class="hero">
<div class="kicker">Built for creators</div>
<h1>Studio-grade streaming gear.</h1>
<p>Capture cards, key lights, and control surfaces engineered for pro-level broadcasts.</p>
<div class="btn-accent">Stream Now</div>
</div>
<div class="stage"><span class="rec">● REC</span><div class="keylight"></div></div>
<div class="grid">
<div class="card"><div class="thumb t1"></div><span class="badge">New</span><p class="name">Stream Deck MK.2</p><p class="price">$149.99</p></div>
<div class="card"><div class="thumb t2"></div><p class="name">Key Light Air</p><p class="price">$129.99</p></div>
<div class="card"><div class="thumb t3"></div><p class="name">Facecam Pro</p><p class="price">$199.99</p></div>
<div class="card"><div class="thumb t4"></div><p class="name">Wave:3 Microphone</p><p class="price">$159.99</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #1d1d1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #333333;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;font-family:'Nunito Sans','Open Sans',Arial,sans-serif;color:#333333;}
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:20px;font-weight:700;letter-spacing:-0.3px;color:#108474;}
.searchbar{width:230px;height:36px;border-radius:999px;background:#f7f5f4;border:1px solid #dddddd;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#333333;}
.hero{height:250px;display:flex;padding:28px 40px;gap:34px;background:#f7f5f4;border-radius:0 0 24px 24px;}
.hero-text{width:400px;display:flex;flex-direction:column;justify-content:center;}
.eyebrow{display:inline-block;background:#fbcd0a;color:#333333;font-size:11px;font-weight:700;padding:5px 14px;border-radius:999px;margin-bottom:14px;width:fit-content;}
.headline{font-size:30px;font-weight:700;letter-spacing:-0.3px;line-height:1.25;color:#1d1d1d;margin-bottom:12px;}
.sub{font-size:14px;color:#555555;line-height:1.55;width:365px;margin-bottom:18px;}
.cta{display:inline-block;padding:13px 28px;background:#108474;color:#ffffff;border-radius:999px;font-size:13px;font-weight:700;}
.hero-visual{flex:1;position:relative;}
.brush1{position:absolute;left:40px;top:26px;width:150px;height:26px;border-radius:13px;background:linear-gradient(90deg,#108474,#9ccdfc);}
.brush2{position:absolute;left:60px;top:70px;width:120px;height:26px;border-radius:13px;background:linear-gradient(90deg,#d2815f,#f7f5f4);}
.leaf{position:absolute;right:50px;top:24px;width:80px;height:80px;border-radius:40px 4px 40px 4px;background:#108474;}
.circle{position:absolute;right:36px;bottom:22px;width:46px;height:46px;border-radius:23px;background:#a89cc8;}
.section{padding:22px 40px 0 40px;display:flex;justify-content:space-between;align-items:baseline;}
.section-title{font-size:22px;font-weight:700;color:#1d1d1d;}
.section-link{font-size:12px;font-weight:700;color:#108474;}
.grid{display:flex;gap:24px;padding:14px 40px 0 40px;}
.card{width:204px;background:#ffffff;border:1px solid #dddddd;border-radius:12px;overflow:hidden;}
.swatch{height:100px;position:relative;}
.badge{position:absolute;left:8px;top:8px;background:#fbcd0a;color:#1d1d1d;font-size:9px;font-weight:700;padding:3px 8px;border-radius:999px;}
.card-body{padding:11px 13px 14px 13px;}
.card-title{font-size:13px;font-weight:700;color:#1d1d1d;margin-bottom:6px;}
.card-price{font-size:14px;font-weight:700;color:#108474;}
</style>
<div class="nav">
<div class="logo">Humble CO</div>
<div class="searchbar"></div>
<div class="navlinks"><span>Oral Care</span><span>Skin Care</span><span>Baby</span><span>Sustainability</span></div>
</div>
<div class="hero">
<div class="hero-text">
<div class="eyebrow">100% Sustainable</div>
<div class="headline">Small changes,<br/>gentle impact.</div>
<div class="sub">Bamboo toothbrushes, refillable floss, and everyday oral care made kinder to your bathroom and the planet.</div>
<div class="cta">Shop Bestsellers</div>
</div>
<div class="hero-visual">
<div class="brush1"></div>
<div class="brush2"></div>
<div class="leaf"></div>
<div class="circle"></div>
</div>
</div>
<div class="section"><div class="section-title">Everyday Essentials</div><div class="section-link">Shop all</div></div>
<div class="grid">
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#108474,#9ccdfc);"><div class="badge">Bestseller</div></div>
<div class="card-body"><div class="card-title">Bamboo Toothbrush 4-Pack</div><div class="card-price">$12.00</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#d2815f,#f7f5f4);"></div>
<div class="card-body"><div class="card-title">Refillable Floss</div><div class="card-price">$8.00</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#a89cc8,#9ccdfc);"><div class="badge">New</div></div>
<div class="card-body"><div class="card-title">Travel Brush Cover</div><div class="card-price">$6.00</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#108474,#0d6b5d);"></div>
<div class="card-body"><div class="card-title">Mouthwash Tablets</div><div class="card-price">$15.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #12151a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #12151a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #12151a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #9e9fa1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #26b8ce; color: #000000;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #000000;
border: 1px solid #26b8ce; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #12151a;
border: 1px solid #c4c4c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9e9fa1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #26b8ce; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#12151a; box-sizing:border-box;
font-family:'Poppins',sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
position:relative; z-index:2; }
.brand { font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:700; color:#fff; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:500; color:#fff; }
.navcta { background:#26b8ce; color:#fff; border-radius:8px; padding:10px 20px; font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:600; }
.hero { background:linear-gradient(160deg,#0a3036,#000527); margin-top:-60px; padding-top:60px; height:290px;
display:flex; align-items:center; padding-left:32px; padding-right:32px; gap:28px; }
.heroText { flex:1.2; }
.tagline { font-family:'Exo 2',sans-serif; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
color:#26b8ce; background:#0f4b55; display:inline-block; padding:4px 10px; border-radius:4px; margin-bottom:10px; }
.headline { font-family:'Space Grotesk',sans-serif; color:#fff; font-size:38px; font-weight:700; letter-spacing:-0.8px;
line-height:1.12; margin-bottom:10px; }
.sub { color:#fff; opacity:0.7; font-size:14px; margin-bottom:16px; max-width:340px; }
.heroBtn { display:inline-block; background:#26b8ce; color:#fff; border-radius:8px; padding:14px 26px;
font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:600; }
.heroImg { flex:1; height:170px; border-radius:12px; background:radial-gradient(circle at 40% 40%,#26b8ce,#0a3036 75%);
box-shadow:0 0 40px rgba(38,184,206,0.4); }
.section { padding:24px 32px 0; }
.section h2 { font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:600; margin-bottom:14px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#fff; border-radius:12px; padding:18px; box-shadow:0 4px 20px rgba(0,0,0,0.08); }
.photo { aspect-ratio:4/3; border-radius:8px; margin-bottom:10px; }
.c1 .photo { background:linear-gradient(150deg,#0f4b55,#26b8ce); }
.c2 .photo { background:linear-gradient(150deg,#334b4f,#12151a); }
.c3 .photo { background:linear-gradient(150deg,#00c0d4,#0a3036); }
.tier { display:inline-block; background:#26b8ce; color:#fff; font-family:'Exo 2',sans-serif; font-size:10px;
font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 8px; border-radius:4px; margin-bottom:8px; }
.name { font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:600; margin-bottom:4px; }
.desc { font-size:13px; color:#334b4f; margin-bottom:10px; }
.price { font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:700; }
</style></head>
<body>
<div style="background:linear-gradient(160deg,#0a3036,#000527);">
<nav>
<div class="brand">Glowforge</div>
<div class="navlinks"><span>Machines</span><span>Materials</span><span>Software</span><span>Community</span></div>
<div class="navcta">Shop</div>
</nav>
<div class="hero">
<div class="heroText">
<div class="tagline">The 3D Laser Printer</div>
<div class="headline">Print what you imagine, in wood, leather, and acrylic.</div>
<div class="sub">A camera-guided laser cutter that turns any idea into a finished object in minutes.</div>
<div class="heroBtn">Shop Glowforge</div>
</div>
<div class="heroImg"></div>
</div>
</div>
<div class="section">
<h2>Choose Your Model</h2>
<div class="grid">
<div class="card c1"><div class="photo"></div><div class="tier">Aura</div><div class="name">Aura</div><div class="desc">Compact laser crafter for makers.</div><div class="price">$1,199</div></div>
<div class="card c2"><div class="photo"></div><div class="tier">Plus</div><div class="name">Plus</div><div class="desc">Larger bed, passthrough slot.</div><div class="price">$4,995</div></div>
<div class="card c3"><div class="photo"></div><div class="tier">Pro</div><div class="name">Pro</div><div class="desc">Fastest cutting, built for studios.</div><div class="price">$6,995</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #245abc; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #245abc;
border: 1px solid #245abc; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dce5f4; color: #245abc;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#15181D; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.gallery { position:relative; width:100%; height:224px;
background:linear-gradient(160deg,#8fd3c7 0%,#4f8bc9 55%,#245ABC 100%); }
.scrim { position:absolute; top:0; left:0; right:0; height:70px;
background:linear-gradient(to bottom, rgba(16,19,23,0.45), transparent); }
.ovbtn { position:absolute; top:14px; width:36px; height:36px; border-radius:50%;
background:rgba(16,19,23,0.55); color:#fff; font-size:16px; display:flex; align-items:center; justify-content:center; }
.ovback { left:16px; } .ovshare { right:60px; } .ovsave { right:16px; }
.galbrand { position:absolute; top:18px; left:50%; transform:translateX(-50%); color:#fff;
font-size:12px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; }
.dots { position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:5px; }
.dot { width:6px; height:6px; border-radius:3px; background:rgba(255,255,255,0.45); }
.dot.on { width:16px; background:#FFFFFF; }
.counter { position:absolute; right:14px; bottom:12px; background:rgba(16,19,23,0.7); color:#fff;
font-size:12px; font-weight:600; border-radius:999px; padding:4px 10px; }
.content { padding:14px 18px 0; overflow:hidden; }
.badgerow { display:flex; gap:8px; margin-bottom:8px; }
.badge { font-size:12px; font-weight:700; border-radius:6px; padding:4px 10px; }
.badge.premier { color:#245ABC; background:rgba(36,90,188,0.12); }
.badge.instant { color:#1F9D57; background:rgba(31,157,87,0.12); }
.title { font-size:21px; font-weight:700; margin:0 0 4px; letter-spacing:-0.3px; }
.locrow { font-size:14px; color:#5A6470; display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.locrow .gold { color:#F2B01E; font-weight:700; }
.locrow .rev { color:#15181D; font-weight:700; }
.hr { border:none; border-top:1px solid #E1E5EB; margin:10px 0; }
.factsrow { display:flex; }
.fact { flex:1; text-align:center; }
.fact b { display:block; font-size:16px; font-weight:700; }
.fact span { font-size:12px; color:#5A6470; }
.wholehome { margin-top:12px; background:#F3F5F8; border-radius:8px; padding:9px 12px;
font-size:13px; color:#15181D; font-weight:600; }
.wholehome b { color:#1F9D57; }
.desc { margin-top:12px; font-size:14px; color:#5A6470; line-height:1.5; }
.bookingbar { position:absolute; bottom:0; left:0; right:0; height:76px;
background:rgba(16,19,23,0.97); display:flex; align-items:center; justify-content:space-between;
padding:0 22px; }
.price { font-size:24px; font-weight:800; color:#EDEFF2; }
.price span { font-size:13px; font-weight:400; color:#A3AAB4; }
.dateline { font-size:12px; color:#A3AAB4; text-decoration:underline; margin-top:2px; }
.bookbtn { background:#245ABC; color:#FFFFFF; font-size:16px; font-weight:700; border:none;
border-radius:10px; padding:14px 30px; }
</style></head>
<body>
<div class="gallery">
<div class="scrim"></div>
<p class="galbrand">Vrbo (iOS)</p>
<div class="ovbtn ovback">←</div>
<div class="ovbtn ovshare">↑</div>
<div class="ovbtn ovsave">♡</div>
<div class="dots"><span class="dot on"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
<div class="counter">▧ 1 / 42</div>
</div>
<div class="content">
<div class="badgerow">
<span class="badge premier">Premier Host</span>
<span class="badge instant">Instant Book</span>
</div>
<p class="title">Cliffside Bluff House with Private Pool</p>
<div class="locrow"><span class="gold">★ 4.9</span><span class="rev">186 reviews</span><span>· Outer Banks, NC</span></div>
<hr class="hr">
<div class="factsrow">
<div class="fact"><b>8</b><span>Guests</span></div>
<div class="fact"><b>4</b><span>Bedrooms</span></div>
<div class="fact"><b>3</b><span>Bathrooms</span></div>
<div class="fact"><b>Entire</b><span>Whole home</span></div>
</div>
<div class="wholehome"><b>✓</b> You'll have the entire place to yourself</div>
<div class="desc">Perched above the dunes with wraparound decks and an unheated saltwater pool, this whole-home retreat sleeps eight across four quiet bedrooms.</div>
</div>
<div class="bookingbar">
<div>
<div class="price">$486 <span>/ night</span></div>
<div class="dateline">Jun 14 – 21 · 7 nights</div>
</div>
<button class="bookbtn">Book now</button>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.27; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #6c6c6c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #fed555; color: #111111;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #1d2124; color: #ffffff;
border: 1px solid #fed555; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c6c6c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #cc0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Funko Official</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'ProximaNova-Regular','Proxima Nova',sans-serif; color:#535353; }
*{box-sizing:border-box;}
.nav{background:#1d2124;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-size:19px;font-weight:400;font-style:italic;font-family:'Dimbo-Italic','Dimbo-Regular',sans-serif;}
.navlinks{display:flex;gap:24px;font-size:15px;font-weight:600;color:#fff;}
.navlinks span:first-child{color:#fed555;}
.searchwrap{background:#f3f3f7;border-radius:8px;padding:6px 12px 6px 16px;font-size:13px;color:#6c6c6c;display:flex;align-items:center;width:200px;}
.hero{background:#1c1b37;color:#fff;padding:36px 32px;min-height:210px;display:flex;flex-direction:column;justify-content:center;}
h1{font-family:'Dimbo-Italic',sans-serif;font-style:italic;font-size:40px;font-weight:400;line-height:1.1;margin:0 0 8px;max-width:520px;}
.sub{font-size:18px;color:#fff;opacity:0.85;margin:0 0 20px;}
.cta{background:#fed555;color:#111111;border:none;border-radius:4px;padding:12px 24px;font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;width:fit-content;}
.chips{display:flex;gap:10px;padding:16px 32px;border-bottom:1px solid #e6e6e6;}
.chip{background:#ededf3;color:#111111;font-size:13px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;padding:6px 16px;border-radius:9999px;}
.chip.active{background:#fed555;color:#111111;}
.section{padding:20px 32px 0;}
.section h2{font-size:22px;font-weight:700;color:#111111;margin:0 0 14px;}
.grid{display:flex;gap:14px;}
.card{flex:1;background:#fff;border:1px solid #e6e6e6;border-radius:8px;padding:8px;}
.card-img{background:#f3f3f7;border-radius:6px;height:110px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative;}
.pop{width:48px;height:58px;position:relative;}
.pop-head{width:42px;height:42px;background:#e8c9a0;border-radius:50%;position:absolute;top:0;left:3px;}
.pop-body{width:32px;height:20px;background:#1c1b37;border-radius:6px;position:absolute;bottom:0;left:8px;}
.badge{position:absolute;top:6px;left:6px;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:3px 8px;border-radius:4px;color:#fff;}
.badge.sale{background:#cc0000;}
.badge.new{background:#008827;}
.badge.excl{background:#fed555;color:#111111;}
.card-title{font-size:16px;font-weight:600;color:#111111;margin-top:8px;}
.card-price{font-family:'ProximaNova-Black',sans-serif;font-size:20px;font-weight:900;color:#111111;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Funko Official</div>
<div class="navlinks"><span>Pop!</span><span>Exclusives</span><span>Vinyl Rides</span><span>Blockbuster</span></div>
<div class="searchwrap">Search figures...</div>
</div>
<div class="hero">
<h1>The Collection Grows</h1>
<p class="sub">Discover this season's Pop! exclusives before they're gone.</p>
<button class="cta">Shop Exclusives</button>
</div>
<div class="chips">
<div class="chip active">All</div><div class="chip">Convention</div><div class="chip">Chase</div><div class="chip">Glow</div><div class="chip">Retro</div>
</div>
<div class="section">
<h2>Pop! Exclusives</h2>
<div class="grid">
<div class="card"><div class="card-img"><div class="badge excl">Exclusive</div><div class="pop"><div class="pop-head"></div><div class="pop-body"></div></div></div><div class="card-title">Void Walker #612</div><div class="card-price">$14.99</div></div>
<div class="card"><div class="card-img"><div class="badge sale">Sale</div><div class="pop"><div class="pop-head" style="background:#d9d9d9;"></div><div class="pop-body" style="background:#0070cc;"></div></div></div><div class="card-title">Iron Sentinel #200</div><div class="card-price">$11.99</div></div>
<div class="card"><div class="card-img"><div class="badge new">New</div><div class="pop"><div class="pop-head" style="background:#f0d2a0;"></div><div class="pop-body" style="background:#117a8b;"></div></div></div><div class="card-title">Chrono Ranger #77</div><div class="card-price">$14.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f8; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f8; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.3px; background: #e50669; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.3px; background: #f7f7f8; color: #231f20;
border: 1px solid #e50669; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f7f7f8; color: #231f20;
border: 1px solid #c2c1c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #00eab6; color: #231f20;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f7f8; font-family:'Georgia',serif; color:#272d45; }
*{box-sizing:border-box;}
.nav{height:60px;background:#ffffff;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dbdde4;font-family:'Helvetica Neue',Arial,sans-serif;}
.logo{font-family:Georgia,serif;font-size:19px;font-weight:300;letter-spacing:1px;color:#231f20;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#272d45;}
.hero{height:260px;display:flex;align-items:center;padding:0 40px;background:#f7f7f8;}
.heroText{width:440px;}
.h1{font-size:32px;font-weight:300;line-height:1.2;color:#231f20;margin:0 0 14px;}
.sub{font-family:'Helvetica Neue',Arial,sans-serif;font-size:14px;color:#272d45;line-height:1.5;margin:0 0 20px;width:370px;}
.cta{display:inline-flex;align-items:center;justify-content:center;width:170px;height:44px;background:#e50669;color:#ffffff;font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;font-weight:600;border-radius:9999px;}
.cases{position:relative;width:340px;height:210px;}
.phcase{position:absolute;width:100px;height:190px;border-radius:20px;top:10px;}
.p1{left:60px;background:linear-gradient(160deg,#fd83c2,#e50669);transform:rotate(-8deg);}
.p2{left:150px;background:linear-gradient(160deg,#b2f9e9,#0e7a82);transform:rotate(6deg);z-index:2;}
.p3{left:210px;top:30px;background:linear-gradient(160deg,#ffcf2a,#272d45);transform:rotate(14deg);}
.sec{padding:24px 40px 0;font-family:'Helvetica Neue',Arial,sans-serif;}
.secTitle{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#676986;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:190px;text-align:center;position:relative;}
.thumb{height:130px;border-radius:12px;margin-bottom:10px;}
.badge{position:absolute;top:10px;left:10px;background:#e50669;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:3px 8px;border-radius:9999px;}
.pname{font-size:13px;font-weight:500;color:#272d45;margin:0 0 4px;}
.pprice{font-size:13px;color:#676986;}
</style>
<div class="nav">
<div class="logo">Wildflower Cases</div>
<div class="navlinks"><span>New</span><span>Bestsellers</span><span>Accessories</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">A case is an accessory too.</div>
<div class="sub">Limited-edition patterns and colors, designed like fashion — because it is.</div>
<div class="cta">Shop Collection</div>
</div>
<div class="cases"><div class="phcase p1"></div><div class="phcase p2"></div><div class="phcase p3"></div></div>
</div>
<div class="sec">
<div class="secTitle">Just Dropped</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#e50669,#fd83c2);"></div><div class="pname">Blush Marble Case</div><div class="pprice">$45</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b2f9e9,#272d45);"></div><div class="pname">Seafoam Wave Case</div><div class="pprice">$45</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffcf2a,#e50669);"></div><div class="pname">Marigold Petal Case</div><div class="pprice">$45</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #8a9297; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #18acf2; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #18acf2;
border: 1px solid #18acf2; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a9297; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.8px; background: #18acf2; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121212; font-family:Roboto,sans-serif; color:#fff; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #252525;}
.logo{font-family:'Montserrat Black',Montserrat,sans-serif;font-size:18px;font-weight:900;color:#fff;text-transform:uppercase;}
.navlinks{display:flex;gap:22px;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;color:#fff;}
.hero{padding:32px 30px 22px;}
.eyebrow{font-family:Montserrat,sans-serif;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#18acf2;margin-bottom:12px;}
.h1{font-family:'Montserrat Black',Montserrat,sans-serif;font-size:44px;font-weight:900;text-transform:uppercase;line-height:1.05;letter-spacing:-0.5px;margin:0 0 12px;}
.sub{font-size:15px;color:#d0d0d0;max-width:460px;margin:0 0 18px;}
.btn{display:inline-block;background:#18acf2;color:#fff;font-family:Montserrat,sans-serif;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:13px 26px;border-radius:8px;}
.chiprow{display:flex;gap:10px;padding:0 30px 16px;}
.chip{background:#252525;border:1px solid #d4d6d8;color:#fff;font-family:Montserrat,sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:8px 16px;border-radius:9999px;}
.chip.active{background:#18acf2;border:none;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:210px;background:#252525;border-radius:12px;padding:16px;}
.thumb{height:100px;background:#1c1c1c;border-radius:8px;margin-bottom:10px;position:relative;}
.gradebadge{position:absolute;top:8px;left:8px;font-family:Montserrat,sans-serif;font-size:10px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.g-purple{background:#5f249f;color:#fff;}
.g-lime{background:#78d318;color:#121212;}
.title{font-family:Montserrat,sans-serif;font-size:17px;font-weight:600;}
.price{font-family:Montserrat,sans-serif;font-size:19px;font-weight:700;color:#fff;margin-top:6px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Sphero Educatio 2 Education</div>
<div class="navlinks"><span>PK-12</span><span>CTE</span><span>Curriculum</span></div>
</div>
<div class="hero">
<div class="eyebrow">PK-12 Education</div>
<div class="h1">Robotics that scale<br>from K to CTE.</div>
<div class="sub">A color-coded curriculum without needing labels — maximum legibility under projector light.</div>
<div class="btn">Shop Curriculum</div>
</div>
<div class="chiprow">
<div class="chip active">All</div><div class="chip">K-2</div><div class="chip">3-5</div><div class="chip">CTE</div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="gradebadge g-purple">CTE</span></div><div class="title">Sphero RVR+ Kit</div><div class="price">$349.99</div></div>
<div class="card"><div class="thumb"><span class="gradebadge g-lime">K-2</span></div><div class="title">Sphero indi Classroom Pack</div><div class="price">$1,299.99</div></div>
<div class="card"><div class="thumb"></div><div class="title">Sphero BOLT+ 15-Pack</div><div class="price">$1,999.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 500; line-height: 1.25; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.14; letter-spacing: 1px; background: #000000; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.14; letter-spacing: 1px; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.27; letter-spacing: 0.75px; background: #000000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Conduit ITC Std','DM Sans',Roboto,-apple-system,BlinkMacSystemFont,sans-serif; color:#000000; }
*{box-sizing:border-box;}
.stripe{height:36px;background:#333333;display:flex;align-items:center;padding:0 40px;color:#fff;font-size:12px;}
.nav{height:64px;background:#000000;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:20px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:15px;font-weight:500;letter-spacing:0.25px;color:#fff;}
.hero{height:210px;background:#000000;display:flex;align-items:center;padding:0 40px;position:relative;}
.hero:before{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.55);}
.herotext{position:relative;z-index:2;width:440px;}
h1{font-size:44px;font-weight:700;letter-spacing:-0.5px;line-height:1.05;color:#fff;margin:0 0 10px;text-transform:uppercase;}
.sub{font-style:italic;font-size:22px;font-weight:500;color:#e5e5e5;margin:0 0 18px;}
.cta{display:inline-block;background:#ffffff;color:#000;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:12px 24px;border-radius:4px;}
.sec{padding:22px 40px 0;}
.chips{display:flex;gap:8px;margin-bottom:16px;}
.chip{background:#f7f7f7;border:1px solid #e5e5e5;border-radius:2px;font-size:14px;padding:6px 12px;}
.chip.active{background:#000;color:#fff;border-color:#000;}
.grid{display:flex;gap:14px;}
.card{width:210px;background:#fff;border:1px solid #e5e5e5;border-radius:2px;padding:16px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#000;color:#fff;font-size:11px;font-weight:500;letter-spacing:0.75px;text-transform:uppercase;padding:4px 8px;}
.thumb{height:90px;background:#f7f7f7;margin-bottom:10px;}
.pname{font-size:16px;font-weight:500;margin:0 0 6px;text-transform:uppercase;}
.specrow{display:flex;justify-content:space-between;font-size:12px;color:#888;border-top:1px solid #e5e5e5;padding-top:6px;}
</style>
<div class="stripe">Distributor Login · ANSI/ISEA Compliant PPE</div>
<div class="nav">
<div class="logo">Pyramex Safety</div>
<div class="navlinks"><span>Eyewear</span><span>Hearing</span><span>Head Protection</span><span>Hi-Vis</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Certified for the Job Site.</h1>
<div class="sub">Impact-rated. Field-tested.</div>
<div class="cta">Shop Safety Eyewear</div>
</div>
</div>
<div class="sec">
<div class="chips">
<div class="chip active">All</div>
<div class="chip">Z87.1+</div>
<div class="chip">EN166</div>
<div class="chip">OSHA</div>
</div>
<div class="grid">
<div class="card"><span class="badge">ANSI Z87.1+</span><div class="thumb"></div><div class="pname">Ztek Safety Glasses</div><div class="specrow"><span>Lens: Polycarbonate</span><span>Frame: Black</span></div></div>
<div class="card"><span class="badge">EN166</span><div class="thumb"></div><div class="pname">Venture II Goggles</div><div class="specrow"><span>Impact: F</span><span>UV: 99.9%</span></div></div>
<div class="card"><span class="badge">OSHA Compliant</span><div class="thumb"></div><div class="pname">Ridgeline Hard Hat</div><div class="specrow"><span>Type: I Class E</span><span>Vented</span></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 0.95; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14.4px; font-weight: 700; line-height: 1.0; letter-spacing: 0.144px; background: #ffed00; color: #000000;
border: none; border-radius: 2px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14.4px; font-weight: 700; line-height: 1.0; letter-spacing: 0.144px; background: #000000; color: #ffffff;
border: 1px solid #ffed00; border-radius: 2px;
padding: 14px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.0; letter-spacing: 0.144px; background: #ffed00; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; background:#ffffff; }
.diamond { width:20px; height:20px; background:#000; transform:rotate(45deg); }
.navlinks { display:flex; gap:26px; color:#000; opacity:.62; font-size:13px; font-weight:700; }
.navcta { background:#000; color:#fff; border:none; padding:9px 18px; font-size:12.5px; font-weight:700; letter-spacing:.1px; }
.hero { position:relative; height:280px; background:#000
radial-gradient(ellipse 700px 340px at 78% 40%, rgba(255,109,240,.35), transparent 60%),
radial-gradient(ellipse 600px 300px at 60% 70%, rgba(140,90,255,.30), transparent 60%),
radial-gradient(ellipse 500px 260px at 30% 30%, rgba(255,237,0,.22), transparent 60%);
display:flex; align-items:center; padding:0 32px; overflow:hidden; }
.hero::after { content:''; position:absolute; right:-40px; bottom:-60px; width:420px; height:220px;
background:linear-gradient(100deg, #050505 0%, #1a1a1a 40%, #333 55%, #111 70%, #050505 100%);
clip-path: polygon(0% 70%, 12% 40%, 30% 30%, 55% 24%, 78% 30%, 100% 45%, 100% 100%, 0% 100%);
opacity:.9; }
.herobadge { background:#ffed00; color:#000; font-size:10px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; padding:5px 12px; display:inline-block; margin-bottom:14px; }
.hero h1 { font-size:44px; font-weight:700; line-height:.95; margin:0 0 12px; max-width:420px; position:relative; z-index:2; }
.hero p { font-size:14px; color:rgba(255,255,255,.72); margin:0 0 18px; max-width:340px; position:relative; z-index:2; }
.herobtns { display:flex; gap:10px; position:relative; z-index:2; }
.btn-y { background:#ffed00; color:#000; border:none; padding:12px 22px; font-size:13px; font-weight:700; }
.btn-o { background:transparent; color:#fff; border:1px solid #fff; padding:11px 21px; font-size:13px; font-weight:700; }
.catalog { background:#fff; color:#000; padding:26px 32px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.vcard { position:relative; }
.vphoto { height:100px; background:linear-gradient(120deg,#e8e8e8,#f4f4f4 40%,#d8d8d8);
position:relative; overflow:hidden; }
.vphoto::after { content:''; position:absolute; left:14%; right:14%; bottom:18%; height:38%;
background:#111; clip-path: polygon(0% 100%, 6% 50%, 22% 30%, 45% 20%, 70% 22%, 92% 45%, 100% 60%, 100% 100%); }
.vbadge { position:absolute; left:8px; top:8px; background:#ffed00; color:#000; font-size:9px; font-weight:700;
letter-spacing:.05em; padding:3px 9px; text-transform:uppercase; z-index:3; }
.vname { font-size:15px; font-weight:700; margin:9px 0 2px; }
.vsub { font-size:11px; color:#666; }
.promo { margin:0 32px 20px; background:#ffed00; color:#000; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; }
.promo h3 { font-size:20px; font-weight:700; margin:0; line-height:1; }
.promo span { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; opacity:.7; }
.promo button { background:#000; color:#fff; border:none; padding:9px 18px; font-size:12px; font-weight:700; }
footer { background:#000; padding:14px 32px; display:flex; justify-content:space-between; align-items:center;
font-size:10.5px; color:rgba(255,255,255,.6); border-top:1px solid rgba(255,255,255,.16); }
</style></head>
<body>
<nav>
<div class="diamond"></div>
<div class="navlinks"><span>MODELLER</span><span>HİZMETLER</span><span>YAŞAM</span><span>MYRENAULT</span></div>
<button class="navcta">RANDEVU AL</button>
</nav>
<section class="hero">
<div>
<span class="herobadge">Yeni</span>
<h1>E-TECH<br>ELEKTRİKLİ</h1>
<p>Renault R5 — sadeliğin ve gücün diamond işareti altında buluştuğu yeni nesil.</p>
<div class="herobtns">
<button class="btn-y">Konfigüratörü Başlat</button>
<button class="btn-o">Detayları Gör</button>
</div>
</div>
</section>
<section class="catalog">
<div class="vcard"><span class="vbadge">Yeni</span><div class="vphoto"></div><div class="vname">Renault 5</div><div class="vsub">E-Tech Elektrikli</div></div>
<div class="vcard"><div class="vphoto"></div><div class="vname">Clio</div><div class="vsub">Hybrid · Benzin</div></div>
<div class="vcard"><div class="vphoto"></div><div class="vname">Austral</div><div class="vsub">E-Tech Full Hybrid</div></div>
</section>
<div class="promo">
<div><span>PARLAK SARI</span><h3>Sunlight Yellow paket kampanyası</h3></div>
<button>Kampanyaları Gör</button>
</div>
<footer>
<span>© Renault</span>
<span>Modeller · Hizmetler · MyRenault · Yasal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f1efe8; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f1efe8; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #d02e2e; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #f1efe8; color: #1a1a1a;
border: 1px solid #d02e2e; border-radius: 0px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #f1efe8; color: #1a1a1a;
border: 1px solid #bbbab4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #d02e2e; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f1efe8; color:#1a1a1a; box-sizing:border-box;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; background:#1a1a1a; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#f1efe8; font-size:15px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.navlinks { display:flex; gap:26px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#b3b3b3; }
.navlinks span.on { color:#ffffff; }
.bag { color:#f1efe8; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.wrap { display:flex; height:524px; }
.photo { width:440px; background:linear-gradient(155deg,#3e3e3e 0%,#1a1a1a 60%,#0b0b0b 100%); position:relative; overflow:hidden; }
.photo::before { content:''; position:absolute; inset:0; background:
repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 6px, transparent 6px 14px); }
.new-tag { position:absolute; top:20px; left:20px; background:#ecbd5e; color:#1a1a1a; font-size:10px; font-weight:700;
text-transform:uppercase; letter-spacing:.06em; padding:5px 10px; }
.stock-tag { position:absolute; top:20px; right:20px; background:#56ad6a; color:#fff; font-size:10px; font-weight:700;
text-transform:uppercase; letter-spacing:.06em; padding:5px 10px; }
.info { flex:1; padding:34px 40px; display:flex; flex-direction:column; gap:16px; overflow:hidden; }
.eyebrow { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#808080; }
.info h1 { font-size:26px; margin:0; font-weight:700; letter-spacing:-.3px; }
.price { font-size:20px; font-weight:700; }
.desc { font-size:13px; color:#3e3e3e; line-height:1.6; max-width:440px; }
.size-label { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#808080; }
.size-grid { display:flex; gap:8px; }
.size { width:42px; height:42px; border:1px solid #b3b3b3; display:flex; align-items:center; justify-content:center; font-size:12px; }
.size.on { background:#1a1a1a; color:#fff; border-color:#1a1a1a; }
.size.out { color:#b3b3b3; border-color:#e6e6e6; text-decoration:line-through; }
.fabric-note { font-size:12px; color:#808080; border-top:1px solid #d3d3d3; padding-top:12px; }
.buy-row { display:flex; gap:10px; margin-top:auto; }
.btn-buy { flex:1; background:#1a1a1a; color:#fff; border:none; padding:15px; font-size:12px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.btn-wish { border:1px solid #1a1a1a; padding:15px 20px; font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
footer { height:58px; background:#1a1a1a; color:#808080; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">18 East</p>
<div class="navlinks"><span>Outerwear</span><span class="on">Workshirts</span><span>Accessories</span><span>Archive</span></div>
<span class="bag">Bag (1)</span>
</nav>
<div class="wrap">
<div class="photo">
<span class="new-tag">New Arrival</span>
<span class="stock-tag">In Stock</span>
</div>
<div class="info">
<span class="eyebrow">Fall Collection — Waxed Canvas</span>
<h1>Trail Chore Jacket, Rust Waxed Canvas</h1>
<span class="price">$328.00</span>
<p class="desc">Reworked from a mid-century workwear pattern in a heavyweight waxed cotton canvas that only gets better with wear. Built for trail, jobsite, or neither.</p>
<span class="size-label">Size</span>
<div class="size-grid">
<div class="size">S</div><div class="size on">M</div><div class="size">L</div><div class="size">XL</div><div class="size out">XXL</div>
</div>
<span class="fabric-note">12oz waxed cotton canvas · corozo buttons · made in limited run</span>
<div class="buy-row">
<button class="btn-buy">Add to Bag</button>
<button class="btn-wish">♡</button>
</div>
</div>
</div>
<footer><span>© 18 East</span><span>Shipping · Returns · Size Guide</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1e1f26; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1e1f26; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff4500; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #eeeeee; color: #1e1f26;
border: 1px solid #ff4500; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #eeeeee; color: #1e1f26;
border: 1px solid #1e1f26; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff4500; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; position:relative; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1e1f26; color:#eeeeee; box-sizing:border-box;
font-family:'Source Serif Pro',Georgia,'Times New Roman',serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 38px;
border-bottom:2px solid #444444; }
.brand { font-size:22px; font-weight:700; color:#ff4500; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:13px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#cfcfcf; }
.cart { background:#ff4500; color:#fff; font-size:12px; font-weight:700; text-transform:uppercase;
letter-spacing:0.5px; padding:8px 16px; border-radius:2px; }
.hero { padding:30px 38px 22px; display:flex; gap:36px; align-items:center; }
.htext { max-width:420px; }
.htext .tag { font-size:13px; font-weight:700; color:#ff4500; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }
.htext h1 { font-size:34px; font-weight:700; line-height:1.15; letter-spacing:-0.5px; color:#ffffff; margin:0 0 12px; }
.htext p { font-size:15px; color:#bdbdbd; line-height:1.45; margin:0 0 16px; font-family:Georgia,serif; }
.btn { display:inline-block; background:#ff4500; color:#fff; font-size:14px; font-weight:700; text-transform:uppercase;
letter-spacing:0.5px; padding:11px 24px; border-radius:2px; }
.poster { width:190px; height:264px; border-radius:2px; flex-shrink:0; background:linear-gradient(160deg,#444444,#0f0f10 65%);
border:1px solid #ff4500; position:relative; }
.poster::after { content:'GRINDHOUSE\A CULT CINEMA'; white-space:pre; position:absolute; bottom:14px; left:14px; right:14px;
font-size:12px; font-weight:700; color:#ff4500; letter-spacing:1px; line-height:1.4; }
.section { padding:4px 38px 0; }
.section h2 { font-size:19px; font-weight:600; color:#ffffff; margin:0 0 14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card { background:#eeeeee; border-radius:2px; padding:12px; color:#1e1f26; }
.cover { height:88px; border-radius:2px; margin-bottom:10px; }
.g1 .cover { background:linear-gradient(150deg,#e21b24,#1e1f26 70%); }
.g2 .cover { background:linear-gradient(150deg,#1ea0c3,#1e1f26 70%); }
.g3 .cover { background:linear-gradient(150deg,#444444,#0f0f10); }
.g4 .cover { background:linear-gradient(150deg,#ff4500,#1e1f26 70%); }
.card .t { font-size:14px; font-weight:600; margin:0 0 4px; }
.card .stars { font-size:11px; color:#ff9900; margin-bottom:4px; }
.card .p { font-size:13px; font-weight:700; color:#ff4500; }
</style></head>
<body>
<nav>
<div class="brand">Grindhouse Releasing</div>
<div class="navlinks"><span>Horror</span><span>Exploitation</span><span>Cult</span><span>Box Sets</span></div>
<div class="cart">Cart · 2</div>
</nav>
<div class="hero">
<div class="htext">
<div class="tag">Newly Restored</div>
<h1>The films they tried to bury, uncut.</h1>
<p>4K restorations of cult, horror, and exploitation cinema — the scholarly footnotes of 42nd Street, printed with the weight of a Criterion spine.</p>
<span class="btn">Browse the Catalog</span>
</div>
<div class="poster"></div>
</div>
<div class="section">
<h2>New Restorations</h2>
<div class="grid">
<div class="card g1"><div class="cover"></div><div class="t">Blood Reel Vol. III</div><div class="stars">★★★★☆</div><div class="p">$29.99</div></div>
<div class="card g2"><div class="cover"></div><div class="t">Midnight Marquee</div><div class="stars">★★★★★</div><div class="p">$24.99</div></div>
<div class="card g3"><div class="cover"></div><div class="t">The Concrete Reel</div><div class="stars">★★★☆☆</div><div class="p">$19.99</div></div>
<div class="card g4"><div class="cover"></div><div class="t">Grindhouse Anthology</div><div class="stars">★★★★☆</div><div class="p">$44.99</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdfdfd; color: #040926;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdfdfd; color: #040926;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.25; margin: 0; color: #040926; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #3086c8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #006fcf; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #fdfdfd; color: #040926;
border: 1px solid #006fcf; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fdfdfd; color: #231f20;
border: 1px solid #bfc0c7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #3086c8; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff00c9; color: #fdfdfd;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fdfdfd; font-family:'Archivo Narrow',Arial,sans-serif; color:#231f20; }
*{box-sizing:border-box;}
.nav{height:72px;background:#040926;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-family:Impact,'Archivo Narrow',sans-serif;font-size:24px;letter-spacing:1px;color:#fff;text-transform:uppercase;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;}
.navlinks span{color:#fff;}
.navlinks .on{color:#ff00c9;}
.hero{height:220px;background:#040926;display:flex;align-items:center;padding:0 30px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#9528fa 0%,transparent 70%);opacity:0.5;}
.herotext{position:relative;z-index:2;}
.hkick{font-size:12px;font-weight:700;color:#ffba22;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;}
.h1{font-family:Impact,'Archivo Narrow',sans-serif;font-size:34px;color:#fff;letter-spacing:0.5px;margin:0 0 10px;text-transform:uppercase;}
.hsub{font-size:14px;color:#d0d0d0;max-width:420px;margin:0 0 16px;}
.cta{display:inline-block;background:#006fcf;color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:12px 26px;border-radius:8px;}
.divider{height:2px;background:#ff00c9;}
.section{padding:18px 30px 0;}
.sectitle{font-size:16px;font-weight:700;margin-bottom:12px;text-transform:uppercase;}
.grid{display:flex;gap:14px;}
.card{width:198px;border:1px solid #231f20;border-radius:8px;overflow:hidden;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:4px;letter-spacing:0.5px;z-index:2;}
.thumb{height:120px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;}
.cab{width:60px;height:90px;border-radius:6px 6px 4px 4px;}
.pinfo{padding:10px;}
.ptitle{font-size:14px;font-weight:600;color:#040926;}
.pprice{font-size:14px;font-weight:600;color:#006fcf;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Quality Arcades</div>
<div class="navlinks"><span class="on">Machines</span><span>Custom Build</span><span>Parts</span><span>Support</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="hkick">Custom-Built Arcade Cabinets</div>
<div class="h1">Own Your High Score</div>
<div class="hsub">Full-size arcade machines built to order — every cabinet raw, real, and ready to play.</div>
<div class="cta">Customize</div>
</div>
</div>
<div class="divider"></div>
<div class="section">
<div class="sectitle">Featured Cabinets</div>
<div class="grid">
<div class="card"><div class="badge" style="background:#ff00c9;color:#fff;">New</div><div class="thumb"><div class="cab" style="background:linear-gradient(160deg,#006fcf,#040926);"></div></div><div class="pinfo"><div class="ptitle">Neon Strike Fighter</div><div class="pprice">$3,499</div></div></div>
<div class="card"><div class="badge" style="background:#ffba22;color:#040926;">Sale</div><div class="thumb"><div class="cab" style="background:linear-gradient(160deg,#ffba22,#040926);"></div></div><div class="pinfo"><div class="ptitle">Marquee Classic 60-in-1</div><div class="pprice">$2,899</div></div></div>
<div class="card"><div class="badge" style="background:#9528fa;color:#fff;">Custom</div><div class="thumb"><div class="cab" style="background:linear-gradient(160deg,#9528fa,#040926);"></div></div><div class="pinfo"><div class="ptitle">Full-Cab Racer Deluxe</div><div class="pprice">$4,199</div></div></div>
<div class="card"><div class="thumb"><div class="cab" style="background:linear-gradient(160deg,#95ff0e,#040926);"></div></div><div class="pinfo"><div class="ptitle">Pixel Vault Upright</div><div class="pprice">$2,599</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffbf3; color: #4a4a4a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffbf3; color: #4a4a4a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.2; margin: 0; color: #4a4a4a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #1f6e5e; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #fffbf3; color: #1f6e5e;
border: 1px solid #1f6e5e; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fffbf3; color: #4a4a4a;
border: 1px solid #d2cfc9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.4px; background: #e7edeb; color: #0e352d;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:flex; flex-direction:column; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fffbf3; color:#584641; box-sizing:border-box;
font-family:PostGrotesk,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 42px;
border-bottom:1px solid #e1ddda; }
.brand { font-family:MessinaSerif,Georgia,serif; font-size:19px; font-weight:400; color:#0e352d; letter-spacing:0.5px; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:13px; font-weight:500; color:#4a4a4a; }
.cart { border:1px solid #1f6e5e; color:#1f6e5e; font-size:12px; font-weight:500; padding:7px 16px; border-radius:8px; }
.hero { display:flex; align-items:center; gap:40px; padding:30px 42px 22px; }
.htext { max-width:400px; }
.htext h1 { font-family:MessinaSerif,Georgia,serif; font-size:34px; font-weight:400; color:#0e352d; margin:0 0 14px; line-height:1.15; }
.htext p { font-size:14px; color:#584641; line-height:1.55; margin:0 0 18px; }
.btn { display:inline-block; background:#1f6e5e; color:#fff; font-size:13px; font-weight:500; padding:11px 24px; border-radius:8px; }
.heroimg { width:220px; height:150px; border-radius:8px; flex-shrink:0; background:linear-gradient(150deg,#8ca6a0,#0e352d 80%); }
.section { padding:0 42px; }
.section h2 { font-family:MessinaSerif,Georgia,serif; font-size:19px; font-weight:400; color:#0e352d; margin:0 0 14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card { background:#f8f7f6; border-radius:8px; padding:12px; }
.cover { height:76px; border-radius:8px; margin-bottom:12px; position:relative; }
.swatchdot { position:absolute; bottom:8px; left:8px; width:16px; height:16px; border-radius:999px; border:2px solid #fff; }
.f1 .cover { background:#1f6e5e; } .f1 .swatchdot { background:#8ca6a0; }
.f2 .cover { background:#0e352d; } .f2 .swatchdot { background:#490f13; }
.f3 .cover { background:#8ca6a0; } .f3 .swatchdot { background:#b84a59; }
.f4 .cover { background:#174e42; } .f4 .swatchdot { background:#cbb6a7; }
.card .t { font-size:13px; font-weight:500; color:#0e352d; margin:0 0 4px; }
.card .p { font-size:12px; color:#757575; }
.trust { margin-top:auto; flex-shrink:0; display:flex; padding:14px 42px; background:#e7edeb; }
.trust span { flex:1; text-align:center; font-size:11px; font-weight:500; color:#0e352d; }
</style></head>
<body>
<nav>
<div class="brand">Hag Flokk</div>
<div class="navlinks"><span>Task Chairs</span><span>Lounge</span><span>Textiles</span><span>Contract</span></div>
<div class="cart">Enquire</div>
</nav>
<div class="hero">
<div class="htext">
<h1>Nordic ergonomics, decades in the making.</h1>
<p>Office seating engineered in Norway — a chromatic depth of forest greens and sage, built for the body that sits in it all day.</p>
<span class="btn">Explore Task Chairs</span>
</div>
<div class="heroimg"></div>
</div>
<div class="section">
<h2>Signature Seating</h2>
<div class="grid">
<div class="card f1"><div class="cover"><div class="swatchdot"></div></div><div class="t">Capisco Task Chair</div><div class="p">$895.00</div></div>
<div class="card f2"><div class="cover"><div class="swatchdot"></div></div><div class="t">Sideways Lounge</div><div class="p">$1,240.00</div></div>
<div class="card f3"><div class="cover"><div class="swatchdot"></div></div><div class="t">Tion Mesh Chair</div><div class="p">$650.00</div></div>
<div class="card f4"><div class="cover"><div class="swatchdot"></div></div><div class="t">Conventio Wing</div><div class="p">$780.00</div></div>
</div>
</div>
<div class="trust"><span>Made in Norway</span><span>10-Year Warranty</span><span>Contract & Commercial</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffef9; color: #1e2d25;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffef9; color: #1e2d25;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1e2d25; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #6b7d71; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #3d7a5a; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #fffef9; color: #3d7a5a;
border: 1px solid #3d7a5a; border-radius: 9999px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #1e2d25;
border: 1px solid #c7cac4; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7d71; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #f3f8f4; color: #3d7a5a;
border-radius: 12px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#fffef9; font-family:'Nunito','Quicksand',sans-serif; color:#3a3630;
}
*{box-sizing:border-box;}
.nav{height:64px; background:#fffef9; display:flex; align-items:center; padding:0 26px; border-bottom:1px solid #f0e6d0;}
.logo{font-size:22px; font-weight:700; color:#3d7a5a;}
.navlinks{display:flex; gap:20px; margin-left:34px; font-size:13px; font-weight:600; color:#6b6357;}
.navcta{margin-left:auto; background:#2a5c3f; color:#fffef9; border-radius:26px; padding:10px 18px; font-size:12px; font-weight:700; position:relative;}
.navcta .save{position:absolute; top:-9px; right:-10px; background:#f5c842; color:#3a3630; font-size:9px; font-weight:700; border-radius:999px; padding:2px 6px;}
.hero{display:flex; align-items:center; gap:28px; padding:22px 26px; background:#fae8d8;}
.heroText{flex:1;}
.heroText h1{font-size:32px; font-weight:800; margin:0 0 8px; color:#2a5c3f; line-height:1.2;}
.heroText p{font-size:15px; color:#5a5346; margin:0 0 14px; line-height:1.5; max-width:380px;}
.heroBtn{display:inline-block; background:#3d7a5a; color:#fff; border-radius:14px; padding:12px 22px; font-size:13px; font-weight:700;}
.heroArt{width:250px; height:170px; border-radius:20px; background:radial-gradient(circle at 35% 35%, #fff 0%, #fae8d8 60%, #f5c842 100%); position:relative; flex-shrink:0;}
.sun{position:absolute; top:16px; right:20px; width:44px; height:44px; border-radius:50%; background:#f5c842;}
.leaf{position:absolute; bottom:14px; left:20px; width:60px; height:36px; border-radius:0 50% 0 50%; background:#3d7a5a; opacity:.8;}
.section{padding:18px 26px 0;}
.sectitle{font-size:19px; font-weight:800; color:#2a5c3f; margin:0 0 6px;}
.secsub{font-size:12px; color:#7a7266; margin:0 0 12px;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.card{background:#fff; border-radius:16px; padding:10px; box-shadow:0 3px 8px rgba(61,122,90,.1); text-align:center;}
.thumb{height:70px; border-radius:12px; margin-bottom:8px;}
.t1{background:linear-gradient(135deg,#fae8d8,#f5c842);}
.t2{background:linear-gradient(135deg,#dff0e6,#3d7a5a);}
.t3{background:linear-gradient(135deg,#fff4de,#f5c842);}
.t4{background:linear-gradient(135deg,#e7f3ee,#2a5c3f);}
.pname{font-size:12px; font-weight:700; color:#3a3630; margin-bottom:3px;}
.pprice{font-size:12px; font-weight:700; color:#3d7a5a;}
.footer{position:absolute; bottom:0; left:0; right:0; background:#fae8d8; color:#7a7266; font-size:10px; text-align:center; padding:8px 0;}
</style>
<div class="nav">
<div class="logo">Happy Little Camper</div>
<div class="navlinks"><span>Wash & Bath</span><span>Skin Care</span><span>Bundles</span><span>Our Story</span></div>
<div class="navcta">Subscribe & Save<span class="save">15%</span></div>
</div>
<div class="hero">
<div class="heroText">
<h1>Gentle as the Great Outdoors</h1>
<p>Plant-powered baby wash and lotion — no chlorine, no synthetic fragrance, no petrochemicals. Just clean, happy campers.</p>
<div class="heroBtn">Shop Bath Time</div>
</div>
<div class="heroArt"><div class="sun"></div><div class="leaf"></div></div>
</div>
<div class="section">
<div class="sectitle">Camp Favorites</div>
<div class="secsub">Trusted by parents, gentle on little ones</div>
<div class="grid">
<div class="card"><div class="thumb t1"></div><div class="pname">Lavender Wash</div><div class="pprice">$12.99</div></div>
<div class="card"><div class="thumb t2"></div><div class="pname">Everyday Lotion</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb t3"></div><div class="pname">Bubble Bath Trio</div><div class="pprice">$22.99</div></div>
<div class="card"><div class="thumb t4"></div><div class="pname">Sleepy Time Set</div><div class="pprice">$28.99</div></div>
</div>
</div>
<div class="footer">© Happy Little Camper · Clean Ingredients, Happy Campers</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.25px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #787878; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.04em; background: #fa7224; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.04em; background: #ffffff; color: #121212;
border: 1px solid #fa7224; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787878; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.06em; background: #fa7224; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121212; font-family:'Inter', -apple-system, system-ui, sans-serif; color:#f0f0f0; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #1a1a1a;}
.logo{font-size:20px;font-weight:800;letter-spacing:-0.5px;color:#fff;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;}
.navlinks .on{color:#fa7224;}
.navlinks span{color:#787878;}
.cart{color:#fa7224;font-weight:700;font-size:13px;}
.hero{height:250px;display:flex;align-items:center;padding:0 32px;position:relative;overflow:hidden;background:radial-gradient(circle at 75% 40%,#1a1a1a,#121212 70%);}
.tag{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#fa7224;margin-bottom:12px;}
.h1{font-size:44px;font-weight:800;letter-spacing:-1px;line-height:1.05;margin:0 0 12px;color:#fff;width:520px;}
.sub{font-size:15px;color:#c8c8c8;margin:0 0 18px;width:420px;}
.btn{display:inline-block;background:#fa7224;color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;padding:13px 28px;border-radius:8px;}
.figbox{position:absolute;right:60px;top:40px;width:150px;height:170px;background:linear-gradient(150deg,#fa7224,#1a1a1a 65%);border-radius:12px 12px 6px 6px;box-shadow:0 0 60px rgba(250,114,36,0.25);}
.strip{display:flex;gap:8px;padding:16px 32px 0;}
.pill{background:#1a1a1a;color:#787878;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;padding:6px 14px;border-radius:9999px;}
.pill.on{background:#fa7224;color:#fff;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:150px;background:#fff;border-radius:8px;overflow:hidden;position:relative;}
.badge{position:absolute;top:6px;left:6px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;color:#fff;padding:2px 6px;border-radius:4px;background:#121212;}
.thumb{height:96px;}
.body{padding:8px;color:#121212;}
.pname{font-size:13px;font-weight:600;margin-bottom:2px;}
.pprice{font-size:15px;font-weight:700;color:#fa7224;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;border-top:1px solid #1a1a1a;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#787878;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Super7 Action F 2</div>
<div class="navlinks"><span class="on">ReAction</span><span>Ultimates</span><span>Supersize</span><span>Apparel</span></div>
<div class="cart">Cart (0)</div>
</div>
<div class="hero">
<div class="tag">Blister-Pack Edition</div>
<div class="h1">Built for the display case.</div>
<div class="sub">Limited-run collectible figures with the exact color voltage of vintage packaging art.</div>
<div class="btn">Shop This Drop</div>
<div class="figbox"></div>
</div>
<div class="strip"><div class="pill on">All</div><div class="pill">ReAction</div><div class="pill">Ultimates</div><div class="pill">Exclusive</div></div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(150deg,#fa7224,#121212);"></div><div class="body"><div class="pname">Sentinel 3.75"</div><div class="pprice">$18.00</div></div></div>
<div class="card"><span class="badge">Limited</span><div class="thumb" style="background:linear-gradient(150deg,#aaccaa,#121212);"></div><div class="body"><div class="pname">Archive Ultimate</div><div class="pprice">$45.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#121212,#fa7224);"></div><div class="body"><div class="pname">Vinyl Sentry 7"</div><div class="pprice">$65.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#1a1a1a,#787878);"></div><div class="body"><div class="pname">Collector Tee</div><div class="pprice">$34.00</div></div></div>
</div>
<div class="footer"><span>© Collector Editions</span><span>Warranty · Exclusives · Members</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #17e260; color: #000000;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #000000; color: #ffffff;
border: 1px solid #17e260; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1a1a1a; color: #ffffff;
border: 1px solid #060606; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #17e260; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#000000; font-family:'Inter', -apple-system, sans-serif; color:#fff; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#1a1a1a;}
.logo{font-family:'Montserrat',sans-serif;font-weight:700;font-size:20px;color:#fff;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:26px;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#fff;}
.searchicon{width:36px;height:36px;border-radius:9999px;background:#17e260;color:#000;display:flex;align-items:center;justify-content:center;font-size:16px;}
.hero{height:280px;display:flex;align-items:center;padding:0 32px;background:#000;}
.herotext{width:460px;}
.herotext h1{font-family:'Montserrat',sans-serif;font-weight:700;font-size:36px;line-height:1.2;letter-spacing:-0.5px;margin:0 0 14px;color:#fff;}
.herotext p{font-size:16px;color:#bbbbbb;margin:0 0 22px;max-width:380px;}
.btn{display:inline-block;background:#17e260;color:#000;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;text-transform:uppercase;padding:14px 32px;border-radius:9999px;}
.heroimg{flex:1;height:160px;background:radial-gradient(circle at 40% 50%,#17e260 0%,#000 70%);border-radius:9999px;margin-left:20px;position:relative;}
.heroimg:before{content:'';position:absolute;left:20%;top:30%;width:120px;height:14px;background:#1a1a1a;border-radius:9999px;}
.grid{display:flex;gap:16px;padding:24px 32px 0;}
.card{flex:1;background:#fff;border-radius:8px;overflow:hidden;}
.thumb{height:110px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;border-radius:4px;padding:2px 8px;color:#000;}
.body{padding:14px;color:#1a1a1a;}
.ptitle{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:600;margin:0 0 6px;}
.pprice{font-size:16px;font-weight:600;color:#1a1a1a;}
.footer{display:flex;justify-content:space-between;padding:20px 32px;color:#888888;font-size:12px;margin-top:auto;}
</style>
<div class="nav">
<div class="logo">Rolling Square</div>
<div class="navlinks"><div>Cables</div><div>Chargers</div><div>Hubs</div><div>inCharge</div></div>
<div class="searchicon">🔍</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Hack your everyday carry.</h1>
<p>Electronics-grade cables and chargers engineered like tools, not accessories.</p>
<div class="btn">Shop Now</div>
</div>
<div class="heroimg"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#17e260;"><span class="badge" style="background:#17e260;">In Stock</span></div><div class="body"><div class="ptitle">inCharge X Cable</div><div class="pprice">$34.90</div></div></div>
<div class="card"><div class="thumb" style="background:#7fd7ff;"><span class="badge" style="background:#ffc100;">Sale</span></div><div class="body"><div class="ptitle">inCharge Magnetic</div><div class="pprice">$29.90</div></div></div>
<div class="card"><div class="thumb" style="background:#ff7f7f;"><span class="badge" style="background:#7fd7ff;">New</span></div><div class="body"><div class="ptitle">Edge USB-C Hub</div><div class="pprice">$59.90</div></div></div>
</div>
<div class="footer"><span>The lifehackers company</span><span>Shipping · Returns · Warranty</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #404040;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #404040;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #404040; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #2f7bbf; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #ffffff; color: #2f7bbf;
border: 1px solid #2f7bbf; border-radius: 8px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #404040;
border: 1px solid #cfcfcf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #9bca3e; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>ImportCDs</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; font-family:Arial,'Helvetica Neue',sans-serif; color:#404040;
}
*{box-sizing:border-box;}
.topbar{ height:24px; background:#404040; color:#dedede; font-size:10px; display:flex; align-items:center; padding:0 40px; gap:20px; }
.nav{
height:56px; display:flex; align-items:center; gap:20px; padding:0 40px; border-bottom:1px solid #dedede;
}
.logo{ font-size:19px; font-weight:700; color:#2f7bbf; }
.search{
flex:1; height:34px; border:1px solid #dedede; border-radius:9999px; display:flex; align-items:center;
padding:0 4px 0 16px; background:#f5f5f5;
}
.search span{ font-size:12px; color:#737373; flex:1; }
.searchbtn{ height:26px; padding:0 16px; background:#2f7bbf; color:#fff; border-radius:9999px; font-size:11px; font-weight:700; display:flex; align-items:center; }
.navlinks{ display:flex; gap:16px; font-size:11px; font-weight:700; color:#404040; }
.strip{
background:#ebebeb; padding:8px 40px; font-size:11px; color:#404040; border-bottom:1px solid #dedede;
display:flex; gap:24px;
}
.strip b{ color:#bd2426; }
.body{ display:flex; }
.side{
width:150px; padding:16px 14px; border-right:1px solid #dedede; font-size:11px;
}
.side h4{ font-size:10px; text-transform:uppercase; letter-spacing:0.5px; color:#737373; margin:0 0 8px; }
.side div{ padding:5px 0; color:#404040; border-bottom:1px solid #f0f0f0; }
.main{ flex:1; padding:14px 20px; }
.rowhead{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.rowhead h3{ font-size:14px; margin:0; color:#404040; }
.grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.card{
border:1px solid #dedede; border-radius:8px; padding:8px; display:flex; flex-direction:column; gap:5px;
}
.cover{ width:100%; height:64px; border-radius:4px; }
.ct{ font-size:10px; font-weight:700; color:#404040; line-height:1.25; }
.ca{ font-size:9px; color:#737373; }
.pr{ font-size:11px; font-weight:700; color:#2f7bbf; }
.pr.sale{ color:#bd2426; }
.was{ font-size:9px; color:#bfbfbf; text-decoration:line-through; }
.badge{ font-size:8px; font-weight:700; color:#fff; background:#f68b1f; border-radius:2px; padding:1px 5px; display:inline-block; width:fit-content; }
.badge.sale{ background:#bd2426; }
</style>
<div class="topbar">
<span>Free shipping over $35</span><span>Track Order</span><span>Help</span>
</div>
<div class="nav">
<div class="logo">Importcds</div>
<div class="search"><span>Search artist, title, UPC…</span><div class="searchbtn">Search</div></div>
<div class="navlinks"><span>CDs</span><span>Vinyl</span><span>DVD</span><span>Blu-ray</span><span>Deals</span></div>
</div>
<div class="strip">
<span>New This Week</span><span>Top 100</span><span><b>Price Drop Alerts</b></span><span>Import & Rare</span>
</div>
<div class="body">
<div class="side">
<h4>Genre</h4>
<div>Rock</div><div>Jazz</div><div>Electronic</div><div>Classical</div><div>Soundtrack</div>
<h4 style="margin-top:12px;">Format</h4>
<div>CD</div><div>Vinyl LP</div><div>SACD</div>
</div>
<div class="main">
<div class="rowhead"><h3>Price Drops This Week</h3><span style="font-size:10px;color:#2f7bbf;">View All 480 ›</span></div>
<div class="grid">
<div class="card"><div class="cover" style="background:#2f7bbf"></div><div class="badge sale">SALE</div><div class="ct">Midnight Frequency</div><div class="ca">Import Sessions</div><div class="was">$18.99</div><div class="pr sale">$11.49</div></div>
<div class="card"><div class="cover" style="background:#f68b1f"></div><div class="ct">Analog Harvest</div><div class="ca">Field Tape Trio</div><div class="pr">$14.99</div></div>
<div class="card"><div class="cover" style="background:#404040"></div><div class="badge">NEW</div><div class="ct">Static & Silver</div><div class="ca">The Bandwidth</div><div class="pr">$12.99</div></div>
<div class="card"><div class="cover" style="background:#bd2426"></div><div class="badge sale">SALE</div><div class="ct">Concerto in Blue</div><div class="ca">City Philharmonic</div><div class="was">$22.99</div><div class="pr sale">$16.99</div></div>
<div class="card"><div class="cover" style="background:#9bca3e"></div><div class="ct">Coastline Repeat</div><div class="ca">Marina Low</div><div class="pr">$13.49</div></div>
<div class="card"><div class="cover" style="background:#595959"></div><div class="badge">RARE</div><div class="ct">Import Pressing 7"</div><div class="ca">Vinyl Only Session</div><div class="pr">$28.99</div></div>
</div>
<div class="rowhead" style="margin-top:14px;"><h3>Top 100 This Week</h3><span style="font-size:10px;color:#2f7bbf;">View All ›</span></div>
<div class="grid">
<div class="card"><div class="cover" style="background:#163959"></div><div class="ct">Ledger of Static</div><div class="ca">Room 4B</div><div class="pr">$10.99</div></div>
<div class="card"><div class="cover" style="background:#7f9fc4"></div><div class="ct">Winter Signal</div><div class="ca">Northline</div><div class="pr">$9.99</div></div>
<div class="card"><div class="cover" style="background:#e0a458"></div><div class="ct">Slow Tide Sessions</div><div class="ca">Marsh & Fen</div><div class="pr">$11.99</div></div>
<div class="card"><div class="cover" style="background:#8f4b4b"></div><div class="ct">Copper Wire Sonata</div><div class="ca">Elm Quartet</div><div class="pr">$15.99</div></div>
<div class="card"><div class="cover" style="background:#3d6b56"></div><div class="ct">Field Notes Vol. 2</div><div class="ca">Amber Grove</div><div class="pr">$13.99</div></div>
<div class="card"><div class="cover" style="background:#5c5470"></div><div class="ct">Nightbus Archive</div><div class="ca">Low Corridor</div><div class="pr">$12.49</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; background: #3097d1; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; background: #ffffff; color: #222222;
border: 1px solid #3097d1; border-radius: 4px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; background: #eeeeee; color: #555555;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#222222; font-family:'Raleway', 'Helvetica Neue', Arial, sans-serif; }
*{box-sizing:border-box;}
.nav{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #d3e0e9;}
.logo{font-size:18px;font-weight:700;}
.navlinks{display:flex;gap:16px;font-size:14px;font-weight:700;}
.navlinks .active{color:#3097d1;}
.filterbar{display:flex;gap:10px;padding:12px 24px 0;background:#eeeeee;margin:0 24px;padding:10px 12px;}
.filterbar span{font-size:13px;font-weight:700;}
.chk{width:14px;height:14px;border:1px solid #d3e0e9;display:inline-block;margin-right:4px;}
.chk.on{background:#3097d1;border-color:#3097d1;}
.body{display:flex;gap:0;padding:12px 24px 0;}
.grid{flex:1;display:flex;flex-direction:column;gap:0;}
.card{display:flex;gap:12px;border:1px solid #d3e0e9;padding:10px;align-items:center;}
.thumb{width:70px;height:70px;flex-shrink:0;}
.info{flex:1;}
.ptitle{font-size:16px;font-weight:700;}
.catno{font-family:Consolas,'Courier New',monospace;font-size:12px;color:#777777;}
.pprice{font-size:16px;font-weight:700;}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 6px;margin-left:8px;}
.badge.in{background:#dff0d8;color:#3c763d;}
.badge.low{background:#fcf8e3;color:#8a6d3b;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#f5f8fa;color:#636b6f;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:12px;border-top:1px solid #d3e0e9;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Record City Japan</div>
<div class="navlinks"><div class="active">Japanese Pressings</div><div>Used CDs</div><div>City Pop</div></div>
</div>
<div class="filterbar"><span><span class="chk on"></span>OBI Strip Only</span><span><span class="chk"></span>Mint Condition</span><span><span class="chk on"></span>First Press</span></div>
<div class="body">
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3097d1,#222);"></div><div class="info"><div class="ptitle">Plastic Love</div><div class="catno">RVL-8801 · Japan Press</div></div><div class="pprice">¥4,800<span class="badge in">In Stock</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8a6d3b,#222);"></div><div class="info"><div class="ptitle">Ride on Time</div><div class="catno">C28A-0244 · OBI Intact</div></div><div class="pprice">¥6,200<span class="badge low">Low Stock</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3c763d,#222);"></div><div class="info"><div class="ptitle">A Long Vacation</div><div class="catno">25AH-1440</div></div><div class="pprice">¥5,400<span class="badge in">In Stock</span></div></div>
</div>
</div>
<div class="footer"><span>© Record City Japan</span><span>Shipping Policy Grading Guide</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1d8bff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1d8bff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1d8bff; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1d8bff; color: #f5f5f5;
border: 1px solid #409cfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2685fd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; gap:18px; padding:0 32px; }
.brand { font-size:19px; font-weight:700; color:#1d8bff; margin:0; }
.searchbar { flex:1; max-width:420px; background:#ffffff; border:1px solid #e6e6e6; border-radius:12px; height:40px;
display:flex; align-items:center; padding:0 14px; font-size:14px; color:#222222; gap:8px; }
.btn-primary { margin-left:auto; background:#1d8bff; color:#ffffff; border:none; border-radius:8px; height:40px; padding:0 18px; font-size:14px; font-weight:700; }
.chiprow { display:flex; gap:8px; padding:8px 32px 4px; }
.chip { width:38px; height:38px; border-radius:50%; border:1.5px solid #e6e6e6; display:flex; align-items:center; justify-content:center; font-size:16px; }
.banner { margin:10px 32px 0; background:#e3f0ff; border-radius:20px; padding:16px 22px; display:flex; align-items:center; justify-content:space-between; }
.banner h2 { font-size:24px; font-weight:700; margin:0; color:#0b3f7a; }
.banner p { font-size:13px; color:#0b3f7a; margin:4px 0 0; }
.banner .badge { background:#f94239; color:#ffffff; border-radius:9999px; padding:4px 12px; font-size:12px; font-weight:700; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:16px 32px 0; }
.card { background:#ffffff; border-radius:12px; overflow:hidden; box-shadow:0 2px 16px rgba(0,0,0,0.08); }
.cover { height:120px; position:relative; }
.discount { position:absolute; top:8px; left:8px; background:#f94239; color:#ffffff; font-size:11px; font-weight:700; border-radius:9999px; padding:2px 10px; }
.cbody { padding:10px 12px 12px; display:flex; flex-direction:column; gap:4px; }
.cbody .name { font-size:14px; font-weight:700; }
.cbody .loc { font-size:12px; color:#6e6e6e; }
.rating { display:flex; align-items:center; gap:4px; font-size:12px; color:#222222; }
.rating .star { color:#ffc83b; }
.price-row { display:flex; align-items:baseline; gap:6px; margin-top:2px; }
.price-row .old { font-size:11px; color:#999999; text-decoration:line-through; }
.price-row .new { font-size:15px; font-weight:700; color:#222222; }
footer { position:absolute; bottom:0; left:0; right:0; padding:12px 32px; font-size:11px; color:#6e6e6e; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<p class="brand">Yeogiotte</p>
<div class="searchbar">🔍 Where are you headed?</div>
<button class="btn-primary">Search</button>
</nav>
<div class="chiprow">
<span class="chip">🏨</span><span class="chip">🏕️</span><span class="chip">✈️</span><span class="chip">🎟️</span><span class="chip">🚗</span>
</div>
<div class="banner">
<div><h2>Member Price Weekend</h2><p>Extra discount on same-day domestic stays</p></div>
<span class="badge">UP TO 40% OFF</span>
</div>
<div class="grid">
<div class="card">
<div class="cover" style="background:linear-gradient(160deg,#cfe6ff,#7fb8ec);"><span class="discount">-32%</span></div>
<div class="cbody"><span class="name">Sky Bay Hotel</span><span class="loc">Busan · Gwangalli</span>
<div class="rating"><span class="star">★</span>4.8 (2,140)</div>
<div class="price-row"><span class="old">₩142,000</span><span class="new">₩96,600</span></div>
</div>
</div>
<div class="card">
<div class="cover" style="background:linear-gradient(160deg,#ffe3c7,#ffb680);"><span class="discount">-20%</span></div>
<div class="cbody"><span class="name">Green Hill Pension</span><span class="loc">Gapyeong</span>
<div class="rating"><span class="star">★</span>4.6 (890)</div>
<div class="price-row"><span class="old">₩210,000</span><span class="new">₩168,000</span></div>
</div>
</div>
<div class="card">
<div class="cover" style="background:linear-gradient(160deg,#d9d3f7,#a99df0);"><span class="discount">-15%</span></div>
<div class="cbody"><span class="name">City Center Suites</span><span class="loc">Seoul · Myeongdong</span>
<div class="rating"><span class="star">★</span>4.5 (3,320)</div>
<div class="price-row"><span class="old">₩98,000</span><span class="new">₩83,300</span></div>
</div>
</div>
</div>
<footer>
<span>© Yeogiotte</span>
<span>Yeogiotte · Stay · Leisure · Flight</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #223843; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #223843;
border: 1px solid #223843; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #223843; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f7f4; font-family:'Barlow','Helvetica Neue',Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#fff;border-bottom:1px solid #dedede;}
.logo{font-size:20px;font-weight:600;color:#223843;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:500;color:#223843;}
.cta-nav{background:#223843;color:#fff;font-size:13px;font-weight:600;padding:10px 20px;border-radius:8px;}
.hero{height:196px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#f9f7f4;}
.h1{font-size:30px;font-weight:600;line-height:1.2;letter-spacing:-0.3px;margin:0 0 8px;max-width:380px;}
.sub{font-size:14px;color:#333;line-height:1.5;max-width:360px;margin:0;}
.swatches{display:flex;gap:10px;margin-top:14px;}
.sw{width:30px;height:30px;border-radius:9999px;border:2px solid #dedede;}
.sw.active{border:2px solid #223843;box-shadow:0 0 0 2px #fff,0 0 0 4px #223843;}
.mockchair{width:240px;height:150px;border-radius:12px;background:linear-gradient(135deg,#223843 0%,#136f99 60%,#f9f7f4 100%);position:relative;overflow:hidden;}
.mockchair:before{content:'';position:absolute;left:30px;top:20px;width:100px;height:100px;border-radius:9999px;background:rgba(255,255,255,0.15);}
.panel{margin:0 40px;background:#fff;border:1px solid #dedede;border-radius:12px;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;}
.paneltitle{font-size:13px;font-weight:600;color:#223843;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;}
.chips{display:flex;gap:8px;}
.chip{background:#f5f6f7;border:1px solid #e8e8e8;font-size:12px;color:#333;padding:6px 12px;border-radius:4px;}
.stepper{display:flex;align-items:center;gap:10px;}
.stepbtn{width:28px;height:28px;border-radius:8px;background:#f5f6f7;display:flex;align-items:center;justify-content:center;font-size:14px;color:#223843;}
.price{font-size:20px;font-weight:600;color:#223843;}
.grid{display:flex;gap:14px;padding:16px 40px 0;}
.card{width:196px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,0.05);}
.thumb{height:88px;}
.cbody{padding:10px 12px;}
.ctitle{font-size:14px;font-weight:600;margin:0 0 2px;}
.cprice{font-size:14px;font-weight:600;color:#223843;margin:0;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#fff;border-top:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;color:#6b6b6b;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Outer Outdoor 2</div>
<div class="navlinks"><span>Configure</span><span>Fabrics</span><span>Frames</span></div>
<div class="cta-nav">Build Yours</div>
</div>
<div class="hero">
<div>
<div class="h1">Every set, made yours.</div>
<div class="sub">Choose your fabric, frame finish, and sectional arrangement — precision joinery, configured for your deck.</div>
<div class="swatches">
<div class="sw active" style="background:#223843"></div>
<div class="sw" style="background:#1990c6"></div>
<div class="sw" style="background:#c9a06a"></div>
<div class="sw" style="background:#8a8f8f"></div>
</div>
</div>
<div class="mockchair"></div>
</div>
<div class="panel">
<div>
<div class="paneltitle">Configuration</div>
<div class="chips"><div class="chip">Teal Weave</div><div class="chip">Ash Frame</div><div class="chip">3-Seat</div></div>
</div>
<div class="stepper"><div class="stepbtn">–</div><span style="font-size:14px;">1</span><div class="stepbtn">+</div></div>
<div class="price">$2,180</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#223843,#1990c6)"></div><div class="cbody"><div class="ctitle">Lowden Lounge Chair</div><div class="cprice">$690</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c9a06a,#223843)"></div><div class="cbody"><div class="ctitle">Ridge Sectional</div><div class="cprice">$3,120</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#136f99,#223843)"></div><div class="cbody"><div class="ctitle">Slate Coffee Table</div><div class="cprice">$540</div></div></div>
</div>
<div class="footer"><span>Free swatch samples shipped</span><span>Weatherproof · 5-Year Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f3ee; color: #151515;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f3ee; color: #151515;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #151515; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #f5f3ee; color: #151515;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #444444;
border: 1px solid #bdbcb8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e4002b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f3ee; color:#2a2a2a; font-family:'Nunito Sans',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:'Archivo Narrow',Arial,sans-serif;font-size:20px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#108474;}
.navlinks{display:flex;gap:22px;font-size:13px;color:#2a2a2a;}
.searchpill{width:150px;height:34px;border-radius:9999px;background:#f9fafb;border:1px solid #e2ded4;display:flex;align-items:center;padding:0 16px;font-size:11px;color:#8a8375;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;background:#e9e5da;position:relative;}
.htext{width:430px;}
.htext h1{font-family:'Archivo Narrow',Arial,sans-serif;font-size:30px;font-weight:700;line-height:1.25;margin:0 0 14px;text-transform:uppercase;letter-spacing:0.3px;}
.htext p{font-size:14px;color:#4a463d;margin:0 0 20px;max-width:370px;}
.btn{display:inline-block;background:#108474;color:#fff;font-family:'Archivo Narrow',Arial,sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:13px 28px;border-radius:9999px;}
.rock{position:absolute;right:60px;top:34px;width:200px;height:180px;background:radial-gradient(circle at 30% 30%,#d8cfbb,#a89cc8 80%);border-radius:38% 62% 55% 45%;}
.hold{position:absolute;width:36px;height:30px;background:#fbcd0a;border-radius:50% 50% 40% 40%;}
.h1{right:150px;top:60px;}
.h2{right:100px;top:120px;}
.h3{right:180px;top:130px;}
.sec{padding:22px 40px 0;}
.sectitle{font-family:'Archivo Narrow',Arial,sans-serif;font-size:18px;font-weight:700;margin-bottom:14px;text-transform:uppercase;letter-spacing:0.3px;}
.grid{display:flex;gap:16px;}
.card{width:216px;background:#f9fafb;border:1px solid #e2ded4;border-radius:8px;padding:14px;position:relative;}
.badge{position:absolute;top:10px;left:10px;font-size:9px;font-weight:700;text-transform:uppercase;color:#fff;padding:3px 9px;border-radius:9999px;}
.b-sale{background:#e4002b;}
.b-new{background:#108474;}
.thumb{width:100%;height:88px;border-radius:8px;margin:16px 0 10px;}
.cardtitle{font-size:14px;font-weight:600;}
.cardprice{font-size:13px;color:#108474;margin-top:4px;font-weight:700;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#8a8375;background:#e9e5da;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Metolius</div>
<div class="navlinks"><span>Holds</span><span>Training Boards</span><span>Chalk</span></div>
<div class="searchpill">Search gear...</div>
</div>
<div class="hero">
<div class="htext">
<h1>Climb-ready clarity.</h1>
<p>Hardware built for the gap between alpine severity and gym-friendly color.</p>
<div class="btn">Shop Climbing Holds</div>
</div>
<div class="rock">
<div class="hold h1"></div>
<div class="hold h2"></div>
<div class="hold h3"></div>
</div>
</div>
<div class="sec">
<div class="sectitle">Training Essentials</div>
<div class="grid">
<div class="card"><span class="badge b-new">New</span><div class="thumb" style="background:linear-gradient(135deg,#fbcd0a,#108474);"></div><div class="cardtitle">Simulator 3D Training Board</div><div class="cardprice">$219.00</div></div>
<div class="card"><span class="badge b-sale">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#e4002b,#a89cc8);"></div><div class="cardtitle">Rock Rings Hangboard</div><div class="cardprice">$59.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#108474,#a89cc8);"></div><div class="cardtitle">Super Chalk, 8oz</div><div class="cardprice">$9.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a89cc8,#108474);"></div><div class="cardtitle">PPP Project Hold Set</div><div class="cardprice">$79.00</div></div>
</div>
</div>
<div class="footer"><span>© Made for the Vertical</span><span>Sizing Guide · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #21afbf; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #21afbf; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c95a2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #21afbf; color: #000000;
border: 1px solid #1c95a2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #21afbf; color: #000000;
border: 1px solid #43bac8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #20abba; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#16181d; box-sizing:border-box;
font-family:"Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #eef0f2; }
.brand { font-size:17px; font-weight:700; margin:0; color:#16181d; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; color:#23242a; }
.btn-primary { background:#21afbf; color:#ffffff; border:none; border-radius:8px; height:40px;
padding:0 16px; font-weight:500; font-size:14px; display:flex; align-items:center; }
.btn-text { background:transparent; border:none; color:#1c95a2; font-weight:500; font-size:14px; }
.hero { padding:38px 32px 22px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; }
.hero .kicker { font-size:13px; font-weight:600; color:#1c95a2; letter-spacing:0.02em; }
.hero h1 { font-size:34px; font-weight:700; line-height:1.3; margin:0; color:#16181d; }
.hero h1 span { color:#21afbf; }
.hero p { font-size:14px; color:#70798f; margin:0; max-width:480px; }
.row { display:flex; gap:10px; margin-top:4px; }
.btn-lg { background:#21afbf; color:#ffffff; border:none; border-radius:10px; padding:11px 22px;
font-weight:600; font-size:14px; }
.btn-lg.ghost { background:#ffffff; color:#23242a; border:1px solid #dfe3e8; }
.gallery { padding:16px 32px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tpl { border-radius:12px; overflow:hidden; border:1px solid #eef0f2; background:#ffffff; }
.tpl .thumb { height:212px; position:relative; }
.tpl .meta { padding:9px 11px; display:flex; flex-direction:column; gap:3px; }
.tpl .meta .t { font-size:12px; font-weight:600; color:#16181d; }
.tpl .meta .c { font-size:11px; color:#70798f; }
.th1 { background:linear-gradient(160deg,#21afbf 0%,#8fe0e8 100%); }
.th1::after { content:''; position:absolute; left:14px; right:14px; top:20px; height:8px; border-radius:4px; background:rgba(255,255,255,0.85); }
.th1::before { content:''; position:absolute; left:14px; top:38px; width:60px; height:60px; border-radius:10px; background:rgba(255,255,255,0.3); }
.th2 { background:#fdf1e0; }
.th2::after { content:''; position:absolute; left:16px; right:60px; top:24px; height:10px; border-radius:5px; background:#f0a63e; }
.th2::before { content:''; position:absolute; right:16px; bottom:16px; width:70px; height:44px; border-radius:8px;
background:#ffffff; box-shadow:0 4px 10px rgba(0,0,0,0.06); }
.th3 { background:#eef2ff; }
.th3::after { content:''; position:absolute; left:20px; top:22px; width:44px; height:44px; border-radius:50%; background:#7b8cf0; }
.th3::before { content:''; position:absolute; left:20px; top:74px; right:20px; height:8px; border-radius:4px; background:#c6cdf5; }
.th4 { background:#0c1220; }
.th4::after { content:''; position:absolute; left:16px; top:18px; right:16px; height:10px; border-radius:5px; background:#21afbf; }
.th4::before { content:''; position:absolute; left:16px; top:36px; width:70px; height:26px; border-radius:4px; background:rgba(255,255,255,0.15); }
.tags { padding:18px 32px 0; display:flex; gap:8px; justify-content:center; }
.tag { font-size:12px; font-weight:500; color:#23242a; background:#f4f6f8; border-radius:9999px; padding:6px 14px; }
.tag.active { background:#21afbf; color:#ffffff; }
footer { border-top:1px solid #eef0f2; padding:12px 32px; display:flex; justify-content:space-between;
align-items:center; font-size:11px; color:#70798f; position:absolute; bottom:0; left:0; right:0; }
</style></head>
<body>
<nav>
<p class="brand">MiriCanvas</p>
<div class="navlinks"><span>Templates</span><span>Business</span><span>Pricing</span></div>
<div style="display:flex; gap:10px; align-items:center;"><span class="btn-text">Log in</span><button class="btn-primary">Start for free</button></div>
</nav>
<section class="hero">
<span class="kicker">Every design, done in minutes</span>
<h1>Complex design, <span>finished in 3 minutes</span></h1>
<p>Pick a template, swap the words and photos, and publish — no design skills required.</p>
<div class="row">
<button class="btn-lg">Browse templates</button>
<button class="btn-lg ghost">See business plans</button>
</div>
</section>
<section class="tags">
<span class="tag active">Card news</span>
<span class="tag">Presentation</span>
<span class="tag">Poster</span>
<span class="tag">Social media</span>
<span class="tag">Printables</span>
</section>
<section class="gallery">
<div class="tpl"><div class="thumb th1"></div><div class="meta"><div class="t">Team Update Deck</div><div class="c">Presentation</div></div></div>
<div class="tpl"><div class="thumb th2"></div><div class="meta"><div class="t">Autumn Sale Poster</div><div class="c">Poster</div></div></div>
<div class="tpl"><div class="thumb th3"></div><div class="meta"><div class="t">Product Launch Card</div><div class="c">Social media</div></div></div>
<div class="tpl"><div class="thumb th4"></div><div class="meta"><div class="t">Weekly Newsletter</div><div class="c">Card news</div></div></div>
</section>
<footer>
<span>© MiriCanvas</span>
<span>MiriCanvas · Templates · Business · Help Center</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #3c4453;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #3c4453;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; margin: 0; color: #3c4453; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #818182; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #00a1e0; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #ffffff; color: #00a1e0;
border: 1px solid #00a1e0; border-radius: 4px;
padding: 10px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #3c4453;
border: 1px solid #d6d8db; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #818182; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #00a1e0; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>iRobot</title>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;font-family:'Trebuchet MS',Arial,sans-serif;color:#444444;}
*{box-sizing:border-box;}
.promo{position:absolute;top:0;left:0;width:960px;height:30px;background:#ebc172;color:#3c4453;font-size:12px;font-weight:700;letter-spacing:0.5px;display:flex;align-items:center;justify-content:center;}
.nav{position:absolute;top:30px;left:0;width:960px;height:64px;background:#fff;border-bottom:1px solid #d6d8db;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-weight:600;font-size:19px;color:#3c4453;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;}
.navcta{background:#00a1e0;color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;border-radius:4px;padding:9px 18px;}
.hero{position:absolute;top:94px;left:0;width:960px;height:230px;background:#3c4453;display:flex;align-items:center;padding:0 44px;}
.eyebrow{color:#94e1ff;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;}
.hero h1{color:#fff;font-size:34px;font-weight:700;margin:0 0 14px 0;width:440px;line-height:1.15;}
.btnrow{display:flex;gap:12px;}
.btn-primary{background:#00a1e0;color:#fff;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:1px;border-radius:4px;padding:12px 28px;}
.btn-ghost{border:2px solid #fff;color:#fff;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:1px;border-radius:4px;padding:10px 26px;}
.robotart{position:absolute;right:80px;top:60px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5a6273,#3c4453);border:3px solid #00a1e0;}
.robotart::after{content:'';position:absolute;top:60px;left:60px;width:30px;height:30px;border-radius:50%;background:#00a1e0;}
.chiprow{position:absolute;top:340px;left:36px;width:888px;height:40px;display:flex;gap:12px;}
.chip{background:#f9f9f9;border:1px solid #d6d8db;border-radius:9999px;font-size:13px;font-weight:600;padding:8px 18px;color:#3c4453;}
.chip.active{background:#00a1e0;color:#fff;border:none;}
.grid{position:absolute;top:398px;left:36px;width:888px;height:206px;display:flex;gap:18px;}
.card{width:207px;background:#f7f7f7;border:1px solid #d6d8db;border-radius:12px;padding:16px;position:relative;}
.imgbox{width:175px;height:100px;background:#f9f9f9;border-radius:8px;margin-bottom:10px;position:relative;}
.imgbox::after{content:'';position:absolute;top:26px;left:56px;width:60px;height:60px;border-radius:50%;background:#3c4453;}
.featbadge{position:absolute;top:6px;left:6px;background:#00a1e0;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;border-radius:4px;padding:3px 6px;}
.title{font-size:18px;font-weight:600;color:#3c4453;margin-bottom:6px;}
.price{font-size:24px;font-weight:700;color:#3c4453;}
</style>
<div class="promo">FALL SALE — SAVE UP TO $200 ON SELECT ROBOTS</div>
<div class="nav">
<div class="logo">Irobot</div>
<div class="navlinks"><span>Vacuums</span><span>Mops</span><span>Combo</span><span>Parts</span></div>
<div class="navcta">Shop Now</div>
</div>
<div class="hero">
<div class="eyebrow">For Pet Owners</div>
<h1>Autonomous cleaning, engineered like it matters.</h1>
<div class="btnrow">
<div class="btn-primary">Shop Robots</div>
<div class="btn-ghost">Compare Models</div>
</div>
<div class="robotart"></div>
</div>
<div class="chiprow">
<div class="chip active">All</div>
<div class="chip">Pet Owners</div>
<div class="chip">Large Homes</div>
<div class="chip">Budget</div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox"><div class="featbadge">Self-Empty</div></div>
<div class="title">Roomba Combo 10 Max</div>
<div class="price">$1,099</div>
</div>
<div class="card">
<div class="imgbox"><div class="featbadge">AI Nav</div></div>
<div class="title">Roomba j9+</div>
<div class="price">$899</div>
</div>
<div class="card">
<div class="imgbox"></div>
<div class="title">Braava jet m6 Mop</div>
<div class="price">$449</div>
</div>
<div class="card">
<div class="imgbox"></div>
<div class="title">Roomba 694 Essential</div>
<div class="price">$279</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1f1f1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1f1f1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1f1f1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.5px; background: #ff6f61; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.5px; background: #ffffff; color: #1f1f1f;
border: 1px solid #ff6f61; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1f1f1f;
border: 1px solid #e5e5e5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 1.2px; background: #899541; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Jost,Arial,sans-serif; color:#2b2b2b; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dcdcdc;}
.logo{font-size:19px;font-weight:600;color:#1f1f1f;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:400;color:#2b2b2b;}
.hero{height:250px;display:flex;background:#ffe2df;}
.herotext{width:46%;padding:0 36px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#899541;margin-bottom:12px;}
.h1{font-size:38px;font-weight:600;line-height:1.15;color:#1f1f1f;margin:0 0 12px;}
.sub{font-size:13px;color:#2b2b2b;margin:0 0 18px;max-width:300px;}
.cta{display:inline-block;background:#ff6f61;color:#fff;font-size:13px;font-weight:600;padding:13px 26px;border-radius:8px;}
.heroimg{width:54%;position:relative;background:linear-gradient(160deg,#f5f5f5,#ffe2df 70%);}
.pot{position:absolute;left:70px;bottom:40px;width:110px;height:100px;border-radius:6px 6px 40px 40px;background:linear-gradient(160deg,#ff6f61,#899541);}
.pot2{position:absolute;left:210px;bottom:40px;width:80px;height:70px;border-radius:6px 6px 30px 30px;background:linear-gradient(160deg,#95a054,#28bb74);}
.badge{position:absolute;top:20px;right:30px;background:#ff9736;color:#1f1f1f;font-size:11px;font-weight:600;text-transform:uppercase;padding:6px 14px;border-radius:8px;}
.sec{padding:22px 36px 0;}
.secTitle{font-size:18px;font-weight:600;color:#1f1f1f;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border-radius:12px;padding:12px;position:relative;border:1px solid #e5e5e5;}
.badge2{position:absolute;top:10px;left:10px;background:#28bb74;color:#fff;font-size:10px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;padding:3px 8px;border-radius:8px;z-index:2;}
.thumb{height:100px;border-radius:8px;margin-bottom:10px;}
.pname{font-size:14px;font-weight:600;color:#1f1f1f;}
.pmeta{font-size:11px;color:#767676;margin-top:3px;}
.pprice{font-size:14px;font-weight:600;color:#ff6f61;margin-top:6px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Vivaterra</div>
<div class="navlinks"><span>Garden</span><span>Home</span><span>Lighting</span><span>Sale</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Handcrafted, Earth-Toned</div>
<div class="h1">Sun-warmed design for home and garden.</div>
<div class="sub">Terracotta pots and design-forward homewares, shaped by the earth.</div>
<div class="cta">Shop the Collection</div>
</div>
<div class="heroimg"><div class="pot"></div><div class="pot2"></div><div class="badge">Bestseller</div></div>
</div>
<div class="sec">
<div class="secTitle">Garden Favorites</div>
<div class="grid">
<div class="card"><span class="badge2">In Stock</span><div class="thumb" style="background:linear-gradient(135deg,#ff6f61,#899541)"></div><div class="pname">Kiln-Fired Terracotta Pot</div><div class="pmeta">Handcrafted</div><div class="pprice">$68.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#95a054,#001f39)"></div><div class="pname">Olive Branch Wreath</div><div class="pmeta">Preserved</div><div class="pprice">$54.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#28bb74,#ffe2df)"></div><div class="pname">Rattan Planter Basket</div><div class="pmeta">Handwoven</div><div class="pprice">$42.00</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #555555;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #555555;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: 0.5px; background: transparent; color: #108474;
border: 1px solid #108474; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #555555;
border: 1px solid #dedede; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: 0.8px; background: #edf5f5; color: #108474;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{
width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;
background:#fafafa;color:#747471;font-family:'Nunito Sans',Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box;}
.nav{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#fafafa;}
.logo{font-family:Baskerville,'Baskerville Old Face',Georgia,serif;font-size:24px;color:#108474;letter-spacing:.5px;}
.navlinks{display:flex;gap:26px;font-size:12px;font-weight:700;color:#555555;text-transform:uppercase;letter-spacing:.6px;}
.hero{display:flex;padding:22px 40px 30px;gap:36px;align-items:center;}
.hero-txt{width:340px;}
.hero-txt .eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#c4590c;font-weight:700;margin-bottom:8px;}
.hero-txt h1{font-family:Baskerville,'Baskerville Old Face',Georgia,serif;font-size:38px;font-weight:400;line-height:1.15;color:#333;margin:0 0 12px;}
.hero-txt p{font-size:14px;line-height:1.6;color:#747471;margin:0 0 16px;}
.cta{display:inline-block;background:#108474;color:#fff;padding:11px 26px;font-size:12px;font-weight:700;letter-spacing:.4px;border-radius:4px;text-transform:uppercase;}
.hero-img{flex:1;height:230px;border-radius:8px;background:linear-gradient(135deg,#108474,#0c6b5e);position:relative;overflow:hidden;}
.hero-img .band{position:absolute;bottom:0;left:0;right:0;height:70px;background:#0a5148;}
.hero-img .strap{position:absolute;top:36px;left:60px;width:220px;height:36px;background:#c4590c;border-radius:4px;transform:rotate(-6deg);box-shadow:0 8px 18px rgba(0,0,0,.25);}
.hero-img .stitch{position:absolute;top:44px;left:70px;width:200px;height:20px;border:1px dashed rgba(255,255,255,.5);border-radius:4px;transform:rotate(-6deg);}
.badge-gold{position:absolute;top:16px;right:24px;background:#fbcd0a;color:#333;font-size:10px;font-weight:800;padding:6px 12px;border-radius:4px;text-transform:uppercase;}
.section-title{padding:0 40px;font-family:Baskerville,Georgia,serif;font-size:22px;color:#333;margin:6px 0 14px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:0 40px;}
.card{background:#ffffff;border-radius:8px;padding:12px;}
.thumb{aspect-ratio:1/1;height:96px;border-radius:4px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;}
.t1{background:linear-gradient(160deg,#c4590c,#a8480a);}
.t2{background:linear-gradient(160deg,#108474,#0c6b5e);}
.t3{background:linear-gradient(160deg,#a89cc8,#8d7fb5);}
.t4{background:linear-gradient(160deg,#ffa303,#e08f00);}
.note{width:44px;height:60px;background:rgba(255,255,255,.85);border-radius:2px;}
.title{font-family:Baskerville,Georgia,serif;font-size:14px;color:#333;margin:0 0 3px;}
.variant{font-size:11px;color:#888;margin:0 0 4px;}
.price{font-size:13px;font-weight:700;color:#108474;}
.stars{color:#fbcd0a;font-size:11px;}
</style>
<div class="nav">
<div class="logo">Galen Leather</div>
<div class="navlinks"><span>Notebooks</span><span>Pens</span><span>Leather Goods</span><span>Ink</span><span>Gifts</span></div>
</div>
<div class="hero">
<div class="hero-txt">
<div class="eyebrow">Handstitched in Istanbul</div>
<h1>Leather goods built to age with you</h1>
<p>Choose your leather, your thread color, your monogram. Every stitch is placed by hand along the Bosphorus.</p>
<a class="cta">Shop Leather Goods</a>
</div>
<div class="hero-img">
<div class="badge-gold">New Arrival</div>
<div class="strap"></div><div class="stitch"></div>
<div class="band"></div>
</div>
</div>
<div class="section-title">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb t1"><div class="note"></div></div><div class="title">Ottoman Leather Journal</div><div class="variant">A5 · Cognac</div><div class="price">$68.00</div></div>
<div class="card"><div class="thumb t2"><div class="note"></div></div><div class="title">Bosphorus Zip Portfolio</div><div class="variant">Teal · Gold Thread</div><div class="price">$142.00</div><div class="stars">★★★★★</div></div>
<div class="card"><div class="thumb t3"><div class="note"></div></div><div class="title">Traveler's Pen Case</div><div class="variant">Lavender · 6-Slot</div><div class="price">$54.00</div></div>
<div class="card"><div class="thumb t4"><div class="note"></div></div><div class="title">Fountain Pen Ink — Amber</div><div class="variant">50ml Bottle</div><div class="price">$22.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0066cc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0066cc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b5e3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0066cc; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0066cc; color: #f5f5f5;
border: 1px solid #277dd3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b5e3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e66d2; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#151515; box-sizing:border-box;
font-family:"Red Hat Text", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #d2d2d2; background:#ffffff; }
.brand { font-family:"Red Hat Display", sans-serif; font-size:18px; font-weight:600; margin:0; color:#151515; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#4d4d4d; }
.btn-primary { background:#0066cc; color:#ffffff; border:none; border-radius:999px;
padding:8px 22px; font-size:14px; font-weight:400; white-space:nowrap; }
.layout { display:flex; height:calc(640px - 56px); }
.sidebar { width:210px; background:#f5f5f5; border-right:1px solid #d2d2d2; padding:20px 0; }
.sidebar .group-label { font-size:11px; text-transform:uppercase; letter-spacing:0.05em;
color:#4d4d4d; padding:6px 20px; margin-top:8px; }
.sidebar .item { font-size:14px; color:#151515; padding:7px 20px; display:flex; align-items:center; gap:8px; }
.sidebar .item.active { background:#e7f1fa; border-left:3px solid #0066cc; color:#0066cc; font-weight:600; padding-left:17px; }
.dot { width:6px; height:6px; border-radius:9999px; background:#8a8d90; flex-shrink:0; }
.main { flex:1; padding:28px 32px; overflow:hidden; }
.main h1 { font-family:"Red Hat Display", sans-serif; font-size:30px; font-weight:600; line-height:1.3;
margin:0 0 6px; color:#151515; }
.main .desc { font-size:14px; color:#4d4d4d; line-height:1.5; margin:0 0 22px; max-width:560px; }
.variants { display:flex; gap:12px; margin-bottom:24px; }
.btn-demo { border-radius:999px; padding:8px 24px; font-size:14px; font-family:"Red Hat Text", sans-serif; }
.btn-demo.primary { background:#0066cc; color:#ffffff; }
.btn-demo.secondary { background:#ffffff; color:#0066cc; border:1px solid #0066cc; }
.btn-demo.plain { background:transparent; color:#151515; text-decoration:underline; }
.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.card { background:#ffffff; border:1px solid #d2d2d2; border-radius:16px; padding:18px; }
.card .tag { font-size:11px; color:#0066cc; text-transform:uppercase; letter-spacing:0.04em; font-weight:600; }
.card h3 { font-family:"Red Hat Display", sans-serif; font-size:16px; font-weight:600; margin:8px 0 6px; color:#151515; }
.card p { font-size:13px; color:#4d4d4d; margin:0; line-height:1.5; }
</style></head>
<body>
<nav>
<p class="brand">PatternFly</p>
<div class="navlinks"><span>Get started</span><span>Components</span><span>Patterns</span><span>Contribute</span></div>
<button class="btn-primary">Get started</button>
</nav>
<div class="layout">
<aside class="sidebar">
<div class="group-label">Foundations</div>
<div class="item"><span class="dot"></span>Colors</div>
<div class="item"><span class="dot"></span>Typography</div>
<div class="item"><span class="dot"></span>Spacing</div>
<div class="group-label">Components</div>
<div class="item active"><span class="dot"></span>Button</div>
<div class="item"><span class="dot"></span>Card</div>
<div class="item"><span class="dot"></span>Data list</div>
<div class="item"><span class="dot"></span>Form</div>
<div class="group-label">Patterns</div>
<div class="item"><span class="dot"></span>Empty state</div>
</aside>
<main class="main">
<h1>Button</h1>
<p class="desc">Consistent, accessible action components for PatternFly — shared standards and working code for enterprise product teams.</p>
<div class="variants">
<button class="btn-demo primary">Primary</button>
<button class="btn-demo secondary">Secondary</button>
<button class="btn-demo plain">Link</button>
</div>
<div class="cards">
<div class="card">
<span class="tag">Guidance</span>
<h3>Consistent across products</h3>
<p>Share standards, patterns, and working code across cross-functional teams.</p>
</div>
<div class="card">
<span class="tag">Accessible</span>
<h3>Built for enterprise scale</h3>
<p>Every component ships with accessibility guidance baked into the pattern.</p>
</div>
</div>
</main>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #06b87f; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #06b87f; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2070eb; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #06b87f; color: #000000;
border: 1px solid #2070eb; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #06b87f; color: #000000;
border: 1px solid #2cc292; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0aac90; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Pretendard", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { display:flex; align-items:center; gap:16px; padding:12px 30px; }
.brand { font-size:16px; font-weight:700; margin:0; }
.search { flex:1; max-width:420px; height:44px; border-radius:52px; background:#fff; border:1px solid #e0e0e0;
padding:10px 0 10px 20px; font-size:16px; color:#0f0f0f; }
.catbtn { background:#06b87f; color:#fff; border-radius:8px 8px 0 0; padding:11px 16px; font-size:14px; font-weight:700; }
.navlinks { display:flex; gap:14px; font-size:13px; color:#333; }
.toprow { display:flex; padding:0 30px 10px; gap:10px; }
.rfilter { flex:0 0 130px; }
.rfilter .f { font-size:12px; color:#333; padding:5px 0; border-bottom:1px solid #ebebeb; }
.rfilter .f.on { color:#2070eb; }
table { width:100%; border-collapse:collapse; }
thead td { font-size:11px; color:#767676; padding:6px 0; border-bottom:1px solid #e0e0e0; }
tbody td { font-size:12px; padding:8px 10px 8px 0; border-bottom:1px solid #ebebeb; vertical-align:middle; }
.thumb { width:44px; height:44px; background:#f8f8f8; border:1px solid #e0e0e0; display:inline-block; margin-right:8px; vertical-align:middle; }
.price { font-size:13px; font-weight:700; color:#0f0f0f; }
.bulk { background:#f7faff; color:#0e68f0; font-size:11px; font-weight:700; border-radius:4px; padding:2px 6px; }
</style></head>
<body>
<nav>
<p class="brand">Danawa</p>
<div class="search">graphics card RTX 4070</div>
<button class="catbtn">All Categories</button>
<div class="navlinks"><span>Sign In</span><span>Wishlist</span><span>Recent</span></div>
</nav>
<div style="display:flex; padding:0 30px;">
<div class="rfilter">
<div class="f on">Most Popular</div>
<div class="f">Price: Low to High</div>
<div class="f">Newest</div>
<div class="f">Most Reviewed</div>
</div>
<div style="flex:1">
<table>
<thead><tr><td></td><td>Product</td><td>Price</td><td>Buying Info</td></tr></thead>
<tbody>
<tr><td><span class="thumb"></span></td><td>GeForce RTX 4070 SUPER D6 12GB — Best Price</td><td class="price">$649.00</td><td>930+ bought</td></tr>
<tr><td><span class="thumb"></span></td><td>ASUS TUF Gaming RTX 4070 OC D6 12GB</td><td class="price">$712.30</td><td><span class="bulk">Bulk Order</span></td></tr>
<tr><td><span class="thumb"></span></td><td>MSI Ventus RTX 4070 Ti D6X 12GB</td><td class="price">$889.00</td><td>412+ bought</td></tr>
<tr><td><span class="thumb"></span></td><td>GIGABYTE Eagle RTX 4070 D6 12GB</td><td class="price">$631.90</td><td>Free Shipping</td></tr>
<tr><td><span class="thumb"></span></td><td>COLORFUL iGame RTX 4070 D6 White</td><td class="price">$659.00</td><td>187+ bought</td></tr>
</tbody>
</table>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf8f5; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf8f5; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.2; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.1em; background: #108474; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.1em; background: #faf8f5; color: #141414;
border: 1px solid #108474; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #faf8f5; color: #141414;
border: 1px solid #e2e2e2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.18em; background: #d9e8e3; color: #108474;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#faf8f5; font-family:'Jost','Nunito Sans',Arial,sans-serif; color:#555555; }
*{box-sizing:border-box;}
.announce{height:32px;background:#275173;color:#fff;font-size:11px;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #eeeeee;}
.logo{font-family:'Sackers Gothic Std','Jost',sans-serif;font-size:18px;letter-spacing:2px;text-transform:uppercase;color:#141414;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:#141414;}
.hero{height:200px;display:flex;align-items:center;padding:0 30px;gap:24px;}
.heroimg{width:180px;height:170px;border-radius:8px;background:linear-gradient(160deg,#fbcd0a,#c18952);flex-shrink:0;}
.herotext .eyebrow{font-family:'Sackers Gothic Std','Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#108474;margin-bottom:8px;}
.herotext h1{font-family:'Sackers Gothic Std','Butler',Georgia,serif;font-size:30px;font-weight:400;letter-spacing:2px;text-transform:uppercase;color:#141414;margin:0 0 12px;}
.btn{display:inline-block;background:#108474;color:#fff;font-size:12px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;padding:14px 30px;border-radius:4px;}
.swrow{display:flex;gap:16px;padding:0 30px 8px;}
.swblock{text-align:center;}
.sw{width:24px;height:24px;border-radius:50%;border:2px solid #e2e2e2;margin:0 auto 6px;}
.swlabel{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7b7b7b;}
.secTitle{font-family:'Butler','Libre Caslon Text',Georgia,serif;font-size:20px;padding:14px 30px 10px;color:#141414;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:190px;background:#f9fafb;border-radius:8px;overflow:hidden;position:relative;}
.thumb{height:140px;}
.badge{position:absolute;top:8px;left:8px;background:#c18952;color:#141414;font-size:10px;font-weight:400;letter-spacing:1px;text-transform:uppercase;padding:3px 8px;z-index:2;}
.cardbody{padding:10px 12px;}
.ctitle{font-size:14px;font-weight:600;margin-bottom:4px;}
.cprice{font-size:20px;color:#141414;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#275173;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:#fff;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">Free shipping on orders over $50</div>
<div class="nav">
<div class="logo">Simplified</div>
<div class="navlinks"><div>Planners</div><div>Notebooks</div><div>Accessories</div></div>
</div>
<div class="hero">
<div class="heroimg"></div>
<div class="herotext">
<div class="eyebrow">2026 Collection</div>
<h1>Write it down.</h1>
<div class="btn">Shop Planners</div>
</div>
</div>
<div class="swrow">
<div class="swblock"><div class="sw" style="background:#fbcd0a;"></div><div class="swlabel">Sunshine</div></div>
<div class="swblock"><div class="sw" style="background:#d16294;"></div><div class="swlabel">Rose</div></div>
<div class="swblock"><div class="sw" style="background:#a89cc8;"></div><div class="swlabel">Lavender</div></div>
<div class="swblock"><div class="sw" style="background:#c18952;"></div><div class="swlabel">Bronze</div></div>
<div class="swblock"><div class="sw" style="background:#c1e6e6;"></div><div class="swlabel">Mint</div></div>
<div class="swblock"><div class="sw" style="background:#3ea36a;"></div><div class="swlabel">Sage</div></div>
</div>
<div class="secTitle">This Season's Editions</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(160deg,#fbcd0a,#faf8f5);"></div><div class="cardbody"><div class="ctitle">Undated Daily Planner</div><div class="cprice">$58</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#d16294,#faf8f5);"></div><div class="cardbody"><div class="ctitle">Weekly Notepad</div><div class="cprice">$22</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#3ea36a,#faf8f5);"></div><div class="cardbody"><div class="ctitle">Goal Setting Journal</div><div class="cprice">$34</div></div></div>
</div>
<div class="footer"><span>© Simplified</span><span>Shop · Learn · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #333333;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #333333;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #333333; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #6d7278; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #333333;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d7278; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #338fb1; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Nunito Sans',Arial,Helvetica,sans-serif; color:#555555; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e9e9e9;}
.logo{font-size:20px;font-weight:700;color:#108474;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:600;color:#555555;}
.navlinks .active{color:#108474;border-bottom:2px solid #108474;padding-bottom:20px;}
.hero{height:230px;background:#f9fafb;display:flex;align-items:center;padding:0 44px;}
.herotext{width:52%;}
.herotext h1{font-family:'EB Garamond','Baskerville',serif;font-size:36px;font-weight:600;color:#333333;margin:0 0 14px;letter-spacing:-0.4px;}
.herotext p{font-size:15px;color:#555555;margin:0 0 18px;max-width:320px;}
.cta{display:inline-block;background:#108474;color:#fff;font-size:16px;font-weight:600;letter-spacing:0.3px;padding:14px 28px;border-radius:8px;}
.heroshape{width:40%;height:170px;border-radius:12px;background:radial-gradient(circle at 35% 35%,#12b985,#108474 75%);}
.section{padding:18px 44px 0;}
.seclabel{font-size:20px;font-weight:700;color:#333333;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:190px;background:#fafafa;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.06);overflow:hidden;}
.thumb{height:100px;background:#fff;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#338fb1;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.cardbody{padding:10px 12px 12px;}
.ptitle{font-size:15px;font-weight:600;color:#333333;}
.pprice{font-size:14px;color:#555555;margin-top:4px;}
.stars{color:#fed716;font-size:13px;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Salt Oral Care</div>
<div class="navlinks"><div class="active">Toothbrushes</div><div>Toothpaste</div><div>Whitening</div><div>Bundles</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Oral care that feels like self-care.</h1>
<p>Clinical-grade formulas with a little sea salt spark, minus the sterile aisle.</p>
<div class="cta">Shop Best Sellers</div>
</div>
<div class="heroshape"></div>
</div>
<div class="section">
<div class="seclabel">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge">New</span></div><div class="cardbody"><div class="ptitle">Sonic Toothbrush</div><div class="pprice">$79.00</div><div class="stars">★★★★★</div></div></div>
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="ptitle">Whitening Toothpaste</div><div class="pprice">$12.00</div><div class="stars">★★★★☆</div></div></div>
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="ptitle">Starter Bundle</div><div class="pprice">$95.00</div><div class="stars">★★★★★</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1b1b1b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1b1b1b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; margin: 0; color: #1b1b1b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: 0.2px; margin: 0; color: #8d8d8d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #100aed; color: #ffffff;
border: none; border-radius: 4px; padding: 13px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #1b1b1b;
border: 1px solid #100aed; border-radius: 4px;
padding: 12px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1b1b1b;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8d8d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.33; letter-spacing: 0.6px; background: #f1f1f1; color: #32373c;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'IBM Plex Sans',Arial,sans-serif; color:#1b1b1b; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #ececec;}
.logo{font-size:19px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.hero{height:230px;background:#000e1a;display:flex;align-items:center;padding:0 32px;}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#100aed;margin-bottom:10px;}
.heroText{width:54%;}
.heroText h1{color:#fff;font-size:38px;font-weight:700;letter-spacing:-.5px;margin:0 0 14px;line-height:1.1;}
.heroText p{color:#c8c8c8;font-size:14px;max-width:340px;margin:0 0 14px;}
.btnrow{display:flex;gap:10px;}
.btn-p{background:#100aed;color:#fff;font-size:15px;font-weight:600;padding:13px 26px;border-radius:4px;}
.btn-g{background:transparent;color:#100aed;border:1.5px solid #100aed;font-size:15px;font-weight:600;padding:12px 25px;border-radius:4px;}
.heroImg{width:46%;height:180px;position:relative;}
.printer{position:absolute;right:60px;top:15px;width:150px;height:150px;border-radius:4px;background:linear-gradient(160deg,#282828,#000e1a);border:1px solid #444;}
.printer:before{content:'';position:absolute;left:30px;top:30px;width:8px;height:8px;background:#ff4500;border-radius:9999px;}
.specrow{display:flex;padding:16px 32px;gap:0;border-bottom:1px solid #ececec;}
.spec{flex:1;padding:0 12px;border-right:1px solid #ececec;}
.spec:last-child{border-right:none;}
.spec label{font-size:11px;color:#8d8d8d;display:block;}
.spec b{font-family:'IBM Plex Sans',monospace;font-size:14px;font-weight:500;}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:206px;border:1px solid #ececec;border-radius:8px;padding:16px;}
.thumb{height:88px;background:#f1f1f1;border-radius:4px;margin-bottom:8px;}
.ptitle{font-size:16px;font-weight:600;margin:0 0 4px;}
.pbody{font-size:13px;color:#32373c;margin:0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Ultimaker</div>
<div class="navlinks"><span>Printers</span><span>Materials</span><span>Software</span><span>Support</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">S-Series</div>
<h1>Precision built into every layer.</h1>
<p>Professional-grade 3D printers engineered for engineers who care about craft.</p>
<div class="btnrow"><div class="btn-p">Explore Printers</div><div class="btn-g">Compare Models</div></div>
</div>
<div class="heroImg"><div class="printer"></div></div>
</div>
<div class="specrow">
<div class="spec"><label>Build Volume</label><b>330x240x300mm</b></div>
<div class="spec"><label>Layer Resolution</label><b>20 microns</b></div>
<div class="spec"><label>Materials</label><b>PLA / ABS / Nylon</b></div>
<div class="spec"><label>Connectivity</label><b>Wi-Fi / Ethernet</b></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#100aed,#000e1a)"></div><div class="ptitle">Ultimaker S7</div><div class="pbody">Dual extrusion, active leveling</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#282828,#100aed)"></div><div class="ptitle">Factor 4</div><div class="pbody">Enclosed, industrial-grade</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff4500,#1b1b1b)"></div><div class="ptitle">Method X Nylon</div><div class="pbody">Engineering-grade filament</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0a; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0a; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9e9e9e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #c9a227; color: #0a0a0a;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: transparent; color: #ffffff;
border: 1px solid #c9a227; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #141414; color: #ffffff;
border: 1px solid #2e2e2e; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9e9e9e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #c9a227; color: #0a0a0a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0a0a; color:#e8e8e8; box-sizing:border-box;
font-family:'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#0a0a0a; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.brand { font-weight:700; font-size:18px; text-transform:uppercase; letter-spacing:-0.3px; color:#fff; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#e8e8e8;
padding-bottom:6px; }
.navlinks span.on { border-bottom:2px solid #c9a227; }
.hero { height:260px; position:relative; display:flex; align-items:center; padding:0 32px;
background:linear-gradient(to right, rgba(0,0,0,0.85), transparent), radial-gradient(circle at 75% 40%,#2a2a2a,#0a0a0a); }
.hero h1 { font-weight:700; font-size:44px; text-transform:uppercase; letter-spacing:-0.5px; margin:0 0 12px; color:#fff; }
.btn { display:inline-block; width:fit-content; background:#c9a227; color:#0a0a0a; font-size:14px; font-weight:700;
letter-spacing:1px; text-transform:uppercase; padding:14px 28px; border-radius:8px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:16px 32px; }
.card { background:#1c1c1c; border:1px solid #2e2e2e; border-radius:8px; padding:14px; }
.cover { height:110px; border-radius:4px; margin-bottom:10px; }
.t { font-size:16px; font-weight:600; margin:0 0 6px; text-transform:uppercase; }
.p { font-size:20px; font-weight:700; margin:0 0 8px; }
.badgerow { display:flex; gap:6px; }
.badge-auth { background:#c9a227; color:#0a0a0a; font-size:10px; font-weight:700; letter-spacing:0.5px;
text-transform:uppercase; padding:4px 8px; border-radius:4px; }
.badge-partner { background:transparent; border:1px solid #6b7280; color:#6b7280; font-size:10px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; padding:3px 7px; border-radius:4px; }
.partnerrow { display:flex; gap:22px; align-items:center; padding:14px 32px; border-top:1px solid #2e2e2e; }
.partnerrow span { color:#9e9e9e; font-size:12px; font-weight:600; letter-spacing:0.5px; }
footer { position:absolute; bottom:0; left:0; right:0; height:36px; background:#0a0a0a; color:#9e9e9e;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:10.5px; }
</style></head>
<body>
<nav>
<div class="brand">Fanatics Authentic</div>
<div class="navlinks"><span class="on">Baseball</span><span>Basketball</span><span>Football</span><span>Soccer</span></div>
</nav>
<div class="hero"><h1>The Hologram is the Product</h1><span class="btn">Shop Certified Items</span></div>
<div class="grid">
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#c9a227,#a8821d);"></div>
<p class="t">Ohtani Signed Jersey</p><p class="p">$1,899</p>
<div class="badgerow"><span class="badge-auth">Fanatics Auth</span></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#2e2e2e,#1c1c1c);"></div>
<p class="t">Signed Game Ball</p><p class="p">$449</p>
<div class="badgerow"><span class="badge-partner">PSA</span><span class="badge-partner">JSA</span></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#6b7280,#3f434b);"></div>
<p class="t">Framed Photo — Career Highlights</p><p class="p">$249</p>
<div class="badgerow"><span class="badge-auth">Fanatics Auth</span><span class="badge-partner">Beckett</span></div></div>
</div>
<div class="partnerrow"><span>PSA</span><span>JSA</span><span>BECKETT</span><span>FANATICS AUTHENTIC</span></div>
<footer><span>© Fanatics Authentic — Certified sports memorabilia</span><span>Verify · Certificate Lookup · Support</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.25; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5d5d5d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.08em; background: #da291c; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.08em; background: transparent; color: #111111;
border: 1px solid #da291c; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5d5d5d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.12em; background: #da291c; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'EB Garamond',Georgia,serif; color:#111111; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;border-bottom:1px solid #eaeaea;}
.logo{font-family:'Apercu',Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.navlinks{display:flex;gap:24px;font-family:'Apercu',Arial,sans-serif;font-size:12px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:#111;}
.hero{height:250px;position:relative;background:linear-gradient(160deg,#eaeaea,#111111 85%);display:flex;align-items:flex-end;padding:0 42px 26px;}
.hero h1{font-style:italic;font-weight:400;font-size:34px;color:#fff;margin:0 0 8px;}
.hero .meta{font-family:'Apercu',Arial,sans-serif;font-size:12px;color:#ffff80;letter-spacing:.5px;text-transform:uppercase;}
.sec{padding:24px 42px 0;}
.sectitle{font-family:'Apercu',Arial,sans-serif;font-size:12px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:#111;margin-bottom:16px;border-bottom:1px solid #eaeaea;padding-bottom:10px;}
.grid{display:flex;gap:20px;}
.card{width:196px;}
.thumb{height:150px;margin-bottom:10px;}
.pname{font-style:italic;font-size:16px;font-weight:400;}
.pmeta{font-family:'Apercu',Arial,sans-serif;font-size:11px;color:#666;margin-top:4px;letter-spacing:.4px;text-transform:uppercase;}
</style>
<div class="nav">
<div class="logo">Marian Goodman Gallery</div>
<div class="navlinks"><span>Exhibitions</span><span>Artists</span><span>Viewing Room</span><span>About</span></div>
</div>
<div class="hero">
<div>
<div class="meta">Now Showing — Paris</div>
<h1>Interior Weather</h1>
</div>
</div>
<div class="sec">
<div class="sectitle">Current Exhibitions</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#111,#eaeaea);"></div><div class="pname">Interior Weather</div><div class="pmeta">Paris, Through Nov 12</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#666,#eaeaea);"></div><div class="pname">Field Notations</div><div class="pmeta">New York, Through Dec 3</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#da291c,#111);"></div><div class="pname">Standing Water</div><div class="pmeta">London, Through Oct 28</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #cc4b37; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #0a0a0a;
border: 1px solid #cc4b37; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #0a0a0a;
border: 1px solid #c2c2c2; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 1px; background: #cc4b37; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Work Sans','Helvetica Neue',Helvetica,Arial,sans-serif; color:#45464b; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fff;border-bottom:1px solid #cacaca;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:600;color:#0a0a0a;text-transform:uppercase;letter-spacing:1px;}
.navlinks{display:flex;gap:26px;font-size:15px;font-weight:500;color:#0a0a0a;}
.search{width:180px;height:36px;background:#f4f4f3;border:1px solid #cacaca;display:flex;align-items:center;padding:0 12px;font-size:13px;color:#767676;}
.hero{height:230px;background:#1e2023;display:flex;align-items:center;padding:0 32px;position:relative;overflow:hidden;}
.h1{font-size:40px;font-weight:600;letter-spacing:-0.5px;color:#fff;margin:0 0 10px;max-width:440px;}
.sub{font-size:15px;color:#d9d8d6;margin:0 0 18px;max-width:400px;}
.btn{display:inline-block;background:#cc4b37;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:13px 26px;}
.platter{position:absolute;right:60px;top:35px;width:160px;height:160px;border-radius:50%;background:repeating-radial-gradient(circle,#3b3b3b 0,#3b3b3b 3px,#1e2023 3px,#1e2023 9px);border:3px solid #45464b;}
.platter:after{content:'';position:absolute;width:14px;height:14px;background:#cc4b37;border-radius:50%;top:73px;left:73px;}
.strip{height:44px;background:#f4f4f3;border-bottom:1px solid #cacaca;display:flex;align-items:center;gap:24px;padding:0 32px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#45464b;}
.strip .on{color:#0a0a0a;border-bottom:2px solid #cc4b37;padding-bottom:12px;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:206px;border:1px solid #e6e6e6;padding:14px;}
.thumb{height:104px;margin-bottom:10px;}
.award{background:#cc4b37;color:#fff;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 7px;display:inline-block;margin-bottom:6px;}
.ptitle{font-size:15px;font-weight:600;color:#0a0a0a;}
.pcat{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#767676;margin:2px 0 6px;}
.pprice{font-size:18px;font-weight:600;color:#0a0a0a;}
.footer{position:absolute;bottom:0;left:0;right:0;height:52px;background:#1e2023;border-top:2px solid #cc4b37;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#808185;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Rega Research</div>
<div class="navlinks"><div>Turntables</div><div>Tonearms</div><div>Cartridges</div><div>Amplifiers</div></div>
<div class="search">Search part no...</div>
</div>
<div class="hero">
<div>
<div class="h1">Precision analogue, built without ceremony.</div>
<div class="sub">British-engineered turntables and electronics for people who read the spec sheet first.</div>
<div class="btn">Explore Turntables</div>
</div>
<div class="platter"></div>
</div>
<div class="strip">
<div class="on">Turntables</div><div>Tonearms</div><div>Cartridges</div><div>Amplifiers</div><div>Digital</div>
</div>
<div class="grid">
<div class="card"><div class="award">What Hi-Fi 5 Stars</div><div class="thumb" style="background:linear-gradient(160deg,#cc4b37,#1e2023)"></div><div class="pcat">Turntable</div><div class="ptitle">Planar 3</div><div class="pprice">£649</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#1e2023,#cc4b37)"></div><div class="pcat">Tonearm</div><div class="ptitle">RB330</div><div class="pprice">£349</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#3b3b3b,#cc4b37)"></div><div class="pcat">Cartridge</div><div class="ptitle">Exact MM</div><div class="pprice">£450</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#cc4b37,#3b3b3b)"></div><div class="pcat">Amplifier</div><div class="ptitle">Io Phono Stage</div><div class="pprice">£199</div></div>
</div>
<div class="footer"><span>© Rega Research — mass removed, precision retained</span><span>Dealers · Support · About</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdfdff; color: #010000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdfdff; color: #010000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; letter-spacing: -0.2px; margin: 0; color: #010000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #8c959e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #2aa527; color: #fdfdff;
border: none; border-radius: 20px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #fdfdff; color: #323031;
border: 1px solid #2aa527; border-radius: 20px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fdfdff; color: #323031;
border: 1px solid #bebebf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c959e; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #f3f6f8; color: #323031;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Roboto','Helvetica Neue',Arial,sans-serif; background:#fdfdff; color:#323031; }
*{box-sizing:border-box;}
.promo{height:32px;background:#bcff05;color:#11262f;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d2d6da;}
.logo{font-size:20px;font-weight:700;color:#11262f;letter-spacing:-.3px;}
.navlinks{display:flex;gap:24px;font-size:15px;color:#323031;}
.cart{font-size:13px;font-weight:600;color:#2aa527;}
.hero{height:230px;display:flex;background:#11262f;}
.herotext{width:46%;padding:0 32px;display:flex;flex-direction:column;justify-content:center;}
.tag{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#bcff05;margin-bottom:10px;}
.herotext h1{font-size:30px;font-weight:700;color:#fdfdff;margin:0 0 10px;line-height:1.15;}
.herotext p{font-size:14px;color:#d9dce1;margin:0 0 16px;max-width:300px;}
.cta{display:inline-block;width:fit-content;background:#bcff05;color:#11262f;font-size:15px;font-weight:600;letter-spacing:.3px;padding:14px 28px;border-radius:20px;}
.heroimg{width:54%;position:relative;overflow:hidden;background:radial-gradient(circle at 65% 55%,#2aa527 0%,#11262f 65%);}
.tankring{position:absolute;right:60px;top:30px;width:170px;height:170px;border-radius:50%;border:14px solid #b1b8be;box-shadow:inset 0 0 0 4px #a3abb5;}
.tankring:after{content:'';position:absolute;inset:20px;border-radius:50%;background:linear-gradient(160deg,#4f7f2e,#0d3a2f);}
.specrow{display:flex;gap:1px;background:#d2d6da;margin:16px 32px 0;}
.speccell{flex:1;background:#f0f3f6;text-align:center;padding:9px 4px;}
.speclabel{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#8c959e;}
.specvalue{font-size:15px;font-weight:600;color:#11262f;margin-top:3px;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:150px;border:1px solid #d2d6da;border-radius:12px;padding:10px;background:#fdfdff;}
.thumb{height:88px;border-radius:8px;margin-bottom:8px;}
.ptitle{font-size:12px;font-weight:600;color:#323031;line-height:1.3;height:30px;overflow:hidden;}
.pprice{font-size:14px;font-weight:700;color:#2aa527;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;background:#11262f;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;color:#b1b8be;border-top:3px solid #bcff05;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="promo">Free shipping on tank sizes 10ft and up</div>
<div class="nav">
<div class="logo">Stock Tank Pool</div>
<div class="navlinks"><div>Tanks</div><div>Accessories</div><div>Installation</div><div>Support</div></div>
<div class="cart">CART (0)</div>
</div>
<div class="hero">
<div class="herotext">
<div class="tag">18-Gauge Galvanized Steel</div>
<h1>Backyard aspiration, farm-grade steel.</h1>
<p>Stock tank pools engineered for real installations, not just a Pinterest board.</p>
<div class="cta">Shop Tanks</div>
</div>
<div class="heroimg"><div class="tankring"></div></div>
</div>
<div class="specrow">
<div class="speccell"><div class="speclabel">Diameter</div><div class="specvalue">10 ft</div></div>
<div class="speccell"><div class="speclabel">Depth</div><div class="specvalue">29 in</div></div>
<div class="speccell"><div class="speclabel">Capacity</div><div class="specvalue">3,000 gal</div></div>
<div class="speccell"><div class="speclabel">Gauge</div><div class="specvalue">18ga steel</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a3abb5,#11262f)"></div><div class="ptitle">8ft Round Tank</div><div class="pprice">$1,249</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b1b8be,#2aa527)"></div><div class="ptitle">10ft Round Tank</div><div class="pprice">$1,649</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d2d6da,#11262f)"></div><div class="ptitle">Pump & Filter Kit</div><div class="pprice">$389</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a3abb5,#2aa527)"></div><div class="ptitle">Liner + Cover Set</div><div class="pprice">$219</div></div>
</div>
<div class="footer"><span>© Galvanized. Built to hold water.</span><span>Installation Guide</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #232323;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #232323;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #232323; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #24b9d7; color: #000000;
border: none; border-radius: 2px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #ffffff; color: #000000;
border: 1px solid #24b9d7; border-radius: 2px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #232323;
border: 1px solid #c8c8c8; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.0; letter-spacing: 0.3px; background: #e0f5f9; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#414141; box-sizing:border-box; font-family:'Manrope', Arial, sans-serif; }
* { box-sizing:border-box; }
.strip { height:26px; background:#24b9d7; color:#fff; display:flex; align-items:center; justify-content:center;
font-size:12px; font-weight:400; }
nav { height:60px; display:flex; align-items:center; gap:20px; padding:0 28px; border-bottom:1px solid #eeeeee; }
.logo { font-size:18px; font-weight:700; color:#232323; }
.navlink { font-size:14px; font-weight:500; color:#232323; }
.navlink.active { color:#24b9d7; border-bottom:2px solid #24b9d7; padding-bottom:20px; margin-bottom:-21px; }
.searchw { margin-left:auto; width:200px; height:36px; border:1px solid #eeeeee; border-radius:2px;
display:flex; align-items:center; padding:0 12px; font-size:12px; color:#7a7a7a; }
.stage { display:flex; gap:24px; padding:20px 28px 0; }
.prod { width:230px; height:290px; flex:0 0 auto; border:1px solid #eeeeee; border-radius:4px; position:relative; overflow:hidden;
background:linear-gradient(160deg,#24b9d7 0%,#ffffff 55%,#e5e5e5 130%); }
.prod::before { content:''; position:absolute; left:20px; top:24px; width:190px; height:242px; background:#fff;
box-shadow:0 4px 10px rgba(0,0,0,.08); }
.prod::after { content:''; position:absolute; left:36px; top:60px; width:158px; height:6px; background:#eeeeee; }
.catbadge { position:absolute; top:12px; left:12px; z-index:1; background:#4cbb6c; color:#fff; font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:.3px; padding:3px 8px; }
.info { flex:1; }
h1 { font-size:22px; font-weight:700; margin:4px 0 6px; color:#232323; }
.desc { font-size:14px; line-height:1.5; max-width:500px; margin-bottom:14px; }
.chiprow { display:flex; gap:8px; margin-bottom:16px; }
.chip { border:1px solid #eeeeee; border-radius:2px; padding:8px 16px; font-size:13px; font-weight:600; color:#414141; }
.chip.active { background:#24b9d7; border-color:#24b9d7; color:#fff; }
.pricerow { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.price { font-size:22px; font-weight:700; }
.btnrow { display:flex; gap:10px; }
.btn-p { background:#24b9d7; color:#fff; border:none; border-radius:2px; height:44px; padding:0 26px;
font-size:15px; font-weight:600; }
.btn-s { background:#fff; color:#24b9d7; border:1px solid #24b9d7; border-radius:2px; height:44px; padding:0 20px;
font-size:15px; font-weight:600; }
.relwrap { padding:14px 28px 0; border-top:1px solid #eeeeee; margin-top:14px; }
.relhdr { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:#7a7a7a; margin-bottom:10px; }
.relgrid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.rc { border:1px solid #eeeeee; border-radius:4px; padding:6px; }
.rc .th { height:60px; border-radius:2px; background:linear-gradient(160deg,#ff9a52,#24b9d7); margin-bottom:6px; }
.rc .t { font-size:11px; font-weight:600; color:#232323; height:26px; overflow:hidden; }
.rc .p { font-size:11px; color:#414141; }
</style></head>
<body>
<div class="strip">Free shipping on orders over €40</div>
<nav>
<span class="logo">Clairefontaine</span>
<span class="navlink active">Notebooks</span>
<span class="navlink">School Supplies</span>
<span class="navlink">Art Materials</span>
<div class="searchw">Search notebooks, paper…</div>
</nav>
<div class="stage">
<div class="prod"><span class="catbadge">School</span></div>
<div class="info">
<h1>Triomphe Notebook, A5 Lined, 96 Sheets</h1>
<div class="desc">Ultra-smooth 90gsm vellum paper that resists bleed-through from fountain pen ink, bound in a laminated soft cover with a French-lined grid.</div>
<div class="chiprow">
<span class="chip active">A5 Lined</span>
<span class="chip">A5 Grid</span>
<span class="chip">A4 Lined</span>
</div>
<div class="pricerow"><span class="price">€8.90</span></div>
<div class="btnrow">
<button class="btn-p">Add to Cart</button>
<button class="btn-s">Add to Wishlist</button>
</div>
</div>
</div>
<div class="relwrap">
<div class="relhdr">Complete the Set</div>
<div class="relgrid">
<div class="rc"><div class="th"></div><div class="t">Fountain Pen Ink, 60ml</div><div class="p">€9.50</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(160deg,#4cbb6c,#24b9d7)"></div><div class="t">Ruled Refill Pad</div><div class="p">€5.20</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(160deg,#ff4c4c,#24b9d7)"></div><div class="t">Clairefontaine Pencil Set</div><div class="p">€6.80</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(160deg,#24b9d7,#232323)"></div><div class="t">Desk Blotter</div><div class="p">€14.00</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(160deg,#ff9a52,#232323)"></div><div class="t">Watercolor Pad, A4</div><div class="p">€11.90</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.2px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #ffffff; color: #222222;
border: 1px solid #108474; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #3a3a3a;
border: 1px solid #c3c4c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #c70000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Eureka Ergonomic — Home</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f9fafb; color:#3a3a3a;
font-family:'Inter',-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box;}
.page{width:960px;height:640px;display:flex;flex-direction:column;}
header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #dedede;background:#ffffff;}
.logo{font-size:19px;font-weight:700;color:#222222;}
.logo span{color:#108474;}
nav{display:flex;gap:20px;}
nav a{font-size:12px;font-weight:600;color:#3a3a3a;}
.nav-cta{background:#108474;color:#fff;padding:8px 18px;border-radius:8px;font-size:12px;font-weight:600;}
.hero{display:flex;padding:26px 30px;gap:24px;background:linear-gradient(120deg,#108474 0%,#0d6b5d 100%);border-radius:0 0 20px 20px;}
.hero-copy{flex:1;}
.hero-copy .kicker{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#a8f0e5;margin-bottom:8px;}
.hero-copy h1{font-size:28px;font-weight:700;color:#fff;margin:0 0 12px;line-height:1.25;}
.hero-copy p{font-size:13px;color:#d8f3ee;max-width:340px;margin:0 0 16px;line-height:1.6;}
.hero-cta{display:inline-block;background:#c70000;color:#fff;padding:11px 22px;border-radius:8px;font-size:12px;font-weight:700;}
.desk{width:250px;height:150px;position:relative;}
.desktop{position:absolute;bottom:40px;left:20px;width:210px;height:10px;background:#e5e5e5;border-radius:4px;}
.legs{position:absolute;bottom:0;left:40px;width:8px;height:40px;background:#01bbd5;border-radius:2px;}
.legs2{position:absolute;bottom:0;right:40px;width:8px;height:40px;background:#01bbd5;border-radius:2px;}
.monitor{position:absolute;bottom:50px;left:80px;width:90px;height:56px;border-radius:4px;background:linear-gradient(160deg,#2a2a2a,#111);border:2px solid #fecb34;}
main{flex:1;padding:18px 30px 0;}
.row-head{display:flex;justify-content:space-between;margin-bottom:12px;}
.row-head h2{font-size:16px;margin:0;color:#222222;}
.row-head span{font-size:11px;color:#108474;font-weight:600;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#ffffff;border:1px solid #dedede;border-radius:12px;padding:10px;position:relative;}
.thumb{height:60px;border-radius:8px;background:linear-gradient(150deg,#e8f6f4,#d8ece8);margin-bottom:8px;}
.badge{position:absolute;top:6px;left:6px;font-size:8px;font-weight:700;padding:3px 6px;border-radius:8px;color:#fff;text-transform:uppercase;}
.b-sale{background:#c70000;}
.b-new{background:#108474;}
.card h4{font-size:11px;margin:0 0 4px;color:#222222;font-weight:600;}
.stars{color:#fecb34;font-size:10px;margin-bottom:4px;}
.card .price{font-size:13px;font-weight:700;color:#108474;}
.card .price s{font-size:10px;color:#aaa;font-weight:400;margin-left:4px;}
footer{background:#181716;padding:14px 30px;display:flex;justify-content:space-between;align-items:center;margin-top:14px;}
footer span{font-size:10px;color:#a0a0a0;}
</style>
<div class="page">
<header>
<div class="logo">Eureka Ergonomic<span>.</span></div>
<nav><a>Standing Desks</a><a>Gaming Desks</a><a>Chairs</a><a>Monitor Arms</a></nav>
<div class="nav-cta">Shop Now</div>
</header>
<div class="hero">
<div class="hero-copy">
<div class="kicker">Performance-Grade Furniture</div>
<h1>Treat your workspace like performance equipment.</h1>
<p>Height-adjustable desks and ergonomic seating engineered with athletic precision.</p>
<div class="hero-cta">Shop Desks</div>
</div>
<div class="desk"><div class="legs"></div><div class="legs2"></div><div class="desktop"></div><div class="monitor"></div></div>
</div>
<main>
<div class="row-head"><h2>Trending Now</h2><span>Shop All →</span></div>
<div class="grid">
<div class="card"><div class="badge b-sale">-20%</div><div class="thumb"></div><h4>Electric Standing Desk 60"</h4><div class="stars">★★★★★</div><div class="price">$319.99 <s>$399.99</s></div></div>
<div class="card"><div class="badge b-new">New</div><div class="thumb"></div><h4>Gaming Desk, RGB Edition</h4><div class="stars">★★★★☆</div><div class="price">$249.99</div></div>
<div class="card"><div class="thumb"></div><h4>Ergonomic Mesh Task Chair</h4><div class="stars">★★★★★</div><div class="price">$219.99</div></div>
<div class="card"><div class="thumb"></div><h4>Dual Monitor Arm Mount</h4><div class="stars">★★★★☆</div><div class="price">$59.99</div></div>
</div>
</main>
<footer>
<span>© Eureka Ergonomic — Performance Workspace Furniture</span>
<span>Assembly Guides · Warranty · Support</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a1a1a; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a1a1a; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.35; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #a0a0a0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #9a8be5; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: transparent; color: #9a8be5;
border: 1px solid #9a8be5; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #2a2a2a; color: #e0e0e0;
border: 1px solid #535353; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a0a0a0; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #9a8be5; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#1a1a1a; font-family:-apple-system, Helvetica, Roboto, sans-serif; color:#ffffff; }
*{box-sizing:border-box;}
.nav{height:64px;background:#1a1a1a;border-bottom:1px solid #383838;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:600;letter-spacing:0.3px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;color:#a0a0a0;}
.navlinks span:first-child{color:#9a8be5;}
.searchpill{width:170px;height:38px;border-radius:9999px;background:#242424;display:flex;align-items:center;padding:0 16px;font-size:11px;color:#a0a0a0;}
.hero{height:230px;background:#1a1a1a;display:flex;align-items:center;padding:0 32px;}
.heroText{width:440px;}
.h1{font-size:30px;font-weight:600;line-height:1.15;margin:0 0 10px;}
.sub{font-size:14px;color:#e0e0e0;margin:0 0 18px;max-width:340px;}
.btn{display:inline-flex;align-items:center;height:44px;padding:0 26px;border-radius:8px;background:#9a8be5;color:#1a1a1a;font-size:13px;font-weight:600;}
.padwrap{width:400px;height:190px;position:relative;}
.pad{position:absolute;left:110px;top:20px;width:220px;height:130px;border-radius:16px;background:#242424;border:1px solid #383838;}
.stick{position:absolute;width:36px;height:36px;border-radius:9999px;background:#9a8be5;}
.st1{left:135px;top:60px;} .st2{left:255px;top:90px;}
.dpad{position:absolute;left:250px;top:40px;width:26px;height:26px;background:#484848;border-radius:4px;}
.sec{padding:20px 32px;}
.sectitle{font-size:16px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:206px;background:#2a2a2a;border-radius:8px;padding:12px;}
.thumb{height:88px;border-radius:6px;margin-bottom:10px;}
.ptitle{font-size:13px;font-weight:500;margin-bottom:4px;}
.pprice{font-size:14px;font-weight:600;color:#ffffff;}
</style>
<div class="nav">
<div class="logo">Steelseries Controll 2</div>
<div class="navlinks"><span>Controllers</span><span>Mice</span><span>Keyboards</span><span>Headsets</span></div>
<div class="searchpill">Search products...</div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Tight tolerances,<br>zero rainbow.</div>
<div class="sub">Precision-tuned controllers and peripherals built with hard corners and one signal color.</div>
<div class="btn">Shop Controllers</div>
</div>
<div class="padwrap"><div class="pad"></div><div class="stick st1"></div><div class="stick st2"></div><div class="dpad"></div></div>
</div>
<div class="sec">
<div class="sectitle">Featured Gear</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#383838"></div><div class="ptitle">Stratus Pro Controller</div><div class="pprice">$89.99</div></div>
<div class="card"><div class="thumb" style="background:#9a8be5"></div><div class="ptitle">Rival 3 Wireless Mouse</div><div class="pprice">$59.99</div></div>
<div class="card"><div class="thumb" style="background:#242424"></div><div class="ptitle">Apex 3 TKL Keyboard</div><div class="pprice">$79.99</div></div>
<div class="card"><div class="thumb" style="background:#484848"></div><div class="ptitle">Arctis 1 Wireless Headset</div><div class="pprice">$99.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0f0f0; color: #16140e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0f0f0; color: #16140e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #16140e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #d80027; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f0f0f0; color: #16140e;
border: 1px solid #d80027; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f0f0f0; color: #16140e;
border: 1px solid #bab9b8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fcc003; color: #16140e;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#16140e; color:#f0f0f0; box-sizing:border-box;
font-family:'Inter', 'Segoe UI', system-ui, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; gap:24px; padding:0 26px; }
.logo { font-size:19px; font-weight:700; }
.navlink { font-size:16px; font-weight:500; color:#f0f0f0; }
.navlink.active { color:#d80027; }
.searchw { margin-left:auto; width:220px; height:38px; border-radius:999px; background:#f0f0f0;
display:flex; align-items:center; padding:0 16px; font-size:12px; color:#7a7a7a; }
.cartbtn { background:#d80027; color:#fff; border-radius:8px; padding:9px 18px; font-size:13px; font-weight:600; }
.stage { display:flex; gap:28px; padding:16px 26px 0; }
.box { width:250px; height:250px; border-radius:12px; flex:0 0 auto; position:relative; overflow:hidden;
background:linear-gradient(150deg,#d80027 0%,#632244 60%,#16140e 130%); box-shadow:0 10px 24px rgba(0,0,0,.4); }
.box::before { content:''; position:absolute; left:20px; top:20px; width:80px; height:80px; border-radius:16px;
background:rgba(0,168,197,.28); }
.box::after { content:''; position:absolute; right:16px; bottom:16px; width:100px; height:100px; border-radius:50%;
background:rgba(252,192,3,.20); }
.badges { position:absolute; left:12px; bottom:12px; display:flex; gap:6px; }
.b { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; border-radius:4px; padding:3px 8px; color:#fff; }
.b-cy{background:#00a8c5;} .b-yl{background:#fcc003; color:#16140e;} .b-pu{background:#73447f;}
.info { flex:1; }
h1 { font-size:26px; font-weight:700; margin:6px 0 6px; }
.desc { font-size:14px; color:#c9c9c1; line-height:1.55; max-width:520px; margin-bottom:14px; }
.taglist { display:flex; gap:8px; margin-bottom:16px; }
.tag { background:#241f18; border-radius:999px; padding:6px 14px; font-size:12px; color:#f0f0f0; }
.pricerow { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.price { font-size:26px; font-weight:700; color:#d80027; }
.btnrow { display:flex; gap:10px; }
.btn-p { background:#d80027; color:#fff; border:none; border-radius:8px; height:48px; padding:0 28px;
font-size:16px; font-weight:600; }
.btn-cy { background:#00a8c5; color:#fff; border:none; border-radius:8px; height:48px; padding:0 22px;
font-size:16px; font-weight:600; }
.expwrap { padding:14px 26px 0; border-top:1px solid #2a271f; margin-top:16px; }
.exphdr { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#a0a0a0; margin-bottom:10px; }
.expgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.ec { background:#ffffff; border-radius:12px; padding:8px; color:#16140e; }
.ec .th { height:58px; border-radius:8px; margin-bottom:6px; background:linear-gradient(150deg,#0052b4,#16140e); }
.ec .t { font-size:11px; font-weight:600; }
.ec .p { font-size:12px; color:#d80027; font-weight:700; margin-top:2px; }
</style></head>
<body>
<nav>
<span class="logo">Cge Czech Games Edition</span>
<span class="navlink active">Games</span>
<span class="navlink">Expansions</span>
<span class="navlink">Accessories</span>
<div class="searchw">Search catalog…</div>
<div class="cartbtn">Cart (1)</div>
</nav>
<div class="stage">
<div class="box">
<div class="badges"><span class="b b-cy">Expansion Ready</span><span class="b b-yl">Award Winner</span></div>
</div>
<div class="info">
<h1>Lantern Fields: A Trading Route Game</h1>
<div class="desc">Route-build across five river valleys, trade contracts with rival caravans, and race the seasonal clock before the lanterns burn out. A modular board keeps every game night different.</div>
<div class="taglist"><span class="tag">2–5 Players</span><span class="tag">75 min</span><span class="tag">Strategy</span></div>
<div class="pricerow"><span class="price">$64.00</span></div>
<div class="btnrow">
<button class="btn-p">Add to Cart</button>
<button class="btn-cy">View Rulebook</button>
</div>
</div>
</div>
<div class="expwrap">
<div class="exphdr">Frequently Bought Together</div>
<div class="expgrid">
<div class="ec"><div class="th"></div><div class="t">Lantern Fields: Winter Routes</div><div class="p">$29.00</div></div>
<div class="ec"><div class="th" style="background:linear-gradient(150deg,#fcc003,#16140e)"></div><div class="t">Wooden Caravan Meeples</div><div class="p">$18.00</div></div>
<div class="ec"><div class="th" style="background:linear-gradient(150deg,#73447f,#16140e)"></div><div class="t">Player Screen Set</div><div class="p">$14.00</div></div>
<div class="ec"><div class="th" style="background:linear-gradient(150deg,#466442,#16140e)"></div><div class="t">Storage Insert</div><div class="p">$22.00</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #112233;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #112233;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; margin: 0; color: #112233; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #a3a2a1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 1.75px; background: #2a4d7f; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 1.75px; background: transparent; color: #2a4d7f;
border: 1px solid #2a4d7f; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #121212;
border: 1px solid #c4c8cc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a3a2a1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 1.75px; background: #2a4d7f; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'HCo Gotham SSm',Arial,Helvetica,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#112233;}
.logo{font-family:'termina',sans-serif;font-size:16px;font-weight:700;color:#fff;letter-spacing:1px;text-transform:uppercase;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.4px;}
.navcta{background:#2a4d7f;color:#fff;font-size:11px;font-weight:700;padding:9px 18px;border-radius:2px;text-transform:uppercase;letter-spacing:.5px;}
.hero{height:250px;display:flex;align-items:center;padding:0 36px;background:#f5f4f3;}
.herotext{width:420px;}
.kicker{font-family:'termina',sans-serif;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#2a4d7f;margin-bottom:14px;}
.headline{font-family:'magnesium-mvb-condensed','termina',sans-serif;font-size:44px;font-weight:700;color:#112233;margin-bottom:12px;line-height:1.02;letter-spacing:-0.5px;text-transform:uppercase;}
.sub{font-size:13px;color:#121212;margin-bottom:18px;max-width:320px;line-height:1.5;}
.price{font-family:'magnesium-mvb-condensed',sans-serif;font-size:26px;font-weight:700;color:#112233;margin-bottom:14px;text-transform:uppercase;}
.btn{display:inline-block;background:#2a4d7f;color:#fff;font-size:12px;font-weight:700;padding:12px 26px;letter-spacing:1px;text-transform:uppercase;}
.grill{width:230px;height:170px;margin-left:60px;position:relative;}
.frame{position:absolute;left:20px;top:30px;width:190px;height:100px;border:8px solid #112233;border-radius:4px;}
.grate{position:absolute;left:20px;top:120px;width:190px;height:10px;background:repeating-linear-gradient(90deg,#a3a2a1 0 4px,transparent 4px 12px);}
.sec{padding:18px 36px 0;}
.spectable{display:flex;gap:1px;background:#dedede;margin-bottom:16px;}
.speccell{flex:1;background:#e3e2e1;text-align:center;padding:10px;}
.slabel{font-family:'termina',sans-serif;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#a3a2a1;}
.sval{font-family:'HCo Gotham SSm',sans-serif;font-size:14px;color:#112233;margin-top:3px;font-weight:700;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#f5f4f3;border-radius:2px;padding:12px;}
.thumb{height:80px;border-radius:2px;margin-bottom:10px;}
.pname{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#112233;}
.pprice{font-size:13px;color:#2a4d7f;font-weight:700;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Nomad Grills</div>
<div class="navlinks"><span>Grills</span><span>Grates</span><span>Accessories</span></div>
<div class="navcta">Made in USA</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Steel Grate Series</div>
<div class="headline">No wasted material.</div>
<div class="sub">Tack-welded steel frames built to outlast every backyard cookout.</div>
<div class="price">$399</div>
<div class="btn">Shop the Grill</div>
</div>
<div class="grill"><div class="frame"></div><div class="grate"></div></div>
</div>
<div class="sec">
<div class="spectable">
<div class="speccell"><div class="slabel">Cook Area</div><div class="sval">508 sq in</div></div>
<div class="speccell"><div class="slabel">Weight</div><div class="sval">42 lb</div></div>
<div class="speccell"><div class="slabel">Material</div><div class="sval">Powder Steel</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2a4d7f,#112233)"></div><div class="pname">Standard Grate</div><div class="pprice">$399</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a3a2a1,#112233)"></div><div class="pname">Steel Grill Cover</div><div class="pprice">$59</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#112233,#2a4d7f)"></div><div class="pname">Ash Catcher Tray</div><div class="pprice">$45</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1e1e1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1e1e1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.36; margin: 0; color: #1e1e1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.3px; background: #006ebe; color: #ffffff;
border: none; border-radius: 2px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.3px; background: #ffffff; color: #006ebe;
border: 1px solid #006ebe; border-radius: 2px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1e1e1c;
border: 1px solid #c7c7c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.3px; background: #c20012; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#4f4f49; box-sizing:border-box;
font-family:'Gotham','Futura','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; background:#ffffff; border-bottom:1px solid #d8d8d8; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { color:#1e1e1c; font-size:18px; font-weight:500; margin:0; letter-spacing:1px; text-transform:uppercase; }
.navlinks { display:flex; gap:36px; }
.navlinks span { color:#1e1e1c; font-size:11px; font-weight:400; letter-spacing:0.05em; text-transform:uppercase; }
.navlinks .active { color:#006ebe; border-bottom:2px solid #006ebe; padding-bottom:24px; }
.hero { height:288px; display:flex; align-items:center; justify-content:center; gap:64px; padding:0 40px; }
.panel { width:220px; height:220px; background:#f7f7f7; position:relative; border:1px solid #e7e7e7; }
.panel::after { content:''; position:absolute; left:50%; top:16px; bottom:16px; width:1px; background:#d8d8d8; }
.panel .dial { position:absolute; right:20px; top:20px; width:14px; height:14px; border-radius:50%; background:#006ebe; }
.heroTxt { max-width:340px; }
.heroTxt .eyebrow { font-size:10px; letter-spacing:0.16em; color:#767676; margin-bottom:14px; text-transform:uppercase; }
.heroTxt h1 { font-size:28px; font-weight:400; margin:0 0 14px; color:#1e1e1c; line-height:1.3; letter-spacing:-0.2px; }
.heroTxt p { font-size:13px; color:#767676; margin:0 0 20px; line-height:1.6; }
.heroTxt .cta { display:inline-block; background:#006ebe; color:#fff; font-size:12px; font-weight:400; padding:13px 30px; letter-spacing:0.05em; text-transform:uppercase; }
.section-label { padding:20px 40px 12px; font-size:12px; font-weight:400; color:#1e1e1c; letter-spacing:0.1em; text-transform:uppercase; border-top:1px solid #e7e7e7; }
.grid { display:flex; gap:0; padding:0 40px; }
.card { flex:1; padding:16px 18px; border-right:1px solid #e7e7e7; }
.card:last-child { border-right:none; }
.card .art { height:90px; background:#f7f7f7; margin-bottom:14px; position:relative; }
.card .art::before { content:''; position:absolute; left:10px; right:10px; top:10px; bottom:10px; border:1px solid #d8d8d8; }
.card h3 { font-size:12px; font-weight:400; color:#1e1e1c; margin:0 0 4px; letter-spacing:0.02em; }
.card p { font-size:10px; color:#767676; margin:0 0 10px; }
.card .price { font-size:13px; font-weight:500; color:#1e1e1c; }
.card .eco { display:inline-block; font-size:8px; color:#008827; font-weight:700; letter-spacing:0.06em; margin-top:6px; text-transform:uppercase; }
footer { height:64px; margin-top:16px; border-top:1px solid #e7e7e7; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
footer span { font-size:10px; color:#767676; letter-spacing:0.06em; text-transform:uppercase; }
</style></head>
<body>
<nav>
<p class="brand">Fisher And Paykel</p>
<div class="navlinks"><span class="active">Refrigeration</span><span>Cooking</span><span>Laundry</span><span>Dishwashing</span></div>
</nav>
<div class="hero">
<div class="panel"><div class="dial"></div></div>
<div class="heroTxt">
<div class="eyebrow">Column Refrigeration</div>
<h1>Designed to disappear<br>into the architecture.</h1>
<p>Flush-mount panels, handle-free facades, and a single illuminated control — engineered to the millimeter.</p>
<span class="cta">Configure Your Kitchen</span>
</div>
</div>
<div class="section-label">Featured Appliances</div>
<div class="grid">
<div class="card"><div class="art"></div><h3>Integrated Column Fridge</h3><p>90cm · Full Panel Ready</p><div class="price">$8,499</div><div class="eco">A+++ Rated</div></div>
<div class="card"><div class="art"></div><h3>DishDrawer™ Double</h3><p>Quiet 44dB Wash</p><div class="price">$2,199</div></div>
<div class="card"><div class="art"></div><h3>Induction Cooktop</h3><p>90cm · 5 Zone</p><div class="price">$3,299</div></div>
<div class="card"><div class="art"></div><h3>Front Load Washer</h3><p>10kg · Steam Care</p><div class="price">$1,899</div><div class="eco">A+++ Rated</div></div>
</div>
<footer>
<span>DESIGN CONSULTATION</span><span>ENERGY RATINGS</span><span>WARRANTY & SUPPORT</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c471; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c471; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c471; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c471; color: #000000;
border: 1px solid #27cc86; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29cd88; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212529; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
body { display:flex; flex-direction:column; }
nav.gnb { height:64px; flex:0 0 64px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #dee2e6; background:#ffffff; }
.logo { font-size:20px; font-weight:800; letter-spacing:-0.4px; color:#212529; margin:0; display:flex; align-items:center; gap:4px; }
.logo .dot { width:8px; height:8px; border-radius:999px; background:#00c471; display:inline-block; }
.searchbar { flex:1; max-width:360px; margin:0 24px; height:40px; display:flex; align-items:center;
background:#ffffff; border:1px solid #dee2e6; border-radius:999px; padding-left:16px; }
.searchbar span { font-size:13px; color:#adb5bd; flex:1; }
.searchbar button { width:32px; height:32px; margin:4px; border:none; border-radius:999px;
background:#00c471; position:relative; flex:0 0 32px; }
.searchbar button::before { content:''; position:absolute; width:9px; height:9px; border:1.5px solid #fff;
border-radius:50%; top:8px; left:8px; }
.searchbar button::after { content:''; position:absolute; width:5px; height:1.5px; background:#fff;
top:18px; left:16px; transform:rotate(45deg); }
.navactions { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.nav-action { background:#f8f9fa; color:#495057; border:none; border-radius:32px; height:36px;
padding:0 22px; font-size:14px; font-weight:600; white-space:nowrap; }
.nav-cta { background:#00c471; color:#ffffff; border:none; border-radius:999px; height:36px;
padding:0 20px; font-size:14px; font-weight:600; white-space:nowrap; }
.subnav { flex:0 0 52px; height:52px; display:flex; align-items:center; gap:8px; padding:0 32px;
border-bottom:1px solid #f1f3f5; }
.tab { border-radius:9999px; padding:10px 16px; font-size:14px; font-weight:700; white-space:nowrap; }
.tab.selected { background:#25262b; color:#ffffff; }
.tab.plain { background:transparent; color:#495057; font-weight:400; }
.hero { flex:0 0 84px; height:84px; padding:12px 32px; display:flex; flex-direction:column;
justify-content:center; gap:4px; }
.hero h1 { margin:0; font-size:22px; font-weight:800; color:#212529; letter-spacing:-0.3px; }
.hero p { margin:0; font-size:14px; color:#495057; }
.courses { flex:1; padding:14px 32px 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card { border:1px solid #dee2e6; border-radius:8px; overflow:hidden; display:flex; flex-direction:column; background:#ffffff; }
.thumb { height:132px; position:relative; }
.thumb.c1 { background:linear-gradient(135deg,#00c471 0%,#e3fafc 100%); }
.thumb.c2 { background:linear-gradient(135deg,#1098ad 0%,#e7f5ff 100%); }
.thumb.c3 { background:linear-gradient(135deg,#25262b 0%,#00a760 100%); }
.cardbody { padding:12px 14px 14px; display:flex; flex-direction:column; gap:7px; }
.badges { display:flex; gap:6px; }
.badge { border-radius:4px; padding:2px 8px; font-size:11px; font-weight:700; line-height:1.64;
text-transform:uppercase; letter-spacing:0.02em; }
.badge.info { background:#e7f5ff; color:#228be6; }
.badge.cyan { background:#e3fafc; color:#1098ad; }
.card h3 { margin:0; font-size:15px; font-weight:700; color:#212529; line-height:1.3; }
.card .instr { margin:0; font-size:13px; color:#495057; }
.meta { display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
.rating { font-size:12px; color:#adb5bd; }
.price { font-size:15px; font-weight:700; color:#212529; }
footer { flex:0 0 40px; height:40px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-top:1px solid #dee2e6; font-size:12px; color:#495057; }
</style></head>
<body>
<nav class="gnb">
<p class="logo"><span class="dot"></span>Inflearn</p>
<div class="searchbar"><span>Search for courses, mentors, roadmaps</span><button aria-hidden="true"></button></div>
<div class="navactions">
<button class="nav-action">Roadmaps</button>
<button class="nav-action">Community</button>
<button class="nav-cta">Sign up</button>
</div>
</nav>
<div class="subnav">
<span class="tab selected">All</span>
<span class="tab plain">Backend</span>
<span class="tab plain">Frontend</span>
<span class="tab plain">DevOps</span>
<span class="tab plain">Data Science</span>
</div>
<section class="hero">
<h1>Grow your career, one course at a time.</h1>
<p>Real instructors. Practical curriculum. Learn on your own schedule.</p>
</section>
<section class="courses">
<div class="card">
<div class="thumb c1"></div>
<div class="cardbody">
<div class="badges"><span class="badge info">New</span><span class="badge cyan">Hands-on</span></div>
<h3>Backend Fundamentals with Spring</h3>
<p class="instr">by Jamie Lee</p>
<div class="meta"><span class="rating">★ 4.9 (1,204)</span><span class="price">$49.00</span></div>
</div>
</div>
<div class="card">
<div class="thumb c2"></div>
<div class="cardbody">
<div class="badges"><span class="badge cyan">Roadmap</span></div>
<h3>Frontend Career Roadmap 2026</h3>
<p class="instr">by Alex Kim</p>
<div class="meta"><span class="rating">★ 4.8 (860)</span><span class="price">$39.00</span></div>
</div>
</div>
<div class="card">
<div class="thumb c3"></div>
<div class="cardbody">
<div class="badges"><span class="badge info">Bestseller</span></div>
<h3>Cloud Infrastructure & DevOps</h3>
<p class="instr">by Morgan Park</p>
<div class="meta"><span class="rating">★ 4.9 (2,013)</span><span class="price">$59.00</span></div>
</div>
</div>
</section>
<footer>
<span>© Inflearn · Learn without limits</span>
<span>Courses · Roadmaps · Community</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1b18;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1b18;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1b18; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #7a7972; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ce9a60; color: #000000;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #1a1b18;
border: 1px solid #ce9a60; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1b18;
border: 1px solid #c6c6c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7972; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; background: #ce9a60; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Inkwell Press</title>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;font-family:'Cabin','Trebuchet MS',sans-serif;color:#3d3c39;}
*{box-sizing:border-box;}
.announce{position:absolute;top:0;left:0;width:960px;height:30px;background:#1a1b18;color:#fff;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;}
.nav{position:absolute;top:30px;left:0;width:960px;height:60px;background:#fff;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-family:Poppins,sans-serif;font-weight:700;font-size:20px;color:#1a1b18;}
.logo span{color:#ce9a60;}
.navlinks{display:flex;gap:26px;font-size:13px;font-weight:600;color:#1a1b18;}
.navicons{font-size:12px;color:#3d3c39;}
.hero{position:absolute;top:90px;left:0;width:960px;height:260px;background:#f7eedd;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;}
.hero h1{font-family:Poppins,sans-serif;font-weight:700;font-size:42px;letter-spacing:-0.5px;color:#1a1b18;margin:0 0 12px 0;}
.hero p{font-size:15px;color:#3d3c39;width:460px;margin:0 0 20px 0;line-height:1.5;}
.btnrow{display:flex;gap:12px;}
.btn-primary{background:#ce9a60;color:#fff;border-radius:8px;padding:13px 26px;font-size:14px;font-weight:600;}
.btn-secondary{border:1.5px solid #1a1b18;color:#1a1b18;border-radius:8px;padding:12px 25px;font-size:14px;font-weight:600;}
.sectitle{position:absolute;top:378px;left:36px;font-family:Poppins,sans-serif;font-size:20px;font-weight:600;color:#1a1b18;}
.grid{position:absolute;top:420px;left:36px;width:888px;height:190px;display:flex;gap:18px;}
.card{width:207px;background:#fff;border-radius:8px;padding:0;position:relative;}
.imgbox{width:207px;height:120px;border-radius:8px;margin-bottom:8px;}
.imgbox.a{background:linear-gradient(135deg,#f0e0c0,#ce9a60);}
.imgbox.b{background:linear-gradient(135deg,#e8dcc8,#b78c24);}
.imgbox.c{background:linear-gradient(135deg,#f7eedd,#d9c39a);}
.imgbox.d{background:linear-gradient(135deg,#e0c9a3,#8a6a3a);}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;border-radius:4px;padding:4px 10px;}
.badge.bestseller{background:#ce9a60;color:#fff;}
.badge.new{background:#1a1b18;color:#fff;}
.title{font-family:Poppins,sans-serif;font-size:16px;font-weight:600;color:#1a1b18;margin-bottom:4px;}
.price{font-family:Poppins,sans-serif;font-size:18px;font-weight:600;color:#1a1b18;}
</style>
<div class="announce">Free Shipping on Orders Over $75 — New Fall Collection Live</div>
<div class="nav">
<div class="logo">Inkwell Press</div>
<div class="navlinks"><span>Planners</span><span>Discs</span><span>Notebooks</span><span>Gifts</span></div>
<div class="navicons">Search · Cart (0)</div>
</div>
<div class="hero">
<h1>Writing things down is good for you.</h1>
<p>Disc-bound planners in caramel and cream, designed to make daily scheduling feel like self-care.</p>
<div class="btnrow">
<div class="btn-primary">Shop Planners</div>
<div class="btn-secondary">Take the Quiz</div>
</div>
</div>
<div class="sectitle">Bestselling Planners</div>
<div class="grid">
<div class="card">
<div class="imgbox a"><div class="badge bestseller">Bestseller</div></div>
<div class="title">Classic Weekly Disc Planner</div>
<div class="price">$48.00</div>
</div>
<div class="card">
<div class="imgbox b"><div class="badge new">New</div></div>
<div class="title">Undated Daily Journal</div>
<div class="price">$32.00</div>
</div>
<div class="card">
<div class="imgbox c"></div>
<div class="title">Cover Refill 6-Pack</div>
<div class="price">$22.00</div>
</div>
<div class="card">
<div class="imgbox d"></div>
<div class="title">Leather Disc Tote</div>
<div class="price">$68.00</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00b9ff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00b9ff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #15181e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b9ff; color: #15181e;
border: 1px solid #15181e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00b9ff; color: #000000;
border: 1px solid #27c3fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #039fdb; color: #15181e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Imweb</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#15181e; box-sizing:border-box;
font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #dbdee3; background:#ffffff; }
.brand { font-size:18px; font-weight:700; color:#15181e; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#15181e; opacity:0.75; }
.nav-right { display:flex; align-items:center; gap:14px; }
.icon-pill { width:28px; height:28px; border-radius:9999px; background:rgba(113,118,128,0.05);
display:flex; align-items:center; justify-content:center; box-shadow:none; }
.icon-pill span { width:9px; height:9px; border:1.4px solid #bcc0c6; border-radius:50%; display:block; }
.btn-ink { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Pretendard,sans-serif;
background:#15181e; color:#ffffff; border:none; border-radius:8px; height:36px; padding:0 16px;
font-size:13px; font-weight:600; box-shadow:none; white-space:nowrap; }
.hero { padding:26px 40px 18px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.eyebrow { font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#ff50da;
margin:0 0 8px; }
.hero h1 { font-size:44px; font-weight:700; line-height:1.0; letter-spacing:normal; color:#15181e; margin:0; }
.dots { display:flex; gap:6px; margin-top:12px; }
.dots span { width:6px; height:6px; border-radius:50%; background:#bcc0c6; }
.dots span.on { background:#15181e; }
.hero p { font-size:14px; line-height:1.5; color:#4b515b; margin:12px 0 0; max-width:420px; }
.hero-cta { display:flex; gap:12px; margin-top:16px; }
.btn-ink-lg { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Pretendard,sans-serif;
background:#15181e; color:#ffffff; border:none; border-radius:8px; height:40px; padding:0 20px;
font-size:14px; font-weight:600; box-shadow:none; }
.btn-outline { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Pretendard,sans-serif;
background:#ffffff; color:#4b515b; border:1px solid #dbdee3; border-radius:8px; height:40px; padding:0 20px;
font-size:14px; font-weight:600; box-shadow:none; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:14px 40px 18px; }
.feat-card { background:#ffffff; border-radius:12px; padding:14px; box-shadow:none; }
.feat-swatch { width:32px; height:32px; border-radius:8px; background:#f8f9fb; position:relative; }
.feat-swatch::after { content:''; position:absolute; width:14px; height:14px; border-radius:4px;
top:9px; left:9px; }
.feat-swatch.a::after { background:#00b9ff; }
.feat-swatch.b::after { background:#15181e; }
.feat-swatch.c::after { background:#2dc5ff; }
.feat-card h3 { font-size:16px; font-weight:700; color:#15181e; margin:10px 0 0; }
.feat-card p { font-size:12px; line-height:1.4; color:#717680; margin:6px 0 0; }
.stats { background:#00b9ff; padding:16px 40px; display:flex; align-items:center; justify-content:space-between; }
.stats-left h2 { font-size:20px; font-weight:700; line-height:1.25; color:#ffffff; margin:0; max-width:280px; }
.stats-left span { display:block; font-size:11px; color:#81dcff; margin-top:6px; }
.stat-bars { display:flex; align-items:flex-end; gap:8px; height:64px; position:relative; }
.stat-bars .peak-label { position:absolute; top:-16px; right:0; font-size:10px; font-weight:600; color:#ffffff; }
.sbar { width:18px; border-radius:4px 4px 0 0; background:rgba(255,255,255,0.55); }
.sbar.peak { background:#ffffff; }
footer { height:32px; border-top:1px solid #dbdee3; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; }
footer span { font-size:11px; color:#9fa3ab; }
</style></head>
<body>
<nav>
<p class="brand">Imweb</p>
<div class="navlinks">
<span>Features</span><span>Templates</span><span>Pricing</span><span>Experts</span><span>Story</span>
</div>
<div class="nav-right">
<div class="icon-pill"><span></span></div>
<button class="btn-ink">Start Free</button>
</div>
</nav>
<section class="hero">
<p class="eyebrow">Built for Your Brand</p>
<h1>Make Sales.</h1>
<div class="dots"><span class="on"></span><span></span><span></span></div>
<p>Design, launch, and grow your brand — no developer needed.</p>
<div class="hero-cta">
<button class="btn-ink-lg">Start Free Today</button>
<button class="btn-outline">See Templates</button>
</div>
</section>
<section class="features">
<div class="feat-card">
<div class="feat-swatch a"></div>
<h3>Design is easy</h3>
<p>Pick a template built by real brands and make it yours in minutes.</p>
</div>
<div class="feat-card">
<div class="feat-swatch b"></div>
<h3>Operations are easy</h3>
<p>Payments, bookings, and inventory run in one connected dashboard.</p>
</div>
<div class="feat-card">
<div class="feat-swatch c"></div>
<h3>Marketing is easy</h3>
<p>Built-in tools help your first customers find you, faster.</p>
</div>
</section>
<section class="stats">
<div class="stats-left">
<h2>The fastest-growing brand builder</h2>
<span>Cumulative sites created, 2021 → 2024</span>
</div>
<div class="stat-bars">
<span class="peak-label">800K+</span>
<div class="sbar" style="height:16px"></div>
<div class="sbar" style="height:26px"></div>
<div class="sbar" style="height:38px"></div>
<div class="sbar peak" style="height:60px"></div>
</div>
</section>
<footer>
<span>© Imweb</span>
<span>Privacy · Terms · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #001935; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #001935; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87929f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #001020; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #001935; color: #ffffff;
border: 1px solid #001020; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #001935; color: #f5f5f5;
border: 1px solid #273c54; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87929f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #001832; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#001935; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topnav { height:48px; display:flex; align-items:center; padding:0 30px; background:#001020; }
.word { font-weight:800; font-size:20px; }
.feed { width:520px; margin:14px auto 0; display:flex; flex-direction:column; gap:8px; }
.card { background:#0B2A45; border-radius:8px; overflow:hidden; }
.chead { display:flex; align-items:center; gap:10px; padding:12px 14px 8px; }
.av { width:36px; height:36px; border-radius:6px; flex-shrink:0; }
.bname { font-size:16px; font-weight:700; flex:1; }
.follow { border:1.5px solid #00CF35; color:#00CF35; font-size:12px; padding:5px 12px; border-radius:6px; }
.media { height:150px; background:linear-gradient(150deg,#264a6e,#0b2a45 70%); }
.cbody { padding:10px 14px; }
.ptext { font-size:15px; line-height:1.4; }
.tags { font-size:13px; color:#8A9AAE; margin-top:6px; }
.footer { display:flex; align-items:center; padding:10px 14px; border-top:1px solid #13395B; gap:16px; }
.notes { font-size:13px; font-weight:600; color:#8A9AAE; margin-right:auto; }
.icon { color:#8A9AAE; font-size:16px; }
.reblog { border-left:2px solid #36465D; margin:0 14px 10px 40px; padding-left:12px; }
.rname { color:#00B8FF; font-weight:700; font-size:13px; }
.rtext { font-size:14px; margin-top:2px; }
</style></head>
<body>
<div class="topnav"><span class="word">t · Tumblr (iOS)</span></div>
<div class="feed">
<div class="card">
<div class="chead"><div class="av" style="background:#5C6B80"></div><span class="bname">wanderlust-archive</span><span class="follow">Follow</span></div>
<div class="media"></div>
<div class="cbody">
<div class="reblog"><span class="rname">field-notebook</span><div class="rtext">the light out here does something to your brain</div></div>
<div class="tags">#travel #film #analog</div>
</div>
<div class="footer"><span class="notes">1,204 notes</span><span class="icon">↩</span><span class="icon">⟲</span><span class="icon">♥</span><span class="icon">↗</span></div>
</div>
<div class="card">
<div class="chead"><div class="av" style="background:#8A9AAE"></div><span class="bname">quiet-hours</span><span class="follow" style="background:#00CF35;border-color:#00CF35;color:#001935">Following</span></div>
<div class="cbody" style="padding-top:12px">
<div class="ptext">"You do not have to be good. You do not have to walk on your knees for a hundred miles through the desert."</div>
<div class="tags">#poetry #mary oliver</div>
</div>
<div class="footer"><span class="notes">842 notes</span><span class="icon">↩</span><span class="icon">⟲</span><span class="icon">♥</span><span class="icon">↗</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.4px; background: #350b60; color: #ffcc33;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.4px; background: transparent; color: #350b60;
border: 1px solid #350b60; border-radius: 9999px;
padding: 12px 30px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #ffcc33; color: #350b60;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#08003c; color:#ffffff; box-sizing:border-box;
font-family:'Century Gothic', 'Futura', Verdana, sans-serif; letter-spacing:0.1px; }
* { box-sizing:border-box; }
nav { height:62px; background:#350b60; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { color:#ffcc33; font-size:19px; font-weight:700; margin:0; letter-spacing:0.5px; }
.navlinks { display:flex; gap:24px; }
.navlinks span { color:#fff; opacity:0.85; font-size:13px; }
.cart { color:#ffcc33; font-size:13px; font-weight:600; }
main { display:flex; height:578px; background:linear-gradient(180deg,#350b60 0%,#18084d 55%,#08003c 100%); }
.stage { width:340px; display:flex; align-items:center; justify-content:center; }
.ring2 { width:130px; height:130px; border-radius:999px; border:14px solid #ffcc33;
box-shadow:0 0 40px rgba(255,204,51,0.35), 0 20px 40px rgba(0,0,0,0.5); position:relative; }
.ring2::after { content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:20px; height:20px;
background:#fce2e6; border-radius:999px; box-shadow:0 0 12px rgba(252,226,230,0.6); }
.info { flex:1; padding:30px 36px; display:flex; flex-direction:column; gap:12px; }
.badge { display:inline-flex; background:#fce2e6; color:#350b60; font-size:11px; font-weight:700; letter-spacing:0.4px;
text-transform:uppercase; border-radius:999px; padding:4px 12px; width:fit-content; }
h1 { font-size:26px; font-weight:700; margin:0; letter-spacing:0.2px; color:#fff; }
.sub { font-size:14px; color:#e6d9f5; margin:0; max-width:440px; line-height:1.5; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:4px; }
.price { font-size:24px; font-weight:700; color:#ffcc33; }
.actions { display:flex; gap:12px; margin-top:6px; }
.btn-primary { background:#ffcc33; color:#350b60; border-radius:4px; height:48px; padding:0 28px; display:flex;
align-items:center; font-weight:700; font-size:14px; }
.btn-secondary { background:transparent; border:1px solid #ffcc33; color:#ffcc33; border-radius:4px; height:48px;
padding:0 22px; display:flex; align-items:center; font-size:13px; font-weight:600; }
.give-back { margin-top:auto; border-top:1px solid rgba(255,255,255,0.15); padding-top:12px; font-size:12px; color:#c7b3e0; }
.give-back b { color:#ffcc33; }
</style></head>
<body>
<nav>
<p class="brand">Automic Gold</p>
<div class="navlinks"><span>Rings</span><span>Earrings</span><span>Pride Collection</span><span>Custom</span></div>
<span class="cart">Bag · 1</span>
</nav>
<main>
<div class="stage"><div class="ring2"></div></div>
<div class="info">
<span class="badge">Pride Collection</span>
<h1>The Solstice Signet — 18K Vermeil</h1>
<p class="sub">A bold, jewel-toned signet ring cast in 18K gold vermeil — designed to be worn as a statement, not a whisper.</p>
<div class="price-row"><span class="price">$285</span></div>
<div class="actions">
<div class="btn-primary">Add to Bag</div>
<div class="btn-secondary">Custom Engraving</div>
</div>
<div class="give-back"><b>10% of proceeds</b> support LGBTQ+ community organizations year-round.</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #353535;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #353535;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #353535; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #767472; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.25; letter-spacing: 1px; background: #ff0000; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.25; letter-spacing: 1px; background: #ffffff; color: #353535;
border: 1px solid #ff0000; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #353535;
border: 1px solid #cccccc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767472; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.3px; background: #e7e5e2; color: #767472;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#353535; box-sizing:border-box;
font-family:'Proxima Nova', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#fff; border-bottom:1px solid #d7d4ce; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.brand { font-weight:600; font-size:19px; color:#ff0000; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:13px; color:#353535; }
.filter { height:40px; background:#fff; border-bottom:1px solid #d7d4ce; display:flex; align-items:center;
gap:20px; padding:0 32px; }
.filter span { font-size:13px; color:#767472; padding-bottom:8px; }
.filter span.on { color:#353535; border-bottom:2px solid #ff0000; }
.hero { height:190px; background:#353535; position:relative; display:flex; align-items:center; padding:0 32px;
background-image:linear-gradient(rgba(53,53,53,0.45),rgba(53,53,53,0.45)), radial-gradient(circle at 70% 40%,#888,#222); }
.hero h1 { color:#fff; font-size:32px; font-weight:600; margin:0 0 10px; letter-spacing:-0.5px; }
.btn { display:inline-block; background:#ff0000; color:#fff; font-size:13px; font-weight:600; letter-spacing:1px;
text-transform:uppercase; padding:12px 24px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; padding:16px 32px; background:#d7d4ce; }
.card { background:#eceaeb; padding:12px; }
.cover { aspect-ratio:1/1; margin-bottom:8px; }
.artist { font-size:12px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase; margin:0 0 4px; }
.title { font-size:13px; margin:0 0 4px; }
.price { font-size:16px; font-weight:600; margin:0 0 2px; }
.edition { font-size:10px; color:#767472; }
.avail { font-size:11px; color:#116633; }
footer { position:absolute; bottom:0; left:0; right:0; height:56px; background:#353535; color:#e7e5e2;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
</style></head>
<body>
<nav>
<div class="brand">Eyestorm</div>
<div class="navlinks"><span>Artists</span><span>Editions</span><span>Sculpture</span><span>About</span></div>
</nav>
<div class="filter"><span class="on">All Artists</span><span>Damien Hirst</span><span>Marc Quinn</span><span>Yoko Ono</span></div>
<div class="hero"><h1>Limited edition prints,<br>certified provenance.</h1><span class="btn">Shop the Collection</span></div>
<div class="grid">
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#ff0000,#a80000);"></div>
<p class="artist">Damien Hirst</p><p class="title">Butterfly Spin</p><p class="price">$4,200</p><p class="edition">Edition of 50</p><p class="avail">Available</p></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#224488,#101c33);"></div>
<p class="artist">Marc Quinn</p><p class="title">Self Portrait</p><p class="price">$6,800</p><p class="edition">Artist Proof</p><p class="avail">Available</p></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#767472,#353535);"></div>
<p class="artist">Yoko Ono</p><p class="title">Wish Tree</p><p class="price">$2,100</p><p class="edition">Open Edition</p><p class="avail">Available</p></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#116633,#0a3d1f);"></div>
<p class="artist">Damien Hirst</p><p class="title">Spot Print No. 4</p><p class="price">$3,500</p><p class="edition">Edition of 75</p><p style="font-size:11px;color:#767472;">Sold Out</p></div>
</div>
<footer><span>© Eyestorm — Limited edition art</span><span>Certificate of Authenticity · Shipping · Contact</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdfdfd; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdfdfd; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #4885cd; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #fdfdfd; color: #4885cd;
border: 1px solid #4885cd; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fdfdfd; color: #222222;
border: 1px solid #c2c2c2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.25; letter-spacing: 0.8px; background: #e8e8e8; color: #7a7a7a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Lato',Arial,sans-serif; background:#fdfdfd; color:#222222; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #ececec;}
.logo{font-family:'EB Garamond',Georgia,serif;font-size:22px;color:#111111;}
.navlinks{display:flex;gap:22px;font-size:13px;letter-spacing:0.5px;color:#222222;}
.navlinks .on{color:#4885cd;}
.search{font-size:13px;color:#7a7a7a;background:#f5f5f6;border-radius:8px;padding:8px 14px;width:150px;}
.hero{height:230px;display:flex;background:#eeeeee;}
.herotext{width:42%;display:flex;flex-direction:column;justify-content:center;padding:0 32px;}
.herotext .kicker{font-family:'EB Garamond',Georgia,serif;font-size:14px;font-style:italic;color:#888888;margin-bottom:6px;}
.herotext h1{font-family:'EB Garamond',Georgia,serif;font-size:36px;font-weight:400;color:#111111;margin:0 0 12px;line-height:1.15;}
.herotext p{font-size:14px;color:#222222;margin:0 0 16px;max-width:280px;}
.cta{display:inline-block;background:#4885cd;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.5px;padding:10px 20px;border-radius:4px;width:fit-content;}
.heroimg{width:58%;position:relative;overflow:hidden;background:#171717;}
.print1{position:absolute;left:60px;top:24px;width:150px;height:182px;background:linear-gradient(160deg,#de6d1a,#d1b38d);}
.print2{position:absolute;left:230px;top:50px;width:130px;height:130px;background:linear-gradient(160deg,#4885cd,#888929);}
.section{padding:16px 32px 0;}
.sectitle{font-family:'EB Garamond',Georgia,serif;font-size:22px;color:#111111;border-bottom:1px solid #e0e0e0;padding-bottom:10px;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:150px;}
.thumb{height:100px;background:#eeeeee;margin-bottom:8px;}
.aname{font-family:'EB Garamond',Georgia,serif;font-size:15px;color:#111111;}
.artist{font-family:'EB Garamond',Georgia,serif;font-size:14px;color:#222222;margin-top:2px;}
.price{font-size:15px;font-weight:700;color:#ce0a0a;margin-top:6px;}
.avail{display:inline-block;font-size:11px;color:#222222;border:1px solid #e0e0e0;background:#f5f5f6;border-radius:4px;padding:2px 6px;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#121212;color:#fff;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kumi Contemporary</div>
<div class="navlinks"><div class="on">Ukiyo-e</div><div>Pop Art</div><div>Screenprint</div><div>Artists</div></div>
<div class="search">Search works...</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">New Arrivals</div>
<h1>Contemporary editions, catalogued with care.</h1>
<p>Japanese pop art and screenprint, framed by an editorial eye.</p>
<div class="cta">View Collection</div>
</div>
<div class="heroimg"><div class="print1"></div><div class="print2"></div></div>
</div>
<div class="section">
<div class="sectitle">Featured Works</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#de6d1a,#d1b38d)"></div><div class="aname">Tidewater Study No. 4</div><div class="artist">R. Anzai</div><div class="price">$1,200</div><div class="avail">Available</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4885cd,#5a91d2)"></div><div class="aname">Neon Koi</div><div class="artist">M. Fujita</div><div class="price">$980</div><div class="avail">Available</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#888929,#d1b38d)"></div><div class="aname">Paper Lantern Series III</div><div class="artist">K. Ito</div><div class="price">$1,450</div><div class="avail">Sold</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ce0a0a,#de6d1a)"></div><div class="aname">Red Screen Study</div><div class="artist">S. Nakada</div><div class="price">$860</div><div class="avail">Available</div></div>
</div>
</div>
<div class="footer"><span>© Kumi Contemporary Gallery</span><span>Enquire · Shipping</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #7b8cde;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #7b8cde;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: #7b8cde; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #557777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #dadef4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #557777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f2f2f2; color: #555555;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:'Be Vietnam Pro','Nunito Sans',Arial,sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.promo{height:32px;background:#d2de31;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#1a1a1a;}
.nav{height:64px;background:#fff;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-family:'Geologica','Be Vietnam Pro',sans-serif;font-size:19px;font-weight:800;}
.navlinks{display:flex;gap:20px;font-size:15px;font-weight:600;}
.hero{height:220px;background:#1a1a2e;color:#fff;display:flex;align-items:center;padding:0 40px;position:relative;}
.hero:before{content:'';position:absolute;inset:0;background:#1a1a1a;opacity:.45;}
.herobody{position:relative;z-index:1;width:420px;}
.herobody h1{font-family:'Geologica','Be Vietnam Pro',sans-serif;font-size:36px;font-weight:800;letter-spacing:-.5px;line-height:1.15;margin:0 0 12px;}
.herobody p{font-size:14px;color:#e2e2e2;margin:0 0 16px;max-width:340px;}
.btn{display:inline-block;background:#108474;color:#fff;font-family:'Kanit','Geologica',sans-serif;font-size:15px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:12px 26px;border-radius:8px;}
.grid{display:flex;gap:14px;padding:16px 30px 0;}
.card{width:212px;background:#fff;border:1px solid #e9e9e9;border-radius:8px;padding:14px;}
.thumb{height:100px;background:#f2f2f2;border-radius:8px;margin-bottom:8px;}
.tag{display:inline-block;background:#108474;color:#fff;font-family:'Kanit',Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-radius:4px;padding:3px 8px;margin-bottom:6px;}
.ctitle{font-size:16px;font-weight:600;margin:0;}
.cprice{font-size:16px;font-weight:600;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:96px;background:#0a0a0a;color:#fff;border-top:3px solid #108474;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="promo">Confluence Outdoor · Free shipping on kayaks over $500</div>
<div class="nav">
<div class="logo">Pelican Sport</div>
<div class="navlinks"><div>Kayaks</div><div>SUP</div><div>Paddles</div><div>Accessories</div></div>
</div>
<div class="hero">
<div class="herobody">
<h1>Precision engineering for open water.</h1>
<p>Kayaks and paddle gear built to the standard of commercial operators.</p>
<div class="btn">Shop Kayaks</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="tag">Kayak</div><div class="thumb"></div><div class="ctitle">Trailblazer 100 Kayak</div><div class="cprice">$399.99</div></div>
<div class="card"><div class="tag" style="background:#7b8cde;">Touring</div><div class="thumb" style="background:#c1e6e6;"></div><div class="ctitle">Sentinel 100X Kayak</div><div class="cprice">$549.99</div></div>
<div class="card"><div class="tag" style="background:#ee9441;">Sale</div><div class="thumb" style="background:#e9e9e9;"></div><div class="ctitle">Carbon Hybrid Paddle</div><div class="cprice">$89.99</div></div>
<div class="card"><div class="tag" style="background:#a89cc8;">SUP</div><div class="thumb" style="background:#0c5132;"></div><div class="ctitle">Inflatable SUP Board</div><div class="cprice">$449.99</div></div>
</div>
<div class="footer"><span>© Pelican Sport — Confluence Outdoor</span><span>Dealer Locator Manuals Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff6464; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff6464; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c3636; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #202124; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6464; color: #202124;
border: 1px solid #202124; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff6464; color: #111111;
border: 1px solid #d95757; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c3636; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #db595a; color: #202124;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#202124; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:600; color:#ff6464; }
.navlinks { display:flex; gap:24px; font-size:14px; color:#202124; }
.navlinks .on { color:#ff6464; }
.header-cta { background:#ff6464; color:#fff; border-radius:4px; height:36px; padding:0 16px;
display:flex; align-items:center; font-size:13px; }
.hero { text-align:center; padding:20px 40px 22px; }
.hero h1 { font-size:34px; font-weight:600; line-height:1.3; letter-spacing:-0.4px; margin:0 0 10px; color:#202124; }
.hero p { font-size:14px; color:#606165; margin:0 0 16px; }
.hero-ctas { display:flex; justify-content:center; gap:12px; }
.btn-primary { background:#ff6464; color:#fff; border-radius:4px; height:44px; padding:0 22px;
display:flex; align-items:center; font-size:14px; }
.btn-outline { background:#fff; color:#ff6464; border:1px solid #ff6464; border-radius:4px; height:44px;
padding:0 22px; display:flex; align-items:center; font-size:14px; }
.plans { display:flex; gap:16px; padding:6px 40px; }
.plan { flex:1; background:#fff; border:1px solid #ebebeb; border-radius:10px; overflow:hidden; }
.plan .top { padding:16px 18px 10px; }
.plan .top .tag { font-size:11px; color:#747579; }
.plan .top h3 { font-size:16px; font-weight:600; margin:6px 0; color:#202124; }
.plan .top p { font-size:12px; color:#606165; margin:0 0 6px; line-height:1.4; }
.plan .foot { background:#f6f6f6; padding:14px 18px; border-radius:0 0 10px 10px; }
.plan .price { font-size:19px; font-weight:600; color:#202124; }
.plan.hi .top { background:#fff8f8; }
.plan .foot .btn-mini { display:inline-block; margin-top:8px; background:#ff6464; color:#fff; font-size:11px;
border-radius:4px; padding:6px 12px; }
.subscribe { margin:14px 40px 0; background:#fff8f8; border-radius:10px; padding:16px 22px;
display:flex; justify-content:space-between; align-items:center; }
.subscribe .txt h4 { font-size:15px; margin:0 0 2px; color:#202124; }
.subscribe .txt p { font-size:12px; margin:0; color:#606165; }
.subscribe .fields { display:flex; gap:8px; }
.subscribe input-like { background:#f6f6f6; border-radius:4px; height:36px; width:130px; display:flex;
align-items:center; padding:0 12px; font-size:12px; color:#747579; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #ebebeb; padding:12px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#747579; }
</style></head>
<body>
<nav>
<div class="brand">Stibee</div>
<div class="navlinks"><span class="on">Features</span><span>Pricing</span><span>Resources</span><span>Help</span><span>Log in</span></div>
<div class="header-cta">Start free</div>
</nav>
<div class="hero">
<h1>Send emails your customers actually love</h1>
<p>Forget the complex code and focus on the content.</p>
<div class="hero-ctas">
<div class="btn-primary">Start for free</div>
<div class="btn-outline">Talk to sales</div>
</div>
</div>
<div class="plans">
<div class="plan"><div class="top"><span class="tag">FREE</span><h3>Starter</h3><p>Up to 2,000 subscribers, all core sending features.</p></div>
<div class="foot"><span class="price">$0</span><div class="btn-mini">Choose</div></div></div>
<div class="plan hi"><div class="top"><span class="tag">MOST POPULAR</span><h3>Growth</h3><p>Automation, A/B testing, and segmentation for growing lists.</p></div>
<div class="foot"><span class="price">$29/mo</span><div class="btn-mini">Choose</div></div></div>
<div class="plan"><div class="top"><span class="tag">TEAM</span><h3>Pro</h3><p>Shared workspaces, roles, and priority delivery support.</p></div>
<div class="foot"><span class="price">$79/mo</span><div class="btn-mini">Choose</div></div></div>
</div>
<div class="subscribe">
<div class="txt"><h4>Get product news in your inbox</h4><p>One short email a month, no spam.</p></div>
<div class="fields"><span style="background:#f6f6f6;border-radius:4px;height:36px;width:150px;display:flex;align-items:center;padding:0 12px;font-size:12px;color:#747579;">[email protected]</span>
<div class="btn-primary" style="height:36px;">Subscribe</div></div>
</div>
<footer><span>© Stibee</span><span>Stibee · Blog · Careers · Privacy</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2a62db; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2a62db; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9ab3e9; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2453ba; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2a62db; color: #ffffff;
border: 1px solid #2453ba; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2a62db; color: #f5f5f5;
border: 1px solid #4a7adf; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ab3e9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2960d6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f8fa; color:#0a101a; box-sizing:border-box;
font-family: Saans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.banner { height:26px; background:#0095ff; color:#ffffff; display:flex; align-items:center; justify-content:center;
font-size:12px; font-weight:530; letter-spacing:0.1px; }
.banner b { font-weight:650; margin-right:6px; }
nav { height:54px; background:#ffffff; border-bottom:1px solid #d9e2ec; display:flex; align-items:center;
justify-content:space-between; padding:0 28px; }
.logo { font-size:16px; font-weight:650; color:#0a101a; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:500; color:#0a101a; }
.navlinks .active { color:#2453ba; }
.navcta { display:flex; align-items:center; gap:10px; }
.quiet { font-size:13px; font-weight:530; color:#537696; }
.btn-sec { background:#ffffff; color:#000000; border:1px solid #d9e2ec; border-radius:4px; height:28px; padding:0 11px;
font-size:12px; font-weight:530; display:flex; align-items:center; }
.btn-pri { background:#2a62db; color:#ffffff; border-radius:4px; height:28px; padding:0 11px;
font-size:12px; font-weight:530; display:flex; align-items:center; }
.main { display:flex; gap:20px; padding:20px 28px; height:calc(640px - 26px - 54px); }
.left { flex:1.55; display:flex; flex-direction:column; gap:16px; min-width:0; }
.right { flex:1; display:flex; flex-direction:column; gap:14px; min-width:0; }
.spot { background:#ffffff; border-radius:5px; padding:22px 26px; box-shadow:rgba(0,0,0,0.25) 0px 0px 35px 0px; }
.spot .kicker { font-size:11px; font-weight:530; color:#6e7a84; text-transform:uppercase; letter-spacing:0.6px; margin-bottom:6px; }
.spot .metric { font-size:40px; font-weight:650; line-height:1.05; color:#0a101a; }
.spot .sub { font-size:13px; font-weight:400; color:#486581; margin-top:6px; }
.chartwrap { margin-top:14px; height:96px; position:relative; }
.chartwrap svg { width:100%; height:100%; display:block; }
.featrow { display:flex; gap:16px; }
.feat { flex:1; background:#ffffff; border:1px solid #d9e2ec; border-radius:20px; padding:18px; min-width:0; }
.feat .ftitle { font-size:14px; font-weight:650; color:#0a101a; margin-bottom:6px; }
.feat .fbody { font-size:12px; font-weight:400; line-height:1.5; color:#6e7a84; }
.feat .ftag { display:inline-block; margin-top:10px; background:#ffffff; color:#243b53; border:1px solid #d9e2ec;
border-radius:360px; padding:3px 10px; font-size:10px; font-weight:500; }
.highlight { display:inline-flex; align-self:flex-start; background:#0a101a; color:#ffffff; border-radius:360px;
padding:4px 12px; font-size:11px; font-weight:500; letter-spacing:0.4px; }
.darkpanel { background:#102a43; border-radius:12px; padding:16px 18px; color:#ffffff; flex:1; }
.darkpanel .dtitle { font-size:12px; font-weight:650; color:#ffffff; margin-bottom:10px; }
.drow { display:flex; justify-content:space-between; font-size:11px; padding:7px 0; border-bottom:1px solid #243b53; color:#e5ebf2; }
.drow:last-child { border-bottom:none; }
.drow b { color:#ffffff; font-weight:650; }
.tags { display:flex; flex-wrap:wrap; gap:8px; }
.tag { background:#ffffff; color:#243b53; border:1px solid #d9e2ec; border-radius:360px; padding:4px 12px;
font-size:11px; font-weight:500; }
.search { background:#ffffff; border:1px solid #d9e2ec; border-radius:360px; padding:8px 16px; font-size:12px;
color:#a7adb2; }
</style></head>
<body>
<div class="banner"><b>GLM-5.2 is live.</b> #1 throughput on OpenRouter →</div>
<nav>
<div class="logo">FriendliAI</div>
<div class="navlinks">
<span class="active">Product</span><span>Solutions</span><span>Models</span><span>Developers</span><span>Pricing</span>
</div>
<div class="navcta">
<span class="quiet">Log in</span>
<span class="btn-sec">Talk to an engineer</span>
<span class="btn-pri">Get started</span>
</div>
</nav>
<div class="main">
<div class="left">
<div class="spot">
<div class="kicker">Median throughput · Llama-4-70B, H100 cluster</div>
<div class="metric">12,400 tokens/sec</div>
<div class="sub">Inference performance drives profitability.</div>
<div class="chartwrap">
<svg viewBox="0 0 600 96" preserveAspectRatio="none">
<polyline points="0,70 60,64 120,68 180,50 240,55 300,38 360,42 420,26 480,30 540,14 600,18"
fill="none" stroke="#2a62db" stroke-width="2.5" />
<polygon points="0,70 60,64 120,68 180,50 240,55 300,38 360,42 420,26 480,30 540,14 600,18 600,96 0,96"
fill="#2a62db" opacity="0.08" />
</svg>
</div>
</div>
<div class="featrow">
<div class="feat">
<div class="ftitle">Dedicated Endpoints</div>
<div class="fbody">Reserved GPU capacity tuned for your model, with predictable cost and p99 latency.</div>
<span class="ftag">Inference</span>
</div>
<div class="feat">
<div class="ftitle">Serverless Endpoints</div>
<div class="fbody">Scale-to-zero inference for open and custom models — pay only for tokens served.</div>
<span class="ftag">NVIDIA</span>
</div>
</div>
</div>
<div class="right">
<span class="highlight">HIGHLIGHTS</span>
<div class="darkpanel">
<div class="dtitle">Recent benchmark results</div>
<div class="drow"><span>GLM-5.2, OpenRouter</span><b>#1 throughput</b></div>
<div class="drow"><span>Llama-4-70B, p50 latency</span><b>84ms</b></div>
<div class="drow"><span>Cost per 1M tokens</span><b>-38%</b></div>
<div class="drow"><span>Active endpoints today</span><b>1,204</b></div>
</div>
<div class="tags">
<span class="tag">Model Serving</span>
<span class="tag">Benchmarks</span>
<span class="tag">GPU Cloud</span>
</div>
<div class="search">Search docs</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #212121; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #212121; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #969696; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #212121; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #212121; color: #f5f5f5;
border: 1px solid #434343; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969696; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #454545; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212121; box-sizing:border-box;
font-family:Helvetica, "Hiragino Sans", -apple-system, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:14px; letter-spacing:0.6px; }
.navlinks { display:flex; gap:26px; font-size:12px; letter-spacing:0.6px; color:#212121; }
.hero { height:180px; background:linear-gradient(135deg,#0a0a12,#241f3d 50%,#3a2b52); position:relative; }
.hero .caption { position:absolute; left:40px; bottom:16px; color:#fff; font-size:13px; letter-spacing:0.4px; }
.catbar { display:flex; gap:0; padding:0 40px; border-bottom:1px solid #ededed; }
.catbtn { padding:18px 20px; font-size:13px; color:#999999; }
.catbtn.on { color:#212121; border-bottom:2px solid #212121; }
.catalog { display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:0 40px; }
.item { background:#f8f9fa; height:150px; margin:14px 7px 0; padding:14px; display:flex; align-items:flex-end; }
.item span { font-size:13px; color:#212121; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #ededed; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#999999; }
</style></head>
<body>
<nav>
<div class="brand">teamLab</div>
<div class="navlinks"><span>Art</span><span>Product</span><span>Solutions</span><span>About</span></div>
</nav>
<div class="hero"><div class="caption">Wander, explore, and discover a continuous world</div></div>
<div class="catbar">
<div class="catbtn on">All</div>
<div class="catbtn">Art</div>
<div class="catbtn">Digital Art Museum</div>
<div class="catbtn">Architecture</div>
</div>
<div class="catalog">
<div class="item"><span>Borderless World</span></div>
<div class="item"><span>Flowers and People</span></div>
<div class="item"><span>Forest of Resonating Lamps</span></div>
<div class="item"><span>Crystal Universe</span></div>
<div class="item"><span>Weather Forest</span></div>
<div class="item"><span>Athletics Forest</span></div>
</div>
<footer><span>© teamLab</span><span>teamLab · Careers · About</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #070909;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #070909;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #070909; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #808285; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #e7762b; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fafafa; color: #e7762b;
border: 1px solid #e7762b; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #3a3a3a;
border: 1px solid #bdbebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808285; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #2a7f89; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:'Montserrat','Helvetica Neue',sans-serif; color:#3a3a3a; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e6e6e6;}
.logo{font-size:20px;font-weight:700;color:#070909;letter-spacing:.5px;text-transform:uppercase;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;}
.hero{height:230px;background:#070909;display:flex;align-items:center;padding:0 34px;gap:26px;}
.herotext{width:46%;}
.herotext .eyebrow{font-family:'Open Sans',sans-serif;font-size:12px;font-weight:600;color:#2a7f89;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;}
.herotext h1{font-size:32px;font-weight:600;color:#fff;margin:0 0 10px;line-height:1.2;}
.herotext p{font-family:'Open Sans',sans-serif;font-size:14px;color:#d9d9d9;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#e7762b;color:#fff;font-size:15px;font-weight:600;padding:12px 28px;border-radius:8px;}
.vinylart{flex:1;height:150px;display:flex;align-items:center;justify-content:center;}
.disc{width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,#1a1a1a 0%,#1a1a1a 30%,#e7762b 32%,#e7762b 35%,#1a1a1a 37%);position:relative;}
.disc:before{content:'';position:absolute;left:50%;top:50%;width:16px;height:16px;background:#744e45;border-radius:50%;transform:translate(-50%,-50%);}
.grid{display:flex;gap:16px;padding:24px 34px 0;}
.card{width:206px;background:#fff;border-radius:8px;padding:16px;}
.thumb{aspect-ratio:1/1;height:110px;border-radius:4px;margin-bottom:10px;}
.ptitle{font-family:'Open Sans',sans-serif;font-size:14px;color:#070909;}
.pprice{font-size:16px;font-weight:500;color:#e7762b;margin-top:6px;}
.badge{display:inline-block;background:#2a7f89;color:#fff;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;border-radius:4px;padding:2px 8px;margin-bottom:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#070909;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-family:'Open Sans',sans-serif;font-size:11px;color:#949494;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">United Record Pressing</div>
<div class="navlinks"><div>Pressing</div><div>Packaging</div><div>Mastering</div><div>Contact</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="eyebrow">Nashville Vinyl Since 1949</div>
<h1>Pressed by hand.<br>Played for decades.</h1>
<p>Full-service vinyl pressing for artists and labels who care about the groove.</p>
<div class="cta">Start Your Order</div>
</div>
<div class="vinylart"><div class="disc"></div></div>
</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#e7762b,#744e45)"></div><div class="ptitle">180g Black Vinyl Pressing</div><div class="pprice">from $3.20/unit</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2a7f89,#1e6b73)"></div><div class="ptitle">Custom Sleeve Printing</div><div class="pprice">from $0.85/unit</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#744e45,#070909)"></div><div class="ptitle">Test Pressing Package</div><div class="pprice">$185</div></div>
</div>
<div class="footer"><span>© Vinyl Pressing & Mastering</span><span>Get a Quote · Studio Tour</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #292829;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #292829;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #292829; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #a8a8a8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #bd0100; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #292829;
border: 1px solid #bd0100; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #373737;
border: 1px solid #cac9ca; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a8a8a8; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #bd0100; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#292829; box-sizing:border-box; font-family:'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; padding:0 32px; border-bottom:1px solid #d8d8d8; }
.brand { font-size:20px; font-weight:700; letter-spacing:.5px; }
.navlinks { display:flex; gap:20px; margin:0 auto; }
.navlinks div { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.navlinks div.active { color:#bd0100; border-bottom:2px solid #bd0100; padding-bottom:4px; }
.icons { display:flex; gap:14px; font-size:15px; }
.hero { background:#f7f4f3; height:220px; display:flex; align-items:center; justify-content:center; text-align:center; flex-direction:column; }
.hero h1 { font-size:36px; font-weight:700; margin:0 0 10px; }
.hero .cta { background:#bd0100; color:#fff; font-size:14px; font-weight:600; letter-spacing:.5px; padding:14px 32px; border-radius:8px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:22px 32px; }
.card { background:#fff; border:1px solid #e1dce4; border-radius:20px; overflow:hidden; }
.img { aspect-ratio:1/1; }
.g1 { background:linear-gradient(135deg,#bd0100,#ebdad3); }
.g2 { background:linear-gradient(135deg,#e0beb1,#6c4e71); }
.g3 { background:linear-gradient(135deg,#d8cbda,#292829); }
.g4 { background:linear-gradient(135deg,#f2c94c,#684537); }
.info { padding:12px 16px; }
.name { font-size:16px; font-weight:500; margin-bottom:4px; }
.price { font-size:14px; color:#373737; }
.swatches { display:flex; gap:4px; margin-top:6px; }
.sw { width:16px; height:16px; border-radius:9999px; border:1px solid #d8d8d8; }
.badge { position:relative; top:10px; left:10px; display:inline-block; background:#bd0100; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
</style></head>
<body>
<nav>
<div class="brand">Fenty Beauty</div>
<div class="navlinks"><div class="active">Face</div><div>Eyes</div><div>Lips</div><div>Gloss Bomb</div></div>
<div class="icons">Search ♡ Bag</div>
</nav>
<div class="hero">
<h1>Beauty For All</h1>
<div class="cta">Shop Killawatt</div>
</div>
<div class="grid">
<div class="card"><div class="img g1"><span class="badge">New</span></div><div class="info"><div class="name">Pro Filt'r Foundation</div><div class="price">$40.00</div><div class="swatches"><div class="sw" style="background:#e0beb1"></div><div class="sw" style="background:#ebdad3"></div><div class="sw" style="background:#684537"></div></div></div></div>
<div class="card"><div class="img g2"></div><div class="info"><div class="name">Killawatt Highlighter</div><div class="price">$36.00</div><div class="swatches"><div class="sw" style="background:#f2c94c"></div><div class="sw" style="background:#d8cbda"></div></div></div></div>
<div class="card"><div class="img g3"></div><div class="info"><div class="name">Gloss Bomb Universal Lip Luminizer</div><div class="price">$21.00</div></div></div>
<div class="card"><div class="img g4"></div><div class="info"><div class="name">Snap Shadows Palette</div><div class="price">$25.00</div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f6; color: #272d45;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f6; color: #272d45;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #272d45; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #9a9db1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f2aead; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f4f4f6; color: #272d45;
border: 1px solid #f2aead; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f4f4f6; color: #272d45;
border: 1px solid #c1c2ca; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9db1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #fce7a8; color: #272d45;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f4f4f6; font-family:'Jost','Helvetica Neue',Arial,sans-serif; color:#272d45; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#f4f4f6;border-bottom:1px solid #e5e5eb;}
.logo{font-family:'Big Caslon','Bodoni MT',Georgia,serif;font-size:22px;font-weight:700;color:#272d45;}
.navlinks{display:flex;gap:20px;font-size:13px;text-transform:uppercase;letter-spacing:0.3px;color:#9a9db1;}
.navlinks .active{color:#f2aead;}
.searchpill{width:150px;height:32px;border-radius:9999px;background:#f7f7f8;display:flex;align-items:center;padding:0 14px;font-size:12px;color:#9a9db1;}
.hero{height:180px;background:#fadfde;display:flex;align-items:center;padding:0 34px;}
.herotext h1{font-family:'Big Caslon','Bodoni MT',Georgia,serif;font-size:28px;font-weight:600;margin:0 0 8px;color:#272d45;line-height:1.2;}
.herotext p{font-size:14px;color:#676986;margin:0 0 14px;max-width:360px;}
.herocta{display:inline-block;background:#f2aead;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.3px;padding:11px 22px;border-radius:8px;}
.grid{display:flex;gap:16px;padding:20px 34px 0;}
.card{width:198px;background:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.06);position:relative;}
.thumb{height:130px;}
.badge{position:absolute;top:8px;left:8px;background:#fce7a8;color:#272d45;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;padding:2px 8px;border-radius:4px;}
.badgenew{background:#f2aead;color:#fff;}
.pbody{padding:10px 14px 14px;}
.ptitle{font-family:'Jost',sans-serif;font-size:15px;font-weight:600;color:#272d45;}
.pprice{font-size:13px;color:#9a9db1;margin-top:4px;}
.stars{color:#fce7a8;font-size:12px;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#272d45;height:56px;display:flex;align-items:center;justify-content:center;color:#b9b9b9;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Ncla Beauty</div>
<div class="navlinks"><div class="active">Bath & Body</div><div>Skincare</div><div>Gifts</div><div>Best Sellers</div></div>
<div class="searchpill">Search...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Vegan, Cruelty-Free,<br>Unapologetically Pink</h1>
<p>Bath and body essentials made clean, made joyful.</p>
<div class="herocta">Shop Now</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="badge badgenew">New</div><div class="thumb" style="background:linear-gradient(160deg,#f2aead,#d59998)"></div><div class="pbody"><div class="ptitle">Whipped Body Butter</div><div class="pprice">$18.00</div><div class="stars">★★★★★</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#d59998,#676986)"></div><div class="pbody"><div class="ptitle">Rose Petal Bath Soak</div><div class="pprice">$22.00</div><div class="stars">★★★★★</div></div></div>
<div class="card"><div class="badge">Sale</div><div class="thumb" style="background:linear-gradient(160deg,#fce7a8,#f2aead)"></div><div class="pbody"><div class="ptitle">Coconut Milk Soap Bar</div><div class="pprice">$9.00</div><div class="stars">★★★★☆</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#272d45,#d59998)"></div><div class="pbody"><div class="ptitle">Velvet Rose Perfume Oil</div><div class="pprice">$28.00</div><div class="stars">★★★★★</div></div></div>
</div>
<div class="footer">Indie · Vegan · Cruelty-Free — since day one</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; background: #111111; color: #ffffff;
border: none; border-radius: 0px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; background: #ffffff; color: #111111;
border: 1px solid #111111; border-radius: 0px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.12em; background: #f8f7f5; color: #555555;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #e5e5e5; background:#ffffff; }
.brand { font-family:'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-size:22px;
font-weight:400; letter-spacing:0.5px; margin:0; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:11px; font-weight:400; letter-spacing:0.1em; text-transform:uppercase; color:#111111; opacity:0.75; }
.navicons { display:flex; gap:18px; align-items:center; font-size:15px; color:#111111; opacity:0.7; }
.hero { position:relative; height:206px; overflow:hidden; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:8px; text-align:center; color:#ffffff;
background:linear-gradient(158deg,#4a463c 0%,#33312a 42%,#171613 100%); }
.hero::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,0.28); }
.hero > * { position:relative; z-index:1; }
.hero .cap { font-size:11px; font-weight:400; letter-spacing:0.16em; text-transform:uppercase; opacity:0.85; }
.hero h1 { font-family:'Cormorant Garamond', Georgia, serif; font-size:38px; font-weight:300;
letter-spacing:-0.3px; margin:2px 0; }
.hero .sub { font-size:12px; letter-spacing:0.06em; opacity:0.8; margin-bottom:6px; }
.hero button { background:#ffffff; color:#111111; border:none; border-radius:0; padding:11px 26px;
font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; cursor:default; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:20px 40px; }
.card { display:flex; flex-direction:column; gap:6px; }
.thumb { width:100%; height:118px; border-radius:0; }
.t1 { background:linear-gradient(135deg,#cfd6d1,#8d9791 55%,#565f5a); }
.t2 { background:linear-gradient(135deg,#e3dccb,#b7a883 55%,#7a6a49); }
.t3 { background:linear-gradient(135deg,#d8d2d5,#9b9096 55%,#4c4448); }
.card .tag { font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:#767676; margin-top:4px; }
.card .artist { font-family:'Cormorant Garamond', Georgia, serif; font-size:17px; font-weight:400; margin:0; }
.card .title { font-size:13px; font-weight:500; color:#333333; margin:0; }
.row2 { display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
.edition { display:inline-flex; background:#f8f7f5; color:#555555; font-size:10px; font-weight:400;
letter-spacing:0.1em; text-transform:uppercase; padding:5px 9px; }
.edition b { color:#c4a35a; font-weight:400; }
.price { font-size:16px; font-weight:400; color:#111111; }
footer { height:56px; background:#1a1a1a; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; font-size:11px; letter-spacing:0.06em; }
footer span.muted { color:#a0a0a0; }
</style></head>
<body>
<nav>
<p class="brand">Artphotolimited</p>
<div class="navlinks"><span>Landscape</span><span>Portrait</span><span>Abstract</span><span>Documentary</span><span>Artists</span></div>
<div class="navicons"><span>⚲</span><span>👜</span></div>
</nav>
<section class="hero">
<span class="cap">Limited Edition Collection</span>
<h1>Autumn Light</h1>
<span class="sub">Limited to 25 Prints — From £195</span>
<button>View Collection</button>
</section>
<section class="cards">
<div class="card">
<div class="thumb t1"></div>
<span class="tag">Landscape</span>
<p class="artist">Helena Voss</p>
<p class="title">Northern Field, No. 3</p>
<div class="row2"><span class="edition"><b>5</b> of 25 remaining</span></div>
<div class="row2"><span class="price">£245</span></div>
</div>
<div class="card">
<div class="thumb t2"></div>
<span class="tag">Documentary</span>
<p class="artist">Marcus Reid</p>
<p class="title">Harbor Light, Study II</p>
<div class="row2"><span class="edition"><b>12</b> of 30 remaining</span></div>
<div class="row2"><span class="price">£195</span></div>
</div>
<div class="card">
<div class="thumb t3"></div>
<span class="tag">Portrait</span>
<p class="artist">Alex Moreau</p>
<p class="title">Quiet Room, Grey</p>
<div class="row2"><span class="edition"><b>3</b> of 15 remaining</span></div>
<div class="row2"><span class="price">£310</span></div>
</div>
</section>
<footer>
<span>© Artphotolimited</span>
<span class="muted">Artists · Categories · Certificates of Authenticity</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #1c1d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #1c1d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; letter-spacing: -0.2px; margin: 0; color: #1c1d1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6c6c6c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px; background: #0097ff; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px; background: #fafafa; color: #1c1d1d;
border: 1px solid #0097ff; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #1c1d1d;
border: 1px solid #c2c3c3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c6c6c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #fdd7f6; color: #1c1d1d;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#1c1d1d; box-sizing:border-box; font-family:'Montserrat', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; padding:0 32px; border-bottom:1px solid #dedede; }
.brand { font-size:18px; font-weight:600; }
.navlinks { display:flex; gap:22px; margin-left:auto; }
.navlinks div { font-size:14px; font-weight:500; text-transform:uppercase; letter-spacing:.5px; }
.hero { background:#f5f5f5; padding:44px 32px; text-align:center; }
.hero h1 { font-size:28px; font-weight:600; margin:0 0 10px; }
.hero p { font-size:15px; color:#444; margin:0 0 18px; }
.hero .cta { display:inline-block; background:#0097ff; color:#fff; font-size:15px; font-weight:600; letter-spacing:.3px; padding:12px 24px; border-radius:4px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:22px 32px; }
.card { background:#fff; border:1px solid #cdcdcd; border-radius:4px; padding:0; overflow:hidden; }
.cover { aspect-ratio:2/3; }
.g1 { background:linear-gradient(160deg,#fdd7f6,#80001e); }
.g2 { background:linear-gradient(160deg,#0097ff,#0088e6); }
.g3 { background:linear-gradient(160deg,#444,#1c1d1d); }
.g4 { background:linear-gradient(160deg,#80001e,#3a0010); }
.info { padding:12px; }
.title { font-size:16px; font-weight:600; margin-bottom:2px; }
.author { font-size:14px; color:#444; margin-bottom:6px; }
.price { font-size:14px; font-weight:600; }
.badge { display:inline-block; background:#fdd7f6; color:#1c1d1d; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:2px 8px; border-radius:2px; margin:8px 0 0 12px; }
.footer { background:#1c1d1d; color:#fafafa; padding:20px 32px; font-size:13px; display:flex; gap:60px; }
.footer a { color:#80001e; }
</style></head>
<body>
<nav>
<div class="brand">Feminist Press</div>
<div class="navlinks"><div>Books</div><div>Authors</div><div>Events</div><div>Donate</div></div>
</nav>
<div class="hero">
<h1>Radical Voices. Feminist Futures.</h1>
<p>Independent publishing for writers who challenge convention</p>
<div class="cta">Shop Now</div>
</div>
<div class="grid">
<div class="card"><div class="cover g1"></div><div class="badge">New</div><div class="info"><div class="title">Body of Water</div><div class="author">R. Alvarez</div><div class="price">$17.95</div></div></div>
<div class="card"><div class="cover g2"></div><div class="info"><div class="title">The Unwritten Half</div><div class="author">N. Okafor</div><div class="price">$16.00</div></div></div>
<div class="card"><div class="cover g3"></div><div class="info"><div class="title">Field Guide to Rage</div><div class="author">S. Lindqvist</div><div class="price">$15.50</div></div></div>
<div class="card"><div class="cover g4"></div><div class="badge">New</div><div class="info"><div class="title">Sister Cartographies</div><div class="author">M. Duvall</div><div class="price">$18.00</div></div></div>
</div>
<div class="footer">
<div>About · Books · Events</div>
<div>Connect · Newsletter · Donate</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2c4270;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2c4270;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #2c4270; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #3d5b9c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #dd3333; color: #ffffff;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #2c4270;
border: 1px solid #dd3333; border-radius: 6px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #444444;
border: 1px solid #cad0db; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #3d5b9c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #dd3333; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#444444; box-sizing:border-box;
font-family:'Source Sans Pro', 'Raleway', -apple-system, 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#dd3333; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.brand { font-family:'Raleway', sans-serif; color:#ffffff; font-size:22px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:22px; align-items:center; }
.navlinks span { color:#ffffff; font-size:13px; font-weight:600; opacity:0.92; }
.navlinks .orange { background:#fe4600; color:#fff; padding:6px 14px; border-radius:4px; font-size:12px; font-weight:700; }
.searchrow { height:46px; background:#f7f7f7; display:flex; align-items:center; padding:0 28px; border-bottom:1px solid #d7e8f9; }
.searchbar { flex:1; max-width:520px; height:30px; background:#ffffff; border:1px solid #cee3f8; border-radius:4px; display:flex; align-items:center; padding:0 12px; color:#78bdf1; font-size:12px; }
.searchbtn { margin-left:10px; background:#dd3333; color:#fff; font-size:11px; font-weight:700; padding:7px 16px; border-radius:4px; }
.hero { height:214px; background:#3a5795; display:flex; align-items:center; padding:0 40px; gap:32px; }
.hero .txt h1 { color:#ffffff; font-family:'Raleway',sans-serif; font-size:30px; font-weight:700; margin:0 0 10px; letter-spacing:-0.4px; }
.hero .txt p { color:#d7e8f9; font-size:14px; margin:0 0 16px; max-width:340px; line-height:1.5; }
.hero .txt .cta { display:inline-block; background:#fe4600; color:#fff; font-weight:700; font-size:13px; padding:10px 22px; border-radius:4px; }
.vinylwrap { display:flex; gap:14px; }
.vinyl { width:120px; height:120px; border-radius:8px; background:linear-gradient(145deg,#2f4678,#53abed); position:relative; box-shadow:0 6px 18px rgba(0,0,0,0.25); }
.vinyl::after { content:''; position:absolute; inset:36px; border-radius:50%; background:#dd3333; border:3px solid #fff; }
.vinyl.b { background:linear-gradient(145deg,#8a1f23,#d25c65); margin-top:22px; }
.vinyl.b::after { background:#3a5795; }
.section-label { padding:16px 28px 8px; font-family:'Raleway',sans-serif; font-size:16px; font-weight:700; color:#2c4270; }
.grid { display:flex; gap:14px; padding:0 28px; }
.card { flex:1; background:#ffffff; border:1px solid #cee3f8; border-radius:4px; padding:10px; position:relative; }
.card .art { height:96px; border-radius:4px; margin-bottom:8px; }
.art1 { background:linear-gradient(135deg,#dd3333,#3a5795); }
.art2 { background:linear-gradient(135deg,#3a5795,#78bdf1); }
.art3 { background:linear-gradient(135deg,#fe4600,#dd3333); }
.art4 { background:linear-gradient(135deg,#2c4270,#3a5795); }
.card .badge { position:absolute; top:16px; left:16px; background:#fe4600; color:#fff; font-size:9px; font-weight:700; padding:3px 7px; border-radius:3px; }
.card h3 { font-size:12px; font-weight:700; color:#2c4270; margin:0 0 4px; }
.card p { font-size:11px; color:#444; margin:0 0 6px; }
.card .price { font-size:13px; font-weight:700; color:#dd3333; }
footer { height:70px; background:#2f4678; margin-top:16px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
footer span { color:#78bdf1; font-size:11px; }
footer .fbtn { background:#dd3333; color:#fff; font-size:11px; font-weight:700; padding:8px 16px; border-radius:4px; }
</style></head>
<body>
<nav>
<p class="brand">Fingerprints Music</p>
<div class="navlinks"><span>New Arrivals</span><span>Used Vinyl</span><span>In-Store</span><span class="orange">Sale</span></div>
</nav>
<div class="searchrow">
<div class="searchbar">Search artist, album, or catalog number...</div>
<div class="searchbtn">SEARCH</div>
</div>
<div class="hero">
<div class="txt">
<h1>Crate-Digging,<br>Digitized.</h1>
<p>Long Beach's independent record store. New pressings, used gems, and staff picks from people who actually listen.</p>
<span class="cta">Shop New Arrivals</span>
</div>
<div class="vinylwrap">
<div class="vinyl"></div>
<div class="vinyl b"></div>
</div>
</div>
<div class="section-label">Staff Picks This Week</div>
<div class="grid">
<div class="card"><div class="art art1"></div><span class="badge">LOW STOCK</span><h3>Analog Heart LP</h3><p>Used · VG+</p><div class="price">$24.00</div></div>
<div class="card"><div class="art art2"></div><h3>Navy Room Sessions</h3><p>New Pressing</p><div class="price">$32.00</div></div>
<div class="card"><div class="art art3"></div><span class="badge">SALE</span><h3>Bleachwood 7"</h3><p>Limited · Orange Vinyl</p><div class="price">$14.00</div></div>
<div class="card"><div class="art art4"></div><h3>Clubhouse Static</h3><p>New Pressing</p><div class="price">$28.00</div></div>
</div>
<footer>
<span>Long Beach, CA · In-store pickup available</span>
<div class="fbtn">Join the Newsletter</div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #695e74;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #695e74;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #695e74; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #a0a0a0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #fdb813; color: #1c1c1c;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #ffffff; color: #0371bd;
border: 1px solid #fdb813; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #4d4d4d;
border: 1px solid #dad7dc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a0a0a0; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.5; background: #ececec; color: #515151;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Roboto, Arial, 'Helvetica Neue', sans-serif; color:#4d4d4d; }
*{box-sizing:border-box;}
.topstripe{height:6px;background:#fdb813;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #d5d5d5;}
.logo{font-size:20px;font-weight:700;color:#4d4d4d;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#4d4d4d;}
.search{width:220px;height:32px;border:1px solid #c6c6c6;border-radius:4px;display:flex;align-items:center;padding:0 12px;font-size:12px;color:#a0a0a0;}
.hero{height:200px;background:#fdb813;display:flex;align-items:center;padding:0 36px;}
.herotext h1{font-size:32px;font-weight:700;color:#1c1c1c;margin:0 0 8px;letter-spacing:-0.3px;}
.herotext p{font-size:14px;color:#1c1c1c;margin:0 0 14px;max-width:420px;}
.cta{display:inline-block;background:#ffffff;color:#d99a00;font-weight:600;font-size:14px;padding:9px 18px;border-radius:4px;}
.catsec{padding:22px 36px 0;}
.sectitle{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#4d4d4d;margin-bottom:12px;}
.catrow{display:flex;gap:12px;}
.cattile{flex:1;background:#f1f1f1;border-radius:6px;padding:12px;position:relative;overflow:hidden;height:70px;border:1px solid #d5d5d5;}
.cattile .bar{position:absolute;top:0;left:0;right:0;height:4px;}
.cattile .name{font-size:13px;font-weight:600;color:#4d4d4d;margin-top:8px;}
.grid{display:flex;gap:14px;padding:20px 36px 0;}
.card{width:210px;background:#ffffff;border:1px solid #d5d5d5;border-radius:6px;padding:14px;}
.thumb{height:80px;background:#f7f7f7;border-radius:4px;margin-bottom:10px;}
.chip{display:inline-block;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#fff;padding:3px 8px;border-radius:9999px;margin-bottom:8px;}
.pname{font-size:14px;font-weight:600;color:#1c1c1c;margin:0 0 4px;}
.catno{font-family:'Roboto Mono','Courier New',monospace;font-size:12px;color:#a0a0a0;}
</style>
<div class="topstripe"></div>
<div class="nav">
<div class="logo">Promega</div>
<div class="navlinks"><span>Products</span><span>Applications</span><span>Protocols</span><span>Support</span></div>
<div class="search">Search catalog number...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Reagents Trusted at the Bench.</h1>
<p>Enzymes, cell-viability assays, and molecular biology kits for labs that need results by three clicks.</p>
<div class="cta">Shop Reagents</div>
</div>
</div>
<div class="catsec">
<div class="sectitle">Shop by Category</div>
<div class="catrow">
<div class="cattile"><div class="bar" style="background:#0371bd"></div><div class="name">Molecular Biology</div></div>
<div class="cattile"><div class="bar" style="background:#028845"></div><div class="name">Genomics</div></div>
<div class="cattile"><div class="bar" style="background:#317d8b"></div><div class="name">Detection</div></div>
<div class="cattile"><div class="bar" style="background:#713a61"></div><div class="name">Specialty Lines</div></div>
</div>
</div>
<div class="grid">
<div class="card"><div class="chip" style="background:#0371bd">PCR</div><div class="thumb"></div><div class="pname">GoTaq Polymerase</div><div class="catno">CAT# M3001</div></div>
<div class="card"><div class="chip" style="background:#028845">Viability</div><div class="thumb"></div><div class="pname">CellTiter-Glo Kit</div><div class="catno">CAT# G7570</div></div>
<div class="card"><div class="chip" style="background:#317d8b">Detection</div><div class="thumb"></div><div class="pname">Luciferase Assay</div><div class="catno">CAT# E1500</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #111214;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #111214;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; letter-spacing: 0.3px; margin: 0; color: #111214; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5f5f5f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #1d1f22; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #f8f8f8; color: #111214;
border: 1px solid #1d1f22; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f8f8; color: #111214;
border: 1px solid #bebebf; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5f5f5f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #2e5538; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f8f8; color:#292c30; box-sizing:border-box;
font-family:-apple-system,'Helvetica Neue',Roboto,'Segoe UI',system-ui,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; background:#f8f8f8; border-bottom:1px solid #e6e5e5; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.brand { font-size:20px; font-weight:400; letter-spacing:0.5px; color:#1d1f22; }
.navlinks { display:flex; gap:28px; font-size:13px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; }
.navlinks span { color:#5f5f5f; }
.navlinks span.active { color:#1d1f22; border-bottom:2px solid #1d1f22; padding-bottom:6px; }
.navright { display:flex; align-items:center; gap:16px; }
.search-pill { width:190px; height:34px; border-radius:9999px; background:#f3f3f3; border:1px solid #e6e5e5;
display:flex; align-items:center; padding:0 16px; font-size:12px; color:#8d8f9a; }
.icon-dot { width:18px; height:18px; border-radius:50%; border:1.5px solid #292c30; }
.hero { height:210px; background:#f3f3f3; display:flex; align-items:center; justify-content:space-between; padding:0 56px; position:relative; }
.hero-text { max-width:400px; }
.hero-text .eyebrow { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#2e5538; margin-bottom:10px; }
.hero-text h1 { font-size:28px; font-weight:400; line-height:1.25; margin:0 0 14px; color:#111214; }
.hero-text p { font-size:14px; color:#5f5f5f; margin:0 0 18px; line-height:1.5; }
.btn-primary { display:inline-block; background:#1d1f22; color:#fff; font-size:14px; font-weight:500; letter-spacing:0.3px;
padding:12px 26px; border-radius:4px; }
.oval-stage { display:flex; gap:18px; }
.oval { width:78px; height:110px; border-radius:50%/45%; background:linear-gradient(160deg,#e8e8e8,#ffffff); border:1px solid #cccccc; position:relative; }
.oval::after { content:''; position:absolute; left:50%; top:14px; transform:translateX(-50%); width:26px; height:26px; border-radius:50%; background:#2e5538; opacity:.75; }
.oval.small { height:88px; margin-top:22px; }
.oval.small::after { background:#d12f37; }
.section-label { padding:24px 56px 10px; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:#8d8f9a; }
.grid { display:flex; gap:20px; padding:0 56px; }
.card { flex:1; background:#ffffff; border-radius:8px; overflow:hidden; }
.card .shot { height:120px; background:linear-gradient(150deg,#f3f3f3,#ffffff); border-radius:8px 8px 0 0; position:relative;
display:flex; align-items:center; justify-content:center; }
.card .shot .bottle { width:34px; height:64px; border-radius:6px 6px 3px 3px; background:#e8e8e8; border:1px solid #cccccc; }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase;
color:#fff; padding:2px 8px; border-radius:4px; }
.badge.green { background:#2e5538; }
.badge.red { background:#d12f37; }
.card .body { padding:12px 14px 16px; }
.card .name { font-size:14px; font-weight:600; color:#111214; margin-bottom:4px; }
.card .price { font-size:14px; color:#292c30; }
footer { position:absolute; bottom:0; left:0; right:0; height:96px; background:#1d1f22; color:#fff;
display:flex; align-items:center; justify-content:space-between; padding:0 56px; }
footer .col { font-size:12px; opacity:.8; line-height:1.9; }
footer .col b { display:block; font-size:12px; opacity:1; margin-bottom:4px; letter-spacing:0.5px; text-transform:uppercase; }
.wrap { position:relative; height:640px; }
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="brand">Diptyque</div>
<div class="navlinks"><span class="active">Fragrance</span><span>Candles</span><span>Skincare</span><span>Discovery</span></div>
<div class="navright">
<div class="search-pill">Search the atelier</div>
<div class="icon-dot"></div>
</div>
</nav>
<div class="hero">
<div class="hero-text">
<div class="eyebrow">Autumn Atelier</div>
<h1>A quiet ritual,<br>bottled in Paris.</h1>
<p>Hand-poured candles and eaux de toilette composed by the house perfumers, each one an understated study in restraint.</p>
<a class="btn-primary">Discover the Collection</a>
</div>
<div class="oval-stage">
<div class="oval small"></div>
<div class="oval"></div>
<div class="oval small"></div>
</div>
</div>
<div class="section-label">New This Season</div>
<div class="grid">
<div class="card">
<div class="shot"><span class="badge green">New</span><div class="bottle"></div></div>
<div class="body"><div class="name">Baies Candle, 190g</div><div class="price">$68</div></div>
</div>
<div class="card">
<div class="shot"><span class="badge red">Limited</span><div class="bottle"></div></div>
<div class="body"><div class="name">Eau Capitale, 75ml</div><div class="price">$175</div></div>
</div>
<div class="card">
<div class="shot"><div class="bottle"></div></div>
<div class="body"><div class="name">Figuier Diffuser</div><div class="price">$92</div></div>
</div>
<div class="card">
<div class="shot"><span class="badge green">New</span><div class="bottle"></div></div>
<div class="body"><div class="name">Roses Hand Cream</div><div class="price">$38</div></div>
</div>
</div>
<footer>
<div class="col"><b>Client Care</b>Shipping & Returns<br>Contact the Atelier</div>
<div class="col"><b>Maison</b>Our Perfumers<br>Boutiques</div>
<div class="col"><b>Journal</b>Notes on Scent<br>Newsletter</div>
<div class="col"><b>Diptyque</b>© Paris, since 1961</div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1b1b1b; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1b1b1b; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #999999; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #00b8fc; color: #1b1b1b;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #2a2a2a; color: #d7d7d7;
border: 1px solid #00b8fc; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #2a2a2a; color: #d7d7d7;
border: 1px solid #1b1b1b; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #999999; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #00fdcf; color: #1b1b1b;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#1b1b1b; font-family:'Helvetica Neue', Arial, sans-serif; color:#d7d7d7; }
*{box-sizing:border-box;}
.nav{height:64px;background:#1b1b1b;border-bottom:1px solid #303030;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:20px;font-weight:700;letter-spacing:.5px;color:#fff;}
.navlinks{display:flex;gap:26px;font-size:13px;font-weight:500;color:#d7d7d7;}
.status{display:flex;align-items:center;gap:6px;font-size:12px;color:#d7d7d7;}
.dot{width:8px;height:8px;border-radius:50%;background:#20a50a;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;background:radial-gradient(ellipse at 75% 50%,#242424 0%,#1b1b1b 65%);position:relative;overflow:hidden;}
.heroText{width:440px;z-index:2;}
.kicker{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#00b8fc;margin-bottom:14px;}
.headline{font-size:36px;font-weight:700;line-height:1.15;color:#fff;margin:0 0 14px;}
.sub{font-size:14px;line-height:1.6;color:#a0a0a0;margin:0 0 20px;max-width:380px;}
.btn{display:inline-flex;align-items:center;justify-content:center;width:180px;height:46px;background:#00b8fc;color:#1b1b1b;font-size:14px;font-weight:700;border-radius:8px;}
.mouseshape{position:absolute;right:100px;top:60px;width:130px;height:170px;border-radius:50% 50% 40% 40%;background:linear-gradient(160deg,#303030,#0e0e0e);box-shadow:0 0 40px rgba(0,184,252,.25);}
.mouseline{position:absolute;right:158px;top:75px;width:2px;height:140px;background:#00b8fc;opacity:.5;}
.sec{position:relative;height:290px;padding:26px 40px;}
.secTitle{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#808080;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:216px;background:#242424;border-radius:8px;padding:14px;}
.thumb{height:96px;background:#1b1b1b;border-radius:8px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;}
.thumbshape{width:60px;height:70px;border-radius:40%;}
.cardTitle{font-size:14px;font-weight:600;color:#fff;margin-bottom:4px;}
.cardPrice{font-size:14px;font-weight:700;color:#00b8fc;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#1b1b1b;border-top:1px solid #303030;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#808080;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Logitech G</div>
<div class="navlinks"><span>Mice</span><span>Keyboards</span><span>Headsets</span><span>Software</span></div>
<div class="status"><div class="dot"></div>Online</div>
</div>
<div class="hero">
<div class="heroText">
<div class="kicker">Precision Series</div>
<div class="headline">Built for the<br>0.3% that matters.</div>
<div class="sub">Engineered hardware that trusts photography and precision over decoration.</div>
<div class="btn">Shop Precision Series</div>
</div>
<div class="mouseline"></div>
<div class="mouseshape"></div>
</div>
<div class="sec">
<div class="secTitle">Featured Gear</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="thumbshape" style="background:radial-gradient(circle at 35% 30%,#00b8fc,#1b1b1b 70%)"></div></div><div class="cardTitle">G Pro X Superlight</div><div class="cardPrice">$159.99</div></div>
<div class="card"><div class="thumb"><div class="thumbshape" style="background:radial-gradient(circle at 35% 30%,#00fdcf,#1b1b1b 70%)"></div></div><div class="cardTitle">G Pro Mechanical</div><div class="cardPrice">$149.99</div></div>
<div class="card"><div class="thumb"><div class="thumbshape" style="background:radial-gradient(circle at 35% 30%,#00b8fc,#242424 70%)"></div></div><div class="cardTitle">G Pro X Headset</div><div class="cardPrice">$129.99</div></div>
<div class="card"><div class="thumb"><div class="thumbshape" style="background:radial-gradient(circle at 35% 30%,#00fdcf,#242424 70%)"></div></div><div class="cardTitle">G Pro Wireless</div><div class="cardPrice">$149.99</div></div>
</div>
</div>
<div class="footer"><span>© Engineered for Esports</span><span>Compare Gear</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313638;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313638;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.35; margin: 0; color: #313638; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #686563; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #d35b17; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #313638;
border: 1px solid #d35b17; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313638;
border: 1px solid #cccdcd; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #686563; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.8px; background: #421540; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313638; box-sizing:border-box;
font-family:'Archer-Ssm',Georgia,serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e0e0e0; }
.brand { font-size:17px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:22px; font-family:-apple-system,Arial,sans-serif; font-size:14px; font-weight:500; color:#313638; }
.util { font-family:-apple-system,Arial,sans-serif; font-size:13px; color:#555555; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 64px); }
.stage { padding:26px; display:flex; flex-direction:column; gap:12px; background:#f5f5f5; }
.crumb { font-family:-apple-system,Arial,sans-serif; font-size:11px; color:#7c7b78; }
.pan { flex:1; border-radius:8px; background:#ffffff; border:1px solid #e8e8e8; position:relative; overflow:hidden; }
.pan::before { content:''; position:absolute; left:50%; top:50%; width:230px; height:150px; transform:translate(-50%,-50%); border-radius:8px;
background:linear-gradient(160deg,#3c3c3c,#181818 70%); box-shadow:0 18px 30px rgba(0,0,0,0.14); }
.pan::after { content:''; position:absolute; left:50%; top:50%; width:150px; height:96px; transform:translate(-50%,-50%); border-radius:4px;
background:linear-gradient(160deg,#0c0c0c,#000); border:2px solid #d35b17; }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; border-radius:8px; background:#ffffff; border:1px solid #e0e0e0; }
.info { padding:24px 34px; display:flex; flex-direction:column; gap:11px; overflow:hidden; }
.cat { font-family:-apple-system,Arial,sans-serif; font-size:11px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:#d35b17; }
h1 { margin:0; font-size:28px; font-weight:600; line-height:1.2; letter-spacing:-0.3px; }
.rating { display:flex; align-items:center; gap:8px; font-family:-apple-system,Arial,sans-serif; font-size:12px; color:#7c7b78; }
.stars { color:#d35b17; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:24px; font-weight:600; }
.badge-sale { background:#d32f2f; color:#fff; font-family:-apple-system,Arial,sans-serif; font-size:11px; font-weight:700;
letter-spacing:0.8px; text-transform:uppercase; padding:3px 6px; border-radius:4px; }
.desc { font-family:-apple-system,Arial,sans-serif; font-size:16px; color:#555555; line-height:1.6; }
.spec-row { display:flex; justify-content:space-between; font-family:-apple-system,Arial,sans-serif; font-size:13px; padding:6px 0;
border-bottom:1px solid #e8e8e8; }
.spec-label { text-transform:uppercase; letter-spacing:0.5px; color:#555555; font-weight:500; }
.spec-value { color:#313638; }
.cta-row { display:flex; gap:10px; margin-top:auto; font-family:-apple-system,Arial,sans-serif; }
.btn-primary { flex:1; background:#d35b17; color:#fff; border:none; height:48px; font-size:15px; font-weight:600;
letter-spacing:0.3px; border-radius:4px; }
.btn-secondary { width:150px; background:#ffffff; border:1px solid #313638; color:#313638; height:48px; font-size:15px; font-weight:600; border-radius:4px; }
</style></head>
<body>
<nav>
<p class="brand">Breville Microwav 2</p>
<div class="navlinks"><span>Ovens</span><span>Microwaves</span><span>Toasters</span><span>Support</span></div>
<div class="util">Search Account Cart (0)</div>
</nav>
<main>
<div class="stage">
<div class="crumb">Breville Microwav 2 / Microwaves / Combi Wave</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Combi Wave 3 in 1</span>
<h1>Combi Wave 3-in-1 Air Fryer Microwave</h1>
<div class="rating"><span class="stars">★★★★☆</span> 4.4 · 1,140 reviews</div>
<div class="price-row"><span class="price">$449.95</span><span class="badge-sale">Save $50</span></div>
<p class="desc">Combines microwave, air fry, and convection bake in one countertop unit — Element iQ technology adjusts power for even results.</p>
<div class="spec-row"><span class="spec-label">Capacity</span><span class="spec-value">1.2 cu ft</span></div>
<div class="spec-row"><span class="spec-label">Power</span><span class="spec-value">1100W microwave / 1800W air fry</span></div>
<div class="spec-row"><span class="spec-label">Finish</span><span class="spec-value">Brushed Stainless Steel</span></div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Find a Store</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #125de6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #125de6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8fb1ee; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #125de6; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #125de6; color: #f5f5f5;
border: 1px solid #3675e8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8fb1ee; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3877ea; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:"Pretendard Variable", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #e5e7eb; }
.brand { font-size:19px; font-weight:700; }
.navlinks { display:flex; gap:8px; align-items:center; }
.menu-trigger { color:#727781; border:1px solid #51565f; border-radius:6px; padding:10px 16px; height:42px;
font-size:16px; display:flex; align-items:center; gap:6px; }
.header-cta { background:#125de6; color:#ffffff; border:1px solid #125de6; border-radius:30px; padding:8px 19px;
height:40px; font-size:15px; display:flex; align-items:center; }
.hero { position:relative; padding:44px 40px 0; }
.hero .eyebrow { color:#125de6; font-size:13px; font-weight:700; letter-spacing:0.04em; margin-bottom:10px; }
.hero h1 { font-size:38px; font-weight:700; line-height:1.25; margin:0 0 12px; max-width:560px; }
.hero p { font-size:16px; color:#57575b; margin:0 0 20px; max-width:480px; }
.section-cta { display:inline-flex; align-items:center; background:#125de6; color:#fff; border-radius:30px;
padding:10px 27px; height:48px; font-size:17px; font-weight:500; }
.menu-panel { position:absolute; right:40px; top:44px; width:220px; background:#111111; color:#ffffff;
border:1px solid #727781; border-radius:8px; padding:8px 0; box-shadow:0px 4px 8px rgba(0,0,0,0.06); }
.menu-panel .mi { padding:9px 16px; font-size:15px; color:#e6e6e6; }
.menu-panel .mi.hd { color:#727781; font-size:12px; padding-top:12px; }
.metrics { position:absolute; top:300px; left:0; right:0; bottom:0; padding:0 40px; border-top:1px solid #e5e7eb; }
.mgrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; padding-top:22px; }
.mcard { border:1px solid #e5e7eb; border-radius:8px; padding:16px; }
.mcard .label { font-size:13px; color:#727781; margin-bottom:6px; }
.mcard .value { font-size:24px; font-weight:700; color:#111111; }
.mcard .bar { height:6px; border-radius:3px; background:#e9f1ff; margin-top:12px; position:relative; overflow:hidden; }
.mcard .bar::after { content:''; position:absolute; left:0; top:0; bottom:0; width:64%; background:#125de6; border-radius:3px; }
</style></head>
<body>
<nav>
<span class="brand">NHN Cloud</span>
<div class="navlinks">
<span class="menu-trigger">Resources ⌄</span>
<span class="header-cta">Console Login</span>
</div>
</nav>
<div class="hero">
<div class="eyebrow">CLOUD PLATFORM</div>
<h1>Infrastructure for your next<br>technical challenge.</h1>
<p>Compute, storage, and AI services built for teams that ship fast and scale reliably.</p>
<span class="section-cta">Start Free Trial</span>
</div>
<div class="menu-panel">
<div class="mi hd">PRODUCTS</div>
<div class="mi">Compute</div>
<div class="mi">Object Storage</div>
<div class="mi">Data & AI</div>
<div class="mi hd">RESOURCES</div>
<div class="mi">Documentation</div>
</div>
<div class="metrics">
<div class="mgrid">
<div class="mcard"><div class="label">CPU Usage</div><div class="value">64%</div><div class="bar"></div></div>
<div class="mcard"><div class="label">Storage</div><div class="value">2.1 TB</div><div class="bar"></div></div>
<div class="mcard"><div class="label">Requests / min</div><div class="value">18.4K</div><div class="bar"></div></div>
<div class="mcard"><div class="label">Uptime</div><div class="value">99.98%</div><div class="bar"></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f6; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f6; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #aaccaa; color: #141414;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f4f4f6; color: #333333;
border: 1px solid #aaccaa; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f4f4f6; color: #333333;
border: 1px solid #bcbcbe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c1d22f; color: #141414;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f4f4f6; font-family:'Inter','Karla',-apple-system,sans-serif; color:#141414; }
*{box-sizing:border-box;}
.nav{height:64px;background:#272d45;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{color:#fff;font-size:18px;font-weight:700;letter-spacing:0.5px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:#fff;}
.navlinks .active{color:#eaf586;}
.hero{background:#f6f5ff;padding:24px 40px;display:flex;justify-content:space-between;align-items:center;}
.hero h1{font-size:32px;font-weight:700;letter-spacing:-0.3px;margin:0 0 10px;max-width:420px;}
.hero p{font-size:14px;color:#333;margin:0 0 16px;max-width:360px;}
.btn{display:inline-block;background:#aaccaa;color:#141414;font-size:15px;font-weight:600;padding:12px 26px;border-radius:8px;}
.btnaccent{display:inline-block;background:#6c5cff;color:#fff;font-size:13px;font-weight:600;padding:10px 20px;border-radius:8px;margin-left:10px;}
.herovis{width:180px;height:150px;border-radius:12px;background:linear-gradient(160deg,#c1d22f,#aaccaa);}
.sec{padding:20px 40px 0;}
.sectitle{font-size:16px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:196px;background:#fff;border-radius:12px;padding:16px;}
.thumb{aspect-ratio:1/1;border-radius:8px;margin-bottom:8px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#c1d22f;color:#141414;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:9999px;}
.ptitle{font-size:16px;font-weight:600;}
.pprice{font-size:16px;font-weight:400;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#2c3e50;color:#9a9db1;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kravebeauty</div>
<div class="navlinks"><div class="active">Skincare</div><div>Bestsellers</div><div>#PressReset</div></div>
</div>
<div class="hero">
<div>
<h1>Gentle efficacy. Radical transparency.</h1>
<p>Skincare built on the #PressReset philosophy — undo the damage, then keep it simple.</p>
<div class="btn">Shop Bestsellers</div><span class="btnaccent">Take the Quiz</span>
</div>
<div class="herovis"></div>
</div>
<div class="sec">
<div class="sectitle">Bestsellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#aaccaa,#272d45)"><div class="badge">New</div></div><div class="ptitle">Great Barrier Relief Serum</div><div class="pprice">$27</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#c1d22f,#6c5cff)"></div><div class="ptitle">Oat So Simple Water Cream</div><div class="pprice">$21</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#eaf586,#272d45)"></div><div class="ptitle">Matcha Hemp Hydrating Cleanser</div><div class="pprice">$18</div></div>
</div>
</div>
<div class="footer"><span>Ingredients · #PressReset</span><span>Support · Community</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #1a2b4c; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #1a2b4c;
border: 1px solid #1a2b4c; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #333333;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #1a2b4c; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:'DIN 2014','Trade Gothic',-apple-system,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e0e0e0; }
.brand { font-size:18px; font-weight:600; margin:0; color:#1a2b4c; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; letter-spacing:0.3px; text-transform:uppercase; color:#1a1a1a; }
.util { font-size:13px; color:#666666; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 64px); }
.stage { padding:26px; display:flex; flex-direction:column; gap:12px; background:#f5f5f5; }
.crumb { font-size:11px; color:#666666; }
.pan { flex:1; border-radius:16px; background:#ffffff; box-shadow:0 1px 3px rgba(0,0,0,0.08); position:relative; overflow:hidden; }
.pan::before { content:''; position:absolute; left:50%; top:56%; width:250px; height:90px; transform:translate(-50%,-50%) rotate(-4deg); border-radius:40px;
background:linear-gradient(100deg,#1a2b4c,#ff6b35 90%); box-shadow:0 16px 26px rgba(0,0,0,0.16); }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; border-radius:8px; background:#ffffff; box-shadow:0 1px 3px rgba(0,0,0,0.08); }
.info { padding:24px 34px; display:flex; flex-direction:column; gap:11px; overflow:hidden; }
.cat { font-size:12px; font-weight:500; letter-spacing:0.3px; text-transform:uppercase; color:#666666; }
h1 { margin:0; font-size:24px; font-weight:600; line-height:1.35; }
.rating { display:flex; align-items:center; gap:8px; font-size:14px; color:#666666; }
.stars { color:#ff6b35; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:16px; }
.badge-run { background:#1a2b4c; color:#fff; font-size:11px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; padding:4px 12px; border-radius:9999px; width:fit-content; }
.desc { font-size:16px; color:#333333; line-height:1.6; }
.selectors { display:flex; gap:10px; }
.chip { border:1px solid #d0d0d0; border-radius:9999px; padding:8px 16px; font-size:14px; font-weight:500; }
.chip.on { background:#1a2b4c; color:#fff; border-color:#1a2b4c; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#1a2b4c; color:#fff; border:none; height:44px; font-size:14px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; border-radius:8px; }
.btn-secondary { width:170px; background:#fff; border:2px solid #1a2b4c; color:#1a2b4c; height:44px; font-size:14px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; border-radius:8px; }
</style></head>
<body>
<nav>
<p class="brand">Brooks</p>
<div class="navlinks"><span>Running Shoes</span><span>Apparel</span><span>Gear</span><span>Sale</span></div>
<div class="util">Search Account Cart (1)</div>
</nav>
<main>
<div class="stage">
<div class="crumb">Brooks / Road Running / Neutral</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Neutral Cushion</span>
<h1>Ghost 16 Running Shoe</h1>
<div class="rating"><span class="stars">★★★★★</span> 4.7 · 8,214 reviews</div>
<div class="price-row"><span class="price">$144.95</span></div>
<span class="badge-run">Run Happy Certified</span>
<p class="desc">DNA LOFT v3 cushioning underfoot for a smooth, soft ride on every run — from easy miles to race day.</p>
<div class="selectors">
<span class="chip on">Men’s 10.5</span><span class="chip">Women’s 9</span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Find Your Fit</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #313131; color: #f0f0f0;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #313131; color: #f0f0f0;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; margin: 0; color: #f0f0f0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #999999; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #e02020; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #404040; color: #f0f0f0;
border: 1px solid #e02020; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #2a2a2a; color: #f0f0f0;
border: 1px solid #616161; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #999999; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #4a2f2f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#313131; color:#cccccc; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
background:#1e1e1e; border-bottom:1px solid #444444; }
.brand { font-size:18px; font-weight:800; color:#f0f0f0; letter-spacing:0.3px; }
.brand span { color:#e02020; }
.nlinks { display:flex; gap:22px; }
.nlinks div { font-size:12px; font-weight:600; color:#999999; text-transform:uppercase; letter-spacing:0.3px; }
.nlinks div.on { color:#f0f0f0; }
.navcta { background:#e02020; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; padding:9px 18px; }
.hero { height:190px; position:relative; background:linear-gradient(100deg,#1e1e1e 0%,#2a2a2a 60%,#313131 100%);
display:flex; align-items:center; padding:0 36px; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,0.65); }
.hero::after { content:''; position:absolute; right:20px; top:20px; width:180px; height:150px; border:2px solid #444;
background:linear-gradient(135deg,#3a3a3a,#1e1e1e); box-shadow:0 0 0 6px #2a2a2a; transform:rotate(6deg); }
.herotxt { position:relative; z-index:2; }
.herotxt .k { color:#7db8f7; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px; }
.herotxt h1 { color:#ffffff; font-size:30px; font-weight:800; margin:8px 0 8px; }
.herotxt p { color:#cccccc; font-size:13px; max-width:420px; margin:0 0 14px; }
.herobtn { display:inline-block; background:#e02020; color:#fff; font-size:12px; font-weight:700;
text-transform:uppercase; padding:11px 22px; }
.grades { display:flex; gap:12px; padding:14px 36px 0; }
.grade { font-size:10px; font-weight:800; padding:4px 10px; color:#fff; }
.g1 { background:#cc0000; } .g2 { background:#1a4fa0; } .g3 { background:#e07020; } .g4 { background:#5a2d8a; }
.section { padding:14px 36px 0; }
.sechead { font-size:15px; font-weight:700; color:#f0f0f0; text-transform:uppercase; letter-spacing:0.4px; margin-bottom:12px; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.card { background:#2a2a2a; border:1px solid #3a3a3a; padding:8px; }
.shot { height:80px; background:#404040; border:1px solid #444; margin-bottom:8px; position:relative;
display:flex; align-items:center; justify-content:center; }
.shot .fr { width:70%; height:82%; border:2px solid; border-radius:2px; }
.c1 .fr { border-color:#cc0000; } .c2 .fr { border-color:#1a4fa0; } .c3 .fr { border-color:#e07020; }
.c4 .fr { border-color:#5a2d8a; } .c5 .fr { border-color:#cc0000; }
.gscore { position:absolute; bottom:4px; right:4px; font-size:14px; font-weight:800; color:#fff; }
.ctitle { font-size:11px; font-weight:700; color:#f0f0f0; margin-bottom:2px; }
.cmeta { font-size:9px; color:#999999; margin-bottom:6px; }
.cprice { font-size:13px; font-weight:800; color:#ff6b6b; }
</style></head>
<body>
<nav>
<div class="brand">DA <span>DA Card World</span></div>
<div class="nlinks"><div class="on">Sports Cards</div><div>Gaming</div><div>Grading</div><div>Sell</div></div>
<div class="navcta">Sign In</div>
</nav>
<div class="hero">
<div class="herotxt">
<div class="k">Graded. Verified. Vaulted.</div>
<h1>The Collector's Card Case</h1>
<p>Authenticated sports and gaming cards from PSA, BGS, SGC, and CGC — sourced, graded, ready to ship.</p>
<div class="herobtn">Browse Inventory</div>
</div>
</div>
<div class="grades">
<span class="grade g1">PSA 10</span><span class="grade g2">BGS 9.5</span><span class="grade g3">SGC 9</span><span class="grade g4">CGC 9.8</span>
</div>
<div class="section">
<div class="sechead">Featured Grades</div>
<div class="grid">
<div class="card c1"><div class="shot"><div class="fr"></div><span class="gscore">10</span></div>
<div class="ctitle">1998 Jordan Fleer</div><div class="cmeta">PSA GEM MT 10</div><div class="cprice">$4,200</div></div>
<div class="card c2"><div class="shot"><div class="fr"></div><span class="gscore">9.5</span></div>
<div class="ctitle">Charizard Base Set</div><div class="cmeta">BGS 9.5</div><div class="cprice">$1,850</div></div>
<div class="card c3"><div class="shot"><div class="fr"></div><span class="gscore">9</span></div>
<div class="ctitle">2003 LeBron Topps</div><div class="cmeta">SGC MINT 9</div><div class="cprice">$980</div></div>
<div class="card c4"><div class="shot"><div class="fr"></div><span class="gscore">9.8</span></div>
<div class="ctitle">Black Lotus Alpha</div><div class="cmeta">CGC 9.8</div><div class="cprice">$12,500</div></div>
<div class="card c5"><div class="shot"><div class="fr"></div><span class="gscore">10</span></div>
<div class="ctitle">2011 Kershaw Bowman</div><div class="cmeta">PSA GEM MT 10</div><div class="cprice">$310</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e1027; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:80px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:40px; font-weight:700; letter-spacing:-1px; color:#000000; line-height:1; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#303033; }
.navlinks span.act { color:#000000; font-weight:700; }
.ghost { border:1px solid #dddddd; border-radius:4px; background:#ffffff; color:#000000;
height:36px; padding:0 16px; font-size:12px; font-weight:700; }
.hero { margin:0 32px 20px; height:180px; border-radius:0; position:relative; overflow:hidden;
background:linear-gradient(100deg,#111 0%, #333 45%, #555 100%); display:flex; align-items:flex-end; padding:20px 24px; }
.hero .cap { color:#ffffff; }
.hero .cap .k { font-size:10px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; opacity:0.8; }
.hero .cap h2 { margin:4px 0 0; font-size:23px; font-weight:600; line-height:1.3; }
.row { display:flex; gap:24px; padding:0 32px; }
.col { flex:1; }
.sectitle { font-size:13px; font-weight:700; color:#000000; margin-bottom:10px; text-transform:uppercase; letter-spacing:0.04em; }
.storyitem { display:flex; gap:12px; margin-bottom:14px; }
.storyitem .img { width:70px; height:70px; flex-shrink:0; background:linear-gradient(135deg,#eee,#ccc); }
.storyitem .t { font-size:13px; font-weight:600; line-height:1.35; color:#000; }
.storyitem .s { font-size:10px; color:#474747; margin-top:4px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard { display:flex; flex-direction:column; gap:5px; }
.pcard .img { aspect-ratio:3/4; background:linear-gradient(160deg,#f2f2f2,#dcdcdc); border-radius:4px; }
.pcard .brand-t { font-size:11px; font-weight:700; color:#000; }
.pcard .name { font-size:12px; font-weight:400; color:#303033; }
.pcard .price-row { display:flex; gap:6px; align-items:baseline; }
.pcard .disc { color:#ff4800; font-size:13px; font-weight:700; }
.pcard .price { font-size:13px; font-weight:700; color:#000; }
.pcard .flag { font-size:10px; font-weight:500; color:#5d5d5d; }
footer { position:absolute; bottom:0; left:0; right:0; padding:14px 32px; border-top:1px solid #dddddd;
display:flex; justify-content:space-between; font-size:10px; color:#5d5d5d; }
</style></head>
<body>
<nav>
<span class="brand">29CM</span>
<div class="navlinks"><span class="act">BEST</span><span>Magazine</span><span>Showcase</span><span>Brand</span></div>
<button class="ghost">SIGN IN</button>
</nav>
<div class="hero">
<div class="cap"><span class="k">29Magazine</span><h2>Taste, curated — not everything, only the right things.</h2></div>
</div>
<div class="row">
<div class="col" style="max-width:280px;">
<div class="sectitle">Showcase</div>
<div class="storyitem"><div class="img"></div><div><div class="t">A quiet studio, three years in the making</div><div class="s">Interview · Object</div></div></div>
<div class="storyitem"><div class="img"></div><div><div class="t">How this atelier chooses its fabric</div><div class="s">Interview · Material</div></div></div>
</div>
<div class="col">
<div class="sectitle">BEST — Hourly Popularity</div>
<div class="grid">
<div class="pcard"><div class="img"></div><span class="brand-t">STUDIO K</span><span class="name">Wool blend coat</span><div class="price-row"><span class="disc">30%</span><span class="price">₩168,000</span></div><span class="flag">Free shipping</span></div>
<div class="pcard"><div class="img"></div><span class="brand-t">MAISON L</span><span class="name">Cotton wide pants</span><div class="price-row"><span class="disc">20%</span><span class="price">₩89,000</span></div><span class="flag">Best seller</span></div>
<div class="pcard"><div class="img"></div><span class="brand-t">EDITION</span><span class="name">Leather crossbody bag</span><div class="price-row"><span class="disc">15%</span><span class="price">₩132,000</span></div><span class="flag">Limited</span></div>
<div class="pcard"><div class="img"></div><span class="brand-t">EDITION</span><span class="name">Merino knit sweater</span><div class="price-row"><span class="disc">25%</span><span class="price">₩98,000</span></div><span class="flag">Free shipping</span></div>
</div>
</div>
</div>
<footer>
<span>© 29CM</span>
<span>Editorial commerce, since taste matters</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1617;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1617;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.3px; margin: 0; color: #1a1617; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #626262; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #b72c27; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #1a1617;
border: 1px solid #d2d2d2; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #232323;
border: 1px solid #d2d2d2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #626262; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d20000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#232323; box-sizing:border-box;
font-family:'Instrument Sans', -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
.cond { font-family:'Saira','Arial Narrow',Arial,sans-serif; }
.promo { background:#b72c27; color:#fff; height:32px; display:flex; align-items:center; justify-content:center;
font-family:'Saira','Arial Narrow',Arial,sans-serif; font-size:13px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
nav { background:#1a1617; height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.logo { color:#fff; font-family:'Saira','Arial Narrow',Arial,sans-serif; font-size:19px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
.navlinks { display:flex; gap:22px; color:#8d8d8d; font-family:'Instrument Sans',sans-serif; font-size:13px;
font-weight:600; letter-spacing:0.3px; text-transform:uppercase; }
.navlinks span:first-child { color:#b72c27; }
.icons { display:flex; gap:14px; color:#fff; font-size:14px; }
main { display:flex; gap:28px; padding:20px 32px 0; height:452px; }
.shot { width:320px; background:#f4f4f4; border-radius:8px; position:relative; overflow:hidden; }
.shot::before { content:''; position:absolute; inset:0;
background:
repeating-linear-gradient(90deg, #d2d2d2 0 2px, transparent 2px 22px),
repeating-linear-gradient(0deg, #d2d2d2 0 2px, transparent 2px 22px),
linear-gradient(160deg,#3a3a3a,#1a1617); }
.badge-sale { position:absolute; top:10px; left:10px; background:#d20000; color:#fff; font-family:'Saira',sans-serif;
font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; border-radius:4px; padding:3px 8px; }
.thumbstrip { display:flex; gap:6px; margin-top:6px; }
.thumbstrip div { flex:1; height:48px; border-radius:4px; background:#e0e0e0; }
.thumbstrip div:nth-child(1) { background:linear-gradient(160deg,#5f5054,#1a1617); }
.thumbstrip div:nth-child(2) { background:linear-gradient(160deg,#b72c27,#3a1c1a); }
.thumbstrip div:nth-child(3) { background:linear-gradient(160deg,#8d8d8d,#1a1617); }
.info { flex:1; display:flex; flex-direction:column; min-width:0; }
.model { font-family:'Consolas','SF Mono',monospace; font-size:12px; color:#8d8d8d; margin-bottom:4px; }
.name { font-family:'Saira','Arial Narrow',Arial,sans-serif; font-size:26px; font-weight:700; letter-spacing:-0.3px;
line-height:1.15; margin:0 0 8px; }
.stars { font-size:13px; color:#b72c27; margin-bottom:8px; }
.stars span { color:#626262; font-weight:400; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.price { font-family:'Saira',sans-serif; font-size:26px; font-weight:700; color:#232323; }
.price-was { font-size:14px; color:#626262; text-decoration:line-through; }
.stock { font-size:13px; color:#1f873d; font-weight:600; margin-bottom:14px; }
.stock::before { content:'●'; margin-right:6px; }
table.spec { width:100%; border-collapse:collapse; margin-bottom:14px; }
table.spec tr { border-bottom:1px solid #d2d2d2; }
table.spec td { padding:6px 0; font-size:13px; }
table.spec td:first-child { font-family:'Saira',sans-serif; font-weight:600; color:#1a1617; width:44%; }
table.spec td:last-child { font-family:'Consolas','SF Mono',monospace; color:#232323; text-align:right; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#b72c27; color:#fff; border:none; border-radius:4px; height:52px;
font-family:'Saira',sans-serif; font-size:16px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.btn-compare { width:130px; background:#fff; color:#1a1617; border:1px solid #d2d2d2; border-radius:4px; height:52px;
font-family:'Saira',sans-serif; font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
footer { background:#1a1617; color:#8d8d8d; padding:14px 32px; display:flex; justify-content:space-between;
align-items:center; font-size:12px; }
footer .fl span { margin-left:20px; text-transform:uppercase; letter-spacing:0.3px; font-weight:600; }
</style></head>
<body>
<div class="promo">Free freight on smokers over $999 · Ends Sunday</div>
<nav>
<div class="logo">Camp Chef</div>
<div class="navlinks"><span>Pellet Grills</span><span>Flat Top Griddles</span><span>Pizza Ovens</span><span>Camp Stoves</span></div>
<div class="icons">⌕ ⬭ 🛒</div>
</nav>
<main>
<div class="shot">
<span class="badge-sale">Save $100</span>
<div class="thumbstrip"><div></div><div></div><div></div></div>
</div>
<div class="info">
<div class="model">MODEL SG36 · SKU CC-SG36-2026</div>
<h1 class="name">36" Smoke & Sear Flat Top Griddle</h1>
<div class="stars">★★★★★ <span>4.7 (886 reviews)</span></div>
<div class="price-row"><span class="price">$899.99</span><span class="price-was">$999.99</span></div>
<div class="stock">In Stock — Ships in 2–3 Business Days</div>
<table class="spec">
<tr><td>Cooking Surface</td><td>720 sq in</td></tr>
<tr><td>Total BTU Output</td><td>48,000 BTU</td></tr>
<tr><td>Burners</td><td>4 stainless steel</td></tr>
<tr><td>Griddle Weight</td><td>142 lbs</td></tr>
</table>
<div class="cta-row">
<button class="btn-add">Add to Cart</button>
<button class="btn-compare">Compare</button>
</div>
</div>
</main>
<footer>
<span>© Camp Chef</span>
<div class="fl"><span>Support</span><span>Warranty</span><span>Find a Dealer</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #454545; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.6px; background: #fb661f; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.6px; background: transparent; color: #1c1c1c;
border: 1px solid #fb661f; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1c1c1c;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #454545; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.6px; background: #fb661f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#1c1c1c; font-family:Arial,'Helvetica Neue',-apple-system,sans-serif; color:#e5e5e5; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#202125;}
.logo{font-size:20px;font-weight:700;color:#fb661f;letter-spacing:.3px;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:400;color:#e5e5e5;}
.hero{height:250px;display:flex;align-items:center;padding:0 36px;background:radial-gradient(circle at 75% 50%,#2c2c2c,#1c1c1c 70%);}
.herotext{width:440px;}
.h1{font-size:32px;font-weight:700;line-height:1.2;color:#fff;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.5;color:#c8c8c8;margin:0 0 18px;max-width:380px;}
.cta{display:inline-block;background:#fb661f;color:#fff;font-size:14px;font-weight:700;padding:13px 28px;border-radius:8px;}
.tt{position:absolute;right:80px;top:60px;width:220px;height:220px;border-radius:12px;background:linear-gradient(145deg,#edebdf,#2c2c2c 60%);}
.platter{position:absolute;right:120px;top:80px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#1c1c1c 30%,#5f3f3f 32%,#1c1c1c 34%);}
.label{position:absolute;right:180px;top:140px;width:30px;height:30px;border-radius:50%;background:#fb661f;}
.sec{padding:22px 36px 0;}
.secTitle{font-size:18px;font-weight:700;color:#fff;margin-bottom:8px;}
.swatchrow{display:flex;gap:8px;margin-bottom:16px;}
.swatch{width:20px;height:20px;border-radius:50%;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#2c2c2c;border-radius:12px;padding:12px;}
.thumb{height:100px;border-radius:8px;margin-bottom:10px;}
.pname{font-size:14px;font-weight:700;color:#fff;}
.pmeta{font-size:11px;color:#999999;margin-top:3px;}
.pprice{font-size:14px;font-weight:700;color:#fb661f;margin-top:6px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Victrola</div>
<div class="navlinks"><span>Turntables</span><span>Speakers</span><span>Vinyl</span><span>Support</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="h1">Drop the needle. Feel the warmth.</div>
<div class="sub">Turntables built for the ritual of a record, not just the sound of one.</div>
<div class="cta">Shop Turntables</div>
</div>
<div class="tt"></div><div class="platter"></div><div class="label"></div>
</div>
<div class="sec">
<div class="secTitle">Available Finishes</div>
<div class="swatchrow">
<div class="swatch" style="background:#facd34;"></div>
<div class="swatch" style="background:#db5b70;"></div>
<div class="swatch" style="background:#025f70;"></div>
<div class="swatch" style="background:#00247a;"></div>
<div class="swatch" style="background:#5f3f3f;"></div>
<div class="swatch" style="background:#edebdf;"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(145deg,#facd34,#1c1c1c 70%)"></div><div class="pname">Re-Spin Mustard</div><div class="pmeta">Bluetooth Turntable</div><div class="pprice">$129.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(145deg,#025f70,#1c1c1c 70%)"></div><div class="pname">Stream Onyx Teal</div><div class="pmeta">Wi-Fi Turntable</div><div class="pprice">$249.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(145deg,#5f3f3f,#1c1c1c 70%)"></div><div class="pname">Empire Cognac</div><div class="pmeta">Belt-Drive</div><div class="pprice">$399.99</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1918;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1918;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #1a1918; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #858580; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.5px; background: #f4e116; color: #1a1918;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.5px; background: #ffffff; color: #1a1918;
border: 1px solid #f4e116; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1918;
border: 1px solid #c6c6c5; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #858580; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #f4e116; color: #1a1918;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#0d0d0d; color:#fff; font-family:'Helvetica Neue',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;background:#192f5d;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:20px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#f4e116;}
.navlinks{display:flex;gap:24px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff;}
.navlinks span:first-child{color:#f4e116;}
.hero{height:270px;display:flex;background:#0d0d0d;position:relative;overflow:hidden;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 34px;}
.kicker{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#f4e116;margin-bottom:12px;}
.herotext h1{font-size:34px;font-weight:800;letter-spacing:-0.5px;margin:0 0 12px;line-height:1.1;text-transform:uppercase;}
.herotext p{font-size:14px;color:#858580;margin:0 0 20px;max-width:320px;line-height:1.5;}
.cta{display:inline-block;background:#f4e116;color:#1a1918;font-size:13px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:14px 30px;width:fit-content;}
.heroart{width:54%;position:relative;background:#1a1918;}
.ring{position:absolute;border-radius:50%;border:14px solid #192f5d;}
.ring1{width:210px;height:210px;right:120px;top:30px;}
.ring2{width:150px;height:150px;right:60px;top:60px;border-color:#f4e116;border-width:8px;}
.ring3{width:90px;height:90px;right:90px;top:90px;border-color:#858580;border-width:5px;}
.spectable{display:flex;gap:1px;background:#292826;margin:0 34px;}
.speccell{flex:1;background:#161615;text-align:center;padding:14px 6px;}
.speclabel{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#858580;}
.specvalue{font-size:18px;font-weight:800;color:#f4e116;margin-top:4px;}
.grid{display:flex;gap:14px;padding:20px 34px 0;}
.card{width:150px;background:#161615;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#f4e116;color:#1a1918;font-size:9px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;padding:3px 7px;z-index:2;}
.thumb{height:96px;margin-bottom:8px;background:#1a1918;}
.ptitle{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;color:#fff;line-height:1.3;height:30px;overflow:hidden;}
.pprice{font-size:13px;font-weight:800;color:#f4e116;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:11px;letter-spacing:0.5px;text-transform:uppercase;color:#858580;border-top:1px solid #292826;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Technogym</div>
<div class="navlinks"><span>Cardio</span><span>Strength</span><span>Biocircuit</span><span>Wellness</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Engineered for Performance</div>
<h1>Precision Machinery for the Human Engine</h1>
<p>Carbon-fiber lines and hydraulic precision built for facilities that never stop moving.</p>
<div class="cta">Shop Equipment</div>
</div>
<div class="heroart"><div class="ring ring1"></div><div class="ring ring2"></div><div class="ring ring3"></div></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Resistance Levels</div><div class="specvalue">99</div></div>
<div class="speccell"><div class="speclabel">Console Size</div><div class="specvalue">19"</div></div>
<div class="speccell"><div class="speclabel">Max Load</div><div class="specvalue">250kg</div></div>
<div class="speccell"><div class="speclabel">Warranty</div><div class="specvalue">5 Yr</div></div>
</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#192f5d,#1a1918)"></div><div class="ptitle">Skillrun Treadmill</div><div class="pprice">Request Quote</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a1918,#192f5d)"></div><div class="ptitle">Biocircuit Station</div><div class="pprice">Request Quote</div></div>
<div class="card"><div class="badge">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#292826,#192f5d)"></div><div class="ptitle">Excite Bike Series</div><div class="pprice">Request Quote</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#192f5d,#292826)"></div><div class="ptitle">Kinesis Personal</div><div class="pprice">Request Quote</div></div>
</div>
<div class="footer"><span>© Wellness Engineering</span><span>Find a Showroom</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b3b3c; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b3b3c; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6d8a83; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #db5d4b; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: transparent; color: #db5d4b;
border: 1px solid #db5d4b; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #3d5c56;
border: 1px solid #0b3b3c; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d8a83; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #db5d4b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#0b3b3c; font-family:'BasisGrotesquePro',Arial,sans-serif; color:#fff; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:'Bressay',Georgia,serif;font-size:20px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#a9c2bd;}
.hero{height:230px;display:flex;align-items:center;padding:0 40px;}
.herotext{width:440px;}
.herotext h1{font-family:'Bressay',Georgia,serif;font-size:34px;font-weight:700;color:#fff;margin:0 0 14px;line-height:1.2;}
.herotext p{font-size:14px;color:#a9c2bd;margin:0 0 20px;max-width:340px;line-height:1.6;}
.btn{display:inline-block;background:#db5d4b;color:#fff;font-size:14px;font-weight:600;padding:14px 28px;border-radius:8px;width:fit-content;}
.linegraphic{position:absolute;right:70px;top:120px;width:200px;height:150px;}
.circle{position:absolute;width:150px;height:150px;border:2px solid #6d8a83;border-radius:9999px;}
.circle2{position:absolute;left:40px;top:20px;width:110px;height:110px;border:2px solid #db5d4b;border-radius:9999px;}
.hero{position:relative;}
.sec{padding:20px 40px 0;}
.sectitle{font-size:18px;font-weight:700;margin-bottom:14px;color:#fff;}
.grid{display:flex;gap:14px;}
.card{width:212px;background:#fff;border-radius:12px;padding:10px;color:#0b3b3c;}
.thumb{height:100px;border-radius:8px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;color:#0b3b3c;}
.pprice{font-size:14px;font-weight:700;color:#db5d4b;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Manual</div>
<div class="navlinks"><span>Hair</span><span>Skin</span><span>Wellness</span><span>Journal</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>A members' club for your health.</h1>
<p>Prescription-grade formulas and everyday essentials, guided by real clinicians.</p>
<div class="btn">Start Your Plan</div>
</div>
<div class="linegraphic"><div class="circle"></div><div class="circle2"></div></div>
</div>
<div class="sec">
<div class="sectitle">Featured Kits</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#db5d4b,#0b3b3c);"></div><div class="pname">Hair Growth Kit</div><div class="pprice">$45/mo</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#6d8a83,#0b3b3c);"></div><div class="pname">Daily Skin Regimen</div><div class="pprice">$59/mo</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0b3b3c,#db5d4b);"></div><div class="pname">Sleep & Recovery Bundle</div><div class="pprice">$38/mo</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FAF8F5; color: #1E1A15;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FAF8F5; color: #1E1A15;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #1E1A15; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: 0.1px; margin: 0; color: #7A6E62; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.8px; background: #C4973D; color: #FFFFFF;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.8px; background: #FAF8F5; color: #1E1A15;
border: 1px solid #C4973D; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; letter-spacing: 0.1px; background: #FAF8F5; color: #1E1A15;
border: 1px solid #c3c0bd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7A6E62; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.3; letter-spacing: 1.5px; background: #C4973D; color: #FFFFFF;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FAF8F5; color:#1E1A15; box-sizing:border-box;
font-family:'Jost','Nunito Sans',system-ui,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #EDEBE6; }
.brand { font-family:'Cormorant Garamond',Georgia,serif; font-size:22px; font-weight:500; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:14px; font-weight:500; letter-spacing:0.5px; }
.hero { background:#F7F3EC; padding:36px 32px; display:flex; align-items:center; gap:30px; }
.heroText { flex:1; }
.headline { font-family:'Cormorant Garamond',Georgia,serif; font-size:44px; font-weight:300; line-height:1.15;
letter-spacing:-0.5px; margin-bottom:14px; }
.heroBtn { display:inline-block; background:#C4973D; color:#fff; border-radius:8px; padding:14px 28px; font-size:14px;
font-weight:600; letter-spacing:0.8px; text-transform:uppercase; }
.heroImg { flex:1; height:150px; display:flex; align-items:flex-end; gap:8px; }
.plank { width:34px; height:130px; border-radius:6px; }
.p1 { background:#EDE0C8; } .p2 { background:#C4973D; height:150px; }
.p3 { background:#3A3228; } .p4 { background:#DEDAD3; height:110px; }
.configurator { margin:24px 32px 0; background:#F2EFE9; border:1px solid #DEDAD3; border-radius:12px; padding:24px; display:flex; gap:24px; }
.stepCol { flex:1; }
.stepCol h3 { font-family:'Jost',sans-serif; font-size:14px; font-weight:600; letter-spacing:0.4px; margin-bottom:12px; text-transform:uppercase; }
.opts { display:flex; gap:10px; flex-wrap:wrap; }
.opt { background:#FAF8F5; border:1.5px solid #DEDAD3; border-radius:8px; padding:10px 16px; font-size:14px; }
.opt.sel { background:#FBF5E8; border:1.5px solid #C4973D; }
.swatches { display:flex; gap:8px; margin-top:6px; }
.sw { width:32px; height:32px; border-radius:50%; }
.sw1 { background:#EDE0C8; } .sw2 { background:#C4973D; border:2px solid #C4973D; outline:2px solid #C4973D; outline-offset:2px; }
.sw3 { background:#3A3228; } .sw4 { background:#7A6E62; }
.section { padding:24px 32px 0; }
.section h2 { font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:400; margin-bottom:16px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { background:#fff; border:1px solid #EDEBE6; border-radius:8px; padding:12px; }
.photo { aspect-ratio:4/5; border-radius:6px; margin-bottom:8px; }
.c1 { background:linear-gradient(150deg,#EDE0C8,#C4973D); }
.c2 { background:linear-gradient(150deg,#3A3228,#1E1A15); }
.c3 { background:linear-gradient(150deg,#F0E0B8,#D4A84D); }
.c4 { background:linear-gradient(150deg,#7A6E62,#3A3228); }
.name { font-size:16px; font-weight:500; }
.price { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:500; margin-top:2px; }
</style></head>
<body>
<nav>
<div class="brand">Golden Coil</div>
<div class="navlinks"><span>Planners</span><span>Covers</span><span>Refills</span><span>About</span></div>
</nav>
<div class="hero">
<div class="heroText">
<div class="headline">Every detail, chosen by you.</div>
<div class="heroBtn">Build Your Planner</div>
</div>
<div class="heroImg"><div class="plank p1"></div><div class="plank p2"></div><div class="plank p3"></div><div class="plank p4"></div></div>
</div>
<div class="configurator">
<div class="stepCol">
<h3>Cover Material</h3>
<div class="opts"><div class="opt sel">Vegan Leather</div><div class="opt">Linen</div><div class="opt">Acrylic</div></div>
</div>
<div class="stepCol">
<h3>Color</h3>
<div class="swatches"><div class="sw sw1"></div><div class="sw sw2"></div><div class="sw sw3"></div><div class="sw sw4"></div></div>
</div>
</div>
<div class="section">
<h2>Best Selling Layouts</h2>
<div class="grid">
<div class="card"><div class="photo c1"></div><div class="name">Weekly Undated</div><div class="price">$68</div></div>
<div class="card"><div class="photo c2"></div><div class="name">Daily Structured</div><div class="price">$74</div></div>
<div class="card"><div class="photo c3"></div><div class="name">Academic Year</div><div class="price">$72</div></div>
<div class="card"><div class="photo c4"></div><div class="name">Minimal Monthly</div><div class="price">$58</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf9fe; color: #0d3042;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf9fe; color: #0d3042;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #0d3042; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #f16365; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #faf9fe; color: #0d3042;
border: 1px solid #f16365; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #faf9fe; color: #144862;
border: 1px solid #bfc7cf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f16365; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#faf9fe; font-family:'Helvetica Neue','Arial',sans-serif; color:#144862; }
*{box-sizing:border-box;}
.nav{height:72px;background:#faf9fe;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d6c9b2;}
.logo{font-size:20px;font-weight:700;color:#0d3042;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:#767986;}
.navlinks span:first-child{color:#f16365;}
.hero{height:230px;background:#0d3042;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;}
.hero h1{color:#faf9fe;font-size:40px;font-weight:900;letter-spacing:-1px;}
.hero p{color:#d6c9b2;font-size:15px;}
.hero span{background:#f16365;color:#fff;font-size:16px;font-weight:700;padding:14px 28px;border-radius:8px;}
.grid{display:flex;gap:16px;padding:20px 32px 0;}
.card{width:210px;background:#fff;border:1px solid #faf9fe;border-radius:12px;padding:16px;}
.thumb{height:110px;background:#faf9fe;border-radius:8px;margin-bottom:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#f16365;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:9999px;}
.badge.limited{background:#4433cc;}
.pname{font-size:18px;font-weight:600;color:#0d3042;}
.pprice{font-size:16px;font-weight:700;color:#f16365;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#0d3042;color:#b8bac6;display:flex;align-items:center;justify-content:center;gap:28px;font-size:13px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Precision Record Pressing</div>
<div class="navlinks"><span>Pressing</span><span>Mastering</span><span>Packaging</span><span>Contact</span></div>
</div>
<div class="hero"><h1>Vinyl Pressing Without Limits</h1><p>From lacquer cut to shrink wrap — one factory floor, start to finish.</p><span>Get a Quote</span></div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">New</div></div><div class="pname">Standard 12" LP Run</div><div class="pprice">from $4.20/unit</div></div>
<div class="card"><div class="thumb"><div class="badge limited">Limited</div></div><div class="pname">Colored Vinyl Package</div><div class="pprice">from $5.80/unit</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Test Pressing (5x)</div><div class="pprice">$180.00</div></div>
</div>
<div class="footer"><span>About</span><span>FAQ</span><span>Get a Quote</span><span>Careers</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0067ac; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0067ac; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b5d4; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #20c4f4; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0067ac; color: #20c4f4;
border: 1px solid #20c4f4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0067ac; color: #f5f5f5;
border: 1px solid #277eb8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b5d4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0576b8; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Malgun Gothic", "Noto Sans KR", Arial, sans-serif; }
* { box-sizing:border-box; }
.dawn { position:absolute; right:-90px; top:-90px; width:260px; height:260px; border-radius:50%;
background:conic-gradient(from 200deg, #20c4f4, #0083ca, #0067ac, #20c4f4); opacity:0.16; }
header { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #cccccc; background:#ffffff; }
.brand-mark { display:flex; align-items:center; gap:10px; }
.dawn-badge { width:26px; height:26px; border-radius:50%; background:conic-gradient(from 210deg,#20c4f4,#0083ca,#0067ac,#20c4f4); }
.brand { font-size:18px; font-weight:700; color:#0067ac; margin:0; letter-spacing:-0.2px; }
.toplinks { display:flex; gap:22px; font-size:13px; color:#333333; }
.util-btn { background:#ffffff; color:#000000; border:1px solid #cccccc; border-radius:0px; padding:6px 14px; font-size:12px; }
.hero { position:relative; z-index:2; padding:26px 32px 16px; }
.hero .kicker { font-size:12px; color:#7f7f7f; font-weight:400; }
.hero h1 { font-size:24px; font-weight:700; color:#000000; margin:6px 0 4px; }
.hero p { font-size:13px; color:#333333; margin:0; }
.grid { position:relative; z-index:2; display:grid; grid-template-columns:1.3fr 1fr; gap:16px; padding:6px 32px 14px; }
.balance-card { border:1px solid #cccccc; border-radius:0px; padding:20px; background:#ffffff; }
.balance-card .label { font-size:12px; color:#7f7f7f; }
.balance-card .amount { font-size:30px; font-weight:700; color:#0067ac; margin:6px 0 12px; letter-spacing:-0.4px; }
.acct-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-top:1px solid #dfdfdf; font-size:13px; color:#000000; }
.acct-row:first-of-type { border-top:none; }
.acct-row .num { color:#7f7f7f; font-size:12px; }
.side-card { border:1px solid #cccccc; border-radius:0px; padding:16px; background:#ffffff; display:flex; flex-direction:column; gap:10px; }
.side-card h4 { margin:0; font-size:13px; color:#000000; font-weight:700; }
.field { display:flex; flex-direction:column; gap:4px; }
.field label { font-size:11px; color:#7f7f7f; }
.field .box { border:1px solid #cccccc; border-radius:0px; height:26px; padding:2px 3px 3px; font-size:13px; color:#000000; background:#ffffff; display:flex; align-items:center; }
.transfer-btn { background:#0067ac; color:#ffffff; border:none; border-radius:5px; height:34px; font-size:13px; font-weight:700; margin-top:2px; }
.rate-strip { position:relative; z-index:2; display:flex; gap:0; padding:0 32px; }
.rate-item { flex:1; border:1px solid #cccccc; border-left:none; padding:10px 12px; font-size:11px; color:#333333; }
.rate-item:first-child { border-left:1px solid #cccccc; }
.rate-item b { display:block; font-size:15px; color:#0083ca; margin-top:2px; }
footer { position:relative; z-index:2; border-top:1px solid #cccccc; padding:10px 32px; margin-top:14px;
display:flex; justify-content:space-between; font-size:11px; color:#7f7f7f; }
</style></head>
<body>
<div class="dawn"></div>
<header>
<div class="brand-mark"><span class="dawn-badge"></span><p class="brand">Woori Bank</p></div>
<div class="toplinks"><span>Accounts</span><span>Transfer</span><span>Products</span><span>Support</span></div>
<button class="util-btn">Log In</button>
</header>
<section class="hero">
<span class="kicker">Building tomorrow's value through today's innovation</span>
<h1>See your accounts at a glance</h1>
<p>Woori Bank Internet Banking — from balances to transfers, all in one screen.</p>
</section>
<section class="grid">
<div class="balance-card">
<span class="label">Total Assets</span>
<div class="amount">$12,480.30</div>
<div class="acct-row"><span>Everyday Checking</span><span class="num">110-***-234567</span><span>$8,220.15</span></div>
<div class="acct-row"><span>Term Deposit</span><span class="num">110-***-882301</span><span>$3,000.00</span></div>
<div class="acct-row"><span>Young Adult Savings</span><span class="num">110-***-119042</span><span>$1,260.15</span></div>
</div>
<div class="side-card">
<h4>Quick Transfer</h4>
<div class="field"><label>Recipient account number</label><div class="box">123-456-789012</div></div>
<div class="field"><label>Transfer amount</label><div class="box">$500.00</div></div>
<button class="transfer-btn">Transfer</button>
</div>
</section>
<div class="rate-strip">
<div class="rate-item">Term Deposit Rate<b>3.15% APR</b></div>
<div class="rate-item">Young Adult Savings<b>4.50% APR</b></div>
<div class="rate-item">Mortgage Rate<b>4.02% APR</b></div>
<div class="rate-item">Exchange Rate (USD)<b>1,342.50</b></div>
</div>
<footer>
<span>© Woori Bank</span>
<span>Woori Bank · About · Products · Privacy Policy</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0064ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0064ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b4fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0064ff; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0064ff; color: #f5f5f5;
border: 1px solid #277bfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b4fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e64fd; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f2f4f6; color:#191f28; box-sizing:border-box;
font-family:-apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
.frame { display:flex; height:640px; }
.phone { width:340px; background:#ffffff; margin:24px; border-radius:28px; box-shadow:0 20px 40px rgba(0,0,0,0.12);
padding:24px 22px; display:flex; flex-direction:column; gap:16px; }
.phone h2 { font-size:24px; font-weight:600; margin:0; line-height:1.3; }
.field { background:#f2f4f6; border-radius:6px; height:38px; display:flex; align-items:center; padding:0 12px;
font-size:14px; color:#8b95a1; }
.agree { display:flex; align-items:center; gap:8px; font-size:14px; color:#4e5968; }
.agree .box { width:18px; height:18px; border-radius:4px; background:#3182f6; position:relative; }
.agree .box::after { content:''; position:absolute; left:5px; top:3px; width:6px; height:9px;
border:2px solid #fff; border-top:none; border-left:none; transform:rotate(45deg); }
.btn { background:#3182f6; color:#ffffff; border:none; border-radius:16px; height:56px; font-size:17px;
font-weight:600; margin-top:auto; }
.btn.danger { background:#ffffff; color:#e42939; border:1px solid #e5e8eb; height:38px; border-radius:8px; font-size:14px; font-weight:600; }
.side { flex:1; padding:34px 40px; }
.badge { display:inline-block; background:#e8f3ff; color:#1b64da; border-radius:7px; padding:11px 16px;
font-size:15px; font-weight:600; margin-bottom:20px; }
h1 { font-size:36px; font-weight:700; line-height:1.4; margin:0 0 12px; }
.lead { font-size:16px; color:#4e5968; line-height:1.6; max-width:400px; margin:0 0 26px; }
.darkcta { background:rgba(0,12,30,0.85); color:#ffffff; border:none; border-radius:7px; height:46px;
padding:0 22px; font-size:17px; font-weight:600; }
.badges { display:flex; gap:8px; margin-top:26px; }
.tag { background:#f2f4f6; color:#4e5968; border-radius:6px; padding:6px 12px; font-size:12px; font-weight:600; }
</style></head>
<body>
<div class="frame">
<div class="side">
<span class="badge">Toss · TDS Mobile</span>
<h1>Money, answered<br>as easily as it's asked</h1>
<p class="lead">One connected system for checking, comparing, paying, and recovering — built so every action feels the same.</p>
<button class="darkcta">Download the app</button>
<div class="badges">
<span class="tag">Value first</span>
<span class="tag">Easy to answer</span>
</div>
</div>
<div class="phone">
<h2>Agree to the terms and start</h2>
<div class="field">Full name</div>
<div class="field">Phone number</div>
<div class="agree"><span class="box"></span>I agree to all terms</div>
<button class="btn">Continue</button>
<button class="btn danger">Cancel</button>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #1f1f1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #1f1f1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #1f1f1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #ffdd00; color: #1f1f1f;
border: none; border-radius: 8px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #fefefe; color: #1f1f1f;
border: 1px solid #ffdd00; border-radius: 8px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fefefe; color: #1f1f1f;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ee2200; color: #fefefe;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fefefe; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif; color:#1f1f1f; }
*{box-sizing:border-box;}
.nav{height:48px;background:#fefefe;border-bottom:1px solid #e4e4e4;display:flex;align-items:center;gap:20px;padding:0 32px;font-size:14px;font-weight:600;}
.brandmark{font-weight:700;font-size:15px;color:#1f1f1f;margin-right:8px;}
.nav span:not(.brandmark):first-of-type{border-bottom:2px solid #ffdd00;padding-bottom:14px;}
.nav span:not(.brandmark):not(:first-of-type){color:#aaaaaa;}
.searchrow{padding:14px 32px 0;display:flex;gap:8px;}
.searchbar{flex:1;height:44px;border:1px solid #e4e4e4;display:flex;align-items:center;padding:0 12px;font-size:14px;color:#aaaaaa;border-radius:4px;}
.submit{width:70px;height:44px;background:#0089ec;color:#fff;display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:13px;font-weight:600;}
.genres{display:flex;gap:8px;padding:12px 32px 0;}
.genre{background:#f5f5f5;color:#1f1f1f;font-size:12px;font-weight:600;padding:6px 14px;border-radius:9999px;}
.genre.active{background:#ffdd00;}
.grid{display:flex;gap:16px;padding:16px 32px 0;}
.card{width:210px;background:#fff;border-radius:8px;padding:16px;}
.thumb{height:120px;background:#f5f5f5;border-radius:4px;margin-bottom:8px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#ee2200;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.badge.new{background:#0059bc;}
.title{font-size:16px;font-weight:600;}
.price{font-size:20px;font-weight:700;color:#ffdd00;-webkit-text-stroke:.4px #1f1f1f;margin-top:6px;}
.cond{font-size:12px;color:#aaaaaa;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:60px;background:#222222;color:#777777;display:flex;align-items:center;justify-content:center;gap:26px;font-size:13px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav"><span class="brandmark">Princeton Record Exchange</span><span>Rock</span><span>Jazz</span><span>Classical</span><span>Soul</span><span>New Wave</span></div>
<div class="searchrow"><div class="searchbar">Search by artist, album, or catalog number</div><div class="submit">Search</div></div>
<div class="genres"><div class="genre active">All</div><div class="genre">Used</div><div class="genre">Rare</div><div class="genre">Box Sets</div></div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">Sale</div></div><div class="title">Nightlong Sessions</div><div class="price">$18.00</div><div class="cond">VG+</div></div>
<div class="card"><div class="thumb"><div class="badge new">New</div></div><div class="title">Coastal Drift LP</div><div class="price">$26.00</div><div class="cond">Mint</div></div>
<div class="card"><div class="thumb"></div><div class="title">Second Hand Weather</div><div class="price">$14.00</div><div class="cond">VG</div></div>
</div>
<div class="footer"><span>About</span><span>Contact</span><span>Shipping</span><span>Returns</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.35; letter-spacing: 0.005em; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #787878; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; background: #313131; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.625; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787878; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; background: #b8973f; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family: Georgia, "Playfair Display", "Times New Roman", serif; }
.promo { height:32px; background:#313131; color:#fff; display:flex; align-items:center;
justify-content:center; font-size:11px; letter-spacing:0.02em; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #e4e4e4; }
.brand { font-size:16px; font-weight:500; letter-spacing:0.04em; }
.navlinks { display:flex; gap:26px; font-size:12px; letter-spacing:0.04em; color:#313131; }
.navicons { display:flex; gap:16px; font-size:15px; color:#313131; }
.body { display:flex; height:552px; }
.stage { flex:1.3; padding:20px 24px; background:#f8f6f3; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:14px; position:relative; }
.ringimg { width:220px; height:220px; border-radius:50%;
background: radial-gradient(circle at 35% 30%, #ffffff, #e8e8e8 40%, #cfcfcf 70%, #b8973f 100%);
box-shadow: 0 12px 30px rgba(0,0,0,0.12); position:relative; }
.ringimg::after { content:''; position:absolute; top:50%; left:50%; width:70px; height:70px;
border-radius:50%; background:#fff; transform:translate(-50%,-50%);
box-shadow: 0 0 0 6px #b8973f, inset 0 0 12px rgba(184,151,63,0.4); }
.badge { position:absolute; top:20px; left:24px; background:#b8973f; color:#fff; font-size:10px;
font-weight:600; letter-spacing:0.1em; text-transform:uppercase; padding:3px 8px; }
.thumbs { display:flex; gap:8px; }
.thumb { width:44px; height:44px; border:1px solid #e4e4e4; background:#fff; }
.thumb.active { border:2px solid #313131; }
.panel { flex:1; padding:22px 28px; border-left:1px solid #e4e4e4; display:flex; flex-direction:column; overflow:hidden; }
.panel .cat { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#787878; margin-bottom:4px; }
.panel h1 { font-size:24px; font-weight:400; margin:0 0 6px; }
.price { font-size:22px; margin:0 0 14px; }
.price .now { color:#313131; }
.price .champ { color:#b8973f; margin-left:8px; font-size:15px; }
.group-label { font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#313131; margin:12px 0 8px; }
.shapes { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.shape { border:1px solid #e4e4e4; border-radius:8px; padding:8px 2px; text-align:center; font-size:9px; color:#4d4d4d; }
.shape.active { border:2px solid #313131; font-weight:600; }
.shape .ic { display:block; font-size:16px; margin-bottom:3px; }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.chip { border:1px solid #e4e4e4; border-radius:999px; padding:5px 14px; font-size:12px; color:#4d4d4d; }
.chip.active { background:#313131; color:#fff; border-color:#313131; }
.trust { display:flex; gap:16px; margin-top:auto; padding-top:14px; border-top:1px solid #f2f2f2; }
.trust span { font-size:10.5px; color:#787878; display:flex; align-items:center; gap:4px; }
.trust b { color:#b8973f; }
.btn-primary { margin-top:12px; background:#313131; color:#fff; border:none; height:44px;
font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; cursor:default; }
</style></head>
<body>
<div class="promo">Free shipping & lifetime warranty on every Clean Origin ring</div>
<nav>
<span class="brand serif">Clean Origin</span>
<div class="navlinks"><span>ENGAGEMENT</span><span>WEDDING</span><span>DIAMONDS</span><span>EDUCATION</span></div>
<div class="navicons"><span>⚲</span><span>♡</span><span>👜</span></div>
</nav>
<div class="body">
<div class="stage">
<span class="badge">IGI Certified</span>
<div class="ringimg"></div>
<div class="thumbs">
<div class="thumb active"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div>
</div>
</div>
<div class="panel">
<span class="cat">Round Brilliant · Lab-Grown</span>
<h1 class="serif">The Petite Solitaire Ring</h1>
<div class="price serif"><span class="now">$1,240</span><span class="champ">vs. $6,900 mined</span></div>
<div class="group-label">Stone Shape</div>
<div class="shapes">
<div class="shape active"><span class="ic">⚫</span>Round</div>
<div class="shape"><span class="ic">◆</span>Princess</div>
<div class="shape"><span class="ic">⛶</span>Oval</div>
<div class="shape"><span class="ic">⛵</span>Pear</div>
<div class="shape"><span class="ic">⬥</span>Cushion</div>
<div class="shape"><span class="ic">✦</span>Emerald</div>
</div>
<div class="group-label">Metal & Carat</div>
<div class="chips">
<div class="chip active">14K White Gold</div>
<div class="chip">14K Yellow Gold</div>
<div class="chip">Platinum</div>
<div class="chip">1.0 ct</div>
<div class="chip">1.5 ct</div>
</div>
<button class="btn-primary">Start Building</button>
<div class="trust">
<span><b>◆</b> Conflict-Free Stones</span>
<span><b>◆</b> Lifetime Warranty</span>
<span><b>◆</b> Free Returns</span>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; background: #006699; color: #ffffff;
border: none; border-radius: 0px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; background: #ffffff; color: #006699;
border: 1px solid #006699; border-radius: 0px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dbeaf1; color: #006699;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,Helvetica,sans-serif; color:#222222; }
*{box-sizing:border-box;}
.nav{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e0e0e0;}
.logo{font-family:Georgia,'Times New Roman',serif;font-size:19px;color:#111;}
.navlinks{display:flex;gap:20px;font-size:14px;}
.navlinks a{color:#006699;}
.hero{padding:36px 32px 24px;border-bottom:1px solid #e0e0e0;}
.hero h1{font-family:Georgia,serif;font-size:26px;font-weight:400;margin:0 0 8px;color:#111;}
.hero p{font-size:14px;color:#555;margin:0;max-width:520px;}
.rowlabel{padding:20px 32px 12px;font-family:Georgia,serif;font-size:18px;color:#111;}
.list{padding:0 32px;display:flex;gap:28px;}
.item{width:200px;}
.thumb{width:200px;height:200px;margin-bottom:10px;}
.title{font-family:Georgia,serif;font-size:17px;color:#111;margin-bottom:2px;}
.artist{font-size:13px;color:#555;margin-bottom:6px;}
.meta{font-size:12px;color:#888;margin-bottom:8px;}
.buy{font-size:14px;color:#006699;text-decoration:underline;}
.price{font-size:15px;color:#111;float:right;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#f5f5f5;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#555;}
.footer a{color:#006699;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">MA Recordings</div>
<div class="navlinks"><a>Catalog</a><a>Artists</a><a>About</a><a>Cart</a></div>
</div>
<div class="hero">
<h1>Recordings made to be heard, not sold.</h1>
<p>Audiophile recordings captured with a single pair of microphones in real spaces. No remixing, no compression, no compromise.</p>
</div>
<div class="rowlabel">Recent Releases</div>
<div class="list">
<div class="item"><div class="thumb" style="background:linear-gradient(135deg,#006699,#111111);"></div><div class="title">Quiet Room Sessions</div><div class="artist">Ensemble Aoi</div><div class="meta">Recorded 2024 · DSD256</div><div class="buy">Add to Cart</div><div class="price">$32</div></div>
<div class="item"><div class="thumb" style="background:linear-gradient(135deg,#114499,#222222);"></div><div class="title">Nocturne in the Hall</div><div class="artist">K. Ishikawa Trio</div><div class="meta">Recorded 2023 · 24bit/192k</div><div class="buy">Add to Cart</div><div class="price">$28</div></div>
<div class="item"><div class="thumb" style="background:linear-gradient(135deg,#004466,#333333);"></div><div class="title">One Microphone, One Room</div><div class="artist">S. Delacroix</div><div class="meta">Recorded 2022 · DSD128</div><div class="buy">Add to Cart</div><div class="price">$34</div></div>
</div>
<div class="footer"><span>© MA Recordings</span><span><a>Shipping</a> <a>Contact</a></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f1f9; color: #272d45;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f1f9; color: #272d45;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #272d45; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9a9bb0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #a5f057; color: #272d45;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #f7f1f9; color: #272d45;
border: 1px solid #a5f057; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #272d45;
border: 1px solid #c3c0cc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9bb0; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #a5f057; color: #272d45;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f1f9; font-family:'Assistant',Arial,sans-serif; color:#272d45; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#fff;}
.logo{font-family:Georgia,serif;font-size:22px;font-weight:700;color:#272d45;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#272d45;}
.cartpill{background:#a5f057;color:#272d45;font-size:12px;font-weight:700;padding:8px 18px;border-radius:9999px;}
.hero{height:260px;display:flex;align-items:center;padding:0 36px;background:linear-gradient(120deg,#f7f1f9 55%,#e3d3ec 100%);}
.herotext{width:440px;}
h1{font-family:Georgia,serif;font-size:34px;font-weight:700;color:#272d45;margin:0 0 14px;line-height:1.2;}
.sub{font-size:15px;color:#3b31ce;margin:0 0 20px;max-width:360px;}
.cta{display:inline-flex;background:#a5f057;color:#272d45;font-size:14px;font-weight:700;padding:14px 28px;border-radius:9999px;width:fit-content;}
.pillcluster{position:absolute;right:70px;top:70px;width:220px;height:180px;}
.pill{position:absolute;width:100px;height:44px;border-radius:9999px;box-shadow:0 8px 18px rgba(60,40,80,.15);}
.p1{background:#a5f057;left:10px;top:10px;transform:rotate(-8deg);}
.p2{background:#3b31ce;left:70px;top:70px;transform:rotate(10deg);}
.p3{background:#0e7a82;left:20px;top:130px;transform:rotate(-4deg);}
.sec{padding:20px 36px 0;}
.sectitle{font-size:20px;font-weight:700;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:20px;padding:14px;text-align:center;}
.thumb{height:90px;border-radius:16px;background:#dfc8ef;margin-bottom:10px;}
.badge{display:inline-block;background:#c5ff89;color:#272d45;font-size:10px;font-weight:700;padding:3px 12px;border-radius:9999px;margin-bottom:8px;}
.pname{font-size:14px;font-weight:700;color:#272d45;margin-bottom:4px;}
.pprice{font-size:13px;color:#0e7a82;font-weight:600;}
</style>
<div class="nav">
<div class="logo">Lemme</div>
<div class="navlinks"><span>Gummies</span><span>Bundles</span><span>Quiz</span></div>
<div class="cartpill">CART (0)</div>
</div>
<div class="hero" style="position:relative;">
<div class="herotext">
<h1>Wellness You Actually Want to Take.</h1>
<div class="sub">Clinically-dosed gummies wrapped in a pastel glow, never a pharmacy shelf.</div>
<div class="cta">Take the Quiz</div>
</div>
<div class="pillcluster"><div class="pill p3"></div><div class="pill p2"></div><div class="pill p1"></div></div>
</div>
<div class="sec">
<div class="sectitle">Shop Gummies</div>
<div class="grid">
<div class="card"><div class="badge">Best Seller</div><div class="thumb"></div><div class="pname">Debloat + Glow</div><div class="pprice">$34.99</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Sleep + Restore</div><div class="pprice">$32.99</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Focus + Clarity</div><div class="pprice">$29.99</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Gut Health Daily</div><div class="pprice">$31.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfbfe; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfbfe; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #69727d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #0068a0; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #0068a0;
border: 1px solid #0068a0; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #231f20;
border: 1px solid #c6c4c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #69727d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.35; letter-spacing: 0.3px; background: #aa0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Open Sans',Arial,Helvetica,sans-serif; background:#fcfbfe; color:#3c3c3c; }
*{box-sizing:border-box;}
.utilbar{height:28px;background:#2c324c;color:#eeeeee;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 32px;font-size:11px;}
.nav{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#141b38;}
.logo{font-family:'Laguna (Condensed)','Open Sans',Arial,sans-serif;font-size:20px;font-weight:700;color:#fff;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#fff;}
.hero{height:220px;position:relative;background:#141b38;overflow:hidden;display:flex;align-items:center;padding:0 32px;}
.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#141b38 55%,transparent 100%);}
.herotext{position:relative;width:420px;}
.herotext h1{font-family:'Laguna (Condensed)','Open Sans',Arial,sans-serif;font-size:34px;font-weight:700;color:#fff;margin:0 0 10px;letter-spacing:-0.3px;line-height:1.1;}
.herotext p{font-size:14px;color:#d3d3d3;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#0068a0;color:#fff;font-family:'Laguna','Open Sans',Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:12px 22px;border-radius:4px;}
.machine{position:absolute;right:60px;top:40px;width:220px;height:140px;background:linear-gradient(160deg,#434960,#141b38);border-radius:4px;}
.machine:before{content:'';position:absolute;left:80px;top:20px;width:60px;height:100px;background:#0068a0;}
.spectable{display:flex;gap:1px;background:#d3d3d3;margin:0 32px;}
.speccell{flex:1;background:#e9e6ed;text-align:center;padding:8px;}
.speclabel{font-size:10px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;color:#69727d;}
.specvalue{font-size:14px;color:#231f20;margin-top:2px;}
.section{padding:14px 32px 0;}
.grid{display:flex;gap:12px;}
.card{width:150px;background:#fff;border:1px solid #d3d3d3;border-radius:4px;padding:10px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#aa0000;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.thumb{aspect-ratio:4/3;border-radius:4px;margin-bottom:6px;}
.pname{font-family:'Laguna','Open Sans',Arial,sans-serif;font-size:13px;font-weight:600;color:#231f20;}
.pprice{font-family:'Laguna','Open Sans',Arial,sans-serif;font-size:16px;font-weight:700;color:#231f20;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#111111;color:#eeeeee;font-size:11px;border-top:3px solid #0068a0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="utilbar">1-800-LAGUNA · Find a Dealer · My Account</div>
<div class="nav">
<div class="logo">Laguna Tools</div>
<div class="navlinks"><div>CNC Routers</div><div>Laser Cutters</div><div>Woodworking</div><div>Metalworking</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Precision tolerances. Shop floor proven.</h1>
<p>CNC routers and laser cutters built to a machinist's spec sheet.</p>
<div class="cta">Request Quote</div>
</div>
<div class="machine"></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Motor</div><div class="specvalue">5 HP</div></div>
<div class="speccell"><div class="speclabel">Table Size</div><div class="specvalue">4x8 ft</div></div>
<div class="speccell"><div class="speclabel">Spindle</div><div class="specvalue">24,000 RPM</div></div>
</div>
<div class="section">
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#0068a0,#141b38)"></div><div class="pname">Swift CNC Router</div><div class="pprice">$8,995</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#434960,#0068a0)"></div><div class="pname">PL Laser Cutter</div><div class="pprice">$12,495</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffba00,#434960)"></div><div class="pname">14|BX Bandsaw</div><div class="pprice">$1,895</div></div>
</div>
</div>
<div class="footer"><span>© Laguna Tools</span><span>Financing Available</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0E0D0C; color: #F0E8DC;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0E0D0C; color: #F0E8DC;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #F0E8DC; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #8A8078; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.1px; background: #C49A5E; color: #0E0D0C;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.1px; background: transparent; color: #F0E8DC;
border: 1px solid #C49A5E; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #26211D; color: #F0E8DC;
border: 1px solid #464440; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8A8078; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.8px; background: #26211D; color: #E8B86A;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#0E0D0C; color:#F0E8DC; box-sizing:border-box; font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #231F1C;}
.nav .logo{font-size:15px;font-weight:500;letter-spacing:.2px;}
.nav .tabs{display:flex;gap:20px;font-size:12px;color:#8A8078;}
.nav .tabs span:nth-child(2){color:#C49A5E;}
.wrap{display:flex;height:584px;}
.left{width:400px;display:flex;align-items:center;justify-content:center;position:relative;}
.ring{position:relative;width:240px;height:240px;border-radius:50%;box-shadow:0 0 60px rgba(196,154,94,.25);border:3px solid #C49A5E;display:flex;align-items:center;justify-content:center;}
.ring::before{content:'';position:absolute;inset:-16px;border-radius:50%;background:radial-gradient(circle,rgba(196,154,94,.20),transparent 70%);}
.timer{font-size:52px;font-weight:200;letter-spacing:-1px;color:#F0E8DC;}
.right{flex:1;padding:32px 36px;display:flex;flex-direction:column;}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:#8A8078;margin-bottom:10px;border-bottom:1px solid #2E2925;padding-bottom:10px;}
h1{font-size:28px;font-weight:300;letter-spacing:-.3px;margin:0 0 8px;}
.meta{font-size:14px;color:#C8BFB3;margin:0 0 16px;}
.chips{display:flex;gap:8px;margin-bottom:18px;}
.chip{background:#1B1815;color:#C8BFB3;font-size:13px;font-weight:500;border-radius:9999px;padding:8px 16px;height:36px;display:flex;align-items:center;}
.chip.active{background:#C49A5E;color:#0E0D0C;}
.card{background:#26211D;border:1px solid #231F1C;border-radius:12px;padding:16px;margin-bottom:16px;}
.card .t{font-size:17px;font-weight:500;margin:0 0 4px;}
.card .d{font-size:13px;color:#8A8078;margin:0;}
.streak{display:inline-flex;gap:6px;align-items:center;background:#26211D;border:1px solid #2E2925;border-radius:4px;padding:4px 8px;font-size:11px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:#E8B86A;margin-bottom:20px;}
.actions{display:flex;gap:12px;margin-top:auto;}
.btn-primary{background:#C49A5E;color:#0E0D0C;font-size:15px;font-weight:500;letter-spacing:.1px;border-radius:9999px;padding:14px 32px;height:52px;display:flex;align-items:center;}
.btn-secondary{background:transparent;color:#F0E8DC;border:1px solid #2E2925;font-size:15px;font-weight:500;border-radius:9999px;padding:13px 31px;height:52px;display:flex;align-items:center;}
</style>
</head>
<body>
<div class="nav"><div class="logo">Core Meditation</div><div class="tabs"><span>Today</span><span>Sessions</span><span>Progress</span><span>Community</span></div></div>
<div class="wrap">
<div class="left"><div class="ring"><div class="timer">12:04</div></div></div>
<div class="right">
<div class="eyebrow">Sleep · Wind Down</div>
<h1>Evening Body Scan</h1>
<p class="meta">Guided by Naomi Fields · 15 min</p>
<div class="streak">7 day streak</div>
<div class="chips">
<span class="chip active">Beginner</span>
<span class="chip">Sleep</span>
<span class="chip">Anxiety</span>
</div>
<div class="card">
<p class="t">What this practice offers</p>
<p class="d">A slow, guided scan through the body designed to release tension held from the day and prepare the mind for rest. No experience required.</p>
</div>
<div class="actions">
<div class="btn-primary">Begin Session</div>
<div class="btn-secondary">Save for Later</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1B1B1B;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1B1B1B;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20.16px; font-weight: 600; margin: 0; color: #1B1B1B; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #1351B4; color: #FFFFFF;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: transparent; color: #1351B4;
border: 1px solid #1351B4; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #FFFFFF; color: #1B1B1B;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dee7f4; color: #1351B4;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: "Raleway", -apple-system, BlinkMacSystemFont, sans-serif; background: #FFFFFF; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
.govbar { height: 32px; background: #1B1B1B; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; }
.govbar span { color: #CCCCCC; font-size: 11.6px; }
.govbar .links { display: flex; gap: 18px; }
.govbar .links span { color: #ffffff; }
header { height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; border-bottom: 1px solid #CCCCCC; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo .mark { width: 36px; height: 36px; border-radius: 8px; background: #1351B4; }
.logo p { margin: 0; font-size: 18px; font-weight: 600; color: #1B1B1B; }
.searchbar { width: 320px; height: 40px; border: 1px solid #CCCCCC; border-radius: 8px; display: flex; align-items: center; padding: 0 14px; }
.searchbar span { font-size: 14px; color: #757575; }
.signin { background: #1351B4; color: #fff; border: none; border-radius: 8px; padding: 9px 18px; font-weight: 600; font-size: 14px; box-shadow: 0 0 0 3px transparent; }
.hero { background: #1351B4; padding: 40px 32px; display: flex; align-items: center; justify-content: space-between; }
.hero-copy { max-width: 480px; }
.hero .kicker { color: #FFBE2E; font-size: 14px; font-weight: 600; }
.hero h1 { color: #fff; font-size: 34.8px; font-weight: 700; margin: 8px 0 10px; line-height: 1.15; }
.hero p { color: #F0F0F0; font-size: 16.8px; margin: 0 0 18px; }
.hero .cta { background: #FFCD07; color: #1B1B1B; border: none; border-radius: 8px; padding: 12px 24px; font-weight: 600; font-size: 14px; }
.badge-card { width: 260px; background: #ffffff; border-radius: 8px; padding: 18px; }
.badge-card .row { display: flex; justify-content: space-between; font-size: 13px; color: #1B1B1B; padding: 6px 0; border-bottom: 1px solid #F0F0F0; }
.badge-card .row:last-child { border-bottom: none; }
.badge-card .row b { color: #168821; }
.badge-card h4 { margin: 0 0 10px; font-size: 14px; color: #1B1B1B; }
.services { padding: 32px; }
.services h2 { font-size: 24.2px; font-weight: 600; color: #1B1B1B; margin: 0 0 18px; }
.cards { display: flex; gap: 16px; }
.card { flex: 1; border: 1px solid #CCCCCC; border-radius: 8px; padding: 18px; }
.card .ic { width: 34px; height: 34px; border-radius: 8px; margin-bottom: 12px; }
.card h4 { margin: 0 0 6px; font-size: 16px; color: #1B1B1B; }
.card p { margin: 0; font-size: 14px; color: #757575; line-height: 20px; }
.card .link { display: inline-block; margin-top: 10px; font-size: 13px; color: #155BCB; font-weight: 600; }
.footer { margin-top: 20px; background: #F0F0F0; padding: 16px 32px; display: flex; justify-content: space-between; font-size: 12px; color: #757575; border-top: 1px solid #CCCCCC; }
</style>
<div class="govbar">
<span>Official Federal Government Portal</span>
<div class="links"><span>Accessibility</span><span>Language</span><span>Sign in</span></div>
</div>
<header>
<div class="logo"><div class="mark"></div><p>DSGov</p></div>
<div class="searchbar"><span>Search services and agencies...</span></div>
<button class="signin">Sign in</button>
</header>
<div class="hero">
<div class="hero-copy">
<span class="kicker">Digital Government Standard</span>
<h1>One design language for every public service.</h1>
<p>36 accessible components, one typeface, a single visual language across every federal agency online.</p>
<button class="cta">Browse services</button>
</div>
<div class="badge-card">
<h4>Accessibility compliance</h4>
<div class="row"><span>Contrast (WCAG AA)</span><b>Pass</b></div>
<div class="row"><span>Keyboard navigation</span><b>Pass</b></div>
<div class="row"><span>Screen reader support</span><b>Pass</b></div>
<div class="row"><span>Skip links present</span><b>Pass</b></div>
</div>
</div>
<div class="services">
<h2>Popular services</h2>
<div class="cards">
<div class="card"><div class="ic" style="background:#1351B4"></div><h4>Request a document</h4><p>Issue certificates and official records online in minutes.</p><span class="link">Start request →</span></div>
<div class="card"><div class="ic" style="background:#268744"></div><h4>Track my application</h4><p>Check the status of a benefit or service request.</p><span class="link">Track now →</span></div>
<div class="card"><div class="ic" style="background:#E52207"></div><h4>Report an issue</h4><p>File a complaint or report a problem with a public service.</p><span class="link">Report →</span></div>
</div>
</div>
<div class="footer"><span>Federal Government Digital Standard</span><span>Accessibility · Privacy · Terms</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: 1px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #656565; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.1; letter-spacing: 1px; background: #079bd5; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.1; letter-spacing: 1px; background: #ffffff; color: #222222;
border: 1px solid #079bd5; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #444444;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #656565; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.1; letter-spacing: 0.5px; background: #76b900; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Arial,Helvetica,sans-serif; background:#ffffff; color:#444444; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:48px;background:#222222;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-family:'Bebas Neue Pro','Bebas Neue',sans-serif;font-size:20px;letter-spacing:1.5px;color:#fff;}
.navlinks{display:flex;gap:22px;font-family:'Bebas Neue Pro','Bebas Neue',sans-serif;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#fff;}
.navlinks span:first-child{border-left:3px solid #079bd5;padding-left:8px;}
.hero{height:200px;display:flex;padding:0 32px;align-items:center;background:#f8f8f8;}
.heroText{width:50%;}
.h1{font-family:'Bebas Neue Pro','Bebas Neue',sans-serif;font-size:34px;letter-spacing:1px;color:#222222;line-height:1.1;margin:0 0 10px;}
.sub{font-size:14px;color:#444444;margin:0 0 16px;max-width:300px;}
.cta{display:inline-block;background:#079bd5;color:#fff;font-family:'Bebas Neue Pro','Bebas Neue',sans-serif;font-size:14px;letter-spacing:1px;text-transform:uppercase;padding:12px 26px;width:fit-content;}
.heroImg{width:50%;height:130px;position:relative;}
.card3d{position:absolute;width:180px;height:60px;background:linear-gradient(135deg,#222222,#656565);top:36px;left:20px;}
.fanline{position:absolute;width:40px;height:40px;border:2px solid #079bd5;border-radius:50%;top:26px;left:200px;}
.specstrip{display:flex;gap:1px;background:#dedede;margin:0 32px;}
.spec{flex:1;background:#f8f8f8;text-align:center;padding:8px;}
.speclabel{font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#656565;}
.specval{font-family:'Bebas Neue Pro','Bebas Neue',sans-serif;font-size:16px;color:#222222;margin-top:2px;}
.sec{padding:16px 32px 0;}
.secTitle{font-family:'Bebas Neue Pro','Bebas Neue',sans-serif;font-size:18px;letter-spacing:0.6px;color:#222222;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;border:1px solid #dedede;border-radius:4px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-family:'Bebas Neue Pro','Bebas Neue',sans-serif;font-size:10px;letter-spacing:0.4px;text-transform:uppercase;color:#fff;padding:2px 7px;border-radius:2px;}
.thumb{height:96px;border-radius:3px;margin-bottom:8px;}
.ptitle{font-size:13px;font-weight:600;color:#222222;line-height:1.3;height:34px;overflow:hidden;}
.pprice{font-family:'Bebas Neue Pro','Bebas Neue',sans-serif;font-size:17px;color:#222222;margin-top:4px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Pny</div>
<div class="navlinks"><span>Graphics</span><span>Memory</span><span>Storage</span><span>Accessories</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Data, in motion.</div>
<div class="sub">Graphics cards, memory and storage built for benchmarks, not brochures.</div>
<div class="cta">Shop Graphics Cards</div>
</div>
<div class="heroImg"><div class="card3d"></div><div class="fanline"></div></div>
</div>
<div class="specstrip">
<div class="spec"><div class="speclabel">Memory</div><div class="specval">16GB GDDR6</div></div>
<div class="spec"><div class="speclabel">Boost Clock</div><div class="specval">2.6 GHz</div></div>
<div class="spec"><div class="speclabel">Interface</div><div class="specval">PCIe 4.0</div></div>
<div class="spec"><div class="speclabel">TDP</div><div class="specval">220W</div></div>
</div>
<div class="sec">
<div class="secTitle">Featured Hardware</div>
<div class="grid">
<div class="card"><div class="badge" style="background:#76b900;">In Stock</div><div class="thumb" style="background:linear-gradient(135deg,#222222,#079bd5);"></div><div class="ptitle">GeForce RTX Graphics Card 16GB</div><div class="pprice">$899.00</div></div>
<div class="card"><div class="badge" style="background:#991b1e;">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#079bd5,#222222);"></div><div class="ptitle">DDR5 Desktop Memory Kit 32GB</div><div class="pprice">$119.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#656565,#079bd5);"></div><div class="ptitle">NVMe SSD 2TB, Gen4 x4</div><div class="pprice">$149.00</div></div>
<div class="card"><div class="badge" style="background:#76b900;">In Stock</div><div class="thumb" style="background:linear-gradient(135deg,#222222,#656565);"></div><div class="ptitle">USB 3.2 Flash Drive 256GB</div><div class="pprice">$29.00</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fff8f2; color: #0a191c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fff8f2; color: #0a191c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.1px; margin: 0; color: #0a191c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #69727d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #123c2e; color: #fff8f2;
border: none; border-radius: 9999px; padding: 16px 36px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.4px; background: transparent; color: #123c2e;
border: 1px solid #123c2e; border-radius: 9999px;
padding: 14px 32px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #0a191c;
border: 1px solid #c2c0bc; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #69727d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #c6ea5f; color: #123c2e;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#fff8f2;color:#32373c;font-family:'Proxima Nova',Arial,sans-serif;}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'p22-mackinac-pro',Georgia,serif;font-size:24px;color:#123c2e;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;color:#123c2e;}
.cta-nav{background:#123c2e;color:#fff8f2;padding:8px 18px;border-radius:999px;font-size:11px;font-weight:700;}
.hero{display:flex;padding:10px 32px 26px;gap:30px;align-items:center;}
.hero-txt{width:380px;}
.hero-txt .eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#ffa763;font-weight:700;margin-bottom:8px;}
.hero-txt h1{font-family:'p22-mackinac-pro',Georgia,serif;font-size:40px;font-weight:400;line-height:1.1;color:#123c2e;margin:0 0 12px;}
.hero-txt p{font-size:13px;color:#32373c;margin:0 0 16px;}
.cta{background:#ffa763;color:#0a191c;padding:12px 28px;border-radius:999px;font-weight:700;font-size:13px;display:inline-block;}
.farm{flex:1;height:220px;background:#123c2e;border-radius:16px;position:relative;overflow:hidden;}
.farm .pod{position:absolute;width:38px;height:70px;background:#c6ea5f;border-radius:8px 8px 4px 4px;bottom:14px;}
.farm .pod:nth-child(1){left:40px;height:90px;}
.farm .pod:nth-child(2){left:90px;height:60px;background:#a8dc4a;}
.farm .pod:nth-child(3){left:140px;height:110px;background:#c6ea5f;}
.farm .pod:nth-child(4){left:190px;height:75px;background:#9fce4a;}
.farm .pod:nth-child(5){left:240px;height:95px;background:#c6ea5f;}
.farm .glow{position:absolute;top:0;left:0;right:0;height:40px;background:linear-gradient(180deg,rgba(255,167,99,.5),transparent);}
.badge-new{position:absolute;top:14px;right:16px;background:#c6ea5f;color:#123c2e;font-size:9px;font-weight:800;padding:5px 10px;border-radius:999px;text-transform:uppercase;}
.section-title{padding:0 32px;font-family:'p22-mackinac-pro',Georgia,serif;font-size:22px;color:#123c2e;margin:0 0 14px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:0 32px;}
.card{background:#ffffff;border-radius:12px;padding:12px;}
.box{height:88px;border-radius:8px;margin-bottom:8px;}
.b1{background:linear-gradient(160deg,#123c2e,#0a191c);}
.b2{background:linear-gradient(160deg,#ffa763,#f0ad4e);}
.b3{background:linear-gradient(160deg,#c6ea5f,#a8dc4a);}
.b4{background:linear-gradient(160deg,#edf3f0,#dbe8e0);}
.name{font-family:'p22-mackinac-pro',Georgia,serif;font-size:14px;color:#123c2e;margin:0 0 3px;}
.spec{font-size:10px;color:#69727d;margin:0 0 5px;}
.price{font-size:13px;font-weight:700;color:#123c2e;}
</style>
<div class="nav">
<div class="logo">Gardyn</div>
<div class="navlinks"><span>Grow Systems</span><span>Seed Pods</span><span>Nutrients</span><span>Community</span></div>
<div class="cta-nav">Take the Quiz</div>
</div>
<div class="hero">
<div class="hero-txt">
<div class="eyebrow">Indoor Growing, Reinvented</div>
<h1>Harvest something living, every single week</h1>
<p>A hydroponic growing system that fits your kitchen — precision science, zero soil, fresh greens on a Tuesday morning.</p>
<a class="cta">Shop the Gardyn</a>
</div>
<div class="farm"><div class="glow"></div><div class="badge-new">New Pod</div><div class="pod"></div><div class="pod"></div><div class="pod"></div><div class="pod"></div><div class="pod"></div></div>
</div>
<div class="section-title">Grow Your Own</div>
<div class="grid">
<div class="card"><div class="box b1"></div><div class="name">Gardyn 4.0 Grow System</div><div class="spec">30 Plants · AI-Assisted</div><div class="price">$799.00</div></div>
<div class="card"><div class="box b2"></div><div class="name">Salad Greens Seed Pod Kit</div><div class="spec">6-Pack · Fast Harvest</div><div class="price">$34.00</div></div>
<div class="card"><div class="box b3"></div><div class="name">Herb Garden Seed Pod Kit</div><div class="spec">6-Pack · Basil, Mint, Thyme</div><div class="price">$34.00</div></div>
<div class="card"><div class="box b4"></div><div class="name">Nutrient Refill Bundle</div><div class="spec">3-Month Supply</div><div class="price">$29.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0051c3;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0051c3;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; margin: 0; color: #0051c3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; background: #163959; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; background: #ffffff; color: #163959;
border: 1px solid #163959; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #272727;
border: 1px solid #dedede; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.36; letter-spacing: 0.6px; background: #9bca3e; color: #272727;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; background:#ffffff; color:#404040; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.util{height:32px;background:#272727;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#fff;}
.navbar{height:56px;background:#163959;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;color:#fff;}
.searchbar{height:44px;background:#fff;margin:12px 32px 0;border:1px solid #dedede;border-radius:4px;display:flex;}
.searchtext{flex:1;display:flex;align-items:center;padding:0 14px;font-size:13px;color:#595959;}
.searchbtn{width:56px;background:#163959;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;}
.sec{padding:16px 32px 0;}
.secTitle{font-size:16px;font-weight:600;color:#272727;margin-bottom:12px;}
.grid{display:flex;gap:12px;}
.card{width:206px;border:1px solid #dedede;border-radius:2px;padding:12px;}
.manuf{font-size:12px;color:#595959;margin-bottom:2px;}
.partnum{font-family:courier,monospace;font-size:13px;color:#272727;margin-bottom:4px;}
.desc{font-size:13px;color:#404040;line-height:1.4;height:36px;overflow:hidden;margin-bottom:8px;}
.instock{display:inline-block;background:#9bca3e;color:#272727;font-size:11px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;padding:2px 6px;margin-bottom:8px;}
.priceRow{display:flex;justify-content:space-between;align-items:center;}
.cprice{font-size:20px;font-weight:700;color:#272727;}
.addbtn{background:#163959;color:#fff;font-size:13px;font-weight:700;padding:8px 14px;border-radius:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#272727;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;color:#fff;}
</style>
<div class="wrap">
<div class="util"><span>Account · Order History · Contract Pricing</span><span>Branch Locator: 1-800-555-0199</span></div>
<div class="navbar">
<div class="logo">Wesco International</div>
<div class="navlinks"><span>Electrical</span><span>Data Comm</span><span>Safety</span><span>Automation</span></div>
</div>
<div class="searchbar"><div class="searchtext">Search by part number, manufacturer, or keyword...</div><div class="searchbtn">→</div></div>
<div class="sec">
<div class="secTitle">Electrical Supplies</div>
<div class="grid">
<div class="card"><div class="manuf">Southwire</div><div class="partnum">SW-12AWG-500</div><div class="desc">12 AWG THHN Copper Building Wire, 500ft Coil</div><div class="instock">In Stock</div><div class="priceRow"><div class="cprice">$142.30</div><div class="addbtn">Add to Cart</div></div></div>
<div class="card"><div class="manuf">Eaton</div><div class="partnum">CH-2P-20A</div><div class="desc">2-Pole 20A Circuit Breaker, Type CH</div><div class="instock">In Stock</div><div class="priceRow"><div class="cprice">$28.75</div><div class="addbtn">Add to Cart</div></div></div>
<div class="card"><div class="manuf">Hubbell</div><div class="partnum">HBL-RJ45-CAT6</div><div class="desc">CAT6 RJ45 Keystone Jack, Box of 10</div><div class="instock">In Stock</div><div class="priceRow"><div class="cprice">$64.90</div><div class="addbtn">Add to Cart</div></div></div>
</div>
</div>
<div class="footer"><span>© Industrial Procurement Platform</span><span>Compliance & Certifications</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9e9e9e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #005e6e; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #005e6e;
border: 1px solid #005e6e; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9e9e9e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #005e6e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Proxima Nova',Arial,sans-serif; color:#393939; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dedede;}
.logo{font-family:Impact,'Arial Narrow',sans-serif;font-size:20px;font-weight:700;color:#005e6e;letter-spacing:.5px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#393939;}
.searchpill{width:190px;height:34px;border-radius:9999px;background:#f5f5f5;display:flex;align-items:center;padding:0 14px;font-size:12px;color:#9e9e9e;}
.hero{height:250px;display:flex;background:linear-gradient(120deg,#02454f,#005e6e 60%,#00c1bc);}
.herotext{width:46%;padding:0 40px;display:flex;flex-direction:column;justify-content:center;}
h1{font-family:Impact,'Arial Narrow',sans-serif;font-size:32px;color:#fff;margin:0 0 12px;line-height:1.15;letter-spacing:.3px;}
.sub{font-size:14px;color:#cdeeee;margin:0 0 18px;max-width:320px;}
.cta{display:inline-block;background:#f9d861;color:#02454f;font-size:14px;font-weight:700;padding:12px 26px;border-radius:8px;width:fit-content;}
.heroimg{width:54%;position:relative;}
.purifier{position:absolute;left:100px;top:40px;width:100px;height:170px;background:#ffffff;border-radius:16px;}
.mist{position:absolute;border-radius:50%;background:rgba(100,237,194,.4);}
.m1{width:60px;height:60px;left:60px;top:20px;}
.m2{width:40px;height:40px;left:190px;top:60px;}
.spectable{display:flex;gap:1px;background:#dedede;}
.speccell{flex:1;background:#f5f5f5;text-align:center;padding:9px;}
.speclabel{font-size:10px;color:#9e9e9e;text-transform:uppercase;letter-spacing:.5px;}
.specvalue{font-size:14px;font-weight:700;color:#005e6e;margin-top:2px;}
.sec{padding:18px 40px 0;}
.sectitle{font-size:17px;font-weight:700;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;border-radius:8px;border:1px solid #dedede;padding:10px;}
.thumb{height:86px;border-radius:6px;background:#f5f5f5;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;margin-bottom:3px;}
.pprice{font-size:14px;font-weight:700;color:#006689;}
</style>
<div class="nav">
<div class="logo">Levoit</div>
<div class="navlinks"><span>Purifiers</span><span>Humidifiers</span><span>Filters</span></div>
<div class="searchpill">Search products...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>From Ocean Depth to Bright Air.</h1>
<div class="sub">Filtration systems specified in CADR and Wi-Fi, delivered in calm teal.</div>
<div class="cta">Shop Purifiers</div>
</div>
<div class="heroimg"><div class="mist m2"></div><div class="mist m1"></div><div class="purifier"></div></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">CADR</div><div class="specvalue">400 m³/h</div></div>
<div class="speccell"><div class="speclabel">Coverage</div><div class="specvalue">Up to 1,000 ft²</div></div>
<div class="speccell"><div class="speclabel">Filter</div><div class="specvalue">H13 HEPA</div></div>
<div class="speccell"><div class="speclabel">Connectivity</div><div class="specvalue">Wi-Fi + App</div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="pname">Core 400S Purifier</div><div class="pprice">$179.99</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Classic 300S</div><div class="pprice">$129.99</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Dual 200S Humidifier</div><div class="pprice">$89.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #858585; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #1863dc; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #ffffff; color: #1863dc;
border: 1px solid #1863dc; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #212121;
border: 1px solid #dedfe0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #858585; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #dfe9fa; color: #1863dc;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#212121; }
*{box-sizing:border-box;}
.utility{height:28px;background:#212121;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:flex-end;padding:0 32px;gap:16px;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#293c5b;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#fff;}
.hero{height:150px;background:#293c5b;display:flex;align-items:center;padding:0 32px;}
.h1{font-size:28px;font-weight:700;letter-spacing:-0.3px;color:#fff;margin-bottom:6px;}
.sub{font-size:14px;color:#d9dfe7;}
.ctabtn{display:inline-block;background:#dc001b;color:#fff;font-size:14px;font-weight:600;padding:10px 20px;border-radius:4px;margin-top:10px;}
.tabs{display:flex;padding:14px 32px 0;gap:0;}
.ctab{font-size:13px;font-weight:600;padding:8px 16px;border-bottom:1px solid #dedfe0;}
.ctab.on{background:#1863dc;color:#fff;border-bottom:2px solid #1863dc;}
.section{padding:16px 32px 0;}
.grid{display:flex;gap:14px;}
.card{width:150px;border:1px solid #dedfe0;border-radius:4px;padding:12px;}
.thumb{height:74px;background:#f4f4f4;border-radius:4px;margin-bottom:8px;}
.sku{font-size:10px;color:#858585;margin-bottom:4px;font-family:monospace;}
.pname{font-size:14px;font-weight:600;margin-bottom:4px;}
.pprice{font-size:16px;font-weight:600;}
.status{display:inline-block;font-size:9px;font-weight:600;text-transform:uppercase;padding:2px 8px;border-radius:9999px;background:#e6f4e6;color:#008000;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#212121;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#d9dfe7;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="utility"><span>Account</span><span>1-800-555-0192</span></div>
<div class="nav">
<div class="logo">Tab</div>
<div class="navlinks"><div>Fasteners</div><div>Fixtures</div><div>Safety</div><div>Bulk Orders</div></div>
</div>
<div class="hero">
<div>
<div class="h1">Thousands of SKUs. One reliable catalog.</div>
<div class="sub">Filing supplies and hardware procurement, sourced right the first time.</div>
<span class="ctabtn">Request A Quote</span>
</div>
</div>
<div class="tabs"><div class="ctab on">Category A</div><div class="ctab">Category B</div><div class="ctab">Category C</div><div class="ctab">Category D</div></div>
<div class="section">
<div class="grid">
<div class="card"><div class="sku">SKU-10245</div><div class="thumb" style="background:linear-gradient(150deg,#1863dc,#293c5b);"></div><div class="pname">Hex Bolt Set M8</div><div class="pprice">$14.20</div><div class="status">Available</div></div>
<div class="card"><div class="sku">SKU-10298</div><div class="thumb" style="background:linear-gradient(150deg,#293c5b,#dc001b);"></div><div class="pname">Filing Drawer Kit</div><div class="pprice">$62.00</div><div class="status" style="background:#fff3cd;color:#856404;">Low Stock</div></div>
<div class="card"><div class="sku">SKU-10312</div><div class="thumb" style="background:linear-gradient(150deg,#858585,#293c5b);"></div><div class="pname">Label Tab Rolls</div><div class="pprice">$8.75</div><div class="status">Available</div></div>
<div class="card"><div class="sku">SKU-10370</div><div class="thumb" style="background:linear-gradient(150deg,#dc001b,#293c5b);"></div><div class="pname">Storage Bin Rack</div><div class="pprice">$118.00</div><div class="status">Available</div></div>
</div>
</div>
<div class="footer"><span>© Procurement Catalog</span><span>Volume Pricing · Account Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2b96ed; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2b96ed; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2b96ed; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2b96ed; color: #f5f5f5;
border: 1px solid #4ba5ee; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4da7f0; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#495056; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; background:#ffffff; }
.brand { font-size:19px; font-weight:700; margin:0; color:#101418; }
.searchPill { flex:1; max-width:360px; height:40px; background:#f5f6f7; display:flex; align-items:center;
padding:0 16px; color:#495056; font-size:14px; margin:0 24px; }
.navRight { display:flex; align-items:center; gap:12px; }
.localeTab { background:#101418; color:#ffffff; border-radius:16px; padding:6px 10px; height:32px;
display:flex; align-items:center; font-size:15px; font-weight:700; }
.headerAction { background:#2b96ed; color:#ffffff; border-radius:12px; padding:0 24px; height:40px;
display:flex; align-items:center; font-size:14px; font-weight:600; white-space:nowrap; }
.hero { height:210px; position:relative; overflow:hidden;
background:linear-gradient(180deg,#bfe3ff 0%,#eaf6ff 55%,#ffffff 100%); }
.hero .hill1 { position:absolute; left:-40px; bottom:-30px; width:340px; height:150px; border-radius:50%;
background:#8fc7a0; }
.hero .hill2 { position:absolute; right:-60px; bottom:-50px; width:420px; height:180px; border-radius:50%;
background:#6fae86; }
.hero .sun { position:absolute; right:90px; top:34px; width:56px; height:56px; border-radius:50%; background:#ffd77a; }
.hero .tag { position:absolute; left:36px; bottom:18px; background:#101418; color:#fff; font-size:12px;
font-weight:700; padding:6px 12px; border-radius:16px; }
main { display:flex; gap:32px; padding:22px 36px 0; height:296px; }
.colLeft { flex:1; }
.place { font-size:22px; font-weight:700; color:#101418; margin:0 0 4px; }
.metaLine { font-size:13px; color:#666d75; margin-bottom:10px; }
.metaLine b { color:#2b96ed; }
.desc { font-size:14px; line-height:1.5; color:#495056; max-width:440px; margin:0 0 14px; }
.highlights { display:flex; gap:8px; flex-wrap:wrap; }
.hchip { border:1px solid #ced4da; border-radius:9999px; height:30px; padding:0 14px; display:flex;
align-items:center; font-size:12px; color:#495056; }
.colRight { width:270px; flex:0 0 auto; }
.bookCard { background:#f5f6f7; padding:20px; }
.priceRow { display:flex; align-items:baseline; gap:6px; margin-bottom:14px; }
.priceRow .amount { font-size:24px; font-weight:700; color:#101418; }
.priceRow .unit { font-size:12px; color:#666d75; }
.field { background:#ffffff; border:1px solid #ced4da; height:40px; display:flex; align-items:center;
padding:0 12px; font-size:13px; color:#495056; margin-bottom:8px; }
.reserveBtn { background:#2b96ed; color:#ffffff; border-radius:12px; height:40px; width:100%;
display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; margin-top:6px; }
.finePrint { font-size:11px; color:#666d75; margin-top:10px; text-align:center; }
footer { height:32px; border-top:1px solid #e5e5e5; padding:0 36px; display:flex; align-items:center;
justify-content:space-between; font-size:11px; color:#666d75; background:#ffffff; }
</style></head>
<body>
<nav>
<p class="brand">MyRealTrip</p>
<div class="searchPill">Search tours, hotels, activities…</div>
<div class="navRight">
<div class="localeTab">GLOBAL</div>
<div class="headerAction">Sign In</div>
</div>
</nav>
<div class="hero">
<div class="hill1"></div>
<div class="hill2"></div>
<div class="sun"></div>
<div class="tag">Local Guide Included</div>
</div>
<main>
<div class="colLeft">
<h1 class="place">Half-Day Old Town Walking Tour</h1>
<div class="metaLine"><b>4.9</b> · 2,140 traveler reviews · Guided in English</div>
<p class="desc">Explore hidden alleyways, historic markets, and rooftop viewpoints with a local storyteller. Small groups only, with flexible morning and afternoon departures.</p>
<div class="highlights">
<div class="hchip">Small Group</div>
<div class="hchip">Free Cancellation</div>
<div class="hchip">Instant Confirmation</div>
<div class="hchip">Local Host</div>
</div>
</div>
<div class="colRight">
<div class="bookCard">
<div class="priceRow"><span class="amount">$42</span><span class="unit">/ person</span></div>
<div class="field">Select date</div>
<div class="field">2 travelers</div>
<div class="reserveBtn">Reserve</div>
<div class="finePrint">Free cancellation up to 24h before</div>
</div>
</div>
</main>
<footer>
<span>© MyRealTrip</span>
<span>MyRealTrip · Tours · Hotels · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #003399; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #003399;
border: 1px solid #003399; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #da532c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:'Inter', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing: border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 58px; height:58px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #dddddd; background:#ffffff; }
.brand { font-size:19px; font-weight:700; margin:0; letter-spacing:0.3px; text-transform:uppercase; color:#1a1a1a; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#6a6a6a; }
.navlinks span.active { color:#003399; padding-bottom:4px; border-bottom:2px solid #003399; }
.navicons { display:flex; align-items:center; gap:18px; }
.icon-search { width:15px; height:15px; border:1.6px solid #1a1a1a; border-radius:50%; position:relative; }
.icon-search::after { content:''; position:absolute; width:6px; height:1.6px; background:#1a1a1a;
right:-5px; bottom:-1px; transform:rotate(45deg); }
.icon-cart { width:19px; height:15px; border:1.6px solid #1a1a1a; border-radius:0 0 3px 3px; position:relative; }
.icon-cart::before { content:''; position:absolute; top:-6px; left:2px; width:11px; height:7px;
border:1.6px solid #1a1a1a; border-bottom:none; border-radius:6px 6px 0 0; }
.cart-count { position:absolute; top:-8px; right:-8px; width:14px; height:14px; border-radius:50%;
background:#da532c; color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.navicons > div { position:relative; }
.btn-primary { background:#003399; color:#ffffff; border:none; border-radius:8px;
padding:9px 20px; font-weight:600; font-size:13px; letter-spacing:0.4px; white-space:nowrap; }
.hero { flex:0 0 168px; height:168px; position:relative; background:linear-gradient(120deg,#003399 0%,#0a4bc4 55%,#0e57de 100%);
overflow:hidden; display:flex; align-items:center; padding:0 44px; color:#ffffff; }
.hero::after { content:''; position:absolute; right:-40px; bottom:-60px; width:260px; height:180px;
background:#ffffff; opacity:0.08; clip-path:polygon(20% 100%, 45% 30%, 60% 60%, 80% 10%, 100% 100%); }
.hero-inner { position:relative; z-index:2; display:flex; flex-direction:column; gap:10px; max-width:560px; }
.badge-sale { display:inline-flex; align-self:flex-start; background:#da532c; color:#ffffff; border-radius:4px;
padding:4px 10px; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
.hero h1 { margin:0; font-size:36px; font-weight:600; letter-spacing:-1px; line-height:1.08; }
.hero p { margin:0; font-size:14px; color:#cdd9f5; max-width:400px; line-height:1.4; }
.hero-row { display:flex; gap:10px; margin-top:4px; }
.btn-hero-primary { background:#ffffff; color:#003399; border:none; border-radius:8px; padding:11px 22px;
font-weight:600; font-size:14px; letter-spacing:0.3px; }
.btn-hero-secondary { background:transparent; color:#ffffff; border:1.5px solid #ffffff; border-radius:8px;
padding:9.5px 22px; font-weight:600; font-size:14px; letter-spacing:0.3px; }
.catstrip { flex:0 0 40px; height:40px; background:#f7f7f7; display:flex; align-items:center; gap:8px; padding:0 40px; }
.tab { font-size:12.5px; font-weight:600; letter-spacing:0.3px; color:#6a6a6a; padding:6px 14px; border-radius:999px; }
.tab.active { background:#003399; color:#ffffff; }
main.grid { flex:1 1 auto; overflow:hidden; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
padding:16px 40px 0; }
.card { position:relative; border:1px solid #ebebeb; border-radius:8px; background:#ffffff;
display:flex; flex-direction:column; overflow:hidden; }
.card-img { flex:0 0 118px; height:118px; position:relative; }
.img1 { background:linear-gradient(135deg,#003399 0%,#2f63c9 45%,#da532c 100%); }
.img2 { background:linear-gradient(150deg,#00204d 0%,#003399 50%,#1a4fc2 100%); }
.img3 { background:linear-gradient(160deg,#0a2e6b 0%,#003399 40%,#da532c 115%); }
.card-img::after { content:''; position:absolute; left:14%; bottom:0; width:0; height:0;
border-left:34px solid transparent; border-right:34px solid transparent; border-bottom:46px solid rgba(255,255,255,0.14); }
.tag-sale { position:absolute; top:8px; left:8px; background:#da532c; color:#fff; font-size:10px; font-weight:700;
letter-spacing:0.4px; text-transform:uppercase; border-radius:4px; padding:3px 7px; z-index:2; }
.card-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:4px; flex:1; }
.card-body .cat { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#929292; }
.card-body h3 { margin:2px 0 0; font-size:15px; font-weight:600; color:#1a1a1a; letter-spacing:0; }
.stars { font-size:11px; color:#003399; letter-spacing:1px; }
.stars span.count { color:#6a6a6a; font-weight:400; margin-left:4px; font-size:11px; letter-spacing:0; }
.price-row { display:flex; align-items:baseline; gap:7px; margin-top:2px; }
.price { font-size:15px; font-weight:600; color:#1a1a1a; }
.price.sale { color:#da532c; }
.price.orig { font-size:12px; color:#6a6a6a; text-decoration:line-through; font-weight:400; }
footer { flex:0 0 44px; height:44px; background:#003399; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; font-size:11.5px; }
footer span.dim { opacity:0.75; }
</style></head>
<body>
<nav>
<p class="brand">Armada Skis</p>
<div class="navlinks">
<span class="active">Skis</span><span>Apparel</span><span>Athletes</span><span>Sale</span>
</div>
<div class="navicons">
<div class="icon-search"></div>
<div><div class="icon-cart"></div><span class="cart-count">2</span></div>
<button class="btn-primary">Shop Now</button>
</div>
</nav>
<section class="hero">
<div class="hero-inner">
<span class="badge-sale">Winter Sale — Up to 40% Off</span>
<h1>THIS IS Armada Skis.</h1>
<p>Alpine performance built for cold-mountain air, not the showroom floor.</p>
<div class="hero-row">
<button class="btn-hero-primary">Shop Skis</button>
<button class="btn-hero-secondary">Find a Dealer</button>
</div>
</div>
</section>
<div class="catstrip">
<span class="tab active">All-Mountain</span>
<span class="tab">Freeride</span>
<span class="tab">Race</span>
<span class="tab">Apparel</span>
<span class="tab">Accessories</span>
</div>
<main class="grid">
<div class="card">
<div class="card-img img1"><span class="tag-sale">-30%</span></div>
<div class="card-body">
<span class="cat">All-Mountain Skis</span>
<h3>ARW 96 Ski</h3>
<div class="stars">★★★★★<span class="count">(128)</span></div>
<div class="price-row"><span class="price sale">$549</span><span class="price orig">$779</span></div>
</div>
</div>
<div class="card">
<div class="card-img img2"></div>
<div class="card-body">
<span class="cat">Outerwear</span>
<h3>Storm Shell Jacket</h3>
<div class="stars">★★★★☆<span class="count">(64)</span></div>
<div class="price-row"><span class="price">$329</span></div>
</div>
</div>
<div class="card">
<div class="card-img img3"></div>
<div class="card-body">
<span class="cat">Accessories</span>
<h3>Race Gloves</h3>
<div class="stars">★★★★★<span class="count">(211)</span></div>
<div class="price-row"><span class="price">$79</span></div>
</div>
</div>
</main>
<footer>
<span>© Armada Skis</span>
<span class="dim">Armada Skis · Shipping · Returns · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5577; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5577; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5577; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5577; color: #f5f5f5;
border: 1px solid #fd6f8b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff708d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1d1d1d; box-sizing:border-box;
font-family:"Noto Sans JP", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #cccccf; }
.brand { font-size:17px; font-weight:700; color:#1d1d1d; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#6d6d75; }
.btn { border-radius:9999px; padding:8px 20px; font-size:13px; background:#ff5577; color:#fff; }
.hero { padding:24px 32px 18px; }
.hero h1 { font-size:28px; font-weight:600; margin:0 0 8px; }
.hero p { font-size:14px; color:#6d6d75; margin:0 0 18px; max-width:520px; line-height:1.75; }
.tabs { display:flex; gap:10px; padding:0 32px 18px; }
.tab { flex:1; border:2px solid #cccccf; border-radius:8px; padding:16px; height:78px; display:flex; flex-direction:column; justify-content:center; }
.tab.selected { border-color:#ff5577; }
.tab h4 { font-size:15px; font-weight:600; margin:0 0 4px; }
.tab p { font-size:12px; color:#6d6d75; margin:0; }
.services { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:0 32px 20px; }
.service { padding:0; }
.service .sw { width:100%; height:80px; border-radius:8px; margin-bottom:12px; }
.sw1 { background:linear-gradient(135deg,#ff5577,#a83350); }
.sw2 { background:linear-gradient(135deg,#1d1d1d,#4a4a4a); }
.sw3 { background:linear-gradient(135deg,#6d6d75,#1d1d1d); }
.service h3 { font-size:15px; font-weight:700; margin:0 0 6px; }
.service p { font-size:12px; color:#6d6d75; margin:0; line-height:1.75; }
.footerband { background:#1d1d1d; color:#f1f1f1; padding:14px 32px; display:flex; justify-content:space-between; font-size:12px; }
</style></head>
<body>
<nav>
<span class="brand">SAKURA internet</span>
<div class="navlinks"><span>Cloud</span><span>Dedicated Servers</span><span>Data Centers</span><span>AI & GPU</span></div>
<span class="btn">Contact Us</span>
</nav>
<section class="hero">
<h1>Turning what you want to do into what you can do.</h1>
<p>It started in 1996, building servers and lending them to friends. Today we've grown into a platform that expands what's possible for society, from cloud computing to AI infrastructure.</p>
</section>
<div class="tabs">
<div class="tab selected"><h4>Case Study: Manufacturing DX</h4><p>Optimizing operating costs through cloud migration</p></div>
<div class="tab"><h4>Case Study: AI Development</h4><p>Accelerating R&D with GPU cloud</p></div>
<div class="tab"><h4>Case Study: Game Streaming</h4><p>Building a stable streaming backbone with dedicated servers</p></div>
</div>
<div class="services">
<div class="service"><div class="sw sw1"></div><h3>SAKURA internet Cloud</h3><p>A flexibly scaling cloud infrastructure service.</p></div>
<div class="service"><div class="sw sw2"></div><h3>Dedicated Servers</h3><p>Physical servers for businesses that demand high reliability.</p></div>
<div class="service"><div class="sw sw3"></div><h3>High-Power GPU Cloud</h3><p>High-performance GPU infrastructure for AI development and research.</p></div>
</div>
<div class="footerband">
<span>© SAKURA internet</span>
<span>Cloud · Dedicated Servers · Data Centers · Company</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e6e7e0; color: #2f2f2f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e6e7e0; color: #2f2f2f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #2f2f2f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #43454b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #003388; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #e6e7e0; color: #2f2f2f;
border: 1px solid #003388; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2f2f2f;
border: 1px solid #b8b9b4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #43454b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cc1818; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#e6e7e0; color:#242429; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#f7f7f7; border-bottom:1px solid #d0ba8e; }
.brand { font-size:19px; font-weight:700; color:#003388; letter-spacing:0.3px; }
.nlinks { display:flex; gap:26px; }
.nlinks div { font-size:14px; font-weight:500; color:#2f2f2f; }
.nlinks div.on { color:#003388; text-decoration:underline; text-underline-offset:4px; }
.navcta { background:#003388; color:#fff; font-size:14px; font-weight:600; border-radius:2px; padding:10px 20px; }
.body-wrap { display:flex; height:578px; }
.sidebar { width:190px; background:#f7f7f7; border-right:1px solid #c4b7c8; padding:24px 0; }
.sidebar div { padding:11px 24px; font-size:13px; color:#43454b; }
.sidebar div.on { color:#003388; font-weight:700; border-left:3px solid #003388; background:#eaeaf5; }
.main { flex:1; padding:26px 34px 0; }
.hero { background:#ffffff; border:1px solid #c4b7c8; border-radius:4px; padding:26px 30px; margin-bottom:20px; }
.herotxt .k { color:#6c1cff; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; }
.herotxt h1 { font-size:26px; font-weight:700; color:#2f2f2f; margin:8px 0 8px; }
.herotxt p { font-size:15px; line-height:1.6; color:#242429; margin:0 0 14px; max-width:440px; }
.herobtn { display:inline-block; background:#003388; color:#fff; font-size:14px; font-weight:600; border-radius:4px; padding:11px 22px; }
.sechead { font-size:15px; font-weight:600; color:#2f2f2f; margin-bottom:12px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#ffffff; border:1px solid #c4b7c8; border-radius:4px; padding:12px; display:flex; gap:12px; }
.shot { width:70px; height:90px; border-radius:2px; flex-shrink:0; }
.c1 .shot { background:linear-gradient(160deg,#003388,#6c1cff); }
.c2 .shot { background:linear-gradient(160deg,#c4b7c8,#003388); }
.c3 .shot { background:linear-gradient(160deg,#d0ba8e,#6c1cff); }
.cinfo { flex:1; }
.badge { display:inline-block; font-size:9px; font-weight:700; text-transform:uppercase; padding:2px 6px; margin-bottom:6px; color:#fff; }
.badge.new { background:#cc1818; } .badge.sale { background:#f0b849; color:#2f2f2f; }
.ctitle { font-size:14px; font-weight:600; color:#2f2f2f; margin-bottom:4px; }
.cprice { font-size:14px; font-weight:700; color:#003388; }
</style></head>
<body>
<nav>
<div class="brand">Darrington Press</div>
<div class="nlinks"><div class="on">Rulebooks</div><div>Campaign Sets</div><div>Dice</div><div>Vox Machina</div></div>
<div class="navcta">Shop All</div>
</nav>
<div class="body-wrap">
<div class="sidebar">
<div class="on">Core Rulebooks</div>
<div>Supplements</div>
<div>Miniatures</div>
<div>Dice Sets</div>
<div>Apparel</div>
<div>Digital Tools</div>
</div>
<div class="main">
<div class="hero">
<div class="herotxt">
<div class="k">A Publisher's Reading Room</div>
<h1>Rules Worth Reading Twice</h1>
<p>Rulebooks, campaign settings, and dice crafted for tables that take their stories seriously.</p>
<div class="herobtn">Browse The Library</div>
</div>
</div>
<div class="sechead">New Releases</div>
<div class="grid">
<div class="card c1"><div class="shot"></div>
<div class="cinfo"><span class="badge new">New</span><div class="ctitle">Tal'Dorei Campaign Guide</div><div class="cprice">$49.99</div></div></div>
<div class="card c2"><div class="shot"></div>
<div class="cinfo"><span class="badge sale">Sale</span><div class="ctitle">Explorer's Handbook</div><div class="cprice">$34.99</div></div></div>
<div class="card c3"><div class="shot"></div>
<div class="cinfo"><div class="ctitle">Marisha's Dice Set</div><div class="cprice">$29.99</div></div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #1d1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #006fcf; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #006fcf;
border: 1px solid #006fcf; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #232323;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffc600; color: #1d1c1c;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1d1c1c; box-sizing:border-box;
font-family:Geneva, Tahoma, Verdana, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; gap:24px; padding:0 26px;
border-bottom:1px solid #dedede; }
.logo { font-size:19px; font-weight:700; color:#006fcf; }
.navlink { font-size:15px; font-weight:600; color:#1d1c1c; padding:8px 0; }
.navlink.active { color:#006fcf; border-bottom:2px solid #006fcf; }
.searchw { margin-left:auto; width:220px; height:38px; border-radius:999px; border:1px solid #dedede;
display:flex; align-items:center; padding:0 16px; font-size:13px; color:#5f6368; }
.stage { display:flex; gap:28px; padding:24px 26px 0; }
.box { width:250px; height:250px; border-radius:12px; flex:0 0 auto; position:relative; overflow:hidden;
background:linear-gradient(150deg,#006fcf 0%,#003a6e 60%,#1d1c1c 130%); box-shadow:0 8px 20px rgba(0,0,0,.14); }
.box::before { content:''; position:absolute; left:-40px; top:60px; width:320px; height:100px;
background:rgba(255,198,0,.16); transform:rotate(-10deg); }
.box::after { content:''; position:absolute; right:20px; bottom:20px; width:80px; height:80px; border-radius:16px;
background:rgba(255,255,255,.10); transform:rotate(18deg); }
.badgenew { position:absolute; top:14px; left:14px; background:#ffc600; color:#1d1c1c; font-size:11px;
font-weight:700; text-transform:uppercase; letter-spacing:.5px; border-radius:4px; padding:3px 8px; }
.info { flex:1; }
h1 { font-size:24px; font-weight:700; margin:0 0 6px; }
.stars { color:#ffc600; font-size:14px; margin-bottom:10px; }
.stars span { color:#232323; font-size:12px; margin-left:6px; }
.desc { font-size:14px; color:#232323; line-height:1.5; margin-bottom:14px; max-width:520px; }
.specrow { display:flex; gap:10px; margin-bottom:16px; }
.spec { background:#f5f5f5; border-radius:8px; padding:8px 14px; text-align:center; }
.spec .l { font-size:10px; text-transform:uppercase; color:#5f6368; font-weight:600; }
.spec .v { font-size:15px; font-weight:700; margin-top:2px; }
.pricerow { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.price { font-size:26px; font-weight:700; color:#1d1c1c; }
.btnrow { display:flex; gap:10px; }
.btn-p { background:#006fcf; color:#fff; border:none; border-radius:8px; height:44px; padding:0 28px;
font-size:16px; font-weight:600; }
.btn-y { background:#ffc600; color:#1d1c1c; border:none; border-radius:8px; height:44px; padding:0 22px;
font-size:15px; font-weight:600; }
.expwrap { padding:16px 26px 0; border-top:1px solid #e8e8e8; margin-top:18px; }
.exphdr { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#5f6368; margin-bottom:10px; }
.expgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.ec { border:1px solid #e8e8e8; border-radius:12px; padding:8px; }
.ec .th { height:60px; border-radius:8px; margin-bottom:6px; background:linear-gradient(150deg,#f48120,#1d1c1c); }
.ec .t { font-size:11px; font-weight:600; color:#1d1c1c; }
.ec .p { font-size:12px; color:#006fcf; font-weight:700; margin-top:2px; }
</style></head>
<body>
<nav>
<span class="logo">Cephalofair Games</span>
<span class="navlink active">Games</span>
<span class="navlink">Expansions</span>
<span class="navlink">Merch</span>
<span class="navlink">Community</span>
<div class="searchw">Search games…</div>
</nav>
<div class="stage">
<div class="box"><span class="badgenew">New</span></div>
<div class="info">
<h1>Sundering Reach: A Campaign in a Box</h1>
<div class="stars">★★★★★ <span>4.9 (2,140 reviews)</span></div>
<div class="desc">A legacy tactics game for 1–4 players. Carve sigils into your own board, unlock sealed envelopes, and watch the world of Sundering Reach permanently change with every session you play.</div>
<div class="specrow">
<div class="spec"><div class="l">Players</div><div class="v">1–4</div></div>
<div class="spec"><div class="l">Playtime</div><div class="v">60–90 min</div></div>
<div class="spec"><div class="l">Age</div><div class="v">14+</div></div>
<div class="spec"><div class="l">Complexity</div><div class="v">Heavy</div></div>
</div>
<div class="pricerow"><span class="price">$139.00</span></div>
<div class="btnrow">
<button class="btn-p">Add to Cart</button>
<button class="btn-y">Notify on Restock</button>
</div>
</div>
</div>
<div class="expwrap">
<div class="exphdr">Compatible Expansions</div>
<div class="expgrid">
<div class="ec"><div class="th"></div><div class="t">Sundering Reach: Deep Roots</div><div class="p">$44.00</div></div>
<div class="ec"><div class="th" style="background:linear-gradient(150deg,#ffc600,#1d1c1c)"></div><div class="t">Solo Envelope Pack</div><div class="p">$19.00</div></div>
<div class="ec"><div class="th" style="background:linear-gradient(150deg,#006fcf,#232323)"></div><div class="t">Metal Sigil Upgrade Set</div><div class="p">$32.00</div></div>
<div class="ec"><div class="th" style="background:linear-gradient(150deg,#34a853,#1d1c1c)"></div><div class="t">Custom Insert Organizer</div><div class="p">$28.00</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6B6B6B; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #E31837; color: #FFFFFF;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #E31837; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B6B6B; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 1px; background: #E31837; color: #FFFFFF;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:2px solid #1A1A1A;}
.logo{font-family:Arial,'Helvetica Neue',sans-serif;font-size:24px;font-weight:700;letter-spacing:.5px;color:#E31837;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:700;color:#313131;}
.hero{height:250px;display:flex;align-items:center;padding:0 36px;}
.left{width:440px;}
.h1{font-family:Arial,sans-serif;font-size:34px;font-weight:700;line-height:1.15;margin:0 0 6px;color:#1A1A1A;}
.h1u{width:60px;height:3px;background:#E31837;margin-bottom:16px;}
.sub{font-size:14px;line-height:1.6;color:#4a4a4a;max-width:340px;margin:0 0 20px;}
.cta{display:inline-block;background:#E31837;color:#fff;font-size:14px;font-weight:700;padding:12px 26px;}
.right{flex:1;position:relative;height:180px;}
.marker{position:absolute;right:100px;top:10px;width:36px;height:160px;background:#1A1A1A;border-radius:4px;}
.marker:before{content:'';position:absolute;top:-18px;left:2px;width:32px;height:20px;background:#E31837;border-radius:4px 4px 0 0;}
.marker2{position:absolute;right:40px;top:40px;width:36px;height:160px;background:#FFE600;border-radius:4px;}
.marker2:before{content:'';position:absolute;top:-18px;left:2px;width:32px;height:20px;background:#1A1A1A;border-radius:4px 4px 0 0;}
.sec{padding:20px 36px 0;}
.seclabel{font-size:16px;font-weight:700;color:#1A1A1A;margin-bottom:4px;}
.seclabelu{width:40px;height:3px;background:#E31837;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border:1px solid #ddd;padding:12px;}
.thumb{aspect-ratio:1/1;background:#f5f5f5;margin-bottom:8px;}
.ptitle{font-size:14px;font-weight:700;margin:0 0 4px;}
.pprice{font-size:14px;color:#313131;}
.swatchrow{display:flex;gap:6px;margin-top:8px;}
.sw{width:14px;height:14px;border-radius:9999px;}
</style>
<div class="nav">
<div class="logo">Sharpie</div>
<div class="navlinks"><div>Markers</div><div>Highlighters</div><div>Creative</div><div>Bulk</div></div>
</div>
<div class="hero">
<div class="left">
<div class="h1">No room for<br>revision.</div>
<div class="h1u"></div>
<div class="sub">The permanent marker's indelible, high-contrast logic — zero border-radius, everywhere.</div>
<div class="cta">Shop Markers</div>
</div>
<div class="right"><div class="marker"></div><div class="marker2"></div></div>
</div>
<div class="sec">
<div class="seclabel">Best Sellers</div>
<div class="seclabelu"></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#E31837,#1A1A1A)"></div><div class="ptitle">Fine Point Permanent 12ct</div><div class="pprice">$9.49</div><div class="swatchrow"><div class="sw" style="background:#1A1A1A"></div><div class="sw" style="background:#E31837"></div><div class="sw" style="background:#FFE600"></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#FFE600,#1A1A1A)"></div><div class="ptitle">Accent Highlighter 5ct</div><div class="pprice">$6.99</div><div class="swatchrow"><div class="sw" style="background:#FFE600"></div><div class="sw" style="background:#E31837"></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#313131,#E31837)"></div><div class="ptitle">Ultra Fine Point 24ct</div><div class="pprice">$16.99</div><div class="swatchrow"><div class="sw" style="background:#1A1A1A"></div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfbf9; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfbf9; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #9a7e4a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.08em; background: #ab8c52; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.08em; background: #fcfbf9; color: #ab8c52;
border: 1px solid #ab8c52; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfbf9; color: #212121;
border: 1px solid #c5c4c3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a7e4a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.15em; background: #ab8c52; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcfbf9; color:#212121; box-sizing:border-box;
font-family:'Nunito Sans','Karla',Helvetica,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#fcfbf9; border-bottom:1px solid #ece7db; }
.brand { font-size:18px; font-weight:400; color:#ab8c52; margin:0; }
.navlinks { display:flex; gap:22px; font-family:'Jost','Karla',Arial,sans-serif; font-size:13px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:#212121; }
.util { font-size:13px; color:#555555; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 64px); }
.stage { padding:26px; display:flex; flex-direction:column; gap:12px; background:#f5f2ec; }
.crumb { font-family:'Jost','Karla',sans-serif; font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:#636262; }
.pan { flex:1; border-radius:8px; background:#f7f4ef; position:relative; overflow:hidden; }
.pan::before { content:''; position:absolute; left:50%; top:50%; width:190px; height:36px; transform:translate(-50%,-50%); border-radius:18px;
background:linear-gradient(90deg,#806430,#ab8c52 50%,#9a7e4a); box-shadow:0 12px 24px rgba(0,0,0,0.12); }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; border-radius:8px; background:#f7f4ef; }
.info { padding:24px 34px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-family:'Jost','Karla',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; color:#ab8c52; }
h1 { font-family:Baskerville,Georgia,serif; margin:0; font-size:32px; font-weight:400; line-height:1.2; letter-spacing:-0.3px; }
.rating { display:flex; align-items:center; gap:8px; font-size:12px; color:#555555; }
.stars { color:#fbcd0a; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:16px; font-weight:500; color:#ab8c52; }
.badge-best { background:#ab8c52; color:#fff; font-family:'Jost','Karla',sans-serif; font-size:11px; letter-spacing:0.15em; text-transform:uppercase; padding:3px 8px; }
.story-card { background:#f5f2ec; border:1px solid #dfdcd4; border-radius:8px; padding:16px 18px; font-family:Baskerville,Georgia,serif; font-style:italic; font-size:14px; line-height:1.5; color:#2e2e2e; }
.story-overline { display:block; font-family:'Jost','Karla',sans-serif; font-style:normal; font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:#ab8c52; margin-bottom:6px; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#ab8c52; color:#fff; border:none; height:48px; font-family:'Jost','Karla',sans-serif; font-size:14px; font-weight:500; letter-spacing:0.08em; border-radius:4px; }
.btn-secondary { width:170px; background:#fcfbf9; border:1px solid #ab8c52; color:#ab8c52; height:48px; font-family:'Jost','Karla',sans-serif; font-size:14px; font-weight:500; letter-spacing:0.08em; border-radius:4px; }
</style></head>
<body>
<nav>
<p class="brand">Bryan Anthonys</p>
<div class="navlinks"><span>Necklaces</span><span>Bracelets</span><span>Rings</span><span>Gifts</span></div>
<div class="util">Search Cart (1)</div>
</nav>
<main>
<div class="stage">
<div class="crumb">Bryan Anthonys / Necklaces / Mama</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Mama Collection</span>
<h1>Mama Bear Necklace</h1>
<div class="rating"><span class="stars">★★★★★</span> 4.9 · 3,058 reviews</div>
<div class="price-row"><span class="price">$68.00</span><span class="badge-best">Bestseller</span></div>
<div class="story-card"><span class="story-overline">The Story Card</span>“A mother's love carries no boundaries — wear this bear close, and carry it with you.”</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Add to Wishlist</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #061c3d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #061c3d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8993a2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e85040; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #061c3d; color: #e85040;
border: 1px solid #e85040; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #061c3d; color: #f5f5f5;
border: 1px solid #2c3f5a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8993a2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2a243d; color: #e85040;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#061C3D; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; height:640px; }
.sidebar { width:180px; background:#061C3D; flex-shrink:0; display:flex; flex-direction:column; padding:20px 16px; gap:18px; }
.sidebar .brand { color:#ffffff; font-size:15px; font-weight:700; margin:0 0 6px; }
.sidebar .item { color:rgba(255,255,255,0.55); font-size:12px; padding:8px 10px; border-radius:6px; }
.sidebar .item.on { background:rgba(255,255,255,0.1); color:#ffffff; font-weight:600; }
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
header { height:52px; border-bottom:1px solid #F7F6FB; display:flex; align-items:center; justify-content:space-between;
padding:0 26px; }
header h1 { font-size:16px; font-weight:700; margin:0; }
.btn-coral { background:#E85040; color:#ffffff; border-radius:16px; padding:8px 18px; font-size:13px; font-weight:500; }
.tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:18px 26px 0; }
.tile { background:#F7F6FB; border-radius:16px; padding:14px 16px; }
.tile .label { font-size:11px; color:#061C3D; opacity:0.55; margin:0 0 6px; }
.tile .val { font-size:20px; font-weight:700; margin:0; }
.tile .delta { font-size:11px; color:#CB200E; }
.lower { display:flex; gap:16px; padding:16px 26px 0; flex:1; min-height:0; }
.chart { flex:1.3; background:#F7F6FB; border-radius:16px; padding:16px; display:flex; flex-direction:column; }
.chart h3 { font-size:13px; font-weight:600; margin:0 0 10px; }
.bars { flex:1; display:flex; align-items:flex-end; gap:8px; }
.bars i { flex:1; background:#061C3D; border-radius:3px 3px 0 0; }
.store { flex:1; background:#ffffff; border:1px solid #F7F6FB; border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:10px; }
.store h3 { font-size:13px; font-weight:600; margin:0; }
.store-preview { flex:1; border-radius:3px; background:linear-gradient(160deg,#061C3D,#12335e); position:relative; }
.store-preview span { position:absolute; bottom:10px; left:10px; color:#ffffff; font-size:11px; font-weight:600; }
.btn-primary { background:#061C3D; color:#ffffff; border-radius:16px; height:36px; display:flex; align-items:center;
justify-content:center; font-size:13px; font-weight:600; }
</style></head>
<body>
<div class="shell">
<div class="sidebar">
<p class="brand">91APP</p>
<div class="item on">Dashboard</div>
<div class="item">Storefront</div>
<div class="item">Orders</div>
<div class="item">Members</div>
<div class="item">Marketing</div>
<div class="item">Settings</div>
</div>
<div class="main">
<header>
<h1>Omnichannel Overview</h1>
<div class="btn-coral">Publish Campaign</div>
</header>
<div class="tiles">
<div class="tile"><p class="label">Online Sales</p><p class="val">NT$2.84M</p><span class="delta">▲ 12.4%</span></div>
<div class="tile"><p class="label">Offline Sales</p><p class="val">NT$1.12M</p><span class="delta">▲ 4.1%</span></div>
<div class="tile"><p class="label">Orders Today</p><p class="val">3,208</p><span class="delta">▲ 8.7%</span></div>
<div class="tile"><p class="label">Conversion</p><p class="val">3.6%</p><span class="delta">▲ 0.4pt</span></div>
</div>
<div class="lower">
<div class="chart">
<h3>OMO Sales, Last 7 Days</h3>
<div class="bars">
<i style="height:40%"></i><i style="height:58%"></i><i style="height:47%"></i><i style="height:70%"></i>
<i style="height:64%"></i><i style="height:82%"></i><i style="height:95%"></i>
</div>
</div>
<div class="store">
<h3>Storefront Preview</h3>
<div class="store-preview"><span>91APP Store</span></div>
<div class="btn-primary">Manage Storefront</div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #060606;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #060606;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #060606; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #9396a5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #990000; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #060606;
border: 1px solid #990000; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #060606;
border: 1px solid #c1c1c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9396a5; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #e32e00; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#060606; box-sizing:border-box;
font-family:'Archivo','Cabin',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:80px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #dedede; }
.brand { font-size:20px; font-weight:700; color:#990000; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:500; color:#6b6f81; }
.btn-primary { background:#990000; color:#fff; border:none; border-radius:4px; padding:11px 22px; font-size:13px;
font-weight:600; letter-spacing:0.2px; }
main { display:flex; height:calc(640px - 80px - 46px); }
.gallery { width:420px; background:#ededed; position:relative; display:flex; align-items:center; justify-content:center; }
.tent { width:260px; height:150px; border-radius:12px;
background:linear-gradient(135deg,#990000 0%,#4d0000 100%); position:relative; }
.tent::before { content:''; position:absolute; left:50%; top:-40px; transform:translateX(-50%);
width:0; height:0; border-left:130px solid transparent; border-right:130px solid transparent; border-bottom:60px solid #990000; }
.badge-new { position:absolute; top:18px; left:18px; background:#00529c; color:#fff; font-size:11px; font-weight:600;
padding:3px 9px; border-radius:4px; }
.info { flex:1; padding:30px 34px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:12px; color:#9396a5; font-weight:500; text-transform:uppercase; letter-spacing:0.4px; }
h1 { font-size:23px; font-weight:600; margin:0; }
.stock { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#1b6109; font-weight:600; }
.dot { width:7px; height:7px; border-radius:9999px; background:#1b6109; }
.price-row { font-size:20px; font-weight:700; }
.swatches { display:flex; gap:8px; align-items:center; }
.sw { width:26px; height:26px; border-radius:4px; border:2px solid transparent; }
.sw.on { border-color:#060606; }
.sw1 { background:#990000; } .sw2 { background:#00529c; } .sw3 { background:#6b6f81; } .sw4 { background:#ffcb67; }
.specs { display:flex; gap:22px; font-size:12px; color:#6b6f81; }
.specs b { color:#060606; display:block; font-size:14px; }
.progress { display:flex; gap:4px; }
.seg { flex:1; height:4px; background:#efefef; border-radius:2px; }
.seg.on { background:#ffcb67; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#990000; color:#fff; border:none; border-radius:4px; padding:13px; font-size:14px; font-weight:600; }
.btn-sec { background:#fff; color:#060606; border:1px solid #060606; border-radius:4px; padding:13px 18px; font-size:14px; font-weight:600; }
footer { padding:12px 34px; border-top:1px solid #dedede; font-size:11px; color:#9396a5; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Big Agnes</div>
<div class="navlinks"><span>Tents</span><span>Sleeping Bags</span><span>Pads</span><span>Backpacks</span><span>Apparel</span></div>
<button class="btn-primary">Shop Now</button>
</nav>
<main>
<div class="gallery"><span class="badge-new">New for Spring</span><div class="tent"></div></div>
<div class="info">
<span class="cat">3-Season Backpacking Tent</span>
<h1>Copper Spur HV UL3</h1>
<span class="stock"><span class="dot"></span>In stock — ships in 2 days</span>
<div class="price-row">$549.95</div>
<div class="swatches"><span class="sw sw1 on"></span><span class="sw sw2"></span><span class="sw sw3"></span><span class="sw sw4"></span></div>
<div class="specs">
<div><b>2 lb 12 oz</b>Trail weight</div>
<div><b>34.7 ft²</b>Floor area</div>
<div><b>3</b>Person capacity</div>
</div>
<div class="progress"><div class="seg on"></div><div class="seg on"></div><div class="seg"></div></div>
<div class="btn-row">
<button class="btn-add">Add to Cart</button>
<button class="btn-sec">Compare</button>
</div>
</div>
</main>
<footer><span>© Big Agnes</span><span>Warranty · Dealers · Gear Guide</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #252525;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #252525;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #252525; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.38; letter-spacing: 0.02em; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.08em; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.08em; background: transparent; color: #252525;
border: 1px solid #108474; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.6; background: #ffffff; color: #252525;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.27; letter-spacing: 0.08em; background: #108474; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#fbfaf8; font-family:'Lausanne','Helvetica Neue',Arial,sans-serif; color:#12211d;
}
*{box-sizing:border-box;}
.serif{font-family:'Albra',Georgia,serif;}
.nav{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e3ddd0;}
.logo{font-size:20px;letter-spacing:1px;text-transform:uppercase;color:#108474;}
.navlinks{display:flex;gap:24px;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:#3a4a46;}
.cta{background:#108474;color:#fff;padding:11px 20px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;border-radius:8px;}
.hero{display:flex;padding:26px 34px 16px;gap:26px;align-items:center;}
.hero-copy{width:380px;}
.hero-eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#c9c26b;margin-bottom:12px;font-weight:600;}
.hero-title{font-size:34px;line-height:1.15;margin-bottom:14px;color:#12211d;}
.hero-sub{font-size:13px;line-height:1.55;color:#4a4a4a;margin-bottom:16px;}
.btn-main{display:inline-block;background:#108474;color:#fff;padding:13px 24px;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;border-radius:8px;}
.hero-visual{flex:1;height:220px;position:relative;display:flex;gap:10px;}
.portrait{flex:1;border-radius:2px;background:linear-gradient(160deg,#e6e0d2,#c9c26b);position:relative;}
.portrait.b{background:linear-gradient(160deg,#e0e6e2,#108474);}
.gem-ring{position:absolute;width:36px;height:36px;border-radius:50%;border:5px solid #fbcd0a;top:14px;left:50%;transform:translateX(-50%);}
.trust-strip{display:flex;gap:20px;padding:12px 34px;background:#12211d;}
.trust-item{font-size:10px;color:#e9e5d8;text-transform:uppercase;letter-spacing:.5px;}
.trust-item b{color:#c9c26b;}
.section{padding:14px 34px 0;}
.section-title{font-size:16px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px;color:#12211d;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{background:#fff;}
.card-img{aspect-ratio:3/4;border-radius:2px;background:linear-gradient(160deg,#e6e0d2,#108474);margin-bottom:8px;}
.card-name{font-size:12px;margin-bottom:4px;}
.chip{display:inline-block;width:9px;height:9px;border-radius:50%;background:#c9c26b;margin-right:4px;}
.chip.teal{background:#108474;}
.card-price{font-size:12.5px;font-weight:600;color:#108474;}
</style>
<div class="nav">
<div class="logo">Edge OF Ember</div>
<div class="navlinks"><span>Rings</span><span>Necklaces</span><span>Earrings</span><span>Our Ethics</span></div>
<div class="cta">Shop Fine Jewelry</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="hero-eyebrow">Ethics Before Luxury</div>
<div class="hero-title serif">Fine jewelry, responsibly sourced.</div>
<div class="hero-sub">Recycled gold-vermeil and lab-grown gemstones — every piece traceable from mine to hand.</div>
<div class="btn-main">Shop New Arrivals</div>
</div>
<div class="hero-visual">
<div class="portrait"><div class="gem-ring"></div></div>
<div class="portrait b"></div>
</div>
</div>
<div class="trust-strip">
<div class="trust-item"><b>✓</b> Sustainably Made</div>
<div class="trust-item"><b>✓</b> Recycled Metals</div>
<div class="trust-item"><b>✓</b> Lab-Grown Stones</div>
<div class="trust-item"><b>✓</b> Carbon Neutral Shipping</div>
</div>
<div class="section">
<div class="section-title">Signature Pieces</div>
<div class="grid">
<div class="card"><div class="card-img"></div><div class="card-name"><span class="chip"></span>Amethyst Solitaire Ring</div><div class="card-price">£185.00</div></div>
<div class="card"><div class="card-img"></div><div class="card-name"><span class="chip teal"></span>Aquamarine Drop Earrings</div><div class="card-price">£145.00</div></div>
<div class="card"><div class="card-img"></div><div class="card-name"><span class="chip"></span>Vermeil Bezel Necklace</div><div class="card-price">£210.00</div></div>
<div class="card"><div class="card-img"></div><div class="card-name"><span class="chip teal"></span>Signet Ring, Gold Vermeil</div><div class="card-price">£165.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #919db1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 1px; background: #7538ff; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 1px; background: #232a34; color: #e6e8ef;
border: 1px solid #7538ff; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #232a34; color: #e6e8ef;
border: 1px solid #121212; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #919db1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #31d77e; color: #121212;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121212; color:#e6e8ef; font-family:'Noto Sans',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #363c46;}
.logo{font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;}
.navlinks span:first-child{color:#7538ff;}
.catnav{height:44px;background:#1a1f26;display:flex;align-items:center;gap:20px;padding:0 32px;font-size:13px;color:#919db1;}
.catnav span.active{color:#7538ff;border-bottom:2px solid #7538ff;padding-bottom:12px;}
.hero{height:196px;display:flex;align-items:center;padding:0 32px;background:radial-gradient(circle at 75% 50%,#232a34,#121212 70%);}
.heroText{width:52%;}
.heroText h1{font-size:34px;font-weight:700;letter-spacing:-.5px;margin:0 0 10px;line-height:1.1;}
.heroText p{font-size:14px;color:#919db1;max-width:320px;margin:0 0 14px;}
.btn{display:inline-block;background:#7538ff;color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:12px 24px;border-radius:4px;}
.heroImg{width:48%;height:150px;position:relative;}
.headset{position:absolute;right:60px;top:10px;width:150px;height:110px;border-radius:60px 60px 20px 20px;background:linear-gradient(135deg,#7538ff,#121212 70%);box-shadow:0 0 30px rgba(117,56,255,.4);}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:206px;background:#232a34;border-radius:8px;padding:12px;position:relative;}
.badge{position:absolute;top:20px;left:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:2px;z-index:2;}
.thumb{height:96px;border-radius:6px;background:#121212;margin-bottom:10px;display:flex;align-items:center;justify-content:center;}
.thumbshape{width:70px;height:50px;border-radius:25px 25px 8px 8px;}
.pname{font-size:16px;font-weight:700;text-transform:uppercase;margin:0 0 6px;}
.pprice{font-size:20px;font-weight:700;margin:0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Turtle Beach</div>
<div class="navlinks"><span>Headsets</span><span>Stealth</span><span>Recon</span><span>Accessories</span></div>
</div>
<div class="catnav"><span class="active">All Headsets</span><span>Wireless</span><span>PC</span><span>Console</span><span>Mobile</span></div>
<div class="hero">
<div class="heroText">
<h1>Hear Everything. Defeat Everyone.</h1>
<p>Competition-grade audio engineered for the exact moment the match is decided.</p>
<div class="btn">Shop Headsets</div>
</div>
<div class="heroImg"><div class="headset"></div></div>
</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#31d77e;color:#121212;">NEW</span><div class="thumb"><div class="thumbshape" style="background:linear-gradient(135deg,#7538ff,#121212)"></div></div><div class="pname">Stealth 700 Gen 3</div><div class="pprice">$149.99</div></div>
<div class="card"><span class="badge" style="background:#f83b78;color:#fff;">SALE</span><div class="thumb"><div class="thumbshape" style="background:linear-gradient(135deg,#4dfce0,#121212)"></div></div><div class="pname">Stealth 600 Gen 2</div><div class="pprice">$99.99</div></div>
<div class="card"><div class="thumb"><div class="thumbshape" style="background:linear-gradient(135deg,#ffa020,#121212)"></div></div><div class="pname">Recon 500</div><div class="pprice">$59.99</div></div>
<div class="card"><span class="badge" style="background:#7538ff;color:#fff;">EXCLUSIVE</span><div class="thumb"><div class="thumbshape" style="background:linear-gradient(135deg,#f83b78,#121212)"></div></div><div class="pname">Atlas Air</div><div class="pprice">$179.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.08em; background: #ee9441; color: #000000;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.08em; background: #ffffff; color: #121212;
border: 1px solid #ee9441; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1em; background: #f8f5f0; color: #121212;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family: 'Arimo', Arial, sans-serif; background:#fff; color:#3a3a3a; }
*{box-sizing:border-box;}
.serif{font-family: Georgia, 'Times New Roman', serif;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #ebebeb;}
.logo{font-family:Georgia,serif;font-size:22px;letter-spacing:.5px;color:#121212;}
.navlinks{display:flex;gap:26px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#3a3a3a;}
.navicons{display:flex;gap:16px;}
.circ{width:20px;height:20px;border-radius:9999px;background:#f8f5f0;}
.hero{display:flex;height:320px;}
.heroimg{width:55%;background:linear-gradient(135deg,#ee9441,#8b0000 70%);position:relative;overflow:hidden;}
.heroimg:before{content:'';position:absolute;left:20px;top:30px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.15);}
.heroimg:after{content:'';position:absolute;right:40px;bottom:20px;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.12);}
.herotext{width:45%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;}
.herotext h1{font-family:Georgia,serif;font-size:34px;font-weight:400;color:#121212;line-height:1.15;margin:0 0 12px;}
.herotext p{font-size:13px;color:#6b6b6b;margin:0 0 18px;max-width:280px;}
.herocta{display:inline-block;background:#ee9441;color:#fff;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:11px 24px;border-radius:9999px;width:fit-content;}
.pillrow{display:flex;gap:8px;padding:16px 34px;}
.pill{padding:6px 16px;border-radius:9999px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;}
.pill.on{background:#121212;color:#fff;}
.pill.off{border:1px solid #dedede;color:#6b6b6b;}
.grid{display:flex;gap:14px;padding:6px 34px 0;}
.card{width:145px;}
.thumb{aspect-ratio:1/1;height:135px;border-radius:8px;margin-bottom:8px;position:relative;overflow:hidden;}
.gembadge{position:absolute;bottom:6px;left:6px;background:#f8f5f0;color:#3a3a3a;font-size:10px;padding:2px 8px;border-radius:9999px;}
.ptitle{font-size:13px;font-weight:500;letter-spacing:.02em;color:#121212;height:32px;overflow:hidden;line-height:1.3;}
.pprice{font-family:Georgia,serif;font-size:16px;color:#121212;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:11px;color:#6b6b6b;border-top:1px solid #ebebeb;}
.footer span{margin-left:14px;text-transform:uppercase;letter-spacing:.05em;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="navlinks"><div>Fine Jewelry</div><div>Bridal</div><div>Gemstones</div></div>
<div class="logo">Jacquie Aiche</div>
<div class="navicons"><div class="circ"></div><div class="circ"></div><div class="circ"></div></div>
</div>
<div class="hero">
<div class="heroimg"></div>
<div class="herotext">
<h1>Cast in Molten Gold</h1>
<p>Hand-set citrines and rough-cut gemstones, one piece at a time.</p>
<div class="herocta">Explore the Studio</div>
</div>
</div>
<div class="pillrow">
<div class="pill on">New Arrivals</div><div class="pill off">Citrine</div><div class="pill off">Diamond</div><div class="pill off">Ruby</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ee9441,#d4782a)"><span class="gembadge">Citrine</span></div><div class="ptitle">Rope Chain Huggie — Yellow Gold</div><div class="pprice">$895</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8b0000,#3a3a3a)"><span class="gembadge">Ruby</span></div><div class="ptitle">Cabochon Signet Ring</div><div class="pprice">$1,240</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c8c8c8,#ee9441)"><span class="gembadge">Diamond</span></div><div class="ptitle">Bezel Pendant — Petite</div><div class="pprice">$680</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ee9441,#121212)"></div><div class="ptitle">Studio Chain Bracelet Stack</div><div class="pprice">$1,050</div></div>
</div>
<div class="footer"><span>© Studio Los Angeles</span><span>Care Guide<span> Book an Appointment</span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f5f6; color: #1e1e1b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f5f6; color: #1e1e1b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #1e1e1b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #696969; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0.3px; background: #dc0000; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0.3px; background: #f3f5f6; color: #1e1e1b;
border: 1px solid #dc0000; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f3f5f6; color: #677279;
border: 1px solid #bebfbf; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #696969; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #dc0000; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif; background:#f3f5f6; color:#1e1e1b; }
*{box-sizing:border-box;}
.topnav{height:56px;background:#dc0000;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.logo{color:#fff;font-weight:500;font-size:20px;text-transform:uppercase;letter-spacing:.5px;}
.navlinks{display:flex;gap:4px;}
.navlinks div{color:#fff;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;padding:8px 12px;}
.navlinks .on{background:#900000;border-radius:4px;}
.navicon{width:36px;height:36px;border-radius:9999px;background:rgba(255,255,255,.15);}
.catnav{display:flex;gap:8px;padding:10px 24px;background:#f3f5f6;}
.catpill{padding:6px 16px;border-radius:9999px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;}
.catpill.on{background:#dc0000;color:#fff;}
.catpill.off{color:#677279;}
.hero{margin:0 24px 16px;background:#1e1e1b;border-radius:4px;padding:32px;position:relative;overflow:hidden;height:150px;}
.hero h1{color:#f3f5f6;font-size:30px;font-weight:500;margin:0 0 8px;letter-spacing:-0.3px;}
.hero p{color:#8a9297;font-size:14px;margin:0 0 14px;max-width:420px;}
.herocta{display:inline-block;background:#dc0000;color:#fff;font-size:14px;font-weight:500;letter-spacing:.3px;padding:11px 22px;border-radius:4px;}
.grid{display:flex;gap:12px;padding:0 24px;}
.card{width:160px;background:#fff;border:1px solid #dedede;border-radius:4px;padding:8px;}
.thumb{aspect-ratio:1/1;height:150px;border-radius:4px;margin-bottom:8px;position:relative;overflow:hidden;}
.badge{position:absolute;top:6px;left:6px;background:#dc0000;color:#fff;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;border-radius:2px;}
.badge.sale{background:#ffbd00;color:#1e1e1b;}
.ptitle{font-size:15px;font-weight:500;color:#1e1e1b;line-height:1.3;height:34px;overflow:hidden;margin:6px 0 2px;}
.pprice{font-size:15px;font-weight:600;color:#dc0000;}
.pprice.reg{color:#677279;font-weight:500;}
.pstock{font-size:11px;color:#008a00;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#1e1e1b;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:13px;color:#8a9297;}
.footer span{margin-left:14px;color:#8a9297;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="topnav">
<div class="logo">Jackpot Records Independ 2</div>
<div class="navlinks"><div class="on">New</div><div>Vinyl</div><div>Represses</div><div>Merch</div><div>Trade-In</div></div>
<div style="display:flex;gap:8px;"><div class="navicon"></div><div class="navicon"></div></div>
</div>
<div class="catnav">
<div class="catpill on">All</div><div class="catpill off">Jazz</div><div class="catpill off">Hip-Hop</div><div class="catpill off">Indie</div><div class="catpill off">Reissues</div>
</div>
<div class="hero">
<h1>This Week's Independent Presses</h1>
<p>Hand-picked new releases and reissues from labels we actually trust.</p>
<div class="herocta">Shop the Drop</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#dc0000,#900000)"><span class="badge">New</span></div><div class="ptitle">Harborlight — Second Pressing LP</div><div class="pprice">$26.00</div><div class="pstock">In Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#008a00,#003300)"></div><div class="ptitle">Analog Season — Deluxe 2xLP</div><div class="pprice">$38.00</div><div class="pstock">In Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffbd00,#dc0000)"><span class="badge sale">Sale</span></div><div class="ptitle">Field Recordings 04</div><div class="pprice">$19.00</div><div class="pprice reg" style="text-decoration:line-through;font-size:12px;">$24.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#677279,#1e1e1b)"></div><div class="ptitle">Static Bloom — Repress Yellow Vinyl</div><div class="pprice">$29.50</div><div class="pstock" style="color:#ffbd00;">Low Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#dc0000,#1e1e1b)"></div><div class="ptitle">Concrete Choir — Single</div><div class="pprice">$12.00</div><div class="pstock">In Stock</div></div>
</div>
<div class="footer"><span>© Independent Since Day One</span><span>Shipping<span> Wholesale</span><span> Contact</span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f0; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f0; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: 0.25px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #8b0000; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f5f5f0; color: #1a1a1a;
border: 1px solid #8b0000; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f5f5f0; color: #1a1a1a;
border: 1px solid #bebeba; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #8b0000; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Four Horsemen Studios Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Helvetica Neue',Arial,sans-serif; background:#f5f5f0; color:#1a1a1a; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
.nav { background:#1a1a1a; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.logo { color:#f5f5f0; font-weight:700; font-size:19px; letter-spacing:.5px; text-transform:uppercase; }
.navlinks { display:flex; gap:26px; color:#f5f5f0; font-size:13px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; }
.navcta { color:#f5f5f0; }
.hero { height:230px; background:#000; display:flex; align-items:center; padding:0 44px; gap:40px; }
.hero-copy { max-width:400px; }
.hero .kicker { color:#8b0000; font-weight:700; font-size:11px; letter-spacing:2px; text-transform:uppercase; margin-bottom:10px; }
.hero h1 { color:#f5f5f0; font-size:32px; font-weight:700; letter-spacing:.3px; line-height:1.2; margin:0 0 12px; text-transform:uppercase; }
.hero p { color:#999; font-size:13.5px; line-height:1.55; margin:0 0 18px; }
.btn-crimson { background:#8b0000; color:#fff; font-weight:700; font-size:13px; padding:11px 22px; border-radius:4px; text-transform:uppercase; letter-spacing:.5px; display:inline-block; }
.diorama { width:180px; height:200px; background:#000; border:1px solid #333; display:flex; align-items:center; justify-content:center; position:relative; }
.figure { width:60px; height:150px; background:linear-gradient(160deg,#3a3a3a,#111); border-radius:6px; position:relative; }
.figure::before { content:''; position:absolute; top:0; left:10px; right:10px; height:30px; background:#555; border-radius:50%; }
.strip { background:#1a1a1a; padding:8px 40px; display:flex; gap:20px; }
.strip span { color:#999; font-size:11px; }
.strip b { color:#8b0000; }
.section { padding:22px 40px; flex:1; background:#f5f5f0; }
.section h2 { font-size:20px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.card { background:#000; border-radius:4px; padding:12px; position:relative; }
.card .badge { position:absolute; top:8px; left:8px; background:#4a90d9; color:#fff; font-size:8.5px; font-weight:700; padding:2px 9px; border-radius:999px; text-transform:uppercase; }
.card .badge.new { background:#2e7d32; }
.card .ph { height:80px; margin-bottom:8px; display:flex; align-items:center; justify-content:center; }
.minifig { width:26px; height:66px; background:linear-gradient(160deg,#666,#222); border-radius:4px; }
.card .name { color:#f5f5f0; font-weight:700; font-size:12px; margin-bottom:2px; }
.card .desc { color:#999; font-size:10px; margin-bottom:6px; }
.card .price { color:#8b0000; font-weight:700; font-size:13px; }
</style>
<div class="page">
<div class="nav">
<div class="logo">Four Horsemen Studios</div>
<div class="navlinks"><span>Shop All</span><span>Mythic Legions</span><span>Pre-Orders</span><span>About</span></div>
<div class="navcta">🔍</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="kicker">Mythic Legions — Wave 47</div>
<h1>Museum-Grade<br>Collector Armies</h1>
<p>Every armor joint sculpted like a diorama artifact — a specialty boutique for serious collectors, dark and unapologetically niche.</p>
<div class="btn-crimson">Shop Mythic Legions</div>
</div>
<div class="diorama"><div class="figure"></div></div>
</div>
<div class="strip"><span>STOCK: <b>Limited Run</b></span><span>SHIP: <b>Pre-Order Q3</b></span><span>SCALE: <b>1:12</b></span></div>
<div class="section">
<h2>New Arrivals</h2>
<div class="grid">
<div class="card"><span class="badge new">New</span><div class="ph"><div class="minifig"></div></div><div class="name">Necroplasm Warlord</div><div class="desc">Mythic Legions Wave 47</div><div class="price">$34.99</div></div>
<div class="card"><span class="badge">Pre-Order</span><div class="ph"><div class="minifig" style="background:linear-gradient(160deg,#8b0000,#222);"></div></div><div class="name">Crimson Vanguard</div><div class="desc">Limited Edition</div><div class="price">$39.99</div></div>
<div class="card"><div class="ph"><div class="minifig" style="background:linear-gradient(160deg,#4a4a4a,#000);"></div></div><div class="name">Iron Sentinel</div><div class="desc">Advent of Decay</div><div class="price">$29.99</div></div>
<div class="card"><span class="badge" style="background:#8b0000;">Sold Out</span><div class="ph"><div class="minifig" style="background:linear-gradient(160deg,#777,#1a1a1a);"></div></div><div class="name">Frostmarch Knight</div><div class="desc">Wave 44 Reissue</div><div class="price">$32.99</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #1e4fa0; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #ffffff; color: #313131;
border: 1px solid #1e4fa0; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0.5px; background: #f6f6f6; color: #313131;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:#4d4d4d;}
*{box-sizing:border-box;}
.nav{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #d4d4d4;}
.logo{font-size:18px;font-weight:700;letter-spacing:-0.3px;color:#313131;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;color:#4d4d4d;}
.cta-nav{padding:7px 16px;background:#1e4fa0;color:#ffffff;font-size:12px;font-weight:700;border-radius:2px;}
.searchhero{height:120px;background:#eef1f6;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 40px;}
.searchhero-title{font-size:20px;font-weight:700;color:#313131;margin-bottom:12px;}
.searchbox{width:600px;height:44px;border-radius:2px;background:#ffffff;border:1px solid #1e4fa0;display:flex;align-items:center;padding:0 16px;font-size:13px;color:#767676;}
.searchbtn{width:70px;height:44px;background:#1e4fa0;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;border-radius:0 2px 2px 0;margin-left:-2px;}
.searchrow{display:flex;align-items:center;}
.section{padding:18px 40px 0 40px;display:flex;justify-content:space-between;align-items:baseline;}
.section-title{font-size:18px;font-weight:700;color:#313131;}
.section-link{font-size:12px;font-weight:600;color:#1e4fa0;}
.table{margin:12px 40px 0 40px;border:1px solid #d4d4d4;border-radius:2px;overflow:hidden;}
.thead{display:flex;background:#f6f6f6;font-size:11px;font-weight:700;color:#767676;text-transform:uppercase;letter-spacing:0.3px;padding:9px 0;border-bottom:1px solid #d4d4d4;}
.trow{display:flex;padding:11px 0;border-bottom:1px solid #ebebeb;font-size:12px;align-items:center;}
.trow:last-child{border-bottom:none;}
.c1{width:180px;padding-left:16px;font-family:'Courier New',Courier,monospace;font-weight:700;color:#313131;}
.c2{width:250px;color:#313131;}
.c3{width:120px;color:#4d4d4d;}
.c4{width:100px;color:#4d4d4d;}
.c5{width:110px;}
.stat{display:inline-block;font-size:10px;font-weight:700;padding:3px 9px;border-radius:2px;}
.stat.instock{background:#eafaf1;color:#27ae60;}
.stat.leadtime{background:#fef5e7;color:#e67e22;}
.stat.eol{background:#fdedec;color:#c0392b;}
</style>
<div class="nav">
<div class="logo">Hydraulic Supply CO</div>
<div class="navlinks"><span>Cylinders</span><span>Fittings</span><span>Manifolds</span><span>Request Quote</span></div>
<div class="cta-nav">My Account</div>
</div>
<div class="searchhero">
<div class="searchhero-title">Find your part by bore, thread, or model number</div>
<div class="searchrow">
<div class="searchbox">e.g. 2.5" bore hydraulic cylinder, NPT 1/2"...</div>
<div class="searchbtn">Search</div>
</div>
</div>
<div class="section"><div class="section-title">Hydraulic Cylinders — Search Results</div><div class="section-link">Sort: Bore Size</div></div>
<div class="table">
<div class="thead"><div class="c1">PART NO.</div><div class="c2">DESCRIPTION</div><div class="c3">BORE / STROKE</div><div class="c4">PRESSURE</div><div class="c5">STATUS</div></div>
<div class="trow"><div class="c1">HSC-2508</div><div class="c2">Tie-Rod Cylinder, ISO 6020</div><div class="c3">2.5" / 8"</div><div class="c4">3000 PSI</div><div class="c5"><span class="stat instock">In Stock</span></div></div>
<div class="trow"><div class="c1">HSC-3012</div><div class="c2">Welded Clevis Cylinder</div><div class="c3">3.0" / 12"</div><div class="c4">2500 PSI</div><div class="c5"><span class="stat instock">In Stock</span></div></div>
<div class="trow"><div class="c1">HSC-4024</div><div class="c2">Telescopic Dump Cylinder</div><div class="c3">4.0" / 24"</div><div class="c4">2750 PSI</div><div class="c5"><span class="stat leadtime">4-Wk Lead</span></div></div>
<div class="trow"><div class="c1">HSC-1506</div><div class="c2">Compact Mount Cylinder</div><div class="c3">1.5" / 6"</div><div class="c4">3500 PSI</div><div class="c5"><span class="stat eol">End of Life</span></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2f6cb0;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2f6cb0;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #2f6cb0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6e6d6d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #2e469d; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #2e469d;
border: 1px solid #2e469d; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #373a3c;
border: 1px solid #cbdaeb; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e6d6d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.2px; background: #c3e6d0; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f6f6; font-family:'Libre Franklin',Arial,sans-serif; color:#373a3c; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#fff;border-bottom:1px solid #d5d5d5;}
.logo{font-size:19px;font-weight:700;color:#2e469d;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#373a3c;}
.progress{display:flex;gap:6px;}
.step{width:26px;height:6px;border-radius:9999px;background:#d5d5d5;}
.step.done{background:#2e469d;}
.hero{display:flex;padding:20px 40px 0;gap:24px;}
.config{flex:1;background:#fff;border:1px solid #d5d5d5;border-radius:8px;padding:18px;}
.h1{font-size:20px;font-weight:700;color:#373a3c;margin:0 0 4px;}
.hsub{font-size:12px;color:#6e6d6d;margin:0 0 14px;}
.swatchring{display:flex;gap:8px;margin-bottom:14px;}
.sw{width:26px;height:26px;border-radius:9999px;border:2px solid #d5d5d5;}
.sw.active{border:2px solid #2e469d;box-shadow:0 0 0 2px #fff,0 0 0 4px #2e469d;}
.row{display:flex;justify-content:space-between;align-items:center;margin-top:14px;}
.chip{background:#e9f0fd;color:#2e469d;font-size:11px;font-weight:600;padding:6px 12px;border-radius:9999px;}
.price{font-size:20px;font-weight:700;color:#2e469d;}
.btn{background:#2e469d;color:#fff;font-size:13px;font-weight:600;padding:10px 20px;border-radius:8px;margin-top:14px;display:inline-block;}
.preview{width:260px;background:linear-gradient(135deg,#f2f8ff,#e9f0fd);border-radius:8px;display:flex;align-items:center;justify-content:center;padding:20px;}
.box3d{width:150px;height:130px;border-radius:6px;background:linear-gradient(135deg,#2e469d 0%,#1bdfc7 100%);box-shadow:0 12px 24px rgba(46,70,157,0.18);position:relative;}
.box3d:before{content:'';position:absolute;left:0;top:0;right:0;height:36px;background:rgba(255,255,255,0.25);}
.statusrow{display:flex;gap:10px;padding:16px 40px 0;}
.status{font-size:11px;font-weight:600;padding:6px 12px;border-radius:9999px;}
.status.proof{background:#fef5dd;color:#8a6a00;}
.status.print{background:#c3e6d0;color:#03a74f;}
.status.ship{background:#e9f0fd;color:#2e469d;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#fff;border-top:1px solid #d5d5d5;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;color:#6e6d6d;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Packlane</div>
<div class="navlinks"><span>Custom Boxes</span><span>Mailers</span><span>Tissue</span></div>
<div class="progress"><div class="step done"></div><div class="step done"></div><div class="step"></div><div class="step"></div></div>
</div>
<div class="hero">
<div class="config">
<div class="h1">Build Your Custom Mailer</div>
<div class="hsub">Choose material, print finish, and quantity — pricing updates live.</div>
<div class="swatchring">
<div class="sw active" style="background:#f9cf57"></div>
<div class="sw" style="background:#98ff98"></div>
<div class="sw" style="background:#1bdfc7"></div>
<div class="sw" style="background:#ffa300"></div>
<div class="sw" style="background:#b4eef9"></div>
</div>
<div class="row"><div class="chip">500 units</div><div class="chip">Kraft Corrugated</div></div>
<div class="row"><span style="font-size:12px;color:#6e6d6d;">Per-unit at this tier</span><div class="price">$2.14</div></div>
<div class="btn">Add to Cart</div>
</div>
<div class="preview"><div class="box3d"></div></div>
</div>
<div class="statusrow">
<div class="status proof">Proofing</div>
<div class="status print">Printing</div>
<div class="status ship">Shipping</div>
</div>
<div class="footer"><span>Free shipping on orders over $250</span><span>Print-ready proofs in 24 hours</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #4388e8; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #222222;
border: 1px solid #4388e8; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff4d00; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#18191b; box-sizing:border-box;
font-family:'Hind','Montserrat',-apple-system,system-ui,sans-serif; }
* { box-sizing:border-box; }
.mont { font-family:'Montserrat','Hind',sans-serif; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#222222; }
.logo { font-family:'Montserrat',sans-serif; font-weight:700; font-size:16px; color:#fff; text-transform:uppercase;
letter-spacing:0.5px; }
.navlinks { display:flex; gap:22px; font-family:'Montserrat',sans-serif; font-weight:600; font-size:12px;
text-transform:uppercase; letter-spacing:0.5px; color:#cfd3d8; }
.cart-pill { background:#4388e8; color:#fff; font-family:'Montserrat',sans-serif; font-weight:600; font-size:11px;
text-transform:uppercase; padding:6px 14px; border-radius:8px; }
main { display:flex; height:calc(640px - 60px - 28px); }
.stage { width:440px; background:#f5f5f5; position:relative; display:flex; align-items:center; justify-content:center; }
.chair { position:relative; width:190px; }
.headrest { width:120px; height:56px; margin:0 auto; background:linear-gradient(160deg,#4388e8,#2b6fd4);
border-radius:16px; }
.back { width:170px; height:170px; margin:6px auto 0; background:linear-gradient(180deg,#2c2f34,#18191b);
border-radius:20px; position:relative; }
.back::after { content:''; position:absolute; left:14px; right:14px; top:16px; bottom:16px; border-radius:14px;
background:linear-gradient(180deg,#3a3f45,#22252a); box-shadow:inset 0 0 0 1px rgba(67,136,232,0.35); }
.seat { width:190px; height:36px; margin:-6px auto 0; background:#18191b; border-radius:0 0 18px 18px; }
.armL,.armR { position:absolute; top:150px; width:16px; height:52px; background:#3a3f45; border-radius:6px; }
.armL { left:-14px; } .armR { right:-14px; }
.base { width:150px; height:10px; margin:8px auto 0; background:#111; border-radius:9999px; }
.stripe { position:absolute; left:50%; top:70px; transform:translateX(-50%); width:6px; height:150px;
background:linear-gradient(180deg,#ff4200,#e81e63); border-radius:4px; opacity:0.9; }
.badges { position:absolute; top:20px; left:20px; display:flex; gap:8px; }
.b { font-family:'Montserrat',sans-serif; font-weight:700; font-size:10px; text-transform:uppercase;
letter-spacing:0.4px; border-radius:4px; padding:4px 8px; color:#fff; }
.b-sale { background:#ff4d00; } .b-feat { background:#e81e63; }
.info { flex:1; padding:26px 34px; display:flex; flex-direction:column; }
.crumb { font-size:11px; color:#878787; margin-bottom:8px; }
h1 { font-family:'Montserrat',sans-serif; font-weight:700; font-size:24px; letter-spacing:-0.3px; margin:0 0 8px; }
.stars { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.stars .s { color:#e6c273; font-size:14px; }
.stars .n { font-size:12px; color:#878787; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.price { font-family:'Montserrat',sans-serif; font-size:24px; font-weight:700; color:#ff4200; }
.was { font-size:13px; color:#a0a0a0; text-decoration:line-through; }
p.desc { font-size:14px; line-height:1.6; color:#18191b; margin:0 0 16px; max-width:420px; }
.spec { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; background:#f5f5f5; border-radius:12px;
padding:14px 16px; margin-bottom:18px; }
.spec div { font-size:10px; color:#878787; text-transform:uppercase; letter-spacing:0.3px; }
.spec b { display:block; font-size:13px; color:#222; font-weight:600; margin-top:3px; text-transform:none; letter-spacing:0; }
.opt-label { font-size:11px; color:#878787; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.chips { display:flex; gap:8px; margin-bottom:20px; }
.chip { width:26px; height:26px; border-radius:8px; border:2px solid transparent; }
.chip.active { border-color:#4388e8; }
.c1{background:#4388e8;} .c2{background:#18191b;} .c3{background:#ff4200;} .c4{background:#e81e63;}
.cta-row { display:flex; gap:12px; margin-top:auto; }
.btn-primary { background:#4388e8; color:#fff; border:none; border-radius:8px; padding:13px 30px;
font-family:'Montserrat',sans-serif; text-transform:uppercase; font-weight:600; font-size:13px; letter-spacing:0.5px; }
.btn-secondary { background:#fff; color:#222; border:1px solid #222; border-radius:8px; padding:12px 24px;
font-family:'Montserrat',sans-serif; text-transform:uppercase; font-weight:600; font-size:13px; letter-spacing:0.5px; }
</style></head>
<body>
<nav>
<span class="logo">Andaseat</span>
<div class="navlinks"><span>Gaming Chairs</span><span>Ergonomic</span><span>Accessories</span><span>Support</span></div>
<span class="cart-pill">Cart · 1</span>
</nav>
<main>
<div class="stage">
<div class="badges"><span class="b b-sale">Sale</span><span class="b b-feat">Pro Series</span></div>
<div class="chair">
<div class="stripe"></div>
<div class="headrest"></div>
<div class="back"></div>
<div class="armL"></div><div class="armR"></div>
<div class="seat"></div>
<div class="base"></div>
</div>
</div>
<div class="info">
<div class="crumb">Gaming Chairs / Pro Series / <b>Kaiser 3</b></div>
<h1>Kaiser 3 Gaming Throne</h1>
<div class="stars"><span class="s">★★★★★</span><span class="n">4.7 · 3,204 reviews</span></div>
<div class="price-row"><span class="price">$429.00</span><span class="was">$549.00</span></div>
<p class="desc">Cold-rolled steel frame, 4D adjustable armrests, and a full lumbar & neck support system built for marathon sessions.</p>
<div class="spec">
<div>Max Load<b>180 kg</b></div>
<div>Recline<b>90°–160°</b></div>
<div>Warranty<b>4 Years</b></div>
</div>
<div class="opt-label">Color</div>
<div class="chips">
<span class="chip c1 active"></span><span class="chip c2"></span><span class="chip c3"></span><span class="chip c4"></span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compare Models</button>
</div>
</div>
</main>
<footer style="height:28px; background:#111111; display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; color:#878787;">
<span>© Andaseat</span><span>Built for the long game</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #da532c; color: #ffffff;
border: none; border-radius: 12px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #222222;
border: 1px solid #da532c; border-radius: 12px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #c0c0c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ff4500; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:64px;background:#f5f5f5;border-bottom:1px solid #d3d3d3;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:19px;font-weight:700;color:#222222;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;}
.navlinks .active{color:#da532c;border-bottom:2px solid #da532c;padding-bottom:4px;}
.navlinks span{color:#666666;}
.cart{width:36px;height:36px;border-radius:9999px;background:#5bbad5;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.hero{height:200px;display:flex;align-items:center;padding:0 30px;gap:26px;}
.pixelart{width:200px;height:160px;position:relative;flex-shrink:0;}
.px{position:absolute;background:#da532c;}
.p1{width:60px;height:60px;left:60px;top:10px;border-radius:6px;}
.p2{width:30px;height:30px;left:40px;top:40px;background:#ff4500;border-radius:4px;}
.p3{width:30px;height:30px;left:130px;top:40px;background:#5bbad5;border-radius:4px;}
.p4{width:100px;height:20px;left:50px;top:110px;background:#222;border-radius:4px;}
.herotext h1{font-size:30px;font-weight:700;margin:0 0 8px;color:#222222;}
.herotext .sub{font-size:14px;color:#333;margin:0 0 14px;width:360px;}
.cta{display:inline-block;height:48px;line-height:48px;padding:0 26px;background:#da532c;color:#fff;font-size:15px;font-weight:600;border-radius:12px;}
.section{padding:18px 30px 0;}
.sectitle{font-size:22px;font-weight:700;color:#222;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:206px;background:#fff;border-radius:8px;overflow:hidden;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:2px 7px;border-radius:4px;color:#fff;}
.badge.sale{background:#ff4500;}
.badge.new{background:#5bbad5;}
.thumbwrap{position:relative;}
.thumb{height:110px;border-radius:8px 8px 0 0;}
.cardbody{padding:10px 14px 14px;}
.ctitle{font-size:15px;font-weight:600;color:#222;margin:0 0 4px;}
.cprice{font-size:14px;color:#666;margin:0;}
</style>
<div class="nav">
<div class="logo">Yacht Club Games Store</div>
<div class="navlinks"><span class="active">Store</span><span>Games</span><span>Vinyl</span><span>Pins</span><span>About</span></div>
<div class="cart">2</div>
</div>
<div class="hero">
<div class="pixelart"><div class="px p1"></div><div class="px p2"></div><div class="px p3"></div><div class="px p4"></div></div>
<div class="herotext">
<h1>Pixel-perfect plush, pins & soundtracks.</h1>
<div class="sub">Official merch for the games you already know the boss patterns of.</div>
<div class="cta">Shop New Arrivals</div>
</div>
</div>
<div class="section">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumbwrap"><span class="badge sale">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#da532c,#f5f5f5)"></div></div><div class="cardbody"><p class="ctitle">Hero Plush Knight</p><p class="cprice">$24.99</p></div></div>
<div class="card"><div class="thumbwrap"><div class="thumb" style="background:linear-gradient(135deg,#5bbad5,#f5f5f5)"></div></div><div class="cardbody"><p class="ctitle">Vinyl Soundtrack LP</p><p class="cprice">$29.99</p></div></div>
<div class="card"><div class="thumbwrap"><span class="badge new">New</span><div class="thumb" style="background:linear-gradient(135deg,#ff4500,#f5f5f5)"></div></div><div class="cardbody"><p class="ctitle">Enamel Pin Set</p><p class="cprice">$14.99</p></div></div>
<div class="card"><div class="thumbwrap"><div class="thumb" style="background:linear-gradient(135deg,#222222,#da532c)"></div></div><div class="cardbody"><p class="ctitle">Boss Battle Poster</p><p class="cprice">$19.99</p></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffc629; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffc629; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c621c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5b616; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffc629; color: #000000;
border: 1px solid #f5b616; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffc629; color: #111111;
border: 1px solid #d9a925; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c621c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdc326; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1F1F1F; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:0.5px solid #E5E5E5; }
.brand { font-size:17px; font-weight:900; margin:0; }
.hexnav { display:flex; gap:14px; }
.hexnav i { width:24px; height:24px; clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
background:#EDEDED; display:inline-block; }
.hexnav i.on { background:#FFC629; }
.main { display:flex; height:calc(640px - 56px - 54px); }
.yellowpanel { width:420px; background:#FFC629; display:flex; flex-direction:column; align-items:center;
justify-content:center; padding:0 40px; text-align:center; }
.hivelogo { width:44px; height:44px; clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
background:#1F1F1F; margin-bottom:18px; }
.yellowpanel h1 { font-size:30px; font-weight:900; letter-spacing:-0.6px; margin:0 0 8px; line-height:1.1; }
.yellowpanel p { font-size:13px; font-weight:600; margin:0 0 16px; }
.countchip { background:#FFC629; border:1px solid #F5B616; border-radius:999px; padding:6px 16px;
font-size:12px; font-weight:700; margin-bottom:16px; }
.movebtn { background:#ffffff; color:#1F1F1F; border:none; border-radius:28px; padding:13px 30px;
font-weight:700; font-size:14px; }
.swipeside { flex:1; display:flex; align-items:center; justify-content:center; gap:28px; padding:20px 30px; }
.swipecard { position:relative; width:190px; height:254px; border-radius:12px; flex-shrink:0;
background:linear-gradient(155deg,#ffdd94 0%,#f5a04a 55%,#c96f3a 100%); box-shadow:rgba(0,0,0,0.12) 0 4px 16px; overflow:hidden; }
.progressbar { position:absolute; top:8px; left:8px; right:8px; display:flex; gap:4px; }
.progressbar i { flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,0.4); }
.progressbar i.on { background:#fff; }
.cardgrad { position:absolute; left:0; right:0; bottom:0; height:40%;
background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); }
.cardname { position:absolute; left:12px; bottom:12px; color:#fff; font-size:19px; font-weight:700; }
.cardname small { font-size:12px; font-weight:500; display:block; margin-top:2px; }
.infob { position:absolute; right:10px; bottom:12px; width:26px; height:26px; border-radius:50%;
background:rgba(0,0,0,0.4); color:#fff; font-size:13px; display:flex; align-items:center; justify-content:center; }
.actionrow { display:flex; flex-direction:column; align-items:center; gap:14px; }
.abtn { border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; }
.a-rewind { width:36px; height:36px; background:#F5F5F5; color:#9C9C9C; font-size:14px; }
.a-x { width:44px; height:44px; background:#fff; border:1.5px solid #1F1F1F; color:#1F1F1F; font-size:16px; }
.a-heart { width:56px; height:56px; background:#FFC629; color:#000; font-size:22px;
box-shadow:rgba(255,198,41,0.5) 0 6px 16px; }
.a-star { width:44px; height:44px; background:#FFC629; color:#000; font-size:16px; }
.a-bee { width:36px; height:36px; background:#fff; border:1.5px solid #FFC629; color:#1F1F1F; font-size:13px; }
footer { position:absolute; bottom:0; left:0; right:0; height:54px; background:#fff; border-top:0.5px solid #E5E5E5;
display:flex; align-items:center; justify-content:space-around; padding:0 36px; }
footer .tab { text-align:center; font-size:10px; font-weight:700; color:#9C9C9C; }
footer .tab.on { color:#1F1F1F; }
footer .tab.on .dot { width:4px; height:4px; border-radius:50%; background:#FFC629; margin:3px auto 0; }
</style></head>
<body>
<nav>
<p class="brand">Bumble (iOS)</p>
<div class="hexnav"><i class="on"></i><i></i><i></i></div>
</nav>
<div class="main">
<div class="yellowpanel">
<div class="hivelogo"></div>
<h1>Make the first move.</h1>
<p>She has 24 hours to start the conversation.</p>
<div class="countchip">Your turn: 23h 14m</div>
<button class="movebtn">Send a Move</button>
</div>
<div class="swipeside">
<div class="swipecard">
<div class="progressbar"><i class="on"></i><i></i><i></i><i></i></div>
<div class="cardgrad"></div>
<div class="cardname">Sigrún, 28<small>2 km away</small></div>
<div class="infob">i</div>
</div>
<div class="actionrow">
<div class="abtn a-star">★</div>
<div class="abtn a-heart">♥</div>
<div class="abtn a-x">✕</div>
</div>
</div>
</div>
<footer>
<div class="tab on">People<div class="dot"></div></div>
<div class="tab">Hives</div>
<div class="tab">Matches</div>
<div class="tab">Chats</div>
<div class="tab">Profile</div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0a0e17;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0a0e17;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #0a0e17; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #5a6475; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #e07830; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: transparent; color: #0a0e17;
border: 1px solid #e07830; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #0a0e17;
border: 1px solid #c2c3c5; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a6475; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.33; letter-spacing: 0.8px; background: #5b9bd5; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Arial,sans-serif; color:#2d3340; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #f0f1f3;}
.logo{font-size:19px;font-weight:600;letter-spacing:-0.3px;color:#0a0e17;}
.navlinks{display:flex;gap:26px;font-size:14px;font-weight:500;}
.hero{height:230px;background:#0a0e17;display:flex;align-items:center;padding:0 36px;position:relative;overflow:hidden;}
.htxt{width:400px;z-index:2;}
.htxt h1{font-size:38px;font-weight:300;letter-spacing:-0.5px;color:#fff;line-height:1.15;margin:0 0 10px;}
.htxt p{font-size:15px;color:#9da8bc;margin:0 0 16px;}
.hcta{display:inline-block;background:#e07830;color:#fff;font-size:14px;font-weight:600;padding:14px 28px;}
.room{position:absolute;right:0;top:0;width:420px;height:230px;background:linear-gradient(200deg,#1e2636 0%,#0a0e17 70%);}
.room:before{content:'';position:absolute;left:60px;top:60px;width:80px;height:110px;background:#151c2b;border-radius:2px;}
.room:after{content:'';position:absolute;left:180px;top:90px;width:130px;height:2px;background:#e07830;box-shadow:0 0 20px 4px rgba(224,120,48,0.6);}
.selector{height:44px;display:flex;gap:32px;align-items:center;padding:0 36px;background:#f5f6f8;}
.stab{font-size:12px;font-weight:600;letter-spacing:0.8px;text-transform:uppercase;color:#5a6475;}
.stab.active{color:#e07830;border-bottom:2px solid #e07830;padding-bottom:14px;}
.specrow{display:flex;padding:22px 36px 0;}
.spec{flex:1;text-align:left;}
.spec .num{font-size:26px;font-weight:300;letter-spacing:-0.2px;}
.spec .lab{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#5a6475;margin-top:4px;}
.grid{display:flex;gap:16px;padding:20px 36px 0;}
.card{width:206px;border:1px solid #e2e4e9;border-radius:8px;padding:14px;}
.thumb{height:88px;border-radius:4px;margin-bottom:10px;}
.tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:#fff;border-radius:9999px;padding:3px 10px;margin-bottom:6px;}
.title{font-size:15px;font-weight:600;}
</style>
<div class="nav">
<div class="logo">Lutron</div>
<div class="navlinks"><span>Caséta</span><span>RA2 Select</span><span>Homeworks QS</span><span>Support</span></div>
</div>
<div class="hero">
<div class="htxt">
<h1>Lighting that disappears into the room.</h1>
<p>Whole-home control, engineered to feel like nothing at all.</p>
<div class="hcta">Find a Dealer</div>
</div>
<div class="room"></div>
</div>
<div class="selector">
<div class="stab active">Caséta Wireless</div>
<div class="stab">RA2 Select</div>
<div class="stab">Homeworks QS</div>
</div>
<div class="specrow">
<div class="spec"><div class="num">75</div><div class="lab">Zones per system</div></div>
<div class="spec"><div class="num">1000W</div><div class="lab">Max load per dimmer</div></div>
<div class="spec"><div class="num">4</div><div class="lab">Works-with ecosystems</div></div>
</div>
<div class="grid">
<div class="card"><span class="tag" style="background:#5b9bd5;">Caséta</span><div class="thumb" style="background:linear-gradient(135deg,#e2e4e9,#5a6475);"></div><div class="title">In-Wall Dimmer</div></div>
<div class="card"><span class="tag" style="background:#7c5cbf;">RA2 Select</span><div class="thumb" style="background:linear-gradient(135deg,#e2e4e9,#7c5cbf);"></div><div class="title">Keypad Wall Plate</div></div>
<div class="card"><span class="tag" style="background:#2a7a5a;">Homeworks</span><div class="thumb" style="background:linear-gradient(135deg,#e2e4e9,#2a7a5a);"></div><div class="title">Shade Controller</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #9aa0a6; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #116dff; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #080808;
border: 1px solid #116dff; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #080808;
border: 1px solid #dadce0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9aa0a6; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #116dff; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#080808; box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #dadce0; }
.brand { font-family:'Cormorant Garamond', Georgia, serif; font-weight:400; font-size:24px; color:#080808; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-family:'Montserrat',Arial,sans-serif; font-size:14px; font-weight:500; letter-spacing:0.5px; color:#5f6360; }
.navlinks span.on { color:#116dff; }
.hero { height:220px; background:#080808; display:flex; flex-direction:column; align-items:center;
justify-content:center; text-align:center; }
.hero h1 { font-family:'Cormorant Garamond', Georgia, serif; font-weight:300; font-size:40px; color:#fff; margin:0 0 10px; }
.hero p { color:#9aa0a6; font-size:14px; margin:0 0 18px; }
.search { width:460px; height:44px; border-radius:9999px; background:#fff; display:flex; align-items:center;
padding:0 22px; font-size:13px; color:#5f6360; }
.chips { display:flex; gap:10px; padding:16px 32px; }
.chip { background:#e4ebfc; color:#080808; font-size:12px; font-weight:600; padding:6px 16px; border-radius:9999px; }
.chip.on { background:#116dff; color:#fff; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; padding:0 32px; }
.card { background:#fff; border:1px solid #dadce0; border-radius:12px; overflow:hidden; }
.cover { height:110px; position:relative; }
.badge { position:absolute; top:6px; left:6px; font-size:9px; font-weight:700; letter-spacing:0.5px;
text-transform:uppercase; padding:2px 8px; border-radius:4px; color:#fff; }
.b-new { background:#116dff; } .b-sale { background:#080808; }
.info { padding:8px 10px; }
.artist { font-size:9.5px; color:#9aa0a6; text-transform:uppercase; letter-spacing:0.4px; margin:0 0 2px; }
.title { font-size:12px; font-weight:600; margin:0 0 2px; }
.price { font-size:11px; color:#116dff; }
footer { position:absolute; bottom:0; left:0; right:0; height:64px; background:#080808; color:#9aa0a6;
font-size:11px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
footer .cols span { margin-right:18px; }
</style></head>
<body>
<nav>
<div class="brand">Everyday Music</div>
<div class="navlinks"><span class="on">Vinyl</span><span>CDs</span><span>Cassettes</span><span>Merch</span></div>
</nav>
<div class="hero">
<h1>Crate-digging, made comfortable</h1>
<p>A well-organized basement archive of records, worth exploring slowly.</p>
<div class="search">Search artists, albums, labels…</div>
</div>
<div class="chips">
<span class="chip on">Rock</span><span class="chip">Jazz</span><span class="chip">Hip-Hop</span><span class="chip">Soul</span><span class="chip">Electronic</span>
</div>
<div class="grid">
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#1a1a1a,#333);"><span class="badge b-new">New</span></div>
<div class="info"><p class="artist">Nils Aurora</p><p class="title">Blue Static</p><p class="price">$28.00</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#116dff,#0a4fbf);"></div>
<div class="info"><p class="artist">The Coastals</p><p class="title">Low Tide</p><p class="price">$24.00</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#5f6360,#2b2d2c);"><span class="badge b-sale">Sale</span></div>
<div class="info"><p class="artist">June Ferro</p><p class="title">Amber Room</p><p class="price">$19.00</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#dadce0,#9aa0a6);"></div>
<div class="info"><p class="artist">Marlowe Trio</p><p class="title">Nightshift</p><p class="price">$22.00</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#e4ebfc,#a0c4ff);"></div>
<div class="info"><p class="artist">Solaris Kids</p><p class="title">Halide</p><p class="price">$26.00</p></div></div>
</div>
<footer><span>© Everyday Music — records, worth the crate dig</span><div class="cols"><span>About Us</span><span>Shipping</span><span>Returns</span></div></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0b0b0b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0b0b0b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: 0.1px; margin: 0; color: #0b0b0b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.8px; background: #af9363; color: #ffffff;
border: none; border-radius: 2px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.8px; background: #ffffff; color: #0b0b0b;
border: 1px solid #af9363; border-radius: 2px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #0b0b0b;
border: 1px solid #c2c2c2; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 1.2px; background: #f5f1ee; color: #8a5533;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#faf7f2; font-family:'Neue Haas Unica','Helvetica Neue',Arial,sans-serif; color:#2b2822;
}
*{box-sizing:border-box;}
.nav{height:68px; display:flex; align-items:center; justify-content:center; position:relative; border-bottom:1px solid #e6dfd2;}
.logo{font-family:'Libre Baskerville',Georgia,serif; font-size:22px; letter-spacing:2px; text-transform:uppercase;}
.navlinks{position:absolute; left:28px; display:flex; gap:20px; font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:#5a5548;}
.navicons{position:absolute; right:28px; font-size:11px; letter-spacing:.5px; color:#5a5548;}
.delivery{background:#108474; color:#fff; text-align:center; font-size:11px; letter-spacing:.5px; padding:6px 0;}
.hero{display:flex; padding:28px 40px; gap:36px; align-items:center;}
.heroImg{width:300px; height:220px; background:linear-gradient(160deg,#af9363 0%,#8a7248 100%); flex-shrink:0; position:relative;}
.heroImg::before{content:''; position:absolute; inset:14px; border:1px solid rgba(255,255,255,.35);}
.heroText{flex:1;}
.heroText .eyebrow{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#108474; margin-bottom:10px;}
.heroText h1{font-family:'Libre Baskerville',Georgia,serif; font-size:32px; font-weight:400; line-height:1.25; margin:0 0 12px; max-width:380px;}
.heroText p{font-size:13px; color:#6b6558; line-height:1.6; max-width:380px; margin:0 0 16px;}
.heroBtn{display:inline-block; background:#af9363; color:#fff; padding:12px 28px; font-size:11px; letter-spacing:1px; text-transform:uppercase; border-radius:2px;}
.section{padding:6px 40px 0;}
.sectitle{font-family:'Libre Baskerville',Georgia,serif; font-size:18px; margin:0 0 14px; text-align:center;}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.card{text-align:center;}
.thumb{height:120px; background:#efe8db; margin-bottom:10px; border-radius:2px; position:relative;}
.thumb::after{content:''; position:absolute; left:20%; right:20%; top:30%; bottom:20%; background:#af9363; opacity:.5; border-radius:2px;}
.pname{font-family:'Libre Baskerville',Georgia,serif; font-size:13px; margin-bottom:4px;}
.pprice{font-size:12px; color:#6b6558;}
.footer{position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:10px; color:#8a8474; padding:8px 0; border-top:1px solid #e6dfd2;}
</style>
<div class="delivery">Complimentary delivery on all orders over £150</div>
<div class="nav">
<div class="navlinks"><span>Bags</span><span>Wallets</span><span>Travel</span></div>
<div class="logo">Harber London</div>
<div class="navicons">Search · Account · Bag (0)</div>
</div>
<div class="hero">
<div class="heroImg"></div>
<div class="heroText">
<div class="eyebrow">The Autumn Edit</div>
<h1>Leather, indistinguishable from fresh vegetable-tanned hide.</h1>
<p>Structured briefcases and holdalls crafted in small batches, built to age with quiet dignity for decades of daily carry.</p>
<div class="heroBtn">Shop the Edit</div>
</div>
</div>
<div class="section">
<div class="sectitle">Signature Pieces</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="pname">The Ludlow Briefcase</div><div class="pprice">£395</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Weekender Holdall</div><div class="pprice">£320</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Slim Bifold Wallet</div><div class="pprice">£95</div></div>
</div>
</div>
<div class="footer">© Harber London — Handcrafted Leather Goods, London</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1em; background: #ffc863; color: #121212;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1em; background: #ffffff; color: #121212;
border: 1px solid #ffc863; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.06em; background: #ffff00; color: #121212;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Georgia, 'Instrument Sans', serif; background:#fff; color:#121212; }
*{box-sizing:border-box;}
.strip{height:32px;background:#ffc863;color:#121212;font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;text-align:center;line-height:32px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #ebebeb;}
.logo{font-size:20px;font-family:Georgia,serif;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;font-family:'Instrument Sans', sans-serif;}
.hero{height:270px;display:flex;background:#f1f1f1;}
.heroimg{width:420px;position:relative;overflow:hidden;background:linear-gradient(150deg,#f3d78f,#ffc863 60%,#e6a83a);}
.heroimg:before{content:'';position:absolute;width:220px;height:60px;border-radius:0 0 110px 110px;background:#121212;opacity:0.08;top:60px;left:100px;}
.herotext{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 40px;}
.headline{font-size:42px;font-family:Georgia,serif;line-height:1.1;margin-bottom:14px;}
.sub{font-size:15px;font-family:'Instrument Sans',sans-serif;color:#2e2e2e;margin-bottom:18px;max-width:340px;}
.btn{display:inline-block;background:#ffc863;color:#121212;font-size:13px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;font-family:'Instrument Sans',sans-serif;padding:14px 28px;border-radius:8px;width:fit-content;}
.sec{padding:20px 34px;}
.chips{display:flex;gap:8px;margin-bottom:14px;font-family:'Instrument Sans',sans-serif;}
.chip{border:1px solid #dedede;border-radius:9999px;padding:6px 16px;font-size:11px;font-weight:600;text-transform:uppercase;}
.chip.active{background:#121212;color:#fff;border-color:#121212;}
.grid{display:flex;gap:14px;}
.card{width:150px;background:#f3f3f3;padding:8px;}
.thumb{height:180px;position:relative;border-radius:4px;}
.badge{position:absolute;top:6px;left:6px;background:#ffff00;color:#121212;font-size:10px;font-weight:700;padding:3px 8px;border-radius:9999px;text-transform:uppercase;font-family:'Instrument Sans',sans-serif;}
.name{font-size:13px;font-family:'Instrument Sans',sans-serif;margin-top:8px;}
.price{font-size:15px;font-weight:600;font-family:'Instrument Sans',sans-serif;margin-top:2px;}
</style>
<div class="strip">Free shipping on orders over $150</div>
<div class="nav">
<div class="logo">Mignonne Gavigan</div>
<div class="navlinks"><span>Necklaces</span><span>Earrings</span><span>Scarves</span><span>Gifts</span></div>
</div>
<div class="hero">
<div class="heroimg"></div>
<div class="herotext">
<div class="headline">Handwoven, unapologetically bright.</div>
<div class="sub">Beadwork and brass, made by hand for the maximalist at heart.</div>
<div class="btn">Shop the Collection</div>
</div>
</div>
<div class="sec">
<div class="chips"><div class="chip active">All</div><div class="chip">Scarf Necklaces</div><div class="chip">Statement Earrings</div><div class="chip">New</div></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#ffc863,#e6a83a)"><div class="badge">Sale</div></div><div class="name">Marigold Scarf Necklace</div><div class="price">$185</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e6a83a,#ffc863)"></div><div class="name">Beaded Cluster Hoops</div><div class="price">$95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#ffe4a8,#ffc863)"></div><div class="name">Handwoven Fringe Necklace</div><div class="price">$225</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#ffc863,#f3d78f)"></div><div class="name">Brass Drop Earrings</div><div class="price">$78</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #474747;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #474747;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #474747; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #a7a9ac; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; background: #cc0000; color: #ffffff;
border: none; border-radius: 2px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; background: #ffffff; color: #474747;
border: 1px solid #cc0000; border-radius: 2px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #474747;
border: 1px solid #cdcdcd; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a7a9ac; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; background: #f5a623; color: #474747;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{
width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;
background:#fafafa;font-family:Arial,sans-serif;
color:#474747;
}
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.topnav{height:60px;background:#ffffff;border-bottom:1px solid #e4e5e6;display:flex;align-items:center;gap:16px;padding:0 20px;}
.logo{color:#cc0000;font-weight:700;font-size:22px;}
.searchbox{flex:1;border:2px solid #cc0000;border-radius:2px;padding:8px 12px;font-size:12px;color:#a7a9ac;}
.acct{font-size:11px;color:#474747;white-space:nowrap;}
.megabar{height:38px;background:#f0f0f0;border-bottom:1px solid #e4e5e6;display:flex;align-items:center;gap:0;padding:0 20px;font-size:11px;}
.megabar span{padding:0 12px;border-right:1px solid #e4e5e6;color:#474747;font-weight:700;}
.body{display:flex;}
.facet{width:200px;background:#ffffff;border-right:1px solid #e4e5e6;padding:12px;}
.facet h4{font-size:11px;text-transform:uppercase;color:#6b6b6b;margin:0 0 8px;}
.facetrow{font-size:11px;color:#474747;padding:4px 0;border-bottom:1px solid #f0f0f0;}
.main{flex:1;padding:12px 16px;}
.breadcrumb{font-size:10px;color:#6b6b6b;margin-bottom:8px;}
.pagetitle{font-size:20px;font-weight:700;color:#474747;margin:0 0 10px;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.card{border:1px solid #e4e5e6;background:#fff;padding:8px;display:flex;gap:8px;}
.photo{width:70px;height:70px;background:linear-gradient(150deg,#f0f0f0,#e4e5e6);flex-shrink:0;position:relative;}
.photo .gear{position:absolute;inset:20%;border:3px solid #a7a9ac;border-radius:4px;}
.cinfo{flex:1;}
.ctitle{font-size:11px;font-weight:700;color:#474747;margin-bottom:2px;}
.idline{font-size:9px;color:#6b6b6b;margin-bottom:2px;}
.stock{font-size:9px;color:#2e7d32;font-weight:700;}
.price{font-size:16px;font-weight:700;color:#121212;margin-top:2px;}
.unit{font-size:9px;color:#6b6b6b;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#474747;color:#e4e5e6;font-size:10px;padding:6px 20px;display:flex;justify-content:space-between;}
</style>
<div class="wrap">
<div class="topnav">
<div class="logo">Grainger<span style="color:#474747;">.</span></div>
<div class="searchbox">Search by keyword, item #, or part #</div>
<div class="acct">Account · Orders · Cart (0)</div>
</div>
<div class="megabar">
<span>Safety</span><span>Motors</span><span>Fasteners</span><span>Power Tools</span><span>HVAC</span><span>Plumbing</span><span>Material Handling</span>
</div>
<div class="body">
<div class="facet">
<h4>Refine Results</h4>
<div class="facetrow">Brand</div>
<div class="facetrow">Voltage</div>
<div class="facetrow">Horsepower</div>
<div class="facetrow">Mounting Type</div>
<div class="facetrow">In Stock Only</div>
</div>
<div class="main">
<div class="breadcrumb">Home / Motors / AC Motors</div>
<div class="pagetitle">AC Motors (214 results)</div>
<div class="grid">
<div class="card"><div class="photo"><div class="gear"></div></div>
<div class="cinfo"><div class="ctitle">General Purpose AC Motor 1HP</div><div class="idline">Item # 6K315 · Mfr # 5K456</div><div class="stock">In Stock</div><div class="price">$189.50</div><div class="unit">each</div></div></div>
<div class="card"><div class="photo"><div class="gear"></div></div>
<div class="cinfo"><div class="ctitle">TEFC Motor 3HP 1750RPM</div><div class="idline">Item # 4Y231 · Mfr # 3H221</div><div class="stock">In Stock</div><div class="price">$412.00</div><div class="unit">each</div></div></div>
<div class="card"><div class="photo"><div class="gear"></div></div>
<div class="cinfo"><div class="ctitle">Farm Duty Motor 1/2HP</div><div class="idline">Item # 2X887 · Mfr # FD12</div><div class="stock">In Stock</div><div class="price">$96.25</div><div class="unit">each</div></div></div>
<div class="card"><div class="photo"><div class="gear"></div></div>
<div class="cinfo"><div class="ctitle">Explosion-Proof Motor 5HP</div><div class="idline">Item # 9F102 · Mfr # EX50</div><div class="stock">In Stock</div><div class="price">$1,205.00</div><div class="unit">each</div></div></div>
<div class="card"><div class="photo"><div class="gear"></div></div>
<div class="cinfo"><div class="ctitle">DC Gearmotor 90V</div><div class="idline">Item # 1M440 · Mfr # DC90</div><div class="stock">In Stock</div><div class="price">$268.75</div><div class="unit">each</div></div></div>
<div class="card"><div class="photo"><div class="gear"></div></div>
<div class="cinfo"><div class="ctitle">Vibration-Resistant Motor 2HP</div><div class="idline">Item # 7B004 · Mfr # VR20</div><div class="stock">In Stock</div><div class="price">$334.00</div><div class="unit">each</div></div></div>
</div>
</div>
</div>
<div class="footer"><span>© Grainger, Inc.</span><span>Products for the Ones who Get It Done</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #747474; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fafafa; color: #121212;
border: 1px solid #108474; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #121212;
border: 1px solid #c0c0c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #747474; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fbcd0a; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>i-Blason mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#fafafa; color:#121212;
font-family:'Jost', 'Nunito Sans', Arial, Helvetica, sans-serif;
}
*{box-sizing:border-box;}
.nav{
height:64px; background:#fafafa; border-bottom:1px solid #dedede;
display:flex; align-items:center; justify-content:space-between; padding:0 32px;
}
.logo{font-size:22px; font-weight:700; letter-spacing:-0.3px; color:#121212;}
.navlinks{display:flex; gap:24px;}
.navlinks span{font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#747474;}
.navlinks .active{color:#108474; border-bottom:2px solid #108474; padding-bottom:20px;}
.navcta{
height:36px; padding:0 20px; display:flex; align-items:center; justify-content:center;
background:#108474; color:#fff; border-radius:9999px; font-size:12px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase;
}
.hero{height:210px; display:flex; align-items:center; padding:0 32px; background:#f2f2f2;}
.hero-left{width:460px;}
.hkicker{font-size:12px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#fbcd0a; background:#121212; display:inline-block; padding:4px 12px; border-radius:9999px; margin-bottom:14px;}
.h1{font-size:32px; font-weight:700; line-height:1.2; letter-spacing:-0.5px; margin:0 0 10px 0; color:#121212;}
.hsub{font-size:16px; color:#555555; line-height:1.5; margin:0 0 18px 0; max-width:400px;}
.btnrow{display:flex; gap:12px;}
.btnp{height:44px; padding:0 28px; display:flex; align-items:center; justify-content:center; background:#108474; color:#fff; border-radius:9999px; font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase;}
.btns{height:44px; padding:0 27px; display:flex; align-items:center; justify-content:center; background:#fafafa; color:#121212; border-radius:9999px; font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; border:2px solid #d1d1d1;}
.hero-right{flex:1; display:flex; align-items:center; justify-content:center;}
.phonecase{width:120px; height:170px; border-radius:0px; background:linear-gradient(160deg,#108474 0%,#0d6b5c 100%); position:relative; box-shadow:0 10px 24px rgba(0,0,0,0.12);}
.phonecase:before{content:''; position:absolute; top:14px; left:14px; right:14px; bottom:14px; background:#0a5a4d;}
.bumper{position:absolute; top:-6px; left:-6px; right:-6px; bottom:-6px; border:6px solid #fbcd0a; z-index:-1;}
.seclabel{padding:20px 32px 12px 32px; font-size:12px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#747474;}
.grid{display:flex; gap:16px; padding:0 32px;}
.card{width:190px; background:#ffffff; padding:14px; position:relative;}
.badge{position:absolute; top:10px; left:10px; background:#fbcd0a; color:#121212; font-size:10px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; padding:3px 8px; z-index:2;}
.badge-new{background:#108474; color:#fff;}
.thumb{height:96px; background:#f2f2f2; display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
.thumb-case{width:56px; height:82px; background:linear-gradient(160deg,#eeeeee,#cccccc); position:relative;}
.pname{font-size:14px; font-weight:600; margin:0 0 6px 0; color:#121212;}
.pprice{font-size:16px; font-weight:700; color:#108474; margin:0;}
.stars{color:#fbcd0a; font-size:11px; margin-top:4px;}
</style>
<div class="nav">
<div class="logo">I Blason</div>
<div class="navlinks">
<span class="active">Phone Cases</span>
<span>Screen Protectors</span>
<span>Accessories</span>
</div>
<div class="navcta">Find My Model</div>
</div>
<div class="hero">
<div class="hero-left">
<div class="hkicker">Drop-Tested</div>
<h1 class="h1">Armor for your everyday carry.</h1>
<p class="hsub">Military-grade protection engineered for phones that go where you go.</p>
<div class="btnrow">
<div class="btnp">Shop Cases</div>
<div class="btns">Find My Device</div>
</div>
</div>
<div class="hero-right">
<div class="phonecase"><div class="bumper"></div></div>
</div>
</div>
<div class="seclabel">Best Selling Protection</div>
<div class="grid">
<div class="card">
<span class="badge">SALE</span>
<div class="thumb"><div class="thumb-case"></div></div>
<p class="pname">Ares Mag Armor Case</p>
<p class="pprice">$34.99</p>
<div class="stars">★★★★★ 4,821</div>
</div>
<div class="card">
<span class="badge badge-new">NEW</span>
<div class="thumb"><div class="thumb-case" style="background:linear-gradient(160deg,#108474,#0a5a4d);"></div></div>
<p class="pname">Cosmo Slim Wallet Case</p>
<p class="pprice">$29.99</p>
<div class="stars">★★★★★ 2,140</div>
</div>
<div class="card">
<div class="thumb"><div class="thumb-case" style="background:linear-gradient(160deg,#333,#111);"></div></div>
<p class="pname">Tempered Glass 3-Pack</p>
<p class="pprice">$14.99</p>
<div class="stars">★★★★★ 6,032</div>
</div>
<div class="card">
<div class="thumb"><div class="thumb-case" style="background:linear-gradient(160deg,#fbcd0a,#d9b008);"></div></div>
<p class="pname">UB Pro Rugged Case</p>
<p class="pprice">$24.99</p>
<div class="stars">★★★★★ 3,905</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; letter-spacing: 0.1px; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.2px; background: #dedede; color: #121212;
border: none; border-radius: 8px; padding: 13px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.2px; background: transparent; color: #dedede;
border: 1px solid #dedede; border-radius: 8px;
padding: 12px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1f1f1f; color: #ffffff;
border: 1px solid #4d4d4d; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.8px; background: #252525; color: #c8c8c8;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121212; font-family:'Inter',system-ui,sans-serif; color:#c8c8c8; }
*{box-sizing:border-box;}
.nav{height:60px;background:#171717;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:18px;font-weight:600;color:#ffffff;letter-spacing:-.3px;}
.navlinks{display:flex;gap:26px;font-size:13px;font-weight:400;color:#888888;}
.hero{height:220px;display:flex;align-items:center;padding:0 34px;gap:40px;}
.herotext{width:400px;}
h1{font-size:34px;font-weight:600;color:#ffffff;margin:0 0 12px;line-height:1.15;letter-spacing:-.8px;}
.sub{font-size:14px;color:#c8c8c8;line-height:1.6;margin:0 0 20px;width:360px;}
.cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 26px;border:1px solid #dedede;color:#dedede;font-size:13px;font-weight:600;border-radius:12px;}
.pad{width:200px;height:200px;border-radius:9999px;background:radial-gradient(circle at 40% 35%,#252525,#171717 75%);position:relative;box-shadow:0 8px 30px rgba(0,0,0,.5);}
.pad:before{content:'';position:absolute;inset:36px;border-radius:9999px;border:1px solid #333;}
.pad:after{content:'';position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:9999px;background:#dedede;transform:translate(-50%,-50%);}
.section{padding:0 34px;}
.sectitle{font-size:18px;font-weight:600;color:#ffffff;margin:20px 0 14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#1f1f1f;border-radius:8px;padding:14px;}
.thumb{height:96px;border-radius:8px;margin-bottom:10px;background:#171717;position:relative;}
.thumb:after{content:'';position:absolute;left:50%;top:50%;width:60px;height:60px;border-radius:9999px;background:radial-gradient(circle,#2d2d2d,#171717 75%);transform:translate(-50%,-50%);}
.ptitle{font-size:13px;font-weight:500;color:#ffffff;line-height:1.3;height:32px;overflow:hidden;}
.pprice{font-size:13px;color:#c8c8c8;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Zens</div>
<div class="navlinks"><span>Charging Pads</span><span>Stands</span><span>Cables</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Power that disappears.</h1>
<div class="sub">Wireless charging surfaces engineered to vanish into the desk, leaving only the device visible.</div>
<div class="cta">Shop Charging Pads</div>
</div>
<div class="pad"></div>
</div>
<div class="section">
<div class="sectitle">Featured</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ptitle">Single Charging Pad</div><div class="pprice">$49</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Dual Charging Stand</div><div class="pprice">$89</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Modular Charging Pack</div><div class="pprice">$129</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Travel Charging Cable</div><div class="pprice">$29</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f2ef; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f2ef; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #777675; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f3f2ef; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f3f2ef; color: #111111;
border: 1px solid #cfcecb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777675; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f5f4f2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F3F2EF; color:#000000E6; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:640px; }
.feed { flex:1; padding:16px 20px; overflow:hidden; }
.navbar { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.av0 { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#0A66C2,#004182); }
.searchbar { flex:1; background:#fff; border-radius:6px; height:34px; display:flex; align-items:center; padding:0 12px; color:#00000099; font-size:13px; }
.card { background:#fff; border-radius:8px; margin-bottom:8px; padding:14px 16px; }
.chead { display:flex; gap:10px; align-items:center; }
.cav { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#0A66C2,#00396B); position:relative; }
.otwring { position:absolute; inset:-3px; border-radius:50%; border:2px solid #057642; }
.cname { font-size:14px; font-weight:600; }
.chline { font-size:12px; color:#00000099; margin-top:2px; }
.otwbadge { display:inline-block; background:#057642; color:#fff; font-size:9px; font-weight:700; padding:1px 6px; border-radius:3px; margin-left:6px; }
.cbody { font-size:14px; line-height:1.5; margin:10px 0; }
.cimg { height:150px; border-radius:6px; background:linear-gradient(150deg,#dbe4ee,#aeb9c7); margin-bottom:10px; }
.reactions { display:flex; gap:6px; font-size:14px; padding-top:8px; border-top:1px solid #EDEDED; }
.rchip { display:flex; gap:2px; font-size:11px; color:#00000099; }
.col2 { width:300px; flex:0 0 auto; padding:16px 20px; }
.profcard { background:#fff; border-radius:8px; padding:16px; text-align:center; }
.pbanner { height:52px; background:linear-gradient(120deg,#0A66C2,#004182); border-radius:8px 8px 0 0; margin:-16px -16px 0; }
.pav { width:64px; height:64px; border-radius:50%; margin:-32px auto 8px; border:3px solid #C37D16; background:linear-gradient(135deg,#0A66C2,#00396B); }
.pname { font-size:16px; font-weight:700; }
.ptag { font-size:12px; color:#00000099; margin-top:4px; }
.connectbtn { margin-top:12px; border:1.5px solid #0A66C2; color:#0A66C2; font-weight:700; font-size:13px; padding:6px 0; border-radius:16px; }
</style></head>
<body>
<div class="wrap">
<div class="feed">
<div class="navbar"><div class="av0"></div><div class="searchbar">Search</div></div>
<div class="card">
<div class="chead"><div class="cav"><div class="otwring"></div></div>
<div><div class="cname">LinkedIn (iOS)<span class="otwbadge">#OPENTOWORK</span></div><div class="chline">Product Designer · 2h · 🌐</div></div></div>
<div class="cbody">Excited to share that our latest release ships with a fully redesigned onboarding flow. Grateful for the team that made it happen. #productdesign</div>
<div class="cimg"></div>
<div class="reactions"><span class="rchip">👍 ❤️ 248</span><span class="rchip" style="margin-left:auto;">32 comments</span></div>
</div>
<div class="card">
<div class="chead"><div class="cav" style="background:linear-gradient(135deg,#c9c7c2,#8e8c88);"></div>
<div><div class="cname">Alicia Reyes</div><div class="chline">Hiring Manager at Nova Labs · 1d</div></div></div>
<div class="cbody">We're hiring a Senior iOS Engineer to join our platform team — remote friendly. Link in comments.</div>
<div class="reactions"><span class="rchip">💡 91</span><span class="rchip" style="margin-left:auto;">14 comments</span></div>
</div>
</div>
<div class="col2">
<div class="profcard">
<div class="pbanner"></div>
<div class="pav"></div>
<div class="pname">LinkedIn (iOS)</div>
<div class="ptag">Product Designer at Nova Labs</div>
<div class="connectbtn">+ Connect</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f1e6; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f1e6; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #787671; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #b9d9eb; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f6f1e6; color: #000000;
border: 1px solid #b9d9eb; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f6f1e6; color: #111111;
border: 1px solid #d1cdc4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787671; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ecede7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F6F1E6; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.map { position:absolute; inset:0; background:#F6F1E6; }
.water { position:absolute; background:#B9D9EB; border-radius:50%; }
.w1 { width:420px; height:420px; left:-140px; top:-60px; }
.w2 { width:260px; height:260px; right:-90px; bottom:-80px; }
.park { position:absolute; background:#D6E5C9; border-radius:40% 60% 55% 45%; }
.p1 { width:190px; height:140px; left:360px; top:60px; }
.p2 { width:150px; height:110px; right:220px; bottom:40px; }
.road { position:absolute; background:#FFFFFF; border:1px solid #D5CFC0; }
.r1 { width:900px; height:14px; left:30px; top:230px; transform:rotate(-3deg); }
.r2 { width:14px; height:520px; left:470px; top:60px; transform:rotate(6deg); }
.r3 { width:700px; height:10px; left:120px; top:420px; transform:rotate(2deg); }
.bld { position:absolute; width:34px; height:34px; background:#EFE9DD; border:1px solid #D5CFC0; border-radius:4px; }
nav { position:relative; z-index:5; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; background:rgba(246,241,230,0.0); }
.brand { font-size:15px; font-weight:700; margin:0; letter-spacing:-0.2px; color:#000; }
.navlinks { display:flex; gap:20px; font-size:12px; font-weight:500; color:#3C3C43; opacity:0.6; }
.controls { position:absolute; right:24px; top:66px; display:flex; flex-direction:column; gap:8px; z-index:6; }
.cbtn { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.72); backdrop-filter:blur(10px);
display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
.cbtn .g { width:16px; height:16px; border:2px solid #000; border-radius:3px; }
.cbtn.loc .g { border-radius:50%; border-color:#0A84FF; }
.cbtn.compass .g { width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:14px solid #FF3B30; border-radius:0; }
.pin { position:absolute; left:560px; top:150px; z-index:6; }
.pinhead { width:26px; height:26px; background:#FF3B30; border-radius:50% 50% 50% 0; transform:rotate(45deg);
box-shadow:0 3px 6px rgba(0,0,0,0.3); }
.pindot { position:absolute; left:8px; top:8px; width:10px; height:10px; background:#fff; border-radius:50%; }
.puck { position:absolute; left:340px; top:340px; z-index:6; }
.pring { width:38px; height:38px; border-radius:50%; background:rgba(10,132,255,0.18); position:absolute; left:-9px; top:-9px; }
.pcore { width:20px; height:20px; border-radius:50%; background:#0A84FF; border:3px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,0.3); }
.cone { position:absolute; left:9px; top:-30px; width:0; height:0; border-left:16px solid transparent; border-right:16px solid transparent;
border-bottom:34px solid rgba(10,132,255,0.35); }
.searchcard { position:absolute; left:0; right:0; bottom:0; height:236px; background:rgba(255,255,255,0.86);
backdrop-filter:blur(18px); border-radius:20px 20px 0 0; box-shadow:0 -8px 24px rgba(0,0,0,0.12); z-index:8; padding:10px 28px 20px; }
.grabber { width:36px; height:5px; background:rgba(60,60,67,0.3); border-radius:3px; margin:0 auto 12px; }
.searchfield { height:40px; background:#F2F2F7; border-radius:10px; display:flex; align-items:center; gap:8px; padding:0 14px; }
.searchfield .mag { width:14px; height:14px; border:2px solid rgba(60,60,67,0.6); border-radius:50%; position:relative; }
.searchfield .mag::after { content:''; position:absolute; width:6px; height:2px; background:rgba(60,60,67,0.6); right:-6px; bottom:0; transform:rotate(45deg); }
.searchfield span { font-size:15px; color:rgba(60,60,67,0.4); }
.pills { display:flex; gap:10px; margin-top:14px; }
.pill { width:74px; height:88px; background:#fff; border-radius:14px; box-shadow:0 4px 12px rgba(0,0,0,0.08);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.pill .ic { width:24px; height:24px; border-radius:6px; }
.pill span { font-size:11px; font-weight:500; color:#000; }
.placecard { position:absolute; right:28px; bottom:20px; width:230px; background:#fff; border-radius:16px;
box-shadow:0 6px 20px rgba(0,0,0,0.16); padding:16px; z-index:9; }
.placecard .bar { width:4px; height:34px; background:#FF3B30; border-radius:2px; position:absolute; left:16px; top:16px; }
.pctitle { font-size:16px; font-weight:700; margin:0 0 2px 14px; }
.pcsub { font-size:11px; color:rgba(60,60,67,0.6); margin:0 0 10px 14px; }
.pcbtn { background:#0A84FF; color:#fff; font-size:12px; font-weight:600; text-align:center; border-radius:18px; padding:8px; }
</style></head>
<body>
<div class="map">
<div class="water w1"></div><div class="water w2"></div>
<div class="park p1"></div><div class="park p2"></div>
<div class="road r1"></div><div class="road r2"></div><div class="road r3"></div>
<div class="bld" style="left:410px;top:150px;"></div>
<div class="bld" style="left:456px;top:190px;"></div>
<div class="bld" style="left:230px;top:280px;"></div>
<div class="bld" style="left:640px;top:300px;"></div>
</div>
<nav>
<p class="brand">Apple Maps (iOS)</p>
<div class="navlinks"><span>Standard</span><span>Satellite</span><span>Transit</span></div>
</nav>
<div class="controls">
<div class="cbtn"><div class="g"></div></div>
<div class="cbtn loc"><div class="g"></div></div>
<div class="cbtn compass"><div class="g"></div></div>
</div>
<div class="pin"><div class="pinhead"></div><div class="pindot"></div></div>
<div class="puck"><div class="cone"></div><div class="pring"></div><div class="pcore"></div></div>
<div class="placecard">
<div class="bar"></div>
<p class="pctitle">Tartine Bakery</p>
<p class="pcsub">Bakery · French · $$</p>
<div class="pcbtn">Directions</div>
</div>
<div class="searchcard">
<div class="grabber"></div>
<div class="searchfield"><span class="mag"></span><span>Search Maps</span></div>
<div class="pills">
<div class="pill"><div class="ic" style="background:#FF9500"></div><span>Food</span></div>
<div class="pill"><div class="ic" style="background:#A5694C"></div><span>Coffee</span></div>
<div class="pill"><div class="ic" style="background:#5AC8FA"></div><span>Drinks</span></div>
<div class="pill"><div class="ic" style="background:#FFCC00"></div><span>Shopping</span></div>
<div class="pill"><div class="ic" style="background:#AF52DE"></div><span>Parking</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #181818;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #181818;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.27; letter-spacing: -0.2px; margin: 0; color: #181818; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.38; margin: 0; color: #818181; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.3px; background: #006ce1; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.3px; background: transparent; color: #006ce1;
border: 1px solid #006ce1; border-radius: 4px;
padding: 9px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #181818;
border: 1px solid #dcdcdc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #818181; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #f5f5f5; color: #181818;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#181818; box-sizing:border-box;
font-family:'TT Norms Pro', Roboto, 'Segoe UI', Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; background:#16151b; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.brand { font-family:'FF DIN Condensed Bold', Impact, sans-serif; font-size:20px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; margin:0; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:13px; font-weight:500; color:#ffffff; }
.navright { display:flex; align-items:center; gap:14px; }
.search { background:#262626; border-radius:999px; padding:7px 16px; font-size:12px; color:#818181; }
.navicon { font-size:14px; color:#ffffff; }
.subnav { height:40px; background:#ffffff; border-bottom:1px solid #dcdcdc; display:flex; align-items:center;
gap:28px; padding:0 40px; }
.subnav span { font-size:13px; font-weight:500; color:#818181; padding:9px 0; }
.subnav span.active { color:#006ce1; border-bottom:2px solid #006ce1; }
.hero { height:140px; background:linear-gradient(135deg,#7761ff,#2659ff 45%,#37d5ff 75%,#35f5cb);
display:flex; flex-direction:column; justify-content:center; padding:0 44px; gap:5px; color:#ffffff; }
.hero h1 { font-family:'Kairos Sans Condensed Bold', 'FF DIN Condensed Bold', Impact, sans-serif;
font-size:32px; font-weight:700; letter-spacing:-0.3px; text-transform:uppercase; line-height:1.08;
margin:0; max-width:520px; }
.hero p { font-size:13px; margin:0 0 6px; opacity:0.9; max-width:440px; }
.hero button { align-self:flex-start; background:transparent; color:#ffffff; border:1px solid #ffffff;
border-radius:4px; padding:9px 20px; font-size:12px; font-weight:500; letter-spacing:0.3px; cursor:default; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:18px 40px; }
.card { background:#ffffff; border:1px solid #e1e1e1; border-radius:4px; padding:14px; display:flex;
flex-direction:column; gap:6px; }
.thumb { position:relative; width:100%; height:96px; border-radius:4px; background:#f5f5f5;
display:flex; align-items:center; justify-content:center; }
.lap { width:76%; height:52%; border-radius:3px; }
.l1 { background:linear-gradient(160deg,#2a2f3a,#006ce1 70%,#0a1a2a); }
.l2 { background:linear-gradient(160deg,#1c1c22,#7761ff 70%,#100e18); }
.l3 { background:linear-gradient(160deg,#2a2a2a,#cdab82 70%,#141414); }
.badge { position:absolute; top:8px; left:8px; font-size:11px; font-weight:500; letter-spacing:0.2px;
text-transform:uppercase; padding:3px 8px; border-radius:4px; color:#ffffff; }
.badge.new { background:#006ce1; }
.badge.warm { background:#ffb980; color:#181818; }
.badge.gold { background:#cdab82; color:#181818; }
.card .title { font-size:14px; font-weight:500; margin:2px 0 0; line-height:1.3; }
.specs { display:flex; gap:8px; }
.spec { background:#f5f5f5; border-radius:4px; padding:4px 8px; font-size:11px; color:#4d4d4d; }
.row2 { display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
.price { font-size:18px; font-weight:500; letter-spacing:-0.2px; }
footer { height:84px; background:#16151b; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.footcol span { display:block; font-size:12px; color:#818181; line-height:1.8; }
.footcol .head { font-size:11px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase;
color:#ffffff; margin-bottom:2px; }
</style></head>
<body>
<nav>
<p class="brand">Asus</p>
<div class="navlinks"><span>Laptops</span><span>Gaming</span><span>Components</span><span>Phones</span></div>
<div class="navright"><span class="search">Search products…</span><span class="navicon">👜</span></div>
</nav>
<div class="subnav">
<span class="active">Gaming</span><span>Business</span><span>Creator</span><span>Everyday</span>
</div>
<section class="hero">
<h1>Power Beyond Limits</h1>
<p>Next-gen performance for creators and competitors alike.</p>
<button>Explore Lineup</button>
</section>
<section class="cards">
<div class="card">
<div class="thumb"><div class="lap l1"></div><span class="badge new">New</span></div>
<p class="title">ROG Strix G16</p>
<div class="specs"><span class="spec">16" 240Hz</span><span class="spec">RTX-class GPU</span></div>
<div class="row2"><span class="price">$1,899</span></div>
</div>
<div class="card">
<div class="thumb"><div class="lap l2"></div><span class="badge warm">Sale</span></div>
<p class="title">Zenbook 14 OLED</p>
<div class="specs"><span class="spec">14" OLED</span><span class="spec">1.2 kg</span></div>
<div class="row2"><span class="price">$1,199</span></div>
</div>
<div class="card">
<div class="thumb"><div class="lap l3"></div><span class="badge gold">Premium</span></div>
<p class="title">ProArt Studiobook</p>
<div class="specs"><span class="spec">16" 4K</span><span class="spec">90Wh Battery</span></div>
<div class="row2"><span class="price">$2,499</span></div>
</div>
</section>
<footer>
<div class="footcol"><span class="head">Shop</span><span>Laptops · Gaming</span></div>
<div class="footcol"><span class="head">Support</span><span>Warranty · Drivers</span></div>
<div class="footcol"><span class="head">Company</span><span>About Asus</span></div>
<div class="footcol"><span class="head">Asus</span><span>© Asus</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ef0000; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #222222;
border: 1px solid #ef0000; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #002fe1; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Dunlop Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:'Arial','Helvetica',sans-serif;
background:#ffffff; color:#222222;
}
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dfdfdf;}
.logo{font-size:19px;font-weight:700;color:#ef0000;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;letter-spacing:0.8px;text-transform:uppercase;color:#757575;}
.navlinks span.active{color:#ef0000;border-bottom:2px solid #ef0000;padding-bottom:16px;}
.catstrip{display:flex;gap:20px;padding:8px 32px;border-bottom:1px solid #e5e5e5;font-size:13px;color:#757575;}
.catstrip span.active{color:#ef0000;border-bottom:2px solid #ef0000;padding-bottom:6px;}
.hero{background:#f5f5f5;padding:40px 32px;text-align:center;}
.hero h1{font-family:'Arial Narrow','Helvetica Neue',sans-serif;font-size:42px;font-weight:700;letter-spacing:-0.5px;margin:0 0 16px;}
.herobtn{background:#ef0000;color:#fff;font-size:15px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:14px 32px;border-radius:4px;display:inline-block;}
.section{padding:20px 32px 0;}
.grid{display:flex;gap:1px;background:#e5e5e5;border:1px solid #e5e5e5;}
.card{flex:1;background:#fff;}
.card-img{height:120px;background:#f5f5f5;position:relative;}
.card-img.c1{background:linear-gradient(135deg,#ef0000,#f5f5f5);}
.card-img.c2{background:linear-gradient(135deg,#002fe1,#f5f5f5);}
.card-img.c3{background:linear-gradient(135deg,#757575,#f5f5f5);}
.card-img.c4{background:linear-gradient(135deg,#f1a500,#f5f5f5);}
.badge{position:absolute;top:6px;left:6px;background:#002fe1;color:#fff;font-size:11px;font-weight:600;text-transform:uppercase;padding:2px 8px;}
.card-body{padding:12px;}
.card-title{font-weight:700;font-size:16px;margin-bottom:4px;}
.card-price{font-weight:700;font-size:18px;color:#ef0000;}
</style>
<nav class="nav">
<div class="logo">Dunlop</div>
<div class="navlinks">
<span class="active">Picks</span><span>Straps</span><span>Pedals</span><span>Accessories</span>
</div>
</nav>
<div class="catstrip">
<span class="active">MXR</span><span>Way Huge</span><span>Cry Baby</span><span>Rockman</span>
</div>
<div class="hero">
<h1>GEAR THAT WORKS.</h1>
<div class="herobtn">Shop Now</div>
</div>
<div class="section">
<div class="grid">
<div class="card"><div class="card-img c1"><span class="badge">Limited</span></div><div class="card-body"><div class="card-title">Tortex Standard Picks</div><div class="card-price">$4.99</div></div></div>
<div class="card"><div class="card-img c2"></div><div class="card-body"><div class="card-title">Cry Baby Wah Pedal</div><div class="card-price">$99.00</div></div></div>
<div class="card"><div class="card-img c3"></div><div class="card-body"><div class="card-title">Straplok Dual Design</div><div class="card-price">$24.99</div></div></div>
<div class="card"><div class="card-img c4"><span class="badge" style="background:#f1a500;color:#222;">New</span></div><div class="card-body"><div class="card-title">Phase 90 Pedal</div><div class="card-price">$89.00</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0c0c0d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0c0c0d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #0c0c0d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #5f5b57; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #b59258; color: #0c0c0d;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #0c0c0d;
border: 1px solid #b59258; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #0c0c0d;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5f5b57; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c2552a; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Flylow Gear Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Open Sans',-apple-system,system-ui,sans-serif; background:#ffffff; color:#0c0c0d; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
.nav { background:#0c0c0d; height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.logo { font-family:Georgia,serif; font-weight:700; font-size:22px; color:#fff; letter-spacing:.5px; }
.logo b { color:#b59258; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:600; color:#fff; }
.navcta { background:#b59258; color:#0c0c0d; font-weight:700; font-size:13px; padding:10px 18px; border-radius:8px; }
.hero { height:300px; position:relative; display:flex; align-items:center; padding:0 60px; background:
linear-gradient(180deg,#0c0c0d 0%,#2d3f43 55%,#597689 100%); }
.hero-copy { max-width:430px; z-index:2; }
.tag { color:#b59258; font-weight:700; font-size:12px; letter-spacing:2px; text-transform:uppercase; margin-bottom:10px; }
.hero h1 { font-family:Georgia,serif; font-size:46px; font-weight:700; color:#fff; line-height:1.08; margin:0 0 14px; letter-spacing:-.5px; }
.hero p { color:#dfe3e4; font-size:15px; line-height:1.6; margin:0 0 20px; max-width:380px; }
.btnrow { display:flex; gap:12px; }
.btn-gold { background:#b59258; color:#0c0c0d; font-weight:700; font-size:14px; padding:12px 22px; border-radius:8px; }
.btn-line { border:1.5px solid #fff; color:#fff; font-weight:700; font-size:14px; padding:11px 22px; border-radius:8px; }
.peak { position:absolute; right:0; bottom:0; width:420px; height:170px; background:linear-gradient(115deg,transparent 40%,#5e9ca7 41%,#5e9ca7 55%,transparent 56%),
linear-gradient(115deg,transparent 60%,#597689 61%,#597689 78%,transparent 79%); opacity:.55; }
.strip { background:#f1f3e3; padding:14px 30px; display:flex; gap:26px; font-size:12px; font-weight:600; color:#5f5b57; border-bottom:1px solid #dddddd; }
.strip span b { color:#b59258; }
.split { flex:1; display:flex; padding:24px 30px; gap:22px; background:#fff; }
.col-title { font-family:Georgia,serif; font-size:20px; font-weight:700; color:#0c0c0d; margin:0 0 14px; text-transform:uppercase; letter-spacing:.5px; }
.shopcard { flex:1; background:#0c0c0d; border-radius:8px; padding:22px; color:#fff; display:flex; flex-direction:column; justify-content:space-between; }
.shopcard .swatch { width:100%; height:80px; border-radius:8px; background:linear-gradient(135deg,#9d805a,#2d3f43); margin-bottom:14px; }
.grid3 { flex:2.2; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { border:1px solid #dddddd; border-radius:8px; padding:12px; background:#fff; position:relative; }
.card .badge { position:absolute; top:8px; left:8px; background:#c2552a; color:#fff; font-size:9px; font-weight:700; padding:2px 8px; border-radius:20px; }
.card .ph { height:80px; border-radius:6px; margin-bottom:8px; }
.card .name { font-weight:700; font-size:13px; margin-bottom:2px; }
.card .desc { font-size:11px; color:#5f5b57; margin-bottom:8px; }
.stars { color:#b59258; font-size:11px; margin-bottom:6px; }
.card .price { font-weight:700; font-size:14px; }
</style>
<div class="page">
<div class="nav">
<div class="logo">Flylow Gear</div>
<div class="navlinks"><span>Shop Men</span><span>Shop Women</span><span>Backcountry</span><span>Coastal</span></div>
<div class="navcta">Shop All</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="tag">Built for the 4am Traverse</div>
<h1>Gear that earns<br>the woodstove.</h1>
<p>No fashion runway logic — just weatherproof shells and bibs cut for the skin track, tested where the trailhead ends.</p>
<div class="btnrow"><div class="btn-gold">Shop Men</div><div class="btn-line">Shop Women</div></div>
</div>
<div class="peak"></div>
</div>
<div class="strip"><span><b>Free shipping</b> over $100</span><span><b>Lifetime</b> warranty on shells</span><span><b>Made</b> for the alpine start</span></div>
<div class="split">
<div class="shopcard">
<div>
<div class="col-title" style="color:#fff;">Trailhead Bib</div>
<div class="swatch"></div>
<p style="font-size:12px;color:#dedede;line-height:1.6;">3-layer waterproof shell, gusseted for the boot pack. Weathered leather trim, dry-brush gold hardware.</p>
</div>
<div style="display:flex;justify-content:space-between;align-items:center;">
<span style="font-weight:700;font-size:18px;">$399.00</span>
<div style="background:#b59258;color:#0c0c0d;font-weight:700;font-size:12px;padding:9px 16px;border-radius:8px;">Add to Cart</div>
</div>
</div>
<div class="grid3">
<div class="card"><span class="badge">New</span><div class="ph" style="background:linear-gradient(135deg,#2d3f43,#597689);"></div><div class="name">Baker Bibs</div><div class="desc">3L shell · Pine</div><div class="stars">★★★★★</div><div class="price">$329.00</div></div>
<div class="card"><div class="ph" style="background:linear-gradient(135deg,#5e9ca7,#5f5b57);"></div><div class="name">Higher Ground Jkt</div><div class="desc">Insulated · Ice Melt</div><div class="stars">★★★★☆</div><div class="price">$279.00</div></div>
<div class="card"><div class="ph" style="background:linear-gradient(135deg,#9d805a,#0c0c0d);"></div><div class="name">Firebrand Puffy</div><div class="desc">Trail Dust</div><div class="stars">★★★★★</div><div class="price">$249.00</div></div>
<div class="card"><div class="ph" style="background:linear-gradient(135deg,#597689,#2d3f43);"></div><div class="name">Compound Hoody</div><div class="desc">Softshell layer</div><div class="stars">★★★★☆</div><div class="price">$179.00</div></div>
<div class="card"><span class="badge" style="background:#9c5e2a;">Sale</span><div class="ph" style="background:linear-gradient(135deg,#b59258,#5f5b57);"></div><div class="name">Fingergun Gloves</div><div class="desc">Weatherproof</div><div class="stars">★★★★★</div><div class="price">$89.00</div></div>
<div class="card"><div class="ph" style="background:linear-gradient(135deg,#0c0c0d,#5e9ca7);"></div><div class="name">Foxtrot Pant</div><div class="desc">Uphill stretch</div><div class="stars">★★★★☆</div><div class="price">$229.00</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #328af6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #328af6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #469f68; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #328af6; color: #000000;
border: 1px solid #469f68; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #328af6; color: #f5f5f5;
border: 1px solid #519bf6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #358ddf; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a2128; box-sizing:border-box;
font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #e2e5e9; background:#ffffff; }
.brand { font-size:17px; font-weight:700; margin:0; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:24px; font-size:12px; color:#1a2128; }
.navlinks span:first-child { color:#328af6; font-weight:700; }
.nav-right { display:flex; gap:8px; align-items:center; }
.btn-neutral { background:#f1f5f9; color:#1a2128; border:none; border-radius:8px; height:32px; padding:0 14px;
font-size:13px; font-weight:700; }
.btn-primary { background:#328af6; color:#ffffff; border:none; border-radius:8px; height:32px; padding:0 14px;
font-size:13px; font-weight:700; }
.headband { flex:0 0 84px; background:#f1f5f9; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; }
.headband h1 { font-size:24px; font-weight:700; line-height:1.3; margin:0; letter-spacing:-0.3px; }
.headband p { font-size:13px; color:#4c5967; margin:4px 0 0; }
.headband .badge { background:#edf5ff; color:#328af6; border-radius:8px; padding:5px 10px; font-size:12px; font-weight:700; }
.content { flex:1 1 auto; display:flex; gap:18px; padding:18px 36px 22px; min-height:0; }
.cyclecard { width:270px; flex:0 0 270px; background:#ffffff; border-radius:12px; box-shadow:rgba(0,0,0,0.08) 0px 8px 36px 0px;
padding:20px; display:flex; flex-direction:column; gap:12px; }
.cyclecard h2 { font-size:16px; font-weight:700; margin:0; }
.ring-wrap { display:flex; align-items:center; gap:16px; }
.ring { width:88px; height:88px; border-radius:9999px; flex:0 0 88px;
background: conic-gradient(#328af6 0deg 252deg, #e2e5e9 252deg 360deg);
display:flex; align-items:center; justify-content:center; }
.ring-inner { width:64px; height:64px; border-radius:9999px; background:#ffffff; display:flex; align-items:center; justify-content:center;
font-size:18px; font-weight:700; color:#1a2128; }
.ring-meta div:first-child { font-size:12px; color:#677583; }
.ring-meta div:last-child { font-size:13px; font-weight:700; margin-top:2px; }
.mini-stats { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.mini-row { display:flex; justify-content:space-between; font-size:12px; color:#4c5967; border-top:1px solid #e2e5e9; padding-top:8px; }
.mini-row b { color:#1a2128; }
.cta-block { margin-top:auto; background:#469f68; color:#ffffff; border-radius:8px; text-align:center;
font-size:13px; font-weight:700; padding:10px; }
.listcard { flex:1 1 auto; background:#ffffff; border-radius:12px; box-shadow:rgba(0,0,0,0.08) 0px 8px 36px 0px;
padding:18px 20px; display:flex; flex-direction:column; min-width:0; }
.listcard h2 { font-size:16px; font-weight:700; margin:0 0 10px; }
.row { display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid #e2e5e9; }
.row:first-of-type { border-top:none; }
.avatar { width:34px; height:34px; border-radius:9999px; flex:0 0 34px; }
.a1 { background:#5d3dd5; } .a2 { background:#ffd750; } .a3 { background:#c7317b; }
.a4 { background:#469f68; } .a5 { background:#328af6; }
.who { flex:1; min-width:0; }
.who b { font-size:14px; display:block; }
.who span { font-size:12px; color:#677583; }
.score { font-size:13px; font-weight:700; color:#1a2128; width:46px; text-align:right; }
.status { border-radius:8px; padding:4px 10px; font-size:11px; font-weight:700; width:96px; text-align:center; }
.status.done { background:#edf5ff; color:#328af6; }
.status.progress { background:#fff8e6; color:#a67c00; }
.status.notstarted { background:#f1f5f9; color:#677583; }
</style></head>
<body>
<nav>
<p class="brand">Lemonbase</p>
<div class="navlinks"><span>Performance</span><span>Engagement</span><span>Pricing</span><span>Leadership</span></div>
<div class="nav-right">
<button class="btn-neutral">Log in</button>
<button class="btn-primary">Contact Sales</button>
</div>
</nav>
<section class="headband">
<div>
<h1>Change for high performance.</h1>
<p>Every tool your team needs for evaluation, goals, and feedback — in one place.</p>
</div>
<span class="badge">Q3 REVIEW CYCLE</span>
</section>
<section class="content">
<div class="cyclecard">
<h2>Review Cycle Progress</h2>
<div class="ring-wrap">
<div class="ring"><div class="ring-inner">70%</div></div>
<div class="ring-meta"><div>Completed</div><div>84 / 120 reviews</div></div>
</div>
<div class="mini-stats">
<div class="mini-row"><span>Self-review submitted</span><b>96</b></div>
<div class="mini-row"><span>Manager review submitted</span><b>84</b></div>
<div class="mini-row"><span>Calibration pending</span><b>12</b></div>
</div>
<div class="cta-block">Talk to an Expert</div>
</div>
<div class="listcard">
<h2>Team Evaluations</h2>
<div class="row"><div class="avatar a1"></div><div class="who"><b>Jihoon Kang</b><span>Product Team · L4</span></div><div class="score">4.6 / 5</div><div class="status done">Completed</div></div>
<div class="row"><div class="avatar a2"></div><div class="who"><b>Soyeon Baek</b><span>Design Team · L3</span></div><div class="score">4.2 / 5</div><div class="status done">Completed</div></div>
<div class="row"><div class="avatar a3"></div><div class="who"><b>Minji Cho</b><span>People Team · L5</span></div><div class="score">—</div><div class="status progress">In Progress</div></div>
<div class="row"><div class="avatar a4"></div><div class="who"><b>Doyeon Lim</b><span>Engineering · L4</span></div><div class="score">4.8 / 5</div><div class="status done">Completed</div></div>
<div class="row"><div class="avatar a5"></div><div class="who"><b>Junho Park</b><span>Sales Team · L2</span></div><div class="score">—</div><div class="status notstarted">Not Started</div></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #323232;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #323232;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.27; margin: 0; color: #323232; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #f1ad09; color: #323232;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: transparent; color: #323232;
border: 1px solid #f1ad09; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #323232;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.27; letter-spacing: 1.2px; background: #f5f4f2; color: #323232;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#323232; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #eeeeee;}
.logo{font-weight:300;font-size:20px;letter-spacing:2px;text-transform:uppercase;}
.navlinks{display:flex;gap:28px;font-size:13px;letter-spacing:.3px;color:#323232;}
.hero{background:#323232;color:#fff;min-height:270px;display:flex;align-items:center;padding:0 32px;position:relative;}
.hero .text{max-width:420px;}
.hero h1{font-size:44px;font-weight:300;line-height:1.1;letter-spacing:-.5px;margin:0 0 12px;}
.hero p{font-size:14px;color:#ccc;margin:0 0 18px;}
.cta{display:inline-block;background:#f1ad09;color:#323232;font-size:13px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;padding:13px 26px;border-radius:4px;}
.deco{position:absolute;right:32px;top:24px;bottom:24px;width:340px;border-radius:4px;background:radial-gradient(circle at 30% 30%,#5a5a5a,#1a1a1a);}
.section{padding:26px 32px 0;}
.section h2{font-size:13px;text-transform:uppercase;letter-spacing:1.2px;font-weight:600;color:#7a7a7a;margin:0 0 14px;}
.grid{display:flex;gap:20px;}
.card{flex:1;}
.card .img{aspect-ratio:4/3;border-radius:4px;height:120px;margin-bottom:10px;}
.i1{background:linear-gradient(135deg,#e8dcc8,#c9b896);}
.i2{background:linear-gradient(135deg,#3a3a3a,#5c5c5c);}
.i3{background:linear-gradient(135deg,#d8c9a3,#f1ad09);}
.card h3{font-size:15px;font-weight:500;margin:0 0 4px;}
.card .sub{font-size:12px;color:#7a7a7a;margin:0;}
.badge{display:inline-block;background:#f5f4f2;font-size:11px;text-transform:uppercase;letter-spacing:1.2px;font-weight:600;padding:5px 10px;border-radius:4px;margin-top:34px;}
</style>
<div class="nav">
<div class="logo">Dedon</div>
<div class="navlinks"><span>Seating</span><span>Tables</span><span>Designers</span><span>Contract</span></div>
</div>
<div class="hero">
<div class="text">
<h1>Outdoor living, engineered.</h1>
<p>Hularo fiber and precision craft — furniture built for open air and permanence.</p>
<a class="cta">Explore Collection</a>
</div>
<div class="deco"></div>
</div>
<div class="section">
<h2>Featured Collections</h2>
<div class="grid">
<div class="card"><div class="img i1"></div><h3>MBRACE Lounge</h3><p class="sub">Woven hularo, teak base</p></div>
<div class="card"><div class="img i2"></div><h3>SEASHELL Chair</h3><p class="sub">Sculptural, single-form</p></div>
<div class="card"><div class="img i3"></div><h3>DALA Table</h3><p class="sub">Aluminum, all-weather</p><span class="badge">Designer Edition</span></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e1e1e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #1e1e1e;
border: 1px solid #1e1e1e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdbdb; color: #1e1e1e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1F1F1F; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.grad { background:linear-gradient(90deg,#4285F4,#9B72CB,#D96570); }
.gradtext { background:linear-gradient(90deg,#4285F4,#9B72CB,#D96570); -webkit-background-clip:text;
background-clip:text; color:transparent; }
.phone { width:360px; height:640px; background:#fff; padding:26px 18px; position:relative; border-right:1px solid #E3E3E3; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.modelsel { font-size:15px; font-weight:500; }
.sparkle { font-size:16px; }
.userchip { align-self:flex-end; background:#F0F4F9; border-radius:20px 20px 4px 20px; padding:10px 14px;
font-size:14px; max-width:78%; margin-left:auto; margin-bottom:16px; }
.row { display:flex; }
.assistant { display:flex; gap:8px; margin-bottom:16px; }
.assistant .body { font-size:14px; line-height:1.55; }
.shimmer { background:linear-gradient(90deg,transparent,rgba(66,133,244,0.15),transparent); }
.chiprow { display:flex; gap:8px; overflow:hidden; margin-bottom:16px; }
.chiprow span { background:#F0F4F9; border:1px solid #E3E3E3; border-radius:18px; padding:8px 12px; font-size:12px; font-weight:500; white-space:nowrap; }
.chiprow span.g { border:1px solid transparent; background:linear-gradient(#F0F4F9,#F0F4F9) padding-box,
linear-gradient(90deg,#4285F4,#9B72CB,#D96570) border-box; }
.promptbar { position:absolute; left:18px; right:18px; bottom:20px; height:52px; border-radius:26px; background:#F0F4F9;
display:flex; align-items:center; padding:0 14px; gap:10px;
border:1.5px solid transparent; background-image:linear-gradient(#F0F4F9,#F0F4F9),
linear-gradient(90deg,#4285F4,#9B72CB,#D96570); background-origin:border-box; background-clip:padding-box, border-box; }
.promptbar .ph { font-size:14px; color:#5F6368; flex:1; }
.sendbtn { width:32px; height:32px; border-radius:50%; background:#4285F4; color:#fff; display:flex;
align-items:center; justify-content:center; font-size:14px; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:500; letter-spacing:-0.2px; margin:0; }
.tag { font-size:14px; color:#5F6368; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:10px; border:1px solid #E3E3E3; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#5F6368; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:400; }
.typeblock .t2 { font-size:13px; color:#5F6368; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:500; padding:6px 12px; border-radius:999px;
background:#F0F4F9; border:1px solid #E3E3E3; color:#5F6368; }
.footer { margin-top:auto; border-top:1px solid #E3E3E3; padding-top:16px; font-size:11px; color:#9AA0A6; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="topbar"><span>☰</span><span class="modelsel">Gemini ⌄</span><span>👤</span></div>
<div class="row"><div class="userchip">Summarize this week's product roadmap in three bullets.</div></div>
<div class="assistant">
<span class="sparkle gradtext">✦</span>
<div class="body">Here's the roadmap in three parts: onboarding redesign ships this sprint, the search rewrite lands next week, and the billing migration is scheduled for the following cycle.<span class="shimmer">▍</span></div>
</div>
<div class="chiprow">
<span class="g">✦ Brainstorm ideas</span><span>Summarize a document</span><span>Help me write</span>
</div>
<div class="promptbar"><span class="ph">Ask Gemini</span><div class="sendbtn">↑</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">Google Gemini (iOS)<span class="gradtext">.</span></h1>
<p class="tag">A conversation treated as a document — plain text answers, a rationed gradient sparkle, and a listening ring on the composer.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#4285F4"></div><small>#4285F4</small></div>
<div class="sw"><div class="chip2" style="background:#9B72CB"></div><small>#9B72CB</small></div>
<div class="sw"><div class="chip2" style="background:#D96570"></div><small>#D96570</small></div>
<div class="sw"><div class="chip2" style="background:#F0F4F9"></div><small>#F0F4F9</small></div>
<div class="sw"><div class="chip2" style="background:#1F1F1F"></div><small>#1F1F1F</small></div>
</div>
<div class="typeblock">
<div class="t1">Ask Gemini</div>
<div class="t2">Google Sans / Inter · 16pt / 1.55 · answers read like prose, not chat snippets</div>
</div>
<div class="taglist">
<span>Gradient sparkle ✦</span><span>Streaming shimmer</span><span>Gradient focus ring</span>
<span>Side drawer nav</span><span>No bottom tabs</span>
</div>
<div class="footer">Document-not-feed canvas · gradient rationed to brand moments only</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0f0f0; color: #13101a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0f0f0; color: #13101a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #13101a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #351352; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f0f0f0; color: #351352;
border: 1px solid #351352; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #f0f0f0; color: #13101a;
border: 1px solid #b9b8ba; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #02e49b; color: #13101a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Georgia,'Times New Roman',serif; background:#f0f0f0; color:#13101a; }
*{box-sizing:border-box;}
.nav{height:64px;background:#351352;display:flex;align-items:center;justify-content:space-between;padding:0 40px;color:#fff;font-family:'Helvetica Neue',Arial,sans-serif;}
.logo{font-family:Georgia,serif;font-size:20px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:15px;}
.navlinks div:first-child{border-bottom:2px solid #02e49b;padding-bottom:4px;}
.hero{height:240px;background:#351352;display:flex;align-items:center;padding:0 44px 20px;color:#fff;}
.left{width:56%;}
.left h1{font-size:38px;font-weight:700;line-height:1.15;margin:0 0 14px;}
.left p{font-family:'Helvetica Neue',Arial,sans-serif;font-size:14px;color:#d8c8e8;max-width:340px;margin:0 0 18px;}
.btn{display:inline-block;background:#ff9900;color:#13101a;font-family:'Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:16px;padding:14px 28px;border-radius:8px;}
.right{width:40%;height:150px;border-radius:8px;background:linear-gradient(135deg,#02e49b,#351352 70%);}
.section{padding:22px 40px 0;}
.sectitle{font-size:22px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:12px;padding:14px;box-shadow:0 2px 8px rgba(0,0,0,.08);position:relative;}
.thumb{height:100px;background:#e0d8e8;border-radius:8px;margin-bottom:8px;}
.badge{position:absolute;top:8px;right:8px;background:#02e49b;color:#13101a;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.author{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;color:#949494;margin-bottom:4px;}
.ptitle{font-family:'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:600;}
.pprice{font-family:'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:700;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Xigxag</div>
<div class="navlinks"><div>Discover</div><div>Bestsellers</div><div>Categories</div></div>
</div>
<div class="hero">
<div class="left">
<h1>A midnight library in your pocket.</h1>
<p>Discover audiobooks that turn every commute into a story worth telling.</p>
<div class="btn">Start Listening</div>
</div>
<div class="right"></div>
</div>
<div class="section">
<div class="sectitle">Trending Now</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb"></div><div class="author">Elena Marsh</div><div class="ptitle">The Last Harbor</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb"></div><div class="author">David Ko</div><div class="ptitle">Midnight Reader</div><div class="pprice">$12.99</div></div>
<div class="card"><div class="thumb"></div><div class="author">Priya Nair</div><div class="ptitle">Echoes of Tomorrow</div><div class="pprice">$16.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #131416;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #131416;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #131416; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f9fafb; color: #108474;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1e2023;
border: 1px solid #c0c0c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#f9fafb;color:#1e2023;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#ffffff;border-bottom:1px solid #dadada;}
.logo{font-weight:700;font-size:20px;color:#108474;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;color:#131416;}
.cta-nav{background:#108474;color:#fff;padding:9px 18px;border-radius:8px;font-size:12px;font-weight:700;}
.hero{display:flex;padding:26px 30px;gap:30px;align-items:center;}
.hero-txt{width:380px;}
.hero-txt .eyebrow{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#fbcd0a;font-weight:700;margin-bottom:8px;}
.hero-txt h1{font-size:30px;font-weight:700;color:#131416;margin:0 0 10px;line-height:1.2;}
.hero-txt p{font-size:13px;color:#1e2023;margin:0 0 16px;}
.cta{background:#108474;color:#fff;padding:12px 26px;border-radius:8px;font-weight:700;font-size:13px;display:inline-block;}
.cta:hover{background:#088f87;}
.facewash{flex:1;height:200px;background:#f9f9f9;border-radius:12px;position:relative;}
.facewash .tube{position:absolute;bottom:24px;left:100px;width:50px;height:130px;background:#ffffff;border:2px solid #108474;border-radius:14px;}
.facewash .tube::after{content:'';position:absolute;top:-10px;left:14px;width:22px;height:14px;background:#108474;border-radius:4px;}
.badge-quiz{position:absolute;top:16px;right:20px;background:#fbcd0a;color:#131416;font-size:10px;font-weight:800;padding:6px 12px;border-radius:6px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:14px 30px;}
.card{background:#ffffff;border-radius:8px;padding:10px;}
.box{height:86px;border-radius:6px;margin-bottom:8px;}
.b1{background:linear-gradient(160deg,#108474,#088f87);}
.b2{background:linear-gradient(160deg,#fbcd0a,#e0b800);}
.b3{background:linear-gradient(160deg,#131416,#3a3a3a);}
.b4{background:linear-gradient(160deg,#dadada,#c3c3c3);}
.name{font-size:12px;font-weight:600;color:#131416;margin:0 0 3px;}
.spec{font-size:10px;color:#7b7b7b;margin:0 0 5px;}
.price{font-size:13px;font-weight:700;color:#108474;}
.star{color:#fbcd0a;font-size:10px;}
</style>
<div class="nav">
<div class="logo">Geologie</div>
<div class="navlinks"><span>Skincare</span><span>Bundles</span><span>Ingredients</span></div>
<div class="cta-nav">Take the Skin Quiz</div>
</div>
<div class="hero">
<div class="hero-txt">
<div class="eyebrow">Personalized for Your Skin</div>
<h1>Precision skincare for men, custom-built</h1>
<p>Take a two-minute quiz and get a dermatologist-designed regimen shipped to your door every month.</p>
<a class="cta">Take the Quiz</a>
</div>
<div class="facewash"><div class="badge-quiz">Free Quiz</div><div class="tube"></div></div>
</div>
<div class="grid">
<div class="card"><div class="box b1"></div><div class="name">Custom Face Wash</div><div class="spec">Personalized Formula</div><div class="star">★★★★★</div><div class="price">$24.00</div></div>
<div class="card"><div class="box b2"></div><div class="name">Anti-Aging Serum</div><div class="spec">Bundle & Save 15%</div><div class="price">$32.00</div></div>
<div class="card"><div class="box b3"></div><div class="name">Daily Moisturizer SPF 30</div><div class="spec">Non-Greasy Formula</div><div class="star">★★★★☆</div><div class="price">$28.00</div></div>
<div class="card"><div class="box b4"></div><div class="name">Complete Starter Kit</div><div class="spec">3-Step Routine</div><div class="price">$59.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7b84; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #223843; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #223843;
border: 1px solid #223843; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7b84; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #e6f4fb; color: #1990c6;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Barlow','Helvetica Neue',Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e8e8e8;}
.logo{font-size:20px;font-weight:600;color:#223843;letter-spacing:-0.2px;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;color:#6b7b84;}
.navlinks span:first-child{color:#223843;}
.iconbtn{width:40px;height:40px;border-radius:9999px;background:#f5f6f7;display:flex;align-items:center;justify-content:center;font-size:14px;color:#223843;}
.hero{height:250px;display:flex;background:#223843;padding:0 40px;align-items:center;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:-40px;top:-40px;width:260px;height:260px;border-radius:9999px;background:rgba(25,144,198,0.18);}
.hero:after{content:'';position:absolute;right:60px;bottom:-30px;width:200px;height:120px;border-radius:12px;background:linear-gradient(135deg,#1990c6,#136f99);}
.herotext{position:relative;z-index:2;max-width:440px;}
.h1{font-size:38px;font-weight:600;line-height:1.15;letter-spacing:-0.4px;color:#fff;margin:0 0 12px;}
.sub{font-size:15px;line-height:1.5;color:#c6d3d8;margin:0 0 18px;max-width:360px;}
.cta{display:inline-block;background:#fff;color:#223843;font-size:15px;font-weight:600;letter-spacing:0.2px;padding:14px 30px;border-radius:8px;}
.sec{padding:20px 40px 0;}
.sectitle{font-size:20px;font-weight:600;color:#121212;margin:0 0 14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 2px rgba(18,18,18,0.06);}
.thumb{height:100px;position:relative;}
.newbadge{position:absolute;top:8px;left:8px;background:#e6f4fb;color:#1990c6;font-size:10px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.cbody{padding:12px 14px 14px;}
.ctitle{font-size:15px;font-weight:600;margin:0 0 4px;color:#121212;}
.cprice{font-size:15px;font-weight:600;color:#223843;margin:0;}
.footer{position:absolute;bottom:0;left:0;right:0;height:46px;background:#223843;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;color:rgba(255,255,255,0.8);}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Outer</div>
<div class="navlinks"><span>Sofas</span><span>Sectionals</span><span>Dining</span><span>Fire Pits</span></div>
<div class="iconbtn">⛁</div>
</div>
<div class="hero">
<div class="herotext">
<div class="h1">The backyard, made livable.</div>
<div class="sub">Weatherproof furniture systems designed like the rest of your home — not less.</div>
<div class="cta">Shop the Collection</div>
</div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#223843,#1990c6)"><div class="newbadge">New</div></div><div class="cbody"><div class="ctitle">Cloud Modular Sofa</div><div class="cprice">$2,395</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#136f99,#223843)"></div><div class="cbody"><div class="ctitle">Teak Dining Table</div><div class="cprice">$1,895</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1990c6,#dedede)"></div><div class="cbody"><div class="ctitle">Wraparound Sectional</div><div class="cprice">$3,995</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#dedede,#223843)"></div><div class="cbody"><div class="ctitle">Firepit Table, Round</div><div class="cprice">$1,295</div></div></div>
</div>
</div>
<div class="footer"><span>Free shipping · White-glove delivery</span><span>5-Year Frame Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #c8102e; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #ffffff; color: #313131;
border: 1px solid #c8102e; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.5; background: #005b9a; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:Arial, 'Helvetica Neue', Roboto, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.mono { font-family:'Courier New', Courier, monospace; }
.announce { flex:0 0 auto; height:30px; background:#c8102e; color:#fff; font-size:12px; display:flex;
align-items:center; justify-content:center; }
nav { flex:0 0 auto; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 26px; border-bottom:1px solid #d1d1d1; }
.brand { font-size:16px; font-weight:700; margin:0; }
.searchbar { flex:1; max-width:340px; height:34px; border:2px solid #c8102e; margin:0 24px; display:flex; }
.searchbar .sbtn { background:#c8102e; width:44px; }
.icons { display:flex; gap:14px; }
.icons span { width:16px; height:16px; border-radius:2px; border:1px solid #313131; display:inline-block; }
main { flex:1 1 auto; display:flex; padding:16px 26px; gap:16px; min-height:0; }
.rail { flex:0 0 150px; font-size:12px; }
.rail h4 { font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; margin:0 0 8px; }
.rail .opt { padding:5px 0; border-bottom:1px solid #ebebeb; color:#4a4a4a; }
.content { flex:1; display:flex; flex-direction:column; min-height:0; }
.breadcrumb { font-size:12px; color:#005b9a; margin-bottom:8px; }
.pdp { flex:0 0 auto; display:flex; gap:18px; margin-bottom:12px; }
.pdp-img { flex:0 0 180px; height:150px; background:#f5f5f5; border:1px solid #d1d1d1; border-radius:4px; position:relative; }
.pdp-img::after { content:''; position:absolute; inset:24px; border-radius:50%;
background:radial-gradient(circle, #d1d1d1 0 40%, transparent 42%),
conic-gradient(#b0b0b0 0 10deg, transparent 10deg 30deg, #b0b0b0 30deg 40deg, transparent 40deg 60deg,
#b0b0b0 60deg 70deg, transparent 70deg 90deg, #b0b0b0 90deg 100deg, transparent 100deg 120deg,
#b0b0b0 120deg 130deg, transparent 130deg 150deg, #b0b0b0 150deg 160deg, transparent 160deg 180deg,
#b0b0b0 180deg 190deg, transparent 190deg 210deg, #b0b0b0 210deg 220deg, transparent 220deg 240deg,
#b0b0b0 240deg 250deg, transparent 250deg 270deg, #b0b0b0 270deg 280deg, transparent 280deg 300deg,
#b0b0b0 300deg 310deg, transparent 310deg 330deg, #b0b0b0 330deg 340deg, transparent 340deg 360deg);
}
.pdp-info { flex:1; }
.pdp-info .part { font-size:12px; color:#767676; margin:0 0 4px; }
.pdp-info h1 { font-size:18px; margin:0 0 6px; }
.pdp-info .price { font-size:20px; font-weight:700; color:#313131; margin:0 0 10px; }
.btnrow { display:flex; gap:8px; }
.btn-primary { background:#c8102e; color:#fff; border:none; padding:9px 20px; font-size:13px; font-weight:700;
letter-spacing:0.4px; text-transform:uppercase; }
.btn-quote { background:#fff; color:#c8102e; border:2px solid #c8102e; padding:8px 20px; font-size:13px; font-weight:700;
letter-spacing:0.4px; text-transform:uppercase; }
.spectable { flex:1; border:1px solid #d1d1d1; min-height:0; overflow:hidden; }
.srow { display:flex; font-size:12px; border-bottom:1px solid #ebebeb; }
.srow.even { background:#f5f5f5; }
.srow span:first-child { flex:0 0 140px; font-weight:700; text-transform:uppercase; font-size:11px; color:#767676; padding:6px 12px; }
.srow span:last-child { padding:6px 12px; }
footer { flex:0 0 auto; height:52px; background:#1a1a1a; color:#cccccc; display:flex; align-items:center;
justify-content:space-between; padding:0 26px; font-size:12px; }
</style></head>
<body>
<div class="announce">Free freight on orders over $99 · Will-call available at 500+ branches</div>
<nav>
<p class="brand">Applied Industrial Technologies</p>
<div class="searchbar"><div class="sbtn"></div></div>
<div class="icons"><span></span><span></span></div>
</nav>
<main>
<div class="rail">
<h4>Filter By</h4>
<div class="opt">☐ Bearings</div>
<div class="opt">☐ Seals</div>
<div class="opt">☐ Bore Size</div>
<div class="opt">☐ In Stock Only</div>
</div>
<div class="content">
<div class="breadcrumb">Home / Power Transmission / Bearings</div>
<div class="pdp">
<div class="pdp-img"></div>
<div class="pdp-info">
<p class="part mono">PN 6205-2RS-C3</p>
<h1>Sealed Ball Bearing, 25mm Bore</h1>
<div class="price">$14.82 / ea</div>
<div class="btnrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-quote">Request Quote</button>
</div>
</div>
</div>
<div class="spectable">
<div class="srow"><span>Bore Diameter</span><span>25 mm</span></div>
<div class="srow even"><span>Outer Diameter</span><span>52 mm</span></div>
<div class="srow"><span>Load Rating (Dyn.)</span><span>14,000 N</span></div>
<div class="srow even"><span>Seal Type</span><span>Double Rubber (2RS)</span></div>
</div>
</div>
</main>
<footer>
<span>© Applied Industrial Technologies</span>
<span>Branch Locator · Support · Terms</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 700; line-height: 1.35; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #002b2f; color: #f3f8f3;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #002b2f;
border: 1px solid #002b2f; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dbe1e2; color: #002b2f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f3f8f3; font-family:'Poppins',Arial,sans-serif; color:#0d2b28;
}
*{box-sizing:border-box;}
.serif{font-family:'Merriweather',Georgia,serif;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#002b2f;}
.logo{font-size:18px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;color:#bcd8c2;text-transform:uppercase;letter-spacing:.3px;}
.cta{background:#83b785;color:#00221f;padding:10px 18px;font-size:12px;font-weight:600;border-radius:4px;}
.hero{display:flex;padding:26px 32px 16px;gap:24px;align-items:center;}
.hero-copy{width:390px;}
.hero-overline{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#466c50;margin-bottom:10px;}
.hero-title{font-size:32px;font-weight:700;line-height:1.2;margin-bottom:12px;color:#002b2f;}
.hero-sub{font-size:13.5px;line-height:1.55;color:#334;margin-bottom:16px;}
.btn-main{display:inline-block;background:#002b2f;color:#fff;padding:12px 22px;font-size:12.5px;font-weight:600;border-radius:4px;}
.hero-visual{flex:1;height:210px;border-radius:4px;background:linear-gradient(150deg,#83b785,#002b2f);position:relative;}
.box{position:absolute;width:110px;height:80px;border:3px solid #f3f8f3;top:60px;left:50%;transform:translateX(-50%);}
.box:before{content:'';position:absolute;top:-3px;left:0;right:0;height:2px;background:#f3f8f3;}
.promo{position:absolute;top:14px;right:14px;background:#f19066;color:#fff;font-size:10px;font-weight:700;padding:5px 10px;border-radius:4px;}
.section{padding:6px 32px 0;}
.section-title{font-size:16px;font-weight:700;margin-bottom:14px;color:#002b2f;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#fff;border-radius:4px;padding:12px;border:1px solid #e0ebe0;}
.card-img{height:88px;border-radius:4px;margin-bottom:10px;background:linear-gradient(150deg,#cfe3cf,#83b785);}
.card-name{font-size:12.5px;font-weight:600;margin-bottom:4px;}
.overline-sm{font-size:9px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#466c50;margin-bottom:6px;}
.card-price{font-size:12.5px;font-weight:600;color:#002b2f;}
</style>
<div class="nav">
<div class="logo serif">Ecoenclose</div>
<div class="navlinks"><span>Mailers</span><span>Boxes</span><span>Void Fill</span><span>Compliance</span></div>
<div class="cta">Request A Quote</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="hero-overline">100% Recycled · Curbside Recyclable</div>
<div class="hero-title serif">Sustainable packaging, engineered to spec.</div>
<div class="hero-sub">Custom mailers, corrugated boxes, and void fill built to your dimensions — with the compliance paperwork already done.</div>
<div class="btn-main">Get A Custom Quote</div>
</div>
<div class="hero-visual">
<div class="promo">Bulk Pricing</div>
<div class="box"></div>
</div>
</div>
<div class="section">
<div class="section-title serif">Popular Packaging</div>
<div class="grid">
<div class="card"><div class="card-img"></div><div class="overline-sm">Mailer</div><div class="card-name">Recycled Poly Mailer, 10x13</div><div class="card-price">$0.24 / unit</div></div>
<div class="card"><div class="card-img"></div><div class="overline-sm">Box</div><div class="card-name">Corrugated Shipping Box</div><div class="card-price">$0.68 / unit</div></div>
<div class="card"><div class="card-img"></div><div class="overline-sm">Void Fill</div><div class="card-name">Recycled Kraft Paper Roll</div><div class="card-price">$18.00</div></div>
<div class="card"><div class="card-img"></div><div class="overline-sm">Custom</div><div class="card-name">Branded Tissue Paper</div><div class="card-price">$0.12 / unit</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0d0d0d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0d0d0d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #0d0d0d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #c24d74; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #0d0d0d;
border: 1px solid #c24d74; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #0d0d0d;
border: 1px solid #c2c2c2; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #d93f4c; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0d0d0d; box-sizing:border-box;
font-family:'Epilogue','Instrument Sans',sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-family:'Scotch Display',serif; font-size:19px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.2px; }
.navlinks span.active { color:#c24d74; }
.navlinks span:not(.active) { color:#aaaaaa; }
main { display:flex; height:calc(640px - 72px); }
.gallery { width:42%; background:#f5f5f5; display:flex; align-items:center; justify-content:center; }
.tote { width:170px; height:170px; border-radius:20px; background:linear-gradient(160deg,#c24d74,#d93f4c 70%); position:relative;
box-shadow:0 16px 30px rgba(194,77,116,0.2); }
.tote::before { content:''; position:absolute; left:35px; top:-20px; width:100px; height:40px; border:8px solid #c24d74; border-bottom:none; border-radius:40px 40px 0 0; }
.details { width:58%; padding:28px 36px; }
.badge { display:inline-block; background:#9c305d; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase;
letter-spacing:0.5px; border-radius:8px; padding:4px 8px; margin-bottom:12px; }
h1 { font-family:'Scotch Display',serif; font-size:32px; font-weight:600; letter-spacing:-0.3px; margin:0 0 8px; }
.price { font-size:18px; margin:0 0 4px; }
.price .sale { color:#d93f4c; font-weight:600; }
.desc { font-size:16px; line-height:1.5; color:#333333; margin:14px 0 18px; max-width:400px; }
.swrow { display:flex; gap:10px; margin-bottom:20px; }
.sw { width:24px; height:24px; border-radius:9999px; }
.sw.sel { box-shadow:0 0 0 2px #c24d74; }
.buyrow { display:flex; gap:12px; }
.btn-primary { background:#c24d74; color:#fff; border:none; border-radius:9999px; padding:14px 28px; font-size:15px; font-weight:600; height:48px; }
.btn-secondary { background:#fff; color:#0d0d0d; border:1px solid #d7d7d7; border-radius:9999px; padding:13px 27px; font-size:15px; font-weight:600; height:48px; }
</style></head>
<body>
<nav>
<p class="brand">Case Mate</p>
<div class="navlinks"><span>Cases</span><span class="active">Bags</span><span>Accessories</span><span>Sale</span></div>
</nav>
<main>
<div class="gallery"><div class="tote"></div></div>
<div class="details">
<span class="badge">Limited Edition</span>
<h1>Jelly Tote Bag</h1>
<p class="price"><span class="sale">$68.00</span></p>
<p class="desc">A translucent, candy-colored tote with a glossy finish — playful luxury for everyday carry.</p>
<div class="swrow">
<div class="sw sel" style="background:#c24d74"></div>
<div class="sw" style="background:#d93f4c"></div>
<div class="sw" style="background:#9c305d"></div>
</div>
<div class="buyrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Continue Shopping</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #404040; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #121212;
border: 1px solid #404040; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #404040; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#ffffff; color:#121212; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
*{box-sizing:border-box;}
.announce{height:36px;background:#121212;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;}
.nav{height:56px;background:#fff;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 26px;}
.nav .logo{font-weight:700;font-size:15px;}
.nav .links{display:flex;gap:18px;font-size:14px;font-weight:500;}
.wrap{display:flex;height:548px;}
.left{width:360px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;padding:24px;border:1px solid #dedede;position:relative;}
.phone{width:110px;height:220px;background:linear-gradient(160deg,#404040,#222222);border-radius:16px;position:relative;box-shadow:0 12px 24px rgba(0,0,0,.15);}
.phone::before{content:'';position:absolute;top:14px;left:14px;right:14px;bottom:14px;border:1px solid rgba(255,255,255,.15);border-radius:8px;}
.badge-sale{position:absolute;top:24px;left:24px;background:#404040;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.right{flex:1;padding:24px 32px;display:flex;flex-direction:column;}
h1{font-size:22px;font-weight:600;margin:0 0 8px;letter-spacing:-.2px;}
.price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;}
.price{font-size:22px;font-weight:700;letter-spacing:-.2px;}
.strike{color:#a8a8a8;text-decoration:line-through;font-size:16px;}
.stars{color:#404040;font-size:14px;margin-bottom:16px;}
.pills{display:flex;gap:8px;margin-bottom:18px;}
.pill{background:#fff;border:1px solid #dedede;border-radius:9999px;padding:8px 16px;font-size:14px;font-weight:600;height:36px;display:flex;align-items:center;}
.pill.active{background:#121212;color:#fff;border-color:#121212;}
.desc{font-size:14px;color:#222;line-height:1.5;margin:0 0 18px;}
.stepper{display:flex;align-items:center;background:#f5f5f5;border:1px solid #dedede;border-radius:8px;width:120px;height:40px;justify-content:space-between;padding:0 12px;font-size:14px;font-weight:600;margin-bottom:20px;}
.actions{display:flex;gap:10px;margin-top:auto;}
.btn-primary{background:#404040;color:#fff;font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;border-radius:8px;padding:14px 24px;height:48px;display:flex;align-items:center;}
.btn-secondary{background:#fff;color:#121212;font-size:15px;font-weight:600;text-transform:uppercase;border:1.5px solid #121212;border-radius:8px;padding:13px 23px;height:48px;display:flex;align-items:center;}
</style>
</head>
<body>
<div class="announce">Free shipping on orders over $35</div>
<div class="nav"><div class="logo">Crave Direct</div><div class="links"><span>Cases</span><span>Chargers</span><span>Cables</span><span>Screen Protectors</span></div></div>
<div class="wrap">
<div class="left"><div class="badge-sale">Sale</div><div class="phone"></div></div>
<div class="right">
<h1>Slim Fit Case — iPhone 15 Pro</h1>
<div class="price-row"><span class="price">$14.99</span><span class="strike">$24.99</span></div>
<div class="stars">★★★★★ 4.7 (3,102)</div>
<div class="pills"><span class="pill active">Black</span><span class="pill">Clear</span><span class="pill">Navy</span></div>
<p class="desc">Military-grade drop protection in a case thin enough to forget it's there. Precision cutouts for every port, button, and camera lens.</p>
<div class="stepper"><span>−</span><span>1</span><span>+</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Add to Wishlist</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #1b4515;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #1b4515;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #1b4515; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #f9fafb; color: #1b4515;
border: 1px solid #108474; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9fafb; color: #555555;
border: 1px solid #c2cdc2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #d02e2e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family: 'Nunito Sans', Arial, sans-serif; background:#f9fafb; color:#555; }
*{box-sizing:border-box;}
.nav{height:60px;background:#1b4515;display:flex;align-items:center;justify-content:space-between;padding:0 26px;}
.logo{color:#fff;font-size:19px;font-weight:600;}
.navlinks{display:flex;gap:6px;}
.navlinks div{color:#fff;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.3px;padding:8px 10px;}
.searchpill{width:190px;height:34px;background:rgba(255,255,255,.15);border-radius:9999px;display:flex;align-items:center;padding:0 14px;color:#fff;font-size:12px;}
.hero{display:flex;height:230px;background:#108474;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:-30px;top:-30px;width:180px;height:180px;border-radius:50%;background:#a89cc8;opacity:.3;}
.hero:after{content:'';position:absolute;right:150px;bottom:-50px;width:120px;height:120px;border-radius:50%;background:#eb593c;opacity:.25;}
.herotext{padding:0 34px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1;}
.herotext h1{color:#fff;font-size:30px;font-weight:600;margin:0 0 8px;}
.herotext p{color:#dff5f1;font-size:14px;margin:0 0 14px;max-width:400px;}
.herocta{display:inline-block;background:#fff;color:#108474;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;padding:12px 24px;border-radius:8px;width:fit-content;}
.strip{display:flex;gap:12px;padding:16px 26px 8px;}
.tile{flex:1;background:#fff;border-radius:12px;padding:12px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.tileimg{height:56px;border-radius:8px;margin-bottom:8px;}
.tilelabel{font-size:14px;font-weight:600;color:#1b4515;}
.grid{display:flex;gap:12px;padding:8px 26px 0;}
.card{width:150px;background:#fff;border-radius:12px;padding:8px;}
.thumb{height:100px;border-radius:8px;margin-bottom:6px;position:relative;overflow:hidden;}
.badge{position:absolute;top:5px;left:5px;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;border-radius:4px;color:#fff;}
.badge.new{background:#56ad6a;}
.badge.sale{background:#d02e2e;}
.ptitle{font-size:14px;font-weight:600;color:#1b4515;height:32px;overflow:hidden;line-height:1.29;}
.pprice{font-size:15px;font-weight:600;color:#108474;margin-top:4px;}
.stars{color:#fbcd0a;font-size:12px;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#a89cc8;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:13px;color:#fff;}
.footer span{margin-left:14px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Jade Yoga</div>
<div class="navlinks"><div>Mats</div><div>Blocks</div><div>Apparel</div><div>Sustainability</div></div>
<div class="searchpill">Find your practice…</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Grown, Not Made</h1>
<p>Sustainably harvested natural rubber mats built for a lifetime on the floor.</p>
<div class="herocta">Shop Mats</div>
</div>
</div>
<div class="strip">
<div class="tile"><div class="tileimg" style="background:linear-gradient(135deg,#108474,#1b4515)"></div><div class="tilelabel">Yoga Mats</div></div>
<div class="tile"><div class="tileimg" style="background:linear-gradient(135deg,#eb593c,#108474)"></div><div class="tilelabel">Blocks & Props</div></div>
<div class="tile"><div class="tileimg" style="background:linear-gradient(135deg,#a89cc8,#1b4515)"></div><div class="tilelabel">Apparel</div></div>
<div class="tile"><div class="tileimg" style="background:linear-gradient(135deg,#fbcd0a,#108474)"></div><div class="tilelabel">Membership</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#108474,#0d6b5e)"><span class="badge new">New</span></div><div class="ptitle">Harmony Mat — Forest Green</div><div class="stars">★★★★★</div><div class="pprice">$94.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#eb593c,#1b4515)"><span class="badge sale">Sale</span></div><div class="ptitle">Travel Mat — Coral</div><div class="stars">★★★★☆</div><div class="pprice">$54.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a89cc8,#108474)"></div><div class="ptitle">Cork Yoga Block — Set of Two</div><div class="stars">★★★★★</div><div class="pprice">$32.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1b4515,#108474)"></div><div class="ptitle">Studio Tote — Natural Canvas</div><div class="stars">★★★★★</div><div class="pprice">$42.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#fbcd0a,#eb593c)"></div><div class="ptitle">Restorative Bolster Cushion</div><div class="stars">★★★★☆</div><div class="pprice">$68.00</div></div>
</div>
<div class="footer"><span>© Grown, Not Made</span><span>Sustainability<span> Rewards</span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"YouandiNewKr","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.logo { font-size:19px; font-weight:600; }
.navlinks { display:flex; gap:0; }
.navlinks span { padding:0 20px; font-size:18px; font-weight:500; }
.hero { height:260px; background:#000000; color:#ffffff; display:flex; flex-direction:column;
justify-content:center; padding:0 40px; }
.hero h2 { font-size:52px; font-weight:700; line-height:1.4; margin:0 0 16px; }
.btn-outline { display:inline-block; background:transparent; color:#ffffff; border:1px solid rgba(255,255,255,0.6);
border-radius:3px; padding:12px 29px; font-size:16px; width:fit-content; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:0; }
.card { border:none; }
.card .thumb { height:150px; background:linear-gradient(135deg,#111111,#333333); }
.card .label { padding:12px; font-size:16px; font-weight:500; text-align:center; }
footer { border-top:1px solid #eeeeee; padding:14px 40px; text-align:center; font-size:12px; color:#000000; }
</style></head>
<body>
<nav>
<span class="logo">Hyundai Card</span>
<div class="navlinks"><span>Cards</span><span>Benefits</span><span>Digital</span><span>Events</span></div>
</nav>
<section class="hero">
<h2>THE BLACK<br />Hyundai Card</h2>
<span class="btn-outline">Learn More</span>
</section>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="label">the Black</div></div>
<div class="card"><div class="thumb"></div><div class="label">the Purple</div></div>
<div class="card"><div class="thumb"></div><div class="label">the Green</div></div>
<div class="card"><div class="thumb"></div><div class="label">the Red</div></div>
</div>
<footer>© Hyundai Card</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5d00; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5d00; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5d00; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5d00; color: #f5f5f5;
border: 1px solid #fd7527; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff7729; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0C0C0C; box-sizing:border-box;
font-family:"Pretendard Variable", -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.nav .brand { font-weight:800; font-size:20px; }
.nav .brand span { color:#FF5D00; }
.nav .links { display:flex; gap:24px; font-size:15px; color:#373737; }
.navbtn { background:#0C0C0C; color:#fff; border-radius:8px; padding:9px 18px; font-size:14px; font-weight:700; }
.hero { padding:26px 32px 0; }
.hero h1 { font-size:40px; font-weight:800; line-height:1.25; letter-spacing:-1.12px; margin:0 0 10px; }
.hero h1 span { color:#FF5D00; }
.hero p { font-size:18px; color:#373737; margin:0; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:26px 32px 0; }
.card { border-radius:12px; overflow:hidden; border:1px solid #eee; }
.thumb { height:130px; }
.th1{background:linear-gradient(135deg,#ffe3d1,#ffb98a);} .th2{background:linear-gradient(135deg,#dbe9ff,#a9c8ff);} .th3{background:linear-gradient(135deg,#e3ffe6,#a9e6b6);}
.cbody { padding:14px; }
.ccat { font-size:11px; color:#FF5D00; font-weight:700; text-transform:uppercase; margin-bottom:4px; }
.ctitle { font-size:15px; font-weight:700; margin:0 0 6px; line-height:1.4; }
.cmeta { font-size:12px; color:#373737; }
.strip { display:flex; gap:14px; padding:22px 32px 0; }
.stripcard { flex:1; background:#0C0C0C; color:#fff; border-radius:12px; padding:18px; }
.stripcard h4 { font-size:16px; font-weight:800; margin:0 0 4px; }
.stripcard p { font-size:12px; color:#c7c7c7; margin:0; }
</style></head>
<body>
<nav class="nav">
<div class="brand">CLASS<span>101</span></div>
<div class="links"><span>Explore</span><span>Bestsellers</span><span>Membership</span></div>
<button class="navbtn">Start free trial</button>
</nav>
<div class="hero">
<h1>Learn something new,<br>every <span>day</span></h1>
<p>Thousands of classes from real creators — hobbies, skills, and side projects.</p>
</div>
<div class="cards">
<div class="card"><div class="thumb th1"></div><div class="cbody"><div class="ccat">Illustration</div><div class="ctitle">Watercolor for Beginners</div><div class="cmeta">By Jiwoo · 12,480 students</div></div></div>
<div class="card"><div class="thumb th2"></div><div class="cbody"><div class="ccat">Business</div><div class="ctitle">Freelance Design Ops</div><div class="cmeta">By Daniel · 8,210 students</div></div></div>
<div class="card"><div class="thumb th3"></div><div class="cbody"><div class="ccat">Music</div><div class="ctitle">Lo-fi Beat Making 101</div><div class="cmeta">By Yuna · 15,902 students</div></div></div>
</div>
<div class="strip">
<div class="stripcard"><h4>Class101+ Membership</h4><p>Unlimited access to every class, one flat price.</p></div>
<div class="stripcard"><h4>Become a Creator</h4><p>Turn your skill into a class — apply today.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #0058a3; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #0058a3;
border: 1px solid #0058a3; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.53; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.33; letter-spacing: 0.1px; background: #eeeeee; color: #333333;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dddddd;}
.logo{font-size:19px;font-weight:700;color:#0058a3;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;}
.searchbar{width:220px;height:36px;border-radius:8px;border:1px solid #dddddd;background:#eeeeee;display:flex;align-items:center;padding:0 12px;font-size:12px;color:#666;}
.megaline{padding:8px 40px;font-size:12px;color:#333333;border-bottom:1px solid #eeeeee;}
.section{padding:22px 40px 0;}
.tiles{display:flex;gap:12px;margin-bottom:20px;}
.tile{flex:1;background:#eeeeee;border-radius:8px;padding:14px;text-align:center;font-size:14px;font-weight:600;}
.sectitle{font-size:20px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border:1px solid #eeeeee;border-radius:8px;padding:12px;}
.thumb{height:90px;background:#f5f5f5;border-radius:4px;margin-bottom:8px;}
.compat{display:inline-block;background:#eeeeee;border:1px solid #dddddd;border-radius:4px;font-size:10px;color:#333;padding:2px 6px;margin-bottom:6px;}
.ptitle{font-size:14px;color:#1a1a1a;margin-bottom:6px;}
.pprice{font-size:18px;font-weight:700;}
</style>
<div class="nav">
<div class="logo">Xentris</div>
<div class="navlinks"><div>Apple</div><div>Samsung</div><div>Google</div><div>Accessories</div></div>
<div class="searchbar">Search products...</div>
</div>
<div class="megaline">Cases • Chargers • Screen Protectors • Mounts • Cables</div>
<div class="section">
<div class="tiles">
<div class="tile">Cases</div>
<div class="tile">Chargers</div>
<div class="tile">Screen Protectors</div>
<div class="tile">Mounts</div>
</div>
<div class="sectitle">Compatible with iPhone 15 Pro</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="compat">iPhone 15 Pro</div><div class="ptitle">Rugged Protective Case</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="thumb"></div><div class="compat">Galaxy S24</div><div class="ptitle">20W Wall Charger</div><div class="pprice">$19.99</div></div>
<div class="card"><div class="thumb"></div><div class="compat">Universal</div><div class="ptitle">Tempered Glass Protector</div><div class="pprice">$9.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.38; letter-spacing: 0.2px; margin: 0; color: #62605d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.1px; background: #006fba; color: #ffffff;
border: none; border-radius: 12px; padding: 13px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.1px; background: #ffffff; color: #006fba;
border: 1px solid #006fba; border-radius: 12px;
padding: 12px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #cfcfcf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #62605d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #d63a2f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#303030; box-sizing:border-box;
font-family:'Work Sans', system-ui, -apple-system, sans-serif; }
* { box-sizing:border-box; }
.announce { height:28px; background:#006fba; color:#fff; display:flex; align-items:center; justify-content:center;
font-size:12px; font-weight:500; letter-spacing:0.2px; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #cfcfcf; background:#fff; }
.brand { font-size:18px; font-weight:700; letter-spacing:-0.3px; color:#121212; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:500; color:#62605d; }
.navlinks span.active { color:#006fba; font-weight:600; }
.cart-ico { width:36px; height:36px; border-radius:8px; background:#ebebeb; display:flex; align-items:center; justify-content:center; font-size:15px; }
.main { display:flex; height:552px; }
.gallery { width:420px; background:#ebebeb; position:relative; display:flex; align-items:center; justify-content:center; }
.swatch-strip { position:absolute; left:20px; top:20px; display:flex; flex-direction:column; gap:8px; }
.swatch { width:52px; height:52px; border-radius:8px; background:#fff; border:1px solid #dedede; }
.swatch.sel { border:2px solid #006fba; }
.prod-shape { width:220px; height:280px; border-radius:24px; background:linear-gradient(160deg,#308ac7,#005a9e); position:relative; }
.prod-shape::before { content:''; position:absolute; top:34px; left:34px; right:34px; height:96px; border-radius:14px; background:rgba(255,255,255,0.18); }
.prod-shape::after { content:''; position:absolute; bottom:26px; left:50%; transform:translateX(-50%); width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,0.14); }
.badge-instock { position:absolute; top:20px; right:20px; background:#559b60; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:3px 8px; border-radius:4px; }
.info { flex:1; padding:28px 32px; display:flex; flex-direction:column; gap:10px; }
.tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#6c69de; }
h1 { font-size:24px; font-weight:600; margin:0; letter-spacing:-0.25px; color:#121212; }
.stars { color:#006fba; font-size:13px; }
.stars .count { color:#62605d; font-weight:400; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:2px; }
.price { font-size:26px; font-weight:700; color:#006fba; }
.price-old { font-size:14px; color:#aaaaaa; text-decoration:line-through; }
.badge-sale { background:#d63a2f; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:4px; }
.desc { font-size:13px; line-height:1.55; color:#62605d; max-width:420px; }
.features { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.feat-chip { background:#ebebeb; border:1px solid #cfcfcf; border-radius:999px; padding:5px 12px; font-size:11px; font-weight:600; color:#303030; }
.qty-row { display:flex; align-items:center; gap:14px; margin-top:10px; }
.qty { display:flex; align-items:center; background:#ebebeb; border:1px solid #cfcfcf; border-radius:8px; height:40px; }
.qty span { width:40px; text-align:center; font-weight:600; }
.qty button { width:36px; height:40px; border:none; background:transparent; font-size:16px; color:#303030; }
.btn-cart { flex:1; height:48px; background:#006fba; color:#fff; border:none; border-radius:12px; font-weight:600; font-size:15px; }
.trust-row { display:flex; gap:10px; margin-top:auto; padding-top:12px; border-top:1px solid #dedede; }
.trust { flex:1; text-align:center; font-size:10.5px; color:#62605d; font-weight:600; }
.trust b { display:block; color:#006fba; font-size:14px; margin-bottom:2px; }
</style></head>
<body>
<div class="announce">Free shipping on orders over $75 · Registry-ready gifting available</div>
<nav>
<p class="brand">Baby Brezza</p>
<div class="navlinks"><span class="active">Feeding</span><span>Sterilizers</span><span>Formula Pro</span><span>Sale</span></div>
<div class="cart-ico">🛒</div>
</nav>
<div class="main">
<div class="gallery">
<div class="swatch-strip">
<div class="swatch sel"></div>
<div class="swatch"></div>
<div class="swatch"></div>
</div>
<div class="prod-shape"></div>
<div class="badge-instock">Ships Today</div>
</div>
<div class="info">
<span class="tag">Bestseller · Formula Pro Advanced</span>
<h1>Formula Pro Advanced Formula Mixer</h1>
<div class="stars">★★★★★<span class="count">4.8 (2,140 reviews)</span></div>
<div class="price-row">
<span class="price">$179.99</span>
<span class="price-old">$209.99</span>
<span class="badge-sale">Sale</span>
</div>
<p class="desc">Precisely mixes formula to the perfect temperature and consistency in seconds. Compatible with most bottle brands, whisper-quiet motor, and a self-cleaning cycle for busy 2am feedings.</p>
<div class="features">
<span class="feat-chip">32 dB Quiet Mode</span>
<span class="feat-chip">Self-Cleaning Cycle</span>
<span class="feat-chip">Fits Most Bottles</span>
<span class="feat-chip">2-Year Warranty</span>
</div>
<div class="qty-row">
<div class="qty"><button>−</button><span>1</span><button>+</button></div>
<button class="btn-cart">Add to Cart</button>
</div>
<div class="trust-row">
<div class="trust"><b>Free</b>Shipping $75+</div>
<div class="trust"><b>2yr</b>Warranty</div>
<div class="trust"><b>30d</b>Easy Returns</div>
<div class="trust"><b>BPA</b>Free Materials</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafaf7; color: #1c1c1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafaf7; color: #1c1c1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: #1c1c1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.1px; margin: 0; color: #7a7a73; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #5b8a6a; color: #ffffff;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #fafaf7; color: #5b8a6a;
border: 1px solid #5b8a6a; border-radius: 12px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafaf7; color: #1c1c1a;
border: 1px solid #c2c2c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a73; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.1px; background: #e8f0e5; color: #3d6b50;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'DM Sans','Plus Jakarta Sans',system-ui,sans-serif; background:#fafaf7; color:#3a3a37; }
*{box-sizing:border-box;}
.nav{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e0ddd5;}
.logo{font-size:20px;font-weight:600;color:#1c1c1a;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:500;color:#1c1c1a;}
.cta{background:#5b8a6a;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;border-radius:12px;}
.hero{height:230px;display:flex;background:#f2efe8;align-items:center;padding:0 32px;}
.herotext{width:440px;}
.herotext h1{font-size:36px;font-weight:600;color:#1c1c1a;margin:0 0 12px;letter-spacing:-0.5px;line-height:1.15;}
.herotext p{font-size:16px;color:#3a3a37;margin:0 0 18px;}
.pill{display:inline-block;background:#e8f0e5;color:#3d6b50;font-size:13px;font-weight:500;border-radius:9999px;padding:6px 14px;margin-bottom:14px;}
.heroimg{width:340px;height:170px;position:relative;background:#fff;border-radius:12px;overflow:hidden;}
.heroimg:before{content:'';position:absolute;left:60px;top:30px;width:220px;height:110px;border-radius:40% 40% 30% 30%;background:linear-gradient(160deg,#fafaf7,#e8f0e5);}
.heroimg:after{content:'';position:absolute;left:100px;top:60px;width:140px;height:60px;border-radius:20px;background:#5b8a6a;opacity:0.85;}
.section{padding:20px 32px 0;}
.sectitle{font-size:16px;font-weight:600;color:#1c1c1a;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:150px;background:#fff;border-radius:12px;padding:12px;}
.thumb{height:88px;background:#f2efe8;border-radius:8px;margin-bottom:8px;}
.pname{font-size:14px;font-weight:600;color:#1c1c1a;line-height:1.3;}
.matbadge{display:inline-block;background:#e8f0e5;color:#3d6b50;font-size:11px;font-weight:500;border-radius:9999px;padding:2px 10px;margin-top:6px;}
.pprice{font-size:14px;font-weight:500;color:#1c1c1a;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#f2efe8;color:#7a7a73;font-size:12px;border-top:1px solid #e0ddd5;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kudos</div>
<div class="navlinks"><div>Diapers</div><div>Wipes</div><div>Bundles</div><div>About</div></div>
<div class="cta">Shop Now</div>
</div>
<div class="hero">
<div class="herotext">
<div class="pill">100% Cotton Inner</div>
<h1>Skin that never meets a harsh synthetic.</h1>
<p>Diapers built around the cotton-science story, not the smiling baby.</p>
</div>
<div class="heroimg"></div>
</div>
<div class="section">
<div class="sectitle">Shop the Layers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e8f0e5,#5b8a6a)"></div><div class="pname">Newborn Diapers</div><div class="matbadge">PFAS-Free Outer</div><div class="pprice">$24.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f2efe8,#7a7a73)"></div><div class="pname">Size 3 Diapers</div><div class="matbadge">100% Cotton Inner</div><div class="pprice">$26.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e8f0e5,#3d6b50)"></div><div class="pname">Sensitive Wipes</div><div class="matbadge">Plant-Based Adhesive</div><div class="pprice">$8.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f7f3ec,#5b8a6a)"></div><div class="pname">Overnight Bundle</div><div class="matbadge">GOTS Certified</div><div class="pprice">$58.00</div></div>
</div>
</div>
<div class="footer"><span>© Kudos — Cotton Science, Not Chaos</span><span>GOTS · OEKO-TEX</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #030303; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #030303; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #030303; color: #ffffff;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #030303; color: #f5f5f5;
border: 1px solid #2a2a2a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #050505; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#030303; color:#ffffff; box-sizing:border-box;
font-family:Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px;
background:
radial-gradient(90% 70% at 22% 0%, rgba(255,90,60,0.35), rgba(3,3,3,0) 60%),
radial-gradient(70% 60% at 0% 100%, rgba(255,180,60,0.14), rgba(3,3,3,0) 55%),
#030303; }
.topbar { position:relative; z-index:2; height:48px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; }
.topbar .chev { font-size:20px; }
.topbar .src { font-size:11px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:#AAAAAA; }
.topbar .more { font-size:18px; letter-spacing:2px; }
.layout { position:relative; z-index:2; display:flex; height:calc(640px - 48px); }
.player { width:580px; display:flex; flex-direction:column; align-items:center; padding:8px 40px 24px; }
.art { width:196px; height:196px; border-radius:8px; margin-top:6px;
background: linear-gradient(160deg, #ff5a3c 0%, #d81b3f 45%, #1a0a12 100%);
box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7); position:relative; overflow:hidden; }
.art::after { content:''; position:absolute; inset:0;
background:repeating-linear-gradient(70deg, rgba(255,255,255,0.05) 0 6px, rgba(0,0,0,0.06) 6px 12px); }
.toggle { margin-top:18px; display:flex; background:rgba(255,255,255,0.08); border-radius:999px; padding:4px; }
.toggle span { font-size:12px; font-weight:700; padding:6px 18px; border-radius:999px; color:#AAAAAA; }
.toggle span.active { background:#fff; color:#030303; }
.titles { margin-top:18px; text-align:center; }
.titles h1 { font-size:22px; font-weight:700; margin:0 0 4px; letter-spacing:-0.2px; }
.titles p { font-size:13px; color:#AAAAAA; margin:0; }
.scrub { width:100%; max-width:420px; margin-top:20px; }
.track { position:relative; height:3px; background:rgba(255,255,255,0.22); border-radius:2px; }
.track .fill { position:absolute; left:0; top:0; height:3px; width:44%; background:#fff; border-radius:2px; }
.track .thumb { position:absolute; left:44%; top:50%; width:12px; height:12px; margin-left:-6px; margin-top:-6px;
background:#fff; border-radius:50%; }
.times { display:flex; justify-content:space-between; margin-top:7px; font-size:11px; color:#AAAAAA;
font-variant-numeric:tabular-nums; }
.controls { margin-top:20px; display:flex; align-items:center; gap:30px; }
.controls .side { font-size:22px; color:#fff; }
.playbtn { width:64px; height:64px; border-radius:50%; background:#fff;
display:flex; align-items:center; justify-content:center; }
.playbtn .bars { display:flex; gap:5px; }
.playbtn .bars span { width:5px; height:20px; background:#030303; border-radius:1px; }
.queue { width:380px; padding:20px 24px; overflow:hidden; }
.qhead { font-size:10px; font-weight:700; letter-spacing:0.06em; color:#AAAAAA; text-transform:uppercase;
margin:0 0 4px; }
.qcur { display:flex; align-items:center; gap:12px; padding:8px 0 14px; border-bottom:1px solid rgba(255,255,255,0.12); }
.qcur .thumb { width:40px; height:40px; border-radius:4px; flex:none;
background:linear-gradient(160deg,#ff5a3c,#d81b3f); }
.qcur h4 { font-size:15px; font-weight:500; margin:0; }
.qcur p { font-size:13px; color:#AAAAAA; margin:2px 0 0; }
.qeyebrow { font-size:10px; font-weight:700; letter-spacing:0.06em; color:#AAAAAA; text-transform:uppercase;
margin:14px 0 8px; }
.qrow { display:flex; align-items:center; gap:12px; padding:7px 0; }
.qrow .thumb { width:40px; height:40px; border-radius:4px; flex:none; }
.qrow .a { background:linear-gradient(135deg,#5d9cec,#4a89dc); }
.qrow .b { background:linear-gradient(135deg,#48cfad,#37bc9b); }
.qrow .c { background:linear-gradient(135deg,#ac92ec,#967adc); }
.qrow h4 { font-size:15px; font-weight:500; margin:0; color:#fff; }
.qrow p { font-size:13px; color:#AAAAAA; margin:2px 0 0; }
.brandtag { position:absolute; left:28px; bottom:16px; font-size:11px; color:#717171; z-index:2; }
</style></head>
<body>
<div class="stage">
<div class="topbar">
<span class="chev">⌄</span>
<span class="src">Playing from library</span>
<span class="more">⋮</span>
</div>
<div class="layout">
<div class="player">
<div class="art"></div>
<div class="toggle"><span class="active">Songs</span><span>Videos</span></div>
<div class="titles">
<h1>Neon Overpass</h1>
<p>Reef & Wren</p>
</div>
<div class="scrub">
<div class="track"><div class="fill"></div><div class="thumb"></div></div>
<div class="times"><span>1:47</span><span>-1:52</span></div>
</div>
<div class="controls">
<div class="side">⇄</div>
<div class="side">⏮</div>
<div class="playbtn"><div class="bars"><span></span><span></span></div></div>
<div class="side">⏭</div>
<div class="side">⟲</div>
</div>
</div>
<div class="queue">
<p class="qhead">Playing from</p>
<div class="qcur">
<div class="thumb"></div>
<div><h4>Neon Overpass</h4><p>Reef & Wren</p></div>
</div>
<p class="qeyebrow">Up next</p>
<div class="qrow"><div class="thumb a"></div><div><h4>Static Bloom</h4><p>Jordan Ames</p></div></div>
<div class="qrow"><div class="thumb b"></div><div><h4>Harbor Lights</h4><p>Minji Park</p></div></div>
<div class="qrow"><div class="thumb c"></div><div><h4>Low Frequency</h4><p>Camila Voss</p></div></div>
</div>
</div>
<div class="brandtag">YouTube Music (iOS)</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #232324;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #232324;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #232324; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #67696a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #df3409; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #ffffff; color: #232324;
border: 1px solid #df3409; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #232324;
border: 1px solid #c0c0c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #67696a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #b41b19; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f5; color:#26333a; box-sizing:border-box;
font-family:'Moderat','Inter','Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #d9d9d9; }
.brand { color:#232324; font-size:19px; font-weight:800; margin:0; }
.navlinks { display:flex; gap:22px; align-items:center; }
.navlinks span { font-size:12px; color:#26333a; font-weight:700; }
.navlinks .cta { background:#df3409; color:#fff; padding:8px 18px; border-radius:3px; font-size:11px; font-weight:800; }
.hero { height:236px; background:#232324; display:flex; align-items:center; padding:0 36px; gap:36px; }
.desk { width:260px; height:150px; position:relative; }
.desk .top { position:absolute; top:20px; left:0; right:0; height:14px; background:#df3409; border-radius:3px; }
.desk .leg1, .desk .leg2 { position:absolute; top:34px; bottom:0; width:12px; background:#67696a; }
.desk .leg1 { left:30px; } .desk .leg2 { right:30px; }
.desk .monitor { position:absolute; top:-30px; left:80px; width:100px; height:56px; background:#017acb; border-radius:4px; }
.heroTxt h1 { color:#ffffff; font-size:30px; font-weight:800; margin:0 0 10px; line-height:1.15; }
.heroTxt p { color:#f1eeeb; font-size:13px; margin:0 0 18px; max-width:320px; }
.heroTxt .cta { display:inline-block; background:#df3409; color:#fff; font-weight:800; font-size:13px; padding:12px 28px; border-radius:3px; }
.section-label { padding:16px 32px 8px; font-size:14px; font-weight:800; color:#232324; }
.grid { display:flex; gap:12px; padding:0 32px; }
.card { flex:1; background:#ffffff; border-radius:4px; padding:12px; border:1px solid #e0e0e0; }
.card .art { height:88px; border-radius:3px; margin-bottom:8px; position:relative; }
.a1 { background:linear-gradient(160deg,#017acb,#1890ff); } .a2 { background:linear-gradient(160deg,#df3409,#eb5b2f); }
.a3 { background:linear-gradient(160deg,#34b37e,#009879); } .a4 { background:linear-gradient(160deg,#67696a,#26333a); }
.card .badge { position:absolute; top:14px; left:14px; background:#b41b19; color:#fff; font-size:8px; font-weight:800; padding:3px 7px; border-radius:3px; }
.card .eco { position:absolute; top:14px; left:14px; background:#34b37e; color:#fff; font-size:8px; font-weight:800; padding:3px 7px; border-radius:3px; }
.card h3 { font-size:12px; font-weight:800; color:#232324; margin:0 0 4px; }
.card p { font-size:10px; color:#67696a; margin:0 0 8px; }
.card .price { font-size:14px; font-weight:800; color:#df3409; }
footer { height:56px; margin-top:14px; background:#ffffff; border-top:1px solid #d9d9d9; display:flex; align-items:center; gap:26px; padding:0 32px; }
footer span { font-size:10px; color:#67696a; font-weight:700; }
</style></head>
<body>
<nav>
<p class="brand">Flexispot</p>
<div class="navlinks"><span>Standing Desks</span><span>Chairs</span><span>Accessories</span><span class="cta">Shop Now</span></div>
</nav>
<div class="hero">
<div class="desk"><div class="monitor"></div><div class="top"></div><div class="leg1"></div><div class="leg2"></div></div>
<div class="heroTxt">
<h1>Sit less.<br>Move more.</h1>
<p>Electric standing desks and ergonomic seating engineered for the workday that never stops moving.</p>
<span class="cta">Shop Standing Desks</span>
</div>
</div>
<div class="section-label">Top Sellers</div>
<div class="grid">
<div class="card"><div class="art a1"></div><h3>E7 Pro Standing Desk</h3><p>Dual Motor · Memory Presets</p><div class="price">$399</div></div>
<div class="card"><div class="art a2"><span class="badge">SALE</span></div><h3>BS9 Ergonomic Chair</h3><p>Adaptive Lumbar Support</p><div class="price">$249</div></div>
<div class="card"><div class="art a3"><span class="eco">ECO</span></div><h3>Bamboo Desktop Panel</h3><p>Sustainable Surface</p><div class="price">$149</div></div>
<div class="card"><div class="art a4"></div><h3>Under-Desk Treadmill</h3><p>Walk While You Work</p><div class="price">$429</div></div>
</div>
<footer>
<span>10-YEAR MOTOR WARRANTY</span><span>FREE ASSEMBLY VIDEO</span><span>ERGONOMIC FIT QUIZ</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f4eb; color: #171717;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f4eb; color: #171717;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: 0.01em; margin: 0; color: #171717; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 400; line-height: 1.55; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1; letter-spacing: 0.1em; background: #171717; color: #f8f4eb;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1; letter-spacing: 0.1em; background: transparent; color: #171717;
border: 1px solid #9d8858; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f8f4eb; color: #171717;
border: 1px solid #c0bdb6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1; letter-spacing: 0.1em; background: #c31818; color: #f8f4eb;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f4eb; color:#171717; box-sizing:border-box;
font-family:'Garamond Premier Pro', Georgia, serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #ededed; background:#f8f4eb; }
.brand { font-size:18px; font-weight:400; letter-spacing:0.01em; margin:0; }
.navlinks { display:flex; gap:24px; font-family:'Helvetica Neue',Arial,sans-serif; font-size:12px; font-weight:400;
letter-spacing:0.08em; text-transform:uppercase; color:#4a4a4a; }
.util { font-family:'Helvetica Neue',Arial,sans-serif; font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:#4a4a4a; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 64px); }
.stage { padding:26px; display:flex; flex-direction:column; gap:12px; }
.crumb { font-family:'Helvetica Neue',Arial,sans-serif; font-size:11px; color:#aaaaaa; letter-spacing:0.04em; text-transform:uppercase; }
.pan { flex:1; position:relative; overflow:hidden; background:#efe9da; }
.pan::before { content:''; position:absolute; left:50%; top:48%; width:150px; height:150px; transform:translate(-50%,-50%) rotate(6deg);
border-radius:50%; background:conic-gradient(from 210deg,#574cd5,#9d8858,#a77a06,#574cd5); box-shadow:0 16px 34px rgba(0,0,0,0.14); }
.pan::after { content:''; position:absolute; left:50%; top:48%; width:78px; height:78px; transform:translate(-50%,-50%);
border-radius:50%; background:#f8f4eb; }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; background:#efe9da; border:1px solid #ededed; }
.info { padding:24px 40px; display:flex; flex-direction:column; gap:11px; overflow:hidden; border-left:1px solid #ededed; }
.cat { font-family:'Helvetica Neue',Arial,sans-serif; font-size:12px; font-weight:400; letter-spacing:0.08em; text-transform:uppercase; color:#9d8858; }
h1 { margin:0; font-size:28px; font-weight:400; line-height:1.15; }
.rating { display:flex; align-items:center; gap:8px; font-family:'Helvetica Neue',Arial,sans-serif; font-size:12px; color:#aaaaaa; }
.stars { color:#9d8858; letter-spacing:1px; }
.price-row { display:flex; align-items:baseline; gap:10px; font-family:'Helvetica Neue',Arial,sans-serif; }
.price { font-size:15px; font-weight:400; }
.badge-new { background:#171717; color:#f8f4eb; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; padding:3px 8px; }
.desc { font-size:17px; color:#4a4a4a; line-height:1.5; }
.selectors { display:flex; gap:8px; align-items:center; }
.swatch { width:20px; height:20px; border-radius:50%; border:1px solid #ededed; }
.swatch.on { border:2px solid #171717; }
.s1{background:#574cd5;} .s2{background:#9d8858;} .s3{background:#c31818;}
.trust { font-family:'Helvetica Neue',Arial,sans-serif; font-size:12px; color:#3c9342; letter-spacing:0.02em; border-top:1px solid #ededed; padding-top:10px; }
.cta-row { display:flex; gap:10px; margin-top:auto; font-family:'Helvetica Neue',Arial,sans-serif; }
.btn-primary { flex:1; background:#171717; color:#f8f4eb; border:none; height:44px; font-size:13px; font-weight:400;
letter-spacing:0.1em; text-transform:uppercase; }
.btn-secondary { width:150px; background:transparent; border:1px solid #171717; color:#171717; height:44px; font-size:13px;
letter-spacing:0.1em; text-transform:uppercase; }
</style></head>
<body>
<nav>
<p class="brand">Brent Neale</p>
<div class="navlinks"><span>Rings</span><span>Earrings</span><span>Necklaces</span><span>Gemstones</span></div>
<div class="util">Search Account Bag (1)</div>
</nav>
<main>
<div class="stage">
<div class="crumb">Brent Neale / Rainbow / Huggies</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Rainbow Collection</span>
<h1>Rainbow Sapphire Huggie Hoops</h1>
<div class="rating"><span class="stars">★★★★★</span> 4.9 · 214 reviews</div>
<div class="price-row"><span class="price">$2,450</span><span class="badge-new">New</span></div>
<p class="desc">A vein of gemstone color set in 14k yellow gold — bezel-set sapphires, tsavorites, and rubies climb the ear like a hand-painted arc.</p>
<div class="selectors">
<span class="swatch s1 on"></span><span class="swatch s2"></span><span class="swatch s3"></span>
</div>
<div class="trust">Handcrafted in New York · Ships in 2–3 weeks</div>
<div class="cta-row">
<button class="btn-primary">Add to Bag</button>
<button class="btn-secondary">Book an Appointment</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #139cb7; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #139cb7; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #333333; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #139cb7; color: #333333;
border: 1px solid #333333; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #139cb7; color: #f5f5f5;
border: 1px solid #37aac1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #188ba2; color: #333333;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#231200; box-sizing:border-box;
font-family:Roboto, "Noto Sans JP", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #e6e6e6; }
.brand { font-size:18px; font-weight:700; color:#231200; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#333; }
.cta { background:#333333; color:#fff; border-radius:8px; padding:10px 20px 10px 22px; font-size:14px; }
.hero { padding:26px 36px 18px; }
.badge { display:inline-block; background:#ffbf00; color:#231200; border-radius:8px; padding:5px 10px; font-size:12px; font-weight:700; margin-bottom:12px; }
.hero h1 { font-size:44px; font-weight:700; line-height:1.25; letter-spacing:1.5px; margin:0 0 8px; max-width:640px; }
.hero p { font-size:15px; color:#3e4149; max-width:480px; margin:0 0 16px; }
.row { display:flex; gap:10px; }
.cta2 { background:#ffffff; border:1px solid #d6d5d5; color:#231200; border-radius:8px; padding:9px 20px; font-size:14px; }
.band { background:#fff5e1; padding:22px 36px; display:flex; gap:16px; }
.card { flex:1; background:#fff; border:1px solid #d6d5d5; border-radius:10px; padding:16px; }
.card h3 { font-size:16px; margin:0 0 6px; color:#231200; }
.card p { font-size:12px; color:#3e4149; margin:0; }
.decor { position:absolute; width:40px; height:40px; border-radius:50%; background:#ffdb4f; top:24px; right:100px; }
</style></head>
<body>
<nav>
<p class="brand">Cybozu</p>
<div class="navlinks"><span>Products</span><span>Pricing</span><span>Case Studies</span><span>Support</span></div>
<button class="cta">Try free for 30 days</button>
</nav>
<section class="hero">
<span class="badge">Give it a try!</span>
<h1>Anyone can build it.</h1>
<p>Cybozu's no-code, low-code tool for building business apps.</p>
<div class="row">
<button class="cta">Try free for 30 days</button>
<button class="cta2">Watch the video</button>
</div>
</section>
<div class="band">
<div class="card"><h3>Customer & deal management</h3><p>Bring your sales data together and share it in a single app.</p></div>
<div class="card"><h3>Ditch the spreadsheets</h3><p>Move on from spreadsheets — faster, with fewer mistakes.</p></div>
<div class="card"><h3>Workflow</h3><p>Turn your approval process into an app, as-is.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fc8259; color: #000000;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #121212; color: #ffffff;
border: 1px solid #fc8259; border-radius: 9999px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fc8259; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#ffffff; box-sizing:border-box;
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 30px;
background:rgba(18,18,18,.7); border-bottom:1px solid #2a2a2a; }
.brand { font-size:15px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.navlinks { display:flex; gap:24px; font-size:11px; color:#dedede; text-transform:uppercase; letter-spacing:.06em; }
.navlinks span.on { color:#fc8259; }
.cart { font-size:11px; color:#dedede; }
.wrap { display:flex; height:530px; padding:26px 30px; gap:28px; align-items:stretch; }
.photo { width:340px; flex-shrink:0; border-radius:12px; background:radial-gradient(circle at 40% 30%, #2a2a2a 0%, #050505 75%);
position:relative; display:flex; align-items:center; justify-content:center; }
.prop { width:120px; height:160px; border-radius:6px; background:linear-gradient(160deg,#fc8259,#7a3620); box-shadow:0 20px 50px rgba(0,0,0,.5); }
.sale-badge { position:absolute; top:16px; left:16px; background:#fc8259; color:#121212; font-size:10px; font-weight:700; padding:5px 10px; border-radius:9999px; }
.card { flex:1; background:#ffffff; color:#121212; border-radius:12px; padding:28px 30px; display:flex; flex-direction:column; gap:12px; }
.film-tag { font-size:11px; color:#dedede; background:#121212; display:inline-block; padding:3px 10px; border-radius:9999px; width:fit-content; }
.card h1 { font-size:23px; font-weight:600; margin:0; }
.price { font-size:19px; font-weight:600; }
.opt-row { display:flex; gap:8px; }
.opt { border:1px solid #dedede; border-radius:9999px; padding:7px 16px; font-size:12px; }
.opt.on { background:#121212; color:#fff; border-color:#121212; }
.desc { font-size:12.5px; color:#2a2a2a; line-height:1.6; max-width:400px; }
.buy-row { display:flex; gap:10px; margin-top:auto; }
.btn-buy { flex:1; background:#fc8259; color:#ffffff; border:none; border-radius:9999px; padding:13px; font-size:13px; font-weight:600; }
.btn-wish { border:1px solid #121212; border-radius:9999px; padding:13px 18px; font-size:13px; }
footer { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; font-size:11px; color:#dedede; }
</style></head>
<body>
<nav>
<p class="brand">A24 Shop</p>
<div class="navlinks"><span>Films</span><span class="on">Apparel</span><span>Objects</span><span>Books</span></div>
<span class="cart">Bag (2)</span>
</nav>
<div class="wrap">
<div class="photo"><span class="sale-badge">Limited Run</span><div class="prop"></div></div>
<div class="card">
<span class="film-tag">Prop Replica</span>
<h1>Lobby Card Print, No. 07</h1>
<span class="price">$38.00</span>
<div class="opt-row">
<span class="opt on">11×17</span>
<span class="opt">18×24</span>
</div>
<p class="desc">A screen-accurate reprint of the original theatrical lobby card, numbered in a run this small — like a prop from the film itself, under a spotlight in your own room.</p>
<div class="buy-row">
<button class="btn-buy">Add to Bag</button>
<button class="btn-wish">♡</button>
</div>
</div>
</div>
<footer><span>© A24 Shop</span><span>Shipping · Returns · Newsletter</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6821f; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6821f; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #784417; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f6821f; color: #000;
border: 1px solid #000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f6821f; color: #111111;
border: 1px solid #d1701d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #784417; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cf6d1a; color: #000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1D1F20; box-sizing:border-box;
font-family:Inter, -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid #EDEDED; }
.nav .brand { font-weight:700; font-size:16px; display:flex; align-items:center; gap:8px; }
.nav .brand .cloud { width:20px; height:14px; background:#F6821F; border-radius:8px; }
.nav .tabs { display:flex; gap:4px; }
.tab { font-size:14px; font-weight:600; color:#717174; padding:8px 4px; border-bottom:2px solid transparent; }
.tab.active { color:#1D1F20; border-color:#F6821F; }
.navbtn { background:#F6821F; color:#fff; border-radius:8px; padding:8px 14px; font-size:14px; font-weight:600; }
.body { display:flex; padding:16px 24px 0; gap:16px; }
.col { flex:1; display:flex; flex-direction:column; gap:14px; }
.statrow { display:flex; gap:14px; }
.stat { flex:1; background:#fff; border:1px solid #EDEDED; border-radius:8px; padding:14px 16px; }
.stat .num { font-size:26px; font-weight:700; color:#1D1F20; }
.stat .lbl { font-size:11px; font-weight:600; color:#717174; text-transform:uppercase; letter-spacing:0.04em; margin-top:4px; }
.card { background:#fff; border:1px solid #EDEDED; border-radius:8px; padding:16px; }
.card h4 { font-size:14px; font-weight:600; margin:0 0 10px; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:11px; font-weight:600; color:#717174; text-transform:uppercase; background:#fafafa; padding:8px 10px; }
td { font-size:12.5px; padding:8px 10px; border-top:1px solid #EDEDED; color:#36393A; }
.pill { display:inline-flex; align-items:center; gap:6px; border-radius:9999px; padding:2px 10px; font-size:11px; font-weight:600; }
.pill .d { width:7px; height:7px; border-radius:50%; }
.active-pill { background:#e8f5d8; color:#3d6b14; } .active-pill .d{background:#2FB344;}
.pending-pill { background:#fcf3d6; color:#8a6d1b; } .pending-pill .d{background:#F6C549;}
.sidecard { background:#fff; border:1px solid #EDEDED; border-radius:8px; padding:16px; }
.sidecard h4 { font-size:14px; font-weight:600; margin:0 0 10px; }
.switchrow { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid #EDEDED; font-size:12.5px; }
.switch { width:32px; height:18px; border-radius:9999px; background:#F6821F; position:relative; }
.switch::after { content:''; position:absolute; right:2px; top:2px; width:14px; height:14px; border-radius:50%; background:#fff; }
.switch.off { background:#D9D9D9; }
.switch.off::after { left:2px; right:auto; }
</style></head>
<body>
<nav class="nav">
<div class="brand"><span class="cloud"></span>Cloudflare</div>
<div class="tabs"><span class="tab active">Overview</span><span class="tab">Analytics</span><span class="tab">DNS</span><span class="tab">SSL</span></div>
<button class="navbtn">Add site</button>
</nav>
<div class="body">
<div class="col" style="flex:2;">
<div class="statrow">
<div class="stat"><div class="num">128M</div><div class="lbl">Requests / day</div></div>
<div class="stat"><div class="num">4.2 TB</div><div class="lbl">Bandwidth saved</div></div>
<div class="stat"><div class="num">6,204</div><div class="lbl">Threats blocked</div></div>
</div>
<div class="card">
<h4>DNS records</h4>
<table>
<tr><th>Type</th><th>Name</th><th>Content</th><th>Status</th></tr>
<tr><td>A</td><td>www</td><td>203.0.113.42</td><td><span class="pill active-pill"><span class="d"></span>Proxied</span></td></tr>
<tr><td>CNAME</td><td>api</td><td>edge.example.com</td><td><span class="pill active-pill"><span class="d"></span>Proxied</span></td></tr>
<tr><td>MX</td><td>@</td><td>mail.example.com</td><td><span class="pill pending-pill"><span class="d"></span>Pending</span></td></tr>
</table>
</div>
</div>
<div class="col">
<div class="sidecard">
<h4>Security</h4>
<div class="switchrow"><span>DDoS mitigation</span><div class="switch"></div></div>
<div class="switchrow"><span>Bot fight mode</span><div class="switch"></div></div>
<div class="switchrow"><span>Always use HTTPS</span><div class="switch off"></div></div>
</div>
<button class="navbtn" style="width:100%;height:36px;">Deploy Worker</button>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f6; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f6; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #9ca3af; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #00bbff; color: #000000;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #f4f4f6; color: #222222;
border: 1px solid #00bbff; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c0c0c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ca3af; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.2px; background: #be3a43; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f4f6; color:#222222; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.shipbar { height:32px; background:#222222; color:#00bbff; display:flex; align-items:center;
justify-content:center; font-size:12px; }
nav { height:60px; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #f4f4f6; }
.brand { font-size:19px; font-weight:500; color:#222222; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:500; color:#222222; }
.navlinks span:first-child { color:#00bbff; }
.navicons { display:flex; gap:14px; align-items:center; }
.cartdot { background:#00bbff; color:#fff; border-radius:9999px; width:18px; height:18px;
display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; }
.wrap { display:flex; height:calc(640px - 32px - 61px - 48px); }
.gallery { width:370px; background:#ffffff; display:flex; align-items:center; justify-content:center;
position:relative; border-right:1px solid #e5e7eb; }
.device { width:110px; height:190px; background:linear-gradient(180deg,#ffffff 0%,#e5e5e5 100%);
border-radius:20px; border:2px solid #d1d5db; position:relative; box-shadow:0 16px 34px rgba(0,0,0,0.08); }
.device::before { content:''; position:absolute; top:24px; left:50%; width:60px; height:60px;
background:#00bbff; border-radius:9999px; transform:translateX(-50%); opacity:0.85; }
.badge-new { position:absolute; top:20px; left:20px; background:#00bbff; color:#fff; font-size:11px;
font-weight:600; letter-spacing:0.2px; text-transform:uppercase; padding:4px 8px; border-radius:4px; }
.info { flex:1; padding:24px 32px; display:flex; flex-direction:column; gap:9px; background:#ffffff; }
.kicker { font-size:13px; color:#9ca3af; }
h1 { font-size:24px; font-weight:500; margin:0; line-height:1.3; letter-spacing:-0.3px; }
.stars { font-size:13px; color:#ffbdbd; }
.stars span { color:#9ca3af; margin-left:6px; }
.pricerow { display:flex; align-items:baseline; gap:10px; }
.price { font-size:22px; font-weight:500; color:#be3a43; }
.strike { font-size:14px; color:#9ca3af; text-decoration:line-through; }
.buyrow { display:flex; gap:10px; margin-top:2px; }
.btn-primary { background:#00bbff; color:#fff; border:none; border-radius:8px; padding:14px 24px;
font-weight:500; font-size:16px; }
.btn-secondary { background:#f4f4f6; color:#222222; border:1px solid #e5e7eb; border-radius:8px;
padding:13px 23px; font-weight:500; font-size:16px; }
.badgerow { display:flex; gap:8px; margin-top:2px; }
.bpill { border-radius:4px; font-size:11px; font-weight:600; text-transform:uppercase;
letter-spacing:0.2px; padding:4px 8px; }
.bpill.lime { background:#cdeba4; color:#5a8c11; }
.bpill.sale { background:#be3a43; color:#fff; }
.accordion { margin-top:auto; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; }
.acchead { padding:12px 14px; font-size:14px; font-weight:500; background:#ffffff; border-bottom:1px solid #e5e7eb; }
.acchead.on { color:#00bbff; }
.accbody { padding:0 14px 12px; font-size:12px; color:#505050; }
footer { height:48px; background:#f4f4f6; color:#505050; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; font-size:12px; border-top:1px solid #e5e7eb; }
</style></head>
<body>
<div class="shipbar">Free Delivery Over £100 — Skin Tech, Delivered</div>
<nav>
<div class="brand">Currentbody</div>
<div class="navlinks"><span>LED Masks</span><span>Hair Removal</span><span>Skincare Tech</span><span>Wellness</span></div>
<div class="navicons"><span>Search</span><span class="cartdot">2</span></div>
</nav>
<div class="wrap">
<div class="gallery">
<span class="badge-new">New</span>
<div class="device"></div>
</div>
<div class="info">
<div class="kicker">LED Light Therapy · Face Mask Series</div>
<h1>LED Light Therapy Mask, Series 2</h1>
<div class="stars">★★★★☆ <span>4.4 · 5,120 reviews</span></div>
<div class="pricerow"><span class="price">£339.00</span><span class="strike">£399.00</span></div>
<div class="buyrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Details</button>
</div>
<div class="badgerow">
<span class="bpill lime">In Stock</span>
<span class="bpill sale">Sale</span>
</div>
<div class="accordion">
<div class="acchead on">Description</div>
<div class="accbody">Clinically backed red and near-infrared LED, 10-minute daily sessions.</div>
</div>
</div>
</div>
<footer>
<span>© Currentbody</span>
<span>Delivery · Returns · About · Contact</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FDFAF5; color: #1A1714;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FDFAF5; color: #1A1714;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #1A1714; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #7A6F67; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0.06em; background: #C4622D; color: #FFFFFF;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0.06em; background: #FDFAF5; color: #1A1714;
border: 1px solid #C4622D; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #FDFAF5; color: #1A1714;
border: 1px solid #c4c1bd; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7A6F67; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; background: #f5e5d9; color: #C4622D;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#FDFAF5; font-family:'DM Sans',Arial,sans-serif; color:#3B3530; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #EDE8E1;}
.logo{font-family:Georgia,serif;font-size:24px;color:#1A1714;}
.navlinks{display:flex;gap:22px;font-size:13px;letter-spacing:0.03em;color:#1A1714;}
.hero{height:280px;display:flex;}
.herotext{width:45%;padding:36px;display:flex;flex-direction:column;justify-content:center;background:#F5EFE5;}
.h1{font-family:Georgia,serif;font-size:34px;color:#1A1714;margin:0 0 14px;line-height:1.15;}
.hsub{font-size:14px;line-height:1.6;color:#3B3530;margin:0 0 18px;max-width:300px;}
.btn{display:inline-block;background:#C4622D;color:#fff;font-size:12px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;padding:13px 26px;width:fit-content;}
.heroimg{width:55%;background:linear-gradient(135deg,#F0E8D8,#DDD5CA);position:relative;}
.paper{position:absolute;left:60px;top:70px;width:140px;height:100px;background:#fff;box-shadow:0 8px 20px rgba(26,23,20,0.1);transform:rotate(-3deg);}
.paper2{position:absolute;left:110px;top:100px;width:140px;height:100px;background:#fdfaf5;border:1px solid #DDD5CA;transform:rotate(4deg);}
.seal{position:absolute;right:80px;top:60px;width:44px;height:44px;border-radius:50%;background:#C4622D;}
.section{padding:20px 32px 0;}
.sectitle{font-family:Georgia,serif;font-size:18px;color:#1A1714;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;}
.thumb{height:110px;border-radius:4px;margin-bottom:8px;position:relative;overflow:hidden;}
.badge{position:absolute;top:8px;left:8px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#fff;padding:3px 6px;}
.cat{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:#7A6F67;}
.ptitle{font-size:14px;color:#1A1714;margin-top:4px;}
.pprice{font-family:Georgia,serif;font-size:14px;color:#3B3530;margin-top:2px;}
</style>
<div class="nav">
<div class="logo">Quill And Fox</div>
<div class="navlinks"><span>Notebooks</span><span>Stationery</span><span>Gifting</span><span>Journal</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="h1">Paper worth pressing flat.</div>
<div class="hsub">Notebooks, letterpress cards, and desk goods built from weight, grain, and texture — not decoration.</div>
<div class="btn">Shop the Collection</div>
</div>
<div class="heroimg"><div class="paper2"></div><div class="paper"></div><div class="seal"></div></div>
</div>
<div class="section">
<div class="sectitle">New This Season</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#EDE8E1;"><div class="badge" style="background:#C4622D;">New</div></div><div class="cat">Notebooks</div><div class="ptitle">Linen Journal, Copper</div><div class="pprice">$38.00</div></div>
<div class="card"><div class="thumb" style="background:#F0E8D8;"><div class="badge" style="background:#2E4A3A;">Bestseller</div></div><div class="cat">Stationery</div><div class="ptitle">Letterpress Card Set</div><div class="pprice">$24.00</div></div>
<div class="card"><div class="thumb" style="background:#DDD5CA;"></div><div class="cat">Desk</div><div class="ptitle">Oak Pen Tray</div><div class="pprice">$56.00</div></div>
<div class="card"><div class="thumb" style="background:#EDE8E1;"><div class="badge" style="background:#1A1714;">Limited</div></div><div class="cat">Gifting</div><div class="ptitle">Monogram Wax Seal Kit</div><div class="pprice">$42.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.25px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #e0dbd5; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; background: #f8f5f1; color: #7a7a7a;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f5f1; color:#4a4a4a; font-family:system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#f8f5f1;border-bottom:1px solid #e0dbd5;}
.logo{font-size:20px;font-weight:700;color:#313131;}
.navlinks{display:flex;gap:24px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:#313131;}
.cart{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#c4bdb4;}
.hero{height:260px;display:flex;align-items:center;padding:0 44px;background:#f2ede7;}
.herotext{width:440px;}
.herotext h1{font-size:34px;font-weight:700;color:#313131;margin:0 0 14px;line-height:1.2;}
.herotext p{font-size:14px;color:#7a7a7a;margin:0 0 20px;max-width:340px;line-height:1.5;}
.btn{display:inline-block;height:44px;line-height:44px;padding:0 26px;background:#313131;color:#fff;font-size:13px;font-weight:600;width:fit-content;}
.swatchwall{position:absolute;right:80px;width:230px;height:170px;display:grid;grid-template-columns:repeat(3,48px);grid-gap:8px;}
.pswatch{width:48px;height:48px;box-shadow:0 1px 3px rgba(0,0,0,.12);}
.sec{padding:24px 44px 0;position:relative;}
.sectitle{font-size:16px;font-weight:700;color:#313131;margin-bottom:16px;}
.grid{display:flex;gap:14px;}
.card{width:198px;border:1px solid #e0dbd5;padding:0;}
.thumb{height:100px;background:#f2ede7;}
.body{padding:10px;}
.pname{font-size:13px;font-weight:600;color:#313131;}
.pspec{font-size:11px;color:#7a7a7a;margin-top:3px;}
.pprice{font-size:13px;font-weight:700;color:#313131;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Lci Paper</div>
<div class="navlinks"><span>Text Weight</span><span>Cover Stock</span><span>Specialty</span><span>Envelopes</span></div>
<div class="cart">Account</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Paper, specified precisely.</h1>
<p>From 80 lb text to 130 lb cover — material expertise for studios and print shops.</p>
<div class="btn">Browse Substrates</div>
</div>
<div class="swatchwall">
<div class="pswatch" style="background:#f8f5f1;"></div><div class="pswatch" style="background:#e0dbd5;"></div><div class="pswatch" style="background:#c4bdb4;"></div>
<div class="pswatch" style="background:#fff;"></div><div class="pswatch" style="background:#efe6da;"></div><div class="pswatch" style="background:#d9cfc1;"></div>
<div class="pswatch" style="background:#f2ede7;"></div><div class="pswatch" style="background:#ded6c9;"></div><div class="pswatch" style="background:#bdb2a3;"></div>
</div>
</div>
<div class="sec">
<div class="sectitle">Featured Stocks</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#fff;"></div><div class="body"><div class="pname">Cotton Cover 130lb</div><div class="pspec">Bright White · Smooth</div><div class="pprice">$0.42/sheet</div></div></div>
<div class="card"><div class="thumb" style="background:#efe6da;"></div><div class="body"><div class="pname">Metallic Text 80lb</div><div class="pspec">Champagne · Pearlescent</div><div class="pprice">$0.58/sheet</div></div></div>
<div class="card"><div class="thumb" style="background:#f2ede7;"></div><div class="body"><div class="pname">Recycled Cover 100lb</div><div class="pspec">Kraft · Vellum Finish</div><div class="pprice">$0.35/sheet</div></div></div>
<div class="card"><div class="thumb" style="background:#d9cfc1;"></div><div class="body"><div class="pname">Linen Cover 110lb</div><div class="pspec">Natural · Woven Texture</div><div class="pprice">$0.49/sheet</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #222927;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #222927;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 900; line-height: 1.25; margin: 0; color: #222927; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666b69; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #3000ba; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #f8f8f8; color: #222927;
border: 1px solid #3000ba; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f8f8f8; color: #222927;
border: 1px solid #c2c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666b69; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #3000ba; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f8f8; font-family:'Roboto Condensed', Arial, sans-serif; color:#222927; }
*{box-sizing:border-box;}
.topstrip{height:60px;background:#222927;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Arial Narrow',sans-serif;font-weight:900;font-size:22px;color:#fff;letter-spacing:-0.5px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:700;text-transform:uppercase;color:#fff;letter-spacing:0.3px;}
.navlinks .active{color:#3000ba;}
.search{background:#f8f8f8;border-radius:9999px;padding:8px 18px;font-size:13px;color:#666b69;}
.hero{height:280px;background:#222927;display:flex;align-items:center;padding:0 32px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:60px;top:20px;width:220px;height:240px;background:linear-gradient(145deg,#3000ba,#222927 70%);border-radius:4px;}
.herotext{width:460px;z-index:2;}
.herotext h1{font-family:'Arial Narrow',sans-serif;font-weight:900;font-size:40px;color:#fff;line-height:1.1;margin:0 0 14px;letter-spacing:-0.5px;}
.herotext p{font-size:16px;color:#f0f0f0;margin:0 0 22px;max-width:380px;}
.btn{display:inline-block;background:#3000ba;color:#fff;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:12px 24px;border-radius:4px;}
.strip{background:#fff;padding:14px 32px;display:flex;gap:24px;border-bottom:1px solid #d2d2d2;}
.strip div{font-size:14px;font-weight:600;color:#666b69;}
.strip .on{color:#222927;border-bottom:2px solid #3000ba;padding-bottom:14px;}
.grid{display:flex;gap:16px;padding:20px 32px;}
.card{flex:1;background:#fff;border-radius:4px;padding:0;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#3000ba;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;border-radius:9999px;padding:3px 10px;z-index:2;}
.badge-sale{background:#c2003a;}
.thumb{height:130px;background:#f0f0f0;border-radius:4px 4px 0 0;}
.body{padding:12px;}
.ptitle{font-size:16px;font-weight:700;color:#222927;margin:0 0 6px;}
.pprice{font-size:18px;font-weight:700;color:#222927;}
.stock{display:inline-block;background:#53b82e;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;border-radius:9999px;padding:2px 8px;margin-top:6px;}
</style>
<div class="topstrip">
<div class="logo">Rogue Fitness</div>
<div class="navlinks"><div class="active">Racks</div><div>Bars</div><div>Plates</div><div>Conditioning</div></div>
<div class="search">Search 40,000 parts</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Built for maximum force transfer.</h1>
<p>500-pound squat racks and Ohio bars engineered for the athletes who trust nothing else.</p>
<div class="btn">Shop Racks</div>
</div>
</div>
<div class="strip">
<div class="on">Monster Series</div><div>Echo</div><div>Infinity</div><div>Accessories</div>
</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb"></div><div class="body"><div class="ptitle">Monster Rack RM-6</div><div class="pprice">$1,395.00</div><span class="stock">In Stock</span></div></div>
<div class="card"><div class="thumb"></div><div class="body"><div class="ptitle">Ohio Power Bar</div><div class="pprice">$325.00</div><span class="stock">In Stock</span></div></div>
<div class="card"><div class="badge badge-sale">Sale</div><div class="thumb"></div><div class="body"><div class="ptitle">Echo Bumper Plates</div><div class="pprice">$249.00</div><span class="stock">In Stock</span></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 800; line-height: 1.2; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.2px; background: #eeeeee; color: #222222;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.2px; background: #ffffff; color: #222222;
border: 1px solid #eeeeee; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #222222;
border: 1px solid #bbbbbb; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #ff6600; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eeeeee; color:#222222; box-sizing:border-box;
font-family:-apple-system,system-ui,Roboto,'Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
background:#eeeeee; }
.brand { font-family:'kanedagothic-extrabold','Arial Black','Impact',sans-serif; font-size:19px; font-weight:800; margin:0; }
.navlinks { display:flex; gap:18px; font-size:14px; font-weight:500; color:#222222; }
.util { font-size:13px; color:#666666; }
main { display:grid; grid-template-columns:380px 1fr; height:calc(640px - 56px); }
.stage { padding:22px; display:flex; flex-direction:column; gap:10px; background:#eeeeee; }
.crumb { font-size:11px; color:#999999; }
.pan { flex:1; border-radius:4px; background:#ffffff; position:relative; overflow:hidden; }
.pan::before { content:''; position:absolute; left:50%; top:50%; width:210px; height:210px; transform:translate(-50%,-50%);
background:linear-gradient(135deg,#222222,#666 40%,#ff6600 100%); box-shadow:0 16px 26px rgba(0,0,0,0.16); }
.pan::after { content:''; position:absolute; left:50%; top:50%; width:60px; height:60px; transform:translate(-50%,-50%); border-radius:50%; background:#eeeeee; }
.thumbs { display:flex; gap:8px; }
.thumb { width:48px; height:48px; border-radius:4px; background:#ffffff; }
.info { padding:22px 30px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.cat { font-size:11px; font-weight:500; color:#666666; }
h1 { font-family:'kanedagothic-extrabold','Arial Black','Impact',sans-serif; margin:0; font-size:24px; font-weight:800; line-height:1.2; }
.artist { font-size:14px; color:#666666; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:18px; font-weight:700; color:#222222; }
.badge-preorder { background:#ffcc00; color:#222222; font-size:11px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:2px 6px; border-radius:2px; }
.badge-new { background:#ff6600; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:2px 6px; border-radius:2px; }
.desc { font-size:14px; color:#333333; line-height:1.43; }
.format-row { display:flex; gap:10px; }
.chip { border-radius:9999px; padding:6px 14px; font-size:12px; font-weight:600; background:#f2f2f2; color:#333333; }
.chip.on { background:#222222; color:#fff; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#eeeeee; color:#222222; border:none; height:40px; border-radius:4px; font-size:14px; font-weight:600; letter-spacing:0.2px; }
.btn-secondary { width:150px; background:#ffffff; border:1px solid #dddddd; color:#222222; height:40px; border-radius:4px; font-size:14px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Bull Moose</p>
<div class="navlinks"><span>Movies</span><span>Music</span><span>Games</span><span>Trade-In</span></div>
<div class="util">Search Cart (1)</div>
</nav>
<main>
<div class="stage">
<div class="crumb">Bull Moose / Music / Vinyl</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">New Release · Vinyl LP</span>
<h1>Late Night Radio Waves</h1>
<div class="artist">The Coastal Sound</div>
<div class="price-row"><span class="price">$32.99</span><span class="badge-preorder">Pre-Order</span><span class="badge-new">New</span></div>
<p class="desc">180-gram audiophile vinyl pressing with gatefold jacket and printed inner sleeve. Ships on street date.</p>
<div class="format-row">
<span class="chip on">Black Vinyl</span><span class="chip">Colored Vinyl</span><span class="chip">CD</span>
</div>
<div class="cta-row">
<button class="btn-primary">Pre-Order</button>
<button class="btn-secondary">Add to Wishlist</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e9e8e0; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e9e8e0; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; background: #43b02a; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; background: #e9e8e0; color: #222222;
border: 1px solid #43b02a; border-radius: 9999px;
padding: 14px 32px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #b7b6b0; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #949069; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Source Serif 4',Georgia,serif; background:#e9e8e0; color:#555555; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:Georgia,serif;font-size:22px;color:#222222;letter-spacing:1px;}
.navlinks{display:flex;gap:20px;font-family:'Jost',sans-serif;font-size:13px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:#222222;}
.hero{height:230px;display:flex;align-items:center;padding:0 40px;}
.heroText h1{font-size:38px;color:#222222;margin:0 0 12px;line-height:1.2;}
.heroText p{font-size:15px;color:#555555;margin:0 0 18px;max-width:400px;}
.cta{display:inline-block;background:#43b02a;color:#fff;font-family:'Jost',sans-serif;font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:13px 28px;border-radius:9999px;}
.bloom{position:absolute;right:80px;top:60px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#56ad6a,#767254 90%);opacity:0.85;}
.sec{padding:20px 40px 0;}
.secTitle{font-family:'Jost',sans-serif;font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:#767254;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:196px;background:#ffffff;border-radius:20px;padding:16px;}
.thumb{height:120px;border-radius:12px;background:linear-gradient(160deg,#d4d2c2,#aaa686);margin-bottom:10px;position:relative;}
.bottle{position:absolute;left:78px;top:20px;width:26px;height:60px;border-radius:6px;background:#222222;}
.badge{display:inline-block;background:#949069;color:#fff;font-family:'Jost',sans-serif;font-size:10px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:4px 12px;border-radius:9999px;margin-bottom:8px;}
.ctitle{font-size:16px;font-weight:600;color:#222222;margin-bottom:4px;}
.cprice{font-family:'Jost',sans-serif;font-size:13px;color:#555555;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#d4d2c2;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;color:#555555;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Vyrao</div>
<div class="navlinks"><span>Fragrance</span><span>Ritual Oils</span><span>Journal</span></div>
</div>
<div class="hero">
<div class="heroText">
<h1>Scent as a Living Ritual</h1>
<p>Botanical fragrances drawn from the earth, formulated to energize and ground.</p>
<div class="cta">Discover Scents</div>
</div>
<div class="bloom"></div>
</div>
<div class="sec">
<div class="secTitle">Bestselling Fragrances</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="bottle"></div></div><div class="badge">Bestseller</div><div class="ctitle">Rising</div><div class="cprice">$185 · 50ml Eau de Parfum</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#aaa686,#767254)"><div class="bottle"></div></div><div class="badge">New</div><div class="ctitle">Ojas</div><div class="cprice">$185 · 50ml Eau de Parfum</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#58553f,#949069)"><div class="bottle"></div></div><div class="ctitle">Under My Skin</div><div class="cprice">$185 · 50ml Eau de Parfum</div></div>
</div>
</div>
<div class="footer"><span>Botanical & Cruelty-Free</span><span>Customer Care</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.75px; background: #ffc800; color: #231f20;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.75px; background: #ffffff; color: #231f20;
border: 1px solid #ffc800; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #231f20;
border: 1px solid #c8c7c7; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.25; letter-spacing: 0.75px; background: #ffc800; color: #231f20;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#231f20; box-sizing:border-box;
font-family:'akzidenz-grotesk-next', 'akzidenz-grotesk-next-pro', Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:60px; background:#231f20; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.brand { font-family:'akzidenz-grotesk-next-extend','akzidenz-grotesk-next',sans-serif; font-size:20px;
font-weight:700; letter-spacing:0.5px; margin:0; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:13px; font-weight:500; letter-spacing:0.3px; }
.navlinks span.hot { color:#ffc800; }
.navicons { font-size:15px; color:#ffc800; }
.banner { height:32px; background:#088f87; color:#ffffff; display:flex; align-items:center;
justify-content:center; font-family:'akzidenz-grotesk-next-conden','akzidenz-grotesk-next',sans-serif;
font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
.hero { height:132px; background:#231f20; color:#ffffff; display:flex; flex-direction:column;
justify-content:center; padding:0 40px; gap:6px; }
.hero h1 { font-family:'akzidenz-grotesk-next-extend','akzidenz-grotesk-next',sans-serif; font-size:32px;
font-weight:700; line-height:1.08; letter-spacing:-0.25px; margin:0; max-width:520px; }
.hero p { font-size:14px; color:#dedede; margin:0; max-width:460px; }
.hero button { margin-top:6px; align-self:flex-start; background:#ffc800; color:#231f20; border:none;
border-radius:0; padding:11px 22px; font-size:12px; font-weight:700; letter-spacing:0.75px;
text-transform:uppercase; cursor:default; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:18px 40px; background:#f0f0f0; }
.card { background:#ffffff; padding:8px; display:flex; flex-direction:column; gap:4px; position:relative; }
.thumb { position:relative; width:100%; height:120px; }
.t1 { background:linear-gradient(135deg,#e7b6a1,#c46a4d 60%,#7a3a29); }
.t2 { background:linear-gradient(135deg,#a9c9c6,#3f8b84 60%,#1d4c47); }
.t3 { background:linear-gradient(135deg,#f0dca0,#d1a231 60%,#7c5f16); }
.badge { position:absolute; top:6px; left:6px; background:#ffc800; color:#231f20; font-size:10px;
font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:3px 8px; }
.badge.sale { background:#f6e70f; }
.card .artist { font-family:'akzidenz-grotesk-next-conden','akzidenz-grotesk-next',sans-serif;
font-size:15px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; margin:4px 0 0; }
.card .title { font-size:12px; color:#3a3535; margin:0; }
.row2 { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.price { font-size:16px; font-weight:700; }
.edition { font-size:10px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#888888;
border:1px solid #dedede; padding:2px 7px; }
footer { background:#231f20; color:#ffffff; padding:0 40px; height:78px; border-top:3px solid #ffc800;
display:flex; align-items:center; justify-content:space-between; }
.footcol span { display:block; font-size:11px; color:#dedede; line-height:1.9; }
.footcol .head { font-family:'akzidenz-grotesk-next-conden','akzidenz-grotesk-next',sans-serif;
font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:#ffffff; margin-bottom:2px; }
</style></head>
<body>
<nav>
<p class="brand">Artspace</p>
<div class="navlinks"><span>Photography</span><span>Painting</span><span>Prints</span><span class="hot">New Arrivals</span></div>
<div class="navicons">⚲</div>
</nav>
<div class="banner">Artist of the Week — Curated Picks</div>
<section class="hero">
<h1>Own an Original</h1>
<p>Limited-run prints and originals from emerging and established artists.</p>
<button>Shop the Collection</button>
</section>
<section class="cards">
<div class="card">
<div class="thumb t1"><span class="badge">£320</span></div>
<p class="artist">Dana Wolfe</p>
<p class="title">Terracotta Study I</p>
<div class="row2"><span class="edition">12 of 150</span><span class="price">£320</span></div>
</div>
<div class="card">
<div class="thumb t2"><span class="badge sale">Sale</span></div>
<p class="artist">Ren Okafor</p>
<p class="title">Deep Water Series</p>
<div class="row2"><span class="edition">40 of 200</span><span class="price">£210</span></div>
</div>
<div class="card">
<div class="thumb t3"><span class="badge">£455</span></div>
<p class="artist">Priya Nair</p>
<p class="title">Gold Field Triptych</p>
<div class="row2"><span class="edition">3 of 25</span><span class="price">£455</span></div>
</div>
</section>
<footer>
<div class="footcol"><span class="head">About</span><span>Our Story</span></div>
<div class="footcol"><span class="head">Artists</span><span>Browse All</span></div>
<div class="footcol"><span class="head">Categories</span><span>Photography · Painting</span></div>
<div class="footcol"><span class="head">Artspace</span><span>© Artspace</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.3px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #3db549; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #222222;
border: 1px solid #3db549; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.33; letter-spacing: 0.2px; background: #3db549; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif; }
* { box-sizing:border-box; }
.dark { background:#161616; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { color:#fff; font-size:19px; font-weight:700; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#fff; font-size:15px; font-weight:500; }
.navcta { background:#3db549; color:#fff; border-radius:8px; padding:10px 20px; font-size:13px; font-weight:600; }
.hero { min-height:250px; display:flex; align-items:center; padding:0 32px; gap:30px; }
.heroText { flex:1; }
.headline { color:#fff; font-size:44px; font-weight:700; letter-spacing:-1.2px; line-height:1.08; margin-bottom:12px; }
.headline span { color:#3db549; }
.sub { color:#c2c2c2; font-size:16px; line-height:1.5; max-width:340px; margin-bottom:18px; }
.heroBtns { display:flex; gap:12px; }
.btnPrimary { background:#3db549; color:#fff; border-radius:8px; padding:14px 24px; font-size:15px; font-weight:600; }
.btnOutline { background:transparent; border:1.5px solid #fff; color:#fff; border-radius:8px; padding:12px 22px; font-size:15px; font-weight:600; }
.heroImg { flex:1; height:170px; border-radius:12px; position:relative;
background:radial-gradient(circle at 50% 60%,#1e1e1e,#161616 70%); }
.heroImg::after { content:''; position:absolute; left:50%; top:50%; width:120px; height:70px; margin:-35px 0 0 -60px;
background:linear-gradient(150deg,#3db549,#2f9a3b); border-radius:10px; }
.dot { position:absolute; top:16px; right:16px; width:8px; height:8px; border-radius:50%; background:#3db549; }
.section { padding:24px 32px 0; background:#fff; }
.section h2 { font-size:24px; font-weight:600; margin-bottom:16px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#f5f5f5; border-radius:8px; padding:16px; }
.photo { aspect-ratio:4/3; border-radius:8px; margin-bottom:10px; position:relative; }
.c1 .photo { background:linear-gradient(150deg,#3db549,#1e1e1e); }
.c2 .photo { background:linear-gradient(150deg,#6b6b6b,#222222); }
.c3 .photo { background:linear-gradient(150deg,#2f9a3b,#0d0d0d); }
.featureBadge { position:absolute; top:8px; left:8px; background:#3db549; color:#fff; font-size:12px; padding:4px 10px; border-radius:4px; }
.name { font-size:16px; font-weight:600; }
.desc { font-size:14px; color:#3a3a3a; margin:4px 0; }
.price { font-size:16px; font-weight:600; }
</style></head>
<body>
<div class="dark">
<nav>
<div class="brand">Gnome</div>
<div class="navlinks"><span>Mowers</span><span>Accessories</span><span>App</span><span>Support</span></div>
<div class="navcta">Get Started</div>
</nav>
<div class="hero">
<div class="heroText">
<div class="headline">Your lawn, <span>on autopilot.</span></div>
<div class="sub">GPS-mapped robotic mowing that just works — no perimeter wire required.</div>
<div class="heroBtns"><div class="btnPrimary">Shop Mowers</div><div class="btnOutline">Compare Models</div></div>
</div>
<div class="heroImg"><div class="dot"></div></div>
</div>
</div>
<div class="section">
<h2>The Lineup</h2>
<div class="grid">
<div class="card c1"><div class="photo"><div class="featureBadge">GPS Mapping</div></div><div class="name">Gnome Mini</div><div class="desc">For yards up to 0.25 acres</div><div class="price">$1,299</div></div>
<div class="card c2"><div class="photo"></div><div class="name">Gnome Standard</div><div class="desc">For yards up to 0.5 acres</div><div class="price">$1,799</div></div>
<div class="card c3"><div class="photo"></div><div class="name">Gnome Pro</div><div class="desc">For yards up to 1 acre</div><div class="price">$2,499</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #2c2c2c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #2c2c2c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #2c2c2c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #335522; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: transparent; color: #335522;
border: 1px solid #335522; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2c2c2c;
border: 1px solid #c5c5c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #335522; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f8f8; color:#555555; font-family:'Lato','Helvetica Neue',sans-serif; }
*{box-sizing:border-box;}
.nav{height:70px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid #cccccc;}
.logo{font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:#2c2c2c;letter-spacing:.5px;}
.navlinks{position:absolute;right:32px;top:50%;transform:translateY(-50%);display:flex;gap:22px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#2c2c2c;}
.navicons{position:absolute;left:32px;top:50%;transform:translateY(-50%);font-size:13px;color:#777777;}
.hero{height:220px;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;background:linear-gradient(180deg,#f8f8f8,#f0f0f0);}
.hero h1{font-family:'Montserrat',sans-serif;font-size:30px;font-weight:700;color:#2c2c2c;margin:0 0 8px;}
.hero p{font-size:15px;color:#777777;margin:0 0 16px;max-width:420px;}
.cta{display:inline-block;background:#335522;color:#fff;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:14px 30px;border-radius:9999px;}
.grid{display:flex;gap:16px;padding:14px 32px 0;justify-content:center;}
.card{width:200px;background:#fff;border-radius:12px;overflow:hidden;text-align:center;}
.thumb{height:140px;}
.ptitle{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:600;color:#2c2c2c;margin:10px 0 2px;}
.pprice{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:700;color:#2c2c2c;margin-bottom:12px;}
.pprice.sale{color:#a16a00;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#2c2c2c;color:#f8f8f8;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="navicons">Search</div>
<div class="logo">Stringworks</div>
<div class="navlinks"><span>Violins</span><span>Violas</span><span>Cellos</span><span>Bows</span></div>
</div>
<div class="hero">
<h1>Precision-built, not dust-collected.</h1>
<p>Modern instrument making for players who expect the workshop to be as serious as the stage.</p>
<div class="cta">Shop Instruments</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#335522,#a16a00)"></div><div class="ptitle">Concert Violin 4/4</div><div class="pprice">$3,200</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#264418,#335522)"></div><div class="ptitle">Studio Viola 15.5in</div><div class="pprice sale">$2,850</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#a16a00,#335522)"></div><div class="ptitle">Carbon Bow Pro</div><div class="pprice">$680</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#555555,#335522)"></div><div class="ptitle">Chamber Cello 4/4</div><div class="pprice">$5,400</div></div>
</div>
<div class="footer"><span>© StringWorks — Modern Instrument Makers</span><span>Sizing Guide Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f4ef; color: #282521;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f4ef; color: #282521;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.2; margin: 0; color: #282521; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.6px; background: #282521; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.6px; background: transparent; color: #282521;
border: 1px solid #282521; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #282521;
border: 1px solid #c2c0bc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #282521; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f4ef; font-family:'Manrope',sans-serif; color:#282521; }
*{box-sizing:border-box;}
.promo{background:#ebe8dd;text-align:center;font-size:13px;padding:8px 0;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e5e7eb;}
.logo{font-family:Georgia,serif;font-size:20px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.hero{background:#ebe8dd;padding:34px 40px;display:flex;align-items:center;justify-content:space-between;min-height:190px;}
.herotext h1{font-family:Georgia,serif;font-size:44px;font-weight:400;line-height:1.1;margin:0 0 14px;max-width:420px;}
.btn{display:inline-block;background:#282521;color:#fff;font-size:15px;font-weight:600;letter-spacing:0.6px;text-transform:uppercase;padding:14px 28px;border-radius:8px;}
.outdoorimg{width:220px;height:150px;border-radius:12px;background:linear-gradient(135deg,#657567,#9fe3ba 70%);}
.chips{display:flex;gap:8px;padding:16px 40px 0;}
.chip{background:#f7f7f7;border:1px solid #d1d5db;border-radius:9999px;font-size:13px;padding:8px 16px;}
.chip.active{background:#282521;color:#fff;border:none;}
.grid{display:flex;gap:14px;padding:16px 40px 0;}
.card{flex:1;background:#fff;border-radius:12px;overflow:hidden;}
.thumb{aspect-ratio:1/1;position:relative;}
.wbadge{position:absolute;top:10px;left:10px;background:#282521;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:4px 10px;border-radius:9999px;}
.body{padding:12px;}
.pname{font-size:16px;font-weight:600;}
.pcolor{font-size:12px;color:#6b7280;margin-top:2px;}
.pprice{font-size:18px;font-weight:700;margin-top:6px;}
</style>
<div class="promo">Free shipping over $99 · Rated for rain, snow, and spilled rosé</div>
<div class="nav">
<div class="logo">Ruggable Outdoor 2</div>
<div class="navlinks"><div>Outdoor Rugs</div><div>Patio</div><div>How It Works</div></div>
</div>
<div class="hero">
<div class="herotext"><h1>Made for the patio. Washable anyway.</h1><div class="btn">Shop Outdoor</div></div>
<div class="outdoorimg"></div>
</div>
<div class="chips"><div class="chip active">All Outdoor</div><div class="chip">Pile Height</div><div class="chip">Size</div><div class="chip">Color</div></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#dee5d4"><span class="wbadge">Washable</span></div><div class="body"><div class="pname">Sundial Outdoor Rug</div><div class="pcolor">Sand & Rust</div><div class="pprice">$139.00</div></div></div>
<div class="card"><div class="thumb" style="background:#e5ded4"><span class="wbadge">Washable</span></div><div class="body"><div class="pname">Palma Stripe Runner</div><div class="pcolor">Sage Green</div><div class="pprice">$99.00</div></div></div>
<div class="card"><div class="thumb" style="background:#d4e0e5"><span class="wbadge">Washable</span></div><div class="body"><div class="pname">Coastal Weave</div><div class="pcolor">Mist Blue</div><div class="pprice">$159.00</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; background: #cc1a1a; color: #ffffff;
border: none; border-radius: 2px; padding: 10px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; background: #ffffff; color: #111111;
border: 1px solid #cc1a1a; border-radius: 2px;
padding: 9px 17px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #e06b00; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; }
* { box-sizing:border-box; }
.util-bar { height:24px; background:#111111; color:#eee; font-size:11px; display:flex; align-items:center; padding:0 32px; gap:20px; }
nav { height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#1a1a1a; border-bottom:2px solid #cc1a1a; }
.brand { font-size:15px; font-weight:700; color:#cc1a1a; margin:0; }
.navlinks { display:flex; gap:18px; font-size:12px; font-weight:700; color:#fff; }
.navlinks span.on { color:#cc1a1a; }
.sale-banner { height:26px; background:#cc1a1a; color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
main { display:grid; grid-template-columns:340px 1fr; height:calc(640px - 94px); }
.stage { padding:20px; border-right:1px solid #dddddd; display:flex; flex-direction:column; gap:8px; background:#f5f5f5; }
.panel { flex:1; position:relative; overflow:hidden; border-radius:4px; background:linear-gradient(160deg,#1a1a1a,#2e2e2e); }
.panel::before { content:''; position:absolute; left:14%; top:8%; width:72%; height:84%; background:linear-gradient(135deg,#cc1a1a,#7a0d0d); border:2px solid #f5a623; box-shadow:0 8px 20px rgba(0,0,0,0.4); }
.panel::after { content:'2024'; position:absolute; left:22%; top:16%; color:#fff; font-weight:900; font-size:20px; font-family:'Arial Black',Arial,sans-serif; }
.thumbs { display:flex; gap:6px; }
.thumb { width:44px; height:44px; background:#e5e5e5; border:1px solid #ddd; }
.info { padding:20px 28px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.sku { font-family:'Courier New',monospace; font-size:12px; color:#666666; }
h1 { margin:0; font-size:18px; font-weight:700; line-height:1.3; }
.badge-row { display:flex; gap:6px; }
.badge-new { background:#1560a8; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; padding:2px 6px; border-radius:2px; }
.badge-deal { background:#e06b00; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; padding:2px 6px; border-radius:2px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-family:'Arial Black',Arial,sans-serif; font-size:24px; color:#cc1a1a; }
.strike { font-size:12px; color:#666666; text-decoration:line-through; }
.stock { font-size:12px; font-weight:700; color:#1a8a3a; }
.desc { font-size:13px; color:#2e2e2e; line-height:1.5; }
.cta-row { display:flex; gap:8px; margin-top:auto; }
.btn-primary { flex:1; height:40px; background:#cc1a1a; color:#fff; border:none; border-radius:2px; font-size:14px; font-weight:700; }
.btn-secondary { width:130px; height:40px; background:#fff; border:1px solid #dddddd; color:#111111; border-radius:2px; font-size:13px; font-weight:700; }
</style></head>
<body>
<div class="util-bar">Track Order My Account 1-888-555-0199</div>
<nav>
<p class="brand">Blowout Cards</p>
<div class="navlinks"><span class="on">Football</span><span>Basketball</span><span>Baseball</span><span>Forums</span></div>
</nav>
<div class="sale-banner">NEW RELEASE — 2024 Panini Prizm Football now shipping</div>
<main>
<div class="stage">
<div class="panel"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="sku">SKU: PPFB24-HOB</span>
<h1>2024 Panini Prizm Football Hobby Box</h1>
<div class="badge-row"><span class="badge-new">New Release</span><span class="badge-deal">Hot Deal</span></div>
<div class="price-row"><span class="price">$299.99</span><span class="strike">$339.99</span></div>
<div class="stock">In Stock — Ships Same Day</div>
<p class="desc">4 cards per pack, 6 packs per box — 2 autographs or memorabilia hits guaranteed per box. Chase Rookie Prizms and Color Blast parallels.</p>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Quick View</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ed1d24; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ed1d24; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c8161c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ed1d24; color: #000000;
border: 1px solid #c8161c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ed1d24; color: #f5f5f5;
border: 1px solid #ee4045; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e71c23; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:"Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; border-bottom:1px solid #e0e0e0; }
.logo { width:34px; height:34px; background:#ed1d24; color:#fff; font-size:11px; font-weight:700;
display:flex; align-items:center; justify-content:center; text-align:center; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:20px 30px; }
.tile { display:flex; flex-direction:column; }
.tile .img { aspect-ratio:3/4; background:linear-gradient(160deg,#f5f5f5,#e0e0e0); position:relative; }
.tile .flag { position:absolute; top:0; left:0; background:#ed1d24; color:#fff; font-size:11px; font-weight:700;
padding:2px 6px; letter-spacing:0.5px; }
.tile .flag.black { background:#1a1a1a; }
.tile .info { padding:8px 0; }
.tile .name { font-size:14px; font-weight:600; }
.tile .price { font-size:16px; font-weight:700; margin-top:2px; }
.tile .price.sale { color:#ed1d24; }
.tile .old { font-size:12px; color:#999999; text-decoration:line-through; margin-right:6px; }
.swatches { display:flex; gap:4px; margin-top:6px; }
.sw { width:14px; height:14px; }
.banner { background:#1a1a1a; color:#fff; text-align:center; font-size:13px; padding:8px; }
</style></head>
<body>
<div class="banner">LIMITED OFFER — HEATTECH from $9.90</div>
<nav>
<div class="logo">Uniqlo</div>
<div class="navlinks"><span>WOMEN</span><span>MEN</span><span>KIDS</span><span>LIFEWEAR</span></div>
</nav>
<div class="grid">
<div class="tile"><div class="img"><span class="flag">SALE</span></div><div class="info"><div class="name">Ultra Light Down Jacket</div><div class="price sale"><span class="old">$79.90</span>$59.90</div><div class="swatches"><div class="sw" style="background:#1a1a1a"></div><div class="sw" style="background:#ed1d24"></div><div class="sw" style="background:#999"></div></div></div></div>
<div class="tile"><div class="img"><span class="flag black">NEW</span></div><div class="info"><div class="name">AIRism Cotton T-Shirt</div><div class="price">$14.90</div><div class="swatches"><div class="sw" style="background:#fff;border:1px solid #ccc"></div><div class="sw" style="background:#1a1a1a"></div></div></div></div>
<div class="tile"><div class="img"></div><div class="info"><div class="name">HEATTECH Crew Neck</div><div class="price">$19.90</div><div class="swatches"><div class="sw" style="background:#333"></div><div class="sw" style="background:#ccc"></div></div></div></div>
<div class="tile"><div class="img"><span class="flag">SALE</span></div><div class="info"><div class="name">Wide Fit Trousers</div><div class="price sale"><span class="old">$49.90</span>$34.90</div><div class="swatches"><div class="sw" style="background:#5a4632"></div><div class="sw" style="background:#1a1a1a"></div></div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #3984c6; color: #ffffff;
border: none; border-radius: 6px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #ffffff; color: #1a1a1a;
border: 1px solid #3984c6; border-radius: 6px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.2px; background: #3984c6; color: #ffffff;
border-radius: 12px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#2d2d2d; box-sizing:border-box;
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#ffffff; border-bottom:1px solid #e8e8e8; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.brand { font-size:20px; font-weight:600; color:#1a1a1a; }
.search-pill { width:280px; height:44px; border-radius:9999px; background:#f5f5f5; border:1px solid #d4d4d4; font-size:14px; color:#9e9e9e;
display:flex; align-items:center; padding:0 20px; }
.cart-icon { width:26px; height:22px; border:2px solid #1a1a1a; border-radius:3px; }
.catbadges { display:flex; gap:10px; padding:14px 32px; }
.catb { background:#3984c6; color:#fff; font-size:11px; font-weight:600; text-transform:uppercase; padding:4px 14px; border-radius:12px; }
.catb.off { background:#f5f5f5; color:#6b6b6b; }
.section-header { font-size:24px; font-weight:600; color:#1a1a1a; padding:12px 32px 8px; }
.grid { display:flex; gap:16px; padding:0 32px; }
.card { flex:1; background:#ffffff; border-radius:8px; box-shadow:0 0 0 1px #f0f0f0; overflow:hidden; position:relative; }
.card .art { height:96px; background:linear-gradient(150deg,#3984c6,#1a1a1a); }
.fmtbadge { position:absolute; top:8px; left:8px; font-size:12px; color:#fff; padding:2px 8px; border-radius:4px; }
.fmtbadge.lp { background:#3984c6; } .fmtbadge.cd { background:#6b6b6b; } .fmtbadge.s7 { background:#e63946; }
.card .body { padding:10px 14px 14px; }
.card .title { font-size:14px; font-weight:600; }
.card .artist { font-size:13px; color:#6b6b6b; margin-bottom:6px; }
.card .price { font-size:16px; font-weight:600; }
footer { position:absolute; bottom:0; left:0; right:0; height:88px; background:#1a1a1a; color:#fff; display:flex;
align-items:center; justify-content:space-between; padding:0 32px; }
footer .col { font-size:12px; color:#9e9e9e; line-height:1.9; }
footer .col b { display:block; color:#fff; margin-bottom:3px; }
.wrap { position:relative; height:640px; }
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="brand">DR Strange Records</div>
<div class="search-pill">Search artist, title, or catalog #...</div>
<div class="cart-icon"></div>
</nav>
<div class="catbadges">
<div class="catb">Rock</div><div class="catb off">Jazz</div><div class="catb off">Soul</div><div class="catb off">Punk</div><div class="catb off">Metal</div>
</div>
<div class="section-header">Recently Added</div>
<div class="grid">
<div class="card"><span class="fmtbadge lp">LP</span><div class="art"></div><div class="body"><div class="title">Solar Wind Sessions</div><div class="artist">The Argent Sun</div><div class="price">$26.00</div></div></div>
<div class="card"><span class="fmtbadge cd">CD</span><div class="art"></div><div class="body"><div class="title">Static Bloom</div><div class="artist">Coral Halo</div><div class="price">$14.00</div></div></div>
<div class="card"><span class="fmtbadge s7">7"</span><div class="art"></div><div class="body"><div class="title">Wolf Hour b/w Midnight Drive</div><div class="artist">Rustbelt Saints</div><div class="price">$9.00</div></div></div>
<div class="card"><span class="fmtbadge lp">LP</span><div class="art"></div><div class="body"><div class="title">Concrete Garden</div><div class="artist">Junebug & the Static</div><div class="price">$29.00</div></div></div>
</div>
<footer>
<div class="col"><b>Store</b>New Arrivals<br>Rare & Used</div>
<div class="col"><b>Info</b>Store Policies<br>Sell Your Records</div>
<div class="col"><b>DR Strange Records</b>© Browse the stacks.</div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0f0f0; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0f0f0; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 1px; background: #8c564b; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 1px; background: #f0f0f0; color: #121212;
border: 1px solid #8c564b; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #b8b8b8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #8c564b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f0f0f0; color:#2d2d2d; font-family:'Futura','Jost',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid #ddd4d1;background:#f0f0f0;}
.logo{font-family:'Bodoni Moda','Didot',Georgia,serif;font-size:24px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;}
.navlinks{position:absolute;left:36px;display:flex;gap:22px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;}
.cart{position:absolute;right:36px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8c564b;}
.hero{height:300px;display:flex;background:#fff;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;}
.hkicker{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#413389;margin-bottom:12px;}
.herotext h1{font-family:'Bodoni Moda',Georgia,serif;font-size:32px;font-weight:600;color:#121212;margin:0 0 14px;line-height:1.2;}
.herotext p{font-size:14px;color:#2d2d2d;margin:0 0 22px;max-width:300px;line-height:1.5;}
.btn{display:inline-block;height:48px;line-height:48px;padding:0 30px;background:#8c564b;color:#fff;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:8px;width:fit-content;}
.heroimg{width:54%;position:relative;background:linear-gradient(160deg,#f0f0f0,#d9cfc9 55%,#8c564b);overflow:hidden;}
.bottle{position:absolute;left:120px;bottom:30px;width:56px;height:150px;border-radius:12px 12px 6px 6px;background:linear-gradient(180deg,#fff,#e8e2de);border:1px solid #d9cfc9;}
.cap{position:absolute;left:132px;bottom:172px;width:32px;height:20px;border-radius:4px;background:#8c564b;}
.label{position:absolute;left:130px;bottom:70px;width:36px;height:60px;background:#8c564b;opacity:.15;border-radius:4px;}
.sec{padding:24px 40px 0;}
.sectitle{font-family:'Bodoni Moda',Georgia,serif;font-size:19px;font-weight:600;margin-bottom:16px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#fff;border-radius:12px;padding:12px;}
.thumb{height:100px;border-radius:8px;background:#f0f0f0;position:relative;}
.tbottle{position:absolute;left:78px;bottom:10px;width:24px;height:70px;border-radius:6px 6px 3px 3px;background:#fff;border:1px solid #ddd4d1;}
.pname{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-top:10px;}
.pprice{font-size:13px;color:#8c564b;font-weight:700;margin-top:4px;}
</style>
<div class="nav">
<div class="navlinks"><span>Shop</span><span>Fragrance</span></div>
<div class="logo">Laundress</div>
<div class="cart">Cart</div>
</div>
<div class="hero">
<div class="herotext">
<div class="hkicker">Est. Apothecary Ritual</div>
<h1>Laundry, treated as a ritual of care</h1>
<p>Fine fabric care crafted for the pieces you keep for years.</p>
<div class="btn">Shop the Collection</div>
</div>
<div class="heroimg"><div class="bottle"></div><div class="cap"></div><div class="label"></div></div>
</div>
<div class="sec">
<div class="sectitle">Signature Detergents</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="tbottle"></div></div><div class="pname">Delicate Wash</div><div class="pprice">$22</div></div>
<div class="card"><div class="thumb"><div class="tbottle"></div></div><div class="pname">Classic Detergent</div><div class="pprice">$28</div></div>
<div class="card"><div class="thumb"><div class="tbottle"></div></div><div class="pname">Wool & Cashmere Shampoo</div><div class="pprice">$24</div></div>
<div class="card"><div class="thumb"><div class="tbottle"></div></div><div class="pname">Fabric Fresh Spray</div><div class="pprice">$18</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fa0050; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fa0050; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e00048; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fa0050; color: #000000;
border: 1px solid #e00048; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fa0050; color: #f5f5f5;
border: 1px solid #f9276a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f6004f; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:Pretendard, "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.app { position:relative; width:960px; height:640px; }
/* ---- Top tabs ---- */
.topbar { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 24px;
border-bottom:1px solid #ececef; background:#ffffff; }
.brand { font-size:19px; font-weight:800; letter-spacing:-0.3px; color:#fa0050; }
.toptabs { display:flex; gap:22px; }
.toptabs span { font-size:14px; font-weight:600; color:#999999; padding:6px 0; position:relative; }
.toptabs span.active { color:#fa0050; }
.toptabs span.active::after { content:''; position:absolute; left:0; right:0; bottom:-11px; height:2px; background:#fa0050; }
.searchicon { width:34px; height:34px; border-radius:999px; background:#f5f5f7; }
/* ---- Search field ---- */
.searchwrap { padding:14px 24px 6px; }
.searchfield { background:#f5f5f7; border-radius:12px; padding:12px 16px; font-size:14px; color:#bbbbbb; }
/* ---- Category row ---- */
.catrow { display:flex; gap:14px; padding:14px 24px 6px; }
.cattile { width:64px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.cattile .icon { width:52px; height:52px; border-radius:16px; background:#f5f5f7; position:relative; }
.cattile .icon::before { content:''; position:absolute; inset:14px; border-radius:10px; }
.cattile.c1 .icon::before { background:linear-gradient(135deg,#ffb37a,#ff7a45); }
.cattile.c2 .icon::before { background:linear-gradient(135deg,#ffd76a,#ffb300); }
.cattile.c3 .icon::before { background:linear-gradient(135deg,#8fd3a0,#3fa860); }
.cattile.c4 .icon::before { background:linear-gradient(135deg,#8fc7ff,#3f8fe0); }
.cattile.c5 .icon::before { background:linear-gradient(135deg,#f6a3c2,#e0538c); }
.cattile span.lbl { font-size:12px; font-weight:600; color:#333333; }
/* ---- Promo banner ---- */
.promo { margin:12px 24px 4px; height:64px; border-radius:16px; padding:14px 18px;
background:linear-gradient(100deg,#fff0f5,#ffe3ec); display:flex; align-items:center; justify-content:space-between; }
.promo .txt { font-size:15px; font-weight:700; color:#1a1a1a; }
.promo .sub { font-size:12px; color:#999999; margin-top:3px; font-weight:400; }
.promo .badge { background:#fa0050; color:#fff; font-size:11px; font-weight:700; border-radius:6px; padding:4px 9px; }
/* ---- Section heading ---- */
.sect { padding:16px 24px 4px; font-size:17px; font-weight:700; color:#1a1a1a; }
/* ---- Restaurant cards ---- */
.cards { display:flex; gap:14px; padding:8px 24px 0; }
.rcard { flex:1; background:#ffffff; border-radius:16px; box-shadow:0px 2px 8px rgba(0,0,0,0.06); overflow:hidden; }
.rcard .photo { height:96px; position:relative; }
.rc1 .photo { background:linear-gradient(135deg,#ffcf8a,#ff8a3d); }
.rc2 .photo { background:linear-gradient(135deg,#a7e0b8,#4fae6c); }
.rc3 .photo { background:linear-gradient(135deg,#ffc1cf,#ff6f92); }
.rcard .disc { position:absolute; top:8px; left:8px; background:#fa0050; color:#fff; font-size:10px; font-weight:700;
border-radius:6px; padding:2px 6px; }
.rcard .body { padding:10px 12px 12px; }
.rcard .name { font-size:14px; font-weight:600; color:#1a1a1a; }
.rcard .meta { display:flex; align-items:center; gap:4px; font-size:11px; color:#999999; margin-top:4px; }
.rcard .star { color:#ffb300; font-weight:700; }
.rcard .row2 { font-size:11px; color:#999999; margin-top:3px; }
/* ---- Sticky cart bar ---- */
.cartbar { position:absolute; left:0; right:0; bottom:0; height:76px; background:#ffffff;
border-top:1px solid #ececef; box-shadow:0px -2px 12px rgba(0,0,0,0.06);
display:flex; align-items:center; padding:0 24px; gap:14px; }
.cartbtn { flex:1; height:52px; border-radius:12px; background:#fa0050; color:#fff; font-size:16px; font-weight:600;
display:flex; align-items:center; justify-content:space-between; padding:0 20px; }
.cartbtn .count { background:rgba(255,255,255,0.25); border-radius:999px; width:22px; height:22px; font-size:12px;
display:flex; align-items:center; justify-content:center; font-weight:700; }
.cartbtn .total { font-variant-numeric:tabular-nums; }
.bottomnav { position:absolute; right:24px; bottom:88px; display:flex; gap:18px; }
.navicon { display:flex; flex-direction:column; align-items:center; gap:3px; }
.navicon .dot { width:20px; height:20px; border-radius:6px; background:#ececef; }
.navicon.active .dot { background:#fa0050; }
.navicon span { font-size:10px; color:#bbbbbb; }
.navicon.active span { color:#fa0050; font-weight:600; }
</style></head>
<body>
<div class="app">
<div class="topbar">
<span class="brand">Yogiyo</span>
<div class="toptabs">
<span class="active">Delivery</span>
<span>Takeout</span>
<span>Store Mart</span>
</div>
<div class="searchicon"></div>
</div>
<div class="searchwrap">
<div class="searchfield">Search food or restaurants</div>
</div>
<div class="catrow">
<div class="cattile c1"><div class="icon"></div><span class="lbl">Chicken</span></div>
<div class="cattile c2"><div class="icon"></div><span class="lbl">Pizza</span></div>
<div class="cattile c3"><div class="icon"></div><span class="lbl">Korean</span></div>
<div class="cattile c4"><div class="icon"></div><span class="lbl">Japanese</span></div>
<div class="cattile c5"><div class="icon"></div><span class="lbl">Solo Meal</span></div>
</div>
<div class="promo">
<div>
<div class="txt">Free delivery this week</div>
<div class="sub">On orders over 15,000 won near you</div>
</div>
<span class="badge">EVENT</span>
</div>
<div class="sect">Yogiyo picks for you</div>
<div class="cards">
<div class="rcard rc1">
<div class="photo"><span class="disc">20% OFF</span></div>
<div class="body">
<div class="name">Golden Fried Chicken</div>
<div class="meta"><span class="star">★ 4.8</span><span>(2,310)</span></div>
<div class="row2">25 min · Min 12,000 · Fee 2,000</div>
</div>
</div>
<div class="rcard rc2">
<div class="photo"><span class="disc">FREE DELIV.</span></div>
<div class="body">
<div class="name">Seoul Home Kitchen</div>
<div class="meta"><span class="star">★ 4.9</span><span>(1,884)</span></div>
<div class="row2">18 min · Min 10,000 · Fee 0</div>
</div>
</div>
<div class="rcard rc3">
<div class="photo"><span class="disc">COUPON</span></div>
<div class="body">
<div class="name">Solo Bibim House</div>
<div class="meta"><span class="star">★ 4.7</span><span>(956)</span></div>
<div class="row2">22 min · Min 9,000 · Fee 1,500</div>
</div>
</div>
</div>
<div class="cartbar">
<div class="cartbtn"><span>Order now</span><span class="total">28,500 won</span><span class="count">2</span></div>
</div>
<div class="bottomnav">
<div class="navicon active"><div class="dot"></div><span>Home</span></div>
<div class="navicon"><div class="dot"></div><span>Search</span></div>
<div class="navicon"><div class="dot"></div><span>Saved</span></div>
<div class="navicon"><div class="dot"></div><span>Orders</span></div>
<div class="navicon"><div class="dot"></div><span>My</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #10a37f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #10a37f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a7f64; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #10a37f; color: #000000;
border: 1px solid #1a7f64; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #10a37f; color: #f5f5f5;
border: 1px solid #35b092; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #129d7b; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0d0d0d; box-sizing:border-box;
font-family:"Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; width:960px; height:640px; }
/* Sidebar — dark-mode-native surface, as canonical to OpenAI as the light page */
.side { width:260px; height:640px; background:#171717; color:#ececec; flex-shrink:0;
display:flex; flex-direction:column; padding:16px 12px; gap:4px; }
.side .new { background:transparent; border:1px solid #3e3e42; color:#ececec; border-radius:12px;
padding:10px 14px; font-size:14px; font-weight:500; text-align:left; margin-bottom:14px; }
.side .item { padding:9px 12px; border-radius:8px; font-size:13px; color:#b4b4b4; }
.side .item.active { background:#2f2f2f; color:#ececec; }
.side .label { font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:#6e6e80;
padding:14px 12px 6px; }
.side .foot { margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px 12px;
border-top:1px solid #3e3e42; }
.avatar { width:26px; height:26px; border-radius:9999px; background:#10a37f; flex-shrink:0; }
.side .foot span { font-size:13px; color:#ececec; }
/* Main column */
.main { flex:1; display:flex; flex-direction:column; height:640px; background:#ffffff; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #e5e5e5; flex-shrink:0; }
.modelpick { display:flex; align-items:center; gap:6px; font-size:15px; font-weight:600; }
.modelpick .badge { background:#ececec; color:#40414f; font-size:12px; font-weight:500;
padding:2px 8px; border-radius:6px; }
.navbtn { border:1px solid #d1d1d1; background:#ffffff; color:#0d0d0d; border-radius:9999px;
padding:8px 16px; font-size:13px; font-weight:500; }
.thread { flex:1; padding:36px 0 12px; overflow:hidden; display:flex; flex-direction:column;
align-items:center; }
.measure { width:100%; max-width:560px; padding:0 8px; }
.turn-user { display:flex; justify-content:flex-end; margin-bottom:22px; }
.bubble { background:#f7f7f8; color:#0d0d0d; border-radius:18px; padding:10px 16px;
font-size:15px; line-height:1.6; max-width:78%; }
.turn-ai { margin-bottom:8px; }
.ai-text { font-size:15px; line-height:1.6; color:#0d0d0d; }
.ai-text p { margin:0 0 12px; }
.ai-text .cursor { display:inline-block; width:8px; height:16px; background:#0d0d0d;
vertical-align:text-bottom; opacity:0.85; border-radius:1px; }
.composer-wrap { padding:0 0 22px; display:flex; justify-content:center; flex-shrink:0; }
.composer { width:100%; max-width:560px; background:#ffffff; border:1px solid #d1d1d1;
border-radius:26px; padding:14px 18px; font-size:15px; color:#9b9b9b;
display:flex; align-items:center; justify-content:space-between;
box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.composer .send { width:30px; height:30px; border-radius:9999px; background:#0d0d0d;
flex-shrink:0; }
.hint { text-align:center; font-size:11px; color:#b4b4b4; margin-top:10px; }
</style></head>
<body>
<div class="shell">
<aside class="side">
<button class="new">+ New chat</button>
<div class="label">Today</div>
<div class="item active">Quarterly roadmap outline</div>
<div class="item">Rewrite onboarding email</div>
<div class="label">Previous 7 days</div>
<div class="item">API rate limit question</div>
<div class="item">Summarize research paper</div>
<div class="item">Trip planning — Kyoto</div>
<div class="foot"><div class="avatar"></div><span>Alex Kim</span></div>
</aside>
<div class="main">
<nav>
<div class="modelpick">OpenAI <span class="badge">Plus</span></div>
<button class="navbtn">Share</button>
</nav>
<div class="thread">
<div class="measure">
<div class="turn-user"><div class="bubble">Can you draft a short outline for our Q3 roadmap update, keeping it to three themes?</div></div>
<div class="turn-ai">
<div class="ai-text">
<p>Here's a three-theme structure you can adapt:</p>
<p>1. Reliability — infrastructure work that reduces latency and error rate.<br>
2. Developer experience — SDK updates, clearer docs, faster support turnaround.<br>
3. New capabilities — the two features closest to shipping this quarter.</p>
<p>Want me to expand any of these into talking points<span class="cursor"></span></p>
</div>
</div>
</div>
</div>
<div class="composer-wrap">
<div>
<div class="composer"><span>Message OpenAI</span><div class="send"></div></div>
<div class="hint">OpenAI can make mistakes. Check important info.</div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6c6c6c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #212121;
border: 1px solid #108474; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #212121;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c6c6c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.4px; background: #ffce07; color: #212121;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Nunito Sans','Helvetica Neue',sans-serif; color:#212121; }
*{box-sizing:border-box;}
.nav{height:72px;background:#ffffff;border-bottom:1px solid #eeeeee;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:22px;font-weight:800;color:#108474;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;color:#212121;}
.cart{width:34px;height:34px;border-radius:9999px;background:#f9fafb;display:flex;align-items:center;justify-content:center;font-size:13px;color:#108474;}
.hero{height:238px;display:flex;align-items:center;padding:0 40px;background:linear-gradient(120deg,#fffbe8 0%,#ffffff 60%);}
.heroText{width:430px;}
.headline{font-size:32px;font-weight:800;line-height:1.2;color:#212121;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.55;color:#555555;margin:0 0 20px;max-width:370px;}
.btn{display:inline-block;background:#108474;color:#fff;font-size:14px;font-weight:700;padding:13px 26px;border-radius:8px;}
.chair{position:absolute;right:110px;top:70px;width:130px;height:130px;background:#ffce07;border-radius:16px;transform:rotate(-4deg);}
.chairback{position:absolute;right:110px;top:40px;width:130px;height:50px;background:#fb8077;border-radius:16px 16px 4px 4px;transform:rotate(-4deg);}
.sec{position:relative;height:290px;padding:26px 40px;}
.secTitle{font-size:18px;font-weight:800;color:#212121;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:216px;background:#fff;border:1px solid #dedede;border-radius:8px;padding:12px;}
.thumb{height:100px;border-radius:8px;margin-bottom:10px;}
.swatches{display:flex;gap:6px;margin-bottom:8px;}
.swatch{width:14px;height:14px;border-radius:9999px;}
.cardTitle{font-size:14px;font-weight:700;color:#212121;margin-bottom:4px;}
.cardPrice{font-size:14px;font-weight:800;color:#108474;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#f9fafb;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#555555;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Loll Designs</div>
<div class="navlinks"><span>Chairs</span><span>Tables</span><span>Configurator</span></div>
<div class="cart">🛒</div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">Milk jugs,<br>reborn on the porch.</div>
<div class="sub">Outdoor furniture made entirely from recycled plastic, built to weather every season.</div>
<div class="btn">Build Your Chair</div>
</div>
<div class="chairback"></div>
<div class="chair"></div>
</div>
<div class="sec">
<div class="secTitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#108474,#eeeeee)"></div><div class="swatches"><div class="swatch" style="background:#108474"></div><div class="swatch" style="background:#ffce07"></div><div class="swatch" style="background:#fb8077"></div><div class="swatch" style="background:#a89cc8"></div></div><div class="cardTitle">Adirondack Chair</div><div class="cardPrice">$329</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffce07,#eeeeee)"></div><div class="swatches"><div class="swatch" style="background:#108474"></div><div class="swatch" style="background:#ffce07"></div><div class="swatch" style="background:#fb8077"></div></div><div class="cardTitle">Rocking Chair</div><div class="cardPrice">$399</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#fb8077,#eeeeee)"></div><div class="swatches"><div class="swatch" style="background:#fb8077"></div><div class="swatch" style="background:#a89cc8"></div></div><div class="cardTitle">Side Table</div><div class="cardPrice">$189</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a89cc8,#eeeeee)"></div><div class="swatches"><div class="swatch" style="background:#108474"></div><div class="swatch" style="background:#a89cc8"></div></div><div class="cardTitle">Porch Swing</div><div class="cardPrice">$549</div></div>
</div>
</div>
<div class="footer"><span>© Made From Recycled Plastic</span><span>Care & Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #2c2c2c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #2c2c2c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #2c2c2c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8c8c8c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #97c300; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f9f9f9; color: #2c2c2c;
border: 1px solid #97c300; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9f9f9; color: #444444;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffcd46; color: #2c2c2c;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f9f9; font-family:Roboto,Arial,sans-serif; color:#444444; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e7e7e7;background:#f9f9f9;}
.logo{font-size:22px;font-weight:700;color:#2c2c2c;}
.navlinks{display:flex;gap:24px;font-size:15px;font-weight:500;}
.navlinks .on{color:#97c300;border-bottom:2px solid #97c300;padding-bottom:20px;}
.navlinks span:not(.on){color:#8c8c8c;}
.hero{height:150px;background:#f6f6f6;display:flex;align-items:center;padding:0 32px;justify-content:space-between;}
.h1{font-size:28px;font-weight:700;color:#2c2c2c;margin:0 0 8px;}
.hsub{font-size:14px;color:#444;max-width:420px;margin:0 0 12px;}
.btn{display:inline-block;background:#97c300;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;border-radius:8px;}
.section{padding:18px 32px 0;}
.taglist{display:flex;gap:8px;margin-bottom:14px;}
.tag{background:#f6f6f6;color:#8c8c8c;font-size:12px;padding:6px 16px;border-radius:9999px;}
.tag.on{background:#97c300;color:#fff;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#fff;border:1px solid #e7e7e7;border-radius:8px;overflow:hidden;}
.thumb{height:96px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:4px;letter-spacing:0.5px;}
.pbody{padding:10px 14px 14px;}
.ptitle{font-size:15px;font-weight:600;color:#2c2c2c;}
.pprice{font-size:15px;font-weight:600;color:#97c300;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">R And R Games</div>
<div class="navlinks"><div class="on">All Games</div><span>Strategy</span><span>Family</span><span>Party</span></div>
</div>
<div class="hero">
<div><div class="h1">Games Worth Playing Twice</div><div class="hsub">A catalog of board and party games built for game night — strategy to family favorites, one shelf.</div><div class="btn">Browse Catalog</div></div>
</div>
<div class="section">
<div class="taglist"><div class="tag on">All</div><div class="tag">Strategy</div><div class="tag">Family</div><div class="tag">Party</div></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#97c300,#2c2c2c);"><div class="badge" style="background:#ffcd46;color:#2c2c2c;">New</div></div><div class="pbody"><div class="ptitle">Kingdom Forge Strategy</div><div class="pprice">$34.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#eebe00,#2c2c2c);"><div class="badge" style="background:#ff4f60;color:#fff;">Sale</div></div><div class="pbody"><div class="ptitle">Family Trivia Deck</div><div class="pprice">$19.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8c8c8c,#2c2c2c);"><div class="badge" style="background:#eebe00;color:#2c2c2c;">Award</div></div><div class="pbody"><div class="ptitle">Harborlight Co-op Adventure</div><div class="pprice">$44.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#045304,#97c300);"></div><div class="pbody"><div class="ptitle">Party Pack: Charades Plus</div><div class="pprice">$14.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -0.22px; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #142b6f; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #142b6f;
border: 1px solid #142b6f; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #2b2727;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ffd600; color: #141414;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'CircularXX','Inter',sans-serif; color:#141414; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e2e2e2;}
.logo{font-size:19px;font-weight:600;color:#142b6f;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:500;color:#717171;}
.navlinks .on{color:#142b6f;border-bottom:2px solid #142b6f;padding-bottom:24px;}
.strip{display:flex;height:568px;}
.gallery{width:380px;background:#eaeef0;display:flex;align-items:center;justify-content:center;}
.bottle{width:120px;height:220px;border-radius:16px;background:linear-gradient(180deg,#ffffff,#e0e4e8);border:1px solid #d1cfce;position:relative;}
.bottle::before{content:'';position:absolute;left:40px;top:-16px;width:40px;height:20px;background:#142b6f;border-radius:4px;}
.main{flex:1;padding:24px 28px;}
.pname{font-size:20px;font-weight:600;margin:0 0 4px;}
.price{font-size:18px;color:#142b6f;margin:0 0 14px;}
.toggles{display:flex;gap:10px;margin-bottom:18px;}
.toggle{flex:1;border:1px solid #d1cfce;border-radius:8px;padding:12px;}
.toggle.on{border:2px solid #142b6f;background:#fef6eb;}
.tlabel{font-size:14px;font-weight:600;}
.tprice{font-size:13px;color:#717171;}
.tsave{font-size:11px;color:#4c840d;}
.acc{border:1px solid #e2e2e2;border-radius:8px;margin-bottom:8px;padding:12px 14px;background:#f5f7f8;}
.acchead{display:flex;justify-content:space-between;font-size:14px;font-weight:600;}
.accbody{font-size:12px;color:#2b2727;margin-top:6px;}
.cta{margin-top:10px;background:#142b6f;color:#fff;text-align:center;padding:14px;font-size:16px;font-weight:600;border-radius:8px;}
</style>
<div class="nav">
<div class="logo">Ritual Vitamins 2</div>
<div class="navlinks"><span class="on">Multivitamin</span><span>Protein</span><span>Why Ritual</span></div>
</div>
<div class="strip">
<div class="gallery"><div class="bottle"></div></div>
<div class="main">
<div class="pname">Essential Multivitamin</div>
<div class="price">$36.00</div>
<div class="toggles">
<div class="toggle on"><div class="tlabel">Subscribe</div><div class="tprice">$32.40 / mo</div><div class="tsave">Save 10%</div></div>
<div class="toggle"><div class="tlabel">One-Time</div><div class="tprice">$36.00</div></div>
</div>
<div class="acc">
<div class="acchead"><span>Vitamin D3</span><span>▾</span></div>
<div class="accbody">Source: Lichen · Form: Vegan D3 · Why: Bone and immune support without the fish-oil origin.</div>
</div>
<div class="acc">
<div class="acchead"><span>Omega-3 DHA</span><span>▾</span></div>
<div class="accbody">Source: Algal oil · Form: Traceable, third-party tested · Why: Brain and heart support, ocean-friendly.</div>
</div>
<div class="cta">Add to Cart</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-size: 20px; font-weight:700; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-size: 12px; font-weight:400; line-height:1.4; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: linear-gradient(135deg, #EC7000, #FF8C33); color: #ffffff;
border: none; border-radius: 999; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #FFFFFF; color: linear-gradient(135deg, #EC7000, #FF8C33);
border: 1px solid linear-gradient(135deg, #EC7000, #FF8C33); border-radius: 999;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #FFFFFF; color: #111111;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #ededed; color: linear-gradient(135deg, #EC7000, #FF8C33);
border-radius: 999; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #FFFFFF; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
nav { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 36px; }
.pedra-mark { width: 30px; height: 30px; background: #EC7000; border-radius: 42% 58% 61% 39% / 46% 41% 59% 54%; }
.brandrow { display: flex; align-items: center; gap: 10px; }
.brand { font-size: 19px; font-weight: 700; color: #1A1A1A; margin: 0; }
.navlinks { display: flex; gap: 26px; font-size: 13px; color: #6E6E6E; font-weight: 600; }
.cta { background: #EC7000; color: #fff; border: none; border-radius: 42% 58% 61% 39% / 46% 41% 59% 54%; padding: 12px 26px; font-weight: 700; font-size: 13px; }
.hero { display: flex; align-items: center; gap: 30px; padding: 20px 36px 0; }
.hero-copy { width: 360px; }
.hero-copy .kicker { font-size: 12px; font-weight: 700; color: #003399; letter-spacing: 0.04em; text-transform: uppercase; }
.hero-copy h1 { font-size: 36px; font-weight: 700; color: #1A1A1A; margin: 10px 0 12px; line-height: 1.12; }
.hero-copy p { font-size: 14px; color: #6E6E6E; line-height: 1.55; margin: 0 0 18px; }
.btn-o { background: #EC7000; color: #fff; border: none; border-radius: 8px; padding: 12px 22px; font-weight: 700; font-size: 13px; }
.pedra-visual { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; height: 260px; }
.pedra-big { width: 260px; height: 260px; background: linear-gradient(135deg, #EC7000, #FF8C33); border-radius: 38% 62% 55% 45% / 48% 40% 60% 52%; position: relative; box-shadow: 0 20px 40px rgba(236,112,0,0.25); }
.pedra-big .lbl { position: absolute; top: 24px; left: 28px; color: #fff; font-size: 12px; font-weight: 700; opacity: 0.9; }
.pedra-big .amt { position: absolute; left: 28px; bottom: 40px; color: #fff; font-size: 26px; font-weight: 700; }
.pedra-small { position: absolute; width: 90px; height: 90px; background: #003399; border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; right: 30px; bottom: 10px; }
.brazilian { display: flex; gap: 0; padding: 24px 36px 0; border-radius: 12px; overflow: hidden; }
.brazilian .c { flex: 1; padding: 14px; text-align: center; }
.brazilian .c b { display: block; font-size: 12px; font-weight: 700; margin-top: 6px; }
.grid3 { display: flex; gap: 16px; padding: 22px 36px 0; }
.card { flex: 1; border: 1px solid #EDEDED; border-radius: 8px; padding: 16px; }
.card h4 { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #1A1A1A; }
.card p { margin: 0; font-size: 12px; color: #6E6E6E; line-height: 1.5; }
</style>
<nav>
<div class="brandrow"><div class="pedra-mark"></div><p class="brand">Itaú</p></div>
<div class="navlinks"><span>Accounts</span><span>Cards</span><span>Investments</span><span>Insurance</span></div>
<button class="cta">Open account</button>
</nav>
<div class="hero">
<div class="hero-copy">
<span class="kicker">One hundred years, one bank</span>
<h1>Banking shaped like a river stone.</h1>
<p>Simple, trustworthy, relevant and memorable — the orange that carries a century of Brazilian banking forward.</p>
<button class="btn-o">Open your account</button>
</div>
<div class="pedra-visual">
<div class="pedra-big"><span class="lbl">Available balance</span><span class="amt">$ 6,204.50</span></div>
<div class="pedra-small"></div>
</div>
</div>
<div class="brazilian">
<div class="c" style="background:#FFF8E6"><div style="width:24px;height:24px;border-radius:50%;background:#FFAB00;margin:0 auto"></div><b>Yellow</b></div>
<div class="c" style="background:#E6F0FF"><div style="width:24px;height:24px;border-radius:50%;background:#003399;margin:0 auto"></div><b>Blue</b></div>
<div class="c" style="background:#E6F7F0"><div style="width:24px;height:24px;border-radius:50%;background:#00875A;margin:0 auto"></div><b>Green</b></div>
<div class="c" style="background:#FFEBF2"><div style="width:24px;height:24px;border-radius:50%;background:#FF5C8A;margin:0 auto"></div><b>Pink</b></div>
</div>
<div class="grid3">
<div class="card"><h4>Pix instantly</h4><p>Send and receive money in seconds, anytime.</p></div>
<div class="card"><h4>Invest with confidence</h4><p>Funds and fixed income tailored to your goals.</p></div>
<div class="card"><h4>One login, one bank</h4><p>Every journey feels like part of the same ecosystem.</p></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefbf1; color: #292929;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefbf1; color: #292929;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #292929; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9db2ca; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #0f4c81; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fefbf1; color: #0f4c81;
border: 1px solid #0f4c81; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fefbf1; color: #292929;
border: 1px solid #c9c6bf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9db2ca; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #dea439; color: #292929;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fefbf1; font-family:'Georgia','Times New Roman',serif; color:#292929; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#fefbf1;border-bottom:1px solid #dedbd3;}
.logo{font-size:22px;font-weight:700;color:#292929;letter-spacing:0.3px;}
.navlinks{display:flex;gap:24px;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;color:#466993;}
.navlinks div:first-child{color:#0f4c81;border-bottom:2px solid #0f4c81;padding-bottom:4px;}
.search{width:150px;height:34px;border-radius:9999px;border:1px solid #dedede;background:#fff;font-family:Arial,sans-serif;font-size:11px;color:#9db2ca;display:flex;align-items:center;padding:0 14px;}
.hero{height:236px;display:flex;background:#f6f6f6;}
.herotext{width:46%;padding:0 36px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-family:Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#dea439;margin-bottom:10px;}
.herotext h1{font-size:32px;font-weight:700;margin:0 0 12px;line-height:1.15;color:#292929;}
.herotext p{font-family:Arial,sans-serif;font-size:13px;color:#466993;margin:0 0 16px;max-width:280px;line-height:1.5;}
.cta{width:fit-content;background:#0f4c81;color:#fff;font-family:Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:12px 24px;border-radius:8px;}
.heroimg{width:54%;position:relative;background:linear-gradient(180deg,#f0e7da 0%,#d0dae3 55%,#909762 100%);overflow:hidden;}
.steam{position:absolute;width:60px;height:60px;border:3px solid rgba(255,255,255,0.5);border-radius:50%;top:30px;left:180px;opacity:0.6;}
.steam2{position:absolute;width:40px;height:40px;border:3px solid rgba(255,255,255,0.4);border-radius:50%;top:60px;left:230px;opacity:0.5;}
.stone{position:absolute;bottom:0;left:0;right:0;height:70px;background:#703412;border-radius:40px 40px 0 0;}
.row{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:150px;background:#fff;border-radius:12px;overflow:hidden;}
.thumb{height:96px;background:#f0e7da;}
.pname{font-family:Arial,sans-serif;font-size:13px;font-weight:600;color:#292929;padding:10px 10px 2px;}
.pprice{font-family:Arial,sans-serif;font-size:13px;color:#466993;padding:0 10px 10px;}
.badge{display:inline-block;background:#dea439;color:#292929;font-family:Arial,sans-serif;font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 6px;border-radius:4px;margin:8px 0 0 10px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#0f4c81;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#fff;font-family:Arial,sans-serif;font-size:11px;}
.footer span{margin-left:16px;color:#cee5fa;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Onsen</div>
<div class="navlinks"><div>Bath</div><div>Ritual Sets</div><div>Botanicals</div><div>Gifting</div></div>
<div class="search">Search rituals...</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Mineral-Rich Since 1998</div>
<h1>Drying Off, Made a Ritual</h1>
<p>Bath linens and botanical soaks inspired by the quiet of a Japanese hot spring.</p>
<div class="cta">Shop the Onsen Set</div>
</div>
<div class="heroimg"><div class="steam"></div><div class="steam2"></div><div class="stone"></div></div>
</div>
<div class="row">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0f4c81,#466993)"></div><div class="badge">Best Seller</div><div class="pname">Waffle Bath Towel</div><div class="pprice">$48</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#909762,#f0e7da)"></div><div class="pname">Sage Soak Salts</div><div class="pprice">$24</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#dea439,#703412)"></div><div class="pname">Gold Hook Robe</div><div class="pprice">$96</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#466993,#0f4c81)"></div><div class="pname">Slate Bath Mat</div><div class="pprice">$38</div></div>
</div>
<div class="footer"><span>© A Quiet Ritual</span><span>Shipping<span> Returns<span> Journal</span></span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6e6e6e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #313131; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fafafa; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #313131;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e6e6e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d32f2f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#313131; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
header { padding:18px 36px; border-bottom:1px solid #d4d4d4; display:flex; align-items:center; gap:20px; }
.brand { font-size:19px; font-weight:600; letter-spacing:-0.2px; }
.searchbar { flex:1; background:#f0f0f0; border-radius:9999px; padding:9px 18px; font-size:13px; color:#6e6e6e;
box-shadow:inset 0 1px 2px rgba(0,0,0,0.06); }
.catrow { display:flex; gap:22px; padding:10px 36px; border-bottom:1px solid #e6e6e6; font-size:13px; color:#6e6e6e; }
.catrow span.on { color:#313131; font-weight:600; }
main { display:flex; height:calc(640px - 108px - 42px); }
.cover { width:220px; background:#efefec; display:flex; align-items:center; justify-content:center; padding:28px; }
.book { width:150px; height:220px; background:linear-gradient(150deg,#3a352e,#5c554a); border-radius:2px;
box-shadow:0 12px 30px rgba(0,0,0,0.22); position:relative; }
.book::before { content:''; position:absolute; left:8px; top:0; bottom:0; width:6px; background:rgba(255,255,255,0.08); }
.book::after { content:'FIRST\A EDITION'; white-space:pre; position:absolute; top:38px; left:22px; color:#e6dcc8;
font-size:11px; letter-spacing:1.5px; line-height:1.6; }
.info { flex:1; padding:26px 32px; display:flex; flex-direction:column; gap:12px; border-right:1px solid #e6e6e6; }
h1 { font-size:22px; font-weight:600; margin:0; letter-spacing:-0.2px; }
.author { font-size:14px; color:#4a4a4a; }
.stars { color:#f5a623; font-size:13px; }
.rarity { display:inline-flex; gap:6px; align-items:center; }
.badge-rarity { background:#1976d2; color:#fff; font-size:10px; font-weight:600; padding:2px 8px; border-radius:3px; }
.cond { font-size:13px; color:#4a4a4a; }
.listings { border:1px solid #d4d4d4; border-radius:2px; overflow:hidden; }
.listing { display:flex; justify-content:space-between; padding:10px 14px; font-size:13px; border-bottom:1px solid #e6e6e6; }
.listing:last-child { border-bottom:none; }
.listing .seller { color:#6e6e6e; }
.listing .price { font-weight:600; }
.side { width:220px; padding:26px 24px; display:flex; flex-direction:column; gap:14px; }
.side .label { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:#9e9e9e; }
.buybox { border:1px solid #d4d4d4; border-radius:2px; padding:16px; display:flex; flex-direction:column; gap:10px; }
.buyprice { font-size:22px; font-weight:700; }
.buycond { font-size:12px; color:#6e6e6e; }
.btn-cart { background:#3a9b3a; color:#fff; border:none; border-radius:3px; padding:11px 0; font-size:14px; font-weight:600; text-align:center; }
.affiliate { font-size:10px; color:#e07b00; border:1px solid #f0c090; border-radius:3px; padding:3px 8px; text-align:center; }
footer { padding:12px 36px; border-top:1px solid #e6e6e6; font-size:11px; color:#9e9e9e; display:flex; justify-content:space-between; }
</style></head>
<body>
<header>
<div class="brand">Biblio</div>
<div class="searchbar">Search by title, author, or ISBN…</div>
</header>
<div class="catrow"><span class="on">Used & Rare</span><span>Fiction</span><span>History</span><span>Art</span><span>First Editions</span><span>Signed Copies</span></div>
<main>
<div class="cover"><div class="book"></div></div>
<div class="info">
<h1>The Cartographer's Silence</h1>
<div class="author">by Miriam Okafor · Hardcover, 1974</div>
<div class="stars">★★★★☆ <span style="color:#6e6e6e">(38 ratings)</span></div>
<div class="rarity"><span class="badge-rarity">First Edition</span><span class="cond">Very Good in Very Good jacket</span></div>
<p style="font-size:13px; color:#4a4a4a; line-height:1.5; max-width:380px;">A quiet, out-of-print novel of postwar exile, sourced from an estate library in Lisbon. Dust jacket lightly toned at spine.</p>
<div class="listings">
<div class="listing"><span class="seller">Marlowe & Sons Books</span><span class="price">$42.00</span></div>
<div class="listing"><span class="seller">Thornbury Rare Books</span><span class="price">$38.50</span></div>
<div class="listing"><span class="seller">Second Chapter Ltd.</span><span class="price">$55.00</span></div>
</div>
</div>
<div class="side">
<span class="label">Lowest Price</span>
<div class="buybox">
<span class="buyprice">$38.50</span>
<span class="buycond">Very Good · Ships in 3–5 days</span>
<div class="btn-cart">Add to Cart</div>
<div class="affiliate">Also available on Amazon</div>
</div>
</div>
</main>
<footer><span>© Biblio</span><span>Sell Books · Help · Returns</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #6745a3; color: #ffffff;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #6745a3;
border: 1px solid #6745a3; border-radius: 12px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #6745a3; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Open Sans','Helvetica Neue',sans-serif; color:#212121; }
*{box-sizing:border-box;}
.nav{height:64px;background:#ffffff;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:21px;font-weight:700;color:#6745a3;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;color:#212121;}
.hero{height:240px;display:flex;align-items:center;padding:0 40px;background:#6745a3;color:#fff;}
.heroText{width:440px;}
.headline{font-size:32px;font-weight:700;line-height:1.2;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.55;color:#e0d6f0;margin:0 0 20px;max-width:370px;}
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 28px;background:#22d6ce;color:#121212;font-size:14px;font-weight:700;border-radius:9999px;}
.card1{position:absolute;right:110px;top:70px;width:70px;height:96px;border-radius:8px;background:linear-gradient(160deg,#22d6ce,#553892);transform:rotate(-8deg);box-shadow:0 8px 20px rgba(0,0,0,.2);}
.card2{position:absolute;right:70px;top:60px;width:70px;height:96px;border-radius:8px;background:linear-gradient(160deg,#fb8077,#553892);transform:rotate(6deg);box-shadow:0 8px 20px rgba(0,0,0,.2);}
.sec{position:relative;height:296px;padding:26px 40px;}
.secTitle{font-size:18px;font-weight:700;color:#212121;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:216px;border:1px solid #eee;border-radius:12px;padding:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#fb8077;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 9px;border-radius:9999px;}
.thumb{height:100px;border-radius:8px;margin-bottom:10px;}
.cardTitle{font-size:14px;font-weight:600;color:#212121;margin-bottom:4px;}
.cardPrice{font-size:14px;font-weight:700;color:#6745a3;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#22d6ce;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Looney Labs</div>
<div class="navlinks"><span>Fluxx</span><span>Card Games</span><span>Bundles</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">Rules that keep<br>changing on you.</div>
<div class="sub">Card games built for chaos, curiosity, and the friends who keep coming back.</div>
<div class="btn">Shop Card Games</div>
</div>
<div class="card2"></div>
<div class="card1"></div>
</div>
<div class="sec">
<div class="secTitle">Best-Selling Games</div>
<div class="grid">
<div class="card"><div class="badge">Bestseller</div><div class="thumb" style="background:linear-gradient(135deg,#6745a3,#22d6ce)"></div><div class="cardTitle">Fluxx: Classic Edition</div><div class="cardPrice">$16.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#22d6ce,#6745a3)"></div><div class="cardTitle">Chrononauts</div><div class="cardPrice">$18.00</div></div>
<div class="card"><div class="badge">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#fb8077,#6745a3)"></div><div class="cardTitle">Zombie Fluxx</div><div class="cardPrice">$14.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#6745a3,#fb8077)"></div><div class="cardTitle">Loonacy Bundle</div><div class="cardPrice">$22.00</div></div>
</div>
</div>
<div class="footer"><span>© Games That Change the Rules</span><span>How to Play</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1F36;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1F36;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #1A1F36; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; margin: 0; color: #6B7099; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: #1A5CCC; color: #FFFFFF;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: #FFFFFF; color: #1A5CCC;
border: 1px solid #1A5CCC; border-radius: 9999px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1F36;
border: 1px solid #D4DAEA; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B7099; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #dfe8f8; color: #1A5CCC;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1A1F36; box-sizing:border-box;
font-family:'Nunito','Poppins',system-ui,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #D4DAEA; }
.brand { font-size:17px; font-weight:800; margin:0; color:#1A5CCC; }
.navlinks { display:flex; gap:22px; font-size:15px; font-weight:700; color:#3D4163; }
.navlinks span.on { color:#1A5CCC; }
.util { font-size:13px; color:#6B7099; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 64px); }
.stage { padding:24px; border-right:1px solid #EBF0FA; display:flex; flex-direction:column; gap:10px; background:#F4F7FF; }
.panel { flex:1; position:relative; overflow:hidden; border-radius:20px; background:#fff; }
.panel .piece { position:absolute; border-radius:6px; }
.panel .p1 { width:34%; height:34%; left:14%; top:16%; background:#1A5CCC; }
.panel .p2 { width:30%; height:30%; right:16%; top:22%; background:#FF8C38; }
.panel .p3 { width:28%; height:28%; left:24%; bottom:16%; background:#FFC926; }
.panel .p4 { width:22%; height:22%; right:20%; bottom:20%; background:#3DBF6E; }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; background:#fff; border-radius:12px; border:1px solid #D4DAEA; }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:13px; font-weight:600; color:#6B7099; }
h1 { margin:0; font-size:24px; font-weight:700; letter-spacing:-0.3px; }
.badge-row { display:flex; gap:6px; }
.badge-easy { background:#3DBF6E; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:3px 8px; border-radius:4px; }
.badge-new { background:#FFC926; color:#1A1F36; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:4px 10px; border-radius:999px; }
.piece-chip { background:#F4F7FF; color:#1A5CCC; font-size:13px; font-weight:600; border:1px solid #D4DAEA; border-radius:999px; padding:4px 12px; display:inline-block; width:fit-content; }
.price { font-size:18px; font-weight:700; }
.desc { font-size:14px; color:#3D4163; line-height:1.6; }
.chip-row { display:flex; gap:8px; }
.chip { border:1px solid #D4DAEA; border-radius:999px; padding:8px 16px; font-size:13px; font-weight:700; color:#3D4163; }
.chip.on { background:#1A5CCC; color:#fff; border-color:#1A5CCC; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#1A5CCC; color:#fff; border:none; border-radius:999px; font-size:16px; font-weight:700; }
.btn-secondary { width:160px; height:48px; background:#fff; border:2px solid #1A5CCC; color:#1A5CCC; border-radius:999px; font-size:16px; font-weight:700; }
</style></head>
<body>
<nav>
<p class="brand">Blue Kazoo</p>
<div class="navlinks"><span class="on">Shop</span><span>About</span><span>Blog</span></div>
<div class="util">Search Account Cart (2)</div>
</nav>
<main>
<div class="stage">
<div class="panel"><div class="piece p1"></div><div class="piece p2"></div><div class="piece p3"></div><div class="piece p4"></div></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Nature Collection</span>
<h1>Autumn Forest 1000-Piece Puzzle</h1>
<div class="badge-row"><span class="badge-easy">Medium</span><span class="badge-new">New</span></div>
<span class="piece-chip">1000 Pieces</span>
<div class="price">$24.99</div>
<p class="desc">Hand-illustrated forest scene printed on premium recycled board — thick, interlocking pieces that hold their shape puzzle after puzzle.</p>
<div class="chip-row">
<span class="chip">500</span><span class="chip on">1000</span><span class="chip">2000</span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">View Details</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.8px; background: #226d7a; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.8px; background: #ffffff; color: #226d7a;
border: 1px solid #226d7a; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #22b8d1; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#3d3d3d; font-family:'Open Sans',Roboto,Arial,sans-serif;
}
*, *::before, *::after { box-sizing:border-box; }
.wrap{ position:relative; width:960px; height:640px; }
.nav{ height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#ffffff; border-bottom:1px solid #e4f5fa; }
.logo{ font-size:19px; font-weight:700; color:#226d7a; }
.navlinks{ display:flex; gap:26px; }
.navlinks span{ font-size:12px; color:#3d3d3d; }
.navlinks span.active{ color:#226d7a; border-bottom:2px solid #226d7a; padding-bottom:4px; }
.cta{ font-size:12px; font-weight:700; color:#ffffff; background:#226d7a; padding:10px 18px; border-radius:8px; }
.hero{ height:250px; display:flex; align-items:center; padding:0 34px; gap:28px; background:linear-gradient(180deg,#e4f5fa,#ffffff); }
.hero-text{ width:400px; }
.kicker{ font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#22b8d1; margin-bottom:12px; }
.h1{ font-size:32px; font-weight:700; line-height:1.2; color:#1a1a1a; margin-bottom:12px; }
.sub{ font-size:14px; line-height:1.55; color:#3d3d3d; max-width:340px; margin-bottom:18px; }
.btn{ font-size:13px; font-weight:700; color:#ffffff; background:#226d7a; padding:13px 24px; border-radius:8px; width:fit-content; }
.hero-visual{ flex:1; height:210px; position:relative; }
.range{ position:absolute; left:150px; top:24px; width:180px; height:150px; background:#e9edee; border-radius:6px; box-shadow:0 16px 30px rgba(0,0,0,0.1); }
.burner{ position:absolute; width:26px; height:26px; border-radius:50%; background:#22b8d1; border:3px solid #b0e0e9; }
.b1{ left:170px; top:44px; } .b2{ left:210px; top:44px; } .b3{ left:170px; top:84px; } .b4{ left:210px; top:84px; }
.knob-row{ position:absolute; left:150px; top:150px; width:180px; height:16px; display:flex; gap:8px; }
.knob{ width:16px; height:16px; border-radius:50%; background:#226d7a; }
.section-title{ padding:16px 34px 8px; font-size:15px; font-weight:700; color:#1a1a1a; }
.grid{ display:flex; gap:16px; padding:0 34px; }
.card{ width:200px; background:#ffffff; border:1px solid #e4f5fa; border-radius:6px; padding:0 0 12px; }
.card-img{ width:100%; height:80px; border-radius:6px 6px 0 0; margin-bottom:8px; }
.card-body{ padding:0 12px; }
.card-title{ font-size:13px; font-weight:700; color:#1a1a1a; margin-bottom:2px; }
.card-note{ font-size:10px; color:#3d3d3d; margin-bottom:8px; }
.row{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-size:12px; font-weight:700; color:#1a1a1a; }
.swatches{ display:flex; gap:4px; }
.sw{ width:11px; height:11px; border-radius:50%; }
.footer{ position:absolute; bottom:0; left:0; width:960px; height:52px; background:#e4f5fa; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.footer span{ font-size:11px; color:#226d7a; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Hestan</div>
<div class="navlinks">
<span class="active">Ranges</span>
<span>Cooktops</span>
<span>Cookware</span>
<span>Outdoor</span>
</div>
<div class="cta">Find a Showroom</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="kicker">Professional-Grade, At Home</div>
<div class="h1">A cool, polished showroom for the kitchen.</div>
<div class="sub">Engineered ranges and cooktops finished like appliances built to be seen, not hidden behind cabinetry.</div>
<div class="btn">Explore Ranges</div>
</div>
<div class="hero-visual">
<div class="range"></div>
<div class="burner b1"></div>
<div class="burner b2"></div>
<div class="burner b3"></div>
<div class="burner b4"></div>
<div class="knob-row"><div class="knob"></div><div class="knob"></div><div class="knob"></div><div class="knob"></div></div>
</div>
</div>
<div class="section-title">Featured Finishes</div>
<div class="grid">
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#226d7a,#22b8d1);"></div>
<div class="card-body">
<div class="card-title">36" Pro Range</div>
<div class="card-note">6-Burner · Dual Fuel</div>
<div class="row"><span class="price">$8,999</span><span class="swatches"><span class="sw" style="background:#226d7a;"></span><span class="sw" style="background:#22b8d1;"></span><span class="sw" style="background:#b0e0e9;"></span></span></div>
</div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#1a1a1a,#226d7a);"></div>
<div class="card-body">
<div class="card-title">48" Induction Cooktop</div>
<div class="card-note">5-Zone · Touch Control</div>
<div class="row"><span class="price">$4,299</span><span class="swatches"><span class="sw" style="background:#1a1a1a;"></span><span class="sw" style="background:#226d7a;"></span></span></div>
</div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#22b8d1,#e4f5fa);"></div>
<div class="card-body">
<div class="card-title">10-Pc Cookware Set</div>
<div class="card-note">Titanium Nonstick</div>
<div class="row"><span class="price">$1,199</span><span class="swatches"><span class="sw" style="background:#22b8d1;"></span></span></div>
</div>
</div>
</div>
<div class="footer">
<span>© Hestan</span>
<span>Showroom Locator · Warranty · Support</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000a46;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000a46;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #000a46; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #a7a7a7; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #1d73dd; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #ffffff; color: #1d73dd;
border: 1px solid #1d73dd; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #000a46;
border: 1px solid #bfc2d1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a7a7a7; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.5px; background: #f5f5f5; color: #000a46;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;color:#333333;font-family:'Figtree','Montserrat',Arial,sans-serif;}
*{box-sizing:border-box;}
.toprow{background:#000a46;color:#a7a7a7;font-size:10px;padding:6px 26px;display:flex;justify-content:space-between;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;background:#000a46;border-top:1px solid #1d41dd;}
.logo{font-family:'Montserrat',sans-serif;font-weight:700;font-size:20px;color:#fff;}
.logo span{color:#5fb035;}
.navlinks{display:flex;gap:16px;font-size:11px;font-weight:600;color:#cdd7f5;}
.hero{display:flex;padding:22px 26px;gap:26px;align-items:center;background:linear-gradient(120deg,#000a46,#004b95,#1d73dd);}
.hero-txt{width:380px;}
.hero-txt h1{font-family:'Montserrat',sans-serif;font-size:28px;font-weight:700;color:#fff;margin:0 0 10px;line-height:1.25;}
.hero-txt p{font-size:12px;color:#cfe0fb;margin:0 0 14px;}
.cta{background:#5fb035;color:#fff;padding:11px 22px;border-radius:4px;font-weight:700;font-size:12px;display:inline-block;}
.lab{flex:1;height:190px;background:#000a46;border-radius:4px;position:relative;overflow:hidden;}
.lab .gel{position:absolute;bottom:20px;left:60px;width:180px;height:80px;background:#001233;border:1px solid #09ffeb;border-radius:4px;}
.lab .band{position:absolute;height:4px;background:#65e5d1;left:80px;box-shadow:0 0 8px #09ffeb;}
.lab .band1{top:44px;width:40px;}
.lab .band2{top:58px;width:60px;left:110px;}
.lab .band3{top:70px;width:30px;left:160px;}
.badge-green{position:absolute;top:14px;right:16px;background:#5fb035;color:#fff;font-size:9px;font-weight:800;padding:5px 10px;border-radius:4px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0 26px;}
.card{padding:14px 10px;border-right:1px solid #d3d3d3;border-bottom:1px solid #d3d3d3;position:relative;}
.card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:#5fb035;}
.box{height:78px;margin-bottom:8px;margin-left:6px;}
.b1{background:linear-gradient(160deg,#1d73dd,#004b95);}
.b2{background:linear-gradient(160deg,#5fb035,#3f7d1f);}
.b3{background:linear-gradient(160deg,#000a46,#1d41dd);}
.b4{background:linear-gradient(160deg,#65e5d1,#1c7490);}
.name{font-size:12px;font-weight:700;color:#000a46;margin:2px 0 3px 6px;}
.spec{font-size:10px;color:#a7a7a7;margin:0 0 5px 6px;font-family:Consolas,monospace;}
.price{font-size:13px;font-weight:700;color:#1d73dd;margin-left:6px;}
</style>
<div class="toprow"><span>Genscript · Gene Synthesis · Peptides · CRISPR Tools</span><span>Request Quote | My Account</span></div>
<div class="nav">
<div class="logo">Genscript<span>.</span></div>
<div class="navlinks"><span>Gene Synthesis</span><span>Plasmids</span><span>Antibodies</span><span>CRISPR</span><span>Peptides</span></div>
</div>
<div class="hero">
<div class="hero-txt">
<h1>Precision reagents for life science, at speed</h1>
<p>Gene synthesis, plasmid prep, antibody production, and CRISPR tools shipped to labs worldwide.</p>
<a class="cta">Get a Quote</a>
</div>
<div class="lab"><div class="badge-green">Approved</div><div class="gel"></div><div class="band band1"></div><div class="band band2"></div><div class="band band3"></div></div>
</div>
<div class="grid">
<div class="card"><div class="box b1"></div><div class="name">Custom Gene Synthesis</div><div class="spec">CAT-GS-2201</div><div class="price">Request Quote</div></div>
<div class="card"><div class="box b2"></div><div class="name">pcDNA3.1 Plasmid Vector</div><div class="spec">CAT-PL-0087</div><div class="price">$189.00</div></div>
<div class="card"><div class="box b3"></div><div class="name">Anti-His Tag Antibody</div><div class="spec">CAT-AB-3391</div><div class="price">$310.00</div></div>
<div class="card"><div class="box b4"></div><div class="name">CRISPR Cas9 Nuclease Kit</div><div class="spec">CAT-CR-1140</div><div class="price">$425.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: #ff5268; color: #ffffff;
border: none; border-radius: 0px; padding: 13px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: transparent; color: #111111;
border: 1px solid #ff5268; border-radius: 0px;
padding: 12px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.75px; background: #ff5268; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system, 'Segoe UI', Arial, sans-serif; background:#fff; color:#111111; }
*{box-sizing:border-box;}
.announce{height:32px;background:#121212;color:#fff;font-size:12px;text-align:center;line-height:32px;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #eeeeee;}
.logo{font-size:19px;font-weight:700;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;}
.hero{height:220px;background:#1e1e1e;display:flex;align-items:center;padding:0 30px;color:#fff;}
.headline{font-size:36px;font-weight:700;letter-spacing:-0.5px;max-width:440px;line-height:1.15;margin-bottom:12px;}
.btn{display:inline-block;background:transparent;border:1px solid #fff;color:#fff;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:12px 27px;}
.sec{padding:16px 30px;}
.sectitle{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#888;margin-bottom:14px;}
.grid{display:flex;gap:10px;}
.card{width:210px;padding:8px;}
.thumb{aspect-ratio:1/1;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#ff5268;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.75px;text-transform:uppercase;padding:3px 8px;}
.badgenew{position:absolute;top:6px;left:6px;background:#1e1e1e;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.75px;text-transform:uppercase;padding:3px 8px;}
.title{font-size:14px;margin-top:8px;}
.price{font-size:14px;font-weight:600;margin-top:2px;}
</style>
<div class="announce">MYSTERY DROPS RESTOCKED WEEKLY — FREE SHIPPING $75+</div>
<div class="nav">
<div class="logo">Mindzai</div>
<div class="navlinks"><span>Blind Boxes</span><span>Art Toys</span><span>Apparel</span><span>New Drops</span></div>
</div>
<div class="hero">
<div class="headline">Designer toys. No two boxes the same.</div>
<div class="btn">Shop Blind Boxes</div>
</div>
<div class="sec">
<div class="sectitle">New Drops</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#f4f4f4"><div class="badge">Blind Box</div></div><div class="title">Studio Series Mini Figure</div><div class="price">$14</div></div>
<div class="card"><div class="thumb" style="background:#e5e3df"><div class="badgenew">New</div></div><div class="title">Sculpted Art Figure, 8in</div><div class="price">$120</div></div>
<div class="card"><div class="thumb" style="background:#f2f4f6"><div class="badge">Sale</div></div><div class="title">Collaboration Keychain Set</div><div class="price">$18</div></div>
<div class="card"><div class="thumb" style="background:#f4f4f4"></div><div class="title">Limited Vinyl Chase Variant</div><div class="price">$45</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1032cf; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1032cf; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e9de4; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #151515; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1032cf; color: #ffffff;
border: 1px solid #151515; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1032cf; color: #f5f5f5;
border: 1px solid #3551d5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e9de4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #112db1; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#232f32; box-sizing:border-box;
font-family:"Lexend", -apple-system, "Segoe UI", Helvetica, sans-serif; }
* { box-sizing:border-box; }
.display { font-family:"ClashGrotesk", "Lexend", sans-serif; font-weight:400; }
.band-white { background:#ffffff; }
.band-black { background:#000000; color:#ffffff; }
.band-off { background:#eff0f4; color:#232f32; }
nav { height:50px; display:flex; align-items:center; gap:26px; padding:0 32px; }
.brand { font-size:15px; font-weight:600; color:#151515; margin:0; }
.navlinks { display:flex; gap:24px; margin-left:20px; }
.navlinks span { font-size:12.5px; text-transform:uppercase; letter-spacing:0.08em; color:#232f32; }
.hero { padding:14px 32px 26px; }
.hero h1 { font-size:50px; font-weight:400; line-height:1.06; letter-spacing:-0.5px; margin:0 0 12px; color:#151515; max-width:640px; }
.hero p { font-size:16px; font-weight:300; line-height:1.4; margin:0 0 20px; color:#232f32; max-width:480px; }
.pill { display:inline-flex; align-items:center; background:#000000; color:#ffffff; border-radius:100px;
padding:12px 26px; font-size:15px; font-weight:400; }
.stats { display:flex; align-items:center; padding:26px 32px; gap:0; }
.stat { flex:1; padding-right:24px; }
.stat .num { font-family:"ClashGrotesk","Lexend",sans-serif; font-size:34px; font-weight:400; color:#ffffff; }
.stat .lbl { font-size:14px; font-weight:300; color:#c9cdd6; margin-top:2px; }
.accent-line { width:3px; height:34px; background:#1032cf; margin-right:16px; flex:none; }
footer { padding:20px 32px; display:flex; gap:60px; }
.fcol h4 { font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em; font-weight:500; margin:0 0 10px; color:#5a636a; }
.fcol .frow { font-size:13.5px; font-weight:300; color:#232f32; margin-bottom:7px; }
</style></head>
<body>
<div class="band-white">
<nav>
<p class="brand">Lunit</p>
<div class="navlinks"><span>Solutions</span><span>Technology</span><span>Evidence</span><span>Company</span></div>
</nav>
<div class="hero">
<h1 class="display">AI that reads medical<br>images with clinicians</h1>
<p>Detection and triage support built for radiology and oncology workflows, validated across large-scale clinical evidence.</p>
<div class="pill">Contact Us</div>
</div>
</div>
<div class="band-black">
<div class="stats">
<div class="accent-line"></div>
<div class="stat"><div class="num display">10,000+</div><div class="lbl">Customer Sites</div></div>
<div class="stat"><div class="num display">65+</div><div class="lbl">Countries</div></div>
<div class="stat"><div class="num display">700+</div><div class="lbl">Publications</div></div>
</div>
</div>
<div class="band-off">
<footer>
<div class="fcol"><h4>Solutions</h4><div class="frow">Chest X-ray</div><div class="frow">Mammography</div><div class="frow">Digital Pathology</div></div>
<div class="fcol"><h4>Company</h4><div class="frow">About</div><div class="frow">Careers</div><div class="frow">Newsroom</div></div>
<div class="fcol"><h4>Resources</h4><div class="frow">Evidence</div><div class="frow">Publications</div><div class="frow">Support</div></div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffb600; color: #121212;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #121212;
border: 1px solid #ffb600; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #bdbdbd; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.23; letter-spacing: 0.2px; background: #d10000; color: #f6f6f6;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f6f6; font-family:'DM Sans','Roboto Condensed',sans-serif; color:#282828; }
*{box-sizing:border-box;}
.nav{height:56px;background:#1d1d1d;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-size:20px;font-weight:700;color:#ffb600;letter-spacing:.3px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;color:#fff;text-transform:uppercase;}
.cartbadge{background:#d10000;color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:9999px;}
.hero{height:250px;display:flex;background:#121212;padding:0 36px;align-items:center;}
.herotext{width:420px;}
.tag{display:inline-block;background:#282828;color:#ffb600;font-size:11px;font-weight:700;padding:4px 12px;border-radius:2px;margin-bottom:14px;text-transform:uppercase;}
.headline{font-size:30px;font-weight:700;color:#fff;margin-bottom:10px;line-height:1.2;}
.sub{font-size:13px;color:#a0a0a0;margin-bottom:18px;max-width:340px;}
.btn{display:inline-block;background:#ffb600;color:#1d1d1d;font-size:14px;font-weight:700;padding:12px 26px;border-radius:2px;}
.box{width:210px;height:190px;margin-left:70px;position:relative;}
.spine{position:absolute;left:0;top:0;width:60px;height:190px;background:linear-gradient(180deg,#345caa,#1d1d1d);border-radius:4px;box-shadow:8px 8px 0 rgba(255,182,0,.25);}
.spine2{position:absolute;left:70px;top:15px;width:60px;height:160px;background:linear-gradient(180deg,#ffb600,#282828);border-radius:4px;}
.sec{padding:20px 36px 0;}
.filterRow{display:flex;gap:8px;margin-bottom:14px;}
.chip{background:#fff;border:1px solid #dfdfdf;border-radius:2px;padding:5px 14px;font-size:12px;color:#282828;}
.chip.active{background:#ffb600;border-color:#ffb600;color:#1d1d1d;font-weight:700;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border:1px solid #dfdfdf;border-radius:4px;padding:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#282828;color:#ffb600;font-size:9px;font-weight:700;padding:3px 8px;border-radius:2px;text-transform:uppercase;}
.thumb{height:88px;border-radius:2px;margin-bottom:10px;}
.pname{font-size:13px;font-weight:600;color:#121212;}
.pprice{font-size:13px;color:#345caa;font-weight:700;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Nis America Store</div>
<div class="navlinks"><span>Games</span><span>Steelbooks</span><span>Art Books</span><span>Pre-Orders</span></div>
<div class="cartbadge">3</div>
</div>
<div class="hero">
<div class="herotext">
<div class="tag">Limited Edition</div>
<div class="headline">Own the shelf, not just the disc.</div>
<div class="sub">Steelbooks, art books, and collector's editions for the games worth keeping.</div>
<div class="btn">Shop Pre-Orders</div>
</div>
<div class="box"><div class="spine"></div><div class="spine2"></div></div>
</div>
<div class="sec">
<div class="filterRow"><div class="chip active">All</div><div class="chip">RPG</div><div class="chip">Steelbook</div><div class="chip">Art Book</div></div>
<div class="grid">
<div class="card"><div class="badge">Sold Out</div><div class="thumb" style="background:linear-gradient(135deg,#345caa,#1d1d1d)"></div><div class="pname">Disgaea 8 Steelbook</div><div class="pprice">$69.99</div></div>
<div class="card"><div class="badge">Pre-Order</div><div class="thumb" style="background:linear-gradient(135deg,#ffb600,#282828)"></div><div class="pname">Fell Seal Art Book</div><div class="pprice">$39.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#282828,#345caa)"></div><div class="pname">Collector's Pin Set</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#121212,#ffb600)"></div><div class="pname">Original Soundtrack CD</div><div class="pprice">$19.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: 0.02em; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1; letter-spacing: 0.12em; background: #222222; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1; letter-spacing: 0.12em; background: #ffffff; color: #121212;
border: 1px solid #222222; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.05em; background: #eeeeee; color: #888888;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Arial,sans-serif; color:#222222; }
*{box-sizing:border-box;}
.announce{height:36px;background:#121212;color:#fff;font-size:11px;letter-spacing:.08em;display:flex;align-items:center;justify-content:center;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.navside{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#222222;display:flex;gap:20px;}
.logo{font-weight:700;font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:#121212;}
.hero{height:280px;background:linear-gradient(160deg,#eeeeee,#222222 85%);display:flex;align-items:center;justify-content:center;text-align:center;position:relative;}
.hero:before{content:'';position:absolute;inset:0;background:rgba(18,18,18,0.48);}
.herotext{position:relative;z-index:2;color:#fff;}
.herotext h1{font-size:36px;font-weight:700;letter-spacing:-.5px;margin:0 0 16px;}
.herocta{display:inline-block;background:#fff;color:#121212;font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;padding:14px 30px;}
.grid{display:flex;gap:26px;padding:22px 32px 0;}
.card{width:190px;}
.thumb{height:190px;background:#eeeeee;margin-bottom:8px;}
.ptitle{font-size:13px;color:#121212;margin-bottom:2px;}
.pprice{font-size:12px;color:#222222;letter-spacing:.02em;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#ffffff;border-top:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.footer span{color:#222222;font-size:11px;letter-spacing:.05em;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">COMPLIMENTARY SHIPPING ON ALL ORDERS</div>
<div class="nav">
<div class="navside"><span>Jewelry</span><span>Rings</span></div>
<div class="logo">Sophie Buhai</div>
<div class="navside"><span>Account</span><span>Bag</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Everything resolved to the minimum necessary structure.</h1>
<div class="herocta">Shop New Arrivals</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c9a96e,#eeeeee)"></div><div class="ptitle">Wide Vermeil Cuff</div><div class="pprice">$680</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#dedede,#222222)"></div><div class="ptitle">Oxidized Signet Ring</div><div class="pprice">$420</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#888888,#eeeeee)"></div><div class="ptitle">Sterling Drop Earring</div><div class="pprice">$340</div></div>
</div>
<div class="footer"><span>© Sophie Buhai</span><span>Care · Returns</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8b8e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5b6bff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a0f; color: #5b6bff;
border: 1px solid #5b6bff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0a0f; color: #f5f5f5;
border: 1px solid #303034; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #171a35; color: #5b6bff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A0A0F; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; height:100%; }
.side { width:96px; background:#0A0A0F; border-right:1px solid #2A2A38; padding:28px 0; display:flex; flex-direction:column; align-items:center; gap:26px; }
.side .logo { width:36px; height:36px; border-radius:10px; background:linear-gradient(115deg,#5B6BFF,#9C6BFF); }
.side .ic { width:22px; height:22px; opacity:.4; }
.side .ic.on { opacity:1; background:#6B5BFF; border-radius:6px; }
.main { flex:1; padding:30px 34px; overflow:hidden; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.brand { font-size:15px; font-weight:700; color:#9A9AAA; letter-spacing:.4px; }
.avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#5B6BFF,#9C6BFF); }
.balance-label { font-size:11px; font-weight:700; letter-spacing:.6px; color:#6A6A7E; text-transform:uppercase; }
.balance { font-size:38px; font-weight:700; letter-spacing:-0.6px; margin-top:6px; }
.delta { display:inline-flex; align-items:center; gap:6px; margin-top:8px; background:#1C1B33; color:#1FD17B; font-size:12px; font-weight:600; padding:5px 12px; border-radius:999px; }
.grid { display:flex; gap:20px; margin-top:26px; }
.col-left { flex:1.15; }
.col-right { flex:1; display:flex; flex-direction:column; gap:14px; }
.card { background:#16161F; border:1px solid #2A2A38; border-radius:16px; }
.metal { height:170px; border-radius:16px; position:relative; overflow:hidden;
background:linear-gradient(150deg,#2c2c38 0%,#1a1a24 55%,#0e0e14 100%); padding:18px; }
.metal::after { content:''; position:absolute; top:-40px; left:-60px; width:180px; height:280px;
background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%); transform:rotate(20deg); }
.metal .wordmark { font-weight:700; font-size:14px; letter-spacing:.5px; }
.metal .num { position:absolute; bottom:18px; left:18px; font-size:15px; letter-spacing:2px; color:#e9e9f5; }
.metal .chip { position:absolute; top:18px; right:18px; width:34px; height:24px; border-radius:5px; background:linear-gradient(135deg,#e7c98a,#b8933f); }
.donut-card { padding:18px; margin-top:14px; }
.donut-row { display:flex; align-items:center; gap:18px; }
.donut { width:88px; height:88px; border-radius:50%;
background: conic-gradient(#5B6BFF 0deg 210deg, #28283A 210deg 360deg);
display:flex; align-items:center; justify-content:center; }
.donut-inner { width:62px; height:62px; border-radius:50%; background:#16161F; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.donut-inner b { font-size:15px; }
.donut-inner span { font-size:9px; color:#9A9AAA; }
.legend { flex:1; display:flex; flex-direction:column; gap:8px; }
.leg-row { display:flex; justify-content:space-between; font-size:12px; color:#9A9AAA; }
.leg-row .dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; }
.tile { background:#16161F; border:1px solid #2A2A38; border-radius:16px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; }
.tile .flag { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#3F9BFF,#1FD17B); margin-right:10px; }
.tile .code { font-size:14px; font-weight:600; }
.tile .name { font-size:11px; color:#9A9AAA; }
.tile .amt { font-size:15px; font-weight:700; }
.row-f { display:flex; align-items:center; }
.cta { margin-top:14px; background:linear-gradient(115deg,#5B6BFF,#9C6BFF); border-radius:16px; height:46px;
display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600;
box-shadow: rgba(108,91,255,0.30) 0 8px 20px; }
</style></head>
<body>
<div class="app">
<div class="side">
<div class="logo"></div>
<div class="ic on"></div><div class="ic"></div><div class="ic"></div><div class="ic"></div><div class="ic"></div>
</div>
<div class="main">
<div class="topbar"><div class="brand">Revolut (iOS)</div><div class="avatar"></div></div>
<div class="balance-label">Total balance</div>
<div class="balance">$24,820.55</div>
<div class="delta">▲ +$1,204.10 this month</div>
<div class="grid">
<div class="col-left">
<div class="metal">
<div class="wordmark">Revolut (iOS)</div>
<div class="chip"></div>
<div class="num">•••• 4821</div>
</div>
<div class="card donut-card">
<div class="donut-row">
<div class="donut"><div class="donut-inner"><b>$1,284</b><span>this month</span></div></div>
<div class="legend">
<div class="leg-row"><span><span class="dot" style="background:#5B6BFF"></span>Groceries</span><span>$412</span></div>
<div class="leg-row"><span><span class="dot" style="background:#9C6BFF"></span>Transport</span><span>$210</span></div>
<div class="leg-row"><span><span class="dot" style="background:#3F9BFF"></span>Dining</span><span>$188</span></div>
</div>
</div>
</div>
</div>
<div class="col-right">
<div class="tile"><div class="row-f"><div class="flag"></div><div><div class="code">USD</div><div class="name">US Dollar</div></div></div><div class="amt">$4,820.50</div></div>
<div class="tile"><div class="row-f"><div class="flag" style="background:linear-gradient(135deg,#F7C948,#9C6BFF)"></div><div><div class="code">EUR</div><div class="name">Euro</div></div></div><div class="amt">€1,120.00</div></div>
<div class="tile"><div class="row-f"><div class="flag" style="background:linear-gradient(135deg,#1FD17B,#3F9BFF)"></div><div><div class="code">GBP</div><div class="name">Sterling</div></div></div><div class="amt">£640.20</div></div>
<div class="cta">Add money</div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0066ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0066ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b5fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0066ff; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0066ff; color: #f5f5f5;
border: 1px solid #277dfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b5fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e66fd; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#171719; box-sizing:border-box;
font-family:"Pretendard Variable",-apple-system,sans-serif; }
* { box-sizing:border-box; }
header { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e8e9ea; }
.brand { font-weight:700; font-size:17px; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#171719; }
.acct { background:transparent; color:#0066ff; border:1px solid rgba(112,115,124,0.16); border-radius:8px;
padding:7px 14px; font-size:14px; }
.toolbar { display:flex; gap:10px; padding:14px 32px 8px; }
.filter { background:transparent; color:#171719; border:1px solid rgba(112,115,124,0.16); border-radius:8px;
padding:7px 11px; font-size:14px; }
.search { flex:1; background:#f8f8f8; border-radius:8px; padding:7px 14px; font-size:14px; color:#858688; }
.list { padding:6px 32px 20px; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.job { display:flex; gap:14px; padding:14px; border-radius:12px; }
.thumb { width:96px; height:72px; border-radius:12px; flex-shrink:0; }
.th1 { background:linear-gradient(135deg,#dbeafe,#0066ff); }
.th2 { background:linear-gradient(135deg,#fde68a,#f59e0b); }
.th3 { background:linear-gradient(135deg,#dcfce7,#16a34a); }
.th4 { background:linear-gradient(135deg,#fbcfe8,#db2777); }
.job .body h4 { font-size:16px; font-weight:600; margin:0 0 4px; }
.job .body .company { font-size:14px; color:#333333; margin:0 0 4px; }
.job .body .meta { font-size:12px; font-weight:500; color:#858688; }
</style></head>
<body>
<header>
<span class="brand">Wanted</span>
<div class="navlinks"><span>Jobs</span><span>Companies</span><span>Community</span><span>Resume</span></div>
<span class="acct">My account</span>
</header>
<div class="toolbar">
<span class="filter">All tags</span><span class="filter">Location</span><span class="filter">Career level</span>
<span class="search">Search role, company</span>
</div>
<div class="list">
<div class="job"><div class="thumb th1"></div><div class="body"><h4>Senior Frontend Engineer</h4><p class="company">Aurora Systems</p><span class="meta">Software · Seoul</span></div></div>
<div class="job"><div class="thumb th2"></div><div class="body"><h4>Product Designer</h4><p class="company">Northline Studio</p><span class="meta">Design · Seoul</span></div></div>
<div class="job"><div class="thumb th3"></div><div class="body"><h4>Backend Engineer, Payments</h4><p class="company">Kepler Labs</p><span class="meta">Software · Remote</span></div></div>
<div class="job"><div class="thumb th4"></div><div class="body"><h4>Growth Marketing Manager</h4><p class="company">Harborline</p><span class="meta">Marketing · Busan</span></div></div>
<div class="job"><div class="thumb th1"></div><div class="body"><h4>Data Analyst</h4><p class="company">Fieldstone</p><span class="meta">Data · Seoul</span></div></div>
<div class="job"><div class="thumb th3"></div><div class="body"><h4>DevOps Engineer</h4><p class="company">Meridian Cloud</p><span class="meta">Infra · Remote</span></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; letter-spacing: -0.25px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #555555;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #ff5268; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#222; font-family:'Nunito Sans','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #e9e9e9;}
.logo{font-weight:700;font-size:17px;color:#108474;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;}
.hero{background:#edf5f5;padding:26px 30px;display:flex;align-items:center;gap:26px;}
.hero .text{flex:1;}
.hero h1{font-size:30px;font-weight:700;margin:0 0 8px;color:#108474;}
.hero p{font-size:14px;color:#555;margin:0 0 14px;max-width:340px;}
.cta{display:inline-block;background:#108474;color:#fff;font-weight:600;font-size:15px;padding:12px 24px;border-radius:8px;}
.cta.pink{background:#db7093;margin-left:8px;}
.hero .img{flex:1;height:130px;border-radius:12px;background:linear-gradient(135deg,#c1e6e6,#108474);}
.section{padding:20px 30px;}
.tags{display:flex;gap:8px;margin-bottom:14px;}
.tag{background:#fff;border:1px solid #dadada;font-size:13px;padding:6px 16px;border-radius:9999px;}
.tag.active{background:#108474;color:#fff;border-color:#108474;}
.grid{display:flex;gap:16px;}
.card{flex:1;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.06);overflow:hidden;position:relative;}
.badge{position:absolute;top:10px;left:10px;font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:4px;color:#fff;}
.b1{background:#ff5268;}
.b2{background:#db7093;}
.card .img{aspect-ratio:4/3;height:100px;border-radius:12px 12px 0 0;}
.d1{background:linear-gradient(135deg,#c1e6e6,#108474);}
.d2{background:linear-gradient(135deg,#fbcd0a,#db7093);}
.d3{background:linear-gradient(135deg,#edf5f5,#7b7b7b);}
.info{padding:10px 14px;}
.card h3{font-size:15px;font-weight:600;margin:0 0 3px;}
.card .price{font-size:14px;color:#555;}
.stars{color:#fbcd0a;font-size:13px;margin-bottom:4px;}
</style>
<div class="nav">
<div class="logo">Diaper Dabbler</div>
<div class="navlinks"><span>Diaper Boxes</span><span>Wipes</span><span>Bundles</span><span>Reviews</span></div>
</div>
<div class="hero">
<div class="text">
<h1>Try before you commit a whole pack.</h1>
<p>Sample multiple diaper brands in one box — find what fits your little one.</p>
<a class="cta">Shop Samplers</a><a class="cta pink">Limited Offer</a>
</div>
<div class="img"></div>
</div>
<div class="section">
<div class="tags"><div class="tag active">All Sizes</div><div class="tag">Newborn</div><div class="tag">Size 3</div><div class="tag">Overnight</div></div>
<div class="grid">
<div class="card"><span class="badge b1">Sale</span><div class="img d1"></div><div class="info"><div class="stars">★★★★★</div><h3>Sampler Box – 6 Brands</h3><div class="price">$24.99</div></div></div>
<div class="card"><span class="badge b2">New</span><div class="img d2"></div><div class="info"><div class="stars">★★★★☆</div><h3>Overnight Sampler</h3><div class="price">$19.99</div></div></div>
<div class="card"><div class="img d3"></div><div class="info"><div class="stars">★★★★★</div><h3>Wipes Trial Pack</h3><div class="price">$12.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #d3232e; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #ffffff; color: #121212;
border: 1px solid #d3232e; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #89bf87; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Fira Sans',Georgia,'Times New Roman',serif; background:#ffffff; color:#121212; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dedede;}
.logo{font-size:19px;font-weight:600;color:#d3232e;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;}
.navlinks .a{color:#d3232e;}
.sec{padding:22px 40px 0;}
.sectitle{font-size:20px;font-weight:600;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:196px;background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.08);}
.thumb{aspect-ratio:3/4;height:150px;border-radius:8px 8px 0 0;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#89bf87;color:#121212;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.badge.new{background:#243fa1;color:#fff;}
.cbody{padding:8px 14px 14px;}
.ctitle{font-size:16px;font-weight:600;}
.cauthor{font-size:13px;color:#666666;margin-top:2px;}
.cprice{font-size:16px;font-weight:600;margin-top:6px;}
.cprice.sale{color:#89bf87;font-weight:700;}
.strip{display:flex;height:150px;background:#f5f5f5;margin:0 40px;border-radius:8px;align-items:center;padding:0 24px;justify-content:space-between;}
.stript{max-width:440px;}
.stript h1{font-size:24px;font-weight:600;margin:0 0 8px;}
.stript p{font-size:14px;color:#333333;margin:0;}
.stripbtn{background:#d3232e;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;border-radius:8px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:0;}
</style>
<div class="wrap">
<div class="nav"><div class="logo">Nyrb</div><div class="navlinks"><span class="a">New Releases</span><span>Classics</span><span>Poetry</span><span>Children's</span></div></div>
<div class="sec">
<div class="strip"><div class="stript"><h1>Recent Releases & Staff Picks</h1><p>Curated by the imprint's own editors — no bestseller carousel required.</p></div><div class="stripbtn">Browse the Catalog</div></div>
</div>
<div class="sec">
<div class="sectitle">Recently Released</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#d3232e,#7a1216)"><div class="badge new">New</div></div><div class="cbody"><div class="ctitle">The Weight of Winter Light</div><div class="cauthor">Marguerite Aulnay</div><div class="cprice">$18.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#243fa1,#0d1e55)"></div><div class="cbody"><div class="ctitle">Letters from the Interior</div><div class="cauthor">Halvard Ness</div><div class="cprice">$17.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#89bf87,#4f7a4d)"><div class="badge">Sale</div></div><div class="cbody"><div class="ctitle">A Provincial Education</div><div class="cauthor">Renata Kolb</div><div class="cprice sale">$12.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#666666,#2a2a2a)"></div><div class="cbody"><div class="ctitle">The Committee of Silences</div><div class="cauthor">Otis Farrow</div><div class="cprice">$19.00</div></div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #17b6c9; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #17b6c9; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2be0ec; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #17b6c9; color: #000000;
border: 1px solid #2be0ec; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #17b6c9; color: #000000;
border: 1px solid #3bc0d0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1abdcf; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fdfdfd; color:#1b2028; box-sizing:border-box;
font-family:"Noto Sans TC", "Montserrat", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:18px; font-weight:700; color:#17b6c9; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#364053; font-weight:500; }
.btn-sec { border:2px solid #17b6c9; color:#17b6c9; border-radius:9999px; padding:8px 18px; font-size:13px; font-weight:500; }
.hero { position:relative; padding:24px 32px 26px; text-align:center; overflow:hidden; }
.blob { position:absolute; border-radius:50%; opacity:0.5; }
.blob1 { width:200px; height:200px; background:radial-gradient(circle,#64cedb,transparent 70%); top:-60px; left:-40px; }
.blob2 { width:220px; height:220px; background:radial-gradient(circle,#dafa5f,transparent 70%); bottom:-90px; right:-50px; }
.hero-in { position:relative; z-index:1; }
.hero h1 { font-size:38px; font-weight:700; letter-spacing:-1px; margin:0 0 12px; color:#2a3342; }
.hero p { font-size:15px; color:#727d8c; margin:0 0 20px; }
.btn-xl { display:inline-block; border-radius:9999px; background:radial-gradient(circle at 30% 30%,#64cedb,#15a6b7); color:#fdfdfd; padding:14px 40px; font-size:18px; font-weight:500;
box-shadow:0px 10px 24px rgba(23,182,201,0.3); }
.cards { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:8px 32px 24px; }
.card { background:#fdfdfd; border-radius:16px; padding:18px;
box-shadow:0px 10px 34px rgba(102,102,102,0.12), inset -2px -2px 8px rgba(84,92,101,0.08); }
.titlebar { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.titlebar .bar { width:4px; height:20px; background:#17b6c9; border-radius:2px; }
.card h3 { font-size:16px; font-weight:500; margin:0; color:#2a3342; }
.card p { font-size:12px; color:#727d8c; margin:8px 0 0; line-height:1.6; }
.card .tag { display:inline-block; margin-top:10px; background:#ecf9fa; color:#17b6c9; border-radius:9999px; padding:3px 12px; font-size:11px; }
.promo { margin:0 32px; background:#f3f5f6; border-radius:16px; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; }
.promo h4 { font-size:16px; font-weight:500; margin:0; color:#2a3342; }
.promo .amt { color:#17b6c9; font-weight:700; }
footer { position:absolute; bottom:0; left:0; right:0; padding:12px 32px; display:flex; justify-content:space-between; font-size:11px; color:#b6bec7; }
</style></head>
<body style="position:relative">
<nav>
<span class="brand">Richart</span>
<div class="navlinks"><span>Deposits</span><span>Credit Cards</span><span>Investing</span><span>Loans</span></div>
<span class="btn-sec">Open an Account</span>
</nav>
<section class="hero">
<span class="blob blob1"></span><span class="blob blob2"></span>
<div class="hero-in">
<h1>The Bank That Helps Young People Save</h1>
<p>Open an account in minutes and manage every purchase and saving with ease</p>
<span class="btn-xl">Open an Account</span>
</div>
</section>
<div class="cards">
<div class="card"><div class="titlebar"><span class="bar"></span><h3>Digital Savings Account</h3></div><p>Free interbank transfers, so your money moves freely.</p><span class="tag">New Customer Offer</span></div>
<div class="card"><div class="titlebar"><span class="bar"></span><h3>Richart Cashback Card</h3></div><p>Up to 5% cashback on daily spending, zero foreign transaction fees abroad.</p><span class="tag">Most Popular</span></div>
<div class="card"><div class="titlebar"><span class="bar"></span><h3>Smart Robo-Advisor</h3></div><p>Start investing from NT$1,000, let AI manage your portfolio.</p><span class="tag">Beginner Friendly</span></div>
</div>
<div class="promo">
<h4>New customer bonus — get up to <span class="amt">NT$1,500</span> cashback</h4>
<span class="btn-sec">Learn About the Offer</span>
</div>
<footer>
<span>© Richart · Taishin International Bank</span>
<span>Deposits · Credit Cards · Wealth Management · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #111111; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: transparent; color: #111111;
border: 1px solid #111111; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #333333;
border: 1px solid #bfbfbf; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.1; letter-spacing: 0.5px; background: #111111; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f9f9; color:#333333; font-family:'Roboto Condensed','Roboto',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;background:#f9f9f9;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dcdcdc;}
.logo{font-family:'HelveticaNeueLTStd-BlkCn','Helvetica Neue',Arial,sans-serif;font-size:19px;font-weight:700;color:#111111;letter-spacing:-.3px;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#111111;}
.hero{height:220px;background:#111111;display:flex;align-items:center;padding:0 40px;}
.herotext h1{font-family:'HelveticaNeueLTStd-BlkCn','Helvetica Neue',Arial,sans-serif;font-size:34px;font-weight:700;color:#fff;line-height:1.1;margin:0 0 8px;max-width:400px;}
.herotext p{font-size:15px;color:#dcdcdc;margin:0 0 16px;}
.cta{display:inline-block;background:#fff;color:#111111;font-size:16px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:14px 30px;border-radius:9999px;}
.catgrid{display:flex;gap:12px;padding:16px 32px 0;}
.catcard{width:160px;background:#fff;border:1px solid #dcdcdc;border-radius:4px;padding:16px;text-align:center;}
.catcard.active{border:2px solid #111111;}
.catcard .name{font-family:'Roboto Condensed',sans-serif;font-size:16px;font-weight:600;color:#111111;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:200px;background:#fff;border-radius:4px;overflow:hidden;position:relative;}
.thumb{aspect-ratio:1/1;height:130px;border-radius:4px 4px 0 0;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:2px;color:#fff;}
.ptitle{font-size:15px;font-weight:600;color:#111111;padding:8px 12px 2px;}
.pprice{font-size:16px;font-weight:700;color:#111111;padding:0 12px 12px;}
.pprice.sale{color:#cc0000;}
.footer{position:absolute;bottom:0;left:0;right:0;height:46px;background:#111111;color:#dcdcdc;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Supcase</div>
<div class="navlinks"><span>iPhone</span><span>Galaxy</span><span>iPad</span><span>Accessories</span></div>
</div>
<div class="hero">
<div class="herotext"><h1>Gear Up. Stay Unbreakable.</h1><p>Rugged cases built to survive a 6-foot drop, not just look good in a photo.</p><div class="cta">Shop Cases</div></div>
</div>
<div class="catgrid">
<div class="catcard active"><div class="name">iPhone 15</div></div>
<div class="catcard"><div class="name">Galaxy S24</div></div>
<div class="catcard"><div class="name">iPad Pro</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#111111,#666666)"></div><span class="badge" style="background:#111111">New</span><div class="ptitle">Unicorn Beetle Pro</div><div class="pprice">$34.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#333333,#999999)"></div><span class="badge" style="background:#cc0000">Sale</span><div class="ptitle">UB Pro Kickstand Case</div><div class="pprice sale">$24.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#555555,#d1d1d1)"></div><div class="ptitle">Aegis Series Rugged</div><div class="pprice">$29.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#111111,#d1d1d1)"></div><div class="ptitle">Clear Slim Case</div><div class="pprice">$19.99</div></div>
</div>
<div class="footer"><span>© Supcase</span><span>Warranty Drop Test Results</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0093c1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0093c1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #008fc7; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0093c1; color: #000000;
border: 1px solid #008fc7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0093c1; color: #f5f5f5;
border: 1px solid #27a3c9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0092c2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0c0e1f; box-sizing:border-box;
font-family: Roboto, "Noto Sans TC", "Microsoft JhengHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; flex-direction:column; height:640px; }
nav { height:60px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #d7d6db; }
.logo { font-size:19px; font-weight:700; color:#0093c1; }
.navlinks { display:flex; gap:26px; font-size:15px; font-weight:400; color:#0c0e1f; }
.navlinks .active { color:#0093c1; border-bottom:2px solid #0093c1; padding-bottom:4px; }
.navright { display:flex; align-items:center; gap:14px; font-size:13px; color:#494a57; }
.hero { flex:0 0 auto; background:#f3fbfe; padding:20px 32px; display:flex; align-items:center; justify-content:space-between; }
.hero h1 { font-size:24px; font-weight:400; line-height:1.35; margin:0 0 6px; color:#0c0e1f; }
.hero p { font-size:14px; color:#494a57; margin:0; }
.herobtn { background:#008fc7; color:#ffffff; border-radius:0px; height:44px; padding:0 22px; display:flex;
align-items:center; font-size:14px; font-weight:400; white-space:nowrap; }
.iconsec { flex:0 0 auto; padding:16px 32px 6px; }
.iconsec .lbl { font-size:13px; font-weight:700; color:#0c0e1f; margin-bottom:10px; }
.icongrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.icell { display:flex; flex-direction:column; align-items:center; gap:6px; }
.icircle { width:40px; height:40px; border-radius:50%; background:#0093c1; display:flex; align-items:center;
justify-content:center; color:#ffffff; font-size:15px; font-weight:700; }
.icell span { font-size:11px; color:#494a57; text-align:center; }
.cardsrow { flex:1 1 auto; display:flex; gap:18px; padding:14px 32px 22px; min-height:0; }
.card-white { flex:1.3; background:#ffffff; border-radius:0px; box-shadow:rgba(0,0,0,0.11) 5px 5px 30px 0px;
padding:16px 18px; min-width:0; }
.card-white h3 { font-size:16px; font-weight:700; margin:0 0 10px; color:#0c0e1f; }
.fxrow { display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px solid #f5f5f5;
color:#0c0e1f; }
.fxrow span:last-child { color:#494a57; }
.card-sky { flex:1; background:#f5f5f5; border-radius:0px; padding:16px 18px; display:flex; flex-direction:column;
justify-content:space-between; min-width:0; }
.card-sky h3 { font-size:16px; font-weight:700; margin:0 0 8px; color:#0c0e1f; }
.card-sky p { font-size:12px; color:#494a57; line-height:1.5; margin:0 0 10px; }
.badge-teal { display:inline-block; background:#00a59b; color:#ffffff; border-radius:4px; padding:3px 8px; font-size:11px; align-self:flex-start; }
.learnmore { color:#0093c1; font-size:13px; font-weight:500; margin-top:8px; }
</style></head>
<body>
<div class="wrap">
<nav>
<div class="logo">Fubon</div>
<div class="navlinks">
<span class="active">Personal Banking</span><span>Credit Cards</span><span>Loans</span><span>Insurance</span><span>Wealth Management</span>
</div>
<div class="navright"><span>Search</span><span>Log In</span></div>
</nav>
<div class="hero">
<div>
<h1>Positive Power. Endless Possibility.</h1>
<p>Banking, insurance, and investment — one trusted group for every stage of life.</p>
</div>
<div class="herobtn">Learn More</div>
</div>
<div class="iconsec">
<div class="lbl">Popular Services</div>
<div class="icongrid">
<div class="icell"><div class="icircle">$</div><span>Transfer</span></div>
<div class="icell"><div class="icircle">FX</div><span>Exchange Rate</span></div>
<div class="icell"><div class="icircle">CC</div><span>Credit Card</span></div>
<div class="icell"><div class="icircle">%</div><span>Loans</span></div>
</div>
</div>
<div class="cardsrow">
<div class="card-white">
<h3>Foreign Exchange Rate</h3>
<div class="fxrow"><span>USD / TWD</span><span>31.42</span></div>
<div class="fxrow"><span>JPY / TWD</span><span>0.2109</span></div>
<div class="fxrow"><span>EUR / TWD</span><span>34.08</span></div>
<div class="fxrow" style="border-bottom:none;"><span>CNY / TWD</span><span>4.372</span></div>
</div>
<div class="card-sky">
<div>
<span class="badge-teal">Sustainable</span>
<h3 style="margin-top:10px;">All-Round Protection</h3>
<p>Digital account opening, savings, and insurance in one connected app — Fubon+.</p>
</div>
<div class="learnmore">Learn More →</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f1efea; color: #2b2b2b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f1efea; color: #2b2b2b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.5; margin: 0; color: #2b2b2b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ed1c24; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f1efea; color: #2b2b2b;
border: 1px solid #ed1c24; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f1efea; color: #2b2b2b;
border: 1px solid #c0beba; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ed1c24; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Gill Sans','Gill Sans MT',Calibri,sans-serif; background:#f1efea; color:#494949; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:58px;background:#ffffff;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #dedede;}
.logo{font-family:'Baskerville','Garamond',serif;font-size:22px;font-weight:700;color:#2b2b2b;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;color:#494949;}
.navlinks span:first-child{color:#ed1c24;}
.hero{height:210px;display:flex;align-items:center;padding:0 40px;background:#f1f1f1;}
.heroText{width:50%;}
.h1{font-family:'Baskerville','Garamond',serif;font-size:32px;font-weight:700;color:#2b2b2b;line-height:1.2;margin:0 0 12px;}
.sub{font-size:15px;color:#767676;margin:0 0 16px;max-width:300px;font-style:italic;}
.cta{display:inline-block;background:#ed1c24;color:#fff;font-family:'Gill Sans','Gill Sans MT',sans-serif;font-size:14px;font-weight:600;padding:11px 24px;border-radius:8px;width:fit-content;}
.heroImg{width:50%;height:150px;background:#3a4570;border-radius:8px;position:relative;}
.spine{position:absolute;width:14px;height:120px;top:15px;background:#495588;border-radius:2px;}
.s1{left:60px;}
.s2{left:82px;background:#ed1c24;}
.s3{left:104px;}
.bookmark{position:absolute;width:10px;height:60px;background:#ffee58;top:0;left:98px;}
.sec{padding:16px 40px 0;}
.secTitle{font-family:'Baskerville','Garamond',serif;font-size:19px;font-weight:600;color:#2b2b2b;margin-bottom:12px;}
.grid{display:flex;gap:16px;}
.card{width:198px;background:#ffffff;border-radius:8px;padding:12px;}
.thumb{height:98px;border-radius:6px;margin-bottom:10px;}
.ptitle{font-family:'Baskerville','Garamond',serif;font-size:15px;font-weight:600;color:#2b2b2b;line-height:1.3;height:36px;overflow:hidden;}
.pprice{font-size:14px;font-weight:600;color:#ed1c24;margin-top:6px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Poetry Foundation Shop</div>
<div class="navlinks"><span>New Releases</span><span>Poetry</span><span>Anthologies</span><span>Gifts</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Where every line earns its margin.</div>
<div class="sub">A reading room for poetry — new voices, essential anthologies, and quiet company.</div>
<div class="cta">Browse New Releases</div>
</div>
<div class="heroImg"><div class="spine s1"></div><div class="spine s2"></div><div class="spine s3"></div><div class="bookmark"></div></div>
</div>
<div class="sec">
<div class="secTitle">Editors' Picks</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ed1c24,#3a4570);"></div><div class="ptitle">Collected Poems, New Edition</div><div class="pprice">$18.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#495588,#3a4570);"></div><div class="ptitle">An Anthology of American Verse</div><div class="pprice">$24.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3a4570,#00b2ff);"></div><div class="ptitle">Debut Collection: First Light</div><div class="pprice">$16.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffee58,#3a4570);"></div><div class="ptitle">Poetry Foundation Tote Bag</div><div class="pprice">$14.00</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.38; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #c8102e; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #1a2b4a;
border: 1px solid #1a2b4a; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.33; letter-spacing: 0.1px; background: #c8102e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:'Open Sans', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; background:#fff; border-bottom:1px solid #e8e8e8; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.brand { font-family:'Montserrat',Arial,sans-serif; font-weight:700; font-size:19px; color:#1a2b4a; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-family:'Montserrat',Arial,sans-serif; font-size:14px; font-weight:600; color:#1a1a1a; }
.hero { height:220px; background:#1a2b4a; display:flex; align-items:center; padding:0 32px; }
.hero h1 { color:#fff; font-family:'Montserrat',Arial,sans-serif; font-weight:700; font-size:36px; margin:0 0 14px;
letter-spacing:-0.5px; max-width:460px; }
.btn { display:inline-block; background:#c8102e; color:#fff; font-family:'Montserrat',Arial,sans-serif; font-size:14px;
font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:16px 32px; border-radius:4px; }
.tiles { display:flex; gap:14px; padding:16px 32px; }
.tile { flex:1; background:#f5f5f5; border-radius:8px; aspect-ratio:4/3; height:100px; display:flex;
align-items:flex-end; padding:10px; font-family:'Montserrat',sans-serif; font-weight:600; font-size:13px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:0 32px; }
.card { background:#fff; border:1px solid #e8e8e8; border-radius:8px; padding:10px; }
.cover { height:80px; background:#f5f5f5; border-radius:4px; margin-bottom:8px; }
.t { font-family:'Montserrat',sans-serif; font-size:13px; font-weight:600; margin:0 0 4px; }
.p { font-family:'Montserrat',sans-serif; font-weight:700; font-size:16px; color:#1a1a1a; }
.badge { display:inline-block; background:#c8102e; color:#fff; font-size:10px; font-weight:700; letter-spacing:0.4px;
text-transform:uppercase; padding:2px 8px; border-radius:4px; margin-bottom:6px; }
footer { position:absolute; bottom:0; left:0; right:0; height:44px; background:#1a2b4a; color:#fff; opacity:0.9;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
</style></head>
<body>
<nav>
<div class="brand">Farberware</div>
<div class="navlinks"><span>Dishwashers</span><span>Countertop Ovens</span><span>Coffee Makers</span><span>Cookware</span></div>
</nav>
<div class="hero"><h1>126 years of stamped-steel heritage</h1><span class="btn">Shop Countertop Ovens</span></div>
<div class="tiles">
<div class="tile" style="background:linear-gradient(160deg,#e5e5e5,#c9c9c9);">Dishwashers</div>
<div class="tile" style="background:linear-gradient(160deg,#dbe3ee,#b9c8de);">Countertop Ovens</div>
<div class="tile" style="background:linear-gradient(160deg,#e8dede,#d4b6b6);">Coffee Makers</div>
<div class="tile" style="background:linear-gradient(160deg,#dedede,#bcbcbc);">Cookware</div>
</div>
<div class="grid">
<div class="card"><div class="cover"></div><span class="badge">Sale</span><p class="t">Air Fryer Toaster Oven</p><p class="p">$129.00</p></div>
<div class="card"><div class="cover"></div><p class="t">12-Cup Coffee Maker</p><p class="p">$59.00</p></div>
<div class="card"><div class="cover"></div><span class="badge" style="background:#1a2b4a;">New</span><p class="t">Stainless Dishwasher</p><p class="p">$549.00</p></div>
<div class="card"><div class="cover"></div><p class="t">Nonstick Cookware Set</p><p class="p">$149.00</p></div>
</div>
<footer><span>© Farberware — Kitchen appliances since 1900</span><span>Support · Warranty · Parts</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7d7d7d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #2768b1; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #ffffff; color: #2768b1;
border: 1px solid #2768b1; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7d7d7d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #eb322f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Open Sans',Arial,Helvetica,sans-serif; color:#111111; }
*{box-sizing:border-box;}
.utility{height:36px;background:#242f3a;color:#fff;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 24px;font-size:12px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #e8e8e8;}
.logo{font-family:'Oxanium',sans-serif;font-size:20px;font-weight:700;color:#2768b1;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;color:#111;}
.catstrip{height:44px;background:#f6f6f6;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;gap:26px;padding:0 24px;font-size:14px;font-weight:600;color:#333f48;}
.catstrip .active{color:#2768b1;border-bottom:2px solid #2768b1;padding-bottom:12px;}
.hero{background:#242f3a;color:#fff;padding:30px 40px;display:flex;align-items:center;}
.herotext{max-width:480px;}
.eyebrow{color:#eb322f;font-family:'Oxanium',sans-serif;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:10px;}
.herotext h1{font-family:'Oxanium',sans-serif;font-size:40px;font-weight:700;line-height:1.1;margin:0 0 12px;}
.herotext p{font-size:16px;color:#c8ced3;margin:0 0 18px;}
.btnrow{display:flex;gap:10px;}
.btn-primary{background:#2768b1;color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;padding:12px 24px;}
.btn-ghost{background:transparent;border:1px solid #fff;color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;padding:11px 23px;}
.grid{display:flex;gap:14px;padding:20px 24px 0;}
.card{flex:1;border:1px solid #e8e8e8;border-radius:8px;padding:14px;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#eb322f;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.thumb{height:90px;background:#f6f6f6;border-radius:4px;margin-bottom:10px;}
.pname{font-size:15px;font-weight:600;}
.pprice{font-size:20px;font-weight:700;margin-top:4px;}
.stars{color:#c07600;font-size:13px;margin-top:4px;}
</style>
<div class="utility">Free shipping over $50 | Store Locator | Sign In</div>
<div class="nav">
<div class="logo">Rowenta</div>
<div class="navlinks"><div>Steam Irons</div><div>Vacuums</div><div>Hair Care</div><div>Small Kitchen</div></div>
</div>
<div class="catstrip"><span class="active">EcoFlow Steam</span><span>Cordless Vacuums</span><span>Air Force Series</span></div>
<div class="hero">
<div class="herotext">
<div class="eyebrow">Steam Technology</div>
<h1>Precision, engineered.</h1>
<p>Instrument-panel-grade appliances built for warm domestic interiors, not sterile labs.</p>
<div class="btnrow"><div class="btn-primary">Shop Steam Irons</div><div class="btn-ghost">Compare Models</div></div>
</div>
</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb"></div><div class="pname">Focus Steam Iron</div><div class="pprice">$79.99</div><div class="stars">★★★★★ (412)</div></div>
<div class="card"><div class="thumb"></div><div class="pname">X-Force Flex Vacuum</div><div class="pprice">$349.99</div><div class="stars">★★★★☆ (203)</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Air Force Hair Dryer</div><div class="pprice">$129.99</div><div class="stars">★★★★★ (98)</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.33; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #c8202d; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #c8202d;
border: 1px solid #c8202d; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f47920; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Elenco</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#1a1a1a; font-family:'Open Sans','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.utility { height:28px; background:#1e3a6e; color:#fff; display:flex; align-items:center; justify-content:center;
gap:24px; font-size:11px; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:2px solid #c8202d; }
.logo { font-weight:700; font-size:20px; color:#1e3a6e; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:600; }
.navlinks span.edu { color:#c8202d; }
.btn { background:#c8202d; color:#fff; border-radius:8px; padding:10px 20px; font-size:13px; font-weight:700; text-transform:uppercase; }
.educator { background:#c8202d; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:14px 32px; }
.educator b { font-size:15px; } .educator span { font-size:12px; color:#f9d0d0; }
.educator-btn { border:2px solid #fff; color:#fff; border-radius:8px; padding:8px 18px; font-size:12px; font-weight:700; text-transform:uppercase; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:18px 32px; }
.card { background:#fff; border:1px solid #e0e0e0; border-radius:8px; padding:14px; position:relative; }
.thumb { height:80px; border-radius:4px; margin-bottom:8px; position:relative; }
.t1 { background:linear-gradient(160deg,#ffd8a0,#f47920); }
.t2 { background:linear-gradient(160deg,#c9d6ea,#1e3a6e); }
.t3 { background:linear-gradient(160deg,#ffc2c6,#c8202d); }
.t4 { background:linear-gradient(160deg,#e0e0e0,#666); }
.age { position:absolute; top:6px; left:6px; background:#f47920; color:#fff; font-size:10px; font-weight:700;
border-radius:9999px; padding:3px 10px; text-transform:uppercase; }
.skill { display:inline-block; background:#f5f5f5; border:1px solid #e0e0e0; color:#333; font-size:10px; text-transform:uppercase;
border-radius:4px; padding:2px 8px; margin-bottom:6px; }
.name { font-size:14px; font-weight:600; margin:0 0 4px; }
.price { font-size:16px; font-weight:700; }
</style></head>
<body>
<div class="utility">Order Tracking · Educator Pricing · Dealer Locator</div>
<nav>
<div class="logo">Elenco</div>
<div class="navlinks"><span>Snap Circuits</span><span>Electronics</span><span>Physics</span><span class="edu">Educator Resources</span></div>
<div class="btn">Shop Kits</div>
</nav>
<div class="educator">
<div><b>Bring Snap Circuits to your classroom.</b> <span>Bulk pricing for schools and libraries.</span></div>
<div class="educator-btn">Get a Quote</div>
</div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="age">Ages 8+</span></div><span class="skill">Beginner</span><p class="name">Snap Circuits Jr.</p><p class="price">$29.99</p></div>
<div class="card"><div class="thumb t2"><span class="age">Ages 10+</span></div><span class="skill">Intermediate</span><p class="name">Snap Circuits Extreme</p><p class="price">$79.99</p></div>
<div class="card"><div class="thumb t3"><span class="age">Ages 12+</span></div><span class="skill">Advanced</span><p class="name">Physics Force & Motion Kit</p><p class="price">$49.99</p></div>
<div class="card"><div class="thumb t4"><span class="age">Ages 14+</span></div><span class="skill">Advanced</span><p class="name">100-in-1 Electronic Lab</p><p class="price">$59.99</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f47521; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #f47521;
border: 1px solid #f47521; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #271305; color: #f47521;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { position:relative; width:960px; height:640px; }
.hero { position:relative; width:960px; height:340px; overflow:hidden;
background:linear-gradient(135deg,#3a1f0d,#1a1220 45%,#0d1a1c); }
.hero::before { content:''; position:absolute; inset:0;
background:radial-gradient(circle at 30% 20%, rgba(244,117,33,0.25), transparent 55%),
radial-gradient(circle at 75% 60%, rgba(43,182,115,0.16), transparent 50%); }
.scrim { position:absolute; left:0; right:0; bottom:0; height:220px;
background:linear-gradient(180deg, transparent, rgba(0,0,0,0.55) 55%, #000 100%); }
.topcontrols { position:absolute; top:0; left:0; right:0; height:44px; display:flex; align-items:center;
justify-content:space-between; padding:0 20px; z-index:3; }
.back { width:22px; height:22px; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(45deg); }
.topicons { display:flex; gap:16px; }
.topicons span { width:20px; height:20px; border-radius:4px; background:rgba(255,255,255,0.5); }
.badgerow { position:absolute; left:26px; bottom:130px; display:flex; gap:8px; z-index:3; }
.badge { font-size:11px; font-weight:900; letter-spacing:0.04em; text-transform:uppercase;
padding:4px 6px; border-radius:4px; }
.badge.sim { background:#2BB673; color:#fff; }
.badge.prem { background:#FFC107; color:#1A1304; }
.hero-title { position:absolute; left:26px; bottom:86px; font-size:28px; font-weight:900; letter-spacing:-0.5px; z-index:3; }
.hero-meta { position:absolute; left:26px; bottom:64px; font-size:14px; color:#D8D8D8; z-index:3; }
.cta-row { position:absolute; left:26px; right:26px; bottom:18px; display:flex; gap:10px; z-index:3; }
.btn-play { flex:1; height:44px; background:#F47521; border-radius:8px; display:flex; align-items:center;
justify-content:center; gap:8px; font-size:15px; font-weight:900; letter-spacing:0.3px; }
.btn-play::before { content:''; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent;
border-left:10px solid #fff; }
.btn-watchlist { width:44px; height:44px; border-radius:8px; border:1.5px solid rgba(255,255,255,0.4);
display:flex; align-items:center; justify-content:center; font-size:18px; }
.actionrow { display:flex; gap:34px; padding:14px 26px 6px; }
.action-item { display:flex; flex-direction:column; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#A0A0A0; }
.action-item .ic { width:22px; height:22px; border:2px solid #A0A0A0; border-radius:5px; }
.segrow { display:flex; gap:24px; padding:10px 26px; border-bottom:1px solid #2A2C31; }
.seg { font-size:14px; font-weight:900; color:#A0A0A0; padding-bottom:8px; position:relative; }
.seg.active { color:#fff; }
.seg.active::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:#F47521; border-radius:2px; }
.eplist { padding:8px 26px; display:flex; flex-direction:column; }
.eprow { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid #2A2C31; }
.epthumb { position:relative; width:112px; height:64px; border-radius:6px; flex-shrink:0;
background:linear-gradient(135deg,#2a1a30,#12222a); }
.epnum { position:absolute; top:4px; left:4px; background:rgba(0,0,0,0.7); color:#fff; font-size:10px;
font-weight:900; padding:2px 6px; border-radius:3px; }
.epprog-track { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,0.25); }
.epprog-fill { position:absolute; left:0; bottom:0; height:3px; background:#F47521; }
.eptext b { display:block; font-size:15px; font-weight:700; margin-bottom:3px; }
.eptext span { font-size:13px; color:#A0A0A0; line-height:1.35; }
.subdub { position:absolute; top:44px; right:26px; z-index:3; display:flex; border:1px solid rgba(255,255,255,0.5);
border-radius:6px; overflow:hidden; }
.subdub div { padding:5px 12px; font-size:11px; font-weight:900; }
.subdub .on { background:#F47521; }
</style></head>
<body>
<div class="shell">
<div class="hero">
<div class="scrim"></div>
<div class="topcontrols"><div class="back"></div><div class="topicons"><span></span><span></span></div></div>
<div class="subdub"><div class="on">SUB</div><div>DUB</div></div>
<div class="badgerow"><span class="badge sim">Simulcast</span></div>
<div class="hero-title">Crunchyroll (iOS)</div>
<div class="hero-meta">★ 4.9 · 2026 · TV-14 · Action, Fantasy</div>
<div class="cta-row"><div class="btn-play">Resume E7</div><div class="btn-watchlist">+</div></div>
</div>
<div class="actionrow">
<div class="action-item"><span class="ic"></span>Watchlist</div>
<div class="action-item"><span class="ic"></span>Rate</div>
<div class="action-item"><span class="ic"></span>Share</div>
<div class="action-item"><span class="ic"></span>Comments</div>
</div>
<div class="segrow">
<div class="seg active">Episodes</div>
<div class="seg">Details</div>
<div class="seg">More Like This</div>
</div>
<div class="eplist">
<div class="eprow">
<div class="epthumb"><span class="epnum">E7</span><div class="epprog-track"></div><div class="epprog-fill" style="width:64%"></div></div>
<div class="eptext"><b>E7 — The Blade Awakens</b><span>The squad regroups at the border outpost as a new threat emerges from the fog.</span></div>
</div>
<div class="eprow">
<div class="epthumb"><span class="epnum">E8</span></div>
<div class="eptext"><b>E8 — Ashes of Tomorrow</b><span>A fractured alliance forces a choice that will decide the fate of the capital.</span></div>
</div>
<div class="eprow">
<div class="epthumb"><span class="epnum">E9</span></div>
<div class="eptext"><b>E9 — Crimson Horizon</b><span>The final stand begins as old rivals are forced to fight side by side.</span></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffcc00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffcc00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6509; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffcc00; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffcc00; color: #111111;
border: 1px solid #d9ae03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6509; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e4bc27; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Malgun Gothic","Apple SD Gothic Neo",-apple-system,BlinkMacSystemFont,Arial,sans-serif; }
* { box-sizing:border-box; }
.app { width:960px; height:640px; display:flex; flex-direction:column; overflow:hidden; }
.hdr { height:64px; flex:0 0 64px; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; border-bottom:3px solid #ffcc00; background:#ffffff; }
.hdr .brand { font-size:18px; font-weight:700; color:#000000; letter-spacing:-0.2px; }
.hdr .icons { display:flex; gap:10px; }
.hdr .icobox { width:26px; height:26px; border:1px solid #dddddd; border-radius:0; display:flex;
align-items:center; justify-content:center; }
.hdr .icobox .dot { width:6px; height:6px; background:#ffcc00; border-radius:0; }
.hdr .icobox .bars { width:14px; height:10px; border-top:2px solid #000000; border-bottom:2px solid #000000;
border-left:2px solid #000000; }
.balance { flex:0 0 128px; margin:16px 24px 0; padding:16px 20px; background:#ffffff;
border:1px solid #dddddd; border-radius:0; }
.balance .lbl { font-size:13px; color:#5a5a5a; font-weight:400; }
.balance .num { font-size:32px; font-weight:700; color:#000000; margin-top:6px; letter-spacing:-0.5px; }
.balance .sub { font-size:12px; color:#5a5a5a; margin-top:8px; }
.balance .sub a { color:#0c4ad1; text-decoration:none; margin-left:10px; }
.quick { flex:0 0 84px; display:flex; gap:10px; margin:14px 24px 0; }
.qitem { flex:1; height:64px; border:1px solid #dddddd; border-radius:0; background:#ffffff;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.qitem .shape { width:18px; height:18px; border:2px solid #000000; }
.qitem .lbl { font-size:12px; color:#222222; font-weight:400; }
.txsec { flex:1; margin:16px 24px 0; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.txsec .rowhdr { display:flex; align-items:baseline; justify-content:space-between; flex:0 0 auto; }
.txsec .rowhdr h2 { font-size:20px; font-weight:700; line-height:26px; margin:0; color:#000000; }
.txsec .rowhdr a { font-size:13px; color:#0c4ad1; text-decoration:none; }
.txlist { margin-top:8px; border-top:1px solid #dddddd; flex:1; overflow:hidden; }
.txrow { display:flex; align-items:center; gap:12px; height:56px; border-bottom:1px solid #dddddd;
padding:0 4px; }
.txrow .avatar { width:32px; height:32px; border:1px solid #dddddd; border-radius:0; flex:0 0 32px;
background:#f6f6f6; }
.txrow .who { flex:1; min-width:0; }
.txrow .who .n { font-size:14px; color:#222222; font-weight:400; line-height:21px; }
.txrow .who .d { font-size:12px; color:#5a5a5a; }
.txrow .amt { font-size:14px; font-weight:700; color:#000000; white-space:nowrap; }
.txrow .amt.plus { color:#0c4ad1; }
.tabbar { flex:0 0 56px; display:flex; border-top:1px solid #dddddd; background:#ffffff; }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.tab .ic { width:16px; height:16px; border:2px solid #5a5a5a; }
.tab .lbl { font-size:11px; color:#5a5a5a; }
.tab.active { border-top:2px solid #ffcc00; }
.tab.active .ic { border-color:#000000; }
.tab.active .lbl { color:#000000; font-weight:700; }
</style></head>
<body>
<div class="app">
<div class="hdr">
<div class="brand">KB Kookmin Bank</div>
<div class="icons">
<div class="icobox"><div class="dot"></div></div>
<div class="icobox"><div class="bars"></div></div>
</div>
</div>
<div class="balance">
<div class="lbl">Total balance</div>
<div class="num">₩ 12,480,300</div>
<div class="sub">Checking · Savings · Card<a href="#">Manage accounts</a></div>
</div>
<div class="quick">
<div class="qitem"><div class="shape"></div><div class="lbl">Transfer</div></div>
<div class="qitem"><div class="shape"></div><div class="lbl">Deposit</div></div>
<div class="qitem"><div class="shape"></div><div class="lbl">Card</div></div>
<div class="qitem"><div class="shape"></div><div class="lbl">More</div></div>
</div>
<div class="txsec">
<div class="rowhdr"><h2>Recent activity</h2><a href="#">See all</a></div>
<div class="txlist">
<div class="txrow">
<div class="avatar"></div>
<div class="who"><div class="n">Grocery Market</div><div class="d">Today · 09:41</div></div>
<div class="amt">-₩ 42,900</div>
</div>
<div class="txrow">
<div class="avatar"></div>
<div class="who"><div class="n">Transfer from Jamie R.</div><div class="d">Yesterday · 18:02</div></div>
<div class="amt plus">+₩ 300,000</div>
</div>
<div class="txrow">
<div class="avatar"></div>
<div class="who"><div class="n">Mobile phone bill</div><div class="d">Yesterday · 08:15</div></div>
<div class="amt">-₩ 58,000</div>
</div>
<div class="txrow">
<div class="avatar"></div>
<div class="who"><div class="n">Coffee Shop</div><div class="d">Mon · 07:52</div></div>
<div class="amt">-₩ 4,800</div>
</div>
</div>
</div>
<div class="tabbar">
<div class="tab active"><div class="ic"></div><div class="lbl">Home</div></div>
<div class="tab"><div class="ic"></div><div class="lbl">Accounts</div></div>
<div class="tab"><div class="ic"></div><div class="lbl">Transfer</div></div>
<div class="tab"><div class="ic"></div><div class="lbl">Card</div></div>
<div class="tab"><div class="ic"></div><div class="lbl">More</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #d62872; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #d62872; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e799ba; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d9006c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d62872; color: #ffffff;
border: 1px solid #d9006c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #d62872; color: #f5f5f5;
border: 1px solid #db4987; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e799ba; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d62271; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f2f2f2; color:#404040; box-sizing:border-box;
font-family:"Microsoft JhengHei UI", "PingFang TC", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.price { font-family:"Oxygen","Century Gothic",sans-serif; }
body { display:flex; flex-direction:column; }
header { flex:0 0 44px; background:#d62872; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 20px; }
.brand { font-size:22px; font-weight:700; margin:0; }
.searchbar { flex:1; max-width:340px; margin:0 24px; height:30px; background:#ffffff; border-radius:15px;
display:flex; align-items:center; padding:0 6px 0 14px; color:#727272; font-size:13px; }
.cartwrap { position:relative; font-size:20px; }
.cartbadge { position:absolute; top:-6px; right:-10px; background:#e5047e; color:#fff; border-radius:8px;
font-size:10px; padding:1px 5px; font-weight:700; }
.catrow { flex:0 0 40px; background:#ffffff; border-bottom:1px solid #ededed; display:flex; align-items:center;
gap:22px; padding:0 20px; font-size:13px; color:#404040; }
.catrow span.active { color:#d62872; font-weight:700; border-bottom:2px solid #d62872; padding-bottom:11px; }
.banner { flex:0 0 auto; margin:12px 20px 0; height:64px; border-radius:8px;
background:linear-gradient(90deg,#fff5f9,#f9f9f9); border:1px solid #fbe9f1; display:flex; align-items:center;
padding:0 20px; justify-content:space-between; }
.banner b { color:#d62872; font-size:17px; }
.banner span { font-size:12px; color:#727272; }
.countdown { background:#dd2222; color:#fff; font-size:12px; font-weight:700; border-radius:4px; padding:4px 10px; }
.grid { flex:1 1 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:12px 20px; align-content:start; }
.card { position:relative; background:#fafafa; border-radius:8px; box-shadow:0 1px 2px 0 rgba(0,0,0,.05);
overflow:hidden; display:flex; flex-direction:column; }
.thumb { height:96px; position:relative; }
.th1 { background:linear-gradient(135deg,#ffd6e8,#ff9fc3); }
.th2 { background:linear-gradient(135deg,#c9e7ff,#8fbfec); }
.th3 { background:linear-gradient(135deg,#ffe7c2,#ffbb6b); }
.th4 { background:linear-gradient(135deg,#d8f5df,#8fdba3); }
.rank { position:absolute; top:6px; left:6px; width:22px; height:22px; border-radius:4px;
background:linear-gradient(0.34deg,#ffaa3b,#ff9203); color:#fff; font-size:12px; font-weight:700;
display:flex; align-items:center; justify-content:center; }
.info { padding:8px 10px 10px; flex:1; display:flex; flex-direction:column; gap:4px; }
.info .name { font-size:12px; color:#404040; line-height:1.35; height:32px; overflow:hidden; }
.info .price-row { display:flex; align-items:baseline; gap:5px; }
.price-now { color:#dd2222; font-weight:700; font-size:16px; }
.price-old { color:#999999; font-size:11px; text-decoration:line-through; }
.tag { font-size:10px; color:#027bff; }
footer { flex:0 0 40px; background:#eeeeee; color:#484848; font-size:12px; display:flex;
align-items:center; justify-content:center; gap:18px; }
</style></head>
<body>
<header>
<p class="brand">momo Shopping</p>
<div class="searchbar">Fall/winter new dresses</div>
<div class="cartwrap">🛒<span class="cartbadge">5</span></div>
</header>
<div class="catrow">
<span class="active">Best sellers</span><span>Beauty</span><span>Fashion</span><span>Electronics</span><span>Home & living</span><span>Grocery</span>
</div>
<div class="banner">
<div><b>Flash sale — up to 50% off storewide</b> <span>— once a year, don't miss it!</span></div>
<div class="countdown">02:14:36 left</div>
</div>
<div class="grid">
<div class="card"><div class="thumb th1"><span class="rank">1</span></div>
<div class="info"><div class="name">Hydrating essence mask, 10-pack, deep repair</div>
<div class="price-row price"><span class="price-now">$399</span><span class="price-old">$690</span></div>
<span class="tag">24H fast delivery</span></div></div>
<div class="card"><div class="thumb th2"><span class="rank">2</span></div>
<div class="info"><div class="name">Wireless noise-cancelling earbuds, 12h battery</div>
<div class="price-row price"><span class="price-now">$1,290</span><span class="price-old">$1,980</span></div>
<span class="tag">Store pickup</span></div></div>
<div class="card"><div class="thumb th3"><span class="rank">3</span></div>
<div class="info"><div class="name">Fall knit dress, slimming long sleeve</div>
<div class="price-row price"><span class="price-now">$890</span><span class="price-old">$1,590</span></div>
<span class="tag">10-day return</span></div></div>
<div class="card"><div class="thumb th4"></div>
<div class="info"><div class="name">Ceramic non-stick pan, 28cm, induction-ready</div>
<div class="price-row price"><span class="price-now">$650</span><span class="price-old">$990</span></div>
<span class="tag">24H fast delivery</span></div></div>
<div class="card"><div class="thumb th2"></div>
<div class="info"><div class="name">Kids' spill-proof water bottle, 700ml</div>
<div class="price-row price"><span class="price-now">$299</span><span class="price-old">$450</span></div>
<span class="tag">New member gift</span></div></div>
<div class="card"><div class="thumb th1"></div>
<div class="info"><div class="name">Aroma diffuser, silent, large capacity</div>
<div class="price-row price"><span class="price-now">$1,080</span><span class="price-old">$1,690</span></div>
<span class="tag">Store pickup</span></div></div>
<div class="card"><div class="thumb th3"></div>
<div class="info"><div class="name">Sunscreen SPF50+, lightweight, 2-pack</div>
<div class="price-row price"><span class="price-now">$560</span><span class="price-old">$820</span></div>
<span class="tag">24H fast delivery</span></div></div>
<div class="card"><div class="thumb th4"></div>
<div class="info"><div class="name">Carry-on luggage, 24in, lightweight, scratch-proof</div>
<div class="price-row price"><span class="price-now">$2,390</span><span class="price-old">$3,980</span></div>
<span class="tag">10-day return</span></div></div>
</div>
<footer>
<span>24H fast delivery</span><span>10-day return</span><span>16 payment methods</span><span>© momo Shopping</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f3f3; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f3f3; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #14334c; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #f3f3f3; color: #14334c;
border: 1px solid #14334c; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #bbbbbb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ff8f77; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Apercu','Helvetica Neue',sans-serif; background:#f3f3f3; color:#333333; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-family:'Clearface',Georgia,serif;font-size:22px;color:#14334c;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;letter-spacing:0.8px;text-transform:uppercase;color:#333333;}
.navlinks span:first-child{color:#14334c;}
.search{width:200px;height:40px;border-radius:9999px;background:#fff;font-size:12px;color:#666666;display:flex;align-items:center;padding:0 16px;}
.hero{height:230px;display:flex;align-items:center;padding:0 40px;}
.heroText h1{font-family:'Clearface',Georgia,serif;font-size:40px;font-weight:700;color:#14334c;margin:0 0 12px;letter-spacing:-0.3px;}
.heroText p{font-size:14px;color:#333333;margin:0 0 18px;max-width:380px;}
.cta{display:inline-block;background:#14334c;color:#fff;font-size:14px;font-weight:500;letter-spacing:0.5px;padding:14px 30px;border-radius:8px;}
.towel{position:absolute;right:120px;top:70px;width:110px;height:130px;border-radius:8px;background:linear-gradient(160deg,#a7cfe9,#14334c);}
.monogram{position:absolute;right:150px;top:120px;font-family:'Clearface',Georgia,serif;font-size:22px;color:#fff;letter-spacing:2px;}
.sec{padding:14px 34px 0;}
.secTitle{font-size:18px;font-weight:500;color:#14334c;margin-bottom:12px;}
.grid{display:flex;gap:16px;}
.card{width:196px;background:#fff;border-radius:12px;overflow:hidden;position:relative;}
.thumb{aspect-ratio:3/4;height:140px;position:relative;overflow:hidden;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:0.3px;padding:4px 8px;border-radius:4px;color:#fff;}
.badge.sale{background:#ff8f77;}
.badge.new{background:#334fb4;}
.ctitle{font-size:16px;font-weight:500;color:#121212;padding:10px 12px 2px;}
.cprice{font-size:14px;color:#333333;padding:0 12px 12px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#14334c;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:12px;color:#fff;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Weezie</div>
<div class="navlinks"><span>Towels</span><span>Robes</span><span>Monogram</span></div>
<div class="search">Search products...</div>
</div>
<div class="hero">
<div class="heroText">
<h1>Towels, Made<br>Personal</h1>
<p>Thick, quick-drying cotton towels — monogrammed to feel like they're yours.</p>
<div class="cta">Shop Towels</div>
</div>
<div class="towel"></div><div class="monogram">WJT</div>
</div>
<div class="sec">
<div class="secTitle">Bestsellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#a7cfe9,#14334c)"><div class="badge sale">Sale</div></div><div class="ctitle">Classic Bath Towel</div><div class="cprice">$39</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#dedede,#14334c)"><div class="badge new">New</div></div><div class="ctitle">Waffle Weave Robe</div><div class="cprice">$98</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#ff8f77,#14334c)"></div><div class="ctitle">Beach Towel Set</div><div class="cprice">$65</div></div>
</div>
</div>
<div class="footer"><span>Free Monogramming on Every Order</span><span>Customer Care</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #313440;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #313440;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #313440; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.25px; background: #005586; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.25px; background: #ffffff; color: #313440;
border: 1px solid #005586; border-radius: 4px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #474747;
border: 1px solid #c4c5c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #d5ffd8; color: #008a06;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; font-family:'Karla',Arial,Helvetica,sans-serif; color:#313440; }
*{box-sizing:border-box;}
.nav{height:48px;background:#313440;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.logo{font-family:Montserrat,Arial,sans-serif;font-size:17px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:18px;font-family:Montserrat,Arial,sans-serif;font-size:14px;font-weight:600;color:#fff;}
.subnav{height:40px;background:#fff;border-bottom:1px solid #e5e5e5;display:flex;align-items:center;gap:20px;padding:0 28px;font-family:Montserrat,Arial,sans-serif;font-size:12px;font-weight:600;color:#757575;}
.subnav .active{color:#313440;border-bottom:2px solid #005586;padding-bottom:12px;}
.searchrow{display:flex;padding:14px 28px 0;gap:10px;}
.searchbar{flex:1;height:40px;background:#fff;border:1px solid #e5e5e5;border-radius:4px;display:flex;align-items:center;padding:0 12px;font-size:13px;color:#757575;}
.searchbtn{width:40px;height:40px;background:#007dc6;border-radius:4px;}
.grid{display:flex;gap:14px;padding:16px 28px 0;}
.card{width:200px;background:#fff;border:1px solid #dfdfdf;border-radius:8px;padding:12px;}
.thumb{aspect-ratio:1/1;height:100px;border-radius:4px;background:#f5f5f5;margin-bottom:8px;}
.title{font-family:Karla,sans-serif;font-size:15px;font-weight:700;}
.price{font-size:16px;font-weight:700;margin-top:4px;}
.badge{display:inline-block;margin-top:6px;font-family:Montserrat,sans-serif;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:2px;}
.b-instock{background:#d5ffd8;color:#008a06;}
.b-preorder{background:#fffdea;color:#f1a500;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#313440;color:#8dc6e7;font-size:13px;display:flex;align-items:center;padding:0 28px;gap:22px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Star City Games</div>
<div class="navlinks"><span>Singles</span><span>Sealed</span><span>Events</span><span>Sell to Us</span></div>
</div>
<div class="subnav"><span class="active">Magic: The Gathering</span><span>Lorcana</span><span>Pokémon</span><span>Flesh and Blood</span></div>
<div class="searchrow">
<div class="searchbar">Search cards, sets, singles...</div>
<div class="searchbtn"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#005586,#f1a500)"></div><div class="title">Foil Playmat — Arena Series</div><div class="price">$24.99</div><span class="badge b-instock">In Stock</span></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#221155,#005586)"></div><div class="title">Collector Booster Box</div><div class="price">$249.99</div><span class="badge b-preorder">Pre-Order</span></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#f1a500,#313440)"></div><div class="title">Championship Deck Sleeves</div><div class="price">$12.99</div><span class="badge b-instock">In Stock</span></div>
</div>
<div class="footer"><span>Sell to Us</span><span>Events</span><span>Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d93025; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #d93025;
border: 1px solid #d93025; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f9dedc; color: #d93025;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#202124; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#fff; padding:24px 0 0; position:relative; border-right:1px solid #DADCE0; }
.searchbar { margin:0 16px 14px; height:40px; background:#F6F8FC; border-radius:20px; display:flex; align-items:center;
padding:0 14px; gap:10px; font-size:13px; color:#5F6368; }
.row { display:flex; align-items:center; gap:12px; padding:10px 16px; }
.av { width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
color:#fff; font-weight:500; font-size:14px; }
.a1 { background:#EA4335; } .a2 { background:#4285F4; } .a3 { background:#34A853; } .a4 { background:#FBBC04; color:#202124; }
.rowtext { flex:1; min-width:0; }
.name { font-size:14px; font-weight:500; }
.snippet { font-size:13px; color:#5F6368; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row.unread .name, .row.unread .subj { font-weight:700; }
.rowend { text-align:right; font-size:11px; color:#5F6368; }
.divider { height:1px; background:#F1F3F4; margin:0 16px; }
.fab { position:absolute; bottom:80px; right:20px; width:56px; height:56px; border-radius:16px; background:#D93025;
color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px;
box-shadow:rgba(0,0,0,0.2) 0 4px 12px; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:56px; background:#fff; border-top:0.5px solid #DADCE0;
display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:11px; color:#5F6368; text-align:center; }
.tab.on { color:#1A73E8; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:400; letter-spacing:0; margin:0; }
.brand span { color:#D93025; font-weight:700; }
.tag { font-size:14px; color:#5F6368; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:16px; border:1px solid #DADCE0; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#5F6368; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:400; }
.typeblock .t2 { font-size:13px; color:#5F6368; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:500; padding:6px 12px; border-radius:999px;
background:#F6F8FC; border:1px solid #DADCE0; color:#5F6368; }
.footer { margin-top:auto; border-top:1px solid #DADCE0; padding-top:16px; font-size:11px; color:#9AA0A6; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="searchbar">🔍 Search in mail</div>
<div class="row unread"><div class="av a1">S</div><div class="rowtext"><div class="name">Sarah Chen</div><div class="snippet subj">Q3 Roadmap — Subject line here</div></div><div class="rowend">9:14 AM ●</div></div>
<div class="divider"></div>
<div class="row"><div class="av a2">M</div><div class="rowtext"><div class="name">Marcus Lee</div><div class="snippet">Re: Contract draft — looks good to me</div></div><div class="rowend">Yesterday</div></div>
<div class="divider"></div>
<div class="row unread"><div class="av a3">R</div><div class="rowtext"><div class="name">Recruiting Team</div><div class="snippet subj">Your interview is confirmed</div></div><div class="rowend">Mon</div></div>
<div class="divider"></div>
<div class="row"><div class="av a4">T</div><div class="rowtext"><div class="name">Team Standup</div><div class="snippet">Notes from today's sync</div></div><div class="rowend">Sun</div></div>
<div class="fab">✎</div>
<div class="tabbar"><div class="tab on">Mail</div><div class="tab">Chat</div><div class="tab">Spaces</div><div class="tab">Meet</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">Gmail (iOS)<span>.</span></h1>
<p class="tag">A pure-white unbranded inbox — content carries the color, and Gmail Red is spent on exactly one thing: the Compose FAB.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#D93025"></div><small>#D93025</small></div>
<div class="sw"><div class="chip2" style="background:#4285F4"></div><small>#4285F4</small></div>
<div class="sw"><div class="chip2" style="background:#34A853"></div><small>#34A853</small></div>
<div class="sw"><div class="chip2" style="background:#FBBC04"></div><small>#FBBC04</small></div>
<div class="sw"><div class="chip2" style="background:#1A73E8"></div><small>#1A73E8</small></div>
</div>
<div class="typeblock">
<div class="t1">Sarah Chen · Q3 Roadmap</div>
<div class="t2">Google Sans + Roboto · unread = bold weight, not color</div>
</div>
<div class="taglist">
<span>16pt squircle FAB</span><span>Swipe archive/delete</span><span>Smart Reply chips</span>
<span>Material dual shadow</span><span>Colored avatar initials</span>
</div>
<div class="footer">Pure white canvas · Gmail Red reserved for Compose + destructive only</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e1027; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"figmaSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"figmaMono", "SFMono-Regular", Consolas, Menlo, monospace; }
.wrap { display:flex; flex-direction:column; height:640px; }
header { flex:0 0 56px; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; border-bottom:1px solid #ebebeb; }
.left { display:flex; align-items:center; gap:20px; }
.wm { font-size:15px; font-weight:600; letter-spacing:-0.2px; }
.segment { display:flex; background:rgba(0,0,0,0.04); border-radius:50px; padding:3px; }
.seg-item { height:36px; padding:0 16px; display:flex; align-items:center; font-size:13px; font-weight:480; color:#000000; border-radius:50px; }
.seg-item.active { background:rgba(0,0,0,0.08); }
.right { display:flex; align-items:center; gap:10px; }
.btn-outline { height:36px; padding:0 16px; display:flex; align-items:center; border-radius:8px; font-size:13px; color:#000000; border:1px solid #ebebeb; }
.btn-indigo { height:36px; padding:0 16px; display:flex; align-items:center; border-radius:8px; font-size:13px; font-weight:480; background:#4d49fc; color:#ffffff; }
main { flex:1; min-height:0; display:flex; background:#f7f7f8; padding:20px 24px; gap:16px; position:relative; }
.canvas { flex:1; background:#ffffff; border-radius:12px; box-shadow:0 24px 70px rgba(0,0,0,0.10);
position:relative; overflow:hidden; }
.art { position:absolute; }
.a1 { width:190px; height:150px; left:56px; top:44px; background:#6c5ce7; border-radius:16px; transform:rotate(-4deg); }
.a2 { width:130px; height:130px; left:210px; top:130px; background:#ff6f91; border-radius:9999px; opacity:0.92; }
.a3 { width:220px; height:100px; left:120px; top:238px; background:#00c2a8; border-radius:14px; transform:rotate(3deg); }
.a4 { width:96px; height:96px; right:70px; top:56px; background:#ffd166; border-radius:20px; transform:rotate(10deg); }
.a5 { width:150px; height:150px; right:36px; top:170px; background:#0d99ff; border-radius:9999px; opacity:0.18; }
.frame-label { position:absolute; left:56px; top:22px; font-size:11px; color:#8a8a8a; font-weight:500; }
.cursor-tag { position:absolute; left:250px; top:96px; background:#4d49fc; color:#ffffff; font-size:10px; font-weight:600;
padding:3px 8px; border-radius:4px; }
.toolbar { position:absolute; left:50%; bottom:20px; transform:translateX(-50%); display:flex; gap:2px;
background:#000000; border-radius:12px; padding:6px; box-shadow:0 12px 30px rgba(0,0,0,0.25); }
.tool { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center;
color:#ffffff; font-size:14px; }
.tool.on { background:rgba(255,255,255,0.16); }
.panel { width:212px; flex:0 0 212px; background:#ffffff; border-radius:12px; border:1px solid #ebebeb; padding:14px; display:flex; flex-direction:column; gap:10px; }
.panel h4 { font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:#8a8a8a; margin:0; }
.layer { display:flex; align-items:center; gap:8px; font-size:13px; color:#000000; padding:6px 0; }
.layer .sw { width:14px; height:14px; border-radius:4px; flex:0 0 14px; }
.layer.sel { background:rgba(13,153,255,0.08); border-radius:6px; padding:6px 8px; margin:0 -8px; }
.fab { position:absolute; right:20px; bottom:20px; width:40px; height:40px; border-radius:9999px; background:#000000;
color:#ffffff; display:flex; align-items:center; justify-content:center; font-size:18px; }
footer { flex:0 0 36px; border-top:1px solid #ebebeb; padding:0 24px; display:flex; align-items:center;
justify-content:space-between; font-size:11px; color:#8a8a8a; }
</style></head>
<body>
<div class="wrap">
<header>
<div class="left">
<span class="wm">Figma</span>
<div class="segment">
<div class="seg-item active">Design</div>
<div class="seg-item">Dev Mode</div>
<div class="seg-item">Community</div>
</div>
</div>
<div class="right">
<span class="btn-outline">Contact sales</span>
<span class="btn-indigo">Try for free</span>
</div>
</header>
<main>
<div class="canvas">
<span class="frame-label">Frame · Homepage / v3</span>
<div class="art a1"></div>
<div class="art a2"></div>
<div class="art a3"></div>
<div class="art a4"></div>
<div class="art a5"></div>
<span class="cursor-tag">Maya</span>
<div class="toolbar">
<div class="tool on">↖</div>
<div class="tool">▭</div>
<div class="tool">◯</div>
<div class="tool">T</div>
<div class="tool">💬</div>
</div>
</div>
<div class="panel">
<h4>Layers</h4>
<div class="layer sel"><span class="sw" style="background:#6c5ce7"></span>Hero card</div>
<div class="layer"><span class="sw" style="background:#ff6f91"></span>Avatar circle</div>
<div class="layer"><span class="sw" style="background:#00c2a8"></span>Caption bar</div>
<div class="layer"><span class="sw" style="background:#ffd166"></span>Badge</div>
<div class="layer"><span class="sw" style="background:#0d99ff"></span>Glow accent</div>
</div>
</main>
<footer>
<span>© Figma</span>
<span class="mono">AUTOSAVED · 2 ONLINE</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.3px; background: #226d7a; color: #ffffff;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.3px; background: transparent; color: #226d7a;
border: 1px solid #226d7a; border-radius: 12px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.2px; background: #226d7a; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#3d3d3d; font-family:'Open Sans',Arial,sans-serif;
}
*, *::before, *::after { box-sizing:border-box; }
.wrap{ position:relative; width:960px; height:640px; }
.nav{ height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#ffffff; border-bottom:1px solid #e4f5fa; }
.logo{ font-size:18px; font-weight:700; color:#1a5562; }
.navlinks{ display:flex; gap:24px; }
.navlinks span{ font-size:12px; color:#3d3d3d; }
.navlinks span.active{ color:#226d7a; font-weight:700; }
.cta{ font-size:12px; font-weight:700; color:#ffffff; background:#226d7a; padding:10px 18px; border-radius:12px; }
.hero{ height:214px; display:flex; padding:0 34px; gap:24px; align-items:center; }
.hero-text{ width:340px; }
.kicker{ font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#22b8d1; margin-bottom:10px; }
.h1{ font-size:28px; font-weight:700; line-height:1.2; color:#1a1a1a; margin-bottom:10px; }
.sub{ font-size:13px; line-height:1.5; color:#3d3d3d; max-width:300px; }
.spec-panel{ flex:1; height:180px; background:#e4f5fa; border-radius:12px; padding:16px 20px; }
.spec-head{ font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#226d7a; margin-bottom:10px; }
.spec-row{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #b0e0e9; font-size:12px; }
.spec-row span:first-child{ color:#1a5562; }
.spec-row span:last-child{ font-weight:700; color:#1a1a1a; }
.section-title{ padding:14px 34px 8px; font-size:15px; font-weight:700; color:#1a1a1a; }
.grid{ display:flex; gap:16px; padding:0 34px; }
.card{ width:200px; background:#ffffff; border:1px solid #e4f5fa; border-radius:8px; padding:12px; }
.card-img{ width:100%; height:70px; border-radius:4px; margin-bottom:8px; }
.card-title{ font-size:12px; font-weight:700; color:#1a1a1a; margin-bottom:2px; }
.card-note{ font-size:10px; color:#3d3d3d; margin-bottom:8px; }
.row{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-size:12px; font-weight:700; color:#1a1a1a; }
.ring{ width:16px; height:16px; border-radius:50%; border:2px solid #22b8d1; box-shadow:0 0 0 2px #e4f5fa; }
.finishes{ margin:20px 34px 0; padding:16px 20px; background:#f7fbfc; border:1px solid #e4f5fa; border-radius:8px; display:flex; align-items:center; justify-content:space-between; }
.finishes-label{ font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#226d7a; }
.finish-dots{ display:flex; gap:10px; }
.fdot{ width:22px; height:22px; border-radius:50%; border:2px solid #ffffff; box-shadow:0 0 0 1px #b0e0e9; }
.footer{ position:absolute; bottom:0; left:0; width:960px; height:52px; background:#e4f5fa; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.footer span{ font-size:11px; color:#226d7a; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Hestan Ranges C 2</div>
<div class="navlinks">
<span class="active">Ranges</span>
<span>Rangetops</span>
<span>Wall Ovens</span>
<span>Ventilation</span>
</div>
<div class="cta">Compare Models</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="kicker">Dual Fuel Series</div>
<div class="h1">The patina of a well-seasoned range.</div>
<div class="sub">Deep teal panels and precision controls, built for a kitchen that treats cooking as a craft.</div>
</div>
<div class="spec-panel">
<div class="spec-head">36" Dual Fuel — Spec Sheet</div>
<div class="spec-row"><span>Burner Output</span><span>18,000 BTU</span></div>
<div class="spec-row"><span>Oven Capacity</span><span>5.7 Cu Ft</span></div>
<div class="spec-row"><span>Convection</span><span>True Convection</span></div>
<div class="spec-row"><span>Warranty</span><span>2 Years Full</span></div>
</div>
</div>
<div class="section-title">Configure Your Range</div>
<div class="grid">
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#226d7a,#22b8d1);"></div>
<div class="card-title">30" Dual Fuel</div>
<div class="card-note">4-Burner</div>
<div class="row"><span class="price">$6,999</span><span class="ring"></span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#1a5562,#226d7a);"></div>
<div class="card-title">36" Dual Fuel</div>
<div class="card-note">6-Burner</div>
<div class="row"><span class="price">$8,499</span><span class="ring"></span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#22b8d1,#b0e0e9);"></div>
<div class="card-title">48" All Gas</div>
<div class="card-note">8-Burner + Griddle</div>
<div class="row"><span class="price">$11,299</span><span class="ring"></span></div>
</div>
</div>
<div class="finishes">
<span class="finishes-label">12 Powder-Coat Finishes Available</span>
<div class="finish-dots">
<span class="fdot" style="background:#226d7a;"></span>
<span class="fdot" style="background:#22b8d1;"></span>
<span class="fdot" style="background:#1a1a1a;"></span>
<span class="fdot" style="background:#c9c2b0;"></span>
<span class="fdot" style="background:#8a2f14;"></span>
<span class="fdot" style="background:#4a6741;"></span>
</div>
</div>
<div class="footer">
<span>© Hestan Ranges</span>
<span>Spec Sheets · Dealer Locator</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.1px; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #001da3; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #ffffff; color: #212121;
border: 1px solid #001da3; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #212121;
border: 1px solid #d9d9d9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; background: #e5ff01; color: #212121;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f5ef; color:#212121; box-sizing:border-box;
font-family:'Figtree',Inter,system-ui,sans-serif; }
* { box-sizing:border-box; }
.announce { height:34px; background:#e5ff01; color:#212121; display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:600; letter-spacing:.3px; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
background:#fff; border-bottom:1px solid #ededed; }
.brand { font-size:17px; font-weight:700; margin:0; letter-spacing:-.3px; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; }
.cart { font-size:13px; font-weight:600; color:#001da3; }
.hero { background:#212121; color:#fff; padding:34px 40px; display:flex; justify-content:space-between; align-items:center; }
.hero h1 { font-size:38px; font-weight:700; letter-spacing:-1px; margin:0 0 8px; line-height:1.1; }
.hero h1 mark { background:#e5ff01; color:#212121; padding:2px 4px; border-radius:2px; }
.hero p { font-size:14px; color:#9e9e9e; margin:0; max-width:340px; }
.btn { display:inline-block; background:#001da3; color:#fff; font-size:14px; font-weight:600; padding:12px 26px; border-radius:4px; margin-top:14px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:20px 40px; }
.card { background:#f2f2f2; border:1px solid #d9d9d9; border-radius:4px; padding:14px; }
.card-img { height:90px; background:linear-gradient(135deg,#001da3,#374fd6); border-radius:2px; margin-bottom:10px; position:relative; }
.card-img::after { content:''; position:absolute; right:10px; bottom:10px; width:40px; height:6px; background:#e5ff01; border-radius:2px; }
.card h3 { font-size:15px; font-weight:600; margin:0 0 4px; }
.price-row { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.price { font-size:16px; font-weight:700; }
.stepper { display:flex; align-items:center; border:1px solid #d9d9d9; border-radius:999px; font-size:13px; font-weight:600; overflow:hidden; }
.stepper span { padding:4px 10px; }
.stepper .mid { border-left:1px solid #d9d9d9; border-right:1px solid #d9d9d9; }
footer { position:absolute; bottom:0; left:0; right:0; height:56px; background:#212121; color:#d9d9d9;
display:flex; align-items:center; justify-content:space-between; padding:0 40px; font-size:12px; }
footer a { color:#d9d9d9; }
</style></head>
<body>
<div class="announce">Free shipping on orders over $75 · Ends Sunday</div>
<nav>
<p class="brand">Baronfig</p>
<div class="navlinks"><span>Notebooks</span><span>Bags</span><span>Desk Accessories</span></div>
<div class="cart">Cart (2)</div>
</nav>
<section class="hero">
<div>
<h1>Tools for <mark>Thinkers</mark></h1>
<p>Notebooks and desk goods built for the person who takes ideas seriously.</p>
<span class="btn">Shop the Confidant</span>
</div>
</section>
<div class="grid">
<div class="card">
<div class="card-img"></div>
<h3>Confidant Notebook — Dot Grid</h3>
<div class="price-row">
<span class="price">$34</span>
<div class="stepper"><span>−</span><span class="mid">1</span><span>+</span></div>
</div>
</div>
<div class="card">
<div class="card-img"></div>
<h3>Squire Rollerball Pen</h3>
<div class="price-row">
<span class="price">$28</span>
<div class="stepper"><span>−</span><span class="mid">1</span><span>+</span></div>
</div>
</div>
<div class="card">
<div class="card-img"></div>
<h3>Vellum Sleeve — 13"</h3>
<div class="price-row">
<span class="price">$58</span>
<div class="stepper"><span>−</span><span class="mid">1</span><span>+</span></div>
</div>
</div>
</div>
<footer>
<span>© Baronfig</span>
<a>Notebooks</a><a>Journals</a><a>Bags</a><a>Support</a>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #51575d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #003388; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #f8f8f8; color: #003388;
border: 1px solid #003388; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #323a45;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #51575d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #22b339; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f8f8; font-family:Georgia,'Times New Roman',serif; color:#323a45; }
*{box-sizing:border-box;}
.nav{height:56px;background:#f8f8f8;border-bottom:1px solid #c4c4c4;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Open Sans',Arial,sans-serif;font-size:18px;font-weight:700;color:#003388;}
.navlinks{display:flex;gap:22px;font-family:'Open Sans',Arial,sans-serif;font-size:13px;font-weight:600;color:#323a45;}
.searchbar{width:220px;height:30px;border:1px solid #003388;border-radius:3px;background:#fff;display:flex;align-items:center;padding:0 10px;font-family:'Open Sans',Arial,sans-serif;font-size:11px;color:#51575d;}
.strip{background:#003388;color:#fff;height:34px;display:flex;align-items:center;padding:0 32px;font-family:'Open Sans',Arial,sans-serif;font-size:12px;letter-spacing:.3px;}
.sec{padding:18px 32px 0;}
.seclabel{font-family:'Open Sans',Arial,sans-serif;font-size:15px;font-weight:700;color:#1e1e1e;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #c4c4c4;}
.list{display:flex;flex-direction:column;gap:0;}
.row{display:flex;align-items:center;gap:16px;padding:11px 0;border-bottom:1px solid #e0e0e0;}
.cover{width:52px;height:74px;border-radius:2px;flex-shrink:0;}
.rowInfo{flex:1;}
.rtitle{font-size:15px;font-weight:400;color:#1e1e1e;margin:0 0 4px;}
.rmeta{font-family:'Open Sans',Arial,sans-serif;font-size:11px;color:#51575d;}
.rprice{font-family:'Open Sans',Arial,sans-serif;font-size:14px;font-weight:700;color:#003388;width:60px;text-align:right;}
.cart{font-family:'Open Sans',Arial,sans-serif;background:#22b339;color:#fff;font-size:11px;font-weight:600;padding:6px 12px;border-radius:3px;width:80px;text-align:center;}
.badge{background:#22b339;color:#fff;font-family:'Open Sans',Arial,sans-serif;font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2px 6px;border-radius:2px;margin-left:8px;}
</style>
<div class="strip">Region-Free Japanese & Asian Cinema — Dispatched Worldwide</div>
<div class="nav">
<div class="logo">Third Window Films</div>
<div class="navlinks"><span>New Releases</span><span>Directors</span><span>Blu-ray</span><span>Soundtracks</span></div>
<div class="searchbar">Search the catalogue…</div>
</div>
<div class="sec">
<div class="seclabel">This Month's Releases</div>
<div class="list">
<div class="row">
<div class="cover" style="background:linear-gradient(160deg,#003388,#22b339);"></div>
<div class="rowInfo"><div class="rtitle">A Quiet Harbour <span class="badge">New</span></div><div class="rmeta">Dir. Michiko Sano · 2018 · 108 min · Region A/B</div></div>
<div class="rprice">$24.99</div><div class="cart">Add to Cart</div>
</div>
<div class="row">
<div class="cover" style="background:linear-gradient(160deg,#22b339,#003388);"></div>
<div class="rowInfo"><div class="rtitle">Neon Ledger Blu-ray</div><div class="rmeta">Dir. Wei Han Lo · 2021 · 96 min · Limited Edition</div></div>
<div class="rprice">$29.99</div><div class="cart">Add to Cart</div>
</div>
<div class="row">
<div class="cover" style="background:linear-gradient(160deg,#1a3d70,#22b339);"></div>
<div class="rowInfo"><div class="rtitle">Rooftop Season</div><div class="rmeta">Dir. Ayaka Ito · 2015 · 121 min · Original Soundtrack</div></div>
<div class="rprice">$19.99</div><div class="cart">Add to Cart</div>
</div>
<div class="row">
<div class="cover" style="background:linear-gradient(160deg,#003388,#4d7a55);"></div>
<div class="rowInfo"><div class="rtitle">The Paper Lantern Box Set <span class="badge">New</span></div><div class="rmeta">Dir. Various · 2019–2022 · 3-Disc Collection</div></div>
<div class="rprice">$54.99</div><div class="cart">Add to Cart</div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #4e4b66; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #d8613c; color: #ffffff;
border: none; border-radius: 4px; padding: 16px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #212121;
border: 1px solid #d8613c; border-radius: 4px;
padding: 15px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #212121;
border: 1px solid #c3c3c3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4e4b66; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #d8613c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Forno Venetzia Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Newsreader',Georgia,serif; background:#f9f9f9; color:#212121; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
.nav { background:#003388; height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.logo { color:#fff; font-family:Cardo,Georgia,serif; font-weight:700; font-size:22px; }
.navlinks { display:flex; gap:24px; color:#cfe0f7; font-family:Inter,Arial,sans-serif; font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.navcta { background:#d8613c; color:#fff; font-family:Inter,Arial,sans-serif; font-weight:600; font-size:12px; padding:10px 20px; border-radius:2px; text-transform:uppercase; letter-spacing:.5px; }
.hero { display:flex; padding:36px 40px; gap:36px; align-items:center; }
.hero-copy { flex:1; }
.hero h1 { font-family:Cardo,Georgia,serif; font-size:42px; font-weight:700; line-height:1.16; letter-spacing:-.3px; margin:0 0 14px; color:#212121; }
.hero p { font-size:15.5px; color:#444; line-height:1.6; max-width:410px; margin:0 0 20px; font-family:'Newsreader',Georgia,serif; }
.btn-primary { background:#d8613c; color:#fff; font-family:Inter,Arial,sans-serif; font-weight:600; font-size:13px; padding:14px 24px; border-radius:2px; display:inline-block; text-transform:uppercase; letter-spacing:.5px; }
.hero-visual { flex:1; height:220px; display:flex; align-items:center; justify-content:center; background:#eeeeee; border-radius:4px; }
.oven2 { width:170px; height:160px; position:relative; }
.oven2 .dome { width:170px; height:120px; border-radius:90px 90px 16px 16px; background:linear-gradient(160deg,#e8b5a3,#d8613c); }
.oven2 .mouth { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); width:56px; height:40px; background:#212121; border-radius:8px 8px 4px 4px; }
.oven2 .flame { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); width:18px; height:22px; background:#ffb100; border-radius:50%; }
.strip { display:flex; background:#eeeeee; }
.strip div { flex:1; text-align:center; padding:11px; font-family:Inter,Arial,sans-serif; font-size:11px; font-weight:600; color:#212121; text-transform:uppercase; letter-spacing:.4px; border-right:1px solid #dcdfe6; }
.strip div:last-child { border-right:none; }
.section { padding:22px 40px; flex:1; }
.section h2 { font-family:Cardo,Georgia,serif; font-size:22px; font-weight:700; margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#fff; border:1px solid #ebebeb; border-radius:6px; padding:14px; }
.card .ph { height:74px; border-radius:6px; margin-bottom:10px; background:linear-gradient(160deg,#c2a990,#d8613c); }
.card .name { font-family:Cardo,Georgia,serif; font-weight:700; font-size:15px; margin-bottom:3px; }
.card .desc { font-family:'Newsreader',Georgia,serif; font-size:11.5px; color:#6f757e; margin-bottom:7px; }
.stars { color:#ffb100; font-size:11px; margin-bottom:6px; }
.card .pricerow { display:flex; justify-content:space-between; align-items:center; }
.card .price { font-family:Inter,Arial,sans-serif; font-weight:700; font-size:15px; }
.card .buy { background:#003388; color:#fff; font-family:Inter,sans-serif; font-size:10.5px; font-weight:600; padding:6px 12px; border-radius:2px; text-transform:uppercase; }
</style>
<div class="page">
<div class="nav">
<div class="logo">Forno Venetzia</div>
<div class="navlinks"><span>Wood Fired</span><span>Gas Ovens</span><span>Accessories</span><span>Recipes</span></div>
<div class="navcta">Get a Quote</div>
</div>
<div class="hero">
<div class="hero-copy">
<h1>Furnace meets<br>the lagoon city.</h1>
<p>Where the wood-fired dome runs 800°F, our Adriatic navy keeps things grounded — outdoor ovens built for stone countertops and Mediterranean evenings.</p>
<div class="btn-primary">Shop Wood Ovens</div>
</div>
<div class="hero-visual"><div class="oven2"><div class="dome"></div><div class="mouth"></div><div class="flame"></div></div></div>
</div>
<div class="strip"><div>Refractory Dome</div><div>Stainless Chimney</div><div>Assembled in Italy</div><div>5-Year Warranty</div></div>
<div class="section">
<h2>Featured Ovens</h2>
<div class="grid">
<div class="card"><div class="ph"></div><div class="name">Pizza Bellagio</div><div class="desc">28in dome · Wood-fired</div><div class="stars">★★★★★</div><div class="pricerow"><span class="price">$2,899</span><span class="buy">Add</span></div></div>
<div class="card"><div class="ph"></div><div class="name">Torino Portable</div><div class="desc">Tabletop · Hybrid fuel</div><div class="stars">★★★★☆</div><div class="pricerow"><span class="price">$799</span><span class="buy">Add</span></div></div>
<div class="card"><div class="ph"></div><div class="name">Napoletana Gas</div><div class="desc">32in · Dual chamber</div><div class="stars">★★★★★</div><div class="pricerow"><span class="price">$4,199</span><span class="buy">Add</span></div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1979c3;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1979c3;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.25; margin: 0; color: #1979c3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6a6c6c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #165c7d; color: #ffffff;
border: none; border-radius: 2px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #165c7d;
border: 1px solid #165c7d; border-radius: 2px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #444444;
border: 1px solid #e3e3e3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6c6c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 1.5px; background: #165c7d; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>ILVE</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; font-family:'Ilve Display','Helvetica Neue',Arial,sans-serif; color:#414141;
}
*{box-sizing:border-box;}
.nav{
height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #e3e3e3;
}
.logo{ font-size:20px; font-weight:300; letter-spacing:4px; color:#165c7d; }
.navlinks{ display:flex; gap:32px; font-size:12px; font-weight:400; letter-spacing:1.5px; color:#6a6c6c; text-transform:uppercase; }
.navlinks span.active{ color:#165c7d; border-bottom:2px solid #165c7d; padding-bottom:6px; }
.hero{
display:flex; height:340px; border-bottom:1px solid #e3e3e3;
}
.hero-copy{
width:420px; padding:48px 40px; display:flex; flex-direction:column; justify-content:center;
}
.eyebrow{ font-size:11px; letter-spacing:3px; color:#6a6c6c; text-transform:uppercase; margin-bottom:14px; }
.headline{ font-size:34px; font-weight:300; color:#444444; line-height:1.25; margin-bottom:16px; }
.headline b{ font-weight:500; color:#165c7d; }
.sub{ font-size:14px; color:#6a6c6c; line-height:1.6; margin-bottom:26px; max-width:340px; }
.cta{
display:inline-flex; align-items:center; gap:10px; background:#165c7d; color:#ffffff;
font-size:12px; letter-spacing:1.5px; text-transform:uppercase; padding:13px 26px;
border-radius:2px; width:fit-content;
}
.hero-visual{
flex:1; background:linear-gradient(180deg,#f5f7f9 0%,#eef2f4 100%); position:relative;
display:flex; align-items:center; justify-content:center;
}
.range{
width:300px; height:220px; background:#003971; border-radius:4px; position:relative;
box-shadow:0 20px 40px rgba(0,57,113,0.25);
}
.range .top{ position:absolute; top:0; left:0; right:0; height:70px; background:#165c7d; border-radius:4px 4px 0 0; display:flex; align-items:center; padding:0 18px; gap:10px;}
.knob{ width:22px; height:22px; border-radius:50%; background:#e3e3e3; border:2px solid #0e3f58; }
.range .door{ position:absolute; left:18px; right:18px; top:82px; bottom:18px; background:#0e3f58; border-radius:2px; border:1px solid #003971; }
.range .handle{ position:absolute; left:18px; right:18px; top:98px; height:8px; background:#e3e3e3; border-radius:4px; }
.swatches{ position:absolute; bottom:18px; right:24px; display:flex; gap:8px; }
.sw{ width:22px; height:22px; border-radius:50%; border:2px solid #ffffff; box-shadow:0 1px 4px rgba(0,0,0,0.2); }
.grid{
display:flex; padding:26px 40px; gap:20px;
}
.card{
flex:1; border:1px solid #e3e3e3; border-radius:2px; padding:16px; display:flex; flex-direction:column; gap:10px;
}
.swatch-row{ display:flex; gap:6px; }
.finish{ width:16px; height:16px; border-radius:50%; }
.cname{ font-size:14px; font-weight:400; color:#444444; }
.cspec{ font-size:11px; color:#6a6c6c; line-height:1.5; }
.price{ font-size:15px; font-weight:500; color:#165c7d; margin-top:auto; }
.warn{ font-size:10px; color:#ff0000; letter-spacing:0.5px; text-transform:uppercase; }
</style>
<div class="nav">
<div class="logo">Ilve</div>
<div class="navlinks">
<span class="active">Ranges</span>
<span>Cooktops</span>
<span>Ovens</span>
<span>Configurator</span>
<span>Showrooms</span>
</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="eyebrow">Made in Italy Since 1975</div>
<div class="headline">Precision cast in <b>enamel</b> & steel.</div>
<div class="sub">Thirty custom finishes for the professional range that anchors the kitchen — configure yours in cobalt, celadon, or aubergine.</div>
<div class="cta">Start Configurator</div>
</div>
<div class="hero-visual">
<div class="range">
<div class="top">
<div class="knob"></div><div class="knob"></div><div class="knob"></div><div class="knob"></div>
</div>
<div class="door"></div>
<div class="handle"></div>
<div class="swatches">
<div class="sw" style="background:#7fa896"></div>
<div class="sw" style="background:#2d4a7a"></div>
<div class="sw" style="background:#5b3a52"></div>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="card">
<div class="swatch-row">
<div class="finish" style="background:#7fa896"></div>
<div class="finish" style="background:#2d4a7a"></div>
<div class="finish" style="background:#5b3a52"></div>
</div>
<div class="cname">Nostalgie 90cm Range</div>
<div class="cspec">Dual fuel · 5 burners · Convection</div>
<div class="price">from €6,490</div>
</div>
<div class="card">
<div class="swatch-row">
<div class="finish" style="background:#c9c9c9"></div>
<div class="finish" style="background:#2d4a7a"></div>
</div>
<div class="cname">Majestic II Induction</div>
<div class="cspec">Induction · Triple oven</div>
<div class="price">from €8,120</div>
</div>
<div class="card">
<div class="swatch-row">
<div class="finish" style="background:#5b3a52"></div>
<div class="finish" style="background:#c9c9c9"></div>
</div>
<div class="cname">Professional Plus 100</div>
<div class="cspec">Gas · 6 burners · Griddle</div>
<div class="price">from €9,340</div>
<div class="warn">2 finishes back-ordered</div>
</div>
<div class="card">
<div class="swatch-row">
<div class="finish" style="background:#7fa896"></div>
<div class="finish" style="background:#c9c9c9"></div>
<div class="finish" style="background:#2d4a7a"></div>
</div>
<div class="cname">Built-In Wall Oven Duo</div>
<div class="cspec">Electric · A+ rated</div>
<div class="price">from €3,860</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b5cff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b5cff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8cb0fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00053d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b5cff; color: #00053d;
border: 1px solid #00053d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b5cff; color: #f5f5f5;
border: 1px solid #3074fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8cb0fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #094ee0; color: #00053d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00053d; color:#ffffff; box-sizing:border-box;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:19px; font-weight:700; color:#0b5cff; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; font-size:14px; font-weight:500; color:#ffffff; opacity:0.9; }
.navr { display:flex; gap:10px; align-items:center; }
.btn-nav-ghost { background:#e6f0ff; color:#00053d; border-radius:12px; padding:0 20px; height:36px;
font-size:13px; font-weight:600; display:flex; align-items:center; }
.btn-nav-primary { background:#0b5cff; color:#ffffff; border-radius:12px; padding:0 20px; height:36px;
font-size:13px; font-weight:600; display:flex; align-items:center; }
.hero { padding:26px 32px 30px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.badge { background:#e6f0ff; color:#0b5cff; border-radius:9999px; padding:4px 14px; font-size:12px; font-weight:500; }
.hero h1 { font-size:38px; font-weight:500; line-height:1.12; margin:0; max-width:660px; letter-spacing:-0.5px; }
.hero p { font-size:15px; color:rgba(255,255,255,0.8); margin:0; max-width:480px; line-height:1.5; }
.hero-actions { display:flex; gap:10px; }
.btn-primary { background:#0b5cff; color:#fff; border:1px solid #0b5cff; border-radius:12px; padding:0 22px;
height:42px; font-size:14px; font-weight:500; display:flex; align-items:center; }
.btn-secondary { background:#e6f0ff; color:#00053d; border:1px solid #e6f0ff; border-radius:12px; padding:0 22px;
height:42px; font-size:14px; font-weight:500; display:flex; align-items:center; }
/* meeting grid panel — the product itself, floating below the hero on the navy canvas */
.panel { margin:0 32px; background:#ffffff; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,0.12);
overflow:hidden; color:#222325; }
.panel-bar { height:38px; background:#f3f8ff; border-bottom:1px solid #dfe3e8; display:flex; align-items:center;
justify-content:space-between; padding:0 16px; }
.dot-row { display:flex; gap:6px; }
.dot-row span { width:8px; height:8px; border-radius:50%; background:#d1dee2; }
.panel-bar .badgepill { background:#e6f0ff; color:#0b5cff; border-radius:9999px; padding:3px 10px; font-size:11px; font-weight:500; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:16px; }
.tile { aspect-ratio:4/3; border-radius:8px; border:1px solid #dfe3e8; position:relative; display:flex;
align-items:flex-end; overflow:hidden; }
.tile .name { position:relative; font-size:11px; font-weight:500; color:#fff; background:rgba(0,5,61,0.55);
padding:3px 8px; border-radius:6px; margin:8px; }
.tile.a { background:linear-gradient(150deg,#0b5cff,#00053d); }
.tile.b { background:linear-gradient(150deg,#e6f0ff,#f3f8ff); }
.tile.b .name { color:#00053d; background:rgba(255,255,255,0.7); }
.tile.c { background:linear-gradient(150deg,#00053d,#0d6bde); }
.tile.d { background:linear-gradient(150deg,#f3f8ff,#d1dee2); }
.tile.d .name { color:#00053d; background:rgba(255,255,255,0.7); }
.toolbar { height:56px; background:#ffffff; border-top:1px solid #dfe3e8; display:flex; align-items:center;
justify-content:center; gap:14px; }
.tool { width:38px; height:38px; border-radius:8px; background:#f3f8ff; border:1px solid #dfe3e8;
display:flex; align-items:center; justify-content:center; font-size:14px; color:#00053d; }
.tool.end { background:#e6f0ff; color:#0b5cff; width:auto; padding:0 18px; font-size:12px; font-weight:600; border-radius:9999px; }
footer { position:absolute; bottom:0; left:0; right:0; height:26px; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; font-size:11px; color:rgba(255,255,255,0.55); }
</style></head>
<body>
<nav>
<p class="brand">Zoom</p>
<div class="navlinks"><span>Products</span><span>AI Companion</span><span>Solutions</span><span>Pricing</span></div>
<div class="navr">
<div class="btn-nav-ghost">Contact Sales</div>
<div class="btn-nav-primary">Sign Up Free</div>
</div>
</nav>
<section class="hero">
<span class="badge">AI Companion included</span>
<h1>Find out what's possible when work connects</h1>
<p>One platform for meetings, phone, chat, and AI — built to feel reliable, not complicated.</p>
<div class="hero-actions">
<div class="btn-primary">Sign Up Free</div>
<div class="btn-secondary">Watch a demo</div>
</div>
</section>
<section class="panel">
<div class="panel-bar">
<div class="dot-row"><span></span><span></span><span></span></div>
<span class="badgepill">Recording</span>
</div>
<div class="grid">
<div class="tile a"><span class="name">Jordan Lee</span></div>
<div class="tile b"><span class="name">Priya Patel</span></div>
<div class="tile c"><span class="name">Marcus Ito</span></div>
<div class="tile d"><span class="name">Alex Rivera</span></div>
</div>
<div class="toolbar">
<div class="tool">🎤</div>
<div class="tool">📷</div>
<div class="tool">💬</div>
<div class="tool">✨</div>
<div class="tool end">Leave</div>
</div>
</section>
<footer>
<span>Zoom Workplace</span>
<span>Trusted by millions. Built for you.</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff00bf; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff00bf; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #11111f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff00bf; color: #11111f;
border: 1px solid #11111f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff00bf; color: #f5f5f5;
border: 1px solid #fd27c8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d903a5; color: #11111f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#11111F; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.map { position:absolute; inset:0; background:
radial-gradient(circle at 30% 20%, #1c1c2b 0%, transparent 40%),
linear-gradient(135deg,#1C1C2B,#11111F); }
.road { position:absolute; background:#26263A; }
.r1 { top:160px; left:0; right:0; height:8px; transform:rotate(-3deg); }
.r2 { top:0; bottom:0; left:520px; width:8px; transform:rotate(5deg); }
.route { position:absolute; top:180px; left:220px; width:340px; height:5px; background:#FF00BF; border-radius:3px; transform:rotate(-6deg); box-shadow:0 0 12px rgba(255,0,191,0.5); }
.pin { position:absolute; width:16px; height:16px; border-radius:50%; background:#FF00BF; box-shadow:0 4px 10px rgba(255,0,191,0.5); }
.pin.pickup { top:170px; left:210px; }
.dpin { position:absolute; width:16px; height:16px; border-radius:50%; background:#11111F; border:2px solid #fff; top:172px; left:555px; }
.searchbar { position:absolute; top:20px; left:24px; right:24px; background:#1C1C2B; border-radius:14px; padding:14px 18px; font-size:20px; font-weight:600; box-shadow:0 10px 26px rgba(0,0,0,0.35); }
.sheet { position:absolute; left:0; right:0; bottom:0; background:#11111F; border-radius:28px 28px 0 0; padding:18px 22px 22px;
box-shadow:0 -10px 30px rgba(0,0,0,0.4); }
.handle { width:40px; height:4px; background:#2C2C40; border-radius:2px; margin:0 auto 14px; }
.sheettitle { font-size:22px; font-weight:700; margin-bottom:14px; }
.ridecard { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid #2C2C40; }
.ridecard.on { background:#33102B; border-radius:14px; padding:12px 14px; border-bottom:none; }
.rideicon { width:44px; height:30px; border-radius:8px; background:linear-gradient(135deg,#2C2C40,#1C1C2B); }
.ridename { font-size:17px; font-weight:700; }
.ridemeta { font-size:14px; color:#A0A0B4; margin-top:2px; }
.rideprice { margin-left:auto; font-size:17px; font-weight:700; }
.confirmbtn { margin-top:16px; background:#FF00BF; color:#fff; font-weight:800; font-size:16px; text-align:center; padding:14px; border-radius:14px; }
</style></head>
<body>
<div class="map">
<div class="road r1"></div><div class="road r2"></div>
<div class="route"></div><div class="pin pickup"></div><div class="dpin"></div>
</div>
<div class="searchbar">Lyft (iOS) → Mission District</div>
<div class="sheet">
<div class="handle"></div>
<div class="sheettitle">Choose a ride</div>
<div class="ridecard on"><div class="rideicon"></div><div><div class="ridename">Lyft</div><div class="ridemeta">4 seats · 3 min away</div></div><div class="rideprice">$14.20</div></div>
<div class="ridecard"><div class="rideicon"></div><div><div class="ridename">Wait & Save</div><div class="ridemeta">4 seats · 8 min away</div></div><div class="rideprice">$9.80</div></div>
<div class="ridecard"><div class="rideicon"></div><div><div class="ridename">Lux Black</div><div class="ridemeta">4 seats · 5 min away</div></div><div class="rideprice">$32.10</div></div>
<div class="confirmbtn">Confirm Lyft</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #090909;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #090909;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #090909; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #656565; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ca1818; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f8f8f8; color: #090909;
border: 1px solid #ca1818; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #090909;
border: 1px solid #bcbcbc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #656565; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ca1818; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f8f8; font-family:'Barlow',Arial,sans-serif; color:#3a3a3a; }
*{box-sizing:border-box;}
.nav{height:56px;background:#3a3a3a;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Montserrat',Arial,sans-serif;font-size:19px;font-weight:700;color:#fff;letter-spacing:.3px;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;color:#e6e6e6;}
.cart{background:#ca1818;color:#fff;font-size:11px;font-weight:700;padding:5px 10px;border-radius:8px;}
.hero{height:230px;background:#494949;display:flex;align-items:center;padding:0 32px;}
.heroText{width:430px;}
.h1{font-family:'Montserrat',Arial,sans-serif;font-size:30px;font-weight:700;line-height:1.2;color:#fff;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.5;color:#cfcfcf;margin:0 0 18px;max-width:370px;}
.btn{display:inline-block;background:#ca1818;color:#fff;font-size:13px;font-weight:600;padding:12px 26px;border-radius:8px;}
.apronwrap{margin-left:auto;width:150px;height:180px;position:relative;}
.apron{position:absolute;width:110px;height:150px;background:#3a3a3a;border-radius:10px 10px 30px 30px;top:10px;left:20px;}
.strap{position:absolute;width:60px;height:8px;background:#f2f2f2;top:20px;left:45px;border-radius:4px;}
.sec{padding:20px 32px 0;}
.secTitle{font-family:'Montserrat',Arial,sans-serif;font-size:17px;font-weight:700;color:#3a3a3a;margin-bottom:14px;}
.grid{display:flex;gap:12px;}
.card{width:224px;background:#fff;border:1px solid #e6e6e6;border-radius:12px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#ca1818;color:#fff;font-size:9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:2px 7px;border-radius:8px;}
.thumb{height:96px;background:#eeeeee;border-radius:8px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;color:#3a3a3a;margin:0 0 4px;}
.pprice{font-size:13px;font-weight:700;color:#3a3a3a;}
</style>
<div class="nav">
<div class="logo">Tilit</div>
<div class="navlinks"><div>Chef Coats</div><div>Aprons</div><div>Pants</div><div>Custom</div></div>
<div class="cart">CART (1)</div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Built for the working chef.</div>
<div class="sub">Kitchen uniforms cut for real shifts — tough fabric, honest stitching, zero pretense.</div>
<div class="btn">Shop Uniforms</div>
</div>
<div class="apronwrap"><div class="apron"></div><div class="strap"></div></div>
</div>
<div class="sec">
<div class="secTitle">Shop Kitchen-Ready</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb"></div><div class="pname">Camp Collar Chef Coat</div><div class="pprice">$68</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Cross-Back Waist Apron</div><div class="pprice">$38</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Slim Kitchen Pant</div><div class="pprice">$54</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Utility Bandana 3pk</div><div class="pprice">$18</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #232424; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #232424; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #9e9e9e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ee2c2f; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #1e1f1f; color: #dedede;
border: 1px solid #ee2c2f; border-radius: 4px;
padding: 10px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #1e1f1f; color: #dedede;
border: 1px solid #232424; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9e9e9e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #121212; color: #dedede;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#232424; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:#dedede; }
*{box-sizing:border-box;}
.nav{height:56px;background:#151616;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-weight:700;font-size:18px;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;}
.navlinks span:first-child{color:#ee2c2f;}
.cart{color:#ee2c2f;font-size:13px;font-weight:600;}
.searchrow{padding:14px 32px 0;}
.searchbar{height:40px;background:#1e1f1f;border-radius:4px;display:flex;align-items:center;padding:0 12px;font-size:13px;color:#9e9e9e;}
.chips{display:flex;gap:8px;padding:12px 32px 0;}
.chip{background:#1e1f1f;color:#dedede;font-size:12px;font-weight:600;padding:6px 14px;border-radius:9999px;}
.chip.active{background:#ee2c2f;color:#fff;}
.grid{display:flex;gap:12px;padding:14px 32px 0;}
.card{width:200px;background:#1e1f1f;border-radius:4px;padding:10px;position:relative;}
.thumb{height:110px;background:#151616;border-radius:4px;margin-bottom:8px;}
.badge{position:absolute;top:8px;left:8px;background:#121212;color:#dedede;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 6px;border-radius:2px;}
.badge.new{background:#ee2c2f;color:#fff;}
.title{font-size:15px;font-weight:600;color:#dedede;}
.price{font-size:16px;font-weight:600;color:#ee2c2f;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#151616;color:#9e9e9e;display:flex;align-items:center;justify-content:center;gap:26px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Prodigy Games</div>
<div class="navlinks"><span>Pokémon</span><span>Yu-Gi-Oh!</span><span>Magic: The Gathering</span></div>
<div class="cart">Cart (3)</div>
</div>
<div class="searchrow"><div class="searchbar">Search set code or card name (e.g. SWSH12)</div></div>
<div class="chips"><div class="chip active">All Sets</div><div class="chip">Near Mint</div><div class="chip">Holo</div><div class="chip">Sealed</div></div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">Sold Out</div></div><div class="title">Crimson Ember Booster Box</div><div class="price">$149.00</div></div>
<div class="card"><div class="thumb"><div class="badge new">New</div></div><div class="title">Silverwing Prime Rare</div><div class="price">$34.00</div></div>
<div class="card"><div class="thumb"></div><div class="title">Obsidian Vault Deck</div><div class="price">$24.00</div></div>
<div class="card"><div class="thumb"></div><div class="title">Tundra Relic Playset</div><div class="price">$18.00</div></div>
</div>
<div class="footer"><span>About Us</span><span>Shipping</span><span>Returns</span><span>Contact</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #13ab67; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #13ab67; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #13ab67; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #13ab67; color: #f5f5f5;
border: 1px solid #37b77e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #39b87f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #D1D6D4; }
.brand { font-size:17px; font-weight:600; color:#0C4129; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#000; }
.actions { display:flex; gap:10px; align-items:center; }
.login { color:#13AB67; font-size:14px; background:none; border:none; font-weight:400; }
.signup { background:#13AB67; color:#fff; border:none; border-radius:4px; height:32px; padding:0 16px; font-size:14px; }
.layout { display:flex; height:calc(640px - 56px); }
.sidebar { width:230px; border-right:1px solid #D1D6D4; padding:24px 20px; }
.sidebar h2 { font-size:38px; font-weight:600; color:#0C4129; margin:0 0 8px; line-height:1.1; }
.sidebar p { font-size:13px; color:#378060; margin:0 0 20px; }
.filtergroup { margin-bottom:18px; }
.filtergroup .lbl { font-size:12px; font-weight:600; color:#000; margin-bottom:8px; text-transform:uppercase; letter-spacing:.03em; }
.chip { display:inline-block; background:#E2E6E4; color:#0E0E0F; border-radius:4px; padding:5px 10px; font-size:12px; margin:0 6px 6px 0; }
.main { flex:1; padding:24px 28px; }
.job { border:1px solid #D1D6D4; border-radius:4px; padding:16px 18px; margin-bottom:12px; display:flex;
justify-content:space-between; align-items:center; }
.job .co { width:38px; height:38px; border-radius:4px; margin-right:14px; flex-shrink:0; }
.c1 { background:#13AB67; }
.c2 { background:#0C4129; }
.c3 { background:#378060; }
.job .info { display:flex; align-items:center; flex:1; }
.job .t { font-size:15px; font-weight:600; color:#000; }
.job .s { font-size:12px; color:#757575; margin-top:2px; }
.job .salary { font-size:13px; color:#0C4129; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Cake</p>
<div class="navlinks"><span>Jobs</span><span>Resume Builder</span><span>Companies</span></div>
<div class="actions"><button class="login">Log In</button><button class="signup">Sign Up</button></div>
</nav>
<div class="layout">
<aside class="sidebar">
<h2>Find your<br>next job</h2>
<p>Trusted by talent across Asia</p>
<div class="filtergroup">
<div class="lbl">Job Type</div>
<span class="chip">Full-time</span><span class="chip">Remote</span><span class="chip">Internship</span>
</div>
<div class="filtergroup">
<div class="lbl">Function</div>
<span class="chip">Engineering</span><span class="chip">Design</span><span class="chip">Marketing</span>
</div>
</aside>
<main class="main">
<div class="job"><div class="info"><div class="co c1"></div><div><div class="t">Frontend Engineer</div><div class="s">Taipei · Cake Technologies</div></div></div><div class="salary">$60K–80K</div></div>
<div class="job"><div class="info"><div class="co c2"></div><div><div class="t">Product Designer</div><div class="s">Remote · Growth Studio</div></div></div><div class="salary">$50K–70K</div></div>
<div class="job"><div class="info"><div class="co c3"></div><div><div class="t">Recruiting Partner</div><div class="s">Taipei · Talent Co.</div></div></div><div class="salary">$45K–65K</div></div>
<div class="job"><div class="info"><div class="co c1"></div><div><div class="t">AI Resume Reviewer</div><div class="s">Hybrid · Cake Labs</div></div></div><div class="salary">$55K–75K</div></div>
</main>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #21bddb; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #21bddb; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #185e6c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #006f8e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #21bddb; color: #006f8e;
border: 1px solid #006f8e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #21bddb; color: #111111;
border: 1px solid #1ea1bb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #185e6c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1cb1cf; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#24282a; box-sizing:border-box;
font-family:Poppins,Lato,"Helvetica Neue",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:700; font-size:17px; color:#21bddb; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#006f8e; }
.pill { background:#21bddb; color:#ffffff; border-radius:28px; height:40px; padding:0 20px; font-size:14px;
font-weight:600; display:flex; align-items:center; }
.hero { position:relative; height:280px; background:linear-gradient(135deg,#0a2f3a,#12525f 60%,#21bddb);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; color:#ffffff;
text-align:center; margin:0 32px; border-radius:16px; overflow:hidden; }
.hero::after { content:''; position:absolute; inset:0; background:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(255,255,255,0.06), transparent 40%); }
.hero h1 { font-size:34px; font-weight:700; margin:0; line-height:1.3; z-index:1; max-width:560px; }
.row { display:flex; gap:10px; z-index:1; }
.white-pill { background:#ffffff; color:rgba(0,0,0,0.56); border-radius:48px; height:52px; padding:0 20px;
font-size:15px; font-weight:600; display:flex; align-items:center; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
.field { background:rgba(255,255,255,0.9); color:rgba(0,0,0,0.6); border-radius:4px; height:40px; padding:0 12px;
font-size:14px; display:flex; align-items:center; }
.panels { display:flex; gap:16px; padding:22px 32px; }
.panel { flex:1; background:rgba(0,0,0,0.06); border-radius:16px; padding:18px 20px; }
.panel h3 { font-size:15px; font-weight:700; margin:0 0 8px; }
.panel p { font-size:12px; color:rgba(0,0,0,0.56); margin:0; line-height:1.5; }
.bandwide { margin:6px 32px 0; background:#eeeeee; border-radius:24px; padding:20px 32px; display:flex; justify-content:space-between; align-items:center; }
.bandwide h3 { font-size:18px; margin:0; }
</style></head>
<body>
<nav>
<span class="brand">Wantedly</span>
<div class="navlinks"><span>Article</span><span>Team</span><span>Philosophy</span></div>
<span class="pill">Create profile</span>
</nav>
<section class="hero">
<h1>Where is the work that makes me serious?</h1>
<div class="row"><span class="field">[email protected]</span><span class="white-pill">Search jobs now</span></div>
</section>
<section class="panels">
<div class="panel"><h3>Casually visit a company</h3><p>Read the story first, meet the team before deciding anything.</p></div>
<div class="panel"><h3>Build your profile</h3><p>Make your work interesting with this one page.</p></div>
</section>
<div class="bandwide"><h3>For recruiters</h3><span style="font-size:13px;color:rgba(0,0,0,0.56);">Post your team's story, not just a job listing.</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff9933; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff9933; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c4e20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f8f6f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff9933; color: #000000;
border: 1px solid #f8f6f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff9933; color: #111111;
border: 1px solid #d9832e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c4e20; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fea852; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F8F6F2; color:#0F0F0F; box-sizing:border-box;
font-family:"Noto Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#ffffff; }
.brand { font-size:18px; font-weight:700; color:#FF9933; margin:0; }
.search { flex:1; max-width:360px; margin:0 24px; background:#F8F6F2; border-radius:8px; padding:9px 14px;
font-size:14px; color:#4A4A4A; }
.btn-primary { background:#FF9933; color:#fff; border-radius:8px; padding:8px 20px; font-size:14px; font-weight:600; }
.cats { display:flex; gap:14px; padding:16px 36px; }
.cat { flex:1; background:#fff; border-radius:8px; padding:14px; text-align:center; }
.cat .icon { width:34px; height:34px; border-radius:8px; margin:0 auto 8px; background:linear-gradient(135deg,#FF9933,#E9B83F); }
.cat span { font-size:13px; color:#0F0F0F; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:6px 36px 30px; }
.card { background:#fff; border-radius:8px; overflow:hidden; }
.card .photo { height:110px; background:linear-gradient(135deg,#f3c98a,#e77f4b); }
.card .body { padding:10px 12px; }
.card h3 { font-size:14px; font-weight:600; margin:0 0 4px; }
.card .meta { font-size:11px; color:#4A4A4A; display:flex; justify-content:space-between; }
.badge { background:#FAF5D7; color:#4A4A4A; border-radius:8px; padding:1px 6px; font-size:10px; }
</style></head>
<body>
<nav>
<p class="brand">Cookpad</p>
<div class="search">Search chicken breast recipes</div>
<button class="btn-primary">Post a Recipe</button>
</nav>
<div class="cats">
<div class="cat"><div class="icon"></div><span>Vegetables</span></div>
<div class="cat"><div class="icon"></div><span>Meat</span></div>
<div class="cat"><div class="icon"></div><span>Seafood</span></div>
<div class="cat"><div class="icon"></div><span>Noodles</span></div>
<div class="cat"><div class="icon"></div><span>Rice Bowls</span></div>
<div class="cat"><div class="icon"></div><span>Salads</span></div>
</div>
<div class="cards">
<div class="card"><div class="photo"></div><div class="body"><h3>Chicken Breast Teriyaki</h3><div class="meta"><span>15 min</span><span class="badge">312 made this</span></div></div></div>
<div class="card"><div class="photo"></div><div class="body"><h3>Easy Pork Miso Soup</h3><div class="meta"><span>20 min</span><span class="badge">88 made this</span></div></div></div>
<div class="card"><div class="photo"></div><div class="body"><h3>Fluffy Rolled Omelet</h3><div class="meta"><span>10 min</span><span class="badge">154 made this</span></div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0d0e12; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0d0e12; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8d8f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffd24c; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d0e12; color: #ffd24c;
border: 1px solid #ffd24c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0d0e12; color: #f5f5f5;
border: 1px solid #323336; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8d8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #342d1b; color: #ffd24c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0D0E12; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { position:absolute; top:0; left:0; right:0; height:44px; display:flex; align-items:center;
justify-content:space-between; padding:0 36px; background:#0D0E12; }
.wordmark { font-size:18px; font-weight:800; letter-spacing:-0.3px; color:#FFFFFF; margin:0; }
.navicons { display:flex; gap:20px; font-size:18px; color:#FFFFFF; }
.layout { position:absolute; top:44px; bottom:52px; left:0; right:0; display:flex; gap:24px;
padding:14px 36px 6px; overflow:hidden; }
.playercol { flex:1.7; min-width:0; }
.player { position:relative; width:100%; height:210px; border-radius:14px; overflow:hidden;
background:linear-gradient(160deg,#16384A,#08151D); }
.playbtn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px;
border-radius:50%; background:rgba(13,14,18,0.55); border:1.5px solid rgba(255,255,255,0.55);
display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; }
.qchip { position:absolute; top:10px; right:10px; font-size:9px; font-weight:700; color:#fff;
border:1px solid rgba(255,255,255,0.5); border-radius:3px; padding:2px 6px; }
.controls { position:absolute; left:0; right:0; bottom:0; height:34px;
background:linear-gradient(to top, rgba(8,21,29,0.85), transparent);
display:flex; align-items:center; gap:8px; padding:0 10px 6px; }
.tc { font-size:11px; font-weight:700; color:#fff; }
.track { flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,0.22); position:relative; }
.fill { position:absolute; left:0; top:0; height:3px; width:38%; border-radius:2px; background:#00ADEF; }
.knob { position:absolute; left:38%; top:50%; transform:translate(-50%,-50%); width:10px; height:10px;
border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,0.6); }
.meta { margin-top:14px; }
.staffpill { display:inline-flex; align-items:center; gap:4px; background:#FFD24C; color:#04121A;
font-size:10px; font-weight:700; border-radius:999px; padding:3px 8px; margin-bottom:8px; }
.vtitle { font-size:18px; font-weight:700; margin:0 0 3px; }
.vsub { font-size:13px; color:#AEB6C2; margin:0 0 12px; }
.creatorrow { display:flex; align-items:center; gap:10px; }
.cavatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#00ADEF,#8B5CF6); }
.ccol b { font-size:13px; font-weight:600; display:block; }
.ccol span { font-size:11px; color:#6B7280; }
.follow { margin-left:auto; background:#00ADEF; color:#04121A; font-size:12px; font-weight:700;
border-radius:999px; padding:7px 16px; }
.actrow { margin-top:12px; display:flex; gap:22px; font-size:13px; color:#AEB6C2; }
.actrow .on { color:#00ADEF; }
.sidecol { width:280px; flex-shrink:0; overflow:hidden; }
.overline { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:#AEB6C2;
text-transform:uppercase; letter-spacing:0.6px; margin:2px 0 12px; }
.overline .star { color:#FFD24C; }
.feedrow { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid #262A34; }
.thumb { position:relative; width:124px; height:70px; border-radius:8px; flex-shrink:0;
background:linear-gradient(150deg,#1F222B,#00ADEF); }
.minigold { position:absolute; top:5px; left:5px; width:16px; height:16px; border-radius:50%;
background:#FFD24C; color:#04121A; font-size:9px; display:flex; align-items:center; justify-content:center; }
.dur { position:absolute; right:4px; bottom:4px; background:rgba(0,0,0,0.7); color:#fff; font-size:9px;
font-weight:700; border-radius:3px; padding:1px 4px; }
.frtitle { font-size:13px; font-weight:600; margin:0 0 3px; }
.frmeta { font-size:11px; color:#6B7280; margin:0; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:52px; background:rgba(13,14,18,0.94);
border-top:0.5px solid #262A34; display:flex; align-items:center; justify-content:space-around;
padding:0 60px; }
.tabicon { font-size:20px; color:#6B7280; }
.tabicon.on { color:#00ADEF; }
.uploadring { width:32px; height:32px; border-radius:50%; background:#00ADEF; color:#04121A;
display:flex; align-items:center; justify-content:center; font-size:16px; }
</style></head>
<body>
<nav>
<p class="wordmark">Vimeo (iOS)</p>
<div class="navicons"><span>🔍</span><span>🔔</span></div>
</nav>
<div class="layout">
<div class="playercol">
<div class="player">
<div class="playbtn">▶</div>
<div class="qchip">HD</div>
<div class="controls">
<span class="tc">6:12</span>
<div class="track"><div class="fill"></div><div class="knob"></div></div>
<span class="tc">16:04</span>
</div>
</div>
<div class="meta">
<div class="staffpill">★ Staff Pick</div>
<p class="vtitle">Notes From a Quiet Coastline</p>
<p class="vsub">48K plays · 2 days ago</p>
<div class="creatorrow">
<div class="cavatar"></div>
<div class="ccol"><b>Halden Reyes</b><span>Staff · 12.4K followers</span></div>
<span class="follow">Follow</span>
</div>
<div class="actrow"><span class="on">♥ 1.2K</span><span>💬 84</span><span>↗ Share</span></div>
</div>
</div>
<div class="sidecol">
<div class="overline"><span class="star">★</span>Staff Picks</div>
<div class="feedrow">
<div class="thumb"><span class="minigold">★</span><span class="dur">4:12</span></div>
<div><p class="frtitle">Glasswork</p><p class="frmeta">by Studio Arlo · 37K plays</p></div>
</div>
<div class="feedrow">
<div class="thumb" style="background:linear-gradient(150deg,#1F222B,#8B5CF6);"><span class="minigold">★</span><span class="dur">2:47</span></div>
<div><p class="frtitle">Between Frames</p><p class="frmeta">by Nadia Kovač · 21K plays</p></div>
</div>
<div class="feedrow" style="border-bottom:none;">
<div class="thumb" style="background:linear-gradient(150deg,#1F222B,#1AB7EA);"><span class="dur">7:30</span></div>
<div><p class="frtitle">Low Tide Diary</p><p class="frmeta">by Renn Okafor · 9.4K plays</p></div>
</div>
</div>
</div>
<div class="tabbar">
<span class="tabicon on">⌂</span>
<span class="tabicon">🔍</span>
<div class="uploadring">▶</div>
<span class="tabicon">✉</span>
<span class="tabicon">👤</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #c8102e; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #1a1a1a;
border: 1px solid #c8102e; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f7dee2; color: #c8102e;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.topnav { height:56px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #f0f0f0; }
.brand { font-size:17px; font-weight:700; margin:0; letter-spacing:0.2px; }
.icons { display:flex; align-items:center; gap:18px; }
.icons span { width:18px; height:18px; border-radius:4px; background:#1a1a1a; opacity:0.75; display:inline-block; }
.cart-dot { position:relative; }
.cart-dot::after { content:''; position:absolute; top:-4px; right:-6px; width:14px; height:14px; border-radius:999px;
background:#c8102e; }
.subnav { height:40px; flex:0 0 auto; display:flex; align-items:center; gap:26px; padding:0 28px;
border-bottom:1px solid #f0f0f0; font-size:13px; font-weight:500; color:#666666; }
.subnav .active { color:#1a1a1a; border-bottom:2px solid #c8102e; padding-bottom:11px; margin-bottom:-1px; }
main { flex:1 1 auto; display:flex; flex-direction:column; padding:20px 28px 0; min-height:0; }
.hero { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; background:#f7f7f7;
border-radius:8px; padding:20px 28px; margin-bottom:18px; }
.hero-text .badge { display:inline-block; background:#c8102e; color:#ffffff; font-size:11px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; padding:3px 10px; border-radius:999px; margin-bottom:8px; }
.hero-text h1 { font-size:22px; font-weight:700; margin:0 0 6px; line-height:1.3; max-width:340px; }
.hero-text p { font-size:13px; color:#333333; margin:0 0 12px; max-width:340px; }
.hero-cta { background:#c8102e; color:#ffffff; border:none; border-radius:8px; padding:10px 22px;
font-weight:600; font-size:14px; }
.hero-art { width:150px; height:96px; border-radius:12px;
background:linear-gradient(135deg,#c8102e 0%,#7a0a1c 55%,#1a1a1a 100%); position:relative; flex:0 0 auto; }
.hero-art::after { content:''; position:absolute; inset:14px; border:2px solid rgba(255,255,255,0.35); border-radius:8px; }
.grid { flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; min-height:0; }
.card { border:1px solid #f0f0f0; border-radius:8px; padding:14px; display:flex; flex-direction:column; gap:6px; position:relative; }
.card .thumb { aspect-ratio:1/1; border-radius:4px; margin-bottom:2px; }
.thumb.t1 { background:linear-gradient(150deg,#e0e0e0,#c8102e 120%); }
.thumb.t2 { background:linear-gradient(150deg,#e0e0e0,#333333 120%); }
.thumb.t3 { background:linear-gradient(150deg,#e0e0e0,#ff8c00 120%); }
.card .badge { position:absolute; top:10px; left:10px; font-size:11px; font-weight:700; letter-spacing:0.5px;
text-transform:uppercase; color:#fff; padding:2px 8px; border-radius:999px; }
.b-pre { background:#c8102e; }
.b-sold { background:#999999; }
.b-lim { background:#ff8c00; }
.card .tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#666666; }
.card h3 { font-size:14px; font-weight:600; margin:0; line-height:1.4; }
.card .price { font-size:18px; font-weight:700; margin:4px 0 0; }
.card .stars { font-size:11px; color:#f5a623; }
footer { flex:0 0 auto; height:56px; background:#1a1a1a; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 28px; font-size:12px; }
footer .links { display:flex; gap:18px; color:#999999; }
</style></head>
<body>
<nav class="topnav">
<p class="brand">Aniplex Usa</p>
<div class="icons"><span></span><span></span><span class="cart-dot"></span></div>
</nav>
<div class="subnav">
<span class="active">Demon Slayer</span><span>Fate</span><span>Gundam</span><span>Sword Art Online</span><span>Evangelion</span>
</div>
<main>
<div class="hero">
<div class="hero-text">
<span class="badge">Pre-Order Event</span>
<h1>Reserve the next drop before it's gone</h1>
<p>Collector-grade figures and apparel from your favorite franchises, shipped straight from the studio.</p>
<button class="hero-cta">Shop Pre-Orders</button>
</div>
<div class="hero-art"></div>
</div>
<div class="grid">
<div class="card">
<span class="badge b-pre">Pre-Order</span>
<div class="thumb t1"></div>
<span class="tag">Figure</span>
<h3>Deluxe Edition Statue — Ver. 2</h3>
<div class="stars">★★★★★ 4.8</div>
<div class="price">$189.00</div>
</div>
<div class="card">
<span class="badge b-lim">Limited</span>
<div class="thumb t2"></div>
<span class="tag">Apparel</span>
<h3>Embroidered Crest Jacket</h3>
<div class="stars">★★★★☆ 4.5</div>
<div class="price">$96.00</div>
</div>
<div class="card">
<span class="badge b-sold">Sold Out</span>
<div class="thumb t3"></div>
<span class="tag">Collectible</span>
<h3>Acrylic Diorama Stand Set</h3>
<div class="stars">★★★★★ 5.0</div>
<div class="price">$54.00</div>
</div>
</div>
</main>
<footer>
<span>© Aniplex Usa</span>
<div class="links"><span>Help</span><span>About</span><span>Privacy</span><span>Terms</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #003087; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #003087;
border: 1px solid #003087; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #e31837; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Gotham SSm','Helvetica Neue',Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:64px;background:#003087;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:20px;font-weight:700;letter-spacing:-0.3px;color:#ffffff;}
.navlinks{display:flex;gap:26px;font-size:13px;font-weight:600;color:#ffffff;}
.hero{height:270px;display:flex;align-items:center;padding:0 40px;background:#f5f5f5;}
.heroText{width:440px;}
.h1{font-size:34px;font-weight:700;line-height:1.2;color:#1a1a1a;margin:0 0 14px;}
.sub{font-size:15px;color:#666666;margin:0 0 22px;width:380px;}
.cta{display:inline-flex;align-items:center;justify-content:center;width:180px;height:46px;background:#003087;color:#ffffff;font-size:14px;font-weight:600;border-radius:4px;}
.appliance{width:150px;height:210px;background:linear-gradient(180deg,#ffffff,#e8e8e8);border:2px solid #d9d9d9;border-radius:6px;position:relative;margin-left:120px;}
.doorline{position:absolute;left:0;top:52%;width:100%;height:2px;background:#d9d9d9;}
.handle{position:absolute;right:10px;top:16px;width:6px;height:150px;background:#999999;border-radius:3px;}
.badgeR{position:absolute;top:-10px;right:-10px;background:#e31837;color:#fff;font-size:11px;font-weight:700;padding:6px 10px;border-radius:4px;}
.compare{padding:22px 40px 0;}
.compareTitle{font-size:18px;font-weight:700;color:#1a1a1a;margin-bottom:12px;}
.comparerail{display:flex;gap:1px;background:#e0e0e0;border:1px solid #e0e0e0;}
.rc{flex:1;background:#ffffff;padding:12px;text-align:center;}
.rclabel{font-size:11px;color:#666666;text-transform:uppercase;letter-spacing:0.3px;}
.rcval{font-size:15px;font-weight:700;color:#003087;margin-top:4px;}
.grid{display:flex;gap:14px;padding:20px 40px 0;}
.card{width:200px;border:1px solid #e0e0e0;border-radius:4px;padding:10px;}
.thumb{height:90px;border-radius:4px;margin-bottom:8px;background:#f5f5f5;}
.pname{font-size:13px;font-weight:600;color:#1a1a1a;}
.pprice{font-size:14px;font-weight:700;color:#003087;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Whirlpool</div>
<div class="navlinks"><span>Washers</span><span>Dryers</span><span>Refrigerators</span><span>Dishwashers</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Appliances built to outlast the trend cycle.</div>
<div class="sub">Compare specs side by side and find the machine that fits your home.</div>
<div class="cta">Compare Models</div>
</div>
<div class="appliance"><div class="handle"></div><div class="doorline"></div><div class="badgeR">Save $200</div></div>
</div>
<div class="compare">
<div class="compareTitle">Compare Top-Load Washers</div>
<div class="comparerail">
<div class="rc"><div class="rclabel">Capacity</div><div class="rcval">5.3 cu ft</div></div>
<div class="rc"><div class="rclabel">Cycles</div><div class="rcval">12</div></div>
<div class="rc"><div class="rclabel">Energy Star</div><div class="rcval">Yes</div></div>
<div class="rc"><div class="rclabel">Noise</div><div class="rcval">Low</div></div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003087,#e0e0e0);"></div><div class="pname">Top-Load Washer</div><div class="pprice">$799</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e0e0e0,#003087);"></div><div class="pname">Electric Dryer</div><div class="pprice">$749</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f5f5f5,#003087);"></div><div class="pname">French Door Refrigerator</div><div class="pprice">$1,599</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003087,#f5f5f5);"></div><div class="pname">Quiet Dishwasher</div><div class="pprice">$549</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #191919; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #191919;
border: 1px solid #191919; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #191919; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'maple-web', sans-serif; color:#555555; }
*{box-sizing:border-box;}
.nav{position:absolute; top:0; left:0; width:960px; height:72px; background:#ffffff; border-bottom:1px solid #dedede; display:flex; align-items:center; justify-content:space-between; padding:0 32px;}
.logo{font-family:'sculpin',sans-serif; font-size:22px; font-weight:700; color:#121212;}
.navlinks{display:flex; gap:24px; font-family:'Bricolage Grotesque',sans-serif; font-size:14px; font-weight:500; letter-spacing:0.3px; color:#121212;}
.navlinks span:nth-child(1){color:#191919; border-bottom:2px solid #191919; padding-bottom:4px;}
.cart{width:40px; height:40px; border-radius:9999px; background:#f5f5f5; display:flex; align-items:center; justify-content:center; font-size:14px;}
.hero{position:absolute; top:72px; left:0; width:960px; height:300px; background:#121212; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
.headline{font-family:'sculpin',sans-serif; font-size:44px; font-weight:700; line-height:1.1; margin-bottom:14px;}
.sub{font-family:'maple-web',sans-serif; font-size:16px; color:#dedede; margin-bottom:22px; width:500px;}
.btn{display:inline-block; background:#ffffff; color:#121212; font-family:'Bricolage Grotesque',sans-serif; font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; padding:16px 32px; border-radius:8px;}
.sec{position:absolute; top:372px; left:0; width:960px; height:268px; padding:28px 32px;}
.secTitle{font-family:'Bricolage Grotesque',sans-serif; font-size:20px; font-weight:600; color:#121212; margin-bottom:16px;}
.grid{display:flex; gap:16px;}
.card{width:216px; background:#f5f5f5; border-radius:12px; overflow:hidden; position:relative;}
.cardImg{width:100%; height:110px; background:linear-gradient(135deg,#555,#191919);}
.cardBody{padding:12px;}
.cardTitle{font-family:'Bricolage Grotesque',sans-serif; font-size:16px; font-weight:600; color:#121212;}
.cardMeta{font-family:'Bricolage Grotesque',sans-serif; font-size:11px; color:#777; margin-top:4px;}
.cardPrice{font-family:'Bricolage Grotesque',sans-serif; font-size:18px; font-weight:700; margin-top:6px; color:#121212;}
.badge{position:absolute; top:8px; left:8px; background:#191919; color:#fff; font-family:'Bricolage Grotesque',sans-serif; font-size:10px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; padding:4px 8px; border-radius:4px;}
.playerbadge{display:inline-block; background:#f5f5f5; border:1px solid #dedede; border-radius:9999px; padding:2px 10px; font-size:11px; color:#555; margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Keymaster Games</div>
<div class="navlinks"><span>New Releases</span><span>Board Games</span><span>Card Games</span><span>About</span></div>
<div class="cart">💼</div>
</div>
<div class="hero">
<div class="headline">Games Worth<br>Gathering Around</div>
<div class="sub">Independently published tabletop games, illustrated and built for the table, not the screen.</div>
<div class="btn">Shop Games</div>
</div>
<div class="sec">
<div class="secTitle">New Releases</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="cardImg"></div><div class="cardBody"><div class="cardTitle">Fort</div><div class="cardMeta">2-6 Players · 30 min</div><div class="cardPrice">$35</div></div></div>
<div class="card"><div class="cardImg" style="background:linear-gradient(135deg,#777,#333)"></div><div class="cardBody"><div class="cardTitle">Point Salad</div><div class="cardMeta">2-6 Players · 15 min</div><div class="cardPrice">$18</div></div></div>
<div class="card"><div class="cardImg" style="background:linear-gradient(135deg,#444,#111)"></div><div class="cardBody"><div class="cardTitle">Space Station Phoenix</div><div class="cardMeta">1-4 Players · 40 min</div><div class="cardPrice">$39</div></div></div>
<div class="card"><div class="cardImg" style="background:linear-gradient(135deg,#666,#222)"></div><div class="cardBody"><div class="cardTitle">Junk Art</div><div class="cardMeta">2-8 Players · 20 min</div><div class="cardPrice">$29</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #1b1b1b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #1b1b1b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #1b1b1b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #616161; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #d74039; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #fafafa; color: #1b1b1b;
border: 1px solid #d74039; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #1b1b1b;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #616161; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #d74039; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#fafafa; color:#1b1b1b; font-family:'Soehne', Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing:border-box; }
.wrap{ position:relative; width:960px; height:640px; }
.nav{ height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#ffffff; border-bottom:1px solid #ebebeb; }
.logo{ font-size:18px; font-weight:700; letter-spacing:-0.5px; }
.navlinks{ display:flex; gap:24px; }
.navlinks span{ font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:#4a4a4a; }
.navlinks span.active{ color:#d74039; }
.cta{ font-size:11px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:#ffffff; background:#d74039; padding:10px 18px; border-radius:8px; }
.hero{ height:262px; display:flex; padding:30px 34px; gap:26px; }
.hero-text{ width:400px; display:flex; flex-direction:column; justify-content:center; }
.kicker{ font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:#d74039; margin-bottom:12px; }
.h1{ font-size:36px; font-weight:700; line-height:1.1; letter-spacing:-1px; margin-bottom:12px; }
.sub{ font-size:14px; line-height:1.55; color:#4a4a4a; max-width:340px; margin-bottom:18px; }
.btn{ font-size:13px; font-weight:700; letter-spacing:0.02em; color:#ffffff; background:#d74039; padding:13px 24px; border-radius:8px; width:fit-content; }
.hero-visual{ flex:1; position:relative; background:#ebebeb; border-radius:8px 8px 0 0; overflow:hidden; }
.g-back{ position:absolute; left:170px; top:16px; width:110px; height:100px; border-radius:14px 14px 8px 8px; background:linear-gradient(160deg,#2b2b2b,#1b1b1b); }
.g-seat{ position:absolute; left:150px; top:112px; width:150px; height:26px; border-radius:8px; background:#2b2b2b; }
.g-leg{ position:absolute; left:222px; top:134px; width:8px; height:46px; background:#d74039; }
.g-stripe{ position:absolute; left:170px; top:16px; width:110px; height:8px; background:#8a223b; }
.badge-abs{ position:absolute; right:24px; top:20px; background:#e22d00; color:#fff; font-size:10px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; padding:5px 12px; border-radius:999px; }
.section-title{ padding:16px 34px 8px; font-size:15px; font-weight:700; }
.grid{ display:flex; gap:16px; padding:0 34px; }
.card{ width:200px; background:#ffffff; border:1px solid #ebebeb; border-radius:8px; padding:12px; }
.card-img{ width:100%; height:76px; border-radius:8px 8px 4px 4px; margin-bottom:8px; }
.card-title{ font-size:12px; font-weight:700; margin-bottom:2px; }
.card-note{ font-size:10px; color:#8a8a8a; margin-bottom:8px; }
.row{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-size:12px; font-weight:700; }
.tag{ font-size:9px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:#fff; background:#d74039; padding:3px 8px; border-radius:8px; }
.footer{ position:absolute; bottom:0; left:0; width:960px; height:52px; background:#1b1b1b; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.footer span{ font-size:10px; letter-spacing:0.05em; color:#c9c9c9; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Herman Miller Gaming</div>
<div class="navlinks">
<span class="active">Gaming Seating</span>
<span>Desks</span>
<span>Accessories</span>
<span>Esports Program</span>
</div>
<div class="cta">Build Yours</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="kicker">Precision, Not Neon</div>
<div class="h1">Built for hours, not for lighting effects.</div>
<div class="sub">No RGB, no gradients, no cyberpunk. Automotive-grade crimson on an engineered frame that holds up through a full season.</div>
<div class="btn">Configure X-Eight</div>
</div>
<div class="hero-visual">
<div class="badge-abs">New</div>
<div class="g-back"></div>
<div class="g-stripe"></div>
<div class="g-seat"></div>
<div class="g-leg"></div>
</div>
</div>
<div class="section-title">The Lineup</div>
<div class="grid">
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#1b1b1b,#d74039);"></div>
<div class="card-title">X-Eight Pro</div>
<div class="card-note">Steel frame · 4D arms</div>
<div class="row"><span class="price">$895</span><span class="tag">New</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#8a223b,#1b1b1b);"></div>
<div class="card-title">X-Eight Lite</div>
<div class="card-note">Mesh back · Fixed arms</div>
<div class="row"><span class="price">$595</span><span class="tag" style="background:#e22d00;">Sale</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#ebebeb,#1b1b1b);"></div>
<div class="card-title">Command Desk</div>
<div class="card-note">Electric height adj</div>
<div class="row"><span class="price">$1,095</span><span class="tag" style="background:#4a4a4a;">Configure</span></div>
</div>
</div>
<div class="footer">
<span>© Herman Miller Gaming</span>
<span>Esports Fleet Program · Warranty</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #0a413b; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #ffffff; color: #0a413b;
border: 1px solid #0a413b; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #c8e302; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif; background:#ffffff; color:#2d2d2d; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#121212;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#2d2d2d;}
.navlinks span:first-child{color:#0a413b;font-weight:600;}
.hero{height:230px;background:#0a413b;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 40px;text-align:center;}
.hero h1{font-size:34px;font-weight:700;color:#fff;margin:0 0 10px;}
.hero p{font-size:14px;color:#fff;opacity:0.85;margin:0 0 18px;}
.searchpill{width:340px;height:48px;border-radius:9999px;background:#fff;font-size:13px;color:#6b6b6b;display:flex;align-items:center;padding:0 20px;}
.sec{padding:20px 32px 0;}
.cats{display:flex;gap:10px;margin-bottom:16px;}
.catpill{background:#f5f5f5;color:#2d2d2d;font-size:13px;font-weight:500;padding:8px 16px;border-radius:9999px;}
.catpill.active{background:#0a413b;color:#fff;}
.secTitle{font-size:18px;font-weight:600;color:#121212;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border-radius:12px;padding:16px;}
.thumb{height:80px;background:#f5f5f5;border-radius:8px;margin-bottom:10px;position:relative;overflow:hidden;}
.bottle{position:absolute;left:80px;top:8px;width:30px;height:64px;border-radius:6px;}
.badge{position:absolute;top:6px;left:6px;font-size:10px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:2px 8px;border-radius:4px;background:#c8e302;color:#121212;}
.ctitle{font-size:15px;font-weight:600;color:#121212;}
.cprice{font-size:16px;font-weight:600;color:#121212;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#0a413b;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#fff;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Welly</div>
<div class="navlinks"><span>Shop</span><span>Learn</span><span>About</span><span>Help</span></div>
</div>
<div class="hero">
<h1>Get Better Faster</h1>
<p>Modern first aid and wellness essentials, designed to actually want on your shelf.</p>
<div class="searchpill">Search first aid, pain relief, cold & flu...</div>
</div>
<div class="sec">
<div class="cats"><div class="catpill active">All</div><div class="catpill">First Aid</div><div class="catpill">Pain Relief</div><div class="catpill">Cold & Flu</div></div>
<div class="secTitle">Bestsellers</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">New</div><div class="bottle" style="background:linear-gradient(160deg,#009a87,#0a413b)"></div></div><div class="ctitle">Bravery Bandages</div><div class="cprice">$9.99</div></div>
<div class="card"><div class="thumb"><div class="bottle" style="background:linear-gradient(160deg,#3effe9,#009a87)"></div></div><div class="ctitle">First Aid Kit</div><div class="cprice">$34.99</div></div>
<div class="card"><div class="thumb"><div class="bottle" style="background:linear-gradient(160deg,#c8e302,#0a413b)"></div></div><div class="ctitle">Traveler First Aid Kit</div><div class="cprice">$24.99</div></div>
</div>
</div>
<div class="footer"><span>© Modern Wellness Essentials</span><span>Shipping & Returns</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff0033; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff0033; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e0002e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff0033; color: #000000;
border: 1px solid #e0002e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff0033; color: #f5f5f5;
border: 1px solid #fd2752; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fa0032; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:100%; }
/* left promo panel */
.promo { width:420px; background:linear-gradient(160deg,#ff0033,#cc0029); position:relative; padding:40px 36px; color:#ffffff; overflow:hidden; }
.promo::before { content:''; position:absolute; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,0.08); top:-100px; right:-90px; }
.promo::after { content:''; position:absolute; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,0.06); bottom:-70px; left:-60px; }
.brand-badge { position:relative; display:inline-flex; align-items:center; gap:8px; background:#ffffff; color:#ff0033; border-radius:999px; padding:6px 16px; font-weight:700; font-size:15px; }
.promo h1 { position:relative; font-size:32px; font-weight:700; line-height:1.38; margin:28px 0 12px; max-width:320px; }
.promo p { position:relative; font-size:14px; line-height:1.6; color:rgba(255,255,255,0.9); max-width:300px; margin:0 0 24px; }
.coin-row { position:relative; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.14); border-radius:16px; padding:14px 18px; max-width:300px; }
.coin { width:34px; height:34px; border-radius:50%; background:#ffb200; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:#ffffff; }
.coin-row .txt { font-size:13px; font-weight:700; line-height:1.4; }
.coin-row .txt span { display:block; font-weight:400; font-size:11px; opacity:0.85; }
.promo .dl { position:relative; margin-top:auto; display:flex; gap:10px; }
.dl-btn { background:#ffffff; color:#ff0033; border-radius:24px; padding:10px 20px; font-size:13px; font-weight:700; }
/* right app screen */
.screen { flex:1; padding:28px 32px; display:flex; flex-direction:column; gap:16px; background:#f5f5f5; }
.topbar { display:flex; align-items:center; justify-content:space-between; }
.topbar .greet { font-size:13px; color:#767676; }
.topbar .greet b { color:#222222; font-weight:700; }
.bell { width:34px; height:34px; border-radius:50%; background:#ffffff; box-shadow:0 1px 4px rgba(0,0,0,0.08); }
.balance-card { background:linear-gradient(135deg,#ff0033,#e0002e); border-radius:16px; padding:20px 22px; color:#ffffff; box-shadow:0 2px 8px rgba(255,0,51,0.2); display:flex; flex-direction:column; gap:6px; }
.balance-card .lbl { font-size:13px; opacity:0.85; }
.balance-card .amt { font-size:28px; font-weight:700; }
.balance-actions { display:flex; gap:10px; margin-top:8px; }
.bact { flex:1; background:rgba(255,255,255,0.18); border-radius:12px; text-align:center; padding:8px 0; font-size:13px; font-weight:700; }
.shortcuts { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.sc { background:#ffffff; border-radius:12px; padding:14px 8px; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,0.08); }
.sc .ic { width:32px; height:32px; border-radius:8px; background:#ffebef; margin:0 auto 8px; }
.sc span { font-size:11px; color:#555555; font-weight:700; }
.promo-card { background:#ffebef; border-radius:16px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; }
.promo-card .t1 { font-size:12px; font-weight:700; color:#ff0033; text-transform:uppercase; letter-spacing:0.05em; }
.promo-card .t2 { font-size:14px; font-weight:700; color:#222222; margin-top:4px; }
.promo-card .badge-gold { background:#ffb200; color:#ffffff; border-radius:10px; padding:4px 10px; font-size:12px; font-weight:700; white-space:nowrap; }
.txlist { background:#ffffff; border-radius:12px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,0.08); }
.txrow { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #eeeeee; }
.txrow:last-child { border-bottom:none; }
.txleft { display:flex; align-items:center; gap:10px; }
.txicon { width:34px; height:34px; border-radius:50%; background:#f5f5f5; }
.txname { font-size:13px; font-weight:700; color:#222222; }
.txdate { font-size:11px; color:#767676; }
.txamt { font-size:13px; font-weight:700; color:#222222; }
</style></head>
<body>
<div class="wrap">
<section class="promo">
<div class="brand-badge">PayPay</div>
<h1>Pay anywhere with one red tap</h1>
<p>Scan, send, and charge — the wallet that turns every payment into a reward moment.</p>
<div class="coin-row">
<div class="coin">P</div>
<div class="txt">+100 points earned<span>on your last payment</span></div>
</div>
<div class="dl">
<div class="dl-btn">Get the app</div>
</div>
</section>
<section class="screen">
<div class="topbar">
<div class="greet">Good afternoon, <b>Alex</b></div>
<div class="bell"></div>
</div>
<div class="balance-card">
<span class="lbl">PayPay Balance</span>
<span class="amt">¥12,400</span>
<div class="balance-actions">
<div class="bact">Charge</div>
<div class="bact">Send</div>
</div>
</div>
<div class="shortcuts">
<div class="sc"><div class="ic"></div><span>Scan</span></div>
<div class="sc"><div class="ic"></div><span>Send</span></div>
<div class="sc"><div class="ic"></div><span>Points</span></div>
<div class="sc"><div class="ic"></div><span>Cards</span></div>
</div>
<div class="promo-card">
<div>
<div class="t1">Limited offer</div>
<div class="t2">Get 100 points on your next tap</div>
</div>
<span class="badge-gold">+100P</span>
</div>
<div class="txlist">
<div class="txrow">
<div class="txleft"><div class="txicon"></div><div><div class="txname">Green Leaf Cafe</div><div class="txdate">Today · 12:41</div></div></div>
<div class="txamt">-¥620</div>
</div>
<div class="txrow">
<div class="txleft"><div class="txicon"></div><div><div class="txname">Charge from bank</div><div class="txdate">Yesterday · 09:02</div></div></div>
<div class="txamt">+¥5,000</div>
</div>
</div>
</section>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #368fff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #368fff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a85e8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #368fff; color: #000000;
border: 1px solid #1a85e8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #368fff; color: #f5f5f5;
border: 1px solid #559ffd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #328dfb; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1b1d1f; box-sizing:border-box;
font-family:-apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:17px; font-weight:700; }
.tabs { display:flex; gap:22px; font-size:13px; color:#7e848a; }
.tabs span.on { color:#368fff; font-weight:600; }
.hero { text-align:center; padding:8px 32px 20px; }
h1 { font-size:26px; font-weight:700; margin:0 0 16px; line-height:1.3; }
.cta { display:inline-block; background:#368fff; color:#ffffff; border-radius:36px; padding:0 26px;
height:52px; line-height:52px; font-size:16px; font-weight:700; }
.body { display:flex; gap:20px; padding:6px 32px 24px; }
.col { flex:1; display:flex; flex-direction:column; gap:12px; }
.daycard { background:#ffffff; border:1px solid #e8eaec; border-radius:20px; padding:14px; display:flex; gap:12px; }
.daycard .thumb { width:64px; height:64px; border-radius:14px; background:linear-gradient(135deg,#dfeaff,#368fff); flex-shrink:0; }
.daycard .t { font-size:15px; font-weight:600; margin-bottom:2px; }
.daycard .m { font-size:12px; color:#7e848a; }
.chip { display:inline-block; background:#f5f6f7; color:#3a3e41; border-radius:999px; padding:5px 12px; font-size:11px; margin-top:6px; }
.tip { background:#f1f7ff; border-radius:20px; padding:18px; font-size:14px; color:#3a3e41; line-height:1.5; }
.tip .h { font-size:15px; font-weight:700; margin-bottom:6px; color:#1b1d1f; }
.map { flex:1; border-radius:20px; background:linear-gradient(160deg,#eef4ff,#dce9ff); position:relative; overflow:hidden; min-height:170px; }
.pin { position:absolute; width:14px; height:14px; border-radius:50%; background:#368fff; border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,0.2); }
</style></head>
<body>
<nav>
<span class="brand">Triple</span>
<div class="tabs"><span class="on">Itinerary</span><span>Guide</span><span>Bookings</span><span>My Trips</span></div>
</nav>
<section class="hero">
<h1>The travel app that knows you — plan a trip that feels like you</h1>
<span class="cta">View itinerary</span>
</section>
<div class="body">
<div class="col">
<div class="daycard"><div class="thumb"></div><div><div class="t">Coastal viewpoint</div><div class="m">9:00 · 15 min walk from hotel</div><span class="chip">Sightseeing</span></div></div>
<div class="daycard"><div class="thumb"></div><div><div class="t">Local noodle house</div><div class="m">12:30 · Recommended by locals</div><span class="chip">Food</span></div></div>
<div class="daycard"><div class="thumb"></div><div><div class="t">Rooftop cafe</div><div class="m">15:00 · Great sunset spot</div><span class="chip">Cafe</span></div></div>
</div>
<div class="col">
<div class="map">
<div class="pin" style="left:40px;top:30px"></div>
<div class="pin" style="left:110px;top:80px"></div>
<div class="pin" style="left:70px;top:130px"></div>
</div>
<div class="tip">
<div class="h">The more friends join, the richer the trip</div>
Invite friends to co-edit this itinerary — everyone can add a place they want to visit.
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f8fa; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f7f8fa; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fefefe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F7F8FA; color:#0D0E10; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px; display:flex; align-items:center; }
.hero { position:relative; z-index:2; width:460px; padding:0 56px; display:flex; flex-direction:column; gap:16px; }
.grad { background:linear-gradient(135deg,#00C4CC,#7D2AE8); -webkit-background-clip:text; background-clip:text; color:transparent; }
.word { font-size:46px; font-weight:800; letter-spacing:-1pt; line-height:1.05; margin:0; }
.tag { font-size:16px; color:#6F7178; line-height:1.5; max-width:340px; margin:0; }
.search { margin-top:6px; height:46px; border-radius:14px; background:#FFFFFF; border:1pt solid #E6E8EC;
display:flex; align-items:center; padding:0 16px; gap:10px; max-width:340px; }
.search i { width:14px; height:14px; border:2pt solid #6F7178; border-radius:50%; }
.search span { font-size:14px; color:#6F7178; }
.row { display:flex; gap:12px; align-items:center; }
.cta { background:linear-gradient(135deg,#00C4CC,#7D2AE8); color:#FFFFFF; border-radius:999px; padding:13px 26px; font-weight:700; font-size:15px; }
.cta2 { background:transparent; color:#0D0E10; border:1.5pt solid #E6E8EC; border-radius:999px; padding:12px 22px; font-weight:600; font-size:14px; }
.tiles { display:flex; gap:12px; margin-top:8px; }
.tile { display:flex; flex-direction:column; align-items:center; gap:6px; }
.tile i { width:44px; height:44px; border-radius:16px; }
.tile span { font-size:10px; font-weight:600; color:#6F7178; }
.t1 { background:linear-gradient(135deg,#00C4CC,#3B5CFF); }
.t2 { background:linear-gradient(135deg,#7D2AE8,#C13AE0); }
.t3 { background:linear-gradient(135deg,#FF7A59,#FFC24B); }
.t4 { background:linear-gradient(135deg,#1FC77C,#00C4CC); }
.phonewrap { position:relative; z-index:2; width:500px; height:640px; display:flex; align-items:center; justify-content:center; }
.phone { position:relative; width:296px; height:604px; background:#FFFFFF; border:1pt solid #E6E8EC; border-radius:46px;
box-shadow:0 30px 80px rgba(13,14,16,0.14); padding:0 16px; overflow:hidden; }
.notch { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:120px; height:22px; background:#0D0E10; border-radius:12px; z-index:6; }
.pgreet { display:flex; justify-content:space-between; align-items:center; padding:36px 2px 12px; }
.pgreet b { font-size:20px; font-weight:800; letter-spacing:-0.3pt; }
.pavatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#00C4CC,#7D2AE8); }
.psearch { height:42px; border-radius:13px; background:#F7F8FA; display:flex; align-items:center; padding:0 14px; gap:8px; margin-bottom:14px; }
.psearch i { width:12px; height:12px; border:2pt solid #6F7178; border-radius:50%; }
.psearch span { font-size:12px; color:#6F7178; }
.ptiles { display:flex; gap:10px; margin-bottom:16px; }
.ptile { display:flex; flex-direction:column; align-items:center; gap:5px; }
.ptile i { width:40px; height:40px; border-radius:14px; }
.ptile span { font-size:9px; color:#6F7178; font-weight:600; }
.psechead { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.psechead b { font-size:14px; font-weight:700; }
.psechead span { font-size:11px; color:#00C4CC; font-weight:600; }
.pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.pgrid div { position:relative; aspect-ratio:3/4; border-radius:11px; }
.g1 { background:linear-gradient(160deg,#00C4CC,#3B5CFF); }
.g2 { background:linear-gradient(160deg,#7D2AE8,#C13AE0); }
.g3 { background:linear-gradient(160deg,#FF7A59,#FFC24B); }
.pro { position:absolute; top:5px; right:5px; background:#FFC24B; color:#1A1205; font-size:7px; font-weight:800; padding:2px 5px; border-radius:5px; }
.ptabbar { position:absolute; left:0; right:0; bottom:0; height:66px; background:rgba(255,255,255,0.96); border-top:0.5pt solid #E6E8EC;
display:flex; align-items:center; justify-content:space-around; }
.tdot { width:18px; height:18px; border-radius:6px; background:#A4A6AD; }
.tdot.on { background:#0D0E10; }
.fab { width:44px; height:44px; border-radius:16px; background:linear-gradient(135deg,#00C4CC,#7D2AE8);
box-shadow:0 6px 16px rgba(125,42,232,0.4); margin-top:-20px; display:flex; align-items:center; justify-content:center; }
.fab i { width:14px; height:2pt; background:#fff; position:relative; }
.fab i::after { content:''; position:absolute; width:2pt; height:14px; background:#fff; left:6px; top:-6px; }
</style></head>
<body>
<div class="stage">
<div class="hero">
<div style="font-size:12px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:#7D2AE8;margin-bottom:2px;">Canva (iOS)</div>
<h1 class="word">Anyone can <span class="grad">design</span>.</h1>
<p class="tag">A rounded, gradient-forward canvas — templates, drag-and-drop elements, and a create button lifted right into the tab bar.</p>
<div class="search"><i></i><span>Search templates, photos…</span></div>
<div class="row">
<div class="cta">Create a design</div>
<div class="cta2">Browse templates</div>
</div>
<div class="tiles">
<div class="tile"><i class="t1"></i><span>Post</span></div>
<div class="tile"><i class="t2"></i><span>Deck</span></div>
<div class="tile"><i class="t3"></i><span>Doc</span></div>
<div class="tile"><i class="t4"></i><span>Video</span></div>
</div>
</div>
<div class="phonewrap">
<div class="phone">
<div class="notch"></div>
<div class="pgreet"><b>Hi, Mel</b><span class="pavatar"></span></div>
<div class="psearch"><i></i><span>Search templates, photos…</span></div>
<div class="ptiles">
<div class="ptile"><i class="t1"></i><span>Post</span></div>
<div class="ptile"><i class="t2"></i><span>Deck</span></div>
<div class="ptile"><i class="t3"></i><span>Doc</span></div>
<div class="ptile"><i class="t4"></i><span>Video</span></div>
</div>
<div class="psechead"><b>Recommended</b><span>See all</span></div>
<div class="pgrid">
<div class="g1"><span class="pro">PRO</span></div>
<div class="g2"></div>
<div class="g3"><span class="pro">PRO</span></div>
</div>
<div class="ptabbar">
<span class="tdot"></span><span class="tdot on"></span>
<span class="fab"><i></i></span>
<span class="tdot"></span><span class="tdot"></span>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ee5457; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ee5457; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ce4234; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ee5457; color: #000000;
border: 1px solid #ce4234; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ee5457; color: #f5f5f5;
border: 1px solid #ef6e70; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e95151; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#262626; box-sizing:border-box;
font-family:-apple-system, "Segoe UI", Roboto, Helvetica, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"Iosevka", "SFMono-Regular", Consolas, monospace; }
nav { height:56px; display:flex; align-items:center; gap:24px; padding:0 32px; border-bottom:1px solid #eaeaea; }
.brand { font-size:16px; font-weight:700; color:#262626; margin:0; }
.navlinks { display:flex; gap:20px; }
.navlinks span { font-size:14px; color:#262626; }
.register { margin-left:auto; background:#2e4692; color:#ffffff; border-radius:8px; padding:10px 18px;
font-size:14px; font-weight:700; }
.layout { display:flex; gap:16px; padding:18px 32px 0; }
.promo { width:270px; display:flex; flex-direction:column; gap:14px; }
.promo-card { background:#272727; color:#ffffff; border-radius:16px; padding:18px 20px; }
.promo-card .k { font-size:12px; color:#9d9d9d; margin-bottom:6px; }
.promo-card .t { font-size:16px; font-weight:700; line-height:1.3; }
.buy-pill { display:inline-flex; align-items:center; justify-content:center; background:#ffffff; color:#2e4592;
border:1px solid #d5dbee; border-radius:22px; height:32px; padding:0 14px; font-size:13px; margin-top:12px; }
.market { flex:1; background:#f2f4fb; border:1px solid #d5dbee; border-radius:12px; padding:16px 18px; }
.market-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.market-head .pair { font-size:15px; font-weight:700; color:#253158; }
.market-head .price { font-size:20px; font-weight:700; color:#49a870; }
.row-head { display:flex; font-size:11px; color:#4a4a4a; padding:6px 0; border-bottom:1px solid #d5dbee; }
.row-head span, .row span { flex:1; text-align:right; }
.row-head span:first-child, .row span:first-child { text-align:left; }
.row { display:flex; padding:6px 0; font-size:13px; font-weight:700; border-bottom:1px solid #e6eaf5; }
.up { color:#49a870; }
.down { color:#ec5b5c; }
.badge { display:inline-block; border-radius:8px; padding:2px 8px; font-size:11px; color:#ffffff; }
.badge.up { background:#49a870; }
.badge.down { background:#ec5b5c; }
.stats { display:flex; gap:16px; padding:16px 32px 24px; }
.stat { flex:1; background:#f2f4fb; border-radius:12px; padding:16px 0; text-align:center; }
.stat .n { font-size:20px; font-weight:700; color:#253158; }
.stat .l { font-size:12px; color:#4d4d4d; margin-top:4px; }
</style></head>
<body>
<nav>
<p class="brand">MaiCoin / MAX</p>
<div class="navlinks"><span>Markets</span><span>Trade</span><span>Earn</span><span>NFT</span></div>
<div class="register">Sign Up</div>
</nav>
<div class="layout">
<div class="promo">
<div class="promo-card"><div class="k">EARN</div><div class="t">On-chain staking, hands-off returns</div><div class="buy-pill">Learn more</div></div>
<div class="promo-card"><div class="k">AUTOMATE</div><div class="t">24-hour trading bot, set your strategy once</div></div>
</div>
<div class="market">
<div class="market-head"><span class="pair">BTC / TWD</span><span class="price mono">2,158,300</span></div>
<div class="row-head"><span>Price</span><span>Amount</span><span>Change</span></div>
<div class="row"><span class="up mono">2,158,300</span><span class="mono">0.842</span><span><span class="badge up">+1.24%</span></span></div>
<div class="row"><span class="up mono">2,157,900</span><span class="mono">0.310</span><span><span class="badge up">+1.21%</span></span></div>
<div class="row"><span class="down mono">2,156,100</span><span class="mono">1.205</span><span><span class="badge down">-0.18%</span></span></div>
<div class="row"><span class="up mono">2,159,400</span><span class="mono">0.560</span><span><span class="badge up">+1.30%</span></span></div>
<div class="row" style="border-bottom:none"><span class="down mono">2,155,700</span><span class="mono">0.923</span><span><span class="badge down">-0.24%</span></span></div>
</div>
</div>
<div class="stats">
<div class="stat"><div class="n mono">$4.2B</div><div class="l">24h Volume</div></div>
<div class="stat"><div class="n mono">2.1M</div><div class="l">Verified Users</div></div>
<div class="stat"><div class="n mono">120+</div><div class="l">Trading Pairs</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 800; line-height: 1.25; letter-spacing: 0.4px; background: #118811; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 800; line-height: 1.25; letter-spacing: 0.4px; background: #ffffff; color: #118811;
border: 1px solid #118811; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 800; line-height: 1.2; letter-spacing: 0.6px; background: #118811; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Muli','Mulish',sans-serif; background:#fff; color:#333333; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:2px solid #121212;}
.logo{font-size:22px;font-weight:800;color:#118811;letter-spacing:-0.5px;}
.navlinks{display:flex;gap:18px;font-size:13px;font-weight:700;color:#121212;}
.navlinks span:nth-child(4){color:#e32402;}
.hero{height:210px;display:flex;background:#121212;position:relative;overflow:hidden;}
.heroLeft{width:56%;padding:26px 34px;display:flex;flex-direction:column;justify-content:center;}
.kicker{display:inline-block;background:#ffbd00;color:#121212;font-size:11px;font-weight:800;letter-spacing:0.6px;text-transform:uppercase;padding:4px 10px;border-radius:3px;width:fit-content;margin-bottom:12px;}
.h1{font-size:28px;font-weight:800;color:#fff;line-height:1.15;margin:0 0 10px;}
.h1 span{color:#118811;}
.sub{font-size:13px;color:#cccccc;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#118811;color:#fff;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:0.4px;padding:11px 22px;border-radius:4px;width:fit-content;}
.heroRight{width:44%;position:relative;background:radial-gradient(circle at 60% 50%,#1c4d1c,#121212 70%);}
.box{position:absolute;width:80px;height:100px;border-radius:4px;}
.b1{background:linear-gradient(135deg,#e32402,#118811);top:36px;left:40px;}
.b2{background:linear-gradient(135deg,#ffbd00,#118811);top:60px;left:140px;}
.b3{background:linear-gradient(135deg,#118811,#e32402);top:20px;left:230px;}
.sec{padding:16px 30px 0;}
.secTitle{font-size:17px;font-weight:800;color:#121212;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;border:1px solid #dedede;border-radius:6px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:9px;font-weight:800;letter-spacing:0.4px;text-transform:uppercase;color:#fff;padding:3px 7px;border-radius:3px;}
.thumb{height:110px;border-radius:4px;margin-bottom:8px;}
.ptitle{font-size:13px;font-weight:700;color:#121212;line-height:1.3;height:34px;overflow:hidden;}
.pprice{font-size:15px;font-weight:800;color:#118811;margin-top:4px;}
.pprice.sale{color:#e32402;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Plastic Empire</div>
<div class="navlinks"><span>Action Figures</span><span>Comics</span><span>Trading Cards</span><span>Clearance</span></div>
</div>
<div class="hero">
<div class="heroLeft">
<div class="kicker">New Drop</div>
<div class="h1">Every box is a <span>headline.</span></div>
<div class="sub">Exclusives, pre-orders and clearance — the whole shelf, always in stock somewhere.</div>
<div class="cta">Shop Exclusives</div>
</div>
<div class="heroRight"><div class="box b1"></div><div class="box b2"></div><div class="box b3"></div></div>
</div>
<div class="sec">
<div class="secTitle">Featured Drops</div>
<div class="grid">
<div class="card"><div class="badge" style="background:#e32402;">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#118811,#dedede);"></div><div class="ptitle">Vinyl Figure Set — Wave 3</div><div class="pprice sale">$14.99</div></div>
<div class="card"><div class="badge" style="background:#ffbd00;color:#121212;">Pre-Order</div><div class="thumb" style="background:linear-gradient(135deg,#e32402,#dedede);"></div><div class="ptitle">Con-Exclusive Chase Variant</div><div class="pprice">$39.99</div></div>
<div class="card"><div class="badge" style="background:#118811;">New</div><div class="thumb" style="background:linear-gradient(135deg,#ffbd00,#dedede);"></div><div class="ptitle">Trading Card Booster Box</div><div class="pprice">$89.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#121212,#dedede);"></div><div class="ptitle">Graphic Novel Omnibus</div><div class="pprice">$24.99</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #353535;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #353535;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.36; margin: 0; color: #353535; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #797979; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.43; background: #63af1a; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.43; background: #ffffff; color: #353535;
border: 1px solid #63af1a; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #353535;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #797979; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.2px; background: #f3f3f3; color: #5e5e5e;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f3f3f3; font-family:'Arial',Helvetica,sans-serif; color:#5e5e5e; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dbdbdb;background:#fff;}
.logo{font-family:'Garamond','Georgia',serif;font-size:21px;font-weight:700;color:#353535;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;color:#353535;font-family:'Myriad Pro','Arial',sans-serif;}
.navcta{background:#63af1a;color:#fff;font-size:12px;font-weight:600;padding:9px 18px;border-radius:2px;}
.hero{height:230px;display:flex;align-items:center;padding:0 36px;background:#fff;}
.herotext{width:400px;}
.kicker{font-style:italic;font-family:'GaramondPremierProItalic','Garamond',Georgia,serif;font-size:16px;color:#217dbd;margin-bottom:10px;}
.headline{font-family:'Garamond','Georgia',serif;font-size:30px;font-weight:700;color:#353535;margin-bottom:12px;line-height:1.2;}
.sub{font-size:13px;color:#5e5e5e;margin-bottom:16px;max-width:320px;}
.btn{display:inline-block;background:#63af1a;color:#fff;font-size:13px;font-weight:600;padding:11px 22px;border-radius:2px;}
.stamp{width:130px;height:160px;margin-left:70px;background:#fff;border:3px dotted #b0eb77;border-radius:2px;position:relative;}
.stampimg{position:absolute;inset:14px;background:linear-gradient(135deg,#b0eb77,#528f02);}
.sec{padding:16px 36px 0;}
.facetrow{display:flex;gap:8px;margin-bottom:14px;}
.chip{background:#fff;border:1px solid #cacaca;border-radius:2px;padding:5px 12px;font-size:11px;color:#5e5e5e;font-family:'Myriad Pro','Arial',sans-serif;}
.chip.active{background:#63af1a;border-color:#63af1a;color:#fff;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border:1px solid #dbdbdb;border-radius:2px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#d71921;color:#fff;font-size:9px;font-weight:700;padding:2px 7px;border-radius:2px;}
.thumb{height:76px;border-radius:2px;margin-bottom:8px;}
.pname{font-family:'Myriad Pro','Arial',sans-serif;font-size:12px;font-weight:600;color:#353535;}
.pprice{font-size:12px;color:#217dbd;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Nordfrim</div>
<div class="navlinks"><span>Countries</span><span>Eras</span><span>Topics</span><span>Catalog Search</span></div>
<div class="navcta">Sign In</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Est. Scandinavian Philately</div>
<div class="headline">Every issue, every era, catalogued.</div>
<div class="sub">A working reference tool for collectors who read perforation gauges like prose.</div>
<div class="btn">Search the Catalog</div>
</div>
<div class="stamp"><div class="stampimg"></div></div>
</div>
<div class="sec">
<div class="facetrow"><div class="chip active">All Regions</div><div class="chip">Nordic</div><div class="chip">Pre-1950</div><div class="chip">Mint Condition</div></div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#63af1a,#217dbd)"></div><div class="pname">1932 Airmail Set</div><div class="pprice">450.00 kr</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#217dbd,#63af1a)"></div><div class="pname">Definitive Series, 1947</div><div class="pprice">120.00 kr</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f58d3d,#63af1a)"></div><div class="pname">Commemorative Block</div><div class="pprice">89.00 kr</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #003399; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #f6f6f6; color: #003399;
border: 1px solid #003399; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #454545;
border: 1px solid #c1c1c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f1d600; color: #222222;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f6f6; font-family:'adobe-caslon-pro',Georgia,serif; color:#454545; }
*{box-sizing:border-box;}
.nav{height:64px;background:#003399;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:600;color:#fff;}
.navlinks{display:flex;gap:20px;font-family:'Helvetica Neue',sans-serif;font-size:14px;font-weight:500;color:#fff;letter-spacing:.3px;}
.navlinks span:first-child{color:#fffa90;}
.hero{padding:36px 32px 20px;}
.h1{font-size:36px;font-weight:700;color:#222;margin:0 0 10px;letter-spacing:-.5px;max-width:520px;}
.sub{font-family:'Helvetica Neue',sans-serif;font-size:14px;color:#757575;max-width:400px;margin:0 0 16px;}
.searchbar{width:280px;height:40px;background:#fff;border:1px solid #c5c5c5;border-radius:4px;display:flex;align-items:center;padding:0 14px;font-family:'Helvetica Neue',sans-serif;font-size:14px;color:#757575;}
.grid{display:flex;gap:16px;padding:8px 32px 0;}
.card{width:170px;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.08);padding:14px;position:relative;}
.thumb{height:130px;aspect-ratio:2/3;background:linear-gradient(160deg,#003399,#dad55e);border-radius:2px;margin-bottom:8px;}
.badge{position:absolute;top:20px;left:20px;background:#f1d600;color:#222;font-family:'Helvetica Neue',sans-serif;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:2px;}
.ptitle{font-family:'Helvetica Neue',sans-serif;font-size:16px;font-weight:600;color:#222;}
.pauthor{font-family:'Helvetica Neue',sans-serif;font-size:14px;color:#757575;margin:4px 0;}
.pprice{font-size:16px;font-weight:600;color:#222;}
.footer{position:absolute;bottom:0;left:0;right:0;height:52px;background:#003399;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-family:'Helvetica Neue',sans-serif;font-size:12px;color:#fff;opacity:.9;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mcnally Jackson</div>
<div class="navlinks"><span>Fiction</span><span>New Releases</span><span>Staff Picks</span><span>Events</span></div>
</div>
<div class="hero">
<div class="h1">A staff pick, a stack of paperbacks, and time to read.</div>
<div class="sub">Curated fiction, essays, and staff-favorite finds from the shop floor.</div>
<div class="searchbar">Search titles, authors...</div>
</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb"></div><div class="ptitle">The Quiet Harbor</div><div class="pauthor">Elena Marchetti</div><div class="pprice">$18.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#dad55e,#003399)"></div><div class="ptitle">Field Notes on Rivers</div><div class="pauthor">Corin Ashby</div><div class="pprice">$24.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#454545,#dad55e)"></div><div class="ptitle">Staff Pick: Late Winter</div><div class="pauthor">Naomi Petrov</div><div class="pprice">$16.00</div></div>
</div>
<div class="footer"><span>© McNally Jackson Booksellers</span><span>Events · Gift Cards · Newsletter</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #150f23; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #150f23; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; margin: 0; color: #bdb8c0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.14; letter-spacing: 0.2px; background: #150f23; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.14; letter-spacing: 0.2px; background: #3f3849; color: #ffffff;
border: 1px solid #150f23; border-radius: 12px;
padding: 8px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.5; background: #ffffff; color: #1f1633;
border: 1px solid #181127; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bdb8c0; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; background: #c2ef4e; color: #1f1633;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1f1633; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stars { position:absolute; inset:0; background-image:
radial-gradient(1.5px 1.5px at 20px 30px, rgba(255,255,255,.5), transparent),
radial-gradient(1.5px 1.5px at 120px 80px, rgba(255,255,255,.4), transparent),
radial-gradient(1px 1px at 220px 40px, rgba(255,255,255,.4), transparent),
radial-gradient(1.5px 1.5px at 340px 110px, rgba(255,255,255,.4), transparent),
radial-gradient(1px 1px at 500px 60px, rgba(255,255,255,.4), transparent),
radial-gradient(1.5px 1.5px at 650px 100px, rgba(255,255,255,.4), transparent),
radial-gradient(1px 1px at 800px 50px, rgba(255,255,255,.4), transparent),
radial-gradient(1.5px 1.5px at 900px 90px, rgba(255,255,255,.4), transparent);
pointer-events:none; }
.top { position:relative; }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:700; font-size:15px; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:500; color:rgba(255,255,255,.8); }
.btninv { background:#fff; color:#1f1633; border:none; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:700; }
.hero { position:relative; z-index:2; padding:26px 32px 30px; }
.hero h1 { font-size:52px; font-weight:700; line-height:1.15; margin:0 0 14px; max-width:560px; }
.chip { background:#c2ef4e; color:#1f1633; border-radius:4px; padding:0 12px; }
.hero p { font-size:14px; color:rgba(255,255,255,.8); margin:0 0 16px; max-width:400px; }
.ghostbtn { background:rgba(255,255,255,.18); color:#fff; border:none; border-radius:12px; padding:8px; font-size:13px; font-weight:600;
display:inline-block; padding:9px 18px; }
.blob { position:absolute; border-radius:50% 45% 55% 50%/50% 55% 45% 50%; opacity:.95; z-index:1; }
.blob1 { width:64px; height:64px; background:#fa7faa; right:70px; top:10px; transform:rotate(-8deg); }
.blob2 { width:44px; height:44px; background:#c2ef4e; right:130px; top:90px; border-radius:50%; }
.cards { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 32px 20px; }
.card { background:#150f23; border:1px solid #362d59; border-radius:12px; padding:16px; }
.card h3 { font-size:15px; margin:0 0 6px; }
.card p { font-size:11.5px; color:rgba(255,255,255,.72); margin:0; line-height:1.4; }
.pricing { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:0 32px 20px; }
.ptier { background:#fff; color:#1f1633; border-radius:12px; padding:16px; }
.ptier.featured { background:#150f23; color:#fff; }
.ptier h4 { font-size:13px; margin:0 0 4px; }
.ptier .price { font-size:22px; font-weight:500; margin:0 0 6px; }
footer { position:relative; z-index:2; padding:12px 32px; border-top:1px solid #362d59; display:flex;
justify-content:space-between; font-size:11px; color:rgba(255,255,255,.72); }
</style></head>
<body>
<div class="top">
<div class="stars"></div>
<nav>
<div class="brand">Sentry</div>
<div class="navlinks"><span>Product</span><span>Pricing</span><span>Docs</span></div>
<button class="btninv">Get Started</button>
</nav>
<div class="hero">
<h1>Debugging that<br>doesn't <span class="chip">SUCK</span></h1>
<p>Application monitoring and error tracking for developers who ship fast.</p>
<button class="ghostbtn">Get Demo</button>
</div>
<div class="blob blob1"></div>
<div class="blob blob2"></div>
</div>
<div class="cards">
<div class="card"><h3>Error Monitoring</h3><p>See stack traces the moment something breaks, in context.</p></div>
<div class="card"><h3>Performance</h3><p>Trace slow transactions across your whole stack.</p></div>
<div class="card"><h3>Session Replay</h3><p>Watch exactly what the user saw before the crash.</p></div>
</div>
<div class="pricing">
<div class="ptier"><h4>Developer</h4><div class="price">Free</div></div>
<div class="ptier featured"><h4>Business</h4><div class="price">$80</div></div>
<div class="ptier"><h4>Enterprise</h4><div class="price">Custom</div></div>
</div>
<footer>
<span>© Sentry</span>
<span>Sentry · Docs · Support · Status</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #0193d7; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #1a1a1a; color: #ffffff;
border: 1px solid #0193d7; border-radius: 8px;
padding: 10px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #1a1a1a; color: #ffffff;
border: 1px solid #404040; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.3px; background: #1a1a1a; color: #c8c8c8;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#000; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:#fff; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #2a2a2a;}
.logo{font-size:19px;font-weight:600;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.navlinks span:first-child{color:#0193d7;}
.hero{height:220px;display:flex;align-items:center;padding:0 32px;background:linear-gradient(160deg,#000,#0a1420);}
.heroText{width:52%;}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#0193d7;margin-bottom:8px;}
.heroText h1{font-size:32px;font-weight:600;margin:0 0 12px;letter-spacing:-.5px;line-height:1.25;}
.heroText p{font-size:14px;color:#c8c8c8;max-width:320px;margin:0 0 16px;}
.btn{display:inline-block;background:#0193d7;color:#fff;font-size:14px;font-weight:500;letter-spacing:.5px;padding:10px 26px;border-radius:8px;}
.heroImg{width:48%;height:170px;position:relative;}
.ap{position:absolute;right:60px;top:20px;width:120px;height:120px;border-radius:9999px;background:radial-gradient(circle,#1a1a1a 0 40px,#0193d7 40px 44px,#000 44px);box-shadow:0 0 30px rgba(1,147,215,.3);}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:206px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:4px;padding:16px;}
.thumb{height:90px;border-radius:2px;background:#121212;margin-bottom:10px;}
.pname{font-size:14px;font-weight:600;margin:0 0 4px;}
.pspec{font-size:12px;color:#808080;margin:0 0 8px;}
.statusrow{display:flex;gap:6px;}
.status{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;padding:2px 10px;border-radius:9999px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Ubiquiti</div>
<div class="navlinks"><span>UniFi</span><span>UISP</span><span>AmpliFi</span><span>Store</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">UniFi Network</div>
<h1>Enterprise networking, self-managed.</h1>
<p>Rack-mounted switches, access points, and gateways that scale from a studio to a stadium.</p>
<div class="btn">Explore UniFi</div>
</div>
<div class="heroImg"><div class="ap"></div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0193d7,#000)"></div><div class="pname">U7 Pro Access Point</div><div class="pspec">Wi-Fi 7 · 2.5GbE Uplink</div><div class="statusrow"><span class="status" style="background:#00b300;color:#fff;">In Stock</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a1a1a,#0193d7)"></div><div class="pname">USW Pro 24 PoE</div><div class="pspec">24-Port · Layer 3</div><div class="statusrow"><span class="status" style="background:#0193d7;color:#fff;">New</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#282828,#0193d7)"></div><div class="pname">UDM Pro SE</div><div class="pspec">10G SFP+ · IDS/IPS</div><div class="statusrow"><span class="status" style="background:#808080;color:#fff;">Beta</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0193d7,#282828)"></div><div class="pname">UISP Router</div><div class="pspec">ISP-Grade Routing</div><div class="statusrow"><span class="status" style="background:#ffa500;color:#000;">Low Stock</span></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #22201e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #22201e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; letter-spacing: -0.2px; margin: 0; color: #22201e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #00371f; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #00371f;
border: 1px solid #00371f; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #22201e;
border: 1px solid #c0c0bf; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.8px; background: #fddab5; color: #22201e;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; font-family:'EuclidCircularB','Helvetica Neue',Arial,sans-serif; color:#22201e; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#00371f;}
.logo{font-family:'Domaine',Georgia,serif;font-size:21px;font-weight:700;color:#fff;letter-spacing:.2px;}
.navlinks{display:flex;gap:24px;font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#a9c772;font-family:'Montserrat',Arial,sans-serif;}
.hero{height:250px;display:flex;background:#fff;}
.herotext{width:46%;padding:0 34px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-family:'Montserrat',Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#809b8f;margin-bottom:12px;}
.herotext h1{font-family:'Domaine',Georgia,serif;font-size:34px;font-weight:700;line-height:1.12;letter-spacing:-.3px;margin:0 0 12px;color:#00371f;}
.herotext p{font-size:14px;line-height:1.5;color:#676986;margin:0 0 18px;max-width:290px;}
.cta{display:inline-block;background:#00371f;color:#fff;font-size:13px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;padding:13px 26px;border-radius:2px;width:fit-content;}
.heroimg{width:54%;position:relative;background:linear-gradient(160deg,#e8e6dc 0%,#f5f5f5 60%);overflow:hidden;}
.pot1{position:absolute;bottom:0;left:60px;width:130px;height:150px;background:linear-gradient(180deg,#00371f,#22201e);border-radius:6px 6px 2px 2px;}
.pot2{position:absolute;bottom:0;left:220px;width:100px;height:100px;background:linear-gradient(180deg,#a9c772,#809b8f);border-radius:4px;}
.plant{position:absolute;bottom:148px;left:78px;width:6px;height:70px;background:#b6cf91;border-radius:3px;}
.sale{position:absolute;top:20px;right:40px;background:#fddab5;color:#22201e;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:6px 14px;border-radius:2px;}
.grid{display:flex;gap:14px;padding:20px 34px 0;}
.card{width:150px;border:1px solid #e0e0e0;border-radius:4px;padding:10px;background:#fff;}
.thumb{height:98px;border-radius:2px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;color:#22201e;line-height:1.3;}
.pmeta{font-size:11px;color:#676986;margin-top:3px;font-family:'Montserrat',Arial,sans-serif;text-transform:uppercase;letter-spacing:.4px;}
.pprice{font-size:14px;font-weight:700;color:#00371f;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:11px;color:#99afa5;border-top:1px solid #e0e0e0;font-family:'Montserrat',Arial,sans-serif;letter-spacing:.3px;text-transform:uppercase;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Veradek</div>
<div class="navlinks"><div>Planters</div><div>Trellises</div><div>Collections</div><div>Care</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Built for the Outdoors</div>
<h1>Structure for the way you garden.</h1>
<p>Cube and rectangular planters engineered for patios, terraces, and city rooftops.</p>
<div class="cta">Shop Planters</div>
</div>
<div class="heroimg">
<div class="pot1"></div><div class="pot2"></div><div class="plant"></div>
<div class="sale">Season Sale</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00371f,#809b8f)"></div><div class="pname">Rectangular Planter</div><div class="pmeta">Fiberglass</div><div class="pprice">$189</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a9c772,#22201e)"></div><div class="pname">Cube Planter</div><div class="pmeta">Steel Powder-Coat</div><div class="pprice">$249</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b6cf91,#00371f)"></div><div class="pname">Trellis Insert</div><div class="pmeta">Accessory</div><div class="pprice">$59</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#99afa5,#22201e)"></div><div class="pname">Terrace Bench Planter</div><div class="pmeta">Weather-Resistant</div><div class="pprice">$319</div></div>
</div>
<div class="footer"><span>Landscape-Grade Design</span><span>Warranty · Shipping · Care Guide</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.2; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6e6e6e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #3b6b35; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #3b6b35;
border: 1px solid #3b6b35; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e6e6e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #f7f5f0; color: #3b6b35;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#fafafa; font-family:'Raleway',Arial,sans-serif; color:#121212;
}
*{box-sizing:border-box;}
.script{font-family:'Brush Script MT','Segoe Script',cursive;color:#4a3728;}
.nav{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;background:#f7f5f0;}
.logo{font-size:20px;font-weight:700;color:#3b6b35;letter-spacing:.3px;}
.navlinks{display:flex;gap:22px;font-size:12.5px;color:#3a3a3a;font-weight:500;}
.cta{background:#3b6b35;color:#fff;padding:11px 20px;font-size:12px;font-weight:700;border-radius:8px;}
.hero{display:flex;padding:24px 32px 16px;gap:24px;align-items:center;}
.hero-copy{width:380px;}
.hero-title{font-size:44px;line-height:1.05;margin-bottom:10px;}
.hero-sub{font-family:Raleway,Arial,sans-serif;font-size:13px;line-height:1.5;color:#4a4a4a;margin-bottom:16px;}
.btn-outline{display:inline-block;border:1.5px solid #3b6b35;color:#3b6b35;padding:11px 22px;font-size:12px;font-weight:700;border-radius:2px;}
.hero-visual{flex:1;height:200px;border-radius:6px;background:linear-gradient(150deg,#c8dcc0,#3b6b35);position:relative;}
.rust-chip{position:absolute;top:14px;left:14px;background:#b85c38;color:#fff;font-size:9px;font-weight:700;padding:5px 10px;border-radius:999px;}
.seed-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:#4a3728;}
.s1{top:60px;left:80px;} .s2{top:110px;left:140px;} .s3{top:80px;left:190px;}
.section{padding:6px 32px 0;}
.section-title{font-size:17px;font-weight:700;margin-bottom:14px;color:#3b6b35;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#fff;border:1px solid #dedede;border-radius:6px;overflow:hidden;}
.card-img{height:82px;background:linear-gradient(150deg,#f7f5f0,#c8dcc0);}
.card-body{padding:10px;}
.variety{font-family:Raleway,Arial,sans-serif;font-size:12px;font-weight:700;margin-bottom:3px;}
.card-meta{font-size:9.5px;color:#7a7a7a;margin-bottom:6px;}
.card-price{font-size:12.5px;font-weight:700;color:#3b6b35;}
.card-badge{display:inline-block;border:1px solid #3b6b35;color:#3b6b35;font-size:8px;padding:2px 6px;border-radius:999px;margin-bottom:6px;}
</style>
<div class="nav">
<div class="logo">Eden Brothers</div>
<div class="navlinks"><span>Flower Seeds</span><span>Vegetable Seeds</span><span>Bulbs</span><span>Collections</span></div>
<div class="cta">Shop The Catalog</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="hero-title script">A garden, from a single seed.</div>
<div class="hero-sub">Heirloom flower and vegetable seeds, tested for germination and packed the same week they're ordered.</div>
<div class="btn-outline">Shop Heirloom Seeds</div>
</div>
<div class="hero-visual">
<div class="rust-chip">Heirloom Collection</div>
<div class="seed-dot s1"></div><div class="seed-dot s2"></div><div class="seed-dot s3"></div>
</div>
</div>
<div class="section">
<div class="section-title">Seasonal Favorites</div>
<div class="grid">
<div class="card"><div class="card-img"></div><div class="card-body"><div class="card-badge">Flower</div><div class="variety">Zinnia, Cut Flower Mix</div><div class="card-meta">75 Days To Maturity</div><div class="card-price">$4.95</div></div></div>
<div class="card"><div class="card-img"></div><div class="card-body"><div class="card-badge">Vegetable</div><div class="variety">Heirloom Tomato Blend</div><div class="card-meta">80 Days To Maturity</div><div class="card-price">$5.50</div></div></div>
<div class="card"><div class="card-img"></div><div class="card-body"><div class="card-badge">Bulb</div><div class="variety">Dahlia, Cafe Au Lait</div><div class="card-meta">Ships In Spring</div><div class="card-price">$12.95</div></div></div>
<div class="card"><div class="card-img"></div><div class="card-body"><div class="card-badge">Flower</div><div class="variety">Cosmos, Sensation Mix</div><div class="card-meta">70 Days To Maturity</div><div class="card-price">$3.95</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #F04E88; color: #FFFFFF;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #FFFFFF; color: #F04E88;
border: 1px solid #F04E88; border-radius: 9999px;
padding: 10px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #E5E5E5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #F04E88; color: #FFFFFF;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Erin Condren — Home</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#3d3d3d;
font-family:'Nunito Sans','Proxima Nova',-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;}
.page{width:960px;height:640px;display:flex;flex-direction:column;}
.stripe{height:5px;background:linear-gradient(90deg,#F04E88,#FFD166,#6EC6A0,#34C1CE,#9B6FD6);}
header{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #E5E5E5;}
.logo{font-size:19px;font-weight:700;color:#1A1A1A;}
.logo span{color:#F04E88;}
nav{display:flex;gap:20px;}
nav a{font-size:12px;font-weight:700;color:#3D3D3D;}
.nav-cta{background:#F04E88;color:#fff;padding:8px 18px;border-radius:999px;font-size:12px;font-weight:700;}
.hero{display:flex;padding:24px 28px;gap:24px;background:#FEF5F8;}
.hero-copy{flex:1;}
.hero-copy .kicker{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#F04E88;margin-bottom:8px;}
.hero-copy h1{font-size:30px;font-weight:700;color:#1A1A1A;margin:0 0 12px;line-height:1.2;}
.hero-copy p{font-size:13px;color:#3D3D3D;max-width:340px;margin:0 0 16px;line-height:1.6;}
.hero-cta{display:inline-block;background:#F04E88;color:#fff;padding:11px 22px;border-radius:999px;font-size:12px;font-weight:700;}
.swatch-strip{display:flex;gap:8px;margin-top:16px;}
.swatch-strip i{width:26px;height:26px;border-radius:999px;display:inline-block;box-shadow:0 0 0 2px #fff, 0 0 0 3px #E5E5E5;}
.planner{width:230px;height:170px;border-radius:14px;background:linear-gradient(135deg,#F04E88,#FF7B54);position:relative;box-shadow:0 8px 20px rgba(240,78,136,0.25);}
.planner::before{content:'';position:absolute;left:-6px;top:16px;bottom:16px;width:12px;background:repeating-linear-gradient(180deg,#fff 0 4px,transparent 4px 10px);border-radius:6px;}
.planner::after{content:'';position:absolute;left:20px;right:20px;top:24px;bottom:24px;background:rgba(255,255,255,0.9);border-radius:8px;}
main{flex:1;padding:18px 28px 0;}
.row-head{display:flex;justify-content:space-between;margin-bottom:12px;}
.row-head h2{font-size:16px;margin:0;color:#1A1A1A;}
.row-head span{font-size:11px;color:#F04E88;font-weight:700;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#fff;border-radius:14px;border:1px solid #E5E5E5;padding:10px;position:relative;}
.thumb{height:66px;border-radius:10px;background:linear-gradient(150deg,#F9B8D5,#FEF5F8);margin-bottom:8px;}
.badge{position:absolute;top:6px;left:6px;font-size:8px;font-weight:700;padding:3px 8px;border-radius:999px;color:#fff;text-transform:uppercase;}
.b-new{background:#F04E88;}
.b-sale{background:#FF7B54;}
.card h4{font-size:11px;margin:0 0 6px;color:#1A1A1A;font-weight:700;}
.card .swatches{display:flex;gap:3px;margin-bottom:6px;}
.card .swatches i{width:10px;height:10px;border-radius:999px;display:inline-block;}
.card .price{font-size:13px;font-weight:700;color:#F04E88;}
footer{background:#FEF5F8;padding:14px 28px;display:flex;justify-content:space-between;align-items:center;margin-top:14px;}
footer span{font-size:10px;color:#767676;}
</style>
<div class="page">
<div class="stripe"></div>
<header>
<div class="logo">Erin Condren<span>.</span></div>
<nav><a>Planners</a><a>Notebooks</a><a>Stickers</a><a>Customize</a></nav>
<div class="nav-cta">Design Yours</div>
</header>
<div class="hero">
<div class="hero-copy">
<div class="kicker">Color Is a Productivity Technology</div>
<h1>Pick your cover.<br>Plan your year.</h1>
<p>A dozen colorway families, tabbed page edges, and a coil that survives an actual desk.</p>
<div class="hero-cta">Customize Cover</div>
<div class="swatch-strip"><i style="background:#F04E88"></i><i style="background:#34C1CE"></i><i style="background:#9B6FD6"></i><i style="background:#FF7B54"></i><i style="background:#FFD166"></i><i style="background:#6EC6A0"></i></div>
</div>
<div class="planner"></div>
</div>
<main>
<div class="row-head"><h2>Shop the LifePlanner Collection</h2><span>See All Colorways →</span></div>
<div class="grid">
<div class="card"><div class="badge b-new">New</div><div class="thumb"></div><h4>Coiled LifePlanner, Blossom</h4><div class="swatches"><i style="background:#F04E88"></i><i style="background:#FFD166"></i></div><div class="price">$74.00</div></div>
<div class="card"><div class="badge b-sale">Sale</div><div class="thumb"></div><h4>Deluxe Notebook, Petal</h4><div class="swatches"><i style="background:#9B6FD6"></i></div><div class="price">$28.00</div></div>
<div class="card"><div class="thumb"></div><h4>Sticker Book, Weekly Set</h4><div class="swatches"><i style="background:#34C1CE"></i><i style="background:#6EC6A0"></i></div><div class="price">$16.00</div></div>
<div class="card"><div class="thumb"></div><h4>Vertical Wall Planner</h4><div class="swatches"><i style="background:#FF7B54"></i></div><div class="price">$42.00</div></div>
</div>
</main>
<footer>
<span>© Erin Condren — Color-Coded Life</span>
<span>Colorway Index · Coil Guarantee · Rewards</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #fcfdff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #fcfdff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: -0.4px; margin: 0; color: #fcfdff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.6; margin: 0; color: #a1a4a5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; background: #fcfdff; color: #000000;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; background: #000000; color: #fcfdff;
border: 1px solid #fcfdff; border-radius: 8px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #0a0a0c; color: #fcfdff;
border: 1px solid #3f3f40; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a1a4a5; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.5; background: #101012; color: rgba(252,253,255,0.86);
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#fcfdff; box-sizing:border-box;
font-family:Georgia, "Times New Roman", Times, serif; }
* { box-sizing:border-box; }
.ui { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid rgba(255,255,255,.06); }
.brand { font-weight:700; font-size:15px; }
.navlinks { display:flex; gap:22px; font-size:13px; color:rgba(252,253,255,.7); }
.btnw { background:#fcfdff; color:#000; border:none; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:500; }
.hero { position:relative; padding:52px 32px 20px; overflow:hidden; }
.hero::before { content:''; position:absolute; top:-120px; left:20%; width:520px; height:340px;
background:radial-gradient(circle, rgba(255,89,0,.22) 0%, transparent 70%); }
.hero::after { content:''; position:absolute; top:-80px; right:5%; width:420px; height:300px;
background:radial-gradient(circle, rgba(0,117,255,.24) 0%, transparent 70%); }
.hero h1 { position:relative; font-size:66px; font-weight:400; line-height:1; letter-spacing:-1.5px; margin:0 0 14px; max-width:640px; }
.hero p { position:relative; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:15px;
color:rgba(252,253,255,.86); margin:0 0 18px; max-width:420px; }
.heroctas { position:relative; display:flex; gap:10px; }
.btnghost { background:#101012; color:#fcfdff; border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:8px 16px;
font-family:-apple-system,BlinkMacSystemFont,sans-serif; font-size:13px; font-weight:500; }
.split { display:grid; grid-template-columns:1.05fr 1fr; gap:18px; padding:6px 32px 18px; }
.codewin { background:#06060a; border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:16px; }
.dots { display:flex; gap:6px; margin-bottom:10px; }
.dot { width:9px; height:9px; border-radius:50%; }
.dot.r{background:#ff2047;} .dot.y{background:#ffc53d;} .dot.g{background:#11ff99;}
pre { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:11.5px; line-height:1.6;
color:rgba(252,253,255,.86); margin:0; }
.tok { color:#3b9eff; }
.emailcard { background:#0a0a0c; border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:16px;
font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
.emailcard .from { font-size:11px; color:rgba(252,253,255,.7); margin-bottom:8px; }
.emailcard h3 { font-size:16px; margin:0 0 8px; font-weight:500; letter-spacing:-.3px; font-family:Georgia,serif; }
.emailcard p { font-size:12px; color:rgba(252,253,255,.7); margin:0 0 4px; font-family:-apple-system,sans-serif; }
.badge { display:inline-block; background:#101012; border-radius:999px; padding:3px 9px; font-size:10.5px;
color:rgba(252,253,255,.86); font-family:-apple-system,sans-serif; margin-top:8px; }
footer { display:flex; justify-content:space-between; padding:12px 32px; font-family:-apple-system,sans-serif;
font-size:11px; color:#888e90; border-top:1px solid rgba(255,255,255,.04); }
</style></head>
<body>
<nav class="ui">
<div class="brand">Resend</div>
<div class="navlinks"><span>Features</span><span>Pricing</span><span>Docs</span><span>Customers</span></div>
<button class="btnw">Get started</button>
</nav>
<section class="hero">
<h1>Email for<br>developers</h1>
<p>The best way to reach humans instead of spam folders. Deliver transactional and marketing emails at scale.</p>
<div class="heroctas">
<button class="btnw ui">Get started</button>
<button class="btnghost">Read the docs</button>
</div>
</section>
<div class="split">
<div class="codewin">
<div class="dots"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span></div>
<pre>resend.emails.send({
from: <span class="tok">'[email protected]'</span>,
to: <span class="tok">'[email protected]'</span>,
subject: <span class="tok">'hello world'</span>,
react: EmailTemplate()
});</pre>
</div>
<div class="emailcard">
<div class="from">from: Resend <[email protected]></div>
<h3>Welcome aboard</h3>
<p>Your account is ready. Start sending emails your users actually receive.</p>
<span class="badge">● delivered</span>
</div>
</div>
<footer class="ui">
<span>© Resend</span>
<span>Resend · Docs · Status · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 800; line-height: 1.2; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #111111; color: #eeeeee;
border: none; border-radius: 8px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #eeeeee; color: #111111;
border: 1px solid #eeeeee; border-radius: 8px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111111;
border: 1px solid #b7b7b7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #cc0000; color: #eeeeee;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eeeeee; color:#111111; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
background:#eeeeee; border-bottom:1px solid #cccccc; }
.brand { font-family:'kanedagothic-extrabold','Impact','Haettenschweiler',sans-serif; font-size:20px; font-weight:800; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:18px; font-size:14px; font-weight:600; letter-spacing:0.3px; color:#111111; }
.util { font-size:13px; color:#666666; }
main { display:grid; grid-template-columns:380px 1fr; height:calc(640px - 56px); }
.stage { padding:22px; display:flex; flex-direction:column; gap:10px; background:#eeeeee; }
.crumb { font-size:11px; color:#999999; }
.pan { flex:1; border-radius:8px; background:#ffffff; border:1px solid #cccccc; position:relative; overflow:hidden; }
.pan::before { content:''; position:absolute; left:20%; top:20%; width:60%; height:60%; border-radius:4px;
background:linear-gradient(135deg,#111111,#666 50%,#cc0000 100%); box-shadow:0 16px 26px rgba(0,0,0,0.16); }
.thumbs { display:flex; gap:8px; }
.thumb { width:48px; height:48px; border-radius:4px; background:#ffffff; border:1px solid #cccccc; }
.info { padding:22px 30px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.crumb2 { font-size:12px; color:#666666; }
.crumb2 b { color:#111111; font-weight:600; }
h1 { font-family:'kanedagothic-extrabold','Impact',sans-serif; margin:0; font-size:22px; font-weight:800; line-height:1.2; }
.artist { font-size:14px; color:#666666; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:16px; font-weight:700; }
.badge-new { background:#cc0000; color:#eeeeee; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:2px 6px; border-radius:4px; }
.desc { font-size:14px; color:#333333; line-height:1.45; }
.tabs { display:flex; gap:16px; border-bottom:1px solid #cccccc; padding-bottom:8px; font-size:12px; font-weight:600; }
.tab-active { color:#cc0000; border-bottom:2px solid #cc0000; padding-bottom:8px; margin-bottom:-9px; }
.tab-inactive { color:#666666; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#111111; color:#eeeeee; border:none; height:40px; border-radius:8px; font-size:14px; font-weight:600; letter-spacing:0.3px; }
.btn-secondary { width:150px; background:#eeeeee; border:1px solid #cccccc; color:#111111; height:40px; border-radius:8px; font-size:14px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Bull Moose Independ 2</p>
<div class="navlinks"><span>Movies</span><span>Music</span><span>Games</span><span>Local Bands</span></div>
<div class="util">Search Cart (0)</div>
</nav>
<main>
<div class="stage">
<div class="crumb">Bull Moose Independ 2 / Music / Used</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="crumb2">Music › Indie Rock › <b>Used CD</b></span>
<h1>Basement Tapes Vol. II</h1>
<div class="artist">Harbor Lights</div>
<div class="price-row"><span class="price">$8.99</span><span class="badge-new">Restock</span></div>
<p class="desc">Used, VG+ condition. Case and artwork included, disc professionally cleaned before shipping.</p>
<div class="tabs">
<span class="tab-active">Details</span><span class="tab-inactive">Reviews</span><span class="tab-inactive">Trade-In Value</span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Sell Us Yours</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #3a3a3a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #3a3a3a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #3a3a3a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #989898; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.25px; background: #00aeef; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.25px; background: #ffffff; color: #3a3a3a;
border: 1px solid #00aeef; border-radius: 9999px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #3a3a3a;
border: 1px solid #cecece; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #989898; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #c00000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#3a3a3a; box-sizing:border-box;
font-family:'Lato', 'Montserrat', sans-serif; }
* { box-sizing:border-box; }
.mont { font-family:'Montserrat', Arial, sans-serif; }
nav { height:64px; background:#00aeef; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { color:#fff; font-size:19px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:8px; }
.navlinks span { color:#fff; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.25px;
padding:8px 12px; }
.navlinks span:first-child { border-bottom:2px solid #fff; }
.search { width:180px; height:36px; background:#fff; border-radius:999px; display:flex; align-items:center;
padding:0 14px; font-size:12px; color:#3a3a3a; }
.catstrip { background:#f6f6f6; display:flex; gap:8px; padding:10px 36px; }
.catpill { background:#00aeef; color:#fff; font-size:12px; font-weight:600; padding:6px 14px; border-radius:999px; }
.catpill.off { background:transparent; color:#989898; }
.hero { padding:22px 36px; display:flex; align-items:center; gap:28px; }
.hero-copy { flex:1.1; }
.hero h1 { font-family:'Montserrat',Arial,sans-serif; font-size:28px; font-weight:700; line-height:1.2; margin:0 0 8px; }
.hero p { font-size:14px; color:#444; margin:0 0 14px; max-width:400px; }
.btn-primary { background:#00aeef; color:#fff; border:none; border-radius:999px; padding:11px 24px; font-size:14px;
font-weight:600; font-family:'Montserrat',Arial,sans-serif; }
.hero-visual { flex:0.9; height:200px; border-radius:8px; background:linear-gradient(150deg,#f07c29,#fec94a 60%,#d44047 130%);
position:relative; }
.hero-visual::before { content:''; position:absolute; width:70px; height:100px; background:#fff; border-radius:6px;
left:60px; top:40px; opacity:0.9; transform:rotate(-8deg); }
.hero-visual::after { content:''; position:absolute; width:70px; height:100px; background:#fff; border-radius:6px;
left:120px; top:30px; opacity:0.95; transform:rotate(6deg); }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:8px 36px 20px; }
.card { background:#fff; border-radius:8px; padding:12px; }
.card .cover { aspect-ratio:3/4; height:90px; background:#f6f6f6; border-radius:8px; margin-bottom:8px; position:relative; }
.badge-sale { position:absolute; top:6px; left:6px; background:#c00000; color:#fff; font-size:10px; font-weight:700;
text-transform:uppercase; letter-spacing:0.5px; padding:2px 8px; border-radius:4px; }
.card h3 { font-family:'Montserrat',Arial,sans-serif; font-size:14px; font-weight:600; margin:0 0 3px; }
.card .author { font-size:12px; color:#989898; }
.card .price { font-size:15px; font-weight:600; margin-top:4px; }
footer { background:#303030; color:#606060; padding:14px 36px; display:flex; justify-content:space-between;
align-items:center; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Books OF Wonder</p>
<div class="navlinks"><span>Picture Books</span><span>Middle Grade</span><span>Events</span></div>
<div class="search">Search books</div>
</nav>
<div class="catstrip">
<span class="catpill">Ages 0–5</span><span class="catpill off">Ages 6–8</span><span class="catpill off">Ages 9–12</span><span class="catpill off">Teen</span>
</div>
<section class="hero">
<div class="hero-copy">
<h1>A Chelsea landmark since 1988</h1>
<p>New York's original children's bookstore — story hours, author events, and shelves built for young readers.</p>
<button class="btn-primary">Shop New Arrivals</button>
</div>
<div class="hero-visual"></div>
</section>
<section class="grid">
<div class="card"><div class="cover"><span class="badge-sale">Sale</span></div><h3>The Very Hungry Caterpillar</h3><div class="author">Eric Carle</div><div class="price">$8.99</div></div>
<div class="card"><div class="cover"></div><h3>Percy Jackson: Book 1</h3><div class="author">Rick Riordan</div><div class="price">$9.99</div></div>
<div class="card"><div class="cover"></div><h3>Wonder</h3><div class="author">R.J. Palacio</div><div class="price">$10.99</div></div>
</section>
<footer>
<span>© Books OF Wonder</span>
<span>Story hours every Saturday · Author events monthly</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ecf2f3; color: #272d45;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ecf2f3; color: #272d45;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #272d45; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 400; line-height: 1.6; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #617c55; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #ecf2f3; color: #272d45;
border: 1px solid #617c55; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #405960;
border: 1px solid #bbc1c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #617c55; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ecf2f3; font-family:'Lora',Georgia,serif; color:#272d45; }
*{box-sizing:border-box;}
.nav{height:64px;background:#ecf2f3;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-family:'Poppins',Arial,sans-serif;}
.logo{font-size:19px;font-weight:500;}
.navlinks{display:flex;gap:20px;font-size:16px;font-weight:500;}
.hero{height:230px;background:#ecf2f3;display:flex;align-items:center;padding:0 40px;}
.herotext{width:420px;}
.herotext h1{font-family:'Poppins',Arial,sans-serif;font-size:32px;font-weight:700;line-height:1.25;margin:0 0 14px;letter-spacing:-.5px;}
.herotext p{font-size:15px;line-height:1.6;margin:0 0 16px;max-width:340px;}
.btn{display:inline-block;background:#617c55;color:#fff;font-family:'Poppins',Arial,sans-serif;font-size:16px;font-weight:500;padding:12px 24px;border-radius:8px;}
.heroart{flex:1;height:170px;border-radius:12px;background:linear-gradient(135deg,#a9c1c7,#617c55 65%);}
.grid{display:flex;gap:14px;padding:16px 30px 0;}
.card{width:210px;background:#fff;border:1px solid #c5c7c8;border-radius:12px;overflow:hidden;}
.thumb{height:110px;background:#f4f4f6;border-radius:12px 12px 0 0;}
.cbody{padding:10px 12px;font-family:'Poppins',Arial,sans-serif;}
.ctitle{font-size:16px;font-weight:500;margin:0;}
.cprice{font-size:15px;color:#676986;margin-top:4px;}
.badge{display:inline-block;background:#617c55;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-radius:4px;padding:2px 8px;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:96px;background:#f4f4f6;color:#676986;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:13px;font-family:'Poppins',Arial,sans-serif;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Pela</div>
<div class="navlinks"><div>Cases</div><div>Materials</div><div>Impact</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Compostable phone cases, grown to protect.</h1>
<p>Flax-straw and biopolymer cases built from soil, stone, and recycled fiber.</p>
<div class="btn">Shop Cases</div>
</div>
<div class="heroart"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="cbody"><div class="ctitle">Case, Sage</div><div class="cprice">$44.95</div><div class="badge">Compostable</div></div></div>
<div class="card"><div class="thumb" style="background:#bc5548;"></div><div class="cbody"><div class="ctitle">Case, Terracotta</div><div class="cprice">$44.95</div><div class="badge">Compostable</div></div></div>
<div class="card"><div class="thumb" style="background:#0e7a82;"></div><div class="cbody"><div class="ctitle">Case, Ocean</div><div class="cprice">$44.95</div><div class="badge">Compostable</div></div></div>
<div class="card"><div class="thumb" style="background:#aabfa1;"></div><div class="cbody"><div class="ctitle">Screen Protector Kit</div><div class="cprice">$19.95</div></div></div>
</div>
<div class="footer"><span>© Pela — Compostable by Design</span><span>Shop Learn Support Connect</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f7f7; color: #2d2b29;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f7f7; color: #2d2b29;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #2d2b29; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #e72106; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #f8f7f7; color: #2d2b29;
border: 1px solid #e72106; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f7f7; color: #2d2b29;
border: 1px solid #c5c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e72106; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f8f7f7; font-family:'DM Sans',Arial,sans-serif; color:#2d2b29;
}
*{box-sizing:border-box;}
.nav{height:60px; background:#2d2b29; display:flex; align-items:center; padding:0 30px;}
.logo{font-family:'Futura','DM Sans',sans-serif; font-size:19px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#fff;}
.navlinks{display:flex; gap:22px; margin-left:36px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:#c9c5c0;}
.navlinks span.active{color:#fff; border-bottom:2px solid #e72106; padding-bottom:4px;}
.navcta{margin-left:auto; background:#e72106; color:#fff; padding:9px 20px; border-radius:4px; font-size:12px; font-weight:700; text-transform:uppercase;}
.hero{display:flex; align-items:center; gap:32px; padding:26px 30px;}
.heroText{flex:1;}
.heroText .eyebrow{font-family:'Futura','DM Sans',sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#e72106; font-weight:700; margin-bottom:10px;}
.heroText h1{font-size:32px; font-weight:700; line-height:1.2; margin:0 0 12px; max-width:400px; color:#2d2b29;}
.heroText p{font-size:13.5px; color:#5c5854; line-height:1.55; max-width:380px; margin:0 0 16px;}
.heroBtn{display:inline-block; background:#e72106; color:#fff; padding:12px 26px; border-radius:4px; font-size:12px; font-weight:700; text-transform:uppercase;}
.heroImg{width:240px; height:170px; border-radius:4px; background:linear-gradient(150deg,#2d2b29,#e72106); flex-shrink:0; position:relative;}
.heroImg::before{content:''; position:absolute; left:20%; right:20%; top:16%; bottom:40%; background:#f8f7f7; opacity:.85; border-radius:4px;}
.section{padding:14px 30px 0;}
.sectitle{font-family:'Futura','DM Sans',sans-serif; font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin:0 0 12px;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.card{background:#fff; border-radius:4px; padding:8px; text-align:center;}
.thumb{height:78px; border-radius:4px; margin-bottom:8px; position:relative;}
.t1{background:linear-gradient(135deg,#e72106,#f36b52);}
.t2{background:linear-gradient(135deg,#2563eb,#8fb0f5);}
.t3{background:linear-gradient(135deg,#2d2b29,#5c5854);}
.t4{background:linear-gradient(135deg,#8a8580,#c9c5c0);}
.pname{font-size:12px; font-weight:600; margin-bottom:3px;}
.pprice{font-size:12px; color:#e72106; font-weight:700;}
.footer{position:absolute; bottom:0; left:0; right:0; background:#2d2b29; color:#c9c5c0; font-size:10px; text-align:center; padding:8px 0;}
</style>
<div class="nav">
<div class="logo">Hedley And Bennett</div>
<div class="navlinks"><span class="active">Aprons</span><span>Chef Coats</span><span>Knives</span><span>Custom</span></div>
<div class="navcta">Design Your Apron</div>
</div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">Kitchen Uniform Co.</div>
<h1>Rugged Utility, Quiet Confidence</h1>
<p>Workshop-grade aprons and chef apparel built for professional kitchens and home cooks who mean it.</p>
<div class="heroBtn">Shop Aprons</div>
</div>
<div class="heroImg"></div>
</div>
<div class="section">
<div class="sectitle">Best Selling Aprons</div>
<div class="grid">
<div class="card"><div class="thumb t1"></div><div class="pname">The Essential Apron</div><div class="pprice">$79</div></div>
<div class="card"><div class="thumb t2"></div><div class="pname">Denim Cross-Back</div><div class="pprice">$89</div></div>
<div class="card"><div class="thumb t3"></div><div class="pname">Chef Coat, Charcoal</div><div class="pprice">$95</div></div>
<div class="card"><div class="thumb t4"></div><div class="pname">8-Inch Chef Knife</div><div class="pprice">$120</div></div>
</div>
</div>
<div class="footer">© Hedley And Bennett — Kitchen Uniforms Built to Last</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #484848;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #484848;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.25px; margin: 0; color: #484848; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.5px; background: #2e9b8d; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #484848;
border: 1px solid #2e9b8d; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #484848;
border: 1px solid #cacaca; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #dae9e7; color: #2e9b8d;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f6f6; font-family:Kanit,'Helvetica Neue',Helvetica,Arial,sans-serif; color:#484848; }
*{box-sizing:border-box;}
.nav{height:64px;background:#ffffff;border-bottom:1px solid #e4e4e4;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:20px;font-weight:600;color:#484848;}
.search{width:340px;height:40px;border:1px solid #e4e4e4;border-radius:8px;display:flex;align-items:center;padding:0 14px;font-size:14px;color:#818182;}
.acct{font-size:14px;font-weight:500;display:flex;gap:18px;align-items:center;}
.hero{height:150px;background:#fff;border-bottom:1px solid #e4e4e4;display:flex;align-items:center;padding:0 30px;justify-content:space-between;}
.h1{font-size:28px;font-weight:500;color:#2b2b2b;margin:0 0 6px;}
.sub{font-size:14px;color:#707070;}
.orb{width:88px;height:88px;border-radius:50%;background:conic-gradient(#2e9b8d 0turn,#117a8b 0.5turn,#2e9b8d 1turn);position:relative;}
.orb:before{content:'';position:absolute;inset:10px;border-radius:50%;background:#f6f6f6;}
.filters{display:flex;gap:8px;padding:14px 30px;background:#f6f6f6;}
.pill{border-radius:9999px;padding:8px 16px;font-size:14px;font-weight:500;background:#f1f1f1;color:#484848;}
.pill.on{background:#2e9b8d;color:#fff;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:206px;background:#fff;border-radius:8px;padding:8px;}
.thumb{height:106px;border-radius:4px;margin-bottom:8px;}
.ptitle{font-size:18px;font-weight:500;color:#484848;}
.pdesc{font-size:14px;color:#818182;}
.prow{display:flex;justify-content:space-between;align-items:center;margin-top:6px;}
.pprice{font-size:18px;font-weight:600;color:#484848;}
.addbtn{background:#2e9b8d;color:#fff;font-size:12px;font-weight:500;letter-spacing:0.5px;padding:6px 12px;border-radius:8px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:52px;background:#f6f6f6;border-top:1px solid #e4e4e4;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:13px;color:#707070;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Redeye Records</div>
<div class="search">Search artists, labels, tracks...</div>
<div class="acct"><span>Sign In</span><span>🛒</span></div>
</div>
<div class="hero">
<div>
<div class="h1">Vinyl for the dancefloor.</div>
<div class="sub">House, techno, and everything the crate deserves.</div>
</div>
<div class="orb"></div>
</div>
<div class="filters">
<div class="pill on">Vinyl</div><div class="pill">CD</div><div class="pill">Merch</div><div class="pill">House</div><div class="pill">Techno</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2e9b8d,#484848)"></div><div class="ptitle">Midnight Frequency</div><div class="pdesc">Redeye Exclusive</div><div class="prow"><div class="pprice">£14.99</div><div class="addbtn">Add</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#484848,#117a8b)"></div><div class="ptitle">Warehouse Signal EP</div><div class="pdesc">12" Vinyl</div><div class="prow"><div class="pprice">£11.50</div><div class="addbtn">Add</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#117a8b,#2e9b8d)"></div><div class="ptitle">Low End Theory</div><div class="pdesc">Repress</div><div class="prow"><div class="pprice">£16.00</div><div class="addbtn">Add</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2e9b8d,#818182)"></div><div class="ptitle">Analog Circuits</div><div class="pdesc">Double LP</div><div class="prow"><div class="pprice">£22.00</div><div class="addbtn">Add</div></div></div>
</div>
<div class="footer"><span>© Redeye Records — Est. dance music specialists</span><span>Visa · Mastercard · PayPal</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #0c0c0c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #0c0c0c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #0c0c0c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #0c0c0c; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #f8f8f8; color: #0c0c0c;
border: 1px solid #0c0c0c; border-radius: 8px;
padding: 14px 32px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f8f8; color: #0c0c0c;
border: 1px solid #bdbdbd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #1b5351; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f8f8; font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif; color:#0c0c0c; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #efede7;}
.logo{font-size:20px;font-weight:400;letter-spacing:.5px;}
.navlinks{display:flex;gap:26px;font-size:14px;color:#3b3b3b;}
.hero{height:340px;background:#f1eee9;border-radius:20px;margin:16px 34px 0;display:flex;align-items:center;padding:0 44px;}
.herotext{width:420px;}
.herotext h1{font-size:42px;font-weight:300;line-height:1.18;margin:0 0 14px;letter-spacing:-.5px;}
.herotext p{font-size:15px;color:#3b3b3b;margin:0 0 20px;max-width:340px;line-height:1.5;}
.btn{display:inline-block;background:#0c0c0c;color:#fff;font-size:14px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;padding:14px 30px;border-radius:8px;}
.heroart{flex:1;height:240px;border-radius:12px;background:linear-gradient(135deg,#fffcf1,#e3dfd7 60%,#88432a);position:relative;}
.heroart:after{content:'';position:absolute;right:40px;bottom:20px;width:120px;height:60px;border-radius:12px;background:#1b5351;opacity:.85;}
.grid{display:flex;gap:14px;padding:20px 34px 0;}
.card{width:210px;border-radius:12px;overflow:hidden;background:#fff;}
.thumb{height:130px;background:#e3dfd7;border-radius:12px 12px 0 0;}
.cbody{padding:10px 12px;}
.ctitle{font-size:15px;font-weight:500;margin:0;}
.cprice{font-size:13px;color:#3b3b3b;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:76px;background:#0c0c0c;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:13px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Parachute</div>
<div class="navlinks"><div>Bedding</div><div>Bath</div><div>Loungewear</div><div>Sale</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Linen that feels like home.</h1>
<p>Warm, tactile essentials for the bedroom and bath — soft on the eyes, softer on the skin.</p>
<div class="btn">Shop Linen</div>
</div>
<div class="heroart"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="cbody"><div class="ctitle">Classic Linen Sheet Set</div><div class="cprice">$249</div></div></div>
<div class="card"><div class="thumb" style="background:#fffcf1;"></div><div class="cbody"><div class="ctitle">Terracotta Duvet Cover</div><div class="cprice">$219</div></div></div>
<div class="card"><div class="thumb" style="background:#aab3a3;"></div><div class="cbody"><div class="ctitle">Sage Bath Towel Set</div><div class="cprice">$89</div></div></div>
<div class="card"><div class="thumb" style="background:#1b5351;"></div><div class="cbody"><div class="ctitle">Teal Waffle Robe</div><div class="cprice">$128</div></div></div>
</div>
<div class="footer"><span>© Parachute Home</span><span>Shop About Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00704a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00704a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b9a8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e3932; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00704a; color: #ffffff;
border: 1px solid #1e3932; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00704a; color: #f5f5f5;
border: 1px solid #278565; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b9a8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #056746; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F9F9F9; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Lato", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
.top { text-align:center; padding:24px 0 6px; }
.ring { width:170px; height:170px; margin:0 auto; border-radius:50%;
background: conic-gradient(#CBA258 0deg 260deg, #E8E8E8 260deg 360deg);
display:flex; align-items:center; justify-content:center; }
.ring-in { width:130px; height:130px; border-radius:50%; background:#F9F9F9; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-in b { font-size:42px; font-weight:800; color:#CBA258; }
.ring-in span { font-size:12px; font-weight:600; color:#595959; }
.sub { font-size:14px; color:#595959; margin-top:8px; }
.cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px 34px 0; }
.cat { position:relative; aspect-ratio:2/3; border-radius:16px; overflow:hidden; box-shadow: rgba(0,0,0,0.08) 0 2px 8px; }
.cat::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,0.5) 100%); }
.cat-label { position:absolute; bottom:10px; left:10px; z-index:1; color:#fff; font-size:14px; font-weight:700; }
.reward-tile { margin:18px 34px 0; background:#D4E9E2; border-radius:16px; padding:14px 18px; display:flex; align-items:center; }
.rt-left { font-size:14px; font-weight:700; }
.rt-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.redeem { background:#00704A; color:#fff; font-size:13px; font-weight:700; padding:8px 16px; border-radius:20px; }
.size-row { display:flex; gap:8px; padding:16px 34px 0; }
.size-pill { flex:1; text-align:center; border:1.5px solid #E8E8E8; border-radius:18px; padding:8px 0; font-size:12px; font-weight:600; }
.size-pill.on { background:#00704A; color:#fff; border-color:#00704A; }
</style></head>
<body>
<div class="top">
<div class="ring"><div class="ring-in"><b>47</b><span>Stars</span></div></div>
<div class="sub">Starbucks (iOS) · 75 Stars until free reward</div>
</div>
<div class="cat-grid">
<div class="cat" style="background:linear-gradient(135deg,#8a5a3a,#5a3620);"><div class="cat-label">Hot Coffees</div></div>
<div class="cat" style="background:linear-gradient(135deg,#7ac6d6,#3a8fa8);"><div class="cat-label">Cold Coffees</div></div>
<div class="cat" style="background:linear-gradient(135deg,#e07a5f,#c65a3f);"><div class="cat-label">Refreshers</div></div>
<div class="cat" style="background:linear-gradient(135deg,#f2cc8f,#c99a5b);"><div class="cat-label">Frappuccino</div></div>
</div>
<div class="reward-tile"><div class="rt-left">⭐ 25 Stars · Free Drink</div><div class="rt-right"><div class="redeem">Redeem</div></div></div>
<div class="size-row">
<div class="size-pill">Short</div>
<div class="size-pill">Tall</div>
<div class="size-pill on">Grande</div>
<div class="size-pill">Venti</div>
<div class="size-pill">Trenta</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #726d75; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #d18cff; color: #000000;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #000000;
border: 1px solid #d18cff; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #444444;
border: 1px solid #c4c4c4; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #726d75; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f3584c; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:'SofiaPro','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e8e8e8; }
.brand { font-size:22px; font-weight:600; color:#d18cff; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:15px; font-weight:500; letter-spacing:0.2px; }
.navlinks span.active { color:#d18cff; border-bottom:2px solid #d18cff; padding-bottom:26px; }
.navcta { background:#d18cff; color:#fff; border-radius:9999px; padding:12px 24px; font-size:14px; font-weight:600; }
.hero { background:#f6e6df; padding:32px; display:flex; align-items:center; gap:28px; }
.heroText { flex:1; }
.headline { font-size:32px; font-weight:600; letter-spacing:-0.5px; line-height:1.25; max-width:420px; margin-bottom:14px; }
.heroBtn { display:inline-block; background:#d18cff; color:#fff; border-radius:9999px; padding:14px 28px; font-size:16px; font-weight:600; }
.heroImg { flex:1; height:150px; border-radius:16px; background:radial-gradient(circle at 40% 40%,#ffb71b,#d18cff 70%); position:relative; }
.heroImg::after { content:''; position:absolute; right:20px; bottom:16px; width:56px; height:56px; border-radius:50%; background:#19d3c5; }
.section { padding:22px 32px 0; }
.section h2 { font-size:24px; font-weight:600; margin-bottom:16px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { background:#fff; border-radius:16px; box-shadow:0 2px 8px rgba(0,0,0,0.06); overflow:hidden; }
.photo { aspect-ratio:1/1; position:relative; }
.c1 { background:linear-gradient(150deg,#d18cff,#fb96d8); }
.c2 { background:linear-gradient(150deg,#ffb71b,#f3584c); }
.c3 { background:linear-gradient(150deg,#19d3c5,#74bedd); }
.c4 { background:linear-gradient(150deg,#fb96d8,#d18cff); }
.badge { position:absolute; top:8px; left:8px; background:#f3584c; color:#fff; font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:0.5px; border-radius:4px; padding:4px 8px; }
.badge.new { background:#19d3c5; }
.cardBody { padding:8px 16px 16px; }
.name { font-size:16px; font-weight:600; }
.price { font-size:16px; color:#444; margin-top:2px; }
</style></head>
<body>
<nav>
<div class="brand">Goldieblox</div>
<div class="navlinks"><span class="active">Shop</span><span>Girls</span><span>Builders</span><span>About</span></div>
<div class="navcta">Add to Cart</div>
</nav>
<div class="hero">
<div class="heroText">
<div class="headline">Engineering is for everyone.</div>
<div class="heroBtn">Shop Building Sets</div>
</div>
<div class="heroImg"></div>
</div>
<div class="section">
<h2>Shop New Arrivals</h2>
<div class="grid">
<div class="card"><div class="photo c1"><div class="badge">Sale</div></div><div class="cardBody"><div class="name">Zip Line Builder Set</div><div class="price">$29.99</div></div></div>
<div class="card"><div class="photo c2"><div class="badge new">New</div></div><div class="cardBody"><div class="name">Spinning Machine Kit</div><div class="price">$24.99</div></div></div>
<div class="card"><div class="photo c3"></div><div class="cardBody"><div class="name">Dunk Tank Engineering Set</div><div class="price">$34.99</div></div></div>
<div class="card"><div class="photo c4"></div><div class="cardBody"><div class="name">Movie Maker Building Set</div><div class="price">$27.99</div></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf9f6; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf9f6; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7a7978; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #faf9f6; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #faf9f6; color: #111111;
border: 1px solid #d5d4d1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7978; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fbfaf7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FAF9F6; color:#221E1F; box-sizing:border-box;
font-family:'Lato', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topnav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.neigh { font-size:18px; font-weight:700; display:flex; align-items:center; gap:6px; }
.neigh .chev { color:#6B6864; font-size:12px; }
.navicons { display:flex; gap:16px; color:#6B6864; font-size:16px; }
.chiprow { display:flex; gap:8px; padding:0 24px 12px; }
.chip { padding:7px 16px; border-radius:999px; font-size:13px; font-weight:700; background:#F2F0EB; color:#221E1F; }
.chip.active { background:#00B246; color:#fff; }
.shell { display:flex; gap:16px; padding:0 24px; }
.feed { width:420px; display:flex; flex-direction:column; gap:12px; }
.card { background:#FFFFFF; border:1px solid #E4E2DD; border-radius:16px; padding:16px; box-shadow: rgba(34,30,31,0.06) 0 1px 3px; }
.card-head { display:flex; align-items:center; gap:10px; }
.avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#a7d7b9,#6bb98b); flex:none; }
.cname { font-size:15px; font-weight:700; display:flex; align-items:center; gap:5px; }
.verified { width:12px; height:12px; border-radius:50%; background:#00B246; display:inline-block; }
.cloc { font-size:12px; color:#6B6864; margin-top:1px; }
.cbody { font-size:14px; line-height:1.4; margin:10px 0; color:#221E1F; }
.cfoot { display:flex; gap:18px; border-top:1px solid #E4E2DD; padding-top:8px; font-size:12px; font-weight:700; color:#6B6864; }
.cfoot span.active { color:#00B246; }
.map-panel { flex:1; position:relative; border-radius:16px; overflow:hidden; height:560px;
background: linear-gradient(180deg,#e9ecdf,#dfe6d2); }
.map-panel::before { content:''; position:absolute; inset:0;
background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.03) 0 1px, transparent 1px 40px),
repeating-linear-gradient(90deg, rgba(0,0,0,0.03) 0 1px, transparent 1px 40px); }
.pin { position:absolute; width:30px; height:30px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
display:flex; align-items:center; justify-content:center; box-shadow: rgba(34,30,31,0.25) 0 2px 6px; }
.pin span { transform:rotate(45deg); font-size:11px; font-weight:700; color:#fff; }
.pin.green { background:#00B246; top:90px; left:70px; }
.pin.blue { background:#1B6FB3; top:220px; left:180px; }
.pin.purple { background:#6E4FA3; top:150px; left:280px; }
.pin.amber { background:#E58A00; top:330px; left:110px; }
.pin.sel { background:#00B246; top:260px; left:60px; transform:rotate(-45deg) scale(1.15); border:3px solid #fff; }
.peek { position:absolute; left:16px; right:16px; bottom:16px; background:#fff; border-radius:16px; padding:14px 16px;
box-shadow: rgba(34,30,31,0.15) 0 -6px 20px; }
.peek .t { font-size:14px; font-weight:700; }
.peek .s { font-size:12px; color:#6B6864; margin-top:2px; }
.fab { position:absolute; right:20px; bottom:200px; width:56px; height:56px; border-radius:50%; background:#00B246;
display:flex; align-items:center; justify-content:center; color:#fff; font-size:24px; box-shadow: rgba(0,178,70,0.32) 0 6px 18px; }
</style></head>
<body>
<div class="topnav">
<div class="neigh">Nextdoor (iOS) <span class="chev">▾</span></div>
<div class="navicons">🔍 ⚑</div>
</div>
<div class="chiprow">
<div class="chip active">All</div>
<div class="chip">Recommendations</div>
<div class="chip">For Sale & Free</div>
<div class="chip">Events</div>
<div class="chip">Crime & Safety</div>
</div>
<div class="shell">
<div class="feed">
<div class="card">
<div class="card-head">
<div class="avatar"></div>
<div>
<div class="cname">Dana R. <span class="verified"></span></div>
<div class="cloc">0.3 mi · Maple Heights · 2h</div>
</div>
</div>
<div class="cbody">Anyone have a recommendation for a reliable plumber near Maple Heights? Small leak under the kitchen sink.</div>
<div class="cfoot"><span class="active">React · 12</span><span>Reply</span><span>Share</span></div>
</div>
<div class="card">
<div class="card-head">
<div class="avatar" style="background:linear-gradient(135deg,#f2c9a0,#e0955a)"></div>
<div>
<div class="cname">Marcus T. <span class="verified"></span></div>
<div class="cloc">0.6 mi · Maple Heights · 5h</div>
</div>
</div>
<div class="cbody">Free moving boxes on the curb at 214 Birchwood — first come first served!</div>
<div class="cfoot"><span>React · 4</span><span>Reply</span><span>Share</span></div>
</div>
<div class="card">
<div class="card-head">
<div class="avatar" style="background:linear-gradient(135deg,#bcd7f2,#6ea8e0)"></div>
<div>
<div class="cname">Priya S.</div>
<div class="cloc">0.9 mi · Maple Heights · 1d</div>
</div>
</div>
<div class="cbody">Neighborhood cleanup this Saturday at 9am, meeting at the park entrance. Coffee and donuts provided!</div>
<div class="cfoot"><span>React · 21</span><span>Reply</span><span>Share</span></div>
</div>
</div>
<div class="map-panel">
<div class="pin green"><span>$</span></div>
<div class="pin blue"><span>●</span></div>
<div class="pin purple"><span>$</span></div>
<div class="pin amber"><span>!</span></div>
<div class="pin sel"><span>★</span></div>
<div class="peek">
<div class="t">Free moving boxes</div>
<div class="s">214 Birchwood Ave · Posted 5h ago</div>
</div>
<div class="fab">+</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.2; background: #eec703; color: #212121;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.2; background: #ffffff; color: #5b0a69;
border: 1px solid #eec703; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #212121;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #eec703; color: #212121;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;color:#3a3a3a;font-family:'Open Sans',Arial,sans-serif;}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#29358e;}
.logo{font-family:'Itim','Comic Neue',cursive;font-size:26px;color:#eec703;letter-spacing:.5px;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:700;color:#fff;}
.navlinks span:nth-child(1){color:#f16d00;}
.navlinks span:nth-child(2){color:#b9cc1a;}
.navlinks span:nth-child(3){color:#027acd;}
.navlinks span:nth-child(4){color:#cc007b;}
.hero{background:#eec703;padding:24px 28px;display:flex;align-items:center;gap:30px;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;width:200px;height:200px;background:#f16d00;border-radius:50%;top:-100px;right:-60px;opacity:.5;}
.hero::after{content:'';position:absolute;width:120px;height:120px;background:#cc007b;border-radius:50%;bottom:-70px;left:120px;opacity:.4;}
.hero-txt{position:relative;z-index:1;}
.hero-txt h1{font-family:'Itim','Comic Neue',cursive;font-size:34px;color:#5b0a69;margin:0 0 8px;}
.hero-txt p{font-size:13px;color:#3a3a3a;margin:0 0 14px;max-width:380px;font-weight:600;}
.cta{background:#5b0a69;color:#fff;padding:12px 26px;border-radius:8px;font-weight:700;font-size:13px;position:relative;z-index:1;display:inline-block;}
.dice{position:relative;z-index:1;width:110px;height:110px;background:#fff;border-radius:16px;box-shadow:0 10px 20px rgba(0,0,0,.15);display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px;}
.dice i{width:100%;padding-top:100%;border-radius:50%;}
.dice i:nth-child(1),.dice i:nth-child(5),.dice i:nth-child(9){background:#29358e;}
.dice i:nth-child(2),.dice i:nth-child(4),.dice i:nth-child(6),.dice i:nth-child(8){background:transparent;}
.dice i:nth-child(3){background:#f16d00;}
.dice i:nth-child(7){background:#1da120;}
.strip{display:flex;gap:8px;padding:14px 28px 4px;}
.chip{border-radius:999px;padding:6px 16px;font-size:11px;font-weight:800;color:#fff;}
.c1{background:#027acd;}.c2{background:#cc007b;}.c3{background:#1da120;}.c4{background:#f16d00;}.c5{background:#5b0a69;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:14px 28px;}
.card{background:#fff;border:2px solid #eeeeee;border-radius:12px;padding:10px;}
.box{height:88px;border-radius:8px;margin-bottom:8px;}
.b1{background:linear-gradient(135deg,#027acd,#1292d3);}
.b2{background:linear-gradient(135deg,#cc007b,#e0409f);}
.b3{background:linear-gradient(135deg,#1da120,#32a93a);}
.b4{background:linear-gradient(135deg,#f16d00,#f28019);}
.name{font-family:'Itim','Comic Neue',cursive;font-size:15px;color:#212121;margin:0 0 3px;}
.age{font-size:10px;color:#888;font-weight:700;margin:0 0 5px;}
.price{font-size:14px;font-weight:800;color:#5b0a69;}
</style>
<div class="nav">
<div class="logo">Gamewright</div>
<div class="navlinks"><span>Card Games</span><span>Board Games</span><span>Kids 4+</span><span>Award Winners</span></div>
</div>
<div class="hero">
<div class="hero-txt">
<h1>Games the whole family fights over</h1>
<p>Award-winning card and board games for players 4 and up — easy to learn, impossible to put down.</p>
<a class="cta">Shop All Games</a>
</div>
<div class="dice"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
</div>
<div class="strip">
<div class="chip c1">New Releases</div><div class="chip c2">Family Favorites</div><div class="chip c3">Ages 4-7</div><div class="chip c4">Strategy</div><div class="chip c5">Award Winners</div>
</div>
<div class="grid">
<div class="card"><div class="box b1"></div><div class="name">Sleeping Queens</div><div class="age">Ages 8+ · 2-5 Players</div><div class="price">$12.99</div></div>
<div class="card"><div class="box b2"></div><div class="name">Rat-a-Tat Cat</div><div class="age">Ages 6+ · 2-6 Players</div><div class="price">$9.99</div></div>
<div class="card"><div class="box b3"></div><div class="name">Forbidden Island</div><div class="age">Ages 10+ · 2-4 Players</div><div class="price">$19.99</div></div>
<div class="card"><div class="box b4"></div><div class="name">Qwirkle</div><div class="age">Ages 6+ · 2-4 Players</div><div class="price">$24.99</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.3px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #0063cc; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #ffffff; color: #0063cc;
border: 1px solid #0063cc; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.2; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #eef2f7; color: #333333;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#ffffff; color:#111111; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e5e7eb;}
.logo{font-size:17px;font-weight:700;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#111111;}
.navcta{background:#111111;color:#fff;font-size:13px;font-weight:600;padding:8px 16px;border-radius:8px;}
.finder{background:#f5f7fa;border-bottom:1px solid #e5e7eb;height:48px;display:flex;align-items:center;gap:18px;padding:0 36px;}
.finder .tab{font-size:13px;font-weight:500;color:#6b7280;padding:8px 0;}
.finder .tab.a{color:#0063cc;border-bottom:2px solid #0063cc;}
.hero{height:200px;background:#f5f7fa;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.herotext{max-width:400px;}
.herotext h1{font-size:30px;font-weight:700;letter-spacing:-.4px;margin:0 0 10px;}
.herotext p{font-size:14px;color:#333333;margin:0 0 14px;}
.hbtn{display:inline-block;background:#111111;color:#fff;font-size:14px;font-weight:600;padding:11px 22px;border-radius:8px;}
.phone{width:120px;height:190px;border-radius:14px;background:linear-gradient(150deg,#eef2f7,#c9d5e0);position:relative;box-shadow:0 10px 24px rgba(0,0,0,.1);}
.phone:after{content:'';position:absolute;left:8px;top:8px;right:8px;bottom:8px;border-radius:10px;border:2px solid #0063cc;opacity:.5;}
.sec{padding:18px 36px 0;}
.sectitle{font-size:16px;font-weight:600;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:196px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:12px;}
.thumb{height:88px;background:#f5f7fa;border-radius:8px;margin-bottom:8px;}
.chips{display:flex;gap:4px;margin-bottom:6px;}
.chip{font-size:10px;font-weight:600;letter-spacing:.2px;text-transform:uppercase;padding:2px 6px;border-radius:4px;background:#eef2f7;color:#333333;}
.chip.fit{background:#dcfce7;color:#16a34a;}
.ptitle{font-size:13px;font-weight:600;}
.pprice{font-size:16px;font-weight:700;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:0;}
</style>
<div class="wrap">
<div class="nav"><div class="logo">Nuglas</div><div class="navlinks"><div>iPhone Cases</div><div>Screen Protectors</div><div>Chargers</div></div><div class="navcta">Find My Device</div></div>
<div class="finder"><div class="tab a">Apple</div><div class="tab">Samsung</div><div class="tab">Google</div><div class="tab">Other</div></div>
<div class="hero"><div class="herotext"><h1>Know it fits, before you buy.</h1><p>9H tempered glass engineered to vanish onto your exact display.</p><div class="hbtn">Shop iPhone 16</div></div><div class="phone"></div></div>
<div class="sec">
<div class="sectitle">Fits: iPhone 16 Pro</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="chips"><span class="chip">9H Hardness</span><span class="chip fit">Fits iPhone 16 Pro</span></div><div class="ptitle">Edge-to-Edge Screen Glass</div><div class="pprice">$19.99</div></div>
<div class="card"><div class="thumb"></div><div class="chips"><span class="chip">Anti-Fingerprint</span><span class="chip fit">Fits iPhone 16 Pro</span></div><div class="ptitle">Privacy Screen Glass</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="thumb"></div><div class="chips"><span class="chip">2-Pack</span><span class="chip fit">Fits iPhone 16 Pro</span></div><div class="ptitle">Camera Lens Protector</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb"></div><div class="chips"><span class="chip">Install Kit</span><span class="chip fit">Fits iPhone 16 Pro</span></div><div class="ptitle">Full Body Shield Kit</div><div class="pprice">$29.99</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #eeeeee; color: #111111;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #111111;
border: 1px solid #eeeeee; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f5f5f5; color: #666666;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:48px;border-bottom:1px solid #dddddd;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:18px;font-weight:600;color:#111111;}
.navlinks{display:flex;gap:18px;font-size:14px;font-weight:600;color:#111111;}
.navlinks div:first-child{border-bottom:2px solid #111111;padding-bottom:2px;}
.catstrip{display:flex;gap:6px;padding:8px 30px;border-bottom:1px solid #dddddd;}
.cattab{font-size:12px;color:#666;padding:4px 12px;border-radius:4px;}
.cattab.active{background:#eeeeee;color:#111;}
.secTitle{font-size:20px;font-weight:600;padding:18px 30px 10px;}
.grid{display:flex;gap:12px;padding:0 30px;}
.card{width:198px;background:#fff;border:1px solid #e5e5e5;border-radius:4px;padding:8px;}
.thumb{height:96px;border-radius:2px;margin-bottom:8px;position:relative;}
.condbadge{position:absolute;top:6px;left:6px;background:#f5f5f5;color:#666;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:2px;}
.usedbadge{position:absolute;top:6px;right:6px;background:#ff8800;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:2px;}
.ctitle{font-size:14px;font-weight:600;}
.cprice{font-size:16px;font-weight:700;margin-top:4px;}
.ccond{font-size:11px;color:#666;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#f5f5f5;border-top:1px solid #dddddd;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#666;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Silver Platters Independ 2</div>
<div class="navlinks"><div>Vinyl</div><div>CDs</div><div>Turntables</div></div>
</div>
<div class="catstrip">
<div class="cattab active">Rock</div>
<div class="cattab">Jazz</div>
<div class="cattab">Classical</div>
<div class="cattab">Hip-Hop</div>
<div class="cattab">Soundtracks</div>
</div>
<div class="secTitle">Rock & Used Bins</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e0e0e0,#999);"><div class="condbadge">VG+</div></div><div class="ctitle">Roadside Static LP</div><div class="cprice">$18.00</div><div class="ccond">Condition: VG+</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d5d5d5,#8a8a8a);"><div class="usedbadge">Used</div></div><div class="ctitle">Backyard Sessions LP</div><div class="cprice">$9.50</div><div class="ccond">Condition: Good</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#cfcfcf,#7a7a7a);"><div class="condbadge">Mint</div></div><div class="ctitle">Static Blue Reissue</div><div class="cprice">$32.00</div><div class="ccond">Condition: Mint</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e5e5e5,#a0a0a0);"></div><div class="ctitle">Concrete Floor Live</div><div class="cprice">$21.00</div><div class="ccond">Condition: New</div></div>
</div>
<div class="footer"><span>© Silver Platters Independ 2</span><span>Sell Your Collection · Store Hours</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0ac290; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0ac290; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0170b9; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0ac290; color: #000000;
border: 1px solid #0170b9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0ac290; color: #000000;
border: 1px solid #30caa0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #09b597; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
/* nav */
nav { height:56px; flex:0 0 56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #dfdfdf; background:#ffffff; }
.brand { font-size:18px; font-weight:700; letter-spacing:-0.3px; color:#000000; margin:0; }
.navlinks { display:flex; gap:26px; font-size:14px; font-weight:500; color:#000000; }
.navlinks span:first-child { color:#0ac290; }
.cta { background:#0ac290; color:#ffffff; border:none; border-radius:10px; height:34px;
padding:0 22px; font-size:13px; font-weight:700; white-space:nowrap; }
/* hero — dark photographic band, simulated */
.hero { flex:0 0 232px; position:relative; overflow:hidden;
background:
radial-gradient(circle at 15% 20%, rgba(10,194,144,0.28) 0%, rgba(10,194,144,0) 45%),
radial-gradient(circle at 85% 80%, rgba(1,112,185,0.30) 0%, rgba(1,112,185,0) 50%),
linear-gradient(135deg, #181b1e 0%, #101214 100%);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
padding:0 60px; text-align:center; }
.hero .fold { position:absolute; width:420px; height:420px; border-radius:50%;
border:1px solid rgba(255,255,255,0.06); top:-180px; right:-140px; }
.hero .fold2 { position:absolute; width:280px; height:280px; border-radius:50%;
border:1px solid rgba(255,255,255,0.05); bottom:-160px; left:-80px; }
.eyebrow { color:#0ac290; font-size:14px; font-weight:700; letter-spacing:0.02em; position:relative; z-index:1; }
.hero h1 { color:#ffffff; font-size:32px; font-weight:600; line-height:1.2; margin:0; max-width:560px; position:relative; z-index:1; }
.hero p { color:#c7cbce; font-size:14px; font-weight:400; margin:0; max-width:480px; position:relative; z-index:1; }
.hero .row { display:flex; gap:10px; position:relative; z-index:1; margin-top:2px; }
.btn-hero-primary { background:#0ac290; color:#ffffff; border:none; border-radius:10px; height:40px;
padding:0 26px; font-size:14px; font-weight:700; }
.btn-hero-muted { background:#dfdfdf; color:#60646a; border:none; border-radius:10px; height:40px;
padding:0 26px; font-size:14px; font-weight:500; }
/* service section */
.services { flex:0 0 200px; padding:20px 40px 8px; display:flex; flex-direction:column; gap:12px; background:#ffffff; }
.services .sec-eyebrow { color:#0ac290; font-size:13px; font-weight:700; letter-spacing:0.02em; }
.cardrow { display:flex; gap:18px; }
.scard { flex:1; background:#ffffff; border:1px solid #dfdfdf; border-radius:20px; padding:16px 18px;
display:flex; flex-direction:column; gap:6px; }
.scard .chip { width:34px; height:34px; border-radius:10px; }
.scard.c1 .chip { background:#0ac290; }
.scard.c2 .chip { background:#0170b9; }
.scard.c3 .chip { background:#ecebdc; }
.scard h3 { font-size:16px; font-weight:600; margin:6px 0 0; color:#000000; }
.scard p { font-size:12px; color:#4b4b4b; margin:0; line-height:1.5; }
/* stat band */
.stats { flex:0 0 108px; background:#181b1e; display:flex; align-items:center; justify-content:space-around;
padding:0 40px; }
.stat { text-align:center; }
.stat .num { color:#ffffff; font-size:22px; font-weight:700; }
.stat .num span { color:#0ac290; }
.stat .lbl { color:#888c8e; font-size:11px; font-weight:500; margin-top:4px; letter-spacing:0.02em; }
footer { flex:1 1 auto; min-height:44px; border-top:1px solid #dfdfdf; background:#ffffff;
display:flex; align-items:center; justify-content:space-between; padding:0 40px;
font-size:12px; color:#888c8e; }
</style></head>
<body>
<nav>
<p class="brand">LaundryGo</p>
<div class="navlinks"><span>Company</span><span>Business</span><span>Culture</span><span>Careers</span></div>
<button class="cta">Contact Us</button>
</nav>
<section class="hero">
<div class="fold"></div>
<div class="fold2"></div>
<span class="eyebrow">VISION</span>
<h1>Building the innovation of everyday clothing, food, and living.</h1>
<p>Drop your laundry into the collection box before 10pm — get it back clean before noon the next day.</p>
<div class="row">
<button class="btn-hero-primary">See Open Roles</button>
<button class="btn-hero-muted">Visit Website</button>
</div>
</section>
<section class="services">
<span class="sec-eyebrow">OUR BUSINESS</span>
<div class="cardrow">
<div class="scard c1"><div class="chip"></div><h3>LaundryGo Pickup</h3><p>Contactless mobile laundry, collected and delivered on a nightly cycle.</p></div>
<div class="scard c2"><div class="chip"></div><h3>LaundryGo 24</h3><p>Smart self-service laundromats open around the clock in every neighborhood.</p></div>
<div class="scard c3"><div class="chip"></div><h3>Hotel & Business</h3><p>Large-scale linen and laundry infrastructure for premium hotel partners.</p></div>
</div>
</section>
<section class="stats">
<div class="stat"><div class="num"><span>2.4M+</span></div><div class="lbl">MEMBERS</div></div>
<div class="stat"><div class="num"><span>58M+</span></div><div class="lbl">LOADS WASHED</div></div>
<div class="stat"><div class="num"><span>11.2M+</span></div><div class="lbl">TOTAL ORDERS</div></div>
<div class="stat"><div class="num"><span>₩340B+</span></div><div class="lbl">TOTAL INVESTED</div></div>
</section>
<footer>
<span>© LaundryGo</span>
<span>LaundryGo · Business · Culture · Careers</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #111111; color: #f6f6f6;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #111111; color: #f6f6f6;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 300; line-height: 1.2; letter-spacing: -0.4px; margin: 0; color: #f6f6f6; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 1px; background: #f0523d; color: #ffffff;
border: none; border-radius: 2px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 1px; background: transparent; color: #f6f6f6;
border: 1px solid #f0523d; border-radius: 2px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #131313; color: #f6f6f6;
border: 1px solid #4a4a4a; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 1.2px; background: #301a17; color: #f0523d;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#111111; color:#f6f6f6; font-family:'proxima-nova', Helvetica Neue, Arial, sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #222222;}
.logo{font-size:20px;font-weight:300;letter-spacing:-0.5px;color:#f6f6f6;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#d0d0d0;}
.hero{height:220px;display:flex;background:#131313;}
.herotext{width:46%;padding:0 32px;display:flex;flex-direction:column;justify-content:center;}
.herotext .eyebrow{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#aaaaaa;margin-bottom:10px;}
.herotext h1{font-size:34px;font-weight:300;letter-spacing:-1px;margin:0 0 10px;color:#f6f6f6;}
.herotext p{font-size:13px;color:#aaaaaa;margin:0 0 16px;max-width:300px;line-height:1.5;}
.herocta{width:fit-content;background:#f0523d;color:#fff;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:12px 26px;border-radius:2px;}
.heroimg{width:54%;position:relative;background:#1c1c1c;overflow:hidden;}
.heroimg .cap{position:absolute;left:70px;top:60px;width:200px;height:100px;border-radius:2px;background:linear-gradient(135deg,#3e3e3e,#1c1c1c);}
.heroimg .key{position:absolute;width:26px;height:26px;border-radius:2px;background:#272727;border:1px solid #3e3e3e;}
.spectable{margin:16px 32px 0;background:#131313;border:1px solid #2f2f2f;border-radius:2px;}
.specrow{display:flex;justify-content:space-between;padding:8px 16px;border-bottom:1px solid #222222;}
.specrow:last-child{border-bottom:none;}
.speckey{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#aaaaaa;}
.specval{font-size:13px;color:#f6f6f6;font-family:'Inconsolata','Courier New',monospace;}
.grid{display:flex;gap:12px;padding:16px 32px 0;}
.card{width:150px;border:1px solid #222222;border-radius:2px;padding:12px;background:#1c1c1c;}
.thumb{height:88px;border-radius:2px;margin-bottom:8px;}
.ptitle{font-size:13px;font-weight:600;color:#f6f6f6;line-height:1.3;}
.pprice{font-size:15px;color:#d0d0d0;margin-top:6px;font-family:'Inconsolata','Courier New',monospace;}
.badge{display:inline-block;margin-top:6px;font-size:9px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;padding:2px 6px;background:#f0523d;color:#fff;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;color:#aaaaaa;border-top:1px solid #2f2f2f;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Rama Works</div>
<div class="navlinks"><div>Keyboards</div><div>Switches</div><div>Group Buys</div><div>Compatibility</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="eyebrow">Gasket-Mount Series</div>
<h1>Machined, not molded.</h1>
<p>CNC aluminum housings and hot-swap PCBs for enthusiasts who measure switch pre-travel in tenths of a millimeter.</p>
<div class="herocta">Enter Group Buy</div>
</div>
<div class="heroimg">
<div class="cap"></div>
<div class="key" style="left:90px;top:80px;"></div>
<div class="key" style="left:122px;top:80px;"></div>
<div class="key" style="left:154px;top:80px;"></div>
</div>
</div>
<div class="spectable">
<div class="specrow"><div class="speckey">Plate</div><div class="specval">6061 Aluminum</div></div>
<div class="specrow"><div class="speckey">Weight</div><div class="specval">2.84 kg</div></div>
<div class="specrow"><div class="speckey">Travel</div><div class="specval">4.0 mm</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3e3e3e,#1c1c1c);"></div><div class="ptitle">M6-B Aluminum</div><div class="pprice">$310.00</div><div class="badge">Limited</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#272727,#111111);"></div><div class="ptitle">U80-A Barebones</div><div class="pprice">$285.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3e3e3e,#272727);"></div><div class="ptitle">R2 Switch Set (70)</div><div class="pprice">$49.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1c1c1c,#3e3e3e);"></div><div class="ptitle">Coiled Cable — Coral</div><div class="pprice">$38.00</div></div>
</div>
<div class="footer"><span>© Machined for Typists</span><span>Spec Sheets Group Buy Status</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFDD00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFDD00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-size: 20px; font-weight:700; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-size: 12px; font-weight:400; line-height:1.4; margin: 0; color: #70630a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #FFDD00; color: #000000;
border: none; border-radius: 72; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #FFDD00; color: #000000;
border: 1px solid #FFDD00; border-radius: 72;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #FFDD00; color: #111111;
border: 1px solid #c4aa04; border-radius: 8;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #70630a; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #ffdd00; color: #000000;
border-radius: 72; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #FFFFFF; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
nav { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; background: #212121; }
.brand { font-size: 20px; font-weight: 800; color: #FFDD00; margin: 0; letter-spacing: -0.5px; }
.navlinks { display: flex; gap: 26px; }
.navlinks span { color: #F1F1F1; font-size: 13px; font-weight: 600; opacity: 0.85; }
.navlinks span.active { color: #FFDD00; opacity: 1; }
.cta { background: #FC4C02; color: #fff; border: none; border-radius: 72px; padding: 10px 22px; font-weight: 700; font-size: 13px; }
.main { display: flex; height: 576px; }
.left { width: 420px; padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; gap: 16px; background: #FFDD00; position: relative; }
.left::after { content: ''; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; background: rgba(0,0,0,0.06); border-radius: 50%; }
.tagline { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #212121; opacity: 0.6; }
.left h1 { font-size: 40px; font-weight: 800; color: #212121; margin: 0; line-height: 1.05; letter-spacing: -1px; }
.left p { font-size: 15px; color: #3C2F38; margin: 0; max-width: 320px; line-height: 1.5; }
.rowbtn { display: flex; gap: 10px; margin-top: 8px; }
.btn-dark { background: #212121; color: #fff; border: none; border-radius: 72px; padding: 12px 24px; font-weight: 700; font-size: 14px; }
.btn-outline { background: transparent; color: #212121; border: 1.5px solid #212121; border-radius: 72px; padding: 11px 24px; font-weight: 700; font-size: 14px; }
.right { flex: 1; background: #F1F1F1; padding: 32px; display: flex; align-items: center; justify-content: center; }
.phone { width: 300px; height: 480px; background: linear-gradient(160deg, #FFE433 0%, #FFDD00 40%, #F8C400 100%); border-radius: 40px; border: 8px solid #212121; position: relative; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.18); }
.map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.35) 1px, transparent 1px); background-size: 34px 34px; opacity: 0.6; }
.pin { position: absolute; width: 14px; height: 14px; background: #FC4C02; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #fff; }
.search-float { position: absolute; top: 22px; left: 16px; right: 16px; background: #fff; border-radius: 999px; padding: 12px 16px; font-size: 12px; font-weight: 700; color: #757575; box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
.pills { position: absolute; top: 72px; left: 16px; display: flex; gap: 8px; }
.pill { background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 10px; font-weight: 700; color: #212121; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.pill.on { background: #FC4C02; color: #fff; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 24px 24px 0 0; padding: 18px 20px 22px; box-shadow: 0 -8px 20px rgba(0,0,0,0.15); }
.handle { width: 40px; height: 4px; background: #E9E8E9; border-radius: 4px; margin: 0 auto 12px; }
.sheet-row { display: flex; justify-content: space-between; align-items: center; }
.sheet-row .name { font-size: 13px; font-weight: 700; color: #212121; }
.sheet-row .sub { font-size: 11px; color: #757575; margin-top: 2px; }
.price { font-size: 18px; font-weight: 800; color: #212121; }
.sheet-cta { margin-top: 14px; background: #FC4C02; color: #fff; text-align: center; border-radius: 999px; padding: 12px; font-weight: 700; font-size: 13px; }
.verticals { display: flex; gap: 0; height: 128px; }
.v { flex: 1; display: flex; align-items: center; gap: 14px; padding: 0 28px; }
.v .dot { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; }
.v h4 { margin: 0; font-size: 14px; font-weight: 700; color: #212121; }
.v p { margin: 2px 0 0; font-size: 11px; color: #757575; }
.v1 { background: #FFF9DB; } .v1 .dot { background: #FFDD00; }
.v2 { background: #FFF0E6; } .v2 .dot { background: #FC4C02; }
.v3 { background: #E8F3FC; } .v3 .dot { background: #1085D4; }
</style>
<nav>
<p class="brand">99</p>
<div class="navlinks"><span class="active">Rides</span><span>Food</span><span>Pay</span><span>Business</span></div>
<button class="cta">Get the app</button>
</nav>
<div class="main">
<div class="left">
<span class="tagline">Mobility · Brazil</span>
<h1>Go anywhere,<br>right now.</h1>
<p>Millions of drivers, one tap away. Rides, food and payments in a single super app.</p>
<div class="rowbtn">
<button class="btn-dark">Request a ride</button>
<button class="btn-outline">Drive with us</button>
</div>
</div>
<div class="right">
<div class="phone">
<div class="map-grid"></div>
<div class="pin" style="left:60px; top:180px;"></div>
<div class="pin" style="left:190px; top:120px;"></div>
<div class="pin" style="left:130px; top:250px;"></div>
<div class="search-float">Where to?</div>
<div class="pills"><span class="pill on">Pop</span><span class="pill">Plus</span><span class="pill">Moto</span></div>
<div class="sheet">
<div class="handle"></div>
<div class="sheet-row">
<div><div class="name">Pop · 4 min away</div><div class="sub">Arrives 14:32</div></div>
<div class="price">R$14,90</div>
</div>
<div class="sheet-cta">Confirm ride</div>
</div>
</div>
</div>
</div>
<div class="verticals">
<div class="v v1"><div class="dot"></div><div><h4>Rides</h4><p>Pop, Plus, Taxi & Moto</p></div></div>
<div class="v v2"><div class="dot"></div><div><h4>Food</h4><p>Delivery in minutes</p></div></div>
<div class="v v3"><div class="dot"></div><div><h4>Business</h4><p>Corporate travel</p></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfcfc; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfcfc; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cc0000; color: #ffffff;
border: none; border-radius: 2px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #444444;
border: 1px solid #cc0000; border-radius: 2px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c1c1c1; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #cc0000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{
width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;
background:#fcfcfc;font-family:Baskerville,'Baskerville Old Face',Georgia,serif;
color:#444444;
}
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.topbar{height:26px;background:#111111;color:#f6f6f6;font-size:11px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-family:Arial,Helvetica,sans-serif;}
.nav{height:52px;background:#ffffff;border-bottom:2px solid #cc0000;display:flex;align-items:center;justify-content:space-between;padding:0 20px;}
.logo{font-weight:700;font-size:19px;color:#111111;}
.logo span{color:#339933;}
.catbar{background:#2b2b2b;display:flex;gap:0;font-family:Arial,Helvetica,sans-serif;}
.catbar span{color:#f6f6f6;font-size:11px;padding:8px 14px;border-right:1px solid #444;}
.catbar span.active{background:#585858;}
.hero{display:flex;gap:0;}
.heroLeft{width:210px;background:#f6f6f6;border-right:1px solid #dcdcdc;padding:14px;font-family:Arial,Helvetica,sans-serif;}
.heroLeft h3{font-size:11px;text-transform:uppercase;color:#777;margin:0 0 8px;font-weight:700;}
.heroLeft div.f{font-size:11px;color:#444;padding:6px 0;border-bottom:1px solid #eee;}
.heroRight{flex:1;padding:18px 20px;}
.heroRight h1{font-size:24px;font-weight:700;color:#111111;margin:0 0 8px;}
.heroRight p{font-size:13px;color:#444444;line-height:1.5;margin:0 0 12px;max-width:480px;font-family:Arial,Helvetica,sans-serif;}
.heroBtn{display:inline-block;background:#cc0000;color:#fff;font-size:12px;font-weight:700;padding:9px 18px;border-radius:2px;font-family:Arial,Helvetica,sans-serif;}
.table{margin-top:14px;border:1px solid #dcdcdc;background:#ffffff;font-family:Arial,Helvetica,sans-serif;}
.trow{display:flex;font-size:11px;border-bottom:1px solid #eeeeee;}
.trow div{padding:6px 10px;flex:1;color:#444;}
.trow.head div{background:#f3f3f3;font-weight:700;color:#111;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 20px;}
.card{border:1px solid #dcdcdc;background:#ffffff;padding:8px;font-family:Arial,Helvetica,sans-serif;}
.photo{aspect-ratio:1/1;background:linear-gradient(160deg,#eeeeee,#dcdcdc);position:relative;margin-bottom:6px;}
.photo .arch{position:absolute;bottom:10%;left:15%;right:15%;top:20%;border:3px solid #339933;border-radius:40px 40px 4px 4px;background:rgba(51,153,51,0.08);}
.ctitle{font-size:11px;font-weight:700;color:#111;margin-bottom:2px;}
.cprice{font-size:12px;font-weight:700;color:#cc0000;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#2b2b2b;color:#dcdcdc;font-size:10px;padding:8px 20px;font-family:Arial,Helvetica,sans-serif;display:flex;justify-content:space-between;}
</style>
<div class="wrap">
<div class="topbar"><span>Since 1946 · Mobile, Alabama</span><span>Weather-Tested Glazing · Free Freight Quotes</span></div>
<div class="nav"><div class="logo">Gothic Arch<span> Greenhouses</span></div></div>
<div class="catbar">
<span class="active">Greenhouses</span><span>Cold Frames</span><span>Glazing</span><span>Raised Beds</span><span>Accessories</span><span>Commercial</span>
</div>
<div class="hero">
<div class="heroLeft">
<h3>Filter By</h3>
<div class="f">Frame Gauge</div>
<div class="f">Glazing Type</div>
<div class="f">Panel Width</div>
<div class="f">Roof Style</div>
<div class="f">Foundation Kit</div>
</div>
<div class="heroRight">
<h1>Built for real weather, not a showroom.</h1>
<p>Commercial-grade greenhouse kits, glazing panels, and cold frames — engineered and tested against Alabama's own gulf-coast heat and hail.</p>
<div class="heroBtn">Request A Quote</div>
<div class="table">
<div class="trow head"><div>Model</div><div>Frame Gauge</div><div>Max Snow Load</div><div>Price</div></div>
<div class="trow"><div>GA-1200 Series</div><div>14ga</div><div>25 psf</div><div>$4,120</div></div>
<div class="trow"><div>GA-820 Standard</div><div>16ga</div><div>20 psf</div><div>$2,860</div></div>
</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="photo"><div class="arch"></div></div><div class="ctitle">GA-820 Standard Kit</div><div class="cprice">$2,860.00</div></div>
<div class="card"><div class="photo"><div class="arch"></div></div><div class="ctitle">Twin-Wall Polycarbonate Panel</div><div class="cprice">$68.00 / panel</div></div>
<div class="card"><div class="photo"><div class="arch"></div></div><div class="ctitle">Cold Frame — 4ft</div><div class="cprice">$319.00</div></div>
<div class="card"><div class="photo"><div class="arch"></div></div><div class="ctitle">Foundation Anchor Kit</div><div class="cprice">$145.00</div></div>
</div>
<div class="footer"><span>© Gothic Arch Greenhouses, Inc.</span><span>Commercial Sales · (800) 555-0146</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f0e8; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f0e8; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.18; letter-spacing: -0.25px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.5px; background: #1a2a3a; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.5px; background: #f5f0e8; color: #1a2a3a;
border: 1px solid #1a2a3a; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.625; background: #f5f0e8; color: #2c2c2c;
border: 1px solid #bebab4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #c9a84c; color: #1a1a1a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f0e8; color:#1a1a1a; box-sizing:border-box;
font-family:'Montserrat','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:center; position:relative; padding:0 32px; }
.brand { font-family:'Industry','Arial Narrow',sans-serif; font-size:22px; font-weight:700; letter-spacing:-0.5px; }
.navlinks { position:absolute; left:32px; display:flex; gap:20px; }
.navlinks span { font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; }
.navcta { position:absolute; right:32px; font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; }
.hero { background:#1a2a3a; color:#fff; min-height:220px; display:flex; align-items:center; padding:0 32px; gap:28px; }
.heroText { flex:1; }
.headline { font-family:'Industry','Arial Narrow',sans-serif; font-size:44px; font-weight:700; letter-spacing:-1.5px;
line-height:1.08; margin-bottom:12px; }
.sub { font-size:16px; color:#9a9a9a; margin-bottom:18px; max-width:340px; }
.heroBtn { display:inline-block; background:#c9a84c; color:#1a1a1a; border-radius:8px; padding:14px 32px; font-size:15px;
font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.heroImg { flex:1; height:150px; border-radius:50%; background:radial-gradient(circle,#1a1a1a 30%,#c9a84c 32%,#1a1a1a 34%,#1a1a1a 60%,#c9a84c 62%,#1a1a1a 64%); }
.section { padding:24px 32px 0; }
.section h2 { font-family:'Industry','Arial Narrow',sans-serif; font-size:28px; font-weight:600; letter-spacing:-0.5px; margin-bottom:16px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#fff; border-radius:12px; padding:16px; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.photo { aspect-ratio:1/1; border-radius:8px; margin-bottom:10px; position:relative; }
.photo.c1 { background:linear-gradient(150deg,#1a2a3a,#0f1c28); }
.photo.c2 { background:linear-gradient(150deg,#c9a84c,#8a6a2a); }
.photo.c3 { background:linear-gradient(150deg,#8a2a2a,#3a1010); }
.badge { position:absolute; top:8px; left:8px; background:#c9a84c; color:#1a1a1a; font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:0.5px; border-radius:2px; padding:2px 8px; }
.name { font-size:16px; font-weight:600; margin-top:6px; }
.price { font-size:16px; font-weight:600; }
</style></head>
<body>
<nav>
<div class="navlinks"><span>About</span><span>Services</span></div>
<div class="brand">Gold Rush Vinyl</div>
<div class="navcta">Contact</div>
</nav>
<div class="hero">
<div class="heroText">
<div class="headline">Pressed in America.</div>
<div class="sub">Full-service vinyl pressing for independent labels and artists.</div>
<div class="heroBtn">Get a Quote</div>
</div>
<div class="heroImg"></div>
</div>
<div class="section">
<h2>Featured Pressings</h2>
<div class="grid">
<div class="card"><div class="photo c1"><div class="badge">New</div></div><div class="name">Midnight Static — LP</div><div class="price">$28.00</div></div>
<div class="card"><div class="photo c2"></div><div class="name">Gold Dust Sessions</div><div class="price">$32.00</div></div>
<div class="card"><div class="photo c3"></div><div class="name">Red Clay Roots</div><div class="price">$24.00</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #151522;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #151522;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #151522; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #2f7efe; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #151522;
border: 1px solid #2f7efe; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #151522;
border: 1px solid #c4c4c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #2f7efe; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'On','Suisse Works',-apple-system,system-ui,sans-serif; color:#4d4d4d; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dad8d2;}
.logo{font-size:20px;font-weight:700;color:#151522;letter-spacing:.3px;}
.navlinks{display:flex;gap:26px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:#151522;}
.navcta{background:#2f7efe;color:#fff;font-size:12px;font-weight:700;padding:10px 18px;border-radius:9999px;}
.hero{height:236px;display:flex;background:#f0eceb;}
.herotext{width:440px;padding:30px 40px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#2f7efe;margin-bottom:12px;}
.h1{font-size:30px;font-weight:700;line-height:1.2;letter-spacing:-.5px;color:#151522;margin:0 0 12px;}
.sub{font-size:14px;color:#4d4d4d;margin:0 0 18px;max-width:340px;}
.btn{width:150px;text-align:center;background:#151522;color:#fff;font-size:13px;font-weight:700;padding:12px 0;border-radius:9999px;}
.heroimg{flex:1;position:relative;background:#faf7f6;}
.shoe{position:absolute;bottom:60px;left:70px;width:200px;height:60px;background:linear-gradient(100deg,#151522 0%,#151522 40%,#2f7efe 100%);border-radius:30px 40px 40px 10px;}
.sole{position:absolute;bottom:48px;left:70px;width:200px;height:14px;background:#e2fbb1;border-radius:0 0 20px 4px;}
.tag{position:absolute;top:24px;right:36px;background:#ed0000;color:#fff;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:5px 10px;border-radius:9999px;}
.strip{display:flex;gap:1px;background:#dad8d2;}
.cell{flex:1;background:#f7f7f7;text-align:center;padding:9px;}
.clabel{font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#7a7a7a;}
.cval{font-size:13px;color:#151522;margin-top:2px;font-weight:700;}
.sec{padding:16px 40px 0;}
.sectitle{font-size:13px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#151522;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:154px;border:1px solid #dad8d2;border-radius:8px;padding:9px;background:#fff;}
.thumb{height:96px;border-radius:6px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:600;line-height:1.3;height:30px;overflow:hidden;color:#151522;}
.pprice{font-size:13px;font-weight:700;color:#151522;margin-top:3px;}
</style>
<div class="nav">
<div class="logo">ON</div>
<div class="navlinks"><span>Running</span><span>Trail</span><span>Cloud</span><span>Apparel</span></div>
<div class="navcta">Shop CloudMonster</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Engineered In Switzerland</div>
<div class="h1">Run soft.<br>Land explosive.</div>
<div class="sub">CloudTec® cushioning that compresses on impact and explodes into your next stride.</div>
<div class="btn">Shop Running</div>
</div>
<div class="heroimg"><div class="shoe"></div><div class="sole"></div><div class="tag">New Drop</div></div>
</div>
<div class="strip">
<div class="cell"><div class="clabel">Cushioning</div><div class="cval">CloudTec®</div></div>
<div class="cell"><div class="clabel">Weight</div><div class="cval">240g</div></div>
<div class="cell"><div class="clabel">Drop</div><div class="cval">6mm</div></div>
<div class="cell"><div class="clabel">Use</div><div class="cval">Road / Trail</div></div>
</div>
<div class="sec">
<div class="sectitle">Shop The Drop</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#2f7efe,#151522)"></div><div class="pname">Cloudmonster 2</div><div class="pprice">$170.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#e2fbb1,#151522)"></div><div class="pname">Cloudsurfer</div><div class="pprice">$160.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#e15f14,#151522)"></div><div class="pname">Cloudvista Trail</div><div class="pprice">$150.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#494740,#2f7efe)"></div><div class="pname">Performance Running Tee</div><div class="pprice">$60.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 300; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.55; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.3; letter-spacing: 0.5px; background: #912eff; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #1a1a1a;
border: 1px solid #912eff; border-radius: 0px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 10px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #00ff00; color: #1a1a1a;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;color:#333333;font-family:'Lars FS GI Light',Arial,Helvetica,sans-serif;font-weight:300;}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-size:22px;font-weight:300;letter-spacing:3px;color:#1a1a1a;text-transform:uppercase;}
.navlinks{display:flex;gap:26px;font-size:11px;font-weight:300;letter-spacing:1px;text-transform:uppercase;color:#666666;}
.hero{background:#ccccff;margin:0 36px;border-radius:16px;padding:34px;display:flex;align-items:center;justify-content:space-between;gap:30px;}
.hero-txt{width:380px;}
.hero-txt h1{font-size:38px;font-weight:300;letter-spacing:1px;color:#1a1a1a;margin:0 0 14px;line-height:1.15;}
.hero-txt p{font-size:12px;color:#333333;margin:0 0 18px;letter-spacing:.3px;}
.cta{background:#912eff;color:#fff;padding:11px 28px;border-radius:2px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;display:inline-block;}
.orb{width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#51feff,#912eff 70%);position:relative;box-shadow:0 20px 40px rgba(145,46,255,.25);}
.orb::after{content:'';position:absolute;top:20px;left:20px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.5);filter:blur(6px);}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:26px 36px;}
.card{background:#ffffff;}
.box{height:100px;border-radius:4px;margin-bottom:10px;position:relative;}
.b1{background:linear-gradient(160deg,#912eff,#7a1fcc);}
.b2{background:linear-gradient(160deg,#51feff,#2ad4d4);}
.b3{background:linear-gradient(160deg,#ccccff,#a8a8e6);}
.b4{background:linear-gradient(160deg,#1a1a1a,#333333);}
.tag{position:absolute;top:8px;left:8px;font-size:8px;font-weight:700;padding:3px 7px;letter-spacing:.5px;text-transform:uppercase;}
.tagsold{background:#00ff00;color:#000;}
.tagpre{background:#ffff00;color:#000;}
.name{font-size:13px;font-weight:300;letter-spacing:.3px;color:#1a1a1a;margin:0 0 3px;}
.artist{font-size:10px;color:#999999;margin:0 0 6px;letter-spacing:.3px;}
.price{font-size:12px;font-weight:400;color:#912eff;}
</style>
<div class="nav">
<div class="logo">Ghostly International</div>
<div class="navlinks"><span>Vinyl</span><span>Merch</span><span>Artists</span><span>Journal</span></div>
</div>
<div class="hero">
<div class="hero-txt">
<h1>Records from the edge of sound</h1>
<p>An independent label for artists who don't fit the grid. Vinyl, merch, and everything in between.</p>
<a class="cta">Shop the Catalog</a>
</div>
<div class="orb"></div>
</div>
<div class="grid">
<div class="card"><div class="box b1"><span class="tag tagsold">Sold Out</span></div><div class="name">Ghostly Anniversary LP</div><div class="artist">Various Artists</div><div class="price">$34.00</div></div>
<div class="card"><div class="box b2"><span class="tag tagpre">Pre-Order</span></div><div class="name">Nocturne Sessions</div><div class="artist">Field Recordings</div><div class="price">$28.00</div></div>
<div class="card"><div class="box b3"></div><div class="name">Ghostly Logo Tee</div><div class="artist">Apparel</div><div class="price">$32.00</div></div>
<div class="card"><div class="box b4"></div><div class="name">Spectral Forms</div><div class="artist">Ambient Series</div><div class="price">$26.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcf7f4; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcf7f4; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #d96544; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fcf7f4; color: #222222;
border: 1px solid #d96544; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c6c2c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #e0b252; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fcf7f4; color:#3a2f2a; font-family:'Halant',Georgia,serif; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dedede;}
.logo{font-family:'Clearface',Georgia,serif;font-size:22px;font-weight:700;color:#d96544;}
.navlinks{display:flex;gap:24px;font-family:'New Atten','Trebuchet MS',sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;color:#3a2f2a;}
.searchpill{width:150px;height:34px;border-radius:9999px;border:1px solid #dedede;background:#fff;display:flex;align-items:center;padding:0 16px;font-size:11px;color:#b59677;font-family:'New Atten','Trebuchet MS',sans-serif;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;background:#ecced1;}
.htext{width:430px;}
.htext h1{font-family:'Clearface',Georgia,serif;font-size:32px;font-weight:700;line-height:1.25;margin:0 0 14px;color:#3a2f2a;}
.htext p{font-size:14px;color:#6b5a52;margin:0 0 20px;max-width:370px;}
.btn{display:inline-block;font-family:'New Atten','Trebuchet MS',sans-serif;background:#d96544;color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;padding:13px 26px;border-radius:8px;}
.garland{position:absolute;right:70px;top:50px;width:230px;height:170px;}
.balloon{position:absolute;width:56px;height:70px;border-radius:50% 50% 50% 50%/58% 58% 42% 42%;}
.b1{background:#d96544;top:10px;left:20px;}
.b2{background:#b59677;top:40px;left:90px;}
.b3{background:#fff;border:2px solid #ecced1;top:0;left:160px;}
.string{position:absolute;width:1px;height:40px;background:#b59677;}
.s1{top:80px;left:47px;}
.s2{top:110px;left:117px;}
.s3{top:70px;left:187px;}
.sec{padding:22px 40px 0;}
.sectitle{font-family:'Clearface',Georgia,serif;font-size:19px;font-weight:700;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:216px;border-radius:12px;background:#fff;border:1px solid #dedede;overflow:hidden;position:relative;}
.cardimg{width:100%;height:104px;background:#fcf7f4;border-radius:12px 12px 0 0;}
.cardbody{padding:12px;}
.cardtitle{font-size:14px;font-weight:600;}
.cardprice{font-family:'New Atten','Trebuchet MS',sans-serif;font-size:12px;color:#d96544;margin-top:4px;font-weight:700;}
.badge{position:absolute;top:8px;left:8px;background:#c9a15c;color:#fff;font-family:'New Atten','Trebuchet MS',sans-serif;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 9px;border-radius:9999px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#fff;border-top:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#b59677;font-family:'New Atten','Trebuchet MS',sans-serif;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Meri Meri</div>
<div class="navlinks"><span>Party</span><span>Nursery</span><span>Gifting</span></div>
<div class="searchpill">Search...</div>
</div>
<div class="hero">
<div class="htext">
<h1>Curated whimsy, hand-picked to delight.</h1>
<p>Party goods and nursery pieces that feel more like a paper atelier than a supply store.</p>
<div class="btn">Shop the Collection</div>
</div>
<div class="garland">
<div class="balloon b1"></div><div class="string s1"></div>
<div class="balloon b2"></div><div class="string s2"></div>
<div class="balloon b3"></div><div class="string s3"></div>
</div>
</div>
<div class="sec">
<div class="sectitle">Party Favorites</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="cardimg"></div><div class="cardbody"><div class="cardtitle">Scalloped Party Plates</div><div class="cardprice">$12.00</div></div></div>
<div class="card"><div class="cardimg"></div><div class="cardbody"><div class="cardtitle">Rainbow Balloon Garland</div><div class="cardprice">$24.00</div></div></div>
<div class="card"><div class="cardimg"></div><div class="cardbody"><div class="cardtitle">Nursery Mobile</div><div class="cardprice">$38.00</div></div></div>
<div class="card"><div class="cardimg"></div><div class="cardbody"><div class="cardtitle">Confetti Gift Wrap</div><div class="cardprice">$9.00</div></div></div>
</div>
</div>
<div class="footer"><span>© A Paper-Goods Atelier</span><span>Gift Guide · Contact</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00cbd5; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00cbd5; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096569; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b8c1; color: #000000;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00cbd5; color: #000000;
border: 1px solid #00b8c1; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00cbd5; color: #111111;
border: 1px solid #03adb6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096569; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00c8d2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#202429; box-sizing:border-box;
font-family:Pretendard,-apple-system,system-ui,sans-serif; }
* { box-sizing:border-box; }
header { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:700; font-size:26px; color:#000000; }
.navlinks { display:flex; gap:20px; font-size:15px; color:#8e8e8e; }
.navlinks span.on { color:#00cbd5; }
.login { background:#ffffff; color:#00b8c1; border:1px solid #00cbd5; border-radius:8px; height:36px; padding:0 16px;
font-size:14px; font-weight:700; display:flex; align-items:center; }
.hero { position:relative; height:170px; margin:0 32px 18px; border-radius:8px; overflow:hidden;
background:linear-gradient(120deg,#0f2a2c,#124a4d 60%,#00cbd5); display:flex; align-items:flex-end; padding:16px; }
.hero span { color:#ffffff; font-size:20px; font-weight:700; }
.section-title { padding:0 32px; font-size:18px; font-weight:700; margin:0 0 12px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:0 32px 18px; }
.card { border:1px solid #e4e4e4; border-radius:4px; overflow:hidden; }
.img { height:90px; }
.im1 { background:linear-gradient(160deg,#0c3a3c,#00cbd5); }
.im2 { background:linear-gradient(160deg,#3a2050,#7a3dff); }
.im3 { background:linear-gradient(160deg,#502030,#f65895); }
.im4 { background:linear-gradient(160deg,#1a3050,#5989fe); }
.cb { padding:10px; }
.cb h4 { font-size:15px; font-weight:800; margin:0 0 6px; }
.cb .price { font-size:13px; font-weight:700; color:#f65895; }
.filters { display:flex; gap:10px; padding:0 32px 14px; }
.fpill { background:#000000; color:#ffffff; border-radius:100px; height:36px; padding:0 16px; font-size:14px;
display:flex; align-items:center; }
.fpill.off { background:transparent; color:#8e8e8e; border:1px solid #e4e4e4; }
</style></head>
<body>
<header>
<span class="brand">Weverse</span>
<div class="navlinks"><span class="on">Home</span><span>Shop</span><span>Magazine</span><span>Live</span></div>
<span class="login">Log in</span>
</header>
<div class="hero"><span>Global Fandom Platform</span></div>
<div class="section-title">Recommended Artist</div>
<div class="filters"><span class="fpill">All artists</span><span class="fpill off">Aurora Six</span><span class="fpill off">Nightbloom</span></div>
<div class="grid">
<div class="card"><div class="img im1"></div><div class="cb"><h4>Aurora Six</h4><span class="price">Album · ₩32,000</span></div></div>
<div class="card"><div class="img im2"></div><div class="cb"><h4>Nightbloom</h4><span class="price">Photobook · ₩28,000</span></div></div>
<div class="card"><div class="img im3"></div><div class="cb"><h4>Echo Line</h4><span class="price">-15% ₩17,000</span></div></div>
<div class="card"><div class="img im4"></div><div class="cb"><h4>Solace Crew</h4><span class="price">Lightstick · ₩45,000</span></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #000000; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f5f5f5; color: #000000;
border: 1px solid #bfbfbf; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e85d00; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:'Bebas Neue','Arial Narrow',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#000000; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { color:#ffffff; font-size:22px; font-weight:700; margin:0; letter-spacing:2px; }
.navlinks { display:flex; gap:28px; }
.navlinks span { color:#ffffff; font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }
.searchicon { color:#fff; font-size:14px; }
.hero { height:264px; background:#000000; display:flex; align-items:center; padding:0 0; }
.hero .imgblock { flex:1; height:264px; background:linear-gradient(135deg,#1a1a1a,#000000); position:relative; }
.hero .imgblock::after { content:''; position:absolute; left:30%; right:30%; bottom:24px; height:60px; background:#e85d00; border-radius:6px 6px 30px 30px; }
.hero .txtblock { flex:1; background:#ffffff; height:264px; display:flex; flex-direction:column; justify-content:center; padding:0 40px; }
.hero h1 { font-size:38px; font-weight:700; margin:0 0 14px; letter-spacing:1px; line-height:1.05; text-transform:uppercase; }
.hero p { font-size:12px; color:#666666; margin:0 0 20px; letter-spacing:0.03em; font-family:Arial,sans-serif; }
.hero .cta { display:inline-block; background:#000000; color:#fff; font-weight:700; font-size:13px; padding:16px 32px; letter-spacing:0.1em; text-transform:uppercase; }
.section-label { padding:18px 32px 10px; font-size:15px; font-weight:700; color:#000000; letter-spacing:0.06em; text-transform:uppercase; border-top:1px solid #e0e0e0; }
.grid { display:flex; padding:0 32px; gap:0; }
.card { flex:1; border:1px solid #e0e0e0; margin-right:-1px; padding:12px; }
.card .art { height:88px; margin-bottom:10px; position:relative; }
.a1 { background:#000000; } .a2 { background:#333333; } .a3 { background:#1a1a1a; } .a4 { background:#000000; }
.card .art::after { content:''; position:absolute; left:30%; right:30%; bottom:8px; height:16px; background:#e85d00; }
.card h3 { font-size:12px; font-weight:700; color:#000000; margin:0 0 4px; letter-spacing:0.03em; text-transform:uppercase; font-family:Arial,sans-serif; }
.card p { font-size:10px; color:#666666; margin:0 0 8px; font-family:Arial,sans-serif; }
.card .price { font-size:14px; font-weight:700; color:#000000; font-family:Arial,sans-serif; }
.card .badge { display:inline-block; background:#e85d00; color:#fff; font-size:9px; font-weight:700; padding:2px 8px; margin-top:6px; font-family:Arial,sans-serif; }
footer { height:64px; margin-top:14px; background:#000000; display:flex; align-items:center; gap:30px; padding:0 32px; }
footer span { color:#fff; font-size:10px; font-weight:700; letter-spacing:0.06em; font-family:Arial,sans-serif; }
</style></head>
<body>
<nav>
<p class="brand">Five Ten</p>
<div class="navlinks"><span>Shoes</span><span>Approach</span><span>Apparel</span></div>
<span class="searchicon">⌕</span>
</nav>
<div class="hero">
<div class="imgblock"></div>
<div class="txtblock">
<h1>Stealth<br>C4 Rubber.</h1>
<p>No gradient. No ornament. Just the friction that holds the route.</p>
<span class="cta">Shop Climbing Shoes</span>
</div>
</div>
<div class="section-label">Best Sellers</div>
<div class="grid">
<div class="card"><div class="art a1"></div><h3>Anasazi Pro</h3><p>Aggressive Downturn</p><div class="price">$185</div></div>
<div class="card"><div class="art a2"></div><h3>Hiangle Pro</h3><p>Precision Toe Box</p><div class="price">$175</div><div class="badge">NEW</div></div>
<div class="card"><div class="art a3"></div><h3>NIAD VCS</h3><p>Velcro Closure</p><div class="price">$165</div></div>
<div class="card"><div class="art a4"></div><h3>Guide Tennie</h3><p>Approach Shoe</p><div class="price">$140</div></div>
</div>
<footer>
<span>STEALTH RUBBER GUIDE</span><span>RESOLE PROGRAM</span><span>ATHLETE TEAM</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #363839;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #363839;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; font-weight: 400; line-height: 1.3; margin: 0; color: #363839; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #747474; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #986c15; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f8f8f8; color: #747474;
border: 1px solid #986c15; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f8f8f8; color: #363839;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #747474; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #986c15; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f8f8; font-family:'Open Sans','PT Sans',sans-serif; color:#3e3e3e; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #ebeaea;}
.logo{font-family:Georgia,serif;font-size:20px;font-weight:700;letter-spacing:0.5px;color:#363839;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#3e3e3e;}
.hero{height:262px;display:flex;align-items:center;padding:0 40px;background:#ffffff;}
.heroText{width:440px;}
.h1{font-family:Georgia,serif;font-size:32px;font-weight:700;line-height:1.2;color:#363839;margin:0 0 14px;}
.sub{font-size:14px;color:#3e3e3e;line-height:1.45;margin:0 0 20px;width:370px;}
.cta{display:inline-flex;align-items:center;justify-content:center;width:170px;height:46px;background:#986c15;color:#ffffff;font-size:14px;font-weight:600;border-radius:4px;}
.dice{position:relative;width:340px;height:200px;}
.d20{position:absolute;left:120px;top:20px;width:120px;height:120px;border-radius:16px;background:radial-gradient(circle at 35% 35%,#d4b87a,#986c15 70%);transform:rotate(12deg);}
.d20b{position:absolute;left:200px;top:80px;width:70px;height:70px;border-radius:10px;background:radial-gradient(circle at 35% 35%,#65bc7b,#003388 70%);transform:rotate(-10deg);}
.sec{padding:22px 40px 0;}
.secTitle{font-family:Georgia,serif;font-size:18px;font-weight:700;color:#363839;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#ffffff;border:1px solid #ebeaea;border-radius:6px;padding:10px;position:relative;}
.thumb{height:98px;border-radius:4px;margin-bottom:10px;}
.badge{position:absolute;top:20px;left:20px;background:#986c15;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:3px 8px;border-radius:2px;}
.pname{font-size:13px;font-weight:600;color:#363839;margin:0 0 4px;}
.pprice{font-size:13px;color:#3e3e3e;}
</style>
<div class="nav">
<div class="logo">Wizkids</div>
<div class="navlinks"><span>Miniatures</span><span>Dice</span><span>Board Games</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Stamped, not printed. Built for the table.</div>
<div class="sub">Pre-painted miniatures and dice for the guild that shows up every session.</div>
<div class="cta">Shop Miniatures</div>
</div>
<div class="dice"><div class="d20"></div><div class="d20b"></div></div>
</div>
<div class="sec">
<div class="secTitle">New Releases</div>
<div class="grid">
<div class="card"><span class="badge">New Release</span><div class="thumb" style="background:linear-gradient(135deg,#986c15,#3e3e3e);"></div><div class="pname">Dragon Lord Miniature</div><div class="pprice">$24.99</div></div>
<div class="card"><span class="badge">Pre-Order</span><div class="thumb" style="background:linear-gradient(135deg,#003388,#986c15);"></div><div class="pname">Guild Wars Dice Set</div><div class="pprice">$16.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#65bc7b,#986c15);"></div><div class="pname">Tabletop Terrain Kit</div><div class="pprice">$39.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6e7577; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #121212; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #121212; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e7577; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; background: #eeeeee; color: #6e7577;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:Arial, sans-serif; }
* { box-sizing:border-box; }
.promo { height:32px; background:#121212; color:#ffffff; display:flex; align-items:center; justify-content:center; font-size:14px; }
.topbar { height:64px; border-bottom:1px solid #dedede; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-size:19px; font-weight:700; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#121212; }
.layout { display:flex; height:calc(640px - 32px - 64px); }
.media { width:340px; flex-shrink:0; background:#eeeeee; display:flex; align-items:center; justify-content:center; }
.box { width:150px; height:200px; background:#ffffff; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.detail { flex:1; padding:26px 34px; display:flex; flex-direction:column; gap:14px; }
h1 { font-size:22px; font-weight:600; margin:0; }
.price { font-size:18px; font-weight:700; }
.meta { font-size:12px; color:#6e7577; }
.pills { display:flex; gap:8px; }
.pill { border:1px solid #dedede; border-radius:999px; padding:8px 16px; font-size:11px; font-weight:700; letter-spacing:1.5px;
text-transform:uppercase; color:#6e7577; }
.pill.active { background:#121212; color:#ffffff; border-color:#121212; }
.badge { background:#eeeeee; color:#6e7577; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
border-radius:4px; padding:4px 8px; width:fit-content; }
.trust { display:flex; gap:16px; font-size:12px; color:#6e7577; border-top:1px solid #dedede; border-bottom:1px solid #dedede; padding:10px 0; }
.stepper { display:flex; border:1px solid #dedede; width:fit-content; }
.stepper div { width:40px; height:40px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; }
.stepper div:not(:last-child) { border-right:1px solid #dedede; }
.actions { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#121212; color:#ffffff; border:none; border-radius:0; height:48px; font-size:14px; font-weight:700; letter-spacing:0.5px; }
.btn-secondary { background:#ffffff; color:#121212; border:1px solid #121212; border-radius:0; height:48px; padding:0 22px; font-size:14px; font-weight:700; letter-spacing:0.5px; }
</style></head>
<body>
<div class="promo">Free shipping on subscriptions</div>
<div class="topbar">
<div class="brand">Cora</div>
<div class="navlinks"><span>Period Care</span><span>Bladder Care</span><span>Subscribe</span></div>
</div>
<div class="layout">
<div class="media"><div class="box"></div></div>
<div class="detail">
<div class="pills">
<div class="pill active">Period Care</div>
<div class="pill">Bladder Care</div>
</div>
<h1>Organic Cotton Tampons, Regular</h1>
<div class="price">$8.99</div>
<div class="meta">36 count · Applicator-free</div>
<div class="badge">Subscribe & Save</div>
<div class="stepper"><div>−</div><div>1</div><div>+</div></div>
<div class="trust">100% Organic Cotton · Dermatologist Tested · Flexible Subscription</div>
<div class="actions">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Learn More</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0064e0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0064e0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b4ec; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0082fb; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0064e0; color: #ffffff;
border: 1px solid #0082fb; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0064e0; color: #f5f5f5;
border: 1px solid #277be3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b4ec; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0069e4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c2b33; box-sizing:border-box;
font-family:"Optimistic Text", -apple-system, "Segoe UI", Helvetica, sans-serif; }
* { box-sizing:border-box; }
.display { font-family:"Optimistic Display", "Optimistic Text", sans-serif; }
nav { height:56px; display:flex; align-items:center; padding:0 36px; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; margin-left:32px; }
.navlinks span { font-size:14px; color:#65676b; }
.cta { margin-left:auto; background:linear-gradient(120deg,#0064e0,#0082fb); color:#ffffff; border-radius:9999px;
height:36px; padding:0 20px; display:flex; align-items:center; font-size:14px; font-weight:600; }
.hero { position:relative; padding:18px 36px 22px; display:flex; align-items:center; gap:30px;
background:linear-gradient(120deg,#0064e0,#0082fb); color:#ffffff; border-radius:0 0 20px 20px; }
.hero-text { flex:1.1; }
.hero h1 { font-size:38px; font-weight:700; line-height:1.1; letter-spacing:-0.5px; margin:0 0 12px; max-width:420px; }
.hero p { font-size:16px; line-height:1.5; margin:0 0 16px; max-width:380px; opacity:0.92; }
.btn-white { display:inline-flex; background:#ffffff; color:#0064e0; border-radius:9999px; height:40px;
padding:0 22px; align-items:center; font-size:14px; font-weight:600; }
.loop { flex:1; height:150px; position:relative; }
.loop::before, .loop::after { content:''; position:absolute; width:110px; height:110px; border-radius:50%;
border:14px solid rgba(255,255,255,0.55); }
.loop::before { left:40px; top:10px; }
.loop::after { left:120px; top:10px; border-color:rgba(255,255,255,0.85); }
.feed { display:flex; gap:16px; padding:18px 36px 20px; background:#f0f2f5; margin-top:14px; }
.card { flex:1; background:#ffffff; border-radius:12px; padding:16px; box-shadow:0 1px 2px rgba(28,43,51,0.10); }
.card .avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#0064e0,#0082fb); margin-bottom:10px; }
.card h4 { margin:0 0 6px; font-size:15px; font-weight:600; }
.card p { margin:0; font-size:13px; color:#65676b; line-height:1.45; }
.badge { display:inline-block; margin-top:10px; background:rgba(0,100,224,0.12); color:#0064e0; border-radius:9999px;
padding:3px 10px; font-size:11px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Meta</p>
<div class="navlinks"><span>Technologies</span><span>Impact</span><span>Careers</span><span>News</span></div>
<div class="cta">Get started</div>
</nav>
<div class="hero">
<div class="hero-text">
<h1 class="display">Building the future of connection</h1>
<p>From apps that connect billions to the tools shaping the next computing platform.</p>
<div class="btn-white">Learn more</div>
</div>
<div class="loop"></div>
</div>
<div class="feed">
<div class="card"><div class="avatar"></div><h4>Family & friends</h4><p>Stay close to the people you care about, wherever they are.</p><span class="badge">Social</span></div>
<div class="card"><div class="avatar"></div><h4>Business tools</h4><p>Reach customers and grow with tools built for every size of business.</p><span class="badge">Business</span></div>
<div class="card"><div class="avatar"></div><h4>Reality Labs</h4><p>Explore immersive experiences across headsets and glasses.</p><span class="badge">New</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 900; line-height: 1.2; letter-spacing: 1px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 900; line-height: 1.2; letter-spacing: 0.8px; background: #e90c8c; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 900; line-height: 1.2; letter-spacing: 0.8px; background: #ffffff; color: #1a1a1a;
border: 1px solid #e90c8c; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 900; line-height: 1.2; letter-spacing: 0.5px; background: #38f4a5; color: #1a1a1a;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,Helvetica,sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #cccccc;}
.logo{font-weight:900;font-size:18px;letter-spacing:1px;text-transform:uppercase;font-family:Arial,sans-serif;}
.navlinks{display:flex;gap:22px;font-weight:900;font-size:14px;letter-spacing:.8px;text-transform:uppercase;}
.navlinks span:first-child{color:#e90c8c;}
.search{border:1px solid #cccccc;height:36px;width:160px;display:flex;align-items:center;padding:0 10px;font-size:12px;color:#666;}
.hero{padding:28px 32px 10px;}
.hero h1{font-weight:900;font-size:34px;letter-spacing:1.4px;text-transform:uppercase;line-height:1.1;max-width:600px;}
.grid{display:flex;gap:0;padding:14px 32px 0;gap:20px;}
.card{width:200px;}
.cover{height:190px;background:#f5f5f5;}
.title{font-weight:900;font-size:14px;letter-spacing:.5px;text-transform:uppercase;margin-top:8px;}
.author{font-size:12px;color:#999;margin-top:4px;}
.price{font-size:14px;color:#666;margin-top:4px;}
.tags{display:flex;gap:6px;padding:16px 32px 0;}
.tag{font-weight:900;font-size:11px;letter-spacing:.5px;text-transform:uppercase;padding:2px 6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#1a1a1a;color:#fff;display:flex;align-items:center;justify-content:center;gap:26px;font-size:13px;text-decoration:underline;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Printed Matter</div>
<div class="navlinks"><span>Artists' Books</span><span>Zines</span><span>Editions</span></div>
<div class="search">Search catalog</div>
</div>
<div class="hero"><h1>Artists' books, zines, and ephemera.</h1></div>
<div class="tags"><div class="tag" style="background:#38f4a5">New</div><div class="tag" style="background:#e90c8c;color:#fff">Sale</div><div class="tag" style="background:#fdd028">Limited</div><div class="tag" style="background:#5187ed;color:#fff">Artist Book</div></div>
<div class="grid">
<div class="card"><div class="cover"></div><div class="title">Field Recordings, Vol. 3</div><div class="author">Studio Rakoczy</div><div class="price">$22</div></div>
<div class="card"><div class="cover"></div><div class="title">Notes From a Closed Shop</div><div class="author">B. Osei-Tutu</div><div class="price">$14</div></div>
<div class="card"><div class="cover"></div><div class="title">Xerox Liturgy</div><div class="author">Collective Din</div><div class="price">$9</div></div>
</div>
<div class="footer"><span>About</span><span>Locations</span><span>Contact</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ca4f0f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ca4f0f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e2aa8e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ca4f0f; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ca4f0f; color: #f5f5f5;
border: 1px solid #d16a34; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e2aa8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #b85333; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Noto Sans TC", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #eeeeee; }
.brand { font-size:16px; font-weight:700; color:#333333; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#333333; }
.navlinks span.on { color:#ca4f0f; border-bottom:2px solid #ca4f0f; padding-bottom:14px; }
.booking { margin:16px 40px 0; background:#f7f7f7; border-radius:4px; padding:18px; }
.booking h1 { font-size:19px; font-weight:700; margin:0 0 12px; }
.fields { display:flex; gap:10px; align-items:center; }
.field { background:#fff; border:1px solid #cccccc; height:35px; padding:6px 20px 6px 12px; font-size:13px;
color:#333; display:flex; align-items:center; }
.go { background:#ca4f0f; color:#fff; border-radius:3px; height:53px; padding:0 20px; font-size:16px;
display:flex; align-items:center; }
.tabs { display:flex; gap:0; margin:16px 40px 0; border-bottom:1px solid #eeeeee; }
.tab { padding:12px 0; margin-right:24px; font-size:15px; color:#666666; }
.tab.on { background:#ca4f0f; color:#fff; padding:12px 20px; margin-right:0; }
.news { display:flex; gap:20px; padding:14px 40px 0; }
.col { flex:1; }
.row { display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px solid #eeeeee; color:#666666; }
.row .date { color:#999; font-size:11px; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #eeeeee; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#666666; }
</style></head>
<body>
<nav>
<div class="brand">Taiwan High Speed Rail</div>
<div class="navlinks"><span class="on">Book a Ticket</span><span>Timetable</span><span>Fares</span><span>Travel Info</span></div>
<span style="font-size:13px;">Member Log In</span>
</nav>
<div class="booking">
<h1>Book your journey</h1>
<div class="fields">
<div class="field">Taipei</div><div class="field">Zuoying</div><div class="field">Today, 09:30</div>
<div class="go">Search</div>
</div>
</div>
<div class="tabs">
<div class="tab on">Book a Ticket</div>
<div class="tab">Group Booking</div>
<div class="tab">Season Pass</div>
</div>
<div class="news">
<div class="col">
<div class="row"><span>Holiday schedule announcement for the upcoming season</span><span class="date">2026.09.01</span></div>
<div class="row"><span>New early-bird fare discounts now available</span><span class="date">2026.08.20</span></div>
</div>
<div class="col">
<div class="row"><span>Station facility maintenance notice</span><span class="date">2026.08.15</span></div>
<div class="row"><span>Sustainability report for the past year published</span><span class="date">2026.08.02</span></div>
</div>
</div>
<footer><span>© Taiwan High Speed Rail</span><span>Taiwan High Speed Rail · Travel Info · Corporate</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #121212; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #121212; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #333333;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #cc0000; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:56px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#fff;letter-spacing:0.5px;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:#fff;}
.navlinks .active{border-bottom:2px solid #fff;padding-bottom:6px;}
.hero{height:150px;background:#121212;display:flex;align-items:center;justify-content:center;}
.hero h1{font-size:26px;font-weight:700;color:#fff;text-align:center;letter-spacing:-0.3px;}
.grid{display:flex;gap:12px;padding:20px 32px 0;}
.card{width:216px;background:#fff;border-radius:4px;padding:8px;}
.thumb{height:110px;background:#eeeeee;border-radius:2px;margin-bottom:8px;}
.badge{display:inline-block;background:#cc0000;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:2px;margin-bottom:6px;}
.ptitle{font-size:16px;font-weight:600;color:#121212;margin-top:8px;}
.pprice{font-size:16px;font-weight:700;color:#121212;margin-top:4px;}
.pprice.sale{color:#cc0000;}
.footerbar{position:absolute;bottom:0;left:0;right:0;height:44px;background:#121212;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Newbury Comics</div>
<div class="navlinks"><div class="active">Vinyl</div><div>Music</div><div>Movies</div><div>Pop Culture</div></div>
</div>
<div class="hero"><h1>Records, Pops, and Everything Weird.</h1></div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#121212,#666666)"></div><div class="ptitle">Radiohead — In Rainbows LP</div><div class="pprice sale">$24.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#333333,#999999)"></div><div class="ptitle">Funko Pop! Stranger Things</div><div class="pprice">$12.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#666666,#121212)"></div><div class="ptitle">Nirvana Bleach Reissue LP</div><div class="pprice">$29.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#999999,#333333)"></div><div class="ptitle">Ghostbusters Blu-ray Steelbook</div><div class="pprice">$19.99</div></div>
</div>
<div class="footerbar">theme-color: #000000 — this is not a toy store</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8fafc; color: #1a1a2e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8fafc; color: #1a1a2e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; color: #1a1a2e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.25px; background: #014d73; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.25px; background: #ffffff; color: #014d73;
border: 1px solid #014d73; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a2e;
border: 1px solid #c0c2c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.25px; background: #dc2626; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Ergo Direct — Home</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f8fafc; color:#1f2937;
font-family:Lato,Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;}
.page{width:960px;height:640px;display:flex;flex-direction:column;}
header{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#ffffff;border-bottom:1px solid #e0e3e8;}
.logo{font-size:18px;font-weight:700;color:#1a1a2e;}
.logo span{color:#014d73;}
nav{display:flex;gap:20px;}
nav a{font-size:12px;font-weight:700;color:#1f2937;}
.nav-cta{background:#014d73;color:#fff;padding:8px 16px;border-radius:8px;font-size:12px;font-weight:700;}
.hero{display:flex;padding:24px 28px;gap:22px;background:#014d73;}
.hero-copy{flex:1;}
.hero-copy .kicker{font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#0ea5e9;margin-bottom:8px;}
.hero-copy h1{font-size:26px;font-weight:700;color:#fff;margin:0 0 10px;line-height:1.3;}
.hero-copy p{font-size:12.5px;color:#cfedfb;max-width:360px;margin:0 0 16px;line-height:1.6;}
.hero-cta{display:inline-block;background:#009122;color:#fff;padding:10px 20px;border-radius:8px;font-size:12px;font-weight:700;}
.rig{width:230px;height:150px;position:relative;}
.arm{position:absolute;left:40px;top:40px;width:14px;height:70px;background:#8fb9cc;border-radius:4px;}
.arm::after{content:'';position:absolute;top:-14px;left:-30px;width:70px;height:14px;background:#cfedfb;border-radius:4px;}
.monitor{position:absolute;left:100px;top:10px;width:110px;height:70px;border-radius:4px;background:linear-gradient(160deg,#0a3a55,#013e5c);border:2px solid #0066a1;}
.monitor .stand{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);width:6px;height:24px;background:#8fb9cc;}
main{flex:1;padding:18px 28px 0;}
.spec-strip{display:flex;gap:12px;margin-bottom:16px;}
.spec-strip div{flex:1;background:#ffffff;border:1px solid #e0e3e8;border-radius:6px;padding:9px 12px;}
.spec-strip b{display:block;font-size:15px;color:#014d73;}
.spec-strip span{font-size:9.5px;color:#6b7280;text-transform:uppercase;letter-spacing:0.4px;}
.row-head{font-size:16px;font-weight:700;color:#1a1a2e;margin:0 0 12px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.card{background:#ffffff;border:1px solid #e0e3e8;border-radius:8px;padding:10px;position:relative;}
.thumb{height:60px;border-radius:6px;background:linear-gradient(150deg,#f1f5f9,#dbe7ee);margin-bottom:8px;}
.badge{position:absolute;top:6px;left:6px;font-size:8px;font-weight:700;padding:3px 6px;border-radius:4px;color:#fff;}
.b-instock{background:#009122;}
.b-sale{background:#dc2626;}
.card h4{font-size:11px;margin:0 0 4px;color:#1a1a2e;font-weight:700;}
.card .price{font-size:13px;font-weight:700;color:#014d73;}
footer{background:#ffffff;border-top:1px solid #e0e3e8;padding:12px 28px;display:flex;justify-content:space-between;margin-top:14px;}
footer span{font-size:10px;color:#6b7280;}
</style>
<div class="page">
<header>
<div class="logo">Ergo Direct<span>.</span></div>
<nav><a>Monitor Arms</a><a>Sit-Stand Desks</a><a>Chairs</a><a>Accessories</a><a>For Facilities</a></nav>
<div class="nav-cta">Get Bulk Pricing</div>
</header>
<div class="hero">
<div class="hero-copy">
<div class="kicker">Ergonomics as Prevention</div>
<h1>Fewer strain claims. Better posture data. One catalog.</h1>
<p>Torque-rated monitor arms and sit-stand systems specced for facilities teams comparing dozens of SKUs at once.</p>
<div class="hero-cta">Shop Monitor Arms</div>
</div>
<div class="rig"><div class="arm"></div><div class="monitor"><div class="stand"></div></div></div>
</div>
<main>
<div class="spec-strip">
<div><b>0–19.8 lb</b><span>Load Capacity</span></div>
<div><b>360°</b><span>Rotation Range</span></div>
<div><b>C-Clamp</b><span>Mount Type</span></div>
<div><b>10-Yr</b><span>Warranty</span></div>
</div>
<div class="row-head">Facilities Best Sellers</div>
<div class="grid">
<div class="card"><div class="badge b-instock">In Stock</div><div class="thumb"></div><h4>Dual Monitor Arm, Gas Spring</h4><div class="price">$149.00</div></div>
<div class="card"><div class="badge b-sale">Clearance</div><div class="thumb"></div><h4>Electric Sit-Stand Desk 60"</h4><div class="price">$449.00</div></div>
<div class="card"><div class="badge b-instock">In Stock</div><div class="thumb"></div><h4>Ultrawide Monitor Mount</h4><div class="price">$189.00</div></div>
<div class="card"><div class="badge b-instock">In Stock</div><div class="thumb"></div><h4>Keyboard Tray, Articulating</h4><div class="price">$79.00</div></div>
</div>
</main>
<footer>
<span>© Ergo Direct — Ergonomic Procurement</span>
<span>Facilities Accounts · Bulk RFQ · Installation Guides</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; background: #336633; color: #ffffff;
border: none; border-radius: 2px; padding: 6px 14px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; background: #ffffff; color: #006699;
border: 1px solid #336633; border-radius: 2px;
padding: 5px 13px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.35; background: #336633; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:Arial,Helvetica,sans-serif; color:#333; font-size:13px; }
*{box-sizing:border-box;}
.utilbar{height:24px;background:#efefef;color:#777;font-size:11px;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 24px;border-bottom:1px solid #d6d6d6;}
.nav{height:36px;background:#336633;border-bottom:2px solid #3c773c;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.logo{font-family:Arial,sans-serif;font-size:14px;font-weight:700;color:#fff;letter-spacing:.5px;}
.navlinks{display:flex;gap:18px;font-size:13px;font-weight:500;color:#fff;}
.searchrow{display:flex;margin:14px 24px 0;}
.searchfield{flex:1;height:38px;border:1px solid #d6d6d6;border-radius:2px;padding:0 12px;display:flex;align-items:center;font-size:16px;color:#a0a0a0;}
.searchbtn{width:100px;height:38px;background:#336633;color:#fff;font-size:14px;font-weight:500;display:flex;align-items:center;justify-content:center;border-radius:2px;margin-left:0;}
.body2{display:flex;gap:16px;margin:16px 24px 0;}
.rail{width:180px;}
.railitem{background:#edf2ed;border-left:3px solid #336633;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#1d591d;padding:8px 10px;margin-bottom:2px;}
.table{flex:1;border:1px solid #d6d6d6;}
.thead{display:flex;background:#efefef;font-size:12px;font-weight:500;border-bottom:1px solid #d6d6d6;}
.thead div{padding:8px;flex:1;}
.trow{display:flex;border-bottom:1px solid #eeeeee;align-items:center;}
.trow:nth-child(even){background:#efefef;}
.trow div{padding:6px 8px;flex:1;font-size:13px;}
.partnum{color:#006699;text-decoration:underline;}
.addbtn{background:#336633;color:#fff;font-size:12px;font-weight:500;padding:5px 12px;border-radius:2px;width:fit-content;}
.footer{position:absolute;bottom:0;left:0;right:0;height:32px;background:#efefef;border-top:1px solid #d6d6d6;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:11px;color:#777;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="utilbar"><span>Account</span><span>Order History</span><span>Cart</span></div>
<div class="nav">
<div class="logo">Mcmaster Carr</div>
<div class="navlinks"><span>Fasteners</span><span>Raw Materials</span><span>Tools</span><span>Electrical</span></div>
</div>
<div class="searchrow"><div class="searchfield">Enter part number or keyword</div><div class="searchbtn">Search</div></div>
<div class="body2">
<div class="rail">
<div class="railitem">Socket Head Screws</div>
<div class="railitem">Hex Nuts</div>
<div class="railitem">Washers</div>
</div>
<div class="table">
<div class="thead"><div>Part No.</div><div>Thread Size</div><div>Length</div><div>Price</div><div></div></div>
<div class="trow"><div class="partnum">91290A121</div><div>1/4"-20</div><div>1"</div><div>$8.42 /pk</div><div class="addbtn">Add</div></div>
<div class="trow"><div class="partnum">91290A115</div><div>1/4"-20</div><div>3/4"</div><div>$7.90 /pk</div><div class="addbtn">Add</div></div>
<div class="trow"><div class="partnum">91290A542</div><div>3/8"-16</div><div>1-1/2"</div><div>$11.30 /pk</div><div class="addbtn">Add</div></div>
</div>
</div>
<div class="footer"><span>© McMaster-Carr Industrial Supply</span><span>Terms · Privacy · Contact</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.55; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.2px; background: #118849; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #118849;
border: 1px solid #118849; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.56; background: #ffffff; color: #141414;
border: 1px solid #d7d5d4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.27; letter-spacing: 0.3px; background: #118849; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Akkurat LL','Helvetica Neue',Arial,sans-serif; color:#3c3b3b; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d7d5d4;}
.logo{font-size:19px;font-weight:500;color:#118849;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:400;}
.hero{height:240px;background:#161f15;display:flex;flex-direction:column;justify-content:center;padding:0 32px;}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#77eeaf;margin-bottom:12px;}
.h1{font-size:44px;font-weight:300;letter-spacing:-1px;color:#fff;margin:0 0 12px;line-height:1.07;}
.sub{font-size:15px;color:#fff;opacity:0.85;margin:0 0 18px;max-width:440px;}
.btn{display:inline-block;background:#118849;color:#fff;font-size:16px;font-weight:500;letter-spacing:0.2px;padding:14px 28px;border-radius:4px;width:fit-content;}
.stats{display:flex;gap:1px;background:#d7d5d4;margin:0 32px;}
.statcell{flex:1;background:#fff;text-align:center;padding:14px 6px;}
.statnum{font-size:32px;font-weight:300;color:#118849;letter-spacing:-1px;}
.statlabel{font-size:11px;color:#888;margin-top:4px;}
.grid{display:flex;gap:16px;padding:18px 32px 0;}
.card{width:210px;background:#fff;border:1px solid #d7d5d4;border-radius:12px;padding:14px;box-shadow:0 2px 12px rgba(17,136,73,0.06);}
.thumb{height:110px;border-radius:6px;background:linear-gradient(135deg,#cfe9db,#118849);position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#118849;color:#fff;font-size:11px;font-weight:500;letter-spacing:0.3px;padding:4px 12px;border-radius:9999px;}
.ctitle{font-size:20px;font-weight:500;margin:10px 0 2px;}
.cprice{font-size:18px;font-weight:500;color:#118849;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Molekule</div>
<div class="navlinks"><span>Air Purifiers</span><span>Filters</span><span>Technology</span><span>Compare</span></div>
</div>
<div class="hero">
<div class="eyebrow">FDA-Cleared Air Purification</div>
<div class="h1">Clean air, medically defined.</div>
<p class="sub">PECO technology that destroys pollutants at the molecular level — not just a filter.</p>
<div class="btn">Shop Purifiers</div>
</div>
<div class="stats">
<div class="statcell"><div class="statnum">99.99%</div><div class="statlabel">VOC Destruction</div></div>
<div class="statcell"><div class="statnum">600</div><div class="statlabel">Sq Ft Coverage</div></div>
<div class="statcell"><div class="statnum">H13</div><div class="statlabel">HEPA Filtration</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge">FDA-Cleared</span></div><div class="ctitle">Air Pro</div><div class="cprice">$799</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Air Mini+</div><div class="cprice">$449</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Replacement PECO-Filter</div><div class="cprice">$99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #000000; }
.brand { font-size:18px; font-weight:700; letter-spacing:0.08em; margin:0; text-transform:uppercase; }
.navlinks { display:flex; gap:0; height:64px; }
.navlinks span { display:flex; align-items:center; padding:0 16px; font-size:13px; font-weight:600; }
.hero { padding:44px 32px 30px; border-bottom:1px solid #000000; position:relative; overflow:hidden; }
.hero .mark1 { position:absolute; right:60px; top:20px; width:120px; height:14px; border-radius:7px;
background:#e5004d; transform:rotate(-3deg); opacity:0.9; }
.hero .mark2 { position:absolute; right:20px; top:44px; width:90px; height:14px; border-radius:7px;
background:#ff8a3d; transform:rotate(-3deg); opacity:0.9; }
.hero h1 { font-size:44px; font-weight:700; line-height:1.3; margin:0 0 14px; max-width:640px; letter-spacing:0.01em; }
.hero p { font-size:15px; line-height:1.8; margin:0; max-width:560px; color:#000000; }
.news { padding:24px 32px 0; }
.news .head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.news .head h2 { font-size:16px; font-weight:700; letter-spacing:0.05em; margin:0; }
.news .head span { font-size:12px; color:#5c5c5c; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { border:1px solid #000000; }
.card .img { height:96px; background:#f2f2f2; position:relative; border-radius:5px 5px 0 0; overflow:hidden; }
.card .img::after { content:''; position:absolute; inset:0; background:linear-gradient(160deg,#e9e9e9,#f8f8f8); }
.card .body { padding:12px 14px; }
.cat { display:inline-block; border:1px solid #000000; border-radius:3px; padding:4px 9px 5px; font-size:11px;
font-weight:600; margin-bottom:8px; }
.cat.red { border-color:#e5004d; color:#e5004d; background:transparent; }
.card .title { font-size:13px; font-weight:600; line-height:1.5; margin:0; }
.card .date { font-size:11px; color:#5c5c5c; margin-top:6px; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #000000; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#5c5c5c; background:#ffffff; }
</style></head>
<body>
<nav>
<p class="brand">MIXI</p>
<div class="navlinks"><span>About</span><span>Services</span><span>Sustainability</span><span>News</span><span>Recruit</span></div>
</nav>
<section class="hero">
<div class="mark1"></div>
<div class="mark2"></div>
<h1>Make a moment worth sharing.</h1>
<p>MIXI builds communication and entertainment services that turn everyday connection into something people genuinely enjoy — together.</p>
</section>
<section class="news">
<div class="head"><h2>NEWS</h2><span>View all</span></div>
<div class="grid">
<div class="card">
<div class="img"></div>
<div class="body">
<span class="cat red">Notice</span>
<p class="title">Full-year results briefing materials now available</p>
<div class="date">2026.09.01</div>
</div>
</div>
<div class="card">
<div class="img"></div>
<div class="body">
<span class="cat">IR</span>
<p class="title">New sports and live-entertainment partnership announced</p>
<div class="date">2026.08.24</div>
</div>
</div>
<div class="card">
<div class="img"></div>
<div class="body">
<span class="cat">Recruit</span>
<p class="title">New graduate recruiting applications now open</p>
<div class="date">2026.08.12</div>
</div>
</div>
</div>
</section>
<footer>
<span>© MIXI</span>
<span>MIXI · About · Sustainability · Recruit</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #191a1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #191a1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #191a1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #696969; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fdbc00; color: #191a1d;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f5f5f5; color: #191a1d;
border: 1px solid #fdbc00; border-radius: 8px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #191a1d;
border: 1px solid #bebebf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #696969; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #1c64f6; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; font-family:'Open Sans', Arial, sans-serif; color:#464646; }
*{box-sizing:border-box;}
.nav{height:60px;background:#ffffff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Montserrat',Arial,sans-serif;font-size:20px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#191a1d;}
.navlinks{display:flex;gap:24px;font-family:'Montserrat',Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;color:#696969;}
.navlinks span:first-child{color:#191a1d;border-bottom:2px solid #fdbc00;padding-bottom:18px;}
.search{width:32px;height:32px;border-radius:9999px;background:#fdbc00;}
.hero{height:250px;display:flex;}
.heroText{width:440px;padding:36px 32px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-family:'Montserrat',Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#00aeef;margin-bottom:10px;}
.h1{font-family:'Montserrat',Arial,sans-serif;font-size:32px;font-weight:700;line-height:1.15;letter-spacing:-0.5px;color:#191a1d;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.5;color:#464646;margin:0 0 20px;max-width:340px;}
.ctarow{display:flex;gap:10px;}
.btn{height:44px;padding:0 24px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-family:'Montserrat',Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.btnY{background:#fdbc00;color:#191a1d;}
.btnB{background:#00aeef;color:#f5f5f5;}
.heroImg{width:520px;height:250px;position:relative;background:#00aeef;overflow:hidden;}
.wave{position:absolute;left:0;bottom:0;width:520px;height:70px;background:#191a1d;}
.board{position:absolute;left:150px;top:50px;width:220px;height:60px;border-radius:30px;background:#f5f5f5;transform:rotate(-8deg);}
.finbit{position:absolute;left:340px;top:100px;width:24px;height:40px;background:#fdbc00;border-radius:0 0 12px 12px;transform:rotate(-8deg);}
.catnav{height:44px;background:#ffffff;display:flex;align-items:center;gap:28px;padding:0 32px;border-top:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6;font-family:'Montserrat',Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;color:#696969;}
.catnav span:first-child{color:#191a1d;border-bottom:2px solid #fdbc00;padding-bottom:12px;}
.sec{padding:20px 32px;}
.sectitle{font-family:'Montserrat',Arial,sans-serif;font-size:16px;font-weight:700;color:#191a1d;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:206px;background:#ffffff;border:1px solid #e6e6e6;border-radius:12px;overflow:hidden;}
.thumb{height:96px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#1c64f6;color:#fff;font-family:'Montserrat',Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.badge.sale{background:#dd2c00;}
.pbody{padding:10px 12px 12px;}
.ptitle{font-size:13px;font-weight:600;color:#191a1d;margin-bottom:4px;}
.pprice{font-family:'Montserrat',Arial,sans-serif;font-size:14px;font-weight:600;color:#191a1d;}
.pprice.sale{color:#dd2c00;}
</style>
<div class="nav">
<div class="logo">Starboard</div>
<div class="navlinks"><span>Windsurf</span><span>SUP</span><span>Foil</span><span>Compare</span></div>
<div class="search"></div>
</div>
<div class="hero">
<div class="heroText">
<div class="kicker">Since 1994</div>
<div class="h1">Built for movement,<br>not decoration.</div>
<div class="sub">Windsurf rigs and SUP boards engineered for direct, responsive time on the water.</div>
<div class="ctarow"><div class="btn btnY">Shop Now</div><div class="btn btnB">See Specs</div></div>
</div>
<div class="heroImg"><div class="wave"></div><div class="board"></div><div class="finbit"></div></div>
</div>
<div class="catnav"><span>Windsurf</span><span>SUP</span><span>Foil</span><span>Accessories</span></div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#191a1d"><div class="badge">New</div></div><div class="pbody"><div class="ptitle">Foil Race Board</div><div class="pprice">$2,199</div></div></div>
<div class="card"><div class="thumb" style="background:#00aeef"></div><div class="pbody"><div class="ptitle">Touring SUP 11'6</div><div class="pprice">$1,399</div></div></div>
<div class="card"><div class="thumb" style="background:#464646"><div class="badge sale">Sale</div></div><div class="pbody"><div class="ptitle">Freeride Rig Set</div><div class="pprice sale">$899</div></div></div>
<div class="card"><div class="thumb" style="background:#8a8a8a"></div><div class="pbody"><div class="ptitle">Carbon Fin 42cm</div><div class="pprice">$249</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfbfb; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfbfb; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 2rem; font-weight: 700; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 2rem; font-weight: 700; margin: 0; color: #6f6f6f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #753399; color: #ffffff;
border: none; border-radius: 400px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #fbfbfb; color: #753399;
border: 1px solid #753399; border-radius: 400px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #fbfbfb; color: #111111;
border: 1px solid #c0c0c0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6f6f6f; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #e8dfed; color: #753399;
border-radius: 400px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: "Roboto", "Segoe UI", Arial, sans-serif; background: #eceeee; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
.topbar { height: 56px; width: 960px; display: flex; align-items: center; justify-content: space-between;
padding: 0 24px; background: #753399; color: #ffffff; }
.brand-mark { display: flex; align-items: center; gap: 10px; }
.brand-sq { width: 22px; height: 22px; border-radius: 6px; background: #ffd464; }
.brand-name { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; }
.top-tools { display: flex; align-items: center; gap: 18px; font-size: 13px; color: #d9c2e5; }
.avatar { width: 30px; height: 30px; border-radius: 999px; background: #ffd464; color: #5b1c7d;
display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.body-row { display: flex; height: 584px; width: 960px; }
.sidebar { width: 184px; background: #fbfbfb; border-right: 1px solid #dadedf; padding: 14px 0; display: flex; flex-direction: column; gap: 2px; }
.nav-item { padding: 10px 20px; font-size: 13px; color: #4a5c60; font-weight: 400; border-left: 3px solid transparent; }
.nav-item.active { background: #f2eaf6; color: #400e58; font-weight: 700; border-left: 3px solid #753399; }
.sidebar-foot { margin-top: auto; padding: 12px 20px 4px; font-size: 10px; color: #9da7a9; text-transform: uppercase; letter-spacing: 0.06em; }
.main { flex: 1; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.main-header { display: flex; align-items: baseline; justify-content: space-between; }
.main-header h1 { margin: 0; font-size: 20px; font-weight: 700; color: #1d2426; }
.crumb { font-size: 11px; color: #6e7c7f; }
.stats-row { display: flex; gap: 14px; height: 92px; }
.stat-card { flex: 1; background: #ffffff; border: 1px solid #dadedf; border-radius: 4px; padding: 12px 14px;
box-shadow: 0 4px 8px rgba(29,36,38,0.08); display: flex; flex-direction: column; justify-content: space-between; }
.stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6e7c7f; }
.stat-value { font-size: 26px; font-weight: 700; color: #1d2426; }
.tag { display: inline-flex; align-items: center; border-radius: 400px; font-size: 10px; font-weight: 700;
padding: 3px 10px; width: fit-content; }
.tag-positive { background: #def7ed; color: #0f5236; }
.tag-negative { background: #f6e6e5; color: #72211d; }
.tag-warning { background: #fcf6e3; color: #473400; }
.tag-info { background: #e3e9f7; color: #173782; }
.tag-neutral { background: #eceeee; color: #2c3739; }
.lower-row { flex: 1; display: flex; gap: 14px; min-height: 0; }
.panel { background: #ffffff; border: 1px solid #dadedf; border-radius: 4px; padding: 14px 16px; display: flex; flex-direction: column; }
.panel-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6e7c7f; margin-bottom: 10px; }
.table-panel { flex: 1.55; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { text-align: left; background: #eceeee; color: #2c3739; font-weight: 700; padding: 7px 10px; }
td { padding: 7px 10px; color: #2c3739; border-bottom: 1px solid #eceeee; }
tr.odd td { background: #fbfbfb; }
.form-panel { flex: 1; justify-content: space-between; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 11px; font-weight: 700; color: #4a5c60; }
.field .ctl { border-radius: 4px; padding: 8px 10px; font-size: 13px; background: #fbfbfb; border: none; border-bottom: 2px solid #4a5c60; color: #1d2426; }
.field .ctl.focused { border-bottom: 2px solid #753399; background: #f2eaf6; color: #400e58; }
.field .ctl.disabled { background: #dadedf; border-bottom: 2px solid #b6bdbf; color: #b6bdbf; }
.btn-primary { background: #753399; color: #ffffff; border: none; border-radius: 4px; padding: 10px 18px;
font-weight: 700; font-size: 13px; width: 100%; text-align: center; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
</style>
<div class="topbar">
<div class="brand-mark"><div class="brand-sq"></div><span class="brand-name">TOTVS PO UI</span></div>
<div class="top-tools"><span>Workspace: Corporate</span><span>Support</span><div class="avatar">AD</div></div>
</div>
<div class="body-row">
<div class="sidebar">
<div class="nav-item active">Dashboard</div>
<div class="nav-item">Accounts</div>
<div class="nav-item">Orders</div>
<div class="nav-item">Inventory</div>
<div class="nav-item">Reports</div>
<div class="nav-item">Settings</div>
<div class="sidebar-foot">PO UI · v6</div>
</div>
<div class="main">
<div class="main-header">
<h1>Operations Dashboard</h1>
<span class="crumb">Corporate / Operations / Overview</span>
</div>
<div class="stats-row">
<div class="stat-card">
<span class="stat-label">Open Invoices</span>
<span class="stat-value">1,284</span>
<span class="tag tag-positive">+4.2% this week</span>
</div>
<div class="stat-card">
<span class="stat-label">Pending Approvals</span>
<span class="stat-value">37</span>
<span class="tag tag-warning">Needs review</span>
</div>
<div class="stat-card">
<span class="stat-label">Failed Syncs</span>
<span class="stat-value">2</span>
<span class="tag tag-negative">Attention</span>
</div>
<div class="stat-card">
<span class="stat-label">SLA Compliance</span>
<span class="stat-value">98.6%</span>
<span class="tag tag-info">On target</span>
</div>
</div>
<div class="lower-row">
<div class="panel table-panel">
<div class="panel-title">Recent Orders</div>
<table>
<thead><tr><th>Order</th><th>Account</th><th>Status</th><th>Amount</th></tr></thead>
<tbody>
<tr><td>PO-10432</td><td>Contoso Distribution</td><td><span class="tag tag-positive">Fulfilled</span></td><td>R$ 12,480.00</td></tr>
<tr class="odd"><td>PO-10431</td><td>Northwind Traders</td><td><span class="tag tag-info">In transit</span></td><td>R$ 3,920.50</td></tr>
<tr><td>PO-10430</td><td>Globex Industrial</td><td><span class="tag tag-warning">Awaiting stock</span></td><td>R$ 8,110.00</td></tr>
<tr class="odd"><td>PO-10429</td><td>Fabrikam Retail</td><td><span class="tag tag-negative">Overdue</span></td><td>R$ 1,275.90</td></tr>
<tr><td>PO-10428</td><td>Initech Corporate</td><td><span class="tag tag-positive">Fulfilled</span></td><td>R$ 22,004.00</td></tr>
<tr class="odd"><td>PO-10427</td><td>Umbrella Supply</td><td><span class="tag tag-neutral">Draft</span></td><td>R$ 640.00</td></tr>
</tbody>
</table>
</div>
<div class="panel form-panel">
<div>
<div class="panel-title">New Account</div>
<div class="field" style="margin-bottom:10px">
<label>Account name</label>
<div class="ctl">Acme Manufacturing</div>
</div>
<div class="field" style="margin-bottom:10px">
<label>Tax ID</label>
<div class="ctl focused">04.312.909/0001-2</div>
</div>
<div class="field" style="margin-bottom:10px">
<label>Region</label>
<div class="ctl disabled">Locked — Corporate only</div>
</div>
</div>
<div>
<div class="chip-row" style="margin-bottom:12px">
<span class="tag tag-positive">Active</span>
<span class="tag tag-info">Verified</span>
<span class="tag tag-warning">Pending KYC</span>
</div>
<button class="btn-primary">Create account</button>
</div>
</div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1b1819;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1b1819;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.4px; margin: 0; color: #1b1819; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f5e900; color: #1b1819;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: transparent; color: #000000;
border: 1px solid #f5e900; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1b1819;
border: 1px solid #c6c5c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.8px; background: #d40000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121212; color:#ffffff; font-family:'Inter', -apple-system, Arial, sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#121212;border-bottom:1px solid #2a2a2a;}
.logo{font-size:20px;font-weight:800;letter-spacing:-0.5px;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#fff;}
.announce{height:32px;background:#f5e900;color:#1b1819;font-size:12px;font-weight:700;letter-spacing:0.2px;display:flex;align-items:center;justify-content:center;}
.hero{height:230px;display:flex;background:#121212;}
.herotext{width:48%;padding:0 32px;display:flex;flex-direction:column;justify-content:center;}
.herotext h1{font-size:32px;font-weight:800;letter-spacing:-1px;margin:0 0 10px;line-height:1.1;}
.herotext p{font-size:14px;color:#bbbbbb;margin:0 0 16px;max-width:300px;}
.herocta{width:fit-content;background:#f5e900;color:#1b1819;font-size:15px;font-weight:600;letter-spacing:0.3px;padding:14px 28px;border-radius:9999px;}
.heroimg{width:52%;position:relative;overflow:hidden;background:radial-gradient(circle at 65% 50%, rgba(245,233,0,0.14), transparent 60%);}
.bank{position:absolute;right:80px;top:60px;width:140px;height:110px;background:linear-gradient(135deg,#2a2a2a,#000);border-radius:12px;}
.bank:before{content:'';position:absolute;left:20px;top:16px;width:100px;height:8px;background:#f5e900;border-radius:4px;}
.bank:after{content:'';position:absolute;left:20px;top:34px;width:60px;height:6px;background:#555;border-radius:3px;}
.pills{display:flex;gap:8px;padding:14px 32px 0;}
.pill{background:transparent;border:1px solid #fff;color:#fff;font-size:13px;font-weight:600;padding:8px 16px;border-radius:9999px;}
.pill.active{background:#f5e900;color:#1b1819;border-color:#f5e900;}
.grid{display:flex;gap:14px;padding:14px 32px 0;}
.card{width:206px;background:#fff;color:#1b1819;border-radius:8px;padding:12px;position:relative;}
.thumb{height:90px;background:#f5f5f5;border-radius:4px;margin-bottom:8px;}
.badge{position:absolute;top:8px;left:8px;background:#d40000;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;padding:3px 7px;border-radius:4px;}
.ptitle{font-size:15px;font-weight:600;}
.pprice{font-size:16px;font-weight:700;margin-top:4px;}
.pcompare{font-size:12px;color:#777;text-decoration:line-through;margin-left:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#999;border-top:1px solid #2a2a2a;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">FREE SHIPPING OVER $35 — LIMITED TIME</div>
<div class="nav">
<div class="logo">Rapidx</div>
<div class="navlinks"><div>Chargers</div><div>Cables</div><div>Power Banks</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Speed you can feel.</h1>
<p>GaN fast chargers and cables engineered for the fast lane — zero ornament, full voltage.</p>
<div class="herocta">Shop Fast Chargers</div>
</div>
<div class="heroimg"><div class="bank"></div></div>
</div>
<div class="pills"><div class="pill active">All</div><div class="pill">Chargers</div><div class="pill">Cables</div><div class="pill">Power Banks</div></div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb"></div><div class="ptitle">65W GaN III Charger</div><div class="pprice">$29.99<span class="pcompare">$39.99</span></div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">100W USB-C Cable</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">20000mAh Power Bank</div><div class="pprice">$44.99</div></div>
</div>
<div class="footer"><span>© RapidX Electronics</span><span>Warranty Track Order</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0066ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0066ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b5fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b7aff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0066ff; color: #ffffff;
border: 1px solid #0b7aff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0066ff; color: #f5f5f5;
border: 1px solid #277dfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b5fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0269ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#131313; color:#ffffff; box-sizing:border-box;
font-family:"Pretendard", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; padding:0 36px; }
.brand { font-size:15px; font-weight:700; margin:0; color:#ffffff; }
.navlinks { display:flex; gap:20px; margin-left:32px; }
.navlinks span { font-size:14px; font-family:"Roboto", sans-serif; color:#ffffff; }
.navlinks span.on { color:#0066ff; }
.hero { text-align:center; padding:26px 60px 20px; }
.hero h1 { font-size:48px; font-weight:700; line-height:1.2; margin:0 0 16px; color:#ffffff; }
.btn-outline { display:inline-flex; align-items:center; justify-content:center; background:#ffffff; color:#0066ff;
border:2px solid #0066ff; border-radius:4px; height:56px; padding:0 40px; font-size:15px; font-weight:400;
box-shadow:0 10px 20px rgba(0,0,0,0.3); }
.cards { display:flex; gap:16px; padding:24px 36px 26px; }
.card { flex:1; background:#131313; border-radius:28px; text-align:center; padding:22px 16px; position:relative; }
.card .icon { width:56px; height:56px; border-radius:14px; margin:0 auto 12px; background:linear-gradient(135deg,#0066ff,#0045ff); }
.card .t { font-size:18px; font-weight:600; color:#ffffff; margin-bottom:14px; }
.pill { display:inline-flex; align-items:center; background:#131313; border:1px solid #333333; color:#ffffff;
border-radius:28px; height:40px; padding:0 18px; font-size:13px; font-weight:500; box-shadow:0 10px 20px rgba(0,0,0,0.25); }
.white-panel { background:#ffffff; color:#333333; border-radius:16px 16px 0 0; margin:0 20px; padding:22px 24px;
display:flex; gap:20px; }
.feature { flex:1; background:#ffffff; border-radius:8px; box-shadow:0 10px 20px rgba(0,0,0,0.07); padding:16px 18px; }
.feature h4 { margin:0 0 6px; font-size:15px; color:#1c1e1f; }
.feature p { margin:0; font-size:13px; color:#333333; line-height:1.5; }
.tag { display:inline-block; background:#ebf1ff; color:#0066ff; border-radius:4px; padding:4px 7px; font-size:12px; font-weight:500; margin-bottom:8px; }
</style></head>
<body>
<nav>
<p class="brand">MediBloc (Dr.Palette)</p>
<div class="navlinks"><span class="on">Panacea</span><span>Wallet</span><span>Explorer</span><span>Blog</span><span>Github</span></div>
</nav>
<div class="hero">
<h1>Own your health data.<br>It's rightfully yours.</h1>
<div class="btn-outline">Validator Guide</div>
</div>
<div class="cards">
<div class="card"><div class="icon"></div><div class="t">Wallet</div><div class="pill">Visit</div></div>
<div class="card"><div class="icon"></div><div class="t">Explorer</div><div class="pill">Visit</div></div>
<div class="card"><div class="icon"></div><div class="t">Panacea Chain</div><div class="pill">Visit</div></div>
</div>
<div class="white-panel">
<div class="feature"><span class="tag">CLOUD EMR</span><h4>No servers, no downloads</h4><p>A web-based clinic record system that updates itself.</p></div>
<div class="feature"><span class="tag">MOBILE</span><h4>Review from anywhere</h4><p>Sync a patient's chart in real time from a phone.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1890ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1890ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0f0f0f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1890ff; color: #0f0f0f;
border: 1px solid #0f0f0f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1890ff; color: #f5f5f5;
border: 1px solid #3ba0fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #177bd9; color: #0f0f0f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#27272a; box-sizing:border-box;
font-family:"Pretendard","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #e4e4e7; }
.logo { font-size:18px; font-weight:600; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:22px; font-size:12px; font-weight:600; color:#171717; }
.cta-sm { background:#1890ff; color:#ffffff; border-radius:4px; padding:8px 14px; font-size:12px;
font-weight:600; }
.hero { text-align:center; padding:34px 40px 24px; }
.pill { display:inline-block; background:#ffffff; border:1px solid #e4e4e7; border-radius:50px;
padding:6px 18px; font-size:12px; font-weight:600; margin-bottom:14px; }
.hero h1 { font-size:38px; font-weight:600; letter-spacing:-0.4px; line-height:1.3; margin:0 0 8px; }
.hero h1 span { color:#1890ff; }
.hero p { font-size:14px; color:#3f3f46; margin:0 0 16px; }
.row { display:flex; gap:10px; justify-content:center; }
.btn-dark { background:#0f0f0f; color:#ffffff; border-radius:4px; padding:12px 22px; font-size:12px;
font-weight:600; }
.btn-white { background:#ffffff; color:#171717; border:1px solid #e4e4e7; border-radius:4px;
padding:12px 22px; font-size:12px; font-weight:600; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:10px 40px 24px; }
.card { background:#fafafa; border-radius:16px; padding:16px; }
.card h3 { font-size:14px; font-weight:600; margin:0 0 6px; color:#27272a; }
.card p { font-size:11px; color:#71717a; margin:0; line-height:1.4; }
.navy { background:#001946; padding:26px 40px; text-align:center; color:#ffffff; }
.navy .num { font-size:64px; font-weight:400; letter-spacing:-2px; margin:0; font-family:"Poppins",sans-serif; }
.navy .lbl { font-size:12px; color:#a1a1aa; margin-top:4px; }
.plans { display:flex; gap:14px; justify-content:center; margin-top:16px; }
.plan { background:#001946; border-radius:20px; box-shadow:rgba(255,255,255,0.12) 0px 0px 2px 0px inset;
padding:14px 18px; width:150px; font-size:12px; }
footer { border-top:1px solid #e4e4e7; padding:12px 40px; font-size:11px; color:#a1a1aa;
text-align:center; }
</style></head>
<body>
<nav>
<span class="logo">Greeting</span>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span></div>
<span class="cta-sm">Request a Demo</span>
</nav>
<section class="hero">
<span class="pill">The #1 Hiring Management Platform</span>
<h1>Beyond hiring management, to <span>hiring success</span></h1>
<p>10,000+ companies grow with Greeting.</p>
<div class="row">
<button class="btn-dark">Request a Demo</button>
<button class="btn-white">Start Free Trial</button>
</div>
</section>
<div class="cards">
<div class="card"><h3>Careers Page Builder</h3><p>Design a first impression that wins over candidates.</p></div>
<div class="card"><h3>Direct Sourcing</h3><p>Secure talent without being boxed in by a single strategy.</p></div>
<div class="card"><h3>Talent Pool Management</h3><p>Run and optimize your talent pool with data-driven insights.</p></div>
</div>
<div class="navy">
<p class="num">10,000+</p>
<p class="lbl">companies grow with Greeting</p>
<div class="plans">
<div class="plan">Starter</div>
<div class="plan">Growth</div>
<div class="plan">Enterprise</div>
</div>
</div>
<footer>© Greeting · Product · Company · Legal</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #131212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #131212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #131212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #973f54; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #f6f6f6; color: #131212;
border: 1px solid #973f54; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #3b3b3b;
border: 1px solid #bdbdbd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffe056; color: #131212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f6f6; font-family:Consolas,'Courier New',monospace; color:#3b3b3b; }
*{box-sizing:border-box;}
.nav{height:72px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-family:Georgia,'Times New Roman',serif;font-size:22px;color:#131212;}
.navlinks{display:flex;gap:22px;font-family:Georgia,serif;font-size:15px;color:#131212;}
.navlinks .active{color:#973f54;border-bottom:2px solid #973f54;padding-bottom:4px;}
.hero{height:250px;display:flex;padding:0 30px;align-items:center;gap:30px;}
.herotext{width:340px;}
.herotext h1{font-family:Georgia,'Times New Roman',serif;font-size:38px;font-weight:600;line-height:1.15;margin:0 0 12px;color:#131212;}
.herotext p{font-size:13px;color:#3b3b3b;line-height:1.5;margin:0 0 18px;}
.cta{display:inline-block;background:#973f54;color:#fff;font-family:Georgia,serif;font-weight:600;font-size:15px;padding:14px 28px;border-radius:8px;letter-spacing:.3px;}
.jarwrap{flex:1;height:200px;display:flex;align-items:flex-end;justify-content:center;gap:22px;}
.jar{width:70px;height:130px;border-radius:8px 8px 20px 20px;position:relative;}
.jarcap{width:70px;height:22px;border-radius:6px 6px 0 0;background:#131212;}
.rowlabel{padding:14px 30px 8px;font-family:Georgia,serif;font-size:18px;color:#131212;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:196px;background:#fff;border-radius:12px;overflow:hidden;}
.thumb{height:100px;background:#f6f6f6;border-radius:12px 12px 0 0;position:relative;display:flex;align-items:center;justify-content:center;}
.pillbox{width:44px;height:70px;border-radius:8px 8px 16px 16px;}
.body{padding:10px 12px;}
.badge{position:absolute;top:8px;left:8px;background:#ffe056;color:#131212;font-size:10px;font-weight:700;text-transform:uppercase;border-radius:4px;padding:3px 7px;}
.ptitle{font-family:Georgia,serif;font-size:14px;color:#131212;margin-bottom:4px;}
.pprice{font-size:13px;color:#3b3b3b;}
.ing{margin:0 30px;background:#f6f6f6;border-radius:8px;padding:8px 14px;font-size:12px;color:#3b3b3b;border-left:3px solid #00b174;}
</style>
<div class="nav">
<div class="logo">Topicals</div>
<div class="navlinks"><div class="active">Faded</div><div>Like Butter</div><div>Sunscreen</div><div>About</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Skin science, honestly told.</h1>
<p>Clinical formulas for flare-ups, hyperpigmentation, and real skin days.</p>
<div class="cta">Shop Best Sellers</div>
</div>
<div class="jarwrap">
<div><div class="jarcap"></div><div class="jar" style="background:#973f54"></div></div>
<div><div class="jarcap"></div><div class="jar" style="background:#ac533e"></div></div>
<div><div class="jarcap"></div><div class="jar" style="background:#00b174"></div></div>
</div>
</div>
<div class="ing">Niacinamide + Azelaic Acid — the pairing behind Faded serum</div>
<div class="rowlabel">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge">Best Seller</span><div class="pillbox" style="background:#973f54"></div></div><div class="body"><div class="ptitle">Faded Serum</div><div class="pprice">$40.00</div></div></div>
<div class="card"><div class="thumb"><div class="pillbox" style="background:#ac533e"></div></div><div class="body"><div class="ptitle">Like Butter Moisturizer</div><div class="pprice">$36.00</div></div></div>
<div class="card"><div class="thumb"><div class="pillbox" style="background:#00b174"></div></div><div class="body"><div class="ptitle">High Roller Toner</div><div class="pprice">$32.00</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #002d18; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #002d18; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #879b92; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c84600; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #002d18; color: #c84600;
border: 1px solid #c84600; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #002d18; color: #f5f5f5;
border: 1px solid #274d3b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #879b92; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #203114; color: #c84600;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#002d18; box-sizing:border-box;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { display:flex; justify-content:space-between; align-items:center; padding:20px 40px; }
.logo { font-size:22px; font-weight:100; letter-spacing:2px; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:300; }
.hero { text-align:center; padding:20px 40px 30px; }
.hero h1 { font-size:56px; font-weight:100; letter-spacing:2px; line-height:1.1; margin:0 0 14px; }
.hero p { font-size:16px; font-weight:400; line-height:1.5; max-width:520px; margin:0 auto 20px; }
.btn-outline { display:inline-block; border:2px solid #002d18; color:#002d18; padding:12px 20px;
font-size:14px; letter-spacing:1px; background:transparent; }
.sage { background:#9caba3; padding:26px 40px; display:grid; grid-template-columns:1.1fr 1fr; gap:28px;
align-items:center; }
.sage .photo { height:150px; border-radius:0; background:linear-gradient(135deg,#7f9389,#b6c3ba); }
.sage h2 { font-size:30px; font-weight:100; letter-spacing:2px; margin:0 0 10px; }
.sage p { font-size:14px; line-height:1.5; margin:0 0 16px; }
.btn-accent { display:inline-block; background:#c84600; border:2px solid #c84600; color:#ffffff;
padding:12px 20px; font-size:14px; letter-spacing:1px; }
.strip { display:grid; grid-template-columns:repeat(3,1fr); }
.strip .cell { height:74px; display:flex; align-items:flex-end; padding:10px; color:#ffffff;
font-size:14px; font-weight:100; background-size:cover; }
.strip .c1 { background:#3b5647; }
.strip .c2 { background:#0a2d1b; }
.strip .c3 { background:#002d18; }
footer { background:#002d18; color:#ffffff; padding:20px 40px; display:flex; justify-content:space-between; }
footer .col h4 { color:#9b9b9b; font-size:13px; font-weight:100; letter-spacing:1px; margin:0 0 8px; }
footer .col div { font-size:13px; margin-bottom:4px; }
footer .fine { color:#aaaaaa; font-size:11px; }
</style></head>
<body>
<nav>
<span class="logo">Greenvines</span>
<div class="navlinks"><span>Our Story</span><span>Clean Skincare</span><span>Sustainability Report</span></div>
</nav>
<section class="hero">
<h1>Less is the formula</h1>
<p>Subtraction skincare — strip every formula down to what skin actually needs.</p>
<span class="btn-outline">Learn More →</span>
</section>
<section class="sage">
<div class="photo"></div>
<div>
<h2>Subtraction Care</h2>
<p>Over 20,000 verified reviews across 23 clean skincare and body wash products. We don't worship "natural" blindly — we look for where nature and safety actually overlap.</p>
<span class="btn-accent">Add to Cart</span>
</div>
</section>
<div class="strip">
<div class="cell">Our Story</div>
<div class="cell">Empty Bottle Recycling</div>
<div class="cell">3,200+ Ingredients We Never Use</div>
</div>
<footer>
<div class="col">
<h4>Learn More</h4>
<div>Our Story</div>
<div>Clean Care Manifesto</div>
</div>
<div class="col">
<h4>Customer Care</h4>
<div>45-Day No-Questions Returns</div>
<div>FAQ</div>
</div>
<div class="col">
<h4>Newsletter</h4>
<div class="fine">© Greenvines</div>
</div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #eb322f; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #111111;
border: 1px solid #eb322f; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #eb322f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#222222; font-family:Arial,'Open Sans',sans-serif; }
*{box-sizing:border-box;}
.nav{height:58px;background:#20282a;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:19px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#d1d1d1;}
.navcta{background:#eb322f;color:#fff;font-size:12px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;padding:9px 18px;border-radius:4px;}
.promo{background:#fdf0d5;color:#6f4400;text-align:center;font-size:12px;font-weight:700;letter-spacing:0.3px;padding:7px 0;}
.hero{height:222px;display:flex;background:#f6f6f6;}
.herotext{width:48%;display:flex;flex-direction:column;justify-content:center;padding:0 34px;}
.herotext .spec{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#c07600;margin-bottom:8px;}
.herotext h1{font-size:27px;font-weight:800;color:#111111;margin:0 0 10px;line-height:1.2;}
.herotext p{font-size:13px;color:#222222;margin:0 0 16px;max-width:300px;line-height:1.5;}
.cta{display:inline-block;background:#eb322f;color:#fff;font-size:13px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;padding:12px 26px;border-radius:4px;width:fit-content;}
.heroimg{width:52%;position:relative;background:radial-gradient(circle at 62% 55%,#e8e8e8 0%,#bbbbbb 55%,#20282a 100%);}
.pan{position:absolute;left:70px;top:96px;width:150px;height:40px;border-radius:50%;background:#20282a;}
.handle{position:absolute;left:210px;top:106px;width:70px;height:16px;border-radius:8px;background:#eb322f;}
.spot{position:absolute;left:130px;top:106px;width:16px;height:16px;border-radius:50%;background:#ff9635;}
.grid{display:flex;gap:14px;padding:22px 34px 0;}
.card{width:150px;border:1px solid #d1d1d1;border-radius:8px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#eb322f;color:#fff;font-size:9px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;padding:3px 7px;border-radius:4px;z-index:2;}
.thumb{height:94px;border-radius:6px;margin-bottom:8px;background:#f6f6f6;}
.ptitle{font-size:12px;font-weight:700;color:#111111;line-height:1.3;height:32px;overflow:hidden;}
.pprice{font-size:13px;font-weight:800;color:#eb322f;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:11px;color:#757575;border-top:1px solid #e4e4e4;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="promo">Thermo-Spot® Technology — Ready to Cook in Seconds</div>
<div class="nav">
<div class="logo">Tefal</div>
<div class="navlinks"><span>Cookware</span><span>Small Appliances</span><span>Kitchen Tools</span></div>
<div class="navcta">Add to Cart</div>
</div>
<div class="hero">
<div class="herotext">
<div class="spec">Non-Stick, Heat-Ready</div>
<h1>Cookware That Tells You When It's Hot</h1>
<p>Engineered surfaces and precision heat indicators for a kitchen that runs on certainty.</p>
<div class="cta">Shop Cookware</div>
</div>
<div class="heroimg"><div class="pan"></div><div class="handle"></div><div class="spot"></div></div>
</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#20282a,#eb322f)"></div><div class="ptitle">Ingenio Frypan Set</div><div class="pprice">$79.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#eb322f,#20282a)"></div><div class="ptitle">Thermo-Spot Saucepan</div><div class="pprice">$44.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#bbbbbb,#20282a)"></div><div class="ptitle">Easy Fry Air Fryer</div><div class="pprice">$129.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#20282a,#bbbbbb)"></div><div class="ptitle">Optigrill Elite</div><div class="pprice">$199.00</div></div>
</div>
<div class="footer"><span>© Ready When You Are</span><span>Warranty Registration</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfaf9; color: #4f4b47;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfaf9; color: #4f4b47;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #4f4b47; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #cb2c30; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fcfaf9; color: #4f4b47;
border: 1px solid #cb2c30; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fcfaf9; color: #4f4b47;
border: 1px solid #d1cecc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #d02c2f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:flex; flex-direction:column; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcfaf9; color:#3d4246; box-sizing:border-box;
font-family:'Montserrat','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; flex-shrink:0; display:flex; align-items:center; justify-content:center; position:relative;
border-bottom:1px solid #e8e8e8; }
.brand { font-size:20px; font-weight:700; color:#4f4b47; letter-spacing:1px; }
.navlinks { position:absolute; left:36px; display:flex; gap:20px; }
.navlinks span { font-size:12px; font-weight:600; color:#777777; }
.cart { position:absolute; right:36px; background:#cb2c30; color:#fff; font-size:11px; font-weight:600; padding:7px 16px; border-radius:999px; }
.hero { display:flex; align-items:center; justify-content:center; gap:36px; padding:26px 40px 20px; }
.htext { max-width:380px; text-align:left; }
.htext .kicker { font-size:11px; font-weight:700; color:#cb2c30; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }
.htext h1 { font-size:28px; font-weight:700; color:#4f4b47; margin:0 0 12px; line-height:1.3; }
.htext p { font-size:14px; color:#3d4246; line-height:1.5; margin:0 0 16px; }
.btn { display:inline-block; background:#cb2c30; color:#fff; font-size:13px; font-weight:600; padding:11px 26px; border-radius:999px; }
.heroimg { width:200px; height:170px; border-radius:20px; flex-shrink:0; background:radial-gradient(circle at 35% 30%,#e4c6be,#dbc0a7 70%); }
.section { padding:0 40px; }
.section h2 { font-size:18px; font-weight:600; color:#4f4b47; margin:0 0 14px; text-align:center; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card { background:#ffffff; border-radius:16px; padding:12px; text-align:center; }
.cover { height:76px; border-radius:14px; margin-bottom:10px; }
.p1 .cover { background:radial-gradient(circle at 35% 30%,#f3e2d0,#dbc0a7 70%); }
.p2 .cover { background:radial-gradient(circle at 35% 30%,#e4c6be,#cb2c30 140%); }
.p3 .cover { background:radial-gradient(circle at 35% 30%,#dde5ed,#a9bdd6 70%); }
.p4 .cover { background:radial-gradient(circle at 35% 30%,#f3e2d0,#e4c6be 70%); }
.card .t { font-size:13px; font-weight:600; color:#4f4b47; margin:0 0 4px; }
.card .p { font-size:12px; color:#777777; }
.trust { margin-top:auto; flex-shrink:0; display:flex; padding:14px 40px; background:#f3f3f3; }
.trust span { flex:1; text-align:center; font-size:11px; font-weight:500; color:#777777; }
</style></head>
<body>
<nav>
<div class="navlinks"><span>Bears</span><span>New Baby</span><span>Character Plush</span></div>
<div class="brand">Gund</div>
<div class="cart">Cart · 2</div>
</nav>
<div class="hero">
<div class="htext">
<div class="kicker">Since 1898</div>
<h1>The plush that grows up with you.</h1>
<p>Embroidered eyes, varied textures, and a softness built to be a lifelong keepsake — gift-worthy in every stitch.</p>
<span class="btn">Shop Best Sellers</span>
</div>
<div class="heroimg"></div>
</div>
<div class="section">
<h2>Gift-Worthy Favorites</h2>
<div class="grid">
<div class="card p1"><div class="cover"></div><div class="t">Classic Teddy, 12"</div><div class="p">$24.99</div></div>
<div class="card p2"><div class="cover"></div><div class="t">Snuffles Bear</div><div class="p">$29.99</div></div>
<div class="card p3"><div class="cover"></div><div class="t">New Baby Blanket Set</div><div class="p">$34.99</div></div>
<div class="card p4"><div class="cover"></div><div class="t">Flora the Bunny</div><div class="p">$19.99</div></div>
</div>
</div>
<div class="trust"><span>Est. 1898</span><span>Machine Washable</span><span>Gift Wrapping Available</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1816;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1816;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.2px; margin: 0; color: #1a1816; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.38; margin: 0; color: #545b62; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #00a1e0; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #00a1e0;
border: 1px solid #00a1e0; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1816;
border: 1px solid #c6c5c5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #545b62; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #cc0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1816; box-sizing:border-box;
font-family:'Helvetica Neue',Arial,-apple-system,sans-serif; }
* { box-sizing:border-box; }
.utilbar { height:28px; background:#1b1e21; color:#fff; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; font-size:11px; }
.utilbar span:last-child { color:#94e1ff; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #dae0e5; background:#ffffff; }
.brand { font-size:19px; font-weight:700; color:#00a1e0; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:500; color:#1a1816; }
.navicons { display:flex; gap:16px; align-items:center; font-size:12px; color:#1a1816; }
.cartdot { background:#00a1e0; color:#fff; border-radius:9999px; width:18px; height:18px;
display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; }
.wrap { display:flex; height:calc(640px - 28px - 57px - 48px); }
.gallery { width:370px; background:#f9f9f9; display:flex; align-items:center; justify-content:center;
position:relative; }
.pot { width:170px; height:150px; background:linear-gradient(180deg,#c9ccce 0%,#8b9094 100%);
border-radius:14px 14px 60px 60px; position:relative; box-shadow:0 16px 34px rgba(0,0,0,0.15); }
.pot::before { content:''; position:absolute; top:-14px; left:20px; right:20px; height:20px;
background:#00a1e0; border-radius:9999px; }
.badge-sale { position:absolute; top:18px; left:18px; background:#cc0000; color:#fff; font-size:11px;
font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:3px 8px; border-radius:4px; }
.info { flex:1; padding:22px 32px; display:flex; flex-direction:column; gap:9px; }
.breadcrumb { font-size:11px; color:#545b62; }
.breadcrumb b { color:#1a1816; }
h1 { font-size:23px; font-weight:700; margin:0; line-height:1.25; letter-spacing:-0.2px; }
.model { font-family:Consolas,'Courier New',monospace; font-size:12px; color:#545b62; letter-spacing:0.5px; }
.stars { font-size:12px; color:#d39e00; }
.stars span { color:#545b62; margin-left:6px; }
.pricerow { display:flex; align-items:baseline; gap:10px; }
.price { font-size:22px; font-weight:700; color:#cc0000; }
.strike { font-size:14px; color:#545b62; text-decoration:line-through; }
.buyrow { display:flex; gap:10px; margin-top:2px; }
.btn-primary { background:#00a1e0; color:#fff; border:none; border-radius:8px; padding:12px 24px;
font-weight:600; font-size:14px; }
.btn-secondary { background:#fff; color:#00a1e0; border:1px solid #00a1e0; border-radius:8px;
padding:11px 23px; font-weight:600; font-size:14px; }
.spectable { margin-top:6px; border-top:1px solid #dae0e5; }
.specrow { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid #dae0e5; font-size:12px; }
.speclabel { color:#1a1816; font-weight:600; }
.specvalue { color:#444444; }
.specrow:nth-child(even) { background:#f9f9f9; }
.badgerow { display:flex; gap:8px; margin-top:2px; }
.bpill { border-radius:4px; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:0.5px; padding:3px 8px; color:#fff; }
.bpill.green { background:#008827; }
footer { height:48px; background:#233c28; color:#c8cbcf; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; font-size:12px; }
</style></head>
<body>
<div class="utilbar">
<span>Account · Order Status · Customer Service</span>
<span>Free Shipping Over $50</span>
</div>
<nav>
<div class="brand">Cuisinart</div>
<div class="navlinks"><span>Food Prep</span><span>Cookware</span><span>Coffee & Espresso</span><span>Toaster Ovens</span></div>
<div class="navicons"><span>Search</span><span>Account</span><span class="cartdot">2</span></div>
</nav>
<div class="wrap">
<div class="gallery">
<span class="badge-sale">Sale</span>
<div class="pot"></div>
</div>
<div class="info">
<div class="breadcrumb">Cookware > Stockpots > <b>10-Qt Stockpot</b></div>
<h1>Chef's Classic 10-Quart Stockpot with Cover</h1>
<div class="model">Model TOB-260N1</div>
<div class="stars">★★★★☆ <span>4.5 · 1,208 reviews</span></div>
<div class="pricerow"><span class="price">$79.95</span><span class="strike">$99.95</span></div>
<div class="buyrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compare</button>
</div>
<div class="badgerow"><span class="bpill green">Dishwasher Safe</span></div>
<div class="spectable">
<div class="specrow"><span class="speclabel">Capacity</span><span class="specvalue">10 Quarts</span></div>
<div class="specrow"><span class="speclabel">Material</span><span class="specvalue">Stainless Steel</span></div>
<div class="specrow"><span class="speclabel">Induction</span><span class="specvalue">Compatible</span></div>
</div>
</div>
</div>
<footer>
<span>© Cuisinart</span>
<span>Support · Warranty · Recipes · About</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #061232; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #061232; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #898f9d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3a82dd; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #061232; color: #3a82dd;
border: 1px solid #3a82dd; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #061232; color: #f5f5f5;
border: 1px solid #2c3651; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #898f9d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e244d; color: #3a82dd;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>iKala</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#525151; box-sizing:border-box;
font-family:"Noto Sans TC","Noto Sans",-apple-system,BlinkMacSystemFont,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#ffffff; border-bottom:1px solid #edf1f7; }
.brand { font-size:20px; font-weight:800; letter-spacing:-0.5px; color:#061232; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:700; }
.navlinks span { color:#333333; }
.navlinks span.active { color:#3a82dd; }
.btn-navy { background:#061232; color:#ffffff; border:none; border-radius:8px; height:36px;
padding:0 18px; font-size:14px; font-weight:500; box-shadow:none; white-space:nowrap; }
.hero { background:radial-gradient(120% 160% at 20% 20%,#0a1c47 0%,#061232 55%,#031234 100%);
padding:36px 40px; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#3a82dd; margin:0; }
.hero h1 { font-size:40px; font-weight:800; line-height:1.14; letter-spacing:-1.2px; color:#ffffff;
margin:10px 0 0; max-width:600px; }
.hero p { font-size:16px; font-weight:400; line-height:1.5; color:rgba(255,255,255,0.72);
margin:12px 0 0; max-width:480px; }
.hero-cta { display:flex; align-items:center; gap:20px; margin-top:20px; }
.btn-ghost { background:#ffffff; color:#061232; border:none; border-radius:8px; height:40px;
padding:0 20px; font-size:15px; font-weight:500; box-shadow:none; white-space:nowrap; }
.link-ondark { color:#ffffff; font-size:14px; opacity:0.85; }
.section-title { text-align:center; font-size:20px; font-weight:600; color:#333333; letter-spacing:-0.4px;
margin:22px 0 16px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 40px 20px; }
.card { background:#ffffff; border:1px solid #edf1f7; border-radius:8px; padding:16px;
box-shadow:rgba(0,0,0,0.04) 0px 0px 10px 0px; }
.icon-swatch { width:32px; height:32px; border-radius:8px; background:#edf1f7; position:relative; }
.icon-swatch::after { content:''; position:absolute; width:12px; height:12px; border-radius:4px;
background:#3a82dd; top:10px; left:10px; }
.card h3 { font-size:14px; font-weight:600; letter-spacing:-0.3px; color:#333333; margin:10px 0 0; }
.card p { font-size:12px; line-height:1.4; color:#525151; margin:6px 0 0; }
.chip { display:inline-block; margin-top:10px; background:#ffffff; border:1px solid #edf1f7; border-radius:30px;
padding:3px 10px; font-size:11px; font-weight:500; color:#3a82dd; }
footer { height:40px; border-top:1px solid #edf1f7; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; }
footer span { font-size:11px; color:#6b7280; }
</style></head>
<body>
<nav>
<p class="brand">iKala</p>
<div class="navlinks">
<span class="active">Solutions</span><span>Industries</span><span>Resources</span><span>About</span>
</div>
<button class="btn-navy">Contact</button>
</nav>
<section class="hero">
<p class="eyebrow">AI Transformation Platform</p>
<h1>Data → Intelligence → Impact</h1>
<p>Total AI transformation solutions and services for manufacturing, retail, and finance.</p>
<div class="hero-cta">
<button class="btn-ghost">Try it Now</button>
<span class="link-ondark">Get in Touch →</span>
</div>
</section>
<p class="section-title">Built for every industry</p>
<div class="cards">
<div class="card">
<div class="icon-swatch"></div>
<h3>Manufacturing</h3>
<p>Operational intelligence for the factory floor, from forecasting to quality control.</p>
<span class="chip">Case Study →</span>
</div>
<div class="card">
<div class="icon-swatch"></div>
<h3>Retail</h3>
<p>AI-driven demand planning and customer insight across every channel.</p>
<span class="chip">Case Study →</span>
</div>
<div class="card">
<div class="icon-swatch"></div>
<h3>Finance</h3>
<p>Risk and compliance automation built for regulated APAC institutions.</p>
<span class="chip">Case Study →</span>
</div>
</div>
<footer>
<span>© iKala</span>
<span>Privacy · Terms · Contact</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #969696; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #003388; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #003388;
border: 1px solid #003388; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #bfbfbf; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969696; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #00d084; color: #313131;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#eeeeee; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:64px;background:#003388;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.logo{font-size:20px;font-weight:700;color:#fff;letter-spacing:0.5px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;}
.navlinks span{color:rgba(255,255,255,0.7);}
.navlinks .active{color:#fff;background:rgba(255,255,255,0.1);border-radius:4px;padding:6px 12px;}
.body{padding:20px 28px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:8px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,0.1);}
.thumb{height:120px;border-radius:4px;margin-bottom:10px;}
.title{font-size:16px;font-weight:600;color:#313131;}
.meta{font-size:13px;color:#969696;margin-top:4px;}
.price{font-size:14px;color:#969696;margin-top:6px;}
.badge{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:2px;}
.b-new{background:#00d084;color:#313131;}
.b-limited{background:#7a00df;color:#fff;}
.swatchrow{display:flex;gap:8px;margin-top:20px;padding-left:4px;}
.swatch{width:24px;height:24px;border-radius:9999px;border:2px solid #969696;}
.sel{border:2px solid #313131;}
.sectiontitle{font-size:13px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#444;margin:22px 0 12px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#003388;color:rgba(255,255,255,0.7);font-size:12px;display:flex;align-items:center;padding:0 28px;gap:20px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Southern Lord</div>
<div class="navlinks"><span class="active">Releases</span><span>Artists</span><span>Shop</span><span>Info</span></div>
</div>
<div class="body">
<div class="sectiontitle">Vinyl Variant — Choose Your Pressing</div>
<div class="swatchrow">
<div class="swatch" style="background:#34e2e4"></div>
<div class="swatch sel" style="background:#4721fb"></div>
<div class="swatch" style="background:#ab1dfe"></div>
<div class="swatch" style="background:#faaca8"></div>
<div class="swatch" style="background:#67a671"></div>
</div>
<div class="sectiontitle">New Pressings</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003388,#1a1a1a)"></div><div class="title">Descent Into Static</div><div class="meta">Doom / LP</div><div class="price">$34.00</div><div class="badge b-new">New</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7a00df,#1a1a1a)"></div><div class="title">Cathedral of Ash</div><div class="meta">Drone / 2xLP</div><div class="price">$44.00</div><div class="badge b-limited">Limited</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#003388,#00d084)"></div><div class="title">Blackened Hymn</div><div class="meta">Black Metal / LP</div><div class="price">$30.00</div></div>
</div>
</div>
<div class="footer"><span>Releases</span><span>Artists</span><span>Newsletter</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4500; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4500; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d93900; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4500; color: #000000;
border: 1px solid #d93900; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4500; color: #f5f5f5;
border: 1px solid #fd6127; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f94300; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F6F8F9; color:#333D42; box-sizing:border-box;
font-family:-apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#ffffff; display:flex; align-items:center; gap:18px; padding:0 28px;
box-shadow:0px 4px 14px rgba(0,0,0,0.1); position:relative; z-index:2; }
.brand { display:flex; align-items:center; gap:8px; font-size:17px; font-weight:700; color:#181C1F; }
.brand .snoo { width:26px; height:26px; border-radius:50%; background:#FF4500; }
.search { flex:1; max-width:380px; height:36px; background:#F8F8F8; border-radius:9999px; display:flex; align-items:center; padding:0 14px; font-size:13px; color:#5C6C74; }
.navr { margin-left:auto; display:flex; gap:10px; }
.btn { border-radius:9999px; height:34px; padding:0 16px; font-size:13px; font-weight:600; display:flex; align-items:center; }
.btn.primary { background:#D93900; color:#fff; }
.btn.secondary { background:#E5EBEE; color:#181C1F; }
.tabs { display:flex; gap:20px; padding:10px 28px; background:#fff; border-bottom:1px solid #E5EBEE; font-size:13px; }
.tab { color:#5C6C74; }
.tab.active { color:#181C1F; font-weight:600; }
.feed { display:flex; gap:16px; padding:16px 28px; }
.col { flex:1; display:flex; flex-direction:column; gap:12px; }
.post { background:#FFFFFF; border:1px solid rgba(0,0,0,0.2); border-radius:16px; padding:14px;
box-shadow:0 0.0625rem 0.25rem 0 rgba(0,0,0,0.149); }
.post .meta { font-size:11px; color:#5C6C74; margin:0 0 6px; display:flex; gap:6px; align-items:center; }
.post .meta .flair { background:#E5EBEE; color:#333D42; border-radius:9999px; padding:1px 8px; font-size:10px; font-weight:600; }
.post h4 { font-size:15px; font-weight:600; margin:0 0 8px; color:#181C1F; line-height:1.3; }
.post .thumb { height:70px; border-radius:8px; margin-bottom:8px; }
.thumb.t1 { background:linear-gradient(135deg,#FF4500,#AE2C00); }
.thumb.t2 { background:linear-gradient(135deg,#1870F4,#0A2F6C); }
.thumb.t3 { background:linear-gradient(135deg,#6A5CFF,#3a2ba0); }
.post .foot { display:flex; align-items:center; gap:10px; font-size:12px; color:#5C6C74; }
.vote { display:flex; align-items:center; gap:4px; background:#F6F8F9; border-radius:9999px; padding:3px 10px; }
.vote .up { color:#FF4500; font-weight:700; }
.vote .down { color:#6A5CFF; font-weight:700; }
.side { width:200px; }
.sidecard { background:#fff; border:1px solid rgba(0,0,0,0.2); border-radius:16px; padding:14px; }
.sidecard h5 { font-size:12px; font-weight:700; text-transform:uppercase; color:#5C6C74; margin:0 0 10px; }
.sidecard .row { display:flex; align-items:center; gap:8px; font-size:12px; color:#333D42; margin-bottom:10px; }
.sidecard .sw { width:20px; height:20px; border-radius:50%; flex-shrink:0; }
.sw.a { background:#FF4500; } .sw.b { background:#1870F4; } .sw.c { background:#008A10; }
.sidecard .join { background:#D93900; color:#fff; border-radius:9999px; font-size:11px; font-weight:600; padding:4px 10px; margin-left:auto; }
</style></head>
<body>
<nav>
<span class="brand"><span class="snoo"></span>Reddit</span>
<span class="search">Search Reddit</span>
<div class="navr"><span class="btn secondary">Sign Up</span><span class="btn primary">Log In</span></div>
</nav>
<div class="tabs">
<span class="tab active">Best</span><span class="tab">Hot</span><span class="tab">New</span><span class="tab">Top</span>
</div>
<div class="feed">
<div class="col">
<div class="post">
<p class="meta">r/webdev · <span class="flair">Discussion</span></p>
<div class="thumb t1"></div>
<h4>What's the one CSS trick you wish you knew earlier?</h4>
<div class="foot"><span class="vote"><span class="up">▲</span> 4.2k <span class="down">▼</span></span><span>318 comments</span></div>
</div>
<div class="post">
<p class="meta">r/dataisbeautiful · <span class="flair">OC</span></p>
<div class="thumb t2"></div>
<h4>[OC] Global coffee consumption by country, 2026</h4>
<div class="foot"><span class="vote"><span class="up">▲</span> 1.9k <span class="down">▼</span></span><span>142 comments</span></div>
</div>
</div>
<div class="col">
<div class="post">
<p class="meta">r/movies · <span class="flair">Review</span></p>
<div class="thumb t3"></div>
<h4>Just watched the new sci-fi everyone's talking about — no spoilers</h4>
<div class="foot"><span class="vote"><span class="up">▲</span> 887 <span class="down">▼</span></span><span>76 comments</span></div>
</div>
<div class="post">
<p class="meta">r/askscience</p>
<h4>Why does the sky turn orange right after sunset but not before?</h4>
<div class="foot"><span class="vote"><span class="up">▲</span> 2.3k <span class="down">▼</span></span><span>210 comments</span></div>
</div>
</div>
<div class="side">
<div class="sidecard">
<h5>Trending Today</h5>
<div class="row"><span class="sw a"></span> r/technology <span class="join">Join</span></div>
<div class="row"><span class="sw b"></span> r/space <span class="join">Join</span></div>
<div class="row"><span class="sw c"></span> r/cooking <span class="join">Join</span></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:"Clarkson", Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-size:16px; font-weight:400; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#fff; }
.cta { background:#ffffff; color:#000000; padding:14px 22px; font-size:13px; font-weight:500; }
.hero { text-align:center; padding:20px 40px 26px; }
.hero h1 { font-size:52px; font-weight:300; letter-spacing:-3px; line-height:1.04; margin:0 0 14px; }
.hero p { font-size:15px; color:#cfcfcf; margin:0 0 18px; }
.cta2 { display:inline-block; background:#ffffff; color:#000; padding:16px 26px; font-size:13px; font-weight:500; }
.lightband { background:#ffffff; color:#000; padding:26px 40px; }
.lightband h2 { font-size:30px; font-weight:400; letter-spacing:-1.2px; margin:0 0 14px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#2f2f2f; color:#fff; border-radius:8px; padding:18px; }
.card h3 { font-size:16px; font-weight:400; margin:0 0 6px; }
.card p { font-size:12px; color:#898989; margin:0; }
.pills { display:flex; gap:8px; padding:14px 40px 0; background:#fff; }
.pill { border-radius:100px; padding:6px 16px; font-size:13px; color:#898989; }
.pill.on { background:#dddddd; color:#000; }
</style></head>
<body>
<nav>
<p class="brand">Squarespace</p>
<div class="navlinks"><span>Templates</span><span>Website Design</span><span>Commerce</span><span>Pricing</span></div>
<span class="cta">Get started</span>
</nav>
<section class="hero">
<h1>A website makes it real.</h1>
<p>Make any website template yours with ease.</p>
<span class="cta2">Get started</span>
</section>
<section class="lightband">
<h2>Grow your business</h2>
<div class="pills">
<span class="pill on">Photography</span><span class="pill">Design</span><span class="pill">Education</span><span class="pill">Consulting</span><span class="pill">Art</span>
</div>
<div class="cards" style="margin-top:14px;">
<div class="card"><h3>Extensions</h3><p>Connect the tools you already use.</p></div>
<div class="card"><h3>Payments</h3><p>Accept multiple payment types.</p></div>
<div class="card"><h3>Design Intelligence</h3><p>Editorial-quality layout at every tier.</p></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f7e9; color: #022501;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f7e9; color: #022501;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #022501; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5a5a5a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #022501; color: #f9f7e9;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #f9f7e9; color: #022501;
border: 1px solid #022501; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9f7e9; color: #121212;
border: 1px solid #bbc2af; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a5a5a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #a83317; color: #f9f7e9;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f7e9; font-family:'Jost','Helvetica Neue',Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dedede;}
.logo{font-size:19px;font-weight:600;color:#022501;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;color:#121212;}
.search{font-size:14px;color:#022501;}
.hero{height:280px;position:relative;background:linear-gradient(150deg,#83c5e0 0%,#f9f7e9 55%,#022501 130%);display:flex;align-items:center;}
.overlay{position:absolute;inset:0;background:#022501;opacity:0.32;}
.heroText{position:relative;z-index:2;width:440px;padding:0 40px;}
.h1{font-size:32px;font-weight:500;line-height:1.2;color:#f9f7e9;margin:0 0 14px;}
.sub{font-size:14px;color:#f9f7e9;line-height:1.5;margin:0 0 20px;width:370px;opacity:0.92;}
.cta{display:inline-flex;align-items:center;justify-content:center;width:170px;height:46px;background:#022501;color:#f9f7e9;font-size:14px;font-weight:500;border-radius:0;}
.sec{padding:26px 40px 0;}
.secTitle{font-size:16px;font-weight:500;color:#022501;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#ffffff;border-radius:6px;padding:16px;position:relative;}
.thumb{height:96px;border-radius:6px;margin-bottom:10px;}
.brass{position:absolute;top:26px;left:26px;font-size:11px;font-weight:600;color:#c3a141;}
.pname{font-size:13px;font-weight:500;color:#121212;margin:0 0 4px;}
.pprice{font-size:13px;font-weight:600;color:#c3a141;}
</style>
<div class="nav">
<div class="logo">William Ellery</div>
<div class="navlinks"><span>Outerwear</span><span>Field Gear</span><span>Journal</span></div>
<div class="search">🔍</div>
</div>
<div class="hero">
<div class="overlay"></div>
<div class="heroText">
<div class="h1">A field guide for the long haul.</div>
<div class="sub">Waxed cotton and brass hardware, built to weather every season.</div>
<div class="cta">Shop The Journal</div>
</div>
</div>
<div class="sec">
<div class="secTitle">Field Essentials</div>
<div class="grid">
<div class="card"><span class="brass">$</span><div class="thumb" style="background:linear-gradient(135deg,#022501,#83c5e0);"></div><div class="pname">Waxed Field Jacket</div><div class="pprice">$248</div></div>
<div class="card"><span class="brass">$</span><div class="thumb" style="background:linear-gradient(135deg,#83c5e0,#022501);"></div><div class="pname">Canvas Trail Pack</div><div class="pprice">$168</div></div>
<div class="card"><span class="brass">$</span><div class="thumb" style="background:linear-gradient(135deg,#c3a141,#022501);"></div><div class="pname">Brass Compass</div><div class="pprice">$58</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.38; margin: 0; color: #8a8d8b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #116dff; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: transparent; color: #116dff;
border: 1px solid #116dff; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #080808;
border: 1px solid #c1c1c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8d8b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.8px; background: #e02020; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Hisense Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Wix Madefor Text',Helvetica,Arial,sans-serif; background:#080808; color:#fff; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #1a1a1a;}
.logo{font-weight:700;font-size:19px;letter-spacing:-.3px;}
.navlinks{display:flex;gap:26px;font-size:13px;font-weight:500;color:#eee;}
.navlinks span:hover, .navlinks span.active{color:#116dff;}
.navicons{display:flex;gap:16px;font-size:12px;color:#ccc;}
.hero{height:270px;display:flex;align-items:center;padding:0 32px;gap:30px;}
.hero-txt{max-width:340px;}
.hero-txt .eyebrow{color:#116dff;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-bottom:8px;}
.hero-txt h1{font-size:34px;font-weight:700;line-height:1.15;margin:0 0 10px;letter-spacing:-.5px;}
.hero-txt p{font-size:14px;color:#bbb;line-height:1.5;margin:0 0 16px;}
.btnrow{display:flex;gap:10px;}
.btn-primary{background:#116dff;color:#fff;font-size:13px;font-weight:600;padding:10px 22px;border-radius:4px;}
.btn-ghost{border:1px solid #fff;color:#fff;font-size:13px;font-weight:600;padding:9px 21px;border-radius:4px;}
.hero-visual{flex:1;height:210px;background:linear-gradient(135deg,#111,#1c1c1c);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#444;font-size:12px;letter-spacing:1px;position:relative;}
.hero-visual::before{content:'';position:absolute;left:20px;right:20px;top:20px;bottom:20px;border:2px solid #222;border-radius:6px;}
.section{padding:18px 32px;}
.section h2{font-size:16px;font-weight:700;margin:0 0 12px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#fff;color:#080808;border-radius:8px;padding:12px;position:relative;}
.card .imgbox{height:64px;background:#f2f6ff;border-radius:6px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:#8ab0ff;font-size:10px;}
.badge{position:absolute;top:8px;left:8px;background:#e02020;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.pname{font-size:13px;font-weight:600;margin:0 0 4px;}
.pfeat{font-size:10px;color:#666;margin:0 0 6px;}
.price{font-size:15px;font-weight:700;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#080808;border-top:1px solid #1a1a1a;padding:10px 32px;display:flex;justify-content:space-between;font-size:10px;color:#999;}
</style>
<div class="nav">
<div class="logo">Hisense</div>
<div class="navlinks"><span class="active">TV</span><span>Audio</span><span>Appliances</span><span>Air Products</span></div>
<div class="navicons">Search · Support · Where to Buy</div>
</div>
<div class="hero">
<div class="hero-txt">
<div class="eyebrow">ULED Mini-LED</div>
<h1>See more.<br>Feel everything.</h1>
<p>100" class Mini-LED with Dolby Vision IQ and 5000 nits peak brightness.</p>
<div class="btnrow"><div class="btn-primary">Shop Now</div><div class="btn-ghost">Learn More</div></div>
</div>
<div class="hero-visual">PRODUCT PHOTOGRAPHY</div>
</div>
<div class="section">
<h2>Featured TVs</h2>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="imgbox">U8N Series</div><div class="pname">U8N ULED Mini-LED</div><div class="pfeat">65" · Dolby Vision · Google TV</div><div class="price">$1,199</div></div>
<div class="card"><div class="imgbox">U7N Series</div><div class="pname">U7N QLED</div><div class="pfeat">55" · Quantum Dot · 4K</div><div class="price">$699</div></div>
<div class="card"><div class="imgbox">CX3</div><div class="pname">CX3 Soundbar</div><div class="pfeat">Dolby Atmos · Wireless Sub</div><div class="price">$399</div></div>
<div class="card"><div class="imgbox">French Door</div><div class="pname">French Door Fridge</div><div class="pfeat">27 cu ft · Energy Star</div><div class="price">$1,499</div></div>
</div>
</div>
<div class="footer"><span>© Hisense USA</span><span>Products · Support · About · Legal</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00d5ce; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00d5ce; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096966; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #22d3d6; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00d5ce; color: #000000;
border: 1px solid #22d3d6; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00d5ce; color: #111111;
border: 1px solid #03b6b0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096966; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #05d5cf; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f7; color:#000000; box-sizing:border-box;
font-family:"Pretendard","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; }
.logo { font-size:19px; font-weight:700; color:#00d5ce; }
.navlinks { display:flex; gap:20px; font-size:15px; color:#111111; }
.navlinks .active { font-weight:600; }
.search { background:#ffffff; border:1px solid #e8e8e8; border-radius:8px; height:32px; width:180px;
display:flex; align-items:center; padding:0 12px; font-size:14px; color:#aaaaaa; }
.section { padding:20px 36px 6px; }
.section h2 { font-size:18px; font-weight:600; letter-spacing:-0.2px; margin:0 0 12px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:0 36px 20px; }
.card { background:#ffffff; border-radius:16px; box-shadow:rgba(0,0,0,0.08) 0px 2px 8px 0px;
border:1px solid #e8e8e8; padding:10px; }
.card .thumb { height:70px; border-radius:8px; background:linear-gradient(135deg,#eefbfb,#00a5aa); margin-bottom:8px; }
.card h3 { font-size:13px; font-weight:600; margin:0 0 6px; }
.card .rate { color:#ffaa3c; font-size:12px; font-weight:600; }
.mint { background:#eefbfb; margin:0 36px 20px; border-radius:16px; padding:16px; }
.mint h2 { font-size:18px; font-weight:600; margin:0 0 10px; }
.rowcards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.rowcards .card { box-shadow:none; }
</style></head>
<body>
<nav>
<span class="logo">Hwahae</span>
<div class="navlinks"><span class="active">Home</span><span>Rankings</span><span>Awards</span></div>
<span class="search">Search cosmetics or brands</span>
</nav>
<div class="section">
<h2>Rankings chosen directly by our customers</h2>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><h3>Moisture Cream</h3><span class="rate">★ 4.8</span></div>
<div class="card"><div class="thumb"></div><h3>Sunscreen</h3><span class="rate">★ 4.7</span></div>
<div class="card"><div class="thumb"></div><h3>Cleansing Foam</h3><span class="rate">★ 4.6</span></div>
<div class="card"><div class="thumb"></div><h3>Toner</h3><span class="rate">★ 4.9</span></div>
</div>
<div class="mint">
<h2>Rankings matched to your skin type</h2>
<div class="rowcards">
<div class="card"><div class="thumb"></div><h3>Calming Serum</h3><span class="rate">★ 4.7</span></div>
<div class="card"><div class="thumb"></div><h3>Gentle Lotion</h3><span class="rate">★ 4.5</span></div>
<div class="card"><div class="thumb"></div><h3>Hydrating Ampoule</h3><span class="rate">★ 4.8</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.0; letter-spacing: 0.8px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.0; letter-spacing: 1.5px; background: #444444; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.0; letter-spacing: 1.5px; background: #ffffff; color: #444444;
border: 1px solid #444444; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.9px; background: transparent; color: #888888;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Enlightened Equipment — Home</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#444444;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
}
*{box-sizing:border-box;}
.page{width:960px;height:640px;display:flex;flex-direction:column;}
header{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #cccccc;}
.logo{font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif;font-size:22px;letter-spacing:1.5px;text-transform:uppercase;color:#1a1a1a;}
nav{display:flex;gap:26px;}
nav a{font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:#444444;}
.nav-cart{border:1px solid #444444;padding:6px 14px;font-family:'Bebas Neue',Impact,sans-serif;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#1a1a1a;}
.hero{display:flex;border-bottom:1px solid #cccccc;}
.hero-copy{flex:1;padding:38px 32px;background:#ffffff;}
.hero-copy .kicker{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#888888;margin-bottom:8px;font-weight:600;}
.hero-copy h1{font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif;font-size:56px;line-height:0.95;letter-spacing:1px;text-transform:uppercase;color:#1a1a1a;margin:0 0 14px;}
.hero-copy p{font-size:14px;line-height:1.6;color:#444444;max-width:360px;margin:0 0 18px;}
.hero-cta{display:inline-block;background:#444444;color:#ffffff;padding:12px 22px;font-family:'Bebas Neue',Impact,sans-serif;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;}
.hero-visual{width:340px;background:#eeeeee;position:relative;display:flex;align-items:center;justify-content:center;}
.quilt{width:230px;height:150px;background:linear-gradient(120deg,#f4f4f4,#e2e2e2);border:1px solid #cccccc;position:relative;}
.quilt::before,.quilt::after{content:'';position:absolute;top:0;bottom:0;width:1px;background:#cccccc;}
.quilt::before{left:33%;}
.quilt::after{left:66%;}
.baffle-line{position:absolute;left:0;right:0;top:50%;height:1px;background:#cccccc;}
.weight-tag{position:absolute;bottom:14px;right:14px;background:#2a2a2a;color:#eeeeee;font-family:'Bebas Neue',Impact,sans-serif;font-size:11px;letter-spacing:1px;padding:4px 8px;}
main{flex:1;padding:22px 32px 0;}
.configurator{display:flex;gap:16px;margin-bottom:20px;}
.step-panel{flex:1;border:1px solid #cccccc;padding:12px;}
.step-panel .step-label{font-family:'Bebas Neue',Impact,sans-serif;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#1a1a1a;margin-bottom:8px;}
.spec-chip{display:inline-block;background:#eeeeee;color:#1a1a1a;font-size:10px;letter-spacing:0.6px;text-transform:uppercase;padding:5px 9px;margin:2px 4px 2px 0;font-family:'Courier New',monospace;font-weight:700;}
.row-head{font-family:'Bebas Neue',Impact,sans-serif;font-size:18px;letter-spacing:1px;text-transform:uppercase;color:#1a1a1a;margin:0 0 12px;border-bottom:1px solid #cccccc;padding-bottom:8px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{border:1px solid #cccccc;padding:0;}
.card .thumb{height:70px;background:linear-gradient(135deg,#eeeeee,#dcdcdc);border-bottom:1px solid #cccccc;}
.card .info{padding:10px;}
.card h4{font-size:12px;margin:0 0 6px;color:#1a1a1a;font-weight:600;}
.card .price{font-family:'Bebas Neue',Impact,sans-serif;font-size:16px;letter-spacing:0.5px;color:#1a1a1a;}
footer{background:#2a2a2a;color:#eeeeee;padding:16px 32px;display:flex;justify-content:space-between;align-items:center;margin-top:16px;}
footer .flinks{display:flex;gap:18px;}
footer .flinks span{font-family:'Bebas Neue',Impact,sans-serif;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#cccccc;}
footer .fcopy{font-size:10px;color:#888888;}
</style>
<div class="page">
<header>
<div class="logo">Enlightened Equipment</div>
<nav><a>Quilts</a><a>Packs</a><a>Rain Gear</a><a>Configurator</a></nav>
<div class="nav-cart">Cart (0)</div>
</header>
<div class="hero">
<div class="hero-copy">
<div class="kicker">Ultralight since day one</div>
<h1>Carry<br>less. Go<br>further.</h1>
<p>Custom sleeping quilts built to your fill power, shell fabric, and temperature rating — every gram accounted for.</p>
<div class="hero-cta">Start Configurator</div>
</div>
<div class="hero-visual">
<div class="quilt"><div class="baffle-line"></div><div class="weight-tag">17.4 OZ</div></div>
</div>
</div>
<main>
<div class="configurator">
<div class="step-panel">
<div class="step-label">01 — Fill Power</div>
<span class="spec-chip">850 FP</span><span class="spec-chip">950 FP</span>
</div>
<div class="step-panel">
<div class="step-label">02 — Shell Fabric</div>
<span class="spec-chip">10D Nylon</span><span class="spec-chip">7D Ripstop</span>
</div>
<div class="step-panel">
<div class="step-label">03 — Temp Rating</div>
<span class="spec-chip">20°F</span><span class="spec-chip">10°F</span><span class="spec-chip">0°F</span>
</div>
</div>
<div class="row-head">Revelation Quilt Series</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="info"><h4>Revelation 20°F</h4><div class="price">$259</div></div></div>
<div class="card"><div class="thumb"></div><div class="info"><h4>Revelation 10°F</h4><div class="price">$299</div></div></div>
<div class="card"><div class="thumb"></div><div class="info"><h4>Enigma 20°F</h4><div class="price">$279</div></div></div>
<div class="card"><div class="thumb"></div><div class="info"><h4>Rain Shell, Prism</h4><div class="price">$189</div></div></div>
</div>
</main>
<footer>
<div class="flinks"><span>Sizing Guide</span><span>Fill Power</span><span>Warranty</span></div>
<div class="fcopy">© Enlightened Equipment — Made to your grams</div>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #333333; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #333333; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #080808; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif; }
* { box-sizing:border-box; }
header { height:64px; display:flex; align-items:center; gap:20px; padding:0 32px;
border-bottom:1px solid #e5e5e5; }
.brand { font-size:19px; font-weight:700; color:#000000; letter-spacing:-0.3px; margin:0; white-space:nowrap; }
.search { flex:1; height:30px; display:flex; align-items:center; gap:8px; padding:0 28px 0 0;
border-bottom:1px solid #dddddd; max-width:340px; }
.search span { font-size:16px; color:#9d9d9d; }
.search::before { content:''; width:16px; height:16px; border:2px solid #000000; border-radius:50%; flex:none; }
.util { display:flex; align-items:center; gap:14px; margin-left:auto; }
.recent-drop { height:32px; display:flex; align-items:center; gap:6px; padding:0 16px 0 16px;
border:1px solid #dddddd; font-size:13px; color:#333333; white-space:nowrap; }
.recent-drop::after { content:'▾'; font-size:9px; color:#757575; }
.tabs { display:flex; gap:10px; padding:16px 32px 14px; border-bottom:1px solid #eeeeee; }
.tab { height:46px; display:flex; align-items:center; gap:4px; padding:0 16px 0 16px;
border:1px solid #eeeeee; border-radius:23px; font-size:15px; font-weight:500; color:#666666;
background:#ffffff; white-space:nowrap; }
.tab.on { background:#000000; color:#ffffff; border-color:#000000; font-weight:600; }
.tab .dot { width:22px; height:22px; border-radius:50%; background:#f3f3f3; flex:none; }
.tab.on .dot { background:rgba(255,255,255,0.25); }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:20px 32px 28px; }
.card { display:flex; flex-direction:column; gap:8px; }
.thumb { width:100%; aspect-ratio:1/1; position:relative; overflow:hidden; }
.thumb.a { background:linear-gradient(135deg,#f5f5f5,#e9e9e9); }
.thumb.b { background:linear-gradient(135deg,#f0eee6,#e3ded0); }
.thumb.c { background:linear-gradient(135deg,#eef0f5,#dfe3ec); }
.thumb.d { background:linear-gradient(135deg,#f4efee,#e6dbda); }
.badge { position:absolute; top:8px; left:8px; background:#000000; color:#ffffff; font-size:10px;
font-weight:700; padding:3px 7px; letter-spacing:0.02em; }
.card .tag { font-size:11px; color:#757575; font-weight:500; }
.card .name { font-size:13px; color:#333333; line-height:1.35; font-weight:500;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; height:35px; }
.price-row { display:flex; align-items:baseline; gap:6px; }
.discount { font-size:15px; font-weight:700; color:#000000; }
.price { font-size:14px; font-weight:600; color:#333333; }
.orig { font-size:12px; color:#9d9d9d; text-decoration:line-through; }
</style></head>
<body>
<header>
<p class="brand">Lotte ON</p>
<div class="search"><span>Search for brands, benefits, categories</span></div>
<div class="util">
<div class="recent-drop">Recently viewed</div>
</div>
</header>
<div class="tabs">
<div class="tab on"><span class="dot"></span>All</div>
<div class="tab"><span class="dot"></span>Beauty</div>
<div class="tab"><span class="dot"></span>Fashion</div>
<div class="tab"><span class="dot"></span>Grocery</div>
<div class="tab"><span class="dot"></span>Kids</div>
<div class="tab"><span class="dot"></span>Luxury</div>
</div>
<div class="grid">
<div class="card"><div class="thumb a"><span class="badge">BEST</span></div>
<span class="tag">Home Living</span><span class="name">Linen blend cushion cover, two-tone stitch edge</span>
<div class="price-row"><span class="discount">32%</span><span class="price">$13.90</span><span class="orig">$20.40</span></div></div>
<div class="card"><div class="thumb b"></div>
<span class="tag">Grocery</span><span class="name">Daily harvest mixed greens, chilled delivery pack</span>
<div class="price-row"><span class="discount">12%</span><span class="price">$7.30</span><span class="orig">$8.30</span></div></div>
<div class="card"><div class="thumb c"><span class="badge">NEW</span></div>
<span class="tag">Beauty</span><span class="name">Barrier repair cream, ceramide complex 50ml</span>
<div class="price-row"><span class="discount">20%</span><span class="price">$17.60</span><span class="orig">$22.00</span></div></div>
<div class="card"><div class="thumb d"></div>
<span class="tag">Fashion</span><span class="name">Relaxed wool-blend coat, unisex fit</span>
<div class="price-row"><span class="discount">40%</span><span class="price">$65.40</span><span class="orig">$108.60</span></div></div>
<div class="card"><div class="thumb b"></div>
<span class="tag">Kids</span><span class="name">Organic cotton sleep set, 4-piece</span>
<div class="price-row"><span class="discount">15%</span><span class="price">$24.90</span><span class="orig">$29.30</span></div></div>
<div class="card"><div class="thumb a"><span class="badge">BEST</span></div>
<span class="tag">Home Living</span><span class="name">Ceramic dinnerware set, matte glaze, 4 pieces</span>
<div class="price-row"><span class="discount">25%</span><span class="price">$33.00</span><span class="orig">$44.10</span></div></div>
<div class="card"><div class="thumb c"></div>
<span class="tag">Luxury</span><span class="name">Structured leather tote, top handle</span>
<div class="price-row"><span class="discount">10%</span><span class="price">$229.20</span><span class="orig">$254.10</span></div></div>
<div class="card"><div class="thumb d"><span class="badge">NEW</span></div>
<span class="tag">Grocery</span><span class="name">Cold-pressed juice bundle, 6 bottles</span>
<div class="price-row"><span class="discount">18%</span><span class="price">$16.10</span><span class="orig">$19.60</span></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #635bff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #635bff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b3b0fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #414552; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #635bff; color: #ffffff;
border: 1px solid #414552; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #635bff; color: #f5f5f5;
border: 1px solid #7a74fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b3b0fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5e57e3; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#414552; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #d4dee9; }
.brand { font-size:15px; font-weight:700; color:#1a2c44; }
.search { background:#ffffff; border:1px solid #d4dee9; border-radius:8px; height:30px; width:220px;
display:flex; align-items:center; padding:2px 8px; font-size:13px; color:#5469d4; }
.navlinks { display:flex; gap:18px; font-size:13px; }
.navlinks span.on { color:#414552; font-weight:600; border-bottom:2px solid #414552; padding-bottom:14px; }
.navlinks span { color:#50617a; }
.wrap { display:flex; height:calc(640px - 52px - 30px); }
.side { width:200px; border-right:1px solid #d4dee9; padding:16px 14px; }
.side .grp { font-size:11px; font-weight:600; text-transform:uppercase; color:#5c5e62; margin:12px 0 6px; }
.side .item { font-size:13px; color:#414552; padding:6px 8px; border-radius:8px; margin-bottom:2px; }
.side .item.on { background:#f4f7fa; color:#273951; font-weight:600; }
.content { flex:1; padding:20px 28px; }
.content h1 { font-size:32px; font-weight:700; line-height:1.25; margin:0 0 8px; color:#1a2c44; }
.content p.lead { font-size:14px; color:#414552; line-height:1.43; margin:0 0 14px; }
.badge-row { display:flex; gap:8px; margin-bottom:14px; }
.badge { border:1px solid #d4dee9; border-radius:8px; padding:2px 8px; font-size:12px; color:#414552; }
.code { background:#f4f7fa; border:1px solid #d4dee9; border-radius:8px; padding:14px 16px;
font-family:"SF Mono", Menlo, monospace; font-size:12px; line-height:1.7; color:#414552; }
.code .k { color:#5469d4; } .code .s { color:#533afd; }
.actions { display:flex; gap:10px; margin-top:14px; }
.btn { background:#ffffff; border:0px solid #5469d4; color:#5469d4; border-radius:8px; padding:6px 12px;
font-size:14px; }
.btn2 { background:#ffffff; color:#50617a; border:0px solid #d4dee9; border-radius:8px; padding:6px 12px;
font-size:14px; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #d4dee9; padding:8px 32px;
display:flex; justify-content:space-between; font-size:11px; color:#5c5e62; }
</style></head>
<body>
<nav>
<div class="brand">Stripe Docs</div>
<div class="search">Search the docs...</div>
<div class="navlinks"><span class="on">Payments</span><span>API reference</span><span>Guides</span></div>
</nav>
<div class="wrap">
<div class="side">
<div class="grp">Get started</div>
<div class="item on">Payments overview</div>
<div class="item">Accept a payment</div>
<div class="grp">Build</div>
<div class="item">Checkout</div>
<div class="item">Elements</div>
<div class="item">Webhooks</div>
<div class="grp">Reference</div>
<div class="item">API index</div>
</div>
<div class="content">
<h1>Accept a payment</h1>
<p class="lead">Use a single integration to accept payments across cards, wallets, and local payment methods.</p>
<div class="badge-row"><span class="badge">Server</span><span class="badge">Client</span><span class="badge">v2026-06-01</span></div>
<div class="code">
curl https://api.Stripe.com/v1/payment_intents \<br>
-u <span class="s">sk_test_...</span>: \<br>
-d <span class="k">amount</span>=2000 \<br>
-d <span class="k">currency</span>=usd \<br>
-d <span class="k">payment_method_types[]</span>=card
</div>
<div class="actions"><span class="btn">View full reference</span><span class="btn2">Copy snippet</span></div>
</div>
</div>
<footer><span>© Stripe</span><span>Docs · API reference · Support</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4e9; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4e9; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #8c8c8c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.8px; background: #0099ff; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.8px; background: transparent; color: #222222;
border: 1px solid #0099ff; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c0c0b7; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 500; line-height: 1.2; letter-spacing: 1px; background: #d2e7ec; color: #000000;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f4f4e9; font-family:'Helvetica Neue',Arial,Helvetica,sans-serif; color:#222222; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #c3c5c4;}
.logo{font-size:14px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;}
.navlinks{display:flex;gap:20px;font-size:13px;color:#222;}
.searchbar{height:36px;width:200px;background:#fff;border:1px solid #c3c5c4;display:flex;align-items:center;padding:0 10px;font-size:12px;color:#8c8c8c;}
.hero{display:flex;padding:26px 28px;}
.heroimg{width:50%;height:200px;background:#e3e3c7;}
.herotext{width:50%;padding-left:32px;display:flex;flex-direction:column;justify-content:center;}
.h1{font-size:36px;font-weight:500;line-height:1.2;letter-spacing:-0.5px;margin:0 0 10px;}
.sub{font-size:14px;line-height:1.6;color:#777;margin:0 0 18px;max-width:300px;}
.btn{display:inline-block;background:#0099ff;color:#fff;font-size:13px;font-weight:500;letter-spacing:0.8px;text-transform:uppercase;padding:12px 24px;width:fit-content;}
.rule{height:3px;margin:0 28px;background:#0099ff;}
.grid{display:flex;gap:0;padding:16px 28px 0;}
.card{width:200px;border:1px solid #e1e1e1;padding:8px;margin-right:14px;}
.thumb{aspect-ratio:1/1;height:120px;background:#f5f5f5;}
.pname{font-size:15px;font-weight:500;margin-top:8px;}
.desc{font-size:12px;color:#777;margin-top:2px;}
.price{font-size:16px;font-weight:500;margin-top:6px;}
.tag{display:inline-block;font-size:10px;font-weight:500;letter-spacing:1px;text-transform:uppercase;padding:2px 6px;margin-top:6px;}
.t-blue{background:#0099ff;color:#fff;}
.t-green{background:#00cc33;color:#fff;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Stalogy</div>
<div class="navlinks"><span>Notebooks</span><span>Editorial</span><span>Accessories</span></div>
<div class="searchbar">Search catalogue...</div>
</div>
<div class="hero">
<div class="heroimg"></div>
<div class="herotext">
<div class="h1">Standard.<br>Technology.</div>
<div class="sub">Precision-engineered notebooks, documented with the same rigor as a datasheet.</div>
<div class="btn">Shop Notebooks</div>
</div>
</div>
<div class="rule"></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0099ff,#003388)"></div><div class="pname">Editor's Series B7</div><div class="desc">Grid ruled · 96 pages</div><div class="price">$8.00</div><span class="tag t-blue">Blue Line</span></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00cc33,#003388)"></div><div class="pname">Half Year Notebook</div><div class="desc">Dot ruled · 72 pages</div><div class="price">$9.00</div><span class="tag t-green">Green Line</span></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #1f1f1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #1f1f1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1f1f1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #ffdd00; color: #1f1f1f;
border: none; border-radius: 8px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #fefefe; color: #1f1f1f;
border: 1px solid #ffdd00; border-radius: 8px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fefefe; color: #1f1f1f;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ffdd00; color: #1f1f1f;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fefefe; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif; color:#1f1f1f; }
*{box-sizing:border-box;}
.nav{height:48px;background:#1f1f1f;color:#fefefe;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:14px;font-weight:600;}
.navlinks{display:flex;gap:20px;align-items:center;}
.brandmark{font-weight:700;font-size:15px;color:#ffdd00;margin-right:6px;}
.navlinks span:not(.brandmark):first-of-type{color:#ffdd00;border-bottom:2px solid #ffdd00;padding-bottom:14px;}
.subnav{height:40px;background:#fefefe;border-bottom:1px solid #e4e4e4;display:flex;align-items:center;gap:18px;padding:0 32px;font-size:13px;color:#555555;}
.hero{height:160px;background:#1f1f1f;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;}
.hero h1{color:#fefefe;font-size:28px;font-weight:700;}
.hero span{color:#ffdd00;font-size:15px;font-weight:600;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:200px;background:#fefefe;border-radius:8px;padding:8px;}
.thumb{height:150px;background:#f5f5f5;border-radius:4px;margin-bottom:8px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#ffdd00;color:#1f1f1f;font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.badge.sale{background:#f58220;color:#fefefe;}
.title{font-size:14px;font-weight:600;}
.price{font-size:16px;font-weight:700;margin-top:4px;}
.cond{font-size:12px;color:#777777;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#1f1f1f;color:#aaaaaa;display:flex;align-items:center;justify-content:center;gap:26px;font-size:13px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="navlinks"><span class="brandmark">Princeton Record Exchange Independ 2</span><span>Vinyl</span><span>CDs</span><span>Turntables</span><span>Accessories</span></div>
<div>Search • Cart • Account</div>
</div>
<div class="subnav">New Arrivals · Used · Rare · Box Sets</div>
<div class="hero"><h1>A crate-digging session, online.</h1><span>Browse New Arrivals</span></div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">New</div></div><div class="title">Harborline Sessions</div><div class="price">$22.00</div><div class="cond">Mint</div></div>
<div class="card"><div class="thumb"><div class="badge sale">Sale</div></div><div class="title">Late Autumn Reprise</div><div class="price">$16.00</div><div class="cond">VG+</div></div>
<div class="card"><div class="thumb"></div><div class="title">Analog Weathervane</div><div class="price">$19.00</div><div class="cond">VG</div></div>
<div class="card"><div class="thumb"></div><div class="title">Quiet Static, Loud Room</div><div class="price">$24.00</div><div class="cond">Mint</div></div>
</div>
<div class="footer"><span>About</span><span>Customer Service</span><span>Genres</span><span>Connect</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.12em; background: #116600; color: #fafafa;
border: none; border-radius: 2px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.12em; background: transparent; color: #116600;
border: 1px solid #116600; border-radius: 2px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #fafafa; color: #222222;
border: 1px solid #d4d4d4; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 300; line-height: 1.4; letter-spacing: 0.05em; background: #e8e6de; color: #5c5c5c;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#222222; box-sizing:border-box;
font-family:'Barlow', sans-serif; }
* { box-sizing:border-box; }
.disp { font-family:'classicobold', 'Josefin Sans', sans-serif; }
.uc { font-family:'Josefin Sans', sans-serif; text-transform:uppercase; letter-spacing:0.1em; }
nav { height:64px; border-bottom:1px solid #d4d4d4; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-family:'classicoregular', 'Josefin Sans', sans-serif; font-size:20px; margin:0; }
.navlinks { display:flex; gap:24px; font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#343434; }
.navlinks span:first-child { color:#116600; border-bottom:2px solid #116600; padding-bottom:20px; }
.hero { background:#e8e6de; padding:30px 40px; }
.hero .lbl { color:#116600; font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:8px; display:block; }
.hero h1 { font-size:36px; font-weight:700; line-height:1.15; letter-spacing:0.01em; margin:0 0 10px; max-width:520px; }
.hero p { font-size:15px; color:#5c5c5c; margin:0 0 16px; max-width:460px; line-height:1.55; }
.btn-primary { background:#116600; color:#fafafa; border:none; border-radius:2px; padding:12px 26px;
font-family:'Josefin Sans'; font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; height:44px; }
.btn-secondary { background:transparent; color:#116600; border:1.5px solid #116600; border-radius:2px; padding:11px 25px;
font-family:'Josefin Sans'; font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; height:44px; margin-left:8px; }
.section { padding:22px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-family:'classicoregular', 'Josefin Sans', sans-serif; font-size:22px; font-weight:400; margin:0; color:#116600; }
.sec-head span { font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#6e6e6e; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card { border:1px solid #e2e2e2; padding:14px; }
.thumb { aspect-ratio:4/5; position:relative; margin-bottom:10px; }
.t1 { background:linear-gradient(160deg,#e8e6de,#c7c2a8); }
.t2 { background:linear-gradient(160deg,#f5cde0,#eeaacc); }
.t3 { background:linear-gradient(160deg,#dfe3d8,#a9b89c); }
.period { font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#116600; margin-bottom:4px; display:block; }
.card h3 { font-family:'classicobold', 'Josefin Sans', sans-serif; font-size:18px; font-weight:700; margin:0 0 4px; }
.meta { font-size:12px; color:#5c5c5c; margin:0 0 8px; }
.price { font-family:'classicoregular', serif; font-size:16px; color:#343434; margin:0; }
footer { background:#303030; color:#eeeeee; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#acacac; margin-left:16px; letter-spacing:0.08em; text-transform:uppercase; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Bernd Goeckler</p>
<div class="navlinks"><span>Furniture</span><span>Porcelain</span><span>Bronze</span><span>Drawings</span></div>
</nav>
<section class="hero">
<span class="lbl">Est. Antiques & Fine Objects</span>
<h1 class="disp">Objects that speak without labels</h1>
<p>A curated collection of Empire furniture, Continental porcelain, and bronzes, each with documented provenance.</p>
<button class="btn-primary">Inquire</button>
<button class="btn-secondary">View Collection</button>
</section>
<section class="section">
<div class="sec-head"><h2>Recently Acquired</h2><span>Browse All</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"></div>
<span class="period">Empire · Circa 1810</span>
<h3>Mahogany Secretary Desk</h3>
<p class="meta">France · Provenance available</p>
<p class="price">Inquire</p>
</div>
<div class="card">
<div class="thumb t2"></div>
<span class="period">Rococo · Circa 1760</span>
<h3>Meissen Porcelain Vase</h3>
<p class="meta">Germany · Exhibited 1998</p>
<p class="price">$12,500</p>
</div>
<div class="card">
<div class="thumb t3"></div>
<span class="period">Neoclassical · Circa 1795</span>
<h3>Patinated Bronze Urn</h3>
<p class="meta">Italy · Single owner</p>
<p class="price">Inquire</p>
</div>
</div>
</section>
<footer>
<span>© Bernd Goeckler</span>
<div><a href="#">Provenance</a><a href="#">Visit Gallery</a><a href="#">Inquiries</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #bd2426; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #bd2426;
border: 1px solid #bd2426; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #272727;
border: 1px solid #c9c9c9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f68b1f; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#272727; box-sizing:border-box;
font-family:Arial, 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.utilbar { height:26px; flex:0 0 auto; background:#163959; color:#ffffff; display:flex;
align-items:center; justify-content:space-between; padding:0 24px; font-size:11px; }
.utilbar span:last-child { opacity:0.85; }
nav.mainnav { height:58px; flex:0 0 auto; display:flex; align-items:center; gap:20px;
padding:0 24px; border-bottom:1px solid #ebebeb; background:#ffffff; }
.brand { font-size:20px; font-weight:700; margin:0; letter-spacing:-0.3px; color:#272727; white-space:nowrap; }
.searchwrap { flex:1; display:flex; height:34px; border:1px solid #dedede; border-radius:4px; overflow:hidden; }
.searchwrap input { border:none; outline:none; flex:1; padding:0 12px; font-size:13px; font-family:inherit; color:#272727; background:#fff; }
.searchbtn { width:44px; background:#163959; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.navicons { display:flex; align-items:center; gap:18px; font-size:12px; color:#404040; white-space:nowrap; }
.navicons .cart { background:#bd2426; color:#fff; border-radius:999px; padding:2px 8px; font-size:11px; font-weight:700; margin-left:4px; }
.hero { flex:0 0 auto; background:#163959; color:#ffffff; padding:20px 32px; display:flex;
align-items:center; justify-content:space-between; gap:24px; }
.hero-copy h1 { font-size:26px; font-weight:700; margin:0 0 6px; letter-spacing:-0.5px; }
.hero-copy p { font-size:13px; margin:0; color:#c9d6e2; }
.hero .btn-primary { background:#bd2426; color:#fff; border:none; border-radius:4px; padding:11px 22px;
font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; white-space:nowrap; }
.catlabel { flex:0 0 auto; padding:14px 32px 8px; font-size:12px; font-weight:700; text-transform:uppercase;
letter-spacing:0.08em; color:#163959; }
.products { flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:0 32px 12px; min-height:0; }
.card { position:relative; border:1px solid #ebebeb; border-radius:4px; background:#fff; display:flex; flex-direction:column; overflow:hidden; }
.thumb { position:relative; flex:1; min-height:0; }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:0.4px; padding:3px 6px; border-radius:4px; color:#fff; z-index:2; }
.badge.bestseller { background:#f68b1f; }
.badge.sale { background:#bd2426; }
.badge.new { background:#9bca3e; color:#272727; }
.meta { padding:8px 10px 10px; }
.meta .artist { font-size:10px; color:#595959; margin:0 0 2px; text-transform:uppercase; letter-spacing:0.04em; }
.meta .title { font-size:13px; font-weight:400; margin:0 0 6px; color:#272727; line-height:1.3; }
.pricerow { display:flex; align-items:baseline; gap:6px; }
.price { font-size:15px; font-weight:700; color:#bd2426; }
.price-orig { font-size:11px; color:#595959; text-decoration:line-through; }
.t1 .thumb { background:linear-gradient(135deg,#f68b1f,#bd2426); }
.t2 .thumb { background:linear-gradient(160deg,#163959,#62a1d8); }
.t3 .thumb { background:linear-gradient(150deg,#9bca3e,#163959 120%); }
.t4 .thumb { background:linear-gradient(140deg,#c16508,#272727); }
footer { flex:0 0 auto; background:#272727; color:#ebebeb; padding:10px 32px; display:flex;
justify-content:space-between; align-items:center; font-size:11px; }
footer .flinks span { margin-left:16px; color:#dedede; }
</style></head>
<body>
<div class="utilbar">
<span>Free Shipping on Orders $99+</span>
<span>Sign In | Help | Track Order</span>
</div>
<nav class="mainnav">
<p class="brand">Art Com</p>
<div class="searchwrap">
<input type="text" placeholder="Search by artist, subject, or room" />
<div class="searchbtn">Search</div>
</div>
<div class="navicons">
<span>Favorites</span>
<span>Account</span>
<span>Cart <span class="cart">3</span></span>
</div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Museum-Quality Prints, Framed Your Way</h1>
<p>Millions of pieces from emerging and iconic artists — free returns on every order.</p>
</div>
<button class="btn-primary">Shop Best Sellers</button>
</section>
<p class="catlabel">Trending Now</p>
<section class="products">
<div class="card t1">
<div class="thumb"><span class="badge bestseller">Best Seller</span></div>
<div class="meta">
<p class="artist">Gustav Klimt</p>
<p class="title">The Kiss, 1908</p>
<div class="pricerow"><span class="price">$34.99</span></div>
</div>
</div>
<div class="card t2">
<div class="thumb"><span class="badge sale">Sale</span></div>
<div class="meta">
<p class="artist">Andy Warhol</p>
<p class="title">Flower Study No. 4</p>
<div class="pricerow"><span class="price">$24.99</span><span class="price-orig">$39.99</span></div>
</div>
</div>
<div class="card t3">
<div class="thumb"><span class="badge new">New</span></div>
<div class="meta">
<p class="artist">Sofia Marren</p>
<p class="title">Coastline in Blue</p>
<div class="pricerow"><span class="price">$29.99</span></div>
</div>
</div>
<div class="card t4">
<div class="thumb"></div>
<div class="meta">
<p class="artist">J. Alden Weir</p>
<p class="title">Autumn Field Study</p>
<div class="pricerow"><span class="price">$44.99</span></div>
</div>
</div>
</section>
<footer>
<span>© Art Com</span>
<span class="flinks"><span>About</span><span>Help</span><span>Browse</span><span>Connect</span></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #2d27ff; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #2d27ff;
border: 1px solid #2d27ff; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ebe717; color: #1a1a1a;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Nunito,'Comfortaa',Arial,sans-serif; color:#26292f; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #eeeeee;}
.logo{font-size:22px;font-weight:800;color:#1a1a1a;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:600;}
.searchpill{width:220px;height:40px;border-radius:9999px;background:#d4f3fa;display:flex;align-items:center;padding:0 16px;font-size:13px;color:#7b7b7b;}
.hero{background:#f9fafb;padding:28px 30px;display:flex;align-items:center;min-height:200px;}
.herotext{width:55%;}
.h1{font-size:34px;font-weight:700;line-height:1.15;margin:0 0 12px;color:#1a1a1a;}
.sub{font-size:15px;margin:0 0 18px;max-width:340px;}
.btn{display:inline-block;background:#2d27ff;color:#fff;font-size:16px;font-weight:700;padding:14px 28px;border-radius:8px;}
.heroimg{width:40%;display:flex;gap:10px;justify-content:center;}
.blob{width:90px;height:90px;border-radius:50%;}
.grid{display:flex;gap:14px;padding:20px 30px 0;}
.card{width:200px;background:#fff;border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,0.08);overflow:hidden;position:relative;}
.thumb{aspect-ratio:1/1;height:110px;border-radius:20px 20px 0 0;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:4px 8px;border-radius:8px;}
.b-new{background:#ebe717;color:#1a1a1a;}
.b-limited{background:#f83568;color:#fff;}
.pbody{padding:10px 14px 14px;}
.title{font-size:16px;font-weight:600;}
.price{font-size:18px;font-weight:700;margin-top:4px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Squishmallows</div>
<div class="navlinks"><span>Fuzzy Squad</span><span>Holiday</span><span>New</span></div>
<div class="searchpill">Search your squad...</div>
</div>
<div class="hero">
<div class="herotext">
<div class="h1">Impossible not<br>to squeeze.</div>
<div class="sub">A candy-colored universe of plush collectibles, shot against a clean pastel backdrop.</div>
<div class="btn">Shop Squad</div>
</div>
<div class="heroimg">
<div class="blob" style="background:radial-gradient(circle at 35% 35%,#00cffd,#2d27ff)"></div>
<div class="blob" style="background:radial-gradient(circle at 35% 35%,#f83568,#6e3778)"></div>
</div>
</div>
<div class="grid">
<div class="card"><span class="badge b-new">New</span><div class="thumb" style="background:radial-gradient(circle at 35% 35%,#00cffd,#2d27ff)"></div><div class="pbody"><div class="title">Cam the Cat 12"</div><div class="price">$24.99</div></div></div>
<div class="card"><span class="badge b-limited">Limited</span><div class="thumb" style="background:radial-gradient(circle at 35% 35%,#f83568,#ebe717)"></div><div class="pbody"><div class="title">Winnie the Whale 16"</div><div class="price">$32.99</div></div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 35% 35%,#78d318,#108474)"></div><div class="pbody"><div class="title">Fuzz the Frog 8"</div><div class="price">$14.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3eaeff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3eaeff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #25587c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5a8c; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3eaeff; color: #000000;
border: 1px solid #ff5a8c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3eaeff; color: #111111;
border: 1px solid #3795d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #25587c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5da1ed; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-weight:700; font-size:17px; color:#232f4d; }
.navlinks { display:flex; gap:24px; font-size:15px; color:#4f5971; }
.navlinks span.on { color:#3eaeff; }
.hero { padding:30px 40px 20px; text-align:center; }
.grad-text { font-size:34px; font-weight:600; line-height:1.3; margin:0 0 10px;
background:linear-gradient(270deg,#ff5a8c 20%,#dc6eff 60%,#00c8fa 100%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; display:inline-block; }
.hero h1 { color:#232f4d; font-size:20px; margin:0; font-weight:600; }
.bar { height:4px; width:120px; margin:16px auto; border-radius:9999px;
background:linear-gradient(to right,#3eaeff,#ff5a8c,#dc6eff); }
.value { background:#f5f8fb; padding:26px 40px; }
.value h2 { font-size:22px; color:#232f4d; margin:0 0 16px; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#fff; border:1px solid #dee0e4; border-radius:16px; padding:16px; }
.card .stat { font-size:22px; font-weight:600;
background:linear-gradient(270deg,#ff5a8c,#dc6eff,#00c8fa); -webkit-background-clip:text;
background-clip:text; -webkit-text-fill-color:transparent; }
.card p { font-size:12.5px; color:#4f5971; margin:6px 0 0; line-height:1.5; }
.press { padding:24px 40px; }
.press h3 { font-size:16px; color:#232f4d; margin:0 0 12px; font-weight:600; }
.plist { display:flex; gap:14px; }
.pcard { flex:1; border:1px solid #dee0e4; border-radius:16px; padding:14px; }
.pcard .img { height:50px; border-radius:8px; background:linear-gradient(135deg,#3eaeff,#4970f5); margin-bottom:8px; }
.pcard h4 { font-size:13px; margin:0; color:#232f4d; }
</style></head>
<body>
<nav>
<span class="brand">Dr.diary</span>
<div class="navlinks"><span>Platform</span><span class="on">Solution</span><span>Brand</span><span>News</span><span>Contact</span></div>
</nav>
<section class="hero">
<div class="grad-text">Leading with data</div>
<h1>Hyper-personalized chronic care</h1>
<div class="bar"></div>
</section>
<section class="value">
<h2>What Dr.diary stands for</h2>
<div class="grid">
<div class="card"><div class="stat">24/7</div><p>Track continuous glucose monitoring data in real time.</p></div>
<div class="card"><div class="stat">Simple</div><p>Health management made easy and engaging, not a lifelong chore.</p></div>
<div class="card"><div class="stat">Together</div><p>Chronic care in partnership with public health centers and university hospitals.</p></div>
</div>
</section>
<section class="press">
<h3>Latest news</h3>
<div class="plist">
<div class="pcard"><div class="img"></div><h4>Public health center CGM pilot expands</h4></div>
<div class="pcard"><div class="img"></div><h4>Joint research on AI-driven chronic care</h4></div>
<div class="pcard"><div class="img"></div><h4>GluArt expands into overseas distribution channels</h4></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfbfe; color: #32373c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfbfe; color: #32373c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #32373c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.5px; background: #003399; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.5px; background: transparent; color: #003399;
border: 1px solid #003399; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfbfe; color: #32373c;
border: 1px solid #cacace; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #d9dff0; color: #003399;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Custom Open Sans','Open Sans',sans-serif; background:#fcfbfe; color:#515151; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;background:#0b0b0b;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:Raleway,sans-serif;font-size:20px;font-weight:600;color:#eeeeee;}
.navlinks{display:flex;gap:20px;font-family:'Custom Poppins',Poppins,sans-serif;font-size:14px;font-weight:600;letter-spacing:0.2px;color:#eeeeee;}
.search{width:190px;height:36px;background:#1e1e1e;border:1px solid #abb8c3;border-radius:4px;color:#abb8c3;font-size:12px;display:flex;align-items:center;padding:0 12px;}
.hero{height:220px;background:#0b0b0b;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.heroText h1{font-family:Raleway,sans-serif;font-size:34px;font-weight:700;color:#fff;margin:0 0 10px;}
.heroText p{font-size:14px;color:#abb8c3;margin:0 0 16px;max-width:380px;}
.decades{display:flex;gap:8px;}
.dchip{background:#e9e6ed;color:#32373c;font-size:12px;font-weight:600;padding:6px 14px;border-radius:4px;}
.dchip.active{background:#003399;color:#fff;}
.watch{width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,#1e1e1e,#0b0b0b 75%);border:4px solid #958e09;}
.sec{padding:20px 32px 0;}
.secTitle{font-family:Raleway,sans-serif;font-size:18px;font-weight:600;color:#32373c;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border:1px solid #d8d8d8;border-radius:8px;padding:12px;box-shadow:0 2px 8px rgba(0,0,0,0.08);position:relative;}
.thumb{height:96px;background:#e9e6ed;border-radius:4px;margin-bottom:10px;position:relative;overflow:hidden;}
.wm{position:absolute;left:74px;top:20px;width:48px;height:48px;border-radius:50%;background:#32373c;border:3px solid #d8d8d8;}
.condbadge{position:absolute;top:8px;left:8px;font-family:'Custom Poppins',Poppins,sans-serif;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:3px 8px;border-radius:4px;color:#fff;}
.maker{font-size:11px;letter-spacing:0.8px;text-transform:uppercase;color:#767676;margin-bottom:4px;}
.ctitle{font-family:'Custom Poppins',Poppins,sans-serif;font-size:15px;font-weight:600;color:#32373c;margin-bottom:6px;}
.cprice{font-family:Raleway,sans-serif;font-size:20px;font-weight:700;color:#003399;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#0b0b0b;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#abb8c3;border-top:2px solid #ffba00;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Watchestobuy</div>
<div class="navlinks"><span>Buy</span><span>Sell Your Watch</span><span>Makers</span></div>
<div class="search">Search watches...</div>
</div>
<div class="hero">
<div class="heroText">
<h1>1960s Swiss Dress Watches</h1>
<p>A marketplace for collectors, catalogued the way a museum would.</p>
<div class="decades"><div class="dchip">1950s</div><div class="dchip active">1960s</div><div class="dchip">1970s</div></div>
</div>
<div class="watch"></div>
</div>
<div class="sec">
<div class="secTitle">Featured Listings</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="condbadge" style="background:#008a20">Excellent</div><div class="wm"></div></div><div class="maker">Longines</div><div class="ctitle">Conquest 1963</div><div class="cprice">$2,450</div></div>
<div class="card"><div class="thumb"><div class="condbadge" style="background:#003399">Good</div><div class="wm" style="border-color:#958e09"></div></div><div class="maker">Omega</div><div class="ctitle">Seamaster De Ville</div><div class="cprice">$3,100</div></div>
<div class="card"><div class="thumb"><div class="condbadge" style="background:#914941">Fair</div><div class="wm" style="border-color:#914941"></div></div><div class="maker">Zenith</div><div class="ctitle">Captain Winding</div><div class="cprice">$1,290</div></div>
</div>
</div>
<div class="footer"><span>© A Marketplace For Collectors</span><span>About · Contact</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #65afe0; color: #000000;
border: none; border-radius: 12px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #000000;
border: 1px solid #65afe0; border-radius: 12px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f5c400; color: #222222;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #f0f0f0; }
.brand { font-size:17px; font-weight:700; margin:0; color:#4a9bd0; }
.navlinks { display:flex; gap:22px; font-size:15px; font-weight:500; color:#222222; }
.navlinks span.on { color:#65afe0; border-bottom:2px solid #65afe0; padding-bottom:20px; }
.util { font-size:13px; color:#666666; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 64px); }
.stage { padding:24px; border-right:1px solid #f0f0f0; display:flex; flex-direction:column; gap:10px; background:#f7f7f7; }
.panel { flex:1; position:relative; overflow:hidden; border-radius:8px; background:#65afe0; }
.panel::before { content:''; position:absolute; left:14%; top:16%; width:32%; height:32%; background:#f5c400; border-radius:8px; transform:rotate(-8deg); }
.panel::after { content:''; position:absolute; right:16%; bottom:18%; width:36%; height:36%; background:#fff; border-radius:8px; transform:rotate(10deg); }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; background:#fff; border:1px solid #e0e0e0; border-radius:8px; }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:13px; color:#666666; }
h1 { margin:0; font-size:24px; font-weight:600; }
.badge-row { display:flex; gap:6px; }
.badge-new { background:#f5c400; color:#222222; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:2px 8px; border-radius:4px; }
.age { background:#f7f7f7; color:#666666; font-size:12px; border-radius:4px; padding:2px 8px; }
.players { font-size:12px; color:#666666; }
.price { font-size:18px; font-weight:600; }
.desc { font-size:14px; color:#333333; line-height:1.5; }
.tag-row { display:flex; gap:8px; }
.tag { background:#f7f7f7; color:#666666; border-radius:999px; padding:6px 16px; font-size:13px; }
.tag.on { background:#65afe0; color:#fff; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:44px; background:#65afe0; color:#fff; border:none; border-radius:12px; font-size:16px; font-weight:600; }
.btn-secondary { width:170px; height:44px; background:#f5c400; color:#222222; border:none; border-radius:12px; font-size:16px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Blue Orange Games</p>
<div class="navlinks"><span class="on">Shop</span><span>About</span><span>Blog</span></div>
<div class="util">Search Account Cart (1)</div>
</nav>
<main>
<div class="stage">
<div class="panel"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Strategy · Family</span>
<h1>Kingdomino</h1>
<div class="badge-row"><span class="badge-new">Award Winner</span><span class="age">Ages 8+</span></div>
<div class="players">2-4 Players · 15 min</div>
<div class="price">$19.99</div>
<p class="desc">Award-winning tile-laying game for the whole family — build the best kingdom by drafting dominoes and matching terrain.</p>
<div class="tag-row">
<span class="tag on">Strategy</span><span class="tag">Family</span><span class="tag">2-4 Players</span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">How to Play</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffdfc; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffdfc; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.18; letter-spacing: -0.25px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #63615e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ff5601; color: #fffdfc;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: transparent; color: #000000;
border: 1px solid #ff5601; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fffdfc; color: #121212;
border: 1px solid #c4c2c2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #63615e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ff5601; color: #fffdfc;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#fffdfc; box-sizing:border-box;
font-family:'Sofia Pro','DM Sans',sans-serif; }
* { box-sizing:border-box; }
.announce { height:32px; background:#ff5601; color:#fffdfc; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; letter-spacing:.5px; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #232323; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:500; color:#c9c5bf; }
.cart-dot { width:8px; height:8px; border-radius:50%; background:#ff5601; display:inline-block; margin-left:4px; }
.hero { height:270px; display:flex; align-items:center; justify-content:center; text-align:center; flex-direction:column; gap:12px;
background:radial-gradient(circle at 50% 40%, #232323 0%, #121212 70%); }
.hero h1 { font-size:46px; font-weight:700; letter-spacing:-1.5px; margin:0; line-height:1.05; }
.hero p { font-size:13px; color:#c9c5bf; margin:0; }
.btn { display:inline-block; background:#ff5601; color:#fffdfc; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; padding:14px 32px; border-radius:4px; margin-top:6px; }
.strip { background:#f0eee3; color:#121212; padding:16px 32px; display:flex; gap:14px; }
.card { flex:1; background:#f0eee3; border-radius:8px; position:relative; }
.card-img { height:76px; background:#e5e0d4; border-radius:8px 8px 0 0; }
.cbadge { position:absolute; top:6px; left:6px; background:#ff5601; color:#fff; font-size:9px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:4px; }
.cbody { padding:8px 10px; }
.cbody h3 { font-size:12px; font-weight:600; margin:0 0 4px; }
.price { font-size:15px; font-weight:700; }
footer { position:absolute; bottom:0; left:0; right:0; height:44px; background:#364748; color:#c9c5bf;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
</style></head>
<body>
<div class="announce">FREE SHIPPING OVER $150 — LIMITED TIME</div>
<nav>
<p class="brand">Beast Health Small KI 2</p>
<div class="navlinks"><span>Blenders</span><span>Bundles</span><span>Recipes</span></div>
<div>Cart<span class="cart-dot"></span></div>
</nav>
<section class="hero">
<h1>UNLEASH THE BEAST</h1>
<p>2600W of raw motor power. Built for the kitchen that never stops.</p>
<span class="btn">Shop Now</span>
</section>
<div class="strip">
<div class="card">
<div class="card-img"></div>
<span class="cbadge">Most Popular</span>
<div class="cbody"><h3>Beast Blender B10</h3><div class="price">$799</div></div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody"><h3>Pro Jar 64oz</h3><div class="price">$89</div></div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody"><h3>Travel Cup Set</h3><div class="price">$59</div></div>
</div>
</div>
<footer>
<span>© Beast Health Small KI 2</span>
<span>Beast Health Small KI 2 · Specs · Warranty · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5efe7; color: #1c1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5efe7; color: #1c1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1c1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #50280f; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: transparent; color: #50280f;
border: 1px solid #50280f; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f5efe7; color: #1c1a1a;
border: 1px solid #bfbab4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.4px; background: #d0011b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#f5efe7; color:#1c1a1a; box-sizing:border-box; font-family:'priori-sans',Georgia,'Times New Roman',serif; }
*{box-sizing:border-box;}
.nav{height:64px;background:#f5efe7;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.nav .logo{font-weight:700;font-size:16px;color:#50280f;}
.nav .links{display:flex;gap:20px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;font-family:'priori-sans',serif;}
.wrap{display:flex;height:576px;}
.left{width:400px;background:#ffffff;display:flex;align-items:center;justify-content:center;padding:24px;}
.pad{width:200px;height:200px;border-radius:8px;background:linear-gradient(160deg,#7a4a24,#50280f);box-shadow:0 16px 28px rgba(80,40,15,.2);position:relative;}
.pad::before{content:'';position:absolute;inset:18px;border-radius:6px;border:1px solid rgba(255,255,255,.25);}
.pad::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.12);}
.right{flex:1;padding:28px 32px;display:flex;flex-direction:column;}
h1{font-size:28px;font-weight:600;margin:0 0 8px;letter-spacing:0;}
.sub{color:#444;font-size:14px;font-family:sans-serif;margin:0 0 14px;}
.price{font-size:20px;font-weight:400;color:#50280f;margin:0 0 16px;}
.badges{display:flex;gap:8px;margin-bottom:18px;}
.badge{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:4px 8px;border-radius:4px;}
.b-new{background:#b15019;color:#fff;}
.b-sale{background:#d0011b;color:#fff;}
.desc{font-size:14px;color:#444;line-height:1.6;font-family:sans-serif;margin:0 0 20px;}
.divider{height:1px;background:#e5e5e5;margin:0 0 18px;}
.actions{display:flex;gap:10px;margin-top:auto;}
.btn-primary{background:#50280f;color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:8px;padding:14px 32px;height:48px;display:flex;align-items:center;}
.btn-secondary{background:transparent;color:#50280f;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border:1px solid #50280f;border-radius:8px;padding:13px 31px;height:48px;display:flex;align-items:center;}
</style>
</head>
<body>
<div class="nav"><div class="logo">Courant</div><div class="links"><span>Chargers</span><span>Cases</span><span>Desk</span><span>Gifts</span></div></div>
<div class="wrap">
<div class="left"><div class="pad"></div></div>
<div class="right">
<div class="badges"><span class="badge b-new">New</span></div>
<h1>Catena 2 Wireless Charger</h1>
<p class="sub">Full-Grain Leather · Espresso</p>
<p class="price">$149.00</p>
<p class="desc">Perfected wireless charging, wrapped in vegetable-tanned leather that darkens beautifully with age. Sits on a nightstand or desk like an heirloom, not an accessory.</p>
<div class="divider"></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">View Details</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #008cff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #008cff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0077fe; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #008cff; color: #000000;
border: 1px solid #0077fe; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #008cff; color: #f5f5f5;
border: 1px solid #279dfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0089ff; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; background:#ffffff; border-bottom:1px solid #ededed; }
.brand { font-size:19px; font-weight:700; margin:0; color:#101a2e; }
.tabs { display:flex; gap:10px; }
.tab { font-size:16px; font-weight:700; padding:0 16px; height:40px; display:flex; align-items:center; border-radius:5px; }
.tab.filled { background:#008cff; color:#ffffff; }
.tab.outline { background:#ffffff; color:#008cff; box-shadow:#008cff 0px 0px 0px 1px inset; }
.login { font-size:16px; color:#000000; padding:0 12px; }
.hero { padding:36px 36px 22px; }
.hero h1 { font-size:40px; font-weight:700; line-height:1.4; margin:0 0 8px; color:#101a2e; }
.hero .sub { font-size:16px; color:#5f6976; margin:0; }
.filters { display:flex; gap:10px; padding:0 36px 22px; }
.pill { border-radius:30px; padding:12px 22px; font-size:14px; height:46px; display:flex; align-items:center; }
.pill.active { background:#0077fe; color:#000000; }
.pill.inactive { background:#ffffff; color:#000000; border:1px solid #c1cad2; }
.products { display:flex; gap:14px; padding:0 36px; margin-bottom:20px; }
.pcard { flex:1; background:#f5f8fa; border-radius:12px; padding:18px 0; text-align:center; }
.pcard .title { font-size:22px; font-weight:700; color:#1c2638; }
.devices { display:flex; gap:12px; padding:0 36px; }
.dcard { flex:1; background:#ffffff; border:1px solid #919ba5; border-radius:8px; height:64px;
display:flex; align-items:center; justify-content:center; font-size:14px; color:#000000; }
</style></head>
<body>
<nav>
<p class="brand">Payhere</p>
<div class="tabs">
<span class="tab filled">Card Terminal</span>
<span class="tab outline">Table Order</span>
</div>
<span class="login">Log In</span>
</nav>
<section class="hero">
<h1>The #1 mobile POS<br>The new future of your store, Payhere</h1>
<p class="sub">One all-in-one terminal for printing, scanning, and kiosk mode</p>
</section>
<section class="filters">
<span class="pill active">NFC</span>
<span class="pill inactive">Contactless Pay</span>
<span class="pill inactive">Prepaid Vouchers</span>
<span class="pill inactive">Standalone Payment</span>
</section>
<section class="products">
<div class="pcard"><span class="title">Card Terminal</span></div>
<div class="pcard"><span class="title">Table Order</span></div>
<div class="pcard"><span class="title">Kiosk</span></div>
<div class="pcard"><span class="title">Internet Package</span></div>
</section>
<section class="devices">
<div class="dcard">Galaxy</div>
<div class="dcard">iPhone·iPad</div>
<div class="dcard">Windows</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #606266; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; background: #00bfd6; color: #000000;
border: none; border-radius: 4px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; background: #ffffff; color: #000000;
border: 1px solid #00bfd6; border-radius: 4px;
padding: 10px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #303133;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #606266; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.27; letter-spacing: 0.5px; background: #00bfd6; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;font-family:'Aileron',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;color:#303133;}
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#111111;}
.logo{font-size:20px;font-weight:700;letter-spacing:-0.3px;color:#ffffff;}
.logo span{color:#00bfd6;}
.navlinks{display:flex;gap:26px;font-size:13px;font-weight:500;color:#c0c4cc;}
.cartbtn{padding:8px 16px;background:#00bfd6;color:#fff;border-radius:4px;font-size:12px;font-weight:600;}
.hero{height:236px;background:#111111;display:flex;align-items:center;padding:0 40px;gap:40px;}
.hero-text{width:400px;}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:1px;color:#00bfd6;text-transform:uppercase;margin-bottom:10px;}
.headline{font-size:34px;font-weight:700;letter-spacing:-0.4px;line-height:1.2;color:#ffffff;margin-bottom:12px;}
.sub{font-size:13px;color:#909399;line-height:1.5;width:370px;margin-bottom:18px;}
.cta{display:inline-block;padding:12px 26px;background:#00bfd6;color:#ffffff;border-radius:4px;font-size:13px;font-weight:600;}
.hero-visual{flex:1;height:170px;position:relative;}
.tablet{position:absolute;left:20px;top:10px;width:270px;height:150px;border-radius:4px;background:linear-gradient(155deg,#1a1a1a,#303133);border:1px solid #606266;}
.tablet-screen{position:absolute;left:34px;top:24px;width:242px;height:110px;border-radius:2px;background:linear-gradient(120deg,#00bfd6,#0a3a44);}
.pen{position:absolute;right:24px;top:38px;width:130px;height:14px;border-radius:7px;background:linear-gradient(90deg,#606266,#909399);}
.spec-strip{position:absolute;right:10px;bottom:6px;font-size:11px;color:#c0c4cc;letter-spacing:0.3px;}
.section{padding:24px 40px 0 40px;}
.section-title{font-size:22px;font-weight:700;color:#111111;margin-bottom:14px;}
.grid{display:flex;gap:24px;padding:0 40px;}
.card{width:204px;background:#ffffff;border:1px solid #dcdfe6;border-radius:4px;overflow:hidden;}
.swatch{height:104px;background:#f5f7fa;position:relative;display:flex;align-items:center;justify-content:center;}
.swatch .dev{width:150px;height:70px;border-radius:4px;background:linear-gradient(150deg,#222222,#404144);border:1px solid #606266;}
.swatch .dev::after{content:'';position:absolute;width:120px;height:44px;border-radius:2px;background:#00bfd6;opacity:0.85;}
.card-body{padding:12px 14px 14px 14px;}
.card-title{font-size:14px;font-weight:700;color:#303133;margin-bottom:4px;}
.card-spec{font-size:11px;color:#909399;margin-bottom:8px;letter-spacing:0.2px;}
.card-price{font-size:15px;font-weight:700;color:#111111;}
.tag{display:inline-block;font-size:10px;font-weight:600;color:#00bfd6;border:1px solid #aadddd;border-radius:4px;padding:2px 6px;margin-left:8px;}
</style>
<div class="nav">
<div class="logo"><span>Huion</span></div>
<div class="navlinks"><span>Pen Displays</span><span>Pen Tablets</span><span>Accessories</span><span>Support</span></div>
<div class="cartbtn">Cart</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="eyebrow">8192 Levels · 60ms Report Rate</div>
<div class="headline">Precision built<br/>for the hand.</div>
<div class="sub">Pressure-sensitive pen displays and tablets engineered for digital artists who read spec sheets before reviews.</div>
<div class="cta">SHOP TABLETS</div>
</div>
<div class="hero-visual">
<div class="tablet"><div class="tablet-screen"></div></div>
<div class="pen"></div>
<div class="spec-strip">8192 PRESSURE · 233 RPS</div>
</div>
</div>
<div class="section"><div class="section-title">Pen Displays</div></div>
<div class="grid">
<div class="card">
<div class="swatch"><div class="dev"></div></div>
<div class="card-body"><div class="card-title">Kamvas Pro 16</div><div class="card-spec">15.6" · 8192 levels · 60ms</div><div class="card-price">$699.00</div></div>
</div>
<div class="card">
<div class="swatch"><div class="dev"></div></div>
<div class="card-body"><div class="card-title">Kamvas 13</div><div class="card-spec">13.3" · 8192 levels · 60ms<span class="tag">NEW</span></div><div class="card-price">$399.00</div></div>
</div>
<div class="card">
<div class="swatch"><div class="dev"></div></div>
<div class="card-body"><div class="card-title">Inspiroy Dial 2</div><div class="card-spec">Pen tablet · 8192 levels</div><div class="card-price">$149.00</div></div>
</div>
<div class="card">
<div class="swatch"><div class="dev"></div></div>
<div class="card-body"><div class="card-title">Huion PW517</div><div class="card-spec">Battery-free stylus</div><div class="card-price">$29.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #141619;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #141619;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.1px; margin: 0; color: #141619; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #636464; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f29b1f; color: #141619;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f9fafb; color: #003388;
border: 1px solid #003388; border-radius: 4px;
padding: 10px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9fafb; color: #141619;
border: 1px solid #e2e3e5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #636464; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #eeeeee; color: #41464b;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Furnace Record Pressing</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:'Montserrat',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; color:#41464b; }
*{box-sizing:border-box;}
.nav{background:#1a1e21;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#f29b1f;font-size:20px;font-weight:800;letter-spacing:-0.1px;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;color:#fff;}
.cta-nav{background:#f29b1f;color:#141619;border:none;border-radius:4px;padding:10px 20px;font-size:13px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;}
.hero{background:#1a1e21;color:#fff;padding:36px 32px;min-height:200px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.eyebrow{color:#f29b1f;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:10px;}
h1{font-size:40px;font-weight:800;line-height:1.1;letter-spacing:-0.5px;margin:0 0 14px;}
.sub{font-size:15px;color:#cbccce;margin:0 0 18px;max-width:460px;}
.cta{background:#f29b1f;color:#141619;border:none;border-radius:4px;padding:12px 28px;font-size:15px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;}
.steps{display:flex;gap:16px;padding:22px 32px 0;}
.step{flex:1;text-align:center;}
.stepnum{font-size:28px;font-weight:800;color:#f29b1f;}
.step h3{font-size:15px;font-weight:700;margin:6px 0 4px;color:#141619;}
.step p{font-size:12px;color:#636464;margin:0;}
.section{padding:24px 32px 0;}
.section h2{font-size:20px;font-weight:700;margin:0 0 14px;color:#141619;}
.pricing{display:flex;gap:16px;}
.tier{flex:1;background:#fff;border:1px solid #e2e3e5;border-radius:6px;padding:20px;}
.tier.featured{border:2px solid #f29b1f;position:relative;}
.tierbadge{position:absolute;top:-10px;right:16px;background:#f29b1f;color:#141619;font-size:11px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;padding:4px 10px;border-radius:4px;}
.tier h3{font-size:15px;font-weight:700;margin:0 0 6px;}
.tierprice{font-size:30px;font-weight:800;letter-spacing:-0.5px;color:#141619;}
.tier ul{font-size:13px;color:#41464b;padding-left:16px;margin:10px 0 0;}
.tier li{margin-bottom:4px;}
</style>
<div class="nav">
<div class="logo">Furnace Record Pressing</div>
<div class="navlinks"><span>Services</span><span>Pricing</span><span>Turntimes</span><span>Contact</span></div>
<button class="cta-nav">Get a Quote</button>
</div>
<div class="hero">
<div class="eyebrow">Precision Vinyl Manufacturing</div>
<h1>From master to record,<br>pressed right</h1>
<p class="sub">Full-service vinyl pressing for independent labels and artists — lacquer cutting, jacket printing, and quality control on every run.</p>
<button class="cta">Request a Quote</button>
</div>
<div class="steps">
<div class="step"><div class="stepnum">01</div><h3>Upload Audio</h3><p>Send your lacquer reference</p></div>
<div class="step"><div class="stepnum">02</div><h3>Choose Specs</h3><p>Weight, jacket, color vinyl</p></div>
<div class="step"><div class="stepnum">03</div><h3>We Press</h3><p>Quality control every run</p></div>
<div class="step"><div class="stepnum">04</div><h3>Ship</h3><p>Delivered to your door</p></div>
</div>
<div class="section">
<h2>Pressing Packages</h2>
<div class="pricing">
<div class="tier"><h3>Standard</h3><div class="tierprice">$1,450</div><ul><li>300 units, 12"</li><li>140g black vinyl</li><li>6–8 week turnaround</li></ul></div>
<div class="tier featured"><div class="tierbadge">Best Value</div><h3>Rush</h3><div class="tierprice">$2,100</div><ul><li>300 units, 12"</li><li>180g colored vinyl</li><li>3–4 week turnaround</li></ul></div>
<div class="tier"><h3>Lacquer-Cut</h3><div class="tierprice">$3,200</div><ul><li>500 units, 12"</li><li>Direct metal mastering</li><li>Tip-on jacket included</li></ul></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #1f4d8c; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #1f4d8c;
border: 1px solid #1f4d8c; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #1f4d8c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>iCarez Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
background:#ffffff; color:#3d3d3d;
}
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:19px;font-weight:800;color:#1f4d8c;letter-spacing:-.2px;}
.navlinks{display:flex;gap:20px;font-size:12.5px;font-weight:600;color:#3d3d3d;}
.cta-mini{background:#1f4d8c;color:#fff;font-size:11.5px;font-weight:700;padding:9px 16px;border-radius:4px;}
.selector{margin:14px 26px 0;background:#f5f6f8;border:1px solid #e0e0e0;border-radius:4px;padding:12px 16px;display:flex;align-items:center;gap:14px;}
.selector .lbl{font-size:10.5px;font-weight:800;letter-spacing:.6px;color:#1f4d8c;text-transform:uppercase;white-space:nowrap;}
.selector select{flex:1;background:#ffffff;border:1px solid #e0e0e0;border-radius:4px;padding:8px 10px;font-size:12px;color:#3d3d3d;}
.selector .go{background:#e8850a;color:#fff;font-size:11.5px;font-weight:700;padding:9px 18px;border-radius:4px;white-space:nowrap;}
.hero{display:flex;gap:20px;padding:16px 26px 0;height:150px;}
.hero-copy{flex:1.2;}
.hero-copy h1{font-size:23px;font-weight:700;color:#1a1a1a;line-height:1.25;margin:2px 0 8px;}
.hero-copy p{font-size:12px;color:#6b6b6b;line-height:1.5;margin:0 0 10px;max-width:380px;}
.hero-btn{display:inline-block;background:#1f4d8c;color:#fff;font-size:12px;font-weight:700;padding:10px 20px;border-radius:4px;}
.hero-glass{flex:1;display:flex;align-items:center;justify-content:center;gap:14px;}
.phone{width:64px;height:120px;border-radius:10px;background:linear-gradient(160deg,#2a2a2a,#0d0d0d);border:2px solid #1f4d8c;position:relative;}
.phone:before{content:"";position:absolute;inset:6px;border-radius:6px;background:linear-gradient(150deg,#dbe8f7,#a9c6ea);opacity:.85;}
.badge-nine{position:absolute;top:-9px;right:-9px;background:#e8850a;color:#fff;font-size:9px;font-weight:800;padding:3px 6px;border-radius:9999px;}
.trust{display:flex;gap:10px;padding:12px 26px 0;}
.trust-item{flex:1;background:#ffffff;border:1px solid #e0e0e0;border-radius:4px;padding:9px 10px;display:flex;align-items:center;gap:8px;}
.trust-ic{width:22px;height:22px;border-radius:4px;background:#1f4d8c;flex-shrink:0;}
.trust-txt{font-size:10.5px;color:#3d3d3d;font-weight:600;line-height:1.3;}
.section{padding:14px 26px 0;}
.section-title{font-size:13.5px;font-weight:800;color:#1a1a1a;margin-bottom:9px;text-transform:uppercase;letter-spacing:.3px;}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.card{background:#ffffff;border:1px solid #e0e0e0;border-radius:4px;padding:8px;}
.card-img{height:60px;border-radius:4px;background:#f5f6f8;border:1px solid #eeeeee;position:relative;margin-bottom:6px;}
.card-img .glass{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:44px;border-radius:5px;border:2px solid #1f4d8c;background:linear-gradient(150deg,#eef4fb,#cfe0f4);}
.card-title{font-size:10px;font-weight:700;color:#1a1a1a;margin-bottom:5px;line-height:1.3;height:26px;overflow:hidden;}
.card-price{font-size:12.5px;font-weight:800;color:#1f4d8c;}
.footer{margin-top:12px;background:#1a2e4a;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;}
.footer span{color:#dfe7f2;font-size:10.5px;}
.footer .certs{display:flex;gap:8px;}
.footer .cert{background:#25436b;color:#a9c6ea;font-size:8.5px;font-weight:700;padding:4px 8px;border-radius:3px;}
</style>
<div class="nav">
<div class="logo">Icarez</div>
<div class="navlinks"><span>Screen Protectors</span><span>Cases</span><span>Camera Guards</span><span>Support</span></div>
<div class="cta-mini">Find My Device</div>
</div>
<div class="selector">
<div class="lbl">Shop By Device</div>
<select><option>iPhone 15 Pro Max</option></select>
<select><option>Galaxy S24 Ultra</option></select>
<div class="go">Show Compatible</div>
</div>
<div class="hero">
<div class="hero-copy">
<h1>Precision protection, fit to 0.1mm.</h1>
<p>Nine-layer tempered glass and edge-to-edge case armor engineered against your exact device model — never a universal guess.</p>
<div class="hero-btn">Shop This Model</div>
</div>
<div class="hero-glass">
<div class="phone"><span class="badge-nine">9H</span></div>
<div class="phone" style="opacity:.6"></div>
</div>
</div>
<div class="trust">
<div class="trust-item"><div class="trust-ic"></div><div class="trust-txt">Easy-Align<br>Install Tray</div></div>
<div class="trust-item"><div class="trust-ic"></div><div class="trust-txt">Lifetime<br>Warranty</div></div>
<div class="trust-item"><div class="trust-ic"></div><div class="trust-txt">Case-Friendly<br>Edge Fit</div></div>
</div>
<div class="section">
<div class="section-title">Compatible With Your Device</div>
<div class="grid">
<div class="card"><div class="card-img"><div class="glass"></div></div><div class="card-title">Tempered Glass 3-Pack</div><div class="card-price">$14.99</div></div>
<div class="card"><div class="card-img"><div class="glass"></div></div><div class="card-title">Camera Lens Guard Kit</div><div class="card-price">$9.99</div></div>
<div class="card"><div class="card-img"><div class="glass"></div></div><div class="card-title">Anti-Glare Matte Film</div><div class="card-price">$16.99</div></div>
<div class="card"><div class="card-img"><div class="glass"></div></div><div class="card-title">Privacy Screen Shield</div><div class="card-price">$19.99</div></div>
<div class="card"><div class="card-img"><div class="glass"></div></div><div class="card-title">Clear Armor Case</div><div class="card-price">$24.99</div></div>
</div>
</div>
<div class="footer">
<span>© iCarez Precision Protection</span>
<div class="certs"><span class="cert">MIL-STD 810G</span><span class="cert">9H HARDNESS</span><span class="cert">ISO 9001</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5e5e5e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #17384c; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #17384c;
border: 1px solid #17384c; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #111111;
border: 1px solid #dedede; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5e5e5e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #eaf7fc; color: #17384c;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#fafafa; color:#111111; box-sizing:border-box; font-family:'DM Sans',sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fafafa;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.nav .logo{font-family:'Montserrat',sans-serif;font-weight:700;font-size:16px;color:#17384c;}
.nav .links{display:flex;gap:20px;font-size:14px;font-weight:500;color:#303030;}
.wrap{display:flex;height:576px;}
.left{width:400px;background:linear-gradient(160deg,#eaf7fc,#fafafa);display:flex;align-items:center;justify-content:center;padding:24px;position:relative;}
.purifier{width:140px;height:220px;background:linear-gradient(180deg,#ffffff,#d8e7ee);border-radius:20px;box-shadow:0 16px 30px rgba(23,56,76,.12);position:relative;border:1px solid #d8e7ee;}
.purifier::before{content:'';position:absolute;top:24px;left:20px;right:20px;height:4px;background:#17cc5f;border-radius:2px;}
.badge-filter{position:absolute;top:24px;left:24px;background:#eaf7fc;border:1px solid #6bc4e8;color:#17384c;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:4px 12px;border-radius:9999px;}
.right{flex:1;padding:28px 32px;display:flex;flex-direction:column;}
h1{font-family:'Montserrat',sans-serif;font-size:28px;font-weight:600;margin:0 0 8px;letter-spacing:-.2px;}
.sub{color:#5e5e5e;font-size:14px;margin:0 0 18px;}
.stat-row{display:flex;gap:24px;margin-bottom:18px;}
.stat .num{font-family:'Montserrat',sans-serif;font-size:40px;font-weight:700;color:#17384c;line-height:1;}
.stat .lbl{font-size:12px;color:#5e5e5e;margin-top:4px;}
.tabs{display:flex;gap:24px;margin-bottom:16px;}
.tab{font-size:16px;font-weight:600;color:#5e5e5e;padding:8px 0;}
.tab.active{color:#17384c;border-bottom:2px solid #17384c;}
.desc{font-size:14px;color:#303030;line-height:1.6;margin:0 0 20px;}
.actions{display:flex;gap:10px;margin-top:auto;}
.btn-primary{background:#17384c;color:#fff;font-size:16px;font-weight:600;letter-spacing:.2px;border-radius:8px;padding:12px 28px;height:48px;display:flex;align-items:center;}
.btn-secondary{background:#fff;color:#17384c;font-size:16px;font-weight:600;border:1px solid #17384c;border-radius:8px;padding:11px 27px;height:48px;display:flex;align-items:center;}
</style>
</head>
<body>
<div class="nav"><div class="logo">Coway</div><div class="links"><span>Air Purifiers</span><span>Water Filters</span><span>Bidets</span><span>Support</span></div></div>
<div class="wrap">
<div class="left"><div class="badge-filter">HEPA-13</div><div class="purifier"></div></div>
<div class="right">
<h1>Airmega AP-1512HHS</h1>
<p class="sub">True HEPA Purification · Coverage up to 361 sq ft</p>
<div class="stat-row">
<div class="stat"><div class="num">99.97%</div><div class="lbl">PM2.5 Capture Rate</div></div>
<div class="stat"><div class="num">240</div><div class="lbl">CADR (CFM)</div></div>
</div>
<div class="tabs"><span class="tab active">Overview</span><span class="tab">Specifications</span><span class="tab">Reviews</span></div>
<p class="desc">Dual True HEPA filters capture 99.97% of airborne particles as small as 0.3 microns, with a real-time air quality indicator that shifts color as conditions change.</p>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Learn More</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #3d3935;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #3d3935;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #3d3935; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #0075fe; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #3d3935;
border: 1px solid #0075fe; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #3d3935;
border: 1px solid #cececc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #02c316; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#3d3935; box-sizing:border-box;
font-family:'Jost', 'Avenir', 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:'Kopius', Georgia, 'Times New Roman', serif; }
nav { height:64px; background:#fff; border-bottom:1px solid #eeeeee; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.brand { font-family:'Kopius', Georgia, serif; font-size:22px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:26px; font-size:15px; font-weight:500; color:#645f59; }
.navlinks span:first-child { color:#0075fe; border-bottom:2px solid #0075fe; padding-bottom:4px; }
.cart { width:22px; height:22px; border:1.5px solid #3d3935; border-radius:5px; }
.hero { background:#f4f9ff; padding:28px 40px; display:flex; align-items:center; gap:32px; }
.hero-copy { flex:1.2; }
.hero h1 { font-family:'Kopius', Georgia, serif; font-size:36px; font-weight:700; line-height:1.15;
letter-spacing:-0.5px; margin:0 0 10px; max-width:480px; }
.hero p { font-size:14px; color:#645f59; margin:0 0 16px; max-width:400px; line-height:1.5; }
.row { display:flex; gap:10px; align-items:center; }
.btn-primary { background:#0075fe; color:#fff; border:none; border-radius:8px; padding:14px 26px;
font-size:14px; font-weight:600; height:48px; }
.btn-secondary { background:#fff; color:#3d3935; border:2px solid #dbdbdb; border-radius:8px; padding:12px 24px;
font-size:14px; font-weight:600; height:48px; }
.eco { display:flex; align-items:center; gap:4px; font-size:12px; color:#04af53; font-weight:600; }
.hero-visual { flex:1; height:170px; border-radius:8px; background:#fff; border:1px solid #dbdbdb; position:relative; overflow:hidden; }
.hero-visual::before { content:''; position:absolute; width:110px; height:130px; border-radius:16px; background:linear-gradient(160deg,#eaf3ff,#c6dcff); left:30px; top:18px; }
.hero-visual::after { content:''; position:absolute; width:60px; height:60px; border-radius:50%; background:#04af53; opacity:0.16; right:40px; bottom:20px; }
.section { padding:18px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-family:'Kopius', Georgia, serif; font-size:22px; font-weight:600; margin:0; }
.sec-head span { font-size:13px; color:#0075fe; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#fff; border:1px solid #eeeeee; border-radius:8px; padding:16px; }
.thumb { aspect-ratio:1/1; border-radius:8px; position:relative; margin-bottom:10px; }
.t1 { background:linear-gradient(150deg,#eaf3ff,#c6dcff); }
.t2 { background:linear-gradient(150deg,#e8f8ec,#b7e8c3); }
.t3 { background:linear-gradient(150deg,#f2f2f2,#dcdcdc); }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:0.5px; padding:4px 10px; border-radius:9999px; color:#fff; }
.badge.new { background:#02c316; }
.badge.eco { background:#04af53; }
.stars { color:#f14336; font-size:12px; letter-spacing:1px; margin-bottom:4px; }
.card h3 { font-family:'Kopius', Georgia, serif; font-size:17px; font-weight:600; margin:0 0 4px; }
.card .price { font-size:16px; font-weight:600; margin:0; }
footer { background:#3d3935; color:#dbdbdb; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#dbdbdb; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Believe Diapers</p>
<div class="navlinks"><span>Diapers</span><span>Wipes</span><span>Subscribe</span><span>Our Story</span></div>
<div class="cart"></div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Premium bamboo diapers you can believe in</h1>
<p>Ultra-soft, biodegradable fibers and a leak-lock core — gentle on skin, gentle on the planet.</p>
<div class="row">
<button class="btn-primary">Subscribe Now</button>
<button class="btn-secondary">Learn More</button>
</div>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2>Shop Essentials</h2><span>View All</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge new">New</span></div>
<div class="stars">★★★★★</div>
<h3>Bamboo Diapers, Size 3</h3>
<p class="price">$24.99</p>
</div>
<div class="card">
<div class="thumb t2"><span class="badge eco">Eco</span></div>
<div class="stars">★★★★★</div>
<h3>Bamboo Baby Wipes</h3>
<p class="price">$8.99</p>
</div>
<div class="card">
<div class="thumb t3"></div>
<div class="stars">★★★★☆</div>
<h3>Overnight Bundle</h3>
<p class="price">$42.00</p>
</div>
</div>
</section>
<footer>
<span>© Believe Diapers</span>
<div><a href="#">Subscriptions</a><a href="#">Sustainability</a><a href="#">Support</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c1c2e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c1c2e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #1c1c2e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #8080a0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #7b2ff7; color: #ffffff;
border: none; border-radius: 20px; padding: 13px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #ffffff; color: #7b2ff7;
border: 1px solid #7b2ff7; border-radius: 20px;
padding: 12px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1c1c2e;
border: 1px solid #c6c6cb; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8080a0; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #7b2ff7; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Inter','DM Sans',-apple-system,sans-serif; color:#1c1c2e; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;box-shadow:0 1px 4px rgba(28,28,46,.06);}
.logo{font-size:20px;font-weight:700;color:#1c1c2e;}
.search{width:220px;height:38px;border-radius:9999px;background:#f6f3ff;border:1px solid #e0dff0;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#8080a0;}
.hero{height:220px;background:#f6f3ff;display:flex;align-items:center;padding:0 32px;gap:24px;}
.herotext{width:46%;}
.herotext h1{font-size:30px;font-weight:700;margin:0 0 10px;line-height:1.2;letter-spacing:-.4px;}
.herotext p{font-size:14px;color:#3d3d5c;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#7b2ff7;color:#fff;font-size:14px;font-weight:600;padding:13px 26px;border-radius:20px;}
.heroimg{flex:1;height:150px;border-radius:20px;background:linear-gradient(135deg,#7b2ff7,#ff6b6b);position:relative;}
.heroimg:before{content:'';position:absolute;left:30%;top:20%;width:70px;height:120px;background:rgba(255,255,255,.25);border-radius:16px;}
.chips{display:flex;gap:10px;padding:16px 32px 0;}
.chip{font-size:13px;font-weight:500;border-radius:9999px;padding:7px 16px;background:#efecfa;color:#3d3d5c;}
.chip.active{background:#7b2ff7;color:#fff;}
.grid{display:flex;gap:16px;padding:16px 32px 0;}
.card{width:206px;background:#fff;border:1px solid #ececf5;border-radius:20px;padding:12px;box-shadow:0 2px 12px rgba(123,47,247,.06);}
.thumb{height:110px;background:#f6f3ff;border-radius:12px;margin-bottom:8px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#ff6b6b;color:#fff;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;border-radius:4px;padding:2px 8px;}
.compat{font-size:11px;color:#8080a0;margin-bottom:2px;}
.ptitle{font-size:14px;font-weight:600;}
.price{color:#7b2ff7;font-size:16px;font-weight:700;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#1c1c2e;border-top:3px solid #7b2ff7;display:flex;align-items:center;justify-content:center;font-size:12px;color:#ccd0d4;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Uniqueme</div>
<div class="search">Search by model...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Your phone, unmistakably yours.</h1>
<p>Custom cases and accessories for every model, every personality.</p>
<div class="cta">Design Your Case</div>
</div>
<div class="heroimg"></div>
</div>
<div class="chips">
<div class="chip active">All Models</div>
<div class="chip">iPhone 15</div>
<div class="chip">Galaxy S24</div>
<div class="chip">Bundles</div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">New</div></div><div class="compat">For iPhone 15 Pro</div><div class="ptitle">Custom Name Case</div><div class="price">$29.99</div></div>
<div class="card"><div class="thumb"></div><div class="compat">For Galaxy S24</div><div class="ptitle">Photo Collage Case</div><div class="price">$24.99</div></div>
<div class="card"><div class="thumb"></div><div class="compat">Universal Fit</div><div class="ptitle">MagSafe Charging Bundle</div><div class="price">$44.99</div></div>
</div>
<div class="footer">Free shipping · 30-day returns · Made just for you</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #58cc02; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #58cc02; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #31650a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a73e8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #58cc02; color: #000000;
border: 1px solid #1a73e8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #58cc02; color: #111111;
border: 1px solid #4dae04; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #31650a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4ebe27; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#4b4b4b; box-sizing:border-box;
font-family:"din-round","DIN Next Rounded","Nunito",-apple-system,sans-serif; }
* { box-sizing:border-box; }
.topbar { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:2px solid #e5e5e5; }
.brand { font-weight:700; font-size:18px; color:#58cc02; }
.streak { display:flex; gap:14px; }
.pill { border:2px solid #e5e5e5; border-radius:9999px; padding:4px 10px; font-size:13px; font-weight:700; }
.pill.fire { color:#ff9600; }
.pill.xp { color:#ffc800; }
.progressbar { height:16px; background:#e5e5e5; border-radius:9999px; margin:20px 32px 0; overflow:hidden; }
.progressbar .fill { width:60%; height:100%; background:#58cc02; border-radius:9999px; }
.lesson { padding:24px 32px; text-align:center; }
.lesson h2 { font-size:24px; font-weight:700; margin:0 0 20px; }
.tiles { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; max-width:600px; margin:0 auto; }
.tile { border:2px solid #e5e5e5; border-radius:12px; padding:10px 18px; font-size:17px; font-weight:400;
box-shadow:0 2px 0 #e5e5e5; }
.tile.sel { border-color:#1cb0f6; background:#ddf4ff; box-shadow:0 2px 0 #1cb0f6; }
.feedback { margin:26px 32px 0; background:#d7ffb8; border-top:2px solid #a5ed6e; border-radius:16px; padding:16px 24px;
display:flex; justify-content:space-between; align-items:center; }
.feedback .txt b { color:#58a700; font-size:17px; display:block; margin-bottom:2px; }
.feedback .txt span { font-size:13px; color:#4b4b4b; }
.btn-green { background:#58cc02; color:#fff; border-radius:12px; padding:14px 28px; font-size:15px; font-weight:700;
text-transform:uppercase; box-shadow:0 4px 0 #58a700; letter-spacing:0.8px; }
.cards { display:flex; gap:14px; padding:0 32px; margin-top:22px; }
.stat-card { flex:1; border:2px solid #e5e5e5; border-radius:16px; padding:16px; text-align:center; }
.stat-card .num { font-size:24px; font-weight:700; }
.stat-card .lbl { font-size:12px; color:#777777; margin-top:4px; }
</style></head>
<body>
<div class="topbar">
<span class="brand">Duolingo</span>
<div class="streak"><span class="pill fire">🔥 27</span><span class="pill xp">⚡ 1,240</span></div>
</div>
<div class="progressbar"><div class="fill"></div></div>
<section class="lesson">
<h2>Translate: "The cat is sleeping"</h2>
<div class="tiles">
<div class="tile sel">The</div><div class="tile">cat</div><div class="tile">is</div><div class="tile">sleeping</div>
<div class="tile">dog</div><div class="tile">running</div>
</div>
</section>
<div class="feedback">
<div class="txt"><b>Nice!</b><span>You're on fire — 4 in a row.</span></div>
<div class="btn-green">Continue</div>
</div>
<div class="cards">
<div class="stat-card"><div class="num">27</div><div class="lbl">Day streak</div></div>
<div class="stat-card"><div class="num">1,240</div><div class="lbl">Total XP</div></div>
<div class="stat-card"><div class="num">Gold</div><div class="lbl">League</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e0f11; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e0f11; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8e8e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d50a0a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e0f11; color: #d50a0a;
border: 1px solid #d50a0a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0e0f11; color: #f5f5f5;
border: 1px solid #333435; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8e8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2e0e10; color: #d50a0a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#0E0F11; color:#FFFFFF; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif; font-weight:700; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; padding:20px 28px 0; }
.topbar { display:flex; align-items:center; justify-content:space-between; }
.logoblock { background:#D50A0A; padding:5px 10px; font-weight:900; border-radius:3px; font-size:14px; }
.ticker { display:flex; gap:8px; margin-top:16px; overflow:hidden; border-bottom:1px solid #2A2C30; padding-bottom:14px; }
.chip { width:116px; flex-shrink:0; background:#212327; border-radius:8px; padding:8px 10px; }
.chiphead { display:flex; justify-content:space-between; font-size:10px; font-weight:800; color:#9AA0A6; text-transform:uppercase; }
.live { color:#FF1A1A; }
.chline { display:flex; justify-content:space-between; font-size:13px; font-variant-numeric:tabular-nums; margin-top:4px; }
.chline .w { color:#fff; } .chline .l { color:#9AA0A6; }
.gamecard { margin-top:18px; background:#18191B; border-radius:12px; border:1px solid #2A2C30; }
.gchead { background:#212327; border-radius:12px 12px 0 0; padding:10px 14px; display:flex; justify-content:space-between; font-size:11px; font-weight:800; color:#9AA0A6; text-transform:uppercase; letter-spacing:0.5pt; }
.livepill { background:#FF1A1A; border-radius:3px; padding:4px 9px; display:flex; align-items:center; gap:5px; font-size:11px; font-weight:900; color:#fff; }
.puls { width:6px; height:6px; border-radius:50%; background:#fff; }
.teamrow { display:flex; justify-content:space-between; align-items:center; padding:14px; border-bottom:1px solid #2A2C30; }
.teamrow:last-child { border-bottom:none; }
.tinfo { display:flex; align-items:center; gap:12px; }
.logo30 { width:30px; height:30px; border-radius:50%; }
.tname { font-size:18px; font-weight:700; } .trecord { font-size:12px; font-weight:400; color:#9AA0A6; margin-top:2px; }
.tscore { font-size:26px; font-weight:900; font-variant-numeric:tabular-nums; }
.tscore.dim { color:#9AA0A6; }
.gcfoot { padding:10px 14px; display:flex; justify-content:space-between; font-size:13px; }
.watch { color:#CC0000; font-weight:800; font-size:12px; }
</style>
</head>
<body>
<div class="stage">
<div class="topbar"><div class="logoblock">ESPN (iOS)</div><div style="font-size:20px">🔍 🔔</div></div>
<div class="ticker">
<div class="chip"><div class="chiphead"><span>NBA</span><span class="live">LIVE</span></div><div class="chline"><span>LAL 30</span><span class="w">102</span></div><div class="chline"><span>BOS 15</span><span class="l">97</span></div></div>
<div class="chip"><div class="chiphead"><span>NFL</span><span>FINAL</span></div><div class="chline"><span>DAL</span><span class="w">27</span></div><div class="chline"><span>PHI</span><span class="l">21</span></div></div>
<div class="chip"><div class="chiphead"><span>MLB</span><span>7:05 ET</span></div><div class="chline"><span>NYY</span><span>–</span></div><div class="chline"><span>BOS</span><span>–</span></div></div>
<div class="chip"><div class="chiphead"><span>NHL</span><span class="live">LIVE</span></div><div class="chline"><span>EDM</span><span class="w">3</span></div><div class="chline"><span>COL</span><span class="l">2</span></div></div>
</div>
<div class="gamecard">
<div class="gchead"><span>NBA · WESTERN FINALS · GAME 5</span><div class="livepill"><span class="puls"></span>LIVE Q3</div></div>
<div class="teamrow">
<div class="tinfo"><div class="logo30" style="background:#552583"></div><div><div class="tname">Los Angeles Lakers</div><div class="trecord">48–34 · Home</div></div></div>
<div class="tscore">102</div>
</div>
<div class="teamrow">
<div class="tinfo"><div class="logo30" style="background:#007A33"></div><div><div class="tname">Boston Celtics</div><div class="trecord">52–30 · Away</div></div></div>
<div class="tscore dim">97</div>
</div>
<div class="gcfoot"><span>Q3 · 4:12</span><span class="watch">▶ Watch on ESPN+</span></div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.25px; background: #dedede; color: #121212;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.25px; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #c13515; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e8e8e8;}
.logo{font-size:19px;font-weight:600;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.navlinks span:first-child{border-bottom:2px solid #121212;padding-bottom:20px;}
.search{background:#f5f5f5;border-radius:9999px;height:40px;width:170px;display:flex;align-items:center;padding:0 16px;font-size:13px;color:#666;}
.hero{height:150px;background:#dedede;display:flex;align-items:center;justify-content:center;}
.hero h1{font-size:24px;font-weight:600;}
.filters{display:flex;gap:8px;padding:16px 32px 0;}
.chip{background:#dedede;color:#121212;font-size:12px;font-weight:500;padding:8px 20px;border-radius:9999px;}
.grid{display:flex;gap:16px;padding:16px 32px 0;}
.card{width:210px;}
.thumb{height:130px;background:#dedede;border-radius:8px;margin-bottom:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#121212;color:#fff;font-size:11px;font-weight:600;text-transform:uppercase;padding:2px 6px;border-radius:2px;}
.pname{font-size:16px;font-weight:500;}
.pprice{font-size:14px;color:#666;margin-top:4px;}
.sizes{display:flex;gap:6px;padding:0 32px;margin-top:14px;}
.size{width:36px;height:36px;border:1px solid #dedede;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:13px;}
.size.active{background:#121212;color:#fff;border-color:#121212;}
.footer{position:absolute;bottom:0;left:0;right:0;height:60px;background:#f5f5f5;color:#666;display:flex;align-items:center;justify-content:center;gap:26px;font-size:13px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Primary</div>
<div class="navlinks"><span>Baby</span><span>Toddler</span><span>Kids</span><span>Sale</span></div>
<div class="search">Search...</div>
</div>
<div class="hero"><h1>Clothes made for playing hard.</h1></div>
<div class="filters"><div class="chip">All</div><div class="chip">0-24m</div><div class="chip">2T-4T</div><div class="chip">5-14</div></div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">New</div></div><div class="pname">Organic Cotton Tee</div><div class="pprice">$18.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Everyday Leggings</div><div class="pprice">$22.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Zip Rain Jacket</div><div class="pprice">$44.00</div></div>
</div>
<div class="sizes"><div class="size">XS</div><div class="size active">S</div><div class="size">M</div><div class="size">L</div></div>
<div class="footer"><span>Size Chart</span><span>Fabric Care</span><span>Returns</span><span>Help</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #202020; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #202020;
border: 1px solid #202020; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdbdb; color: #202020;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#242424; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { position:relative; width:960px; height:640px; display:flex; }
/* sidebar drawer — acrylic, recents grouped */
.side { width:230px; height:640px; background:rgba(243,243,243,0.92); border-right:1px solid #E0E0E0;
display:flex; flex-direction:column; padding:18px 14px; gap:14px; flex-shrink:0; }
.side-newchat { display:flex; align-items:center; gap:8px; background:#0078D4; color:#fff;
border-radius:8px; padding:10px 14px; font-size:14px; font-weight:600; }
.side-search { background:#FFFFFF; border:1px solid #E0E0E0; border-radius:8px; height:36px;
display:flex; align-items:center; padding:0 10px; font-size:13px; color:#616161; }
.side-label { font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:#919191; margin-top:6px; }
.side-row { height:38px; border-radius:8px; display:flex; align-items:center; gap:10px; padding:0 10px;
font-size:13px; color:#242424; position:relative; }
.side-row.active { background:#F3F3F3; }
.side-row.active::before { content:''; position:absolute; left:-14px; top:6px; bottom:6px; width:3px; background:#0078D4; border-radius:2px; }
.side-dot { width:16px; height:16px; border-radius:4px; background:#E0E0E0; flex-shrink:0; }
/* main conversation column */
.main { flex:1; height:640px; display:flex; flex-direction:column; position:relative; background:#FFFFFF; }
.topbar { height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 20px;
border-bottom:1px solid #E0E0E0; }
.topbar-title { font-size:15px; font-weight:600; display:flex; align-items:center; gap:8px; }
.flourish { width:20px; height:20px; border-radius:7px;
background:linear-gradient(135deg,#FF6F61,#FFB900); flex-shrink:0; }
.topbar-avatar { width:26px; height:26px; border-radius:50%; background:#E0E0E0; }
.convo { flex:1; padding:22px 40px; display:flex; flex-direction:column; gap:16px; overflow:hidden; }
.turn-user { align-self:flex-end; max-width:70%; background:#0078D4; color:#fff; font-size:14px;
line-height:1.45; padding:10px 14px; border-radius:16px 16px 4px 16px; }
.answer-card { background:#F3F3F3; border-radius:16px; padding:16px; box-shadow:0 2px 10px rgba(36,36,36,0.06);
display:flex; flex-direction:column; gap:8px; }
.answer-head { display:flex; align-items:center; gap:8px; }
.answer-head .flourish { width:22px; height:22px; border-radius:8px; }
.answer-title { font-size:14px; font-weight:600; }
.answer-body { font-size:15px; line-height:1.5; color:#242424; }
.answer-body b { font-weight:600; }
.shimmer-bar { height:3px; width:140px; border-radius:2px; margin-top:2px;
background:linear-gradient(90deg,#FF6F61,#FFB900,#FF6F61); }
.answer-actions { display:flex; gap:12px; margin-top:4px; }
.answer-actions span { width:16px; height:16px; border-radius:4px; background:#D8D8D8; }
.chips-row { display:flex; gap:8px; padding:0 40px 10px; flex-wrap:wrap; }
.chip { background:#F3F3F3; border:1px solid #E0E0E0; border-radius:18px; padding:8px 14px;
font-size:13px; font-weight:600; color:#242424; display:flex; align-items:center; gap:6px; }
.chip .fl { width:10px; height:10px; border-radius:3px; background:linear-gradient(135deg,#FF6F61,#FFB900); }
.composer { padding:12px 40px 18px; display:flex; flex-direction:column; gap:10px; }
.tone-track { align-self:center; display:flex; background:#F3F3F3; border-radius:500px; padding:3px; gap:2px; }
.tone-seg { padding:7px 16px; font-size:12px; font-weight:600; border-radius:500px; color:#616161; }
.tone-seg.on { background:#0078D4; color:#fff; }
.prompt-bar { height:52px; background:#F3F3F3; border-radius:24px; display:flex; align-items:center;
padding:0 10px 0 18px; gap:12px; border:1.5px solid #0078D4; }
.prompt-bar .ph { flex:1; font-size:14px; color:#616161; }
.mic { width:22px; height:22px; border-radius:50%; background:#E0E0E0; flex-shrink:0; }
.send { width:36px; height:36px; border-radius:50%; background:#0078D4; flex-shrink:0;
display:flex; align-items:center; justify-content:center; }
.send::before { content:''; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;
border-bottom:8px solid #fff; }
</style></head>
<body>
<div class="shell">
<div class="side">
<div class="side-newchat">+ New chat</div>
<div class="side-search">Search chats</div>
<div class="side-label">Today</div>
<div class="side-row active"><span class="side-dot"></span>Quarterly report outline</div>
<div class="side-row"><span class="side-dot"></span>Trip planning to Kyoto</div>
<div class="side-label">Last 7 days</div>
<div class="side-row"><span class="side-dot"></span>Excel formula help</div>
<div class="side-row"><span class="side-dot"></span>Resume rewrite draft</div>
<div class="side-label">Copilot Pages</div>
<div class="side-row"><span class="side-dot"></span>Product launch notes</div>
</div>
<div class="main">
<div class="topbar">
<div class="topbar-title"><span class="flourish"></span>Microsoft Copilot (iOS)</div>
<div class="topbar-avatar"></div>
</div>
<div class="convo">
<div class="turn-user">Can you help me tighten this intro paragraph for our Q3 update?</div>
<div class="answer-card">
<div class="answer-head"><span class="flourish"></span><span class="answer-title">Here's a tighter version</span></div>
<div class="shimmer-bar"></div>
<div class="answer-body">Q3 was our strongest quarter yet: revenue grew <b>18% quarter-over-quarter</b>,
driven mainly by renewals in the enterprise tier. Two things stood out — retention held above 96%,
and the new onboarding flow cut time-to-value nearly in half.</div>
<div class="answer-actions"><span></span><span></span><span></span><span></span></div>
</div>
</div>
<div class="chips-row">
<div class="chip"><span class="fl"></span>Draft an email</div>
<div class="chip"><span class="fl"></span>Summarize this</div>
<div class="chip"><span class="fl"></span>Make an image</div>
</div>
<div class="composer">
<div class="tone-track">
<div class="tone-seg">Creative</div>
<div class="tone-seg on">Balanced</div>
<div class="tone-seg">Precise</div>
</div>
<div class="prompt-bar">
<div class="ph">Message Copilot</div>
<div class="mic"></div>
<div class="send"></div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f44336; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f44336; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e171f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f44336; color: #0e171f;
border: 1px solid #0e171f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f44336; color: #f5f5f5;
border: 1px solid #f45f55; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cf3c32; color: #0e171f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0e171f; color:#ffffff; box-sizing:border-box;
font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid rgba(255,255,255,0.08); }
.brand { font-size:18px; font-weight:800; margin:0; color:#fff; }
.navlinks { display:flex; gap:26px; font-size:14px; font-weight:600; color:#7a909e; }
.navlinks span.active { color:#fff; }
.btn-contact { background:#f44336; color:#fff; border:none; border-radius:4px; height:44px;
padding:0 16px; font-size:16px; font-weight:400; display:flex; align-items:center; }
.hero { padding:44px 40px 24px; }
.badge { display:inline-block; background:#2a3f4d; color:#f2f5f7; border-radius:999px; padding:4px 14px;
font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; }
.hero h1 { font-size:52px; font-weight:800; line-height:1.1; margin:0 0 12px; letter-spacing:-1px; max-width:620px; }
.hero p { font-size:16px; color:#9fb1bd; margin:0; max-width:460px; line-height:1.4; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:20px 40px 28px; }
.stat { background:#2a3f4d; border-radius:32px; padding:22px 24px; }
.stat .n { font-size:34px; font-weight:800; color:#fff; }
.stat .l { font-size:12px; color:#9fb1bd; margin-top:4px; font-weight:500; }
.lower { background:#ffffff; padding:26px 40px 30px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#f2f5f7; border-radius:16px; padding:20px; }
.card .tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#5b7282; }
.card h3 { font-size:17px; font-weight:700; color:#0e171f; margin:8px 0 6px; }
.card p { font-size:13px; color:#3e5463; margin:0; line-height:1.5; }
.filters { display:flex; gap:8px; margin-top:2px; }
.pill { border:1px solid #c1ccd6; border-radius:999px; padding:6px 14px; font-size:12px; color:#7a909e; }
.pill.on { background:#000; color:#fff; border-color:#000; }
</style></head>
<body>
<nav>
<p class="brand">Buzzvil</p>
<div class="navlinks"><span class="active">Products</span><span>Technologies</span><span>Company</span></div>
<button class="btn-contact">Contact</button>
</nav>
<section class="hero">
<span class="badge">Reward Ad Platform</span>
<h1>Advertising that everyone loves</h1>
<p>Buzzvil turns everyday moments into reward moments — connecting brands with people through unlock screens they actually enjoy.</p>
</section>
<section class="stats">
<div class="stat"><div class="n">42M+</div><div class="l">Monthly active users reached</div></div>
<div class="stat"><div class="n">3.4x</div><div class="l">Average engagement lift</div></div>
<div class="stat"><div class="n">120+</div><div class="l">Brand partners live today</div></div>
</section>
<section class="lower">
<div class="card">
<div class="filters"><span class="pill on">All goals</span><span class="pill">Awareness</span></div>
<h3>Reach every unlock</h3>
<p>Native lock-screen placements that feel like part of the phone, not an interruption.</p>
</div>
<div class="card">
<div class="tag">Technology</div>
<h3>AI-optimized bidding</h3>
<p>Real-time delivery tuning keeps every campaign inside its performance targets.</p>
</div>
<div class="card">
<div class="tag">Company</div>
<h3>Built for the long run</h3>
<p>A decade of reward-ad data powering smarter, fairer advertising for everyone.</p>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 300; line-height: 1.4; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #0078a8; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #222222;
border: 1px solid #0078a8; border-radius: 0px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dbecf3; color: #0078a8;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:20px; font-weight:900; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:22px; font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; color:#222; }
.search { width:220px; height:40px; border:1px solid #c3c3c3; border-radius:999px; display:flex; align-items:center;
padding:0 16px; font-size:13px; font-weight:300; color:#777; }
.hero { background:#f4f4f4; padding:26px 36px; }
.hero h1 { font-size:34px; font-weight:900; margin:0 0 8px; letter-spacing:-0.5px; }
.hero p { font-size:15px; font-weight:300; color:#777; margin:0 0 14px; max-width:460px; }
.btn-primary { background:#0078a8; color:#fff; border:none; border-radius:0; padding:12px 26px; font-size:14px;
font-weight:700; text-transform:uppercase; letter-spacing:0.4px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding:20px 60px; }
.card .cover { aspect-ratio:3/4; height:130px; background:linear-gradient(160deg,#222,#0078a8); border-radius:8px; margin-bottom:8px; }
.card h3 { font-size:16px; font-weight:700; margin:0 0 3px; }
.card .author { font-size:12px; font-weight:300; color:#777; }
.card .price { font-size:13px; font-weight:400; color:#222; margin-top:3px; }
footer { background:#0078a8; color:#fff; padding:16px 36px; display:flex; justify-content:space-between;
align-items:center; font-size:13px; font-weight:300; }
</style></head>
<body>
<nav>
<p class="brand">Books Are Magic</p>
<div class="navlinks"><span>Fiction</span><span>Events</span><span>Kids</span></div>
<div class="search">Search books</div>
</nav>
<section class="hero">
<h1>An independent bookstore, Brooklyn born</h1>
<p>Handpicked fiction, poetry, and events for readers who like to browse without being sold to.</p>
<button class="btn-primary">Shop New Arrivals</button>
</section>
<section class="grid">
<div class="card"><div class="cover"></div><h3>Small Worlds</h3><div class="author">Caleb Azumah Nelson</div><div class="price">$27.00</div></div>
<div class="card"><div class="cover"></div><h3>The Coin</h3><div class="author">Yasmin Zaher</div><div class="price">$26.00</div></div>
<div class="card"><div class="cover"></div><h3>All Fours</h3><div class="author">Miranda July</div><div class="price">$28.00</div></div>
</section>
<footer>
<span>© Books Are Magic</span>
<span>Independent Bookstore · Brooklyn, NY</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbf9f6; color: #19191a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbf9f6; color: #19191a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #19191a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #1f3f39; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fbf9f6; color: #19191a;
border: 1px solid #1f3f39; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fbf9f6; color: #19191a;
border: 1px solid #c2c1bf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #b1edd8; color: #1f3f39;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbf9f6; color:#19191a; box-sizing:border-box;
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#fbf9f6; border-bottom:1px solid #eaeaea; }
.brand { font-family:'Recolta Bold',Georgia,serif; font-size:20px; font-weight:700; color:#1f3f39; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; letter-spacing:0.3px; color:#19191a; }
.util { font-size:13px; color:#666666; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 72px); }
.stage { padding:26px; display:flex; flex-direction:column; gap:12px; background:#f6f5fa; }
.crumb { font-size:11px; color:#aeaeae; }
.pan { flex:1; border-radius:12px; background:#ffffff; position:relative; overflow:hidden; }
.pan::before { content:''; position:absolute; left:50%; top:50%; width:220px; height:160px; transform:translate(-50%,-50%); border-radius:60px;
background:radial-gradient(circle at 30% 30%,#b1edd8,#1f3f39 85%); box-shadow:0 18px 30px rgba(0,0,0,0.1); }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; border-radius:8px; background:#ffffff; }
.info { padding:24px 34px; display:flex; flex-direction:column; gap:11px; overflow:hidden; }
.cat { font-size:12px; font-weight:500; color:#666666; }
h1 { font-family:'Recolta Bold',Georgia,serif; margin:0; font-size:28px; font-weight:700; line-height:1.25; }
.rating { display:flex; align-items:center; gap:8px; font-size:13px; color:#666666; }
.stars { color:#19191a; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:16px; font-weight:400; color:#666666; }
.badge-eco { background:#b6db6e; color:#19191a; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:4px 10px; border-radius:9999px; }
.desc { font-size:16px; color:#333333; line-height:1.6; }
.swatches { display:flex; gap:10px; align-items:center; }
.swatch { width:32px; height:32px; border-radius:50%; border:2px solid transparent; }
.swatch.on { border:2px solid #19191a; }
.sw1{background:#1f3f39;} .sw2{background:#dc582a;} .sw3{background:#e0e0e0;}
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#1f3f39; color:#fff; border:none; height:48px; border-radius:8px; font-size:15px; font-weight:600; letter-spacing:0.3px; }
.btn-secondary { width:170px; background:#fbf9f6; border:2px solid #19191a; color:#19191a; height:48px; border-radius:8px; font-size:15px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Buffy</p>
<div class="navlinks"><span>Comforters</span><span>Sheets</span><span>Pillows</span><span>Bundles</span></div>
<div class="util">Search Account Cart (1)</div>
</nav>
<main>
<div class="stage">
<div class="crumb">Buffy / Comforters / Cloud</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Cloud Collection</span>
<h1>Cloud Comforter</h1>
<div class="rating"><span class="stars">★★★★★</span> 4.8 · 15,203 reviews</div>
<div class="price-row"><span class="price">$219</span><span class="badge-eco">Eco-Conscious</span></div>
<p class="desc">Recycled, hypoallergenic PlumaFill™ fibers create a lightweight comforter that mimics down without an ounce of it.</p>
<div class="swatches">
<span class="swatch sw1 on"></span><span class="swatch sw2"></span><span class="swatch sw3"></span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">View Details</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbf9ee; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbf9ee; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.25px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #cd0a0a; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #121212; color: #fbf9ee;
border: 1px solid #cd0a0a; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fbf9ee; color: #222222;
border: 1px solid #dedede; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #cd0a0a; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Arial,Verdana,sans-serif; background:#fbf9ee; color:#363636; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#222;}
.search{width:260px;height:36px;border-radius:9999px;background:#222222;}
.cart{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#cd0a0a;}
.hero{height:210px;background:#212121;display:flex;color:#fbf9ee;}
.herotxt{width:48%;padding:24px 32px;display:flex;flex-direction:column;justify-content:center;}
.herotxt .k{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#cd0a0a;margin-bottom:10px;}
.herotxt h1{font-size:26px;font-weight:700;margin:0 0 10px;line-height:1.3;}
.herotxt p{font-size:13px;color:#aaaaaa;margin:0 0 16px;max-width:270px;}
.cta{width:fit-content;font-size:12px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;background:#cd0a0a;color:#fff;padding:12px 24px;border-radius:12px;}
.covers{width:52%;display:flex;align-items:center;justify-content:center;gap:14px;}
.cov{width:90px;height:90px;position:relative;box-shadow:0 10px 24px rgba(0,0,0,0.4);}
.cov:after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:#121212;}
.sec{padding:20px 32px 0;}
.sec h2{font-size:17px;font-weight:700;margin:0 0 14px;}
.grid{display:flex;gap:14px;}
.card{width:210px;background:#fff;border-radius:12px;padding:10px;position:relative;}
.badge{position:absolute;top:16px;left:16px;font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#fff;background:#cd0a0a;padding:2px 8px;border-radius:12px;z-index:1;}
.cimg{height:100px;border-radius:8px;margin-bottom:8px;}
.ctitle{font-size:13px;font-weight:600;}
.cprice{font-size:13px;margin-top:4px;color:#555;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;background:#121212;color:#aaaaaa;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mute Bank</div>
<div class="search"></div>
<div class="cart">Cart (3)</div>
</div>
<div class="hero">
<div class="herotxt">
<div class="k">Limited Repress</div>
<h1>Records for<br>slow listening</h1>
<p>Curated vinyl and archival reissues from the label's back catalog.</p>
<div class="cta">Browse the Shop</div>
</div>
<div class="covers"><div class="cov" style="background:linear-gradient(150deg,#363636,#cd0a0a)"></div><div class="cov" style="background:linear-gradient(150deg,#555,#212121)"></div><div class="cov" style="background:linear-gradient(150deg,#aaaaaa,#363636)"></div></div>
</div>
<div class="sec">
<h2>Recent Pressings</h2>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="cimg" style="background:linear-gradient(135deg,#cd0a0a,#212121)"></div><div class="ctitle">Static Bloom — LP</div><div class="cprice">$24.00</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#555,#121212)"></div><div class="ctitle">Nightshift Sessions — LP</div><div class="cprice">$28.00</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#aaaaaa,#363636)"></div><div class="ctitle">Low Tide EP — 12"</div><div class="cprice">$16.00</div></div>
</div>
</div>
<div class="footer"><span>© Independent Since 2012</span><span>Mailing List Wholesale</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #4f4f4f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; background: #d20000; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; background: transparent; color: #222222;
border: 1px solid #d20000; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4f4f4f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d20000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>DSPTCH Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:'IBM Plex Mono',Consolas,monospace;
background:#ffffff; color:#222222;
}
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Trade Gothic Next','Helvetica Neue',Arial,sans-serif;font-size:18px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;}
.navlinks{display:flex;gap:24px;font-family:'Trade Gothic Next',Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#222222;}
.navlinks span.active{color:#d20000;}
.hero{display:flex;gap:24px;padding:20px 32px;}
.hero-copy{flex:1;padding-top:20px;}
.hero-copy h1{font-family:'Trade Gothic Next',Arial,sans-serif;font-size:36px;font-weight:700;letter-spacing:-0.5px;line-height:1.1;margin:0 0 12px;}
.hero-copy p{font-size:14px;color:#404040;line-height:1.5;margin:0 0 16px;max-width:340px;}
.herobtn{background:#d20000;color:#fff;font-family:'Trade Gothic Next',Arial,sans-serif;font-size:14px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:12px 24px;border-radius:4px;display:inline-block;}
.hero-visual{width:280px;height:200px;background:linear-gradient(160deg,#404040,#222222);position:relative;}
.hero-visual::after{content:"";position:absolute;top:20px;left:20px;right:20px;bottom:20px;border:1px solid rgba(255,255,255,0.15);}
.section{padding:0 32px;}
.grid{display:flex;gap:1px;background:#e6e6e6;border:1px solid #e6e6e6;}
.card{flex:1;background:#fff;padding:12px;}
.card-img{height:110px;background:#f4f4f2;margin-bottom:10px;position:relative;}
.card-img.c1{background:linear-gradient(135deg,#e6e6e6,#404040);}
.card-img.c2{background:linear-gradient(135deg,#f2f2f2,#222222);}
.card-img.c3{background:linear-gradient(135deg,#d20000,#222222);}
.card-img.c4{background:linear-gradient(135deg,#404040,#e6e6e6);}
.badge{position:absolute;top:0;left:0;background:#d20000;color:#fff;font-family:'Trade Gothic Next',Arial,sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;}
.badge.green{background:#1f873d;}
.card-title{font-family:'Trade Gothic Next',Arial,sans-serif;font-size:16px;font-weight:600;margin:0 0 4px;}
.card-price{font-size:14px;color:#404040;}
</style>
<nav class="nav">
<div class="logo">Dsptch</div>
<div class="navlinks">
<span class="active">Bags</span><span>Cases</span><span>Straps</span><span>Journal</span>
</div>
</nav>
<div class="hero">
<div class="hero-copy">
<h1>Gear for people<br>who move fast.</h1>
<p>Modular bags and cases built for daily carry. No fanfare, no filler.</p>
<div class="herobtn">Shop The Ruck</div>
</div>
<div class="hero-visual"></div>
</div>
<div class="section">
<div class="grid">
<div class="card"><div class="card-img c1"><span class="badge">Sale</span></div><div class="card-title">Ruck Pack V3</div><div class="card-price">$285.00</div></div>
<div class="card"><div class="card-img c2"></div><div class="card-title">Field Case</div><div class="card-price">$95.00</div></div>
<div class="card"><div class="card-img c3"><span class="badge green">New</span></div><div class="card-title">Utility Strap</div><div class="card-price">$45.00</div></div>
<div class="card"><div class="card-img c4"></div><div class="card-title">Cache Pouch</div><div class="card-price">$65.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f8f6; color: #101010;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f8f6; color: #101010;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #101010; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f9f8f6; color: #101010;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9f8f6; color: #101010;
border: 1px solid #bfbebc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e5ff52; color: #101010;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9f8f6; color:#101010; box-sizing:border-box;
font-family:'Space Grotesk','Nunito Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; border-bottom:1px solid #eeeeee; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:0; font-size:14px; font-weight:600; }
.navlinks span { padding:0 14px; height:72px; display:flex; align-items:center; border-bottom:2px solid transparent; }
.navlinks span.active { color:#108474; border-bottom-color:#108474; }
.search-pill { background:#fff; border:1px solid #dddddd; border-radius:999px; padding:12px 24px; font-size:13px; color:#101010; width:220px; height:56px; display:flex; align-items:center; }
.hero { padding:20px 36px 14px; }
.hero h1 { font-size:44px; font-weight:700; letter-spacing:-1px; margin:0 0 8px; line-height:1.08; }
.hero p { font-family:'Nunito Sans',sans-serif; font-size:14px; color:#333333; margin:0; max-width:420px; }
.catrow { display:flex; gap:8px; padding:12px 36px; }
.catpill { border-radius:999px; padding:6px 14px; font-size:11px; font-weight:700; text-transform:uppercase; background:#f9fafb; color:#555555; }
.catpill.active { background:#101010; color:#f9f8f6; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:0 36px; }
.card { background:#fff; border-radius:12px; margin:6px; overflow:hidden; }
.card-img { height:96px; background:linear-gradient(135deg,#108474,#e5ff52); border-radius:12px 12px 0 0; }
.cbody { padding:16px; }
.cbody h3 { font-size:16px; font-weight:600; margin:0 0 4px; }
.price { font-size:16px; font-weight:400; font-family:'Nunito Sans',sans-serif; }
.badge-yellow { display:inline-block; background:#e5ff52; color:#101010; font-size:11px; font-weight:800; text-transform:uppercase; padding:4px 10px; border-radius:999px; margin-bottom:8px; }
footer { position:absolute; bottom:0; left:0; right:0; height:56px; background:#101010; color:#7b7b7b;
display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; font-family:'Nunito Sans',sans-serif; }
</style></head>
<body>
<nav>
<p class="brand">Beardbrand Men S GR 2</p>
<div class="navlinks"><span class="active">Shop</span><span>Beard Oil</span><span>Kits</span><span>Journal</span></div>
<div class="search-pill">Search products</div>
</nav>
<section class="hero">
<h1>Groom Like It's<br>Barbershop Day</h1>
<p>Workshop-meets-barbershop grooming, built for the man who takes his beard seriously — and his mornings not too seriously.</p>
</section>
<div class="catrow">
<div class="catpill active">All</div><div class="catpill">Beard Oil</div><div class="catpill">Wash</div><div class="catpill">Balm</div>
</div>
<div class="grid">
<div class="card">
<div class="card-img"></div>
<div class="cbody"><span class="badge-yellow">New</span><h3>Original Beard Oil</h3><div class="price">$28</div></div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody"><h3>Beard Wash Bar</h3><div class="price">$22</div></div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody"><h3>Utility Balm 2oz</h3><div class="price">$26</div></div>
</div>
</div>
<footer>
<span>© Beardbrand Men S GR 2</span>
<span>Beardbrand Men S GR 2 · Grooming Guide · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b0b0f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b0b0f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c8c8e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a84ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0b0f; color: #0a84ff;
border: 1px solid #0a84ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b0b0f; color: #f5f5f5;
border: 1px solid #303034; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0b1e35; color: #0a84ff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0B0B0F; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
/* left: phone frame with the flight card + live arc map */
.phone { width:360px; height:640px; background:#0B0B0F; padding:28px 20px; position:relative;
border-right:1px solid #2E2E36; }
.statusrow { display:flex; justify-content:space-between; font-size:11px; color:#8E8E96; margin-bottom:18px; font-weight:600; }
.navtitle { font-size:22pt; font-weight:700; letter-spacing:-0.3px; margin:0 0 14px; }
.card { background:#1A1A1F; border:1px solid #2E2E36; border-radius:16px; padding:16px; }
.cardhead { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.airline { font-size:13px; font-weight:600; color:#fff; }
.chip { background:rgba(48,209,88,0.15); color:#30D158; font-size:10px; font-weight:700; letter-spacing:0.3px;
text-transform:uppercase; padding:3px 8px; border-radius:999px; }
.route { display:flex; align-items:center; justify-content:center; gap:10px; margin:8px 0 14px; }
.code { font-size:22px; font-weight:700; color:#fff; }
.arc { flex:1; height:2px; background:linear-gradient(90deg,#0A84FF,rgba(10,132,255,0.35)); position:relative; }
.arc::after { content:'✈'; position:absolute; right:30%; top:-8px; font-size:12px; color:#fff;
filter:drop-shadow(0 0 4px rgba(10,132,255,0.8)); }
.timerow { display:flex; justify-content:space-between; margin-bottom:10px; }
.timeblock .t { font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; }
.timeblock .g { font-size:11px; color:#8E8E96; font-variant-numeric:tabular-nums; margin-top:2px; }
.meta { font-size:11px; color:#8E8E96; border-top:1px solid #2E2E36; padding-top:10px; }
.mapcard { margin-top:14px; height:220px; border-radius:16px; background:#16161B;
background-image: radial-gradient(circle at 20% 30%, rgba(31,31,38,0.9) 0, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(31,31,38,0.9) 0, transparent 40%);
position:relative; overflow:hidden; border:1px solid #2E2E36; }
.greatcircle { position:absolute; top:40%; left:14%; width:72%; height:2px;
background:linear-gradient(90deg,#0A84FF 55%, rgba(10,132,255,0.35) 55%);
box-shadow:0 0 12px rgba(10,132,255,0.45); transform:rotate(-8deg); }
.plane { position:absolute; top:31%; left:52%; font-size:14px; color:#fff;
filter:drop-shadow(0 0 6px rgba(10,132,255,0.6)); }
.pin { position:absolute; width:8px; height:8px; border-radius:50%; background:#0A84FF; border:2px solid #fff; }
.pin.a { left:12%; top:38%; } .pin.b { right:12%; top:44%; }
.maplabel { position:absolute; bottom:10px; left:10px; font-size:10px; color:#8E8E96; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:56px; background:rgba(11,11,15,0.92);
border-top:1px solid #2E2E36; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:#8E8E96; text-align:center; }
.tab.on { color:#0A84FF; font-weight:600; }
.tab .dot { display:block; width:6px; height:6px; border-radius:50%; margin:0 auto 3px; background:currentColor; }
/* right: brand panel */
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:700; letter-spacing:-0.6px; margin:0; }
.brand span { color:#0A84FF; }
.tag { font-size:14px; color:#8E8E96; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:10px; border:1px solid #2E2E36; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#8E8E96; text-align:center; }
.typeblock .t1 { font-size:26px; font-weight:700; letter-spacing:-0.4px; }
.typeblock .t2 { font-size:13px; color:#8E8E96; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:999px;
background:#1A1A1F; border:1px solid #2E2E36; color:#8E8E96; }
.footer { margin-top:auto; border-top:1px solid #2E2E36; padding-top:16px; font-size:11px; color:#5A5A62; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="statusrow"><span>9:41</span><span>●●● 5G 100%</span></div>
<p class="navtitle">Flights</p>
<div class="card">
<div class="cardhead"><span class="airline">United · UA 482</span><span class="chip">On time</span></div>
<div class="route"><span class="code">SFO</span><div class="arc"></div><span class="code">JFK</span></div>
<div class="timerow">
<div class="timeblock"><div class="t">7:45<span style="font-size:12px">AM</span></div><div class="g">Gate B24 · Term 2</div></div>
<div class="timeblock" style="text-align:right"><div class="t">4:12<span style="font-size:12px">PM</span></div><div class="g">Gate 7 · Term 4</div></div>
</div>
<div class="meta">5h 42m · 2,586 mi · Nonstop</div>
</div>
<div class="mapcard">
<div class="pin a"></div><div class="pin b"></div>
<div class="greatcircle"></div><span class="plane">✈</span>
<span class="maplabel">Live position · updated 12s ago</span>
</div>
<div class="tabbar">
<div class="tab on"><span class="dot"></span>Flights</div>
<div class="tab"><span class="dot"></span>Search</div>
<div class="tab"><span class="dot"></span>Airport</div>
<div class="tab"><span class="dot"></span>Profile</div>
</div>
</div>
<div class="info">
<div>
<h1 class="brand">Flighty (iOS)<span>.</span></h1>
<p class="tag">An instrument-panel-black canvas built for a single glowing signal: the live great-circle arc between where you are and where you're going.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#0B0B0F"></div><small>#0B0B0F</small></div>
<div class="sw"><div class="chip2" style="background:#0A84FF"></div><small>#0A84FF</small></div>
<div class="sw"><div class="chip2" style="background:#30D158"></div><small>#30D158</small></div>
<div class="sw"><div class="chip2" style="background:#FFD60A"></div><small>#FFD60A</small></div>
<div class="sw"><div class="chip2" style="background:#FF453A"></div><small>#FF453A</small></div>
</div>
<div class="typeblock">
<div class="t1">7:45 AM</div>
<div class="t2">SF Pro Display · 32pt / 700 · tabular figures on every flight number</div>
</div>
<div class="taglist">
<span>Live flight map arc</span><span>On-time green</span><span>Delay amber</span>
<span>Dynamic-Island status bar</span><span>Delay timeline</span>
</div>
<div class="footer">Deep-black canvas · single blue accent · the map exists to host the glowing arc</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #758e6d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #dbf482; color: #121212;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #dbf482; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #232933;
border: 1px solid #c4c4c4; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #758e6d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #dbf482; color: #121212;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:'proxima-nova', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; border-bottom:1px solid #e8e8e8; display:flex; align-items:center;
justify-content:space-between; padding:0 36px; }
.logo { font-family:'arquitecta','Helvetica Neue',Arial,sans-serif; font-weight:700; font-size:19px; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:22px; font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; }
.navlinks span:first-child { border-bottom:2px solid #121212; padding-bottom:4px; }
.icons { display:flex; gap:14px; font-size:14px; }
main { display:flex; padding:20px 36px 0; gap:36px; height:474px; }
.shot { width:340px; position:relative; background:#f5f5f5; overflow:hidden; }
.shot::before { content:''; position:absolute; inset:0;
background:
radial-gradient(circle at 30% 15%, rgba(219,244,130,0.9), transparent 45%),
radial-gradient(circle at 75% 80%, rgba(249,202,230,0.7), transparent 50%),
linear-gradient(160deg, #232933 0%, #121212 100%); }
.badge-new { position:absolute; top:12px; left:12px; background:#dbf482; color:#121212; font-size:11px;
font-weight:700; letter-spacing:0.5px; text-transform:uppercase; border-radius:8px; padding:2px 10px; }
.thumbstrip { display:flex; gap:8px; margin-top:8px; }
.thumbstrip div { flex:1; height:52px; background:#f5f5f5; }
.thumbstrip div:nth-child(1) { background:linear-gradient(160deg,#758e6d,#232933); }
.thumbstrip div:nth-child(2) { background:linear-gradient(160deg,#dbf482,#758e6d); }
.thumbstrip div:nth-child(3) { background:linear-gradient(160deg,#f9cae6,#232933); }
.info { flex:1; display:flex; flex-direction:column; }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#758e6d; margin-bottom:6px; }
.name { font-family:'arquitecta','Helvetica Neue',Arial,sans-serif; font-size:28px; font-weight:700;
line-height:1.15; letter-spacing:-0.5px; margin:0 0 8px; }
.stars { font-size:13px; margin-bottom:10px; }
.stars span { color:#9baa94; font-weight:600; margin-left:4px; }
.price { font-size:18px; font-weight:600; margin-bottom:16px; }
.field { margin-bottom:14px; }
.field .lbl { font-size:12px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; margin-bottom:8px; }
.colors { display:flex; gap:10px; }
.dot { width:26px; height:26px; border-radius:999px; border:2px solid transparent; }
.dot.a { background:#232933; border-color:#121212; }
.dot.b { background:#f9cae6; }
.dot.c { background:#dbf482; }
.sizes { display:flex; gap:8px; }
.size { width:44px; height:44px; border:1px solid #dedede; border-radius:8px; display:flex; align-items:center;
justify-content:center; font-size:13px; }
.size.active { background:#121212; color:#fff; border-color:#121212; }
.cta { margin-top:auto; display:flex; gap:10px; }
.btn-add { flex:1; background:#dbf482; color:#121212; border:none; border-radius:999px; height:48px;
font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.btn-fav { width:48px; height:48px; border-radius:999px; border:1px solid #dedede; display:flex;
align-items:center; justify-content:center; }
.promo { margin-top:12px; font-size:12px; color:#758e6d; font-weight:600; }
footer { border-top:none; margin-top:6px; padding:14px 36px; display:flex; justify-content:space-between;
background:#121212; color:#fff; font-size:11px; letter-spacing:0.5px; }
</style></head>
<body>
<nav>
<div class="logo">Alo Yoga</div>
<div class="navlinks"><span>New</span><span>Bestsellers</span><span>Studio</span><span>Men</span></div>
<div class="icons">⌕ ♡ ⬭</div>
</nav>
<main>
<div class="shot">
<span class="badge-new">Best Seller</span>
<div class="thumbstrip"><div></div><div></div><div></div></div>
</div>
<div class="info">
<div class="eyebrow">Airbrush Collection</div>
<h1 class="name">High-Waist Airlift Legging</h1>
<div class="stars">★★★★★ <span>4.8 (2,391)</span></div>
<div class="price">$98.00</div>
<div class="field">
<div class="lbl">Color — Charcoal</div>
<div class="colors"><span class="dot a"></span><span class="dot b"></span><span class="dot c"></span></div>
</div>
<div class="field">
<div class="lbl">Size</div>
<div class="sizes">
<span class="size">XS</span><span class="size active">S</span><span class="size">M</span>
<span class="size">L</span><span class="size">XL</span>
</div>
</div>
<div class="cta">
<button class="btn-add">Add to Bag</button>
<div class="btn-fav">♡</div>
</div>
<div class="promo">Free shipping on orders $100+</div>
</div>
</main>
<footer>
<span>© Alo Yoga</span>
<span>SHIPPING · RETURNS · REWARDS</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #e85c2a; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #1b3a5c;
border: 1px solid #1b3a5c; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.33; letter-spacing: 0.2px; background: #1b3a5c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,Helvetica,sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:64px;background:#1b3a5c;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:500;color:#fff;}
.hero{background:#1b3a5c;color:#fff;padding:30px;min-height:190px;display:flex;align-items:center;}
.herotext{width:55%;}
.h1{font-size:32px;font-weight:700;line-height:1.2;letter-spacing:-0.3px;margin:0 0 12px;}
.sub{font-size:15px;color:#c9d6e2;margin:0 0 18px;max-width:340px;}
.btn{display:inline-block;background:#e85c2a;color:#fff;font-size:15px;font-weight:600;padding:12px 28px;border-radius:4px;}
.spectable{margin:18px 30px 0;border:1px solid #d4d4d4;border-radius:4px;overflow:hidden;}
.srow{display:flex;border-bottom:1px solid #d4d4d4;}
.srow:last-child{border-bottom:none;}
.slabel{width:200px;background:#f5f5f5;font-size:13px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:10px 14px;color:#333;}
.sval{flex:1;background:#fff;font-size:14px;padding:10px 14px;color:#333;}
.grid{display:flex;gap:14px;padding:20px 30px 0;}
.card{width:210px;border:1px solid #d4d4d4;border-radius:4px;padding:12px;}
.thumb{aspect-ratio:4/3;height:100px;background:#f5f5f5;margin-bottom:8px;}
.title{font-size:16px;font-weight:600;}
.tag{display:inline-block;margin-top:6px;font-size:12px;font-weight:400;background:#eaeaea;padding:4px 10px;border-radius:4px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Staber</div>
<div class="navlinks"><span>Washers</span><span>Parts</span><span>Support</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="h1">Horizontal-axis drums.<br>Three decades proven.</div>
<div class="sub">Cutaway diagrams, numbered spec lists — an engineering datasheet, not a lifestyle catalogue.</div>
<div class="btn">Request Quote</div>
</div>
</div>
<div class="spectable">
<div class="srow"><div class="slabel">Tub Design</div><div class="sval">Hexagonal, No Transmission</div></div>
<div class="srow"><div class="slabel">Bearings</div><div class="sval">Commercial-Grade</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1b3a5c,#e85c2a)"></div><div class="title">HXW Series Washer</div><span class="tag">Commercial</span></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e85c2a,#1b3a5c)"></div><div class="title">System 3000 Residential</div><span class="tag">Residential</span></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ebe5dc; color: #1b1e2f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ebe5dc; color: #1b1e2f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.2; margin: 0; color: #1b1e2f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.08em; background: #aaccaa; color: #1b1e2f;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.08em; background: transparent; color: #1b1e2f;
border: 1px solid #aaccaa; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f5f5f5; color: #1b1e2f;
border: 1px solid #b7b3b1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; background: #f5f5f5; color: #262626;
border-radius: 12px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ebe5dc; font-family:'Figtree',-apple-system,BlinkMacSystemFont,sans-serif; color:#1b1e2f; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e1e3e4;}
.logo{font-family:'Baskerville','Apple Garamond',Georgia,serif;font-size:22px;color:#1b1e2f;letter-spacing:0.02em;}
.navlinks{display:flex;gap:24px;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;}
.hero{height:230px;position:relative;display:flex;align-items:center;padding:0 34px;background:linear-gradient(120deg,#ebe5dc 45%,#f5f5f5 100%);}
.h1{font-family:'Baskerville','Apple Garamond',Georgia,serif;font-size:36px;font-weight:400;letter-spacing:0.02em;line-height:1.15;margin:0 0 14px;width:400px;}
.sub{font-size:14px;color:#262626;margin:0 0 18px;width:340px;}
.btn{display:inline-block;background:#aaccaa;color:#1b1e2f;font-size:14px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;padding:14px 30px;border-radius:4px;}
.gem{position:absolute;right:60px;top:60px;width:150px;height:150px;border-radius:50% 50% 50% 8%;background:radial-gradient(circle at 35% 30%,#d77e6a,#1b1e2f 75%);transform:rotate(20deg);}
.section{padding:20px 34px 0;}
.stitle{font-family:'Baskerville',Georgia,serif;font-size:24px;text-align:center;margin-bottom:16px;}
.grid{display:flex;gap:16px;justify-content:center;}
.card{width:150px;background:#f5f5f5;border-radius:8px;padding:12px;}
.thumb{height:96px;border-radius:8px;margin-bottom:8px;}
.pname{font-family:'Baskerville',Georgia,serif;font-size:16px;margin-bottom:4px;}
.pmat{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#7c7c7c;margin-bottom:6px;}
.pprice{font-family:'Baskerville',Georgia,serif;font-size:19px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#1b1e2f;color:#ebe5dc;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Suzanne Kalan</div>
<div class="navlinks"><div>Rings</div><div>Earrings</div><div>Bracelets</div><div>Bridal</div></div>
</div>
<div class="hero">
<div>
<div class="h1">Fine jewelry, worn in daylight.</div>
<div class="sub">Sage-cut stones and warm gold, made for living, not just for looking.</div>
<div class="btn">Shop The Edit</div>
</div>
<div class="gem"></div>
</div>
<div class="section">
<div class="stitle">Signature Pieces</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 35% 30%,#aaccaa,#1b1e2f 75%);"></div><div class="pmat">14K Gold · Diamond</div><div class="pname">Fireworks Ring</div><div class="pprice">$1,480</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 35% 30%,#d77e6a,#1b1e2f 75%);"></div><div class="pmat">14K Gold · Topaz</div><div class="pname">Ombré Studs</div><div class="pprice">$890</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 35% 30%,#ebe5dc,#8aaa8a 75%);"></div><div class="pmat">14K Gold · Sapphire</div><div class="pname">Cluster Bracelet</div><div class="pprice">$2,100</div></div>
</div>
</div>
<div class="footer"><span>© Fine Jewelry, Warm Gold Collection</span><span>Care Guide · Returns · Gifting</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #088a29; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #088a29;
border: 1px solid #088a29; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d7ecdd; color: #088a29;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#111113; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Roboto Mono",Menlo,Consolas,monospace; }
.app { display:flex; width:960px; height:640px; }
.listcol { width:360px; border-right:1px solid #E2E2E5; }
.lc-head { padding:20px 20px 10px; font-size:32px; font-weight:800; }
.row { display:flex; align-items:center; gap:12px; height:64px; padding:0 20px; border-bottom:1px solid #E2E2E5; }
.av { width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; }
.rinfo { flex:1; }
.rname { font-size:15px; font-weight:500; }
.rmeta { display:flex; align-items:center; gap:6px; margin-top:3px; }
.dots { display:flex; gap:3px; }
.dots span { width:7px; height:7px; border-radius:50%; }
.rcap { font-size:14px; color:#6B6B70; }
.side { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:#F4F4F6; }
.idbadge { font-size:11px; letter-spacing:2px; color:#088A29; font-weight:700; }
.qr { width:200px; height:200px; background:#fff; border-radius:12px; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); padding:16px; gap:3px; }
.qr div { background:#088A29; }
.qr div:nth-child(3n) { background:transparent; }
.qr div:nth-child(5n) { background:transparent; }
.idtext { font-size:20px; font-weight:700; letter-spacing:2px; background:#fff; padding:10px 20px; border-radius:8px; }
.idcap { font-size:13px; color:#6B6B70; max-width:260px; text-align:center; }
.verifybtn { background:#088A29; color:#fff; padding:14px 28px; border-radius:10px; font-size:16px; font-weight:600; }
</style></head>
<body>
<div class="app">
<div class="listcol">
<div class="lc-head">Chats</div>
<div class="row"><div class="av" style="background:#4A4A4A">JK</div>
<div class="rinfo"><div class="rname">Jonas K.</div>
<div class="rmeta"><div class="dots"><span style="background:#15A33A"></span><span style="background:#15A33A"></span><span style="background:#15A33A"></span></div><span class="rcap">Verified · ECHOX9P2</span></div></div></div>
<div class="row"><div class="av" style="background:#6B6B70">MA</div>
<div class="rinfo"><div class="rname">Maria A.</div>
<div class="rmeta"><div class="dots"><span style="background:#EF8B2C"></span><span style="background:#EF8B2C"></span><span style="background:#EF8B2C"></span></div><span class="rcap">Server-matched</span></div></div></div>
<div class="row"><div class="av" style="background:#8993A4">?</div>
<div class="rinfo"><div class="rname">Unknown ID BQ7XZP2K</div>
<div class="rmeta"><div class="dots"><span style="background:#E5453A"></span><span style="background:#E5453A"></span><span style="background:#E5453A"></span></div><span class="rcap">Unknown</span></div></div></div>
</div>
<div class="side">
<div class="idbadge">YOUR THREEMA ID</div>
<div class="qr"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="idtext mono">ECHOX9P2</div>
<div class="idcap">Scan in person to reach three green dots · no phone number, no email — Threema (iOS)</div>
<div class="verifybtn">Scan QR</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafbfc; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafbfc; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.5px; background: #ce0e2d; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.5px; background: #fafbfc; color: #222222;
border: 1px solid #ce0e2d; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafbfc; color: #222222;
border: 1px solid #c4c5c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.33; letter-spacing: 0.2px; background: #ce0e2d; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafbfc; color:#222222; box-sizing:border-box;
font-family:'Roboto', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; box-shadow:0 2px 4px rgba(0,0,0,0.06); }
.brand { font-size:18px; font-weight:700; color:#ce0e2d; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; color:#3f3f3f; }
.layout { display:flex; height:calc(640px - 64px); }
.media { width:360px; flex-shrink:0; background:#f0f1f2; display:flex; align-items:center; justify-content:center; }
.shelf { width:200px; height:180px; position:relative; }
.shelf div { position:absolute; left:0; right:0; height:10px; background:#b1b5b8; }
.shelf div:nth-child(1) { top:0; }
.shelf div:nth-child(2) { top:60px; }
.shelf div:nth-child(3) { top:120px; }
.shelf div:nth-child(4) { bottom:0; }
.box1 { position:absolute; left:14px; top:14px; width:56px; height:40px; background:#ce0e2d; border-radius:4px; }
.box2 { position:absolute; left:90px; top:74px; width:56px; height:40px; background:#6a6a6a; border-radius:4px; }
.detail { flex:1; padding:26px 34px; display:flex; flex-direction:column; gap:14px; }
.kicker { font-size:12px; color:#6a6a6a; text-transform:uppercase; letter-spacing:0.5px; }
h1 { font-size:24px; font-weight:500; margin:0; }
.price { font-size:20px; font-weight:700; }
.category-tiles { display:flex; gap:10px; }
.tile { border:1px solid #f0eeee; border-radius:4px; padding:12px 16px; font-size:14px; font-weight:500; }
.tile.active { border:2px solid #ce0e2d; }
.desc { font-size:14px; color:#3f3f3f; line-height:1.5; }
.actions { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#ce0e2d; color:#ffffff; border:none; border-radius:4px; height:48px; font-size:16px; font-weight:500; letter-spacing:0.5px; }
.btn-secondary { background:#fafbfc; color:#222222; border:2px solid #dddddd; border-radius:4px; height:48px; padding:0 20px; font-size:16px; font-weight:500; }
</style></head>
<body>
<div class="topbar">
<div class="brand">Container Store</div>
<div class="navlinks"><span>Closet</span><span>Kitchen</span><span>Storage</span><span>Elfa</span></div>
</div>
<div class="layout">
<div class="media">
<div class="shelf">
<div></div><div></div><div></div><div></div>
<div class="box1"></div><div class="box2"></div>
</div>
</div>
<div class="detail">
<div class="kicker">Modular Storage System</div>
<h1>Elfa Décor Closet Kit, 6ft</h1>
<div class="price">$429.00</div>
<div class="category-tiles">
<div class="tile active">White</div>
<div class="tile">Graphite</div>
<div class="tile">Wood</div>
</div>
<div class="desc">A fully customizable shelving and drawer system designed to fit closets from 4 to 10 feet wide.</div>
<div class="actions">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">View Details</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.25px; background: #313131; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.25px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #f0f0f0;}
.logo{font-size:19px;font-weight:600;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.navlinks span:first-child{border-bottom:2px solid #313131;padding-bottom:19px;}
.hero{height:220px;background:#f5f5f5;display:flex;align-items:center;padding:0 32px;}
.heroText{width:50%;}
.heroText h1{font-size:32px;font-weight:600;letter-spacing:-.4px;margin:0 0 12px;line-height:1.25;}
.heroText p{font-size:14px;color:#4a4a4a;max-width:320px;margin:0 0 16px;}
.btn{display:inline-block;background:#313131;color:#fff;font-size:14px;font-weight:600;padding:12px 24px;border-radius:8px;}
.heroImg{width:50%;height:180px;position:relative;}
.shelf{position:absolute;right:70px;top:20px;width:170px;height:140px;background:repeating-linear-gradient(0deg,#313131 0 4px,#c8a96e 4px 34px);border-radius:2px;}
.configbar{display:flex;gap:8px;padding:16px 32px;background:#fff;}
.stepper{width:32px;height:32px;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;background:#f5f5f5;color:#757575;}
.stepper.active{background:#313131;color:#fff;}
.stepper.done{background:#2e7d32;color:#fff;}
.stepline{flex:1;height:2px;background:#e0e0e0;align-self:center;}
.grid{display:flex;gap:14px;padding:8px 32px 0;}
.card{width:206px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px #f0f0f0;}
.thumb{height:110px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:4px;color:#fff;}
.info{padding:12px;}
.ptitle{font-size:16px;font-weight:600;margin:0 0 4px;}
.pprice{font-size:16px;font-weight:400;margin:0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Tylko</div>
<div class="navlinks"><span>Configurator</span><span>Shelving</span><span>Wardrobes</span><span>Inspiration</span></div>
</div>
<div class="hero">
<div class="heroText">
<h1>Shelving, configured to the millimeter.</h1>
<p>Design your own modular shelf in real time — dimensions, colors, and configuration, exactly yours.</p>
<div class="btn">Start Configuring</div>
</div>
<div class="heroImg"><div class="shelf"></div></div>
</div>
<div class="configbar">
<div class="stepper done">1</div><div class="stepline"></div>
<div class="stepper active">2</div><div class="stepline"></div>
<div class="stepper">3</div><div class="stepline"></div>
<div class="stepper">4</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#313131,#9e9e9e)"><span class="badge" style="background:#313131;">New</span></div><div class="info"><div class="ptitle">Type 01 Shelf</div><div class="pprice">from $399</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c8a96e,#313131)"></div><div class="info"><div class="ptitle">Sideboard 120</div><div class="pprice">from $549</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4a7c59,#313131)"><span class="badge" style="background:#4a7c59;">Eco</span></div><div class="info"><div class="ptitle">Wardrobe Type 02</div><div class="pprice">from $699</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#9e9e9e,#313131)"></div><div class="info"><div class="ptitle">TV Stand 03</div><div class="pprice">from $459</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #787878; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 0.8px; background: #ffffff; color: #121212;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 0.8px; background: transparent; color: #ffffff;
border: 1px solid #ffffff; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #141414; color: #dedede;
border: 1px solid #4d4d4d; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787878; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 1px; background: transparent; color: #787878;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#121212;font-family:Arial,Helvetica,sans-serif;color:#dedede;}
*{box-sizing:border-box;}
.nav{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #797979;}
.logo{font-size:18px;font-weight:700;letter-spacing:-0.3px;color:#ffffff;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:400;letter-spacing:0.2px;color:#dedede;}
.cta-nav{padding:8px 16px;background:#ffffff;color:#121212;font-size:13px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;}
.subhead{padding:20px 40px 0 40px;display:flex;justify-content:space-between;align-items:baseline;}
.subhead-title{font-size:22px;font-weight:700;color:#ffffff;}
.subhead-sub{font-size:12px;color:#787878;}
.grid{display:flex;gap:22px;padding:16px 40px 0 40px;}
.card{width:210px;background:#151515;}
.artcover{width:210px;height:210px;position:relative;}
.artdisc{position:absolute;right:14px;bottom:-14px;width:40px;height:40px;border-radius:20px;background:#0a0a0a;border:2px solid #3c3c3c;}
.card-body{padding:12px 4px 0 4px;}
.card-artist{font-size:13px;font-weight:700;color:#ffffff;margin-bottom:4px;}
.card-title{font-size:12px;color:#787878;margin-bottom:8px;}
.card-meta{display:flex;justify-content:space-between;align-items:center;}
.catno{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#787878;}
.formattag{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#dedede;border:1px solid #797979;padding:2px 6px;}
.card-price{font-size:13px;font-weight:700;color:#dedede;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Hyperdub</div>
<div class="navlinks"><span>Releases</span><span>Artists</span><span>Mixes</span><span>Vinyl</span></div>
<div class="cta-nav">Cart</div>
</div>
<div class="subhead">
<div class="subhead-title">New & Recent Releases</div>
<div class="subhead-sub">FLAC / MP3 / 12" Vinyl</div>
</div>
<div class="grid">
<div class="card">
<div class="artcover" style="background:linear-gradient(150deg,#141414,#0a0a0a);"><div class="artdisc"></div></div>
<div class="card-body">
<div class="card-artist">Burial</div>
<div class="card-title">Streetlands EP</div>
<div class="card-meta"><span class="catno">HDB 145</span><span class="formattag">Vinyl</span></div>
<div class="card-price">£11.99</div>
</div>
</div>
<div class="card">
<div class="artcover" style="background:linear-gradient(150deg,#1a1a1a,#141414);"><div class="artdisc"></div></div>
<div class="card-body">
<div class="card-artist">Kode9</div>
<div class="card-title">Escapology</div>
<div class="card-meta"><span class="catno">HDB 044</span><span class="formattag">FLAC</span></div>
<div class="card-price">£8.00</div>
</div>
</div>
<div class="card">
<div class="artcover" style="background:linear-gradient(150deg,#191919,#0d0d0d);"><div class="artdisc"></div></div>
<div class="card-body">
<div class="card-artist">Zamilska</div>
<div class="card-title">Uncanny Valley</div>
<div class="card-meta"><span class="catno">HDB 152</span><span class="formattag">Vinyl</span></div>
<div class="card-price">£13.99</div>
</div>
</div>
<div class="card">
<div class="artcover" style="background:linear-gradient(150deg,#151515,#0a0a0a);"><div class="artdisc"></div></div>
<div class="card-body">
<div class="card-artist">DJ Taye</div>
<div class="card-title">Still Trippin'</div>
<div class="card-meta"><span class="catno">HDB 128</span><span class="formattag">MP3</span></div>
<div class="card-price">£6.00</div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefaf0; color: #3c2c53;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefaf0; color: #3c2c53;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #3c2c53; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; background: #d74f64; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; background: #fefaf0; color: #3c2c53;
border: 1px solid #d74f64; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fefaf0; color: #555555;
border: 1px solid #cec6c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ff29b8; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fefaf0; color:#3c2c53; box-sizing:border-box;
font-family:'Futura ND Book','Futura ND Medium',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
body { position:relative; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
border-bottom:1px solid #e0e3e5; }
.brand { font-family:'Breno','Futura ND Medium',Georgia,serif; font-size:24px; font-weight:700; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; color:#777777; }
.navlinks .on { color:#d74f64; border-bottom:2px solid #d74f64; padding-bottom:4px; }
.icons { display:flex; gap:10px; }
.icircle { width:32px; height:32px; border-radius:9999px; background:#fefaf0; border:1px solid #e0e3e5; }
main { display:flex; gap:26px; padding:18px 28px 0; height:490px; }
.stage { width:360px; border-radius:12px; background:radial-gradient(circle at 30% 20%, #ffe1ea 0%, #fbeee0 45%, #f6f1e2 100%);
position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.blob1 { position:absolute; width:120px; height:120px; border-radius:9999px; background:#a49cfb; opacity:.55; top:-30px; left:-30px; }
.blob2 { position:absolute; width:100px; height:100px; border-radius:9999px; background:#ff580a; opacity:.35; bottom:-20px; right:-20px; }
.blob3 { position:absolute; width:70px; height:70px; border-radius:9999px; background:#ff29b8; opacity:.4; bottom:30px; left:20px; }
.bottle { width:96px; height:230px; position:relative; z-index:2; }
.bottle .cap { width:56px; height:34px; background:linear-gradient(160deg,#322546,#3c2c53); border-radius:8px 8px 4px 4px;
margin:0 auto; }
.bottle .body { width:96px; height:190px; margin-top:-4px; border-radius:20px;
background:linear-gradient(170deg,#d74f64 0%,#a8263a 100%); position:relative; box-shadow:0 14px 28px rgba(60,44,83,.25); }
.bottle .body::before { content:''; position:absolute; left:14px; right:14px; top:44px; bottom:44px;
background:rgba(255,255,255,.85); border-radius:6px; }
.badge-best { position:absolute; top:16px; left:16px; background:#3c2c53; color:#fff; font-size:11px; font-weight:600;
letter-spacing:.5px; text-transform:uppercase; padding:2px 10px; border-radius:9999px; z-index:3; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.eyebrow { font-size:12px; letter-spacing:.5px; text-transform:uppercase; color:#d74f64; font-weight:600; }
h1 { font-family:'Breno','Futura ND Medium',Georgia,serif; font-size:32px; font-weight:700; margin:2px 0 0; line-height:1.12; }
.stars { font-size:13px; color:#d74f64; }
.stars span.n { color:#777777; margin-left:6px; font-family:Helvetica,Arial,sans-serif; }
.price { font-size:22px; font-weight:600; color:#d74f64; margin-top:4px; }
.desc { font-size:14px; color:#555555; line-height:1.55; max-width:480px; }
.sizes { display:flex; gap:8px; margin-top:2px; }
.szpill { border-radius:9999px; border:1px solid #e0e3e5; padding:8px 16px; font-size:12px; font-weight:600;
letter-spacing:.6px; text-transform:uppercase; }
.szpill.sel { background:#d74f64; color:#fff; border-color:#d74f64; }
.ingredients { display:flex; gap:8px; margin-top:2px; flex-wrap:wrap; }
.ing { font-size:11px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:#3c2c53;
background:#f6f1e2; border-radius:9999px; padding:5px 12px; }
.cta-row { display:flex; gap:10px; margin-top:8px; }
.btn-primary { background:#d74f64; color:#fff; font-size:14px; font-weight:600; letter-spacing:1px;
text-transform:uppercase; border-radius:8px; height:44px; padding:0 26px; display:flex; align-items:center; }
.btn-secondary { background:#fefaf0; color:#3c2c53; border:2px solid #3c2c53; font-size:14px; font-weight:600;
letter-spacing:1px; text-transform:uppercase; border-radius:8px; height:44px; padding:0 24px;
display:flex; align-items:center; }
.faq { margin-top:auto; background:#f6f1e2; border-radius:12px; padding:10px 16px; display:flex;
align-items:center; justify-content:space-between; }
.faq span { font-size:13px; font-weight:600; }
.faq em { font-style:normal; color:#a8263a; font-size:12px; }
footer { position:absolute; bottom:0; left:0; right:0; height:26px; background:#3c2c53; color:#9ca3af;
display:flex; align-items:center; justify-content:space-between; padding:0 28px; font-size:10px; }
</style></head>
<body>
<nav>
<span class="brand">Amika</span>
<div class="navlinks"><span>Hair</span><span class="on">Best Sellers</span><span>Sets</span><span>About</span></div>
<div class="icons"><span class="icircle"></span><span class="icircle"></span></div>
</nav>
<main>
<div class="stage">
<span class="badge-best">Best Seller</span>
<div class="blob1"></div><div class="blob2"></div><div class="blob3"></div>
<div class="bottle"><div class="cap"></div><div class="body"></div></div>
</div>
<div class="info">
<div class="eyebrow">Shampoo & Conditioner Duo</div>
<h1>Dream Routine — Overnight Repair Duo</h1>
<div class="stars">★★★★★ <span class="n">4.7 (2,140 reviews)</span></div>
<div class="price">$46.00</div>
<div class="desc">A silk-smoothing wash-day duo that undoes damage while you sleep. Weightless, plant-derived, and built for hair that wants to be touched.</div>
<div class="sizes">
<span class="szpill">1 oz</span>
<span class="szpill sel">8 oz</span>
<span class="szpill">16 oz</span>
</div>
<div class="ingredients">
<span class="ing">Vegan</span>
<span class="ing">Cruelty-Free</span>
<span class="ing">Color-Safe</span>
<span class="ing">Sulfate-Free</span>
</div>
<div class="cta-row">
<div class="btn-primary">Add to Bag</div>
<div class="btn-secondary">Subscribe & Save</div>
</div>
<div class="faq"><span>Free shipping over $35</span><em>30-day happiness guarantee</em></div>
</div>
</main>
<footer><span>© Amika</span><span>Amika · Hair · Sets · Stockists</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #55595c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #003388; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #003388;
border: 1px solid #003388; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #212121;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #55595c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #003388; color: #fbbb19;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Montserrat',Verdana,sans-serif; color:#32373c; }
*{box-sizing:border-box;}
.nav{height:64px;background:#003388;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:800;color:#fff;letter-spacing:.5px;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:#fff;}
.hero{height:220px;background:#003388;display:flex;align-items:center;padding:0 32px;gap:26px;border-top:3px solid #fbbb19;}
.herotext{width:46%;}
.herotext h1{font-size:32px;font-weight:800;color:#fff;margin:0 0 10px;line-height:1.15;}
.herotext p{font-size:14px;color:#cfd8dc;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#fbbb19;color:#212121;font-size:14px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:12px 24px;border-radius:4px;}
.slabart{flex:1;height:150px;display:flex;align-items:center;justify-content:center;}
.slab{width:120px;height:150px;background:#fff;border-radius:8px;border:2px solid #d0d5d2;position:relative;box-shadow:0 4px 16px rgba(0,51,136,.3);}
.slaplabel{position:absolute;top:0;left:0;right:0;background:#003388;color:#fbbb19;text-align:center;font-size:10px;font-weight:700;padding:4px;letter-spacing:.5px;}
.slabart .grade{position:absolute;top:20px;left:0;right:0;text-align:center;font-size:22px;font-weight:800;color:#003388;}
.pillrow{display:flex;gap:8px;padding:14px 32px 0;}
.pill{border-radius:9999px;font-size:12px;font-weight:600;padding:6px 14px;}
.grid{display:flex;gap:14px;padding:14px 32px 0;}
.card{width:150px;background:#fff;border:1px solid #d0d5d2;border-radius:4px;padding:10px;box-shadow:0 2px 8px rgba(0,0,0,.12);position:relative;}
.badge{position:absolute;top:6px;left:6px;color:#fff;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-radius:2px;padding:2px 6px;}
.thumb{aspect-ratio:3/4;height:110px;border-radius:2px;margin-bottom:8px;}
.ptitle{font-size:14px;font-weight:600;}
.pprice{font-size:16px;font-weight:700;color:#003388;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#002152;border-top:4px solid #fbbb19;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#fbbb19;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Upper Deck</div>
<div class="navlinks"><div>Trading Cards</div><div>Graded Slabs</div><div>Memorabilia</div><div>Series</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Authenticated. Graded. Game-worn history.</h1>
<p>The hologram that started an industry, now backing every card we sell.</p>
<div class="cta">Shop Graded Cards</div>
</div>
<div class="slabart">
<div class="slab"><div class="slaplabel">AUTHENTICATED</div><div class="grade">GEM 10</div></div>
</div>
</div>
<div class="pillrow">
<div class="pill" style="background:#003388;color:#fff">All Sports</div>
<div class="pill" style="background:#e3e3e3;color:#32373c">Basketball</div>
<div class="pill" style="background:#e3e3e3;color:#32373c">Hockey</div>
</div>
<div class="grid">
<div class="card"><div class="badge" style="background:#f37627">Limited</div><div class="thumb" style="background:linear-gradient(160deg,#003388,#1863dc)"></div><div class="ptitle">2024-25 Rookie Parallel</div><div class="pprice">$149.00</div></div>
<div class="card"><div class="badge" style="background:#75c32c">New</div><div class="thumb" style="background:linear-gradient(160deg,#005396,#003388)"></div><div class="ptitle">Graded PSA 10 Slab</div><div class="pprice">$389.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#1863dc,#003388)"></div><div class="ptitle">Autographed Jersey Card</div><div class="pprice">$225.00</div></div>
</div>
<div class="footer"><span>© Authenticated Sports Collectibles</span><span>Authentication · Grading Services</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #990521; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #ffffff; color: #222222;
border: 1px solid #990521; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #755847; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:'alfaforni','Montserrat',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#212934; }
.brand { font-size:19px; font-weight:700; color:#fff; letter-spacing:0.03em; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#c3c3c3; font-weight:600; }
.cart { background:#990521; color:#fff; font-size:12px; font-weight:700; padding:8px 16px; border-radius:2px; }
main { display:flex; height:576px; }
.gallery { width:410px; background:linear-gradient(180deg,#f5f5f5 0%,#efefef 100%); position:relative;
display:flex; align-items:center; justify-content:center; }
.oven { width:200px; height:150px; background:#755847; border-radius:60% 60% 20px 20px / 90% 90% 20px 20px;
position:relative; box-shadow:0 20px 40px rgba(0,0,0,0.2); }
.oven::before { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
width:80px; height:50px; background:#1a1a1a; border-radius:40px 40px 4px 4px; }
.flame { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); width:40px; height:50px;
background:radial-gradient(circle at 50% 100%, #de4528, #d0382e 60%, transparent 100%); border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
opacity:0.85; }
.badge-heritage { position:absolute; top:22px; left:22px; background:#990521; color:#fff; font-size:10px;
font-weight:700; letter-spacing:0.04em; padding:5px 12px; text-transform:uppercase; }
.info { flex:1; padding:30px 38px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#777777; }
h1 { font-size:23px; font-weight:700; margin:0; line-height:1.28; color:#212934; }
.stars { font-size:12px; color:#d4a017; }
.stars .n { color:#777777; margin-left:6px; font-size:11.5px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:21px; font-weight:700; color:#990521; }
.desc { font-size:13.5px; color:#3e3e3e; line-height:1.55; max-width:340px; }
.fuel-row { display:flex; gap:8px; }
.fuel { border:1px solid #c3c3c3; border-radius:6px; padding:7px 14px; font-size:12px; }
.fuel.on { border-color:#990521; color:#990521; background:#fdf1f2; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#990521; color:#fff; border:none; border-radius:2px; padding:13px 18px;
font-size:14px; font-weight:700; }
.btn-outline { border:1.5px solid #212934; color:#212934; background:#fff; border-radius:2px; padding:11.5px 16px;
font-size:12.5px; font-weight:700; white-space:nowrap; }
.meta { font-size:11px; color:#777777; }
</style></head>
<body>
<nav>
<div class="brand">Alfa Forni</div>
<div class="navlinks"><span>Wood Ovens</span><span>Gas Ovens</span><span>Accessories</span><span>Recipes</span></div>
<div class="cart">Cart (0)</div>
</nav>
<main>
<div class="gallery">
<span class="badge-heritage">Made in Italy</span>
<div class="oven"></div><div class="flame"></div>
</div>
<div class="info">
<span class="cat">Wood-Fired Oven</span>
<h1>Alfa Forni Classico 2 Pizze Oven</h1>
<div class="stars">★★★★★ <span class="n">4.9 · 420 reviews</span></div>
<div class="price-row"><span class="price">$2,499.00</span></div>
<p class="desc">Handcrafted refractory-brick oven reaching 900°F in 15 minutes — bake two Neapolitan pizzas at once.</p>
<div class="fuel-row">
<span class="fuel on">Wood</span>
<span class="fuel">Gas + Wood</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">Book a Demo</button>
</div>
<span class="meta">Free curbside delivery in the US</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #8c8c8c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #27c3f2; color: #000000;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #000000;
border: 1px solid #27c3f2; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #231f20;
border: 1px solid #c8c7c7; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #27c3f2; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#231f20; box-sizing:border-box;
font-family:Roboto, 'Segoe UI', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 26px;
border-bottom:1px solid #dedede; }
.brand { font-size:19px; font-weight:700; margin:0; color:#0c97c1; }
.searchbox { flex:1; max-width:300px; border:1px solid #dedede; border-radius:4px; height:32px; margin:0 20px;
display:flex; align-items:center; padding:0 10px; font-size:12px; color:#8c8c8c; font-family:'Consolas',monospace; }
.cart { background:#27c3f2; color:#fff; font-size:12px; font-weight:600; border-radius:4px; padding:8px 14px; }
main { display:flex; height:584px; }
.stage { width:310px; background:#c6e8f9; display:flex; align-items:center; justify-content:center; }
.fridge { width:120px; height:190px; background:linear-gradient(180deg,#fff,#eef8fd); border:2px solid #27c3f2; border-radius:8px; position:relative; }
.fridge::before { content:''; position:absolute; top:60px; left:0; right:0; height:2px; background:#27c3f2; }
.handle { position:absolute; right:8px; top:14px; width:5px; height:36px; background:#231f20; border-radius:3px; }
.handle2 { position:absolute; right:8px; top:76px; width:5px; height:96px; background:#231f20; border-radius:3px; }
.info { flex:1; padding:26px 32px; display:flex; flex-direction:column; gap:10px; }
.badges { display:flex; gap:8px; }
.badge { font-size:11px; font-weight:700; padding:3px 9px; border-radius:4px; color:#fff; }
.b-energy { background:#008a00; } .b-promo { background:linear-gradient(90deg,#f58720,#e16f27); }
h1 { font-size:22px; font-weight:700; margin:0; }
.sub { font-size:13px; color:#4a4a4a; margin:0; max-width:420px; line-height:1.5; }
.specs-grid { display:flex; gap:20px; font-size:11px; color:#8c8c8c; margin-top:2px; }
.specs-grid b { display:block; color:#231f20; font-size:14px; font-weight:700; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:6px; }
.price { font-size:24px; font-weight:700; color:#231f20; }
.actions { display:flex; gap:10px; }
.btn-primary { background:#27c3f2; color:#fff; border-radius:4px; height:44px; padding:0 24px; display:flex;
align-items:center; font-weight:700; font-size:13px; }
.btn-secondary { background:#fff; border:1px solid #dedede; color:#231f20; border-radius:4px; height:44px;
padding:0 18px; display:flex; align-items:center; font-size:12px; }
.rating { font-size:13px; color:#f48120; }
.rating span { color:#8c8c8c; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Avanti</p>
<div class="searchbox">Search model number…</div>
<span class="cart">Cart (0)</span>
</nav>
<main>
<div class="stage"><div class="fridge"><div class="handle"></div><div class="handle2"></div></div></div>
<div class="info">
<div class="badges"><span class="badge b-energy">Energy Star</span><span class="badge b-promo">Save $40</span></div>
<h1>Avanti 4.4 Cu. Ft. Compact Refrigerator</h1>
<p class="sub">Reversible door, adjustable glass shelves, and a separate freezer compartment — built for dorms, offices, and small spaces.</p>
<div class="specs-grid">
<div><b>4.4 ft³</b>Capacity</div>
<div><b>36 dB</b>Noise Level</div>
<div><b>2yr</b>Warranty</div>
</div>
<div class="rating">★★★★☆ <span>4.2 (866 reviews)</span></div>
<div class="price-row"><span class="price">$219.99</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">View Specs</div>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0088ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0088ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0050ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0088ff; color: #000000;
border: 1px solid #0050ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0088ff; color: #f5f5f5;
border: 1px solid #2799fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #007fff; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background: radial-gradient(circle at 50% 40%, #0088FF 0%, #0050FF 32%, #08090E 100%);
color:#FFFFFF; box-sizing:border-box;
font-family:"Montserrat", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:26px 40px; }
.ic { width:26px; height:26px; border-radius:6px; background:rgba(255,255,255,.85); }
.stage { display:flex; flex-direction:column; align-items:center; justify-content:center; height:420px; position:relative; }
.ring { position:absolute; border:2px solid rgba(255,255,255,.22); border-radius:50%; }
.r1 { width:200px; height:200px; }
.r2 { width:250px; height:250px; opacity:.5; }
.btn { width:150px; height:150px; border-radius:50%;
background: radial-gradient(circle at 38% 32%, #FFFFFF 0%, #E8F0FF 60%, #CFE0FF 100%);
box-shadow: rgba(0,80,255,0.45) 0 16px 48px;
display:flex; align-items:center; justify-content:center; }
.btn .glyph { font-size:56px; color:#0088FF; font-weight:800; }
.prompt { margin-top:26px; font-size:18px; font-weight:700; letter-spacing:.2px; }
.result { position:absolute; right:44px; bottom:44px; width:340px; background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.14); border-radius:20px; padding:18px; display:flex; gap:14px; align-items:center; }
.art { width:78px; height:78px; border-radius:12px; background:linear-gradient(135deg,#ffb199,#ff0844); flex-shrink:0; }
.r-title { font-size:18px; font-weight:700; }
.r-artist { font-size:13px; font-weight:500; color:#B8C4FF; margin-top:2px; }
.pill { margin-top:10px; display:inline-flex; align-items:center; gap:6px; background:#fff; color:#08090E;
font-size:12px; font-weight:700; padding:8px 14px; border-radius:500px; letter-spacing:.3px; }
.sheet { position:absolute; left:0; right:0; bottom:0; height:150px; background:rgba(255,255,255,0.14);
border-radius:24px 24px 0 0; padding:16px 40px; }
.handle { width:36px; height:4px; background:rgba(255,255,255,.4); border-radius:2px; margin:0 auto 14px; }
.sh-title { font-size:15px; font-weight:700; margin-bottom:10px; }
.row { display:flex; align-items:center; gap:12px; padding:6px 0; }
.row .art2 { width:38px; height:38px; border-radius:8px; }
.row .t { font-size:13px; font-weight:700; }
.row .a { font-size:11px; color:#B8C4FF; }
.row .time { margin-left:auto; font-size:11px; color:#B8C4FF; }
</style></head>
<body>
<div class="topbar"><div class="ic"></div><div style="font-size:16px;font-weight:700;">Shazam (iOS)</div><div class="ic"></div></div>
<div class="stage">
<div class="ring r2"></div><div class="ring r1"></div>
<div class="btn"><div class="glyph">S</div></div>
<div class="prompt">Listening for music…</div>
</div>
<div class="result">
<div class="art"></div>
<div>
<div class="r-title">Golden Hour</div>
<div class="r-artist">JVKE</div>
<div class="pill">♫ Open in Apple Music</div>
</div>
</div>
<div class="sheet">
<div class="handle"></div>
<div class="sh-title">Your Shazams</div>
<div class="row"><div class="art2" style="background:linear-gradient(135deg,#a8edea,#fed6e3);"></div><div><div class="t">Flowers</div><div class="a">Miley Cyrus</div></div><div class="time">2h ago</div></div>
<div class="row"><div class="art2" style="background:linear-gradient(135deg,#f6d365,#fda085);"></div><div><div class="t">Anti-Hero</div><div class="a">Taylor Swift</div></div><div class="time">Yesterday</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e60f3d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e60f3d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ee8ea2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d30030; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e60f3d; color: #ffffff;
border: 1px solid #d30030; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e60f3d; color: #f5f5f5;
border: 1px solid #e8345a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ee8ea2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e30d3b; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#191919; box-sizing:border-box;
font-family:"Shorai Sans StdN Demi", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-size:18px; font-weight:400; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#191919; }
.navlinks .on { color:#f72a48; }
.cta { background:#e60f3d; color:#fff; border-radius:9999px; padding:9px 18px; font-size:14px; }
.hero { padding:14px 30px 20px; }
.hero h1 { font-size:32px; font-weight:400; line-height:1.4; letter-spacing:0.96px; margin:0 0 12px; max-width:620px; }
.hero p { font-size:14px; color:#282828; margin:0 0 16px; max-width:560px; line-height:1.5; }
.row { display:flex; gap:10px; }
.pill-d { background:#e60f3d; color:#fff; border-radius:9999px; padding:10px 18px; font-size:16px; }
.pill-t { background:#ffe8e8; color:#d30030; border-radius:9999px; padding:10px 18px; font-size:16px; }
.band { background:#f5f5f5; padding:20px 30px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#ffffff; border-radius:10px; padding:20px; }
.card h3 { font-size:16px; font-weight:400; margin:0 0 8px; }
.card p { font-size:12.5px; color:#282828; margin:0; line-height:1.5; }
.card .num { font-size:24px; color:#f72a48; margin-bottom:6px; }
.band2 { padding:16px 30px 0; display:flex; gap:16px; }
.panel { flex:1; background:#ededed; border-radius:12px; padding:20px; }
.panel h4 { font-size:14px; margin:0 0 6px; }
.panel span { font-size:12px; color:#6f6f6f; }
footer { position:absolute; bottom:0; width:960px; background:#cbcbcb; padding:12px 30px; font-size:11.5px;
display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<p class="brand">SPEEDA (Uzabase)</p>
<div class="navlinks"><span>Browse by Topic</span><span class="on">Solutions</span><span>Case Studies</span><span>Resources/News</span></div>
<span class="cta">Download Brochure</span>
</nav>
<section class="hero">
<h1>Access every kind of economic data with the Speeda AI Agent</h1>
<p>For teams who don't want to spend hours on market research. Trustworthy, well-sourced data ready to use in your reports.</p>
<div class="row"><span class="pill-d">Download Brochure</span><span class="pill-t">Free Trial</span></div>
</section>
<section class="band">
<div class="card"><div class="num">Accuracy</div><h3>Calculate market size for any industry, fast</h3><p>Get a sense of scale in minutes from trustworthy primary sources.</p></div>
<div class="card"><div class="num">Depth</div><h3>Manage company and industry data in one place</h3><p>All the research data you need, consolidated in one workbench.</p></div>
<div class="card"><div class="num">Speed</div><h3>Automatic summaries powered by AI agents</h3><p>Extract the key points from massive reports in an instant.</p></div>
</section>
<section class="band2">
<div class="panel"><h4>Company Database</h4><span>Financial and industry data on 500,000+ companies</span></div>
<div class="panel"><h4>Industry Reports</h4><span>Continuously updated by our analysts</span></div>
</section>
<footer>
<span>SPEEDA (Uzabase), the economic data platform</span>
<span>Download Brochure · Free Trial</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #d1ccc6; color: #26211a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #d1ccc6; color: #26211a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 500; line-height: 1.4; letter-spacing: 0.2px; margin: 0; color: #26211a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0.1px; margin: 0; color: #6e91bd; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #453b33; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #d1ccc6; color: #453b33;
border: 1px solid #453b33; border-radius: 0px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: 0.1px; background: #ffffff; color: #453b33;
border: 1px solid #a6a19b; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e91bd; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.2px; background: #debd5c; color: #26211a;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#d1ccc6; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#453b33;
}
*{box-sizing:border-box;}
.nav{height:64px; background:#d1ccc6; display:flex; align-items:center; padding:0 30px;}
.logo{font-size:21px; font-weight:300; letter-spacing:2px; text-transform:uppercase; color:#453b33;}
.navlinks{display:flex; gap:22px; margin-left:36px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:#5c5045;}
.searchpill{margin-left:auto; background:#fff; border-radius:999px; padding:8px 18px; font-size:11px; color:#8a7d6e;}
.hero{display:flex; align-items:center; gap:32px; padding:24px 30px;}
.heroText{flex:1;}
.heroText h1{font-size:32px; font-weight:300; line-height:1.25; margin:0 0 12px; max-width:400px; color:#26211a;}
.heroText p{font-size:14px; color:#5c5045; line-height:1.5; max-width:380px; margin:0 0 16px;}
.heroBtn{display:inline-block; background:#453b33; color:#fff; padding:12px 28px; font-size:12px; text-transform:uppercase; letter-spacing:.5px;}
.heroImg{width:230px; height:170px; border-radius:20px; background:radial-gradient(circle at 40% 35%,#dc6650,#453b33 80%); flex-shrink:0;}
.section{padding:14px 30px 0;}
.sectitle{font-size:19px; font-weight:300; margin:0 0 12px; color:#26211a; text-transform:uppercase; letter-spacing:1px;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.card{background:#fff; border-radius:20px; padding:10px; text-align:center; box-shadow:0 3px 8px rgba(0,0,0,.08);}
.thumb{height:76px; border-radius:16px; margin-bottom:8px; position:relative;}
.t1{background:radial-gradient(circle at 40% 35%,#dc6650,#8a3f2f);}
.t2{background:radial-gradient(circle at 40% 35%,#debd5c,#8a6f1f);}
.t3{background:radial-gradient(circle at 40% 35%,#6e91bd,#3a5a80);}
.t4{background:radial-gradient(circle at 40% 35%,#453b33,#26211a);}
.badge{position:absolute; top:5px; right:5px; background:#debd5c; color:#3a2f10; font-size:8px; font-weight:700; padding:3px 8px; border-radius:999px;}
.pname{font-size:12px; font-weight:500; margin-bottom:3px;}
.pprice{font-size:12px; color:#453b33; font-weight:500;}
.footer{position:absolute; bottom:0; left:0; right:0; background:#121212; color:#c9c2b6; font-size:10px; text-align:center; padding:8px 0;}
</style>
<div class="nav">
<div class="logo">Heath Ceramics</div>
<div class="navlinks"><span>Dinnerware</span><span>Tile</span><span>Kitchen</span><span>Studio</span></div>
<div class="searchpill">Search</div>
</div>
<div class="hero">
<div class="heroText">
<h1>Thrown Clay, the Kiln's Precision</h1>
<p>Handmade ceramic dinnerware and tile — tactile, honest, unpretentious craft made in Sausalito since 1948.</p>
<div class="heroBtn">Shop Dinnerware</div>
</div>
<div class="heroImg"></div>
</div>
<div class="section">
<div class="sectitle">Studio Favorites</div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="badge">Limited</span></div><div class="pname">Coupe Dinner Plate</div><div class="pprice">$48</div></div>
<div class="card"><div class="thumb t2"></div><div class="pname">Rim Serving Bowl</div><div class="pprice">$62</div></div>
<div class="card"><div class="thumb t3"></div><div class="pname">Field Mug, Slate</div><div class="pprice">$24</div></div>
<div class="card"><div class="thumb t4"></div><div class="pname">Studio Tile Trivet</div><div class="pprice">$36</div></div>
</div>
</div>
<div class="footer">© Heath Ceramics — Handmade Pottery, Sausalito CA</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f2ed; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f2ed; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #4a5d4e; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f5f2ed; color: #1a1a1a;
border: 1px solid #4a5d4e; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2c2c2c;
border: 1px solid #bebcb8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #c0392b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f2ed; color:#2c2c2c; box-sizing:border-box;
font-family:'Inter',-apple-system,'Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#f5f2ed; border-bottom:1px solid #d4d0c8; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-family:'Playfair Display',Georgia,serif; color:#1a1a1a; font-size:22px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:24px; align-items:center; }
.navlinks span { font-size:12px; color:#6b6b6b; font-weight:600; letter-spacing:0.03em; }
.searchpill { background:#ffffff; border:1px solid #d4d0c8; border-radius:999px; padding:8px 18px; font-size:11px; color:#9a9a9a; }
.hero { height:230px; display:flex; align-items:center; padding:0 40px; gap:40px; }
.hero .txt { max-width:400px; }
.hero .txt .eyebrow { font-size:11px; letter-spacing:0.12em; color:#b8860b; font-weight:600; margin-bottom:10px; text-transform:uppercase; }
.hero h1 { font-family:'Playfair Display',Georgia,serif; font-size:32px; font-weight:700; margin:0 0 12px; color:#1a1a1a; line-height:1.2; }
.hero p { font-size:13px; color:#6b6b6b; margin:0 0 18px; line-height:1.6; }
.hero .cta { display:inline-block; background:#4a5d4e; color:#fff; font-size:13px; font-weight:600; padding:11px 26px; border-radius:4px; }
.shelf { display:flex; gap:10px; align-items:flex-end; }
.book { width:64px; border-radius:2px 6px 6px 2px; box-shadow:2px 2px 8px rgba(0,0,0,0.12); position:relative; }
.book::before { content:''; position:absolute; left:4px; top:0; bottom:0; width:2px; background:rgba(255,255,255,0.3); }
.b1 { height:170px; background:#4a5d4e; } .b2 { height:190px; background:#8b4513; } .b3 { height:150px; background:#1a1a1a; }
.b4 { height:180px; background:#b8860b; }
.section-label { padding:14px 40px 8px; font-family:'Playfair Display',Georgia,serif; font-size:16px; font-weight:700; color:#1a1a1a; }
.grid { display:flex; gap:16px; padding:0 40px; }
.card { flex:1; background:#ffffff; border:1px solid #e3dfd7; border-radius:4px; padding:12px; }
.card .cover { height:104px; border-radius:2px; margin-bottom:10px; position:relative; }
.c1 { background:linear-gradient(160deg,#4a5d4e,#2c3d2f); }
.c2 { background:linear-gradient(160deg,#8b4513,#5c2e0d); }
.c3 { background:linear-gradient(160deg,#1a1a1a,#3a3a3a); }
.c4 { background:linear-gradient(160deg,#b8860b,#8a6408); }
.card .cover::after { content:''; position:absolute; inset:14px; border:1px solid rgba(255,255,255,0.25); }
.card .new { position:absolute; top:20px; right:20px; background:#c0392b; color:#fff; font-size:8px; font-weight:700; padding:3px 7px; border-radius:2px; }
.card h3 { font-family:'Playfair Display',Georgia,serif; font-size:13px; font-weight:600; margin:0 0 3px; color:#1a1a1a; }
.card p { font-size:10px; color:#9a9a9a; margin:0 0 8px; font-style:italic; }
.card .price { font-size:13px; font-weight:600; color:#4a5d4e; }
footer { height:60px; margin-top:14px; border-top:1px solid #d4d0c8; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
footer span { font-size:10px; color:#6b6b6b; letter-spacing:0.04em; }
</style></head>
<body>
<nav>
<p class="brand">First Edition Rare Books</p>
<div class="navlinks"><span>First Editions</span><span>Signed Copies</span><span>Provenance</span><div class="searchpill">🔍 Search the catalogue</div></div>
</nav>
<div class="hero">
<div class="txt">
<div class="eyebrow">Curated Since 1978</div>
<h1>A private collection,<br>open to you.</h1>
<p>Each volume is catalogued with full provenance — condition, edition, and binding notes, as befits an object worth keeping.</p>
<span class="cta">Browse the Catalogue</span>
</div>
<div class="shelf"><div class="book b1"></div><div class="book b2"></div><div class="book b3"></div><div class="book b4"></div></div>
</div>
<div class="section-label">Recently Catalogued</div>
<div class="grid">
<div class="card"><div class="cover c1"></div><h3>The Quiet Meridian</h3><p>First Edition, 1932</p><div class="price">$1,850</div></div>
<div class="card"><div class="cover c2"><span class="new">NEW</span></div><h3>Letters from Avalon</h3><p>Signed, 1958</p><div class="price">$920</div></div>
<div class="card"><div class="cover c3"></div><h3>A History of Tides</h3><p>First Edition, 1901</p><div class="price">$3,400</div></div>
<div class="card"><div class="cover c4"></div><h3>The Cartographer's Rest</h3><p>Limited, 1947</p><div class="price">$1,275</div></div>
</div>
<footer>
<span>CONDITION GRADING GUIDE</span><span>APPRAISALS & CONSIGNMENT</span><span>WHITE-GLOVE SHIPPING</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7e55be; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7e55be; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bfaddc; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #33ccff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7e55be; color: #33ccff;
border: 1px solid #33ccff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7e55be; color: #f5f5f5;
border: 1px solid #916fc7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bfaddc; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7268c8; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFCF2; color:#1A1A1A; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { position:relative; }
/* ---- map cartography ---- */
.map { position:absolute; inset:0; overflow:hidden; }
.water { position:absolute; width:520px; height:420px; background:#9BDEEF; border-radius:48% 52% 40% 60%/55% 45% 60% 40%; left:-160px; top:230px; }
.park { position:absolute; width:360px; height:300px; background:#C5E89B; border-radius:40% 60% 55% 45%/45% 55% 45% 55%; right:-90px; top:-60px; }
.park2 { position:absolute; width:220px; height:180px; background:#C5E89B; border-radius:50%; right:120px; bottom:-60px; }
.building { position:absolute; background:#E8E2D1; border-radius:3px; }
.road { position:absolute; background:#FFFFFF; box-shadow:0 0 0 1px rgba(0,0,0,0.03); }
.road.minor { background:#F5F0E5; }
.road.hwy { background:#FFD970; }
.label { position:absolute; font-size:11px; color:#3D3D3D; font-weight:600; opacity:.75; }
/* ---- route polyline (purple, ant-trail) ---- */
.route { position:absolute; height:6px; background:#7E55BE; border-radius:3px; }
.chevrons { position:absolute; display:flex; align-items:center; gap:14px; }
.chevrons i { width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:7px solid rgba(255,255,255,0.9); }
/* ---- puck + wazer ---- */
.puck-wrap { position:absolute; }
.ring { position:absolute; width:60px; height:60px; border-radius:50%; border:2px solid rgba(51,204,255,0.35); left:50%; top:50%; transform:translate(-50%,-50%); }
.puck { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(35deg); width:0; height:0;
border-left:16px solid transparent; border-right:16px solid transparent; border-bottom:34px solid #33CCFF;
filter:drop-shadow(0 3px 4px rgba(0,0,0,0.3)); }
.puck::after { content:''; position:absolute; left:-13px; top:6px; width:26px; height:26px; border:3px solid #fff; border-radius:50%; opacity:0; }
.wazer { position:absolute; width:24px; height:24px; border-radius:50%; background:#F9C42E; border:2px solid #fff;
display:flex; align-items:center; justify-content:center; font-size:13px; box-shadow:0 2px 6px rgba(0,0,0,0.25); }
/* ---- hazard speech bubbles ---- */
.bubble { position:absolute; border-radius:14px; padding:7px 12px 8px; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,0.22); }
.bubble::after { content:''; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); width:0; height:0;
border-left:7px solid transparent; border-right:7px solid transparent; }
.bubble .t { font-size:13px; font-weight:700; display:flex; align-items:center; gap:5px; }
.bubble .ti { font-size:10px; opacity:.8; margin-top:1px; }
.bubble.police { background:#EF6A65; } .bubble.police::after { border-top:7px solid #EF6A65; }
.bubble.traffic { background:#F69833; } .bubble.traffic::after { border-top:7px solid #F69833; }
.glyph { width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,0.9); display:inline-block; }
/* ---- next-turn card ---- */
.nextturn { position:absolute; top:0; left:0; right:0; height:100px; background:#7E55BE; border-radius:0 0 16px 16px;
display:flex; align-items:center; padding:0 20px; gap:16px; box-shadow:0 6px 18px rgba(126,85,190,0.25); }
.arrow { width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,0.14); flex:none; position:relative; }
.arrow i { position:absolute; left:50%; top:50%; transform:translate(-50%,-58%) rotate(-45deg); width:0;height:0;
border-left:11px solid transparent; border-right:11px solid transparent; border-bottom:20px solid #fff; }
.nt-text .dist { color:#fff; font-family:'SF Mono',monospace; font-size:26px; font-weight:700; letter-spacing:0; }
.nt-text .street { color:#fff; font-size:21px; font-weight:800; letter-spacing:-0.3px; margin-top:1px; }
.nt-text .sub { color:rgba(255,255,255,0.8); font-size:13px; margin-top:2px; }
.nt-exit { margin-left:auto; color:#fff; font-size:22px; opacity:.85; }
/* ---- speed tile ---- */
.speedtile { position:absolute; left:20px; bottom:96px; width:80px; height:80px; background:#fff; border-radius:12px;
box-shadow:0 4px 8px rgba(0,0,0,0.12); text-align:center; padding:6px 0; }
.speedtile .lbl { font-size:8px; font-weight:700; letter-spacing:.4px; color:#1A1A1A; }
.speedtile .lim { width:38px; height:38px; border-radius:50%; border:2.5px solid #1A1A1A; margin:2px auto 2px; display:flex; align-items:center; justify-content:center; font-family:'SF Mono',monospace; font-weight:900; font-size:19px; }
.speedtile .cur { font-family:'SF Mono',monospace; font-weight:700; font-size:20px; color:#EF6A65; line-height:1; }
.speedtile .mph { font-size:9px; color:#6B6B6B; }
/* ---- ETA bar ---- */
.etabar { position:absolute; left:0; right:0; bottom:0; height:80px; background:#FFFFFF; box-shadow:0 -2px 10px rgba(0,0,0,0.08);
display:flex; align-items:center; padding:0 20px; gap:18px; }
.eta-time { font-family:'SF Mono',monospace; font-weight:700; font-size:23px; color:#1A1A1A; }
.eta-sub { font-family:'SF Mono',monospace; font-weight:500; font-size:13px; color:#6B6B6B; }
.alt-pill { margin-left:auto; background:#75C73E; color:#fff; font-weight:700; font-size:12px; padding:8px 16px; border-radius:16px; }
.end-pill { border:1.5px solid #EF6A65; color:#EF6A65; background:#fff; font-weight:700; font-size:14px; padding:8px 18px; border-radius:16px; }
/* ---- FAB ---- */
.fab { position:absolute; right:20px; bottom:96px; width:56px; height:56px; border-radius:50%; background:#7E55BE;
box-shadow:0 6px 16px rgba(126,85,190,0.4); display:flex; align-items:center; justify-content:center; }
.fab .bang { color:#fff; font-size:26px; font-weight:900; }
.beacon { position:absolute; top:116px; left:50%; transform:translateX(-50%); background:#7E55BE; color:#fff; height:38px;
border-radius:19px; display:flex; align-items:center; padding:0 16px; gap:8px; font-size:12px; font-weight:600;
box-shadow:0 4px 10px rgba(126,85,190,0.3); }
.beacon .avs { display:flex; }
.beacon .avs i { width:20px; height:20px; border-radius:50%; border:2px solid #7E55BE; background:#ffd970; margin-left:-8px; }
</style></head>
<body>
<div class="map">
<div class="water"></div>
<div class="park"></div>
<div class="park2"></div>
<div class="building" style="width:44px;height:34px;left:600px;top:220px;"></div>
<div class="building" style="width:30px;height:60px;left:660px;top:180px;"></div>
<div class="building" style="width:50px;height:28px;left:520px;top:410px;"></div>
<div class="building" style="width:26px;height:26px;left:200px;top:150px;"></div>
<div class="road hwy" style="width:960px;height:22px;left:0;top:330px;transform:rotate(-8deg);"></div>
<div class="road" style="width:900px;height:14px;left:-40px;top:150px;transform:rotate(4deg);"></div>
<div class="road minor" style="width:700px;height:9px;left:120px;top:460px;transform:rotate(-3deg);"></div>
<div class="road" style="width:14px;height:640px;left:640px;top:0;transform:rotate(6deg);"></div>
<div class="road minor" style="width:9px;height:500px;left:340px;top:60px;transform:rotate(-5deg);"></div>
<span class="label" style="left:700px;top:145px;">Market St</span>
<span class="label" style="left:120px;top:340px;">I-80 W</span>
<span class="label" style="left:860px;top:170px;font-weight:800;color:#7E55BE;">Waze (iOS)</span>
<div class="route" style="width:340px; left:280px; top:296px; transform:rotate(-8deg);"></div>
<div class="route" style="width:6px; height:190px; left:600px; top:130px;"></div>
<div class="chevrons" style="left:330px; top:293px;"><i></i><i></i><i></i></div>
<div class="bubble police" style="left:430px; top:210px;"><div class="t"><span class="glyph"></span>Police</div><div class="ti">5 min ago</div></div>
<div class="bubble traffic" style="left:630px; top:340px;"><div class="t"><span class="glyph"></span>Traffic</div><div class="ti">2 min ago</div></div>
<div class="puck-wrap" style="left:610px; top:410px;">
<div class="ring"></div>
<div class="puck"></div>
<div class="wazer" style="left:22px; top:-14px;">😀</div>
</div>
</div>
<div class="nextturn">
<div class="arrow"><i></i></div>
<div class="nt-text">
<div class="dist">0.4 mi</div>
<div class="street">Market Street</div>
<div class="sub">then turn left in 0.6 mi</div>
</div>
<div class="nt-exit">☰</div>
</div>
<div class="beacon"><div class="avs"><i></i><i></i><i></i></div>Share your ETA with Beacon</div>
<div class="speedtile">
<div class="lbl">SPEED LIMIT</div>
<div class="lim">35</div>
<div class="cur">42</div>
<div class="mph">mph</div>
</div>
<div class="fab"><span class="bang">!</span></div>
<div class="etabar">
<div>
<div class="eta-time">12 min</div>
<div class="eta-sub">5.2 mi · 6:14 PM</div>
</div>
<div class="alt-pill">Save 3 min</div>
<div class="end-pill">End</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #101010; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #101010; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #78766f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ecb320; color: #111111;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: transparent; color: #f5f5f5;
border: 1px solid #ecb320; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1f1f1f; color: #f5f5f5;
border: 1px solid #494949; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #78766f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.4px; background: #2f2712; color: #ecb320;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Ducky Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:'Inter','Ubuntu',system-ui,sans-serif;
background:#101010; color:#f5f5f5;
}
*{box-sizing:border-box;}
.announcement{height:26px;background:#ecb320;color:#111111;font-family:Montserrat,sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;display:flex;align-items:center;justify-content:center;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #343434;}
.logo{font-family:Montserrat,sans-serif;font-size:18px;font-weight:800;}
.logo span{color:#ecb320;}
.navlinks{display:flex;gap:20px;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;letter-spacing:0.3px;color:#c7c7c7;}
.hero{height:190px;display:flex;align-items:center;padding:0 32px;background:linear-gradient(100deg,#101010,#1a1a1a);}
.hero h1{font-family:Montserrat,sans-serif;font-size:40px;font-weight:800;letter-spacing:-0.5px;line-height:1.1;margin:0 0 14px;max-width:480px;}
.herobtn{background:#ecb320;color:#111111;font-family:Montserrat,sans-serif;font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:14px 28px;border-radius:4px;display:inline-block;}
.section{padding:16px 32px 0;}
.grid{display:flex;gap:14px;}
.card{flex:1;background:#1f1f1f;border:1px solid #343434;border-radius:8px;padding:14px;}
.card-img{height:100px;border-radius:4px;margin-bottom:10px;position:relative;background:#2b2b2b;}
.card-img.c1{background:linear-gradient(135deg,#c72d00,#1f1f1f);}
.card-img.c2{background:linear-gradient(135deg,#31862d,#1f1f1f);}
.card-img.c3{background:linear-gradient(135deg,#07ccd7,#1f1f1f);}
.card-img.c4{background:linear-gradient(135deg,#ecb320,#1f1f1f);}
.switchbadge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;padding:4px 10px;border-radius:9999px;margin-bottom:8px;}
.switchbadge.red{background:#c72d00;color:#fff;}
.switchbadge.green{background:#31862d;color:#fff;}
.switchbadge.cyan{background:#07ccd7;color:#101010;}
.card-title{font-family:Montserrat,sans-serif;font-size:18px;font-weight:600;margin-bottom:6px;}
.card-price{font-family:Montserrat,sans-serif;font-size:22px;font-weight:700;color:#ecb320;}
</style>
<div class="announcement">Free shipping on orders over $99</div>
<nav class="nav">
<div class="logo">Ducky</div>
<div class="navlinks">
<span>Keyboards</span><span>Switches</span><span>Keycaps</span><span>Accessories</span>
</div>
</nav>
<div class="hero">
<div>
<h1>Precision hardware.<br>Color-coded by feel.</h1>
<div class="herobtn">Shop Keyboards</div>
</div>
</div>
<div class="section">
<div class="grid">
<div class="card"><div class="card-img c1"></div><span class="switchbadge red">Linear</span><div class="card-title">One 3 SF</div><div class="card-price">$139</div></div>
<div class="card"><div class="card-img c2"></div><span class="switchbadge green">Clicky</span><div class="card-title">One 2 TKL</div><div class="card-price">$119</div></div>
<div class="card"><div class="card-img c3"></div><span class="switchbadge cyan">Bump</span><div class="card-title">One 3 Mini</div><div class="card-price">$99</div></div>
<div class="card"><div class="card-img c4"></div><span class="switchbadge red">Linear</span><div class="card-title">One 3 Pro</div><div class="card-price">$159</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e5fe54; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e5fe54; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #707c2f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d4ed3f; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e5fe54; color: #000000;
border: 1px solid #d4ed3f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e5fe54; color: #111111;
border: 1px solid #c3d849; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707c2f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e2fb51; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f5; color:#1c1b17; box-sizing:border-box; font-family:"Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-weight:700; font-size:17px; }
.navlinks { display:flex; gap:18px; font-size:14px; }
.btn-lime { background:#e5fe54; color:#1c1b17; border:none; border-radius:8px; padding:10px 20px; font-size:14px; font-weight:500; }
.hero { padding:26px 30px 16px; }
.hero h1 { font-family:Georgia,serif; font-size:44px; font-weight:400; margin:0 0 14px; line-height:1.1; letter-spacing:-0.5px; max-width:600px; }
.savings { margin:0 30px 18px; background:#f4fcc9; border:1px solid #e5fe54; border-radius:12px; padding:24px; display:flex; align-items:center; justify-content:space-between; }
.overline { font-size:11px; font-weight:600; letter-spacing:0.08em; color:#56554f; text-transform:uppercase; margin:0 0 4px; }
.amount { font-size:44px; font-weight:500; margin:0; }
.row { display:flex; gap:14px; padding:0 30px 20px; }
.card { flex:1; background:#fff; border:1px solid #e3e1da; border-radius:12px; padding:18px; }
.card h3 { font-size:16px; margin:0 0 6px; }
.card p { font-size:12.5px; color:#56554f; margin:0; }
.dark { background:#1c1b17; color:#fff; }
.dark p { color:rgba(255,255,255,0.7); }
.dark a { color:#e5fe54; font-size:12.5px; }
</style></head>
<body>
<nav>
<div class="brand">Ramp</div>
<div class="navlinks"><span>Product</span><span>Customers</span><span>Pricing</span></div>
<button class="btn-lime">Get a demo</button>
</nav>
<div class="hero">
<h1>Save more. Close faster.</h1>
</div>
<div class="savings">
<div><p class="overline">Total saved</p><h2 class="amount">$1.2M</h2></div>
<button class="btn-lime">Get started</button>
</div>
<div class="row">
<div class="card"><h3>Corporate cards</h3><p>Issue cards instantly with built-in limits and controls.</p></div>
<div class="card dark"><h3>Close books 75% faster</h3><p>Automated receipt matching and reconciliation.</p><a>Learn more →</a></div>
<div class="card"><h3>Ramp Intelligence</h3><p>AI finds savings automatically across every transaction.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #112233;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #112233;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.4; margin: 0; color: #112233; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; background: #bd0000; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; background: #fafafa; color: #112233;
border: 1px solid #bd0000; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #1e1e1e;
border: 1px solid #c0c4c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; background: #bd0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; position:relative; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#112233; color:#1e1e1e; box-sizing:border-box;
font-family:'Georgia','Times New Roman',serif; }
* { box-sizing:border-box; }
nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 30px;
border-bottom:1px solid #272727; background:#112233; }
.brand { font-size:20px; color:#fafafa; letter-spacing:0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-family:Arial,Helvetica,sans-serif; font-size:13px; font-weight:700; color:#aaaaaa; }
.navr { display:flex; align-items:center; gap:14px; }
.search { width:180px; height:26px; border:1px solid #bd0000; border-radius:4px; background:#0e1c2c;
display:flex; align-items:center; padding:0 10px; font-family:Arial,sans-serif; font-size:11px; color:#8a97a6; }
.cart { width:26px; height:26px; border-radius:50%; background:#bd0000; display:flex; align-items:center;
justify-content:center; color:#fff; font-size:12px; font-family:Arial,sans-serif; font-weight:700; }
.hero { padding:26px 30px 18px; display:flex; align-items:center; justify-content:space-between; }
.hero h1 { font-size:28px; font-weight:400; color:#fafafa; margin:0 0 8px; line-height:1.3; max-width:480px; }
.hero p { font-family:Arial,sans-serif; font-size:13px; color:#cccccc; margin:0; max-width:440px; line-height:1.5; }
.badge { background:#bd0000; color:#fff; font-family:Arial,sans-serif; font-size:11px; font-weight:700;
padding:6px 14px; border-radius:4px; display:inline-block; margin-bottom:12px; }
.crate { width:230px; height:150px; border-radius:6px; position:relative; flex-shrink:0;
background:repeating-linear-gradient(100deg,#1a3550 0 26px,#0d2136 26px 52px); border:1px solid #2a4258; }
.crate::after { content:'NEW & PRE-LOVED'; position:absolute; bottom:10px; left:0; right:0; text-align:center;
font-family:Arial,sans-serif; font-size:10px; font-weight:700; letter-spacing:1px; color:#e99292; }
.section { padding:6px 30px 0; }
.section h2 { font-size:18px; font-weight:400; color:#fafafa; margin:0 0 14px; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.card { background:#fafafa; border-radius:6px; padding:10px; box-shadow:0 2px 6px rgba(0,0,0,0.3); }
.cover { height:80px; border-radius:4px; margin-bottom:8px; }
.c1 .cover { background:linear-gradient(135deg,#bd0000,#5a0a0a); }
.c2 .cover { background:linear-gradient(135deg,#3a4f6b,#112233); }
.c3 .cover { background:linear-gradient(135deg,#7a6a4a,#3a3020); }
.c4 .cover { background:linear-gradient(135deg,#4a6b5a,#1e2b23); }
.c5 .cover { background:linear-gradient(135deg,#8a3a5a,#2a1420); }
.card .t { font-size:12px; color:#1e1e1e; line-height:1.3; margin-bottom:2px; }
.card .p { font-family:Arial,sans-serif; font-size:11px; color:#bd0000; font-weight:700; }
footer { position:absolute; bottom:0; left:0; right:0; height:64px; background:#112244;
display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
footer .f1 { font-family:Arial,sans-serif; font-size:11px; color:#e99292; }
footer .f2 { font-family:Arial,sans-serif; font-size:10px; color:#8a97a6; }
</style></head>
<body>
<nav>
<div class="brand">Grimey S New And Pre Loved Music</div>
<div class="navlinks"><span>New Arrivals</span><span>Vinyl</span><span>CDs</span><span>Turntables</span><span>Sell Your Records</span></div>
<div class="navr"><div class="search">Search the crates…</div><div class="cart">3</div></div>
</nav>
<div class="hero">
<div>
<div class="badge">NEW ARRIVALS · TUES</div>
<h1>Crate-dug, hand-priced,<br>never auto-played.</h1>
<p>East Nashville's home for new & pre-loved vinyl, CDs, and turntables since 1999. No sliders. No stock photos. Just records.</p>
</div>
<div class="crate"></div>
</div>
<div class="section">
<h2>Fresh in the crates this week</h2>
<div class="grid">
<div class="card c1"><div class="cover"></div><div class="t">Late Night Sessions</div><div class="p">$18.00</div></div>
<div class="card c2"><div class="cover"></div><div class="t">Blue Room Vol. II</div><div class="p">$22.00</div></div>
<div class="card c3"><div class="cover"></div><div class="t">Dust & Analog</div><div class="p">$14.00</div></div>
<div class="card c4"><div class="cover"></div><div class="t">Green Hour Radio</div><div class="p">$26.00</div></div>
<div class="card c5"><div class="cover"></div><div class="t">Rose & Static</div><div class="p">$19.00</div></div>
</div>
</div>
<footer>
<div class="f1">Sign up for the Tuesday new-arrivals list</div>
<div class="f2">1604 8th Ave S, Nashville TN · Pre-loved since 1999</div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #282828;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #282828;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #282828; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ff0000; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #282828;
border: 1px solid #ff0000; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #bcbcbc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ff6b7a; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#eeeeee; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:72px;background:#fff;border-bottom:1px solid #dddddd;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:800;color:#282828;}
.navlinks{display:flex;gap:20px;font-size:15px;font-weight:600;color:#282828;}
.orb{width:44px;height:44px;border-radius:9999px;background:#ff0000;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;}
.hero{height:200px;display:flex;align-items:center;padding:0 32px;justify-content:space-between;background:#eeeeee;}
.h1{font-size:36px;font-weight:800;letter-spacing:-0.5px;color:#282828;max-width:420px;line-height:1.15;margin:0 0 10px;}
.sub{font-size:14px;color:#313131;max-width:380px;margin-bottom:14px;}
.cabinet{width:130px;height:180px;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,#4721fb,#282828);position:relative;box-shadow:0 8px 20px rgba(0,0,0,0.2);}
.screen{position:absolute;top:16px;left:16px;right:16px;height:70px;background:repeating-linear-gradient(90deg,#34e2e4,#34e2e4 6px,#ff0000 6px,#ff0000 12px);border-radius:4px;}
.slot{position:absolute;bottom:20px;left:16px;right:16px;height:8px;background:#ff0000;border-radius:9999px;}
.grad{display:inline-block;background:linear-gradient(135deg,#ff0000,#d92e3a);color:#fff;font-size:15px;font-weight:600;padding:14px 28px;border-radius:8px;}
.strip{display:flex;gap:8px;padding:14px 32px 0;}
.tab{padding:8px 16px;font-size:13px;color:#888888;}
.tab.on{background:#f5f5f5;border-radius:9999px;color:#282828;}
.grid{display:flex;gap:14px;padding:10px 32px 0;}
.card{width:206px;background:#fff;border-radius:12px;padding:14px;border:1px solid #dddddd;}
.thumb{height:100px;border-radius:8px;margin-bottom:10px;}
.badge{display:inline-block;background:#ff6b7a;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:4px 10px;border-radius:9999px;margin-bottom:8px;}
.ptitle{font-size:16px;font-weight:600;color:#282828;}
.pprice{font-size:16px;font-weight:600;color:#ff0000;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:52px;background:#282828;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#aaaaaa;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Retro Cade</div>
<div class="navlinks"><div>Cabinets</div><div>Configurator</div><div>Parts</div></div>
<div class="orb">⌕</div>
</div>
<div class="hero">
<div>
<div class="h1">Neon marquee, built to order.</div>
<div class="sub">Configure your own arcade cabinet — cyan, indigo, and a full-voltage red marquee.</div>
<div class="grad">Build Your Own</div>
</div>
<div class="cabinet"><div class="screen"></div><div class="slot"></div></div>
</div>
<div class="strip">
<div class="tab on">Cabinets</div><div class="tab">Classic Series</div><div class="tab">Multi-Game</div><div class="tab">Pinball</div>
</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#4721fb,#ff0000)"></div><div class="ptitle">Boardwalk Multi-60</div><div class="pprice">$1,899</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#34e2e4,#282828)"></div><div class="ptitle">Neon Strip Classic</div><div class="pprice">$1,299</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7a00df,#4721fb)"></div><div class="ptitle">Limited Purple Panel</div><div class="pprice">$2,199</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff0000,#34e2e4)"></div><div class="ptitle">Cocktail Table Cab</div><div class="pprice">$1,549</div></div>
</div>
<div class="footer"><span>© Retro Cade — CRT glow, boardwalk voltage</span><span>Configurator · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1c1c1a; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1c1c1a; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #7f6454; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #ff7373; color: #1c1c1a;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: transparent; color: #dcc8b2;
border: 1px solid #ff7373; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #2a2a28; color: #dcc8b2;
border: 1px solid #1c1c1a; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7f6454; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #4e2b3e; color: #dcc8b2;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#1c1c1a; font-family:'GT America','Helvetica Neue',Arial,sans-serif; color:#dcc8b2; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #3a3a38;}
.logo{font-size:20px;font-weight:700;color:#dcc8b2;letter-spacing:1px;text-transform:uppercase;}
.navlinks{display:flex;gap:24px;font-size:15px;font-weight:500;color:#dcc8b2;}
.navlinks .active{color:#ff7373;border-bottom:2px solid #ff7373;padding-bottom:4px;}
.hero{height:250px;display:flex;padding:0 30px;align-items:center;gap:30px;}
.herotext{width:340px;}
.herotext h1{font-size:42px;font-weight:700;line-height:1.08;letter-spacing:-.5px;margin:0 0 12px;color:#dcc8b2;}
.herotext p{font-size:15px;color:#c3b7a7;line-height:1.5;margin:0 0 18px;}
.cta{display:inline-block;background:#ff7373;color:#1c1c1a;font-size:16px;font-weight:600;padding:14px 28px;border-radius:8px;}
.machine{flex:1;height:210px;position:relative;background:radial-gradient(circle at 60% 50%,#4e2b3e 0%,#1c1c1a 70%);border-radius:12px;overflow:hidden;}
.arm{position:absolute;top:30px;left:120px;width:6px;height:140px;background:linear-gradient(#70eadd,#4c6156);border-radius:3px;}
.ring{position:absolute;bottom:24px;right:60px;width:80px;height:80px;border-radius:9999px;border:6px solid #3a3a38;border-top-color:#ff7373;}
.rowlabel{padding:14px 30px 6px;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#7f6454;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:196px;background:#2a2a28;border-radius:12px;padding:14px;}
.thumb{height:88px;border-radius:8px;margin-bottom:10px;position:relative;}
.metric{position:absolute;bottom:8px;right:8px;width:36px;height:36px;border-radius:9999px;border:4px solid #3a3a38;border-top-color:#70eadd;}
.ptitle{font-size:15px;font-weight:500;color:#dcc8b2;margin-bottom:4px;}
.badge{display:inline-block;background:#4e2b3e;color:#dcc8b2;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;border-radius:4px;padding:3px 8px;}
</style>
<div class="nav">
<div class="logo">Tonal</div>
<div class="navlinks"><div class="active">The Machine</div><div>Programs</div><div>Membership</div><div>Community</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Strength has a system.</h1>
<p>Digital weight, real-time coaching, a cockpit built for focused intensity.</p>
<div class="cta">Start Free Trial</div>
</div>
<div class="machine"><div class="arm"></div><div class="ring"></div></div>
</div>
<div class="rowlabel">Featured Programs</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4e2b3e,#1c1c1a)"><div class="metric"></div></div><span class="badge">Trending</span><div class="ptitle">Strength Foundations</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4c6156,#1c1c1a)"><div class="metric"></div></div><span class="badge" style="background:#4c6156">Beginner</span><div class="ptitle">Recovery Flow</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#70eadd,#1c1c1a)"><div class="metric"></div></div><span class="badge" style="background:#fef1c7;color:#1c1c1a">Premium</span><div class="ptitle">Powerlifting Block</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #632ca6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #632ca6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b39bd1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #8000ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #632ca6; color: #ffffff;
border: 1px solid #8000ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #632ca6; color: #f5f5f5;
border: 1px solid #7a4cb3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b39bd1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6825b4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212529; box-sizing:border-box;
font-family:"Helvetica Neue", -apple-system, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:20px; font-size:16px; font-weight:600; color:#555; }
.btn-purple { background:#632ca6; color:#fff; border-radius:4px; padding:12px 20px; font-size:15px; font-weight:700; }
.hero { padding:14px 40px 18px; }
.hero h1 { font-size:40px; font-weight:600; line-height:1.05; margin:0 0 10px; max-width:600px; }
.hero p { font-size:16px; font-weight:300; margin:0 0 14px; max-width:440px; }
.row { display:flex; gap:10px; }
.btn-outline { border:1px solid #632ca6; color:#632ca6; border-radius:4px; padding:11px 20px; font-size:15px; font-weight:700; }
.darkband { background:#000; padding:22px 40px; display:flex; gap:14px; }
.card { flex:1; background:#191919; border-radius:8px; padding:16px; }
.card h3 { color:#fff; font-size:16px; margin:0 0 6px; font-weight:600; }
.card p { color:#c7c7c7; font-size:12px; margin:0; }
.dot { width:8px; height:8px; border-radius:50%; background:#632ca6; display:inline-block; margin-right:6px; }
.footer { background:#110617; padding:16px 40px; color:#c7c7c7; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Datadog</p>
<div class="navlinks"><span>Product</span><span>Customers</span><span>Pricing</span><span>Docs</span></div>
<button class="btn-purple">Get started</button>
</nav>
<section class="hero">
<h1>AI-Powered Observability and Security</h1>
<p>Metrics, traces, and logs from your whole stack — correlated in one place.</p>
<div class="row">
<button class="btn-purple">Free trial</button>
<button class="btn-outline">See the platform</button>
</div>
</section>
<div class="darkband">
<div class="card"><h3><span class="dot"></span>APM</h3><p>Trace requests across every service and language.</p></div>
<div class="card"><h3><span class="dot"></span>Log Management</h3><p>Search and analyze logs at petabyte scale.</p></div>
<div class="card"><h3><span class="dot"></span>Cloud Security</h3><p>Detect threats across infrastructure and code.</p></div>
</div>
<div class="footer">© Datadog · Docs · Status · Careers</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 28.6px; letter-spacing: -0.44px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 24px; letter-spacing: 0; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: -0.14px; background: #820AD1; color: #FFFFFF;
border: none; border-radius: 999px; padding: 0px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: -0.14px; background: transparent; color: #820AD1;
border: 1px solid #820AD1; border-radius: 999px;
padding: 0px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0; background: #FFFFFF; color: #000000;
border: 1px solid #A2A2A2; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #eeddf9; color: #820AD1;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: Inter, arial, helvetica, sans-serif; background: #FFFFFF; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
.page { width: 960px; height: 640px; display: flex; flex-direction: column; }
nav.topnav { height: 56px; flex: 0 0 56px; background: #FFFFFF; border-bottom: 1px solid #E4E4E4; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.wordmark { font-size: 20px; font-weight: 500; color: #820AD1; letter-spacing: -0.3px; margin: 0; }
.navlinks { display: flex; gap: 20px; font-size: 14px; font-weight: 500; color: #000000; }
.toggle { display: flex; background: #F4F4F4; border-radius: 999px; padding: 4px; gap: 2px; }
.toggle span { font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 999px; color: #414140; }
.toggle span.on { background: #FFFFFF; color: #000000; }
.hero { flex: 0 0 208px; position: relative; overflow: hidden; background: linear-gradient(120deg, #4a3226 0%, #8a5a3d 40%, #c99a6b 70%, #e8c9a0 100%); }
.hero::before { content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: rgba(255,255,255,0.10); top: -180px; right: -60px; }
.hero::after { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: rgba(0,0,0,0.14); bottom: -120px; left: 120px; }
.hero-text { position: absolute; left: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.hero-text h1 { margin: 0; font-size: 40px; font-weight: 500; color: #FFFFFF; line-height: 1.05; letter-spacing: -1.2px; }
.hero-cta { align-self: flex-start; background: #820AD1; color: #FFFFFF; border: none; border-radius: 999px; padding: 0 24px; height: 42px; display: flex; align-items: center; font-size: 13px; font-weight: 500; }
.editorial { flex: 0 0 62px; padding: 12px 24px 0; }
.editorial h2 { margin: 0 0 2px; font-size: 26px; font-weight: 500; color: #000000; letter-spacing: -0.6px; }
.editorial p { margin: 0; font-size: 13px; color: #777777; }
.productrow { flex: 0 0 102px; display: flex; gap: 12px; padding: 8px 24px; }
.pcard { flex: 1; background: #FFFFFF; border: 1px solid #E4E4E4; border-radius: 24px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; }
.pcard .dot { width: 22px; height: 22px; border-radius: 50%; background: #820AD1; }
.pcard b { font-size: 13px; font-weight: 500; color: #000000; }
.pcard a { font-size: 11px; font-weight: 500; color: #820AD1; }
.photorow { flex: 0 0 92px; display: flex; gap: 12px; padding: 0 24px; }
.photile { flex: 1; border-radius: 32px; background: #F4F4F4; position: relative; overflow: hidden; }
.photile .grad { position: absolute; inset: 0; }
.photile.g1 .grad { background: linear-gradient(135deg,#e8c9a0,#8a5a3d); }
.photile.g2 .grad { background: linear-gradient(135deg,#d9c8ee,#820AD1); }
.photile.g3 .grad { background: linear-gradient(135deg,#f4d9d9,#c99a6b); }
.photile span.cap { position: absolute; left: 12px; bottom: 8px; color: #FFFFFF; font-size: 11px; font-weight: 500; }
.testrow { flex: 0 0 72px; padding: 8px 24px; }
.testcard { height: 100%; background: #000000; border-radius: 48px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; }
.testcard p { color: #FFFFFF; font-size: 13px; line-height: 1.3; margin: 0; max-width: 620px; }
.testcard span { color: #AA68FF; font-size: 11px; font-weight: 500; white-space: nowrap; }
footer { flex: 1; background: #F4F4F4; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 11px; color: #414140; }
</style>
<div class="page">
<nav class="topnav">
<p class="wordmark">Nubank (Marketing)</p>
<div class="navlinks"><span>Card</span><span>Account</span><span>Investments</span><span>Loans</span></div>
<div class="toggle"><span class="on">Personal</span><span>Business</span><span>For Companies</span></div>
</nav>
<section class="hero">
<div class="hero-text">
<h1>Money that feels like yours</h1>
<button class="hero-cta">Open your account</button>
</div>
</section>
<div class="editorial">
<h2>Everything, in one purple app</h2>
<p>Cards, accounts and investments — one violet, reserved for what you can do.</p>
</div>
<div class="productrow">
<div class="pcard"><span class="dot"></span><b>Nubank</b><a>Learn more</a></div>
<div class="pcard"><span class="dot"></span><b>Ultravioleta</b><a>Learn more</a></div>
<div class="pcard"><span class="dot"></span><b>Nubank+</b><a>Learn more</a></div>
<div class="pcard"><span class="dot"></span><b>Nubank Business</b><a>Learn more</a></div>
</div>
<div class="photorow">
<div class="photile g1"><div class="grad"></div><span class="cap">Everyday moments</span></div>
<div class="photile g2"><div class="grad"></div><span class="cap">Built for growth</span></div>
<div class="photile g3"><div class="grad"></div><span class="cap">Made for you</span></div>
</div>
<div class="testrow">
<div class="testcard">
<p>"Switching felt strange for exactly one day. Then it just felt like mine."</p>
<span>Customer story</span>
</div>
</div>
<footer>
<span>© Nubank (Marketing)</span>
<span>Products · About · Help · Legal terms</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbf7ee; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbf7ee; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.4px; background: #243953; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.4px; background: #ffffff; color: #243953;
border: 1px solid #243953; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c5c2bb; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.27; letter-spacing: 0.1px; background: #970013; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fbf7ee; font-family:'Beatrice','Helvetica Neue',Arial,sans-serif; color:#2f3b45; }
*{box-sizing:border-box;}
.promo{height:34px;background:#243953;display:flex;align-items:center;justify-content:center;color:#fbf7ee;font-size:12px;letter-spacing:.4px;}
.nav{height:64px;background:#243953;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:22px;font-weight:400;letter-spacing:.5px;color:#fbf7ee;}
.navlinks{display:flex;gap:26px;font-size:13px;font-weight:500;letter-spacing:.3px;color:#cbd6de;text-transform:uppercase;}
.hero{display:flex;height:250px;}
.left{width:420px;padding:44px 40px;display:flex;flex-direction:column;justify-content:center;}
.h1{font-size:42px;font-weight:300;line-height:1.2;color:#243953;margin:0 0 16px;}
.sub{font-size:16px;line-height:1.6;color:#5a6a76;max-width:340px;margin:0 0 22px;}
.cta{display:inline-block;background:#243953;color:#fbf7ee;font-size:13px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;padding:14px 30px;}
.right{flex:1;position:relative;background:linear-gradient(120deg,#e8dfc9,#c9d6dd);}
.chair{position:absolute;left:60px;top:40px;width:150px;height:150px;border-radius:50% 50% 20px 20px;background:repeating-linear-gradient(90deg,#c9a06a,#c9a06a 4px,#b8905a 4px,#b8905a 8px);}
.pillow{position:absolute;left:220px;top:80px;width:100px;height:80px;border-radius:12px;background:#243953;opacity:.85;}
.sec{padding:26px 40px 0;}
.seclabel{font-size:20px;font-weight:400;color:#243953;margin-bottom:18px;}
.grid{display:flex;gap:18px;}
.card{width:200px;}
.thumb{aspect-ratio:1/1;background:#f1ece0;border-radius:4px;margin-bottom:10px;}
.ptitle{font-size:15px;font-weight:400;color:#243953;margin:0 0 4px;}
.pprice{font-size:14px;color:#5a6a76;}
</style>
<div class="promo">Complimentary Design Services — Book a Consultation</div>
<div class="nav">
<div class="logo">Serena And Lily</div>
<div class="navlinks"><div>Furniture</div><div>Textiles</div><div>Lighting</div><div>Outdoor</div></div>
</div>
<div class="hero">
<div class="left">
<div class="h1">Rooms that<br>breathe.</div>
<div class="sub">Rattan, teak, and Sunbrella — generous spacing lets the material speak at its own pace.</div>
<div class="cta">Shop The Collection</div>
</div>
<div class="right"><div class="chair"></div><div class="pillow"></div></div>
</div>
<div class="sec">
<div class="seclabel">New Arrivals</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c9a06a,#243953)"></div><div class="ptitle">Riviera Rattan Chair</div><div class="pprice">$1,298</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#243953,#c9d6dd)"></div><div class="ptitle">Cliffside Sofa</div><div class="pprice">$3,895</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#970013,#243953)"></div><div class="ptitle">Coastal Linen Lumbar</div><div class="pprice">$78</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c9d6dd,#243953)"></div><div class="ptitle">Teak Bistro Table</div><div class="pprice">$1,598</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #232323;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #232323;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.35; letter-spacing: 0.25px; margin: 0; color: #232323; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #636363; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #232323; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #f8f8f8; color: #232323;
border: 1px solid #232323; border-radius: 4px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f8f8; color: #232323;
border: 1px solid #c3c3c3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #636363; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #0e2cc7; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Futura PT',Georgia,'Times New Roman',serif; background:#f8f8f8; color:#232323; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.notif{height:36px;background:#0e2cc7;color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;letter-spacing:.2px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-size:17px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;}
.hero{height:210px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.herotext{max-width:400px;}
.herotext h1{font-size:32px;font-weight:400;letter-spacing:.5px;margin:0 0 12px;line-height:1.25;}
.herotext p{font-size:15px;color:#636363;margin:0 0 18px;}
.hbtn{display:inline-block;background:#232323;color:#fff;font-size:14px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;padding:12px 28px;border-radius:4px;}
.phone{width:150px;height:150px;border-radius:8px;background:linear-gradient(150deg,#232323,#454545);position:relative;}
.phone:after{content:'';position:absolute;left:20px;top:20px;right:20px;bottom:20px;border-radius:6px;background:#111111;}
.sec{padding:18px 40px 0;}
.sectitle{font-size:13px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:#636363;margin-bottom:12px;}
.grid{display:flex;gap:16px;}
.card{width:196px;}
.thumb{height:110px;background:#f4f4f4;border-radius:8px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:500;letter-spacing:.3px;text-transform:uppercase;padding:2px 8px;border-radius:2px;color:#fff;background:#0e2cc7;}
.badge.stock{background:#31862d;}
.ptitle{font-size:16px;font-weight:500;margin-top:10px;}
.pprice{font-size:16px;font-weight:500;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:0;}
</style>
<div class="wrap">
<div class="notif">Free shipping over $50 · Ships in 24 hours</div>
<div class="nav"><div class="logo">Nudient</div><div class="navlinks"><div>Phone Cases</div><div>MagSafe</div><div>Straps</div><div>About</div></div></div>
<div class="hero">
<div class="herotext"><h1>An object first,<br>a case second.</h1><p>Matte polycarbonate shells shaped with the restraint of a furniture catalog.</p><div class="hbtn">Shop Cases</div></div>
<div class="phone"></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge stock">In Stock</div></div><div class="ptitle">Thin Case — Black</div><div class="pprice">$45</div></div>
<div class="card"><div class="thumb"><div class="badge">Sale</div></div><div class="ptitle">Thin Case — Clay</div><div class="pprice">$39</div></div>
<div class="card"><div class="thumb"><div class="badge stock">In Stock</div></div><div class="ptitle">Bold Case — Slate</div><div class="pprice">$49</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">MagSafe Wallet</div><div class="pprice">$35</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #101820;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #101820;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #101820; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #495c68; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #1da7ee; color: #fefefe;
border: none; border-radius: 2px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #fefefe; color: #1da7ee;
border: 1px solid #1da7ee; border-radius: 2px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fefefe; color: #101820;
border: 1px solid #c2c4c6; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #495c68; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #008936; color: #fefefe;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Arial,Helvetica,sans-serif; background:#fefefe; color:#303030; }
*{box-sizing:border-box;}
.topband{height:26px;background:#101820;color:#aaaaaa;display:flex;align-items:center;padding:0 32px;font-size:11px;}
.nav{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#003399;}
.logo{font-size:19px;font-weight:700;color:#fff;letter-spacing:0.2px;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:700;color:#fff;}
.hero{height:220px;position:relative;background:#101820;overflow:hidden;display:flex;align-items:center;padding:0 32px;}
.hero:before{content:'';position:absolute;inset:0;background:#222222;opacity:0.35;}
.herotext{position:relative;width:420px;}
.herotext h1{font-size:36px;font-weight:700;color:#fff;margin:0 0 10px;letter-spacing:-0.3px;line-height:1.15;}
.herotext p{font-size:14px;color:#fefefe;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#1da7ee;color:#fefefe;font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:10px 20px;border-radius:2px;}
.suit{position:absolute;right:80px;top:30px;width:120px;height:160px;background:linear-gradient(160deg,#92c836,#008936);border-radius:8px 8px 4px 4px;}
.catnav{display:flex;background:#f2f2f2;border-top:1px solid #d0d0d0;border-bottom:1px solid #d0d0d0;padding:0 32px;}
.catnav div{font-size:13px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:10px 16px;color:#303030;}
.catnav div.on{color:#1da7ee;border-bottom:3px solid #1da7ee;}
.section{padding:16px 32px 0;}
.grid{display:flex;gap:12px;}
.card{width:150px;background:#f8f8f8;border:1px solid #d0d0d0;padding:10px;}
.thumb{aspect-ratio:1/1;background:#fefefe;margin-bottom:6px;}
.pcode{font-size:11px;color:#495c68;}
.pname{font-size:14px;font-weight:700;color:#101820;margin-top:2px;}
.badges{display:flex;gap:4px;margin-top:6px;}
.cbadge{background:#008936;color:#fefefe;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 6px;}
.hbadge{background:#92c836;color:#101820;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#101820;color:#fefefe;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="topband">Account · Distributor Locator · Global Region</div>
<div class="nav">
<div class="logo">Lakeland Industries</div>
<div class="navlinks"><div>Fire</div><div>Chemical</div><div>Hi-Vis</div><div>Arc Flash</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Certified protection. Zero compromise.</h1>
<p>Protective apparel engineered for instant visual triage in the field.</p>
<div class="cta">Request Quote</div>
</div>
<div class="suit"></div>
</div>
<div class="catnav">
<div class="on">Fire</div><div>Chemical</div><div>Hi-Vis</div><div>Arc Flash</div><div>Cut Protection</div>
</div>
<div class="section">
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003399,#101820)"></div><div class="pcode">SKU FR-4402</div><div class="pname">FR Coverall</div><div class="badges"><div class="cbadge">NFPA 2112</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#92c836,#101820)"></div><div class="pcode">SKU HV-1187</div><div class="pname">Hi-Vis Rain Jacket</div><div class="badges"><div class="hbadge">ANSI 107</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1da7ee,#101820)"></div><div class="pcode">SKU CH-9931</div><div class="pname">ChemMax Suit</div><div class="badges"><div class="cbadge">EN ISO</div></div></div>
</div>
</div>
<div class="footer"><span>© Lakeland Industries</span><span>Distributor Portal</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.22; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #003388; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: transparent; color: #000000;
border: 1px solid #003388; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #110c1d; color: #ffffff;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #110c1d; color: #a88548;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#110c1d; color:#ffffff; box-sizing:border-box;
font-family:'gdsherpa',system-ui,'Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
nav { height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#1a1230; }
.brand { font-size:18px; font-weight:700; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#c9c3e0; }
.btn-primary { background:#003388; color:#fff; border:none; border-radius:6px; padding:11px 20px; font-size:13px; font-weight:600; }
main { display:flex; height:calc(640px - 66px - 42px); }
.gallery { width:400px; background:#1a1230; position:relative; display:flex; align-items:center; justify-content:center; }
.guitar { width:90px; height:260px; position:relative; }
.guitar::before { content:''; position:absolute; top:0; left:34px; width:22px; height:130px; border-radius:4px;
background:linear-gradient(180deg,#3a2f10,#1a1230); }
.guitar::after { content:''; position:absolute; bottom:0; left:0; width:90px; height:150px; border-radius:45% 45% 40% 40% / 55% 55% 45% 45%;
background:radial-gradient(circle at 35% 30%,#a88548,#5a4322 80%); }
.badge-config { position:absolute; top:20px; left:20px; background:#00d084; color:#0a0a0a; font-size:11px; font-weight:700; padding:4px 10px; border-radius:6px; }
.info { flex:1; padding:28px 32px; display:flex; flex-direction:column; gap:14px; }
.cat { font-size:12px; color:#8a83a8; text-transform:uppercase; letter-spacing:0.4px; }
h1 { font-size:22px; font-weight:700; margin:0; }
.price { font-size:20px; font-weight:700; }
.steps { display:flex; gap:6px; }
.step { flex:1; text-align:center; font-size:11px; color:#8a83a8; border-bottom:2px solid #32284f; padding-bottom:8px; }
.step.on { color:#fff; border-color:#00d084; }
.specrow { display:flex; gap:20px; }
.spec-card { background:#1a1230; border:1px solid #32284f; border-radius:8px; padding:10px 14px; font-size:12px; color:#c9c3e0; flex:1; }
.spec-card b { display:block; color:#fff; font-size:13px; }
.wood { display:flex; gap:8px; }
.wsw { width:30px; height:30px; border-radius:6px; border:2px solid transparent; }
.wsw.on { border-color:#00d084; }
.w1 { background:#a88548; } .w2 { background:#5a4322; } .w3 { background:#2b1f12; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#003388; color:#fff; border:none; border-radius:8px; padding:14px; font-size:14px; font-weight:700; }
.btn-sec { background:transparent; color:#fff; border:1px solid #32284f; border-radius:8px; padding:14px 18px; font-size:13px; font-weight:600; }
footer { padding:12px 32px; border-top:1px solid #32284f; font-size:11px; color:#8a83a8; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Bilt Guitars</div>
<div class="navlinks"><span>Electric</span><span>Bass</span><span>Custom Build</span><span>Finishes</span></div>
<button class="btn-primary">Start Building</button>
</nav>
<main>
<div class="gallery"><span class="badge-config">Custom Spec</span><div class="guitar"></div></div>
<div class="info">
<span class="cat">Configured Build</span>
<h1>Bilt A25 — Custom Spec</h1>
<div class="price">$1,890.00</div>
<div class="steps">
<div class="step on">1. Body</div>
<div class="step on">2. Neck</div>
<div class="step">3. Pickups</div>
<div class="step">4. Finish</div>
</div>
<div class="specrow">
<div class="spec-card"><b>Alder</b>Body wood</div>
<div class="spec-card"><b>Maple / C</b>Neck profile</div>
<div class="spec-card"><b>22 Frets</b>Fingerboard</div>
</div>
<div class="wood"><span class="wsw w1 on"></span><span class="wsw w2"></span><span class="wsw w3"></span></div>
<div class="btn-row">
<button class="btn-add">Confirm Spec</button>
<button class="btn-sec">Save Draft</button>
</div>
</div>
</main>
<footer><span>© Bilt Guitars</span><span>Built to your spec, shipped in 6 weeks</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #579787; color: #ffffff;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9fafb; color: #272727;
border: 1px solid #bfc0c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #fbcd0a; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Durston Gear Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:'Nunito Sans',-apple-system,system-ui,Roboto,'Helvetica Neue',sans-serif;
background:#f9fafb; color:#121212;
}
*{box-sizing:border-box;}
.nav{height:64px;background:#108474;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-size:19px;font-weight:700;}
.navlinks{display:flex;gap:6px;font-size:15px;font-weight:600;}
.navlinks span{padding:8px 12px;border-radius:8px;}
.navlinks span.active{background:rgba(255,255,255,0.15);}
.searchbar{background:#f9fafb;border-radius:9999px;padding:10px 20px;font-size:13px;color:#272727;width:170px;}
.hero{background:#108474;color:#fff;padding:36px;text-align:center;}
.hero h1{font-size:32px;font-weight:700;letter-spacing:-0.5px;margin:0 0 14px;}
.herobtn{background:#fff;color:#108474;font-size:15px;font-weight:600;padding:12px 24px;border-radius:8px;display:inline-block;}
.section{padding:20px 36px 0;}
.grid{display:flex;gap:16px;}
.card{flex:1;background:#fff;border:1px solid #dedede;border-radius:12px;overflow:hidden;}
.card-img{height:120px;position:relative;}
.card-img.c1{background:linear-gradient(140deg,#108474,#c1e6e6);}
.card-img.c2{background:linear-gradient(140deg,#579787,#edf5f5);}
.card-img.c3{background:linear-gradient(140deg,#fbcd0a,#108474);}
.card-img.c4{background:linear-gradient(140deg,#a89cc8,#108474);}
.badge{position:absolute;top:8px;left:8px;background:#fbcd0a;color:#121212;font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.card-body{padding:12px;}
.title{font-size:16px;font-weight:600;margin-bottom:4px;}
.price{font-size:20px;font-weight:700;}
</style>
<nav class="nav">
<div class="logo">Durston Gear</div>
<div class="navlinks">
<span class="active">Tents</span><span>Cookware</span><span>Packs</span><span>Sale</span>
</div>
<div class="searchbar">Search gear…</div>
</nav>
<div class="hero">
<h1>Ultralight gear.<br>Every gram counts.</h1>
<div class="herobtn">Shop Tents</div>
</div>
<div class="section">
<div class="grid">
<div class="card"><div class="card-img c1"><span class="badge">Sale</span></div><div class="card-body"><div class="title">X-Mid 1 Tent</div><div class="price">$219.00</div></div></div>
<div class="card"><div class="card-img c2"></div><div class="card-body"><div class="title">Titanium Cook Set</div><div class="price">$89.00</div></div></div>
<div class="card"><div class="card-img c3"></div><div class="card-body"><div class="title">Kakwa 40 Pack</div><div class="price">$259.00</div></div></div>
<div class="card"><div class="card-img c4"></div><div class="card-body"><div class="title">X-Mid Pro 2</div><div class="price">$599.00</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0a; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0a; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 400; line-height: 28px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; margin: 0; color: #7d8187; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background: #ffffff; color: #0a0a0a;
border: none; border-radius: 9999px; padding: {spacing.xs} {spacing.md};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background: #0a0a0a; color: #ffffff;
border: 1px solid #212327; border-radius: 9999px;
padding: {spacing.sm} {spacing.lg}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; background: #1a1c20; color: #ffffff;
border: 1px solid #212327; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7d8187; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #2c2c2c; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0a0a; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
.page { position:relative; height:640px; overflow:hidden; }
.cosmic { position:absolute; left:50%; top:-60px; transform:translateX(-50%); width:900px; height:420px; z-index:0;
background:
radial-gradient(260px 200px at 30% 30%, rgba(124,58,237,.20), transparent 70%),
radial-gradient(260px 200px at 70% 20%, rgba(255,122,23,.16), transparent 70%),
radial-gradient(300px 220px at 50% 60%, rgba(196,181,253,.10), transparent 70%);
filter:blur(10px); }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:15px; font-weight:400; letter-spacing:.02em; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; color:#dadbdf; }
.pillw { border:1px solid #ffffff; border-radius:999px; padding:8px 18px; font-size:13px; color:#ffffff; }
.hero { position:relative; z-index:2; text-align:center; padding:60px 32px 30px; }
.eyebrow { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:11px; letter-spacing:.18em;
text-transform:uppercase; color:#7d8187; margin-bottom:16px; }
.hero h1 { font-size:48px; font-weight:400; line-height:1.08; margin:0 auto 16px; max-width:600px; letter-spacing:-.2px; }
.hero p { font-size:14px; color:#dadbdf; margin:0 auto 24px; max-width:440px; }
.btnrow { display:flex; gap:12px; justify-content:center; }
.pillw2 { background:transparent; border:1px solid #ffffff; border-radius:999px; padding:10px 22px; font-size:13px; color:#ffffff; }
.pillfill { border:1px solid #ffffff; background:#ffffff; color:#0a0a0a; border-radius:999px; padding:10px 22px; font-size:13px; font-weight:600; }
.cards { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:6px 32px 30px; }
.card { border:1px solid #212327; border-radius:10px; padding:18px; background:#191919; }
.card .tag { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:10px; letter-spacing:.1em;
text-transform:uppercase; color:#7d8187; }
.card h3 { font-size:16px; font-weight:400; margin:10px 0 6px; color:#ffffff; }
.card p { font-size:12px; color:#7d8187; margin:0; line-height:1.4; }
</style></head>
<body>
<div class="page">
<div class="cosmic"></div>
<nav>
<div class="brand">xAI</div>
<div class="navlinks"><span>Grok</span><span>API</span><span>Research</span><span>Company</span></div>
<div class="pillw">Try Grok</div>
</nav>
<div class="hero">
<div class="eyebrow">Grok · xAI</div>
<h1>Understand the universe</h1>
<p>xAI's mission is to advance our collective understanding of the universe.</p>
<div class="btnrow"><button class="pillfill">Try Grok</button><button class="pillw2">Read the API docs</button></div>
</div>
<div class="cards">
<div class="card"><div class="tag">Model</div><h3>Grok 4</h3><p>Frontier reasoning across code, math, and language.</p></div>
<div class="card"><div class="tag">Platform</div><h3>xAI API</h3><p>Build with the same models that power Grok.</p></div>
<div class="card"><div class="tag">Lab</div><h3>Research</h3><p>Papers and progress from the team building AGI.</p></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #373737;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #373737;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.27; margin: 0; color: #373737; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.29; letter-spacing: 1.2px; background: #1c1794; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.29; letter-spacing: 1.2px; background: #ffffff; color: #1c1794;
border: 1px solid #1c1794; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.62; background: #ffffff; color: #373737;
border: 1px solid #d6d5d0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.36; letter-spacing: 1px; background: #f7f7f7; color: #373737;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Frank Darling Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Georgia,'Times New Roman',serif; background:#ffffff; color:#373737; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
.nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 44px; border-bottom:1px solid #e9e9e9; }
.logo { font-family:'Helvetica Neue',Arial,sans-serif; font-weight:700; font-size:18px; letter-spacing:.5px; color:#1c1794; text-transform:uppercase; }
.navlinks { display:flex; gap:28px; font-family:'Helvetica Neue',Arial,sans-serif; font-size:12px; font-weight:400; letter-spacing:.5px; text-transform:uppercase; color:#444; }
.navcta { background:#1c1794; color:#fff; font-family:'Helvetica Neue',Arial,sans-serif; font-weight:400; font-size:12px; letter-spacing:.5px; text-transform:uppercase; padding:10px 20px; }
.hero { display:flex; align-items:center; padding:40px 60px; gap:50px; flex:1; background:#f7f7f7; }
.hero-copy { max-width:400px; }
.hero h1 { font-size:44px; font-weight:400; line-height:1.12; letter-spacing:-.3px; margin:0 0 16px; color:#373737; }
.hero p { font-size:15px; color:#6b7280; line-height:1.65; margin:0 0 22px; max-width:360px; font-family:'Helvetica Neue',Arial,sans-serif; }
.btn-square { background:#1c1794; color:#fff; font-family:'Helvetica Neue',Arial,sans-serif; font-weight:400; font-size:13px; letter-spacing:.5px; text-transform:uppercase; padding:14px 28px; display:inline-block; }
.visual { width:260px; height:260px; border-radius:8px; background:linear-gradient(135deg,#1c1794,#96dbfa); display:flex; align-items:center; justify-content:center; }
.ring { width:110px; height:110px; border-radius:50%; border:16px solid #f7f7f7; box-shadow:0 0 0 3px #96dbfa; }
.section { padding:26px 60px; flex:1; }
.section h2 { font-size:19px; font-weight:400; margin:0 0 16px; letter-spacing:-.2px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card { border:1px solid #f0f0f0; padding:14px; }
.card .ph { height:80px; margin-bottom:12px; background:#eeeeee; display:flex; align-items:center; justify-content:center; }
.ring-small { width:44px; height:44px; border-radius:50%; border:8px solid #d6d5d0; }
.card .name { font-size:14px; font-weight:400; margin-bottom:3px; }
.card .desc { font-family:'Helvetica Neue',Arial,sans-serif; font-size:11px; color:#6b7280; margin-bottom:8px; text-transform:uppercase; letter-spacing:.3px; }
.card .price { font-family:'Helvetica Neue',Arial,sans-serif; font-weight:700; font-size:14px; }
.filterpill { display:inline-block; border:1px solid #1c1794; color:#1c1794; border-radius:999px; font-family:'Helvetica Neue',Arial,sans-serif; font-size:10.5px; padding:5px 14px; margin-top:8px; }
</style>
<div class="page">
<div class="nav">
<div class="logo">Frank Darling</div>
<div class="navlinks"><span>Engagement</span><span>Custom Design</span><span>Wedding Bands</span><span>Journal</span></div>
<div class="navcta">Start Your Ring</div>
</div>
<div class="hero">
<div class="hero-copy">
<h1>A conversation with<br>a very smart friend.</h1>
<p>Custom-designed, collaboratively made — for people who know what they want and want it done differently.</p>
<div class="btn-square">Take the Style Quiz</div>
</div>
<div class="visual"><div class="ring"></div></div>
</div>
<div class="section">
<h2>Start With a Setting</h2>
<div class="grid">
<div class="card"><div class="ph"><div class="ring-small"></div></div><div class="name">The Wren Setting</div><div class="desc">Oval · Solitaire</div><div class="price">From $1,890</div><div class="filterpill">Diamond</div></div>
<div class="card"><div class="ph"><div class="ring-small" style="border-color:#96dbfa;"></div></div><div class="name">The Alcott Setting</div><div class="desc">Round · Halo</div><div class="price">From $2,340</div><div class="filterpill">Sapphire</div></div>
<div class="card"><div class="ph"><div class="ring-small" style="border-color:#1c1794;"></div></div><div class="name">The Marlow Setting</div><div class="desc">Emerald · Three-Stone</div><div class="price">From $3,120</div><div class="filterpill">Diamond</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #333333;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #333333;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #333333; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f9fafb; color: #108474;
border: 1px solid #108474; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9fafb; color: #333333;
border: 1px solid #c8c8c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #0a4021; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9fafb; color:#333333; box-sizing:border-box;
font-family:'Halant','Nunito Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#108474; }
.brand { font-family:'Arial Narrow','Impact',sans-serif; font-size:22px; font-weight:800; color:#f9fafb;
letter-spacing:0.01em; text-transform:uppercase; }
.navlinks { display:flex; gap:22px; font-size:12.5px; color:#c1e6e6; font-weight:600; text-transform:uppercase; }
.navlinks span.on { color:#fbcd0a; }
.cart { background:#fbcd0a; color:#0a4021; font-size:12px; font-weight:800; padding:6px 14px; border-radius:8px; }
main { display:flex; height:576px; }
.gallery { width:400px; background:#0a4021; position:relative; display:flex; align-items:center; justify-content:center; }
.jar { width:180px; height:180px; border-radius:20px; background:linear-gradient(160deg,#108474 0%,#0a4021 100%);
position:relative; box-shadow:0 20px 44px rgba(0,0,0,0.3); }
.jar::before { content:''; position:absolute; top:-14px; left:14px; right:14px; height:24px;
background:#f8f2e3; border-radius:10px; }
.jar::after { content:'ACTIVIST'; position:absolute; bottom:26px; left:0; right:0; text-align:center;
color:#fbcd0a; font-size:13px; font-weight:800; letter-spacing:0.14em; }
.leaf { position:absolute; width:60px; height:60px; border-radius:0 60% 0 60%; background:#c1e6e6; opacity:0.35; }
.leaf.a { top:40px; left:40px; transform:rotate(20deg); }
.leaf.b { bottom:60px; right:50px; transform:rotate(-30deg); }
.badge-eco { position:absolute; top:20px; left:20px; background:#f8f2e3; color:#0a4021; font-size:10px;
font-weight:800; text-transform:uppercase; letter-spacing:0.05em; padding:5px 12px; border-radius:9999px; }
.info { flex:1; padding:32px 38px; display:flex; flex-direction:column; gap:12px; background:#f9fafb; }
.cat { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#108474; }
h1 { font-family:'Arial Narrow','Impact',sans-serif; font-size:34px; font-weight:800; margin:0;
letter-spacing:0.01em; line-height:1.05; text-transform:uppercase; color:#0a4021; }
.stars { font-size:12px; color:#fbcd0a; }
.stars .n { color:#555555; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:21px; font-weight:800; color:#108474; }
.desc { font-size:13.5px; color:#555555; line-height:1.55; max-width:340px; }
.fact-row { display:flex; gap:8px; flex-wrap:wrap; }
.fact { background:#eeeeee; border-radius:8px; padding:6px 12px; font-size:11px; font-weight:700; color:#333333; }
.fact.green { background:#108474; color:#fff; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#fbcd0a; color:#0a4021; border:none; border-radius:6px; padding:13px 18px;
font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:0.03em; }
.btn-outline { border:2px solid #108474; color:#108474; background:#fff; border-radius:6px; padding:11px 16px;
font-size:12.5px; font-weight:700; white-space:nowrap; }
.meta { font-size:11px; color:#7b7b7b; }
</style></head>
<body>
<nav>
<div class="brand">Activist Skincare</div>
<div class="navlinks"><span class="on">Skincare</span><span>Refill</span><span>Our Mission</span><span>Journal</span></div>
<div class="cart">Bag · 1</div>
</nav>
<main>
<div class="gallery">
<div class="leaf a"></div><div class="leaf b"></div>
<span class="badge-eco">Refillable Jar</span>
<div class="jar"></div>
</div>
<div class="info">
<span class="cat">Face Cream · 50ml</span>
<h1>Supercritical Renewal Cream</h1>
<div class="stars">★★★★★ <span class="n">4.9 · 1,802 reviews</span></div>
<div class="price-row"><span class="price">$68.00</span></div>
<p class="desc">Barrier-repairing, planet-first formula built with supercritical CO2 extraction — powerful skincare that never costs the earth.</p>
<div class="fact-row">
<span class="fact green">1% for the Planet</span>
<span class="fact">Refillable</span>
<span class="fact">Vegan</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Bag</button>
<button class="btn-outline">Buy Refill −20%</button>
</div>
<span class="meta">Carbon-neutral shipping · Recycled glass jar</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00a0df; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00a0df; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0e27; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a0df; color: #0a0e27;
border: 1px solid #0a0e27; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00a0df; color: #f5f5f5;
border: 1px solid #27aee3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0289c2; color: #0a0e27;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A0E27; color:#E8EBF7; box-sizing:border-box;
font-family:"Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; font-variant-numeric: tabular-nums; }
.hero { background: linear-gradient(165deg,#00A0DF 0%,#1B53C4 45%,#0A0E27 100%); padding:26px 40px 30px; }
.greet-row { display:flex; justify-content:space-between; align-items:center; }
.greet { font-size:18px; font-weight:700; color:#fff; }
.icons { display:flex; gap:16px; color:#fff; font-size:20px; }
.nw-label { font-size:13px; font-weight:600; color:rgba(255,255,255,.75); margin-top:16px; }
.nw-val { font-size:40px; font-weight:800; letter-spacing:-1.2px; margin-top:4px; }
.change-pill { display:inline-flex; align-items:center; gap:6px; margin-top:10px; background:rgba(47,208,138,0.18); color:#6EF0B6;
font-size:13px; font-weight:700; padding:6px 14px; border-radius:999px; }
.tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:20px 40px 0; }
.tile { background:#121736; border:1px solid #252C55; border-radius:18px; padding:16px; box-shadow: rgba(0,0,0,0.25) 0 2px 12px; }
.icon-chip { width:36px; height:36px; border-radius:11px; background:#0E2A44; display:flex; align-items:center; justify-content:center; font-size:16px; color:#29C2FF; }
.t-label { font-size:12px; font-weight:600; color:#9BA3C7; margin-top:10px; }
.t-val { font-size:18px; font-weight:800; letter-spacing:-.4px; margin-top:2px; }
.t-sub { font-size:11px; font-weight:600; margin-top:4px; }
.gain { color:#2FD08A; } .loss { color:#FF6B6B; } .gold { color:#F2C14E; }
.list { padding:16px 40px; }
.list-hdr { font-size:14px; font-weight:700; margin-bottom:8px; }
.row { display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid #252C55; }
.row:last-child { border-bottom:none; }
.rico { width:40px; height:40px; border-radius:13px; background:#0E2A44; display:flex; align-items:center; justify-content:center; font-size:16px; color:#29C2FF; }
.rname { font-size:15px; font-weight:700; }
.rmeta { font-size:12px; color:#9BA3C7; }
.ramt { margin-left:auto; font-size:15px; font-weight:800; }
</style></head>
<body>
<div style="position:absolute; top:14px; left:40px; font-size:10px; font-weight:800; letter-spacing:.5px; color:rgba(255,255,255,.75); z-index:2;">SoFi (iOS)</div>
<div class="hero">
<div class="greet-row"><div class="greet">Good morning, Alex</div><div class="icons">🔔 ⚙</div></div>
<div class="nw-label">Net worth</div>
<div class="nw-val">$84,210.55</div>
<div class="change-pill">▲ +$1,840.22 this month</div>
</div>
<div class="tiles">
<div class="tile"><div class="icon-chip">🏦</div><div class="t-label">Checking & Savings</div><div class="t-val">$12,340.10</div><div class="t-sub gain">3.80% APY</div></div>
<div class="tile"><div class="icon-chip">📈</div><div class="t-label">Invest</div><div class="t-val">$31,884.02</div><div class="t-sub gain">+2.4% today</div></div>
<div class="tile"><div class="icon-chip">🏠</div><div class="t-label">Loans</div><div class="t-val">$402.00</div><div class="t-sub loss">Due Jun 1</div></div>
<div class="tile"><div class="icon-chip">💳</div><div class="t-label">Credit Card</div><div class="t-val">$1,240 pts</div><div class="t-sub gold">2% cash back</div></div>
</div>
<div class="list">
<div class="list-hdr">Recent activity</div>
<div class="row"><div class="rico">📈</div><div><div class="rname">Auto-invest</div><div class="rmeta">Today · Auto-invest</div></div><div class="ramt gain">+$2,140.55</div></div>
<div class="row"><div class="rico">🛒</div><div><div class="rname">Whole Foods</div><div class="rmeta">Yesterday · Checking</div></div><div class="ramt">-$84.20</div></div>
<div class="row"><div class="rico">🎁</div><div><div class="rname">Rewards earned</div><div class="rmeta">Mon · SoFi Card</div></div><div class="ramt gold">+120 pts</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eaeaea; color: #31373d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eaeaea; color: #31373d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #31373d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8a8a8a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #e9be33; color: #31373d;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #eaeaea; color: #31373d;
border: 1px solid #e9be33; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #eaeaea; color: #31373d;
border: 1px solid #bcbdbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e9be33; color: #31373d;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Fuse Chicken</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#eaeaea; font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; color:#6c6c6c; }
*{box-sizing:border-box;}
.nav{background:#31373d;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.logo{color:#fff;font-size:18px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;color:#fff;}
.icons{color:#fff;font-size:12px;}
.hero{background:#31373d;color:#fff;padding:34px 28px;min-height:180px;display:flex;flex-direction:column;justify-content:center;}
h1{font-size:28px;font-weight:700;line-height:1.25;margin:0 0 10px;}
.sub{font-size:16px;color:#b0b0b0;margin:0 0 18px;max-width:520px;}
.btn{background:transparent;color:#fff;border:1px solid #fff;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:600;width:fit-content;}
.section{padding:20px 28px 0;}
.section h2{font-size:20px;font-weight:600;margin:0 0 14px;color:#31373d;}
.grid{display:flex;gap:16px;}
.card{flex:1;background:#fff;border-radius:8px;overflow:hidden;}
.card-img{background:#eaeaea;height:120px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#e9be33;color:#31373d;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.badge.sale{background:#c0392b;color:#fff;}
.card-title{font-size:16px;font-weight:600;padding:8px 12px 0;color:#31373d;}
.card-price{font-size:16px;font-weight:600;padding:2px 12px 12px;color:#31373d;}
.cable{width:80px;height:6px;background:#8a8a8a;border-radius:3px;position:absolute;top:56px;left:20px;}
.plug{width:14px;height:14px;background:#e9be33;border-radius:2px;position:absolute;top:50px;left:96px;}
.divider{border:none;border-top:1px solid #d0d0d0;margin:20px 0;}
.accordion{padding:0 28px;}
.acc-header{background:#eaeaea;padding:12px 16px;border-radius:8px;font-size:16px;font-weight:600;color:#31373d;display:flex;justify-content:space-between;}
</style>
<div class="nav">
<div class="logo">Fuse Chicken</div>
<div class="navlinks"><span>Cables</span><span>Cases</span><span>Mounts</span><span>Straps</span></div>
<div class="icons">Search Cart</div>
</div>
<div class="hero">
<h1>Built to survive a drop<br>from a construction crane</h1>
<p class="sub">Rugged phone accessories — magnetic mounts, braided cables, and cases engineered for the field.</p>
<button class="btn">Shop Now</button>
</div>
<div class="section">
<h2>Best sellers</h2>
<div class="grid">
<div class="card"><div class="card-img"><div class="badge">New</div><div class="cable"></div><div class="plug"></div></div><div class="card-title">Braided Charge Cable</div><div class="card-price">$19.99</div></div>
<div class="card"><div class="card-img"><div class="badge sale">Sale</div></div><div class="card-title">Magnetic Car Mount</div><div class="card-price">$24.99</div></div>
<div class="card"><div class="card-img"></div><div class="card-title">Rugged Phone Case</div><div class="card-price">$34.99</div></div>
</div>
</div>
<hr class="divider">
<div class="accordion">
<div class="acc-header"><span>Warranty & Durability Specs</span><span>+</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffd618; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffd618; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6a14; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffd618; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffd618; color: #111111;
border: 1px solid #d9b617; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6a14; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6b414; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>KakaoPage detail mock</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:'Pretendard Variable', 'Pretendard', -apple-system, system-ui, 'Segoe UI', 'Noto Sans KR', 'Malgun Gothic', sans-serif; }
* { box-sizing:border-box; }
.wrap { width:960px; height:640px; display:grid; grid-template-rows:56px 220px 48px 1fr; }
/* top nav */
.topnav { display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid #eeeeee; }
.topnav .brand { font-size:18px; font-weight:700; color:#000000; }
.topnav .right { display:flex; align-items:center; gap:14px; }
.search { font-size:13px; color:#999999; }
.coin { background:#ffd618; color:#000000; border-radius:2px; padding:3px 8px; font-size:13px; font-weight:400; }
/* detail hero */
.detail { display:flex; gap:20px; padding:20px 28px; }
.cover { flex:0 0 130px; width:130px; height:180px; border-radius:12px; background:#eeeeee; position:relative; overflow:hidden; }
.cover .shade1 { position:absolute; inset:0; background:linear-gradient(150deg, #d8d8d8, #eeeeee 60%); }
.cover .shade2 { position:absolute; width:120px; height:120px; border-radius:50%; right:-40px; bottom:-40px;
background:radial-gradient(circle, rgba(255,214,24,0.5), rgba(255,214,24,0) 70%); }
.info { flex:1; display:flex; flex-direction:column; gap:8px; padding-top:2px; }
.info h1 { margin:0; font-size:21px; font-weight:700; line-height:1.24; color:#000000; }
.info .byline { font-size:12px; font-weight:400; line-height:1.33; color:#000000; }
.tags { display:flex; gap:6px; margin-top:2px; }
.tags span { font-size:12px; font-weight:400; line-height:1.33; color:#666666; background:#eeeeee; border-radius:2px; padding:2px 8px; }
.ctas { display:flex; gap:10px; margin-top:auto; }
.cta-primary { flex:1; background:#ffd618; color:#222222; border-radius:8px; height:56px; font-size:12px; font-weight:700;
display:flex; align-items:center; justify-content:center; }
.cta-secondary { flex:0 0 120px; border:1px solid #000000; color:#000000; border-radius:100px; height:56px; font-size:12px; font-weight:700;
display:flex; align-items:center; justify-content:center; }
/* section tabs */
.tabs { display:flex; align-items:center; gap:8px; padding:0 28px; border-bottom:1px solid #eeeeee; }
.pill { border-radius:16px; height:32px; padding:7px 14px; font-size:13px; font-weight:700; display:flex; align-items:center; }
.pill.active { background:#000000; color:#ffffff; }
.pill.inactive { color:#000000; font-weight:400; }
/* episode list */
.episodes { padding:10px 28px 0 28px; overflow:hidden; }
.row { display:flex; align-items:center; gap:14px; height:84px; background:#eeeeee; border-radius:8px; padding:0 16px; margin-bottom:8px; position:relative; }
.row .thumb { width:52px; height:52px; border-radius:8px; background:linear-gradient(160deg,#dcdcdc,#c8c8c8); flex:0 0 52px; }
.row .text { flex:1; }
.row .text .t { font-size:14px; font-weight:400; line-height:1.43; color:#000000; }
.row .text .d { margin-top:4px; font-size:11px; font-weight:400; line-height:1.45; color:#666666; }
.badge-best { position:absolute; top:8px; left:58px; background:#ff3042; color:#ffffff; font-size:11px; font-weight:700; border-radius:5px; padding:0 3px; }
.badge-free { background:#000000; color:#ffffff; font-size:10px; font-weight:700; border-radius:2px; padding:0 4px; }
.chip { background:rgba(0,0,0,0.05); color:#000000; font-size:14px; font-weight:400; border-radius:8px; height:28px; padding:0 10px; display:flex; align-items:center; }
</style></head>
<body>
<div class="wrap">
<div class="topnav">
<div class="brand">KakaoPage</div>
<div class="right"><span class="search">Title, author...</span><span class="coin">Recharge</span></div>
</div>
<div class="detail">
<div class="cover"><div class="shade1"></div><div class="shade2"></div></div>
<div class="info">
<h1>Ember Trial</h1>
<div class="byline">by J. Winters</div>
<div class="tags"><span>Fantasy</span><span>Action</span></div>
<div class="ctas">
<div class="cta-primary">Start Reading</div>
<div class="cta-secondary">Subscribe</div>
</div>
</div>
</div>
<div class="tabs">
<div class="pill active">Home</div>
<div class="pill inactive">Info</div>
<div class="pill inactive">News</div>
</div>
<div class="episodes">
<div class="row">
<div class="badge-best">BEST</div>
<div class="thumb"></div>
<div class="text"><div class="t">Episode 142 · The Last Ember</div><div class="d">Sep 3</div></div>
<div class="chip">128</div>
</div>
<div class="row">
<div class="thumb"></div>
<div class="text"><div class="t">Episode 141 · Rebirth</div><div class="d">Aug 27</div></div>
<div class="chip">64</div>
</div>
<div class="row">
<div class="thumb"></div>
<div class="text"><div class="t">Episode 140 · Shattered Vow</div><div class="d"><span class="badge-free">FREE</span></div></div>
<div class="chip">211</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #001d34;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #001d34;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #001d34; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #001d34;
border: 1px solid #108474; border-radius: 0px;
padding: 12px 30px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9fafb; color: #001d34;
border: 1px solid #bbc3c9; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #963928; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f2efde; font-family:'Founders Grotesk','Helvetica Neue',Arial,sans-serif; color:#001d34;
}
*{box-sizing:border-box;}
.nav{height:64px; background:#001d34; display:flex; align-items:center; padding:0 30px;}
.logo{font-family:'DM Serif Display',Georgia,serif; font-size:22px; color:#fff;}
.navlinks{display:flex; gap:22px; margin-left:36px; font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:#9fb8cc;}
.navcta{margin-left:auto; background:#108474; color:#fff; padding:9px 20px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; font-weight:600;}
.hero{display:flex; align-items:center; gap:32px; padding:26px 30px;}
.heroText{flex:1;}
.heroText .eyebrow{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#108474; font-weight:600; margin-bottom:10px;}
.heroText h1{font-family:'DM Serif Display',Georgia,serif; font-weight:400; font-size:38px; line-height:1.15; margin:0 0 12px; max-width:400px; color:#001d34;}
.heroText p{font-size:13.5px; color:#3a4f5c; line-height:1.55; max-width:380px; margin:0 0 16px;}
.heroBtn{display:inline-block; background:#108474; color:#fff; padding:12px 26px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; font-weight:600;}
.heroImg{width:250px; height:170px; background:linear-gradient(160deg,#001d34,#004a78); position:relative; flex-shrink:0;}
.heroImg .sw{position:absolute; bottom:12px; left:12px; display:flex; gap:6px;}
.sw span{width:16px; height:16px; border-radius:50%; display:inline-block;}
.sw1{background:#963928;} .sw2{background:#108474;} .sw3{background:#f2efde;} .sw4{background:#007ab4;}
.section{padding:14px 30px 0;}
.sectitle{font-family:'DM Serif Display',Georgia,serif; font-size:19px; margin:0 0 12px; color:#001d34;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.card{background:#fff; padding:8px; text-align:left; position:relative;}
.thumb{height:80px; margin-bottom:8px; position:relative;}
.t1{background:linear-gradient(160deg,#001d34,#0579af);}
.t2{background:linear-gradient(160deg,#108474,#4fbfab);}
.t3{background:linear-gradient(160deg,#963928,#c47a63);}
.t4{background:linear-gradient(160deg,#004a78,#007ab4);}
.badge{position:absolute; top:0; left:0; background:#963928; color:#fff; font-size:8px; font-weight:700; padding:2px 6px; text-transform:uppercase;}
.pname{font-size:12px; font-weight:600; margin-bottom:3px;}
.pprice{font-size:12px; color:#108474; font-weight:700;}
.footer{position:absolute; bottom:0; left:0; right:0; background:#001d34; color:#9fb8cc; font-size:10px; text-align:center; padding:8px 0;}
</style>
<div class="nav">
<div class="logo">Haworth</div>
<div class="navlinks"><span>Seating</span><span>Systems</span><span>Wellbeing</span><span>Resources</span></div>
<div class="navcta">Request a Quote</div>
</div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">2026 Workplace Collection</div>
<h1>Furniture for How Work Actually Happens</h1>
<p>Task seating, storage, and adaptable systems engineered for the modern office — built to spec, not to a portal.</p>
<div class="heroBtn">Explore Systems</div>
</div>
<div class="heroImg"><div class="sw"><span class="sw1"></span><span class="sw2"></span><span class="sw3"></span><span class="sw4"></span></div></div>
</div>
<div class="section">
<div class="sectitle">Featured Systems</div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="badge">Sale</span></div><div class="pname">Fern Task Chair</div><div class="pprice">$895</div></div>
<div class="card"><div class="thumb t2"></div><div class="pname">Openest Lounge</div><div class="pprice">$1,240</div></div>
<div class="card"><div class="thumb t3"></div><div class="pname">Zody Height Desk</div><div class="pprice">$1,680</div></div>
<div class="card"><div class="thumb t4"></div><div class="pname">Belong Storage Wall</div><div class="pprice">$2,150</div></div>
</div>
</div>
<div class="footer">© Haworth — Organic Workspace Furniture, Since 1948</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f5ec; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f5ec; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; font-weight: 400; line-height: 1.38; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #513f37; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 13px; font-weight: 400; line-height: 1.25; letter-spacing: 2px; background: #ff7e05; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 13px; font-weight: 400; line-height: 1.25; letter-spacing: 2px; background: transparent; color: #121212;
border: 1px solid #ff7e05; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.68; background: #ffffff; color: #121212;
border: 1px solid #bebcb6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #513f37; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: 400; line-height: 1.25; letter-spacing: 2px; background: #ff7e05; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Egg Press</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f7f5ec; color:#121212; font-family:Georgia,'Times New Roman',serif; }
* { box-sizing:border-box; }
.announce { height:36px; background:#513f37; color:#f7f5ec; display:flex; align-items:center; justify-content:center;
font-size:12px; letter-spacing:.3px; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #dedede; }
.logo { font-size:20px; }
.navlinks { display:flex; gap:26px; font-size:14px; letter-spacing:.5px; }
.cart { border:1px solid #121212; border-radius:4px; padding:8px 14px; font-size:12px; text-transform:uppercase; letter-spacing:2px; }
.hero { display:flex; align-items:center; padding:30px 32px; gap:34px; height:210px; }
.hero-copy { flex:1; }
.hero-copy h1 { font-size:40px; line-height:1.15; margin:0 0 14px; }
.hero-copy p { font-size:15px; color:#404040; margin:0 0 18px; line-height:1.6; max-width:340px; }
.hero-btn { display:inline-block; background:#ff7e05; color:#fff; border-radius:4px; padding:14px 26px;
font-size:12px; letter-spacing:2px; text-transform:uppercase; }
.hero-art { flex:1; height:180px; display:flex; gap:14px; align-items:flex-end; }
.card3d { width:110px; height:150px; border-radius:4px; box-shadow:0 10px 20px rgba(0,0,0,.15); position:relative; }
.c1 { background:linear-gradient(160deg,#ffb27a,#ff7e05); transform:rotate(-6deg); }
.c2 { background:linear-gradient(160deg,#8dc6d3,#5183a3); transform:rotate(4deg); margin-top:20px; }
.c3 { background:linear-gradient(160deg,#f0ede2,#dedede); transform:rotate(-2deg); }
.pills { display:flex; gap:10px; padding:0 32px 18px; }
.pills span { font-size:10px; letter-spacing:2px; text-transform:uppercase; border:1px solid #dedede; border-radius:9999px; padding:6px 14px; color:#404040; }
.pills span.on { background:#121212; color:#f7f5ec; border-color:#121212; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:0 32px; }
.card { background:#fff; border-radius:4px; overflow:hidden; }
.thumb { height:96px; position:relative; }
.t1 { background:linear-gradient(160deg,#ffe0c2,#ff7e05); }
.t2 { background:linear-gradient(160deg,#dbeef2,#8dc6d3); }
.t3 { background:linear-gradient(160deg,#f5e9d8,#513f37); }
.t4 { background:linear-gradient(160deg,#e8f2f5,#5183a3); }
.sale { position:absolute; top:0; left:0; background:#ff7e05; color:#fff; font-size:11px; padding:4px 8px; letter-spacing:1px; text-transform:uppercase; }
.cbody { padding:10px; }
.cbody .name { font-size:13px; margin:0 0 4px; }
.cbody .price { font-size:14px; }
</style></head>
<body>
<div class="announce">Free shipping on orders over $45</div>
<nav>
<div class="logo">Egg Press</div>
<div class="navlinks"><span>Birthday</span><span>Wedding</span><span>Blank</span><span>Notepads</span></div>
<div class="cart">Cart · 0</div>
</nav>
<div class="hero">
<div class="hero-copy">
<h1>Letterpress cards<br>with a wink.</h1>
<p>Hand-printed on cotton-rag stock, one witty line at a time — since a basement press in Nashville.</p>
<div class="hero-btn">Shop All Cards</div>
</div>
<div class="hero-art"><div class="card3d c1"></div><div class="card3d c2"></div><div class="card3d c3"></div></div>
</div>
<div class="pills"><span class="on">All</span><span>Birthday</span><span>Blank Inside</span><span>Set of 8</span></div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="sale">Sale</span></div><div class="cbody"><p class="name">Cake Face Birthday</p><p class="price">$5.50</p></div></div>
<div class="card"><div class="thumb t2"></div><div class="cbody"><p class="name">Tide Pool Blank</p><p class="price">$5.00</p></div></div>
<div class="card"><div class="thumb t3"></div><div class="cbody"><p class="name">Ink Well Notepad</p><p class="price">$9.00</p></div></div>
<div class="card"><div class="thumb t4"></div><div class="cbody"><p class="name">Steel Wave Set of 8</p><p class="price">$24.00</p></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #303030; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #303030; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.43; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #303030; color: #f1f1f1;
border: none; border-radius: 9999px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #f1f1f1; color: #303030;
border: 1px solid #303030; border-radius: 9999px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.43; background: transparent; color: #a9a9a9;
border: 1px solid #303030; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #a9a9a9; color: #303030;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family: Arial, Helvetica, 'Helvetica Neue', sans-serif; background:#303030; color:#a9a9a9; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.logo{font-weight:700;font-size:22px;color:#f1f1f1;letter-spacing:.5px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;}
.navlinks .on{color:#f1f1f1;}
.navlinks div{color:#808080;}
.searchpill{width:220px;height:40px;border-radius:9999px;background:#3a3a3a;display:flex;align-items:center;padding:0 16px;font-size:13px;color:#808080;}
.catstrip{display:flex;gap:8px;padding:0 28px 14px;}
.pill{padding:6px 16px;border-radius:9999px;font-size:12px;font-weight:600;}
.pill.on{background:#3a3a3a;color:#f1f1f1;}
.pill.off{color:#808080;}
.hero{margin:0 28px 18px;height:140px;border-radius:8px;background:#3a3a3a;display:flex;align-items:center;padding:0 28px;}
.hero h1{color:#f1f1f1;font-size:24px;font-weight:600;margin:0 0 8px;}
.hero p{color:#999;font-size:14px;margin:0 0 12px;max-width:400px;}
.herobtn{display:inline-block;background:#f1f1f1;color:#303030;font-size:14px;font-weight:600;padding:11px 22px;border-radius:9999px;}
.grid{display:flex;gap:12px;padding:0 28px;}
.card{width:160px;background:#f1f1f1;border-radius:4px;padding:8px;}
.thumb{aspect-ratio:1/1;height:150px;border-radius:4px;margin-bottom:8px;position:relative;overflow:hidden;}
.badge{position:absolute;top:6px;left:6px;background:#a9a9a9;color:#303030;font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:2px 6px;border-radius:2px;}
.ptitle{font-size:14px;font-weight:500;color:#303030;line-height:1.25;height:34px;overflow:hidden;}
.pprice{font-size:15px;color:#303030;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;font-size:13px;color:#808080;}
.footer span{margin-left:16px;color:#a9a9a9;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Jackpot Records</div>
<div class="navlinks"><div class="on">Vinyl</div><div>CD</div><div>Blu-ray</div><div>New Arrivals</div><div>Sell Your Collection</div></div>
<div class="searchpill">Search the crates…</div>
</div>
<div class="catstrip">
<div class="pill on">All Formats</div><div class="pill off">Jazz</div><div class="pill off">Soul</div><div class="pill off">Punk</div><div class="pill off">Soundtracks</div>
</div>
<div class="hero">
<div>
<h1>Fresh Bins, Every Tuesday</h1>
<p>Used vinyl, new pressings, and Blu-ray restocks straight from the back room.</p>
<div class="herobtn">Browse This Week's Drop</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#606060,#1a1a1a)"><span class="badge">New</span></div><div class="ptitle">Late Night Sessions — LP Reissue</div><div class="pprice">$28.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#808080,#303030)"></div><div class="ptitle">Basement Tapes Vol. II</div><div class="pprice">$19.50</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#999,#4a4a4a)"><span class="badge">Used</span></div><div class="ptitle">Coastal Static — Original Pressing</div><div class="pprice">$34.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a9a9a9,#606060)"></div><div class="ptitle">Director's Cut — Blu-ray</div><div class="pprice">$16.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#606060,#303030)"></div><div class="ptitle">Midwest Basement Punk Comp.</div><div class="pprice">$22.00</div></div>
</div>
<div class="footer"><span>© Since the back room</span><span>Sell<span> Shipping</span><span> Contact</span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #111111; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #111111; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; background: #fe8300; color: #000000;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; background: #111111; color: #fe8300;
border: 1px solid #fe8300; border-radius: 4px;
padding: 10px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #3f3f3f; color: #ffffff;
border: 1px solid #454545; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ffffff; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; background: #fffa90; color: #777620;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>InStockTrades</title>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#111111;font-family:Arial,Helvetica,sans-serif;color:#aaaaaa;}
*{box-sizing:border-box;}
.nav{position:absolute;top:0;left:0;width:960px;height:48px;background:#222222;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.logo{color:#fff;font-weight:700;font-size:17px;}
.logo span{color:#fe8300;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#fff;}
.navlinks .active{background:#fe8300;border-radius:4px;padding:6px 12px;}
.navicons{color:#fff;font-size:12px;}
.catstrip{position:absolute;top:48px;left:0;width:960px;height:30px;background:#111111;display:flex;align-items:center;gap:10px;padding:0 28px;}
.ctab{font-size:12px;color:#aaaaaa;padding:4px 10px;}
.ctab.active{background:#fe8300;color:#fff;border-radius:4px;}
.hero{position:absolute;top:78px;left:0;width:960px;height:120px;background:#111111;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.hero h1{color:#fff;font-size:22px;font-weight:600;margin:0;}
.hero p{color:#aaaaaa;font-size:12px;margin:4px 0 0 0;}
.herocta{background:#fe8300;color:#fff;font-size:14px;font-weight:700;border-radius:4px;padding:12px 32px;}
.grid{position:absolute;top:212px;left:28px;width:904px;height:396px;display:flex;flex-wrap:wrap;gap:14px;}
.card{width:214px;height:190px;background:#3f3f3f;border-radius:4px;padding:12px;position:relative;}
.imgbox{width:190px;height:100px;background:#2b2b2b;border-radius:2px;margin-bottom:8px;}
.imgbox.a{background:linear-gradient(135deg,#4a3a2a,#fe8300);}
.imgbox.b{background:linear-gradient(135deg,#2a3a4a,#1cc6e3);}
.imgbox.c{background:linear-gradient(135deg,#3a2a4a,#8a5aff);}
.imgbox.d{background:linear-gradient(135deg,#4a2a2a,#ff0000);}
.imgbox.e{background:linear-gradient(135deg,#2a4a3a,#47801a);}
.imgbox.f{background:linear-gradient(135deg,#4a4a2a,#dad55e);}
.salebadge{position:absolute;top:8px;left:8px;background:#fffa90;color:#777620;font-size:10px;font-weight:700;text-transform:uppercase;border-radius:9999px;padding:2px 8px;}
.title{font-size:13px;color:#fff;margin-bottom:6px;}
.price{font-size:18px;font-weight:700;color:#ff0000;}
.origprice{font-size:12px;color:#aaaaaa;text-decoration:line-through;margin-left:6px;}
</style>
<div class="nav">
<div class="logo">Instocktrades</div>
<div class="navlinks"><span class="active">Comics</span><span>Graphic Novels</span><span>Toys</span><span>Pre-Orders</span></div>
<div class="navicons">🔍 Account · Cart</div>
</div>
<div class="catstrip">
<div class="ctab active">Marvel</div>
<div class="ctab">DC</div>
<div class="ctab">Image</div>
<div class="ctab">Indie</div>
<div class="ctab">Manga</div>
</div>
<div class="hero">
<div><h1>Up to 50% Off New Releases</h1><p>Discount comics, graphic novels, and collectibles shipped weekly.</p></div>
<div class="herocta">Shop Deals</div>
</div>
<div class="grid">
<div class="card">
<div class="salebadge">Save 40%</div>
<div class="imgbox a"></div>
<div class="title">Amazing Spider-Man #12</div>
<div class="price">$2.39<span class="origprice">$3.99</span></div>
</div>
<div class="card">
<div class="imgbox b"></div>
<div class="title">Batman: Year One HC</div>
<div class="price">$19.99<span class="origprice">$29.99</span></div>
</div>
<div class="card">
<div class="salebadge">Save 25%</div>
<div class="imgbox c"></div>
<div class="title">Saga Vol. 1 TPB</div>
<div class="price">$7.49<span class="origprice">$9.99</span></div>
</div>
<div class="card">
<div class="imgbox d"></div>
<div class="title">X-Men #3 Variant</div>
<div class="price">$4.99</div>
</div>
<div class="card">
<div class="salebadge">Save 30%</div>
<div class="imgbox e"></div>
<div class="title">One Piece Vol. 104</div>
<div class="price">$6.99<span class="origprice">$9.99</span></div>
</div>
<div class="card">
<div class="imgbox f"></div>
<div class="title">TMNT Ultimate Figure</div>
<div class="price">$24.99</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f1f6f6; color: #134048;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f1f6f6; color: #134048;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 500; line-height: 1.3; margin: 0; color: #134048; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #6a8a8e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.2px; background: #035c68; color: #ffffff;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.2px; background: #f1f6f6; color: #035c68;
border: 1px solid #035c68; border-radius: 6px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f1f6f6; color: #3d5a5e;
border: 1px solid #bac8ca; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a8a8e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #6fac83; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f1f6f6; font-family:'Figtree',-apple-system,'Helvetica Neue',sans-serif; color:#134048; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#f1f6f6;}
.logo{font-family:'Jazmin','Figtree',sans-serif;font-size:22px;font-weight:600;color:#035c68;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;}
.hero{height:220px;display:flex;align-items:center;padding:0 40px;background:#ffffff;}
.herotext{width:420px;}
h1{font-family:'Jazmin','Figtree',sans-serif;font-size:34px;font-weight:600;letter-spacing:-0.4px;margin:0 0 12px;}
.sub{font-size:16px;color:#3d5a5e;margin:0 0 18px;max-width:340px;line-height:1.5;}
.cta{display:inline-block;background:#035c68;color:#fff;font-size:15px;font-weight:500;padding:12px 24px;border-radius:6px;}
.bottle{width:100px;height:170px;position:relative;margin-left:80px;}
.bottle .cap{position:absolute;left:36px;top:0;width:28px;height:18px;background:#6fac83;border-radius:4px 4px 0 0;}
.bottle .body{position:absolute;left:10px;top:18px;width:80px;height:140px;background:linear-gradient(160deg,#6fac83,#035c68);border-radius:8px;}
.sec{padding:22px 40px 0;}
.sectitle{font-size:20px;font-weight:500;margin:0 0 14px;}
.grid{display:flex;gap:16px;}
.card{width:210px;background:#fff;border-radius:10px;padding:16px;}
.thumb{height:88px;background:#eeeeee;border-radius:6px;margin-bottom:10px;}
.badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;color:#fff;padding:4px 10px;border-radius:9999px;margin-bottom:8px;}
.pname{font-size:15px;font-weight:600;margin:0 0 4px;}
.pprice{font-size:14px;color:#3d5a5e;}
</style>
<div class="nav">
<div class="logo">Puracy</div>
<div class="navlinks"><span>Kitchen</span><span>Laundry</span><span>Baby & Kids</span><span>Ingredients</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Clean that's good for you.</h1>
<p class="sub">Plant-based, hypoallergenic cleaning products safe for kids, pets, and countertops.</p>
<div class="cta">Shop Natural Cleaning</div>
</div>
<div class="bottle"><div class="cap"></div><div class="body"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#6fac83,#035c68)"></div><span class="badge" style="background:#6fac83">Plant-Based</span><div class="pname">All-Purpose Cleaner</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#035c68,#134048)"></div><span class="badge" style="background:#035c68">Free & Clear</span><div class="pname">Natural Dish Soap</div><div class="pprice">$9.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#9bb5b8,#035c68)"></div><span class="badge" style="background:#6fac83">Hypoallergenic</span><div class="pname">Baby Laundry Detergent</div><div class="pprice">$19.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1d1b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1d1b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #1d1d1b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #4a4a4a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #cd4c20; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #ffffff; color: #1d1d1b;
border: 1px solid #1d1d1b; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1d1d1b;
border: 1px solid #d0d1d0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4a4a4a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 1px; background: #1d1d1b; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1d1d1b; box-sizing:border-box;
font-family:'Lato', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:'GTUltra', 'GTUltraFine', Georgia, serif; }
nav { height:64px; border-bottom:1px solid #d0d1d0; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:600; letter-spacing:0.3px; color:#4a4a4a; }
.navlinks span:first-child { color:#cd4c20; }
.crumb { font-size:12px; color:#9b9b9b; padding:8px 36px 0; }
.crumb b { color:#1d1d1b; font-weight:400; }
.body { display:flex; }
.sidebar { width:170px; border-right:1px solid #d0d1d0; padding:14px 16px; flex-shrink:0; }
.sidebar h4 { font-size:11px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; margin:0 0 8px; }
.filt { font-size:12px; color:#4a4a4a; display:flex; align-items:center; gap:6px; margin-bottom:7px; }
.filt .box { width:13px; height:13px; border:1px solid #d0d1d0; display:inline-block; }
.filt.on .box { background:#cd4c20; border-color:#cd4c20; }
.filt.on { color:#1d1d1b; font-weight:600; }
.swrow { display:flex; gap:6px; margin-top:6px; }
.sw { width:16px; height:16px; border-radius:9999px; border:1px solid #d0d1d0; }
.sw.active { border:2px solid #1d1d1b; }
.main { flex:1; padding:14px 28px 0; }
.hero-mini { background:#f7f7f7; padding:20px 24px; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; }
.hero-mini h1 { font-size:26px; font-weight:400; margin:0; max-width:340px; line-height:1.15; }
.hero-mini p { font-size:13px; color:#222; margin:6px 0 0; max-width:300px; }
.btn-primary { background:#cd4c20; color:#fff; border:none; border-radius:4px; padding:12px 22px;
font-size:13px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; height:44px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { border:1px solid #d0d1d0; padding:14px; }
.thumb { aspect-ratio:4/3; background:#f7f7f7; position:relative; margin-bottom:8px; }
.t1::after { content:''; position:absolute; inset:20px; background:linear-gradient(150deg,#e2c3ab,#cd4c20); }
.t2::after { content:''; position:absolute; inset:20px; background:linear-gradient(150deg,#dedede,#9b9b9b); }
.t3::after { content:''; position:absolute; inset:20px; background:linear-gradient(150deg,#1d1d1b,#4a4a4a); }
.badge { position:absolute; top:6px; left:6px; font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
padding:3px 6px; z-index:2; }
.badge.new { background:#1d1d1b; color:#fff; }
.badge.sale { background:#eb340a; color:#fff; }
.card h3 { font-size:14px; font-weight:600; margin:0 0 2px; }
.card .price { font-size:14px; margin:0; }
footer { background:#1d1d1b; color:#9b9b9b; font-size:12px; padding:14px 36px; display:flex;
justify-content:space-between; align-items:center; margin-top:14px; }
footer a { color:#9b9b9b; margin-left:14px; }
</style></head>
<body>
<nav>
<p class="brand serif">Bellroy Work</p>
<div class="navlinks"><span>Work</span><span>Bags</span><span>Desk</span><span>Tech</span></div>
</nav>
<div class="crumb">Home / Work / <b>Desk Organizers</b></div>
<div class="body">
<div class="sidebar">
<h4>Material</h4>
<div class="filt on"><span class="box"></span>Leather</div>
<div class="filt"><span class="box"></span>Fabric</div>
<div class="filt"><span class="box"></span>Recycled Nylon</div>
<h4 style="margin-top:14px;">Color</h4>
<div class="swrow"><div class="sw active" style="background:#cd4c20;"></div><div class="sw" style="background:#1d1d1b;"></div><div class="sw" style="background:#9b9b9b;"></div></div>
<h4 style="margin-top:14px;">Price</h4>
<div class="filt"><span class="box"></span>$50–$100</div>
<div class="filt on"><span class="box"></span>$100–$150</div>
</div>
<div class="main">
<div class="hero-mini">
<div>
<h1 class="serif">Desk carry, engineered plainly</h1>
<p>Pouches, pencil cases, and leather organizers built to disappear on a clean desk.</p>
</div>
<button class="btn-primary">Shop Desk</button>
</div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge new">New</span></div>
<h3>Leather Desk Pouch</h3>
<p class="price">$99</p>
</div>
<div class="card">
<div class="thumb t2"><span class="badge sale">Sale</span></div>
<h3>Recycled Pencil Case</h3>
<p class="price">$59</p>
</div>
<div class="card">
<div class="thumb t3"></div>
<h3>Tech Kit Organizer</h3>
<p class="price">$119</p>
</div>
</div>
</div>
</div>
<footer>
<span>© Bellroy Work</span>
<div><a href="#">Products</a><a href="#">Support</a><a href="#">Legal</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #642fe9; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #642fe9; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b49cf0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #714fd8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #642fe9; color: #ffffff;
border: 1px solid #714fd8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #642fe9; color: #f5f5f5;
border: 1px solid #7b4feb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b49cf0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6634e6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box; font-family:"Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
.phone-wrap { display:flex; justify-content:center; height:100%; background:#edeef0; padding:20px 0; }
.phone { width:390px; background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,0.15); }
.topbar { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; }
.brand { font-weight:800; font-size:17px; color:#642fe9; }
.search { flex:1; margin:0 12px; height:34px; border-radius:8px; background:#f2f3f5; }
.nav { display:flex; gap:16px; padding:0 16px 10px; font-size:15px; font-weight:400; }
.nav span:first-child { color:#000; }
.nav span:not(:first-child) { color:#aaafbb; }
.chips { display:flex; gap:8px; padding:0 16px 14px; }
.chip { background:#fff; box-shadow:rgba(27,32,42,0.16) 0px 2px 6px -2px; border-radius:8px; padding:8px 14px; font-size:13px; }
.banner { margin:0 16px 14px; height:110px; border-radius:16px; background:linear-gradient(135deg,#714fd8,#642fe9);
display:flex; align-items:flex-end; padding:12px; position:relative; }
.promo { background:#000; color:#fff; font-size:14px; font-weight:600; border-radius:8px; padding:6px 12px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 16px 20px; }
.prod { background:#fff; border-radius:16px; }
.thumb { height:130px; border-radius:16px; }
.p1 .thumb { background:linear-gradient(150deg,#f0d7e6,#e54d76); }
.p2 .thumb { background:linear-gradient(150deg,#d7e0f0,#642fe9); }
.pname { font-size:13px; padding:8px 4px 2px; }
.price-row { display:flex; align-items:center; gap:6px; padding:0 4px 10px; }
.orig { font-size:11px; color:#aaafbb; text-decoration:line-through; }
.disc { font-size:14px; font-weight:600; color:#714fd8; }
.final { font-size:14px; font-weight:600; }
</style></head>
<body>
<div class="phone-wrap">
<div class="phone">
<div class="topbar"><div class="brand">Queenit</div><div class="search"></div><div>👤</div></div>
<div class="nav"><span>For You</span><span>Life</span><span>Beauty</span><span>Men</span></div>
<div class="chips"><div class="chip">Smart Shopping Tips</div><div class="chip">₩20,000 Coupon</div></div>
<div class="banner"><div class="promo">Jewelry Sale up to 50% off</div></div>
<div class="grid2">
<div class="prod p1"><div class="thumb"></div><div class="pname">Knit Cardigan</div><div class="price-row"><span class="orig">89,000</span><span class="disc">41%</span><span class="final">52,000</span></div></div>
<div class="prod p2"><div class="thumb"></div><div class="pname">Pleated Skirt</div><div class="price-row"><span class="orig">65,000</span><span class="disc">63%</span><span class="final">24,000</span></div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fed05f; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fed05f; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6734; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffc533; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fed05f; color: #000000;
border: 1px solid #ffc533; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fed05f; color: #111111;
border: 1px solid #d8b153; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6734; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fece58; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { height:64px; flex:0 0 64px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #e6e6e6; background:#ffffff; }
.brand { font-size:18px; font-weight:700; letter-spacing:-0.4px; color:#212121; margin:0; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#333333; letter-spacing:-0.4px; }
.navcta { display:flex; gap:10px; }
.btn { border-radius:8px; font-weight:700; letter-spacing:-0.4px; font-size:14px; white-space:nowrap; border:1px solid transparent; }
.btn-yellow { background:#fed05f; color:#000000; border-color:#ffc533; padding:8px 18px; }
.btn-outline { background:#ffffff; color:#000000; border-color:#cccccc; padding:8px 18px; }
.btn-dark { background:#000000; color:#ffffff; padding:8px 18px; }
.hero { flex:0 0 auto; padding:26px 40px 18px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; background:#fafafa; }
.badge { background:#000000; color:#ffffff; border-radius:999px; padding:3px 12px; font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }
.hero h1 { font-size:32px; font-weight:700; line-height:1.3; letter-spacing:-0.6px; margin:0; color:#212121; max-width:640px; }
.hero p { font-size:14px; color:#333333; margin:0; max-width:520px; line-height:1.5; }
.herobtns { display:flex; gap:10px; margin-top:4px; }
.herobtns .btn-yellow, .herobtns .btn-outline { padding:10px 24px; font-size:15px; }
.steps { flex:1 1 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:22px 40px; align-content:center; }
.step { position:relative; border-radius:8px; padding:18px 16px 22px; border:1px solid #e6e6e6; background:#ffffff; }
.step.active { background:#f5f5f5; }
.stepnum { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px;
background:#fed05f; border:1px solid #ffc533; color:#000; font-weight:700; font-size:12px; margin-bottom:10px; }
.step h3 { font-size:16px; font-weight:700; margin:0 0 6px; color:#212121; letter-spacing:-0.4px; }
.step p { font-size:12.5px; color:#474747; margin:0; line-height:1.45; }
footer { flex:0 0 108px; display:flex; gap:16px; padding:0 40px 18px; }
.banner { flex:1; border-radius:12px; padding:16px 22px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.banner-grey { background:#f5f5f5; border:1px solid #f0f0f0; }
.banner-yellow { background:#fed05f; border:1px solid #ffb90a; }
.banner h4 { font-size:15px; font-weight:700; margin:0 0 3px; color:#212121; letter-spacing:-0.4px; }
.banner span { font-size:11.5px; color:#707070; }
.banner-yellow span { color:#5c4b12; }
.bannerbtn { border:none; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:700; white-space:nowrap; }
.bannerbtn.outline { background:#ffffff; border:1px solid #cccccc; color:#000; }
.bannerbtn.dark { background:#000000; color:#fff; }
</style></head>
<body>
<nav>
<p class="brand">Modusign</p>
<div class="navlinks"><span>Features</span><span>Pricing</span><span>Customers</span><span>Blog</span></div>
<div class="navcta">
<button class="btn btn-outline">Talk to sales</button>
<button class="btn btn-yellow">Start free trial</button>
</div>
</nav>
<section class="hero">
<span class="badge">Korea's #1 e-signature</span>
<h1>Everywhere a signature is needed,<br>Modusign</h1>
<p>From drafting to signing to filing — one product covers the entire contract lifecycle.</p>
<div class="herobtns">
<button class="btn btn-outline">Talk to sales</button>
<button class="btn btn-yellow">Start free trial</button>
</div>
</section>
<section class="steps">
<div class="step active"><span class="stepnum">1</span><h3>Prepare</h3><p>Load a standard template or upload a PDF and mark where signatures go.</p></div>
<div class="step"><span class="stepnum">2</span><h3>Request</h3><p>Send signers a link — they can sign instantly, no app install required.</p></div>
<div class="step"><span class="stepnum">3</span><h3>Sign</h3><p>Once every party has signed, a legally binding contract is issued instantly.</p></div>
<div class="step"><span class="stepnum">4</span><h3>Manage</h3><p>Search completed contracts and confirm history with an audit-trail certificate.</p></div>
</section>
<footer>
<div class="banner banner-grey">
<div><h4>Need a walkthrough first?</h4><span>Our sales team will prepare a tailored quote for you</span></div>
<button class="bannerbtn outline">Talk to sales</button>
</div>
<div class="banner banner-yellow">
<div><h4>Start right now</h4><span>14-day free trial, no credit card needed</span></div>
<button class="bannerbtn dark">Start free trial</button>
</div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e1e1e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #1e1e1e;
border: 1px solid #1e1e1e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdbdb; color: #1e1e1e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#1E1E1E; color:#FFFFFF; box-sizing:border-box; font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; padding:22px 32px 0; }
.navrow { display:flex; justify-content:space-between; align-items:flex-start; }
.h1 { font-size:28px; font-weight:700; letter-spacing:-0.4pt; }
.sub { font-size:12px; color:#B3B3B3; margin-top:4px; }
.avatar32 { width:32px; height:32px; border-radius:50%; background:#A259FF; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; }
.searchbar { margin-top:16px; height:36px; background:#2C2C2C; border-radius:6px; display:flex; align-items:center; padding:0 12px; color:#757575; font-size:14px; gap:8px; }
.secH { font-size:17px; font-weight:700; margin:20px 0 12px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.filecard { background:#2C2C2C; border-radius:6px; overflow:hidden; }
.thumb { aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; }
.thumb .initial { color:#fff; font-weight:700; font-size:28px; }
.fname { font-size:14px; font-weight:500; padding:8px 8px 0; }
.fmeta { font-size:12px; color:#757575; padding:2px 8px 8px; }
.projrow { display:flex; align-items:center; padding:12px 4px; border-top:1px solid #2C2C2C; }
.cube32 { width:32px; height:32px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; color:#fff; margin-right:12px; }
.projmain { flex:1; }
.projmain .n { font-size:15px; font-weight:500; }
.projmain .c { font-size:12px; color:#757575; margin-top:2px; }
</style>
</head>
<body>
<div class="stage">
<div style="font-size:12px;font-weight:600;color:#A259FF;margin-bottom:8px">Figma (iOS)</div>
<div class="navrow"><div><div class="h1">Recents</div><div class="sub">Personal · 4 teams</div></div><div class="avatar32">S</div></div>
<div class="searchbar">🔍 Search files and projects</div>
<div class="secH">Recently viewed</div>
<div class="grid">
<div class="filecard"><div class="thumb" style="background:linear-gradient(135deg,#1ABCFE,#0D99FF)"></div><div class="fname">Design System v3</div><div class="fmeta">Edited 2h ago · 4 collaborators</div></div>
<div class="filecard"><div class="thumb" style="background:#F24E1E"><span class="initial">M</span></div><div class="fname">Marketing Site</div><div class="fmeta">Edited 1d ago · 2 collaborators</div></div>
<div class="filecard"><div class="thumb" style="background:linear-gradient(135deg,#A259FF,#0ACF83)"></div><div class="fname">Onboarding Flows</div><div class="fmeta">Edited 3d ago · 6 collaborators</div></div>
<div class="filecard"><div class="thumb" style="background:#0ACF83"><span class="initial">Q</span></div><div class="fname">Q3 Pitch Deck</div><div class="fmeta">Edited 5d ago · 1 collaborator</div></div>
</div>
<div class="secH">Projects</div>
<div class="projrow"><div class="cube32" style="background:#FF7262">P</div><div class="projmain"><div class="n">Product Design</div><div class="c">12 files</div></div><div style="color:#757575">›</div></div>
<div class="projrow"><div class="cube32" style="background:#1ABCFE">B</div><div class="projmain"><div class="n">Brand & Marketing</div><div class="c">8 files</div></div><div style="color:#757575">›</div></div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0d9373; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0d9373; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8dc9ba; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d0d0d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d9373; color: #0d0d0d;
border: 1px solid #0d0d0d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0d9373; color: #f5f5f5;
border: 1px solid #32a388; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8dc9ba; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0d7e63; color: #0d0d0d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0d0d0d; box-sizing:border-box;
font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.glow { position:absolute; z-index:0; left:50%; top:-180px; width:900px; height:420px;
transform:translateX(-50%); border-radius:50%;
background:radial-gradient(closest-side, rgba(24,226,153,0.22), rgba(24,226,153,0.06) 60%, rgba(255,255,255,0) 80%); }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid rgba(0,0,0,0.05); background:rgba(255,255,255,0.7); }
.brand { font-size:16px; font-weight:600; letter-spacing:-0.2px; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; color:#0d0d0d; }
.navlinks span { opacity:0.65; }
.btn-primary { background:#0d0d0d; color:#ffffff; border:none; border-radius:9999px;
padding:8px 20px; font-weight:500; font-size:14px; box-shadow:rgba(0,0,0,0.06) 0px 1px 2px; }
.btn-ghost { background:#ffffff; color:#0d0d0d; border:1px solid rgba(0,0,0,0.08); border-radius:9999px;
padding:7px 18px; font-weight:500; font-size:14px; }
.hero { position:relative; z-index:2; padding:34px 32px 20px; text-align:center;
display:flex; flex-direction:column; align-items:center; gap:12px; }
.badge { background:#d4fae8; color:#0fa76e; border-radius:9999px; padding:4px 12px;
font-size:12px; font-weight:500; letter-spacing:0.03em; }
.hero h1 { font-size:38px; font-weight:600; letter-spacing:-0.9px; line-height:1.1; margin:0; max-width:620px; }
.hero p { font-size:15px; color:#666666; margin:0; max-width:480px; line-height:1.5; }
.row { display:flex; gap:10px; align-items:center; }
.split { position:relative; z-index:2; display:grid; grid-template-columns:260px 1fr; gap:20px;
padding:8px 32px 20px; height:322px; }
.sidebar { border:1px solid rgba(0,0,0,0.05); border-radius:16px; background:#fafafa; padding:18px;
display:flex; flex-direction:column; gap:4px; }
.sidebar .label { font-size:11px; font-weight:500; letter-spacing:0.05em; text-transform:uppercase;
color:#888888; margin:10px 0 6px; }
.sidebar .item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; font-size:13px; font-weight:500; color:#333333; }
.sidebar .item.active { background:#ffffff; color:#0d0d0d; box-shadow:rgba(0,0,0,0.03) 0px 2px 4px; border:1px solid rgba(0,0,0,0.05); }
.dot { width:6px; height:6px; border-radius:50%; background:#18e299; flex-shrink:0; }
.panel { border:1px solid rgba(0,0,0,0.05); border-radius:24px; background:#ffffff; padding:28px;
box-shadow:rgba(0,0,0,0.03) 0px 2px 4px; display:flex; flex-direction:column; gap:14px; }
.panel .kicker { font-size:12px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:#0fa76e; }
.panel h2 { font-size:22px; font-weight:600; letter-spacing:-0.3px; margin:0; }
.panel p.desc { font-size:14px; color:#666666; margin:0; max-width:520px; line-height:1.5; }
.code { background:#0d0d0d; border-radius:16px; padding:16px 18px; margin-top:auto; }
.code .l { font-family:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size:12px; letter-spacing:0.02em;
color:#8effcf; line-height:1.9; }
.code .l .k { color:#ffffff; opacity:0.5; }
.code .l .g { color:#18e299; }
footer { position:relative; z-index:2; border-top:1px solid rgba(0,0,0,0.05); padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#888888; }
</style></head>
<body>
<div class="glow"></div>
<nav>
<p class="brand">Mintlify</p>
<div class="navlinks"><span>Docs</span><span>Components</span><span>API Reference</span><span>Changelog</span></div>
<div class="row"><button class="btn-ghost">Log in</button><button class="btn-primary">Get started</button></div>
</nav>
<section class="hero">
<span class="badge">New — AI-powered search</span>
<h1>The intelligent knowledge platform</h1>
<p>Beautiful documentation your users will actually read — and your team will actually enjoy writing.</p>
<div class="row">
<button class="btn-primary">Get started</button>
<button class="btn-ghost">Request demo</button>
</div>
</section>
<section class="split">
<div class="sidebar">
<div class="label">Getting Started</div>
<div class="item active"><span class="dot"></span>Quickstart</div>
<div class="item"><span class="dot" style="background:#e5e5e5"></span>Installation</div>
<div class="label">Guides</div>
<div class="item"><span class="dot" style="background:#e5e5e5"></span>Authentication</div>
<div class="item"><span class="dot" style="background:#e5e5e5"></span>Custom domains</div>
<div class="item"><span class="dot" style="background:#e5e5e5"></span>AI Search</div>
</div>
<div class="panel">
<span class="kicker">Quickstart</span>
<h2>Ship docs your team is proud of</h2>
<p class="desc">Write in MDX, preview instantly, and deploy on a custom domain — no infra to manage. Every page ships with built-in AI search out of the box.</p>
<div class="code">
<div class="l"><span class="k">$</span> npx mintlify dev</div>
<div class="l"><span class="g">✓</span> Docs running at localhost:3000</div>
<div class="l"><span class="k">$</span> mintlify deploy --domain docs.acme.dev</div>
</div>
</div>
</section>
<footer>
<span>© Mintlify</span>
<span>Mintlify · Docs · Pricing · Changelog</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 400; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0.05em; background: #111111; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0.05em; background: #ffffff; color: #111111;
border: 1px solid #111111; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.1em; background: #f5f5f5; color: #666666;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; font-family:'GT America','Helvetica Neue',Arial,sans-serif; color:#111111;
}
*{box-sizing:border-box;}
.nav{height:64px; display:flex; align-items:center; justify-content:center; position:relative; border-bottom:1px solid #dddddd;}
.logo{font-size:20px; font-weight:500; letter-spacing:3px; text-transform:uppercase;}
.navlinks{position:absolute; left:32px; display:flex; gap:24px; font-size:12px; color:#333333; letter-spacing:.3px;}
.navicons{position:absolute; right:32px; font-size:12px; color:#666666; letter-spacing:.3px;}
.hero{padding:34px 60px 24px; text-align:center; border-bottom:1px solid #eeeeee;}
.hero .eyebrow{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#666666; margin-bottom:14px;}
.hero h1{font-size:40px; font-weight:300; line-height:1.15; margin:0 auto 12px; max-width:600px;}
.hero p{font-size:13px; color:#666666; line-height:1.6; max-width:460px; margin:0 auto;}
.section{padding:22px 60px 0;}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
.card{border-right:1px solid #eeeeee; padding:0 20px 0 0; margin-right:20px;}
.card:last-child{border-right:none; margin-right:0; padding-right:0;}
.thumb{height:130px; background:#f4f4f4; margin-bottom:10px; position:relative;}
.t1::before{content:''; position:absolute; left:20%; top:20%; right:20%; bottom:20%; background:#333333;}
.t2::before{content:''; position:absolute; left:15%; top:35%; right:15%; bottom:15%; background:#999999;}
.t3::before{content:''; position:absolute; left:30%; top:15%; right:30%; bottom:35%; background:#111111;}
.pname{font-size:13px; font-weight:500; margin-bottom:2px;}
.pmeta{font-size:11px; color:#666666;}
.footer{position:absolute; bottom:0; left:0; right:0; background:#111111; color:#ffffff; font-size:10px; text-align:center; padding:8px 0; letter-spacing:.5px;}
</style>
<div class="nav">
<div class="navlinks"><span>Artists</span><span>Exhibitions</span><span>Locations</span></div>
<div class="logo">Hauser And Wirth</div>
<div class="navicons">Search · Menu</div>
</div>
<div class="hero">
<div class="eyebrow">Current Exhibition</div>
<h1>Form, Silence, and the Space Between</h1>
<p>A survey of new work exploring material weight and negative space, on view now across our galleries.</p>
</div>
<div class="section">
<div class="grid">
<div class="card"><div class="thumb t1"></div><div class="pname">Untitled (Composition VII)</div><div class="pmeta">Bronze, 2026</div></div>
<div class="card"><div class="thumb t2"></div><div class="pname">Field Studies No. 4</div><div class="pmeta">Oil on canvas, 2026</div></div>
<div class="card"><div class="thumb t3"></div><div class="pname">Interval</div><div class="pmeta">Mixed media, 2026</div></div>
</div>
</div>
<div class="footer">Hauser And Wirth — Zürich · London · New York · Los Angeles · Hong Kong</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #141416;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #141416;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 400; line-height: 1.3; letter-spacing: 0.02em; margin: 0; color: #141416; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.3; letter-spacing: 0.05em; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 0.12em; background: #ff2626; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 0.12em; background: #ffffff; color: #141416;
border: 1px solid #ff2626; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #141416;
border: 1px solid #dedede; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.25; letter-spacing: 0.1em; background: #ff2626; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Gill Sans','Gill Sans MT',Calibri,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.announce{height:30px;background:#141416;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;letter-spacing:0.5px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-size:20px;font-weight:400;letter-spacing:1px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:400;letter-spacing:1px;text-transform:uppercase;font-family:'Cabin','Gill Sans',sans-serif;}
.hero{height:210px;background:#f5f5f5;display:flex;align-items:center;padding:0 32px;}
.h1{font-size:34px;font-weight:300;letter-spacing:0.03em;line-height:1.2;margin:0 0 12px;width:400px;}
.sub{font-family:Lato,sans-serif;font-size:14px;color:#3a3a3a;margin:0 0 16px;width:340px;}
.btn{display:inline-block;background:#ff2626;color:#fff;font-family:Cabin,sans-serif;font-size:13px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:14px 30px;}
.section{padding:18px 32px 0;}
.stitle{font-size:24px;font-weight:400;letter-spacing:0.02em;border-bottom:1px solid #dedede;padding-bottom:10px;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:150px;position:relative;}
.badge{position:absolute;top:6px;left:6px;font-family:Cabin,sans-serif;font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#fff;padding:4px 8px;background:#ff2626;}
.thumb{height:100px;background:#f5f5f5;margin-bottom:8px;}
.desig{font-family:Lato,sans-serif;font-size:11px;color:#3a3a3a;margin-bottom:2px;}
.pname{font-family:Cabin,sans-serif;font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:6px;}
.pprice{font-family:Cabin,sans-serif;font-size:16px;font-weight:700;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#141416;color:#f5f5f5;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-family:Lato,sans-serif;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">Free UK Shipping On Orders Over £150</div>
<div class="nav">
<div class="logo">Susan Caplan</div>
<div class="navlinks"><div>Brooches</div><div>Necklaces</div><div>Earrings</div><div>Archive</div></div>
</div>
<div class="hero">
<div>
<div class="h1">Vintage, authenticated, worn again.</div>
<div class="sub">Signed costume jewellery from decades past, catalogued like a collector's ledger.</div>
<div class="btn">Shop The Archive</div>
</div>
</div>
<div class="section">
<div class="stitle">New This Week</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(150deg,#dfdfdf,#bbbbbb);"></div><div class="desig">Maison Gripoix, 1960s</div><div class="pname">Faux Pearl Clip</div><div class="pprice">£145</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#f5f5f5,#f49a13);"></div><div class="desig">Trifari, 1950s</div><div class="pname">Enamel Brooch</div><div class="pprice">£220</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#dfdfdf,#141416);"></div><div class="desig">Miriam Haskell, 1970s</div><div class="pname">Cascade Necklace</div><div class="pprice">£310</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#bbbbbb,#dfdfdf);"></div><div class="desig">Chanel, 1980s</div><div class="pname">Gilt Chain Bracelet</div><div class="pprice">£480</div></div>
</div>
</div>
<div class="footer"><span>© Vintage Costume Jewellery, Authenticated</span><span>Shipping · Provenance · Care</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.35; letter-spacing: -0.2px; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #545454; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0.3px; background: #21385c; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0.3px; background: #f6f6f6; color: #141414;
border: 1px solid #21385c; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f6f6f6; color: #222222;
border: 1px solid #bebebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #545454; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #1b9500; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Jono Pandolfi Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Inter',sans-serif; background:#f6f6f6; color:#141414; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #f6f6f6;background:#f6f6f6;box-shadow:0 1px 0 #e2e2e2;}
.logo{font-size:19px;font-weight:600;color:#21385c;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.4px;}
.navlinks .active{color:#21385c;border-bottom:2px solid #21385c;padding-bottom:4px;}
.icons{display:flex;gap:14px;color:#545454;}
.hero{padding:26px 36px;text-align:center;}
.hero h1{font-size:30px;font-weight:600;letter-spacing:-.4px;margin:0 0 8px;}
.hero p{font-size:14px;color:#545454;margin:0 0 14px;}
.btn{display:inline-block;background:#21385c;color:#fff;padding:12px 26px;border-radius:8px;font-size:14px;font-weight:500;letter-spacing:.3px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:0 36px;}
.card{background:#fff;border-radius:12px;padding:14px;position:relative;}
.imgbox{background:#dedede;border-radius:8px;height:110px;}
.badge{position:absolute;top:10px;left:10px;border-radius:999px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;background:#c72e2f;color:#fff;}
.badge.new{background:#1b9500;}
.title{font-size:14px;font-weight:600;margin-top:10px;}
.price{font-size:13px;color:#222;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Jono Pandolfi</div>
<div class="navlinks"><span class="active">Dinnerware</span><span>Serveware</span><span>Custom</span><span>Studio</span></div>
<div class="icons">◎ ⛃</div>
</div>
<div class="hero">
<h1>Handcrafted ceramics<br>for the modern table.</h1>
<p>Wheel-thrown dinnerware, made piece by piece in a studio that has served chefs for two decades.</p>
<div class="btn">Shop Collections</div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#e8e2d5,#c2b596);"><div class="badge new">New</div></div>
<div class="title">Dinner Plate — Ash</div>
<div class="price">$42.00</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#dedcda,#b6b2ac);"></div>
<div class="title">Ceramic Serving Bowl</div>
<div class="price">$68.00</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#e0d6c8,#b8a488);"><div class="badge">Sale</div></div>
<div class="title">Coupe Bowl — Slate</div>
<div class="price">$36.00</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#d9d2c4,#a89a7c);"></div>
<div class="title">Mug — Natural Glaze</div>
<div class="price">$24.00</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.18; letter-spacing: -0.25px; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.38; margin: 0; color: #616161; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: 0.6px; background: #b71c1c; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: 0.6px; background: #ffffff; color: #b71c1c;
border: 1px solid #b71c1c; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #212121;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #616161; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #b71c1c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:'Montserrat',Arial,sans-serif; color:#212121; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#3d4752;}
.logo{font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;color:#fff;}
.navlinks{display:flex;gap:18px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;color:#cfd6dc;}
.search{background:#fff;color:#616161;font-size:11px;padding:7px 14px;border-radius:4px;}
.hero{height:150px;display:flex;align-items:center;padding:0 40px;background:linear-gradient(120deg,#3d4752,#2c6372);}
.h1{font-size:26px;font-weight:700;line-height:1.25;color:#fff;margin:0 0 8px;max-width:420px;}
.sub{font-family:'Merriweather',Georgia,serif;font-size:13px;color:#dfe6ea;line-height:1.5;margin:0;max-width:420px;}
.badgerow{display:flex;gap:8px;padding:14px 40px 0;}
.badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;padding:5px 10px;border-radius:4px;}
.badge.clear{background:#bf360c;color:#fff;}
.badge.avail{background:#b2ebf2;color:#006064;}
.badge.promo{background:#ff6d00;color:#fff;}
.grid{display:flex;gap:12px;padding:14px 40px 0;}
.card{width:145px;background:#fff;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;}
.thumb{height:76px;}
.cbody{padding:9px 10px;}
.ctitle{font-size:12px;font-weight:600;margin:0 0 4px;line-height:1.3;}
.cprice{font-size:13px;font-weight:700;color:#b71c1c;margin:0;}
.unit{font-size:10px;color:#616161;margin-left:2px;font-weight:400;}
.sku{font-family:'barcode-39',Arial,sans-serif;font-size:9px;color:#838a95;margin:2px 0 0;letter-spacing:0.5px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#3d4752;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#cfd6dc;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Paper Mart</div>
<div class="navlinks"><span>Mailers</span><span>Tissue Paper</span><span>Ribbon</span><span>Boxes</span><span>Bags</span></div>
<div class="search">Search 40,000+ SKUs</div>
</div>
<div class="hero">
<div>
<div class="h1">Packaging, priced by the case.</div>
<div class="sub">Corrugated mailers, tissue paper, and polymailers sourced for procurement, decorators, and small manufacturers.</div>
</div>
</div>
<div class="badgerow">
<div class="badge clear">Clearance</div>
<div class="badge avail">In Stock</div>
<div class="badge promo">Bulk Discount</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b71c1c,#3d4752)"></div><div class="cbody"><div class="ctitle">Kraft Corrugated Mailer 9x6x3</div><div class="cprice">$0.42<span class="unit">/unit</span></div><div class="sku">*PM-90603*</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#006064,#3d4752)"></div><div class="cbody"><div class="ctitle">Tissue Paper, White, 20x30</div><div class="cprice">$0.09<span class="unit">/sheet</span></div><div class="sku">*PM-TW2030*</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#bf360c,#3d4752)"></div><div class="cbody"><div class="ctitle">Poly Mailer, 10x13, Clearance</div><div class="cprice">$0.06<span class="unit">/unit</span></div><div class="sku">*PM-PM1013*</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00acc1,#3d4752)"></div><div class="cbody"><div class="ctitle">Satin Ribbon, 5/8" Roll</div><div class="cprice">$2.19<span class="unit">/roll</span></div><div class="sku">*PM-RB0058*</div></div></div>
</div>
<div class="footer"><span>Case & Bulk Pricing Available</span><span>Ships Same Business Day</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 300; line-height: 1; letter-spacing: -0.25px; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 1.5px; background: #1c1c1c; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 1.5px; background: #ffffff; color: #1c1c1c;
border: 1px solid #1c1c1c; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #1c1c1c;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 2px; background: #f3f3f3; color: #6b6b6b;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#1c1c1c; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e2e2e2;}
.logo{font-size:20px;font-weight:300;letter-spacing:0.5px;}
.navlinks{display:flex;gap:28px;font-size:14px;color:#1c1c1c;}
.navlinks span:first-child{color:#6b6b6b;border-bottom:2px solid #1c1c1c;padding-bottom:24px;}
.hero{height:280px;background:#f3f3f3;display:flex;align-items:center;padding:0 40px;}
.herotext{width:420px;}
.spec{font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#6b6b6b;margin-bottom:14px;}
h1{font-size:44px;font-weight:300;letter-spacing:-0.5px;margin:0 0 14px;line-height:1.1;}
.sub{font-size:14px;color:#3a3a3a;line-height:1.6;margin:0 0 24px;max-width:340px;}
.cta{display:inline-block;background:#1c1c1c;color:#fff;font-size:13px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;padding:14px 28px;}
.machine{width:220px;height:190px;position:relative;margin-left:60px;}
.machine .body{position:absolute;left:60px;top:20px;width:100px;height:150px;background:linear-gradient(180deg,#2b2b2b,#111);}
.machine .gauge{position:absolute;left:80px;top:40px;width:60px;height:60px;border-radius:50%;background:#ffffff;border:6px solid #888;}
.machine .grouphead{position:absolute;left:75px;top:110px;width:70px;height:14px;background:#b8b8b8;}
.spectable{display:flex;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;margin:0 40px;}
.speccell{flex:1;text-align:center;padding:14px 8px;border-right:1px solid #e2e2e2;}
.speccell:last-child{border-right:none;}
.speclabel{font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#6b6b6b;}
.specvalue{font-size:22px;font-weight:300;color:#1c1c1c;margin-top:4px;}
.grid{display:flex;gap:0;padding:24px 40px 0;}
.card{width:220px;background:#f3f3f3;padding:20px;margin-right:20px;}
.model{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#6b6b6b;margin-bottom:10px;}
.thumb{height:100px;background:#ffffff;margin-bottom:12px;position:relative;}
.thumb:before{content:'';position:absolute;left:80px;top:15px;width:50px;height:70px;background:linear-gradient(180deg,#3a3a3a,#111);}
.ptitle{font-size:16px;font-weight:400;margin-bottom:6px;}
.pprice{font-size:20px;font-weight:300;}
</style>
<div class="nav">
<div class="logo">Profitec</div>
<div class="navlinks"><span>Machines</span><span>Grinders</span><span>Accessories</span><span>Dealers</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="spec">Dual PID · E61 Grouphead</div>
<h1>Engineered for Altitude.</h1>
<p class="sub">Hand-finished stainless steel espresso machines built like precision instruments, not kitchen appliances.</p>
<div class="cta">Compare Models</div>
</div>
<div class="machine"><div class="body"></div><div class="gauge"></div><div class="grouphead"></div></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Boiler</div><div class="specvalue">Dual</div></div>
<div class="speccell"><div class="speclabel">Water Tank</div><div class="specvalue">2.8L</div></div>
<div class="speccell"><div class="speclabel">Pump</div><div class="specvalue">9 Bar</div></div>
<div class="speccell"><div class="speclabel">Power</div><div class="specvalue">1200W</div></div>
</div>
<div class="grid">
<div class="card"><div class="model">Pro 300</div><div class="thumb"></div><div class="ptitle">Single Boiler</div><div class="pprice">€899</div></div>
<div class="card"><div class="model">Pro 500</div><div class="thumb"></div><div class="ptitle">Heat Exchanger</div><div class="pprice">€1,690</div></div>
<div class="card"><div class="model">Pro 800</div><div class="thumb"></div><div class="ptitle">Dual Boiler</div><div class="pprice">€2,940</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2f3336; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #2f3336; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #080809; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#E7E9EA; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { width:100%; height:100%; display:flex; flex-direction:column; position:relative; }
.topnav { height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; flex-shrink:0; }
.avatar-sm { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#1D9BF0,#00BA7C); }
.xlogo { font-size:22px; font-weight:800; color:#FFFFFF; }
.grok { width:24px; height:24px; }
.filterbar { height:44px; display:flex; align-items:stretch; padding:0 16px; flex-shrink:0; }
.ftab { flex:0 0 auto; margin-right:28px; display:flex; align-items:center; font-size:15px; font-weight:700; color:#71767B; position:relative; }
.ftab.active { color:#E7E9EA; }
.ftab.active::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:#1D9BF0; border-radius:3px; }
.feed { flex:1; min-height:0; overflow:hidden; }
.post { display:flex; padding:11px 16px; border-bottom:1px solid #2F3336; }
.post .av { width:32px; height:32px; border-radius:50%; flex-shrink:0; }
.av1 { background:linear-gradient(135deg,#7856FF,#1D9BF0); }
.av2 { background:linear-gradient(135deg,#00BA7C,#1D9BF0); }
.av3 { background:linear-gradient(135deg,#F91880,#7856FF); }
.pbody { margin-left:12px; flex:1; min-width:0; }
.prow { display:flex; align-items:center; gap:4px; }
.pname { font-size:15px; font-weight:700; color:#E7E9EA; }
.pverify { width:15px; height:15px; border-radius:50%; background:#1D9BF0; display:inline-flex; align-items:center; justify-content:center; }
.pverify svg { width:9px; height:9px; }
.phandle { font-size:15px; color:#71767B; margin-left:2px; }
.pmore { margin-left:auto; color:#71767B; font-size:15px; }
.ptext { font-size:15px; line-height:1.33; color:#E7E9EA; margin-top:2px; }
.ptext .link { color:#1D9BF0; }
.actions { display:flex; align-items:center; gap:0; margin-top:8px; max-width:420px; justify-content:space-between; }
.act { display:flex; align-items:center; gap:6px; color:#71767B; font-size:13px; }
.act svg { width:17px; height:17px; }
.act.reply:hover, .act.reply.on { color:#1D9BF0; }
.act.repost.on { color:#00BA7C; }
.act.like.on { color:#F91880; }
.tabbar { height:49px; display:flex; align-items:center; justify-content:space-around; border-top:1px solid #2F3336; flex-shrink:0; background:rgba(0,0,0,0.85); }
.tabbar svg { width:26px; height:26px; }
.tab.active svg { color:#E7E9EA; }
.tab svg { color:#71767B; }
.fab { position:absolute; right:16px; bottom:65px; width:56px; height:56px; border-radius:50%; background:#FFFFFF;
display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,0.4); }
.fab svg { width:24px; height:24px; }
</style></head>
<body>
<div class="wrap">
<div class="topnav">
<div class="avatar-sm"></div>
<p class="xlogo">X (Twitter) (iOS)</p>
<svg class="grok" viewBox="0 0 24 24" fill="none" stroke="#E7E9EA" stroke-width="1.6"><path d="M12 3l2.2 5.8L20 11l-5.8 2.2L12 19l-2.2-5.8L4 11l5.8-2.2z"/></svg>
</div>
<div class="filterbar">
<div class="ftab active">For you</div>
<div class="ftab">Following</div>
</div>
<div class="feed">
<div class="post">
<div class="av av1"></div>
<div class="pbody">
<div class="prow">
<span class="pname">Nova Reyes</span>
<span class="pverify"><svg viewBox="0 0 24 24" fill="#fff"><path d="M9 16l-4-4 1.4-1.4L9 13.2l8.6-8.6L19 6z"/></svg></span>
<span class="phandle">@novareyes · 2h</span>
<span class="pmore">…</span>
</div>
<div class="ptext">Shipped the new onboarding flow tonight — three fewer taps to first value. Numbers already trending the right way. <span class="link">#buildinpublic</span></div>
<div class="actions">
<div class="act reply"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12c0 4-4 7-9 7-1.2 0-2.4-.2-3.4-.6L4 20l1.3-3.9C4.5 15 4 13.6 4 12c0-4 4-7 9-7s9 3 9 7z"/></svg><span>128</span></div>
<div class="act repost on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 7h10v4l4-5-4-5v4H5v7h2zM17 17H7v-4l-4 5 4 5v-4h12v-7h-2z"/></svg><span>342</span></div>
<div class="act like on"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21s-7-4.6-9.6-8.9C.6 8.7 2 5 5.4 5c1.9 0 3.3 1 4.6 2.7C11.3 6 12.7 5 14.6 5 18 5 19.4 8.7 21.6 12.1 19 16.4 12 21 12 21z"/></svg><span>2.1K</span></div>
<div class="act views"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 17l5-5 4 4 8-9"/></svg><span>84.2K</span></div>
<div class="act share"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v12M7 8l5-5 5 5M5 15v4h14v-4"/></svg></div>
</div>
</div>
</div>
<div class="post">
<div class="av av2"></div>
<div class="pbody">
<div class="prow">
<span class="pname">Marcus Lin</span>
<span class="phandle">@marcuslin · 5h</span>
<span class="pmore">…</span>
</div>
<div class="ptext">Hot take: the best roadmap review is the one where nobody talks about the roadmap.</div>
<div class="actions">
<div class="act reply"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12c0 4-4 7-9 7-1.2 0-2.4-.2-3.4-.6L4 20l1.3-3.9C4.5 15 4 13.6 4 12c0-4 4-7 9-7s9 3 9 7z"/></svg><span>19</span></div>
<div class="act repost"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 7h10v4l4-5-4-5v4H5v7h2zM17 17H7v-4l-4 5 4 5v-4h12v-7h-2z"/></svg><span>44</span></div>
<div class="act like"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21s-7-4.6-9.6-8.9C.6 8.7 2 5 5.4 5c1.9 0 3.3 1 4.6 2.7C11.3 6 12.7 5 14.6 5 18 5 19.4 8.7 21.6 12.1 19 16.4 12 21 12 21z"/></svg><span>560</span></div>
<div class="act views"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 17l5-5 4 4 8-9"/></svg><span>32.9K</span></div>
<div class="act share"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v12M7 8l5-5 5 5M5 15v4h14v-4"/></svg></div>
</div>
</div>
</div>
<div class="post">
<div class="av av3"></div>
<div class="pbody">
<div class="prow">
<span class="pname">Priya Shah</span>
<span class="pverify"><svg viewBox="0 0 24 24" fill="#fff"><path d="M9 16l-4-4 1.4-1.4L9 13.2l8.6-8.6L19 6z"/></svg></span>
<span class="phandle">@priyashah · 9h</span>
<span class="pmore">…</span>
</div>
<div class="ptext">Reminder that "move fast" and "break things you can't undo" are not the same instruction.</div>
<div class="actions">
<div class="act reply"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12c0 4-4 7-9 7-1.2 0-2.4-.2-3.4-.6L4 20l1.3-3.9C4.5 15 4 13.6 4 12c0-4 4-7 9-7s9 3 9 7z"/></svg><span>7</span></div>
<div class="act repost"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 7h10v4l4-5-4-5v4H5v7h2zM17 17H7v-4l-4 5 4 5v-4h12v-7h-2z"/></svg><span>12</span></div>
<div class="act like"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21s-7-4.6-9.6-8.9C.6 8.7 2 5 5.4 5c1.9 0 3.3 1 4.6 2.7C11.3 6 12.7 5 14.6 5 18 5 19.4 8.7 21.6 12.1 19 16.4 12 21 12 21z"/></svg><span>210</span></div>
<div class="act views"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 17l5-5 4 4 8-9"/></svg><span>18.4K</span></div>
<div class="act share"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v12M7 8l5-5 5 5M5 15v4h14v-4"/></svg></div>
</div>
</div>
</div>
</div>
<div class="tabbar">
<div class="tab active"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3z"/></svg></div>
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg></div>
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="8" cy="10" r="3"/><circle cx="16" cy="10" r="3"/><path d="M3 19c0-3 2.5-5 5-5s5 2 5 5M11 19c0-3 2.5-5 5-5s5 2 5 5"/></svg></div>
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v12H8l-4 4z"/></svg></div>
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 5h16v13l-4-3H4z"/></svg></div>
</div>
<div class="fab"><svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2"><path d="M4 20l1-5 11-11 4 4-11 11-5 1z"/></svg></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #040404;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #040404;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: 0.25px; margin: 0; color: #040404; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #393939; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 1px; background: #b3848f; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 1px; background: #f8f8f8; color: #040404;
border: 1px solid #b3848f; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.35; letter-spacing: 0.5px; background: transparent; color: #040404;
border: 1px solid #bbbbbb; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #393939; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #b3848f; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'UniversLTStd-Bold','Helvetica Neue',Arial,sans-serif; background:#f8f8f8; color:#333333; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#f8f8f8;}
.logo{font-family:'Tt-Chocolate',Georgia,serif;font-size:28px;color:#040404;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#393939;}
.navlinks .on{color:#b3848f;}
.hero{height:220px;display:flex;align-items:center;background:#f8f1f4;padding:0 32px;}
.herotext{width:420px;}
.herotext h1{font-family:'Tt-Chocolate',Georgia,serif;font-size:44px;font-weight:400;color:#040404;margin:0 0 12px;line-height:1.1;}
.herotext p{font-size:15px;color:#333333;margin:0 0 18px;max-width:320px;}
.cta{display:inline-block;background:#b3848f;color:#fff;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:14px 32px;border-radius:9999px;}
.heroimg{width:280px;height:170px;position:relative;margin-left:auto;}
.tube{position:absolute;right:60px;top:10px;width:60px;height:150px;border-radius:30px;background:linear-gradient(160deg,#ffb8b8,#b3848f);}
.tube2{position:absolute;right:130px;top:40px;width:50px;height:120px;border-radius:25px;background:linear-gradient(160deg,#905d5d,#b3848f);}
.section{padding:16px 32px 0;}
.sectitle{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#393939;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:150px;background:#fff;border-radius:12px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#b3848f;color:#fff;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;border-radius:4px;padding:2px 6px;}
.thumb{height:96px;border-radius:12px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:700;letter-spacing:0.3px;color:#040404;line-height:1.3;}
.swatches{display:flex;gap:4px;margin-top:6px;}
.sw{width:14px;height:14px;border-radius:9999px;}
.pprice{font-size:14px;font-weight:700;color:#040404;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#040404;color:#f8f8f8;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kylie Cosmetics</div>
<div class="navlinks"><div class="on">Lip</div><div>Face</div><div>Eye</div><div>Sets</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Coveted, one shade at a time.</h1>
<p>Bold, unapologetically feminine glamour — meticulously curated for the mirror.</p>
<div class="cta">Shop Bestsellers</div>
</div>
<div class="heroimg"><div class="tube2"></div><div class="tube"></div></div>
</div>
<div class="section">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#b3848f,#ffb8b8)"></div><div class="pname">Velvet Lip Kit</div><div class="swatches"><div class="sw" style="background:#b3848f"></div><div class="sw" style="background:#905d5d"></div><div class="sw" style="background:#c74a21"></div></div><div class="pprice">$29.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#905d5d,#b3848f)"></div><div class="pname">Setting Powder</div><div class="swatches"><div class="sw" style="background:#efd7e5"></div></div><div class="pprice">$32.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffb8b8,#f8f1f4)"></div><div class="pname">Blush Duo Palette</div><div class="swatches"><div class="sw" style="background:#fb5858"></div><div class="sw" style="background:#ffb8b8"></div></div><div class="pprice">$36.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b3848f,#040404)"></div><div class="pname">Precision Liner</div><div class="swatches"><div class="sw" style="background:#040404"></div></div><div class="pprice">$18.00</div></div>
</div>
</div>
<div class="footer"><span>© Kylie Cosmetics</span><span>Rewards · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#000000; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { color:#ffffff; font-size:17px; font-weight:700; }
.navlinks { display:flex; gap:24px; color:#d4d4d4; font-size:14px; }
.navlinks span:first-child { color:#fff; font-weight:700; }
.dialog-btn { background:transparent; border:1px solid #ffffff; color:#ffffff; border-radius:6px; padding:0 12px; height:32px; font-size:13px; display:flex; align-items:center; }
.toolbar { display:flex; align-items:center; justify-content:space-between; padding:20px 32px 12px; }
.toolbar h1 { font-size:20px; font-weight:600; margin:0; }
.filters { display:flex; gap:8px; }
.filter { border:1px solid #d4d4d4; border-radius:6px; padding:5px 14px; font-size:12px; color:#666; }
.filter.active { background:#000; color:#fff; border-color:#000; }
.list { padding:0 32px; }
.job { display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid #d4d4d4; }
.job .logo { width:40px; height:40px; border-radius:6px; margin-right:14px; flex-shrink:0; }
.l1 { background:linear-gradient(135deg,#111,#444); }
.l2 { background:linear-gradient(135deg,#fc5d11,#a83b06); }
.l3 { background:linear-gradient(135deg,#222,#5a5a5a); }
.l4 { background:linear-gradient(135deg,#3a3a3a,#111); }
.job .info { display:flex; align-items:center; flex:1; }
.job .txt { flex:1; }
.job .txt h4 { font-size:16px; font-weight:400; margin:0 0 3px; color:#222; }
.job .txt p { font-size:12px; color:#808080; margin:0; }
.job .tag { font-size:11px; color:#666; background:#f2f2f2; border-radius:4px; padding:3px 10px; margin-right:10px; }
.job .apply { border:1px solid #000; background:transparent; color:#000; border-radius:6px; padding:0 14px; height:32px; font-size:13px; }
.side { position:absolute; top:104px; right:32px; width:220px; background:#f2f2f2; border-radius:8px; padding:18px; }
.side h5 { font-size:13px; font-weight:700; margin:0 0 10px; }
.side p { font-size:12px; color:#666; line-height:1.6; margin:0 0 12px; }
.side .cta { background:#000; color:#fff; border-radius:6px; text-align:center; padding:9px 0; font-size:13px; font-weight:600; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #d4d4d4; padding:12px 32px;
display:flex; justify-content:space-between; font-size:11px; color:#808080; }
</style></head>
<body style="position:relative">
<nav>
<span class="brand">Remember</span>
<div class="navlinks"><span>Job Openings</span><span>Careers</span><span>Community</span></div>
<span class="dialog-btn">For Business</span>
</nav>
<div class="toolbar">
<h1>Find Opportunities That Fit You</h1>
<div class="filters"><span class="filter active">All</span><span class="filter">Engineering</span><span class="filter">Design</span><span class="filter">Marketing</span></div>
</div>
<div class="list">
<div class="job">
<div class="info"><span class="logo l1"></span><div class="txt"><h4>Backend Engineer (Java/Spring)</h4><p>Technovation · Seoul, Gangnam-gu · 3+ years experience</p></div></div>
<span class="tag">D-7</span>
<span class="apply">Apply</span>
</div>
<div class="job">
<div class="info"><span class="logo l2"></span><div class="txt"><h4>Product Manager</h4><p>BridgeWorks · Seoul, Seongdong-gu · Any experience level</p></div></div>
<span class="tag">Ongoing</span>
<span class="apply">Apply</span>
</div>
<div class="job">
<div class="info"><span class="logo l3"></span><div class="txt"><h4>UX Researcher</h4><p>MomentLab · Pangyo · 2+ years experience</p></div></div>
<span class="tag">D-3</span>
<span class="apply">Apply</span>
</div>
<div class="job">
<div class="info"><span class="logo l4"></span><div class="txt"><h4>Sales Operations Manager</h4><p>ClearRoute · Seoul, Yeongdeungpo-gu · 5+ years experience</p></div></div>
<span class="tag">D-14</span>
<span class="apply">Apply</span>
</div>
</div>
<div class="side">
<h5>Start Your Career With a Business Card</h5>
<p>Get job offers through your business card network.</p>
<div class="cta">Register My Card</div>
</div>
<footer>
<span>© Remember & Company</span>
<span>Job Openings · Careers · Talent Info</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0c5fdb; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0c5fdb; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8cb2e9; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1274e7; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0c5fdb; color: #ffffff;
border: 1px solid #1274e7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0c5fdb; color: #f5f5f5;
border: 1px solid #3177df; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8cb2e9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0d62dd; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f9fa; color:#495057; box-sizing:border-box;
font-family:"Inter","Noto Sans KR",sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:700; margin:0; color:#212529; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; color:#212529; }
.cta { background:#0c5fdb; color:#ffffff; border:none; border-radius:4px; padding:9px 18px; font-size:14px; font-weight:600; }
.hero { padding:44px 40px 24px; text-align:center; }
.hero h1 { font-size:44px; font-weight:300; letter-spacing:-0.8px; margin:0 0 12px; color:#495057; }
.hero .sub { font-size:20px; font-weight:600; margin:0 0 20px; color:#212529; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:8px 40px 0; }
.card { background:#ffffff; border-radius:10px; padding:20px; box-shadow:0 3px 8px rgba(0,0,0,0.15); }
.card h3 { font-size:16px; font-weight:600; margin:0 0 6px; letter-spacing:-0.3px; color:#212529; }
.card p { font-size:13px; color:#6c757d; margin:0; line-height:1.5; }
.darkband { background:#00001a; color:#ffffff; margin-top:24px; padding:26px 40px; display:flex; justify-content:space-between; align-items:center; }
.darkband h2 { font-size:22px; font-weight:600; margin:0; letter-spacing:-0.4px; }
.pill { background:#ffffff; color:#333333; border-radius:50px; padding:10px 24px; font-size:14px; box-shadow:0 8px 19.2px rgba(0,0,0,0.1); }
</style></head>
<body>
<nav>
<p class="brand">Selectstar</p>
<div class="navlinks"><span>Data Collection</span><span>Dataset Store</span><span>Datumo Eval</span><span>AI Red Team</span></div>
<button class="cta">Contact Us</button>
</nav>
<section class="hero">
<h1>Solution for Trustworthy AI</h1>
<div class="sub">Accelerate your AI development</div>
</section>
<div class="cards">
<div class="card"><h3>Data Collection</h3><p>High-quality training data, collected and labeled by crowds.</p></div>
<div class="card"><h3>Datumo Eval</h3><p>A verification solution that scores LLM response quality.</p></div>
<div class="card"><h3>AI Red Team</h3><p>Find your model's weak spots before you ship.</p></div>
</div>
<div class="darkband">
<h2>Published at the world's top AI conferences</h2>
<span class="pill">Contact Us</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 13px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: transparent; color: #108474;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #121212;
border: 1px solid #c0c0c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.4px; background: #e5e9fa; color: #4770db;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#121212; box-sizing:border-box;
font-family:'Outfit', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.promo { flex:0 0 auto; height:28px; background:#f1dc0c; color:#121212; display:flex; align-items:center;
justify-content:center; font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; }
nav { flex:0 0 auto; height:54px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; border-bottom:1px solid #eeeeee; background:#fafafa; }
.brand { font-family:'Bricolage Grotesque', system-ui, sans-serif; font-size:20px; font-weight:800;
letter-spacing:-0.5px; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; color:#121212; }
.navicons { display:flex; gap:16px; font-size:12px; color:#7b7b7b; }
.hero { flex:0 0 auto; background:#0e1b4d; color:#ffffff; padding:22px 36px; display:flex;
align-items:center; justify-content:space-between; gap:24px; }
.hero-copy { max-width:400px; }
.hero-copy h1 { font-family:'Bricolage Grotesque', system-ui, sans-serif; font-size:30px; font-weight:800;
line-height:1.08; letter-spacing:-1px; margin:0 0 8px; }
.hero-copy p { font-size:14px; color:#d0e0fa; margin:0 0 14px; }
.hero-btns { display:flex; gap:10px; }
.btn-primary { background:#108474; color:#fff; border:none; border-radius:8px; padding:12px 22px;
font-size:14px; font-weight:600; }
.btn-secondary { background:transparent; color:#fff; border:1.5px solid #fff; border-radius:8px;
padding:11px 21px; font-size:14px; font-weight:600; }
.hero-visual { width:210px; height:120px; border-radius:8px;
background:linear-gradient(150deg,#4770db,#0e1b4d 70%); position:relative; flex:0 0 auto; }
.hero-visual::after { content:''; position:absolute; left:16px; top:16px; width:110px; height:70px;
border-radius:6px; background:linear-gradient(160deg,#108474,#887fc4); }
.chips { flex:0 0 auto; display:flex; gap:10px; padding:14px 36px 8px; }
.chip { border-radius:999px; padding:7px 16px; font-size:13px; font-weight:600; background:#eff0f5; color:#7b7b7b; }
.chip.active { background:#108474; color:#fff; }
.products { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:0 36px 10px; min-height:0; }
.card { border:1px solid #eeeeee; border-radius:8px; background:#fafafa; display:flex; flex-direction:column;
overflow:hidden; padding:10px; gap:8px; }
.card.tinted { background:#eff0f5; border:none; }
.imgwrap { position:relative; flex:1; min-height:0; border-radius:6px; }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:0.4px; padding:3px 8px; border-radius:4px; z-index:2; }
.badge.line { background:#e5e9fa; color:#4770db; }
.badge.newb { background:#108474; color:#fff; }
.p1 .imgwrap { background:linear-gradient(150deg,#e5e9fa,#4770db); }
.p2 .imgwrap { background:linear-gradient(150deg,#eeeff8,#108474); }
.p3 .imgwrap { background:linear-gradient(150deg,#f7e2b5,#887fc4); }
.cardmeta .title { font-size:16px; font-weight:600; margin:0 0 3px; }
.cardmeta .price { font-family:'Bricolage Grotesque', system-ui, sans-serif; font-size:19px; font-weight:700;
letter-spacing:-0.3px; margin:0; color:#121212; }
footer { flex:0 0 auto; background:#0e1b4d; color:#ffffff; padding:12px 36px; display:flex;
justify-content:space-between; align-items:center; font-size:11px; }
footer .flinks span { margin-left:16px; color:#d0e0fa; }
</style></head>
<body>
<div class="promo">Free shipping on orders over $75 — ends Sunday</div>
<nav>
<p class="brand">Artisul</p>
<div class="navlinks"><span>Pen Tablets</span><span>Display Tablets</span><span>Pen Mice</span><span>Accessories</span></div>
<div class="navicons"><span>Support</span><span>Cart</span></div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Draw without limits</h1>
<p>Pressure-sensitive pen tablets built for illustrators, colorists, and animators.</p>
<div class="hero-btns">
<button class="btn-primary">Shop Tablets</button>
<button class="btn-secondary">Compare Models</button>
</div>
</div>
<div class="hero-visual"></div>
</section>
<div class="chips">
<span class="chip active">All</span>
<span class="chip">Pen Tablets</span>
<span class="chip">Display Tablets</span>
<span class="chip">Pen Mice</span>
</div>
<section class="products">
<div class="card p3">
<div class="imgwrap"><span class="badge newb">New</span></div>
<div class="cardmeta">
<p class="title">D22 Display Tablet</p>
<p class="price">$449.00</p>
</div>
</div>
<div class="card p1">
<div class="imgwrap"><span class="badge line">Pen Tablet</span></div>
<div class="cardmeta">
<p class="title">D10 Pen Tablet</p>
<p class="price">$79.00</p>
</div>
</div>
<div class="card tinted p2">
<div class="imgwrap"><span class="badge line">Pen Mouse</span></div>
<div class="cardmeta">
<p class="title">M06 Pen Mouse</p>
<p class="price">$59.00</p>
</div>
</div>
</section>
<footer>
<span>© Artisul</span>
<span class="flinks"><span>Support</span><span>Drivers</span><span>Warranty</span></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdf7f0; color: #041e29;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdf7f0; color: #041e29;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #041e29; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6aa5a3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #0e3c31; color: #fdf7f0;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fdf7f0; color: #0e3c31;
border: 1px solid #0e3c31; border-radius: 8px;
padding: 14px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fdf7f0; color: #121212;
border: 1px solid #bfc1be; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6aa5a3; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ecfbb0; color: #041e29;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#fdf7f0; color:#121212; box-sizing:border-box; font-family:'Inter',sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; border-bottom:1px solid #e5edeb; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-family:'Newsreader',serif; font-size:20px; font-weight:500; color:#0e3c31; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:500; color:#121212; }
.navlinks span.active { color:#0e3c31; border-bottom:2px solid #0e3c31; padding-bottom:22px; }
.search-pill { background:#fdf7f0; border-radius:999px; padding:10px 20px; box-shadow:0 2px 8px rgba(4,30,41,0.06); font-size:13px; color:#121212; }
.main { display:flex; gap:24px; padding:20px 32px; height:328px; }
.gallery { width:340px; background:#ffffff; border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative; }
.bottle { width:70px; height:150px; background:linear-gradient(180deg,#0e3c31,#041e29); border-radius:12px; position:relative; }
.bottle::before { content:''; position:absolute; top:-16px; left:50%; transform:translateX(-50%); width:30px; height:20px; background:#0e3c31; border-radius:4px; }
.badge-bestseller { position:absolute; top:16px; left:16px; background:#ee9441; color:#121212; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:2px 8px; border-radius:4px; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; }
.info h1 { font-family:'Newsreader',serif; font-size:26px; font-weight:400; margin:0; }
.subheading { font-family:'Newsreader',serif; font-style:italic; font-size:15px; color:#6aa5a3; margin:0; }
.price { font-size:18px; font-weight:600; }
.desc { font-size:14px; line-height:1.55; color:#121212; max-width:420px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#0e3c31; color:#fdf7f0; border:none; border-radius:8px; font-weight:600; font-size:15px; }
.btn-secondary { flex:1; height:48px; background:#fdf7f0; color:#0e3c31; border:2px solid #0e3c31; border-radius:8px; font-weight:600; font-size:15px; }
.accordion { padding:8px 32px; }
.acc-header { display:flex; justify-content:space-between; padding:12px 16px; font-size:14px; font-weight:500; background:#fdf7f0; border:1px solid #e5edeb; border-radius:8px; margin-bottom:8px; }
footer { position:absolute; bottom:0; left:0; right:0; background:#0e3c31; color:#fdf7f0; padding:14px 32px; display:flex; justify-content:space-between; font-size:12px; }
footer span { opacity:0.85; }
</style></head>
<body>
<nav>
<p class="brand">Barefaced</p>
<div class="navlinks"><span class="active">Cleanse</span><span>Treat</span><span>Moisturize</span><span>Sets</span></div>
<div class="search-pill">🔍 Search</div>
</nav>
<div class="main">
<div class="gallery">
<span class="badge-bestseller">Bestseller</span>
<div class="bottle"></div>
</div>
<div class="info">
<h1>Simplified Cleansing Serum</h1>
<p class="subheading">Skincare, simplified.</p>
<span class="price">$42.00</span>
<p class="desc">A single, considered formula that cleanses, balances, and hydrates in one step — free from fragrance, sulfates, and the twelve-step routine you never had time for.</p>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Learn More</button>
</div>
</div>
</div>
<div class="accordion">
<div class="acc-header"><span>Ingredients</span><span>+</span></div>
</div>
<footer>
<span>© Barefaced</span>
<span>Barefaced · Ingredients · Sustainability · FAQ</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #62b9b6; color: #000000;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #000000;
border: 1px solid #62b9b6; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #7f7edb; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f2f2f7; font-family:'Trebuchet MS',Arial,sans-serif; color:#404040; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#fff;}
.logo{font-size:19px;font-weight:700;color:#62b9b6;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#404040;}
.searchpill{width:220px;height:36px;border-radius:9999px;background:#f2f2f7;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#8a8a8a;}
.hero{height:230px;display:flex;align-items:center;padding:0 40px;background:linear-gradient(120deg,#e8f5f4 55%,#fbe4e6 100%);}
.herotext{width:440px;}
h1{font-size:30px;font-weight:700;color:#222222;margin:0 0 12px;line-height:1.25;}
.sub{font-size:14px;color:#404040;margin:0 0 18px;max-width:340px;}
.cta{display:inline-block;background:#e96c7a;color:#fff;font-size:14px;font-weight:700;padding:12px 28px;border-radius:9999px;width:fit-content;}
.covers{position:absolute;right:70px;top:60px;display:flex;gap:10px;}
.cover{width:70px;height:100px;border-radius:6px;box-shadow:0 6px 16px rgba(0,0,0,.1);}
.sec{padding:18px 40px 0;}
.sectitle{font-size:17px;font-weight:700;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:8px;padding:12px;position:relative;}
.thumb{height:96px;border-radius:6px;background:#f2f2f7;margin-bottom:8px;}
.badge{position:absolute;top:20px;left:20px;background:#62cb91;color:#fff;font-size:9px;font-weight:700;padding:3px 8px;border-radius:9999px;}
.pname{font-size:13px;font-weight:700;color:#222222;margin-bottom:3px;}
.pprice{font-size:12px;color:#8a8a8a;}
.player{position:absolute;left:0;right:0;bottom:0;height:56px;background:rgba(255,255,255,.85);display:flex;align-items:center;padding:0 40px;font-size:12px;color:#404040;}
</style>
<div class="nav">
<div class="logo">Libro FM</div>
<div class="navlinks"><span>Browse</span><span>Membership</span><span>Bestsellers</span></div>
<div class="searchpill">Search audiobooks...</div>
</div>
<div class="hero" style="position:relative;">
<div class="herotext">
<h1>Your Next Listen, From an Indie Bookstore.</h1>
<div class="sub">Membership credits that fund local shops, not a warehouse.</div>
<div class="cta">Join Libro.fm</div>
</div>
<div class="covers">
<div class="cover" style="background:#62b9b6;"></div>
<div class="cover" style="background:#e96c7a;"></div>
<div class="cover" style="background:#7f7edb;"></div>
</div>
</div>
<div class="sec">
<div class="sectitle">Staff Picks</div>
<div class="grid">
<div class="card"><div class="badge">Member Pick</div><div class="thumb"></div><div class="pname">The Quiet Harbor</div><div class="pprice">1 Credit</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Fieldnotes on Home</div><div class="pprice">1 Credit</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Salt & Ceremony</div><div class="pprice">1 Credit</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f4ec; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f4ec; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6c757d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #cd3b1f; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f7f4ec; color: #121212;
border: 1px solid #cd3b1f; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f7f4ec; color: #121212;
border: 1px solid #bebcb6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c757d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cd3b1f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f4ec; color:#121212; box-sizing:border-box;
font-family:'Libre Franklin', -apple-system, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-family:'Aktiv Grotesk Corp', 'Libre Franklin', sans-serif; font-size:18px; font-weight:600; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; color:#6c757d; }
.navlinks span:first-child { color:#121212; border-bottom:2px solid #cd3b1f; padding-bottom:6px; }
.layout { display:flex; height:calc(640px - 64px); }
.media { width:360px; flex-shrink:0; background:linear-gradient(180deg, #fcc89b 0%, #f5f2eb 100%); position:relative;
display:flex; align-items:center; justify-content:center; }
.jar { width:130px; height:170px; background:#ffffff; border-radius:16px 16px 30px 30px; box-shadow:0 10px 24px rgba(18,18,18,0.1); position:relative; }
.jar::before { content:''; position:absolute; left:15px; right:15px; top:-14px; height:20px; background:#2d4e46; border-radius:6px; }
.badge-vegan { position:absolute; top:18px; left:18px; background:#2d4e46; color:#ffffff; font-size:11px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; border-radius:4px; padding:4px 8px; }
.detail { flex:1; padding:26px 34px; display:flex; flex-direction:column; gap:12px; }
.kicker { font-size:13px; color:#6c757d; }
h1 { font-family:'Aktiv Grotesk Corp', 'Libre Franklin', sans-serif; font-size:26px; font-weight:500; margin:0; }
.stars { color:#ffce31; font-size:14px; }
.price { font-size:19px; font-weight:600; }
.highlight { background:#bae1d8; color:#121212; font-size:12px; border-radius:4px; padding:2px 6px; display:inline-block; }
.ingredients { background:#f5f2eb; border-radius:8px; padding:12px 14px; font-size:14px; color:#282828; line-height:1.5; }
.accordion { border:1px solid #ebe6d8; border-radius:8px; padding:12px 16px; font-size:16px; font-weight:600;
display:flex; justify-content:space-between; }
.actions { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#cd3b1f; color:#ffffff; border:none; border-radius:8px; height:48px; font-size:15px; font-weight:600; }
.btn-secondary { background:#f7f4ec; color:#121212; border:2px solid #dedede; border-radius:8px; height:48px; padding:0 20px; font-size:15px; font-weight:600; }
</style></head>
<body>
<div class="topbar">
<div class="brand">Cocokind</div>
<div class="navlinks"><span>Shop</span><span>Learn</span><span>About</span><span>Rewards</span></div>
</div>
<div class="layout">
<div class="media">
<div class="badge-vegan">Vegan</div>
<div class="jar"></div>
</div>
<div class="detail">
<div class="kicker">Skin Cycling · Barrier Repair</div>
<h1>Chlorophyll Mask</h1>
<div class="stars">★★★★★ <span style="color:#6c757d;font-size:13px;">1,284 reviews</span></div>
<div class="price">$14.99</div>
<div><span class="highlight">Aloe Vera</span> <span class="highlight">Vitamin C</span> <span class="highlight">Hyaluronic Acid</span></div>
<div class="ingredients">A gentle detoxifying mask with chlorophyllin and clay to purify pores without stripping the skin barrier.</div>
<div class="accordion">How to Use <span>+</span></div>
<div class="actions">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">View Ingredients</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f3ee; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f3ee; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5c3d38; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.05px; background: #423432; color: #f7f3ee;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.05px; background: #f7f3ee; color: #423432;
border: 1px solid #423432; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f7f3ee; color: #121212;
border: 1px solid #bebbb7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5c3d38; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.05px; background: #bcaa75; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f3ee; font-family:'Brown','Helvetica Neue',Arial,sans-serif; color:#423432; }
*{box-sizing:border-box;}
.nav{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #dedede;}
.logo{font-family:'freight-big-pro',Georgia,serif;font-size:20px;color:#423432;}
.navlinks{display:flex;gap:22px;font-size:13px;color:#5c3d38;}
.cta{background:#423432;color:#fff;font-size:12px;font-weight:600;padding:9px 20px;border-radius:8px;}
.hero{height:250px;display:flex;background:#e6dcd0;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 34px;}
.herotext h1{font-family:'freight-big-pro',Georgia,serif;font-size:32px;font-weight:400;margin:0 0 12px;line-height:1.25;}
.herotext p{font-size:13px;color:#5c3d38;margin:0 0 16px;max-width:290px;}
.btn{display:inline-block;background:#423432;color:#fff;font-size:13px;font-weight:600;padding:12px 24px;border-radius:8px;width:fit-content;}
.heroimg{width:54%;position:relative;overflow:hidden;background:linear-gradient(160deg,#dedede,#8ba985 70%);}
.pillow{position:absolute;bottom:60px;left:100px;width:150px;height:90px;border-radius:40px;background:#bcaa75;}
.pillow2{position:absolute;bottom:40px;left:210px;width:120px;height:70px;border-radius:35px;background:#542a30;}
.sec{padding:20px 34px 0;}
.sectitle{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#5c3d38;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#dedede;border-radius:12px;padding:10px;}
.thumb{height:96px;border-radius:8px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;}
.pprice{font-size:13px;color:#5c3d38;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Morrow Soft Goods</div>
<div class="navlinks"><span>Sheets</span><span>Duvets</span><span>Pillows</span><span>Bundles</span></div>
<div class="cta">Shop Bedding</div>
</div>
<div class="hero">
<div class="herotext">
<h1>A quiet invitation to rest.</h1>
<p>Hushed, earthy bedding made from natural fibers and worn-in softness.</p>
<div class="btn">Shop the Bed Bundle</div>
</div>
<div class="heroimg"><div class="pillow2"></div><div class="pillow"></div></div>
</div>
<div class="sec">
<div class="sectitle">Bedroom Essentials</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#423432,#bcaa75)"></div><div class="pname">Linen Sheet Set</div><div class="pprice">$189</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#5c3d38,#8ba985)"></div><div class="pname">Weighted Duvet</div><div class="pprice">$249</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#6c8fa3,#dedede)"></div><div class="pname">Down Alt Pillow</div><div class="pprice">$68</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#542a30,#423432)"></div><div class="pname">Wool Throw Blanket</div><div class="pprice">$98</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222021;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222021;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.2px; margin: 0; color: #222021; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6d6d6d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #f55a19; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #222021;
border: 1px solid #f55a19; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222021;
border: 1px solid #c8c7c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d6d6d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f55a19; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; color:#4c4c4c; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dedede;}
.logo{font-size:19px;font-weight:700;letter-spacing:-.4px;color:#222021;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;color:#4c4c4c;}
.navlinks .on{color:#f55a19;font-weight:600;}
.hero{height:250px;display:flex;background:#f5f2ef;}
.htext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 36px;}
.kicker{font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:#0e7a82;margin-bottom:10px;}
.htext h1{font-size:28px;font-weight:600;letter-spacing:-.3px;color:#222021;margin:0 0 10px;line-height:1.25;}
.htext p{font-size:14px;line-height:1.5;color:#676986;margin:0 0 18px;max-width:290px;}
.cta{width:fit-content;background:#f55a19;color:#fff;font-size:13px;font-weight:600;padding:11px 22px;border-radius:8px;}
.himg{width:54%;position:relative;background:#ede6e0;}
.hub{position:absolute;left:70px;top:95px;width:220px;height:56px;border-radius:10px;background:linear-gradient(180deg,#3a3a3d,#1b1c21);box-shadow:0 14px 26px rgba(34,32,33,.25);}
.hub:before{content:'';position:absolute;left:14px;top:16px;width:24px;height:24px;border-radius:6px;background:#f55a19;}
.hub:after{content:'';position:absolute;left:52px;top:20px;width:150px;height:16px;border-radius:4px;background:#676986;opacity:.5;}
.speclabel{padding:16px 36px 8px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#6d6d6d;}
.spectable{display:flex;gap:1px;background:#dedede;margin:0 36px;border-radius:8px;overflow:hidden;}
.speccell{flex:1;background:#fafafa;text-align:center;padding:10px 6px;}
.slabel{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#6d6d6d;}
.sval{font-size:15px;font-weight:700;color:#222021;margin-top:3px;}
.grid{display:flex;gap:14px;padding:16px 36px 0;}
.card{width:150px;border:1px solid #dedede;border-radius:8px;padding:10px;}
.thumb{height:78px;border-radius:6px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:600;color:#222021;line-height:1.3;height:30px;overflow:hidden;}
.price{font-size:13px;font-weight:700;color:#f55a19;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Satechi Docking 2</div>
<div class="navlinks"><div class="on">Docks & Hubs</div><div>Chargers</div><div>Stands</div><div>Cables</div></div>
</div>
<div class="hero">
<div class="htext">
<div class="kicker">USB-C Multiport Series</div>
<h1>One port. Every device.</h1>
<p>Aluminum docking hardware engineered for the desk that runs everything at once.</p>
<div class="cta">Shop Docks</div>
</div>
<div class="himg"><div class="hub"></div></div>
</div>
<div class="speclabel">Engineered Specs</div>
<div class="spectable">
<div class="speccell"><div class="slabel">Ports</div><div class="sval">10-in-1</div></div>
<div class="speccell"><div class="slabel">Power Delivery</div><div class="sval">100W</div></div>
<div class="speccell"><div class="slabel">Data Speed</div><div class="sval">10Gbps</div></div>
<div class="speccell"><div class="slabel">Warranty</div><div class="sval">18 Months</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#676986,#1b1c21)"></div><div class="pname">USB-C 10-Port Dock</div><div class="price">$129.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#cfc6bf,#676986)"></div><div class="pname">Slim Multiport Adapter</div><div class="price">$54.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#0e7a82,#1b1c21)"></div><div class="pname">100W GaN Charger</div><div class="price">$69.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#1b1c21,#676986)"></div><div class="pname">Braided USB-C Cable</div><div class="price">$19.99</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #112233;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #112233;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #112233; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5a6a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #e0fe2c; color: #112233;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: transparent; color: #112233;
border: 1px solid #e0fe2c; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #112233;
border: 1px solid #c4c8cc; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a6a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.2px; background: #e0fe2c; color: #112233;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#112233; color:#e0fe2c; box-sizing:border-box;
font-family:'Arial Black','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#0c1926; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { color:#e0fe2c; font-size:20px; font-weight:900; margin:0; letter-spacing:1px; text-transform:uppercase; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#f0ff96; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; }
.hero { height:250px; display:flex; align-items:center; padding:0 40px; gap:36px; background:radial-gradient(circle at 75% 40%, rgba(224,254,44,0.12), transparent 60%); }
.bathorb { width:180px; height:180px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #f0ff96, #e0fe2c 60%, #c8e200 100%); position:relative; box-shadow:0 0 60px rgba(224,254,44,0.35); }
.bathorb::after { content:''; position:absolute; inset:30px; border-radius:50%; background:#112233; opacity:0.12; }
.heroTxt h1 { color:#ffffff; font-size:34px; font-weight:900; margin:0 0 12px; text-transform:uppercase; line-height:1.05; letter-spacing:0.5px; }
.heroTxt .tag { color:#e0fe2c; font-size:13px; font-weight:900; letter-spacing:0.1em; margin-bottom:10px; display:block; text-transform:uppercase; }
.heroTxt p { color:#fff5ef; font-size:12px; margin:0 0 18px; max-width:320px; font-family:Arial,sans-serif; font-weight:400; }
.heroTxt .cta { display:inline-block; background:#e0fe2c; color:#112233; font-weight:900; font-size:13px; padding:14px 30px; border-radius:999px; text-transform:uppercase; letter-spacing:0.05em; }
.section-label { padding:16px 32px 8px; font-size:13px; font-weight:900; color:#e0fe2c; text-transform:uppercase; letter-spacing:0.08em; }
.grid { display:flex; gap:12px; padding:0 32px; }
.card { flex:1; background:#0c1926; border-radius:999px 999px 20px 20px; padding:14px; text-align:center; border:1px solid #1e2d3d; }
.card .art { height:80px; border-radius:999px; margin-bottom:10px; }
.a1 { background:radial-gradient(circle,#e0fe2c,#c8e200); } .a2 { background:radial-gradient(circle,#f0ff96,#e0fe2c); }
.a3 { background:radial-gradient(circle,#fff5ef,#f0ff96); } .a4 { background:radial-gradient(circle,#cc0000,#e0fe2c); }
.card h3 { color:#ffffff; font-size:11px; font-weight:900; margin:0 0 3px; text-transform:uppercase; font-family:Arial,sans-serif; letter-spacing:0.03em; }
.card p { font-size:9px; color:#5a6a7a; margin:0 0 6px; font-family:Arial,sans-serif; font-weight:700; text-transform:uppercase; }
.card .price { font-size:13px; font-weight:900; color:#e0fe2c; font-family:Arial,sans-serif; }
footer { height:56px; margin-top:14px; background:#0c1926; display:flex; align-items:center; gap:26px; padding:0 32px; }
footer span { color:#5a6a7a; font-size:9px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; font-family:Arial,sans-serif; }
</style></head>
<body>
<nav>
<p class="brand">Flewd</p>
<div class="navlinks"><span>Bath Soaks</span><span>Aches</span><span>Insomnia</span><span>Anxiety</span></div>
</nav>
<div class="hero">
<div class="bathorb"></div>
<div class="heroTxt">
<span class="tag">Stress Destroying</span>
<h1>Name the Stressor.<br>Destroy It.</h1>
<p>Aches, insomnia, anxiety — soak formulas built for the exact thing keeping you wired.</p>
<span class="cta">Shop Soaks</span>
</div>
</div>
<div class="section-label">Pick Your Fight</div>
<div class="grid">
<div class="card"><div class="art a1"></div><h3>Aches Soak</h3><p>Magnesium + Arnica</p><div class="price">$32</div></div>
<div class="card"><div class="art a2"></div><h3>Insomnia Soak</h3><p>Valerian + Lavender</p><div class="price">$32</div></div>
<div class="card"><div class="art a3"></div><h3>Anxiety Soak</h3><p>L-Theanine Blend</p><div class="price">$32</div></div>
<div class="card"><div class="art a4"></div><h3>Recovery Bundle</h3><p>Limited Stock</p><div class="price">$88</div></div>
</div>
<footer>
<span>SUBSCRIBE & DESTROY MONTHLY</span><span>THIRD-PARTY TESTED</span><span>NO FILLERS, EVER</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffff00; color: #222222;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #222222;
border: 1px solid #ffff00; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Montserrat','Roboto',arial,sans-serif; background:#ffffff; color:#222222; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #eeeeee;}
.logo{font-size:19px;font-weight:600;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;}
.search{width:220px;height:40px;border-radius:9999px;background:#f5f5f5;border:1px solid #eeeeee;font-size:13px;color:#666666;display:flex;align-items:center;padding:0 16px;}
.hero{height:220px;background:#f5f5f5;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.herotext{max-width:380px;}
.herotext h1{font-size:28px;font-weight:600;letter-spacing:-.5px;margin:0 0 12px;}
.herotext p{font-size:15px;color:#333333;margin:0 0 16px;}
.hbtn{display:inline-block;background:#ffff00;color:#222222;font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:12px 28px;border-radius:8px;}
.figures{display:flex;gap:10px;}
.fig{width:64px;height:110px;border-radius:8px;}
.chiprow{display:flex;gap:10px;padding:14px 40px 0;}
.chip{background:#f5f5f5;font-size:13px;padding:6px 16px;border-radius:9999px;}
.chip.a{background:#222222;color:#fff;}
.sec{padding:16px 40px 0;}
.sectitle{font-size:16px;font-weight:600;margin-bottom:12px;}
.grid{display:flex;gap:16px;}
.card{width:196px;border:1px solid #dddddd;border-radius:8px;overflow:hidden;}
.thumb{height:110px;border-radius:8px 8px 0 0;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;color:#fff;background:#ff0000;}
.badge.limited{background:#ffff00;color:#222222;}
.cbody{padding:10px 12px 12px;}
.ptitle{font-size:14px;font-weight:500;}
.pprice{font-size:16px;font-weight:700;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#222222;color:#cccccc;font-size:12px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
</style>
<div class="wrap">
<div class="nav"><div class="logo">Numskull Geek Store</div><div class="navlinks"><div>Statues</div><div>Apparel</div><div>Collectibles</div><div>New Drops</div></div><div class="search">Search Marvel, Star Wars...</div></div>
<div class="hero"><div class="herotext"><h1>Fandom, fully lit.</h1><p>Collectible statues, apparel and exclusives for the shelf you're proud of.</p><div class="hbtn">Shop New Arrivals</div></div><div class="figures"><div class="fig" style="background:linear-gradient(160deg,#ffff00,#e6e600)"></div><div class="fig" style="background:linear-gradient(160deg,#00cc00,#0a8a0a)"></div><div class="fig" style="background:linear-gradient(160deg,#0066cc,#003d80)"></div></div></div>
<div class="chiprow"><div class="chip a">All</div><div class="chip">Marvel</div><div class="chip">Star Wars</div><div class="chip">Gaming</div></div>
<div class="sec">
<div class="sectitle">Limited Drops</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#ffff00,#e6e600)"><div class="badge limited">Limited</div></div><div class="cbody"><div class="ptitle">Galactic Sentinel Statue</div><div class="pprice">$189.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#00cc00,#0a8a0a)"><div class="badge">Sale</div></div><div class="cbody"><div class="ptitle">Neon Circuit Hoodie</div><div class="pprice">$54.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#0066cc,#003d80)"></div><div class="cbody"><div class="ptitle">Retro Arcade Enamel Pin Set</div><div class="pprice">$19.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#ffa500,#cc7a00)"></div><div class="cbody"><div class="ptitle">Cosmic Voyager Bust</div><div class="pprice">$129.99</div></div></div>
</div>
</div>
<div class="footer"><span>Convention floor energy, ships to your door</span><span>Track My Order</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #333333;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #333333;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.35; margin: 0; color: #333333; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8a898a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #7e9db2; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #f9f9f9; color: #333333;
border: 1px solid #7e9db2; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9f9f9; color: #333333;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a898a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ef4444; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f9f9; font-family:'Beausite Classic',-apple-system,'Segoe UI',sans-serif; color:#4a4a4a; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #e5e5e5;}
.logo{font-family:'Instrument Serif',Georgia,serif;font-size:24px;color:#333333;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#333333;}
.navlinks div:first-child{color:#7e9db2;border-bottom:2px solid #7e9db2;padding-bottom:4px;}
.hero{height:210px;background:#fbf7f3;display:flex;align-items:center;padding:0 30px;gap:24px;}
.heroimg{width:190px;height:180px;border-radius:12px;background:linear-gradient(160deg,#7e9db2,#e8aca0);flex-shrink:0;}
.herotext h1{font-family:'Instrument Serif',Georgia,serif;font-size:32px;font-weight:400;color:#333333;margin:0 0 10px;}
.herotext p{font-size:14px;color:#4a4a4a;margin:0 0 16px;max-width:340px;}
.btn{display:inline-block;background:#7e9db2;color:#fff;font-size:15px;font-weight:500;padding:14px 32px;border-radius:9999px;}
.secTitle{font-family:'Instrument Serif',Georgia,serif;font-size:22px;padding:16px 30px 10px;color:#333333;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:200px;background:#fff;border-radius:12px;overflow:hidden;}
.thumb{height:120px;background:linear-gradient(160deg,#e8aca0,#7e9db2);position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#ef4444;color:#fff;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.cardbody{padding:10px 12px;}
.ctitle{font-family:'Instrument Serif',Georgia,serif;font-size:18px;margin-bottom:4px;color:#333333;}
.cprice{font-size:15px;font-weight:500;color:#333333;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#f5f5f5;border-top:1px solid #e5e5e5;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:11px;color:#8a898a;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Skylar</div>
<div class="navlinks"><div>Fragrance</div><div>Bundles</div><div>Body</div></div>
</div>
<div class="hero">
<div class="heroimg"></div>
<div class="herotext">
<h1>Coastal calm, bottled.</h1>
<p>Clean, layerable fragrances made for everyday wear — light, airy, distinctly Californian.</p>
<div class="btn">Shop Fragrance</div>
</div>
</div>
<div class="secTitle">Signature Scents</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">Sale</div></div><div class="cardbody"><div class="ctitle">Vanilla Sand</div><div class="cprice">$78</div></div></div>
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="ctitle">Coastal Bloom</div><div class="cprice">$78</div></div></div>
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="ctitle">Salted Rain</div><div class="cprice">$78</div></div></div>
</div>
<div class="footer"><span>© Skylar</span><span>Clean Ingredients · Cruelty-Free</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfbfe; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfbfe; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 2px; background: #1d4354; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 2px; background: #fcfbfe; color: #1d4354;
border: 1px solid #1d4354; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfbfe; color: #222222;
border: 1px solid #c6c5c7; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 1.5px; background: #cc6055; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fcfbfe; font-family:'Montserrat',Arial,sans-serif; color:#222222; }
*{box-sizing:border-box;}
.nav{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;border-bottom:1px solid #d3d3d3;}
.logo{font-size:19px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#1d4354;}
.navlinks{display:flex;gap:24px;font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#444;}
.hero{height:250px;display:flex;background:#e9e6ed;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 42px;}
.herotext h1{font-size:30px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#1d4354;margin:0 0 14px;line-height:1.2;}
.herotext p{font-size:14px;color:#444;margin:0 0 20px;max-width:300px;line-height:1.6;}
.btn{display:inline-block;background:#cc6055;color:#fff;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:14px 26px;border-radius:0;width:fit-content;}
.heroimg{width:54%;position:relative;background:linear-gradient(150deg,#1d4354,#7a9caa 70%);}
.heroimg .frame{position:absolute;left:60px;top:50px;width:180px;height:110px;background:#e9e6ed;}
.heroimg .frame:before{content:'';position:absolute;left:0;bottom:-30px;width:16px;height:30px;background:#cc6055;}
.heroimg .frame:after{content:'';position:absolute;right:0;bottom:-30px;width:16px;height:30px;background:#cc6055;}
.sec{padding:22px 42px 0;}
.sectitle{font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#1d4354;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:206px;border:1px solid #d3d3d3;}
.thumb{height:140px;}
.body2{padding:12px;}
.pname{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;}
.pprice{font-size:13px;color:#cc6055;font-weight:700;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Mamagreen</div>
<div class="navlinks"><div>Seating</div><div>Dining</div><div>Loungers</div><div>Accessories</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Luxury Through Restraint</h1>
<p>Powder-coated aluminum and woven rope, engineered for the outdoors and precise in every line.</p>
<div class="btn">View Collection</div>
</div>
<div class="heroimg"><div class="frame"></div></div>
</div>
<div class="sec">
<div class="sectitle">Outdoor Seating</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1d4354,#e9e6ed);"></div><div class="body2"><div class="pname">Nautic Lounge Chair</div><div class="pprice">$1,890</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#cc6055,#e9e6ed);"></div><div class="body2"><div class="pname">Coast Dining Set</div><div class="pprice">$3,240</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7a9caa,#fcfbfe);"></div><div class="body2"><div class="pname">Teak Side Table</div><div class="pprice">$680</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3e6ae1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3e6ae1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a3b6ec; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3e6ae1; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3e6ae1; color: #f5f5f5;
border: 1px solid #5b80e4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a3b6ec; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5d82e6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#171A20; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { position:relative; height:640px; width:960px;
background:linear-gradient(180deg,#dfe6ea 0%,#eef1f2 42%,#e2e2e2 58%,#c9c9c9 100%); }
nav { position:absolute; top:0; left:0; right:0; z-index:3; height:56px; display:flex;
align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:16px; font-weight:500; letter-spacing:2px; color:#171A20; }
.navlinks { display:flex; gap:30px; }
.navlinks span { font-size:14px; font-weight:500; color:#171A20; }
.navcta { display:flex; gap:10px; }
.btn { border-radius:4px; font-size:14px; font-weight:500; padding:9px 20px; min-height:40px;
display:flex; align-items:center; border:3px solid transparent; transition:background-color .33s; }
.btn-blue { background:#3E6AE1; color:#ffffff; }
.btn-ghost { background:rgba(255,255,255,0.7); color:#171A20; border-color:rgba(255,255,255,0.7); }
.skyline { position:absolute; left:0; right:0; bottom:210px; height:120px; z-index:1; opacity:.5;
background:linear-gradient(180deg,transparent,#c9c9c9 90%); }
.carwrap { position:absolute; left:50%; bottom:150px; transform:translateX(-50%); z-index:2; width:640px; height:150px; }
.shadow { position:absolute; left:60px; right:60px; bottom:0; height:20px; border-radius:50%;
background:radial-gradient(ellipse at center, rgba(0,0,0,0.28), transparent 72%); }
.body1 { position:absolute; left:40px; right:40px; bottom:24px; height:74px; border-radius:40px 60px 30px 20px;
background:linear-gradient(180deg,#20242b,#171A20 70%); }
.cabin { position:absolute; left:190px; right:170px; bottom:70px; height:50px; border-radius:60px 90px 10px 10px;
background:linear-gradient(160deg,#2a2f38,#171A20); }
.glass { position:absolute; left:210px; right:190px; bottom:78px; height:28px; border-radius:40px 70px 4px 4px;
background:linear-gradient(120deg,#7d93b8,#b9c7dc 55%,#e7edf5); opacity:.9; }
.wheel { position:absolute; bottom:14px; width:56px; height:56px; border-radius:50%; background:#0e1013;
box-shadow:inset 0 0 0 6px #3a3f47; }
.w1 { left:110px; } .w2 { right:110px; }
.promo { position:relative; z-index:3; text-align:center; padding-top:96px; }
.badge { display:inline-block; background:#3E6AE1; color:#fff; font-size:22px; margin-bottom:10px; font-weight:400; }
.modelname { font-size:40px; font-weight:500; margin:2px 0 6px; letter-spacing:normal; color:#171A20; }
.sub { font-size:14px; color:#393C41; margin-bottom:20px; }
.ctas { display:flex; gap:12px; justify-content:center; }
.strip { position:absolute; left:0; right:0; bottom:0; z-index:3; height:88px; background:rgba(255,255,255,0.86);
display:flex; align-items:center; justify-content:center; gap:56px; border-top:1px solid #EEEEEE; }
.veh { text-align:center; }
.veh .name { font-size:17px; font-weight:500; color:#171A20; }
.veh .links { display:flex; gap:14px; justify-content:center; margin-top:4px; }
.veh .links span { font-size:12px; color:#5C5E62; }
</style></head>
<body>
<div class="hero">
<nav>
<div class="brand">Tesla</div>
<div class="navlinks"><span>Vehicles</span><span>Energy</span><span>Charging</span><span>Discover</span><span>Shop</span></div>
<div class="navcta"><button class="btn btn-ghost">Existing Owners</button><button class="btn btn-blue">Order Now</button></div>
</nav>
<div class="skyline"></div>
<div class="carwrap">
<div class="shadow"></div>
<div class="body1"></div>
<div class="cabin"></div>
<div class="glass"></div>
<div class="wheel w1"></div>
<div class="wheel w2"></div>
</div>
<div class="promo">
<div class="badge">0% APR Available</div>
<div class="modelname">Model 3</div>
<div class="sub">Starting at $38,990 after potential savings</div>
<div class="ctas"><button class="btn btn-blue">Order Now</button><button class="btn btn-ghost" style="border:1.5px solid #171A20;background:transparent;">View Inventory</button></div>
</div>
<div class="strip">
<div class="veh"><div class="name">Model S</div><div class="links"><span>Learn</span><span>Order</span></div></div>
<div class="veh"><div class="name">Model X</div><div class="links"><span>Learn</span><span>Order</span></div></div>
<div class="veh"><div class="name">Model Y</div><div class="links"><span>Learn</span><span>Order</span></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #f06bb8;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #f06bb8;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.35; margin: 0; color: #f06bb8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #a8b3bc; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #00ed64; color: #001e2b;
border: none; border-radius: 9999px; padding: 10px 22px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: transparent; color: #001e2b;
border: 1px solid #00ed64; border-radius: 9999px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #001e2b;
border: 1px solid #fbdaed; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a8b3bc; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background: #00ed64; color: #001e2b;
border-radius: 6px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#001e2b; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
/* 상단: 딥 틸 다크 히어로 + 브라이트 그린 필 CTA (MongoDB 의 상징).
하단: 순백 문서/가격 표면 — 이 이분법 자체가 브랜드의 핵심 시각언어. */
.hero { background:linear-gradient(160deg,#001e2b,#003d4f 70%); height:260px; position:relative; overflow:hidden; }
.leaf { position:absolute; width:340px; height:340px; border-radius:48% 52% 55% 45%/55% 45% 55% 45%;
background:#00684a; opacity:0.35; right:-90px; top:-60px; }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:17px; font-weight:600; color:#fff; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; color:rgba(255,255,255,0.75); }
.btn-green { background:#00ed64; color:#001e2b; border:none; border-radius:6px; padding:9px 20px; font-weight:700; font-size:13px; }
.herocopy { position:relative; z-index:2; padding:16px 40px 0; }
.herocopy .tag { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#00ed64; }
.herocopy h1 { font-size:38px; font-weight:500; letter-spacing:-1px; margin:10px 0 0; color:#fff; max-width:520px; line-height:1.15; }
.herocopy .btn-green { margin-top:16px; display:inline-block; }
.pricing { display:flex; gap:16px; padding:26px 40px; }
.tier { flex:1; border:1px solid #e1e5e8; border-radius:10px; padding:18px; }
.tier.mid { border:2px solid #00ed64; position:relative; }
.tier .badge { position:absolute; top:-11px; left:16px; background:#00ed64; color:#001e2b; font-size:10px; font-weight:700;
border-radius:999px; padding:3px 10px; }
.tier h4 { font-size:14px; font-weight:600; margin:0 0 4px; color:#3d4f5b; }
.tier .price { font-size:26px; font-weight:600; margin:0 0 8px; }
.tier .price span { font-size:12px; color:#7c8c9a; font-weight:400; }
.tier ul { list-style:none; margin:0; padding:0; font-size:12px; color:#3d4f5b; }
.tier li { padding:3px 0; }
.tier li::before { content:"✓ "; color:#00a35c; font-weight:700; }
footer { border-top:1px solid #e1e5e8; padding:14px 40px; display:flex; justify-content:space-between;
font-size:11px; color:#7c8c9a; }
</style></head>
<body>
<div class="hero">
<div class="leaf"></div>
<nav>
<p class="brand">MongoDB</p>
<div class="navlinks"><span>Atlas</span><span>University</span><span>AI use cases</span><span>Pricing</span></div>
<button class="btn-green">Try free</button>
</nav>
<div class="herocopy">
<span class="tag">MongoDB Atlas</span>
<h1>The database for the AI era</h1>
</div>
</div>
<div class="pricing">
<div class="tier"><h4>Free</h4><div class="price">$0</div><ul><li>512MB storage</li><li>Shared cluster</li></ul></div>
<div class="tier mid"><span class="badge">Popular</span><h4>Flex</h4><div class="price">$8<span>/mo</span></div><ul><li>Auto-scaling</li><li>5GB storage</li></ul></div>
<div class="tier"><h4>Dedicated</h4><div class="price">$57<span>/mo</span></div><ul><li>Dedicated resources</li><li>Advanced security</li></ul></div>
</div>
<footer>
<span>© MongoDB</span>
<span>Atlas · University · Community · Pricing</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212225;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212225;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #212225; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.57; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #314438; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #314438;
border: 1px solid #314438; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.6; background: #ffffff; color: #212225;
border: 1px solid #d6dad7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #da5f4d; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212225; box-sizing:border-box;
font-family:'Quicksand', sans-serif; }
* { box-sizing:border-box; }
.announce { height:36px; background:#272d45; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; }
.announce a { color:#b2f9e9; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; border-bottom:1px solid #e5e5e5; }
.brand { color:#314438; font-size:19px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; }
.navlinks span:first-child { color:#314438; border-bottom:2px solid #314438; padding-bottom:6px; }
.pdp { display:flex; padding:20px 36px; gap:26px; }
.gallery { flex:1; }
.mainimg { height:190px; border-radius:12px; background:linear-gradient(155deg,#9fb59e,#314438 80%); position:relative; margin-bottom:8px; }
.mainimg::before { content:''; position:absolute; left:50%; top:20px; transform:translateX(-50%); width:110px; height:130px;
border-radius:14px; background:#faf8f4; opacity:0.9; }
.thumbs { display:flex; gap:6px; }
.thumb { width:36px; height:36px; border-radius:6px; background:#f9f9f9; border:1px solid #e5e5e5; }
.info { flex:1; }
.info h1 { font-family:Georgia,serif; font-size:24px; font-weight:600; margin:0 0 6px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.price-lg { font-family:Georgia,serif; font-size:22px; font-weight:700; }
.price-old { color:#6b6b6b; text-decoration:line-through; font-size:14px; }
.stars { color:#00caaa; font-size:13px; margin-bottom:12px; }
.swatches { display:flex; gap:8px; margin-bottom:14px; }
.swatch { width:22px; height:22px; border-radius:50%; border:1px solid #d6dad7; }
.swatch.sel { border:2px solid #314438; }
.btn-primary { background:#314438; color:#fff; border:none; border-radius:8px; padding:13px 30px; font-size:15px; font-weight:700; width:100%; margin-bottom:8px; }
.btn-accent { background:#da5f4d; color:#fff; border:none; border-radius:8px; padding:11px 26px; font-size:13px; font-weight:700; }
.callout { border-left:4px solid #314438; background:#f3eeea; padding:10px 14px; font-size:12px; color:#333f48; border-radius:0 6px 6px 0; }
footer { background:#314438; color:#9fb59e; padding:12px 36px; display:flex; justify-content:space-between;
align-items:center; font-size:12px; }
footer span:last-child { color:#fff; }
</style></head>
<body>
<div class="announce">Free Shipping & 30-Day Trial on all chairs</div>
<nav>
<p class="brand">Branch Furniture Chairs</p>
<div class="navlinks"><span>Chairs</span><span>Desks</span><span>Accessories</span></div>
</nav>
<section class="pdp">
<div class="gallery">
<div class="mainimg"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<h1>The Ergonomic Chair</h1>
<div class="price-row"><span class="price-lg">$479</span><span class="price-old">$549</span></div>
<div class="stars">★★★★★ 4.7 (1,204 reviews)</div>
<div class="swatches"><div class="swatch sel"></div><div class="swatch"></div><div class="swatch"></div></div>
<button class="btn-primary">Add to Cart</button>
<button class="btn-accent">Compare Models</button>
<div class="callout" style="margin-top:14px;">Adjustable lumbar support, seat depth, and armrests — a chair for every posture, not just one.</div>
</div>
</section>
<footer>
<span>© Branch Furniture Chairs</span>
<span>30-Day Home Trial</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1E2B27;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1E2B27;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.25px; margin: 0; color: #1E2B27; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.6; letter-spacing: 0.1px; margin: 0; color: #768A85; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.1px; background: #5C8F7F; color: #FFFFFF;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.1px; background: #FFFFFF; color: #5C8F7F;
border: 1px solid #5C8F7F; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1E2B27;
border: 1px solid #c7cac9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #768A85; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.4px; background: #F3F8F6; color: #374740;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'DM Sans','Inter',system-ui,sans-serif; color:#374740; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #D1DFD9;}
.logo{font-size:20px;font-weight:600;color:#1E2B27;}
.navlinks{display:flex;gap:24px;font-size:15px;font-weight:500;color:#374740;}
.hero{height:260px;display:flex;align-items:center;padding:0 40px;background:#F3F8F6;}
.heroText{width:460px;}
.h1{font-size:32px;font-weight:600;line-height:1.3;color:#1E2B27;margin:0 0 14px;}
.sub{font-size:16px;color:#374740;line-height:1.6;margin:0 0 22px;width:400px;}
.cta{display:inline-flex;align-items:center;justify-content:center;width:180px;height:48px;background:#5C8F7F;color:#ffffff;font-size:16px;font-weight:600;border-radius:8px;}
.chips{display:flex;gap:8px;margin-top:18px;}
.chip{background:#F3F8F6;border:1px solid #D1DFD9;border-radius:9999px;padding:6px 14px;font-size:13px;font-weight:600;color:#374740;}
.leaf{position:relative;width:280px;height:200px;}
.leafshape{position:absolute;left:80px;top:30px;width:120px;height:150px;border-radius:60% 60% 40% 40%;background:radial-gradient(circle at 35% 30%,#B0D0C8,#5C8F7F 70%);}
.sec{padding:26px 40px 0;}
.secTitle{font-size:18px;font-weight:600;color:#1E2B27;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:210px;background:#ffffff;border:1px solid #D1DFD9;border-radius:12px;padding:16px;}
.thumb{height:96px;border-radius:8px;margin-bottom:12px;}
.pname{font-size:15px;font-weight:600;color:#1E2B27;margin:0 0 4px;}
.pprice{font-size:14px;color:#768A85;}
</style>
<div class="nav">
<div class="logo">Willow Hygiene</div>
<div class="navlinks"><span>Wipes</span><span>Skincare</span><span>Care Guides</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Gentle care, for every stage of life.</div>
<div class="sub">Fragrance-free hygiene essentials formulated with sensitive skin in mind.</div>
<div class="cta">Shop Essentials</div>
<div class="chips"><div class="chip">Fragrance-Free</div><div class="chip">Gentle pH</div><div class="chip">Hypoallergenic</div></div>
</div>
<div class="leaf"><div class="leafshape"></div></div>
</div>
<div class="sec">
<div class="secTitle">Trusted Essentials</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#5C8F7F,#F3F8F6);"></div><div class="pname">Gentle Cleansing Wipes</div><div class="pprice">$12.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#D4A96A,#F3F8F6);"></div><div class="pname">Barrier Cream</div><div class="pprice">$16.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#B0D0C8,#5C8F7F);"></div><div class="pname">Caregiver Starter Kit</div><div class="pprice">$34.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ddaa00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ddaa00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #6d5609; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f0163a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ddaa00; color: #000000;
border: 1px solid #f0163a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ddaa00; color: #111111;
border: 1px solid #bc9203; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d5609; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e09209; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#e6e6e6; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:50px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
background:#171717; }
.brand { color:#ddaa00; font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; }
.navlinks span { font-size:12px; font-weight:700; color:#e6e6e6; opacity:0.7; }
.search { background:#212121; border-radius:4px; height:30px; width:170px; display:flex; align-items:center;
padding:0 10px; font-size:11px; color:#999999; }
.chips { display:flex; gap:8px; padding:14px 28px 6px; }
.chip { border-radius:16px; height:28px; padding:0 14px; display:flex; align-items:center; font-size:12px; font-weight:700; }
.chip.on { background:#e6e6e6; color:#212121; }
.chip.off { background:#212121; color:#e6e6e6; }
.rail { padding:10px 28px 0; }
.rail h2 { font-size:15px; font-weight:700; margin:0 0 10px; }
.thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.thumb { position:relative; border-radius:4px; overflow:hidden; background:#212121; }
.thumb .art { height:76px; }
.thumb .meta { padding:8px; }
.thumb .meta .t { font-size:11px; font-weight:700; margin:0 0 3px; line-height:1.3; }
.thumb .meta .s { font-size:10px; color:#999999; }
.badge-live { position:absolute; top:6px; right:6px; background:#f0163a; color:#ffffff; border-radius:4px;
padding:2px 6px; font-size:10px; font-weight:700; }
.badge-new { position:absolute; bottom:64px; left:0; background:#f0163a; color:#ffffff; border-radius:0 4px 0 0;
padding:1px 6px; font-size:9px; font-weight:700; }
.art.a1 { background:linear-gradient(135deg,#3a2b00,#ddaa00); }
.art.a2 { background:linear-gradient(135deg,#2b0710,#f0163a); }
.art.a3 { background:linear-gradient(135deg,#0b1a17,#16deb5); }
.art.a4 { background:linear-gradient(135deg,#1e0a33,#a873ff); }
.art.b1 { background:linear-gradient(135deg,#0b1414,#02d1d6); }
.art.b2 { background:linear-gradient(135deg,#241d00,#ffc400); }
.art.b3 { background:linear-gradient(135deg,#111,#373737); }
.art.b4 { background:linear-gradient(135deg,#2b0710,#f0163a); }
</style></head>
<body>
<nav>
<p class="brand">ABEMA</p>
<div class="navlinks"><span>News</span><span>Sports</span><span>Anime</span><span>Shogi</span><span>Mahjong</span></div>
<div class="search">Search shows, channels…</div>
</nav>
<div class="chips">
<span class="chip on">For You</span>
<span class="chip off">News</span>
<span class="chip off">Sports</span>
<span class="chip off">Anime</span>
<span class="chip off">Drama</span>
</div>
<div class="rail">
<h2>Live Now</h2>
<div class="thumbs">
<div class="thumb"><div class="art a1"></div><span class="badge-live">LIVE</span><div class="meta"><p class="t">ABEMA Prime — Evening News Roundup</p><span class="s">News</span></div></div>
<div class="thumb"><div class="art a2"></div><span class="badge-live">LIVE</span><div class="meta"><p class="t">Pro League Finals, Match 3</p><span class="s">Sports</span></div></div>
<div class="thumb"><div class="art a3"></div><span class="badge-new">NEW</span><div class="meta"><p class="t">Season 4 Premiere — Wandering Blade</p><span class="s">Anime</span></div></div>
<div class="thumb"><div class="art a4"></div><div class="meta"><p class="t">Late Night Talk: Creators Roundtable</p><span class="s">Variety</span></div></div>
</div>
</div>
<div class="rail">
<h2>Recommended For You</h2>
<div class="thumbs">
<div class="thumb"><div class="art b1"></div><div class="meta"><p class="t">Shogi Open, Round 6</p><span class="s">Shogi</span></div></div>
<div class="thumb"><div class="art b2"></div><div class="meta"><p class="t">Weekend Mahjong Cup</p><span class="s">Mahjong</span></div></div>
<div class="thumb"><div class="art b3"></div><div class="meta"><p class="t">Documentary: The Next Future of TV</p><span class="s">Originals</span></div></div>
<div class="thumb"><div class="art b4"></div><span class="badge-live">LIVE</span><div class="meta"><p class="t">Breaking: City Council Vote</p><span class="s">News</span></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #262625;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #262625;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.25; margin: 0; color: #262625; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #a3a2a2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.8px; background: #457364; color: #ffffff;
border: none; border-radius: 0px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.8px; background: transparent; color: #262625;
border: 1px solid #457364; border-radius: 0px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.6; background: #ffffff; color: #262625;
border: 1px solid #c9c9c8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a3a2a2; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.27; letter-spacing: 1.5px; background: #e3ded8; color: #484747;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#262625; box-sizing:border-box;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e0e0de; }
.brand { font-size:19px; font-weight:400; letter-spacing:1px; text-transform:uppercase; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:14px; letter-spacing:0.5px; text-transform:uppercase; color:#262625; }
.hero { background:#e3ded8; min-height:230px; display:flex; align-items:center; padding:0 32px; gap:32px; }
.heroText { flex:1; max-width:400px; }
.headline { font-size:44px; font-weight:300; line-height:1.1; letter-spacing:-0.5px; margin-bottom:14px; }
.sub { font-size:16px; font-weight:300; color:#706f6f; line-height:1.5; margin-bottom:18px; }
.heroBtn { display:inline-block; background:#457364; color:#fff; padding:16px 32px; font-size:14px; font-weight:500;
letter-spacing:0.8px; text-transform:uppercase; }
.heroImg { flex:1; height:160px; background:linear-gradient(150deg,#b9b2a5,#8a8275); position:relative; }
.heroImg::after { content:''; position:absolute; left:30px; bottom:20px; width:150px; height:40px;
background:#484747; }
.section { padding:28px 32px 0; }
.section h2 { font-size:32px; font-weight:400; margin-bottom:4px; }
.section .desc { font-size:16px; font-weight:300; color:#706f6f; margin-bottom:18px; max-width:520px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.card { }
.photo { aspect-ratio:1/1; margin-bottom:12px; position:relative; }
.c1 .photo { background:linear-gradient(150deg,#b9b2a5,#706f6f); }
.c2 .photo { background:linear-gradient(150deg,#457364,#2b483f); }
.c3 .photo { background:linear-gradient(150deg,#e0e0de,#bbbbb9); }
.c4 .photo { background:linear-gradient(150deg,#484747,#282827); }
.matBadge { position:absolute; bottom:8px; left:8px; background:#e3ded8; color:#484747; font-size:11px;
letter-spacing:1.5px; text-transform:uppercase; padding:6px 12px; }
.collection { font-size:12px; color:#a3a2a2; text-transform:uppercase; letter-spacing:0.5px; }
.name { font-size:16px; font-weight:500; margin-top:2px; }
.price { font-size:14px; color:#706f6f; margin-top:2px; }
</style></head>
<body>
<nav>
<div class="brand">Gloster</div>
<div class="navlinks"><span>Lounge</span><span>Dining</span><span>Modular</span><span>Contract</span></div>
</nav>
<div class="hero">
<div class="heroText">
<div class="headline">Outdoor Living, Refined</div>
<div class="sub">Teak, aluminium, and all-weather wicker built for a lifetime outdoors.</div>
<div class="heroBtn">View Collection</div>
</div>
<div class="heroImg"></div>
</div>
<div class="section">
<h2>Grand Weave</h2>
<div class="desc">A modular lounge system in all-weather wicker, engineered for the way sunlight ages a material.</div>
<div class="grid">
<div class="card c1"><div class="photo"><div class="matBadge">Teak</div></div><div class="collection">Grand Weave</div><div class="name">Lounge Chair</div><div class="price">$1,890</div></div>
<div class="card c2"><div class="photo"><div class="matBadge">Aluminium</div></div><div class="collection">Grid</div><div class="name">Dining Table</div><div class="price">$3,240</div></div>
<div class="card c3"><div class="photo"><div class="matBadge">Wicker</div></div><div class="collection">Grand Weave</div><div class="name">Sofa Module</div><div class="price">$2,650</div></div>
<div class="card c4"><div class="photo"><div class="matBadge">Teak</div></div><div class="collection">Kay</div><div class="name">Side Table</div><div class="price">$690</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.3px; background: #cc0000; color: #ffffff;
border: none; border-radius: 2px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.3px; background: #ffffff; color: #cc0000;
border: 1px solid #cc0000; border-radius: 2px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #666666;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,Helvetica,'Liberation Sans',sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#1a2b4a;}
.logo{font-size:18px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:700;color:#c9d3e0;}
.navcta{background:#cc0000;color:#fff;font-size:11px;font-weight:700;padding:8px 14px;border-radius:2px;}
.hero{height:150px;display:flex;align-items:center;padding:0 36px;background:#f5f5f5;border-bottom:1px solid #cccccc;}
.herotext{width:600px;}
.h1{font-size:22px;font-weight:700;color:#1a1a1a;margin:0 0 6px;}
.sub{font-size:12px;color:#666666;margin:0;}
.partsearch{margin-left:auto;width:220px;height:34px;border:1px solid #cccccc;border-radius:2px;font-size:11px;color:#999999;display:flex;align-items:center;padding:0 10px;background:#fff;}
.filterbar{display:flex;gap:1px;background:#cccccc;}
.fcell{flex:1;background:#f0f4f8;text-align:center;padding:8px;font-size:10px;font-weight:700;color:#1a2b4a;text-transform:uppercase;letter-spacing:.3px;}
.tablewrap{padding:14px 36px 0;}
.tabletitle{font-size:13px;font-weight:700;text-transform:uppercase;color:#1a1a1a;margin-bottom:8px;}
table{width:100%;border-collapse:collapse;font-size:11px;}
th{background:#1a2b4a;color:#fff;text-align:left;padding:6px 8px;font-size:10px;text-transform:uppercase;}
td{padding:6px 8px;border-bottom:1px solid #e5e5e5;}
tr:nth-child(even) td{background:#f9f9f9;}
.pn{color:#0057a8;font-weight:700;}
.compliance{color:#4caf50;font-weight:700;}
</style>
<div class="nav">
<div class="logo">Omega Engineering</div>
<div class="navlinks"><span>Temperature</span><span>Pressure</span><span>Data Acquisition</span><span>Calibration</span></div>
<div class="navcta">Request a Quote</div>
</div>
<div class="hero">
<div class="herotext">
<div class="h1">Thermocouples and DAQ hardware, spec'd to the standard.</div>
<div class="sub">Sixty years of instrumentation engineering, organized by part number.</div>
</div>
<div class="partsearch">Search part number...</div>
</div>
<div class="filterbar">
<div class="fcell">Type K</div>
<div class="fcell">Type J</div>
<div class="fcell">RTD</div>
<div class="fcell">Pressure Transducer</div>
<div class="fcell">Data Loggers</div>
</div>
<div class="tablewrap">
<div class="tabletitle">Featured Part Numbers</div>
<table>
<tr><th>Part No.</th><th>Description</th><th>Range</th><th>Compliance</th><th>Price</th></tr>
<tr><td class="pn">TT-K-24</td><td>Type K Thermocouple Wire</td><td>-200 to 1250°C</td><td class="compliance">RoHS</td><td>$0.85 / ft</td></tr>
<tr><td class="pn">PX309-500GI</td><td>Pressure Transducer</td><td>0-500 psi</td><td class="compliance">NIST Traceable</td><td>$385.00</td></tr>
<tr><td class="pn">OM-DAQ-USB-2401</td><td>USB Data Acquisition Module</td><td>24-bit, 8ch</td><td class="compliance">CE Certified</td><td>$1,295.00</td></tr>
<tr><td class="pn">RTD-NPT-72-E-U</td><td>RTD Probe Assembly</td><td>-50 to 260°C</td><td class="compliance">RoHS</td><td>$142.00</td></tr>
</table>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #003388;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #003388;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; margin: 0; color: #003388; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #ee5d35; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #003388;
border: 1px solid #ee5d35; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.63; background: #ffffff; color: #313131;
border: 1px solid #bfcce1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #003388; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#eeeeee; font-family:'Lato',Arial,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:56px;background:#003388;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:700;color:#cfe0f5;}
.hero{height:222px;background:#fff;display:flex;align-items:center;padding:0 32px;}
.heroText{width:430px;}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#ee5d35;margin-bottom:10px;}
.h1{font-size:30px;font-weight:700;line-height:1.2;color:#003388;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.5;color:#313131;margin:0 0 18px;max-width:370px;}
.btn{display:inline-block;background:#ee5d35;color:#fff;font-size:13px;font-weight:700;padding:12px 26px;border-radius:9999px;}
.gearWrap{margin-left:auto;width:150px;height:150px;position:relative;}
.gear1{position:absolute;width:80px;height:80px;border-radius:50%;background:#003388;top:10px;left:10px;}
.gear2{position:absolute;width:60px;height:60px;border-radius:50%;background:#ee5d35;bottom:0;right:0;}
.sec{padding:20px 32px 0;}
.secTitle{font-size:17px;font-weight:700;color:#003388;margin-bottom:14px;}
.grid{display:flex;gap:12px;}
.card{width:224px;background:#fff;border-radius:8px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#003388;color:#fff;font-size:9px;font-weight:700;padding:3px 9px;border-radius:9999px;}
.thumb{height:90px;background:#eeeeee;border-radius:8px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:700;color:#003388;margin:0 0 4px;}
.pprice{font-size:13px;font-weight:700;color:#ee5d35;}
</style>
<div class="nav">
<div class="logo">Tinkering Labs</div>
<div class="navlinks"><div>Kits</div><div>Classroom Sets</div><div>Refills</div><div>Ages 8+</div></div>
</div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">Messy. Creative. Real.</div>
<div class="h1">Engineering kits kids actually build.</div>
<div class="sub">Motors, gears, and circuits for the moment a kid's hand first touches a wire.</div>
<div class="btn">Shop Kits</div>
</div>
<div class="gearWrap"><div class="gear1"></div><div class="gear2"></div></div>
</div>
<div class="sec">
<div class="secTitle">Popular Kits</div>
<div class="grid">
<div class="card"><div class="badge">Ages 8+</div><div class="thumb" style="background:linear-gradient(135deg,#ee5d35,#003388);"></div><div class="pname">Motor Movement Kit</div><div class="pprice">$59</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003388,#00d084);"></div><div class="pname">Circuit Building Set</div><div class="pprice">$44</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#34e2e4,#003388);"></div><div class="pname">Gear Ratio Explorer</div><div class="pprice">$39</div></div>
<div class="card"><div class="badge" style="background:#ee5d35;">New</div><div class="thumb" style="background:linear-gradient(135deg,#7a00df,#ee5d35);"></div><div class="pname">Classroom Set of 6</div><div class="pprice">$249</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #232145;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #232145;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #232145; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7a7a9a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; background: #ffbd59; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; background: #ffffff; color: #232145;
border: 1px solid #ffbd59; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #3a3a5c;
border: 1px solid #c8c8d0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a9a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.2px; background: #ace6ce; color: #232145;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#232145; box-sizing:border-box;
font-family:'Gilroy', 'Inter', -apple-system, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:64px; background:#232145; color:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; }
.brand { font-size:18px; font-weight:500; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; }
.navlinks span:first-child { color:#ffbd59; }
.layout { display:flex; height:calc(640px - 64px); }
.media { width:380px; flex-shrink:0; background:#f7ebdb; position:relative; display:flex; align-items:center; justify-content:center; }
.roll { width:150px; height:150px; border-radius:50%; background:#ffffff; border:14px solid #ace6ce; position:relative; }
.roll::after { content:''; position:absolute; inset:40px; border-radius:50%; background:#f9eddd; }
.eco { position:absolute; top:20px; left:20px; background:#ace6ce; color:#232145; font-size:12px; font-weight:500;
text-transform:uppercase; letter-spacing:0.2px; border-radius:4px; padding:4px 10px; }
.detail { flex:1; padding:26px 34px; display:flex; flex-direction:column; gap:14px; }
.kicker { font-size:13px; color:#7a7a9a; }
h1 { font-size:28px; font-weight:500; margin:0; letter-spacing:-0.4px; }
.price { font-size:20px; font-weight:500; }
.badges { display:flex; gap:8px; }
.badge { background:#86dbb8; color:#232145; font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:0.2px;
border-radius:4px; padding:4px 10px; }
.toggle { display:flex; background:#f7ebdb; border-radius:999px; padding:4px; gap:4px; width:fit-content; }
.toggle .opt { padding:8px 20px; border-radius:999px; font-size:14px; }
.toggle .opt.active { background:#ffbd59; color:#ffffff; font-weight:500; }
.toggle .opt:not(.active) { color:#3a3a5c; }
.review { background:#f9eddd; border-radius:12px; padding:14px 16px; font-size:14px; color:#3a3a5c; margin-top:2px; }
.review .stars { color:#ffbd59; font-size:13px; margin-bottom:4px; }
.actions { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#ffbd59; color:#ffffff; border:none; border-radius:8px; height:44px; font-size:15px; font-weight:500; }
.btn-secondary { background:#ffffff; color:#232145; border:2px solid #232145; border-radius:8px; height:44px; padding:0 20px; font-size:15px; font-weight:500; }
</style></head>
<body>
<div class="topbar">
<div class="brand">Cloud Paper</div>
<div class="navlinks"><span>Toilet Paper</span><span>Paper Towels</span><span>Tissues</span><span>Our Mission</span></div>
</div>
<div class="layout">
<div class="media">
<div class="eco">Plastic-Free</div>
<div class="roll"></div>
</div>
<div class="detail">
<div class="kicker">Bamboo Bath Tissue</div>
<h1>Cloud Paper Bath Tissue, 24-Pack</h1>
<div class="price">$34.00 · $1.42/roll</div>
<div class="badges"><span class="badge">100% Plastic-Free</span><span class="badge">Bamboo</span></div>
<div class="toggle">
<div class="opt">One-Time</div>
<div class="opt active">Subscribe & Save 15%</div>
</div>
<div class="review">
<div class="stars">★★★★★</div>
Softer than I expected and the wrapping is actually recyclable. — Maria T.
</div>
<div class="actions">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Learn More</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #24292e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #24292e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; letter-spacing: -0.2px; margin: 0; color: #24292e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #9ca3af; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.1px; background: #e7fd39; color: #24292e;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.1px; background: #ffffff; color: #24292e;
border: 1px solid #e7fd39; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #24292e;
border: 1px solid #c4c6c7; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ca3af; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.88px; background: #e15748; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>iRocker</title>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#fafafa;font-family:'Inter','Segoe UI',Arial,sans-serif;color:#596066;}
*{box-sizing:border-box;}
.promo{position:absolute;top:0;left:0;width:960px;height:30px;background:#e7fd39;color:#24292e;font-size:11px;font-weight:700;letter-spacing:0.88px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;}
.nav{position:absolute;top:30px;left:0;width:960px;height:56px;background:#003343;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fafafa;font-weight:700;font-size:17px;}
.logo b{color:#e7fd39;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#fafafa;}
.navcta{background:#e7fd39;color:#24292e;font-size:13px;font-weight:600;border-radius:4px;padding:9px 18px;}
.hero{position:absolute;top:86px;left:0;width:960px;height:250px;background:#003343;display:flex;align-items:center;padding:0 60px;}
.hero::after{content:'';position:absolute;right:0;top:0;width:340px;height:250px;background:linear-gradient(160deg,#125b6f,#246f85);opacity:0.5;}
.hero h1{color:#fafafa;font-size:44px;font-weight:700;letter-spacing:-1px;margin:0 0 16px 0;width:460px;line-height:1.1;}
.cta{background:#e7fd39;color:#24292e;font-size:16px;font-weight:600;border-radius:4px;padding:14px 28px;display:inline-block;}
.board{position:absolute;right:70px;top:70px;width:220px;height:60px;background:linear-gradient(90deg,#e7fd39,#cae320);border-radius:30px;transform:rotate(-8deg);}
.chiprow{position:absolute;top:352px;left:36px;width:888px;height:36px;display:flex;gap:12px;}
.chip{background:#e0f5fb;color:#125b6f;border:1px solid #1cc6e3;border-radius:9999px;font-size:13px;font-weight:600;padding:8px 18px;}
.chip.active{background:#00a2bf;color:#fff;border:none;}
.grid{position:absolute;top:404px;left:36px;width:888px;height:206px;display:flex;gap:16px;}
.card{width:212px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:16px;position:relative;}
.imgbox{width:180px;height:100px;border-radius:4px;margin-bottom:10px;}
.imgbox.a{background:linear-gradient(135deg,#00a2bf,#1cc6e3);}
.imgbox.b{background:linear-gradient(135deg,#125b6f,#246f85);}
.imgbox.c{background:linear-gradient(135deg,#003343,#125b6f);}
.imgbox.d{background:linear-gradient(135deg,#e15748,#c94636);}
.badge{position:absolute;top:10px;left:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.88px;border-radius:4px;padding:3px 8px;color:#fff;}
.badge.new{background:#e7fd39;color:#24292e;}
.badge.sale{background:#e15748;}
.title{font-size:16px;font-weight:600;color:#24292e;margin-bottom:6px;}
.price{font-size:26px;font-weight:700;color:#24292e;}
</style>
<div class="promo">FREE PADDLE UPGRADE ON ALL 2026 BOARDS</div>
<div class="nav">
<div class="logo"><b>Irocker</b></div>
<div class="navlinks"><span>All-Around</span><span>Touring</span><span>Fishing</span><span>Accessories</span></div>
<div class="navcta">Shop Boards</div>
</div>
<div class="hero">
<h1>Built for the water you actually paddle.</h1>
<div class="cta">Shop All Boards</div>
<div class="board"></div>
</div>
<div class="chiprow">
<div class="chip active">All-Around</div>
<div class="chip">Touring</div>
<div class="chip">Fishing</div>
<div class="chip">Yoga</div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox a"><div class="badge new">New</div></div>
<div class="title">Blackfin Model XL 11'6"</div>
<div class="price">$999</div>
</div>
<div class="card">
<div class="imgbox b"></div>
<div class="title">All Around 10'6" iSUP</div>
<div class="price">$699</div>
</div>
<div class="card">
<div class="imgbox c"><div class="badge sale">Sale</div></div>
<div class="title">Touring Pro 12'6"</div>
<div class="price">$1,199</div>
</div>
<div class="card">
<div class="imgbox d"></div>
<div class="title">Carbon Paddle 3-Piece</div>
<div class="price">$179</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #232323;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #232323;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #232323; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5a5a5d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #d9aa4d; color: #000000;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #fafafa; color: #232323;
border: 1px solid #d9aa4d; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #fafafa; color: #232323;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a5a5d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d9aa4d; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#fafafa; color:#232323; box-sizing:border-box; font-family:'Proxima Nova Rg',-apple-system,system-ui,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#232323; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:17px; font-weight:700; color:#fff; margin:0; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:500; color:#fff; }
.navlinks span.active { color:#d9aa4d; }
.gold-btn { background:#d9aa4d; color:#fff; border:none; border-radius:8px; padding:10px 22px; font-size:13px; font-weight:600; }
.main { display:flex; gap:24px; padding:24px 32px; height:456px; }
.gallery { width:400px; background:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center; position:relative; }
.ball { width:180px; height:180px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#3a3a3a,#232323); position:relative; }
.ball::before { content:''; position:absolute; inset:0; border-radius:50%;
background: repeating-linear-gradient(0deg, transparent 0 18px, rgba(217,170,77,0.5) 18px 20px); mask:radial-gradient(circle,#000 70%,transparent 71%); }
.badge-custom { position:absolute; top:16px; left:16px; background:#1f2937; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; padding:4px 10px; border-radius:4px; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; }
.info h1 { font-size:26px; font-weight:600; margin:0; letter-spacing:-0.3px; }
.stars { color:#f59e0b; font-size:12px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:24px; font-weight:700; }
.price-sale { color:#e22120; }
.price-old { color:#5c5c5c; text-decoration:line-through; font-size:13px; }
.desc { font-size:13px; line-height:1.55; color:#5c5c5c; max-width:440px; }
.size-row { display:flex; gap:8px; margin-top:4px; }
.size-chip { width:40px; height:40px; border:1px solid #dcdcdc; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; }
.size-chip.sel { background:#232323; color:#fff; border-color:#232323; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-cart { flex:1; height:48px; background:#232323; color:#fff; border:none; border-radius:8px; font-weight:600; font-size:15px; }
.btn-outline { flex:1; height:48px; background:transparent; color:#232323; border:2px solid #232323; border-radius:8px; font-weight:600; font-size:15px; }
.spec-strip { display:flex; gap:0; padding:0 32px; }
.spec-item { flex:1; text-align:center; padding:12px 0; border-right:1px solid #dcdcdc; }
.spec-item:last-child { border-right:none; }
.spec-item b { display:block; font-size:18px; font-weight:700; }
.spec-item span { font-size:10px; text-transform:uppercase; letter-spacing:0.5px; color:#5a5a5d; }
</style></head>
<body>
<nav>
<p class="brand">Baden Sports</p>
<div class="navlinks"><span class="active">Basketballs</span><span>Volleyballs</span><span>Team Gear</span><span>Custom</span></div>
<button class="gold-btn">Customize</button>
</nav>
<div class="main">
<div class="gallery">
<div class="badge-custom">Custom</div>
<div class="ball"></div>
</div>
<div class="info">
<h1>Elite Championship Basketball</h1>
<div class="stars">★★★★★ 4.9 (860 reviews)</div>
<div class="price-row">
<span class="price price-sale">$64.99</span>
<span class="price-old">$79.99</span>
</div>
<p class="desc">Official size and weight, moisture-wicking composite leather cover, and deep channel design for a consistent grip and true bounce — trusted by coaches and athletic directors nationwide.</p>
<div class="size-row">
<div class="size-chip sel">29.5"</div>
<div class="size-chip">28.5"</div>
<div class="size-chip">27.5"</div>
</div>
<div class="btn-row">
<button class="btn-cart">Add to Cart</button>
<button class="btn-outline">Bulk Order</button>
</div>
</div>
</div>
<div class="spec-strip">
<div class="spec-item"><b>29.5"</b><span>Official Size</span></div>
<div class="spec-item"><b>22oz</b><span>Weight</span></div>
<div class="spec-item"><b>8-Panel</b><span>Construction</span></div>
<div class="spec-item"><b>2-Yr</b><span>Warranty</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c1c1e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #1c1c1e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #040405; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
header { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.logo { font-weight:700; font-size:18px; letter-spacing:1px; }
.navlinks { display:flex; gap:26px; font-size:13px; color:#86868b; }
.hero { height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; gap:14px; background:radial-gradient(circle at 50% 30%,#161617,#000000); }
.hero h1 { font-size:44px; font-weight:700; letter-spacing:-1px; margin:0; }
.hero p { color:#86868b; font-size:15px; margin:0; }
.row { display:flex; gap:10px; }
.btn-w { background:#fff; color:#000; border-radius:4px; padding:12px 26px; font-size:14px; font-weight:500; }
.btn-ghost { background:transparent; color:#fff; border:1px solid #fff; border-radius:4px; padding:12px 26px; font-size:14px; font-weight:500; }
.spec-band { background:#000; padding:24px 40px 32px; }
.spec-title { font-size:12px; color:#86868b; margin-bottom:10px; letter-spacing:0.05em; }
.specrow { display:flex; border-bottom:1px solid #d2d2d7; padding:10px 0; }
.specrow .lbl { width:220px; color:#86868b; font-size:14px; }
.specrow .val { color:#1c1c1e; font-size:14px; }
.storefold { background:#fff; color:#1c1c1e; padding:28px 40px; display:flex; gap:16px; }
.tile { flex:1; background:#fff; border-radius:8px; padding:20px; text-align:center; }
.tile .img { height:60px; border-radius:6px; background:linear-gradient(135deg,#f5f5f7,#1c1c1e); margin-bottom:12px; }
.tile h4 { font-size:16px; margin:0 0 6px; }
.tile p { font-size:12px; color:#86868b; margin:0 0 12px; }
.tile .cta { display:inline-block; background:#000; color:#fff; border-radius:4px; padding:8px 20px; font-size:12px; }
</style></head>
<body>
<header>
<span class="logo">DJI</span>
<div class="navlinks"><span>Mavic</span><span>Air</span><span>Osmo</span><span>Enterprise</span><span>Support</span></div>
</header>
<section class="hero">
<h1>See It All.</h1>
<p>Up to 51 minutes of flight time. Transmission range 20km.</p>
<div class="row"><button class="btn-w">Buy Now</button><button class="btn-ghost">Learn More</button></div>
</section>
<section style="background:#fff; color:#1c1c1e;">
<div class="spec-band" style="background:#fff;">
<div class="spec-title">SPECIFICATIONS</div>
<div class="specrow"><span class="lbl">Max Flight Time</span><span class="val">51 min</span></div>
<div class="specrow"><span class="lbl">Max Transmission Range</span><span class="val">20 km (FCC)</span></div>
<div class="specrow"><span class="lbl">Sensor</span><span class="val">1-inch CMOS, 20MP</span></div>
</div>
</section>
<section class="storefold">
<div class="tile"><div class="img"></div><h4>Mavic 4 Pro</h4><p>The flagship, refined.</p><div class="cta">Buy Now</div></div>
<div class="tile"><div class="img"></div><h4>Air 3S</h4><p>Compact power, everyday flight.</p><div class="cta">Learn More</div></div>
<div class="tile"><div class="img"></div><h4>Osmo Pocket</h4><p>Just Fly. Just shoot.</p><div class="cta">Pre-order</div></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #222021;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #222021;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: #222021; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6d6d6d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #f55a19; color: #ffffff;
border: none; border-radius: 4px; padding: 13px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #fafafa; color: #222021;
border: 1px solid #f55a19; border-radius: 4px;
padding: 12px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #222021;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d6d6d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; background: #f55a19; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; color:#4c4c4c; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#fff;border-bottom:1px solid #dedede;}
.logo{font-size:19px;font-weight:700;color:#222021;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;}
.navlinks .on{color:#f55a19;font-weight:600;}
.promo{margin:14px 36px 0;height:38px;border-radius:8px;background:#4e34e0;color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;letter-spacing:.3px;}
.hero{height:214px;display:flex;padding:20px 36px 0;gap:26px;}
.htext{width:44%;display:flex;flex-direction:column;justify-content:center;}
.htext h1{font-size:26px;font-weight:600;color:#222021;margin:0 0 10px;line-height:1.25;}
.htext p{font-size:13.5px;color:#676986;margin:0 0 16px;max-width:280px;line-height:1.5;}
.cta{width:fit-content;background:#f55a19;color:#fff;font-size:13px;font-weight:600;padding:10px 20px;border-radius:8px;}
.himg{flex:1;background:#ede6e0;border-radius:10px;position:relative;overflow:hidden;}
.stand{position:absolute;left:120px;bottom:14px;width:8px;height:120px;background:#676986;border-radius:4px;}
.standbase{position:absolute;left:90px;bottom:8px;width:70px;height:8px;border-radius:4px;background:#1b1c21;}
.standtray{position:absolute;left:90px;bottom:96px;width:70px;height:36px;border-radius:6px;background:linear-gradient(140deg,#00eab6,#0e7a82);}
.seclabel{padding:14px 36px 10px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#6d6d6d;}
.grid{display:flex;gap:14px;padding:0 36px;}
.card{width:150px;background:#fff;border:1px solid #dedede;border-radius:8px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#00eab6;color:#1b1c21;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 7px;border-radius:9999px;}
.thumb{height:76px;border-radius:6px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:600;color:#222021;height:30px;overflow:hidden;line-height:1.3;}
.price{font-size:13px;font-weight:700;color:#f55a19;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Satechi Stands</div>
<div class="navlinks"><div class="on">Stands</div><div>Mounts</div><div>Docking</div><div>Support</div></div>
</div>
<div class="promo">Bundle & Save — Stand + Charger Sets Now Live</div>
<div class="hero">
<div class="htext">
<h1>Hold your device.<br>Free your desk.</h1>
<p>Aluminum stands and risers engineered to lift every screen to eye level.</p>
<div class="cta">Shop Stands</div>
</div>
<div class="himg"><div class="stand"></div><div class="standbase"></div><div class="standtray"></div></div>
</div>
<div class="seclabel">Best Sellers</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(140deg,#4e34e0,#1b1c21)"></div><div class="pname">Aluminum Monitor Stand</div><div class="price">$59.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#00eab6,#0e7a82)"></div><div class="pname">Foldable Laptop Riser</div><div class="price">$44.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#cfc6bf,#676986)"></div><div class="pname">Adjustable Tablet Stand</div><div class="price">$34.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#676986,#1b1c21)"></div><div class="pname">Dual Monitor Arm</div><div class="price">$129.99</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1f1f1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1f1f1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.11px; margin: 0; color: #1f1f1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #e30613; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #1f1f1f;
border: 1px solid #e30613; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1f1f1f;
border: 1px solid #c7c7c7; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.8px; background: #ffb503; color: #1f1f1f;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1f1f1f; box-sizing:border-box;
font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #dedede; }
.brand { font-size:19px; font-weight:700; letter-spacing:-0.3px; color:#1f1f1f; }
.tabs { display:flex; gap:26px; font-size:13px; color:#737373; font-weight:600; }
.tabs .on { color:#e30613; }
.cart { width:34px; height:34px; border-radius:6px; background:#f2f2f2; }
.hero { display:flex; height:260px; }
.hero-copy { flex:1; padding:36px 40px; display:flex; flex-direction:column; justify-content:center; gap:12px; }
.kicker { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#ffb503; }
.hero-copy h1 { margin:0; font-size:34px; font-weight:700; letter-spacing:-0.6px; line-height:1.15; }
.hero-copy p { margin:0; font-size:13.5px; color:#737373; max-width:360px; line-height:1.5; }
.btn-primary { align-self:flex-start; margin-top:6px; background:#e30613; color:#ffffff; border:none;
border-radius:6px; padding:11px 22px; font-size:13px; font-weight:700; }
.hero-art { flex:1; background:#f2f2f2; position:relative; }
.blade { position:absolute; right:70px; top:60px; width:180px; height:12px; background:#bfbfbf;
border-radius:6px; transform:rotate(-18deg); }
.handle { position:absolute; right:200px; top:150px; width:110px; height:22px; background:#e30613;
border-radius:10px; transform:rotate(-18deg); }
.row { display:flex; gap:1px; background:#dedede; height:calc(640px - 260px - 72px); }
.card { flex:1; background:#ffffff; padding:20px; display:flex; flex-direction:column; gap:8px; }
.thumb { height:96px; border-radius:6px; background:#f2f2f2; position:relative; }
.badge { position:absolute; top:8px; left:8px; background:#ffb503; color:#1f1f1f; font-size:10px;
font-weight:700; padding:3px 8px; border-radius:9999px; }
.name { font-size:13px; font-weight:600; }
.stars { font-size:11px; color:#f2b600; }
.price { font-size:14px; font-weight:700; }
.price .old { color:#bfbfbf; font-weight:500; text-decoration:line-through; margin-left:6px; font-size:12px; }
</style></head>
<body>
<div class="topbar">
<div class="brand">Felco</div>
<div class="tabs"><span class="on">Pruning</span><span>Cutting</span><span>Maintenance</span></div>
<div class="cart"></div>
</div>
<div class="hero">
<div class="hero-copy">
<span class="kicker">Since 1948</span>
<h1>Precision that outlasts the orchard.</h1>
<p>Forged-aluminum handles, hardened-steel blades — the red grip nurseries and vineyards trust for seven decades.</p>
<button class="btn-primary">Shop Pruning Shears</button>
</div>
<div class="hero-art"><div class="blade"></div><div class="handle"></div></div>
</div>
<div class="row">
<div class="card">
<div class="thumb"><span class="badge">Bestseller</span></div>
<div class="name">Classic Manual Model 2</div>
<div class="stars">★★★★★ 4.8</div>
<div class="price">$74.90</div>
</div>
<div class="card">
<div class="thumb"></div>
<div class="name">Vinegrower F5</div>
<div class="stars">★★★★☆ 4.6</div>
<div class="price">$96.00<span class="old">$112</span></div>
</div>
<div class="card">
<div class="thumb"><span class="badge">New</span></div>
<div class="name">Power Blade P1</div>
<div class="stars">★★★★★ 4.9</div>
<div class="price">$219.00</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfcfc; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfcfc; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #ff5501; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #fcfcfc; color: #1a1a1a;
border: 1px solid #ff5501; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fcfcfc; color: #1a1a1a;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff5501; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Gadget Guard</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fcfcfc; font-family:'acumin-pro','Open Sans','Helvetica Neue',Arial,sans-serif; color:#303030; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e8e8e8;}
.logo{font-size:19px;font-weight:700;color:#1a1a1a;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;letter-spacing:0.25px;}
.navlinks span.active{border-bottom:2px solid #ff5501;padding-bottom:20px;}
.search-pill{background:#f6f6f6;border:1px solid #e8e8e8;border-radius:9999px;padding:8px 18px;font-size:13px;color:#7d7d7d;width:200px;}
.hero{background:#f6f6f6;padding:36px 32px;min-height:210px;display:flex;align-items:center;gap:30px;}
.hero-copy{flex:1;}
h1{font-size:36px;font-weight:700;line-height:1.2;letter-spacing:-0.5px;margin:0 0 12px;}
.sub{font-size:15px;color:#555;margin:0 0 20px;max-width:400px;}
.cta{background:#ff5501;color:#fff;border:none;border-radius:8px;padding:14px 32px;font-size:16px;font-weight:600;letter-spacing:0.25px;}
.phone-graphic{width:260px;height:170px;position:relative;}
.phone{position:absolute;top:0;left:80px;width:90px;height:170px;background:#1a1a1a;border-radius:14px;border:4px solid #303030;}
.screen{position:absolute;top:8px;left:8px;right:8px;bottom:8px;background:linear-gradient(160deg,#499bf8,#006bb4);border-radius:8px;}
.shield{position:absolute;top:60px;left:40px;width:36px;height:44px;background:#ff5501;clip-path:polygon(50% 0,100% 20%,100% 60%,50% 100%,0 60%,0 20%);}
.section{padding:22px 32px 0;}
.section h2{font-size:20px;font-weight:600;margin:0 0 14px;}
.grid{display:flex;gap:16px;}
.card{flex:1;background:#fff;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden;}
.card-img{background:#f6f6f6;height:110px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:9999px;color:#fff;}
.badge.sale{background:#ff5501;}
.badge.new{background:#006bb4;}
.card-body{padding:10px 12px 14px;}
.card-title{font-size:18px;font-weight:600;}
.card-price{font-size:16px;margin-top:6px;}
.rating{font-size:11px;color:#c07600;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Gadget Guard</div>
<div class="navlinks"><span class="active">Screen Protectors</span><span>Cases</span><span>Chargers</span></div>
<input class="search-pill" placeholder="Search products...">
</div>
<div class="hero">
<div class="hero-copy">
<h1>Protection that<br>actually holds up</h1>
<p class="sub">Impact-tested screen protectors and cases engineered to guard the phone you can't afford to crack.</p>
<button class="cta">Shop Protection</button>
</div>
<div class="phone-graphic"><div class="phone"><div class="screen"></div></div><div class="shield"></div></div>
</div>
<div class="section">
<h2>Best sellers</h2>
<div class="grid">
<div class="card"><div class="card-img"><div class="badge sale">Sale</div></div><div class="card-body"><div class="card-title">Black Ice Screen Guard</div><div class="rating">★★★★★ 4.7</div><div class="card-price">$29.99</div></div></div>
<div class="card"><div class="card-img"><div class="badge new">New</div></div><div class="card-body"><div class="card-title">Guardian Case</div><div class="rating">★★★★☆ 4.4</div><div class="card-price">$34.99</div></div></div>
<div class="card"><div class="card-img"></div><div class="card-body"><div class="card-title">Rapid Charge Cable</div><div class="rating">★★★★★ 4.8</div><div class="card-price">$19.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00512a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00512a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87ab9a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #26a862; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00512a; color: #26a862;
border: 1px solid #26a862; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00512a; color: #f5f5f5;
border: 1px solid #276b4a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87ab9a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #065f33; color: #26a862;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#333333; box-sizing:border-box;
font-family:'Roboto Flex','Noto Sans TC',"PingFang TC","Microsoft JhengHei",sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; background:#fff; }
.brand { font-size:19px; font-weight:700; color:#00512a; margin:0; }
.navlinks { display:flex; gap:26px; font-size:16px; color:#333333; }
.btn-primary { background:#00512a; color:#fff; border:1px solid #00512a; border-radius:5px; height:44px; padding:0 20px; font-size:16px; }
.hero { padding:30px 40px 20px; text-align:center; background:linear-gradient(180deg,#f3fff7,#fafafa); }
.hero h1 { font-size:36px; font-weight:700; line-height:1.4; margin:0 0 8px; color:#333333; }
.hero p { font-size:18px; color:#555555; margin:0; }
.tiles { display:flex; justify-content:center; gap:14px; padding:18px 40px; }
.tile { background:rgba(255,255,255,0.7); border:1px solid #eeeeee; border-radius:5px; padding:24px 18px;
text-align:center; width:150px; }
.tile .ic { width:36px; height:36px; border-radius:50%; background:#26a862; margin:0 auto 10px; }
.tile .t { font-size:14px; color:#333333; font-weight:400; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:8px 40px 26px; }
.card { background:#ffffff; border-radius:5px; padding:22px; box-shadow: rgba(0,0,0,0.12) 0px 4px 16px; }
.card .b { display:inline-block; background:#f3fff7; color:#26a862; font-size:12px; font-weight:700;
border-radius:5px; padding:3px 8px; margin-bottom:10px; }
.card h3 { font-size:17px; font-weight:700; margin:0 0 6px; color:#333333; }
.card p { font-size:13px; color:#555555; margin:0 0 14px; line-height:1.5; }
.card button { background:transparent; color:#00512a; border:1px solid #00512a; border-radius:5px;
height:36px; padding:0 16px; font-size:14px; }
.footer { background:#00283d; padding:14px 40px; display:flex; justify-content:space-between; align-items:center;
font-size:13px; color:#fff; }
</style></head>
<body>
<nav>
<p class="brand">Cathay</p>
<div class="navlinks"><span>Personal Banking</span><span>Corporate Banking</span><span>Wealth Management</span></div>
<button class="btn-primary">I'm Interested</button>
</nav>
<section class="hero">
<h1>A Better Experience, Every Time</h1>
<p>Seize the right moment — plan every financial step with confidence</p>
</section>
<section class="tiles">
<div class="tile"><div class="ic"></div><div class="t">Open Account</div></div>
<div class="tile"><div class="ic"></div><div class="t">Exchange Rates</div></div>
<div class="tile"><div class="ic"></div><div class="t">Transfer</div></div>
<div class="tile"><div class="ic"></div><div class="t">Video Support</div></div>
</section>
<section class="cards">
<div class="card"><span class="b">Popular</span><h3>CUBE Credit Card</h3><p>A rewards plan tailored just for you — spend smarter.</p><button>Learn More</button></div>
<div class="card"><span class="b">Recommended</span><h3>Foreign Currency Deposit</h3><p>Track exchange rate movements and grow your assets steadily.</p><button>Seize the Moment</button></div>
<div class="card"><span class="b">Secure</span><h3>Digital Insurance</h3><p>Prepare the best protection plan for your family.</p><button>Learn More</button></div>
</section>
<div class="footer"><span>© Cathay</span><span>Personal Banking · Corporate Banking · Privacy Policy</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6e6e6e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #313131; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e6e6e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.2px; background: #1565c0; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; }
* { box-sizing:border-box; }
.topnav { height:48px; background:#313131; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.brand { color:#fff; font-size:15px; font-weight:700; margin:0; }
.navicons { color:#fff; font-size:13px; font-weight:600; }
.catnav { height:44px; background:#fff; border-bottom:1px solid #d4d4d4; display:flex; align-items:center; gap:22px; padding:0 28px; }
.catnav span { font-size:13px; font-weight:600; color:#313131; }
.catnav span.active { color:#313131; border-bottom:2px solid #313131; padding-bottom:12px; }
main { display:flex; height:calc(640px - 92px); }
.gallery { width:34%; background:#f5f5f5; display:flex; align-items:center; justify-content:center; }
.card-img { width:150px; height:210px; border-radius:8px; background:linear-gradient(160deg,#c9a84c,#313131 60%);
box-shadow:0 8px 20px rgba(0,0,0,0.15); position:relative; }
.card-img::before { content:''; position:absolute; inset:10px; border:2px solid rgba(255,255,255,0.4); border-radius:6px; }
.details { width:66%; padding:22px 32px; }
.badges { display:flex; gap:6px; margin-bottom:10px; }
.badge { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.2px; border-radius:2px; padding:2px 6px; color:#fff; }
.badge.foil { background:#c9a84c; color:#313131; }
.badge.stock { background:#1565c0; }
h1 { font-size:22px; font-weight:600; letter-spacing:-0.3px; margin:0 0 4px; }
.cond { font-size:12px; color:#6e6e6e; margin:0 0 12px; }
.price { font-size:20px; font-weight:700; color:#313131; margin:0 0 16px; }
.condgrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px; max-width:420px; }
.condrow { border:1px solid #e8e8e8; border-radius:4px; padding:8px 10px; font-size:12px; display:flex; justify-content:space-between; }
.condrow.sel { border:2px solid #313131; }
.buyrow { display:flex; gap:10px; align-items:center; }
.qty { display:flex; align-items:center; border:1px solid #d4d4d4; border-radius:4px; height:36px; }
.qty span { width:30px; text-align:center; font-size:14px; }
.btn-cart { background:#313131; color:#fff; border:none; border-radius:4px; padding:12px 24px; font-size:14px; font-weight:600; letter-spacing:0.3px; height:44px; }
</style></head>
<body>
<div class="topnav">
<p class="brand">Card Kingdom</p>
<span class="navicons">Account · Cart (3)</span>
</div>
<div class="catnav">
<span class="active">Magic: The Gathering</span><span>Pokémon</span><span>Yu-Gi-Oh!</span><span>Supplies</span>
</div>
<main>
<div class="gallery"><div class="card-img"></div></div>
<div class="details">
<div class="badges"><span class="badge foil">Foil</span><span class="badge stock">In Stock</span></div>
<h1>Sheoldred, the Apocalypse</h1>
<p class="cond">Dominaria United · Near Mint</p>
<p class="price">$34.99</p>
<div class="condgrid">
<div class="condrow sel"><span>Near Mint</span><span>$34.99</span></div>
<div class="condrow"><span>Lightly Played</span><span>$29.99</span></div>
<div class="condrow"><span>Moderately Played</span><span>$24.99</span></div>
<div class="condrow"><span>Heavily Played</span><span>$19.99</span></div>
</div>
<div class="buyrow">
<div class="qty"><span>−</span><span>1</span><span>+</span></div>
<button class="btn-cart">Add to Cart</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0e252c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0e252c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #0e252c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px; margin: 0; color: #8d9096; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #2ea3f2; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #ffffff; color: #0e252c;
border: 1px solid #2ea3f2; border-radius: 4px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #0e252c;
border: 1px solid #c3c8ca; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d9096; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #e2f2fd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#ffffff; color:#0e252c; box-sizing:border-box; font-family:'Open Sans',Arial,sans-serif; }
*{box-sizing:border-box;}
.util{height:28px;background:#203741;color:#d8e2e7;font-size:11px;display:flex;align-items:center;justify-content:center;}
.nav{height:56px;background:#0e252c;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 26px;}
.nav .logo{font-weight:700;font-size:15px;}
.nav .links{display:flex;gap:16px;font-size:13px;font-weight:600;letter-spacing:.2px;}
.wrap{display:flex;height:556px;}
.left{width:400px;background:#f9f9f9;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;}
.planter{width:170px;height:150px;background:linear-gradient(160deg,#7cc68d,#276a56);border-radius:8px 8px 24px 24px;box-shadow:0 12px 24px rgba(14,37,44,.1);}
.badge-new{position:absolute;top:24px;left:24px;background:#31856c;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.right{flex:1;padding:24px 32px;display:flex;flex-direction:column;}
h1{font-size:22px;font-weight:600;margin:0 0 8px;}
.sub{color:#3e3e3e;font-size:14px;margin:0 0 14px;}
.price{font-size:20px;font-weight:700;margin:0 0 16px;}
.swatches{display:flex;gap:10px;margin-bottom:16px;}
.sw{width:28px;height:28px;border-radius:9999px;border:2px solid transparent;}
.sw.sel{border:2px solid #0e252c;}
.c1{background:#7cc68d;} .c2{background:#31856c;} .c3{background:#cd5c5c;} .c4{background:#c37cc6;}
.sizes{display:flex;gap:8px;margin-bottom:18px;}
.size{background:#fff;border:1px solid #e0e0e0;font-size:13px;padding:6px 14px;border-radius:4px;height:36px;display:flex;align-items:center;}
.size.sel{background:#0e252c;color:#fff;border-color:#0e252c;}
.desc{font-size:14px;color:#3e3e3e;line-height:1.5;margin:0 0 18px;}
.actions{display:flex;gap:10px;margin-top:auto;}
.btn-primary{background:#2ea3f2;color:#fff;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;border-radius:4px;padding:14px 28px;height:48px;display:flex;align-items:center;}
.btn-secondary{background:#fff;color:#0e252c;font-size:15px;font-weight:700;text-transform:uppercase;border:2px solid #0e252c;border-radius:4px;padding:12px 26px;height:48px;display:flex;align-items:center;}
</style>
</head>
<body>
<div class="util">Free shipping on orders over $75</div>
<div class="nav"><div class="logo">Crescent Garden</div><div class="links"><span>Planters</span><span>Self-Watering</span><span>Commercial</span><span>Sale</span></div></div>
<div class="wrap">
<div class="left"><div class="badge-new">New</div><div class="planter"></div></div>
<div class="right">
<h1>Sturdy Round Planter, 16in</h1>
<p class="sub">UV-Resistant Resin · Indoor/Outdoor</p>
<p class="price">$42.99</p>
<div class="swatches">
<span class="sw sel c1"></span>
<span class="sw c2"></span>
<span class="sw c3"></span>
<span class="sw c4"></span>
</div>
<div class="sizes"><span class="size">12in</span><span class="size sel">16in</span><span class="size">20in</span></div>
<p class="desc">Molded from UV-stabilized resin that resists fading and cracking through every season. Drainage-ready and lightweight enough to move with the light.</p>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Compare</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7a00ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7a00ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #be87fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7a00ff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7a00ff; color: #f5f5f5;
border: 1px solid #8e27fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #be87fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6600d6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #E5E7EB; }
.brand { font-size:16px; font-weight:700; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; font-size:16px; font-weight:700; }
.navlinks span { color:#000000; opacity:0.55; }
.navlinks span.active { color:#7A00FF; opacity:1; }
.btn-outline { background:transparent; color:#000000; border:1px solid #000000; border-radius:8px;
padding:9px 18px; font-size:13px; font-weight:700; white-space:nowrap; cursor:default; }
.head { padding:22px 40px 16px; display:flex; align-items:flex-end; justify-content:space-between; }
.badge { display:inline-block; background:#7A00FF; color:#ffffff; border-radius:999px; padding:4px 12px;
font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:10px; }
.head h1 { font-size:28px; font-weight:600; letter-spacing:-1.0px; margin:0; }
.head p { font-size:13px; color:#4B5563; margin:6px 0 0; }
.headmeta { text-align:right; font-size:12px; color:#4B5563; }
.grid { padding:0 40px; display:grid; grid-template-columns:180px repeat(3, 1fr); }
.row { display:contents; }
.cell { padding:14px 16px; border-top:1px solid #E5E7EB; font-size:13px; display:flex; align-items:center; }
.row:first-child .cell { border-top:none; }
.rowlabel { color:#4B5563; font-weight:400; }
.colhead { font-weight:700; font-size:14px; justify-content:center; text-align:center; flex-direction:column; gap:2px; padding-top:18px; }
.colhead small { font-weight:400; font-size:11px; color:#4B5563; }
.val { justify-content:center; text-align:center; font-weight:600; }
.featured { background:#7A00FF; color:#ffffff; border-radius:0; }
.featured.colhead small { color:#e8d4ff; }
.featured.val { color:#ffffff; }
.tag-rec { position:absolute; }
.foot { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #E5E7EB;
padding:16px 40px; display:flex; justify-content:space-between; align-items:center; }
.foot .price { font-size:12px; color:#4B5563; }
.foot .price b { color:#000000; font-size:16px; font-weight:700; }
.actions { display:flex; gap:10px; }
.btn-solid { background:#000000; color:#ffffff; border:none; border-radius:0px; padding:11px 22px;
font-size:13px; font-weight:700; }
</style></head>
<body style="position:relative;">
<nav>
<p class="brand">Dr.Cha (Autopedia)</p>
<div class="navlinks">
<span class="active">Dr.Cha</span>
<span>Quantum Mobility</span>
<span>Parts Network</span>
<span>AI Platform</span>
</div>
<button class="btn-outline">Download CI Guide</button>
</nav>
<div class="head">
<div>
<span class="badge">Spec Compare</span>
<h1>Dr.Cha (Autopedia) Mobility Asset Report</h1>
<p>Trim comparison generated from live diagnosis and ownership data</p>
</div>
<div class="headmeta">Registration 236-86-01261<br>Updated today</div>
</div>
<div class="grid">
<div class="row">
<div class="cell"></div>
<div class="cell colhead">Base<br><small>Entry trim</small></div>
<div class="cell colhead featured">Dr.Cha Pro<br><small>Recommended</small></div>
<div class="cell colhead">Premium<br><small>Full option</small></div>
</div>
<div class="row">
<div class="cell rowlabel">Engine</div>
<div class="cell val">2.0L I4</div>
<div class="cell val featured">2.0L Turbo</div>
<div class="cell val">3.0L V6</div>
</div>
<div class="row">
<div class="cell rowlabel">Max Power</div>
<div class="cell val">156 hp</div>
<div class="cell val featured">245 hp</div>
<div class="cell val">299 hp</div>
</div>
<div class="row">
<div class="cell rowlabel">0–100 km/h</div>
<div class="cell val">9.8s</div>
<div class="cell val featured">6.2s</div>
<div class="cell val">5.4s</div>
</div>
<div class="row">
<div class="cell rowlabel">Diagnosis Score</div>
<div class="cell val">B+</div>
<div class="cell val featured">A</div>
<div class="cell val">A+</div>
</div>
<div class="row">
<div class="cell rowlabel">Est. Price</div>
<div class="cell val">32,900,000</div>
<div class="cell val featured">38,400,000</div>
<div class="cell val">45,100,000</div>
</div>
</div>
<div class="foot">
<div class="price">Managed as a mobility asset · <b>Dr.Cha Pro selected</b></div>
<div class="actions">
<button class="btn-outline">Contact partner shop</button>
<button class="btn-solid">View full diagnosis</button>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f2f0f0; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f2f0f0; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; background: #334499; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; background: #f2f0f0; color: #334499;
border: 1px solid #334499; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #bab8b8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #22522f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f2f0f0; color:#121212; box-sizing:border-box;
font-family:'Josefin Sans', 'sofia-pro', sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:'Ivy Presto', 'ivypresto-display', serif; }
nav { height:64px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-family:'Ivy Presto', serif; font-size:24px; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; color:#595959; }
.navlinks span:first-child { color:#334499; }
.navicons { display:flex; align-items:center; gap:16px; }
.cart { position:relative; width:22px; height:22px; border:2px solid #f8da52; border-radius:5px; }
.cart::after { content:'3'; position:absolute; top:-8px; right:-9px; width:16px; height:16px; border-radius:999px;
background:#334499; color:#fff; font-size:10px; display:flex; align-items:center; justify-content:center; }
.hero { padding:30px 36px; display:flex; align-items:center; gap:34px; }
.hero-copy { flex:1.2; }
.hero h1 { font-size:38px; font-weight:400; line-height:1.15; letter-spacing:-0.5px; margin:0 0 10px; }
.hero p { font-size:14px; color:#1f1c1a; line-height:1.5; margin:0 0 16px; max-width:400px; }
.row { display:flex; gap:10px; }
.btn-primary { background:#334499; color:#fff; border:none; border-radius:8px; padding:14px 26px;
font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; height:46px; }
.btn-gold { background:#f8da52; color:#121212; border:none; border-radius:8px; padding:14px 26px;
font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; height:46px; }
.hero-visual { flex:1; height:170px; border-radius:20px; position:relative; overflow:hidden;
background:radial-gradient(circle at 30% 30%, #fef3c7, #f8da52 60%, #d9a f6d); }
.hero-visual { background: radial-gradient(circle at 30% 30%, #fff3c1, #f8da52 55%, #c9962e 100%); }
.hero-visual::before { content:''; position:absolute; width:80px; height:80px; border-radius:50%;
background:#334499; opacity:0.16; right:20px; bottom:-20px; }
.section { padding:14px 36px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-family:'Ivy Presto', serif; font-size:24px; font-weight:400; margin:0; }
.sec-head span { font-size:12px; font-weight:600; color:#334499; letter-spacing:0.5px; text-transform:uppercase; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#ffffff; border-radius:20px; overflow:hidden; padding-bottom:14px; }
.thumb { height:110px; position:relative; border-radius:20px 20px 0 0; }
.t1 { background:linear-gradient(160deg,#fff3c1,#f8da52); }
.t2 { background:linear-gradient(160deg,#d7e6da,#22522f22); background:linear-gradient(160deg,#e4f0e7,#a9cdb1); }
.t3 { background:linear-gradient(160deg,#e3e8f7,#a9b8e8); }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; letter-spacing:0.8px;
text-transform:uppercase; padding:4px 8px; border-radius:4px; }
.badge.gold { background:#f8da52; color:#121212; }
.badge.green { background:#22522f; color:#fff; }
.cbody { padding:10px 14px 0; }
.stars { color:#f8da52; font-size:12px; letter-spacing:1px; }
.card h3 { font-family:'Ivy Presto', serif; font-size:20px; font-weight:400; margin:4px 0 2px; }
.card .price { font-size:14px; color:#1f1c1a; margin:0 0 8px; }
.addbtn { width:100%; background:#f2f0f0; color:#334499; border:none; border-radius:8px; padding:9px;
font-size:11px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase; }
footer { background:#121212; color:#858585; font-size:12px; padding:16px 36px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#858585; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Beekeeper S Naturals</p>
<div class="navlinks"><span>Shop All</span><span>Immunity</span><span>Kids</span><span>Our Bees</span></div>
<div class="navicons"><div class="cart"></div></div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1 class="serif">Nature's medicine cabinet, backed by bees</h1>
<p>Propolis, royal jelly, and raw honey — clean remedies made without seed oils, fillers, or refined sugar.</p>
<div class="row">
<button class="btn-primary">Shop Now</button>
<button class="btn-gold">Subscribe & Save</button>
</div>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2 class="serif">Best Sellers</h2><span>Shop All →</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge gold">Sale</span></div>
<div class="cbody">
<div class="stars">★★★★★</div>
<h3 class="serif">Propolis Throat Spray</h3>
<p class="price">$24.99</p>
<button class="addbtn">Add to Cart</button>
</div>
</div>
<div class="card">
<div class="thumb t2"><span class="badge green">Subscribe</span></div>
<div class="cbody">
<div class="stars">★★★★★</div>
<h3 class="serif">B.LXR Brain Fuel</h3>
<p class="price">$44.99</p>
<button class="addbtn">Add to Cart</button>
</div>
</div>
<div class="card">
<div class="thumb t3"></div>
<div class="cbody">
<div class="stars">★★★★☆</div>
<h3 class="serif">Raw Manuka Honey</h3>
<p class="price">$32.00</p>
<button class="addbtn">Add to Cart</button>
</div>
</div>
</div>
</section>
<footer>
<span>© Beekeeper S Naturals</span>
<div><a href="#">Sustainability</a><a href="#">Wholesale</a><a href="#">Reviews</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f1f0ef; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f1f0ef; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #df3336; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.5px; background: #9c2426; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.5px; background: transparent; color: #080808;
border: 1px solid #9c2426; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #080808;
border: 1px solid #b7b6b5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #df3336; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; background: #0d4f3d; color: #f1f0ef;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f1f0ef; color:#080808; box-sizing:border-box;
font-family:'Open Sans', Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:64px; background:#151414; color:#f1f0ef; border-bottom:2px solid #9c2426; display:flex; align-items:center;
justify-content:space-between; padding:0 34px; }
.brand { font-family:'Times New Roman', serif; font-size:19px; font-weight:700; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; letter-spacing:0.3px; }
.cat-nav { height:44px; background:#f1f0ef; border-bottom:1px solid #e0dfdf; display:flex; align-items:center; gap:24px; padding:0 34px;
font-size:14px; font-weight:600; color:#383838; }
.cat-nav span:first-child { color:#9c2426; border-bottom:2px solid #9c2426; padding-bottom:12px; }
.layout { display:flex; height:calc(640px - 64px - 44px); }
.media { width:320px; flex-shrink:0; background:#e0dfdf; display:flex; align-items:center; justify-content:center; position:relative; }
.helmet { width:150px; height:150px; border-radius:50% 50% 40% 40%; background:linear-gradient(160deg, #5f6360, #0d4f3d); }
.era-badge { position:absolute; top:16px; left:16px; background:#0d4f3d; color:#f1f0ef; font-size:11px; font-weight:600;
letter-spacing:1px; text-transform:uppercase; padding:3px 8px; }
.country-badge { position:absolute; top:16px; right:16px; background:#5f6360; color:#f1f0ef; font-size:11px; font-weight:600;
letter-spacing:1px; text-transform:uppercase; padding:3px 8px; }
.detail { flex:1; padding:22px 34px; display:flex; flex-direction:column; gap:12px; }
.kicker { font-size:12px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:#767574; }
h1 { font-family:'Times New Roman', serif; font-size:26px; font-weight:700; margin:0; }
.price { font-family:'Times New Roman', serif; font-size:22px; font-weight:700; color:#9c2426; }
.condition { display:flex; align-items:center; gap:8px; background:#e0dfdf; border-left:3px solid #9c2426; font-size:11px;
font-weight:700; letter-spacing:0.8px; text-transform:uppercase; padding:3px 8px; width:fit-content; color:#383838; }
.provenance { border:1px solid #e0dfdf; border-left:4px solid #0d4f3d; background:#f1f0ef; padding:12px 16px;
font-family:'Times New Roman', serif; font-size:15px; line-height:1.7; color:#383838; }
.actions { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#9c2426; color:#ffffff; border:none; border-radius:4px; height:44px; font-size:14px; font-weight:600; letter-spacing:0.5px; }
.btn-secondary { background:transparent; color:#080808; border:1.5px solid #080808; border-radius:4px; height:44px; padding:0 22px; font-size:14px; font-weight:600; letter-spacing:0.5px; }
</style></head>
<body>
<div class="topbar">
<div class="brand">Combat Relics</div>
<div class="navlinks"><span>Headgear</span><span>Medals</span><span>Documents</span></div>
</div>
<div class="cat-nav"><span>WWII</span><span>WWI</span><span>Inter-war</span></div>
<div class="layout">
<div class="media">
<div class="era-badge">WWII</div>
<div class="country-badge">German</div>
<div class="helmet"></div>
</div>
<div class="detail">
<div class="kicker">Original Historical Antique</div>
<h1>M35 Stahlhelm, Field-Worn</h1>
<div class="price">$1,240.00</div>
<div class="condition">Condition: Very Good</div>
<div class="provenance">Recovered from a private estate collection in Bavaria; retains original liner and chin strap with period-correct paint loss consistent with field use.</div>
<div class="actions">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Ask a Question</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #b62030; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #1e1e1e; color: #eeeeee;
border: 1px solid #b62030; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #1e1e1e; color: #eeeeee;
border: 1px solid #111111; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ffffff; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #b62030; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121212; font-family:Roboto,'Helvetica Neue',Arial,sans-serif; color:#e8e8e8; }
*{box-sizing:border-box;}
.nav{height:60px;background:#0f0f0f;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #333;}
.logo{font-size:20px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#e8e8e8;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#9e9e9e;}
.navlinks .on{color:#b62030;}
.hero{height:280px;position:relative;display:flex;align-items:center;padding:0 34px;background:linear-gradient(120deg,#1a1010,#121212 70%);}
.hero:before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.4);}
.heroc{position:relative;z-index:1;width:440px;}
.tag{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#aadddd;margin-bottom:12px;}
.h1{font-size:32px;font-weight:700;line-height:1.2;margin:0 0 14px;color:#f2f2f2;}
.sub{font-size:14px;line-height:1.6;color:#bdbdbd;max-width:340px;margin:0 0 20px;}
.cta{display:inline-block;background:#b62030;color:#fff;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:12px 26px;border-radius:4px;}
.poster{position:absolute;right:60px;top:24px;width:150px;height:210px;border-radius:4px;background:linear-gradient(160deg,#b62030,#0f0f0f 70%);border:1px solid #444;z-index:1;}
.sec{padding:20px 34px 0;}
.seclabel{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#9e9e9e;margin-bottom:14px;}
.grid{display:flex;gap:12px;}
.card{width:150px;background:#1a1a1a;border:1px solid #444;border-radius:4px;padding:8px;position:relative;}
.thumb{width:100%;aspect-ratio:1/1.4;border-radius:2px;margin-bottom:8px;}
.ptitle{font-size:12px;font-weight:600;color:#e8e8e8;line-height:1.3;height:30px;overflow:hidden;}
.pprice{font-size:12px;color:#aadddd;margin-top:4px;}
.badge{position:absolute;top:6px;left:6px;background:#ec5c52;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:2px;}
.badge.sale{background:#b62030;}
</style>
<div class="nav">
<div class="logo">Severin Films</div>
<div class="navlinks"><div class="on">Horror</div><div>Cult</div><div>Restorations</div><div>Box Sets</div></div>
</div>
<div class="hero">
<div class="heroc">
<div class="tag">Entertainment With Sharp Edges</div>
<div class="h1">The shelves of a<br>video store, restored.</div>
<div class="sub">Absurdist cover art. Genre descriptions with no apology. Dark, loud when it needs to be.</div>
<div class="cta">Shop New Restorations</div>
</div>
<div class="poster"></div>
</div>
<div class="sec">
<div class="seclabel">New This Month</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(160deg,#b62030,#0f0f0f)"></div><div class="ptitle">Midnight Reel Vol. 3</div><div class="pprice">$29.99</div></div>
<div class="card"><span class="badge sale">Sale</span><div class="thumb" style="background:linear-gradient(160deg,#a24e4e,#0f0f0f)"></div><div class="ptitle">Blood Moon Uncut</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#aadddd,#0f0f0f)"></div><div class="ptitle">Static Frame Box Set</div><div class="pprice">$64.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#444,#0f0f0f)"></div><div class="ptitle">Basement Archive #7</div><div class="pprice">$19.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #181818;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #181818;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.27; margin: 0; color: #181818; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #181818;
border: 1px solid #108474; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #181818;
border: 1px solid #c5c5c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #da3f3f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Epomaker — Home</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#484d5b;
font-family:'Poppins',sans-serif;
}
*{box-sizing:border-box;}
.page{width:960px;height:640px;display:flex;flex-direction:column;}
header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #ededed;}
.logo{font-size:19px;font-weight:700;color:#181818;}
.logo span{color:#108474;}
nav{display:flex;gap:20px;}
nav a{font-size:12px;font-weight:600;color:#484d5b;}
.nav-cta{background:#108474;color:#fff;padding:8px 18px;border-radius:8px;font-size:12px;font-weight:600;}
.hero{display:flex;background:#181818;padding:26px 28px;gap:24px;}
.hero-copy{flex:1;}
.hero-copy .kicker{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#dff8ef;margin-bottom:8px;}
.hero-copy h1{font-size:28px;font-weight:700;color:#fff;margin:0 0 10px;line-height:1.25;}
.hero-copy p{font-size:13px;color:#b8b8b8;max-width:340px;margin:0 0 16px;line-height:1.6;}
.hero-cta{display:inline-block;background:#108474;color:#fff;padding:10px 20px;border-radius:8px;font-size:12px;font-weight:600;}
.board{width:280px;height:120px;border-radius:8px;background:linear-gradient(160deg,#2a2a2a,#181818);border:1px solid #333;display:grid;grid-template-columns:repeat(14,1fr);gap:3px;padding:12px;align-content:start;}
.board div{height:12px;border-radius:2px;background:#333;}
.board div:nth-child(3n){background:#108474;}
.board div:nth-child(5n){background:#dec700;}
main{flex:1;padding:16px 28px 0;}
.promo{background:#dff8ef;border-radius:8px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.promo span{font-size:12px;color:#0c6b5e;font-weight:600;}
.promo b{color:#da3f3f;font-size:12px;}
.row-head{display:flex;justify-content:space-between;margin-bottom:10px;}
.row-head h2{font-size:15px;margin:0;color:#181818;}
.row-head span{font-size:11px;color:#108474;font-weight:600;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.card{background:#fff;border:1px solid #ededed;border-radius:8px;padding:10px;position:relative;}
.thumb{height:64px;border-radius:6px;background:linear-gradient(150deg,#f5f5f5,#e5e5e5);margin-bottom:8px;}
.badge{position:absolute;top:6px;left:6px;font-size:8px;font-weight:700;padding:3px 6px;border-radius:4px;color:#fff;}
.b-sale{background:#da3f3f;}
.b-gold{background:#dec700;color:#181818;}
.card h4{font-size:11px;margin:0 0 4px;color:#181818;font-weight:600;}
.card .swatches{display:flex;gap:3px;margin-bottom:6px;}
.card .swatches i{width:9px;height:9px;border-radius:50%;display:inline-block;}
.sw1{background:#108474;}.sw2{background:#0037c9;}.sw3{background:#da3f3f;}.sw4{background:#181818;}
.card .price{font-size:13px;font-weight:700;color:#108474;}
.card .price s{font-size:10px;color:#aaa;font-weight:400;margin-left:4px;}
footer{background:#f5f5f5;padding:12px 28px;display:flex;justify-content:space-between;margin-top:14px;}
footer span{font-size:10px;color:#7b7b7b;}
</style>
<div class="page">
<header>
<div class="logo">Epomaker<span>.</span></div>
<nav><a>60% Boards</a><a>65% Boards</a><a>Switches</a><a>Keycaps</a><a>Group Buys</a></nav>
<div class="nav-cta">Add to Cart</div>
</header>
<div class="hero">
<div class="hero-copy">
<div class="kicker">Group Buy Live — TX84 Series</div>
<h1>Mechanical keyboards, tuned by hobbyists for hobbyists.</h1>
<p>Hot-swappable switches, gasket-mount cases, and a color story built for your desk setup.</p>
<div class="hero-cta">Shop Keyboards</div>
</div>
<div class="board">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
</div>
<main>
<div class="promo"><span>In stock: Hot-swap TX84 Aluminum</span><b>Group buy ends in 4d 12h</b></div>
<div class="row-head"><h2>Best Sellers</h2><span>Shop All →</span></div>
<div class="grid">
<div class="card"><div class="badge b-gold">Limited</div><div class="thumb"></div><h4>TX84 Aluminum, Hot-Swap</h4><div class="swatches"><i class="sw1"></i><i class="sw2"></i><i class="sw3"></i></div><div class="price">$139.99</div></div>
<div class="card"><div class="badge b-sale">-20%</div><div class="thumb"></div><h4>Ajazz AK820 Pro</h4><div class="swatches"><i class="sw4"></i><i class="sw2"></i></div><div class="price">$79.99 <s>$99.99</s></div></div>
<div class="card"><div class="thumb"></div><h4>Wisteria Keycap Set, PBT</h4><div class="swatches"><i class="sw1"></i><i class="sw3"></i><i class="sw4"></i></div><div class="price">$44.99</div></div>
<div class="card"><div class="thumb"></div><h4>Budgerigar Switches ×90</h4><div class="swatches"><i class="sw1"></i></div><div class="price">$19.99</div></div>
</div>
</main>
<footer>
<span>© Epomaker Mechanical Keyboards</span>
<span>Switch Guide · Group Buy Archive · Support</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #d54300; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #d54300; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e7a587; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d54300; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #d54300; color: #f5f5f5;
border: 1px solid #da5f27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e7a587; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dc6129; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gangnam Unni</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#ffffff; color:#131517; box-sizing:border-box; font-family: "PretendardVariable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.header { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 26px; border-bottom:1px solid #eff2f5; }
.logo { font-size:19px; font-weight:700; color:#131517; }
.search-pill { flex:1; max-width:340px; margin:0 24px; height:36px; background:#eff2f5; border-radius:9999px; display:flex; align-items:center; padding:0 16px; font-size:13px; color:#697683; }
.outline-cta { color:#131517; border:1px solid #b5bfc9; border-radius:6px; padding:8px 12px; font-size:13px; font-weight:600; background:#ffffff; white-space:nowrap; }
.chipbar { display:flex; gap:8px; padding:14px 26px 12px; }
.chip { height:32px; border-radius:9999px; padding:0 14px; font-size:14px; font-weight:500; display:flex; align-items:center; background:#eff2f5; color:#131517; }
.chip.selected { background:#131517; color:#ffffff; }
.grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; padding:0 26px 18px; }
.card { background:#ffffff; border-radius:20px; border:1px solid #eff2f5; overflow:hidden; display:flex; flex-direction:column; }
.thumb { height:96px; background:linear-gradient(135deg,#eff2f5 0%, #d9e0e6 100%); position:relative; }
.thumb .badge { position:absolute; top:8px; left:8px; background:#ffffff; border:1px solid #b5bfc9; border-radius:9999px; padding:2px 9px; font-size:11px; font-weight:600; color:#131517; }
.card-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; }
.clinic-name { font-size:16px; font-weight:700; line-height:1.35; color:#131517; }
.meta-row { display:flex; align-items:center; gap:6px; font-size:12px; color:#697683; }
.stars { color:#131517; font-size:12px; letter-spacing:1px; }
.tagrow { display:flex; gap:6px; flex-wrap:wrap; }
.tag { background:#eff2f5; color:#697683; border-radius:6px; padding:2px 8px; font-size:11px; font-weight:500; }
.price { font-size:14px; font-weight:700; color:#131517; margin-top:2px; }
.price-note { font-size:11px; font-weight:400; color:#697683; }
.card-cta { margin-top:8px; align-self:flex-start; }
</style>
</head>
<body>
<div class="header">
<div class="logo">Gangnam Unni</div>
<div class="search-pill">Search a procedure or clinic…</div>
<div class="outline-cta">Book consultation</div>
</div>
<div class="chipbar">
<div class="chip selected">All procedures</div>
<div class="chip">Eyes</div>
<div class="chip">Nose</div>
<div class="chip">Skin</div>
<div class="chip">Body contour</div>
<div class="chip">Dental</div>
</div>
<div class="grid">
<div class="card">
<div class="thumb"><span class="badge">Verified</span></div>
<div class="card-body">
<div class="clinic-name">Willow Aesthetic Clinic</div>
<div class="meta-row"><span class="stars">★★★★★</span> 4.9 · 812 reviews</div>
<div class="tagrow"><span class="tag">Double eyelid</span><span class="tag">Non-incision</span></div>
<div class="price">from ₩1,200,000 <span class="price-note">event price</span></div>
<div class="outline-cta card-cta">View clinic</div>
</div>
</div>
<div class="card">
<div class="thumb"><span class="badge">Top rated</span></div>
<div class="card-body">
<div class="clinic-name">Hanul Dermatology</div>
<div class="meta-row"><span class="stars">★★★★★</span> 4.8 · 630 reviews</div>
<div class="tagrow"><span class="tag">Laser toning</span><span class="tag">Skin booster</span></div>
<div class="price">from ₩180,000 <span class="price-note">per session</span></div>
<div class="outline-cta card-cta">View clinic</div>
</div>
</div>
<div class="card">
<div class="thumb"><span class="badge">New</span></div>
<div class="card-body">
<div class="clinic-name">Baekje Nose Center</div>
<div class="meta-row"><span class="stars">★★★★☆</span> 4.6 · 214 reviews</div>
<div class="tagrow"><span class="tag">Rhinoplasty</span><span class="tag">Revision</span></div>
<div class="price">from ₩3,900,000 <span class="price-note">consultation incl.</span></div>
<div class="outline-cta card-cta">View clinic</div>
</div>
</div>
<div class="card">
<div class="thumb"></div>
<div class="card-body">
<div class="clinic-name">Seorae Body Line</div>
<div class="meta-row"><span class="stars">★★★★★</span> 4.9 · 501 reviews</div>
<div class="tagrow"><span class="tag">Liposuction</span><span class="tag">Body contour</span></div>
<div class="price">from ₩2,450,000 <span class="price-note">event price</span></div>
<div class="outline-cta card-cta">View clinic</div>
</div>
</div>
<div class="card">
<div class="thumb"><span class="badge">Event</span></div>
<div class="card-body">
<div class="clinic-name">Yeoksam Dental Studio</div>
<div class="meta-row"><span class="stars">★★★★★</span> 5.0 · 388 reviews</div>
<div class="tagrow"><span class="tag">Veneers</span><span class="tag">Whitening</span></div>
<div class="price">from ₩350,000 <span class="price-note">per unit</span></div>
<div class="outline-cta card-cta">View clinic</div>
</div>
</div>
<div class="card">
<div class="thumb"></div>
<div class="card-body">
<div class="clinic-name">Cheongdam Eye Clinic</div>
<div class="meta-row"><span class="stars">★★★★☆</span> 4.7 · 297 reviews</div>
<div class="tagrow"><span class="tag">Ptosis</span><span class="tag">Canthoplasty</span></div>
<div class="price">from ₩980,000 <span class="price-note">event price</span></div>
<div class="outline-cta card-cta">View clinic</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #58595b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #003da5; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #003da5;
border: 1px solid #003da5; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #58595b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffc220; color: #1a1a1a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'Helvetica Neue',Arial,sans-serif; color:#333; }
*{box-sizing:border-box;}
.utilbar{height:28px;background:#1a1a1a;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 32px;}
.nav{height:64px;background:#003da5;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.5px;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;text-transform:uppercase;color:#fff;}
.hero{height:230px;background:#1a1a1a;display:flex;align-items:center;padding:0 32px;position:relative;}
.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,0,0,.55),rgba(0,61,165,.4));}
.heroInner{position:relative;z-index:1;}
.h1{font-size:36px;font-weight:800;color:#fff;line-height:1.15;margin:0 0 14px;max-width:440px;}
.cta{display:inline-block;background:#ffc220;color:#1a1a1a;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:14px 30px;border-radius:4px;}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:200px;border:1px solid #e6e7e8;border-radius:4px;overflow:hidden;}
.thumb{height:110px;background:#f4f4f4;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#ffc220;color:#1a1a1a;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:4px;}
.badge.energy{background:#008a00;color:#fff;}
.cardbody{padding:12px 14px 14px;}
.ptitle{font-size:16px;font-weight:600;color:#1a1a1a;}
.stars{color:#ffc220;font-size:12px;margin:4px 0;}
.pprice{font-size:20px;font-weight:700;color:#1a1a1a;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#1a1a1a;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#a7a8aa;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="utilbar"><span>Find a Store</span><span>Order Status</span><span>1-800-555-0199</span></div>
<div class="nav">
<div class="logo">Maytag</div>
<div class="navlinks"><span>Washers</span><span>Dryers</span><span>Kitchen</span><span>Parts & Filters</span></div>
</div>
<div class="hero">
<div class="heroInner">
<div class="h1">Built Tough. Backed by a Decade of Reliability.</div>
<div class="cta">Shop Washers</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">Best Seller</div></div><div class="cardbody"><div class="ptitle">Top Load Washer 5.3 cu ft</div><div class="stars">★★★★☆</div><div class="pprice">$799</div></div></div>
<div class="card"><div class="thumb"><div class="badge energy">Energy Star</div></div><div class="cardbody"><div class="ptitle">Front Load Dryer 7.4 cu ft</div><div class="stars">★★★★★</div><div class="pprice">$949</div></div></div>
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="ptitle">Commercial Grade Washer Pair</div><div class="stars">★★★★☆</div><div class="pprice">$1,699</div></div></div>
</div>
<div class="footer"><span>© Maytag Home Appliances</span><span>Products · Support · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.27; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.38; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #e8262a; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #1a1a1a;
border: 1px solid #e8262a; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #fce1e1; color: #e8262a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,'Helvetica Neue',sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:16px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.navcta{background:#e8262a;color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:8px 16px;}
.label{padding:26px 32px 14px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#666;}
.chips{display:flex;gap:8px;padding:0 32px 20px;}
.chip{border:1px solid #e0e0e0;font-size:13px;padding:6px 14px;border-radius:9999px;}
.chip.on{background:#1a1a1a;color:#fff;border-color:#1a1a1a;}
.grid{display:flex;gap:16px;padding:0 32px;}
.card{width:200px;border:1px solid #efefef;border-radius:4px;overflow:hidden;}
.thumb{aspect-ratio:4/3;height:150px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;padding:3px 8px;}
.badge.new{background:#e8262a;color:#fff;}
.badge.ltd{background:#f0f0f0;color:#333;}
.info{padding:10px 12px;}
.artist{font-size:13px;color:#666;margin-bottom:2px;}
.title{font-size:13px;color:#1a1a1a;margin-bottom:6px;}
.price{font-size:16px;font-weight:700;}
.strip{margin:24px 32px 0;background:#f5f5f5;padding:32px;text-align:center;}
.strip h2{font-size:22px;font-weight:400;margin:0 0 10px;}
.strip p{font-size:14px;color:#666;margin:0 0 16px;}
.stripcta{display:inline-block;background:#e8262a;color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:12px 26px;}
</style>
<div class="nav">
<div class="logo">Rise Art</div>
<div class="navlinks"><span>Curated Collections</span><span>Artists</span><span>Sell Art</span></div>
<div class="navcta">Start Collecting</div>
</div>
<div class="label">Recently Added</div>
<div class="chips">
<div class="chip on">All</div><div class="chip">Painting</div><div class="chip">Photography</div><div class="chip">Print</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e8262a,#1a1a1a)"><div class="badge new">New</div></div><div class="info"><div class="artist">Mara Delacroix</div><div class="title">Static Bloom No. 4</div><div class="price">$2,400</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#999,#333)"><div class="badge ltd">Limited</div></div><div class="info"><div class="artist">Owen Whitfield</div><div class="title">Grayscale Coast</div><div class="price">$1,180</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c9c9c9,#1a1a1a)"></div><div class="info"><div class="artist">Ines Carvalho</div><div class="title">Field Study III</div><div class="price">$960</div></div></div>
</div>
<div class="strip">
<h2>Why Rise Art</h2>
<p>Discover original art, curated by our team of experts, with a 14-day risk-free trial.</p>
<div class="stripcta">Get Art Advice</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb1000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb1000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3b63fb; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb1000; color: #000000;
border: 1px solid #3b63fb; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb1000; color: #f5f5f5;
border: 1px solid #ed3527; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cf1d28; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { height:320px; position:relative; background:linear-gradient(135deg,#1a1a1a,#3a1010 60%, #eb1000 140%); overflow:hidden; }
.hero nav { display:flex; justify-content:space-between; align-items:center; padding:18px 32px; }
.logo { width:26px; height:26px; background:#eb1000; border-radius:6px; }
.navlinks { display:flex; gap:22px; color:#ffffff; font-size:14px; font-weight:700; }
.signin { border:1px solid #ffffff; color:#ffffff; background:transparent; border-radius:999px; padding:0 20px; height:32px; font-size:13px; font-weight:700; }
.heroinner { padding:20px 32px; }
.heroinner h1 { color:#ffffff; font-size:56px; font-weight:900; margin:0 0 6px; max-width:600px; line-height:1.05; }
.heroctas { display:flex; gap:12px; margin-top:16px; }
.pillwhite { background:#ffffff; color:#000000; border:none; border-radius:75px; padding:0 24px; height:40px; font-size:14px; font-weight:700; }
.pillghost { background:transparent; color:#ffffff; border:1px solid #ffffff; border-radius:75px; padding:0 24px; height:40px; font-size:14px; font-weight:700; }
.quicklinks { display:flex; gap:14px; padding:0 32px; margin-top:-56px; position:relative; z-index:2; }
.glass { flex:1; background:rgba(0,0,0,0.44); border-radius:8px; padding:12px 12px 16px; box-shadow:rgba(255,255,255,0.11) 0px 0px 0px 1px inset; color:#ffffff; font-size:13px; font-weight:700; }
.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:26px 32px 0; }
.tile { background:#f3f3f3; border-radius:16px; padding:20px; }
.tile h3 { font-size:24px; font-weight:900; margin:0 0 6px; }
.tile p { font-size:16px; color:#2c2c2c; margin:0; }
.tile .cta { margin-top:12px; background:#3b63fb; color:#fff; border:2px solid #3b63fb; border-radius:16px; height:30px; padding:3px 16px 4px; font-size:15px; font-weight:700; }
footer { position:absolute; bottom:0; left:0; right:0; padding:12px 32px; border-top:1px solid #dadada; display:flex; justify-content:space-between; font-size:11px; color:#686868; }
</style></head>
<body>
<div class="hero">
<nav>
<div class="logo"></div>
<div class="navlinks"><span>Creativity</span><span>PDF</span><span>Marketing</span><span>Firefly</span></div>
<button class="signin">Sign in</button>
</nav>
<div class="heroinner">
<h1>Create at the highest level.</h1>
<div class="heroctas">
<button class="pillwhite">Free trial</button>
<button class="pillghost">See all products</button>
</div>
</div>
</div>
<div class="quicklinks">
<div class="glass">Creativity and design</div>
<div class="glass">Content creation</div>
<div class="glass">PDF and document essentials</div>
</div>
<div class="tiles">
<div class="tile"><h3>Firefly</h3><p>Create and enhance images, videos, and vectors with generative AI.</p><button class="cta">Buy now</button></div>
<div class="tile"><h3>Photoshop</h3><p>Everything you need to make anything, on any device.</p><button class="cta">Buy now</button></div>
<div class="tile"><h3>Acrobat</h3><p>Turn any document into a professional, secure PDF.</p><button class="cta">Buy now</button></div>
</div>
<footer>
<span>© Adobe</span>
<span>Empowering everyone to create.</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f6; color: #272d45;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f6; color: #272d45;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #272d45; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #992ae3; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #f4f4f6; color: #272d45;
border: 1px solid #992ae3; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f4f4f6; color: #272d45;
border: 1px solid #c1c2ca; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #992ae3; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f4f6; color:#272d45; box-sizing:border-box;
font-family:'Josefin Sans',sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#fff; border-bottom:1px solid #e5e5eb; }
.brand { font-size:20px; font-weight:600; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#272d45; }
.navlinks span.active { color:#992ae3; border-bottom:2px solid #992ae3; padding-bottom:26px; }
.hero { background:#e5e5e5; border-radius:20px; margin:20px 32px 0; padding:36px; display:flex; align-items:center; gap:30px; }
.heroText { flex:1; }
.headline { font-size:28px; font-weight:500; line-height:1.25; margin-bottom:10px; }
.heroBtn { display:inline-block; background:#992ae3; color:#fff; border-radius:8px; padding:14px 24px; font-size:16px;
font-weight:600; letter-spacing:0.5px; }
.heroImg { flex:1; height:140px; border-radius:16px; background:radial-gradient(circle at 35% 35%,#ffcf2a,#992ae3 75%); position:relative; }
.heroImg::after { content:''; position:absolute; right:20px; bottom:16px; width:56px; height:56px; border-radius:50%; background:#b2f9e9; }
.section { padding:24px 32px 0; }
.section h2 { font-size:24px; font-weight:600; margin-bottom:14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { background:#fff; border-radius:20px; padding:16px; }
.photo { aspect-ratio:1/1; border-radius:12px; margin-bottom:10px; position:relative; }
.c1 .photo { background:linear-gradient(150deg,#ff7a9e,#ffcf2a); }
.c2 .photo { background:linear-gradient(150deg,#0e7a82,#1990c6); }
.c3 .photo { background:linear-gradient(150deg,#992ae3,#d4a3f1); }
.c4 .photo { background:linear-gradient(150deg,#b2f9e9,#0e7a82); }
.badge { position:absolute; top:8px; left:8px; background:#992ae3; color:#fff; font-size:11px; font-weight:600;
letter-spacing:0.5px; text-transform:uppercase; border-radius:9999px; padding:4px 10px; }
.badge.bs { background:#ffcf2a; color:#272d45; }
.name { font-size:16px; font-weight:500; }
.price { font-size:16px; color:#2c3e50; margin-top:2px; }
.rating { color:#ffcf2a; font-size:14px; margin-top:2px; }
</style></head>
<body>
<nav>
<div class="brand">Glow Recipe</div>
<div class="navlinks"><span class="active">Bestsellers</span><span>Watermelon</span><span>Blueberry</span><span>Avocado</span></div>
</nav>
<div class="hero">
<div class="heroText">
<div class="headline">Fruit-Powered, Clinically Proven Skincare</div>
<div class="heroBtn">Shop Now</div>
</div>
<div class="heroImg"></div>
</div>
<div class="section">
<h2>Best Sellers</h2>
<div class="grid">
<div class="card c1"><div class="photo"><div class="badge bs">Best Seller</div></div><div class="name">Watermelon Dew Drops</div><div class="price">$39</div><div class="rating">★★★★★</div></div>
<div class="card c2"><div class="photo"></div><div class="name">Blueberry Bounce Cream</div><div class="price">$42</div><div class="rating">★★★★☆</div></div>
<div class="card c3"><div class="photo"><div class="badge">New</div></div><div class="name">Avocado Melt Serum</div><div class="price">$45</div><div class="rating">★★★★★</div></div>
<div class="card c4"><div class="photo"></div><div class="name">Watermelon Glow Mist</div><div class="price">$24</div><div class="rating">★★★★☆</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #8b0000; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #121212;
border: 1px solid #8b0000; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #8b0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121212; font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:#fff; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:20px;font-weight:600;letter-spacing:-0.3px;}
.searchpill{width:260px;height:36px;border-radius:9999px;border:1px solid #666;background:#121212;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#999;}
.navicons{font-size:14px;font-weight:500;}
.hero{height:260px;background:linear-gradient(120deg,#1a1a1a,#3a0000 70%);display:flex;align-items:center;padding:0 30px;position:relative;}
.herotext{width:52%;}
.h1{font-size:24px;font-weight:600;line-height:1.3;margin:0 0 14px;}
.sub{font-size:14px;color:#ccc;margin:0 0 18px;max-width:340px;}
.btn{display:inline-block;background:#8b0000;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.3px;padding:14px 24px;border-radius:8px;}
.grid{display:flex;gap:16px;padding:20px 30px 0;}
.card{width:200px;background:#1c1c1c;border-radius:8px;padding:12px;position:relative;}
.thumb{aspect-ratio:1/1;height:110px;border-radius:8px;margin-bottom:10px;}
.badge{position:absolute;top:20px;left:20px;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.b-preorder{background:#006400;color:#fff;}
.b-new{background:#ee9441;color:#121212;}
.title{font-size:14px;font-weight:500;}
.price{font-size:14px;color:#999;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#121212;border-top:1px solid #2c2c2c;color:#666;font-size:12px;display:flex;align-items:center;padding:0 30px;gap:20px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Square Enix Store</div>
<div class="searchpill">Search games, figures, soundtracks...</div>
<div class="navicons">Cart</div>
</div>
<div class="hero">
<div class="herotext">
<div class="h1">Pre-order the Collector's Edition.</div>
<div class="sub">CG renders, key art, and the same reverence as a museum gift shop.</div>
<div class="btn">Pre-order Now</div>
</div>
</div>
<div class="grid">
<div class="card"><span class="badge b-preorder">Pre-order</span><div class="thumb" style="background:linear-gradient(135deg,#8b0000,#121212)"></div><div class="title">Collector's Edition Statue</div><div class="price">$299.99</div></div>
<div class="card"><span class="badge b-new">New</span><div class="thumb" style="background:linear-gradient(135deg,#121212,#8b0000)"></div><div class="title">Original Soundtrack</div><div class="price">$19.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#333,#8b0000)"></div><div class="title">Character Art Book</div><div class="price">$34.99</div></div>
</div>
<div class="footer"><span>Games</span><span>Merchandise</span><span>Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eef1f0; color: #0c0c0c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eef1f0; color: #0c0c0c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.2; margin: 0; color: #0c0c0c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #606562; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.04em; background: #407961; color: #eef1f0;
border: none; border-radius: 2px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.04em; background: transparent; color: #0c0c0c;
border: 1px solid #407961; border-radius: 2px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #eef1f0; color: #0c0c0c;
border: 1px solid #b6b8b7; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #606562; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.08em; background: #1a211e; color: #eef1f0;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#eef1f0; font-family:'Bryant',Arial,Helvetica,sans-serif; color:#0c0c0c; }
*{box-sizing:border-box;}
.nav{height:60px;background:#1a211e;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-family:'Exposure-10',Arial,sans-serif;font-size:18px;color:#eef1f0;text-transform:uppercase;letter-spacing:1px;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#eef1f0;}
.hero{height:230px;background:#1a211e;color:#eef1f0;display:flex;align-items:center;padding:0 40px;}
.herotext{width:400px;}
.herotext h1{font-family:'Exposure-10',Arial,sans-serif;font-size:44px;font-weight:400;line-height:1.08;margin:0 0 12px;letter-spacing:-.5px;}
.herotext p{font-size:14px;color:#b8bcba;margin:0 0 16px;max-width:320px;}
.btn{display:inline-block;background:transparent;border:1.5px solid #eef1f0;color:#eef1f0;font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:12px 26px;border-radius:2px;}
.heroart{flex:1;height:170px;border-radius:4px;background:linear-gradient(135deg,#407961,#008464 70%);}
.body{display:flex;gap:16px;padding:16px 30px 0;}
.card{width:170px;background:#f9f9f9;border-radius:4px;padding:10px;}
.thumb{height:100px;background:#e6e9e8;border-radius:4px;margin-bottom:8px;}
.pname{font-size:14px;font-weight:600;margin:0;}
.swrow{display:flex;gap:4px;margin:6px 0;}
.sw{width:16px;height:16px;border-radius:9999px;}
.sw.on{outline:2px solid #0c0c0c;outline-offset:2px;}
.pprice{font-size:16px;font-weight:600;}
.spec{flex:1;background:#e6e9e8;border-radius:4px;padding:10px 16px;}
.spec .row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #d7dad8;font-size:13px;}
.spec .row:last-child{border-bottom:none;}
.spec .lbl{color:#606562;text-transform:uppercase;font-size:11px;letter-spacing:.08em;}
.footer{position:absolute;bottom:0;left:0;right:0;height:96px;background:#1a211e;color:#eef1f0;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Peak Design Laptop B 2</div>
<div class="navlinks"><div>Travel Bags</div><div>Laptop Sleeves</div><div>Accessories</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Built like the gear you carry.</h1>
<p>Weatherproof laptop sleeves and travel systems, engineered corner to corner.</p>
<div class="btn">Shop Sleeves</div>
</div>
<div class="heroart"></div>
</div>
<div class="body">
<div class="card"><div class="thumb"></div><div class="pname">Laptop Sleeve, 14"</div><div class="swrow"><div class="sw on" style="background:#189cc5;"></div><div class="sw" style="background:#4a69d4;"></div><div class="sw" style="background:#8164bf;"></div><div class="sw" style="background:#e9a93f;"></div></div><div class="pprice">$59.95</div></div>
<div class="spec">
<div class="row"><span class="lbl">Capacity</span><span>14L</span></div>
<div class="row"><span class="lbl">Laptop Fit</span><span>Up to 16"</span></div>
<div class="row"><span class="lbl">Material</span><span>600D recycled nylon</span></div>
<div class="row"><span class="lbl">Weight</span><span>0.4 lb</span></div>
<div class="row"><span class="lbl">Weatherproof</span><span>Yes</span></div>
</div>
</div>
<div class="footer"><span>© Peak Design — Carry Systems</span><span>Support Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.22; letter-spacing: -0.3px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.8px; background: #000000; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.8px; background: #ffffff; color: #111111;
border: 1px solid #000000; border-radius: 0px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; background: #f7f7f7; color: #111111;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Neue Haas Grotesk','Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#333333; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e5e5e5;}
.logo{font-size:18px;font-weight:500;color:#000000;}
.navlinks{display:flex;gap:24px;font-size:13px;color:#767676;}
.navlinks span:first-child{color:#111111;border-bottom:1px solid #111111;padding-bottom:16px;}
.sec{padding:18px 36px 0;}
.secTitle{font-size:24px;font-weight:500;color:#111111;margin-bottom:6px;}
.secSub{font-size:13px;color:#767676;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:150px;}
.thumb{width:150px;height:200px;background:#f7f7f7;margin-bottom:8px;}
.ptitle{font-size:13px;color:#111111;margin-bottom:2px;}
.pprice{font-size:13px;color:#767676;}
.configPanel{position:absolute;bottom:0;left:0;right:0;height:120px;border-top:1px solid #e5e5e5;padding:14px 36px;display:flex;gap:24px;align-items:center;}
.confGroup{display:flex;gap:8px;}
.chip{border:1px solid #bbbbbb;padding:8px 14px;font-size:12px;color:#333333;}
.chip.active{border-color:#000000;color:#000000;font-weight:500;}
.confLabel{font-size:10px;letter-spacing:0.5px;text-transform:uppercase;color:#767676;margin-bottom:6px;}
.confCol{display:flex;flex-direction:column;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Poster Store</div>
<div class="navlinks"><span>Abstract</span><span>Botanical</span><span>Photography</span><span>Frames</span></div>
</div>
<div class="sec">
<div class="secTitle">Botanical Editions</div>
<div class="secSub">Museum-grade prints, sized and framed to order.</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e8e0d5,#111111);"></div><div class="ptitle">Sage Study No. 4</div><div class="pprice">$29.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#111111,#e8e0d5);"></div><div class="ptitle">Vermillion Abstract</div><div class="pprice">$34.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#767676,#e8e0d5);"></div><div class="ptitle">Fern Line Drawing</div><div class="pprice">$29.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e8e0d5,#767676);"></div><div class="ptitle">Grayscale Coastline</div><div class="pprice">$39.00</div></div>
</div>
</div>
<div class="configPanel">
<div class="confCol"><div class="confLabel">Size</div><div class="confGroup"><div class="chip">30×40</div><div class="chip active">50×70</div><div class="chip">70×100</div></div></div>
<div class="confCol"><div class="confLabel">Frame</div><div class="confGroup"><div class="chip active">Oak</div><div class="chip">Black</div><div class="chip">No Frame</div></div></div>
<div class="confCol"><div class="confLabel">Paper</div><div class="confGroup"><div class="chip active">Matte</div><div class="chip">Gloss</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #809ba8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #003e51; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #d6e9ee; color: #003e51;
border: 1px solid #003e51; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #809ba8; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #003e51; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
h1,h2,.brand,.navlinks,.btn { font-family:'American Typewriter','Courier New',monospace; }
nav { height:64px; background:#ffffff; border-bottom:1px solid #dedede; display:flex; align-items:center;
justify-content:space-between; padding:0 36px; }
.brand { font-size:19px; font-weight:700; color:#003e51; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:600; letter-spacing:0.5px; }
.navlinks span.active { color:#003e51; border-bottom:2px solid #003e51; padding-bottom:20px; }
.navlinks span:not(.active) { color:#335f72; }
.hero { height:180px; background:#003e51; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.hero h1 { color:#fff; font-size:34px; margin:0 0 10px; max-width:440px; line-height:1.2; }
.hero p { color:#d6e9ee; font-size:15px; margin:0 0 16px; font-family:Helvetica,Arial,sans-serif; }
.btn-teal { display:inline-block; background:#d6e9ee; color:#003e51; font-size:14px; font-weight:700; letter-spacing:0.5px;
padding:12px 26px; border-radius:8px; }
.marquee { width:120px; height:150px; border:3px solid #d6e9ee; border-radius:6px; position:relative; }
.marquee::before { content:'★'; position:absolute; top:10px; left:50%; transform:translateX(-50%); color:#d6e9ee; font-size:24px; }
.search-pill { padding:14px 36px; }
.search-pill .box { height:44px; border-radius:9999px; border:1px solid #dedede; display:flex; align-items:center; padding:0 20px;
font-size:14px; color:#809ba8; background:#fff; max-width:340px; font-family:Helvetica,Arial,sans-serif; }
.grid { display:flex; gap:16px; padding:6px 36px 0; }
.card { flex:1; background:#ffffff; border-radius:12px; box-shadow:0 0 0 1px #e8e8e8; padding:16px; position:relative; }
.card .imgbox { height:96px; background:#f5f7f8; border-radius:8px; margin-bottom:8px; display:flex; align-items:center; justify-content:center; }
.book-cover { width:56px; height:80px; background:linear-gradient(160deg,#335f72,#003e51); border-radius:2px; }
.badge { position:absolute; top:12px; left:12px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
padding:2px 8px; border-radius:4px; font-family:Helvetica,Arial,sans-serif; }
.badge.new { background:#003e51; color:#fff; }
.badge.sale { background:#d6e9ee; color:#003e51; }
.card .title { font-size:18px; font-weight:600; margin-top:4px; margin-bottom:4px; }
.card .price { font-size:14px; color:#335f72; font-family:Helvetica,Arial,sans-serif; }
footer { position:absolute; bottom:0; left:0; right:0; height:88px; background:#003e51; color:#fff; display:flex;
align-items:center; justify-content:space-between; padding:0 36px; }
footer .col { font-size:12px; color:#d6e9ee; line-height:1.9; font-family:Helvetica,Arial,sans-serif; }
footer .col b { display:block; color:#fff; margin-bottom:3px; }
.wrap { position:relative; height:640px; }
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="brand">Drama Book Shop</div>
<div class="navlinks"><span class="active">Plays</span><span>Musicals</span><span>Events</span><span>Rare Editions</span></div>
</nav>
<div class="hero">
<div>
<h1>A proscenium arch, rendered in ink.</h1>
<p>Scripts, playbills, and theatre history for the working stage.</p>
<a class="btn-teal">Browse Scripts</a>
</div>
<div class="marquee"></div>
</div>
<div class="search-pill"><div class="box">Search by title, playwright, or ISBN...</div></div>
<div class="grid">
<div class="card"><span class="badge new">New</span><div class="imgbox"><div class="book-cover"></div></div><div class="title">Acts of Silence</div><div class="price">$18.00</div></div>
<div class="card"><span class="badge sale">Sale</span><div class="imgbox"><div class="book-cover"></div></div><div class="title">The Understudy's Notebook</div><div class="price">$14.00</div></div>
<div class="card"><div class="imgbox"><div class="book-cover"></div></div><div class="title">Collected One-Acts, Vol. II</div><div class="price">$22.00</div></div>
<div class="card"><div class="imgbox"><div class="book-cover"></div></div><div class="title">Building the Broadway Set</div><div class="price">$28.00</div></div>
</div>
<footer>
<div class="col"><b>Shop</b>Plays<br>Musicals</div>
<div class="col"><b>Visit</b>Events<br>Store Hours</div>
<div class="col"><b>Drama Book Shop</b>© A quiet, knowledgeable companion.</div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -0.2px; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #E8500A; color: #FFFFFF;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: transparent; color: #1A1A1A;
border: 1px solid #E8500A; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #1C1C1C; color: #FFFFFF;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#111111; font-family:Inter,-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif; color:#fff; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #2e2e2e;}
.logo{font-size:22px;font-weight:700;letter-spacing:-0.2px;}
.navlinks{display:flex;gap:26px;font-size:15px;font-weight:500;color:#fff;}
.hero{display:flex;padding:34px 30px 24px;align-items:center;}
.herotext{width:48%;}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:#e8500a;margin-bottom:12px;}
.h1{font-size:38px;font-weight:700;line-height:1.1;letter-spacing:-0.5px;margin:0 0 12px;}
.sub{font-size:15px;color:#9a9a9a;line-height:1.5;margin:0 0 20px;max-width:340px;}
.cta{display:inline-block;background:#e8500a;color:#fff;font-size:15px;font-weight:600;padding:13px 26px;letter-spacing:0;}
.heroimg{width:52%;height:220px;background:radial-gradient(circle at 35% 40%,#e8500a,#1c1c1c 70%);position:relative;border-radius:4px;}
.heroimg:before{content:'';position:absolute;left:40%;top:15%;width:60%;height:55%;background:#111;border-radius:50% 50% 8% 8%;box-shadow:0 6px 20px rgba(0,0,0,0.5);}
.feats{display:flex;justify-content:space-between;padding:20px 30px;background:#1c1c1c;border-top:1px solid #2e2e2e;}
.feat{text-align:center;}
.featlabel{font-size:11px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:#9a9a9a;}
.featval{font-size:28px;font-weight:600;color:#e8500a;margin-top:6px;}
.grid{display:flex;gap:14px;padding:20px 30px 0;}
.card{width:200px;background:#fff;color:#1a1a1a;border:1px solid #e2e2e2;border-radius:8px;padding:14px;}
.thumb{height:90px;background:#f6f5f3;border-radius:4px;margin-bottom:10px;}
.pname{font-size:16px;font-weight:600;}
.pprice{font-size:20px;font-weight:700;margin-top:4px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Spark Grills</div>
<div class="navlinks"><span>Shop</span><span>Technology</span><span>Recipes</span><span>Support</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="eyebrow">±5°F Accuracy</div>
<div class="h1">Fire, dialed<br>by degree.</div>
<div class="sub">Charcoal control with a Bluetooth stack. Precision hardware, not patio furniture.</div>
<div class="cta">Shop Grills</div>
</div>
<div class="heroimg"></div>
</div>
<div class="feats">
<div class="feat"><div class="featlabel">Accuracy</div><div class="featval">±5°F</div></div>
<div class="feat"><div class="featlabel">Max Cook</div><div class="featval">24hr</div></div>
<div class="feat"><div class="featlabel">Peak Temp</div><div class="featval">600°F</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e8500a,#1a1a1a)"></div><div class="pname">Spark Prime 500</div><div class="pprice">$1,199</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a1a1a,#e8500a)"></div><div class="pname">Spark Grid Fan</div><div class="pprice">$149</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#2c2c2c,#e8500a)"></div><div class="pname">Ash Tray Kit</div><div class="pprice">$59</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #575757; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #f8bb86; color: #222222;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #f9f9f9; color: #222222;
border: 1px solid #f8bb86; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9f9f9; color: #222222;
border: 1px solid #c3c3c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #575757; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #0da19a; color: #f9f9f9;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#f9f9f9;color:#3a3a3a;font-family:'Open Sans',Arial,Helvetica,sans-serif;}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#fff;border-bottom:1px solid #eeeeee;}
.logo{font-size:22px;font-weight:700;color:#222;}
.logo span{color:#0da19a;}
.searchpill{flex:1;max-width:340px;margin:0 30px;height:36px;border-radius:999px;background:#f1f1f0;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#8a8a8a;}
.navlinks{display:flex;gap:16px;font-size:12px;font-weight:600;color:#3a3a3a;}
.hero{background:linear-gradient(120deg,#f8bb86,#f0a05e);padding:26px 30px;display:flex;align-items:center;justify-content:space-between;}
.hero h1{font-size:30px;font-weight:700;color:#222;margin:0 0 8px;}
.hero p{font-size:13px;color:#3a3a3a;margin:0 0 14px;max-width:400px;}
.cta{background:#0da19a;color:#fff;padding:11px 24px;border-radius:8px;font-weight:700;font-size:13px;display:inline-block;}
.crt{width:220px;height:150px;background:#222;border-radius:10px;position:relative;box-shadow:0 10px 24px rgba(0,0,0,.2);}
.crt::after{content:'';position:absolute;top:14px;left:14px;right:14px;bottom:36px;background:linear-gradient(160deg,#0da19a,#014f4a);border-radius:6px;}
.crt .btn{position:absolute;bottom:12px;left:14px;width:24px;height:8px;background:#f27474;border-radius:4px;}
.strip{display:flex;gap:10px;padding:14px 30px 4px;}
.chip{background:#fff;border:1px solid #dedede;border-radius:999px;padding:7px 16px;font-size:11px;font-weight:700;color:#575757;}
.chip.active{background:#0da19a;color:#fff;border-color:#0da19a;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:14px 30px;}
.card{background:#fff;border-radius:8px;padding:10px;position:relative;}
.box{height:90px;border-radius:6px;margin-bottom:8px;position:relative;overflow:hidden;}
.b1{background:linear-gradient(160deg,#f8bb86,#e08947);}
.b2{background:linear-gradient(160deg,#0da19a,#086b66);}
.b3{background:linear-gradient(160deg,#a5dc86,#6cb84a);}
.b4{background:linear-gradient(160deg,#f27474,#c94545);}
.cart{position:absolute;top:6px;left:6px;background:#ea7d7d;color:#fff;font-size:8px;font-weight:800;padding:3px 6px;border-radius:4px;text-transform:uppercase;}
.name{font-size:12px;font-weight:700;color:#222;margin:0 0 3px;}
.plat{font-size:10px;color:#888;margin:0 0 5px;}
.price{font-size:13px;font-weight:700;color:#0da19a;}
</style>
<div class="nav">
<div class="logo">Game Over Video Games<span>.</span></div>
<div class="searchpill">🔍 Search cartridges, consoles, guides...</div>
<div class="navlinks"><span>NES</span><span>SNES</span><span>Genesis</span><span>N64</span><span>Sell Games</span></div>
</div>
<div class="hero">
<div>
<h1>Every console, every era, still glowing</h1>
<p>Tested cartridges, boxed consoles, and guides shipped from a basement that never stopped playing.</p>
<a class="cta">Shop Retro Consoles</a>
</div>
<div class="crt"><div class="btn"></div></div>
</div>
<div class="strip">
<div class="chip active">All Platforms</div><div class="chip">Nintendo</div><div class="chip">Sega</div><div class="chip">PlayStation</div><div class="chip">Handhelds</div>
</div>
<div class="grid">
<div class="card"><div class="box b1"><div class="cart">Sold Out</div></div><div class="name">Super Mario World Cartridge</div><div class="plat">SNES · Cart Only</div><div class="price">$44.99</div></div>
<div class="card"><div class="box b2"></div><div class="name">Sega Genesis Model 1 Console</div><div class="plat">Tested · 2 Controllers</div><div class="price">$89.00</div></div>
<div class="card"><div class="box b3"></div><div class="name">Pokemon Blue Boxed</div><div class="plat">Game Boy · CIB</div><div class="price">$129.00</div></div>
<div class="card"><div class="box b4"></div><div class="name">N64 Controller Bundle</div><div class="plat">3-Pack · Refurbished</div><div class="price">$54.99</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f4; color: #1c1b1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f4; color: #1c1b1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #1c1b1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #646467; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #069697; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #069697;
border: 1px solid #069697; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1c1b1e;
border: 1px solid #bebebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #646467; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #069697; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f4f4; color:#1c1b1e; box-sizing:border-box;
font-family:'Helvetica Neue', Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#1c1b1e; border-bottom:1px solid #39393b; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.brand { font-size:19px; font-weight:700; color:#fff; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:500; color:#fff; }
.navlinks span:nth-child(2) { color:#54c4c8; }
.subbtn { background:#069697; color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:600; }
.hero { background:#14233c; padding:26px 32px; display:flex; align-items:center; gap:28px; position:relative; }
.hero::before { content:''; position:absolute; left:0; top:16px; bottom:16px; width:4px; background:#069697; }
.hero-copy { flex:1.2; padding-left:16px; }
.hero h1 { font-size:30px; font-weight:700; color:#fff; line-height:1.1; letter-spacing:-0.5px; margin:0 0 8px; }
.hero p { font-size:14px; color:#d9d9d9; margin:0 0 14px; max-width:420px; line-height:1.4; }
.heroRow { display:flex; gap:10px; }
.btn-primary { background:#069697; color:#fff; border:none; border-radius:8px; padding:11px 20px; font-size:14px; font-weight:600; height:40px; }
.btn-ghost { background:transparent; color:#fff; border:1px solid #fff; border-radius:8px; padding:10px 19px; font-size:14px; font-weight:600; height:40px; }
.slab { flex:1; background:#14233c; border:2px solid #069697; border-radius:12px; padding:16px; text-align:center; }
.slab-grade { font-size:40px; font-weight:700; color:#b6975b; line-height:1; letter-spacing:-1px; }
.slab-label { font-size:11px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:0.3px; margin-top:4px; }
.slab-sub { display:flex; justify-content:space-between; margin-top:10px; font-size:10px; color:#a2a2a3; }
.slab-sub b { color:#54c4c8; display:block; font-size:12px; }
.section { padding:20px 32px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.sec-head h2 { font-size:18px; font-weight:700; margin:0; }
.sec-head span { font-size:12px; color:#069697; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { background:#fff; border:1px solid #e7e7e8; border-radius:8px; padding:10px; position:relative; }
.thumb { height:110px; border-radius:6px; position:relative; margin-bottom:8px; }
.t1 { background:linear-gradient(160deg,#ddf3f4,#a2d8d9); }
.t2 { background:linear-gradient(160deg,#fdf3e2,#e5cf9e); }
.t3 { background:linear-gradient(160deg,#e7f6ec,#a9d8b8); }
.t4 { background:linear-gradient(160deg,#e7e7e8,#c7c7c9); }
.gb { position:absolute; top:6px; left:6px; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:0.3px; padding:2px 8px; border-radius:4px; color:#fff; }
.gb.teal { background:#069697; }
.gb.gold { background:#b6975b; }
.gb.green { background:#198754; }
.card h3 { font-size:13px; font-weight:600; margin:0 0 2px; }
.card .meta { font-size:11px; color:#646467; margin:0 0 6px; }
.card .price { font-size:16px; font-weight:700; margin:0; }
.pop { background:#fff; border:1px solid #e7e7e8; border-radius:8px; margin-top:16px; }
.pop-row { display:grid; grid-template-columns:2.4fr 1fr 1fr 1fr; padding:8px 16px; font-size:12px;
border-bottom:1px solid #e7e7e8; align-items:center; }
.pop-row.head { background:#f2f2f2; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#646467; }
.pop-row:hover:not(.head) { background:#ddf3f4; }
.pop-row b { font-weight:700; }
footer { background:#1c1b1e; color:#737375; font-size:11px; padding:12px 32px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#54c4c8; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Beckett</p>
<div class="navlinks"><span>Grading</span><span>Marketplace</span><span>Price Guide</span><span>Magazine</span></div>
<button class="subbtn">Subscribe</button>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Know exactly what it's worth</h1>
<p>Submit for grading, track population reports, and shop verified graded cards backed by the industry's trusted slab.</p>
<div class="heroRow">
<button class="btn-primary">Grade this card</button>
<button class="btn-ghost">View pop report</button>
</div>
</div>
<div class="slab">
<div class="slab-grade">9.5</div>
<div class="slab-label">Gem Mint</div>
<div class="slab-sub">
<div>Centering<b>9.5</b></div>
<div>Corners<b>10</b></div>
<div>Surface<b>9.5</b></div>
<div>Edges<b>9.5</b></div>
</div>
</div>
</section>
<section class="section">
<div class="sec-head"><h2>Marketplace listings</h2><span>Browse all</span></div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="gb teal">9.5</span></div><h3>1998 Chrome #1</h3><p class="meta">Refractor · PSA pop 412</p><p class="price">$1,240</p></div>
<div class="card"><div class="thumb t2"><span class="gb gold">Pristine</span></div><h3>Rookie Auto Patch</h3><p class="meta">/99 · Beckett 10</p><p class="price">$3,850</p></div>
<div class="card"><div class="thumb t3"><span class="gb green">Authentic</span></div><h3>Vintage Signature</h3><p class="meta">1971 · Encapsulated</p><p class="price">$610</p></div>
<div class="card"><div class="thumb t4"><span class="gb teal">9</span></div><h3>Silver Prizm #88</h3><p class="meta">Mint · Low pop</p><p class="price">$275</p></div>
</div>
<div class="pop">
<div class="pop-row head"><span>Card / Set</span><span>Grade</span><span>Pop</span><span>Value</span></div>
<div class="pop-row"><span>1998 Chrome #1 Refractor</span><span>9.5</span><span>412</span><b>$1,240</b></div>
<div class="pop-row"><span>Rookie Auto Patch /99</span><span>10</span><span>18</span><b>$3,850</b></div>
</div>
</section>
<footer>
<span>© Beckett</span>
<div><a href="#">Grading</a><a href="#">Resources</a><a href="#">Company</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #202020; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #202020; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.18; letter-spacing: -0.2px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #969696; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #c8202f; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #232323; color: #fafafa;
border: 1px solid #c8202f; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #232323; color: #fafafa;
border: 1px solid #212121; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969696; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #c8202f; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>HyperX mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#202020; color:#fafafa;
font-family:'Proxima Nova', 'RBNo3.1', sans-serif;
}
*{box-sizing:border-box;}
.nav{
height:64px; background:#232323; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
}
.logo{font-size:22px; font-weight:700; letter-spacing:-0.3px; color:#fafafa;}
.logo span{color:#c8202f;}
.navlinks{display:flex; gap:26px;}
.navlinks span{font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#969696;}
.navlinks .active{color:#c8202f; border-bottom:2px solid #c8202f; padding-bottom:20px;}
.cart{width:36px; height:36px; border-radius:4px; background:#2d2d2d; position:relative;}
.cartbadge{position:absolute; top:-6px; right:-6px; width:16px; height:16px; border-radius:50%; background:#c8202f; font-size:9px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;}
.hero{
height:280px; position:relative; background:radial-gradient(ellipse at 30% 50%, #3c1418 0%, #202020 62%);
display:flex; align-items:center; padding:0 32px; overflow:hidden;
}
.hero:after{
content:''; position:absolute; right:60px; top:40px; width:220px; height:200px; border-radius:12px;
background:linear-gradient(140deg,#3c3c3c 0%, #151515 55%, #050505 100%);
box-shadow: -30px 0 60px rgba(200,32,47,0.35), 20px 0 40px rgba(0,0,0,0.6);
}
.hero-text{width:480px; z-index:2;}
.accentline{width:56px; height:2px; background:#c8202f; margin-bottom:14px;}
.h1{font-size:40px; font-weight:700; letter-spacing:-0.5px; line-height:1.1; margin:0 0 14px 0; color:#fafafa;}
.h1 em{font-style:normal; color:#c8202f;}
.hsub{font-size:16px; color:#969696; line-height:1.5; margin:0 0 22px 0; max-width:400px;}
.herocta{display:inline-flex; align-items:center; justify-content:center; width:190px; height:46px; background:#c8202f; color:#fff; border-radius:4px; font-size:15px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase;}
.seclabel{padding:22px 32px 14px 32px; font-size:12px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:#787878;}
.grid{display:flex; gap:16px; padding:0 32px;}
.card{width:190px; background:#232323; border-radius:8px; overflow:hidden; border-top:2px solid #c8202f;}
.cimg{
height:96px; background:linear-gradient(135deg,#3c3c3c 0%,#151515 70%);
display:flex; align-items:center; justify-content:center; position:relative;
}
.cimg-glow{width:70px; height:70px; border-radius:50%; background:radial-gradient(circle,rgba(200,32,47,0.55),transparent 70%);}
.badge{position:absolute; top:8px; left:8px; background:#ff8b21; color:#232323; font-size:10px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; border-radius:2px; padding:2px 6px;}
.badge-red{background:#c8202f; color:#fff;}
.cbody{padding:12px 14px 14px 14px;}
.cname{font-size:14px; font-weight:600; margin:0 0 6px 0; color:#fafafa;}
.cprice{font-size:18px; font-weight:700; color:#fafafa; margin:0;}
.cprice-sale{color:#c8202f;}
.cold{font-size:12px; color:#969696; text-decoration:line-through; margin-left:6px;}
</style>
<div class="nav">
<div class="logo">Hyperx</div>
<div class="navlinks">
<span class="active">Headsets</span>
<span>Keyboards</span>
<span>Mice</span>
<span>Cloud</span>
</div>
<div class="cart"><div class="cartbadge">3</div></div>
</div>
<div class="hero">
<div class="hero-text">
<div class="accentline"></div>
<h1 class="h1">GEAR THAT <em>WINS</em> IN THE DARK.</h1>
<p class="hsub">Precision audio and mechanical switches built for the moment the lights go out.</p>
<div class="herocta">Shop Cloud III</div>
</div>
</div>
<div class="seclabel">Best Sellers</div>
<div class="grid">
<div class="card">
<div class="cimg"><span class="badge">NEW</span><div class="cimg-glow"></div></div>
<div class="cbody">
<p class="cname">Cloud III Wireless Headset</p>
<p class="cprice">$149.99</p>
</div>
</div>
<div class="card">
<div class="cimg"><div class="cimg-glow"></div></div>
<div class="cbody">
<p class="cname">Alloy Origin Core Keyboard</p>
<p class="cprice">$89.99</p>
</div>
</div>
<div class="card">
<div class="cimg"><span class="badge badge-red">SALE</span><div class="cimg-glow"></div></div>
<div class="cbody">
<p class="cname">Pulsefire Haste 2 Mouse</p>
<p class="cprice cprice-sale">$44.99<span class="cold">$59.99</span></p>
</div>
</div>
<div class="card">
<div class="cimg"><div class="cimg-glow"></div></div>
<div class="cbody">
<p class="cname">Fury Renegade Memory</p>
<p class="cprice">$79.99</p>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0057ae; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0057ae; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87aed5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0875e1; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0057ae; color: #ffffff;
border: 1px solid #0875e1; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0057ae; color: #f5f5f5;
border: 1px solid #2770b9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87aed5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #015cb6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#022043; box-sizing:border-box;
font-family:"Acid Grotesk", Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; background:#ffffff; border-bottom:1px solid #dfe2e6; }
.brand { font-size:19px; font-weight:800; margin:0; color:#022043; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:700; color:#022043; }
.navlinks span:first-child { color:#0875e1; }
.btn-primary { background:#0057ae; color:#ffffff; border:none; border-radius:24px; padding:0 20px; height:38px;
font-size:14px; font-weight:700; }
.hero { position:relative; z-index:2; padding:26px 36px 18px; display:flex; flex-direction:column; gap:10px; max-width:640px; }
.eyebrow { font-size:13px; font-weight:700; letter-spacing:0.08em; color:#022043; text-transform:uppercase; }
.hero h1 { font-size:40px; font-weight:800; letter-spacing:-0.8px; line-height:1.14; margin:0; color:#022043; }
.hero p { font-size:15px; color:#494949; margin:0; max-width:520px; }
.row { display:flex; gap:10px; margin-top:6px; }
.btn-secondary { background:#ffffff; color:#022043; border:2px solid #022043; border-radius:24px; padding:0 20px; height:44px;
font-size:14px; font-weight:700; }
.btn-primary-lg { background:#0057ae; color:#ffffff; border:none; border-radius:24px; padding:0 24px; height:44px;
font-size:14px; font-weight:700; }
.band { position:relative; z-index:2; background:#f0f1f2; margin:6px 0 0; padding:18px 36px; display:grid;
grid-template-columns:repeat(3,1fr); gap:14px; }
.resource { background:#ffffff; border:1px solid #b6c1cc; border-radius:8px; padding:16px; display:flex; flex-direction:column; gap:6px; }
.badge { align-self:flex-start; background:#d7eafc; color:#004387; border-radius:999px; padding:3px 10px; font-size:11px; font-weight:700; }
.resource h3 { margin:0; font-size:15px; font-weight:800; color:#0057ae; }
.resource p { margin:0; font-size:12px; color:#494949; line-height:1.4; }
.lower { position:relative; z-index:2; display:grid; grid-template-columns:1.2fr 0.8fr; gap:16px; padding:18px 36px 16px; }
.tint { background:#d7eafc; border-radius:8px; padding:18px; }
.tint .eyebrow2 { font-size:12px; font-weight:700; letter-spacing:0.08em; color:#004387; text-transform:uppercase; }
.tint h2 { font-size:24px; font-weight:800; color:#022043; margin:6px 0 8px; }
.tint p { font-size:13px; color:#022043; margin:0 0 10px; max-width:400px; }
.canvas-panel { border:1px solid #dfe2e6; border-radius:8px; padding:16px; display:flex; flex-direction:column; gap:10px; }
.canvas-panel h4 { margin:0; font-size:12px; color:#787878; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }
.cinput { border:1px solid #7b858f; border-radius:4px; height:34px; display:flex; align-items:center; padding:0 12px; font-size:13px; color:#5e6a75; }
.cbtn { background:#f38b00; color:#ffffff; border:none; border-radius:999px; height:32px; padding:0 18px; font-size:13px; font-weight:700; align-self:flex-start; }
footer { position:relative; z-index:2; border-top:1px solid #dfe2e6; padding:12px 36px; display:flex;
justify-content:space-between; font-size:12px; color:#787878; }
</style></head>
<body>
<nav>
<p class="brand">Workday</p>
<div class="navlinks"><span>Products</span><span>Industries</span><span>Customers</span><span>Resources</span></div>
<button class="btn-primary">Contact Sales</button>
</nav>
<section class="hero">
<span class="eyebrow">Human Capital Management Software</span>
<h1>Superintelligence for work.</h1>
<p>The enterprise AI platform for HR, finance, and IT — one system of record, continuously updated.</p>
<div class="row">
<button class="btn-primary-lg">Play Demo</button>
<button class="btn-secondary">Learn More</button>
</div>
</section>
<section class="band">
<div class="resource"><span class="badge">Report</span><h3>The ROI of one platform</h3><p>See how unifying HR and finance drives measurable value across the enterprise.</p></div>
<div class="resource"><span class="badge">Guide</span><h3>Overcoming legacy ERP</h3><p>A practical playbook for moving off rigid, on-premise systems.</p></div>
<div class="resource"><span class="badge">Webinar</span><h3>Meet Sana in action</h3><p>Watch the AI layer surface insights across people and money.</p></div>
</section>
<section class="lower">
<div class="tint">
<span class="eyebrow2">ROI Value Calculator</span>
<h2>Built for people, not just records</h2>
<p>Estimate the time and cost savings of moving finance and HR onto a single continuously updated platform.</p>
<button class="btn-primary-lg">Read Report</button>
</div>
<div class="canvas-panel">
<h4>Search Canvas</h4>
<div class="cinput">Search components…</div>
<h4>Admin Console</h4>
<button class="cbtn">Run report</button>
</div>
</section>
<footer>
<span>© Workday</span>
<span>Workday · Products · Resources · Partners · Company</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; background: #337ab7; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; background: #ffffff; color: #555555;
border: 1px solid #337ab7; border-radius: 4px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #080808;
border: 1px solid #c1c1c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; background: #080808; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; background:#f5f5f5; color:#555555; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:56px;background:#080808;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:17px;font-weight:700;color:#fff;letter-spacing:0.3px;}
.navlinks{display:flex;gap:22px;font-size:14px;color:#ccc;}
.hero{height:200px;display:flex;background:#fff;border-bottom:1px solid #e5e5e5;}
.herotxt{width:46%;padding:22px 30px;display:flex;flex-direction:column;justify-content:center;}
.herotxt h1{font-size:24px;font-weight:700;color:#080808;margin:0 0 8px;}
.herotxt p{font-size:13px;margin:0 0 14px;max-width:280px;}
.cta{width:fit-content;font-size:13px;background:#337ab7;color:#fff;padding:9px 20px;border-radius:4px;}
.gtr{width:54%;background:linear-gradient(100deg,#f0f0f0,#fff 60%);position:relative;}
.body{position:absolute;left:80px;top:30px;width:120px;height:140px;border-radius:60px 60px 20px 20px;background:linear-gradient(160deg,#d9534f,#8a2f2c);}
.neck{position:absolute;left:210px;top:70px;width:150px;height:20px;background:#2b1a10;}
.head{position:absolute;left:355px;top:60px;width:26px;height:40px;background:#111;border-radius:0 8px 8px 0;}
.spectable{margin:0 30px;border-collapse:collapse;width:calc(100% - 60px);position:absolute;top:216px;font-size:12px;}
.row{display:flex;}
.row:nth-child(odd){background:#f5f5f5;}
.cell{flex:1;padding:7px 10px;border-bottom:1px solid #e5e5e5;}
.cell.lbl{font-weight:700;color:#080808;flex:0 0 140px;}
.swrow{position:absolute;top:334px;left:30px;right:30px;display:flex;align-items:center;gap:14px;}
.swrow .lbl{font-size:12px;font-weight:700;color:#080808;}
.sw{width:28px;height:28px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #e5e5e5;}
.sec{position:absolute;top:390px;left:30px;right:30px;}
.sec h2{font-size:16px;color:#080808;margin:0 0 12px;}
.grid{display:flex;gap:14px;}
.card{width:213px;background:#fff;border:1px solid #e5e5e5;border-radius:4px;padding:10px;}
.cimg{height:100px;border-radius:4px;margin-bottom:8px;}
.ctitle{font-size:13px;font-weight:700;color:#080808;}
.cprice{font-size:13px;margin-top:4px;color:#337ab7;font-weight:700;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#080808;color:#9d9d9d;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:11px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Music Man</div>
<div class="navlinks"><div>Guitars</div><div>Basses</div><div>Amplifiers</div><div>Dealers</div></div>
</div>
<div class="hero">
<div class="herotxt">
<h1>StingRay Special</h1>
<p>Neck-through construction, humbucker precision, finish photographed under studio light.</p>
<div class="cta">Find a Dealer</div>
</div>
<div class="gtr"><div class="body"></div><div class="neck"></div><div class="head"></div></div>
</div>
<div class="spectable">
<div class="row"><div class="cell lbl">Scale Length</div><div class="cell">25.5"</div><div class="cell">Neck Radius</div><div class="cell">11"</div></div>
<div class="row"><div class="cell lbl">Frets</div><div class="cell">22, Stainless</div><div class="cell">Pickups</div><div class="cell">Humbucker/Single</div></div>
</div>
<div class="swrow">
<span class="lbl">Finish:</span>
<div class="sw" style="background:#8a2f2c;"></div>
<div class="sw" style="background:#4a6fa5;"></div>
<div class="sw" style="background:#e2c14c;"></div>
<div class="sw" style="background:#111;"></div>
</div>
<div class="sec">
<h2>More Finishes</h2>
<div class="grid">
<div class="card"><div class="cimg" style="background:linear-gradient(150deg,#4a6fa5,#111)"></div><div class="ctitle">StingRay Special — Powder Blue</div><div class="cprice">$1,899.99</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(150deg,#e2c14c,#8a2f2c)"></div><div class="ctitle">Cutlass HH — Lemon Drop</div><div class="cprice">$1,699.99</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(150deg,#111,#555)"></div><div class="ctitle">Sabre Special — Jet Black</div><div class="cprice">$2,099.99</div></div>
</div>
</div>
<div class="footer"><span>© Ernie Ball Music Man</span><span>Warranty Find a Dealer</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb2b51; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb2b51; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff3c78; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb2b51; color: #000000;
border: 1px solid #ff3c78; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb2b51; color: #f5f5f5;
border: 1px solid #ed4b6b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ee2e57; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0e1011; color:#eff0f4; box-sizing:border-box;
font-family:"Pretendard","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.phone { width:340px; height:600px; margin:20px auto; background:#0e1011; border-radius:28px;
border:6px solid #222327; position:relative; overflow:hidden; }
.live-video { height:380px; background:radial-gradient(circle at 30% 20%, #3a2230, #0e1011 70%);
position:relative; }
.top-row { position:absolute; top:12px; left:12px; right:12px; display:flex; justify-content:space-between;
align-items:center; }
.avatar-ring { width:44px; height:44px; border-radius:50%;
background:conic-gradient(from -68deg, #ff2b51, #ffae8e); display:flex; align-items:center; justify-content:center; }
.avatar-ring .core { width:36px; height:36px; border-radius:50%; background:#222327; }
.live-badge { background:#eb2b51; color:#fff; font-size:10px; font-weight:700; padding:3px 8px;
border-radius:6px; margin-left:6px; }
.viewer { font-size:11px; color:#eff0f4; background:rgba(0,0,0,0.4); padding:4px 10px; border-radius:12px; }
.chat { position:absolute; left:12px; bottom:70px; font-size:11px; color:#eff0f4; line-height:1.6; }
.chat div { background:rgba(0,0,0,0.35); display:inline-block; padding:3px 8px; border-radius:10px;
margin-bottom:3px; }
.nudge { position:absolute; left:12px; right:12px; bottom:14px; height:38px;
background:rgba(47,23,253,0.10); color:#6456dc; font-size:13px; font-weight:600;
border-radius:4px; display:flex; align-items:center; padding:0 12px; }
.sheet { padding:14px; }
.price-row { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.price-row .now { color:#eb2b51; font-size:27px; font-weight:700; }
.price-row .old { color:#999999; font-size:13px; text-decoration:line-through; }
.coupon { background:#fff5f8; color:#eb2b51; border-radius:6px; padding:8px 12px; font-size:13px;
font-weight:700; margin-bottom:10px; }
.btn-row { display:flex; gap:8px; }
.btn-secondary { flex:1; background:#323232; color:#fff; border-radius:4px; height:34px; font-size:14px;
font-weight:500; display:flex; align-items:center; justify-content:center; }
.btn-primary { flex:1.6; background:#eb2b51; color:#fff; border-radius:8px; height:50px; font-size:16px;
font-weight:600; display:flex; align-items:center; justify-content:center; }
.brandbar { position:absolute; top:640px; }
.brand-label { position:absolute; top:14px; left:50%; transform:translateX(-50%); font-size:14px;
font-weight:700; color:#eff0f4; letter-spacing:0.3px; }
</style></head>
<body>
<span class="brand-label">Grip</span>
<div class="phone">
<div class="live-video">
<div class="top-row">
<div style="display:flex;align-items:center;">
<div class="avatar-ring"><div class="core"></div></div>
<span class="live-badge">LIVE</span>
</div>
<span class="viewer">1,204 watching</span>
</div>
<div class="chat">
<div>Sam: when's the restock?</div>
<div>Host: this deal is only live during the stream!</div>
</div>
<div class="nudge">⏱ Flash deal ends in 04:32</div>
</div>
<div class="sheet">
<div class="price-row"><span class="now">32% OFF</span><span class="old">$39.00</span></div>
<div class="coupon">Coupon price $26.52</div>
<div class="btn-row">
<div class="btn-secondary">Buy Now</div>
<div class="btn-primary">Add to Cart</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #181818;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #181818;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #181818; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #747474; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #ff5e00; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #181818;
border: 1px solid #ff5e00; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #181818;
border: 1px solid #c5c5c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #747474; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ff5e00; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#181818; box-sizing:border-box;
font-family:Lato,-apple-system,sans-serif; }
* { box-sizing:border-box; }
.topnav { height:56px; background:#1a1918; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.brand { font-size:18px; font-weight:700; color:#ff5e00; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:600; color:#ffffff; }
.searchpill { background:#ffffff; border-radius:9999px; padding:8px 16px; font-size:12px; color:#a0a0a0; width:160px; }
.navicons { display:flex; gap:16px; align-items:center; color:#ffffff; }
.cartdot { background:#ff5e00; color:#fff; border-radius:9999px; width:18px; height:18px;
display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; }
.catstrip { height:40px; background:#ffffff; display:flex; align-items:center; gap:22px; padding:0 32px;
font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.2px; color:#747474;
border-bottom:1px solid #d1d1d1; }
.catstrip span:nth-child(3) { color:#ff5e00; border-bottom:2px solid #ff5e00; padding-bottom:10px; }
.wrap { display:flex; height:calc(640px - 56px - 40px - 50px); }
.gallery { width:370px; background:#f8f8f8; display:flex; align-items:center; justify-content:center;
position:relative; }
.figure { width:150px; height:220px; background:linear-gradient(160deg,#ff5e00 0%,#029ddf 100%);
border-radius:8px; position:relative; box-shadow:0 16px 34px rgba(0,0,0,0.18); }
.figure::before { content:''; position:absolute; top:16px; left:50%; width:60px; height:60px;
background:#181818; border-radius:9999px; transform:translateX(-50%); }
.badge-excl { position:absolute; top:20px; left:20px; background:#029ddf; color:#fff; font-size:11px;
font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:2px 8px; border-radius:9999px; }
.badge-sale { position:absolute; top:20px; right:20px; background:#ff5e00; color:#fff; font-size:11px;
font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:2px 8px; border-radius:9999px; }
.info { flex:1; padding:24px 32px; display:flex; flex-direction:column; gap:9px; }
.kicker { font-size:12px; color:#747474; font-weight:600; }
h1 { font-family:'Nutmeg',Lato,sans-serif; font-size:24px; font-weight:700; margin:0; line-height:1.25; letter-spacing:-0.3px; }
.stars { font-size:12px; color:#fab818; }
.stars span { color:#747474; margin-left:6px; }
.pricerow { display:flex; align-items:baseline; gap:10px; margin-top:2px; }
.price { font-size:20px; font-weight:700; color:#ff5e00; }
.strike { font-size:14px; color:#747474; text-decoration:line-through; }
.buyrow { display:flex; gap:10px; margin-top:4px; }
.btn-primary { background:#ff5e00; color:#fff; border:none; border-radius:8px; padding:12px 24px;
font-weight:700; font-size:14px; }
.btn-secondary { background:#fff; color:#181818; border:2px solid #ff5e00; border-radius:8px;
padding:10px 22px; font-weight:700; font-size:14px; }
.badgerow { display:flex; gap:8px; margin-top:2px; }
.bpill { border-radius:9999px; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:0.5px; padding:3px 10px; color:#fff; }
.bpill.green { background:#2e844a; }
.bpill.red { background:#ea001e; }
.relgrid { margin-top:auto; display:flex; gap:10px; }
.relcard { flex:1; background:#f8f8f8; border-radius:8px; padding:8px; text-align:center; }
.relthumb { height:44px; border-radius:4px; margin-bottom:6px;
background:linear-gradient(135deg,#029ddf,#ff5e00); }
.relcard span { font-size:10px; color:#181818; font-weight:600; }
footer { height:50px; background:#141519; color:#747474; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; font-size:12px; }
</style></head>
<body>
<div class="topnav">
<div class="brand">Crunchyroll Store</div>
<div class="navlinks"><span>Anime</span><span>Manga</span><span>Figures</span><span>Apparel</span></div>
<div class="navicons"><span class="searchpill">Search store</span><span class="cartdot">4</span></div>
</div>
<div class="catstrip">
<span>Anime</span><span>Manga</span><span>Figures</span><span>Apparel</span><span>Home & Living</span>
</div>
<div class="wrap">
<div class="gallery">
<span class="badge-excl">Exclusive</span>
<span class="badge-sale">Sale</span>
<div class="figure"></div>
</div>
<div class="info">
<div class="kicker">Limited Run Figure · Series 02</div>
<h1>Starforge Chronicles Deluxe PVC Statue</h1>
<div class="stars">★★★★★ <span>4.7 · 962 reviews</span></div>
<div class="pricerow"><span class="price">$64.99</span><span class="strike">$79.99</span></div>
<div class="buyrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Wishlist</button>
</div>
<div class="badgerow">
<span class="bpill green">In Stock</span>
<span class="bpill red">Ships Oct</span>
</div>
<div class="relgrid">
<div class="relcard"><div class="relthumb"></div><span>Poster Set</span></div>
<div class="relcard"><div class="relthumb"></div><span>Keychain</span></div>
<div class="relcard"><div class="relthumb"></div><span>Apparel Tee</span></div>
</div>
</div>
</div>
<footer>
<span>© Crunchyroll Store</span>
<span>Help · About · Terms · Privacy</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f2f1ee; color: #191919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f2f1ee; color: #191919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #191919; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #424336; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f2f1ee; color: #191919;
border: 1px solid #424336; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f2f1ee; color: #191919;
border: 1px solid #bcbbb9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c4c117; color: #191919;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f2f1ee; font-family:'Sofia Pro','Oakes',Georgia,serif; color:#555555; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dbd7cd;}
.logo{font-family:'Oakes',serif;font-size:21px;font-weight:600;color:#191919;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0.2px;color:#555555;}
.navlinks .active{color:#424336;border-bottom:2px solid #424336;padding-bottom:4px;}
.search{width:200px;height:36px;border-radius:9999px;border:1px solid #dedede;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#707070;}
.hero{height:200px;background:#424336;display:flex;align-items:center;padding:0 32px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:60px;top:30px;width:120px;height:100px;background:linear-gradient(135deg,#c4c117,#907458 70%);clip-path:polygon(50% 0%,100% 100%,0% 100%);}
.herotext{max-width:420px;}
.herotext .kicker{font-family:'Oakes',serif;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#c4c117;margin-bottom:8px;}
.herotext h1{font-family:'Oakes',serif;font-size:28px;font-weight:600;color:#fff;margin:0 0 8px;line-height:1.15;}
.herotext p{font-size:14px;color:#dddad3;margin:0 0 14px;}
.herocta{display:inline-block;background:#c4c117;color:#191919;font-size:15px;font-weight:600;padding:12px 26px;border-radius:8px;}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:216px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.06);position:relative;}
.thumb{height:100px;border-radius:12px 12px 0 0;}
.badge{position:absolute;top:8px;left:8px;background:#c4c117;color:#191919;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.pbody{padding:12px 14px 14px;}
.ptitle{font-family:'Sofia Pro',sans-serif;font-size:15px;font-weight:600;color:#191919;}
.pprice{font-size:15px;color:#191919;margin-top:4px;}
.stars{color:#c4c117;font-size:12px;margin-top:2px;}
</style>
<div class="nav">
<div class="logo">Nemo Equipment</div>
<div class="navlinks"><div class="active">Tents</div><div>Sleeping Bags</div><div>Packs</div><div>Cookware</div></div>
<div class="search">Search gear...</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Built For The Trailhead</div>
<h1>Tents Pitched Against<br>Granite. Bags Built to Last.</h1>
<p>Durable, legible, unpretentious equipment for the alpine and beyond.</p>
<div class="herocta">Shop Tents</div>
</div>
</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#907458,#424336)"></div><div class="pbody"><div class="ptitle">Dagger Osmo 2P Tent</div><div class="pprice">$449.95</div><div class="stars">★★★★★</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d6a73e,#68695d)"></div><div class="pbody"><div class="ptitle">Disco 15 Sleeping Bag</div><div class="pprice">$379.95</div><div class="stars">★★★★☆</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#94745c,#424336)"></div><div class="pbody"><div class="ptitle">Tensor Sleeping Pad</div><div class="pprice">$219.95</div><div class="stars">★★★★★</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c4c117,#907458)"></div><div class="pbody"><div class="ptitle">Moonwalk 65L Pack</div><div class="pprice">$299.95</div><div class="stars">★★★★★</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #5BC8A4; color: #000000;
border: none; border-radius: 32px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #5BC8A4; border-radius: 32px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.1; letter-spacing: 0.5px; background: #EAF7F2; color: #2D9E7A;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#3D3D3D; box-sizing:border-box;
font-family:'Poppins','Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { color:#1A1A1A; font-size:20px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:24px; align-items:center; }
.navlinks span { font-size:12px; color:#3D3D3D; font-weight:600; }
.navlinks .cta { background:#5BC8A4; color:#1A1A1A; padding:10px 22px; border-radius:999px; font-size:12px; font-weight:700; }
.hero { height:250px; background:#F4FAF8; display:flex; align-items:center; padding:0 40px; gap:40px; }
.flosser { width:150px; height:190px; position:relative; }
.flosser .cap { position:absolute; top:0; left:55px; width:40px; height:44px; border-radius:14px 14px 6px 6px; background:#5BC8A4; }
.flosser .body { position:absolute; top:40px; left:45px; width:60px; bottom:0; background:linear-gradient(160deg,#ffffff,#e8f7f2); border:2px solid #5BC8A4; border-radius:30px; }
.heroTxt h1 { font-size:32px; font-weight:700; margin:0 0 12px; color:#1A1A1A; line-height:1.15; }
.heroTxt p { font-size:13px; color:#767676; margin:0 0 18px; max-width:340px; line-height:1.6; }
.heroTxt .cta { display:inline-block; background:#5BC8A4; color:#1A1A1A; font-weight:700; font-size:13px; padding:13px 28px; border-radius:999px; }
.section-label { padding:18px 40px 10px; font-size:14px; font-weight:700; color:#1A1A1A; }
.grid { display:flex; gap:14px; padding:0 40px; }
.card { flex:1; background:#ffffff; border:1px solid #F4FAF8; border-radius:20px; padding:14px; box-shadow:0 2px 10px rgba(91,200,164,0.08); }
.card .art { height:88px; border-radius:16px; margin-bottom:10px; }
.a1 { background:linear-gradient(160deg,#5BC8A4,#B8E8D8); } .a2 { background:linear-gradient(160deg,#B8E8D8,#F4FAF8); }
.a3 { background:linear-gradient(160deg,#3AAD8A,#5BC8A4); } .a4 { background:linear-gradient(160deg,#F4FAF8,#B8E8D8); }
.card h3 { font-size:12px; font-weight:700; color:#1A1A1A; margin:0 0 4px; }
.card p { font-size:10px; color:#767676; margin:0 0 8px; }
.card .price { font-size:13px; font-weight:700; color:#2D9E7A; }
.card .pill { display:inline-block; background:#F4FAF8; color:#2D9E7A; font-size:9px; font-weight:700; padding:3px 10px; border-radius:999px; margin-top:6px; }
footer { height:58px; margin-top:14px; display:flex; align-items:center; gap:26px; padding:0 40px; border-top:1px solid #F4FAF8; }
footer span { font-size:10px; color:#767676; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Flaus</p>
<div class="navlinks"><span>Flosser</span><span>Refills</span><span>Toothbrush</span><span class="cta">Shop the Kit</span></div>
</nav>
<div class="hero">
<div class="flosser"><div class="cap"></div><div class="body"></div></div>
<div class="heroTxt">
<h1>Too beautiful<br>to put away.</h1>
<p>The water flosser redesigned — quiet, cordless, and finally something you'd leave out on the counter.</p>
<span class="cta">Shop the Starter Kit</span>
</div>
</div>
<div class="section-label">Bathroom Essentials</div>
<div class="grid">
<div class="card"><div class="art a1"></div><h3>The Flosser</h3><p>Cordless Water Flosser</p><div class="price">$95</div><div class="pill">Bestseller</div></div>
<div class="card"><div class="art a2"></div><h3>Tip Refills, 4pk</h3><p>Subscribe & Save</p><div class="price">$20</div></div>
<div class="card"><div class="art a3"></div><h3>Sonic Toothbrush</h3><p>Soft-Touch Grip</p><div class="price">$65</div></div>
<div class="card"><div class="art a4"></div><h3>Travel Case</h3><p>Mint Silicone</p><div class="price">$18</div></div>
</div>
<footer>
<span>DENTIST APPROVED</span><span>30-DAY TRIAL</span><span>SUBSCRIBE & SAVE</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #191919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #191919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: 0.15px; margin: 0; color: #191919; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.2; letter-spacing: 1.2px; background: #fb8077; color: #000000;
border: none; border-radius: 2px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.2; letter-spacing: 1.2px; background: transparent; color: #191919;
border: 1px solid #fb8077; border-radius: 2px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #191919;
border: 1px solid #c6c6c6; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.3; letter-spacing: 0.4px; background: #fff0ef; color: #e5665d;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#191919; box-sizing:border-box;
font-family:'Alegreya', Georgia, 'Times New Roman', serif; }
* { box-sizing:border-box; }
.abel { font-family:'Abel', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-transform:uppercase; }
.announce { height:30px; background:#191919; color:#e2e2e2; display:flex; align-items:center; justify-content:center;
font-family:'Abel',sans-serif; text-transform:uppercase; font-size:11px; letter-spacing:1.2px; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #eeeeee; }
.logo { font-family:'Abel',sans-serif; text-transform:uppercase; font-size:18px; letter-spacing:2px; }
.navlinks { display:flex; gap:22px; font-family:'Abel',sans-serif; text-transform:uppercase; font-size:12px;
letter-spacing:1.4px; color:#191919; }
.crumb { padding:12px 32px 0; font-family:'Abel',sans-serif; font-size:11px; letter-spacing:0.6px;
text-transform:uppercase; color:#777; }
.crumb b { color:#191919; }
main { display:flex; height:calc(640px - 30px - 56px - 30px); }
.stage { width:430px; background:#f8f8f8; position:relative; display:flex; align-items:center; justify-content:center;
border-right:1px solid #e2e2e2; }
.pot { position:relative; width:190px; }
.pot .rim { width:170px; height:26px; margin:0 auto; background:linear-gradient(180deg,#e8988f,#d97a6d);
border-radius:10px 10px 0 0; }
.pot .body { width:190px; height:170px; background:linear-gradient(160deg,#fb8077 0%,#e5665d 55%,#c85a4f 100%);
border-radius:6px 6px 26px 26px; box-shadow:0 24px 40px rgba(0,0,0,0.14); position:relative; overflow:hidden; }
.pot .body::after { content:''; position:absolute; left:14px; top:10px; width:44px; height:120px;
background:rgba(255,255,255,0.14); border-radius:20px; transform:rotate(6deg); }
.plant { position:absolute; left:50%; top:-70px; transform:translateX(-50%); width:110px; height:80px; }
.leaf { position:absolute; width:16px; height:60px; background:#556b4f; border-radius:50% 50% 50% 0;
bottom:0; transform-origin:bottom center; }
.thumbrow { position:absolute; bottom:22px; left:22px; display:flex; gap:8px; }
.thumb { width:56px; height:56px; background:#fff; border:1px solid #e2e2e2; }
.thumb.active { border-color:#191919; }
.cat-badge { position:absolute; top:22px; left:22px; background:#fff0ef; color:#e5665d; font-family:'Abel',sans-serif;
text-transform:uppercase; font-size:11px; letter-spacing:0.6px; padding:4px 10px; }
.info { flex:1; padding:26px 34px 0; display:flex; flex-direction:column; }
h1 { font-family:'Abel',sans-serif; text-transform:uppercase; font-weight:400; font-size:26px; letter-spacing:0.4px;
margin:0 0 10px; line-height:1.15; }
.price { font-family:'Abel',sans-serif; font-size:18px; letter-spacing:0.3px; color:#191919; margin-bottom:16px; }
p.desc { font-size:15px; line-height:1.65; color:#555; margin:0 0 18px; max-width:420px; }
.opt-label { font-family:'Abel',sans-serif; font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
color:#777; margin-bottom:8px; }
.swatches { display:flex; gap:10px; margin-bottom:20px; }
.sw { width:34px; height:34px; border:1px solid #e2e2e2; }
.sw.active { outline:1px solid #191919; outline-offset:2px; }
.sw1 { background:#d6c3a5; } .sw2 { background:#8a8f83; } .sw3 { background:#3d3a37; } .sw4 { background:#c98a75; }
.size-row { display:flex; gap:10px; margin-bottom:22px; }
.size { border:1px solid #191919; font-family:'Abel',sans-serif; text-transform:uppercase; font-size:12px;
letter-spacing:0.8px; padding:8px 16px; }
.size.active { background:#191919; color:#fff; }
.cta-row { display:flex; gap:10px; margin-top:auto; margin-bottom:16px; }
.btn-primary { background:#fb8077; color:#fff; border:none; font-family:'Abel',sans-serif; text-transform:uppercase;
letter-spacing:1.2px; font-size:14px; padding:14px 30px; }
.btn-secondary { background:transparent; color:#191919; border:1px solid #191919; font-family:'Abel',sans-serif;
text-transform:uppercase; letter-spacing:1.2px; font-size:14px; padding:13px 26px; }
footer { height:30px; border-top:1px solid #eeeeee; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; font-family:'Abel',sans-serif; font-size:10px; letter-spacing:0.8px; text-transform:uppercase; color:#777; }
</style></head>
<body>
<div class="announce">Free shipping on orders over $85</div>
<nav>
<span class="logo">Anamese</span>
<div class="navlinks"><span>Planters</span><span>Glazes</span><span>Studio</span><span>Journal</span></div>
<span class="abel" style="font-size:12px;letter-spacing:1px;">Cart (1)</span>
</nav>
<div class="crumb">Planters / Tabletop / <b>Kiln Series</b></div>
<main>
<div class="stage">
<div class="cat-badge">Glazed</div>
<div class="pot">
<div class="plant">
<div class="leaf" style="left:20px; transform:rotate(-18deg);"></div>
<div class="leaf" style="left:44px; height:74px; transform:rotate(-4deg);"></div>
<div class="leaf" style="left:66px; transform:rotate(14deg);"></div>
</div>
<div class="rim"></div>
<div class="body"></div>
</div>
<div class="thumbrow"><div class="thumb active"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<h1>Kiln Series Table Planter, No. 4</h1>
<div class="price">$68.00</div>
<p class="desc">Hand-thrown stoneware finished with a reactive terracotta glaze — every piece kilned in small batches, so surface and tone vary slightly, vessel to vessel.</p>
<div class="opt-label">Glaze</div>
<div class="swatches">
<div class="sw sw1 active"></div><div class="sw sw2"></div><div class="sw sw3"></div><div class="sw sw4"></div>
</div>
<div class="opt-label">Size</div>
<div class="size-row">
<span class="size active">4"</span><span class="size">6"</span><span class="size">9"</span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Shop Collection</button>
</div>
</div>
</main>
<footer><span>© Anamese</span><span>Made to order · Ships in 5–7 days</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.35; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #47cdd9; color: #000000;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: transparent; color: #222222;
border: 1px solid #47cdd9; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.4; background: #d1f2f5; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#fcfcfc; color:#222; font-family:'Lato',-apple-system,system-ui,'Helvetica Neue',sans-serif;
}
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #eee;background:#fff;}
.logo{font-weight:700;font-size:16px;letter-spacing:.5px;color:#222;text-transform:uppercase;}
.logo b{color:#47cdd9;}
.navlinks{display:flex;gap:26px;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#3d4045;}
.hero{background:#222222;color:#fff;padding:34px 32px 28px;display:flex;gap:28px;align-items:center;}
.hero-text{flex:1.1;}
.hero-text .kicker{font-family:'Courier New',monospace;font-size:11px;color:#75f6ff;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;}
.hero-text h1{font-size:38px;font-weight:300;line-height:1.12;margin:0 0 10px;letter-spacing:-.5px;}
.hero-text p{font-size:14px;color:#c9cdd0;margin:0 0 16px;max-width:380px;line-height:1.5;}
.btn-primary{display:inline-block;background:#47cdd9;color:#fff;font-weight:700;font-size:13px;letter-spacing:.3px;padding:11px 24px;border-radius:4px;}
.btn-secondary{display:inline-block;background:transparent;border:2px solid #fff;color:#fff;font-weight:700;font-size:13px;padding:9px 22px;border-radius:4px;margin-left:10px;}
.graph-card{flex:1;background:#3d4045;border-radius:8px;padding:14px 16px;font-family:'Courier New',monospace;}
.graph-card .gt{font-size:11px;color:#aaa;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
.graph-svg{width:100%;height:90px;}
.section{padding:24px 32px 0;}
.section h2{font-size:16px;font-weight:700;margin:0 0 4px;}
.section .sub{font-size:12px;color:#888;margin:0 0 14px;}
.grid{display:flex;gap:16px;}
.card{flex:1;background:#fcfcfc;border:1px solid #eeeeee;border-radius:8px;padding:14px;}
.card .swatch{height:70px;border-radius:4px;margin-bottom:10px;}
.s1{background:linear-gradient(135deg,#d1f2f5,#75f6ff);}
.s2{background:linear-gradient(135deg,#eee,#d1d2d4);}
.s3{background:linear-gradient(135deg,#faeed7,#eeddc0);}
.card h3{font-size:14px;font-weight:700;margin:0 0 4px;}
.card .price{font-size:14px;color:#32c7d5;font-weight:700;}
.badge{display:inline-block;background:#d1f2f5;color:#32c7d5;font-family:'Courier New',monospace;font-size:10px;padding:2px 6px;border-radius:2px;margin-bottom:6px;}
</style>
<div class="nav">
<div class="logo">Decent Espresso</div>
<div class="navlinks"><span>Machines</span><span>Shop</span><span>Community</span><span>Support</span></div>
</div>
<div class="hero">
<div class="hero-text">
<div class="kicker">Firmware v1.9.2 // Live Pressure Profile</div>
<h1>Espresso, instrumented.</h1>
<p>Real-time pressure, flow and temperature data on every shot — the DE1 turns your morning routine into a controlled experiment.</p>
<a class="btn-primary">Buy DE1XL</a><a class="btn-secondary">View Specs</a>
</div>
<div class="graph-card">
<div class="gt">Shot Profile // 9.2 BAR</div>
<svg class="graph-svg" viewBox="0 0 300 90"><polyline points="0,70 30,60 60,20 100,15 140,25 180,30 220,40 260,45 300,50" fill="none" stroke="#75f6ff" stroke-width="2"/><line x1="0" y1="80" x2="300" y2="80" stroke="#494d53" stroke-width="1"/><line x1="0" y1="45" x2="300" y2="45" stroke="#494d53" stroke-width="1"/></svg>
</div>
</div>
<div class="section">
<h2>Model Lineup</h2>
<div class="sub">Machined aluminum. Walnut accents. Full telemetry.</div>
<div class="grid">
<div class="card"><div class="swatch s1"></div><span class="badge">FW 1.9.2</span><h3>DE1PRO</h3><div class="price">$2,895</div></div>
<div class="card"><div class="swatch s2"></div><span class="badge">FW 1.9.2</span><h3>DE1XL</h3><div class="price">$3,195</div></div>
<div class="card"><div class="swatch s3"></div><span class="badge">Community</span><h3>Diaspora Forum</h3><div class="price">Join free</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0066ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0066ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b5fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fafaf8; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0066ff; color: #fafaf8;
border: 1px solid #fafaf8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0066ff; color: #f5f5f5;
border: 1px solid #277dfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b5fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #287efe; color: #fafaf8;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0a0a0a; box-sizing:border-box;
font-family:"Hiragino Sans", "Noto Sans CJK JP", "Yu Gothic", -apple-system, Arial, sans-serif; }
* { box-sizing:border-box; }
.banner { background:#ffe145; color:#0a0a0a; font-size:12px; font-weight:600; text-align:center; padding:8px 0; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:600; letter-spacing:-0.4px; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; }
.right { display:flex; gap:10px; align-items:center; }
.chip { background:#f2f2f0; color:#0a0a0a; border-radius:9999px; height:34px; padding:0 16px; font-size:12px;
display:flex; align-items:center; font-weight:600; }
.pill-out { background:#fff; border:1px solid #d0d0cc; color:#0a0a0a; border-radius:9999px; height:34px;
padding:0 16px; font-size:12px; display:flex; align-items:center; font-weight:600; }
.pill-primary { background:#0066ff; color:#fff; border-radius:9999px; height:34px; padding:0 20px;
font-size:12px; display:flex; align-items:center; font-weight:600; }
.hero { text-align:center; padding:16px 40px 20px; }
.hero h1 { font-size:38px; font-weight:600; letter-spacing:-1px; margin:0 0 10px; line-height:1.15; }
.hero p { font-size:14px; color:#737368; margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:6px 40px; }
.svc { background:#fafaf8; border-radius:16px; padding:16px; }
.svc .icon { width:36px; height:36px; border-radius:10px; margin-bottom:10px; }
.svc h3 { font-size:14px; font-weight:600; letter-spacing:0.02em; margin:0 0 4px; }
.svc p { font-size:11px; color:#737368; margin:0; line-height:1.4; }
.i1 { background:#0066ff; } .i2 { background:#024d58; } .i3 { background:#0eaa7d; } .i4 { background:#ce2874; }
.dark { margin-top:14px; background:#0a0a0a; color:#f0f0f0; border-radius:20px 20px 0 0; padding:20px 40px;
display:flex; justify-content:space-between; align-items:center; }
.dark h2 { font-size:20px; font-weight:600; margin:0 0 4px; }
.dark p { font-size:12px; color:#f0f0f0; opacity:0.75; margin:0; }
.light-pill { background:#f0f0f0; color:#090909; border-radius:9999px; height:36px; padding:0 24px;
display:flex; align-items:center; font-size:13px; font-weight:600; }
footer { position:absolute; bottom:0; left:0; right:0; background:#0a0a0a; color:#838383; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; }
</style></head>
<body>
<div class="banner">Gift card campaign — open a shop and get a bonus</div>
<nav>
<div class="brand">STORES</div>
<div class="navlinks"><span>Services</span><span>Case studies</span><span>Pricing</span><span>Resources</span></div>
<div class="right"><span class="chip">Log in</span><span class="pill-out">Talk to us</span><span class="pill-primary">Start for free</span></div>
</nav>
<div class="hero">
<h1>Build a store people want to buy from</h1>
<p>Payments, reservations, and your shop — all in one monthly plan.</p>
</div>
<div class="grid">
<div class="svc"><div class="icon i1"></div><h3>Online Shop</h3><p>Launch a storefront in minutes, no code needed.</p></div>
<div class="svc"><div class="icon i2"></div><h3>Cashless Pay</h3><p>Accept cards and mobile payments in person.</p></div>
<div class="svc"><div class="icon i3"></div><h3>Reservations</h3><p>Bookings and waitlists your customers can manage.</p></div>
<div class="svc"><div class="icon i4"></div><h3>Mobile Order</h3><p>Order-ahead for cafés, salons, and small shops.</p></div>
</div>
<div class="dark">
<div><h2>Everything your shop needs, one monthly fee</h2><p>Let's start building your shop together.</p></div>
<div class="light-pill">Join our team</div>
</div>
<footer><span>© STORES</span><span>STORES · Solutions · Company · Support</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 2.5rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 2.5rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #0E1C59; color: #ffffff;
border: none; border-radius: 999px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #FFFFFF; color: #0E1C59;
border: 1px solid #0E1C59; border-radius: 999px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #FFFFFF; color: #111111;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dddfe8; color: #0E1C59;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: "Helvetica Neue", Arial, sans-serif; background: #FFFFFF; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
.hero { position: relative; height: 400px; background: linear-gradient(135deg, #0E1C59 0%, #003366 60%, #0067B1 100%); overflow: hidden; }
.diag { position: absolute; inset: 0; opacity: 0.15; background: repeating-linear-gradient(115deg, transparent 0 60px, rgba(255,255,255,0.5) 60px 62px); }
.silhouette { position: absolute; right: -40px; bottom: -60px; width: 480px; height: 220px; opacity: 0.14; background: #ffffff; clip-path: polygon(0% 60%, 55% 55%, 62% 20%, 68% 55%, 100% 62%, 100% 68%, 68% 66%, 64% 90%, 58% 88%, 56% 66%, 0% 68%); }
nav { position: relative; z-index: 2; height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 56px; }
.brand { color: #fff; font-size: 20px; font-weight: 700; letter-spacing: 0.02em; margin: 0; }
.navlinks { display: flex; gap: 30px; }
.navlinks span { color: rgba(255,255,255,0.75); font-size: 13px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.langsw { color: #fff; font-size: 12px; border: 1px solid rgba(255,255,255,0.4); border-radius: 2px; padding: 6px 10px; }
.hero-copy { position: relative; z-index: 2; padding: 32px 56px 0; max-width: 560px; }
.hero-copy .eyebrow { color: #4DA8E8; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.hero-copy h1 { color: #fff; font-size: 56px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; margin: 14px 0 16px; }
.hero-copy p { color: rgba(255,255,255,0.85); font-size: 16px; line-height: 1.5; margin: 0 0 24px; max-width: 460px; }
.cta { background: transparent; border: 1px solid #ffffff; color: #fff; border-radius: 2px; padding: 12px 28px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.units { padding: 32px 56px; display: flex; gap: 20px; }
.unit { flex: 1; border: 1px solid #E8ECF0; border-radius: 8px; padding: 20px; }
.unit .bar { width: 32px; height: 3px; background: #0067B1; margin-bottom: 14px; }
.unit h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: #1A1A2E; letter-spacing: -0.01em; }
.unit p { margin: 0 0 12px; font-size: 12.5px; color: #5C6370; line-height: 1.5; }
.unit .more { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #0067B1; }
.stats { padding: 0 56px 28px; display: flex; gap: 0; border-top: 1px solid #E8ECF0; margin: 0 56px; }
.stat { flex: 1; padding: 22px 0; text-align: center; border-right: 1px solid #E8ECF0; }
.stat:last-child { border-right: none; }
.stat .num { font-size: 28px; font-weight: 700; color: #0E1C59; letter-spacing: -0.02em; }
.stat .lbl { font-size: 11px; color: #5C6370; letter-spacing: 0.03em; text-transform: uppercase; margin-top: 4px; }
</style>
<div class="hero">
<div class="diag"></div>
<div class="silhouette"></div>
<nav>
<p class="brand">Embraer</p>
<div class="navlinks"><span>Commercial</span><span>Defense</span><span>Executive</span><span>Services</span></div>
<span class="langsw">EN / PT</span>
</nav>
<div class="hero-copy">
<span class="eyebrow">Aerospace Engineering</span>
<h1>Precision built to fly.</h1>
<p>Fifty-five years of aeronautical expertise, engineered into every line, every panel, every flight.</p>
<button class="cta">Explore aircraft</button>
</div>
</div>
<div class="units">
<div class="unit"><div class="bar"></div><h3>Commercial Aviation</h3><p>Regional jets engineered for efficiency and passenger comfort.</p><span class="more">Learn more →</span></div>
<div class="unit"><div class="bar"></div><h3>Executive Jets</h3><p>Cabins designed for range, quiet and uncompromising finish.</p><span class="more">Learn more →</span></div>
<div class="unit"><div class="bar"></div><h3>Defense & Security</h3><p>Platforms trusted by air forces across the globe.</p><span class="more">Learn more →</span></div>
</div>
<div class="stats">
<div class="stat"><div class="num">55+</div><div class="lbl">Years in aerospace</div></div>
<div class="stat"><div class="num">#3</div><div class="lbl">Global manufacturer</div></div>
<div class="stat"><div class="num">120+</div><div class="lbl">Countries served</div></div>
<div class="stat"><div class="num">18K+</div><div class="lbl">Engineers & staff</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: 0.03em; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #646464; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 0.1em; background: #ea1298; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 0.1em; background: #ffffff; color: #212121;
border: 1px solid #ea1298; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #212121;
border: 1px solid #c8c8c8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #646464; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.1em; background: #ea1298; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family: 'Nunito Sans', Arial, sans-serif; background:#fff; color:#555; }
*{box-sizing:border-box;}
.mont{font-family:Montserrat, Arial, Helvetica, sans-serif; text-transform:uppercase;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #dedede;}
.logo{font-family:Montserrat,sans-serif;font-size:19px;font-weight:700;letter-spacing:.04em;color:#212121;text-transform:uppercase;}
.navlinks{display:flex;gap:18px;font-family:Montserrat,sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#212121;}
.hero{display:flex;height:250px;}
.heroimg{width:52%;background:linear-gradient(135deg,#ea1298,#a89cc8 70%);position:relative;overflow:hidden;}
.heroimg:before{content:'';position:absolute;left:30px;top:30px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.2);}
.heroimg:after{content:'';position:absolute;right:40px;bottom:20px;width:70px;height:70px;background:#fbcd0a;border-radius:9999px;opacity:.6;}
.herotext{width:48%;display:flex;flex-direction:column;justify-content:center;padding:0 34px;}
.herotext h1{font-family:Montserrat,sans-serif;font-size:26px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#212121;margin:0 0 12px;line-height:1.25;}
.herotext p{font-size:14px;color:#646464;margin:0 0 16px;max-width:280px;}
.herocta{display:inline-block;background:#ea1298;color:#fff;font-family:Montserrat,sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:14px 28px;width:fit-content;}
.filterrow{display:flex;gap:8px;padding:14px 30px;}
.chip{padding:5px 14px;border-radius:9999px;font-size:12px;font-weight:600;}
.chip.on{background:#ea1298;color:#fff;}
.chip.off{border:1px solid #dedede;color:#646464;}
.grid{display:flex;gap:12px;padding:0 30px;}
.card{width:150px;}
.thumb{aspect-ratio:1/1;height:130px;margin-bottom:8px;}
.ptitle{font-family:Montserrat,sans-serif;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#212121;height:28px;overflow:hidden;line-height:1.3;}
.pprice{font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;color:#ea1298;margin-top:4px;}
.stars{color:#ea1298;font-size:11px;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;color:#646464;border-top:1px solid #dedede;}
.footer span{margin-left:14px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Jennifer Zeuner</div>
<div class="navlinks"><div>Rings</div><div>Necklaces</div><div>Earrings</div><div>14K Gold</div></div>
</div>
<div class="hero">
<div class="heroimg"></div>
<div class="herotext">
<h1>Neon Pink, 14K Gold</h1>
<p>Statement jewelry that refuses to whisper. Handmade in New York.</p>
<div class="herocta">Shop New Arrivals</div>
</div>
</div>
<div class="filterrow">
<div class="chip on">New</div><div class="chip off">Best Sellers</div><div class="chip off">Gold Vermeil</div><div class="chip off">Sale</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ea1298,#ac036c)"></div><div class="ptitle">Baguette Huggie Hoops</div><div class="stars">★★★★★</div><div class="pprice">$185</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#108474,#a89cc8)"></div><div class="ptitle">Teal Enamel Signet Ring</div><div class="stars">★★★★☆</div><div class="pprice">$220</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#fbcd0a,#ea1298)"></div><div class="ptitle">Gold Coin Pendant Necklace</div><div class="stars">★★★★★</div><div class="pprice">$310</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c1e6e6,#ea1298)"></div><div class="ptitle">Mint Cable Chain Bracelet</div><div class="stars">★★★★★</div><div class="pprice">$165</div></div>
</div>
<div class="footer"><span>© Handmade in New York</span><span>Custom Orders<span> Repairs</span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0d1925;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0d1925;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -0.3px; margin: 0; color: #0d1925; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.1px; background: #5873f9; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.1px; background: #ffffff; color: #0d1925;
border: 1px solid #5873f9; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #0d1925;
border: 1px solid #c2c6c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #5873f9; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Plus Jakarta Sans', -apple-system, sans-serif; color:#0d1925; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e5e5eb;}
.logo{font-weight:700;font-size:20px;color:#5873f9;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;color:#0d1925;}
.hero{height:270px;background:#0d1925;display:flex;align-items:center;padding:0 40px;}
.herotext{max-width:480px;}
.overline{color:#5873f9;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:8px;}
.herotext h1{color:#fff;font-size:40px;font-weight:800;letter-spacing:-1px;line-height:1.1;margin:0 0 12px;}
.herotext p{color:#9a9db1;font-size:16px;margin:0 0 20px;}
.btn{display:inline-block;background:#5873f9;color:#fff;font-size:15px;font-weight:700;padding:14px 28px;border-radius:8px;}
.steps{display:flex;gap:0;padding:24px 40px 0;align-items:center;}
.step{display:flex;align-items:center;gap:8px;flex:1;}
.stepcircle{width:28px;height:28px;border-radius:9999px;color:#0d1925;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.stepline{flex:1;height:2px;background:#dbdde4;}
.steplabel{font-size:12px;color:#676986;}
.grid{display:flex;gap:16px;padding:24px 40px 0;}
.card{flex:1;background:#fff;border:1px solid #dbdde4;border-radius:12px;padding:14px;}
.thumb{height:90px;background:#f4f4f6;border-radius:8px;margin-bottom:10px;}
.ptitle{font-size:18px;font-weight:700;}
.pprice{font-size:22px;font-weight:800;color:#5873f9;margin-top:4px;}
.quote{background:#f4f4f6;border-left:4px solid #5873f9;border-radius:12px;margin:16px 40px 0;padding:16px 20px;font-family:'EB Garamond',Georgia,serif;font-size:18px;color:#2c3e50;}
</style>
<div class="nav">
<div class="logo">Roterunner</div>
<div class="navlinks"><div>Planners</div><div>Journals</div><div>Templates</div><div>Reviews</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="overline">For Goal-Setters</div>
<h1>Dream. Plan. Act. Achieve.</h1>
<p>Structured planners built around the four-beat rhythm that gets goals off the page.</p>
<div class="btn">Shop Planners</div>
</div>
</div>
<div class="steps">
<div class="step"><div class="stepcircle" style="background:#5873f9;color:#fff;">1</div><div class="steplabel">Dream</div></div><div class="stepline"></div>
<div class="step"><div class="stepcircle" style="background:#fcab2f;">2</div><div class="steplabel">Plan</div></div><div class="stepline"></div>
<div class="step"><div class="stepcircle" style="background:#5873f9;color:#fff;">3</div><div class="steplabel">Act</div></div><div class="stepline"></div>
<div class="step"><div class="stepcircle" style="background:#00caaa;">4</div><div class="steplabel">Achieve</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ptitle">Weekly Goal Planner</div><div class="pprice">$34.00</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Habit Tracker Journal</div><div class="pprice">$22.00</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Vision Board Kit</div><div class="pprice">$18.00</div></div>
</div>
<div class="quote">"I finally finished the plan I started three years ago." — a Roterunner customer</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fff7ec; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fff7ec; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7874; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffe9cc; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fff7ec; color: #000000;
border: 1px solid #ffe9cc; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fff7ec; color: #111111;
border: 1px solid #d9d2c9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7874; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fff5e7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFF7EC; color:#2C2014; box-sizing:border-box;
font-family:'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
* { box-sizing:border-box; }
.grad { position:absolute; inset:0; background:linear-gradient(180deg,#FFE9CC,#FFD9A8); }
.wrap { position:relative; display:flex; height:640px; }
.main { flex:1; display:flex; flex-direction:column; align-items:center; padding:26px 0 0; }
.viewfinder { width:300px; height:300px; border-radius:40px; overflow:hidden; position:relative;
background:linear-gradient(150deg,#FFD9A8,#FF9E2C); box-shadow:0 20px 50px rgba(180,120,30,0.25); }
.senderchip { position:absolute; top:16px; left:16px; background:rgba(44,32,20,0.32); backdrop-filter:blur(4px);
color:#fff; font-size:12px; font-weight:600; padding:6px 12px; border-radius:14px; }
.captionpill { position:absolute; bottom:16px; left:16px; right:16px; background:rgba(44,32,20,0.32); backdrop-filter:blur(4px);
color:#fff; font-size:12px; font-weight:600; padding:8px 14px; border-radius:14px; }
.capturerow { display:flex; align-items:center; gap:34px; margin:24px 0 14px; }
.flip { font-size:20px; color:#8A7A63; }
.capturebtn { width:84px; height:84px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;
box-shadow:0 10px 26px rgba(180,120,30,0.35); }
.capturebtn i { width:66px; height:66px; border-radius:50%; border:5px solid #FFB02E; }
.historyh { font-size:12px; font-weight:700; color:#8A7A63; margin:6px 0 10px; }
.history { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:340px; }
.hcell { aspect-ratio:1; border-radius:12px; position:relative; }
.h1 { background:linear-gradient(150deg,#FFD9A8,#F08A1D); }
.h2 { background:linear-gradient(150deg,#FF7A59,#c9502f); }
.h3 { background:linear-gradient(150deg,#FFE9CC,#e0b976); }
.h4 { background:linear-gradient(150deg,#FFB02E,#9e6a10); }
.havdot { position:absolute; bottom:4px; right:4px; width:16px; height:16px; border-radius:50%; border:2px solid #fff; background:#FF7A59; }
.col2 { width:280px; flex:0 0 auto; padding:26px 20px; }
.widgetlabel { font-size:12px; font-weight:700; color:#8A7A63; margin-bottom:10px; }
.widget { width:170px; height:170px; border-radius:34px; background:linear-gradient(150deg,#FFD9A8,#FF9E2C);
box-shadow:0 16px 40px rgba(180,120,30,0.3); position:relative; }
.wchip { position:absolute; bottom:12px; left:12px; background:rgba(44,32,20,0.35); color:#fff; font-size:11px; font-weight:600; padding:5px 10px; border-radius:12px; }
</style></head>
<body>
<div class="grad"></div>
<div class="wrap">
<div class="main">
<div class="viewfinder">
<div class="senderchip">from Ava</div>
<div class="captionpill">golden hour on the roof ✨</div>
</div>
<div class="capturerow"><span class="flip">↻</span><div class="capturebtn"><i></i></div><span class="flip">⚡</span></div>
<div class="historyh">FRIENDS</div>
<div class="history">
<div class="hcell h1"><div class="havdot"></div></div>
<div class="hcell h2"><div class="havdot"></div></div>
<div class="hcell h3"><div class="havdot"></div></div>
<div class="hcell h4"><div class="havdot"></div></div>
</div>
</div>
<div class="col2">
<div class="widgetlabel">Home Screen Widget</div>
<div class="widget"><span class="wchip">Locket (iOS)</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fc7676; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fc7676; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7b3e3e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #202020; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fc7676; color: #202020;
border: 1px solid #202020; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fc7676; color: #111111;
border: 1px solid #d66666; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b3e3e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d96868; color: #202020;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#202020; box-sizing:border-box;
font-family:"Basier Square", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:17px; font-weight:700; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; }
.navr { display:flex; gap:10px; }
.btn { padding:8px 20px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; border-radius:9999px; }
.btn.dark { background:#202020; color:#fcfcfc; }
.btn.outline { background:#ffffff; color:#202020; border:1px solid #202020; }
.hero { position:relative; height:200px; overflow:hidden; display:flex; align-items:center; justify-content:center;
background:linear-gradient(115deg,#ea2804 0%, #ff3d6e 45%, #ff8fd6 100%); }
.hero h1 { position:relative; z-index:1; color:#fff; font-size:56px; font-weight:700; letter-spacing:-1.5px; margin:0; text-align:center; }
.searchbar { margin:20px 32px 0; display:flex; justify-content:center; }
.glass { background:transparent; border:1px solid #bbbbbb; border-radius:9999px; padding:8px 28px 8px 20px; font-size:14px; color:#202020; width:400px; text-align:left; }
.gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:22px 32px; }
.model { border:1px solid #202020; border-radius:24px; overflow:hidden; }
.model.featured { border-color:#ea2804; }
.thumb { height:76px; }
.m1 { background:linear-gradient(135deg,#ea2804,#4b0f00); }
.m2 { background:linear-gradient(135deg,#202020,#666); }
.m3 { background:linear-gradient(135deg,#ff8fd6,#a83a7a); }
.m4 { background:linear-gradient(135deg,#24292e,#000); }
.model .info { padding:10px; }
.model .info h4 { font-size:13px; font-weight:600; margin:0 0 4px; }
.model .info p { font-size:11px; color:#646464; margin:0; }
.status { display:inline-flex; align-items:center; gap:4px; font-size:10px; color:#fff; background:#2b9a66; border-radius:9999px; padding:2px 8px; margin-top:6px; }
.manifesto { text-align:center; padding:14px 32px 22px; }
.manifesto h2 { font-size:26px; font-weight:700; margin:0; }
footer { border-top:1px solid #202020; padding:12px 32px; display:flex; justify-content:space-between; font-size:12px; color:#8d8d8d; }
</style></head>
<body>
<nav>
<span class="brand">Replicate</span>
<div class="navlinks"><span>Explore</span><span>Docs</span><span>Pricing</span><span>Blog</span></div>
<div class="navr"><span class="btn outline">Sign in</span><span class="btn dark">Get started</span></div>
</nav>
<section class="hero"><h1>Run AI with an API.</h1></section>
<div class="searchbar"><span class="glass">Search models — "image generation"</span></div>
<div class="gallery">
<div class="model featured"><div class="thumb m1"></div><div class="info"><h4>flux-dreamscape</h4><p>Text-to-image, cinematic</p><span class="status">● Running</span></div></div>
<div class="model"><div class="thumb m2"></div><div class="info"><h4>whisper-fast</h4><p>Speech-to-text</p><span class="status">● Running</span></div></div>
<div class="model"><div class="thumb m3"></div><div class="info"><h4>portrait-upscale</h4><p>Image restoration</p><span class="status">● Running</span></div></div>
<div class="model"><div class="thumb m4"></div><div class="info"><h4>codegen-mini</h4><p>Code generation</p><span class="status">● Running</span></div></div>
</div>
<div class="manifesto"><h2>Imagine what you can build.</h2></div>
<footer>
<span>© Replicate</span>
<span>Explore · Docs · Blog · Pricing</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e1027; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f5f5f7; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.nav { height:48px; display:flex; align-items:center; justify-content:center; gap:34px; font-size:12px;
color:rgba(245,245,247,0.8); border-bottom:1px solid rgba(255,255,255,0.08); }
.nav .dot { width:16px; height:16px; border-radius:50%; background:#f5f5f7;
-webkit-mask:none; }
.hero { text-align:center; padding:56px 0 20px; }
.hero h1 { font-size:56px; font-weight:600; line-height:60px; letter-spacing:-0.28px; margin:0 0 8px;
background:linear-gradient(180deg,#fff,#a1a1a6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { font-size:21px; color:#a1a1a6; margin:0 0 22px; }
.ctarow { display:flex; gap:14px; justify-content:center; }
.pill-primary { background:#0071e3; color:#fff; border-radius:980px; padding:11px 21px; font-size:17px; }
.pill-outline { background:transparent; color:#2997ff; border:1px solid #2997ff; border-radius:980px; padding:11px 21px; font-size:17px; }
.stage { margin:30px auto 0; width:640px; height:240px; border-radius:32px; position:relative;
background:radial-gradient(ellipse at 50% 30%, #3a3a3c, #1c1c1e 70%); overflow:hidden; }
.stage::after { content:''; position:absolute; left:50%; top:56%; transform:translateX(-50%);
width:280px; height:170px; border-radius:26px;
background:linear-gradient(160deg,#e8e8ed,#c7c7cc 60%,#9a9aa0);
box-shadow:0 30px 60px rgba(0,0,0,0.5); }
.stage .ring { position:absolute; left:50%; top:56%; transform:translateX(-50%); width:280px; height:170px;
border-radius:26px; border:1px solid rgba(255,255,255,0.25); }
.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:24px; background:rgba(255,255,255,0.06); }
.tile { background:#000; padding:22px 26px; }
.tile h3 { font-size:20px; font-weight:400; margin:0 0 6px; letter-spacing:0.196px; }
.tile p { font-size:13px; color:#a1a1a6; margin:0 0 10px; }
.tile .cbtn { background:#0071e3; color:#fff; border-radius:980px; padding:6px 15px; font-size:12px; display:inline-block; }
</style></head>
<body>
<nav class="nav">
<span>Apple</span><span>Store</span><span>Mac</span><span>iPad</span><span>iPhone</span><span>Watch</span><span>Support</span>
</nav>
<div class="hero">
<h1>Titanium. So strong. So light. So Pro.</h1>
<p>The ultimate device, reimagined.</p>
<div class="ctarow"><span class="pill-primary">Buy</span><span class="pill-outline">Learn more</span></div>
</div>
<div class="stage"><div class="ring"></div></div>
<div class="tiles">
<div class="tile"><h3>Chip</h3><p>The fastest chip ever in a personal device.</p><span class="cbtn">Learn more</span></div>
<div class="tile"><h3>Display</h3><p>Super Retina XDR, edge to edge.</p><span class="cbtn">Learn more</span></div>
<div class="tile"><h3>Battery</h3><p>All-day battery life. Every day.</p><span class="cbtn">Learn more</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #333333;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #333333;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.35; letter-spacing: 0.2px; margin: 0; color: #333333; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #a1a1a1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #007aff; color: #ffffff;
border: none; border-radius: 12px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #333333;
border: 1px solid #007aff; border-radius: 12px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #cccccc; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a1a1a1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #85c28e; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Barlow','Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#333333; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e3e3e3;}
.logo{font-family:'Libre Baskerville',Georgia,serif;font-size:21px;color:#333333;letter-spacing:0.3px;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;letter-spacing:0.6px;text-transform:uppercase;color:#333333;}
.navlinks span:first-child{border-bottom:2px solid #333333;padding-bottom:4px;}
.search{width:150px;height:32px;border-radius:9999px;background:#f4f4f4;border:1px solid #e3e3e3;font-size:11px;color:#a1a1a1;display:flex;align-items:center;padding:0 14px;}
.hero{height:250px;display:flex;background:#eae5db;}
.heroText{width:46%;padding:0 34px;display:flex;flex-direction:column;justify-content:center;}
.heroText h1{font-family:'Libre Baskerville',Georgia,serif;font-size:30px;font-weight:400;color:#333333;margin:0 0 10px;line-height:1.25;}
.heroText p{font-size:14px;color:#898989;margin:0 0 18px;max-width:300px;}
.cta{display:inline-block;background:#007aff;color:#fff;font-size:13px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:13px 26px;border-radius:12px;width:fit-content;}
.heroImg{width:54%;position:relative;background:radial-gradient(circle at 50% 60%,#ece8e1,#d9d4cc 75%);}
.jar{position:absolute;left:190px;top:50px;width:120px;height:130px;border-radius:8px;background:linear-gradient(160deg,#ffffff,#ece8e1);border:1px solid #ddd8d0;}
.lid{position:absolute;left:180px;top:34px;width:140px;height:22px;border-radius:6px;background:#333333;}
.flame{position:absolute;left:243px;top:64px;width:14px;height:26px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:linear-gradient(#ffe3a3,#85c28e 130%);opacity:0.85;}
.sec{padding:20px 32px 0;}
.secTitle{font-family:'Libre Baskerville',Georgia,serif;font-size:19px;color:#333333;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;position:relative;}
.thumb{height:120px;border-radius:8px 8px 0 0;background:#f4f4f4;position:relative;overflow:hidden;}
.candle{position:absolute;left:70px;bottom:0;width:60px;height:70px;border-radius:4px 4px 0 0;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:4px 8px;border-radius:4px;color:#fff;}
.badge.new{background:#85c28e;}
.badge.sale{background:#ff0000;}
.ctitle{font-size:15px;font-weight:600;color:#333333;padding:10px 4px 2px;}
.cprice{font-size:14px;color:#898989;padding:0 4px 12px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#eae5db;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#898989;border-top:1px solid #ddd8d0;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Voluspa</div>
<div class="navlinks"><span>Candles</span><span>Diffusers</span><span>Home</span><span>Gift Sets</span></div>
<div class="search">Search fragrances...</div>
</div>
<div class="hero">
<div class="heroText">
<h1>Handcrafted Scent,<br>Beautifully Poured</h1>
<p>Artisanal candles and diffusers made with intention, one wick at a time.</p>
<div class="cta">Shop New Arrivals</div>
</div>
<div class="heroImg"><div class="lid"></div><div class="jar"></div><div class="flame"></div></div>
</div>
<div class="sec">
<div class="secTitle">Bestselling Fragrances</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge new">New</div><div class="candle" style="background:linear-gradient(160deg,#fff,#ece8e1)"></div></div><div class="ctitle">Santiago Huckleberry</div><div class="cprice">$34.00</div></div>
<div class="card"><div class="thumb"><div class="candle" style="background:linear-gradient(160deg,#fff,#eae5db)"></div></div><div class="ctitle">French Cade Lavender</div><div class="cprice">$34.00</div></div>
<div class="card"><div class="thumb"><div class="badge sale">Sale</div><div class="candle" style="background:linear-gradient(160deg,#fff,#d9d4cc)"></div></div><div class="ctitle">Goji Tarocco Orange</div><div class="cprice">$28.00</div></div>
</div>
</div>
<div class="footer"><span>Free shipping over $65</span><span>Hand-poured in the USA</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.2; letter-spacing: 0.01em; margin: 0; color: #1d1d1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; background: #f04f36; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; background: transparent; color: #1268f1;
border: 1px solid #1268f1; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1d1d1d;
border: 1px solid #c7c7c7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1; letter-spacing: 0.05em; background: #dd30dd; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f2f2f2; color:#4d4d4d; font-family:'Nunito Sans',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-family:'Impact','Arial Black',sans-serif;font-size:21px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:700;color:#dedede;}
.searchpill{background:#1d1d1d;border-radius:9999px;padding:7px 16px;font-size:11px;color:#949494;}
.hero{height:150px;background:#1d1d1d;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.heroleft h1{font-family:'Impact','Arial Black',sans-serif;font-size:26px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:0.5px;margin:0 0 8px;}
.heroleft p{font-size:13px;color:#949494;margin:0;max-width:400px;}
.spike{width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#dd30dd,#7a1a7a 70%);flex-shrink:0;}
.strip{background:#fffbd9;text-align:center;font-size:11px;font-weight:700;color:#4d4d4d;letter-spacing:0.3px;padding:8px 0;}
.seclabel{font-size:13px;font-weight:800;color:#1d1d1d;text-transform:uppercase;letter-spacing:0.5px;padding:16px 34px 12px;}
.grid{display:flex;gap:14px;padding:0 34px;}
.card{width:150px;background:#fff;border-radius:8px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:9px;font-weight:800;letter-spacing:0.3px;text-transform:uppercase;padding:3px 7px;border-radius:9999px;color:#fff;z-index:2;}
.badge-red{background:#f04f36;}
.badge-magenta{background:#dd30dd;}
.thumb{height:92px;border-radius:6px;margin-bottom:8px;}
.ptitle{font-size:12px;font-weight:700;color:#1d1d1d;line-height:1.3;height:30px;overflow:hidden;}
.pprice{font-family:Consolas,'SFMono-Regular',Menlo,monospace;font-size:13px;font-weight:700;color:#1268f1;margin-top:4px;}
.stock{font-size:10px;margin-top:5px;font-weight:700;text-transform:uppercase;}
.stock.in{color:#56ad6a;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:11px;color:#949494;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Tenacious Toys</div>
<div class="navlinks"><span>Designer Vinyl</span><span>Blind Boxes</span><span>Artist Series</span></div>
<div class="searchpill">Search the shop...</div>
</div>
<div class="hero">
<div class="heroleft"><h1>Featured Artist Drop</h1><p>Hand-painted colorways and limited-run resin figures from the designer toy underground.</p></div>
<div class="spike"></div>
</div>
<div class="strip">Mystery Box Restock — New Blind Box Series Now Live</div>
<div class="seclabel">Just Landed</div>
<div class="grid">
<div class="card"><div class="badge badge-red">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#f04f36,#1268f1)"></div><div class="ptitle">Nightshade Resin Figure</div><div class="pprice">$85.00</div><div class="stock in">In Stock</div></div>
<div class="card"><div class="badge badge-magenta">Blind Box</div><div class="thumb" style="background:linear-gradient(135deg,#dd30dd,#4a9afc)"></div><div class="ptitle">Mystery Series Vol. 4</div><div class="pprice">$14.00</div><div class="stock in">In Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1268f1,#f04f36)"></div><div class="ptitle">Glow-in-Dark Edition</div><div class="pprice">$120.00</div><div class="stock in">In Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4a9afc,#dd30dd)"></div><div class="ptitle">Artist Signed Print</div><div class="pprice">$45.00</div><div class="stock in">In Stock</div></div>
</div>
<div class="footer"><span>© Designer Toy Culture</span><span>Newsletter — Drop Alerts</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.1px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #858585; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #1f94d2; color: #ffffff;
border: none; border-radius: 8px; padding: 13px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #ffffff; color: #1f94d2;
border: 1px solid #1f94d2; border-radius: 8px;
padding: 12px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #858585; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ec1c24; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Segoe UI', Arial, sans-serif; background:#fff; color:#313131; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #d6d6d6;}
.logo{font-size:22px;font-weight:900;color:#1f94d2;letter-spacing:-0.5px;}
.navlinks{display:flex;gap:24px;font-size:15px;font-weight:500;}
.navlinks .active{color:#1f94d2;}
.search{width:190px;height:36px;border:1px solid #d6d6d6;border-radius:8px;display:flex;align-items:center;padding:0 12px;font-size:13px;color:#858585;}
.hero{height:230px;display:flex;align-items:center;padding:0 36px;background:#e9f4fb;position:relative;}
.herotext{width:430px;}
.headline{font-size:38px;font-weight:900;line-height:1.1;letter-spacing:-0.5px;margin-bottom:12px;}
.sub{font-size:15px;color:#707070;margin-bottom:16px;width:360px;}
.btn{display:inline-block;background:#1f94d2;color:#fff;font-size:16px;font-weight:500;padding:12px 26px;border-radius:8px;}
.kbgraphic{position:absolute;right:60px;top:40px;width:260px;height:150px;background:linear-gradient(135deg,#fff,#d8ecf7);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.08);}
.kbgraphic:before{content:'';position:absolute;left:24px;top:24px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#79bfe4,#1f94d2 75%);}
.kbgraphic:after{content:'';position:absolute;right:24px;bottom:24px;width:60px;height:16px;border-radius:8px;background:#1f94d2;}
.sec{padding:20px 36px;}
.sectitle{font-size:22px;font-weight:700;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:206px;background:#fff;border:1px solid #d6d6d6;border-radius:12px;overflow:hidden;}
.cardimg{height:100px;background:#e9f4fb;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#ec1c24;color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;text-transform:uppercase;}
.cardbody{padding:12px;}
.cardtitle{font-size:15px;font-weight:600;}
.cardprice{font-size:20px;font-weight:700;color:#1f94d2;margin-top:4px;}
.rating{font-size:11px;color:#faad14;margin-top:2px;}
.specpanel{background:#e9f4fb;border:1px solid #79bfe4;border-radius:12px;padding:14px 18px;margin-top:16px;display:flex;gap:24px;}
.spec .l{font-size:11px;color:#858585;text-transform:uppercase;}
.spec .v{font-size:16px;font-weight:500;color:#313131;margin-top:2px;}
</style>
<div class="nav">
<div class="logo">Midea</div>
<div class="navlinks"><span class="active">Air Conditioners</span><span>Refrigerators</span><span>Laundry</span><span>Kitchen</span></div>
<div class="search">Search products...</div>
</div>
<div class="hero">
<div class="herotext">
<div class="headline">Cool Smarter. Live Better.</div>
<div class="sub">Energy-rated appliances engineered for whisper-quiet performance in every room.</div>
<div class="btn">Shop Air Conditioners</div>
</div>
<div class="kbgraphic"></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="cardimg"><div class="badge">Sale</div></div><div class="cardbody"><div class="cardtitle">U-Shaped Smart AC 12,000 BTU</div><div class="rating">★★★★☆ 4.6</div><div class="cardprice">$429</div></div></div>
<div class="card"><div class="cardimg"></div><div class="cardbody"><div class="cardtitle">Portable AC 10,000 BTU</div><div class="rating">★★★★★ 4.8</div><div class="cardprice">$339</div></div></div>
<div class="card"><div class="cardimg"></div><div class="cardbody"><div class="cardtitle">Compact Refrigerator 3.1 cu ft</div><div class="rating">★★★★☆ 4.5</div><div class="cardprice">$189</div></div></div>
</div>
<div class="specpanel">
<div class="spec"><div class="l">Coverage Area</div><div class="v">450 sq ft</div></div>
<div class="spec"><div class="l">Energy Rating</div><div class="v">ENERGY STAR</div></div>
<div class="spec"><div class="l">Noise Level</div><div class="v">42 dB</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4b7d6b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4b7d6b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a8bfb7; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4b7d6b; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4b7d6b; color: #f5f5f5;
border: 1px solid #669081; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a8bfb7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #689283; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:Dotum,"Malgun Gothic",Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #666666; }
.brand { font-weight:700; font-size:16px; color:#4b7d6b; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:300; }
.hero { padding:26px 40px; }
.hero h1 { font-size:24px; font-weight:500; margin:0 0 16px; }
.booking { display:flex; gap:10px; align-items:center; }
.field { flex:1; height:44px; border:1px solid #666666; border-radius:3px; padding:10px 10px 10px 50px;
font-size:16px; color:#000; background:#fff; }
.tabrow { display:flex; gap:10px; margin-bottom:14px; }
.tab { height:42px; padding:1px 20px; border-radius:24px; font-size:16px; font-weight:500; display:flex; align-items:center;
color:#000; }
.tab.sel { background:#4b7d6b; color:#fff; }
.search-btn { background:#4b7d6b; color:#fff; border-radius:3px; padding:0 24px; height:44px; display:flex; align-items:center;
font-size:15px; }
.card-shell { margin:20px 40px; box-shadow:rgba(0,0,0,0.16) 0px 3px 6px 0px; border-radius:3px; padding:16px; display:flex; gap:20px; }
.info { flex:1; }
.info h3 { font-size:16px; margin:0 0 6px; }
.info p { font-size:13px; color:#000; margin:0; line-height:1.5; }
.green-card { margin:0 40px 20px; background:#4b7d6b; color:#fff; border-radius:0 0 3px 3px; padding:20px; }
.green-card h4 { font-size:16px; font-weight:300; margin:0 0 6px; }
.green-card p { font-size:13px; margin:0; opacity:0.9; }
.awards { margin:0 40px; }
.acc { border-bottom:1px solid #eeeeee; padding:16px 0; display:flex; justify-content:space-between; align-items:center; }
.acc span { color:#cc4b00; font-size:18px; font-weight:500; }
</style></head>
<body>
<nav>
<span class="brand">EVA Air</span>
<div class="navlinks"><span>Plan & Book</span><span>Manage Your Trip</span><span>Flight Info</span><span>Safety First</span></div>
</nav>
<section class="hero">
<h1>Your journey to the world, with EVA Air</h1>
<div class="tabrow"><div class="tab sel">Flights</div><div class="tab">Mileage</div><div class="tab">Hotels</div></div>
<div class="booking">
<div class="field">Taipei (TPE)</div>
<div class="field">Seoul (ICN)</div>
<div class="search-btn">Search flights</div>
</div>
</section>
<section class="card-shell">
<div class="info"><h3>Manage Your Trip</h3><p>Check-in, seat selection, and flight status in one place.</p></div>
</section>
<section class="green-card">
<h4>Digital dining, e-library, sustainable service</h4>
<p>From Taoyuan hub to the world — safety and comfort come first.</p>
</section>
<section class="awards">
<div class="acc"><span>Skytrax 5-Star Airline</span><span>></span></div>
<div class="acc"><span>World's Best Airline Cabin Crew</span><span>></span></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafaf2; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafaf2; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 24px; font-weight: 300; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #5a5a5a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; background: #2d2f24; color: #fafaf2;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; background: transparent; color: #2d2f24;
border: 1px solid #2d2f24; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #fafaf2; color: #121212;
border: 1px solid #c0c0ba; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a5a5a; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 300; line-height: 1.3; letter-spacing: 0.04em; background: #faefc2; color: #2d2f24;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafaf2; font-family:'Avenir Next',Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-family:'Courier New',monospace;font-size:18px;font-weight:300;}
.navlinks{display:flex;gap:22px;font-size:14px;}
.hero{height:230px;background:#fafaf2;display:flex;align-items:center;padding:0 32px;}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#5a5a5a;margin-bottom:12px;}
.heroText{width:52%;}
.heroText h1{font-family:'Courier New',monospace;font-weight:300;font-size:46px;letter-spacing:-.5px;line-height:1.08;margin:0 0 14px;}
.btn{display:inline-block;background:#2d2f24;color:#fafaf2;font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:14px 30px;}
.heroImg{width:48%;height:170px;position:relative;}
.tray{position:absolute;right:60px;top:20px;width:180px;height:100px;background:linear-gradient(160deg,#8a6d4a,#2d2f24);border-radius:2px;}
.tray:before{content:'';position:absolute;left:14px;top:-14px;width:150px;height:16px;background:#ffd879;}
.callout{margin:20px 32px 0;background:#faefc2;border-left:3px solid #ffd879;padding:16px 24px;}
.callout h3{font-family:'Courier New',monospace;font-weight:300;font-size:20px;margin:0 0 4px;}
.callout p{font-size:13px;margin:0;color:#2a2a2a;}
.grid{display:flex;gap:12px;padding:16px 32px 0;}
.card{width:206px;background:#fcfcfc;padding:14px;}
.thumb{height:96px;margin-bottom:8px;}
.pname{font-size:15px;font-weight:500;margin:0 0 4px;}
.pprice{font-family:'Courier New',monospace;font-size:16px;font-weight:300;margin:0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Ugmonk</div>
<div class="navlinks"><span>Apparel</span><span>Desk</span><span>Analog</span><span>Sale</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">The Analog System</div>
<h1>Objects designed to be used, not admired.</h1>
<div class="btn">Shop Desk Goods</div>
</div>
<div class="heroImg"><div class="tray"></div></div>
</div>
<div class="callout">
<h3>Analog Card System</h3>
<p>A physical productivity method — walnut trays and index cards for tracking today, this week, and later.</p>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8a6d4a,#2d2f24)"></div><div class="pname">Walnut Card Tray</div><div class="pprice">$68.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2d2f24,#404040)"></div><div class="pname">Gather Desk Organizer</div><div class="pprice">$58.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffd879,#2d2f24)"></div><div class="pname">Analog Card Refill Pack</div><div class="pprice">$12.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#404040,#2d2f24)"></div><div class="pname">Field Notebook</div><div class="pprice">$18.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 0.15px; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.25px; background: #3CB849; color: #FFFFFF;
border: none; border-radius: 2px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.25px; background: #FFFFFF; color: #313131;
border: 1px solid #3CB849; border-radius: 2px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #313131;
border: 1px solid #cccccc; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #313131; color: #FFFFFF;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{
width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;
background:#ffffff;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
color:#4A4A4A;
}
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:56px;background:#313131;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.logo{color:#fff;font-weight:700;font-size:18px;}
.logo span{color:#3CB849;}
.navlinks{display:flex;gap:20px;}
.navlinks span{color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;}
.cartbtn{background:#3CB849;color:#fff;font-size:12px;font-weight:700;padding:9px 18px;border-radius:4px;}
.hero{background:#313131;color:#fff;padding:26px 24px;display:flex;gap:24px;align-items:center;}
.heroText{flex:1.2;}
.heroText h1{font-size:30px;font-weight:700;line-height:1.15;margin:0 0 8px;}
.heroText h1 span{color:#3CB849;}
.heroText p{color:#9E9E9E;font-size:14px;margin:0 0 14px;max-width:400px;}
.heroBtn{display:inline-block;background:#3CB849;color:#fff;font-size:13px;font-weight:700;padding:12px 24px;border-radius:4px;}
.heroTool{flex:1;height:140px;position:relative;}
.mower{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:140px;height:60px;background:linear-gradient(150deg,#3CB849,#2E9A3C);border-radius:8px;}
.wheel{position:absolute;bottom:4px;width:26px;height:26px;border-radius:50%;background:#111;}
.wheelL{left:calc(50% - 60px);} .wheelR{right:calc(50% - 60px);}
.section{padding:16px 24px 0;}
.sectitle{font-size:15px;font-weight:700;color:#313131;margin:0 0 10px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{border:1px solid #DDDDDD;border-radius:4px;overflow:hidden;}
.photo{aspect-ratio:1/1;background:#F5F5F5;position:relative;}
.photo .tool{position:absolute;bottom:14%;left:20%;right:20%;height:40%;background:linear-gradient(150deg,#3CB849,#2E9A3C);border-radius:6px;}
.voltbadge{position:absolute;top:6px;left:6px;background:#313131;color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:2px;}
.ctitle{font-size:12px;font-weight:700;color:#313131;padding:8px 10px 0;}
.cprice{font-size:14px;font-weight:700;color:#313131;padding:2px 10px 10px;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#313131;color:#9E9E9E;font-size:11px;padding:10px 24px;display:flex;justify-content:space-between;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Greenworks<span>.</span></div>
<div class="navlinks"><span>Mowers</span><span>Trimmers</span><span>Chainsaws</span><span>Batteries</span></div>
<div class="cartbtn">Cart (0)</div>
</div>
<div class="hero">
<div class="heroText">
<h1>More Power.<br><span>Less Noise.</span></h1>
<p>Battery-powered outdoor equipment engineered to outperform gas — 24V to 80V systems, one shared platform.</p>
<div class="heroBtn">Shop 80V Systems</div>
</div>
<div class="heroTool"><div class="mower"></div><div class="wheel wheelL"></div><div class="wheel wheelR"></div></div>
</div>
<div class="section">
<div class="sectitle">Shop By Voltage</div>
<div class="grid">
<div class="card"><div class="photo"><div class="voltbadge">80V</div><div class="tool"></div></div><div class="ctitle">80V Self-Propelled Mower</div><div class="cprice">$599.00</div></div>
<div class="card"><div class="photo"><div class="voltbadge">60V</div><div class="tool"></div></div><div class="ctitle">60V Cordless Chainsaw</div><div class="cprice">$249.00</div></div>
<div class="card"><div class="photo"><div class="voltbadge">40V</div><div class="tool"></div></div><div class="ctitle">40V String Trimmer</div><div class="cprice">$149.00</div></div>
<div class="card"><div class="photo"><div class="voltbadge">24V</div><div class="tool"></div></div><div class="ctitle">24V Hedge Trimmer</div><div class="cprice">$99.00</div></div>
</div>
</div>
<div class="footer"><span>© Greenworks</span><span>3-Year Limited Warranty on Select Tools</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f4ef; color: #282521;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f4ef; color: #282521;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #282521; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f5ce4e; color: #1a1817;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f6f4ef; color: #282521;
border: 1px solid #f5ce4e; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #282521;
border: 1px solid #c2c0bc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f5ce4e; color: #1a1817;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f4ef; font-family:'Manrope',sans-serif; color:#282521; }
*{box-sizing:border-box;}
.nav{height:64px;background:#f6f4ef;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:Georgia,serif;font-size:22px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;}
.searchpill{background:#fff;border:1px solid #d1d5db;border-radius:9999px;padding:12px 24px;font-size:15px;color:#6b7280;width:220px;}
.hero{padding:24px 40px;display:flex;align-items:center;justify-content:space-between;}
.herotext h1{font-family:Georgia,serif;font-size:38px;font-weight:700;line-height:1.15;margin:0 0 14px;}
.btn{display:inline-block;background:#f5ce4e;color:#1a1817;font-size:16px;font-weight:600;padding:14px 28px;border-radius:9999px;}
.rugimg{width:220px;height:160px;border-radius:12px;background:linear-gradient(135deg,#657567,#f5ce4e 60%,#934b32);}
.pills{display:flex;gap:10px;padding:0 40px 12px;}
.pill{background:#f7f7f7;font-size:13px;padding:8px 16px;border-radius:9999px;}
.pill.active{background:#282521;color:#fff;}
.grid{display:flex;gap:14px;padding:0 40px;}
.card{flex:1;background:#fff;border-radius:12px;overflow:hidden;}
.thumb{aspect-ratio:1/1;position:relative;}
.wbadge{position:absolute;top:10px;left:10px;background:#f5ce4e;color:#1a1817;font-size:11px;font-weight:700;text-transform:uppercase;padding:4px 8px;border-radius:9999px;}
.body{padding:12px;}
.pname{font-size:16px;font-weight:600;}
.pprice{font-size:16px;font-weight:600;margin-top:4px;}
.swatches{display:flex;gap:6px;margin-top:8px;}
.sw{width:14px;height:14px;border-radius:9999px;}
</style>
<div class="nav">
<div class="logo">Ruggable</div>
<div class="navlinks"><div>Rugs</div><div>Decor</div><div>Sale</div></div>
<div class="searchpill">Search rugs...</div>
</div>
<div class="hero">
<div class="herotext"><h1>Rugs, actually washable.</h1><div class="btn">Shop Best Sellers</div></div>
<div class="rugimg"></div>
</div>
<div class="pills"><div class="pill active">All Rugs</div><div class="pill">Machine Washable</div><div class="pill">Outdoor</div><div class="pill">Runners</div></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#e5ded4"><span class="wbadge">Washable</span></div><div class="body"><div class="pname">Moroccan Diamond</div><div class="pprice">$179.00</div><div class="swatches"><div class="sw" style="background:#657567"></div><div class="sw" style="background:#934b32"></div><div class="sw" style="background:#f5ce4e"></div></div></div></div>
<div class="card"><div class="thumb" style="background:#dee5d4"><span class="wbadge">Washable</span></div><div class="body"><div class="pname">Vintage Faded Floral</div><div class="pprice">$149.00</div><div class="swatches"><div class="sw" style="background:#9fe3ba"></div><div class="sw" style="background:#ff816f"></div></div></div></div>
<div class="card"><div class="thumb" style="background:#e5d4de"></div><div class="body"><div class="pname">Watercolor Kilim</div><div class="pprice">$199.00</div><div class="swatches"><div class="sw" style="background:#934b32"></div><div class="sw" style="background:#f5ce4e"></div></div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #3c3c3c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #3c3c3c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #3c3c3c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #828282; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.43; letter-spacing: 0.5px; background: #e91a21; color: #ffffff;
border: none; border-radius: 2px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.43; letter-spacing: 0.5px; background: transparent; color: #e91a21;
border: 1px solid #e91a21; border-radius: 2px;
padding: 9px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #3c3c3c;
border: 1px solid #cecece; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #828282; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 1px; background: #fcdfe0; color: #e91a21;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#3c3c3c; color:#ffffff; box-sizing:border-box;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; }
.brand { font-size:17px; font-weight:700; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:500; }
.navlinks .active { border-bottom:2px solid #e91a21; padding-bottom:18px; margin-bottom:-19px; }
main { flex:1 1 auto; display:flex; flex-direction:column; padding:0 30px; min-height:0; }
.hero { flex:1 1 auto; display:flex; align-items:center; gap:24px; min-height:0; }
.hero-copy { flex:1; }
.hero-copy .series { display:inline-block; background:#7328cd; font-size:11px; font-weight:700; letter-spacing:1px;
text-transform:uppercase; padding:3px 8px; margin-bottom:10px; }
.hero-copy h1 { font-size:36px; font-weight:700; letter-spacing:-0.5px; margin:0 0 8px; line-height:1.1; }
.hero-copy p { font-size:14px; color:#c9c9c9; margin:0 0 14px; max-width:340px; }
.hero-copy button { background:#e91a21; color:#fff; border:none; padding:10px 24px; font-size:14px; font-weight:600;
letter-spacing:0.5px; text-transform:uppercase; }
.monitor { flex:0 0 280px; height:170px; position:relative;
background:linear-gradient(150deg,#0d0d0d,#1a1a1a 70%); border:1px solid #555; }
.monitor::after { content:''; position:absolute; inset:14px;
background:radial-gradient(circle at 30% 30%, rgba(159,95,236,0.4), transparent 60%),
radial-gradient(circle at 75% 70%, rgba(233,26,33,0.35), transparent 55%); }
.pills { flex:0 0 auto; display:flex; gap:8px; padding:14px 0; }
.pill { background:transparent; border:1px solid #666; border-radius:999px; padding:6px 16px; font-size:12px; font-weight:700; }
.pill.active { background:#e91a21; border-color:#e91a21; }
.specgrid { flex:0 0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding-bottom:16px; }
.spec { background:#4a4a4a; border-radius:4px; padding:8px 10px; text-align:center; }
.spec .val { font-size:14px; font-weight:700; margin:0; }
.spec .lab { font-size:10px; color:#b9b9b9; text-transform:uppercase; letter-spacing:0.3px; margin:2px 0 0; }
footer { flex:0 0 auto; height:52px; background:#2e2e2e; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; color:#b9b9b9; }
</style></head>
<body>
<nav>
<p class="brand">Aoc</p>
<div class="navlinks"><span class="active">AGON</span><span>AGON PRO</span><span>Style</span><span>Business</span></div>
</nav>
<main>
<div class="hero">
<div class="hero-copy">
<span class="series">AGON PRO</span>
<h1>Built for the frame you can't afford to miss.</h1>
<p>27" QD-OLED, 240Hz, 0.03ms GtG — tuned for competitive play and color-accurate creative work alike.</p>
<button>Buy Now — $899</button>
</div>
<div class="monitor"></div>
</div>
<div class="pills">
<span class="pill active">27"</span><span class="pill">QHD</span><span class="pill">240Hz</span><span class="pill">HDR400</span>
</div>
<div class="specgrid">
<div class="spec"><p class="val">240Hz</p><p class="lab">Refresh</p></div>
<div class="spec"><p class="val">0.03ms</p><p class="lab">GtG</p></div>
<div class="spec"><p class="val">QD-OLED</p><p class="lab">Panel</p></div>
<div class="spec"><p class="val">DisplayHDR</p><p class="lab">400 True Black</p></div>
</div>
</main>
<footer>
<span>© Aoc</span>
<span>Compare Models · Warranty · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #cc3b3b; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #fafafa; color: #111111;
border: 1px solid #cc3b3b; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #111111;
border: 1px solid #c0c0c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: 0.3px; background: #e99292; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#111111; box-sizing:border-box;
font-family:'Josefin Sans', Arial, Helvetica, 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.archivo { font-family:'Archivo Black', Arial, sans-serif; font-weight:400; }
nav { flex:0 0 auto; height:64px; display:flex; align-items:center; justify-content:center; position:relative;
border-bottom:1px solid #eeeeee; }
.brand { font-size:18px; color:#cc3b3b; margin:0; }
.navlinks { position:absolute; left:28px; display:flex; gap:20px; font-size:13px; letter-spacing:0.5px;
text-transform:uppercase; color:#aaaaaa; font-weight:500; }
.navlinks .active { color:#cc3b3b; }
.searchcart { position:absolute; right:28px; font-size:13px; letter-spacing:0.5px; text-transform:uppercase; }
main { flex:1 1 auto; display:flex; flex-direction:column; padding:20px 28px; min-height:0; }
.hero { flex:0 0 auto; text-align:center; margin-bottom:16px; }
.hero h1 { font-size:26px; margin:0 0 4px; }
.hero p { font-size:14px; color:#272727; margin:0; }
.grid { flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; min-height:0; }
.card { background:#ffffff; border-radius:12px; display:flex; flex-direction:column; overflow:hidden; position:relative; }
.heart { position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:999px; background:rgba(255,255,255,0.9);
display:flex; align-items:center; justify-content:center; color:#cc3b3b; font-size:14px; }
.thumb { flex:1; min-height:0; }
.t1 { background:linear-gradient(160deg,#d3efcd,#3a5792 130%); }
.t2 { background:linear-gradient(160deg,#fcd6d7,#cc3b3b 130%); }
.t3 { background:linear-gradient(160deg,#fff299,#c72e2f 130%); }
.badge { position:absolute; top:10px; left:10px; background:#e99292; color:#fff; font-size:10px; font-weight:700;
letter-spacing:0.3px; text-transform:uppercase; padding:3px 8px; border-radius:4px; }
.info { padding:10px 14px 14px; }
.info h3 { font-size:16px; font-weight:500; margin:0 0 4px; }
.info .price { font-size:14px; color:#272727; margin:0; }
.stars { color:#cc3b3b; font-size:12px; margin:4px 0 0; }
footer { flex:0 0 auto; height:56px; background:#1e1e1e; color:#eeeeee; display:flex; align-items:center;
justify-content:space-between; padding:0 28px; font-size:12px; }
</style></head>
<body>
<nav>
<div class="navlinks"><span class="active">Puzzles</span><span>New Arrivals</span><span>Gift Sets</span></div>
<p class="brand archivo">Apostrophe Puzzles</p>
<div class="searchcart">Cart (0)</div>
</nav>
<main>
<div class="hero">
<h1 class="archivo">Every piece tells a story</h1>
<p>Illustrated jigsaws for gardens, streetscapes, and starry skies.</p>
</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="heart">♥</div><div class="thumb t1"></div>
<div class="info"><h3>Botanical Garden — 1000pc</h3><p class="price">$28.00</p><div class="stars">★★★★★ 4.9</div></div></div>
<div class="card"><div class="heart">♥</div><div class="thumb t2"></div>
<div class="info"><h3>Parisian Streetscape — 500pc</h3><p class="price">$22.00</p><div class="stars">★★★★☆ 4.6</div></div></div>
<div class="card"><div class="heart">♥</div><div class="thumb t3"></div>
<div class="info"><h3>Celestial Map — 1500pc</h3><p class="price">$34.00</p><div class="stars">★★★★★ 5.0</div></div></div>
</div>
</main>
<footer>
<span>© Apostrophe Puzzles</span>
<span>Shipping · Returns · Gift Cards</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6f6f6f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #4500ff; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: transparent; color: #1a1a1a;
border: 1px solid #4500ff; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #fafafa; color: #1a1a1a;
border: 1px solid #c2c2c2; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6f6f6f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.2px; background: #f2f2f2; color: #222222;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Muli','Mulish',sans-serif; background:#fafafa; color:#1a1a1a; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.announce{height:40px;background:#4500ff;color:#fff;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e5e5e5;}
.logo{font-size:18px;font-weight:600;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;}
.hero{height:230px;background:#1c1d1d;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.herotext{max-width:400px;color:#fafafa;}
.herotext h1{font-family:'Graphie','Muli',sans-serif;font-size:34px;font-weight:700;letter-spacing:-.3px;margin:0 0 12px;line-height:1.1;}
.herotext p{font-size:14px;color:#c9c9c9;margin:0 0 16px;}
.hbtn{display:inline-block;background:#4500ff;color:#fff;font-size:14px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:13px 26px;border-radius:8px;}
.desk{width:220px;height:150px;border-radius:8px;background:linear-gradient(150deg,#8a6a4a,#3a2410);position:relative;}
.desk:after{content:'';position:absolute;left:16px;top:16px;width:60px;height:100px;border-radius:4px;background:#1c1d1d;opacity:.4;}
.filterrow{display:flex;gap:8px;padding:14px 40px 0;}
.pill{border:1px solid #e5e5e5;color:#6f6f6f;font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;padding:8px 18px;border-radius:9999px;}
.pill.a{background:#4500ff;color:#fff;border-color:#4500ff;}
.sec{padding:14px 40px 0;}
.grid{display:flex;gap:16px;}
.card{width:196px;background:#f9fafb;border:1px solid #eeeeee;border-radius:8px;padding:14px;}
.thumb{aspect-ratio:1;height:88px;border-radius:8px;margin-bottom:10px;}
.matrow{display:flex;gap:6px;margin-bottom:6px;}
.mat{font-size:11px;border:1px solid #e5e5e5;border-radius:9999px;padding:2px 10px;color:#222222;}
.mat.eco{background:#edf5f5;border-color:#108474;color:#108474;}
.ptitle{font-size:16px;font-weight:600;}
.pprice{font-family:'Graphie','Muli',sans-serif;font-size:20px;font-weight:700;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:0;}
</style>
<div class="wrap">
<div class="announce">Free Shipping Over $60 — Handmade To Order</div>
<div class="nav"><div class="logo">Oakywood Desk Acc 2</div><div class="navlinks"><div>Desk Organizers</div><div>Monitor Stands</div><div>Bundles</div></div></div>
<div class="hero"><div class="herotext"><h1>Workshop-made, desk-ready.</h1><p>FSC-certified walnut and oak organizers, finished by hand and built to outlast the desk itself.</p><div class="hbtn">Shop the Collection</div></div><div class="desk"></div></div>
<div class="filterrow"><div class="pill a">Desk Organizer</div><div class="pill">Monitor Stand</div><div class="pill">Cable Management</div></div>
<div class="sec">
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#8a6a4a,#3a2410)"></div><div class="matrow"><span class="mat">Walnut</span><span class="mat eco">FSC</span></div><div class="ptitle">Modular Desk Tray</div><div class="pprice">$94</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#c9a878,#7a5a3a)"></div><div class="matrow"><span class="mat">Oak</span></div><div class="ptitle">Wireless Charging Stand</div><div class="pprice">$79</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#6a5540,#2a1c10)"></div><div class="matrow"><span class="mat">Walnut</span><span class="mat eco">FSC</span></div><div class="ptitle">Monitor Riser Deep</div><div class="pprice">$129</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #8c8c8c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #0273ed; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: transparent; color: #0273ed;
border: 1px solid #0273ed; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #f5f5f5; color: #252324;
border: 1px solid #bababa; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #62e483; color: #0a0a0a;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; color:#252324; font-family:'Inter',sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;background:#0a0a0a;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #484848;}
.logo{color:#fff;font-family:'Asul',serif;font-size:19px;font-weight:700;}
.navlinks{display:flex;gap:20px;color:#fff;font-size:14px;font-weight:500;}
.navicons{color:#fff;font-size:12px;}
.hero{background:#16171d;padding:26px 30px;display:flex;align-items:center;gap:24px;}
.herotext h1{font-family:'Asul',serif;font-size:30px;font-weight:700;color:#fff;margin:0 0 8px;line-height:1.15;}
.herotext p{font-size:14px;color:#b7b9c1;margin:0 0 14px;max-width:340px;}
.cta{display:inline-block;background:#0273ed;color:#fff;font-size:14px;font-weight:600;padding:12px 24px;border-radius:4px;}
.dropcard{margin-left:auto;background:#101219;border-radius:8px;padding:16px 20px;color:#fff;width:180px;}
.dropcard .lbl{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#62e483;margin-bottom:6px;}
.dropcard .val{font-size:18px;font-weight:700;}
.grid{display:flex;gap:12px;padding:16px 30px 0;}
.card{width:210px;background:#f2f2f2;border-radius:4px;padding:8px;}
.thumb{height:150px;background:#e9e9e9;border-radius:4px;margin-bottom:8px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 10px;border-radius:9999px;}
.badge.instock{background:#62e483;color:#0a0a0a;}
.badge.limited{background:#81632c;color:#fff;}
.ptitle{font-size:14px;font-weight:600;color:#252324;margin:0 0 2px;}
.pprice{font-size:14px;color:#252324;}
.pprice.sale{color:#df2c21;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#1a1d29;color:#8c8c8c;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Strangecat Toys</div>
<div class="navlinks"><span>Drops</span><span>Vinyl Figures</span><span>Art Toys</span><span>Sale</span></div>
<div class="navicons">Search Cart (0)</div>
</div>
<div class="hero">
<div class="herotext"><h1>Designer toys for night-market collectors.</h1><p>Limited drops, in-stock signals, and the strange stuff nobody else stocks.</p><div class="cta">Shop the Drop</div></div>
<div class="dropcard"><div class="lbl">Live Now</div><div class="val">Midnight Prowler Ed.2</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0273ed,#16171d)"><span class="badge instock">In Stock</span></div><div class="ptitle">Prowler Vinyl 8in</div><div class="pprice">$89.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#484848,#16171d)"><span class="badge limited">Limited</span></div><div class="ptitle">Gilded Kaiju Ed.5</div><div class="pprice sale">$210.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0273ed,#101219)"></div><div class="ptitle">Static Ghost Figure</div><div class="pprice">$64.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#424557,#16171d)"><span class="badge" style="background:#0273ed;color:#fff">New</span></div><div class="ptitle">Neon Alley Set</div><div class="pprice">$120.00</div></div>
</div>
<div class="footer"><span>© StrangeCat Toys</span><span>Drops Shipping Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f3f3; color: #0e0e0e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f3f3; color: #0e0e0e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -0.25px; margin: 0; color: #0e0e0e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #676767; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 1.5px; background: #0048ff; color: #f3f3f3;
border: none; border-radius: 0px; padding: {spacing.md} {spacing.xl};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 1.5px; background: transparent; color: #0e0e0e;
border: 1px solid #0048ff; border-radius: 0px;
padding: {spacing.md} {spacing.xl}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f3f3f3; color: #0e0e0e;
border: 1px solid #dedede; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676767; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; background: #837e74; color: #0e0e0e;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f3f3f3; font-family:'Gotham Book','Gotham','Helvetica Neue',Helvetica,sans-serif; color:#2f2f2f; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#0e0e0e;}
.logo{font-family:'Gotham Bold','Gotham',sans-serif;font-size:18px;font-weight:700;color:#f3f3f3;text-transform:uppercase;letter-spacing:.4px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:700;color:#f3f3f3;text-transform:uppercase;}
.navcta{background:#0048ff;color:#f3f3f3;font-size:12px;font-weight:700;padding:9px 18px;text-transform:uppercase;}
.hero{height:250px;display:flex;align-items:center;padding:0 36px;background:#ececec;}
.herotext{width:420px;}
.material{display:flex;gap:6px;margin-bottom:16px;}
.swatch{width:20px;height:20px;border-radius:2px;}
.headline{font-family:'Gotham Bold','Gotham',sans-serif;font-size:26px;font-weight:700;color:#0e0e0e;margin-bottom:12px;line-height:1.15;text-transform:uppercase;letter-spacing:-0.2px;}
.sub{font-size:13px;color:#2f2f2f;margin-bottom:16px;max-width:320px;}
.spec{font-family:'Inconsolata','Roboto Mono',monospace;font-size:12px;color:#676767;margin-bottom:18px;}
.btn{display:inline-block;background:#0048ff;color:#f3f3f3;font-size:12px;font-weight:700;padding:12px 24px;text-transform:uppercase;letter-spacing:.5px;}
.sleeve{width:220px;height:160px;margin-left:70px;background:linear-gradient(135deg,#0e0e0e,#837e74);border-radius:4px;position:relative;}
.stitch{position:absolute;inset:12px;border:1px dashed #cecdc0;border-radius:2px;}
.sec{padding:20px 36px 0;}
.sectitle{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#2f2f2f;margin-bottom:16px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#ececec;border-radius:2px;padding:12px;}
.thumb{height:82px;border-radius:2px;margin-bottom:10px;}
.pname{font-size:12px;font-weight:700;color:#0e0e0e;text-transform:uppercase;}
.pspec{font-family:'Inconsolata',monospace;font-size:11px;color:#676767;margin-top:4px;}
.pprice{font-size:13px;color:#0048ff;font-weight:700;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Nomad Laptop B 2</div>
<div class="navlinks"><span>Bags</span><span>Sleeves</span><span>Accessories</span></div>
<div class="navcta">Shop All</div>
</div>
<div class="hero">
<div class="herotext">
<div class="material">
<div class="swatch" style="background:#0e0e0e;"></div>
<div class="swatch" style="background:#837e74;"></div>
<div class="swatch" style="background:#4d5245;"></div>
<div class="swatch" style="background:#cecdc0;"></div>
</div>
<div class="headline">A spec sheet that happens to feel premium.</div>
<div class="sub">Ballistic nylon, bridle leather, and olive webbing built to a bill of materials, not ad copy.</div>
<div class="spec">WEIGHT 0.6 LB · MATERIAL 1050D NYLON</div>
<div class="btn">Shop Laptop Sleeves</div>
</div>
<div class="sleeve"><div class="stitch"></div></div>
</div>
<div class="sec">
<div class="sectitle">Field Kit</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0e0e0e,#837e74)"></div><div class="pname">15" Laptop Sleeve</div><div class="pspec">1050D NYLON</div><div class="pprice">$59.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4d5245,#0e0e0e)"></div><div class="pname">Olive Colorway Pouch</div><div class="pspec">MIL-SPEC WEBBING</div><div class="pprice">$34.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#cecdc0,#837e74)"></div><div class="pname">Heritage Leather Tag</div><div class="pspec">FULL-GRAIN LEATHER</div><div class="pprice">$19.95</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #298737; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #298737; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #99c4a0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #237b31; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #298737; color: #000000;
border: 1px solid #237b31; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #298737; color: #f5f5f5;
border: 1px solid #4a9955; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #99c4a0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #288536; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#08121a; box-sizing:border-box;
font-family:"Hiragino Sans", Meiryo, "Yu Gothic", sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 30px;
border-bottom:1px solid rgba(8,18,26,0.08); }
.brand { font-size:17px; font-weight:700; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:700; }
.navlinks .on { color:#237b31; }
.row { display:flex; gap:8px; }
.btn-o { background:#fff; color:#237b31; border:1px solid #237b31; border-radius:15px; padding:6px 16px; font-size:12px; font-weight:700; }
.btn-c { background:#298737; color:#fff; border-radius:15px; padding:7px 16px; font-size:12px; font-weight:700; }
.hero { text-align:center; padding:26px 30px 20px; background:#f5f6f6; }
.hero h1 { font-size:28px; font-weight:700; margin:0 0 10px; }
.hero p { font-size:14px; color:#08121a; margin:0 0 16px; }
.cta { display:inline-block; background:#298737; color:#fff; border-radius:48px; padding:12px 28px; font-size:15px; font-weight:700; }
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; padding:22px 30px 0; }
.card { background:#e7f5e9; border-radius:16px; padding:18px; }
.card h3 { font-size:16px; margin:0 0 6px; }
.card p { font-size:12.5px; color:#08121a; margin:0; line-height:1.5; }
.card2 { background:#ffffff; border:1px solid rgba(8,18,26,0.08); border-radius:16px; padding:18px; }
.principlerow { display:flex; gap:12px; padding:20px 30px 0; }
.pr { flex:1; text-align:center; }
.pr .ic { width:36px; height:36px; border-radius:50%; background:#298737; margin:0 auto 8px; }
.pr span { font-size:12px; font-weight:700; }
footer { position:absolute; bottom:0; width:960px; padding:12px 30px; border-top:1px solid rgba(8,18,26,0.08);
display:flex; justify-content:space-between; font-size:11.5px; color:#08121a; }
</style></head>
<body>
<nav>
<p class="brand">Spindle (CyberAgent Ameba)</p>
<div class="navlinks"><span class="on">Brand</span><span>Principles</span><span>Style</span><span>Components</span></div>
<div class="row"><span class="btn-o">Log In</span><span class="btn-c">Sign Up</span></div>
</nav>
<section class="hero">
<h1>Get started with Spindle (CyberAgent Ameba) — sign up free today</h1>
<p>Weaving living content, for a media platform anyone can use, anytime, without hesitation.</p>
<span class="cta">Sign Up</span>
</section>
<div class="grid">
<div class="card"><h3>Start blogging on Spindle (CyberAgent Ameba)</h3><p>Photos, words, however you like. Anyone can start sharing today.</p></div>
<div class="card2"><h3>What kind of service is Spindle (CyberAgent Ameba)?</h3><p>From blogs to fortune-telling to avatars, a wide range of services under one ID.</p></div>
</div>
<div class="principlerow">
<div class="pr"><div class="ic"></div><span>Respect</span></div>
<div class="pr"><div class="ic"></div><span>Lightness</span></div>
<div class="pr"><div class="ic"></div><span>Emotion</span></div>
<div class="pr"><div class="ic"></div><span>Welcome</span></div>
</div>
<footer>
<span>Embodying what makes Spindle (CyberAgent Ameba) unique</span>
<span>About Spindle · Updates</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.75; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.67; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: #76b900; color: #000000;
border: none; border-radius: 2px; padding: 11px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: transparent; color: #000000;
border: 1px solid #76b900; border-radius: 2px;
padding: 11px 13px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.43; background: #f7f7f7; color: #1a1a1a;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
/* 두 표면 모드: 블랙 히어로/풋터 + 화이트 본문, 연결고리는 단 하나의 채도 —
NVIDIA 그린. 2px 라운드, 그림자 없음, 코너 사각형이 유일한 장식. */
.hero { background:#000000; height:210px; position:relative; padding:0 40px; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; }
.brand { font-size:16px; font-weight:700; color:#fff; margin:0; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:22px; font-size:12px; color:rgba(255,255,255,0.75); font-weight:700; text-transform:uppercase; letter-spacing:0.02em; }
.btn { background:#76b900; color:#000; border:none; border-radius:2px; padding:9px 20px; font-weight:700; font-size:12px; }
.herocopy { padding-top:20px; }
.herocopy .eyebrow { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#76b900; }
.herocopy h1 { font-size:44px; font-weight:700; letter-spacing:0; margin:8px 0 0; color:#fff; max-width:560px; line-height:1.15; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#cccccc; padding:0 40px; margin-top:26px; }
.cell { background:#fff; padding:20px; position:relative; }
.cell::before { content:''; position:absolute; top:12px; right:12px; width:10px; height:10px; background:#76b900; }
.cell .k { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#898989; }
.cell h4 { font-size:18px; font-weight:700; margin:8px 0 6px; color:#000; }
.cell p { font-size:12px; color:#757575; margin:0; line-height:1.5; }
.cell .link { display:inline-block; margin-top:10px; font-size:12px; font-weight:700; color:#0046a4; }
footer { background:#000; padding:16px 40px; display:flex; justify-content:space-between; align-items:center;
font-size:11px; color:rgba(255,255,255,0.7); margin-top:26px; }
</style></head>
<body>
<div class="hero">
<nav>
<p class="brand">NVIDIA</p>
<div class="navlinks"><span>AI</span><span>Gaming</span><span>Data Center</span><span>Developer</span></div>
<button class="btn">Get started</button>
</nav>
<div class="herocopy">
<span class="eyebrow">Accelerated computing</span>
<h1>Engineering the platform for AI</h1>
</div>
</div>
<div class="grid">
<div class="cell"><span class="k">Platform</span><h4>CUDA-X</h4><p>Libraries and frameworks for every domain, from HPC to generative AI.</p><span class="link">Explore →</span></div>
<div class="cell"><span class="k">Hardware</span><h4>Blackwell</h4><p>The architecture powering the next generation of AI factories.</p><span class="link">Explore →</span></div>
<div class="cell"><span class="k">Developer</span><h4>NIM Microservices</h4><p>Deploy optimized inference containers in minutes, not weeks.</p><span class="link">Explore →</span></div>
</div>
<footer>
<span>© NVIDIA Corporation</span>
<span>AI · Gaming · Data Center · Developer</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #034f6d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #034f6d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #88aab8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #212121; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #034f6d; color: #ffffff;
border: 1px solid #212121; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #034f6d; color: #f5f5f5;
border: 1px solid #2a6a83; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #88aab8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #084861; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212121; box-sizing:border-box;
font-family:"Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:80px; display:flex; align-items:center; padding:0 24px; border-bottom:1px solid #e6e6e6; }
.brand { font-size:20px; font-weight:700; margin-right:40px; }
.navlist { display:flex; height:80px; }
.navlist li { list-style:none; padding:25px 15px; font-size:14px; font-weight:700; color:#212121; }
.hero { padding:40px 40px 24px; }
h1 { font-size:36px; font-weight:700; line-height:1.3; margin:0 0 14px; max-width:640px; }
.body { font-size:16px; line-height:1.6; color:#212121; max-width:600px; margin:0 0 18px; }
a.link { color:#034f6d; font-size:16px; text-decoration:underline; }
.stats { display:flex; gap:0; padding:10px 40px 30px; border-top:1px solid #e6e6e6; margin-top:10px; }
.stat { flex:1; padding:24px 15px; border-right:1px solid #e6e6e6; }
.stat:last-child { border-right:none; }
.stat h2 { font-size:22px; font-weight:700; margin:0 0 8px; }
.stat p { font-size:14px; color:#212121; line-height:1.6; margin:0; }
.stat .num { font-size:32px; font-weight:700; margin-top:10px; }
</style></head>
<body>
<nav>
<span class="brand">Toyota</span>
<ul class="navlist">
<li>Vehicles</li>
<li>Mobility</li>
<li>Company</li>
<li>Sustainability</li>
</ul>
</nav>
<section class="hero">
<h1>Making ever-better mobility<br>for people and society</h1>
<p class="body">The Toyota Production System aims to eliminate waste, shorten lead time, and make work easier for the people who do it — every day, incrementally.</p>
<a class="link" href="#">Read the production system</a>
</section>
<div class="stats">
<div class="stat">
<h2>Production & Sales</h2>
<p>Figures reported by region and vehicle line, updated each fiscal year.</p>
<div class="num">10.3M</div>
</div>
<div class="stat">
<h2>Production System</h2>
<p>Jidoka and Just-in-Time remain the two pillars of daily kaizen.</p>
<div class="num">2 pillars</div>
</div>
<div class="stat">
<h2>Mobility for All</h2>
<p>A continuing shift toward mobility while building beloved cars.</p>
<div class="num">170+ markets</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #080808; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f5f5f5; color: #080808;
border: 1px solid #080808; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f5f5f5; color: #1e1e1e;
border: 1px solid #ebebeb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #4469af; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; font-family:'NeuzeitS-Book','Nunito Sans',sans-serif; color:#1e1e1e; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#f5f5f5;}
.logo{font-family:'BebasNeue','NeuzeitS-Book',sans-serif;font-size:24px;letter-spacing:0.5px;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;}
.tagrow{display:flex;gap:6px;padding:0 40px 12px;}
.tagpill{background:#f7f7f8;border-radius:9999px;padding:6px 16px;font-size:12px;color:#595959;}
.tagpill.active{background:#080808;color:#fff;}
.hero{height:200px;background:#080808;display:flex;align-items:center;padding:0 40px;}
.herotext{width:440px;}
h1{font-family:'BebasNeue','NeuzeitS-Book',sans-serif;font-size:38px;letter-spacing:0.5px;color:#fff;margin:0 0 10px;}
.sub{font-size:14px;color:#c1c1c1;margin:0 0 18px;max-width:360px;}
.cta{display:inline-block;background:#4469af;color:#fff;font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:12px 24px;border-radius:8px;}
.sec{padding:22px 40px 0;}
.sectitle{font-size:20px;font-weight:600;margin:0 0 14px;}
.grid{display:flex;gap:16px;}
.card{width:210px;background:#fff;border-radius:12px;padding:16px;border:1px solid #ebebeb;}
.thumb{height:96px;border-radius:12px;margin-bottom:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#4469af;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:4px 8px;border-radius:4px;}
.pname{font-size:18px;font-weight:600;margin:0 0 6px;}
.pdesc{font-size:14px;color:#595959;margin:0;}
</style>
<div class="nav">
<div class="logo">Public Goods Cleaning 2</div>
<div class="navlinks"><span>Kitchen</span><span>Bath</span><span>All-Purpose</span><span>Laundry</span></div>
</div>
<div class="tagrow"><div class="tagpill active">All</div><div class="tagpill">Kitchen</div><div class="tagpill">Bath</div><div class="tagpill">All-Purpose</div></div>
<div class="hero">
<div class="herotext">
<h1>NO TOXINS. NO EXCUSES.</h1>
<p class="sub">Plant-based cleaning concentrates that let the label do the talking.</p>
<div class="cta">Shop Bundles</div>
</div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#eca937,#080808)"><span class="badge">Plant-Based</span></div><div class="pname">All-Purpose Cleaner</div><div class="pdesc">Concentrate refill</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#dc886d,#1e1e1e)"><span class="badge">Bestseller</span></div><div class="pname">Dish Soap</div><div class="pdesc">Citrus scent</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4469af,#1e1e1e)"><span class="badge">New</span></div><div class="pname">Bath Scrub Cleaner</div><div class="pdesc">Non-toxic formula</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #0c0a09;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #0c0a09;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 300; line-height: 1.2; margin: 0; color: #0c0a09; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.47; letter-spacing: 0.15px; margin: 0; color: #777169; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.0; background: #292524; color: #ffffff;
border: none; border-radius: 9999px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.0; background: transparent; color: #0c0a09;
border: 1px solid #292524; border-radius: 9999px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0.16px; background: #ffffff; color: #0c0a09;
border: 1px solid #bbbaba; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777169; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.96px; background: #f0efed; color: #0c0a09;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f5; color:#0c0a09; box-sizing:border-box;
font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.orb { position:absolute; border-radius:50%; filter:blur(2px); opacity:0.55; }
.o1 { width:340px; height:340px; left:-90px; top:-100px; background:radial-gradient(circle at 35% 35%, #a7e5d3, transparent 70%); }
.o2 { width:300px; height:300px; right:-80px; top:40px; background:radial-gradient(circle at 60% 40%, #c8b8e0, transparent 70%); }
.o3 { width:260px; height:260px; left:38%; bottom:-140px; background:radial-gradient(circle at 50% 50%, #f4c5a8, transparent 70%); }
nav { position:relative; z-index:2; height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; }
.brand { font-family:Georgia,"Times New Roman",serif; font-size:19px; font-weight:400; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#4e4e4e; }
.btn-primary { background:#292524; color:#fff; border:none; border-radius:9999px; padding:9px 20px;
font-size:14px; font-weight:500; white-space:nowrap; }
.hero { position:relative; z-index:2; padding:36px 40px 20px; text-align:center; display:flex; flex-direction:column;
align-items:center; gap:14px; }
.hero h1 { font-family:Georgia,"Times New Roman",serif; font-weight:300; font-size:46px; letter-spacing:-1.2px;
line-height:1.05; margin:0; max-width:640px; color:#0c0a09; }
.hero p { font-size:15px; color:#4e4e4e; margin:0; max-width:460px; }
.orbcards { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
padding:14px 40px 20px; }
.orbcard { background:#fafafa; border-radius:24px; padding:20px; text-align:left; overflow:hidden; position:relative;
border:1px solid #e7e5e4; }
.orbcard .glow { position:absolute; width:130px; height:130px; border-radius:50%; top:-50px; right:-40px; opacity:0.6; }
.g1 .glow { background:radial-gradient(circle,#a7e5d3,transparent 70%); }
.g2 .glow { background:radial-gradient(circle,#a8c8e8,transparent 70%); }
.g3 .glow { background:radial-gradient(circle,#e8b8c4,transparent 70%); }
.orbcard .eyebrow { position:relative; font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
color:#777169; }
.orbcard h3 { position:relative; font-family:Georgia,"Times New Roman",serif; font-weight:300; font-size:19px; margin:8px 0 6px; }
.orbcard p { position:relative; font-size:12px; color:#4e4e4e; line-height:1.5; margin:0; }
.waveform { position:relative; z-index:2; margin:6px 40px 0; background:#ffffff; border:1px solid #e7e5e4;
border-radius:16px; padding:14px 18px; display:flex; align-items:center; gap:14px; }
.playbtn { width:32px; height:32px; border-radius:50%; background:#292524; flex:0 0 auto; position:relative; }
.playbtn::after { content:''; position:absolute; left:12px; top:9px; border-style:solid; border-width:7px 0 7px 11px;
border-color:transparent transparent transparent #fff; }
.bars { flex:1; display:flex; align-items:center; gap:2px; height:26px; }
.bars i { width:3px; background:#d6d3d1; border-radius:2px; display:inline-block; }
.voicelabel { font-size:12px; color:#777169; white-space:nowrap; }
footer { position:relative; z-index:2; margin-top:auto; border-top:1px solid #e7e5e4; padding:12px 40px;
display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#777169; }
</style></head>
<body>
<div class="orb o1"></div><div class="orb o2"></div><div class="orb o3"></div>
<nav>
<p class="brand">ElevenLabs</p>
<div class="navlinks"><span>Creative</span><span>Agents</span><span>Video</span><span>Pricing</span></div>
<button class="btn-primary">Try free</button>
</nav>
<section class="hero">
<h1>The most realistic voice AI platform</h1>
<p>Create lifelike speech, agents, and audio — in any voice, any language.</p>
</section>
<section class="orbcards">
<div class="orbcard g1"><div class="glow"></div><span class="eyebrow">Text to Speech</span><h3>Any voice, instantly</h3><p>Generate natural speech in 30+ languages from a single line of text.</p></div>
<div class="orbcard g2"><div class="glow"></div><span class="eyebrow">Conversational AI</span><h3>Agents that listen</h3><p>Build voice agents that sound human and respond in real time.</p></div>
<div class="orbcard g3"><div class="glow"></div><span class="eyebrow">Dubbing</span><h3>Speak every language</h3><p>Translate and dub video into dozens of languages automatically.</p></div>
</section>
<div class="waveform">
<div class="playbtn"></div>
<div class="bars">
<i style="height:8px"></i><i style="height:16px"></i><i style="height:22px"></i><i style="height:12px"></i>
<i style="height:20px"></i><i style="height:26px"></i><i style="height:14px"></i><i style="height:18px"></i>
<i style="height:10px"></i><i style="height:24px"></i><i style="height:16px"></i><i style="height:9px"></i>
<i style="height:19px"></i><i style="height:15px"></i><i style="height:22px"></i><i style="height:11px"></i>
<i style="height:17px"></i><i style="height:13px"></i><i style="height:21px"></i><i style="height:9px"></i>
</div>
<span class="voicelabel">Rachel — narration</span>
</div>
<footer>
<span>© ElevenLabs</span>
<span>ElevenLabs · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d2124;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d2124;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #1d2124; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #818182; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #0062cc; color: #ffffff;
border: none; border-radius: 12px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #545b62;
border: 1px solid #0062cc; border-radius: 12px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1d2124;
border: 1px solid #c6c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #818182; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.2px; background: #1e7e34; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; color:#545b62; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fff;border-bottom:1px solid #dae0e5;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:20px;font-weight:700;color:#1d2124;letter-spacing:.2px;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;color:#545b62;}
.navlinks .active{color:#0062cc;}
.hero{height:250px;display:flex;align-items:center;padding:0 34px;gap:40px;background:#f8f9fa;}
.herotext{width:400px;}
h1{font-size:30px;font-weight:700;color:#1d2124;margin:0 0 12px;line-height:1.25;letter-spacing:-.4px;}
.sub{font-size:14px;color:#545b62;line-height:1.6;margin:0 0 18px;width:360px;}
.cta{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 28px;background:#0062cc;color:#fff;font-size:15px;font-weight:700;border-radius:12px;}
.sax{width:220px;height:200px;position:relative;}
.bell{position:absolute;width:70px;height:120px;right:60px;bottom:0;border-radius:0 0 40px 40px;background:linear-gradient(160deg,#d39e00,#1e7e34 90%);}
.body{position:absolute;width:22px;height:150px;right:100px;top:10px;border-radius:12px;background:linear-gradient(180deg,#d39e00,#117a8b);}
.keys{position:absolute;width:10px;height:10px;border-radius:9999px;background:#1d2124;}
.k1{right:110px;top:40px;}.k2{right:110px;top:60px;}.k3{right:110px;top:80px;}
.section{padding:0 34px;}
.sectitle{font-size:20px;font-weight:700;color:#1d2124;margin:18px 0 14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;border:1px solid #dae0e5;border-radius:8px;padding:12px;}
.thumb{height:120px;border-radius:6px;margin-bottom:10px;}
.ptitle{font-size:14px;font-weight:600;color:#1d2124;line-height:1.3;height:36px;overflow:hidden;}
.pprice{font-size:14px;font-weight:700;color:#0062cc;margin-top:6px;}
.outline{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 18px;border:2px solid #545b62;color:#545b62;font-size:12px;font-weight:600;border-radius:12px;margin-left:12px;}
</style>
<div class="nav">
<div class="logo">Yanagisawa</div>
<div class="navlinks"><span class="active">Alto</span><span>Tenor</span><span>Soprano</span><span>Accessories</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Precision, played.</h1>
<div class="sub">Hand-finished saxophones engineered with the exacting tolerances of a workshop, not a factory line.</div>
<div class="cta">Explore Instruments</div>
</div>
<div class="sax"><div class="bell"></div><div class="body"></div><div class="keys k1"></div><div class="keys k2"></div><div class="keys k3"></div></div>
</div>
<div class="section">
<div class="sectitle">Featured Instruments</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#0062cc,#1d2124)"></div><div class="ptitle">A-WO37 Alto Saxophone</div><div class="pprice">$4,299.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#1e7e34,#1d2124)"></div><div class="ptitle">T-WO20 Tenor Saxophone</div><div class="pprice">$5,199.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#117a8b,#1d2124)"></div><div class="ptitle">S-991 Soprano Saxophone</div><div class="pprice">$3,899.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#d39e00,#1d2124)"></div><div class="ptitle">Reed & Ligature Set</div><div class="pprice">$89.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b0b0b; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b0b0b; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: 0.5px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 1.2px; background: #ffffff; color: #0b0b0b;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 1.2px; background: transparent; color: #ffffff;
border: 1px solid #ffffff; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1a1a1a; color: #ffffff;
border: 1px solid #484848; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.8px; background: #b08d57; color: #0b0b0b;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background:#0b0b0b; color:#999; }
*{box-sizing:border-box;}
.cond{font-family:'Barlow Condensed', Arial, sans-serif; text-transform:uppercase;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #2a2a2a;}
.logo{color:#fff;font-size:18px;font-weight:400;letter-spacing:3px;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;}
.navlinks{display:flex;gap:24px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#999;}
.navcta{border:1px solid #ffffff;color:#fff;font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:8px 18px;border-radius:2px;}
.hero{height:290px;background:#0b0b0b;display:flex;align-items:center;padding:0 34px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:60px;top:50%;transform:translateY(-50%);width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3a3a3a,#0b0b0b 70%);border:1px solid #2a2a2a;}
.hero:after{content:'';position:absolute;right:150px;top:50%;transform:translateY(-50%);width:60px;height:14px;background:#b08d57;border-radius:2px;}
.herotext{position:relative;z-index:1;max-width:420px;}
.herotext .tag{color:#b08d57;font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;}
.herotext h1{color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:300;font-size:42px;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 12px;line-height:1.1;}
.herotext p{color:#999;font-size:14px;margin:0 0 18px;max-width:340px;}
.herocta{display:inline-block;background:#fff;color:#0b0b0b;font-size:13px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;padding:12px 26px;border-radius:2px;}
.grid{display:flex;gap:12px;padding:16px 34px 0;}
.card{width:150px;background:#1a1a1a;border:1px solid #2a2a2a;padding:10px;border-radius:2px;}
.thumb{height:95px;background:#161616;margin-bottom:8px;border-radius:2px;}
.ptitle{font-size:13px;font-weight:500;color:#fff;line-height:1.3;height:32px;overflow:hidden;}
.pbadge{display:inline-block;font-size:9px;color:#b08d57;letter-spacing:1px;text-transform:uppercase;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:11px;color:#666;border-top:1px solid #2a2a2a;letter-spacing:.5px;text-transform:uppercase;}
.footer span{margin-left:14px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Jennair</div>
<div class="navlinks"><div>Ranges</div><div>Refrigeration</div><div>Ventilation</div><div>Noir</div><div>Rise</div></div>
<div class="navcta">Find a Dealer</div>
</div>
<div class="hero">
<div class="herotext">
<div class="tag">Bound By Nothing</div>
<h1>Precision, Lit In Darkness</h1>
<p>Column refrigeration and induction ranges engineered for the architecturally serious kitchen.</p>
<div class="herocta">Explore Noir</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#222,#0b0b0b)"></div><div class="ptitle">48" Column Refrigerator — Noir</div><div class="pbadge">Noir Collection</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#161616,#3a3a3a)"></div><div class="ptitle">36" Induction Range</div><div class="pbadge">Rise Collection</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0b0b0b,#b08d57)"></div><div class="ptitle">Downdraft Ventilation System</div><div class="pbadge">Noir Collection</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#222,#161616)"></div><div class="ptitle">Wall Oven with Culinary Center</div><div class="pbadge">Rise Collection</div></div>
</div>
<div class="footer"><span>© Bound By Nothing</span><span>Find a Dealer<span> Support</span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1d4aff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1d4aff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #94a8fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e1f23; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1d4aff; color: #1e1f23;
border: 1px solid #1e1f23; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1d4aff; color: #f5f5f5;
border: 1px solid #4065fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #94a8fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1d43dc; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fdfdf8; color:#4d4f46; box-sizing:border-box;
font-family:"IBM Plex Sans", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; border-bottom:1px solid #bfc1b7; }
.brand { font-weight:800; font-size:17px; color:#23251d; }
.navlinks { display:flex; gap:20px; font-size:15px; font-weight:600; color:#23251d; }
.btn-dark { background:#1e1f23; color:#fff; border:none; border-radius:6px; padding:9px 14px; font-size:14px; font-weight:600; }
.hero { padding:38px 40px 20px; }
.hero h1 { font-size:30px; font-weight:800; letter-spacing:-0.75px; line-height:1.2; margin:0 0 10px; color:#23251d; max-width:600px; }
.hero p { font-size:16px; color:#4d4f46; margin:0 0 14px; max-width:520px; }
.row { display:flex; gap:14px; padding:0 40px 30px; }
.card { flex:1; background:#fdfdf8; border:1px solid #bfc1b7; border-radius:6px; padding:16px; }
.card h3 { font-size:16px; font-weight:700; margin:0 0 6px; color:#23251d; }
.card p { font-size:13px; color:#4d4f46; margin:0; line-height:1.5; }
.hog { width:34px; height:34px; border-radius:50%; background:#F54E00; margin-bottom:10px; position:relative; }
.hog::after { content:''; position:absolute; width:10px; height:10px; background:#fdfdf8; border-radius:50%; top:9px; left:9px; }
.tag { display:inline-block; background:#e5e7e0; color:#4d4f46; font-size:12px; font-weight:500; border-radius:4px; padding:2px 8px; margin-top:20px; margin-left:40px; }
</style></head>
<body>
<nav>
<div class="brand">🦔 PostHog</div>
<div class="navlinks"><span>Products</span><span>Docs</span><span>Pricing</span><span>Handbook</span></div>
<button class="btn-dark">Get started - free</button>
</nav>
<div class="hero">
<h1>We make dev tools for product engineers</h1>
<p>Product OS: analytics, feature flags, session replay, surveys, A/B tests — in one integrated platform.</p>
</div>
<div class="row">
<div class="card"><div class="hog"></div><h3>Product analytics</h3><p>Autocapture every event so you never have to worry about instrumenting again.</p></div>
<div class="card"><div class="hog"></div><h3>Session replay</h3><p>Watch real users struggle so you don't have to guess why they churned.</p></div>
<div class="card"><div class="hog"></div><h3>Feature flags</h3><p>Ship safely and roll back instantly when something looks wrong.</p></div>
</div>
<div class="tag">open source · self-host first-class</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #20808d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #20808d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #95c0c6; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a6873; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #20808d; color: #ffffff;
border: 1px solid #1a6873; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #20808d; color: #f5f5f5;
border: 1px solid #42939e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #95c0c6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1f7c89; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbfaf4; color:#091717; box-sizing:border-box;
font-family:"FK Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.topnav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #e4e4dc; background:#fbfaf4; }
.logo { display:flex; align-items:center; gap:9px; }
.logo-dot { width:22px; height:22px; border-radius:7px; background:linear-gradient(135deg,#34b4c4,#13343b); }
.brand { font-size:15px; font-weight:600; letter-spacing:-0.2px; }
.tabs { display:flex; gap:26px; }
.tab { font-size:13px; font-weight:500; color:#5c6a6a; padding-bottom:16px; margin-top:16px; }
.tab.active { color:#091717; border-bottom:2px solid #20808d; }
.navright { display:flex; align-items:center; gap:10px; }
.pro-badge { background:#13343b; color:#fff; font-size:11px; font-weight:600; letter-spacing:0.03em;
border-radius:6px; padding:3px 9px; }
.avatar { width:26px; height:26px; border-radius:9999px; background:#e5f2f2; border:1px solid #e4e4dc; }
.wrap { display:flex; gap:24px; padding:22px 32px 0; height:calc(640px - 56px); }
.main { flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; }
.rail { width:214px; flex-shrink:0; display:flex; flex-direction:column; gap:10px; padding-top:2px; }
.thread-title { font-size:21px; font-weight:600; letter-spacing:-0.2px; margin:0; line-height:1.3; }
.answer-card { background:#fcfcf9; border:1px solid #efefe9; border-radius:12px; padding:16px 20px; }
.answer-card p { font-size:14px; line-height:1.62; color:#2e3a3a; margin:0 0 10px; }
.answer-card p:last-child { margin-bottom:0; }
.cite { display:inline-block; background:#e5f2f2; color:#13343b; font-size:10px; font-weight:600;
border-radius:6px; padding:0px 5px; margin-left:2px; }
.pillrow { display:flex; gap:8px; }
.pill { background:#ffffff; color:#2e3a3a; font-size:12px; font-weight:500; border:1px solid #e4e4dc;
border-radius:9999px; padding:6px 13px; }
.pill.active { border-color:#20808d; color:#13343b; background:#e5f2f2; }
.composer { margin-top:auto; margin-bottom:20px; background:#ffffff; border:1px solid #e4e4dc; border-radius:16px;
padding:14px 16px; display:flex; align-items:center; justify-content:space-between; }
.composer .ph { font-size:15px; color:#8a9494; }
.ask-btn { background:#20808d; color:#fff; border:none; border-radius:10px; padding:8px 16px;
font-size:13px; font-weight:500; }
.rail-label { font-size:12px; font-weight:600; color:#5c6a6a; text-transform:uppercase; letter-spacing:0.04em; }
.source-card { background:#ffffff; border:1px solid #e4e4dc; border-radius:10px; padding:10px 12px;
display:flex; flex-direction:column; gap:5px; }
.src-top { display:flex; align-items:center; gap:7px; }
.favicon { width:14px; height:14px; border-radius:4px; flex-shrink:0; }
.fv1 { background:#4b5a66; } .fv2 { background:#6e5a86; } .fv3 { background:#a86a4b; }
.domain { font-size:11px; color:#5c6a6a; }
.src-title { font-size:12px; color:#091717; line-height:1.4; }
.mode-note { font-size:11px; color:#8a9494; margin:2px 0 0; }
</style></head>
<body>
<nav class="topnav">
<div class="logo"><span class="logo-dot"></span><span class="brand">Perplexity</span></div>
<div class="tabs">
<span class="tab active">Home</span>
<span class="tab">Discover</span>
<span class="tab">Spaces</span>
<span class="tab">Library</span>
</div>
<div class="navright">
<span class="pro-badge">PRO</span>
<span class="avatar"></span>
</div>
</nav>
<div class="wrap">
<div class="main">
<h1 class="thread-title">Why does Perplexity show its sources?</h1>
<div class="answer-card">
<p>Perplexity is built to answer like a careful researcher, not a search box.<span class="cite">1</span> Every generated answer is grounded in retrieved sources rather than pure recall, so a claim always has a path back to where it came from.<span class="cite">2</span></p>
<p>Instead of ten blue links, you get synthesized, readable prose — with citations woven directly into the sentence, not bolted on as a footnote panel.<span class="cite">3</span></p>
</div>
<div class="pillrow">
<span class="pill active">Web</span>
<span class="pill">Academic</span>
<span class="pill">Writing</span>
<span class="pill">Video</span>
</div>
<p class="mode-note">Focus mode changes which sources Perplexity is allowed to cite.</p>
<div class="composer">
<span class="ph">Ask anything…</span>
<button class="ask-btn">Ask</button>
</div>
</div>
<div class="rail">
<span class="rail-label">Sources</span>
<div class="source-card">
<div class="src-top"><span class="favicon fv1"></span><span class="domain">researchweekly.org</span></div>
<span class="src-title">How retrieval-augmented answers reduce hallucination</span>
</div>
<div class="source-card">
<div class="src-top"><span class="favicon fv2"></span><span class="domain">quarterlyreview.io</span></div>
<span class="src-title">Citations as a first-class part of the reading experience</span>
</div>
<div class="source-card">
<div class="src-top"><span class="favicon fv3"></span><span class="domain">fieldnotes.dev</span></div>
<span class="src-title">Designing answer engines people can verify</span>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #35434e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #35434e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #35434e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #35434e; color: #ffffff;
border: none; border-radius: 12px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #f9fafb; color: #35434e;
border: 1px solid #35434e; border-radius: 12px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9fafb; color: #485c6d;
border: 1px solid #c8ccd0; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.2px; background: #d43747; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Frey</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:'Instrument Sans',-apple-system,'Segoe UI',Roboto,sans-serif; color:#35434e; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e6e6e6;}
.logo{font-size:20px;font-weight:600;letter-spacing:-0.3px;color:#35434e;}
.navlinks{display:flex;gap:28px;font-size:14px;font-weight:500;color:#35434e;}
.navlinks span:first-child{color:#108474;}
.icons{display:flex;gap:14px;font-size:13px;color:#485c6d;}
.hero{display:flex;align-items:center;padding:36px 32px;gap:36px;}
.hero-copy{flex:1;}
.eyebrow{display:inline-block;background:#deecf2;border:1px solid #b9d7e4;color:#485c6d;font-size:12px;font-weight:600;padding:4px 10px;border-radius:12px;margin-bottom:14px;}
h1{font-size:32px;font-weight:600;line-height:1.25;letter-spacing:-0.5px;margin:0 0 12px;color:#35434e;}
.sub{font-size:15px;color:#485c6d;line-height:1.5;margin:0 0 20px;max-width:400px;}
.btnrow{display:flex;gap:12px;}
.btn-primary{background:#35434e;color:#fff;border:none;border-radius:12px;padding:12px 24px;font-size:15px;font-weight:500;}
.btn-secondary{background:#f9fafb;color:#35434e;border:1px solid #e6e6e6;border-radius:12px;padding:12px 24px;font-size:15px;font-weight:500;}
.hero-visual{width:340px;height:220px;border-radius:12px;background:linear-gradient(135deg,#108474 0%,#35434e 100%);position:relative;overflow:hidden;}
.bottle{position:absolute;bottom:20px;left:40px;width:60px;height:130px;background:#f9fafb;border-radius:10px 10px 4px 4px;box-shadow:0 8px 20px rgba(0,0,0,0.25);}
.bottle::before{content:'';position:absolute;top:-14px;left:20px;width:20px;height:16px;background:#d43747;border-radius:3px;}
.bottle2{position:absolute;bottom:20px;left:120px;width:60px;height:150px;background:#deecf2;border-radius:10px 10px 4px 4px;box-shadow:0 8px 20px rgba(0,0,0,0.25);}
.bottle2::before{content:'';position:absolute;top:-14px;left:20px;width:20px;height:16px;background:#f8d88e;border-radius:3px;}
.badge-eco{position:absolute;top:16px;right:16px;background:#108474;color:#fff;font-size:11px;font-weight:600;letter-spacing:0.2px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.products{padding:8px 32px 0;}
.prow-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
.prow-head h2{font-size:20px;font-weight:500;margin:0;color:#35434e;}
.prow-head span{font-size:13px;color:#108474;font-weight:500;}
.grid{display:flex;gap:16px;}
.card{flex:1;background:#fff;border-radius:12px;padding:0 0 12px;}
.card-img{height:110px;border-radius:12px 12px 0 0;position:relative;}
.c1 .card-img{background:#deecf2;}
.c2 .card-img{background:#f7f7f7;}
.c3 .card-img{background:#e9f3f0;}
.c4 .card-img{background:#faf1e0;}
.tag{position:absolute;top:8px;left:8px;font-size:11px;font-weight:600;letter-spacing:0.2px;text-transform:uppercase;padding:2px 8px;border-radius:4px;color:#fff;}
.c1 .tag{background:#d43747;}
.c2 .tag{background:#108474;}
.c3 .tag{background:#f8d88e;color:#35434e;}
.card-title{font-size:16px;font-weight:600;padding:10px 12px 2px;color:#35434e;}
.card-price{font-size:16px;padding:0 12px;color:#35434e;}
</style>
<div class="nav">
<div class="logo">Frey</div>
<div class="navlinks"><span>Laundry</span><span>Home</span><span>Bundles</span><span>Our Story</span></div>
<div class="icons">Search Account Cart (2)</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="eyebrow">Plastic-free refills</div>
<h1>Laundry care that<br>smells like clean water</h1>
<p class="sub">Plant-based detergent, fabric softener and dryer sheets — concentrated formulas that skip the synthetic fragrance and the plastic jug.</p>
<div class="btnrow">
<button class="btn-primary">Shop Detergent</button>
<button class="btn-secondary">Take the Quiz</button>
</div>
</div>
<div class="hero-visual">
<div class="badge-eco">Eco</div>
<div class="bottle"></div>
<div class="bottle2"></div>
</div>
</div>
<div class="products">
<div class="prow-head"><h2>Best sellers</h2><span>View all</span></div>
<div class="grid">
<div class="card c1"><div class="card-img"><div class="tag">Sale</div></div><div class="card-title">Lavender Detergent</div><div class="card-price">$24.99</div></div>
<div class="card c2"><div class="card-img"><div class="tag">Eco</div></div><div class="card-title">Fabric Softener</div><div class="card-price">$18.99</div></div>
<div class="card c3"><div class="card-img"><div class="tag">New</div></div><div class="card-title">Dryer Sheets</div><div class="card-price">$12.99</div></div>
<div class="card c4"><div class="card-img"></div><div class="card-title">Starter Bundle</div><div class="card-price">$49.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7a3bff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7a3bff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bea1fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6429e6; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7a3bff; color: #ffffff;
border: 1px solid #6429e6; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7a3bff; color: #f5f5f5;
border: 1px solid #8e59fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bea1fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7638fb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0f172a; box-sizing:border-box; font-family:-apple-system,"Segoe UI",Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; border-bottom:1px solid #e2e8f0; }
.brand { font-weight:700; font-size:17px; }
.search { width:280px; height:36px; border-radius:8px; background:#f5f5f5; display:flex; align-items:center;
padding:0 14px; color:#77797b; font-size:13px; }
.btn { background:#7a3bff; color:#fff; border:none; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:600; }
.tabs { display:flex; gap:18px; padding:10px 30px; border-bottom:1px solid #e2e8f0; font-size:14px; font-weight:600; color:#575b5c; }
.tabs span.active { color:#7a3bff; border-bottom:2px solid #7a3bff; padding-bottom:8px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:18px 30px; }
.card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:14px; }
.cover { height:90px; border-radius:8px; margin-bottom:10px; }
.c1 .cover { background:linear-gradient(150deg,#d7c6ff,#7a3bff); }
.c2 .cover { background:linear-gradient(150deg,#c6e3ff,#4a90d9); }
.c3 .cover { background:linear-gradient(150deg,#c6ffe0,#38b57e); }
.best { display:inline-block; background:#7a3bff; color:#fff; font-size:10px; font-weight:700; border-radius:4px; padding:2px 6px; margin-bottom:6px; }
.ctitle { font-size:15px; font-weight:600; margin:0 0 6px; line-height:1.3; }
.cmeta { font-size:12px; color:#77797b; }
.membership { margin:6px 30px; background:#f1ebff; border-radius:12px; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; }
.membership h4 { margin:0; font-size:16px; color:#0f172a; }
.membership p { margin:2px 0 0; font-size:12px; color:#575b5c; }
</style></head>
<body>
<nav>
<div class="brand">PUBLY</div>
<div class="search">What do you want to learn today?</div>
<button class="btn">Start Membership</button>
</nav>
<div class="tabs">
<span class="active">BEST</span><span>Series</span><span>Templates</span><span>Career</span>
</div>
<div class="grid">
<div class="card c1"><div class="cover"></div><span class="best">BEST</span><div class="ctitle">7 Data Metrics Every PM Should Know</div><div class="cmeta">Alex · 8 min</div></div>
<div class="card c2"><div class="cover"></div><span class="best">NEW</span><div class="ctitle">A Marketer's Guide to Salary Negotiation</div><div class="cmeta">Sarah · 6 min</div></div>
<div class="card c3"><div class="cover"></div><span class="best">Series</span><div class="ctitle">From Junior to Lead: A Career Transition</div><div class="cmeta">Jamie · 10 min</div></div>
</div>
<div class="membership">
<div><h4>Fresh career knowledge, delivered monthly</h4><p>PUBLY Membership for steady growth</p></div>
<button class="btn">3-Day Free Trial</button>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7e7b79; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #e83f42; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #757575;
border: 1px solid #e83f42; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7e7b79; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #e83f42; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Trebuchet MS',Arial,sans-serif; color:#222222; }
*{box-sizing:border-box;}
.nav{height:60px;border-bottom:1px solid #e1ded9;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:16px;font-weight:500;letter-spacing:0.4px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;}
.navlinks div:first-child{color:#e83f42;}
.search{height:32px;width:200px;background:#f7f7f7;border:1px solid #e1ded9;font-size:11px;color:#757575;display:flex;align-items:center;padding:0 12px;}
.hero{padding:36px 32px 18px;max-width:520px;}
.hero h1{font-size:28px;font-weight:500;margin:0 0 10px;letter-spacing:-0.3px;}
.hero p{font-size:14px;color:#757575;margin:0 0 18px;line-height:1.5;}
.cta{display:inline-block;background:#e83f42;color:#fff;font-size:12px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:13px 26px;}
.grid{display:flex;gap:16px;padding:16px 32px 0;}
.card{width:150px;}
.thumb{width:150px;height:150px;background:#f7f7f7;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#e83f42;color:#fff;font-size:9px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;}
.pname{font-size:13px;font-weight:500;margin-top:8px;}
.pprice{font-size:13px;color:#757575;margin-top:2px;}
.sizedd{font-size:11px;color:#757575;border:1px solid #e1ded9;padding:4px 8px;margin-top:6px;display:inline-block;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#404040;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;}
.footer span{margin-left:16px;color:#dedede;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Ordinary</div>
<div class="navlinks"><div>Serums</div><div>Skincare</div><div>Hair & Body</div><div>The Regimen</div></div>
<div class="search">Search ingredients...</div>
</div>
<div class="hero">
<h1>Clinical Formulations, Integrity-Driven Function</h1>
<p>Direct, effective ingredients. No performance, no fragrance, no filler.</p>
<div class="cta">Shop All</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f7f7f7,#e1ded9)"></div><div class="pname">Niacinamide 10% + Zinc 1%</div><div class="pprice">$12.90</div><div class="sizedd">30ml ▾</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e1ded9,#f9f9f9)"></div><div class="badge">Sale</div><div class="pname">Hyaluronic Acid 2% + B5</div><div class="pprice">$8.90</div><div class="sizedd">30ml ▾</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f7f7f7,#d8d8d8)"></div><div class="pname">AHA 30% + BHA 2% Peeling</div><div class="pprice">$10.60</div><div class="sizedd">30ml ▾</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e1ded9,#f7f7f7)"></div><div class="pname">Squalane Cleanser</div><div class="pprice">$11.30</div><div class="sizedd">150ml ▾</div></div>
</div>
<div class="footer"><span>© The Regimen</span><span>Ingredient Guide<span> Chemistry<span> Support</span></span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.33; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #dd1111; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #f5f5f5; color: #222222;
border: 1px solid #dd1111; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #222222;
border: 1px solid #c0c0c0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ff6600; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; font-family:'OpenSans-Regular','Helvetica Neue',Helvetica,Arial,sans-serif; color:#555555; }
*{box-sizing:border-box;}
.nav{height:60px;background:#222222;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:'GothamBook-Regular','Helvetica Neue',sans-serif;font-size:20px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:16px;font-size:14px;font-weight:600;color:#fff;}
.navlinks span:first-child{color:#dd1111;}
.sec{padding:24px 40px 0;}
.sectitle{font-family:'GothamBook-Regular',sans-serif;font-size:24px;margin:0 0 16px;color:#222;}
.grid{display:flex;gap:16px;}
.card{width:230px;background:#fff;border-radius:8px;padding:16px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:0.5px;padding:2px 8px;border-radius:2px;color:#fff;}
.thumb{height:110px;background:#f5f5f5;border-radius:4px;margin-bottom:10px;position:relative;}
.stick{position:absolute;left:70px;top:20px;width:20px;height:60px;background:#dd1111;border-radius:9999px;}
.stickbase{position:absolute;left:50px;top:75px;width:60px;height:20px;background:#222;border-radius:9999px;}
.compat{display:flex;gap:6px;margin-bottom:8px;}
.cbadge{background:#f7f7f7;color:#555;font-size:11px;padding:4px 10px;border-radius:4px;}
.pname{font-size:16px;font-weight:600;margin:0 0 4px;color:#222;}
.pprice{font-family:'OpenSans-Bold',sans-serif;font-size:18px;font-weight:700;color:#222;}
.heroband{height:180px;background:#222222;display:flex;align-items:center;padding:0 40px;}
.herotext{width:400px;}
h1{font-family:'GothamBook-Regular',sans-serif;font-size:32px;font-weight:400;color:#fff;margin:0 0 10px;}
.sub{font-size:14px;color:#aaa;margin:0 0 16px;max-width:340px;}
.cta{display:inline-block;background:#dd1111;color:#fff;font-size:14px;font-weight:700;letter-spacing:0.5px;padding:12px 24px;border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Qanba</div>
<div class="navlinks"><span>Arcade Sticks</span><span>Buttons</span><span>Parts</span><span>Compatibility</span></div>
</div>
<div class="heroband">
<div class="herotext">
<h1>Tournament-Grade Arcade Sticks</h1>
<p class="sub">Precision-tuned fight sticks and components built for competitive players.</p>
<div class="cta">Shop Sticks</div>
</div>
</div>
<div class="sec">
<div class="sectitle">Featured Products</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#ff6600">Limited</span><div class="thumb"><div class="stickbase"></div><div class="stick"></div></div><div class="compat"><span class="cbadge">PS5</span><span class="cbadge">PC</span></div><div class="pname">Drone 2 Arcade Joystick</div><div class="pprice">$99.00</div></div>
<div class="card"><span class="badge" style="background:#005ab0">New</span><div class="thumb"><div class="stickbase"></div><div class="stick" style="background:#005ab0"></div></div><div class="compat"><span class="cbadge">Xbox</span><span class="cbadge">PC</span></div><div class="pname">Obsidian Fight Stick</div><div class="pprice">$149.00</div></div>
<div class="card"><span class="badge" style="background:#dd1111">Sale</span><div class="thumb"><div class="stickbase"></div><div class="stick" style="background:#222"></div></div><div class="compat"><span class="cbadge">PS4</span><span class="cbadge">PC</span></div><div class="pname">Q4RAF Mini Stick</div><div class="pprice">$59.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.35; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #0a1f8f; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #f7f7f7; color: #0a1f8f;
border: 1px solid #0a1f8f; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f7f7f7; color: #2e3133;
border: 1px solid #bebebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #e63235; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#f7f7f7; color:#2e3133; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;background:#0a1f8f;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:19px;font-weight:600;color:#fff;}
.search{width:220px;height:38px;border-radius:9999px;background:rgba(255,255,255,0.15);}
.cart{font-size:13px;font-weight:500;color:#fff;}
.hero{height:220px;display:flex;background:#fff;}
.herotxt{width:48%;padding:24px 34px;display:flex;flex-direction:column;justify-content:center;}
.herotxt h1{font-size:28px;font-weight:600;color:#0a1f8f;margin:0 0 10px;line-height:1.25;}
.herotxt p{font-size:14px;margin:0 0 18px;max-width:280px;}
.cta{width:fit-content;font-size:14px;font-weight:500;background:#0a1f8f;color:#fff;padding:12px 28px;border-radius:9999px;}
.sticks{width:52%;display:flex;align-items:center;justify-content:center;gap:16px;}
.stick{width:42px;height:130px;border-radius:12px;position:relative;}
.stick:before{content:'';position:absolute;top:-10px;left:6px;right:6px;height:16px;border-radius:8px 8px 0 0;background:rgba(0,0,0,0.15);}
.sec{padding:20px 34px 0;}
.sec h2{font-size:17px;font-weight:600;color:#0a1f8f;margin:0 0 14px;}
.grid{display:flex;gap:14px;}
.card{width:210px;background:#fff;border-radius:12px;padding:12px;position:relative;}
.badge{position:absolute;top:20px;left:20px;font-size:10px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:#fff;background:#e40e47;padding:2px 8px;border-radius:4px;}
.cimg{height:90px;border-radius:8px;margin-bottom:8px;}
.ctitle{font-size:14px;font-weight:600;}
.cprice{font-size:13px;margin-top:4px;color:#707070;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;background:#0a1f8f;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:11px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Native</div>
<div class="search"></div>
<div class="cart">Cart (0)</div>
</div>
<div class="hero">
<div class="herotxt">
<h1>Clean. Simple.<br>Effective.</h1>
<p>Aluminum-free deodorant made with plant-derived ingredients you can pronounce.</p>
<div class="cta">Shop Deodorant</div>
</div>
<div class="sticks"><div class="stick" style="background:linear-gradient(180deg,#fff,#e63235)"></div><div class="stick" style="background:linear-gradient(180deg,#fff,#0a1f8f)"></div><div class="stick" style="background:linear-gradient(180deg,#fff,#4d9c4c)"></div></div>
</div>
<div class="sec">
<h2>Bestselling Scents</h2>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="cimg" style="background:linear-gradient(135deg,#e63235,#f5f5f5)"></div><div class="ctitle">Coconut & Vanilla</div><div class="cprice">$13.99</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#0a1f8f,#f5f5f5)"></div><div class="ctitle">Eucalyptus & Mint</div><div class="cprice">$13.99</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#4d9c4c,#f5f5f5)"></div><div class="ctitle">Cucumber & Mint</div><div class="cprice">$13.99</div></div>
</div>
</div>
<div class="footer"><span>Free Shipping on Subscriptions</span><span>Ingredients Reviews</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #1a1919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #1a1919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 26px; font-weight: 400; line-height: 1.3; margin: 0; color: #1a1919; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0.12em; background: #1c274c; color: #f8f8f8;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0.12em; background: #f8f8f8; color: #1a1919;
border: 1px solid #1c274c; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f8f8; color: #1a1919;
border: 1px solid #d4d4d4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.14em; background: #c4bdb7; color: #1a1919;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f8f8; color:#1a1919; box-sizing:border-box;
font-family:'Bricolage Grotesque', Inter, Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.caps { font-family:'Arial', sans-serif; letter-spacing:0.12em; text-transform:uppercase; font-size:12px; }
.serif { font-family:'Times New Roman', Georgia, serif; }
nav { flex:0 0 auto; height:60px; display:flex; align-items:center; justify-content:center; position:relative;
border-bottom:1px solid #d4d4d4; }
.brand { font-size:13px; letter-spacing:0.12em; text-transform:uppercase; margin:0; }
.navlinks { position:absolute; left:30px; display:flex; gap:20px; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; }
.cart { position:absolute; right:30px; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; }
.hero { flex:0 0 auto; min-height:220px; display:flex; align-items:flex-end; padding:20px 30px;
background:linear-gradient(160deg,#1c274c 0%, #303030 55%, #1a1919 100%); color:#f8f8f8; position:relative; }
.hero .eyebrow { font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:#c4bdb7; margin:0 0 8px; }
.hero h1 { font-family:'Times New Roman', serif; font-weight:400; font-size:42px; margin:0; letter-spacing:-0.5px; }
main { flex:1 1 auto; display:flex; padding:18px 30px; gap:18px; min-height:0; }
.card { flex:1; display:flex; flex-direction:column; gap:8px; }
.thumb { flex:1; min-height:0; }
.t1 { background:#c4bdb7; }
.t2 { background:#8b0000; }
.t3 { background:#006400; }
.name { font-size:13px; letter-spacing:0.1em; text-transform:uppercase; margin:0; }
.price { font-family:'Times New Roman', serif; font-size:15px; margin:0; }
.swatches { display:flex; gap:6px; }
.sw { width:18px; height:18px; border-radius:999px; }
.sw.a { background:#c4bdb7; }
.sw.b { background:#dcd7d4; }
.sw.c { background:#8b0000; box-shadow:0 0 0 2px #f8f8f8, 0 0 0 3px #1a1919; }
.sw.d { background:#006400; }
.sw.e { background:#ee9441; }
footer { flex:0 0 auto; height:52px; background:#1a1919; color:#c4bdb7; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:11px; letter-spacing:0.06em; }
</style></head>
<body>
<nav>
<div class="navlinks"><span>Notebooks</span><span>Planners</span></div>
<p class="brand">Appointed</p>
<div class="cart">Cart</div>
</nav>
<div class="hero">
<div>
<p class="eyebrow">American Made Since 2013</p>
<h1>The Daily Planner</h1>
</div>
</div>
<main>
<div class="card">
<div class="thumb t1"></div>
<p class="name">Stone Two-Tone Planner</p>
<p class="price serif">$58.00</p>
<div class="swatches"><span class="sw a"></span><span class="sw c"></span><span class="sw d"></span></div>
</div>
<div class="card">
<div class="thumb t2"></div>
<p class="name">Maroon Notebook, Ruled</p>
<p class="price serif">$34.00</p>
<div class="swatches"><span class="sw c"></span><span class="sw b"></span></div>
</div>
<div class="card">
<div class="thumb t3"></div>
<p class="name">Hunter Field Journal</p>
<p class="price serif">$28.00</p>
<div class="swatches"><span class="sw d"></span><span class="sw e"></span><span class="sw a"></span></div>
</div>
</main>
<footer>
<span>© Appointed</span>
<span>Shipping — Returns — Contact</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1d70b8; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1d70b8; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #94b9da; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffdd00; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1d70b8; color: #ffdd00;
border: 1px solid #ffdd00; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1d70b8; color: #f5f5f5;
border: 1px solid #4085c2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #94b9da; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #41819b; color: #ffdd00;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0b0c0c; box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
header.crown { background:#1d70b8; color:#ffffff; padding:12px 32px;
display:flex; align-items:center; justify-content:space-between; }
.crown .brand { font-size:22px; font-weight:700; letter-spacing:0.2px; }
.crown .tag { font-size:13px; opacity:0.85; }
.banner { background:#1d70b8; color:#ffffff; padding:14px 32px; font-size:16px; font-weight:400;
border-bottom:5px solid #1d70b8; }
.banner b { display:block; font-size:13px; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:2px; }
.service-header { border-bottom:1px solid #cecece; padding:6px 32px; font-size:16px; color:#484949; }
main { padding:24px 32px; display:flex; gap:32px; }
.content { flex:2; }
.content h1 { font-size:36px; font-weight:700; line-height:1.11; margin:0 0 16px; }
.content p.lead { font-size:19px; line-height:1.31; margin:0 0 20px; color:#0b0c0c; }
.task-list { list-style:none; margin:0 0 24px; padding:0; border-top:1px solid #cecece; }
.task-list li { display:flex; align-items:center; justify-content:space-between;
padding:14px 0; border-bottom:1px solid #cecece; font-size:19px; }
.tag { display:inline-block; background:#d2e2f1; color:#0f385c; border-radius:1px;
padding:2px 8px 3px; font-size:16px; font-weight:400; }
.tag.grey { background:#f3f3f3; color:#0b0c0c; }
.tag.green { background:#cce2d8; color:#00703c; }
.btn { display:inline-block; border-radius:0px; font-family:Arial, sans-serif; cursor:default; }
.btn-primary { background:#0f7a52; color:#ffffff; padding:8px 10px 7px; font-size:19px;
box-shadow:0 2px 0 #083d29; border:none; }
.btn-secondary { background:#f3f3f3; color:#0b0c0c; padding:8px 10px 7px; font-size:19px;
box-shadow:0 2px 0 #858686; border:none; margin-left:8px; }
.inset { border-left:10px solid #cecece; padding:15px; margin:0 0 20px; font-size:16px; line-height:1.4; }
aside.rail { flex:1; }
aside h2 { font-size:19px; font-weight:700; margin:0 0 10px; }
aside ul { list-style:none; margin:0; padding:0; }
aside li { padding:8px 0; border-bottom:1px solid #cecece; font-size:16px; color:#1a65a6; }
aside li.visited { color:#54319f; }
.focus-demo { display:inline-block; margin-top:20px; padding:8px 10px 7px; background:#f3f3f3;
color:#0b0c0c; font-size:16px; outline:3px solid #ffdd00; box-shadow:0 -2px #ffdd00, 0 4px #0b0c0c; }
footer { border-top:1px solid #cecece; padding:12px 32px; display:flex; justify-content:space-between;
font-size:13px; color:#484949; }
</style></head>
<body>
<header class="crown">
<span class="brand">GOV.UK</span>
<span class="tag">GOV.UK</span>
</header>
<div class="banner">
<b>Important</b>
Your application has been received
</div>
<div class="service-header">Check your State Pension</div>
<main>
<div class="content">
<h1>Apply for Universal Credit</h1>
<p class="lead">You can use this service to check your eligibility and start a new claim.</p>
<ul class="task-list">
<li>Check eligibility <span class="tag green">Completed</span></li>
<li>Create an account <span class="tag">In progress</span></li>
<li>Provide your details <span class="tag grey">Cannot start yet</span></li>
<li>Confirm and send <span class="tag grey">Cannot start yet</span></li>
</ul>
<div class="inset">
For example, if you were born on 27 March 2007, enter it as 27 3 2007.
</div>
<button class="btn btn-primary">Save and continue</button>
<button class="btn btn-secondary">Find address</button>
<div class="focus-demo">Continue</div>
</div>
<aside class="rail">
<h2>Related content</h2>
<ul>
<li>Check your Income Tax</li>
<li>Report a change of address</li>
<li class="visited">Get help with claims</li>
<li>Contact your local council</li>
</ul>
</aside>
</main>
<footer>
<span>© GOV.UK</span>
<span>All content is available under the Open Government Licence</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0064d2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #0064d2;
border: 1px solid #0064d2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6e6f8; color: #0064d2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#FFFFFF; color:#191919; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; display:flex; padding:24px 36px 0; gap:40px; }
.gallery { width:340px; height:340px; border-radius:8px; background:linear-gradient(135deg,#dfe6ee,#aebccb); position:relative; flex-shrink:0; }
.pcount { position:absolute; bottom:10px; right:10px; background:rgba(0,0,0,0.5); color:#fff; font-size:12px; padding:3px 8px; border-radius:4px; }
.dots { position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:4px; }
.dots span { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.6); }
.dots span.on { background:#fff; }
.detail { flex:1; padding-top:4px; }
.title { font-size:22px; font-weight:700; letter-spacing:-0.2pt; line-height:1.3; }
.pricebig { font-size:24px; font-weight:700; margin-top:12px; }
.badges { display:flex; gap:8px; margin-top:10px; }
.badge { font-size:12px; font-weight:700; text-transform:uppercase; padding:4px 8px; border-radius:4px; }
.badge.bin { background:rgba(0,100,210,0.10); color:#0064D2; }
.badge.bo { color:#86B817; padding-left:0; }
.timeleft { margin-top:8px; font-size:13px; font-weight:700; color:#E53238; }
.ctarow { display:flex; gap:10px; margin-top:18px; }
.cta-primary { background:#0064D2; color:#fff; padding:15px 28px; border-radius:999px; font-weight:700; font-size:16px; }
.cta-sec { background:#fff; border:1.5px solid #0064D2; color:#0064D2; padding:13px 24px; border-radius:999px; font-weight:700; font-size:15px; }
.seller { margin-top:24px; border-top:1px solid #E5E5E5; padding-top:16px; display:flex; justify-content:space-between; align-items:center; }
.seller .nm { font-weight:700; font-size:15px; }
.seller .fb { font-size:13px; color:#707070; margin-top:2px; }
.stars { color:#F5AF02; }
.outline-btn { border:1px solid #E5E5E5; border-radius:999px; padding:8px 16px; font-size:14px; font-weight:600; }
</style>
</head>
<body>
<div class="stage">
<div class="gallery">
<div class="pcount">1 / 9</div>
<div class="dots"><span class="on"></span><span></span><span></span><span></span></div>
</div>
<div class="detail">
<div style="font-size:12px;font-weight:700;color:#0064D2;text-transform:uppercase;letter-spacing:0.3pt;margin-bottom:6px">eBay (iOS)</div>
<div class="title">Vintage Leica M3 35mm Rangefinder Camera — Fully Serviced</div>
<div class="pricebig">$1,249.00</div>
<div class="badges"><span class="badge bin">Buy It Now</span><span class="badge bo">or Best Offer</span></div>
<div class="timeleft">Time left: 4h 12m left</div>
<div style="font-size:13px;color:#707070;margin-top:6px">Brand New · Free returns · Free shipping</div>
<div class="ctarow">
<div class="cta-primary">Buy It Now</div>
<div class="cta-sec">Add to cart</div>
</div>
<div class="seller">
<div><div class="nm">camera_relics_co</div><div class="fb"><span class="stars">★★★★★</span> 99.2% positive (12,481)</div></div>
<div class="outline-btn">Visit store</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfafa; color: #333333;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfafa; color: #333333;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; letter-spacing: 0.3px; margin: 0; color: #333333; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #915a05; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fcfafa; color: #333333;
border: 1px solid #915a05; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfafa; color: #1c1b1b;
border: 1px solid #cac8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ee682f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:flex; flex-direction:column; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcfafa; color:#333333; box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 42px;
border-bottom:1px solid #dddddd; }
.brand { font-size:18px; font-weight:300; color:#1c1b1b; letter-spacing:1px; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:12px; font-weight:400; color:#777777; letter-spacing:0.3px; }
.cart { border:1px solid #915a05; color:#915a05; font-size:11px; font-weight:400; padding:6px 14px; border-radius:4px; }
.hero { display:flex; align-items:center; gap:40px; padding:30px 42px 22px; }
.htext { max-width:380px; }
.htext h1 { font-size:30px; font-weight:300; color:#1c1b1b; margin:0 0 12px; line-height:1.3; letter-spacing:0.3px; }
.htext p { font-size:14px; color:#333333; line-height:1.6; margin:0 0 18px; }
.btn { display:inline-block; background:#915a05; color:#fff; font-size:13px; font-weight:400; padding:10px 22px; border-radius:4px; }
.heroimg { width:220px; height:150px; border-radius:4px; flex-shrink:0; background:radial-gradient(circle at 40% 35%,#b74205,#915a05 80%);
border:1px solid #dddddd; }
.section { padding:0 42px; }
.section h2 { font-size:17px; font-weight:300; color:#1c1b1b; margin:0 0 14px; letter-spacing:0.3px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.card { border:1px solid #dddddd; border-radius:4px; padding:12px; }
.cover { height:74px; border-radius:4px; margin-bottom:10px; }
.h1c .cover { background:radial-gradient(circle at 40% 35%,#c99a4a,#915a05 80%); }
.h2c .cover { background:radial-gradient(circle at 40% 35%,#a8b5ae,#75867e 80%); }
.h3c .cover { background:radial-gradient(circle at 40% 35%,#e8956a,#b74205 80%); }
.h4c .cover { background:radial-gradient(circle at 40% 35%,#3a3a3a,#1c1b1b 80%); }
.card .t { font-size:13px; font-weight:400; color:#1c1b1b; margin:0 0 4px; }
.card .p { font-size:12px; color:#777777; }
.trust { margin-top:auto; flex-shrink:0; display:flex; padding:14px 42px; border-top:1px solid #dddddd; }
.trust span { flex:1; text-align:center; font-size:11px; color:#777777; }
</style></head>
<body>
<nav>
<div class="brand">Haand</div>
<div class="navlinks"><span>Dinnerware</span><span>Vases</span><span>Serveware</span><span>Studio Visits</span></div>
<div class="cart">Cart (1)</div>
</nav>
<div class="hero">
<div class="htext">
<h1>Hand-thrown porcelain, fired slow.</h1>
<p>Every piece is thrown, glazed, and fired by hand in our North Carolina studio — no two are exactly alike, and that's the point.</p>
<span class="btn">Shop Dinnerware</span>
</div>
<div class="heroimg"></div>
</div>
<div class="section">
<h2>From the Studio</h2>
<div class="grid">
<div class="card h1c"><div class="cover"></div><div class="t">Dune Dinner Plate</div><div class="p">$48.00</div></div>
<div class="card h2c"><div class="cover"></div><div class="t">Sage Serving Bowl</div><div class="p">$86.00</div></div>
<div class="card h3c"><div class="cover"></div><div class="t">Terracotta Vase</div><div class="p">$120.00</div></div>
<div class="card h4c"><div class="cover"></div><div class="t">Stoneware Mug</div><div class="p">$32.00</div></div>
</div>
</div>
<div class="trust"><span>Made in North Carolina</span><span>Hand-Thrown, Not Molded</span><span>Ships Direct from Studio</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #222021;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #222021;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.3px; margin: 0; color: #222021; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; background: #cc0000; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; background: #108474; color: #ffffff;
border: 1px solid #cc0000; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9fafb; color: #222021;
border: 1px solid #c3c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #800000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:'Figtree','Segoe UI',system-ui,-apple-system,sans-serif; color:#222021; }
*{box-sizing:border-box;}
.nav{height:64px;background:#108474;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-size:20px;font-weight:600;}
.navlinks{display:flex;gap:8px;}
.navlinks span{color:#fff;font-size:15px;font-weight:600;padding:8px 14px;border-radius:8px;}
.navlinks span.active{background:rgba(255,255,255,.18);}
.cart{background:#cc0000;color:#fff;width:36px;height:36px;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-size:13px;}
.hero{height:150px;background:#108474;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;}
.hero h1{color:#fff;font-size:26px;font-weight:600;}
.hero span{background:#ffbd00;color:#222021;font-size:14px;font-weight:600;text-transform:uppercase;padding:10px 24px;border-radius:8px;}
.catrow{display:flex;gap:10px;padding:16px 32px 0;}
.cat{background:#f5f5f5;color:#4a4a4a;font-size:13px;font-weight:600;padding:8px 18px;border-radius:9999px;}
.cat.active{background:#108474;color:#fff;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:210px;background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.08);padding:14px;position:relative;}
.thumb{height:100px;background:#f5f5f5;border-radius:8px;margin-bottom:10px;}
.badge{position:absolute;top:10px;left:10px;background:#800000;color:#fff;font-size:10px;font-weight:600;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.badge.in{background:#1c7b36;}
.pname{font-size:15px;font-weight:600;}
.pprice{font-size:18px;font-weight:700;color:#cc0000;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#000d8d;color:#fff;display:flex;align-items:center;justify-content:center;gap:28px;font-size:12px;opacity:.9;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Power UP Gaming</div>
<div class="navlinks"><span class="active">Consoles</span><span>Cartridges</span><span>Accessories</span></div>
<div class="cart">2</div>
</div>
<div class="hero"><h1>Level up your collection.</h1><span>Shop Retro Deals</span></div>
<div class="catrow"><div class="cat active">All</div><div class="cat">NES</div><div class="cat">Genesis</div><div class="cat">Game Boy</div></div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">Sold Out</div></div><div class="pname">Console Bundle Kit</div><div class="pprice">$129.99</div></div>
<div class="card"><div class="thumb"><div class="badge in">In Stock</div></div><div class="pname">Handheld Rechargeable</div><div class="pprice">$44.99</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Cartridge Cleaner Kit</div><div class="pprice">$12.99</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Controller, 2-Pack</div><div class="pprice">$29.99</div></div>
</div>
<div class="footer"><span>Shipping</span><span>Trade-Ins</span><span>Warranty</span><span>Store Locator</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #286efa; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #286efa; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #99b8f7; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #111111; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #286efa; color: #111111;
border: 1px solid #111111; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #286efa; color: #f5f5f5;
border: 1px solid #4984f9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #99b8f7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #245fd5; color: #111111;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#faf9f6; color:#111111; box-sizing:border-box;
font-family:"Saans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
body { display:flex; flex-direction:column; }
nav.top { flex:0 0 56px; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#faf9f6; border-bottom:1px solid #dedbd6; }
.logo { font-size:19px; font-weight:700; letter-spacing:-0.4px; color:#111111; margin:0; }
.navlinks { display:flex; gap:26px; font-size:15px; color:#111111; opacity:0.72; }
.btn-dark { background:#111111; color:#ffffff; border:none; border-radius:4px; height:38px;
padding:0 16px; font-size:15px; font-weight:400; white-space:nowrap; }
.hero { flex:0 0 auto; padding:22px 40px 14px; display:flex; flex-direction:column; gap:10px; }
.fin-badge { display:inline-flex; align-self:flex-start; align-items:center; gap:5px; background:rgba(255,86,0,0.10);
color:#ff5600; border-radius:4px; padding:3px 10px; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }
.hero h1 { margin:0; font-size:46px; font-weight:400; line-height:1.0; letter-spacing:-1.4px; color:#111111; max-width:760px; }
.hero p { margin:0; font-size:16px; color:#7b7b78; max-width:520px; line-height:1.5; }
.row { display:flex; gap:10px; margin-top:2px; }
.btn-outline { background:transparent; color:#111111; border:1px solid #111111; border-radius:4px; height:40px;
padding:0 18px; font-size:15px; font-weight:400; }
.btn-primary { background:#111111; color:#ffffff; border:none; border-radius:4px; height:40px;
padding:0 18px; font-size:15px; font-weight:400; }
.mockupwrap { flex:1; padding:12px 40px 16px; }
.panel { height:100%; background:#ffffff; border:1px solid #dedbd6; border-radius:8px; display:flex; overflow:hidden; }
.sidebar { flex:0 0 216px; background:#faf9f6; border-right:1px solid #dedbd6; padding:12px; display:flex; flex-direction:column; gap:8px; }
.sidebar .label { font-size:11px; font-weight:600; color:#9c9fa5; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:2px; }
.convo { border-radius:6px; padding:8px 8px; display:flex; flex-direction:column; gap:2px; }
.convo.active { background:rgba(255,86,0,0.07); border-left:3px solid #ff5600; padding-left:6px; }
.convo .row1 { display:flex; justify-content:space-between; }
.convo .name { font-size:14px; font-weight:600; color:#111111; }
.convo .time { font-size:11px; color:#9c9fa5; }
.convo .preview { font-size:12px; color:#7b7b78; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chatpane { flex:1; padding:16px; display:flex; flex-direction:column; gap:10px; }
.msg { max-width:72%; padding:10px 14px; border-radius:8px; font-size:14px; line-height:1.4; }
.msg.customer { align-self:flex-start; background:#f2f1ee; color:#111111; }
.finrow { align-self:flex-end; display:flex; gap:8px; align-items:flex-start; max-width:78%; }
.finavatar { width:24px; height:24px; border-radius:999px; background:#ff5600; color:#ffffff; font-size:11px;
font-weight:700; display:flex; align-items:center; justify-content:center; flex:0 0 24px; }
.msg.fin { background:#fff6f0; border:1px solid rgba(255,86,0,0.3); color:#111111; }
.resbadge { align-self:flex-end; background:#ff5600; color:#ffffff; font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:0.05em; border-radius:4px; padding:4px 10px; margin-top:2px; }
footer { flex:0 0 36px; height:36px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; font-size:12px; color:#7b7b78; border-top:1px solid #dedbd6; }
</style></head>
<body>
<nav class="top">
<p class="logo">Intercom</p>
<div class="navlinks"><span>Product</span><span>Fin</span><span>Pricing</span><span>Customers</span></div>
<button class="btn-dark">Get started</button>
</nav>
<section class="hero">
<span class="fin-badge">Fin · AI Agent</span>
<h1>The only helpdesk built for the AI agent era</h1>
<p>Fin resolves tickets instantly, and your team steps in exactly when it matters.</p>
<div class="row">
<button class="btn-primary">Get started</button>
<button class="btn-outline">Book a demo</button>
</div>
</section>
<div class="mockupwrap">
<div class="panel">
<div class="sidebar">
<span class="label">Inbox</span>
<div class="convo active">
<div class="row1"><span class="name">Alex Kim</span><span class="time">2m</span></div>
<span class="preview">Can I get a refund for this month?</span>
</div>
<div class="convo">
<div class="row1"><span class="name">Morgan Park</span><span class="time">14m</span></div>
<span class="preview">Thanks, that fixed it!</span>
</div>
<div class="convo">
<div class="row1"><span class="name">Taylor Chen</span><span class="time">1h</span></div>
<span class="preview">Where do I update billing info?</span>
</div>
</div>
<div class="chatpane">
<div class="msg customer">Hey, I was charged twice this month.</div>
<div class="finrow">
<div class="finavatar">F</div>
<div class="msg fin">I found your duplicate charge and refunded $24.00 — anything else I can help with?</div>
</div>
<span class="resbadge">Resolved by Fin</span>
</div>
</div>
</div>
<footer>
<span>© Intercom</span>
<span>Intercom · Product · Fin · Pricing</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fde050; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fde050; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7b6e2d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3859ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fde050; color: #3859ff;
border: 1px solid #3859ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fde050; color: #111111;
border: 1px solid #d7bf46; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b6e2d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ddca6c; color: #3859ff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c1c1e; box-sizing:border-box;
font-family:"Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.display { font-family:"Roobert", -apple-system, "Segoe UI", sans-serif; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e0e2e8; }
.brand { font-size:18px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; color:#1c1c1e; }
.navlinks span { opacity:0.65; }
.btn-yellow { background:#fde050; color:#1c1c1e; border:none; border-radius:8px; height:40px;
padding:0 16px; font-weight:600; font-size:14px; }
.btn-outline { background:transparent; color:#1c1c1e; border:1px solid #c7cad5; border-radius:8px; height:40px;
padding:0 16px; font-weight:600; font-size:14px; }
.hero { display:grid; grid-template-columns:340px 1fr; align-items:center; gap:20px; padding:40px 32px 24px; }
.hero .copy .tag { display:inline-block; background:#fde050; border-radius:8px; padding:4px 10px; font-size:12px; font-weight:700; margin-bottom:10px; }
.hero h1 { font-size:36px; font-weight:500; line-height:1.08; letter-spacing:-0.9px; margin:0 0 10px; }
.hero p { font-size:14px; color:#555a6a; margin:0 0 16px; line-height:1.5; }
.row { display:flex; gap:10px; }
.board { position:relative; height:236px; border-radius:16px; background:
linear-gradient(#eef0f4 1px, transparent 1px) 0 0/24px 24px,
linear-gradient(90deg, #eef0f4 1px, transparent 1px) 0 0/24px 24px,
#fbfbfc; border:1px solid #e0e2e8; overflow:hidden; }
.note { position:absolute; border-radius:6px; padding:10px; font-size:12px; font-weight:600; line-height:1.4;
box-shadow:0 6px 14px rgba(28,28,30,0.10); }
.n1 { top:18px; left:20px; width:110px; height:90px; background:#fde050; transform:rotate(-4deg); }
.n2 { top:26px; left:150px; width:100px; height:78px; background:#c9f2e8; transform:rotate(3deg); }
.n3 { top:100px; left:60px; width:96px; height:76px; background:#ffd7e0; transform:rotate(-2deg); }
.n4 { top:36px; right:34px; width:120px; height:96px; background:#dfe3ff; transform:rotate(5deg); }
.n5 { top:132px; right:24px; width:92px; height:66px; background:#ffffff; border:1.5px solid #3859ff; transform:rotate(-3deg); color:#3859ff; }
.arrow { position:absolute; top:70px; left:126px; width:30px; height:2px; background:#1c1c1e; }
.arrow::after { content:''; position:absolute; right:-1px; top:-3px; width:0; height:0;
border-left:6px solid #1c1c1e; border-top:4px solid transparent; border-bottom:4px solid transparent; }
.cursor { position:absolute; bottom:14px; left:200px; font-size:11px; font-weight:700; color:#3859ff;
background:#ffffff; border:1px solid #3859ff; border-radius:4px; padding:2px 8px; }
.toggle { display:inline-flex; background:#f4f5f8; border-radius:40px; padding:4px; margin:26px 32px 0; }
.toggle span { padding:6px 16px; border-radius:40px; font-size:13px; font-weight:600; color:#555a6a; }
.toggle span.on { background:#ffffff; color:#1c1c1e; box-shadow:0 1px 3px rgba(0,0,0,0.08); }
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:16px 32px 0; }
.plan { border:1px solid #e0e2e8; border-radius:8px; padding:22px; }
.plan .pname { font-size:13px; font-weight:700; color:#555a6a; margin-bottom:6px; }
.plan .price { font-size:22px; font-weight:600; margin-bottom:4px; }
.plan .sub { font-size:12px; color:#555a6a; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #e0e2e8; padding:12px 32px;
display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#555a6a; }
</style></head>
<body>
<nav>
<p class="brand display">Miro</p>
<div class="navlinks"><span>Templates</span><span>Solutions</span><span>Enterprise</span><span>Pricing</span></div>
<div class="row"><button class="btn-outline">Log in</button><button class="btn-yellow">Sign up free</button></div>
</nav>
<section class="hero">
<div class="copy">
<span class="tag">Built for teams + AI</span>
<h1 class="display">From idea to outcome, together</h1>
<p>One canvas where teams brainstorm, plan, and build — with AI right there on the board.</p>
<div class="row">
<button class="btn-yellow">Sign up free</button>
<button class="btn-outline">Watch demo</button>
</div>
</div>
<div class="board">
<div class="note n1">User<br>research</div>
<div class="note n2">Roadmap<br>Q3</div>
<div class="note n3">Design<br>review</div>
<div class="note n4">Launch<br>checklist</div>
<div class="note n5">+ AI summary</div>
<div class="arrow"></div>
<div class="cursor">Alex</div>
</div>
</section>
<div class="toggle"><span class="on">Monthly</span><span>Yearly · save 20%</span></div>
<section class="plans">
<div class="plan"><div class="pname">FREE</div><div class="price">$0</div><div class="sub">For individuals getting started</div></div>
<div class="plan"><div class="pname">STARTER</div><div class="price">$8<span style="font-size:12px;font-weight:400;"> /mo</span></div><div class="sub">For small teams</div></div>
<div class="plan"><div class="pname">BUSINESS</div><div class="price">$16<span style="font-size:12px;font-weight:400;"> /mo</span></div><div class="sub">For growing organizations</div></div>
</section>
<footer>
<span>© Miro</span>
<span>Miro · Templates · Pricing · Enterprise</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c805; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c805; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b004; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c805; color: #000000;
border: 1px solid #00b004; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c805; color: #000000;
border: 1px solid #27cf2b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00c405; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0E0E0E; color:#FFFFFF; box-sizing:border-box;
font-family:"Inter", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:17px; font-weight:700; display:flex; align-items:center; gap:8px; }
.brand .feather { width:16px; height:16px; background:#00C805; clip-path:polygon(50% 0%, 100% 100%, 0% 100%); }
.navlinks { display:flex; gap:22px; font-size:14px; color:#A8A8A8; }
.btn { border-radius:9999px; padding:10px 20px; font-size:14px; font-weight:600; }
.btn.primary { background:#00C805; color:#0E0E0E; }
.hero { padding:20px 32px 22px; display:flex; align-items:center; gap:30px; }
.hero-txt { flex:1; }
.hero h1 { font-size:44px; font-weight:700; line-height:1.07; letter-spacing:-0.6px; margin:0 0 14px; }
.hero p { color:#A8A8A8; font-size:15px; margin:0 0 20px; }
.portfolio { width:280px; background:#1B1B1B; border-radius:16px; padding:20px; }
.portfolio .val { font-size:32px; font-weight:700; margin:0 0 4px; }
.portfolio .chg { color:#00C805; font-size:13px; font-weight:600; font-family:monospace; margin:0 0 14px; }
.chart { height:60px; position:relative; margin-bottom:14px; }
.chart svg { width:100%; height:100%; }
.tabs { display:flex; gap:6px; background:#EFEFEF10; border-radius:9999px; padding:4px; }
.tab { flex:1; text-align:center; font-size:11px; color:#8C8C8C; padding:5px 0; border-radius:9999px; }
.tab.active { background:#FFFFFF; color:#1B1B1B; }
.rows { padding:0 32px; }
.row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid #2C2C2C; }
.row .sym { display:flex; align-items:center; gap:10px; }
.row .ic { width:32px; height:32px; border-radius:9999px; flex-shrink:0; }
.ic1 { background:linear-gradient(135deg,#00C805,#006b02); }
.ic2 { background:linear-gradient(135deg,#2E6FF2,#0a2f8e); }
.ic3 { background:linear-gradient(135deg,#FFB000,#8a5e00); }
.row .name h5 { font-size:14px; font-weight:600; margin:0; }
.row .name p { font-size:12px; color:#8C8C8C; margin:0; }
.row .price { text-align:right; }
.row .price .p { font-size:14px; font-weight:600; margin:0; }
.row .price .c { font-size:12px; font-family:monospace; margin:0; }
.c.gain { color:#00C805; } .c.loss { color:#FF5000; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #2C2C2C; padding:10px 32px;
display:flex; justify-content:space-between; font-size:11px; color:#6B6B6B; }
</style></head>
<body style="position:relative">
<nav>
<span class="brand"><span class="feather"></span>Robinhood</span>
<div class="navlinks"><span>Investing</span><span>Retirement</span><span>Gold</span><span>Crypto</span></div>
<span class="btn primary">Sign up</span>
</nav>
<section class="hero">
<div class="hero-txt">
<h1>Investing,<br>for everyone.</h1>
<p>Commission-free trading, retirement accounts, and more — all in one app.</p>
</div>
<div class="portfolio">
<p class="val">$24,381.92</p>
<p class="chg">▲ $482.10 (2.02%) Today</p>
<div class="chart">
<svg viewBox="0 0 260 60" preserveAspectRatio="none"><polyline points="0,45 30,40 60,42 90,30 120,34 150,20 180,25 210,12 240,18 260,8" fill="none" stroke="#00C805" stroke-width="2"/></svg>
</div>
<div class="tabs"><span class="tab">1D</span><span class="tab active">1W</span><span class="tab">1M</span><span class="tab">1Y</span><span class="tab">ALL</span></div>
</div>
</section>
<div class="rows">
<div class="row"><div class="sym"><span class="ic ic1"></span><div class="name"><h5>AAPL</h5><p>Apple Inc.</p></div></div><div class="price"><p class="p">$228.40</p><p class="c gain">+1.24%</p></div></div>
<div class="row"><div class="sym"><span class="ic ic2"></span><div class="name"><h5>TSLA</h5><p>Tesla Inc.</p></div></div><div class="price"><p class="p">$241.10</p><p class="c loss">-0.86%</p></div></div>
<div class="row"><div class="sym"><span class="ic ic3"></span><div class="name"><h5>BTC</h5><p>Bitcoin</p></div></div><div class="price"><p class="p">$64,820</p><p class="c gain">+3.41%</p></div></div>
</div>
<footer>
<span>© Robinhood Markets, Inc.</span>
<span>Investing · Retirement · Gold · Crypto</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e50914; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e50914; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #b20710; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e50914; color: #ffffff;
border: 1px solid #b20710; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e50914; color: #f5f5f5;
border: 1px solid #e82f38; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ffffff; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dd0913; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#141414; color:#ffffff; box-sizing:border-box;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.billboard { position:relative; height:340px; overflow:hidden;
background:
linear-gradient(0deg, #141414 0%, rgba(20,20,20,0) 45%),
linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 55%, transparent 80%),
linear-gradient(135deg, #3a1010 0%, #200a0a 40%, #141414 100%); }
.billboard::after { content:''; position:absolute; right:-80px; top:-40px; width:480px; height:480px; border-radius:50%;
background:radial-gradient(circle, rgba(229,9,20,0.28), transparent 65%); }
nav { position:relative; z-index:4; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; }
.brand { color:#e50914; font-size:26px; font-weight:700; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:20px; }
.navlinks span { font-size:13px; color:#e5e5e5; }
.navlinks span.on { color:#fff; font-weight:700; }
.searchicon { width:34px; height:34px; border-radius:4px; border:1px solid rgba(255,255,255,0.3); }
.billtext { position:relative; z-index:3; padding:26px 40px 0; max-width:440px; }
.billtitle { font-size:52px; font-weight:700; line-height:1.02; letter-spacing:-0.01em; margin:0 0 14px; }
.billmeta { display:flex; gap:8px; align-items:center; margin-bottom:14px; }
.match { color:#46d369; font-size:14px; font-weight:700; }
.rating { border:1px solid #666666; background:rgba(51,51,51,0.6); font-size:12px; padding:1px 6px; border-radius:2px; }
.billsyn { font-size:15px; color:#e5e5e5; line-height:1.4; margin:0 0 16px; }
.billbtns { display:flex; gap:10px; }
.btn-play { background:#fff; color:#000; font-size:15px; font-weight:700; border-radius:4px; padding:0 22px; height:38px;
display:flex; align-items:center; gap:8px; }
.btn-play::before { content:'▶'; font-size:13px; }
.btn-info { background:rgba(109,109,110,0.7); color:#fff; font-size:15px; font-weight:700; border-radius:4px;
padding:0 22px; height:38px; display:flex; align-items:center; }
.rows { position:absolute; top:340px; left:0; right:0; bottom:0; padding:16px 0 0; overflow:hidden; }
.row-title { font-size:18px; font-weight:700; margin:0 0 8px; padding:0 40px; }
.row { display:flex; gap:6px; padding:0 40px; margin-bottom:16px; }
.tile { width:150px; height:84px; border-radius:4px; background:#181818; position:relative; overflow:hidden; flex-shrink:0; }
.tile::after { content:''; position:absolute; inset:0;
background:linear-gradient(135deg, rgba(229,9,20,0.18), rgba(255,255,255,0.03)); }
.tile .prog { position:absolute; left:0; right:0; bottom:0; height:3px; background:#404040; }
.tile .prog::after { content:''; position:absolute; left:0; top:0; bottom:0; width:55%; background:#e50914; }
.tile.top10::before { content:'TOP 10'; position:absolute; top:6px; left:6px; background:#e50914; color:#fff;
font-size:8px; font-weight:700; padding:1px 5px; border-radius:2px; z-index:2; }
</style></head>
<body>
<div class="billboard">
<nav>
<span class="brand">Netflix</span>
<div class="navlinks"><span class="on">Home</span><span>TV Shows</span><span>Movies</span><span>New & Popular</span><span>My List</span></div>
<span class="searchicon"></span>
</nav>
<div class="billtext">
<div class="billtitle">Iron Horizon</div>
<div class="billmeta"><span class="match">98% Match</span><span class="rating">TV-MA</span><span style="font-size:13px;color:#b3b3b3;">3 Seasons</span></div>
<p class="billsyn">A convoy of survivors crosses a collapsing empire, racing the last working train south before the border closes for good.</p>
<div class="billbtns"><span class="btn-play">Play</span><span class="btn-info">More Info</span></div>
</div>
</div>
<div class="rows">
<div class="row-title">Continue Watching</div>
<div class="row">
<div class="tile"><div class="prog"></div></div>
<div class="tile"><div class="prog"></div></div>
<div class="tile"><div class="prog"></div></div>
<div class="tile"><div class="prog"></div></div>
<div class="tile"><div class="prog"></div></div>
<div class="tile"><div class="prog"></div></div>
</div>
<div class="row-title">Trending Now</div>
<div class="row">
<div class="tile top10"></div>
<div class="tile top10"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfbf9; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfbf9; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #e15a5b; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #fcfbf9; color: #212121;
border: 1px solid #e15a5b; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfbf9; color: #212121;
border: 1px solid #c5c4c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #e15a5b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcfbf9; color:#212121; box-sizing:border-box;
font-family:'Figtree','Inter',Helvetica,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; border-bottom:1px solid #e5e5eb; }
.brand { font-family:'Amiri',Georgia,serif; font-size:20px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; font-weight:500; text-transform:uppercase; letter-spacing:.4px; }
.navlinks span.active { color:#e15a5b; border-bottom:2px solid #e15a5b; padding-bottom:4px; }
.search-pill { background:#f7f7f8; border-radius:999px; padding:9px 18px; font-size:12px; color:#676986; width:180px; }
.hero { display:flex; align-items:center; padding:20px 40px; gap:24px; }
.heroimg { flex:1; height:180px; background:linear-gradient(135deg,#f4f0e8,#cf9370,#e15a5b); border-radius:12px; }
.herotext { flex:1; }
.herotext h1 { font-family:'Amiri',Georgia,serif; font-size:32px; font-weight:700; margin:0 0 10px; line-height:1.15; }
.herotext p { font-size:13px; color:#484848; margin:0 0 14px; max-width:300px; }
.btn { display:inline-block; background:#e15a5b; color:#fff; font-size:14px; font-weight:600; padding:13px 28px; border-radius:8px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 40px; }
.card { background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); overflow:hidden; }
.card-img { height:100px; background:linear-gradient(135deg,#f4f0e8,#dab668); border-radius:12px 12px 0 0; position:relative; }
.badge { position:absolute; top:8px; left:8px; background:#e15a5b; color:#fff; font-size:9px; font-weight:600; text-transform:uppercase; padding:4px 8px; border-radius:4px; }
.cbody { padding:10px 14px 12px; }
.cbody h3 { font-size:13px; font-weight:500; margin:0 0 6px; }
.ing { display:inline-block; font-family:'Amiri',Georgia,serif; font-style:italic; font-size:11px; color:#94654b; background:#f4f0e8; border:1px solid #cf9370; border-radius:999px; padding:3px 10px; margin-bottom:6px; }
.price { font-size:15px; font-weight:600; }
footer { position:absolute; bottom:0; left:0; right:0; height:48px; background:#272d45; color:#fff;
display:flex; align-items:center; justify-content:space-between; padding:0 40px; font-size:11px; opacity:.95; }
</style></head>
<body>
<nav>
<p class="brand">Beauty OF Joseon</p>
<div class="navlinks"><span class="active">Serums</span><span>Sunscreen</span><span>Cleansers</span><span>Sets</span></div>
<div class="search-pill">Search...</div>
</nav>
<section class="hero">
<div class="heroimg"></div>
<div class="herotext">
<h1>Joseon Wisdom, Modern Science</h1>
<p>Hanbang-inspired formulas rooted in centuries of Korean herbal skincare tradition.</p>
<span class="btn">Shop Bestsellers</span>
</div>
</section>
<div class="grid">
<div class="card">
<div class="card-img"><span class="badge">Bestseller</span></div>
<div class="cbody"><span class="ing">Rice Bran</span><h3>Glow Deep Serum</h3><div class="price">$21</div></div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody"><span class="ing">Ginseng</span><h3>Relief Sun SPF50+</h3><div class="price">$18</div></div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody"><span class="ing">Green Plum</span><h3>Refresh Cleansing Balm</h3><div class="price">$19</div></div>
</div>
</div>
<footer>
<span>© Beauty OF Joseon</span>
<span>Beauty OF Joseon · Ingredients · Shipping · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #313131; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #313131; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #e0e0e0; }
.brand { font-size:19px; font-weight:700; margin:0; }
.search { width:280px; height:40px; background:#f5f5f5; border:1px solid #e0e0e0; border-radius:8px;
display:flex; align-items:center; padding:0 14px; font-size:13px; color:#9e9e9e; }
.navlinks { display:flex; gap:18px; font-size:13px; color:#4a4a4a; }
.hero { padding:22px 36px 12px; text-align:center; }
.hero h1 { font-size:26px; font-weight:700; margin:0 0 6px; letter-spacing:-0.4px; }
.hero p { font-size:13px; color:#4a4a4a; margin:0 0 14px; }
.btn-primary { background:#313131; color:#fff; border:none; border-radius:8px; padding:11px 26px; font-size:14px; font-weight:600; letter-spacing:0.3px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:12px 60px 20px; }
.card { background:#fff; border-radius:12px; overflow:hidden; }
.card .cover { aspect-ratio:2/3; height:150px; background:linear-gradient(160deg,#4a4a4a,#313131); border-radius:12px 12px 0 0;
position:relative; display:flex; align-items:flex-end; padding:10px; }
.cover-badge { background:#313131; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:0.3px; padding:3px 8px; border-radius:4px; position:absolute; top:8px; left:8px; }
.cover .spine { color:rgba(255,255,255,0.85); font-size:11px; font-weight:600; }
.card .info { padding:10px 12px 14px; }
.card h3 { font-size:15px; font-weight:600; margin:0 0 3px; }
.card .author { font-size:13px; color:#757575; margin-bottom:6px; }
.stars { color:#313131; font-size:12px; }
.stars span { color:#9e9e9e; }
footer { background:#f5f5f5; padding:14px 36px; display:flex; justify-content:space-between; align-items:center;
font-size:12px; color:#757575; }
</style></head>
<body>
<nav>
<p class="brand">Book OF The Month</p>
<div class="search">Search titles, authors...</div>
<div class="navlinks"><span>Help</span><span>Account</span></div>
</nav>
<section class="hero">
<h1>This month's hardcover picks</h1>
<p>Curated by our editors. Pick one, skip anytime.</p>
<button class="btn-primary">Add to Box</button>
</section>
<section class="grid">
<div class="card"><div class="cover"><span class="cover-badge">New</span><span class="spine">The Wren</span></div><div class="info"><h3>The Wren, The Wren</h3><div class="author">Anne Enright</div><div class="stars">★★★★★ <span>4.6 (2,104)</span></div></div></div>
<div class="card"><div class="cover"><span class="spine">Salt Path</span></div><div class="info"><h3>The Salt Path</h3><div class="author">Raynor Winn</div><div class="stars">★★★★☆ <span>4.4 (1,588)</span></div></div></div>
<div class="card"><div class="cover"><span class="spine">Quiet Hours</span></div><div class="info"><h3>Quiet Hours</h3><div class="author">Miriam Okafor</div><div class="stars">★★★★★ <span>4.8 (932)</span></div></div></div>
</section>
<footer>
<span>© Book OF The Month</span>
<span>Skip any month · Cancel anytime</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #ed1846; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #ffffff; color: #222222;
border: 1px solid #ed1846; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #ed1846; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'mr-eaves-modern',Arial,sans-serif; color:#444444; }
*{box-sizing:border-box;}
.nav{height:60px;background:#fff;border-bottom:1px solid #b1b1b1;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-family:'bely-display',Georgia,serif;font-size:20px;font-weight:700;color:#ed1846;}
.navlinks{display:flex;gap:22px;font-family:'sofia-pro',Arial,sans-serif;font-size:13px;font-weight:600;color:#222222;}
.hero{height:210px;display:flex;align-items:center;padding:0 34px;gap:34px;background:#f6f6f8;}
.herotext{width:400px;}
h1{font-family:'bely-display',Georgia,serif;font-size:30px;font-weight:700;color:#222222;margin:0 0 12px;line-height:1.2;}
.sub{font-size:14px;color:#444444;line-height:1.55;margin:0 0 18px;width:360px;}
.cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 26px;background:#ed1846;color:#fff;font-family:'Jost',Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;border-radius:4px;}
.pens{display:flex;gap:8px;}
.pen{width:16px;height:150px;border-radius:9999px;}
.section{padding:0 34px;}
.sectitle{font-family:'bely-display',Georgia,serif;font-size:18px;font-weight:700;color:#222222;margin:18px 0 14px;}
.grid{display:flex;gap:14px;}
.card{width:206px;background:#fff;border:1px solid #d8d8d8;border-radius:0 0 8px 8px;overflow:hidden;}
.inkstrip{height:8px;}
.thumb{height:104px;background:#f6f6f8;}
.cardbody{padding:10px 12px 12px;}
.ptitle{font-size:13px;font-weight:600;color:#222222;line-height:1.3;height:32px;overflow:hidden;}
.pprice{font-family:'Jost',Arial,sans-serif;font-size:13px;font-weight:600;color:#222222;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Zebra Pen</div>
<div class="navlinks"><div>Gel Pens</div><div>Highlighters</div><div>Markers</div><div>Mechanical Pencils</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Forty inks. One steady hand.</h1>
<div class="sub">Gel pens, highlighters, and markers engineered for the desk, the classroom, and the sketchbook.</div>
<div class="cta">Shop All Pens</div>
</div>
<div class="pens">
<div class="pen" style="background:#ed1846"></div>
<div class="pen" style="background:#56cfe1"></div>
<div class="pen" style="background:#007e91"></div>
<div class="pen" style="background:#e67e22"></div>
<div class="pen" style="background:#222222"></div>
</div>
</div>
<div class="section">
<div class="sectitle">Featured Products</div>
<div class="grid">
<div class="card"><div class="inkstrip" style="background:#ed1846"></div><div class="thumb"></div><div class="cardbody"><div class="ptitle">Sarasa Gel Retractable Pen</div><div class="pprice">$2.49</div></div></div>
<div class="card"><div class="inkstrip" style="background:#56cfe1"></div><div class="thumb"></div><div class="cardbody"><div class="ptitle">Mildliner Highlighter Set</div><div class="pprice">$14.99</div></div></div>
<div class="card"><div class="inkstrip" style="background:#e67e22"></div><div class="thumb"></div><div class="cardbody"><div class="ptitle">Zensations Brush Marker</div><div class="pprice">$3.99</div></div></div>
<div class="card"><div class="inkstrip" style="background:#007e91"></div><div class="thumb"></div><div class="cardbody"><div class="ptitle">M-301 Mechanical Pencil</div><div class="pprice">$6.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #222222; color: #ffffff;
border: none; border-radius: 0px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #ffffff; color: #222222;
border: 1px solid #222222; border-radius: 0px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #222222; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Gotham Narrow',Arial,sans-serif; color:#3f3f3f; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dddddd;}
.logo{font-family:Sentinel,Georgia,serif;font-size:20px;font-weight:700;color:#222222;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#222222;}
.hero{height:250px;display:flex;background:#f7f7f7;}
.herotext{width:46%;padding:0 36px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#6a6a6a;margin-bottom:12px;}
.h1{font-family:Sentinel,Georgia,serif;font-size:32px;font-weight:700;line-height:1.15;color:#222222;margin:0 0 12px;}
.sub{font-size:13px;color:#3f3f3f;margin:0 0 18px;max-width:300px;}
.cta{display:inline-block;background:#222222;color:#fff;font-size:13px;font-weight:600;padding:13px 26px;border-radius:12px;}
.heroimg{width:54%;position:relative;background:linear-gradient(160deg,#eeeeee,#dddddd 70%);}
.blender{position:absolute;left:70px;top:40px;width:90px;height:150px;border-radius:8px 8px 20px 20px;background:linear-gradient(180deg,#222222,#6a6a6a);}
.jar{position:absolute;left:80px;top:30px;width:70px;height:80px;border-radius:6px 6px 30px 30px;background:linear-gradient(180deg,#c13515,#2e7d32);}
.sec{padding:22px 36px 0;}
.secTitle{font-family:Sentinel,Georgia,serif;font-size:18px;font-weight:700;color:#222222;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border:1px solid #dddddd;border-radius:8px;padding:12px;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#c13515;color:#fff;font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:3px 8px;border-radius:2px;z-index:2;}
.thumb{height:100px;border-radius:8px;margin-bottom:10px;}
.pname{font-size:14px;font-weight:600;color:#222222;}
.pmeta{font-size:11px;color:#929292;margin-top:3px;}
.pprice{font-size:14px;font-weight:700;color:#222222;margin-top:6px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Vitamix</div>
<div class="navlinks"><span>Blenders</span><span>Containers</span><span>Recipes</span><span>Commercial</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">100 Years of Blending</div>
<div class="h1">Performance over flash.</div>
<div class="sub">Professional-grade blenders built for serious home cooks.</div>
<div class="cta">Shop Blenders</div>
</div>
<div class="heroimg"><div class="blender"></div><div class="jar"></div></div>
</div>
<div class="sec">
<div class="secTitle">Featured Blenders</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#222222,#c13515)"></div><div class="pname">Explorian Series</div><div class="pmeta">64 oz. Container</div><div class="pprice">$349.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3f3f3f,#2e7d32)"></div><div class="pname">Ascent Series A3500</div><div class="pmeta">Smart System</div><div class="pprice">$599.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#6a6a6a,#222222)"></div><div class="pname">Immersion Blender</div><div class="pmeta">Variable Speed</div><div class="pprice">$149.95</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fe7e43; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fe7e43; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c4228; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #09162d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fe7e43; color: #09162d;
border: 1px solid #09162d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fe7e43; color: #111111;
border: 1px solid #d86d3b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c4228; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d76d3f; color: #09162d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#262626; box-sizing:border-box;
font-family:"Plus Jakarta Sans", "Roboto", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #f0f0f0; }
.brand { font-size:18px; font-weight:700; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:15px; font-weight:500; color:#404040; }
.navlinks span.on { color:#fe7e43; }
.navcta { background:#f97316; color:#fff; border-radius:9999px; padding:0 20px; height:38px; display:flex;
align-items:center; font-size:14px; font-weight:700; font-family:"Roboto"; }
.hero { padding:34px 36px 0; text-align:center; position:relative; }
.hero::before { content:''; position:absolute; left:50%; top:0; width:700px; height:230px; transform:translateX(-50%);
background:radial-gradient(ellipse at center, rgba(255,231,212,0.9), rgba(255,255,255,0)); z-index:0; }
.hero h1 { position:relative; font-size:44px; font-weight:600; line-height:1.08; margin:0 0 12px; letter-spacing:-0.5px; }
.hero p { position:relative; font-size:15px; color:#404040; margin:0 0 18px; }
.chiprow { position:relative; display:flex; gap:8px; justify-content:center; margin-bottom:20px; flex-wrap:wrap; }
.chip { background:#ffffff; border:1px solid #e5e5e5; color:#262626; font-size:14px; font-family:"Roboto";
border-radius:9999px; padding:6px 16px 6px 10px; display:flex; align-items:center; gap:6px; }
.chip .dot { width:16px; height:16px; border-radius:50%; }
.d1 { background:#ffd166; } .d2 { background:#8ecae6; } .d3 { background:#f28482; } .d4 { background:#c9c9c9; }
.cta-primary { display:inline-flex; align-items:center; background:#f97316; color:#fff; font-family:"Roboto";
font-size:18px; font-weight:700; border-radius:9999px; padding:10px 30px; height:60px; position:relative; }
.studio { position:relative; margin:24px 36px 0; background:#fafafa; border-radius:24px; padding:18px 22px;
display:flex; gap:16px; }
.tabs { display:flex; gap:10px; }
.tab { border:2px solid #e5e5e5; border-radius:8px; padding:8px 16px; font-size:14px; font-weight:500;
color:#404040; font-family:"Roboto"; }
.tab.on { border-color:#ffc98f; background:#fff; }
.panel { flex:1; }
.textline { height:12px; border-radius:6px; background:#eeeeee; margin-bottom:8px; }
.textline.short { width:60%; }
.voicecard { display:flex; align-items:center; gap:10px; margin-top:14px; background:#fff; border-radius:30px;
padding:10px 16px; box-shadow:rgba(0,0,0,0.06) 0px 4px 16px; width:280px; }
.avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#fe7e43,#f7b500); }
.vc-name { font-size:13px; font-weight:700; font-family:"Roboto"; }
.vc-sub { font-size:11px; color:#6b7280; font-family:"Roboto"; }
.play { margin-left:auto; width:28px; height:28px; border-radius:50%; background:#f97316; }
</style></head>
<body>
<nav>
<span class="brand">Neosapience</span>
<div class="navlinks"><span class="on">Text-to-Speech</span><span>Voice Cloning</span><span>AI Avatar</span><span>Pricing</span></div>
<span class="navcta">TRY FOR FREE</span>
</nav>
<div class="hero">
<h1>The world's most<br>expressive AI voice</h1>
<p>What are you making? Let's bring it to life.</p>
<div class="chiprow">
<span class="chip"><span class="dot d1"></span>Happy · Paige</span>
<span class="chip"><span class="dot d2"></span>Sad · Nia</span>
<span class="chip"><span class="dot d3"></span>Angry · Riley</span>
<span class="chip"><span class="dot d4"></span>Whisper · Chad</span>
</div>
<span class="cta-primary">TRY FOR FREE</span>
</div>
<div class="studio">
<div class="tabs">
<span class="tab on">Text-to-Speech</span>
<span class="tab">Smart Emotion</span>
<span class="tab">Voice Cloning</span>
</div>
</div>
<div style="margin:14px 36px 0; background:#fafafa; border-radius:24px; padding:20px 22px;">
<div class="panel">
<div class="textline"></div>
<div class="textline"></div>
<div class="textline short"></div>
<div class="voicecard">
<div class="avatar"></div>
<div><div class="vc-name">Paige</div><div class="vc-sub">Happy · English (US)</div></div>
<div class="play"></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #295eff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #295eff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #99b1fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #295eff; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #295eff; color: #f5f5f5;
border: 1px solid #4a76fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #99b1fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4b78ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0f141a; box-sizing:border-box;
font-family:"Open Sans", "Segoe UI", -apple-system, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.side { width:216px; flex:0 0 216px; background:#ffffff; border-right:1px solid #8c8c94;
padding:16px 0; display:flex; flex-direction:column; }
.side .logo { padding:0 20px 16px; font-size:14px; font-weight:600; color:#0f141a; border-bottom:1px solid #8c8c94; margin-bottom:8px; }
.navitem { padding:9px 20px; font-size:14px; color:#424650; border-left:3px solid transparent; }
.navitem.active { color:#295eff; border-left:3px solid #295eff; background:#f4f7ff; font-weight:600; }
.navsection { padding:14px 20px 6px; font-size:11px; font-weight:600; color:#424650; text-transform:uppercase; letter-spacing:0.04em; }
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { height:52px; border-bottom:1px solid #8c8c94; display:flex; align-items:center;
justify-content:space-between; padding:0 24px; }
.crumb { font-size:14px; color:#424650; }
.crumb b { color:#0f141a; font-weight:600; }
.searchbox { width:220px; height:28px; border:1px solid #8c8c94; border-radius:8px; font-size:12px;
color:#424650; display:flex; align-items:center; padding:0 10px; }
.content { flex:1; padding:20px 24px; overflow:hidden; }
.pagehead { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.pagehead h1 { font-size:20px; font-weight:600; letter-spacing:-0.2px; margin:0; }
.pagehead p { font-size:14px; color:#424650; margin:4px 0 0; }
.btn-primary { background:#295eff; color:#ffffff; border:none; border-radius:8px; padding:8px 16px;
font-size:14px; font-weight:600; white-space:nowrap; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.stat { border:1px solid #8c8c94; border-radius:12px; padding:12px 14px; }
.stat .label { font-size:12px; color:#424650; }
.stat .value { font-size:20px; font-weight:600; margin-top:4px; }
.stat .value.up { color:#295eff; }
table { width:100%; border-collapse:collapse; font-size:14px; }
thead th { text-align:left; font-weight:600; color:#424650; font-size:12px; text-transform:uppercase;
letter-spacing:0.03em; padding:8px 10px; border-bottom:1px solid #8c8c94; }
tbody td { padding:10px 10px; border-bottom:1px solid #e5e7eb; color:#0f141a; }
.status { display:inline-flex; align-items:center; gap:6px; font-size:13px; }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot.ok { background:#1a7a3d; }
.dot.warn { background:#946200; }
.mono { font-family:"Courier New", monospace; font-size:13px; color:#424650; }
</style></head>
<body>
<div class="app">
<div class="side">
<div class="logo">AWS Cloudscape</div>
<div class="navsection">Compute</div>
<div class="navitem active">Instances</div>
<div class="navitem">Auto Scaling</div>
<div class="navitem">Images</div>
<div class="navsection">Storage</div>
<div class="navitem">Volumes</div>
<div class="navitem">Snapshots</div>
<div class="navsection">Network</div>
<div class="navitem">Load Balancers</div>
<div class="navitem">Security Groups</div>
</div>
<div class="main">
<div class="topbar">
<div class="crumb">Compute > <b>Instances</b></div>
<div class="searchbox">Find instances</div>
</div>
<div class="content">
<div class="pagehead">
<div>
<h1>Instances</h1>
<p>Manage and monitor your running compute resources</p>
</div>
<button class="btn-primary">Launch instance</button>
</div>
<div class="stats">
<div class="stat"><div class="label">Running</div><div class="value up">18</div></div>
<div class="stat"><div class="label">Stopped</div><div class="value">4</div></div>
<div class="stat"><div class="label">Alarms</div><div class="value">2</div></div>
<div class="stat"><div class="label">Est. monthly cost</div><div class="value">$1,240</div></div>
</div>
<table>
<thead>
<tr><th>Name</th><th>Instance ID</th><th>Type</th><th>Region</th><th>Status</th></tr>
</thead>
<tbody>
<tr><td>web-frontend-01</td><td class="mono">i-0a2f9c1e</td><td>t3.medium</td><td>us-east-1</td><td><span class="status"><span class="dot ok"></span>Running</span></td></tr>
<tr><td>api-worker-02</td><td class="mono">i-0f8d21ab</td><td>m5.large</td><td>us-east-1</td><td><span class="status"><span class="dot ok"></span>Running</span></td></tr>
<tr><td>batch-job-03</td><td class="mono">i-0c771bde</td><td>c5.xlarge</td><td>us-west-2</td><td><span class="status"><span class="dot warn"></span>Stopping</span></td></tr>
<tr><td>cache-node-01</td><td class="mono">i-0d34f902</td><td>r5.large</td><td>eu-west-1</td><td><span class="status"><span class="dot ok"></span>Running</span></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #9933ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #9933ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #cc9efa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #8f00ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #9933ff; color: #ffffff;
border: 1px solid #8f00ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #9933ff; color: #f5f5f5;
border: 1px solid #a852fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #cc9efa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #972bff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333236; box-sizing:border-box;
font-family:"Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }
* { box-sizing: border-box; }
.display { font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #eeeef1; background:#ffffff; }
.brand { font-size:19px; font-weight:800; letter-spacing:-0.5px; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:500; }
.navlinks span { opacity:0.72; }
.navlinks span.on { opacity:1; color:#9933ff; font-weight:700; }
.chip { background:#9933ff; color:#ffffff; border-radius:6px; padding:6px 12px 5px; height:32px;
font-size:13px; font-weight:500; display:flex; align-items:center; white-space:nowrap; }
.hero { padding:30px 36px 26px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.hero .kicker { font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#9933ff; }
.hero h1 { font-size:44px; font-weight:800; letter-spacing:-1.2px; line-height:1.15; margin:0; max-width:640px; }
.hero p { font-size:15px; color:#3a3946; line-height:1.5; margin:0; max-width:520px; }
.row { display:flex; gap:12px; align-items:center; margin-top:4px; }
.btn-primary { background:#9933ff; color:#ffffff; border:none; border-radius:10px; padding:0 32px; height:48px;
font-size:17px; font-weight:700; white-space:nowrap; }
.btn-ghost { background:transparent; color:#333236; border:1px solid rgba(51,50,54,0.2); border-radius:8px;
padding:0 24px; height:45px; font-size:15px; font-weight:500; white-space:nowrap; }
.band { background:#f8ecff; padding:26px 36px 30px; }
.band .label { font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#760dde;
text-align:center; margin:0 0 14px; }
.plans { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.plan { background:#ffffff; border-radius:24px; border:2px solid rgba(51,50,54,0.1);
box-shadow:rgba(0,0,0,0.08) 0px 2px 14px; padding:22px 20px; display:flex; flex-direction:column; gap:10px; }
.plan.reco { background:#b363fd; color:#ffffff; border:none; box-shadow:rgba(0,0,0,0.2) 0px 4px 24px; position:relative; }
.plan.reco .badge { position:absolute; top:-11px; left:20px; background:#ff52b7; color:#fff; font-size:11px;
font-weight:700; padding:4px 10px; border-radius:999px; }
.plan .tier { font-size:14px; font-weight:700; opacity:0.7; }
.plan.reco .tier { opacity:0.85; }
.plan .price { font-size:26px; font-weight:800; letter-spacing:-0.5px; }
.plan .price span { font-size:13px; font-weight:400; opacity:0.7; }
.plan ul { list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:12px; }
.plan ul li::before { content:"✓ "; font-weight:700; }
.plan .cta { margin-top:auto; background:#9933ff; color:#fff; border:none; border-radius:8px; height:38px;
font-size:13px; font-weight:700; text-align:center; line-height:38px; }
.plan.reco .cta { background:#ffffff; color:#760dde; }
footer { border-top:1px solid #eeeef1; padding:12px 36px; display:flex; justify-content:space-between;
align-items:center; font-size:11px; color:#8b8a94; background:#ffffff; }
</style></head>
<body>
<nav>
<p class="brand">Codeit</p>
<div class="navlinks"><span class="on">Bootcamp</span><span>Corporate</span><span>Community</span><span>Reviews</span></div>
<div class="chip">Membership</div>
</nav>
<section class="hero">
<span class="kicker">Micro-learning · IT education</span>
<h1 class="display">Your life changes<br>every 5 minutes</h1>
<p>Short lessons, hands-on practice, and quizzes — a 5-minute learning cycle built with 20 industry experts. No 20-minute boring videos.</p>
<div class="row">
<div class="btn-primary">Start free trial</div>
<div class="btn-ghost">Browse all courses</div>
</div>
</section>
<section class="band">
<p class="label">Membership plans</p>
<div class="plans">
<div class="plan">
<span class="tier">Basic</span>
<span class="price">₩29,900<span>/mo</span></span>
<ul><li>All beginner tracks</li><li>Community access</li><li>Progress tracking</li></ul>
<div class="cta">Start membership</div>
</div>
<div class="plan reco">
<span class="badge">Recommended</span>
<span class="tier">Membership</span>
<span class="price">₩49,900<span>/mo</span></span>
<ul><li>All tracks + AI GURU tutor</li><li>Career-track projects</li><li>Level-up system</li></ul>
<div class="cta">Start membership</div>
</div>
<div class="plan">
<span class="tier">Team</span>
<span class="price">₩39,900<span>/seat</span></span>
<ul><li>Team dashboards</li><li>Corporate training</li><li>Manager reports</li></ul>
<div class="cta">Start membership</div>
</div>
</div>
</section>
<footer>
<span>© Codeit</span>
<span>Codeit · Courses · Membership · Bootcamp</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.18; letter-spacing: -0.3px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #989898; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #b12704; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #111111;
border: 1px solid #b12704; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #989898; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #b12704; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Open Sans',-apple-system,system-ui,Roboto,'Helvetica Neue',sans-serif; color:#353535; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #ebebeb;}
.logo{font-size:20px;font-weight:700;color:#111;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;}
.hero{height:230px;background:#111111;display:flex;align-items:center;padding:0 40px;}
.herotext{width:420px;}
h1{font-size:32px;font-weight:700;letter-spacing:-0.5px;color:#fff;margin:0 0 12px;}
.sub{font-size:14px;color:#bebebe;margin:0 0 20px;max-width:340px;}
.cta{display:inline-block;background:#b12704;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;border-radius:8px;}
.mouse{width:180px;height:170px;position:relative;margin-left:60px;}
.mouse .body{position:absolute;left:50px;top:20px;width:90px;height:130px;border-radius:45px 45px 30px 30px;background:linear-gradient(160deg,#b12704,#111);}
.sec{padding:22px 40px 0;}
.sectitle{font-size:20px;font-weight:600;margin:0 0 14px;}
.grid{display:flex;gap:16px;}
.card{width:210px;background:#fff;border:1px solid #ebebeb;border-radius:12px;overflow:hidden;}
.thumb{height:100px;border-radius:12px 12px 0 0;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#b12704;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.info{padding:12px 14px;}
.pname{font-size:16px;font-weight:600;margin:0 0 4px;}
.pprice{font-size:16px;font-weight:600;}
.pprice.sale{color:#b12704;}
</style>
<div class="nav">
<div class="logo">Pulsar</div>
<div class="navlinks"><span>Mice</span><span>Mousepads</span><span>Accessories</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Built for grams and milliseconds.</h1>
<p class="sub">Ultralight performance mice engineered around click latency, not marketing specs.</p>
<div class="cta">Shop Mice</div>
</div>
<div class="mouse"><div class="body"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b12704,#111)"><span class="badge">New</span></div><div class="info"><div class="pname">Xlite V3 Wireless</div><div class="pprice">$79.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#6371c7,#111)"></div><div class="info"><div class="pname">Supergrip Tape</div><div class="pprice">$9.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#989898,#111)"><span class="badge" style="background:#c00000">Sale</span></div><div class="info"><div class="pname">X2 Mini Mousepad</div><div class="pprice sale">$14.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #616161; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 1px; background: #214232; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 1px; background: #ffffff; color: #214232;
border: 1px solid #214232; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #272727;
border: 1px solid #c9c9c9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #616161; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; background: #214232; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Georgia,serif; color:#272727; }
*{box-sizing:border-box;}
.announce{height:36px;background:#c2caac;color:#214232;display:flex;align-items:center;justify-content:center;font-family:'Helvetica Neue',sans-serif;font-size:12px;letter-spacing:0.5px;text-transform:uppercase;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dedede;}
.logo{font-size:22px;color:#214232;}
.navlinks{display:flex;gap:24px;font-family:'Helvetica Neue',sans-serif;font-size:13px;letter-spacing:0.8px;text-transform:uppercase;}
.hero{height:280px;display:flex;background:#ffebb4;}
.herotext{width:48%;padding:0 40px;display:flex;flex-direction:column;justify-content:center;}
.herotext h1{font-size:34px;font-weight:400;margin:0 0 14px;line-height:1.2;color:#214232;}
.herotext p{font-size:14px;color:#272727;margin:0 0 20px;max-width:300px;}
.cta{background:#214232;color:#fff;font-family:'Helvetica Neue',sans-serif;font-size:13px;letter-spacing:1px;text-transform:uppercase;padding:12px 28px;width:fit-content;}
.illus{width:52%;position:relative;overflow:hidden;background:#ffebb4;}
.flower{position:absolute;width:60px;height:60px;border-radius:50%;}
.f1{top:50px;left:60px;background:#899df1;} .f2{top:120px;left:150px;background:#d6381d;width:40px;height:40px;} .f3{top:70px;left:230px;background:#0e7a82;width:50px;height:50px;}
.label{padding:22px 40px 10px;font-family:'Helvetica Neue',sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#616161;}
.grid{display:flex;gap:14px;padding:0 40px;}
.card{width:200px;border:1px solid #e5e5e5;}
.thumb{height:130px;background:#f4f4f6;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#214232;color:#fff;font-family:'Helvetica Neue',sans-serif;font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:3px 8px;}
.badge.sale{background:#d6381d;}
.body{padding:10px 12px;}
.pname{font-size:14px;margin-bottom:4px;}
.pprice{font-size:18px;}
</style>
<div class="announce">Free shipping on orders over $75</div>
<div class="nav">
<div class="logo">Rifle Paper CO</div>
<div class="navlinks"><span>Stationery</span><span>Calendars</span><span>Gift</span><span>Home</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Illustrated for every occasion.</h1>
<p>Botanical prints, hand-painted florals, and paper goods to make every day feel like a celebration.</p>
<div class="cta">Shop Notebooks</div>
</div>
<div class="illus"><div class="flower f1"></div><div class="flower f2"></div><div class="flower f3"></div></div>
</div>
<div class="label">New Arrivals</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">New</div></div><div class="body"><div class="pname">Wildflower Field Notebook</div><div class="pprice">$16.00</div></div></div>
<div class="card"><div class="thumb" style="background:#f6ede0"><div class="badge sale">Sale</div></div><div class="body"><div class="pname">Citrus Grove Calendar</div><div class="pprice">$22.00</div></div></div>
<div class="card"><div class="thumb" style="background:#f4f4f6"></div><div class="body"><div class="pname">Garden Party Card Set</div><div class="pprice">$14.00</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00a88f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00a88f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2332c4; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a88f; color: #2332c4;
border: 1px solid #2332c4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00a88f; color: #f5f5f5;
border: 1px solid #27b49f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #069597; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#192325; box-sizing:border-box;
font-family:-apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.warn { background:#fdf7c9; color:#502e00; font-size:13px; padding:8px 40px; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:700; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; }
.signin { background:#e7ebeb; border-radius:26px; padding:2px 8px 2px 16px; height:40px; display:flex;
align-items:center; font-size:16px; font-weight:600; }
.hero { padding:14px 40px 20px; }
h1 { font-size:26px; font-weight:700; margin:0 0 16px; }
.form { background:#ffffff; border:1px solid #d0d4d5; border-radius:8px; padding:16px; display:flex; flex-direction:column; gap:0; }
.stationrow { background:#f2f4f4; height:56px; display:flex; align-items:center; padding:16px 16px 16px 20px; font-size:16px; color:#5b6466; }
.stationrow.top { border-radius:4px 4px 0 0; border-bottom:1px solid #ffffff; }
.stationrow.bottom { border-radius:0 0 4px 4px; }
.formrow { display:flex; gap:10px; margin-top:10px; }
.datebtn { flex:1; background:#f2f4f4; height:56px; border-radius:4px; display:flex; align-items:center; padding:16px; font-size:16px; font-weight:600; color:#192325; }
.findbtn { background:#00a88f; color:#ffffff; border-radius:4px; padding:10px 12px; height:48px; font-size:16px; font-weight:600; width:180px; text-align:center; display:flex; align-items:center; justify-content:center; margin-top:10px; }
.cards { display:flex; gap:16px; padding:18px 40px 0; }
.card { flex:1; background:#ffffff; border:1px solid #d0d4d5; border-radius:4px; padding:18px; }
.card .t { font-size:18px; font-weight:700; margin-bottom:6px; }
.card .d { font-size:13px; color:#3f4b4e; margin-bottom:12px; }
.outline { background:#ffffff; color:#192325; border:1px solid #d0d4d5; border-radius:4px; padding:8px 16px; font-size:14px; font-weight:700; }
</style></head>
<body>
<div class="warn">Some services may be affected by planned engineering works this weekend.</div>
<nav>
<span class="brand">Trainline</span>
<div class="navlinks"><span>Railcards</span><span>Business</span><span>My Bookings</span></div>
<span class="signin">Sign in</span>
</nav>
<section class="hero">
<h1>Buy train tickets for travel in the UK and Europe</h1>
<div class="form">
<div class="stationrow top">Departure station</div>
<div class="stationrow bottom">Arrival station</div>
<div class="formrow">
<div class="datebtn">Today, 09:15</div>
<div class="datebtn">1 adult</div>
</div>
<div class="findbtn">Find cheap tickets</div>
</div>
</section>
<div class="cards">
<div class="card"><div class="t">Save 1/3 with a Season Ticket</div><div class="d">Buy in advance and save on regular journeys.</div><button class="outline">Buy now</button></div>
<div class="card"><div class="t">Spend less, travel more</div><div class="d">Compare every operator and fare in one place.</div><button class="outline">Buy your Railcard</button></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #171717;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #171717;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -0.96px; margin: 0; color: #171717; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 20px; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 24px; background: #171717; color: #ffffff;
border: none; border-radius: 100px; padding: 0px {spacing.sm};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 24px; background: #ffffff; color: #171717;
border: 1px solid #171717; border-radius: 100px;
padding: 0px {spacing.sm}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -0.28px; background: #ffffff; color: #171717;
border: 1px solid #ebebeb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 16px; background: #fafafa; color: #4d4d4d;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#171717; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #ebebeb; }
.logo { width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:16px solid #171717; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:13px; color:#4d4d4d; }
.navcta { background:#171717; color:#ffffff; border-radius:6px; padding:8px 16px; font-size:13px; font-weight:500; }
.hero { position:relative; padding:56px 32px 24px; text-align:center; overflow:hidden; }
.mesh { position:absolute; left:50%; top:0; transform:translateX(-50%); width:640px; height:280px; z-index:0;
background:
radial-gradient(220px 140px at 18% 30%, rgba(0,112,243,.35), transparent 70%),
radial-gradient(220px 160px at 80% 20%, rgba(238,0,238,.28), transparent 70%),
radial-gradient(200px 150px at 55% 70%, rgba(245,166,35,.30), transparent 70%),
radial-gradient(180px 140px at 30% 80%, rgba(0,200,220,.28), transparent 70%);
filter:blur(6px); opacity:.8; }
.eyebrow { position:relative; font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:11px;
letter-spacing:.1em; text-transform:uppercase; color:#888888; margin-bottom:14px; }
.hero h1 { position:relative; font-size:46px; font-weight:600; letter-spacing:-2.2px; margin:0 auto 14px; max-width:600px; line-height:1.06; }
.hero p { position:relative; font-size:15px; color:#4d4d4d; margin:0 auto 20px; max-width:420px; }
.btnrow { position:relative; display:flex; gap:10px; justify-content:center; }
.btn { border-radius:6px; padding:9px 18px; font-size:13px; font-weight:500; }
.btn-blk { background:#171717; color:#ffffff; }
.btn-out { background:#ffffff; color:#171717; border:1px solid #ebebeb; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:8px 32px 32px; }
.card { border:1px solid #ebebeb; border-radius:8px; padding:16px; background:#fafafa; }
.termbar { display:flex; gap:5px; margin-bottom:10px; }
.dot { width:8px; height:8px; border-radius:50%; background:#ebebeb; }
.code { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:11.5px; color:#171717; line-height:1.6; }
.code .muted { color:#a1a1a1; }
.code .blue { color:#0070f3; }
.card h3 { font-size:14px; font-weight:600; margin:12px 0 4px; }
.card p { font-size:12px; color:#4d4d4d; margin:0; }
</style></head>
<body>
<nav>
<div class="logo"></div>
<div class="navlinks"><span>Products</span><span>Templates</span><span>Docs</span><span>Enterprise</span><span>Pricing</span></div>
<div class="navcta">Deploy</div>
</nav>
<div class="hero">
<div class="mesh"></div>
<div class="eyebrow">$ vercel deploy</div>
<h1>Build and deploy on the AI Cloud</h1>
<p>Vercel gives you the developer experience and infrastructure to build, scale, and secure a faster web.</p>
<div class="btnrow"><button class="btn btn-blk">Start deploying</button><button class="btn btn-out">Get a demo</button></div>
</div>
<div class="cards">
<div class="card"><div class="termbar"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
<div class="code">$ vercel<br><span class="muted">▲ Deploying...</span><br><span class="blue">✓ Ready</span> in 1.2s</div>
<h3>Instant rollbacks</h3><p>Every deploy is atomic and reversible.</p></div>
<div class="card"><div class="termbar"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
<div class="code">edge.config.ts<br><span class="muted">export const</span> runtime<br>= <span class="blue">"edge"</span>;</div>
<h3>Edge network</h3><p>Ship to 100+ regions with zero config.</p></div>
<div class="card"><div class="termbar"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
<div class="code">next build<br><span class="muted">Compiling...</span><br><span class="blue">✓ Compiled</span> successfully</div>
<h3>Framework-defined</h3><p>Built for Next.js and every major framework.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #231f20; color: #dedede;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #231f20; color: #dedede;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #dedede; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9a9a9a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #231f20; color: #dedede;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #dedede; color: #231f20;
border: 1px solid #231f20; border-radius: 0px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #2d2a2b; color: #dedede;
border: 1px solid #524f50; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9a9a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #dedede; color: #231f20;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#231f20; color:#dedede; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #3a3637;}
.logo{font-size:19px;font-weight:700;color:#dedede;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#dedede;}
.navlinks .active{border-bottom:2px solid #dedede;padding-bottom:18px;}
.navicons{font-size:12px;color:#9a9a9a;}
.hero{padding:26px 32px 0;}
.hero h1{font-size:26px;font-weight:600;color:#dedede;margin:0 0 6px;}
.hero p{font-size:14px;color:#9a9a9a;margin:0 0 16px;}
.grid{display:flex;gap:2px;background:#3a3637;}
.card{width:239px;background:#1c1a1b;padding:0;}
.thumb{aspect-ratio:1/1;height:170px;background:#121212;}
.pbody{padding:8px 10px 10px;}
.ptitle{font-size:16px;font-weight:500;color:#dedede;margin:0 0 2px;}
.pprice{font-size:14px;color:#9a9a9a;}
.badgebar{display:flex;gap:6px;padding:10px 10px 0;}
.badge{background:#dedede;color:#231f20;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 6px;}
.badge.out{background:transparent;border:1px solid #dedede;color:#dedede;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#121212;color:#6a6a6a;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;border-top:1px solid #3a3637;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Sub Pop Megamart</div>
<div class="navlinks"><span class="active">New Releases</span><span>Vinyl</span><span>Merch</span><span>Artists</span></div>
<div class="navicons">Search Cart (0)</div>
</div>
<div class="hero">
<h1>A dark room with a spotlight on the records.</h1>
<p>New pressings and merch from the label's own roster — no lifestyle photography, just the music.</p>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3a3637,#121212)"></div><div class="badgebar"><span class="badge">New</span></div><div class="pbody"><div class="ptitle">Static Bloom LP</div><div class="pprice">$24.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2d2a2b,#121212)"></div><div class="badgebar"><span class="badge out">Pre-Order</span></div><div class="pbody"><div class="ptitle">Basement Tapes Reissue</div><div class="pprice">$28.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3a3637,#1c1a1b)"></div><div class="pbody"><div class="ptitle">Megamart Tee — Black</div><div class="pprice">$22.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#121212,#3a3637)"></div><div class="pbody"><div class="ptitle">Distortion Cassette</div><div class="pprice">$12.00</div></div></div>
</div>
<div class="footer"><span>© Sub Pop Megamart</span><span>Shipping Returns Wholesale</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1b1b1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1b1b1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #1b1b1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #565656; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; background: #005daa; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; background: #ffffff; color: #005daa;
border: 1px solid #005daa; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1b1b1d;
border: 1px solid #c6c6c6; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #565656; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.2px; background: #ee3134; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#2b2b2b; box-sizing:border-box;
font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; }
* { box-sizing:border-box; }
nav { height:50px; background:#005daa; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.brand { color:#ffffff; font-size:17px; font-weight:700; margin:0; font-style:italic; }
.searchbar { flex:1; max-width:400px; height:28px; background:#fff; border-radius:2px; margin:0 20px; display:flex; align-items:center; padding:0 10px; font-size:11px; color:#888; }
.cartbtn { background:#004985; color:#fff; font-size:11px; font-weight:700; padding:6px 14px; border-radius:2px; }
.megabar { height:34px; background:#dfedf9; display:flex; align-items:center; gap:22px; padding:0 24px; }
.megabar span { font-size:11px; color:#005daa; font-weight:700; }
.promostrip { height:28px; background:#ee3134; display:flex; align-items:center; justify-content:center; gap:16px; }
.promostrip span { color:#fff; font-size:11px; font-weight:700; }
.promostrip .y { background:#f5c51f; color:#1b1b1d; padding:2px 8px; border-radius:2px; font-size:10px; }
.hero { height:200px; background:#efeced; display:flex; align-items:center; padding:0 30px; gap:30px; }
.hero h1 { font-size:24px; font-weight:700; color:#1b1b1d; margin:0 0 8px; }
.hero p { font-size:12px; color:#565656; margin:0 0 14px; max-width:380px; }
.hero .cta { display:inline-block; background:#005daa; color:#fff; font-size:12px; font-weight:700; padding:9px 20px; border-radius:2px; }
.instrument { width:180px; height:130px; background:#c8ddef; border-radius:4px; position:relative; margin-left:auto; }
.instrument::before { content:''; position:absolute; left:14px; right:14px; top:14px; height:40px; background:#005daa; border-radius:2px; }
.instrument::after { content:''; position:absolute; left:14px; bottom:14px; width:60px; height:30px; background:#1b7dce; border-radius:2px; }
.section-label { padding:14px 30px 8px; font-size:13px; font-weight:700; color:#1b1b1d; }
.grid { display:flex; gap:12px; padding:0 30px; }
.card { flex:1; background:#ffffff; border:1px solid #d7d6d6; border-radius:2px; padding:10px; }
.card .art { height:74px; border-radius:2px; margin-bottom:8px; }
.a1 { background:#dfedf9; } .a2 { background:#c8ddef; } .a3 { background:#e5e4e4; } .a4 { background:#dfedf9; }
.card .sku { font-size:9px; color:#888; font-family:Consolas,monospace; margin-bottom:3px; }
.card h3 { font-size:11px; font-weight:700; color:#1b1b1d; margin:0 0 4px; }
.card .stock { font-size:9px; color:#01891e; font-weight:700; margin-bottom:6px; }
.card .price { font-size:13px; font-weight:700; color:#005daa; }
footer { height:64px; margin-top:12px; background:#efeced; display:flex; align-items:center; gap:26px; padding:0 30px; }
footer span { font-size:10px; color:#565656; font-weight:700; }
</style></head>
<body>
<nav>
<p class="brand">Fisher Scientific</p>
<div class="searchbar">Search 40,000+ products, catalog #, or CAS number...</div>
<div class="cartbtn">CART (3)</div>
</nav>
<div class="megabar"><span>Chemicals</span><span>Lab Equipment</span><span>Safety</span><span>Cell Biology</span><span>Diagnostics</span><span>Services</span></div>
<div class="promostrip"><span>SPRING RESTOCK EVENT</span><span class="y">SAVE UP TO 25%</span></div>
<div class="hero">
<div>
<h1>Procurement built for the lab bench.</h1>
<p>Forty thousand SKUs, one wayfinding system. Instrumentation-grade clarity from cart to compliance.</p>
<span class="cta">Browse the Catalog</span>
</div>
<div class="instrument"></div>
</div>
<div class="section-label">Frequently Reordered</div>
<div class="grid">
<div class="card"><div class="art a1"></div><div class="sku">CAT# 14-955-129</div><h3>Micropipette Set, 3pc</h3><div class="stock">IN STOCK — SHIPS TODAY</div><div class="price">$412.00</div></div>
<div class="card"><div class="art a2"></div><div class="sku">CAT# 05-402-14</div><h3>Centrifuge Tubes, 50mL</h3><div class="stock">IN STOCK</div><div class="price">$68.50</div></div>
<div class="card"><div class="art a3"></div><div class="sku">CAT# 22-069-115</div><h3>Nitrile Gloves, Case</h3><div class="stock">IN STOCK</div><div class="price">$124.00</div></div>
<div class="card"><div class="art a4"></div><div class="sku">CAT# 13-874-1</div><h3>Benchtop pH Meter</h3><div class="stock">IN STOCK</div><div class="price">$589.00</div></div>
</div>
<footer>
<span>REQUEST A QUOTE</span><span>SAFETY DATA SHEETS</span><span>ACCOUNT MANAGEMENT</span><span>COMPLIANCE RESOURCES</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.4; background: #e60012; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.4; background: #ffffff; color: #000000;
border: 1px solid #e60012; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 10px; font-weight: 400; line-height: 1.3; background: #e60012; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:'Courier New',Courier,'Lucida Sans Typewriter','Lucida Typewriter',monospace; }
* { box-sizing:border-box; }
nav { height:56px; border-bottom:2px solid #000000; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-size:17px; font-weight:700; letter-spacing:.05em; }
.navlinks { display:flex; gap:24px; font-size:11px; text-transform:uppercase; color:#666666; }
.navlinks span.on { color:#e60012; }
.search { border:1px solid #cccccc; border-radius:9999px; padding:6px 16px; font-size:11px; width:150px; }
.wrap { display:flex; height:522px; }
.exploded { width:460px; border-right:2px solid #000000; position:relative; display:flex; align-items:center; justify-content:center; }
.part { position:absolute; }
.shell { width:170px; height:100px; border-radius:50px/44px; background:#f5f5f5; border:2px solid #000; top:210px; left:60px; }
.dpad { width:52px; height:52px; background:#444444; top:150px; left:100px; clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%); }
.btn-a { width:22px; height:22px; border-radius:50%; background:#e60012; top:170px; right:120px; }
.btn-b { width:22px; height:22px; border-radius:50%; background:#0066cc; top:196px; right:150px; }
.btn-x { width:22px; height:22px; border-radius:50%; background:#ffcc00; top:196px; right:98px; }
.btn-y { width:22px; height:22px; border-radius:50%; background:#00cc66; top:222px; right:120px; }
.callout { position:absolute; font-size:9px; color:#666666; }
.c1 { top:130px; left:20px; }
.c2 { top:340px; right:30px; }
.info { flex:1; padding:32px 36px; display:flex; flex-direction:column; gap:14px; }
.info .cat { font-size:11px; color:#666666; text-transform:uppercase; }
.info h1 { font-size:22px; font-weight:700; margin:0; }
.colorway-row { display:flex; gap:8px; }
.colorway { width:26px; height:26px; border-radius:50%; border:2px solid #000; }
.cw1{background:#e60012}.cw2{background:#0066cc}.cw3{background:#ffcc00}.cw4{background:#000000}
.spec-list { font-size:11px; color:#333333; line-height:1.9; border-top:2px solid #000; border-bottom:2px solid #000; padding:10px 0; }
.desc { font-size:12px; color:#333333; line-height:1.6; max-width:420px; }
.price { font-size:20px; font-weight:700; }
.buy-row { display:flex; gap:10px; margin-top:auto; }
.btn-buy { flex:1; background:#000000; color:#fff; border:none; padding:13px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.btn-wish { border:2px solid #000; padding:13px 18px; font-size:12px; }
footer { height:62px; border-top:2px solid #000000; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; font-size:10px; color:#666666; }
</style></head>
<body>
<nav>
<p class="brand">8bitdo</p>
<div class="navlinks"><span>Controllers</span><span class="on">Pro 2</span><span>Retro</span><span>Support</span></div>
<span class="search">SEARCH_</span>
</nav>
<div class="wrap">
<div class="exploded">
<div class="part shell"></div>
<div class="part dpad"></div>
<div class="part btn-a"></div>
<div class="part btn-b"></div>
<div class="part btn-x"></div>
<div class="part btn-y"></div>
<span class="callout c1">D-PAD_MODULE</span>
<span class="callout c2">SHELL_ABS_1.2MM</span>
</div>
<div class="info">
<span class="cat">CONTROLLER // WIRED+WIRELESS</span>
<h1>Pro 2 Controller</h1>
<div class="colorway-row">
<div class="colorway cw1"></div><div class="colorway cw2"></div><div class="colorway cw3"></div><div class="colorway cw4"></div>
</div>
<div class="spec-list">
LATENCY....... 4ms BT<br>
BATTERY....... 20HR<br>
PLATFORM...... SWITCH/PC/ANDROID
</div>
<p class="desc">Every part earns its place. Hall-effect sticks, mechanical L/R buttons, and a 6-axis motion sensor packed into a shell built like a small machine.</p>
<span class="price">$24.99</span>
<div class="buy-row">
<button class="btn-buy">Add to Cart</button>
<button class="btn-wish">+</button>
</div>
</div>
</div>
<footer><span>© 8bitdo</span><span>WARRANTY // SUPPORT // FIRMWARE</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #221155;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #221155;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #221155; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #fe5b0c; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #221155;
border: 1px solid #fe5b0c; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #221155;
border: 1px solid #c8c4d4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fe5b0c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Intex</title>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:#221155;}
*{box-sizing:border-box;}
.nav{position:absolute;top:0;left:0;width:960px;height:64px;background:#fff;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-weight:700;font-size:20px;color:#221155;}
.navlinks{display:flex;gap:26px;font-size:15px;font-weight:600;}
.navlinks span.active{color:#fe5b0c;border-bottom:2px solid #fe5b0c;padding-bottom:20px;}
.cartbadge{background:#fe5b0c;color:#fff;font-size:11px;font-weight:700;border-radius:9999px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;}
.hero{position:absolute;top:64px;left:0;width:960px;height:230px;background:#f5f5f5;display:flex;align-items:center;padding:0 44px;}
.hero h1{font-size:32px;font-weight:700;color:#221155;margin:0 0 12px 0;width:420px;line-height:1.2;}
.searchpill{width:400px;height:48px;border-radius:9999px;background:#fff;border:1px solid #d4d4d4;display:flex;align-items:center;padding:0 20px;font-size:14px;color:#221155;margin-bottom:16px;}
.cta{background:#fe5b0c;color:#fff;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:600;display:inline-block;}
.pool{position:absolute;right:70px;top:40px;width:210px;height:150px;border-radius:50%;background:radial-gradient(circle,#4fc3d9,#0090b3 70%);}
.pool::after{content:'';position:absolute;top:20px;left:20px;width:170px;height:110px;border-radius:50%;background:radial-gradient(circle,#fe5b0c 0,#fe5b0c 20px,transparent 22px);opacity:0.9;}
.tilerow{position:absolute;top:322px;left:36px;width:888px;height:100px;display:flex;gap:16px;}
.tile{flex:1;background:#f5f5f5;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:#221155;}
.sectitle{position:absolute;top:444px;left:36px;font-size:22px;font-weight:600;color:#221155;}
.grid{position:absolute;top:486px;left:36px;width:888px;height:140px;display:flex;gap:18px;}
.card{width:207px;background:#fff;border-radius:12px;box-shadow:0 1px 4px rgba(34,17,85,0.06);overflow:hidden;}
.imgbox{width:207px;height:80px;position:relative;}
.imgbox.a{background:linear-gradient(135deg,#4fc3d9,#0090b3);}
.imgbox.b{background:linear-gradient(135deg,#fe5b0c,#e04a00);}
.imgbox.c{background:linear-gradient(135deg,#221155,#3a2a7a);}
.imgbox.d{background:linear-gradient(135deg,#dfeefc,#4fc3d9);}
.badge{position:absolute;top:6px;left:6px;background:#fe5b0c;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;border-radius:4px;padding:2px 6px;}
.title{font-size:13px;font-weight:600;padding:8px 10px 2px;color:#221155;}
.price{font-size:14px;font-weight:600;padding:0 10px 10px;color:#221155;}
</style>
<div class="nav">
<div class="logo">Intex</div>
<div class="navlinks"><span class="active">Pools</span><span>Air Mattresses</span><span>Spas</span><span>Toys</span></div>
<div class="cartbadge">2</div>
</div>
<div class="hero">
<div>
<h1>Summer starts in your backyard.</h1>
<div class="searchpill">Search above-ground pools…</div>
<div class="cta">Shop Now</div>
</div>
<div class="pool"></div>
</div>
<div class="tilerow">
<div class="tile">Above Ground Pools</div>
<div class="tile">Air Mattresses</div>
<div class="tile">Inflatable Spas</div>
</div>
<div class="sectitle">Popular This Week</div>
<div class="grid">
<div class="card">
<div class="imgbox a"><div class="badge">Sale</div></div>
<div class="title">Ultra XTR Round Pool 15ft</div>
<div class="price">$449.99</div>
</div>
<div class="card">
<div class="imgbox b"></div>
<div class="title">Dura-Beam Air Mattress</div>
<div class="price">$59.99</div>
</div>
<div class="card">
<div class="imgbox c"></div>
<div class="title">PureSpa Plus 4-Person</div>
<div class="price">$399.99</div>
</div>
<div class="card">
<div class="imgbox d"></div>
<div class="title">River Run Lounge Ring</div>
<div class="price">$24.99</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0017c1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0017c1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8791de; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00118f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0017c1; color: #ffffff;
border: 1px solid #00118f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0017c1; color: #f5f5f5;
border: 1px solid #273bc9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8791de; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0016b9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Noto Sans JP","Noto Sans",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",sans-serif; }
* { box-sizing:border-box; }
.topbar { background:#00118f; color:#fff; font-size:11px; padding:5px 32px; display:flex; justify-content:space-between; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #949494; }
.brand { font-size:17px; font-weight:700; color:#1a1a1a; }
.brand small { display:block; font-size:10px; font-weight:400; color:#666; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#00118f; font-weight:500; }
.search { display:flex; }
.search input { border:1px solid #949494; border-radius:8px 0 0 8px; padding:8px 12px; font-size:13px; width:200px; color:#333; }
.search button { background:#0017c1; color:#fff; border:none; border-radius:0 8px 8px 0; padding:8px 14px; font-size:13px; font-weight:700; }
.hero { padding:28px 32px; background:#f2f2f2; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.hero h1 { font-size:28px; font-weight:700; color:#1a1a1a; margin:0 0 8px; line-height:1.4; }
.hero p { font-size:15px; color:#333; margin:0; line-height:1.7; max-width:480px; }
.hero-visual { width:180px; height:110px; background:#e6e6e6; border-radius:16px; border:1px solid #949494;
display:flex; align-items:center; justify-content:center; font-size:11px; color:#767676; flex-shrink:0; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:22px 32px; }
.card { background:#ffffff; border:1px solid #949494; border-radius:16px; padding:20px; }
.card .icon { width:40px; height:40px; border-radius:8px; background:#e8f1fe; margin-bottom:12px;
display:flex; align-items:center; justify-content:center; color:#0017c1; font-weight:700; font-size:15px; }
.card h3 { font-size:15px; font-weight:700; color:#00118f; margin:0 0 6px; }
.card p { font-size:12.5px; color:#333; margin:0; line-height:1.7; }
.card a { display:inline-block; margin-top:10px; font-size:12.5px; color:#00118f; font-weight:500; }
.banner { margin:0 32px 20px; background:#d9e6ff; border-radius:8px; padding:12px 18px; display:flex;
align-items:center; justify-content:space-between; }
.banner span { font-size:13px; color:#00118f; font-weight:500; }
.banner button { background:#0017c1; color:#fff; border:none; border-radius:8px; padding:8px 18px;
font-size:13px; font-weight:700; }
footer { border-top:1px solid #949494; padding:12px 32px; display:flex; justify-content:space-between;
font-size:11.5px; color:#767676; }
</style></head>
<body>
<div class="topbar"><span>Digital Agency Design System (DADS) — Government Digital Services</span><span>Language: English</span></div>
<nav>
<div class="brand">Digital Agency Design System (DADS)<small>Digital Agency Design System</small></div>
<div class="navlinks"><span>Guidelines</span><span>Components</span><span>Accessibility</span></div>
<div class="search"><input placeholder="Search services" /><button>Search</button></div>
</nav>
<section class="hero">
<div>
<h1>Public services, designed for everyone.</h1>
<p>A shared design language for government digital services — accessible, consistent, and open under CC BY 4.0.</p>
</div>
<div class="hero-visual">Service preview</div>
</section>
<section class="cards">
<div class="card"><div class="icon">A</div><h3>Accessibility Guide</h3><p>WCAG-aligned patterns for forms, contrast, and touch targets across every ministry.</p><a>Read guideline →</a></div>
<div class="card"><div class="icon">B</div><h3>Component Library</h3><p>HTML and React snippets for buttons, tables, and navigation, ready to implement.</p><a>Browse components →</a></div>
<div class="card"><div class="icon">C</div><h3>Figma Resources</h3><p>Official Figma kits shared openly for design teams across the public sector.</p><a>Open Figma →</a></div>
</section>
<div class="banner"><span>This service is available in 12 languages.</span><button>Change language</button></div>
<footer>
<span>© Digital Agency Design System (DADS)</span>
<span>Guidelines · Accessibility · Contact · Privacy</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffbf2; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffbf2; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #747474; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ab8c52; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fffbf2; color: #222222;
border: 1px solid #ab8c52; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c5be; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #747474; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d32f2f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fffbf2; font-family:'Fraunces','Georgia','Times New Roman',serif; color:#444444; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dedede;}
.logo{font-size:20px;font-weight:600;color:#222222;}
.navlinks{display:flex;gap:24px;font-size:13px;color:#444444;font-family:Georgia,serif;}
.navcta{background:#ab8c52;color:#fff;font-size:12px;padding:9px 18px;border-radius:4px;}
.hero{height:230px;display:flex;background:#f7f7f7;}
.herotext{width:440px;padding:28px 40px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:#ab8c52;margin-bottom:10px;}
.h1{font-size:27px;font-weight:600;line-height:1.3;color:#222222;margin:0 0 10px;}
.sub{font-size:14px;line-height:1.6;color:#747474;margin:0 0 16px;max-width:340px;}
.btn{width:170px;text-align:center;background:#ab8c52;color:#fff;font-size:13px;padding:11px 0;border-radius:4px;}
.heroimg{flex:1;position:relative;background:#e7d2aa;}
.shelf{position:absolute;bottom:60px;left:50px;right:50px;height:8px;background:#ab8c52;border-radius:2px;}
.book{position:absolute;bottom:68px;width:26px;border-radius:2px 2px 0 0;}
.sec{padding:16px 40px 0;}
.sectitle{font-size:16px;font-weight:600;color:#222222;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:154px;border:1px solid #dedede;border-radius:6px;padding:9px;background:#fff;position:relative;}
.thumb{height:100px;border-radius:4px;margin-bottom:8px;}
.pname{font-size:12px;color:#222222;line-height:1.3;height:30px;overflow:hidden;font-family:Georgia,serif;}
.pprice{font-size:13px;font-weight:600;color:#ab8c52;margin-top:3px;font-family:Georgia,serif;}
.badge{position:absolute;top:7px;left:7px;color:#fff;font-size:9px;font-family:Georgia,serif;padding:3px 6px;border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Omnivore Books</div>
<div class="navlinks"><span>Cookbooks</span><span>Baking</span><span>Signed Copies</span><span>Events</span></div>
<div class="navcta">Visit The Shop</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">A Bookshelf, Well Stocked</div>
<div class="h1">Every cookbook worth cooking from.</div>
<div class="sub">A specialist's curated shelf of cookbooks, signed editions, and out-of-print culinary classics.</div>
<div class="btn">Shop New Arrivals</div>
</div>
<div class="heroimg">
<div class="shelf"></div>
<div class="book" style="height:130px;left:70px;background:#904b3c;"></div>
<div class="book" style="height:150px;left:100px;background:#3e5871;"></div>
<div class="book" style="height:110px;left:130px;background:#ab8c52;"></div>
<div class="book" style="height:140px;left:160px;background:#6e8269;"></div>
<div class="book" style="height:120px;left:190px;background:#8b6b3e;"></div>
</div>
</div>
<div class="sec">
<div class="sectitle">Staff Picks</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#d32f2f;">New</span><div class="thumb" style="background:linear-gradient(150deg,#904b3c,#e7d2aa)"></div><div class="pname">The Weekday Table</div><div class="pprice">$32.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#3e5871,#e7d2aa)"></div><div class="pname">Salt, Fire, Bread</div><div class="pprice">$29.00</div></div>
<div class="card"><span class="badge" style="background:#9acd32;">Sale</span><div class="thumb" style="background:linear-gradient(150deg,#6e8269,#e7d2aa)"></div><div class="pname">Signed: A Cook's Year</div><div class="pprice">$24.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#8b6b3e,#e7d2aa)"></div><div class="pname">The Pastry Notebook</div><div class="pprice">$36.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #677279; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ff0000; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #ff0000; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #677279; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff0000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Holgate Toys Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Assistant','SF Pro Text',-apple-system,system-ui,sans-serif; background:#ffffff; color:#1d1d1f; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e1e3e4;}
.logo{font-size:20px;font-weight:600;letter-spacing:.3px;}
.logo span{color:#ff0000;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:600;letter-spacing:.3px;}
.navlinks .active{color:#ff0000;border-bottom:2px solid #ff0000;padding-bottom:6px;}
.searchpill{border:1px solid #d0d0d0;border-radius:999px;height:36px;width:180px;font-size:12px;color:#677279;padding:0 16px;line-height:36px;}
.hero{background:#f3f3f3;padding:22px 36px;display:flex;align-items:center;gap:30px;height:220px;}
.hero-visual{width:300px;height:180px;background:repeating-linear-gradient(45deg,#e8c9a0,#e8c9a0 14px,#dcb98a 14px,#dcb98a 28px);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#8a5a2a;font-size:10px;text-align:center;}
.hero-txt h1{font-size:34px;font-weight:700;line-height:1.2;margin:0 0 10px;}
.hero-txt p{font-size:15px;color:#1d1d1f;margin:0 0 16px;max-width:340px;}
.btn{display:inline-block;background:#ff0000;color:#fff;font-size:15px;font-weight:600;letter-spacing:.5px;padding:12px 24px;border-radius:4px;}
.section{padding:8px 36px;}
.section h2{font-size:18px;font-weight:600;margin:0 0 12px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{position:relative;}
.imgbox{aspect-ratio:1/1;height:100px;background:#f3f3f3;margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:#7d7d7d;font-size:10px;text-align:center;}
.badge{position:absolute;top:0;left:0;background:#ff0000;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 6px;}
.pname{font-size:16px;font-weight:600;margin:0 0 2px;}
.price{font-size:18px;font-weight:700;}
.saleprice{color:#ff0000;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#121212;color:#fff;padding:14px 36px;display:flex;justify-content:space-between;font-size:11px;}
</style>
<div class="nav">
<div class="logo"><span>Holgate Toys</span></div>
<div class="navlinks"><span class="active">Wooden Toys</span><span>Puzzles</span><span>Building Blocks</span><span>Gift Guide</span></div>
<div class="searchpill">Search toys…</div>
</div>
<div class="hero">
<div class="hero-visual">WOODEN TOY PHOTOGRAPHY</div>
<div class="hero-txt">
<h1>Made in Vermont.<br>Built to last decades.</h1>
<p>Solid hardwood toys, finger-jointed and finished by hand since 1946.</p>
<div class="btn">Shop Best Sellers</div>
</div>
</div>
<div class="section">
<h2>Best Sellers</h2>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="imgbox">Wooden Train</div><div class="pname">Classic Wooden Train Set</div><div class="price saleprice">$42.00</div></div>
<div class="card"><div class="imgbox">Block Set</div><div class="pname">72-Piece Building Blocks</div><div class="price">$58.00</div></div>
<div class="card"><div class="imgbox">Puzzle</div><div class="pname">Alphabet Puzzle Board</div><div class="price">$24.00</div></div>
<div class="card"><div class="imgbox">Stacker</div><div class="pname">Rainbow Stacking Toy</div><div class="price">$29.00</div></div>
</div>
</div>
<div class="footer"><span>© Holgate Toys</span><span>Shipping · Returns · Wholesale · Contact</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.2; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; margin: 0; color: #707072; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.5; background: #111111; color: #ffffff;
border: none; border-radius: 9999px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.5; background: #f5f5f5; color: #111111;
border: 1px solid #111111; border-radius: 9999px;
padding: 16px 32px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 24px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707072; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.5; background: #ffffff; color: #111111;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
/* 사진 중심 캠페인: 어두운 그라디언트(사진 대역) 위에 타워링 업퍼케이스 디스플레이
타이포를 태워 넣는다 — Nike 의 유일한 채도는 sale-red 하나뿐. */
.campaign { position:relative; height:400px; overflow:hidden;
background:radial-gradient(ellipse at 30% 20%,#3a3a3c 0%,#111111 55%),
linear-gradient(160deg,#1a1a1a,#000000); }
.beam { position:absolute; width:520px; height:520px; border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,0.10),transparent 60%); top:-160px; right:-140px; }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:15px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#fff; margin:0; }
.navlinks { display:flex; gap:22px; font-size:12px; color:rgba(255,255,255,0.75); text-transform:uppercase; letter-spacing:0.04em; }
.searchpill { background:rgba(255,255,255,0.12); color:#fff; border:none; border-radius:999px; padding:8px 16px; font-size:12px; }
.campcopy { position:relative; z-index:2; padding:40px 40px 0; }
.campcopy .eyebrow { font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#d30005; }
.campcopy h1 { font-size:88px; font-weight:500; letter-spacing:0; text-transform:uppercase; line-height:0.88; margin:8px 0 0; color:#fff; }
.campcopy .sub { font-size:13px; color:rgba(255,255,255,0.7); margin-top:14px; max-width:360px; }
.shopnow { position:absolute; bottom:26px; left:40px; background:#fff; color:#111; border:none; border-radius:999px;
padding:10px 24px; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:0.04em; z-index:2; }
/* 8px 그리드 제품 카드 — 채도는 세일 배지 하나뿐 */
.products { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:20px 40px 30px; }
.pcard { background:#f5f5f5; border-radius:8px; padding:14px; display:flex; flex-direction:column; gap:6px; }
.pcard .swatch { height:70px; border-radius:6px; background:linear-gradient(160deg,#e5e5e5,#cacacb); position:relative; }
.pcard .tag { position:absolute; top:6px; left:6px; background:#d30005; color:#fff; font-size:9px; font-weight:700;
padding:2px 6px; border-radius:3px; text-transform:uppercase; }
.pcard h5 { font-size:12px; font-weight:500; margin:0; }
.pcard .price { font-size:12px; font-weight:700; color:#d30005; }
.pcard .price.n { color:#111; }
</style></head>
<body>
<div class="campaign">
<div class="beam"></div>
<nav>
<p class="brand">Nike</p>
<div class="navlinks"><span>New</span><span>Men</span><span>Women</span><span>Kids</span></div>
<button class="searchpill">Search</button>
</nav>
<div class="campcopy">
<span class="eyebrow">Just In</span>
<h1>Move<br>Faster</h1>
<p class="sub">Engineered for the runner who never stops chasing the split.</p>
</div>
<button class="shopnow">Shop the drop</button>
</div>
<div class="products">
<div class="pcard"><div class="swatch"><span class="tag">Sale</span></div><h5>Pegasus 41</h5><span class="price">$104.97</span></div>
<div class="pcard"><div class="swatch"></div><h5>Air Max 90</h5><span class="price n">$130</span></div>
<div class="pcard"><div class="swatch"><span class="tag">Sale</span></div><h5>Dri-FIT Tee</h5><span class="price">$28.97</span></div>
<div class="pcard"><div class="swatch"></div><h5>Metcon 9</h5><span class="price n">$140</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #003388; color: #f0b849;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #fafafa; color: #003388;
border: 1px solid #003388; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #32373c;
border: 1px solid #c3c3c3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f0b849; color: #1e1e1e;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#1e1e1e; box-sizing:border-box; font-family:Georgia, 'Times New Roman', serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; padding:0 32px; border-bottom:1px solid #e0e0e0; }
.brand { font-size:20px; font-weight:700; }
.navlinks { display:flex; gap:22px; margin-left:auto; }
.navlinks div { font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.navlinks div.active { color:#003388; border-bottom:2px solid #003388; padding-bottom:4px; }
.hero { background:#003388; color:#fafafa; padding:40px 32px; text-align:center; }
.hero h1 { font-size:38px; font-weight:700; margin:0 0 10px; }
.hero p { font-size:15px; margin:0 0 16px; opacity:.9; }
.hero .cta { display:inline-block; background:#f0b849; color:#1e1e1e; font-weight:600; text-transform:uppercase; letter-spacing:.4px; padding:12px 26px; border-radius:4px; }
.section { padding:20px 32px; }
.section h2 { font-size:22px; border-bottom:2px solid #003388; padding-bottom:8px; margin-bottom:14px; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.card { border:1px solid #dcdcde; border-radius:4px; padding:8px; background:#fff; }
.cover { aspect-ratio:2/3; border-radius:2px; margin-bottom:6px; }
.g1 { background:linear-gradient(160deg,#003388,#1c7c7c); }
.g2 { background:linear-gradient(160deg,#f0b849,#8a5c14); }
.g3 { background:linear-gradient(160deg,#cc1818,#5c0505); }
.g4 { background:linear-gradient(160deg,#4a4a4a,#111); }
.g5 { background:linear-gradient(160deg,#1c7c7c,#0a3838); }
.title { font-size:12px; font-weight:600; margin-bottom:2px; }
.author { font-size:11px; color:#757575; }
.price { font-size:11px; margin-top:4px; }
.badge { display:inline-block; background:#f0b849; color:#1e1e1e; font-size:9px; font-weight:700; text-transform:uppercase; padding:2px 6px; border-radius:2px; margin-bottom:4px; }
</style></head>
<body>
<nav>
<div class="brand">Faulkner House Books</div>
<div class="navlinks"><div class="active">Books</div><div>Events</div><div>About</div><div>Contact</div></div>
</nav>
<div class="hero">
<h1>A Sanctuary for Fine Literature</h1>
<p>Curated first editions, rare finds, and staff picks in the heart of the French Quarter</p>
<div class="cta">Browse Collection</div>
</div>
<div class="section">
<h2>Staff Picks</h2>
<div class="grid">
<div class="card"><span class="badge">Signed</span><div class="cover g1"></div><div class="title">The Sound and the Furrow</div><div class="author">A. Wexford</div><div class="price">$34.00</div></div>
<div class="card"><div class="cover g2"></div><div class="title">Delta Autumn Letters</div><div class="author">M. Cray</div><div class="price">$22.00</div></div>
<div class="card"><span class="badge">First Ed.</span><div class="cover g3"></div><div class="title">Absalom's Ledger</div><div class="author">R. Doyle</div><div class="price">$68.00</div></div>
<div class="card"><div class="cover g4"></div><div class="title">Quarter Hour Poems</div><div class="author">S. Vane</div><div class="price">$18.00</div></div>
<div class="card"><div class="cover g5"></div><div class="title">Yoknapatawpha Notes</div><div class="author">J. Holt</div><div class="price">$26.00</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #090909;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #090909;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #090909; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.38; letter-spacing: 0.5px; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.25px; background: #37c2dd; color: #000000;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.25px; background: #ffffff; color: #000000;
border: 1px solid #37c2dd; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #090909;
border: 1px solid #c2c2c2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.33; background: #aacccc; color: #090909;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;color:#555555;font-family:'proxima-nova',Arial,'Helvetica Neue',sans-serif;}
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#4b4f54;}
.logo{font-family:'mr-eaves-xl-modern','Helvetica Neue',sans-serif;font-weight:700;font-size:22px;color:#fff;}
.navlinks{display:flex;gap:18px;font-size:11px;font-weight:600;color:#d2d5d7;text-transform:uppercase;letter-spacing:.3px;}
.hero{display:flex;padding:22px 28px;gap:26px;align-items:center;background:#f6f6f6;}
.hero-txt{width:380px;}
.hero-txt h1{font-family:'mr-eaves-xl-modern','Helvetica Neue',sans-serif;font-size:30px;font-weight:700;color:#090909;margin:0 0 10px;line-height:1.2;}
.hero-txt p{font-size:13px;color:#555555;margin:0 0 16px;}
.cta{background:#37c2dd;color:#fff;padding:11px 24px;border-radius:8px;font-weight:700;font-size:13px;display:inline-block;}
.board{flex:1;height:190px;background:#4b4f54;border-radius:8px;position:relative;}
.board .panel{position:absolute;top:20px;left:30px;right:30px;bottom:40px;background:#f5f5f5;border-radius:4px;}
.board .panel::after{content:'';position:absolute;top:14px;left:14px;right:14px;height:3px;background:#37c2dd;}
.board .panel::before{content:'';position:absolute;top:26px;left:14px;width:60%;height:3px;background:#aacccc;}
.catrow{display:flex;background:#f5f5f5;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;}
.catrow div{flex:1;text-align:center;padding:10px 4px;font-size:10px;font-weight:700;color:#4b4f54;border-right:1px solid #e5e5e5;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0 28px;}
.card{padding:14px 10px;border-right:1px solid #eeeeee;border-bottom:1px solid #eeeeee;}
.box{height:82px;margin-bottom:8px;border-radius:4px;}
.b1{background:linear-gradient(160deg,#37c2dd,#1fa8c3);}
.b2{background:linear-gradient(160deg,#aacccc,#8bb5b5);}
.b3{background:linear-gradient(160deg,#4b4f54,#090909);}
.b4{background:linear-gradient(160deg,#5cb85c,#4a934a);}
.name{font-size:12px;font-weight:700;color:#090909;margin:0 0 3px;}
.spec{font-size:10px;color:#9d9d9d;margin:0 0 5px;font-family:'proxima-nova-condensed',Arial,sans-serif;}
.price{font-size:13px;font-weight:700;color:#4b4f54;}
</style>
<div class="nav">
<div class="logo">Ghent</div>
<div class="navlinks"><span>Markerboards</span><span>Tackboards</span><span>Partitions</span><span>Mobile Systems</span><span>Specifications</span></div>
</div>
<div class="hero">
<div class="hero-txt">
<h1>Boards at scale, engineered for commercial space</h1>
<p>Eighteen-foot markerboard walls, floor-to-ceiling tackboards, and mobile partitions built for the modern facility.</p>
<a class="cta">Browse Products</a>
</div>
<div class="board"><div class="panel"></div></div>
</div>
<div class="catrow"><div>Markerboards</div><div>Tackboards</div><div>Partitions</div><div>Mounting</div><div>Accessories</div></div>
<div class="grid">
<div class="card"><div class="box b1"></div><div class="name">NoteVision Glass Markerboard</div><div class="spec">4ft x 8ft · Wall Mount</div><div class="price">$612.00</div></div>
<div class="card"><div class="box b2"></div><div class="name">Fabric Tackboard Wall</div><div class="spec">6ft x 4ft · Aluminum Frame</div><div class="price">$389.00</div></div>
<div class="card"><div class="box b3"></div><div class="name">Mobile Partition, Double-Sided</div><div class="spec">72in H · Lockable Casters</div><div class="price">$845.00</div></div>
<div class="card"><div class="box b4"></div><div class="name">Marker & Eraser Tray Set</div><div class="spec">Mounting Bracket Included</div><div class="price">$42.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #aaaeb6; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #c62a32; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #222222;
border: 1px solid #c62a32; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaeb6; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #c62a32; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:flex; flex-direction:column; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#454545; box-sizing:border-box;
font-family:'Rubik',-apple-system,system-ui,'Segoe UI',sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
background:#222222; }
.brand { font-size:19px; font-weight:600; color:#ffffff; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:13px; font-weight:500; color:#dadce0; }
.cart { background:#c62a32; color:#fff; font-size:12px; font-weight:600; padding:8px 16px; border-radius:8px; }
.hero { display:flex; align-items:center; gap:34px; padding:26px 40px 20px; }
.htext { max-width:400px; }
.htext .kicker { font-size:12px; font-weight:600; color:#c62a32; text-transform:uppercase; letter-spacing:0.8px; margin-bottom:10px; }
.htext h1 { font-size:28px; font-weight:600; color:#222222; margin:0 0 12px; line-height:1.25; }
.htext p { font-size:14px; color:#454545; line-height:1.5; margin:0 0 16px; }
.btn { display:inline-block; background:#c62a32; color:#fff; font-size:13px; font-weight:600; padding:11px 24px; border-radius:8px; }
.rig { width:230px; height:150px; border-radius:12px; flex-shrink:0; background:linear-gradient(150deg,#2c2d2e,#c62a32 130%); position:relative; }
.rig::after { content:'IN STOCK'; position:absolute; top:12px; right:12px; background:#279a4b; color:#fff; font-size:10px;
font-weight:600; padding:3px 10px; border-radius:999px; }
.section { padding:0 40px; }
.section h2 { font-size:18px; font-weight:600; color:#222222; margin:0 0 14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card { background:#f7f7f7; border-radius:12px; padding:12px; position:relative; }
.cover { height:82px; border-radius:8px; margin-bottom:10px; }
.o1 .cover { background:#c62a32; } .o2 .cover { background:#2c2d2e; } .o3 .cover { background:#ffaa47; } .o4 .cover { background:#dadce0; }
.tag { position:absolute; top:20px; left:20px; font-size:9px; font-weight:700; color:#fff; padding:2px 7px; border-radius:8px; }
.tag.sale { background:#d92017; } .tag.stock { background:#279a4b; }
.card .t { font-size:13px; font-weight:500; color:#222222; margin:0 0 4px; }
.card .p { font-size:13px; font-weight:600; color:#c62a32; }
.trust { margin-top:auto; flex-shrink:0; display:flex; padding:14px 40px; background:#2c2d2e; }
.trust span { flex:1; text-align:center; font-size:11px; font-weight:500; color:#dadce0; }
</style></head>
<body>
<nav>
<div class="brand">GT Omega</div>
<div class="navlinks"><span>Racing Seats</span><span>Sim Rigs</span><span>Gaming Chairs</span><span>Wheels</span></div>
<div class="cart">Cart 2</div>
</nav>
<div class="hero">
<div class="htext">
<div class="kicker">Race-Bred Engineering</div>
<h1>Sim-racing hardware built like the real thing.</h1>
<p>Carbon-fiber shells, stitched PU leather, and aluminum hardware — precision-engineered rigs and racing chairs.</p>
<span class="btn">Shop Racing Seats</span>
</div>
<div class="rig"></div>
</div>
<div class="section">
<h2>Best Sellers</h2>
<div class="grid">
<div class="card o1"><div class="tag sale">SALE</div><div class="cover"></div><div class="t">Apex GT Racing Seat</div><div class="p">$399.99</div></div>
<div class="card o2"><div class="tag stock">IN STOCK</div><div class="cover"></div><div class="t">Omega Cockpit Rig</div><div class="p">$549.99</div></div>
<div class="card o3"><div class="tag sale">SALE</div><div class="cover"></div><div class="t">Carbon Wheel Stand</div><div class="p">$249.99</div></div>
<div class="card o4"><div class="tag stock">IN STOCK</div><div class="cover"></div><div class="t">Pro Gaming Chair</div><div class="p">$299.99</div></div>
</div>
</div>
<div class="trust"><span>Carbon-Fiber Build</span><span>2-Year Warranty</span><span>Free UK Delivery</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000a12;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000a12;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.27; margin: 0; color: #000a12; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #9b9b9b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #2f4a7e; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #2f4a7e;
border: 1px solid #2f4a7e; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #000a12;
border: 1px solid #bfc2c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9b9b9b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.27; letter-spacing: 1.2px; background: #ffff00; color: #000a12;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Gotham Medium','Gotham Book',Arial,sans-serif; color:#000a12; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dedede;}
.logo{font-size:19px;font-weight:500;color:#000a12;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#444;}
.cart{background:#2f4a7e;color:#fff;font-size:13px;font-weight:500;padding:9px 18px;border-radius:4px;}
.hero{height:250px;position:relative;overflow:hidden;background:radial-gradient(circle at 75% 60%,#ffb020 0%,#c9591f 30%,#1d2d5f 65%,#000a12 100%);}
.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(0,10,18,0.25),rgba(0,10,18,0.55));}
.flame{position:absolute;right:110px;bottom:20px;width:70px;height:90px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#ffe27a,#ff8c1a 55%,transparent 80%);opacity:0.9;}
.pit{position:absolute;right:70px;bottom:0;width:150px;height:36px;border-radius:9999px;background:#1d2d5f;}
.herotext{position:relative;z-index:2;padding:0 40px;height:100%;display:flex;flex-direction:column;justify-content:center;max-width:420px;}
.h1{font-size:34px;font-weight:500;line-height:1.18;color:#fff;margin:0 0 12px;}
.sub{font-size:15px;color:#e4e8ef;line-height:1.5;margin:0 0 18px;max-width:340px;}
.btn{display:inline-block;background:#2f4a7e;color:#fff;font-size:14px;font-weight:500;letter-spacing:0.2px;padding:13px 26px;border-radius:4px;width:fit-content;}
.sale{position:absolute;top:20px;left:40px;background:#ffff00;color:#000a12;font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;padding:5px 10px;border-radius:4px;z-index:3;}
.grid{display:flex;gap:14px;padding:18px 40px 0;}
.card{width:196px;background:#fff;border:1px solid #e4e4e4;border-radius:8px;overflow:hidden;}
.thumb{height:90px;background:#f3f4f4;position:relative;}
.catbadge{position:absolute;top:8px;left:8px;background:#2f4a7e;color:#fff;font-size:10px;font-weight:500;letter-spacing:1px;text-transform:uppercase;padding:4px 8px;border-radius:4px;}
.cbody{padding:11px 13px;}
.ctitle{font-size:15px;font-weight:400;margin:0 0 5px;color:#000a12;}
.stars{color:#ffff00;font-size:11px;text-shadow:0 0 1px #999;margin-bottom:4px;}
.cprice{font-size:16px;font-weight:500;margin:0;color:#000a12;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#000a12;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;color:#98a7ba;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Outland Living</div>
<div class="navlinks"><span>Fire Pits</span><span>Propane</span><span>Accessories</span><span>Compare</span></div>
<div class="cart">Cart (2)</div>
</div>
<div class="hero">
<div class="pit"></div>
<div class="flame"></div>
<div class="sale">Sale · Ends Sunday</div>
<div class="herotext">
<div class="h1">An open flame,<br>on your own deck.</div>
<div class="sub">CSA-certified fire pits built for the back patio — auto-ignition, wind guard included.</div>
<div class="btn">Shop Fire Pits</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="catbadge">Propane</div></div><div class="cbody"><div class="ctitle">Cascade 34" Fire Table</div><div class="stars">★★★★★</div><div class="cprice">$899</div></div></div>
<div class="card"><div class="thumb"><div class="catbadge">Wood</div></div><div class="cbody"><div class="ctitle">Timber Steel Fire Bowl</div><div class="stars">★★★★☆</div><div class="cprice">$349</div></div></div>
<div class="card"><div class="thumb"><div class="catbadge">Gas</div></div><div class="cbody"><div class="ctitle">Summit Linear Fire Pit</div><div class="stars">★★★★★</div><div class="cprice">$1,249</div></div></div>
<div class="card"><div class="thumb"><div class="catbadge">Parts</div></div><div class="cbody"><div class="ctitle">Wind Guard, Universal</div><div class="stars">★★★★★</div><div class="cprice">$79</div></div></div>
</div>
<div class="footer"><span>CSA Certified · Free Freight Shipping</span><span>30-Day Returns</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #007bc6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #007bc6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bee0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e4007f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007bc6; color: #000000;
border: 1px solid #e4007f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #007bc6; color: #f5f5f5;
border: 1px solid #278fce; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bee0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2467bb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:2px solid #f7b146; }
.brand { font-weight:700; font-size:16px; color:#007bc6; }
.navlinks { display:flex; gap:20px; font-size:13.5px; letter-spacing:0.03em; color:#333; }
.hero { text-align:center; padding:20px 32px 10px; }
.beep { font-size:100px; font-weight:700; line-height:1; margin:0; color:#000; letter-spacing:-2px; }
.tag { font-size:30px; font-weight:700; margin:6px 0 16px; }
.hl { display:inline-block; background:#007bc6; color:#fff; font-size:17px; font-weight:500; letter-spacing:0.1em;
padding:8px 14px; border-radius:2px; }
.circles { display:flex; gap:14px; justify-content:center; padding:10px 32px 24px; }
.circle { width:88px; height:88px; border-radius:9999px; border:2px solid #e4007f; display:flex; align-items:center;
justify-content:center; text-align:center; font-size:12px; color:#e4007f; font-weight:500; }
.circle.on { background:#e4007f; color:#fff; }
.feature { background:#efefef; padding:22px 36px; display:flex; gap:16px; }
.fcard { flex:1; background:#fff; border-radius:8px; padding:16px; box-shadow:rgba(0,0,0,0.15) 0px 10px 20px 0px; }
.fcard .ic { width:32px; height:32px; border-radius:9999px; background:#f6ac19; margin-bottom:8px; }
.fcard h4 { font-size:14px; margin:0 0 4px; }
.fcard p { font-size:12px; color:#595153; margin:0; }
.dl { background:#000; color:#fff; padding:16px 36px; display:flex; justify-content:center; gap:40px; }
.dl span { font-size:16px; font-weight:700; letter-spacing:0.1em; }
</style></head>
<body>
<nav>
<span class="brand">EasyWallet</span>
<div class="navlinks"><span>Key Features</span><span>Watch the Video</span><span>Partner Banks</span><span>Security & Trust</span></div>
</nav>
<section class="hero">
<p class="beep">BEEP!</p>
<p class="tag">Smarter Payments, Total Peace of Mind!</p>
<div class="hl">One Card, One Tap — Step Into a Cashless Life</div>
</section>
<section class="circles">
<div class="circle on">Tap to Ride</div>
<div class="circle">Scan to Pay</div>
<div class="circle">Auto Top-Up</div>
<div class="circle">Card Management</div>
</section>
<section class="feature">
<div class="fcard"><div class="ic"></div><h4>The Smartest Digital Wallet</h4><p>From physical card to digital wallet — 20 years of trust, extended.</p></div>
<div class="fcard"><div class="ic"></div><h4>Simplify Your Everyday Life</h4><p>Manage transit, purchases, and bills all in one place.</p></div>
<div class="fcard"><div class="ic"></div><h4>Automatic e-Invoice Lottery Matching</h4><p>Never miss a winning receipt again.</p></div>
</section>
<section class="dl"><span>App Store</span><span>Google Play</span></section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #545454; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #1990c6; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #f6f6f6; color: #141414;
border: 1px solid #1990c6; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f6f6f6; color: #141414;
border: 1px solid #bebebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #545454; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #1990c6; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f6f6; font-family:'Inter','Helvetica Neue',Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 44px;border-bottom:1px solid #e2e2e2;}
.logo{font-size:15px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:#141414;}
.navlinks{display:flex;gap:28px;font-size:12px;font-weight:400;letter-spacing:1px;text-transform:uppercase;color:#545454;}
.cart{width:28px;height:28px;border-radius:9999px;border:1px solid #e2e2e2;display:flex;align-items:center;justify-content:center;font-size:11px;color:#141414;}
.hero{height:308px;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;background:#ffffff;}
.kicker{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#8c8c8c;margin-bottom:18px;}
.h1{font-size:36px;font-weight:300;letter-spacing:-0.5px;color:#141414;margin:0 0 16px;}
.sub{font-size:14px;color:#545454;max-width:400px;line-height:1.6;margin:0 0 26px;}
.cta{display:inline-flex;align-items:center;justify-content:center;width:190px;height:46px;background:#1990c6;color:#ffffff;font-size:13px;font-weight:500;letter-spacing:0.5px;border-radius:9999px;}
.dot{width:64px;height:64px;border-radius:9999px;background:radial-gradient(circle at 35% 35%,#8fc9e3,#1990c6 70%,#136f99);margin-bottom:22px;}
.sec{padding:36px 44px 0;}
.secTitle{font-size:20px;font-weight:400;color:#141414;margin-bottom:18px;text-align:center;}
.grid{display:flex;gap:20px;justify-content:center;}
.card{width:190px;background:#ffffff;border-radius:8px;padding:14px;position:relative;}
.thumb{height:110px;border-radius:6px;margin-bottom:12px;}
.newbadge{position:absolute;top:22px;left:22px;background:#1990c6;color:#fff;font-size:9px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:3px 8px;border-radius:9999px;}
.pname{font-size:13px;font-weight:500;color:#141414;margin:0 0 4px;}
.pprice{font-size:13px;color:#545454;}
</style>
<div class="nav">
<div class="logo">Westman Atelier</div>
<div class="navlinks"><span>Face</span><span>Eyes</span><span>Lip</span><span>Sets</span></div>
<div class="cart">2</div>
</div>
<div class="hero">
<div class="dot"></div>
<div class="kicker">Curation Over Collection</div>
<div class="h1">Skincare-grade makeup.</div>
<div class="sub">A refined edit of complexion essentials, formulated to feel like nothing at all.</div>
<div class="cta">Shop The Edit</div>
</div>
<div class="sec">
<div class="secTitle">Bestsellers</div>
<div class="grid">
<div class="card"><span class="newbadge">New</span><div class="thumb" style="background:linear-gradient(135deg,#dedede,#f6f6f6);"></div><div class="pname">Baby Cheeks Blush Stick</div><div class="pprice">$38</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e2e2e2,#ffffff);"></div><div class="pname">Vital Skin Foundation</div><div class="pprice">$68</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f0f0f0,#dedede);"></div><div class="pname">Eye Pods Palette</div><div class="pprice">$58</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00e8c5; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00e8c5; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #097262; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #21fce3; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00e8c5; color: #000000;
border: 1px solid #21fce3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00e8c5; color: #111111;
border: 1px solid #03c6a8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #097262; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #05ebca; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box; font-family:"Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 26px; }
.brand { font-weight:900; font-size:15px; }
.navlinks { display:flex; gap:20px; font-size:12px; }
.navlinks span:first-child { color:#00e8c5; }
.btn-login { background:#fff; color:#171b21; border:none; border-radius:50px; padding:9px 16px; font-size:12px; }
.megahero { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px 0; }
.mega { font-size:120px; font-weight:800; margin:0; line-height:0.9; }
.subline { font-size:16px; color:#e6e6e6; margin-top:10px; }
.chips { display:flex; justify-content:center; gap:10px; padding:20px 0; }
.chip-mint { background:#00e8c5; color:#171b21; border-radius:50px; padding:12px 18px; font-size:12px; }
.chip-white { background:#fff; color:#171b21; border-radius:30px; padding:10px 16px; font-size:12px; }
.chip-bright { background:#21fce3; color:#171b21; border-radius:1000px; padding:10px 16px; font-size:12px; }
.footer { display:flex; justify-content:center; gap:10px; padding:14px 0; }
.social { background:#121212; color:#fff; border-radius:3px; padding:8px 12px; font-size:12px; }
</style></head>
<body>
<nav>
<div class="brand">Quotabook</div>
<div class="navlinks"><span>Financial Consulting</span><span>Pricing</span><span>About Us</span></div>
<button class="btn-login">Log In</button>
</nav>
<div class="megahero">
<h1 class="mega">EQUITY</h1>
<div class="subline">The only all-in-one cap table platform</div>
</div>
<div class="chips">
<div class="chip-mint">Instant Payments</div>
<div class="chip-white">Digital Platform</div>
<div class="chip-bright">Shareholder Registry</div>
</div>
<div class="footer">
<div class="social">LinkedIn</div>
<div class="social">Blog</div>
<div class="social">Stories</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #01a4ff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #01a4ff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #faf9f6; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #01a4ff; color: #faf9f6;
border: 1px solid #faf9f6; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #01a4ff; color: #000000;
border: 1px solid #28b1fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29b2fe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#141311; color:#faf9f6; box-sizing:border-box;
font-family:"Matter Regular",-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-weight:400; font-size:16px; }
.navlinks { display:flex; gap:22px; font-size:15px; color:#868584; }
.pill { background:#353534; color:#afaeac; border-radius:50px; padding:10px 18px; font-size:15px; }
.hero { padding:34px 34px 18px; }
.hero h1 { font-size:52px; font-weight:400; letter-spacing:-1.6px; line-height:1.02; margin:0 0 12px; max-width:600px; }
.hero p { font-size:18px; color:#afaeac; margin:0 0 18px; max-width:480px; line-height:1.3; }
.row { display:flex; gap:12px; }
.terminal { margin:6px 34px 20px; background:#1a1a18; border-radius:12px; padding:20px 24px; }
.tline { font-family:"Matter Mono Regular",monospace; font-size:14px; line-height:1.9; }
.tline .p { color:#666469; }
.tline .cmd { color:#faf9f6; }
.tline .out { color:#868584; }
.photo { position:relative; margin:0 34px; height:150px; border-radius:8px; overflow:hidden;
background:linear-gradient(120deg,#2b3a2c,#3f5940 40%,#8a7a4a 100%); display:flex; align-items:flex-end; padding:16px; }
.photo span { font-size:12px; letter-spacing:2.4px; text-transform:uppercase; color:#faf9f6; }
</style></head>
<body>
<nav>
<span class="brand">Warp</span>
<div class="navlinks"><span>Product</span><span>Enterprise</span><span>Pricing</span><span>Blog</span></div>
<span class="pill">Download</span>
</nav>
<section class="hero">
<h1>The Agentic Development Environment</h1>
<p>A terminal built for coding with multiple agents, blocks, and calm dark focus.</p>
<div class="row"><span class="pill">Download Warp</span><span class="pill">Read the docs</span></div>
</section>
<div class="terminal">
<div class="tline"><span class="p">~/projects/atlas</span> <span class="cmd">warp ai "add retry logic to the fetch client"</span></div>
<div class="tline"><span class="out">→ Editing src/http/client.ts · added exponential backoff, 3 retries</span></div>
<div class="tline"><span class="p">~/projects/atlas</span> <span class="cmd">git commit -m "add retry logic"</span></div>
</div>
<div class="photo"><span>Terminal Reimagined for the Agent Era</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.6px; background: #33785d; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.6px; background: #ffffff; color: #33785d;
border: 1px solid #33785d; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #bedccb; color: #1a1a1a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f6f6; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.promo{height:36px;background:#33785d;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;letter-spacing:.4px;}
.nav{height:64px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #eee;}
.logo{font-size:20px;font-weight:700;color:#1a1a1a;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#333;}
.hero{display:flex;height:230px;}
.left{width:420px;padding:38px 36px;display:flex;flex-direction:column;justify-content:center;}
.h1{font-size:34px;font-weight:700;line-height:1.2;color:#1a1a1a;margin:0 0 14px;}
.sub{font-size:15px;line-height:1.6;color:#333;max-width:340px;margin:0 0 18px;}
.ctarow{display:flex;gap:10px;}
.cta{background:#33785d;color:#fff;font-size:14px;font-weight:700;padding:12px 24px;border-radius:8px;}
.ghost{background:transparent;color:#33785d;font-size:14px;font-weight:700;padding:12px 20px;border:1px solid #33785d;border-radius:8px;}
.right{flex:1;position:relative;background:linear-gradient(135deg,#bedccb,#cbc3e3);}
.vac{position:absolute;left:60px;top:30px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#33785d,#1a1a1a 80%);}
.vac:before{content:'';position:absolute;bottom:-6px;left:-30px;width:60px;height:24px;border-radius:12px;background:#1a1a1a;}
.sec{padding:18px 36px 0;}
.seclabel{font-size:15px;font-weight:700;color:#1a1a1a;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:210px;background:#fff;border-radius:12px;padding:12px;position:relative;}
.thumb{aspect-ratio:1/1;background:#f0f0f0;border-radius:8px;margin-bottom:8px;}
.ptitle{font-size:14px;font-weight:700;margin:0 0 4px;}
.pprice{font-size:14px;color:#333;}
.rating{font-size:11px;color:#f5a623;margin-top:2px;}
.ghostmini{position:absolute;top:10px;right:10px;font-size:9px;color:#33785d;border:1px solid #33785d;padding:2px 6px;border-radius:9999px;}
</style>
<div class="promo">FREE SHIPPING · 30-DAY RISK-FREE TRIAL</div>
<div class="nav">
<div class="logo">Shark</div>
<div class="navlinks"><div>Vacuums</div><div>Robots</div><div>Hair Care</div><div>Kitchen</div></div>
</div>
<div class="hero">
<div class="left">
<div class="h1">Cleaning, out of<br>the hardware aisle.</div>
<div class="sub">Premium wellness tech for a $200–$600 considered purchase — not a commodity appliance.</div>
<div class="ctarow"><div class="cta">Shop Now</div><div class="ghost">Compare Models</div></div>
</div>
<div class="right"><div class="vac"></div></div>
</div>
<div class="sec">
<div class="seclabel">Best Sellers</div>
<div class="grid">
<div class="card"><span class="ghostmini">Compare</span><div class="thumb" style="background:linear-gradient(135deg,#33785d,#f6f6f6)"></div><div class="ptitle">Stratos Cordless Vacuum</div><div class="pprice">$399.99</div><div class="rating">★★★★★ 4.7</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#cbc3e3,#f6f6f6)"></div><div class="ptitle">Matrix Robot Vacuum</div><div class="pprice">$599.99</div><div class="rating">★★★★★ 4.5</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#bedccb,#f6f6f6)"></div><div class="ptitle">FlexStyle Hair Tool</div><div class="pprice">$249.99</div><div class="rating">★★★★☆ 4.3</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a1a1a,#33785d)"></div><div class="ptitle">Steam & Scrub Mop</div><div class="pprice">$229.99</div><div class="rating">★★★★★ 4.6</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f8f5; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f8f5; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; font-weight: 400; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0.1em; background: #191919; color: #f7f8f5;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0.1em; background: transparent; color: #191919;
border: 1px solid #191919; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f7f8f5; color: #121212;
border: 1px solid #bebebc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1; letter-spacing: 0.12em; background: transparent; color: #878787;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Messina','Helvetica Neue',Arial,sans-serif; background:#f7f8f5; color:#121212; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dcdcdc;}
.logo{font-family:Georgia,serif;font-size:20px;}
.navlinks{display:flex;gap:24px;font-size:13px;letter-spacing:.04em;}
.hero{height:290px;position:relative;background:linear-gradient(rgba(25,25,25,.4),rgba(25,25,25,.4)),linear-gradient(135deg,#414141,#191919);display:flex;flex-direction:column;justify-content:flex-end;padding:0 44px 32px;color:#f7f8f5;}
.artist{font-size:14px;opacity:.8;margin-bottom:6px;}
.hero h1{font-family:Georgia,serif;font-size:44px;font-weight:400;margin:0 0 6px;}
.daterange{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;}
.section{padding:24px 44px 0;}
.sectitle{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#878787;margin-bottom:16px;}
.grid{display:flex;gap:20px;}
.card{width:200px;}
.thumb{height:150px;background:#dcdcdc;margin-bottom:10px;}
.artistname{font-size:14px;color:#121212;}
.worktitle{font-style:italic;font-size:13px;color:#121212;}
.meta{font-size:11px;color:#878787;margin-top:2px;}
</style>
<div class="nav">
<div class="logo">Xavier Hufkens</div>
<div class="navlinks"><div>Artists</div><div>Exhibitions</div><div>News</div><div>Contact</div></div>
</div>
<div class="hero">
<div class="artist">Luc Tuymans</div>
<h1>The Passage</h1>
<div class="daterange">4 September – 25 October</div>
</div>
<div class="section">
<div class="sectitle">Current Exhibition</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="artistname">Luc Tuymans</div><div class="worktitle">Untitled</div><div class="meta">Oil on canvas, 2024</div></div>
<div class="card"><div class="thumb" style="background:#aeaeae"></div><div class="artistname">Francis Alÿs</div><div class="worktitle">Children's Game</div><div class="meta">Video, 8 min, 2023</div></div>
<div class="card"><div class="thumb" style="background:#878787"></div><div class="artistname">Berlinde De Bruyckere</div><div class="worktitle">Cripplewood</div><div class="meta">Wax and epoxy, 2022</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212322;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212322;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #212322; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #505357; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #00bbff; color: #000000;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #ffffff; color: #212322;
border: 1px solid #00bbff; border-radius: 6px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #212322;
border: 1px solid #c8c8c8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #505357; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #00bbff; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'acumin-pro','Acumin Pro',Arial,Helvetica,sans-serif; color:#454545; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #cacac8;}
.logo{font-size:20px;font-weight:600;color:#212322;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#212322;}
.searchpill{width:170px;height:34px;border-radius:9999px;background:#eeeeee;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#505357;}
.hero{height:250px;display:flex;background:linear-gradient(120deg,#ffffff 55%,#081d4e 100%);padding:0 36px;align-items:center;}
.herotext{width:420px;}
.badge{display:inline-block;background:#00bbff;color:#fff;font-size:11px;font-weight:600;padding:4px 12px;border-radius:9999px;margin-bottom:14px;}
.headline{font-size:28px;font-weight:600;letter-spacing:-0.4px;color:#212322;margin-bottom:12px;line-height:1.25;}
.sub{font-size:14px;color:#454545;margin-bottom:18px;max-width:340px;}
.btn{display:inline-block;background:#00bbff;color:#fff;font-size:14px;font-weight:600;padding:12px 26px;border-radius:6px;}
.chargebox{width:220px;height:150px;margin-left:70px;background:#dedede;border-radius:12px;position:relative;overflow:hidden;}
.bolt{position:absolute;left:80px;top:35px;width:60px;height:80px;background:#00bbff;clip-path:polygon(60% 0,20% 55%,50% 55%,40% 100%,90% 40%,55% 40%);}
.sec{padding:18px 36px 0;}
.filterRow{display:flex;gap:8px;margin-bottom:14px;}
.chip{background:#eeeeee;border-radius:9999px;padding:5px 14px;font-size:12px;color:#454545;}
.chip.active{background:#0064cd;color:#fff;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border:1px solid #dedede;border-radius:12px;padding:12px;position:relative;}
.tag{position:absolute;top:8px;left:8px;font-size:9px;font-weight:600;letter-spacing:.3px;color:#fff;padding:2px 8px;border-radius:6px;}
.thumb{height:90px;border-radius:8px;margin-bottom:10px;}
.pname{font-size:14px;font-weight:600;color:#212322;}
.pprice{font-size:13px;color:#0064cd;font-weight:600;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Nimble</div>
<div class="navlinks"><span>Chargers</span><span>Bags</span><span>Cables</span></div>
<div class="searchpill">Search...</div>
</div>
<div class="hero">
<div class="herotext">
<div class="badge">New: Ocean-Bound Nylon</div>
<div class="headline">Power that gives back to the planet it plugs into.</div>
<div class="sub">Fast-charge tech built from recycled materials, not virgin plastic.</div>
<div class="btn">Shop Chargers</div>
</div>
<div class="chargebox"><div class="bolt"></div></div>
</div>
<div class="sec">
<div class="filterRow"><div class="chip active">All</div><div class="chip">Chargers</div><div class="chip">Bags</div><div class="chip">Sustainable</div></div>
<div class="grid">
<div class="card"><div class="tag" style="background:#0064cd;">Bestseller</div><div class="thumb" style="background:linear-gradient(135deg,#00bbff,#081d4e)"></div><div class="pname">65W GaN Charger</div><div class="pprice">$49.95</div></div>
<div class="card"><div class="tag" style="background:#708270;">Sustainable</div><div class="thumb" style="background:linear-gradient(135deg,#708270,#5f3f3f)"></div><div class="pname">Recycled Cable 6ft</div><div class="pprice">$19.95</div></div>
<div class="card"><div class="tag" style="background:#00bbff;">New</div><div class="thumb" style="background:linear-gradient(135deg,#5f3f3f,#64162e)"></div><div class="pname">Leather Card Sleeve</div><div class="pprice">$34.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#212322,#081d4e)"></div><div class="pname">Power Bank 10K</div><div class="pprice">$59.95</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #D8385E; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #D8385E; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-size: 20px; font-weight:700; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-size: 12px; font-weight:400; line-height:1.4; margin: 0; color: #e9a9b9; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #1D856C; color: #ffffff;
border: none; border-radius: 999px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #D8385E; color: #000000;
border: 1px solid #1D856C; border-radius: 999px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #D8385E; color: #f5f5f5;
border: 1px solid #df6784; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e9a9b9; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #be4360; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: "Rubik", "Inter", -apple-system, sans-serif; background: #FBF8EC; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
.stage { position: relative; width: 960px; height: 640px; overflow: hidden; }
.blob { position: absolute; border-radius: 9999px; filter: blur(0px); }
.b1 { width: 300px; height: 300px; background: #FFEEF2; top: -90px; left: -70px; }
.b2 { width: 260px; height: 260px; background: #E0DFFF; top: -60px; right: -80px; }
.b3 { width: 220px; height: 220px; background: #DCFF79; opacity: 0.5; bottom: -90px; left: 40%; }
nav { position: relative; z-index: 2; height: 68px; display: flex; align-items: center; justify-content: space-between;
padding: 0 40px; }
.brand-name { font-size: 20px; font-weight: 700; color: #231B22; letter-spacing: -0.2px; }
.navlinks { display: flex; gap: 26px; font-size: 13px; font-weight: 500; color: #6B6B78; }
.btn-pill { border-radius: 9999px; padding: 9px 20px; font-size: 13px; font-weight: 600; }
.btn-primary { background: #D8385E; color: #ffffff; }
.hero { position: relative; z-index: 2; padding: 8px 40px 0; display: flex; align-items: center; gap: 40px; height: 262px; }
.hero-copy { flex: 1.1; display: flex; flex-direction: column; gap: 14px; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; background: #FFEEF2; color: #710252; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 12px; border-radius: 9999px; width: fit-content; }
.hero-copy h1 { margin: 0; font-size: 40px; line-height: 48px; font-weight: 700; color: #231B22; letter-spacing: -0.5px; }
.hero-copy p { margin: 0; font-size: 15px; line-height: 22px; color: #6B6B78; max-width: 380px; }
.hero-actions { display: flex; gap: 12px; margin-top: 4px; }
.btn-outline { border: 2px solid #231B22; color: #231B22; background: transparent; }
.hero-visual { flex: 1; height: 100%; position: relative; }
.pose-card { position: absolute; width: 190px; background: #ffffff; border-radius: 16px; box-shadow: 0 12px 24px rgba(35,27,34,0.10);
padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.pose-card.top { top: 4px; right: 40px; }
.pose-card.bottom { top: 130px; right: 190px; width: 170px; }
.pose-ring { width: 46px; height: 46px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.ring-green { background: #C1EEDB; }
.ring-purple { background: #E0DFFF; }
.pose-card .t { font-size: 13px; font-weight: 700; color: #231B22; }
.pose-card .s { font-size: 11px; color: #6B6B78; }
.section { position: relative; z-index: 2; padding: 22px 40px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.section-head h2 { margin: 0; font-size: 20px; font-weight: 700; color: #231B22; }
.section-head span { font-size: 12px; color: #6B6B78; }
.cards { display: flex; gap: 16px; }
.feature-card { flex: 1; background: #ffffff; border-radius: 16px; padding: 16px; box-shadow: 0 6px 16px rgba(35,27,34,0.06);
display: flex; flex-direction: column; gap: 8px; }
.f-icon { width: 40px; height: 40px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.icon-a { background: #FFEBF1; }
.icon-b { background: #C1EEDB; }
.icon-c { background: #E0DFFF; }
.feature-card h3 { margin: 0; font-size: 14px; font-weight: 700; color: #231B22; }
.feature-card p { margin: 0; font-size: 12px; line-height: 17px; color: #6B6B78; }
.feature-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 9999px; width: fit-content; }
.tag-hope { background: #C1EEDB; color: #1D856C; }
.tag-energy { background: #FCD6C3; color: #CA4808; }
.tag-relax { background: #E0DFFF; color: #5340C9; }
.stats-strip { position: relative; z-index: 2; margin: 22px 40px 0; background: #231B22; border-radius: 16px;
padding: 16px 28px; display: flex; justify-content: space-between; align-items: center; }
.stat-item { display: flex; flex-direction: column; gap: 2px; }
.stat-item .n { font-size: 20px; font-weight: 700; color: #DCFF79; }
.stat-item .l { font-size: 11px; color: #D7D7E0; }
</style>
<div class="stage">
<div class="blob b1"></div>
<div class="blob b2"></div>
<div class="blob b3"></div>
<nav>
<span class="brand-name">Wellhub Yoga</span>
<div class="navlinks"><span>Classes</span><span>Meditation</span><span>Coaches</span><span>Plans</span></div>
<button class="btn-pill btn-primary">Start free trial</button>
</nav>
<section class="hero">
<div class="hero-copy">
<span class="eyebrow">🌿 Wellness, reimagined</span>
<h1>Find your calm, one practice at a time</h1>
<p>Guided yoga, breathwork, and mindful movement — built into a single wellness experience for every body.</p>
<div class="hero-actions">
<button class="btn-pill btn-primary">Start free trial</button>
<button class="btn-pill btn-outline">Explore classes</button>
</div>
</div>
<div class="hero-visual">
<div class="pose-card top">
<div class="pose-ring ring-green">🧘</div>
<span class="t">Morning Flow</span>
<span class="s">18 min · All levels</span>
</div>
<div class="pose-card bottom">
<div class="pose-ring ring-purple">🌙</div>
<span class="t">Evening Wind-down</span>
<span class="s">12 min · Restorative</span>
</div>
</div>
</section>
<section class="section">
<div class="section-head"><h2>Practice with intention</h2><span>Updated weekly</span></div>
<div class="cards">
<div class="feature-card">
<div class="f-icon icon-a">🌸</div>
<h3>Studio Yoga</h3>
<p>Live and on-demand sessions from partner studios near you.</p>
<span class="feature-tag tag-hope">Popular</span>
</div>
<div class="feature-card">
<div class="f-icon icon-b">🍃</div>
<h3>Guided Meditation</h3>
<p>Short, calming audio sessions for focus, sleep, and stress relief.</p>
<span class="feature-tag tag-energy">New</span>
</div>
<div class="feature-card">
<div class="f-icon icon-c">💫</div>
<h3>Wellness Tracking</h3>
<p>Gentle progress insights that celebrate consistency over intensity.</p>
<span class="feature-tag tag-relax">Beta</span>
</div>
</div>
</section>
<div class="stats-strip">
<div class="stat-item"><span class="n">14,000+</span><span class="l">Studios worldwide</span></div>
<div class="stat-item"><span class="n">4.9 / 5</span><span class="l">Average class rating</span></div>
<div class="stat-item"><span class="n">92%</span><span class="l">Practice weekly</span></div>
<div class="stat-item"><span class="n">Cross-platform</span><span class="l">Web · iOS · Android</span></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f2f2f2; color: #0d0d0d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f2f2f2; color: #0d0d0d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #0d0d0d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #fab228; color: #0d0d0d;
border: none; border-radius: 9999px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #f2f2f2; color: #0d0d0d;
border: 1px solid #fab228; border-radius: 9999px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f2f2f2; color: #0d0d0d;
border: 1px solid #b9b9b9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fab228; color: #0d0d0d;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Dyper Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
background:#f2f2f2; color:#0d0d0d;
}
*{box-sizing:border-box;}
.nav{height:72px;background:#f2f2f2;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-family:'Jubel-Regular','DM Sans',sans-serif;font-size:22px;font-weight:400;}
.navlinks{display:flex;gap:20px;font-size:15px;font-weight:500;}
.navlinks span.active{color:#fab228;}
.searchbar{background:#f2f2f2;border-radius:9999px;padding:10px 20px;font-size:13px;color:#7b7b7b;width:170px;}
.hero{background:#fab228;color:#0d0d0d;padding:48px 36px;text-align:center;}
.hero h1{font-family:'Jubel-Regular','DM Sans',sans-serif;font-size:34px;font-weight:400;line-height:1.2;margin:0 0 16px;}
.herobtn{background:#0d0d0d;color:#fab228;font-size:16px;font-weight:600;letter-spacing:0.3px;padding:16px 32px;border-radius:9999px;display:inline-block;}
.progress{display:flex;align-items:center;justify-content:center;gap:8px;padding:18px 36px 0;}
.step{width:32px;height:32px;border-radius:9999px;background:#eeeeee;color:#7b7b7b;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;}
.step.active{background:#fab228;color:#0d0d0d;}
.line{width:60px;height:2px;background:#e5e5e5;}
.line.active{background:#fab228;}
.section{padding:20px 36px 0;}
.grid{display:flex;gap:14px;}
.card{flex:1;background:#fff;border-radius:12px;padding:16px;}
.card-img{height:110px;border-radius:8px;margin-bottom:10px;position:relative;background:#f8f8f8;}
.card-img.c1{background:linear-gradient(140deg,#fab228,#108474);}
.card-img.c2{background:linear-gradient(140deg,#4a9f53,#f2f2f2);}
.card-img.c3{background:linear-gradient(140deg,#108474,#fab228);}
.card-img.c4{background:linear-gradient(140deg,#fad018,#108474);}
.badge{position:absolute;top:8px;left:8px;background:#fab228;color:#0d0d0d;font-size:12px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:4px 10px;border-radius:8px;}
.badge.green{background:#4a9f53;color:#f2f2f2;}
.title{font-size:16px;font-weight:600;margin-bottom:4px;}
.price{font-size:20px;font-weight:700;}
</style>
<nav class="nav">
<div class="logo">Dyper</div>
<div class="navlinks">
<span class="active">Diapers</span><span>Wipes</span><span>Bundles</span><span>Learn</span>
</div>
<div class="searchbar">Search…</div>
</nav>
<div class="hero">
<h1>Bamboo diapers.<br>Subscribe & save.</h1>
<div class="herobtn">Start Your Subscription</div>
</div>
<div class="progress">
<div class="step active">1</div><div class="line active"></div>
<div class="step">2</div><div class="line"></div>
<div class="step">3</div>
</div>
<div class="section">
<div class="grid">
<div class="card"><div class="card-img c1"><span class="badge">Subscribe</span></div><div class="title">Bamboo Diapers Size 2</div><div class="price">$36.00</div></div>
<div class="card"><div class="card-img c2"><span class="badge green">Eco</span></div><div class="title">Bamboo Wipes 6-Pack</div><div class="price">$28.00</div></div>
<div class="card"><div class="card-img c3"><span class="badge">Subscribe</span></div><div class="title">Newborn Starter Bundle</div><div class="price">$54.00</div></div>
<div class="card"><div class="card-img c4"></div><div class="title">Diaper Pail Refills</div><div class="price">$19.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; margin: 0; color: #696969; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; background: #0b485b; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; background: #ffffff; color: #2071a7;
border: 1px solid #0b485b; border-radius: 4px;
padding: 9px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #696969; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #d24600; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Arial,'Helvetica Neue',Helvetica,Roboto,sans-serif; background:#ffffff; color:#222222; }
*{box-sizing:border-box;}
.stripe{height:26px;background:#092b34;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 30px;font-size:11px;color:#ffffff;}
.navband{height:52px;background:#0b485b;display:flex;align-items:center;gap:16px;padding:0 30px;}
.logo{font-size:17px;font-weight:700;color:#ffffff;}
.searchbar{flex:1;height:34px;display:flex;border-radius:4px;overflow:hidden;}
.searchbar .inp{flex:1;background:#ffffff;font-size:12px;color:#696969;display:flex;align-items:center;padding:0 12px;}
.searchbar .go{width:56px;background:#2071a7;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.navlinks{display:flex;gap:14px;font-size:12px;color:#ffffff;}
.tiles{display:flex;gap:10px;padding:12px 30px 0;}
.tile{flex:1;background:#f5f5f5;border:1px solid #f1f1f1;border-radius:4px;text-align:center;padding:10px 4px;font-size:12px;font-weight:700;color:#222222;}
.grid{display:flex;gap:12px;padding:14px 30px 0;}
.card{width:190px;background:#ffffff;border:1px solid #f1f1f1;border-radius:4px;padding:8px;position:relative;}
.thumb{height:96px;border-radius:4px;margin-bottom:6px;}
.badge{position:absolute;top:16px;left:16px;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 6px;border-radius:4px;color:#fff;}
.badge.sale{background:#d24600;}
.badge.promo{background:#ffa81b;color:#222222;}
.title{font-size:13px;font-weight:700;color:#2071a7;line-height:1.3;height:34px;overflow:hidden;}
.sku{font-size:11px;color:#696969;margin:2px 0 6px;}
.price{font-size:19px;font-weight:700;color:#222222;}
.oldprice{font-size:12px;color:#696969;text-decoration:line-through;margin-left:6px;}
.saleprice{color:#d24600;}
.btnadd{margin-top:6px;background:#2071a7;color:#fff;font-size:12px;font-weight:700;text-align:center;padding:7px 0;border-radius:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:46px;background:#092b34;border-top:3px solid #0b485b;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:11px;color:#ebf2f3;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="stripe">My Account · Order Status · Cart (3)</div>
<div class="navband">
<div class="logo">Zoro</div>
<div class="searchbar"><div class="inp">Search by SKU, part number, or keyword</div><div class="go">SEARCH</div></div>
<div class="navlinks"><span>Power Tools</span><span>Safety</span><span>Fasteners</span><span>HVAC</span></div>
</div>
<div class="tiles">
<div class="tile">Power Tools</div>
<div class="tile">Safety & PPE</div>
<div class="tile">Fasteners</div>
<div class="tile">Material Handling</div>
<div class="tile">HVAC & Refrigeration</div>
</div>
<div class="grid">
<div class="card"><div class="badge sale">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#0e4051,#ebf2f3)"></div><div class="title">Heavy-Duty Angle Grinder, 7 In.</div><div class="sku">SKU 4WGP2 · Mfr# AG-7100</div><div class="price saleprice">$84.99<span class="oldprice">$109.99</span></div><div class="btnadd">Add to Cart</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#103a49,#0e4051)"></div><div class="title">Cut-Resistant Gloves, Size L, PR</div><div class="sku">SKU 6TRY9 · Mfr# CRG-450</div><div class="price">$12.40</div><div class="btnadd">Add to Cart</div></div>
<div class="card"><div class="badge promo">Top Seller</div><div class="thumb" style="background:linear-gradient(135deg,#ebf2f3,#0b485b)"></div><div class="title">Zinc Hex Bolt Assortment, 240 Pc</div><div class="sku">SKU 2XKL8 · Mfr# HB-240Z</div><div class="price">$29.75</div><div class="btnadd">Add to Cart</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0e4051,#103a49)"></div><div class="title">Portable Fan, 20 In., 3-Speed</div><div class="sku">SKU 9DFN3 · Mfr# PF-20T</div><div class="price">$118.00</div><div class="btnadd">Add to Cart</div></div>
</div>
<div class="footer"><span>Procurement Support · 1-800-555-0134</span><span>Returns · Bulk Orders · Terms</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff8000; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff8000; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c4309; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff8000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff8000; color: #111111;
border: 1px solid #d96e03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c4309; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff9429; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:46px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
background:#262626; }
.brand { color:#ffffff; font-size:15px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; }
.navlinks span { color:#dddddd; font-size:12px; font-weight:400; }
.navlinks span.on { color:#ff8000; font-weight:700; }
.hero { background:#262626; padding:0 28px 16px; display:flex; flex-direction:column; gap:10px; }
.tabs { display:flex; gap:8px; }
.tab { border-radius:2px; padding:0 14px; height:26px; display:flex; align-items:center; font-size:13px; font-weight:700; }
.tab.active { background:#ff8000; color:#ffffff; }
.tab.inactive { color:#8a8a8a; }
.searchbar { display:flex; height:40px; }
.searchinput { flex:1; background:#ffffff; border-radius:2px 0 0 2px; padding:0 14px; display:flex;
align-items:center; font-size:13px; color:#999999; }
.searchbtn { width:90px; background:#ff8000; color:#ffffff; border-radius:0 2px 2px 0; display:flex;
align-items:center; justify-content:center; font-size:15px; font-weight:700; }
.strip { display:flex; align-items:center; gap:16px; padding:8px 28px; background:#f5f5f5; border-bottom:1px solid #e6e6e6; }
.strip span { font-size:11px; color:#666666; }
.strip b { color:#ff8000; }
.listings { padding:10px 28px 0; display:flex; flex-direction:column; }
.row { display:flex; gap:14px; padding:12px 0; border-bottom:1px solid #e6e6e6; align-items:stretch; }
.row.feat { background:#f2f8ff; margin:0 -12px; padding:12px; border-radius:0; }
.photo { width:150px; height:96px; border-radius:8px 8px 0 0; background:linear-gradient(135deg,#d8d8d8,#c9c9c9);
flex-shrink:0; position:relative; }
.photo .badge { position:absolute; top:6px; left:6px; background:#fff7e6; color:#ff8000; font-size:10px;
font-weight:700; border-radius:2px; padding:2px 6px; }
.rowbody { flex:1; display:flex; flex-direction:column; justify-content:center; gap:5px; }
.rowbody h3 { font-size:15px; font-weight:700; margin:0; color:#333333; }
.rowmeta { font-size:11px; color:#666666; }
.tagline { display:flex; gap:6px; }
.tagline span { background:#fff7e6; color:#ff8000; font-size:10px; border-radius:2px; padding:2px 8px; }
.rowprice { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:3px; min-width:90px; }
.price { color:#e60012; font-size:17px; font-weight:700; }
.pricesub { color:#999999; font-size:10px; }
</style></head>
<body>
<nav>
<p class="brand">591</p>
<div class="navlinks"><span class="on">Rent</span><span>Resale</span><span>New Build</span><span>Land</span><span>Storefront</span></div>
</nav>
<section class="hero">
<div class="tabs">
<span class="tab active">Rent</span>
<span class="tab inactive">Resale</span>
<span class="tab inactive">New Build</span>
</div>
<div class="searchbar">
<div class="searchinput">Xinyi District · near MRT · 2 rooms</div>
<div class="searchbtn">Search</div>
</div>
</section>
<div class="strip"><span><b>82,000+</b> rentals</span><span><b>320,000+</b> resale homes</span><span><b>5,000+</b> new builds listed</span></div>
<section class="listings">
<div class="row feat">
<div class="photo"><span class="badge">Featured</span></div>
<div class="rowbody">
<h3>2-Room Suite near Xinyi MRT, Furnished</h3>
<div class="rowmeta">Xinyi District · 24 ping · 8F / 15F</div>
<div class="tagline"><span>Near MRT</span><span>Pet Friendly</span><span>Private Bath</span></div>
</div>
<div class="rowprice"><span class="price">NT$26,000</span><span class="pricesub">/ month</span></div>
</div>
<div class="row">
<div class="photo"></div>
<div class="rowbody">
<h3>Studio, Renovated, Da'an District</h3>
<div class="rowmeta">Da'an District · 12 ping · 3F / 7F</div>
<div class="tagline"><span>Renovated</span><span>Quiet Street</span></div>
</div>
<div class="rowprice"><span class="price">NT$18,500</span><span class="pricesub">/ month</span></div>
</div>
<div class="row">
<div class="photo"></div>
<div class="rowbody">
<h3>3-Bedroom Family Unit, Zhongshan</h3>
<div class="rowmeta">Zhongshan District · 38 ping · 5F / 12F</div>
<div class="tagline"><span>Balcony</span><span>Parking</span></div>
</div>
<div class="rowprice"><span class="price">NT$42,000</span><span class="pricesub">/ month</span></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ddddd0; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ddddd0; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #842222; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ddddd0; color: #842222;
border: 1px solid #842222; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #aeaea4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #fff580; color: #222222;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ddddd0; color:#333333; box-sizing:border-box; font-family:Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#842222; display:flex; align-items:center; gap:18px; padding:0 26px; }
.logo { font-size:19px; font-weight:700; color:#fff; }
.navlink { font-size:16px; font-weight:600; color:#fff; padding:8px 12px; }
.navlink.active { color:#fff580; border-bottom:3px solid #fff580; }
.searchw { margin-left:auto; width:220px; height:36px; border-radius:999px; background:#fff;
display:flex; align-items:center; padding:0 14px; font-size:12px; color:#6a6a6a; }
.catstrip { display:flex; gap:8px; padding:12px 26px 0; }
.cattab { border-radius:999px; padding:7px 16px; font-size:13px; font-weight:600; color:#6a6a6a; background:#eeeee0; }
.cattab.active { background:#842222; color:#fff; }
.stage { display:flex; gap:26px; padding:16px 26px 0; }
.cover { width:200px; height:290px; border-radius:8px; flex:0 0 auto; position:relative; overflow:hidden;
background:linear-gradient(150deg,#fff580 0%,#eeba30 45%,#842222 130%); box-shadow:0 6px 16px rgba(0,0,0,.16); }
.cover::before { content:''; position:absolute; left:24px; top:36px; width:150px; height:150px; border-radius:50%;
background:rgba(255,255,255,.25); }
.newbadge { position:absolute; top:10px; left:10px; background:#10ff10; color:#222; font-size:10px; font-weight:700;
text-transform:uppercase; letter-spacing:.4px; border-radius:4px; padding:3px 8px; }
.info { flex:1; }
h1 { font-size:22px; font-weight:700; margin:6px 0 4px; color:#222; }
.author { font-size:14px; color:#6a6a6a; margin-bottom:10px; }
.desc { font-size:13px; line-height:1.5; max-width:500px; margin-bottom:14px; }
.agerow { display:flex; gap:8px; margin-bottom:14px; }
.agebadge { border-radius:999px; padding:6px 14px; font-size:12px; font-weight:600; background:#fff; color:#842222; }
.pricerow { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.price { font-size:22px; font-weight:700; color:#842222; }
.btnrow { display:flex; gap:10px; }
.btn-p { background:#842222; color:#fff; border:none; border-radius:8px; height:44px; padding:0 26px;
font-size:15px; font-weight:600; }
.btn-s { background:#ddddd0; color:#842222; border:2px solid #842222; border-radius:8px; height:44px; padding:0 20px;
font-size:15px; font-weight:600; }
.relwrap { padding:14px 26px 0; border-top:1px solid #c5c5c5; margin-top:14px; }
.relhdr { font-size:13px; font-weight:700; color:#842222; margin-bottom:10px; }
.relgrid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.rc { background:#fff; border-radius:8px; padding:6px; }
.rc .th { height:70px; border-radius:4px; background:linear-gradient(150deg,#eeba30,#842222); margin-bottom:6px; }
.rc .t { font-size:11px; font-weight:600; color:#222; height:26px; overflow:hidden; }
.rc .p { font-size:11px; color:#842222; font-weight:700; }
</style></head>
<body>
<nav>
<span class="logo">Children S Book Shop</span>
<span class="navlink active">Picture Books</span>
<span class="navlink">Middle Grade</span>
<span class="navlink">Young Adult</span>
<span class="navlink">Events</span>
<div class="searchw">Search titles, authors…</div>
</nav>
<div class="catstrip">
<span class="cattab active">Ages 3–5</span>
<span class="cattab">Ages 6–8</span>
<span class="cattab">Ages 9–12</span>
<span class="cattab">Staff Picks</span>
</div>
<div class="stage">
<div class="cover"><span class="newbadge">New Arrival</span></div>
<div class="info">
<h1>The Fox Who Painted the Fog</h1>
<div class="author">by Maren Okafor · Illustrated by Tomas Vry</div>
<div class="desc">A gentle bedtime story about a small fox who discovers she can paint colors into the morning mist over her village — one hue of kindness at a time.</div>
<div class="agerow"><span class="agebadge">Ages 3–5</span><span class="agebadge">Hardcover</span><span class="agebadge">32 pages</span></div>
<div class="pricerow"><span class="price">£12.99</span></div>
<div class="btnrow">
<button class="btn-p">Add to Cart</button>
<button class="btn-s">Read a Sample Page</button>
</div>
</div>
</div>
<div class="relwrap">
<div class="relhdr">More in Picture Books</div>
<div class="relgrid">
<div class="rc"><div class="th"></div><div class="t">The Quiet Lighthouse</div><div class="p">£10.99</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(150deg,#fff580,#842222)"></div><div class="t">Berries in a Basket</div><div class="p">£9.99</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(150deg,#10ff10,#842222)"></div><div class="t">Mole's First Snow</div><div class="p">£11.50</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(150deg,#eeba30,#333)"></div><div class="t">Grandpa's River Boat</div><div class="p">£12.00</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(150deg,#842222,#eeba30)"></div><div class="t">The Sleepy Orchard</div><div class="p">£10.50</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 400; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; background: #313131; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; border-bottom:1px solid #e3e3e3; }
.brand { font-size:16px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; }
.cart { width:36px; height:36px; border:1px solid #e3e3e3; display:flex; align-items:center; justify-content:center; font-size:11px; }
.content { display:flex; padding:22px 40px; gap:24px; }
.gallery { flex:1.2; }
.mainimg { height:230px; background:#f6f6f6; position:relative; }
.mainimg::after { content:''; position:absolute; left:50%; bottom:20px; width:160px; height:80px; background:linear-gradient(180deg,#313131,#1c1c1c); transform:translateX(-50%); }
.details { flex:1; }
.details .cat { font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#888888; margin:0 0 6px; }
.details h1 { font-size:28px; font-weight:300; margin:0 0 10px; line-height:1.15; }
.price { font-size:18px; font-weight:400; margin-bottom:16px; }
.swatch-label { font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#888888; margin-bottom:8px; }
.swrow { display:flex; gap:10px; margin-bottom:18px; }
.sw { width:28px; height:28px; border-radius:50%; border:1.5px solid #e3e3e3; }
.sw.sel { border-color:#313131; }
.btnrow { display:flex; gap:10px; }
.btn { flex:1; text-align:center; padding:14px; font-size:13px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; }
.btn-primary { background:#313131; color:#fff; }
.btn-outline { background:#fff; border:1px solid #313131; color:#313131; }
.dims { margin-top:20px; }
.dimrow { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #eeeeee; font-size:12px; }
.dimrow span:first-child { color:#888888; font-weight:600; }
footer { position:absolute; bottom:0; left:0; right:0; height:56px; background:#313131; color:#fff;
display:flex; align-items:center; justify-content:space-between; padding:0 40px; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Bdi Usa</p>
<div class="navlinks"><span>Storage</span><span>Media Consoles</span><span>Desks</span><span>Filing</span></div>
<div class="cart">🛒</div>
</nav>
<div class="content">
<div class="gallery"><div class="mainimg"></div></div>
<div class="details">
<p class="cat">Media Console</p>
<h1>Sequel 20 Console — Charcoal</h1>
<div class="price">$2,199</div>
<div class="swatch-label">Finish</div>
<div class="swrow">
<div class="sw sel" style="background:#313131"></div>
<div class="sw" style="background:#e8e4dc"></div>
<div class="sw" style="background:#5a4632"></div>
</div>
<div class="btnrow"><div class="btn btn-primary">Add to Cart</div><div class="btn btn-outline">Spec Sheet</div></div>
<div class="dims">
<div class="dimrow"><span>Width</span><span>71.5 in</span></div>
<div class="dimrow"><span>Depth</span><span>17.7 in</span></div>
<div class="dimrow"><span>Height</span><span>23.6 in</span></div>
</div>
</div>
</div>
<footer>
<span>© Bdi Usa</span>
<span>Bdi Usa · Products · Resources · Company</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.27; background: #aaccaa; color: #121212;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.27; background: #ffffff; color: #121212;
border: 1px solid #aaccaa; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.3px; background: #1a1a1a; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Inter', -apple-system, system-ui, 'Helvetica Neue', sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e1e3e4;}
.logo{font-size:20px;font-weight:700;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:28px;font-size:14px;font-weight:500;color:#6a6a6a;}
.navlinks .on{color:#121212;border-bottom:2px solid #121212;padding-bottom:20px;}
.cartbtn{background:#aaccaa;color:#121212;font-size:13px;font-weight:600;padding:9px 20px;border-radius:9999px;}
.hero{height:190px;background:#f0f0f0;display:flex;align-items:center;padding:0 32px;}
.heroL{width:440px;}
.kick{font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:#6a6a6a;margin-bottom:10px;}
.h1{font-size:30px;font-weight:700;letter-spacing:-0.5px;margin:0 0 10px;line-height:1.2;}
.sub{font-size:14px;color:#3a3a3a;margin:0 0 16px;width:340px;}
.btn{display:inline-block;background:#aaccaa;color:#121212;font-size:15px;font-weight:600;padding:12px 26px;border-radius:9999px;}
.heroR{position:relative;width:200px;height:150px;margin-left:auto;}
.fig1{position:absolute;right:70px;top:0;width:70px;height:130px;background:linear-gradient(160deg,#dedede,#aaccaa 60%);border-radius:14px 14px 8px 8px;}
.fig2{position:absolute;right:0;top:20px;width:60px;height:110px;background:linear-gradient(160deg,#8fb88f,#1a1a1a 70%);border-radius:14px 14px 8px 8px;}
.section{padding:16px 32px 0;}
.stitle{font-size:16px;font-weight:600;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:150px;border-radius:8px;padding:10px;position:relative;}
.thumb{height:96px;border-radius:8px;margin-bottom:8px;}
.badge{position:absolute;top:6px;left:6px;font-size:10px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.badge.sold{background:#1a1a1a;color:#fff;}
.badge.new{background:#aaccaa;color:#121212;}
.pname{font-size:14px;font-weight:500;margin:2px 0;}
.pprice{font-size:15px;font-weight:400;color:#121212;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#1a1a1a;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#ffffff;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Super7</div>
<div class="navlinks"><div class="on">Figures</div><div>Apparel</div><div>Vinyl</div><div>Collections</div></div>
<div class="cartbtn">Cart (2)</div>
</div>
<div class="hero">
<div class="heroL">
<div class="kick">Now Shipping</div>
<div class="h1">Curated for the collector's shelf.</div>
<div class="sub">Limited-run ReAction figures and vinyl art, displayed like objects worth keeping.</div>
<div class="btn">Shop New Arrivals</div>
</div>
<div class="heroR"><div class="fig2"></div><div class="fig1"></div></div>
</div>
<div class="section">
<div class="stitle">Featured Drops</div>
<div class="grid">
<div class="card"><div class="badge new">New</div><div class="thumb" style="background:linear-gradient(150deg,#f0f0f0,#aaccaa);"></div><div class="pname">Guardian Figure</div><div class="pprice">$28.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#dedede,#1a1a1a);"></div><div class="pname">Vinyl Sentry 6"</div><div class="pprice">$65.00</div></div>
<div class="card"><div class="badge sold">Sold Out</div><div class="thumb" style="background:linear-gradient(150deg,#8fb88f,#f0f0f0);"></div><div class="pname">Archive Set 02</div><div class="pprice">$120.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#1a1a1a,#aaccaa);"></div><div class="pname">Collector Tee</div><div class="pprice">$34.00</div></div>
</div>
</div>
<div class="footer"><span>© Collector Editions</span><span>Shipping · Returns · Members</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0.3px; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #1a5fa8; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #ffffff; color: #1a5fa8;
border: 1px solid #1a5fa8; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #dde2e8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.8px; background: #1a5fa8; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; border-bottom:1px solid #dde2e8; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.logo { font-weight:700; font-size:18px; letter-spacing:-0.3px; color:#313131; }
.search { flex:1; max-width:340px; margin:0 24px; height:36px; border:1px solid #dde2e8; border-radius:8px;
display:flex; align-items:center; padding:0 12px; font-size:13px; color:#717171;
font-family:'Courier New',Courier,monospace; }
.icons { display:flex; gap:16px; font-size:13px; font-weight:600; color:#1a5fa8; }
.crumb { padding:10px 32px 0; font-size:12px; color:#717171; }
.crumb b { color:#313131; }
main { display:flex; padding:12px 32px 0; gap:32px; height:460px; }
.imgcol { width:300px; display:flex; flex-direction:column; gap:10px; }
.prodimg { border:1px solid #dde2e8; border-radius:8px; height:300px; position:relative;
background:linear-gradient(180deg, #f4f6f9, #eaecf0);
display:flex; align-items:center; justify-content:center; }
.prodimg .box { width:150px; height:170px; background:linear-gradient(160deg,#ffffff,#dde2e8);
border:1px solid #c7ced8; border-radius:4px; position:relative; }
.prodimg .box::before { content:''; position:absolute; inset:14px; border:6px solid #1a5fa8; opacity:0.15; border-radius:2px; }
.merv { position:absolute; top:12px; left:12px; background:#1a5fa8; color:#fff; font-size:11px; font-weight:700;
letter-spacing:0.8px; text-transform:uppercase; border-radius:4px; padding:3px 8px; }
.instock { position:absolute; top:12px; right:12px; background:#27ae60; color:#fff; font-size:11px; font-weight:700;
letter-spacing:0.8px; text-transform:uppercase; border-radius:4px; padding:3px 8px; }
.specrows { border:1px solid #dde2e8; border-radius:8px; padding:8px 12px; }
.specrow { display:flex; justify-content:space-between; font-size:12px; padding:5px 0; border-bottom:1px solid #eff1f4; }
.specrow:last-child { border-bottom:none; }
.specrow .l { color:#717171; text-transform:uppercase; letter-spacing:0.5px; font-size:11px; }
.specrow .v { color:#313131; font-family:'Courier New',Courier,monospace; }
.info { flex:1; display:flex; flex-direction:column; }
.part { font-family:'Courier New',Courier,monospace; font-size:13px; color:#717171; margin-bottom:4px; }
.title { font-size:22px; font-weight:700; line-height:1.3; margin:0 0 10px; }
.price { font-size:26px; font-weight:700; margin-bottom:14px; }
.filterbuild { border:1px solid #dde2e8; border-radius:8px; padding:14px; background:#f4f6f9; margin-bottom:14px; }
.filterbuild h4 { margin:0 0 8px; font-size:13px; font-weight:600; }
.chiprow { display:flex; gap:8px; flex-wrap:wrap; }
.chip { background:#eaecf0; border:1px solid #dde2e8; border-radius:8px; padding:6px 12px; font-size:12px; }
.chip.active { background:#1a5fa8; color:#fff; border-color:#1a5fa8; }
.cta { margin-top:auto; display:flex; gap:10px; }
.btn-primary { flex:1; background:#1a5fa8; color:#fff; border:none; border-radius:8px; height:44px;
font-size:15px; font-weight:600; letter-spacing:0.2px; }
.btn-secondary { background:#fff; color:#1a5fa8; border:1.5px solid #1a5fa8; border-radius:8px; height:44px;
padding:0 18px; font-size:15px; font-weight:600; }
footer { border-top:1px solid #dde2e8; margin-top:8px; padding:12px 32px; display:flex; justify-content:space-between;
background:#313131; color:#fff; font-size:12px; }
</style></head>
<body>
<nav>
<div class="logo">Alpine Home Air</div>
<div class="search">AFL20X25X4-MERV13-CS</div>
<div class="icons">Account · Quote · Cart (0)</div>
</nav>
<div class="crumb">Home › Furnace Filters › MERV 13 › <b>20x25x4 Pleated Filter</b></div>
<main>
<div class="imgcol">
<div class="prodimg"><span class="merv">MERV 13</span><span class="instock">In Stock</span><div class="box"></div></div>
<div class="specrows">
<div class="specrow"><span class="l">Nominal Size</span><span class="v">20 x 25 x 4</span></div>
<div class="specrow"><span class="l">Actual Size</span><span class="v">19.5 x 24.5 x 3.6</span></div>
<div class="specrow"><span class="l">CFM Rating</span><span class="v">2000</span></div>
<div class="specrow"><span class="l">Static Pressure</span><span class="v">0.30 in. w.g.</span></div>
</div>
</div>
<div class="info">
<div class="part">SKU AFL20X25X4-MERV13-CS</div>
<h1 class="title">20x25x4 Pleated Media Filter — MERV 13, Case of 2</h1>
<div class="price">$59.00</div>
<div class="filterbuild">
<h4>Build My Filter</h4>
<div class="chiprow">
<span class="chip">MERV 8</span>
<span class="chip">MERV 11</span>
<span class="chip active">MERV 13</span>
<span class="chip">MERV 16</span>
</div>
</div>
<div class="cta">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">View Spec Sheet</button>
</div>
</div>
</main>
<footer>
<span>© Alpine Home Air</span>
<span>Shop · Resources · Account · Contact</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #7d7d7d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: 0.3px; background: #006bb4; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: 0.3px; background: #ffffff; color: #111111;
border: 1px solid #111111; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #111111;
border: 1px solid #cfcfcf; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7d7d7d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #c72935; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:'Open Sans',Helvetica Neue,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #dbdbdb; }
.brand { font-size:16px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; margin:0; }
.navlinks { display:flex; gap:24px; font-size:12px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#424242; }
.navlinks span.on { color:#006bb4; border-bottom:2px solid #006bb4; padding-bottom:16px; }
.util { font-size:12px; color:#7d7d7d; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 56px); }
.stage { padding:26px; border-right:1px solid #dbdbdb; display:flex; flex-direction:column; gap:12px; }
.crumb { font-size:11px; color:#7d7d7d; }
.pan { flex:1; border-radius:0; background:#f6f6f6; position:relative; overflow:hidden; }
.pan::before { content:''; position:absolute; left:50%; top:52%; width:230px; height:230px; transform:translate(-50%,-50%); border-radius:50%;
background:radial-gradient(circle at 35% 30%, #eaeaea, #cfcfcf 45%, #8f8f8f 70%, #5a5a5a 100%);
box-shadow:0 18px 30px rgba(0,0,0,0.18); }
.pan::after { content:''; position:absolute; left:50%; top:26%; width:270px; height:20px; transform:translate(-50%,0) rotate(-3deg); border-radius:10px;
background:linear-gradient(90deg,#cfcfcf,#eaeaea 50%,#8f8f8f); }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; background:#eeeeee; border:1px solid #dbdbdb; }
.info { padding:24px 34px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#7d7d7d; }
h1 { margin:0; font-size:22px; font-weight:600; line-height:1.25; }
.rating { display:flex; align-items:center; gap:8px; font-size:12px; color:#7d7d7d; }
.stars { color:#ff5501; font-size:13px; letter-spacing:1px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:700; }
.badge-sale { background:#c72935; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; padding:4px 8px; border-radius:4px; }
.desc { font-size:13px; color:#424242; line-height:1.55; }
.selectors { display:flex; gap:10px; }
.size-chip { border:1px solid #cfcfcf; padding:8px 14px; font-size:13px; font-weight:600; }
.size-chip.on { background:#111111; color:#fff; border-color:#111111; }
.trust { background:#fdf0d5; border:1px solid #c07600; border-left:4px solid #c07600; color:#6f4400; font-size:12px; font-weight:700; padding:10px 12px; border-radius:4px; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#006bb4; color:#fff; border:none; height:44px; font-size:14px; font-weight:700; letter-spacing:0.3px; border-radius:4px; }
.btn-secondary { width:150px; background:#fff; border:1px solid #111111; color:#111111; height:44px; font-size:14px; font-weight:700; border-radius:4px; }
</style></head>
<body>
<nav>
<p class="brand">All Clad</p>
<div class="navlinks"><span>Cookware</span><span class="on">Bakeware</span><span>Kitchen Tools</span><span>Sale</span></div>
<div class="util">Search Account Cart (1)</div>
</nav>
<main>
<div class="stage">
<div class="crumb">All Clad / Cookware / Stainless Steel</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">D3 Stainless Collection</span>
<h1>D3 Stainless 12" Fry Pan with Lid</h1>
<div class="rating"><span class="stars">★★★★★</span> 4.8 · 642 reviews</div>
<div class="price-row"><span class="price">$189.95</span><span class="badge-sale">Save 15%</span></div>
<p class="desc">Tri-ply bonded construction fuses an aluminum core between two layers of stainless steel for even, responsive heating from edge to edge — oven safe to 600°F.</p>
<div class="selectors">
<span class="size-chip">8"</span><span class="size-chip">10"</span><span class="size-chip on">12"</span>
</div>
<div class="trust">Lifetime Warranty · Made in Canonsburg, PA, USA</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compare</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -0.2px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #FF6600; color: #FFFFFF;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #FFFFFF; color: #313131;
border: 1px solid #FF6600; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #313131;
border: 1px solid #E0E0E0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #FF6600; color: #FFFFFF;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,Roboto,sans-serif; background:#ffffff; color:#313131; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.announce{height:32px;background:#313131;color:#fff;font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;}
.announce b{color:#ff6600;margin:0 4px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:18px;font-weight:700;color:#ff6600;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;}
.navcta{background:#ff6600;color:#fff;font-size:13px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:8px 16px;border-radius:8px;}
.hero{height:200px;background:#313131;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.herotext{max-width:400px;color:#fff;}
.herotext h1{font-size:28px;font-weight:700;letter-spacing:-.25px;margin:0 0 10px;}
.herotext p{font-size:14px;color:#c9c9c9;margin:0 0 14px;}
.hbtn{display:inline-block;background:#ff6600;color:#fff;font-size:14px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:12px 24px;border-radius:8px;}
.oven{width:170px;height:130px;border-radius:8px;background:linear-gradient(160deg,#4a4a4a,#1a1a1a);position:relative;}
.oven:after{content:'';position:absolute;left:16px;top:16px;width:70px;height:70px;border-radius:9999px;background:#111111;border:4px solid #ff6600;}
.specrow{display:flex;gap:12px;padding:16px 36px 0;}
.spec{flex:1;background:#f5f5f5;border-top:3px solid #ff6600;border-radius:8px;padding:12px 14px;}
.specval{font-size:22px;font-weight:700;}
.speclab{font-size:11px;font-weight:500;letter-spacing:.4px;text-transform:uppercase;color:#767676;margin-top:4px;}
.sec{padding:16px 36px 0;}
.sectitle{font-size:16px;font-weight:600;margin-bottom:10px;}
.grid{display:flex;gap:14px;}
.card{width:196px;background:#fff;border:1px solid #efefef;border-radius:8px;padding:12px;}
.thumb{height:80px;background:#f5f5f5;border-radius:8px;margin-bottom:8px;}
.ptitle{font-size:15px;font-weight:600;}
.pprice{font-size:15px;font-weight:600;color:#ff6600;margin-top:4px;}
</style>
<div class="wrap">
<div class="announce">Free Shipping on Orders Over <b>$75</b></div>
<div class="nav"><div class="logo">Nuwave</div><div class="navlinks"><div>Air Fryers</div><div>Ovens</div><div>Accessories</div></div><div class="navcta">Shop Now</div></div>
<div class="hero"><div class="herotext"><h1>Precision heat, on command.</h1><p>Countertop cooking systems engineered like control panels, not appliances.</p><div class="hbtn">Shop Brio Pro4+</div></div><div class="oven"></div></div>
<div class="specrow">
<div class="spec"><div class="specval">1800W</div><div class="speclab">Peak Power</div></div>
<div class="spec"><div class="specval">8 QT</div><div class="speclab">Capacity</div></div>
<div class="spec"><div class="specval">12</div><div class="speclab">Presets</div></div>
<div class="spec"><div class="specval">400°F</div><div class="speclab">Max Temp</div></div>
</div>
<div class="sec">
<div class="sectitle">Shop the Brio Line</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ptitle">Brio Pro4+ Air Fryer</div><div class="pprice">$179.99</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Brio 6-Quart Basket</div><div class="pprice">$139.99</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Brio Digital Grill Plate</div><div class="pprice">$34.99</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb0014; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb0014; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5254; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb0014; color: #ffffff;
border: 1px solid #ff5254; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb0014; color: #f5f5f5;
border: 1px solid #ed2738; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ffffff; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ee0d1e; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#111115; color:#ffffff; box-sizing:border-box;
font-family:"Pretendard Variable","Pretendard",-apple-system,"Noto Sans KR","Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#111115; border-bottom:1px solid #222225; }
.navleft { display:flex; align-items:center; gap:26px; }
.brand { font-size:17px; font-weight:700; color:#ffffff; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:500; color:#a1a1a9; }
.navlinks span:first-child { color:#ffffff; }
.navright { display:flex; align-items:center; gap:10px; }
.coin { display:flex; align-items:center; gap:6px; background:#222225; border-radius:9999px; padding:6px 12px;
font-size:13px; font-weight:600; color:#ffffff; }
.coin .dot { width:12px; height:12px; border-radius:9999px; background:#ffd750; }
.btn-primary { background:#eb0014; color:#ffffff; border:none; border-radius:4px; height:34px; padding:0 16px;
font-size:13px; font-weight:600; }
.chiprow { flex:0 0 48px; display:flex; align-items:center; gap:10px; padding:0 32px; }
.chip { border:1px solid #e9e9ec22; border:1px solid rgba(255,255,255,0.12); border-radius:9999px; padding:0 14px;
height:30px; display:flex; align-items:center; font-size:12px; font-weight:600; color:#a1a1a9; }
.chip.selected { background:rgba(255,82,84,0.15); color:#ff5254; border-color:transparent; }
.sectitle { flex:0 0 30px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.sectitle h2 { font-size:16px; font-weight:700; margin:0; letter-spacing:-0.2px; }
.sectitle span { font-size:12px; color:#6f6f77; }
.grid { flex:0 0 296px; display:flex; gap:14px; padding:8px 32px 0; }
.thumb { width:158px; flex:0 0 158px; }
.cover { width:158px; height:224px; border-radius:4px; position:relative; overflow:hidden; }
.cover .badge19 { position:absolute; top:6px; left:6px; background:#c40017; color:#fff; font-size:10px;
font-weight:700; border-radius:2px; padding:2px 5px; }
.cover .badgenew { position:absolute; top:6px; right:6px; background:#eb0014; color:#fff; font-size:10px;
font-weight:700; border-radius:2px; padding:2px 5px; }
.cover .grad { position:absolute; inset:0; }
.cover .ttl { position:absolute; left:8px; right:8px; bottom:8px; font-size:13px; font-weight:700; color:#ffffff;
line-height:1.25; text-shadow:0 1px 6px rgba(0,0,0,0.6); }
.meta { padding:6px 2px 0; }
.meta .g { font-size:11px; color:#6f6f77; }
.meta .up { font-size:12px; color:#a1a1a9; margin-top:2px; }
.g1 { background:linear-gradient(160deg,#3a2140,#1a1424 70%); }
.g2 { background:linear-gradient(160deg,#432017,#1c110d 70%); }
.g3 { background:linear-gradient(160deg,#173a2e,#0e1c17 70%); }
.g4 { background:linear-gradient(160deg,#1c2a44,#0e1420 70%); }
.g5 { background:linear-gradient(160deg,#442038,#1e0f1a 70%); }
.continue { flex:1 1 auto; padding:16px 32px 20px; border-top:1px solid #222225; display:flex; flex-direction:column; gap:12px; min-height:0; }
.continue h3 { font-size:14px; font-weight:700; margin:0; color:#ffffff; }
.circles { display:flex; gap:20px; }
.circ-item { display:flex; flex-direction:column; align-items:center; gap:6px; width:76px; }
.circ { width:64px; height:64px; border-radius:9999px; border:3px solid #eb0014; position:relative; }
.circ span { position:absolute; inset:3px; border-radius:9999px; }
.circ-item .nm { font-size:11px; color:#a1a1a9; text-align:center; line-height:1.3; }
</style></head>
<body>
<nav>
<div class="navleft">
<p class="brand">Lezhin Comics</p>
<div class="navlinks"><span>Home</span><span>Genre</span><span>Originals</span><span>Snack</span></div>
</div>
<div class="navright">
<div class="coin"><span class="dot"></span>2,480</div>
<button class="btn-primary">Charge</button>
</div>
</nav>
<section class="chiprow">
<div class="chip selected">Romance</div>
<div class="chip">Fantasy</div>
<div class="chip">Thriller</div>
<div class="chip">Drama</div>
<div class="chip">BL</div>
<div class="chip">Action</div>
</section>
<section class="sectitle"><h2>Today's Updates</h2><span>Updated daily</span></section>
<section class="grid">
<div class="thumb">
<div class="cover g1"><span class="badgenew">NEW</span><span class="ttl">Moonlit Vows</span></div>
<div class="meta"><div class="g">Romance · Ep. 42</div><div class="up">Updated today</div></div>
</div>
<div class="thumb">
<div class="cover g2"><span class="badge19">19</span><span class="ttl">Iron Heart Guild</span></div>
<div class="meta"><div class="g">Fantasy · Ep. 118</div><div class="up">Updated today</div></div>
</div>
<div class="thumb">
<div class="cover g3"><span class="ttl">Table for Two</span></div>
<div class="meta"><div class="g">Drama · Ep. 27</div><div class="up">Updated yesterday</div></div>
</div>
<div class="thumb">
<div class="cover g4"><span class="badgenew">NEW</span><span class="ttl">Nightshade Company</span></div>
<div class="meta"><div class="g">Thriller · Ep. 9</div><div class="up">Updated today</div></div>
</div>
<div class="thumb">
<div class="cover g5"><span class="badge19">19</span><span class="ttl">Crimson & Ivory</span></div>
<div class="meta"><div class="g">Romance · Ep. 63</div><div class="up">Updated today</div></div>
</div>
</section>
<section class="continue">
<h3>Continue Reading</h3>
<div class="circles">
<div class="circ-item"><div class="circ"><span class="g1"></span></div><div class="nm">Moonlit Vows</div></div>
<div class="circ-item"><div class="circ"><span class="g3"></span></div><div class="nm">Table for Two</div></div>
<div class="circ-item"><div class="circ"><span class="g4"></span></div><div class="nm">Nightshade Co.</div></div>
<div class="circ-item"><div class="circ"><span class="g2"></span></div><div class="nm">Iron Heart Guild</div></div>
<div class="circ-item"><div class="circ"><span class="g5"></span></div><div class="nm">Crimson & Ivory</div></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #696969; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.2px; background: #fd4014; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #222222;
border: 1px solid #fd4014; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #696969; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.3px; background: #ffe4de; color: #fd4014;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Poppins,Arial,sans-serif; color:#383838; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid #d9d9d9;}
.logo{font-size:18px;font-weight:600;color:#222222;}
.navlinks{position:absolute;left:36px;display:flex;gap:20px;font-size:13px;font-weight:400;color:#696969;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;background:#f7f7f7;}
.herotext{width:440px;}
h1{font-size:30px;font-weight:600;color:#222222;margin:0 0 12px;line-height:1.25;}
.sub{font-size:14px;color:#696969;margin:0 0 18px;max-width:360px;}
.cta{display:inline-block;background:#fd4014;color:#fff;font-size:14px;font-weight:600;padding:12px 26px;border-radius:8px;width:fit-content;}
.hubimg{position:absolute;right:70px;top:70px;width:220px;height:120px;background:#ffffff;border-radius:8px;border:1px solid #d9d9d9;box-shadow:0 4px 16px rgba(0,0,0,.06);}
.port{position:absolute;width:14px;height:8px;background:#d9d9d9;border-radius:2px;}
.sec{padding:20px 40px 0;}
.sectitle{font-size:18px;font-weight:600;margin-bottom:14px;color:#222222;}
.grid{display:flex;gap:14px;}
.card{width:200px;border:1px solid #d9d9d9;border-radius:8px;padding:10px;position:relative;}
.thumb{height:88px;border-radius:6px;background:#f7f7f7;margin-bottom:8px;}
.badge{position:absolute;top:16px;left:16px;background:#ec0101;color:#fff;font-size:9px;font-weight:600;padding:2px 8px;border-radius:4px;}
.badge.new{background:#ad9725;}
.pname{font-size:13px;font-weight:500;color:#222222;margin-bottom:4px;}
.pprice{font-size:14px;font-weight:600;color:#fd4014;}
</style>
<div class="nav">
<div class="navlinks"><span>Hubs</span><span>Chargers</span><span>Cables</span></div>
<div class="logo">Lention</div>
</div>
<div class="hero" style="position:relative;">
<div class="herotext">
<h1>One Port. Every Device.</h1>
<div class="sub">Workspace hubs and chargers built for confident daily use, not showroom reverence.</div>
<div class="cta">Shop Hubs</div>
</div>
<div class="hubimg">
<div class="port" style="left:20px;top:20px;"></div>
<div class="port" style="left:44px;top:20px;"></div>
<div class="port" style="left:68px;top:20px;"></div>
<div class="port" style="left:20px;top:50px;"></div>
<div class="port" style="left:44px;top:50px;"></div>
</div>
</div>
<div class="sec">
<div class="sectitle">Top Sellers</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb"></div><div class="pname">USB-C 8-in-1 Hub</div><div class="pprice">$39.99</div></div>
<div class="card"><div class="badge new">New</div><div class="thumb"></div><div class="pname">65W GaN Charger</div><div class="pprice">$29.99</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Laptop Stand Pro</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="thumb"></div><div class="pname">USB-C to HDMI Cable</div><div class="pprice">$14.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e4f5fa; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e4f5fa; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5c5c5c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: 0.3px; background: #226d7a; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: 0.3px; background: #e4f5fa; color: #226d7a;
border: 1px solid #226d7a; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #2d2d2d;
border: 1px solid #b2bec2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5c5c5c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #22b8d1; color: #1a1a1a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#e4f5fa; font-family:'Open Sans',Arial,sans-serif; color:#2d2d2d; }
*{box-sizing:border-box;}
.nav{height:56px;background:#226d7a;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:6px;}
.navlinks span{color:#fff;font-size:15px;font-weight:600;padding:8px 12px;border-radius:4px;}
.navlinks span.active{background:rgba(255,255,255,0.15);}
.search{width:220px;height:40px;background:#fff;border:2px solid #226d7a;border-radius:4px;font-size:13px;color:#5c5c5c;display:flex;align-items:center;padding:0 12px;margin:12px 30px 0;}
.rowlabel{padding:14px 30px 10px;font-size:24px;font-weight:600;color:#2d2d2d;}
.grid{display:flex;gap:12px;padding:0 30px;flex-wrap:wrap;}
.card{width:141px;background:#fff;border:1px solid #dce8eb;border-radius:8px;padding:8px;position:relative;}
.badge{position:absolute;top:12px;left:12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;color:#1a1a1a;border-radius:4px;padding:2px 6px;z-index:2;background:#22b8d1;}
.thumb{width:125px;height:166px;border-radius:4px;margin-bottom:6px;}
.title{font-size:13px;font-weight:600;line-height:1.3;height:34px;overflow:hidden;}
.issue{font-size:11px;color:#8a8a8a;margin:4px 0;}
.price{font-size:13px;font-weight:600;color:#226d7a;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#226d7a;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;}
.footer a{color:#fff;text-decoration:underline;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Magazine Heaven</div>
<div class="navlinks"><span class="active">Fashion</span><span>Art</span><span>Music</span><span>Design</span></div>
</div>
<div class="search">Search back issues...</div>
<div class="rowlabel">Recently Cataloged</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(160deg,#22b8d1,#226d7a 70%);"></div><div class="title">Fashion Quarterly</div><div class="issue">Issue No.114</div><div class="price">$9.50</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#b0e0e9,#226d7a 70%);"></div><div class="title">Art & Object Review</div><div class="issue">Issue No.42</div><div class="price">$12.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#1e6d7a,#226d7a 70%);"></div><div class="title">Sound Quarterly</div><div class="issue">Issue No.88</div><div class="price">$8.75</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#226d7a,#b0e0e9 70%);"></div><div class="title">Design Annual</div><div class="issue">Issue No.7</div><div class="price">$15.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#22b8d1,#1e6d7a 70%);"></div><div class="title">Culture Weekly</div><div class="issue">Issue No.221</div><div class="price">$6.50</div></div>
</div>
<div class="footer"><span>© Magazine Heaven</span><span><a>Subscriptions</a> <a>Sell Your Collection</a></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #181b1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #181b1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #181b1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #667481; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.8px; background: #2d4156; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.8px; background: transparent; color: #2d4156;
border: 1px solid #2d4156; border-radius: 8px;
padding: 12px 30px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #181b1d;
border: 1px solid #c5c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #667481; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.36; letter-spacing: 0.5px; background: #355973; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'Titillium Web',Helvetica,sans-serif; color:#181b1d; }
*{box-sizing:border-box;}
.nav{height:72px;background:#000c29;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Termina',Arial,sans-serif;font-weight:700;font-size:19px;color:#fff;letter-spacing:.5px;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:600;color:#fff;}
.hero{height:280px;background:linear-gradient(to right,rgba(0,12,41,.9) 45%,rgba(0,12,41,.35)),radial-gradient(circle at 75% 40%,#355973,#000c29 70%);display:flex;align-items:center;padding:0 32px;}
.heroText{width:52%;}
.h1{font-family:'Termina',Arial,sans-serif;font-weight:700;font-size:44px;color:#fff;line-height:1.08;letter-spacing:-.5px;margin:0 0 14px;}
.sub{font-size:15px;color:#c2dff7;margin:0 0 20px;max-width:340px;}
.ctarow{display:flex;gap:12px;}
.cta{background:#2d4156;color:#fff;font-family:'Termina',Arial,sans-serif;font-weight:700;font-size:13px;letter-spacing:.6px;text-transform:uppercase;padding:12px 26px;border-radius:8px;}
.cta.ghost{background:transparent;border:2px solid #fff;}
.specrow{display:flex;gap:1px;background:#d5dee2;margin:0 32px;}
.speccell{flex:1;background:#f1f3f5;text-align:center;padding:10px;}
.speclabel{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#667481;}
.specval{font-family:'Termina',Arial,sans-serif;font-size:16px;font-weight:700;color:#000c29;margin-top:2px;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:200px;background:#e9edf2;border:1px solid #d5dee2;border-radius:12px;overflow:hidden;}
.thumb{height:100px;background:#d8e0e6;}
.cardbody{padding:12px;}
.ptitle{font-size:16px;font-weight:600;color:#181b1d;}
.badge{display:inline-block;background:#355973;color:#fff;font-family:'Termina',Arial,sans-serif;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:3px 9px;border-radius:4px;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#23272a;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#a6c4dd;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Master Spas</div>
<div class="navlinks"><span>Swim Spas</span><span>Hot Tubs</span><span>Saunas</span><span>Find a Dealer</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Engineered for the Water You Live In.</div>
<div class="sub">Precision hydrotherapy systems built for every backyard, from starter tubs to full swim spas.</div>
<div class="ctarow"><div class="cta">Explore Models</div><div class="cta ghost">Find a Dealer</div></div>
</div>
</div>
<div class="specrow">
<div class="speccell"><div class="speclabel">Jets</div><div class="specval">57</div></div>
<div class="speccell"><div class="speclabel">Seating</div><div class="specval">7 Adult</div></div>
<div class="speccell"><div class="speclabel">Gallons</div><div class="specval">450</div></div>
<div class="speccell"><div class="speclabel">Warranty</div><div class="specval">10 Yr</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="ptitle">Twilight Series LE</div><div class="badge">In Stock</div></div></div>
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="ptitle">Michael Phelps Signature</div><div class="badge">Ships in 14 Days</div></div></div>
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="ptitle">H2X Fitness Swim Spa</div><div class="badge">Best Seller</div></div></div>
</div>
<div class="footer"><span>© Precision Hydrotherapy Systems</span><span>Dealers · Support · Financing</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; font-weight: 400; line-height: 1.2; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7a7571; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 1.25px; background: #313131; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 1.25px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1c1c1c;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7571; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.25px; background: #f6f3ee; color: #3d3a36;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Georgia,'Times New Roman',serif; background:#ffffff; color:#1c1c1c; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e0dbd3;}
.logo{font-family:Georgia,serif;font-size:22px;color:#1c1c1c;}
.navlinks{display:flex;gap:22px;font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:500;}
.hero{height:280px;position:relative;background:linear-gradient(rgba(28,28,28,.42),rgba(28,28,28,.42)),linear-gradient(135deg,#7a7571,#3d3a36);display:flex;align-items:flex-end;padding:0 40px 34px;}
.hero h1{font-family:Georgia,serif;font-size:44px;color:#fff;margin:0 0 12px;font-weight:400;}
.btn{display:inline-block;background:#313131;color:#fff;font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:14px 30px;}
.section{padding:24px 40px 0;}
.crumb{font-size:11px;color:#7a7571;margin-bottom:8px;}
.sectitle{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#7a7571;margin-bottom:14px;}
.grid{display:flex;gap:18px;}
.card{width:210px;}
.thumb{height:120px;background:#f6f3ee;margin-bottom:8px;}
.slug{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:#7a7571;margin-bottom:4px;}
.ptitle{font-family:Georgia,serif;font-size:17px;margin-bottom:4px;}
.pprice{font-family:Georgia,serif;font-size:18px;color:#1c1c1c;}
.swatches{display:flex;gap:6px;margin-top:8px;}
.sw{border:1px solid #e0dbd3;padding:2px 6px;font-size:9px;letter-spacing:.3px;color:#7a7571;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Woodard</div>
<div class="navlinks"><div>Collections</div><div>Dining</div><div>Seating</div><div>Covers</div></div>
</div>
<div class="hero">
<div><h1>Outdoor furniture since 1866.</h1><div class="btn">View Collection</div></div>
</div>
<div class="section">
<div class="crumb">Home / Collections / Dining</div>
<div class="sectitle">Wrought Iron Collection</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="slug">Chatham Run</div><div class="ptitle">Dining Chair</div><div class="pprice">Starting at $429</div><div class="swatches"><div class="sw">Black</div><div class="sw">White Sand</div></div></div>
<div class="card"><div class="thumb"></div><div class="slug">Chatham Run</div><div class="ptitle">Rocker</div><div class="pprice">Starting at $549</div><div class="swatches"><div class="sw">Pewter</div><div class="sw">Charcoal</div></div></div>
<div class="card"><div class="thumb"></div><div class="slug">Cast Aluminum</div><div class="ptitle">Dining Table</div><div class="pprice">Starting at $1,299</div><div class="swatches"><div class="sw">Textured Black</div></div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6e6e6e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #313131; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e6e6e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #c62828; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
border-bottom:1px solid #e8e8e8; }
.brand { font-size:18px; font-weight:700; }
.search-bar { flex:1; max-width:400px; margin:0 20px; background:#f5f5f5; border-radius:8px; padding:8px 14px;
font-size:12.5px; color:#6e6e6e; }
.cart { font-size:12.5px; color:#313131; font-weight:600; }
.subnav { display:flex; gap:22px; padding:10px 34px; font-size:12.5px; color:#6e6e6e; border-bottom:1px solid #e8e8e8; }
main { display:flex; height:534px; }
.gallery { width:280px; background:#f5f5f5; position:relative; display:flex; align-items:center; justify-content:center; }
.cover { width:150px; height:220px; background:linear-gradient(160deg,#4a4a4a,#1a1a1a); border-radius:2px;
box-shadow:0 16px 32px rgba(0,0,0,0.2); position:relative; }
.cover::after { content:'A NOVEL'; position:absolute; bottom:20px; left:0; right:0; text-align:center;
color:#fff; font-size:9px; letter-spacing:0.2em; }
.cover::before { content:''; position:absolute; top:40px; left:16px; right:16px; height:2px; background:#9e9e9e; }
.info { flex:1; padding:26px 34px; display:flex; flex-direction:column; gap:10px; }
.booktitle { font-size:20px; font-weight:700; margin:0; line-height:1.3; }
.author { font-size:13px; color:#0056b3; }
.stars { font-size:12px; color:#f5a623; }
.stars .n { color:#6e6e6e; margin-left:6px; }
.desc { font-size:13px; color:#4a4a4a; line-height:1.55; max-width:400px; }
.offer-box { border:1px solid #d4d4d4; border-radius:8px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.offer { display:flex; justify-content:space-between; align-items:center; font-size:12.5px; }
.offer .cond { color:#6e6e6e; }
.offer .p { font-weight:700; }
.offer.best { border-top:1px solid #eeeee; padding-top:8px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#313131; color:#fff; border:none; border-radius:8px; padding:12px 18px;
font-size:13.5px; font-weight:600; }
.btn-outline { border:1.5px solid #313131; color:#313131; background:#fff; border-radius:8px; padding:10.5px 16px;
font-size:12.5px; font-weight:600; white-space:nowrap; }
.meta { font-size:11px; color:#9e9e9e; }
</style></head>
<body>
<nav>
<div class="brand">Alibris</div>
<div class="search-bar">Search title, author, or ISBN...</div>
<div class="cart">Cart (0)</div>
</nav>
<div class="subnav"><span>Fiction</span><span>Nonfiction</span><span>Rare & Collectible</span><span>Textbooks</span><span>Sell Books</span></div>
<main>
<div class="gallery"><div class="cover"></div></div>
<div class="info">
<h1 class="booktitle">The Quiet Ledger</h1>
<span class="author">by Margaret Ainsley</span>
<div class="stars">★★★★☆ <span class="n">4.4 · 312 ratings</span></div>
<p class="desc">A used first-edition hardcover in very good condition — light shelf wear, no markings, dust jacket included.</p>
<div class="offer-box">
<div class="offer"><span class="cond">Used — Very Good</span><span class="p">$6.98</span></div>
<div class="offer best"><span class="cond">New — Hardcover</span><span class="p">$24.95</span></div>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">See All 14 Sellers</button>
</div>
<span class="meta">Ships from a verified independent bookseller</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f4; color: #010101;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f4; color: #010101;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; margin: 0; color: #010101; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 1px; background: #db1e36; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 1px; background: #f4f4f4; color: #010101;
border: 1px solid #db1e36; border-radius: 9999px;
padding: 12px 32px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #231f20;
border: 1px solid #b7b7b7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #db1e36; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f4f4f4; font-family:Gotham,Arial,sans-serif; color:#231f20; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#010101;}
.logo{font-family:Oswald,Arial,sans-serif;font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#fff;}
.navlinks{display:flex;gap:22px;font-family:Oswald,Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#eaeaea;}
.navcta{background:#db1e36;color:#fff;font-family:Oswald,Arial,sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;padding:9px 18px;border-radius:20px;}
.hero{height:250px;background:linear-gradient(0deg,#db1e36 0%,#010101 90%);display:flex;align-items:center;padding:0 36px;}
.herotext{width:460px;}
.kicker{font-family:Oswald,Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#80c3e4;margin-bottom:12px;}
.h1{font-family:Oswald,Arial,sans-serif;font-size:38px;font-weight:700;text-transform:uppercase;letter-spacing:1px;line-height:1.1;color:#fff;margin:0 0 14px;}
.sub{font-size:14px;line-height:1.5;color:#e5e5e5;margin:0 0 20px;max-width:380px;}
.cta{display:inline-block;background:#db1e36;color:#fff;font-family:Oswald,Arial,sans-serif;font-size:14px;font-weight:600;text-transform:uppercase;padding:14px 30px;border-radius:9999px;}
.bat{position:absolute;right:100px;top:56px;width:16px;height:180px;background:linear-gradient(90deg,#d3d3d3,#fff);border-radius:0 0 8px 8px;}
.barrel{position:absolute;right:88px;top:56px;width:40px;height:70px;border-radius:20px;background:linear-gradient(135deg,#eaeaea,#aeaeae);}
.sec{padding:22px 36px 0;}
.secTitle{font-family:Oswald,Arial,sans-serif;font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#010101;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border-radius:12px;padding:12px;border:1px solid #d3d3d3;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#ffb13b;color:#010101;font-family:Oswald,Arial,sans-serif;font-size:10px;font-weight:600;text-transform:uppercase;padding:3px 9px;border-radius:9999px;z-index:2;}
.thumb{height:100px;border-radius:8px;margin-bottom:10px;}
.pname{font-family:Oswald,Arial,sans-serif;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:#010101;}
.pprice{font-size:14px;font-weight:700;color:#db1e36;margin-top:6px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Victus Sports</div>
<div class="navlinks"><span>Wood Bats</span><span>BBCOR</span><span>Gloves</span><span>Pro Stock</span></div>
<div class="navcta">Shop Now</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Built for the Crack of the Bat</div>
<div class="h1">Made in the barrel. Proven at the plate.</div>
<div class="sub">Wood and composite bats trusted by pros who demand the sound of contact.</div>
<div class="cta">Shop Bats</div>
</div>
<div class="bat"></div><div class="barrel"></div>
</div>
<div class="sec">
<div class="secTitle">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge">Pro Stock</span><div class="thumb" style="background:linear-gradient(135deg,#231f20,#db1e36)"></div><div class="pname">Nox BBCOR</div><div class="pprice">$349.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#216ba5,#231f20)"></div><div class="pname">Maple Pro Reserve</div><div class="pprice">$179.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#80c3e4,#231f20)"></div><div class="pname">Rip-It Fastpitch</div><div class="pprice">$299.99</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f050f8; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f050f8; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #752d79; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #100030; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f050f8; color: #100030;
border: 1px solid #100030; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f050f8; color: #111111;
border: 1px solid #cc46d3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #752d79; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cc43d8; color: #100030;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#100030; color:#f0ffff; box-sizing:border-box;
font-family:"Helvetica", "Arial", sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:rgba(16,0,48,0.9); }
.brand { color:#60f0f8; font-size:19px; font-weight:500; }
.navlinks { display:flex; gap:8px; }
.navlinks span { font-size:16px; font-weight:500; border-radius:12px; padding:10px 14px; }
.hero { padding:26px 36px 0; }
.hero h1 { color:#60f0f8; font-size:34px; font-weight:500; line-height:1.3; margin:0 0 14px; max-width:520px; }
.hero p { font-size:16px; color:#f0ffff; margin:0 0 20px; max-width:460px; }
.quoteform { display:flex; width:460px; }
.postcode { flex:1; background:#ffffff; color:#000000; font-size:16px; font-weight:600; height:52px;
border-radius:12px 0 0 12px; display:flex; align-items:center; padding:0 16px; }
.quotecta { background:#f050f8; color:#f0ffff; font-size:16px; font-weight:400; height:52px; border-radius:0 12px 12px 0;
display:flex; align-items:center; padding:0 20px; white-space:nowrap; }
.cards-row { position:absolute; top:280px; left:0; right:0; bottom:0; padding:20px 36px 0; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.card { background:#180048; border-radius:12px; padding:16px; }
.card .glyph { width:34px; height:34px; border-radius:9999px; background:linear-gradient(135deg,#5840ff,#60f0f8); margin-bottom:10px; }
.card h4 { font-size:15px; font-weight:500; color:#f0ffff; margin:0; }
.trust { display:flex; gap:8px; margin-top:16px; }
.pill { background:#180048; color:#f0ffff; font-size:12px; font-weight:400; border-radius:9999px; padding:5px 14px; }
</style></head>
<body>
<nav>
<span class="brand">Octopus Energy</span>
<div class="navlinks"><span>Energy</span><span>Heat pumps</span><span>Log in</span></div>
</nav>
<div class="hero">
<h1>Join the UK's most popular energy supplier</h1>
<p>Everything you need for a cheaper, greener home & business.</p>
<div class="quoteform">
<div class="postcode">Enter your postcode</div>
<div class="quotecta">Get a quote</div>
</div>
<div class="trust">
<span class="pill">Which? Recommended Provider</span>
<span class="pill">Rated 4.8 stars</span>
</div>
</div>
<div class="cards-row">
<div class="grid">
<div class="card"><div class="glyph"></div><h4>Energy</h4></div>
<div class="card"><div class="glyph"></div><h4>Heat pumps</h4></div>
<div class="card"><div class="glyph"></div><h4>Solar & batteries</h4></div>
<div class="card"><div class="glyph"></div><h4>Electric vehicles</h4></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #dedede;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #dedede;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #dedede; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #fec000; color: #18181a;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: transparent; color: #dedede;
border: 1px solid #fec000; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #2b2b2c; color: #dedede;
border: 1px solid #454545; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #fec000; color: #18181a;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121212; font-family:Inter,Arial,sans-serif; color:#dedede; }
*{box-sizing:border-box;}
.nav{height:56px;background:#18181a;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #343436;}
.logo{font-size:19px;font-weight:800;color:#fec000;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;}
.hero{height:190px;background:#121212;display:flex;align-items:center;padding:0 32px;}
.heroText{width:56%;}
.livebadge{display:inline-flex;align-items:center;gap:6px;background:#fec000;color:#18181a;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:4px 10px;border-radius:9999px;margin-bottom:10px;}
.livebadge .dot{width:6px;height:6px;border-radius:9999px;background:#18181a;}
.heroText h1{font-size:36px;font-weight:800;letter-spacing:-.5px;margin:0 0 10px;line-height:1.1;color:#dedede;}
.heroText p{font-size:14px;color:#b4b4b8;max-width:320px;margin:0 0 14px;}
.btn{display:inline-block;background:#fec000;color:#18181a;font-size:15px;font-weight:600;padding:12px 24px;border-radius:4px;}
.heroImg{width:44%;height:140px;position:relative;}
.countdown{display:flex;gap:8px;}
.digit{background:#343436;border-radius:4px;padding:8px 12px;text-align:center;}
.digit b{font-size:28px;font-weight:800;color:#fec000;display:block;}
.digit span{font-size:10px;color:#757575;text-transform:uppercase;}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:206px;background:#2b2b2c;border-radius:8px;padding:12px;position:relative;}
.badge{position:absolute;top:20px;left:20px;background:#fec000;color:#18181a;font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:9999px;z-index:2;}
.thumb{aspect-ratio:3/4;border-radius:4px;margin-bottom:8px;border:1px solid #d4af37;}
.pname{font-size:15px;font-weight:600;margin:0 0 4px;color:#dedede;}
.pprice{font-size:20px;font-weight:700;color:#fec000;margin:0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Ultimate Autographs</div>
<div class="navlinks"><span>Live Breaks</span><span>Sealed Wax</span><span>Singles</span><span>Schedule</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="livebadge"><span class="dot"></span>LIVE NOW</div>
<h1>Own a slot. Watch the break.</h1>
<p>Live group openings of sealed sports card boxes — team slots, random hits, real-time reveals.</p>
<div class="btn">Join This Break</div>
</div>
<div class="heroImg"><div class="countdown">
<div class="digit"><b>02</b><span>HRS</span></div>
<div class="digit"><b>14</b><span>MIN</span></div>
<div class="digit"><b>39</b><span>SEC</span></div>
</div></div>
</div>
<div class="grid">
<div class="card"><span class="badge">Auto</span><div class="thumb" style="background:linear-gradient(160deg,#fec000,#2b2b2c)"></div><div class="pname">2024 Prizm Auto /25</div><div class="pprice">$189.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#d4af37,#2b2b2c)"></div><div class="pname">Team Slot — Lakers</div><div class="pprice">$45.00</div></div>
<div class="card"><span class="badge">Relic</span><div class="thumb" style="background:linear-gradient(160deg,#f4d00e,#2b2b2c)"></div><div class="pname">Patch Card /10</div><div class="pprice">$129.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#343436,#2b2b2c)"></div><div class="pname">Random Team Slot</div><div class="pprice">$25.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #b1b1b1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #f9fafb; color: #1a1a1a;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9fafb; color: #1a1a1a;
border: 1px solid #c1c2c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b1b1b1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.33; background: #108474; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#f9fafb; color:#1a1a1a; box-sizing:border-box; font-family:'Plus Jakarta Sans',inherit,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; background:#f9fafb; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:17px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; letter-spacing:0.2px; color:#7b7b7b; }
.navlinks span.active { color:#1a1a1a; border-bottom:2px solid #108474; padding-bottom:4px; }
.search-pill { background:#f5f2ee; border-radius:999px; padding:10px 20px; font-size:13px; color:#b1b1b1; }
.main { display:flex; gap:24px; padding:16px 32px; height:400px; }
.gallery { width:400px; background:#f5f2ee; border-radius:8px; display:flex; align-items:center; justify-content:center; position:relative; }
.riser { width:220px; height:60px; background:linear-gradient(90deg,#cbc0ac,#efece6); border-radius:8px; position:relative; }
.riser::before { content:''; position:absolute; left:20px; bottom:-40px; width:20px; height:40px; background:#cbc0ac; border-radius:4px; }
.riser::after { content:''; position:absolute; right:20px; bottom:-40px; width:20px; height:40px; background:#cbc0ac; border-radius:4px; }
.badge-pill { position:absolute; top:16px; left:16px; background:#108474; color:#fff; font-size:12px; font-weight:600; padding:4px 12px; border-radius:999px; }
.rating-pill { position:absolute; bottom:16px; right:16px; background:#fff; border:1px solid #dedede; font-size:11px; font-weight:600; padding:4px 12px; border-radius:999px; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; }
.info h1 { font-size:24px; font-weight:600; margin:0; }
.price { font-size:18px; font-weight:500; color:#7b7b7b; }
.desc { font-size:14px; line-height:1.5; color:#7b7b7b; max-width:420px; }
.wood-row { display:flex; gap:8px; margin-top:4px; }
.wood-chip { background:#efece6; color:#1a1a1a; font-size:12px; font-weight:600; padding:4px 12px; border-radius:999px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:44px; background:#108474; color:#fff; border:none; border-radius:8px; font-weight:600; font-size:15px; }
.btn-secondary { flex:1; height:44px; background:#f9fafb; color:#1a1a1a; border:1px solid #dedede; border-radius:8px; font-weight:600; font-size:15px; }
.section-header { padding:0 32px; font-size:18px; font-weight:500; }
.related { display:flex; gap:16px; padding:10px 32px; }
.rel-card { flex:1; background:#fff; border:1px solid #dedede; border-radius:8px; padding:10px; }
.rel-card .rel-img { height:60px; background:#f5f2ee; border-radius:8px; margin-bottom:6px; }
.rel-card span { font-size:12px; font-weight:500; }
</style></head>
<body>
<nav>
<p class="brand">Balolo</p>
<div class="navlinks"><span class="active">Monitor Stands</span><span>Desk Organizers</span><span>Workspace</span></div>
<div class="search-pill">🔍 Search workspace</div>
</nav>
<div class="main">
<div class="gallery">
<span class="badge-pill">Best Seller</span>
<div class="riser"></div>
<span class="rating-pill">★ 4.8</span>
</div>
<div class="info">
<h1>Walnut Monitor Stand Riser</h1>
<span class="price">$89.00</span>
<p class="desc">Solid walnut riser lifts your monitor to eye level while opening a shelf for a keyboard or notebook beneath. Precision-joined, hand-finished, built to outlast the desk.</p>
<div class="wood-row">
<span class="wood-chip">Walnut</span>
<span class="wood-chip">Oak</span>
<span class="wood-chip">Ash</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Read Reviews</button>
</div>
</div>
</div>
<div class="section-header">You may also like</div>
<div class="related">
<div class="rel-card"><div class="rel-img"></div><span>Oak Desk Organizer</span></div>
<div class="rel-card"><div class="rel-img"></div><span>Walnut Laptop Stand</span></div>
<div class="rel-card"><div class="rel-img"></div><span>Ash Cable Tray</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.36; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #848484; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #003399; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #ffffff; color: #003399;
border: 1px solid #003399; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #848484; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; background: #ff0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:'Roboto', Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; border-bottom:1px solid #ededed; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.logo { font-size:20px; font-weight:500; color:#003399; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:24px; font-size:16px; font-weight:500; color:#555555; }
.navlinks span:first-child { color:#003399; }
.navicons { font-size:13px; font-weight:500; color:#555; }
main { display:flex; padding:20px 32px 0; gap:30px; height:280px; }
.shot { width:320px; background:#ededed; border-radius:12px 12px 0 0; position:relative; overflow:hidden; aspect-ratio:4/3; height:240px; }
.shot::before { content:''; position:absolute; inset:24px; border-radius:8px;
background:linear-gradient(160deg,#003399 0%, #0f1f3d 55%, #003388 100%); }
.shot::after { content:''; position:absolute; left:24px; right:24px; bottom:44px; height:16px; border-radius:4px;
background:#111; box-shadow: 0 0 0 2px #222 inset; }
.badge { position:absolute; top:12px; left:12px; background:#ff0000; color:#fff; font-size:12px; font-weight:700;
border-radius:4px; padding:2px 8px; z-index:2; }
.info { flex:1; display:flex; flex-direction:column; min-width:0; }
.badge-spec-row { display:flex; gap:8px; margin-bottom:10px; }
.badge-spec { background:#ededed; color:#848484; font-size:13px; border-radius:9999px; padding:4px 12px; }
h1 { font-size:22px; font-weight:500; margin:0 0 8px; line-height:1.36; }
.price { font-size:18px; font-weight:400; color:#003399; margin-bottom:12px; }
.desc { font-size:14px; color:#555555; line-height:1.5; margin-bottom:16px; }
.cta { margin-top:auto; display:flex; gap:10px; }
.btn-primary { background:#003399; color:#fff; border:none; border-radius:8px; height:44px; padding:0 24px; font-size:16px; font-weight:500; }
.btn-secondary { background:#fff; color:#003399; border:2px solid #003399; border-radius:8px; height:44px; padding:0 22px; font-size:16px; font-weight:500; }
.tabbar { display:flex; border-bottom:1px solid #dcdcdc; padding:0 32px; }
.tab { padding:12px 22px; font-size:16px; font-weight:500; color:#848484; }
.tab.on { color:#003399; border-bottom:2px solid #003399; }
.spectable { padding:14px 32px 0; }
.srow { display:flex; border-bottom:1px solid #ededed; }
.srow div:first-child { width:220px; padding:8px 16px; font-size:12px; font-weight:600; letter-spacing:0.5px;
text-transform:uppercase; color:#848484; }
.srow div:last-child { flex:1; padding:8px 16px; font-size:14px; color:#555555; }
footer { margin-top:auto; height:58px; background:#222222; color:#abb8c3; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; font-size:14px; }
footer b { color:#fff; }
</style></head>
<body>
<nav>
<div class="logo">Caldigit</div>
<div class="navlinks"><span>Docks</span><span>Hubs</span><span>Cables</span><span>Support</span></div>
<div class="navicons">Account · Cart</div>
</nav>
<main>
<div class="shot"><span class="badge">Sale</span></div>
<div class="info">
<div class="badge-spec-row"><span class="badge-spec">Thunderbolt 4</span><span class="badge-spec">18-in-1</span></div>
<h1>Thunderbolt 4 Element Hub Docking Station</h1>
<div class="price">$249.95</div>
<p class="desc">Dual 4K display support, 98W host charging, and 10Gbps data across 18 ports —
engineered for creative professionals who need one cable to run everything.</p>
<div class="cta">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compare Docks</button>
</div>
</div>
</main>
<div class="tabbar">
<div class="tab on">Specifications</div>
<div class="tab">Overview</div>
<div class="tab">Reviews (612)</div>
</div>
<div class="spectable">
<div class="srow"><div>Ports</div><div>18 total — 2x DisplayPort, 3x USB-A, 1x Gigabit Ethernet</div></div>
<div class="srow"><div>Host Charging</div><div>Up to 98W over Thunderbolt 4</div></div>
<div class="srow"><div>Display Support</div><div>Dual 4K@60Hz or single 8K@30Hz</div></div>
</div>
<footer>
<span>© Caldigit</span>
<span><b>2-Year Warranty</b> · Free ground shipping · 30-day returns</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1868db; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1868db; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #92b6e9; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff613d; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1868db; color: #ffffff;
border: 1px solid #ff613d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1868db; color: #f5f5f5;
border: 1px solid #3b7fdf; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #92b6e9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3d67c2; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#101214; box-sizing:border-box;
font-family:'Charlie Text',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 62px; display:flex; align-items:center; justify-content:space-between; padding:0 44px; }
.brand { font-size:19px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:26px; font-size:15px; font-weight:400; color:#292a2e; }
.btn-dark { background:#101214; color:#fff; border:none; border-radius:9999px; height:44px; padding:0 22px; font-size:15px; font-weight:700; }
.hero { flex:0 0 230px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; padding:0 40px; overflow:hidden;
background: radial-gradient(circle at 12% 15%, rgba(255,97,61,0.14), rgba(255,97,61,0) 45%),
radial-gradient(circle at 92% 85%, rgba(191,99,243,0.16), rgba(191,99,243,0) 50%); }
.hero h1 { font-family:'Charlie Display',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:44px; font-weight:700; line-height:1.06; margin:0 0 12px; max-width:620px; }
.hero p { font-size:16px; color:#7d818a; margin:0 0 18px; }
.row { display:flex; gap:12px; }
.btn-primary { background:#1868db; color:#fff; border:none; border-radius:9999px; height:48px; padding:0 24px; font-size:15px; font-weight:700; }
.btn-light { background:#e9f2fe; color:#101214; border:none; border-radius:9999px; height:48px; padding:0 24px; font-size:15px; font-weight:700; }
.cards { flex:1; display:flex; gap:16px; padding:20px 44px 0; }
.card { flex:1; background:#ffffff; border-radius:24px; padding:20px;
box-shadow: rgba(0,0,0,0.03) 0px 4px 6.4px 0px, rgba(0,0,0,0.05) 0px 3px 9.6px 0px;
display:flex; flex-direction:column; gap:8px; }
.card .swatch { width:100%; height:60px; border-radius:16px; }
.card h3 { font-size:16px; font-weight:700; margin:0; }
.card p { font-size:12.5px; color:#7d818a; line-height:1.5; margin:0; }
footer { flex:0 0 66px; background:#e9f2fe; display:flex; align-items:center; justify-content:space-between;
padding:0 44px; font-size:13px; color:#292a2e; }
</style></head>
<body>
<nav>
<p class="brand">Loom</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Resources</span><span>Pricing</span></div>
<button class="btn-dark">Get Loom for free</button>
</nav>
<section class="hero">
<h1>One video is worth a thousand words.</h1>
<p>Record your screen, share a link, keep the meeting out of everyone's calendar.</p>
<div class="row">
<button class="btn-primary">Get started free</button>
<button class="btn-light">Contact sales</button>
</div>
</section>
<section class="cards">
<div class="card"><div class="swatch" style="background:linear-gradient(135deg,#ff613d,#48245d)"></div><h3>Async video</h3><p>Explain in minutes what would take an hour of meetings.</p></div>
<div class="card"><div class="swatch" style="background:linear-gradient(135deg,#1868db,#bf63f3)"></div><h3>Instant sharing</h3><p>A link is ready before the recording even finishes uploading.</p></div>
<div class="card"><div class="swatch" style="background:linear-gradient(135deg,#bf63f3,#ff613d)"></div><h3>AI notes</h3><p>Automatic summaries and action items pulled from every recording.</p></div>
</section>
<footer>
<span>© Loom</span>
<span>Loom · Chrome Extension · Blog</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2dd4bf; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2dd4bf; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #1e695f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fbbf24; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2dd4bf; color: #000000;
border: 1px solid #fbbf24; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2dd4bf; color: #111111;
border: 1px solid #29b5a3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #1e695f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4ed1a6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#374151; box-sizing:border-box;
font-family:Montserrat, -apple-system, sans-serif; }
* { box-sizing:border-box; }
.glow { position:absolute; width:400px; height:400px; border-radius:50%; background:#fffbeb;
top:-140px; left:280px; z-index:0; }
nav { position:relative; z-index:2; height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-size:19px; font-weight:800; color:#000; }
.apps { display:flex; gap:22px; font-size:14px; color:#111827; }
.hero { position:relative; z-index:2; text-align:center; padding:6px 30px 24px; }
.hero h1 { font-size:40px; font-weight:700; letter-spacing:-0.9px; margin:0 0 12px; color:#000; }
.hero p { font-size:15px; color:#4b5563; margin:0 0 18px; }
.pill { display:inline-block; background:linear-gradient(to right,#fbbf24,#a3e635,#2dd4bf); color:#fff;
border-radius:9999px; padding:12px 26px; font-size:15px; font-weight:600; }
.approw { position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:8px 34px 0; }
.appcard { border-radius:12px; padding:16px; text-align:center; }
.appcard .ic { width:52px; height:52px; margin:0 auto 8px; border-radius:16px; }
.appcard h4 { font-size:13px; font-weight:700; margin:0; color:#111827; }
.a1 .ic { background:linear-gradient(135deg,#215468,#a5f3fc); }
.a2 .ic { background:linear-gradient(135deg,#55b67c,#d1f5db); }
.a3 .ic { background:linear-gradient(135deg,#fbbf24,#fde68a); }
.a4 .ic { background:linear-gradient(135deg,#a3e635,#ecfccb); }
.band { position:relative; z-index:2; background:#f3f4f6; margin-top:22px; padding:22px 34px; display:flex; gap:16px; }
.panel { background:#ffffff; border-radius:20px; padding:20px; flex:1; }
.panel h3 { font-size:19px; font-weight:800; letter-spacing:-0.6px; margin:0 0 8px; }
.panel p { font-size:13px; color:#4b5563; margin:0; }
.darkpanel { background:#1f2937; color:#fff; border-radius:24px; padding:20px; flex:0 0 220px; }
.darkpanel h4 { font-size:15px; margin:0 0 6px; }
</style></head>
<body>
<div class="glow"></div>
<nav>
<p class="brand">Fourdesire</p>
<div class="apps"><span>Plant Nanny</span><span>Fortune City</span><span>Walkr</span><span>Book Morning!</span></div>
</nav>
<section class="hero">
<h1>Spark the fun in the ordinary.</h1>
<p>SPARKFUL's apps help you take care of your health and wellness without forgetting the fun.</p>
<span class="pill">Explore SPARKFUL Apps</span>
</section>
<div class="approw">
<div class="appcard a1"><div class="ic"></div><h4>Walkr</h4></div>
<div class="appcard a2"><div class="ic"></div><h4>Plant Nanny</h4></div>
<div class="appcard a3"><div class="ic"></div><h4>Fortune City</h4></div>
<div class="appcard a4"><div class="ic"></div><h4>To-Do Adventure</h4></div>
</div>
<div class="band">
<div class="panel"><h3>The Most Playful Form of Self-Care</h3><p>Change begins with fun — every habit becomes a tiny adventure.</p></div>
<div class="darkpanel"><h4>Explore the Boundless Universe</h4><p style="font-size:12px;color:#a5f3fc;">Walkr — walk your way across the galaxy.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #337ab7;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #337ab7;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #337ab7; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; background: #0198ab; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; background: #ffffff; color: #555555;
border: 1px solid #0198ab; border-radius: 4px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #080808;
border: 1px solid #ccdeed; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #8fd300; color: #080808;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#080808; box-sizing:border-box;
font-family:'Roboto', Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
.kufi { font-family:'Reem Kufi', 'Roboto', sans-serif; }
.mono { font-family:Consolas, 'Courier New', Menlo, Monaco, monospace; }
.stripe { height:26px; background:#0198ab; color:#fff; font-size:11px; display:flex; align-items:center;
justify-content:center; letter-spacing:0.3px; }
nav { height:50px; background:#044a80; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { color:#fff; font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#fff; font-weight:500; }
.navlinks span:first-child { border-bottom:3px solid #8fd300; padding-bottom:14px; }
.crumb { font-size:11px; color:#777777; padding:6px 36px 0; }
.crumb b { color:#555555; font-weight:400; }
.hero { background:#044a80; border-top:4px solid #8fd300; padding:22px 36px; display:flex; align-items:center;
justify-content:space-between; gap:24px; min-height:120px; }
.hero h1 { color:#fff; font-size:28px; font-weight:700; letter-spacing:-0.3px; margin:0 0 6px; }
.hero p { color:#d7e6f0; font-size:13px; margin:0 0 12px; max-width:380px; }
.btnrow { display:flex; gap:8px; }
.btn-primary { background:#0198ab; color:#fff; border:none; border-radius:4px; padding:8px 16px; font-size:13px; height:36px; }
.btn-accent { background:#8fd300; color:#080808; border:none; border-radius:4px; padding:8px 16px; font-size:13px; font-weight:600; height:36px; }
.section { padding:16px 36px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.sec-head h2 { font-size:18px; font-weight:700; margin:0; }
.sec-head span { font-size:12px; color:#337ab7; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#fff; border:1px solid #eeeeee; border-radius:4px; padding:14px; }
.thumb { aspect-ratio:4/3; background:#f5f5f5; position:relative; margin-bottom:8px; }
.t1::after { content:''; position:absolute; inset:24px; background:linear-gradient(150deg,#0198ab,#044a80); }
.t2::after { content:''; position:absolute; inset:24px; background:linear-gradient(150deg,#8fd300,#5a8a02); }
.t3::after { content:''; position:absolute; inset:24px; background:linear-gradient(150deg,#9d9d9d,#555); }
.badge { position:absolute; top:6px; left:6px; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:0.5px; padding:3px 8px; border-radius:4px; z-index:2; }
.badge.new { background:#0198ab; color:#fff; }
.badge.cat { background:#8fd300; color:#080808; }
.part { font-family:Consolas,monospace; font-size:11px; font-weight:600; color:#777777; letter-spacing:0.5px; }
.card h3 { font-size:14px; font-weight:600; margin:2px 0 6px; }
.price { color:#0198ab; font-size:17px; font-weight:600; margin:0 0 8px; }
.spec { border:1px solid #e7e7e7; border-radius:4px; margin-top:12px; }
.row { display:grid; grid-template-columns:1fr 1fr; font-size:12px; padding:6px 12px; }
.row.head { background:#f5f5f5; font-weight:700; }
.row:not(.head) .k { font-weight:700; color:#555555; }
.row:not(.head) .v { font-family:Consolas,monospace; }
footer { background:#044a80; border-top:4px solid #8fd300; color:#e5e5e5; font-size:12px; padding:14px 36px;
display:flex; justify-content:space-between; align-items:center; margin-top:14px; }
footer a { color:#e5e5e5; margin-left:14px; }
</style></head>
<body>
<div class="stripe">Free shipping on orders over $500 · Trade & Institutional Accounts Welcome</div>
<nav>
<p class="brand">Benchmark Scientific</p>
<div class="navlinks"><span>Centrifuges</span><span>Shakers</span><span>Incubators</span><span>Support</span></div>
</nav>
<div class="crumb">Home / Lab Equipment / <b>Benchtop Centrifuges</b></div>
<section class="hero">
<div>
<h1 class="kufi">Precision equipment, ready to ship</h1>
<p>Centrifuges, shakers, and incubators engineered for the lab that can't afford downtime.</p>
<div class="btnrow"><button class="btn-primary">Request Quote</button><button class="btn-accent">Shop Category</button></div>
</div>
</section>
<section class="section">
<div class="sec-head"><h2>Featured Equipment</h2><span>View catalog →</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge new">New</span></div>
<p class="part">BSC-2400</p>
<h3>Refrigerated Microcentrifuge</h3>
<p class="price">$2,450.00</p>
<button class="btn-primary">Add to Cart</button>
</div>
<div class="card">
<div class="thumb t2"><span class="badge cat">Best Seller</span></div>
<p class="part">BSO-1000</p>
<h3>Orbital Shaker, Digital</h3>
<p class="price">$895.00</p>
<button class="btn-primary">Add to Cart</button>
</div>
<div class="card">
<div class="thumb t3"></div>
<p class="part">BSI-500</p>
<h3>CO2 Incubator, 5.0 cu ft</h3>
<p class="price">$3,120.00</p>
<button class="btn-primary">Add to Cart</button>
</div>
</div>
<div class="spec">
<div class="row head"><span>Spec</span><span>Value</span></div>
<div class="row"><span class="k">Max Speed</span><span class="v">15,000 RPM</span></div>
<div class="row"><span class="k">Rotor Capacity</span><span class="v">24 x 1.5/2.0mL</span></div>
</div>
</section>
<footer>
<span>© Benchmark Scientific</span>
<div><a href="#">Catalog</a><a href="#">SDS Library</a><a href="#">Contact Sales</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7faf6; color: #212a32;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7faf6; color: #212a32;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #212a32; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #97756b; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #f7faf6; color: #212a32;
border: 1px solid #97756b; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f7faf6; color: #212a32;
border: 1px solid #c2c6c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #df9c55; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f7faf6; font-family:'Consolas','Courier New',monospace; color:#212a32;
}
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #d9e2d6;}
.logo{font-size:17px;font-weight:700;letter-spacing:1px;color:#212a32;text-transform:uppercase;}
.navlinks{display:flex;gap:22px;font-size:11.5px;color:#465552;letter-spacing:.5px;}
.cta{background:#97756b;color:#fff;padding:9px 16px;font-size:11px;font-weight:700;border-radius:14px;}
.hero{display:flex;padding:22px 30px;gap:24px;}
.hero-copy{width:340px;}
.field-tag{font-size:10px;color:#a99994;letter-spacing:1px;margin-bottom:8px;}
.hero-title{font-size:26px;font-weight:700;line-height:1.3;margin-bottom:12px;}
.hero-sub{font-size:12.5px;line-height:1.6;color:#465552;margin-bottom:14px;}
.btn-outline{display:inline-block;border:1.5px solid #97756b;color:#97756b;padding:9px 18px;font-size:11px;font-weight:700;border-radius:14px;}
.hero-visual{flex:1;display:flex;gap:12px;}
.poly{flex:1;border-radius:16px;background:#465552;position:relative;box-shadow:0 4px 10px rgba(0,0,0,.08);}
.poly.a{background:linear-gradient(160deg,#97756b,#465552);}
.poly.b{background:linear-gradient(160deg,#df9c55,#97756b);margin-top:20px;}
.poly.c{background:linear-gradient(160deg,#a99994,#212a32);}
.tagchip{position:absolute;bottom:10px;left:10px;background:rgba(255,255,255,.85);color:#212a32;font-size:8.5px;padding:3px 8px;border-radius:10px;font-weight:700;}
.section{padding:8px 30px 0;}
.section-title{font-size:15px;font-weight:700;margin-bottom:12px;letter-spacing:.5px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#fff;border:1px solid #e3e8e1;border-radius:12px;overflow:hidden;}
.card-img{height:100px;background:linear-gradient(160deg,#d4d0ca,#97756b);position:relative;}
.sale{position:absolute;top:8px;left:8px;background:#df9c55;color:#fff;font-size:8px;font-weight:700;padding:3px 7px;border-radius:8px;}
.card-body{padding:10px;}
.card-name{font-size:11px;font-weight:600;margin-bottom:5px;line-height:1.3;}
.card-price{font-size:12px;font-weight:700;color:#97756b;}
</style>
<div class="nav">
<div class="logo">Earthstudies</div>
<div class="navlinks"><span>Field Notes</span><span>Instruments</span><span>Apparel</span><span>Archive</span></div>
<div class="cta">Log Book →</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="field-tag">// FIELD-STATION-04 :: ISSUE 12</div>
<div class="hero-title">Tools for observing the natural world.</div>
<div class="hero-sub">Notebooks, optics, and apparel built for people who take notes outdoors and mean it.</div>
<div class="btn-outline">Browse the Archive</div>
</div>
<div class="hero-visual">
<div class="poly a"><div class="tagchip">SPECIMEN.01</div></div>
<div class="poly b"><div class="tagchip">SPECIMEN.02</div></div>
<div class="poly c"><div class="tagchip">SPECIMEN.03</div></div>
</div>
</div>
<div class="section">
<div class="section-title">// RECENTLY CATALOGED</div>
<div class="grid">
<div class="card"><div class="card-img"><div class="sale">-15%</div></div><div class="card-body"><div class="card-name">Field Notebook, Ruled</div><div class="card-price">$14.00</div></div></div>
<div class="card"><div class="card-img"></div><div class="card-body"><div class="card-name">Brass Pocket Compass</div><div class="card-price">$32.00</div></div></div>
<div class="card"><div class="card-img"></div><div class="card-body"><div class="card-name">Canvas Field Jacket</div><div class="card-price">$118.00</div></div></div>
<div class="card"><div class="card-img"><div class="sale">-10%</div></div><div class="card-body"><div class="card-name">Botanical Press Kit</div><div class="card-price">$46.00</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #1c1d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #1c1d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 300; line-height: 1.27; margin: 0; color: #1c1d1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #ffffff; color: #1c1d1d;
border: 1px solid #108474; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1c1d1d;
border: 1px solid #c2c3c3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #b19356; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#fafafa; color:#1c1d1d; box-sizing:border-box; font-family:'Open Sans',-apple-system,system-ui,Arial,sans-serif; }
* { box-sizing:border-box; }
.announce { height:36px; background:#108474; color:#fff; font-size:13px; font-weight:600; letter-spacing:0.1px; display:flex; align-items:center; justify-content:center; }
nav { height:60px; background:#fff; border-bottom:1px solid #eeeeee; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; letter-spacing:0.3px; text-transform:uppercase; color:#1c1d1d; position:relative; }
.navlinks span.active::after { content:''; position:absolute; bottom:-18px; left:0; right:0; height:2px; background:#108474; }
.main { display:flex; height:396px; }
.dark-hero { width:420px; background:#1c1d1d; display:flex; align-items:center; justify-content:center; position:relative; }
.microwave { width:220px; height:150px; background:linear-gradient(160deg,#2a2b2b,#1c1d1d); border-radius:10px; border:1px solid #3a3a3a; position:relative; }
.microwave::before { content:''; position:absolute; left:16px; top:16px; width:130px; height:118px; background:#0d0d0d; border-radius:6px; border:2px solid #108474; }
.microwave::after { content:''; position:absolute; right:16px; top:16px; bottom:16px; width:36px; background:#333; border-radius:4px; }
.eyebrow { position:absolute; top:24px; left:24px; color:#108474; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; }
.info { flex:1; padding:32px 40px; display:flex; flex-direction:column; gap:10px; }
.info h1 { font-size:32px; font-weight:400; margin:0; letter-spacing:-0.3px; }
.price-display { font-size:22px; font-weight:300; }
.desc { font-size:14px; line-height:1.55; color:#7b7b7b; max-width:420px; }
.btn-add { margin-top:auto; height:52px; background:#108474; color:#fff; border:none; border-radius:4px; font-weight:600; font-size:16px; }
.spec-table { padding:0 32px; }
.spec-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #eeeeee; font-size:13px; }
.spec-row span:first-child { color:#7b7b7b; }
.spec-row span:last-child { font-weight:600; }
</style></head>
<body>
<div class="announce">Free 2-day shipping on all kitchen appliances</div>
<nav>
<p class="brand">Balmuda Microwav 2</p>
<div class="navlinks"><span class="active">Microwaves</span><span>Toasters</span><span>Kettles</span><span>Air Purifiers</span></div>
</nav>
<div class="main">
<div class="dark-hero">
<span class="eyebrow">The Balmuda Range</span>
<div class="microwave"></div>
</div>
<div class="info">
<h1>The Balmuda Range Microwave</h1>
<span class="price-display">$449.00</span>
<p class="desc">A steam-assisted microwave that reheats leftovers and defrosts proteins evenly, without drying them out. Precision electronics translate to a quieter, more considered kitchen.</p>
<button class="btn-add">Add to Cart</button>
</div>
</div>
<div class="spec-table">
<div class="spec-row"><span>Wattage</span><span>1000W Microwave / 1400W Grill</span></div>
<div class="spec-row"><span>Capacity</span><span>0.9 cu ft</span></div>
<div class="spec-row"><span>Dimensions</span><span>20.1" x 16.5" x 12.2"</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #52f756; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #52f756; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #2e7830; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #24292e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #52f756; color: #24292e;
border: 1px solid #24292e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #52f756; color: #111111;
border: 1px solid #48d24b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #2e7830; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4bd650; color: #24292e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6f8fa; color:#24292e; box-sizing:border-box;
font-family:"Sohne", "Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; border-radius:0 !important; }
.banner { background:#24292e; color:#52f756; border-bottom:1px solid #52f756; font-size:12px; font-weight:500;
padding:6px 32px; display:flex; justify-content:space-between; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#24292e; border-bottom:1px solid #3b434a; }
.brand { font-size:17px; font-weight:400; color:#f6f8fa; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:26px; font-size:14px; font-weight:500; color:#d9e4ed; }
.navlinks span:last-child { color:#52f756; }
.contact { background:#000000; color:#52f756; padding:7px 18px; font-size:12px; font-weight:500; }
.hero { background:#24292e; padding:36px 32px 30px; text-align:center; }
.hero h1 { font-size:38px; font-weight:400; line-height:1.2; color:#f6f8fa; margin:0 0 14px; }
.hero p { font-size:15px; color:#8d959c; margin:0 0 20px; }
.herobtns { display:flex; gap:10px; justify-content:center; }
.btn { height:42px; padding:0 22px; font-size:14px; font-weight:600; display:flex; align-items:center; }
.btn.green { background:#52f756; color:#24292e; }
.btn.dark { background:#f6f8fa; color:#24292e; border:1px solid #f6f8fa; }
.segs { display:flex; justify-content:center; gap:0; background:#24292e; padding-bottom:26px; }
.seg { background:#1b1f23; color:#8d959c; font-size:13px; font-weight:500; padding:8px 28px; border-top:1px solid #3b434a; border-bottom:1px solid #3b434a; }
.seg.active { color:#52f756; border-color:#52f756; }
.seg:first-child { border-left:1px solid #3b434a; }
.seg:last-child { border-right:1px solid #3b434a; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#e1e4e8; padding:0 32px; margin-top:24px; }
.card { background:#ffffff; padding:20px 16px; }
.card .num { font-size:24px; font-weight:600; color:#24292e; margin:0 0 6px; font-family:"Space Mono",monospace; }
.card .lab { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:#8d959c; margin:0 0 8px; }
.card p { font-size:12px; color:#3b434a; margin:0; line-height:1.4; }
.strip { display:flex; justify-content:space-between; align-items:center; margin:24px 32px 0; padding:16px 20px;
background:#ffffff; border:1px solid #e1e4e8; }
.strip h3 { font-size:18px; font-weight:400; margin:0; }
.strip .btn { height:36px; padding:0 18px; font-size:13px; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #e1e4e8; padding:10px 32px;
display:flex; justify-content:space-between; font-size:12px; color:#8d959c; background:#f6f8fa; }
</style></head>
<body style="position:relative">
<div class="banner"><span>RAISE Summit 2026 — Meet Rebellions at booth A12 →</span><span>Seoul · Bundang</span></div>
<nav>
<span class="brand">Rebellions</span>
<div class="navlinks"><span>Products</span><span>Developers</span><span>Resources</span><span>Company</span><span>Let's Talk</span></div>
<span class="contact">Let's Talk</span>
</nav>
<section class="hero">
<h1>Power AI Inference.<br>Efficiently. At Scale.</h1>
<p>Purpose-built accelerators optimized for performance-per-watt.</p>
<div class="herobtns">
<span class="btn green">Explore Rebellions SDK</span>
<span class="btn dark">Explore RebelServer™</span>
</div>
</section>
<div class="segs">
<span class="seg active">Compute</span>
<span class="seg">Generality</span>
<span class="seg">Scalability</span>
<span class="seg">Capacity</span>
</div>
<section class="cards">
<div class="card"><p class="num">144GB</p><p class="lab">HBM3E</p><p>Fused into a single UCIe-Advanced AI chiplet.</p></div>
<div class="card"><p class="num">4×</p><p class="lab">Perf / Watt</p><p>Optimized for real-world AI deployment at scale.</p></div>
<div class="card"><p class="num">2022</p><p class="lab">ATOM Tape-Out</p><p>Shipped to KT Cloud within three months.</p></div>
<div class="card"><p class="num">2024</p><p class="lab">REBEL SoC</p><p>World's first UCIe-Advanced AI chiplet.</p></div>
</section>
<div class="strip">
<h3>Chiplet Design Strategy — Built for Inference</h3>
<span class="btn dark">RebelPOD™ Specs</span>
</div>
<footer>
<span>© Rebellions — Bundang, Seongnam, Korea</span>
<span>SDK Docs · GitHub · RebelRack™</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #2b333f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #2b333f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #2b333f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; margin: 0; color: #73859f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; background: #36855c; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; background: #f8f8f8; color: #36855c;
border: 1px solid #36855c; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1b1b1b;
border: 1px solid #c5c7ca; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #73859f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffe53b; color: #2b333f;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f8f8; color:#1b1b1b; box-sizing:border-box;
font-family:'Inter', Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#f8f8f8; border-bottom:1px solid #e6e6e6; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.brand { font-size:19px; font-weight:600; color:#36855c; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:15px; font-weight:500; color:#2b333f; }
.navlinks span.on { color:#36855c; border-bottom:2px solid #36855c; padding-bottom:4px; }
.search { width:170px; height:36px; border-radius:9999px; background:#fff; border:1px solid #d6d6d6;
display:flex; align-items:center; padding:0 14px; font-size:11px; color:#73859f; }
.hero { height:180px; margin:16px 32px; background:#d7f5e6; border-radius:12px; display:flex; align-items:center;
padding:0 32px; }
.hero h1 { font-size:28px; font-weight:600; letter-spacing:-0.3px; margin:0 0 8px; }
.hero p { font-size:15px; color:#2b333f; margin:0 0 14px; max-width:340px; }
.btn { display:inline-block; width:fit-content; background:#36855c; color:#fff; font-size:15px; font-weight:500;
padding:12px 24px; border-radius:8px; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; padding:0 32px; }
.card { background:#fff; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,0.08); overflow:hidden; }
.cover { height:100px; position:relative; }
.badge { position:absolute; top:5px; right:5px; font-size:9px; font-weight:600; letter-spacing:0.5px;
text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.b-sale { background:#ffe53b; color:#2b333f; } .b-new { background:#d7f5e6; color:#4e8e4a; }
.info { padding:8px 10px; }
.t { font-size:12px; font-weight:500; margin:0 0 2px; }
.a { font-size:10px; color:#73859f; margin:0 0 4px; }
.p { font-size:12px; }
.story { margin:14px 32px 0; background:#f1f37f; border-radius:9999px; display:inline-flex; padding:6px 16px;
font-size:12px; font-weight:500; }
footer { position:absolute; bottom:0; left:0; right:0; height:48px; background:#2b333f; color:#919191;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
</style></head>
<body>
<nav>
<div class="brand">Fairytales Bookstore</div>
<div class="navlinks"><span class="on">Picture Books</span><span>Chapter Books</span><span>Events</span></div>
<div class="search">Search titles…</div>
</nav>
<div class="hero">
<div>
<h1>Stories for storytime, and beyond</h1>
<p>A calm, literate bookstore that trusts its inventory and its readers.</p>
<span class="btn">Shop New Arrivals</span>
</div>
</div>
<div class="story">📖 Story Time: Saturdays at 11am</div>
<div class="grid" style="margin-top:12px;">
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#36855c,#2c6f4d);"><span class="badge b-new">New</span></div>
<div class="info"><p class="t">The Paper Fox</p><p class="a">R. Halden</p><p class="p">$14.99</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#ff7734,#e0632a);"></div>
<div class="info"><p class="t">Moonlit Meadow</p><p class="a">T. Okafor</p><p class="p">$12.99</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#73859f,#4e5a6e);"><span class="badge b-sale">Sale</span></div>
<div class="info"><p class="t">Grandma's Garden</p><p class="a">L. Wren</p><p class="p">$9.99</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#d7f5e6,#a3d4b8);"></div>
<div class="info"><p class="t">The Whisper Wood</p><p class="a">A. Marsh</p><p class="p">$13.50</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#919191,#5c5c5c);"></div>
<div class="info"><p class="t">Sailing to Somewhere</p><p class="a">D. Reyes</p><p class="p">$11.00</p></div></div>
</div>
<footer><span>© Fairytales Bookstore — A neighborhood bookstore</span><span>Story Time · Events · Contact</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1e1f26;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1e1f26;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #1e1f26; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #003388; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #003388;
border: 1px solid #003388; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #444444;
border: 1px solid #c7c7c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff9900; color: #1e1f26;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Arial,Helvetica,sans-serif; background:#ffffff; color:#1e1f26; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e5e5e5;}
.logo{font-size:22px;font-weight:700;color:#003388;letter-spacing:-0.5px;}
.navlinks{display:flex;gap:26px;}
.navlinks span{font-size:15px;font-weight:600;color:#444444;}
.navlinks span.active{color:#003388;border-bottom:3px solid #003388;padding-bottom:22px;}
.search{width:180px;height:36px;border-radius:9999px;background:#eeeeee;border:1px solid #e5e5e5;font-size:12px;color:#949494;display:flex;align-items:center;padding:0 14px;}
.hero{height:230px;background:#003388;display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;}
.hero:after{content:'';position:absolute;right:60px;top:30px;width:150px;height:170px;border-radius:16px;background:linear-gradient(160deg,#ff9900,#e94c89 70%);box-shadow:0 10px 26px rgba(0,0,0,.25);}
.hero:before{content:'';position:absolute;right:100px;top:60px;width:70px;height:70px;border-radius:50%;background:#fff;opacity:.9;}
.herotext{width:440px;color:#fff;}
.herotext h1{font-size:30px;font-weight:700;letter-spacing:-0.5px;margin:0 0 12px;line-height:1.2;}
.herotext p{font-size:15px;color:#dbe6ff;margin:0 0 18px;max-width:340px;}
.hbtn{display:inline-block;background:#ff9900;color:#1e1f26;font-size:15px;font-weight:600;padding:11px 26px;border-radius:8px;}
.sec{padding:22px 40px 0;}
.sectitle{font-size:20px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:190px;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);overflow:hidden;}
.cimg{height:118px;border-radius:12px 12px 0 0;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#ff9900;color:#1e1f26;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.badge.new{background:#0757fe;color:#fff;}
.cbody{padding:12px 12px 14px;}
.ctitle{font-size:14px;font-weight:600;}
.cage{display:inline-block;background:#eeeeee;color:#949494;font-size:11px;border-radius:9999px;padding:2px 10px;margin-top:6px;}
.cprice{font-size:15px;color:#444444;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:46px;background:#003388;color:#dbe6ff;font-size:12px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Nosy Crow</div>
<div class="navlinks"><span class="active">Picture Books</span><span>Fiction</span><span>Activity</span><span>Authors</span></div>
<div class="search">Search by age or title...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Stories built to be read<br>out loud, again and again.</h1>
<p>Picture books, fiction and activity titles for curious readers aged 0 to 12.</p>
<div class="hbtn">Browse New Releases</div>
</div>
</div>
<div class="sec">
<div class="sectitle">This Month's Picks</div>
<div class="grid">
<div class="card"><div class="cimg" style="background:linear-gradient(160deg,#ff9900,#e94c89)"><div class="badge new">New</div></div><div class="cbody"><div class="ctitle">The Lantern Under the Stairs</div><div class="cage">3-5 years</div><div class="cprice">£7.99</div></div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(160deg,#00d084,#003388)"></div><div class="cbody"><div class="ctitle">Marigold and the Moon Boat</div><div class="cage">5-7 years</div><div class="cprice">£6.99</div></div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(160deg,#0757fe,#0693e3)"><div class="badge">Sale</div></div><div class="cbody"><div class="ctitle">Ten Tiny Explorers</div><div class="cage">2-4 years</div><div class="cprice">£5.49</div></div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(160deg,#e94c89,#ff9900)"></div><div class="cbody"><div class="ctitle">The Reluctant Dragon's Diary</div><div class="cage">7-9 years</div><div class="cprice">£8.99</div></div></div>
</div>
</div>
<div class="footer"><span>Every story vetted by a children's editor first</span><span>Age Guide · Newsletter</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.33; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.625; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#313131; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e5e5e5;}
.logo{font-size:19px;font-weight:500;letter-spacing:.5px;color:#1a1a1a;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;letter-spacing:.3px;text-transform:uppercase;color:#1a1a1a;}
.hero{background:#f7f7f7;padding:36px 34px;text-align:center;}
.hero h1{font-size:32px;font-weight:300;color:#1a1a1a;margin:0 0 10px;}
.hero p{font-size:15px;color:#6b6b6b;margin:0 0 18px;}
.cta{display:inline-block;background:#313131;color:#fff;font-size:14px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;padding:12px 28px;border-radius:8px;}
.grid{display:flex;gap:14px;padding:20px 34px 0;}
.card{width:200px;background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden;position:relative;}
.thumb{height:130px;border-radius:12px 12px 0 0;}
.badge{position:absolute;top:8px;left:8px;background:#313131;color:#fff;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;border-radius:9999px;}
.ptitle{font-size:15px;font-weight:500;color:#1a1a1a;padding:12px 14px 2px;}
.pprice{font-size:15px;color:#1a1a1a;padding:0 14px 14px;}
.ingredients{display:flex;gap:8px;padding:16px 34px 0;}
.ing{background:#f7f7f7;border-radius:9999px;font-size:11px;color:#1a1a1a;padding:5px 12px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:46px;background:#313131;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Sturmglow DR Barbara Sturm</div>
<div class="navlinks"><span>Skincare</span><span>Body</span><span>Sets</span><span>The Science</span></div>
</div>
<div class="hero">
<h1>Precision skincare, quietly confident.</h1>
<p>Molecular Cosmetics formulated with the restraint of a dermatologist's office, not a beauty counter.</p>
<div class="cta">Shop Bestsellers</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#c4a882,#313131)"></div><span class="badge">New</span><div class="ptitle">Hyaluronic Serum</div><div class="pprice">$135.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#313131,#c4a882)"></div><div class="ptitle">Anti-Pollution Drops</div><div class="pprice">$98.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#9e9e9e,#c4a882)"></div><div class="ptitle">Calming Cream</div><div class="pprice">$115.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#c4a882,#6b6b6b)"></div><div class="ptitle">Enzyme Cleanser</div><div class="pprice">$62.00</div></div>
</div>
<div class="ingredients">
<div class="ing">Hyaluronic Acid</div><div class="ing">Purslane Extract</div><div class="ing">Vitamin C</div>
</div>
<div class="footer"><span>© SturmGlow — Dr. Barbara Sturm</span><span>Ingredients Clinical Studies</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff0600; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff0600; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c1c1c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff0600; color: #1c1c1c;
border: 1px solid #1c1c1c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff0600; color: #f5f5f5;
border: 1px solid #fd2c27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #db0a04; color: #1c1c1c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c1c1c; box-sizing:border-box;
font-family:"Pretendard", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 44px;
border-bottom:1px solid #dddddd; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#212121; }
.navlinks span:first-child { color:#ff0600; }
.cta { background:transparent; color:#ff0600; border:1px solid #ff0600; border-radius:4px;
padding:8px 22px; font-weight:400; font-size:14px; }
.hero { padding:56px 44px 30px; text-align:left; }
.hero h1 { font-size:44px; font-weight:700; line-height:1.34; margin:0 0 16px; max-width:560px; }
.hero p { font-size:16px; color:#3b3b3b; line-height:1.6; max-width:480px; margin:0 0 24px; }
.band { background:#f9f9f9; padding:26px 44px; display:flex; gap:36px; align-items:center; border-top:1px solid #dddddd; }
.stat { }
.stat b { display:block; font-size:23px; font-weight:700; margin-bottom:2px; }
.stat span { font-size:13px; color:#808080; }
.section { padding:26px 44px 0; }
.section h2 { font-size:23px; font-weight:700; margin:0 0 18px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.panel { background:#ffffff; border:1px solid #dddddd; border-radius:8px; padding:18px; }
.panel .tag { font-size:12px; color:#999999; margin-bottom:8px; display:block; }
.panel h3 { font-size:15px; font-weight:700; margin:0 0 6px; }
.panel p { font-size:13px; color:#3b3b3b; line-height:1.5; margin:0; }
em.mark { color:#ff0600; font-style:normal; }
</style></head>
<body>
<nav>
<p class="brand">Sandoll</p>
<div class="navlinks"><span>Inquiries</span><span>Story</span><span>Research</span><span>Partners</span></div>
<button class="cta">Production Inquiry</button>
</nav>
<section class="hero">
<h1>Where letters become <em class="mark">voice</em></h1>
<p>A type foundry drawing Hangul letterforms since 1984. The typeface is the brand.</p>
</section>
<div class="band">
<div class="stat"><b>40 years</b><span>of typography research</span></div>
<div class="stat"><b>SDGretaSans</b><span>our own typeface</span></div>
<div class="stat"><b><em class="mark">Red</em></b><span>the single brand accent</span></div>
</div>
<section class="section">
<h2>Services</h2>
<div class="grid">
<div class="panel"><span class="tag">Type Branding</span><h3>Custom Corporate Type</h3><p>Bespoke typeface design for a company's identity.</p></div>
<div class="panel"><span class="tag">Sandoll Cloud</span><h3>A Font Platform for Everyone</h3><p>The best font subscription service for every creator.</p></div>
<div class="panel"><span class="tag">Research</span><h3>Hangul Form Studies</h3><p>A lab exploring legibility and typographic rhythm.</p></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f4; color: #414040;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f4; color: #414040;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.27; margin: 0; color: #414040; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #949492; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.23; letter-spacing: 1.5px; background: #7bc7c7; color: #000000;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.23; letter-spacing: 1.5px; background: transparent; color: #414040;
border: 1px solid #7bc7c7; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #414040;
border: 1px solid #cac9c7; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949492; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.27; letter-spacing: 2px; background: #7bc7c7; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f4; color:#414040; box-sizing:border-box;
font-family:'Neue Haas Unica Pro','Lato',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#f7f7f4; border-bottom:1px solid #e0e0dd; }
.brand { font-family:'ABC Arizona Flare',Georgia,serif; font-size:20px; font-weight:300; margin:0; }
.navlinks { display:flex; gap:22px; font-family:'Montserrat','Lato',sans-serif; font-size:12px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:#414040; }
.util { font-size:13px; color:#545453; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 72px); }
.stage { padding:26px; display:flex; flex-direction:column; gap:12px; background:#fffaf0; }
.crumb { font-size:11px; color:#949492; }
.pan { flex:1; border-radius:8px; background:#ffffff; position:relative; overflow:hidden; }
.pan::before { content:''; position:absolute; left:50%; top:60%; width:230px; height:100px; transform:translate(-50%,-50%); border-radius:8px 8px 24px 24px;
background:linear-gradient(160deg,#e8e8e5,#b6b6b3 60%); box-shadow:0 18px 30px rgba(0,0,0,0.14); }
.pan::after { content:''; position:absolute; left:50%; top:30%; width:120px; height:50px; transform:translate(-50%,0); border-radius:8px; background:#7bc7c7; opacity:0.8; }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; border-radius:8px; background:#ffffff; }
.info { padding:24px 34px; display:flex; flex-direction:column; gap:11px; overflow:hidden; }
.cat { font-family:'Montserrat','Lato',sans-serif; font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#7bc7c7; }
h1 { font-family:'ABC Arizona Flare',Georgia,serif; margin:0; font-size:36px; font-weight:300; line-height:1.14; letter-spacing:-0.3px; }
.rating { display:flex; align-items:center; gap:8px; font-size:13px; color:#949492; }
.stars { color:#7bc7c7; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; }
.desc { font-size:16px; color:#545453; line-height:1.6; }
.swatches { display:flex; gap:10px; align-items:center; }
.swatch { width:36px; height:36px; border-radius:50%; border:2px solid #cececa; }
.swatch.on { border:2px solid #7bc7c7; }
.sw1{background:#414040;} .sw2{background:#b6b6b3;} .sw3{background:#7bc7c7;}
.cta-row { display:flex; gap:10px; margin-top:auto; font-family:'Montserrat','Lato',sans-serif; }
.btn-primary { flex:1; background:#7bc7c7; color:#fff; border:none; height:48px; font-size:13px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; border-radius:4px; }
.btn-secondary { width:170px; background:transparent; border:1px solid #414040; color:#414040; height:48px; font-size:13px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; border-radius:4px; }
</style></head>
<body>
<nav>
<p class="brand">Brown Jordan</p>
<div class="navlinks"><span>Lounge</span><span>Dining</span><span>Fire Pits</span><span>Trade</span></div>
<div class="util">Search Trade Login Cart (1)</div>
</nav>
<main>
<div class="stage">
<div class="crumb">Brown Jordan / Lounge / Kannoa</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Kannoa Collection</span>
<h1>Kannoa Lounge Chair</h1>
<div class="rating"><span class="stars">★★★★☆</span> 4.5 · 62 reviews</div>
<div class="price-row"><span class="price">$2,180</span></div>
<p class="desc">Cast aluminum frame with hand-woven all-weather resin, designed for coastal terraces and hotel poolside settings.</p>
<div class="swatches">
<span class="swatch sw1 on"></span><span class="swatch sw2"></span><span class="swatch sw3"></span>
</div>
<div class="cta-row">
<button class="btn-primary">Configure</button>
<button class="btn-secondary">View Collection</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0f0f0; color: #232323;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0f0f0; color: #232323;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.4; margin: 0; color: #232323; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #979797; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; background: #0066c8; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; background: #ffffff; color: #0066c8;
border: 1px solid #0066c8; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #232323;
border: 1px solid #bdbdbd; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #979797; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ea345d; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Hobby Link Japan Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Montserrat-Regular','Helvetica Neue',Arial,sans-serif; background:#f0f0f0; color:#4d4d4d; }
*{box-sizing:border-box;}
.util{height:32px;background:#232323;color:#c5c5c5;font-size:11px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;}
.util .cart{color:#ea345d;font-weight:700;}
.mainnav{height:44px;background:#0066c8;color:#fff;display:flex;align-items:center;padding:0 20px;gap:20px;}
.logo{font-weight:700;font-size:18px;letter-spacing:.2px;}
.navlinks{display:flex;gap:16px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;}
.searchrow{margin:12px 20px;}
.search{background:#fff;border:1px solid #d2d2d2;border-radius:999px;height:36px;width:340px;font-size:12px;color:#232323;padding:0 16px;line-height:36px;}
.section{padding:6px 20px;}
.chiprow{display:flex;gap:8px;margin-bottom:10px;}
.chip{background:#eeeeee;color:#4d4d4d;font-size:11px;font-weight:600;padding:6px 14px;border-radius:999px;}
.chip.active{background:#0066c8;color:#fff;}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.card{background:#fff;border-radius:4px;padding:8px;position:relative;}
.imgbox{aspect-ratio:1/1;height:80px;background:#f0f0f0;border-radius:4px;margin-bottom:6px;display:flex;align-items:center;justify-content:center;color:#979797;font-size:9px;text-align:center;}
.badge{position:absolute;top:6px;left:6px;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;color:#fff;}
.badge.sale{background:#ea345d;}
.badge.pre{background:#4d07e6;}
.badge.stock{background:#6cc6c4;}
.ptitle{font-size:11px;font-weight:600;color:#232323;line-height:1.3;margin-bottom:4px;height:28px;overflow:hidden;}
.price{font-size:13px;font-weight:700;color:#232323;}
.priceold{font-size:10px;color:#ea345d;font-weight:700;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#2b2b2b;color:#c5c5c5;padding:10px 20px;display:flex;justify-content:space-between;font-size:10px;}
.footer a{color:#dad55e;}
</style>
<div class="util"><span>Account · Wishlist · Currency: USD</span><span class="cart">Cart (2)</span></div>
<div class="mainnav">
<div class="logo">Hobby Link Japan</div>
<div class="navlinks"><span>Plastic Models</span><span>Action Figures</span><span>Diecast</span><span>Tools</span><span>Pre-Order</span></div>
</div>
<div class="searchrow"><div class="search">Search Gundam, figures, scale…</div></div>
<div class="section">
<div class="chiprow"><div class="chip active">All</div><div class="chip">Gundam</div><div class="chip">Military</div><div class="chip">1/24 Scale</div><div class="chip">Figures</div></div>
<div class="grid">
<div class="card"><div class="badge pre">Preorder</div><div class="imgbox">RG Freedom</div><div class="ptitle">RG 1/144 Freedom Gundam</div><div class="price">$34.99</div></div>
<div class="card"><div class="badge sale">Sale</div><div class="imgbox">MG Nu</div><div class="ptitle">MG 1/100 Nu Gundam Ver.Ka</div><div class="price">$58.00</div><div class="priceold">was $72.00</div></div>
<div class="card"><div class="badge stock">In Stock</div><div class="imgbox">Type 90</div><div class="ptitle">1/35 Type 90 Tank Kit</div><div class="price">$41.50</div></div>
<div class="card"><div class="imgbox">Figma #521</div><div class="ptitle">figma Rider Action Figure</div><div class="price">$62.00</div></div>
<div class="card"><div class="imgbox">R/C Supra</div><div class="ptitle">1/24 R/C Supra Model</div><div class="price">$89.00</div></div>
</div>
</div>
<div class="footer"><span>© Hobby Link Japan</span><span><a>Help</a> · <a>Company Info</a> · <a>Community</a> · <a>Follow Us</a></span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #222299; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #eeeeee; color: #111111;
border: 1px solid #222299; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #eeeeee; color: #222222;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.1; letter-spacing: 0.5px; background: #222299; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#eeeeee; font-family:Arial,'Helvetica Neue',sans-serif; color:#222222; }
*{box-sizing:border-box;}
.nav{height:58px;background:#222299;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:19px;font-weight:900;letter-spacing:-.5px;color:#fff;text-transform:uppercase;}
.navlinks{display:flex;gap:16px;font-size:12px;font-weight:700;color:#fff;}
.filterbar{height:36px;background:#223355;display:flex;align-items:center;gap:14px;padding:0 30px;font-size:11px;font-weight:700;color:#cfd6e6;text-transform:uppercase;letter-spacing:.4px;}
.filterbar .active{color:#fff;border-bottom:2px solid #fff;}
.hero{height:150px;display:flex;align-items:center;padding:0 30px;background:#111111;}
h1{font-size:24px;font-weight:900;color:#fff;margin:0 0 6px;letter-spacing:-.5px;}
.sub{font-size:13px;color:#aaaaaa;margin:0;}
.section{padding:16px 30px 0;}
.sectitle{font-size:15px;font-weight:900;color:#111111;margin-bottom:10px;text-transform:uppercase;}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.card{background:#fff;border:1px solid #cccccc;padding:6px;position:relative;}
.badge{position:absolute;top:4px;left:4px;font-size:8px;font-weight:700;padding:2px 5px;color:#fff;text-transform:uppercase;}
.badge.vinyl{background:#222299;}
.badge.cd{background:#223355;}
.thumb{height:80px;margin-bottom:6px;}
.ptitle{font-size:10px;font-weight:700;color:#111111;line-height:1.25;height:24px;overflow:hidden;}
.pmeta{font-size:9px;color:#555555;margin-top:3px;}
.pprice{font-size:11px;font-weight:700;color:#222299;margin-top:3px;}
</style>
<div class="nav">
<div class="logo">Zia Records</div>
<div class="navlinks"><div>New Arrivals</div><div>Vinyl</div><div>CD</div><div>Cassette</div><div>Blu-ray</div></div>
</div>
<div class="filterbar"><span class="active">All Formats</span><span>Rock</span><span>Jazz</span><span>Hip-Hop</span><span>Soundtrack</span></div>
<div class="hero">
<div>
<h1>Used, rare, and in stock.</h1>
<div class="sub">A well-organized archive of vinyl, CD, cassette, and Blu-ray — browsed, not scrolled.</div>
</div>
</div>
<div class="section">
<div class="sectitle">Just In</div>
<div class="grid">
<div class="card"><span class="badge vinyl">LP</span><div class="thumb" style="background:linear-gradient(150deg,#222299,#111)"></div><div class="ptitle">Sessions in Blue</div><div class="pmeta">Rock · Used</div><div class="pprice">$18.99</div></div>
<div class="card"><span class="badge cd">CD</span><div class="thumb" style="background:linear-gradient(150deg,#223355,#111)"></div><div class="ptitle">Late Night Standards</div><div class="pmeta">Jazz · New</div><div class="pprice">$11.99</div></div>
<div class="card"><span class="badge vinyl">LP</span><div class="thumb" style="background:linear-gradient(150deg,#cc3333,#111)"></div><div class="ptitle">Corner Booth Sessions</div><div class="pmeta">Hip-Hop · Used</div><div class="pprice">$22.99</div></div>
<div class="card"><span class="badge cd">CD</span><div class="thumb" style="background:linear-gradient(150deg,#555555,#111)"></div><div class="ptitle">Original Score, Vol. 2</div><div class="pmeta">Soundtrack · New</div><div class="pprice">$14.99</div></div>
<div class="card"><span class="badge" style="background:#555555">TAPE</span><div class="thumb" style="background:linear-gradient(150deg,#222299,#223355)"></div><div class="ptitle">Basement Demos</div><div class="pmeta">Rock · Used</div><div class="pprice">$9.99</div></div>
<div class="card"><span class="badge" style="background:#111111">BLU</span><div class="thumb" style="background:linear-gradient(150deg,#111,#223355)"></div><div class="ptitle">Concert Film: Live at Dusk</div><div class="pmeta">Blu-ray · New</div><div class="pprice">$19.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 24px; letter-spacing: -0.28px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12.73px; font-weight: 700; line-height: 28px; letter-spacing: 0.108px; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 20px; letter-spacing: 0.3px; background: #000000; color: #ffffff;
border: none; border-radius: 0px; padding: {spacing.md} {spacing.xl};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 20px; letter-spacing: 0.3px; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 0px;
padding: {spacing.md} {spacing.xl}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dbdbdb; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:Georgia,"Times New Roman",Times,serif; }
* { box-sizing:border-box; }
.sans { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #000000; }
.wordmark { font-size:24px; font-weight:700; letter-spacing:-.5px; text-transform:uppercase; font-stretch:condensed; }
.navlinks { display:flex; gap:20px; }
.navlinks span { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:#000000; }
.sub-navlinks { font-family:-apple-system,Arial,sans-serif; }
.masthead { text-align:center; padding:22px 60px 18px; border-bottom:1px solid #e0e0e0; }
.rubric { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#057dbc; margin-bottom:10px; }
.masthead h1 { font-size:52px; font-weight:700; line-height:1.0; letter-spacing:-1px; margin:0 0 12px; }
.byline { font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#757575; }
.mag { display:flex; gap:30px; padding:22px 32px 0; }
.maincol { flex:1.5; }
.maincol p { font-size:14px; line-height:1.6; color:#1a1a1a; margin:0 0 12px; }
.dropcap { font-size:44px; float:left; line-height:.8; padding:4px 6px 0 0; font-weight:700; }
.side { flex:1; border-left:1px solid #e0e0e0; padding-left:22px; }
.side .lbl { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#757575; margin-bottom:12px; }
.row { display:flex; gap:12px; padding:12px 0; border-top:1px solid #e0e0e0; }
.row:first-of-type { border-top:none; padding-top:0; }
.thumb { width:58px; height:58px; border-radius:2px; flex-shrink:0; }
.th1 { background:#e0e0e0; } .th2 { background:#d4d4d4; } .th3 { background:#c9c9c9; }
.row h4 { font-size:14px; font-weight:700; margin:0 0 4px; line-height:1.2; }
.row .meta { font-size:10px; color:#757575; text-transform:uppercase; letter-spacing:.03em; }
</style></head>
<body>
<nav>
<div class="wordmark">WIRED</div>
<div class="navlinks sub-navlinks"><span>Business</span><span>Security</span><span>Culture</span><span>Science</span></div>
</nav>
<div class="masthead">
<div class="rubric sub-navlinks">Backchannel</div>
<h1>The Quiet Race to Build a Machine That Understands You</h1>
<div class="byline sub-navlinks">By a Senior Writer · 12 Min Read</div>
</div>
<div class="mag">
<div class="maincol">
<p><span class="dropcap">I</span>n a nondescript office park, a small team is quietly rebuilding the interface between people and machines — not with screens, but with something closer to attention. The prototype has no keyboard.</p>
<p>What began as a research curiosity has become the center of a very serious, very well-funded argument about what comes after the smartphone.</p>
</div>
<div class="side">
<div class="lbl sub-navlinks">More from this issue</div>
<div class="row"><div class="thumb th1"></div><div><h4>Inside the Chip That Runs on Light</h4><div class="meta sub-navlinks">Gear · 6 min</div></div></div>
<div class="row"><div class="thumb th2"></div><div><h4>The Last Undersea Cable Map</h4><div class="meta sub-navlinks">Science · 9 min</div></div></div>
<div class="row"><div class="thumb th3"></div><div><h4>Who Owns Your Face Now?</h4><div class="meta sub-navlinks">Security · 8 min</div></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #f9fafb; color: #121212;
border: 1px solid #108474; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #f9fafb; color: #121212;
border: 1px solid #bfc0c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.2px; background: #d8e9e8; color: #108474;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:'Nunito Sans','Fira Sans',Arial,sans-serif; color:#555555; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:56px;background:#108474;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:18px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;letter-spacing:0.1px;text-transform:uppercase;color:#fff;}
.hero{height:220px;display:flex;align-items:center;padding:0 32px;gap:30px;}
.herotxt{max-width:400px;}
.h1{font-size:30px;font-weight:700;letter-spacing:-0.4px;margin:0 0 10px;color:#121212;}
.sub{font-size:16px;line-height:1.5;margin:0 0 18px;color:#555;}
.btn{display:inline-block;background:#108474;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;border-radius:8px;}
.diceimg{width:170px;height:170px;position:relative;}
.diceimg .d1{position:absolute;top:10px;left:20px;width:70px;height:70px;border-radius:8px;background:linear-gradient(135deg,#3968d9,#2f3590);transform:rotate(-8deg);}
.diceimg .d2{position:absolute;top:50px;left:80px;width:60px;height:60px;border-radius:8px;background:linear-gradient(135deg,#b2920d,#fb8077);transform:rotate(10deg);}
.grid{display:flex;gap:14px;padding:20px 32px 0;}
.card{width:210px;background:#fff;border-radius:12px;padding:14px;}
.thumb{height:120px;border-radius:8px;background:linear-gradient(135deg,#108474,#2f3590);position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#108474;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.2px;padding:2px 8px;border-radius:4px;}
.ctitle{font-size:16px;font-weight:600;margin:10px 0 2px;color:#121212;}
.cprice{font-size:16px;color:#121212;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#f3f3f3;font-size:11px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Modiphius</div>
<div class="navlinks"><span>Core Rulebooks</span><span>Miniatures</span><span>Dice</span><span>New Releases</span></div>
</div>
<div class="hero">
<div class="herotxt">
<div class="h1">Dungeon-crypt, board-game felt.</div>
<p class="sub">Tabletop RPGs and miniatures for tables that go deep into the lore.</p>
<div class="btn">Shop Rulebooks</div>
</div>
<div class="diceimg"><div class="d1"></div><div class="d2"></div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge">Pre-order</span></div><div class="ctitle">Fallout Core Rulebook</div><div class="cprice">$49.99</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Dune Miniatures Set</div><div class="cprice">$64.99</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Star Trek Adventures Dice</div><div class="cprice">$19.99</div></div>
</div>
<div class="footer"><span>Officially licensed tabletop worlds</span><span>© Modiphius</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf9f7; color: #1a1918;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf9f7; color: #1a1918;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #1a1918; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.57; margin: 0; color: #7a7570; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.0; letter-spacing: 0.1em; background: #b8935a; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.0; letter-spacing: 0.1em; background: transparent; color: #1a1918;
border: 1px solid #b8935a; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.6; background: #faf9f7; color: #1a1918;
border: 1px solid #e8e4de; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7570; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #f1ebe1; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Dyne Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:'DM Sans','Inter',-apple-system,sans-serif;
background:#faf9f7; color:#1a1918;
}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e8e4de;}
.logo{font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-size:22px;font-weight:400;letter-spacing:0.5px;}
.navlinks{display:flex;gap:24px;font-size:13px;letter-spacing:0.08em;color:#1a1918;}
.consultbtn{border:1px solid #1a1918;padding:8px 18px;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;}
.hero{text-align:center;padding:40px 40px 30px;}
.hero h1{font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-size:48px;font-weight:300;letter-spacing:-0.5px;line-height:1.15;margin:0 0 18px;}
.herobtns{display:flex;justify-content:center;gap:12px;}
.btn-black{background:#1a1918;color:#faf9f7;font-size:13px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;padding:14px 32px;}
.btn-outline{border:1px solid #1a1918;color:#1a1918;font-size:13px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;padding:13px 31px;}
.stones{display:flex;justify-content:center;gap:8px;padding:20px 40px 0;}
.stonepill{background:#f5f2ee;border-radius:9999px;padding:6px 14px;font-size:11px;letter-spacing:0.05em;color:#7a7570;}
.stonepill.active{background:#b8935a;color:#fff;}
.grid{display:flex;gap:20px;padding:20px 40px 0;}
.card{flex:1;}
.card-img{aspect-ratio:4/5;background:#fff;position:relative;}
.card-img.c1{background:linear-gradient(160deg,#f0e6d3,#b8935a);}
.card-img.c2{background:linear-gradient(160deg,#e8dfd4,#d4a96a);}
.card-img.c3{background:linear-gradient(160deg,#b8935a,#1a1918);}
.name{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:400;margin:10px 0 4px;text-align:center;}
.price{font-family:'Cormorant Garamond',serif;font-size:16px;text-align:center;color:#3d3a36;}
</style>
<nav class="nav">
<div class="logo">Dyne</div>
<div class="navlinks">
<span>Engagement</span><span>Wedding Bands</span><span>Gemstones</span><span>Education</span>
</div>
<div class="consultbtn">Book a Consultation</div>
</nav>
<div class="hero">
<h1>Fewer stones.<br>Cleaner settings.</h1>
<div class="herobtns">
<div class="btn-black">Book a Consultation</div>
<div class="btn-outline">Browse Rings</div>
</div>
</div>
<div class="stones">
<div class="stonepill active">Round</div>
<div class="stonepill">Oval</div>
<div class="stonepill">Emerald</div>
<div class="stonepill">Pear</div>
<div class="stonepill">Cushion</div>
</div>
<div class="grid">
<div class="card"><div class="card-img c1"></div><div class="name">The Meridian</div><div class="price">from $2,400</div></div>
<div class="card"><div class="card-img c2"></div><div class="name">The Halden</div><div class="price">from $3,100</div></div>
<div class="card"><div class="card-img c3"></div><div class="name">The Corva</div><div class="price">from $2,850</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #171717; color: #eeeeee;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #171717; color: #eeeeee;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; color: #eeeeee; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #cdf564; color: #121212;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: 1px solid #108474; border-radius: 4px;
padding: 14px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #121212; color: #eeeeee;
border: 1px solid #4d4d4d; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #108474; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#171717; font-family:'Nunito Sans','Helvetica Neue',Arial,sans-serif; color:#eeeeee; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #555555;}
.logo{font-size:19px;font-weight:800;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;}
.hero{height:230px;display:flex;align-items:center;padding:0 32px;gap:26px;background:radial-gradient(ellipse at 65% 50%,#1a1a1a 0%,#121212 100%);}
.herotext{width:44%;}
.herotext h1{font-size:38px;font-weight:800;margin:0 0 10px;line-height:1.15;letter-spacing:-.5px;}
.herotext p{font-size:14px;color:#bbbbbb;margin:0 0 16px;max-width:300px;}
.cta{display:inline-block;background:#cdf564;color:#121212;font-size:15px;font-weight:700;letter-spacing:.3px;padding:14px 28px;border-radius:4px;}
.tabart{flex:1;height:150px;display:flex;align-items:center;justify-content:center;}
.tablet{width:220px;height:140px;background:#2b2b2b;border-radius:12px;border:2px solid #108474;}
.pillrow{display:flex;gap:8px;padding:14px 32px 0;}
.pill{border-radius:9999px;border:1px solid #555555;font-size:13px;font-weight:600;padding:6px 14px;}
.pill.active{background:#121212;border-color:#cdf564;}
.grid{display:flex;gap:14px;padding:14px 32px 0;}
.card{width:206px;background:#f9f9f9;border:1px solid #dedede;border-radius:8px;padding:0;}
.thumb{aspect-ratio:1/1;height:120px;background:#e9e9e9;border-radius:8px 8px 0 0;position:relative;}
.badge{position:absolute;top:8px;left:8px;color:#121212;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-radius:9999px;padding:3px 10px;}
.cardbody{padding:12px;}
.ptitle{font-size:16px;font-weight:700;color:#171717;}
.pprice{font-size:20px;font-weight:800;color:#171717;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#171717;border-top:1px solid #555555;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#bbbbbb;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Veikk</div>
<div class="navlinks"><div>Pen Displays</div><div>Pen Tablets</div><div>Accessories</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Draw at full pressure sensitivity.</h1>
<p>Digital tablets built for artists who need every stroke to land right.</p>
<div class="cta">Shop Pen Tablets</div>
</div>
<div class="tabart"><div class="tablet"></div></div>
</div>
<div class="pillrow">
<div class="pill active">Pen Displays</div>
<div class="pill">Pen Tablets</div>
<div class="pill">Accessories</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c5f7f0,#c1e6e6)"><div class="badge" style="background:#cdf564">New</div></div><div class="cardbody"><div class="ptitle">VK1200 Pen Display</div><div class="pprice">$399.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a89cc8,#c1e6e6)"><div class="badge" style="background:#fbcd0a">-20%</div></div><div class="cardbody"><div class="ptitle">A50 Pen Tablet</div><div class="pprice">$59.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c5f7f0,#a89cc8)"></div><div class="cardbody"><div class="ptitle">Replacement Nib Set</div><div class="pprice">$9.90</div></div></div>
</div>
<div class="footer"><span>© Digital Drawing Hardware</span><span>Driver Downloads · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #b8965a; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: transparent; color: #1a1a1a;
border: 1px solid #b8965a; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.33; letter-spacing: 0.2px; background: #1e2d3b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:flex; flex-direction:column; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0d0d0d; color:#333333; box-sizing:border-box;
font-family:'Montserrat','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 42px; }
.brand { font-size:18px; font-weight:700; color:#ffffff; letter-spacing:2px; text-transform:uppercase; }
.navlinks { display:flex; gap:28px; }
.navlinks span { font-size:11px; font-weight:600; color:#a0a0a0; text-transform:uppercase; letter-spacing:1px; }
.cart { border:1px solid #b8965a; color:#b8965a; font-size:11px; font-weight:600; padding:7px 16px; text-transform:uppercase; letter-spacing:0.5px; }
.hero { position:relative; height:270px; flex-shrink:0; background:linear-gradient(120deg,#1c1c1c,#0d0d0d 70%);
display:flex; align-items:center; padding:0 42px; }
.hero::after { content:''; position:absolute; right:60px; top:50%; transform:translateY(-50%); width:230px; height:190px;
background:linear-gradient(150deg,#b8965a,#3a2f1e 130%); }
.htext { max-width:400px; z-index:1; }
.htext .kicker { font-size:11px; font-weight:600; color:#b8965a; text-transform:uppercase; letter-spacing:2px; margin-bottom:12px; }
.htext h1 { font-size:32px; font-weight:700; color:#ffffff; margin:0 0 14px; line-height:1.15; letter-spacing:-0.3px; }
.htext p { font-size:14px; color:#a0a0a0; line-height:1.5; margin:0 0 18px; }
.btn { display:inline-block; background:#b8965a; color:#1a1a1a; font-size:12px; font-weight:700; padding:12px 26px;
text-transform:uppercase; letter-spacing:1px; }
.section { padding:22px 42px 0; background:#ffffff; flex:1; }
.section h2 { font-size:16px; font-weight:700; color:#1a1a1a; margin:0 0 14px; text-transform:uppercase; letter-spacing:1px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.card { border-right:1px solid #e8e8e8; padding:0 18px 0 0; }
.card:last-child { border-right:none; }
.cover { height:80px; margin-bottom:12px; position:relative; }
.swdot { position:absolute; bottom:8px; left:8px; width:16px; height:16px; border-radius:999px; border:2px solid #fff; background:#b8965a; }
.r1 .cover { background:#1a1a1a; } .r2 .cover { background:#8b2020; } .r3 .cover { background:#1e2d3b; } .r4 .cover { background:#f4f0e8; }
.card .t { font-size:13px; font-weight:600; color:#1a1a1a; margin:0 0 4px; }
.card .p { font-size:12px; color:#717171; }
.trust { margin-top:auto; flex-shrink:0; display:flex; padding:14px 42px; background:#f5f5f3; }
.trust span { flex:1; text-align:center; font-size:11px; font-weight:600; color:#1a1a1a; text-transform:uppercase; letter-spacing:0.5px; }
</style></head>
<body>
<nav>
<div class="brand">Hallman</div>
<div class="navlinks"><span>Ranges</span><span>Hoods</span><span>Finishes</span><span>Configurator</span></div>
<div class="cart">Build Your Range</div>
</nav>
<div class="hero">
<div class="htext">
<div class="kicker">Cast Iron. Brass Trim.</div>
<h1>Gold hardware, matte black steel.</h1>
<p>Professional ranges finished with antiqued brass — a showroom floor built for the color choice that defines your kitchen.</p>
<span class="btn">Configure Your Range</span>
</div>
</div>
<div class="section">
<h2>Range Finishes</h2>
<div class="grid">
<div class="card r1"><div class="cover"><div class="swdot"></div></div><div class="t">Matte Black, 48"</div><div class="p">from $6,499</div></div>
<div class="card r2"><div class="cover"><div class="swdot"></div></div><div class="t">Bordeaux Red, 36"</div><div class="p">from $5,299</div></div>
<div class="card r3"><div class="cover"><div class="swdot"></div></div><div class="t">Deep Navy, 36"</div><div class="p">from $5,299</div></div>
<div class="card r4"><div class="cover"><div class="swdot"></div></div><div class="t">Ivory, 30"</div><div class="p">from $4,899</div></div>
</div>
</div>
<div class="trust"><span>Cast-Iron Grates</span><span>Brass Hardware</span><span>5-Year Warranty</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #0051c3; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #ffffff; color: #0051c3;
border: 1px solid #0051c3; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #bd2426; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Roboto',Arial,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:20px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.25px;}
.navlinks .on{color:#0051c3;}
.search{background:#f5f5f5;border-radius:9999px;padding:12px 20px;font-size:13px;color:#6a6a6a;width:180px;}
.hero{height:270px;background:#0051c3;display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;}
.herotext{color:#fff;width:50%;}
.hero h1{font-size:32px;font-weight:700;margin:0 0 12px;line-height:1.25;}
.hero p{font-size:15px;margin:0 0 20px;opacity:0.9;max-width:320px;}
.cta{background:#fff;color:#0051c3;font-size:15px;font-weight:600;padding:12px 26px;border-radius:8px;width:fit-content;}
.phone{position:absolute;right:100px;top:30px;width:130px;height:220px;background:#9bca3e;border-radius:24px;box-shadow:0 8px 24px rgba(0,0,0,0.2);}
.phone::after{content:'';position:absolute;left:14px;top:20px;width:102px;height:150px;background:#bd2426;border-radius:12px;opacity:0.4;}
.chips{display:flex;gap:8px;padding:20px 40px 0;}
.chip{background:#f5f5f5;border-radius:9999px;padding:8px 16px;font-size:13px;font-weight:600;}
.chip.on{background:#0051c3;color:#fff;}
.grid{display:flex;gap:16px;padding:20px 40px;}
.card{width:200px;background:#fff;border-radius:12px;overflow:hidden;position:relative;}
.thumb{height:130px;border-radius:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#bd2426;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;border-radius:4px;padding:2px 8px;}
.badge.lime{background:#9bca3e;color:#313131;}
.pname{font-size:15px;font-weight:600;margin:8px 0 4px;}
.pprice{font-size:14px;color:#404040;}
</style>
<div class="nav">
<div class="logo">Richmond And Finch</div>
<div class="navlinks"><span class="on">Phone Cases</span><span>Accessories</span><span>New</span></div>
<div class="search">Search cases...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Protection with an attitude.</h1>
<p>Bold phone cases and accessories built for people who don't blend in.</p>
<div class="cta">Shop New Drops</div>
</div>
<div class="phone"></div>
</div>
<div class="chips">
<div class="chip on">All</div><div class="chip">iPhone</div><div class="chip">Samsung</div><div class="chip">MagSafe</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0051c3,#003681)"><div class="badge">Sale</div></div><div class="pname">Voltage Case</div><div class="pprice">$34.90</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#bd2426,#0051c3)"></div><div class="pname">Crimson Guard Case</div><div class="pprice">$39.90</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#9bca3e,#2f7bbf)"><div class="badge lime">In Stock</div></div><div class="pname">Lime Bolt MagSafe</div><div class="pprice">$44.90</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff485a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff485a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #141413; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff485a; color: #141413;
border: 1px solid #141413; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff485a; color: #f5f5f5;
border: 1px solid #fd6473; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d9404f; color: #141413;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#141413; box-sizing:border-box;
font-family:"Noto Sans TC","Microsoft JhengHei","PingFang TC",-apple-system,Helvetica,sans-serif; }
* { box-sizing:border-box; }
header { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #ddd9d8; }
.brand { font-weight:700; font-size:18px; color:#ff485a; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#535150; }
.cta { background:#ff485a; color:#ffffff; border-radius:8px; padding:8px 14px; font-size:13px; font-weight:500; }
.hero { text-align:center; padding:36px 40px 20px; }
.hero h1 { font-size:38px; font-weight:700; margin:0 0 10px; line-height:1.3; }
.hero .sub { font-size:15px; color:#535150; margin:0 0 18px; }
.outlinebtn { display:inline-block; background:#ffffff; color:#141413; border:4px solid #141413; border-radius:16px;
padding:13px 22px; font-size:16px; font-weight:500; }
.article { display:flex; gap:24px; margin:14px 60px 0; }
.col { flex:1; }
.col h2 { font-size:22px; margin:0 0 8px; }
.col p { font-size:14px; line-height:1.9; letter-spacing:0.5px; color:#535150; margin:0 0 10px; }
.col a { color:#00b3c6; }
.side { width:220px; display:flex; flex-direction:column; gap:12px; }
.badge { background:#f6f6f6; color:#7a7574; border-radius:14px; padding:2px 8px; font-size:12px; display:inline-block; width:fit-content; }
.card { border:1px solid #ddd9d8; border-radius:16px; padding:14px; }
.card h4 { font-size:13px; margin:0 0 4px; }
.card p { font-size:11px; color:#a29c9b; margin:0; }
.tags { display:flex; gap:8px; flex-wrap:wrap; }
.tags span { font-size:12px; color:#a29c9b; }
</style></head>
<body>
<header>
<span class="brand">Vocus</span>
<div class="navlinks"><span>Home</span><span>Articles</span><span>Community Lounge</span><span>For Business</span></div>
<span class="cta">Sign up / Log in</span>
</header>
<section class="hero">
<h1>Where the Sparks Begin</h1>
<div class="sub">Let creation be the origin of everything</div>
<span class="outlinebtn">Sign up now</span>
</section>
<section class="article">
<div class="col">
<span class="badge">Creation Partner</span>
<h2>Why I stopped renting an audience from a feed</h2>
<p>Every square is a small frame where a private thought becomes public writing. This week I moved my paid column here, and here is what changed for readers who stayed.</p>
<p>The reading rhythm matters more than I expected — <a href="#">line height and spacing</a> decide whether a long essay survives past the first paragraph.</p>
<div class="tags"><span>#writing</span><span>#independent-creators</span></div>
</div>
<div class="side">
<div class="card"><h4>Content & Data</h4><p>Track what your readers actually finish.</p></div>
<div class="card"><h4>Growth & Monetization</h4><p>Own your subscriber relationship end to end.</p></div>
<div class="card"><h4>Fan Community</h4><p>Reply, gather, and grow together.</p></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #212126; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #212126; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #969698; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #36363d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #212126; color: #ffffff;
border: 1px solid #36363d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #212126; color: #f5f5f5;
border: 1px solid #434347; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969698; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #24242a; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212126; box-sizing:border-box;
font-family:"Pretendard Variable", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #e5e7eb; }
.brand { font-size:19px; font-weight:700; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:36px; }
.navlinks span { font-size:16px; font-weight:500; color:#36363d; }
.navlinks span.on { color:#212126; }
.hero { position:relative; padding:56px 40px 40px; overflow:hidden; }
/* folded-paper 27-degree fold motif — flat panels, no shadow, achromatic */
.fold { position:absolute; width:340px; height:340px; right:20px; top:20px; }
.fold .p { position:absolute; background:#f8f8f8; border:1px solid #e5e7eb; }
.fold .p1 { width:220px; height:220px; top:20px; left:60px; transform:rotate(27deg); }
.fold .p2 { width:160px; height:160px; top:110px; left:0; background:#efefef; transform:rotate(-16deg); }
.fold .p3 { width:120px; height:120px; top:190px; left:170px; background:#ffffff; border:1px solid #212126; transform:rotate(9deg); }
.hero h1 { position:relative; font-size:40px; font-weight:700; line-height:1.25; margin:0 0 14px; max-width:440px; }
.hero p { position:relative; font-size:16px; color:#57575b; line-height:1.5; max-width:420px; margin:0 0 20px; }
.tag { position:relative; display:inline-block; font-size:14px; font-weight:500; color:#62626a;
background:#f8f8f8; border-radius:50px; padding:4px 14px 4px 14px; }
.body { position:absolute; top:340px; left:0; right:0; bottom:0; padding:0 40px; border-top:1px solid #e5e7eb; }
.colgrid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; height:100%; }
.col { padding:22px 20px 0 0; border-right:1px solid #e5e7eb; }
.col:last-child { border-right:none; }
.col h3 { font-size:20px; font-weight:700; margin:0 0 10px; }
.col ul { list-style:none; margin:0; padding:0; }
.col li { font-size:16px; color:#36363d; padding:7px 0; }
.col li.muted { color:#57575b; }
</style></head>
<body>
<nav>
<span class="brand">NHN</span>
<div class="navlinks"><span class="on">Company</span><span>Services</span><span>IR</span><span>Careers</span></div>
</nav>
<div class="hero">
<div class="fold"><span class="p p1"></span><span class="p p2"></span><span class="p p3"></span></div>
<span class="tag">Weaving New Play</span>
<h1>Connection, woven<br>in every direction.</h1>
<p>From games to payments and technology, NHN weaves diverse businesses into one platform.</p>
</div>
<div class="body">
<div class="colgrid">
<div class="col">
<h3>Services</h3>
<ul><li>Games</li><li>Payments</li><li>Commerce</li><li class="muted">Content</li></ul>
</div>
<div class="col">
<h3>Technology</h3>
<ul><li>Cloud Infrastructure</li><li>Data Platform</li><li class="muted">AI Research</li></ul>
</div>
<div class="col">
<h3>Investor Relations</h3>
<ul><li>Consolidated Financials</li><li>Disclosures</li><li class="muted">Governance</li></ul>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f3ee; color: #25282a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f3ee; color: #25282a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #25282a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6e797c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #8baa99; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #f6f3ee; color: #25282a;
border: 1px solid #8baa99; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #25282a;
border: 1px solid #c2c0bd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e797c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #a32138; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f3ee; font-family:'Gotham','Helvetica Neue',Arial,sans-serif; color:#25282a; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#25282a;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;}
.navlinks .active{color:#8baa99;}
.navlinks .inact{color:#6e797c;}
.hero{background:#ece8e3;padding:26px 40px;display:flex;align-items:center;justify-content:space-between;border-radius:0 0 20px 20px;}
.herotext h1{font-size:30px;font-weight:600;margin:0 0 10px;max-width:420px;line-height:1.25;}
.herotext p{font-size:14px;color:#505759;margin:0 0 16px;max-width:380px;}
.btn{display:inline-block;background:#8baa99;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;padding:12px 26px;border-radius:8px;}
.herovis{width:170px;height:120px;background:linear-gradient(160deg,#a7bdb1,#7dc4bc);border-radius:20px;}
.sec{padding:20px 40px 0;}
.sectitle{font-size:18px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:18px;}
.card{width:190px;background:#fff;border-radius:20px;padding:14px;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#a32138;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:4px 8px;border-radius:4px;}
.badge.eco{background:#8baa99;border-radius:9999px;padding:4px 12px;}
.thumb{aspect-ratio:1/1;border-radius:20px;margin-bottom:10px;}
.ptitle{font-size:16px;font-weight:600;margin:0 0 4px;}
.pprice{font-size:16px;font-weight:500;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#25282a;color:#979797;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kit And Kin</div>
<div class="navlinks"><div class="active">Shop</div><div class="inact">Sleep</div><div class="inact">Bath</div><div class="inact">Learn</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Trustworthy modernism for tiny humans.</h1>
<p>Botanical without the sweetness — sage, charcoal, and ingredient labels you can actually read.</p>
<div class="btn">Shop Essentials</div>
</div>
<div class="herovis"></div>
</div>
<div class="sec">
<div class="sectitle">Nursery Essentials</div>
<div class="grid">
<div class="card"><div class="badge eco">Eco</div><div class="thumb" style="background:linear-gradient(160deg,#d7e0da,#8baa99)"></div><div class="ptitle">Organic Swaddle Set</div><div class="pprice">$42.00</div></div>
<div class="card"><div class="badge">Sale</div><div class="thumb" style="background:linear-gradient(160deg,#e5dcd5,#a7bdb1)"></div><div class="ptitle">Bamboo Nappies (36ct)</div><div class="pprice">$18.50</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#7dc4bc,#25282a)"></div><div class="ptitle">Sensitive Balm</div><div class="pprice">$14.00</div></div>
</div>
</div>
<div class="footer"><span>Ingredients · Sustainability</span><span>Support · Registry</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #121212; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #121212; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #121212; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'acumin-pro-extra-condensed','Arial Narrow',Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#121212;}
.logo{font-size:22px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:#dedede;}
.cart{background:#fff;color:#121212;font-size:12px;font-weight:700;text-transform:uppercase;padding:9px 20px;}
.hero{height:224px;display:flex;align-items:center;padding:0 40px;background:#f5f5f5;}
.glass{width:220px;height:160px;margin-left:auto;background:linear-gradient(135deg,rgba(18,18,18,0.06),rgba(18,18,18,0.02));border:2px solid #121212;position:relative;}
.glass:before{content:'';position:absolute;left:20px;top:0;width:40px;height:100%;background:linear-gradient(90deg,rgba(255,255,255,0.6),transparent);transform:skewX(-12deg);}
.herotext{max-width:400px;}
.h1{font-size:44px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;line-height:1;color:#121212;margin:0 0 12px;}
.sub{font-family:Arial,sans-serif;font-size:14px;color:#333333;line-height:1.5;margin:0 0 18px;max-width:320px;}
.btn{display:inline-block;background:#121212;color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;padding:14px 28px;}
.grid{display:flex;gap:14px;padding:16px 40px 0;}
.card{width:196px;background:#fff;border-radius:8px;overflow:hidden;border:1px solid #dedede;}
.thumb{height:96px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#121212;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 8px;}
.cbody{padding:12px 13px;font-family:Arial,sans-serif;}
.ctitle{font-size:13px;font-weight:700;margin:0 0 4px;text-transform:uppercase;color:#121212;}
.cprice{font-size:15px;font-weight:700;color:#121212;margin:0;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-family:Arial,sans-serif;font-size:12px;color:#dedede;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Panzerglass</div>
<div class="navlinks"><span>Screen Protection</span><span>Cases</span><span>Cables</span></div>
<div class="cart">Cart (0)</div>
</div>
<div class="hero">
<div class="herotext">
<div class="h1">Engineered<br>certainty.</div>
<div class="sub">Tempered glass protection built for one purpose: to disappear, and to survive the drop.</div>
<div class="btn">Shop Protection</div>
</div>
<div class="glass"></div>
</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#dedede,#121212)"></div><div class="cbody"><div class="ctitle">Ultra-Wide Fit Glass</div><div class="cprice">$44.95</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#121212,#dedede)"></div><div class="cbody"><div class="ctitle">Camera Lens Protector</div><div class="cprice">$29.95</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#999999,#121212)"></div><div class="cbody"><div class="ctitle">Hardcase, Clear</div><div class="cprice">$39.95</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#dedede,#666666)"></div><div class="cbody"><div class="ctitle">USB-C Fast Cable</div><div class="cprice">$19.95</div></div></div>
</div>
<div class="footer"><span>Precision-Cut · Anti-Bacterial</span><span>2-Year Replacement Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7620f6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7620f6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bc95f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7351ec; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7620f6; color: #ffffff;
border: 1px solid #7351ec; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7620f6; color: #f5f5f5;
border: 1px solid #8a42f6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bc95f5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7628f4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#2F2E2B; box-sizing:border-box;
font-family:Pretendard, "Apple SD Gothic Neo", "Helvetica Neue", sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
border-bottom:1px solid #CFCECB; }
.brand { font-size:16px; font-weight:700; }
.brand span { color:#7620F6; }
.navlinks { font-size:13px; color:#6F6E6B; display:flex; gap:20px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#CFCECB; margin-top:1px; }
.tile { background:#ffffff; padding:12px; display:flex; flex-direction:column; gap:6px; }
.tile .thumb { height:150px; border-radius:8px; background:linear-gradient(160deg,#f3eefe,#e3d6fb); position:relative; }
.tile .thumb .badge { position:absolute; top:8px; left:8px; background:#EC5151; color:#fff; font-size:11px; font-weight:700; padding:2px 6px; border-radius:4px; }
.tile .name { font-size:13px; color:#4F4E4B; }
.tile .price { font-size:16px; font-weight:700; }
.tile .old { font-size:12px; color:#AFAEAB; text-decoration:line-through; margin-right:6px; }
.banner { padding:16px 34px; display:flex; align-items:center; justify-content:space-between; }
.banner .t { font-size:20px; font-weight:700; }
.banner .cta { background:#000000; color:#fff; border-radius:2px; padding:6px 14px; font-size:13px; }
</style></head>
<body>
<nav>
<div class="brand">Trenbe<span>.</span></div>
<div class="navlinks"><span>Bags</span><span>Watches</span><span>Shoes</span><span>Jewelry</span></div>
</nav>
<div class="banner">
<span class="t">Global No.1 authenticated luxury, scanned for the lowest price</span>
<span class="cta">Shop now</span>
</div>
<div class="grid">
<div class="tile"><div class="thumb"><span class="badge">SALE</span></div><span class="name">Leather Tote Bag</span><span class="price"><span class="old">$2,400</span>$1,890</span></div>
<div class="tile"><div class="thumb"></div><span class="name">Classic Chronograph</span><span class="price">$5,200</span></div>
<div class="tile"><div class="thumb"><span class="badge">SALE</span></div><span class="name">Suede Ankle Boots</span><span class="price"><span class="old">$680</span>$510</span></div>
<div class="tile"><div class="thumb"></div><span class="name">Pearl Drop Earrings</span><span class="price">$940</span></div>
<div class="tile"><div class="thumb"></div><span class="name">Cashmere Overcoat</span><span class="price">$1,760</span></div>
<div class="tile"><div class="thumb"></div><span class="name">Structured Handbag</span><span class="price">$3,100</span></div>
<div class="tile"><div class="thumb"><span class="badge">SALE</span></div><span class="name">Silk Wrap Scarf</span><span class="price"><span class="old">$310</span>$220</span></div>
<div class="tile"><div class="thumb"></div><span class="name">Minimal Steel Watch</span><span class="price">$1,050</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f2ed; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f2ed; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.5; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; background: #6e5b4f; color: #fefefe;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; background: transparent; color: #1a1a1a;
border: 1px solid #6e5b4f; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #fefefe; color: #1a1a1a;
border: 1px solid #bebcb8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.12em; background: #f4f2ed; color: #1a1a1a;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f2ed; color:#1a1a1a; box-sizing:border-box;
font-family:'acumin-pro', Lato, 'Century Gothic', Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #d2d2d0; background:#f4f2ed; }
.brand { font-family:'Crimson Pro','Crimson Text',Georgia,serif; font-size:20px; font-weight:400; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; font-weight:500; letter-spacing:0.06em; color:#1a1a1a; }
.navlinks span:first-child { color:#6e5b4f; border-bottom:1px solid #6e5b4f; padding-bottom:4px; }
.navicons { display:flex; gap:16px; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#4f4f4f; }
.hero { flex:0 0 auto; padding:22px 40px 18px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.hero-copy { max-width:430px; }
.hero-copy .label { font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:#757575; margin:0 0 8px; }
.hero-copy h1 { font-family:'Crimson Pro','Crimson Text',Georgia,serif; font-size:34px; font-weight:400; line-height:1.12;
letter-spacing:-0.4px; margin:0 0 8px; }
.hero-copy p { font-family:'Crimson Pro','Crimson Text',Georgia,serif; font-style:italic; font-size:16px; color:#293234; margin:0 0 14px; }
.hero-copy button { background:#6e5b4f; color:#fefefe; border:none; padding:12px 28px; font-size:13px;
font-weight:500; letter-spacing:0.1em; text-transform:uppercase; }
.hero-visual { width:200px; height:120px; background:linear-gradient(150deg,#c4b5ad,#6e5b4f); flex:0 0 auto; }
.editorial { flex:0 0 auto; background:#e1f0ef; padding:14px 40px; display:flex; align-items:center; gap:12px; }
.editorial .label { font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:#8b9898; white-space:nowrap; }
.editorial p { font-size:13px; color:#293234; margin:0; }
.rowlabel { flex:0 0 auto; padding:14px 40px 8px; font-size:11px; font-weight:600; letter-spacing:0.12em;
text-transform:uppercase; color:#757575; }
.products { flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:0 40px 14px; min-height:0; }
.card { display:flex; flex-direction:column; gap:6px; }
.imgwrap { flex:1; min-height:0; position:relative; }
.p1 .imgwrap { background:linear-gradient(160deg,#e1f0ef,#8b9898); }
.p2 .imgwrap { background:linear-gradient(160deg,#efe6da,#6e5b4f); }
.p3 .imgwrap { background:linear-gradient(160deg,#d9d2c4,#4f4f4f); }
.p4 .imgwrap { background:linear-gradient(160deg,#e1f0ef,#293234); }
.cardmeta .cat { font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#959595; margin:0 0 3px; }
.cardmeta .title { font-size:14px; font-weight:500; letter-spacing:0.02em; margin:0 0 3px; color:#1a1a1a; }
.cardmeta .price { font-size:13px; color:#4f4f4f; margin:0; }
footer { flex:0 0 auto; background:#293234; color:#e1e1e1; padding:12px 40px; display:flex;
justify-content:space-between; align-items:center; font-size:11px; }
footer .flinks span { margin-left:16px; color:#d2d2d0; }
</style></head>
<body>
<nav>
<p class="brand">Artifact Uprising</p>
<div class="navlinks"><span>Photo Books</span><span>Prints</span><span>Albums</span><span>Cards</span></div>
<div class="navicons"><span>Account</span><span>Bag</span></div>
</nav>
<section class="hero">
<div class="hero-copy">
<p class="label">New Collection</p>
<h1>Bound to be treasured</h1>
<p>Layflat photo books, letterpress cards, and archival prints — made from your best photographs.</p>
<button>Start a Book</button>
</div>
<div class="hero-visual"></div>
</section>
<div class="editorial">
<p class="label">The Process</p>
<p>Every book is press-printed on 100lb archival paper, bound by hand in our Denver studio.</p>
</div>
<p class="rowlabel">Shop Best Sellers</p>
<section class="products">
<div class="card p1">
<div class="imgwrap"></div>
<div class="cardmeta">
<p class="cat">Layflat</p>
<p class="title">The Classic Photo Book</p>
<p class="price">$59</p>
</div>
</div>
<div class="card p2">
<div class="imgwrap"></div>
<div class="cardmeta">
<p class="cat">Softcover</p>
<p class="title">The Everyday Journal</p>
<p class="price">$35</p>
</div>
</div>
<div class="card p3">
<div class="imgwrap"></div>
<div class="cardmeta">
<p class="cat">Square Prints</p>
<p class="title">Set of 20 Prints</p>
<p class="price">$29</p>
</div>
</div>
<div class="card p4">
<div class="imgwrap"></div>
<div class="cardmeta">
<p class="cat">Wood Album</p>
<p class="title">The Heirloom Album</p>
<p class="price">$119</p>
</div>
</div>
</section>
<footer>
<span>© Artifact Uprising</span>
<span class="flinks"><span>Our Story</span><span>Help</span><span>Gifting</span></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #221155;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #221155;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #221155; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #d85030; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #d85030;
border: 1px solid #d85030; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #221155;
border: 1px solid #c8c4d4; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #f5f5f6; color: #767676;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#221155; box-sizing:border-box;
font-family:'Gotham','GothamBook', Arial, 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
/* ---- nav ---- */
nav { flex:0 0 58px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #e0e0e0; background:#ffffff; }
.brand { font-size:17px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; color:#3d3d3d; }
.navlinks span.active { color:#221155; border-bottom:2px solid #d85030; padding-bottom:18px; }
.navicons { display:flex; align-items:center; gap:14px; }
.icon-dot { width:30px; height:30px; border-radius:4px; border:1px solid #e0e0e0; display:flex;
align-items:center; justify-content:center; font-size:12px; color:#767676; }
/* ---- hero ---- */
.hero { flex:0 0 170px; background:#221155; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; position:relative; overflow:hidden; }
.hero-copy { max-width:500px; z-index:2; }
.badge-tag { display:inline-block; background:#0a7cff; color:#ffffff; font-size:10px; font-weight:700;
letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border-radius:2px; margin-bottom:10px; }
.hero h1 { font-size:30px; font-weight:700; line-height:1.15; margin:0 0 8px; letter-spacing:-0.4px; color:#ffffff; }
.hero p { font-size:13px; color:#c9c2df; margin:0 0 14px; line-height:1.4; max-width:420px; }
.hero-actions { display:flex; gap:10px; }
.btn-primary { background:#d85030; color:#ffffff; border:none; border-radius:4px;
padding:10px 20px; font-weight:600; font-size:13px; letter-spacing:0.4px; text-transform:uppercase; white-space:nowrap; }
.btn-outline-navy { background:transparent; color:#ffffff; border:1.5px solid #ffffff; border-radius:4px;
padding:9px 18px; font-weight:600; font-size:13px; letter-spacing:0.4px; text-transform:uppercase; white-space:nowrap; }
.hero-rig { position:relative; width:230px; height:120px; z-index:1; flex-shrink:0; }
.rig-arm { position:absolute; background:linear-gradient(180deg,#4a3d78,#33285c); border-radius:3px; }
.rig-a1 { width:14px; height:90px; left:20px; top:10px; }
.rig-a2 { width:110px; height:14px; left:20px; top:10px; }
.rig-a3 { width:14px; height:60px; left:116px; top:10px; }
.rig-mon { width:88px; height:64px; right:0; top:28px; background:linear-gradient(135deg,#3d3160,#241a45);
border:2px solid #5c4e8f; border-radius:4px; }
.rig-mon::after { content:''; position:absolute; inset:8px; background:#0a7cff; opacity:0.25; border-radius:2px; }
/* ---- pills ---- */
.pillbar { flex:0 0 42px; display:flex; align-items:center; gap:8px; padding:0 32px; background:#f5f5f6;
border-bottom:1px solid #e0e0e0; }
.pill { font-size:12px; font-weight:600; padding:5px 14px; border-radius:9999px; border:1px solid #e0e0e0;
background:#f5f5f6; color:#3d3d3d; white-space:nowrap; }
.pill.active { background:#d85030; color:#ffffff; border-color:#d85030; }
/* ---- cards ---- */
.cards { flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:16px 32px; overflow:hidden; }
.card { border:1px solid #e0e0e0; border-radius:4px; padding:14px; display:flex; flex-direction:column; gap:8px;
background:#ffffff; }
.card:hover, .card { border-color:#e0e0e0; }
.swatch { height:74px; border-radius:4px; background:#f5f5f6; position:relative; overflow:hidden; }
.swatch::after { content:''; position:absolute; inset:0; margin:auto; width:60%; height:46%;
background:linear-gradient(135deg,#d9d9dc,#c3c3c8); border-radius:3px; }
.card .modelno { font-size:10px; font-weight:700; color:#767676; letter-spacing:0.5px; text-transform:uppercase; }
.card h3 { font-size:14px; font-weight:600; margin:0; line-height:1.25; color:#221155; }
.specrow { display:flex; flex-wrap:wrap; gap:5px; }
.spec-badge { font-size:9.5px; font-weight:500; color:#767676; background:#f5f5f6; border:1px solid #e0e0e0;
border-radius:2px; padding:2px 6px; white-space:nowrap; }
.card-cta { margin-top:auto; font-size:11px; font-weight:600; color:#d85030; border:1px solid #d85030;
border-radius:4px; padding:6px 10px; text-align:center; text-transform:uppercase; letter-spacing:0.3px; }
/* ---- footer ---- */
footer { flex:0 0 46px; background:#221155; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; font-size:11px; color:#c9c2df; }
footer a, footer span.link { color:#4593ed; }
</style></head>
<body>
<nav>
<p class="brand">Atdec</p>
<div class="navlinks">
<span class="active">Desk Mounts</span><span>Wall Mounts</span><span>Ceiling Mounts</span>
<span>Floor Stands</span><span>Accessories</span>
</div>
<div class="navicons">
<div class="icon-dot">Q</div>
<div class="icon-dot">A</div>
</div>
</nav>
<section class="hero">
<div class="hero-copy">
<span class="badge-tag">AWMS Series</span>
<h1>Engineered to hold. Built to spec.</h1>
<p>VESA-compliant mounting systems for broadcast studios, trading floors, and enterprise AV rollouts.</p>
<div class="hero-actions">
<button class="btn-primary">Request Quote</button>
<button class="btn-outline-navy">Download Catalog</button>
</div>
</div>
<div class="hero-rig">
<div class="rig-arm rig-a1"></div>
<div class="rig-arm rig-a2"></div>
<div class="rig-arm rig-a3"></div>
<div class="rig-mon"></div>
</div>
</section>
<div class="pillbar">
<span class="pill">All</span>
<span class="pill active">Desk Mounts</span>
<span class="pill">Wall Mounts</span>
<span class="pill">Ceiling Mounts</span>
<span class="pill">Floor Stands</span>
<span class="pill">Accessories</span>
</div>
<section class="cards">
<div class="card">
<div class="swatch"></div>
<span class="modelno">AWMS-2B</span>
<h3>Single Monitor Desk Arm</h3>
<div class="specrow">
<span class="spec-badge">9 kg Load</span>
<span class="spec-badge">VESA 75–100</span>
</div>
<div class="card-cta">View Specs</div>
</div>
<div class="card">
<div class="swatch"></div>
<span class="modelno">CPM-500</span>
<h3>Ceiling Projector Mount</h3>
<div class="specrow">
<span class="spec-badge">25 kg Load</span>
<span class="spec-badge">IP54 Rated</span>
</div>
<div class="card-cta">View Specs</div>
</div>
<div class="card">
<div class="swatch"></div>
<span class="modelno">CT-8000</span>
<h3>Heavy-Duty Mobile TV Cart</h3>
<div class="specrow">
<span class="spec-badge">75 kg Load</span>
<span class="spec-badge">VESA 400×200</span>
</div>
<div class="card-cta">View Specs</div>
</div>
</section>
<footer>
<span>© Atdec</span>
<span><span class="link">Mounts</span> · <span class="link">Support</span> · <span class="link">Company</span></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #e8540a; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #1e3a5f; color: #ffffff;
border: 1px solid #e8540a; border-radius: 4px;
padding: 10px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.3px; background: #16a34a; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:system-ui,Arial,sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#1e3a5f;}
.logo{font-size:18px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;color:#a3b4cc;}
.cta{background:#d44a06;color:#fff;font-size:12px;font-weight:700;padding:8px 16px;border-radius:4px;}
.searchbar{height:56px;display:flex;align-items:center;padding:0 30px;gap:10px;border-bottom:1px solid #e5e5e5;}
.searchinput{flex:1;height:36px;border:1px solid #a3b4cc;border-radius:4px;display:flex;align-items:center;padding:0 14px;font-size:13px;color:#6b7280;}
.searchbtn{background:#d44a06;color:#fff;font-size:12px;font-weight:700;padding:10px 20px;border-radius:4px;}
.breadcrumb{padding:10px 30px 0;font-size:11px;color:#6b7280;}
.grid{display:flex;gap:10px;padding:14px 30px 0;}
.card{width:222px;border:1px solid #e5e5e5;border-radius:6px;padding:8px;}
.thumb{height:80px;border-radius:4px;margin-bottom:6px;}
.sku{font-family:'Courier New',monospace;font-size:10px;color:#6b7280;}
.pname{font-size:12px;font-weight:600;margin-top:2px;}
.stockrow{display:flex;justify-content:space-between;align-items:center;margin-top:6px;}
.pprice{font-size:13px;font-weight:700;color:#1a1a1a;}
.stock{font-size:10px;font-weight:700;color:#16a34a;}
.stock.out{color:#dc2626;}
.promo{margin:14px 30px 0;background:#ffc107;color:#1a1a1a;font-size:12px;font-weight:700;padding:10px 14px;border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Mrostop</div>
<div class="navlinks"><span>Fasteners</span><span>Bearings</span><span>Electrical</span><span>Safety</span></div>
<div class="cta">My Account</div>
</div>
<div class="searchbar">
<div class="searchinput">Search part number, SKU, or spec...</div>
<div class="searchbtn">Search</div>
</div>
<div class="breadcrumb">Home / Fasteners / Hex Bolts / Grade 8</div>
<div class="promo">Bulk order 500+ units and save 12% — applies at checkout</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1e3a5f,#d44a06)"></div><div class="sku">SKU 402-8817</div><div class="pname">Hex Bolt Grade 8 1/2-13</div><div class="stockrow"><span class="pprice">$0.34</span><span class="stock">In Stock</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#152b47,#c24008)"></div><div class="sku">SKU 118-2204</div><div class="pname">Ball Bearing 6203-ZZ</div><div class="stockrow"><span class="pprice">$6.12</span><span class="stock">In Stock</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#374151,#1e3a5f)"></div><div class="sku">SKU 903-5560</div><div class="pname">Conduit Fitting 3/4in</div><div class="stockrow"><span class="pprice">$2.88</span><span class="stock out">Backorder</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d97706,#1e3a5f)"></div><div class="sku">SKU 221-1178</div><div class="pname">Nylon Lock Nut 1/2-13</div><div class="stockrow"><span class="pprice">$0.19</span><span class="stock">In Stock</span></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #005daa; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #005daa; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b1d3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0072ce; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #005daa; color: #ffffff;
border: 1px solid #0072ce; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #005daa; color: #f5f5f5;
border: 1px solid #2775b6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b1d3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0060b0; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1F2937; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; width:960px; height:640px; }
/* ---- left: dashboard w/ calorie ring + macro donut ---- */
.left { width:340px; height:640px; background:#F5F7FA; padding:28px 24px; border-right:1px solid #E5E7EB; }
.brandrow { display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.logom { width:32px; height:32px; border-radius:8px; background:#005DAA; color:#fff; font-weight:700;
font-size:16px; display:flex; align-items:center; justify-content:center; font-family:Georgia, serif; }
.brand { font-size:15px; font-weight:700; letter-spacing:-0.2px; }
.ring-wrap { position:relative; width:200px; height:200px; margin:8px auto 6px; }
.ring-track { position:absolute; inset:0; border-radius:50%; border:16px solid #E5E9F0; }
.ring-fill { position:absolute; inset:0; border-radius:50%;
background: conic-gradient(#0072CE 0deg 252deg, transparent 252deg 360deg);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 16px));
mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 16px));
transform: rotate(-90deg); }
.ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.ring-center .lbl { font-size:11px; font-weight:600; letter-spacing:0.6px; color:#4B5563; text-transform:uppercase; }
.ring-center .num { font-size:44px; font-weight:700; letter-spacing:-1pt; color:#111827; font-variant-numeric:tabular-nums; }
.ring-center .sub { font-size:12px; font-weight:500; color:#4B5563; }
.trio { display:flex; justify-content:space-between; margin:10px 4px 20px; }
.trio div { text-align:center; }
.trio .n { font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; color:#111827; }
.trio .l { font-size:10px; font-weight:600; letter-spacing:0.6px; color:#9CA3AF; text-transform:uppercase; }
.macro-card { background:#fff; border:1px solid #E5E7EB; border-radius:16px; padding:14px 16px; display:flex; gap:14px; align-items:center; }
.macro-donut { width:64px; height:64px; border-radius:50%; flex:none;
background: conic-gradient(#FF9F1C 0 40%, #A463F2 40% 70%, #19C37D 70% 100%); position:relative; }
.macro-donut::after { content:''; position:absolute; inset:9px; border-radius:50%; background:#fff; }
.legend { display:flex; flex-direction:column; gap:5px; }
.leg { display:flex; align-items:center; gap:6px; font-size:11px; color:#4B5563; }
.leg .sw { width:8px; height:8px; border-radius:2px; }
/* ---- right: diary ---- */
.right { flex:1; padding:26px 32px; }
.navtitle { font-size:28px; font-weight:700; letter-spacing:-0.4pt; color:#1F2937; margin-bottom:2px; }
.daterow { font-size:14px; font-weight:500; color:#4B5563; margin-bottom:18px; }
.meal { margin-bottom:14px; }
.mealhead { display:flex; justify-content:space-between; align-items:center; height:40px; border-bottom:0.5px solid #E5E7EB; }
.mealhead .name { font-size:17px; font-weight:600; color:#1F2937; }
.mealhead .cal { font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; color:#1F2937; }
.food-row { display:flex; align-items:center; height:52px; border-bottom:0.5px solid #E5E7EB; gap:8px; }
.food-row .fname { font-size:15px; font-weight:500; color:#1F2937; }
.food-row .fsub { font-size:12px; color:#4B5563; margin-top:1px; }
.food-row .spacer { flex:1; }
.food-row .fcal { font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; color:#1F2937; }
.food-row .chev { color:#9CA3AF; font-size:12px; margin-left:10px; }
.addfood { display:flex; align-items:center; gap:8px; height:44px; color:#0072CE; font-size:14px; font-weight:600; }
.addfood .plus { width:18px; height:18px; border-radius:50%; border:2px solid #0072CE; display:flex; align-items:center; justify-content:center; font-size:12px; }
.fab { position:absolute; right:36px; bottom:30px; width:56px; height:56px; border-radius:50%; background:#0072CE;
display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; font-weight:300;
box-shadow: rgba(0,93,170,0.35) 0 6px 16px; }
</style></head>
<body>
<div class="shell">
<div class="left">
<div class="brandrow"><div class="logom">M</div><div class="brand">MyFitnessPal (iOS)</div></div>
<div class="ring-wrap">
<div class="ring-track"></div>
<div class="ring-fill"></div>
<div class="ring-center">
<span class="lbl">Remaining</span>
<span class="num">1,247</span>
<span class="sub">calories</span>
</div>
</div>
<div class="trio">
<div><div class="n">2,000</div><div class="l">Goal</div></div>
<div><div class="n">753</div><div class="l">Food</div></div>
<div><div class="n">0</div><div class="l">Exercise</div></div>
</div>
<div class="macro-card">
<div class="macro-donut"></div>
<div class="legend">
<div class="leg"><span class="sw" style="background:#FF9F1C"></span>Carbs · 187g</div>
<div class="leg"><span class="sw" style="background:#A463F2"></span>Fat · 42g</div>
<div class="leg"><span class="sw" style="background:#19C37D"></span>Protein · 64g</div>
</div>
</div>
</div>
<div class="right" style="position:relative;">
<div class="navtitle">Diary</div>
<div class="daterow">Today, May 14 ⌄</div>
<div class="meal">
<div class="mealhead"><span class="name">Breakfast</span><span class="cal">312</span></div>
<div class="food-row">
<div><div class="fname">Greek Yogurt, Plain, Nonfat</div><div class="fsub">1 cup, 8 oz · Chobani</div></div>
<div class="spacer"></div><div class="fcal">120</div><span class="chev">›</span>
</div>
<div class="food-row">
<div><div class="fname">Blueberries, Raw</div><div class="fsub">1/2 cup</div></div>
<div class="spacer"></div><div class="fcal">42</div><span class="chev">›</span>
</div>
<div class="addfood"><span class="plus">+</span>Add Food</div>
</div>
<div class="meal">
<div class="mealhead"><span class="name">Lunch</span><span class="cal">487</span></div>
<div class="food-row">
<div><div class="fname">Grilled Chicken Salad</div><div class="fsub">1 bowl · Sweetgreen</div></div>
<div class="spacer"></div><div class="fcal">420</div><span class="chev">›</span>
</div>
<div class="addfood"><span class="plus">+</span>Add Food</div>
</div>
<div class="meal">
<div class="mealhead"><span class="name">Snacks</span><span class="cal">120</span></div>
<div class="addfood"><span class="plus">+</span>Add Food</div>
</div>
<div class="fab">+</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #2d2d2d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #2d2d2d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #2d2d2d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #0d944b; color: #ffffff;
border: none; border-radius: 12px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #2d2d2d;
border: 1px solid #0d944b; border-radius: 12px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #414042;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #d23827; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f7f7; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Roboto,sans-serif; color:#414042; }
*{box-sizing:border-box;}
.nav{height:58px;background:#414145;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-size:19px;font-weight:700;color:#ffffff;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#ffffff;}
.searchpill{width:180px;height:32px;border-radius:9999px;background:#ffffff;display:flex;align-items:center;padding:0 14px;font-size:11px;color:#777777;}
.hero{height:260px;display:flex;align-items:center;padding:0 36px;background:#ffffff;}
.heroText{width:440px;}
.h1{font-size:32px;font-weight:700;line-height:1.2;color:#2d2d2d;margin:0 0 12px;}
.sub{font-size:15px;color:#414042;line-height:1.5;margin:0 0 20px;width:370px;}
.cta{display:inline-flex;align-items:center;justify-content:center;width:170px;height:44px;background:#0d944b;color:#ffffff;font-size:14px;font-weight:600;border-radius:6px;}
.critters{position:relative;width:340px;height:200px;}
.toucan{position:absolute;right:120px;top:20px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d7e47c,#414145 70%);}
.beak{position:absolute;right:90px;top:50px;width:40px;height:20px;background:#f26522;border-radius:0 10px 10px 0;}
.cockatiel{position:absolute;right:20px;top:70px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f26522,#4f4f4d 70%);}
.sec{padding:22px 36px 0;}
.secTitle{font-size:18px;font-weight:600;color:#2d2d2d;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#ffffff;border:1px solid #dedede;border-radius:8px;padding:10px;position:relative;}
.thumb{height:98px;border-radius:6px;margin-bottom:10px;}
.badge{position:absolute;top:20px;left:20px;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:3px 8px;border-radius:9999px;}
.bs{background:#d23827;}
.bn{background:#7f5fca;}
.pname{font-size:13px;font-weight:600;color:#2d2d2d;margin:0 0 4px;}
.pprice{font-size:14px;font-weight:700;color:#0d944b;}
</style>
<div class="nav">
<div class="logo">Wild Republic</div>
<div class="navlinks"><span>Plush</span><span>Puppets</span><span>Nature</span></div>
<div class="searchpill">Search animals...</div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Real animals. Real huggable.</div>
<div class="sub">Cuddly Collection plush designed with wildlife experts, made to last through every adventure.</div>
<div class="cta">Shop Plush</div>
</div>
<div class="critters"><div class="toucan"></div><div class="beak"></div><div class="cockatiel"></div></div>
</div>
<div class="sec">
<div class="secTitle">Fan Favorites</div>
<div class="grid">
<div class="card"><span class="badge bs">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#0d944b,#414145);"></div><div class="pname">Toco Toucan Plush</div><div class="pprice">$16.99</div></div>
<div class="card"><span class="badge bn">New</span><div class="thumb" style="background:linear-gradient(135deg,#f26522,#414145);"></div><div class="pname">Cockatiel Puppet</div><div class="pprice">$19.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#414145,#0d944b);"></div><div class="pname">Rainforest Gift Set</div><div class="pprice">$34.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f4ef; color: #373737;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f4ef; color: #373737;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.25; margin: 0; color: #373737; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #a99d96; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.2px; background: #1d1b3e; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #1d1b3e;
border: 1px solid #1d1b3e; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #373737;
border: 1px solid #c8c5c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a99d96; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f1eedc; color: #806e28;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f4ef; font-family:'Mabry Pro','Maison Neue',-apple-system,sans-serif; color:#373737; }
*{box-sizing:border-box;}
.announce{height:32px;background:#ffb600;color:#373737;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e6e2e0;}
.logo{font-family:'PPEditorialNew',Georgia,serif;font-size:20px;color:#1d1b3e;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;color:#373737;}
.hero{height:250px;display:flex;padding:0 36px;align-items:center;background:#f1eeea;}
.herotext{width:44%;}
.herotext h1{font-family:'PPEditorialNew',Georgia,serif;font-size:32px;font-weight:400;color:#1d1b3e;margin:0 0 12px;line-height:1.15;}
.herotext p{font-size:14px;color:#8f817a;margin:0 0 16px;max-width:280px;}
.cta{display:inline-block;background:#1d1b3e;color:#fff;font-size:15px;font-weight:500;padding:14px 26px;border-radius:8px;}
.heroimg{width:48%;height:190px;border-radius:12px;background:linear-gradient(150deg,#c9bcac 0%,#9c8d85 60%,#1d1b3e 100%);}
.swatchsec{padding:16px 36px 0;}
.swatchlabel{font-size:12px;font-weight:600;color:#8f817a;margin-bottom:8px;}
.swatchrow{display:flex;gap:10px;}
.swatch{width:32px;height:32px;border-radius:9999px;border:2px solid #e6e2e0;}
.swatch.active{border:2px solid #1d1b3e;box-shadow:0 0 0 2px #f8f4ef,0 0 0 4px #1d1b3e;}
.section{padding:18px 36px 0;}
.seclabel{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#8f817a;margin-bottom:10px;}
.grid{display:flex;gap:14px;}
.card{width:180px;background:#fff;border-radius:12px;overflow:hidden;}
.thumb{height:90px;background:#f1eeea;}
.cardbody{padding:8px 12px 12px;}
.ptitle{font-size:14px;font-weight:500;color:#1d1b3e;}
.pprice{font-size:13px;color:#8f817a;margin-top:3px;}
.ecobadge{display:inline-block;background:#f1eedc;color:#806e28;font-size:10px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;padding:3px 9px;border-radius:9999px;margin-top:6px;}
</style>
<div class="announce">Free Fabric Swatches On Every Order</div>
<div class="nav">
<div class="logo">Sabai Outdoor 2</div>
<div class="navlinks"><div>Outdoor Sofas</div><div>Sectionals</div><div>Fabrics</div><div>Care Guide</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Sunbleached linen, built to live outside.</h1>
<p>Modular outdoor seating with weatherproof fabric you'd want indoors too.</p>
<div class="cta">Build Your Sofa</div>
</div>
<div class="heroimg"></div>
</div>
<div class="swatchsec">
<div class="swatchlabel">Choose a Fabric</div>
<div class="swatchrow">
<div class="swatch active" style="background:#c9bcac"></div>
<div class="swatch" style="background:#9c8d85"></div>
<div class="swatch" style="background:#1d1b3e"></div>
<div class="swatch" style="background:#8e7e76"></div>
<div class="swatch" style="background:#f1eeea"></div>
</div>
</div>
<div class="section">
<div class="seclabel">Outdoor Collection</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c9bcac,#f1eeea)"></div><div class="cardbody"><div class="ptitle">Modular Outdoor Sofa</div><div class="pprice">$1,499</div><div class="ecobadge">Recycled</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#9c8d85,#1d1b3e)"></div><div class="cardbody"><div class="ptitle">Weatherproof Ottoman</div><div class="pprice">$349</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1d1b3e,#8e7e76)"></div><div class="cardbody"><div class="ptitle">Corner Sectional Piece</div><div class="pprice">$899</div><div class="ecobadge">Recycled</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ff671b; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #f9fafb; color: #231f20;
border: 1px solid #ff671b; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9fafb; color: #231f20;
border: 1px solid #c4c3c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #ff671b; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:'Nunito Sans', Arial, sans-serif; color:#231f20; }
*{box-sizing:border-box;}
.utilrow{height:28px;background:#231f20;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 32px;font-size:10px;color:#cfcfcf;}
.nav{height:56px;background:#ffffff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-family:'Libre Franklin',Arial,sans-serif;font-size:19px;font-weight:800;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#727272;}
.navlinks span:first-child{color:#ff671b;}
.hero{height:206px;display:flex;align-items:center;padding:0 32px;}
.heroText{width:440px;}
.h1{font-family:'Libre Franklin',Arial,sans-serif;font-size:27px;font-weight:800;line-height:1.2;margin:0 0 10px;}
.sub{font-size:13px;color:#727272;margin:0 0 16px;max-width:340px;}
.btn{display:inline-flex;align-items:center;height:42px;padding:0 24px;border-radius:6px;background:#ff671b;color:#fff;font-size:13px;font-weight:700;}
.bagwrap{width:400px;height:206px;position:relative;}
.bagbody{position:absolute;left:170px;top:60px;width:110px;height:100px;border-radius:10px;background:#231f20;}
.handle{position:absolute;left:200px;top:30px;width:50px;height:36px;border:8px solid #231f20;border-bottom:none;border-radius:20px 20px 0 0;}
.durabadge{position:absolute;left:180px;top:80px;background:#ff671b;color:#fff;font-size:10px;font-weight:700;padding:3px 10px;border-radius:9999px;z-index:2;}
.sec{padding:16px 32px;}
.sectitle{font-size:15px;font-weight:800;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:216px;background:#ffffff;border-radius:8px;padding:12px;}
.thumb{height:84px;background:#eeeeee;border-radius:6px;margin-bottom:10px;position:relative;}
.durapill{position:absolute;bottom:8px;left:8px;background:#ff671b;color:#fff;font-size:9px;font-weight:700;padding:2px 8px;border-radius:9999px;}
.ecopill{position:absolute;bottom:8px;left:8px;background:#108474;color:#fff;font-size:9px;font-weight:700;padding:2px 8px;border-radius:9999px;}
.ptitle{font-size:13px;font-weight:700;margin-bottom:4px;}
.pprice{font-size:14px;font-weight:800;}
</style>
<div class="utilrow"><span>Search</span><span>Account</span><span>Cart</span></div>
<div class="nav">
<div class="logo">Stm Goods</div>
<div class="navlinks"><span>Laptop Bags</span><span>Cases</span><span>Backpacks</span><span>Sleeves</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Protection that signals<br>reassurance, not fashion.</div>
<div class="sub">DuraShock drop protection built into every bag, case and sleeve we make.</div>
<div class="btn">Shop DuraShock</div>
</div>
<div class="bagwrap"><div class="handle"></div><div class="bagbody"></div><div class="durabadge">DuraShock</div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#231f20"><div class="durapill">DuraShock</div></div><div class="ptitle">Myth 16" Laptop Backpack</div><div class="pprice">$99.99</div></div>
<div class="card"><div class="thumb" style="background:#727272"><div class="durapill">DuraShock</div></div><div class="ptitle">Dux Laptop Case</div><div class="pprice">$49.99</div></div>
<div class="card"><div class="thumb" style="background:#108474"><div class="ecopill">Eco</div></div><div class="ptitle">Recycled Sleeve, 14"</div><div class="pprice">$34.99</div></div>
<div class="card"><div class="thumb" style="background:#aaaaaa"></div><div class="ptitle">Camera Case, Compact</div><div class="pprice">$29.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fff7f2; color: #2c2a41;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fff7f2; color: #2c2a41;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #2c2a41; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #777575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #9ebadc; color: #000000;
border: none; border-radius: 12px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fff7f2; color: #2c2a41;
border: 1px solid #9ebadc; border-radius: 12px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.625; background: #fff7f2; color: #3c3c3c;
border: 1px solid #cac4c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #729311; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff7f2; font-family:'DM Sans',-apple-system,'Helvetica Neue',sans-serif; color:#2c2a41; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #eeeeee;}
.logo{font-size:19px;font-weight:600;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#2c2a41;}
.navlinks span:nth-child(1){color:#9ebadc;}
.hero{height:270px;background:#f5f5f5;display:flex;align-items:center;padding:0 40px;}
.herotext{width:420px;}
.herotext h1{font-size:32px;font-weight:600;letter-spacing:-.5px;line-height:1.25;margin:0 0 14px;}
.herotext p{font-size:15px;color:#3c3c3c;margin:0 0 18px;max-width:340px;}
.btn{display:inline-block;background:#9ebadc;color:#fff;font-size:15px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;padding:12px 26px;border-radius:12px;}
.heroart{flex:1;height:190px;background:linear-gradient(135deg,#a3daff,#9ebadc 60%);border-radius:12px;position:relative;}
.heroart:after{content:'';position:absolute;left:30px;top:30px;width:90px;height:90px;border-radius:9999px;background:#fff7f2;opacity:.8;}
.grid{display:flex;gap:14px;padding:18px 30px 0;}
.card{width:210px;background:#fff7f2;border-radius:8px;overflow:hidden;}
.thumb{height:120px;background:#e5e5e5;border-radius:8px 8px 0 0;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#729311;color:#fff;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;border-radius:4px;padding:2px 8px;}
.cbody{padding:8px 10px 10px;}
.ctitle{font-size:16px;font-weight:500;margin:0;}
.cprice{font-size:16px;font-weight:600;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:96px;background:#2c2a41;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;opacity:1;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Parade Organics</div>
<div class="navlinks"><span>New Arrivals</span><span>Sleepwear</span><span>Loungewear</span><span>Sale</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Organic softness, laundered-soft comfort.</h1>
<p>GOTS-certified organic cotton sleepwear and loungewear for restful nights.</p>
<div class="btn">Shop New</div>
</div>
<div class="heroart"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">Sale</div></div><div class="cbody"><div class="ctitle">Ribbed Zip Romper</div><div class="cprice">$38</div></div></div>
<div class="card"><div class="thumb" style="background:#a3daff;"></div><div class="cbody"><div class="ctitle">Two-Piece Pajama Set</div><div class="cprice">$42</div></div></div>
<div class="card"><div class="thumb" style="background:#f5f5f5;"></div><div class="cbody"><div class="ctitle">Footed Sleeper</div><div class="cprice">$34</div></div></div>
<div class="card"><div class="thumb" style="background:#dedede;"></div><div class="cbody"><div class="ctitle">Organic Swaddle Blanket</div><div class="cprice">$26</div></div></div>
</div>
<div class="footer"><span>© Parade Organics</span><span>Shop Our Fabric Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f8; color: #1c1b1b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f8; color: #1c1b1b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #1c1b1b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fdd4eb; color: #363636;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f7f7f8; color: #363636;
border: 1px solid #fdd4eb; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f7f7f8; color: #1c1b1b;
border: 1px solid #c0c0c1; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffbae1; color: #1c1b1b;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f7f8; color:#363636; font-family:'Work Sans',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:'Playfair Display',Georgia,serif;font-size:21px;font-weight:600;color:#1c1b1b;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:#363636;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;background:linear-gradient(120deg,#fdd4eb 0%,#b2f9e9 100%);position:relative;overflow:hidden;}
.wave{position:absolute;left:0;right:0;bottom:-40px;height:100px;background:#f7f7f8;border-radius:50% 50% 0 0/60px 60px 0 0;}
.htext{width:420px;z-index:1;}
.htext h1{font-family:'Playfair Display',Georgia,serif;font-size:32px;font-weight:600;line-height:1.25;margin:0 0 14px;color:#1c1b1b;}
.htext p{font-size:14px;color:#5a5060;margin:0 0 20px;max-width:370px;}
.btn{display:inline-block;background:#ffbae0;color:#1c1b1b;font-size:13px;font-weight:600;padding:13px 28px;border-radius:9999px;}
.bottle{position:absolute;right:100px;top:50px;width:70px;height:150px;background:linear-gradient(180deg,#fdd4eb,#b2f9e9);border-radius:20px 20px 8px 8px;box-shadow:0 12px 26px rgba(0,0,0,0.08);z-index:1;}
.bottle:before{content:'';position:absolute;left:22px;top:-14px;width:26px;height:18px;background:#676986;border-radius:4px 4px 0 0;}
.sec{padding:24px 40px 0;position:relative;z-index:1;}
.sectitle{font-family:'Playfair Display',Georgia,serif;font-size:19px;font-weight:600;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:216px;background:#fff;border-radius:20px;overflow:hidden;position:relative;}
.cardimg{width:100%;height:104px;background:linear-gradient(135deg,#fdd4eb,#b2f9e9);}
.cardbody{padding:12px;}
.cardtitle{font-size:14px;font-weight:600;}
.cardprice{font-size:12px;color:#84525c;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#676986;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mermade Hair</div>
<div class="navlinks"><span>Shampoo</span><span>Treatments</span><span>Tools</span></div>
</div>
<div class="hero">
<div class="htext">
<h1>Soft-focus haircare for dreamy days.</h1>
<p>Blush pinks, muted mauves, and formulas that make wash day feel like a spa afternoon.</p>
<div class="btn">Shop Haircare</div>
</div>
<div class="bottle"></div>
<div class="wave"></div>
</div>
<div class="sec">
<div class="sectitle">Wash Day Essentials</div>
<div class="grid">
<div class="card"><div class="cardimg"></div><div class="cardbody"><div class="cardtitle">Mermaid Wave Spray</div><div class="cardprice">$24.00</div></div></div>
<div class="card"><div class="cardimg"></div><div class="cardbody"><div class="cardtitle">Sea Salt Texturizing Mist</div><div class="cardprice">$22.00</div></div></div>
<div class="card"><div class="cardimg"></div><div class="cardbody"><div class="cardtitle">Curl Defining Cream</div><div class="cardprice">$26.00</div></div></div>
<div class="card"><div class="cardimg"></div><div class="cardbody"><div class="cardtitle">Shimmer Hair Oil</div><div class="cardprice">$28.00</div></div></div>
</div>
</div>
<div class="footer"><span>© Mermaid-Core Haircare</span><span>Ingredients · Contact</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5500; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5500; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #222222; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5500; color: #222222;
border: 1px solid #222222; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5500; color: #f5f5f5;
border: 1px solid #fd6f27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dc4d05; color: #222222;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box; font-family:"Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.brand { font-weight:700; font-size:18px; }
.navlinks { display:flex; gap:20px; font-size:15px; }
.navlinks span:first-child { color:#222222; }
.navlinks span:not(:first-child) { color:#999999; }
.btn { background:#3d3d3d; color:#f9f9f9; border:none; border-radius:8px; padding:9px 18px; font-size:15px; }
.center { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px 0 26px; text-align:center; gap:14px; }
.center h1 { font-size:26px; font-weight:700; margin:0; max-width:640px; line-height:1.35; }
.convo { width:600px; height:56px; border-radius:24px; border:1px solid #f0f0f0; background:#fff; display:flex;
align-items:center; padding:0 16px; gap:10px; box-shadow:0 4px 16px rgba(0,0,0,0.08); }
.cam { width:44px; height:44px; border-radius:9999px; background:#f9f9f9; display:flex; align-items:center; justify-content:center; font-size:18px; }
.convo span { color:#999999; font-size:15px; }
.cards { display:flex; gap:14px; padding:0 28px; }
.card { flex:1; background:#fff; border:1px solid #f0f0f0; border-radius:24px; padding:20px; }
.num { width:28px; height:28px; border-radius:9999px; background:#ff5500; color:#fff; font-size:13px; font-weight:700;
display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.card h3 { font-size:16px; margin:0 0 4px; }
.card p { font-size:12.5px; color:#5d5d5d; margin:0; }
</style></head>
<body>
<nav>
<div class="brand">QANDA</div>
<div class="navlinks"><span>Home</span><span>Chat History</span><span>Study Content</span></div>
<button class="btn">Get Started</button>
</nav>
<div class="center">
<h1>Show us a problem you're stuck on and get a personalized solution</h1>
<div class="convo"><div class="cam">📷</div><span>Ask anything to study</span></div>
</div>
<div class="cards">
<div class="card"><div class="num">1</div><h3>Take a Photo</h3><p>Snap a photo of the problem you don't understand.</p></div>
<div class="card"><div class="num">2</div><h3>Check the Solution</h3><p>See a step-by-step solution instantly.</p></div>
<div class="card"><div class="num">3</div><h3>Teacher Q&A</h3><p>Still curious? Ask a teacher directly.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.27; letter-spacing: -0.2px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #1c6fb5; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #ffffff; color: #1c6fb5;
border: 1px solid #1c6fb5; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.5; background: #dfebf5; color: #767676;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; color:#444444; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dddddd;}
.logo{font-size:18px;font-weight:700;color:#1c6fb5;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;color:#444444;}
.searchbar{width:200px;height:32px;border:1px solid #dddddd;border-radius:4px;font-size:11px;color:#767676;display:flex;align-items:center;padding:0 12px;background:#f9f9f9;}
.hero{height:220px;display:flex;align-items:center;padding:0 36px;background:#f5f5f5;border-bottom:1px solid #dddddd;}
.herotext{width:420px;}
.kicker{font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#1c6fb5;margin-bottom:10px;}
.h1{font-size:24px;font-weight:700;color:#313131;line-height:1.3;margin:0 0 10px;}
.sub{font-size:13px;color:#767676;margin:0 0 14px;max-width:320px;}
.btn{width:170px;text-align:center;background:#1c6fb5;color:#fff;font-size:12px;font-weight:700;padding:10px 0;border-radius:4px;}
.sheet{margin-left:40px;width:220px;height:170px;background:#fff;border:1px solid #dddddd;border-radius:2px;position:relative;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.perf{position:absolute;top:56px;left:8px;right:8px;height:0;border-top:2px dashed #c0c0c0;}
.perf2{position:absolute;top:113px;left:8px;right:8px;height:0;border-top:2px dashed #c0c0c0;}
.dim{position:absolute;bottom:6px;right:10px;font-size:9px;color:#767676;}
.label1{position:absolute;top:10px;left:10px;right:10px;height:38px;background:#dceafb;border-radius:2px;}
.label2{position:absolute;top:65px;left:10px;right:10px;height:38px;background:#dceafb;border-radius:2px;}
.strip{display:flex;gap:1px;background:#dddddd;}
.cell{flex:1;background:#f9f9f9;text-align:center;padding:8px;}
.clabel{font-size:9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#767676;}
.cval{font-size:12px;color:#313131;margin-top:2px;font-weight:700;}
.sec{padding:14px 36px 0;}
.sectitle{font-size:13px;font-weight:700;text-transform:uppercase;color:#313131;margin-bottom:12px;}
.grid{display:flex;gap:12px;}
.card{width:150px;border:1px solid #dddddd;border-radius:4px;padding:8px;background:#fff;position:relative;}
.thumb{height:88px;border-radius:2px;margin-bottom:8px;background:#f9f9f9;position:relative;}
.thumb .row{position:absolute;left:6px;right:6px;height:16px;background:#dceafb;border-radius:2px;}
.thumb .row.r2{top:24px;}
.thumb .row.r3{top:48px;}
.pname{font-size:11px;color:#313131;line-height:1.3;height:28px;overflow:hidden;}
.pprice{font-size:12px;font-weight:700;color:#1c6fb5;margin-top:4px;}
.badge{position:absolute;top:6px;left:6px;background:#d94f2b;color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:2px;}
</style>
<div class="nav">
<div class="logo">Onlinelabels Com</div>
<div class="navlinks"><span>Blank Labels</span><span>Custom Printing</span><span>Software</span><span>Materials</span></div>
<div class="searchbar">Search by size or shape...</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Print-Ready, Any Quantity</div>
<div class="h1">Labels sized to the sheet, not the guess.</div>
<div class="sub">Blank and custom-printed label sheets in thousands of exact sizes and materials.</div>
<div class="btn">Shop Label Sizes</div>
</div>
<div class="sheet">
<div class="label1"></div><div class="perf"></div>
<div class="label2"></div><div class="perf2"></div>
<div class="dim">4" x 2" · 8up</div>
</div>
</div>
<div class="strip">
<div class="cell"><div class="clabel">Sizes</div><div class="cval">10,000+ Templates</div></div>
<div class="cell"><div class="clabel">Material</div><div class="cval">Matte / Gloss / Kraft</div></div>
<div class="cell"><div class="clabel">Min. Order</div><div class="cval">1 Sheet</div></div>
<div class="cell"><div class="clabel">Ships</div><div class="cval">Same Day</div></div>
</div>
<div class="sec">
<div class="sectitle">Popular Label Sheets</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb"><div class="row"></div><div class="row r2"></div><div class="row r3"></div></div><div class="pname">Rectangle Labels, 4" x 2"</div><div class="pprice">$8.99</div></div>
<div class="card"><div class="thumb"><div class="row"></div><div class="row r2"></div></div><div class="pname">Round Labels, 2" Diameter</div><div class="pprice">$7.49</div></div>
<div class="card"><div class="thumb"><div class="row"></div><div class="row r2"></div><div class="row r3"></div></div><div class="pname">Kraft Shipping Labels</div><div class="pprice">$11.99</div></div>
<div class="card"><div class="thumb"><div class="row"></div><div class="row r2"></div></div><div class="pname">Waterproof Bottle Labels</div><div class="pprice">$14.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf7f0; color: #1e2525;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf7f0; color: #1e2525;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: #1e2525; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #8e9292; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; background: #ffa359; color: #1e2525;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; background: transparent; color: #1e2525;
border: 1px solid #ffa359; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fffefa; color: #1e2525;
border: 1px solid #c7c9c9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e9292; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.1em; background: #ece1c7; color: #1e2525;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#faf7f0; font-family:'Avenir','Helvetica Neue',Arial,sans-serif; color:#1e2525; }
*{box-sizing:border-box;}
.promo{height:28px;background:#ece1c7;display:flex;align-items:center;justify-content:center;font-size:12px;color:#1e2525;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #e8e9e9;}
.logo{font-family:'Baskerville',Georgia,serif;font-size:24px;color:#1e2525;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.icons{font-size:13px;color:#8e9292;}
.hero{display:flex;height:238px;background:#f4eee0;}
.herotext{width:440px;padding:34px 34px;display:flex;flex-direction:column;justify-content:center;}
.herotext h1{font-family:'Baskerville',Georgia,serif;font-style:italic;font-size:38px;line-height:1.13;margin:0 0 14px;font-weight:400;}
.herotext p{font-size:14px;color:#565c5c;margin:0 0 16px;max-width:320px;}
.btn{display:inline-block;background:#ffa359;color:#1e2525;font-family:'Avant Garde Gothic',Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:13px 26px;border-radius:4px;width:fit-content;}
.heroimg{flex:1;background:linear-gradient(135deg,#3f7427,#23491b 60%);position:relative;}
.heroimg:after{content:'';position:absolute;left:40px;top:40px;width:180px;height:130px;background:#fffefa;border-radius:2px;box-shadow:0 8px 20px rgba(0,0,0,.15);}
.chips{display:flex;gap:8px;padding:16px 30px 0;}
.chip{border:1px solid #c7c9c9;color:#565c5c;font-family:'Avant Garde Gothic',Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:9999px;padding:6px 14px;}
.chip.on{background:#1e2525;color:#faf7f0;border-color:#1e2525;}
.grid{display:flex;gap:14px;padding:16px 30px 0;}
.card{width:206px;background:#fffefa;border:1px solid #e8e9e9;border-radius:4px;}
.thumb{height:96px;background:#f4eee0;border-radius:4px 4px 0 0;}
.cardbody{padding:10px 12px;}
.ctitle{font-family:'Avenir',sans-serif;font-size:15px;font-weight:600;margin:0 0 4px;}
.cprice{font-size:14px;font-weight:600;}
.footer{position:absolute;bottom:0;left:0;right:0;height:96px;background:#1e2525;color:#faf7f0;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="promo">Free Personalization on All Notebooks</div>
<div class="nav">
<div class="logo">Papier</div>
<div class="navlinks"><div>Notebooks</div><div>Diaries</div><div>Cards</div><div>Gifts</div></div>
<div class="icons">Search Account Bag</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Made for the moments worth writing.</h1>
<p>Personalized notebooks, diaries and stationery for every stage of the story.</p>
<div class="btn">Shop Notebooks</div>
</div>
<div class="heroimg"></div>
</div>
<div class="chips"><div class="chip on">All</div><div class="chip">Notebooks</div><div class="chip">Diaries</div><div class="chip">Cards</div></div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="ctitle">Personalized Diary</div><div class="cprice">$32</div></div></div>
<div class="card"><div class="thumb" style="background:#dae8de;"></div><div class="cardbody"><div class="ctitle">A5 Notebook, Forest</div><div class="cprice">$24</div></div></div>
<div class="card"><div class="thumb" style="background:#f3d5c2;"></div><div class="cardbody"><div class="ctitle">Card Set, Amber</div><div class="cprice">$18</div></div></div>
<div class="card"><div class="thumb" style="background:#93daa3;"></div><div class="cardbody"><div class="ctitle">Wrapping Paper, Mint</div><div class="cprice">$12</div></div></div>
</div>
<div class="footer"><span>© Papier — Stationery, Personalized</span><span>Shop Help About</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #606166; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #01007f; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: transparent; color: #01007f;
border: 1px solid #01007f; border-radius: 4px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #606166; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; background: #cf5747; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Poppins',Arial,sans-serif; color:#444444; }
*{box-sizing:border-box;}
.nav{height:58px;background:#01007f;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;color:#c9d3e6;}
.hero{height:230px;background:linear-gradient(120deg,#01007f,#305996);display:flex;align-items:center;padding:0 32px;}
.heroText{width:430px;}
.h1{font-size:30px;font-weight:700;line-height:1.2;color:#fff;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.5;color:#c9d3e6;margin:0 0 18px;max-width:370px;}
.btn{display:inline-block;background:#cf5747;color:#fff;font-size:13px;font-weight:600;padding:12px 26px;border-radius:8px;}
.deviceWrap{margin-left:auto;width:130px;height:180px;position:relative;}
.wand{position:absolute;width:16px;height:150px;background:linear-gradient(180deg,#99adcb,#6684b1);border-radius:8px;left:55px;top:10px;}
.led{position:absolute;width:44px;height:20px;background:#c6c775;border-radius:10px;bottom:14px;left:40px;}
.sec{padding:20px 32px 0;}
.secTitle{font-size:17px;font-weight:600;color:#01007f;margin-bottom:14px;}
.grid{display:flex;gap:12px;}
.card{width:224px;background:#fff;border:1px solid #cfcfcf;border-radius:8px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#c6c775;color:#1a1a1a;font-size:9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:3px 8px;border-radius:9999px;}
.thumb{height:92px;background:#f5f5f5;border-radius:4px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;color:#1a1a1a;margin:0 0 4px;}
.pprice{font-size:13px;font-weight:700;color:#01007f;}
</style>
<div class="nav">
<div class="logo">Tineco</div>
<div class="navlinks"><div>Vacuums</div><div>Floor Washers</div><div>Air Care</div><div>Support</div></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Cleaning, engineered.</div>
<div class="sub">Cordless smart vacuums and wet floor washers with real-time status and self-cleaning docks.</div>
<div class="btn">Shop Vacuums</div>
</div>
<div class="deviceWrap"><div class="wand"></div><div class="led"></div></div>
</div>
<div class="sec">
<div class="secTitle">Featured Systems</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#01007f,#c6c775);"></div><div class="pname">Floor One S7 Smart</div><div class="pprice">$599.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#cf5747,#e7aca4);"></div><div class="pname">Pure One X Cordless</div><div class="pprice">$449.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#929457,#c6c775);"></div><div class="pname">iFloor 3 Breeze Combo</div><div class="pprice">$299.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#305996,#99adcb);"></div><div class="pname">Self-Cleaning Dock Base</div><div class="pprice">$129.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfbfb; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfbfb; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: 0.01em; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; letter-spacing: 0.02em; margin: 0; color: #574b44; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0.14em; background: #a38473; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0.14em; background: transparent; color: #121212;
border: 1px solid #a38473; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; letter-spacing: 0.02em; background: #fbfbfb; color: #121212;
border: 1px solid #c1c1c1; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #574b44; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; background: #82021f; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbfbfb; color:#121212; box-sizing:border-box; font-family:'Montserrat', sans-serif; }
* { box-sizing:border-box; }
.announce { height:36px; background:#a38473; color:#fff; font-size:11px; text-transform:uppercase; letter-spacing:1px; display:flex; align-items:center; justify-content:center; }
nav { height:60px; display:flex; align-items:center; padding:0 32px; border-bottom:1px solid #ebebeb; }
.brand { font-family:'Playfair Display', serif; font-size:22px; letter-spacing:.5px; margin:0 auto; }
.navlinks { display:flex; gap:20px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.9px; }
.hero { text-align:center; padding:40px 32px; background:#f7f7f7; }
.hero h1 { font-family:'Playfair Display', Georgia, serif; font-size:44px; font-weight:400; margin:0 0 12px; letter-spacing:.5px; }
.hero p { font-size:13px; color:#1d1d1d; margin:0 0 18px; }
.hero .cta { display:inline-block; background:#a38473; color:#fff; font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; padding:14px 32px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:22px 32px; column-gap:20px; }
.card { text-align:center; }
.img { aspect-ratio:1/1; background:#f7f7f7; margin-bottom:8px; display:flex; align-items:center; justify-content:center; }
.img div { width:60%; height:60%; border-radius:9999px; }
.g1 { background:radial-gradient(circle,#fbe98e,#a38473); }
.g2 { background:radial-gradient(circle,#e8e8e8,#82021f); }
.g3 { background:radial-gradient(circle,#dcc8ba,#574b44); }
.g4 { background:radial-gradient(circle,#f5e6c8,#ac9181); }
.name { font-family:'Playfair Display', Georgia, serif; font-size:17px; margin-bottom:4px; }
.price { font-size:14px; letter-spacing:.4px; }
.badge { display:inline-block; background:#82021f; color:#fff; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; padding:3px 8px; margin-bottom:6px; }
</style></head>
<body>
<div class="announce">Complimentary Shipping & Lifetime Warranty</div>
<nav>
<div class="navlinks">Rings & Bands</div>
<div class="brand">Ferkos Fine Jewelry</div>
<div class="navlinks">Chains & Bracelets</div>
</nav>
<div class="hero">
<h1>Fine Jewelry, Finely Made</h1>
<p>Diamond & gold pieces crafted for a lifetime</p>
<div class="cta">Shop Collection</div>
</div>
<div class="grid">
<div class="card"><div class="img"><div class="g1"></div></div><div class="name">Solitaire Halo Ring</div><div class="price">$2,450</div></div>
<div class="card"><span class="badge">Sale</span><div class="img"><div class="g2"></div></div><div class="name">Cuban Link Bracelet</div><div class="price">$1,180</div></div>
<div class="card"><div class="img"><div class="g3"></div></div><div class="name">Rope Chain 14K</div><div class="price">$890</div></div>
<div class="card"><div class="img"><div class="g4"></div></div><div class="name">Tennis Bracelet</div><div class="price">$3,200</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #8cabd9; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #8cabd9; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #48566b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #8cabd9; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #8cabd9; color: #111111;
border: 1px solid #7892b9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #48566b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #9eb8df; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#8CABD9; color:#000000; box-sizing:border-box;
font-family:'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
* { box-sizing:border-box; }
.nav { background:#fff; height:60px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; border-bottom:1px solid #E5E5E5; }
.msgs { padding:24px; display:flex; flex-direction:column; }
.inrow { display:flex; gap:10px; align-items:flex-end; margin-bottom:16px; }
.av { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#c9a876,#8a6a3f); flex:0 0 auto; }
.inname { font-size:12px; color:#3a4a63; margin-bottom:4px; }
.bub-in { background:#fff; border-radius:4px 16px 16px 16px; padding:10px 14px; font-size:15px; max-width:280px; box-shadow:0 1px 2px rgba(0,0,0,0.08); }
.outrow { display:flex; justify-content:flex-end; align-items:flex-end; gap:8px; margin-bottom:16px; }
.time { font-size:10px; color:#333; opacity:0.6; }
.bub-out { background:#C5F0B1; border-radius:16px 4px 16px 16px; padding:10px 14px; font-size:15px; max-width:280px; }
.sticker-row { align-self:flex-start; display:flex; align-items:flex-end; gap:8px; margin-bottom:20px; }
.sticker { width:140px; height:140px; display:flex; align-items:center; justify-content:center; font-size:80px;
background:transparent; }
.greenbadge { display:inline-flex; align-items:center; gap:5px; background:#fff; border-radius:14px; padding:5px 10px; font-size:12px; font-weight:700; }
.shield { color:#06C755; }
.stickershelf { background:rgba(255,255,255,0.5); margin:10px 24px 0; border-radius:16px; padding:14px; display:flex; align-items:center; gap:12px; }
.shelficon { width:44px; height:44px; border-radius:10px; background:linear-gradient(135deg,#06C755,#04964a); }
.shelftext { font-size:13px; font-weight:700; }
.getbtn { margin-left:auto; background:#06C755; color:#fff; font-size:12px; font-weight:700; padding:6px 14px; border-radius:999px; }
.composer { position:absolute; left:0; right:0; bottom:0; background:rgba(255,255,255,0.92); padding:10px 16px; display:flex; align-items:center; gap:10px; }
.field { flex:1; height:36px; border-radius:18px; background:#F7F7F7; }
.emo { font-size:20px; }
</style></head>
<body>
<div class="nav">LINE (iOS) <span class="shield" style="margin-left:6px;">◆</span></div>
<div class="msgs">
<div class="inrow"><div class="av"></div><div><div class="inname">LINE (iOS)</div><div class="bub-in">Did you see the Cony sticker today? So funny lol</div></div></div>
<div class="outrow"><span class="time">read</span><div class="bub-out">Haha yeah, saw it, so funny</div></div>
<div class="sticker-row"><div class="sticker">🐻</div><span class="time">3:41 PM</span></div>
<div class="inrow"><div class="av"></div><div class="bub-in">Want to grab coffee this weekend?</div></div>
</div>
<div class="stickershelf"><div class="shelficon"></div><div class="shelftext">Sticker Shop · Brown & Friends</div><div class="getbtn">GET</div></div>
<div class="composer"><div class="field"></div><span class="emo">😊</span><span class="emo">📎</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.2; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #1A1A1A; color: #FFFFFF;
border: none; border-radius: 2px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #B5452D; border-radius: 2px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #B5452D; color: #FFFFFF;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#FFFFFF; font-family:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color:#3D3D3D; }
*{box-sizing:border-box;}
.announce{position:absolute; top:0; left:0; width:960px; height:32px; background:#1A1A1A; color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center;}
.nav{position:absolute; top:32px; left:0; width:960px; height:60px; background:#fff; border-bottom:1px solid #E0E0E0; display:flex; align-items:center; justify-content:space-between; padding:0 40px;}
.logo{font-size:19px; font-weight:700; color:#1A1A1A;}
.logo span{color:#B5452D;}
.navlinks{display:flex; gap:26px; font-size:14px; font-weight:500; letter-spacing:0.5px; color:#1A1A1A;}
.cart{font-size:13px; font-weight:600;}
.hero{position:absolute; top:92px; left:0; width:960px; height:290px; display:flex; align-items:center; padding:0 50px;}
.heroText{width:420px;}
.headline{font-size:38px; font-weight:700; letter-spacing:-0.5px; line-height:1.15; color:#1A1A1A; margin-bottom:14px;}
.sub{font-size:15px; color:#3D3D3D; margin-bottom:20px; width:380px;}
.btn{display:inline-block; background:#1A1A1A; color:#fff; font-size:15px; font-weight:600; padding:14px 28px; border-radius:2px;}
.woodGrain{position:absolute; right:60px; top:40px; width:340px; height:200px; border-radius:2px; background:repeating-linear-gradient(100deg,#5C4033,#5C4033 12px,#6b4c3a 12px,#6b4c3a 24px,#4a3428 24px,#4a3428 30px);}
.caseoutline{position:absolute; width:130px; height:190px; border:6px solid #1A1A1A; border-radius:20px; top:5px; left:100px; box-sizing:border-box;}
.sec{position:absolute; top:382px; left:0; width:960px; height:258px; padding:28px 50px;}
.secTitle{font-size:20px; font-weight:600; margin-bottom:16px; color:#1A1A1A;}
.grid{display:flex; gap:16px;}
.card{width:210px; background:#fff; position:relative;}
.cardImg{width:100%; height:120px; background:#F7F5F3; display:flex; align-items:center; justify-content:center;}
.woodswatch{width:70px; height:100px; border-radius:2px; background:repeating-linear-gradient(100deg,#8B4513,#8B4513 8px,#9c5420 8px,#9c5420 16px);}
.cardTitle{font-size:16px; font-weight:600; margin-top:12px;}
.cardPrice{font-size:14px; color:#3D3D3D; margin-top:4px;}
.saleBadge{position:absolute; top:8px; left:8px; background:#B5452D; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:4px 8px; border-radius:2px;}
.swatchrow{display:flex; gap:6px; margin-top:8px;}
.sw{width:16px; height:16px; border-radius:9999px; border:2px solid #E0E0E0;}
</style>
<div class="announce">Handmade — ships in 2-3 days</div>
<div class="nav">
<div class="logo">Kerf</div>
<div class="navlinks"><span>Slim</span><span>Solid</span><span>Select</span><span>Our Story</span></div>
<div class="cart">Cart (0)</div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">Real Wood.<br>Real Protection.</div>
<div class="sub">Hand-finished walnut and cherry cases, cut from actual heartwood — not a decal.</div>
<div class="btn">Shop Cases</div>
</div>
<div class="woodGrain"><div class="caseoutline"></div></div>
</div>
<div class="sec">
<div class="secTitle">Choose Your Species</div>
<div class="grid">
<div class="card"><div class="saleBadge">Sale</div><div class="cardImg"><div class="woodswatch"></div></div><div class="cardTitle">Kerf Slim — Walnut</div><div class="cardPrice">$59</div><div class="swatchrow"><div class="sw" style="background:#5C4033"></div><div class="sw" style="background:#8B4513"></div><div class="sw" style="background:#C4A35A"></div></div></div>
<div class="card"><div class="cardImg"><div class="woodswatch" style="background:repeating-linear-gradient(100deg,#4E2B1B,#4E2B1B 8px,#5e3a25 8px,#5e3a25 16px)"></div></div><div class="cardTitle">Kerf Solid — Mahogany</div><div class="cardPrice">$69</div><div class="swatchrow"><div class="sw" style="background:#4E2B1B"></div><div class="sw" style="background:#5C4033"></div></div></div>
<div class="card"><div class="cardImg"><div class="woodswatch" style="background:repeating-linear-gradient(100deg,#B5452D,#B5452D 8px,#c25a3d 8px,#c25a3d 16px)"></div></div><div class="cardTitle">Kerf Select — Padauk</div><div class="cardPrice">$89</div><div class="swatchrow"><div class="sw" style="background:#B5452D"></div></div></div>
<div class="card"><div class="cardImg"><div class="woodswatch" style="background:repeating-linear-gradient(100deg,#C4A35A,#C4A35A 8px,#d4b56e 8px,#d4b56e 16px)"></div></div><div class="cardTitle">Kerf Slim — Maple</div><div class="cardPrice">$59</div><div class="swatchrow"><div class="sw" style="background:#C4A35A"></div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2c3338;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2c3338;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #2c3338; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.38; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.4px; background: #e8540c; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.4px; background: #003388; color: #ffffff;
border: 1px solid #e8540c; border-radius: 8px;
padding: 14px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2c3338;
border: 1px solid #cacccd; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.27; letter-spacing: 0.3px; background: #ffb236; color: #2c3338;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Century Gothic','Futura',Arial,sans-serif; color:#2c3338; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#003388;}
.logo{font-size:19px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#fff;}
.hero{height:236px;display:flex;background:#f0f0f1;}
.htext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 36px;}
.htext .k{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#e8540c;margin-bottom:12px;}
.htext h1{font-size:27px;font-weight:700;letter-spacing:.2px;color:#2c3338;margin:0 0 10px;line-height:1.25;}
.htext p{font-size:13.5px;line-height:1.5;color:#444444;margin:0 0 18px;max-width:290px;}
.btn{width:fit-content;background:#e8540c;color:#fff;font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:11px 22px;border-radius:2px;}
.himg{width:54%;position:relative;background:#e5e5e5;}
.heater{position:absolute;left:100px;top:70px;width:220px;height:70px;border-radius:2px;background:linear-gradient(90deg,#2c3338,#003388);}
.glow{position:absolute;left:100px;top:70px;width:220px;height:12px;background:linear-gradient(90deg,#e8540c,#ffb236);}
.seclabel{padding:16px 36px 10px;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#a7aaad;}
.grid{display:flex;gap:12px;padding:0 36px;}
.card{width:150px;background:#fff;border:1px solid #e2e2e2;border-radius:4px;padding:10px;}
.thumb{height:78px;border-radius:2px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:700;color:#2c3338;height:30px;overflow:hidden;line-height:1.3;text-transform:uppercase;}
.price{font-size:13px;font-weight:700;color:#e8540c;margin-top:4px;}
.badge{display:inline-block;font-size:9px;font-weight:700;color:#003388;background:#f0f0f1;padding:2px 6px;border-radius:2px;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Schwank</div>
<div class="navlinks"><div>Infrared Heaters</div><div>Industrial</div><div>Configurator</div><div>Support</div></div>
</div>
<div class="hero">
<div class="htext">
<div class="k">Radiant Heat Series</div>
<h1>Heat the hangar. Not the sky.</h1>
<p>Infrared heating equipment engineered for aircraft hangars and loading docks.</p>
<div class="btn">Configure a Unit</div>
</div>
<div class="himg"><div class="heater"></div><div class="glow"></div></div>
</div>
<div class="seclabel">Equipment Families</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#e8540c,#2c3338)"></div><div class="pname">Infrared Tube Heater</div><div class="price">$3,240</div><div class="badge">92% Efficient</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#003388,#2c3338)"></div><div class="pname">High-Bay Radiant Unit</div><div class="price">$4,890</div><div class="badge">Dock Rated</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#2ea3f2,#2c3338)"></div><div class="pname">Wall-Mount Diffuser</div><div class="price">$1,120</div><div class="badge">Compact</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#ffb236,#e8540c)"></div><div class="pname">Control Panel Kit</div><div class="price">$680</div><div class="badge">Retrofit</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0a0b0d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0a0b0d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.33; margin: 0; color: #0a0b0d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7c828a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.15; background: #0052ff; color: #ffffff;
border: none; border-radius: 100px; padding: 12px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.15; background: #eef0f3; color: #0a0b0d;
border: 1px solid #0052ff; border-radius: 100px;
padding: 12px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #0a0b0d;
border: 1px solid #c2c2c2; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c828a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.5; background: #eef0f3; color: #0a0b0d;
border-radius: 100px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0a0b0d; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:16px; font-weight:400; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:20px; font-size:13px; }
.btnp { background:#0052ff; color:#fff; border-radius:100px; padding:9px 18px; font-size:13px; font-weight:600; }
.herodark { position:relative; height:300px; background:#0a0b0d; color:#fff; display:flex; align-items:center;
padding:0 32px; overflow:hidden; gap:26px; }
.herodark .left { flex:1; }
.herodark h1 { font-size:44px; font-weight:400; letter-spacing:-1.1px; line-height:1.02; margin:0 0 12px; }
.herodark p { font-size:14px; color:#c7c9cc; margin:0 0 16px; max-width:340px; }
.stack { position:relative; width:300px; height:220px; }
.mock { position:absolute; width:260px; height:150px; background:#16181c; border-radius:24px; padding:18px; }
.mock1 { top:0; left:20px; transform:rotate(-4deg); z-index:1; opacity:0.7; }
.mock2 { top:40px; left:0; transform:rotate(2deg); z-index:2; }
.mock .row2 { display:flex; justify-content:space-between; font-size:11px; color:#a8acb3; margin-bottom:10px; }
.mock .price { font-size:20px; font-family:"Courier New", monospace; margin-bottom:6px; }
.mock .chart { height:50px; background:linear-gradient(180deg, rgba(5,177,105,0.25), transparent); position:relative; }
.mock .chart::after { content:''; position:absolute; left:0; right:0; top:50%; height:1.5px; background:#05b169;
clip-path:polygon(0 60%,20% 30%,40% 55%,60% 15%,80% 40%,100% 5%,100% 100%,0 100%); }
.assettable { padding:20px 32px; }
.arow { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid #dee1e6; }
.arow:first-child { font-size:11px; color:#7c828a; border-bottom:1px solid #dee1e6; }
.aic { width:26px; height:26px; border-radius:999px; margin-right:10px; display:inline-block; vertical-align:middle; }
.a-btc { background:#f7931a; } .a-eth { background:#627eea; } .a-sol { background:#9945ff; }
.aname { font-weight:600; font-size:13px; }
.aprice { font-family:"Courier New", monospace; font-size:13px; }
.up { color:#05b169; } .down { color:#cf202f; }
</style></head>
<body>
<nav>
<div class="brand">Coinbase</div>
<div class="navlinks"><span>Cryptocurrencies</span><span>Individuals</span><span>Institutions</span><span>Developers</span></div>
<span class="btnp">Get started</span>
</nav>
<div class="herodark">
<div class="left">
<h1>316,258,026<br>users trust us</h1>
<p>The most trusted way to buy, sell, and manage crypto.</p>
<span class="btnp">Get started</span>
</div>
<div class="stack">
<div class="mock mock1"><div class="row2"><span>ETH</span><span>+1.2%</span></div><div class="price">$3,142.08</div><div class="chart"></div></div>
<div class="mock mock2"><div class="row2"><span>BTC</span><span class="up">+2.14%</span></div><div class="price">$83,214.50</div><div class="chart"></div></div>
</div>
</div>
<div class="assettable">
<div class="arow"><span>Asset</span><span>Price</span><span>24h Change</span></div>
<div class="arow"><span><span class="aic a-btc"></span><span class="aname">Bitcoin BTC</span></span><span class="aprice">$83,214.50</span><span class="aprice up">+2.14%</span></div>
<div class="arow"><span><span class="aic a-eth"></span><span class="aname">Ethereum ETH</span></span><span class="aprice">$3,142.08</span><span class="aprice down">-0.87%</span></div>
<div class="arow"><span><span class="aic a-sol"></span><span class="aname">Solana SOL</span></span><span class="aprice">$168.42</span><span class="aprice up">+5.62%</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #020203; color: #f0f0f0;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #020203; color: #f0f0f0;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #f0f0f0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8c8c8c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #de2a2a; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #dedede;
border: 1px solid #de2a2a; border-radius: 0px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #1a1a1a; color: #f0f0f0;
border: 1px solid #3e3e3e; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #de2a2a; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Arial,Helvetica,sans-serif; background:#020203; color:#f0f0f0; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#dedede;}
.logo{font-size:18px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#f0f0f0;}
.cart{font-size:12px;font-weight:700;color:#de2a2a;letter-spacing:.5px;text-transform:uppercase;}
.hero{height:260px;background:#121212;display:flex;align-items:center;padding:0 32px;position:relative;overflow:hidden;border-top:1px solid #333333;border-bottom:1px solid #333333;}
.hero:after{content:'';position:absolute;right:60px;top:30px;width:200px;height:200px;background:linear-gradient(150deg,#de2a2a,#1a1a1a 70%);}
.hero:before{content:'';position:absolute;right:130px;top:60px;width:60px;height:140px;background:#f0f0f0;opacity:.08;transform:skewX(-8deg);}
.herotext{width:460px;}
.herotext .kick{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#de2a2a;margin-bottom:10px;}
.herotext h1{font-size:30px;font-weight:700;letter-spacing:-.5px;margin:0 0 12px;line-height:1.2;}
.herotext p{font-size:14px;color:#dedede;margin:0 0 18px;max-width:340px;}
.hbtn{display:inline-block;background:#de2a2a;color:#fff;font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:12px 26px;}
.sec{padding:20px 32px 0;}
.sectitle{font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#8c8c8c;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:196px;}
.thumb{height:130px;border-radius:4px;position:relative;}
.badge{position:absolute;top:6px;left:6px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 6px;color:#fff;background:#de2a2a;}
.badge.new{background:#413389;}
.ptitle{font-size:14px;font-weight:600;color:#f0f0f0;margin-top:8px;}
.pprice{font-size:14px;color:#dedede;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;border-top:1px solid #333333;color:#8c8c8c;font-size:12px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
</style>
<div class="wrap">
<div class="nav"><div class="logo">Nuclear Blast</div><div class="navlinks"><div>Death Metal</div><div>Black Metal</div><div>Thrash</div><div>Merch</div></div><div class="cart">Cart (2)</div></div>
<div class="hero"><div class="herotext"><div class="kick">New Release — Out Now</div><h1>Forged for the front row.</h1><p>Vinyl, CDs and merch from the roster that built the genre one riff at a time.</p><div class="hbtn">Shop the Release</div></div></div>
<div class="sec">
<div class="sectitle">Latest Drops</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#de2a2a,#1a1a1a)"><div class="badge">Sale</div></div><div class="ptitle">Iron Cathedral — Ashen Reign</div><div class="pprice">$22.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#413389,#1a1a1a)"><div class="badge new">New</div></div><div class="ptitle">Grave Hollow — Wretched Sun</div><div class="pprice">$18.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7f7f7f,#1a1a1a)"></div><div class="ptitle">Blackened Anthem — Merch Tee</div><div class="pprice">$29.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#de2a2a,#413389)"></div><div class="ptitle">Ossuary Bound — Split LP</div><div class="pprice">$26.99</div></div>
</div>
</div>
<div class="footer"><span>Merch pressed for the roster, not the algorithm</span><span>Genres · Shipping</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0d1f3c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0d1f3c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #0d1f3c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #5a6a80; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #c8962e; color: #0d1f3c;
border: none; border-radius: 4px; padding: 13px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #ffffff; color: #0d1f3c;
border: 1px solid #c8962e; border-radius: 4px;
padding: 12px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #0d1f3c;
border: 1px solid #c2c7ce; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a6a80; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #1a3a6b; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{
width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;
background:#ffffff;font-family:'Georgia','Playfair Display','Times New Roman',serif;
color:#1e2d45;
}
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:58px;background:#0d1f3c;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:2px solid #c8962e;}
.logo{color:#fff;font-weight:700;font-size:19px;letter-spacing:0.5px;}
.logo span{color:#c8962e;}
.navlinks{display:flex;gap:20px;}
.navlinks span{color:#e8eef5;font-size:12px;letter-spacing:0.5px;}
.navlinks span.active{color:#c8962e;}
.hero{background:#0d1f3c;color:#fff;padding:24px;display:flex;gap:24px;align-items:center;}
.heroText{flex:1.1;}
.heroText .kick{color:#c8962e;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px;}
.heroText h1{font-size:26px;font-weight:700;line-height:1.25;margin:0 0 8px;}
.heroText p{font-size:13px;color:#a9b6c9;margin:0 0 14px;max-width:420px;font-family:Georgia,serif;}
.heroBtn{display:inline-block;background:#c8962e;color:#0d1f3c;font-size:13px;font-weight:700;padding:10px 22px;border-radius:4px;}
.heroCoin{flex:1;height:150px;position:relative;}
.coin{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:130px;height:130px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#f0d080 0%,#c8962e 45%,#8a6a1e 80%);border:3px solid #f0d080;box-shadow:0 0 0 4px #0d1f3c,0 0 30px rgba(200,150,46,0.4);}
.coin::after{content:"";position:absolute;inset:18px;border-radius:50%;border:2px solid rgba(13,31,60,0.35);}
.section{padding:16px 24px 0;}
.trustrow{display:flex;gap:10px;margin-bottom:14px;}
.trustchip{background:#f5f6f8;border:1px solid #d4d9e0;border-radius:4px;font-size:11px;color:#1a3a6b;padding:6px 12px;font-family:Arial,sans-serif;font-weight:700;}
.sectitle{font-size:15px;font-weight:700;margin:0 0 10px;color:#0d1f3c;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#ffffff;border:1px solid #d4d9e0;border-radius:4px;overflow:hidden;}
.photo{aspect-ratio:1/1;background:#0d1f3c;position:relative;}
.photo .mini{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70%;height:70%;border-radius:50%;background:radial-gradient(circle at 38% 32%,#f0d080,#c8962e 55%,#8a6a1e 85%);border:2px solid #f0d080;}
.gradebadge{position:absolute;top:6px;left:6px;background:#1a3a6b;color:#fff;font-size:9px;font-weight:700;padding:2px 7px;border-radius:2px;font-family:Arial,sans-serif;}
.ctitle{font-size:12px;font-weight:700;color:#0d1f3c;padding:8px 10px 0;font-family:Arial,sans-serif;}
.cprice{font-size:13px;font-weight:700;color:#c8962e;padding:2px 10px 10px;font-family:Arial,sans-serif;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#0d1f3c;color:#a9b6c9;font-size:11px;padding:10px 24px;display:flex;justify-content:space-between;font-family:Arial,sans-serif;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Govmint<span>.com</span></div>
<div class="navlinks"><span class="active">Coins</span><span>Currency</span><span>Bullion</span><span>Collections</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="kick">Certified · Authenticated</div>
<h1>History you can hold in your hand.</h1>
<p>Government-issued coinage and certified rarities, graded and guaranteed by the numismatic authority you trust.</p>
<div class="heroBtn">Shop Certified Coins</div>
</div>
<div class="heroCoin"><div class="coin"></div></div>
</div>
<div class="section">
<div class="trustrow">
<div class="trustchip">NGC Certified</div>
<div class="trustchip">PCGS Graded</div>
<div class="trustchip">Money-Back Guarantee</div>
</div>
<div class="sectitle">Featured Rarities</div>
<div class="grid">
<div class="card"><div class="photo"><div class="gradebadge">MS-70</div><div class="mini"></div></div>
<div class="ctitle">1921 Morgan Silver Dollar</div><div class="cprice">$189.00</div></div>
<div class="card"><div class="photo"><div class="mini"></div></div>
<div class="ctitle">American Eagle 1oz Gold</div><div class="cprice">$2,340.00</div></div>
<div class="card"><div class="photo"><div class="gradebadge">PF-69</div><div class="mini"></div></div>
<div class="ctitle">Proof Set — Limited Mintage</div><div class="cprice">$96.00</div></div>
<div class="card"><div class="photo"><div class="mini"></div></div>
<div class="ctitle">1889-CC Carson City Dollar</div><div class="cprice">$1,150.00</div></div>
</div>
</div>
<div class="footer"><span>© Govmint</span><span>Certified Dealer · Full Provenance Guarantee</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #0b0b0b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #0b0b0b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #0b0b0b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7d7d7d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #f5d003; color: #0b0b0b;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #fafafa; color: #3f3f3f;
border: 1px solid #f5d003; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #3f3f3f;
border: 1px solid #bebebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7d7d7d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c8232c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:'Objectivity','Objectivity-Bold',sans-serif; color:#3f3f3f; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dedede;background:#0b0b0b;}
.logo{font-size:19px;font-weight:700;color:#f5d003;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#fff;}
.navcta{background:#f5d003;color:#0b0b0b;font-size:12px;font-weight:700;padding:10px 18px;border-radius:4px;}
.hero{height:230px;display:flex;background:#fff;}
.herotext{width:440px;padding:28px 36px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#f5d003;background:#0b0b0b;display:inline-block;padding:4px 8px;border-radius:2px;margin-bottom:10px;width:fit-content;}
.h1{font-size:27px;font-weight:700;line-height:1.25;color:#0b0b0b;margin:0 0 10px;}
.sub{font-size:14px;color:#7d7d7d;margin:0 0 16px;max-width:340px;}
.btn{width:150px;text-align:center;background:#f5d003;color:#0b0b0b;font-size:13px;font-weight:700;padding:11px 0;border-radius:4px;}
.heroimg{flex:1;position:relative;background:#f5f5f5;}
.stand{position:absolute;bottom:40px;left:70px;width:120px;height:14px;background:#0b0b0b;border-radius:4px;}
.arm{position:absolute;bottom:52px;left:120px;width:10px;height:80px;background:#0b0b0b;border-radius:4px;}
.tablet{position:absolute;bottom:120px;left:70px;width:120px;height:80px;background:linear-gradient(150deg,#f5d003,#0b0b0b);border-radius:6px;}
.strip{display:flex;gap:1px;background:#dedede;}
.cell{flex:1;background:#f5f5f5;text-align:center;padding:9px;}
.clabel{font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#7d7d7d;}
.cval{font-size:13px;color:#0b0b0b;margin-top:2px;font-weight:700;}
.sec{padding:16px 36px 0;}
.sectitle{font-size:13px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#0b0b0b;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:154px;border:1px solid #dedede;border-radius:6px;padding:9px;background:#fff;position:relative;}
.thumb{height:96px;border-radius:4px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:600;line-height:1.3;height:30px;overflow:hidden;color:#0b0b0b;}
.pprice{font-size:13px;font-weight:700;color:#0b0b0b;margin-top:3px;}
.badge{position:absolute;top:7px;left:7px;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 6px;border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Omoton</div>
<div class="navlinks"><span>Phone Stands</span><span>Tablet Mounts</span><span>Cables</span><span>Chargers</span></div>
<div class="navcta">Shop Bestsellers</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Built To Hold Its Angle</div>
<div class="h1">Accessories that just work, everywhere you set them.</div>
<div class="sub">Aluminum stands, mounts, and chargers engineered for everyday devices and everyday desks.</div>
<div class="btn">Shop Stands</div>
</div>
<div class="heroimg"><div class="stand"></div><div class="arm"></div><div class="tablet"></div></div>
</div>
<div class="strip">
<div class="cell"><div class="clabel">Material</div><div class="cval">Aluminum Alloy</div></div>
<div class="cell"><div class="clabel">Adjustable</div><div class="cval">270° Rotation</div></div>
<div class="cell"><div class="clabel">Compatible</div><div class="cval">Universal Fit</div></div>
<div class="cell"><div class="clabel">Warranty</div><div class="cval">12 Months</div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#c8232c;">Sale</span><div class="thumb" style="background:linear-gradient(150deg,#f5d003,#0b0b0b)"></div><div class="pname">T2 Tablet Stand</div><div class="pprice">$21.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#eee,#0b0b0b)"></div><div class="pname">Foldable Phone Stand</div><div class="pprice">$14.99</div></div>
<div class="card"><span class="badge" style="background:#4267b2;">New</span><div class="thumb" style="background:linear-gradient(150deg,#f5d003,#7d7d7d)"></div><div class="pname">Magnetic Car Mount</div><div class="pprice">$18.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#0b0b0b,#f5d003)"></div><div class="pname">65W GaN Fast Charger</div><div class="pprice">$29.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 700; line-height: 1.35; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.2px; background: #d3222a; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.2px; background: #ffffff; color: #d3222a;
border: 1px solid #d3222a; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #4caf50; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Johnny's Selected Seeds Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Roboto,-apple-system,system-ui,'Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#1a1a1a; }
*{box-sizing:border-box;}
.utility{background:#2c2c2c;color:#fff;font-size:12px;padding:6px 24px;display:flex;justify-content:space-between;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #e8e8e8;}
.logo{font-family:'Merriweather',Georgia,serif;font-weight:700;font-size:20px;color:#1a1a1a;}
.search{flex:1;max-width:380px;height:36px;border:1px solid #d9d9d9;border-radius:4px;font-size:13px;color:#666;padding:0 12px;line-height:36px;margin:0 20px;}
.navicons{font-size:13px;font-weight:500;display:flex;gap:16px;}
.catnav{display:flex;gap:22px;padding:10px 24px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;border-bottom:1px solid #e8e8e8;}
.catnav .active{color:#d3222a;}
.main{display:flex;gap:16px;padding:16px 24px;}
.sidebar{width:150px;font-size:13px;}
.sidebar h4{font-size:13px;font-weight:700;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid #e8e8e8;}
.sidebar label{display:block;margin-bottom:7px;color:#333;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;flex:1;}
.card{border:1px solid #e8e8e8;border-radius:4px;padding:12px;position:relative;}
.imgbox{width:100%;height:90px;border-radius:4px;position:relative;}
.badge{position:absolute;top:6px;left:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:3px 8px;border-radius:4px;color:#fff;background:#d3222a;}
.badge.organic{background:#4caf50;}
.title{font-size:15px;font-weight:600;font-family:'Merriweather',Georgia,serif;margin-top:8px;line-height:1.3;}
.meta{font-size:11px;color:#666;margin-top:3px;}
.price{font-size:14px;font-weight:600;margin-top:5px;}
</style>
<div class="utility">☎ 1-877-564-6697 | Free Shipping over $50 | Growing Resources</div>
<div class="nav">
<div class="logo">Johnny S Selected Seeds</div>
<div class="search">Search: early blight resistant tomato…</div>
<div class="navicons"><span>Account</span><span>Cart (2)</span></div>
</div>
<div class="catnav">
<span class="active">Vegetables</span><span>Herbs</span><span>Flowers</span><span>Fruits</span><span>Supplies</span><span>Farm Seed</span>
</div>
<div class="main">
<div class="sidebar">
<h4>Growing Season</h4>
<label>☑ Spring</label><label>☐ Summer</label><label>☐ Fall</label>
<h4>Days to Maturity</h4>
<label>☐ <60 days</label><label>☑ 60–80 days</label>
<h4>Attributes</h4>
<label>☑ Organic</label><label>☐ New This Year</label>
</div>
<div class="grid">
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#e8b0a0,#c94e30);"><div class="badge organic">Organic</div></div>
<div class="title">Brandywine Tomato</div>
<div class="meta">80 days to maturity · Indeterminate</div>
<div class="price">$4.95</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#c9d9a8,#8ba85a);"></div>
<div class="title">Genovese Basil</div>
<div class="meta">65 days to maturity · Full sun</div>
<div class="price">$3.50</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#e8c988,#c99a3a);"><div class="badge">Sale</div></div>
<div class="title">Sugar Baby Watermelon</div>
<div class="meta">75 days to maturity · Vining</div>
<div class="price">$3.95</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#d0a8d8,#9a4faf);"></div>
<div class="title">Zinnia Benary's Giant Mix</div>
<div class="meta">70 days to bloom · Cut flower</div>
<div class="price">$3.25</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#a8c8d0,#3f7f92);"><div class="badge organic">Organic</div></div>
<div class="title">Waltham Butternut Squash</div>
<div class="meta">100 days to maturity · Vining</div>
<div class="price">$4.25</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#d8d0a0,#a89240);"></div>
<div class="title">Red Russian Kale</div>
<div class="meta">50 days to maturity · Cold hardy</div>
<div class="price">$3.75</div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff7e36; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff7e36; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c4222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6f0f; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff7e36; color: #000000;
border: 1px solid #ff6f0f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff7e36; color: #111111;
border: 1px solid #d96d30; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c4222; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff7c30; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Karrot detail mock</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212124; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
* { box-sizing:border-box; }
.wrap { width:960px; height:640px; display:flex; flex-direction:column; }
.photo { position:relative; height:300px; overflow:hidden; background:linear-gradient(160deg,#fff5f0,#f2f3f6); flex:0 0 300px; }
.photo .shape1 { position:absolute; width:260px; height:200px; border-radius:24px; left:110px; top:60px;
background:linear-gradient(150deg,#e7c9a8,#c99a6b); }
.photo .shape2 { position:absolute; width:90px; height:90px; border-radius:16px; left:400px; top:100px;
background:linear-gradient(150deg,#f2b28a,#ff9e66); }
.photo .backbtn { position:absolute; left:20px; top:20px; width:36px; height:36px; border-radius:999px;
background:rgba(255,255,255,0.9); }
.photo .wordmark { position:absolute; left:66px; top:26px; font-size:14px; font-weight:700; color:#212124;
background:rgba(255,255,255,0.9); border-radius:999px; padding:6px 14px; }
.photo .strip { position:absolute; left:20px; bottom:20px; display:flex; gap:6px; }
.photo .strip span { width:40px; height:40px; border-radius:8px; background:rgba(255,255,255,0.9); border:2px solid transparent; }
.photo .strip span.on { border-color:#ff6f0f; }
.photo .count { position:absolute; right:20px; bottom:20px; background:rgba(0,0,0,0.55); color:#ffffff;
font-size:12px; font-weight:400; border-radius:999px; padding:4px 10px; }
.body { flex:1; padding:18px 24px 0 24px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.body h1 { margin:0; font-size:24px; font-weight:700; line-height:1.28; color:#212124; }
.price { font-size:20px; font-weight:700; color:#212124; }
.meta { font-size:13px; font-weight:400; color:#868b94; }
.seller { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid #eaebee; border-bottom:1px solid #eaebee; }
.avatar { width:40px; height:40px; border-radius:999px; background:linear-gradient(150deg,#ffd8b8,#ff9e66); flex:0 0 40px; }
.sellerinfo .name { font-size:14px; font-weight:600; color:#212124; }
.sellerinfo .temp { font-size:12px; font-weight:400; color:#ff6f0f; margin-top:2px; }
.desc { font-size:14px; font-weight:400; line-height:1.5; color:#5b5e64; }
.actionbar { margin-top:auto; flex:0 0 76px; display:flex; align-items:center; gap:12px; padding:0 24px;
border-top:1px solid #eaebee; }
.fav { width:44px; height:44px; border-radius:12px; border:1px solid #eaebee; display:flex; align-items:center; justify-content:center; }
.heart { width:18px; height:18px; position:relative; }
.heart::before,.heart::after { content:''; position:absolute; top:0; width:9px; height:14px; border-radius:9px 9px 0 0;
background:#868b94; }
.heart::before { left:0; transform:rotate(-45deg); transform-origin:right; }
.heart::after { right:0; transform:rotate(45deg); transform-origin:left; }
.chat { flex:1; height:44px; border-radius:999px; background:#ff6f0f; color:#ffffff; font-size:14px; font-weight:600;
display:flex; align-items:center; justify-content:center; }
</style></head>
<body>
<div class="wrap">
<div class="photo">
<div class="shape1"></div>
<div class="shape2"></div>
<div class="backbtn"></div>
<div class="wordmark">Karrot</div>
<div class="strip"><span class="on"></span><span></span><span></span><span></span></div>
<div class="count">1 / 4</div>
</div>
<div class="body">
<h1>Wooden bookshelf, barely used</h1>
<div class="price">$45</div>
<div class="meta">Chelsea, Manhattan · 2 hr ago · 128 views</div>
<div class="seller">
<div class="avatar"></div>
<div class="sellerinfo"><div class="name">Jordan</div><div class="temp">Manner temp 36.5°C</div></div>
</div>
<div class="desc">Solid oak bookshelf, 5 shelves. No scratches, smoke-free home. Pickup only, happy to help carry it down.</div>
</div>
<div class="actionbar">
<div class="fav"><div class="heart"></div></div>
<div class="chat">Chat</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #e8001c; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #e8001c;
border: 1px solid #e8001c; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e8001c; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Hioki Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',Arial,sans-serif; background:#ffffff; color:#1a1a1a; }
*{box-sizing:border-box;}
.topstrip{height:22px;background:#1a1a1a;color:#fff;font-size:10px;display:flex;align-items:center;justify-content:flex-end;padding:0 24px;gap:16px;letter-spacing:.3px;}
.nav{height:52px;border-bottom:1px solid #dddddd;display:flex;align-items:center;padding:0 24px;justify-content:space-between;}
.logo{font-weight:700;font-size:20px;letter-spacing:-.5px;color:#1a1a1a;}
.logo span{color:#e8001c;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;color:#333;}
.navright{display:flex;align-items:center;gap:12px;}
.search{border:1px solid #dddddd;background:#f5f5f5;border-radius:4px;height:28px;width:160px;font-size:11px;color:#666;padding:0 8px;line-height:28px;}
.hero{background:#1a1a1a;color:#fff;height:220px;display:flex;align-items:center;padding:0 40px;position:relative;border-top:4px solid #e8001c;}
.hero-text{max-width:430px;}
.hero-text h1{font-size:30px;font-weight:700;line-height:1.25;margin:0 0 10px;letter-spacing:-.5px;}
.hero-text p{font-size:13px;color:#cccccc;margin:0 0 16px;line-height:1.6;}
.hero-cta{display:inline-block;background:#e8001c;color:#fff;font-size:13px;font-weight:600;padding:9px 18px;border-radius:4px;letter-spacing:.3px;}
.hero-visual{position:absolute;right:40px;top:30px;bottom:30px;width:300px;border:1px solid #444;background:repeating-linear-gradient(135deg,#242424,#242424 8px,#2a2a2a 8px,#2a2a2a 16px);display:flex;align-items:center;justify-content:center;color:#888;font-size:11px;letter-spacing:1px;}
.section{padding:16px 40px;}
.section h2{font-size:15px;font-weight:700;margin:0 0 12px;color:#1a1a1a;border-left:4px solid #e8001c;padding-left:10px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{border:1px solid #dddddd;background:#fff;padding:10px;position:relative;}
.card .imgbox{height:78px;background:#f5f5f5;margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:#999;font-size:10px;}
.badge{position:absolute;top:8px;left:8px;background:#e8001c;color:#fff;font-size:9px;font-weight:700;letter-spacing:.5px;padding:2px 5px;text-transform:uppercase;}
.model{font-family:Consolas,'Courier New',monospace;font-size:11px;font-weight:700;letter-spacing:.5px;color:#333;}
.title{font-size:12px;font-weight:600;margin:4px 0 2px;color:#1a1a1a;}
.spec{font-size:10px;color:#666;}
.footer{background:#222;color:#aaa;font-size:10px;padding:12px 40px;display:flex;justify-content:space-between;position:absolute;bottom:0;left:0;right:0;border-top:3px solid #e8001c;}
</style>
<div class="topstrip">EN | JP · Investor Relations · Distributors</div>
<div class="nav">
<div class="logo">Hioki</div>
<div class="navlinks">
<span>Power Measurement</span><span>Electrical Safety</span><span>Data Acquisition</span><span>LCR Meters</span>
</div>
<div class="navright">
<div class="search">Search products…</div>
</div>
</div>
<div class="hero">
<div class="hero-text">
<h1>Precision measurement,<br>engineered without compromise.</h1>
<p>Power analyzers, clamp sensors and data loggers built for the tolerances your work demands.</p>
<div class="hero-cta">Request a Quote</div>
</div>
<div class="hero-visual">INSTRUMENT PHOTOGRAPHY</div>
</div>
<div class="section">
<h2>Power Measurement</h2>
<div class="grid">
<div class="card"><div class="badge">NEW</div><div class="imgbox">PW6001</div><div class="model">PW6001</div><div class="title">Power Analyzer</div><div class="spec">0.02% accuracy · 7 elements</div></div>
<div class="card"><div class="imgbox">CT6862</div><div class="model">CT6862</div><div class="title">Clamp On Sensor</div><div class="spec">500A AC/DC · Flex core</div></div>
<div class="card"><div class="imgbox">LR8450</div><div class="model">LR8450</div><div class="title">Data Logger</div><div class="spec">10ch universal input</div></div>
<div class="card"><div class="imgbox">IM3536</div><div class="model">IM3536</div><div class="title">LCR Meter</div><div class="spec">4Hz–8MHz sweep</div></div>
</div>
</div>
<div class="footer">
<span>© Hioki E.E. Corporation — ISO 9001 · RoHS Compliant</span>
<span>Products · Support · Company · Regional Resources</span>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; margin: 0; color: #6B6B6B; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.8px; background: #F5A800; color: #000000;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.8px; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #F5A800; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B6B6B; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #F5F5F5; color: #6B6B6B;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:'Ubuntu',system-ui,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:3px solid #F5A800; }
.brand { font-family:'Berthold','Berthold Akzidenz Grotesk',Arial,sans-serif; font-size:19px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#1a1a1a; }
.util { font-size:12px; color:#6B6B6B; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 64px); }
.stage { padding:26px; display:flex; flex-direction:column; gap:12px; background:#F5F5F5; }
.crumb { font-size:11px; color:#6B6B6B; }
.pan { flex:1; border-radius:4px; background:#ffffff; border:1px solid #DCDCDC; position:relative; overflow:hidden; }
.pan::before { content:''; position:absolute; left:50%; top:44%; width:190px; height:120px; transform:translate(-50%,-50%); border-radius:60px 60px 12px 12px;
background:linear-gradient(160deg,#F5A800,#D48E00 80%); box-shadow:0 16px 26px rgba(0,0,0,0.14); }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; border-radius:4px; background:#ffffff; border:1px solid #DCDCDC; }
.info { padding:24px 34px; display:flex; flex-direction:column; gap:11px; overflow:hidden; }
.cat { font-size:13px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#D48E00; }
h1 { font-family:'Berthold','Berthold Akzidenz Grotesk',Arial,sans-serif; margin:0; font-size:30px; font-weight:700; line-height:1.18; letter-spacing:-0.3px; }
.part-number { font-family:'Ubuntu Mono','Courier New',monospace; font-size:13px; letter-spacing:0.5px; color:#3D3D3D; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:700; }
.desc { font-size:16px; color:#3D3D3D; line-height:1.6; }
.compliance-row { display:flex; gap:8px; }
.compliance { background:#F5F5F5; border:1px solid #DCDCDC; border-radius:2px; font-size:10px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; padding:4px 8px; color:#6B6B6B; }
.compliance.certified { background:#E8F5E9; border-color:#388E3C; color:#388E3C; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#F5A800; color:#000000; border:none; height:44px; border-radius:4px; font-size:14px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; }
.btn-secondary { width:190px; background:#ffffff; border:2px solid #1a1a1a; color:#1a1a1a; height:44px; border-radius:4px; font-size:14px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; }
</style></head>
<body>
<nav>
<p class="brand">Bullard</p>
<div class="navlinks"><span>Hard Hats</span><span>Respiratory</span><span>Thermal</span><span>Fall Protection</span></div>
<div class="util">Distributor Locator Cart (1)</div>
</nav>
<main>
<div class="stage">
<div class="crumb">Bullard / Hard Hats / Advent</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Advent Series</span>
<h1>Advent Type II Hard Hat</h1>
<span class="part-number">SKU: AD34-YL-R</span>
<div class="price-row"><span class="price">$42.50</span></div>
<p class="desc">Six-point ratchet suspension and Type II lateral impact protection engineered for construction and utility field crews.</p>
<div class="compliance-row">
<span class="compliance certified">ANSI Z89.1</span><span class="compliance">CSA Type 2</span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Download Spec Sheet</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0f0f0f; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0f0f0f; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; letter-spacing: 0.01px; margin: 0; color: #8a8a8a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #f47c20; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: transparent; color: #ffffff;
border: 1px solid #f47c20; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: 0.01px; background: #222222; color: #ffffff;
border: 1px solid #4b4b4b; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #2c2c2c; color: #f47c20;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif; background:#0f0f0f; color:#ffffff; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #2a2a2a;}
.logo{font-size:18px;font-weight:800;color:#f47c20;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:#e0e0e0;}
.cattabs{display:flex;gap:20px;padding:10px 40px;border-bottom:1px solid #2a2a2a;font-size:13px;}
.cattabs div{color:#8a8a8a;}
.cattabs div.active{color:#f47c20;border-bottom:2px solid #f47c20;padding-bottom:8px;}
.hero{height:210px;display:flex;align-items:center;padding:0 44px;}
.left{width:52%;}
.left h1{font-size:34px;font-weight:800;line-height:1.15;margin:0 0 12px;}
.left p{font-size:14px;color:#e0e0e0;max-width:340px;margin:0 0 16px;}
.btn{display:inline-block;background:#f47c20;color:#fff;font-size:15px;font-weight:700;padding:13px 26px;border-radius:8px;}
.right{width:44%;height:130px;border-radius:12px;background:radial-gradient(circle at 30% 40%,#f47c20,#1a1a1a 70%);}
.section{padding:16px 40px 0;}
.sectitle{font-size:16px;font-weight:600;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#222222;border:1px solid #2a2a2a;border-radius:12px;padding:12px;}
.thumb{height:80px;background:#1a1a1a;border-radius:8px;margin-bottom:8px;position:relative;}
.spec{position:absolute;top:6px;left:6px;background:#2c2c2c;border:1px solid #f47c20;color:#f47c20;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.specrow{font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#8a8a8a;margin-bottom:4px;}
.ptitle{font-size:15px;font-weight:600;}
.pprice{font-size:20px;font-weight:800;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">X Dragon</div>
<div class="navlinks"><div>Solar Chargers</div><div>Power Banks</div><div>Cases</div></div>
</div>
<div class="cattabs"><div class="active">Solar Chargers</div><div>Power Banks</div><div>Phone Cases</div><div>Cables</div></div>
<div class="hero">
<div class="left">
<h1>Harvest sunlight. Never lose charge.</h1>
<p>Solar panels stitched into rugged nylon cases for the trail and beyond.</p>
<div class="btn">Shop Chargers</div>
</div>
<div class="right"></div>
</div>
<div class="section">
<div class="sectitle">Featured Products</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="spec">20W</div></div><div class="specrow">4 Solar Panels</div><div class="ptitle">SunVolt Charger</div><div class="pprice">$79.99</div></div>
<div class="card"><div class="thumb"></div><div class="specrow">26800mAh</div><div class="ptitle">PowerCore Bank</div><div class="pprice">$59.99</div></div>
<div class="card"><div class="thumb"></div><div class="specrow">MFi Certified</div><div class="ptitle">RuggedCase Pro</div><div class="pprice">$34.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #c6a671; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fafafa; color: #231f20;
border: 1px solid #c6a671; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #231f20;
border: 1px solid #c4c3c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ca192c; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#231f20; box-sizing:border-box;
font-family:'Poppins','Chivo',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; background:#231f20; }
.brand { font-size:16px; font-weight:600; color:#fff; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; color:#fff; }
.navlinks span.active { color:#c6a671; }
.cart { color:#c6a671; font-size:12px; font-weight:700; }
.hero { background:#231f20; color:#fff; padding:24px 36px 30px; display:flex; justify-content:space-between; align-items:center; }
.hero h1 { font-size:26px; font-weight:600; margin:0 0 8px; }
.hero p { font-size:13px; color:#cccccc; margin:0; max-width:300px; }
.btn { display:inline-block; background:#c6a671; color:#fff; font-size:12px; font-weight:600; text-transform:uppercase; padding:11px 22px; border-radius:8px; margin-top:12px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:18px 36px; }
.card { background:#f4ede4; border-radius:12px; overflow:hidden; }
.card-img { height:100px; background:linear-gradient(135deg,#344153,#c6a671); border-radius:12px 12px 0 0; position:relative; }
.badge { position:absolute; top:8px; left:8px; font-size:9px; font-weight:600; text-transform:uppercase; padding:2px 8px; border-radius:999px; }
.badge.sale { background:#ca192c; color:#fff; }
.badge.new { background:#19a340; color:#fff; }
.cbody { padding:10px 12px; }
.cbody h3 { font-size:13px; font-weight:600; margin:0 0 4px; }
.price { font-size:15px; font-weight:600; }
.price .old { font-size:11px; color:#999999; text-decoration:line-through; font-weight:400; margin-left:6px; }
footer { position:absolute; bottom:0; left:0; right:0; height:44px; background:#231f20; color:#999999;
display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Beard And Blade</p>
<div class="navlinks"><span class="active">Beard Care</span><span>Shaving</span><span>Tools</span><span>Gift Sets</span></div>
<div class="cart">Cart (2)</div>
</nav>
<section class="hero">
<div>
<h1>Australia's Home of Men's Grooming</h1>
<p>Beard oils, precision blades, and barbershop-grade tools for the modern gentleman.</p>
<span class="btn">Shop Beard Oils</span>
</div>
</section>
<div class="grid">
<div class="card">
<div class="card-img"><span class="badge sale">Sale</span></div>
<div class="cbody">
<h3>Cedarwood Beard Oil 30ml</h3>
<div class="price">$24.95<span class="old">$29.95</span></div>
</div>
</div>
<div class="card">
<div class="card-img"><span class="badge new">New</span></div>
<div class="cbody">
<h3>Straight Razor — Walnut Handle</h3>
<div class="price">$89.00</div>
</div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody">
<h3>Grooming Kit — Starter Set</h3>
<div class="price">$64.95</div>
</div>
</div>
</div>
<footer>
<span>© Beard And Blade</span>
<span>Beard And Blade · Shipping · Returns · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #111111; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #111111; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffdd00; color: #111111;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: transparent; color: #ffdd00;
border: 1px solid #ffdd00; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #231f20; color: #ffffff;
border: 1px solid #4c4c4c; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.1; background: #323232; color: #ffdd00;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#111111; font-family:'Inter','Helvetica Neue',Arial,sans-serif; color:#e7e7e7; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #3a3a3a;}
.logo{font-family:'Anton','Teko',sans-serif;font-size:22px;font-weight:400;color:#ffdd00;letter-spacing:.5px;text-transform:uppercase;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;color:#e7e7e7;text-transform:uppercase;font-family:'Barlow',sans-serif;}
.navcta{background:#ffdd00;color:#111;font-size:12px;font-weight:700;padding:9px 18px;border-radius:4px;text-transform:uppercase;}
.hero{height:250px;display:flex;align-items:center;padding:0 36px;background:radial-gradient(circle at 75% 50%,#231f20,#111111 70%);}
.herotext{width:430px;}
.spec{font-family:'Teko',sans-serif;font-size:60px;font-weight:700;color:#ffdd00;line-height:.95;letter-spacing:-1px;}
.speclabel{font-family:'Barlow',sans-serif;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#888;margin-bottom:14px;}
.headline{font-family:'Anton',sans-serif;font-size:24px;font-weight:400;color:#fff;margin:8px 0 12px;text-transform:uppercase;line-height:1.15;}
.sub{font-size:13px;color:#e7e7e7;margin-bottom:18px;max-width:320px;}
.btn{display:inline-block;background:#ffdd00;color:#111;font-family:'Barlow',sans-serif;font-size:13px;font-weight:700;padding:12px 26px;border-radius:4px;text-transform:uppercase;}
.beam{width:230px;height:200px;margin-left:60px;position:relative;overflow:hidden;}
.torch{position:absolute;left:80px;top:20px;width:24px;height:120px;background:linear-gradient(180deg,#888,#231f20);border-radius:4px;}
.cone{position:absolute;left:30px;top:-30px;width:220px;height:220px;background:radial-gradient(circle,rgba(255,221,0,.35),transparent 70%);}
.sec{padding:18px 36px 0;}
.sectitle{font-family:'Barlow',sans-serif;font-size:15px;font-weight:600;text-transform:uppercase;color:#e7e7e7;margin-bottom:14px;letter-spacing:.5px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#231f20;border-radius:4px;padding:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#4caf78;color:#111;font-size:9px;font-weight:700;padding:3px 8px;border-radius:4px;text-transform:uppercase;}
.thumb{height:88px;border-radius:4px;margin-bottom:10px;}
.pname{font-size:13px;font-weight:600;color:#fff;font-family:'Barlow',sans-serif;}
.pprice{font-size:13px;color:#ffdd00;font-weight:700;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Nitecore</div>
<div class="navlinks"><span>Flashlights</span><span>Headlamps</span><span>Power</span><span>Fans</span></div>
<div class="navcta">Compare</div>
</div>
<div class="hero">
<div class="herotext">
<div class="spec">4000</div>
<div class="speclabel">Lumens Max Output</div>
<div class="headline">Light engineered like a spec sheet, not a feeling.</div>
<div class="sub">Rechargeable, rugged, and rated to numbers you can actually check.</div>
<div class="btn">Shop Flashlights</div>
</div>
<div class="beam"><div class="cone"></div><div class="torch"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="badge">In Stock</div><div class="thumb" style="background:linear-gradient(135deg,#ffdd00,#231f20)"></div><div class="pname">TINI 2 Keychain Light</div><div class="pprice">$29.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#231f20,#ffdd00)"></div><div class="pname">NU25 UL Headlamp</div><div class="pprice">$44.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4caf78,#231f20)"></div><div class="pname">NB10000 Power Bank</div><div class="pprice">$59.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#888888,#231f20)"></div><div class="pname">P30 Flashlight</div><div class="pprice">$89.95</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #212529; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #212529; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #969799; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #212529; color: #ffffff;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #212529; color: #f5f5f5;
border: 1px solid #43464a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969799; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1c1f22; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Pretendard",-apple-system,"Noto Sans KR",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:6px; }
.navlinks span { font-size:16px; color:#212429; padding:5.5px 12px; border-radius:4px; }
.hero { padding:44px 40px 30px; text-align:center; }
.hero h1 { font-size:44px; font-weight:700; margin:0 0 12px; letter-spacing:-0.5px; }
.hero p { font-size:16px; color:#8c8c8c; margin:0; }
.band { background:#f3f4f6; padding:26px 40px; display:flex; justify-content:center; gap:60px; }
.stat b { display:block; font-size:23px; font-weight:700; }
.stat span { font-size:14px; color:#71717a; }
.blogsec { padding:24px 40px 0; }
.blogsec h2 { font-size:23px; font-weight:700; margin:0 0 16px; }
.postrow { display:flex; gap:16px; }
.post { flex:1; background:#ffffff; border:1px solid #e4e4e7; border-radius:6px; padding:18px; }
.chip { display:inline-block; background:#e5e7eb; color:#4b5563; font-size:12px; border-radius:6px; padding:3px 10px; margin-bottom:10px; }
.post h3 { font-size:16px; font-weight:600; margin:0 0 6px; }
.post p { font-size:13px; color:#595959; margin:0; line-height:1.5; }
.scrolltop { position:absolute; right:36px; bottom:24px; width:48px; height:48px; border-radius:24px;
background:#212529; color:#ffffff; display:flex; align-items:center; justify-content:center; font-size:18px;
box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.06); }
</style></head>
<body>
<nav>
<p class="brand">Scatter Lab</p>
<div class="navlinks"><span>About Zeta</span><span>Culture</span><span>Blog</span><span>Careers</span><span>AI Ethics</span></div>
</nav>
<section class="hero">
<h1>zeta: a new paradigm for entertainment</h1>
<p>An AI entertainment service used 12 hours a week</p>
</section>
<div class="band">
<div class="stat"><b>2h 40m a day</b><span>average usage time</span></div>
<div class="stat"><b>800,000 users</b><span>every month</span></div>
</div>
<section class="blogsec">
<h2>Blog</h2>
<div class="postrow">
<div class="post"><span class="chip">Product</span><h3>What makes zeta special shows up in usage time</h3><p>Why people come back to zeta every day.</p></div>
<div class="post"><span class="chip">Business</span><h3>The Scatter Lab Ethos: how we work</h3><p>Book a coffee chat — meet our culture.</p></div>
</div>
</section>
<div class="scrolltop">↑</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f0f0; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f0f0; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #003f56; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #f8f0f0; color: #003f56;
border: 1px solid #003f56; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c0baba; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #67c116; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Elixir Strings</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f8f0f0; color:#1a1a1a; font-family:'Work Sans',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #cecdcd; }
.logo { font-weight:700; font-size:20px; color:#003f56; }
.navlinks { display:flex; gap:24px; font-size:15px; font-weight:500; }
.navlinks span.on { color:#003f56; border-bottom:2px solid #003f56; padding-bottom:24px; }
.btn { background:#00aeef; color:#fff; border-radius:8px; padding:14px 28px; font-size:16px; font-weight:600; }
.hero { height:220px; background:linear-gradient(135deg,#003f56 0%,#111111 100%); color:#fff; display:flex; align-items:center;
padding:0 32px; gap:30px; }
.hero-copy { flex:1; }
.hero-copy h1 { font-size:40px; font-weight:700; letter-spacing:-1px; margin:0 0 6px; line-height:1.1; }
.spec-line { font-family:'Inconsolata',monospace; font-size:13px; color:#accef7; margin:8px 0 16px; }
.hero-art { flex:1; height:150px; display:flex; align-items:center; justify-content:center; }
.headstock { width:90px; height:140px; background:linear-gradient(160deg,#3a3a3a,#111); border-radius:6px; position:relative; }
.headstock::before, .headstock::after { content:''; position:absolute; width:10px; height:10px; border-radius:50%; background:#00aeef; }
.headstock::before { top:20px; left:14px; } .headstock::after { top:20px; right:14px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:20px 32px; }
.card { background:#fff; border-radius:12px; padding:16px; }
.thumb { aspect-ratio:1/1; height:96px; border-radius:8px; margin-bottom:10px; }
.th1 { background:linear-gradient(160deg,#67c116,#003f56); }
.th2 { background:linear-gradient(160deg,#00aeef,#002d3e); }
.th3 { background:linear-gradient(160deg,#accef7,#003f56); }
.badge { display:inline-block; background:#67c116; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase;
letter-spacing:.5px; border-radius:4px; padding:2px 8px; margin-bottom:8px; }
.name { font-size:18px; font-weight:500; margin:0 0 4px; }
.price { font-size:18px; font-weight:600; }
</style></head>
<body>
<nav>
<div class="logo">Elixir Strings</div>
<div class="navlinks"><span class="on">Strings</span><span>Accessories</span><span>Learn</span><span>Support</span></div>
<div class="btn">Find Your Set</div>
</nav>
<div class="hero">
<div class="hero-copy">
<h1>Tone that lasts longer.</h1>
<div class="spec-line">80/20 Bronze | Light Gauge | 6-String Set</div>
<p style="font-size:14px;color:#ccc;max-width:340px;margin:0">Anti-rust coated strings engineered for players who demand tone and durability.</p>
</div>
<div class="hero-art"><div class="headstock"></div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb th1"></div><span class="badge">New</span><p class="name">Nanoweb Light 12-53</p><p class="price">$14.99</p></div>
<div class="card"><div class="thumb th2"></div><p class="name">Optiweb Custom Light</p><p class="price">$13.99</p></div>
<div class="card"><div class="thumb th3"></div><p class="name">Polyweb Medium 13-56</p><p class="price">$15.99</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #090808; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #090808; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #5d5d65; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #003399; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: transparent; color: #ffffff;
border: 1px solid #003399; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #090808;
border: 1px solid #090808; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5d5d65; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ffc60b; color: #090808;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; background:#090808; color:#dedede; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:#fff;}
.navlinks span:first-child{color:#ffc60b;}
.hero{height:280px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 30%,#1a1a1a,#090808 75%);}
.heroText{text-align:center;z-index:1;}
.heroText h1{font-size:32px;font-weight:700;color:#fff;margin:0 0 10px;}
.heroText p{font-size:14px;color:#dedede;opacity:0.8;margin:0 0 18px;}
.playbtn{width:64px;height:64px;border-radius:50%;background:#da532c;margin:0 auto 16px;position:relative;}
.playbtn:before{content:'';position:absolute;left:26px;top:20px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff;}
.sec{padding:20px 32px 0;}
.secTitle{font-size:16px;font-weight:600;color:#fff;margin-bottom:12px;text-transform:uppercase;letter-spacing:0.5px;}
.grid{display:flex;gap:14px;}
.card{width:150px;background:#fff;border-radius:12px;padding:8px;}
.thumb{aspect-ratio:2/3;height:130px;border-radius:8px;position:relative;overflow:hidden;}
.badge{position:absolute;top:6px;left:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;background:#ffc60b;color:#121212;padding:2px 6px;border-radius:2px;}
.ctitle{font-size:14px;font-weight:600;color:#121212;margin-top:8px;}
.year{font-size:12px;color:#5d5d65;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#5d5d65;border-top:1px solid #1a1a1a;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Well GO Usa</div>
<div class="navlinks"><span>Action</span><span>Martial Arts</span><span>Thriller</span><span>New Releases</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="playbtn"></div>
<h1>Watch the Trailer</h1>
<p>Genre cinema, catalogued for the fans who never stopped watching.</p>
</div>
</div>
<div class="sec">
<div class="secTitle">Now Streaming</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#003399,#090808)"><div class="badge">New</div></div><div class="ctitle">Iron Fury</div><div class="year">2024</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#5d5d65,#090808)"></div><div class="ctitle">Silent Blade</div><div class="year">2023</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#da532c,#090808)"></div><div class="ctitle">Midnight Strike</div><div class="year">2022</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#003399,#5d5d65)"></div><div class="ctitle">The Long Fall</div><div class="year">2021</div></div>
</div>
</div>
<div class="footer"><span>© A Catalog Of Genre Cinema</span><span>About · Contact</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #004B8D; color: #FFFFFF;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #FFFFFF; color: #004B8D;
border: 1px solid #004B8D; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; background: #EEEEEE; color: #666666;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#004B8D;}
.logo{font-size:18px;font-weight:700;color:#fff;letter-spacing:.3px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;color:#cfe0f0;}
.navcta{background:#fff;color:#004B8D;font-size:11px;font-weight:700;padding:8px 14px;border-radius:2px;}
.hero{height:210px;display:flex;background:#EEEEEE;border-bottom:1px solid #DDDDDD;}
.herotext{width:440px;padding:26px 36px;display:flex;flex-direction:column;justify-content:center;}
.badgerow{display:flex;gap:8px;margin-bottom:10px;}
.mini{font-size:10px;font-weight:700;color:#004B8D;border:1px solid #99BFD8;background:#fff;padding:3px 8px;border-radius:2px;}
.h1{font-size:23px;font-weight:700;color:#1A1A1A;line-height:1.3;margin:0 0 8px;}
.sub{font-size:13px;color:#666666;margin:0 0 14px;max-width:340px;}
.btn{width:170px;text-align:center;background:#004B8D;color:#fff;font-size:12px;font-weight:700;padding:10px 0;border-radius:2px;}
.heroimg{flex:1;position:relative;background:#fff;}
.scale{position:absolute;bottom:30px;left:60px;width:140px;height:70px;background:#fff;border:2px solid #1A1A1A;border-radius:3px;}
.scale:before{content:'';position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:70px;height:16px;background:#004B8D;border-radius:2px 2px 0 0;}
.display{position:absolute;top:14px;left:20px;right:20px;height:20px;background:#1A1A1A;border-radius:2px;}
.certtag{position:absolute;top:24px;right:34px;background:#C8102E;color:#fff;font-size:10px;font-weight:700;padding:5px 10px;border-radius:2px;}
.spectable{display:flex;gap:1px;background:#DDDDDD;}
.speccell{flex:1;background:#F5F5F5;text-align:center;padding:8px;}
.speclabel{font-size:9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#666666;}
.specvalue{font-size:12px;color:#1A1A1A;margin-top:2px;font-weight:600;}
.sec{padding:16px 36px 0;}
.sectitle{font-size:13px;font-weight:700;text-transform:uppercase;color:#1A1A1A;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:154px;border:1px solid #DDDDDD;padding:9px;background:#fff;}
.thumb{height:88px;margin-bottom:8px;background:#EEEEEE;}
.pname{font-size:12px;font-weight:700;color:#1A1A1A;line-height:1.3;height:30px;overflow:hidden;}
.pmeta{font-size:10px;color:#666666;margin-top:3px;}
.pprice{font-size:12px;font-weight:700;color:#004B8D;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Ohaus</div>
<div class="navlinks"><span>Balances</span><span>Scales</span><span>Pipettes</span><span>Calibration</span></div>
<div class="navcta">Request Certificate</div>
</div>
<div class="hero">
<div class="herotext">
<div class="badgerow"><span class="mini">GLP / GMP</span><span class="mini">CLASS E TRACEABLE</span></div>
<div class="h1">Precision instruments, traceable to the standard.</div>
<div class="sub">Analytical balances and scales calibrated to documented reference standards.</div>
<div class="btn">View Product Line</div>
</div>
<div class="heroimg"><div class="scale"><div class="display"></div></div><div class="certtag">Calibration Cert.</div></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Readability</div><div class="specvalue">0.1 mg</div></div>
<div class="speccell"><div class="speclabel">Capacity</div><div class="specvalue">220 g</div></div>
<div class="speccell"><div class="speclabel">Cert. Type</div><div class="specvalue">NIST Traceable</div></div>
<div class="speccell"><div class="speclabel">Warranty</div><div class="specvalue">2 Years</div></div>
</div>
<div class="sec">
<div class="sectitle">Analytical Balances</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#EEEEEE,#fff)"></div><div class="pname">Adventurer AX Analytical</div><div class="pmeta">Class E · 220g</div><div class="pprice">$2,145.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#EEEEEE,#fff)"></div><div class="pname">Pioneer PX Precision</div><div class="pmeta">Class II · 4200g</div><div class="pprice">$895.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#EEEEEE,#fff)"></div><div class="pname">Explorer Semi-Micro</div><div class="pmeta">Class E · 120g</div><div class="pprice">$3,650.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#EEEEEE,#fff)"></div><div class="pname">Calibration Weight Set</div><div class="pmeta">NIST Class 1</div><div class="pprice">$410.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #dedede; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #a6ffa5; color: #121212;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #eb001b; color: #ffffff;
border: 1px solid #a6ffa5; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #1c1c1e; color: #dedede;
border: 1px solid #151516; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #dedede; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #a6ffa5; color: #121212;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121212; font-family:'Noto Sans Display','Helvetica Neue',Arial,sans-serif; color:#dedede; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #3a3a3c;}
.logo{font-size:22px;font-weight:600;letter-spacing:-0.5px;color:#a6ffa5;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.navlinks .on{color:#a6ffa5;}
.navlinks span{color:#9e9e9e;}
.hero{height:210px;display:flex;align-items:center;padding:0 32px;background:radial-gradient(circle at 75% 50%,#1c1c1e,#121212 70%);}
.h1{font-size:28px;font-weight:600;letter-spacing:-0.5px;line-height:1.25;margin:0 0 12px;color:#fff;width:420px;}
.sub{font-size:14px;color:#dedede;margin:0 0 18px;width:380px;}
.btn{display:inline-block;background:#a6ffa5;color:#121212;font-size:14px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;padding:12px 24px;border-radius:4px;}
.reel{position:absolute;right:60px;top:30px;width:180px;height:150px;background:linear-gradient(160deg,#2bb34b,#121212 70%);border-radius:4px;}
.tabs{display:flex;gap:0;padding:16px 32px 0;border-bottom:1px solid #3a3a3c;}
.tab{font-size:13px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:#dedede;padding:10px 16px;}
.tab.on{color:#a6ffa5;border-bottom:2px solid #a6ffa5;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:150px;background:#1f1f21;border-radius:4px;overflow:hidden;position:relative;}
.badge{position:absolute;top:6px;left:6px;font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:2px;}
.badge.new{background:#a6ffa5;color:#121212;}
.badge.lim{background:#eb001b;color:#fff;}
.thumb{height:96px;}
.body{padding:8px 12px 12px;}
.pname{font-size:14px;font-weight:500;margin-bottom:6px;}
.pprice{font-size:16px;color:#a6ffa5;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;border-top:1px solid #3a3a3c;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;color:#dedede;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Synapse Films</div>
<div class="navlinks"><span class="on">New</span><span>Steelbooks</span><span>Restorations</span><span>Pre-Order</span></div>
</div>
<div class="hero">
<div>
<div class="h1">4K restorations of horror and cult cinema.</div>
<div class="sub">Grain-true scans, limited steelbooks, and the films the mainstream forgot.</div>
<div class="btn">Shop New Restorations</div>
</div>
<div class="reel"></div>
</div>
<div class="tabs"><div class="tab on">All Titles</div><div class="tab">Giallo</div><div class="tab">Slasher</div><div class="tab">Import</div></div>
<div class="grid">
<div class="card"><span class="badge new">New Restoration</span><div class="thumb" style="background:linear-gradient(150deg,#2bb34b,#121212);"></div><div class="body"><div class="pname">The Crimson Cut</div><div class="pprice">$34.99</div></div></div>
<div class="card"><span class="badge lim">Limited Edition</span><div class="thumb" style="background:linear-gradient(150deg,#eb001b,#121212);"></div><div class="body"><div class="pname">Blood Moon Steelbook</div><div class="pprice">$49.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#00fced,#121212);"></div><div class="body"><div class="pname">Nightshade Archive</div><div class="pprice">$27.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#218ac1,#121212);"></div><div class="body"><div class="pname">The Hollow Reel</div><div class="pprice">$22.99</div></div></div>
</div>
<div class="footer"><span>© Cult Cinema, Preserved</span><span>Region Guide · Pre-Order Policy</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; letter-spacing: 0.01em; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.33; letter-spacing: 0.12em; background: #8e5c84; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.33; letter-spacing: 0.12em; background: #ffffff; color: #121212;
border: 1px solid #8e5c84; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.45; letter-spacing: 0.05em; background: #feaf3f; color: #121212;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Irene Neuwirth</title>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;font-family:Georgia,'Times New Roman',serif;color:#2e2e2e;}
*{box-sizing:border-box;}
.nav{position:absolute;top:0;left:0;width:960px;height:72px;background:#fff;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:center;position:relative;}
.logo{font-size:16px;letter-spacing:3px;text-transform:uppercase;color:#121212;}
.navlinks{position:absolute;left:36px;display:flex;gap:22px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:#121212;}
.navicons{position:absolute;right:36px;font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;letter-spacing:1px;color:#6b6b6b;}
.hero{position:absolute;top:72px;left:0;width:960px;height:230px;background:#f9f7f5;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;}
.hero h1{font-size:38px;font-weight:400;letter-spacing:0.02em;color:#121212;margin:0 0 12px 0;}
.hero p{font-family:'Helvetica Neue',Arial,sans-serif;font-size:14px;color:#2e2e2e;width:440px;margin:0 0 18px 0;}
.cta{background:#feaf3f;color:#121212;font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.12em;border-radius:4px;padding:14px 32px;display:inline-block;}
.filterrow{position:absolute;top:326px;left:36px;width:888px;height:34px;display:flex;gap:10px;font-family:'Helvetica Neue',Arial,sans-serif;}
.pill{border:1px solid #dedede;border-radius:9999px;padding:8px 18px;font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:#2e2e2e;}
.pill.active{background:#8e5c84;color:#fff;border:none;}
.grid{position:absolute;top:378px;left:36px;width:888px;height:238px;display:flex;gap:22px;}
.card{width:204px;}
.imgbox{width:204px;height:200px;position:relative;}
.imgbox.a{background:linear-gradient(160deg,#b8828e,#8e5c84);}
.imgbox.b{background:linear-gradient(160deg,#feaf3f,#d98e1a);}
.imgbox.c{background:linear-gradient(160deg,#0073a2,#4696b8);}
.imgbox.d{background:linear-gradient(160deg,#b74305,#b22c29);}
.gembadge{position:absolute;top:10px;left:10px;background:#feaf3f;color:#121212;font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;border-radius:9999px;padding:4px 10px;}
.title{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;color:#121212;margin:10px 0 4px;letter-spacing:0.02em;}
.price{font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;color:#121212;letter-spacing:0.02em;}
</style>
<div class="nav">
<div class="navlinks"><span>Collections</span><span>Rainbow</span><span>Opal</span></div>
<div class="logo">Irene Neuwirth</div>
<div class="navicons">Search · Bag</div>
</div>
<div class="hero">
<h1>Handmade in Los Angeles</h1>
<p>Each piece is designed around the stone — hand-set tourmalines, opals, and sapphires in warm gold.</p>
<div class="cta">Explore Stones</div>
</div>
<div class="filterrow">
<div class="pill active">All</div>
<div class="pill">Tourmaline</div>
<div class="pill">Opal</div>
<div class="pill">Sapphire</div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox a"><div class="gembadge">Tourmaline</div></div>
<div class="title">Rainbow Cluster Ring</div>
<div class="price">$4,850</div>
</div>
<div class="card">
<div class="imgbox b"><div class="gembadge">One of a Kind</div></div>
<div class="title">Opal Drop Earrings</div>
<div class="price">Inquire</div>
</div>
<div class="card">
<div class="imgbox c"></div>
<div class="title">Turquoise Pendant</div>
<div class="price">$2,200</div>
</div>
<div class="card">
<div class="imgbox d"></div>
<div class="title">Garnet Signet Ring</div>
<div class="price">$3,100</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff6700; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff6700; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #024d58; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6700; color: #024d58;
border: 1px solid #024d58; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff6700; color: #f5f5f5;
border: 1px solid #fd7e27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d7630e; color: #024d58;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#2d3033; box-sizing:border-box;
font-family:"Poppins", "Noto Sans TC", -apple-system, Arial, sans-serif; }
* { box-sizing:border-box; }
.darkbar { background:#1e2022; color:#fff; font-size:11px; text-align:center; padding:6px 0; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:500; }
.navlinks { display:flex; gap:20px; font-size:14px; }
.navlinks span.on { color:#ff6700; }
.right { display:flex; gap:10px; align-items:center; }
.login-pill { color:#2d3033; font-size:13px; }
.hero { text-align:center; padding:16px 40px 14px; }
.hero h1 { font-size:32px; font-weight:500; margin:0 0 16px; }
.tabs { display:flex; justify-content:center; gap:6px; margin-bottom:16px; }
.tab { border-radius:40px; height:40px; padding:0 22px; display:flex; align-items:center; font-size:15px; }
.tab.on { background:#ff6700; color:#fff; }
.tab.off { color:#838d9c; }
.cards { display:flex; gap:14px; padding:0 40px; }
.card { flex:1; background:#e3e7ee; border-radius:20px; height:170px; padding:14px; display:flex;
flex-direction:column; justify-content:flex-end; }
.card .name { font-size:14px; color:#2d3033; margin-bottom:6px; }
.card .price { font-size:16px; color:#ff6700; font-weight:600; }
.band { margin-top:16px; background:#f5f7f8; padding:16px 40px; display:flex; justify-content:space-between; align-items:center; }
.band h2 { font-size:18px; font-weight:500; margin:0 0 4px; }
.band p { font-size:12px; color:#515a68; margin:0; }
.band .badge { background:#ff6700; color:#fff; border-radius:9999px; padding:4px 12px; font-size:12px; }
footer { position:absolute; bottom:0; left:0; right:0; background:#fff; border-top:1px solid #e3e7ee;
padding:10px 40px; display:flex; justify-content:space-between; font-size:11px; color:#838d9c; }
</style></head>
<body>
<div class="darkbar">Open Possible · 5G plans now available nationwide</div>
<nav>
<div class="brand">Taiwan Mobile</div>
<div class="navlinks"><span class="on">Personal</span><span>Family</span><span>Business</span></div>
<div class="right"><span class="login-pill">Log in</span></div>
</nav>
<div class="hero">
<h1>What plan are you looking for today?</h1>
<div class="tabs">
<div class="tab on">Phone Plans</div>
<div class="tab off">Devices</div>
<div class="tab off">Fiber</div>
<div class="tab off">SIM Only</div>
</div>
</div>
<div class="cards">
<div class="card"><span class="name">Video Bundle Plan</span><span class="price">Popular</span></div>
<div class="card"><span class="name">Speed & Value Plan</span><span class="price">Bestseller</span></div>
<div class="card"><span class="name">Exclusive Access Plan</span><span class="price">New</span></div>
</div>
<div class="band">
<div><h2>All of digital life, one monthly plan</h2><p>Streaming, gaming, and roaming bundled together.</p></div>
<div class="badge">Limited offer</div>
</div>
<footer><span>© Taiwan Mobile</span><span>Taiwan Mobile · myfone · Support</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3efe9; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3efe9; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.25px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.27; letter-spacing: 0.25px; background: #2b361b; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.27; letter-spacing: 0.25px; background: #f3efe9; color: #2b361b;
border: 1px solid #2b361b; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f3efe9; color: #4f4f4f;
border: 1px solid #bbb8b3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #478947; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f3efe9; font-family:'Rubik',-apple-system,system-ui,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:64px;background:#f3efe9;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:19px;font-weight:600;color:#2b361b;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#121212;}
.navlinks span:nth-child(1){color:#2b361b;border-bottom:2px solid #2b361b;padding-bottom:20px;}
.hero{height:270px;display:flex;align-items:center;padding:0 40px;}
.herotext{width:420px;}
.herotext h1{font-size:32px;font-weight:600;letter-spacing:-.5px;line-height:1.25;margin:0 0 14px;}
.herotext p{font-size:15px;color:#4f4f4f;margin:0 0 18px;max-width:340px;}
.btn{display:inline-block;background:#2b361b;color:#fff;font-size:15px;font-weight:500;letter-spacing:.25px;padding:12px 24px;border-radius:8px;}
.heroart{flex:1;height:190px;border-radius:12px;background:linear-gradient(135deg,#f2bdb6,#2b361b 65%);}
.grid{display:flex;gap:14px;padding:16px 30px 0;}
.card{width:210px;background:#fff;border-radius:12px;padding:14px;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#478947;color:#fff;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;border-radius:4px;padding:2px 8px;}
.thumb{height:100px;background:#f3efe9;border-radius:8px;margin-bottom:8px;}
.ctitle{font-size:16px;font-weight:600;margin:0;}
.cprice{font-size:16px;color:#4f4f4f;margin-top:4px;}
.subtog{display:inline-flex;background:#f5f5f5;border-radius:9999px;padding:2px;margin-top:8px;font-size:11px;}
.subtog span{padding:4px 8px;border-radius:9999px;}
.subtog span.on{background:#b1e4b7;color:#2b361b;font-weight:600;}
.footer{position:absolute;bottom:0;left:0;right:0;height:96px;background:#2b361b;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Parasol</div>
<div class="navlinks"><span>Diapers</span><span>Wipes</span><span>Skincare</span><span>Bundles</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Gentle on skin. Strong on protection.</h1>
<p>Plant-based baby care made from the forest floor, not the toy aisle.</p>
<div class="btn">Shop Diapers</div>
</div>
<div class="heroart"></div>
</div>
<div class="grid">
<div class="card"><div class="badge">Save 15%</div><div class="thumb"></div><div class="ctitle">Overnight Diapers, Size 3</div><div class="cprice">$29.99</div><div class="subtog"><span class="on">Subscribe</span><span>One-Time</span></div></div>
<div class="card"><div class="thumb" style="background:#f2bdb6;"></div><div class="ctitle">Sensitive Baby Wipes</div><div class="cprice">$6.99</div><div class="subtog"><span>One-Time</span><span class="on">Subscribe</span></div></div>
<div class="card"><div class="thumb" style="background:#b1e3b7;"></div><div class="ctitle">Diaper Rash Balm</div><div class="cprice">$14.99</div><div class="subtog"><span class="on">One-Time</span><span>Subscribe</span></div></div>
<div class="card"><div class="thumb" style="background:#3c9342;"></div><div class="ctitle">Newborn Starter Bundle</div><div class="cprice">$54.99</div><div class="subtog"><span>One-Time</span><span class="on">Subscribe</span></div></div>
</div>
<div class="footer"><span>© Parasol Co.</span><span>Shop Our Story Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.38; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #1c1c1c; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #1c1c1c;
border: 1px solid #1c1c1c; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; letter-spacing: 0.2px; background: #cc0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Lato','Helvetica Neue',Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #efefef;}
.logo{font-family:'Nunito Sans',sans-serif;font-size:20px;font-weight:700;letter-spacing:-0.3px;color:#1c1c1c;}
.navlinks{display:flex;gap:28px;font-size:14px;color:#121212;}
.navlinks span:first-child{font-weight:700;}
.cart{width:40px;height:40px;border-radius:8px;background:#1c1c1c;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.hero{height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#efefef;text-align:center;}
.hero h1{font-family:'Nunito Sans',sans-serif;font-size:34px;font-weight:700;letter-spacing:-0.5px;margin:0 0 8px;color:#121212;}
.hero p{font-size:15px;color:#333;margin:0;}
.grid{display:flex;gap:16px;padding:24px 32px 0;}
.card{width:204px;border:1px solid #efefef;border-radius:12px;padding:16px;}
.thumb{height:120px;border-radius:8px;margin-bottom:12px;background:#efefef;position:relative;overflow:hidden;}
.thumb .bez{position:absolute;border-radius:9999px;border:3px solid #1c1c1c;}
.b1{width:70px;height:70px;top:25px;left:25px;}
.b2{width:60px;height:8px;top:56px;left:70px;background:#9a9a9a;border:none;border-radius:4px;}
.ptitle{font-family:'Lato',sans-serif;font-size:16px;font-weight:700;color:#121212;margin-bottom:6px;}
.pprice{font-family:'Nunito Sans',sans-serif;font-size:18px;font-weight:700;color:#121212;}
.pcompare{font-size:13px;color:#717171;text-decoration:line-through;margin-left:6px;}
.cta{margin-top:10px;height:36px;border-radius:8px;background:#1c1c1c;color:#fff;font-size:12px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;}
.footer{height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#1c1c1c;color:#fff;font-size:12px;}
.footer span{opacity:0.75;}
</style>
<div class="nav">
<div class="logo">Lululook</div>
<div class="navlinks"><span>New</span><span>Stands</span><span>Mounts</span><span>Cables</span></div>
<div class="cart">2</div>
</div>
<div class="hero">
<h1>Machined for the desk you deserve.</h1>
<p>Aluminum accessories engineered like instruments, not accessories.</p>
</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="bez b1"></div><div class="bez b2"></div></div><div class="ptitle">Aluminum iPad Stand</div><div class="pprice">$59</div><div class="cta">Add to Cart</div></div>
<div class="card"><div class="thumb"><div class="bez b1" style="left:70px;"></div></div><div class="ptitle">MagSafe Desk Mount</div><div class="pprice">$79<span class="pcompare">$95</span></div><div class="cta">Add to Cart</div></div>
<div class="card"><div class="thumb"><div class="bez b1" style="width:50px;height:50px;top:35px;left:77px;"></div></div><div class="ptitle">Cable Management Tray</div><div class="pprice">$39</div><div class="cta">Add to Cart</div></div>
<div class="card"><div class="thumb"><div class="bez b1" style="width:90px;height:40px;border-radius:12px;top:40px;left:57px;"></div></div><div class="ptitle">Laptop Riser Pro</div><div class="pprice">$89</div><div class="cta">Add to Cart</div></div>
</div>
<div class="footer"><span>© Lululook</span><span>Precision aluminum, made to disappear</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #dddddd; }
.brand { font-size:20px; font-weight:700; letter-spacing:-0.5px; margin:0; }
.navlinks { display:flex; gap:32px; font-size:14px; color:#707070; }
.cta { background:#000000; color:#ffffff; border:1px solid #000000; border-radius:20px;
padding:10px 24px 9px; font-weight:700; font-size:14px; height:40px; display:flex; align-items:center; }
.hero { padding:40px 40px 24px; }
.badge { display:inline-block; background:#000000; color:#ffffff; border-radius:20px; padding:4px 12px;
font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:16px; }
.hero h1 { font-size:44px; font-weight:700; line-height:1.05; margin:0 0 12px; letter-spacing:-1px; max-width:640px; }
.hero p { font-size:16px; color:#707070; margin:0 0 20px; max-width:460px; line-height:1.4; }
.row { display:flex; gap:12px; }
.outl { background:transparent; color:#000000; border:1px solid #000000; border-radius:20px;
padding:10px 24px 9px; font-weight:700; font-size:14px; height:40px; display:flex; align-items:center; }
.tabs { display:flex; gap:8px; padding:0 40px 20px; }
.tab { font-size:18px; font-weight:700; padding:4px 0; color:#a0a0a0; }
.tab.sel { color:#000000; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 40px; }
.card { background:#f7f7f7; border-radius:20px; padding:24px 20px; height:190px; display:flex; flex-direction:column; }
.imgwrap { width:100%; height:76px; background:#ffffff; border-radius:20px; margin-bottom:14px; }
.card h3 { font-size:16px; font-weight:700; margin:0 0 6px; }
.card p { font-size:13px; color:#707070; margin:0; line-height:1.4; }
</style></head>
<body>
<nav>
<p class="brand">Samsung</p>
<div class="navlinks"><span>Products</span><span>AI Products</span><span>Support</span><span>Brand</span></div>
<button class="cta">Get started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Human-driven innovation, made real</h1>
<p>Devices, services, and an ecosystem built around people — not the other way around.</p>
<div class="row">
<button class="cta">Get started</button>
<button class="outl">Learn more</button>
</div>
</section>
<div class="tabs">
<span class="tab sel">Galaxy AI</span>
<span class="tab">SmartThings</span>
<span class="tab">One UI</span>
</div>
<section class="cards">
<div class="card"><div class="imgwrap"></div><h3>One device, every task</h3><p>From capture to compose, seamlessly across your day.</p></div>
<div class="card"><div class="imgwrap"></div><h3>Built for real people</h3><p>Interfaces tuned for comfort across every Galaxy device.</p></div>
<div class="card"><div class="imgwrap"></div><h3>Connected by design</h3><p>SmartThings ties your devices into one quiet system.</p></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.1; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #0055aa; color: #ffffff;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #0055aa;
border: 1px solid #0055aa; border-radius: 6px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #e53e3e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.strip{height:36px;background:#0055aa;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e2e4e8;}
.logo{font-size:18px;font-weight:700;color:#1a1a1a;}
.searchbar{width:280px;height:36px;border-radius:6px;background:#f5f6f8;border:1px solid #e2e4e8;display:flex;align-items:center;padding:0 14px;font-size:13px;color:#6b7280;}
.hero{height:220px;background:#f5f6f8;display:flex;align-items:center;padding:0 32px;gap:30px;}
.herotxt{max-width:400px;}
.h1{font-size:34px;font-weight:700;letter-spacing:-0.5px;margin:0 0 10px;line-height:1.2;}
.sub{font-size:15px;color:#333;line-height:1.5;margin:0 0 18px;}
.btn{display:inline-block;background:#0055aa;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;border-radius:6px;}
.cableimg{width:170px;height:170px;border-radius:10px;background:linear-gradient(150deg,#99c2e8,#0055aa 60%,#1a1a1a);}
.trust{display:flex;gap:20px;padding:14px 32px;background:#f5f6f8;border-top:1px solid #e2e4e8;border-bottom:1px solid #e2e4e8;font-size:12px;color:#6b7280;}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:150px;border:1px solid #e2e4e8;border-radius:6px;padding:10px;position:relative;box-shadow:0 1px 4px rgba(0,0,0,0.08);}
.thumb{height:90px;border-radius:4px;background:linear-gradient(135deg,#0055aa,#1a1a1a);margin-bottom:6px;}
.badge{position:absolute;top:6px;left:6px;background:#e53e3e;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;padding:2px 6px;border-radius:2px;}
.ctitle{font-size:13px;font-weight:600;}
.cprice{font-size:16px;font-weight:700;margin-top:4px;}
</style>
<div class="wrap">
<div class="strip">Free shipping on orders over $25</div>
<div class="nav">
<div class="logo">Mogix</div>
<div class="searchbar">Search USB-C, Lightning, chargers...</div>
</div>
<div class="hero">
<div class="herotxt">
<div class="h1">Specs that actually sell.</div>
<p class="sub">Cable gauge, wattage, compatibility — the details that matter, up front.</p>
<div class="btn">Add to Cart</div>
</div>
<div class="cableimg"></div>
</div>
<div class="trust">Free Shipping · 30-Day Returns · Secure Checkout · 12-Month Warranty</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge">Sale</span></div><div class="ctitle">USB-C to USB-C 100W</div><div class="cprice">$12.99</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">65W GaN Wall Charger</div><div class="cprice">$24.99</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">MagSafe Compatible Case</div><div class="cprice">$18.99</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Lightning Braided Cable</div><div class="cprice">$14.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #303030;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #303030;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.35; margin: 0; color: #303030; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.2px; background: #1f3521; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.2px; background: #f7f7f7; color: #303030;
border: 1px solid #1f3521; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #303030;
border: 1px solid #c5c5c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #cdec85; color: #303030;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:flex; flex-direction:column; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f7; color:#2b2b2b; box-sizing:border-box;
font-family:'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 38px;
border-bottom:1px solid #dedede; }
.brand { font-size:19px; font-weight:700; color:#1f3521; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:13px; font-weight:500; color:#2b2b2b; }
.cart { background:#1f3521; color:#fff; font-size:12px; font-weight:500; padding:8px 16px; border-radius:8px; }
.hero { display:flex; align-items:center; gap:32px; padding:26px 38px 20px; }
.htext { max-width:400px; }
.htext .kicker { font-size:11px; font-weight:700; color:#cc6328; text-transform:uppercase; letter-spacing:0.8px; margin-bottom:10px; }
.htext h1 { font-family:'Georgia','Times New Roman',serif; font-size:30px; font-weight:700; color:#1f3521;
margin:0 0 12px; line-height:1.3; }
.htext p { font-size:14px; color:#2b2b2b; line-height:1.5; margin:0 0 16px; }
.btn { display:inline-block; background:#1f3521; color:#fff; font-size:14px; font-weight:500; padding:11px 22px; border-radius:8px; }
.heroimg { width:260px; height:170px; border-radius:12px; flex-shrink:0;
background:linear-gradient(150deg,#cdec85,#1f3521 75%); position:relative; }
.heroimg::after { content:'Made with Plants'; position:absolute; bottom:12px; left:14px; font-size:11px; font-weight:700;
color:#fff; background:rgba(0,0,0,0.25); padding:4px 10px; border-radius:999px; }
.section { padding:0 38px; }
.section h2 { font-family:'Georgia',serif; font-size:19px; font-weight:700; color:#1f3521; margin:0 0 14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { background:#ffffff; border-radius:12px; padding:12px; }
.cover { height:80px; border-radius:8px; margin-bottom:8px; }
.g1 .cover { background:#cdec85; }
.g2 .cover { background:#aaf2f3; }
.g3 .cover { background:#cc6328; }
.g4 .cover { background:#bf339d; }
.card .t { font-size:13px; font-weight:500; color:#303030; margin:0 0 4px; }
.card .p { font-size:13px; font-weight:700; color:#1f3521; }
.trust { margin-top:auto; flex-shrink:0; display:flex; padding:12px 38px; background:#eeeeee; }
.trust span { flex:1; text-align:center; font-size:11px; font-weight:500; color:#1f3521; }
</style></head>
<body>
<nav>
<div class="brand">Grove Collaborative</div>
<div class="navlinks"><span>Cleaning</span><span>Personal Care</span><span>Home</span><span>Bundles</span></div>
<div class="cart">Cart · 5</div>
</nav>
<div class="hero">
<div class="htext">
<div class="kicker">Plastic-free since day one</div>
<h1>Home essentials, made with plants.</h1>
<p>A well-edited pantry of natural cleaning and personal-care products — sustainability that whispers, not shouts.</p>
<span class="btn">Build Your Bundle</span>
</div>
<div class="heroimg"></div>
</div>
<div class="section">
<h2>Shop the Essentials</h2>
<div class="grid">
<div class="card g1"><div class="cover"></div><div class="t">Multi-Surface Spray</div><div class="p">$5.95</div></div>
<div class="card g2"><div class="cover"></div><div class="t">Dish Soap, Lavender</div><div class="p">$4.95</div></div>
<div class="card g3"><div class="cover"></div><div class="t">Hand Wash Set</div><div class="p">$12.95</div></div>
<div class="card g4"><div class="cover"></div><div class="t">Laundry Detergent</div><div class="p">$18.95</div></div>
</div>
</div>
<div class="trust"><span>Carbon Neutral Shipping</span><span>Made in USA</span><span>30-Day Guarantee</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #989898; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #024520; color: #ffffff;
border: none; border-radius: 10px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #024520;
border: 1px solid #024520; border-radius: 10px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 10px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #989898; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #dd4de6; color: #ffffff;
border-radius: 6px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Frame IT All Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Alegreya Sans',Georgia,serif; background:#ffffff; color:#121212; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
.nav { background:#024520; height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.logo { color:#fff; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:19px; }
.navlinks { display:flex; gap:24px; color:#e7eedd; font-family:Poppins,sans-serif; font-size:12.5px; font-weight:600; }
.navcta { background:#8fc746; color:#182400; font-family:Poppins,sans-serif; font-weight:600; font-size:12.5px; padding:9px 18px; border-radius:10px; }
.hero { display:flex; padding:32px 40px; gap:36px; align-items:center; }
.hero-copy { flex:1; }
.hero h1 { font-family:'Bricolage Grotesque',sans-serif; font-size:34px; font-weight:700; letter-spacing:-.3px; line-height:1.2; margin:0 0 12px; color:#024520; }
.hero p { font-size:15px; color:#333; line-height:1.6; max-width:410px; margin:0 0 18px; }
.btn-primary { background:#024520; color:#fff; font-family:Poppins,sans-serif; font-weight:600; font-size:13px; padding:12px 22px; border-radius:10px; display:inline-block; }
.hero-visual { flex:1; height:200px; background:#e7eedd; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.raisedbed { width:200px; height:100px; background:linear-gradient(160deg,#4f3b2a,#024520); border-radius:8px; position:relative; }
.raisedbed::after { content:''; position:absolute; top:8px; left:8px; right:8px; height:20px; background:#8fc746; border-radius:4px; opacity:.7; }
.promo { background:#dd4de6; color:#fff; text-align:center; padding:8px; font-family:Poppins,sans-serif; font-weight:600; font-size:12px; }
.section { padding:22px 40px; flex:1; }
.section h2 { font-family:'Bricolage Grotesque',sans-serif; font-size:20px; font-weight:700; margin:0 0 16px; color:#024520; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#fff; border:1px solid #dedede; border-radius:10px; padding:14px; }
.card .ph { height:74px; border-radius:10px; margin-bottom:10px; background:linear-gradient(160deg,#8fc746,#024520); }
.card .name { font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:13.5px; margin-bottom:3px; }
.card .desc { font-size:11.5px; color:#4f3b2a; margin-bottom:8px; }
.card .pricerow { display:flex; justify-content:space-between; align-items:center; }
.card .price { font-family:Poppins,sans-serif; font-weight:600; font-size:14px; color:#024520; }
.card .buy { background:#8fc746; color:#182400; font-family:Poppins,sans-serif; font-size:11px; font-weight:600; padding:6px 12px; border-radius:10px; }
</style>
<div class="page">
<div class="promo">🌿 Spring Sale — Raised Beds 20% Off, Limited Time</div>
<div class="nav">
<div class="logo">Frame IT All</div>
<div class="navlinks"><span>Raised Beds</span><span>Greenhouses</span><span>Trellises</span><span>Guides</span></div>
<div class="navcta">Shop All</div>
</div>
<div class="hero">
<div class="hero-copy">
<h1>Built to mirror what<br>you're planting in.</h1>
<p>Cedar-grounded raised beds and galvanized greenhouse frames for growers who read, measure, and plan before they buy.</p>
<div class="btn-primary">Shop Raised Beds</div>
</div>
<div class="hero-visual"><div class="raisedbed"></div></div>
</div>
<div class="section">
<h2>Best Selling Beds</h2>
<div class="grid">
<div class="card"><div class="ph"></div><div class="name">Cedar Craft Kit</div><div class="desc">4ft x 8ft x 11in</div><div class="pricerow"><span class="price">$219.00</span><span class="buy">Add</span></div></div>
<div class="card"><div class="ph" style="background:linear-gradient(160deg,#aadddd,#024520);"></div><div class="name">Steel Greenhouse Frame</div><div class="desc">Galvanized · 6ft x 8ft</div><div class="pricerow"><span class="price">$389.00</span><span class="buy">Add</span></div></div>
<div class="card"><div class="ph" style="background:linear-gradient(160deg,#8dc744,#4f3b2a);"></div><div class="name">Trellis Arch Kit</div><div class="desc">Cedar + Wire Mesh</div><div class="pricerow"><span class="price">$149.00</span><span class="buy">Add</span></div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #0054a6; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #0054a6;
border: 1px solid #0054a6; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #e87722; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#0054a6;}
.logo{font-size:19px;font-weight:700;color:#fff;letter-spacing:0.3px;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#cfe0f2;}
.search{background:#fff;color:#717171;font-size:11px;padding:7px 14px;border-radius:2px;}
.hero{height:210px;display:flex;align-items:center;padding:0 40px;background:#f5f5f5;}
.herotext{max-width:400px;}
.h1{font-size:32px;font-weight:600;line-height:1.2;color:#1a1a1a;margin:0 0 10px;}
.sub{font-size:13px;color:#333;line-height:1.5;margin:0 0 16px;max-width:320px;}
.btn{display:inline-block;background:#0054a6;color:#fff;font-size:13px;font-weight:600;padding:12px 26px;border-radius:4px;}
.oven{width:230px;height:150px;margin-left:auto;background:#eeeeee;border:1px solid #d9d9d9;border-radius:4px;position:relative;}
.oven:before{content:'';position:absolute;left:16px;top:16px;width:130px;height:118px;background:linear-gradient(160deg,#0054a6,#1a1a1a);border-radius:2px;}
.oven:after{content:'';position:absolute;right:16px;top:16px;bottom:16px;width:36px;background:#d9d9d9;}
.spectable{display:flex;gap:1px;background:#d9d9d9;margin:16px 40px 0;}
.speccell{flex:1;background:#f5f5f5;text-align:center;padding:10px;}
.speclabel{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;color:#717171;}
.specvalue{font-size:13px;color:#1a1a1a;margin-top:3px;font-weight:600;}
.grid{display:flex;gap:14px;padding:14px 40px 0;}
.card{width:196px;background:#fff;border:1px solid #d9d9d9;}
.thumb{height:80px;}
.cbody{padding:10px 12px;}
.model{font-size:10px;color:#717171;margin:0 0 3px;}
.ctitle{font-size:13px;font-weight:600;margin:0 0 4px;}
.cprice{font-size:14px;font-weight:700;color:#0054a6;margin:0;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#1a1a1a;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#cccccc;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Panasonic</div>
<div class="navlinks"><span>Kitchen</span><span>Home Appliances</span><span>Beauty & Personal Care</span></div>
<div class="search">Search products</div>
</div>
<div class="hero">
<div class="herotext">
<div class="h1">Engineered for the everyday.</div>
<div class="sub">Precision microwaves and toaster ovens, built on decades of consumer electronics craftsmanship.</div>
<div class="btn">Shop Kitchen</div>
</div>
<div class="oven"></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Capacity</div><div class="specvalue">1.6 cu ft</div></div>
<div class="speccell"><div class="speclabel">Power</div><div class="specvalue">1200W</div></div>
<div class="speccell"><div class="speclabel">Inverter</div><div class="specvalue">Yes</div></div>
<div class="speccell"><div class="speclabel">Warranty</div><div class="specvalue">2 Years</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0054a6,#1a1a1a)"></div><div class="cbody"><div class="model">NN-SN966S</div><div class="ctitle">Inverter Microwave</div><div class="cprice">$189.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e87722,#1a1a1a)"></div><div class="cbody"><div class="model">NB-G110P</div><div class="ctitle">FlashXpress Toaster Oven</div><div class="cprice">$139.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#717171,#0054a6)"></div><div class="cbody"><div class="model">SD-YR2550</div><div class="ctitle">Automatic Bread Maker</div><div class="cprice">$249.99</div></div></div>
</div>
<div class="footer"><span>2-Year Limited Warranty</span><span>Free Shipping on Orders $50+</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f7f5; color: #374151;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f7f5; color: #374151;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.35; margin: 0; color: #374151; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #c07859; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #f8f7f5; color: #374151;
border: 1px solid #c07859; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f7f5; color: #374151;
border: 1px solid #c8cacc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #805ad5; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f7f5; font-family:'Inter','Helvetica Neue',Arial,sans-serif; color:#374151; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #e5e5eb;}
.logo{font-family:'Ogg Text',Georgia,serif;font-size:22px;color:#374151;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;}
.hero{height:220px;display:flex;align-items:center;padding:0 40px;}
.herotext{width:420px;}
.herotext h1{font-family:'Ogg Text',Georgia,serif;font-size:36px;font-weight:400;line-height:1.25;margin:0 0 14px;letter-spacing:-.5px;}
.herotext p{font-size:15px;color:#4b5563;margin:0 0 16px;max-width:340px;line-height:1.5;}
.btn{display:inline-block;background:#c07859;color:#fff;font-size:15px;font-weight:600;letter-spacing:.2px;padding:12px 24px;border-radius:8px;}
.heroart{flex:1;height:170px;border-radius:12px;background:linear-gradient(135deg,#f2e9da,#c07859 70%);}
.quiz{margin:12px 30px 0;background:#f2e9da;border-radius:12px;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;}
.quiz .txt{font-family:'Ogg Text',Georgia,serif;font-size:16px;}
.dots{display:flex;gap:6px;}
.dot{width:8px;height:8px;border-radius:9999px;background:#cdcac2;}
.dot.on{background:#c07859;}
.grid{display:flex;gap:14px;padding:14px 30px 0;}
.card{width:210px;background:#fff;border-radius:8px;overflow:hidden;}
.thumb{height:96px;background:#f4f4f6;border-radius:8px 8px 0 0;}
.cbody{padding:10px 12px;}
.ctitle{font-family:'Ogg Text',Georgia,serif;font-size:17px;margin:0;}
.cprice{font-size:15px;color:#676986;margin-top:4px;}
.cta{display:inline-block;background:#c07859;color:#fff;font-size:12px;font-weight:600;border-radius:9999px;padding:5px 16px;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:88px;background:#f4f4f6;color:#676986;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Perelel</div>
<div class="navlinks"><div>Prenatal</div><div>Postpartum</div><div>Fertility</div><div>Take the Quiz</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Vitamins for every stage of you.</h1>
<p>Doctor-informed prenatal and postpartum vitamins built around your stage.</p>
<div class="btn">Take the Quiz</div>
</div>
<div class="heroart"></div>
</div>
<div class="quiz"><div class="txt">Step 2 of 4 — What stage are you in?</div><div class="dots"><div class="dot on"></div><div class="dot on"></div><div class="dot"></div><div class="dot"></div></div></div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="cbody"><div class="ctitle">Prenatal Pack</div><div class="cprice">$49/mo</div><div class="cta">Add</div></div></div>
<div class="card"><div class="thumb" style="background:#decde7;"></div><div class="cbody"><div class="ctitle">Postpartum Support</div><div class="cprice">$44/mo</div><div class="cta">Add</div></div></div>
<div class="card"><div class="thumb" style="background:#a27990;"></div><div class="cbody"><div class="ctitle">Fertility Support Pack</div><div class="cprice">$54/mo</div><div class="cta">Add</div></div></div>
</div>
<div class="footer"><span>© Perelel Health</span><span>Shop Science Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #2d293c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #2d293c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #2d293c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 300; line-height: 1.23; margin: 0; color: #808184; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #5b5378; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: transparent; color: #5b5378;
border: 1px solid #5b5378; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; background: #ffffff; color: #4c4d4f;
border: 1px solid #c4c4c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808184; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.27; letter-spacing: 1.2px; background: #00393b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#f7f7f7; color:#2d293c; box-sizing:border-box; font-family:'Museo Sans',-apple-system,system-ui,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;background:#ffffff;border-bottom:1px solid #d2d2d2;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.nav .logo{font-weight:500;font-size:15px;letter-spacing:.3px;}
.nav .links{display:flex;gap:20px;font-size:13px;font-weight:500;color:#808184;}
.nav .links span:first-child{color:#5b5378;}
.wrap{display:flex;height:576px;}
.left{width:400px;background:#2d293c;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;}
.dw{width:220px;height:220px;background:linear-gradient(160deg,#494260,#2d293c);border-radius:10px;box-shadow:0 16px 30px rgba(0,0,0,.3);position:relative;}
.dw::before{content:'';position:absolute;top:16px;left:16px;right:16px;height:8px;background:#5b5378;border-radius:4px;}
.dw::after{content:'';position:absolute;bottom:20px;left:20px;right:20px;height:130px;border:1px solid rgba(255,255,255,.2);border-radius:4px;}
.badge-eco{position:absolute;top:24px;left:24px;background:#00393b;color:#fff;font-size:11px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;padding:4px 10px;border-radius:4px;}
.right{flex:1;padding:28px 32px;display:flex;flex-direction:column;}
h1{font-size:28px;font-weight:300;margin:0 0 8px;letter-spacing:0;}
.sub{color:#4c4d4f;font-size:16px;font-weight:300;margin:0 0 16px;}
.spec-table{background:#fff;border:1px solid #ebebeb;border-radius:8px;padding:16px;margin-bottom:18px;}
.spec-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #ebebeb;font-size:13px;}
.spec-row:last-child{border-bottom:none;}
.spec-row .k{color:#808184;font-weight:500;}
.spec-row .v{color:#4c4d4f;font-weight:300;}
.tabs{display:flex;gap:24px;border-bottom:2px solid #ebebeb;margin-bottom:16px;}
.tab{font-size:16px;font-weight:500;color:#808184;padding:8px 0;}
.tab.active{color:#5b5378;border-bottom:2px solid #5b5378;margin-bottom:-2px;}
.actions{display:flex;gap:10px;margin-top:auto;}
.btn-primary{background:#5b5378;color:#fff;font-size:14px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;border-radius:4px;padding:14px 28px;height:48px;display:flex;align-items:center;}
.btn-secondary{background:transparent;color:#5b5378;font-size:14px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;border:2px solid #5b5378;border-radius:4px;padding:13px 27px;height:48px;display:flex;align-items:center;}
</style>
</head>
<body>
<div class="nav"><div class="logo">Cove</div><div class="links"><span>Dishwashers</span><span>Features</span><span>Compare Models</span><span>Support</span></div></div>
<div class="wrap">
<div class="left"><div class="badge-eco">Energy Star</div><div class="dw"></div></div>
<div class="right">
<h1>Cove 24" Dishwasher</h1>
<p class="sub">Panel-Ready · Ultra-Quiet 39 dBA Operation</p>
<div class="tabs"><span class="tab active">Specifications</span><span class="tab">Features</span><span class="tab">Reviews</span></div>
<div class="spec-table">
<div class="spec-row"><span class="k">Sound Rating</span><span class="v">39 dBA</span></div>
<div class="spec-row"><span class="k">Place Settings</span><span class="v">16</span></div>
<div class="spec-row"><span class="k">Wash Cycles</span><span class="v">6</span></div>
<div class="spec-row"><span class="k">Finish</span><span class="v">Panel-Ready</span></div>
</div>
<div class="actions">
<div class="btn-primary">Request Quote</div>
<div class="btn-secondary">Compare Models</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #9999ff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #9999ff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #9999ff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0.3px; background: #1863dc; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0.3px; background: #ffffff; color: #1863dc;
border: 1px solid #1863dc; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #212121;
border: 1px solid #e2e2e2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #f5b301; color: #212121;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#212121; font-family:Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;}
.alert{height:24px;background:#f5b301;color:#212121;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #e2e2e2;}
.logo{font-weight:700;font-size:16px;color:#034574;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;}
.hero{background:#034574;color:#fff;padding:26px 30px;display:flex;align-items:center;gap:24px;}
.hero .text{flex:1;}
.hero h1{font-size:32px;font-weight:700;margin:0 0 8px;}
.hero p{font-size:14px;margin:0 0 14px;max-width:340px;}
.cta{background:#1863dc;color:#fff;font-weight:500;font-size:15px;letter-spacing:.3px;padding:12px 24px;border-radius:8px;display:inline-block;}
.hero .img{flex:1;height:120px;border-radius:8px;background:radial-gradient(circle,#0ac3ec,#034574 80%);position:relative;}
.hero .img::after{content:'';position:absolute;inset:30px;border:3px solid #f5b301;border-radius:9999px;}
.section{padding:18px 30px;}
.grid{display:flex;gap:14px;}
.card{flex:1;background:#f4f4f4;border:1px solid #e2e2e2;border-radius:8px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;right:8px;background:#f5b301;color:#212121;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 7px;border-radius:4px;}
.card .img{aspect-ratio:1/1;height:80px;border-radius:6px;margin-bottom:8px;}
.m1{background:linear-gradient(135deg,#1863dc,#034574);}
.m2{background:linear-gradient(135deg,#0ac3ec,#33b2ff);}
.m3{background:linear-gradient(135deg,#034574,#4e4b66);}
.card h3{font-size:14px;font-weight:600;margin:0 0 3px;}
.card .model{font-size:11px;color:#4e4b66;margin:0 0 6px;}
.tags{display:flex;gap:4px;flex-wrap:wrap;}
.tag{background:#d1eaff;color:#1863dc;font-size:10px;font-weight:700;padding:2px 8px;border-radius:9999px;}
</style>
<div class="alert">FIRMWARE UPDATE v3.2 AVAILABLE FOR ALL AM SERIES MICROSCOPES</div>
<div class="nav">
<div class="logo">Dino Lite</div>
<div class="navlinks"><span>Handheld</span><span>Desktop</span><span>Industrial</span><span>Software</span></div>
</div>
<div class="hero">
<div class="text">
<h1>See what you're missing.</h1>
<p>Digital microscopes for PCB inspection, dermatology, gemology, and education.</p>
<a class="cta">Shop Microscopes</a>
</div>
<div class="img"></div>
</div>
<div class="section">
<div class="grid">
<div class="card"><span class="badge">5MP</span><div class="img m1"></div><h3>AM4515T5</h3><p class="model">Model AM4515T5</p><div class="tags"><span class="tag">PCB Inspection</span></div></div>
<div class="card"><span class="badge">New</span><div class="img m2"></div><h3>AM7915MZT</h3><p class="model">Model AM7915MZT</p><div class="tags"><span class="tag">Dermatology</span></div></div>
<div class="card"><div class="img m3"></div><h3>AM4113ZT</h3><p class="model">Model AM4113ZT</p><div class="tags"><span class="tag">Gemology</span><span class="tag">Forensics</span></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.4; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #616161; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #006fcf; color: #ffffff;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #231f20;
border: 1px solid #006fcf; border-radius: 6px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #212121;
border: 1px solid #c8c7c7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #616161; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e2ff3f; color: #231f20;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#212121; font-family:'Roboto','Segoe UI',sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;background:#231f20;display:flex;align-items:center;gap:20px;padding:0 26px;}
.logo{color:#ffffff;font-size:19px;font-weight:500;letter-spacing:-.3px;}
.search{flex:1;height:38px;background:#006fcf;border-radius:9999px;display:flex;align-items:center;padding:0 18px;color:#ffffff;font-size:13px;max-width:420px;}
.navicons{display:flex;gap:16px;color:#ffffff;font-size:12px;margin-left:auto;}
.cartbadge{background:#006fcf;border-radius:9999px;padding:2px 8px;font-size:11px;}
.filterbar{display:flex;gap:10px;padding:12px 26px;border-bottom:1px solid #dedede;}
.pill{background:#f5f5f5;border-radius:9999px;padding:6px 16px;font-size:13px;color:#212121;}
.pill.active{background:#006fcf;color:#fff;}
.grid{display:flex;gap:14px;padding:16px 26px;}
.card{width:210px;background:#fff;border-radius:10px;padding:14px;position:relative;box-shadow:0 1px 4px rgba(0,0,0,.06);}
.thumb{height:110px;border-radius:6px;margin-bottom:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;border-radius:4px;}
.badge.sold{background:#e2ff3f;color:#231f20;top:8px;left:8px;}
.badge.hot{background:#f89f20;color:#fff;top:8px;left:52px;}
.pname{font-size:14px;font-weight:600;margin:0 0 4px;}
.pmeta{font-size:12px;color:#616161;margin-bottom:6px;}
.pprice{font-size:16px;font-weight:600;}
.pprice.sale{color:#fb7000;}
.hero{display:flex;padding:8px 26px 0;gap:18px;align-items:center;}
.herotext h1{font-size:22px;font-weight:500;margin:0 0 4px;}
.herotext p{font-size:13px;color:#616161;margin:0;}
.footer{position:absolute;bottom:0;left:0;right:0;height:50px;background:#212121;color:#616161;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Stomping Grounds Tcg</div>
<div class="search">Search cards, sealed product, singles...</div>
<div class="navicons"><span>Sell</span><span>Account</span><span>Cart <span class="cartbadge">3</span></span></div>
</div>
<div class="filterbar">
<div class="pill active">All</div><div class="pill">Singles</div><div class="pill">Sealed</div><div class="pill">Graded</div><div class="pill">Accessories</div>
</div>
<div class="hero">
<div class="herotext"><h1>This week's hottest pulls</h1><p>Fresh singles, sealed boxes, and graded slabs — scanned and shipped same day.</p></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#006fcf,#231f20)"></div><span class="badge sold">Sold</span><div class="pname">Prismatic Rare #087</div><div class="pmeta">NM · Holo</div><div class="pprice">$142.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#fb7000,#231f20)"></div><span class="badge hot">Hot</span><div class="pname">Elite Trainer Box</div><div class="pmeta">Sealed · New Set</div><div class="pprice sale">$54.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3086c8,#231f20)"></div><div class="pname">Graded Slab PSA 10</div><div class="pmeta">Vintage Base Set</div><div class="pprice">$899.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffb74e,#231f20)"></div><div class="pname">Booster Box Case</div><div class="pmeta">6 Boxes · Sealed</div><div class="pprice">$610.00</div></div>
</div>
<div class="footer"><span>© Stomping Grounds TCG</span><span>Shop Support About</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6B6B6B; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #CC0000; color: #FFFFFF;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #FFFFFF; color: #CC0000;
border: 1px solid #CC0000; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B6B6B; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.75px; background: #f8dbdb; color: #CC0000;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#FFFFFF; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#1A1A1A; }
*{box-sizing:border-box;}
.nav{height:72px;border-bottom:1px solid #E0E0E0;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:22px;font-weight:700;color:#CC0000;text-transform:uppercase;letter-spacing:.5px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;color:#1A1A1A;}
.dealer{height:40px;background:#CC0000;display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;}
.dealer .in{background:#fff;color:#1A1A1A;border-radius:4px;padding:6px 12px;font-size:12px;font-weight:400;text-transform:none;}
.hero{height:210px;background:#1A1A1A;display:flex;align-items:center;padding:0 30px;}
.hero h1{color:#fff;font-size:38px;font-weight:700;line-height:1.1;letter-spacing:-.5px;margin:0 0 10px;max-width:420px;}
.hero p{color:#ccc;font-size:14px;margin:0 0 14px;}
.cta{display:inline-block;background:#CC0000;color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:12px 26px;border-radius:4px;}
.badges{display:flex;gap:10px;margin-left:auto;padding-right:20px;}
.seg{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#fff;padding:3px 10px;}
.spec{display:flex;gap:1px;background:#E0E0E0;margin:14px 30px 0;}
.cell{flex:1;background:#F5F5F5;padding:10px;}
.cell b{font-size:12px;color:#6B6B6B;text-transform:uppercase;display:block;}
.cell span{font-size:14px;color:#1A1A1A;}
.grid{display:flex;gap:14px;padding:14px 30px 0;}
.card{width:196px;border:1px solid #E0E0E0;border-radius:4px;padding:10px;}
.thumb{height:90px;background:#F5F5F5;border-radius:4px;margin-bottom:8px;}
.ptitle{font-size:14px;font-weight:600;color:#1A1A1A;}
.pcap{font-size:12px;color:#6B6B6B;margin-top:2px;}
</style>
<div class="dealer"><span>Find a Dealer</span><div class="in">Enter ZIP code</div></div>
<div class="nav">
<div class="logo">Toro</div>
<div class="navlinks"><div>Residential</div><div>Professional</div><div>Golf</div><div>Construction</div></div>
</div>
<div class="hero">
<h1>Precision-Engineered Since 1914.</h1>
<div class="badges"><span class="seg" style="background:#1A1A1A;border:1px solid #444">Pro</span><span class="seg" style="background:#CC0000">Residential</span></div>
</div>
<div class="spec">
<div class="cell"><b>Deck Width</b><span>21 in</span></div>
<div class="cell"><b>Engine</b><span>163cc OHV</span></div>
<div class="cell"><b>Drive</b><span>Personal Pace</span></div>
<div class="cell"><b>Warranty</b><span>3-Year</span></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#CC0000,#1A1A1A)"></div><div class="ptitle">Recycler Self-Propelled Mower</div><div class="pcap">Model 21467</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1A1A1A,#CC0000)"></div><div class="ptitle">TimeCutter Zero-Turn</div><div class="pcap">Golf & Grounds</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2D6A2D,#1A1A1A)"></div><div class="ptitle">Greensmaster Flex 1800</div><div class="pcap">Golf Segment</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f1efec; color: #0b173a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f1efec; color: #0b173a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #0b173a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #0b173a; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f1efec; color: #0b173a;
border: 1px solid #0b173a; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f1efec; color: #272d45;
border: 1px solid #b8b9c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffcf2a; color: #0b173a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f1efec; font-family:-apple-system,'Helvetica Neue',Arial,sans-serif; color:#272d45; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:center;position:relative;padding:0 30px;background:#f1efec;}
.logo{font-family:'basis-grotesque-bold-pro','Helvetica Neue',Arial,sans-serif;font-size:20px;font-weight:700;color:#0b173a;letter-spacing:.5px;text-transform:uppercase;}
.navlinks{position:absolute;left:30px;display:flex;gap:20px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#676986;}
.navlinks span:first-child{color:#0b173a;}
.navicons{position:absolute;right:30px;font-size:13px;color:#676986;}
.hero{height:250px;background:#0b173a;display:flex;align-items:center;padding:0 30px;gap:24px;}
.heroimg{width:220px;height:200px;border-radius:12px;background:radial-gradient(circle at 30% 30%,#4a883a,#0b173a 75%);flex-shrink:0;}
.herotext h1{font-size:32px;font-weight:700;color:#fff;margin:0 0 10px;letter-spacing:-.3px;}
.herotext p{font-size:14px;color:#dbdde4;margin:0 0 16px;max-width:380px;line-height:1.5;}
.btn{display:inline-block;background:#fff;color:#0b173a;font-size:15px;font-weight:600;padding:12px 28px;border-radius:8px;}
.secTitle{font-size:22px;font-weight:700;color:#0b173a;padding:18px 30px 10px;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:200px;background:#fff;border-radius:12px;overflow:hidden;}
.cardimg{height:110px;background:#f4f4f6;position:relative;}
.weave{position:absolute;inset:10px;border-radius:8px;background:repeating-linear-gradient(45deg,#e5e5eb 0 6px,#f4f4f6 6px 12px);}
.badge{position:absolute;top:8px;left:8px;background:#ffcf2a;color:#0b173a;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:4px;z-index:2;}
.cardbody{padding:10px 12px;}
.ctitle{font-size:16px;font-weight:600;color:#0b173a;margin-bottom:4px;}
.cprice{font-size:16px;font-weight:600;color:#272d45;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#0b173a;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:11px;color:#fff;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="navlinks"><span>Sheets</span><span>Duvets</span><span>Bath</span></div>
<div class="logo">Sijo</div>
<div class="navicons">Search · Account · Cart</div>
</div>
<div class="hero">
<div class="heroimg"></div>
<div class="herotext">
<h1>Sleep, engineered quiet.</h1>
<p>Performance bedding in percale weaves and bamboo blends, built for a restful, restrained night.</p>
<div class="btn">Shop Now</div>
</div>
</div>
<div class="secTitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="cardimg"><div class="badge">Sale</div><div class="weave"></div></div><div class="cardbody"><div class="ctitle">Percale Sheet Set</div><div class="cprice">$149</div></div></div>
<div class="card"><div class="cardimg"><div class="weave"></div></div><div class="cardbody"><div class="ctitle">Bamboo Duvet Cover</div><div class="cprice">$189</div></div></div>
<div class="card"><div class="cardimg"><div class="weave"></div></div><div class="cardbody"><div class="ctitle">Brushed Cotton Towel Set</div><div class="cprice">$79</div></div></div>
<div class="card"><div class="cardimg"><div class="weave"></div></div><div class="cardbody"><div class="ctitle">Weighted Blanket</div><div class="cprice">$129</div></div></div>
</div>
<div class="footer"><span>© Sijo</span><span>Shipping · Returns · Care Guide</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #c96442; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #c96442; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e1b4a4; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f4ed; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c96442; color: #f5f4ed;
border: 1px solid #f5f4ed; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #c96442; color: #f5f5f5;
border: 1px solid #d07b5f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e1b4a4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d07b5d; color: #f5f4ed;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f4ed; color:#141413; box-sizing:border-box;
font-family:Georgia, "Times New Roman", serif; }
* { box-sizing:border-box; }
.sans { font-family:-apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.nav .brand { font-weight:600; font-size:17px; }
.nav .links { display:flex; gap:22px; font-size:14px; color:#5e5d59; }
.navbtn { background:#c96442; color:#fff; border-radius:8px; padding:8px 18px; font-size:14px; }
.hero { text-align:center; padding:20px 60px 0; }
.hero h1 { font-size:44px; font-weight:500; line-height:1.15; margin:0 0 14px; }
.hero p { font-size:16px; color:#5e5d59; margin:0; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:26px 32px 0; }
.card { background:#ffffff; border:1px solid #f0eee6; border-radius:24px; padding:22px; }
.card .swatch { width:32px; height:32px; border-radius:10px; margin-bottom:12px; }
.sw1{background:#c96442;} .sw2{background:#30302e;} .sw3{background:#e8e6dc;border:1px solid #d8d6cc;}
.card h4 { font-size:16px; font-weight:600; margin:0 0 6px; }
.card p { font-size:12px; color:#5e5d59; margin:0; line-height:1.5; }
.pricing { margin:20px 32px 0; background:#30302e; border-radius:24px; padding:26px 34px; color:#fff;
display:flex; align-items:center; justify-content:space-between; }
.pricing h3 { font-size:20px; margin:0 0 4px; }
.pricing p { font-size:12px; color:#c7c5bd; margin:0; }
.pricebtn { background:#c96442; color:#fff; border-radius:8px; padding:10px 22px; font-size:13px; }
</style></head>
<body class="sans">
<nav class="nav">
<div class="brand">Claude (Anthropic)</div>
<div class="links"><span>Overview</span><span>Team</span><span>Enterprise</span><span>Pricing</span></div>
<button class="navbtn">Start chatting</button>
</nav>
<div class="hero">
<h1>Bring documents, tools, and web knowledge together</h1>
<p class="sans">A thinking partner for the work that actually matters.</p>
</div>
<div class="cards">
<div class="card"><div class="swatch sw1"></div><h4 class="sans">Claude for Work</h4><p>Draft, research, and reason across your team's context.</p></div>
<div class="card"><div class="swatch sw2"></div><h4 class="sans">Claude Code</h4><p>An agentic coding partner that reads and writes real codebases.</p></div>
<div class="card"><div class="swatch sw3"></div><h4 class="sans">API & Console</h4><p>Build reliable, steerable AI systems on the Claude API.</p></div>
</div>
<div class="pricing sans">
<div><h3>Claude Pro</h3><p>More usage, priority access, and early features.</p></div>
<div class="pricebtn">See plans</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f4ee; color: #1a291c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f4ee; color: #1a291c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #1a291c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; background: #0f6730; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; background: #f7f4ee; color: #0f6730;
border: 1px solid #0f6730; border-radius: 4px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #4a4a4a;
border: 1px solid #c0c1ba; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; background: #b94a48; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f7f4ee; font-family:Arial, Helvetica, sans-serif; color:#1a291c;
}
*{box-sizing:border-box;}
.topbar{background:#1a291c; color:#f7f4ee; height:26px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; font-size:10px; letter-spacing:.3px;}
.nav{height:52px; background:#fff; border-bottom:3px solid #0f6730; display:flex; align-items:center; padding:0 14px; gap:16px;}
.logo{font-family:Georgia, 'Times New Roman', serif; font-weight:700; font-size:22px; color:#0f6730;}
.navlinks{display:flex; gap:14px; font-size:11px; font-weight:bold; text-transform:uppercase; color:#1a291c;}
.searchwrap{margin-left:auto; display:flex;}
.searchbox{width:220px; height:28px; border:1px solid #963231; font-size:11px; padding:0 8px;}
.searchbtn{width:44px; height:28px; background:#0f6730; color:#fff; border:none; font-size:11px; font-weight:bold;}
.banner{background:#963231; color:#fdce5c; text-align:center; font-size:12px; font-weight:bold; padding:5px 0; letter-spacing:.5px;}
.main{display:flex; padding:12px 14px; gap:12px;}
.sidebar{width:150px; background:#fff; border:1px solid #ddd; padding:10px;}
.sidebar h4{font-family:Georgia, serif; font-size:12px; margin:0 0 8px; border-bottom:2px solid #0f6730; padding-bottom:5px;}
.sidebar ul{list-style:none; margin:0; padding:0;}
.sidebar li{font-size:10.5px; padding:4px 0; border-bottom:1px solid #eee;}
.content{flex:1;}
.hero{font-family:Georgia, serif; font-size:20px; font-weight:bold; margin:0 0 4px;}
.sub{font-size:11px; color:#444; margin:0 0 10px;}
.grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;}
.card{background:#fff; border:1px solid #ccc; padding:8px;}
.thumb{width:100%; height:70px; background:linear-gradient(135deg,#0f6730 0%,#1a291c 100%); position:relative; margin-bottom:6px;}
.thumb::after{content:''; position:absolute; left:8px; right:8px; top:8px; bottom:8px; border:2px solid #fdce5c;}
.badge{position:absolute; top:4px; right:4px; background:#fdce5c; color:#1a291c; font-size:8px; font-weight:bold; padding:2px 4px;}
.ptitle{font-size:10.5px; font-weight:bold; line-height:1.25; height:26px; overflow:hidden; margin-bottom:4px;}
.price-row{display:flex; align-items:baseline; gap:6px;}
.price{color:#0f6730; font-weight:bold; font-size:13px;}
.orig{color:#963231; text-decoration:line-through; font-size:10px;}
.btn{width:100%; background:#0f6730; color:#fff; border:none; font-size:10px; font-weight:bold; padding:5px 0; margin-top:6px; text-transform:uppercase;}
.footer{position:absolute; bottom:0; left:0; right:0; background:#1a291c; color:#f7f4ee; font-size:9px; text-align:center; padding:5px 0;}
</style>
<div class="topbar"><span>FREE SHIPPING ON ORDERS $25+</span><span>Track Order | Help</span></div>
<div class="nav">
<div class="logo">Hamilton Book</div>
<div class="navlinks"><span>Books ▾</span><span>DVDs ▾</span><span>CDs</span><span>Clearance</span><span>New Arrivals</span></div>
<div class="searchwrap"><input class="searchbox" placeholder="Search titles, authors..." /><button class="searchbtn">GO</button></div>
</div>
<div class="banner">★ WAREHOUSE CLEARANCE — UP TO 80% OFF MARKED PRICE ★</div>
<div class="main">
<div class="sidebar">
<h4>CATEGORIES</h4>
<ul>
<li>Fiction & Literature</li>
<li>History</li>
<li>Cooking</li>
<li>Children's Books</li>
<li>Movies & DVD</li>
<li>Classic Music CDs</li>
<li>Bargain Bin</li>
</ul>
</div>
<div class="content">
<div class="hero">This Week's Overstock Deals</div>
<div class="sub">No frills. No markup. Just books, DVDs and CDs at prices that make sense.</div>
<div class="grid">
<div class="card">
<div class="thumb"><span class="badge">SALE</span></div>
<div class="ptitle">The Long Winter Road: A Novel of the Plains</div>
<div class="price-row"><span class="price">$3.98</span><span class="orig">$24.95</span></div>
<button class="btn">Add to Cart</button>
</div>
<div class="card">
<div class="thumb"><span class="badge">SALE</span></div>
<div class="ptitle">Complete Home Cookbook, Revised Edition</div>
<div class="price-row"><span class="price">$5.98</span><span class="orig">$32.00</span></div>
<button class="btn">Add to Cart</button>
</div>
<div class="card">
<div class="thumb"></div>
<div class="ptitle">Empires of Iron: A World History</div>
<div class="price-row"><span class="price">$7.98</span><span class="orig">$29.99</span></div>
<button class="btn">Add to Cart</button>
</div>
<div class="card">
<div class="thumb"><span class="badge">SALE</span></div>
<div class="ptitle">Classic Film Collection, Vol. 2 (DVD)</div>
<div class="price-row"><span class="price">$4.98</span><span class="orig">$19.99</span></div>
<button class="btn">Add to Cart</button>
</div>
<div class="card">
<div class="thumb"></div>
<div class="ptitle">Little Explorers: Picture Book Set</div>
<div class="price-row"><span class="price">$6.48</span><span class="orig">$21.50</span></div>
<button class="btn">Add to Cart</button>
</div>
<div class="card">
<div class="thumb"><span class="badge">SALE</span></div>
<div class="ptitle">Orchestral Favorites: Boxed CD Set</div>
<div class="price-row"><span class="price">$9.98</span><span class="orig">$44.00</span></div>
<button class="btn">Add to Cart</button>
</div>
<div class="card">
<div class="thumb"></div>
<div class="ptitle">The Gardener's Almanac, 4th Printing</div>
<div class="price-row"><span class="price">$2.98</span><span class="orig">$16.95</span></div>
<button class="btn">Add to Cart</button>
</div>
<div class="card">
<div class="thumb"><span class="badge">SALE</span></div>
<div class="ptitle">Mystery at Cedar Hollow (Paperback)</div>
<div class="price-row"><span class="price">$3.48</span><span class="orig">$14.99</span></div>
<button class="btn">Add to Cart</button>
</div>
</div>
</div>
</div>
<div class="footer">© Hamilton Book — Discount Books, DVDs & CDs Since 1996 · Returns Accepted 30 Days</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #5a5a5a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #121212;
border: 1px solid #121212; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a5a5a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c87a2b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#2a2a2a; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dedede;}
.logo{font-size:19px;font-weight:600;letter-spacing:.3px;color:#121212;}
.navlinks{display:flex;gap:26px;font-size:13px;color:#2a2a2a;}
.navcta{font-size:12px;color:#121212;border-bottom:1px solid #121212;padding-bottom:2px;}
.hero{height:270px;display:flex;background:#f5f5f5;}
.herotext{width:420px;padding:40px 40px;display:flex;flex-direction:column;justify-content:center;}
.h1{font-size:24px;font-weight:600;line-height:1.35;color:#121212;margin:0 0 12px;}
.sub{font-size:15px;line-height:1.5;color:#5a5a5a;margin:0 0 20px;max-width:320px;}
.btn{width:170px;text-align:center;background:#121212;color:#fff;font-size:14px;font-weight:600;padding:13px 0;border-radius:2px;}
.heroimg{flex:1;position:relative;background:#dedede;overflow:hidden;}
.body1{position:absolute;bottom:40px;left:110px;width:130px;height:170px;border-radius:60px 60px 45% 45%;background:radial-gradient(circle at 40% 35%,#c87a2b,#7a4a1a 80%);}
.hole{position:absolute;bottom:110px;left:155px;width:40px;height:40px;border-radius:50%;background:#3a2410;}
.neck{position:absolute;bottom:180px;left:150px;width:16px;height:90px;background:#121212;border-radius:4px 4px 0 0;}
.tag{position:absolute;top:24px;right:34px;background:#c87a2b;color:#fff;font-size:10px;letter-spacing:.4px;text-transform:uppercase;padding:5px 10px;border-radius:2px;}
.sec{padding:18px 40px 0;}
.sectitle{font-size:16px;font-weight:600;color:#121212;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:154px;border-radius:12px;border:1px solid #dedede;padding:9px;background:#fff;position:relative;}
.thumb{height:96px;border-radius:10px;margin-bottom:8px;background:#f5f5f5;}
.pname{font-size:12px;font-weight:500;color:#121212;line-height:1.35;height:32px;overflow:hidden;}
.pprice{font-size:13px;font-weight:600;color:#121212;margin-top:4px;}
.mini{position:absolute;top:7px;left:7px;background:#c87a2b;color:#fff;font-size:9px;font-weight:600;padding:3px 7px;border-radius:9999px;}
</style>
<div class="nav">
<div class="logo">Ohana Ukuleles</div>
<div class="navlinks"><span>Soprano</span><span>Concert</span><span>Tenor</span><span>Cases</span></div>
<div class="navcta">Find a Dealer</div>
</div>
<div class="hero">
<div class="herotext">
<div class="h1">Instruments built<br>to be played, not admired.</div>
<div class="sub">Solid koa, spruce, and mahogany ukuleles handcrafted for tone that lasts a lifetime.</div>
<div class="btn">Shop Ukuleles</div>
</div>
<div class="heroimg"><div class="body1"></div><div class="hole"></div><div class="neck"></div><div class="tag">Limited Run</div></div>
</div>
<div class="sec">
<div class="sectitle">Concert & Tenor Series</div>
<div class="grid">
<div class="card"><span class="mini">Sale</span><div class="thumb" style="background:radial-gradient(circle at 40% 30%,#c87a2b,#3a2410)"></div><div class="pname">CK-70 Concert Koa</div><div class="pprice">$349.00</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 40% 30%,#9a5a1e,#2a1a0a)"></div><div class="pname">TK-35 Tenor Solid Top</div><div class="pprice">$429.00</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 40% 30%,#c87a2b,#121212)"></div><div class="pname">SK-25 Soprano Mahogany</div><div class="pprice">$229.00</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 40% 30%,#6a4a2a,#121212)"></div><div class="pname">Hard-Shell Travel Case</div><div class="pprice">$89.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #8c8c8c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #313131; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#6b6b6b; font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
}
*, *::before, *::after { box-sizing:border-box; }
.wrap{ position:relative; width:960px; height:640px; }
.nav{ height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#ffffff; border-bottom:1px solid #e0e0e0; }
.logo{ font-size:20px; font-weight:700; letter-spacing:0.02em; color:#313131; }
.navlinks{ display:flex; gap:26px; }
.navlinks span{ font-size:12px; color:#6b6b6b; }
.navlinks span.active{ color:#313131; font-weight:700; }
.cta{ font-size:12px; font-weight:700; color:#ffffff; background:#313131; padding:10px 18px; border-radius:8px; }
.hero{ height:270px; display:flex; align-items:center; padding:0 34px; gap:30px; background:#f7f7f7; }
.hero-text{ width:400px; }
.kicker{ font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#8c8c8c; margin-bottom:12px; }
.h1{ font-size:32px; font-weight:700; line-height:1.2; color:#313131; margin-bottom:12px; }
.sub{ font-size:14px; line-height:1.6; color:#6b6b6b; max-width:340px; margin-bottom:18px; }
.btn{ font-size:13px; font-weight:700; color:#ffffff; background:#313131; padding:13px 24px; border-radius:8px; width:fit-content; }
.hero-visual{ flex:1; height:220px; position:relative; background:#ffffff; border:1px solid #e0e0e0; border-radius:8px; }
.panel{ position:absolute; left:24px; top:24px; right:24px; bottom:24px; display:flex; flex-direction:column; gap:10px; }
.panel-row{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e0e0e0; padding-bottom:10px; }
.panel-label{ font-size:12px; color:#8c8c8c; }
.panel-val{ font-size:13px; font-weight:700; color:#313131; }
.dot-ok{ width:9px; height:9px; border-radius:50%; background:#2e7d32; display:inline-block; margin-right:6px; }
.section-title{ padding:16px 34px 8px; font-size:15px; font-weight:700; color:#313131; }
.grid{ display:flex; gap:16px; padding:0 34px; }
.card{ width:200px; background:#ffffff; border:1px solid #e0e0e0; border-radius:8px; padding:12px; }
.card-img{ width:100%; height:76px; border-radius:6px; margin-bottom:8px; }
.card-title{ font-size:13px; font-weight:700; color:#313131; margin-bottom:2px; }
.card-note{ font-size:10px; color:#8c8c8c; margin-bottom:8px; }
.row{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-size:12px; font-weight:700; color:#313131; }
.tag{ font-size:9px; font-weight:700; text-transform:uppercase; color:#1a73e8; }
.footer{ position:absolute; bottom:0; left:0; width:960px; height:52px; background:#f7f7f7; border-top:1px solid #e0e0e0; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.footer span{ font-size:11px; color:#8c8c8c; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Hers</div>
<div class="navlinks">
<span class="active">Skincare</span>
<span>Hair</span>
<span>Mental Health</span>
<span>Sexual Health</span>
</div>
<div class="cta">Start Visit</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="kicker">Real Treatment, No Waiting Room</div>
<div class="h1">Care that reads like a clinic, not a catalog.</div>
<div class="sub">Licensed providers, prescription options, and ongoing support — delivered with the seriousness the topic deserves.</div>
<div class="btn">Start Free Assessment</div>
</div>
<div class="hero-visual">
<div class="panel">
<div class="panel-row"><span class="panel-label">Provider Review</span><span class="panel-val"><span class="dot-ok"></span>Approved</span></div>
<div class="panel-row"><span class="panel-label">Prescription</span><span class="panel-val">Ready to Ship</span></div>
<div class="panel-row"><span class="panel-label">Delivery</span><span class="panel-val">2–3 Business Days</span></div>
</div>
</div>
</div>
<div class="section-title">Popular Treatments</div>
<div class="grid">
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#313131,#8c8c8c);"></div>
<div class="card-title">Custom Rx Cream</div>
<div class="card-note">Compounded topical</div>
<div class="row"><span class="price">$29/mo</span><span class="tag">Rx</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#6b6b6b,#313131);"></div>
<div class="card-title">Daily Hair Kit</div>
<div class="card-note">Serum + supplement</div>
<div class="row"><span class="price">$39/mo</span><span class="tag">Non-Rx</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#8c8c8c,#e0e0e0);"></div>
<div class="card-title">Anxiety Support</div>
<div class="card-note">Provider consult</div>
<div class="row"><span class="price">$99/mo</span><span class="tag">Rx</span></div>
</div>
</div>
<div class="footer">
<span>© Hers</span>
<span>Privacy · Provider Network · Support</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #080808; color: #f6f6f6;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #080808; color: #f6f6f6;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 300; line-height: 1.2; margin: 0; color: #f6f6f6; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #54565b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.4px; background: #40e09c; color: #080808;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.4px; background: transparent; color: #40e09c;
border: 1px solid #40e09c; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1a1d20; color: #f6f6f6;
border: 1px solid #444444; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #54565b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #40e09c; color: #080808;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#080808; color:#d1d0ce; box-sizing:border-box;
font-family:'Inter','Museo Sans','Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#080808; border-bottom:1px solid #323339; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { color:#f6f6f6; font-size:17px; font-weight:300; margin:0; letter-spacing:0.6px; text-transform:uppercase; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:11px; color:#d1d0ce; font-weight:500; letter-spacing:0.04em; }
.navlinks .active { color:#40e09c; }
.hero { height:250px; background:radial-gradient(ellipse at 72% 45%, rgba(64,224,156,0.14), #080808 68%); display:flex; align-items:center; padding:0 34px; gap:36px; }
.thermalblock { width:170px; height:170px; border-radius:2px; background:linear-gradient(160deg,#0a3d2c,#080808 40%, #f7a840 90%); position:relative; box-shadow:0 0 40px rgba(64,224,156,0.15); }
.thermalblock::after { content:''; position:absolute; left:30%; top:20%; width:40%; height:50%; border-radius:50%; background:radial-gradient(circle, #40e09c, rgba(64,224,156,0.1) 70%); }
.heroTxt h1 { color:#f6f6f6; font-size:28px; font-weight:300; margin:0 0 12px; line-height:1.25; letter-spacing:-0.2px; }
.heroTxt p { font-size:13px; color:#d1d0ce; margin:0 0 18px; max-width:340px; line-height:1.6; }
.heroTxt .cta { display:inline-block; background:#40e09c; color:#080808; font-weight:600; font-size:12px; padding:11px 26px; border-radius:2px; letter-spacing:0.02em; }
.section-label { padding:16px 34px 10px; font-size:12px; font-weight:600; color:#f6f6f6; letter-spacing:0.08em; text-transform:uppercase; }
.grid { display:flex; gap:12px; padding:0 34px; }
.card { flex:1; background:#1a1d20; border-radius:2px; padding:12px; }
.card .art { height:88px; border-radius:2px; margin-bottom:10px; position:relative; }
.a1 { background:linear-gradient(160deg,#40e09c,#1a1d20); } .a2 { background:linear-gradient(160deg,#f7a840,#1a1d20); }
.a3 { background:linear-gradient(160deg,#37aeb3,#1a1d20); } .a4 { background:linear-gradient(160deg,#a0f0ce,#1a1d20); }
.card .chip { position:absolute; top:14px; left:14px; background:#080808; border:1px solid #40e09c; color:#40e09c; font-size:8px; font-weight:600; padding:3px 8px; border-radius:999px; }
.card h3 { color:#f6f6f6; font-size:12px; font-weight:500; margin:0 0 4px; }
.card p { font-size:10px; color:#54565b; margin:0 0 8px; }
.card .price { font-size:13px; font-weight:600; color:#40e09c; }
footer { height:56px; margin-top:14px; border-top:1px solid #323339; display:flex; align-items:center; gap:26px; padding:0 34px; }
footer span { font-size:10px; color:#54565b; letter-spacing:0.04em; text-transform:uppercase; }
</style></head>
<body>
<nav>
<p class="brand">Flir Systems Teledyne Flir</p>
<div class="navlinks"><span class="active">Thermal Cameras</span><span>Sensors</span><span>Industrial</span><span>Defense</span></div>
</nav>
<div class="hero">
<div class="thermalblock"></div>
<div class="heroTxt">
<h1>See what heat sees.</h1>
<p>Operator-grade thermal imaging for industrial inspection, defense, and detection — precision made visible.</p>
<span class="cta">Explore Thermal Cameras</span>
</div>
</div>
<div class="section-label">Featured Instruments</div>
<div class="grid">
<div class="card"><div class="art a1"></div><span class="chip">FLAGSHIP</span><h3>Exx-Series Handheld</h3><p>640×512 Resolution</p><div class="price">$5,499</div></div>
<div class="card"><div class="art a2"></div><h3>Thermal-Amber Sensor</h3><p>Industrial Anomaly Detection</p><div class="price">$2,199</div></div>
<div class="card"><div class="art a3"></div><h3>Fixed-Mount Module</h3><p>Perimeter Monitoring</p><div class="price">$3,899</div></div>
<div class="card"><div class="art a4"></div><h3>Compact Attachment</h3><p>Smartphone Compatible</p><div class="price">$399</div></div>
</div>
<footer>
<span>REQUEST TECHNICAL SPEC SHEET</span><span>CALIBRATION SERVICES</span><span>EXPORT COMPLIANCE</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f6f3; color: #0c0c0c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f6f3; color: #0c0c0c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #0c0c0c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; background: #c77743; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; background: #f7f6f3; color: #0c0c0c;
border: 1px solid #c77743; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f7f6f3; color: #0c0c0c;
border: 1px solid #bcbcb9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffcf2a; color: #0c0c0c;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f6f3; font-family:'Poppins',-apple-system,sans-serif; color:#212529; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #e5e5e5;}
.logo{font-family:'Playfair Display',Georgia,serif;font-size:22px;font-weight:700;color:#0c0c0c;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:#0c0c0c;}
.navlinks div:first-child{color:#c77743;border-bottom:2px solid #c77743;padding-bottom:4px;}
.hero{height:210px;display:flex;align-items:center;padding:0 30px;gap:24px;}
.heroimg{width:200px;height:180px;border-radius:8px;background:radial-gradient(circle at 35% 30%,#e2c36c,#c77743 75%);flex-shrink:0;}
.herotext h1{font-family:'Playfair Display',Georgia,serif;font-size:34px;font-weight:700;color:#0c0c0c;margin:0 0 10px;letter-spacing:-.5px;}
.herotext p{font-size:14px;color:#212529;margin:0 0 16px;max-width:360px;}
.btn{display:inline-block;background:#c77743;color:#fff;font-size:14px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:14px 28px;border-radius:8px;}
.secTitle{font-family:'Playfair Display',Georgia,serif;font-size:22px;font-weight:500;color:#0c0c0c;padding:16px 30px 10px;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:200px;background:#fff;border-radius:8px;overflow:hidden;padding-bottom:16px;}
.thumb{height:110px;background:linear-gradient(160deg,#fff4fa,#e2c36c);position:relative;}
.badgenew{position:absolute;top:8px;left:8px;background:#ffcf2a;color:#0c0c0c;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:9999px;}
.ctitle{font-family:'Playfair Display',Georgia,serif;font-size:18px;font-weight:500;margin:8px 12px 4px;}
.cprice{font-size:14px;color:#212529;margin:0 12px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#0c0c0c;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:11px;color:#888888;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Skin Pharm</div>
<div class="navlinks"><div>Skincare</div><div>Treatments</div><div>About</div></div>
</div>
<div class="hero">
<div class="heroimg"></div>
<div class="herotext">
<h1>Clinical care, gently done.</h1>
<p>Dermatologist-informed skincare that balances precision with everyday warmth.</p>
<div class="btn">Shop Now</div>
</div>
</div>
<div class="secTitle">Bestselling Formulas</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badgenew">New</div></div><div class="ctitle">Vitamin C Brightening Serum</div><div class="cprice">$68</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Retinol Renewal Cream</div><div class="cprice">$74</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Barrier Repair Moisturizer</div><div class="cprice">$52</div></div>
</div>
<div class="footer"><span>© Skin Pharm</span><span>Book a Consultation</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 400; line-height: 1.25; letter-spacing: -0.1px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.6px; background: #000000; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.6px; background: #ffffff; color: #111111;
border: 1px solid #000000; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #000000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#111111; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:15px;font-weight:500;letter-spacing:0.2px;}
.navlinks{display:flex;gap:26px;font-size:13px;color:#111;}
.navlinks div:first-child{border-bottom:2px solid #111;padding-bottom:16px;}
.icons{font-size:12px;color:#666;}
.strip{display:flex;gap:10px;padding:12px 32px 0;}
.chip{border:1px solid #e0e0e0;border-radius:9999px;padding:6px 14px;font-size:11px;letter-spacing:0.5px;text-transform:uppercase;color:#333;}
.chip.on{background:#000;color:#fff;border-color:#000;}
.hero{display:flex;padding:20px 32px 0;gap:32px;}
.herotext{width:300px;padding-top:30px;}
.herotext h1{font-size:34px;font-weight:500;line-height:1.15;letter-spacing:-0.4px;margin:0 0 12px;}
.herotext p{font-size:13px;color:#666;line-height:1.6;margin:0 0 20px;}
.cta{display:inline-block;background:#000;color:#fff;font-size:12px;font-weight:500;letter-spacing:0.6px;text-transform:uppercase;padding:14px 26px;}
.heroposter{width:220px;height:270px;background:linear-gradient(160deg,#2b2b2b 0%,#8a8a8a 55%,#e8e2d6 100%);position:relative;}
.heroposter:before{content:'';position:absolute;top:30px;left:30px;width:60px;height:80px;border-radius:50%;background:#f0ece6;opacity:0.7;}
.grid{display:flex;gap:20px;padding:22px 32px 0;}
.card{width:150px;}
.thumb{width:150px;height:200px;background:#f7f7f7;position:relative;}
.badgechip{position:absolute;top:8px;left:8px;background:#000;color:#fff;font-size:9px;letter-spacing:0.5px;text-transform:uppercase;padding:3px 6px;}
.artist{font-size:12px;color:#666;margin-top:8px;}
.ptitle{font-size:13px;color:#111;}
.pprice{font-size:12px;color:#666;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#111111;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#fff;font-size:11px;}
.footer span{margin-left:16px;color:#e0e0e0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Opposit</div>
<div class="navlinks"><div>All Prints</div><div>Artists</div><div>Frames</div><div>Editions</div></div>
<div class="icons">Search Cart (0)</div>
</div>
<div class="strip">
<div class="chip on">All</div><div class="chip">Abstract</div><div class="chip">Landscape</div><div class="chip">Portrait</div>
</div>
<div class="hero">
<div class="herotext">
<h1>The wall is the gallery.</h1>
<p>Fine art prints, printed on archival stock, framed or not.</p>
<div class="cta">Shop Prints</div>
</div>
<div class="heroposter"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e8e2d6,#2b2b2b)"><div class="badgechip">New</div></div><div class="artist">M. Halvorsen</div><div class="ptitle">Quiet Horizon</div><div class="pprice">$65</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#8a8a8a,#111)"></div><div class="artist">R. Okafor</div><div class="ptitle">Study No. 4</div><div class="pprice">$85</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#f0ece6,#8a8a8a)"></div><div class="artist">L. Bianchi</div><div class="ptitle">Grain & Field</div><div class="pprice">$65</div></div>
</div>
<div class="footer"><span>© Prints on White Walls</span><span>Shipping<span> Framing<span> Journal</span></span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #1c1d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #1c1d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #1c1d1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f9fafb; color: #1c1d1d;
border: 1px solid #108474; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9fafb; color: #333333;
border: 1px solid #c2c3c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#f9fafb; color:#333333; box-sizing:border-box; font-family:'Open Sans','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#f9fafb; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:15px; font-weight:600; letter-spacing:0.2px; text-transform:uppercase; margin:0; color:#1c1d1d; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.2px; color:#1c1d1d; }
.navlinks span.active { color:#108474; border-bottom:2px solid #108474; padding-bottom:20px; }
.search-pill { background:#f4f4f4; border-radius:999px; padding:10px 20px; font-size:13px; color:#7b7b7b; }
.main { display:flex; height:456px; padding:12px 32px; gap:32px; align-items:center; }
.gallery { width:420px; height:420px; background:#f4f4f4; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.kettle { width:180px; height:200px; position:relative; }
.kettle::before { content:''; position:absolute; left:20px; top:60px; width:140px; height:120px; background:#fff; border-radius:0 0 60px 60px; border:2px solid #dadada; }
.kettle::after { content:''; position:absolute; left:50px; top:20px; width:80px; height:44px; background:#108474; border-radius:8px 8px 0 0; }
.info { flex:1; display:flex; flex-direction:column; gap:10px; }
.info h1 { font-size:26px; font-weight:600; margin:0; letter-spacing:-0.3px; }
.badge-new { display:inline-block; background:#108474; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:2px 8px; border-radius:4px; width:fit-content; }
.price { font-size:22px; font-weight:600; }
.desc { font-size:14px; line-height:1.6; color:#333333; max-width:420px; }
.star-row { color:#b19356; font-size:13px; }
.btn-row { display:flex; gap:10px; margin-top:8px; }
.btn-primary { height:44px; padding:0 28px; background:#108474; color:#fff; border:none; border-radius:8px; font-weight:600; font-size:15px; }
.btn-secondary { height:44px; padding:0 24px; background:#f9fafb; color:#1c1d1d; border:1px solid #dadada; border-radius:8px; font-weight:600; font-size:15px; }
.feature-row { display:flex; gap:20px; padding:14px 32px; border-top:1px solid #eeeeee; }
.feature { flex:1; text-align:center; font-size:11px; color:#7b7b7b; }
.feature b { display:block; color:#108474; font-size:15px; margin-bottom:2px; }
</style></head>
<body>
<nav>
<p class="brand">Balmuda</p>
<div class="navlinks"><span class="active">Kitchen</span><span>Kettles</span><span>Toasters</span><span>Recipes</span></div>
<div class="search-pill">🔍 Search products</div>
</nav>
<div class="main">
<div class="gallery"><div class="kettle"></div></div>
<div class="info">
<span class="badge-new">New</span>
<h1>The Electric Gooseneck Kettle</h1>
<div class="star-row">★★★★★ 4.7 (612 reviews)</div>
<span class="price">$179.00</span>
<p class="desc">A precise pour-over kettle with variable temperature control and a quiet, considered form. Matte ceramic-coated body keeps water hot longer while staying cool to the touch.</p>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Learn More</button>
</div>
</div>
</div>
<div class="feature-row">
<div class="feature"><b>0.8L</b>Capacity</div>
<div class="feature"><b>1200W</b>Fast Boil</div>
<div class="feature"><b>±1°C</b>Precision Control</div>
<div class="feature"><b>1yr</b>Warranty</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f4e9; color: #231e18;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f4e9; color: #231e18;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #231e18; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #979797; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; background: #9f8a46; color: #f8f4e9;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; background: transparent; color: #9f8a46;
border: 1px solid #9f8a46; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #f8f4e9; color: #231e18;
border: 1px solid #c3beb5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #979797; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.12em; background: #9f8a46; color: #f8f4e9;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f8f4e9; color:#4a4a4a; font-family:Georgia, 'Times New Roman', serif;
}
*, *::before, *::after { box-sizing:border-box; }
.wrap{ position:relative; width:960px; height:640px; }
.nav{ height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#f8f4e9; border-bottom:1px solid #d2d0cc; }
.logo{ font-size:19px; font-weight:700; letter-spacing:0.04em; color:#231e18; }
.navlinks{ display:flex; gap:26px; }
.navlinks span{ font-size:13px; letter-spacing:0.02em; color:#4a4a4a; }
.navlinks span.active{ color:#9f8a46; border-bottom:2px solid #9f8a46; padding-bottom:4px; }
.cta{ font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; background:#9f8a46; color:#f8f4e9; padding:9px 16px; border-radius:4px; }
.hero{ height:284px; display:flex; background:#231e18; }
.hero-text{ width:440px; padding:38px 36px; display:flex; flex-direction:column; justify-content:center; }
.kicker{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:#b0c5cb; margin-bottom:12px; }
.h1{ font-size:38px; font-weight:700; line-height:1.15; color:#f8f4e9; margin-bottom:12px; letter-spacing:-0.5px; }
.sub{ font-size:15px; line-height:1.6; color:#c9c2b4; max-width:340px; margin-bottom:20px; }
.btn{ font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; background:#9f8a46; color:#f8f4e9; padding:12px 22px; border-radius:4px; width:fit-content; }
.hero-visual{ flex:1; position:relative; background:linear-gradient(135deg,#2b2419,#181410); }
.guitar-body{ position:absolute; left:200px; top:64px; width:130px; height:170px; border-radius:60% 60% 40% 40%/70% 70% 30% 30%; background:linear-gradient(160deg,#af9966,#7a6835); box-shadow:0 16px 26px rgba(0,0,0,0.35); }
.guitar-neck{ position:absolute; left:255px; top:12px; width:20px; height:60px; background:#4a4a4a; border-radius:2px; }
.guitar-hole{ position:absolute; left:245px; top:136px; width:44px; height:44px; border-radius:50%; background:#181410; border:3px solid #d2c9a8; }
.strip{ position:absolute; right:34px; top:34px; background:#df5334; color:#f8f4e9; font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:6px 12px; border-radius:2px; }
.section-title{ padding:20px 34px 8px; font-size:16px; font-weight:600; color:#231e18; }
.grid{ display:flex; gap:18px; padding:0 34px; }
.card{ width:190px; background:#ffffff; border:1px solid #d2d0cc; border-radius:4px; padding:12px; }
.card-img{ width:100%; height:82px; border-radius:2px; margin-bottom:8px; }
.card-title{ font-size:14px; font-weight:600; color:#231e18; margin-bottom:3px; }
.card-note{ font-size:11px; color:#979797; margin-bottom:8px; }
.row{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-size:13px; font-weight:700; color:#9f8a46; }
.badge{ font-size:9px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#df5334; border:1px solid #df5334; padding:3px 8px; border-radius:2px; }
.footer{ position:absolute; bottom:0; left:0; width:960px; height:52px; background:#231e18; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.footer span{ font-size:11px; letter-spacing:0.06em; color:#af9966; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Heritage Guitars</div>
<div class="navlinks">
<span class="active">Electrics</span>
<span>Acoustics</span>
<span>Custom Shop</span>
<span>Heritage</span>
</div>
<div class="cta">Find a Dealer</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="kicker">Kalamazoo, Michigan — Since 1984</div>
<div class="h1">Built by the five who stayed.</div>
<div class="sub">Same bench, same tools, same original factory. Every instrument still hand-carved the way it was before the industry moved on.</div>
<div class="btn">Shop the H-150</div>
</div>
<div class="hero-visual">
<div class="strip">Limited Run</div>
<div class="guitar-neck"></div>
<div class="guitar-body"></div>
<div class="guitar-hole"></div>
</div>
</div>
<div class="section-title">Custom Shop Selections</div>
<div class="grid">
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#9f8a46,#4a4a4a);"></div>
<div class="card-title">H-150 Standard</div>
<div class="card-note">Aged Mahogany</div>
<div class="row"><span class="price">$3,295</span><span class="badge">In Stock</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#231e18,#9f8a46);"></div>
<div class="card-title">H-535 Semi-Hollow</div>
<div class="card-note">Vintage Sunburst</div>
<div class="row"><span class="price">$3,995</span><span class="badge">2 Left</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#b0c5cb,#4a4a4a);"></div>
<div class="card-title">H-575 Custom</div>
<div class="card-note">Antique Natural</div>
<div class="row"><span class="price">$4,450</span><span class="badge">Made to Order</span></div>
</div>
</div>
<div class="footer">
<span>© Heritage Guitars — Kalamazoo</span>
<span>Warranty · Care Guide · Contact</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00dd6d; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00dd6d; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096d3a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00dd6d; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00dd6d; color: #111111;
border: 1px solid #03bc5e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096d3a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00ba5c; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#444444; box-sizing:border-box;
font-family:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif; }
* { box-sizing:border-box; }
.header { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #f0f0f0; }
.header .logo { font-size:18px; font-weight:700; color:#000000; }
.header .nav { display:flex; gap:26px; font-size:15px; color:#444444; }
.header .auth { background:#000000; color:#ffffff; border-radius:8px; height:40px; padding:0 16px;
font-size:15px; font-weight:700; display:flex; align-items:center; }
.main { padding:18px 32px 0; }
.eyebrow { color:#00dd6d; font-size:13px; font-weight:700; margin:0 0 8px; }
.hero { position:relative; height:150px; border-radius:0; overflow:hidden;
background:linear-gradient(115deg,#0c3d2c 0%,#0b2e3a 45%,#111318 100%); display:flex; align-items:flex-end; }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0) 60%); }
.hero .txt { position:relative; padding:18px 22px; color:#ffffff; }
.hero .txt .kicker { font-size:16px; font-weight:400; opacity:.85; margin:0 0 4px; }
.hero .txt h1 { font-size:32px; font-weight:700; line-height:1.3; margin:0; }
.filters { padding:16px 32px 0; }
.chiprow { display:flex; gap:8px; overflow:hidden; margin-bottom:10px; }
.chip { height:40px; border-radius:20px; padding:7px 16px; font-size:16px; display:flex; align-items:center;
white-space:nowrap; }
.chip.active { background:#00dd6d; color:#ffffff; font-weight:700; }
.chip.rest { background:transparent; color:#444444; font-weight:400; border:1px solid #ececec; }
.droprow { display:flex; gap:10px; }
.drop { height:40px; border-radius:100px; padding:8px 30px 8px 12px; font-size:16px; color:#000000;
background:#ffffff; border:1px solid #e5e5e5; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.drop::after { content:''; width:6px; height:6px; border-right:1.5px solid #000; border-bottom:1.5px solid #000;
transform:rotate(45deg); margin-left:4px; }
.jobs { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:18px 32px 0; }
.job { border-radius:0; border:1px solid #ececec; padding:16px; display:flex; flex-direction:column; gap:6px; background:#ffffff; }
.job .top { display:flex; align-items:center; justify-content:space-between; }
.job .dday { font-size:12px; font-weight:700; color:#00dd6d; }
.job h3 { font-size:16px; font-weight:700; color:#000000; margin:0; }
.job .co { font-size:14px; color:#444444; margin:0; }
.job .meta { font-size:13px; color:#888888; margin:2px 0 0; }
.job .tags { display:flex; gap:6px; margin-top:4px; }
.job .tags span { font-size:12px; color:#444444; background:#f7f7f7; padding:3px 8px; }
.footer { position:absolute; left:0; right:0; bottom:0; height:70px; background:#fbfbfb; display:flex;
align-items:center; justify-content:space-between; padding:0 32px; font-size:14px; color:#444444; }
.footer .cols { display:flex; gap:22px; }
.footer .view-all { font-size:16px; color:#888888; }
body { position:relative; }
</style></head>
<body>
<div class="header">
<div class="logo">Jumpit</div>
<div class="nav"><span>Dev Jobs</span><span>Resume</span><span>#feed</span><span>Dev Interviews</span></div>
<div class="auth">Sign up / Log in</div>
</div>
<div class="main">
<p class="eyebrow">NOTICE</p>
<div class="hero">
<div class="txt">
<p class="kicker">This week's curated pick</p>
<h1>Teams whose hiring bar is actually worth chasing</h1>
</div>
</div>
</div>
<div class="filters">
<div class="chiprow">
<span class="chip active">All</span>
<span class="chip rest">Backend</span>
<span class="chip rest">Frontend</span>
<span class="chip rest">iOS</span>
<span class="chip rest">Android</span>
<span class="chip rest">DevOps</span>
<span class="chip rest">AI / ML</span>
<span class="chip rest">QA</span>
</div>
<div class="droprow">
<span class="drop">Tech stack</span>
<span class="drop">Experience</span>
<span class="drop">Location</span>
<span class="drop">Tags</span>
</div>
</div>
<div class="jobs">
<div class="job">
<div class="top"><h3>Platform Engineer</h3><span class="dday">D-7</span></div>
<p class="co">Northbeam Systems</p>
<p class="meta">Pangyo · 3-7 yrs</p>
<div class="tags"><span>Go</span><span>Kubernetes</span></div>
</div>
<div class="job">
<div class="top"><h3>Frontend Engineer</h3><span class="dday">D-12</span></div>
<p class="co">Lightloop Labs</p>
<p class="meta">Remote · 1-4 yrs</p>
<div class="tags"><span>React</span><span>TypeScript</span></div>
</div>
<div class="job">
<div class="top"><h3>ML Engineer</h3><span class="dday">New</span></div>
<p class="co">Ferric Data</p>
<p class="meta">Gangnam · 2-6 yrs</p>
<div class="tags"><span>PyTorch</span><span>MLOps</span></div>
</div>
</div>
<div class="footer">
<div class="cols"><span>Company</span><span>Terms</span><span>Privacy</span><span>Support</span></div>
<span class="view-all">See all positions ›</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; background: #7a9e7e; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; background: #ffffff; color: #7a9e7e;
border: 1px solid #7a9e7e; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; background: #ffffff; color: #4a4a4a;
border: 1px solid #c6c6c6; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #7a9e7e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:center; position:relative;
background:#ffffff; }
.navlinks { display:flex; gap:30px; position:absolute; left:36px; }
.navlinks span { font-size:14px; font-weight:500; color:#7a7a7a; }
.navlinks span.on { color:#1a1a1a; border-bottom:2px solid #7a9e7e; padding-bottom:4px; }
.brand { font-size:20px; font-weight:600; letter-spacing:0.5px; }
.navicons { position:absolute; right:36px; display:flex; gap:16px; font-size:12px; color:#4a4a4a; }
.hero { height:290px; background:linear-gradient(180deg,#f7f7f7,#ffffff); display:flex; align-items:center;
padding:0 40px; gap:40px; }
.hero .copy { flex:1; }
.hero h1 { font-size:36px; font-weight:600; line-height:1.15; letter-spacing:-0.5px; margin:0 0 14px; }
.hero p { font-size:16px; color:#4a4a4a; line-height:1.5; margin:0 0 20px; max-width:340px; }
.hero .btn { display:inline-block; background:#7a9e7e; color:#fff; font-size:15px; font-weight:500;
padding:14px 32px; border-radius:9999px; }
.hero .art { flex:1; height:220px; border-radius:9999px 9999px 12px 12px; background:radial-gradient(circle at 35% 30%,#c8d9ca,#7a9e7e); }
.strip { display:flex; gap:16px; padding:22px 40px; }
.card { flex:1; background:#ffffff; border:1px solid #e5e5e5; border-radius:12px; overflow:hidden; }
.card .img { height:110px; background:#aaccaa; position:relative; display:flex; align-items:flex-end; }
.card .swatch { width:100%; height:70%; margin:auto; border-radius:50%; }
.badge { position:absolute; top:8px; left:8px; background:#7a9e7e; color:#fff; font-size:9px; font-weight:600;
letter-spacing:0.5px; text-transform:uppercase; padding:4px 8px; border-radius:9999px; }
.card .info { padding:10px 12px; }
.card .t { font-size:14px; font-weight:500; margin:0 0 4px; }
.card .p { font-size:13px; color:#4a4a4a; }
.ingred { margin:0 40px; padding:14px 18px; background:#f7f7f7; border-radius:12px; display:flex;
align-items:center; gap:12px; }
.ingred .pill { background:#7a9e7e; color:#fff; font-size:11px; font-weight:600; letter-spacing:0.5px;
text-transform:uppercase; padding:6px 12px; border-radius:9999px; }
.ingred p { font-size:13px; color:#4a4a4a; margin:0; }
footer { position:absolute; bottom:0; left:0; right:0; height:56px; background:#f7f7f7; display:flex;
align-items:center; justify-content:space-between; padding:0 40px; font-size:11px; color:#7a7a7a; }
</style></head>
<body>
<nav>
<div class="navlinks"><span class="on">Shop</span><span>Learn</span></div>
<div class="brand">Evereden</div>
<div class="navicons"><span>Search</span><span>Cart (0)</span></div>
</nav>
<div class="hero">
<div class="copy">
<h1>Clean formulation.<br>Quiet confidence.</h1>
<p>Baby-care essentials built on botanical safety, not baby-aisle pastels.</p>
<span class="btn">Shop Now</span>
</div>
<div class="art"></div>
</div>
<div class="strip">
<div class="card"><div class="img" style="background:#e9f1e9;"><span class="badge">New</span><div class="swatch" style="background:#ffffff;"></div></div>
<div class="info"><p class="t">Baby Shampoo & Wash</p><p class="p">$18.00</p></div></div>
<div class="card"><div class="img" style="background:#f0e9df;"><div class="swatch" style="background:#7a9e7e;"></div></div>
<div class="info"><p class="t">Vitamin C Body Cream</p><p class="p">$26.00</p></div></div>
<div class="card"><div class="img" style="background:#e5eee8;"><span class="badge">New</span><div class="swatch" style="background:#c8d9ca;"></div></div>
<div class="info"><p class="t">Nourishing Baby Oil</p><p class="p">$22.00</p></div></div>
<div class="card"><div class="img" style="background:#eef2ee;"><div class="swatch" style="background:#ffffff;"></div></div>
<div class="info"><p class="t">Diaper Cream</p><p class="p">$16.00</p></div></div>
</div>
<div class="ingred"><span class="pill">Shea Butter</span><span class="pill">Vitamin E</span><p>Dermatologist-tested, fragrance-conscious formulas for the first thousand days.</p></div>
<footer><span>© Evereden — Clean baby care</span><span>Shipping · Ingredients · Contact</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 300; line-height: 1.2; letter-spacing: 0.08em; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.6; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.10em; background: #313131; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.10em; background: transparent; color: #313131;
border: 1px solid #313131; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; background: #ffffff; color: #7a7a7a;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 48px;
border-bottom:1px solid #e8e4de; }
.brand { font-size:16px; font-weight:400; letter-spacing:2px; margin:0; }
.navlinks { display:flex; gap:32px; font-size:13px; letter-spacing:.6px; color:#313131; }
.cart { font-size:13px; letter-spacing:.5px; color:#7a7a7a; }
.hero { display:flex; align-items:center; gap:0; height:320px; }
.hero-img { flex:1; height:100%; background:radial-gradient(circle at 40% 40%, #e8c98a 0%, #c9a35f 45%, #f9f8f6 100%);
position:relative; }
.hero-img::after { content:''; position:absolute; left:50%; top:50%; width:70px; height:70px; border-radius:50%;
border:6px solid #f9f8f6; transform:translate(-50%,-50%); }
.hero-text { flex:1; padding:0 56px; }
.hero-text .eyebrow { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#7a7a7a; margin:0 0 10px; }
.hero-text h1 { font-size:34px; font-weight:300; letter-spacing:.06em; line-height:1.15; margin:0 0 14px; }
.hero-text p { font-size:13px; color:#4d4d4d; line-height:1.6; margin:0 0 18px; max-width:340px; }
.btn { display:inline-block; background:#313131; color:#fff; font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
padding:13px 30px; }
.band { background:#f9f8f6; padding:20px 48px; display:flex; justify-content:space-between; align-items:center; }
.band span { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#7a7a7a; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid #e8e4de; }
.card { padding:16px 18px; border-right:1px solid #e8e4de; }
.card:last-child { border-right:none; }
.ring { height:96px; background:#f9f8f6; margin-bottom:10px; position:relative; }
.ring::after { content:''; position:absolute; left:50%; top:50%; width:38px; height:38px; border-radius:50%;
border:5px solid #d8bd8a; transform:translate(-50%,-50%); }
.badge { display:inline-block; font-size:10px; letter-spacing:.5px; color:#7a7a7a; border:1px solid #e8e4de; padding:3px 9px; margin-bottom:6px; }
.card h3 { font-size:13px; font-weight:500; letter-spacing:.05em; margin:0 0 4px; }
.card .price { font-size:15px; font-weight:400; }
footer { position:absolute; bottom:0; left:0; right:0; height:34px; background:#313131; color:#fff;
display:flex; align-items:center; justify-content:center; font-size:10px; letter-spacing:1px; }
</style></head>
<body>
<nav>
<p class="brand">Bario Neal</p>
<div class="navlinks"><span>Rings</span><span>Wedding</span><span>Fine Jewelry</span><span>Custom</span></div>
<div class="cart">Bag (1)</div>
</nav>
<section class="hero">
<div class="hero-img"></div>
<div class="hero-text">
<p class="eyebrow">Ethically Sourced · Handmade</p>
<h1>Rings Made By Hand, Worn For Life</h1>
<p>Recycled metals and conflict-free stones, formed in our Philadelphia studio one piece at a time.</p>
<span class="btn">Book a Consultation</span>
</div>
</section>
<div class="band"><span>Featured — The Equinox Collection</span><span>View All →</span></div>
<div class="grid">
<div class="card">
<div class="ring"></div>
<span class="badge">Recycled 14k Gold</span>
<h3>Aster Solitaire</h3>
<div class="price">$2,180</div>
</div>
<div class="card">
<div class="ring"></div>
<span class="badge">Lab-Grown Diamond</span>
<h3>Marlowe Band</h3>
<div class="price">$1,640</div>
</div>
<div class="card">
<div class="ring"></div>
<span class="badge">Conflict-Free</span>
<h3>Wren Cluster</h3>
<div class="price">$2,950</div>
</div>
<div class="card">
<div class="ring"></div>
<span class="badge">Custom Commission</span>
<h3>Bespoke Setting</h3>
<div class="price">From $3,400</div>
</div>
</div>
<footer>© Bario Neal — Philadelphia, PA</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.25px; background: #d63021; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.25px; background: #ffffff; color: #121212;
border: 1px solid #d63021; border-radius: 0px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f7f7f7; color: #121212;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #d63021; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Poppins',-apple-system,Roboto,Arial,sans-serif; color:#4d4d4d; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:72px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid #dedede;}
.logo{font-size:22px;font-weight:600;color:#121212;letter-spacing:0.5px;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;position:absolute;left:32px;}
.carticon{position:absolute;right:32px;width:40px;height:40px;border-radius:9999px;background:#f7f7f7;}
.catnav{height:44px;display:flex;align-items:center;gap:22px;padding:0 32px;border-bottom:1px solid #dedede;font-size:13px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;color:#4d4d4d;}
.catnav span:first-child{color:#121212;border-bottom:2px solid #d63021;padding-bottom:12px;}
.hero{height:220px;background:#121212;display:flex;align-items:center;padding:0 32px;gap:30px;}
.herotxt{max-width:400px;}
.h1{font-size:32px;font-weight:600;letter-spacing:-0.5px;color:#fff;margin:0 0 10px;line-height:1.25;}
.sub{font-size:16px;color:#fff;opacity:0.75;margin:0 0 18px;}
.btn{display:inline-block;background:#d63021;color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.25px;padding:14px 24px;width:fit-content;}
.figureimg{width:150px;height:170px;border-radius:9999px 9999px 0 0;background:linear-gradient(160deg,#0073ce,#d63021 60%);}
.grid{display:flex;gap:16px;padding:20px 32px 0;}
.card{width:210px;background:#fff;}
.thumb{height:150px;background:#f7f7f7;position:relative;}
.thumb .art{position:absolute;inset:0;background:linear-gradient(135deg,#d63021,#0073ce);}
.badge{position:absolute;top:8px;left:8px;background:#d63021;color:#fff;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;z-index:2;}
.ctitle{font-size:14px;font-weight:600;margin:10px 0 2px;color:#121212;}
.cprice{font-size:14px;color:#4d4d4d;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#fff;font-size:12px;}
</style>
<div class="wrap">
<div class="nav">
<div class="navlinks"><span>Art Prints</span><span>Figures</span></div>
<div class="logo">Mondo</div>
<div class="carticon"></div>
</div>
<div class="catnav"><span>New Drops</span><span>Vinyl</span><span>Exclusives</span><span>Sale</span></div>
<div class="hero">
<div class="herotxt">
<div class="h1">A collector's fever dream.</div>
<p class="sub">Limited drops rendered in movie-poster voltage — hunt fast, or miss it.</p>
<div class="btn">Shop Now</div>
</div>
<div class="figureimg"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge">New</span><div class="art"></div></div><div class="ctitle">Nightcrawl Art Print, 24x36</div><div class="cprice">$65.00</div></div>
<div class="card"><div class="thumb"><div class="art"></div></div><div class="ctitle">1/6 Scale Collector Figure</div><div class="cprice">$189.99</div></div>
<div class="card"><div class="thumb"><div class="art"></div></div><div class="ctitle">Soundtrack Vinyl LP</div><div class="cprice">$34.99</div></div>
</div>
<div class="footer"><span>Fast. Visual. Unapologetically loud.</span><span>© Mondo</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f4f2; color: #120d0e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f4f2; color: #120d0e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: #120d0e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #968e89; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #e19aa6; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #f7f4f2; color: #120d0e;
border: 1px solid #e19aa6; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f7f4f2; color: #120d0e;
border: 1px solid #bebab9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #968e89; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #57539e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f4f2; font-family:'Poppins','Montserrat',Arial,sans-serif; color:#5a524d; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-family:Georgia,serif;font-size:22px;font-weight:500;color:#120d0e;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;letter-spacing:1px;text-transform:uppercase;}
.hero{height:200px;background:#ffe0e9;border-radius:12px;margin:0 34px;display:flex;align-items:center;padding:0 34px;}
.htxt{width:400px;}
.htxt h1{font-family:Georgia,serif;font-size:36px;font-weight:500;letter-spacing:-0.5px;color:#120d0e;margin:0 0 10px;}
.htxt p{font-size:14px;color:#5a524d;margin:0 0 14px;}
.cta{display:inline-block;background:#e19aa6;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.5px;padding:12px 24px;border-radius:8px;}
.rowlabel{padding:18px 34px 10px;font-family:Georgia,serif;font-size:24px;color:#120d0e;}
.grid{display:flex;gap:16px;padding:0 34px;}
.card{width:206px;background:#fff;border-radius:12px;padding:0 0 12px;}
.badge{display:inline-block;background:#57539e;color:#fff;font-size:11px;font-weight:600;letter-spacing:0.3px;border-radius:4px;padding:2px 8px;margin:12px 0 0 12px;}
.thumb{height:100px;border-radius:12px;margin:8px 12px 10px;}
.title{font-size:16px;font-weight:600;margin:0 12px 4px;color:#120d0e;}
.price{font-size:14px;margin:0 12px;}
</style>
<div class="nav">
<div class="logo">Maelys</div>
<div class="navlinks"><span>Body</span><span>Face</span><span>Bundles</span></div>
</div>
<div class="hero">
<div class="htxt">
<h1>Clinical claims, delivered in velvet.</h1>
<p>Targeted body treatments, formulated with science and finished with romance.</p>
<div class="cta">Shop Treatments</div>
</div>
</div>
<div class="rowlabel">Bestselling Treatments</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#e19aa6,#d0597a);"></div><div class="title">Sculpting Gel Duo</div><div class="price">$68</div></div>
<div class="card"><span class="badge" style="background:#5bbad5;">Bestseller</span><div class="thumb" style="background:linear-gradient(135deg,#d0597a,#57539e);"></div><div class="title">Firming Body Cream</div><div class="price">$54</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#57539e,#e19aa6);"></div><div class="title">Contour Massage Roller</div><div class="price">$32</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ed018c; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #111111;
border: 1px solid #ed018c; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #ed018c; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#111111; font-family:'Lato',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:center;gap:24px;background:#111111;}
.logo{position:absolute;left:36px;top:14px;font-family:Impact,'Arial Black',sans-serif;font-size:22px;color:#ed018c;letter-spacing:0.5px;}
.searchpill{width:200px;height:30px;border-radius:9999px;background:#f0f0f0;display:flex;align-items:center;padding:0 14px;font-size:11px;color:#8a8a8a;}
.hero{height:236px;display:flex;align-items:center;padding:0 36px;background:linear-gradient(120deg,#ed018c 0%,#8dd9f4 100%);}
.htext{width:430px;}
.htext h1{font-family:Impact,'Arial Black',sans-serif;font-size:34px;color:#fff;line-height:1.15;margin:0 0 14px;text-transform:uppercase;letter-spacing:0.5px;}
.htext p{font-size:13px;color:#fdeaf5;margin:0 0 18px;max-width:370px;line-height:1.5;}
.btn{display:inline-block;background:#111111;color:#e8f26e;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:12px 26px;border-radius:4px;}
.zines{position:absolute;right:70px;top:44px;display:flex;gap:10px;}
.zine{width:64px;height:96px;border-radius:2px;box-shadow:4px 4px 0 rgba(17,17,17,0.25);}
.z1{background:#e8f26e;transform:rotate(-6deg);}
.z2{background:#fd534d;transform:rotate(4deg);margin-top:14px;}
.z3{background:#8dd9f4;transform:rotate(-3deg);}
.sec{padding:20px 36px 0;}
.sectitle{font-family:Impact,'Arial Black',sans-serif;font-size:19px;text-transform:uppercase;margin-bottom:14px;letter-spacing:0.3px;}
.filterrow{display:flex;gap:8px;margin-bottom:14px;}
.chip{background:#f0f0f0;border-radius:9999px;padding:5px 14px;font-size:11px;font-weight:700;}
.chip.active{background:#ed018c;color:#fff;}
.grid{display:flex;gap:14px;}
.card{width:154px;background:#fff;border-radius:6px;box-shadow:0 3px 8px rgba(0,0,0,0.08);position:relative;overflow:hidden;}
.badge{position:absolute;top:6px;left:6px;background:#ed018c;color:#fff;font-size:8px;font-weight:700;text-transform:uppercase;padding:3px 7px;border-radius:3px;z-index:2;}
.thumb{width:100%;height:112px;}
.cardbody{padding:9px;}
.cardtitle{font-size:11px;font-weight:700;line-height:1.3;height:28px;overflow:hidden;}
.cardprice{font-size:11px;color:#ed018c;margin-top:4px;font-weight:700;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;background:#111111;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:10px;color:#cccccc;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Microcosm Publishing</div>
<div class="searchpill">Search zines & books...</div>
</div>
<div class="hero">
<div class="htext">
<h1>A riot of hot pink and DIY paper.</h1>
<p>Zines, how-to books, and radical publishing for readers who make their own noise.</p>
<div class="btn">Browse Catalog</div>
</div>
<div class="zines">
<div class="zine z1"></div>
<div class="zine z2"></div>
<div class="zine z3"></div>
</div>
</div>
<div class="sec">
<div class="sectitle">New Zines</div>
<div class="filterrow"><div class="chip active">All</div><div class="chip">Zines</div><div class="chip">How-To</div><div class="chip">Fiction</div></div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(160deg,#e8f26e,#111111);"></div><div class="cardbody"><div class="cardtitle">Doris #29: On Getting By</div><div class="cardprice">$6.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#fd534d,#111111);"></div><div class="cardbody"><div class="cardtitle">Learning Good Consent</div><div class="cardprice">$14.95</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#8dd9f4,#111111);"></div><div class="cardbody"><div class="cardtitle">The Encyclopedia of Ethical</div><div class="cardprice">$16.95</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#ed018c,#111111);"></div><div class="cardbody"><div class="cardtitle">Rad Dad Zine Anthology</div><div class="cardprice">$12.00</div></div></div>
</div>
</div>
<div class="footer"><span>© Radical Reference Since 1996</span><span>Distro · Wholesale</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Apple SD Gothic Neo", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.topbar { display:flex; justify-content:flex-end; gap:16px; padding:6px 32px; font-size:11px; color:#212b36;
border-bottom:1px solid #e5e7eb; }
nav { display:flex; align-items:center; gap:20px; padding:16px 32px; }
.brand { font-size:20px; font-weight:700; margin:0; }
.search { flex:1; max-width:520px; height:36px; border:2px solid #000; border-radius:2px; display:flex; align-items:center;
padding:0 12px; font-size:14px; color:#000; }
.search-btn { background:#000; color:#fff; font-size:13px; padding:8px 18px; }
.menu { display:flex; gap:2px; padding:0 32px; border-bottom:1px solid #e5e7eb; }
.menu li { list-style:none; padding:8px 5px; font-size:14px; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; padding:22px 32px; }
.item { display:flex; flex-direction:column; gap:6px; }
.item .photo { height:120px; background:#f5f5f5; border:1px solid #e5e7eb; }
.item .name { font-size:12px; color:#333333; line-height:1.4; }
.item .price { font-size:15px; font-weight:700; color:#000; }
.item .meta { font-size:11px; color:#555555; }
</style></head>
<body>
<div class="topbar"><span>Sign In</span><span>Order History</span><span>Help Center</span></div>
<nav>
<p class="brand">Coupang</p>
<div class="search">Search for laptops</div>
<button class="search-btn">Search</button>
</nav>
<ul class="menu">
<li>Home</li><li>Rocket Delivery</li><li>Fashion</li><li>Beauty</li><li>Electronics</li><li>Grocery</li><li>Household</li>
</ul>
<div class="grid">
<div class="item"><div class="photo"></div><div class="name">Cordless Stick Vacuum</div><div class="price">$142.00</div><div class="meta">Free Shipping</div></div>
<div class="item"><div class="photo"></div><div class="name">Insulated Tumbler 500ml</div><div class="price">$11.90</div><div class="meta">Rocket Delivery</div></div>
<div class="item"><div class="photo"></div><div class="name">Organic Coffee Beans 1kg</div><div class="price">$18.40</div><div class="meta">Free Shipping</div></div>
<div class="item"><div class="photo"></div><div class="name">Foldable Laundry Rack</div><div class="price">$24.00</div><div class="meta">Rocket Delivery</div></div>
<div class="item"><div class="photo"></div><div class="name">Bluetooth Earbuds</div><div class="price">$44.20</div><div class="meta">Free Shipping</div></div>
<div class="item"><div class="photo"></div><div class="name">Folding Camping Table</div><div class="price">$34.50</div><div class="meta">Rocket Delivery</div></div>
<div class="item"><div class="photo"></div><div class="name">Cotton Comforter Set, Queen</div><div class="price">$51.00</div><div class="meta">Free Shipping</div></div>
<div class="item"><div class="photo"></div><div class="name">Air Purifier with Filter</div><div class="price">$106.90</div><div class="meta">Rocket Delivery</div></div>
<div class="item"><div class="photo"></div><div class="name">Dog Food 3kg</div><div class="price">$21.70</div><div class="meta">Free Shipping</div></div>
<div class="item"><div class="photo"></div><div class="name">Electric Kettle 1.7L</div><div class="price">$15.80</div><div class="meta">Rocket Delivery</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf8f4; color: #221f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf8f4; color: #221f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #221f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #e52718; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #faf8f4; color: #221f20;
border: 1px solid #e52718; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #faf8f4; color: #3c392c;
border: 1px solid #c4c2bf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fed103; color: #221f20;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#faf8f4; color:#221f20; box-sizing:border-box;
font-family:'Gotham Rounded','Verdana',-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; background:#faf8f4; }
.brand { font-family:'Audiowide',sans-serif; font-size:19px; color:#e52718; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:700; color:#757575; }
.navlinks span:first-child { color:#e52718; }
.cartdot { background:#e52718; color:#fff; border-radius:9999px; width:20px; height:20px;
display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.wrap { display:flex; height:calc(640px - 65px - 54px); }
.gallery { width:390px; background:#00416c; display:flex; align-items:center; justify-content:center;
position:relative; overflow:hidden; }
.gallery::before { content:''; position:absolute; width:280px; height:280px; border-radius:9999px;
background:radial-gradient(circle,#006ead 0%,#00416c 70%); top:-40px; right:-60px; opacity:0.6; }
.gizmo { width:180px; height:180px; background:#fed103; border-radius:20px; position:relative;
display:flex; align-items:center; justify-content:center; transform:rotate(-6deg);
box-shadow:0 20px 40px rgba(0,0,0,0.3); }
.gizmo::after { content:''; position:absolute; width:60px; height:60px; background:#e52718; border-radius:9999px;
top:-16px; right:-16px; border:6px solid #faf8f4; }
.gizmo span { color:#221f20; font-weight:700; font-size:15px; transform:rotate(6deg); }
.badge-new { position:absolute; top:20px; left:20px; background:#fed103; color:#221f20;
font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:4px 12px; border-radius:9999px; z-index:2; }
.info { flex:1; padding:26px 36px; display:flex; flex-direction:column; gap:10px; }
.kicker { font-size:13px; font-weight:700; color:#00416c; }
h1 { font-family:'Audiowide',sans-serif; font-size:26px; font-weight:400; margin:0; line-height:1.2; }
.sub { font-size:14px; color:#3c392c; margin:0; line-height:1.5; }
.stars { font-size:13px; color:#221f20; }
.stars span { color:#757575; margin-left:6px; }
.price { font-size:24px; font-weight:700; margin-top:2px; }
.buyrow { display:flex; gap:10px; margin-top:6px; }
.btn-primary { background:#e52718; color:#fff; border:none; border-radius:9999px; padding:14px 28px;
font-weight:700; font-size:15px; }
.btn-secondary { background:#faf8f4; color:#221f20; border:2px solid #221f20; border-radius:9999px;
padding:12px 26px; font-weight:700; font-size:15px; }
.badgerow { display:flex; gap:8px; margin-top:4px; }
.bpill { border-radius:9999px; font-size:11px; font-weight:700; text-transform:uppercase;
letter-spacing:0.5px; padding:4px 12px; }
.bpill.sub { background:#00416c; color:#fff; }
.bpill.yellow { background:#fed103; color:#221f20; }
.featbox { margin-top:auto; border-top:2px dashed #dedede; padding-top:12px; display:flex; gap:20px; }
.featbox div { font-size:12px; color:#3c392c; flex:1; }
.featbox b { display:block; font-size:13px; color:#e52718; font-weight:700; }
footer { height:54px; background:#221f20; color:#faf8f4; display:flex; align-items:center;
justify-content:space-between; padding:0 36px; font-size:12px; }
footer span:last-child { color:#a6cce2; }
</style></head>
<body>
<nav>
<div class="brand">Crunchlabs</div>
<div class="navlinks"><span>Build Boxes</span><span>Hoverbie</span><span>Merch</span><span>Gift Kits</span></div>
<span class="cartdot">3</span>
</nav>
<div class="wrap">
<div class="gallery">
<span class="badge-new">New Kit</span>
<div class="gizmo"><span>HEX BOT</span></div>
</div>
<div class="info">
<div class="kicker">Build Box #14</div>
<h1>HexBug Marble Machine Engineering Kit</h1>
<p class="sub">Snap, wire, and tune your own working marble contraption — every screw explained, every fail celebrated.</p>
<div class="stars">★★★★★ <span>4.9 · 1,540 reviews</span></div>
<div class="price">$34.00</div>
<div class="buyrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="badgerow">
<span class="bpill sub">Subscription Eligible</span>
<span class="bpill yellow">Ages 8+</span>
</div>
<div class="featbox">
<div><b>Hands-On</b>Real tools included</div>
<div><b>Video Guide</b>Step-by-step build</div>
<div><b>No Repeats</b>New kit monthly</div>
</div>
</div>
</div>
<footer>
<span>© Crunchlabs</span>
<span>Shop · Kits · Support · About</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7d7d7d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #4469af; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #f5f5f5; color: #080808;
border: 1px solid #4469af; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f5f5f5; color: #080808;
border: 1px solid #bababa; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7d7d7d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #676986; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; font-family:'Nunito Sans','NeuzeitS-Book',sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e7e7e7;background:#f5f5f5;}
.logo{font-family:'BebasNeue','NB',sans-serif;font-size:26px;letter-spacing:1px;color:#080808;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;color:#7d7d7d;}
.navlinks span:first-child{color:#080808;border-bottom:2px solid #080808;padding-bottom:24px;}
.hero{height:240px;background:#ebebeb;display:flex;align-items:center;padding:0 40px;}
.herotext{width:420px;}
h1{font-family:'BebasNeue','NB',sans-serif;font-size:48px;letter-spacing:1px;line-height:1.1;margin:0 0 12px;color:#080808;}
.sub{font-size:14px;color:#333;margin:0 0 20px;max-width:340px;}
.cta{display:inline-block;background:#4469af;color:#fff;font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:14px 32px;border-radius:8px;}
.sec{padding:24px 40px 0;}
.tags{display:flex;gap:8px;margin-bottom:16px;}
.tag{background:#ffffff;border:1px solid #e7e7e7;border-radius:9999px;padding:6px 16px;font-size:12px;color:#7d7d7d;}
.tag.active{background:#080808;color:#fff;}
.grid{display:flex;gap:16px;}
.card{width:210px;background:#fff;border-radius:8px;padding:0 0 16px;overflow:hidden;position:relative;}
.thumb{height:120px;background:#ebebeb;}
.badge{position:absolute;top:8px;left:8px;background:#676986;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.info{padding:10px 16px 0;}
.pname{font-size:16px;font-weight:600;margin:0 0 4px;}
.pprice{font-size:14px;color:#333;}
</style>
<div class="nav">
<div class="logo">Public Goods</div>
<div class="navlinks"><span>New</span><span>Home</span><span>Personal Care</span><span>Kitchen</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>QUALITY, WITHOUT THE MARKUP.</h1>
<p class="sub">Sustainable everyday essentials, priced honestly, made to last.</p>
<div class="cta">Shop Best Sellers</div>
</div>
</div>
<div class="sec">
<div class="tags">
<div class="tag active">All</div>
<div class="tag">Plant-Based</div>
<div class="tag">Zero Waste</div>
<div class="tag">Refillable</div>
</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#4469af,#080808)"></div><div class="info"><div class="pname">Bamboo Toothbrush Set</div><div class="pprice">$12</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7d7d7d,#080808)"></div><div class="info"><div class="pname">Glass Storage Set</div><div class="pprice">$38</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#999999,#333333)"></div><div class="info"><div class="pname">Organic Cotton Towels</div><div class="pprice">$44</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 2px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #1a1a1a;
border: 1px solid #967b4c; border-radius: 2px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 1.2px; background: #967b4c; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Garamond Premier Pro',Georgia,serif; color:#4d4d4d; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#1a1a1a;font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;}
.logo{font-size:19px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#fff;}
.navlinks{display:flex;gap:26px;font-size:12px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:#f3f3f3;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;background:linear-gradient(100deg,#ffffff 40%,#f5f2ee 100%);}
.herotext{width:460px;}
.kicker{font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#967b4c;margin-bottom:16px;}
.h1{font-size:46px;font-weight:400;letter-spacing:.2px;line-height:1.15;color:#1a1a1a;margin:0 0 16px;}
.sub{font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;font-size:14px;line-height:1.6;color:#4d4d4d;margin:0 0 20px;max-width:380px;}
.cta{display:inline-block;background:#1a1a1a;color:#fff;font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:14px 30px;}
.range{position:absolute;right:70px;top:50px;width:260px;height:180px;background:linear-gradient(160deg,#f3f3f3,#c8c8c8 60%,#967b4c 100%);border-radius:2px;}
.knob{position:absolute;right:100px;top:180px;width:20px;height:20px;border-radius:50%;background:#967b4c;}
.knob2{position:absolute;right:140px;top:180px;width:20px;height:20px;border-radius:50%;background:#967b4c;}
.sec{padding:24px 40px 0;font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;}
.secTitle{font-family:'Garamond Premier Pro',Georgia,serif;font-size:22px;font-weight:400;color:#1a1a1a;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:200px;padding:0;position:relative;}
.thumb{height:110px;background:#f3f3f3;margin-bottom:10px;}
.pname{font-family:'Garamond Premier Pro',Georgia,serif;font-size:16px;color:#1a1a1a;}
.pmeta{font-size:11px;color:#808080;margin-top:3px;letter-spacing:.3px;text-transform:uppercase;}
.pprice{font-size:14px;font-weight:600;color:#967b4c;margin-top:8px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Viking</div>
<div class="navlinks"><span>Ranges</span><span>Refrigeration</span><span>Outdoor</span><span>Design Trade</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Professional Grade, Est. 1987</div>
<div class="h1">Built to outlast trends.</div>
<div class="sub">Professional ranges and refrigeration, engineered for kitchens that mean it.</div>
<div class="cta">Explore the Collection</div>
</div>
<div class="range"></div><div class="knob"></div><div class="knob2"></div>
</div>
<div class="sec">
<div class="secTitle">The Professional Collection</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#f3f3f3,#967b4c)"></div><div class="pname">48" Dual Fuel Range</div><div class="pmeta">Professional</div><div class="pprice">$14,999</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e6e6e6,#695736)"></div><div class="pname">Built-In Refrigerator</div><div class="pmeta">Column Series</div><div class="pprice">$9,499</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#f5f2ee,#876f45)"></div><div class="pname">Outdoor Grill Suite</div><div class="pmeta">Weather-Rated</div><div class="pprice">$6,299</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #545454; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f59e0b; color: #141414;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #141414;
border: 1px solid #f59e0b; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #141414;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #545454; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f6f6f6; color: #1f1f1f;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'Inter', Arial, sans-serif; color:#141414; }
*{box-sizing:border-box;}
.announce{height:32px;background:#f59e0b;color:#141414;font-size:12px;font-weight:400;display:flex;align-items:center;justify-content:center;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-size:19px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.hero{height:224px;background:#f6f6f6;display:flex;align-items:center;padding:0 32px;}
.heroText{width:50%;}
.heroText h1{font-size:36px;font-weight:700;letter-spacing:-.5px;margin:0 0 12px;line-height:1.15;}
.heroText p{font-size:14px;color:#1f1f1f;max-width:320px;margin:0 0 16px;line-height:1.5;}
.btn{display:inline-block;background:#f59e0b;color:#141414;font-size:14px;font-weight:600;padding:12px 26px;border-radius:9999px;}
.heroImg{width:50%;height:224px;position:relative;}
.bottle{position:absolute;left:80px;top:30px;width:60px;height:150px;border-radius:30px;background:linear-gradient(180deg,#fbbf24,#f59e0b);}
.bottle:before{content:'';position:absolute;left:14px;top:-16px;width:32px;height:20px;border-radius:6px;background:#141414;}
.tags{display:flex;gap:8px;padding:16px 32px 0;}
.tag{background:#f59e0b;color:#141414;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:8px 14px;border-radius:9999px;}
.tag.inactive{background:#f6f6f6;color:#545454;border:1px solid #dedede;}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:206px;background:#fff;border-radius:12px;padding:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#f59e0b;color:#141414;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 9px;border-radius:9999px;z-index:2;}
.thumb{height:100px;border-radius:12px;background:#f6f6f6;margin-bottom:10px;display:flex;align-items:center;justify-content:center;}
.thumb-shape{width:36px;height:88px;border-radius:18px;}
.ptitle{font-size:15px;font-weight:600;margin:0 0 4px;}
.pprice{font-size:16px;font-weight:400;margin:0;}
.badges-row{display:flex;gap:6px;margin-top:6px;}
.mini-badge{font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:9999px;background:#f6f6f6;border:1px solid #dedede;color:#1f1f1f;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">Pediatrician tested. Fragrance-free options for sensitive skin.</div>
<div class="nav">
<div class="logo">Tubby Todd</div>
<div class="navlinks"><span>Bath</span><span>Skin</span><span>Bundles</span><span>Our Story</span></div>
</div>
<div class="hero">
<div class="heroText">
<h1>Bath time, made for sensitive skin.</h1>
<p>Squeeze-tube softness for every skin type — clean formulas that feel like a warm hug, not a chore.</p>
<div class="btn">Shop Bestsellers</div>
</div>
<div class="heroImg"><div class="bottle"></div></div>
</div>
<div class="tags">
<div class="tag">Eczema-Prone</div>
<div class="tag inactive">Dry Skin</div>
<div class="tag inactive">Fragrance-Free</div>
<div class="tag inactive">Newborn Safe</div>
</div>
<div class="grid">
<div class="card"><span class="badge">Best Seller</span><div class="thumb"><div class="thumb-shape" style="background:linear-gradient(180deg,#fbbf24,#f59e0b)"></div></div><div class="ptitle">All Over Ointment</div><div class="pprice">$16</div><div class="badges-row"><span class="mini-badge">EWG Verified</span></div></div>
<div class="card"><div class="thumb"><div class="thumb-shape" style="background:linear-gradient(180deg,#f59e0b,#d97706)"></div></div><div class="ptitle">Foaming Bubble Bath</div><div class="pprice">$14</div><div class="badges-row"><span class="mini-badge">Tearless</span></div></div>
<div class="card"><div class="thumb"><div class="thumb-shape" style="background:linear-gradient(180deg,#fde68a,#f59e0b)"></div></div><div class="ptitle">Hair & Body Wash</div><div class="pprice">$15</div><div class="badges-row"><span class="mini-badge">Fragrance-Free</span></div></div>
<div class="card"><div class="thumb"><div class="thumb-shape" style="background:linear-gradient(180deg,#fbbf24,#e68a00)"></div></div><div class="ptitle">Daily Lotion</div><div class="pprice">$16</div><div class="badges-row"><span class="mini-badge">Pediatrician Tested</span></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a2e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a2e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #1a1a2e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6b6b8a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #07b261; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #07b261;
border: 1px solid #07b261; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a2e;
border: 1px solid #c6c6cb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #07b261; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'Helvetica',Arial,sans-serif; color:#1a1a2e; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:20px;font-weight:600;color:#07b261;}
.navlinks{display:flex;gap:24px;font-size:15px;font-weight:500;}
.navlinks .active{color:#07b261;border-bottom:2px solid #07b261;padding-bottom:22px;}
.hero{background:#f6fbfe;padding:24px 40px;display:flex;justify-content:space-between;align-items:center;}
.herotext h1{font-size:32px;font-weight:600;line-height:1.2;margin:0 0 12px;max-width:440px;}
.btn{display:inline-block;background:#07b261;color:#fff;font-size:16px;font-weight:600;padding:12px 28px;border-radius:8px;}
.progress{display:flex;gap:6px;align-items:center;margin-top:16px;}
.step{width:28px;height:28px;border-radius:9999px;background:#e8e8f0;color:#6b6b8a;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:600;}
.step.done{background:#07b261;color:#fff;}
.line{width:30px;height:2px;background:#d4d4e0;}
.line.done{background:#07b261;}
.herovis{width:200px;height:150px;position:relative;}
.herovis .molecule{position:absolute;width:36px;height:36px;border-radius:50%;background:#dbb300;}
.herovis .m1{top:10px;left:20px;} .herovis .m2{top:60px;left:80px;background:#da532c;} .herovis .m3{top:20px;left:130px;background:#07b261;}
.sec{padding:20px 40px 0;}
.sectitle{font-size:18px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,0.08);padding:0;}
.thumb{aspect-ratio:1/1;border-radius:16px 16px 0 0;}
.body{padding:12px;}
.age{display:inline-block;background:#07b261;color:#fff;font-size:12px;font-weight:600;padding:4px 12px;border-radius:9999px;margin-bottom:8px;}
.ptitle{font-size:16px;font-weight:600;margin:0 0 4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#1a1a2e;color:#9e9eb5;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kiwico</div>
<div class="navlinks"><div class="active">Shop</div><div>Subscription</div><div>Gift</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Discovery crates for curious kids.</h1>
<div class="btn">Get Started</div>
<div class="progress">
<div class="step done">1</div><div class="line done"></div>
<div class="step">2</div><div class="line"></div>
<div class="step">3</div>
</div>
</div>
<div class="herovis"><div class="molecule m1"></div><div class="molecule m2"></div><div class="molecule m3"></div></div>
</div>
<div class="sec">
<div class="sectitle">Crates by Age</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#07b261,#dbb300)"></div><div class="body"><div class="age">Ages 5-8</div><div class="ptitle">Volcano Science Kit</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#da532c,#07b261)"></div><div class="body"><div class="age">Ages 9-16</div><div class="ptitle">Circuit Maker Kit</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#dbb300,#da532c)"></div><div class="body"><div class="age">Ages 3-4</div><div class="ptitle">Color Splash Panda Crate</div></div></div>
</div>
</div>
<div class="footer"><span>Shop · About · Support</span><span>Gift a Crate</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffcc00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffcc00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6509; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #614cc2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffcc00; color: #614cc2;
border: 1px solid #614cc2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffcc00; color: #111111;
border: 1px solid #d9ae03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6509; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e6b81f; color: #614cc2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#151515; box-sizing:border-box;
font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic",Arial,sans-serif; }
* { box-sizing:border-box; }
.app { width:960px; height:640px; display:flex; flex-direction:column; overflow:hidden; }
.util { flex:0 0 28px; display:flex; justify-content:flex-end; gap:18px; padding:0 32px; align-items:center;
background:#ffffff; }
.util a { font-size:13px; color:#666666; text-decoration:none; }
.mainnav { flex:0 0 56px; display:flex; align-items:center; padding:0 32px; gap:26px; background:#ffffff;
border-bottom:1px solid #f2f2f2; }
.mainnav .item { font-size:15px; color:rgba(0,0,0,0.87); position:relative; height:100%; display:flex; align-items:center; }
.mainnav .item.act { color:#614cc2; font-weight:600; }
.mainnav .item.act::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:#ffe066; }
.mainnav .spacer { flex:1; }
.mainnav .badge { background:#ffcc00; color:#000000; font-size:12px; font-weight:600; border-radius:3px;
padding:2px 6px; }
.hero { flex:0 0 180px; display:flex; gap:20px; padding:18px 32px 0; align-items:center; }
.kbcard { width:280px; height:150px; border-radius:16px; flex:0 0 280px;
background:linear-gradient(135deg,#1c1c1c 0%, #3a3a3a 60%, #151515 100%);
box-shadow:rgba(0,0,0,0.16) 0px 1px 3px 0px; padding:18px; color:#ffffff; position:relative; }
.kbcard .cardbrand { font-size:14px; font-weight:600; color:#ffe066; }
.kbcard .cardno { position:absolute; bottom:40px; left:18px; font-size:15px; letter-spacing:2px; color:#f0f0f0; }
.kbcard .cardname { position:absolute; bottom:18px; left:18px; font-size:12px; color:#cfcfcf; }
.paybtnwrap { flex:1; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.paybtnwrap .crumb { background:#faeaad; color:#333333; font-size:14px; padding:4px 10px; border-radius:0; }
.paybtn { height:56px; padding:0 30px; background:#ffcc00; color:#000000; border:none; border-radius:4px;
font-size:18px; font-weight:600; display:flex; align-items:center; }
.labelrow { flex:0 0 34px; display:flex; align-items:center; padding:0 32px 0; }
.labelrow .lbl { font-size:18px; font-weight:600; color:#614cc2; }
.grid { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 32px 20px; overflow:hidden; }
.card { background:#ffffff; border-radius:16px; box-shadow:rgba(0,0,0,0.16) 0px 1px 3px 0px;
display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:0 18px;
gap:8px; position:relative; }
.card .ic { width:26px; height:26px; border-radius:8px; background:#f9fafe; border:1px solid #614cc2; }
.card .lbl2 { font-size:14px; color:#333333; font-weight:400; }
.card .dot { position:absolute; top:10px; right:10px; width:8px; height:8px; border-radius:50%; background:#ffcc00; }
</style></head>
<body>
<div class="app">
<div class="util"><a>Sign up</a><a>Support</a></div>
<div class="mainnav">
<div class="item">My KB</div>
<div class="item">Benefits</div>
<div class="item">Finance</div>
<div class="item act">Card</div>
<div class="item">Service</div>
<div class="item">Life</div>
<div class="spacer"></div>
<div class="badge">3</div>
</div>
<div class="hero">
<div class="kbcard">
<div class="cardbrand">KB Pay</div>
<div class="cardno">5312 •••• •••• 9021</div>
<div class="cardname">JAMIE R.</div>
</div>
<div class="paybtnwrap">
<div class="crumb">Card > Tap to Pay</div>
<button class="paybtn">Tap to Pay</button>
</div>
</div>
<div class="labelrow"><div class="lbl">Popular menu</div></div>
<div class="grid">
<div class="card"><div class="ic"></div><div class="lbl2">Transfer</div></div>
<div class="card"><div class="ic"></div><div class="lbl2">Card bill</div><div class="dot"></div></div>
<div class="card"><div class="ic"></div><div class="lbl2">Points</div></div>
<div class="card"><div class="ic"></div><div class="lbl2">Loan</div></div>
<div class="card"><div class="ic"></div><div class="lbl2">Benefits</div></div>
<div class="card"><div class="ic"></div><div class="lbl2">Support</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2864f0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2864f0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #99b4f3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2863ef; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2864f0; color: #ffffff;
border: 1px solid #2863ef; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2864f0; color: #f5f5f5;
border: 1px solid #497bf1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #99b4f3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2864f0; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#323232; box-sizing:border-box;
font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #e1dcdc; background:#ffffff; }
.brand { font-size:18px; font-weight:700; letter-spacing:-0.2px; margin:0; color:#2864f0; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#595959; }
.hdr-btn { background:#2864f0; color:#ffffff; border-radius:5px; padding:4px 20px; height:31px;
font-size:14px; font-weight:700; display:flex; align-items:center; white-space:nowrap; }
.hero { padding:36px 36px 26px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; }
.hero h1 { font-size:34px; font-weight:700; line-height:1.4; margin:0; color:#323232; }
.hero p { font-size:14px; color:#595959; line-height:1.5; margin:0; max-width:480px; }
.hero-row { display:flex; gap:12px; margin-top:8px; }
.btn-primary { background:#2864f0; color:#ffffff; border:2px solid #2864f0; border-radius:8px; padding:0 16px;
height:48px; font-size:16px; font-weight:700; display:flex; align-items:center; white-space:nowrap; }
.btn-outline { background:#ffffff; color:#2864f0; border:2px solid #2864f0; border-radius:8px; padding:0 16px;
height:48px; font-size:16px; font-weight:700; display:flex; align-items:center; white-space:nowrap; }
.section-label { font-size:12px; font-weight:700; color:#595959; letter-spacing:0.04em; text-transform:uppercase;
text-align:center; margin:0 0 14px; }
.segments { padding:8px 36px 20px; }
.seg-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.seg-card { background:#ebf3ff; border-radius:8px; padding:14px; height:82px; display:flex; flex-direction:column;
justify-content:space-between; }
.seg-card .name { font-size:15px; font-weight:700; color:#323232; }
.seg-card .desc { font-size:12px; color:#595959; }
.products { padding:6px 36px 24px; }
.prod-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.prod-card { background:#ffffff; border:1px solid #e1dcdc; border-radius:8px; padding:10px 14px; height:56px;
display:flex; align-items:center; font-size:15px; font-weight:700; color:#2864f0; }
footer { border-top:1px solid #e1dcdc; padding:12px 36px; display:flex; justify-content:space-between;
align-items:center; font-size:11px; color:#595959; background:#ffffff; }
</style></head>
<body>
<nav>
<p class="brand">freee</p>
<div class="navlinks"><span>Accounting</span><span>HR & Payroll</span><span>Invoicing</span><span>Pricing</span></div>
<div class="hdr-btn">Sign up</div>
</nav>
<section class="hero">
<h1>An integrated platform<br>for running your business freely</h1>
<p>Accounting, payroll, and approvals in one place — so small business owners spend less time on back-office work.</p>
<div class="hero-row">
<div class="btn-primary">Start free trial</div>
<div class="btn-outline">View pricing</div>
</div>
</section>
<section class="segments">
<p class="section-label">Choose where to start</p>
<div class="seg-grid">
<div class="seg-card"><span class="name">Accounting</span><span class="desc">Bookkeeping made simple</span></div>
<div class="seg-card"><span class="name">HR</span><span class="desc">Attendance & onboarding</span></div>
<div class="seg-card"><span class="name">Payroll</span><span class="desc">Pay staff on time</span></div>
<div class="seg-card"><span class="name">Invoicing</span><span class="desc">Send & track invoices</span></div>
</div>
</section>
<section class="products">
<p class="section-label">All products</p>
<div class="prod-grid">
<div class="prod-card">Expense management</div>
<div class="prod-card">Tax filing support</div>
<div class="prod-card">Business cards</div>
</div>
</section>
<footer>
<span>© freee</span>
<span>freee · Products · Pricing · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-size: 20px; font-weight:700; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-size: 12px; font-weight:400; line-height:1.4; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #FF3341; color: #ffffff;
border: none; border-radius: 999; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #FFFFFF; color: #FF3341;
border: 1px solid #FF3341; border-radius: 999;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #FFFFFF; color: #111111;
border: 1px solid #c4c4c4; border-radius: 12;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #ffe2e4; color: #FF3341;
border-radius: 999; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #FFFFFF; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
nav { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; }
.brand { font-size: 20px; font-weight: 800; color: #EA1D2C; margin: 0; }
.searchbar { width: 320px; height: 40px; background: #F2F2F2; border-radius: 999px; display: flex; align-items: center; padding: 0 16px; gap: 8px; }
.searchbar span { font-size: 13px; color: #A6A6A6; }
.navicons { display: flex; gap: 16px; align-items: center; }
.navicons .ic { width: 30px; height: 30px; border-radius: 50%; background: #F2F2F2; }
.cta { background: #EA1D2C; color: #fff; border: none; border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: 12px; }
.catnav { display: flex; gap: 10px; padding: 8px 32px 14px; }
.chip { background: #F2F2F2; color: #3E3E3E; font-size: 12px; font-weight: 700; padding: 8px 16px; border-radius: 999px; }
.chip.on { background: #EA1D2C; color: #fff; }
.coupon { margin: 0 32px 18px; background: linear-gradient(90deg, #F7C5CB, #FBE0E3); border-radius: 16px; padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; }
.coupon h3 { margin: 0; font-size: 16px; font-weight: 800; color: #A50D18; }
.coupon p { margin: 2px 0 0; font-size: 12px; color: #5c1f24; }
.coupon button { background: #EA1D2C; color: #fff; border: none; border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: 12px; }
.section h2 { font-size: 16px; font-weight: 800; color: #1A1A1A; margin: 0 0 12px; padding: 0 32px; }
.cards { display: flex; gap: 16px; padding: 0 32px; }
.card { flex: 1; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.card .img { height: 88px; position: relative; }
.card .img .badge { position: absolute; top: 8px; left: 8px; background: #50A773; color: #fff; font-size: 9px; font-weight: 700; padding: 3px 7px; border-radius: 999px; }
.card .info { background: #fff; padding: 10px 12px; }
.card .info h4 { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: #3E3E3E; }
.card .meta { display: flex; justify-content: space-between; font-size: 11px; color: #6F6F6F; }
.card .meta .rate { color: #FFB800; font-weight: 700; }
</style>
<nav>
<p class="brand">iFood</p>
<div class="searchbar"><span>🔍 Search restaurants, dishes...</span></div>
<div class="navicons"><div class="ic"></div><div class="ic"></div><button class="cta">Sign in</button></div>
</nav>
<div class="catnav">
<span class="chip on">Restaurants</span>
<span class="chip">Market</span>
<span class="chip">Drinks</span>
<span class="chip">Pharmacy</span>
<span class="chip">Pet shop</span>
</div>
<div class="coupon">
<div><h3>Get $8 off your first order</h3><p>Use code WELCOME8 at checkout</p></div>
<button>Grab coupon</button>
</div>
<div class="section">
<h2>Best rated near you</h2>
<div class="cards">
<div class="card"><div class="img" style="background:linear-gradient(135deg,#FFB8A3,#EA1D2C)"><span class="badge">Free delivery</span></div><div class="info"><h4>Green Bowl Kitchen</h4><div class="meta"><span class="rate">★ 4.8</span><span>25–35 min</span></div></div></div>
<div class="card"><div class="img" style="background:linear-gradient(135deg,#FF3341,#A50D18)"><span class="badge">Free delivery</span></div><div class="info"><h4>Casa do Pastel</h4><div class="meta"><span class="rate">★ 4.6</span><span>30–40 min</span></div></div></div>
<div class="card"><div class="img" style="background:linear-gradient(135deg,#F7C5CB,#E8A3AB)"></div><div class="info"><h4>Sweet Cream Co.</h4><div class="meta"><span class="rate">★ 4.9</span><span>20–30 min</span></div></div></div>
<div class="card"><div class="img" style="background:linear-gradient(135deg,#50A773,#2E7D32)"><span class="badge">Open now</span></div><div class="info"><h4>Fresh Market</h4><div class="meta"><span class="rate">★ 4.5</span><span>40–50 min</span></div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafb; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafb; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #807e7e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.8px; background: #ba8748; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.8px; background: transparent; color: #121212;
border: 1px solid #121212; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafb; color: #121212;
border: 1px solid #eaeaea; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #807e7e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 1.2px; background: #cec9c0; color: #342f28;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafb; font-family:Arial,Helvetica,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:rgba(255,255,255,0.95);border-bottom:1px solid #eaeaea;}
.logo{font-family:Georgia,serif;font-size:20px;color:#121212;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;color:#121212;}
.hero{height:320px;background:linear-gradient(160deg,#4b453a 0%,#2b2b2b 60%);display:flex;align-items:center;justify-content:center;position:relative;}
.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(18,18,18,0.2),rgba(18,18,18,0.5));}
.herocontent{text-align:center;z-index:2;}
.herokicker{color:#e9d8c4;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:14px;}
.herocontent h1{font-family:Georgia,serif;font-size:48px;font-weight:300;color:#fff;margin:0 0 16px;}
.btn{display:inline-block;background:#ba8748;color:#fff;font-size:14px;letter-spacing:0.8px;text-transform:uppercase;padding:14px 32px;}
.collectionband{background:#f5eee5;padding:24px 40px;display:flex;align-items:center;justify-content:space-between;margin-top:0;}
.collectionband h2{font-family:Georgia,serif;font-size:26px;font-weight:400;margin:0;}
.badges{display:flex;gap:8px;}
.cbadge{background:#cec9c0;color:#342f28;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;padding:4px 10px;}
.grid{display:flex;gap:0;padding:20px 40px;}
.card{flex:1;background:#f5f5f5;padding:0;margin-right:2px;}
.thumb{aspect-ratio:4/3;background:#e5ded4;}
.body{padding:14px 4px;}
.pname{font-family:Georgia,serif;font-size:18px;}
.psub{font-size:12px;color:#807e7e;margin-top:4px;text-transform:uppercase;letter-spacing:0.4px;}
</style>
<div class="nav">
<div class="logo">Royal Botania</div>
<div class="navlinks"><div>Seating</div><div>Tables</div><div>Lighting</div><div>Projects</div></div>
</div>
<div class="hero">
<div class="herocontent">
<div class="herokicker">Belgian Outdoor Living</div>
<h1>Bronze light on teak.</h1>
<div class="btn">Explore Collections</div>
</div>
</div>
<div class="collectionband">
<h2>Kabana Lounge Collection</h2>
<div class="badges"><span class="cbadge">Teak</span><span class="cbadge">Bronze</span></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="body"><div class="pname">Kabana Lounge Chair</div><div class="psub">Teak & Rope</div></div></div>
<div class="card"><div class="thumb" style="background:#ded4c4"></div><div class="body"><div class="pname">Ninix Dining Table</div><div class="psub">Bronze Frame</div></div></div>
<div class="card"><div class="thumb" style="background:#e5ded4"></div><div class="body"><div class="pname">Alu Modular Sofa</div><div class="psub">Powder-Coated</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a172c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a172c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 450; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #1a172c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #79889f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 450; line-height: 1; letter-spacing: 0.04em; background: #ff6b18; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 450; line-height: 1; letter-spacing: 0.04em; background: transparent; color: #1a172c;
border: 1px solid #ff6b18; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a172c;
border: 1px solid #dedede; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #79889f; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.3; letter-spacing: 0.06em; background: #f0f0f0; color: #1a172c;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#1a172c; font-family:Arial,sans-serif;
}
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-weight:450;font-size:15px;letter-spacing:.02em;}
.logo b{color:#ff6b18;}
.navlinks{display:flex;gap:24px;font-size:13px;text-transform:uppercase;}
.hero{background:#1a172c;color:#fff;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;}
.hero .tag{font-family:'Courier New',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#add9f2;margin-bottom:14px;}
.hero h1{font-size:46px;font-weight:450;letter-spacing:-.5px;line-height:1.05;margin:0 0 12px;}
.hero h1 span{color:#ff6b18;}
.hero p{font-size:14px;color:#cce1f5;margin:0 0 18px;max-width:420px;}
.pillars{display:flex;gap:8px;margin-bottom:18px;}
.pillar{border:1px solid #fff;font-family:'Courier New',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;color:#fff;}
.cta{background:#ff6b18;color:#fff;font-size:14px;font-weight:450;text-transform:uppercase;letter-spacing:.04em;padding:12px 26px;border-radius:8px;}
.section{padding:22px 32px;}
.grid{display:flex;gap:16px;}
.card{flex:1;background:#eeeeee;border-radius:8px;overflow:hidden;}
.card .img{aspect-ratio:1/1;height:120px;}
.i1{background:linear-gradient(160deg,#ff6b18,#d94e00);}
.i2{background:linear-gradient(160deg,#81c1e6,#cce1f5);}
.i3{background:linear-gradient(160deg,#1a172c,#3d3854);}
.card .info{padding:10px 12px;}
.card h3{font-size:14px;margin:0 0 4px;}
.card .notes{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px;}
.note{background:#cce1f5;border-radius:9999px;font-size:10px;padding:3px 9px;color:#1a172c;}
.card .price{font-size:13px;color:#333;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Dedcool</div>
<div class="navlinks"><span>Shop</span><span>Fragrance</span><span>Body</span><span>About</span></div>
</div>
<div class="hero">
<div class="tag">Making life smell really good</div>
<h1>Genderless. <span>Vegan.</span> Real.</h1>
<p>Fragrance built like an ingredient sheet, not a marketing campaign.</p>
<div class="pillars"><div class="pillar">Genderless</div><div class="pillar">Vegan</div><div class="pillar">Non Toxic</div></div>
<div class="cta">Shop Best Sellers</div>
</div>
<div class="section">
<div class="grid">
<div class="card"><div class="img i1"></div><div class="info"><h3>Milk EDP</h3><div class="notes"><span class="note">Woody</span><span class="note">Musk</span></div><div class="price">$78</div></div></div>
<div class="card"><div class="img i2"></div><div class="info"><h3>Coco Bod</h3><div class="notes"><span class="note">Citrus</span><span class="note">Coconut</span></div><div class="price">$32</div></div></div>
<div class="card"><div class="img i3"></div><div class="info"><h3>Discovery Set</h3><div class="notes"><span class="note">Bundle</span></div><div class="price">$45</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #222222; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #222222;
border: 1px solid #222222; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #d4a373; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#3f3f3f; box-sizing:border-box;
font-family:'Roboto', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; gap:26px; padding:0 32px; border-bottom:1px solid #dddddd; }
.logo { font-size:18px; font-weight:700; color:#222222; }
.navlink { font-size:14px; font-weight:500; text-transform:uppercase; letter-spacing:.2px; color:#6a6a6a; }
.navlink.active { color:#222222; border-bottom:2px solid #222222; padding-bottom:22px; margin-bottom:-23px; }
.hero { background:#f7f7f7; padding:24px 32px; display:flex; gap:28px; align-items:center; }
.diskart { width:200px; height:200px; border-radius:50%; flex:0 0 auto; position:relative;
background:repeating-radial-gradient(circle at center, #222222 0 3px, #3f3f3f 3px 6px); box-shadow:0 6px 16px rgba(0,0,0,.15); }
.diskart::before { content:''; position:absolute; inset:70px; border-radius:50%; background:#d4a373; }
.diskart::after { content:''; position:absolute; inset:92px; border-radius:50%; background:#222222; }
.herotext h1 { font-size:26px; font-weight:700; margin:0 0 8px; color:#222222; }
.herotext p { font-size:14px; line-height:1.55; max-width:480px; color:#3f3f3f; }
.stage { display:flex; gap:26px; padding:20px 32px 0; }
.info { flex:1; }
.kicker { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.2px; color:#6a6a6a; margin-bottom:6px; }
h2 { font-size:20px; font-weight:700; margin:0 0 10px; color:#222222; }
.specgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:16px; }
.sc { background:#f7f7f7; border-radius:12px; padding:10px 14px; }
.sc .l { font-size:11px; text-transform:uppercase; color:#929292; font-weight:500; }
.sc .v { font-size:15px; font-weight:600; color:#222222; margin-top:2px; }
.pricerow { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.price { font-size:22px; font-weight:700; color:#222222; }
.from { font-size:12px; color:#929292; }
.btnrow { display:flex; gap:10px; }
.btn-p { background:#222222; color:#fff; border:none; border-radius:8px; height:44px; padding:0 26px;
font-size:15px; font-weight:600; }
.btn-s { background:#fff; color:#222222; border:1px solid #dddddd; border-radius:8px; height:44px; padding:0 20px;
font-size:15px; font-weight:600; }
.steps { width:280px; }
.steprow { display:flex; gap:10px; margin-bottom:12px; align-items:flex-start; }
.stepnum { width:22px; height:22px; border-radius:50%; background:#d4a373; color:#fff; font-size:11px; font-weight:700;
display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.stepbody b { font-size:13px; color:#222222; display:block; }
.stepbody span { font-size:12px; color:#6a6a6a; }
</style></head>
<body>
<nav>
<span class="logo">Citizen Vinyl</span>
<span class="navlink active">Pressing</span>
<span class="navlink">Services</span>
<span class="navlink">Shop</span>
<span class="navlink">Contact</span>
</nav>
<div class="hero">
<div class="diskart"></div>
<div class="herotext">
<h1>Custom Vinyl Pressing Package</h1>
<p>Full-service record production from lacquer cut to jacket printing, run on the same pressing floor since day one. Precision, turnaround time, and audio fidelity — no lifestyle nostalgia required.</p>
</div>
</div>
<div class="stage">
<div class="info">
<div class="kicker">Standard Package</div>
<h2>500-Unit Run, 12" Black Vinyl</h2>
<div class="specgrid">
<div class="sc"><div class="l">Turnaround</div><div class="v">10–12 weeks</div></div>
<div class="sc"><div class="l">Weight</div><div class="v">140g / 180g</div></div>
<div class="sc"><div class="l">Jacket</div><div class="v">Full-color, single pocket</div></div>
<div class="sc"><div class="l">Test Pressings</div><div class="v">2 included</div></div>
</div>
<div class="pricerow"><span class="from">Starting at</span><span class="price">$2,450.00</span></div>
<div class="btnrow">
<button class="btn-p">Get a Quote</button>
<button class="btn-s">View Pricing</button>
</div>
</div>
<div class="steps">
<div class="steprow"><span class="stepnum">1</span><div class="stepbody"><b>Master & Cut</b><span>Lacquer cut in-house from your final mix.</span></div></div>
<div class="steprow"><span class="stepnum">2</span><div class="stepbody"><b>Press & Print</b><span>Vinyl pressed and jackets printed on site.</span></div></div>
<div class="steprow"><span class="stepnum">3</span><div class="stepbody"><b>Quality Check</b><span>Every batch sampled and inspected before ship.</span></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ff6319; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #f9fafb; color: #141414;
border: 1px solid #ff6319; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9fafb; color: #1a1a1a;
border: 1px solid #c0c0c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff6319; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#141414; color:#f9fafb; box-sizing:border-box;
font-family:'Arial Narrow','Archivo Narrow',sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#121212; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #1a1a1a; }
.brand { color:#ffffff; font-size:20px; font-weight:700; margin:0; letter-spacing:0.5px; text-transform:uppercase; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#888888; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; }
.searchorb { width:30px; height:30px; border-radius:50%; background:#1a1a1a; border:1px solid #333; }
.hero { height:310px; position:relative; display:flex; align-items:flex-end; padding:0 32px 26px; background:linear-gradient(180deg, #2a2a2a 0%, #141414 65%); }
.scrim { position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,20,20,0.95), rgba(20,20,20,0.2) 60%); }
.silhouette { position:absolute; right:60px; top:20px; width:180px; height:260px; background:linear-gradient(180deg,#1a1a1a,#0d0d0d); border-radius:20px 20px 60px 60px; opacity:0.8; }
.thermal { position:absolute; right:230px; top:44px; background:#ff6319; color:#fff; font-size:10px; font-weight:700; padding:5px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:0.05em; }
.heroTxt { position:relative; z-index:2; max-width:420px; }
.heroTxt h1 { font-size:34px; font-weight:700; margin:0 0 10px; letter-spacing:-0.5px; line-height:1.1; text-transform:uppercase; }
.heroTxt p { font-size:13px; color:#bbbbbb; margin:0 0 18px; max-width:340px; }
.heroTxt .cta { display:inline-block; background:#ff6319; color:#fff; font-weight:700; font-size:13px; padding:12px 28px; border-radius:20px; text-transform:uppercase; letter-spacing:0.04em; }
.section-label { padding:16px 32px 8px; font-size:14px; font-weight:700; color:#f9fafb; text-transform:uppercase; letter-spacing:0.06em; }
.grid { display:flex; gap:12px; padding:0 32px; }
.card { flex:1; background:#f9fafb; border-radius:20px; padding:12px; position:relative; }
.card .art { height:96px; border-radius:14px; margin-bottom:8px; position:relative; }
.a1 { background:linear-gradient(160deg,#888888,#1a1a1a); }
.a2 { background:linear-gradient(160deg,#ff6319,#e55514); }
.a3 { background:linear-gradient(160deg,#3a3a3a,#141414); }
.a4 { background:linear-gradient(160deg,#7b7b7b,#3a3a3a); }
.card .pill { position:absolute; top:18px; left:18px; background:#ff6319; color:#fff; font-size:8px; font-weight:700; padding:3px 9px; border-radius:999px; text-transform:uppercase; }
.card h3 { color:#141414; font-size:12px; font-weight:700; margin:0 0 4px; text-transform:uppercase; }
.card p { font-size:10px; color:#888888; margin:0 0 6px; }
.card .price { font-size:13px; font-weight:700; color:#ff6319; }
footer { height:56px; margin-top:14px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-top:1px solid #1a1a1a; }
footer span { color:#888888; font-size:10px; text-transform:uppercase; letter-spacing:0.05em; }
</style></head>
<body>
<nav>
<p class="brand">First Lite</p>
<div class="navlinks"><span>Whitetail</span><span>Waterfowl</span><span>Baselayer</span><span>Outerwear</span></div>
<div class="searchorb"></div>
</nav>
<div class="hero">
<div class="scrim"></div>
<div class="silhouette"></div>
<span class="thermal">THERMAL</span>
<div class="heroTxt">
<h1>Built for the<br>backcountry.</h1>
<p>Merino base layers engineered for the pack-in, the sit, and the pack-out. No noise. No compromise.</p>
<span class="cta">Shop the System</span>
</div>
</div>
<div class="section-label">Core System</div>
<div class="grid">
<div class="card"><div class="art a1"></div><span class="pill">Thermal</span><h3>Chama Hoody</h3><p>Merino Baselayer</p><div class="price">$99</div></div>
<div class="card"><div class="art a2"></div><h3>Kiln Pant</h3><p>Insulated Softshell</p><div class="price">$219</div></div>
<div class="card"><div class="art a3"></div><h3>Cinder Jacket</h3><p>Windproof Shell</p><div class="price">$249</div></div>
<div class="card"><div class="art a4"></div><span class="pill">Thermal</span><h3>Ridge Beanie</h3><p>Merino Blend</p><div class="price">$39</div></div>
</div>
<footer>
<span>SCENT CONTROL TECH</span><span>PACKABILITY GUIDE</span><span>FIELD-TESTED WARRANTY</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.33; letter-spacing: 0.3px; background: #005eb8; color: #ffffff;
border: none; border-radius: 8px; padding: 13px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.33; letter-spacing: 0.3px; background: #ffffff; color: #005eb8;
border: 1px solid #005eb8; border-radius: 8px;
padding: 11px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #f8f8f8; color: #333333;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dddddd;}
.logo{font-size:19px;font-weight:700;color:#1a1a1a;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#333333;}
.hero{height:250px;display:flex;padding:0 40px;background:#f8f8f8;}
.heroText{width:440px;display:flex;flex-direction:column;justify-content:center;}
.h1{font-size:30px;font-weight:700;line-height:1.2;color:#1a1a1a;margin:0 0 12px;}
.sub{font-size:14px;color:#888888;line-height:1.5;margin:0 0 20px;width:380px;}
.cta{display:inline-flex;align-items:center;justify-content:center;width:180px;height:46px;background:#005eb8;color:#ffffff;font-size:14px;font-weight:700;border-radius:4px;}
.specs{display:flex;gap:1px;background:#dddddd;margin-top:14px;}
.speccell{flex:1;background:#ffffff;text-align:center;padding:8px;}
.speclabel{font-size:9px;color:#888888;text-transform:uppercase;}
.specval{font-size:14px;font-weight:700;color:#1a1a1a;margin-top:2px;}
.unit{display:flex;align-items:center;justify-content:center;width:480px;}
.tower{width:130px;height:200px;border-radius:8px;background:linear-gradient(180deg,#ffffff,#dddddd);border:1px solid #dddddd;}
.sec{padding:22px 40px 0;}
.secTitle{font-size:18px;font-weight:700;color:#1a1a1a;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;border:1px solid #dddddd;border-radius:4px;padding:12px;}
.thumb{height:96px;border-radius:2px;margin-bottom:10px;background:#f8f8f8;}
.pname{font-size:13px;font-weight:700;color:#1a1a1a;margin:0 0 4px;}
.pprice{font-size:14px;font-weight:700;color:#005eb8;}
</style>
<div class="nav">
<div class="logo">Winix</div>
<div class="navlinks"><span>Air Purifiers</span><span>Filters</span><span>Support</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">99.97% True HEPA Filtration.</div>
<div class="sub">Engineered for measurable results, not marketing claims.</div>
<div class="cta">Shop Purifiers</div>
<div class="specs">
<div class="speccell"><div class="speclabel">CADR</div><div class="specval">243</div></div>
<div class="speccell"><div class="speclabel">Coverage</div><div class="specval">360 sqft</div></div>
<div class="speccell"><div class="speclabel">Noise</div><div class="specval">27dB</div></div>
</div>
</div>
<div class="unit"><div class="tower"></div></div>
</div>
<div class="sec">
<div class="secTitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#005eb8,#dddddd);"></div><div class="pname">AM90 True HEPA Tower</div><div class="pprice">$299.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#dddddd,#005eb8);"></div><div class="pname">Replacement Filter S</div><div class="pprice">$49.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#888888,#005eb8);"></div><div class="pname">Compact HR900 Purifier</div><div class="pprice">$179.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.25; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.38; letter-spacing: 0.08em; background: #475942; color: #ffffff;
border: none; border-radius: 2px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.38; letter-spacing: 0.08em; background: transparent; color: #475942;
border: 1px solid #475942; border-radius: 2px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1c1c1c;
border: 1px solid #e5e5e5; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.45; letter-spacing: 0.10em; background: #475942; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#3a3a3a; font-family:'Neue Haas Unica','Helvetica Neue',Arial,sans-serif; }
*{box-sizing:border-box;}
.tradebar{height:32px;background:#1c1c1c;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e5e5e5;}
.logo{font-size:19px;font-weight:500;color:#1c1c1c;}
.navlinks{display:flex;gap:22px;font-size:14px;color:#1c1c1c;}
.tradebtn{background:#1c1c1c;color:#fff;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:9px 18px;border-radius:2px;}
.hero{height:230px;background:#1c1c1c;display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:0;top:0;bottom:0;width:45%;background:linear-gradient(135deg,#475942,#8fa48b);}
.herotext{max-width:400px;color:#fff;position:relative;z-index:1;}
.herotext h1{font-family:'Loretta Display',Georgia,serif;font-size:36px;font-weight:400;line-height:1.1;margin:0 0 14px;}
.cta{display:inline-block;background:#fff;color:#1c1c1c;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:14px 28px;border-radius:2px;}
.collheader{background:#f8f7f5;padding:20px 32px;}
.collheader h2{font-family:'Loretta Display',Georgia,serif;font-size:26px;font-weight:400;color:#1c1c1c;margin:0 0 4px;}
.collheader p{font-size:14px;color:#3a3a3a;margin:0;max-width:500px;}
.grid{display:flex;gap:14px;padding:14px 32px 0;}
.card{width:200px;}
.thumb{aspect-ratio:4/3;height:120px;margin-bottom:8px;}
.clabel{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#717171;margin-bottom:2px;}
.ptitle{font-size:16px;font-weight:500;color:#1c1c1c;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#475942;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="tradebar">Trade pricing available — apply for a trade account</div>
<div class="nav">
<div class="logo">Summer Classics</div>
<div class="navlinks"><span>Outdoor Dining</span><span>Seating</span><span>Materials</span><span>Trade</span></div>
<div class="tradebtn">Trade Login</div>
</div>
<div class="hero">
<div class="herotext"><h1>Furniture that outlasts the terrace.</h1><div class="cta">Shop Collections</div></div>
</div>
<div class="collheader"><h2>Coastal Teak Collection</h2><p>Season-lit tables set for eight, in teak and powdercoat built for a lifetime outdoors.</p></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#475942,#c8b89a)"></div><div class="clabel">Coastal Teak</div><div class="ptitle">Dining Table 96in</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#324030,#475942)"></div><div class="clabel">Resin Wicker</div><div class="ptitle">Lounge Chair</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c8b89a,#475942)"></div><div class="clabel">Cast Aluminum</div><div class="ptitle">Side Table</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d4dcd2,#475942)"></div><div class="clabel">Coastal Teak</div><div class="ptitle">Bench 60in</div></div>
</div>
<div class="footer"><span>© Summer Classics</span><span>Trade Program Care Guide</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #1a1a1a;
border: 1px solid #1a1a1a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dadada; color: #1a1a1a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1A1A1A; color:#ffffff; box-sizing:border-box;
font-family:Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.theater { position:relative; width:960px; height:640px; background:#1A1A1A; }
.topstrip { position:absolute; top:0; left:0; right:0; height:40px; display:flex; align-items:center;
justify-content:space-between; padding:0 20px; z-index:3; }
.rec { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:0.4pt; }
.rec .dot { width:9px; height:9px; border-radius:50%; background:#E02828; }
.timer { font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; color:#fff; }
.viewtoggle { font-size:12px; color:#B0B0B0; }
.grid { position:absolute; top:40px; left:0; right:0; bottom:88px; display:grid;
grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:4px; padding:4px; }
.tile { position:relative; border-radius:8px; overflow:hidden; background:#3A3A3A; }
.tile .fill { position:absolute; inset:0; }
.g1 .fill { background:linear-gradient(160deg,#4a6fa5,#2b3f5c); }
.g2 .fill { background:linear-gradient(160deg,#8a6c9e,#4a3a5c); }
.g3 .fill { background:linear-gradient(160deg,#6a9a7a,#2f4a3a); }
.g4 .fill { background:linear-gradient(160deg,#a58a5a,#5c4a2f); }
.g5 .fill { background:#3A3A3A; }
.g6 .fill { background:linear-gradient(160deg,#9a6a6a,#4a2f2f); }
.avatar { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px;
border-radius:50%; background:#555; display:flex; align-items:center; justify-content:center;
font-size:16px; font-weight:700; color:#ddd; }
.namechip { position:absolute; left:8px; bottom:8px; background:rgba(0,0,0,0.45); border-radius:6px;
padding:3px 8px; font-size:13px; font-weight:600; }
.mutebadge { position:absolute; left:8px; bottom:34px; width:22px; height:22px; border-radius:50%;
background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; font-size:11px; color:#E02828; }
.active-speaker { box-shadow: inset 0 0 0 3px #2D8CFF; }
.controlbar { position:absolute; left:12px; right:12px; bottom:12px; height:72px; border-radius:16px;
background:rgba(45,45,45,0.96); border-top:1px solid #3A3A3A; display:flex; align-items:center;
justify-content:space-evenly; z-index:3; }
.ctrl { display:flex; flex-direction:column; align-items:center; gap:4px; width:80px; }
.ctrl .ic { font-size:22px; }
.ctrl .lb { font-size:11px; font-weight:600; }
.ctrl.muted .ic, .ctrl.muted .lb { color:#E02828; }
.ctrl.leave { }
.ctrl.leave .ic, .ctrl.leave .lb { color:#E02828; }
</style></head>
<body>
<div class="theater">
<div class="topstrip">
<div class="rec"><span class="dot"></span>RECORDING</div>
<div class="timer">32:47</div>
<div class="viewtoggle">Gallery · Zoom (iOS)</div>
</div>
<div class="grid">
<div class="tile g1"><div class="fill"></div><div class="namechip">Jihoon</div></div>
<div class="tile g2 active-speaker"><div class="fill"></div><div class="namechip">Minji</div></div>
<div class="tile g3"><div class="fill"></div><div class="namechip">Jordan</div><div class="mutebadge">🎤</div></div>
<div class="tile g4"><div class="fill"></div><div class="namechip">Soyeon</div></div>
<div class="tile g5"><div class="avatar">CV</div><div class="fill"></div><div class="namechip">Camila</div></div>
<div class="tile g6"><div class="fill"></div><div class="namechip">Taemin</div></div>
</div>
<div class="controlbar">
<div class="ctrl muted"><span class="ic">🎤</span><span class="lb">Unmute</span></div>
<div class="ctrl"><span class="ic">📹</span><span class="lb">Stop Video</span></div>
<div class="ctrl"><span class="ic">🖥</span><span class="lb">Share</span></div>
<div class="ctrl"><span class="ic">👥</span><span class="lb">Participants</span></div>
<div class="ctrl"><span class="ic">🙂</span><span class="lb">React</span></div>
<div class="ctrl leave"><span class="ic">☎</span><span class="lb">Leave</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffede2; color: #453f3f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffede2; color: #453f3f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #453f3f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #78555a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.03px; background: #78555a; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.03px; background: transparent; color: #78555a;
border: 1px solid #78555a; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffede2; color: #453f3f;
border: 1px solid #d0c2b9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #78555a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.05px; background: #e38c76; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffede2; font-family:'Archivo','Montserrat',-apple-system,sans-serif; color:#453f3f; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.announce{height:30px;background:#e38c76;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #f3f3f3;}
.logo{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:#453f3f;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;}
.hero{height:210px;display:flex;align-items:center;padding:0 32px;gap:30px;}
.herotxt{max-width:400px;}
.h1{font-family:'Playfair Display',serif;font-size:32px;font-weight:600;margin:0 0 10px;line-height:1.25;}
.sub{font-size:15px;line-height:1.5;margin:0 0 16px;}
.btn{display:inline-block;background:#78555a;color:#fff;font-size:15px;font-weight:600;padding:14px 30px;border-radius:9999px;width:fit-content;}
.jarimg{width:150px;height:170px;border-radius:20px;background:linear-gradient(160deg,#e8ae9e,#78555a 60%,#453f3f);}
.concerns{display:flex;gap:12px;padding:14px 32px 0;}
.concerncard{flex:1;background:#e8ae9e;border-radius:20px;padding:18px;text-align:center;font-family:'Archivo',sans-serif;font-size:16px;font-weight:600;color:#453f3f;}
.grid{display:flex;gap:16px;padding:16px 32px 0;}
.card{width:210px;background:#fff;border-radius:20px;overflow:hidden;}
.thumb{height:100px;background:linear-gradient(135deg,#e8ae9e,#78555a);position:relative;border-radius:20px 20px 0 0;}
.badge{position:absolute;top:8px;left:8px;background:#e38c76;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.05px;text-transform:uppercase;padding:4px 10px;border-radius:9999px;}
.ctitle{font-family:'Archivo',sans-serif;font-size:16px;font-weight:600;padding:10px 14px 2px;}
.cprice{font-size:16px;font-weight:600;padding:0 14px 14px;}
</style>
<div class="wrap">
<div class="announce">Free Shipping over $50</div>
<div class="nav">
<div class="logo">Momotaro Apotheca</div>
<div class="navlinks"><span>Cycle Support</span><span>Menopause</span><span>Libido</span></div>
</div>
<div class="hero">
<div class="herotxt">
<div class="h1">Grown-up intimacy, not clinical pink.</div>
<p class="sub">Apothecary-grade wellness formulas wrapped in morning-light warmth.</p>
<div class="btn">Shop by Concern</div>
</div>
<div class="jarimg"></div>
</div>
<div class="concerns">
<div class="concerncard">Cycle Support</div>
<div class="concerncard">Menopause</div>
<div class="concerncard">Libido</div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge">New</span></div><div class="ctitle">Rosewood Cycle Tonic</div><div class="cprice">$42</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Evening Calm Blend</div><div class="cprice">$36</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Blush Vitality Drops</div><div class="cprice">$48</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfbfb; color: #262626;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfbfb; color: #262626;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; margin: 0; color: #262626; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1em; background: #171717; color: #fbfbfb;
border: none; border-radius: 0px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1em; background: transparent; color: #171717;
border: 1px solid #171717; border-radius: 0px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fbfbfb; color: #262626;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dbdbdb; color: #171717;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fbfbfb; font-family:'EB Garamond',Georgia,serif; color:#4f4f4f; }
*{box-sizing:border-box;}
.nav{height:64px;background:#171717;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-family:Arial,sans-serif;font-size:19px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#fbfbfb;}
.navlinks{display:flex;gap:22px;font-family:Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#fbfbfb;}
.catstrip{background:#eeeeee;display:flex;gap:24px;padding:12px 34px;font-family:Arial,sans-serif;font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:#262626;border-bottom:1px solid #e0e0e0;}
.grid{display:flex;gap:14px;padding:20px 34px 0;}
.card{width:216px;}
.thumb{width:100%;aspect-ratio:4/5;background:#eeeeee;margin-bottom:8px;}
.itemtitle{font-size:15px;color:#262626;}
.meta{font-family:Arial,sans-serif;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:#757575;margin:2px 0 4px;}
.price{font-size:18px;color:#262626;}
</style>
<div class="nav">
<div class="logo">Newel</div>
<div class="navlinks"><div>Furniture</div><div>Lighting</div><div>Decorative Arts</div><div>Textiles</div></div>
</div>
<div class="catstrip"><span>18th Century</span><span>Art Deco</span><span>Mid-Century</span><span>Continental</span><span>Asian</span></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#4f4f4f,#171717)"></div><div class="itemtitle">French Commode, Louis XV</div><div class="meta">Circa 1770 · Walnut</div><div class="price">$8,400</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#757575,#262626)"></div><div class="itemtitle">Art Deco Table Lamp</div><div class="meta">Circa 1930 · Chrome & Glass</div><div class="price">$2,100</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#262626,#4f4f4f)"></div><div class="itemtitle">Chinoiserie Screen, Four-Panel</div><div class="meta">19th Century · Lacquer</div><div class="price">$5,600</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0e0e0e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0e0e0e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #0e0e0e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; background: #d73939; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; background: #ffffff; color: #0e0e0e;
border: 1px solid #d73939; border-radius: 8px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #0e0e0e;
border: 1px solid #c3c3c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d73939; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#0e0e0e; color:#d9d8d6; font-family:'din-2014',Arial,sans-serif;
}
*, *::before, *::after { box-sizing:border-box; }
.wrap{ position:relative; width:960px; height:640px; }
.nav{ height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#0e0e0e; border-bottom:1px solid #2b2b2b; }
.logo{ font-family:'Canela',Georgia,serif; font-weight:700; font-size:20px; color:#ffffff; }
.navlinks{ display:flex; gap:24px; }
.navlinks span{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#aaaaaa; }
.navlinks span.active{ color:#d73939; }
.search{ font-size:11px; color:#707070; background:#1a1a1a; border:1px solid #2b2b2b; border-radius:999px; padding:9px 18px; }
.hero{ height:250px; position:relative; display:flex; align-items:center; padding:0 34px; gap:26px; overflow:hidden; }
.hero-text{ width:400px; position:relative; z-index:2; }
.kicker{ font-family:'Canela',Georgia,serif; font-style:italic; font-size:15px; color:#ef4444; margin-bottom:10px; }
.h1{ font-family:'Canela',Georgia,serif; font-weight:700; font-size:32px; line-height:1.18; color:#ffffff; margin-bottom:12px; }
.sub{ font-size:13px; line-height:1.55; color:#aaaaaa; max-width:330px; margin-bottom:16px; }
.btn{ font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#0e0e0e; background:#d73939; padding:13px 24px; border-radius:8px; width:fit-content; }
.hex-field{ position:absolute; right:24px; top:20px; width:210px; height:210px; }
.hexagon{ position:absolute; width:44px; height:38px; background:linear-gradient(160deg,#d73939,#2b2b2b); clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%); }
.hx1{ left:70px; top:0; } .hx2{ left:16px; top:34px; } .hx3{ left:124px; top:34px; } .hx4{ left:70px; top:68px; } .hx5{ left:16px; top:102px; } .hx6{ left:124px; top:102px; }
.section-title{ padding:16px 34px 8px; font-family:'Canela',Georgia,serif; font-size:16px; color:#ffffff; }
.grid{ display:flex; gap:16px; padding:0 34px; }
.card{ width:200px; background:#1a1a1a; border-radius:12px; padding:12px; }
.card-img{ width:100%; height:76px; border-radius:8px; margin-bottom:8px; }
.card-title{ font-size:13px; font-weight:700; color:#ffffff; margin-bottom:2px; }
.card-note{ font-size:10px; letter-spacing:0.04em; text-transform:uppercase; color:#707070; margin-bottom:8px; }
.row{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-size:12px; font-weight:700; color:#dfd5c4; }
.tag{ font-size:9px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#0e0e0e; background:#d73939; padding:3px 9px; border-radius:999px; }
.footer{ position:absolute; bottom:0; left:0; width:960px; height:52px; background:#1a1a1a; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.footer span{ font-size:10px; letter-spacing:0.05em; text-transform:uppercase; color:#707070; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Hexclad</div>
<div class="navlinks">
<span class="active">Cookware</span>
<span>Hybrid Tech</span>
<span>Bakeware</span>
<span>Recipes</span>
</div>
<div class="search">Search hybrid pans</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="kicker">Stainless Meets Non-Stick</div>
<div class="h1">The hybrid, celebrated—not hidden.</div>
<div class="sub">Laser-etched hexagons expose the stainless steel core underneath every non-stick surface. Engineered, not disguised.</div>
<div class="btn">Shop Hybrid Pans</div>
</div>
<div class="hex-field">
<div class="hexagon hx1"></div>
<div class="hexagon hx2"></div>
<div class="hexagon hx3"></div>
<div class="hexagon hx4"></div>
<div class="hexagon hx5"></div>
<div class="hexagon hx6"></div>
</div>
</div>
<div class="section-title">The Hybrid Collection</div>
<div class="grid">
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#d73939,#2b2b2b);"></div>
<div class="card-title">12" Hybrid Skillet</div>
<div class="card-note">Induction Ready</div>
<div class="row"><span class="price">$99.95</span><span class="tag">Bestseller</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#2b2b2b,#dfd5c4);"></div>
<div class="card-title">7-Pc Cookware Set</div>
<div class="card-note">Hexagon Coating</div>
<div class="row"><span class="price">$429.95</span><span class="tag">Save 20%</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#c70000,#0e0e0e);"></div>
<div class="card-title">Wok + Steamer</div>
<div class="card-note">Dishwasher Safe</div>
<div class="row"><span class="price">$119.95</span><span class="tag">New</span></div>
</div>
</div>
<div class="footer">
<span>© Hexclad</span>
<span>Warranty · Recipes · Support</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #060608; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #060608; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -0.5px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #8888a0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.25; letter-spacing: 1px; background: #7042f8; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.25; letter-spacing: 1px; background: transparent; color: #ffffff;
border: 1px solid #7042f8; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #0e0e16; color: #ffffff;
border: 1px solid #444446; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8888a0; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.36; letter-spacing: 1.2px; background: #0e0e16; color: #00e5ff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#060608; color:#ffffff; box-sizing:border-box;
font-family:'Inter', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #1e1e2a; }
.brand { font-size:16px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; color:#d8d8e8; }
.cart { color:#00e5ff; font-size:13px; }
.herogrid { display:grid; grid-template-columns:1.1fr 1fr; gap:20px; padding:22px 32px; }
.hero-img { border-radius:8px; height:180px; background:radial-gradient(circle at 30% 30%,#7042f8,#1e1e2a 75%);
position:relative; overflow:hidden; }
.hero-img::after { content:''; position:absolute; width:70px; height:70px; border-radius:50%; background:#00e5ff;
opacity:0.4; right:20px; bottom:20px; filter:blur(4px); }
.hero-copy h1 { font-size:32px; font-weight:700; line-height:1.1; letter-spacing:-1px; margin:20px 0 10px; }
.hero-copy p { font-size:15px; color:#d8d8e8; margin:0 0 16px; max-width:340px; }
.btn-primary { background:#7042f8; color:#fff; border:none; border-radius:4px; padding:12px 24px; font-size:13px;
font-weight:600; letter-spacing:1px; text-transform:uppercase; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:0 32px 20px; }
.card { background:#12121c; border-radius:8px; padding:8px; }
.card .imgbox { aspect-ratio:1/1; height:74px; border-radius:6px; background:linear-gradient(150deg,#7042f8,#060608 90%); margin-bottom:8px; position:relative; }
.release-badge { position:absolute; top:6px; left:6px; background:#0e0e16; color:#00e5ff; font-size:10px; font-weight:500;
letter-spacing:1.2px; text-transform:uppercase; padding:3px 8px; border-radius:4px; border:1px solid #2a2a3a; }
.card h3 { font-size:14px; font-weight:600; margin:4px 0 2px; }
.card .meta { font-size:11px; color:#8888a0; letter-spacing:0.2px; text-transform:uppercase; }
footer { background:#060608; border-top:1px solid #1e1e2a; padding:14px 32px; display:flex;
justify-content:space-between; align-items:center; font-size:12px; color:#8888a0; }
</style></head>
<body>
<nav>
<p class="brand">Brainfeeder</p>
<div class="navlinks"><span>Shop</span><span>Artists</span><span>About</span></div>
<span class="cart">Cart (0)</span>
</nav>
<section class="herogrid">
<div class="hero-img"></div>
<div class="hero-copy">
<h1>Sound from Los Angeles, since 2008</h1>
<p>Cosmic, uncompromising releases from Flying Lotus, Thundercat, Lapalux, and the Brainfeeder family.</p>
<button class="btn-primary">Shop New Releases</button>
</div>
</section>
<section class="grid">
<div class="card"><div class="imgbox"><span class="release-badge">LP</span></div><h3>Flamagra</h3><div class="meta">Flying Lotus</div></div>
<div class="card"><div class="imgbox"><span class="release-badge">Cassette</span></div><h3>It Is What It Is</h3><div class="meta">Thundercat</div></div>
<div class="card"><div class="imgbox"><span class="release-badge">Digital</span></div><h3>Ricercar</h3><div class="meta">Lapalux</div></div>
</section>
<footer>
<span>© Brainfeeder</span>
<span>Los Angeles · Est. 2008</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.2px; background: #ec0101; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #121212;
border: 1px solid #ec0101; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.33; letter-spacing: 0.2px; background: #f5f5f5; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121212; font-family:Roboto,-apple-system,system-ui,sans-serif; color:#e8e8e8; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #222222;}
.logo{font-size:19px;font-weight:700;color:#fff;letter-spacing:.4px;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;color:#aaaaaa;}
.navcta{background:#ec0101;color:#fff;font-size:12px;font-weight:700;padding:10px 18px;border-radius:6px;}
.hero{height:236px;display:flex;align-items:center;padding:0 36px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 75% 50%,#2a1414 0%,#121212 65%);}
.herotext{width:440px;z-index:2;}
.kicker{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#ec0101;margin-bottom:12px;}
.h1{font-size:29px;font-weight:700;line-height:1.2;color:#fff;margin:0 0 12px;}
.sub{font-size:14px;color:#aaaaaa;margin:0 0 18px;max-width:340px;}
.btn{width:170px;text-align:center;background:#ec0101;color:#fff;font-size:13px;font-weight:700;padding:12px 0;border-radius:6px;}
.arc{position:absolute;right:100px;top:20px;width:220px;height:200px;}
.bolt{position:absolute;right:30px;top:20px;width:50px;height:160px;background:linear-gradient(180deg,#ec0101,#ff4e00);clip-path:polygon(60% 0,20% 55%,50% 55%,30% 100%,90% 40%,55% 40%);filter:drop-shadow(0 0 24px rgba(236,1,1,.5));}
.strip{display:flex;gap:1px;background:#222222;}
.cell{flex:1;background:#1a1a1a;text-align:center;padding:9px;}
.clabel{font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#878787;}
.cval{font-size:13px;color:#fff;margin-top:2px;font-weight:600;}
.sec{padding:16px 36px 0;}
.sectitle{font-size:13px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#fff;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:154px;background:#1c1c1c;border:1px solid #2a2a2a;border-radius:8px;padding:9px;position:relative;}
.thumb{height:96px;border-radius:6px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:600;line-height:1.3;height:30px;overflow:hidden;color:#e8e8e8;}
.pprice{font-size:13px;font-weight:700;color:#ec0101;margin-top:3px;}
.badge{position:absolute;top:7px;left:7px;background:#ec0101;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 6px;border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Omnicharge</div>
<div class="navlinks"><span>Power Banks</span><span>Wireless</span><span>Accessories</span><span>For Business</span></div>
<div class="navcta">Shop Power</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">100W. No Compromise.</div>
<div class="h1">Power that keeps up with real work.</div>
<div class="sub">High-wattage portable batteries built for cameras, laptops, and everything that actually needs power.</div>
<div class="btn">Shop Power Banks</div>
</div>
<div class="arc"><div class="bolt"></div></div>
</div>
<div class="strip">
<div class="cell"><div class="clabel">Output</div><div class="cval">100W USB-C PD</div></div>
<div class="cell"><div class="clabel">Capacity</div><div class="cval">20,000mAh</div></div>
<div class="cell"><div class="clabel">Ports</div><div class="cval">4 Simultaneous</div></div>
<div class="cell"><div class="clabel">Charge</div><div class="cval">0-80% in 45min</div></div>
</div>
<div class="sec">
<div class="sectitle">Shop Power Banks</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(150deg,#ec0101,#222222)"></div><div class="pname">Omni 20+ Pro</div><div class="pprice">$219.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#0774d7,#222222)"></div><div class="pname">Omni Mobile Wireless</div><div class="pprice">$129.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#e0b252,#222222)"></div><div class="pname">100W GaN Wall Charger</div><div class="pprice">$79.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#428445,#222222)"></div><div class="pname">Omni Ultimate Battery</div><div class="pprice">$299.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfaf6; color: #141416;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfaf6; color: #141416;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.1px; margin: 0; color: #141416; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #84817e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #b23f0d; color: #fcfaf6;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #fcfaf6; color: #b23f0d;
border: 1px solid #b23f0d; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfaf6; color: #141416;
border: 1px solid #dedede; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #84817e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #dcea54; color: #43431e;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcfaf6; color:#141416; box-sizing:border-box;
font-family:'Figtree', -apple-system, 'Segoe UI', sans-serif; }
* { box-sizing:border-box; }
.topbar { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #dedede; }
.brand { font-family:Georgia, serif; font-size:20px; font-weight:600; color:#b23f0d; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; color:#34312e; }
.layout { display:flex; height:calc(640px - 60px); }
.media { width:380px; flex-shrink:0; position:relative; background:#f0ebe1; overflow:hidden; }
.media .pot { position:absolute; left:50%; bottom:40px; transform:translateX(-50%); width:180px; height:140px;
background:#b23f0d; border-radius:4px 4px 16px 16px; }
.media .plant { position:absolute; left:50%; bottom:170px; transform:translateX(-50%); width:140px; height:220px;
background:radial-gradient(ellipse at 50% 30%, #6a6a3f 0%, #414f33 70%); border-radius:50% 50% 40% 40%; }
.media .badge { position:absolute; top:18px; left:18px; background:#dcea54; color:#43431e; font-size:11px;
font-weight:600; letter-spacing:0.6px; text-transform:uppercase; border-radius:999px; padding:4px 12px; }
.detail { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:14px; }
.kicker { font-size:12px; font-weight:600; letter-spacing:0.3px; color:#84817e; text-transform:uppercase; }
h1 { font-family:'new-spirit-condensed', Georgia, serif; font-size:34px; font-weight:600; margin:0; line-height:1.05; }
.price { font-size:20px; font-weight:700; }
.grow-bar { display:flex; flex-direction:column; gap:6px; }
.grow-bar .label { font-size:13px; color:#84817e; }
.grow-track { height:6px; border-radius:999px; background:#efeba3; overflow:hidden; }
.grow-fill { height:100%; width:62%; background:#dcea54; border-radius:999px; }
.tags { display:flex; gap:8px; flex-wrap:wrap; }
.tag { background:#f4f1c9; color:#6b5a3e; font-size:11px; font-weight:600; letter-spacing:0.3px; text-transform:uppercase;
border-radius:4px; padding:3px 8px; }
.tag.sage { background:#414f33; color:#fcfaf6; border-radius:999px; padding:4px 12px; }
.spec-list { display:flex; flex-direction:column; gap:0; margin-top:2px; }
.spec-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #dedede; font-size:14px; }
.spec-row .k { color:#84817e; }
.actions { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#b23f0d; color:#fcfaf6; border:none; border-radius:8px; height:48px; font-size:15px; font-weight:600; }
.btn-secondary { background:#fcfaf6; color:#b23f0d; border:1.5px solid #b23f0d; border-radius:8px; height:48px; padding:0 22px; font-size:15px; font-weight:600; }
</style></head>
<body>
<div class="topbar">
<div class="brand">Click And Grow</div>
<div class="navlinks"><span>Grow Kits</span><span>Seed Pods</span><span>Smart Garden</span></div>
</div>
<div class="layout">
<div class="media">
<div class="badge">3-Pod Kit</div>
<div class="plant"></div>
<div class="pot"></div>
</div>
<div class="detail">
<div class="kicker">Indoor Herb Garden</div>
<h1>Basil & Thyme Grow Kit</h1>
<div class="price">$79.95</div>
<div class="grow-bar">
<span class="label">Germination → Seedling → Harvest</span>
<div class="grow-track"><div class="grow-fill"></div></div>
</div>
<div class="tags">
<span class="tag">3-Pod Kit</span>
<span class="tag sage">Plastic-Neutral</span>
</div>
<div class="spec-list">
<div class="spec-row"><span class="k">Light needs</span><span>Self-adjusting LED</span></div>
<div class="spec-row"><span class="k">Water frequency</span><span>Auto-refill, 60 days</span></div>
<div class="spec-row"><span class="k">Grow time</span><span>4–6 weeks to harvest</span></div>
</div>
<div class="actions">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Learn More</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px; background: #d1171c; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px; background: #ffffff; color: #111111;
border: 1px solid #d1171c; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #231f20;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #eb001b; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
color:#231f20;
}
*{box-sizing:border-box;}
.nav{height:56px;background:#111111;display:flex;align-items:center;justify-content:space-between;padding:0 20px;}
.logo{color:#d1171c;font-weight:700;font-size:20px;letter-spacing:0.5px;}
.logo b{color:#ffffff;font-weight:600;}
.navlinks{display:flex;gap:22px;}
.navlinks span{color:#ffffff;font-size:12px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.navlinks span.active{color:#d1171c;}
.navicons{display:flex;gap:14px;align-items:center;}
.searchdot{width:26px;height:26px;border:1px solid #555555;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:12px;}
.cartbadge{background:#d1171c;color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:9999px;}
.hero{background:#111111;color:#fff;padding:34px 20px 28px;text-align:left;}
.hero h1{font-size:32px;font-weight:700;letter-spacing:-0.5px;margin:0 0 8px;line-height:1.15;}
.hero p{color:#888888;font-size:15px;margin:0 0 16px;max-width:520px;}
.heroBtn{display:inline-block;background:#d1171c;color:#fff;font-size:13px;font-weight:600;letter-spacing:0.3px;padding:11px 22px;border-radius:8px;}
.strip{background:#eb001b;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;text-align:center;padding:6px 0;}
.section{padding:18px 20px 0;}
.sectitle{font-size:16px;font-weight:600;margin:0 0 12px;color:#111111;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#fff;}
.sleeve{aspect-ratio:1/1;background:linear-gradient(135deg,#231f20 0%,#3a3a3a 55%,#111111 100%);position:relative;border:1px solid #dedede;}
.sleeve .ring{position:absolute;inset:30% 30%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#555 0%,#111 70%);border:2px solid #888;}
.badge{position:absolute;top:6px;left:6px;background:#eb001b;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 6px;}
.ctitle{font-size:13px;font-weight:600;margin:8px 0 2px;color:#231f20;}
.cartist{font-size:11px;color:#888888;margin:0 0 4px;}
.cprice{font-size:14px;font-weight:700;color:#111111;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#111111;color:#dedede;font-size:11px;padding:10px 20px;display:flex;justify-content:space-between;}
.footer span{color:#555555;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo"><b>Goner Records</b></div>
<div class="navlinks">
<span class="active">New Arrivals</span>
<span>Vinyl</span>
<span>Cassettes</span>
<span>Merch</span>
<span>In-Store</span>
</div>
<div class="navicons">
<div class="searchdot">⚲</div>
<div class="cartbadge">3</div>
</div>
</div>
<div class="strip">Limited Pressings — In Stock Now, No Restock</div>
<div class="hero">
<h1>Memphis noise,<br>pressed to wax.</h1>
<p>New arrivals from the loading dock every Friday. Punk, garage, soul 45s, and the weird stuff nobody else will carry.</p>
<div class="heroBtn">Shop New Arrivals</div>
</div>
<div class="section">
<div class="sectitle">This Week's Pressings</div>
<div class="grid">
<div class="card">
<div class="sleeve"><div class="badge">Sale</div><div class="ring"></div></div>
<div class="ctitle">Concrete Static</div>
<div class="cartist">Fuzz Chapel</div>
<div class="cprice">$24.00</div>
</div>
<div class="card">
<div class="sleeve"><div class="ring"></div></div>
<div class="ctitle">Nightshift Blues</div>
<div class="cartist">The Delta Loafs</div>
<div class="cprice">$21.00</div>
</div>
<div class="card">
<div class="sleeve"><div class="badge" style="background:#f00036;">New</div><div class="ring"></div></div>
<div class="ctitle">Basement Radio</div>
<div class="cartist">Vela & The Static</div>
<div class="cprice">$26.00</div>
</div>
<div class="card">
<div class="sleeve"><div class="ring"></div></div>
<div class="ctitle">Gravel Hymnal</div>
<div class="cartist">Sister Cobalt</div>
<div class="cprice">$19.00</div>
</div>
</div>
</div>
<div class="footer">
<span>© Goner Records — Memphis, TN</span>
<span>All sales final on used vinyl</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fff7e7; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fff7e7; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7871; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6b35; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fff7e7; color: #ff6b35;
border: 1px solid #ff6b35; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fff7e7; color: #111111;
border: 1px solid #d9d2c5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7871; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ffe1cb; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFF7E7; color:#2E1A47; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#FFF7E7; position:relative; overflow:hidden; }
.aurora { height:150px; background:linear-gradient(160deg,#FFB89E,#FFD25C 55%,#FF6B35); padding:24px 20px; }
.greeting { font-size:22px; font-weight:700; }
.subgreet { font-size:13px; opacity:0.85; margin-top:2px; }
.stage { padding:0 20px; }
.spherewrap { display:flex; justify-content:center; margin:-70px 0 14px; }
.sphere { width:170px; height:170px; border-radius:50%;
background:radial-gradient(circle at 30% 28%, #FFB89E 0%, #FF6B35 68%, #E55A2B 100%);
box-shadow:0 10px 30px rgba(46,26,71,0.18); }
.guide { text-align:center; font-size:14px; color:#2E1A47; margin-bottom:6px; }
.timer { text-align:center; font-size:34px; font-weight:700; font-variant-numeric:tabular-nums; margin-bottom:16px; }
.controls { display:flex; justify-content:center; align-items:center; gap:20px; }
.skip { width:40px; height:40px; border-radius:50%; background:#FBF1DA; display:flex; align-items:center; justify-content:center; font-size:14px; }
.play { width:60px; height:60px; border-radius:50%; background:#FF6B35; color:#fff; display:flex; align-items:center;
justify-content:center; font-size:20px; box-shadow:rgba(255,107,53,0.25) 0 6px 16px; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:56px; background:#FFF7E7; border-top:0.5px solid #E8DFC9;
display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:#8E7DA5; text-align:center; }
.tab.on { color:#FF6B35; font-weight:700; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:700; letter-spacing:-0.3px; margin:0; color:#2E1A47; }
.brand span { color:#FF6B35; }
.tag { font-size:14px; color:#594675; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:14px; border:1px solid #E8DFC9; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#594675; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:700; }
.typeblock .t2 { font-size:13px; color:#594675; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:999px;
background:#FBF1DA; border:1px solid #E8DFC9; color:#594675; }
.footer { margin-top:auto; border-top:1px solid #E8DFC9; padding-top:16px; font-size:11px; color:#8E7DA5; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="aurora"><div class="greeting">Good morning, Sam</div><div class="subgreet">Today's vibe: Mindful Moment</div></div>
<div class="stage">
<div class="spherewrap"><div class="sphere"></div></div>
<div class="guide">Take a deep breath in…</div>
<div class="timer">10:00</div>
<div class="controls"><div class="skip">⟲15</div><div class="play">▶</div><div class="skip">15⟳</div></div>
</div>
<div class="tabbar"><div class="tab on">Today</div><div class="tab">Meditate</div><div class="tab" style="color:#7E9F4B">Sleep</div><div class="tab">Move</div><div class="tab">Profile</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">Headspace (iOS)<span>.</span></h1>
<p class="tag">A hand-drawn morning on butter-cream — a breathing sphere at the center, and warm Ink Brown text that never turns cold black.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#FF6B35"></div><small>#FF6B35</small></div>
<div class="sw"><div class="chip2" style="background:#FFD25C"></div><small>#FFD25C</small></div>
<div class="sw"><div class="chip2" style="background:#7E9F4B"></div><small>#7E9F4B</small></div>
<div class="sw"><div class="chip2" style="background:#2E1A47"></div><small>#2E1A47</small></div>
<div class="sw"><div class="chip2" style="background:#FFF7E7"></div><small>#FFF7E7</small></div>
</div>
<div class="typeblock">
<div class="t1">Take a deep breath in…</div>
<div class="t2">Apercu (Nunito sub) · title case only, never UPPERCASE — Headspace stays gentle</div>
</div>
<div class="taglist">
<span>Breathing sphere</span><span>Aurora gradient</span><span>Illustration companions</span>
<span>Streak ring</span><span>Sage-tinted Sleep tab</span>
</div>
<div class="footer">Butter-cream canvas #FFF7E7 · warm Ink Brown shadows, never true black</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fff6ee; color: #201f1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fff6ee; color: #201f1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #201f1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6b6b69; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0.2px; background: #bad0c9; color: #201f1d;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0.2px; background: #fff6ee; color: #201f1d;
border: 1px solid #bad0c9; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fff6ee; color: #201f1d;
border: 1px solid #c7c0ba; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b69; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #f2b136; color: #201f1d;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Honest Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Assistant',sans-serif; background:#fff6ee; color:#201f1d; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-family:'neue-haas-grotesk-display','Assistant',sans-serif;font-size:20px;font-weight:500;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;}
.searchpill{background:#fff;border:1px solid #dedede;border-radius:999px;height:36px;width:170px;font-size:11px;color:#6b6b69;padding:0 16px;line-height:36px;}
.hero{background:#f3e6db;padding:26px 36px;display:flex;align-items:center;gap:30px;height:230px;}
.hero-visual{width:300px;height:180px;background:linear-gradient(140deg,#bad0c9,#899df1);border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;}
.hero-txt h1{font-family:'neue-haas-grotesk-display','Assistant',sans-serif;font-size:38px;font-weight:500;line-height:1.15;margin:0 0 10px;}
.hero-txt p{font-size:15px;color:#3a3a38;margin:0 0 16px;max-width:340px;}
.btn{display:inline-block;background:#bad0c9;color:#201f1d;font-weight:600;font-size:16px;padding:12px 24px;border-radius:8px;}
.section{padding:8px 36px;}
.section h2{font-size:20px;font-weight:600;margin:0 0 12px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{background:#fff;border-radius:12px;padding:14px;position:relative;}
.imgbox{height:80px;background:#f3e6db;border-radius:8px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:#9a9a98;font-size:10px;text-align:center;}
.badge{position:absolute;top:10px;left:10px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:4px;}
.badge.sale{background:#f2b136;color:#201f1d;}
.badge.eco{background:#70b19b;color:#fff;}
.pname{font-size:16px;font-weight:600;margin:2px 0;}
.price{font-size:16px;font-weight:600;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#f3e6db;color:#3a3a38;padding:12px 36px;display:flex;justify-content:space-between;font-size:11px;}
</style>
<div class="nav">
<div class="logo">Honest</div>
<div class="navlinks"><span>Diapers</span><span>Wipes</span><span>Bundles</span><span>About</span></div>
<div class="searchpill">Search products…</div>
</div>
<div class="hero">
<div class="hero-visual">NURSERY PHOTOGRAPHY</div>
<div class="hero-txt">
<h1>Clean ingredients,<br>softer everyday.</h1>
<p>Plant-based diapers and wipes made without the stuff you don't want near your baby.</p>
<div class="btn">Shop Bundles</div>
</div>
</div>
<div class="section">
<h2>Best Sellers</h2>
<div class="grid">
<div class="card"><div class="badge eco">Eco</div><div class="imgbox">Diaper Pack</div><div class="pname">Overnight Diapers</div><div class="price">$29.95</div></div>
<div class="card"><div class="badge sale">Sale</div><div class="imgbox">Wipes 3pk</div><div class="pname">Sensitive Wipes 3-Pack</div><div class="price">$17.95</div></div>
<div class="card"><div class="imgbox">Bundle Box</div><div class="pname">Newborn Essentials Bundle</div><div class="price">$64.95</div></div>
<div class="card"><div class="imgbox">Training Pants</div><div class="pname">Training Pants Size 4</div><div class="price">$26.95</div></div>
</div>
</div>
<div class="footer"><span>© Honest</span><span>Shipping · Subscriptions · Support · Legal</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7132f5; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7132f5; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ba9df5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5741d8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7132f5; color: #ffffff;
border: 1px solid #5741d8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7132f5; color: #f5f5f5;
border: 1px solid #8651f5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ba9df5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6d34f0; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#101114; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #dedee5; }
.brand { font-size:17px; font-weight:700; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#686b82; font-weight:500; }
.btn-purple { background:#7132f5; color:#fff; border:none; border-radius:12px; padding:10px 18px; font-size:13px; font-weight:600; }
.hero { display:flex; align-items:center; padding:20px 40px 12px; gap:24px; }
.herotext { flex:1; }
.herotext h1 { font-size:34px; font-weight:700; letter-spacing:-0.7px; line-height:1.18; margin:0 0 8px; }
.herotext p { font-size:13px; color:#686b82; margin:0 0 12px; }
.row { display:flex; gap:10px; }
.btn-outline { background:#fff; color:#5741d8; border:1px solid #5741d8; border-radius:12px; padding:9px 18px; font-size:13px; font-weight:600; }
.pricecard { width:260px; background:#fff; border:1px solid #dedee5; border-radius:16px; padding:16px;
box-shadow:rgba(0,0,0,0.03) 0px 4px 24px; }
.pricerow { display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:12px; border-bottom:1px solid #dedee5; }
.pricerow:last-child { border-bottom:none; }
.ticker { font-weight:700; }
.up { color:#149e61; }
.badge { background:rgba(20,158,97,0.16); color:#026b3f; border-radius:6px; padding:2px 6px; font-size:11px; font-weight:600; }
.featuregrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:12px 40px 16px; }
.fcard { background:#fff; border:1px solid #dedee5; border-radius:12px; padding:16px; }
.fcard .ic { width:32px; height:32px; border-radius:8px; background:rgba(133,91,251,0.16); margin-bottom:10px; }
.fcard h4 { font-size:14px; font-weight:600; margin:0 0 6px; }
.fcard p { font-size:11.5px; color:#686b82; margin:0; line-height:1.4; }
footer { margin-top:auto; padding:12px 40px; border-top:1px solid #dedee5; display:flex; justify-content:space-between;
font-size:11px; color:#9497a9; }
</style></head>
<body>
<nav>
<span class="brand">Kraken</span>
<div class="navlinks"><span>Buy crypto</span><span>Trade</span><span>Learn</span><span>Pricing</span></div>
<button class="btn-purple">Sign up</button>
</nav>
<section class="hero">
<div class="herotext">
<h1>The crypto exchange<br>built for you</h1>
<p>Buy, sell, and trade crypto with confidence — trusted since 2011.</p>
<div class="row"><button class="btn-purple">Get started</button><button class="btn-outline">Explore markets</button></div>
</div>
<div class="pricecard">
<div class="pricerow"><span class="ticker">BTC</span><span class="up">$68,240 <span class="badge">+2.4%</span></span></div>
<div class="pricerow"><span class="ticker">ETH</span><span class="up">$3,512 <span class="badge">+1.1%</span></span></div>
<div class="pricerow"><span class="ticker">SOL</span><span class="up">$142.80 <span class="badge">+4.7%</span></span></div>
<div class="pricerow"><span class="ticker">USDT</span><span>$1.00</span></div>
</div>
</section>
<div class="featuregrid">
<div class="fcard"><div class="ic"></div><h4>Buy crypto</h4><p>Purchase 200+ digital assets with low fees.</p></div>
<div class="fcard"><div class="ic"></div><h4>Pro trading</h4><p>Advanced charting and deep liquidity for active traders.</p></div>
<div class="fcard"><div class="ic"></div><h4>Secure custody</h4><p>Industry-leading security for your digital assets.</p></div>
</div>
<footer>
<span>© Kraken</span>
<span>Kraken · Trade · Learn · Security</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; letter-spacing: -0.25px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.43; letter-spacing: 0.2px; background: #cc2029; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.43; letter-spacing: 0.2px; background: #ffffff; color: #cc2029;
border: 1px solid #cc2029; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0.5px; background: #f5f5f5; color: #313131;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; font-family:Arial,'Helvetica Neue',sans-serif; color:#313131;
}
*{box-sizing:border-box;}
.mono{font-family:Consolas,'Courier New',monospace;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:2px solid #313131;}
.logo{font-size:17px;font-weight:700;color:#313131;}
.navlinks{display:flex;gap:20px;font-size:11.5px;color:#333;}
.search{background:#f2f2f2;border:1px solid #ccc;border-radius:4px;height:32px;width:220px;display:flex;align-items:center;padding:0 10px;font-size:11px;color:#888;}
.cta{background:#cc2029;color:#fff;padding:9px 16px;font-size:11.5px;font-weight:700;border-radius:6px;}
.megabar{display:flex;gap:18px;padding:8px 30px;background:#f7f7f7;border-bottom:1px solid #e0e0e0;font-size:10.5px;color:#555;}
.body-split{display:flex;padding:14px 30px;gap:18px;}
.hero-copy{width:280px;}
.hero-title{font-size:20px;font-weight:700;line-height:1.3;margin-bottom:8px;color:#313131;}
.hero-sub{font-size:11.5px;line-height:1.5;color:#555;margin-bottom:12px;}
.btn-main{display:inline-block;background:#cc2029;color:#fff;padding:10px 16px;font-size:11px;font-weight:700;border-radius:6px;}
.spec-table{flex:1;border:1px solid #ddd;border-radius:4px;overflow:hidden;}
.spec-row{display:flex;font-size:10px;border-bottom:1px solid #eee;}
.spec-row.h{background:#313131;color:#fff;font-weight:700;}
.spec-cell{flex:1;padding:6px 8px;border-right:1px solid #eee;}
.spec-row.h .spec-cell{border-right:1px solid #555;}
.spec-row:nth-child(even):not(.h){background:#fafafa;}
.stock{color:#0a7a2f;font-weight:700;}
.section{padding:6px 30px 0;}
.section-title{font-size:14px;font-weight:700;margin-bottom:10px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.card{background:#fff;border:1px solid #ddd;border-radius:4px;}
.card-img{height:74px;background:linear-gradient(150deg,#e6e6e6,#b0b0b0);border-radius:4px 4px 0 0;}
.card-body{padding:8px;}
.part-no{font-size:9px;color:#888;margin-bottom:3px;}
.card-name{font-size:11px;font-weight:600;margin-bottom:5px;line-height:1.3;}
.card-price{font-size:11.5px;font-weight:700;color:#cc2029;}
</style>
<div class="nav">
<div class="logo">Edmund Optics</div>
<div class="navlinks"><span>Optics</span><span>Imaging</span><span>Lasers</span><span>Motion</span></div>
<div class="search">Search part number...</div>
<div class="cta">Request Quote</div>
</div>
<div class="megabar"><span>Achromatic Lenses</span><span>Precision Mirrors</span><span>Bandpass Filters</span><span>CMOS Cameras</span><span>Optical Coatings</span></div>
<div class="body-split">
<div class="hero-copy">
<div class="hero-title">Optical components, engineered to tolerance.</div>
<div class="hero-sub">Lenses, mirrors, and imaging systems specified down to the coating layer — with lead time shown on every part.</div>
<div class="btn-main">Request A Quote</div>
</div>
<div class="spec-table mono">
<div class="spec-row h"><div class="spec-cell">PART NO.</div><div class="spec-cell">DIAMETER</div><div class="spec-cell">STOCK</div></div>
<div class="spec-row"><div class="spec-cell">#45-798</div><div class="spec-cell">25.0mm</div><div class="spec-cell stock">IN STOCK</div></div>
<div class="spec-row"><div class="spec-cell">#32-961</div><div class="spec-cell">50.0mm</div><div class="spec-cell stock">IN STOCK</div></div>
<div class="spec-row"><div class="spec-cell">#67-215</div><div class="spec-cell">12.5mm</div><div class="spec-cell">2-3 WKS</div></div>
<div class="spec-row"><div class="spec-cell">#88-402</div><div class="spec-cell">75.0mm</div><div class="spec-cell stock">IN STOCK</div></div>
</div>
</div>
<div class="section">
<div class="section-title">Featured Components</div>
<div class="grid">
<div class="card"><div class="card-img"></div><div class="card-body"><div class="part-no mono">#32-961</div><div class="card-name">Achromatic Doublet Lens</div><div class="card-price">$185.00</div></div></div>
<div class="card"><div class="card-img"></div><div class="card-body"><div class="part-no mono">#45-798</div><div class="card-name">Precision Plano-Convex Lens</div><div class="card-price">$94.00</div></div></div>
<div class="card"><div class="card-img"></div><div class="card-body"><div class="part-no mono">#67-215</div><div class="card-name">Bandpass Filter, 550nm</div><div class="card-price">$210.00</div></div></div>
<div class="card"><div class="card-img"></div><div class="card-body"><div class="part-no mono">#88-402</div><div class="card-name">First-Surface Mirror</div><div class="card-price">$142.00</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0f1822;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0f1822;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #0f1822; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676767; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #00bda2; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #0f1822;
border: 1px solid #00bda2; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #0f1822;
border: 1px solid #c3c5c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676767; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #00bda2; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0f1822; box-sizing:border-box;
font-family:'Segoe UI', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #e4e4e4; }
.brand { font-size:19px; font-weight:700; letter-spacing:0.5px; margin:0; color:#0f1822; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:13px; font-weight:500; letter-spacing:0.2px; color:#383838; }
.cart-pill { background:#00bda2; color:#fff; font-size:12px; font-weight:600; border-radius:999px;
padding:6px 14px; }
main { display:flex; height:584px; }
.stage { width:420px; background:#0f1822; display:flex; align-items:center; justify-content:center; position:relative; }
.stage::before { content:'NEW'; position:absolute; top:20px; left:20px; background:#00bda2; color:#fff;
font-size:11px; font-weight:700; letter-spacing:0.5px; padding:3px 10px; border-radius:4px; }
.earbud-case { width:170px; height:130px; border-radius:20px; background:linear-gradient(150deg,#2a3844,#0f1822 70%);
box-shadow:0 0 0 2px rgba(0,189,162,0.35), 0 20px 45px rgba(0,0,0,0.45); position:relative; }
.earbud-case::before { content:''; position:absolute; left:50%; top:14px; transform:translateX(-50%);
width:60%; height:3px; background:rgba(0,189,162,0.6); border-radius:2px; }
.earbud { position:absolute; width:34px; height:44px; border-radius:14px 14px 18px 18px; background:#e7eaec;
bottom:-18px; box-shadow:0 8px 18px rgba(0,0,0,0.4); }
.e1 { left:26px; } .e2 { right:26px; }
.info { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:12px; }
h1 { font-size:24px; font-weight:600; margin:0; letter-spacing:-0.2px; }
.sub { font-size:13px; color:#676767; margin:0; }
.stars { color:#00b097; font-size:14px; letter-spacing:1px; }
.stars span { color:#676767; font-size:12px; letter-spacing:0; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:4px; }
.price { font-size:26px; font-weight:600; color:#0f1822; }
.price-strike { font-size:15px; color:#9e9e9f; text-decoration:line-through; }
.badges { display:flex; gap:8px; }
.badge { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; border-radius:4px;
padding:3px 8px; color:#fff; }
.b-sale { background:#00bda2; } .b-drop { background:#f15a24; }
.swatches { display:flex; gap:10px; margin-top:4px; }
.sw { width:28px; height:28px; border-radius:999px; border:2px solid transparent; }
.sw.on { border-color:#0f1822; }
.sw1 { background:#0f1822; } .sw2 { background:#e7eaec; border-color:#d1d3d3; } .sw3 { background:#00bda2; }
.actions { display:flex; gap:10px; margin-top:10px; }
.btn-primary { background:#00bda2; color:#fff; border-radius:8px; height:44px; padding:0 24px;
display:flex; align-items:center; font-weight:600; font-size:14px; letter-spacing:0.5px; }
.btn-secondary { background:#fff; color:#0f1822; border:1px solid #d1d3d3; border-radius:8px; height:44px;
padding:0 20px; display:flex; align-items:center; font-weight:500; font-size:13px; }
.applepay { margin-top:6px; font-size:11px; color:#007aff; font-weight:600; }
.specs { border-top:1px solid #e4e4e4; margin-top:auto; padding-top:12px; display:flex; gap:26px; }
.specs div { font-size:11px; color:#676767; }
.specs b { display:block; color:#0f1822; font-size:13px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Aukey</p>
<div class="navlinks"><span>Audio</span><span>Charging</span><span>Smart Home</span><span>Deals</span></div>
<div class="cart-pill">Cart · 2</div>
</nav>
<main>
<div class="stage">
<div class="earbud-case">
<div class="earbud e1"></div>
<div class="earbud e2"></div>
</div>
</div>
<div class="info">
<div class="badges"><span class="badge b-sale">Sale</span><span class="badge b-drop">Price Drop</span></div>
<h1>EP-T27 Wireless Earbuds</h1>
<p class="sub">Active Noise Cancelling · 32H Playtime · IPX5</p>
<div class="stars">★★★★★<span>4.6 (3,912 reviews)</span></div>
<div class="price-row"><span class="price">$39.99</span><span class="price-strike">$59.99</span></div>
<div class="swatches"><div class="sw sw1 on"></div><div class="sw sw2"></div><div class="sw sw3"></div></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Buy Now</div>
</div>
<div class="applepay">Pay with Pay</div>
<div class="specs">
<div><b>32h</b>Battery</div>
<div><b>ANC</b>Noise Cancel</div>
<div><b>IPX5</b>Water Resist</div>
<div><b>USB-C</b>Fast Charge</div>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ea1717; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ea1717; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fe3b52; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ea1717; color: #000000;
border: 1px solid #fe3b52; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ea1717; color: #f5f5f5;
border: 1px solid #ec3b3b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ed1d20; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f2f2f2; color:#2b2b2b; box-sizing:border-box;
font-family:"Noto Sans TC","Microsoft JhengHei",Montserrat,Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
header { background:#ffffff; border-bottom:1px solid #e5e5e5; padding:14px 28px; display:flex; align-items:center; gap:20px; }
.logo { font-size:20px; font-weight:700; color:#ea1717; letter-spacing:-0.3px; }
.search { flex:1; background:#f2f2f2; border-radius:4px; height:36px; display:flex; align-items:center; padding:0 14px; color:#969696; font-size:13px; }
.navlinks { display:flex; gap:18px; font-size:13px; color:#0090eb; white-space:nowrap; }
.tabbar { background:#ffffff; display:flex; gap:0; padding:0 28px; border-bottom:1px solid #e5e5e5; }
.tab { padding:12px 16px; font-size:14px; color:#666666; }
.tab.active { color:#000000; font-weight:700; border-bottom:2px solid #ea1717; }
.promo { margin:16px 28px 0; height:78px; border-radius:8px; background:linear-gradient(120deg,#0e4f77,#084567); display:flex; align-items:center; justify-content:space-between; padding:0 24px; color:#ffffff; }
.promo .t1 { font-size:18px; font-weight:700; }
.promo .t2 { font-size:12px; color:rgba(255,255,255,0.8); margin-top:2px; }
.countdown { display:flex; gap:6px; }
.cbox { background:rgba(255,255,255,0.16); border-radius:4px; padding:6px 10px; font-weight:700; font-size:16px; }
main { padding:16px 28px 20px; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.card { background:#ffffff; border-radius:8px; padding:0 0 10px; box-shadow:rgba(0,0,0,0.1) 0px 2px 8px; overflow:hidden; position:relative; }
.thumb { height:76px; background:linear-gradient(135deg,#fd7777,#fe3b52); position:relative; }
.flag { position:absolute; top:6px; left:6px; background:#ea1717; color:#ffffff; font-size:10px; font-weight:700; border-radius:4px; padding:1px 6px; }
.ctitle { font-size:12px; color:#2b2b2b; padding:8px 8px 4px; line-height:1.3; height:30px; overflow:hidden; }
.cprice { padding:0 8px; display:flex; align-items:baseline; gap:6px; }
.price-new { font-size:16px; font-weight:700; color:#ea1717; }
.price-old { font-size:11px; color:#969696; text-decoration:line-through; }
.rebate { margin:4px 8px 0; background:#fed796; color:#2b2b2b; font-size:10px; border-radius:4px; padding:1px 6px; display:inline-block; }
.row-title { display:flex; align-items:center; justify-content:space-between; margin:18px 0 10px; }
.row-title h3 { font-size:16px; font-weight:700; margin:0; }
.row-title span { font-size:12px; color:#0090eb; }
</style></head>
<body>
<header>
<div class="logo">PChome</div>
<div class="search">Search products, brands, or categories</div>
<div class="navlinks"><span>My Orders</span><span>Cart</span><span>Sign In</span></div>
</header>
<div class="tabbar">
<div class="tab active">24h Shopping</div>
<div class="tab">Electronics</div>
<div class="tab">Home</div>
<div class="tab">Beauty</div>
<div class="tab">Groceries</div>
</div>
<div class="promo">
<div>
<div class="t1">Flash Deal · Up to 40% off</div>
<div class="t2">24h delivery on every order today</div>
</div>
<div class="countdown">
<div class="cbox">02</div><div class="cbox">14</div><div class="cbox">39</div>
</div>
</div>
<main>
<div class="row-title"><h3>Today's Picks</h3><span>See all</span></div>
<div class="grid">
<div class="card"><div class="thumb"><span class="flag">DEAL</span></div><div class="ctitle">Wireless Noise-Cancelling Headphones</div><div class="cprice"><span class="price-new">$2,690</span><span class="price-old">$3,590</span></div><span class="rebate">8% P-coin</span></div>
<div class="card"><div class="thumb"><span class="flag">HOT</span></div><div class="ctitle">Stainless Steel Vacuum Bottle 500ml</div><div class="cprice"><span class="price-new">$399</span><span class="price-old">$599</span></div><span class="rebate">5% P-coin</span></div>
<div class="card"><div class="thumb"></div><div class="ctitle">27" Curved Gaming Monitor 144Hz</div><div class="cprice"><span class="price-new">$5,990</span><span class="price-old">$7,200</span></div><span class="rebate">3% P-coin</span></div>
<div class="card"><div class="thumb"><span class="flag">NEW</span></div><div class="ctitle">Ceramic Non-Stick Frying Pan Set</div><div class="cprice"><span class="price-new">$1,180</span><span class="price-old">$1,580</span></div><span class="rebate">6% P-coin</span></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Cotton Bedsheet 4-Piece Set, Queen</div><div class="cprice"><span class="price-new">$890</span><span class="price-old">$1,290</span></div><span class="rebate">4% P-coin</span></div>
</div>
<div class="row-title"><h3>Recommended for you</h3><span>See all</span></div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ctitle">Portable Espresso Maker, Travel Size</div><div class="cprice"><span class="price-new">$1,590</span></div><span class="rebate">In stock</span></div>
<div class="card"><div class="thumb"><span class="flag">LTD</span></div><div class="ctitle">Robot Vacuum with Mopping, Wi-Fi</div><div class="cprice"><span class="price-new">$8,990</span><span class="price-old">$10,900</span></div><span class="rebate">10% P-coin</span></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Kids' Building Blocks Set, 300pcs</div><div class="cprice"><span class="price-new">$680</span></div><span class="rebate">In stock</span></div>
<div class="card"><div class="thumb"></div><div class="ctitle">USB-C Fast Charger 65W, 3-Port</div><div class="cprice"><span class="price-new">$590</span><span class="price-old">$790</span></div><span class="rebate">5% P-coin</span></div>
<div class="card"><div class="thumb"><span class="flag">DEAL</span></div><div class="ctitle">Memory Foam Pillow, Ergonomic</div><div class="cprice"><span class="price-new">$490</span><span class="price-old">$690</span></div><span class="rebate">3% P-coin</span></div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #121212; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #121212; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #c62828; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Igloo mockup</title>
<style>
:host, html, body {
width: 960px; height: 640px; margin: 0; padding: 0;
overflow: hidden; box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
background: #ffffff; color: #333333;
}
*, *::before, *::after { box-sizing: border-box; }
.wrap { width: 960px; height: 640px; position: relative; overflow: hidden; background: #ffffff; }
.marker { font-family: 'Permanent Marker Pro', 'Permanent Marker', cursive, sans-serif; }
.nav { height: 56px; background: #ffffff; border-bottom: 1px solid #dedede;
display: flex; align-items: center; justify-content: space-between; padding: 0 40px; }
.logo { font-size: 21px; font-weight: 800; letter-spacing: 0.5px; color: #121212; }
.navlinks { display: flex; gap: 24px; }
.navlinks a { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #333333; text-decoration: none; }
.cart { width: 30px; height: 30px; border-radius: 4px; background: #121212; }
.hero { height: 210px; display: flex; align-items: center; padding: 0 40px; gap: 24px; background: #f5f5f5; }
.hero-text { width: 470px; }
.est-badge { display: inline-block; background: #121212; color: #ffffff; font-size: 11px; font-weight: 700;
letter-spacing: 0.6px; padding: 5px 12px; border-radius: 4px; margin-bottom: 12px; }
.headline { font-size: 40px; line-height: 1.05; color: #121212; }
.sub { font-size: 13.5px; color: #333333; margin-top: 12px; width: 400px; line-height: 1.5; }
.btn-primary { display: inline-block; margin-top: 18px; background: #121212; color: #ffffff; font-size: 13px;
font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; padding: 13px 26px; border-radius: 4px; }
.cooler { position: relative; }
.cooler .body { position: absolute; border-radius: 4px 4px 14px 14px; }
.cooler .lid { position: absolute; border-radius: 4px 4px 0 0; }
.cooler .handle { position: absolute; border-radius: 3px; }
.hero-art { position: relative; width: 380px; height: 170px; }
.c1 .body { left: 60px; top: 34px; width: 190px; height: 110px; background: #2f5f8c; }
.c1 .lid { left: 60px; top: 34px; width: 190px; height: 26px; background: #23486b; }
.c1 .handle { left: 138px; top: 24px; width: 34px; height: 12px; background: #1b3550; }
.c2 .body { left: 270px; top: 60px; width: 90px; height: 70px; background: #6a7a4a; }
.c2 .lid { left: 270px; top: 60px; width: 90px; height: 16px; background: #55632f; }
.section-head { padding: 8px 40px 0 40px; display: flex; align-items: baseline; justify-content: space-between; }
.section-title { font-size: 17px; font-weight: 800; color: #121212; text-transform: uppercase; letter-spacing: 0.4px; }
.section-link { font-size: 12px; font-weight: 700; color: #333333; }
.grid { display: flex; gap: 18px; padding: 16px 40px 0 40px; width: 880px; }
.card { flex: 1; background: #ffffff; border: 1px solid #dedede; border-radius: 4px; padding: 16px 14px; display: flex; flex-direction: column; align-items: center; }
.card .cooler { width: 100%; height: 90px; margin-bottom: 12px; }
.card .body { border-radius: 4px 4px 10px 10px; }
.swatch1 .body { left: 30px; top: 20px; width: 90px; height: 62px; background: #2f5f8c; }
.swatch1 .lid { left: 30px; top: 20px; width: 90px; height: 15px; background: #23486b; }
.swatch2 .body { left: 30px; top: 20px; width: 90px; height: 62px; background: #a3502f; }
.swatch2 .lid { left: 30px; top: 20px; width: 90px; height: 15px; background: #7d3c22; }
.swatch3 .body { left: 30px; top: 20px; width: 90px; height: 62px; background: #6a7a4a; }
.swatch3 .lid { left: 30px; top: 20px; width: 90px; height: 15px; background: #55632f; }
.swatch4 .body { left: 30px; top: 20px; width: 90px; height: 62px; background: #8a8a8a; }
.swatch4 .lid { left: 30px; top: 20px; width: 90px; height: 15px; background: #e0e0e0; }
.p-title { font-size: 13px; font-weight: 700; color: #121212; text-align: center; }
.p-meta { font-size: 10.5px; color: #666666; margin-top: 4px; text-align: center; }
.p-price { font-size: 14px; font-weight: 800; color: #121212; margin-top: 8px; }
.footer { position: absolute; left: 0; bottom: 0; width: 960px; height: 40px; background: #121212; color: #dedede;
display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; letter-spacing: 0.3px; }
.footer .marker { font-size: 13px; color: #ffffff; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Igloo Coolers</div>
<div class="navlinks">
<a href="#">Coolers</a>
<a href="#">Drinkware</a>
<a href="#">Bags</a>
<a href="#">Accessories</a>
</div>
<div class="cart"></div>
</div>
<div class="hero">
<div class="hero-text">
<div class="est-badge">EST. 1947</div>
<div class="headline marker">Built for the long haul</div>
<div class="sub">Cold for days, dropped for decades — Igloo coolers are made to outlast the trip, the tailgate, and the next twelve summers.</div>
<div class="btn-primary">Shop Coolers</div>
</div>
<div class="hero-art">
<div class="cooler c1"><div class="body"></div><div class="lid"></div><div class="handle"></div></div>
<div class="cooler c2"><div class="body"></div><div class="lid"></div></div>
</div>
</div>
<div class="section-head">
<div class="section-title">Built to Last</div>
<div class="section-link">Shop all coolers →</div>
</div>
<div class="grid">
<div class="card">
<div class="cooler swatch1"><div class="body"></div><div class="lid"></div></div>
<div class="p-title">Trailmate 50QT</div>
<div class="p-meta">Marine-grade · 5-day ice retention</div>
<div class="p-price">$149.99</div>
</div>
<div class="card">
<div class="cooler swatch2"><div class="body"></div><div class="lid"></div></div>
<div class="p-title">BMX 25QT</div>
<div class="p-meta">Rotomolded · Rust-proof latches</div>
<div class="p-price">$99.99</div>
</div>
<div class="card">
<div class="cooler swatch3"><div class="body"></div><div class="lid"></div></div>
<div class="p-title">Overland 72QT</div>
<div class="p-meta">All-terrain wheels · 7-day ice</div>
<div class="p-price">$219.99</div>
</div>
<div class="card">
<div class="cooler swatch4"><div class="body"></div><div class="lid"></div></div>
<div class="p-title">Playmate Classic</div>
<div class="p-meta">The original, since day one</div>
<div class="p-price">$24.99</div>
</div>
</div>
<div class="footer"><span class="marker">Igloo Coolers</span><span>· Since 1947 — durable by design</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1060ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1060ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8eb2fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0c56e9; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1060ff; color: #ffffff;
border: 1px solid #0c56e9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1060ff; color: #f5f5f5;
border: 1px solid #3578fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8eb2fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0f5efb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#3b3d45; box-sizing:border-box;
font-family:system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #f1f2f3; }
.logo { font-size:19px; font-weight:600; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:20px; font-size:15px; }
.navlinks span { padding:8px 12px; border-radius:4px; }
.btn-primary { background:#1060ff; color:#ffffff; border:1px solid #0c56e9; border-radius:5px;
padding:9px 15px; font-size:16px; font-weight:500;
box-shadow:rgba(101,104,118,0.05) 0px 1px 1px, rgba(101,104,118,0.05) 0px 2px 2px; }
.hero { padding:40px 40px 30px; text-align:center; }
.hero h1 { font-family:"Arial Black","Helvetica Neue",sans-serif; font-size:52px; font-weight:600;
line-height:1.19; margin:0 0 14px; letter-spacing:-1px; }
.hero p { font-size:16px; line-height:1.63; color:#656a76; max-width:520px; margin:0 auto 20px; }
.row { display:flex; gap:10px; justify-content:center; }
.btn-secondary { background:#fafafa; color:#3b3d45; border:1px solid rgba(59,61,69,0.4); border-radius:5px;
padding:9px 15px; font-size:16px; font-weight:500;
box-shadow:rgba(101,104,118,0.05) 0px 1px 1px, rgba(101,104,118,0.05) 0px 2px 2px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:10px 40px 30px; }
.card { background:#ffffff; border-radius:6px; padding:18px; box-shadow:rgba(101,106,118,0.2) 0px 0px 0px 1px; }
.card h3 { font-size:15px; font-weight:600; margin:0 0 6px; }
.card p { font-size:13px; color:#656a76; margin:0; line-height:1.5; }
.card .cta { display:inline-block; margin-top:10px; font-size:13px; font-weight:600; }
.card.tf .cta { color:#7b42bc; }
.card.bd .cta { color:#f24c53; }
.badge { display:inline-block; background:#f1f2f3; color:#3b3d45; border-radius:5px; padding:3px 7px;
font-size:13px; margin-bottom:10px; }
footer { border-top:1px solid #f1f2f3; padding:14px 40px; text-align:center; font-size:13px; color:#656a76; }
</style></head>
<body>
<nav>
<span class="logo">Hashicorp</span>
<div class="navlinks"><span>Products</span><span>Solutions</span><span>Pricing</span></div>
<span class="btn-primary">Get started</span>
</nav>
<section class="hero">
<span class="badge">The Infrastructure Cloud</span>
<h1>Automate and secure any infrastructure</h1>
<p>Consistent workflows to provision, secure, connect, and run any infrastructure for any application.</p>
<div class="row">
<button class="btn-primary">Get started</button>
<button class="btn-secondary">Contact us</button>
</div>
</section>
<div class="cards">
<div class="card"><h3>Provision</h3><p>Automate infrastructure with a consistent workflow.</p></div>
<div class="card tf"><h3>Terraform</h3><p>Provision infrastructure with an API-driven workflow.</p><span class="cta">Learn more →</span></div>
<div class="card bd"><h3>Boundary</h3><p>Secure remote access to any system, anywhere.</p><span class="cta">Learn more →</span></div>
</div>
<footer>© Hashicorp · An IBM Company</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #0082C8; color: #FFFFFF;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #FFFFFF; color: #0082C8;
border: 1px solid #0082C8; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.23; letter-spacing: 0.5px; background: #dbeef7; color: #0082C8;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>IQAir</title>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;font-family:-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;color:#333333;}
*{box-sizing:border-box;}
.utilbar{position:absolute;top:0;left:0;width:960px;height:32px;background:#F5F7FA;color:#666666;font-size:12px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.nav{position:absolute;top:32px;left:0;width:960px;height:60px;background:#fff;border-bottom:1px solid #E0E0E0;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-weight:700;font-size:19px;color:#1A1A1A;}
.logo span{color:#0082C8;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;}
.hero{position:absolute;top:92px;left:0;width:960px;height:190px;background:#F5F7FA;display:flex;align-items:center;padding:0 40px;}
.hero h1{font-size:28px;font-weight:700;color:#1A1A1A;margin:0 0 8px 0;}
.hero p{font-size:15px;color:#333333;margin:0 0 16px 0;width:400px;}
.searchpill{width:340px;height:44px;border-radius:9999px;background:#fff;border:1px solid #E0E0E0;display:flex;align-items:center;padding:0 20px;font-size:13px;color:#666;}
.aqiwrap{position:absolute;right:60px;top:106px;display:flex;align-items:center;gap:16px;}
.aqinum{font-size:56px;font-weight:700;color:#1A1A1A;line-height:1;}
.aqibadge{background:#009966;color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;border-radius:9999px;padding:5px 14px;}
.maplabel{position:absolute;top:296px;left:40px;font-size:13px;font-weight:600;color:#333;}
.mapbox{position:absolute;top:322px;left:40px;width:880px;height:110px;border-radius:12px;border:1px solid #E0E0E0;background:linear-gradient(135deg,#eef3f8,#dce8f2);position:relative;}
.dot{position:absolute;width:14px;height:14px;border-radius:50%;}
.d1{background:#009966;top:30px;left:120px;}
.d2{background:#FFDE33;top:60px;left:300px;}
.d3{background:#CC0033;top:20px;left:480px;}
.d4{background:#FF9933;top:70px;left:650px;}
.d5{background:#009966;top:40px;left:780px;}
.sectitle{position:absolute;top:452px;left:40px;font-size:18px;font-weight:600;color:#1A1A1A;}
.grid{position:absolute;top:490px;left:40px;width:880px;height:130px;display:flex;gap:20px;}
.card{width:206px;background:#fff;border:1px solid #E0E0E0;border-radius:8px;padding:16px;}
.imgbox{width:174px;height:60px;background:#fff;border-radius:4px;margin-bottom:8px;position:relative;}
.imgbox.a::after{content:'';position:absolute;top:10px;left:60px;width:54px;height:40px;background:#0082C8;border-radius:8px;}
.imgbox.b::after{content:'';position:absolute;top:14px;left:64px;width:46px;height:34px;background:#1A1A1A;border-radius:6px;}
.title{font-size:14px;font-weight:600;color:#1A1A1A;margin-bottom:4px;}
.spec{font-size:11px;color:#666;margin-bottom:6px;}
.price{font-size:14px;font-weight:700;color:#1A1A1A;}
</style>
<div class="utilbar"><span>Professional / Business Login</span><span>Installer Locator · EN</span></div>
<div class="nav">
<div class="logo">Iqair</div>
<div class="navlinks"><span>Air Purifiers</span><span>Filters</span><span>Air Quality Map</span><span>Business</span></div>
</div>
<div class="hero">
<h1>Know your air.</h1>
<p>Real-time global air quality data paired with HyperHEPA filtration engineered to medical-grade standards.</p>
<div class="searchpill">Enter a city to check air quality…</div>
<div class="aqiwrap">
<div class="aqinum">42</div>
<div class="aqibadge">Good</div>
</div>
</div>
<div class="maplabel">Live Global Air Quality Map</div>
<div class="mapbox">
<div class="dot d1"></div><div class="dot d2"></div><div class="dot d3"></div><div class="dot d4"></div><div class="dot d5"></div>
</div>
<div class="sectitle">Shop Purifiers</div>
<div class="grid">
<div class="card">
<div class="imgbox a"></div>
<div class="title">HealthPro Plus</div>
<div class="spec">99.5% filtration · 1,125 sq ft</div>
<div class="price">$899.00</div>
</div>
<div class="card">
<div class="imgbox b"></div>
<div class="title">Atem X Personal</div>
<div class="spec">HyperHEPA · Desk / Bedroom</div>
<div class="price">$1,299.00</div>
</div>
<div class="card">
<div class="imgbox a"></div>
<div class="title">HealthPro 250</div>
<div class="spec">99.5% filtration · 850 sq ft</div>
<div class="price">$799.00</div>
</div>
<div class="card">
<div class="imgbox b"></div>
<div class="title">Replacement Filter Set</div>
<div class="spec">HyperHEPA + Carbon</div>
<div class="price">$189.00</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2b2e38;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2b2e38;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #2b2e38; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #085e91; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: transparent; color: #085e91;
border: 1px solid #085e91; border-radius: 4px;
padding: 10px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2b2e38;
border: 1px solid #abb8c3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.8px; background: #6dcff6; color: #005689;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Epilog Laser — Home</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#32373c;
font-family:Arial,'Helvetica CY','Nimbus Sans L',sans-serif;
}
*{box-sizing:border-box;}
.page{width:960px;height:640px;display:flex;flex-direction:column;}
header{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #abb8c3;}
.logo{font-size:20px;font-weight:700;color:#2b2e38;}
.logo span{color:#085e91;}
nav{display:flex;gap:22px;}
nav a{font-size:13px;font-weight:700;color:#32373c;}
.nav-cta{background:#085e91;color:#fff;padding:8px 18px;border-radius:4px;font-size:12px;font-weight:700;}
.hero{display:flex;background:#2b2e38;padding:30px;gap:24px;}
.hero-copy{flex:1;}
.hero-copy .kicker{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#6dcff6;margin-bottom:8px;}
.hero-copy h1{font-size:32px;font-weight:700;color:#fff;margin:0 0 12px;line-height:1.2;letter-spacing:-0.3px;}
.hero-copy p{font-size:14px;color:#c3c9d1;max-width:360px;margin:0 0 18px;line-height:1.5;}
.hero-cta{display:inline-block;background:#085e91;color:#fff;padding:11px 22px;border-radius:4px;font-size:13px;font-weight:700;}
.machine{width:300px;height:150px;border-radius:6px;background:linear-gradient(160deg,#3a3f4c,#22252d);border:1px solid #4a4f5c;position:relative;overflow:hidden;}
.machine::after{content:'';position:absolute;left:20px;right:20px;top:30px;bottom:30px;border:1px solid #6dcff6;border-radius:4px;box-shadow:0 0 30px rgba(109,207,246,0.35) inset;}
.machine .beam{position:absolute;left:50%;top:0;bottom:50%;width:2px;background:#6dcff6;box-shadow:0 0 10px #6dcff6;transform:translateX(-50%);}
main{flex:1;padding:20px 30px 0;}
.spec-strip{display:flex;gap:0;border:1px solid #abb8c3;border-radius:6px;overflow:hidden;margin-bottom:18px;}
.spec-strip div{flex:1;padding:10px 14px;border-right:1px solid #abb8c3;}
.spec-strip div:last-child{border-right:none;}
.spec-strip b{display:block;font-size:16px;color:#005689;}
.spec-strip span{font-size:10px;color:#555555;text-transform:uppercase;letter-spacing:0.4px;}
.row-head{font-size:18px;font-weight:700;color:#2b2e38;margin:0 0 12px;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.card{border:1px solid #abb8c3;border-radius:6px;overflow:hidden;}
.thumb{height:80px;background:linear-gradient(160deg,#32373c,#2b2e38);position:relative;}
.thumb::after{content:'';position:absolute;left:30%;right:30%;top:35%;bottom:35%;border:1px solid #6dcff6;box-shadow:0 0 12px rgba(109,207,246,0.4) inset;}
.card .info{padding:10px 12px;}
.card h4{font-size:13px;margin:0 0 6px;color:#2b2e38;font-weight:700;}
.card .desc{font-size:10.5px;color:#95979c;margin-bottom:8px;}
.card .price{font-size:14px;font-weight:700;color:#005689;}
.safety{display:inline-block;margin-top:4px;font-size:8px;font-weight:700;text-transform:uppercase;color:#fff;background:#dd3737;padding:2px 6px;border-radius:3px;}
footer{border-top:1px solid #abb8c3;padding:12px 30px;display:flex;justify-content:space-between;margin-top:14px;}
footer span{font-size:10px;color:#555555;}
</style>
<div class="page">
<header>
<div class="logo">Epilog Laser<span>.</span></div>
<nav><a>Fusion Edge</a><a>Zing</a><a>MUSE</a><a>Materials</a><a>Support</a></nav>
<div class="nav-cta">Request Quote</div>
</header>
<div class="hero">
<div class="hero-copy">
<div class="kicker">CO₂ & Fiber Laser Systems</div>
<h1>Precision engraving and cutting, engineered for the shop floor.</h1>
<p>From prototyping to production, Epilog systems deliver repeatable cut quality across wood, acrylic, and metal.</p>
<div class="hero-cta">Compare Systems</div>
</div>
<div class="machine"><div class="beam"></div></div>
</div>
<main>
<div class="spec-strip">
<div><b>120W</b><span>Max CO₂ Power</span></div>
<div><b>1.4M</b><span>Bed Area (in²)</span></div>
<div><b>±0.001"</b><span>Positioning Accuracy</span></div>
<div><b>24/7</b><span>Duty Cycle Rated</span></div>
</div>
<div class="row-head">Featured Laser Systems</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="info"><h4>Fusion Edge 24</h4><div class="desc">Dual-source CO₂ / fiber platform</div><div class="price">Starting at $27,995</div><div class="safety">Class 1 Enclosed</div></div></div>
<div class="card"><div class="thumb"></div><div class="info"><h4>Zing 16</h4><div class="desc">Compact desktop laser cutter</div><div class="price">Starting at $7,995</div><div class="safety">Class 1 Enclosed</div></div></div>
<div class="card"><div class="thumb"></div><div class="info"><h4>MUSE Series</h4><div class="desc">High-speed engraving system</div><div class="price">Starting at $19,495</div><div class="safety">Class 1 Enclosed</div></div></div>
</div>
</main>
<footer>
<span>© Epilog Laser Systems, Inc.</span>
<span>Applications Lab · Financing Available · Technical Support</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #EEEEEE; color: #3483FA;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #EEEEEE; color: #3483FA;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-size: 20px; font-weight:700; margin: 0; color: #3483FA; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-size: 12px; font-weight:400; line-height:1.4; margin: 0; color: #999999; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #333333; color: #ffffff;
border: none; border-radius: 999; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #EEEEEE; color: #333333;
border: 1px solid #333333; border-radius: 999;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #EEEEEE; color: #3483FA;
border: 1px solid #c0d3f1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #999999; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #d4d4d4; color: #333333;
border-radius: 999; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; background: #EEEEEE; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
header { height: 68px; background: #FFE600; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; }
.brand { display: flex; align-items: center; gap: 8px; }
.mark { width: 26px; height: 20px; border: 3px solid #2D3277; border-radius: 50%; background: transparent; }
.brand p { margin: 0; font-size: 17px; font-weight: 700; color: #2D3277; }
.searchbar { flex: 1; max-width: 420px; height: 40px; background: #fff; border-radius: 999px; display: flex; align-items: center; padding: 0 4px 0 16px; }
.searchbar span { flex: 1; font-size: 12px; color: #999999; }
.searchbtn { width: 38px; height: 32px; background: #3483FA; border-radius: 999px; margin: 4px; }
.navicons { display: flex; gap: 18px; font-size: 11px; color: #2D3277; font-weight: 600; }
.catnav { height: 38px; background: #FFFFFF; display: flex; align-items: center; gap: 22px; padding: 0 32px; border-bottom: 1px solid #E0E0E0; }
.catnav span { font-size: 12px; color: #3483FA; font-weight: 500; }
.main { display: flex; gap: 16px; padding: 16px 32px 0; }
.filters { width: 180px; }
.filters h4 { font-size: 12px; font-weight: 700; color: #333333; margin: 0 0 8px; }
.frow { font-size: 11px; color: #666666; padding: 5px 0; }
.frow.on { color: #3483FA; font-weight: 700; }
.pricebox { background: #fff; border: 1px solid #E0E0E0; border-radius: 6px; padding: 10px; margin-top: 8px; }
.pricebox .in { height: 26px; background: #F5F5F5; border-radius: 4px; margin-bottom: 6px; }
.grid { flex: 1; display: flex; gap: 14px; flex-wrap: wrap; }
.card { width: calc(25% - 11px); background: #fff; border: 1px solid #E0E0E0; border-radius: 6px; padding: 10px; }
.card .img { height: 100px; border-radius: 4px; margin-bottom: 8px; }
.card h4 { font-size: 11px; color: #333333; font-weight: 400; margin: 0 0 6px; line-height: 1.3; height: 28px; overflow: hidden; }
.card .price { font-size: 20px; font-weight: 400; color: #333333; }
.card .disc { font-size: 11px; font-weight: 600; color: #00A650; margin-left: 4px; }
.card .installment { font-size: 10px; color: #333333; margin-top: 2px; }
.card .ship { display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 600; color: #00A650; }
.card .stars { font-size: 9px; color: #3483FA; margin-top: 4px; }
</style>
<header>
<div class="brand"><div class="mark"></div><p>Mercado Livre</p></div>
<div class="searchbar"><span>Search products, brands and more...</span><div class="searchbtn"></div></div>
<div class="navicons"><span>Sign in</span><span>My orders</span><span>Cart</span></div>
</header>
<div class="catnav"><span>Deals</span><span>Supermarket</span><span>Fashion</span><span>Sell</span><span>Coupons</span><span>Meli+</span></div>
<div class="main">
<div class="filters">
<h4>Condition</h4>
<div class="frow on">New</div>
<div class="frow">Used</div>
<h4 style="margin-top:14px">Shipping</h4>
<div class="frow on">Free shipping</div>
<h4 style="margin-top:14px">Price</h4>
<div class="pricebox"><div class="in"></div><div class="in" style="margin-bottom:0"></div></div>
</div>
<div class="grid">
<div class="card"><div class="img" style="background:linear-gradient(135deg,#66B7FF,#3483FA)"></div><h4>Wireless Mechanical Keyboard RGB</h4><div><span class="price">$249</span><span class="disc">15% OFF</span></div><div class="installment">or 12x $20,75</div><span class="ship">Free shipping</span><div class="stars">★★★★★ (482)</div></div>
<div class="card"><div class="img" style="background:linear-gradient(135deg,#FFE600,#F1B500)"></div><h4>Portable Bluetooth Speaker 20W</h4><div><span class="price">$139</span><span class="disc">10% OFF</span></div><div class="installment">or 10x $13,90</div><span class="ship">Free shipping</span><div class="stars">★★★★☆ (201)</div></div>
<div class="card"><div class="img" style="background:linear-gradient(135deg,#2D3277,#3483FA)"></div><h4>Smartwatch Fitness Tracker</h4><div><span class="price">$329</span></div><div class="installment">or 12x $27,42</div><span class="ship">Free shipping</span><div class="stars">★★★★★ (930)</div></div>
<div class="card"><div class="img" style="background:linear-gradient(135deg,#00A650,#66C98A)"></div><h4>Stainless Steel Water Bottle 1L</h4><div><span class="price">$39</span><span class="disc">20% OFF</span></div><div class="installment">or 3x $13,00</div><span class="ship">Free shipping</span><div class="stars">★★★★★ (1.2k)</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f4f1; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f4f1; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f1836b; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f8f4f1; color: #212121;
border: 1px solid #f1836b; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f4f1; color: #212121;
border: 1px solid #c2bfbd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.4px; background: #b1e3d6; color: #212121;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f4f6; color:#212121; box-sizing:border-box;
font-family:'Ogg Roman', Georgia, serif; }
* { box-sizing:border-box; }
.steam { position:absolute; border-radius:50%; filter:blur(2px); opacity:0.55; pointer-events:none; }
.s1 { width:260px; height:260px; left:-80px; top:-90px; background:radial-gradient(circle,#b1e3d6,transparent 70%); }
.s2 { width:220px; height:220px; right:-60px; bottom:-80px; background:radial-gradient(circle,#f1836b,transparent 70%); opacity:0.25; }
nav { position:relative; z-index:2; height:72px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#f8f4f1; }
.brand { font-family:'Ginto Nord',sans-serif; font-size:19px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:26px; font-family:'Ginto Nord',sans-serif; font-size:14px; font-weight:500; letter-spacing:0.5px; color:#676986; text-transform:uppercase; }
.cart-btn { background:#f1836b; color:#fff; border:none; border-radius:9999px; padding:10px 22px;
font-family:'Ginto Nord',sans-serif; font-weight:600; font-size:14px; letter-spacing:0.3px; }
main { position:relative; z-index:2; display:flex; height:calc(640px - 72px); }
.gallery { width:46%; background:#f4f4f6; display:flex; align-items:center; justify-content:center; padding:24px; }
.prodimg { width:280px; height:340px; border-radius:20px; background:
linear-gradient(160deg,#b1e3d6 0%,#f4f4f6 45%,#f1836b 100%); position:relative; box-shadow:0 20px 40px rgba(39,45,69,0.12); }
.prodimg::after { content:''; position:absolute; left:50%; top:20px; transform:translateX(-50%); width:70px; height:70px;
border-radius:50%; background:#ffffff; opacity:0.7; }
.details { width:54%; padding:30px 40px; overflow:hidden; }
.badge { display:inline-block; background:#b1e3d6; color:#212121; font-family:'Ginto Nord',sans-serif;
font-size:11px; font-weight:600; letter-spacing:0.4px; text-transform:uppercase; border-radius:9999px; padding:4px 12px; margin-bottom:12px; }
h1 { font-family:'Ginto Nord',sans-serif; font-size:30px; font-weight:700; letter-spacing:-0.5px; margin:0 0 8px; color:#212121; }
.price { font-family:'Ginto Nord',sans-serif; font-size:20px; font-weight:600; color:#f1836b; margin:0 0 14px; }
.desc { font-size:15px; line-height:1.6; color:#272d45; margin:0 0 18px; max-width:420px; }
.swatches { display:flex; gap:10px; margin-bottom:20px; }
.swatch { width:28px; height:28px; border-radius:9999px; border:2px solid #ffffff; box-shadow:0 0 0 1.5px #e5e5e5; }
.buyrow { display:flex; gap:12px; margin-bottom:22px; }
.add-cart { background:#f1836b; color:#fff; border:none; border-radius:9999px; padding:14px 30px;
font-family:'Ginto Nord',sans-serif; font-weight:600; font-size:15px; letter-spacing:0.3px; }
.wishlist { background:#f8f4f1; color:#212121; border:none; border-radius:9999px; padding:14px 20px;
font-family:'Ginto Nord',sans-serif; font-weight:600; font-size:15px; }
.review { display:flex; gap:10px; align-items:center; font-family:'Ginto Nord',sans-serif; font-size:13px; color:#676986; }
.stars { color:#f2836b; letter-spacing:2px; }
</style></head>
<body>
<div class="steam s1"></div>
<div class="steam s2"></div>
<nav>
<p class="brand">Canopy</p>
<div class="navlinks"><span>Humidifiers</span><span>Shower</span><span>Bundles</span><span>Journal</span></div>
<button class="cart-btn">Cart (2)</button>
</nav>
<main>
<div class="gallery"><div class="prodimg"></div></div>
<div class="details">
<span class="badge">Best Seller</span>
<h1>The Humidifier</h1>
<p class="price">$129</p>
<p class="desc">A quiet-running ultrasonic humidifier that wraps warm, humid air into every room — designed to feel like a spa, not a machine.</p>
<div class="swatches">
<div class="swatch" style="background:#f1836b"></div>
<div class="swatch" style="background:#b1e3d6"></div>
<div class="swatch" style="background:#272d45"></div>
</div>
<div class="buyrow">
<button class="add-cart">Add to Cart</button>
<button class="wishlist">♡ Save</button>
</div>
<div class="review"><span class="stars">★★★★★</span> 4.8 · 2,140 reviews</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FDFAF5; color: #2C2416;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FDFAF5; color: #2C2416;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.1px; margin: 0; color: #2C2416; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #8A7B6A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #3D8F8F; color: #FFFFFF;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #FDFAF5; color: #2C2416;
border: 1px solid #3D8F8F; border-radius: 12px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FDFAF5; color: #2C2416;
border: 1px solid #D4C8B8; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8A7B6A; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #B8D9D4; color: #2C2416;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FDFAF5; color:#2C2416; box-sizing:border-box;
font-family:'Inter','DM Sans',system-ui,sans-serif; }
* { box-sizing:border-box; }
.promo { height:32px; background:#3D8F8F; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; border-bottom:1px solid #D4C8B8; }
.brand { font-size:17px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:500; }
.search { background:#F5EFE4; border-radius:999px; padding:8px 18px; font-size:12px; color:#8A7B6A; width:180px; }
.hero { display:flex; align-items:center; padding:22px 36px; gap:22px; }
.heroimg { flex:1; height:180px; background:linear-gradient(135deg,#B8D9D4,#3D8F8F); border-radius:12px; }
.herotext { flex:1; }
.herotext h1 { font-size:32px; font-weight:600; margin:0 0 10px; line-height:1.15; }
.herotext p { font-size:13px; color:#4A3E30; margin:0 0 14px; max-width:320px; }
.btn { display:inline-block; background:#3D8F8F; color:#fff; font-size:14px; font-weight:600; padding:13px 26px; border-radius:12px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 36px; }
.card { background:#fff; border-radius:12px; overflow:hidden; }
.card-img { height:100px; background:linear-gradient(135deg,#C4A882,#3D8F8F); position:relative; }
.badge { position:absolute; top:8px; left:8px; background:#E87B5A; color:#fff; font-size:9px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:4px; }
.cbody { padding:10px 12px; }
.cbody h3 { font-size:14px; font-weight:600; margin:0 0 6px; }
.ing { display:inline-block; background:#B8D9D4; color:#2C2416; font-size:10px; font-weight:700; text-transform:uppercase; padding:4px 10px; border-radius:999px; margin-bottom:6px; }
.price { font-size:16px; font-weight:700; }
footer { position:absolute; bottom:0; left:0; right:0; height:40px; background:#EDE6DA; color:#4A3E30;
display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; }
</style></head>
<body>
<div class="promo">Free shipping over $40 · Salt spray, sun-lifted texture</div>
<nav>
<p class="brand">Beached</p>
<div class="navlinks"><span>Shampoo</span><span>Texture</span><span>Scalp Care</span><span>Sets</span></div>
<div class="search">Search...</div>
</nav>
<section class="hero">
<div class="heroimg"></div>
<div class="herotext">
<h1>Salt-Lifted Hair, Every Day</h1>
<p>Post-ocean texture without the ocean — sea kelp and mineral salts for hair that dries into effortless waves.</p>
<span class="btn">Shop Texture Spray</span>
</div>
</section>
<div class="grid">
<div class="card">
<div class="card-img"><span class="badge">New</span></div>
<div class="cbody">
<span class="ing">Sea Kelp</span>
<h3>Texture Sea Salt Spray</h3>
<div class="price">$24</div>
</div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody">
<span class="ing">Coconut Oil</span>
<h3>Repair Shampoo Bar</h3>
<div class="price">$18</div>
</div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="cbody">
<span class="ing">Salt Minerals</span>
<h3>Scalp Renewal Serum</h3>
<div class="price">$32</div>
</div>
</div>
</div>
<footer>
<span>© Beached</span>
<span>Beached · Ingredients · Shipping · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfcfc; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfcfc; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.3px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #006bb4; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #fcfcfc; color: #111111;
border: 1px solid #006bb4; border-radius: 8px;
padding: 10px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfcfc; color: #111111;
border: 1px solid #c1c1c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #00d7e1; color: #111111;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fcfcfc; font-family:'Open Sans','Helvetica Neue',Arial,sans-serif; color:#111; }
*{box-sizing:border-box;}
.nav{height:48px;background:#3c4662;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-size:16px;font-weight:600;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;color:#fff;}
.tabs{display:flex;gap:8px;padding:14px 32px 0;}
.tab{border-radius:9999px;background:#f6f6f6;color:#757575;font-size:12px;font-weight:600;padding:6px 16px;}
.tab.active{background:#006bb4;color:#fff;}
.hero{background:#3c4662;color:#fff;padding:22px 32px;display:flex;justify-content:space-between;align-items:center;margin-top:14px;}
.hero h1{font-size:26px;font-weight:600;margin:0 0 8px;max-width:400px;}
.btn{display:inline-block;background:#00d7e1;color:#111;font-size:14px;font-weight:600;padding:12px 24px;border-radius:8px;}
.figvis{width:100px;height:150px;background:linear-gradient(160deg,#00d7e1,#006bb4);border-radius:8px;}
.sec{padding:20px 32px 0;}
.sectitle{font-size:16px;font-weight:600;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:196px;background:#fff;border:1px solid #e5e5e5;border-radius:8px;overflow:hidden;}
.thumb{aspect-ratio:1/1;position:relative;}
.badge{position:absolute;top:6px;left:6px;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 6px;border-radius:4px;color:#111;}
.body{padding:10px 12px 12px;}
.ptitle{font-size:14px;font-weight:600;}
.pprice{font-size:16px;font-weight:700;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#3c4662;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kotobukiya</div>
<div class="navlinks"><div>Model Kits</div><div>Figures</div><div>Frame Arms</div></div>
</div>
<div class="tabs">
<div class="tab active">All</div><div class="tab">Frame Arms</div><div class="tab">Megami Device</div><div class="tab">ARTFX</div>
</div>
<div class="hero">
<div>
<h1>A gallery for precision-engineered collectibles.</h1>
<div class="btn">Browse New Releases</div>
</div>
<div class="figvis"></div>
</div>
<div class="sec">
<div class="sectitle">New Releases</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#00d7e1,#3c4662)"><div class="badge" style="background:#00d7e1">New</div></div><div class="body"><div class="ptitle">Frame Arms Girl: Gourai</div><div class="pprice">$54.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#ffca30,#3c4662)"><div class="badge" style="background:#ffca30">Pre-Order</div></div><div class="body"><div class="ptitle">ARTFX Premier Figure</div><div class="pprice">$89.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e02b27,#3c4662)"><div class="badge" style="background:#e02b27;color:#fff">Sale</div></div><div class="body"><div class="ptitle">Megami Device: Asra</div><div class="pprice">$64.99</div></div></div>
</div>
</div>
<div class="footer"><span>Series Index · Restocks</span><span>Shipping & Returns</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: 0.5px; background: #222222; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #222222;
border: 1px solid #222222; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #555555;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #222222; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#555555; }
*{box-sizing:border-box;}
.nav{height:60px;background:#222222;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-family:'franklingothicbold','Helvetica Neue',Arial,sans-serif;font-size:20px;font-weight:700;color:#fff;letter-spacing:.3px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:400;color:#cfcfcf;text-transform:uppercase;letter-spacing:.5px;}
.navcta{font-size:12px;color:#337ab7;font-weight:600;}
.hero{height:250px;display:flex;padding:26px 36px;gap:26px;}
.artwork{width:250px;height:100%;border-radius:2px;position:relative;}
.artwork:before{content:'';position:absolute;inset:0;border-radius:2px;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.25),transparent 60%);}
.herotext{flex:1;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#8a6d3b;margin-bottom:10px;}
.headline{font-family:'franklingothicbold','Helvetica Neue',Arial,sans-serif;font-size:28px;font-weight:700;color:#222222;margin-bottom:10px;letter-spacing:-0.3px;}
.artist{font-size:14px;color:#555;margin-bottom:16px;}
.btn{display:inline-block;background:#337ab7;color:#fff;font-size:13px;font-weight:400;padding:11px 24px;border-radius:2px;width:fit-content;}
.sec{padding:20px 36px 0;}
.sectitle{font-family:'franklingothicbold',sans-serif;font-size:16px;font-weight:700;color:#222;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;}
.thumb{height:120px;border-radius:2px;margin-bottom:8px;}
.rtitle{font-size:13px;font-weight:700;color:#222;line-height:1.3;}
.rartist{font-size:12px;color:#777;margin-top:2px;}
.rprice{font-size:12px;color:#337ab7;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Ninja Tune</div>
<div class="navlinks"><span>Releases</span><span>Artists</span><span>Radio</span><span>Shop</span></div>
<div class="navcta">Sign In</div>
</div>
<div class="hero">
<div class="artwork" style="background:linear-gradient(135deg,#222222,#8a6d3b)"></div>
<div class="herotext">
<div class="kicker">New Release</div>
<div class="headline">Static Frequencies EP</div>
<div class="artist">Coldcut & The Session Players</div>
<div class="btn">Listen Now</div>
</div>
</div>
<div class="sec">
<div class="sectitle">Recent Releases</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3c763d,#222)"></div><div class="rtitle">Low End Theory Vol. 4</div><div class="rartist">Various Artists</div><div class="rprice">£14.99 · LP</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a94442,#222)"></div><div class="rtitle">Night Signal</div><div class="rartist">Bonobo Session</div><div class="rprice">£11.99 · CD</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#337ab7,#222)"></div><div class="rtitle">Basement Tapes</div><div class="rartist">The Cinematic Set</div><div class="rprice">£9.99 · Digital</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cc0000; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; font-family:Arial,Helvetica,sans-serif; color:#111111;
}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:19px;font-weight:700;color:#000;letter-spacing:.5px;}
.navlinks{display:flex;gap:22px;font-size:12.5px;color:#333;}
.navlinks span.active{border-bottom:2px solid #000;padding-bottom:20px;}
.search{background:#f5f5f5;border-radius:999px;height:36px;width:210px;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#999;}
.cta{background:#000;color:#fff;height:44px;display:flex;align-items:center;padding:0 18px;font-size:12.5px;font-weight:700;border-radius:8px;}
.hero{padding:24px 30px 14px;display:flex;gap:20px;align-items:center;}
.hero-copy{width:340px;}
.hero-title{font-size:27px;font-weight:700;line-height:1.25;margin-bottom:10px;}
.hero-sub{font-size:13px;color:#555;line-height:1.5;margin-bottom:14px;}
.btn-main{display:inline-block;border:2px solid #000;color:#000;padding:10px 20px;font-size:12.5px;font-weight:700;border-radius:8px;}
.hero-visual{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.cover{aspect-ratio:1/1;background:linear-gradient(155deg,#222,#000);border-radius:8px;position:relative;}
.cover:before{content:'';position:absolute;width:20px;height:20px;border-radius:50%;background:#d4af37;bottom:8px;right:8px;}
.section{padding:6px 30px 0;}
.section-title{font-size:16px;font-weight:700;margin-bottom:12px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{background:#fff;}
.card-img{width:100%;aspect-ratio:1/1;background:linear-gradient(155deg,#3a3a3a,#000);border-radius:8px;margin-bottom:8px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#cc0000;color:#fff;font-size:8.5px;font-weight:700;padding:3px 7px;border-radius:8px;}
.card-name{font-size:13px;font-weight:600;color:#111;}
.card-artist{font-size:11px;color:#777;margin-bottom:4px;}
.card-price{font-size:13px;font-weight:700;color:#000;}
.card-price .gold{color:#d4af37;font-size:10.5px;font-weight:700;margin-left:4px;}
</style>
<div class="nav">
<div class="logo">Easy Street Records Independ 2</div>
<div class="navlinks"><span class="active">Shop</span><span>Genres</span><span>Independent Labels</span><span>Turntables</span></div>
<div class="search">Search catalog...</div>
<div class="cta">Cart</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="hero-title">Independent labels, first pressings.</div>
<div class="hero-sub">A crate dug straight from independent presses — no major-label filler, just records worth the needle drop.</div>
<div class="btn-main">Shop The Crate</div>
</div>
<div class="hero-visual">
<div class="cover"></div><div class="cover"></div><div class="cover"></div><div class="cover"></div>
</div>
</div>
<div class="section">
<div class="section-title">Independent Label Picks</div>
<div class="grid">
<div class="card"><div class="card-img"><div class="badge">1ST PRESS</div></div><div class="card-name">Basement Tapes Vol. II</div><div class="card-artist">Low Fidelity Records</div><div class="card-price">$27.99 <span class="gold">LTD</span></div></div>
<div class="card"><div class="card-img"></div><div class="card-name">Northside Sessions</div><div class="card-artist">Concrete Groove Label</div><div class="card-price">$22.99</div></div>
<div class="card"><div class="card-img"><div class="badge">NEW</div></div><div class="card-name">Reverb & Ruin</div><div class="card-artist">Independent Press Co.</div><div class="card-price">$25.99</div></div>
<div class="card"><div class="card-img"></div><div class="card-name">Static Bloom</div><div class="card-artist">Small Hours Records</div><div class="card-price">$24.99 <span class="gold">LTD</span></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #da291c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #da291c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e99993; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #da291c; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #da291c; color: #f5f5f5;
border: 1px solid #de4a3f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e99993; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e04b40; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#181818; box-sizing:border-box;
font-family:"Body-Font", Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; flex-direction:column; height:640px; }
.hero { flex:0 0 356px; position:relative; overflow:hidden;
background:
linear-gradient(115deg, #0c0c0c 0%, #1a1a1a 46%, #3a0e0a 72%, #da291c 100%); }
.hero::before { content:''; position:absolute; inset:0;
background:repeating-linear-gradient(78deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 34px); }
.hero::after { content:''; position:absolute; left:-10%; right:-10%; bottom:-40px; height:140px;
background:radial-gradient(ellipse at center, rgba(218,41,28,0.55), transparent 70%); }
.hnav { position:relative; z-index:2; height:52px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.hnav .wm { color:#ffffff; font-size:13px; font-weight:700; letter-spacing:0.14em; }
.hnav .links { display:flex; gap:26px; }
.hnav .links span { color:#ffffff; font-size:12px; font-weight:400; letter-spacing:1px; text-transform:uppercase; opacity:0.92; }
.hbody { position:relative; z-index:2; padding:36px 32px 0; max-width:520px; }
.hbody .k { color:#ffffff; font-size:12px; letter-spacing:2px; text-transform:uppercase; opacity:0.8; margin:0 0 10px; }
.hbody h1 { color:#ffffff; font-size:34px; font-weight:400; line-height:1.15; margin:0 0 12px; letter-spacing:-0.2px; }
.hbody p { color:#e8e2e2; font-size:14px; line-height:1.5; margin:0 0 20px; max-width:420px; }
.cta { display:inline-flex; align-items:center; height:44px; padding:0 21px; background:#da291c; color:#ffffff;
font-size:14px; font-weight:400; border-radius:0; }
main { flex:1; min-height:0; display:flex; padding:22px 32px; gap:16px; }
.spec { flex:1; border:1px solid #e6e6e6; padding:16px 18px; display:flex; flex-direction:column; gap:8px; }
.spec .code { font-size:11px; font-weight:600; letter-spacing:1px; color:#da291c; text-transform:uppercase; }
.spec h3 { font-size:16px; font-weight:700; margin:0; color:#181818; }
.spec .row { display:flex; justify-content:space-between; font-size:12px; color:#5a5a5a; border-top:1px solid #f0f0f0; padding-top:6px; margin-top:2px; }
.spec .row b { color:#181818; font-weight:600; }
footer { flex:0 0 40px; border-top:1px solid #e6e6e6; padding:0 32px; display:flex; align-items:center;
justify-content:space-between; font-size:11px; color:#727272; }
</style></head>
<body>
<div class="wrap">
<div class="hero">
<div class="hnav">
<span class="wm">Ferrari</span>
<div class="links"><span>Range</span><span>Racing</span><span>Heritage</span><span>Subscribe</span></div>
</div>
<div class="hbody">
<p class="k">Road and Track</p>
<h1>Aerodynamic precision, built to win.</h1>
<p>Every surface is shaped by the wind tunnel first and the studio second.</p>
<span class="cta">Subscribe</span>
</div>
</div>
<main>
<div class="spec">
<span class="code">GT · ONE</span>
<h3>Grand Tourer</h3>
<div class="row"><span>Layout</span><b>Front-mid V8</b></div>
<div class="row"><span>0–100 km/h</span><b>2.9s</b></div>
</div>
<div class="spec">
<span class="code">SF · TRACK</span>
<h3>Track Edition</h3>
<div class="row"><span>Layout</span><b>Mid V12</b></div>
<div class="row"><span>Top speed</span><b>340 km/h</b></div>
</div>
<div class="spec">
<span class="code">GT · HYBRID</span>
<h3>Hybrid Berlinetta</h3>
<div class="row"><span>Layout</span><b>Mid hybrid V6</b></div>
<div class="row"><span>Power</span><b>830 cv</b></div>
</div>
</main>
<footer>
<span>© Ferrari</span>
<span>Car Range · Formula 1 · Heritage</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #212121; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #212121;
border: 1px solid #212121; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdbdb; color: #212121;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#0D0D0D; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; height:640px; }
.sidebar { width:250px; background:#F9F9F9; border-right:1px solid #E5E5E5; padding:14px 10px; flex-shrink:0; }
.newchat { background:#0D0D0D; color:#fff; border-radius:8px; padding:11px 12px; font-size:14px; font-weight:500;
display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.sb-section { font-size:12px; font-weight:500; letter-spacing:0.2px; color:#8E8E8E; padding:14px 10px 4px; }
.conv { height:40px; display:flex; align-items:center; padding:0 10px; border-radius:8px; font-size:14px;
font-weight:500; color:#0D0D0D; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv.active { background:#ECECEC; }
.conv.hover { background:#F0F0F0; }
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; flex-shrink:0; }
.chip { display:inline-flex; align-items:center; gap:6px; border:1px solid #E5E5E5; border-radius:999px;
padding:6px 12px; font-size:14px; font-weight:500; }
.chip .dot { width:14px; height:14px; border-radius:4px; background:linear-gradient(135deg,#3B82F6,#93C5FD); }
.chat { flex:1; padding:8px 0 0; overflow:hidden; max-width:720px; margin:0 auto; width:100%; }
.msg-row { display:flex; margin:14px 22px; }
.msg-row.user { justify-content:flex-end; }
.bubble { background:#F7F7F8; border-radius:18px 18px 4px 18px; padding:10px 14px; font-size:15px;
line-height:1.5; max-width:78%; }
.assistant { padding:0 22px; margin:14px 0 6px; }
.assistant h3 { font-size:17px; font-weight:600; margin:0 0 6px; }
.assistant p { font-size:15px; line-height:1.5; margin:0 0 8px; }
.assistant code { background:#F0F0F0; border-radius:4px; padding:2px 5px; font-family:Menlo,monospace; font-size:13px; }
.codeblock { background:#F7F7F8; border:1px solid #E5E5E5; border-radius:8px; margin:8px 0; overflow:hidden; }
.codeblock .cb-top { display:flex; justify-content:space-between; font-size:12px; font-weight:500; color:#676767;
padding:8px 12px; border-bottom:1px solid #E5E5E5; }
.codeblock pre { margin:0; padding:10px 12px; font-family:Menlo,monospace; font-size:12.5px; color:#0D0D0D; }
.feedback { display:flex; gap:6px; margin-top:8px; }
.fbtn { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
color:#676767; font-size:13px; }
.composer { padding:10px 22px 18px; flex-shrink:0; }
.cinner { max-width:720px; margin:0 auto; border:1px solid #E5E5E5; border-radius:24px; padding:10px 10px 10px 18px;
display:flex; align-items:center; gap:10px; }
.cinner .ph { font-size:15px; color:#676767; flex:1; }
.send { width:32px; height:32px; border-radius:50%; background:#0D0D0D; color:#fff; display:flex;
align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
</style></head>
<body>
<div class="app">
<div class="sidebar">
<div class="newchat">✎ New chat</div>
<div class="sb-section">Today</div>
<div class="conv active">Explaining tabular figures</div>
<div class="conv">React Hooks Explained</div>
<div class="sb-section">Previous 7 Days</div>
<div class="conv">Django ORM Help</div>
<div class="conv">Trip itinerary — Kyoto</div>
<div class="conv">CSS grid vs flexbox</div>
</div>
<div class="main">
<div class="topbar">
<div class="chip"><span class="dot"></span> ChatGPT (iOS) <span style="color:#8E8E8E">▾</span></div>
<div style="font-size:20px; color:#0D0D0D;">✎</div>
</div>
<div class="chat">
<div class="msg-row user"><div class="bubble">Can you show me a quick example of tabular number formatting in CSS?</div></div>
<div class="assistant">
<p>Sure — use <code>font-variant-numeric: tabular-nums</code> so digits share equal width and columns align.</p>
<div class="codeblock">
<div class="cb-top"><span>css</span><span>Copy</span></div>
<pre>.amount {
font-variant-numeric: tabular-nums;
}</pre>
</div>
<p>This keeps numbers from shifting as they update — handy for prices, timers, and tables.</p>
<div class="feedback">
<div class="fbtn">↻</div>
<div class="fbtn">📄</div>
<div class="fbtn">👍</div>
<div class="fbtn">👎</div>
</div>
</div>
</div>
<div class="composer">
<div class="cinner">
<span class="ph">Message ChatGPT (iOS)…</span>
<div class="send">↑</div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7d7d7d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #231f20; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #231f20;
border: 1px solid #231f20; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #444444;
border: 1px solid #c8c7c7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7d7d7d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.2px; background: #ddf6cf; color: #116633;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f6f6; color:#231f20; font-family:Arial,'Helvetica Neue',sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#231f20;}
.logo{font-size:20px;font-weight:700;color:#fff;letter-spacing:.2px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:#c9c9c9;}
.navlinks .active{color:#fff;border-bottom:2px solid #7396a2;padding-bottom:6px;}
.hero{height:280px;display:flex;align-items:center;padding:0 40px;background:#231f20;position:relative;overflow:hidden;}
.herotext{width:440px;z-index:2;}
.herotext h1{font-size:32px;font-weight:700;color:#fff;margin:0 0 14px;line-height:1.2;}
.herotext p{font-size:14px;color:#c9c9c9;margin:0 0 20px;max-width:330px;}
.btn{display:inline-block;height:46px;line-height:46px;padding:0 28px;background:#7396a2;color:#fff;font-size:13px;font-weight:700;border-radius:8px;width:fit-content;}
.hexrow{position:absolute;right:60px;top:70px;display:flex;flex-direction:column;gap:8px;}
.hexline{display:flex;gap:8px;}
.hex{width:44px;height:44px;border-radius:8px;}
.sec{padding:22px 40px 0;}
.sectitle{font-size:16px;font-weight:700;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#fff;border-radius:8px;padding:10px;box-shadow:0 1px 3px rgba(0,0,0,.1);position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#116633;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:8px;z-index:2;}
.thumb{height:100px;border-radius:6px;background:#f6f6f6;}
.pname{font-size:13px;font-weight:700;margin-top:8px;}
.pprice{font-size:13px;font-weight:700;color:#231f20;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Leder Games</div>
<div class="navlinks"><span class="active">Games</span><span>Expansions</span><span>Apparel</span><span>Forum</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Games built for the long campaign.</h1>
<p>Deep strategy titles crafted with confident, editorial illustration.</p>
<div class="btn">Shop Games</div>
</div>
<div class="hexrow">
<div class="hexline"><div class="hex" style="background:#7396a2;"></div><div class="hex" style="background:#116633;"></div><div class="hex" style="background:#ed1b2f;"></div></div>
<div class="hexline"><div class="hex" style="background:#116633;"></div><div class="hex" style="background:#ed1b2f;"></div><div class="hex" style="background:#7396a2;"></div></div>
</div>
</div>
<div class="sec">
<div class="sectitle">Featured Titles</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#7396a2,#231f20)"></div><div class="pname">Root: A Woodland Game</div><div class="pprice">$60</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#116633,#231f20)"></div><div class="pname">Vast: The Crystal Caverns</div><div class="pprice">$55</div></div>
<div class="card"><span class="badge" style="background:#ed1b2f;">In Stock</span><div class="thumb" style="background:linear-gradient(135deg,#ed1b2f,#231f20)"></div><div class="pname">Fort: Backyard Battles</div><div class="pprice">$30</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#231f20,#7396a2)"></div><div class="pname">Root Expansion Pack</div><div class="pprice">$25</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f9fb; color: #111314;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f9fb; color: #111314;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #111314; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676767; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #1b73b3; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f8f9fb; color: #1b73b3;
border: 1px solid #1b73b3; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f9fb; color: #111314;
border: 1px solid #bec0c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676767; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff8c00; color: #111314;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f9fb; font-family:'Aeonik','Assistant',sans-serif; color:#111314; }
*{box-sizing:border-box;}
.nav{height:72px;background:#f8f9fb;border-bottom:1px solid #eaecef;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:20px;font-weight:700;}
.navlinks{display:flex;gap:20px;font-size:15px;font-weight:500;}
.navlinks .active{color:#1b73b3;border-bottom:2px solid #1b73b3;padding-bottom:4px;}
.hero{padding:36px 30px;display:flex;gap:30px;align-items:center;}
.herotext{width:340px;}
.herotext h1{font-size:44px;font-weight:700;letter-spacing:-1px;line-height:1.1;margin:0 0 14px;}
.herotext p{font-size:16px;color:#676767;margin:0 0 20px;line-height:1.5;}
.cta{display:inline-block;background:#1b73b3;color:#fff;font-size:16px;font-weight:600;padding:14px 28px;border-radius:8px;}
.tub{flex:1;height:170px;display:flex;align-items:flex-end;justify-content:center;gap:20px;}
.jar{width:60px;height:130px;border-radius:12px 12px 20px 20px;}
.ing{margin:0 30px;background:#f5f5f5;border-left:3px solid #1b73b3;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:600;}
.rowlabel{padding:14px 30px 8px;font-size:18px;font-weight:600;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:196px;background:#fff;border-radius:12px;padding:16px;}
.thumb{aspect-ratio:1/1;border-radius:12px;margin-bottom:8px;}
.ptitle{font-size:16px;font-weight:600;margin-top:4px;}
.pprice{font-size:16px;font-weight:700;margin-top:2px;}
.badge{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;border-radius:4px;padding:2px 8px;}
</style>
<div class="nav">
<div class="logo">Transparent Labs</div>
<div class="navlinks"><div class="active">Protein</div><div>Pre Workout</div><div>Creatine</div><div>Vitamins</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>No proprietary blends. Ever.</h1>
<p>Clinically-dosed supplements, every label fully transparent.</p>
<div class="cta">Shop Best Sellers</div>
</div>
<div class="tub">
<div class="jar" style="background:#1b73b3"></div>
<div class="jar" style="background:#108474;height:110px"></div>
<div class="jar" style="background:#ff8c00;height:90px"></div>
</div>
</div>
<div class="ing">2.5g Betaine Anhydrous per serving — fully disclosed dose</div>
<div class="rowlabel">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#108474;color:#fff">New</span><div class="thumb" style="background:linear-gradient(135deg,#1b73b3,#f8f9fb)"></div><div class="ptitle">ProteinSeries Whey</div><div class="pprice">$59.99</div></div>
<div class="card"><span class="badge" style="background:#ff8c00;color:#111">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#ff8c00,#f8f9fb)"></div><div class="ptitle">Lean Pre Workout</div><div class="pprice">$44.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#108474,#f8f9fb)"></div><div class="ptitle">Creatine HMB</div><div class="pprice">$39.99</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5efeb; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5efeb; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.08em; background: #121212; color: #f5efeb;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.08em; background: transparent; color: #121212;
border: 1px solid #121212; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f5efeb; color: #121212;
border: 1px solid #bcb8b5; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1em; background: #121212; color: #f5efeb;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5efeb; font-family:'Avenir Next','Figtree','Helvetica Neue',sans-serif; color:#121212; }
*{box-sizing:border-box;}
.announce{height:32px;background:#121212;color:#f5efeb;display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:1px;text-transform:uppercase;}
.nav{height:64px;background:#f5efeb;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 44px;}
.logo{font-size:20px;font-weight:500;letter-spacing:.5px;}
.navlinks{display:flex;gap:30px;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;}
.cart{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;}
.hero{height:290px;display:flex;align-items:center;justify-content:center;padding:0 44px;background:#ffffff;border-bottom:1px solid #dedede;position:relative;}
.heroText{text-align:center;}
.headline{font-size:36px;font-weight:500;letter-spacing:.3px;margin:0 0 12px;}
.sub{font-size:14px;color:#5a5a5a;margin:0 0 20px;}
.btn{display:inline-block;border:1px solid #121212;color:#121212;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:14px 30px;}
.bead1{position:absolute;left:70px;top:60px;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d8c3a5,#8a6b45 80%);}
.bead2{position:absolute;left:120px;top:140px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b00020,#7a0016 80%);}
.bead3{position:absolute;right:80px;top:70px;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c8a96e,#8a6b45 80%);}
.bead4{position:absolute;right:130px;top:150px;width:18px;height:18px;border-radius:50%;background:#121212;}
.sec{position:relative;height:254px;padding:26px 44px;}
.secTitle{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#5a5a5a;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:216px;}
.thumb{height:130px;margin-bottom:10px;}
.cardTitle{font-size:14px;font-weight:500;margin-bottom:4px;}
.cardPrice{font-size:13px;color:#5a5a5a;}
.footer{position:absolute;bottom:0;left:0;right:0;height:34px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 44px;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:#f5efeb;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">Complimentary Shipping on Every Order</div>
<div class="nav">
<div class="logo">Lizzie Fortunato</div>
<div class="navlinks"><span>Bags</span><span>Jewelry</span><span>Objects</span><span>Journal</span></div>
<div class="cart">Bag (0)</div>
</div>
<div class="hero">
<div class="bead1"></div><div class="bead2"></div><div class="bead3"></div><div class="bead4"></div>
<div class="heroText">
<div class="headline">Handmade,<br>held with intent.</div>
<div class="sub">Beadwork and vintage hardware, cast in small studio runs.</div>
<div class="btn">Shop the Edit</div>
</div>
</div>
<div class="sec">
<div class="secTitle">New Arrivals</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#d8c3a5,#8a6b45)"></div><div class="cardTitle">Positano Beaded Bag</div><div class="cardPrice">$395</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#c8a96e,#121212)"></div><div class="cardTitle">Charm Cuff, Brass</div><div class="cardPrice">$225</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#b00020,#5a5a5a)"></div><div class="cardTitle">Object Tray, Small</div><div class="cardPrice">$110</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#8a6b45,#c8a96e)"></div><div class="cardTitle">Woven Drop Earring</div><div class="cardPrice">$165</div></div>
</div>
</div>
<div class="footer"><span>© A Small Studio, Handmade</span><span>Journal</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e21500; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e21500; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ec9087; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e21500; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e21500; color: #f5f5f5;
border: 1px solid #e53927; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ec9087; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #be1200; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>FuriosaAI</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#000000; color:#ffffff; box-sizing:border-box; font-family: "ABC Favorit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; background:#000000; border-bottom:1px solid #2a2a2a; }
.nav-logo { font-family:"ABC Favorit Mono", monospace; font-size:15px; font-weight:400; color:#ffffff; letter-spacing:-0.3px; }
.nav-links { display:flex; gap:20px; }
.nav-links span { font-size:13px; font-weight:500; color:#d4d4d4; }
.nav-links span.on { color:#ffffff; }
.split { display:flex; width:960px; height:584px; }
.left { width:414px; background:#000000; padding:34px 34px 28px; display:flex; flex-direction:column; }
.eyebrow { display:inline-block; align-self:flex-start; font-family:"ABC Favorit Mono", monospace; font-size:11px; font-weight:500; letter-spacing:0.5px; color:#cdbbff; border:1px solid #3a3a3a; border-radius:5px; padding:4px 10px; text-transform:uppercase; }
.headline { font-size:44px; font-weight:400; line-height:1.02; letter-spacing:-1.4px; text-transform:uppercase; margin:18px 0 14px; color:#ffffff; }
.sub { font-size:15px; line-height:1.6; color:#d4d4d4; max-width:340px; margin:0 0 22px; }
.cta { align-self:flex-start; background:#e21500; color:#ffffff; border:none; border-radius:6px; padding:14px 22px; font-family:"ABC Favorit Mono", monospace; font-size:15px; font-weight:400; cursor:default; }
.chiprow { display:flex; gap:8px; margin-top:26px; }
.chip { border-radius:5px; padding:4px 12px; font-size:13px; font-weight:400; }
.chip-mint { background:#70e697; color:#151515; }
.chip-yellow { background:#fffa82; color:#151515; }
.foot-note { margin-top:auto; font-size:11px; font-weight:500; color:#7f7f7f; letter-spacing:0.2px; }
.right { width:546px; background:#ffffff; color:#151515; padding:30px 34px 26px; }
.section-label { font-size:12px; font-weight:500; color:#7f7f7f; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:14px; }
.bench-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.bench-name { width:96px; font-family:"ABC Favorit Mono", monospace; font-size:12px; color:#151515; flex-shrink:0; }
.bench-track { flex:1; height:16px; background:rgba(0,0,0,0.06); border-radius:4px; overflow:hidden; }
.bench-fill { height:100%; border-radius:4px; }
.bench-fill.hero { background:#e21500; }
.bench-fill.a { background:#7f7f7f; }
.bench-fill.b { background:#d4d4d4; }
.bench-val { width:64px; text-align:right; font-family:"ABC Favorit Mono", monospace; font-size:12px; color:#7f7f7f; flex-shrink:0; }
.featured { margin-top:22px; background:#ffffff; border-radius:12px; padding:20px 22px; box-shadow: rgba(0,0,0,0.18) 0px 18px 50px; }
.featured .chip { margin-bottom:12px; display:inline-block; }
.featured h3 { font-size:19px; font-weight:400; line-height:1.25; margin:0 0 8px; color:#151515; }
.featured p { font-size:13px; line-height:1.55; color:#7f7f7f; margin:0; }
.blog-row { display:flex; gap:14px; margin-top:16px; }
.blog-card { flex:1; background:#ffffff; border-radius:8px; padding:12px 14px; border:1px solid rgba(0,0,0,0.08); }
.blog-card .chip { margin-bottom:8px; }
.blog-card h4 { font-size:13px; font-weight:400; line-height:1.3; margin:0; color:#151515; }
</style>
</head>
<body>
<div class="nav">
<div class="nav-logo">FuriosaAI</div>
<div class="nav-links">
<span class="on">Products</span>
<span>Software</span>
<span>Blog</span>
<span>Newsroom</span>
<span>Careers</span>
</div>
</div>
<div class="split">
<div class="left">
<span class="eyebrow">Tensor Contraction Processor</span>
<div class="headline">Inference<br>Without<br>Constraints</div>
<p class="sub">FuriosaAI is a purpose-built inference accelerator delivering the highest throughput per watt for large-model serving.</p>
<button class="cta">GET STARTED →</button>
<div class="chiprow">
<span class="chip chip-mint">News</span>
<span class="chip chip-yellow">Technical Updates</span>
</div>
<div class="foot-note">© 2026 FuriosaAI — Seoul</div>
</div>
<div class="right">
<div class="section-label">Benchmark — Tokens / Sec / Watt</div>
<div class="bench-row">
<div class="bench-name">Accelerator R</div>
<div class="bench-track"><div class="bench-fill hero" style="width:92%;"></div></div>
<div class="bench-val">128.4</div>
</div>
<div class="bench-row">
<div class="bench-name">GPU Class A</div>
<div class="bench-track"><div class="bench-fill a" style="width:48%;"></div></div>
<div class="bench-val">61.2</div>
</div>
<div class="bench-row">
<div class="bench-name">GPU Class B</div>
<div class="bench-track"><div class="bench-fill b" style="width:36%;"></div></div>
<div class="bench-val">44.7</div>
</div>
<div class="featured">
<span class="chip chip-yellow">Technical Updates</span>
<h3>Gen-2 Tensor Contraction Architecture: efficiency notes</h3>
<p>Updated benchmarks, release notes, and a developer quick-start for the second-generation accelerator.</p>
</div>
<div class="blog-row">
<div class="blog-card">
<span class="chip chip-mint" style="font-size:11px; padding:3px 9px;">News</span>
<h4>Foundry partnership expands production capacity</h4>
</div>
<div class="blog-card">
<span class="chip chip-yellow" style="font-size:11px; padding:3px 9px;">Technical</span>
<h4>Compiler stack adds multimodal kernel support</h4>
</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Noto Sans JP",-apple-system,"Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
header { height:56px; background:#000000; display:flex; align-items:center; gap:16px; padding:0 20px; }
.brand { color:#fff; font-size:16px; font-weight:700; letter-spacing:0.04em; margin:0; }
.search { flex:1; max-width:420px; height:32px; background:#fff; border-radius:4px; display:flex;
align-items:center; padding:0 12px; font-size:12px; color:#999999; }
.search::before { content:'⌕'; margin-right:6px; color:#666666; }
.hicons { margin-left:auto; display:flex; gap:18px; color:#fff; font-size:14px; position:relative; }
.cartdot { position:absolute; top:-6px; right:-8px; width:14px; height:14px; border-radius:50%;
background:#e60012; color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.page { display:flex; flex-direction:column; width:960px; height:640px; }
.body { display:flex; flex:1; min-height:0; }
.media { width:420px; flex-shrink:0; position:relative; background:#f5f5f5; }
.imgbox { position:absolute; inset:0; background:linear-gradient(155deg,#eeeeee,#dcdcdc); }
.imgbox::before { content:''; position:absolute; inset:40px; border:1px solid #dddddd; }
.badge-sale { position:absolute; top:14px; left:14px; background:#e60012; color:#fff; font-size:11px;
font-weight:700; letter-spacing:0.02em; border-radius:2px; padding:2px 6px; }
.heart { position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:50%;
background:rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; font-size:14px; color:#000; }
.dots { position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:5px; }
.dots span { width:5px; height:5px; border-radius:50%; background:#ccc; }
.dots span.on { background:#000; }
.info { flex:1; min-width:0; padding:20px 24px 0; display:flex; flex-direction:column; }
.brandname { font-size:13px; font-weight:700; letter-spacing:0.04em; margin:0 0 4px; }
.itemtitle { font-size:14px; font-weight:400; line-height:1.5; color:#333333; margin:0 0 12px; max-width:420px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:4px; }
.price-sale { font-size:22px; font-weight:700; color:#e60012; }
.price-orig { font-size:13px; color:#999999; text-decoration:line-through; }
.price-off { font-size:12px; font-weight:700; color:#e60012; }
.price-note { font-size:12px; color:#999999; margin-bottom:16px; }
.lowstock { display:inline-flex; align-self:flex-start; border:1px solid #e60012; color:#e60012; font-size:11px;
font-weight:700; border-radius:2px; padding:2px 6px; margin-bottom:14px; }
.filtertabs { display:flex; gap:20px; border-bottom:1px solid #e5e5e5; margin-bottom:14px; }
.ftab { font-size:14px; font-weight:700; color:#666666; padding-bottom:9px; }
.ftab.act { color:#000000; border-bottom:2px solid #000000; }
.specs { display:flex; flex-direction:column; gap:8px; max-width:420px; }
.spec-row { display:flex; justify-content:space-between; font-size:12px; color:#666666; }
.spec-row b { color:#333333; font-weight:400; }
.points { margin-top:auto; margin-bottom:14px; font-size:12px; color:#666666; }
.points b { color:#e60012; font-weight:700; }
.ctabar { height:56px; background:#ffffff; border-top:1px solid #e5e5e5; display:flex; align-items:center;
gap:10px; padding:0 24px; }
.btn-fav { width:110px; height:40px; border:1px solid #000000; border-radius:4px; background:#fff; color:#000;
font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.btn-cart { flex:1; height:40px; border-radius:4px; background:#000000; color:#fff; font-size:14px; font-weight:700;
display:flex; align-items:center; justify-content:center; }
.rail { background:#f5f5f5; flex-shrink:0; height:126px; padding:12px 24px; box-sizing:border-box; }
.rail h5 { font-size:11px; font-weight:700; color:#666666; letter-spacing:0.02em; margin:0 0 8px; }
.rgrid { display:flex; gap:8px; }
.rthumb { width:60px; height:80px; flex-shrink:0; background:#e5e5e5; position:relative; }
.rbadge { position:absolute; top:4px; left:4px; background:#000; color:#fff; font-size:9px; font-weight:700;
border-radius:2px; padding:1px 4px; }
</style></head>
<body>
<div class="page">
<header>
<p class="brand">ZOZOTOWN</p>
<div class="search">Search brands, items, keywords</div>
<div class="hicons"><span>♡</span><span>🛍<span class="cartdot">3</span></span></div>
</header>
<div class="body">
<div class="media">
<div class="imgbox"></div>
<span class="badge-sale">SALE</span>
<span class="heart">♡</span>
<div class="dots"><span class="on"></span><span></span><span></span><span></span></div>
</div>
<div class="info">
<p class="brandname">NORTH COAST STUDIO</p>
<p class="itemtitle">Oversized Wool-Blend Chesterfield Coat, Long Length</p>
<div class="price-row">
<span class="price-sale">¥16,800</span>
<span class="price-orig">¥24,000</span>
<span class="price-off">30% OFF</span>
</div>
<div class="price-note">Free shipping · Arrives as soon as tomorrow</div>
<span class="lowstock">Almost Sold Out</span>
<div class="filtertabs">
<span class="ftab act">Details</span>
<span class="ftab">Size</span>
<span class="ftab">Reviews 128</span>
</div>
<div class="specs">
<div class="spec-row"><span>Color</span><b>Charcoal Gray</b></div>
<div class="spec-row"><span>Material</span><b>Wool 60% / Polyester 40%</b></div>
<div class="spec-row"><span>Size</span><b>ONE SIZE (Length 100cm)</b></div>
</div>
<div class="points">Earn <b>168 pts</b> in rewards</div>
</div>
</div>
<div class="rail">
<h5>Customers who viewed this item also viewed</h5>
<div class="rgrid">
<div class="rthumb"></div>
<div class="rthumb"><span class="rbadge">NEW</span></div>
<div class="rthumb"></div>
<div class="rthumb"></div>
<div class="rthumb"></div>
<div class="rthumb"><span class="rbadge">NEW</span></div>
<div class="rthumb"></div>
<div class="rthumb"></div>
<div class="rthumb"></div>
<div class="rthumb"></div>
</div>
</div>
<div class="ctabar">
<div class="btn-fav">Add to Favorites</div>
<div class="btn-cart">Add to Cart</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfbfb; color: #1f1b1b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfbfb; color: #1f1b1b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1f1b1b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #234479; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #234479;
border: 1px solid #234479; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #1f1b1b;
border: 1px solid #e0e0e0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #fdb913; color: #1f1b1b;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbfbfb; color:#1f1b1b; box-sizing:border-box; font-family:'Segoe UI', system-ui, Arial, sans-serif; }
* { box-sizing:border-box; }
.util { height:36px; background:#1f1b1b; color:#fbfbfb; font-size:12px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.navbar { height:60px; background:#234479; display:flex; align-items:center; padding:0 24px; gap:20px; position:relative; }
.navbar::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:#fdb913; }
.brand { color:#fff; font-weight:700; font-size:19px; }
.navlinks { display:flex; gap:18px; }
.navlinks div { color:#fff; font-size:15px; font-weight:600; }
.search { margin-left:auto; display:flex; height:36px; width:260px; }
.search input { flex:1; border:none; padding:0 10px; font-size:12px; outline:none; }
.search .go { width:40px; background:#fdb913; color:#1f1b1b; font-weight:700; display:flex; align-items:center; justify-content:center; }
.promo { background:#fdb913; color:#1f1b1b; text-align:center; padding:8px; font-size:13px; font-weight:600; }
.hero { background:#234479; color:#fff; padding:36px 24px; display:flex; align-items:center; justify-content:space-between; }
.hero h1 { font-size:32px; font-weight:700; margin:0 0 8px; }
.hero p { font-size:14px; margin:0 0 14px; }
.hero .cta { display:inline-block; background:#fdb913; color:#1f1b1b; font-size:14px; font-weight:600; padding:12px 26px; border-radius:4px; }
.hero .box { width:200px; height:130px; border-radius:8px; background:linear-gradient(135deg,#3b71ca,#1a3460); }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:20px 24px; }
.card { background:#fff; border:1px solid #e0e0e0; border-radius:4px; padding:12px; }
.img { aspect-ratio:1/1; border-radius:4px; margin-bottom:8px; }
.g1 { background:linear-gradient(135deg,#234479,#9fa6b2); }
.g2 { background:linear-gradient(135deg,#fdb913,#8a5c00); }
.g3 { background:linear-gradient(135deg,#14a44d,#0c622e); }
.g4 { background:linear-gradient(135deg,#dc4c64,#842e3c); }
.name { font-size:16px; font-weight:600; margin-bottom:4px; }
.price { font-size:24px; font-weight:700; }
.stock { font-size:12px; font-weight:600; color:#14a44d; margin-top:4px; }
.badge { display:inline-block; background:#234479; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:3px 8px; margin-bottom:6px; }
</style></head>
<body>
<div class="util"><span>Business Solutions | Support</span><span>Account | Cart (0)</span></div>
<div class="navbar">
<div class="brand">Fellowes</div>
<div class="navlinks"><div>Shredders</div><div>Laminators</div><div>Binding</div><div>Storage</div></div>
<div class="search"><input placeholder="Search products"/><div class="go">🔍</div></div>
</div>
<div class="promo">FREE SHIPPING ON ORDERS OVER $50</div>
<div class="hero"><div><h1>Powersheild Shredders</h1><p>Cross-cut security for the modern office</p><div class="cta">Shop Now</div></div><div class="box"></div></div>
<div class="grid">
<div class="card"><span class="badge">Bestseller</span><div class="img g1"></div><div class="name">Powershred 99Ci Shredder</div><div class="price">$449.99</div><div class="stock">In Stock</div></div>
<div class="card"><span class="badge">New</span><div class="img g2"></div><div class="name">Saturn3 Laminator</div><div class="price">$89.99</div><div class="stock">In Stock</div></div>
<div class="card"><div class="img g3"></div><div class="name">Star Combo Binding Machine</div><div class="price">$299.99</div><div class="stock">In Stock</div></div>
<div class="card"><div class="img g4"></div><div class="name">Bankers Box Storage Set</div><div class="price">$34.99</div><div class="stock">Low Stock</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #26251e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #26251e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #989794; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f7f4; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #26251e; color: #f7f7f4;
border: 1px solid #f7f7f4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #26251e; color: #f5f5f5;
border: 1px solid #474640; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #989794; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #474740; color: #f7f7f4;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f4; color:#26251e; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:15px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; color:#26251e; }
.pill { background:#26251e; color:#f7f7f4; border-radius:9999px; padding:11px 20px; font-size:14px; }
.hero { padding:18px 40px 22px; text-align:center; }
.hero h1 { font-size:44px; font-weight:400; line-height:1.05; margin:0 0 12px; }
.hero p { font-size:16px; color:#26251e; opacity:0.7; max-width:480px; margin:0 auto 16px; }
.editor { margin:0 40px; background:#f2f1ed; border-radius:4px; padding:18px 20px; display:flex; gap:20px; }
.tabs { display:flex; gap:2px; margin-bottom:10px; }
.tab { padding:6px 12px; font-size:13px; border-right:1px solid rgba(38,37,30,0.1); }
.tab.sel { background:#f7f7f4; }
.lines { font-family:"Menlo","Consolas",monospace; font-size:13px; line-height:1.9; color:#26251e; }
.lines .g { color:#f54e00; }
.row { display:flex; justify-content:center; gap:14px; padding:16px 40px 30px; }
.card { flex:1; background:#f2f1ed; border-radius:4px; padding:16px; }
.card h3 { font-size:14px; margin:0 0 6px; }
.card p { font-size:12px; opacity:0.7; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">Cursor</p>
<div class="navlinks"><span>Agents</span><span>Cloud</span><span>CLI</span><span>Mobile</span></div>
<button class="pill">Download</button>
</nav>
<section class="hero">
<h1>The AI code editor</h1>
<p>Built to make you extraordinarily productive. Cursor is the best way to code with AI.</p>
</section>
<div class="editor">
<div style="flex:1">
<div class="tabs"><span class="tab sel">agent.ts</span><span class="tab">utils.ts</span></div>
<div class="lines">
<span class="g">function</span> planRelease(version: string) {'{'}<br>
<span class="g">const</span> tasks = agent.plan(version);<br>
<span class="g">return</span> tasks.filter(t => !t.done);<br>
{'}'}
</div>
</div>
</div>
<div class="row">
<div class="card"><h3>Tab</h3><p>Predicts your next edit across the whole file.</p></div>
<div class="card"><h3>Agent</h3><p>Runs terminal commands and edits multiple files.</p></div>
<div class="card"><h3>Bugbot</h3><p>Reviews pull requests before a human has to.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #0070f3; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #1a1a1a; color: #ffffff;
border: 1px solid #0070f3; border-radius: 8px;
padding: 14px 32px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #1a1a1a; color: #ffffff;
border: 1px solid #404040; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #0070f3; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#000000;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:#e0e0e0;}
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #333333;}
.logo{font-size:19px;font-weight:700;letter-spacing:-1px;color:#ffffff;}
.logo span{color:#0070f3;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#e0e0e0;}
.cta-nav{padding:8px 18px;background:#0070f3;color:#ffffff;font-size:12px;font-weight:600;border-radius:8px;}
.hero{height:266px;display:flex;align-items:center;padding:0 40px;gap:38px;}
.hero-text{width:400px;}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:1px;color:#3291ff;text-transform:uppercase;margin-bottom:10px;}
.headline{font-size:42px;font-weight:700;letter-spacing:-1px;line-height:1.12;color:#ffffff;margin-bottom:14px;}
.sub{font-size:14px;color:#888888;line-height:1.5;width:365px;margin-bottom:20px;}
.cta{display:inline-block;padding:14px 30px;background:#0070f3;color:#ffffff;border-radius:8px;font-size:14px;font-weight:600;box-shadow:0 0 30px rgba(0,112,243,0.4);}
.hero-visual{flex:1;height:220px;position:relative;background:#111111;border-radius:8px;border:1px solid #333333;}
.ring{position:absolute;left:36px;top:30px;width:120px;height:120px;border-radius:60px;border:8px solid #1a1a1a;border-top-color:#0070f3;border-right-color:#0070f3;}
.ring-label{position:absolute;left:66px;top:76px;font-size:20px;font-weight:700;color:#ffffff;}
.statrow{position:absolute;right:30px;top:36px;width:180px;}
.stat{display:flex;justify-content:space-between;font-size:12px;color:#888888;padding:6px 0;border-bottom:1px solid #1a1a1a;}
.stat b{color:#ffffff;}
.waterline{position:absolute;left:0;right:0;bottom:0;height:34px;background:linear-gradient(180deg,rgba(0,112,243,0.05),rgba(0,112,243,0.3));border-radius:0 0 8px 8px;}
.section{padding:20px 40px 0 40px;}
.section-title{font-size:20px;font-weight:600;color:#ffffff;margin-bottom:14px;}
.grid{display:flex;gap:24px;padding:0 40px;}
.card{width:204px;background:#1a1a1a;border:1px solid #333333;border-radius:8px;overflow:hidden;}
.swatch{height:88px;position:relative;}
.badge{position:absolute;left:8px;top:8px;background:#0070f3;color:#fff;font-size:9px;font-weight:700;padding:3px 8px;border-radius:8px;}
.card-body{padding:11px 13px 14px 13px;}
.card-title{font-size:13px;font-weight:600;color:#ffffff;margin-bottom:5px;}
.card-sub{font-size:11px;color:#888888;}
</style>
<div class="nav">
<div class="logo">Hydrow</div>
<div class="navlinks"><span>Rower</span><span>Wave</span><span>Membership</span><span>Classes</span></div>
<div class="cta-nav">Get Started</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="eyebrow">Live Outdoor Reality</div>
<div class="headline">Row like<br/>you're there.</div>
<div class="sub">Immersive live and on-demand rowing classes filmed on rivers, lakes, and oceans around the world.</div>
<div class="cta">Start Rowing</div>
</div>
<div class="hero-visual">
<div class="ring"></div>
<div class="ring-label">24:10</div>
<div class="statrow">
<div class="stat"><span>Split Pace</span><b>2:04</b></div>
<div class="stat"><span>Stroke Rate</span><b>22 spm</b></div>
<div class="stat" style="border-bottom:none;"><span>Distance</span><b>4,820 m</b></div>
</div>
<div class="waterline"></div>
</div>
</div>
<div class="section"><div class="section-title">Live & On-Demand</div></div>
<div class="grid">
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#0070f3,#001a40);"><div class="badge">Live</div></div>
<div class="card-body"><div class="card-title">Sunrise River Row</div><div class="card-sub">30 min · Endurance</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#1a1a1a,#0a0a0a);"></div>
<div class="card-body"><div class="card-title">HIIT on the Hudson</div><div class="card-sub">20 min · Intervals</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#3291ff,#0a0a0a);"><div class="badge">New</div></div>
<div class="card-body"><div class="card-title">Strength Bootcamp</div><div class="card-sub">45 min · Off-Rower</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#111111,#000000);"></div>
<div class="card-body"><div class="card-title">Coastal Cooldown</div><div class="card-sub">15 min · Recovery</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #c9191d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #c9191d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e19294; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d51b1f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c9191d; color: #ffffff;
border: 1px solid #d51b1f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #c9191d; color: #f5f5f5;
border: 1px solid #d03c40; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e19294; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cb191d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#42434a; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.page { position:relative; display:flex; flex-direction:column; width:960px; height:640px; }
nav { flex:0 0 64px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:rgba(255,255,255,0.80); border-bottom:1px solid rgba(0,0,0,0.10);
position:relative; z-index:3; }
.logo { font-size:19px; font-weight:700; color:#c9191d; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:24px; font-size:15px; color:#42434a; }
.row { display:flex; gap:10px; }
.btn-solid { background:#c9191d; color:#ffffff; border:none; border-radius:12px;
padding:9px 22px; font-weight:500; font-size:14.5px; white-space:nowrap; cursor:default; }
.btn-ghost { background:transparent; color:#c9191d; border:1px solid #c9191d; border-radius:9px;
padding:8px 20px; font-weight:500; font-size:14.5px; white-space:nowrap; cursor:default; }
.hero { flex:0 0 250px; display:flex; align-items:center; padding:0 40px; gap:40px;
background:linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%); position:relative; z-index:2; }
.hero-copy { flex:1 1 460px; display:flex; flex-direction:column; gap:14px; }
.hero-copy .tag { display:inline-block; background:#f4f4f6; color:#c9191d; border-radius:40px;
padding:4px 14px; font-size:12px; font-weight:500; width:fit-content; }
.hero-copy h1 { font-size:34px; font-weight:700; line-height:1.22; margin:0; color:#292f40; max-width:400px; }
.hero-copy p { font-size:14.5px; color:#42434a; margin:0; max-width:380px; line-height:1.5; }
.qr { flex:0 0 190px; height:190px; display:grid; grid-template-columns:repeat(8,1fr);
grid-template-rows:repeat(8,1fr); gap:4px; padding:14px; background:#f4f4f6; border-radius:20px;
box-shadow: rgba(0,0,0,0.12) 0px 15px 30px -25px; }
.qr span { border-radius:2px; background:#ededf1; }
.qr span.on { background:#c9191d; }
.features { flex:1; display:flex; gap:18px; padding:22px 40px; background:#ffffff; position:relative; z-index:2; }
.fcard { flex:1; background:#f4f4f6; border-radius:16px; padding:20px 18px; display:flex;
flex-direction:column; gap:8px; box-shadow: rgba(0,0,0,0.12) 0px 15px 30px -25px; }
.fcard .ic { width:34px; height:34px; border-radius:10px; background:#c9191d; }
.fcard h4 { font-size:16.5px; font-weight:600; color:#292f40; margin:0; }
.fcard p { font-size:12.5px; color:#42434a; margin:0; line-height:1.5; }
footer { flex:0 0 74px; background:#171718; color:#ffffff; padding:0 40px; display:flex;
align-items:center; justify-content:space-between; position:relative; z-index:2; }
footer .quote { font-size:12px; color:#b7b8c4; max-width:520px; line-height:1.5; }
footer .cop { font-size:11.5px; color:#b7b8c4; white-space:nowrap; }
</style></head>
<body>
<div class="page">
<nav>
<div class="logo">JKOPay</div>
<div class="navlinks">
<span>Pay</span>
<span>Transfer</span>
<span>Rewards</span>
<span>Business</span>
</div>
<div class="row">
<button class="btn-ghost">Log in</button>
<button class="btn-solid">Get JKOPay</button>
</div>
</nav>
<section class="hero">
<div class="hero-copy">
<span class="tag">More than payment</span>
<h1>Unlock every moment of your day.</h1>
<p>From your morning coffee to the MRT to the night market — one barcode, done in seconds.</p>
</div>
<div class="qr">
<span class="on"></span><span></span><span class="on"></span><span></span><span class="on"></span><span></span><span class="on"></span><span></span>
<span></span><span class="on"></span><span></span><span class="on"></span><span></span><span></span><span></span><span class="on"></span>
<span class="on"></span><span></span><span class="on"></span><span class="on"></span><span></span><span class="on"></span><span></span><span></span>
<span></span><span class="on"></span><span></span><span></span><span class="on"></span><span></span><span class="on"></span><span></span>
<span class="on"></span><span></span><span class="on"></span><span></span><span class="on"></span><span></span><span></span><span class="on"></span>
<span></span><span class="on"></span><span></span><span class="on"></span><span></span><span class="on"></span><span class="on"></span><span></span>
<span class="on"></span><span></span><span></span><span></span><span class="on"></span><span></span><span></span><span class="on"></span>
<span></span><span class="on"></span><span class="on"></span><span></span><span></span><span class="on"></span><span></span><span></span>
</div>
</section>
<section class="features">
<div class="fcard">
<span class="ic"></span>
<h4>Tap & pay</h4>
<p>Show your code at the register — checkout completes in seconds, everywhere.</p>
</div>
<div class="fcard">
<span class="ic"></span>
<h4>Split with friends</h4>
<p>Send money instantly to anyone in your circle, no bank visit required.</p>
</div>
<div class="fcard">
<span class="ic"></span>
<h4>Everyday rewards</h4>
<p>Cashback on the stores you already visit, credited automatically.</p>
</div>
</section>
<footer>
<span class="quote">"My regulars just show me the screen. No more counting change at the stall." — Jamie Lee, night market vendor</span>
<span class="cop">© JKOPay</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #221155; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #221155; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #48dd21; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #221155; color: #48dd21;
border: 1px solid #48dd21; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #201346; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #48dd21; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#221155; font-family:'Segoe UI',Arial,sans-serif; color:#f0f0f0; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#1a0d40;}
.logo{font-size:19px;font-weight:800;color:#48dd21;letter-spacing:.5px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#e0e0e0;}
.navlinks span:first-child{color:#48dd21;}
.searchpill{width:200px;height:36px;border-radius:9999px;background:#fff;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#666;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;background:radial-gradient(circle at 70% 50%,#3a1a7a,#221155 70%);}
.herotext{width:440px;}
h1{font-size:32px;font-weight:800;margin:0 0 12px;line-height:1.2;color:#fff;}
.sub{font-size:14px;color:#c5b8e8;margin:0 0 18px;max-width:340px;}
.cta{display:inline-flex;align-items:center;background:#48dd21;color:#1a0d40;font-size:15px;font-weight:700;padding:12px 28px;border-radius:6px;width:fit-content;}
.cabinet{position:absolute;right:80px;top:60px;width:180px;height:180px;background:linear-gradient(160deg,#3a1a7a,#1a0d40);border-radius:8px;border:3px solid #48dd21;}
.screen{position:absolute;right:100px;top:80px;width:140px;height:90px;background:radial-gradient(circle,#48dd21 0%,#1a0d40 90%);border-radius:4px;}
.sec{padding:20px 40px 0;}
.sectitle{font-size:18px;font-weight:700;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#ffffff;border-radius:8px;padding:10px;position:relative;color:#1a1a1a;}
.thumb{height:88px;background:#f0f0f0;border-radius:6px;margin-bottom:8px;}
.badge{position:absolute;top:16px;left:16px;background:#48dd21;color:#1a1a1a;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:9999px;}
.pname{font-size:13px;font-weight:600;margin-bottom:3px;}
.pprice{font-size:14px;font-weight:700;color:#3ab81a;}
</style>
<div class="nav">
<div class="logo">Level UP Video Games</div>
<div class="navlinks"><span>Retro</span><span>Consoles</span><span>Tabletop</span></div>
<div class="searchpill">Search games...</div>
</div>
<div class="hero" style="position:relative;">
<div class="herotext">
<h1>Every Cartridge Has a Story.</h1>
<div class="sub">Used consoles, retro cartridges, and tabletop games under one glowing green sign.</div>
<div class="cta">Browse Used Games</div>
</div>
<div class="cabinet"></div><div class="screen"></div>
</div>
<div class="sec">
<div class="sectitle">Trending Now</div>
<div class="grid">
<div class="card"><div class="badge">Used</div><div class="thumb"></div><div class="pname">SNES Console Bundle</div><div class="pprice">$89.99</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Catan Board Game</div><div class="pprice">$44.99</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Game Boy Color</div><div class="pprice">$59.99</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Switch Pro Controller</div><div class="pprice">$64.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f1f1; color: #0f0f0f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f1f1; color: #0f0f0f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #0f0f0f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #0693e3; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #191919; color: #ffffff;
border: 1px solid #0693e3; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #f6f1f1; color: #0f0f0f;
border: 1px solid #bcb8b8; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #0693e3; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0f0f0f; color:#d9d9d9; box-sizing:border-box;
font-family:'Montserrat','Work Sans',sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#191919; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { color:#ffffff; font-size:18px; font-weight:600; margin:0; letter-spacing:0.4px; text-transform:uppercase; }
.navlinks { display:flex; gap:26px; }
.navlinks span { color:#ffffff; font-size:11px; font-weight:500; letter-spacing:0.06em; opacity:0.75; }
.navlinks .active { color:#0693e3; opacity:1; }
.hero { height:300px; background:radial-gradient(ellipse at 30% 40%, #1d1d1d, #0f0f0f 70%); display:flex; align-items:center; padding:0 40px; position:relative; }
.spot { position:absolute; left:120px; top:40px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(6,147,227,0.18), transparent 70%); }
.figure { width:190px; height:250px; position:relative; margin-right:60px; }
.figure .base { position:absolute; bottom:0; left:20px; right:20px; height:14px; background:#0693e3; border-radius:3px; }
.figure .body { position:absolute; bottom:14px; left:45px; right:45px; top:30px; background:linear-gradient(180deg,#3a3a3a,#1d1d1d); border-radius:14px 14px 40px 40px; box-shadow:0 0 40px rgba(6,147,227,0.15); }
.figure .head { position:absolute; top:0; left:60px; width:70px; height:70px; border-radius:50%; background:linear-gradient(160deg,#4a4a4a,#1d1d1d); }
.txt h1 { color:#ffffff; font-size:30px; font-weight:600; margin:0 0 10px; letter-spacing:-0.3px; }
.txt .badge { display:inline-block; background:#191919; border:1px solid #0693e3; color:#0693e3; font-size:10px; font-weight:600; padding:5px 12px; border-radius:12px; margin-bottom:14px; letter-spacing:0.05em; }
.txt p { font-size:13px; color:#999999; margin:0 0 18px; max-width:280px; line-height:1.6; }
.txt .cta { display:inline-block; background:#0693e3; color:#fff; font-size:13px; font-weight:600; padding:11px 26px; border-radius:12px; }
.section-label { padding:18px 32px 10px; color:#ffffff; font-size:14px; font-weight:600; letter-spacing:0.03em; }
.grid { display:flex; gap:14px; padding:0 32px; }
.card { flex:1; background:#191919; border-radius:12px; padding:14px; position:relative; }
.card .art { height:100px; border-radius:8px; margin-bottom:10px; background:radial-gradient(circle at 40% 30%, #313131, #0f0f0f); position:relative; }
.card .art::after { content:''; position:absolute; left:35%; right:35%; bottom:12px; top:20px; background:linear-gradient(180deg,#4d5bcd,#1d1d1d); border-radius:8px 8px 20px 20px; }
.card .pre { position:absolute; top:22px; left:22px; background:#0693e3; color:#fff; font-size:8px; font-weight:600; padding:3px 8px; border-radius:10px; }
.card h3 { color:#fff; font-size:12px; font-weight:600; margin:0 0 4px; }
.card p { font-size:10px; color:#777; margin:0 0 6px; }
.card .price { font-size:13px; font-weight:600; color:#0693e3; }
.card .sold { font-size:10px; color:#ae2828; font-weight:600; }
footer { height:60px; background:#191919; margin-top:16px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
footer span { color:#777; font-size:10px; letter-spacing:0.04em; }
</style></head>
<body>
<nav>
<p class="brand">First 4 Figures</p>
<div class="navlinks"><span class="active">Pre-Order</span><span>In Stock</span><span>Exclusives</span><span>Collections</span></div>
</nav>
<div class="hero">
<div class="spot"></div>
<div class="figure"><div class="head"></div><div class="body"></div><div class="base"></div></div>
<div class="txt">
<span class="badge">PRE-ORDER OPEN</span>
<h1>Museum-Grade Resin.<br>Limited Runs Only.</h1>
<p>Every figure is cast in premium resin and polystone, then hand-painted to gallery standard.</p>
<span class="cta">View Collection</span>
</div>
</div>
<div class="section-label">FEATURED SCULPTURES</div>
<div class="grid">
<div class="card"><div class="art"></div><span class="pre">PRE-ORDER</span><h3>Ashen Vanguard EX</h3><p>1:4 Scale</p><div class="price">$699.00</div></div>
<div class="card"><div class="art"></div><h3>Nightfall Sentinel</h3><p>1:6 Scale</p><div class="price">$449.00</div></div>
<div class="card"><div class="art"></div><span class="pre">PRE-ORDER</span><h3>Aurora Wraith Diorama</h3><p>1:3 Scale</p><div class="price">$899.00</div></div>
<div class="card"><div class="art"></div><h3>Iron Marshal Bust</h3><p>1:2 Scale</p><div class="sold">SOLD OUT</div></div>
</div>
<footer>
<span>AUTHENTICATION CERTIFICATES</span><span>PAYMENT PLANS AVAILABLE</span><span>SHIPPING & INSURANCE</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #232323;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #232323;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #232323; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #969696; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.2px; background: #0052b4; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.2px; background: #f8f8f8; color: #232323;
border: 1px solid #0052b4; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #232323;
border: 1px solid #c3c3c3; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969696; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.3px; background: #e4002b; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f8f8; color:#232323; box-sizing:border-box;
font-family:'Segoe UI', 'Poppins', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#f8f8f8; display:flex; align-items:center; justify-content:center;
position:relative; border-bottom:1px solid #f0f0f0; }
.brand { font-size:19px; font-weight:600; margin:0; }
.navicons { position:absolute; right:28px; display:flex; gap:16px; font-size:13px; color:#232323; }
.navicons-left { position:absolute; left:28px; font-size:13px; color:#232323; }
main { display:flex; height:580px; }
.stage { width:360px; background:#fff; display:flex; align-items:center; justify-content:center; position:relative; }
.squish-badge { position:absolute; top:24px; left:24px; background:#ff8b21; color:#fff; font-size:11px; font-weight:700;
border-radius:8px; padding:5px 10px; }
.plush { width:170px; height:190px; position:relative; }
.plush-body { width:170px; height:150px; background:#0052b4; border-radius:50% 50% 44% 44% / 55% 55% 45% 45%;
box-shadow:0 22px 40px rgba(0,82,180,0.25); }
.plush-ear { width:46px; height:46px; background:#0052b4; border-radius:999px; position:absolute; top:-14px; }
.ear-l { left:10px; } .ear-r { right:10px; }
.plush-face { position:absolute; top:70px; left:34px; width:100px; text-align:center; }
.eye { width:10px; height:10px; background:#232323; border-radius:999px; display:inline-block; margin:0 14px; }
.info { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:12px; }
h1 { font-size:24px; font-weight:500; margin:0; }
.sub { font-size:13px; color:#323232; margin:0; }
.stars { color:#e0b252; font-size:14px; }
.stars span { color:#969696; font-size:12px; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:24px; font-weight:600; }
.price-strike { font-size:14px; color:#969696; text-decoration:line-through; }
.sale-badge { background:#e4002b; color:#fff; font-size:11px; font-weight:700; border-radius:4px; padding:2px 8px; width:fit-content; }
.size-row { display:flex; gap:8px; }
.size { border:1px solid #e6e6e6; border-radius:8px; padding:8px 14px; font-size:13px; }
.size.on { background:#0052b4; color:#fff; border-color:#0052b4; }
.actions { display:flex; gap:12px; margin-top:6px; }
.btn-primary { background:#0052b4; color:#fff; border-radius:8px; height:48px; padding:0 26px; display:flex;
align-items:center; font-weight:600; font-size:14px; }
.btn-secondary { background:#fff; border:1px solid #e6e6e6; color:#232323; border-radius:8px; height:48px;
padding:0 20px; display:flex; align-items:center; font-size:13px; font-weight:500; }
.newsletter { margin-top:auto; border-top:1px solid #f0f0f0; padding-top:14px; display:flex; gap:8px; align-items:center; }
.newsletter input { flex:1; border:1px solid #e6e6e6; border-radius:999px; height:36px; padding:0 16px; font-size:12px;
color:#969696; display:flex; align-items:center; }
.nbtn { background:#0052b4; color:#fff; border-radius:999px; height:36px; padding:0 18px; display:flex; align-items:center;
font-size:12px; font-weight:600; }
</style></head>
<body>
<nav>
<span class="navicons-left">☰</span>
<p class="brand">Aurora</p>
<div class="navicons"><span>Search</span><span>Cart (2)</span><span>Account</span></div>
</nav>
<main>
<div class="stage">
<span class="squish-badge">Super Soft</span>
<div class="plush">
<div class="plush-ear ear-l"></div><div class="plush-ear ear-r"></div>
<div class="plush-body"></div>
<div class="plush-face"><span class="eye"></span><span class="eye"></span></div>
</div>
</div>
<div class="info">
<span class="sale-badge">Sale</span>
<h1>Bramble the Bear — 14"</h1>
<p class="sub">Ultra-plush jumbo teddy with a weighted base for extra snuggles.</p>
<div class="stars">★★★★★<span>4.8 (612 reviews)</span></div>
<div class="price-row"><span class="price">$24.99</span><span class="price-strike">$32.99</span></div>
<div class="size-row"><div class="size on">14"</div><div class="size">20"</div><div class="size">28"</div></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Gift Wrap +$3</div>
</div>
<div class="newsletter"><div style="flex:1;border:1px solid #e6e6e6;border-radius:999px;height:36px;padding:0 16px;font-size:12px;color:#969696;display:flex;align-items:center;">[email protected]</div><div class="nbtn">Join</div></div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #a8a8aa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: #0a0a0a; color: #ffffff;
border: none; border-radius: 9999px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: transparent; color: #0a0a0a;
border: 1px solid #0a0a0a; border-radius: 9999px;
padding: 10px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #0a0a0a;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a8a8aa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background: #00d4a4; color: #0a0a0a;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0a0a0a; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
/* 상단 절반: 하늘 그라디언트 마케팅 히어로. 하단 절반: 3열 문서(사이드바/본문/TOC) —
Mintlify 특유의 "듀얼모드" (마케팅 vs 조밀한 개발자 문서) 를 위아래로 압축해 한 화면에 담는다. */
.hero { height:230px; position:relative; overflow:hidden;
background:linear-gradient(180deg,#87a8c8 0%,#c9d9e6 55%,#f5e9d8 100%); }
.cloud { position:absolute; border-radius:50%; background:rgba(255,255,255,0.55); filter:blur(1px); }
.c1 { width:160px; height:60px; top:30px; left:60px; }
.c2 { width:220px; height:80px; top:70px; right:40px; }
.c3 { width:140px; height:50px; top:130px; left:340px; }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; }
.brand { font-size:16px; font-weight:600; color:#0a0a0a; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; color:rgba(10,10,10,0.65); }
.btn-dark { background:#0a0a0a; color:#ffffff; border:none; border-radius:999px; padding:8px 18px; font-weight:600; font-size:13px; }
.heroband { position:relative; z-index:2; text-align:center; padding:14px 40px 0; }
.heroband h1 { font-size:38px; font-weight:600; letter-spacing:-1px; margin:0; color:#0a0a0a; }
.heroband p { font-size:14px; color:rgba(10,10,10,0.6); margin:8px 0 0; }
.heroband .badge { display:inline-block; background:#00d4a4; color:#0a0a0a; border-radius:999px; font-size:11px;
font-weight:700; padding:4px 12px; margin-bottom:10px; }
.docs { display:grid; grid-template-columns:180px 1fr 170px; height:384px; }
.sidebar { border-right:1px solid #e5e5e5; padding:18px 16px; font-size:12px; color:#3a3a3c; }
.sidebar .grp { font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:#a8a8aa; margin:12px 0 6px; }
.sidebar .item { padding:5px 0; }
.sidebar .item.active { color:#00b48a; font-weight:600; }
.prose { padding:20px 26px; font-size:13px; line-height:1.6; color:#1c1c1e; overflow:hidden; }
.prose h2 { font-size:20px; font-weight:600; margin:0 0 8px; letter-spacing:-0.3px; }
.prose p { margin:0 0 10px; color:#3a3a3c; }
.code { background:#1c1c1e; color:#e5e5e5; border-radius:8px; padding:14px; font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
font-size:11.5px; line-height:1.6; }
.code .c1t { color:#7cebcb; } .code .c2t { color:#f55a3c; } .code .c3t { color:#888; }
.toc { border-left:1px solid #e5e5e5; padding:18px 16px; font-size:11px; color:#888; }
.toc .t { font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:#a8a8aa; margin-bottom:8px; }
.toc .item { padding:4px 0; }
.toc .item.active { color:#00d4a4; font-weight:600; border-left:2px solid #00d4a4; padding-left:8px; margin-left:-10px; }
</style></head>
<body>
<div class="hero">
<div class="cloud c1"></div><div class="cloud c2"></div><div class="cloud c3"></div>
<nav>
<p class="brand">Mintlify</p>
<div class="navlinks"><span>Docs</span><span>Startups</span><span>Pricing</span></div>
<button class="btn-dark">Get a demo</button>
</nav>
<div class="heroband">
<span class="badge">Docs infrastructure</span>
<h1>Beautiful documentation, out of the box</h1>
<p>Inter for prose, Geist Mono for code, one signature green.</p>
</div>
</div>
<div class="docs">
<div class="sidebar">
<div class="grp">Get started</div>
<div class="item active">Quickstart</div>
<div class="item">Editing pages</div>
<div class="grp">API reference</div>
<div class="item">Introduction</div>
<div class="item">Authentication</div>
<div class="item">Endpoints</div>
</div>
<div class="prose">
<h2>Live reload, everywhere</h2>
<p>Every push rebuilds your docs in seconds, with previews for every branch and a searchable index out of the box.</p>
<div class="code"><span class="c3t"># install the CLI</span><br>npm i -g mintlify<br><span class="c1t">mintlify dev</span> <span class="c2t">--port 3333</span></div>
</div>
<div class="toc">
<div class="t">On this page</div>
<div class="item active">Live reload</div>
<div class="item">Previews</div>
<div class="item">Search index</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfbfe; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfbfe; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #515151; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #003a70; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fcfbfe; color: #003a70;
border: 1px solid #003a70; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfbfe; color: #212121;
border: 1px solid #c5c4c7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #515151; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffba00; color: #212121;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fcfbfe; color:#212121; font-family:'Open Sans',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#fff;border-bottom:1px solid #cfc8d8;}
.logo{font-family:Montserrat,Arial,sans-serif;font-size:21px;font-weight:600;letter-spacing:-.4px;color:#003a70;}
.navlinks{display:flex;gap:24px;font-family:Montserrat,Arial,sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#212121;}
.search{width:180px;height:36px;border-radius:9999px;background:#e9e6ed;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#7a7a86;}
.hero{height:280px;display:flex;align-items:center;padding:0 44px;background:linear-gradient(120deg,#e9e6ed 0%,#fcfbfe 65%);}
.herotext{width:440px;}
.hkicker{font-family:Montserrat,Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#293c5b;margin-bottom:12px;}
.herotext h1{font-family:Montserrat,Arial,sans-serif;font-size:34px;font-weight:600;letter-spacing:-.5px;color:#003a70;margin:0 0 14px;line-height:1.15;}
.herotext p{font-size:15px;line-height:1.6;color:#4a4a52;margin:0 0 22px;max-width:360px;}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 26px;background:#003a70;color:#fff;border-radius:8px;font-family:Montserrat,Arial,sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;width:fit-content;}
.ukebox{position:absolute;right:80px;width:220px;height:220px;}
.ukebody{position:absolute;right:0;top:20px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d8a35c,#8a5a2b 75%);box-shadow:0 12px 30px rgba(0,58,112,.18);}
.ukehole{position:absolute;right:55px;top:75px;width:40px;height:40px;border-radius:50%;background:#2c1a0e;}
.ukeneck{position:absolute;right:110px;top:-10px;width:26px;height:120px;border-radius:6px;background:linear-gradient(180deg,#4a2f18,#2c1a0e);}
.sec{padding:24px 44px 0;position:relative;}
.sectitle{font-family:Montserrat,Arial,sans-serif;font-size:17px;font-weight:600;margin-bottom:16px;color:#003a70;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#fff;border-radius:12px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#ffba00;color:#212121;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:3px 8px;border-radius:9999px;z-index:2;}
.thumb{height:104px;border-radius:12px;background:#f0eef4;}
.pname{font-family:Montserrat,Arial,sans-serif;font-size:13px;font-weight:600;color:#212121;margin-top:8px;}
.pprice{font-size:13px;color:#003a70;font-weight:700;margin-top:3px;}
</style>
<div class="nav">
<div class="logo">Lanikai</div>
<div class="navlinks"><span>Ukuleles</span><span>Strings</span><span>Cases</span><span>Learn</span></div>
<div class="search">Search instruments...</div>
</div>
<div class="hero">
<div class="herotext">
<div class="hkicker">Handcrafted Since Day One</div>
<h1>Warm resonance, made to be played</h1>
<p>Acoustic instruments built for the unhurried sound of wood and nylon.</p>
<div class="btn">Shop Ukuleles</div>
</div>
<div class="ukebox"><div class="ukeneck"></div><div class="ukebody"></div><div class="ukehole"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb"></div><div class="pname">Concert Mahogany Uke</div><div class="pprice">$189</div></div>
<div class="card"><div class="thumb" style="background:#e4dff0"></div><div class="pname">Tenor Solid Spruce</div><div class="pprice">$249</div></div>
<div class="card"><div class="thumb" style="background:#e9e6ed"></div><div class="pname">Fluorocarbon Strings</div><div class="pprice">$14</div></div>
<div class="card"><div class="thumb" style="background:#f0eef4"></div><div class="pname">Padded Gig Bag</div><div class="pprice">$42</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff595a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff595a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #10567b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff595a; color: #10567b;
border: 1px solid #10567b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff595a; color: #f5f5f5;
border: 1px solid #fd7273; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d9595f; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f8; color:#39393e; box-sizing:border-box;
font-family:"Helvetica Neue",Helvetica,Arial,"PingFang TC","Heiti TC",sans-serif; }
* { box-sizing:border-box; }
nav { height:54px; background:#ffffff; display:flex; align-items:center; gap:14px; padding:0 24px;
border-bottom:1px solid #e5e5e6; }
.brand { font-size:16px; font-weight:700; letter-spacing:-0.2px; flex-shrink:0; }
.searchbox { flex:1; height:34px; border:1px solid #d3d3d5; border-radius:4px 8px 8px 4px; display:flex;
align-items:center; padding:0 12px; color:#929295; font-size:13px; background:#ffffff; }
.cpills { display:flex; gap:6px; }
.cpill { font-size:12px; font-weight:500; border-radius:100px; padding:5px 12px; background:#eeeeef; color:#66666a; }
.cpill.active { background:#fff8f7; color:#10567b; }
.login { background:#10567b; color:#ffffff; border:1px solid #10567b; border-radius:4px; padding:8px 14px;
font-size:13px; font-weight:400; }
.catbar { height:32px; display:flex; align-items:center; gap:20px; padding:0 24px; background:#ffffff;
border-bottom:1px solid #e5e5e6; font-size:13px; }
.catitem { color:#66666a; }
.catitem.active { color:#2e90b7; font-weight:700; }
.featured { display:flex; gap:16px; padding:14px 24px; background:#ffffff; margin:0; }
.fthumb { width:150px; height:110px; border-radius:4px; background:linear-gradient(135deg,#10567b,#2e90b7); flex-shrink:0; }
.finfo { flex:1; display:flex; flex-direction:column; gap:4px; justify-content:center; }
.fdesigner { font-size:11px; color:#929295; }
.ftitle { font-size:16px; font-weight:700; margin:0; }
.fprice { font-size:19px; font-weight:700; }
.fbtns { display:flex; gap:8px; margin-top:4px; }
.btn-purchase { background:#f16c5d; color:#ffffff; border:1px solid #f16c5d; border-radius:4px;
padding:8px 16px; font-size:13px; font-weight:400; }
.btn-outline { background:#ffffff; color:#10567b; border:1px solid #10567b; border-radius:4px;
padding:8px 16px; font-size:13px; font-weight:400; }
.gridwrap { padding:12px 24px 20px; }
.gridlabel { font-size:14px; font-weight:700; margin:0 0 8px; color:#39393e; }
.grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.card { background:#ffffff; border-radius:4px; overflow:hidden; }
.thumb { height:78px; position:relative; }
.t1 { background:linear-gradient(135deg,#f7d6c9,#f16c5d); }
.t2 { background:linear-gradient(135deg,#cfe4ee,#2e90b7); }
.t3 { background:linear-gradient(135deg,#dcecd8,#2cac97); }
.t4 { background:linear-gradient(135deg,#e8e3f2,#a98fd1); }
.t5 { background:linear-gradient(135deg,#f9e2c4,#e0a95a); }
.t6 { background:linear-gradient(135deg,#f2d6de,#d888a0); }
.ribbon { position:absolute; top:0; left:0; background:#e63349; color:#fff; font-size:10px; font-weight:700;
border-radius:2px 0 2px 0; padding:2px 6px; box-shadow:1px 1px 2px 0 rgba(32,32,38,0.2); }
.cinfo { padding:6px 7px 8px; }
.ctitle { font-size:11px; color:#39393e; line-height:1.3; margin:0 0 3px; }
.cprice { font-size:12px; font-weight:700; }
</style></head>
<body>
<nav>
<span class="brand">Pinkoi</span>
<div class="searchbox">Search independent design goods…</div>
<div class="cpills"><span class="cpill active">TW</span><span class="cpill">JP</span><span class="cpill">HK</span></div>
<button class="login">Sign In</button>
</nav>
<div class="catbar">
<span class="catitem active">Home Decor</span>
<span class="catitem">Stationery</span>
<span class="catitem">Jewelry</span>
<span class="catitem">Bags</span>
<span class="catitem">Ceramics</span>
</div>
<div class="featured">
<div class="fthumb"></div>
<div class="finfo">
<span class="fdesigner">by Studio Mori · Kyoto</span>
<p class="ftitle">Hand-thrown stoneware mug, sand glaze</p>
<span class="fprice">NT$980</span>
<div class="fbtns">
<button class="btn-purchase">Add to Cart</button>
<button class="btn-outline">Message Seller</button>
</div>
</div>
</div>
<div class="gridwrap">
<p class="gridlabel">More from independent designers</p>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="ribbon">20%</span></div><div class="cinfo"><p class="ctitle">Woven cotton coaster set</p><span class="cprice">NT$420</span></div></div>
<div class="card"><div class="thumb t2"></div><div class="cinfo"><p class="ctitle">Brass desk clip, set of 3</p><span class="cprice">NT$650</span></div></div>
<div class="card"><div class="thumb t3"><span class="ribbon">15%</span></div><div class="cinfo"><p class="ctitle">Linen zip pouch, sage</p><span class="cprice">NT$390</span></div></div>
<div class="card"><div class="thumb t4"></div><div class="cinfo"><p class="ctitle">Enamel pin, quiet moon</p><span class="cprice">NT$280</span></div></div>
<div class="card"><div class="thumb t5"><span class="ribbon">10%</span></div><div class="cinfo"><p class="ctitle">Ceramic incense holder</p><span class="cprice">NT$540</span></div></div>
<div class="card"><div class="thumb t6"></div><div class="cinfo"><p class="ctitle">Hand-bound notebook A6</p><span class="cprice">NT$310</span></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00a19b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00a19b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007a7a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a19b; color: #000000;
border: 1px solid #007a7a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00a19b; color: #f5f5f5;
border: 1px solid #27aea9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #009b96; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c1c1c; box-sizing:border-box;
font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-weight:700; font-size:18px; color:#00a19b; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#7c7c7c; }
.navlinks span.on { color:#00a19b; font-weight:500; }
.cta { background:#00a19b; color:#fff; border:1px solid #00a19b; border-radius:4px; padding:10px; font-size:14px;
height:40px; display:flex; align-items:center; padding:0 16px; }
.hero { background:linear-gradient(135deg,#00a19b,#007a7a); padding:26px 40px; color:#fff; }
.hero h1 { font-size:26px; font-weight:700; margin:0 0 12px; max-width:600px; line-height:1.4; }
.services { display:flex; gap:12px; }
.service { border:1px solid #fff; border-radius:4px; padding:10px 16px; font-size:13px; background:transparent; color:#fff; }
.exch { margin:20px 40px; background:#fff; border-radius:4px; padding:16px; box-shadow:rgb(208,230,230) 0px 0px 12px 0px; }
.exch h2 { font-size:20px; font-weight:500; color:#00a19b; margin:0 0 10px; }
.row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #d9d9d9; font-size:14px; }
.row .cur { font-weight:500; }
.row .rate { color:#1c1c1c; }
.digital { padding:20px 40px 24px; }
.digital h2 { font-size:22px; font-weight:500; color:#00a19b; margin:0 0 14px; }
.cards { display:flex; gap:14px; }
.card { flex:1; background:#f4f8fa; border-radius:8px; padding:16px; box-shadow:rgb(208,230,230) 0px 0px 12px 0px; }
.card h4 { font-size:15px; margin:0 0 6px; }
.card p { font-size:12px; color:#7c7c7c; margin:0; }
</style></head>
<body>
<nav>
<span class="brand">E.SUN Bank</span>
<div class="navlinks"><span class="on">Personal Banking</span><span>Business</span><span>Private Banking</span><span>ESG & Sustainability</span></div>
<div class="cta">Open an Account</div>
</nav>
<section class="hero">
<h1>A strong ESG strategy<br>is a strong growth strategy</h1>
<div class="services">
<div class="service">Credit Cards</div><div class="service">Digital Accounts</div><div class="service">E.Sun Wallet</div>
</div>
</section>
<section class="exch">
<h2>Foreign Exchange Rates</h2>
<div class="row"><span class="cur">USD</span><span class="rate">32.15 / 32.45</span></div>
<div class="row"><span class="cur">JPY</span><span class="rate">0.208 / 0.212</span></div>
<div class="row"><span class="cur">EUR</span><span class="rate">34.80 / 35.20</span></div>
</section>
<section class="digital">
<h2>Explore Digital Services</h2>
<div class="cards">
<div class="card"><h4>Easy payments with E.Sun Wallet</h4><p>Scan to pay, transfer in one tap.</p></div>
<div class="card"><h4>Digital credit card services</h4><p>Apply online, get approved instantly.</p></div>
<div class="card"><h4>ESG sustainable investing</h4><p>Choose finance that's better for the planet.</p></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f8; color: #272d45;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f8; color: #272d45;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #272d45; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9a9db1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #676986; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f7f7f8; color: #272d45;
border: 1px solid #676986; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f7f7f8; color: #272d45;
border: 1px solid #c3c4cb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9db1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #0e7a82; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f7f8; color:#2c3e50; font-family:'Expressa',futura-pt,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e5e5eb;background:#fff;}
.logo{font-size:19px;font-weight:700;color:#272d45;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:#9a9db1;}
.navlinks .active{color:#676986;}
.hero{background:#f4f4f6;padding:26px 32px;display:flex;align-items:center;gap:24px;}
.herotext h1{font-size:32px;font-weight:600;color:#272d45;margin:0 0 10px;letter-spacing:-.4px;}
.cta{display:inline-block;background:#676986;color:#fff;font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:14px 30px;border-radius:9999px;}
.heroimg{margin-left:auto;width:170px;height:170px;border-radius:20px;background:radial-gradient(circle at 35% 35%,#0e7a82,#fd6210 90%);}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:200px;background:#fff;border-radius:20px;overflow:hidden;position:relative;}
.thumb{height:130px;border-radius:20px 20px 0 0;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;border-radius:9999px;color:#fff;}
.pbody{padding:12px 14px 14px;}
.ptitle{font-size:15px;font-weight:500;color:#272d45;margin:0 0 4px;}
.pprice{font-size:15px;color:#2c3e50;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#f4f4f6;color:#9a9db1;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Summer Fridays</div>
<div class="navlinks"><span class="active">Skincare</span><span>Best Sellers</span><span>Sets</span><span>Journal</span></div>
</div>
<div class="hero">
<div class="herotext"><h1>A cool, calm exhale for your skin.</h1><div class="cta">Shop Best Sellers</div></div>
<div class="heroimg"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#0e7a82,#dbdde4)"></div><span class="badge" style="background:#0e7a82">Best Seller</span><div class="pbody"><div class="ptitle">Jet Lag Mask</div><div class="pprice">$48.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#fd6210,#dbdde4)"></div><span class="badge" style="background:#fd6210">Sale</span><div class="pbody"><div class="ptitle">CC Lip Butter Balm</div><div class="pprice">$24.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#ffcf2a,#dbdde4)"></div><span class="badge" style="background:#ffcf2a;color:#272d45">New</span><div class="pbody"><div class="ptitle">Soft Focus Serum</div><div class="pprice">$36.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#676986,#dbdde4)"></div><div class="pbody"><div class="ptitle">R+R Body Wash</div><div class="pprice">$28.00</div></div></div>
</div>
<div class="footer"><span>© Summer Fridays</span><span>Ingredients Rewards Journal</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff3464; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff3464; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #14233c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff3464; color: #14233c;
border: 1px solid #14233c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff3464; color: #f5f5f5;
border: 1px solid #fd537b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d9315e; color: #14233c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F6F7F9; color:#14233C; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.phone { width:960px; height:640px; display:flex; }
.col { flex:1.35; padding:20px 22px; display:flex; flex-direction:column; gap:16px; overflow:hidden; }
.hi { font-size:14px; color:#5C6B82; font-weight:500; }
.card { height:150px; border-radius:18px; background:linear-gradient(135deg,#FF3464,#FF5A7F 55%,#E02855); position:relative; box-shadow:0 14px 30px -14px rgba(255,52,100,0.4); padding:18px 20px; color:#fff; }
.card .word { position:absolute; top:16px; right:20px; font-size:11px; font-weight:700; letter-spacing:1px; opacity:0.9; }
.card .avail { font-size:12px; font-weight:500; opacity:0.85; margin-top:6px; }
.card .bal { font-size:32px; font-weight:800; letter-spacing:-0.6px; margin-top:2px; }
.card .num { position:absolute; bottom:16px; left:20px; font-size:13px; font-weight:600; letter-spacing:2px; opacity:0.9; }
.potslabel { font-size:13px; font-weight:600; color:#5C6B82; }
.pots { display:flex; gap:12px; }
.pot { width:92px; height:92px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:28px; box-shadow:0 8px 16px -8px rgba(0,0,0,0.2); flex-shrink:0; position:relative; }
.pot .cap { position:absolute; bottom:-22px; left:0; width:92px; text-align:center; font-size:11px; font-weight:600; color:#14233C; }
.p1 { background:linear-gradient(135deg,#2FB59A,#5CE0C4); }
.p2 { background:linear-gradient(135deg,#3E7FC4,#5AA9F0); }
.p3 { background:linear-gradient(135deg,#E0A23A,#FFC75F); }
.pnew { background:#fff; border:1.5px dashed #C6CCD6; color:#94A1B5; font-size:20px; }
.potswrap { margin-bottom:14px; }
.feedlabel { font-size:13px; font-weight:700; color:#5C6B82; margin-top:8px; }
.txn { height:58px; display:flex; align-items:center; gap:14px; border-bottom:1px solid #E4E7EB; }
.txn .micon { width:42px; height:42px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; }
.txn .info { flex:1; overflow:hidden; }
.txn .merch { font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.txn .meta { font-size:13px; color:#5C6B82; margin-top:2px; }
.txn .amt { font-size:15px; font-weight:700; }
.amt.in { color:#1FA971; }
/* 우측: 거래 상세 */
.detail { flex:1; background:#14233C; color:#fff; padding:24px 26px; display:flex; flex-direction:column; align-items:center; }
.detail .micon2 { width:64px; height:64px; border-radius:50%; background:#3E7FC4; margin-top:20px; display:flex; align-items:center; justify-content:center; font-size:28px; }
.detail .mname { font-size:22px; font-weight:700; margin-top:14px; }
.detail .amt2 { font-size:30px; font-weight:800; margin-top:6px; }
.map { width:100%; height:110px; border-radius:16px; margin-top:22px; background:linear-gradient(135deg,#1B2F4D,#243A57); }
.drow { width:100%; display:flex; justify-content:space-between; padding:14px 4px; border-bottom:1px solid #243A57; font-size:14px; }
.drow span:first-child { color:#9FB0C6; }
.cta { margin-top:22px; width:100%; height:50px; border-radius:14px; background:#FF3464; color:#fff; font-size:16px; font-weight:700; display:flex; align-items:center; justify-content:center; }
</style></head>
<body>
<div class="phone">
<div class="col">
<div class="hi">Available to spend</div>
<div class="card">
<span class="word">Monzo (iOS)</span>
<div class="bal">£2,418.60</div>
<div class="avail">You've spent £24.10 today</div>
<div class="num">•••• •••• •••• 9042</div>
</div>
<div class="potswrap">
<div class="potslabel">Pots</div>
<div class="pots" style="margin-top:10px">
<div class="pot p1">🏖️<span class="cap">Holiday</span></div>
<div class="pot p2">🏠<span class="cap">Rent</span></div>
<div class="pot p3">🎁<span class="cap">Treats</span></div>
<div class="pot pnew">+<span class="cap">New pot</span></div>
</div>
</div>
<div class="feedlabel">TODAY</div>
<div class="txn"><div class="micon" style="background:#FFE3EA">☕️</div><div class="info"><div class="merch">Blue Bottle Coffee</div><div class="meta">Eating out · 9:12</div></div><div class="amt">-£4.80</div></div>
<div class="txn"><div class="micon" style="background:#E7F4EF">💰</div><div class="info"><div class="merch">Salary — Acme Co</div><div class="meta">Income · 08:01</div></div><div class="amt in">+£3,200.00</div></div>
<div class="txn"><div class="micon" style="background:#EAF1FB">🚕</div><div class="info"><div class="merch">Uber</div><div class="meta">Transport · 22:47</div></div><div class="amt">-£11.40</div></div>
</div>
<div class="detail">
<div class="micon2">☕️</div>
<div class="mname">Blue Bottle Coffee</div>
<div class="amt2">£4.80</div>
<div class="map"></div>
<div class="drow"><span>Category</span><span>Eating out</span></div>
<div class="drow"><span>Date</span><span>Today, 9:12 AM</span></div>
<div class="drow"><span>Notes</span><span>—</span></div>
<div class="cta">Split bill</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb0b22; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb0b22; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb0b22; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb0b22; color: #f5f5f5;
border: 1px solid #ed3044; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ee3245; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
header { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #ececec; }
.brand { font-size:19px; font-weight:800; letter-spacing:-0.4px; }
.brand b { color:#EB0B22; }
.actions { display:flex; gap:10px; align-items:center; }
.btn-out { border:1px solid #cfcfcf; border-radius:8px; padding:7px 16px; font-size:13px; font-weight:600; }
.btn-solid { background:#EB0B22; color:#fff; border-radius:8px; padding:7px 16px; font-size:13px; font-weight:700; }
.channels { display:flex; gap:26px; padding:0 28px; height:44px; align-items:center; border-bottom:1px solid #f0f0f0; }
.ch { font-size:14px; color:#666666; padding-bottom:12px; position:relative; }
.ch.active { color:#000000; font-weight:700; }
.ch.active::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:#EB0B22; border-radius:2px; }
main { display:grid; grid-template-columns:1.3fr 1fr; gap:0; height:496px; }
.feed { padding:18px 24px; border-right:1px solid #f0f0f0; overflow:hidden; }
.lead { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid #f2f2f2; }
.lead .thumb { width:104px; height:78px; border-radius:8px; flex:0 0 auto;
background:linear-gradient(135deg,#dedede,#c9c9c9); }
.lead .meta { display:flex; gap:8px; align-items:center; font-size:11px; color:#8a8a8a; margin-bottom:6px; }
.badge-break { background:#EB0B22; color:#fff; font-weight:700; font-size:10px; letter-spacing:0.05em;
text-transform:uppercase; border-radius:4px; padding:2px 6px; }
.lead h3 { font-size:16px; font-weight:700; margin:0 0 4px; line-height:1.3; }
.lead p { font-size:12px; color:#3a3a3a; margin:0; line-height:1.4; }
.feature { position:relative; height:150px; border-radius:8px; overflow:hidden; margin-bottom:16px;
background:linear-gradient(145deg,#3a3a3a,#111); display:flex; align-items:flex-end; padding:16px; }
.feature::before { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0)); }
.feature h2 { position:relative; color:#fff; font-size:19px; font-weight:700; margin:0; max-width:70%; line-height:1.25; }
.side { padding:18px 22px; }
.side h4 { font-size:12px; font-weight:700; color:#8a8a8a; text-transform:uppercase; letter-spacing:0.06em; margin:0 0 10px; }
.srow { display:flex; justify-content:space-between; align-items:flex-start; padding:10px 0; border-bottom:1px solid #f2f2f2; gap:10px; }
.srow .n { font-size:20px; font-weight:800; color:#d8d8d8; width:22px; }
.srow h5 { font-size:13px; font-weight:600; margin:0; line-height:1.35; }
.srow span { font-size:10.5px; color:#999; }
footer { height:44px; border-top:1px solid #eee; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; font-size:11px; color:#8a8a8a; }
</style></head>
<body>
<header>
<p class="brand"><b>SmartNews</b></p>
<div class="actions">
<span class="btn-out">Sign in</span>
<span class="btn-solid">Get the app</span>
</div>
</header>
<div class="channels">
<span class="ch active">Top</span>
<span class="ch">World</span>
<span class="ch">Politics</span>
<span class="ch">Tech</span>
<span class="ch">Sports</span>
<span class="ch">Business</span>
</div>
<main>
<div class="feed">
<div class="feature">
<h2>Global chip shortage eases as new fabs come online</h2>
</div>
<div class="lead">
<div class="thumb"></div>
<div>
<div class="meta"><span class="badge-break">Breaking</span><span>Metro Wire · 2m ago</span></div>
<h3>City council approves new transit funding package</h3>
<p>Officials say the plan will expand coverage across three districts by next spring.</p>
</div>
</div>
<div class="lead">
<div class="thumb"></div>
<div>
<div class="meta"><span>Daily Ledger · 41m ago</span></div>
<h3>Regional exporters report steady quarterly growth</h3>
<p>Analysts point to stabilizing shipping costs as the main driver.</p>
</div>
</div>
<div class="lead">
<div class="thumb"></div>
<div>
<div class="meta"><span>Harbor Times · 1h ago</span></div>
<h3>New coastal park opens after two-year renovation</h3>
<p>The site adds walking trails and a restored wetland area.</p>
</div>
</div>
</div>
<div class="side">
<h4>Trending Now</h4>
<div class="srow"><span class="n">01</span><div><h5>Central bank holds rates steady for third straight month</h5><span>Finance Daily</span></div></div>
<div class="srow"><span class="n">02</span><div><h5>Startup unveils battery with twice the charge cycles</h5><span>Tech Wire</span></div></div>
<div class="srow"><span class="n">03</span><div><h5>League announces expanded playoff format for next season</h5><span>Sports Ledger</span></div></div>
<div class="srow"><span class="n">04</span><div><h5>Researchers map coral recovery across the reef system</h5><span>Science Now</span></div></div>
</div>
</main>
<footer>
<span>Delivering quality information, fast.</span>
<span>Top · World · Politics · Tech · Sports · Business</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0e2a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0e2a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8d9a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #12152e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0e2a; color: #ffffff;
border: 1px solid #12152e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0e2a; color: #f5f5f5;
border: 1px solid #30334a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8d9a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0b0f2b; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#0A0E2A; color:#FFFFFF; box-sizing:border-box; font-family:'Avenir Next',-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; position:relative; }
.stars { position:absolute; inset:0; background-image:
radial-gradient(1px 1px at 40px 60px, rgba(255,255,255,0.4), transparent),
radial-gradient(1px 1px at 120px 20px, rgba(255,255,255,0.3), transparent),
radial-gradient(1px 1px at 220px 90px, rgba(255,255,255,0.5), transparent),
radial-gradient(1px 1px at 340px 40px, rgba(255,255,255,0.3), transparent),
radial-gradient(1px 1px at 500px 70px, rgba(255,255,255,0.4), transparent),
radial-gradient(1px 1px at 650px 30px, rgba(255,255,255,0.3), transparent),
radial-gradient(1px 1px at 780px 80px, rgba(255,255,255,0.4), transparent),
radial-gradient(1px 1px at 880px 20px, rgba(255,255,255,0.3), transparent);
}
.billboard { height:340px; position:relative; background:linear-gradient(160deg,#1a2450,#3a2a55 60%,#0A0E2A); }
.scrim { position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,#0A0E2A 100%); }
.logoart { position:absolute; bottom:80px; left:40px; font-size:44px; font-weight:900; letter-spacing:-1pt; text-shadow:0 4px 24px rgba(0,0,0,0.6); }
.metastrip { position:absolute; bottom:56px; left:42px; font-size:13px; font-weight:600; letter-spacing:0.3pt; color:#A0A6C0; }
.ctarow { position:absolute; bottom:16px; left:40px; display:flex; gap:12px; }
.playbtn { background:#fff; color:#0A0E2A; font-weight:700; font-size:15px; padding:11px 26px; border-radius:8px; display:flex; align-items:center; gap:8px; box-shadow:0 6px 22px rgba(26,117,255,0.30); }
.secbtn { background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.24); color:#fff; font-weight:600; font-size:13px; padding:11px 22px; border-radius:8px; }
.portals { display:flex; gap:14px; padding:20px 40px; }
.portal { width:160px; height:96px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; border:1px solid #2A3050; flex-shrink:0; }
.portal.sel { border:2px solid #1A75FF; box-shadow:0 0 24px rgba(26,117,255,0.30); }
.shelf { padding:0 40px; }
.shelf h4 { font-size:18px; font-weight:700; margin:0 0 12px; }
.cardrow { display:flex; gap:12px; }
.card169 { width:180px; height:101px; border-radius:6px; position:relative; flex-shrink:0; }
.card169 .prog { position:absolute; bottom:0; left:0; right:0; height:3px; background:#0063E5; }
.card169 .bar60 { width:60%; height:100%; background:#0063E5; }
</style>
</head>
<body>
<div class="stage">
<div class="billboard">
<div class="stars"></div>
<div class="scrim"></div>
<div style="position:absolute; top:20px; left:40px; font-size:16px; font-weight:800; letter-spacing:0.5pt; z-index:2;">Disney+ (iOS)</div>
<div class="logoart">EMBER TRAIL</div>
<div class="metastrip">Action · PG-13 · 2024 · 2h 11m</div>
<div class="ctarow">
<div class="playbtn">▶ Play</div>
<div class="secbtn">+ Watchlist</div>
</div>
</div>
<div class="portals">
<div class="portal sel" style="background:linear-gradient(135deg,#0a2e6e,#0063E5)">DISNEY</div>
<div class="portal" style="background:linear-gradient(135deg,#0a3a6e,#1478c9)">PIXAR</div>
<div class="portal" style="background:linear-gradient(135deg,#5c0a0a,#a51616)">MARVEL</div>
<div class="portal" style="background:linear-gradient(135deg,#1a1a1a,#3a3a3a);color:#F2C200">STAR WARS</div>
<div class="portal" style="background:linear-gradient(135deg,#7a5a00,#c99700)">NAT GEO</div>
</div>
<div class="shelf">
<h4>Continue Watching</h4>
<div class="cardrow">
<div class="card169" style="background:linear-gradient(135deg,#3a2050,#1a3a5a)"><div class="prog"><div class="bar60"></div></div></div>
<div class="card169" style="background:linear-gradient(135deg,#5a1a1a,#2a1010)"><div class="prog"><div class="bar60" style="width:30%"></div></div></div>
<div class="card169" style="background:linear-gradient(135deg,#1a2a1a,#0a1a2a)"><div class="prog"><div class="bar60" style="width:85%"></div></div></div>
<div class="card169" style="background:linear-gradient(135deg,#2a1a3a,#4a2a5a)"><div class="prog"><div class="bar60" style="width:10%"></div></div></div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c1e21;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c1e21;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #1c1e21; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #65676b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #0064e0; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #1c1e21;
border: 1px solid #0064e0; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #1c1e21;
border: 1px solid #c6c7c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #65676b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ff006a; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#1c2b33; font-family:'Montserrat',Arial,Helvetica,sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;background:#1c2b33;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#cfe0f5;}
.searchpill{width:150px;height:34px;border-radius:9999px;background:#2a3c46;display:flex;align-items:center;padding:0 16px;font-size:11px;color:#9fb3c0;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;background:#1c2b33;}
.htext{width:430px;}
.htext h1{font-size:30px;font-weight:700;color:#fff;line-height:1.25;margin:0 0 14px;}
.htext p{font-size:14px;color:#a9bcc9;margin:0 0 20px;max-width:370px;}
.btn{display:inline-block;background:#0064e0;color:#fff;font-size:14px;font-weight:700;padding:14px 28px;border-radius:8px;}
.headset{position:absolute;right:90px;top:64px;width:220px;height:120px;background:linear-gradient(135deg,#0064e0,#111a20);border-radius:40px;box-shadow:0 0 50px rgba(0,100,224,0.35);}
.headset:before{content:'';position:absolute;left:20px;top:34px;width:60px;height:52px;background:#111a20;border-radius:16px;}
.headset:after{content:'';position:absolute;right:20px;top:34px;width:60px;height:52px;background:#111a20;border-radius:16px;}
.pinkdot{position:absolute;right:60px;top:36px;width:14px;height:14px;border-radius:50%;background:#ff006a;}
.sec{padding:24px 40px 0;}
.sectitle{font-size:17px;font-weight:700;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:216px;background:#f0f2f5;border-radius:12px;padding:14px;position:relative;}
.badge{position:absolute;top:10px;left:10px;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 9px;border-radius:9999px;}
.b1{background:#ff006a;}
.b2{background:#ff7b00;}
.b3{background:#d100c3;}
.thumb{width:100%;height:88px;border-radius:8px;margin:16px 0 10px;}
.cardtitle{font-size:14px;font-weight:600;}
.cardprice{font-size:13px;color:#0064e0;margin-top:4px;font-weight:700;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#1c2b33;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#9fb3c0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Meta Quest</div>
<div class="navlinks"><span>Headsets</span><span>Games</span><span>Accessories</span></div>
<div class="searchpill">Search...</div>
</div>
<div class="hero">
<div class="htext">
<h1>Your portal into worlds that don't exist yet.</h1>
<p>Precision-built VR hardware — a control room for immersion, not a gadget shelf.</p>
<div class="btn">Shop Headsets</div>
</div>
<div class="headset"><div class="pinkdot"></div></div>
</div>
<div class="sec">
<div class="sectitle">Featured Hardware</div>
<div class="grid">
<div class="card"><span class="badge b1">New</span><div class="thumb" style="background:linear-gradient(135deg,#0064e0,#1c2b33);"></div><div class="cardtitle">Quest 4 Headset — 256GB</div><div class="cardprice">$499.99</div></div>
<div class="card"><span class="badge b2">Bundle</span><div class="thumb" style="background:linear-gradient(135deg,#ff7b00,#1c2b33);"></div><div class="cardtitle">Elite Strap with Battery</div><div class="cardprice">$129.99</div></div>
<div class="card"><span class="badge b3">Exclusive</span><div class="thumb" style="background:linear-gradient(135deg,#d100c3,#1c2b33);"></div><div class="cardtitle">Touch Plus Controllers</div><div class="cardprice">$99.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f0f2f5,#0064e0);"></div><div class="cardtitle">Carrying Case</div><div class="cardprice">$49.99</div></div>
</div>
</div>
<div class="footer"><span>© Precision Built for Immersion</span><span>Support · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e60012; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e60012; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #484848; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e60012; color: #ffffff;
border: 1px solid #484848; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e60012; color: #f5f5f5;
border: 1px solid #e82736; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ffffff; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cd0c1b; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#484848; box-sizing:border-box;
font-family:"Geologica", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
nav { flex:0 0 60px; height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #e0e0e0; background:#ffffff; }
.brand { display:flex; align-items:center; gap:8px; }
.brand .mark { width:22px; height:22px; border-radius:6px; background:#e60012; }
.brand .word { font-size:17px; font-weight:600; letter-spacing:-0.2px; color:#484848; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:600; color:#484848; }
.navlinks span.active { color:#e60012; }
.utils { display:flex; gap:8px; align-items:center; }
.pill { background:#f8f8f8; color:#484848; border-radius:20px; height:32px; padding:0 14px;
font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.pill .dot { width:6px; height:6px; border-radius:50%; background:#727272; }
.hero { flex:0 0 208px; position:relative; margin:20px 32px 0; border-radius:12px; overflow:hidden;
background:linear-gradient(120deg,#27455c 0%, #4b5cce 45%, #468254 100%); display:flex; align-items:center; }
.hero::after { content:''; position:absolute; inset:0;
background:radial-gradient(circle at 78% 30%, rgba(255,255,255,0.16), transparent 55%); }
.hero .content { position:relative; z-index:1; padding:0 40px; display:flex; flex-direction:column; gap:12px; max-width:520px; }
.badge { align-self:flex-start; background:#e60012; color:#ffffff; border-radius:999px; padding:4px 12px;
font-size:10px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; }
.hero h1 { margin:0; font-size:30px; font-weight:600; line-height:1.15; color:#ffffff; letter-spacing:-0.4px; }
.hero p { margin:0; font-size:13px; color:rgba(255,255,255,0.85); line-height:1.4; max-width:400px; }
.hero .row { display:flex; gap:10px; margin-top:4px; }
.btn-primary { background:#e60012; color:#ffffff; border:none; border-radius:8px; height:38px;
padding:0 20px; font-weight:600; font-size:14px; white-space:nowrap; font-family:inherit; }
.btn-ghost { background:rgba(255,255,255,0.12); color:#ffffff; border:1.5px solid rgba(255,255,255,0.7);
border-radius:8px; height:38px; padding:0 20px; font-weight:600; font-size:14px; white-space:nowrap; font-family:inherit; }
.section-label { flex:0 0 auto; margin:18px 32px 0; font-size:14px; font-weight:600; color:#484848; }
.cards { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:10px 32px 0; min-height:0; }
.card { position:relative; background:#ffffff; border:1px solid #e0e0e0; border-radius:12px; overflow:hidden;
display:flex; flex-direction:column; box-shadow:rgba(0,0,0,0.07) 0px 2px 8px 0px; }
.art { height:56%; position:relative; }
.art.a1 { background:linear-gradient(160deg,#dceeb1,#468254); }
.art.a2 { background:linear-gradient(160deg,#c5b0f4,#27455c); }
.art.a3 { background:linear-gradient(160deg,#efd4d4,#e60012); }
.art .ring { position:absolute; width:70px; height:70px; border-radius:50%; border:6px solid rgba(255,255,255,0.35); }
.art.a1 .ring { top:-16px; right:-16px; }
.art.a2 .ring { bottom:-20px; left:-14px; }
.art.a3 .ring { top:20px; left:60%; }
.card-body { flex:1; padding:12px 14px; display:flex; flex-direction:column; gap:6px; min-height:0; }
.card-body h3 { margin:0; font-size:15px; font-weight:600; color:#484848; }
.card-body p { margin:0; font-size:11.5px; color:#727272; line-height:1.35; }
.play { align-self:flex-start; margin-top:auto; background:#e60012; color:#ffffff; border-radius:999px;
height:26px; padding:0 14px; font-size:12px; font-weight:600; display:flex; align-items:center; gap:5px; }
footer { flex:0 0 46px; border-top:1px solid #e0e0e0; padding:0 32px; display:flex; justify-content:space-between;
align-items:center; font-size:11px; color:#727272; background:#ffffff; }
</style></head>
<body>
<div class="page">
<nav>
<div class="brand"><span class="mark"></span><span class="word">Nintendo</span></div>
<div class="navlinks"><span class="active">Explore</span><span>Shop</span><span>Support</span></div>
<div class="utils">
<span class="pill"><span class="dot"></span>Search</span>
<span class="pill">Wish List</span>
<span class="pill">Cart</span>
</div>
</nav>
<div class="hero">
<div class="content">
<span class="badge">New</span>
<h1>Adventure awaits on every screen</h1>
<p>Play at home or on the go. Discover the latest worlds built for the whole family.</p>
<div class="row">
<button class="btn-primary">Learn more</button>
<button class="btn-ghost">Start shopping</button>
</div>
</div>
</div>
<div class="section-label">Trending topics</div>
<div class="cards">
<div class="card">
<div class="art a1"><span class="ring"></span></div>
<div class="card-body">
<h3>Meadow Kingdom Quest</h3>
<p>An all-new co-op adventure across floating islands.</p>
<span class="play">▶ Play</span>
</div>
</div>
<div class="card">
<div class="art a2"><span class="ring"></span></div>
<div class="card-body">
<h3>Starlight Grand Prix</h3>
<p>Race with friends across twelve galaxies of tracks.</p>
<span class="play">▶ Play</span>
</div>
</div>
<div class="card">
<div class="art a3"><span class="ring"></span></div>
<div class="card-body">
<h3>Puzzle Garden Deluxe</h3>
<p>A cozy puzzler for players of every age.</p>
<span class="play">▶ Play</span>
</div>
</div>
</div>
<footer>
<span>© Nintendo</span>
<span>Nintendo · Games · Hardware · Support</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #f2f2f2;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #f2f2f2;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #f2f2f2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #b3b3b3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #fca000; color: #121212;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: transparent; color: #fca000;
border: 1px solid #fca000; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1a1a1a; color: #f2f2f2;
border: 1px solid #4a4a4a; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b3b3b3; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #008c62; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121212; font-family:'Assistant',Arial,sans-serif; color:#f2f2f2; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#1a1a1a;border-bottom:1px solid #292929;}
.logo{font-family:'Arial Narrow',Arial,sans-serif;font-size:20px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#fca000;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#e6e6e6;}
.cart{background:#fca000;color:#121212;font-size:12px;font-weight:700;padding:9px 18px;border-radius:4px;}
.hero{height:222px;display:flex;align-items:center;padding:0 40px;background:radial-gradient(circle at 78% 45%,rgba(252,160,0,0.18),#121212 65%);position:relative;overflow:hidden;}
.spot{position:absolute;right:100px;top:0;width:200px;height:200px;background:radial-gradient(circle,rgba(252,160,0,0.28),transparent 70%);}
.frame{position:absolute;right:90px;top:26px;width:150px;height:180px;border:3px solid #4d4d4d;background:#222222;}
.frame:before{content:'';position:absolute;left:20px;top:24px;right:20px;bottom:70px;background:linear-gradient(135deg,#405de6,#334fb4);}
.frame:after{content:'AUTHENTIC';position:absolute;left:20px;bottom:16px;font-size:9px;letter-spacing:1px;color:#008c62;font-weight:700;}
.herotext{position:relative;z-index:2;max-width:420px;}
.h1{font-family:'Arial Narrow',Arial,sans-serif;font-size:38px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;line-height:1.05;color:#fff;margin:0 0 10px;}
.sub{font-size:14px;color:#e6e6e6;line-height:1.5;margin:0 0 16px;max-width:320px;}
.btn{display:inline-block;background:#fca000;color:#121212;font-size:14px;font-weight:700;padding:12px 26px;border-radius:4px;}
.filters{display:flex;gap:8px;padding:14px 40px 0;}
.filter{background:#1a1a1a;color:#e6e6e6;font-size:12px;font-weight:600;padding:7px 16px;border-radius:9999px;border:1px solid #4d4d4d;}
.filter.active{background:#fca000;color:#121212;border-color:#fca000;}
.grid{display:flex;gap:14px;padding:14px 40px 0;}
.card{width:196px;background:#222222;border-radius:4px;overflow:hidden;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#008c62;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:4px 8px;border-radius:9999px;z-index:2;}
.thumb{height:90px;}
.cbody{padding:11px 13px;}
.ctitle{font-size:13px;font-weight:700;margin:0 0 4px;color:#f2f2f2;}
.cprice{font-size:15px;font-weight:700;color:#fca000;margin:0;}
.oldprice{font-size:11px;color:#d82727;text-decoration:line-through;margin-right:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#1a1a1a;border-top:1px solid #292929;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;color:#b3b3b3;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Palm Beach Autographs</div>
<div class="navlinks"><span>Jerseys</span><span>Photos</span><span>Cards</span></div>
<div class="cart">Cart (1)</div>
</div>
<div class="hero">
<div class="spot"></div>
<div class="frame"></div>
<div class="herotext">
<div class="h1">Signed. Sealed.<br>Authenticated.</div>
<div class="sub">Framed memorabilia and signed jerseys, verified and vaulted for the collector who settles for nothing less.</div>
<div class="btn">Shop Authenticated</div>
</div>
</div>
<div class="filters">
<div class="filter active">All</div>
<div class="filter">Jerseys</div>
<div class="filter">Photos</div>
<div class="filter">Balls</div>
</div>
<div class="grid">
<div class="card"><div class="badge">Certified</div><div class="thumb" style="background:linear-gradient(135deg,#fca000,#121212)"></div><div class="cbody"><div class="ctitle">Signed Rookie Jersey</div><div class="cprice">$1,299</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#405de6,#121212)"></div><div class="cbody"><div class="ctitle">Framed 16x20 Photo</div><div class="oldprice">$449</div><span class="cprice">$349</span></div></div>
<div class="card"><div class="badge">Certified</div><div class="thumb" style="background:linear-gradient(135deg,#d82727,#121212)"></div><div class="cbody"><div class="ctitle">Game-Used Baseball</div><div class="cprice">$899</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#334fb4,#121212)"></div><div class="cbody"><div class="ctitle">Signed Helmet, Full-Size</div><div class="cprice">$749</div></div></div>
</div>
<div class="footer"><span>Every Item COA Verified</span><span>Vault-Insured Shipping</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #07080a; color: #f4f4f6;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #07080a; color: #f4f4f6;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.15; margin: 0; color: #f4f4f6; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #9c9c9d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: 0.2px; background: #ffffff; color: #000000;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: 0.2px; background: transparent; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #101111; color: #ffffff;
border: 1px solid #424345; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9c9c9d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: 0.4px; background: #101111; color: rgba(255,255,255,0.72);
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#07080a; color:#f4f4f6; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
/* 마케팅 페이지가 곧 제품 화면 그 자체 — 순수 다크 캔버스에 헤어라인 보더,
커맨드 팔레트 스타일 카드. 채도는 확장 카테고리 4색으로만 제한. */
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #242728; }
.brand { font-size:15px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#9c9c9d; }
.btn { background:#ffffff; color:#18191a; border:none; border-radius:8px; padding:8px 18px; font-weight:500; font-size:13px; }
.wrap { padding:30px 40px 0; text-align:center; }
.wrap h1 { font-size:34px; font-weight:600; letter-spacing:0.1px; margin:0; }
.wrap p { font-size:13px; color:#cdcdcd; margin:8px 0 0; }
/* 커맨드 팔레트 목업 */
.palette { margin:22px auto 0; width:520px; background:#121212; border:1px solid #242728; border-radius:10px; overflow:hidden; }
.pinput { padding:12px 16px; border-bottom:1px solid #242728; font-size:13px; color:#6a6b6c; text-align:left; }
.pinput .cursor { color:#f4f4f6; }
.prow { display:flex; align-items:center; gap:10px; padding:9px 16px; font-size:12.5px; text-align:left; }
.prow.sel { background:#1a1b1c; }
.icon { width:20px; height:20px; border-radius:5px; flex-shrink:0; }
.ic-y { background:rgba(255,197,51,0.2); border:1px solid #ffc533; }
.ic-r { background:rgba(255,97,97,0.2); border:1px solid #ff6161; }
.ic-g { background:rgba(89,212,153,0.2); border:1px solid #59d499; }
.ic-b { background:rgba(87,193,255,0.2); border:1px solid #57c1ff; }
.prow .name { color:#f4f4f6; }
.prow .hint { margin-left:auto; color:#6a6b6c; font-size:11px; }
.cats { display:flex; gap:12px; padding:22px 40px 0; }
.cat { flex:1; border:1px solid #242728; border-radius:8px; padding:14px; }
.cat h5 { font-size:12.5px; font-weight:500; margin:0 0 4px; }
.cat p { font-size:11px; color:#9c9c9d; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">Raycast</p>
<div class="navlinks"><span>Store</span><span>Pro</span><span>API</span><span>Manual</span></div>
<button class="btn">Download</button>
</nav>
<div class="wrap">
<h1>Your shortcut to everything</h1>
<p>A collection of powerful productivity tools, all within an extendable launcher.</p>
<div class="palette">
<div class="pinput">Search for apps and commands<span class="cursor">|</span></div>
<div class="prow sel"><span class="icon ic-b"></span><span class="name">Clipboard History</span><span class="hint">↵</span></div>
<div class="prow"><span class="icon ic-y"></span><span class="name">Window Management</span><span class="hint">⌘K</span></div>
<div class="prow"><span class="icon ic-g"></span><span class="name">Cloudinary Sync</span><span class="hint">⌘K</span></div>
<div class="prow"><span class="icon ic-r"></span><span class="name">GitHub Pull Requests</span><span class="hint">⌘K</span></div>
</div>
</div>
<div class="cats">
<div class="cat"><h5>Developer</h5><p>Search repos, review PRs</p></div>
<div class="cat"><h5>Productivity</h5><p>Clipboard, snippets, notes</p></div>
<div class="cat"><h5>Design</h5><p>Colors, fonts, assets</p></div>
<div class="cat"><h5>AI</h5><p>Chat, translate, summarize</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #303030;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #303030;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 4rem; font-weight: 700; line-height: 100%; margin: 0; color: #303030; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 4rem; font-weight: 700; line-height: 100%; margin: 0; color: #838383; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #005261; color: #ffffff;
border: none; border-radius: 62.4375rem; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #FFFFFF; color: #005261;
border: 1px solid #005261; border-radius: 62.4375rem;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #FFFFFF; color: #303030;
border: 1px solid #cbcbcb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #838383; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dbe7e9; color: #005261;
border-radius: 62.4375rem; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: "RD Modern", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #FFFFFF; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
.wrap { width:960px; height:640px; display:flex; flex-direction:column; color:#303030; }
nav { flex:0 0 56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #E6E6E6; background:#FFFFFF; }
.logo { font-size:17px; font-weight:700; letter-spacing:-.2px; color:#303030; }
.logo em { font-style:normal; color:#006F83; }
.navlinks { display:flex; gap:26px; font-size:13px; color:#575757; font-weight:500; }
.navlinks span.on { color:#303030; font-weight:700; }
.navcta { display:flex; gap:10px; align-items:center; }
.chip-code { font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size:11px; background:#F2F2F2; color:#575757; padding:6px 12px; border-radius:.5rem; border:1px solid #E6E6E6; }
.btn { font-size:13px; font-weight:600; padding:9px 18px; border-radius:62.4375rem; border:none; cursor:default; white-space:nowrap; }
.btn-raia { background:#006F83; color:#fff; }
.btn-outline { background:#fff; color:#303030; border:1.5px solid #303030; }
main { flex:1 1 auto; display:flex; flex-direction:column; }
.hero { flex:0 0 176px; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:0 32px; }
.badge { align-self:flex-start; background:#E6F3FE; color:#183349; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:5px 12px; border-radius:.25rem; }
.hero h1 { font-size:32px; font-weight:600; line-height:1.16; margin:0; letter-spacing:-.4px; max-width:520px; }
.hero p { font-size:14px; color:#575757; line-height:1.45; margin:0; max-width:520px; }
.hero .row { display:flex; gap:10px; margin-top:6px; }
.theming { flex:0 0 190px; background:#F2F2F2; padding:22px 32px; display:flex; flex-direction:column; gap:14px; }
.theming-head { display:flex; align-items:baseline; justify-content:space-between; }
.theming-head h2 { font-size:15px; font-weight:700; margin:0; color:#303030; }
.theming-head span { font-size:12px; color:#575757; }
.theme-row { display:flex; gap:16px; flex:1 1 auto; }
.theme-card { flex:1 1 0; background:#FFFFFF; border-radius:1rem; padding:16px 18px; display:flex; flex-direction:column; gap:10px; border:1px solid #E6E6E6; }
.theme-card .themetag { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.theme-card.raia .themetag { color:#006F83; }
.theme-card.drogasil .themetag { color:#B6202F; }
.theme-mini-app { display:flex; align-items:center; justify-content:space-between; background:#F2F2F2; border-radius:.5rem; padding:8px 12px; }
.theme-mini-app .dot { width:16px; height:16px; border-radius:50%; }
.theme-card.raia .dot { background:#006F83; }
.theme-card.drogasil .dot { background:#B6202F; }
.theme-mini-app .brandtxt { font-size:12px; font-weight:700; }
.theme-mini-btn { align-self:flex-start; border:none; border-radius:62.4375rem; padding:8px 18px; font-size:12px; font-weight:600; color:#fff; }
.theme-card.raia .theme-mini-btn { background:#006F83; }
.theme-card.drogasil .theme-mini-btn { background:#B6202F; }
.theme-card .note { font-size:11.5px; color:#575757; line-height:1.4; margin:0; }
.cards { flex:0 0 184px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:22px 32px; }
.card { border:1px solid #E6E6E6; border-radius:1rem; padding:16px 18px; display:flex; flex-direction:column; gap:8px; background:#FFFFFF; }
.card .tag { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#575757; }
.card h3 { font-size:15px; font-weight:700; margin:0; color:#303030; }
.card p { font-size:12.5px; color:#575757; margin:0; line-height:1.4; }
.pulse-bars { display:flex; align-items:flex-end; gap:6px; height:34px; }
.pulse-bars .b { width:10px; background:#006F83; border-radius:2px; opacity:.85; }
.chiplist { display:flex; flex-wrap:wrap; gap:6px; }
.chiplist span { font-size:10.5px; background:#F2F2F2; color:#303030; padding:4px 9px; border-radius:.5rem; display:flex; align-items:center; gap:5px; }
.chiplist i { width:7px; height:7px; border-radius:50%; display:inline-block; }
footer { flex:0 0 34px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-top:1px solid #E6E6E6; font-size:11px; color:#575757; }
</style>
<div class="wrap">
<nav>
<div class="logo">Pulso (RD Station)</div>
<div class="navlinks"><span class="on">Overview</span><span>Components</span><span>Tokens</span><span>Theming</span></div>
<div class="navcta">
<span class="chip-code">npm i @rdsaude/pulso</span>
<button class="btn btn-outline">GitHub</button>
</div>
</nav>
<main>
<section class="hero">
<span class="badge">Open source design system</span>
<h1>One design system. Two pharmacy brands.</h1>
<p>Pulso (RD Station) powers RD Saude's digital experiences — the same Button, the same Modal, rendered in Raia teal or Drogasil red through a single ThemeProvider.</p>
<div class="row">
<button class="btn btn-raia">Explore components</button>
<button class="btn btn-outline">Read the tokens</button>
</div>
</section>
<section class="theming">
<div class="theming-head">
<h2>Theming · one Button, two brands</h2>
<span>ThemeProvider resolves colors at runtime</span>
</div>
<div class="theme-row">
<div class="theme-card raia">
<span class="themetag">Theme: raia</span>
<div class="theme-mini-app"><span class="dot"></span><span class="brandtxt">Raia</span></div>
<button class="theme-mini-btn">Comprar</button>
<p class="note">Primary #006F83 · hover #005261 · pressed #003842</p>
</div>
<div class="theme-card drogasil">
<span class="themetag">Theme: drogasil</span>
<div class="theme-mini-app"><span class="dot"></span><span class="brandtxt">Drogasil</span></div>
<button class="theme-mini-btn">Comprar</button>
<p class="note">Primary #B6202F · hover #941925 · pressed #6F151E</p>
</div>
</div>
</section>
<section class="cards">
<div class="card">
<span class="tag">Components</span>
<h3>50+ React components</h3>
<p>Built on Ark UI + Radix UI, from Button to BottomSheet, with tailwind-variants.</p>
</div>
<div class="card">
<span class="tag">Spacing</span>
<h3>1 pulse = 0.25rem</h3>
<div class="pulse-bars">
<div class="b" style="height:8px"></div>
<div class="b" style="height:14px"></div>
<div class="b" style="height:20px"></div>
<div class="b" style="height:28px"></div>
<div class="b" style="height:34px"></div>
</div>
<p>Stack, inline and padding-inset scales from 0.125rem to 8rem.</p>
</div>
<div class="card">
<span class="tag">Theming</span>
<h3>5 official themes</h3>
<div class="chiplist">
<span><i style="background:#006F83"></i>raia</span>
<span><i style="background:#B6202F"></i>drogasil</span>
<span><i style="background:#5F28BD"></i>prime</span>
<span><i style="background:#9E9E9E"></i>rdsaudesistemas</span>
<span><i style="background:#2A8352"></i>subscription</span>
</div>
</div>
</section>
</main>
<footer>
<span>© Pulso (RD Station) · RD Saude Design System</span>
<span>@rdsaude/pulso-design-tokens</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.17; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.38; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.7px; background: #024ad8; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.7px; background: #ffffff; color: #024ad8;
border: 1px solid #024ad8; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.38; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.38; background: #1a1a1a; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.utility { height:24px; background:#1a1a1a; color:#fff; font-size:10px; display:flex; align-items:center;
justify-content:flex-end; gap:16px; padding:0 30px; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e8e8e8; }
.brand { font-size:16px; font-weight:500; }
.navlinks { display:flex; gap:18px; font-size:12px; color:#1a1a1a; }
.btn-blue { background:#024ad8; color:#fff; border:none; border-radius:4px; padding:9px 18px; font-size:11px;
font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.heroband { position:relative; margin:16px 32px 0; background:#f7f7f7; border-radius:16px; padding:22px 28px;
display:flex; align-items:center; gap:20px; overflow:hidden; }
.chevron { position:absolute; top:0; bottom:0; width:34px; background:#024ad8; clip-path:polygon(40% 0,100% 0,60% 100%,0 100%); }
.chevron.left { left:-6px; } .chevron.right { right:-6px; }
.herocopy { flex:1; z-index:1; }
.herocopy .eyebrow { font-size:11px; font-weight:600; color:#024ad8; text-transform:uppercase; letter-spacing:0.5px; }
.herocopy h1 { font-size:30px; font-weight:500; line-height:1.05; margin:6px 0 8px; }
.herocopy p { font-size:12px; color:#3d3d3d; margin:0 0 10px; }
.heroimg { width:220px; height:120px; background:linear-gradient(140deg,#c9e0fc,#024ad8 120%); border-radius:12px;
flex:0 0 auto; z-index:1; }
.cats { display:flex; gap:14px; padding:16px 32px; }
.catcard { flex:1; background:#fff; border:1px solid #e8e8e8; border-radius:8px; padding:12px; text-align:center; }
.catcard .ic { width:34px; height:34px; background:#f7f7f7; border-radius:50%; margin:0 auto 8px; }
.catcard span { font-size:11px; font-weight:500; }
.prodgrid { display:flex; gap:14px; padding:0 32px 16px; }
.prod { flex:1; background:#fff; border:1px solid #e8e8e8; border-radius:16px; padding:16px; }
.prod .img { height:70px; background:#f7f7f7; border-radius:10px; margin-bottom:10px; }
.prod h4 { font-size:13px; font-weight:500; margin:0 0 4px; }
.prod .price { font-size:14px; font-weight:600; color:#024ad8; }
.darkband { background:#1a1a1a; color:#fff; padding:16px 32px; display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
.darkband p { font-size:13px; margin:0; }
.darkband .tabs { display:flex; gap:8px; }
.tab { border-radius:9999px; padding:5px 12px; font-size:10px; background:#292929; }
</style></head>
<body>
<div class="utility">For Business | For Home | Sign in | Cart</div>
<nav>
<span class="brand">HP</span>
<div class="navlinks"><span>Laptops</span><span>Desktops</span><span>Printers</span><span>Accessories</span><span>Solutions</span></div>
<button class="btn-blue">Shop now</button>
</nav>
<div class="heroband">
<div class="chevron left"></div>
<div class="herocopy">
<div class="eyebrow">Limited time</div>
<h1>Save $200 on select laptops</h1>
<p>Powerful performance for work, gaming, and everything between.</p>
<button class="btn-blue">Shop laptops</button>
</div>
<div class="heroimg"></div>
<div class="chevron right"></div>
</div>
<div class="cats">
<div class="catcard"><div class="ic"></div><span>Laptops</span></div>
<div class="catcard"><div class="ic"></div><span>Desktops</span></div>
<div class="catcard"><div class="ic"></div><span>Printers</span></div>
<div class="catcard"><div class="ic"></div><span>Enterprise</span></div>
</div>
<div class="prodgrid">
<div class="prod"><div class="img"></div><h4>Spectre x360</h4><span class="price">$1,299.99</span></div>
<div class="prod"><div class="img"></div><h4>OMEN 16</h4><span class="price">$1,599.99</span></div>
<div class="prod"><div class="img"></div><h4>OfficeJet Pro</h4><span class="price">$249.99</span></div>
</div>
<div class="darkband">
<p>When did work start getting in the way of work?</p>
<div class="tabs"><span class="tab">Browse Topics</span><span class="tab">Live Chat</span><span class="tab">Contact</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0d0d0d; color: #fafafa;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0d0d0d; color: #fafafa;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.18; margin: 0; color: #fafafa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #8a8a8a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.14; letter-spacing: 0.8px; background: #cc181e; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.14; letter-spacing: 0.8px; background: transparent; color: #fafafa;
border: 1px solid #cc181e; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #1a1a1a; color: #fafafa;
border: 1px solid #484848; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.27; letter-spacing: 1.2px; background: #cc181e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#0d0d0d; font-family:'Segoe UI',Arial,sans-serif; color:#fafafa; }
*{box-sizing:border-box;}
.nav{height:64px;border-bottom:1px solid #2a2a2a;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:18px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:500;letter-spacing:0.4px;text-transform:uppercase;color:#8a8a8a;}
.navlinks div:first-child{color:#fafafa;border-bottom:2px solid #cc181e;padding-bottom:22px;}
.hero{height:230px;background:radial-gradient(ellipse at 70% 40%,#1a1a1a 0%,#0d0d0d 70%);display:flex;align-items:center;padding:0 36px;position:relative;overflow:hidden;}
.herotext h1{font-size:38px;font-weight:700;text-transform:uppercase;letter-spacing:-0.3px;line-height:1.05;margin:0 0 12px;}
.herotext p{font-size:14px;color:#d4d4d4;margin:0 0 18px;max-width:400px;}
.cta{display:inline-block;background:#cc181e;color:#fff;font-size:13px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;padding:16px 32px;border-radius:4px;}
.tower{position:absolute;right:100px;top:30px;width:120px;height:170px;background:linear-gradient(180deg,#1a1a1a,#0d0d0d);border:1px solid #2a2a2a;border-radius:4px;}
.towerled{position:absolute;right:150px;top:120px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,#cc181e,#661012);box-shadow:0 0 20px rgba(204,24,30,0.6);}
.grid{display:flex;gap:14px;padding:20px 36px 0;}
.card{width:196px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:4px;padding:16px;}
.thumb{height:90px;border-radius:4px;margin-bottom:10px;}
.pname{font-size:15px;font-weight:600;}
.pspec{font-size:12px;color:#8a8a8a;margin-top:4px;}
.pprice{font-size:16px;font-weight:700;color:#cc181e;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#0d0d0d;border-top:1px solid #2a2a2a;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#8a8a8a;font-size:11px;}
.footer span{margin-left:16px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Origin PC</div>
<div class="navlinks"><div>Desktops</div><div>Laptops</div><div>Workstations</div><div>Configure</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Built to<br>Outperform</h1>
<p>Hand-built gaming PCs, benchmarked before they ever ship.</p>
<div class="cta">Configure Now</div>
</div>
<div class="tower"></div><div class="towerled"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#cc181e,#1a1a1a)"></div><div class="pname">Chronos</div><div class="pspec">RTX 4080 · 32GB RAM</div><div class="pprice">from $2,199</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#661012,#222222)"></div><div class="pname">Millennium</div><div class="pspec">RTX 4090 · 64GB RAM</div><div class="pprice">from $3,499</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#222222,#cc181e)"></div><div class="pname">EVO17-S Laptop</div><div class="pspec">RTX 4070 · 17" 240Hz</div><div class="pprice">from $2,499</div></div>
</div>
<div class="footer"><span>© Built by Hand</span><span>Support<span> Warranty<span> Track Order</span></span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; margin: 0; color: #1a1d1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fea609; color: #121212;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #000000;
border: 1px solid #fea609; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #1a1d1d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #fea609; color: #121212;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Inventables</title>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#121212;font-family:Arial,Helvetica,sans-serif;color:#eeeeee;}
*{box-sizing:border-box;}
.nav{position:absolute;top:0;left:0;width:960px;height:60px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{color:#fea609;font-weight:700;font-size:18px;letter-spacing:0.5px;text-transform:uppercase;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;color:#fff;}
.navicons{font-size:12px;color:#fff;}
.hero{position:absolute;top:60px;left:0;width:960px;height:290px;background:#121212;display:flex;align-items:center;padding:0 44px;}
.hero::after{content:'';position:absolute;right:0;top:0;width:340px;height:290px;background:radial-gradient(circle at 70% 50%,rgba(254,166,9,0.18),transparent 70%);}
.hero h1{font-weight:700;font-size:38px;letter-spacing:-0.5px;color:#fff;margin:0 0 14px 0;width:440px;line-height:1.15;text-transform:uppercase;}
.hero p{font-size:15px;color:#c9c9c9;width:400px;margin:0 0 20px 0;}
.btn-primary{background:#fea609;color:#121212;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;border-radius:4px;padding:12px 26px;display:inline-block;}
.cncgrid{position:absolute;right:60px;top:80px;width:220px;height:220px;background:#1a1d1d;border:1px solid #272929;}
.cncgrid .line{position:absolute;background:#272929;}
.cncgrid .v1{left:73px;top:0;width:1px;height:220px;}
.cncgrid .v2{left:146px;top:0;width:1px;height:220px;}
.cncgrid .h1{top:73px;left:0;height:1px;width:220px;}
.cncgrid .h2{top:146px;left:0;height:1px;width:220px;}
.cncgrid .dot{position:absolute;width:8px;height:8px;background:#fea609;border-radius:50%;top:100px;left:100px;}
.spectable{position:absolute;top:372px;left:36px;width:888px;height:54px;background:#272929;display:flex;align-items:center;padding:0 24px;gap:40px;}
.spec .label{font-size:10px;text-transform:uppercase;letter-spacing:0.5px;color:#8c8c8c;}
.spec .value{font-size:14px;color:#fff;}
.sectitle{position:absolute;top:448px;left:36px;font-size:20px;font-weight:600;color:#fff;}
.grid{position:absolute;top:490px;left:36px;width:888px;height:130px;display:flex;gap:16px;}
.card{width:207px;background:#fff;border-radius:4px;border:1px solid #dedede;padding:12px;}
.imgbox{width:183px;height:70px;margin-bottom:8px;}
.imgbox.a{background:linear-gradient(135deg,#fea609,#d48500);}
.imgbox.b{background:linear-gradient(135deg,#eeeeee,#c9c9c9);}
.imgbox.c{background:linear-gradient(135deg,#272929,#1a1d1d);}
.imgbox.d{background:linear-gradient(135deg,#ffb762,#fea245);}
.title{font-size:14px;font-weight:600;color:#121212;margin-bottom:4px;}
.price{font-size:16px;font-weight:700;color:#fea609;}
</style>
<div class="nav">
<div class="logo">Inventables</div>
<div class="navlinks"><span>Machines</span><span>Bits & Materials</span><span>Software</span><span>Projects</span></div>
<div class="navicons">Search · Cart</div>
</div>
<div class="hero">
<h1>Precision made accessible.</h1>
<p>Desktop CNC machines and cutting tools engineered for makers who think in thousandths of an inch.</p>
<div class="btn-primary">Shop Machines</div>
<div class="cncgrid">
<div class="line v1"></div><div class="line v2"></div>
<div class="line h1"></div><div class="line h2"></div>
<div class="dot"></div>
</div>
</div>
<div class="spectable">
<div class="spec"><div class="label">Work Area</div><div class="value">32" x 32"</div></div>
<div class="spec"><div class="label">Spindle</div><div class="value">65W Brushless</div></div>
<div class="spec"><div class="label">Max Feed Rate</div><div class="value">200 IPM</div></div>
<div class="spec"><div class="label">Repeatability</div><div class="value">±0.001"</div></div>
</div>
<div class="sectitle">Shop the Shop</div>
<div class="grid">
<div class="card"><div class="imgbox a"></div><div class="title">X-Carve Pro 4x4</div><div class="price">$4,999.00</div></div>
<div class="card"><div class="imgbox b"></div><div class="title">Hardwood Material Pack</div><div class="price">$89.00</div></div>
<div class="card"><div class="imgbox c"></div><div class="title">Carbide 3D Bit Set</div><div class="price">$129.00</div></div>
<div class="card"><div class="imgbox d"></div><div class="title">Easel Pro Subscription</div><div class="price">$19.99/mo</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #80c343; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #80c343; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #436128; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #40810c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #80c343; color: #000000;
border: 1px solid #40810c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #80c343; color: #111111;
border: 1px solid #6ea73b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #436128; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #76b83a; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
header { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #f8f8f8; }
.brand { font-size:20px; font-weight:600; color:#222222; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#474747; }
.locale { background:#474747; color:#f8f8f8; border-radius:24px; padding:8px 40px 8px 16px; font-size:13px; }
.hero { padding:36px 32px 24px; }
.hero h1 { font-size:42.7px; font-weight:600; margin:0 0 10px; max-width:600px; line-height:1.15; }
.hero p { font-size:16px; color:#474747; margin:0 0 18px; max-width:480px; }
.btnrow { display:flex; gap:16px; align-items:center; }
.primary { background:#80c343; color:#222222; border:none; border-radius:800px; padding:6px 24px; height:40px; font-size:18.9px; font-weight:600; }
.tertiary { background:transparent; color:#40810c; border:none; border-radius:800px; padding:6px 0; height:40px; font-size:18.9px; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:10px 32px 0; }
.fcard { border-top:4px solid #80c343; padding:16px 14px 0 0; height:200px; }
.fcard .thumb { height:100px; background:linear-gradient(135deg,#eef7e5,#d3ecc0); margin-bottom:10px; }
.fcard h4 { margin:0 0 4px; font-size:16px; font-weight:600; color:#222222; }
.fcard p { margin:0; font-size:14px; color:#474747; line-height:1.4; }
.fcard .specs { margin-top:8px; display:flex; gap:8px; font-size:11px; color:#40810c; }
footer { position:absolute; bottom:0; left:0; right:0; padding:14px 32px; border-top:1px solid #f8f8f8;
display:flex; justify-content:space-between; font-size:11px; color:#474747; }
</style></head>
<body>
<header>
<span class="brand">Acer</span>
<div class="navlinks"><span>Laptops</span><span>Displays</span><span>Gaming</span><span>Support</span></div>
<span class="locale">English (US)</span>
</header>
<div class="hero">
<h1>Technology that breaks barriers.</h1>
<p>Discover laptops, displays, and gaming gear built for how you work, create, and play.</p>
<div class="btnrow">
<button class="primary">Shop Laptops</button>
<button class="tertiary">Explore Sustainability</button>
</div>
</div>
<div class="grid">
<div class="fcard"><div class="thumb"></div><h4>Swift Series</h4><p>Ultra-thin, lightweight design for everyday productivity.</p><div class="specs"><span>14"</span><span>·</span><span>1.2kg</span></div></div>
<div class="fcard"><div class="thumb" style="background:linear-gradient(135deg,#e5f2ff,#c0e0f7);"></div><h4>Predator Line</h4><p>High-refresh gaming performance with advanced cooling.</p><div class="specs"><span>16"</span><span>·</span><span>240Hz</span></div></div>
<div class="fcard"><div class="thumb" style="background:linear-gradient(135deg,#f5f0e0,#e8ddb8);"></div><h4>Vero Collection</h4><p>Built with recycled materials, part of Conscious Technology.</p><div class="specs"><span>Eco</span><span>·</span><span>OFL</span></div></div>
</div>
<footer>
<span>© Acer</span>
<span>Breaking barriers between people and technology</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-size: 20px; font-weight:700; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-size: 12px; font-weight:400; line-height:1.4; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: linear-gradient(135deg, #FF7A00, #FF9B3D); color: #ffffff;
border: none; border-radius: 999; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #FFFFFF; color: linear-gradient(135deg, #FF7A00, #FF9B3D);
border: 1px solid linear-gradient(135deg, #FF7A00, #FF9B3D); border-radius: 999;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #FFFFFF; color: #111111;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #ededed; color: linear-gradient(135deg, #FF7A00, #FF9B3D);
border-radius: 999; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #FFFFFF; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
nav { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 36px; }
.brand { font-size: 21px; font-weight: 900; color: #FF7A00; margin: 0; letter-spacing: -0.5px; }
.navlinks { display: flex; gap: 26px; font-size: 13px; color: #1D1D1D; font-weight: 500; }
.cta { background: #FF7A00; color: #fff; border: none; border-radius: 999px; padding: 10px 20px; font-weight: 700; font-size: 13px; }
.main { display: flex; gap: 30px; padding: 14px 36px 0; }
.left { width: 300px; }
.balance { background: linear-gradient(135deg, #FF7A00, #FF9B3D); border-radius: 24px; padding: 22px; color: #fff; }
.balance .lbl { font-size: 11px; opacity: 0.9; }
.balance .amt { font-size: 30px; font-weight: 300; margin: 6px 0 4px; }
.balance .sub { font-size: 11px; opacity: 0.85; }
.quick { display: flex; justify-content: space-between; margin-top: 20px; }
.q { text-align: center; }
.q .ic { width: 44px; height: 44px; border-radius: 50%; background: #F5F5F7; margin: 0 auto 6px; }
.q span { font-size: 10px; font-weight: 700; color: #161616; }
.right { flex: 1; }
.right h2 { font-size: 16px; font-weight: 700; color: #161616; margin: 0 0 12px; }
.prods { display: flex; gap: 14px; margin-bottom: 20px; }
.prod { flex: 1; border-radius: 16px; padding: 16px; background: #F5F5F7; }
.prod h4 { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: #161616; }
.prod p { margin: 0; font-size: 11px; color: #6B6B6B; }
.prod .cb { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 800; color: #FF7A00; }
.tx-title { display: flex; justify-content: space-between; align-items: center; }
.tx-title span { font-size: 12px; color: #FF7A00; font-weight: 700; }
.tx { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #EBEBEB; }
.tx .li { display: flex; align-items: center; gap: 10px; }
.tx .ic { width: 30px; height: 30px; border-radius: 50%; }
.tx .name { font-size: 12px; font-weight: 700; color: #161616; }
.tx .date { font-size: 10px; color: #9E9E9E; }
.tx .amt { font-size: 12px; font-weight: 700; color: #161616; }
.tx .amt.in { color: #00A868; }
</style>
<nav>
<p class="brand">Inter</p>
<div class="navlinks"><span>Banking</span><span>Investments</span><span>Insurance</span><span>Shop</span></div>
<button class="cta">Open account</button>
</nav>
<div class="main">
<div class="left">
<div class="balance">
<div class="lbl">Available balance</div>
<div class="amt">$ 8,412.30</div>
<div class="sub">Account •••• 4821</div>
</div>
<div class="quick">
<div class="q"><div class="ic"></div><span>Pix</span></div>
<div class="q"><div class="ic"></div><span>Transfer</span></div>
<div class="q"><div class="ic"></div><span>Pay</span></div>
<div class="q"><div class="ic"></div><span>Deposit</span></div>
</div>
</div>
<div class="right">
<h2>Products for you</h2>
<div class="prods">
<div class="prod"><h4>Investments</h4><p>Grow your money with fixed income and funds.</p><span class="cb">Explore →</span></div>
<div class="prod"><h4>Insurance</h4><p>Protect what matters, from health to travel.</p><span class="cb">Explore →</span></div>
<div class="prod"><h4>Inter Shop</h4><p>Cashback on every purchase you make.</p><span class="cb">Explore →</span></div>
</div>
<div class="tx-title"><h2>Recent activity</h2><span>See all</span></div>
<div class="tx"><div class="li"><div class="ic" style="background:#FFD9B3"></div><div><div class="name">Grocery Market</div><div class="date">Today, 14:02</div></div></div><div class="amt">-$54.20</div></div>
<div class="tx"><div class="li"><div class="ic" style="background:#E6F9F0"></div><div><div class="name">Salary deposit</div><div class="date">Yesterday</div></div></div><div class="amt in">+$3,200.00</div></div>
<div class="tx"><div class="li"><div class="ic" style="background:#FFD9B3"></div><div><div class="name">Streaming subscription</div><div class="date">Sep 2</div></div></div><div class="amt">-$19.90</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff0038; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff0038; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff0038; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff0038; color: #f5f5f5;
border: 1px solid #fd2756; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff2958; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
header { height:64px; display:flex; align-items:center; gap:20px; padding:0 32px; border-bottom:1px solid #eeeeee; }
.brand { font-size:20px; font-weight:800; color:#ff0038; letter-spacing:-0.3px; }
.search { flex:1; height:44px; border:2px solid #111111; border-radius:0; display:flex; align-items:center;
padding:0 16px; color:#666666; font-size:18px; }
.search .icon { margin-left:auto; color:#111111; font-weight:700; }
.cart { font-size:13px; color:#666666; white-space:nowrap; }
.billboards { display:flex; gap:10px; padding:14px 32px 0; }
.bpill { border:1px solid #eeeeee; border-radius:50px; padding:0 16px; height:34px; display:flex;
align-items:center; font-size:13px; color:#999999; }
.promo { margin:14px 32px; height:120px; border-radius:4px; background:linear-gradient(120deg,#ff0038,#ff6a82);
display:flex; align-items:center; padding:0 28px; color:#ffffff; }
.promo h2 { margin:0; font-size:26px; font-weight:800; }
.promo p { margin:4px 0 0; font-size:13px; opacity:0.9; }
.sectitle { padding:16px 32px 8px; font-size:15px; font-weight:800; color:#111111; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; padding:0 32px; }
.card { background:#ffffff; border-radius:4px; box-shadow:rgba(0,0,0,0.06) 0px 2px 10px -2px, rgba(0,0,0,0.28) 0px 0px 1px;
padding:10px; display:flex; flex-direction:column; gap:6px; }
.thumb { height:78px; border-radius:4px; background:linear-gradient(135deg,#f4f4f4,#e6e6e6); }
.card .rate { color:#ff0038; font-size:13px; font-weight:700; }
.card .price { color:#111111; font-size:16px; font-weight:700; }
.card .struck { color:#a9a9a9; font-size:11px; text-decoration:line-through; }
.card .name { color:#666666; font-size:11px; line-height:1.3; height:28px; overflow:hidden; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #eeeeee; padding:12px 32px;
display:flex; justify-content:space-between; font-size:11px; color:#666666; background:#ffffff; }
</style></head>
<body>
<header>
<span class="brand">11st</span>
<div class="search"><span>Search products, brands, deals…</span><span class="icon">⌕</span></div>
<span class="cart">Cart (3)</span>
</header>
<div class="billboards">
<span class="bpill">Today's Deals</span>
<span class="bpill">Free Shipping</span>
<span class="bpill">New Arrivals</span>
<span class="bpill">Coupon Zone</span>
</div>
<div class="promo">
<div>
<h2>11.11 Mega Sale — up to 80% off</h2>
<p>Open-market deals from thousands of verified sellers</p>
</div>
</div>
<div class="sectitle">Hourly Best — Popularity Ranking</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="name">Wireless earbuds, noise cancelling</div><span class="rate">38%</span><span class="price">₩29,900</span><span class="struck">₩48,000</span></div>
<div class="card"><div class="thumb"></div><div class="name">Cotton basic tee, 3 colors</div><span class="rate">52%</span><span class="price">₩8,900</span><span class="struck">₩18,500</span></div>
<div class="card"><div class="thumb"></div><div class="name">Stainless tumbler 500ml</div><span class="rate">21%</span><span class="price">₩12,300</span><span class="struck">₩15,600</span></div>
<div class="card"><div class="thumb"></div><div class="name">Korean skincare set</div><span class="rate">44%</span><span class="price">₩22,000</span><span class="struck">₩39,000</span></div>
<div class="card"><div class="thumb"></div><div class="name">Portable phone charger</div><span class="rate">30%</span><span class="price">₩15,900</span><span class="struck">₩22,700</span></div>
<div class="card"><div class="thumb"></div><div class="name">Kitchen knife set</div><span class="rate">18%</span><span class="price">₩33,400</span><span class="struck">₩40,700</span></div>
<div class="card"><div class="thumb"></div><div class="name">Yoga mat, non-slip</div><span class="rate">27%</span><span class="price">₩17,800</span><span class="struck">₩24,300</span></div>
<div class="card"><div class="thumb"></div><div class="name">Instant coffee 100pk</div><span class="rate">15%</span><span class="price">₩19,900</span><span class="struck">₩23,400</span></div>
<div class="card"><div class="thumb"></div><div class="name">Desk organizer tray</div><span class="rate">33%</span><span class="price">₩11,200</span><span class="struck">₩16,700</span></div>
<div class="card"><div class="thumb"></div><div class="name">Pet grooming brush</div><span class="rate">40%</span><span class="price">₩9,500</span><span class="struck">₩15,800</span></div>
</div>
<footer>
<span>© 11st</span>
<span>Search · Compare · Buy · Delivered</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0071ce; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0071ce; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bae3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #56cfc2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0071ce; color: #56cfc2;
border: 1px solid #56cfc2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0071ce; color: #f5f5f5;
border: 1px solid #2786d4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bae3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e80cc; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#212121; color:#ffffff; box-sizing:border-box;
font-family:"Open Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-family:"Poppins", sans-serif; font-size:16px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:22px; font-family:"Poppins", sans-serif; font-size:12px; font-weight:600; }
.pill-blue { background:#0071ce; color:#fff; border-radius:50px; padding:12px 26px; font-family:"Poppins", sans-serif; font-size:13px; }
.hero { text-align:center; padding:20px 40px 22px; }
.hero .word { font-family:"Poppins", sans-serif; font-size:50px; font-weight:400; line-height:1.0; margin:0; }
.hero .word.mint { color:#56cfc2; }
.hero .sub { font-size:14px; color:rgba(255,255,255,0.7); margin-top:12px; }
.band { background:#efefef; color:#3d3d3d; padding:22px 40px; display:flex; gap:16px; }
.card { flex:1; background:#fff; border-radius:0; padding:14px; }
.card h3 { font-size:16px; margin:0 0 6px; font-weight:700; color:#181818; }
.card p { font-size:12px; margin:0; }
.row { display:flex; justify-content:center; gap:10px; padding:20px 0 0; }
.pill-mint { background:#56cfc2; color:#fff; border-radius:50px; padding:12px 20px; font-family:"Poppins",sans-serif; font-size:13px; }
.pill-ghost { background:#fff; color:#2b2b2b; border-radius:50px; padding:12px 26px; font-family:"Poppins",sans-serif; font-size:13px; }
</style></head>
<body>
<nav>
<p class="brand">Dable</p>
<div class="navlinks"><span>Advertisers</span><span>Publishers</span><span>Support</span><span>About</span></div>
<button class="pill-blue">Contact Us</button>
</nav>
<section class="hero">
<h1 class="word">Personalization</h1>
<h1 class="word mint">Machine learning</h1>
<div class="sub">The native advertising platform that connects users, media, and content</div>
</section>
<div class="band">
<div class="card"><h3>AI-Powered Recommendations</h3><p>Trained on behavioral data from 500M+ monthly users.</p></div>
<div class="card"><h3>Native Ads</h3><p>Asia's largest native advertising exchange.</p></div>
<div class="card"><h3>3,000+ Media Partners</h3><p>Live across 10+ countries in APAC.</p></div>
</div>
<div class="row">
<button class="pill-blue">Create Ad Account</button>
<button class="pill-mint">Get a Quick Estimate</button>
<button class="pill-ghost">Contact Sales</button>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #494fdf; color: #191c1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #494fdf; color: #191c1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #191c1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: 0.24px; background: #ffffff; color: #000000;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: 0.24px; background: #ffffff; color: #191c1f;
border: 1px solid #494fdf; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0.24px; background: #ffffff; color: #191c1f;
border: 1px solid #3d42af; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ffffff; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; background: #f4f4f4; color: #191c1f;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:500; font-size:16px; letter-spacing:-.3px; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; letter-spacing:.2px; }
.btnwhite { background:#fff; color:#000; border:none; border-radius:999px; padding:9px 18px; font-size:13px; font-weight:600; }
.hero { padding:26px 32px 30px; text-align:center; }
.hero h1 { font-size:58px; font-weight:500; line-height:1; letter-spacing:-1.4px; margin:0 0 14px; }
.hero p { font-size:14px; color:rgba(255,255,255,.72); margin:0 0 18px; }
.heroctas { display:flex; gap:10px; justify-content:center; }
.btnout { background:transparent; color:#fff; border:1px solid #fff; border-radius:999px; padding:11px 22px; font-size:13px; font-weight:600; }
.mockup { margin:0 32px; height:150px; border-radius:28px; background:
linear-gradient(135deg,#494fdf 0%,#3a40c4 45%,#0a0a0a 100%);
display:flex; align-items:center; justify-content:center; gap:22px; position:relative; overflow:hidden; }
.card3d { width:110px; height:70px; border-radius:12px; background:linear-gradient(135deg,#16181a,#22242a);
border:1px solid rgba(255,255,255,.14); position:relative; }
.card3d::after { content:''; position:absolute; left:10px; bottom:10px; width:36px; height:8px; border-radius:3px; background:rgba(255,255,255,.5); }
.card3d.violet { background:linear-gradient(135deg,#4f55f1,#3a40c4); transform:translateY(-8px) rotate(-3deg); }
.plans { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:20px 32px; }
.plan { background:#16181a; border-radius:20px; padding:16px; }
.plan.featured { background:#494fdf; }
.plan h4 { font-size:15px; font-weight:500; margin:0 0 6px; }
.plan .price { font-size:22px; font-weight:500; letter-spacing:-.3px; margin:0 0 4px; }
.plan .desc { font-size:10.5px; color:rgba(255,255,255,.72); }
.plan.featured .desc { color:rgba(255,255,255,.85); }
footer { display:flex; justify-content:space-between; padding:14px 32px; font-size:11px; color:rgba(255,255,255,.72);
border-top:1px solid rgba(255,255,255,.12); }
</style></head>
<body>
<nav>
<div class="brand">Revolut</div>
<div class="navlinks"><span>Personal</span><span>Business</span><span>Company</span></div>
<button class="btnwhite">Get the app</button>
</nav>
<section class="hero">
<h1>Banking & Beyond</h1>
<p>Join the millions using Revolut for spending, saving, and investing.</p>
<div class="heroctas">
<button class="btnwhite">Choose your subscription</button>
<button class="btnout">Get the app</button>
</div>
</section>
<div class="mockup">
<div class="card3d violet"></div>
<div class="card3d"></div>
</div>
<div class="plans">
<div class="plan"><h4>Standard</h4><div class="price">Free</div><div class="desc">Everyday spending, no fees</div></div>
<div class="plan"><h4>Plus</h4><div class="price">$3.99</div><div class="desc">Extra protection abroad</div></div>
<div class="plan featured"><h4>Premium</h4><div class="price">$9.99</div><div class="desc">Priority support, insurance</div></div>
<div class="plan"><h4>Metal</h4><div class="price">$16.99</div><div class="desc">Cashback, concierge</div></div>
</div>
<footer>
<span>© Revolut</span>
<span>Revolut · Legal · Privacy · Careers</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffd200; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffd200; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6809; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #da120d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffd200; color: #da120d;
border: 1px solid #da120d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffd200; color: #111111;
border: 1px solid #d9b303; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6809; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f9b302; color: #da120d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body {
display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.utility { flex:0 0 24px; background:#f5f5f5; display:flex; justify-content:flex-end; gap:14px; padding:0 32px; align-items:center; font-size:11px; color:#757575; }
header { flex:0 0 60px; display:flex; align-items:center; gap:28px; padding:0 32px; }
.brand { font-size:22px; font-weight:700; letter-spacing:-0.3px; margin:0; color:#222222; }
.search { flex:1 1 auto; height:38px; border:2px solid #222222; display:flex; align-items:center; padding:0 14px; font-size:13px; color:#9e9e9e; max-width:420px; }
.carttxt { font-size:12px; font-weight:700; color:#222222; white-space:nowrap; }
.gnb { flex:0 0 38px; display:flex; align-items:center; gap:22px; padding:0 32px; border-bottom:1px solid #e0e0e0; }
.gnb span { font-size:13px; font-weight:400; color:#222222; }
.gnb span.active { color:#da120d; font-weight:700; }
.banner { flex:0 0 66px; margin:12px 32px 0; border-radius:8px; background:linear-gradient(90deg,#da120d,#fd4e28); color:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 22px; }
.banner b { font-size:17px; font-weight:700; }
.banner span { font-size:12px; opacity:.9; }
.banner button { background:#ffffff; color:#da120d; border:none; border-radius:4px; padding:8px 16px; font-size:12px; font-weight:700; }
.gridwrap { flex:1 1 auto; padding:12px 32px; overflow:hidden; }
.gw-head { display:flex; justify-content:space-between; margin-bottom:8px; }
.gw-head h2 { font-size:15px; font-weight:700; margin:0; }
.gw-head span { font-size:11px; color:#757575; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { display:flex; flex-direction:column; gap:5px; }
.thumb { width:100%; aspect-ratio:1/1; border-radius:6px; }
.card .title { font-size:12px; color:#222222; line-height:1.3; }
.pricerow { display:flex; align-items:baseline; gap:6px; }
.disc { color:#da120d; font-weight:700; font-size:13px; }
.price { color:#da120d; font-weight:700; font-size:14px; }
.orig { color:#9e9e9e; font-size:11px; text-decoration:line-through; }
.chip { display:inline-flex; width:fit-content; background:#ffd200; color:#222222; border-radius:3px; padding:2px 6px; font-size:10px; font-weight:500; }
</style></head>
<body>
<div class="utility">My Page · Cart · Global</div>
<header>
<p class="brand">Gmarket</p>
<div class="search">Search products, brands, and more</div>
<span class="carttxt">Cart (3)</span>
</header>
<div class="gnb">
<span class="active">All Categories</span><span>Best</span><span>New</span><span>Super Deal</span><span>Brand Day</span><span>Live</span>
</div>
<div class="banner">
<div><b>Big Smile Week</b> <span>Up to 52% off top categories</span></div>
<button>Shop now</button>
</div>
<div class="gridwrap">
<div class="gw-head"><h2>Right now, best-selling</h2><span>Updated hourly</span></div>
<div class="grid">
<div class="card"><span class="thumb" style="background:#f5f5f5"></span><span class="title">Wireless earbuds, noise cancelling</span><div class="pricerow"><span class="disc">32%</span><span class="price">₩59,000</span></div><span class="orig">₩86,000</span><span class="chip">Smile Delivery</span></div>
<div class="card"><span class="thumb" style="background:#eeeeee"></span><span class="title">Organic cotton bath towel set</span><div class="pricerow"><span class="disc">18%</span><span class="price">₩23,900</span></div><span class="orig">₩29,000</span><span class="chip">Smile Delivery</span></div>
<div class="card"><span class="thumb" style="background:#f5f5f5"></span><span class="title">Stainless steel water bottle 750ml</span><div class="pricerow"><span class="disc">45%</span><span class="price">₩12,400</span></div><span class="orig">₩22,000</span><span class="chip">Smile Delivery</span></div>
<div class="card"><span class="thumb" style="background:#eeeeee"></span><span class="title">Compact air circulator fan</span><div class="pricerow"><span class="disc">27%</span><span class="price">₩41,500</span></div><span class="orig">₩57,000</span><span class="chip">Smile Delivery</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #626262; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: transparent; color: #108474;
border: 1px solid #108474; border-radius: 0px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #3a3a3a;
border: 1px solid #bbbbbb; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #626262; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#eeeeee; font-family:'Barlow','Helvetica Neue',Helvetica,Arial,sans-serif; color:#222222; }
*{box-sizing:border-box;}
.nav{height:48px;background:#eeeeee;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.logo{font-size:20px;font-weight:500;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;}
.hero{height:250px;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;padding:0 40px;}
.hero h1{font-size:28px;font-weight:600;letter-spacing:-.5px;margin:0 0 12px;}
.hero p{font-size:15px;color:#3a3a3a;margin:0 0 16px;max-width:420px;}
.btn{background:#108474;color:#fff;font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:12px 26px;}
.grid{display:flex;gap:16px;padding:20px 24px 0;justify-content:center;}
.card{width:190px;background:#fff;border-radius:4px;padding:10px;}
.thumb{height:130px;border-radius:4px;margin-bottom:8px;background:#f5f5f5;}
.ctitle{font-size:14px;font-weight:600;margin:0;}
.cprice{font-size:14px;color:#626262;margin-top:4px;}
.stars{color:#fbcd0a;font-size:12px;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:76px;background:#222222;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:13px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Peel</div>
<div class="navlinks"><div>Cases</div><div>Screen Protectors</div><div>Accessories</div></div>
</div>
<div class="hero">
<h1>Minimal cases. Maximal protection.</h1>
<p>Slim, drop-tested phone cases without the gradients, badges, or noise.</p>
<div class="btn">Shop Cases</div>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ctitle">Slim Case, Charcoal</div><div class="stars">★★★★★</div><div class="cprice">$34.95</div></div>
<div class="card"><div class="thumb" style="background:#d7d7d7;"></div><div class="ctitle">Slim Case, Teal</div><div class="stars">★★★★★</div><div class="cprice">$34.95</div></div>
<div class="card"><div class="thumb" style="background:#e6e6e6;"></div><div class="ctitle">Tempered Glass Screen Protector</div><div class="stars">★★★★☆</div><div class="cprice">$19.95</div></div>
<div class="card"><div class="thumb" style="background:#dcdcdc;"></div><div class="ctitle">MagSafe Wallet</div><div class="stars">★★★★★</div><div class="cprice">$29.95</div></div>
</div>
<div class="footer"><span>© Peel</span><span>Support About</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2e2a25;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2e2a25;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #2e2a25; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6a7076; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #000cee; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #2e2a25;
border: 1px solid #000cee; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #cbcac8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a7076; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #efb61b; color: #2e2a25;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{
width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;
background:#ffffff;font-family:'freight-text-pro',Georgia,'Times New Roman',serif;
color:#222222;
}
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #cececc;}
.logo{font-weight:700;font-size:19px;color:#2e2a25;font-family:'freight-sans-pro',Arial,sans-serif;}
.navlinks{display:flex;gap:26px;font-family:'freight-sans-pro',Arial,sans-serif;}
.navlinks span{font-size:12px;color:#2e2a25;letter-spacing:0.3px;}
.navlinks span.active{color:#000cee;}
.hero{padding:30px 32px 16px;display:flex;gap:28px;align-items:center;}
.heroText{flex:1.2;}
.heroText .kick{font-family:'freight-sans-pro',Arial,sans-serif;color:#000cee;font-size:11px;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;font-weight:600;}
.heroText h1{font-size:28px;font-weight:400;line-height:1.3;color:#2e2a25;margin:0 0 10px;}
.heroText p{font-size:14px;color:#555;line-height:1.5;margin:0 0 16px;max-width:400px;}
.heroBtn{display:inline-block;background:#000cee;color:#fff;font-size:13px;font-family:'freight-sans-pro',Arial,sans-serif;font-weight:600;padding:11px 22px;border-radius:12px;}
.heroBook{flex:1;height:170px;display:flex;align-items:center;justify-content:center;}
.book{width:90px;height:130px;background:linear-gradient(135deg,#2e2a25,#4a453e);border-radius:2px;box-shadow:8px 8px 0 rgba(0,12,238,0.15);position:relative;}
.book::after{content:"";position:absolute;left:8px;right:8px;top:16px;height:2px;background:rgba(255,255,255,0.4);box-shadow:0 20px 0 rgba(255,255,255,0.25),0 40px 0 rgba(255,255,255,0.15);}
.section{padding:8px 32px 0;}
.sectitle{font-family:'freight-sans-pro',Arial,sans-serif;font-size:14px;font-weight:600;color:#2e2a25;margin:0 0 12px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.card{}
.cover{aspect-ratio:2/3;background:linear-gradient(150deg,#2e2a25,#555);border-radius:6px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#f7333f;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 7px;border-radius:8px;font-family:'freight-sans-pro',Arial,sans-serif;}
.badgeM{position:absolute;top:6px;left:6px;background:#efb61b;color:#2e2a25;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 7px;border-radius:8px;font-family:'freight-sans-pro',Arial,sans-serif;}
.ctitle{font-size:13px;font-style:italic;color:#2e2a25;padding:8px 2px 0;}
.cauthor{font-family:'freight-sans-pro',Arial,sans-serif;font-size:11px;color:#6a7076;padding:2px 2px 0;}
.cprice{font-family:'freight-sans-pro',Arial,sans-serif;font-size:13px;font-weight:700;color:#000cee;padding:2px 2px 0;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#2e2a25;color:#cececc;font-size:11px;padding:10px 32px;display:flex;justify-content:space-between;font-family:'freight-sans-pro',Arial,sans-serif;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Graywolf Press</div>
<div class="navlinks"><span class="active">New Releases</span><span>Poetry</span><span>Fiction</span><span>Nonfiction</span><span>Submissions</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="kick">Independent Nonprofit Publisher</div>
<h1>Books that ask more of the reader — and give more back.</h1>
<p>A nonprofit literary press publishing poetry, fiction, and nonfiction since 1974.</p>
<div class="heroBtn">Shop New Releases</div>
</div>
<div class="heroBook"><div class="book"></div></div>
</div>
<div class="section">
<div class="sectitle">New This Season</div>
<div class="grid">
<div class="card"><div class="cover"><div class="badge">New</div></div><div class="ctitle">The Marrow Archive</div><div class="cauthor">a novel</div><div class="cprice">$17.00</div></div>
<div class="card"><div class="cover"><div class="badgeM">Award</div></div><div class="ctitle">Field Notes for a Quiet Year</div><div class="cauthor">poems</div><div class="cprice">$16.00</div></div>
<div class="card"><div class="cover"></div><div class="ctitle">Notes on Distance</div><div class="cauthor">essays</div><div class="cprice">$18.00</div></div>
<div class="card"><div class="cover"><div class="badge">New</div></div><div class="ctitle">The Long Correspondence</div><div class="cauthor">a novel</div><div class="cprice">$17.00</div></div>
</div>
</div>
<div class="footer"><span>© Graywolf Press, a nonprofit press</span><span>Minneapolis, MN</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #362d59; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #362d59; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9f9baf; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #79628c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #362d59; color: #ffffff;
border: 1px solid #79628c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #362d59; color: #f5f5f5;
border: 1px solid #554d72; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9f9baf; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #413561; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1f1633; color:#ffffff; box-sizing:border-box;
font-family:"Rubik", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 44px; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:15px; font-weight:500; text-transform:uppercase; letter-spacing:0.2px; opacity:0.85; }
.cta-white { background:#ffffff; color:#1f1633; border:none; border-radius:8px; padding:12px 16px; font-size:14px; font-weight:700; }
.hero { padding:34px 44px 22px; }
.hero h1 { font-family:Georgia, serif; font-size:64px; font-weight:700; line-height:1.05; margin:0 0 14px; max-width:680px; }
.hero p { font-size:16px; opacity:0.85; margin:0 0 18px; max-width:460px; }
.row { display:flex; gap:12px; }
.btn-purple { background:#79628c; color:#ffffff; border:1px solid #584674; border-radius:13px; padding:12px 20px;
font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.2px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); }
.code { margin:20px 44px 0; background:#150f23; border-radius:12px; padding:18px; font-family:Monaco, monospace; font-size:12px;
color:#dcdcaa; line-height:1.6; backdrop-filter: blur(18px); }
.code .c1 { color:#c2ef4e; }
.code .c2 { color:#fa7faa; }
.glowrow { display:flex; gap:14px; padding:18px 44px 0; }
.glass { flex:1; background:rgba(255,255,255,0.18); border-radius:12px; padding:14px 16px; font-size:13px; }
</style></head>
<body>
<nav>
<p class="brand">Sentry</p>
<div class="navlinks"><span>PRODUCT</span><span>PRICING</span><span>DOCS</span></div>
<button class="cta-white">Get started</button>
</nav>
<section class="hero">
<h1>Code breaks.<br>Fix it faster.</h1>
<p>See what's broken across errors, performance, and replays — before your users notice.</p>
<div class="row"><button class="btn-purple">TRY SENTRY</button></div>
</section>
<div class="code">
<span class="c1">Error</span> · TypeError: Cannot read properties of undefined
<br>at <span class="c2">checkout.processPayment</span> (checkout.js:142)
</div>
<div class="glowrow">
<div class="glass">Errors — 12 unresolved</div>
<div class="glass">Performance — LCP 1.2s</div>
<div class="glass">Replays — 4 new sessions</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f7f2; color: #161716;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f7f2; color: #161716;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #161716; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6c6c6c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #4d523c; color: #f9f7f2;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #4d523c;
border: 1px solid #4d523c; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9f7f2; color: #161716;
border: 1px solid #c0bfbb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c6c6c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ecff92; color: #161716;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f7f2; font-family:'Simplon Norm','Helvetica Neue',Helvetica,Arial,sans-serif; color:#161716; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #f1ece0;background:#f9f7f2;}
.logo{font-family:'Georgia','Times New Roman',serif;font-size:22px;color:#161716;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:0.3px;text-transform:uppercase;color:#6c6c6c;}
.navlinks span:first-child{color:#4d523c;}
.hero{height:250px;background:#f1ece0;display:flex;align-items:center;padding:0 40px;}
.herotext{width:440px;}
h1{font-family:Georgia,'Times New Roman',serif;font-size:36px;font-weight:400;letter-spacing:-0.3px;line-height:1.2;margin:0 0 14px;}
.sub{font-size:15px;color:#323429;line-height:1.5;margin:0 0 20px;max-width:360px;}
.cta{display:inline-block;background:#4d523c;color:#f9f7f2;font-size:13px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:14px 30px;border-radius:9999px;}
.swatchcircle{position:relative;width:220px;height:220px;margin-left:60px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#b9c2a6,#4d523c 85%);}
.swatchcircle:before{content:'';position:absolute;left:70px;top:60px;width:80px;height:80px;border-radius:50%;background:#f69371;opacity:0.55;}
.sec{padding:24px 40px 0;}
.sectitle{font-family:Georgia,serif;font-size:20px;margin-bottom:16px;}
.grid{display:flex;gap:18px;}
.card{width:210px;background:#ffffff;border-radius:12px;padding:14px;}
.thumb{height:100px;border-radius:8px;margin-bottom:10px;}
.badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;padding:4px 12px;border-radius:9999px;color:#161716;margin-bottom:8px;}
.pname{font-size:16px;font-weight:600;margin:0 0 4px;}
.pprice{font-size:14px;color:#4d523c;}
</style>
<div class="nav">
<div class="logo">Prose</div>
<div class="navlinks"><span>Hair</span><span>Skin</span><span>Ingredients</span><span>Quiz</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Truly custom, made for you.</h1>
<p class="sub">Bespoke haircare and skincare formulated to your ingredients, not the shelf.</p>
<div class="cta">Take the Quiz</div>
</div>
<div class="swatchcircle"></div>
</div>
<div class="sec">
<div class="sectitle">Your Custom Routine</div>
<div class="grid">
<div class="card"><div class="badge" style="background:#ecff92">Biotin</div><div class="thumb" style="background:linear-gradient(135deg,#b1a49c,#4d523c)"></div><div class="pname">Custom Shampoo</div><div class="pprice">$28</div></div>
<div class="card"><div class="badge" style="background:#ead7f3">Custom</div><div class="thumb" style="background:linear-gradient(135deg,#b9c2a6,#323429)"></div><div class="pname">Scalp Serum</div><div class="pprice">$32</div></div>
<div class="card"><div class="badge" style="background:#f69371;color:#f9f7f2">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#fcded3,#4d523c)"></div><div class="pname">Niacinamide Drops</div><div class="pprice">$24</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1918;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1918;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #1a1918; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #718096; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #fa1400; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #00174d;
border: 1px solid #fa1400; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1918;
border: 1px solid #c6c6c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #718096; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fa1400; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcfcec; color:#1a1918; box-sizing:border-box;
font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif; }
* { box-sizing:border-box; }
nav { height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#00174d; }
.brand { font-size:19px; font-weight:800; color:#fff; }
.navlinks { display:flex; gap:20px; font-size:12px; color:#c8d3ec; }
.searchbar { background:#fff; border-radius:9999px; padding:8px 16px; font-size:12px; color:#666; width:200px; }
main { display:flex; height:calc(640px - 68px - 44px); }
.gallery { width:390px; background:#ffffff; position:relative; display:flex; align-items:center; justify-content:center; }
.vac { width:70px; height:150px; border-radius:16px; background:linear-gradient(180deg,#fa1400,#c81000); position:relative; }
.vac::before { content:''; position:absolute; bottom:-14px; left:-10px; width:90px; height:34px; border-radius:9999px; background:#00174d; }
.badge { position:absolute; top:20px; left:20px; background:#fab812; color:#1a1918; font-size:11px; font-weight:800; padding:4px 10px; border-radius:2px; }
.info { flex:1; padding:28px 32px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:12px; color:#718096; text-transform:uppercase; letter-spacing:0.4px; }
h1 { font-size:22px; font-weight:800; margin:0; }
.price-row { display:flex; align-items:center; gap:10px; }
.price { font-size:22px; font-weight:800; color:#fa1400; }
.was { font-size:13px; color:#718096; text-decoration:line-through; }
.desc { font-size:13px; color:#3d3c3a; line-height:1.55; max-width:340px; }
.chips { display:flex; gap:8px; }
.chip { background:#92aedb; color:#00174d; font-size:11px; font-weight:700; padding:6px 12px; border-radius:9999px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#fa1400; color:#fff; border:none; border-radius:8px; padding:14px; font-size:14px; font-weight:800; }
.btn-sec { background:#fff; color:#00174d; border:1px solid #00174d; border-radius:8px; padding:14px 18px; font-size:13px; font-weight:700; }
footer { padding:12px 34px; border-top:1px solid #e2e8f0; font-size:11px; color:#718096; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Bissell</div>
<div class="navlinks"><span>Vacuums</span><span>Carpet Cleaners</span><span>Steam</span><span>Parts</span></div>
<div class="searchbar">Find your cleaning tool…</div>
</nav>
<main>
<div class="gallery"><span class="badge">Limited-Time Offer</span><div class="vac"></div></div>
<div class="info">
<span class="cat">Cordless Stick Vacuum</span>
<h1>Bissell ICONpet Pro</h1>
<div class="price-row"><span class="price">$249.99</span><span class="was">$299.99</span></div>
<p class="desc">Tangle-free brush roll and up to 40 minutes of runtime — engineered for homes with pets.</p>
<div class="chips"><span class="chip">Pet Hair</span><span class="chip">Cordless</span><span class="chip">HEPA Filter</span></div>
<div class="btn-row">
<button class="btn-add">Add to Cart</button>
<button class="btn-sec">Compare Models</button>
</div>
</div>
</main>
<footer><span>© Bissell</span><span>Cleaning for a Cause · Warranty · Parts</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.5px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.25px; background: #116600; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.25px; background: #ffffff; color: #116600;
border: 1px solid #116600; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #003366; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,'Segoe UI',Roboto,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.strip{height:36px;background:#116600;display:flex;align-items:center;gap:24px;padding:0 32px;color:#fff;font-size:12px;font-family:'Courier New',monospace;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e0e0e0;}
.logo{font-family:Georgia,serif;font-size:19px;font-weight:700;color:#1a1a1a;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;}
.hero{height:190px;background:#1a1a1a;display:flex;flex-direction:column;justify-content:center;padding:0 32px;}
.h1{font-family:Georgia,serif;font-size:28px;font-weight:700;color:#fff;margin:0 0 8px;}
.sub{font-size:14px;color:#e0e0e0;margin:0;}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:150px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:10px;text-align:center;position:relative;}
.thumb{height:90px;border-radius:9999px;background:radial-gradient(circle at 40% 35%,#f5e6a3,#b8860b 70%);margin:0 auto 8px;width:90px;position:relative;}
.grade{position:absolute;top:6px;left:6px;background:#003366;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.4px;padding:2px 6px;border-radius:2px;}
.ctitle{font-family:Georgia,serif;font-size:13px;font-weight:600;color:#1a1a1a;}
.cprice{font-family:'Courier New',monospace;font-size:16px;font-weight:700;color:#1a1a1a;margin-top:6px;}
.category-chip{display:inline-block;background:#f7f7f7;border:1px solid #e0e0e0;border-radius:9999px;padding:5px 14px;font-size:12px;margin-right:8px;}
.chiprow{padding:14px 32px 0;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;background:#1a1a1a;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#999;font-size:11px;}
</style>
<div class="wrap">
<div class="strip"><span>GOLD $2,384.10 ▲</span><span>SILVER $28.62 ▲</span><span>PLATINUM $968.40 ▼</span></div>
<div class="nav">
<div class="logo">Moderncoinmart</div>
<div class="navlinks"><span>Gold</span><span>Silver</span><span>Graded Coins</span><span>Bullion</span></div>
</div>
<div class="hero">
<div class="h1">Certified coins. Confirmed grades.</div>
<p class="sub">PCGS and NGC authentication on every listing — the coins are the hero, not the chrome.</p>
</div>
<div class="chiprow">
<span class="category-chip">Gold Eagles</span><span class="category-chip">Morgan Dollars</span><span class="category-chip">Silver Bullion</span>
</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="grade">MS70</span></div><div class="ctitle">1oz Gold Eagle 2026</div><div class="cprice">$2,451.00</div></div>
<div class="card"><div class="thumb"><span class="grade">PR69</span></div><div class="ctitle">Morgan Silver Dollar</div><div class="cprice">$68.50</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Silver Eagle 1oz</div><div class="cprice">$34.20</div></div>
<div class="card"><div class="thumb"><span class="grade">MS65</span></div><div class="ctitle">Peace Dollar 1922</div><div class="cprice">$52.00</div></div>
</div>
<div class="footer"><span>PCGS Certified · NGC Graded</span><span>© Moderncoinmart</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #112222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #112222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #112222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #5f5f5f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #0099cc; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #0099cc;
border: 1px solid #0099cc; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #282828;
border: 1px solid #bec2c2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5f5f5f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e82020; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f7; color:#112222; box-sizing:border-box;
font-family:'Lato', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#fff; display:flex; align-items:center; gap:18px; padding:0 22px;
border-bottom:1px solid #eeeeee; }
.logo { font-size:19px; font-weight:700; color:#0099cc; }
.logo b { color:#282828; }
.cat { font-size:13px; font-weight:600; color:#282828; }
.cat.active { color:#0099cc; border-bottom:2px solid #0099cc; padding-bottom:16px; margin-bottom:-17px; }
.pill-search { margin-left:auto; width:230px; height:34px; border-radius:999px; border:1px solid #d8d8d8;
background:#fff; display:flex; align-items:center; padding:0 14px; font-size:12px; color:#5f5f5f; }
.icon-cart { width:32px; height:32px; border-radius:999px; background:#0099cc; color:#fff;
display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.stage { display:flex; gap:24px; padding:20px 22px 0; }
.poster { width:220px; height:308px; border-radius:12px; flex:0 0 auto; position:relative; overflow:hidden;
background:linear-gradient(200deg,#112222 0%,#0099cc 60%,#d84000 130%); box-shadow:0 6px 16px rgba(0,0,0,.15); }
.poster::before { content:''; position:absolute; left:20px; top:60px; width:180px; height:180px;
border-radius:50%; background:rgba(255,255,255,.10); }
.ribbon { position:absolute; top:12px; left:-32px; width:150px; text-align:center; transform:rotate(-38deg);
background:#d84000; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; padding:3px 0; }
.detail { flex:1; }
.tags { display:flex; gap:6px; margin-bottom:8px; }
.tag { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; border-radius:12px;
padding:3px 10px; color:#fff; }
.t-new{background:#0099cc;} .t-limited{background:#d84000;}
h1 { font-size:22px; font-weight:700; margin:0 0 4px; }
.sub { font-size:13px; color:#5f5f5f; margin-bottom:10px; }
.castrow { display:flex; gap:14px; font-size:11px; color:#888; margin-bottom:12px; }
.castrow b { color:#282828; }
.pricebox { display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.price { font-family:Arial, sans-serif; font-size:26px; font-weight:700; color:#e82020; }
.orig { font-size:13px; color:#888888; text-decoration:line-through; }
.timer { display:inline-flex; gap:6px; align-items:center; background:#e82020; color:#fff; border-radius:4px;
padding:5px 10px; font-size:12px; font-weight:700; font-family:Arial,sans-serif; margin-bottom:12px; }
.btnrow { display:flex; gap:10px; }
.btn-p { background:#0099cc; color:#fff; border:none; border-radius:4px; height:40px; padding:0 26px;
font-size:13px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
.btn-s { background:#fff; color:#0099cc; border:1px solid #0099cc; border-radius:4px; height:40px; padding:0 20px;
font-size:13px; font-weight:700; }
.fmtchips { display:flex; gap:8px; margin-top:14px; }
.chip { border:1px solid #d8d8d8; background:#fff; border-radius:999px; padding:6px 14px; font-size:11px; color:#282828; }
.chip.active { background:#0099cc; color:#fff; border-color:#0099cc; }
.grid-row { display:flex; gap:16px; padding:18px 22px 0; }
.stat-card { flex:1; background:#fff; border:1px solid #eeeeee; border-radius:12px; padding:12px 16px; }
.stat-card .l { font-size:10px; text-transform:uppercase; color:#888; font-weight:700; letter-spacing:.4px; }
.stat-card .v { font-size:15px; font-weight:700; color:#112222; margin-top:2px; }
</style></head>
<body>
<nav>
<span class="logo"><b>Cdjapan Movies A 2</b></span>
<span class="cat">Anime</span>
<span class="cat active">Movies</span>
<span class="cat">TV Series</span>
<span class="cat">Live Concerts</span>
<div class="pill-search">Search movies, directors…</div>
<div class="icon-cart">2</div>
</nav>
<div class="stage">
<div class="poster"><span class="ribbon">Pre-Order</span></div>
<div class="detail">
<div class="tags"><span class="tag t-new">New Release</span><span class="tag t-limited">Limited Steelbook</span></div>
<h1>Harbor of Silence [Steelbook Edition]</h1>
<div class="sub">Blu-ray + Bonus Disc · Directed by Ryo Tanabe · 118 min · Region-Free</div>
<div class="castrow">Cast <b>Mei Ashida</b> · <b>Kento Ibaraki</b> · <b>Sana Kurogane</b></div>
<div class="pricebox">
<span class="price">¥5,480</span>
<span class="orig">¥6,800</span>
</div>
<div class="timer">⏱ Pre-order bonus ends in 04d 12h</div>
<div class="btnrow">
<button class="btn-p">Add to Cart</button>
<button class="btn-s">Notify Me</button>
</div>
<div class="fmtchips">
<span class="chip active">Steelbook BD</span>
<span class="chip">Standard BD</span>
<span class="chip">DVD</span>
</div>
</div>
</div>
<div class="grid-row">
<div class="stat-card"><div class="l">Release Date</div><div class="v">2026-12-09</div></div>
<div class="stat-card"><div class="l">Bonus Content</div><div class="v">Making-of + Art Card Set</div></div>
<div class="stat-card"><div class="l">Availability</div><div class="v" style="color:#eb3588">Pre-order Open</div></div>
<div class="stat-card"><div class="l">Shipping</div><div class="v">Worldwide, tracked</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e0e0e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #0e0e0e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #020202; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.top { height:52px; display:flex; align-items:center; padding:0 22px; gap:10px; border-bottom:0.5px solid #2A2A2A; }
.top .sail { width:20px; height:20px; border-radius:4px; background:#fff; }
.top .title { font-size:19px; font-weight:700; }
.seg { display:flex; gap:22px; padding:0 22px; height:38px; align-items:center; border-bottom:0.5px solid #2A2A2A; }
.seg span { font-size:14px; font-weight:600; color:#6E6E6E; }
.seg span.active { color:#fff; padding-bottom:9px; border-bottom:2px solid #fff; }
.feed { padding:16px 14px; display:flex; gap:18px; height:434px; }
.job { flex:1; display:flex; flex-direction:column; gap:8px; }
.prompt { font-family:'SF Mono', ui-monospace, Menlo, monospace; font-size:13px; color:#A1A1A1; line-height:1.4; padding:0 4px; }
.prompt b { color:#FFFFFF; font-weight:400; }
.grid2 { border-radius:12px; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:6px; background:#000; aspect-ratio:1; }
.cell { background-size:cover; background-position:center; }
.g1 .c1 { background:linear-gradient(135deg,#3a2a1a,#8a5a2a); }
.g1 .c2 { background:linear-gradient(135deg,#1a2a3a,#2a5a8a); }
.g1 .c3 { background:linear-gradient(135deg,#2a1a3a,#6a2a8a); }
.g1 .c4 { background:linear-gradient(135deg,#1a3a2a,#2a8a5a); }
.actionrow { height:40px; display:flex; align-items:center; padding:0 4px; }
.actionrow .icons { display:flex; gap:14px; color:#A1A1A1; font-size:16px; flex:1; }
.uchips { display:flex; gap:6px; }
.uchip { background:#FFFFFF; color:#000000; font-family:'SF Mono', ui-monospace, monospace; font-size:13px; font-weight:600; padding:6px 10px; border-radius:8px; }
.job2 { display:flex; flex-direction:column; gap:8px; }
.job2 .grid2 { opacity:0.9; }
.g2 .c1 { background:linear-gradient(135deg,#3a1a2a,#8a2a5a); }
.g2 .c2 { background:linear-gradient(135deg,#2a3a1a,#6a8a2a); }
.g2 .c3 { background:linear-gradient(135deg,#1a1a3a,#2a2a8a); }
.g2 .c4 { background:linear-gradient(135deg,#3a2a3a,#8a5a8a); }
.vchips { display:flex; gap:6px; }
.vchip { background:#1A1A1A; border:1px solid #2A2A2A; color:#fff; font-family:'SF Mono', ui-monospace, monospace; font-size:13px; font-weight:600; padding:6px 10px; border-radius:8px; }
.promptbar { position:relative; margin:0 14px; height:50px; background:#1A1A1A; border:1px solid #2A2A2A; border-radius:25px; display:flex; align-items:center; padding:0 8px 0 18px; gap:10px; }
.promptbar .ph { color:#6E6E6E; font-size:14px; flex:1; font-family:'SF Mono', ui-monospace, monospace; }
.promptbar .imagine { width:36px; height:36px; border-radius:50%; background:#FFFFFF; display:flex; align-items:center; justify-content:center; color:#000; font-size:16px; }
.tabbar { height:0; }
</style></head>
<body>
<div class="top"><div class="sail"></div><div class="title">Midjourney (iOS)</div></div>
<div class="seg"><span class="active">Imagine</span><span>Edit</span><span>Personalize</span></div>
<div class="feed">
<div class="job">
<div class="prompt"><b>a glass owl, studio light</b> --ar 1:1 --v 6 --stylize 250</div>
<div class="grid2 g1"><div class="cell c1"></div><div class="cell c2"></div><div class="cell c3"></div><div class="cell c4"></div></div>
<div class="actionrow"><span class="icons">♡ ⬇ ⋯</span><div class="uchips"><span class="uchip">U1</span><span class="uchip">U2</span><span class="uchip">U3</span><span class="uchip">U4</span></div></div>
</div>
<div class="job2">
<div class="prompt"><b>brutalist library interior</b>, morning fog --ar 1:1 --style raw</div>
<div class="grid2 g2"><div class="cell c1"></div><div class="cell c2"></div><div class="cell c3"></div><div class="cell c4"></div></div>
<div class="actionrow"><span class="icons">♡ ⬇ ⋯</span><div class="vchips"><span class="vchip">V1</span><span class="vchip">V2</span><span class="vchip">V3</span><span class="vchip">🔄</span></div></div>
</div>
</div>
<div class="promptbar"><span class="ph">What will you imagine?</span><div class="imagine">↑</div></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a7cff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a7cff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8bbffa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #9d4edd; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a7cff; color: #000000;
border: 1px solid #9d4edd; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a7cff; color: #f5f5f5;
border: 1px solid #308ffd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8bbffa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2275fa; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#E4E6EB; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; height:640px; }
.listcol { width:300px; flex-shrink:0; border-right:1px solid #3A3B3C; }
.listcol .lh { padding:18px 18px 8px; }
.listcol .lh h1 { font-size:28px; font-weight:700; margin:0 0 10px; letter-spacing:-0.3pt; color:#fff; }
.search { height:36px; border-radius:18px; background:#1C1C1D; display:flex; align-items:center; padding:0 12px; gap:8px; }
.search .mag { width:12px; height:12px; border:2px solid #65676B; border-radius:50%; }
.search span { font-size:14px; color:#8A8D91; }
.row { display:flex; align-items:center; gap:12px; padding:10px 18px; }
.row .av { width:44px; height:44px; border-radius:50%; position:relative; flex-shrink:0; }
.row .av .dot { position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:50%; background:#31D158; border:2px solid #000; }
.row .who { flex:1; min-width:0; }
.row .who b { display:block; font-size:15px; font-weight:600; color:#E4E6EB; }
.row .who span { font-size:13px; color:#B0B3B8; }
.row .t { font-size:12px; color:#65676B; }
.a1 { background:linear-gradient(135deg,#0A7CFF,#9D4EDD); }
.a2 { background:linear-gradient(135deg,#FF5CA0,#9D4EDD); }
.a3 { background:linear-gradient(135deg,#9D4EDD,#0A7CFF); }
.thread { flex:1; display:flex; flex-direction:column; }
.thead { height:60px; border-bottom:1px solid #3A3B3C; display:flex; align-items:center; gap:12px; padding:0 20px; }
.thead .av { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#0A7CFF,#FF5CA0); }
.thead .nm b { display:block; font-size:16px; font-weight:600; }
.thead .nm span { font-size:12px; color:#65676B; }
.thead .calls { margin-left:auto; display:flex; gap:16px; }
.thead .calls .ic { width:20px; height:20px; border-radius:5px; background:#0A7CFF; }
.msgs { flex:1; padding:20px; display:flex; flex-direction:column; gap:6px; }
.bub { max-width:60%; padding:9px 14px; border-radius:18px; font-size:16px; line-height:1.4; }
.in { align-self:flex-start; background:#303030; color:#E4E6EB; border-bottom-left-radius:6px; }
.out { align-self:flex-end; color:#fff; border-bottom-right-radius:6px;
background:linear-gradient(135deg,#0A7CFF,#9D4EDD 55%,#FF5CA0); }
.grp { margin-bottom:10px; }
.grp:last-child { margin-bottom:0; }
.reaction { position:relative; align-self:flex-end; margin-top:-14px; margin-right:10px; z-index:2; }
.reaction .pill { background:#000; border:1px solid #3A3B3C; border-radius:999px; padding:2px 8px; font-size:13px; display:inline-flex; align-items:center; gap:4px; }
.composer { display:flex; align-items:center; gap:10px; padding:12px 20px; }
.composer .ic { width:22px; height:22px; border-radius:5px; background:#0A7CFF; }
.composer .pill { flex:1; height:36px; border-radius:18px; background:#1C1C1D; display:flex; align-items:center; padding:0 14px; color:#8A8D91; font-size:15px; }
.composer .thumb { width:32px; height:32px; border-radius:50%; background:#0A7CFF; display:flex; align-items:center; justify-content:center; }
.composer .thumb .g { width:14px; height:14px; background:#fff; clip-path:polygon(30% 100%,0 60%,0 20%,25% 0,75% 25%,100% 55%,70% 100%); }
</style></head>
<body>
<div class="shell">
<div class="listcol">
<div class="lh"><h1>Messenger (iOS)</h1><div class="search"><div class="mag"></div><span>Search</span></div></div>
<div class="row"><div class="av a1"><div class="dot"></div></div><div class="who"><b>Theo Marchetti</b><span>sent a photo</span></div><div class="t">9:41</div></div>
<div class="row"><div class="av a2"></div><div class="who"><b>Group: Design Crew</b><span>Priya: sounds great!</span></div><div class="t">Mon</div></div>
<div class="row"><div class="av a3"><div class="dot"></div></div><div class="who"><b>Nadia K.</b><span>😂😂😂</span></div><div class="t">Sun</div></div>
</div>
<div class="thread">
<div class="thead">
<div class="av"></div>
<div class="nm"><b>Theo Marchetti</b><span>Active now</span></div>
<div class="calls"><div class="ic"></div><div class="ic"></div></div>
</div>
<div class="msgs">
<div class="grp"><div class="bub in">did you see the new fediverse timeline experiment?</div></div>
<div class="grp"><div class="bub out">yeah, i've been playing with it all week</div><div class="bub out" style="margin-top:2px">kind of obsessed honestly</div></div>
<div class="grp"><div class="bub in">send me the link when you get a sec</div></div>
<div class="reaction"><span class="pill">👍 2</span></div>
</div>
<div class="composer">
<div class="ic"></div><div class="ic"></div><div class="ic"></div>
<div class="pill">Aa</div>
<div class="thumb"><div class="g"></div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c6007e; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #000000; color: #ffffff;
border: 1px solid #c6007e; border-radius: 0px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #000000; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c6007e; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Electric Fetus Independ 2</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#000000; color:#ffffff; font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.logo { font-weight:700; font-size:20px; text-transform:uppercase; letter-spacing:.5px; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.navlinks span.on { color:#c6007e; }
.search { background:#f2f2f2; color:#333; border-radius:9999px; padding:10px 20px; font-size:13px; width:280px; }
.hero { padding:26px 32px 18px; }
.hero h1 { font-size:28px; font-weight:700; margin:0 0 10px; letter-spacing:-.3px; }
.hero p { font-size:14px; color:#999; max-width:420px; margin:0 0 16px; }
.btn { display:inline-block; background:#c6007e; color:#fff; padding:12px 24px; font-size:14px; font-weight:700;
text-transform:uppercase; letter-spacing:.5px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:6px 32px; }
.card { background:#fff; color:#000; padding:16px; }
.thumb { aspect-ratio:1/1; height:96px; margin-bottom:10px; }
.t1 { background:linear-gradient(160deg,#ff6fb8,#c6007e); }
.t2 { background:linear-gradient(160deg,#333,#000); }
.t3 { background:linear-gradient(160deg,#999,#333); }
.t4 { background:linear-gradient(160deg,#e699cc,#a00066); }
.badge { display:inline-block; background:#c6007e; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:.5px; padding:4px 8px; margin-bottom:6px; }
.name { font-size:14px; font-weight:600; margin:0 0 4px; }
.price { font-size:14px; font-weight:700; }
</style></head>
<body>
<nav>
<div class="logo">Electric Fetus Independ 2</div>
<div class="navlinks"><span class="on">Vinyl</span><span>CDs</span><span>Gear</span><span>Events</span></div>
<div class="search">Search the crates...</div>
</nav>
<div class="hero">
<h1>Crate-dig after dark.</h1>
<p>Rare pressings, new arrivals, and the deepest catalog in the Twin Cities — one neon sign in a basement window.</p>
<div class="btn">Shop New Arrivals</div>
</div>
<div class="grid">
<div class="card"><div class="thumb t1"></div><span class="badge">Sale</span><p class="name">Voltage Low LP</p><p class="price">$21.99</p></div>
<div class="card"><div class="thumb t2"></div><p class="name">Basement Tapes Vol.2</p><p class="price">$18.99</p></div>
<div class="card"><div class="thumb t3"></div><p class="name">Night Signal 7"</p><p class="price">$12.99</p></div>
<div class="card"><div class="thumb t4"></div><span class="badge">New</span><p class="name">Neon Static CD</p><p class="price">$14.99</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #161616;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #161616;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.33; margin: 0; color: #161616; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.29; letter-spacing: 0.16px; margin: 0; color: #525252; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.29; letter-spacing: 0.16px; background: #0f62fe; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.29; letter-spacing: 0.16px; background: #161616; color: #ffffff;
border: 1px solid #0f62fe; border-radius: 0px;
padding: 12px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0.16px; background: #f4f4f4; color: #161616;
border: 1px solid #c5c5c5; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #525252; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dde9ff; color: #0f62fe;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#161616; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.utilbar { height:28px; background:#f4f4f4; color:#525252; font-size:11px; display:flex; align-items:center;
padding:0 32px; letter-spacing:0.16px; }
nav { height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e0e0e0; }
.brand { font-size:16px; font-weight:600; }
.navlinks { display:flex; gap:20px; font-size:13px; letter-spacing:0.16px; }
.btn-blue { background:#0f62fe; color:#fff; border:none; border-radius:0; padding:11px 16px; font-size:13px;
letter-spacing:0.16px; }
.hero { padding:26px 32px 18px; border-bottom:1px solid #e0e0e0; }
.hero h1 { font-weight:300; font-size:48px; line-height:1.18; letter-spacing:-0.4px; margin:0 0 10px; max-width:620px; }
.hero p { font-size:16px; color:#525252; margin:0 0 14px; letter-spacing:0.16px; max-width:480px; }
.btn-row { display:flex; gap:0; }
.btn-secondary { background:#161616; color:#fff; border:none; padding:11px 16px; font-size:13px; letter-spacing:0.16px; }
.cardgrid { display:grid; grid-template-columns:repeat(4,1fr); }
.card { border-right:1px solid #e0e0e0; padding:20px 20px; }
.card:last-child { border-right:none; }
.card .eyebrow { font-size:13px; color:#525252; letter-spacing:0.16px; margin-bottom:8px; }
.card h3 { font-size:19px; font-weight:400; line-height:1.25; margin:0 0 8px; }
.card p { font-size:13px; color:#525252; line-height:1.35; margin:0; letter-spacing:0.16px; }
.ctabanner { background:#0f62fe; color:#fff; padding:22px 32px; display:flex; align-items:center;
justify-content:space-between; margin-top:auto; }
.ctabanner h2 { font-size:24px; font-weight:400; margin:0; }
.btn-white { background:#fff; color:#0f62fe; border:none; padding:11px 16px; font-size:13px; letter-spacing:0.16px; }
footer { background:#161616; color:#c6c6c6; padding:12px 32px; display:flex; justify-content:space-between;
font-size:12px; letter-spacing:0.16px; }
</style></head>
<body>
<div class="utilbar">United States | ibm.com</div>
<nav>
<span class="brand">IBM</span>
<div class="navlinks"><span>Products</span><span>Solutions</span><span>Consulting</span><span>Support</span></div>
<button class="btn-blue">Contact sales</button>
</nav>
<div class="hero">
<h1>AI built for business.</h1>
<p>Deploy trusted AI across your enterprise with watsonx and hybrid cloud.</p>
<div class="btn-row"><button class="btn-blue">Learn more</button><button class="btn-secondary">Watch the keynote</button></div>
</div>
<div class="cardgrid">
<div class="card"><div class="eyebrow">AI</div><h3>watsonx</h3><p>Train, tune, and deploy AI models across your business.</p></div>
<div class="card"><div class="eyebrow">Cloud</div><h3>Hybrid cloud</h3><p>Build once, deploy anywhere with Red Hat OpenShift.</p></div>
<div class="card"><div class="eyebrow">Consulting</div><h3>IBM Consulting</h3><p>Strategy and technology expertise for enterprise transformation.</p></div>
<div class="card"><div class="eyebrow">Infrastructure</div><h3>Z and Power</h3><p>Mission-critical infrastructure for the world's biggest workloads.</p></div>
</div>
<div class="ctabanner">
<h2>Ready to see what AI can do for your business?</h2>
<button class="btn-white">Get started</button>
</div>
<footer>
<span>© IBM</span>
<span>IBM · Products · Solutions · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #272d45;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #272d45;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #272d45; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #9a9db1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #0e7a82; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #ffffff; color: #002955;
border: 1px solid #002955; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #272d45;
border: 1px solid #c9cad0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9db1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.2px; background: #f4f4f6; color: #272d45;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#272d45; box-sizing:border-box;
font-family:'Gilroy',Roboto,-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#002955; }
.brand { font-size:16px; font-weight:600; color:#fff; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; color:#fff; }
.navlinks span.on { text-decoration:underline; text-underline-offset:6px; }
.util { font-size:12px; color:#d3d4dd; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 72px); }
.stage { padding:24px; border-right:1px solid #d3d4dd; display:flex; flex-direction:column; gap:10px; background:#f4f4f6; }
.panel { flex:1; position:relative; overflow:hidden; border-radius:8px; background:#fff; }
.panel::before { content:''; position:absolute; left:50%; top:10%; width:50%; height:80%; transform:translateX(-50%); background:linear-gradient(180deg,#f7f7f8,#e5e5eb); border-radius:16px; box-shadow:0 10px 24px rgba(0,41,85,0.12); }
.panel::after { content:''; position:absolute; left:50%; top:38%; width:20%; height:20%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,#0e7a82,#002955); }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; background:#fff; border:1px solid #d3d4dd; border-radius:8px; }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:12px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase; color:#9a9db1; }
h1 { margin:0; font-size:22px; font-weight:600; }
.badge-row { display:flex; gap:6px; }
.badge-feat { background:#f4f4f6; border:1px solid #e5e5eb; color:#272d45; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; }
.badge-award { background:#0e7a82; color:#fff; font-size:11px; font-weight:700; padding:4px 8px; border-radius:4px; }
.price { font-size:22px; font-weight:700; }
.spec-table { border-top:1px solid #e5e5eb; }
.spec-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #e5e5eb; font-size:12px; }
.spec-row .l { font-size:11px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase; color:#9a9db1; }
.filter-chip-row { display:flex; gap:8px; }
.filter-chip { border:1px solid #d3d4dd; border-radius:999px; padding:8px 16px; font-size:13px; color:#676986; }
.filter-chip.on { background:#002955; color:#fff; border:none; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#0e7a82; color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; }
.btn-secondary { width:170px; height:48px; background:#fff; border:1.5px solid #002955; color:#002955; border-radius:8px; font-size:15px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Blueair</p>
<div class="navlinks"><span class="on">Purifiers</span><span>Filters</span><span>Find My Purifier</span><span>Support</span></div>
<div class="util">Search Account Cart (0)</div>
</nav>
<main>
<div class="stage">
<div class="panel"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">HEPASilent Series</span>
<h1>Blue Pure 211+ Air Purifier</h1>
<div class="badge-row"><span class="badge-feat">Energy Star</span><span class="badge-award">Editor's Choice</span></div>
<div class="price">$299.00</div>
<div class="spec-table">
<div class="spec-row"><span class="l">CADR</span><span>350 CFM</span></div>
<div class="spec-row"><span class="l">Room Coverage</span><span>540 sq ft</span></div>
<div class="spec-row"><span class="l">Noise Level</span><span>31–56 dB</span></div>
</div>
<div class="filter-chip-row">
<span class="filter-chip on">Living Room</span><span class="filter-chip">Bedroom</span><span class="filter-chip">Office</span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compare Models</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1c69d4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1c69d4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #93b6e6; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #414141; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c69d4; color: #ffffff;
border: 1px solid #414141; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1c69d4; color: #f5f5f5;
border: 1px solid #3f7fd9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #93b6e6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2263bc; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#414141; box-sizing:border-box;
font-family:"Segoe UI", -apple-system, Helvetica, Arial, sans-serif; font-weight:300; }
* { box-sizing:border-box; }
.nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #f2f2f2; }
.nav .brand { font-weight:500; font-size:20px; letter-spacing:2px; }
.nav .links { display:flex; gap:24px; font-size:15px; font-weight:500; }
.nav .icons { display:flex; gap:16px; font-size:13px; color:#414141; }
.hero { position:relative; height:280px; background:linear-gradient(180deg,#eef0f2,#dfe2e6); overflow:hidden; }
.road { position:absolute; left:0; right:0; bottom:0; height:90px; background:#262626; }
.road::before { content:''; position:absolute; top:50%; left:0; right:0; height:3px;
background:repeating-linear-gradient(90deg,#fff 0 40px, transparent 40px 80px); transform:translateY(-50%); }
.carshape { position:absolute; left:50%; bottom:70px; transform:translateX(-50%); width:520px; height:130px;
background:linear-gradient(180deg,#2b2f36,#12141a); border-radius:70px 70px 20px 20px; }
.carshape::before { content:''; position:absolute; top:-46px; left:110px; right:110px; height:70px;
background:linear-gradient(180deg,#3a3f47,#20232a); border-radius:60px 60px 0 0; }
.wheel { position:absolute; bottom:-18px; width:70px; height:70px; border-radius:50%; background:#0d0f12; border:6px solid #2b2f36; }
.w1{left:60px;} .w2{right:60px;}
.herotxt { position:relative; z-index:2; padding:26px 32px 0; }
.herotxt h1 { font-size:35px; font-weight:300; line-height:1.43; margin:0 0 6px; color:#1c1c1c; }
.herotxt p { font-size:18px; font-weight:300; margin:0; color:#414141; }
.ctarow { display:flex; gap:12px; padding:18px 32px 0; }
.cta-primary { background:#1c69d4; color:#fff; border-radius:3px; padding:12px 26px; font-size:15px; font-weight:500; }
.cta-outline { background:transparent; color:#414141; border:1px solid #414141; border-radius:3px; padding:12px 26px; font-size:15px; font-weight:500; }
.models { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#f2f2f2; margin-top:22px; }
.model { background:#fff; padding:18px; text-align:center; }
.model .badge { width:56px; height:32px; margin:0 auto 10px; border-radius:3px;
background:linear-gradient(135deg,#dfe2e6,#c7ccd1); }
.model h4 { font-size:15px; font-weight:500; margin:0 0 4px; color:#1c1c1c; }
.model p { font-size:13px; color:#707070; margin:0; }
</style></head>
<body>
<nav class="nav">
<div class="brand">BMW</div>
<div class="links"><span>Models</span><span>Electric</span><span>Configurator</span><span>Dealers</span></div>
<div class="icons">Search · Contact</div>
</nav>
<div class="hero">
<div class="herotxt">
<h1>The Neue Klasse. A new era begins.</h1>
<p>Precision engineering, reduced to what matters.</p>
</div>
<div class="road"></div>
<div class="carshape"><div class="wheel w1"></div><div class="wheel w2"></div></div>
</div>
<div class="ctarow">
<span class="cta-primary">Build Your Own</span>
<span class="cta-outline">Find a Dealer</span>
</div>
<div class="models">
<div class="model"><div class="badge"></div><h4>Sedan</h4><p>From $46,900</p></div>
<div class="model"><div class="badge"></div><h4>SUV (X)</h4><p>From $52,300</p></div>
<div class="model"><div class="badge"></div><h4>Electric (i)</h4><p>From $58,800</p></div>
<div class="model"><div class="badge"></div><h4>M Performance</h4><p>From $79,900</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a73e8; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a73e8; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #92baef; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d93025; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a73e8; color: #000000;
border: 1px solid #d93025; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a73e8; color: #f5f5f5;
border: 1px solid #3d88ea; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #92baef; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3968c9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#202124; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#fff; padding:22px 16px; position:relative; border-right:1px solid #DADCE0; }
.navtitle { font-size:20px; font-weight:500; margin-bottom:14px; }
.banner { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.daynum { width:52px; height:52px; border-radius:50%; background:#1A73E8; color:#fff; display:flex;
align-items:center; justify-content:center; font-size:22px; }
.daylbl { font-size:11px; font-weight:500; letter-spacing:0.5px; color:#5F6368; text-transform:uppercase; }
.evcard { display:flex; margin:0 0 8px; border-radius:4px; overflow:hidden; background:#fff; }
.bar { width:4px; flex-shrink:0; }
.evbody { flex:1; padding:10px 12px; background:#fff; }
.evtitle { font-size:14px; font-weight:500; }
.evtime { font-size:13px; color:#5F6368; font-variant-numeric:tabular-nums; }
.monthgrid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-top:16px; }
.mcell { text-align:center; font-size:11px; padding:5px 0; position:relative; }
.mcell .n { display:inline-block; width:20px; height:20px; line-height:20px; border-radius:50%; }
.mcell.today .n { background:#1A73E8; color:#fff; }
.mcell .dots { display:flex; gap:1px; justify-content:center; margin-top:1px; }
.mcell .dots span { width:3px; height:3px; border-radius:50%; }
.fab { position:absolute; bottom:20px; right:20px; width:52px; height:52px; border-radius:50%; background:#1A73E8;
color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px;
box-shadow:rgba(60,64,67,0.3) 0 4px 8px; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:500; letter-spacing:-0.2px; margin:0; }
.brand span { color:#1A73E8; }
.tag { font-size:14px; color:#5F6368; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:4px; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#5F6368; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:400; font-variant-numeric:tabular-nums; }
.typeblock .t2 { font-size:13px; color:#5F6368; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:500; padding:6px 12px; border-radius:4px;
background:#F1F3F4; border:1px solid #DADCE0; color:#5F6368; }
.footer { margin-top:auto; border-top:1px solid #DADCE0; padding-top:16px; font-size:11px; color:#80868B; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<p class="navtitle">May 2026</p>
<div class="banner"><div class="daynum">14</div><div><div class="daylbl">THU · MAY</div></div></div>
<div class="evcard"><div class="bar" style="background:#3F51B5"></div><div class="evbody"><div class="evtitle">Design Review</div><div class="evtime">9:00 – 9:30 AM</div></div></div>
<div class="evcard"><div class="bar" style="background:#188038"></div><div class="evbody"><div class="evtitle">Run 5k — Goal</div><div class="evtime">6:30 – 7:00 AM</div></div></div>
<div class="evcard"><div class="bar" style="background:#F9AB00"></div><div class="evbody"><div class="evtitle">Submit expense report</div><div class="evtime">All day · Task</div></div></div>
<div class="monthgrid">
<div class="mcell" style="color:#80868B">S</div><div class="mcell" style="color:#80868B">M</div><div class="mcell" style="color:#80868B">T</div><div class="mcell" style="color:#80868B">W</div><div class="mcell" style="color:#80868B">T</div><div class="mcell" style="color:#80868B">F</div><div class="mcell" style="color:#80868B">S</div>
<div class="mcell"><span class="n">10</span></div><div class="mcell"><span class="n">11</span><div class="dots"><span style="background:#188038"></span></div></div><div class="mcell"><span class="n">12</span></div><div class="mcell"><span class="n">13</span><div class="dots"><span style="background:#3F51B5"></span><span style="background:#F9AB00"></span></div></div><div class="mcell today"><span class="n">14</span><div class="dots"><span style="background:#3F51B5"></span></div></div><div class="mcell"><span class="n">15</span></div><div class="mcell"><span class="n">16</span></div>
</div>
<div class="fab">+</div>
</div>
<div class="info">
<div>
<h1 class="brand">Google Calendar (iOS)<span>.</span></h1>
<p class="tag">Material You density — a four-color event system, tabular time columns, and the FAB at Material Level 6.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#1A73E8"></div><small>#1A73E8</small></div>
<div class="sw"><div class="chip2" style="background:#D93025"></div><small>#D93025</small></div>
<div class="sw"><div class="chip2" style="background:#F9AB00"></div><small>#F9AB00</small></div>
<div class="sw"><div class="chip2" style="background:#188038"></div><small>#188038</small></div>
<div class="sw"><div class="chip2" style="background:#3F51B5"></div><small>#3F51B5</small></div>
</div>
<div class="typeblock">
<div class="t1">9:00 – 9:30 AM</div>
<div class="t2">Google Sans + SF Pro Text · tabular figures on every time and day number</div>
</div>
<div class="taglist">
<span>Schedule day banner</span><span>4pt left color bar</span><span>24-color calendar palette</span>
<span>Today = filled blue circle</span><span>Material dual shadow</span>
</div>
<div class="footer">White canvas #FFFFFF · avoid Bold — hierarchy comes from color, not weight</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #101010; color: #f2f2f2;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #101010; color: #f2f2f2;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.6px; margin: 0; color: #f2f2f2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 18px; margin: 0; color: #8b949e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 24px; background: #00d992; color: #101010;
border: none; border-radius: 6px; padding: {spacing.md} {spacing.lg};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 24px; background: #101010; color: #f2f2f2;
border: 1px solid #3d3a39; border-radius: 6px;
padding: {spacing.md} {spacing.lg}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background: #1a1a1a; color: #f2f2f2;
border: 1px solid #3d3a39; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b949e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 20px; background: #101010; color: #f2f2f2;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#101010; color:#f2f2f2; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #3d3a39; }
.brandwrap { display:flex; align-items:center; gap:8px; }
.bolt { width:16px; height:16px; color:#00d992; font-size:16px; line-height:1; }
.brand { font-size:15px; font-weight:600; color:#ffffff; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; color:#bdbdbd; }
.navcta { background:#00d992; color:#101010; border-radius:6px; padding:8px 16px; font-size:13px; font-weight:700; }
.hero { padding:34px 32px 24px; display:flex; gap:26px; align-items:center; }
.heroleft { flex:1; }
.status { display:inline-flex; align-items:center; gap:6px; border:1px solid #3d3a39; border-radius:999px;
padding:4px 12px; font-size:11px; color:#2fd6a1; margin-bottom:14px; }
.status .dot { width:6px; height:6px; border-radius:50%; background:#00d992; }
.hero h1 { font-size:32px; font-weight:600; line-height:1.12; margin:0 0 12px; color:#ffffff; max-width:400px; }
.hero p { font-size:13.5px; color:#bdbdbd; margin:0 0 18px; max-width:380px; }
.btnrow { display:flex; gap:10px; }
.btn { border-radius:6px; padding:9px 18px; font-size:13px; font-weight:600; }
.btn-g { background:#00d992; color:#101010; }
.btn-o { background:transparent; color:#f2f2f2; border:1px solid #3d3a39; }
.term { flex:1; background:#1a1a1a; border:1px solid #3d3a39; border-radius:10px; padding:0; overflow:hidden; }
.termbar { height:30px; display:flex; align-items:center; gap:6px; padding:0 12px; border-bottom:1px solid #3d3a39; }
.tdot { width:8px; height:8px; border-radius:50%; background:#3d3a39; }
.termbody { padding:14px 16px; font-size:12px; line-height:1.85; }
.termbody .g { color:#00d992; }
.termbody .m { color:#8b949e; }
.termbody .w { color:#f5f6f7; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:6px 32px 30px; }
.card { border:1px solid #3d3a39; border-radius:8px; padding:16px; background:#101010; }
.card .top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.card .pill { font-size:10px; color:#2fd6a1; border:1px solid #3d3a39; border-radius:999px; padding:2px 8px; }
.card h3 { font-size:14px; font-weight:600; margin:0 0 4px; color:#ffffff; }
.card p { font-size:11.5px; color:#8b949e; margin:0; line-height:1.4; }
</style></head>
<body>
<nav>
<div class="brandwrap"><span class="bolt">⚡</span><div class="brand">VoltAgent</div></div>
<div class="navlinks"><span>Docs</span><span>Agents</span><span>Observability</span><span>Pricing</span></div>
<div class="navcta">Get started</div>
</nav>
<div class="hero">
<div class="heroleft">
<div class="status"><span class="dot"></span>v1.4 now with voice agents</div>
<h1>Build AI agents with code, not drag and drop</h1>
<p>The open-source TypeScript framework for building, observing, and shipping production AI agents.</p>
<div class="btnrow"><button class="btn btn-g">npm create voltagent</button><button class="btn btn-o">Read the docs</button></div>
</div>
<div class="term">
<div class="termbar"><span class="tdot"></span><span class="tdot"></span><span class="tdot"></span></div>
<div class="termbody mono">
<span class="m">$</span> <span class="w">voltagent dev</span><br>
<span class="g">✓</span> <span class="m">Agent</span> supervisor <span class="g">ready</span><br>
<span class="m">→</span> tool: <span class="w">web_search</span><br>
<span class="m">→</span> tool: <span class="w">code_exec</span><br>
<span class="g">●</span> <span class="m">listening on :3141</span>
</div>
</div>
</div>
<div class="cards">
<div class="card"><div class="top"><h3>Agent graphs</h3><span class="pill">core</span></div><p>Compose supervisor and sub-agents into one traceable workflow.</p></div>
<div class="card"><div class="top"><h3>Observability</h3><span class="pill">console</span></div><p>Visual tracing for every tool call, token, and handoff.</p></div>
<div class="card"><div class="top"><h3>Voice + MCP</h3><span class="pill">beta</span></div><p>Native voice interaction and Model Context Protocol support.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; font-weight: 400; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: 0.14em; background: #cf2027; color: #ffffff;
border: none; border-radius: 0px; padding: 13px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: 0.14em; background: #ffffff; color: #121212;
border: 1px solid #cf2027; border-radius: 0px;
padding: 12px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.12em; background: #121212; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.announce{height:36px;background:#121212;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:0.4px;}
.nav{height:56px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid #dedede;}
.wordmark{font-size:17px;letter-spacing:0.22em;text-transform:uppercase;}
.navlinks{position:absolute;left:32px;top:50%;transform:translateY(-50%);display:flex;gap:22px;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;}
.icons{position:absolute;right:32px;top:50%;transform:translateY(-50%);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;}
.hero{display:flex;height:280px;}
.heroimg{width:50%;background:linear-gradient(135deg,#cf2027 0%,#121212 55%,#cf2027 100%);}
.herotext{width:50%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 44px;}
.herotext h1{font-family:Georgia,serif;font-size:38px;font-weight:400;line-height:1.15;margin:0 0 16px;}
.btn{background:#cf2027;color:#fff;font-size:12px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;padding:13px 28px;}
.filterrow{display:flex;gap:32px;padding:20px 32px 12px;border-bottom:1px solid #dedede;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#767676;}
.filterrow .active{color:#121212;border-bottom:2px solid #121212;padding-bottom:20px;}
.grid{display:flex;gap:0;padding:16px 32px;}
.card{flex:1;padding:8px;}
.thumb{aspect-ratio:1/1;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#121212;color:#fff;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;padding:3px 8px;}
.title{font-size:13px;margin-top:10px;}
.price{font-size:13px;color:#3a3a3a;margin-top:2px;}
</style>
<div class="announce">FREE SHIPPING ON ORDERS OVER $75 — NEW STACKS JUST ARRIVED</div>
<div class="nav">
<div class="navlinks"><div>Shop</div><div>Enamel</div><div>Bracelets</div></div>
<div class="wordmark">Roxanne Assoulin</div>
<div class="icons">Search Bag (2)</div>
</div>
<div class="hero">
<div class="heroimg"></div>
<div class="herotext">
<h1>Six enamel bangles.<br>One iconic stack.</h1>
<div class="btn">Shop the Stack</div>
</div>
</div>
<div class="filterrow"><div class="active">New Arrivals</div><div>Bangles</div><div>Necklaces</div><div>Sale</div></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#e8dcc8"><span class="badge">New</span></div><div class="title">Candy Stack Bangles</div><div class="price">$185</div></div>
<div class="card"><div class="thumb" style="background:#dce8dc"></div><div class="title">Best Friend Necklace</div><div class="price">$95</div></div>
<div class="card"><div class="thumb" style="background:#e8dce8"></div><div class="title">Enamel Bead Bracelet</div><div class="price">$65</div></div>
<div class="card"><div class="thumb" style="background:#dce4e8"><span class="badge">Sold Out</span></div><div class="title">Rainbow Chime Ring</div><div class="price">$75</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5865f2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5865f2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #aeb4f4; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4752c4; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: 1px solid #4752c4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5865f2; color: #f5f5f5;
border: 1px solid #717cf2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aeb4f4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5562eb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#313338; color:#DBDEE1; box-sizing:border-box;
font-family:"gg sans","Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; height:640px; }
.rail { width:72px; background:#1E1F22; display:flex; flex-direction:column; align-items:center; padding:12px 0; gap:8px; }
.rail .icon { width:48px; height:48px; border-radius:16px; background:linear-gradient(135deg,#5865F2,#EB459E);
display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; }
.rail .icon.plain { background:#2B2D31; border-radius:50%; }
.sidebar { width:240px; background:#2B2D31; display:flex; flex-direction:column; }
.sidebar .head { height:48px; display:flex; align-items:center; padding:0 16px; font-weight:600; font-size:16px;
color:#F2F3F5; border-bottom:1px solid #1E1F22; }
.sidebar .cat { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.02em; color:#949BA4;
padding:16px 16px 6px; }
.sidebar .chan { font-size:15px; color:#949BA4; padding:6px 16px; margin:0 8px; border-radius:4px; }
.sidebar .chan.active { background:rgba(78,80,88,0.6); color:#fff; }
.sidebar .chan b { font-weight:400; opacity:0.6; margin-right:4px; }
.main { flex:1; display:flex; flex-direction:column; }
.topbar { height:48px; display:flex; align-items:center; padding:0 16px; border-bottom:1px solid #1E1F22;
font-weight:600; color:#F2F3F5; font-size:15px; }
.topbar b { opacity:0.5; font-weight:400; margin-right:6px; }
.messages { flex:1; padding:16px; display:flex; flex-direction:column; gap:16px; }
.msg { display:flex; gap:12px; }
.msg .av { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#57F287,#5865F2); flex-shrink:0; }
.msg .body .name { font-size:16px; font-weight:600; color:#F2F3F5; }
.msg .body .name span { font-weight:400; color:#949BA4; font-size:12px; margin-left:8px; }
.msg .body p { margin:2px 0 0; font-size:16px; line-height:1.375; color:#DBDEE1; }
.embed { background:#2B2D31; border-left:4px solid #5865F2; border-radius:4px; padding:12px 16px; margin-top:6px;
max-width:400px; }
.embed .t { font-size:14px; font-weight:600; color:#00A8FC; }
.embed .d { font-size:13px; color:#949BA4; margin-top:4px; }
.composer { margin:0 16px 16px; background:#383A40; border-radius:8px; padding:11px 16px; font-size:16px; color:#6D6F78; }
</style></head>
<body>
<div class="shell">
<div class="rail">
<div class="icon">Discord</div>
<div class="icon plain">+</div>
<div class="icon plain">💬</div>
</div>
<div class="sidebar">
<div class="head">Discord Server</div>
<div class="cat">Information</div>
<div class="chan"><b>#</b>welcome</div>
<div class="chan"><b>#</b>rules</div>
<div class="cat">Text Channels</div>
<div class="chan active"><b>#</b>general</div>
<div class="chan"><b>#</b>show-and-tell</div>
<div class="chan"><b>#</b>off-topic</div>
</div>
<div class="main">
<div class="topbar"><b>#</b>general</div>
<div class="messages">
<div class="msg">
<div class="av"></div>
<div class="body">
<div class="name">Maya <span>Today at 9:41 AM</span></div>
<p>anyone up for game night later? thinking 8pm</p>
</div>
</div>
<div class="msg">
<div class="av"></div>
<div class="body">
<div class="name">Devon <span>Today at 9:44 AM</span></div>
<p>in. sending the invite link now</p>
<div class="embed"><div class="t">game-night-invite.gg</div><div class="d">Voice channel · starts 8:00 PM</div></div>
</div>
</div>
</div>
<div class="composer">Message #general</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.27; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ff8b01; color: #000000;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #121212;
border: 1px solid #ff8b01; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ff8b01; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; border-bottom:1px solid #eceef0; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:15px; color:#2b2b2b; }
.navlinks .active { color:#ff8b01; border-bottom:2px solid #ff8b01; padding-bottom:20px; margin-bottom:-21px; }
main { flex:1 1 auto; display:flex; gap:22px; padding:20px 30px; min-height:0; }
.left { flex:1; border-radius:12px; position:relative; min-height:0;
background:linear-gradient(150deg,#1a1a1a,#3a3a3a 60%, #ff8b01 140%); }
.left::after { content:''; position:absolute; left:20px; right:20px; bottom:20px; height:8px; border-radius:999px;
background:rgba(255,139,1,0.5); filter:blur(2px); }
.right { flex:1.1; display:flex; flex-direction:column; min-height:0; }
.kicker { font-size:12px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#256bc1; margin:0 0 6px; }
.title { font-size:24px; font-weight:700; margin:0 0 8px; }
.price { font-size:22px; font-weight:700; margin:0 0 10px; }
.desc { font-size:14px; color:#2b2b2b; margin:0 0 14px; line-height:1.5; }
.btnrow { display:flex; gap:10px; margin-bottom:16px; }
.btn-primary { background:#ff8b01; color:#fff; border:none; border-radius:8px; padding:14px 26px; font-weight:600; font-size:15px; }
.btn-secondary { background:#fff; color:#121212; border:2px solid #d9d9d9; border-radius:8px; padding:12px 24px; font-weight:600; font-size:15px; }
.steps { flex:1; display:flex; align-items:flex-start; gap:16px; min-height:0; }
.step { flex:1; text-align:center; }
.step .dot { width:32px; height:32px; border-radius:999px; background:#f7f7f7; color:#6a6a6a; display:flex;
align-items:center; justify-content:center; font-size:13px; font-weight:700; margin:0 auto 6px; }
.step.active .dot { background:#ff8b01; color:#fff; }
.step p { font-size:11px; color:#6a6a6a; margin:0; }
footer { flex:0 0 auto; height:56px; background:#121212; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; }
footer .links { display:flex; gap:16px; color:#929292; }
</style></head>
<body>
<nav>
<p class="brand">Anova Culinary</p>
<div class="navlinks"><span class="active">Precision Cooker</span><span>Combi Oven</span><span>Accessories</span><span>Recipes</span></div>
</nav>
<main>
<div class="left"></div>
<div class="right">
<p class="kicker">Precision Cooker Pro</p>
<h1 class="title">Sous vide, engineered.</h1>
<div class="price">$249.00</div>
<p class="desc">1200 watts of commercial-grade heating power with Wi-Fi control, so every steak comes out exactly medium-rare.</p>
<div class="btnrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">View Specs</button>
</div>
<div class="steps">
<div class="step active"><div class="dot">1</div><p>Attach</p></div>
<div class="step"><div class="dot">2</div><p>Set Temp</p></div>
<div class="step"><div class="dot">3</div><p>Seal</p></div>
<div class="step"><div class="dot">4</div><p>Sear</p></div>
</div>
</div>
</main>
<footer>
<span>© Anova Culinary</span>
<div class="links"><span>Warranty</span><span>App</span><span>Support</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: transparent; color: #121212;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #121212; color: #ffffff;
border: 1px solid #121212; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #121212;
border: 1px solid #c0c0c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #121212; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#121212; box-sizing:border-box; font-family:'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; padding:0 32px; border-bottom:1px solid #dedede; }
.brand { font-family:'EB Garamond', serif; font-size:22px; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:20px; margin-left:auto; }
.navlinks div { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.hero { padding:60px 32px; text-align:center; }
.hero h1 { font-family:'EB Garamond', serif; font-size:36px; font-weight:400; letter-spacing:-0.5px; margin:0 0 20px; }
.hero .cta { display:inline-block; background:transparent; border:1px solid #121212; color:#121212; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; padding:12px 24px; border-radius:8px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:0 32px 30px; }
.card { border:1px solid #dedede; margin:-1px 0 0 -1px; }
.img { aspect-ratio:1/1; position:relative; }
.g1 { background:linear-gradient(135deg,#1a1a1a,#3a3a3a); }
.g2 { background:linear-gradient(135deg,#e8e8e8,#c0c0c0); }
.g3 { background:linear-gradient(135deg,#0a0a0a,#2a2a2a); }
.badge { position:absolute; top:10px; left:10px; background:#121212; color:#fff; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:4px 8px; }
.info { padding:10px 16px; }
.name { font-size:14px; font-weight:600; }
.price { font-size:16px; font-weight:400; margin-top:4px; }
</style></head>
<body>
<nav>
<div class="brand">Finalmouse</div>
<div class="navlinks"><div>Shop</div><div>Support</div><div>Story</div></div>
</nav>
<div class="hero">
<h1>Art Objects That Happen to Be Mice</h1>
<div class="cta">Shop Collection</div>
</div>
<div class="grid">
<div class="card"><div class="img g1"><span class="badge">Sold Out</span></div><div class="info"><div class="name">Ultralight X</div><div class="price">$189.99</div></div></div>
<div class="card"><div class="img g2"></div><div class="info"><div class="name">Starlight-12</div><div class="price">$219.99</div></div></div>
<div class="card"><div class="img g3"><span class="badge">New</span></div><div class="info"><div class="name">Phantom</div><div class="price">$139.99</div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #404040;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #404040;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.18; margin: 0; color: #404040; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ee730a; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #404040;
border: 1px solid #ee730a; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #404040;
border: 1px solid #cfcfcf; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.2px; background: #ee730a; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>iBUYPOWER Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
background:#ffffff; color:#404040;
}
*{box-sizing:border-box;}
.util-bar{height:26px;background:#272727;display:flex;align-items:center;justify-content:flex-end;gap:18px;padding:0 24px;font-size:11px;color:#bfbfbf;letter-spacing:.2px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #ebebeb;}
.logo{font-size:20px;font-weight:800;color:#404040;letter-spacing:-.3px;}
.logo b{color:#ee730a;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#595959;}
.navlinks span.hot{color:#ee730a;}
.cta-mini{background:#ee730a;color:#fff;font-size:12px;font-weight:700;padding:8px 16px;border-radius:4px;}
.hero{height:210px;background:#272727;display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;}
.hero:after{content:"";position:absolute;right:-60px;top:-40px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,#ee730a55,#27272700 70%);}
.hero-copy{position:relative;z-index:1;max-width:430px;}
.hero-copy .eyebrow{color:#9bca3e;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;}
.hero-copy h1{color:#ffffff;font-size:30px;font-weight:800;line-height:1.15;margin:0 0 10px;}
.hero-copy p{color:#bfbfbf;font-size:13px;margin:0 0 14px;line-height:1.5;}
.hero-btn{display:inline-block;background:#ee730a;color:#fff;font-size:13px;font-weight:700;padding:11px 22px;border-radius:4px;}
.hero-rig{position:absolute;right:60px;top:24px;width:230px;height:162px;border-radius:8px;background:linear-gradient(160deg,#3a3a3a,#141414);border:1px solid #4a4a4a;}
.hero-rig:before{content:"";position:absolute;left:14px;top:14px;width:60px;height:134px;background:linear-gradient(180deg,#0051c3,#521010);border-radius:4px;opacity:.7;}
.hero-rig:after{content:"";position:absolute;right:16px;top:20px;width:150px;height:14px;border-radius:7px;background:#9bca3e;box-shadow:0 26px 0 -2px #ee730a,0 52px 0 -2px #0051c3;opacity:.85;}
.section{padding:16px 24px 0;}
.section-title{font-size:15px;font-weight:800;color:#404040;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;}
.section-title span{font-size:11px;color:#0051c3;font-weight:700;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#ffffff;border:1px solid #ebebeb;border-radius:4px;padding:10px;}
.card-img{height:74px;border-radius:4px;background:linear-gradient(145deg,#f7f7f7,#e6e6e6);border:1px solid #ebebeb;position:relative;margin-bottom:8px;}
.card-img i{position:absolute;left:8px;top:6px;font-size:9px;font-weight:800;color:#fff;background:#bd2426;padding:2px 6px;border-radius:3px;letter-spacing:.3px;}
.card-img .rig{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:52px;border-radius:3px;background:linear-gradient(160deg,#404040,#1c1c1c);}
.card-title{font-size:12px;font-weight:700;color:#404040;margin-bottom:6px;line-height:1.3;height:31px;overflow:hidden;}
.pills{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap;}
.pill{background:#ebebeb;color:#595959;font-size:9px;font-weight:600;padding:3px 7px;border-radius:9999px;}
.price-row{display:flex;align-items:baseline;gap:6px;}
.price{font-size:15px;font-weight:800;color:#404040;}
.price-old{font-size:11px;color:#737373;text-decoration:line-through;}
.price-drop{font-size:10px;color:#bd2426;font-weight:700;margin-left:auto;background:#fce6e6;padding:2px 6px;border-radius:3px;}
</style>
<div class="util-bar">Financing Available • 24/7 Support • Track Order</div>
<div class="nav">
<div class="logo">Ibuypower</div>
<div class="navlinks">
<span>DESKTOP</span><span>LAPTOP</span><span>PARTS</span><span class="hot">DEALS</span>
</div>
<div class="cta-mini">Build Yours</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="eyebrow">New Gen Rigs In Stock</div>
<h1>Power built for the win condition.</h1>
<p>Configure a desktop tuned for frame rate, thermals, and RGB — shipped and benchmarked before it reaches your desk.</p>
<div class="hero-btn">Start Your Build</div>
</div>
<div class="hero-rig"></div>
</div>
<div class="section">
<div class="section-title">Best Selling Desktops <span>Compare Specs →</span></div>
<div class="grid">
<div class="card">
<div class="card-img"><i>NEW</i><div class="rig"></div></div>
<div class="card-title">Slate MR Gaming PC — RTX Series</div>
<div class="pills"><span class="pill">CPU i7</span><span class="pill">32GB</span><span class="pill">1TB</span></div>
<div class="price-row"><span class="price">$1,799</span><span class="price-old">$1,999</span><span class="price-drop">-10%</span></div>
</div>
<div class="card">
<div class="card-img"><div class="rig"></div></div>
<div class="card-title">Trace 4 Mesh Tower — Liquid Cool</div>
<div class="pills"><span class="pill">CPU R7</span><span class="pill">16GB</span><span class="pill">1TB</span></div>
<div class="price-row"><span class="price">$1,349</span></div>
</div>
<div class="card">
<div class="card-img"><div class="rig"></div></div>
<div class="card-title">Element X Compact SFF Build</div>
<div class="pills"><span class="pill">CPU i5</span><span class="pill">16GB</span><span class="pill">512GB</span></div>
<div class="price-row"><span class="price">$1,099</span><span class="price-old">$1,249</span><span class="price-drop">-12%</span></div>
</div>
<div class="card">
<div class="card-img"><i>NEW</i><div class="rig"></div></div>
<div class="card-title">Enthusiast Pro Battlestation</div>
<div class="pills"><span class="pill">CPU i9</span><span class="pill">64GB</span><span class="pill">2TB</span></div>
<div class="price-row"><span class="price">$2,899</span></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #fbe548; color: #222222;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: transparent; color: #222222;
border: 1px solid #fbe548; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #222222; color: #fbe548;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#363636; box-sizing:border-box;
font-family:'Avenir Next',Avenir,-apple-system,Helvetica,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#363636; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:20px; font-weight:700; color:#fbe548; }
.navlinks { display:flex; gap:22px; font-size:15px; font-weight:500; color:#fff; }
.hero { height:220px; background:#363636; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.hero h1 { color:#fff; font-size:40px; font-weight:700; line-height:1.1; letter-spacing:-0.5px; margin:0 0 10px; max-width:420px; }
.hero p { color:#c9c9c9; font-size:15px; margin:0 0 16px; }
.btn-yellow { display:inline-block; background:#fbe548; color:#222; font-size:15px; font-weight:600; letter-spacing:0.2px;
padding:14px 28px; border-radius:8px; }
.monitor { width:200px; height:130px; border-radius:8px; background:linear-gradient(150deg,#111,#333); border:3px solid #222; position:relative; }
.monitor::before { content:''; position:absolute; inset:10px; border-radius:4px; background:linear-gradient(120deg,#00adef33,#fbe54833); }
.monitor::after { content:''; position:absolute; bottom:-14px; left:50%; transform:translateX(-50%); width:60px; height:8px; background:#222; border-radius:4px; }
.grid { display:flex; gap:16px; padding:20px 32px 0; }
.card { flex:1; background:#ffffff; border:1px solid #d4d4d4; border-radius:8px; padding:14px; position:relative; }
.card .imgbox { height:88px; background:#363636; border-radius:6px; margin-bottom:10px; position:relative; }
.spec-badge { position:absolute; bottom:8px; left:8px; background:#222; color:#fbe548; font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:0.5px; padding:3px 8px; border-radius:4px; }
.card .name { font-size:17px; font-weight:600; margin-bottom:4px; }
.card .price { font-size:24px; font-weight:700; color:#222; }
.pill { display:inline-block; margin-top:8px; font-size:12px; background:#099e4d; color:#fff; padding:3px 12px; border-radius:9999px; }
.feature-row { display:flex; gap:14px; padding:16px 32px 0; }
.feature { flex:1; background:#eeeeee; border-radius:12px; padding:14px; }
.feature b { color:#00adef; font-size:12px; text-transform:uppercase; letter-spacing:0.5px; }
.feature div.t { font-size:14px; font-weight:600; margin-top:4px; }
footer { position:absolute; bottom:0; left:0; right:0; height:0; }
.wrap { position:relative; height:640px; }
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="brand">Dough</div>
<div class="navlinks"><span>Monitors</span><span>Compare</span><span>Community</span><span>Support</span></div>
</nav>
<div class="hero">
<div>
<h1>Panels that don't cost a paycheck.</h1>
<p>4K, high refresh, and honest color accuracy — flagship specs, fair prices.</p>
<a class="btn-yellow">Shop Monitors</a>
</div>
<div class="monitor"></div>
</div>
<div class="grid">
<div class="card"><div class="imgbox"><span class="spec-badge">4K · 144Hz</span></div><div class="name">Dough Spectrum 27</div><div class="price">$449</div><div class="pill">In Stock</div></div>
<div class="card"><div class="imgbox"><span class="spec-badge">QHD · HDR600</span></div><div class="name">Dough Spectrum 32</div><div class="price">$599</div><div class="pill">In Stock</div></div>
<div class="card"><div class="imgbox"><span class="spec-badge">1080P · 240Hz</span></div><div class="name">Dough Spectrum 24 Fast</div><div class="price">$329</div><div class="pill" style="background:#7a7a7a;">Waitlist</div></div>
</div>
<div class="feature-row">
<div class="feature"><b>Panel Technology</b><div class="t">Fast IPS, factory calibrated</div></div>
<div class="feature"><b>Color Accuracy</b><div class="t">Delta E < 1 out of the box</div></div>
<div class="feature"><b>Response Time</b><div class="t">1ms GtG, VRR enabled</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f7f5; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f7f5; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.18; letter-spacing: -0.1px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.38; margin: 0; color: #54575b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #ffcf2a; color: #121212;
border: none; border-radius: 4px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.23; letter-spacing: 0.5px; background: transparent; color: #272d45;
border: 1px solid #272d45; border-radius: 4px;
padding: 12px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f8f7f5; color: #121212;
border: 1px solid #d3d4dd; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #54575b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.6px; background: #ffcf2a; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f7f5; font-family:'Helvetica Neue',Arial,sans-serif; color:#252525; }
*{box-sizing:border-box;}
.promo{height:30px;background:#ffcf2a;color:#121212;font-size:12px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;}
.nav{height:60px;background:#272d45;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#fff;}
.hero{height:186px;background:#001730;display:flex;align-items:center;padding:0 30px;}
.h1{font-size:38px;font-weight:700;letter-spacing:-0.3px;color:#fff;margin:0 0 10px;max-width:420px;line-height:1.15;}
.sub{font-size:14px;color:#c7cbe0;max-width:380px;}
.grid{display:flex;gap:14px;padding:16px 30px 0;}
.card{width:206px;background:#f7f7f8;border:1px solid #d3d4dd;border-radius:8px;padding:14px;position:relative;}
.thumb{height:100px;background:#f4f4f6;border-radius:4px;margin-bottom:10px;}
.badge{position:absolute;top:20px;left:20px;background:#ffcf2a;color:#121212;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:3px 8px;border-radius:2px;}
.ptitle{font-size:16px;font-weight:600;color:#121212;}
.prow{display:flex;gap:8px;align-items:baseline;margin-top:6px;}
.pwas{font-size:14px;color:#757575;text-decoration:line-through;}
.psale{font-size:22px;font-weight:700;color:#ffcf2a;-webkit-text-stroke:0.4px #121212;}
.cta{background:#0078b5;color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;text-align:center;padding:10px;border-radius:4px;margin-top:8px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:52px;background:#001730;border-top:2px solid #ffcf2a;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;color:#e0e2e8;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="promo">FREE SHIPPING ON ORDERS OVER $99</div>
<div class="nav">
<div class="logo">Rep Fitness</div>
<div class="navlinks"><div>Racks</div><div>Barbells</div><div>Plates</div><div>Flooring</div></div>
</div>
<div class="hero">
<div>
<div class="h1">Read the numbers first.</div>
<div class="sub">Power racks and barbells built for the person about to spend $1,200 and wants the spec sheet before the story.</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#0078b5,#001730)"></div><div class="ptitle">PR-5000 Power Rack</div><div class="prow"><div class="pwas">$1,299</div><div class="psale">$999</div></div><div class="cta">Add to Cart</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#272d45,#0078b5)"></div><div class="ptitle">Bella Bar 2.0</div><div class="prow"><div class="psale" style="font-size:18px;color:#121212;-webkit-text-stroke:0">$289</div></div><div class="cta">Add to Cart</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#001730,#272d45)"></div><div class="ptitle">Colored Bumper Plates</div><div class="prow"><div class="psale" style="font-size:18px;color:#121212;-webkit-text-stroke:0">$3.10/lb</div></div><div class="cta">Add to Cart</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0078b5,#272d45)"></div><div class="ptitle">Interlocking Floor Tiles</div><div class="prow"><div class="psale" style="font-size:18px;color:#121212;-webkit-text-stroke:0">$3.99</div></div><div class="cta">Add to Cart</div></div>
</div>
<div class="footer"><span>© Rep Fitness — precision instrument, workshop atmosphere</span><span>Rated 1,000 lb. · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #919da9; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #1e22aa; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #f9fafb; color: #1e22aa;
border: 1px solid #1e22aa; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9fafb; color: #222222;
border: 1px solid #c3c4c5; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #919da9; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #dadcf0; color: #1e22aa;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; color:#444749; }
*{box-sizing:border-box;}
.nav{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dedede;}
.logo{font-family:'Lexend Deca',sans-serif;font-size:20px;font-weight:700;color:#1e22aa;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;color:#222222;}
.navcta{background:#1e22aa;color:#fff;font-size:12px;font-weight:600;padding:11px 20px;border-radius:9999px;}
.hero{height:250px;display:flex;align-items:center;padding:0 36px;background:#eeeeee;}
.herotext{width:430px;}
.badge{display:inline-flex;align-items:center;background:#fbcd0a;color:#1e22aa;font-size:11px;font-weight:700;padding:4px 12px;border-radius:9999px;margin-bottom:14px;}
.headline{font-family:'Lexend Deca',sans-serif;font-size:30px;font-weight:700;color:#1e22aa;margin-bottom:12px;line-height:1.25;}
.sub{font-size:14px;color:#444749;margin-bottom:20px;max-width:340px;}
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 30px;background:#1e22aa;color:#fff;font-size:14px;font-weight:600;border-radius:9999px;width:fit-content;}
.mouse{width:250px;height:200px;margin-left:60px;position:relative;}
.mbody{position:absolute;left:70px;top:15px;width:110px;height:170px;border-radius:40% 40% 45% 45%;background:linear-gradient(160deg,#1e22aa,#151880);}
.mled{position:absolute;left:118px;top:60px;width:14px;height:14px;border-radius:50%;background:#fbcd0a;box-shadow:0 0 16px #fbcd0a;}
.sec{padding:20px 36px 0;}
.sectitle{font-family:'Lexend Deca',sans-serif;font-size:16px;font-weight:600;color:#222;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border-radius:6px;padding:12px;position:relative;}
.tag{position:absolute;top:8px;left:8px;background:#fbcd0a;color:#1e22aa;font-size:9px;font-weight:700;padding:2px 8px;border-radius:9999px;}
.thumb{height:88px;border-radius:6px;margin-bottom:10px;}
.pname{font-size:13px;font-weight:600;color:#222;}
.pprice{font-size:13px;color:#1e22aa;font-weight:700;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Ninjutso</div>
<div class="navlinks"><span>Mice</span><span>Grip Tape</span><span>Community</span></div>
<div class="navcta">Join Discord</div>
</div>
<div class="hero">
<div class="herotext">
<div class="badge">From Community, For Community</div>
<div class="headline">Built by the players who compete on it.</div>
<div class="sub">Ultralight performance mice tuned with feedback from the community, not a marketing brief.</div>
<div class="btn">Shop Mice</div>
</div>
<div class="mouse"><div class="mbody"></div><div class="mled"></div></div>
</div>
<div class="sec">
<div class="sectitle">Featured Mice</div>
<div class="grid">
<div class="card"><div class="tag">Pre-Order</div><div class="thumb" style="background:linear-gradient(135deg,#1e22aa,#222222)"></div><div class="pname">Sova Wireless</div><div class="pprice">$79.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#222222,#1e22aa)"></div><div class="pname">Origin One</div><div class="pprice">$69.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#919da9,#1e22aa)"></div><div class="pname">Katana Pro Grip Tape</div><div class="pprice">$9.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1e22aa,#151880)"></div><div class="pname">Sova Skates Set</div><div class="pprice">$6.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #9d79b3; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #ffffff; color: #9d79b3;
border: 1px solid #9d79b3; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1c1c1c;
border: 1px solid #cfcfcf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #e3dee6; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#eeeeee; color:#303030; font-family:'Nunito Sans',Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box;}
.promo{height:26px;background:#9d79b3;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.nav{height:60px;background:#1c1c1c;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-family:Baskerville,Georgia,serif;font-size:20px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#fff;}
.navlinks span.active{border-bottom:2px solid #9d79b3;padding-bottom:4px;}
.hero{background:#1c1c1c;color:#fff;min-height:220px;display:flex;align-items:center;padding:0 32px;background-image:linear-gradient(to right, rgba(28,28,28,.85), rgba(28,28,28,.3));}
.hero h1{font-family:Baskerville,Georgia,serif;font-size:44px;font-weight:400;line-height:1.15;margin:0 0 10px;}
.hero p{font-size:14px;color:#cfcfcf;margin:0 0 16px;max-width:380px;}
.cta{display:inline-block;background:#9d79b3;color:#fff;font-weight:700;font-size:14px;letter-spacing:.5px;padding:12px 26px;border-radius:8px;}
.section{padding:22px 32px;background:#eeeeee;}
.grid{display:flex;gap:16px;}
.card{flex:1;background:#fff;border:1px solid #cfcfcf;border-radius:12px;padding:12px;position:relative;box-shadow:0 2px 8px rgba(28,28,28,.08);}
.badge{position:absolute;top:10px;left:10px;background:#9d79b3;color:#fff;font-size:10px;text-transform:uppercase;letter-spacing:.8px;font-weight:700;padding:3px 8px;border-radius:4px;}
.card .img{aspect-ratio:4/3;background:#eeeeee;border-radius:8px;height:100px;margin-bottom:10px;}
.g1{background:radial-gradient(circle,#f1e8c4,#82559f 120%);}
.g2{background:radial-gradient(circle,#fff6dc,#554163 130%);}
.g3{background:radial-gradient(circle,#e9dcf0,#1c1c1c 130%);}
.card h3{font-size:15px;font-weight:700;margin:0 0 4px;}
.card .price{font-size:16px;font-weight:700;}
</style>
<div class="promo">FREE SHIPPING OVER $99 — NEW LOW VOLTAGE LINE LAUNCHED</div>
<div class="nav">
<div class="logo">Dekor Lighting</div>
<div class="navlinks"><span class="active">Deck Lights</span><span>Landscape</span><span>Guides</span><span>Support</span></div>
</div>
<div class="hero">
<div>
<h1>Light your outdoors like a room.</h1>
<p>Precision-engineered deck and landscape fixtures, finished like furniture.</p>
<a class="cta">Shop Fixtures</a>
</div>
</div>
<div class="section">
<div class="grid">
<div class="card"><span class="badge">Best Seller</span><div class="img g1"></div><h3>Recessed Deck Light</h3><div class="price">$34.99</div></div>
<div class="card"><span class="badge">New</span><div class="img g2"></div><h3>Riser Post Cap</h3><div class="price">$28.50</div></div>
<div class="card"><span class="badge">Sale</span><div class="img g3"></div><h3>Low-Voltage Kit</h3><div class="price">$149.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0c0c0d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0c0c0d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.2; margin: 0; color: #0c0c0d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ac1a1a; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #ac1a1a;
border: 1px solid #ac1a1a; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #dedede; color: #0c0c0d;
border: 1px solid #c7c7c7; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #002391; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Gaggia</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'poynter-gothic-text',sans-serif; color:#1f1f1f; }
*{box-sizing:border-box;}
.nav{height:72px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #1f1f1f;}
.logo{font-family:'poynter-gothic-text-condense',sans-serif;font-size:24px;font-weight:700;color:#ac1a1a;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;color:#e4e5e6;}
.hero{background:#121212;color:#e4e5e6;padding:44px 32px;min-height:230px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}
h1{font-family:'poynter-gothic-text-condense',sans-serif;font-size:56px;font-weight:700;line-height:1.0;letter-spacing:-1px;margin:0 0 12px;}
.sub{font-size:16px;color:#bcbcbc;margin:0 0 22px;}
.cta{background:#ac1a1a;color:#fff;border:none;border-radius:4px;padding:14px 32px;font-size:15px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.section{padding:24px 32px 0;}
.section h2{font-family:'poynter-gothic-text-condense',sans-serif;font-size:26px;font-weight:700;margin:0 0 16px;}
.filters{display:flex;gap:20px;margin-bottom:16px;font-size:12px;color:#1f1f1f;}
.filters span.active{color:#ac1a1a;border-bottom:2px solid #ac1a1a;padding-bottom:6px;}
.grid{display:flex;gap:16px;}
.card{flex:1;background:#dedede;border-radius:8px;padding:16px;}
.card-img{background:#c7c7c7;border-radius:4px;height:100px;position:relative;display:flex;align-items:center;justify-content:center;}
.machine{width:56px;height:70px;background:linear-gradient(160deg,#8a8a8a,#1f1f1f);border-radius:4px;position:relative;}
.machine::before{content:'';position:absolute;top:-8px;left:14px;width:28px;height:10px;background:#1f1f1f;border-radius:2px;}
.machine-badge{position:absolute;top:8px;left:8px;background:#002391;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;padding:4px 10px;border-radius:4px;}
.card-title{font-size:16px;font-weight:600;margin-top:12px;}
.card-sub{font-size:13px;color:#1f1f1f;margin-top:2px;}
.card-price{font-family:'poynter-gothic-text-condense',sans-serif;font-size:24px;font-weight:700;color:#ac1a1a;margin-top:8px;}
</style>
<div class="nav">
<div class="logo">Gaggia</div>
<div class="navlinks"><span>Classic</span><span>Semi-Auto</span><span>Super-Auto</span><span>Accessories</span></div>
</div>
<div class="hero">
<h1>Pure Espresso</h1>
<p class="sub">Italian heritage in every cup. Precision-built machines since 1947.</p>
<button class="cta">Shop Machines</button>
</div>
<div class="section">
<h2>Featured Machines</h2>
<div class="filters"><span class="active">All</span><span>Classic</span><span>Semi-Auto</span><span>Super-Auto</span></div>
<div class="grid">
<div class="card"><div class="card-img"><div class="machine-badge">Classic</div><div class="machine"></div></div><div class="card-title">Classic Pro</div><div class="card-sub">Semi-automatic · 3-way valve</div><div class="card-price">$549</div></div>
<div class="card"><div class="card-img"><div class="machine-badge">Super-Auto</div><div class="machine" style="background:linear-gradient(160deg,#bcbcbc,#333);"></div></div><div class="card-title">Brera</div><div class="card-sub">Automatic milk frother</div><div class="card-price">$899</div></div>
<div class="card"><div class="card-img"><div class="machine-badge">Classic</div><div class="machine"></div></div><div class="card-title">Accademia</div><div class="card-sub">Manual · Commercial grade</div><div class="card-price">$1,299</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ffc20c; color: #1a1a1a;
border: none; border-radius: 8px; padding: 13px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #1a1a1a;
border: 1px solid #ffc20c; border-radius: 8px;
padding: 12px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.8px; background: #ffc20c; color: #1a1a1a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:'Isidora','Montserrat',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
background:#ffffff; border-bottom:1px solid #dde1e3; }
.brand { font-size:19px; font-weight:800; color:#1a1a1a; }
.brand span { color:#ffc20c; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#3d3d3d; font-weight:600; }
.cart { background:#ffc20c; color:#1a1a1a; font-size:12px; font-weight:800; padding:7px 14px; border-radius:9999px; }
main { display:flex; height:578px; }
.gallery { width:400px; background:#f7f7f7; position:relative; display:flex; align-items:center; justify-content:center; }
.planner { width:200px; height:260px; background:#088043; border-radius:8px; position:relative;
box-shadow:0 20px 40px rgba(0,0,0,0.16); }
.planner .cover-title { position:absolute; top:34px; left:20px; right:20px; color:#fff; font-size:14px;
font-weight:800; }
.planner .ring { position:absolute; left:14px; top:20px; bottom:20px; width:6px; display:flex;
flex-direction:column; justify-content:space-between; }
.ring i { display:block; width:6px; height:6px; border-radius:50%; background:#fff; opacity:0.7; }
.dot { position:absolute; width:34px; height:34px; border-radius:50%; }
.dot.a { background:#92d9e1; top:100px; right:-16px; }
.dot.b { background:#e4c0e9; bottom:24px; right:16px; width:22px; height:22px; }
.dot.c { background:#ffbe2f; top:-16px; left:40px; width:26px; height:26px; }
.info { flex:1; padding:30px 38px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#088043; }
h1 { font-size:22px; font-weight:800; margin:0; line-height:1.28; }
.desc { font-size:13px; color:#3d3d3d; line-height:1.55; max-width:340px; }
.swatch-row { display:flex; gap:8px; }
.swatch { width:28px; height:28px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #dde1e3; }
.swatch.on { box-shadow:0 0 0 2px #1a1a1a; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:800; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#ffc20c; color:#1a1a1a; border:none; border-radius:9999px; padding:13px 18px;
font-size:14px; font-weight:800; }
.btn-outline { border:2px solid #1a1a1a; color:#1a1a1a; background:#fff; border-radius:9999px; padding:10.5px 16px;
font-size:12.5px; font-weight:800; white-space:nowrap; }
.meta { font-size:11px; color:#a4afb4; }
</style></head>
<body>
<nav>
<div class="brand">Agendio<span>.</span></div>
<div class="navlinks"><span>Design Yours</span><span>Layouts</span><span>Covers</span><span>Classroom</span></div>
<div class="cart">Cart · 1</div>
</nav>
<main>
<div class="gallery">
<div class="dot a"></div><div class="dot b"></div><div class="dot c"></div>
<div class="planner"><div class="ring"><i></i><i></i><i></i><i></i><i></i></div>
<div class="cover-title">Ms. Alvarez's<br>Class Planner</div></div>
</div>
<div class="info">
<span class="cat">Custom Teacher Planner</span>
<h1>Design Your Own Agendio Planner</h1>
<p class="desc">Pick your layout, cover color, and add-ons — every planner is built page-by-page for exactly how you teach.</p>
<div class="swatch-row">
<div class="swatch on" style="background:#088043"></div>
<div class="swatch" style="background:#92d9e1"></div>
<div class="swatch" style="background:#e4c0e9"></div>
<div class="swatch" style="background:#ff5f57"></div>
<div class="swatch" style="background:#ffbe2f"></div>
</div>
<div class="price-row"><span class="price">$42.00</span></div>
<div class="btn-row">
<button class="btn-primary">Continue Customizing</button>
<button class="btn-outline">Save Draft</button>
</div>
<span class="meta">Ships in 5–7 business days</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #191919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #191919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.27; letter-spacing: -0.1px; margin: 0; color: #191919; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #191919;
border: 1px solid #108474; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #191919;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.4px; background: #108474; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Figtree','Avenir Next',sans-serif; background:#ffffff; color:#191919; }
*{box-sizing:border-box;}
.annbar{height:32px;background:#108474;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #eaeceb;}
.logo{font-size:19px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:500;}
.hero{height:260px;display:flex;align-items:center;padding:0 44px;background:#f8f8f8;}
.left{width:48%;}
.left .cat{font-family:Georgia,serif;font-style:italic;font-size:20px;color:#108474;margin-bottom:8px;}
.left h1{font-size:32px;font-weight:500;line-height:1.2;margin:0 0 14px;font-family:Georgia,serif;}
.left p{font-size:15px;color:#545454;max-width:320px;margin:0 0 18px;}
.btn{display:inline-block;background:#108474;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;border-radius:8px;}
.right{width:48%;height:190px;border-radius:12px;background:linear-gradient(135deg,#8a5a2e,#c89b6a 60%);position:relative;}
.right:before{content:'';position:absolute;left:30%;top:30%;width:60px;height:100px;border-radius:8px;background:rgba(255,255,255,.25);}
.section{padding:22px 44px 0;}
.sectitle{font-size:20px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#f8f8f8;border-radius:12px;overflow:hidden;}
.thumb{height:100px;background:linear-gradient(135deg,#a97c50,#6b4a2f);}
.cbody{padding:12px;}
.ptitle{font-size:16px;font-weight:600;}
.pprice{font-size:18px;font-weight:700;margin-top:4px;}
.eco{display:inline-block;background:#108474;color:#fff;font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:3px 7px;border-radius:4px;margin-top:6px;}
</style>
<div class="annbar">CO₂ Neutral Shipping on Every Order</div>
<div class="nav">
<div class="logo">Woodcessories</div>
<div class="navlinks"><div>Cases</div><div>Sleeves</div><div>Sustainability</div></div>
</div>
<div class="hero">
<div class="left">
<div class="cat">Real Walnut Wood</div>
<h1>Tech accessories the planet approves of.</h1>
<p>Walnut-grain cases and cork sleeves that offset carbon with every purchase.</p>
<div class="btn">Shop Now</div>
</div>
<div class="right"></div>
</div>
<div class="section">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="cbody"><div class="ptitle">Walnut iPhone Case</div><div class="pprice">$39.90</div><div class="eco">Plastic-Free</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4a3524,#2b1e15)"></div><div class="cbody"><div class="ptitle">Cork AirPods Sleeve</div><div class="pprice">$24.90</div><div class="eco">CO2 Neutral</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#6b5a3f,#a9825a)"></div><div class="cbody"><div class="ptitle">Bamboo Watch Band</div><div class="pprice">$44.90</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #747d88; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #2ea3f2; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #313131;
border: 1px solid #2ea3f2; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #3e3e3e;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #747d88; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c37cc6; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f7; color:#313131; box-sizing:border-box;
font-family:'Montserrat','Poppins',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#fff; }
.brand { font-size:19px; font-weight:700; color:#2ea3f2; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#3e3e3e; }
.btn-primary { background:#2ea3f2; color:#fff; border:none; border-radius:8px; padding:11px 20px; font-size:13px; font-weight:600; }
main { display:flex; height:calc(640px - 70px - 42px); }
.gallery { width:380px; background:#f4f4f4; position:relative; display:flex; align-items:center; justify-content:center; }
.toy { width:170px; height:150px; border-radius:16px; background:#7cc68d; position:relative; }
.toy::before { content:''; position:absolute; top:-30px; left:30px; width:60px; height:60px; border-radius:16px; background:#c37cc6; transform:rotate(12deg); }
.toy::after { content:''; position:absolute; bottom:-24px; right:20px; width:70px; height:50px; border-radius:14px; background:#edb059; transform:rotate(-8deg); }
.badge-eco { position:absolute; top:20px; left:20px; background:#7cc68d; color:#fff; font-size:11px; font-weight:600; padding:4px 10px; border-radius:8px; }
.info { flex:1; padding:28px 32px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:12px; color:#747d88; text-transform:uppercase; letter-spacing:0.4px; }
h1 { font-family:'Open Sans',Arial,sans-serif; font-size:22px; font-weight:700; margin:0; }
.stars { color:#f5a623; font-size:13px; }
.price { font-size:21px; font-weight:700; color:#2ea3f2; }
.desc { font-family:'Open Sans',Arial,sans-serif; font-size:13px; color:#3e3e3e; line-height:1.55; max-width:360px; }
.age { display:flex; gap:8px; }
.agepill { background:#f4f4f4; border-radius:9999px; padding:6px 14px; font-size:12px; color:#3e3e3e; }
.certs { display:flex; gap:8px; font-size:11px; color:#747d88; }
.cert { background:#fff; border:1px solid #d9d9d9; border-radius:6px; padding:5px 10px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#2ea3f2; color:#fff; border:none; border-radius:8px; padding:13px; font-size:14px; font-weight:700; }
.btn-sec { background:#fff; color:#3e3e3e; border:1px solid #d9d9d9; border-radius:8px; padding:13px 16px; font-size:13px; font-weight:600; }
footer { padding:11px 32px; border-top:1px solid #e2e2e2; font-size:11px; color:#747d88; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Bigjigs Toys</div>
<div class="navlinks"><span>Wooden Toys</span><span>Games</span><span>Nursery</span><span>Outdoor</span></div>
<button class="btn-primary">Shop All</button>
</nav>
<main>
<div class="gallery"><span class="badge-eco">FSC Certified Wood</span><div class="toy"></div></div>
<div class="info">
<span class="cat">Wooden Stacking Toy</span>
<h1>Rainbow Ring Stacker</h1>
<div class="stars">★★★★★ 4.8 (146 reviews)</div>
<div class="price">£16.99</div>
<p class="desc">Hand-finished beechwood pieces, non-toxic paint, and rounded edges — built for small hands and long playrooms.</p>
<div class="age"><span class="agepill">Ages 12m+</span><span class="agepill">6 pieces</span></div>
<div class="certs"><span class="cert">EN71 Safety Tested</span><span class="cert">FSC Wood</span></div>
<div class="btn-row">
<button class="btn-add">Add to Cart</button>
<button class="btn-sec">Save for Later</button>
</div>
</div>
</main>
<footer><span>© Bigjigs Toys</span><span>Creating perfect playrooms</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #2d7e34; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #2d7e34;
border: 1px solid #2d7e34; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.8px; background: #2d7e34; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Montserrat',Arial,sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dddddd;}
.logo{font-size:19px;font-weight:700;color:#2d7e34;}
.navlinks{display:flex;gap:16px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;color:#333333;}
.search{background:#f8f8f8;border:1px solid #dddddd;font-size:11px;color:#666;padding:7px 14px;border-radius:4px;}
.hero{height:210px;display:flex;align-items:center;padding:0 36px;background:#eef7ef;position:relative;overflow:hidden;}
.panelgraphic{position:absolute;right:60px;top:24px;width:200px;height:160px;background:repeating-linear-gradient(90deg,rgba(45,126,52,0.25) 0 26px,rgba(255,255,255,0.65) 26px 30px);border-radius:4px;border:2px solid #2d7e34;}
.panelgraphic:before{content:'';position:absolute;left:0;top:0;right:0;height:30px;background:linear-gradient(180deg,rgba(255,255,255,0.75),transparent);}
.herotext{max-width:400px;position:relative;z-index:2;}
.h1{font-size:30px;font-weight:700;line-height:1.2;letter-spacing:-0.3px;margin:0 0 10px;color:#1a1a1a;}
.sub{font-size:13px;color:#333;line-height:1.5;margin:0 0 16px;max-width:320px;}
.btn{display:inline-block;background:#2d7e34;color:#fff;font-size:13px;font-weight:700;padding:11px 24px;border-radius:4px;}
.grid{display:flex;gap:14px;padding:16px 36px 0;}
.card{width:196px;background:#fff;border:1px solid #dddddd;border-radius:4px;overflow:hidden;}
.thumb{height:88px;position:relative;}
.newbadge{position:absolute;top:6px;left:6px;background:#e07c24;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 7px;border-radius:2px;}
.cbody{padding:10px 12px;}
.model{font-size:10px;color:#999;text-transform:uppercase;letter-spacing:0.4px;margin:0 0 2px;}
.ctitle{font-size:13px;font-weight:700;margin:0 0 4px;}
.cprice{font-size:14px;font-weight:700;color:#2d7e34;margin:0;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#1a2e1b;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:11px;color:#c8ddc9;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Palram</div>
<div class="navlinks"><span>Greenhouses</span><span>Sheds</span><span>Panels</span><span>Pergolas</span><span>Support</span></div>
<div class="search">Search by model #</div>
</div>
<div class="hero">
<div class="panelgraphic"></div>
<div class="herotext">
<div class="h1">Diffused light, engineered.</div>
<div class="sub">Twin-wall polycarbonate greenhouses and sheds — extruding weatherproof structures since 1963.</div>
<div class="btn">Compare Models</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2d7e34,#e8f5e9)"><div class="newbadge">New SKU</div></div><div class="cbody"><div class="model">Model HG5008</div><div class="ctitle">Hybrid 6x8 Greenhouse</div><div class="cprice">$599</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1e5c24,#eef7ef)"></div><div class="cbody"><div class="model">Model SK8410</div><div class="ctitle">SkyLight 8x10 Storage</div><div class="cprice">$799</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e07c24,#eef7ef)"></div><div class="cbody"><div class="model">Model PN4X8</div><div class="ctitle">Corrugated Panel, 4x8</div><div class="cprice">$49</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2d7e34,#1a1a1a)"></div><div class="cbody"><div class="model">Model FT1012</div><div class="ctitle">Feria 10x12 Greenhouse</div><div class="cprice">$1,199</div></div></div>
</div>
<div class="footer"><span>Since 1963 · Made to Spec</span><span>10-Year Structural Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f8; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f8; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #f4af23; color: #121212;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #f7f7f8; color: #121212;
border: 1px solid #f4af23; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f7f7f8; color: #121212;
border: 1px solid #bebebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.3px; background: #2a73e6; color: #f7f7f8;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f7f7f8; font-family:'Assistant','Figtree',Arial,sans-serif; color:#121212;
}
*{box-sizing:border-box;}
.nav{height:64px; background:#fff; display:flex; align-items:center; padding:0 28px; border-bottom:1px solid #eee;}
.logo{font-family:'Gilroy','Assistant',sans-serif; font-size:23px; font-weight:700; color:#272d45;}
.navlinks{display:flex; gap:20px; margin-left:32px; font-size:13px; font-weight:600; color:#676986;}
.navcta{margin-left:auto; background:#f4af23; color:#121212; padding:10px 20px; border-radius:8px; font-size:12px; font-weight:700;}
.hero{display:flex; align-items:center; gap:30px; padding:24px 28px; background:#272d45;}
.heroText{flex:1;}
.heroText .eyebrow{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#f4af23; font-weight:700; margin-bottom:10px;}
.heroText h1{font-family:'Gilroy','Assistant',sans-serif; font-weight:700; font-size:32px; line-height:1.2; margin:0 0 12px; color:#fff; max-width:400px;}
.heroText p{font-size:14px; color:#c3c6de; line-height:1.5; max-width:380px; margin:0 0 16px;}
.heroBtn{display:inline-block; background:#f4af23; color:#121212; padding:12px 26px; border-radius:8px; font-size:13px; font-weight:700;}
.heroImg{width:230px; height:160px; border-radius:10px; background:radial-gradient(circle at 40% 30%,#fff2cc,#f4af23 70%); flex-shrink:0; position:relative;}
.heroImg::after{content:''; position:absolute; left:25%; top:20%; width:50%; height:50%; border-radius:50%; background:#2a73e6; opacity:.25;}
.section{padding:14px 28px 0;}
.sectitle{font-size:19px; font-weight:700; margin:0 0 12px; color:#121212;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.card{background:#fff; border-radius:8px; padding:9px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.05);}
.thumb{height:78px; border-radius:8px; margin-bottom:8px; position:relative;}
.t1{background:linear-gradient(135deg,#f4af23,#ffd685);}
.t2{background:linear-gradient(135deg,#2a73e6,#8fb7f5);}
.t3{background:linear-gradient(135deg,#272d45,#4a5178);}
.t4{background:linear-gradient(135deg,#f4af23,#e88a1f);}
.badge{position:absolute; top:5px; left:5px; background:#f4af23; color:#121212; font-size:8px; font-weight:700; padding:2px 6px; border-radius:4px;}
.pname{font-size:12px; font-weight:600; margin-bottom:3px;}
.pprice{font-size:12px; color:#272d45; font-weight:700;}
.footer{position:absolute; bottom:0; left:0; right:0; background:#272d45; color:#c3c6de; font-size:10px; text-align:center; padding:8px 0;}
</style>
<div class="nav">
<div class="logo">Hearthsong</div>
<div class="navlinks"><span>Outdoor Play</span><span>Games</span><span>Nostalgia</span><span>Gifts</span></div>
<div class="navcta">Shop Sale</div>
</div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">Back-to-Play Sale</div>
<h1>A Digital Toy Store, Bright & Nostalgic</h1>
<p>Classic outdoor play, imaginative games, and childhood favorites — the kind of toys that make backyards magical.</p>
<div class="heroBtn">Shop Bestsellers</div>
</div>
<div class="heroImg"><span class="badge">Sale</span></div>
</div>
<div class="section">
<div class="sectitle">Outdoor Favorites</div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="badge">Sale</span></div><div class="pname">Giant Rainbow Kite</div><div class="pprice">$29.99</div></div>
<div class="card"><div class="thumb t2"></div><div class="pname">Backyard Croquet Set</div><div class="pprice">$44.99</div></div>
<div class="card"><div class="thumb t3"></div><div class="pname">Wooden Marble Run</div><div class="pprice">$54.99</div></div>
<div class="card"><div class="thumb t4"></div><div class="pname">Glow-in-Dark Bug Jar</div><div class="pprice">$16.99</div></div>
</div>
</div>
<div class="footer">© Hearthsong — Bringing Childhood Wonder Home Since 1983</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:64px; background:#000000; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { color:#ffffff; font-size:20px; font-weight:700; }
.capsule-dark { background:#000000; color:#ffffff; border:1px solid rgba(255,255,255,0.3); border-radius:999px;
padding:10px 12px; font-size:14px; font-weight:500; }
.capsule-light { background:#ffffff; color:#000000; border-radius:999px; padding:10px 12px; font-size:14px; font-weight:500; }
.navright { display:flex; gap:10px; }
.hero { padding:44px 40px 20px; }
h1 { font-size:52px; font-weight:700; line-height:1.23; margin:0 0 20px; max-width:600px; }
.softrow { display:flex; gap:12px; }
.soft { background:#efefef; color:#000000; border-radius:999px; padding:14px 16px; font-size:16px; font-weight:500; }
.menu { margin:24px 40px 0; background:#ffffff; border-radius:8px; box-shadow:rgba(0,0,0,0.16) 0px 4px 16px 0px;
padding:8px 0; width:220px; }
.menu .item { padding:12px 20px; font-size:14px; color:#000000; }
.menu .item:hover { background:#efefef; }
.footerrow { position:absolute; bottom:26px; left:40px; right:40px; display:flex; gap:16px; }
.tag { font-size:13px; color:#757575; }
</style></head>
<body>
<nav>
<span class="brand">Uber</span>
<div class="navright">
<span class="capsule-light">Ride</span>
<span class="capsule-dark">Drive</span>
</div>
</nav>
<section class="hero">
<h1>Go anywhere<br>with Uber</h1>
<div class="softrow">
<span class="soft">Pickup location</span>
<span class="soft">Now</span>
</div>
</section>
<div class="menu">
<div class="item">Ride</div>
<div class="item">Reserve</div>
<div class="item">Uber for Business</div>
<div class="item">Help</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #003399; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #003399;
border: 1px solid #003399; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f2f4f7; color: #313131;
border: 1px solid #dcdbdb; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #003399; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#313131; font-family:'Open Sans',Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box;}
.topstrip{height:26px;background:#313131;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;}
.nav{height:52px;background:#003399;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{color:#fff;font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.5px;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;color:#fff;text-transform:uppercase;}
.hero{background:#003399;color:#fff;padding:28px 30px;text-align:center;}
.hero h1{font-size:32px;font-weight:700;margin:0 0 8px;}
.hero p{font-size:14px;opacity:.9;margin:0 0 14px;}
.cta{display:inline-block;background:#fff;color:#003399;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.4px;padding:11px 26px;border-radius:4px;}
.tags{display:flex;gap:8px;justify-content:center;margin-top:16px;}
.tag{background:#eeeeee;border:1px solid #dcdbdb;border-radius:9999px;font-size:12px;font-weight:600;padding:4px 12px;color:#444;}
.tag.active{background:#003399;color:#fff;border-color:#003399;}
.section{padding:22px 30px;}
.grid{display:flex;gap:16px;}
.card{flex:1;border:1px solid #dcdbdb;border-radius:8px;padding:12px;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#003399;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.badge.cert{background:#ff0000;}
.card .img{aspect-ratio:1/1;height:100px;border-radius:4px;margin-bottom:10px;}
.d1{background:linear-gradient(135deg,#003399,#606263);}
.d2{background:linear-gradient(135deg,#ff0000,#313131);}
.d3{background:linear-gradient(135deg,#606263,#003399);}
.card h3{font-size:14px;font-weight:600;margin:0 0 4px;}
.card .price{font-size:18px;font-weight:700;color:#003399;}
</style>
<div class="topstrip">FREE SHIPPING ON ORDERS OVER $75 — COA INCLUDED ON EVERY AUTOGRAPH</div>
<div class="nav">
<div class="logo">Detroit City Sports</div>
<div class="navlinks"><span>Autographs</span><span>Jerseys</span><span>Cards</span><span>Teams</span></div>
</div>
<div class="hero">
<h1>Authenticated Detroit sports memorabilia.</h1>
<p>Signed jerseys, certified balls, and framed collectibles from the city's champions.</p>
<a class="cta">Shop Certified Items</a>
<div class="tags"><div class="tag active">Red Wings</div><div class="tag">Pistons</div><div class="tag">Tigers</div><div class="tag">Lions</div></div>
</div>
<div class="section">
<div class="grid">
<div class="card"><span class="badge cert">Certified</span><div class="img d1"></div><h3>Signed Wings Jersey</h3><div class="price">$449.99</div></div>
<div class="card"><span class="badge">Autographed</span><div class="img d2"></div><h3>Signed Tigers Bat</h3><div class="price">$219.99</div></div>
<div class="card"><span class="badge cert">Sale</span><div class="img d3"></div><h3>Framed Lions Photo</h3><div class="price">$159.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #41c9b4; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #41c9b4; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #27645a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2cb696; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #41c9b4; color: #000000;
border: 1px solid #2cb696; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #41c9b4; color: #111111;
border: 1px solid #39ac9a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #27645a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3ec6af; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f9f9; color:#222222; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif; }
* { box-sizing: border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
nav { flex:0 0 56px; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#ffffff; border-bottom:1px solid #ececec; }
.brand { display:flex; align-items:center; gap:8px; }
.brand .mark { width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,#41c9b4,#228d74); }
.brand .word { font-size:16px; font-weight:700; color:#222222; }
.navlinks { display:flex; gap:22px; font-size:12.5px; color:#615d59; }
.btn-primary { background:#000000; color:#ffffff; border:none; border-radius:999px; height:32px;
padding:0 18px; font-size:12.5px; font-weight:700; font-family:inherit; white-space:nowrap; }
.body { flex:1; padding:18px 40px 0; min-height:0; display:flex; flex-direction:column; gap:14px; }
.eyebrow { font-size:12px; font-weight:700; color:#2cb696; }
.featured { display:flex; gap:18px; background:#ffffff; border-radius:8px; padding:14px; align-items:stretch; }
.featured .thumb { flex:0 0 220px; border-radius:8px; background:linear-gradient(150deg,#41c9b4,#2cb696 55%,#228d74); position:relative; }
.featured .thumb::after { content:''; position:absolute; inset:0; border-radius:8px;
background:radial-gradient(circle at 25% 20%, rgba(255,255,255,0.25), transparent 60%); }
.featured .meta { display:flex; flex-direction:column; justify-content:center; gap:8px; padding:4px 6px; }
.featured h1 { margin:0; font-size:21px; font-weight:700; color:#222222; line-height:1.3; }
.featured p { margin:0; font-size:12.5px; color:#615d59; line-height:1.55; max-width:420px; }
.byline { display:flex; align-items:center; gap:8px; margin-top:4px; }
.avatar { width:22px; height:22px; border-radius:50%; background:#d8d8d8; }
.byline span { font-size:11.5px; color:#615d59; }
.byline b { color:#222222; font-weight:700; }
.grid { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; min-height:0; }
.card { background:#ffffff; border-radius:8px; padding:10px; display:flex; flex-direction:column; gap:8px; }
.card .thumb { flex:0 0 74px; border-radius:8px; }
.card .t1 { background:linear-gradient(150deg,#41c9b4,#a7e8dc); }
.card .t2 { background:linear-gradient(150deg,#2cb696,#c9c2ee); }
.card .t3 { background:linear-gradient(150deg,#228d74,#f0d9b5); }
.card h3 { margin:0; font-size:13px; font-weight:700; color:#222222; line-height:1.35; }
.card .row { display:flex; align-items:center; justify-content:space-between; font-size:10.5px; color:#8a8a8a; }
.card .row b { color:#615d59; font-weight:400; }
footer { flex:0 0 42px; padding:0 40px; display:flex; align-items:center; justify-content:space-between;
font-size:10.5px; color:#8a8a8a; background:#f7f9f9; }
</style></head>
<body>
<div class="page">
<nav>
<div class="brand"><span class="mark"></span><span class="word">note</span></div>
<div class="navlinks"><span>Home</span><span>Following</span><span>Notifications</span></div>
<button class="btn-primary">Write</button>
</nav>
<div class="body">
<span class="eyebrow">Today's picks</span>
<div class="featured">
<div class="thumb"></div>
<div class="meta">
<h1>What a decade of writing every day taught me</h1>
<p>A slow, honest look back at ten years of essays, false starts, and the readers who stayed.</p>
<div class="byline"><span class="avatar"></span><span><b>Sarah Lee</b> · 6 min read · Essay</span></div>
</div>
</div>
<div class="grid">
<div class="card">
<div class="thumb t1"></div>
<h3>Notes from a quiet studio</h3>
<div class="row"><b>John Smith</b><span>4 min</span></div>
</div>
<div class="card">
<div class="thumb t2"></div>
<h3>Why I stopped chasing the algorithm</h3>
<div class="row"><b>Emily Chen</b><span>7 min</span></div>
</div>
<div class="card">
<div class="thumb t3"></div>
<h3>A membership letter to my first 100 readers</h3>
<div class="row"><b>David Kim</b><span>3 min</span></div>
</div>
</div>
</div>
<footer>
<span>© note</span>
<span>note · create, connect, deliver</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00aaf5; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00aaf5; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0088d2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00aaf5; color: #000000;
border: 1px solid #0088d2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00aaf5; color: #000000;
border: 1px solid #27b6f5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00a5ef; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212121; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
header { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; background:#ffffff; }
.brand { font-size:18px; font-weight:600; color:#0088d2; }
.createbtn { background:#2ab3fc; color:#fff; border:none; border-radius:3px; padding:6px 11px; font-size:14px; }
.tabs { display:flex; gap:24px; padding:0 28px 10px; border-bottom:1px solid #d8dde4; }
.tab { font-size:14px; font-weight:600; color:#b5bac1; }
.tab.act { color:#0088d2; }
.band { background:#f8fbff; padding:18px 28px; }
.sectitle { font-size:23px; font-weight:600; color:#333333; margin:0 0 12px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#ffffff; border-radius:16px; box-shadow:rgba(0,0,0,0.1) 0px 2px 8px 0px; overflow:hidden; }
.card .cover { height:90px; border-radius:16px 16px 0 0; background:linear-gradient(135deg,#bfe6ff,#7fd0ff); position:relative; }
.card .cbody { padding:12px; }
.card .date { font-size:12px; color:#00aaf5; font-weight:600; }
.card .title { font-size:14px; font-weight:600; color:#333333; margin:4px 0; }
.card .loc { font-size:12px; color:#959ba1; }
.tagrow { display:flex; gap:6px; margin-top:8px; }
.tag { border-radius:4px; padding:3px 10px; font-size:11px; color:#fff; }
.tag.blue { background:#00aaf5; box-shadow:rgba(0,170,245,0.3) 0px 2px 4px; }
.tag.pink { background:#ff93c2; box-shadow:rgba(255,147,194,0.3) 0px 2px 4px; }
.morebtn { display:block; margin:16px auto 0; background:#009ce6; color:#fff; border:none; border-radius:22px;
padding:12px 48px; font-size:14px; font-weight:700; }
.chiprow { display:flex; gap:8px; padding:14px 28px; }
.chip { border:1px solid #d8dde4; border-radius:100px; padding:8px 16px; font-size:14px; color:#959ba1; }
footer { position:absolute; bottom:0; left:0; right:0; background:#1a1f23; color:#f5faff; padding:14px 28px;
display:flex; justify-content:space-between; font-size:11px; }
</style></head>
<body>
<header><span class="brand">Accupass</span><button class="createbtn">Create Event</button></header>
<div class="tabs">
<span class="tab act">Featured Events</span><span class="tab">Learning</span><span class="tab">Art</span><span class="tab">Experience</span>
</div>
<div class="band">
<div class="sectitle">Popular Events</div>
<div class="grid">
<div class="card"><div class="cover"></div><div class="cbody"><span class="date">SEP 12 · 2:00 PM</span><div class="title">UX Design Workshop</div><span class="loc">Taipei · NT$800</span><div class="tagrow"><span class="tag blue">Learning</span></div></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(135deg,#ffd6ea,#ffb0d6);"></div><div class="cbody"><span class="date">SEP 15 · 7:00 PM</span><div class="title">Night Market Art Fair</div><span class="loc">Taichung · Free</span><div class="tagrow"><span class="tag pink">Offline Event</span></div></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(135deg,#c8f0d8,#9fe3bd);"></div><div class="cbody"><span class="date">SEP 20 · 10:00 AM</span><div class="title">Startup Founders Meetup</div><span class="loc">Kaohsiung · NT$300</span><div class="tagrow"><span class="tag blue">Experience</span></div></div></div>
</div>
<button class="morebtn">More</button>
</div>
<div class="chiprow">
<span class="chip">Design System</span><span class="chip">UI/UX</span><span class="chip">Figma</span>
</div>
<footer><span>© Accupass</span><span>Ask ACCUPASS</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c1c1e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #1c1c1e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #040405; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; border-bottom:1px solid rgba(255,255,255,0.08); }
.brand { font-size:17px; font-weight:700; letter-spacing:-0.2px; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; color:rgba(255,255,255,0.45); font-weight:600; }
.navlinks span.on { color:#ffffff; }
.btn-primary { background:#ffffff; color:#000000; border:none; border-radius:999px;
padding:9px 20px; font-weight:700; font-size:13px; white-space:nowrap; }
main { display:flex; padding:34px 36px 0; gap:44px; }
.copy { width:330px; padding-top:14px; }
.badge { display:inline-block; background:#ffffff; color:#000; border-radius:999px; padding:4px 11px;
font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:16px; }
.copy h1 { font-size:38px; font-weight:700; letter-spacing:-1.2px; margin:0 0 12px; line-height:1.06; }
.copy p { font-size:14px; color:rgba(255,255,255,0.55); line-height:1.5; margin:0 0 22px; max-width:290px; }
.row { display:flex; gap:10px; }
.btn-secondary { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.4);
border-radius:999px; padding:9px 18px; font-weight:700; font-size:13px; }
.timerpill { margin-top:26px; display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.06);
border:1px solid rgba(255,214,10,0.4); border-radius:999px; padding:7px 14px; }
.timerpill span { font-size:12px; font-weight:700; color:#FFD60A; font-variant-numeric:tabular-nums; }
/* the dual-lens composite — BeReal's one true hero element */
.stage { position:relative; width:210px; height:280px; flex-shrink:0; }
.backphoto { position:absolute; inset:0; border-radius:20px;
background:linear-gradient(155deg,#3a3a3a 0%,#1c1c1c 55%,#000 100%); overflow:hidden;
box-shadow:rgba(0,0,0,0.6) 0 8px 24px; }
.backphoto::after { content:''; position:absolute; left:14%; bottom:0; width:72%; height:46%;
background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 100%);
clip-path:polygon(20% 100%, 80% 100%, 62% 30%, 38% 30%); }
.selfie { position:absolute; top:12px; left:12px; width:70px; height:94px; border-radius:14px;
background:linear-gradient(155deg,#555 0%,#2a2a2a 100%); border:2px solid #000;
box-shadow:rgba(0,0,0,0.5) 0 4px 10px; }
.late { position:absolute; top:14px; right:14px; font-size:10px; font-weight:700; color:#FFD60A;
background:rgba(0,0,0,0.55); border-radius:999px; padding:3px 9px; }
.retake { position:absolute; bottom:14px; left:14px; font-size:9px; font-weight:600; color:#fff;
background:rgba(255,255,255,0.14); border-radius:999px; padding:3px 9px; }
.capmeta { margin-top:14px; display:flex; align-items:center; gap:8px; }
.avatar { width:26px; height:26px; border-radius:50%; background:linear-gradient(140deg,#666,#222); }
.capmeta b { font-size:13px; font-weight:600; }
.capmeta small { font-size:11px; color:rgba(255,255,255,0.4); }
.realmojis { display:flex; margin-top:12px; }
.realmojis span { width:22px; height:22px; border-radius:50%; border:2px solid #000; margin-left:-8px;
background:linear-gradient(140deg,#777,#2a2a2a); }
.realmojis span:first-child { margin-left:0; }
/* mini friends-feed strip below */
.feedrow { display:flex; gap:20px; padding:26px 36px 0; }
.minicard { flex:1; }
.minihead { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.miniava { width:20px; height:20px; border-radius:50%; background:linear-gradient(140deg,#555,#222); }
.minihead b { font-size:11px; font-weight:600; }
.minitag { font-size:9px; font-weight:700; color:#FFD60A; margin-left:auto; }
.ministage { position:relative; width:100%; height:112px; border-radius:12px;
background:linear-gradient(155deg,#3a3a3a 0%,#151515 100%); }
.miniselfie { position:absolute; top:6px; left:6px; width:34px; height:46px; border-radius:7px;
background:linear-gradient(155deg,#555,#222); border:1.5px solid #000; }
.minicap { font-size:11px; color:rgba(255,255,255,0.55); margin-top:8px; }
footer { position:absolute; bottom:0; left:0; right:0; height:46px; border-top:1px solid rgba(255,255,255,0.08);
display:flex; align-items:center; justify-content:space-between; padding:0 36px;
font-size:11px; color:rgba(255,255,255,0.4); }
</style></head>
<body>
<nav>
<p class="brand">BeReal (iOS)</p>
<div class="navlinks"><span class="on">Friends</span><span>Discovery</span><span>Memories</span></div>
<button class="btn-primary">Open camera</button>
</nav>
<main>
<div class="copy">
<span class="badge">2 min left</span>
<h1>Be real.</h1>
<p>One photo. No filters. Both cameras, at the same time — whenever the notification says so.</p>
<div class="row">
<button class="btn-primary">Post a BeReal</button>
<button class="btn-secondary">See friends</button>
</div>
<div class="timerpill"><span>⏰ 1:47 to capture</span></div>
<div class="capmeta"><div class="avatar"></div><b>jordan</b><small> · Paris, France</small></div>
</div>
<div class="stage">
<div class="backphoto"></div>
<div class="selfie"></div>
<div class="late">⚠ 2h late</div>
<div class="retake">3 retakes</div>
</div>
</main>
<div class="realmojis" style="padding-left:36px;"><span></span><span></span><span></span></div>
<div class="feedrow">
<div class="minicard">
<div class="minihead"><div class="miniava"></div><b>mei</b><span class="minitag">⚠ 40m</span></div>
<div class="ministage"><div class="miniselfie"></div></div>
<p class="minicap">rooftop, finally sunny</p>
</div>
<div class="minicard">
<div class="minihead"><div class="miniava"></div><b>theo</b></div>
<div class="ministage"><div class="miniselfie"></div></div>
<p class="minicap">library grind</p>
</div>
<div class="minicard">
<div class="minihead"><div class="miniava"></div><b>ana</b><span class="minitag">⚠ 1h</span></div>
<div class="ministage"><div class="miniselfie"></div></div>
<p class="minicap">kitchen chaos</p>
</div>
</div>
<footer>
<span>© BeReal (iOS)</span>
<span>BeReal (iOS) · Friends · Discovery · Memories</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #0052A5; color: #FFFFFF;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #FFFFFF; color: #0052A5;
border: 1px solid #0052A5; border-radius: 4px;
padding: 8px 18px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #FFF3E6; color: #E86C00;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,Helvetica,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#0052a5;}
.logo{font-size:18px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;color:#fff;}
.searchrow{height:42px;background:#f4f7fb;display:flex;align-items:center;padding:0 34px;border-bottom:1px solid #dddddd;}
.searchbar{flex:1;height:28px;background:#fff;border:1px solid #dddddd;border-radius:4px;display:flex;align-items:center;padding:0 12px;font-size:12px;color:#666666;}
.hero{height:210px;display:flex;background:#fdf6ef;}
.htext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 34px;}
.htext .k{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#c45900;margin-bottom:8px;}
.htext h1{font-family:Georgia,serif;font-size:24px;font-weight:400;color:#1a1a1a;margin:0 0 10px;line-height:1.28;}
.htext p{font-size:12.5px;line-height:1.5;color:#333333;margin:0 0 14px;max-width:290px;}
.btn{width:fit-content;background:#e86c00;color:#fff;font-size:12px;font-weight:700;padding:9px 18px;border-radius:4px;}
.himg{width:54%;position:relative;background:#fff3e6;}
.beaker{position:absolute;left:110px;top:40px;width:50px;height:70px;background:linear-gradient(180deg,#fff3e6,#e86c00);border-radius:0 0 20px 20px;clip-path:polygon(20% 0,80% 0,80% 45%,100% 100%,0 100%,20% 45%);}
.spark{position:absolute;left:200px;top:60px;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:26px solid #0052a5;}
.seclabel{padding:14px 34px 8px;font-size:15px;font-weight:700;color:#1a1a1a;}
.grid{display:flex;gap:12px;padding:0 34px;}
.card{width:150px;border:1px solid #dddddd;border-radius:6px;padding:9px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#e86c00;color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;}
.thumb{height:74px;border-radius:4px;margin-bottom:8px;}
.sku{font-family:'Courier New',monospace;font-size:9px;color:#666666;margin-bottom:4px;}
.pname{font-size:12px;font-weight:600;color:#1a1a1a;height:30px;overflow:hidden;line-height:1.3;}
.price{font-size:13px;font-weight:700;color:#0052a5;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Science Kit Vwr</div>
<div class="navlinks"><div>Life Science</div><div>Chemistry</div><div>Grade Level</div><div>Cart</div></div>
</div>
<div class="searchrow"><div class="searchbar">Search by SKU, subject, or grade level...</div></div>
<div class="hero">
<div class="htext">
<div class="k">Grades 6–12</div>
<h1>Real reactions for real classrooms.</h1>
<p>Chemistry, biology, and physics kits mapped to grade-level standards.</p>
<div class="btn">Shop Grade 8 Chemistry</div>
</div>
<div class="himg"><div class="beaker"></div><div class="spark"></div></div>
</div>
<div class="seclabel">Grade 8 — Chemical Reactions</div>
<div class="grid">
<div class="card"><span class="badge">Grade 8</span><div class="sku">SKU SK-4021</div><div class="thumb" style="background:linear-gradient(140deg,#e86c00,#0052a5)"></div><div class="pname">Volcano Reaction Kit</div><div class="price">$34.99</div></div>
<div class="card"><div class="sku">SKU SK-1187</div><div class="thumb" style="background:linear-gradient(140deg,#0052a5,#1a1a1a)"></div><div class="pname">Refraction Prism Set</div><div class="price">$21.50</div></div>
<div class="card"><div class="sku">SKU SK-2290</div><div class="thumb" style="background:linear-gradient(140deg,#d32f2f,#0052a5)"></div><div class="pname">Dissection Tray, Standard</div><div class="price">$16.75</div></div>
<div class="card"><div class="sku">SKU SK-3305</div><div class="thumb" style="background:linear-gradient(140deg,#99bbd9,#0052a5)"></div><div class="pname">Live Butterfly Larvae Kit</div><div class="price">$44.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #cc5a16; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #cc5a16; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e3af91; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ee781f; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #cc5a16; color: #000000;
border: 1px solid #ee781f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #cc5a16; color: #f5f5f5;
border: 1px solid #d3733a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e3af91; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d15f17; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#060211; color:#ffffff; box-sizing:border-box;
font-family:Pretendard, -apple-system, sans-serif; }
* { box-sizing:border-box; }
.banner { background:#cc5a16; color:#000000; height:40px; display:flex; align-items:center; justify-content:center; font-size:13px; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-size:17px; font-weight:600; }
.brand span { color:#cc5a16; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#d1d5db; }
.hero { text-align:center; padding:30px 30px 22px; }
.hero h1 { font-size:56px; font-weight:400; margin:0 0 14px; }
.hero p { font-size:14px; color:#9ca3af; margin:0 0 14px; }
.link { color:#cc5a16; font-size:16px; font-weight:600; border-bottom:1px solid #cc5a16; padding-bottom:3px; }
.band { background:#f9fafb; color:#1f2937; padding:26px 30px; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.card { background:#ffffff; border-radius:12px; padding:18px; }
.card h3 { font-size:22px; font-weight:600; margin:0 0 6px; }
.card p { font-size:12.5px; color:#52525b; margin:0; }
.blogband { padding:20px 30px 0; }
.blogband h2 { font-size:20px; font-family:"IBM Plex Sans",sans-serif; font-weight:600; margin:0 0 10px; }
.blist { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.bcard { background:#ffffff; color:#09090b; border:1px solid #e4e4e7; border-radius:6px; padding:14px; }
.bcard h4 { font-family:"IBM Plex Sans",sans-serif; font-size:15px; font-weight:600; margin:0 0 6px; }
.bcard span { font-size:11px; color:#71717a; }
</style></head>
<body>
<div class="banner">SqueezeBits is joining Rebellions! Read more</div>
<nav>
<p class="brand"><span>■</span> SqueezeBits</p>
<div class="navlinks"><span>OwLite</span><span>Fits on Chips</span><span>Yetter</span><span>RoBoost</span></div>
</nav>
<section class="hero">
<h1>Unlock the Potential of AI</h1>
<p>Deploy your AI with maximal efficiency on CPU, GPU, or NPU.</p>
<span class="link">View more</span>
</section>
<section class="band">
<div class="card"><h3>Maximize Inference Speed</h3><p>3.1× faster inference through quantization-aware optimization.</p></div>
<div class="card"><h3>Reduce Serving Cost</h3><p>70% cost reduction while preserving near-original accuracy.</p></div>
</section>
<section class="blogband">
<h2>Tech Insight</h2>
<div class="blist">
<div class="bcard"><h4>Disaggregated Inference on vLLM</h4><span>Benchmarks · GPU</span></div>
<div class="bcard"><h4>Quantization-Aware Training Deep Dive</h4><span>OwLite · QAT</span></div>
<div class="bcard"><h4>Serving on Qualcomm NPU</h4><span>Fits on Chips</span></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafaf8; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafaf8; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1px; background: #313131; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1px; background: transparent; color: #313131;
border: 1px solid #313131; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafaf8; color: #313131;
border: 1px solid #c8c8c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; background: #eeece8; color: #4a4a4a;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafaf8; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; color:#4a4a4a; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #efefef;}
.logo{font-size:22px;font-weight:500;color:#313131;}
.navlinks{display:flex;gap:22px;font-size:15px;color:#313131;}
.hero{height:230px;background:#f5f4f1;display:flex;align-items:center;padding:0 32px;position:relative;overflow:hidden;}
.heroimg{position:absolute;right:0;top:0;width:50%;height:100%;background:linear-gradient(150deg,#c8b89a,#8c7357 60%,#4a4a4a);}
.heroimg:before{content:'';position:absolute;left:40px;bottom:30px;width:140px;height:40px;background:#3a3a3a;border-radius:6px;}
.heroimg:after{content:'';position:absolute;left:60px;bottom:70px;width:100px;height:44px;background:#5a4a3a;border-radius:6px;}
.herotext{max-width:400px;z-index:2;}
.herotext h1{font-size:32px;font-weight:500;color:#313131;margin:0 0 10px;line-height:1.2;}
.herotext p{font-size:15px;color:#4a4a4a;margin:0 0 16px;}
.herocta{display:inline-block;background:#313131;color:#fff;font-size:15px;font-weight:500;padding:14px 28px;}
.sec{padding:20px 32px 0;}
.sechead{font-size:24px;font-weight:500;color:#313131;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:216px;background:#fff;border-radius:4px;overflow:hidden;position:relative;}
.thumb{height:110px;}
.matbadge{position:absolute;left:8px;bottom:96px;background:#eeece8;color:#4a4a4a;font-size:9px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:3px 10px;border-radius:9999px;}
.pbody{padding:12px 4px 0;}
.ptitle{font-size:15px;font-weight:500;color:#313131;}
.pprice{font-size:16px;color:#313131;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Neighbor</div>
<div class="navlinks"><div>Seating</div><div>Dining</div><div>Lounge</div><div>About</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Furniture built for<br>living outside.</h1>
<p>All-weather pieces designed for the porch, the patio, the everyday.</p>
<div class="herocta">Shop Collection</div>
</div>
<div class="heroimg"></div>
</div>
<div class="sec">
<div class="sechead">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#c8b89a,#8c7357)"></div><div class="matbadge">Teak</div><div class="pbody"><div class="ptitle">Bali Lounge Chair</div><div class="pprice">$680</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#767676,#313131)"></div><div class="matbadge">Aluminum</div><div class="pbody"><div class="ptitle">Marin Dining Table</div><div class="pprice">$1,240</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#8c7357,#4a4a4a)"></div><div class="matbadge">All-Weather Wicker</div><div class="pbody"><div class="ptitle">Cove Sectional</div><div class="pprice">$2,150</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f6; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f6; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #8b8fa3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #272d45; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f4f4f6; color: #272d45;
border: 1px solid #272d45; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #bcbcbd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8fa3; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffc032; color: #121212;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f4f4f6; font-family:'DM Sans',sans-serif; color:#676986; }
*{box-sizing:border-box;}
.nav{height:64px;background:#f4f4f6;border-bottom:1px solid #f5f5f5;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:600;color:#272d45;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.2px;color:#676986;}
.navlinks .on{color:#272d45;}
.hero{height:220px;background:#272d45;display:flex;align-items:center;padding:0 32px;justify-content:space-between;}
.h1{font-size:36px;font-weight:700;letter-spacing:-0.5px;color:#fff;margin:0 0 10px;max-width:400px;line-height:1.15;}
.sub{font-size:15px;color:#c7cae0;max-width:360px;margin-bottom:16px;}
.btn{display:inline-block;background:#ffc032;color:#121212;font-size:15px;font-weight:600;letter-spacing:0.3px;padding:16px 32px;border-radius:9999px;}
.ski{width:36px;height:180px;border-radius:18px;background:linear-gradient(180deg,#ffc032,#0e7a82);position:relative;transform:rotate(8deg);}
.ski.b{transform:rotate(-4deg);margin-left:-20px;background:linear-gradient(180deg,#0e7a82,#ffc032);}
.skis{display:flex;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:206px;background:#fff;border-radius:20px;overflow:hidden;}
.thumb{height:118px;border-radius:20px 20px 0 0;}
.body{padding:14px 16px;}
.ptitle{font-size:16px;font-weight:500;color:#121212;}
.pprice{font-size:16px;color:#272d45;margin-top:6px;}
.badge{display:inline-block;background:#ffc032;color:#121212;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:4px 8px;border-radius:8px;margin-bottom:8px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:52px;background:#272d45;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#fff;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Renoun Skis</div>
<div class="navlinks"><div class="on">All-Mountain</div><div>Powder</div><div>Race</div><div>Poles</div></div>
</div>
<div class="hero">
<div>
<div class="h1">Alpine blue, one voltage of marigold.</div>
<div class="sub">Skis engineered for the mountain — the interface just holds the lift line.</div>
<div class="btn">Shop Skis</div>
</div>
<div class="skis"><div class="ski"></div><div class="ski b"></div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#272d45,#ffc032)"></div><div class="body"><div class="badge">New</div><div class="ptitle">Endurance 98</div><div class="pprice">$899</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#0e7a82,#272d45)"></div><div class="body"><div class="ptitle">Powder Chaser 106</div><div class="pprice">$949</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#ffc032,#272d45)"></div><div class="body"><div class="ptitle">Race Line GS</div><div class="pprice">$1,199</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#272d45,#0e7a82)"></div><div class="body"><div class="ptitle">VibeStop™ Poles</div><div class="pprice">$79</div></div></div>
</div>
<div class="footer"><span>© Renoun Skis — confident, alpine, slightly muted</span><span>Size Guide · Demo Program</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0d0d0d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0d0d0d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.2; letter-spacing: 0.04em; margin: 0; color: #0d0d0d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0.01em; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.12em; background: #0d0d0d; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.12em; background: #ffffff; color: #0d0d0d;
border: 1px solid #0d0d0d; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: 0.01em; background: #ffffff; color: #0d0d0d;
border: 1px solid #c2c2c2; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0.15em; background: #0d0d0d; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#0d0d0d; font-family:'Helvetica Neue',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #ececec;}
.logo{font-size:18px;font-weight:300;letter-spacing:.08em;text-transform:uppercase;}
.navlinks{display:flex;gap:26px;font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:#767676;}
.cart{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#0d0d0d;}
.hero{height:400px;position:relative;background:#0d0d0d;display:flex;align-items:flex-end;padding:0 40px 36px;overflow:hidden;}
.gems{position:absolute;top:40px;left:0;right:0;display:flex;justify-content:center;gap:26px;}
.gem{width:56px;height:56px;border-radius:50%;}
.herocopy{position:relative;z-index:2;}
.herocopy .label{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#c9a84c;margin-bottom:10px;}
.herocopy h1{font-size:32px;font-weight:300;letter-spacing:.02em;color:#fff;margin:0 0 8px;}
.herocopy p{font-size:13px;color:#b3b3b3;margin:0;letter-spacing:.01em;}
.sec{padding:26px 40px 0;}
.sectitle{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#767676;margin-bottom:16px;}
.grid{display:flex;gap:2px;}
.card{width:200px;position:relative;background:#fafafa;}
.badge{position:absolute;top:10px;left:10px;background:#0d0d0d;color:#fff;font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;z-index:2;}
.thumb{height:150px;display:flex;align-items:center;justify-content:center;}
.gemsmall{width:44px;height:44px;border-radius:50%;}
.pname{font-size:12px;font-weight:400;letter-spacing:.01em;padding:10px 4px 2px;}
.pprice{font-size:12px;color:#767676;padding:0 4px 10px;}
</style>
<div class="nav">
<div class="logo">Last Line</div>
<div class="navlinks"><span>Rings</span><span>Earrings</span><span>Bracelets</span><span>Editorial</span></div>
<div class="cart">Bag (0)</div>
</div>
<div class="hero">
<div class="gems">
<div class="gem" style="background:radial-gradient(circle at 35% 30%,#5b8fd6,#1a3a66);"></div>
<div class="gem" style="background:radial-gradient(circle at 35% 30%,#f0d04a,#a8850f);"></div>
<div class="gem" style="background:radial-gradient(circle at 35% 30%,#e88fb0,#a03f60);"></div>
<div class="gem" style="background:radial-gradient(circle at 35% 30%,#c9a84c,#7a5f22);"></div>
</div>
<div class="herocopy">
<div class="label">The Stacked Ear</div>
<h1>Fine materials, worn as though they cost nothing.</h1>
<p>Pavé stones and tennis chains, styled for every day.</p>
</div>
</div>
<div class="sec">
<div class="sectitle">New Arrivals</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb"><div class="gemsmall" style="background:radial-gradient(circle at 35% 30%,#5b8fd6,#1a3a66);"></div></div><div class="pname">Sapphire Cuff</div><div class="pprice">$2,400</div></div>
<div class="card"><div class="thumb"><div class="gemsmall" style="background:radial-gradient(circle at 35% 30%,#f0d04a,#a8850f);"></div></div><div class="pname">Canary Tennis Bracelet</div><div class="pprice">$3,850</div></div>
<div class="card"><div class="thumb"><div class="gemsmall" style="background:radial-gradient(circle at 35% 30%,#e88fb0,#a03f60);"></div></div><div class="pname">Tourmaline Studs</div><div class="pprice">$1,650</div></div>
<div class="card"><div class="thumb"><div class="gemsmall" style="background:radial-gradient(circle at 35% 30%,#c9a84c,#7a5f22);"></div></div><div class="pname">Gold Signet Ring</div><div class="pprice">$980</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f1; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f1; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.5px; background: #334fb4; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.5px; background: transparent; color: #1c1c1c;
border: 1px solid #334fb4; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1c1c1c;
border: 1px solid #bfbfbc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.2px; background: #334fb4; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f1; font-family:'Maison Neue','Helvetica Neue',Arial,sans-serif; color:#f5f5f1; }
*{box-sizing:border-box;}
.frame-top{height:64px;background:#1c1c1c;display:flex;align-items:center;justify-content:space-between;padding:0 42px;}
.logo{font-family:'ABC Whyte','Helvetica Neue',Arial,sans-serif;font-size:19px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#f5f5f1;}
.navlinks{display:flex;gap:24px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:#9a9a94;}
.hero{height:340px;position:relative;background:#f5f5f1;color:#1c1c1c;display:flex;align-items:center;padding:0 42px;}
.herotext{width:420px;}
.herotext .kick{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#334fb4;margin-bottom:14px;}
.herotext h1{font-size:32px;font-weight:500;margin:0 0 14px;line-height:1.2;}
.herotext p{font-size:15px;color:#6c757d;margin:0 0 20px;max-width:340px;line-height:1.5;}
.btn{display:inline-block;border:1px solid #1c1c1c;color:#1c1c1c;font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;padding:13px 26px;border-radius:8px;width:fit-content;}
.pergola{position:absolute;right:70px;top:60px;width:280px;height:220px;}
.pergola .beam{position:absolute;top:0;left:0;width:280px;height:14px;background:#121212;}
.pergola .post{position:absolute;top:14px;width:14px;height:206px;background:#121212;}
.pergola .p1{left:0;} .pergola .p2{right:0;}
.pergola .swatch{position:absolute;top:60px;left:40px;width:200px;height:120px;border-radius:8px;background:linear-gradient(135deg,#334fb4,#242833);}
.sec{padding:24px 42px 0;background:#f5f5f1;color:#1c1c1c;height:172px;}
.sectitle{font-size:18px;font-weight:500;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:206px;}
.thumb{height:100px;border-radius:8px;margin-bottom:8px;}
.swrow{display:flex;gap:6px;margin-top:6px;}
.sw{width:14px;height:14px;border-radius:9999px;}
.ptitle{font-size:13px;font-weight:500;margin-top:6px;}
.pprice{font-size:12px;color:#6c757d;margin-top:2px;}
.frame-bottom{height:64px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 42px;font-size:11px;color:#9a9a94;}
</style>
<div class="frame-top">
<div class="logo">Maiden Home Outdoor 2</div>
<div class="navlinks"><span>Seating</span><span>Dining</span><span>Loungers</span><span>Fabrics</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kick">Outdoor Collection</div>
<h1>Exhibited, not merchandised.</h1>
<p>Weather-grade frames and performance fabrics, built with the same restraint as the pieces indoors.</p>
<div class="btn">Explore Fabrics</div>
</div>
<div class="pergola"><div class="beam"></div><div class="post p1"></div><div class="post p2"></div><div class="swatch"></div></div>
</div>
<div class="sec">
<div class="sectitle">Outdoor Seating</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#334fb4,#dedede);"></div><div class="ptitle">Larkspur Sectional</div><div class="pprice">From $4,795</div><div class="swrow"><div class="sw" style="background:#334fb4;"></div><div class="sw" style="background:#242833;"></div><div class="sw" style="background:#6c757d;"></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#121212,#dedede);"></div><div class="ptitle">Harlow Lounge Chair</div><div class="pprice">From $1,595</div><div class="swrow"><div class="sw" style="background:#334fb4;"></div><div class="sw" style="background:#1c1c1c;"></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#6c757d,#f5f5f1);"></div><div class="ptitle">Sedge Dining Set</div><div class="pprice">From $3,295</div><div class="swrow"><div class="sw" style="background:#6c757d;"></div><div class="sw" style="background:#334fb4;"></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#242833,#dedede);"></div><div class="ptitle">Bower Chaise Lounger</div><div class="pprice">From $2,195</div><div class="swrow"><div class="sw" style="background:#242833;"></div><div class="sw" style="background:#334fb4;"></div></div></div>
</div>
</div>
<div class="frame-bottom"><span>Made to order, engineered for weather</span><span>Warranty Care Guide</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff8d00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff8d00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c4909; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fd7e14; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff8d00; color: #000000;
border: 1px solid #fd7e14; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff8d00; color: #111111;
border: 1px solid #d97903; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c4909; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff8b03; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F7F9FA; color:#1C1D1F; box-sizing:border-box;
font-family:"Pretendard Variable","Apple SD Gothic Neo","Noto Sans KR",sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#fff; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #DFE1E2; }
.brand { font-weight:700; font-size:18px; color:#FD7E14; }
.navlinks { display:flex; gap:22px; font-size:16px; color:#DFE1E2; }
.navlinks span.on { color:#FD7E14; font-weight:700; }
.cta { background:linear-gradient(90deg,#D9480F,#F3463B); color:#fff; border-radius:12px; padding:12px 24px;
font-size:15px; font-weight:600; }
.hero { padding:36px 40px 20px; }
.hero h1 { font-size:30px; font-weight:700; margin:0 0 10px; line-height:1.35; }
.hero p { color:#565C65; font-size:15px; margin:0 0 18px; }
.search { background:#fff; border:1px solid #DFE1E2; border-radius:16px; padding:14px 18px; display:flex;
justify-content:space-between; align-items:center; max-width:500px; }
.search span { color:#71767A; font-size:14px; }
.search .go { background:#FD7E14; color:#fff; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:600; }
.cats { display:flex; gap:12px; padding:20px 40px; }
.cat { background:#fff; border:1px solid #DFE1E2; border-radius:16px; padding:14px; flex:1; text-align:center; }
.cat .ic { width:36px; height:36px; border-radius:50%; background:#FFF4E6; margin:0 auto 8px; }
.cat span { font-size:13px; font-weight:600; }
.review { margin:0 40px; background:#F1F3F6; border-radius:32px; padding:24px; display:flex; gap:16px; align-items:center; }
.review .av { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#FD7E14,#F76707); }
.review .txt { flex:1; }
.review .name { font-size:14px; font-weight:700; margin-bottom:4px; }
.review p { font-size:13px; color:#71767A; margin:0; }
.tag { background:#FFF4E6; color:#F76707; border-radius:9999px; padding:4px 10px; font-size:11px; font-weight:600; }
</style></head>
<body>
<nav>
<span class="brand">Dr. Now</span>
<div class="navlinks"><span class="on">Consult</span><span>Medication Delivery</span><span>Find a Clinic</span><span>Support</span></div>
<div class="cta">Download App</div>
</nav>
<section class="hero">
<h1>Dr. Now, whenever you're unwell.<br>Late nights, weekends, always on.</h1>
<p>We're by your side — anytime, anywhere.</p>
<div class="search"><span>What symptoms are you dealing with today?</span><div class="go">Find Care</div></div>
</section>
<section class="cats">
<div class="cat"><div class="ic"></div><span>Internal Medicine</span></div>
<div class="cat"><div class="ic"></div><span>Pediatrics</span></div>
<div class="cat"><div class="ic"></div><span>Dermatology</span></div>
<div class="cat"><div class="ic"></div><span>Mental Health</span></div>
</section>
<section class="review">
<div class="av"></div>
<div class="txt">
<div class="name">Jamie · <span class="tag">Consultation Complete</span></div>
<p>From prescription to delivery, I handled it all from home. The distance to a clinic isn't a worry anymore.</p>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6b6e98; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #7e57c7; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #7e57c7;
border: 1px solid #7e57c7; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6e98; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #77d42a; color: #313131;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#54565b; font-family:'Avenir','Segoe UI',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #eeeeee;}
.logo{font-size:20px;font-weight:600;color:#313131;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:400;color:#54565b;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;background:linear-gradient(120deg,#7e57c7 0%,#77d42a 100%);}
.htext{width:430px;}
.htext h1{font-size:32px;font-weight:600;color:#fff;line-height:1.25;margin:0 0 14px;}
.htext p{font-size:14px;color:#f0e9ff;margin:0 0 20px;max-width:370px;}
.btn{display:inline-block;background:#fff;color:#7e57c7;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:13px 28px;border-radius:8px;}
.bottles{position:absolute;right:90px;top:60px;display:flex;gap:14px;}
.bottle{width:44px;height:130px;border-radius:14px 14px 6px 6px;}
.b1{background:#00b7ea;}
.b2{background:#ffab23;}
.b3{background:#00bcb5;}
.sec{padding:24px 40px 0;}
.sectitle{font-size:18px;font-weight:600;color:#313131;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:216px;border-radius:8px;border:1px solid #eeeeee;padding:14px;}
.thumb{width:100%;height:96px;border-radius:8px;margin-bottom:10px;}
.cardtitle{font-size:14px;font-weight:600;color:#313131;}
.cardprice{font-size:13px;color:#7e57c7;margin-top:4px;font-weight:600;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#54565b;border-top:1px solid #eeeeee;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Method</div>
<div class="navlinks"><span>Home Care</span><span>Hand & Body</span><span>Refills</span></div>
</div>
<div class="hero">
<div class="htext">
<h1>People against dirty.</h1>
<p>Bold color-coded cleaning products that make chemistry look this good.</p>
<div class="btn">Shop Home Care</div>
</div>
<div class="bottles">
<div class="bottle b1"></div>
<div class="bottle b2"></div>
<div class="bottle b3"></div>
</div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#007dc1;"></div><div class="cardtitle">All-Purpose Cleaner</div><div class="cardprice">$4.99</div></div>
<div class="card"><div class="thumb" style="background:#d0451b;"></div><div class="cardtitle">Foaming Hand Wash</div><div class="cardprice">$5.49</div></div>
<div class="card"><div class="thumb" style="background:#00a8ff;"></div><div class="cardtitle">Squirt + Mop Dish Soap</div><div class="cardprice">$4.49</div></div>
<div class="card"><div class="thumb" style="background:#00bcb5;"></div><div class="cardtitle">Laundry Detergent Pods</div><div class="cardprice">$12.99</div></div>
</div>
</div>
<div class="footer"><span>© People Against Dirty</span><span>Ingredients · Refill Program</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f6f7; color: #2a2a2a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f6f7; color: #2a2a2a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #2a2a2a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #fa6831; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: transparent; color: #fa6831;
border: 1px solid #fa6831; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #2a2a2a;
border: 1px solid #c2c3c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #5ccc3d; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f6f7; font-family:'Atlas Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:#2a2a2a; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#2a2a3a;}
.logo{font-size:20px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#fff;}
.hero{height:220px;display:flex;align-items:center;padding:0 40px;background:#121212;}
.herotext{width:440px;}
h1{font-size:36px;font-weight:700;letter-spacing:-0.4px;line-height:1.15;color:#fff;margin:0 0 12px;}
.sub{font-size:14px;color:#808080;margin:0 0 18px;max-width:360px;}
.cta{display:inline-block;background:#fa6831;color:#fff;font-size:15px;font-weight:600;padding:12px 26px;border-radius:8px;}
.printer{width:180px;height:150px;position:relative;margin-left:60px;}
.printer .frame{position:absolute;left:20px;top:10px;width:140px;height:120px;border:6px solid #3e3e3e;}
.printer .plate{position:absolute;left:32px;top:100px;width:116px;height:8px;background:#fa6831;}
.sec{padding:24px 40px 0;}
.sectitle{font-size:24px;font-weight:700;margin:0 0 14px;}
.grid{display:flex;gap:16px;}
.card{width:210px;background:#fff;border:1px solid #e0e0e0;border-radius:4px;padding:16px;}
.thumb{height:90px;background:#f5f5f5;border-radius:4px;margin-bottom:10px;}
.pname{font-size:16px;font-weight:600;margin:0 0 4px;}
.pcap{font-size:12px;color:#808080;margin:0 0 8px;}
.pprice{font-size:22px;font-weight:700;margin:0 0 6px;}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:3px 8px;border-radius:4px;background:#5ccc3d;color:#fff;}
.filaments{display:flex;gap:8px;margin-top:20px;}
.fchip{width:28px;height:28px;border-radius:9999px;border:2px solid #e0e0e0;}
</style>
<div class="nav">
<div class="logo">Prusa Research</div>
<div class="navlinks"><span>Printers</span><span>Filaments</span><span>Accessories</span><span>Software</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Open Hardware. Closed Tolerances.</h1>
<p class="sub">3D printers engineered for makers who read the spec sheet before the marketing copy.</p>
<div class="cta">Order Now</div>
</div>
<div class="printer"><div class="frame"></div><div class="plate"></div></div>
</div>
<div class="sec">
<div class="sectitle">Original Prusa Printers</div>
<div class="grid">
<div class="card"><div class="thumb"></div><span class="badge">In Stock</span><div class="pname">MK4S</div><div class="pcap">CoreOne successor · 220 x 220</div><div class="pprice">$799</div></div>
<div class="card"><div class="thumb"></div><span class="badge" style="background:#fa6831">Warning</span><div class="pname">XL 5-Toolhead</div><div class="pcap">Multi-material · 360 x 360</div><div class="pprice">$2,999</div></div>
<div class="card"><div class="thumb"></div><span class="badge" style="background:#ff253a">Error</span><div class="pname">SL1S Speed</div><div class="pcap">Resin SLA · Fast cure</div><div class="pprice">$1,999</div></div>
</div>
<div class="filaments">
<div class="fchip" style="background:#fa6831;border-color:#fa6831"></div>
<div class="fchip" style="background:#111"></div>
<div class="fchip" style="background:#5ccc3d"></div>
<div class="fchip" style="background:#00c48d"></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00ab6e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00ab6e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #008c5e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00ab6e; color: #000000;
border: 1px solid #008c5e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00ab6e; color: #f5f5f5;
border: 1px solid #27b784; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00a66b; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#292f33; box-sizing:border-box;
font-family:"Spoqa Han Sans Neo", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-size:18px; font-weight:700; }
.navlinks { display:flex; gap:24px; font-size:15px; color:#434b4f; }
.navlinks .on { color:#008c5e; font-weight:700; }
.hero { padding:14px 30px 10px; }
.hero h1 { font-size:34px; font-weight:700; line-height:1.29; margin:0 0 14px; max-width:640px; }
.cta { display:inline-block; background:#00ab6e; color:#fff; border-radius:10px; padding:16px 26px; font-size:16px; font-weight:700; }
.stats { display:flex; gap:50px; padding:20px 30px 0; }
.stat h2 { font-size:40px; font-weight:700; color:#00ab6e; margin:0; }
.stat span { font-size:13px; color:#717d85; }
.band { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; padding:22px 30px 0; }
.card { background:#f5f8fa; border-radius:16px; padding:22px; }
.card h3 { font-size:18px; margin:0 0 8px; }
.card p { font-size:13px; color:#434b4f; margin:0; line-height:1.5; }
.card2 { background:#ffffff; border:1px solid #e4e9ed; border-radius:16px; padding:22px; }
.timeline { display:flex; gap:16px; padding:20px 30px 0; }
.tl { flex:1; text-align:center; }
.tl .y { font-size:14px; color:#5c6469; font-weight:300; }
.tl h4 { font-size:13px; margin:4px 0 0; }
footer { position:absolute; bottom:0; width:960px; padding:12px 30px; display:flex; justify-content:space-between;
font-size:11.5px; color:#434b4f; }
</style></head>
<body>
<nav>
<p class="brand">Spoqa</p>
<div class="navlinks"><span>About</span><span>Careers</span><span class="on">Growth</span><span>Tech Blog</span></div>
</nav>
<section class="hero">
<h1>We build convenient services that take the worry out of ordering ingredients</h1>
<span class="cta">Go to KitchenBoard</span>
</section>
<div class="stats">
<div class="stat"><h2>486,384 +</h2><span>Total orders</span></div>
<div class="stat"><h2>48,081 +</h2><span>Registered stores</span></div>
</div>
<div class="band">
<div class="card"><h3>AI order generation</h3><p>Automatically organize the ingredients you need with a single sentence.</p></div>
<div class="card2"><h3>Unpaid & payment management</h3><p>Check transactions with multiple suppliers on one screen.</p></div>
</div>
<div class="timeline">
<div class="tl"><div class="y">2011</div><h4>Dodo Point founded</h4></div>
<div class="tl"><div class="y">2015</div><h4>Spoqa Han Sans released</h4></div>
<div class="tl"><div class="y">2022</div><h4>KitchenBoard rebrand</h4></div>
<div class="tl"><div class="y">2024</div><h4>Surpassed 24,000 monthly orders</h4></div>
</div>
<footer>
<span>Spoqa is writing a new history together with small business owners</span>
<span>Spoqa · See job openings</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e9e9e9; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e9e9e9; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #696969; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 600; line-height: 1.3; background: #3453a3; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 600; line-height: 1.3; background: #e9e9e9; color: #121212;
border: 1px solid #3453a3; border-radius: 4px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.5; background: #e9e9e9; color: #121212;
border: 1px solid #b3b3b3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #696969; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #008a00; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>End OF AN Ear</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#e9e9e9; color:#121212; font-family:Consolas,Menlo,Monaco,'SF Mono',monospace; }
* { box-sizing:border-box; }
nav { height:48px; background:#3453a3; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 16px; }
.logo { font-weight:700; font-size:15px; }
.navlinks { display:flex; gap:14px; font-size:14px; font-weight:600; }
.navlinks span.on { text-decoration:underline; }
.search-wrap { padding:10px 16px; }
.search { background:#e9e9e9; border:1px solid #dcdcdc; border-radius:4px; padding:8px 12px; font-size:13px; width:100%;
color:#696969; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0 16px; }
.card { background:#fff; border-radius:4px; padding:8px; }
.thumb { height:96px; border-radius:4px; margin-bottom:8px; position:relative; }
.t1 { background:linear-gradient(160deg,#8ba0d0,#3453a3); }
.t2 { background:linear-gradient(160deg,#a9a9a9,#393939); }
.t3 { background:linear-gradient(160deg,#c8c8c8,#121212); }
.badge { position:absolute; top:4px; left:4px; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:.5px; padding:2px 6px; border-radius:2px; color:#fff; }
.b-stock { background:#008a00; } .b-sold { background:#ee0000; }
.name { font-size:16px; font-weight:600; margin:6px 0 4px; }
.price { font-size:14px; color:#393939; }
.sale-price { background:#121212; color:#ffff2f; padding:2px 4px; font-size:14px; }
footer { margin-top:8px; background:#393939; color:#e9e9e9; padding:16px; display:flex; justify-content:space-between; font-size:12px; }
footer div span { text-decoration:underline; margin-right:14px; }
</style></head>
<body>
<nav>
<div class="logo">End OF AN Ear</div>
<div class="navlinks"><span class="on">New Arrivals</span><span>Used</span><span>Turntables</span><span>In-Store</span></div>
</nav>
<div class="search-wrap"><input class="search" placeholder="search the inventory..." disabled></div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="badge b-stock">In Stock</span></div><p class="name">Static Field LP</p><p class="price"><span class="sale-price">$14.99</span></p></div>
<div class="card"><div class="thumb t2"><span class="badge b-sold">Sold Out</span></div><p class="name">Analog Ghosts 7"</p><p class="price">$9.99</p></div>
<div class="card"><div class="thumb t3"><span class="badge b-stock">In Stock</span></div><p class="name">Basement Archive Vol.3</p><p class="price">$22.99</p></div>
</div>
<footer>
<div><span>Shipping</span><span>Returns</span><span>Store Hours</span></div>
<div>© End of an Ear</div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:"Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid rgba(255,255,255,0.1); }
.brand { font-size:15px; font-weight:500; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:22px; font-size:12px; color:rgba(255,255,255,0.6); }
.navbtn { background:#000000; color:#ffffff; border:1px solid rgba(255,255,255,0.3); border-radius:4px;
padding:8px 16px; font-size:13px; font-family:inherit; }
.hero { padding:34px 36px 20px; }
h1 { font-size:44px; font-weight:500; line-height:1.1; letter-spacing:-1.3px; margin:0 0 14px; max-width:640px; }
.cta-row { display:flex; gap:10px; }
.cta-black { background:#ffffff; color:#000000; border:none; border-radius:4px; padding:8px 16px;
height:40px; font-size:16px; font-weight:500; font-family:inherit; }
.cta-ghost { background:rgba(255,255,255,0.08); color:#ffffff; border:none; border-radius:4px;
padding:16px; font-size:16px; font-weight:500; font-family:inherit; }
.tabs { display:flex; gap:6px; padding:22px 36px 0; }
.tab { border-radius:4px; padding:4px 16px; height:60px; display:flex; align-items:center;
font-size:14px; color:rgba(255,255,255,0.55); }
.tab.cyan { background:#c8f6f9; color:#000000; font-weight:500; }
.panel { margin:0 36px; background:#ffffff; color:#000000; border-radius:8px; padding:16px 16px 16px 32px;
display:flex; gap:18px; align-items:center; height:120px; }
.panel .col { flex:1; }
.panel .t { font-size:16px; font-weight:500; margin-bottom:6px; }
.panel .d { font-size:13px; color:#555555; line-height:1.4; }
.panel .chip { width:150px; height:80px; border-radius:4px; background:linear-gradient(135deg,#c8f6f9,#e2e1fe); }
.research { display:flex; gap:14px; padding:22px 36px 0; }
.rcard { flex:1; background:rgba(255,255,255,0.08); border-radius:4px; padding:20px 24px; }
.rcard .label { font-size:11px; font-weight:500; letter-spacing:0.05em; color:rgba(255,255,255,0.5); text-transform:uppercase; margin-bottom:6px; }
.rcard .val { font-size:22px; font-weight:500; }
</style></head>
<body>
<nav>
<span class="brand">Together AI</span>
<div class="navlinks"><span>Platform</span><span>Pricing</span><span>Docs</span><span>Research</span></div>
<button class="navbtn">Sign in</button>
</nav>
<section class="hero">
<h1>Build what's next<br>on the AI Native Cloud</h1>
<div class="cta-row">
<button class="cta-black">Start for free</button>
<button class="cta-ghost">Talk to sales</button>
</div>
</section>
<div class="tabs">
<div class="tab cyan">Inference</div>
<div class="tab">Fine-tuning</div>
<div class="tab">Clusters</div>
</div>
<div class="panel">
<div class="col">
<div class="t">Run, train, and serve open models</div>
<div class="d">One platform for production AI, powered by systems research.</div>
</div>
<div class="chip"></div>
</div>
<div class="research">
<div class="rcard"><div class="label">Throughput</div><div class="val">4.2x faster</div></div>
<div class="rcard"><div class="label">Models supported</div><div class="val">200+</div></div>
<div class="rcard"><div class="label">GPU clusters</div><div class="val">Global</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c4c4; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c4c4; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #07abae; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c4c4; color: #000000;
border: 1px solid #07abae; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c4c4; color: #000000;
border: 1px solid #27cccc; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #01c0c0; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#191f28; box-sizing:border-box;
font-family:Pretendard,-apple-system,Roboto,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; box-shadow:0 1px #0000000f; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.brand { font-weight:700; font-size:18px; color:#00c4c4; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#4e5968; }
.btn { background:#00c4c4; color:#ffffff; border-radius:8px; padding:8px 16px; font-size:14px; font-weight:500; }
.cats { display:flex; gap:10px; padding:14px 32px; }
.chip { background:#e6fafa; color:#00c4c4; border-radius:8px; padding:8px 14px; font-size:13px; font-weight:500; }
.chip.on { background:#00c4c4; color:#ffffff; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:6px 32px 20px; }
.card { background:#ffffff; border-radius:8px; overflow:hidden; }
.thumb { height:100px; border-radius:8px 8px 0 0; position:relative; }
.th1 { background:linear-gradient(135deg,#bef5f5,#00c4c4); }
.th2 { background:linear-gradient(135deg,#fffae1,#fcc500); }
.th3 { background:linear-gradient(135deg,#ecf2ff,#4672f9); }
.th4 { background:linear-gradient(135deg,#fff0f0,#ff5959); }
.badgerow { position:absolute; top:8px; left:8px; display:flex; gap:4px; }
.b { font-size:11px; font-weight:700; border-radius:4px; padding:2px 6px; background:#00c4c4; color:#ffffff; }
.b.red { background:#ff5959; }
.cb { padding:12px 14px; }
.cb .maker { font-size:13px; color:#6b7684; margin:0 0 4px; }
.cb h4 { font-size:15px; margin:0 0 8px; line-height:1.35; }
.fund { display:flex; align-items:baseline; gap:8px; }
.fund .pct { font-size:22px; font-weight:700; color:#00c4c4; }
.fund .cnt { font-size:12px; color:#4e5968; }
.prog { height:4px; border-radius:2px; background:#f2f5f8; margin-top:6px; }
.prog i { display:block; height:4px; border-radius:2px; background:#00c4c4; }
</style></head>
<body>
<nav>
<span class="brand">Wadiz</span>
<div class="navlinks"><span>Reward</span><span>Pre-order</span><span>Business</span><span>Ads</span></div>
<span class="btn">Sign up</span>
</nav>
<div class="cats">
<span class="chip on">Open now</span><span class="chip">Early bird</span><span class="chip">Ending soon</span><span class="chip">Popular</span>
</div>
<div class="grid">
<div class="card"><div class="thumb th1"><div class="badgerow"><span class="b">Open</span></div></div>
<div class="cb"><p class="maker">Studio Nine</p><h4>Modular desk organizer in three finishes</h4>
<div class="fund"><span class="pct">182%</span><span class="cnt">1,204 backers</span></div><div class="prog"><i style="width:100%"></i></div></div></div>
<div class="card"><div class="thumb th2"><div class="badgerow"><span class="b" style="background:#fcc500;">Early bird</span></div></div>
<div class="cb"><p class="maker">Wander Goods</p><h4>Packable travel tote with hidden pockets</h4>
<div class="fund"><span class="pct">64%</span><span class="cnt">340 backers</span></div><div class="prog"><i style="width:64%"></i></div></div></div>
<div class="card"><div class="thumb th3"><div class="badgerow"><span class="b" style="background:#4672f9;">Upcoming</span></div></div>
<div class="cb"><p class="maker">Clay & Co.</p><h4>Hand-thrown ceramic tableware set</h4>
<div class="fund"><span class="pct">—</span><span class="cnt">Opens in 3 days</span></div><div class="prog"><i style="width:0%"></i></div></div></div>
<div class="card"><div class="thumb th4"><div class="badgerow"><span class="b red">Ending soon</span></div></div>
<div class="cb"><p class="maker">Lumen Labs</p><h4>Dimmable desk lamp with wireless charging</h4>
<div class="fund"><span class="pct">312%</span><span class="cnt">2,890 backers</span></div><div class="prog"><i style="width:100%"></i></div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #222222; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #ffffff; color: #222222;
border: 1px solid #222222; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.2px; background: #ffe9b7; color: #222222;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#fff; border-bottom:1px solid #e6e6e6; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.brand { font-size:19px; font-weight:700; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; }
.navlinks span:first-child { color:#222; border-bottom:2px solid #222; padding-bottom:4px; }
.navlinks span:not(:first-child) { color:#777777; }
.navicons { display:flex; gap:16px; align-items:center; }
.search { width:150px; height:34px; background:#f2f2f2; border:1px solid #e6e6e6; border-radius:9999px;
font-size:12px; color:#979797; display:flex; align-items:center; padding-left:14px; }
.hero { background:#f2f2f2; padding:28px 40px; display:flex; align-items:center; gap:32px; }
.hero-copy { flex:1.2; }
.hero h1 { font-size:32px; font-weight:700; line-height:1.25; letter-spacing:-0.5px; margin:0 0 10px; max-width:420px; }
.hero p { font-size:14px; color:#444444; margin:0 0 16px; max-width:400px; line-height:1.5; }
.row { display:flex; gap:10px; }
.btn-primary { background:#222222; color:#fff; border:none; border-radius:8px; padding:12px 24px;
font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; height:44px; }
.btn-secondary { background:#fff; color:#222222; border:2px solid #222222; border-radius:8px; padding:11px 23px;
font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; height:44px; }
.btn-live { display:inline-flex; align-items:center; gap:6px; background:#6ffb38; color:#222; border:none;
border-radius:8px; padding:8px 16px; font-size:11px; font-weight:700; text-transform:uppercase; height:32px; margin-top:12px; }
.hero-visual { flex:1; height:170px; border-radius:8px; background:#fff; border:1px solid #e6e6e6; position:relative; overflow:hidden; }
.hero-visual::before { content:''; position:absolute; width:130px; height:16px; border-radius:8px; background:#222; left:30px; top:76px; }
.hero-visual::after { content:''; position:absolute; width:22px; height:22px; border-radius:50%; background:#6ffb38; right:120px; top:70px; box-shadow:0 0 0 6px rgba(111,251,56,0.18); }
.section { padding:18px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-size:20px; font-weight:700; margin:0; }
.sec-head span { font-size:13px; color:#222; font-weight:600; border-bottom:1px solid #222; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { background:#fff; border:1px solid #e6e6e6; border-radius:8px; padding:12px; }
.thumb { aspect-ratio:1/1; border-radius:8px; position:relative; margin-bottom:8px; }
.t1 { background:linear-gradient(150deg,#f2f2f2,#dedede); }
.t2 { background:linear-gradient(150deg,#222,#444); }
.t3 { background:linear-gradient(150deg,#f2f2f2,#c7c7c7); }
.t4 { background:linear-gradient(150deg,#fff,#f2f2f2); border:1px dashed #e6e6e6; }
.badge { position:absolute; top:6px; left:6px; font-size:9px; font-weight:700; text-transform:uppercase;
letter-spacing:0.2px; padding:2px 8px; border-radius:4px; }
.badge.amber { background:#ffe9b7; color:#222; }
.badge.green { background:#3a831d; color:#fff; }
.badge.red { background:#e0afab; color:#ab2117; }
.card h3 { font-size:13px; font-weight:600; margin:0 0 3px; }
.price { font-size:14px; font-weight:600; margin:0; }
.price .orig { font-size:11px; color:#777777; text-decoration:line-through; font-weight:400; margin-left:4px; }
footer { background:#222222; color:#fff; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#fff; margin-left:16px; }
footer a:first-child { color:#6ffb38; }
</style></head>
<body>
<nav>
<p class="brand">Belkin</p>
<div class="navlinks"><span>Chargers</span><span>Cables</span><span>Docks</span><span>Screen Care</span></div>
<div class="navicons"><div class="search">Search…</div></div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Power that just works</h1>
<p>Fast chargers, braided cables, and hubs engineered to disappear into your setup — until you need them.</p>
<div class="row">
<button class="btn-primary">Shop Now</button>
<button class="btn-secondary">Learn More</button>
</div>
<div><button class="btn-live">● Connected</button></div>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2>Best Sellers</h2><span>See All</span></div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="badge amber">Sale</span></div><h3>BoostCharge 65W GaN</h3><p class="price">$44.99<span class="orig">$59.99</span></p></div>
<div class="card"><div class="thumb t2"><span class="badge green">In Stock</span></div><h3>USB-C Braided Cable</h3><p class="price">$19.99</p></div>
<div class="card"><div class="thumb t3"></div><h3>7-in-1 USB-C Dock</h3><p class="price">$79.99</p></div>
<div class="card"><div class="thumb t4"><span class="badge red">Low Stock</span></div><h3>Screen Protector 2-Pack</h3><p class="price">$29.99</p></div>
</div>
</section>
<footer>
<span>© Belkin</span>
<div><a href="#">Support</a><a href="#">Warranty</a><a href="#">Company</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.06em; background: #c16508; color: #ffffff;
border: none; border-radius: 2px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.06em; background: #ffffff; color: #272727;
border: 1px solid #c16508; border-radius: 2px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #272727;
border: 1px solid #c9c9c9; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; background: #ebebeb; color: #163959;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:flex; flex-direction:column; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#404040; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:400; color:#272727; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:13px; font-weight:500; color:#404040; }
.cart { background:#c16508; color:#fff; font-size:12px; font-weight:500; padding:8px 16px; border-radius:6px; }
.hero { padding:20px 40px 6px; }
.hero h1 { font-size:44px; font-weight:300; color:#272727; margin:0 0 10px; line-height:1.1; letter-spacing:-0.5px; max-width:640px; }
.hero p { font-size:15px; color:#737373; line-height:1.5; margin:0 0 16px; max-width:520px; }
.btn { display:inline-block; background:#c16508; color:#fff; font-size:13px; font-weight:500; padding:11px 24px; border-radius:6px; }
.section { padding:10px 40px 0; }
.section h2 { font-size:16px; font-weight:500; color:#272727; margin:0 0 12px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { background:#ffffff; border:1px solid #ebebeb; border-radius:8px; padding:12px; }
.cover { height:70px; border-radius:6px; margin-bottom:10px; }
.d1 .cover { background:#ee730a; } .d2 .cover { background:#163959; } .d3 .cover { background:#516b1d; } .d4 .cover { background:#f9b169; }
.swrow { display:flex; gap:6px; margin-bottom:8px; }
.sw { width:16px; height:16px; border-radius:999px; }
.sw1 { background:#6b4c3b; } .sw2 { background:#d4b896; } .sw3 { background:#3a3a3a; }
.sw.sel { outline:2px solid #c16508; outline-offset:2px; }
.card .t { font-size:13px; font-weight:500; color:#272727; margin:0 0 4px; }
.card .p { font-size:12px; color:#737373; }
.trust { margin-top:auto; flex-shrink:0; display:flex; padding:14px 40px; background:#ebebeb; }
.trust span { flex:1; text-align:center; font-size:11px; font-weight:500; color:#163959; }
</style></head>
<body>
<nav>
<div class="brand">Grovemade Desk Acc 2</div>
<div class="navlinks"><span>Desk</span><span>Wood Series</span><span>Finishes</span><span>Journal</span></div>
<div class="cart">Cart · 1</div>
</nav>
<div class="hero">
<h1>Pick your wood. Pick your finish.</h1>
<p>Every accessory ships in the grain you choose — walnut, maple, or felt — the same customization model as our machine shop.</p>
<span class="btn">Configure Your Desk Set</span>
</div>
<div class="section">
<h2>Desk Accessories</h2>
<div class="grid">
<div class="card d1"><div class="cover"></div><div class="swrow"><span class="sw sw1 sel"></span><span class="sw sw2"></span><span class="sw sw3"></span></div><div class="t">Wood Phone Dock</div><div class="p">$45.00</div></div>
<div class="card d2"><div class="cover"></div><div class="swrow"><span class="sw sw1"></span><span class="sw sw2 sel"></span><span class="sw sw3"></span></div><div class="t">Wireless Charging Tray</div><div class="p">$95.00</div></div>
<div class="card d3"><div class="cover"></div><div class="swrow"><span class="sw sw1 sel"></span><span class="sw sw2"></span><span class="sw sw3"></span></div><div class="t">Desk Shelf, Walnut</div><div class="p">$185.00</div></div>
<div class="card d4"><div class="cover"></div><div class="swrow"><span class="sw sw1"></span><span class="sw sw2"></span><span class="sw sw3 sel"></span></div><div class="t">Felt & Wood Mousepad</div><div class="p">$55.00</div></div>
</div>
</div>
<div class="trust"><span>Machined in Portland, OR</span><span>3 Finish Options</span><span>30-Day Returns</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; font-weight: 400; line-height: 1.4; letter-spacing: 0.01em; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.65; letter-spacing: 0.02em; margin: 0; color: #9ca3af; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 12px; font-weight: 400; line-height: 1.0; letter-spacing: 0.14em; background: #121212; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 40px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 12px; font-weight: 400; line-height: 1.0; letter-spacing: 0.14em; background: #ffffff; color: #121212;
border: 1px solid #ff0000; border-radius: 0px;
padding: 13px 39px; white-space: nowrap; cursor: default;
}
input {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.65; letter-spacing: 0.02em; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ca3af; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 10px; font-weight: 400; line-height: 1.3; letter-spacing: 0.12em; background: #ff0000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family: 'Courier New', monospace; background:#fff; color:#747474; }
*{box-sizing:border-box;}
.serif{font-family: Georgia, serif;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #dedede;}
.navside{display:flex;gap:20px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#747474;}
.logo{font-family:Georgia,serif;font-size:20px;color:#121212;letter-spacing:.02em;}
.hero{display:flex;height:340px;}
.heroimg{width:48%;background:linear-gradient(160deg,#121212,#3a3a3a 60%,#767676);position:relative;overflow:hidden;}
.heroimg:before{content:'';position:absolute;left:70px;top:80px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ccc 60%,#767676 90%);opacity:.9;}
.herotext{width:52%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;}
.herotext .kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#ff0000;margin-bottom:12px;}
.herotext h1{font-family:Georgia,serif;font-size:38px;font-weight:400;color:#121212;margin:0 0 14px;line-height:1.15;}
.herotext p{font-size:13px;color:#747474;margin:0 0 18px;max-width:320px;line-height:1.5;}
.herocta{display:inline-block;background:#121212;color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:14px 32px;width:fit-content;}
.grid{display:flex;gap:1px;background:#dedede;padding:0;}
.card{flex:1;background:#fff;padding:12px;}
.thumb{aspect-ratio:3/4;height:150px;background:linear-gradient(160deg,#121212,#9ca3af);margin-bottom:10px;}
.ptitle{font-family:Georgia,serif;font-size:15px;color:#121212;margin-bottom:4px;}
.pprice{font-size:12px;letter-spacing:.04em;color:#121212;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#9ca3af;border-top:1px solid #dedede;}
.footer span{margin-left:14px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="navside"><div>Rings</div><div>Bespoke</div></div>
<div class="logo">Jessica Mccormack</div>
<div class="navside"><div>Archive</div><div>Appointment</div></div>
</div>
<div class="hero">
<div class="heroimg"></div>
<div class="herotext">
<div class="kicker">Georgian & Victorian, Reset</div>
<h1>One of a Kind, Ledgered in Type</h1>
<p>Antique diamonds reset into modern architecture. Each piece catalogued, never repeated.</p>
<div class="herocta">Book an Appointment</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#121212,#767676)"></div><div class="ptitle">Old Mine Cut Signet</div><div class="pprice">REF. 0142 · £8,400</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#3a3a3a,#9ca3af)"></div><div class="ptitle">Georgian Foiled Cluster Ring</div><div class="pprice">REF. 0089 · £12,900</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#767676,#121212)"></div><div class="ptitle">Victorian Rose Cut Eternity</div><div class="pprice">REF. 0231 · £6,200</div></div>
</div>
<div class="footer"><span>MAYFAIR, LONDON</span><span>PRIVATE SALES<span> CARE</span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1px; background: #4a7c59; color: #ffffff;
border: none; border-radius: 8px; padding: 13px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1px; background: #ffffff; color: #4a7c59;
border: 1px solid #4a7c59; border-radius: 8px;
padding: 12px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1c1c1c;
border: 1px solid #dedad4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.33; background: #e8f0ea; color: #4a7c59;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c1c1c; box-sizing:border-box;
font-family:system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#fff; border-bottom:1px solid #dedad4; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.brand { font-size:19px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:15px; font-weight:500; color:#3d3d3d; }
.hero { background:#f5f1eb; padding:30px 40px; display:flex; align-items:center; gap:34px; }
.hero-copy { flex:1.2; }
.hero h1 { font-size:36px; font-weight:700; line-height:1.15; letter-spacing:-0.5px; margin:0 0 10px; max-width:440px; }
.hero p { font-size:14px; color:#3d3d3d; margin:0 0 16px; max-width:400px; line-height:1.5; }
.btn-primary { background:#4a7c59; color:#fff; border:none; border-radius:8px; padding:13px 24px; font-size:15px; font-weight:500; height:48px; }
.hero-visual { flex:1; height:160px; border-radius:8px; background:#fff; position:relative; overflow:hidden; }
.hero-visual::before { content:''; position:absolute; width:70px; height:110px; border-radius:6px; background:#c8a96d; left:60px; top:20px; }
.hero-visual::after { content:''; position:absolute; width:70px; height:110px; border-radius:6px; background:#e8f0ea; border:2px solid #4a7c59; left:150px; top:20px; }
.section { padding:20px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-size:22px; font-weight:600; margin:0; }
.sec-head span { font-size:14px; color:#4a7c59; font-weight:500; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#fff; border:1px solid #dedad4; border-radius:8px; padding:16px; }
.thumb { aspect-ratio:1/1; background:#f5f1eb; border-radius:8px; position:relative; margin-bottom:10px; }
.t1::after { content:''; position:absolute; inset:24px; background:#c8a96d; border-radius:6px; }
.t2::after { content:''; position:absolute; inset:24px; background:linear-gradient(150deg,#e8f0ea,#a8c9b4); border-radius:6px; }
.t3::after { content:''; position:absolute; inset:24px; background:linear-gradient(150deg,#dedad4,#c8a96d); border-radius:6px; }
.sus { display:inline-block; background:#e8f0ea; color:#4a7c59; font-size:12px; padding:4px 10px; border-radius:9999px; margin-bottom:8px; }
.card h3 { font-size:18px; font-weight:600; margin:0 0 4px; }
.price { font-size:14px; color:#717171; margin:0; }
.trust { display:flex; gap:20px; padding:16px 40px 0; font-size:11px; font-weight:600; letter-spacing:0.5px;
text-transform:uppercase; color:#717171; border-top:1px solid #dedad4; margin-top:16px; }
footer { background:#f5f1eb; color:#717171; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:14px; }
footer a { color:#4a7c59; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Betterway</p>
<div class="navlinks"><span>Toilet Paper</span><span>Paper Towels</span><span>Tissues</span><span>Subscribe</span></div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>100% bamboo. Zero plastic. Every roll.</h1>
<p>Tree-free, plastic-free paper goods shipped straight to your door — better for you, better for the forest.</p>
<button class="btn-primary">Subscribe & Save</button>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2>Shop the Essentials</h2><span>View All</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"></div>
<span class="sus">FSC Certified</span>
<h3>Bamboo Toilet Paper, 24ct</h3>
<p class="price">$29.99</p>
</div>
<div class="card">
<div class="thumb t2"></div>
<span class="sus">No Plastic</span>
<h3>Bamboo Paper Towels, 6ct</h3>
<p class="price">$19.99</p>
</div>
<div class="card">
<div class="thumb t3"></div>
<span class="sus">Carbon Neutral</span>
<h3>Facial Tissues, 12-Pack</h3>
<p class="price">$16.99</p>
</div>
</div>
<div class="trust"><span>FSC Certified</span><span>Carbon Neutral</span><span>1% For The Planet</span></div>
</section>
<footer>
<span>© Betterway</span>
<div><a href="#">Sustainability</a><a href="#">Subscriptions</a><a href="#">Support</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #272d45;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #272d45;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #272d45; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9a9db1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #370078; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #ffffff; color: #370078;
border: 1px solid #370078; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #272d45;
border: 1px solid #c9cad0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9db1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffdd00; color: #272d45;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#272d45; box-sizing:border-box;
font-family:-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#370078; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.logo { font-size:18px; font-weight:700; color:#fff; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:#ffee80; }
.navlinks span:first-child { color:#ffdd00; }
.icons { color:#fff; font-size:14px; }
.head { padding:22px 36px 10px; }
.eyebrow { font-size:13px; font-weight:500; color:#676986; margin-bottom:4px; }
.title { font-size:26px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.kit { display:flex; gap:14px; padding:14px 36px 0; }
.kcard { flex:1; background:#ffffff; border:1px solid #dedede; border-radius:8px; padding:14px; position:relative; }
.kcard.selected { border:2px solid #370078; background:#f4f4f6; }
.kbadge { position:absolute; top:-8px; left:12px; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
border-radius:4px; padding:3px 8px; color:#fff; }
.kbadge.new { background:#370078; }
.kbadge.sale { background:#ffdd00; color:#272d45; }
.kbadge.sub { background:#1990c6; }
.kimg { height:64px; border-radius:8px; margin-bottom:10px; }
.kimg.a { background:linear-gradient(160deg,#370078,#5a2ba3); }
.kimg.b { background:linear-gradient(160deg,#ffee80,#ffdd00); }
.kimg.c { background:linear-gradient(160deg,#1990c6,#136f99); }
.kname { font-size:14px; font-weight:600; margin:0 0 4px; }
.kprice { font-size:13px; color:#676986; }
.stars-sm { color:#ffdd00; font-size:11px; margin-top:4px; }
.summary { display:flex; align-items:center; gap:14px; margin:16px 36px 0; padding:14px 18px;
background:#f4f4f6; border-radius:8px; }
.qty { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #dedede; border-radius:8px;
height:40px; padding:0 12px; font-size:14px; font-weight:600; }
.qty span.step { width:24px; height:24px; border-radius:9999px; display:flex; align-items:center; justify-content:center;
color:#370078; font-weight:700; }
.subtotal { flex:1; font-size:15px; font-weight:600; }
.subtotal span { display:block; font-size:12px; font-weight:400; color:#676986; }
.btn-pill { background:#370078; color:#fff; border-radius:9999px; padding:14px 32px; font-size:16px; font-weight:600;
letter-spacing:0.25px; white-space:nowrap; }
.accordion { margin:14px 36px 0; border:1px solid #e5e5eb; border-radius:8px; }
.acc-h { display:flex; justify-content:space-between; padding:12px 16px; font-size:14px; font-weight:600; }
.acc-c { padding:0 16px 12px; font-size:13px; color:#676986; }
footer { position:absolute; bottom:0; left:0; right:0; background:#272d45; color:#cecece; padding:12px 36px;
display:flex; justify-content:space-between; font-size:11px; letter-spacing:0.2px; }
body { position:relative; }
</style></head>
<body>
<nav>
<div class="logo">Burst Oral Care</div>
<div class="navlinks"><span>Build a Kit</span><span>Whitening</span><span>Subscriptions</span></div>
<div class="icons">⌕ ⬭</div>
</nav>
<div class="head">
<div class="eyebrow">Starter Kit Builder</div>
<h1 class="title">Pick your Burst Oral Care essentials</h1>
</div>
<div class="kit">
<div class="kcard selected">
<span class="kbadge new">New</span>
<div class="kimg a"></div>
<p class="kname">Sonic Toothbrush</p>
<div class="kprice">$89.00</div>
<div class="stars-sm">★★★★★ 4.8</div>
</div>
<div class="kcard">
<span class="kbadge sale">Sale</span>
<div class="kimg b"></div>
<p class="kname">Whitening Strips</p>
<div class="kprice">$32.00</div>
<div class="stars-sm">★★★★☆ 4.5</div>
</div>
<div class="kcard selected">
<span class="kbadge sub">Subscribe</span>
<div class="kimg c"></div>
<p class="kname">Floss Picks — 3pk</p>
<div class="kprice">$18.00</div>
<div class="stars-sm">★★★★★ 4.9</div>
</div>
</div>
<div class="summary">
<div class="qty"><span class="step">–</span>2<span class="step">+</span></div>
<div class="subtotal">Kit Subtotal — $107.00 <span>Free shipping on subscriptions</span></div>
<button class="btn-pill">Add Kit to Cart</button>
</div>
<div class="accordion">
<div class="acc-h"><span>Can I customize my subscription frequency?</span><span>⌄</span></div>
<div class="acc-c">Yes — choose every 1, 2, or 3 months. Skip or cancel anytime from your account.</div>
</div>
<footer>
<span>© Burst Oral Care</span>
<span>Dentist-Backed · Subscribe & Save 20% · Free Returns</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px; overflow:hidden; display:flex; }
/* left image pane */
.km-media { flex:0 0 440px; background:#f5f5f5; position:relative; display:flex; align-items:center; justify-content:center; }
.km-box { width:300px; height:300px; position:relative; }
.km-shoe { position:absolute; left:24px; right:24px; top:70px; height:150px;
background:linear-gradient(100deg,#222222 0%, #4e4e4e 45%, #222222 100%);
clip-path:polygon(2% 70%, 10% 40%, 30% 22%, 55% 14%, 80% 18%, 96% 38%, 98% 70%, 92% 92%, 8% 92%); }
.km-shoe::after { content:""; position:absolute; left:6%; right:6%; bottom:-6px; height:20px;
background:#ffffff; border:1px solid #222222; border-radius:0 0 8px 8px; }
.km-swoop { position:absolute; left:60px; top:118px; width:150px; height:44px; border-radius:0 40px 40px 0;
background:rgba(255,255,255,0.18); }
.km-thumbstrip { position:absolute; left:24px; bottom:20px; display:flex; gap:8px; }
.km-thumb { width:44px; height:44px; border:1px solid #f0f0f0; background:#ffffff; }
.km-thumb.on { border:2px solid #222222; }
/* right info pane */
.km-info { flex:1; padding:26px 30px; display:flex; flex-direction:column; overflow:hidden; }
.km-brand-row { display:flex; align-items:center; justify-content:space-between; }
.km-brand { font-size:16px; font-weight:700; color:#222222; margin:0; }
.km-heart { font-size:13px; color:#4e4e4e; border:1px solid rgba(0,0,0,0.6); border-radius:8px; height:30px;
display:flex; align-items:center; padding:0 10px; font-weight:300; }
.km-title { font-size:20px; font-weight:400; color:#222222; margin:10px 0 2px; }
.km-sku { font-size:13px; color:#4e4e4e; margin:0 0 14px; }
.km-tabs { display:flex; gap:0; border-bottom:1px solid #f0f0f0; margin-bottom:16px; }
.km-tab { padding:13px 0; margin-right:26px; font-size:16px; color:#222222; font-weight:400; }
.km-tab.on { font-weight:700; border-bottom:2px solid #222222; }
.km-price-block { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:16px; }
.km-price-lbl { font-size:13px; color:#4e4e4e; }
.km-price-val { font-size:24px; font-weight:700; color:#000000; }
.km-price-side { text-align:right; }
.km-sizes { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.km-size { min-width:44px; height:30px; padding:0 8px; border-radius:6px; border:1px solid #f0f0f0;
display:flex; align-items:center; justify-content:center; font-size:13px; color:#4e4e4e; background:#ffffff; }
.km-size.on { background:#f4f4f4; color:#222222; border-radius:30px; font-weight:700; }
.km-bidbox { display:flex; gap:10px; margin-bottom:16px; }
.km-input { flex:1; height:44px; border:1px solid #f0f0f0; border-radius:6px; display:flex; align-items:center;
padding:0 12px; font-size:14px; color:#4e4e4e; }
.km-actions { display:flex; gap:10px; margin-top:auto; }
.km-btn-primary { flex:1; height:52px; background:#000000; color:#ffffff; border-radius:6px; font-size:15px; font-weight:700; }
.km-btn-outline { flex:1; height:52px; background:#ffffff; color:#222222; border:1px solid #222222; border-radius:6px; font-size:15px; font-weight:700; }
.km-authnote { display:flex; align-items:center; gap:8px; font-size:12px; color:#4e4e4e; margin-top:12px; }
.km-authnote .chk { width:16px; height:16px; border-radius:50%; background:#222222; color:#ffffff;
display:flex; align-items:center; justify-content:center; font-size:10px; }
</style></head>
<body>
<div class="stage">
<div class="km-media">
<div class="km-box">
<div class="km-shoe"><div class="km-swoop"></div></div>
<div class="km-thumbstrip">
<div class="km-thumb on"></div>
<div class="km-thumb"></div>
<div class="km-thumb"></div>
<div class="km-thumb"></div>
</div>
</div>
</div>
<div class="km-info">
<div class="km-brand-row">
<p class="km-brand">Northline Athletics</p>
<div class="km-heart">♡ Save</div>
</div>
<div class="km-title">Trail Runner 2002 'Slate Fog'</div>
<div class="km-sku">Style code SL-2002-004 · Released 2026</div>
<div class="km-tabs">
<div class="km-tab on">Buy Now</div>
<div class="km-tab">Place Bid</div>
<div class="km-tab">Size Guide</div>
</div>
<div class="km-price-block">
<div>
<div class="km-price-lbl">Instant Buy Price</div>
<div class="km-price-val">$248</div>
</div>
<div class="km-price-side">
<div class="km-price-lbl">Highest Bid</div>
<div class="km-price-val" style="font-size:18px;">$221</div>
</div>
</div>
<div class="km-sizes">
<div class="km-size">US 7</div>
<div class="km-size on">US 8</div>
<div class="km-size">US 9</div>
<div class="km-size">US 9.5</div>
<div class="km-size">US 10</div>
<div class="km-size">US 11</div>
</div>
<div class="km-bidbox">
<div class="km-input">Enter your bid amount</div>
<div class="km-input" style="flex:0 0 90px; justify-content:center;">USD</div>
</div>
<div class="km-actions">
<button class="km-btn-outline">Place Bid</button>
<button class="km-btn-primary">Buy Now $248</button>
</div>
<div class="km-authnote"><span class="chk">✓</span> Inspected and authenticated by KREAM before delivery</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4f40; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4f40; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #091723; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4f40; color: #091723;
border: 1px solid #091723; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4f40; color: #f5f5f5;
border: 1px solid #fd6a5d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d8463b; color: #091723;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#091723; box-sizing:border-box;
font-family:"MonzoSansText", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; background:#ffffff; border-bottom:1px solid #c2c8d0; }
.brand { font-family:"MonzoSansDisplay", -apple-system, sans-serif; font-weight:800; font-size:19px;
letter-spacing:-0.4px; margin:0; color:#091723; }
.navlinks { display:flex; gap:26px; font-size:15px; color:rgba(9,23,35,0.6); }
.navlinks span.active { color:#091723; }
.pill-dark { background:#091723; color:#ffffff; border-radius:500px; padding:10px 22px;
font-size:14px; font-weight:600; white-space:nowrap; }
.hero { display:flex; height:334px; }
.cardstage { width:400px; background:#f2f8f3; display:flex; align-items:center; justify-content:center;
position:relative; }
.bankcard { width:230px; height:145px; border-radius:20px; background:#091723; position:relative;
box-shadow:none; transform:rotate(-6deg); }
.bankcard::before { content:''; position:absolute; top:18px; left:20px; width:34px; height:26px;
border-radius:6px; background:#ff4f40; }
.bankcard .cardnum { position:absolute; bottom:38px; left:20px; color:#ffffff; font-size:14px;
letter-spacing:2px; opacity:0.85; }
.bankcard .cardname { position:absolute; bottom:16px; left:20px; color:#ffffff; font-size:11px; opacity:0.7; }
.bankcard .cardlogo { position:absolute; top:18px; right:20px; color:#ff4f40; font-weight:800; font-size:13px;
font-family:"MonzoSansDisplay", sans-serif; }
.badge-coral { position:absolute; top:32px; right:210px; background:#ff4f40; color:#ffffff; border-radius:4px;
padding:4px 10px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }
.heroinfo { flex:1; padding:34px 40px; display:flex; flex-direction:column; gap:14px; justify-content:center; }
.heroinfo .eyebrow { font-size:13px; font-weight:600; color:#6b747b; text-transform:uppercase; letter-spacing:0.06em; }
.heroinfo h1 { font-family:"MonzoSansDisplay", sans-serif; font-weight:800; font-size:34px; letter-spacing:-1px;
margin:0; line-height:1.05; color:#091723; }
.heroinfo .price { font-family:"MonzoSansDisplay", sans-serif; font-weight:800; font-size:20px; color:#016b83; }
.heroinfo p { font-size:15px; color:#3a4650; margin:0; max-width:440px; line-height:1.45; }
.ctarow { display:flex; gap:12px; margin-top:6px; }
.btn-teal { background:#016b83; color:#ffffff; border-radius:500px; padding:12px 24px; font-size:15px;
font-weight:600; white-space:nowrap; }
.btn-outline { background:#ffffff; color:#091723; border:1.5px solid #091723; border-radius:500px;
padding:11px 24px; font-size:15px; font-weight:600; white-space:nowrap; }
.features { display:flex; gap:20px; padding:20px 40px; background:#f2f8f3; height:180px; align-items:stretch; }
.fcard { flex:1; background:#ffffff; border-radius:32px; padding:20px; display:flex; flex-direction:column;
gap:8px; }
.fcard .tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#016b83; }
.fcard h3 { font-family:"MonzoSansDisplay", sans-serif; font-weight:800; font-size:16px; margin:0; color:#091723; }
.fcard p { font-size:13px; color:#6b747b; margin:0; line-height:1.4; }
footer { height:66px; background:#091723; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; }
footer span { color:rgba(255,255,255,0.7); font-size:12px; }
footer .fbrand { font-family:"MonzoSansDisplay", sans-serif; font-weight:800; color:#ffffff; font-size:14px; }
</style></head>
<body>
<nav>
<p class="brand">Monzo</p>
<div class="navlinks"><span class="active">Personal</span><span>Business</span><span>Help</span><span>Community</span></div>
<button class="pill-dark">Sign up</button>
</nav>
<section class="hero">
<div class="cardstage">
<span class="badge-coral">Hot Coral</span>
<div class="bankcard">
<span class="cardlogo">Monzo</span>
<span class="cardnum">•••• •••• •••• 4471</span>
<span class="cardname">A. MORGAN</span>
</div>
</div>
<div class="heroinfo">
<span class="eyebrow">Personal account · Plus</span>
<h1>Current accounts that keep up</h1>
<span class="price">£5 / month</span>
<p>Real-time spending notifications, instant balance updates, and a Hot Coral card that never hides a fee.</p>
<div class="ctarow">
<button class="btn-teal">Open a personal account</button>
<button class="btn-outline">See plans</button>
</div>
</div>
</section>
<section class="features">
<div class="fcard">
<span class="tag">Pots</span>
<h3>Split money on the spot</h3>
<p>Move cash into rent, groceries, and savings pots the moment it lands.</p>
</div>
<div class="fcard">
<span class="tag">Notifications</span>
<h3>Know the second you spend</h3>
<p>Instant push alerts for every payment — no surprises at the end of the month.</p>
</div>
<div class="fcard">
<span class="tag">Overseas</span>
<h3>Zero foreign transaction fees</h3>
<p>Spend abroad at the real exchange rate, every time, everywhere.</p>
</div>
</section>
<footer>
<span class="fbrand">Monzo</span>
<span>© Monzo · Personal · Business · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffe300; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffe300; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7009; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffe300; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffe300; color: #111111;
border: 1px solid #d9c103; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7009; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e4cf27; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif; }
* { box-sizing:border-box; }
.nav { height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.nav .logo { font-size:16px; font-weight:800; letter-spacing:-.3px; color:#000000; display:flex; align-items:center; gap:6px; }
.nav .logo .dot { width:9px; height:9px; background:#ffe300; border-radius:2px; display:inline-block; }
.nav .links { display:flex; gap:24px; font-size:14px; font-weight:600; letter-spacing:-.14px; color:#000000; }
.black-action { background:#000000; color:#ffffff; border-radius:6px; height:42px; padding:9.5px 18px;
font-size:15px; font-weight:600; display:flex; align-items:center; }
.hero { padding:26px 32px 22px; }
.hero .yellow-tag { display:inline-flex; align-items:center; background:#ffe300; color:#000000; font-size:12px;
font-weight:700; border-radius:6px; padding:3px 9px; margin-bottom:12px; }
.hero h1 { font-size:52px; font-weight:800; line-height:1.16; letter-spacing:-1.4px; margin:0 0 12px; max-width:760px; }
.hero p { font-size:16px; line-height:1.5; color:#444444; margin:0; max-width:480px; }
.tabs { display:flex; gap:28px; padding:0 32px; border-bottom:1px solid #e6e6e6; }
.tab { height:62px; display:flex; align-items:center; padding:16px 0; font-size:16px; color:#000000;
border-bottom:1px solid transparent; margin-bottom:-1px; }
.tab.active { border-bottom:2px solid #000000; font-weight:700; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:20px 32px 0; }
.card { background:#f7f7f7; border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:8px; }
.card .badge { align-self:flex-start; background:#ffe300; color:#000000; font-size:11px; font-weight:700;
border-radius:6px; padding:2px 8px; }
.card h3 { font-size:24px; font-weight:700; line-height:1.44; letter-spacing:-.48px; margin:0; color:#000000; }
.card p { font-size:16px; line-height:1.5; color:#444444; margin:0; }
.footer { position:absolute; left:0; right:0; bottom:0; height:74px; border-top:1px solid #e6e6e6; background:#ffffff;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.footer .rows { display:flex; gap:22px; font-size:14px; color:#888888; }
.resource-download { background:#000000; color:#ffffff; border-radius:6px; height:43px; padding:10px 16px 10px 20px;
font-size:16px; font-weight:400; display:flex; align-items:center; }
body { position:relative; }
</style></head>
<body>
<div class="nav">
<div class="logo"><span class="dot"></span>KakaoBank</div>
<div class="links"><span>Personal</span><span>Business</span><span>Youth</span><span>Invest</span><span>Company</span></div>
<div class="black-action">Get started</div>
</div>
<div class="hero">
<span class="yellow-tag">DIGITAL BANKING</span>
<h1>Banking that fits the shape of a real life.</h1>
<p>Accounts, savings, loans, and investing — organized around what you're trying to do, not how the bank is organized.</p>
</div>
<div class="tabs">
<span class="tab active">Deposit</span>
<span class="tab">Savings</span>
<span class="tab">Loan</span>
<span class="tab">Card</span>
<span class="tab">Invest</span>
</div>
<div class="cards">
<div class="card"><span class="badge">New</span><h3>Everyday account</h3><p>A simple account built for daily spending and transfers.</p></div>
<div class="card"><h3>Goal savings</h3><p>Set a target, automate the habit, watch it add up.</p></div>
<div class="card"><h3>Youth banking</h3><p>A guided first account for younger users and guardians.</p></div>
</div>
<div class="footer">
<div class="rows"><span>Terms</span><span>Privacy</span><span>Investor Relations</span><span>Help</span></div>
<span class="resource-download">Company info ›</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffcc00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffcc00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6509; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #efdf00; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffcc00; color: #000000;
border: 1px solid #efdf00; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffcc00; color: #111111;
border: 1px solid #d9ae03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6509; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fccf00; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Futura", "Century Gothic", Verdana, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #f2f2f2; }
.brand { font-size:15px; font-weight:700; letter-spacing:2px; }
.navlinks { display:flex; gap:26px; font-size:12px; font-weight:700; letter-spacing:1px; }
.search { border:1px solid #d1d1d1; border-radius:9999px; padding:6px 16px; font-size:11px; color:#666; }
.hero { position:relative; height:290px; background:linear-gradient(120deg,#ff3d8f 0%,#7b2ff7 45%,#00c2d1 100%); overflow:hidden; }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55) 100%); }
.hero-content { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:28px 32px; }
.hero h1 { color:#fff; font-size:44px; font-weight:700; line-height:0.95; margin:0 0 14px; text-transform:uppercase; }
.herobtns { display:flex; gap:10px; }
.btn { height:40px; padding:0 20px; font-size:13px; font-weight:700; display:flex; align-items:center; }
.btn.super { background:#efdf00; color:#000; border:1px solid #efdf00; }
.btn.ghost { background:transparent; color:#fff; border:1px solid #fff; }
.cards { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2px; background:#f2f2f2; }
.card { position:relative; height:210px; padding:18px; display:flex; flex-direction:column; justify-content:flex-end; }
.card::before { content:''; position:absolute; inset:0; }
.c1::before { background:linear-gradient(160deg,#1a1a1a,#3a3a3a); }
.c2 { background:#000; }
.c3::before { background:linear-gradient(160deg,#e63946,#8a1c2b); }
.card h3 { position:relative; z-index:1; color:#fff; font-size:20px; font-weight:700; margin:0 0 6px; text-transform:uppercase; }
.card p { position:relative; z-index:1; color:#e0e0e0; font-size:12px; margin:0 0 10px; }
.card .link { position:relative; z-index:1; color:#fff; font-size:12px; font-weight:700; text-decoration:underline; }
.c2 h3, .c2 p { color:#fff; }
footer { border-top:1px solid #f2f2f2; padding:12px 32px; display:flex; justify-content:space-between; font-size:11px; color:#666; }
</style></head>
<body>
<nav>
<span class="brand">Renault</span>
<div class="navlinks"><span>MODELS</span><span>E-TECH</span><span>SERVICES</span><span>ABOUT</span></div>
<span class="search">Find a dealer</span>
</nav>
<section class="hero">
<div class="hero-content">
<h1>Drive the future</h1>
<div class="herobtns">
<span class="btn super">Discover E-Tech</span>
<span class="btn ghost">Book a test drive</span>
</div>
</div>
</section>
<div class="cards">
<div class="card c1"><h3>Megane E-Tech</h3><p>100% electric, engineered for the city.</p><span class="link">Configure now</span></div>
<div class="card c2"><h3>Technology</h3><p>Fast charging, further range.</p><span class="link">Learn more</span></div>
<div class="card c3"><h3>Clio</h3><p>The icon, reimagined.</p><span class="link">Discover</span></div>
</div>
<footer>
<span>© Renault Group</span>
<span>Models · E-Tech · Dealers · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #116699;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #116699;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #116699; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.4; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.8px; background: #c7dfc2; color: #102745;
border: none; border-radius: 2px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.8px; background: #ffffff; color: #102745;
border: 1px solid #c7dfc2; border-radius: 2px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #3f3f3f;
border: 1px solid #c4d9e6; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #c7dfc2; color: #102745;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,Helvetica,sans-serif; color:#444444; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #eeeeee;}
.logo{font-family:Georgia,'Baskerville',serif;font-size:20px;color:#102745;}
.navlinks{display:flex;gap:22px;font-size:13px;color:#3f3f3f;}
.hero{height:246px;display:flex;background:#f7f7f7;}
.htext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 36px;}
.htext h1{font-family:Georgia,'Baskerville',serif;font-size:28px;font-weight:400;color:#102745;margin:0 0 12px;line-height:1.3;}
.htext p{font-size:13.5px;line-height:1.55;color:#444444;margin:0 0 18px;max-width:290px;}
.btn{width:fit-content;background:#c7dfc2;color:#102745;font-size:13px;font-weight:700;padding:12px 24px;}
.himg{width:54%;position:relative;background:#f3f3f3;}
.vac{position:absolute;left:130px;top:36px;width:90px;height:110px;border-radius:16px;background:linear-gradient(180deg,#c7dfc2,#aaddaa);}
.wheel{position:absolute;left:150px;top:150px;width:24px;height:24px;border-radius:50%;background:#102745;}
.wheel2{position:absolute;left:195px;top:150px;width:24px;height:24px;border-radius:50%;background:#102745;}
.seclabel{padding:16px 36px 10px;font-family:Georgia,serif;font-size:17px;color:#102745;}
.grid{display:flex;gap:14px;padding:0 36px;}
.card{width:150px;background:#f3f3f3;border-radius:2px;padding:10px;}
.thumb{height:78px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:700;color:#102745;height:30px;overflow:hidden;line-height:1.3;}
.price{font-size:13px;font-weight:700;color:#116699;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Sebo</div>
<div class="navlinks"><span>Vacuums</span><span>Bags & Filters</span><span>Accessories</span><span>Support</span></div>
</div>
<div class="hero">
<div class="htext">
<h1>Engineered to outlast the trend.</h1>
<p>German-built vacuum cleaners designed for decades of quiet, thorough cleaning.</p>
<div class="btn">Shop Vacuums</div>
</div>
<div class="himg"><div class="vac"></div><div class="wheel"></div><div class="wheel2"></div></div>
</div>
<div class="seclabel">Featured Models</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#c7dfc2,#102745)"></div><div class="pname">Sebo Airbelt K3 Canister</div><div class="price">$799</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#116699,#102745)"></div><div class="pname">Sebo Felix Upright</div><div class="price">$649</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#bdbdbd,#102745)"></div><div class="pname">Genuine Dust Bags, 8-Pack</div><div class="price">$24</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#ececf3,#c7dfc2)"></div><div class="pname">HEPA Filter Cartridge</div><div class="price">$32</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #dedede; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #dedede; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #8a8a8a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #d63021; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #dedede; color: #121212;
border: 1px solid #d63021; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #dedede; color: #121212;
border: 1px solid #ababab; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #d63021; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#dedede; font-family:'Poppins',sans-serif; color:#4d4d4d; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:56px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:16px;font-weight:600;color:#fff;letter-spacing:0.5px;text-transform:uppercase;}
.searchpill{background:#d63021;color:#fff;font-size:13px;padding:10px 20px;border-radius:9999px;}
.gallerystrip{height:40px;background:#f0f0f0;display:flex;align-items:center;gap:10px;padding:0 32px;border-bottom:1px solid #dadada;}
.chip{background:#dedede;border:1px solid #dadada;border-radius:9999px;padding:4px 14px;font-size:12px;}
.chip.active{background:#121212;color:#fff;border-color:#121212;}
.hero{height:190px;display:flex;flex-direction:column;justify-content:center;padding:0 32px;}
.h1{font-size:30px;font-weight:600;letter-spacing:-0.4px;margin:0 0 8px;color:#121212;}
.sub{font-size:15px;margin:0;max-width:460px;}
.grid{display:flex;gap:16px;padding:20px 32px 0;}
.card{width:210px;background:#fff;border-radius:8px;overflow:hidden;}
.thumb{height:130px;background:#f0f0f0;position:relative;}
.art{position:absolute;inset:0;background:linear-gradient(135deg,#d63021,#121212);}
.badge{position:absolute;top:8px;left:8px;background:#d63021;color:#fff;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;z-index:2;}
.ctitle{font-size:14px;font-weight:600;padding:10px 14px 2px;color:#121212;}
.cprice{font-size:14px;color:#4d4d4d;padding:0 14px 14px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#4d4d4d;font-size:11px;border-top:1px solid #dadada;}
</style>
<div class="wrap">
<div class="nav"><div class="logo">Mondo Collecti 2</div><div class="searchpill">Search the shrine...</div></div>
<div class="gallerystrip"><div class="chip active">All</div><div class="chip">Prints</div><div class="chip">Figures</div><div class="chip">Vinyl</div></div>
<div class="hero">
<div class="h1">A gallery wall for pop culture.</div>
<p class="sub">Framed, catalogued, unapologetically loud — every piece treated like an opening night.</p>
</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge">New</span><div class="art"></div></div><div class="ctitle">Retrospective Print Set</div><div class="cprice">$120.00</div></div>
<div class="card"><div class="thumb"><div class="art"></div></div><div class="ctitle">Statue, Numbered Edition</div><div class="cprice">$249.99</div></div>
<div class="card"><div class="thumb"><div class="art"></div></div><div class="ctitle">Score Vinyl, Colored Wax</div><div class="cprice">$38.00</div></div>
</div>
<div class="footer"><span>Gallery-grade framing on every print</span><span>© Mondo Collecti 2</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #17171c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #17171c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #919193; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #17171c; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #17171c; color: #f5f5f5;
border: 1px solid #3b3b3f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #919193; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3c3c40; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 44px; border-bottom:1px solid #e5e7eb; }
.brand { font-size:16px; font-weight:600; letter-spacing:-0.2px; margin:0; }
.navlinks { display:flex; gap:32px; font-size:14px; color:#212121; }
.pill-dark { background:#17171c; color:#fff; border-radius:9999px; padding:9px 20px;
font-size:14px; font-weight:500; white-space:nowrap; }
.hero { padding:56px 44px 32px; display:flex; flex-direction:column; gap:16px; }
.hero h1 { font-size:56px; font-weight:400; letter-spacing:-1.2px; line-height:1.0; margin:0; max-width:640px; }
.hero p { font-size:16px; color:#212121; max-width:460px; margin:0; }
.row { display:flex; gap:12px; margin-top:6px; }
.pill-outline { border:1px solid #17171c; color:#17171c; border-radius:9999px; padding:8px 19px; font-size:14px; font-weight:500; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:0 44px 40px; }
.card { border:1px solid #e5e7eb; border-radius:22px; padding:20px; display:flex; flex-direction:column; gap:8px; }
.card .tag { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:#75758a; }
.card h3 { font-size:16px; font-weight:600; margin:0; }
.card p { font-size:13px; color:#212121; margin:0; line-height:1.45; }
footer { border-top:1px solid #e5e7eb; padding:14px 44px; display:flex; justify-content:space-between;
font-size:12px; color:#75758a; }
</style></head>
<body>
<nav>
<p class="brand">Cohere</p>
<div class="navlinks"><span>Products</span><span>Pricing</span><span>Docs</span><span>Careers</span></div>
<button class="pill-dark">Get started</button>
</nav>
<section class="hero">
<h1>Own your AI</h1>
<p>Enterprise-grade models and agentic infrastructure, deployed on your terms — private, secure, and built for scale.</p>
<div class="row">
<button class="pill-dark">Talk to sales</button>
<button class="pill-outline">Read the docs</button>
</div>
</section>
<section class="cards">
<div class="card"><span class="tag">Models</span><h3>Command & Embed</h3><p>Foundation models tuned for retrieval, reasoning, and enterprise search.</p></div>
<div class="card"><span class="tag">Agentic</span><h3>North workplace</h3><p>A turnkey agentic platform that works across your private data.</p></div>
<div class="card"><span class="tag">Deployment</span><h3>Any cloud, any scale</h3><p>Run on your own infrastructure without giving up control.</p></div>
</section>
<footer>
<span>© Cohere</span>
<span>Cohere · Products · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f7f1; color: #05050f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f7f1; color: #05050f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #05050f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #82807b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #00493d; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #00493d;
border: 1px solid #00493d; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #05050f;
border: 1px solid #bbbab8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #82807b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #bd1a2b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f7f1; font-family:'proxima-nova','Helvetica Neue',Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.util{height:32px;background:#00493d;color:#fff;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:24px;}
.nav{height:64px;border-bottom:1px solid #e2e2e2;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-family:Georgia,serif;font-size:22px;font-weight:700;color:#00493d;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;}
.hero{height:220px;background:#00493d;color:#fff;display:flex;align-items:center;padding:0 30px;}
.hero h1{font-family:Georgia,serif;font-size:38px;font-weight:700;letter-spacing:-.3px;line-height:1.15;margin:0 0 14px;max-width:400px;}
.cta{display:inline-block;background:#fff;color:#00493d;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:14px 28px;border-radius:4px;}
.rowlabel{padding:14px 30px 8px;font-family:Georgia,serif;font-size:20px;font-weight:600;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:196px;background:#fff;border:1px solid #e2e2e2;border-radius:8px;padding:12px;position:relative;}
.thumb{height:96px;border-radius:0;margin-bottom:8px;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;border-radius:4px;padding:3px 8px;}
.ptitle{font-size:16px;font-weight:600;}
.pprice{font-size:18px;font-weight:700;color:#00493d;margin-top:4px;}
.swatches{display:flex;gap:6px;margin-top:8px;}
.sw{width:20px;height:20px;border-radius:9999px;border:2px solid transparent;}
</style>
<div class="util"><span>Free Design Guide</span><span>Find a Dealer</span></div>
<div class="nav">
<div class="logo">Trex Outdoor Furniture</div>
<div class="navlinks"><div>Decking</div><div>Railing</div><div>Furniture</div><div>Lighting</div></div>
</div>
<div class="hero">
<h1>Engineered outdoor living, made in America.</h1>
<div class="cta">Explore Decking</div>
</div>
<div class="rowlabel">Featured Furniture</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#d7cdbd;color:#4e372c">Made in USA</span><div class="thumb" style="background:linear-gradient(135deg,#00493d,#6d4327)"></div><div class="ptitle">Adirondack Chair</div><div class="pprice">$399.00</div><div class="swatches"><div class="sw" style="background:#6d4327"></div><div class="sw" style="background:#4e372c"></div><div class="sw" style="background:#00493d"></div></div></div>
<div class="card"><span class="badge" style="background:#bd1a2b;color:#fff">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#4e372c,#00493d)"></div><div class="ptitle">Slatted Dining Table</div><div class="pprice">$899.00</div><div class="swatches"><div class="sw" style="background:#6d4327"></div><div class="sw" style="background:#4e372c"></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#6d4327,#00493d)"></div><div class="ptitle">Composite Deck Board</div><div class="pprice">$4.99/ft</div><div class="swatches"><div class="sw" style="background:#6d4327"></div><div class="sw" style="background:#4e372c"></div><div class="sw" style="background:#00493d"></div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #1f1f1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #1f1f1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #1f1f1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #474747; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #1a7ac4; color: #ffffff;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #fefefe; color: #1f1f1f;
border: 1px solid #1a7ac4; border-radius: 6px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fefefe; color: #1f1f1f;
border: 1px solid #c6c6c6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #474747; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #a20505; color: #ffffff;
border-radius: 3px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fefefe; font-family:'Open Sans','PT Sans',sans-serif; color:#313131; }
*{box-sizing:border-box;}
.topheader{height:28px;background:#003388;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;}
.nav{height:48px;background:#003388;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;color:#fff;}
.search{width:200px;height:32px;border-radius:9999px;background:#fff;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#607385;}
.catstrip{display:flex;gap:8px;padding:10px 30px;background:#f4f4f4;}
.pill{background:#003388;color:#fff;font-size:13px;font-weight:600;border-radius:9999px;padding:6px 16px;}
.pill.inactive{background:#fefefe;color:#1f1f1f;border:1px solid #bfbfbf;}
.hero{height:150px;background:#f4f4f4;display:flex;align-items:center;padding:0 30px;}
.hero h1{font-size:24px;font-weight:600;color:#1f1f1f;margin:0 0 8px;}
.hero .btn{display:inline-block;background:#1a7ac4;color:#fff;font-size:15px;font-weight:600;padding:12px 32px;border-radius:6px;}
.secTitle{font-size:16px;font-weight:600;padding:12px 30px 8px;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:200px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.1);padding:8px;position:relative;}
.badge{position:absolute;top:16px;left:16px;background:#a20505;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:3px;z-index:2;}
.thumb{height:100px;background:#f4f4f4;border-radius:6px;margin-bottom:8px;}
.ctitle{font-size:14px;font-weight:600;margin-bottom:4px;}
.cprice{font-size:18px;font-weight:700;color:#313131;}
.cprice.sale{color:#a20505;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#003388;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:11px;color:#fff;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="topheader">Free shipping over $50 · Find a store</div>
<div class="nav">
<div class="navlinks"><div>Music</div><div>Movies</div><div>Games</div><div>Toys</div><div>Comics</div></div>
<div class="search">Search everything...</div>
</div>
<div class="catstrip">
<div class="pill">Vinyl</div>
<div class="pill inactive">CDs</div>
<div class="pill inactive">Cassettes</div>
<div class="pill inactive">Posters</div>
</div>
<div class="hero">
<div>
<h1>Everything pop culture, one bazaar.</h1>
<div class="btn">Shop Now</div>
</div>
</div>
<div class="secTitle">Trending Now</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#1a7ac4,#0e766d);"></div><div class="ctitle">Retro Arcade Vinyl LP</div><div class="cprice sale">$14.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7a00df,#1a7ac4);"></div><div class="ctitle">Collector's Comic Box Set</div><div class="cprice">$39.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0e766d,#1a7ac4);"></div><div class="ctitle">Retro Console Bundle</div><div class="cprice">$89.99</div></div>
</div>
<div class="footer"><span>© Slackers</span><span>Store Locator · Rewards</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body {
display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.announce { flex:0 0 28px; background:#111111; color:#ffffff; display:flex; align-items:center; gap:10px; padding:0 32px; font-size:12px; font-weight:700; }
.newbadge { background:#ff4d00; color:#000000; border-radius:18px; padding:2px 10px; font-size:10px; font-weight:700; }
nav { flex:0 0 56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #eeeeee; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:18px; font-size:13px; font-weight:700; }
.navbtns { display:flex; gap:10px; }
.btn-outline { background:#ffffff; color:#111111; border:1px solid #111111; border-radius:8px; padding:8px 14px; font-size:12px; font-weight:700; }
.btn-solid { background:#111111; color:#ffffff; border:none; border-radius:8px; padding:8px 14px; font-size:12px; font-weight:700; }
main { flex:1 1 auto; display:flex; overflow:hidden; }
.panel-dark { flex:0 0 380px; background:#000000; color:#ffffff; padding:36px 32px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.panel-dark h1 { font-size:36px; font-weight:700; line-height:1.05; margin:0; letter-spacing:-0.5px; }
.panel-dark p { font-size:14px; color:rgba(255,255,255,.72); line-height:1.5; margin:0; max-width:280px; }
.cta-lime { background:#00ff44; color:#111111; border:none; border-radius:24px; padding:12px 26px; font-size:14px; font-weight:700; width:fit-content; margin-top:6px; }
.panel-light { flex:1 1 auto; padding:28px 32px; display:flex; flex-direction:column; gap:16px; overflow:hidden; }
.ph-row { display:flex; justify-content:space-between; align-items:center; }
.ph-row h2 { font-size:16px; font-weight:700; margin:0; }
.ph-row span { font-size:11px; color:rgba(17,17,17,.55); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.orgcards { display:flex; gap:12px; }
.orgcard { flex:1; border:1px solid #eeeeee; border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.avatar { width:32px; height:32px; border-radius:9px; }
.orgcard b { font-size:13px; }
.orgcard span { font-size:11px; color:rgba(17,17,17,.55); }
.tag-connected { background:#eafce9; color:#0a7d2e; font-size:10px; font-weight:700; border-radius:9999px; padding:2px 8px; width:fit-content; }
.metrics { display:flex; gap:12px; margin-top:auto; }
.metric { flex:1; background:#f6f6f6; border-radius:12px; padding:14px; }
.metric h3 { font-size:22px; font-weight:700; margin:0 0 2px; }
.metric span { font-size:11px; color:rgba(17,17,17,.55); font-weight:600; }
</style></head>
<body>
<div class="announce"><span class="newbadge">NEW</span> flex launches Relations Driven AX for HR teams</div>
<nav>
<p class="brand">flex</p>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Pricing</span></div>
<div class="navbtns"><button class="btn-outline">Sign in</button><button class="btn-solid">Request a demo</button></div>
</nav>
<main>
<div class="panel-dark">
<h1>Every decision, in context.</h1>
<p>flex connects HR data across your organization so leaders act on relationships, not spreadsheets.</p>
<button class="cta-lime">Request a demo</button>
</div>
<div class="panel-light">
<div class="ph-row"><h2>Org overview</h2><span>Live sync</span></div>
<div class="orgcards">
<div class="orgcard"><span class="avatar" style="background:#00ff44"></span><b>Hong Gil-dong</b><span>People Ops Lead</span><span class="tag-connected">● Connected</span></div>
<div class="orgcard"><span class="avatar" style="background:#111111"></span><b>Kim Cheol-su</b><span>Payroll Manager</span><span class="tag-connected">● Connected</span></div>
<div class="orgcard"><span class="avatar" style="background:#eeeeee"></span><b>Lee Yeong-hee</b><span>Team Lead, R&D</span><span class="tag-connected">● Connected</span></div>
</div>
<div class="ph-row"><h2>Payroll & headcount</h2><span>This quarter</span></div>
<div class="metrics">
<div class="metric"><h3>842</h3><span>Employees</span></div>
<div class="metric"><h3>3.4 yrs</h3><span>Avg. tenure</span></div>
<div class="metric"><h3>12</h3><span>Open roles</span></div>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.2; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.14; letter-spacing: 0.5px; background: #00b3ff; color: #121212;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.14; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #00b3ff; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 1.5px; background: #4a5764; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:'Avenir Next','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #dedede; }
.brand { font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; font-weight:600; color:#4a5764; }
.navlinks span.on { color:#00b3ff; border-bottom:2px solid #00b3ff; padding-bottom:20px; }
.util { font-size:12px; color:#4a5764; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 64px); }
.stage { padding:24px; border-right:1px solid #dedede; display:flex; flex-direction:column; gap:10px; background:#121212; }
.panel { flex:1; position:relative; overflow:hidden; background:linear-gradient(160deg,#2a3540 0%,#121212 65%); }
.panel::before { content:''; position:absolute; left:10%; top:6%; width:8%; height:88%; background:linear-gradient(180deg,#f4f6f7,#c1c9d1 40%,#4a5764 70%,#121212); transform:skewX(-4deg); box-shadow:0 0 24px rgba(0,179,255,0.25); }
.panel::after { content:''; position:absolute; right:14%; bottom:10%; width:60%; height:2px; background:#00b3ff; box-shadow:0 0 10px #00b3ff; }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; background:#1c1c1c; border:1px solid #333; }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#4a5764; }
h1 { margin:0; font-size:26px; font-weight:700; line-height:1.1; letter-spacing:-0.5px; }
.badge-row { display:flex; gap:6px; }
.spec-badge { background:#4a5764; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.75px; text-transform:uppercase; padding:4px 8px; }
.price { font-size:20px; font-weight:700; }
.spec-table { border-top:1px solid #dedede; }
.spec-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #dedede; font-size:12px; }
.spec-row .l { text-transform:uppercase; letter-spacing:0.75px; color:#4a5764; font-size:11px; }
.spec-row .v { color:#121212; font-weight:600; }
.sizes { display:flex; gap:8px; align-items:center; }
.size-tile { width:36px; height:36px; border:1px solid #dedede; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.size-tile.on { background:#121212; color:#fff; border-color:#121212; }
.swatch { width:18px; height:18px; border-radius:50%; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:44px; background:#00b3ff; color:#121212; border:none; font-size:14px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
.btn-secondary { width:150px; height:44px; background:#fff; border:1px solid #121212; color:#121212; font-size:14px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
</style></head>
<body>
<nav>
<p class="brand">Black Crows</p>
<div class="navlinks"><span class="on">Skis</span><span>Outerwear</span><span>Equipment</span><span>Accessories</span></div>
<div class="util">Search EU Cart (0)</div>
</nav>
<main>
<div class="stage">
<div class="panel"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Freeride Series</span>
<h1>Anima 2.0 All-Mountain Ski</h1>
<div class="badge-row"><span class="spec-badge">Rocker</span><span class="spec-badge">Early Rise</span></div>
<div class="price">$799.00</div>
<div class="spec-table">
<div class="spec-row"><span class="l">Waist Width</span><span class="v">98mm</span></div>
<div class="spec-row"><span class="l">Turning Radius</span><span class="v">17m @ 172cm</span></div>
<div class="spec-row"><span class="l">Level</span><span class="v">Advanced / Expert</span></div>
</div>
<div class="sizes">
<div class="size-tile">165</div><div class="size-tile on">172</div><div class="size-tile">179</div>
<span class="swatch" style="background:#00b3ff"></span><span class="swatch" style="background:#121212"></span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Size Chart</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; background: #e67e22; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; background: #f5f5f5; color: #313131;
border: 1px solid #313131; border-radius: 4px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #27ae60; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; background:#ffffff; color:#313131; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.navbar{height:44px;background:#313131;display:flex;align-items:center;padding:0 24px;gap:20px;}
.navbar .logo{color:#fff;font-size:15px;font-weight:700;margin-right:12px;}
.navbar div{color:#fff;font-size:13px;font-weight:600;}
.searchrow{height:36px;display:flex;align-items:center;gap:10px;padding:0 24px;border-bottom:1px solid #e5e5e5;}
.search{flex:1;height:24px;border:1px solid #d4d4d4;border-radius:4px;background:#fff;font-size:12px;color:#767676;display:flex;align-items:center;padding:0 10px;}
.basket{font-size:12px;font-weight:600;color:#e67e22;}
.genres{display:flex;gap:6px;padding:8px 24px;border-bottom:1px solid #e5e5e5;background:#f5f5f5;}
.genre{background:#fff;border:1px solid #d4d4d4;border-radius:4px;padding:5px 12px;font-size:11px;font-weight:600;color:#313131;}
.genre.active{background:#313131;color:#fff;border-color:#313131;}
.rows{padding:6px 24px 0;}
.row{display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid #e5e5e5;}
.art{width:44px;height:44px;border-radius:2px;flex-shrink:0;}
.meta{flex:1;}
.artist{font-size:13px;font-weight:600;color:#313131;}
.title{font-size:12px;color:#4a4a4a;}
.fmt{width:64px;font-size:11px;color:#767676;}
.stock{width:80px;}
.stockpill{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 6px;border-radius:2px;color:#fff;}
.stockpill.in{background:#27ae60;}
.stockpill.low{background:#e67e22;}
.price{width:56px;text-align:right;font-size:13px;font-weight:700;color:#313131;}
.addbtn{width:66px;height:26px;background:#e67e22;color:#fff;font-size:11px;font-weight:600;border-radius:4px;display:flex;align-items:center;justify-content:center;margin-left:10px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:32px;background:#313131;color:#cfcfcf;font-size:11px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
</style>
<div class="wrap">
<div class="navbar"><div class="logo">Norman Records</div><div>Rock</div><div>Electronic</div><div>Jazz</div><div>Reissues</div><div>Second-Hand</div></div>
<div class="searchrow"><div class="search">Search 400,000+ used and new records...</div><div class="basket">BASKET (3)</div></div>
<div class="genres"><div class="genre active">All</div><div class="genre">Rock & Pop</div><div class="genre">Electronic</div><div class="genre">Jazz</div><div class="genre">Metal</div><div class="genre">Folk</div></div>
<div class="rows">
<div class="row"><div class="art" style="background:linear-gradient(135deg,#313131,#767676)"></div><div class="meta"><div class="artist">Faultline Choir</div><div class="title">Low Water Mark — 2LP Gatefold</div></div><div class="fmt">Vinyl</div><div class="stock"><span class="stockpill in">In Stock</span></div><div class="price">£24.99</div><div class="addbtn">Add</div></div>
<div class="row"><div class="art" style="background:linear-gradient(135deg,#e67e22,#a35314)"></div><div class="meta"><div class="artist">Nine Latch Radio</div><div class="title">Analogue Ghosts — CD Digipak</div></div><div class="fmt">CD</div><div class="stock"><span class="stockpill low">Low Stock</span></div><div class="price">£11.50</div><div class="addbtn">Add</div></div>
<div class="row"><div class="art" style="background:linear-gradient(135deg,#3498db,#1c5d82)"></div><div class="meta"><div class="artist">Marrow Engine</div><div class="title">Second Skin (Deluxe) — 180g</div></div><div class="fmt">Vinyl</div><div class="stock"><span class="stockpill in">In Stock</span></div><div class="price">£27.99</div><div class="addbtn">Add</div></div>
<div class="row"><div class="art" style="background:linear-gradient(135deg,#767676,#313131)"></div><div class="meta"><div class="artist">The Quiet Docks</div><div class="title">Harbour Lights — Cassette</div></div><div class="fmt">Tape</div><div class="stock"><span class="stockpill in">In Stock</span></div><div class="price">£9.00</div><div class="addbtn">Add</div></div>
<div class="row"><div class="art" style="background:linear-gradient(135deg,#e74c3c,#8e2a1f)"></div><div class="meta"><div class="artist">Sable & Sons</div><div class="title">Rust Belt Sessions — Coloured Vinyl</div></div><div class="fmt">Vinyl</div><div class="stock"><span class="stockpill low">Low Stock</span></div><div class="price">£29.99</div><div class="addbtn">Add</div></div>
</div>
<div class="footer"><span>Shipped from the warehouse floor, not a showroom</span><span>Returns · Contact · Wantlist</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f5; color: #21201f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f5; color: #21201f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #21201f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #21201f; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #f7f7f5; color: #21201f;
border: 1px solid #21201f; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #f7f7f5; color: #363940;
border: 1px solid #c2c1c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.4px; background: #af3535; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f7f5; font-family:Georgia,'Times New Roman',serif; color:#363940; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#f7f7f5;border-bottom:1px solid #e9e9e9;}
.logo{font-size:22px;font-weight:700;color:#21201f;}
.navlinks{display:flex;gap:22px;font-family:Arial,sans-serif;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.3px;color:#21201f;}
.navlinks .on{border-bottom:2px solid #21201f;padding-bottom:20px;}
.searchpill{width:170px;height:36px;border:1px solid #d3d2d2;border-radius:9999px;display:flex;align-items:center;padding:0 16px;font-family:Arial,sans-serif;font-size:11px;color:#757575;}
.hero{height:220px;background:#eeeeec;display:flex;align-items:center;padding:0 40px;}
.h1{font-size:34px;font-weight:600;color:#21201f;margin:0 0 12px;letter-spacing:-0.3px;}
.hsub{font-family:Arial,sans-serif;font-size:14px;color:#363940;margin:0 0 16px;max-width:380px;}
.btn{display:inline-block;background:#21201f;color:#fff;font-family:Arial,sans-serif;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:13px 30px;border-radius:9999px;}
.section{padding:20px 32px 0;}
.sectitle{font-size:19px;font-weight:600;color:#21201f;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#f7f7f5;border-radius:8px;padding:8px;}
.thumb{height:88px;border-radius:4px;margin-bottom:8px;position:relative;overflow:hidden;}
.badge{position:absolute;top:6px;left:6px;font-family:Arial,sans-serif;font-size:9px;font-weight:600;text-transform:uppercase;padding:3px 7px;border-radius:9999px;}
.ptitle{font-size:15px;color:#21201f;}
.pprice{font-family:Arial,sans-serif;font-size:13px;color:#757575;margin-top:3px;}
.stars{font-size:11px;color:#21201f;margin-top:2px;}
</style>
<div class="nav">
<div class="logo">Quince</div>
<div class="navlinks"><div class="on">Women</div><div>Men</div><div>Home</div><div>Kids</div></div>
<div class="searchpill">Search products...</div>
</div>
<div class="hero">
<div><div class="h1">Luxury Essentials, Radically Low Prices</div><div class="hsub">Direct-to-consumer quality without the middleman markup — considered goods for daily life.</div><div class="btn">Shop New Arrivals</div></div>
</div>
<div class="section">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#dfdace;"><div class="badge" style="background:#af3535;color:#fff;">New</div></div><div class="ptitle">Mongolian Cashmere Sweater</div><div class="stars">★★★★★</div><div class="pprice">$60.00</div></div>
<div class="card"><div class="thumb" style="background:#d0d3bb;"><div class="badge" style="background:#d0d3bb;color:#21201f;">Sustainable</div></div><div class="ptitle">Organic Cotton Sheet Set</div><div class="stars">★★★★★</div><div class="pprice">$110.00</div></div>
<div class="card"><div class="thumb" style="background:#e5ccbc;"><div class="badge" style="background:#ffa273;color:#21201f;">Sale</div></div><div class="ptitle">Italian Leather Tote</div><div class="stars">★★★★☆</div><div class="pprice">$148.00</div></div>
<div class="card"><div class="thumb" style="background:#c8d3f1;"></div><div class="ptitle">Washable Silk Pillowcase</div><div class="stars">★★★★★</div><div class="pprice">$50.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1e1d1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1e1d1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1e1d1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #b5b5b5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #38b0de; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #1e1d1f;
border: 1px solid #38b0de; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #373737;
border: 1px solid #c7c6c7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b5b5b5; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f2b5c4; color: #1e1d1f;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Messina Sans','Helvetica Neue',sans-serif; color:#373737; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #f5eacc;}
.logo{font-family:'Apris',Georgia,serif;font-size:20px;font-weight:700;color:#1e1d1f;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;}
.icons{display:flex;gap:12px;align-items:center;}
.cartbadge{position:relative;}
.cartbadge:after{content:'2';position:absolute;top:-8px;right:-10px;background:#38b0de;color:#fff;border-radius:9999px;width:16px;height:16px;font-size:9px;display:flex;align-items:center;justify-content:center;}
.hero{height:220px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 32px;}
.hero h1{font-family:'Apris',Georgia,serif;font-size:34px;font-weight:700;margin:0 0 8px;letter-spacing:-.5px;}
.hero p{font-size:15px;color:#373737;margin:0 0 14px;}
.cta{display:inline-block;background:#38b0de;color:#fff;font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:12px 24px;border-radius:8px;}
.chips{display:flex;gap:10px;justify-content:center;padding:16px 0 0;}
.chip{border-radius:9999px;font-size:13px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;padding:8px 16px;background:#f6ecd7;}
.chip.active{background:#38b0de;color:#fff;}
.grid{display:flex;gap:16px;padding:16px 32px 0;justify-content:center;}
.card{width:206px;border-radius:12px;padding:8px;}
.thumb{aspect-ratio:1/1;height:150px;border-radius:8px;margin-bottom:8px;position:relative;}
.badge{position:absolute;top:8px;left:8px;color:#1e1d1f;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-radius:9999px;padding:2px 8px;}
.ptitle{font-size:16px;font-weight:600;margin-top:4px;}
.pprice{font-size:16px;font-weight:600;color:#373737;margin-top:2px;}
.swatchrow{display:flex;gap:6px;margin-top:8px;}
.swatch{width:20px;height:20px;border-radius:9999px;border:2px solid #fff;box-shadow:0 0 0 1px #ededed;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#fff;border-top:1px solid #ededed;display:flex;align-items:center;justify-content:center;font-size:12px;color:#b5b5b5;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Velvet Caviar</div>
<div class="navlinks"><div>New</div><div>Phone Cases</div><div>Accessories</div></div>
<div class="icons"><div class="cartbadge">Cart</div></div>
</div>
<div class="hero">
<h1>Your case, your statement.</h1>
<p>Protective phone cases made to be the accessory, not the afterthought.</p>
<div class="cta">Shop New Arrivals</div>
<div class="chips">
<div class="chip active">All</div>
<div class="chip">Best Sellers</div>
<div class="chip">Limited Drops</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e9c5bd,#e3c1ab)"><div class="badge" style="background:#f2b5c4">New</div></div><div class="ptitle">Blush Marble Case</div><div class="pprice">$38.00</div><div class="swatchrow"><div class="swatch" style="background:#e9c5bd"></div><div class="swatch" style="background:#9a66cc"></div><div class="swatch" style="background:#38b0de"></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#38b0de,#2a8bb0)"><div class="badge" style="background:#ff8041;color:#fff">Sale</div></div><div class="ptitle">Cyan Grip Case</div><div class="pprice">$32.00</div><div class="swatchrow"><div class="swatch" style="background:#38b0de"></div><div class="swatch" style="background:#e3c1ab"></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#9a66cc,#f2b5c4)"></div><div class="ptitle">Lavender Bloom Case</div><div class="pprice">$38.00</div><div class="swatchrow"><div class="swatch" style="background:#9a66cc"></div><div class="swatch" style="background:#f2b5c4"></div></div></div>
</div>
<div class="footer">Free shipping over $50 · Easy 30-day returns</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00ccb4; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00ccb4; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #09655a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #a3ffe8; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00ccb4; color: #000000;
border: 1px solid #a3ffe8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00ccb4; color: #111111;
border: 1px solid #03ae9a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #09655a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1ad4bc; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f7f9; color:#262626; box-sizing:border-box;
font-family:"PingFang TC","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#ffffff; }
.logo { font-size:20px; font-weight:600; color:#00ccb4; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#595959; }
.btn-outline { background:transparent; color:#00ccb4; border:2px solid #dcf9f3; border-radius:8px;
padding:10px 20px; height:42px; font-size:16px; font-weight:600; display:flex; align-items:center; }
.hero { padding:28px 36px; text-align:center; }
.hero h1 { font-size:26px; font-weight:600; margin:0 0 8px; }
.hero p { font-size:14px; color:rgba(0,0,0,0.65); margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 36px 24px; }
.card { background:#ffffff; border-radius:8px; padding:14px; }
.card .thumb { height:90px; border-radius:8px; margin-bottom:10px; background:linear-gradient(135deg,#a3ffe8,#23d9bd); }
.card h3 { font-size:14px; font-weight:600; margin:0 0 6px; }
.card .tags { display:flex; gap:6px; }
.chip { background:rgba(0,0,0,0.04); color:rgba(0,0,0,0.65); border-radius:20px; padding:0 10px;
height:24px; font-size:11px; display:flex; align-items:center; }
.promo { margin:0 36px 24px; background:linear-gradient(90deg,#fa8c16,#f65f55); border-radius:12px;
padding:18px 22px; color:#ffffff; display:flex; justify-content:space-between; align-items:center; }
.promo h2 { font-size:18px; margin:0; }
.promo .btn-white { background:#ffffff; color:#fa8c16; border-radius:8px; padding:8px 18px; font-size:13px;
font-weight:600; }
.footer-row { padding:0 36px 20px; display:flex; gap:14px; }
.footer-row .card { flex:1; }
</style></head>
<body>
<nav>
<span class="logo">Hahow</span>
<div class="navlinks"><span>Explore Courses</span><span>For Business</span><span>Become an Instructor</span></div>
<span class="btn-outline">Get Started</span>
</nav>
<section class="hero">
<h1>Good School · Everyone has knowledge worth sharing</h1>
<p>Join over a million learners and find your next class on Hahow</p>
</section>
<div class="grid">
<div class="card"><div class="thumb"></div><h3>Intro to UI/UX Design</h3><div class="tags"><span class="chip">Design</span><span class="chip">Popular</span></div></div>
<div class="card"><div class="thumb"></div><h3>Python Data Analysis</h3><div class="tags"><span class="chip">Coding</span><span class="chip">New</span></div></div>
<div class="card"><div class="thumb"></div><h3>Photography Fundamentals</h3><div class="tags"><span class="chip">Photography</span></div></div>
</div>
<div class="promo">
<h2>Limited Time: 20% Off Your First Course</h2>
<span class="btn-white">View Plans</span>
</div>
<div class="footer-row">
<div class="card"><h3>Become an Instructor</h3><p style="font-size:12px;color:rgba(0,0,0,0.65);margin:0;">Share your expertise and start your teaching journey.</p></div>
<div class="card"><h3>Corporate Training</h3><p style="font-size:12px;color:rgba(0,0,0,0.65);margin:0;">Build a custom learning plan for your team.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #545454; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #3a3b53;
border: 1px solid #c0c0c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #545454; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ebbf20; color: #141414;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:'Inter', Arial, sans-serif; color:#3a3b53; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#ffffff;border-bottom:1px solid #dedede;}
.logo{font-family:'Archivo', sans-serif;font-weight:700;font-size:19px;color:#141414;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#545454;}
.navlinks span:first-child{color:#108474;}
.cart{width:36px;height:36px;border-radius:9999px;background:#edf5f5;display:flex;align-items:center;justify-content:center;font-size:12px;color:#108474;font-weight:700;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;gap:30px;background:#edf5f5;}
.herotext{width:48%;}
.herotext h1{font-family:'Archivo',sans-serif;font-size:30px;font-weight:700;color:#141414;margin:0 0 12px;line-height:1.25;}
.herotext p{font-size:14px;color:#3a3b53;margin:0 0 18px;max-width:300px;}
.herocta{display:inline-block;background:#108474;color:#fff;font-family:'Archivo',sans-serif;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;border-radius:8px;padding:13px 26px;}
.herovis{width:44%;height:170px;border-radius:12px;background:linear-gradient(135deg,#ffffff,#edf5f5);border:1px solid #dedede;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.tooth{width:70px;height:80px;border-radius:50% 50% 40% 40%;background:#ffffff;box-shadow:0 6px 18px rgba(16,132,116,0.18);}
.tooth:before{content:'';display:block;width:30px;height:16px;background:#108474;border-radius:9999px;margin:14px auto 0;}
.grid{display:flex;gap:16px;padding:20px 40px 0;}
.card{width:200px;background:#ffffff;border-radius:12px;padding:14px;position:relative;box-shadow:0 1px 3px rgba(0,0,0,0.05);}
.badge{position:absolute;top:10px;left:10px;background:#ebbf20;color:#141414;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;border-radius:4px;padding:3px 8px;}
.thumb{height:96px;border-radius:8px;margin-bottom:10px;}
.ptitle{font-family:'Archivo',sans-serif;font-size:15px;font-weight:600;color:#141414;}
.stars{color:#ebbf20;font-size:11px;margin:4px 0;}
.pprice{font-size:14px;font-weight:600;color:#108474;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#333333;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.footer span{color:#eeeeee;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Smile Therapy</div>
<div class="navlinks"><span>Toothpaste</span><span>Whitening</span><span>Kits</span><span>Reviews</span></div>
<div class="cart">2</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Oral care that feels like self-care.</h1>
<p>Bright, teal-fresh routines designed to make brushing something you enjoy.</p>
<div class="herocta">Shop The Ritual</div>
</div>
<div class="herovis"><div class="tooth"></div></div>
</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#108474,#edf5f5)"></div><div class="ptitle">Whitening Duo</div><div class="stars">★★★★★</div><div class="pprice">$32.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#536cae,#edf5f5)"></div><div class="ptitle">Sonic Toothbrush</div><div class="stars">★★★★☆</div><div class="pprice">$68.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1990c6,#edf5f5)"></div><div class="ptitle">Fresh Mint Rinse</div><div class="stars">★★★★★</div><div class="pprice">$18.00</div></div>
</div>
<div class="footer"><span>© Smile Therapy — a gentler routine</span><span>FAQ · Shipping</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1979c3;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1979c3;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; margin: 0; color: #1979c3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #7d7d7d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; background: #006bb4; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; background: #ffffff; color: #006bb4;
border: 1px solid #006bb4; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #111111;
border: 1px solid #c6def0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7d7d7d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.5; background: #f6f6f6; color: #575757;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:'Open Sans',Arial,'Helvetica Neue',Helvetica,sans-serif; font-size:14px; }
* { box-sizing:border-box; }
nav { height:48px; background:#ffffff; border-bottom:1px solid #c6c6c6; display:flex; align-items:center;
justify-content:space-between; padding:0 24px; }
.brand { font-size:17px; font-weight:700; color:#006bb4; }
.navlinks { display:flex; gap:16px; }
.navlinks span { font-size:14px; font-weight:600; color:#111111; }
.searchRow { display:flex; padding:10px 24px; gap:0; }
.searchInput { flex:1; border:1px solid #bbbbbb; border-right:none; height:40px; display:flex; align-items:center;
padding:0 12px; font-size:14px; color:#959595; }
.searchBtn { background:#006bb4; color:#fff; font-size:14px; font-weight:700; padding:0 20px; height:40px;
display:flex; align-items:center; }
.breadcrumb { font-size:12px; color:#7d7d7d; padding:0 24px; margin-bottom:10px; }
.breadcrumb b { color:#1979c3; font-weight:400; }
.alert { margin:0 24px 12px; background:#fdf0d5; border:1px solid #c07600; color:#6f4400; font-size:13px;
padding:10px 16px; border-radius:4px; }
.body { display:flex; gap:16px; padding:0 24px; }
.grid { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { border:1px solid #c6c6c6; border-radius:4px; padding:14px; }
.photo { aspect-ratio:1/1; background:#f6f6f6; margin-bottom:8px; }
.c1-inner { background:linear-gradient(150deg,#cce6fb,#8fbfe0); }
.c2-inner { background:linear-gradient(150deg,#e8e8e8,#c2c2c2); }
.c3-inner { background:linear-gradient(150deg,#fdf0d5,#e0c080); }
.partno { font-family:Consolas,'Courier New',monospace; font-size:12px; color:#7d7d7d; }
.title { font-size:14px; font-weight:600; margin:4px 0; }
.price { font-size:20px; font-weight:700; }
.unit { font-size:13px; color:#7d7d7d; }
.addBtn { background:#f88431; color:#fff; font-size:14px; font-weight:700; text-align:center; padding:10px;
border-radius:4px; margin-top:8px; }
</style></head>
<body>
<nav>
<div class="brand">GO TO Pac</div>
<div class="navlinks"><span>Cleanroom</span><span>HVAC</span><span>Fasteners</span><span>Safety</span></div>
</nav>
<div class="searchRow">
<div class="searchInput">Search by part number, e.g. ULPA-2424</div>
<div class="searchBtn">Search</div>
</div>
<div class="breadcrumb">Home › Cleanroom › <b>HEPA Filters</b> › 24×24 › ULPA-Rated</div>
<div class="alert">Minimum order quantity: 4 units per case. Lead time: 5-7 business days.</div>
<div class="body">
<div class="grid">
<div class="card">
<div class="photo c1-inner"></div>
<div class="partno">PN-HF-24241</div>
<div class="title">ULPA HEPA Filter 24x24x11.5</div>
<div class="price">$189.00</div>
<div class="unit">/ each</div>
<div class="addBtn">Add to Cart</div>
</div>
<div class="card">
<div class="photo c2-inner"></div>
<div class="partno">PN-CR-88210</div>
<div class="title">Cleanroom Wiper Case, ISO 5</div>
<div class="price">$74.50</div>
<div class="unit">/ case of 50</div>
<div class="addBtn">Add to Cart</div>
</div>
<div class="card">
<div class="photo c3-inner"></div>
<div class="partno">PN-ACT-33019</div>
<div class="title">HVAC Actuator Panel, 24V</div>
<div class="price">$342.00</div>
<div class="unit">/ each</div>
<div class="addBtn">Add to Cart</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.25px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.5px; margin: 0; color: #6B6B6B; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #F47920; color: #FFFFFF;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #FFFFFF; color: #004F9F;
border: 1px solid #004F9F; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #FFFFFF; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B6B6B; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.5px; background: #F0F4F9; color: #004F9F;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:system-ui,'Segoe UI',Roboto,'Helvetica Neue',sans-serif; color:#313131; }
*{box-sizing:border-box;}
.topstripe{height:8px;background:#00336a;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #d9d9d9;}
.logo{font-size:18px;font-weight:700;color:#00336a;}
.search{flex:1;max-width:420px;height:32px;border:1px solid #909090;border-radius:4px;display:flex;align-items:center;padding:0 12px;font-size:12px;color:#6b6b6b;margin:0 20px;}
.cta{background:#c0392b;color:#fff;font-size:12px;font-weight:700;padding:8px 16px;border-radius:4px;}
.megabar{height:32px;background:#f0f0f0;display:flex;align-items:center;gap:18px;padding:0 30px;font-size:11px;font-weight:600;color:#003d7a;border-bottom:1px solid #d9d9d9;}
.breadcrumb{padding:10px 30px 0;font-size:11px;color:#909090;}
.spectable{display:flex;gap:1px;background:#d9d9d9;margin:10px 30px 0;}
.speccell{flex:1;background:#fafafa;padding:8px 10px;}
.speclabel{font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#6b6b6b;}
.specvalue{font-family:'Courier New',monospace;font-size:12px;color:#313131;margin-top:2px;}
.grid{display:flex;gap:12px;padding:14px 30px 0;}
.card{width:216px;border:1px solid #d9d9d9;border-radius:8px;padding:8px;}
.thumb{height:88px;border-radius:4px;margin-bottom:6px;}
.sku{font-family:'Courier New',monospace;font-size:10px;color:#909090;}
.ptitle{font-size:12px;font-weight:600;color:#313131;margin-top:2px;}
.pstock{font-size:10px;font-weight:700;color:#27ae60;margin-top:4px;}
.pprice{font-size:13px;font-weight:700;color:#313131;margin-top:2px;}
</style>
<div class="topstripe"></div>
<div class="nav">
<div class="logo">Motion Industries</div>
<div class="search">Search part number, brand, or keyword...</div>
<div class="cta">Sign In</div>
</div>
<div class="megabar"><span>Bearings</span><span>Power Transmission</span><span>Electrical</span><span>Pneumatics</span><span>Fluid Power</span><span>Safety</span></div>
<div class="breadcrumb">Home / Bearings / Ball Bearings / 6205-2RS</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Bore</div><div class="specvalue">25mm</div></div>
<div class="speccell"><div class="speclabel">OD</div><div class="specvalue">52mm</div></div>
<div class="speccell"><div class="speclabel">Width</div><div class="specvalue">15mm</div></div>
<div class="speccell"><div class="speclabel">Seal Type</div><div class="specvalue">2RS</div></div>
<div class="speccell"><div class="speclabel">Mfr</div><div class="specvalue">MI-6205</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00336a,#a8c4e5)"></div><div class="sku">SKU 62052RS</div><div class="ptitle">Sealed Ball Bearing 6205</div><div class="pstock">In Stock: 412</div><div class="pprice">$8.42</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003d7a,#80a7cf)"></div><div class="sku">SKU PB-6408</div><div class="ptitle">Pillow Block Bearing</div><div class="pstock">In Stock: 88</div><div class="pprice">$24.10</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#004f9f,#1a1a2e)"></div><div class="sku">SKU VB-3312</div><div class="ptitle">V-Belt 3V Section</div><div class="pstock">In Stock: 1,204</div><div class="pprice">$11.75</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c0392b,#00336a)"></div><div class="sku">SKU SP-2050</div><div class="ptitle">Roller Chain Sprocket</div><div class="pstock">In Stock: 205</div><div class="pprice">$19.90</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0f0fa; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0f0fa; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #75757a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f0f0fa; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f0f0fa; color: #111111;
border: 1px solid #ccccd5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #75757a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cacad2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f0f0fa; box-sizing:border-box;
font-family:"D-DIN", Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px;
background:radial-gradient(ellipse at 30% 20%, #1a1a26 0%, #050508 55%, #000 100%); }
.stage::before { content:''; position:absolute; inset:0;
background-image:radial-gradient(1px 1px at 60px 90px, #fff 50%, transparent 50%),
radial-gradient(1px 1px at 220px 40px, #fff 50%, transparent 50%),
radial-gradient(1px 1px at 400px 150px, #fff 50%, transparent 50%),
radial-gradient(1px 1px at 700px 80px, #fff 50%, transparent 50%),
radial-gradient(1.5px 1.5px at 850px 200px, #fff 50%, transparent 50%),
radial-gradient(1px 1px at 500px 300px, #fff 50%, transparent 50%);
opacity:0.6; }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:15px; letter-spacing:0.12em; font-weight:400; }
.navlinks { display:flex; gap:24px; font-size:13.3px; color:#c9c9d6; }
.navlinks span.on { color:#fff; border-bottom:1px solid #fff; padding-bottom:4px; }
.hero { position:relative; z-index:2; padding:110px 0 0; text-align:center; }
.hero h1 { font-size:44px; font-weight:400; letter-spacing:0.02em; margin:0 0 16px; }
.hero p { font-size:15px; color:#c9c9d6; margin:0 0 26px; }
.btn { display:inline-block; background:rgba(0,0,0,0.5); color:#f0f0fa; border:1px solid rgba(240,240,250,0.35);
border-radius:4px; padding:14px 20px; font-size:14px; }
.stats { position:relative; z-index:2; display:flex; justify-content:center; gap:70px; margin-top:80px; }
.stat h2 { font-size:30px; font-weight:400; margin:0; }
.stat span { font-size:12px; color:#9a9aa8; letter-spacing:0.06em; text-transform:uppercase; }
.circ { position:absolute; z-index:2; right:40px; bottom:26px; width:48px; height:48px; border-radius:32px;
background:rgba(240,240,250,0.1); display:flex; align-items:center; justify-content:center; font-size:13px; color:#000; }
</style></head>
<body>
<div class="stage">
<nav>
<p class="brand">SpaceX</p>
<div class="navlinks"><span class="on">FALCON</span><span>DRAGON</span><span>STARSHIP</span><span>STARLINK</span><span>HUMAN SPACEFLIGHT</span></div>
<span class="btn">LEARN MORE</span>
</nav>
<div class="hero">
<h1>MAKING LIFE MULTIPLANETARY</h1>
<p>Fully and rapidly reusable rockets, built for Earth orbit, the Moon, Mars, and beyond.</p>
<span class="btn">RESERVE YOUR RIDE</span>
</div>
<div class="stats">
<div class="stat"><h2>400+</h2><span>Launches</span></div>
<div class="stat"><h2>300+</h2><span>Booster Landings</span></div>
<div class="stat"><h2>2</h2><span>Reusable Vehicles</span></div>
</div>
<div class="circ">↻</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f3f3; color: #0e0e0e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f3f3; color: #0e0e0e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #0e0e0e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676767; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #0048ff; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #f3f3f3; color: #0e0e0e;
border: 1px solid #0048ff; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f3f3f3; color: #2f2f2f;
border: 1px solid #bababa; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676767; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #efcf07; color: #0e0e0e;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f3f3f3; font-family:'Gotham','Helvetica Neue',Helvetica,Arial,sans-serif; color:#2f2f2f; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dedede;background:#fff;}
.logo{font-size:19px;font-weight:700;color:#0e0e0e;text-transform:uppercase;letter-spacing:.3px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:700;color:#0e0e0e;text-transform:uppercase;}
.navcta{background:#0048ff;color:#fff;font-size:12px;font-weight:700;padding:9px 18px;border-radius:4px;}
.hero{height:250px;display:flex;align-items:center;padding:0 36px;background:#0e0e0e;}
.herotext{width:420px;}
.badge{display:inline-block;background:#efcf07;color:#0e0e0e;font-size:10px;font-weight:700;padding:4px 10px;border-radius:4px;margin-bottom:16px;text-transform:uppercase;}
.headline{font-size:30px;font-weight:700;color:#fff;margin-bottom:12px;line-height:1.2;text-transform:uppercase;letter-spacing:-0.2px;}
.sub{font-size:13px;color:#b2b2b2;margin-bottom:20px;max-width:320px;}
.btn{display:inline-block;background:#0048ff;color:#fff;font-size:13px;font-weight:700;padding:12px 26px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;}
.cable{width:220px;height:180px;margin-left:70px;position:relative;}
.band{position:absolute;left:40px;top:70px;width:150px;height:16px;background:#0048ff;border-radius:8px;}
.band:before{content:'';position:absolute;left:60px;top:-30px;width:16px;height:100px;background:#0048ff;border-radius:8px;}
.sec{padding:20px 36px 0;}
.sectitle{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#2f2f2f;margin-bottom:16px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border-radius:4px;padding:14px;box-shadow:0 2px 6px rgba(0,0,0,.06);position:relative;}
.tag{position:absolute;top:10px;left:10px;background:#efcf07;color:#0e0e0e;font-size:9px;font-weight:700;padding:3px 8px;border-radius:4px;text-transform:uppercase;}
.thumb{height:88px;border-radius:4px;margin-bottom:10px;}
.pname{font-size:13px;font-weight:700;color:#0e0e0e;}
.pprice{font-size:13px;color:#0048ff;font-weight:700;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Nomad</div>
<div class="navlinks"><span>Cables</span><span>Straps</span><span>Cases</span></div>
<div class="navcta">Shop All</div>
</div>
<div class="hero">
<div class="herotext">
<div class="badge">Limited Edition</div>
<div class="headline">Precision instruments for everyday carry.</div>
<div class="sub">Titanium, kevlar, and machined aluminum — every pixel is either structural or functional.</div>
<div class="btn">Shop Cables</div>
</div>
<div class="cable"><div class="band"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="tag">Gold</div><div class="thumb" style="background:linear-gradient(135deg,#efcf07,#0e0e0e)"></div><div class="pname">Titanium Cable Tie</div><div class="pprice">$49.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0048ff,#0e0e0e)"></div><div class="pname">Kevlar USB-C Cable</div><div class="pprice">$34.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0e0e0e,#0048ff)"></div><div class="pname">Titanium Watch Band</div><div class="pprice">$299.95</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #593bfb; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #593bfb; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #afa1f8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5ce0b8; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #593bfb; color: #5ce0b8;
border: 1px solid #5ce0b8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #593bfb; color: #f5f5f5;
border: 1px solid #7259fa; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #afa1f8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5955f0; color: #5ce0b8;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0F0F12; color:#F2F1F6; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { display:flex; width:960px; height:640px; }
.photocol { width:560px; height:640px; position:relative; background:linear-gradient(160deg,#2a2733,#0F0F12 70%); }
.dots { position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:6px; }
.dots i { width:6px; height:6px; border-radius:3px; background:rgba(255,255,255,0.45); }
.dots i.on { width:18px; background:#fff; }
.floatbtn { position:absolute; top:18px; width:38px; height:38px; border-radius:50%; background:rgba(15,15,18,0.55); display:flex; align-items:center; justify-content:center; }
.fb1 { left:18px; } .fb2 { right:64px; } .fb3 { right:18px; color:#5CE0B8; }
.detail { flex:1; display:flex; flex-direction:column; padding:24px 30px; position:relative; }
.title { font-size:23px; font-weight:800; }
.specs { display:flex; gap:10px; margin:14px 0; }
.spec { flex:1; background:#1A1A1F; border:1px solid #2D2D35; border-radius:12px; padding:10px; text-align:center; }
.spec .v { font-size:13px; font-weight:700; }
.spec .l { font-size:10px; color:#A4A2B3; margin-top:2px; }
.spec .ic { color:#5CE0B8; font-size:16px; }
.host { display:flex; align-items:center; gap:12px; background:#1A1A1F; border:1px solid #2D2D35; border-radius:14px; padding:12px 14px; margin-bottom:14px; }
.hav { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#593BFB,#5CE0B8); }
.hname { font-size:15px; font-weight:700; }
.allstar { background:rgba(92,224,184,0.16); color:#5CE0B8; font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; margin-left:8px; }
.hsub { font-size:12px; color:#A4A2B3; margin-top:2px; }
.bookbar { margin-top:auto; display:flex; align-items:center; padding-top:14px; border-top:1px solid #2D2D35; }
.price { font-size:20px; font-weight:800; }
.priceunit { font-size:13px; color:#A4A2B3; }
.esttotal { font-size:11px; color:#5CE0B8; margin-top:2px; }
.ctabtn { margin-left:auto; background:#593BFB; color:#fff; font-weight:800; font-size:16px; padding:14px 32px; border-radius:10px; }
</style></head>
<body>
<div class="stage">
<div class="photocol">
<div class="floatbtn fb1">‹</div>
<div class="floatbtn fb2">↗</div>
<div class="floatbtn fb3">♡</div>
<div class="dots"><i class="on"></i><i></i><i></i><i></i></div>
</div>
<div class="detail">
<div class="title">Turo (iOS) · 2023</div>
<div class="specs">
<div class="spec"><div class="ic">⚡</div><div class="v">Electric</div><div class="l">Fuel</div></div>
<div class="spec"><div class="ic">👤</div><div class="v">5 seats</div><div class="l">Capacity</div></div>
<div class="spec"><div class="ic">⚙</div><div class="v">Auto</div><div class="l">Transmission</div></div>
</div>
<div class="host">
<div class="hav"></div>
<div><div class="hname">Marcus J. <span class="allstar">★ ALL-STAR</span></div><div class="hsub">214 trips · Responds in ~10 min</div></div>
</div>
<p style="font-size:14px;color:#A4A2B3;line-height:1.5">Clean, quiet, and quick off the line — perfect for a coastal weekend. Free cancellation up to 24h before your trip.</p>
<div class="bookbar">
<div><div class="price">$83<span class="priceunit"> / day</span></div><div class="esttotal">$249 est. total · 3 days</div></div>
<div class="ctabtn">Continue</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00ed64; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00ed64; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #097436; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #001e2b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00ed64; color: #001e2b;
border: 1px solid #001e2b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00ed64; color: #111111;
border: 1px solid #03ca57; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #097436; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00cc5b; color: #001e2b;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Euclid Circular A", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:"MongoDB Value Serif", Georgia, "Times New Roman", serif; }
.mono { font-family:"Source Code Pro", "SFMono-Regular", Consolas, monospace; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #e7eeec; background:#ffffff; }
.brand { font-size:18px; font-weight:700; color:#001e2b; margin:0; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#001e2b; }
.navcta { background:#00ed64; color:#001e2b; border:1px solid #001e2b; border-radius:4px;
padding:11px 22px; font-size:14px; font-weight:500; letter-spacing:0.16px; }
.hero { flex:0 0 auto; background:#001e2b; display:flex; align-items:center; gap:28px; padding:26px 40px; }
.herotext { flex:1; }
.herotext .eyebrow { color:#00684a; background:#e9f9ef; display:inline-block; padding:3px 10px; border-radius:4px;
font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:10px; }
.herotext h1 { color:#ffffff; font-size:34px; font-weight:400; line-height:1.2; margin:0 0 10px; }
.herotext p { color:#c1c7c5; font-size:13.5px; line-height:1.5; margin:0 0 14px; max-width:340px; }
.herobtn { background:#00ed64; color:#001e2b; border:1px solid #001e2b; border-radius:4px;
padding:11px 22px; font-size:14px; font-weight:500; letter-spacing:0.16px; }
.codepanel { flex:1; background:#112733; border-radius:8px; padding:16px 18px; color:#d7e3e0; font-size:12px;
line-height:1.55; }
.codepanel .cmt { color:#6f8a86; }
.codepanel .key { color:#00ed64; }
.codepanel .str { color:#7fd3ff; }
.codepanel .num { color:#ffb86b; }
.panels { flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:20px 40px; align-content:center; }
.panel { background:#ffffff; border:1px solid #e7eeec; border-radius:28px; padding:20px 22px;
box-shadow:rgba(0,0,0,0.1) 0px 2px 4px 0px; }
.panel h3 { font-size:16px; font-weight:700; color:#000000; margin:0 0 6px; }
.panel p { font-size:12.5px; color:#3d4f58; margin:0; line-height:1.45; }
footer { flex:0 0 44px; background:#f9fbfa; border-top:1px solid #e7eeec; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; font-size:12px; color:#3d4f58; }
.pill { background:#f9fbfa; border:1px solid #889397; border-radius:6px; padding:3px 10px; font-size:12px; color:#001e2b; }
</style></head>
<body>
<nav>
<p class="brand">MongoDB</p>
<div class="navlinks"><span>Products</span><span>Solutions</span><span>Docs</span><span>Pricing</span></div>
<button class="navcta">Get Started</button>
</nav>
<section class="hero">
<div class="herotext">
<span class="eyebrow">Atlas</span>
<h1 class="serif">Build faster on a<br>flexible document model</h1>
<p>The developer data platform for modern applications — one document model, any workload, any scale.</p>
<button class="herobtn">Get Started</button>
</div>
<div class="codepanel mono">
<div><span class="cmt">// insert a document</span></div>
<div>db.<span class="key">orders</span>.insertOne({</div>
<div> customer: <span class="str">"Alex Kim"</span>,</div>
<div> items: [<span class="str">"sensor-01"</span>, <span class="str">"hub-04"</span>],</div>
<div> total: <span class="num">248.90</span>,</div>
<div> status: <span class="str">"shipped"</span></div>
<div>})</div>
<div style="margin-top:8px;"><span class="cmt">// { acknowledged: true, insertedId: ObjectId(...) }</span></div>
</div>
</section>
<section class="panels">
<div class="panel"><h3>Document Model</h3><p>Store data the way your application already thinks about it — no rigid schema required.</p></div>
<div class="panel"><h3>Elastic Scale</h3><p>Scale horizontally across regions and clouds without rearchitecting your application.</p></div>
<div class="panel"><h3>Built-in Search</h3><p>Run full-text and vector search directly alongside your operational data.</p></div>
</section>
<footer>
<span class="pill">v7.2 · Community Edition</span>
<span>© MongoDB</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #f07d28; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #ffffff; color: #1a1a1a;
border: 1px solid #f07d28; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.2px; background: #f5f5f5; color: #3a3a3a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:system-ui, -apple-system, 'Inter', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; border-bottom:1px solid #efefef; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#1a1a1a; font-weight:500; }
.cart { width:28px; height:28px; border-radius:4px; background:#f5f5f5; position:relative; }
.cart::after { content:''; position:absolute; top:-4px; right:-4px; width:12px; height:12px; border-radius:999px; background:#f07d28; }
main { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.hero { flex:1 1 auto; background:#111111; color:#f0f0f0; display:flex; align-items:center; gap:26px;
padding:0 30px; min-height:0; }
.hero-copy { flex:1; }
.hero-copy h1 { font-size:32px; font-weight:700; letter-spacing:-0.4px; margin:0 0 8px; line-height:1.15; }
.hero-copy p { font-size:14px; color:#c8c8c8; margin:0 0 14px; max-width:340px; }
.hero-copy button { background:#f07d28; color:#fff; border:none; border-radius:4px; padding:12px 24px;
font-weight:600; font-size:15px; }
.kb { flex:0 0 300px; height:150px; border-radius:4px; position:relative;
background:linear-gradient(155deg,#2a2a2a,#151515 60%); border:1px solid #333; }
.kb::after { content:''; position:absolute; left:16px; right:16px; top:16px; bottom:16px; border-radius:2px;
background-image:repeating-linear-gradient(90deg, #3a3a3a 0 26px, #202020 26px 30px);
box-shadow:inset 0 0 20px rgba(240,125,40,0.25); }
.rgb-strip { flex:0 0 6px; border-radius:999px; margin:14px 30px 0;
background:linear-gradient(90deg,#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#8b00ff); }
.spec-row { flex:0 0 auto; display:flex; gap:0; padding:14px 30px 18px; }
.spec { flex:1; padding:0 16px; border-left:1px solid #e0e0e0; }
.spec:first-child { border-left:none; padding-left:0; }
.spec .label { font-size:11px; font-weight:600; letter-spacing:0.6px; text-transform:uppercase; color:#767676; margin:0 0 4px; }
.spec .value { font-size:13px; margin:0; }
footer { flex:0 0 auto; height:52px; background:#111111; color:#767676; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Anne Pro</p>
<div class="navlinks"><span>Keyboards</span><span>Switches</span><span>Keycaps</span></div>
<div class="cart"></div>
</nav>
<main>
<div class="hero">
<div class="hero-copy">
<h1>60% is the whole point.</h1>
<p>Bluetooth 5.0, hot-swappable switches, and full RGB — packed into a footprint that gives your desk room to breathe.</p>
<button>Add to Cart — $89</button>
</div>
<div class="kb"></div>
</div>
<div class="rgb-strip"></div>
<div class="spec-row">
<div class="spec"><p class="label">Layout</p><p class="value">60% ANSI, 61 keys</p></div>
<div class="spec"><p class="label">Connectivity</p><p class="value">BT 5.0 / 2.4GHz / USB-C</p></div>
<div class="spec"><p class="label">Battery</p><p class="value">1900mAh, ~100hrs</p></div>
<div class="spec"><p class="label">Switches</p><p class="value">Hot-swap, 3-pin/5-pin</p></div>
</div>
</main>
<footer>
<span>© Anne Pro</span>
<span>Firmware · QMK Docs · Community</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2b2b3b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2b2b3b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9a9aa1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2b2b3b; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2b2b3b; color: #f5f5f5;
border: 1px solid #4b4b59; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9aa1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4d4d5a; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.display { font-family:"KmrApparat", "Pretendard", sans-serif; }
nav { height:64px; display:flex; align-items:center; padding:0 40px; }
.brand { font-size:16px; font-weight:700; color:#2b2b3b; margin:0; }
.navlinks { display:flex; gap:0; margin-left:40px; }
.navlinks span { font-size:16px; padding:16px; color:#000000; }
.navctl { margin-left:auto; background:rgba(196,196,212,0.5); color:#000000; border-radius:28px;
padding:0 18px; height:36px; display:flex; align-items:center; font-size:13.3px; }
.hero { display:flex; padding:36px 40px 0; gap:30px; }
.hero-text { flex:1; padding-top:20px; }
.hero h1 { font-size:52px; font-weight:700; line-height:1.08; letter-spacing:-1.3px; color:#2b2b3b; margin:0 0 18px; max-width:460px; }
.hero p { font-size:16px; font-weight:400; line-height:1.6; color:#5a5a72; margin:0; max-width:380px; letter-spacing:-0.16px; }
.grid-art { width:340px; height:300px; position:relative; background:#2b2b3b; overflow:hidden; }
.grid-art .lines { position:absolute; inset:0;
background-image: linear-gradient(#5a5a72 1px, transparent 1px), linear-gradient(90deg, #5a5a72 1px, transparent 1px);
background-size:34px 34px; opacity:0.3; }
.grid-art .node { position:absolute; width:10px; height:10px; background:#8d8da5; }
.n1{ top:40px; left:60px;} .n2{ top:110px; left:180px;} .n3{ top:200px; left:90px;} .n4{ top:60px; left:260px;} .n5{top:230px;left:250px;}
.grid-art .caption { position:absolute; bottom:14px; left:16px; font-size:12px; color:#c4c4d4; letter-spacing:0.04em; }
.stats { display:flex; gap:0; padding:34px 40px; border-top:1px solid #ececf1; margin-top:26px; }
.stat { flex:1; padding-right:24px; }
.stat .n { font-size:13.3px; color:#8d8da5; font-weight:400; }
.stat .v { font-size:24px; color:#2b2b3b; font-weight:700; margin-top:4px; }
</style></head>
<body>
<nav>
<p class="brand display">MakinaRocks</p>
<div class="navlinks"><span>Solutions</span><span>Runway</span><span>Research</span><span>Company</span></div>
<div class="navctl">Request Demo</div>
</nav>
<div class="hero">
<div class="hero-text">
<h1 class="display">Transforming industries with specialized AI</h1>
<p>Enterprise AI OS built for harsh, unpredictable environments — from factory floor to field operations.</p>
</div>
<div class="grid-art">
<div class="lines"></div>
<div class="node n1"></div><div class="node n2"></div><div class="node n3"></div><div class="node n4"></div><div class="node n5"></div>
<div class="caption">RUNWAY / DEPLOYMENT MAP</div>
</div>
</div>
<div class="stats">
<div class="stat"><div class="n">MODELS DEPLOYED</div><div class="v">6,000+</div></div>
<div class="stat"><div class="n">R&D WORKFORCE SHARE</div><div class="v">70%+</div></div>
<div class="stat"><div class="n">FOUNDED</div><div class="v">2017</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:Akkurat,"Source Sans Pro",-apple-system,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #000000; }
.brand { font-weight:700; font-size:20px; letter-spacing:-0.5px; font-stretch:condensed; }
.navlinks { display:flex; gap:18px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; }
.btn { background:#e90c17; color:#ffffff; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
padding:10px 20px; border-radius:2px; }
.lead { display:flex; gap:24px; padding:20px 32px; border-bottom:1px solid #cccccc; }
.lead .main { flex:2; }
.kicker { color:#e90c17; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; }
.lead h1 { font-size:38px; font-weight:700; line-height:0.98; margin:8px 0 10px; letter-spacing:-0.5px; }
.deck { font-size:17px; color:#333333; margin:0; line-height:1.36; font-style:italic; }
.byline { font-size:12px; font-weight:700; text-transform:uppercase; color:#767676; margin-top:10px; }
.lead .side { flex:1; display:flex; flex-direction:column; gap:14px; }
.story { border-top:1px solid #cccccc; padding-top:10px; }
.story .kicker { font-size:11px; }
.story h4 { font-size:16px; font-weight:600; margin:6px 0 4px; line-height:1.15; }
.story .by { font-size:11px; font-weight:700; text-transform:uppercase; color:#767676; }
.river { display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:14px 32px; }
.rcard { border-right:1px solid #cccccc; padding:0 16px; }
.rcard:last-child { border-right:none; }
.rimg { height:70px; background:#f4f4f4; margin-bottom:8px; }
.rcard h4 { font-size:16px; font-weight:600; margin:0 0 6px; line-height:1.1; }
.flag { background:#e90c17; color:#ffffff; font-size:11px; font-weight:700; text-transform:uppercase; padding:3px 8px; display:inline-block; margin-bottom:6px; }
</style></head>
<body>
<nav>
<span class="brand">WIRED</span>
<div class="navlinks"><span>Security</span><span>Business</span><span>Science</span><span>Culture</span><span>Gear</span></div>
<span class="btn">Subscribe</span>
</nav>
<section class="lead">
<div class="main">
<span class="kicker">Artificial Intelligence</span>
<h1>The AI Boom Has a Water Problem</h1>
<p class="deck">New data centers built to train the next generation of models are quietly straining the aquifers beneath them.</p>
<div class="byline">By Dana Whitfield</div>
</div>
<div class="side">
<div class="story"><span class="kicker">Security</span><h4>A phishing kit is teaching itself to write better emails</h4><span class="by">By Marcus Feld</span></div>
<div class="story"><span class="kicker">Science</span><h4>The quiet return of nuclear-powered spacecraft</h4><span class="by">By Priya Anand</span></div>
</div>
</section>
<section class="river">
<div class="rcard"><div class="rimg"></div><span class="flag">Business</span><h4>Inside the chip shortage nobody saw coming twice</h4></div>
<div class="rcard"><div class="rimg"></div><span class="flag">Culture</span><h4>Why every streaming app now looks the same</h4></div>
<div class="rcard"><div class="rimg"></div><span class="flag">Gear</span><h4>We tested the phone everyone said was dead on arrival</h4></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #404041;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #404041;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #404041; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.27; letter-spacing: 0.3px; background: #ffdb4a; color: #404041;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.27; letter-spacing: 0.3px; background: #ffffff; color: #404041;
border: 1px solid #ffdb4a; border-radius: 6px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #404041;
border: 1px solid #cfcfd0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #dc143c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#404041; box-sizing:border-box; font-family:'Quicksand', 'Exo 2', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#404041; display:flex; align-items:center; padding:0 24px; gap:20px; }
.brand { color:#ffdb4a; font-weight:700; font-size:20px; font-family:'Exo 2', sans-serif; }
.navlinks { display:flex; gap:16px; }
.navlinks div { color:#fff; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.search { margin-left:auto; background:#fff; border-radius:9999px; height:34px; width:230px; padding:0 14px; font-size:12px; color:#777; display:flex; align-items:center; }
.icons { color:#fff; font-size:16px; display:flex; gap:14px; }
.hero { background:#f7f7f7; padding:26px 24px; text-align:center; }
.hero h1 { font-family:'Exo 2', sans-serif; font-size:28px; font-weight:600; margin:0 0 8px; }
.hero p { font-size:14px; color:#58595b; margin:0 0 14px; }
.hero .cta { display:inline-block; background:#ffdb4a; color:#404041; font-family:'Exo 2', sans-serif; font-weight:600; font-size:14px; padding:12px 26px; border-radius:6px; }
.chips { display:flex; gap:10px; justify-content:center; padding:14px 0; }
.chip { background:#f7f7f7; padding:6px 16px; border-radius:9999px; font-size:12px; font-weight:600; }
.chip.active { background:#ffdb4a; color:#404041; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:6px 24px 20px; }
.card { background:#fff; border-radius:10px; padding:12px; }
.img { aspect-ratio:1/1; border-radius:6px; margin-bottom:8px; position:relative; }
.g1 { background:linear-gradient(135deg,#27a8e0,#0a4a68); }
.g2 { background:linear-gradient(135deg,#ffdb4a,#c99b1e); }
.g3 { background:linear-gradient(135deg,#dc143c,#7a0d20); }
.g4 { background:linear-gradient(135deg,#a89cc8,#4b3e6b); }
.badge { position:absolute; top:6px; left:6px; background:#27a8e0; color:#fff; font-size:9px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.name { font-family:'Exo 2', sans-serif; font-size:14px; font-weight:600; margin-bottom:2px; }
.price { font-size:15px; font-weight:700; }
.stars { color:#ffdb4a; font-size:12px; }
</style></head>
<body>
<nav>
<div class="brand">Fat Brain Toys</div>
<div class="navlinks"><div>Toys</div><div>Learning</div><div>Games</div><div>Gifts</div></div>
<div class="search">Search toys, ages, brands...</div>
<div class="icons">♡ 🛍</div>
</nav>
<div class="hero">
<h1>Curiosity Starts Here</h1>
<p>Award-winning educational toys for growing brains</p>
<div class="cta">Shop Bestsellers</div>
</div>
<div class="chips">
<div class="chip active">Ages 0-2</div><div class="chip">Ages 3-5</div><div class="chip">Ages 6-9</div><div class="chip">STEM</div><div class="chip">Puzzles</div>
</div>
<div class="grid">
<div class="card"><div class="img g1"><span class="badge">New</span></div><div class="name">Gravity Maze Junior</div><div class="stars">★★★★☆</div><div class="price">$29.99</div></div>
<div class="card"><div class="img g2"></div><div class="name">Rainbow Stacker Set</div><div class="stars">★★★★★</div><div class="price">$18.99</div></div>
<div class="card"><div class="img g3"><span class="badge">New</span></div><div class="name">Code & Go Robot Mouse</div><div class="stars">★★★★☆</div><div class="price">$44.99</div></div>
<div class="card"><div class="img g4"></div><div class="name">Bright Basics Puzzle Cube</div><div class="stars">★★★★★</div><div class="price">$22.99</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0052ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0052ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87acfa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #578bfa; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0052ff; color: #ffffff;
border: 1px solid #578bfa; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0052ff; color: #f5f5f5;
border: 1px solid #276cfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87acfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e5bfe; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0a0b0d; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:700; margin:0; }
.chips { display:flex; gap:10px; }
.chip { font-size:13px; color:#0667d0; background:#eef0f3; border-radius:16px; padding:6px 14px; }
.pill-primary { background:#0052ff; color:#fff; border-radius:9999px; padding:11px 22px; font-size:14px; font-weight:600; }
.hero { padding:28px 40px 30px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.hero h1 { font-size:52px; font-weight:400; line-height:1.0; letter-spacing:-1px; margin:0; max-width:640px; }
.hero p { font-size:16px; color:#5b616e; max-width:440px; margin:0; }
.row { display:flex; gap:10px; }
.pill-secondary { background:#eef0f3; color:#0a0b0d; border-radius:9999px; padding:10px 22px; font-size:14px; font-weight:600; }
.darkband { background:#0a0b0d; padding:26px 40px; display:flex; gap:20px; align-items:center; }
.stat { flex:1; text-align:center; color:#fff; }
.stat .num { font-size:34px; font-weight:400; font-family:Georgia, serif; }
.stat .lbl { font-size:12px; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:0.06em; margin-top:4px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:26px 40px; }
.card { background:#eef0f3; border-radius:16px; padding:18px; }
.card h3 { font-size:15px; margin:0 0 6px; font-weight:600; }
.card p { font-size:12px; color:#5b616e; margin:0; line-height:1.4; }
</style></head>
<body>
<nav>
<p class="brand">Coinbase</p>
<div class="chips"><span class="chip">Buy</span><span class="chip">Wallet</span><span class="chip">Prime</span><span class="chip">Base</span></div>
<button class="pill-primary">Sign up</button>
</nav>
<section class="hero">
<h1>Buy and sell crypto with trust</h1>
<p>The most regulated exchange in the US — recurring buys, self-custody, and institutional custody in one place.</p>
<div class="row">
<button class="pill-primary">Get started</button>
<button class="pill-secondary">Learn more</button>
</div>
</section>
<div class="darkband">
<div class="stat"><div class="num">$95B+</div><div class="lbl">Assets on platform</div></div>
<div class="stat"><div class="num">100+</div><div class="lbl">Countries served</div></div>
<div class="stat"><div class="num">2012</div><div class="lbl">Founded in SF</div></div>
</div>
<section class="cards">
<div class="card"><h3>Recurring buy</h3><p>Automate BTC and ETH purchases on your schedule.</p></div>
<div class="card"><h3>Coinbase Wallet</h3><p>Non-custodial storage for your keys and your DeFi.</p></div>
<div class="card"><h3>Coinbase Prime</h3><p>Institutional custody, trading, and reporting.</p></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0a; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0a; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9e9e9e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 1.5px; background: #c9a84c; color: #0a0a0a;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 1.5px; background: transparent; color: #ffffff;
border: 1px solid #c9a84c; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #141414; color: #ffffff;
border: 1px solid #474747; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9e9e9e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 1.2px; background: transparent; color: #c9a84c;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#0a0a0a; font-family:'Montserrat',Arial,sans-serif; color:#e8e8e8; }
*{box-sizing:border-box;}
.nav{height:60px;border-bottom:1px solid #2a2a2a;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:20px;font-weight:800;text-transform:uppercase;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#e8e8e8;}
.chiprow{display:flex;gap:8px;padding:14px 30px 0;}
.chip{background:#242424;border:1px solid #2a2a2a;border-radius:9999px;padding:6px 16px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#e8e8e8;}
.chip.active{background:#c9a84c;color:#0a0a0a;border-color:#c9a84c;}
.hero{height:220px;margin:16px 30px 0;position:relative;border-radius:0;overflow:hidden;background:radial-gradient(circle at 70% 30%,#242424,#0a0a0a 70%);}
.heroscrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.35) 45%,transparent 100%);}
.herocontent{position:absolute;left:24px;bottom:20px;z-index:2;}
.herotitle{font-size:34px;font-weight:800;text-transform:uppercase;color:#fff;margin:0 0 4px;letter-spacing:-.5px;}
.herosub{font-size:15px;font-weight:700;color:#c9a84c;margin:0 0 12px;}
.herobtn{display:inline-block;background:#c9a84c;color:#0a0a0a;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:12px 26px;}
.grid{display:flex;gap:14px;padding:18px 30px 0;}
.card{width:190px;background:#1a1a1a;}
.thumb{height:130px;background:#141414;position:relative;}
.thumb:before{content:'';position:absolute;left:50%;top:14px;transform:translateX(-50%);width:64px;height:104px;background:radial-gradient(circle at 40% 25%,#c9a84c,#1a1a1a 70%);border-radius:6px;}
.edb{position:absolute;top:8px;left:8px;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#c9a84c;border:1px solid #c9a84c;border-radius:2px;padding:2px 6px;}
.meta{padding:8px 10px;}
.ctitle{font-size:13px;color:#e8e8e8;margin-bottom:4px;}
.priceline{font-size:18px;font-weight:700;color:#c9a84c;}
.installment{font-size:11px;color:#9e9e9e;margin-top:2px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Sideshow Action F 2</div>
<div class="navlinks"><div>Sixth Scale</div><div>Premium Format</div><div>Statue</div><div>Diorama</div></div>
</div>
<div class="chiprow">
<div class="chip active">Star Realms</div>
<div class="chip">Marvel</div>
<div class="chip">DC</div>
<div class="chip">Lord of the Rings</div>
<div class="chip">Alien</div>
</div>
<div class="hero">
<div class="heroscrim"></div>
<div class="herocontent">
<div class="herotitle">Vanguard Commander</div>
<div class="herosub">Sixth Scale Figure · Limited Edition 1500</div>
<div class="herobtn">Pre-Order Now</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="edb">Sixth Scale</div></div><div class="meta"><div class="ctitle">Vanguard Commander</div><div class="priceline">$259.99</div><div class="installment">or 4 payments of $65.00</div></div></div>
<div class="card"><div class="thumb"><div class="edb">Statue</div></div><div class="meta"><div class="ctitle">Ashfall Sentinel</div><div class="priceline">$189.99</div><div class="installment">or 4 payments of $47.50</div></div></div>
<div class="card"><div class="thumb"><div class="edb">Premium</div></div><div class="meta"><div class="ctitle">Nightreach Marauder</div><div class="priceline">$449.99</div><div class="installment">or 4 payments of $112.50</div></div></div>
<div class="card"><div class="thumb"><div class="edb">Diorama</div></div><div class="meta"><div class="ctitle">Ruins of Kaldera</div><div class="priceline">$329.99</div><div class="installment">or 4 payments of $82.50</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5055b1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5055b1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #abadd6; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4dac27; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5055b1; color: #ffffff;
border: 1px solid #4dac27; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5055b1; color: #f5f5f5;
border: 1px solid #6a6fbc; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #abadd6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #50639b; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard","NotoSansKR","Apple SD Gothic Neo","Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
header { padding:16px 32px 12px; border-bottom:1px solid #eaeaea; }
.toprow { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.brand { font-size:20px; font-weight:700; letter-spacing:-0.3px; }
.utils { display:flex; gap:16px; font-size:12px; color:#595959; }
.search { display:flex; align-items:center; gap:10px; background:#ffffff; border:1px solid #eaeaea;
border-radius:24px; height:40px; padding:0 16px; max-width:420px; }
.search input-fake { flex:1; font-size:13px; color:#767676; }
.search .go { width:22px; height:22px; border-radius:50%; background:#5055b1; flex:0 0 auto; }
.tabs { display:flex; gap:22px; padding:12px 32px 0; border-bottom:1px solid #eaeaea; }
.tab { font-size:14px; color:#767676; padding-bottom:11px; }
.tab.on { color:#000000; font-weight:700; border-bottom:2px solid #5055b1; }
.section { padding:16px 32px 8px; display:flex; align-items:baseline; justify-content:space-between; }
.section h2 { font-size:20px; font-weight:700; margin:0; }
.section .more { font-size:12px; color:#278203; font-weight:700; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; padding:0 32px 16px; }
.card { border:1px solid #eaeaea; border-radius:8px; overflow:hidden; background:#ffffff; }
.cover { height:140px; position:relative; }
.cover::after { content:''; position:absolute; inset:10px; border:1px solid rgba(255,255,255,0.35); border-radius:2px; }
.c1 { background:linear-gradient(160deg,#5055b1,#8388d6); }
.c2 { background:linear-gradient(160deg,#4dac27,#8fd066); }
.c3 { background:linear-gradient(160deg,#c71e24,#e37a7d); }
.c4 { background:linear-gradient(160deg,#474c98,#7378c4); }
.c5 { background:linear-gradient(160deg,#595959,#9a9a9a); }
.meta { padding:9px 10px 11px; }
.title { font-size:12.5px; font-weight:500; line-height:1.35; height:34px; overflow:hidden; }
.author { font-size:11px; color:#767676; margin:4px 0 6px; }
.price-row { display:flex; align-items:baseline; gap:6px; }
.strike { font-size:10px; color:#767676; text-decoration:line-through; }
.price { font-size:13px; font-weight:700; color:#000000; }
.off { font-size:11px; font-weight:700; color:#c71e24; }
.btnrow { display:flex; gap:6px; margin-top:8px; }
.buy { flex:1; background:#5055b1; color:#ffffff; border:none; border-radius:6px; font-size:11px; font-weight:500; padding:7px 0; text-align:center; }
.cart { flex:1; background:#767676; color:#ffffff; border:none; border-radius:6px; font-size:11px; font-weight:500; padding:7px 0; text-align:center; }
.rail { margin:6px 32px 0; background:#f7f7f7; border-radius:8px; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; }
.rail-title { font-size:13px; color:#195800; font-weight:700; }
.rail-sub { font-size:11px; color:#767676; }
footer { padding:10px 32px; text-align:center; font-size:11px; color:#767676; border-top:1px solid #eaeaea; margin-top:8px; }
footer b { color:#195800; }
</style></head>
<body>
<header>
<div class="toprow">
<div class="brand">Kyobo Book Centre</div>
<div class="utils"><span>Login</span><span>Sign up</span><span>My Page</span><span>Cart</span></div>
</div>
<div class="search"><span class="go"></span><input-fake>Search by title, author, or ISBN</input-fake></div>
</header>
<div class="tabs">
<div class="tab on">Domestic Books</div>
<div class="tab">Foreign Books</div>
<div class="tab">eBook</div>
<div class="tab">Hot Tracks</div>
<div class="tab">Gifts</div>
</div>
<div class="section"><h2>Today's Picks</h2><span class="more">Weekly Bestsellers ></span></div>
<div class="grid">
<div class="card"><div class="cover c1"></div><div class="meta"><div class="title">The Quiet Algorithm: Stories of Everyday Code</div><div class="author">Minji Han</div><div class="price-row"><span class="strike">18,000</span><span class="off">20%</span></div><div class="price-row"><span class="price">14,400</span></div><div class="btnrow"><span class="buy">Buy</span><span class="cart">Cart</span></div></div></div>
<div class="card"><div class="cover c2"></div><div class="meta"><div class="title">A Field Guide to Slow Mornings</div><div class="author">Jihoon Yang</div><div class="price-row"><span class="strike">15,800</span><span class="off">10%</span></div><div class="price-row"><span class="price">14,220</span></div><div class="btnrow"><span class="buy">Buy</span><span class="cart">Cart</span></div></div></div>
<div class="card"><div class="cover c3"></div><div class="meta"><div class="title">Letters from the Reading Room</div><div class="author">Soyeon Baek</div><div class="price-row"><span class="strike">13,500</span><span class="off">15%</span></div><div class="price-row"><span class="price">11,470</span></div><div class="btnrow"><span class="buy">Buy</span><span class="cart">Cart</span></div></div></div>
<div class="card"><div class="cover c4"></div><div class="meta"><div class="title">The Grammar of Small Cities</div><div class="author">Daeun Cho</div><div class="price-row"><span class="strike">22,000</span><span class="off">12%</span></div><div class="price-row"><span class="price">19,360</span></div><div class="btnrow"><span class="buy">Buy</span><span class="cart">Cart</span></div></div></div>
<div class="card"><div class="cover c5"></div><div class="meta"><div class="title">Notes on a Long Commute</div><div class="author">Seungwoo Ko</div><div class="price-row"><span class="strike">12,000</span><span class="off">5%</span></div><div class="price-row"><span class="price">11,400</span></div><div class="btnrow"><span class="buy">Buy</span><span class="cart">Cart</span></div></div></div>
</div>
<div class="rail"><span class="rail-title">This Week's Ranking</span><span class="rail-sub">Updated every Monday · Online + In-store</span></div>
<footer>Since 1980, Gwanghwamun, Seoul · <b>People make books, and books make people</b></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #545454; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #3057a7; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #ffffff; color: #3057a7;
border: 1px solid #3057a7; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #141414;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #545454; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d4fb41; color: #141414;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Inter','Nunito Sans',sans-serif; background:#ffffff; color:#333333; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e2e2e2;}
.logo{font-size:20px;font-weight:700;color:#0f234c;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:500;color:#141414;}
.hero{height:220px;display:flex;align-items:center;background:#ecf3ff;padding:0 32px;}
.herotext{width:420px;}
.herotext h1{font-size:32px;font-weight:700;color:#0f234c;margin:0 0 10px;letter-spacing:-0.6px;line-height:1.15;}
.herotext p{font-size:16px;color:#333333;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#3057a7;color:#fff;font-size:16px;font-weight:600;padding:12px 24px;border-radius:8px;}
.heroimg{width:260px;height:150px;border-radius:12px;margin-left:auto;position:relative;overflow:hidden;background:#fff;}
.heroimg:before{content:'';position:absolute;left:30px;top:20px;width:200px;height:110px;border-radius:12px;background:linear-gradient(150deg,#3057a7,#d4fb41);}
.pill{display:inline-block;background:#d4fb41;color:#141414;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;border-radius:9999px;padding:3px 10px;margin-bottom:10px;}
.section{padding:18px 32px 0;}
.sectitle{font-size:18px;font-weight:600;color:#141414;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:150px;background:#fff;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,0.06);padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#d4fb41;color:#141414;font-size:9px;font-weight:700;text-transform:uppercase;border-radius:9999px;padding:3px 8px;}
.thumb{aspect-ratio:1/1;border-radius:12px 12px 0 0;margin:-10px -10px 8px;}
.pname{font-size:14px;font-weight:600;color:#141414;}
.pprice{font-size:14px;color:#333333;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#0f234c;color:#d4fb41;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Lalo</div>
<div class="navlinks"><div>Nursery</div><div>Feeding</div><div>Play</div><div>Bundles</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="pill">New Season</div>
<h1>Considered products, proud parents.</h1>
<p>Modern baby gear that balances playful energy with grounded trust.</p>
<div class="cta">Shop Now</div>
</div>
<div class="heroimg"></div>
</div>
<div class="section">
<div class="sectitle">Popular Picks</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#3057a7,#d4fb41)"></div><div class="pname">The Playkit</div><div class="pprice">$89.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#376b52,#faeadf)"></div><div class="pname">The High Chair</div><div class="pprice">$275.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#01392c,#fffb00)"></div><div class="pname">The Feeding Set</div><div class="pprice">$65.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0f234c,#3057a7)"></div><div class="pname">The Travel Bag</div><div class="pprice">$149.00</div></div>
</div>
</div>
<div class="footer"><span>© Lalo</span><span>Registry · Shipping</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #191919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #191919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #191919; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #ff5268; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #191919;
border: 1px solid #ff5268; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #191919;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff5268; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Courier New',Consolas,monospace; color:#191919; }
*{box-sizing:border-box;}
.nav{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #dedede;}
.logo{font-size:16px;font-weight:700;letter-spacing:1px;}
.navlinks{display:flex;gap:4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;}
.navlinks span{color:#888;padding:0 10px;border-right:1px solid #dedede;}
.navlinks span:last-child{border-right:none;color:#191919;}
.search{background:#f4f4f4;border:1px solid #dedede;font-size:11px;color:#888;padding:6px 12px;width:160px;}
.strip{display:flex;height:592px;}
.left{width:560px;padding:24px;}
.hgroup{margin-bottom:20px;}
.hgroup .tag{font-size:11px;font-weight:700;color:#ff5268;letter-spacing:0.5px;}
.hgroup h1{font-size:26px;font-weight:700;margin:6px 0 10px;letter-spacing:-0.5px;}
.hgroup p{font-size:13px;color:#444;line-height:1.5;max-width:420px;margin:0;}
.grid{display:flex;flex-wrap:wrap;gap:12px;}
.card{width:168px;border:1px solid #dedede;background:#fff;position:relative;}
.thumb{height:100px;background:#f4f4f4;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#ff5268;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.badge.sold{background:#888;}
.info{padding:8px 10px;}
.artist{font-size:12px;font-weight:700;}
.fmt{font-size:11px;color:#888;margin:2px 0;}
.price{font-size:12px;}
.right{width:400px;background:#191919;padding:24px;}
.right .kicker{font-size:11px;color:#888;letter-spacing:0.5px;}
.right h2{color:#fff;font-size:20px;margin:8px 0 16px;}
.rrow{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #333;font-size:12px;color:#aaaaaa;}
.rrow span:last-child{color:#fff;}
.cta{margin-top:20px;background:#ff5268;color:#fff;text-align:center;padding:10px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Revhq</div>
<div class="navlinks"><span>VINYL</span><span>T-SHIRTS</span><span>BOOKS</span><span>PATCHES</span></div>
<div class="search">search the archive...</div>
</div>
<div class="strip">
<div class="left">
<div class="hgroup">
<div class="tag">NEW PRESSING</div>
<h1>Basement tapes, print-run vinyl.</h1>
<p>No dropdowns. No lifestyle photography. Just the record, the price, and a border.</p>
</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">Sale</div></div><div class="info"><div class="artist">Concrete Choir</div><div class="fmt">LP / Black Vinyl</div><div class="price">$24.00</div></div></div>
<div class="card"><div class="thumb"></div><div class="info"><div class="artist">Static Riot</div><div class="fmt">7" / Splatter</div><div class="price">$12.00</div></div></div>
<div class="card"><div class="thumb"><div class="badge sold">Sold Out</div></div><div class="info"><div class="artist">Loading Dock</div><div class="fmt">Cassette</div><div class="price">$9.00</div></div></div>
<div class="card"><div class="thumb"></div><div class="info"><div class="artist">Grey Static</div><div class="fmt">Patch Set</div><div class="price">$6.00</div></div></div>
</div>
</div>
<div class="right">
<div class="kicker">STOCK / FORMAT</div>
<h2>Concrete Choir — LP</h2>
<div class="rrow"><span>Format</span><span>Black Vinyl</span></div>
<div class="rrow"><span>Pressing</span><span>500 copies</span></div>
<div class="rrow"><span>Sleeve</span><span>Gatefold</span></div>
<div class="rrow"><span>Shipping</span><span>Ships in 3 days</span></div>
<div class="cta">Add to Cart</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #191919; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #191919; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; background: #899df1; color: #191919;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; background: transparent; color: #ffffff;
border: 1px solid #899df1; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #252525; color: #ffffff;
border: 1px solid #313131; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; background: #899df1; color: #191919;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#191919; color:#ffffff; box-sizing:border-box;
font-family:'Untitled Sans Web','Montserrat',sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #313131; }
.brand { font-size:16px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:#d4d4d4; }
main { display:flex; height:calc(640px - 64px); }
.gallery { width:46%; background:#191919; display:flex; align-items:center; justify-content:center; position:relative; }
.ringframe { width:200px; height:260px; border-radius:0; position:relative; }
.ring { width:120px; height:120px; border-radius:9999px; border:14px solid #899df1; position:absolute; left:40px; top:40px;
box-shadow:0 0 40px rgba(137,157,241,0.4); }
.ring::after { content:''; position:absolute; left:38px; top:-18px; width:44px; height:44px; background:#ffffff;
clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
.details { width:54%; padding:30px 36px; }
.kicker { font-size:12px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:#8ba8c8; margin:0 0 10px; }
h1 { font-family:'Spectral',Georgia,serif; font-size:34px; font-weight:300; letter-spacing:-0.3px; margin:0 0 10px; }
.price { font-family:'Untitled Sans Web',sans-serif; font-size:18px; font-weight:400; letter-spacing:0.02em; margin:0 0 16px; }
.price .old { color:#888888; text-decoration:line-through; margin-left:10px; font-size:14px; }
.desc { font-size:14px; line-height:1.6; color:#d4d4d4; margin:0 0 18px; max-width:400px; }
.tags { display:flex; gap:8px; margin-bottom:22px; }
.tag { background:#899df1; color:#191919; font-size:12px; border-radius:9999px; padding:4px 10px; }
.buyrow { display:flex; gap:0; }
.btn-primary { background:#899df1; color:#191919; border:none; padding:14px 32px; font-size:13px; font-weight:500;
letter-spacing:0.1em; text-transform:uppercase; }
.btn-secondary { background:transparent; color:#fff; border:1px solid #fff; padding:13px 31px; font-size:13px; font-weight:500;
letter-spacing:0.1em; text-transform:uppercase; margin-left:10px; }
</style></head>
<body>
<nav>
<p class="brand">Carbon And Hyde</p>
<div class="navlinks"><span>New Arrivals</span><span>The Edit</span><span>By Material</span></div>
</nav>
<main>
<div class="gallery"><div class="ringframe"><div class="ring"></div></div></div>
<div class="details">
<p class="kicker">18K Gold · Lab Diamond</p>
<h1>Aurora Signet Ring</h1>
<p class="price">$1,240 <span class="old">$1,480</span></p>
<p class="desc">A faceted signet cut in 18K gold, set with a lab-grown diamond that catches stage light like a gem should.</p>
<div class="tags"><span class="tag">18K Gold</span><span class="tag">Lab Diamond</span></div>
<div class="buyrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Add to Wishlist</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #868e96; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #004085; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #111111;
border: 1px solid #004085; border-radius: 8px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #464a4e;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #868e96; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #b1dfbb; color: #155724;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#111111; font-family:-apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;background:#111111;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.logo{font-size:19px;font-weight:600;color:#fff;}
.navlinks{display:flex;gap:16px;font-size:15px;font-weight:600;color:#fff;}
.navlinks .active{border-bottom:2px solid #fff;padding-bottom:8px;}
.search{margin:14px 24px 0;height:40px;border:1px solid #dae0e5;border-radius:8px;display:flex;align-items:center;padding:0 16px;font-size:14px;color:#818182;}
.grid{display:flex;gap:14px;padding:14px 24px 0;}
.card{width:216px;background:#fff;border-radius:8px;padding:8px;}
.thumb{aspect-ratio:1/1;height:130px;border-radius:8px;margin-bottom:6px;position:relative;}
.badge{position:absolute;top:6px;left:6px;font-size:12px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;padding:2px 4px;border-radius:4px;}
.badge.stock{background:#b1dfbb;color:#155724;}
.badge.special{background:#abdde5;color:#0c5460;}
.ptitle{font-size:18px;font-weight:600;}
.artist{font-size:14px;color:#868e96;margin-top:2px;}
.pprice{font-size:18px;font-weight:600;margin-top:6px;}
.rowbtn{display:flex;gap:8px;padding:14px 24px 0;}
.btn{background:#004085;color:#fff;font-size:15px;font-weight:600;padding:10px 20px;border-radius:8px;}
.btn2{background:#fff;color:#111;font-size:15px;font-weight:600;padding:9px 19px;border-radius:8px;border:1px solid #dae0e5;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#111111;color:#868e96;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Reckless Records</div>
<div class="navlinks"><div class="active">Vinyl</div><div>Used CDs</div><div>DVDs</div></div>
</div>
<div class="search">Search 40,000+ titles...</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#004085,#111);"><div class="badge stock">In Stock</div></div><div class="ptitle">Blue Train</div><div class="artist">John Coltrane</div><div class="pprice">$18.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#155724,#111);"><div class="badge special">Import</div></div><div class="ptitle">Unknown Pleasures</div><div class="artist">Joy Division</div><div class="pprice">$26.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0c5460,#111);"></div><div class="ptitle">In Rainbows</div><div class="artist">Radiohead</div><div class="pprice">$22.99</div></div>
</div>
<div class="rowbtn"><div class="btn">Add to Cart</div><div class="btn2">Check Other Locations</div></div>
<div class="footer"><span>© Reckless Records, Chicago</span><span>Store Hours Locations</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #3a3a3a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #3a3a3a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #3a3a3a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #808285; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #af303b; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #3a3a3a;
border: 1px solid #af303b; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #3a3a3a;
border: 1px solid #cecece; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808285; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #af303b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Futura PT','Montserrat',Arial,sans-serif; color:#5e6a71; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d9d9d9;}
.logo{font-size:19px;font-weight:700;letter-spacing:-0.3px;color:#3a3a3a;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0.3px;}
.hero{height:180px;background:#f5f5f5;display:flex;align-items:center;padding:0 32px;}
.htxt{width:400px;}
.htxt h1{font-size:32px;font-weight:700;letter-spacing:-0.5px;color:#3a3a3a;margin:0 0 8px;}
.htxt p{font-family:'Open Sans',Arial,sans-serif;font-size:15px;margin:0 0 14px;}
.cta{display:inline-block;background:#af303b;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;padding:14px 30px;}
.specrow{display:flex;padding:16px 32px 0;gap:24px;}
.spec{text-align:left;}
.spec .num{font-size:26px;font-weight:700;letter-spacing:-0.3px;color:#3a3a3a;}
.spec .lab{font-family:'Open Sans',Arial,sans-serif;font-size:12px;color:#808285;margin-top:2px;}
.rowlabel{padding:16px 32px 10px;font-size:20px;font-weight:600;color:#3a3a3a;}
.grid{display:flex;gap:16px;padding:0 32px;}
.card{width:206px;background:#fafafa;border:1px solid #e6e6e6;padding:16px;}
.thumb{height:96px;background:#f5f5f5;margin-bottom:10px;}
.badge{display:inline-block;background:#af303b;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;padding:3px 8px;margin-bottom:6px;}
.title{font-size:15px;font-weight:600;color:#3a3a3a;margin-bottom:6px;}
.price{font-family:'Futura PT',Arial,sans-serif;font-size:18px;font-weight:700;color:#3a3a3a;}
</style>
<div class="nav">
<div class="logo">Magimix</div>
<div class="navlinks"><span>Food Processors</span><span>Blenders</span><span>Juicers</span></div>
</div>
<div class="hero">
<div class="htxt">
<h1>Engineering, framed by white space.</h1>
<p>Chrome-and-white kitchen machines, built to a European standard.</p>
<div class="cta">Shop Now</div>
</div>
</div>
<div class="specrow">
<div class="spec"><div class="num">1100W</div><div class="lab">Motor wattage</div></div>
<div class="spec"><div class="num">3.6L</div><div class="lab">Bowl capacity</div></div>
<div class="spec"><div class="num">30yr</div><div class="lab">Warranty</div></div>
</div>
<div class="rowlabel">Food Processors</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#af303b,#eeeeee);"></div><div class="title">CS 5200 XL Premium</div><div class="price">$399</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3a3a3a,#eeeeee);"></div><div class="title">Compact 3200 XL</div><div class="price">$219</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0274be,#eeeeee);"></div><div class="title">Le Duo Plus Juicer</div><div class="price">$179</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #23282d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #23282d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #23282d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #003388; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #003388;
border: 1px solid #003388; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #23282d;
border: 1px solid #c4c6c7; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #29c4a9; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:'Open Sans',Arial,sans-serif; color:#3e3e3e; }
*{box-sizing:border-box;}
.nav{height:60px;background:#003388;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Montserrat',Arial,sans-serif;font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-family:'Montserrat',Arial,sans-serif;font-size:14px;font-weight:500;letter-spacing:0.3px;color:#fff;}
.hero{height:190px;background:#003388;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.h1{font-family:'Montserrat',Arial,sans-serif;font-size:34px;font-weight:700;letter-spacing:-0.4px;color:#fff;max-width:440px;line-height:1.2;margin:0 0 12px;}
.btn{display:inline-block;background:#fff;color:#003388;font-family:'Montserrat',Arial,sans-serif;font-size:14px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;padding:14px 28px;border-radius:4px;}
.stack{width:170px;height:150px;position:relative;}
.box{position:absolute;width:110px;height:130px;border-radius:6px;box-shadow:0 6px 14px rgba(0,0,0,0.3);}
.box.a{background:linear-gradient(160deg,#2ea3f2,#003388);top:8px;left:20px;transform:rotate(-6deg);}
.box.b{background:linear-gradient(160deg,#974df3,#003388);top:0;left:44px;transform:rotate(4deg);}
.section{padding:16px 32px 0;}
.stitle{font-family:'Montserrat',Arial,sans-serif;font-size:18px;font-weight:600;color:#23282d;margin-bottom:10px;}
.grid{display:flex;gap:14px;}
.card{width:206px;background:#fff;border-radius:4px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,0.08);}
.thumb{height:100px;border-radius:4px;margin-bottom:8px;}
.ptitle{font-family:'Montserrat',Arial,sans-serif;font-size:16px;font-weight:600;color:#23282d;}
.pprice{font-size:14px;color:#555555;margin-top:4px;}
.tag{display:inline-block;background:#974df3;color:#fff;font-family:'Montserrat',Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:2px;margin-bottom:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:52px;background:#003388;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#fff;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Restoration Games</div>
<div class="navlinks"><div>Restored Games</div><div>Upcoming</div><div>All Titles</div></div>
</div>
<div class="hero">
<div>
<div class="h1">Every title, a restored classic.</div>
<div class="btn">Browse Restored Games</div>
</div>
<div class="stack"><div class="box a"></div><div class="box b"></div></div>
</div>
<div class="section">
<div class="stitle">Restored Games</div>
<div class="grid">
<div class="card"><div class="tag">Restored</div><div class="thumb" style="background:linear-gradient(135deg,#003388,#2ea3f2)"></div><div class="ptitle">Fortress of Nine</div><div class="pprice">$59.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2ea3f2,#003388)"></div><div class="ptitle">Cartel: Reforged</div><div class="pprice">$44.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#29c4a9,#003388)"></div><div class="ptitle">Signal Loss</div><div class="pprice">$39.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003388,#ef8f61)"></div><div class="ptitle">Lost Colony Deluxe</div><div class="pprice">$64.99</div></div>
</div>
</div>
<div class="footer"><span>© Restoration Games — a library, not a discount bin</span><span>Newsletter · Retailers</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f7f2; color: #2b2928;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f7f2; color: #2b2928;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #2b2928; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #9a9db1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #d16f49; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: transparent; color: #2b2928;
border: 1px solid #d16f49; border-radius: 8px;
padding: 10px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f7f2; color: #2b2928;
border: 1px solid #c5c4c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9db1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #d16f49; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f7f2; color:#2b2928; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; background:#f8f7f2; border-bottom:1px solid #e5e5e5; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.brand { font-size:20px; font-weight:400; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:13px; font-weight:500; letter-spacing:0.3px; text-transform:uppercase; color:#2b2928; }
.navlinks span.on { color:#d16f49; border-bottom:2px solid #d16f49; padding-bottom:4px; }
.hero { height:230px; display:flex; align-items:center; padding:0 32px; gap:30px; }
.hero .copy { flex:1.1; }
.hero h1 { font-size:38px; font-weight:400; line-height:1.15; letter-spacing:-0.5px; margin:0 0 12px; }
.hero p { font-size:15px; color:#57534f; margin:0 0 18px; max-width:360px; }
.btn { display:inline-block; width:fit-content; background:#d16f49; color:#fff; font-size:13px; font-weight:500;
letter-spacing:0.5px; text-transform:uppercase; padding:12px 26px; border-radius:8px; }
.hero .art { flex:1; height:190px; border-radius:20px; background:radial-gradient(circle at 35% 30%,#e8b8a4,#d16f49); }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:16px 32px; }
.card { background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,0.08); overflow:hidden; }
.cover { height:100px; border-radius:12px 12px 0 0; position:relative; }
.badge { position:absolute; top:6px; left:6px; font-size:9px; font-weight:600; letter-spacing:0.5px;
text-transform:uppercase; padding:2px 8px; border-radius:4px; color:#fff; }
.b-sale { background:#d16f49; } .b-new { background:#d9aa52; }
.info { padding:8px 10px; }
.t { font-size:14px; font-weight:500; margin:0 0 4px; }
.p { font-size:13px; color:#2b2928; }
footer { position:absolute; bottom:0; left:0; right:0; height:56px; background:#272d45; color:#f8f7f2;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
footer span:hover { color:#d9aa52; }
</style></head>
<body>
<nav>
<div class="brand">Fable</div>
<div class="navlinks"><span class="on">Dinnerware</span><span>Serveware</span><span>Registry</span><span>Journal</span></div>
</nav>
<div class="hero">
<div class="copy">
<h1>Everyday dining,<br>elevated.</h1>
<p>Handcrafted ceramics in warm terracotta and quiet ink — dinnerware built for slow appreciation.</p>
<span class="btn">Shop Dinnerware</span>
</div>
<div class="art"></div>
</div>
<div class="grid">
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#d16f49,#b85a36);"><span class="badge b-new">New</span></div>
<div class="info"><p class="t">Terracotta Dinner Set</p><p class="p">$128.00</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#d9aa52,#b9862f);"></div>
<div class="info"><p class="t">Brass-Rim Bowl</p><p class="p">$42.00</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#d3d2d1,#9a9db1);"><span class="badge b-sale">Sale</span></div>
<div class="info"><p class="t">Stoneware Mug Set</p><p class="p">$36.00</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#d88471,#c46a56);"></div>
<div class="info"><p class="t">Serving Platter</p><p class="p">$68.00</p></div></div>
</div>
<footer><span>© Fable — Dinnerware for everyday</span><span>Registry · Care Guide · Contact</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #003399; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #1a1a1a;
border: 1px solid #e0e0e0; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #e0e0e0; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #003399; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#333333; font-family:Arial,'Helvetica Neue',sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:2px solid #003399;}
.logo{font-size:19px;font-weight:700;letter-spacing:0.5px;color:#003399;}
.navlinks{display:flex;gap:24px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#333333;}
.navlinks span:first-child{color:#003399;border-bottom:2px solid #003399;padding-bottom:20px;}
.hero{height:280px;display:flex;background:#f2f2f2;}
.heroimg{width:56%;position:relative;background:linear-gradient(180deg,#dfe8f5,#c7d5ea);overflow:hidden;}
.chair{position:absolute;bottom:0;left:80px;width:110px;height:170px;background:#003399;border-radius:0;}
.chair2{position:absolute;bottom:0;left:210px;width:110px;height:150px;background:#666666;border-radius:0;}
.slat{position:absolute;width:80px;height:4px;background:#ffffff;}
.herotext{width:44%;display:flex;flex-direction:column;justify-content:center;padding:0 32px;}
.herotext h1{font-size:26px;font-weight:700;color:#1a1a1a;margin:0 0 12px;line-height:1.3;}
.herotext p{font-size:13px;color:#666666;margin:0 0 18px;max-width:280px;line-height:1.6;}
.cta{display:inline-block;background:#003399;color:#fff;font-size:12px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:12px 26px;width:fit-content;}
.pathrow{display:flex;gap:6px;padding:16px 36px 0;font-size:11px;color:#666666;letter-spacing:0.3px;}
.pathrow b{color:#003399;}
.seclabel{font-size:14px;font-weight:700;color:#1a1a1a;padding:14px 36px 12px;text-transform:uppercase;letter-spacing:0.5px;}
.grid{display:flex;gap:14px;padding:0 36px;}
.card{width:150px;border:1px solid #e0e0e0;padding:10px;}
.thumb{height:96px;margin-bottom:8px;background:#f5f5f5;}
.ptitle{font-size:12px;font-weight:700;color:#1a1a1a;line-height:1.3;height:30px;overflow:hidden;}
.pspec{font-size:11px;color:#666666;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:11px;color:#666666;border-top:1px solid #e0e0e0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Telescope Casual</div>
<div class="navlinks"><span>Collections</span><span>Materials</span><span>Find a Retailer</span><span>Room Planner</span></div>
</div>
<div class="hero">
<div class="heroimg"><div class="chair"></div><div class="chair2"></div></div>
<div class="herotext">
<h1>Bending aluminum in Granville, New York since 1903.</h1>
<p>Powder-coated frames and woven slings, built to a factory tolerance the patio rarely sees.</p>
<div class="cta">Find a Retailer</div>
</div>
</div>
<div class="pathrow">Collection <b>›</b> Material <b>›</b> Individual Piece</div>
<div class="seclabel">Casual Cushion Collection</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003399,#666666)"></div><div class="ptitle">Sling Dining Chair</div><div class="pspec">Aluminum Frame</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#666666,#003399)"></div><div class="ptitle">Cushion Lounge Chair</div><div class="pspec">Weather Fabric</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#333333,#666666)"></div><div class="ptitle">Woven Sofa Sectional</div><div class="pspec">Vinyl Weave</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003399,#333333)"></div><div class="ptitle">Round Dining Table</div><div class="pspec">42" Diameter</div></div>
</div>
<div class="footer"><span>© Family Owned · Made in USA</span><span>Download Catalog (PDF)</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2c3e50;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2c3e50;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #2c3e50; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7f8c8d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #c0392b; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #2c3e50;
border: 1px solid #c0392b; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #2c3e50;
border: 1px solid #cacfd3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7f8c8d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ecf0f1; color: #2c3e50;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#2c3e50; font-family:'Open Sans','Segoe UI',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #ecf0f1;}
.logo{font-size:20px;font-weight:700;color:#2c3e50;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;color:#2c3e50;}
.cart{background:#c0392b;color:#fff;font-size:12px;font-weight:700;padding:8px 16px;border-radius:4px;}
.hero{height:250px;display:flex;align-items:center;padding:0 44px;background:#ecf0f1;}
.herotext{width:440px;}
.herotext h1{font-size:30px;font-weight:700;color:#2c3e50;margin:0 0 12px;line-height:1.25;}
.herotext p{font-size:14px;color:#5a6b7a;margin:0 0 18px;max-width:340px;}
.btn{display:inline-block;height:44px;line-height:44px;padding:0 26px;background:#c0392b;color:#fff;font-size:14px;font-weight:700;border-radius:4px;width:fit-content;}
.shapes{position:absolute;right:100px;width:220px;height:170px;}
.shape{position:absolute;border-radius:8px;}
.s1{width:60px;height:60px;background:#c0392b;left:0;top:20px;border-radius:9999px;}
.s2{width:70px;height:70px;background:#8fbc8f;left:80px;top:60px;}
.s3{width:50px;height:50px;background:#f1c40f;left:150px;top:10px;border-radius:9999px;}
.sec{padding:22px 44px 0;position:relative;}
.sectitle{font-size:16px;font-weight:700;margin-bottom:16px;color:#2c3e50;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#fff;border:1px solid #ecf0f1;border-radius:8px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#ecf0f1;color:#2c3e50;font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;z-index:2;}
.thumb{height:94px;border-radius:4px;background:#f5f5f5;}
.pname{font-size:13px;font-weight:700;margin-top:8px;}
.stars{color:#f1c40f;font-size:11px;margin-top:4px;}
.pprice{font-size:13px;font-weight:700;color:#c0392b;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Learning Resources</div>
<div class="navlinks"><span>Shop by Age</span><span>Best Sellers</span><span>New Arrivals</span></div>
<div class="cart">Cart</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Learning toys teachers trust.</h1>
<p>Purposeful, hands-on toys built for classrooms and curious minds.</p>
<div class="btn">Shop by Age</div>
</div>
<div class="shapes"><div class="shape s1"></div><div class="shape s2"></div><div class="shape s3"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge">Ages 3-5</span><div class="thumb"></div><div class="pname">Counting Bear Set</div><div class="stars">★★★★★</div><div class="pprice">$19.99</div></div>
<div class="card"><span class="badge">Ages 5-8</span><div class="thumb" style="background:#f5f5f5"></div><div class="pname">Magnetic Letter Board</div><div class="stars">★★★★☆</div><div class="pprice">$24.99</div></div>
<div class="card"><span class="badge">Ages 8+</span><div class="thumb" style="background:#f5f5f5"></div><div class="pname">STEM Circuit Kit</div><div class="stars">★★★★★</div><div class="pprice">$34.99</div></div>
<div class="card"><span class="badge">All Ages</span><div class="thumb" style="background:#f5f5f5"></div><div class="pname">Pattern Block Set</div><div class="stars">★★★★☆</div><div class="pprice">$16.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e8e8e1; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e8e8e1; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #898989; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #fac241; color: #121212;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #e8e8e1; color: #121212;
border: 1px solid #fac241; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fffefd; color: #121212;
border: 1px solid #b2b2ad; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #898989; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #ff0000; color: #e8e8e1;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#e8e8e1; font-family:Arial, 'Helvetica Neue', sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:72px;background:#ffffff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:22px;font-weight:800;color:#121212;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:700;color:#3d4246;}
.navlinks span:first-child{color:#fac241;-webkit-text-stroke:0.4px #121212;}
.cart{width:36px;height:36px;border-radius:9999px;background:#fac241;}
.hero{height:220px;display:flex;align-items:center;padding:0 32px;}
.heroText{width:440px;}
.h1{font-size:30px;font-weight:800;line-height:1.15;margin:0 0 12px;}
.sub{font-size:14px;color:#3d4246;margin:0 0 18px;max-width:340px;}
.btn{display:inline-flex;align-items:center;height:46px;padding:0 28px;border-radius:8px;background:#fac241;color:#121212;font-size:14px;font-weight:800;}
.playwrap{width:400px;height:220px;position:relative;}
.roof{position:absolute;left:150px;top:30px;width:0;height:0;border-left:80px solid transparent;border-right:80px solid transparent;border-bottom:50px solid #ff0000;}
.house{position:absolute;left:170px;top:80px;width:120px;height:90px;background:#fac241;border-radius:0 0 6px 6px;}
.door{position:absolute;left:210px;top:120px;width:36px;height:50px;background:#2b6450;border-radius:6px 6px 0 0;}
.wagonbody{position:absolute;left:60px;top:150px;width:90px;height:40px;border-radius:10px;background:#2b6450;}
.wheel{position:absolute;width:24px;height:24px;border-radius:9999px;background:#121212;top:180px;}
.w1{left:75px;} .w2{left:120px;}
.sec{padding:16px 32px;}
.sectitle{font-size:16px;font-weight:800;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:216px;background:#fffefd;border-radius:12px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,0.08);}
.thumb{height:88px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:800;text-transform:uppercase;color:#fff;padding:3px 8px;border-radius:6px;}
.pbody{padding:10px 12px 12px;}
.ptitle{font-size:13px;font-weight:700;margin-bottom:4px;}
.pprice{font-size:14px;font-weight:800;}
</style>
<div class="nav">
<div class="logo">Step2</div>
<div class="navlinks"><span>Playhouses</span><span>Wagons</span><span>Outdoor</span><span>Toddler</span></div>
<div class="cart"></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Built for exploring,<br>every single day.</div>
<div class="sub">Playhouses, wagons and outdoor toys designed to survive a whole childhood of play.</div>
<div class="btn">Shop Playhouses</div>
</div>
<div class="playwrap"><div class="roof"></div><div class="house"></div><div class="door"></div><div class="wagonbody"></div><div class="wheel w1"></div><div class="wheel w2"></div></div>
</div>
<div class="sec">
<div class="sectitle">Top Picks</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#fac241"><div class="badge" style="background:#ff0000">Sale</div></div><div class="pbody"><div class="ptitle">Naturally Playful Cottage</div><div class="pprice">$249.99</div></div></div>
<div class="card"><div class="thumb" style="background:#2b6450"><div class="badge" style="background:#2b6450">Eco</div></div><div class="pbody"><div class="ptitle">Wagon For Two Plus</div><div class="pprice">$149.99</div></div></div>
<div class="card"><div class="thumb" style="background:#3d4246"></div><div class="pbody"><div class="ptitle">Roller Coaster Ride-On</div><div class="pprice">$399.99</div></div></div>
<div class="card"><div class="thumb" style="background:#898989"></div><div class="pbody"><div class="ptitle">Water Table Play Set</div><div class="pprice">$89.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #353535;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #353535;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: 0px; margin: 0; color: #353535; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.0; letter-spacing: 0px; background: #1a73e8; color: #ffffff;
border: none; border-radius: 4px; padding: 6px 14px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.0; letter-spacing: 0px; background: #ffffff; color: #1a73e8;
border: 1px solid #c0c0c0; border-radius: 4px;
padding: 6px 14px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; background: #ffffff; color: #353535;
border: 1px solid #dedede; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0px; background: #dae8fc; color: #6c8ebf;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f5; color:#333333; box-sizing:border-box;
font-family:Helvetica, Arial, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.menubar { height:30px; background:#f0f0f0; border-bottom:1px solid #d5d5d5; display:flex;
align-items:center; padding:0 12px; gap:18px; font-size:11px; color:#555; }
.toolbar { height:36px; background:#ffffff; border-bottom:1px solid #d5d5d5; display:flex;
align-items:center; padding:0 12px; gap:10px; }
.tbtn { width:24px; height:24px; border:1px solid transparent; border-radius:2px; display:flex;
align-items:center; justify-content:center; font-size:13px; color:#555; }
.tbtn.on { background:#e8f0fe; border-color:#4a86e8; }
.sep { width:1px; height:20px; background:#e0e0e0; }
.body { display:flex; height:574px; }
.shapes { width:150px; background:#fafafa; border-right:1px solid #d5d5d5; padding:10px; overflow:hidden; }
.shapes .grp { font-size:10px; color:#999; text-transform:uppercase; margin:8px 0 6px; }
.shrow { display:flex; gap:6px; margin-bottom:6px; }
.shp { width:36px; height:28px; background:#dae8fc; border:1.5px solid #6c8ebf; }
.shp.round { border-radius:14px; }
.shp.diamond { transform:rotate(45deg); width:22px; height:22px; margin:3px 7px; }
.shp.circle { border-radius:50%; }
.canvas { flex:1; background:
linear-gradient(#e6e6e6 1px, transparent 1px) 0 0/20px 20px,
linear-gradient(90deg, #e6e6e6 1px, transparent 1px) 0 0/20px 20px, #ffffff;
position:relative; }
.node { position:absolute; background:#dae8fc; border:2px solid #6c8ebf; display:flex;
align-items:center; justify-content:center; font-size:13px; color:#333; }
.node.green { background:#d5e8d4; border-color:#82b366; }
.node.orange { background:#ffe6cc; border-color:#d79b00; }
.node.diamond { transform:rotate(45deg); }
.node.diamond span { transform:rotate(-45deg); display:block; }
.edge { position:absolute; height:2px; background:#333; }
.edge::after { content:''; position:absolute; right:-1px; top:-4px; border:5px solid transparent; border-left-color:#333; }
.format { width:190px; background:#fafafa; border-left:1px solid #d5d5d5; padding:12px; }
.format .tab { display:inline-block; font-size:11px; padding:5px 10px; color:#666; border-bottom:2px solid transparent; }
.format .tab.on { color:#4a86e8; border-color:#4a86e8; font-weight:700; }
.fld { margin-top:12px; }
.fld .lbl { font-size:10px; color:#888; margin-bottom:4px; }
.fld .row { display:flex; align-items:center; gap:8px; }
.colorbox { width:22px; height:22px; border:1px solid #ccc; }
.valbox { flex:1; height:22px; border:1px solid #ccc; background:#fff; font-size:11px; padding:0 6px; line-height:22px; color:#555; }
.brandbar { position:absolute; bottom:0; left:0; right:0; height:22px; background:#f0f0f0;
border-top:1px solid #d5d5d5; display:flex; align-items:center; padding:0 12px;
font-size:10.5px; color:#777; }
</style></head>
<body>
<div class="menubar"><span>File</span><span>Edit</span><span>View</span><span>Arrange</span><span>Extras</span><span>Help</span></div>
<div class="toolbar">
<div class="tbtn">↩</div><div class="tbtn">↪</div>
<div class="sep"></div>
<div class="tbtn on">□</div><div class="tbtn">◯</div><div class="tbtn">➤</div>
<div class="sep"></div>
<div class="tbtn">100%</div>
</div>
<div class="body">
<div class="shapes">
<div class="grp">General</div>
<div class="shrow"><div class="shp"></div><div class="shp round"></div></div>
<div class="shrow"><div class="shp diamond"></div><div class="shp circle" style="width:26px;height:26px"></div></div>
<div class="grp">Flowchart</div>
<div class="shrow"><div class="shp" style="background:#d5e8d4;border-color:#82b366"></div>
<div class="shp" style="background:#ffe6cc;border-color:#d79b00"></div></div>
</div>
<div class="canvas">
<div class="node" style="left:120px; top:60px; width:130px; height:50px;">Start</div>
<div class="edge" style="left:185px; top:110px; width:2px; height:50px; transform:rotate(0deg);"></div>
<div class="node diamond green" style="left:150px; top:170px; width:70px; height:70px;"><span>OK?</span></div>
<div class="edge" style="left:220px; top:200px; width:120px;"></div>
<div class="node orange" style="left:350px; top:170px; width:140px; height:60px;">draw.io Diagram</div>
<div class="edge" style="left:185px; top:230px; width:2px; height:60px;"></div>
<div class="node" style="left:120px; top:300px; width:130px; height:50px;">End</div>
</div>
<div class="format">
<span class="tab on">Style</span><span class="tab">Text</span><span class="tab">Arrange</span>
<div class="fld"><div class="lbl">Fill</div><div class="row"><div class="colorbox" style="background:#dae8fc"></div><div class="valbox">#dae8fc</div></div></div>
<div class="fld"><div class="lbl">Line</div><div class="row"><div class="colorbox" style="background:#6c8ebf"></div><div class="valbox">#6c8ebf</div></div></div>
<div class="fld"><div class="lbl">Font</div><div class="row"><div class="valbox">Helvetica · 12pt</div></div></div>
</div>
</div>
<div class="brandbar">draw.io · Page-1</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0e9e7; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0e9e7; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 900; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #5d7975; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 900; line-height: 1.25; letter-spacing: 0.5px; background: #243f50; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 900; line-height: 1.25; letter-spacing: 0.5px; background: #f0e9e7; color: #243f50;
border: 1px solid #243f50; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f0e9e7; color: #121212;
border: 1px solid #dedede; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5d7975; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.33; letter-spacing: 0.25px; background: #b6cfaf; color: #121212;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f0e9e7; font-family:'Avenir','Helvetica Neue',sans-serif; color:#395261; }
*{box-sizing:border-box;}
.nav{height:72px;background:#243f50;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'AvenirLTPro-Heavy','Avenir',sans-serif;font-size:22px;font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:0.5px;}
.navlinks{display:flex;gap:22px;font-family:'AvenirLTPro-Heavy','Avenir',sans-serif;font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:0.5px;color:#fff;}
.hero{height:230px;display:flex;align-items:center;padding:0 32px;position:relative;overflow:hidden;}
.h1{font-family:'AvenirLTPro-Heavy','Avenir',sans-serif;font-size:34px;font-weight:900;letter-spacing:-0.4px;line-height:1.2;color:#121212;margin:0 0 12px;max-width:420px;}
.sub{font-size:15px;color:#395261;margin:0 0 18px;max-width:380px;}
.btn{display:inline-block;background:#243f50;color:#fff;font-family:'AvenirLTPro-Heavy','Avenir',sans-serif;font-size:14px;font-weight:900;letter-spacing:0.5px;text-transform:uppercase;padding:13px 30px;border-radius:9999px;}
.rolls{position:absolute;right:40px;top:40px;display:flex;gap:12px;}
.roll{width:60px;height:150px;border-radius:30px;background:linear-gradient(180deg,#fff,#f3e9e8);border:2px solid #b6cfaf;}
.roll.mid{background:linear-gradient(180deg,#fff,#79abc9 200%);height:170px;margin-top:-20px;border-color:#79abc9;}
.strip{height:52px;display:flex;align-items:center;justify-content:center;gap:24px;background:#fff;font-size:13px;font-weight:600;color:#395261;}
.grid{display:flex;gap:14px;padding:16px 32px 0;justify-content:center;}
.card{width:206px;background:#fff;border-radius:12px;overflow:hidden;}
.thumb{height:110px;border-radius:12px 12px 0 0;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#b6cfaf;color:#121212;font-size:11px;font-weight:500;border-radius:9999px;padding:4px 12px;}
.body{padding:12px;}
.ptitle{font-family:'AvenirLTPro-Heavy','Avenir',sans-serif;font-size:16px;font-weight:900;color:#121212;}
.pprice{font-size:14px;color:#395261;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#243f50;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#fff;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Reel Paper</div>
<div class="navlinks"><div>Bath Tissue</div><div>Paper Towels</div><div>Facial Tissue</div><div>Bundles</div></div>
</div>
<div class="hero">
<div>
<div class="h1">Paper goods that feel like home.</div>
<div class="sub">Bamboo-based, tree-free essentials made calm, domestic, and quietly Scandinavian.</div>
<div class="btn">Shop the Bundle</div>
</div>
<div class="rolls"><div class="roll"></div><div class="roll mid"></div><div class="roll"></div></div>
</div>
<div class="strip"><span>🌱 Tree-free</span><span>🚚 Free Shipping $35+</span><span>♻️ Plastic-free</span></div>
<div class="grid">
<div class="card"><div class="badge">Best Seller</div><div class="thumb" style="background:linear-gradient(160deg,#79abc9,#f0e9e7)"></div><div class="body"><div class="ptitle">Bath Tissue 24-Pack</div><div class="pprice">$24.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#b6cfaf,#f0e9e7)"></div><div class="body"><div class="ptitle">Paper Towels 12-Pack</div><div class="pprice">$19.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#243f50,#79abc9)"></div><div class="body"><div class="ptitle">Facial Tissue 6-Box</div><div class="pprice">$14.99</div></div></div>
</div>
<div class="footer"><span>© Reel Paper — softer on you, softer on the planet</span><span>Subscribe & Save</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0770e3; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #0770e3;
border: 1px solid #0770e3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d7e8fb; color: #0770e3;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#0E1B2C; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; font-variant-numeric: tabular-nums; }
.wrap { display:flex; height:100%; }
.left { width:340px; padding:28px; border-right:1px solid #E2E7EC; }
.brand { font-size:15px; font-weight:800; margin-bottom:18px; }
.brand span { color:#0770E3; }
.search-card { background:#fff; border:1px solid #E2E7EC; border-radius:16px; overflow:hidden; }
.field { padding:14px 16px; border-bottom:1px solid #E2E7EC; position:relative; }
.field:last-child { border-bottom:none; }
.flabel { font-size:11px; font-weight:600; text-transform:uppercase; color:#8B97A3; letter-spacing:.2px; }
.fval { font-size:15px; font-weight:600; margin-top:2px; }
.swap { position:absolute; right:16px; top:-15px; width:30px; height:30px; border-radius:50%; background:#fff; border:1px solid #E2E7EC; display:flex; align-items:center; justify-content:center; font-size:12px; color:#5C6B7A; }
.search-btn { margin-top:16px; height:50px; border-radius:12px; background:#0770E3; color:#fff; font-size:16px; font-weight:700;
display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -8px rgba(7,112,227,0.7); }
.month-hdr { margin-top:24px; font-size:16px; font-weight:700; }
.month-sub { font-size:11px; color:#5C6B7A; margin-top:2px; margin-bottom:10px; }
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.day { aspect-ratio:1; border-radius:7px; background:#F5F7FA; border:1px solid #E2E7EC; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.day b { font-size:10px; }
.day span { font-size:7px; font-weight:600; margin-top:1px; }
.g { color:#00A698; } .a { color:#FFB81C; } .r { color:#E5392E; }
.day.sel { background:#0770E3; border-color:#0770E3; }
.day.sel b, .day.sel span { color:#fff; }
.right { flex:1; padding:28px 30px; }
.tabs { display:flex; gap:24px; margin-bottom:16px; }
.tab { font-size:14px; font-weight:600; color:#5C6B7A; padding-bottom:8px; }
.tab.on { color:#0E1B2C; border-bottom:2px solid #0770E3; }
.result { background:#F5F7FA; border:1px solid #E2E7EC; border-radius:14px; padding:16px; margin-bottom:12px; display:flex; align-items:center; }
.seg { flex:1; }
.time { font-size:17px; font-weight:700; }
.code { font-size:12px; font-weight:600; color:#5C6B7A; }
.mid { flex:1.4; text-align:center; }
.dur { font-size:11px; color:#8B97A3; }
.line { height:1px; background:#E2E7EC; position:relative; margin:4px 0; }
.line::after { content:''; position:absolute; right:0; top:-2px; width:5px; height:5px; border-radius:50%; background:#0770E3; }
.stop { font-size:10px; font-weight:600; color:#00A698; }
.fare { text-align:right; }
.price { font-size:19px; font-weight:800; }
.ret { font-size:11px; color:#5C6B7A; }
</style></head>
<body>
<div class="wrap">
<div class="left">
<div class="brand">Skyscanner (iOS)</div>
<div class="search-card">
<div class="field"><div class="flabel">From</div><div class="fval">London LHR</div>
<div class="swap">⇅</div>
</div>
<div class="field"><div class="flabel">To</div><div class="fval">Barcelona BCN</div></div>
<div class="field"><div class="flabel">Depart · Return</div><div class="fval">12 Oct — 17 Oct</div></div>
</div>
<div class="search-btn">Search flights</div>
<div class="month-hdr">Cheapest month — October</div>
<div class="month-sub">Green is a good deal · prices per person</div>
<div class="cal">
<div class="day"><b>1</b><span class="a">£81</span></div>
<div class="day"><b>2</b><span class="g">£42</span></div>
<div class="day"><b>3</b><span class="g">£38</span></div>
<div class="day sel"><b>12</b><span>£42</span></div>
<div class="day"><b>13</b><span class="r">£152</span></div>
<div class="day"><b>14</b><span class="a">£95</span></div>
<div class="day"><b>15</b><span class="g">£44</span></div>
</div>
</div>
<div class="right">
<div class="tabs"><div class="tab on">Best · £42</div><div class="tab">Cheapest · £38</div><div class="tab">Fastest · 2h 05m</div></div>
<div class="result">
<div class="seg"><div class="time">07:25</div><div class="code">LHR</div></div>
<div class="mid"><div class="dur">2h 15m</div><div class="line"></div><div class="stop">Direct</div></div>
<div class="seg"><div class="time">10:40</div><div class="code">BCN</div></div>
<div class="fare"><div class="price">£42</div><div class="ret">return</div></div>
</div>
<div class="result">
<div class="seg"><div class="time">11:10</div><div class="code">LHR</div></div>
<div class="mid"><div class="dur">4h 40m</div><div class="line"></div><div class="stop" style="color:#FFB81C;">1 stop</div></div>
<div class="seg"><div class="time">15:50</div><div class="code">BCN</div></div>
<div class="fare"><div class="price">£38</div><div class="ret">return</div></div>
</div>
<div class="result">
<div class="seg"><div class="time">18:05</div><div class="code">LHR</div></div>
<div class="mid"><div class="dur">2h 05m</div><div class="line"></div><div class="stop">Direct</div></div>
<div class="seg"><div class="time">21:10</div><div class="code">BCN</div></div>
<div class="fare"><div class="price">£81</div><div class="ret">return</div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #38a034; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #38a034;
border: 1px solid #38a034; border-radius: 9999px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #38a034; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
background:#ffffff; border-bottom:1px solid #e0e0e0; }
.brand { font-size:17px; font-weight:800; color:#38a034; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#333333; font-weight:600; }
.navlinks span.on { color:#38a034; }
.cart { background:#38a034; color:#fff; font-size:12px; font-weight:700; padding:7px 14px; border-radius:9999px; }
main { display:flex; height:578px; }
.gallery { width:400px; background:linear-gradient(180deg,#1a1a1a 0%,#2a2a2a 100%); position:relative;
display:flex; align-items:center; justify-content:center; }
.garden { width:220px; height:150px; background:#333333; border-radius:8px; position:relative; }
.garden .dome { position:absolute; top:-46px; left:20px; right:20px; height:50px;
background:radial-gradient(circle at 50% 0%, #c050d8 0%, transparent 70%); filter:blur(2px); }
.pod { position:absolute; top:14px; width:26px; height:36px; border-radius:6px 6px 12px 12px;
background:linear-gradient(180deg,#38a034,#2a7a28); }
.pod::after { content:''; position:absolute; top:-10px; left:8px; width:10px; height:14px;
background:#7a9e55; border-radius:0 100% 0 100%; }
.pod.p1 { left:34px; } .pod.p2 { left:76px; height:44px; top:6px; } .pod.p3 { left:118px; }
.pod.p4 { left:160px; height:40px; top:10px; }
.badge-glow { position:absolute; top:24px; left:24px; background:#c050d8; color:#fff; font-size:10px;
font-weight:700; letter-spacing:0.04em; padding:5px 12px; border-radius:9999px; text-transform:uppercase; }
.info { flex:1; padding:32px 38px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#666666; }
h1 { font-size:23px; font-weight:800; margin:0; line-height:1.28; }
.stars { font-size:12px; color:#f57c00; }
.stars .n { color:#666666; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:21px; font-weight:800; color:#38a034; }
.price-old { font-size:14px; color:#999999; text-decoration:line-through; }
.desc { font-size:13.5px; color:#333333; line-height:1.55; max-width:340px; }
.feat-row { display:flex; gap:8px; flex-wrap:wrap; }
.feat { background:#f6f6f6; border-radius:8px; padding:6px 12px; font-size:11.5px; font-weight:600; color:#333333; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#38a034; color:#fff; border:none; border-radius:9999px; padding:13px 18px;
font-size:14px; font-weight:700; }
.btn-outline { border:1.5px solid #38a034; color:#38a034; background:#fff; border-radius:9999px; padding:11.5px 16px;
font-size:12.5px; font-weight:700; white-space:nowrap; }
.meta { font-size:11px; color:#e53935; font-weight:700; }
</style></head>
<body>
<nav>
<div class="brand">Aerogarden</div>
<div class="navlinks"><span class="on">Gardens</span><span>Seed Pods</span><span>LED Grow</span><span>Support</span></div>
<div class="cart">Cart · 1</div>
</nav>
<main>
<div class="gallery">
<span class="badge-glow">Full-Spectrum LED</span>
<div class="garden"><div class="dome"></div>
<div class="pod p1"></div><div class="pod p2"></div><div class="pod p3"></div><div class="pod p4"></div>
</div>
</div>
<div class="info">
<span class="cat">Indoor Garden · 6-Pod</span>
<h1>Harvest 360 Smart Indoor Garden</h1>
<div class="stars">★★★★☆ <span class="n">4.3 · 5,610 reviews</span></div>
<div class="price-row"><span class="price">$149.95</span><span class="price-old">$179.95</span></div>
<p class="desc">Grow fresh herbs, salads, and flowers year-round with automated watering, nutrients, and full-spectrum LED grow light.</p>
<div class="feat-row">
<span class="feat">6 Pod Bay</span>
<span class="feat">Wi-Fi App Control</span>
<span class="feat">Auto-Height LED</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">Add Seed Kit</button>
</div>
<span class="meta">Limited-time offer — ends soon</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #0c4da2; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #eeeeee; color: #0c4da2;
border: 1px solid #0c4da2; border-radius: 4px;
padding: 9px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #444444;
border: 1px solid #bfbfbf; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #dc3232; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eeeeee; color:#313131; box-sizing:border-box;
font-family:'Adobe Caslon W01', Georgia, 'Times New Roman', serif; }
* { box-sizing:border-box; }
.topbar { height:56px; background:#0c4da2; color:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-size:17px; font-weight:700; font-family:'Museo Sans W01', Arial, sans-serif; }
.navlinks { display:flex; gap:20px; font-family:'Museo Sans W01', Arial, sans-serif; font-size:13px; font-weight:500;
letter-spacing:0.5px; text-transform:uppercase; }
.layout { display:flex; height:calc(640px - 56px); }
.media { width:320px; flex-shrink:0; background:#ffffff; display:flex; align-items:center; justify-content:center; }
.cover { width:160px; height:230px; background:linear-gradient(160deg, #0c4da2 0%, #003388 100%); border-radius:2px;
box-shadow:0 8px 20px rgba(0,0,0,0.12); }
.detail { flex:1; padding:26px 34px; display:flex; flex-direction:column; gap:12px; }
.kicker { font-family:'Museo Sans W01', Arial, sans-serif; font-size:12px; color:#666666; text-transform:uppercase; letter-spacing:0.3px; }
h1 { font-size:26px; font-weight:700; margin:0; }
.author { font-size:15px; color:#666666; }
.price { font-family:'Museo Sans W01', Arial, sans-serif; font-size:17px; }
.badges { display:flex; gap:8px; }
.badge-new { background:#003399; color:#ffffff; font-family:'Museo Sans W01', Arial, sans-serif; font-size:11px;
font-weight:700; letter-spacing:0.5px; text-transform:uppercase; border-radius:2px; padding:2px 8px; }
.badge-stock { background:#00d084; color:#ffffff; font-family:'Museo Sans W01', Arial, sans-serif; font-size:11px;
font-weight:700; letter-spacing:0.5px; text-transform:uppercase; border-radius:2px; padding:2px 8px; }
.desc { font-size:16px; color:#444444; line-height:1.6; }
.tabs { display:flex; gap:8px; }
.tab { font-family:'Museo Sans W01', Arial, sans-serif; font-size:13px; padding:6px 12px; border-radius:4px; }
.tab.active { background:#0c4da2; color:#ffffff; }
.tab:not(.active) { background:#f5f5f5; color:#666666; }
.actions { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#0c4da2; color:#ffffff; border:none; border-radius:4px; height:40px; font-family:'Museo Sans W01', Arial, sans-serif; font-size:15px; font-weight:500; }
.btn-secondary { background:#eeeeee; color:#0c4da2; border:1px solid #0c4da2; border-radius:4px; height:40px; padding:0 20px; font-family:'Museo Sans W01', Arial, sans-serif; font-size:15px; font-weight:500; }
</style></head>
<body>
<div class="topbar">
<div class="brand">Columbia University Press</div>
<div class="navlinks"><span>Subjects</span><span>New Releases</span><span>Series</span><span>Authors</span></div>
</div>
<div class="layout">
<div class="media"><div class="cover"></div></div>
<div class="detail">
<div class="kicker">Political Philosophy</div>
<h1>The Architecture of Consent</h1>
<div class="author">by Naomi Fairweather</div>
<div class="price">$32.00 · Hardcover</div>
<div class="badges"><span class="badge-new">New Release</span><span class="badge-stock">In Stock</span></div>
<div class="desc">A rigorous reexamination of democratic legitimacy in an age of algorithmic governance.</div>
<div class="tabs">
<div class="tab active">Description</div>
<div class="tab">Reviews</div>
<div class="tab">Details</div>
</div>
<div class="actions">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Learn More</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Roboto Mono",Menlo,Consolas,monospace; }
.map { position:relative; width:960px; height:640px; background:#F2F2F2;
background-image: linear-gradient(#E5E5E5 1px, transparent 1px), linear-gradient(90deg, #E5E5E5 1px, transparent 1px);
background-size:40px 40px; }
.water { position:absolute; width:260px; height:180px; background:#D9E5F2; top:60px; right:0; border-radius:0 0 0 120px; }
.route { position:absolute; top:120px; left:120px; width:520px; height:5px; background:#000; border-radius:3px; }
.pin { position:absolute; width:32px; height:40px; background:#000; border-radius:16px 16px 16px 2px; top:96px; left:600px; transform:rotate(45deg); }
.mapctrl { position:absolute; right:20px; top:100px; width:44px; height:44px; border-radius:50%; background:#fff; box-shadow:rgba(0,0,0,0.12) 0 2px 8px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.sheet { position:absolute; left:0; right:0; bottom:0; height:290px; background:#fff; border-radius:16px 16px 0 0; box-shadow:rgba(0,0,0,0.08) 0 -4px 24px; padding:10px 24px 24px; }
.grabber { width:36px; height:4px; background:#E5E5E5; border-radius:2px; margin:0 auto 16px; }
.whereto { height:56px; background:#F6F6F6; border-radius:8px; display:flex; align-items:center; gap:14px; padding:0 16px; font-size:18px; font-weight:500; }
.dotcol { display:flex; flex-direction:column; align-items:center; gap:3px; }
.dotcol span { width:8px; height:8px; background:#000; }
.dotcol .line { width:1px; height:14px; background:#000; border-left:1px dashed #000; background:none; }
.payment { display:flex; align-items:center; height:44px; margin-top:12px; font-size:15px; font-weight:500; }
.payment .chevron { margin-left:auto; color:#757575; }
.options { display:flex; gap:12px; margin-top:14px; }
.opt { flex:1; border:1px solid #E5E5E5; border-radius:8px; padding:12px; text-align:center; }
.opt.selected { border:2px solid #000; background:#F6F6F6; }
.opt .car { font-size:26px; }
.opt .name { font-size:14px; font-weight:500; margin-top:4px; }
.opt .eta { font-size:11px; color:#757575; }
.opt .price { font-size:15px; font-weight:600; margin-top:4px; }
.cta { position:absolute; left:24px; right:24px; bottom:24px; height:52px; background:#000; color:#fff; border-radius:8px; display:none; }
</style></head>
<body>
<div class="map">
<div class="water"></div>
<div class="route"></div>
<div class="pin"></div>
<div class="mapctrl">◎</div>
<div class="sheet">
<div class="grabber"></div>
<div class="whereto">
<div class="dotcol"><span></span><span style="height:14px;width:1px;background:#000"></span><span></span></div>
Where to?
</div>
<div class="payment mono">Uber (iOS) · Visa ·· 4242<span class="chevron">›</span></div>
<div class="options">
<div class="opt selected"><div class="car">🚗</div><div class="name">UberX</div><div class="eta mono">3 min · 4 seats</div><div class="price mono">$14.82</div></div>
<div class="opt"><div class="car">🚙</div><div class="name">Comfort</div><div class="eta mono">5 min · 4 seats</div><div class="price mono">$19.40</div></div>
<div class="opt"><div class="car">🚐</div><div class="name">XL</div><div class="eta mono">6 min · 6 seats</div><div class="price mono">$26.10</div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #161616;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #161616;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #161616; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #5f6772; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #4b71d9; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #4b71d9;
border: 1px solid #4b71d9; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #161616;
border: 1px solid #c5c5c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5f6772; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.2px; background: #ea0029; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'proxima-nova',-apple-system,'Segoe UI',Arial,sans-serif; color:#161616; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #efefef;}
.logo{font-size:19px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.hero{height:300px;background:#161616;display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;}
.herotext{color:#fff;width:48%;}
.hero h1{font-size:36px;font-weight:700;margin:0 0 12px;line-height:1.2;}
.hero p{font-size:15px;opacity:0.8;margin:0 0 20px;max-width:320px;}
.cta{background:#4b71d9;color:#fff;font-size:16px;font-weight:600;padding:12px 24px;border-radius:8px;width:fit-content;}
.bot{position:absolute;right:110px;top:90px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#5f6772,#161616 75%);}
.spec{display:flex;gap:1px;background:#e1e1e1;margin:0 40px;}
.scell{flex:1;background:#f6f6f6;text-align:center;padding:14px;}
.slabel{font-size:11px;font-weight:500;letter-spacing:0.1px;color:#5f6772;}
.sval{font-size:18px;font-weight:600;margin-top:4px;}
.label{padding:20px 40px 10px;font-size:18px;font-weight:600;}
.grid{display:flex;gap:16px;padding:0 40px;}
.card{width:200px;background:#f8f8f8;border:1px solid #efefef;border-radius:12px;padding:16px;position:relative;}
.thumb{height:100px;background:#f6f6f6;border-radius:8px;margin-bottom:10px;}
.badge{position:absolute;top:12px;left:12px;background:#ea0029;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.2px;text-transform:uppercase;border-radius:4px;padding:3px 8px;}
.pname{font-size:16px;font-weight:600;margin-bottom:4px;}
.pprice{font-size:24px;font-weight:700;color:#4b71d9;}
</style>
<div class="nav">
<div class="logo">Roborock</div>
<div class="navlinks"><span>Robot Vacuums</span><span>Wet/Dry Vacuums</span><span>Accessories</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>LiDAR precision. Zero effort.</h1>
<p>Mapping technology and auto-empty docking that keeps your floors clean without you thinking about it.</p>
<div class="cta">Shop Now</div>
</div>
<div class="bot"></div>
</div>
<div class="spec">
<div class="scell"><div class="slabel">Suction</div><div class="sval">7000 Pa</div></div>
<div class="scell"><div class="slabel">Battery</div><div class="sval">180 min</div></div>
<div class="scell"><div class="slabel">Mapping</div><div class="sval">LiDAR</div></div>
<div class="scell"><div class="slabel">Dock</div><div class="sval">Auto-Empty</div></div>
</div>
<div class="label">Compare Models</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb"></div><div class="pname">S8 MaxV Ultra</div><div class="pprice">$1,099</div></div>
<div class="card"><div class="thumb" style="background:#eef1f5"></div><div class="pname">Qrevo Curv</div><div class="pprice">$899</div></div>
<div class="card"><div class="thumb" style="background:#eef1f5"></div><div class="pname">Q Revo S</div><div class="pprice">$649</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0079bf; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0079bf; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bddd; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f1f2f4; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0079bf; color: #f1f2f4;
border: 1px solid #f1f2f4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0079bf; color: #f5f5f5;
border: 1px solid #278dc8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bddd; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #278cc7; color: #f1f2f4;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0079BF; color:#172B4D; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:56px; display:flex; align-items:center; padding:0 24px; gap:14px; }
.boardname { color:#fff; font-size:20px; font-weight:700; }
.avs { display:flex; margin-left:auto; }
.avs span { width:28px; height:28px; border-radius:50%; border:2px solid #0079BF; margin-left:-8px; }
.chip { background:rgba(255,255,255,0.16); color:#fff; font-size:13px; padding:6px 14px; border-radius:8px; }
.board { display:flex; gap:12px; padding:8px 16px; height:calc(640px - 56px); overflow:hidden; }
.list { width:272px; background:#F1F2F4; border-radius:12px; flex-shrink:0; padding:12px; display:flex; flex-direction:column; gap:8px; }
.list-head { display:flex; justify-content:space-between; align-items:center; font-size:15px; font-weight:600; padding:0 4px; }
.list-head .cnt { color:#5E6C84; font-weight:400; font-size:13px; }
.card { background:#fff; border-radius:8px; padding:10px 12px; box-shadow:rgba(9,30,66,0.13) 0 1px 1px, rgba(9,30,66,0.06) 0 0 1px; display:flex; flex-direction:column; gap:6px; }
.labels { display:flex; gap:4px; }
.labels span { height:8px; width:36px; border-radius:4px; }
.cardtitle { font-size:15px; font-weight:600; }
.badges { display:flex; gap:10px; font-size:12px; color:#5E6C84; }
.avatars { display:flex; margin-left:auto; }
.avatars span { width:22px; height:22px; border-radius:50%; margin-left:-6px; border:1px solid #fff; }
.addcard { color:#5E6C84; font-size:14px; padding:6px 4px; }
</style></head>
<body>
<div class="topbar">
<div class="boardname">Trello (iOS) · Sprint Board</div>
<div class="chip">Filter</div>
<div class="avs"><span style="background:#F87168"></span><span style="background:#579DFF"></span><span style="background:#4BCE97"></span></div>
</div>
<div class="board">
<div class="list">
<div class="list-head">To Do <span class="cnt">4</span></div>
<div class="card"><div class="labels"><span style="background:#F5CD47"></span><span style="background:#579DFF"></span></div>
<div class="cardtitle">Design onboarding empty states</div>
<div class="badges"><span>📅 Fri</span><span>💬 2</span><div class="avatars"><span style="background:#F87168"></span></div></div></div>
<div class="card"><div class="labels"><span style="background:#F87168"></span></div>
<div class="cardtitle">Fix flaky checkout tests</div>
<div class="badges"><span>✓ 1/4</span></div></div>
<div class="addcard">+ Add a card</div>
</div>
<div class="list">
<div class="list-head">In Progress <span class="cnt">2</span></div>
<div class="card"><div class="labels"><span style="background:#4BCE97"></span></div>
<div class="cardtitle">Migrate billing service to v2</div>
<div class="badges"><span>📅 Today</span><span>💬 5</span><div class="avatars"><span style="background:#579DFF"></span><span style="background:#4BCE97"></span></div></div></div>
<div class="card"><div class="cardtitle">Write release notes for v3.2</div>
<div class="badges"><span>✓ 2/3</span></div></div>
<div class="addcard">+ Add a card</div>
</div>
<div class="list">
<div class="list-head">Done <span class="cnt">6</span></div>
<div class="card"><div class="labels"><span style="background:#9F8FEF"></span></div>
<div class="cardtitle">Set up staging environment</div>
<div class="badges"><span>✓ 5/5</span></div></div>
<div class="card"><div class="cardtitle">Kickoff meeting notes</div></div>
<div class="addcard">+ Add a card</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcf8ee; color: #0c0c0c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcf8ee; color: #0c0c0c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #0c0c0c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #4d4d4d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #840815; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #fcf8ee; color: #0c0c0c;
border: 1px solid #840815; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #fcf8ee; color: #0c0c0c;
border: 1px solid #c0bdb6; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4d4d4d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffd045; color: #0c0c0c;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcf8ee; color:#0c0c0c; box-sizing:border-box;
font-family:'Epilogue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#fcf8ee; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.brand { font-family:'Instrument Sans','Epilogue',sans-serif; font-weight:700; font-size:20px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:14px; font-weight:500; color:#0c0c0c; }
.navlinks span.on { color:#840815; }
.navicons { display:flex; gap:16px; font-size:12px; color:#4d4d4d; }
.hero { height:230px; display:flex; align-items:center; padding:0 32px; gap:30px; }
.hero .copy { flex:1.2; }
.hero h1 { font-family:'Instrument Sans','Epilogue',sans-serif; font-size:44px; font-weight:700;
letter-spacing:-1px; line-height:1.05; margin:0 0 12px; }
.hero p { font-size:15px; color:#282828; margin:0 0 16px; max-width:380px; }
.btn { display:inline-block; width:fit-content; background:#840815; color:#fff; font-size:16px; font-weight:600;
padding:14px 28px; border-radius:8px; }
.hero .art { flex:1; height:180px; border-radius:12px; background:radial-gradient(circle at 30% 30%,#ffd045,#840815);
position:relative; }
.hero .art::after { content:'💥'; position:absolute; font-size:56px; right:20px; bottom:16px; }
.cats { display:flex; gap:8px; padding:0 32px 14px; }
.cat { background:#f6f6f6; color:#4d4d4d; font-size:13px; font-weight:600; padding:8px 20px; border-radius:9999px; }
.cat.on { background:#840815; color:#fff; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:0 32px; }
.card { background:#ffffff; border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.cover { height:110px; position:relative; }
.badge { position:absolute; top:6px; left:6px; font-size:9px; font-weight:700; letter-spacing:0.5px;
text-transform:uppercase; padding:4px 8px; border-radius:4px; }
.b-new { background:#ffd045; color:#0c0c0c; } .b-exp { background:#aaccaa; color:#0c0c0c; } .b-sale { background:#df1e27; color:#fff; }
.info { padding:8px 12px 12px; }
.t { font-size:14px; font-weight:600; margin:0 0 4px; }
.p { font-size:15px; color:#840815; font-weight:600; }
footer { position:absolute; bottom:0; left:0; right:0; height:48px; background:#272d45; color:#d3d4dd;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
</style></head>
<body>
<nav>
<div class="brand">Exploding Kittens</div>
<div class="navlinks"><span class="on">Games</span><span>Expansions</span><span>Apparel</span><span>About</span></div>
<div class="navicons"><span>Search</span><span>Cart (2)</span></div>
</nav>
<div class="hero">
<div class="copy">
<h1>Draw a card.<br>Hope it's not this one.</h1>
<p>The wildly popular card game of kitties, explosions, and sometimes goats.</p>
<span class="btn">Shop Games</span>
</div>
<div class="art"></div>
</div>
<div class="cats"><span class="cat on">Best Sellers</span><span class="cat">Expansions</span><span class="cat">2-Player</span><span class="cat">Party</span></div>
<div class="grid">
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#840815,#6a0611);"><span class="badge b-new">New</span></div>
<div class="info"><p class="t">Exploding Kittens</p><p class="p">$20.00</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#aaccaa,#6fa06f);"><span class="badge b-exp">Expansion</span></div>
<div class="info"><p class="t">Imploding Kittens</p><p class="p">$15.00</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#90298d,#5f1a5d);"></div>
<div class="info"><p class="t">Throw Throw Burrito</p><p class="p">$22.00</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#ed2987,#c41f6f);"><span class="badge b-sale">Sale</span></div>
<div class="info"><p class="t">Poetry for Neanderthals</p><p class="p">$18.00</p></div></div>
</div>
<footer><span>© Exploding Kittens — Games that might blow up</span><span>Rules · Support · Contact</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #282828;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #282828;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.35; margin: 0; color: #282828; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #fdbc00; color: #282828;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #f5f5f5; color: #282828;
border: 1px solid #fdbc00; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #282828;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #fdbc00; color: #282828;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f5; color:#282828; box-sizing:border-box;
font-family:'DM Sans','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#f5f5f5; border-bottom:1px solid #e6e6e6; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:500; color:#464646; }
.cart { background:#fdbc00; color:#282828; font-size:12px; font-weight:600; padding:6px 14px; border-radius:8px; }
.content { display:flex; gap:20px; padding:20px 32px; }
.gallery { flex:1.1; }
.mainimg { height:200px; background:linear-gradient(160deg,#282828,#464646); border-radius:8px; position:relative; }
.mainimg::after { content:''; position:absolute; left:20px; top:20px; right:20px; height:26px; background:#fdbc00; border-radius:8px; opacity:.85; }
.thumbs { display:flex; gap:8px; margin-top:8px; }
.thumb { width:44px; height:44px; background:#e6e6e6; border-radius:8px; }
.details { flex:1; }
.details h1 { font-size:20px; font-weight:600; margin:0 0 6px; }
.details .sub { font-size:12px; color:#888888; margin:0 0 10px; }
.price { font-size:22px; font-weight:700; margin-bottom:12px; }
.price .sale { color:#dd2c00; }
.price .old { font-size:14px; color:#aaaaaa; text-decoration:line-through; font-weight:400; margin-left:8px; }
.btnrow { display:flex; gap:8px; margin-bottom:14px; }
.btn { flex:1; text-align:center; padding:12px; border-radius:8px; font-size:13px; font-weight:600; }
.btn-primary { background:#fdbc00; color:#282828; }
.btn-outline { background:#fff; border:1px solid #dedede; color:#282828; }
.spec { border:1px solid #e6e6e6; border-radius:8px; background:#fff; }
.specrow { display:flex; justify-content:space-between; padding:8px 12px; font-size:12px; border-bottom:1px solid #e6e6e6; }
.specrow:last-child { border-bottom:none; }
.specrow span:first-child { color:#888888; font-weight:600; }
footer { position:absolute; bottom:0; left:0; right:0; height:44px; background:#282828; color:#aaaaaa;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Baseus Docking 2</p>
<div class="navlinks"><span>Docking</span><span>Hubs</span><span>Cables</span><span>Chargers</span></div>
<div class="cart">Cart · 1 item</div>
</nav>
<div class="content">
<div class="gallery">
<div class="mainimg"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="details">
<h1>13-in-1 USB-C Docking Station</h1>
<p class="sub">Triple 4K display · 100W passthrough · Gigabit LAN</p>
<div class="price"><span class="sale">$89.99</span><span class="old">$119.99</span></div>
<div class="btnrow"><div class="btn btn-primary">Add to Cart</div><div class="btn btn-outline">Buy Now</div></div>
<div class="spec">
<div class="specrow"><span>Ports</span><span>13</span></div>
<div class="specrow"><span>Max Display</span><span>3x 4K@60Hz</span></div>
<div class="specrow"><span>Power Delivery</span><span>100W</span></div>
<div class="specrow"><span>Data Transfer</span><span>10Gbps</span></div>
</div>
</div>
</div>
<footer>
<span>© Baseus Docking 2</span>
<span>Baseus Docking 2 · Warranty · Support · Where to Buy</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #dedede; color: #121212;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: transparent; color: #dedede;
border: 1px solid #dedede; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #1a1a1a; color: #dedede;
border: 1px solid #121212; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ffffff; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #dedede; color: #121212;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121212; font-family:'Lato',Arial,sans-serif; color:#dedede; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#171414;}
.logo{font-family:'Montserrat',Arial,sans-serif;font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#dedede;}
.navlinks{display:flex;gap:24px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:#9a9a9a;}
.hero{height:250px;position:relative;background:linear-gradient(100deg,#171414,#0a0a0a);display:flex;align-items:center;padding:0 40px;}
.herotext{width:440px;}
.herotext h1{font-family:'Montserrat',Arial,sans-serif;font-size:34px;font-weight:700;color:#fff;margin:0 0 14px;line-height:1.15;}
.herotext p{font-size:15px;color:#b0b0b0;margin:0 0 20px;max-width:340px;}
.btn{display:inline-block;background:#dedede;color:#121212;font-family:'Montserrat',Arial,sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;padding:14px 28px;border-radius:0;width:fit-content;}
.robot{position:absolute;right:70px;top:40px;width:220px;height:170px;}
.robot .body{position:absolute;left:40px;top:40px;width:120px;height:100px;background:#dedede;border-radius:4px;}
.robot .led{position:absolute;left:60px;top:60px;width:14px;height:14px;border-radius:9999px;background:#4caf50;}
.robot .led2{position:absolute;left:90px;top:60px;width:14px;height:14px;border-radius:9999px;background:#ff9800;}
.robot .arm{position:absolute;left:160px;top:60px;width:50px;height:8px;background:#666;}
.code{margin:0 40px 0;background:#1e1e1e;border-radius:0;padding:12px 16px;font-family:'Consolas',monospace;font-size:12px;color:#4caf50;}
.sec{padding:20px 40px 0;}
.sectitle{font-family:'Montserrat',Arial,sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:212px;background:#171414;}
.thumb{height:100px;}
.body2{padding:10px;}
.pname{font-family:'Montserrat',Arial,sans-serif;font-size:13px;font-weight:700;color:#fff;}
.pprice{font-size:13px;color:#dedede;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Makeblock</div>
<div class="navlinks"><div>Robotics Kits</div><div>Modules</div><div>Software</div><div>Education</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Build things that build back.</h1>
<p>Modular robotics and STEM hardware for students who learn by making.</p>
<div class="btn">Shop Kits</div>
</div>
<div class="robot"><div class="body"></div><div class="led"></div><div class="led2"></div><div class="arm"></div></div>
</div>
<div class="code">$ makeblock upload --board mCore --port /dev/tty.usbmodem</div>
<div class="sec">
<div class="sectitle">Robotics Kits</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#dedede,#121212);"></div><div class="body2"><div class="pname">mBot2 Starter Kit</div><div class="pprice">$99.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4caf50,#171414);"></div><div class="body2"><div class="pname">mBuild Sensor Pack</div><div class="pprice">$59.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff9800,#171414);"></div><div class="body2"><div class="pname">CyberPi Controller</div><div class="pprice">$39.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #146ef5; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #146ef5; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #90b8f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #080808; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #146ef5; color: #080808;
border: 1px solid #080808; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #146ef5; color: #f5f5f5;
border: 1px solid #3884f5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #90b8f5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #125ecf; color: #080808;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#080808; box-sizing:border-box;
font-family:"WF Visual Sans Variable",Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:600; font-size:16px; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#080808; }
.btn { background:#146ef5; color:#ffffff; border-radius:4px; padding:8px 16px; font-size:14px; font-weight:550; }
.hero { text-align:center; padding:28px 32px 18px; }
.hero h1 { font-size:40px; font-weight:600; letter-spacing:-0.6px; line-height:1.1; margin:0 0 10px; }
.hero p { font-size:16px; color:#5a5a5a; margin:0 0 16px; }
.row { display:flex; gap:10px; justify-content:center; }
.btn-out { background:transparent; color:#080808; border:1px solid #d8d8d8; border-radius:4px; padding:8px 16px; font-size:14px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:20px 32px; }
.card { border:1px solid #d8d8d8; border-radius:8px; padding:18px; position:relative; overflow:hidden; }
.bar { position:absolute; top:0; left:0; right:0; height:4px; }
.bar.purple { background:#7a3dff; } .bar.pink { background:#ed52cb; } .bar.green { background:#00d722; }
.card h3 { font-size:18px; font-weight:600; margin:10px 0 8px; }
.card p { font-size:13px; color:#363636; margin:0; line-height:1.5; }
.plans { display:flex; gap:14px; padding:0 32px 20px; }
.plan { flex:1; border:1px solid #d8d8d8; border-radius:16px; padding:16px; text-align:center; }
.plan.rec { border-top:4px solid #146ef5; }
.plan h4 { font-size:14px; margin:0 0 6px; }
.plan .p { font-size:20px; font-weight:600; margin:0 0 8px; }
.badge { background:#146ef5; color:#ffffff; font-size:11px; font-weight:550; border-radius:4px; padding:2px 8px; display:inline-block; margin-bottom:6px; }
</style></head>
<body>
<nav>
<span class="brand">Webflow</span>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Marketplace</span><span>Enterprise</span></div>
<span class="btn">Get started free</span>
</nav>
<section class="hero">
<h1>The agentic web platform for modern businesses</h1>
<p>Design, build, and launch responsive websites visually — no code required.</p>
<div class="row"><span class="btn">Start building</span><span class="btn-out">Contact sales</span></div>
</section>
<section class="grid">
<div class="card"><div class="bar purple"></div><h3>Visual canvas</h3><p>Design with real HTML, CSS, and JavaScript in a drag-and-drop editor.</p></div>
<div class="card"><div class="bar pink"></div><h3>CMS collections</h3><p>Model structured content and design its layout without touching code.</p></div>
<div class="card"><div class="bar green"></div><h3>Hosting & scale</h3><p>Global CDN, automatic backups, and enterprise-grade uptime.</p></div>
</section>
<section class="plans">
<div class="plan"><h4>Starter</h4><div class="p">Free</div></div>
<div class="plan rec"><span class="badge">Most Popular</span><h4>CMS</h4><div class="p">$19/mo</div></div>
<div class="plan"><h4>Business</h4><div class="p">$49/mo</div></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #191919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #191919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #191919; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #4d4d4d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #3a3a3a; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #3a3a3a;
border: 1px solid #3a3a3a; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #3a3a3a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4d4d4d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #c1c9d1; color: #191919;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#3a3a3a; box-sizing:border-box;
font-family:'Avenir Next','Avenir','Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #dedede; }
.brand { font-size:20px; font-weight:600; color:#191919; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#4d4d4d; }
.navlinks span.active { color:#191919; border-bottom:2px solid #3a3a3a; padding-bottom:19px; }
.icons { display:flex; gap:14px; font-size:13px; color:#777777; }
.hero { display:flex; gap:0; height:220px; }
.heroLeft { flex:1.3; background:linear-gradient(150deg,#3a4a5a,#1a232c); position:relative; }
.heroLeft::after { content:''; position:absolute; right:60px; top:30px; width:110px; height:150px; border-radius:8px;
background:linear-gradient(150deg,#c1c9d1,#7a8590); }
.heroLeft::before { content:''; position:absolute; right:20px; top:60px; width:110px; height:150px; border-radius:8px;
background:linear-gradient(150deg,#e6a86a,#a8703a); }
.heroRight { flex:1; background:#f5f5f5; display:flex; flex-direction:column; justify-content:center; padding:0 28px; }
.overline { font-size:11px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#c1c9d1; background:#191919; display:inline-block; padding:3px 8px; border-radius:2px; margin-bottom:10px; width:fit-content; }
.headline { font-size:24px; font-weight:600; color:#191919; margin-bottom:8px; }
.sub { font-size:15px; color:#3a3a3a; line-height:1.5; margin-bottom:14px; }
.heroBtn { display:inline-block; background:#3a3a3a; color:#fff; border-radius:4px; padding:12px 24px; font-size:14px;
font-weight:600; letter-spacing:0.5px; text-transform:uppercase; width:fit-content; }
.section { padding:22px 32px 0; }
.section h2 { font-size:20px; font-weight:600; color:#191919; margin-bottom:14px; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.card { }
.photo { aspect-ratio:2/3; margin-bottom:8px; position:relative; }
.c1 .photo { background:linear-gradient(150deg,#4a5764,#20272e); }
.c2 .photo { background:linear-gradient(150deg,#8a6a4a,#3a2a1a); }
.c3 .photo { background:linear-gradient(150deg,#7a8590,#3a4550); }
.c4 .photo { background:linear-gradient(150deg,#c1c9d1,#8a97a3); }
.c5 .photo { background:linear-gradient(150deg,#5a4a6a,#2a2036); }
.badge { position:absolute; top:6px; left:6px; background:#c1c9d1; color:#191919; font-size:11px; font-weight:600;
letter-spacing:0.5px; text-transform:uppercase; border-radius:2px; padding:2px 6px; }
.name { font-size:16px; font-weight:600; color:#191919; }
.price { font-size:15px; color:#3a3a3a; margin-top:2px; }
</style></head>
<body>
<nav>
<div class="brand">Gkids Shop</div>
<div class="navlinks">
<span class="active">Films</span><span>Blu-ray</span><span>Collectibles</span><span>Apparel</span>
</div>
<div class="icons">Search · Cart</div>
</nav>
<div class="hero">
<div class="heroLeft"></div>
<div class="heroRight">
<div class="overline">Now Available</div>
<div class="headline">The Animation Vault</div>
<div class="sub">Collector's editions from the world's finest animation studios.</div>
<div class="heroBtn">Shop Blu-ray</div>
</div>
</div>
<div class="section">
<h2>New Releases</h2>
<div class="grid">
<div class="card c1"><div class="photo"><div class="badge">New</div></div><div class="name">Winter Tales</div><div class="price">$24.99</div></div>
<div class="card c2"><div class="photo"></div><div class="name">The Kite Runner</div><div class="price">$19.99</div></div>
<div class="card c3"><div class="photo"></div><div class="name">Paper Lanterns</div><div class="price">$22.99</div></div>
<div class="card c4"><div class="photo"><div class="badge">Exclusive</div></div><div class="name">Northern Lights</div><div class="price">$29.99</div></div>
<div class="card c5"><div class="photo"></div><div class="name">Quiet Forest</div><div class="price">$18.99</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #5f6772; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ec523e; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #ec523e;
border: 1px solid #ec523e; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.625; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5f6772; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.27; letter-spacing: 0.6px; background: #ffefee; color: #202020;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Joylux Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Assistant',sans-serif; background:#ffffff; color:#202020; }
*{box-sizing:border-box;}
.nav{height:60px;background:#121212;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:'Work Sans',sans-serif;font-weight:700;font-size:19px;color:#fff;}
.logo span{color:#ec523e;}
.navlinks{display:flex;gap:24px;font-family:'Work Sans',sans-serif;font-size:13px;font-weight:500;color:#fff;}
.btn-hero{display:inline-block;background:#ec523e;color:#fff;padding:12px 26px;border-radius:8px;font-family:'Work Sans',sans-serif;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;}
.hero{background:#121212;color:#fff;padding:26px 40px 30px;display:flex;align-items:center;justify-content:space-between;}
.hero-text h1{font-family:'Work Sans',sans-serif;font-size:34px;font-weight:700;line-height:1.1;letter-spacing:-.4px;margin:0 0 8px;max-width:420px;}
.hero-text p{font-size:14px;color:rgba(255,255,255,.75);max-width:380px;margin:0 0 14px;}
.chips{display:flex;gap:8px;margin-top:14px;}
.chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:999px;font-size:10px;padding:5px 12px;text-transform:uppercase;letter-spacing:.4px;color:#fff;}
.hero-art{width:170px;height:150px;border-radius:12px;background:linear-gradient(160deg,#413389,#4d5bcd);}
.stats{display:flex;gap:14px;padding:18px 40px;background:#ffefee;}
.stat{flex:1;text-align:center;}
.stat b{font-family:'Work Sans',sans-serif;font-size:26px;font-weight:700;color:#b43145;display:block;}
.stat span{font-size:11px;color:#5f6772;text-transform:uppercase;letter-spacing:.4px;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:18px 40px;}
.card{background:#fff;border:1px solid #d9d9d9;border-radius:12px;padding:14px;}
.imgbox{background:#f3f3f3;height:80px;border-radius:8px;}
.title{font-family:'Work Sans',sans-serif;font-size:15px;font-weight:600;margin-top:10px;}
.desc{font-size:12px;color:#5f6772;margin-top:2px;}
</style>
<div class="nav">
<div class="logo">Joylux<span>.</span></div>
<div class="navlinks"><span>Devices</span><span>Wellness</span><span>Learn</span><span>Reviews</span></div>
<div class="btn-hero">Shop Now</div>
</div>
<div class="hero">
<div class="hero-text">
<h1>Feel like<br>yourself again.</h1>
<p>FDA-cleared light therapy for pelvic floor wellness, designed with the same care as premium skincare.</p>
<div class="chips"><div class="chip">FDA-Cleared</div><div class="chip">Clinically Studied</div><div class="chip">94% Satisfaction</div></div>
</div>
<div class="hero-art"></div>
</div>
<div class="stats">
<div class="stat"><b>94%</b><span>Reported Improvement</span></div>
<div class="stat"><b>87%</b><span>Saw Results in 3 Weeks</span></div>
<div class="stat"><b>100K+</b><span>Women Treated</span></div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#f6d9d3,#ec7f6c);"></div>
<div class="title">vFit Gold+</div>
<div class="desc">Light & heat pelvic wellness device</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#dfe1ec,#8894c9);"></div>
<div class="title">vSculpt Pro</div>
<div class="desc">Vibration therapy for pelvic floor</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#f4e5d5,#d9a878);"></div>
<div class="title">Intimate Wellness Serum</div>
<div class="desc">Daily hydration & comfort</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.18; letter-spacing: -0.22px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.33px; background: #ffc900; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Neue Haas Grotesk Text','Helvetica Neue',Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:72px;background:#ffffff;border-bottom:1px solid #ebebeb;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-family:'Neue Haas Grotesk Display',Arial,sans-serif;font-size:20px;font-weight:600;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;letter-spacing:0.14px;}
.navlinks span:first-child{color:#108474;}
.navlinks span:not(:first-child){color:#7b7b7b;}
.searchpill{width:200px;height:38px;border-radius:9999px;border:1px solid #dedede;background:#f9fafb;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#7b7b7b;}
.hero{height:238px;background:#f9fafb;display:flex;align-items:center;padding:0 36px;}
.heroText{width:440px;}
.h1{font-family:'Neue Haas Grotesk Display',Arial,sans-serif;font-size:32px;font-weight:600;letter-spacing:-0.6px;line-height:1.14;margin:0 0 12px;}
.sub{font-size:14px;color:#3f3f3f;margin:0 0 18px;max-width:360px;}
.ctarow{display:flex;gap:10px;}
.btn{height:46px;padding:0 26px;border-radius:9999px;display:flex;align-items:center;font-size:14px;font-weight:600;letter-spacing:0.3px;}
.btnT{background:#108474;color:#fff;}
.btnM{background:#ffc900;color:#121212;}
.bank{width:400px;height:238px;position:relative;}
.bankbody{position:absolute;right:60px;top:44px;width:150px;height:150px;border-radius:16px;background:#108474;}
.bankled{position:absolute;right:118px;top:100px;width:34px;height:34px;border-radius:9999px;background:#ffc900;}
.bankport{position:absolute;right:130px;top:170px;width:10px;height:6px;background:#0d6b5d;border-radius:2px;}
.cable{position:absolute;right:210px;top:120px;width:70px;height:8px;background:#be408e;border-radius:4px;}
.sec{padding:20px 36px;}
.sectitle{font-size:16px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:206px;background:#ffffff;border:1px solid #ebebeb;border-radius:8px;overflow:hidden;}
.thumb{height:90px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;color:#fff;padding:4px 8px;border-radius:4px;}
.pbody{padding:10px 14px 12px;}
.ptitle{font-size:14px;font-weight:600;margin-bottom:2px;}
.pprice{font-family:'Neue Haas Grotesk Display',Arial,sans-serif;font-size:16px;font-weight:600;letter-spacing:-0.2px;}
</style>
<div class="nav">
<div class="logo">Statik</div>
<div class="navlinks"><span>Power Banks</span><span>Cables</span><span>Audio</span><span>Wall Chargers</span></div>
<div class="searchpill">Search products...</div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Charged and ready,<br>always.</div>
<div class="sub">Power banks, cables and audio built for reliability first, style second.</div>
<div class="ctarow"><div class="btn btnT">Shop Power</div><div class="btn btnM">See Deals</div></div>
</div>
<div class="bank"><div class="bankbody"></div><div class="bankled"></div><div class="bankport"></div><div class="cable"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#108474"><div class="badge" style="background:#ffc900;color:#121212">New</div></div><div class="pbody"><div class="ptitle">20K Fast Charge Bank</div><div class="pprice">$49.99</div></div></div>
<div class="card"><div class="thumb" style="background:#3f1b74"><div class="badge" style="background:#be408e">Audio</div></div><div class="pbody"><div class="ptitle">Wireless Earbuds Pro</div><div class="pprice">$79.99</div></div></div>
<div class="card"><div class="thumb" style="background:#ffc900"><div class="badge" style="background:#d32f2f">Sale</div></div><div class="pbody"><div class="ptitle">USB-C Braided Cable 2m</div><div class="pprice">$14.99</div></div></div>
<div class="card"><div class="thumb" style="background:#0d6b5d"></div><div class="pbody"><div class="ptitle">65W GaN Wall Charger</div><div class="pprice">$39.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #383838;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #383838;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #383838; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #703cd3; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #ffffff; color: #383838;
border: 1px solid #703cd3; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #383838;
border: 1px solid #cdcdcd; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #703cd3; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system, Arial, Helvetica, sans-serif; color:#383838; }
*{box-sizing:border-box;}
.nav{height:64px;background:#ffffff;border-bottom:1px solid #d0d0d0;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;letter-spacing:0.3px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#707070;}
.navlinks span:first-child{color:#703cd3;}
.btn{height:38px;padding:0 20px;border-radius:8px;background:#703cd3;color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;}
.hero{height:230px;background:#ffffff;display:flex;align-items:center;padding:0 32px;position:relative;overflow:hidden;}
.heroText{width:440px;z-index:2;}
.h1{font-size:30px;font-weight:700;line-height:1.15;letter-spacing:-0.3px;margin:0 0 10px;}
.sub{font-size:14px;color:#4a4a4a;margin:0 0 18px;max-width:340px;}
.hexwrap{position:absolute;right:60px;top:20px;width:280px;height:190px;}
.hex{position:absolute;width:56px;height:56px;background:#703cd3;clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);}
.hexsoft{background:#9a8be5;}
.h1a{left:100px;top:10px;} .h2a{left:150px;top:50px;} .h3a{left:100px;top:90px;background:#9a8be5;} .h4a{left:190px;top:0px;background:#9a8be5;}
.sec{padding:20px 32px;}
.sectitle{font-size:16px;font-weight:700;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:206px;background:#ffffff;border:1px solid #e8e8e8;border-radius:12px;padding:12px;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#9a8be5;color:#fff;font-size:10px;font-weight:600;text-transform:uppercase;padding:3px 8px;border-radius:8px;z-index:2;}
.thumb{height:88px;border-radius:8px;margin-bottom:10px;}
.ptitle{font-size:13px;font-weight:600;margin-bottom:4px;}
.pprice{font-size:14px;font-weight:700;}
</style>
<div class="nav">
<div class="logo">Steelseries</div>
<div class="navlinks"><span>Mice</span><span>Keyboards</span><span>Headsets</span><span>GG Software</span></div>
<div class="btn">Shop Gear</div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Precision hardware,<br>zero distraction.</div>
<div class="sub">Mice, keyboards and headsets engineered with the seriousness of a pro tool.</div>
</div>
<div class="hexwrap"><div class="hex h1a"></div><div class="hex hexsoft h4a"></div><div class="hex h2a"></div><div class="hex hexsoft h3a"></div></div>
</div>
<div class="sec">
<div class="sectitle">Featured Gear</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:#383838"></div><div class="ptitle">Aerox 5 Wireless Mouse</div><div class="pprice">$99.99</div></div>
<div class="card"><div class="thumb" style="background:#703cd3"></div><div class="ptitle">Apex Pro OLED Keyboard</div><div class="pprice">$219.99</div></div>
<div class="card"><div class="thumb" style="background:#9a8be5"></div><div class="ptitle">Arctis Nova Pro Headset</div><div class="pprice">$349.99</div></div>
<div class="card"><div class="thumb" style="background:#4a4a4a"></div><div class="ptitle">QcK Prism XL Mousepad</div><div class="pprice">$59.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #696969; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #585458; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #585458;
border: 1px solid #585458; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #696969; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f94c43; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Poppins',Georgia,serif; color:#363636; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e6e5e6;}
.logo{font-family:Georgia,serif;font-size:20px;color:#121212;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#121212;}
.navlinks span:first-child{color:#585458;border-bottom:2px solid #585458;padding-bottom:20px;}
.icon{width:36px;height:36px;border-radius:9999px;background:#f7f7f7;display:flex;align-items:center;justify-content:center;font-size:11px;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;gap:30px;background:#f7f7f7;}
.herotext{width:46%;}
.herotext h1{font-family:Georgia,serif;font-size:30px;font-weight:400;color:#121212;margin:0 0 14px;line-height:1.2;}
.herotext p{font-size:14px;color:#363636;margin:0 0 18px;max-width:300px;}
.herocta{display:inline-block;background:#585458;color:#fff;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;border-radius:8px;padding:14px 28px;}
.heroimg{width:46%;height:180px;border-radius:12px;background:linear-gradient(135deg,#eee3cc,#b08770 70%);position:relative;overflow:hidden;}
.heroimg:before{content:'';position:absolute;width:100px;height:60px;background:#e6e5e6;border-radius:8px;bottom:20px;left:40px;box-shadow:0 8px 18px rgba(0,0,0,0.08);}
.grid{display:flex;gap:16px;padding:20px 36px 0;}
.card{width:200px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.04);}
.thumb{height:118px;}
.body{padding:10px 14px 14px;}
.ptitle{font-size:15px;font-weight:500;color:#121212;margin-bottom:4px;}
.pprice{font-size:14px;color:#363636;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#f7f7f7;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.footer span{color:#696969;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Society OF Wanderers</div>
<div class="navlinks"><span>Bedding</span><span>Linen</span><span>Homewares</span><span>Journal</span></div>
<div class="icon">⚲</div>
</div>
<div class="hero">
<div class="herotext">
<h1>French flax, sun-bleached and unhurried.</h1>
<p>Textural linen made for a home that trusts natural light and worn-in comfort.</p>
<div class="herocta">Shop Linen</div>
</div>
<div class="heroimg"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b08770,#eee3cc)"></div><div class="body"><div class="ptitle">Stone Linen Duvet</div><div class="pprice">$249</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#585458,#e6e5e6)"></div><div class="body"><div class="ptitle">Charcoal Pillowcase Set</div><div class="pprice">$79</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#eee3cc,#585458)"></div><div class="body"><div class="ptitle">Parchment Linen Throw</div><div class="pprice">$139</div></div></div>
</div>
<div class="footer"><span>© Society of Wanderers — Australia</span><span>Care Guide · Journal</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.22px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9e9e9e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #088f87; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: transparent; color: #088f87;
border: 1px solid #088f87; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1a1a1a; color: #dedede;
border: 1px solid #121212; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9e9e9e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #088f87; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Kaged Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Inter,-apple-system,system-ui,'Helvetica Neue',sans-serif; background:#121212; color:#dedede; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #2a2a2a;}
.logo{font-family:'DINPro',Inter,sans-serif;font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.5px;color:#dedede;}
.navlinks{display:flex;gap:22px;font-family:'DINPro',Inter,sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.navlinks .active{color:#088f87;border-bottom:2px solid #088f87;padding-bottom:5px;}
.searchbar{width:190px;height:36px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:8px;font-size:12px;color:#9e9e9e;line-height:36px;padding:0 14px;}
.hero{padding:26px 36px;text-align:center;}
.hero .eyebrow{font-family:'DINPro',Inter,sans-serif;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#088f87;margin-bottom:8px;}
.hero h1{font-family:'DINPro',Inter,sans-serif;font-size:34px;font-weight:700;letter-spacing:-1px;line-height:1.1;margin:0 0 12px;text-transform:uppercase;}
.btn{display:inline-block;background:#088f87;color:#fff;padding:14px 32px;border-radius:8px;font-family:'DINPro',Inter,sans-serif;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 36px;}
.card{background:#1e1e1e;border-radius:12px;padding:14px;}
.imgbox{background:#272727;border-radius:12px;aspect-ratio:1:1;height:100px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-family:'DINPro',Inter,sans-serif;background:#088f87;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.badge.sale{background:#e53935;}
.title{font-family:'DINPro',Inter,sans-serif;font-size:14px;font-weight:500;margin-top:10px;color:#dedede;}
.price{font-size:14px;color:#088f87;margin-top:3px;}
</style>
<div class="nav">
<div class="logo">Kaged</div>
<div class="navlinks"><span class="active">Protein</span><span>Pre-Workout</span><span>Aminos</span><span>Stack</span></div>
<div class="searchbar">Search supplements…</div>
</div>
<div class="hero">
<div class="eyebrow">Never Stop Evolving</div>
<h1>Performance-driven<br>supplements, engineered.</h1>
<div class="btn">Shop Best Sellers</div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#1a3a38,#088f87);"><div class="badge">New</div></div>
<div class="title">Kaged Whey Protein Isolate</div>
<div class="price">$54.99</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#3a1a1a,#8a2a2a);"><div class="badge sale">Sale</div></div>
<div class="title">Pre-Kaged Pre-Workout</div>
<div class="price">$44.99</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#2a2a3a,#4a4a7a);"></div>
<div class="title">In-Kaged Amino Energy</div>
<div class="price">$34.99</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#3a3a1a,#8a8a2a);"></div>
<div class="title">Re-Kaged Post-Workout</div>
<div class="price">$49.99</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e1f21; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #1e1f21;
border: 1px solid #1e1f21; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdbdb; color: #1e1f21;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1E1F21; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #EDEBE9; }
.brand { font-size:20px; font-weight:800; letter-spacing:-0.3px; margin:0; }
.navr { display:flex; align-items:center; gap:18px; }
.navr span { font-size:13px; color:#6D6E6F; font-weight:600; }
.avatar { width:28px; height:28px; border-radius:50%; background:#4573D2; color:#fff; font-size:11px; font-weight:700;
display:flex; align-items:center; justify-content:center; }
main { display:flex; height:calc(640px - 64px - 30px); }
/* left: task list, the actual Asana product */
.listpane { flex:1; padding:22px 30px 0; border-right:1px solid #EDEBE9; }
.title { font-size:26px; font-weight:800; letter-spacing:-0.4px; margin:0 0 12px; }
.viewtabs { display:flex; gap:20px; border-bottom:1px solid #EDEBE9; padding-bottom:8px; margin-bottom:10px; }
.viewtabs span { font-size:13px; font-weight:600; color:#6D6E6F; padding-bottom:9px; }
.viewtabs span.active { color:#1E1F21; border-bottom:2px solid #F06A6A; }
.section { display:flex; align-items:center; gap:6px; padding:10px 0 4px; }
.section .caret { font-size:9px; color:#6D6E6F; }
.section .label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; color:#1E1F21; }
.section .count { font-size:11px; color:#9CA3A6; margin-left:4px; }
.row { display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid #EDEBE9; }
.circ { width:18px; height:18px; border-radius:50%; border:1.5px solid #9CA3A6; flex:0 0 auto; }
.circ.done { background:#62D26F; border-color:#62D26F; position:relative; }
.circ.done::after { content:'✓'; position:absolute; inset:0; color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; }
.rowbody { flex:1; min-width:0; }
.rowbody .name { font-size:14px; font-weight:500; }
.rowbody .name.strike { text-decoration:line-through; color:#9CA3A6; }
.pills { display:flex; gap:6px; margin-top:5px; }
.pill { font-size:10px; font-weight:600; padding:2px 8px; border-radius:999px; }
.p-plum { color:#4573D2; background:#4573D214; }
.p-aqua { color:#4ECBC4; background:#4ECBC414; }
.p-orange { color:#F1BD6C; background:#F1BD6C1F; }
.p-overdue { color:#E8384F; background:#E8384F2E; }
.rowav { width:20px; height:20px; border-radius:50%; font-size:9px; color:#fff; font-weight:700;
display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
/* right: status update card + board sliver, showing the "same task, different rendering" idea */
.side { width:300px; padding:22px 26px 0; }
.stitle { font-size:11px; font-weight:700; color:#6D6E6F; text-transform:uppercase; letter-spacing:0.4px; margin:0 0 10px; }
.statuscard { border:1px solid #EDEBE9; border-radius:12px; padding:16px; margin-bottom:16px; }
.badge { display:inline-block; font-size:11px; font-weight:700; padding:5px 12px; border-radius:999px;
color:#4ECBC4; background:#4ECBC42E; margin-bottom:8px; }
.statuscard h4 { margin:0 0 6px; font-size:15px; font-weight:700; }
.statuscard p { margin:0; font-size:12px; color:#6D6E6F; line-height:1.5; }
.boardcol { background:#F9F8F8; border-radius:10px; padding:10px; }
.boardcol .col-h { font-size:10px; font-weight:700; color:#6D6E6F; text-transform:uppercase; margin-bottom:8px; }
.bcard { background:#fff; border:1px solid #E8E6E4; border-radius:8px; padding:9px 10px; margin-bottom:8px; }
.bcard .t { font-size:12px; font-weight:500; margin-bottom:6px; }
.fab { position:absolute; right:32px; bottom:56px; width:52px; height:52px; border-radius:50%;
background:#F06A6A; color:#fff; font-size:22px; font-weight:300; display:flex; align-items:center; justify-content:center;
box-shadow:rgba(240,106,106,0.45) 0 8px 20px; }
footer { height:30px; border-top:1px solid #EDEBE9; padding:0 32px; display:flex; align-items:center;
justify-content:space-between; font-size:11px; color:#6D6E6F; }
</style></head>
<body>
<nav>
<p class="brand">Asana (iOS)</p>
<div class="navr">
<span>Home</span><span>My Tasks</span><span>Inbox</span>
<div class="avatar">MW</div>
</div>
</nav>
<main>
<div class="listpane">
<p class="title">My Tasks</p>
<div class="viewtabs">
<span class="active">List</span><span>Board</span><span>Calendar</span><span>Timeline</span><span>Files</span>
</div>
<div class="section"><span class="caret">▾</span><span class="label">Today</span><span class="count">3</span></div>
<div class="row">
<div class="circ done"></div>
<div class="rowbody">
<div class="name strike">Ship onboarding redesign</div>
<div class="pills"><span class="pill p-plum">Design System</span></div>
</div>
<div class="rowav" style="background:#4573D2">JK</div>
</div>
<div class="row">
<div class="circ"></div>
<div class="rowbody">
<div class="name">Review Q3 roadmap doc</div>
<div class="pills"><span class="pill p-aqua">Planning</span><span class="pill p-overdue">Overdue</span></div>
</div>
<div class="rowav" style="background:#F26FD3">RS</div>
</div>
<div class="row">
<div class="circ"></div>
<div class="rowbody">
<div class="name">Sync with growth on activation metrics</div>
<div class="pills"><span class="pill p-orange">Due today</span></div>
</div>
<div class="rowav" style="background:#62D26F">TL</div>
</div>
<div class="section"><span class="caret">▾</span><span class="label">Upcoming</span><span class="count">2</span></div>
<div class="row">
<div class="circ"></div>
<div class="rowbody">
<div class="name">Draft status update for stakeholders</div>
<div class="pills"><span class="pill p-plum">Comms</span></div>
</div>
<div class="rowav" style="background:#5A3FFF">MW</div>
</div>
</div>
<div class="side">
<p class="stitle">Project Status</p>
<div class="statuscard">
<span class="badge">On Track</span>
<h4>Q3 Platform Migration</h4>
<p>Core services cut over on schedule. Two follow-up tasks remain before the freeze window closes Friday.</p>
</div>
<p class="stitle">Board Preview</p>
<div class="boardcol">
<div class="col-h">In Progress</div>
<div class="bcard"><div class="t">API rate-limit rollout</div><span class="pill p-aqua">Backend</span></div>
<div class="bcard"><div class="t">Empty-state illustrations</div><span class="pill p-orange">Design</span></div>
</div>
</div>
</main>
<div class="fab">+</div>
<footer>
<span>© Asana (iOS)</span>
<span>Asana (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfbf9; color: #3c322a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfbf9; color: #3c322a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.35; margin: 0; color: #3c322a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #605953; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 1.5px; background: #c9a557; color: #3c322a;
border: none; border-radius: 0px; padding: 14px 36px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 1.5px; background: transparent; color: #3c322a;
border: 1px solid #c9a557; border-radius: 0px;
padding: 13px 35px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #fcfbf9; color: #3c322a;
border: 1px solid #d9d9d9; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #605953; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; background: #f9f3ef; color: #605953;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fcfbf9; font-family:Georgia,'Times New Roman',serif; color:#554438; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #f2f2f2;}
.logo{font-size:22px;letter-spacing:1px;color:#3c322a;}
.navlinks{font-family:Arial,sans-serif;display:flex;gap:24px;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#605953;}
.hero{height:280px;display:flex;background:#f9f3ef;}
.htext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;}
.htext .k{font-family:Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#9d806c;margin-bottom:14px;}
.htext h1{font-size:32px;font-weight:400;color:#3c322a;margin:0 0 14px;line-height:1.25;}
.htext p{font-family:Arial,sans-serif;font-size:13.5px;line-height:1.6;color:#554438;margin:0 0 20px;max-width:300px;}
.btn{font-family:Arial,sans-serif;width:fit-content;background:#c9a557;color:#3c322a;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:13px 26px;border-radius:2px;}
.himg{width:54%;position:relative;background:#f1ede6;}
.ring{position:absolute;left:110px;top:80px;width:100px;height:100px;border-radius:50%;border:14px solid #c9a557;box-shadow:0 10px 24px rgba(201,165,87,.35);}
.ring:before{content:'';position:absolute;left:34px;top:-22px;width:22px;height:22px;transform:rotate(45deg);background:#f5e6c4;}
.seclabel{padding:20px 40px 12px;font-family:Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#9d806c;text-align:center;}
.grid{display:flex;gap:16px;padding:0 40px;justify-content:center;}
.card{width:190px;text-align:center;}
.thumb{height:110px;border-radius:4px;margin-bottom:10px;}
.pname{font-size:14px;color:#3c322a;}
.price{font-family:Arial,sans-serif;font-size:13px;color:#907360;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Satya Jewelry</div>
<div class="navlinks"><span>Rings</span><span>Necklaces</span><span>Earrings</span><span>Gifting</span></div>
</div>
<div class="hero">
<div class="htext">
<div class="k">The Gilded Line</div>
<h1>Jewelry cast for the moments that mark you.</h1>
<p>Solid gold vermeil pieces, hand-finished for a life of everyday wear.</p>
<div class="btn">Shop The Edit</div>
</div>
<div class="himg"><div class="ring"></div></div>
</div>
<div class="seclabel">The Edit</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#c9a557,#907360)"></div><div class="pname">Sunburst Signet Ring</div><div class="price">$128</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#bea58e,#46382e)"></div><div class="pname">Layered Chain Necklace</div><div class="price">$164</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#f5e6c4,#c39b44)"></div><div class="pname">Hoop Earring Trio</div><div class="price">$96</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #862983; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #862983; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c399c2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a6a3; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #862983; color: #00a6a3;
border: 1px solid #00a6a3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #862983; color: #f5f5f5;
border: 1px solid #984a95; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c399c2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #713d88; color: #00a6a3;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f8f8; color:#333333; box-sizing:border-box;
font-family:"Noto Sans", "Noto Sans TC", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-weight:700; font-size:17px; color:#0c2340; }
.navlinks { display:flex; gap:24px; font-size:15px; font-weight:600; color:#0c2340; }
.navlinks span:nth-child(2) { color:#862983; }
.join { background:#862983; color:#fff; border:none; border-radius:6px; padding:8px 18px; font-size:14px; font-weight:600; }
.hero { height:220px; background:linear-gradient(160deg,#6e28af,#ac8ffe); display:flex; flex-direction:column;
align-items:center; justify-content:center; text-align:center; gap:12px; color:#fff; position:relative; }
.hero h1 { font-size:32px; font-weight:800; margin:0; letter-spacing:0.3px; }
.hero p { font-size:14px; margin:0; opacity:0.9; }
.hero-btn { border:2px solid #fff; color:#fff; background:transparent; border-radius:9999px; padding:10px 30px; font-size:15px; font-weight:600; }
.plans { display:flex; gap:20px; padding:26px 40px; }
.plan { flex:1; background:#fff; border-radius:12px; box-shadow:rgba(99,99,99,0.2) 0px 2px 8px 0px; padding:22px; }
.plan h3 { font-size:18px; margin:0 0 4px; color:#000; }
.plan .price { font-size:24px; font-weight:800; color:#862983; margin:0 0 12px; }
.plan ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.plan li { font-size:13px; color:#333; }
.plan li::before { content:'✓ '; color:#12a3a0; font-weight:700; }
.plan .cta { margin-top:14px; width:100%; background:#862983; color:#fff; border:none; border-radius:6px; padding:10px; font-size:14px; font-weight:600; }
.plan.free .cta { background:#fff; color:#862983; border:1px solid #862983; }
</style></head>
<body>
<nav>
<div class="brand">Portaly</div>
<div class="navlinks"><span>Features</span><span>Pricing</span><span>Portaly AI</span><span>Blog</span></div>
<button class="join">Join Now</button>
</nav>
<div class="hero">
<h1>Your All-in-One Platform for Growth and Profit</h1>
<p>Join 200,000 creators worldwide to turn passion into profit</p>
<button class="hero-btn">Start for free</button>
</div>
<div class="plans">
<div class="plan free">
<h3>Free</h3>
<div class="price">$0</div>
<ul><li>Unlimited link blocks</li><li>Basic analytics</li><li>Community support</li></ul>
<button class="cta">Start for Free</button>
</div>
<div class="plan">
<h3>Premium</h3>
<div class="price">$12<span style="font-size:13px; color:#969696; font-weight:400;">/mo</span></div>
<ul><li>AI page builder</li><li>Product & lead blocks</li><li>Advanced analytics</li><li>Priority support</li></ul>
<button class="cta">Join Now</button>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a2e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a2e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #1a1a2e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #718096; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #226d7a; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #ffffff; color: #226d7a;
border: 1px solid #226d7a; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.625; background: #ffffff; color: #2d3748;
border: 1px solid #c6c6cb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #718096; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #22b8d1; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Eggtronic</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#1a1a2e; font-family:'Open Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#226d7a; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.logo { font-weight:700; font-size:19px; }
.navlinks { display:flex; gap:6px; font-size:14px; font-weight:600; }
.navlinks span { padding:8px 14px; border-radius:8px; }
.navlinks span.on { background:rgba(255,255,255,.15); }
.search { background:#e4f5fa; border:1px solid #e2e8f0; border-radius:9999px; padding:9px 18px; font-size:13px; color:#718096; width:200px; }
.promo { background:#22b8d1; color:#fff; text-align:center; font-size:12px; padding:8px; letter-spacing:.3px; }
.hero { display:flex; align-items:center; padding:26px 32px; gap:30px; height:180px; background:#e4f5fa; }
.hero-copy { flex:1; }
.hero-copy h1 { font-size:28px; font-weight:700; margin:0 0 10px; }
.hero-copy p { font-size:14px; color:#2d3748; margin:0 0 16px; max-width:340px; }
.btn { display:inline-block; background:#226d7a; color:#fff; border-radius:9999px; padding:12px 26px; font-size:15px; font-weight:600; }
.hero-art { flex:1; height:150px; border-radius:12px; position:relative; overflow:hidden;
background:linear-gradient(150deg,#b0e0e9,#22b8d1 60%,#226d7a); }
.hero-art .plug { position:absolute; width:70px; height:70px; border-radius:50%; background:#ffffff; top:36px; left:40px; box-shadow:0 8px 22px rgba(0,0,0,.2); }
.hero-art .cable { position:absolute; width:120px; height:8px; background:#1a1a2e; border-radius:4px; top:66px; left:100px; }
.chips { display:flex; gap:10px; padding:16px 32px; }
.chips span { background:#e4f5fa; color:#226d7a; border-radius:9999px; padding:6px 16px; font-size:13px; font-weight:600; }
.chips span.on { background:#226d7a; color:#fff; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:0 32px; }
.card { background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.08); padding:14px; }
.thumb { height:80px; border-radius:8px; margin-bottom:8px; position:relative; }
.t1 { background:linear-gradient(160deg,#b0e0e9,#226d7a); }
.t2 { background:linear-gradient(160deg,#e4f5fa,#22b8d1); }
.t3 { background:linear-gradient(160deg,#cbeef5,#1e6d7a); }
.t4 { background:linear-gradient(160deg,#d8f2f7,#226d7a); }
.badge { position:absolute; top:6px; left:6px; background:#22b8d1; color:#fff; font-size:10px; font-weight:700;
text-transform:uppercase; border-radius:9999px; padding:2px 8px; }
.name { font-size:13px; font-weight:600; margin:0 0 4px; }
.price { font-size:14px; font-weight:600; color:#226d7a; }
</style></head>
<body>
<div class="promo">Free 2-day shipping on all chargers over $30</div>
<nav>
<div class="logo">Eggtronic</div>
<div class="navlinks"><span class="on">Chargers</span><span>Cables</span><span>Wireless</span><span>Support</span></div>
<div class="search">Search accessories</div>
</nav>
<div class="hero">
<div class="hero-copy">
<h1>Power that keeps up with you</h1>
<p>Fast wireless chargers and rugged cables engineered for everyday life.</p>
<div class="btn">Shop Chargers</div>
</div>
<div class="hero-art"><div class="plug"></div><div class="cable"></div></div>
</div>
<div class="chips"><span class="on">All</span><span>New</span><span>Wireless</span><span>USB-C</span></div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="badge">New</span></div><p class="name">Ultra Fast 65W GaN</p><p class="price">$39.99</p></div>
<div class="card"><div class="thumb t2"></div><p class="name">Wireless Charge Pad</p><p class="price">$29.99</p></div>
<div class="card"><div class="thumb t3"></div><p class="name">Braided USB-C Cable</p><p class="price">$14.99</p></div>
<div class="card"><div class="thumb t4"></div><p class="name">Car Fast Charger</p><p class="price">$19.99</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f1f0eb; color: #2c2a41;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f1f0eb; color: #2c2a41;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #2c2a41; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #777575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #007aaf; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f1f0eb; color: #2c2a41;
border: 1px solid #007aaf; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f1f0eb; color: #3c3c3c;
border: 1px solid #c0bec0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #134791; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#f1f0eb; color:#2c2a41; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;background:#f1f0eb;display:flex;align-items:center;justify-content:space-between;padding:0 26px;}
.nav .logo{font-weight:700;font-size:16px;}
.nav .links{display:flex;gap:18px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.2px;color:#2c2a41;}
.nav .links span:first-child{color:#007aaf;border-bottom:2px solid #007aaf;padding-bottom:4px;}
.wrap{display:flex;height:580px;}
.left{width:400px;background:linear-gradient(160deg,#b7d9f0,#9ebadc);display:flex;align-items:center;justify-content:center;position:relative;padding:24px;}
.pack{width:190px;height:230px;border-radius:20px;background:linear-gradient(160deg,#e18133,#ec8816);box-shadow:0 14px 26px rgba(44,42,65,.15);position:relative;}
.pack::before{content:'';position:absolute;top:20px;left:20px;right:20px;bottom:20px;border:2px dashed rgba(255,255,255,.5);border-radius:12px;}
.badge-good{position:absolute;top:22px;left:22px;background:#134791;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.right{flex:1;padding:28px 32px;display:flex;flex-direction:column;}
h1{font-size:24px;font-weight:600;margin:0 0 6px;}
.sub{color:#3c3c3c;font-size:14px;margin:0 0 12px;}
.stars{color:#ec8816;font-size:14px;margin-bottom:12px;}
.price{font-size:20px;font-weight:600;margin:0 0 16px;}
.chips{display:flex;gap:8px;margin-bottom:18px;}
.chip{background:#007aaf;color:#fff;font-size:14px;border-radius:9999px;padding:8px 20px;}
.chip.outline{background:transparent;color:#007aaf;border:1px solid #007aaf;}
.desc{font-size:14px;color:#3c3c3c;line-height:1.5;margin:0 0 18px;}
.actions{display:flex;gap:10px;margin-top:auto;}
.btn-primary{background:#007aaf;color:#fff;font-size:16px;font-weight:600;border-radius:8px;padding:12px 24px;height:48px;display:flex;align-items:center;}
.btn-secondary{background:#f1f0eb;color:#2c2a41;font-size:16px;font-weight:600;border-radius:8px;padding:12px 24px;height:48px;border:2px solid #2c2a41;display:flex;align-items:center;}
</style>
</head>
<body>
<div class="nav"><div class="logo">Cotopaxi</div><div class="links"><span>Backpacks</span><span>Apparel</span><span>Gear For Good</span><span>Sale</span></div></div>
<div class="wrap">
<div class="left"><div class="badge-good">Gear For Good</div><div class="pack"></div></div>
<div class="right">
<h1>Allpa 35L Travel Pack</h1>
<p class="sub">Del Dia Colorway · One-of-a-kind panels</p>
<div class="stars">★★★★☆ 4.6 (1,204 reviews)</div>
<p class="price">$210.00</p>
<div class="chips">
<span class="chip">Available</span>
<span class="chip outline">Compare Sizes</span>
</div>
<p class="desc">Every Del Dia bag is one-of-a-kind, cut from repurposed remnant fabric so no two panels are ever quite alike. Built for the overhead bin and the overnight bus alike.</p>
<div class="actions">
<div class="btn-primary">Shop Now</div>
<div class="btn-secondary">View Details</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #202223;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #202223;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #202223; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.33; letter-spacing: 0.3px; background: #d80027; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.33; letter-spacing: 0.3px; background: #ffffff; color: #202223;
border: 1px solid #d80027; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #202223;
border: 1px solid #c3c4c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 800; line-height: 1.2; letter-spacing: 1px; background: #f4d7dd; color: #d80027;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9fafb; color:#202223; box-sizing:border-box;
font-family:'Nunito Sans', Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
.strip { background:#d80027; color:#fff; height:32px; display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:400; letter-spacing:0; }
nav { background:#202223; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.logo { color:#fff; font-size:17px; font-weight:700; }
.navlinks { display:flex; gap:20px; color:#fff; font-size:13px; font-weight:600; }
.navlinks span:hover, .navlinks span:first-child { border-bottom:2px solid #d80027; padding-bottom:4px; }
.icons { display:flex; gap:14px; color:#fff; font-size:14px; }
main { display:flex; gap:28px; padding:20px 32px 0; height:452px; }
.shot { width:300px; background:#eeeeee; border-radius:8px; position:relative; overflow:hidden; }
.shot .grid { position:absolute; inset:14px; display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.shot .grid div { border-radius:4px; }
.shot .grid div:nth-child(4n+1) { background:#ddc7ab; }
.shot .grid div:nth-child(4n+2) { background:#108474; }
.shot .grid div:nth-child(4n+3) { background:#f9fafb; border:1px solid #e5e5e5; }
.shot .grid div:nth-child(4n) { background:#d80027; }
.badge-live { position:absolute; top:10px; left:10px; background:#d80027; color:#fff; font-size:10px;
font-weight:800; letter-spacing:1px; text-transform:uppercase; border-radius:4px; padding:4px 8px; z-index:2; }
.flagrow { position:absolute; bottom:10px; left:10px; right:10px; display:flex; gap:6px; z-index:2; }
.flag { width:24px; height:16px; border-radius:4px; border:1px solid #eeeeee; }
.flag.a { background:#d80027; } .flag.b { background:#3d4246; } .flag.c { background:#ddc7ab; } .flag.d { background:#108474; }
.info { flex:1; display:flex; flex-direction:column; min-width:0; }
.name { font-size:24px; font-weight:700; letter-spacing:-0.2px; line-height:1.25; margin:0 0 6px; }
.sku { font-family:monospace; font-size:12px; color:#7b7b7b; margin-bottom:10px; }
.timer { display:flex; gap:10px; background:#202223; border-radius:8px; padding:12px 16px; margin-bottom:14px; }
.timer .unit { text-align:center; flex:1; }
.timer .num { font-size:22px; font-weight:700; color:#fff; border-bottom:2px solid #d80027; padding-bottom:2px; }
.timer .lbl { font-size:10px; color:#fff; text-transform:uppercase; letter-spacing:1px; margin-top:4px; opacity:0.7; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.price { font-size:20px; font-weight:700; }
table.spec { width:100%; border-collapse:collapse; margin-bottom:14px; }
table.spec tr { border-bottom:1px solid #eeeeee; height:32px; }
table.spec td { font-size:13px; }
table.spec td:first-child { font-weight:700; width:44%; }
table.spec td:last-child { font-family:monospace; text-align:right; color:#3d4246; }
.chiprow { display:flex; gap:8px; margin-bottom:16px; }
.chip { background:#eeeeee; color:#3d4246; font-size:12px; font-weight:600; letter-spacing:0.5px;
text-transform:uppercase; border-radius:4px; padding:6px 12px; }
.chip.active { background:#108474; color:#fff; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#d80027; color:#fff; border:none; border-radius:8px; height:44px;
font-size:15px; font-weight:700; letter-spacing:0.3px; }
.btn-teal { width:150px; background:#108474; color:#fff; border:none; border-radius:8px; height:44px;
font-size:15px; font-weight:700; letter-spacing:0.3px; }
footer { background:#202223; color:#7b7b7b; padding:14px 32px; display:flex; justify-content:space-between;
align-items:center; font-size:12px; }
footer .fl span { margin-left:20px; color:#fff; }
</style></head>
<body>
<div class="strip">Group buy closes in 3 days — no restocks after LIVE ends</div>
<nav>
<div class="logo">Cannonkeys</div>
<div class="navlinks"><span>Group Buys</span><span>In Stock</span><span>Switches</span><span>Keycaps</span></div>
<div class="icons">⌕ ⬭ 🛒</div>
</nav>
<main>
<div class="shot">
<span class="badge-live">Live</span>
<div class="grid">
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
</div>
<div class="flagrow"><span class="flag a"></span><span class="flag b"></span><span class="flag c"></span><span class="flag d"></span></div>
</div>
<div class="info">
<h1 class="name">Cavalier65 Keyboard Kit</h1>
<div class="sku">SKU CK-CAV65-2026 · Hotswap PCB</div>
<div class="timer">
<div class="unit"><div class="num">03</div><div class="lbl">Days</div></div>
<div class="unit"><div class="num">14</div><div class="lbl">Hours</div></div>
<div class="unit"><div class="num">52</div><div class="lbl">Mins</div></div>
<div class="unit"><div class="num">09</div><div class="lbl">Secs</div></div>
</div>
<div class="price-row"><span class="price">$249.00</span></div>
<table class="spec">
<tr><td>Layout</td><td>65% ANSI / ISO / JIS</td></tr>
<tr><td>Mount Style</td><td>Gasket, top-mount</td></tr>
<tr><td>Switch Support</td><td>Hotswap 3/5-pin</td></tr>
</table>
<div class="chiprow">
<span class="chip active">Hotswap</span>
<span class="chip">Solder</span>
<span class="chip">In Stock: No</span>
</div>
<div class="cta-row">
<button class="btn-primary">Join Group Buy</button>
<button class="btn-teal">Notify Me</button>
</div>
</div>
</main>
<footer>
<span>© Cannonkeys</span>
<div class="fl"><span>Group Buy Rules</span><span>Order Status</span><span>Discord</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007cc3; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #007cc3;
border: 1px solid #007cc3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00141f; color: #007cc3;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#000; padding:26px 18px; position:relative; border-right:1px solid #2A2E33; }
.eyebrow { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#2A9FD6; }
.actname { font-size:22px; font-weight:700; margin:2px 0 2px; }
.actmeta { font-size:12px; color:#A6ACB3; margin-bottom:14px; }
.mapbox { height:150px; border-radius:12px; background:linear-gradient(135deg,#1A2329,#0C1216);
position:relative; overflow:hidden; margin-bottom:14px; border:1px solid #2A2E33; }
.route { position:absolute; top:20%; left:10%; width:80%; height:60%;
border:2px solid #007CC3; border-top:none; border-right:none; border-radius:0 0 0 60px;
filter:drop-shadow(0 0 4px rgba(0,124,195,0.6)); }
.startdot { position:absolute; left:8%; top:18%; width:8px; height:8px; border-radius:50%; background:#4CAF50; border:2px solid #fff; }
.enddot { position:absolute; right:8%; bottom:18%; width:8px; height:8px; border-radius:50%; background:#E5402A; border:2px solid #fff; }
.statgrid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid #2A2E33; border-radius:12px; overflow:hidden; margin-bottom:14px; }
.cell { background:#121417; padding:10px 8px; border-right:1px solid #2A2E33; border-bottom:1px solid #2A2E33; }
.cell:nth-child(3n) { border-right:none; }
.cell .lbl { font-size:9px; font-weight:700; text-transform:uppercase; color:#A6ACB3; letter-spacing:0.4px; }
.cell .val { font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:2px; }
.cell .unit { font-size:9px; color:#6B7178; }
.tscard { background:#121417; border:1px solid #2A2E33; border-radius:12px; padding:12px; display:flex; align-items:center; gap:12px; }
.ring { width:52px; height:52px; border-radius:50%; background:conic-gradient(#007CC3 0 75%, #23272C 75% 100%);
display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ring::before { content:''; position:absolute; }
.ring span { width:38px; height:38px; border-radius:50%; background:#121417; display:flex; align-items:center; justify-content:center; font-size:9px; color:#A6ACB3; }
.tsinfo .status { color:#2A9FD6; font-weight:700; font-size:14px; }
.tsinfo .sub { font-size:11px; color:#A6ACB3; margin-top:2px; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:56px; background:rgba(18,20,23,0.96);
border-top:1px solid #2A2E33; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:#6B7178; text-align:center; }
.tab.on { color:#2A9FD6; }
.tab .dot { display:block; width:6px; height:6px; border-radius:50%; margin:0 auto 3px; background:currentColor; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:900; letter-spacing:-0.6px; margin:0; }
.brand span { color:#2A9FD6; }
.tag { font-size:14px; color:#A6ACB3; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:8px; border:1px solid #2A2E33; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#A6ACB3; text-align:center; }
.typeblock .t1 { font-size:26px; font-weight:700; letter-spacing:-0.4px; font-variant-numeric:tabular-nums; }
.typeblock .t2 { font-size:13px; color:#A6ACB3; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:6px;
background:#121417; border:1px solid #2A2E33; color:#A6ACB3; }
.footer { margin-top:auto; border-top:1px solid #2A2E33; padding-top:16px; font-size:11px; color:#6B7178; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="eyebrow">RUNNING</div>
<div class="actname">Morning Run</div>
<div class="actmeta">Today at 6:42 AM · Cedar Loop Trail</div>
<div class="mapbox"><div class="route"></div><div class="startdot"></div><div class="enddot"></div></div>
<div class="statgrid">
<div class="cell"><div class="lbl">Distance</div><div class="val">8.42<span class="unit"> km</span></div></div>
<div class="cell"><div class="lbl">Time</div><div class="val">42:18</div></div>
<div class="cell"><div class="lbl">Avg Pace</div><div class="val">5:02<span class="unit"> /km</span></div></div>
<div class="cell"><div class="lbl">Avg HR</div><div class="val">156<span class="unit"> bpm</span></div></div>
<div class="cell"><div class="lbl">Calories</div><div class="val">612<span class="unit"> C</span></div></div>
<div class="cell"><div class="lbl">Elev Gain</div><div class="val">124<span class="unit"> m</span></div></div>
</div>
<div class="tscard">
<div class="ring"><span>52</span></div>
<div class="tsinfo"><div class="status">Productive</div><div class="sub">VO₂ Max 52 · Load 388</div></div>
</div>
<div class="tabbar">
<div class="tab on"><span class="dot"></span>My Day</div>
<div class="tab"><span class="dot"></span>Challenges</div>
<div class="tab"><span class="dot"></span>Calendar</div>
<div class="tab"><span class="dot"></span>More</div>
</div>
</div>
<div class="info">
<div>
<h1 class="brand">Garmin Connect (iOS)<span>.</span></h1>
<p class="tag">A true-black data cockpit — Roboto Condensed numerals, hairline mortar, and one Garmin Blue against total dark.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#000000"></div><small>#000000</small></div>
<div class="sw"><div class="chip2" style="background:#007CC3"></div><small>#007CC3</small></div>
<div class="sw"><div class="chip2" style="background:#2EA8E0"></div><small>#2EA8E0</small></div>
<div class="sw"><div class="chip2" style="background:#00A8A8"></div><small>#00A8A8</small></div>
<div class="sw"><div class="chip2" style="background:#E5402A"></div><small>#E5402A</small></div>
</div>
<div class="typeblock">
<div class="t1">8.42 km</div>
<div class="t2">Roboto Condensed · tabular · the value is the hero, the label is a whisper</div>
</div>
<div class="taglist">
<span>Stat grid 3-up</span><span>GPS route glow</span><span>Body Battery</span>
<span>HR zone bars</span><span>No tab-bar tint pill</span>
</div>
<div class="footer">True black #000000 · surface steps not shadows · fixed HR-zone semantics</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #181818;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #181818;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #181818; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #c91036; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #c91036;
border: 1px solid #c91036; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #181818;
border: 1px solid #c5c5c5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #181818; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'Liberation Sans','Segoe UI',Arial,sans-serif; color:#374151; }
*{box-sizing:border-box;}
.promo{height:32px;background:#c91036;color:#fff;font-size:12px;font-weight:600;letter-spacing:.3px;display:flex;align-items:center;justify-content:center;text-transform:uppercase;}
.nav{height:56px;background:#181818;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:18px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:18px;font-size:14px;font-weight:500;color:#fff;}
.hero{height:200px;background:#181818;display:flex;align-items:center;padding:0 32px;position:relative;}
.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,0,0,.6),transparent);}
.heroInner{position:relative;z-index:1;}
.h1{font-size:32px;font-weight:700;color:#fff;margin:0 0 14px;max-width:440px;}
.cta{display:inline-block;background:#c91036;color:#fff;font-size:15px;font-weight:600;letter-spacing:.2px;padding:10px 22px;border-radius:4px;}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:200px;border:1px solid #dbdbdb;border-radius:4px;padding:16px;}
.thumb{height:100px;background:#f8f8f8;margin-bottom:10px;}
.compliance{display:flex;gap:4px;margin-bottom:8px;}
.tag{background:#181818;color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 6px;border-radius:2px;}
.tag.ansi{background:#c91036;}
.ptitle{font-size:16px;font-weight:600;color:#181818;}
.pmeta{font-size:12px;color:#bbbbbb;margin:4px 0;}
.pprice{font-size:20px;font-weight:700;color:#181818;}
.instock{display:inline-block;margin-top:6px;background:#22c55e;color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 6px;border-radius:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#181818;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#d0d0d0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="promo">Free Shipping on Orders Over $99</div>
<div class="nav">
<div class="logo">Mcr Safety</div>
<div class="navlinks"><span>Gloves</span><span>Eyewear</span><span>Sleeves</span><span>Hearing Protection</span></div>
</div>
<div class="hero">
<div class="heroInner">
<div class="h1">We Protect People.</div>
<div class="cta">Shop Compliance Gear</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="compliance"><div class="tag ansi">ANSI A4</div><div class="tag">EN 388</div></div><div class="ptitle">Cut-Resistant Work Gloves</div><div class="pmeta">SKU CT-4088</div><div class="pprice">$12.99</div><div class="instock">In Stock</div></div>
<div class="card"><div class="thumb"></div><div class="compliance"><div class="tag">OSHA</div><div class="tag ansi">Z87.1</div></div><div class="ptitle">Anti-Fog Safety Glasses</div><div class="pmeta">SKU SG-2210</div><div class="pprice">$8.49</div><div class="instock">In Stock</div></div>
<div class="card"><div class="thumb"></div><div class="compliance"><div class="tag">NRR 29</div></div><div class="ptitle">Hearing Protection Earmuffs</div><div class="pmeta">SKU HP-9012</div><div class="pprice">$19.99</div><div class="instock">In Stock</div></div>
</div>
<div class="footer"><span>© MCR Safety Compliance Gear</span><span>Bulk Orders · Compliance Docs</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #feffff; color: #0f0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #feffff; color: #0f0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -0.2px; margin: 0; color: #0f0a0a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #55595c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #e11b22; color: #feffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #feffff; color: #0d1e63;
border: 1px solid #0d1e63; border-radius: 4px;
padding: 10px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #feffff; color: #0f0a0a;
border: 1px solid #a6b0b4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #55595c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #e11b22; color: #feffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#feffff; color:#0f0a0a; box-sizing:border-box;
font-family:'D-DIN Exp','D-DIN',sans-serif; }
* { box-sizing:border-box; }
.announce { height:36px; background:#32373c; color:#fff; font-size:12px; display:flex; align-items:center;
justify-content:center; letter-spacing:0.3px; }
nav { height:64px; background:#0d1e63; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { color:#fff; font-family:'D-DIN Condensed',sans-serif; font-size:22px; font-weight:700; text-transform:uppercase; }
.navlinks { display:flex; gap:20px; }
.navlinks span { color:#fff; font-family:'D-DIN',sans-serif; font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; }
.navlinks span.active { border-bottom:2px solid #e11b22; padding-bottom:20px; }
.hero { background:#0d1e63; min-height:200px; display:flex; align-items:center; padding:0 32px; gap:28px; }
.heroText { flex:1; }
.headline { color:#fff; font-family:'D-DIN Condensed',sans-serif; font-size:52px; font-weight:700; text-transform:uppercase;
letter-spacing:-0.5px; line-height:1.05; margin-bottom:12px; }
.heroBtn { display:inline-block; background:#e11b22; color:#fff; padding:12px 28px; font-family:'D-DIN',sans-serif;
font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; border-radius:4px; }
.heroImg { flex:1; height:150px; border-radius:8px; background:conic-gradient(from 180deg,#e11b22,#ffdd00,#75c32c,#ff6900,#f78da7,#e11b22); }
.tabs { display:flex; gap:8px; padding:16px 32px 0; }
.tab { background:#ebf1ff; color:#0d1e63; font-family:'D-DIN',sans-serif; font-size:13px; font-weight:700;
text-transform:uppercase; padding:8px 16px; border-radius:4px; }
.tab.active { background:#e11b22; color:#fff; }
.section { padding:16px 32px 0; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { background:#fff; border:1px solid #a6b0b4; border-radius:8px; padding:12px; }
.photo { aspect-ratio:1/1; border-radius:4px; margin-bottom:10px; position:relative; }
.c1 { background:linear-gradient(150deg,#ffdd00,#ff6900); }
.c2 { background:linear-gradient(150deg,#75c32c,#3d7a10); }
.c3 { background:linear-gradient(150deg,#f78da7,#e11b22); }
.c4 { background:linear-gradient(150deg,#0d1e63,#003388); }
.sale { position:absolute; top:6px; left:6px; background:#e11b22; color:#fff; font-family:'D-DIN Condensed',sans-serif;
font-size:11px; font-weight:700; text-transform:uppercase; padding:4px 8px; border-radius:4px; }
.age { position:absolute; top:6px; right:6px; width:32px; height:32px; background:#0d1e63; color:#fff;
font-family:'D-DIN Condensed',sans-serif; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; border-radius:4px; }
.name { font-family:'D-DIN',sans-serif; font-size:16px; font-weight:700; }
.players { display:inline-block; background:#ebf1ff; color:#0d1e63; font-family:'D-DIN Condensed',sans-serif; font-size:11px;
font-weight:700; text-transform:uppercase; padding:3px 10px; border-radius:9999px; margin-top:4px; }
.price { font-family:'D-DIN',sans-serif; font-size:20px; font-weight:700; margin-top:4px; }
</style></head>
<body>
<div class="announce">New Party Games Arriving Weekly</div>
<nav>
<div class="brand">Goliath Games</div>
<div class="navlinks"><span class="active">Board Games</span><span>Party Games</span><span>Kids</span><span>Puzzles</span></div>
</nav>
<div class="hero">
<div class="heroText">
<div class="headline">Game Night, Solved.</div>
<div class="heroBtn">Shop Best Sellers</div>
</div>
<div class="heroImg"></div>
</div>
<div class="tabs">
<div class="tab active">All Ages</div>
<div class="tab">Family</div>
<div class="tab">Adult Party</div>
<div class="tab">Toddler</div>
</div>
<div class="section">
<div class="grid">
<div class="card"><div class="photo c1"><div class="sale">Sale</div><div class="age">8+</div></div><div class="name">Cranium Wow</div><div class="players">2-6 Players</div><div class="price">$29.99</div></div>
<div class="card"><div class="photo c2"><div class="age">12+</div></div><div class="name">Rubik's Race</div><div class="players">2 Players</div><div class="price">$19.99</div></div>
<div class="card"><div class="photo c3"><div class="age">17+</div></div><div class="name">Wits & Wagers</div><div class="players">3-7 Players</div><div class="price">$24.99</div></div>
<div class="card"><div class="photo c4"><div class="age">4+</div></div><div class="name">Tumblin' Dice</div><div class="players">2-4 Players</div><div class="price">$21.99</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #818182; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ff9a52; color: #000000;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #0a0a0a;
border: 1px solid #ff9a52; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #0a0a0a;
border: 1px solid #c2c2c2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #818182; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff9a52; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#0a0a0a; font-family:Arial,'Helvetica Neue',Roboto,sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #dae0e5;}
.logo{font-size:16px;font-weight:700;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;}
.navlinks .active{color:#ff9a52;border-bottom:2px solid #ff9a52;padding-bottom:16px;}
.hero{background:#f8f9fa;padding:30px;display:flex;gap:24px;}
.tiles{display:flex;gap:12px;flex:1;}
.tile{flex:1;background:#fff;border:1px solid #dae0e5;border-radius:8px;padding:16px;text-align:center;}
.tile .swatch{width:100%;height:60px;border-radius:6px;margin-bottom:8px;}
.tile .name{font-size:13px;font-weight:600;}
.grid{display:flex;gap:14px;padding:16px 30px;}
.card{width:200px;border:1px solid #e9ecef;border-radius:8px;padding:12px;}
.thumb{height:90px;border-radius:4px;margin-bottom:10px;}
.ptitle{font-size:14px;font-weight:600;}
.pprice{font-size:15px;font-weight:600;color:#ff9a52;margin-top:4px;}
.cta{display:inline-block;background:#ff9a52;color:#fff;font-size:13px;font-weight:600;letter-spacing:.5px;padding:9px 18px;border-radius:4px;margin-top:8px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#0a0a0a;color:#acaaa6;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Piel Frama</div>
<div class="navlinks"><div class="active">Cowhide</div><div>Nappa</div><div>Vintage</div><div>Accessories</div></div>
</div>
<div class="hero">
<div class="tiles">
<div class="tile"><div class="swatch" style="background:#85502b"></div><div class="name">Cowhide</div></div>
<div class="tile"><div class="swatch" style="background:#0a0a0a"></div><div class="name">Nappa</div></div>
<div class="tile"><div class="swatch" style="background:#acaaa6"></div><div class="name">Vintage</div></div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#85502b,#0a0a0a)"></div><div class="ptitle">iPhone Vintage Case</div><div class="pprice">$59.00</div><div class="cta">Add to Cart</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0a0a0a,#ff9a52)"></div><div class="ptitle">Cowhide Card Wallet</div><div class="pprice">$45.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#acaaa6,#85502b)"></div><div class="ptitle">Nappa Folio Case</div><div class="pprice">$69.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff9a52,#0a0a0a)"></div><div class="ptitle">iPad Leather Sleeve</div><div class="pprice">$79.00</div></div>
</div>
<div class="footer"><span>© Piel Frama · Handcrafted in Spain since 1996</span><span>Workshop · Shipping</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefcf8; color: #4a4e54;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefcf8; color: #4a4e54;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #4a4e54; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #71706f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; letter-spacing: 0.5px; background: #334e80; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; letter-spacing: 0.5px; background: #fefcf8; color: #334e80;
border: 1px solid #334e80; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.625; background: #fefcf8; color: #4a4e54;
border: 1px solid #d1d0cf; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #71706f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.45; letter-spacing: 0.8px; background: #da0039; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fefcf8; font-family:'Effra','Helvetica Neue',sans-serif; color:#4b4a49; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #eae9e8;}
.logo{font-family:'GT Sectra Fine',Georgia,serif;font-size:22px;color:#4a4e54;}
.navlinks{display:flex;gap:22px;font-size:14px;}
.btnav{background:#334e80;color:#fff;font-size:14px;font-weight:500;padding:9px 20px;border-radius:4px;}
.hero{height:210px;background:#fcf6ea;display:flex;align-items:center;padding:0 34px;}
.h1{font-family:'GT Sectra Fine',Georgia,serif;font-size:38px;line-height:1.15;margin:0 0 12px;width:400px;}
.sub{font-size:14px;margin:0 0 18px;width:340px;}
.btn{display:inline-block;background:#334e80;color:#fff;font-size:15px;font-weight:500;letter-spacing:0.5px;padding:14px 30px;border-radius:4px;}
.ring{position:absolute;right:80px;top:60px;width:110px;height:110px;border-radius:50%;border:24px solid #e7d698;box-shadow:0 0 0 4px #fcf6ea, 0 0 30px rgba(51,78,128,0.2);}
.steps{display:flex;gap:0;padding:16px 34px 0;justify-content:center;}
.step{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#71706f;padding:0 20px;border-bottom:2px solid #c8c8c8;padding-bottom:8px;}
.step.on{color:#334e80;border-color:#334e80;}
.section{padding:16px 34px 0;}
.grid{display:flex;gap:16px;justify-content:center;}
.card{width:150px;border:1px solid #eae9e8;border-radius:4px;padding:10px;}
.thumb{height:96px;border-radius:2px;margin-bottom:8px;}
.pname{font-size:15px;font-weight:500;margin-bottom:4px;color:#4a4e54;}
.pprice{font-family:'GT Sectra Fine',Georgia,serif;font-size:18px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#4a4e54;color:#dfdfde;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Taylor And Hart</div>
<div class="navlinks"><div>Engagement</div><div>Wedding Bands</div><div>Diamonds</div></div>
<div class="btnav">Start Designing</div>
</div>
<div class="hero">
<div>
<div class="h1">Your ring, bespoke from the first sketch.</div>
<div class="sub">Choose the metal, the stone, the setting — built for you alone.</div>
<div class="btn">Start Designing</div>
</div>
<div class="ring"></div>
</div>
<div class="steps"><div class="step on">Silhouette</div><div class="step">Metal</div><div class="step">Stone</div><div class="step">Engraving</div></div>
<div class="section">
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#e7d698,#334e80);"></div><div class="pname">The Aveline Solitaire</div><div class="pprice">From $2,400</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#d7e0db,#1b3a2e);"></div><div class="pname">The Marisol Halo</div><div class="pprice">From $3,100</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#e5c7c6,#703952);"></div><div class="pname">The Odette Pavé Band</div><div class="pprice">From $1,850</div></div>
</div>
</div>
<div class="footer"><span>© Bespoke Engagement Rings</span><span>Book A Consultation</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #001339; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #001339; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878fa0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #222222; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #001339; color: #ffffff;
border: 1px solid #222222; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #001339; color: #f5f5f5;
border: 1px solid #273757; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878fa0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #051535; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#3e4149; box-sizing:border-box;
font-family:Roboto,"Noto Sans KR",sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { color:#fff; font-size:16px; font-weight:700; }
.navlinks { display:flex; gap:30px; color:#fff; font-size:16px; }
.hero { height:300px; background:linear-gradient(#151f32cc,#151f32cc), linear-gradient(135deg,#001339,#102245);
display:flex; flex-direction:column; }
.hero .inner { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; gap:16px; padding:0 40px; }
.hero h1 { color:#fff; font-size:38px; font-weight:700; line-height:1.4; margin:0; }
.hero .row { display:flex; gap:14px; }
.pill-dark { background:#222222; color:#fff; border-radius:50px; padding:14px 28px; font-size:16px; font-weight:700; }
.pill-white { background:#fff; color:#3e4149; border-radius:50px; padding:14px 28px; font-size:16px; font-weight:700; }
.story { padding:32px 40px; }
.story h2 { font-size:26px; font-weight:700; color:#3e4149; margin:0 0 20px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card { background:#f5f6fb; border-radius:20px; padding:20px; }
.card .thumb { height:80px; border-radius:12px; margin-bottom:12px;
background:linear-gradient(135deg,#001339,#524fa1); }
.card h4 { font-size:14px; margin:0 0 6px; color:#222222; }
.card p { font-size:12px; color:#8f97a7; margin:0; line-height:1.5; }
.card.white { background:#fff; border:1px solid #d0d6e1; }
</style></head>
<body>
<nav>
<p class="brand">Sinsang Market (Dealicious)</p>
<div class="navlinks"><span>About</span><span>Services</span><span>People & Culture</span><span>Newsroom</span></div>
</nav>
<section class="hero">
<div class="inner">
<h1>Making our customers'<br>business easy and enjoyable.</h1>
<div class="row">
<button class="pill-dark">Careers →</button>
<button class="pill-white">Read the blog →</button>
</div>
</div>
</section>
<section class="story">
<h2>Our story</h2>
<div class="grid">
<div class="card"><div class="thumb"></div><h4>Freedom and structure coexist here</h4><p>Interviews from the people building the platform, in their own words.</p></div>
<div class="card white"><div class="thumb"></div><h4>Chronicles of the dev team</h4><p>How search, checkout, and settlement got rebuilt without downtime.</p></div>
<div class="card"><div class="thumb"></div><h4>Category leadership, No.1</h4><p>Korea's largest K-fashion wholesale trading platform, by the numbers.</p></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #1f2021;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #1f2021;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #1f2021; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #5a5d60; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #025776; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #f6f6f6; color: #1f2021;
border: 1px solid #025776; border-radius: 8px;
padding: 9px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f6f6f6; color: #3d3f41;
border: 1px solid #c0c0c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a5d60; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #025776; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f6f6; font-family:'Fabriga','Fabrica Regular',Arial,sans-serif; color:#3d3f41; }
*{box-sizing:border-box;}
.nav{height:60px;background:#1f2021;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-size:19px;font-weight:700;color:#fff;letter-spacing:.2px;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#cfd2d3;}
.navlinks span:first-child{color:#69ced7;}
.navcta{background:#025776;color:#fff;font-size:12px;font-weight:600;letter-spacing:.3px;padding:9px 16px;border-radius:8px;}
.hero{height:236px;display:flex;background:#fff;border-bottom:1px solid #d9d9d9;}
.herotext{width:460px;padding:34px 36px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#d02e2e;margin-bottom:10px;}
.h1{font-size:30px;font-weight:700;letter-spacing:-.5px;line-height:1.25;color:#1f2021;margin:0 0 10px;}
.sub{font-size:14px;color:#5a5d60;margin:0 0 18px;max-width:340px;}
.btn{width:150px;text-align:center;background:#025776;color:#fff;font-size:13px;font-weight:600;letter-spacing:.3px;padding:11px 0;border-radius:8px;}
.heroimg{flex:1;position:relative;background:linear-gradient(155deg,#69ced7 0%,#025776 55%,#1f2021 100%);}
.heroimg .tide{position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(180deg,transparent,rgba(2,87,118,.5));}
.heroimg .badge{position:absolute;top:18px;right:18px;background:#d02e2e;color:#fff;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:5px 10px;border-radius:4px;}
.strip{display:flex;gap:1px;background:#d9d9d9;}
.cell{flex:1;background:#f2f2f2;text-align:center;padding:9px;}
.clabel{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#5a5d60;}
.cval{font-size:13px;color:#1f2021;margin-top:2px;font-weight:600;}
.sec{padding:16px 36px 0;}
.sectitle{font-size:13px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#1f2021;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:154px;background:#fff;border:1px solid #e6e6e6;border-radius:8px;padding:9px;position:relative;}
.thumb{height:96px;border-radius:6px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:600;color:#1f2021;line-height:1.3;height:30px;overflow:hidden;}
.pprice{font-size:13px;font-weight:700;color:#025776;margin-top:3px;}
.tag{position:absolute;top:7px;left:7px;background:#025776;color:#fff;font-size:9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:3px 6px;border-radius:4px;}
.tag.sale{background:#d02e2e;}
</style>
<div class="nav">
<div class="logo">Oars Alps Men S HE 2</div>
<div class="navlinks"><span>Skincare</span><span>Shave</span><span>Hair</span><span>Sets</span></div>
<div class="navcta">Shop Bestsellers</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Charted for daily performance</div>
<div class="h1">Grooming built like<br>a well-run ship.</div>
<div class="sub">Efficient formulas and gear for men who don't have time to overthink the medicine cabinet.</div>
<div class="btn">Shop The Edit</div>
</div>
<div class="heroimg"><div class="tide"></div><div class="badge">New Tide</div></div>
</div>
<div class="strip">
<div class="cell"><div class="clabel">Formulated</div><div class="cval">Fragrance-Free</div></div>
<div class="cell"><div class="clabel">Tested</div><div class="cval">Dermatologist</div></div>
<div class="cell"><div class="clabel">Rating</div><div class="cval">4.7 / 5</div></div>
<div class="cell"><div class="clabel">Ships</div><div class="cval">Free Over $35</div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><span class="tag">New</span><div class="thumb" style="background:linear-gradient(140deg,#69ced7,#025776)"></div><div class="pname">Daily Face Sunscreen</div><div class="pprice">$26.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#037ca8,#1f2021)"></div><div class="pname">Charcoal Face Wash</div><div class="pprice">$18.00</div></div>
<div class="card"><span class="tag sale">Sale</span><div class="thumb" style="background:linear-gradient(140deg,#56ad6a,#025776)"></div><div class="pname">Complete Shave Kit</div><div class="pprice">$68.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#1f2021,#69ced7)"></div><div class="pname">Thickening Shampoo</div><div class="pprice">$24.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1e1f26;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1e1f26;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #1e1f26; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.4; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: #003388; color: #ffffff;
border: none; border-radius: 4px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: #ffffff; color: #003388;
border: 1px solid #003388; border-radius: 4px;
padding: 14px 30px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1e1f26;
border: 1px solid #c7c7c9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; letter-spacing: 0.6px; background: #e2af38; color: #1e1f26;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1e1f26; box-sizing:border-box;
font-family:'Trade Gothic',Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
.promo-banner { height:32px; background:#003388; color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; font-family:'Open Sans',Arial,sans-serif; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #eeeeee; }
.brand { font-size:17px; font-weight:700; margin:0; text-transform:uppercase; color:#003388; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#1e1f26; }
.navlinks span.on { color:#003388; }
.util { font-size:12px; color:#949494; font-family:'Open Sans',Arial,sans-serif; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 104px); }
.stage { padding:24px; border-right:1px solid #eeeeee; display:flex; flex-direction:column; gap:12px; background:#f5f5f5; }
.panel { flex:1; position:relative; overflow:hidden; border-radius:4px; background:linear-gradient(180deg,#2a2a2a,#0f0f0f); }
.panel .knob { position:absolute; width:16%; height:14%; border-radius:50%; background:radial-gradient(circle at 35% 30%,#e2af38,#8a6c1e 70%); box-shadow:0 4px 8px rgba(0,0,0,0.4); }
.panel .k1 { left:20%; top:60%; } .panel .k2 { left:42%; top:60%; } .panel .k3 { left:64%; top:60%; }
.swatches { display:flex; gap:8px; }
.swatch { width:36px; height:36px; border-radius:50%; border:2px solid #eeeeee; }
.swatch.on { border:3px solid #003388; }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:13px; font-weight:400; color:#949494; font-family:'Open Sans',Arial,sans-serif; }
h1 { margin:0; font-size:22px; font-weight:700; text-transform:uppercase; }
.badge-award { background:#e2af38; color:#1e1f26; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; padding:6px 12px; border-radius:4px; display:inline-block; width:fit-content; }
.price { font-size:20px; font-weight:700; font-family:'Open Sans',Arial,sans-serif; }
.spec-table-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #f0f0f0; font-family:'Open Sans',Arial,sans-serif; }
.spec-table-row .l { font-size:13px; color:#949494; }
.spec-table-row .v { font-size:13px; font-weight:700; }
.desc { font-size:14px; color:#32373c; line-height:1.6; font-family:'Open Sans',Arial,sans-serif; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:52px; background:#003388; color:#fff; border:none; border-radius:4px; font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
.btn-gold { width:180px; height:52px; background:#e2af38; color:#1e1f26; border:none; border-radius:4px; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; }
</style></head>
<body>
<div class="promo-banner">Now booking Fall install slots — Build Your Own Range configurator open</div>
<nav>
<p class="brand">Bluestar</p>
<div class="navlinks"><span class="on">Ranges</span><span>Cooktops</span><span>Wall Ovens</span><span>Ventilation</span></div>
<div class="util">Search Find a Dealer Cart (0)</div>
</nav>
<main>
<div class="stage">
<div class="panel"><div class="knob k1"></div><div class="knob k2"></div><div class="knob k3"></div></div>
<div class="swatches">
<span class="swatch on" style="background:#003388"></span>
<span class="swatch" style="background:#e2af38"></span>
<span class="swatch" style="background:#bd3d44"></span>
<span class="swatch" style="background:#1e1f26"></span>
</div>
</div>
<div class="info">
<span class="cat">Platinum Series · 48"</span>
<h1>Platinum 48" Range, 8 Burners</h1>
<span class="badge-award">Editor's Pick</span>
<div class="price">$18,499.00</div>
<div class="spec-table-row"><span class="l">Burners</span><span class="v">8 open burners, up to 22K BTU</span></div>
<div class="spec-table-row"><span class="l">Oven Capacity</span><span class="v">4.5 cu ft convection</span></div>
<p class="desc">Available in 750+ custom colors — brushed stainless control panel with commercial-grade cast iron grates.</p>
<div class="cta-row">
<button class="btn-primary">Request a Quote</button>
<button class="btn-gold">Build Your Own</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222021;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222021;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #222021; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6d6d6d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f55a19; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #222021;
border: 1px solid #f55a19; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #4c4c4c;
border: 1px solid #c8c7c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d6d6d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e22120; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:#4c4c4c; }
*{box-sizing:border-box;}
.nav{height:64px;background:#222021;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:18px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0.5px;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;color:#fff;}
.navlinks .active{color:#f55a19;}
.hero{height:230px;background:#222021;display:flex;align-items:center;padding:0 44px;}
.herotext{width:52%;}
.herotext h1{font-size:28px;font-weight:700;color:#fff;margin:0 0 12px;letter-spacing:-0.4px;}
.herotext p{font-size:14px;color:#919090;margin:0 0 18px;max-width:300px;}
.cta{display:inline-block;background:#f55a19;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:12px 24px;border-radius:4px;}
.heroimg{width:40%;height:150px;border-radius:8px;background:linear-gradient(135deg,#f5f2ef,#f55a19);}
.section{padding:18px 44px 0;}
.seclabel{font-size:18px;font-weight:600;color:#222021;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:190px;background:#fafafa;border-radius:8px;overflow:hidden;position:relative;}
.thumb{height:90px;background:#f5f2ef;}
.badge{position:absolute;top:8px;left:8px;background:#e22120;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 6px;border-radius:2px;}
.mintbadge{position:absolute;top:8px;right:8px;background:#00eab6;color:#222021;font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 6px;border-radius:2px;}
.cardbody{padding:10px 14px 14px;}
.ptitle{font-size:16px;font-weight:600;color:#222021;}
.pprice{font-size:15px;color:#4c4c4c;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Satechi</div>
<div class="navlinks"><div class="active">Hubs</div><div>Docks</div><div>Keyboards</div><div>Mounts</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Precision hardware for a cleaner desk.</h1>
<p>Aluminum-machined docks and hubs built to match your setup, not fight it.</p>
<div class="cta">Shop USB-C Hubs</div>
</div>
<div class="heroimg"></div>
</div>
<div class="section">
<div class="seclabel">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#f55a19,#222021)"></div><div class="cardbody"><div class="ptitle">USB-C Multiport Hub</div><div class="pprice">$99.99</div></div></div>
<div class="card"><span class="mintbadge">M4 Chip</span><div class="thumb" style="background:linear-gradient(135deg,#222021,#f55a19)"></div><div class="cardbody"><div class="ptitle">Aluminum Monitor Stand</div><div class="pprice">$59.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4e34e0,#222021)"></div><div class="cardbody"><div class="ptitle">Wireless Charging Dock</div><div class="pprice">$79.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4541ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4541ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a6a4fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #333333; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4541ff; color: #ffffff;
border: 1px solid #333333; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4541ff; color: #f5f5f5;
border: 1px solid #615efd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a6a4fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #423fde; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:Pretendard, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e2e8f0; }
.brand { font-size:18px; font-weight:800; color:#111827; }
.navlinks { display:flex; gap:24px; font-size:15px; color:#222222; }
.navlinks .on { color:#4541ff; font-weight:700; }
.cta-mini { background:#4541ff; color:#fff; border-radius:5px; padding:9px 14px; font-size:13px; font-weight:700; }
main { display:grid; grid-template-columns:1fr 1fr; gap:0; padding:34px 32px; }
.left h1 { font-size:34px; font-weight:800; line-height:1.2; margin:0 0 12px; color:#111827; }
.left h1 b { color:#4541ff; }
.left p { font-size:15px; color:#64748b; line-height:1.5; margin:0 0 20px; max-width:380px; }
.btnrow { display:flex; gap:10px; }
.btn-p { background:#4541ff; color:#fff; border-radius:12px; padding:12px 24px; font-size:15px; font-weight:600; }
.btn-g { background:#fff; color:#111827; border:1px solid #e2e8f0; border-radius:8px; padding:12px 24px; font-size:15px; font-weight:600; }
.code { background:#ffffff; border-radius:12px; box-shadow:rgba(0,0,0,0.1) 0px 0px 16px 0px; padding:18px 20px;
font-family:Monaco, Menlo, Consolas, monospace; font-size:12.5px; color:#24292f; line-height:1.7; margin-top:10px; }
.code .c1 { color:#8250df; } .code .c2 { color:#0550ae; } .code .c3 { color:#953800; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 32px 24px; }
.card { background:#ffffff; border-radius:20px; box-shadow:rgba(69,65,255,0.2) 0px 0px 20px 0px; padding:20px; }
.card .dot { width:34px; height:34px; border-radius:9px; background:rgba(69,65,255,0.1); margin-bottom:10px; }
.card h3 { font-size:17px; font-weight:600; margin:0 0 6px; color:#111827; }
.card p { font-size:12.5px; color:#64748b; margin:0; line-height:1.5; }
footer { position:absolute; bottom:0; width:960px; padding:14px 32px; border-top:1px solid #e2e8f0;
display:flex; justify-content:space-between; font-size:12px; color:#828282; }
</style></head>
<body>
<nav>
<p class="brand">SOLAPI</p>
<div class="navlinks"><span class="on">Guide</span><span>SDK</span><span>API</span><span>Pricing</span></div>
<span class="cta-mini">Get Started</span>
</nav>
<main>
<div class="left">
<h1>Send the message,<br><b>keep the customer.</b></h1>
<p>Automate every step. Connect SMS, chat alerts, and RCS through a single API.</p>
<div class="btnrow"><span class="btn-p">Get Started →</span><span class="btn-g">Try the Demo</span></div>
</div>
<div class="left">
<div class="code">
<div><span class="c1">import</span> Solapi <span class="c1">from</span> <span class="c3">'solapi'</span></div>
<div> </div>
<div><span class="c2">solapi</span>.send({</div>
<div> to: <span class="c3">'01000000000'</span>,</div>
<div> text: <span class="c3">'Integrated in half a day'</span></div>
<div>})</div>
</div>
</div>
</main>
<div class="cards">
<div class="card"><div class="dot"></div><h3>SMS / Alerts</h3><p>Send texts, chat alerts, and RCS all at once.</p></div>
<div class="card"><div class="dot"></div><h3>Automated CRM</h3><p>Turn repetitive sending tasks into workflows.</p></div>
<div class="card"><div class="dot"></div><h3>AI Integration Support</h3><p>Let AI write the integration code for you.</p></div>
</div>
<footer>
<span>© SOLAPI</span>
<span>Guide · SDK · API · Pricing</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0c0d0e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0c0d0e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c8d8d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0c0d0e; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0c0d0e; color: #f5f5f5;
border: 1px solid #313233; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8d8d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #333435; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#0C0D0E; color:#FFFFFF; box-sizing:border-box; font-family:'Proza Libre',Georgia,'Times New Roman',serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; display:flex; }
.imgpane { width:520px; height:640px; background:linear-gradient(160deg,#1a2a3a,#3a5a6a 55%,#6a8a5a); position:relative; }
.backchev { position:absolute; top:16px; left:16px; font-size:20px; font-family:sans-serif; }
.detail { width:440px; padding:22px 24px; font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif; overflow:hidden; }
.ptitle { font-family:'Proza Libre',Georgia,serif; font-size:18px; font-weight:600; letter-spacing:-0.2pt; }
.authorrow { display:flex; align-items:center; gap:10px; margin-top:14px; }
.av30 { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#FF0084,#0063DC); }
.aname { font-size:13px; font-weight:600; flex:1; }
.followpill { background:#FF0084; color:#fff; font-size:13px; font-weight:700; padding:8px 18px; border-radius:999px; }
.actionbar { display:flex; gap:28px; margin-top:18px; padding-bottom:14px; border-bottom:1px solid #2A2C30; }
.abtn { text-align:center; font-size:11px; color:#B0B3B8; }
.abtn .ic { font-size:18px; display:block; }
.abtn.on .ic { color:#FF0084; }
.exiftitle { font-size:10px; font-weight:700; letter-spacing:1pt; color:#6E7176; margin-top:18px; text-transform:uppercase; }
.exifcard { background:#1A1B1D; border-radius:12px; margin-top:10px; padding:0 16px; }
.exifrow { display:flex; justify-content:space-between; padding:7px 0; border-bottom:0.5px solid #2A2C30; font-size:12px; }
.exifrow:last-child { border-bottom:none; }
.exifkey { color:#B0B3B8; }
.exifval { font-family:'IBM Plex Mono','SF Mono',monospace; font-weight:600; letter-spacing:0.3pt; }
</style>
</head>
<body>
<div class="stage">
<div class="imgpane"><div class="backchev">←</div></div>
<div class="detail">
<div style="font-size:10px;font-weight:700;letter-spacing:1pt;color:#FF0084;text-transform:uppercase;margin-bottom:8px">Flickr (iOS)</div>
<div class="ptitle">Fog Over the Reservoir, Blue Hour</div>
<div class="authorrow"><div class="av30"></div><div class="aname">Sofia Marent</div><div class="followpill">Follow</div></div>
<div class="actionbar">
<div class="abtn on"><span class="ic">★</span>Fave</div>
<div class="abtn"><span class="ic">💬</span>Comment</div>
<div class="abtn"><span class="ic">↗</span>Share</div>
<div class="abtn"><span class="ic">+</span>Add</div>
</div>
<div class="exiftitle">Camera Details</div>
<div class="exifcard">
<div class="exifrow"><span class="exifkey">Camera</span><span class="exifval">Fujifilm X-T5</span></div>
<div class="exifrow"><span class="exifkey">Lens</span><span class="exifval">XF 35mm</span></div>
<div class="exifrow"><span class="exifkey">Exposure</span><span class="exifval">1/250s</span></div>
<div class="exifrow"><span class="exifkey">Aperture</span><span class="exifval">f/2.8</span></div>
<div class="exifrow"><span class="exifkey">ISO</span><span class="exifval">100</span></div>
<div class="exifrow"><span class="exifkey">Focal length</span><span class="exifval">35mm</span></div>
<div class="exifrow"><span class="exifkey">Date taken</span><span class="exifval">2026-04-12</span></div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdf9f3; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdf9f3; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #545454; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.4px; background: #007b5f; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.4px; background: #ffffff; color: #141414;
border: 1px solid #007b5f; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #141414;
border: 1px solid #c3c0bb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #545454; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #007b5f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fdf9f3; font-family:'Domine',Georgia,serif; color:#2a2d2f; }
*{box-sizing:border-box;}
.announce{height:24px;background:#007b5f;color:#fff;font-family:'Gill Sans',sans-serif;font-size:11px;display:flex;align-items:center;justify-content:center;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #e2e2e2;}
.logo{font-family:'Domaine Display',Georgia,serif;font-size:22px;font-weight:700;color:#141414;}
.navlinks{display:flex;gap:20px;font-family:'Gill Sans',sans-serif;font-size:14px;font-weight:500;color:#141414;}
.hero{height:210px;display:flex;align-items:center;padding:0 30px;gap:24px;}
.heroimg{width:220px;height:180px;border-radius:12px;background:radial-gradient(circle at 35% 30%,#33a06f,#007b5f 70%);flex-shrink:0;position:relative;overflow:hidden;}
.heroimg:before{content:'';position:absolute;left:60px;bottom:0;width:100px;height:70px;background:#8a5a3a;border-radius:8px 8px 0 0;}
.herotext h1{font-family:'Domaine Display',Georgia,serif;font-size:34px;font-weight:700;color:#141414;margin:0 0 10px;line-height:1.1;}
.herotext p{font-family:'Gill Sans',sans-serif;font-size:14px;color:#2a2d2f;margin:0 0 16px;max-width:360px;}
.btn{display:inline-block;font-family:'Gill Sans',sans-serif;background:#007b5f;color:#fff;font-size:14px;font-weight:600;padding:14px 28px;border-radius:8px;}
.chiprow{display:flex;gap:8px;padding:14px 30px 0;}
.chip{font-family:'Gill Sans',sans-serif;background:#fdf9f3;border:1px solid #dedede;border-radius:9999px;padding:6px 14px;font-size:12px;color:#2a2d2f;}
.chip.active{background:#007b5f;color:#fff;}
.secTitle{font-family:'Domaine Display',Georgia,serif;font-size:24px;font-weight:600;color:#141414;padding:18px 30px 10px;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:200px;background:#fff;border:1px solid #e2e2e2;border-radius:12px;overflow:hidden;}
.cardimg{height:110px;background:linear-gradient(160deg,#c8e6d4,#007b5f);position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#007b5f;color:#fff;font-family:'Gill Sans',sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.cardbody{padding:10px 12px;font-family:'Gill Sans',sans-serif;}
.ctitle{font-size:16px;font-weight:600;color:#141414;margin-bottom:4px;}
.cprice{font-size:16px;font-weight:600;color:#141414;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-family:'Gill Sans',sans-serif;font-size:11px;color:#fff;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">Free shipping on orders over $75</div>
<div class="nav">
<div class="logo">Sill</div>
<div class="navlinks"><div>Plants</div><div>Pots & Planters</div><div>Care</div><div>Gifts</div></div>
</div>
<div class="hero">
<div class="heroimg"></div>
<div class="herotext">
<h1>Plants, made easy.</h1>
<p>Easy-care houseplants and planters, hand-picked and shipped straight to your door.</p>
<div class="btn">Shop Plants</div>
</div>
</div>
<div class="chiprow">
<div class="chip active">Low Light</div>
<div class="chip">Pet Friendly</div>
<div class="chip">Bright Light</div>
</div>
<div class="secTitle">Bestsellers</div>
<div class="grid">
<div class="card"><div class="cardimg"><div class="badge">Bestseller</div></div><div class="cardbody"><div class="ctitle">Snake Plant, Medium</div><div class="cprice">$45</div></div></div>
<div class="card"><div class="cardimg"></div><div class="cardbody"><div class="ctitle">Pothos in Ceramic Pot</div><div class="cprice">$52</div></div></div>
<div class="card"><div class="cardimg"></div><div class="cardbody"><div class="ctitle">Monstera Deliciosa</div><div class="cprice">$68</div></div></div>
<div class="card"><div class="cardimg"></div><div class="cardbody"><div class="ctitle">Plant Subscription Box</div><div class="cprice">$35/mo</div></div></div>
</div>
<div class="footer"><span>© Sill</span><span>Care Guides · Subscriptions</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #010202;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #010202;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #010202; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ee4b9b; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #fefefe; color: #ee4b9b;
border: 1px solid #ee4b9b; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #fefefe; color: #010202;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ffe6f7; color: #a01c3d;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#fefefe;font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#010202;}
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:20px;font-weight:600;letter-spacing:-0.3px;color:#ee4b9b;}
.navlinks{display:flex;gap:26px;font-size:13px;font-weight:500;color:#545454;}
.carticon{width:34px;height:34px;border-radius:999px;background:#ffe6f7;}
.hero{height:264px;display:flex;align-items:center;padding:0 40px;gap:36px;}
.hero-text{width:410px;}
.eyebrow{display:inline-block;font-size:10px;font-weight:700;letter-spacing:0.3px;color:#a01c3d;background:#ffe6f7;padding:5px 12px;border-radius:999px;text-transform:uppercase;margin-bottom:14px;}
.headline{font-size:32px;font-weight:600;letter-spacing:-0.5px;line-height:1.22;color:#010202;margin-bottom:12px;}
.sub{font-size:14px;color:#757575;line-height:1.5;width:370px;margin-bottom:20px;}
.cta{display:inline-block;height:48px;line-height:48px;padding:0 30px;background:#ee4b9b;color:#ffffff;border-radius:999px;font-size:14px;font-weight:600;}
.hero-visual{flex:1;height:220px;position:relative;}
.gummy1{position:absolute;left:40px;top:16px;width:120px;height:120px;border-radius:60px;background:linear-gradient(145deg,#ee4b9b,#e10098);}
.gummy2{position:absolute;left:170px;top:70px;width:90px;height:90px;border-radius:45px;background:linear-gradient(145deg,#fecf0a,#f8c1d9);}
.gummy3{position:absolute;right:50px;top:34px;width:70px;height:70px;border-radius:35px;background:#f8c1d9;}
.section{padding:22px 40px 0 40px;display:flex;justify-content:space-between;align-items:baseline;}
.section-title{font-size:22px;font-weight:600;color:#010202;}
.section-link{font-size:12px;font-weight:600;color:#e10098;}
.grid{display:flex;gap:24px;padding:14px 40px 0 40px;}
.card{width:204px;background:#ffffff;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;}
.swatch{height:100px;position:relative;}
.badge{position:absolute;left:8px;top:8px;background:#ee4b9b;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.3px;padding:3px 8px;border-radius:999px;text-transform:uppercase;}
.card-body{padding:11px 13px 14px 13px;}
.card-cat{font-size:10px;font-weight:500;color:#9ca3af;letter-spacing:0.2px;margin-bottom:3px;text-transform:uppercase;}
.card-title{font-size:14px;font-weight:600;color:#010202;margin-bottom:6px;}
.card-price{font-size:14px;font-weight:600;color:#010202;}
.stars{color:#fecf0a;font-size:11px;}
</style>
<div class="nav">
<div class="logo">Hum Nutrition</div>
<div class="navlinks"><span>Vitamins</span><span>Bestsellers</span><span>Take the Quiz</span><span>Reviews</span></div>
<div class="carticon"></div>
</div>
<div class="hero">
<div class="hero-text">
<div class="eyebrow">Clinically Tested · Vegan</div>
<div class="headline">Wellness that doesn't<br/>need to be beige.</div>
<div class="sub">Doctor-formulated gummies and capsules for hair, skin, gut and glow — backed by clinical studies, not trends.</div>
<div class="cta">Take the Quiz</div>
</div>
<div class="hero-visual">
<div class="gummy1"></div>
<div class="gummy2"></div>
<div class="gummy3"></div>
</div>
</div>
<div class="section"><div class="section-title">Bestsellers</div><div class="section-link">Shop all</div></div>
<div class="grid">
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#ee4b9b,#f8c1d9);"><div class="badge">Bestseller</div></div>
<div class="card-body"><div class="card-cat">Hair · Skin · Nails</div><div class="card-title">Hair Sweet Hair</div><div class="stars">★★★★★</div><div class="card-price">$26.00</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#fecf0a,#f8c1d9);"></div>
<div class="card-body"><div class="card-cat">Gut Health</div><div class="card-title">Flatter Me</div><div class="stars">★★★★★</div><div class="card-price">$25.00</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#e10098,#ee4b9b);"><div class="badge">New</div></div>
<div class="card-body"><div class="card-cat">Skin</div><div class="card-title">Glow Sweet Glow</div><div class="stars">★★★★★</div><div class="card-price">$28.00</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#f8c1d9,#f5f9fc);"></div>
<div class="card-body"><div class="card-cat">Sleep</div><div class="card-title">Beauty Zzz</div><div class="stars">★★★★★</div><div class="card-price">$25.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; background: #313131; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #c13515; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background:#fff; color:#4a4a4a; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:22px;font-weight:600;color:#313131;letter-spacing:.3px;}
.navlinks{display:flex;gap:26px;font-size:14px;font-weight:500;color:#313131;}
.navicons{display:flex;gap:18px;font-size:13px;color:#6a6a6a;}
.hero{display:flex;justify-content:center;padding:6px 34px 22px;gap:22px;}
.heroimg{width:300px;height:230px;border-radius:12px;background:radial-gradient(circle at 40% 30%, #fdf4e6, #f7d9c4 60%, #e8b89a);position:relative;}
.heroimg:before{content:'';position:absolute;left:60px;top:60px;width:90px;height:90px;border-radius:50%;background:#fff;opacity:.5;}
.herotext{max-width:260px;display:flex;flex-direction:column;justify-content:center;}
.herotext h1{font-size:26px;font-weight:600;color:#313131;margin:0 0 10px;line-height:1.25;}
.herotext p{font-size:14px;color:#6a6a6a;margin:0 0 16px;}
.herobtn{display:inline-block;border:1px solid #313131;color:#313131;font-size:14px;padding:11px 22px;border-radius:8px;width:fit-content;}
.grid{display:flex;gap:16px;padding:0 34px;justify-content:center;}
.card{width:145px;text-align:center;}
.thumb{aspect-ratio:1/1;height:130px;border-radius:12px;margin-bottom:10px;}
.ptitle{font-size:15px;font-weight:600;color:#313131;line-height:1.25;height:36px;overflow:hidden;}
.pprice{font-size:14px;color:#6a6a6a;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:center;gap:26px;font-size:12px;color:#6a6a6a;border-top:1px solid #dddddd;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Jellycat</div>
<div class="navlinks"><div>Bashful</div><div>Amuseable</div><div>New</div><div>Gift Guide</div></div>
<div class="navicons"><span>Search</span><span>Bag</span></div>
</div>
<div class="hero">
<div class="heroimg"></div>
<div class="herotext">
<h1>Meet the Newest Creature</h1>
<p>Soft, silly, and endlessly huggable — each one a small work of art.</p>
<div class="herobtn">Shop New Arrivals</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 40% 30%,#fdf0d8,#e8b89a)"></div><div class="ptitle">Bashful Fawn</div><div class="pprice">$28.00</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 40% 30%,#e8f0f7,#a9c4d8)"></div><div class="ptitle">Amuseable Cloud</div><div class="pprice">$24.00</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 40% 30%,#f7e8e8,#d8a9a9)"></div><div class="ptitle">Bashful Bunny — Blush</div><div class="pprice">$26.00</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 40% 30%,#eef7e8,#b9d8a9)"></div><div class="ptitle">Amuseable Avocado</div><div class="pprice">$18.00</div></div>
</div>
<div class="footer"><span>© A Small Work of Art</span><span>Stockists</span><span>Contact</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffbb00; color: #000000;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #ffbb00;
border: 1px solid #ffbb00; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #111111; color: #ffffff;
border: 1px solid #000000; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffbb00; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#999999; box-sizing:border-box;
font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
border-bottom:1px solid #333333; }
.brand { font-size:20px; font-weight:900; color:#ffffff; letter-spacing:-0.5px; }
.brand span { color:#ffbb00; }
.nlinks { display:flex; gap:26px; }
.nlinks div { font-size:12px; font-weight:700; color:#999999; text-transform:uppercase; letter-spacing:0.5px; }
.nlinks div.on { color:#ffffff; }
.cartwrap { position:relative; color:#fff; font-size:16px; }
.cartbadge { position:absolute; top:-6px; right:-10px; background:#ffbb00; color:#000; font-size:9px; font-weight:900;
border-radius:50%; width:15px; height:15px; display:flex; align-items:center; justify-content:center; }
.hero { height:250px; display:flex; align-items:center; padding:0 44px; position:relative; overflow:hidden;
background:radial-gradient(circle at 80% 30%, #1a1a1a, #000000 70%); }
.hero::after { content:''; position:absolute; right:40px; top:20%; width:220px; height:220px;
background:repeating-linear-gradient(45deg,#1a1a1a 0 4px,#000 4px 8px); border-radius:12px; opacity:0.8;
box-shadow:0 0 60px rgba(255,187,0,0.12); }
.herotxt .k { color:#ffbb00; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:2px; }
.herotxt h1 { color:#ffffff; font-size:36px; font-weight:900; margin:10px 0 12px; letter-spacing:-0.5px; }
.herotxt p { color:#999999; font-size:14px; max-width:400px; margin:0 0 18px; }
.herobtn { display:inline-block; background:#ffbb00; color:#000; font-size:13px; font-weight:900; text-transform:uppercase;
letter-spacing:0.5px; padding:13px 26px; }
.section { padding:22px 34px 0; }
.sechead { font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:1.5px; color:#ffffff; margin-bottom:14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { border:1px solid #333333; padding:10px; }
.shot { aspect-ratio:1/1; position:relative; }
.c1 .shot { background:repeating-linear-gradient(60deg,#1a1a1a 0 3px,#0a0a0a 3px 6px); }
.c2 .shot { background:linear-gradient(160deg,#ffbb00,#cc9900); }
.c3 .shot { background:repeating-linear-gradient(120deg,#111 0 4px,#1a1a1a 4px 8px); }
.c4 .shot { background:linear-gradient(160deg,#333,#000); }
.badge { position:absolute; top:6px; left:6px; font-size:9px; font-weight:900; text-transform:uppercase; padding:2px 7px; }
.badge.new { background:#ffbb00; color:#000; } .badge.sale { background:#e63946; color:#fff; }
.ctitle { font-size:12px; font-weight:700; color:#ffffff; margin:8px 0 3px; text-transform:uppercase; }
.cprice { font-size:13px; font-weight:900; color:#ffbb00; }
</style></head>
<body>
<nav>
<div class="brand">Dbrand</div>
<div class="nlinks"><div class="on">Skins</div><div>Cases</div><div>Screen Protectors</div><div>Robots</div></div>
<div class="cartwrap">🛒<span class="cartbadge">3</span></div>
</nav>
<div class="hero">
<div class="herotxt">
<div class="k">The Black Is The Product</div>
<h1>Precision-Cut Skins For Every Device</h1>
<p>Vinyl-cut, robot-applied, engineered to the millimeter. No compromises.</p>
<div class="herobtn">Skin Your Device</div>
</div>
</div>
<div class="section">
<div class="sechead">Bestselling Textures</div>
<div class="grid">
<div class="card"><div class="shot c1"><span class="badge new">New</span></div><div class="ctitle">Black Titanium Skin</div><div class="cprice">$24.99</div></div>
<div class="card"><div class="shot c2"></div><div class="ctitle">Gold Leaf Skin</div><div class="cprice">$24.99</div></div>
<div class="card"><div class="shot c3"><span class="badge sale">Sale</span></div><div class="ctitle">Carbon Fiber Skin</div><div class="cprice">$19.99</div></div>
<div class="card"><div class="shot c4"></div><div class="ctitle">Matte Black Case</div><div class="cprice">$44.99</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f4ef; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f4ef; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; background: #f17506; color: #ffffff;
border: none; border-radius: 9999px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; background: #f5f4ef; color: #222222;
border: 1px solid #f17506; border-radius: 9999px;
padding: 10px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f5f4ef; color: #222222;
border: 1px solid #c0c0bc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #a72d2c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f4ef; color:#222222; box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#f5f4ef; border-bottom:1px solid #dedede; display:flex;
align-items:center; justify-content:space-between; padding:0 30px; }
.logo { font-size:19px; font-weight:700; }
.searchpill { flex:1; max-width:320px; height:40px; border-radius:9999px; border:1px solid #dedede;
background:#fff; display:flex; align-items:center; padding:0 16px; font-size:14px; color:#595959; }
.navicons { display:flex; gap:16px; }
.navicons span { width:36px; height:36px; border-radius:9999px; background:#fff; border:1px solid #dedede;
display:flex; align-items:center; justify-content:center; font-size:14px; }
.catstrip { height:44px; background:#f5f4ef; border-bottom:1px solid #dedede; display:flex;
align-items:center; gap:22px; padding:0 30px; font-size:14px; font-weight:600; color:#595959; }
.catstrip .on { color:#f17506; border-bottom:2px solid #f17506; padding-bottom:12px; }
main { display:flex; padding:22px 30px 0; gap:30px; height:326px; }
.shotwrap { width:310px; display:flex; flex-direction:column; gap:10px; }
.shot { flex:1; background:#eaeaea; border-radius:12px; position:relative; overflow:hidden; }
.shot::before { content:''; position:absolute; inset:26px; border-radius:12px;
background:radial-gradient(circle at 30% 20%, #f38727, transparent 55%),
linear-gradient(150deg,#222 0%, #484848 60%, #0263c1 130%); }
.badge-new { position:absolute; top:12px; left:12px; background:#f17506; color:#fff; font-size:11px;
font-weight:700; text-transform:uppercase; letter-spacing:0.3px; padding:2px 8px; border-radius:4px; z-index:2; }
.dots { display:flex; gap:6px; justify-content:center; }
.dots span { width:8px; height:8px; border-radius:9999px; background:#dedede; }
.dots span.on { background:#f17506; }
.info { flex:1; display:flex; flex-direction:column; min-width:0; }
.badge-category { display:inline-block; background:#eaeaea; color:#595959; font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:0.3px; border-radius:9999px; padding:4px 12px; margin-bottom:10px; width:fit-content; }
h1 { font-size:22px; font-weight:700; margin:0 0 8px; line-height:1.3; }
.stars { color:#f17506; font-size:14px; margin-bottom:8px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.price { font-size:20px; font-weight:700; }
.badge-sale { background:#a72d2c; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase;
border-radius:4px; padding:2px 8px; }
.qty-row { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.qty { display:flex; align-items:center; border:1px solid #dedede; border-radius:8px; height:36px; }
.qty span { width:34px; text-align:center; font-size:16px; color:#484848; }
.qty b { width:36px; text-align:center; font-size:14px; }
.cta { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#f17506; color:#fff; border:none; border-radius:9999px; height:44px; font-size:14px; font-weight:700; }
.btn-checkout { flex:1; background:#0263c1; color:#fff; border:none; border-radius:9999px; height:44px; font-size:14px; font-weight:700; }
footer { margin-top:0; height:64px; background:#004b91; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; opacity:0.97; }
footer b { opacity:1; }
footer span { opacity:0.85; }
</style></head>
<body>
<nav>
<div class="logo">Cablematters</div>
<div class="searchpill">Search cables, adapters, hubs…</div>
<div class="navicons"><span>♡</span><span>🛒</span></div>
</nav>
<div class="catstrip">
<span class="on">USB & USB-C</span><span>HDMI</span><span>Ethernet</span><span>Audio/Video</span><span>Power</span>
</div>
<main>
<div class="shotwrap">
<div class="shot"><span class="badge-new">New</span></div>
<div class="dots"><span class="on"></span><span></span><span></span><span></span></div>
</div>
<div class="info">
<span class="badge-category">USB-C Hubs</span>
<h1>7-in-1 USB-C Hub, 100W PD, 4K HDMI</h1>
<div class="stars">★★★★★ 4.7 (958)</div>
<div class="price-row"><span class="price">$39.99</span><span class="badge-sale">Sale</span></div>
<div class="qty-row">
<span style="font-size:13px;font-weight:600;">Quantity</span>
<div class="qty"><span>–</span><b>1</b><span>+</span></div>
</div>
<div class="cta">
<button class="btn-add">Add to Cart</button>
<button class="btn-checkout">Buy Now</button>
</div>
</div>
</main>
<footer>
<span>© Cablematters</span>
<span><b>30-day returns</b> · Lifetime tech support · Free shipping over $35</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #2e3742;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #2e3742;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.2px; margin: 0; color: #2e3742; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #606a72; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; background: #0067e6; color: #ffffff;
border: none; border-radius: 3px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; background: #f5f5f5; color: #2e3742;
border: 1px solid #0067e6; border-radius: 3px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #f5f5f5; color: #2e3742;
border: 1px solid #c3c6c8; border-radius: 3px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #606a72; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.27; letter-spacing: 0.2px; background: #d3e1f3; color: #0067e6;
border-radius: 3px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; font-family:'Inter','Open Sans',Arial,sans-serif; color:#444444; }
*{box-sizing:border-box;}
.nav{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#2e3742;}
.logo{font-size:16px;font-weight:600;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;color:#f5f5f5;}
.navlinks .on{border-bottom:2px solid #0067e6;padding-bottom:14px;}
.section{padding:20px 32px 0;}
.hero{display:flex;gap:20px;}
.card{background:#fff;border-radius:10px;padding:16px;box-shadow:0 1px 3px rgba(46,55,66,0.08);flex:1;}
.h1{font-size:20px;font-weight:600;color:#2e3742;margin-bottom:6px;}
.sub{font-size:13px;color:#606a72;margin-bottom:12px;}
.btn{display:inline-block;background:#0067e6;color:#fff;font-size:13px;font-weight:500;padding:9px 18px;border-radius:3px;}
.badges{display:flex;gap:8px;}
.sbadge{font-size:10px;font-weight:600;text-transform:uppercase;padding:2px 8px;border-radius:3px;}
.sbadge.ok{background:#d4f5e4;color:#1e8a5e;}
.sbadge.warn{background:#fef3d6;color:#b8860b;}
.grid{display:flex;gap:14px;padding-top:16px;}
.pcard{width:150px;background:#fff;border-radius:10px;padding:14px;box-shadow:0 1px 3px rgba(46,55,66,0.08);}
.thumb{height:80px;border-radius:6px;margin-bottom:10px;}
.pname{font-size:14px;font-weight:600;color:#2e3742;margin-bottom:4px;}
.pprice{font-size:14px;color:#444;}
.stitle{font-size:16px;font-weight:600;margin-bottom:12px;color:#2e3742;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#2e3742;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#f5f5f5;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Synology</div>
<div class="navlinks"><div class="on">NAS</div><div>Surveillance</div><div>Routers</div><div>Support</div></div>
</div>
<div class="section">
<div class="hero">
<div class="card">
<div class="h1">Storage that scales with your data.</div>
<div class="sub">Multi-bay NAS, backup, and surveillance stations for home and business.</div>
<span class="btn">Configure Your NAS</span>
</div>
<div class="card" style="max-width:220px;">
<div class="badges"><span class="sbadge ok">System OK</span><span class="sbadge warn">1 Update</span></div>
<div style="font-size:12px;color:#606a72;margin-top:10px;">DiskStation Manager status overview updates in real time across your fleet.</div>
</div>
</div>
<div class="stitle" style="margin-top:16px;">Popular Models</div>
<div class="grid">
<div class="pcard"><div class="thumb" style="background:linear-gradient(150deg,#0067e6,#2e3742);"></div><div class="pname">DS923+ 4-Bay NAS</div><div class="pprice">$549.99</div></div>
<div class="pcard"><div class="thumb" style="background:linear-gradient(150deg,#5bc0de,#2e3742);"></div><div class="pname">RT6600ax Router</div><div class="pprice">$299.99</div></div>
<div class="pcard"><div class="thumb" style="background:linear-gradient(150deg,#33d49b,#2e3742);"></div><div class="pname">DS224+ 2-Bay NAS</div><div class="pprice">$299.99</div></div>
<div class="pcard"><div class="thumb" style="background:linear-gradient(150deg,#edb758,#2e3742);"></div><div class="pname">BC500 Camera</div><div class="pprice">$129.99</div></div>
</div>
</div>
<div class="footer"><span>© Storage & Networking Systems</span><span>Support · Documentation · Community</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #bf0000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #bf0000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #dd8787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #134ff3; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #bf0000; color: #ffffff;
border: 1px solid #134ff3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #bf0000; color: #f5f5f5;
border: 1px solid #c82727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #dd8787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #a30d27; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box; font-family:Meiryo,"Hiragino Kaku Gothic ProN","MS PGothic",sans-serif; font-size:12px; }
* { box-sizing:border-box; }
.util { background:#f4f4f4; font-size:11px; color:#666; padding:4px 20px; }
.header { display:flex; align-items:center; padding:8px 20px; gap:12px; }
.brand { font-weight:700; font-size:18px; color:#bf0000; }
.search { flex:1; display:flex; height:40px; }
.sfield { flex:1; background:#f7f7f7; border:1px solid #ebebeb; border-radius:4px 0 0 4px; padding:8px 12px; color:#666; }
.sbtn { background:#bf0000; color:#fff; border-radius:0 4px 4px 0; width:60px; display:flex; align-items:center; justify-content:center; font-size:13px; }
.login { background:#bf0000; color:#fff; border-radius:4px; padding:0 11px; height:32px; display:flex; align-items:center; font-size:12px; }
.servicenav { background:#333; display:flex; gap:2px; padding:0 20px; }
.stab { color:#fff; padding:12px 8px; font-size:13px; }
.stab.active { background:#bf0000; padding:8px 20px; }
.band { background:#f4f4f4; padding:14px 20px; display:flex; gap:14px; }
.module { flex:1; background:#fff; border-radius:8px; padding:10px; }
.module h4 { font-size:14px; font-weight:600; margin:0 0 8px; }
.prod { display:flex; gap:8px; align-items:center; margin-bottom:6px; }
.thumb { width:44px; height:44px; border-radius:4px; }
.pname { font-size:11px; }
.price { color:#bf0000; font-weight:700; font-size:12px; }
.sale { margin:0 20px; background:#fff9c8; border-radius:8px; padding:4px; }
.saleinner { background:#fff100; border-radius:8px; padding:12px 24px 16px; text-align:center; color:#666; font-weight:700; }
</style></head>
<body>
<div class="util">Free Membership Registration | Log In</div>
<div class="header">
<div class="brand">Rakuten</div>
<div class="search"><div class="sfield">Search by keyword</div><div class="sbtn">Search</div></div>
<div class="login">Log In</div>
</div>
<div class="servicenav">
<div class="stab active">Marketplace</div>
<div class="stab">Travel</div>
<div class="stab">Books</div>
<div class="stab">Card</div>
<div class="stab">Bank</div>
</div>
<div class="band">
<div class="module">
<h4>Trending Now</h4>
<div class="prod"><div class="thumb" style="background:linear-gradient(150deg,#f5c9a0,#e69b5c);"></div><div><div class="pname">Wireless Earbuds</div><div class="price">¥3,980</div></div></div>
<div class="prod"><div class="thumb" style="background:linear-gradient(150deg,#c9d9f5,#7fa0e6);"></div><div><div class="pname">Insulated Tumbler</div><div class="price">¥1,280</div></div></div>
</div>
<div class="module">
<h4>Recently Viewed</h4>
<div class="prod"><div class="thumb" style="background:linear-gradient(150deg,#d9f5c9,#8fbd8b);"></div><div><div class="pname">Organic Coffee Beans</div><div class="price">¥980</div></div></div>
<div class="prod"><div class="thumb" style="background:linear-gradient(150deg,#f5c9e0,#e07fa8);"></div><div><div class="pname">Aroma Diffuser</div><div class="price">¥2,480</div></div></div>
</div>
</div>
<div class="sale"><div class="saleinner">Super Deal – Points Up Now!</div></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ef223a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ef223a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000d25; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ef223a; color: #000d25;
border: 1px solid #000d25; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ef223a; color: #f5f5f5;
border: 1px solid #f04458; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #c91f37; color: #000d25;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000d25; box-sizing:border-box;
font-family:"Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-size:17px; font-weight:700; display:flex; align-items:center; gap:8px; }
.brand .dot { width:12px; height:12px; border-radius:50%; background:#ef223a; }
.navlinks { display:flex; gap:22px; font-size:14px; }
.cta { background:#1866ee; color:#ffffff; border-radius:9999px; padding:8px 24px; font-size:16px; font-weight:500; }
.hero { padding:20px 34px 10px; }
h1 { font-size:40px; font-weight:700; line-height:1.2; letter-spacing:-1px; margin:0 0 8px; max-width:560px; }
.lead { font-size:15px; color:#000d25; opacity:0.7; margin:0 0 16px; }
.darkband { margin:0 34px; background:#081f47; border-radius:8px 8px 4px 4px; padding:20px 24px; display:flex; gap:20px; align-items:center; }
.darkband .tabs { display:flex; gap:14px; font-size:12px; color:rgba(255,255,255,0.5); margin-bottom:10px; }
.darkband .tabs span.on { color:#ffffff; font-weight:600; border-bottom:2px solid #3acefa; padding-bottom:4px; }
.code { color:#3acefa; font-size:13px; font-family:monospace; line-height:1.6; }
.code .c1 { color:#ffffff; }
.cards { display:flex; gap:16px; padding:20px 34px 0; }
.card { flex:1; background:#f3f4f7; border-radius:24px; padding:20px; }
.card .t { font-size:16px; font-weight:600; margin-bottom:6px; }
.card .d { font-size:13px; color:#606b85; line-height:1.4; }
.badge { display:inline-block; background:#f4f9ff; color:#030b5d; border-radius:9999px; padding:4px 8px; font-size:11px; font-weight:600; margin-top:8px; }
</style></head>
<body>
<nav>
<div class="brand"><span class="dot"></span>Twilio</div>
<div class="navlinks"><span>Products</span><span>Solutions</span><span>Docs</span><span>Pricing</span></div>
<span class="cta">Start for free</span>
</nav>
<section class="hero">
<h1>The platform for conversations</h1>
<p class="lead">Send messages, make calls, verify users, connect data — one API at a time.</p>
</section>
<div class="darkband">
<div style="flex:1">
<div class="tabs"><span class="on">Node.js</span><span>Python</span><span>Java</span></div>
<div class="code"><span class="c1">client.messages.create({</span><br> body: "Your code is 4821",<br> to: "+15551234567"<br><span class="c1">});</span></div>
</div>
</div>
<div class="cards">
<div class="card"><div class="t">Messaging</div><div class="d">Programmable SMS and WhatsApp at global scale.</div><span class="badge">New</span></div>
<div class="card"><div class="t">Verify</div><div class="d">Add phone verification in a single API call.</div></div>
<div class="card"><div class="t">Voice</div><div class="d">Build inbound and outbound calling flows.</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00b29d; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00b29d; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #cc3366; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b29d; color: #000000;
border: 1px solid #cc3366; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00b29d; color: #000000;
border: 1px solid #27bdab; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #219e94; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; padding:0 32px; }
.brand { font-size:16px; font-weight:700; color:#111111; margin:0; }
.navlinks { display:flex; gap:22px; margin-left:30px; }
.navlinks span { font-size:16px; font-weight:600; color:#111111; }
.navlinks span.on { color:#cc3366; }
.lang { margin-left:auto; font-size:14px; color:#999999; }
.hero { text-align:center; padding:8px 32px 18px; }
.hero h1 { font-size:30px; font-weight:700; line-height:1.4; margin:0; color:#111111; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 32px 18px; }
.entry { border-radius:8px; padding:20px 16px; display:flex; flex-direction:column; gap:6px; height:100px; }
.entry.teal { background:#00b29d; color:#ffffff; }
.entry.blue { background:#555dfa; color:#ffffff; }
.entry.grey { background:#efeff1; color:#111111; }
.entry h3 { font-size:20px; font-weight:700; margin:0; letter-spacing:-0.2px; }
.entry span { font-size:13px; opacity:0.9; }
.segments { display:flex; gap:14px; padding:0 32px 18px; }
.seg { flex:1; background:#dff1f1; border-radius:40px; padding:20px 22px; display:flex; flex-direction:column; gap:8px; }
.seg h4 { margin:0; font-size:16px; font-weight:700; color:#111111; }
.seg p { margin:0; font-size:12px; color:#333333; line-height:1.4; }
.pill { align-self:flex-start; background:#00b29d; color:#ffffff; border-radius:40px; padding:6px 16px; font-size:13px; font-weight:700; }
footer { background:#2f3233; color:#ffffff; padding:12px 32px; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Milddang (I Hate Flying Bugs)</p>
<div class="navlinks"><span class="on">Who we are</span><span>What we do</span><span>Newsroom</span></div>
<span class="lang">KOR / ESP</span>
</nav>
<div class="hero"><h1>High-Quality Education for Equal Opportunity</h1></div>
<div class="grid">
<div class="entry teal"><h3>Mildang PT</h3><span>AI-based 1:1 personalized tutoring</span></div>
<div class="entry blue"><h3>School PT</h3><span>Public-education personalized learning</span></div>
<div class="entry grey"><h3>Newsroom</h3><span>Latest company updates</span></div>
</div>
<div class="segments">
<div class="seg"><h4>Students</h4><p>A plan that adapts to what you actually get wrong.</p><span class="pill">Start learning</span></div>
<div class="seg"><h4>Parents</h4><p>Transparent progress, no pressure marketing.</p><span class="pill">Learn more</span></div>
<div class="seg"><h4>Ontact Teachers</h4><p>Tools that keep the focus on the student.</p><span class="pill">Join us</span></div>
</div>
<footer>I Hate Flying Bugs Inc. · Corporate information · Contact</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #5f6368; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.2px; background: #0054a6; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.2px; background: #ffffff; color: #0054a6;
border: 1px solid #0054a6; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5f6368; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c8102e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #d9d9d9; }
.brand { font-size:17px; font-weight:700; color:#0054a6; }
.navlinks { display:flex; gap:20px; font-size:12px; color:#333; }
.btn-primary { background:#0054a6; color:#fff; border:none; border-radius:2px; padding:9px 18px; font-size:12px; font-weight:700; }
.megabar { background:#f2f6fb; border-bottom:1px solid #d9d9d9; padding:6px 32px; font-size:11px; color:#5f6368; display:flex; gap:20px; }
main { display:flex; height:calc(640px - 58px - 27px - 40px); }
.gallery { width:300px; background:#f5f5f5; position:relative; display:flex; align-items:center; justify-content:center; }
.vial { width:44px; height:130px; border-radius:6px; background:linear-gradient(180deg,#e8f1fb,#0054a6 60%); position:relative; }
.vial::before { content:''; position:absolute; top:-16px; left:8px; width:28px; height:18px; background:#1a1a1a; border-radius:2px; }
.info { flex:1; padding:22px 30px; display:flex; flex-direction:column; gap:10px; border-right:1px solid #d9d9d9; }
.catnum { font-size:11px; color:#5f6368; font-family:monospace; }
h1 { font-size:19px; font-weight:700; margin:0; }
.metarow { display:flex; gap:16px; font-size:11px; color:#5f6368; flex-wrap:wrap; }
.metarow b { color:#1a1a1a; }
.apps { display:flex; gap:6px; }
.app { background:#e8f1fb; color:#0054a6; font-size:10px; font-weight:700; padding:3px 8px; border-radius:2px; }
.spectable { border:1px solid #d9d9d9; font-size:11px; }
.srow { display:flex; border-bottom:1px solid #ebebeb; }
.srow:last-child { border-bottom:none; }
.srow div { padding:6px 10px; flex:1; }
.srow div:first-child { color:#5f6368; background:#f2f6fb; }
.side { width:250px; padding:22px 24px; display:flex; flex-direction:column; gap:12px; }
.price { font-size:20px; font-weight:700; }
.avail { font-size:12px; color:#2e7d32; font-weight:700; }
.btn-add { background:#0054a6; color:#fff; border:none; border-radius:2px; padding:12px; font-size:13px; font-weight:700; }
.btn-quote { background:#fff; color:#0054a6; border:1px solid #0054a6; border-radius:2px; padding:12px; font-size:13px; font-weight:700; }
.link { font-size:11px; color:#0054a6; }
footer { padding:10px 32px; border-top:1px solid #d9d9d9; font-size:10px; color:#5f6368; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Bio Rad Laboratories</div>
<div class="navlinks"><span>Life Science</span><span>Clinical Diagnostics</span><span>Process Media</span></div>
<button class="btn-primary">Sign In</button>
</nav>
<div class="megabar"><span>Droplet Digital PCR</span><span>Western Blotting</span><span>Antibodies</span><span>Cell Biology</span><span>Food Safety</span></div>
<main>
<div class="gallery"><div class="vial"></div></div>
<div class="info">
<span class="catnum">Cat. #1704272 · 96-well</span>
<h1>QX600 ddPCR Supermix for Probes</h1>
<div class="metarow"><b>Reactivity:</b> Human, Mouse, Rat</div>
<div class="apps"><span class="app">ddPCR</span><span class="app">qPCR</span><span class="app">ELISA</span></div>
<div class="spectable">
<div class="srow"><div>Format</div><div>2 × 1.1 mL</div></div>
<div class="srow"><div>Storage</div><div>-20°C, protect from light</div></div>
<div class="srow"><div>Applications</div><div>Absolute quantification</div></div>
</div>
<span class="link">Download Datasheet · Download Protocol</span>
</div>
<div class="side">
<span class="price">$412.00</span>
<span class="avail">In Stock</span>
<button class="btn-add">Add to Cart</button>
<button class="btn-quote">Request a Quote</button>
</div>
</main>
<footer><span>© Bio Rad Laboratories</span><span>Support · Distributors · Documentation</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #C4923A; color: #FFFFFF;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #FFFFFF; color: #313131;
border: 1px solid #C4923A; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #FFFFFF; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #1A4A8A; color: #FFFFFF;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#313131; box-sizing:border-box;
font-family:Arial, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.ticker { flex:0 0 auto; height:34px; background:#1E1E1E; color:#fff; display:flex; align-items:center;
gap:22px; padding:0 30px; font-size:13px; font-weight:600; }
.ticker span.lab { color:#9E9E9E; font-weight:400; margin-right:4px; }
.up { color:#2E7D32; }
.down { color:#C62828; }
nav { flex:0 0 auto; height:58px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; border-bottom:1px solid #D9D9D9; }
.brand { font-size:18px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; }
.navlinks .active { color:#C4923A; }
main { flex:1 1 auto; display:flex; gap:22px; padding:18px 30px; min-height:0; }
.left { flex:0.9; border-radius:4px; position:relative; min-height:0;
background:radial-gradient(circle at 40% 35%, #f0dca0, #C4923A 60%, #7a5a1e 100%); }
.left::after { content:''; position:absolute; inset:22px; border-radius:999px; border:2px solid rgba(255,255,255,0.4); }
.right { flex:1.2; display:flex; flex-direction:column; min-height:0; }
.title { font-size:20px; font-weight:700; margin:0 0 6px; }
.meta { font-size:13px; color:#767676; margin:0 0 10px; }
.price { font-size:26px; font-weight:700; margin:0 0 4px; }
.price-sub { font-size:12px; color:#767676; margin:0 0 12px; }
.badges { display:flex; gap:8px; margin-bottom:12px; }
.badge { font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:3px 7px; border-radius:4px; color:#fff; }
.badge.ira { background:#1A4A8A; }
.cta-row { display:flex; gap:10px; margin-bottom:14px; }
.btn-primary { background:#C4923A; color:#fff; border:none; border-radius:4px; padding:12px 24px; font-weight:700; font-size:15px; }
.btn-secondary { background:#fff; border:1px solid #313131; color:#313131; border-radius:4px; padding:11px 23px; font-weight:700; font-size:15px; }
.pricetable { flex:1; border:1px solid #D9D9D9; border-radius:4px; min-height:0; overflow:hidden; }
.prow { display:flex; justify-content:space-between; font-size:12px; padding:8px 14px; border-bottom:1px solid #EFEFEF; }
.prow.head { background:#F8F5F0; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; font-size:11px; }
footer { flex:0 0 auto; height:52px; background:#313131; color:#fff; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; }
footer .links { color:#9E9E9E; display:flex; gap:16px; }
</style></head>
<body>
<div class="ticker">
<span><span class="lab">GOLD</span>$2,384.60 <span class="up">▲0.4%</span></span>
<span><span class="lab">SILVER</span>$28.91 <span class="down">▼0.2%</span></span>
<span><span class="lab">PLATINUM</span>$981.20 <span class="up">▲0.1%</span></span>
</div>
<nav>
<p class="brand">Apmex</p>
<div class="navlinks"><span class="active">Gold</span><span>Silver</span><span>Platinum</span><span>Collectibles</span></div>
</nav>
<main>
<div class="left"></div>
<div class="right">
<h1 class="title">1 oz American Gold Eagle (2026)</h1>
<p class="meta">.9167 Fine Gold · Brilliant Uncirculated</p>
<div class="price">$2,412.50</div>
<p class="price-sub">Spot price + 1.2% premium</p>
<div class="badges"><span class="badge ira">IRA Eligible</span></div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Add to Watchlist</button>
</div>
<div class="pricetable">
<div class="prow head"><span>Qty</span><span>Price / Unit</span><span>Total</span></div>
<div class="prow"><span>1–4</span><span>$2,412.50</span><span>$2,412.50</span></div>
<div class="prow"><span>5–9</span><span>$2,399.00</span><span>$11,995.00</span></div>
<div class="prow"><span>10+</span><span>$2,385.75</span><span>$23,857.50</span></div>
</div>
</div>
</main>
<footer>
<span>© Apmex</span>
<div class="links"><span>BBB A+</span><span>Secure Checkout</span><span>Support</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e9e9e8; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e9e9e8; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6e7075; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #ad1519; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: #ffffff; color: #121212;
border: 1px solid #ad1519; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #3a3a3a;
border: 1px solid #b3b3b2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e7075; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #fabd00; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#e9e9e8; font-family:'Manrope',Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#121212;}
.logo{font-size:20px;font-weight:600;color:#e9e9e8;letter-spacing:.3px;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#d0cecb;}
.cta{background:#ad1519;color:#fff;font-size:12px;font-weight:700;padding:10px 20px;border-radius:8px;}
.hero{height:240px;display:flex;overflow:hidden;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 34px;background:#e9e9e8;}
.tag{display:inline-block;background:#fabd00;color:#121212;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;border-radius:4px;padding:4px 10px;width:fit-content;margin-bottom:12px;}
.herotext h1{font-size:28px;font-weight:600;margin:0 0 10px;line-height:1.2;}
.herotext p{font-size:13px;color:#6e7075;margin:0 0 16px;max-width:290px;}
.btn{display:inline-block;background:#ad1519;color:#fff;font-size:13px;font-weight:600;padding:12px 24px;border-radius:8px;width:fit-content;}
.heroimg{width:54%;position:relative;background:linear-gradient(200deg,#3a3a3a,#121212 70%);overflow:hidden;}
.peak1{position:absolute;bottom:0;left:0;width:0;height:0;border-left:120px solid transparent;border-right:60px solid transparent;border-bottom:130px solid #6e7075;}
.peak2{position:absolute;bottom:0;left:110px;width:0;height:0;border-left:80px solid transparent;border-right:140px solid transparent;border-bottom:170px solid #9a9a9a;}
.spray{position:absolute;bottom:0;right:40px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,#ffffff,transparent 70%);}
.sec{padding:20px 34px 0;}
.sectitle{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#6e7075;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border:1px solid #d0cecb;border-radius:12px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:9px;font-weight:700;text-transform:uppercase;border-radius:8px;padding:3px 9px;color:#fff;z-index:2;}
.badge.sale{background:#de0000;}
.badge.new{background:#fabd00;color:#121212;}
.thumb{height:96px;border-radius:8px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;}
.pprice{font-size:13px;font-weight:700;color:#ad1519;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Montec Wear</div>
<div class="navlinks"><span>Jackets</span><span>Base Layers</span><span>Snow</span><span>Sale</span></div>
<div class="cta">Shop Now</div>
</div>
<div class="hero">
<div class="herotext">
<div class="tag">New Season</div>
<h1>Built for the Chairlift and Beyond</h1>
<p>High-contrast alpine layers engineered for motion, not a lifestyle feed.</p>
<div class="btn">Shop Outerwear</div>
</div>
<div class="heroimg"><div class="peak1"></div><div class="peak2"></div><div class="spray"></div></div>
</div>
<div class="sec">
<div class="sectitle">Winter Essentials</div>
<div class="grid">
<div class="card"><span class="badge sale">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#ad1519,#121212)"></div><div class="pname">Summit Shell Jacket</div><div class="pprice">$249.99</div></div>
<div class="card"><span class="badge new">New</span><div class="thumb" style="background:linear-gradient(135deg,#cf2734,#6e7075)"></div><div class="pname">Alpine Bib Pants</div><div class="pprice">$189.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#fabd00,#121212)"></div><div class="pname">Thermal Base Layer</div><div class="pprice">$59.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d0cecb,#ad1519)"></div><div class="pname">Ridge Beanie</div><div class="pprice">$24.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf7f7; color: #191919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf7f7; color: #191919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.25; margin: 0; color: #191919; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.08em; background: #191919; color: #faf7f7;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.08em; background: transparent; color: #191919;
border: 1px solid #191919; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #faf7f7; color: #191919;
border: 1px solid #c2c0c0; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.1em; background: #e51717; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#faf7f7; color:#515052; box-sizing:border-box; font-family:'Helvetica', Arial, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:Georgia, 'Times New Roman', serif; }
nav { height:64px; display:flex; align-items:center; gap:26px; padding:0 28px; border-bottom:1px solid #dbdbdb; }
.logo { font-family:Georgia, serif; font-size:20px; color:#191919; }
.navlink { font-size:13px; letter-spacing:.05em; color:#191919; }
.navlink.active { border-bottom:1px solid #191919; padding-bottom:22px; margin-bottom:-23px; }
.searchw { margin-left:auto; width:200px; height:36px; background:#f5f5f5; border:1px solid #dbdbdb;
display:flex; align-items:center; padding:0 14px; font-size:12px; color:#777777; }
.stage { display:flex; gap:30px; padding:26px 28px 0; }
.swatch { width:230px; height:230px; flex:0 0 auto; position:relative; overflow:hidden;
background:repeating-linear-gradient(90deg,#686c6d 0 6px,#191919 6px 12px); }
.swatch::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 6px, transparent 6px 12px); }
.newlabel { position:absolute; top:0; left:0; background:#191919; color:#faf7f7; font-size:11px; letter-spacing:.1em;
text-transform:uppercase; padding:4px 10px; }
.info { flex:1; }
h1 { font-family:Georgia, serif; font-size:28px; font-weight:400; margin:6px 0 6px; color:#191919; }
.desc { font-size:14px; line-height:1.6; max-width:520px; color:#515052; margin-bottom:16px; }
.swrow { display:flex; gap:6px; margin-bottom:8px; }
.chip { width:24px; height:24px; border-radius:4px; border:1px solid #dbdbdb; }
.chip.active { box-shadow:0 0 0 2px #faf7f7, 0 0 0 4px #191919; }
.swlabel { font-size:12px; color:#777777; margin-bottom:18px; }
.pricerow { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.price { font-size:20px; }
.btnrow { display:flex; gap:10px; }
.btn-p { background:#191919; color:#faf7f7; border:none; height:48px; padding:0 28px;
font-size:14px; letter-spacing:.08em; text-transform:uppercase; }
.btn-s { background:transparent; color:#191919; border:1px solid #191919; height:48px; padding:0 22px;
font-size:14px; letter-spacing:.08em; text-transform:uppercase; }
.qwrap { padding:16px 28px 0; border-top:1px solid #dbdbdb; margin-top:18px; }
.qhdr { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#777777; margin-bottom:10px; }
.qtable { display:flex; gap:0; border:1px solid #dbdbdb; width:200px; height:44px; }
.qbtn { flex:0 0 44px; display:flex; align-items:center; justify-content:center; font-size:16px; color:#191919; }
.qval { flex:1; display:flex; align-items:center; justify-content:center; border-left:1px solid #dbdbdb; border-right:1px solid #dbdbdb; font-size:14px; }
</style></head>
<body>
<nav>
<span class="logo">Chilewich</span>
<span class="navlink active">Floor Mats</span>
<span class="navlink">Placemats</span>
<span class="navlink">Table Runners</span>
<div class="searchw">Search by material, color…</div>
</nav>
<div class="stage">
<div class="swatch"><span class="newlabel">New Colorway</span></div>
<div class="info">
<h1>Bamboo Woven Floor Mat</h1>
<div class="desc">Woven vinyl construction with a fine bamboo pattern, engineered for high-traffic entryways. Wipes clean, resists fading, and holds its shape after years of daily wear.</div>
<div class="swrow">
<span class="chip active" style="background:#686c6d"></span>
<span class="chip" style="background:#191919"></span>
<span class="chip" style="background:#a5a7a8"></span>
<span class="chip" style="background:#faf7f7; border-color:#191919"></span>
</div>
<div class="swlabel">Color: Steel</div>
<div class="pricerow"><span class="price serif">$168.00</span></div>
<div class="btnrow">
<button class="btn-p">Add to Cart</button>
<button class="btn-s">View Room Setting</button>
</div>
</div>
</div>
<div class="qwrap">
<div class="qhdr">Quantity</div>
<div class="qtable">
<div class="qbtn">−</div>
<div class="qval">1</div>
<div class="qbtn">+</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #275cfd; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #275cfd; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #98b0f9; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2250f7; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #275cfd; color: #ffffff;
border: 1px solid #2250f7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #275cfd; color: #f5f5f5;
border: 1px solid #4874fc; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #98b0f9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #265afc; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#dbdbdc; color:#0d0e0f; box-sizing:border-box;
font-family:"Manrope", -apple-system, sans-serif; }
* { box-sizing:border-box; }
h1,h2,h3 { font-family:"Sora", sans-serif; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#ffffff; }
.brand { font-family:"Sora",sans-serif; font-weight:700; font-size:18px; margin:0; }
.navlinks { display:flex; gap:8px; }
.pill-nav { background:#2d2f2f; color:#ffffff; border-radius:9999px; padding:5px 14px; font-size:13px; font-family:"Sora",sans-serif; }
.btn-primary { background:#275cfd; color:#ffffff; border:none; border-radius:15px; padding:0 18px; height:38px; font-size:13px; }
.hero { padding:24px 32px 6px; max-width:560px; }
.hero h1 { font-size:34px; font-weight:550; line-height:1.25; margin:0 0 8px; }
.hero p { font-size:15px; font-weight:300; color:#333333; margin:0 0 12px; line-height:1.5; }
.row { display:flex; gap:10px; }
.btn-pill { background:#275cfd; color:#ffffff; border:none; border-radius:9999px; padding:0 26px; height:38px; font-size:14px; font-weight:500; }
.btn-glass { background:rgba(255,255,255,0.5); color:#0d0e0f; border:none; border-radius:15px; padding:0 20px; height:38px; font-size:13px; }
.cardsrow { display:flex; gap:12px; padding:14px 32px 0; }
.wcard { background:#ffffff; border-radius:15px; padding:14px 16px; flex:1; display:flex; flex-direction:column; gap:4px; }
.wcard h3 { font-size:16px; font-weight:600; margin:0; }
.wcard p { font-size:11px; color:#696a6a; margin:0; }
.wcard .num { font-family:"Sora",sans-serif; font-size:20px; font-weight:700; color:#275cfd; }
.darkband { margin-top:14px; background:#081b68; padding:20px 32px; display:flex; gap:12px; }
.glass { flex:1; background:rgba(255,255,255,0.16); border-radius:12.75px; padding:16px 18px; color:#ffffff;
display:flex; flex-direction:column; gap:6px; box-shadow:rgba(0,0,0,0.1) 0px 0px 50px 0px; }
.glass .tag { font-family:"Sora",sans-serif; font-size:11px; letter-spacing:0.04em; text-transform:uppercase; opacity:0.7; }
.glass h3 { font-size:16px; margin:0; }
.glass .price { font-family:"Sora",sans-serif; font-size:18px; font-weight:600; }
.glass .up { color:#4ade80; font-size:12px; }
.tint { margin:14px 32px 0; background:#ebf2ff; border-radius:15px; padding:12px 18px; display:flex; justify-content:space-between; font-size:12px; color:#0d0e0f; }
.tint b { font-family:"Sora",sans-serif; font-size:16px; display:block; }
footer { position:absolute; bottom:0; left:0; right:0; padding:12px 32px; font-size:11px; color:#696a6a; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<p class="brand">XREX</p>
<div class="navlinks"><span class="pill-nav">Pay</span><span class="pill-nav">RegTech</span><span class="pill-nav">Resources</span></div>
<button class="btn-primary">Contact Sales</button>
</nav>
<section class="hero">
<h1>Redefine banking together.</h1>
<p>Inclusive finance for cross-border merchants — compliant, blockchain-powered, built for real trade.</p>
<div class="row">
<button class="btn-pill">Contact Sales</button>
<button class="btn-glass">Log In</button>
</div>
</section>
<div class="cardsrow">
<div class="wcard"><h3>Global USD Liquidity</h3><p>Settle cross-border trade without the delay.</p><span class="num">98.4%</span></div>
<div class="wcard"><h3>XRAY OnChain Analysis</h3><p>Traceable, auditable transaction flows.</p><span class="num">24/7</span></div>
<div class="wcard"><h3>Founded</h3><p>Regulated since day one.</p><span class="num">2018</span></div>
</div>
<div class="darkband">
<div class="glass"><span class="tag">USDT/USD</span><h3>Trading Pair</h3><span class="price">1.0002</span><span class="up">▲ 0.03%</span></div>
<div class="glass"><span class="tag">BTC/USDT</span><h3>Trading Pair</h3><span class="price">64,210.5</span><span class="up">▲ 1.24%</span></div>
<div class="glass"><span class="tag">Compliance</span><h3>US · SG · TW Licensed</h3><span class="price">FinCEN · MAS · FSC</span></div>
</div>
<footer>
<span>© XREX</span>
<span>Pay · RegTech · Resources · Company</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3264f0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3264f0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9db4f3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #252a39; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3264f0; color: #252a39;
border: 1px solid #252a39; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3264f0; color: #f5f5f5;
border: 1px solid #517bf1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9db4f3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #305bd3; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#101218; box-sizing:border-box;
font-family:"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
nav { flex:0 0 60px; height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#252a39; }
.brand { font-size:16px; font-weight:700; color:#ffffff; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:26px; font-size:13px; color:#ffffff; }
.navlinks span.active { color:#3264f0; }
.btn-outline { background:transparent; color:#3264f0; border:1px solid #3264f0; border-radius:4px;
height:32px; padding:0 16px; font-size:12px; font-weight:500; white-space:nowrap; font-family:inherit; }
.hero { flex:0 0 168px; background:#252a39; display:flex; align-items:center; gap:36px; padding:0 40px; }
.hero .text { display:flex; flex-direction:column; gap:8px; max-width:430px; }
.eyebrow { font-size:13px; font-weight:400; color:#3264f0; }
.hero h1 { margin:0; font-size:26px; font-weight:700; line-height:1.25; color:#f5f5f7; letter-spacing:-0.3px; }
.hero p { margin:0; font-size:12px; color:#9099ab; line-height:1.5; }
.radar { position:relative; width:220px; height:120px; border-radius:8px; flex:0 0 220px;
background:linear-gradient(160deg,#171a24,#2a3350); overflow:hidden; }
.radar .grid { position:absolute; inset:0; background-image:
repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 20px),
repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 20px); }
.box { position:absolute; border:1.5px solid #3264f0; border-radius:2px; }
.box::before { content:attr(data-label); position:absolute; top:-14px; left:0; font-size:8px; color:#8fb0ff;
background:rgba(50,100,240,0.25); padding:1px 4px; border-radius:2px; white-space:nowrap; }
.b1 { top:22px; left:24px; width:52px; height:36px; }
.b2 { top:52px; left:120px; width:44px; height:58px; }
.b3 { top:16px; left:160px; width:38px; height:30px; }
.content { flex:1; background:#ffffff; padding:20px 40px 0; min-height:0; }
.content .heading { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.content .heading h2 { margin:0; font-size:18px; font-weight:400; color:#101218; }
.content .heading span { font-size:12px; color:#3264f0; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.stat { background:#ffffff; border-radius:10px; border:1px solid #e7e7e7; padding:12px 14px; }
.stat .k { font-size:20px; font-weight:700; color:#101218; }
.stat .l { font-size:10.5px; color:#7e8390; margin-top:2px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#ffffff; border-radius:10px; padding:14px 16px;
box-shadow:rgba(141,141,141,0.15) 10px 10px 28px 0px; display:flex; flex-direction:column; gap:6px; }
.card .tag { font-size:10px; font-weight:500; color:#3264f0; text-transform:uppercase; letter-spacing:0.05em; }
.card h3 { margin:0; font-size:14px; font-weight:700; color:#101218; }
.card p { margin:0; font-size:11px; color:#7e8390; line-height:1.4; }
footer { flex:0 0 40px; background:#252a39; padding:0 40px; display:flex; align-items:center;
justify-content:space-between; font-size:10.5px; color:#9099ab; }
</style></head>
<body>
<div class="page">
<nav>
<span class="brand">Nota AI</span>
<div class="navlinks"><span class="active">AI Solutions</span><span>Tech Blog</span><span>Company</span></div>
<button class="btn-outline">Contact Us</button>
</nav>
<div class="hero">
<div class="text">
<span class="eyebrow">AI Solutions</span>
<h1>Industry-tailored Vision Intelligence</h1>
<p>On-device AI that runs fast, accurate, and efficient — from cameras to vehicles to edge hardware.</p>
</div>
<div class="radar">
<div class="grid"></div>
<div class="box b1" data-label="Vehicle 98%"></div>
<div class="box b2" data-label="Person 96%"></div>
<div class="box b3" data-label="Sign 91%"></div>
</div>
</div>
<div class="content">
<div class="heading"><h2>High-performance AI on any device</h2><span>Read More →</span></div>
<div class="stats">
<div class="stat"><div class="k">2.4ms</div><div class="l">Inference latency</div></div>
<div class="stat"><div class="k">98.6%</div><div class="l">Detection accuracy</div></div>
<div class="stat"><div class="k">62 FPS</div><div class="l">Edge throughput</div></div>
<div class="stat"><div class="k">-71%</div><div class="l">Model size reduction</div></div>
</div>
<div class="cards">
<div class="card"><span class="tag">ITS</span><h3>Traffic Intelligence</h3><p>Real-time vehicle and incident detection for smart intersections.</p></div>
<div class="card"><span class="tag">DMS & FR</span><h3>Driver Monitoring</h3><p>On-device face and drowsiness recognition for safer fleets.</p></div>
<div class="card"><span class="tag">Surveillance</span><h3>Industrial Safety</h3><p>Edge-optimized models for restricted-zone monitoring.</p></div>
</div>
</div>
<footer>
<span>© Nota AI</span>
<span>NetsPresso® · Nota AI AI Solutions</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0a; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0a; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #faff69; color: #0a0a0a;
border: none; border-radius: 8px; padding: 12px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #1a1a1a; color: #ffffff;
border: 1px solid #faff69; border-radius: 8px;
padding: 12px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #1a1a1a; color: #ffffff;
border: 1px solid #474747; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; background: #1a1a1a; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0a0a; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:16px; font-weight:700; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#cccccc; }
.btnp { background:#faff69; color:#0a0a0a; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:600; }
.hero { display:flex; align-items:center; gap:26px; padding:14px 32px; height:250px; }
.hero .left { flex:1; }
.hero h1 { font-size:34px; font-weight:700; letter-spacing:-1.4px; margin:0 0 10px; line-height:1.08; }
.hero p { font-size:14px; color:#cccccc; margin:0 0 16px; max-width:340px; }
.codebox { flex:1; background:#1a1a1a; border-radius:12px; padding:18px; height:180px; }
.codebox pre { margin:0; font-size:12px; font-family:"Courier New", monospace; line-height:1.7; color:#cccccc; }
.codebox .kw { color:#faff69; } .codebox .fn { color:#3b82f6; } .codebox .str { color:#22c55e; }
.stats { display:flex; gap:60px; padding:6px 32px 18px; }
.stat b { display:block; color:#faff69; font-size:38px; font-weight:700; letter-spacing:-1.2px; }
.stat span { font-size:12px; color:#888888; }
.yband { margin:0 32px; background:#faff69; color:#0a0a0a; border-radius:12px; padding:22px 32px;
display:flex; align-items:center; justify-content:space-between; }
.yband h2 { font-size:22px; font-weight:700; margin:0; letter-spacing:-0.6px; }
.yband .btnk { background:#0a0a0a; color:#faff69; border-radius:8px; padding:9px 18px; font-size:13px; font-weight:600; }
</style></head>
<body>
<nav>
<div class="brand">ClickHouse</div>
<div class="navlinks"><span>Product</span><span>Use Cases</span><span>Pricing</span><span>Resources</span></div>
<span class="btnp">Get Started</span>
</nav>
<div class="hero">
<div class="left">
<h1>The leading database<br>for AI</h1>
<p>The fastest and most resource-efficient open-source database for real-time analytics.</p>
<span class="btnp">Get Started</span>
</div>
<div class="codebox">
<pre><span class="kw">SELECT</span> country, <span class="fn">count</span>(*) <span class="kw">AS</span> events
<span class="kw">FROM</span> analytics.pageviews
<span class="kw">WHERE</span> ts > <span class="str">now() - INTERVAL 1 DAY</span>
<span class="kw">GROUP BY</span> country
<span class="kw">ORDER BY</span> events <span class="kw">DESC</span>
<span class="kw">LIMIT</span> 10</pre>
</div>
</div>
<div class="stats">
<div class="stat"><b>779+</b><span>Contributors</span></div>
<div class="stat"><b>2.8k+</b><span>Companies in production</span></div>
<div class="stat"><b>47k+</b><span>GitHub stars</span></div>
</div>
<div class="yband">
<h2>Built for every modern data challenge</h2>
<span class="btnk">Start free</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #098782; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: transparent; color: #098782;
border: 1px solid #098782; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c0c0c0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d0091c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f5; color:#222222; box-sizing:border-box;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
a { text-decoration:none; }
nav { height:64px; background:#ffffff; border-bottom:1px solid #eceded; display:flex;
align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:19px; font-weight:700; letter-spacing:-0.4px; color:#222222; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:12px; font-weight:500; letter-spacing:0.3px; text-transform:uppercase; color:#6f7072; }
.navlinks span.active { color:#098782; }
.navsearch { width:150px; height:32px; border-radius:9999px; background:#fafafa; border:1px solid #eceded;
display:flex; align-items:center; padding:0 14px; font-size:11px; color:#888888; }
.catstrip { height:38px; background:#ffffff; border-bottom:1px solid #eceded; display:flex;
align-items:center; gap:22px; padding:0 32px; }
.catstrip span { font-size:11px; font-weight:500; letter-spacing:0.3px; text-transform:uppercase; color:#6f7072; }
.catstrip span.on { color:#098782; border-bottom:2px solid #098782; padding-bottom:11px; }
.hero { height:150px; background:#098782; color:#ffffff; display:flex; flex-direction:column;
justify-content:center; padding:0 32px; }
.hero h1 { margin:0 0 6px; font-size:26px; font-weight:600; letter-spacing:-0.3px; }
.hero p { margin:0 0 14px; font-family:Georgia, serif; font-size:14px; color:#dff2f1; max-width:480px; }
.hero .btn { display:inline-block; width:fit-content; background:#d0091c; color:#fff; font-size:12px;
font-weight:600; letter-spacing:0.5px; text-transform:uppercase; padding:10px 20px; border-radius:4px; }
.shelf { padding:16px 32px; }
.shelf h2 { font-size:14px; font-weight:600; color:#222222; margin:0 0 10px; }
.grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; }
.card { background:#ffffff; border-radius:8px; overflow:hidden; position:relative; }
.cover { height:120px; position:relative; }
.badge { position:absolute; top:6px; left:6px; background:#d0091c; color:#fff; font-size:9px;
font-weight:700; letter-spacing:0.4px; text-transform:uppercase; padding:2px 6px; border-radius:4px; }
.card .info { padding:8px 10px; }
.card .t { font-size:11.5px; font-weight:600; color:#222222; margin:0 0 2px; line-height:1.3; }
.card .a { font-size:10px; color:#888888; margin:0 0 4px; }
.card .p { font-size:11px; color:#222222; }
.card .p.sale { color:#d0091c; }
footer { position:absolute; bottom:0; left:0; right:0; height:40px; background:#098782; color:#fff;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:10.5px; }
footer span { opacity:0.85; }
</style></head>
<body>
<nav>
<div class="brand">Europa Editions</div>
<div class="navlinks">
<span class="active">FICTION</span><span>NONFICTION</span><span>WORLD NOIR</span><span>ABOUT</span>
</div>
<div class="navsearch">Search books…</div>
</nav>
<div class="catstrip">
<span class="on">All</span><span>Literary Fiction</span><span>Translated</span><span>Mystery</span><span>Essays</span><span>New Releases</span>
</div>
<div class="hero">
<h1>Stories that cross borders</h1>
<p>A small press for literary fiction in translation — chosen with care, printed with distinction.</p>
<a class="btn">Shop New Arrivals</a>
</div>
<div class="shelf">
<h2>New This Season</h2>
<div class="grid">
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#0f5f5c,#146b67)"><span class="badge">New</span></div>
<div class="info"><p class="t">The Quiet Harbor</p><p class="a">Elena Marchetti</p><p class="p">$17.00</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#8a2f2f,#a83c3c)"></div>
<div class="info"><p class="t">Letters from Trieste</p><p class="a">Giulio Ferro</p><p class="p sale">$12.50</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#2e2e3a,#454558)"></div>
<div class="info"><p class="t">A Room of Salt</p><p class="a">M. Okonkwo</p><p class="p">$16.00</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#42a19d,#098782)"><span class="badge">New</span></div>
<div class="info"><p class="t">The Long Coastline</p><p class="a">S. Vasquez</p><p class="p">$15.50</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#616161,#3d3d3d)"></div>
<div class="info"><p class="t">Winter in Naples</p><p class="a">R. Conti</p><p class="p">$18.00</p></div></div>
</div>
</div>
<footer><span>© Europa Editions — Independent publishing since 2005</span><span>Fiction · Nonfiction · World Noir</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; background: #da0011; color: #ffffff;
border: none; border-radius: 2px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; background: #ffffff; color: #1a1a1a;
border: 1px solid #da0011; border-radius: 2px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e8f5e9; color: #2e7d32;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.utility{height:32px;background:#1a1a1a;color:#999;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 24px;font-size:12px;}
.nav{height:52px;background:#da0011;display:flex;align-items:center;padding:0 24px;gap:20px;}
.logo{color:#fff;font-size:20px;font-weight:700;width:80px;}
.search{flex:1;height:32px;background:#fff;border-radius:2px;display:flex;align-items:center;padding:0 12px;font-size:13px;color:#999;}
.searchbtn{background:#a8000d;color:#fff;font-size:13px;font-weight:700;padding:6px 14px;border-radius:2px;margin-left:-4px;}
.icons{color:#fff;font-size:13px;font-weight:700;}
.megabar{background:#fff;border-top:3px solid #da0011;display:flex;gap:24px;padding:8px 24px;font-size:13px;font-weight:700;color:#1a1a1a;box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.grid{display:flex;gap:0;padding:16px 24px;}
.card{flex:1;border:1px solid #dddddd;padding:12px;margin-right:1px;}
.thumb{aspect-ratio:1/1;background:#f5f5f5;margin-bottom:8px;}
.manu{font-size:12px;color:#666;}
.title{font-size:13px;font-weight:700;margin:4px 0;}
.partno{font-family:'Courier New',monospace;font-size:12px;color:#333;}
.stock{display:inline-block;background:#e8f5e9;color:#2e7d32;font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:2px;margin-top:6px;}
.price{font-size:18px;font-weight:700;margin-top:6px;}
.addbtn{background:#da0011;color:#fff;font-size:13px;font-weight:700;padding:8px 12px;text-align:center;margin-top:8px;border-radius:2px;}
.breadcrumb{font-size:12px;color:#666;padding:8px 24px 0;}
</style>
<div class="utility">GBP £ Sign In / Register Track Order</div>
<div class="nav">
<div class="logo">RS RS Group</div>
<div class="search">Search 40,000+ components, part numbers...</div>
<div class="searchbtn">🔍</div>
<div class="icons">Account Basket</div>
</div>
<div class="megabar"><span>Semiconductors</span><span>Passive Components</span><span>Connectors</span><span>Test & Measurement</span><span>Automation</span></div>
<div class="breadcrumb">Home > Semiconductors > MOSFETs</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="manu">Infineon</div><div class="title">N-Channel MOSFET 60V</div><div class="partno">RS Stock No. 812-4471</div><span class="stock">In stock: 4,821</span><div class="price">$0.42</div><div class="addbtn">Add to Basket</div></div>
<div class="card"><div class="thumb"></div><div class="manu">Vishay</div><div class="title">P-Channel MOSFET 30V</div><div class="partno">RS Stock No. 812-5502</div><span class="stock">In stock: 96</span><div class="price">$0.58</div><div class="addbtn">Add to Basket</div></div>
<div class="card"><div class="thumb"></div><div class="manu">ON Semi</div><div class="title">Dual N-Channel MOSFET</div><div class="partno">RS Stock No. 812-6013</div><span class="stock">In stock: 1,204</span><div class="price">$1.15</div><div class="addbtn">Add to Basket</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #e3000f; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #222222;
border: 1px solid #e3000f; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #e3000f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:Arial,Helvetica,system-ui,sans-serif; color:#222; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e6e6e6;}
.logo{font-size:20px;font-weight:700;color:#e3000f;}
.icons{display:flex;gap:16px;font-size:14px;color:#222;}
.hero{background:#f5f5f5;padding:26px 32px;text-align:center;}
.hero h1{font-size:30px;font-weight:700;margin:0 0 10px;}
.hero p{font-size:14px;color:#333;margin:0 auto 16px;max-width:420px;}
.btn{display:inline-block;background:#e3000f;color:#fff;font-size:16px;font-weight:600;padding:12px 30px;border-radius:8px;}
.sec{padding:20px 32px 0;}
.sectitle{font-size:18px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:20px;}
.card{width:196px;background:#fff;border:1px solid #d9d9d9;border-radius:8px;padding:16px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#e3000f;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.badge.new{background:#f5a623;color:#222;}
.thumb{aspect-ratio:1/1;background:#f5f5f5;border-radius:4px;margin-bottom:8px;}
.ptitle{font-size:16px;font-weight:600;margin:0;}
.stars{color:#f5a623;font-size:12px;margin:4px 0;}
.pprice{font-size:16px;font-weight:600;}
.guarantee{margin:18px 32px 0;background:#fff;border:1px solid #d9d9d9;border-radius:8px;padding:16px;font-size:14px;color:#666;}
.guarantee b{color:#222;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#f5f5f5;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#666;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Klutz</div>
<div class="icons"><span>Search</span><span>Cart (0)</span></div>
</div>
<div class="hero">
<h1>The book comes with everything you need.</h1>
<p>Bright, direct, kid-tested craft kits — no assembly instructions required beyond page one.</p>
<div class="btn">Shop Kits</div>
</div>
<div class="sec">
<div class="sectitle">Klutz Certified</div>
<div class="grid">
<div class="card"><div class="badge">Certified</div><div class="thumb" style="background:linear-gradient(135deg,#e3000f,#222)"></div><div class="ptitle">Friendship Bracelets Book Kit</div><div class="stars">★★★★★ 4.8</div><div class="pprice">$16.99</div></div>
<div class="card"><div class="badge new">New</div><div class="thumb" style="background:linear-gradient(135deg,#f5a623,#e3000f)"></div><div class="ptitle">Window Art Suncatchers</div><div class="stars">★★★★★ 4.9</div><div class="pprice">$19.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#222,#e3000f)"></div><div class="ptitle">Lego Chain Reactions</div><div class="stars">★★★★★ 4.7</div><div class="pprice">$21.99</div></div>
</div>
</div>
<div class="guarantee"><b>The Klutz Guarantee:</b> if it's not kid-tested and parent-approved, we don't ship it.</div>
<div class="footer"><span>About Klutz · Activities</span><span>Help & Returns</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0b0b0b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0b0b0b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #0b0b0b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.06em; background: #ea212e; color: #ffffff;
border: none; border-radius: 2px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; background: #ffffff; color: #0b0b0b;
border: 1px solid #ea212e; border-radius: 2px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #0b0b0b;
border: 1px solid #c2c2c2; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.27; letter-spacing: 0.06em; background: #ea212e; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Exo 2',Arial,Helvetica,sans-serif; background:#ffffff; color:#0b0b0b; }
*{box-sizing:border-box;}
.promo{height:36px;background:#ea212e;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e2e2e2;}
.logo{font-size:19px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;letter-spacing:.04em;}
.hero{height:250px;background:#2d3142;display:flex;align-items:center;padding:0 44px;color:#fff;}
.left{width:52%;}
.left h1{font-size:38px;font-weight:700;line-height:1.1;margin:0 0 14px;text-transform:uppercase;}
.left p{font-size:14px;color:#c7cad4;max-width:340px;margin:0 0 18px;}
.btn{display:inline-block;background:#ea212e;color:#fff;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:14px 28px;border-radius:2px;}
.right{width:44%;height:160px;border-radius:8px;background:linear-gradient(135deg,#4f5d75,#2d3142);}
.section{padding:22px 40px 0;}
.sectitle{font-size:20px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;border:1px solid #e2e2e2;border-radius:4px;padding:14px;position:relative;}
.thumb{height:100px;background:#f0f0f0;margin-bottom:8px;}
.badge{position:absolute;top:6px;left:6px;background:#ea212e;color:#fff;font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;}
.ptitle{font-size:16px;font-weight:500;}
.pprice{font-size:18px;font-weight:600;margin-top:6px;}
.trustbar{display:flex;gap:30px;margin-top:18px;padding-top:14px;border-top:1px solid #e2e2e2;font-size:12px;color:#4d4d4d;}
</style>
<div class="promo">Ergonomic Chairs Engineered for Performance</div>
<div class="nav">
<div class="logo">X Chair</div>
<div class="navlinks"><div>Task Chairs</div><div>Executive</div><div>Compare</div></div>
</div>
<div class="hero">
<div class="left">
<h1>Sit like it's a cockpit.</h1>
<p>Ergonomic chairs engineered with the precision of an instrument panel.</p>
<div class="btn">Shop Chairs</div>
</div>
<div class="right"></div>
</div>
<div class="section">
<div class="sectitle">Featured Chairs</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb"></div><div class="ptitle">X4 Executive Chair</div><div class="pprice">$999</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">X2 K-Sport Chair</div><div class="pprice">$849</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">X1 Elemax Chair</div><div class="pprice">$599</div></div>
</div>
<div class="trustbar"><div>Lifetime Warranty</div><div>BIFMA Certified</div><div>Free Shipping</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1351f9; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1351f9; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8fabf7; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3a6cff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1351f9; color: #ffffff;
border: 1px solid #3a6cff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1351f9; color: #f5f5f5;
border: 1px solid #376bf8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8fabf7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1955fa; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0e1a; color:#ffffff; box-sizing:border-box;
font-family:Pretendard,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:700; font-size:17px; color:#1351f9; }
.navlinks { display:flex; gap:20px; font-size:15px; color:#a7aec0; }
.navlinks span.on { color:#ffffff; position:relative; }
.btn { background:#1351f9; color:#ffffff; border-radius:6px; padding:10px 20px; font-size:15px; font-weight:600; }
.billboard { height:180px; margin:0 32px 18px; border-radius:6px; background:linear-gradient(100deg,#0a0e1a,#132a5c 60%,#1351f9);
position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; overflow:hidden; }
.billboard::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent,rgba(10,14,26,0.9)); }
.billboard .b { position:relative; z-index:1; }
.live { background:#f5444c; color:#ffffff; border-radius:4px; padding:1px 6px; font-size:11px; font-weight:700; margin-bottom:8px; display:inline-block; }
.billboard h2 { font-size:26px; font-weight:700; margin:0 0 6px; }
.billboard .row { font-size:12px; color:#a7aec0; }
.row-title { padding:0 32px; font-size:20px; font-weight:700; margin:0 0 10px; }
.grid { display:flex; gap:10px; padding:0 32px 20px; }
.poster { width:110px; height:156px; border-radius:6px; flex-shrink:0; position:relative; overflow:hidden; }
.poster .prog { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,0.24); }
.poster .prog i { display:block; height:3px; background:#1351f9; }
.p1 { background:linear-gradient(160deg,#1a2a50,#2a4a90); }
.p2 { background:linear-gradient(160deg,#251a40,#4a2a80); }
.p3 { background:linear-gradient(160deg,#1a3040,#2a5a80); }
.p4 { background:linear-gradient(160deg,#151a30,#304a70); }
.p5 { background:linear-gradient(160deg,#20203a,#3a3a70); }
.p6 { background:linear-gradient(160deg,#101830,#2a4470); }
</style></head>
<body>
<nav>
<span class="brand">Wavve</span>
<div class="navlinks"><span class="on">Home</span><span>Drama</span><span>Variety</span><span>Movies</span><span>Live TV</span></div>
<span class="btn">Subscribe</span>
</nav>
<div class="billboard"><div class="b">
<span class="live">LIVE</span>
<h2>Midnight Harbor Season 2</h2>
<div class="row">2026 · Drama · Episode 4 now streaming</div>
</div></div>
<div class="row-title">Continue watching</div>
<div class="grid">
<div class="poster p1"><div class="prog"><i style="width:70%"></i></div></div>
<div class="poster p2"><div class="prog"><i style="width:40%"></i></div></div>
<div class="poster p3"><div class="prog"><i style="width:88%"></i></div></div>
<div class="poster p4"><div class="prog"><i style="width:20%"></i></div></div>
<div class="poster p5"><div class="prog"><i style="width:55%"></i></div></div>
<div class="poster p6"><div class="prog"><i style="width:10%"></i></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ff00ff; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #ff00ff;
border: 1px solid #ff00ff; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #003388; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Full Focus</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:Verdana,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #eee;}
.logo{font-size:17px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:700;text-transform:uppercase;}
.cta-nav{background:#ff00ff;color:#fff;border:none;border-radius:8px;padding:8px 18px;font-size:13px;font-weight:700;}
.hero{display:flex;align-items:center;padding:34px 32px;gap:30px;}
.hero-copy{flex:1;}
h1{font-size:40px;font-weight:700;line-height:1.2;letter-spacing:-0.5px;margin:0 0 12px;}
.sub{font-size:15px;line-height:1.5;color:#32373c;margin:0 0 18px;max-width:400px;}
.btn{background:#ff00ff;color:#fff;border:none;border-radius:8px;padding:14px 26px;font-size:15px;font-weight:700;}
.planner{width:300px;height:220px;background:#fafae1;border-radius:12px;position:relative;padding:16px;}
.page{position:absolute;top:16px;left:16px;width:130px;height:190px;background:#fff;border:2px solid #313131;border-radius:4px;padding:10px;}
.page .line{height:2px;background:#dedede;margin:10px 0;}
.page .big3{font-size:10px;font-weight:700;color:#330968;text-transform:uppercase;}
.page2{position:absolute;top:30px;left:150px;width:130px;height:190px;background:#003388;border-radius:4px;}
.featured-badge{position:absolute;top:-8px;right:-8px;background:#ff00ff;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:4px 12px;border-radius:9999px;}
.feature{background:#fafae1;padding:26px 32px;display:flex;gap:20px;}
.fcol{flex:1;text-align:center;}
.ficon{width:32px;height:32px;background:#ff00ff;border-radius:50%;margin:0 auto 8px;}
.fcol h3{font-size:14px;font-weight:700;margin:0 0 4px;}
.fcol p{font-size:12px;color:#32373c;margin:0;}
.products{padding:20px 32px 0;}
.products h2{font-size:20px;font-weight:700;margin:0 0 14px;}
.grid{display:flex;gap:16px;}
.card{flex:1;background:#fff;border:1px solid #eee;border-radius:8px;padding:14px;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#ff00ff;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:2px 8px;border-radius:4px;}
.card-img{background:#003388;border-radius:6px;height:100px;}
.card-img.b{background:#330968;}
.card-img.c{background:#004a59;}
.card-title{font-size:16px;font-weight:700;margin-top:10px;}
.card-price{font-size:20px;font-weight:700;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Full Focus</div>
<div class="navlinks"><span>Planners</span><span>System</span><span>Coaching</span><span>Resources</span></div>
<button class="cta-nav">Start the System</button>
</div>
<div class="hero">
<div class="hero-copy">
<h1>Win the day with<br>your Big 3</h1>
<p class="sub">A paper planning system built on decades of research into what actually moves your most important goals forward.</p>
<button class="btn">Shop the Planner</button>
</div>
<div class="planner">
<div class="featured-badge">Bestseller</div>
<div class="page"><div class="big3">Big 3</div><div class="line"></div><div class="line"></div><div class="line"></div></div>
<div class="page2"></div>
</div>
</div>
<div class="feature">
<div class="fcol"><div class="ficon"></div><h3>Roles & Goals</h3><p>Define what matters</p></div>
<div class="fcol"><div class="ficon"></div><h3>Weekly Preview</h3><p>Plan with intention</p></div>
<div class="fcol"><div class="ficon"></div><h3>Daily Big 3</h3><p>Execute what counts</p></div>
</div>
<div class="products">
<h2>Shop the System</h2>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="card-img"></div><div class="card-title">Full Focus Planner</div><div class="card-price">$79.99</div></div>
<div class="card"><div class="card-img b"></div><div class="card-title">Guided Version</div><div class="card-price">$89.99</div></div>
<div class="card"><div class="card-img c"></div><div class="card-title">Companion Notebook</div><div class="card-price">$24.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8b8b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c8a35a; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a0a; color: #c8a35a;
border: 1px solid #c8a35a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0a0a; color: #f5f5f5;
border: 1px solid #303030; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b8b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #282217; color: #c8a35a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A0A0A; color:#EDE9E2; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:Georgia, "Times New Roman", serif; }
.topbar { height:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-bottom:1px solid #2A2620; }
.word { color:#C8A35A; font-size:20px; font-weight:700; letter-spacing:1px; }
.eyebrow { font-size:9px; letter-spacing:2px; color:#9E988C; margin-top:2px; }
.main { display:flex; height:calc(640px - 64px); }
.cardcol { width:400px; padding:22px; display:flex; flex-direction:column; gap:14px; }
.batch { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; border:1px solid #2A2620; border-radius:4px; background:#141414; }
.batch .lab { font-size:11px; letter-spacing:1.5px; color:#9E988C; }
.batch .cnt { font-size:15px; color:#C8A35A; }
.card { flex:1; border:1px solid #2A2620; border-radius:6px; background:#100F0C; overflow:hidden; display:flex; flex-direction:column; }
.photo { height:280px; background:linear-gradient(155deg,#3a3226,#1c1a17 70%); position:relative; }
.seal { position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; border:1px solid #C8A35A; background:rgba(10,10,10,0.6); color:#C8A35A; display:flex; align-items:center; justify-content:center; font-size:13px; }
.cbody { padding:16px 18px; flex:1; display:flex; flex-direction:column; gap:10px; }
.name { font-size:25px; font-weight:700; }
.name span { font-size:16px; font-weight:400; color:#9E988C; }
.rule { width:28px; height:1px; background:#C8A35A; }
.cred { font-size:13px; color:#9E988C; }
.cred b { color:#C8A35A; margin-right:6px; }
.actions { display:flex; gap:16px; align-items:center; margin-top:auto; padding-top:6px; }
.abtn { border-radius:50%; display:flex; align-items:center; justify-content:center; }
.a-pass { width:44px; height:44px; border:1px solid #2A2620; color:#9E988C; font-size:15px; }
.a-heart { width:52px; height:52px; border:1px solid #C8A35A; color:#C8A35A; font-size:20px; }
.a-msg { width:44px; height:44px; border:1px solid #2A2620; color:#C8A35A; font-size:15px; }
.side { flex:1; padding:34px 34px 34px 8px; display:flex; flex-direction:column; gap:22px; }
.concierge { background:#1C1A17; border:1px solid #2A2620; border-left:2px solid #C8A35A; border-radius:4px; padding:18px 20px; }
.cc-head { font-size:11px; letter-spacing:1.5px; color:#C8A35A; margin-bottom:10px; }
.cc-body { font-style:italic; font-size:16px; line-height:1.6; }
.cta { color:#C8A35A; font-size:12px; margin-top:12px; letter-spacing:0.6px; }
.cta-btn { align-self:flex-start; background:#C8A35A; color:#1A1408; padding:15px 30px; border-radius:3px; font-size:13px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; }
.out-btn { align-self:flex-start; border:1px solid #C8A35A; color:#C8A35A; padding:14px 26px; border-radius:3px; font-size:13px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; }
</style></head>
<body>
<div class="topbar"><div class="word serif">The League (iOS)</div><div class="eyebrow">MEMBERS ONLY</div></div>
<div class="main">
<div class="cardcol">
<div class="batch"><span class="lab">TODAY'S BATCH</span><span class="cnt serif">7 Prospects</span></div>
<div class="card">
<div class="photo"><div class="seal">★</div></div>
<div class="cbody">
<div class="name serif">Eleanor <span>29</span></div>
<div class="rule"></div>
<div class="cred"><b>◦</b>VP Strategy · Goldman Sachs</div>
<div class="cred"><b>◦</b>Harvard Business School</div>
<div class="cred"><b>◦</b>Tribeca, New York</div>
<div class="actions">
<div class="abtn a-pass">✕</div>
<div class="abtn a-heart">♥</div>
<div class="abtn a-msg">✉</div>
</div>
</div>
</div>
</div>
<div class="side">
<div class="concierge">
<div class="cc-head">★ YOUR CONCIERGE</div>
<div class="cc-body serif">I think you and Eleanor would hit it off — you both ran the New York Marathon and studied at HBS. Worth a quiet introduction.</div>
<div class="cta">Make the introduction →</div>
</div>
<div class="cta-btn">Send Heart</div>
<div class="out-btn">View Profile</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #786efa; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #786efa; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bdb8f7; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #32353f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #786efa; color: #32353f;
border: 1px solid #32353f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #786efa; color: #f5f5f5;
border: 1px solid #8c84f9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bdb8f7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6d65dc; color: #32353f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbfbfb; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { position:relative; height:52px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; background:#282b32; }
.brand { color:#ffffff; font-size:15px; font-weight:600; letter-spacing:-0.2px; margin:0; }
.navlinks { display:flex; gap:24px; }
.navlinks span { color:#ffffff; font-size:13px; font-weight:500; opacity:0.9; }
.navlinks span.dim { opacity:0.5; }
.hero { position:relative; background:#282b32; padding:22px 32px 26px; display:flex; flex-direction:column; gap:12px; }
.hero h1 { color:#ffffff; font-size:30px; font-weight:600; line-height:1.28; margin:0; max-width:560px; letter-spacing:-0.6px; }
.hero p { color:#c7c9cf; font-size:13px; margin:0; max-width:460px; line-height:1.5; }
.tagrow { display:flex; gap:8px; }
.tag-active { background:#786efa; color:#ffffff; border-radius:22px; padding:5px 12px; font-size:11px; font-weight:400; }
.tag-filter { border:1px solid #737d8c; color:#737d8c; border-radius:22px; padding:5px 12px; font-size:11px; font-weight:400; }
.section { padding:22px 32px 8px; }
.section-label { font-size:20px; font-weight:600; margin:0 0 4px; letter-spacing:-0.3px; }
.section-sub { font-size:12px; color:#737d8c; margin:0; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:14px 32px 0; }
.card { background:#f6f6f9; padding:22px 20px; display:flex; flex-direction:column; gap:8px; border-left:1px solid #ffffff; }
.card:first-child { border-left:none; }
.card .tag { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#786efa; }
.card h3 { font-size:16px; font-weight:600; margin:0; line-height:1.3; }
.card p { font-size:12px; color:#3a3a3a; margin:0; line-height:1.5; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #e6e6e6; padding:12px 32px;
display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#737d8c; background:#ffffff; }
</style></head>
<body>
<nav>
<p class="brand">42dot</p>
<div class="navlinks"><span>Technology</span><span>Mobility</span><span class="dim">Research</span><span class="dim">Careers</span></div>
</nav>
<section class="hero">
<h1>We Are A Mobility AI Company</h1>
<p>The answer to mobility and everything — building the software brain of autonomous vehicles and fleets.</p>
<div class="tagrow">
<span class="tag-active">#LLM</span>
<span class="tag-filter">#SDV</span>
<span class="tag-filter">#Active Learning</span>
</div>
</section>
<section class="section">
<h2 class="section-label">Research & Technology</h2>
<p class="section-sub">Latest posts from the 42dot engineering blog</p>
</section>
<section class="cards">
<div class="card"><span class="tag">#Transformer</span><h3>42dot LLM 1.3B: A Compact Model for On-Vehicle Inference</h3><p>How a smaller foundation model keeps latency low enough for real-time driving decisions.</p></div>
<div class="card"><span class="tag">#3D Object Detection</span><h3>Continual Model Improvement Through Active Learning</h3><p>A pipeline that finds the hardest driving scenes first and retrains where it matters most.</p></div>
<div class="card"><span class="tag">#SDV</span><h3>The Software-Defined Fleet: One Stack, Every Vehicle</h3><p>Rethinking the vehicle as a platform that ships updates, not just miles.</p></div>
</section>
<footer>
<span>© 42dot</span>
<span>Technology · Mobility · Company · Careers</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #191919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #191919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #191919; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #5e5e5e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.12em; background: #e8144b; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.12em; background: #ffffff; color: #191919;
border: 1px solid #e8144b; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #191919;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5e5e5e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; background: #d72c0d; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#262626; font-family:Karla,'Nunito Sans',Arial,sans-serif; }
*{box-sizing:border-box;}
.promo{height:32px;background:#e8144b;color:#fff;font-size:11px;letter-spacing:.05em;text-align:center;line-height:32px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#fafafa;border-bottom:1px solid #ebebeb;}
.logo{font-family:Baskerville,Georgia,serif;font-size:22px;color:#191919;}
.navlinks{display:flex;gap:20px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#191919;}
.hero{height:180px;background:#fff4fa;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.hero h1{font-family:Baskerville,Georgia,serif;font-size:32px;color:#191919;margin:0 0 10px;}
.hero p{font-size:13px;color:#666;margin:0 0 14px;}
.cta{background:#e8144b;color:#fff;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:12px 26px;border-radius:9999px;}
.grid{display:flex;gap:14px;padding:16px 34px;}
.card{width:200px;}
.thumb{width:100%;height:100px;background:#f1f1f1;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#d72c0d;color:#fff;font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.ptitle{font-size:12px;color:#191919;margin-top:8px;}
.pprice{font-size:13px;font-weight:500;margin-top:3px;}
.sale{color:#d72c0d;}
.orig{color:#999;text-decoration:line-through;margin-left:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:64px;background:#191919;display:flex;align-items:center;justify-content:space-between;padding:0 34px;color:#dedede;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="promo">Free shipping over $50 · Gift-wrapped always</div>
<div class="nav">
<div class="logo">Petit Moments</div>
<div class="navlinks"><div>New In</div><div>Necklaces</div><div>Rings</div><div>Gifts</div></div>
</div>
<div class="hero">
<h1>Little pieces, big moments.</h1>
<p>Costume jewelry designed for everyday sparkle.</p>
<div class="cta">Shop New In</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#fae2e0,#e0b5b2)"><div class="badge">Sale</div></div><div class="ptitle">Cherry Drop Necklace</div><div class="pprice"><span class="sale">$24</span><span class="orig">$38</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a89cc8,#fff4fa)"></div><div class="ptitle">Lavender Hoop Set</div><div class="pprice">$32</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c1e6e6,#fae2e0)"></div><div class="ptitle">Teal Stack Ring</div><div class="pprice">$18</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#fbcd0a,#fae2e0)"></div><div class="ptitle">Gold Charm Bracelet</div><div class="pprice">$29</div></div>
</div>
<div class="footer"><span>© Petit Moments · Est. jewelry for everyone</span><span>Sign up for 10% off</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0114a7; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0114a7; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8790d2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0114a7; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0114a7; color: #f5f5f5;
border: 1px solid #2838b3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8790d2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0f21b3; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic",Arial,sans-serif; }
* { box-sizing:border-box; }
.app { width:960px; height:640px; display:flex; flex-direction:column; overflow:hidden; }
.hdr { flex:0 0 60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #eeeeee; }
.hdr .brand { font-size:18px; font-weight:700; }
.hdr .close { font-size:13px; color:#666666; }
.tabs { flex:0 0 52px; display:flex; padding:0 32px; border-bottom:1px solid #eeeeee; gap:28px; }
.tabitem { display:flex; align-items:center; font-size:16px; color:#8a8a8a; font-weight:400;
border-bottom:2px solid transparent; }
.tabitem.sel { color:#000000; font-weight:700; border-bottom-color:#4262ff; }
.hero { flex:0 0 190px; padding:22px 32px 0; }
.hero .kicker { font-size:13px; color:#666666; }
.hero .name { font-size:22px; font-weight:700; margin-top:4px; }
.hero .rate { font-size:44px; font-weight:700; letter-spacing:-0.22px; line-height:59.4px; margin-top:6px;
color:#0114a7; }
.hero .rate span { font-size:20px; font-weight:400; color:#000000; margin-left:6px; }
.hero .desc { font-size:16px; font-weight:400; line-height:normal; color:#333333; margin-top:6px; max-width:640px; }
.terms { flex:0 0 64px; display:flex; gap:10px; padding:14px 32px 0; }
.chip { height:32px; border:1px solid #dcdfe4; border-radius:6px; padding:0 12px; display:flex;
align-items:center; font-size:16px; color:#301e3f4d; color:#4a4a52; }
.chip.sel { background:#4262ff; border-color:#4262ff; color:#ffffff; font-weight:600; }
.actions { flex:0 0 74px; display:flex; align-items:center; gap:12px; padding:14px 32px 0; }
.btn-primary { height:48px; border-radius:10px; padding:0 28px; background:#0114a7; color:#ffffff;
font-size:16px; font-weight:400; display:flex; align-items:center; justify-content:center; border:none; }
.btn-compact { height:40px; border-radius:8px; padding:0 14px; background:#4262ff; color:#ffffff;
font-size:16px; font-weight:400; display:flex; align-items:center; justify-content:center; border:none; }
.fill { flex:1; }
.fullbtn { flex:0 0 60px; border-top:1px solid #eeeeee; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; font-size:18.72px; font-weight:700; color:#000000; }
.fullbtn .arrow { font-size:16px; color:#8a8a8a; }
</style></head>
<body>
<div class="app">
<div class="hdr"><div class="brand">K bank</div><div class="close">Deposit products</div></div>
<div class="tabs">
<div class="tabitem sel">Deposit</div>
<div class="tabitem">Savings</div>
<div class="tabitem">Card</div>
</div>
<div class="hero">
<div class="kicker">Free savings deposit</div>
<div class="name">Curious Saving</div>
<div class="rate">4.5<span>% annual interest, before tax</span></div>
<div class="desc">A flexible everyday savings account with no minimum balance. Interest accrues daily
and can be withdrawn anytime without penalty.</div>
</div>
<div class="terms">
<div class="chip">6 months</div>
<div class="chip sel">12 months</div>
<div class="chip">24 months</div>
</div>
<div class="actions">
<button class="btn-primary">Open account</button>
<button class="btn-compact">Calculate interest</button>
</div>
<div class="fill"></div>
<div class="fullbtn"><span>View all terms and conditions</span><span class="arrow">></span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f5; color: #21201f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f5; color: #21201f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 300; line-height: 1.25; margin: 0; color: #21201f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.06em; background: #21201f; color: #f7f7f5;
border: none; border-radius: 2px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.06em; background: transparent; color: #21201f;
border: 1px solid #21201f; border-radius: 2px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f7f7f5; color: #21201f;
border: 1px solid #c2c1c0; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.04em; background: #21201f; color: #f7f7f5;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f7f5; font-family:'Grosa',Arial,sans-serif; color:#363940; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d9d9d9;}
.logo{font-family:Georgia,serif;font-size:20px;font-weight:300;color:#21201f;}
.navlinks{display:flex;gap:20px;font-size:12px;letter-spacing:0.02em;color:#21201f;}
.hero{height:180px;background:#e5ccbc;display:flex;align-items:center;padding:0 40px;}
.h1{font-family:Georgia,serif;font-size:32px;font-weight:300;color:#21201f;margin:0 0 8px;}
.hsub{font-size:13px;color:#363940;margin:0;max-width:400px;}
.section{padding:18px 32px 0;}
.sectitle{font-size:12px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:#757575;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:198px;}
.thumb{height:130px;background:#fff;margin-bottom:6px;position:relative;overflow:hidden;}
.badge{position:absolute;top:0;left:0;font-size:9px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:#fff;background:#21201f;padding:3px 6px;}
.ring{position:absolute;left:50%;top:50%;width:50px;height:50px;border:5px solid #dfdace;border-radius:50%;transform:translate(-50%,-50%);}
.stone{position:absolute;left:50%;top:38%;width:14px;height:11px;background:#fff;transform:translate(-50%,-50%) rotate(45deg);}
.ptitle{font-size:13px;color:#21201f;}
.pprice{font-size:14px;font-weight:500;color:#21201f;margin-top:2px;}
.compare{font-size:12px;color:#757575;text-decoration:line-through;margin-left:6px;}
.swrow{display:flex;gap:6px;margin-top:6px;}
.sw{width:14px;height:14px;border-radius:50%;}
</style>
<div class="nav">
<div class="logo">Quince Fine Jew 2</div>
<div class="navlinks"><span>Rings</span><span>Necklaces</span><span>Earrings</span><span>Gifts</span></div>
</div>
<div class="hero">
<div><div class="h1">Radically Low Prices, Genuinely Fine Jewelry</div><div class="hsub">14k gold and natural stones sold direct — boutique quality without the boutique markup.</div></div>
</div>
<div class="section">
<div class="sectitle">New Arrivals</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">New</div><div class="ring" style="border-color:#e5ccbc;"></div><div class="stone" style="background:#c8d3f1;"></div></div><div class="ptitle">Sapphire Halo Ring</div><div class="pprice">$210.00<span class="compare">$340.00</span></div><div class="swrow"><div class="sw" style="background:#e5ccbc;"></div><div class="sw" style="background:#d4d4d4;"></div><div class="sw" style="background:#c8d3f1;"></div></div></div>
<div class="card"><div class="thumb"><div class="ring"></div><div class="stone" style="background:#fdd8d8;"></div></div><div class="ptitle">Pear Blush Pendant</div><div class="pprice">$165.00</div><div class="swrow"><div class="sw" style="background:#e5ccbc;"></div><div class="sw" style="background:#fdd8d8;"></div></div></div>
<div class="card"><div class="thumb"><div class="ring" style="border-color:#dfdace;"></div><div class="stone" style="background:#fff;"></div></div><div class="ptitle">Solitaire Stud Earrings</div><div class="pprice">$140.00</div><div class="swrow"><div class="sw" style="background:#dfdace;"></div><div class="sw" style="background:#bdbdbc;"></div></div></div>
<div class="card"><div class="thumb"><div class="badge" style="background:#af3535;">Sale</div><div class="ring"></div><div class="stone" style="background:#c8d3f1;"></div></div><div class="ptitle">Aquamarine Tennis Bracelet</div><div class="pprice">$310.00<span class="compare">$420.00</span></div><div class="swrow"><div class="sw" style="background:#c8d3f1;"></div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #1e1e1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #1e1e1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #1e1e1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767474; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #1e1e1f; color: #f9f9f9;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f9f9f9; color: #1e1e1f;
border: 1px solid #1e1e1f; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9f9f9; color: #1e1e1f;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767474; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #9d523a; color: #f9f9f9;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9f9f9; color:#1e1e1f; box-sizing:border-box; font-family:'Sohne', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; padding:0 32px; border-bottom:1px solid #dedede; background:#f9f9f9; }
.brand { font-size:19px; font-weight:400; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:24px; margin:0 auto; }
.navlinks div { font-size:14px; font-weight:500; letter-spacing:.3px; }
.navlinks div.active { color:#1e1e1f; border-bottom:2px solid #1e1e1f; padding-bottom:4px; }
.icons { display:flex; gap:12px; }
.icons span { width:40px; height:40px; border-radius:9999px; background:#efefed; display:flex; align-items:center; justify-content:center; font-size:15px; }
.hero { background:#efefed; padding:44px 32px; text-align:center; }
.hero h1 { font-size:40px; font-weight:400; letter-spacing:-0.5px; margin:0 0 10px; }
.hero p { font-size:15px; color:#4c4c4c; margin:0 0 18px; }
.hero .cta { display:inline-block; background:#1e1e1f; color:#f9f9f9; font-size:14px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; padding:14px 28px; border-radius:8px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:22px 32px; }
.card { background:#fff; border:1px solid #e0e0dd; border-radius:8px; overflow:hidden; }
.imgbox { aspect-ratio:4/3; }
.g1 { background:linear-gradient(150deg,#9d523a,#f6ede0); }
.g2 { background:linear-gradient(150deg,#1990c6,#88acc3); }
.g3 { background:linear-gradient(150deg,#1e1e1f,#767474); }
.info { padding:14px; }
.name { font-size:16px; font-weight:600; margin-bottom:4px; }
.price { font-size:18px; font-weight:600; }
.badge { display:inline-block; background:#9d523a; color:#f9f9f9; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; padding:2px 8px; border-radius:9999px; margin-bottom:8px; }
</style></head>
<body>
<nav>
<div class="brand">Fellow</div>
<div class="navlinks"><div class="active">Kettles</div><div>Grinders</div><div>Brewers</div><div>Accessories</div></div>
<div class="icons"><span>♡</span><span>🛍</span></div>
</nav>
<div class="hero">
<h1>Everyday Magic</h1>
<p>Thoughtfully designed tools for the daily ritual of great coffee</p>
<div class="cta">Shop New Arrivals</div>
</div>
<div class="grid">
<div class="card"><div class="imgbox g1"></div><div class="info"><span class="badge">New</span><div class="name">Stagg EKG+ Kettle</div><div class="price">$195</div></div></div>
<div class="card"><div class="imgbox g2"></div><div class="info"><div class="name">Ode Gen 2 Grinder</div><div class="price">$225</div></div></div>
<div class="card"><div class="imgbox g3"></div><div class="info"><div class="name">Clyde Dripper</div><div class="price">$70</div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c3c4c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffba00; color: #222222;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:'Nunito Sans', -apple-system, sans-serif; color:#555555; }
*{box-sizing:border-box;}
.nav{position:absolute; top:0; left:0; width:960px; height:72px; background:#fff; border-bottom:1px solid #e9e9e9; display:flex; align-items:center; justify-content:space-between; padding:0 40px;}
.logo{font-family:'Jost',sans-serif; font-size:20px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; color:#108474;}
.navlinks{display:flex; gap:22px; font-family:'Jost',sans-serif; font-size:14px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; color:#555555;}
.navlinks span:nth-child(1){color:#108474; border-bottom:2px solid #108474; padding-bottom:20px;}
.cart{color:#108474; font-size:18px;}
.hero{position:absolute; top:72px; left:0; width:960px; height:270px; background:#222222; color:#fff; display:flex; align-items:center; padding:0 50px;}
.heroText{width:460px;}
.headline{font-family:'Jost',sans-serif; font-size:34px; font-weight:600; line-height:1.15; margin-bottom:14px;}
.sub{font-size:15px; color:#dedede; margin-bottom:20px; width:400px;}
.btn{display:inline-block; background:#108474; color:#fff; font-family:'Jost',sans-serif; font-size:16px; font-weight:600; padding:14px 32px; border-radius:8px;}
.woodGraphic{position:absolute; right:70px; top:50px; width:300px; height:170px; border-radius:12px; background:repeating-linear-gradient(100deg,#3d2b1f,#3d2b1f 14px,#4f3a29 14px,#4f3a29 28px); opacity:0.9;}
.resinSwirl{position:absolute; width:100px; height:100px; border-radius:50%; background:radial-gradient(circle,#c1e6e6,#108474); top:30px; left:120px; opacity:0.85;}
.sec{position:absolute; top:342px; left:0; width:960px; height:298px; padding:28px 40px;}
.secTitle{font-family:'Jost',sans-serif; font-size:20px; font-weight:600; margin-bottom:16px; color:#222222;}
.grid{display:flex; gap:16px;}
.card{width:216px; background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.08); padding:14px; position:relative;}
.cardImg{width:100%; height:96px; border-radius:8px; background:#f2f2f2; display:flex; align-items:center; justify-content:center;}
.woodchip{width:70px; height:70px; border-radius:8px; background:repeating-linear-gradient(100deg,#8B5A2B,#8B5A2B 8px,#9c6a3a 8px,#9c6a3a 16px);}
.cardTitle{font-family:'Jost',sans-serif; font-size:16px; font-weight:600; margin-top:10px; color:#222222;}
.cardPrice{font-size:14px; margin-top:4px;}
.badge{position:absolute; top:8px; left:8px; background:#ffba00; color:#222222; font-size:10px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; padding:4px 8px; border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Keyway</div>
<div class="navlinks"><span>Shop</span><span>Wood</span><span>Resin</span><span>About</span></div>
<div class="cart">💼</div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">Live Edge.<br>Hand Poured.</div>
<div class="sub">Wood and resin pieces cut, sanded, and finished in our workshop, one grain at a time.</div>
<div class="btn">Shop Keyway</div>
</div>
<div class="woodGraphic"><div class="resinSwirl"></div></div>
</div>
<div class="sec">
<div class="secTitle">Workshop Favorites</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="cardImg"><div class="woodchip"></div></div><div class="cardTitle">Live Edge Board</div><div class="cardPrice">$89</div></div>
<div class="card"><div class="cardImg"><div class="woodchip" style="background:repeating-linear-gradient(100deg,#4a3222,#4a3222 8px,#5a4030 8px,#5a4030 16px)"></div></div><div class="cardTitle">Resin River Tray</div><div class="cardPrice">$65</div></div>
<div class="card"><div class="cardImg"><div class="woodchip" style="background:radial-gradient(circle,#a89cc8,#717d49)"></div></div><div class="cardTitle">Coaster Set</div><div class="cardPrice">$34</div></div>
<div class="card"><div class="cardImg"><div class="woodchip" style="background:repeating-linear-gradient(100deg,#5a4030,#5a4030 8px,#6d4f3a 8px,#6d4f3a 16px)"></div></div><div class="cardTitle">Cutting Board</div><div class="cardPrice">$54</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.33; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #3a3a3a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #aaccaa; color: #121212;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #aaccaa; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #3a3a3a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #aaccaa; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,Helvetica,sans-serif; color:#242424; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #dedede;}
.logo{font-size:20px;font-weight:300;letter-spacing:1px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;}
.navlinks div:nth-child(1){border-bottom:2px solid #121212;padding-bottom:24px;}
.hero{height:230px;background:#efefef;display:flex;align-items:center;padding:0 40px;}
.herotext{width:420px;}
.herotext h1{font-size:32px;font-weight:300;line-height:1.25;margin:0 0 14px;}
.herotext p{font-size:14px;color:#3a3a3a;margin:0 0 16px;max-width:340px;}
.btn{display:inline-block;background:#aaccaa;color:#121212;font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:12px 26px;border-radius:8px;}
.heroart{flex:1;height:170px;border-radius:12px;background:linear-gradient(135deg,#e1e3e4,#3a3a3a 70%);}
.grid{display:flex;gap:14px;padding:16px 30px 0;}
.card{width:210px;border-radius:12px;overflow:hidden;background:#fff;}
.thumb{height:130px;background:#efefef;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#aaccaa;color:#121212;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-radius:4px;padding:2px 8px;}
.cbody{padding:10px 14px;}
.ctitle{font-size:16px;font-weight:600;margin:0;}
.cprice{font-size:14px;margin-top:4px;}
.swatches{display:flex;gap:4px;margin-top:8px;}
.sw{width:20px;height:20px;border-radius:9999px;border:1px solid #dedede;}
.sw.on{border:2px solid #121212;}
.footer{position:absolute;bottom:0;left:0;right:0;height:96px;background:#121212;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Patrick TA Beauty</div>
<div class="navlinks"><div>Face</div><div>Eyes</div><div>Lips</div><div>Sets</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Editorial glamour, wearable every day.</h1>
<p>Professional makeup formulated for the camera and the everyday face.</p>
<div class="btn">Shop Best Sellers</div>
</div>
<div class="heroart"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">New</div></div><div class="cbody"><div class="ctitle">Major Sculpt Contour Duo</div><div class="cprice">$38</div><div class="swatches"><div class="sw on" style="background:#c7c7c7;"></div><div class="sw" style="background:#e1e3e4;"></div><div class="sw" style="background:#cccccc;"></div></div></div></div>
<div class="card"><div class="thumb" style="background:#dedede;"></div><div class="cbody"><div class="ctitle">Major Glow Highlighter</div><div class="cprice">$34</div><div class="swatches"><div class="sw on" style="background:#aaccaa;"></div><div class="sw" style="background:#dedede;"></div></div></div></div>
<div class="card"><div class="thumb" style="background:#c7c7c7;"></div><div class="cbody"><div class="ctitle">Creme Blush Duo</div><div class="cprice">$36</div><div class="swatches"><div class="sw on" style="background:#1990c6;"></div><div class="sw" style="background:#3a3a3a;"></div></div></div></div>
<div class="card"><div class="thumb" style="background:#efefef;"></div><div class="cbody"><div class="ctitle">Major Lip Gloss</div><div class="cprice">$24</div><div class="swatches"><div class="sw on" style="background:#333333;"></div><div class="sw" style="background:#aaccaa;"></div></div></div></div>
</div>
<div class="footer"><span>© Patrick TA Beauty</span><span>Shop About Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f8f9; color: #171717;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f8f9; color: #171717;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #171717; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9ca3af; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #005dcf; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #005dcf;
border: 1px solid #005dcf; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #171717;
border: 1px solid #e5e7eb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ca3af; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #d97706; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f8f9; font-family:'Inter',Arial,sans-serif; color:#171717; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #f1f5f9;}
.logo{font-size:19px;font-weight:700;color:#005dcf;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;color:#111827;}
.cta{background:#005dcf;color:#fff;font-size:12px;font-weight:600;padding:9px 20px;border-radius:8px;}
.hero{height:250px;display:flex;background:#f1f5f9;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 34px;}
.tag{background:#22c55e;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;border-radius:4px;padding:4px 10px;width:fit-content;margin-bottom:12px;}
.herotext h1{font-size:32px;font-weight:700;margin:0 0 12px;line-height:1.2;}
.herotext p{font-size:14px;color:#3f4142;margin:0 0 16px;max-width:290px;}
.btn{display:inline-block;background:#005dcf;color:#fff;font-size:13px;font-weight:600;padding:12px 26px;border-radius:8px;width:fit-content;}
.heroimg{width:54%;position:relative;overflow:hidden;background:linear-gradient(160deg,#ecfeff,#7dd3fc 80%);}
.unit{position:absolute;bottom:60px;left:120px;width:200px;height:80px;border-radius:8px;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.08);}
.vent{position:absolute;bottom:80px;left:140px;width:160px;height:20px;background:#0284c7;border-radius:4px;}
.sec{padding:20px 34px 0;}
.sectitle{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#3f4142;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border-radius:12px;padding:10px;}
.thumb{height:96px;border-radius:8px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;}
.pprice{font-size:13px;font-weight:700;color:#005dcf;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Mrcool</div>
<div class="navlinks"><span>Mini Splits</span><span>DIY Kits</span><span>Parts</span><span>Support</span></div>
<div class="cta">Shop DIY Kits</div>
</div>
<div class="hero">
<div class="herotext">
<div class="tag">Energy Star Rated</div>
<h1>DIY Mini-Split, No HVAC License Required</h1>
<p>Precharged linesets make cooling and heating your space a weekend project.</p>
<div class="btn">Find Your System</div>
</div>
<div class="heroimg"><div class="unit"></div><div class="vent"></div></div>
</div>
<div class="sec">
<div class="sectitle">Popular Systems</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#005dcf,#7dd3fc)"></div><div class="pname">DIY 24K BTU Mini Split</div><div class="pprice">$1,499</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0071e3,#a5f3fc)"></div><div class="pname">4th Gen Precharged Kit</div><div class="pprice">$249</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#22c55e,#005dcf)"></div><div class="pname">Wall Mount Air Handler</div><div class="pprice">$699</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d97706,#0284c7)"></div><div class="pname">Smart Wi-Fi Controller</div><div class="pprice">$89</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111827;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111827;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #111827; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #5bbad5; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: transparent; color: #111827;
border: 1px solid #5bbad5; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111827;
border: 1px solid #c4c5c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e3342f; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Raleway','Helvetica Neue',Arial,sans-serif; color:#374151; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e5e7eb;}
.logo{font-size:19px;font-weight:700;color:#111827;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;color:#6b7280;}
.navlinks .active{color:#111827;border-bottom:2px solid #111827;padding-bottom:6px;}
.hero{padding:36px 34px 20px;text-align:center;}
.hero h1{font-size:36px;font-weight:700;color:#111827;margin:0 0 20px;letter-spacing:-0.5px;}
.catstrip{display:flex;justify-content:center;gap:10px;margin-bottom:24px;}
.tab{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:8px 16px;border-radius:9999px;color:#6b7280;}
.tab.active{background:#111827;color:#fff;}
.grid{display:flex;gap:20px;justify-content:center;}
.card{width:150px;}
.thumb{width:150px;height:200px;background:#f9fafb;}
.ptitle{font-size:18px;font-weight:600;color:#111827;margin-top:8px;}
.author{font-size:14px;color:#6b7280;}
.pprice{font-size:16px;color:#111827;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">New Directions</div>
<div class="navlinks"><div class="active">Fiction</div><div>Poetry</div><div>Essays</div><div>About the Press</div></div>
</div>
<div class="hero">
<h1>A well-designed book, quiet and confident.</h1>
<div class="catstrip"><div class="tab active">New Releases</div><div class="tab">Poetry</div><div class="tab">Essays</div><div class="tab">Staff Picks</div></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#2d89ef,#111827)"></div><div class="ptitle">The Long Corridor</div><div class="author">Nadia Fournier</div><div class="pprice">$24.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#5bbad5,#374151)"></div><div class="ptitle">Salt & Ordinary Days</div><div class="author">Owen Marsh</div><div class="pprice">$19.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#111827,#5bbad5)"></div><div class="ptitle">Field Notes on Leaving</div><div class="author">Priya Anand</div><div class="pprice">$22.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#374151,#2d89ef)"></div><div class="ptitle">Small Hours</div><div class="author">Elias Brandt</div><div class="pprice">$18.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ff6600; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #1a1a1a;
border: 1px solid #ff6600; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff6600; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Nunito Sans',Muli,Arial,sans-serif; background:#ffffff; color:#1e293b; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:58px;background:#0f172a;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Source Serif Pro',Georgia,serif;font-size:20px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#f7f1e1;}
.promo{height:26px;background:#2a5135;color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;letter-spacing:0.3px;}
.hero{height:210px;display:flex;background:#f7f1e1;}
.heroText{width:48%;padding:28px 34px;display:flex;flex-direction:column;justify-content:center;}
.h1{font-family:'Source Serif Pro',Georgia,serif;font-size:30px;font-weight:700;color:#1a1a1a;line-height:1.2;margin:0 0 10px;}
.sub{font-size:14px;color:#4a5568;margin:0 0 16px;max-width:300px;}
.cta{display:inline-block;background:#ff6600;color:#fff;font-size:14px;font-weight:600;padding:11px 24px;border-radius:8px;width:fit-content;}
.heroImg{width:52%;background:linear-gradient(160deg,#c9ad90,#2a5135 130%);position:relative;overflow:hidden;}
.leaf{position:absolute;width:70px;height:100px;border-radius:0 60% 0 60%;background:#2a5135;opacity:0.55;}
.l1{top:20px;left:50px;}
.l2{top:70px;left:150px;transform:rotate(30deg);}
.sec{padding:16px 32px 0;}
.secTitle{font-family:'Source Serif Pro',Georgia,serif;font-size:19px;font-weight:600;color:#1a1a1a;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;border:1px solid #dedede;border-radius:6px;padding:10px;}
.thumb{height:100px;border-radius:4px;margin-bottom:8px;}
.ptitle{font-size:13px;font-weight:600;color:#1a1a1a;line-height:1.3;height:34px;overflow:hidden;}
.pprice{font-size:14px;font-weight:700;color:#1a1a1a;margin-top:4px;}
.pbadge{display:inline-block;background:#2a5135;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:2px 7px;border-radius:8px;margin-bottom:6px;}
</style>
<div class="wrap">
<div class="promo">Free shipping on orders over $89 · Garden & Patio Sale</div>
<div class="nav">
<div class="logo">Plow And Hearth</div>
<div class="navlinks"><span>Garden</span><span>Outdoor Living</span><span>Home Decor</span><span>Gifts</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Grow something worth tending.</div>
<div class="sub">Heirloom-quality garden goods and hearth-side comforts for every season outdoors.</div>
<div class="cta">Shop the Season</div>
</div>
<div class="heroImg"><div class="leaf l1"></div><div class="leaf l2"></div></div>
</div>
<div class="sec">
<div class="secTitle">Garden Favorites</div>
<div class="grid">
<div class="card"><div class="pbadge">Best Seller</div><div class="thumb" style="background:linear-gradient(135deg,#2a5135,#c9ad90);"></div><div class="ptitle">Cast-Iron Planter, Weathered Finish</div><div class="pprice">$78.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c9ad90,#ff6600);"></div><div class="ptitle">Heirloom Tomato Seed Collection</div><div class="pprice">$12.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0f172a,#2a5135);"></div><div class="ptitle">Wrought-Iron Garden Trellis</div><div class="pprice">$96.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff6600,#c9ad90);"></div><div class="ptitle">Wood-Fired Chiminea, Copper Trim</div><div class="pprice">$249.00</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #9bca3e; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #313131;
border: 1px solid #9bca3e; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #9bca3e; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:flex; flex-direction:column; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#404040; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:62px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#003681; }
.brand { font-size:20px; font-weight:700; color:#ffffff; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:13px; font-weight:700; color:#dedede; }
.cart { background:#f68b1f; color:#fff; font-size:12px; font-weight:700; padding:8px 16px; border-radius:6px; }
.hero { display:flex; align-items:center; gap:36px; padding:26px 36px 20px; }
.htext { max-width:400px; }
.htext .kicker { display:inline-block; background:#9bca3e; color:#fff; font-size:11px; font-weight:700;
padding:4px 10px; border-radius:6px; margin-bottom:10px; }
.htext h1 { font-size:28px; font-weight:700; color:#003681; margin:0 0 10px; line-height:1.25; }
.htext p { font-size:14px; color:#404040; line-height:1.5; margin:0 0 16px; }
.btn { display:inline-block; background:#f68b1f; color:#fff; font-size:14px; font-weight:700; padding:11px 22px;
border-radius:6px; }
.boxes { display:flex; gap:14px; flex-shrink:0; }
.box { width:96px; height:120px; border-radius:6px; }
.b1 { background:#9bca3e; align-self:flex-start; }
.b2 { background:#0051c3; height:150px; }
.b3 { background:#bd2426; align-self:flex-end; }
.section { padding:0 36px; }
.section h2 { font-size:20px; font-weight:700; color:#003681; margin:0 0 14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { background:#f5f5f5; border-radius:6px; padding:12px; }
.cover { height:80px; border-radius:6px; margin-bottom:8px; }
.k1 .cover { background:#9bca3e; }
.k2 .cover { background:#f68b1f; }
.k3 .cover { background:#0051c3; }
.k4 .cover { background:#bd2426; }
.badge { display:inline-block; font-size:10px; font-weight:700; color:#fff; padding:2px 8px; border-radius:999px; margin-bottom:6px; }
.k1 .badge { background:#7fa832; } .k2 .badge { background:#ee730a; } .k3 .badge { background:#2f7bbf; } .k4 .badge { background:#bd2426; }
.card .t { font-size:14px; font-weight:700; color:#313131; margin:0 0 4px; }
.card .p { font-size:13px; font-weight:700; color:#003681; }
.trust { margin-top:auto; flex-shrink:0; display:flex; gap:0; background:#dedede; }
.trust span { flex:1; text-align:center; padding:12px 8px; font-size:12px; font-weight:700; color:#003681; }
.trust span + span { border-left:1px solid #ffffff; }
</style></head>
<body>
<nav>
<div class="brand">Groovy Lab IN A Box</div>
<div class="navlinks"><span>STEM Boxes</span><span>By Age</span><span>Gift Subscriptions</span><span>Classroom</span></div>
<div class="cart">Cart 1</div>
</nav>
<div class="hero">
<div class="htext">
<div class="kicker">NEW BOX EVERY MONTH</div>
<h1>Hands-on science that ships to your door.</h1>
<p>Real experiments, real tools, real "aha" moments — a monthly STEM box built for curious kids ages 8–16+.</p>
<span class="btn">Start a Subscription</span>
</div>
<div class="boxes"><div class="box b1"></div><div class="box b2"></div><div class="box b3"></div></div>
</div>
<div class="section">
<h2>Popular Boxes</h2>
<div class="grid">
<div class="card k1"><div class="badge">POPULAR</div><div class="cover"></div><div class="t">Circuit Builders</div><div class="p">$34.95</div></div>
<div class="card k2"><div class="badge">NEW</div><div class="cover"></div><div class="t">Rocket Science 101</div><div class="p">$34.95</div></div>
<div class="card k3"><div class="badge">INFO</div><div class="cover"></div><div class="t">Optics Lab</div><div class="p">$34.95</div></div>
<div class="card k4"><div class="badge">SALE</div><div class="cover"></div><div class="t">Chemistry Starter</div><div class="p">$29.95</div></div>
</div>
</div>
<div class="trust"><span>Ages 8–16+</span><span>STEM-Certified Curriculum</span><span>Cancel Anytime</span><span>Ships Monthly</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f8f4; color: #1c1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f8f4; color: #1c1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #1c1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #50280f; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: transparent; color: #50280f;
border: 1px solid #50280f; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9f8f4; color: #1c1a1a;
border: 1px solid #c2c0be; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.45; letter-spacing: 1.2px; background: #50280f; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#f9f8f4; color:#1c1a1a; box-sizing:border-box; font-family:'priori-sans',sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;background:#f9f8f4;border-bottom:1px solid #e5e5e5;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.nav .logo{font-weight:400;font-size:16px;color:#50280f;}
.nav .links{display:flex;gap:20px;font-size:14px;font-weight:400;}
.wrap{display:flex;height:575px;}
.left{width:400px;background:#f5efe7;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;}
.tray{width:220px;height:150px;background:linear-gradient(160deg,#6b3515,#50280f);border-radius:4px;box-shadow:0 12px 24px rgba(80,40,15,.18);position:relative;}
.tray::before{content:'';position:absolute;top:16px;left:16px;width:60px;height:118px;background:rgba(255,255,255,.15);border-radius:2px;}
.tray::after{content:'';position:absolute;top:16px;left:86px;right:16px;height:50px;background:rgba(255,255,255,.1);border-radius:2px;}
.badge-pill{position:absolute;top:24px;left:24px;background:#50280f;color:#fff;font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;padding:4px 10px;border-radius:9999px;}
.right{flex:1;padding:28px 32px;display:flex;flex-direction:column;}
h1{font-size:28px;font-weight:400;margin:0 0 8px;}
.sub{color:#707070;font-size:14px;margin:0 0 14px;}
.price{font-size:18px;font-weight:500;margin:0 0 14px;}
.charge-chip{display:inline-flex;align-items:center;gap:8px;background:#f5efe7;color:#0e7a82;font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;padding:8px 16px;border-radius:8px;margin-bottom:18px;width:fit-content;}
.dot{width:8px;height:8px;border-radius:50%;background:#0e7a82;}
.materials{display:flex;gap:8px;margin-bottom:18px;}
.mat{width:28px;height:28px;border-radius:9999px;border:2px solid transparent;}
.mat.sel{border-color:#50280f;}
.m1{background:#3d2b1a;} .m2{background:#8b5a2b;} .m3{background:#1c1917;}
.desc{font-size:14px;color:#444;line-height:1.6;margin:0 0 20px;}
.reviews{background:#f7f7f8;border-radius:8px;padding:14px;margin-bottom:18px;}
.reviews .stars{color:#b15019;font-size:14px;margin-bottom:4px;}
.reviews p{font-size:13px;color:#444;margin:0;}
.actions{display:flex;gap:10px;margin-top:auto;}
.btn-primary{background:#50280f;color:#fff;font-size:14px;font-weight:500;letter-spacing:.5px;border-radius:0;padding:14px 28px;height:48px;display:flex;align-items:center;}
.btn-secondary{background:transparent;color:#50280f;font-size:14px;font-weight:500;letter-spacing:.5px;border:1px solid #50280f;border-radius:0;padding:13px 27px;height:48px;display:flex;align-items:center;}
</style>
</head>
<body>
<div class="nav"><div class="logo">Courant Desk Acc 2</div><div class="links"><span>Desk Organization</span><span>Chargers</span><span>Trays</span><span>Gifts</span></div></div>
<div class="wrap">
<div class="left"><div class="badge-pill">Featured</div><div class="tray"></div></div>
<div class="right">
<h1>Woven Desk Organizer, Walnut</h1>
<p class="sub">Modular Catchall · Charging-Compatible Tray</p>
<p class="price">$89.00</p>
<div class="charge-chip"><span class="dot"></span>Charging Compatible</div>
<div class="materials">
<span class="mat sel m1"></span>
<span class="mat m2"></span>
<span class="mat m3"></span>
</div>
<p class="desc">A modular tray system that turns a cluttered desk corner into a quiet still life. The charging-compatible insert lets your phone rest flush with the rest of the surface.</p>
<div class="reviews">
<div class="stars">★★★★★ 4.8</div>
<p>"Beautiful material, and the charging cutout is a genuinely smart detail." — Verified Buyer</p>
</div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">View All</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f3f3; color: #303030;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f3f3; color: #303030;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #303030; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #616161; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.29; letter-spacing: 0.5px; background: #2332d5; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.29; letter-spacing: 0.5px; background: #f3f3f3; color: #303030;
border: 1px solid #2332d5; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f3f3f3; color: #303030;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #616161; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #8051ff; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f3f3f3; color:#303030; font-family:'Segoe UI', 'SF Pro', Roboto, sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;background:#ffffff;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:'Fraunces',Georgia,serif;font-size:22px;font-weight:600;color:#303030;}
.navlinks{display:flex;gap:24px;font-family:'Titan One','Arial Black',sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:0.5px;color:#303030;}
.cart{width:34px;height:34px;border-radius:9999px;background:#2332d5;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;}
.hero{height:264px;display:flex;align-items:center;padding:0 40px;background:#ffffff;}
.htext{width:430px;}
.kicker{font-family:'Titan One','Arial Black',sans-serif;font-size:12px;color:#7367f0;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:12px;}
.htext h1{font-family:'Fraunces',Georgia,serif;font-size:34px;font-weight:600;line-height:1.2;margin:0 0 14px;}
.htext p{font-size:15px;color:#5a5a5a;margin:0 0 20px;max-width:370px;}
.btn{display:inline-block;font-family:'Titan One','Arial Black',sans-serif;background:#2332d5;color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:0.5px;padding:14px 28px;border-radius:6px;}
.hgraphic{position:absolute;right:70px;top:38px;width:230px;height:190px;}
.blob{position:absolute;width:170px;height:170px;border-radius:44% 56% 60% 40%;background:radial-gradient(circle at 35% 30%,#ffaa00,#2332d5 75%);top:0;right:20px;}
.tube{position:absolute;left:30px;bottom:10px;width:40px;height:130px;background:#ffffff;border-radius:10px;box-shadow:0 8px 18px rgba(0,0,0,0.12);}
.tube:before{content:'';position:absolute;left:6px;right:6px;top:14px;height:34px;background:#29845a;border-radius:4px;}
.sec{padding:24px 40px 0;}
.sectitle{font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:600;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:216px;background:#fff;border-radius:10px;overflow:hidden;position:relative;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.cardimg{width:100%;height:104px;background:#f3f3f3;display:flex;align-items:center;justify-content:center;}
.cardimg .puck{width:56px;height:56px;border-radius:44% 56% 60% 40%;}
.cardbody{padding:12px;}
.cardtitle{font-size:14px;font-weight:600;}
.cardprice{font-size:13px;color:#7367f0;margin-top:4px;}
.badge{position:absolute;top:8px;left:8px;background:#ea5455;color:#fff;font-family:'Titan One','Arial Black',sans-serif;font-size:9px;text-transform:uppercase;padding:4px 8px;border-radius:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#303030;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#d9d9d9;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Megababe</div>
<div class="navlinks"><span>Best Sellers</span><span>Thigh Rescue</span><span>Bum Bum Cream</span></div>
<div class="cart">2</div>
</div>
<div class="hero">
<div class="htext">
<div class="kicker">Cult Favorite, No Cap</div>
<h1>Body care that talks back.</h1>
<p>Solutions for the parts nobody else will admit exist — funny label, serious formula.</p>
<div class="btn">Shop Best Sellers</div>
</div>
<div class="hgraphic">
<div class="blob"></div>
<div class="tube"></div>
</div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge">Cult Fave</span><div class="cardimg"><div class="puck" style="background:radial-gradient(circle at 35% 35%,#ffaa00,#303030 75%);"></div></div><div class="cardbody"><div class="cardtitle">Thigh Rescue Anti-Chafe Stick</div><div class="cardprice">$14.00</div></div></div>
<div class="card"><div class="cardimg"><div class="puck" style="background:radial-gradient(circle at 35% 35%,#29845a,#303030 75%);"></div></div><div class="cardbody"><div class="cardtitle">Bum Bum Cream</div><div class="cardprice">$18.00</div></div></div>
<div class="card"><div class="cardimg"><div class="puck" style="background:radial-gradient(circle at 35% 35%,#7367f0,#303030 75%);"></div></div><div class="cardbody"><div class="cardtitle">Rosy Pits Deodorant</div><div class="cardprice">$15.00</div></div></div>
<div class="card"><div class="cardimg"><div class="puck" style="background:radial-gradient(circle at 35% 35%,#ea5455,#303030 75%);"></div></div><div class="cardbody"><div class="cardtitle">Space Bar Dry Shampoo</div><div class="cardprice">$20.00</div></div></div>
</div>
</div>
<div class="footer"><span>© Confidence, Bottled</span><span>Ingredients · FAQ</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfbf9; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfbf9; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #636262; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #42416e; color: #fcfbf9;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #fcfbf9; color: #42416e;
border: 1px solid #42416e; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fcfbf9; color: #2e2e2e;
border: 1px solid #c5c4c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #636262; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #42416e; color: #fcfbf9;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Jiggy Puzzles Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Bricolage Grotesque','Nunito Sans',sans-serif; background:#fcfbf9; color:#212121; }
*{box-sizing:border-box;}
.nav{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #f0ebe2;}
.logo{font-family:'BrandonGrotesque-Bold','Bricolage Grotesque',sans-serif;font-weight:700;font-size:22px;color:#42416e;letter-spacing:.3px;}
.navlinks{display:flex;gap:26px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#212121;}
.navlinks .active{color:#42416e;border-bottom:2px solid #42416e;padding-bottom:6px;}
.icons{display:flex;gap:16px;color:#42416e;font-size:16px;}
.hero{display:flex;padding:36px 40px 24px;gap:36px;align-items:center;}
.hero-text{flex:1.1;}
.hero-text .eyebrow{color:#ab8c52;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.hero-text h1{font-family:'BrandonGrotesque-Bold','Bricolage Grotesque',sans-serif;font-size:38px;font-weight:700;line-height:1.1;margin:8px 0 12px;letter-spacing:-.5px;}
.hero-text p{color:#636262;font-size:15px;line-height:1.5;max-width:380px;margin-bottom:18px;}
.btn-primary{display:inline-block;background:#42416e;color:#fcfbf9;padding:14px 32px;border-radius:8px;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.5px;}
.hero-art{flex:1;height:210px;border-radius:20px;background:
repeating-linear-gradient(45deg,#e8d4ae 0 10px,#f0ebe2 10px 20px);
position:relative;box-shadow:0 8px 24px rgba(0,0,0,.08);}
.hero-art::after{content:'1000 PC';position:absolute;bottom:12px;right:16px;background:#ab8c52;color:#fcfbf9;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.5px;}
.section-title{font-family:'BrandonGrotesque-Bold','Bricolage Grotesque',sans-serif;font-size:22px;font-weight:700;margin:6px 40px 14px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:0 40px;}
.card{background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);overflow:hidden;}
.card-img{height:110px;position:relative;}
.card-badge{position:absolute;top:8px;left:8px;background:#42416e;color:#fcfbf9;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:4px 8px;border-radius:4px;}
.card-badge.gold{background:#ab8c52;}
.card-body{padding:12px 14px 14px;}
.card-title{font-size:14px;font-weight:600;margin-bottom:4px;}
.card-price{font-size:14px;color:#2e2e2e;}
</style>
<div class="nav">
<div class="logo">Jiggy Puzzles</div>
<div class="navlinks"><span class="active">New</span><span>Best Sellers</span><span>Collections</span><span>Gift</span></div>
<div class="icons">◎ ♡ ⛃</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="eyebrow">Art Worth Framing</div>
<h1>Puzzles designed<br>to hang on your wall.</h1>
<p>Museum-quality prints turned into 500 and 1000 piece jigsaw puzzles — restrained, curated, and made to be displayed.</p>
<div class="btn-primary">Shop the Collection</div>
</div>
<div class="hero-art"></div>
</div>
<div class="section-title">Best Sellers</div>
<div class="grid">
<div class="card">
<div class="card-img" style="background:linear-gradient(135deg,#c9b8e0,#8f7cc4);"><div class="card-badge">New</div></div>
<div class="card-body"><div class="card-title">Botanical Garden — 1000pc</div><div class="card-price">$34.00</div></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(135deg,#e8d4ae,#ab8c52);"><div class="card-badge gold">Framed</div></div>
<div class="card-body"><div class="card-title">Golden Hour — 500pc</div><div class="card-price">$28.00</div></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(135deg,#f0dede,#c98a8a);"></div>
<div class="card-body"><div class="card-title">Rose Study — 1000pc</div><div class="card-price">$34.00</div></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(135deg,#c3d9c9,#7fa88c);"></div>
<div class="card-body"><div class="card-title">Coastal Morning — 500pc</div><div class="card-price">$28.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #241f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #241f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.45; margin: 0; color: #241f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #ff7f55; color: #000000;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #108474; color: #ffffff;
border: 1px solid #ff7f55; border-radius: 8px;
padding: 14px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #241f20;
border: 1px solid #c8c7c7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0.6px; background: #ff7f55; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Nunito Sans',Arial,Helvetica,sans-serif; color:#241f20; }
*{box-sizing:border-box;}
.announce{height:32px;background:#108474;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e9e9e9;}
.logo{font-size:18px;font-weight:700;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:700;}
.hero{height:220px;background:#f9fafb;display:flex;align-items:center;padding:0 40px;}
.herotext{width:420px;}
h1{font-size:32px;font-weight:800;letter-spacing:-0.4px;margin:0 0 12px;}
.sub{font-size:14px;color:#555;margin:0 0 18px;max-width:340px;}
.cta{display:inline-block;background:#ff7f55;color:#fff;font-size:14px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:14px 28px;border-radius:8px;}
.wrist{width:200px;height:120px;position:relative;margin-left:80px;}
.band{position:absolute;height:14px;border-radius:9999px;left:20px;width:160px;}
.sec{padding:22px 40px 0;}
.sectitle{font-size:20px;font-weight:700;margin:0 0 14px;}
.grid{display:flex;gap:16px;}
.card{width:210px;background:#f9f9f9;border-radius:12px;padding:14px;}
.thumb{height:88px;background:#e9e9e9;border-radius:8px;margin-bottom:10px;}
.pname{font-size:15px;font-weight:700;margin:0 0 6px;}
.priceline{display:flex;gap:8px;align-items:baseline;margin-bottom:8px;}
.pprice{font-size:17px;font-weight:700;}
.pcompare{font-size:14px;color:#7b7b7b;text-decoration:line-through;}
.swatches{display:flex;gap:5px;}
.sw{width:18px;height:18px;border-radius:9999px;}
</style>
<div class="announce">Every Bracelet Gives Back · Shop the Cause</div>
<div class="nav">
<div class="logo">Pura Vida Bracelets</div>
<div class="navlinks"><span>Bracelets</span><span>Charity</span><span>Club</span><span>Personalize</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>One thread. Endless color.</h1>
<p class="sub">Handmade string bracelets stacked, personalized, and always giving back.</p>
<div class="cta">Shop Bracelets</div>
</div>
<div class="wrist">
<div class="band" style="top:10px;background:#ff7f55"></div>
<div class="band" style="top:32px;background:#108474"></div>
<div class="band" style="top:54px;background:#fbcd0a"></div>
<div class="band" style="top:76px;background:#a89cc8"></div>
</div>
</div>
<div class="sec">
<div class="sectitle">Stack Sets</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff7f55,#108474)"></div><div class="pname">Original Stack Set</div><div class="priceline"><span class="pprice">$28</span><span class="pcompare">$34</span></div><div class="swatches"><div class="sw" style="background:#ff7f55"></div><div class="sw" style="background:#fbcd0a"></div><div class="sw" style="background:#108474"></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#108474,#a89cc8)"></div><div class="pname">Charity Cause Set</div><div class="priceline"><span class="pprice">$18</span></div><div class="swatches"><div class="sw" style="background:#108474"></div><div class="sw" style="background:#c1e6e6"></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a89cc8,#ff7f55)"></div><div class="pname">Custom Engraved</div><div class="priceline"><span class="pprice">$14</span></div><div class="swatches"><div class="sw" style="background:#a89cc8"></div><div class="sw" style="background:#241f20"></div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.35; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #545454; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #df5641; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #141414;
border: 1px solid #df5641; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #171717;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #545454; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f2faf0; color: #60a57e;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fbf7ee; font-family:'Inter',-apple-system,sans-serif; color:#141414; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#fff;}
.logo{font-family:'meno-display',Georgia,serif;font-size:20px;font-weight:400;color:#141414;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#545454;}
.navlinks span:first-child{color:#141414;}
.cart{position:relative;font-size:13px;color:#141414;}
.dot{position:absolute;top:-8px;right:-13px;background:#df5641;color:#fff;font-size:10px;font-weight:600;border-radius:9999px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;}
.hero{height:236px;display:flex;align-items:center;padding:0 40px;background:#fbf7ee;}
.herotext{max-width:400px;}
.h1{font-family:'meno-display',Georgia,serif;font-size:32px;font-weight:400;line-height:1.25;color:#141414;margin:0 0 12px;}
.sub{font-size:15px;color:#545454;line-height:1.55;margin:0 0 18px;max-width:340px;}
.btn{display:inline-block;background:#df5641;color:#fff;font-size:14px;font-weight:500;letter-spacing:0.2px;padding:12px 26px;border-radius:9999px;}
.bottle{width:250px;height:170px;margin-left:auto;position:relative;}
.bottle:before{content:'';position:absolute;left:70px;top:0;width:80px;height:150px;border-radius:16px;background:linear-gradient(160deg,#df5641,#141414 85%);}
.bottle:after{content:'';position:absolute;left:92px;top:-12px;width:36px;height:24px;border-radius:6px;background:#141414;}
.badgerow{display:flex;gap:8px;padding:14px 40px 0;}
.badge{font-size:11px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;padding:5px 10px;border-radius:4px;}
.badge.sage{background:#f2faf0;color:#60a57e;}
.badge.gold{background:#fcf1cd;color:#dd9a1a;}
.badge.lav{background:#dee2ee;color:#5457a0;}
.grid{display:flex;gap:14px;padding:14px 40px 0;}
.card{width:196px;}
.thumb{height:96px;border-radius:8px;position:relative;}
.stars{color:#dd9a1a;font-size:11px;margin-top:8px;}
.ctitle{font-size:16px;font-weight:500;margin:4px 0 2px;}
.cprice{font-size:14px;color:#171717;margin:0;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#141414;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;color:#808284;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Ovii</div>
<div class="navlinks"><span>Shop</span><span>Ingredients</span><span>Journal</span></div>
<div class="cart">Bag<span class="dot">1</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="h1">Field notes for the body.</div>
<div class="sub">Clinically dosed, botanically minded — supplements read like a naturalist's journal, not a lab report.</div>
<div class="btn">Shop Best Sellers</div>
</div>
<div class="bottle"></div>
</div>
<div class="badgerow">
<div class="badge sage">Vegan</div>
<div class="badge gold">Best Seller</div>
<div class="badge lav">New</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#df5641,#141414)"></div><div class="ctitle">Daily Magnesium</div><div class="stars">★★★★★</div><div class="cprice">$32</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#60a57e,#141414)"></div><div class="ctitle">Calm Root Tincture</div><div class="stars">★★★★☆</div><div class="cprice">$28</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#dd9a1a,#141414)"></div><div class="ctitle">Morning Ritual Set</div><div class="stars">★★★★★</div><div class="cprice">$54</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#d9dbed,#141414)"></div><div class="ctitle">Sleep Drops</div><div class="stars">★★★★★</div><div class="cprice">$26</div></div>
</div>
<div class="footer"><span>Subscribe & Save 15%</span><span>Formulated by naturopaths</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdf9f4; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdf9f4; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; font-weight: 400; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #8c827c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.1em; background: #313131; color: #fdf9f4;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.1em; background: #fdf9f4; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fdf9f4; color: #313131;
border: 1px solid #cac7c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c827c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.12em; background: #fdf9f4; color: #313131;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fdf9f4; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e4dcd6;}
.logo{font-family:Georgia,serif;font-size:22px;color:#313131;}
.navlinks{display:flex;gap:22px;font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#313131;}
.hero{height:270px;display:flex;background:#f7f1e9;}
.herotext{width:48%;padding:0 34px;display:flex;flex-direction:column;justify-content:center;}
.herotext h1{font-family:Georgia,serif;font-size:34px;font-weight:400;color:#313131;margin:0 0 12px;letter-spacing:-0.4px;line-height:1.2;}
.herotext p{font-size:14px;color:#4c4440;margin:0 0 18px;max-width:300px;}
.cta{display:inline-block;width:fit-content;background:#313131;color:#fdf9f4;font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;padding:14px 26px;border-radius:8px;}
.heroart{width:52%;position:relative;overflow:hidden;}
.heron{position:absolute;right:70px;top:40px;width:80px;height:120px;}
.heronbody{position:absolute;width:26px;height:80px;background:#8fa88c;border-radius:50% 50% 40% 40%;left:20px;top:30px;}
.heronleg{position:absolute;width:3px;height:40px;background:#8fa88c;bottom:0;}
.sprig{position:absolute;left:60px;top:90px;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,#d4a99a 0%,transparent 70%);}
.badge{position:absolute;top:8px;left:8px;background:transparent;border:1px solid #313131;color:#313131;font-size:10px;font-weight:600;letter-spacing:0.6px;text-transform:uppercase;padding:3px 10px;border-radius:9999px;}
.section{padding:18px 34px 0;}
.seclabel{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#8c827c;margin-bottom:10px;}
.grid{display:flex;gap:14px;}
.card{width:150px;}
.thumb{height:120px;background:#fff;margin-bottom:8px;position:relative;}
.ptitle{font-size:13px;color:#313131;margin-bottom:3px;}
.pprice{font-size:13px;color:#8c827c;}
</style>
<div class="nav">
<div class="logo">Rylee Cru</div>
<div class="navlinks"><div>Girls</div><div>Boys</div><div>Baby</div><div>Sale</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Little prints,<br>quietly told.</h1>
<p>Illustrated collections drawn by hand, for the smallest wardrobes.</p>
<div class="cta">Shop New Arrivals</div>
</div>
<div class="heroart" style="background:#f7f1e9">
<div class="heron"><div class="heronbody"></div><div class="heronleg" style="left:32px"></div><div class="heronleg" style="left:44px"></div></div>
<div class="sprig"></div>
</div>
</div>
<div class="section">
<div class="seclabel">The Heron Collection</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge">New</span><div style="position:absolute;inset:0;background:linear-gradient(135deg,#d4a99a,#fdf9f4)"></div></div><div class="ptitle">Heron Print Romper</div><div class="pprice">$32.00</div></div>
<div class="card"><div class="thumb"><div style="position:absolute;inset:0;background:linear-gradient(135deg,#8fa88c,#f7f1e9)"></div></div><div class="ptitle">Botanical Tee Dress</div><div class="pprice">$28.00</div></div>
<div class="card"><div class="thumb"><div style="position:absolute;inset:0;background:linear-gradient(135deg,#c9b89a,#fdf9f4)"></div></div><div class="ptitle">Folk Animal Onesie</div><div class="pprice">$24.00</div></div>
<div class="card"><div class="thumb"><span class="badge" style="border-color:#b85c4a;color:#b85c4a">Sale</span><div style="position:absolute;inset:0;background:linear-gradient(135deg,#d4a99a,#8fa88c)"></div></div><div class="ptitle">Weekend Set, Botanical</div><div class="pprice">$26.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #999999; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #00bbff; color: #000000;
border: none; border-radius: 6px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #121212;
border: 1px solid #00bbff; border-radius: 6px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #c4c4c4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #999999; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #00bbff; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#ffffff; color:#121212; box-sizing:border-box; font-family:'TT Norms Pro','Work Sans',sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fff;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.nav .logo{font-family:'Tiempos Headline',Georgia,serif;font-weight:600;font-size:17px;}
.nav .links{display:flex;gap:18px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.3px;}
.nav .links span:first-child{border-bottom:2px solid #00bbff;padding-bottom:4px;}
.wrap{display:flex;height:576px;}
.left{width:400px;background:#f7f7f7;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;}
.towel{width:210px;height:150px;background:linear-gradient(160deg,#ffffff,#e0f7ff);border-radius:6px;border:1px solid #dedede;position:relative;}
.towel::before{content:'';position:absolute;top:12px;left:12px;right:12px;bottom:12px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.03) 0 2px,transparent 2px 10px);}
.badge-sale{position:absolute;top:24px;left:24px;background:#00bbff;color:#fff;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:4px 8px;border-radius:2px;}
.right{flex:1;padding:28px 32px;display:flex;flex-direction:column;}
h1{font-family:'Tiempos Headline',Georgia,serif;font-size:26px;font-weight:500;margin:0 0 8px;}
.sub{color:#999;font-size:13px;text-transform:uppercase;letter-spacing:.2px;margin:0 0 14px;}
.price{font-size:18px;color:#333;margin:0 0 16px;}
.swatches{display:flex;gap:10px;margin-bottom:18px;}
.sw{width:32px;height:32px;border-radius:9999px;border:1px solid #dedede;}
.sw.sel{border:2px solid #121212;}
.c1{background:#e0f7ff;} .c2{background:#136f99;} .c3{background:#999999;} .c4{background:#ffffff;}
.sizes{display:flex;gap:8px;margin-bottom:20px;}
.size{background:#fff;border:1px solid #dedede;font-size:14px;padding:10px 16px;border-radius:6px;}
.size.sel{background:#121212;color:#fff;border-color:#121212;}
.desc{font-family:'Tiempos Text',Georgia,serif;font-size:16px;color:#333;line-height:1.6;margin:0 0 20px;}
.actions{display:flex;gap:10px;margin-top:auto;}
.btn-primary{background:#00bbff;color:#fff;font-size:15px;font-weight:500;letter-spacing:.3px;border-radius:6px;padding:14px 28px;height:48px;display:flex;align-items:center;}
.btn-secondary{background:#fff;color:#121212;font-size:15px;font-weight:500;border:1px solid #dedede;border-radius:6px;padding:13px 27px;height:48px;display:flex;align-items:center;}
</style>
</head>
<body>
<div class="nav"><div class="logo">Coyuchi</div><div class="links"><span>Bedding</span><span>Bath</span><span>Loungewear</span><span>Sale</span></div></div>
<div class="wrap">
<div class="left"><div class="badge-sale">Sale</div><div class="towel"></div></div>
<div class="right">
<h1>Organic Air Weight Towel</h1>
<p class="sub">100% Organic Cotton · Cloud</p>
<p class="price">$58.00</p>
<div class="swatches">
<span class="sw sel c1"></span>
<span class="sw c2"></span>
<span class="sw c3"></span>
<span class="sw c4"></span>
</div>
<div class="sizes">
<span class="size">Hand</span>
<span class="size sel">Bath</span>
<span class="size">Bath Sheet</span>
</div>
<p class="desc">Woven from long-staple organic cotton for a towel that stays plush wash after wash. Lightweight, quick-drying, and made for a slower Sunday morning.</p>
<div class="actions">
<div class="btn-primary">Add to Bag</div>
<div class="btn-secondary">Learn More</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f7f8; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f7f7f8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fefefe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#282829; box-sizing:border-box;
font-family:'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:Georgia, 'Times New Roman', 'Iowan Old Style', serif; }
nav { height:44px; border-bottom:1px solid #E0E0E0; display:flex; align-items:center; gap:28px; padding:0 32px; }
.brand { font-family:Georgia, serif; font-weight:700; font-size:19px; color:#B92B27; margin:0 24px 0 0; }
.segment { font-size:14px; font-weight:700; color:#636466; padding:0 2px; position:relative; height:44px; display:flex; align-items:center; }
.segment.active { color:#282829; }
.segment.active::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:#B92B27; }
.search { margin-left:auto; width:220px; height:30px; background:#F7F7F8; border-radius:8px; display:flex;
align-items:center; padding:0 10px; font-size:13px; color:#9A9A9C; gap:6px; }
.body { display:flex; gap:0; height:596px; }
.feed { flex:1; padding:16px 24px; overflow:hidden; }
.card { background:#fff; padding:16px 0; border-bottom:8px solid #F7F7F8; }
.authrow { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.av { width:24px; height:24px; border-radius:50%; background:#dcdcdc; }
.authname { font-size:13px; font-weight:700; }
.cred { font-size:12px; color:#636466; font-weight:600; }
.qtitle { font-size:19px; font-weight:700; margin:0 0 8px; line-height:1.35; letter-spacing:-0.1px; }
.apreview { font-size:15px; line-height:1.55; color:#282829; margin:0 0 6px; }
.more { font-size:13px; color:#2E69FF; font-weight:600; margin-bottom:10px; }
.footer { display:flex; align-items:center; gap:20px; }
.votepill { display:flex; align-items:center; height:30px; border:1px solid #E0E0E0; border-radius:15px; overflow:hidden; }
.votepill span { padding:0 10px; font-size:13px; font-weight:600; color:#636466; }
.votepill .up { background:#EAF0FF; color:#2E69FF; }
.votepill .div { width:1px; height:16px; background:#E0E0E0; }
.icon-txt { font-size:12px; color:#636466; }
.side { width:220px; padding:16px 20px; border-left:1px solid #E0E0E0; }
.side h4 { font-size:15px; font-weight:700; margin:0 0 10px; }
.space-tile { border:1px solid #E0E0E0; border-radius:10px; margin-bottom:10px; overflow:hidden; }
.banner { height:34px; }
.b1 { background:#3a7bd5; }
.b2 { background:#c1447e; }
.sp-body { padding:8px 10px; }
.sp-name { font-size:12px; font-weight:700; }
.sp-mem { font-size:10px; color:#636466; margin:2px 0 6px; }
.followbtn { font-size:10px; font-weight:600; border:1px solid #E0E0E0; border-radius:6px; padding:3px 8px; display:inline-block; }
.answer-card { border-top:8px solid #F7F7F8; padding-top:12px; }
</style></head>
<body>
<nav>
<p class="brand">Quora (iOS)</p>
<span class="segment active">Home</span>
<span class="segment">Following</span>
<span class="segment">Spaces</span>
<div class="search">🔍 Search Quora</div>
</nav>
<div class="body">
<div class="feed">
<div class="card">
<div class="authrow"><span class="av"></span><span class="authname">Dana Rourke</span><span class="cred">· Former Data Scientist · 1.4M views</span></div>
<h3 class="qtitle serif">Why do experienced engineers prefer boring technology?</h3>
<p class="apreview">Because novelty is a cost you pay every single day it's in production, and boring tools have already had their surprises found by someone else...</p>
<div class="more">(more)</div>
<div class="footer">
<div class="votepill"><span class="up">▲ 1.2K</span><span class="div"></span><span>▼</span></div>
<span class="icon-txt">💬 84</span>
<span class="icon-txt">↗ Share</span>
</div>
</div>
<div class="card answer-card">
<div class="authrow"><span class="av"></span><span class="authname">Mateo Silva</span><span class="cred">· Staff Engineer, 12 yrs · 812K views</span></div>
<h3 class="qtitle serif">What separates a good manager from a great one?</h3>
<p class="apreview">A good manager removes blockers. A great one notices the blocker before you do, and quietly makes sure it never becomes one again...</p>
<div class="more">(more)</div>
<div class="footer">
<div class="votepill"><span class="up">▲ 634</span><span class="div"></span><span>▼</span></div>
<span class="icon-txt">💬 41</span>
<span class="icon-txt">↗ Share</span>
</div>
</div>
</div>
<div class="side">
<h4>Spaces for you</h4>
<div class="space-tile"><div class="banner b1"></div><div class="sp-body"><div class="sp-name">Systems Design</div><div class="sp-mem">228K members</div><span class="followbtn">Follow</span></div></div>
<div class="space-tile"><div class="banner b2"></div><div class="sp-body"><div class="sp-name">Product Strategy</div><div class="sp-mem">91K members</div><span class="followbtn">Follow</span></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fb7299; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fb7299; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7a3d4e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f1f2f3; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fb7299; color: #000000;
border: 1px solid #f1f2f3; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fb7299; color: #111111;
border: 1px solid #d66283; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a3d4e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f986a7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f1f2f3; color:#18191c; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#ffffff; display:flex; align-items:center; padding:0 26px; gap:22px;
border-bottom:1px solid #e3e5e7; }
.brand { font-size:20px; font-weight:700; color:#fb7299; margin:0 10px 0 0; }
.navlinks { display:flex; gap:20px; flex:1; }
.navlinks span { font-size:14px; color:#18191c; }
.search { background:#f1f2f3; border-radius:16px; height:32px; width:220px; display:flex; align-items:center;
padding:0 14px; font-size:12px; color:#9499a0; }
.upload { margin-left:14px; background:#fb7299; color:#ffffff; border:none; border-radius:16px; height:32px; padding:0 16px; font-size:12px; }
.feed { padding:18px 26px; height:566px; overflow:hidden; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.vcard { background:#ffffff; }
.cover { position:relative; width:100%; height:126px; border-radius:6px; overflow:hidden;
background:linear-gradient(135deg,#e2e4e6,#c7cacd); }
.cover .stats { position:absolute; left:0; right:0; bottom:0; height:36px;
background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
display:flex; align-items:flex-end; padding:0 8px 6px; justify-content:space-between; }
.cover .stats span { color:#ffffff; font-size:12px; }
.cover .dur { position:absolute; right:6px; top:6px; background:rgba(0,0,0,0.55); color:#ffffff; font-size:11px;
border-radius:3px; padding:1px 5px; }
.vcard h4 { font-size:14px; font-weight:400; margin:8px 0 4px; line-height:1.35; color:#18191c;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vcard .meta { font-size:12px; color:#9499a0; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">Bilibili</p>
<div class="navlinks"><span>Anime</span><span>Games</span><span>Music</span><span>Life</span><span>Tech</span><span>Popular</span></div>
<div class="search">Search videos, up, or bangumi</div>
<button class="upload">Upload</button>
</nav>
<div class="feed">
<div class="grid">
<div class="vcard"><div class="cover"><span class="dur">12:04</span><div class="stats"><span>♥ 8.2k</span><span>▶ 214k</span></div></div><h4>A calm morning routine that changed how I study</h4><p class="meta">StudyWithMe · 2 days ago</p></div>
<div class="vcard"><div class="cover"><span class="dur">04:31</span><div class="stats"><span>♥ 3.1k</span><span>▶ 92k</span></div></div><h4>Ranked climb highlights — season finale</h4><p class="meta">GG_Frost · 6 hours ago</p></div>
<div class="vcard"><div class="cover"><span class="dur">21:09</span><div class="stats"><span>♥ 15k</span><span>▶ 480k</span></div></div><h4>Episode 12 reaction — the twist nobody saw coming</h4><p class="meta">AniReacts · 1 day ago</p></div>
<div class="vcard"><div class="cover"><span class="dur">08:47</span><div class="stats"><span>♥ 2.4k</span><span>▶ 61k</span></div></div><h4>Lo-fi cover session, live recording</h4><p class="meta">SoundNest · 3 days ago</p></div>
<div class="vcard"><div class="cover"><span class="dur">15:22</span><div class="stats"><span>♥ 6.7k</span><span>▶ 178k</span></div></div><h4>Building a keyboard from scratch, part 3</h4><p class="meta">MakerLog · 5 hours ago</p></div>
<div class="vcard"><div class="cover"><span class="dur">02:58</span><div class="stats"><span>♥ 9.9k</span><span>▶ 301k</span></div></div><h4>Dance cover — new choreography drop</h4><p class="meta">MoveStudio · 8 hours ago</p></div>
<div class="vcard"><div class="cover"><span class="dur">33:15</span><div class="stats"><span>♥ 4.4k</span><span>▶ 140k</span></div></div><h4>Full playthrough, no commentary — chapter 1</h4><p class="meta">QuietPlay · 2 days ago</p></div>
<div class="vcard"><div class="cover"><span class="dur">06:02</span><div class="stats"><span>♥ 1.8k</span><span>▶ 44k</span></div></div><h4>Weekend market vlog: street food tour</h4><p class="meta">Wanderfeed · 1 day ago</p></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0070d1; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0070d1; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 300; line-height: 1.25; letter-spacing: 0.1px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.45px; background: #0070d1; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.45px; background: transparent; color: #000000;
border: 1px solid #0070d1; border-radius: 9999px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0.1px; background: #ffffff; color: #000000;
border: 1px solid #00549d; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ffffff; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.5; background: #0070d1; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight:300; }
* { box-sizing:border-box; }
/* 3표면 교차: 블랙 → 블루 → 화이트 챕터가 위에서 아래로 흐른다.
타이포는 시그니처 weight 300(라이트)만 쓰고, PS 블루 필 CTA 하나가 유일한 색이다. */
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:700; margin:0; letter-spacing:0.02em; }
.navlinks { display:flex; gap:22px; font-size:12px; color:rgba(255,255,255,0.7); font-weight:400; }
.btn-blue { background:#0070d1; color:#fff; border:none; border-radius:999px; padding:9px 22px; font-weight:400; font-size:13px; }
.sec-black { height:180px; display:flex; align-items:center; padding:0 40px; position:relative; overflow:hidden; }
.sec-black::after { content:''; position:absolute; right:-60px; top:-40px; width:280px; height:280px; border-radius:50%;
background:radial-gradient(circle,rgba(0,112,209,0.35),transparent 65%); }
.sec-black h1 { font-size:38px; font-weight:300; letter-spacing:-0.1px; margin:0; max-width:460px; line-height:1.25; position:relative; z-index:2; }
.sec-black .console { position:absolute; right:50px; width:130px; height:130px; border-radius:8px;
background:linear-gradient(160deg,#2a2b30,#000); border:1px solid #333; }
.sec-blue { height:150px; background:#0070d1; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.sec-blue .badge { background:linear-gradient(90deg,#ffce21,#f5a623,#ee8e00); color:#121314; font-weight:700;
font-size:11px; padding:5px 12px; border-radius:4px; text-transform:uppercase; letter-spacing:0.04em; }
.sec-blue h2 { font-size:26px; font-weight:300; margin:8px 0 0; }
.sec-blue p { font-size:12px; color:rgba(255,255,255,0.85); margin:4px 0 0; font-weight:400; }
.sec-blue .render { width:100px; height:100px; border-radius:8px; background:rgba(255,255,255,0.15); }
.sec-white { background:#ffffff; color:#000; flex:1; display:flex; gap:14px; padding:22px 40px; }
.card { flex:1; background:#f5f7fa; border-radius:8px; padding:16px; }
.card h4 { font-size:15px; font-weight:400; margin:0 0 6px; }
.card p { font-size:11px; color:rgba(0,0,0,0.6); margin:0; font-weight:400; }
.card .dot { width:8px; height:8px; border-radius:50%; background:#0070d1; margin-bottom:8px; }
</style></head>
<body>
<nav>
<p class="brand">PlayStation</p>
<div class="navlinks"><span>PS5</span><span>Games</span><span>PS Plus</span><span>Store</span></div>
<button class="btn-blue">Shop now</button>
</nav>
<div class="sec-black">
<div class="console"></div>
<h1>Play Has No Limits</h1>
</div>
<div class="sec-blue">
<div>
<span class="badge">PS Plus</span>
<h2>More games. More perks.</h2>
<p>Essential, Extra, and Premium — pick your tier.</p>
</div>
<div class="render"></div>
</div>
<div class="sec-white">
<div class="card"><span class="dot"></span><h4>Console</h4><p>PS5 Pro — 8K-ready, ray tracing built in.</p></div>
<div class="card"><span class="dot"></span><h4>Accessories</h4><p>DualSense wireless controller, redefined.</p></div>
<div class="card"><span class="dot"></span><h4>News</h4><p>Latest updates from PlayStation Blog.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfaf7; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfaf7; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 300; line-height: 1.3; letter-spacing: 0.2px; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #42403a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; background: #fadca9; color: #231f20;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; background: #fcfaf7; color: #231f20;
border: 1px solid #fadca9; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fcfaf7; color: #231f20;
border: 1px solid #c6c3c1; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #42403a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fadca9; color: #231f20;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#fcfaf7; color:#231f20; font-family:'FuturaPT', 'Century Gothic', sans-serif;
}
*, *::before, *::after { box-sizing:border-box; }
.wrap{ position:relative; width:960px; height:640px; }
.nav{ height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#fcfaf7; }
.logo{ font-family:'BerettaSans', cursive; font-weight:700; font-size:22px; color:#231f20; }
.navlinks{ display:flex; gap:24px; }
.navlinks span{ font-size:12px; font-weight:600; color:#231f20; }
.cta{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; background:#231f20; color:#fadca9; padding:10px 18px; border-radius:999px; }
.hero{ height:266px; display:flex; align-items:center; padding:0 34px; gap:28px; }
.hero-text{ width:400px; }
.kicker{ font-family:'Etna', cursive; font-style:italic; font-size:15px; color:#e39aa0; margin-bottom:8px; }
.h1{ font-family:'BerettaSans', cursive; font-weight:700; font-size:34px; line-height:1.15; color:#231f20; margin-bottom:12px; }
.sub{ font-size:14px; line-height:1.55; color:#5a5350; max-width:340px; margin-bottom:18px; }
.btn{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; background:#231f20; color:#fadca9; padding:13px 24px; border-radius:999px; width:fit-content; }
.hero-visual{ flex:1; height:240px; position:relative; background:#f3e9d8; border-radius:20px; overflow:hidden; }
.patch{ position:absolute; left:200px; top:70px; width:64px; height:64px; border-radius:50%; background:#fadca9; border:3px solid #fff; }
.patch2{ position:absolute; left:130px; top:40px; width:40px; height:40px; border-radius:50%; background:#bcd6c4; }
.patch3{ position:absolute; left:180px; top:150px; width:36px; height:36px; border-radius:50%; background:#f0c2c8; }
.patch4{ position:absolute; left:270px; top:120px; width:30px; height:30px; border-radius:50%; background:#a9d4e3; }
.badge-fl{ position:absolute; right:30px; top:24px; background:#231f20; color:#fadca9; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:6px 14px; border-radius:999px; }
.section-title{ padding:16px 34px 8px; font-family:'BerettaSans', cursive; font-weight:700; font-size:17px; }
.grid{ display:flex; gap:16px; padding:0 34px; }
.card{ width:200px; background:#ffffff; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,0.05); padding:12px; }
.card-img{ width:100%; height:76px; border-radius:10px; margin-bottom:8px; }
.card-title{ font-size:13px; font-weight:700; margin-bottom:2px; }
.card-note{ font-size:10px; color:#8a8580; margin-bottom:8px; }
.row{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-size:12px; font-weight:700; color:#231f20; }
.tag{ font-size:9px; font-weight:700; text-transform:uppercase; background:#bcd6c4; color:#204030; padding:3px 9px; border-radius:999px; }
.footer{ position:absolute; bottom:0; left:0; width:960px; height:52px; background:#f3e9d8; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.footer span{ font-size:11px; color:#7a746e; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Hero Cosmetics</div>
<div class="navlinks">
<span>Patches</span>
<span>Cleansers</span>
<span>Our Story</span>
<span>Find in Store</span>
</div>
<div class="cta">Shop Now</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="kicker">a friend who happens to be a dermatologist</div>
<div class="h1">Skin stuff, minus the scary part.</div>
<div class="sub">Hydrocolloid patches and gentle cleansers for acne-prone skin — no clinical sterility, just what actually works.</div>
<div class="btn">Shop Mighty Patch</div>
</div>
<div class="hero-visual">
<div class="badge-fl">Best Seller</div>
<div class="patch2"></div>
<div class="patch"></div>
<div class="patch4"></div>
<div class="patch3"></div>
</div>
</div>
<div class="section-title">Bestsellers</div>
<div class="grid">
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#fadca9,#e39aa0);"></div>
<div class="card-title">Mighty Patch Original</div>
<div class="card-note">36 hydrocolloid dots</div>
<div class="row"><span class="price">$12.99</span><span class="tag">Cruelty-Free</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#bcd6c4,#a9d4e3);"></div>
<div class="card-title">Rescue Balm</div>
<div class="card-note">Post-blemish recovery</div>
<div class="row"><span class="price">$24.99</span><span class="tag">Vegan</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#f0c2c8,#fadca9);"></div>
<div class="card-title">Micropoint Patch</div>
<div class="card-note">For deep blemishes</div>
<div class="row"><span class="price">$24.99</span><span class="tag">Dermatologist Tested</span></div>
</div>
</div>
<div class="footer">
<span>© Hero Cosmetics</span>
<span>Ingredients · Community · Support</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e9e5d5; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e9e5d5; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.35; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #79765d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #5b2ea6; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fefefe; color: #222222;
border: 1px solid #5b2ea6; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fefefe; color: #222222;
border: 1px solid #b7b4a8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #79765d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #5b2ea6; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#e9e5d5; font-family:'Merriweather', Georgia, serif; color:#222222; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #d8d3bd;background:#e9e5d5;}
.logo{font-size:22px;font-weight:700;color:#5b2ea6;letter-spacing:.3px;}
.navlinks{display:flex;gap:24px;font-family:'Montserrat',Arial,sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#4b4b4b;}
.hero{height:250px;display:flex;background:#f9e8c5;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;}
.herotext .kick{font-family:'Montserrat',Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#576132;margin-bottom:12px;}
.herotext h1{font-size:32px;font-weight:400;color:#222;margin:0 0 12px;line-height:1.25;}
.herotext p{font-size:15px;color:#4b4b4b;margin:0 0 18px;max-width:320px;line-height:1.55;}
.btn{display:inline-block;background:#5b2ea6;color:#fff;font-family:'Montserrat',Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:14px 26px;border-radius:9999px;width:fit-content;}
.heroimg{width:54%;position:relative;background:linear-gradient(145deg,#3d452e,#576132 55%,#85650b);overflow:hidden;}
.heroimg:before{content:'';position:absolute;left:60px;top:40px;width:140px;height:170px;border-radius:12px;background:#f9e8c5;opacity:.14;}
.heroimg:after{content:'';position:absolute;right:40px;bottom:20px;width:110px;height:60px;border-radius:12px;background:#4c6063;opacity:.5;}
.sec{padding:22px 40px 0;}
.sectitle{font-size:20px;font-weight:700;color:#222;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:206px;background:#fff;border:1px solid #d8d3bd;border-radius:12px;padding:10px;position:relative;}
.thumb{height:98px;border-radius:8px;margin-bottom:10px;}
.badge{position:absolute;top:18px;left:18px;background:#5b2ea6;color:#fff;font-family:'Montserrat',Arial,sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 9px;border-radius:9999px;}
.ptitle{font-size:14px;font-weight:400;color:#222;line-height:1.3;}
.pprice{font-family:'Montserrat',Arial,sans-serif;font-size:13px;font-weight:700;color:#576132;margin-top:5px;}
</style>
<div class="nav">
<div class="logo">Magnolia</div>
<div class="navlinks"><div>Furniture</div><div>Kitchen</div><div>Textiles</div><div>Journal</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kick">The Autumn Edit</div>
<h1>A house that holds its stories.</h1>
<p>Heirloom-minded pieces for rooms you actually live in, chosen slowly and worn in well.</p>
<div class="btn">Shop The Edit</div>
</div>
<div class="heroimg"></div>
</div>
<div class="sec">
<div class="sectitle">Recipe Card Favorites</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#85650b,#f9e8c5);"></div><div class="ptitle">Hearth Ceramic Pitcher</div><div class="pprice">$58</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#576132,#e9e5d5);"></div><div class="ptitle">Sage Linen Table Runner</div><div class="pprice">$44</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4c6063,#e9e5d5);"></div><div class="ptitle">Slate Stoneware Bowl Set</div><div class="pprice">$76</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3d452e,#85650b);"></div><div class="ptitle">Forest Wool Throw</div><div class="pprice">$128</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #303030;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #303030;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #303030; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ee4b9b; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #fefefe; color: #ee4b9b;
border: 1px solid #ee4b9b; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fefefe; color: #303030;
border: 1px solid #cacaca; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ee4b9b; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#fefefe;font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;color:#303030;}
*{box-sizing:border-box;}
.promo{height:30px;background:#ee4b9b;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;letter-spacing:0.3px;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:19px;font-weight:700;letter-spacing:-0.3px;color:#010202;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;color:#545454;}
.searchicon{width:32px;height:32px;border-radius:999px;background:#f2f2f2;}
.hero{height:250px;display:flex;padding:26px 40px;gap:32px;}
.hero-text{width:400px;display:flex;flex-direction:column;justify-content:center;}
.pillbadge{display:inline-block;background:#ee4b9b;color:#fff;font-size:11px;font-weight:600;padding:5px 14px;border-radius:999px;margin-bottom:14px;width:fit-content;}
.headline{font-size:30px;font-weight:600;letter-spacing:-0.3px;line-height:1.25;color:#303030;margin-bottom:12px;}
.sub{font-size:14px;color:#545454;line-height:1.55;width:365px;margin-bottom:18px;}
.cta{display:inline-block;padding:13px 28px;background:#ee4b9b;color:#ffffff;border-radius:999px;font-size:13px;font-weight:600;}
.quizcard{flex:1;border-radius:12px;background:linear-gradient(135deg,#ffecfb,#f8c1d9);padding:22px;position:relative;}
.qc-title{font-size:16px;font-weight:600;color:#a01c3d;margin-bottom:8px;}
.qc-row{display:flex;gap:10px;margin-top:10px;}
.qc-chip{padding:7px 14px;background:#ffffff;border:1px solid #f8c1d9;border-radius:999px;font-size:11px;font-weight:600;color:#545454;}
.qc-fruit1{position:absolute;right:24px;top:28px;width:54px;height:54px;border-radius:27px;background:#fecf0a;}
.qc-fruit2{position:absolute;right:70px;top:74px;width:36px;height:36px;border-radius:18px;background:#f1f781;}
.section{padding:18px 40px 0 40px;display:flex;justify-content:space-between;align-items:baseline;}
.section-title{font-size:20px;font-weight:600;color:#303030;}
.section-link{font-size:12px;font-weight:600;color:#e10098;}
.grid{display:flex;gap:22px;padding:12px 40px 0 40px;}
.card{width:206px;background:#ffffff;border:1px solid #e0e0e0;border-radius:12px;overflow:hidden;}
.swatch{height:98px;position:relative;}
.badge{position:absolute;left:8px;top:8px;background:#ee4b9b;color:#fff;font-size:9px;font-weight:600;padding:3px 8px;border-radius:999px;}
.card-body{padding:10px 12px 13px 12px;}
.card-title{font-size:13px;font-weight:600;color:#303030;margin-bottom:6px;}
.card-price{font-size:13px;font-weight:600;color:#010202;}
</style>
<div class="promo">Free shipping on orders $50+ · Take the 60-second quiz</div>
<div class="nav">
<div class="logo">Hum Nutrition Vitamins 2</div>
<div class="navlinks"><span>Shop</span><span>Bundles</span><span>Quiz</span><span>Science</span></div>
<div class="searchicon"></div>
</div>
<div class="hero">
<div class="hero-text">
<div class="pillbadge">HUM Pink Approved</div>
<div class="headline">Personalized vitamins,<br/>picked for your body.</div>
<div class="sub">Answer a few questions and we'll build your daily stack — clean ingredients, real dosages, zero guesswork.</div>
<div class="cta">Start the Quiz</div>
</div>
<div class="quizcard">
<div class="qc-title">What's your #1 goal?</div>
<div class="qc-row"><div class="qc-chip">Clearer Skin</div><div class="qc-chip">Better Sleep</div></div>
<div class="qc-row"><div class="qc-chip">Gut Balance</div><div class="qc-chip">More Energy</div></div>
<div class="qc-fruit1"></div>
<div class="qc-fruit2"></div>
</div>
</div>
<div class="section"><div class="section-title">Shop the Counter</div><div class="section-link">See all products</div></div>
<div class="grid">
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#f8c1d9,#ee4b9b);"><div class="badge">Top Rated</div></div>
<div class="card-body"><div class="card-title">Daily Cleanse</div><div class="card-price">$25.00</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#f1f781,#fecf0a);"></div>
<div class="card-body"><div class="card-title">Big Chill</div><div class="card-price">$25.00</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#ee0aa4,#a01c3d);"><div class="badge">Bundle</div></div>
<div class="card-body"><div class="card-title">Base Control</div><div class="card-price">$25.00</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#f8c1d9,#f1f781);"></div>
<div class="card-body"><div class="card-title">Mighty Night</div><div class="card-price">$28.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefcf9; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefcf9; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 400; line-height: 1.55; margin: 0; color: #9ca3af; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 2px; background: #0a1e32; color: #fefcf9;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 2px; background: #fefcf9; color: #0a1e32;
border: 1px solid #0a1e32; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #fefcf9; color: #222222;
border: 1px solid #c7c6c3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ca3af; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 500; line-height: 1.2; letter-spacing: 1px; background: #0a1e32; color: #fefcf9;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fefcf9; font-family:'SainteColombe',Georgia,serif; color:#222222; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-family:'Helvetica Neue',Arial,sans-serif;font-size:14px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:#0a1e32;}
.navlinks{display:flex;gap:24px;font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:#0a1e32;}
.hero{height:250px;background:#0a1e32;color:#fefcf9;display:flex;align-items:center;padding:0 30px;gap:30px;}
.herotext{width:340px;}
.herotext h1{font-size:44px;font-weight:400;line-height:1.15;margin:0 0 14px;}
.herotext p{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;letter-spacing:.5px;color:#cfc2a7;margin:0 0 20px;}
.cta{display:inline-block;background:#9a825c;color:#fefcf9;font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;font-weight:500;letter-spacing:2px;text-transform:uppercase;padding:14px 32px;border-radius:9999px;}
.track{flex:1;height:180px;position:relative;border-radius:9999px;border:8px solid #9a825c;}
.rowlabel{padding:16px 30px 10px;font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:#222;}
.grid{display:flex;gap:16px;padding:0 30px;}
.card{width:196px;}
.thumb{height:120px;position:relative;}
.badge{position:absolute;top:0;left:0;background:#0a1e32;color:#fefcf9;font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;font-weight:500;letter-spacing:1px;text-transform:uppercase;padding:4px 8px;}
.ptitle{font-family:'Helvetica Neue',Arial,sans-serif;font-size:14px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;margin-top:10px;}
.pprice{font-size:16px;color:#6f737a;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Tracksmith</div>
<div class="navlinks"><div>Men's</div><div>Women's</div><div>Club</div><div>Journal</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Running as a craft.</h1>
<p>APPAREL FOR THE PRE-DAWN LONG RUN</p>
<div class="cta">Shop the Collection</div>
</div>
<div class="track"></div>
</div>
<div class="rowlabel">New Arrivals</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#0a1e32,#9a825c)"><span class="badge">New</span></div><div class="ptitle">Van Cortlandt Singlet</div><div class="pprice">$68</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#9a825c,#0a1e32)"></div><div class="ptitle">Session Shorts</div><div class="pprice">$58</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#556a63,#0a1e32)"><span class="badge" style="background:#be2624">Limited</span></div><div class="ptitle">Downeaster Jacket</div><div class="pprice">$168</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1b1b1b; color: #d6d6d6;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1b1b1b; color: #d6d6d6;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #d6d6d6; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #919191; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #ad631a; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #2b333f; color: #d6d6d6;
border: 1px solid #ad631a; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #141414; color: #d6d6d6;
border: 1px solid #4a4a4a; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #919191; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #1cc42f; color: #1b1b1b;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#1b1b1b; font-family:'Inter',Arial,Helvetica,sans-serif; color:#d6d6d6; }
*{box-sizing:border-box;}
.nav{height:60px;background:#1b1b1b;border-bottom:1px solid #262626;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:18px;font-weight:600;color:#d6d6d6;letter-spacing:0.3px;}
.search{width:300px;height:36px;background:#2b333f;border:1px solid #4d4d4d;border-radius:4px;display:flex;align-items:center;padding:0 12px;font-size:13px;color:#919191;}
.navlinks{display:flex;gap:18px;font-size:13px;font-weight:600;color:#919191;}
.navlinks .on{color:#ad631a;}
.hero{height:160px;display:flex;align-items:center;padding:0 30px;background:#000b41;}
.h1{font-size:28px;font-weight:600;color:#d6d6d6;margin:0 0 8px;max-width:420px;}
.sub{font-size:13px;color:#73859f;max-width:380px;}
.strip{display:flex;gap:8px;padding:12px 30px;}
.chip{background:#2b333f;color:#919191;border-radius:9999px;font-size:12px;padding:6px 16px;}
.chip.on{background:#ad631a;color:#fff;}
.grid{display:flex;gap:12px;padding:0 30px;}
.card{width:206px;background:#2b333f;border-radius:8px;padding:16px;}
.thumb{height:100px;background:#141414;border-radius:4px;margin-bottom:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#ad631a;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:2px 8px;border-radius:2px;}
.badge.sale{background:#ff7734;}
.ptitle{font-size:14px;font-weight:600;color:#d6d6d6;}
.pprice{font-size:16px;font-weight:700;color:#ad631a;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:52px;background:#1b1b1b;border-top:1px solid #262626;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;color:#73859f;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Retro City Games</div>
<div class="search">Search cartridges, consoles...</div>
<div class="navlinks"><div class="on">NES</div><div>SNES</div><div>Genesis</div><div>Boxed</div></div>
</div>
<div class="hero">
<div>
<div class="h1">Late-night browsing, physical store energy.</div>
<div class="sub">Cartridges, consoles, and box art — under fluorescent light, one bin at a time.</div>
</div>
</div>
<div class="strip">
<div class="chip on">NES</div><div class="chip">SNES</div><div class="chip">Genesis</div><div class="chip">Boxed</div><div class="chip">Loose</div>
</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb"></div><div class="ptitle">Cartridge Bundle: NES Sports</div><div class="pprice">$34.00</div></div>
<div class="card"><div class="badge sale">Sale</div><div class="thumb"></div><div class="ptitle">Boxed Genesis Console</div><div class="pprice">$89.00</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">SNES Controller — OEM</div><div class="pprice">$28.00</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Manual-Only Lot (12)</div><div class="pprice">$19.00</div></div>
</div>
<div class="footer"><span>© Retro City Games — cartridge edges, console vents</span><span>Boxed · Loose · Manual</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eef9fd; color: #181818;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eef9fd; color: #181818;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #181818; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #c74c00; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #ffffff; color: #c74c00;
border: 1px solid #c74c00; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #181818;
border: 1px solid #b8c1c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ee5f9e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Roboto, Arial, sans-serif; background:#eef9fd; color:#221f1f; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:20px;font-weight:700;color:#c74c00;}
.navlinks{display:flex;gap:20px;font-size:15px;font-weight:600;}
.search{width:220px;height:38px;border:2px solid #c74c00;border-radius:9999px;display:flex;align-items:center;padding:0 16px;font-size:13px;color:#444;}
.hero{height:230px;background:#1f9cd8;display:flex;align-items:center;padding:0 30px;color:#fff;border-radius:16px;margin:10px 30px 0;width:900px;}
.herotext{max-width:420px;}
.headline{font-size:28px;font-weight:700;line-height:1.25;margin-bottom:10px;}
.btn{display:inline-block;background:#fff;color:#c74c00;font-size:15px;font-weight:600;padding:12px 24px;border-radius:8px;}
.shapes{margin-left:auto;position:relative;width:180px;height:150px;}
.shapes .c1{position:absolute;width:70px;height:70px;border-radius:50%;background:#fac300;top:10px;left:20px;}
.shapes .c2{position:absolute;width:60px;height:60px;background:#ee5f9e;top:60px;left:80px;border-radius:12px;}
.shapes .c3{position:absolute;width:50px;height:50px;background:#80b800;top:20px;left:110px;border-radius:8px;transform:rotate(20deg);}
.sec{padding:16px 30px;}
.sectitle{font-size:20px;font-weight:700;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border-radius:12px;overflow:hidden;}
.thumb{height:120px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#ee5f9e;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.info{padding:10px 12px 12px;}
.title{font-size:15px;font-weight:600;}
.stars{font-size:12px;color:#fac300;margin-top:2px;}
.price{font-family:'Roboto Condensed',sans-serif;font-size:18px;font-weight:700;color:#c74c00;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Mindware</div>
<div class="navlinks"><span>Brainy Toys</span><span>Games</span><span>STEM</span><span>Puzzles</span></div>
<div class="search">Search toys, ages, brand...</div>
</div>
<div class="hero">
<div class="herotext">
<div class="headline">Curiosity, gift-wrapped.</div>
<div class="btn">Shop STEM Toys</div>
</div>
<div class="shapes"><div class="c1"></div><div class="c2"></div><div class="c3"></div></div>
</div>
<div class="sec">
<div class="sectitle">Top Rated for Ages 6-9</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#1f9cd8,#80b800)"><div class="badge">Sale</div></div><div class="info"><div class="title">Gravity Maze Logic Game</div><div class="stars">★★★★★ 4.8</div><div class="price">$29.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#fac300,#ee5f9e)"></div><div class="info"><div class="title">Circuit Explorer Kit</div><div class="stars">★★★★☆ 4.5</div><div class="price">$34.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#80b800,#1f9cd8)"></div><div class="info"><div class="title">1000-Piece Galaxy Puzzle</div><div class="stars">★★★★★ 4.9</div><div class="price">$19.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #040404; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #040404; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 400; line-height: 1.25; letter-spacing: 0.5px; background: #bd0000; color: #ffffff;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 400; line-height: 1.25; letter-spacing: 0.5px; background: #1e1e1e; color: #fbfbfb;
border: 1px solid #bd0000; border-radius: 6px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1e1e1e; color: #fbfbfb;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #bd0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{
width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;
background:#040404;font-family:'Alice',Georgia,'Times New Roman',serif;
color:#fbfbfb;
}
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid #272727;}
.logo{font-size:19px;font-weight:400;color:#fbfbfb;letter-spacing:0.3px;}
.logo span{color:#bd0000;}
.navlinks{display:flex;gap:20px;}
.navlinks span{font-size:13px;color:#aaaaaa;}
.navlinks span.active{color:#bd0000;}
.hero{padding:24px 26px 14px;display:flex;gap:24px;align-items:center;}
.heroText{flex:1.15;}
.heroText h1{font-size:28px;font-weight:400;line-height:1.25;margin:0 0 8px;color:#fbfbfb;}
.heroText p{font-size:13px;color:#aaaaaa;margin:0 0 16px;max-width:400px;}
.heroBtn{display:inline-block;background:#bd0000;color:#fff;font-size:13px;font-weight:400;padding:11px 24px;border-radius:6px;}
.heroDisc{flex:1;height:150px;display:flex;align-items:center;justify-content:center;}
.disc{width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,#1e1e1e 0%,#040404 70%);border:2px solid #272727;position:relative;}
.disc::after{content:"";position:absolute;top:40%;left:40%;width:20%;height:20%;border-radius:50%;background:#bd0000;}
.neon{position:absolute;top:8px;left:8px;color:#cc3b3b;font-size:11px;font-style:italic;}
.section{padding:8px 26px 0;}
.sectitle{font-size:15px;font-weight:400;color:#fbfbfb;margin:0 0 10px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#111111;border-radius:10px;overflow:hidden;}
.photo{aspect-ratio:1/1;background:linear-gradient(150deg,#1e1e1e,#040404);position:relative;}
.photo .ring{position:absolute;inset:26%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#333 0%,#040404 70%);border:2px solid #444;}
.salebadge{position:absolute;top:6px;left:6px;background:#bd0000;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:6px;}
.ctitle{font-size:13px;font-weight:400;color:#fbfbfb;padding:8px 10px 0;}
.cartist{font-size:11px;color:#aaaaaa;padding:0 10px;}
.cprice{font-size:13px;color:#cc3b3b;padding:2px 10px 10px;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#111111;color:#aaaaaa;font-size:11px;padding:10px 26px;display:flex;justify-content:space-between;border-top:1px solid #272727;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Grimey S New And Loved Music<span>.</span></div>
<div class="navlinks"><span class="active">New Arrivals</span><span>Used Vinyl</span><span>In-Store Events</span><span>About</span></div>
</div>
<div class="hero">
<div class="heroText">
<h1>New and loved, side by side.</h1>
<p>A dimly lit shop floor of new releases, used gems, and the records nobody else bothered to keep in stock.</p>
<div class="heroBtn">Browse New Arrivals</div>
</div>
<div class="heroDisc"><div class="neon">est. Nashville</div><div class="disc"></div></div>
</div>
<div class="section">
<div class="sectitle">Just In</div>
<div class="grid">
<div class="card"><div class="photo"><div class="salebadge">Used</div><div class="ring"></div></div>
<div class="ctitle">Corner Store Sessions</div><div class="cartist">Low Wattage</div><div class="cprice">$18.00</div></div>
<div class="card"><div class="photo"><div class="ring"></div></div>
<div class="ctitle">Second Hand Weather</div><div class="cartist">June Verdant</div><div class="cprice">$24.00</div></div>
<div class="card"><div class="photo"><div class="ring"></div></div>
<div class="ctitle">Neon Hymnbook</div><div class="cartist">The Overnight Choir</div><div class="cprice">$22.00</div></div>
<div class="card"><div class="photo"><div class="salebadge">Used</div><div class="ring"></div></div>
<div class="ctitle">Sidewalk Radio</div><div class="cartist">Marisol & The Static</div><div class="cprice">$16.00</div></div>
</div>
</div>
<div class="footer"><span>© Grimey S New And Loved Music</span><span>Nashville, TN · Since 1999</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4438; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4438; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f6f6f9; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4438; color: #f6f6f9;
border: 1px solid #f6f6f9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4438; color: #f5f5f5;
border: 1px solid #fd6056; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fe6057; color: #f6f6f9;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6f6f9; color:#232334; box-sizing:border-box;
font-family:"Pretendard Variable", -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; background:#fff; }
.nav .brand { font-weight:700; font-size:18px; color:#ff4438; }
.nav .links { display:flex; gap:20px; font-size:14px; color:#333333; }
.navbtn { background:#ff4438; color:#fff; border-radius:8px; padding:6px 16px; font-size:15px; font-weight:600; }
.hero { text-align:center; padding:40px 60px 0; }
.hero h1 { font-size:44px; font-weight:700; line-height:1.3; margin:0 0 14px; color:#232334; }
.hero h1 span { color:#ff4438; }
.hero p { font-size:15px; color:#666b80; margin:0 0 20px; }
.herobtn { background:#ff4438; color:#fff; border-radius:8px; padding:12px 34px; font-size:16px; font-weight:600; display:inline-block; }
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; padding:30px 40px 0; }
.card { background:#f6f6f9; border-radius:30px; padding:30px; }
.card h4 { font-size:16px; font-weight:700; margin:0 0 8px; }
.card p { font-size:14px; color:#333333; margin:0; line-height:1.5; }
.card .tag { display:inline-block; background:#fff; color:#ff4438; font-size:11px; font-weight:700; border-radius:6px;
padding:3px 10px; margin-bottom:10px; }
</style></head>
<body>
<nav class="nav">
<div class="brand">Classum</div>
<div class="links"><span>Solutions</span><span>Learning</span><span>University LMS</span></div>
<button class="navbtn">Contact sales</button>
</nav>
<div class="hero">
<h1>Q&A and learning,<br>built for <span>engagement</span></h1>
<p>An AI LMS that keeps instructors, students, and teams actually talking.</p>
<span class="herobtn">Request a demo</span>
</div>
<div class="grid">
<div class="card"><span class="tag">University</span><h4>AI LMS for classrooms</h4><p>Real-time Q&A, anonymous questions, and AI-summarized discussion for every lecture.</p></div>
<div class="card"><span class="tag">Corporate</span><h4>HR & skills training</h4><p>Onboarding, compliance, and skill-building tracked in one dashboard.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; background: #00e6aa; color: #121212;
border: none; border-radius: 12px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; background: #ffffff; color: #121212;
border: 1px solid #00e6aa; border-radius: 12px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.45; letter-spacing: 0.05em; background: #eb0004; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Fy!</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Geist',-apple-system,'Segoe UI',sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-family:'Playfair Display',Georgia,serif;font-size:22px;font-weight:700;color:#121212;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;}
.search-pill{background:#f5f5f5;border:1px solid #dedede;border-radius:9999px;padding:8px 18px;font-size:13px;color:#666;width:220px;}
.hero{background:#121212;color:#fff;padding:40px 32px;min-height:220px;display:flex;align-items:center;justify-content:space-between;}
.hero-copy{max-width:440px;}
h1{font-family:'Playfair Display',Georgia,serif;font-size:44px;font-weight:700;line-height:1.15;letter-spacing:-0.5px;margin:0 0 14px;}
.sub{font-size:15px;color:#ccc;margin:0 0 20px;}
.cta{background:#00e6aa;color:#121212;border:none;border-radius:12px;padding:14px 26px;font-size:15px;font-weight:500;}
.frame{width:200px;height:160px;background:#fff;padding:12px;border-radius:4px;box-shadow:0 12px 32px rgba(0,0,0,0.3);}
.art{width:100%;height:100%;background:linear-gradient(140deg,#eb0004,#ffb500 60%,#00e6aa);border-radius:2px;}
.section{padding:24px 32px 0;}
.rowhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
.rowhead h2{font-family:'Playfair Display',Georgia,serif;font-size:24px;font-weight:600;margin:0;}
.chips{display:flex;gap:8px;}
.chip{background:#f5f5f5;border:1px solid #dedede;border-radius:9999px;padding:6px 14px;font-size:13px;color:#666;}
.chip.active{background:#121212;color:#fff;border:none;}
.grid{display:flex;gap:16px;}
.card{flex:1;border:1px solid #dedede;border-radius:8px;padding:8px;}
.card-img{background:#f5f5f5;border-radius:8px;height:120px;position:relative;overflow:hidden;}
.card-art{position:absolute;inset:10px;border-radius:4px;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:3px 8px;border-radius:4px;color:#fff;}
.badge.sale{background:#eb0004;}
.badge.featured{background:#ffb500;color:#121212;}
.card-title{font-size:14px;font-weight:600;margin-top:10px;padding:0 6px;}
.card-artist{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:13px;color:#666;padding:0 6px;margin-top:2px;}
.card-price{font-family:'Geist Mono',monospace;font-size:16px;font-weight:500;padding:6px 6px 4px;}
</style>
<div class="nav">
<div class="navlinks"><span>Discover</span><span>Artists</span><span>Collections</span></div>
<div class="logo">FY</div>
<input class="search-pill" placeholder="Search artists, styles, colors...">
</div>
<div class="hero">
<div class="hero-copy">
<h1>Art you didn't<br>know you needed</h1>
<p class="sub">Independent artists, algorithmically surfaced, delivered framed to your door.</p>
<button class="cta">Explore Prints</button>
</div>
<div class="frame"><div class="art"></div></div>
</div>
<div class="section">
<div class="rowhead"><h2>Trending Now</h2><div class="chips"><div class="chip active">All</div><div class="chip">Abstract</div><div class="chip">Botanical</div><div class="chip">Portrait</div></div></div>
<div class="grid">
<div class="card"><div class="card-img"><div class="badge featured">Featured</div><div class="card-art" style="background:linear-gradient(135deg,#ffb500,#eb0004);"></div></div><div class="card-title">Coastal Fragment No. 4</div><div class="card-artist">Mira Ostberg</div><div class="card-price">$68.00</div></div>
<div class="card"><div class="card-img"><div class="badge sale">Sale</div><div class="card-art" style="background:linear-gradient(135deg,#00e6aa,#121212);"></div></div><div class="card-title">Night Terrace</div><div class="card-artist">Julen Arce</div><div class="card-price">$52.00</div></div>
<div class="card"><div class="card-img"><div class="card-art" style="background:linear-gradient(135deg,#c8c8c8,#eb0004);"></div></div><div class="card-title">Quiet Bloom</div><div class="card-artist">Nadia Ferro</div><div class="card-price">$68.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff6363; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff6363; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c3636; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #07080a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6363; color: #07080a;
border: 1px solid #07080a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff6363; color: #111111;
border: 1px solid #d95656; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c3636; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d75455; color: #07080a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#07080a; color:#f9f9f9; box-sizing:border-box;
font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #2f3031; }
.brand { font-size:15px; font-weight:600; color:#f9f9f9; letter-spacing:0.2px; display:flex; align-items:center; gap:8px; }
.brand .dot { width:16px; height:16px; border-radius:5px; background:linear-gradient(135deg,#ff6363,#ae2c00); }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; color:#9c9c9d; }
.navlinks span:first-child { color:#ffffff; }
.cta { background:hsla(0,0%,100%,0.815); color:#18191a; border:none; border-radius:9999px; padding:8px 16px;
font-size:13px; font-weight:600; box-shadow:rgba(255,255,255,0.1) 0px 1px 0px 0px inset; }
.hero { position:relative; padding:40px 32px 24px; text-align:center; }
.badge { display:inline-block; background:#1b1c1e; color:#ffffff; border-radius:6px; padding:3px 10px;
font-size:11px; font-weight:600; letter-spacing:0.4px; margin-bottom:16px; }
.hero h1 { font-size:38px; font-weight:600; line-height:1.1; margin:0 0 12px; letter-spacing:-0.4px; }
.hero h1 span { color:#ff6363; }
.hero p { font-size:15px; color:#cecece; margin:0 0 22px; font-weight:500; }
/* command palette — the centerpiece */
.palette { width:620px; margin:0 auto; background:#101111; border-radius:14px;
border:1px solid rgba(255,255,255,0.06);
box-shadow: rgb(27,28,30) 0px 0px 0px 1px, rgb(7,8,10) 0px 0px 0px 1px inset, rgba(0,0,0,0.5) 0px 20px 40px; }
.palette-input { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid #2f3031; }
.palette-input .icon { width:16px; height:16px; border:2px solid #6a6b6c; border-radius:50%; position:relative; flex-shrink:0; }
.palette-input .icon::after { content:''; position:absolute; width:6px; height:2px; background:#6a6b6c; right:-5px; bottom:-1px; transform:rotate(45deg); }
.palette-input .txt { font-size:14px; color:#f9f9f9; font-weight:500; }
.palette-input .txt .cursor { display:inline-block; width:1px; height:14px; background:#ff6363; vertical-align:middle; margin-left:2px; }
.plist { padding:8px; text-align:left; }
.prow { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-radius:8px; }
.prow.active { background:#1b1c1e; }
.prow .left { display:flex; align-items:center; gap:10px; }
.prow .sw { width:26px; height:26px; border-radius:7px; flex-shrink:0; }
.sw.sw1 { background:linear-gradient(135deg,#ff6363,#ae2c00); }
.sw.sw2 { background:linear-gradient(135deg,#55b3ff,#0a449b); }
.sw.sw3 { background:linear-gradient(135deg,#5fc992,#1b5c3c); }
.sw.sw4 { background:linear-gradient(135deg,#ffbc33,#8a5e00); }
.prow .label { font-size:13px; font-weight:500; color:#f9f9f9; }
.prow .sub { font-size:11px; color:#6a6b6c; margin-top:1px; }
.prow .kbd { display:flex; gap:4px; }
.key { width:22px; height:22px; border-radius:5px; background:linear-gradient(#121212,#0d0d0d);
box-shadow:rgba(0,0,0,0.4) 0px 1.5px 0.5px 2.5px; display:flex; align-items:center; justify-content:center;
font-size:10px; color:#c0c0c0; font-weight:600; }
.cards { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:22px 32px 28px; }
.card { background:#101111; border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:16px;
box-shadow:rgba(215,201,175,0.05) 0px 0px 20px 5px; }
.card .tag { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; color:#55b3ff; }
.card h3 { font-size:15px; font-weight:500; margin:8px 0 6px; color:#ffffff; }
.card p { font-size:12px; color:#9c9c9d; margin:0; line-height:1.5; }
footer { position:relative; border-top:1px solid #2f3031; padding:14px 32px;
display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#6a6b6c; }
</style></head>
<body>
<nav>
<p class="brand"><span class="dot"></span>Raycast</p>
<div class="navlinks"><span>Store</span><span>Extensions</span><span>Blog</span><span>Pro</span></div>
<button class="cta">Download</button>
</nav>
<section class="hero">
<span class="badge">RAYCAST AI</span>
<h1>Your shortcut to <span>everything</span></h1>
<p>A collection of powerful productivity tools, all within an extendable launcher.</p>
<div class="palette">
<div class="palette-input">
<span class="icon"></span>
<span class="txt">create quick link<span class="cursor"></span></span>
</div>
<div class="plist">
<div class="prow active">
<div class="left"><span class="sw sw1"></span><div><div class="label">Create Quick Link</div><div class="sub">Raycast</div></div></div>
<div class="kbd"><span class="key">⏎</span></div>
</div>
<div class="prow">
<div class="left"><span class="sw sw2"></span><div><div class="label">Search Snippets</div><div class="sub">Snippets</div></div></div>
<div class="kbd"><span class="key">⌘</span><span class="key">K</span></div>
</div>
<div class="prow">
<div class="left"><span class="sw sw3"></span><div><div class="label">Clipboard History</div><div class="sub">Clipboard</div></div></div>
<div class="kbd"><span class="key">⌥</span><span class="key">V</span></div>
</div>
<div class="prow">
<div class="left"><span class="sw sw4"></span><div><div class="label">Ask AI</div><div class="sub">Raycast AI</div></div></div>
<div class="kbd"><span class="key">⌘</span><span class="key">/</span></div>
</div>
</div>
</div>
</section>
<section class="cards">
<div class="card"><span class="tag">Extensions</span><h3>1,300+ community extensions</h3><p>Install tools built by the community, or build your own in minutes.</p></div>
<div class="card"><span class="tag">AI</span><h3>Chat with every major model</h3><p>Access GPT, Claude, and more from a single command bar.</p></div>
<div class="card"><span class="tag">Teams</span><h3>Shared snippets & quicklinks</h3><p>Keep your whole team in sync without leaving the keyboard.</p></div>
</section>
<footer>
<span>© Raycast</span>
<span>Built for macOS · Windows · Raycast Pro</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f2f3ef; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f2f3ef; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.35; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #3c3a36; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #ab8c52; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #f2f3ef; color: #212121;
border: 1px solid #ab8c52; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f2f3ef; color: #212121;
border: 1px solid #bebebc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #3c3a36; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #7cb2a6; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Ettitude — Home</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f2f3ef; color:#494742;
font-family:'Inter','Figtree',-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box;}
.page{width:960px;height:640px;display:flex;flex-direction:column;}
header{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#f2f3ef;}
.logo{font-family:'Montserrat','Figtree',sans-serif;font-size:18px;font-weight:600;color:#212121;letter-spacing:0.3px;}
nav{display:flex;gap:22px;}
nav a{font-family:'Figtree','Inter',sans-serif;font-size:12px;font-weight:500;color:#494742;}
.nav-cta{background:#ab8c52;color:#fff;padding:9px 20px;border-radius:999px;font-size:12px;font-weight:500;}
.hero{display:flex;padding:22px 36px;gap:28px;background:#f5f2ec;border-radius:20px;margin:0 20px;align-items:center;}
.hero-copy{flex:1;}
.hero-copy .kicker{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:#a18538;margin-bottom:10px;font-weight:600;}
.hero-copy h1{font-family:'Montserrat','Figtree',sans-serif;font-size:30px;font-weight:600;color:#212121;line-height:1.25;margin:0 0 12px;}
.hero-copy p{font-size:13px;color:#494742;max-width:320px;margin:0 0 16px;line-height:1.7;}
.hero-cta{display:inline-block;background:#ab8c52;color:#fff;padding:11px 24px;border-radius:999px;font-size:12px;font-weight:500;}
.bedding{width:250px;height:150px;border-radius:22px;background:linear-gradient(150deg,#dbccbc,#e8dfd0);position:relative;box-shadow:0 10px 30px rgba(171,140,82,0.18);}
.bedding::after{content:'';position:absolute;left:16%;top:22%;width:60%;height:32%;background:#f2f3ef;border-radius:16px;}
main{flex:1;padding:18px 36px 0;}
.row-head{display:flex;justify-content:space-between;margin-bottom:12px;}
.row-head h2{font-family:'Montserrat','Figtree',sans-serif;font-size:16px;font-weight:600;margin:0;color:#212121;}
.row-head span{font-size:11px;color:#a18538;font-weight:500;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#ffffff;border-radius:16px;padding:10px;box-shadow:0 2px 8px rgba(33,33,33,0.05);}
.thumb{height:64px;border-radius:12px;background:linear-gradient(150deg,#f0ede2,#dbccbc);margin-bottom:8px;}
.card h4{font-size:11.5px;margin:0 0 4px;color:#212121;font-weight:600;}
.card .desc{font-size:10px;color:#3c3a36;margin-bottom:6px;}
.card .price{font-size:13px;font-weight:600;color:#ab8c52;}
footer{background:#1f2a27;color:#f2f3ef;padding:16px 36px;display:flex;justify-content:space-between;align-items:center;margin-top:16px;border-radius:20px 20px 0 0;}
footer span{font-size:10px;color:#c8cabb;}
</style>
<div class="page">
<header>
<div class="logo">Ettitude</div>
<nav><a>Bedding</a><a>Loungewear</a><a>Bath</a><a>Our Fabric</a></nav>
<div class="nav-cta">Shop Bamboo</div>
</header>
<div class="hero">
<div class="hero-copy">
<div class="kicker">Sustainable Bamboo Lyocell</div>
<h1>Sleep, softened by nature's own material.</h1>
<p>Cool-touch bamboo sheets and loungewear, dyed in earthy, quiet tones for a calmer bedroom.</p>
<div class="hero-cta">Shop Sheet Sets</div>
</div>
<div class="bedding"></div>
</div>
<main>
<div class="row-head"><h2>Bestselling Bedding</h2><span>Shop the Collection →</span></div>
<div class="grid">
<div class="card"><div class="thumb"></div><h4>Signature Sateen Sheet Set</h4><div class="desc">Fog Grey · Queen</div><div class="price">$189</div></div>
<div class="card"><div class="thumb"></div><h4>Bamboo Lyocell Duvet Cover</h4><div class="desc">Warm Sand · King</div><div class="price">$219</div></div>
<div class="card"><div class="thumb"></div><h4>CoolBamboo Pillowcases</h4><div class="desc">Set of 2 · Sage</div><div class="price">$59</div></div>
<div class="card"><div class="thumb"></div><h4>Weighted Bamboo Blanket</h4><div class="desc">15lb · Clay</div><div class="price">$149</div></div>
</div>
</main>
<footer>
<span>© Ettitude — Sustainable Bamboo Textiles</span>
<span>Our Fabric Story · Care Guide · Sustainability</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f6f6; color: #1f1f1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f6f6; color: #1f1f1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1f1f1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ef8114; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f5f6f6; color: #1f1f1f;
border: 1px solid #ef8114; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; background: #f5f6f6; color: #1f1f1f;
border: 1px solid #c0c0c0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ef8114; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f6f6; font-family:'Francisco','Brut Grotesque',sans-serif; color:#1f1f1f; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #c6c4ba;}
.logo{font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;}
.navlinks .active{color:#ef8114;border-bottom:2px solid #ef8114;padding-bottom:20px;}
.hero{height:220px;background:#1f1f1f;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;position:relative;}
.hero:before{content:'';position:absolute;inset:0;background:rgba(31,31,31,0.4);}
.herotext{z-index:2;}
.herotext h1{font-size:32px;font-weight:700;margin:0 0 12px;}
.btn{background:#ef8114;color:#fff;font-size:15px;font-weight:600;padding:14px 32px;border-radius:4px;z-index:2;}
.tiles{display:flex;gap:12px;padding:16px 32px;}
.tile{flex:1;background:#f2f2f2;border-radius:8px;padding:16px;text-align:center;font-size:16px;font-weight:500;}
.grid{display:flex;gap:14px;padding:0 32px;}
.card{flex:1;background:#fff;border-radius:8px;padding:16px;position:relative;}
.badge{position:absolute;top:12px;left:12px;font-size:11px;font-weight:700;text-transform:uppercase;color:#fff;padding:2px 8px;border-radius:2px;}
.thumb{aspect-ratio:1/1;background:#f2f2f2;border-radius:4px;margin-bottom:10px;}
.pname{font-size:16px;font-weight:500;}
.pprice{font-size:20px;font-weight:700;margin-top:4px;}
.stars{color:#ffb800;font-size:13px;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Rtic Outdoors</div>
<div class="navlinks"><div class="active">Coolers</div><div>Drinkware</div><div>Totes</div><div>Apparel</div></div>
</div>
<div class="hero">
<div class="herotext"><h1>Built like a camp stove.<br>Priced like value.</h1><div class="btn">Shop Coolers</div></div>
</div>
<div class="tiles">
<div class="tile">Hard Coolers</div><div class="tile">Soft Coolers</div><div class="tile">Tumblers</div><div class="tile">Backpacks</div>
</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#ef8114">Sale</span><div class="thumb"></div><div class="pname">65 QT Ultra-Tough Cooler</div><div class="pprice">$249.99</div><div class="stars">★★★★★ (1,204)</div></div>
<div class="card"><span class="badge" style="background:#737a4e">New</span><div class="thumb"></div><div class="pname">30oz Tumbler</div><div class="pprice">$24.99</div><div class="stars">★★★★☆ (532)</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Day Cooler Backpack</div><div class="pprice">$89.99</div><div class="stars">★★★★★ (218)</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffc300; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffc300; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6109; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffd100; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffc300; color: #000000;
border: 1px solid #ffd100; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffc300; color: #111111;
border: 1px solid #d9a703; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6109; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ffc500; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f5; color:#222222; box-sizing:border-box;
font-family:"PingFang SC", -apple-system, "Microsoft YaHei", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#ffffff; display:flex; align-items:center; padding:0 28px; gap:16px; }
.brand { font-size:17px; font-weight:700; color:#222222; margin:0; }
.brand span { color:#ffc300; }
.city { font-size:13px; color:#888888; }
.search { flex:1; max-width:340px; height:32px; background:#f5f5f5; border-radius:20px; display:flex;
align-items:center; padding:0 16px; font-size:13px; color:#bbbbbb; }
.cart { margin-left:auto; background:#ffc300; color:#222222; border-radius:8px; height:34px; padding:0 18px;
display:flex; align-items:center; font-size:14px; font-weight:600; }
.icon-grid { background:#ffffff; display:grid; grid-template-columns:repeat(8,1fr); gap:6px; padding:14px 28px; }
.icon-tile { display:flex; flex-direction:column; align-items:center; gap:6px; }
.icon-tile .ic { width:38px; height:38px; border-radius:10px; }
.icon-tile span { font-size:11px; color:#222222; }
.ic.c1{background:#ff8c42;} .ic.c2{background:#ff4b10;} .ic.c3{background:#00b578;} .ic.c4{background:#3d7fff;}
.ic.c5{background:#ffc300;} .ic.c6{background:#ff5722;} .ic.c7{background:#8e6ce6;} .ic.c8{background:#00b8d9;}
.feed { display:flex; gap:14px; padding:14px 28px; }
.card { flex:1; background:#ffffff; border-radius:8px; padding:10px; }
.cover { width:100%; aspect-ratio:1/1; border-radius:6px; margin-bottom:8px; }
.cover.a{ background:linear-gradient(140deg,#ffd76a,#ff8c42);} .cover.b{background:linear-gradient(140deg,#8fe3c4,#00b578);}
.cover.c{ background:linear-gradient(140deg,#a9c8ff,#3d7fff);}
.name { font-size:15px; font-weight:500; margin-bottom:4px; }
.rating { font-size:12px; color:#ffb000; margin-bottom:4px; }
.meta { font-size:12px; color:#888888; margin-bottom:6px; }
.price-row { display:flex; align-items:baseline; justify-content:space-between; }
.price { font-size:17px; font-weight:700; color:#ff4b10; }
.tag { background:#ff4b10; color:#ffffff; border-radius:4px; padding:2px 6px; font-size:10px; }
</style></head>
<body>
<nav>
<p class="brand"><span>●</span> Meituan</p>
<span class="city">Seoul ▾</span>
<div class="search">Search restaurants, hotels, deals</div>
<div class="cart">Sign in</div>
</nav>
<div class="icon-grid">
<div class="icon-tile"><div class="ic c1"></div><span>Delivery</span></div>
<div class="icon-tile"><div class="ic c2"></div><span>Dining</span></div>
<div class="icon-tile"><div class="ic c3"></div><span>Hotels</span></div>
<div class="icon-tile"><div class="ic c4"></div><span>Movies</span></div>
<div class="icon-tile"><div class="ic c5"></div><span>Grocery</span></div>
<div class="icon-tile"><div class="ic c6"></div><span>Deals</span></div>
<div class="icon-tile"><div class="ic c7"></div><span>Travel</span></div>
<div class="icon-tile"><div class="ic c8"></div><span>More</span></div>
</div>
<div class="feed">
<div class="card"><div class="cover a"></div><div class="name">Golden Wok Kitchen</div>
<div class="rating">★★★★★ 4.8 (2.1k)</div><div class="meta">Chinese · 0.6km · 25min</div>
<div class="price-row"><span class="price">¥28</span><span class="tag">Free delivery</span></div></div>
<div class="card"><div class="cover b"></div><div class="name">Green Leaf Salads</div>
<div class="rating">★★★★★ 4.6 (890)</div><div class="meta">Healthy · 1.1km · 30min</div>
<div class="price-row"><span class="price">¥19</span><span class="tag">-¥10</span></div></div>
<div class="card"><div class="cover c"></div><div class="name">Harborview Hotel</div>
<div class="rating">★★★★★ 4.7 (3.4k)</div><div class="meta">Hotel · 2.3km</div>
<div class="price-row"><span class="price">¥388</span><span class="tag">Limited</span></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #e6ff55; color: #121212;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #ffffff; color: #121212;
border: 1px solid #e6ff55; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e6ff55; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Inter',Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #dedede;}
.logo{font-size:22px;font-weight:700;color:#121212;letter-spacing:-.4px;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;letter-spacing:.3px;color:#333333;}
.sale{color:#333;background:#e6ff55;padding:3px 9px;border-radius:2px;}
.hero{height:250px;display:flex;background:#fceee3;padding:0 34px;align-items:center;}
.heroText{width:430px;}
.h1{font-size:30px;font-weight:700;line-height:1.2;letter-spacing:-.4px;color:#121212;margin:0 0 12px;}
.sub{font-size:15px;line-height:1.5;color:#333333;margin:0 0 20px;max-width:370px;}
.btn{display:inline-block;background:#e6ff55;color:#121212;font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:14px 26px;border-radius:2px;}
.blob{margin-left:auto;width:280px;height:190px;position:relative;}
.shape1{position:absolute;width:180px;height:180px;border-radius:50%;background:#e6ff55;top:0;right:20px;}
.shape2{position:absolute;width:120px;height:120px;border-radius:50%;background:#f0ffb0;bottom:0;right:120px;}
.sec{padding:26px 34px 0;}
.filterRow{display:flex;gap:10px;margin-bottom:16px;}
.chip{background:#fff;border:1px solid #dedede;padding:6px 16px;font-size:12px;font-weight:600;color:#333;border-radius:2px;}
.chip.active{background:#121212;color:#fff;border-color:#121212;}
.grid{display:flex;gap:14px;}
.card{width:203px;background:#fff;border:1px solid #dedede;border-radius:2px;padding:10px;position:relative;}
.thumb{height:110px;border-radius:2px;margin-bottom:10px;}
.badge{position:absolute;top:8px;left:8px;background:#e6ff55;color:#121212;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:2px;}
.pname{font-size:13px;font-weight:600;color:#121212;margin:0 0 4px;text-transform:uppercase;letter-spacing:.2px;}
.pprice{font-size:13px;color:#333333;font-weight:700;}
</style>
<div class="nav">
<div class="logo">Thinx</div>
<div class="navlinks"><span>Underwear</span><span>Bras</span><span>Swim</span><span class="sale">SALE</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Leakproof.<br>No shame required.</div>
<div class="sub">Underwear built to absorb, protect, and let you forget your body is doing what bodies do.</div>
<div class="btn">Take The Quiz</div>
</div>
<div class="blob"><div class="shape1"></div><div class="shape2"></div></div>
</div>
<div class="sec">
<div class="filterRow"><div class="chip active">All</div><div class="chip">Hi-Waist</div><div class="chip">Bikini</div><div class="chip">Overnight</div></div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:#dedede;"></div><div class="pname">Super Hiphugger</div><div class="pprice">$28</div></div>
<div class="card"><div class="thumb" style="background:#eaeaea;"></div><div class="pname">Cheeky Brief</div><div class="pprice">$24</div></div>
<div class="card"><div class="thumb" style="background:#dedede;"></div><div class="pname">Overnight Boyshort</div><div class="pprice">$32</div></div>
<div class="card"><div class="thumb" style="background:#eaeaea;"></div><div class="pname">Sport Thong 2pk</div><div class="pprice">$29</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #5a5e60;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #5a5e60;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #5a5e60; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #6f7477; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; background: #153a5b; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; background: #ffffff; color: #153a5b;
border: 1px solid #153a5b; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #5a5e60;
border: 1px solid #d2d3d4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6f7477; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.36; letter-spacing: 0.08em; background: #f0f6ff; color: #205ecc;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f6fa; color:#353535; font-family:'Geologica','Helvetica Neue',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#fff;border-bottom:1px solid #d9e2e9;}
.logo{font-size:20px;font-weight:700;letter-spacing:-.5px;color:#153a5b;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#5a5e60;}
.cart{width:70px;height:32px;border-radius:9999px;background:#153a5b;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.hero{height:260px;position:relative;display:flex;align-items:center;padding:0 44px;background:#153a5b;overflow:hidden;}
.herotext{width:420px;z-index:2;}
.hkicker{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#8fc9e8;margin-bottom:12px;}
.herotext h1{font-size:33px;font-weight:700;letter-spacing:-.7px;color:#fff;margin:0 0 12px;line-height:1.15;}
.herotext p{font-size:14px;color:#c6d6e2;line-height:1.6;margin:0 0 20px;max-width:340px;}
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;background:#2299dd;color:#fff;border-radius:9999px;font-size:14px;font-weight:700;width:fit-content;}
.glow{position:absolute;right:100px;top:60px;width:120px;height:120px;border-radius:50%;background:#0a2338;box-shadow:0 0 60px 20px rgba(34,153,221,.5);}
.glowring{position:absolute;right:130px;top:90px;width:60px;height:60px;border-radius:50%;border:3px solid #2299dd;}
.lanes{display:flex;gap:0;height:220px;}
.lane{flex:1;padding:16px 20px;position:relative;}
.lane1{background:#fce8d6;}
.lane2{background:#bee6fa;}
.lane3{background:#e4d9fd;}
.lane4{background:#f3756d;}
.lanelabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#153a5b;margin-bottom:10px;}
.lane4 .lanelabel{color:#fff;}
.lanecard{background:#fff;border-radius:12px;padding:10px;}
.lanethumb{height:64px;border-radius:8px;background:#f5f6fa;margin-bottom:6px;}
.lanename{font-size:12px;font-weight:600;color:#153a5b;}
.laneprice{font-size:12px;font-weight:700;color:#2299dd;margin-top:2px;}
</style>
<div class="nav">
<div class="logo">Larq</div>
<div class="navlinks"><span>Bottles</span><span>Pitchers</span><span>Refill Stations</span></div>
<div class="cart">Cart</div>
</div>
<div class="hero">
<div class="herotext">
<div class="hkicker">UV-C Self-Cleaning</div>
<h1>Water that purifies itself</h1>
<p>Precision-engineered hydration, tempered with confident everyday design.</p>
<div class="btn">Shop Bottles</div>
</div>
<div class="glowring"></div>
<div class="glow"></div>
</div>
<div class="lanes">
<div class="lane lane1"><div class="lanelabel">Everyday</div><div class="lanecard"><div class="lanethumb"></div><div class="lanename">Movement PureVis</div><div class="laneprice">$99</div></div></div>
<div class="lane lane2"><div class="lanelabel">Insulated</div><div class="lanecard"><div class="lanethumb"></div><div class="lanename">Bottle Steel PureVis</div><div class="laneprice">$118</div></div></div>
<div class="lane lane3"><div class="lanelabel">Home</div><div class="lanecard"><div class="lanethumb"></div><div class="lanename">Pitcher PureVis</div><div class="laneprice">$95</div></div></div>
<div class="lane lane4"><div class="lanelabel">New</div><div class="lanecard"><div class="lanethumb"></div><div class="lanename">Refill Station</div><div class="laneprice">$249</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; background: #cc0000; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; background: #ffffff; color: #cc0000;
border: 1px solid #cc0000; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cc0000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; background:#1a1a1a; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#cc0000; font-size:18px; font-weight:800; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:20px; color:#ddd; font-size:12px; }
.btn-primary { background:#cc0000; color:#fff; border:none; border-radius:2px; padding:9px 18px; font-size:12px; font-weight:700; }
.loot { background:#ff6600; color:#fff; font-size:11px; font-weight:700; padding:4px 10px; border-radius:2px; }
main { display:flex; height:calc(640px - 58px - 40px); }
.gallery { width:340px; background:#f5f5f5; position:relative; padding:16px; display:flex; align-items:center; justify-content:center; }
.box { width:190px; height:250px; background:linear-gradient(160deg,#333,#111); border-radius:2px; position:relative;
box-shadow:0 10px 24px rgba(0,0,0,0.25); }
.box::after { content:'1:12 SCALE'; position:absolute; bottom:14px; left:14px; color:#cc0000; font-size:11px; font-weight:800; letter-spacing:1px; }
.badges { position:absolute; top:22px; left:22px; display:flex; flex-direction:column; gap:6px; }
.b { font-size:10px; font-weight:800; padding:3px 8px; border-radius:2px; color:#fff; letter-spacing:0.3px; }
.b-new { background:#339900; } .b-preorder { background:#0066cc; } .b-excl { background:#663399; } .b-sale { background:#cc0000; }
.info { flex:1; padding:26px 30px; display:flex; flex-direction:column; gap:11px; }
.cat { font-size:11px; color:#666; text-transform:uppercase; letter-spacing:0.4px; }
h1 { font-size:20px; font-weight:700; margin:0; }
.price-row { display:flex; align-items:center; gap:10px; }
.price { font-size:21px; font-weight:800; color:#cc0000; }
.msrp { font-size:13px; color:#999; text-decoration:line-through; }
.stars { color:#ffaa00; font-size:12px; }
.arrival { background:#f5f5f5; border:1px solid #dddddd; border-radius:2px; padding:8px 12px; font-size:12px; color:#333; }
.qtybox { display:flex; align-items:center; gap:10px; font-size:12px; color:#666; }
.qty { border:1px solid #dddddd; border-radius:2px; padding:5px 12px; }
.btn-row { display:flex; gap:8px; margin-top:auto; }
.btn-add { flex:1; background:#cc0000; color:#fff; border:none; border-radius:2px; padding:13px; font-size:14px; font-weight:700; }
.btn-loot { background:#1a1a1a; color:#ff6600; border:none; border-radius:2px; padding:13px 16px; font-size:12px; font-weight:700; }
footer { padding:10px 30px; border-top:1px solid #dddddd; font-size:10px; color:#666; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Bigbadtoystore</div>
<div class="navlinks"><span>Statues</span><span>Action Figures</span><span>Model Kits</span><span>Exclusives</span></div>
<button class="btn-primary">Sign In</button>
</nav>
<main>
<div class="gallery">
<div class="badges"><span class="b b-new">NEW</span><span class="b b-preorder">PRE-ORDER</span><span class="b b-excl">EXCLUSIVE</span><span class="b b-sale">SALE</span></div>
<div class="box"></div>
</div>
<div class="info">
<span class="cat">Collectible Statue — Deluxe Edition</span>
<h1>Sentinel Guardian Diorama</h1>
<div class="stars">★★★★★ 4.9 (212 reviews)</div>
<div class="price-row"><span class="price">$249.99</span><span class="msrp">$299.99</span></div>
<div class="arrival">Estimated arrival: <b>March 2027</b> · Ships when in stock</div>
<div class="qtybox">Qty <span class="qty">1</span> · Limit 2 per customer</div>
<div class="btn-row">
<button class="btn-add">Add to Cart</button>
<button class="btn-loot">+ Pile of Loot</button>
</div>
</div>
</main>
<footer><span>© Bigbadtoystore</span><span>Pile of Loot · Pre-Order Policy · Track Order</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #282928;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #282928;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #282928; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.38; margin: 0; color: #747474; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.25px; background: #108474; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.25px; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #454645;
border: 1px solid #c9cac9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #747474; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f77b08; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#282928; font-family:'Nunito Sans', 'Open Sans', Arial, sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #eeeeee;}
.logo{font-size:19px;font-weight:700;color:#282928;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;letter-spacing:0.25px;text-transform:uppercase;}
.navlinks .active{color:#108474;border-bottom:2px solid #108474;padding-bottom:20px;}
.hero{height:230px;background:#f9fafb;display:flex;align-items:center;padding:0 32px;}
.herotext{width:48%;}
.herotext h1{font-size:28px;font-weight:700;margin:0 0 10px;line-height:1.3;}
.herotext p{font-size:15px;color:#454645;margin:0 0 16px;max-width:340px;}
.herocta{width:fit-content;background:#108474;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.25px;padding:12px 24px;border-radius:4px;}
.heroimg{width:52%;display:flex;justify-content:center;}
.bank{width:150px;height:110px;background:linear-gradient(135deg,#108474,#282928);border-radius:12px;position:relative;}
.bank:before{content:'';position:absolute;left:20px;top:16px;width:110px;height:8px;background:#fff;border-radius:4px;opacity:0.6;}
.tiles{display:flex;gap:12px;padding:16px 32px 0;}
.tile{flex:1;background:#f9fafb;border:1px solid #eeeeee;border-radius:8px;padding:20px 12px;text-align:center;font-size:15px;font-weight:600;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:206px;border:1px solid #eeeeee;border-radius:8px;padding:16px;position:relative;}
.thumb{aspect-ratio:1/1;height:96px;border-radius:4px;margin-bottom:8px;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;color:#fff;}
.ptitle{font-size:16px;font-weight:600;margin-top:8px;}
.pprice{font-size:16px;font-weight:700;margin-top:4px;}
.pprice.sale{color:#d61f1f;}
.stars{color:#fbcd0a;font-size:13px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#282928;color:#bbbbbb;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Ravpower</div>
<div class="navlinks"><div class="active">Power Banks</div><div>Chargers</div><div>Cables</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Will this charger work for my device?</h1>
<p>Reliable power electronics, spec-heavy and built to answer that question first.</p>
<div class="herocta">Shop Power Banks</div>
</div>
<div class="heroimg"><div class="bank"></div></div>
</div>
<div class="tiles"><div class="tile">Power Banks</div><div class="tile">Wall Chargers</div><div class="tile">Cables</div></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#108474,#e5f8fb);"><div class="badge" style="background:#f77b08;">Sale</div></div><div class="ptitle">26800mAh Power Bank</div><div class="pprice sale">$39.99</div><div class="stars">★★★★★ 4.6</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#14bedc,#108474);"><div class="badge" style="background:#108474;">New</div></div><div class="ptitle">65W GaN Wall Charger</div><div class="pprice">$34.99</div><div class="stars">★★★★★ 4.8</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#6b762d,#108474);"></div><div class="ptitle">Braided USB-C Cable</div><div class="pprice">$12.99</div><div class="stars">★★★★★ 4.5</div></div>
</div>
<div class="footer"><span>© RavPower Electronics</span><span>SSL Secure PayPal Klarna</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fff5e1; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fff5e1; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c786f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fff5e1; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fff5e1; color: #111111;
border: 1px solid #d9d1c0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c786f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fff7e6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFF5E1; color:#451400; box-sizing:border-box;
font-family:'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.caps { font-family:'Archivo', -apple-system, sans-serif; text-transform:uppercase; }
.topbar { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 26px;
background:#FFFFFF; border-bottom:1px solid #E8DCC4; }
.loc { font-size:14px; font-weight:700; }
.title { font-family:'Archivo'; font-size:20px; font-weight:800; letter-spacing:0.3px; }
.bagwrap { position:relative; font-size:20px; }
.bagcount { position:absolute; top:-6px; right:-8px; background:#A81612; color:#fff; font-size:10px;
font-weight:800; border-radius:50%; width:16px; height:16px; display:flex; align-items:center; justify-content:center; }
.steps { display:flex; gap:4px; padding:10px 26px 0; }
.steps div { flex:1; height:4px; border-radius:4px; background:#E8DCC4; }
.steps div.on { background:#A81612; }
.wrap { display:flex; height:520px; }
.left { width:640px; overflow:hidden; padding:12px 26px 0; }
.sec { margin-bottom:6px; }
.sec h4 { font-family:'Archivo'; font-size:16px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
margin:16px 0 6px; padding-bottom:6px; border-bottom:1px solid #E8DCC4; }
.row { display:flex; align-items:center; padding:9px 0; }
.row.sel { background:#F4E2E1; margin:0 -12px; padding:9px 12px; border-radius:6px; border-left:3px solid #A81612; }
.rname { font-size:15px; font-weight:700; }
.rmeta { font-size:11px; color:#8A6B4F; margin-top:1px; }
.sel-mark { margin-left:auto; width:22px; height:22px; border-radius:50%; border:2px solid #E8DCC4; }
.sel-mark.on { background:#A81612; border-color:#A81612; color:#fff; display:flex; align-items:center;
justify-content:center; font-size:12px; }
.sel-mark.sq { border-radius:6px; }
.right { width:320px; padding:16px 22px 0; border-left:1px solid #E8DCC4; }
.foil { height:110px; border-radius:12px; background:linear-gradient(120deg,#D9D4C9,#A8A296); position:relative;
overflow:hidden; display:flex; align-items:flex-end; padding:12px; margin-bottom:14px; }
.foil .cap { font-family:'Archivo Narrow'; font-size:18px; font-weight:800; letter-spacing:0.3px; }
.rewards { text-align:center; margin-top:6px; }
.ring { width:100px; height:100px; border-radius:50%; margin:0 auto;
background:conic-gradient(#A81612 0deg 280deg, #E8DCC4 280deg 360deg); display:flex; align-items:center; justify-content:center; }
.ring-in { width:78px; height:78px; border-radius:50%; background:#FFF5E1; display:flex; flex-direction:column;
align-items:center; justify-content:center; }
.ring-in .n { font-family:'Archivo'; font-size:22px; font-weight:800; color:#A81612; }
.ring-in .l { font-family:'Archivo'; font-size:9px; font-weight:700; letter-spacing:0.4px; color:#8A6B4F; }
.rewards-note { font-size:11px; color:#8A6B4F; margin-top:8px; }
.footer { position:absolute; bottom:0; left:0; right:0; height:60px; background:#FFFFFF;
border-top:1px solid #E8DCC4; display:flex; align-items:center; padding:0 26px; gap:14px; }
.footer .tot { font-size:14px; font-weight:700; }
.addbtn { margin-left:auto; background:#A81612; color:#fff; font-family:'Archivo'; font-size:15px; font-weight:800;
letter-spacing:0.6px; text-transform:uppercase; border-radius:8px; padding:12px 24px; }
</style></head>
<body>
<div class="topbar">
<div class="loc">Pickup · Downtown ▾</div>
<div class="title caps">Burrito Bowl</div>
<div class="bagwrap">📚<div class="bagcount">3</div></div>
</div>
<div class="steps"><div class="on"></div><div class="on"></div><div></div><div></div><div></div></div>
<div class="wrap">
<div class="left">
<div class="sec">
<h4>Rice</h4>
<div class="row sel"><div><div class="rname">White Rice</div><div class="rmeta">210 Cal</div></div><div class="sel-mark on">✓</div></div>
<div class="row"><div><div class="rname">Brown Rice</div><div class="rmeta">210 Cal</div></div><div class="sel-mark"></div></div>
</div>
<div class="sec">
<h4>Protein</h4>
<div class="row"><div><div class="rname">Chicken</div><div class="rmeta">180 Cal</div></div><div class="sel-mark"></div></div>
<div class="row sel"><div><div class="rname">Steak</div><div class="rmeta">150 Cal · +$2.00</div></div><div class="sel-mark on">✓</div></div>
<div class="row"><div><div class="rname">Sofritas</div><div class="rmeta">150 Cal</div></div><div class="sel-mark"></div></div>
</div>
<div class="sec">
<h4>Toppings</h4>
<div class="row sel"><div><div class="rname">Fajita Veggies</div><div class="rmeta">20 Cal</div></div><div class="sel-mark sq on">✓</div></div>
<div class="row sel"><div><div class="rname">Black Beans</div><div class="rmeta">130 Cal</div></div><div class="sel-mark sq on">✓</div></div>
<div class="row"><div><div class="rname">Cheese</div><div class="rmeta">110 Cal</div></div><div class="sel-mark sq"></div></div>
</div>
</div>
<div class="right">
<div style="font-size:11px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:#8A6B4F;margin-bottom:6px;">Chipotle (iOS)</div>
<div class="foil"><div class="cap caps">Build your own</div></div>
<div class="rewards">
<div class="ring"><div class="ring-in"><div class="n">1,250</div><div class="l caps">Points</div></div></div>
<div class="rewards-note">1,375 points until your next free entrée</div>
</div>
</div>
</div>
<div class="footer">
<div class="tot">Total · <b>$9.65</b></div>
<div class="addbtn caps">Add to bag</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbf1e4; color: #0b0b0b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbf1e4; color: #0b0b0b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #0b0b0b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #215b32; color: #ffffff;
border: none; border-radius: 8px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fbf1e4; color: #215b32;
border: 1px solid #215b32; border-radius: 8px;
padding: 14px 30px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #bfb8ae; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffcf2a; color: #0b0b0b;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbf1e4; color:#0b0b0b; box-sizing:border-box;
font-family:'Poppins','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#ffffff; border-bottom:1px solid #dedede; }
.brand { font-size:16px; font-weight:600; margin:0; text-transform:uppercase; letter-spacing:0.5px; color:#215b32; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; text-transform:uppercase; letter-spacing:0.3px; color:#676986; }
.navlinks span.on { color:#215b32; border-bottom:2px solid #215b32; padding-bottom:24px; }
.util { font-size:12px; color:#676986; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 72px); }
.stage { padding:24px; border-right:1px solid #dedede; display:flex; flex-direction:column; gap:10px; background:#d4ead4; }
.panel { flex:1; position:relative; overflow:hidden; border-radius:12px; background:#fff; }
.panel::before { content:''; position:absolute; left:50%; top:10%; width:36%; height:78%; transform:translateX(-50%); border-radius:16px 16px 8px 8px; background:linear-gradient(180deg,#77bc71,#215b32); }
.panel::after { content:''; position:absolute; left:50%; top:6%; width:20%; height:12%; transform:translateX(-50%); border-radius:8px; background:#ffcf2a; }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; background:#fff; border-radius:12px; }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:14px; font-weight:500; color:#676986; }
h1 { margin:0; font-size:26px; font-weight:900; letter-spacing:-1px; line-height:1.1; font-family:Georgia,serif; }
.badge-row { display:flex; gap:6px; }
.badge-sale { background:#ffcf2a; color:#0b0b0b; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:4px 8px; border-radius:4px; }
.badge-best { background:#ead4f8; color:#0b0b0b; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:4px 8px; border-radius:4px; }
.rating { font-size:13px; color:#676986; }
.stars { color:#ffcf2a; }
.price { font-size:18px; font-weight:700; color:#215b32; }
.desc { font-size:14px; color:#222222; line-height:1.6; }
.flavor-row { display:flex; gap:8px; }
.flavor { border-radius:999px; border:1.5px solid #215b32; color:#215b32; font-size:13px; font-weight:500; padding:8px 16px; }
.flavor.on { background:#215b32; color:#fff; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:52px; background:#215b32; color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; }
.btn-secondary { width:170px; height:52px; background:#ffcf2a; color:#0b0b0b; border:none; border-radius:8px; font-size:15px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Bloom Nutrition</p>
<div class="navlinks"><span class="on">Greens</span><span>Protein</span><span>Bundles</span><span>Sale</span></div>
<div class="util">Search Account Cart (1)</div>
</nav>
<main>
<div class="stage">
<div class="panel"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Greens & Superfoods</span>
<h1>Greens & Superfoods Powder</h1>
<div class="badge-row"><span class="badge-sale">Save 20%</span><span class="badge-best">Best Seller</span></div>
<div class="rating"><span class="stars">★★★★★</span> 4.7 · 18,204 reviews</div>
<div class="price">$39.00 / 30 servings</div>
<p class="desc">A daily greens blend with digestive enzymes and probiotics — mixes clean in water, no chalky aftertaste, no added sugar.</p>
<div class="flavor-row">
<span class="flavor on">Watermelon</span><span class="flavor">Mango</span><span class="flavor">Citrus</span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Subscribe & Save</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #d20000; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #2b00ff; color: #ffffff;
border: 1px solid #d20000; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #444444;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #d20000; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f9f9; font-family:'Open Sans',Arial,sans-serif; color:#444; }
*{box-sizing:border-box;}
.nav{height:64px;background:#111;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-family:'Poppins',sans-serif;font-size:20px;font-weight:600;color:#fff;letter-spacing:.3px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:#c4c4c4;}
.navlinks span:first-child{color:#fff;border-bottom:2px solid #d20000;padding-bottom:4px;}
.catstrip{height:36px;background:#fff;border-bottom:1px solid #eee;display:flex;align-items:center;gap:8px;padding:0 30px;}
.cat{font-size:12px;font-weight:600;text-transform:uppercase;padding:6px 14px;border-radius:8px;color:#444;}
.cat.active{background:#d20000;color:#fff;}
.hero{height:214px;display:flex;background:#f9f9f9;}
.heroText{width:50%;padding:26px 30px;display:flex;flex-direction:column;justify-content:center;}
.spec{font-size:12px;font-weight:600;text-transform:uppercase;color:#2b00ff;margin-bottom:8px;}
.h1{font-family:'Poppins',sans-serif;font-size:30px;font-weight:600;color:#111;margin:0 0 8px;letter-spacing:-.4px;}
.sub{font-size:14px;color:#444;margin:0 0 14px;max-width:280px;}
.cta{background:#d20000;color:#fff;font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;text-transform:uppercase;padding:12px 26px;border-radius:8px;width:fit-content;}
.heroImg{width:50%;position:relative;background:linear-gradient(135deg,#2b00ff 0%,#111 60%);overflow:hidden;}
.heroImg:before{content:'';position:absolute;width:120px;height:120px;border-radius:9999px;background:#ffb036;top:30px;right:60px;opacity:.85;}
.heroImg:after{content:'';position:absolute;width:70px;height:14px;background:#06b608;bottom:40px;left:40px;border-radius:9999px;}
.grid{display:flex;gap:14px;padding:16px 30px 0;}
.card{width:150px;background:#fff;border-radius:8px;padding:12px;position:relative;}
.thumb{height:96px;border-radius:8px;margin-bottom:8px;}
.badge{position:absolute;top:8px;left:8px;background:#d20000;color:#fff;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:9999px;}
.badge.new{left:auto;right:8px;background:#06b608;}
.ptitle{font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;color:#111;line-height:1.3;height:36px;overflow:hidden;}
.stars{color:#ffb036;font-size:12px;margin:4px 0;}
.pprice{font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;color:#d20000;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#111;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;color:#c4c4c4;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Marky Sparky</div>
<div class="navlinks"><span>Shop</span><span>Kits</span><span>Robotics</span><span>Compare</span></div>
</div>
<div class="catstrip">
<div class="cat active">All Kits</div><div class="cat">Circuits</div><div class="cat">Coding</div><div class="cat">Chemistry</div>
</div>
<div class="hero">
<div class="heroText">
<div class="spec">Ages 8-14 · STEM Certified</div>
<div class="h1">Build Something That Sparks.</div>
<div class="sub">Hands-on circuitry and robotics kits engineered for real learning, not just play.</div>
<div class="cta">Shop Now</div>
</div>
<div class="heroImg"></div>
</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#2b00ff,#111)"></div><div class="ptitle">Circuit Lab Starter Kit</div><div class="stars">★★★★★</div><div class="pprice">$34.99</div></div>
<div class="card"><div class="badge new">New</div><div class="thumb" style="background:linear-gradient(135deg,#ffb036,#d20000)"></div><div class="ptitle">Solar Rover Build Set</div><div class="stars">★★★★☆</div><div class="pprice">$49.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#06b608,#111)"></div><div class="ptitle">Coding Blocks Level 2</div><div class="stars">★★★★★</div><div class="pprice">$29.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d20000,#2b00ff)"></div><div class="ptitle">Chemistry Discovery Box</div><div class="stars">★★★★☆</div><div class="pprice">$39.99</div></div>
</div>
<div class="footer"><span>© Education-First Toys</span><span>Shipping · Returns · Newsletter</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f6; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f6; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fada4a; color: #1c1c1c;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f4f4f6; color: #1c1c1c;
border: 1px solid #fada4a; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #f4f4f6; color: #1c1c1c;
border: 1px solid #bebec0; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fada4a; color: #1c1c1c;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Illumicrate mockup</title>
<style>
:host, html, body {
width: 960px; height: 640px; margin: 0; padding: 0;
overflow: hidden; box-sizing: border-box;
font-family: 'Labil Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f4f4f6; color: #272d45;
}
*, *::before, *::after { box-sizing: border-box; }
.wrap { width: 960px; height: 640px; position: relative; overflow: hidden; background: #f4f4f6; }
.serif { font-family: 'Beirut Display', Georgia, 'Times New Roman', serif; }
.nav { height: 56px; background: #1c1c1c; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; }
.logo { font-size: 19px; font-weight: 600; letter-spacing: 0.3px; color: #fada4a; }
.navlinks { display: flex; gap: 22px; }
.navlinks a { font-size: 12.5px; font-weight: 500; color: #e5e5eb; text-decoration: none; }
.navcta { background: #fada4a; color: #1c1c1c; font-size: 11.5px; font-weight: 700; padding: 8px 16px; border-radius: 8px; }
.hero { height: 232px; display: flex; align-items: center; padding: 0 40px; gap: 24px; background: #1c1c1c; }
.hero-text { width: 440px; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #f2a63b; margin-bottom: 10px; }
.headline { font-size: 32px; font-weight: 500; color: #fada4a; line-height: 1.2; }
.sub { font-size: 13px; color: #c7c7cf; margin-top: 12px; width: 400px; line-height: 1.6; }
.cta-row { display: flex; gap: 12px; margin-top: 20px; }
.btn-primary { background: #fada4a; color: #1c1c1c; font-size: 13px; font-weight: 700; padding: 12px 22px; border-radius: 8px; }
.btn-ghost { background: transparent; color: #f4f4f6; font-size: 13px; font-weight: 600; padding: 12px 18px; border-radius: 8px; border: 1px solid #4a4a52; }
.hero-art { width: 300px; height: 140px; display: flex; align-items: flex-end; gap: 9px; padding-bottom: 8px;
border-bottom: 4px solid #f2a63b; }
.spine { position: relative; border-radius: 3px 3px 2px 2px; box-shadow: 0 8px 16px rgba(0,0,0,0.3); }
.spine .foil { position: absolute; top: 12px; left: 0; width: 100%; height: 4px; background: #fada4a; }
.section-head { padding: 20px 40px 0 40px; display: flex; align-items: baseline; justify-content: space-between; }
.section-title { font-size: 17px; font-weight: 500; color: #1c1c1c; }
.section-title.serif { font-size: 19px; }
.section-link { font-size: 12px; font-weight: 600; color: #700f5f; }
.grid { display: flex; gap: 18px; padding: 16px 40px 0 40px; width: 880px; }
.card { flex: 1; background: #ffffff; border: 1px solid #e5e5eb; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.art { height: 110px; position: relative; }
.foil-badge { position: absolute; top: 8px; left: 8px; font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
text-transform: uppercase; padding: 4px 9px; border-radius: 8px; }
.foil-gold { background: #fada4a; color: #1c1c1c; }
.foil-plum { background: #700f5f; color: #f3a4bb; }
.info { padding: 10px 12px 12px 12px; }
.p-title { font-size: 12.5px; font-weight: 600; color: #1c1c1c; }
.p-meta { font-size: 10.5px; color: #676986; margin-top: 4px; }
.p-price { font-size: 13.5px; font-weight: 700; color: #700f5f; margin-top: 8px; }
.footer { position: absolute; left: 0; bottom: 0; width: 960px; height: 40px; background: #1c1c1c; color: #d3d4dd;
display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0.3px; }
.footer span { color: #fada4a; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo serif">Illumicrate</div>
<div class="navlinks">
<a href="#">This Month's Box</a>
<a href="#">Add-ons</a>
<a href="#">Past Crates</a>
<a href="#">FAQ</a>
</div>
<div class="navcta">Join the Crate</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="eyebrow">Monthly Book Subscription</div>
<div class="headline serif">Unbox a little magic every month</div>
<div class="sub">A hand-picked exclusive edition, signed bookplates, and bespoke merchandise — delivered to your door, wrapped like a secret.</div>
<div class="cta-row">
<div class="btn-primary">Join the Crate</div>
<div class="btn-ghost">See This Month's Box</div>
</div>
</div>
<div class="hero-art">
<div class="spine" style="width:32px;height:96px;background:#700f5f;"><span class="foil"></span></div>
<div class="spine" style="width:38px;height:128px;background:#f2a63b;"><span class="foil"></span></div>
<div class="spine" style="width:30px;height:112px;background:#3a3a42;"><span class="foil"></span></div>
<div class="spine" style="width:42px;height:136px;background:#f3a4bb;"><span class="foil"></span></div>
<div class="spine" style="width:34px;height:104px;background:#272d45;"><span class="foil"></span></div>
</div>
</div>
<div class="section-head">
<div class="section-title serif">This Month's Exclusive Edition</div>
<div class="section-link">See full box details →</div>
</div>
<div class="grid">
<div class="card">
<div class="art" style="background:linear-gradient(160deg,#700f5f,#4d0940);"><span class="foil-badge foil-gold">Exclusive</span></div>
<div class="info">
<div class="p-title">The Gilded Archive — Special Edition</div>
<div class="p-meta">Sprayed edges · Foil dust jacket</div>
<div class="p-price">$52.00</div>
</div>
</div>
<div class="card">
<div class="art" style="background:linear-gradient(160deg,#f2a63b,#c9812a);"><span class="foil-badge foil-plum">Signed</span></div>
<div class="info">
<div class="p-title">Author Signed Bookplate</div>
<div class="p-meta">Limited to this print run</div>
<div class="p-price">Included</div>
</div>
</div>
<div class="card">
<div class="art" style="background:linear-gradient(160deg,#f3a4bb,#e07fa0);"><span class="foil-badge foil-gold">Exclusive</span></div>
<div class="info">
<div class="p-title">Enamel Pin Collection</div>
<div class="p-meta">Character set of three</div>
<div class="p-price">$18.00</div>
</div>
</div>
<div class="card">
<div class="art" style="background:linear-gradient(160deg,#272d45,#1c1c1c);"><span class="foil-badge foil-gold">Exclusive</span></div>
<div class="info">
<div class="p-title">Art Print — Foil Edition</div>
<div class="p-meta">Numbered, gold-stamped</div>
<div class="p-price">$24.00</div>
</div>
</div>
</div>
<div class="footer">Illumicrate — <span>a curated library, delivered.</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #94bcff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #94bcff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #4c5e7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #323232; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #94bcff; color: #323232;
border: 1px solid #323232; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #94bcff; color: #111111;
border: 1px solid #7fa1d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4c5e7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #84a6de; color: #323232;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#323232; color:#e3e3e3; box-sizing:border-box;
font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { color:#fff; font-weight:700; font-size:18px; }
.navlinks { display:flex; gap:4px; }
.navlinks span { color:#fff; font-size:12.6px; font-weight:600; padding:8px 12px; }
.navlinks span.on { color:#e3e3e3; }
.pill { color:#fff; border-radius:9999px; padding:10px 18px; font-size:14px; font-weight:600; border:1px solid #555; }
.hero { padding:36px 40px 20px; text-align:center; }
.hero h1 { font-size:32px; font-weight:700; margin:0 0 8px; color:#fff; }
.hero p { color:#e3e3e3; font-size:20px; font-weight:600; margin:0; }
.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; padding:28px 40px; }
.card { background:#252525; border-radius:12px; padding:24px 32px; height:52px; display:flex; align-items:center;
font-size:20px; font-weight:600; color:#e3e3e3; }
.card .arrow { margin-left:auto; color:#94bcff; }
.status { padding:0 40px 28px; display:flex; gap:14px; }
.stat { flex:1; background:#252525; border-radius:12px; padding:16px; font-size:13px; color:#b9b9b9; }
.stat b { display:block; font-size:22px; color:#98e467; margin-bottom:4px; }
.footer { padding:16px 40px; border-top:1px solid #444; display:flex; justify-content:space-between; font-size:12px;
color:#b9b9b9; }
.link { color:#94bcff; }
</style></head>
<body>
<nav>
<span class="brand">DMM.com (Turtle)</span>
<div class="navlinks"><span class="on">About Turtle</span><span>Products</span><span>Guidelines</span><span>Getting Started</span></div>
<div class="pill">About Turtle</div>
</nav>
<section class="hero">
<h1>Turtle Design System Portal β</h1>
<p>Create discovery and passion.</p>
</section>
<section class="cards">
<div class="card">Design Tokens<span class="arrow">→</span></div>
<div class="card">Components<span class="arrow">→</span></div>
<div class="card">Resources<span class="arrow">→</span></div>
<div class="card">AI-friendly Design Guidelines<span class="arrow">→</span></div>
</section>
<section class="status">
<div class="stat"><b>50%+</b>Frontend adoption rate across the Platform Engineering division</div>
<div class="stat"><b>β</b>Now in beta · Do more with less</div>
</section>
<div class="footer">
<span>© DMM.com</span>
<span class="link">Figma Community · Storybook · GitHub</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1f73b7; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1f73b7; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #95bad9; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1f73b7; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1f73b7; color: #f5f5f5;
border: 1px solid #4188c1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #95bad9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4389c3; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#293239; box-sizing:border-box;
font-family:system-ui, -apple-system, sans-serif; }
* { box-sizing:border-box; }
.layout { display:flex; height:640px; }
.sidebar { width:200px; flex:none; background:#ffffff; border-right:1px solid #b0b8be; padding:16px 10px; display:flex; flex-direction:column; gap:2px; }
.brand { font-size:16px; font-weight:700; margin:0 6px 14px; color:#293239; }
.sb-item { height:32px; display:flex; align-items:center; padding:0 12px; font-size:14px; color:#293239; border-radius:0; }
.sb-item.active { color:#1f73b7; font-weight:600; }
.main { flex:1; display:flex; flex-direction:column; }
header { height:56px; border-bottom:1px solid #b0b8be; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
header h2 { font-size:20px; font-weight:600; margin:0; }
.btn-primary { background:#1f73b7; color:#ffffff; border:none; border-radius:4px; padding:0 15px; height:40px; font-size:14px; }
.toolbar { display:flex; gap:10px; padding:12px 24px; border-bottom:1px solid #b0b8be; }
.filter-chip { font-size:12px; color:#5c6970; border:1px solid #b0b8be; border-radius:4px; padding:6px 12px; }
.filter-chip.on { color:#1f73b7; border-color:#1f73b7; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:11px; color:#5c6970; font-weight:600; padding:8px 24px; border-bottom:1px solid #b0b8be; text-transform:uppercase; letter-spacing:0.04em; }
td { padding:10px 24px; font-size:14px; border-bottom:1px solid #eef0f1; color:#293239; }
.status { display:inline-flex; align-items:center; gap:6px; font-size:12px; border-radius:4px; padding:3px 8px; }
.status.open { background:#fdecec; color:#cd3642; }
.status.pending { background:#fff3e0; color:#a56c1c; }
.status.solved { background:#e7f5ee; color:#4eab89; }
.subj { font-weight:600; }
.meta { color:#5c6970; font-size:12px; }
footer { margin-top:auto; padding:10px 24px; border-top:1px solid #b0b8be; font-size:11px; color:#5c6970; display:flex; justify-content:space-between; }
</style></head>
<body>
<div class="layout">
<div class="sidebar">
<p class="brand">Zendesk Garden</p>
<div class="sb-item active">All Tickets</div>
<div class="sb-item">Unassigned</div>
<div class="sb-item">My Tickets</div>
<div class="sb-item">Solved</div>
<div class="sb-item">Views</div>
<div class="sb-item">Reports</div>
</div>
<div class="main">
<header>
<h2>Support Tickets</h2>
<button class="btn-primary">New Ticket</button>
</header>
<div class="toolbar">
<span class="filter-chip on">Open</span>
<span class="filter-chip">Pending</span>
<span class="filter-chip">Solved</span>
<span class="filter-chip">Priority: High</span>
</div>
<table>
<tr><th>Subject</th><th>Requester</th><th>Status</th><th>Updated</th></tr>
<tr><td><span class="subj">Login fails after password reset</span><br><span class="meta">#4821</span></td><td>Alex Kim</td><td><span class="status open">Open</span></td><td>2m ago</td></tr>
<tr><td><span class="subj">Billing charged twice this month</span><br><span class="meta">#4820</span></td><td>Jordan Lee</td><td><span class="status pending">Pending</span></td><td>18m ago</td></tr>
<tr><td><span class="subj">Export button not responding</span><br><span class="meta">#4818</span></td><td>Sam Park</td><td><span class="status open">Open</span></td><td>41m ago</td></tr>
<tr><td><span class="subj">Feature request: dark mode</span><br><span class="meta">#4812</span></td><td>Casey Moon</td><td><span class="status solved">Solved</span></td><td>2h ago</td></tr>
<tr><td><span class="subj">API rate limit unclear in docs</span><br><span class="meta">#4809</span></td><td>Taylor Ryu</td><td><span class="status pending">Pending</span></td><td>3h ago</td></tr>
</table>
<footer>
<span>© Zendesk Garden</span>
<span>Zendesk Garden Garden · Components · Foundations</span>
</footer>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #262626;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #262626;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #262626; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 800; line-height: 1.2; letter-spacing: 1px; background: #56b7e6; color: #000000;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 800; line-height: 1.2; letter-spacing: 1px; background: #262626; color: #ffffff;
border: 1px solid #56b7e6; border-radius: 0px;
padding: 14px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #262626;
border: 1px solid #c9c9c9; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 800; line-height: 1.2; letter-spacing: 0.5px; background: #fd423b; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#262626; box-sizing:border-box;
font-family:'subway-berlin-sc',Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#262626; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { color:#fff; font-family:'bodega-sans',Impact,sans-serif; font-weight:900; font-size:20px; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:20px; }
.navlinks span { color:#fff; font-size:12px; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; }
.navlinks span.active { color:#56b7e6; }
.hero { height:220px; background:#262626; display:flex; align-items:center; padding:0 32px; gap:28px; }
.heroText { flex:1; }
.headline { color:#fff; font-family:'bodega-sans',Impact,sans-serif; font-size:40px; font-weight:900; letter-spacing:-1px;
text-transform:uppercase; line-height:1.05; margin-bottom:10px; }
.headline span { color:#56b7e6; }
.heroBtn { display:inline-block; background:#56b7e6; color:#fff; padding:14px 28px; font-size:14px; font-weight:800;
letter-spacing:1px; text-transform:uppercase; }
.heroImg { flex:1; height:150px; background:radial-gradient(circle at 40% 40%,#56b7e6,#0857c3 70%); position:relative; }
.heroImg::after { content:''; position:absolute; right:20px; top:20px; width:60px; height:60px; border-radius:50%;
background:#fdba3b; }
.section { padding:24px 32px 0; }
.sectionHead { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.sectionHead h2 { font-family:'ccmeanwhile',Arial,sans-serif; font-size:20px; font-weight:700; margin:0; }
.switches { display:flex; gap:6px; }
.sw { width:20px; height:20px; border:1px solid #d9d9d9; }
.sw.blue { background:#56b7e6; } .sw.brown { background:#d3b25b; } .sw.red { background:#fd423b; }
.sw.green { background:#2bac26; } .sw.yellow { background:#ffff03; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { border-radius:8px; padding:12px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.photo { aspect-ratio:1/1; border-radius:8px; margin-bottom:8px; position:relative; }
.c1 .photo { background:linear-gradient(150deg,#56b7e6,#1a5f8a); }
.c2 .photo { background:linear-gradient(150deg,#262626,#000); }
.c3 .photo { background:linear-gradient(150deg,#c0df16,#7a9e0d); }
.c4 .photo { background:linear-gradient(150deg,#e360d4,#9530d5); }
.badge { position:absolute; top:6px; left:6px; background:#fd423b; color:#fff; font-size:10px; font-weight:800;
text-transform:uppercase; padding:3px 7px; }
.name { font-family:'new-spirit',Georgia,serif; font-size:15px; font-weight:600; }
.price { font-size:15px; font-weight:700; color:#3a3a3a; margin-top:2px; }
.rating { color:#fdba3b; font-size:11px; margin-top:2px; }
</style></head>
<body>
<nav>
<div class="brand">Glorious</div>
<div class="navlinks"><span class="active">Keyboards</span><span>Mice</span><span>Switches</span><span>Panda</span></div>
</nav>
<div class="hero">
<div class="heroText">
<div class="headline">Built for the <span>Grind</span></div>
<div class="heroBtn">Shop Keyboards</div>
</div>
<div class="heroImg"></div>
</div>
<div class="section">
<div class="sectionHead">
<h2>Switch Series</h2>
<div class="switches"><div class="sw blue"></div><div class="sw brown"></div><div class="sw red"></div><div class="sw green"></div><div class="sw yellow"></div></div>
</div>
<div class="grid">
<div class="card c1"><div class="photo"></div><div class="name">GMMK Pro</div><div class="price">$169.99</div><div class="rating">★★★★★ 4.8</div></div>
<div class="card c2"><div class="photo"><div class="badge">Sale</div></div><div class="name">Model O 2</div><div class="price">$59.99</div><div class="rating">★★★★★ 4.6</div></div>
<div class="card c3"><div class="photo"></div><div class="name">GMMK 2 Lime</div><div class="price">$139.99</div><div class="rating">★★★★☆ 4.3</div></div>
<div class="card c4"><div class="photo"></div><div class="name">Panda Edition</div><div class="price">$179.99</div><div class="rating">★★★★★ 4.9</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.35; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #117744; color: #ffffff;
border: none; border-radius: 2px; padding: 9px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #ffffff; color: #117744;
border: 1px solid #117744; border-radius: 2px;
padding: 8px 17px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.33; background: #ffe5e5; color: #ff0000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,Helvetica,sans-serif; color:#444444; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#f0f0f0;border-bottom:1px solid #cccccc;}
.logo{font-size:18px;font-weight:700;color:#222222;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;color:#117744;}
.searchbar{height:34px;width:220px;background:#fff;border:1px solid #cccccc;border-radius:2px;display:flex;align-items:center;padding:0 12px;font-size:12px;color:#777777;}
.hero{height:220px;display:flex;background:#e8f4ee;}
.htext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 34px;}
.htext .k{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#0d5c35;margin-bottom:10px;}
.htext h1{font-size:25px;font-weight:700;color:#222222;margin:0 0 10px;line-height:1.28;}
.htext p{font-size:13px;line-height:1.5;color:#444444;margin:0 0 16px;max-width:290px;}
.btn{width:fit-content;background:#117744;color:#fff;font-size:13px;font-weight:700;padding:9px 18px;border-radius:2px;}
.himg{width:54%;position:relative;background:#f5f5f5;}
.flask{position:absolute;left:120px;top:40px;width:60px;height:80px;background:linear-gradient(180deg,#e8f4ee,#117744);border-radius:0 0 30px 30px;clip-path:polygon(35% 0,65% 0,65% 40%,100% 100%,0 100%,35% 40%);}
.neck{position:absolute;left:138px;top:20px;width:24px;height:22px;background:#8bbba3;}
.seclabel{padding:16px 34px 10px;font-size:16px;font-weight:700;color:#222222;}
.grid{display:flex;gap:12px;padding:0 34px;}
.card{width:150px;border:1px solid #cccccc;border-radius:2px;padding:9px;}
.sku{font-size:9px;font-family:'Courier New',monospace;color:#777777;margin-bottom:6px;}
.thumb{height:76px;border-radius:2px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:600;color:#222222;height:30px;overflow:hidden;line-height:1.3;}
.price{font-size:13px;font-weight:700;color:#117744;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Science Company</div>
<div class="navlinks"><div>Chemicals</div><div>Lab Equipment</div><div>Safety</div></div>
<div class="searchbar">Search catalog no...</div>
</div>
<div class="hero">
<div class="htext">
<div class="k">Laboratory Supply</div>
<h1>Reagents and equipment for the working lab.</h1>
<p>Precision chemicals and instruments shipped from stock, verified for purity.</p>
<div class="btn">Browse Catalog</div>
</div>
<div class="himg"><div class="flask"></div><div class="neck"></div></div>
</div>
<div class="seclabel">Frequently Reordered</div>
<div class="grid">
<div class="card"><div class="sku">SKU 22045-A</div><div class="thumb" style="background:linear-gradient(140deg,#117744,#222222)"></div><div class="pname">Sodium Chloride, ACS 500g</div><div class="price">$18.40</div></div>
<div class="card"><div class="sku">SKU 30871-C</div><div class="thumb" style="background:linear-gradient(140deg,#8bbba3,#117744)"></div><div class="pname">Borosilicate Beaker Set</div><div class="price">$42.00</div></div>
<div class="card"><div class="sku">SKU 11209-B</div><div class="thumb" style="background:linear-gradient(140deg,#444444,#117744)"></div><div class="pname">Digital pH Meter</div><div class="price">$89.99</div></div>
<div class="card"><div class="sku">SKU 40556-D</div><div class="thumb" style="background:linear-gradient(140deg,#e8f4ee,#8bbba3)"></div><div class="pname">Nitrile Gloves, Box of 100</div><div class="price">$12.75</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #0052b4; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f8f8f8; color: #1a1a1a;
border: 1px solid #0052b4; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #f8f8f8; color: #1a1a1a;
border: 1px solid #c0c0c0; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d80027; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f8f8; color:#1a1a1a; box-sizing:border-box;
font-family:'Aktiv Grotesk', -apple-system, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 56px; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #e5e5e5; background:#f8f8f8; }
.brand { font-family:'Bigger Display','Aktiv Grotesk Extended','Aktiv Grotesk',sans-serif; font-size:19px;
font-weight:700; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:12.5px; font-weight:500; letter-spacing:0.3px; text-transform:uppercase; color:#666666; }
.navlinks span.on { color:#1a1a1a; border-bottom:2px solid #0052b4; padding-bottom:4px; }
.navicons { display:flex; align-items:center; gap:16px; }
.icon-search { width:14px; height:14px; border:1.5px solid #1a1a1a; border-radius:50%; position:relative; }
.icon-search::after { content:''; position:absolute; width:6px; height:1.5px; background:#1a1a1a; right:-5px; bottom:-1px; transform:rotate(45deg); }
.icon-cart { width:17px; height:14px; border:1.5px solid #1a1a1a; border-radius:0 0 3px 3px; position:relative; }
.icon-cart::before { content:''; position:absolute; top:-6px; left:2px; width:10px; height:6px; border:1.5px solid #1a1a1a; border-bottom:none; border-radius:6px 6px 0 0; }
.hero { flex:0 0 126px; height:126px; background:#1a1a1a; display:flex; flex-direction:column;
justify-content:center; gap:8px; padding:0 40px; color:#ffffff; }
.hero h1 { margin:0; font-family:'Bigger Display','Aktiv Grotesk Extended','Aktiv Grotesk',sans-serif;
font-size:27px; font-weight:700; letter-spacing:-0.6px; line-height:1.12; max-width:600px; }
.hero p { margin:0; font-size:13px; color:#999999; max-width:460px; }
.hero .btn-primary { align-self:flex-start; margin-top:6px; background:#0052b4; color:#ffffff; border:none;
border-radius:4px; padding:9px 18px; font-size:13px; font-weight:600; }
.filterrow { flex:0 0 34px; height:34px; display:flex; align-items:center; gap:8px; padding:0 40px; background:#f8f8f8; }
.ftag { font-size:11.5px; color:#333333; background:#f2f2f2; border-radius:999px; padding:5px 13px; }
.ftag.on { background:#0052b4; color:#ffffff; }
main.grid { flex:1 1 auto; overflow:hidden; display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
padding:14px 40px 0; }
.card { position:relative; background:#ffffff; border-radius:8px; display:flex; flex-direction:column; overflow:hidden; }
.card-img { flex:0 0 68%; position:relative; }
.img1 { background:linear-gradient(165deg,#2a0a0a 0%,#5c1010 55%,#d80027 130%); }
.img2 { background:linear-gradient(165deg,#0a1a2a 0%,#0d3a5c 55%,#00a2a9 130%); }
.img3 { background:linear-gradient(165deg,#1a0a2a 0%,#3d1050 55%,#ad3381 130%); }
.img4 { background:linear-gradient(165deg,#0a0a0a 0%,#1a1a1a 55%,#0052b4 130%); }
.card-img::after { content:''; position:absolute; left:0; right:0; bottom:0; height:34%;
background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.55)); }
.card-badges { position:absolute; top:8px; left:8px; z-index:2; display:flex; flex-direction:column; gap:5px; }
.b-limited { background:#d80027; color:#fff; font-size:9.5px; font-weight:700; letter-spacing:0.4px;
text-transform:uppercase; border-radius:4px; padding:3px 7px; align-self:flex-start; }
.b-label { background:#00a2a9; color:#fff; font-size:9.5px; font-weight:700; letter-spacing:0.4px;
text-transform:uppercase; border-radius:4px; padding:3px 7px; align-self:flex-start; }
.card-body { padding:9px 11px 11px; display:flex; flex-direction:column; gap:4px; flex:1; }
.card-body h3 { margin:0; font-size:13px; font-weight:600; line-height:1.25; }
.fmt-badge { background:#f2f2f2; color:#666666; font-size:9.5px; font-weight:700; text-transform:uppercase;
letter-spacing:0.4px; border-radius:4px; padding:2px 7px; align-self:flex-start; }
.price { font-size:13.5px; font-weight:600; color:#d80027; margin-top:auto; }
footer { flex:0 0 46px; height:46px; background:#1a1a1a; color:#999999; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Arrow Films</p>
<div class="navlinks">
<span class="on">Cult</span><span>Classic</span><span>Horror</span><span>New Releases</span><span>Labels</span>
</div>
<div class="navicons">
<div class="icon-search"></div>
<div class="icon-cart"></div>
</div>
</nav>
<section class="hero">
<h1>The definitive home of cult, classic & horror cinema.</h1>
<p>Restored in 4K from original elements, with new commentary and collectible packaging.</p>
<button class="btn-primary">Shop New Restorations</button>
</section>
<div class="filterrow">
<span class="ftag on">Horror</span>
<span class="ftag">Cult</span>
<span class="ftag">Classic</span>
<span class="ftag">4K UHD</span>
<span class="ftag">Arrow Video</span>
</div>
<main class="grid">
<div class="card">
<div class="card-img img1"><div class="card-badges"><span class="b-limited">Limited Edition</span></div></div>
<div class="card-body">
<h3>Midnight Reel</h3>
<span class="fmt-badge">4K UHD</span>
<span class="price">$44.99</span>
</div>
</div>
<div class="card">
<div class="card-img img2"><div class="card-badges"><span class="b-label">Arrow Video</span></div></div>
<div class="card-body">
<h3>The Coastal Road</h3>
<span class="fmt-badge">Blu-ray</span>
<span class="price">$29.99</span>
</div>
</div>
<div class="card">
<div class="card-img img3"></div>
<div class="card-body">
<h3>Nightshade Sonata</h3>
<span class="fmt-badge">Blu-ray</span>
<span class="price">$27.99</span>
</div>
</div>
<div class="card">
<div class="card-img img4"><div class="card-badges"><span class="b-limited">Pre-order</span></div></div>
<div class="card-body">
<h3>Second Run Archive</h3>
<span class="fmt-badge">4K UHD</span>
<span class="price">$54.99</span>
</div>
</div>
</main>
<footer>
<span>© Arrow Films</span>
<span>Arrow Films · Customer Service · About · Newsletter</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #252525;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #252525;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.1px; margin: 0; color: #252525; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #252525; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #ffffff; color: #252525;
border: 1px solid #252525; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #252525;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #252525; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Fully</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'Inter','DM Sans',-apple-system,'Helvetica Neue',sans-serif; color:#252525; }
*{box-sizing:border-box;}
.promo{background:#252525;color:#fff;text-align:center;font-size:12px;font-weight:600;letter-spacing:0.1px;padding:9px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e2e2e2;}
.logo{font-size:19px;font-weight:700;}
.navlinks{display:flex;gap:26px;font-size:14px;font-weight:500;}
.icons{font-size:13px;color:#3d3d3d;}
.hero{display:flex;padding:32px;gap:32px;background:#f5f5f5;min-height:270px;align-items:center;}
.hero-copy{width:45%;}
h1{font-size:44px;font-weight:700;line-height:1.15;letter-spacing:-0.4px;margin:0 0 12px;}
.sub{font-size:15px;color:#3d3d3d;margin:0 0 18px;}
.btn{background:#252525;color:#fff;border:none;border-radius:8px;padding:14px 28px;font-size:15px;font-weight:600;}
.desk-graphic{flex:1;height:190px;position:relative;}
.desktop{position:absolute;bottom:40px;left:40px;width:260px;height:14px;background:#252525;border-radius:2px;}
.leg{position:absolute;bottom:0;width:8px;height:40px;background:#6b6b6b;}
.leg.l{left:60px;}
.leg.r{left:280px;}
.monitor{position:absolute;bottom:54px;left:150px;width:80px;height:56px;background:#3d3d3d;border-radius:4px;}
.spec{padding:0 32px;margin-top:20px;display:flex;gap:24px;font-size:12px;color:#6b6b6b;}
.spec b{color:#252525;display:block;font-size:14px;}
.section{padding:24px 32px 0;}
.section h2{font-size:24px;font-weight:700;margin:0 0 16px;}
.grid{display:flex;gap:16px;}
.card{flex:1;background:#fff;border:1px solid #eeeeee;border-radius:8px;padding:24px;}
.card-img{background:#f5f5f5;border-radius:8px;height:100px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#252525;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.badge.sale{background:#c0392b;}
.card-title{font-size:15px;font-weight:600;margin-top:12px;}
.card-price{font-size:18px;font-weight:600;margin-top:4px;}
.card-price.sale{color:#c0392b;}
.orig{font-size:14px;color:#6b6b6b;text-decoration:line-through;margin-left:6px;}
</style>
<div class="promo">Free shipping on orders over $99 · MillerKnoll partner store</div>
<div class="nav">
<div class="logo">Fully Millerknoll</div>
<div class="navlinks"><span>Desks</span><span>Chairs</span><span>Accessories</span><span>Herman Miller</span></div>
<div class="icons">Search Wishlist Cart</div>
</div>
<div class="hero">
<div class="hero-copy">
<h1>Desks that adjust<br>to your day</h1>
<p class="sub">Frame height 22–48 inches. Weight capacity 350 lbs. Built to hold two monitors and a decade of use.</p>
<button class="btn">Shop Standing Desks</button>
</div>
<div class="desk-graphic">
<div class="monitor"></div>
<div class="desktop"></div>
<div class="leg l"></div>
<div class="leg r"></div>
</div>
</div>
<div class="spec">
<div><b>22–48"</b>Height range</div>
<div><b>350 lbs</b>Weight capacity</div>
<div><b>1.5"</b>Deck thickness</div>
<div><b>15 yr</b>Frame warranty</div>
</div>
<div class="section">
<h2>Best sellers</h2>
<div class="grid">
<div class="card"><div class="card-img"><div class="badge">New</div></div><div class="card-title">Jarvis Standing Desk</div><div class="card-price">$499</div></div>
<div class="card"><div class="card-img"><div class="badge sale">Sale</div></div><div class="card-title">Aeron Chair by Herman Miller</div><div class="card-price sale">$1,295<span class="orig">$1,495</span></div></div>
<div class="card"><div class="card-img"></div><div class="card-title">Cable Management Tray</div><div class="card-price">$39</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #191919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #191919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #191919; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: 0.02em; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.04em; background: #8b0000; color: #ffffff;
border: none; border-radius: 2px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.04em; background: #ffffff; color: #8b0000;
border: 1px solid #8b0000; border-radius: 2px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #191919;
border: 1px solid #dedede; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.08em; background: #3ed660; color: #121212;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{
width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;
background:#ffffff;font-family:'Instrument Serif',Georgia,serif;
color:#191919;
}
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #dedede;}
.logo{font-size:21px;font-weight:400;letter-spacing:0.5px;}
.navlinks{display:flex;gap:22px;font-family:'Jost',sans-serif;}
.navlinks span{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#555555;}
.navlinks span.active{color:#8b0000;}
.hero{padding:26px 28px 14px;display:flex;gap:26px;align-items:center;}
.heroText{flex:1.15;}
.heroText h1{font-size:32px;font-weight:400;line-height:1.2;margin:0 0 10px;}
.heroText p{font-family:'Jost',sans-serif;font-size:13px;color:#555555;margin:0 0 16px;max-width:400px;}
.heroBtn{display:inline-block;background:#8b0000;color:#fff;font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:0.8px;text-transform:uppercase;padding:11px 22px;}
.heroPress{flex:1;height:150px;display:flex;align-items:center;justify-content:center;}
.card1{width:110px;height:80px;background:#f5f5f5;border:1px solid #c8c8c8;position:relative;box-shadow:6px 6px 0 rgba(139,0,0,0.12);}
.card1::before{content:"";position:absolute;left:14px;right:14px;top:16px;height:2px;background:#8b0000;}
.card1::after{content:"";position:absolute;left:14px;right:30px;top:30px;height:1px;background:#c8c8c8;box-shadow:0 10px 0 #c8c8c8,0 20px 0 #c8c8c8;}
.section{padding:8px 28px 0;}
.sectitle{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#191919;margin:0 0 12px;font-weight:600;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{}
.photo{aspect-ratio:1/1;background:#f5f5f5;border:1px solid #dedede;position:relative;}
.photo .press{position:absolute;left:16%;right:16%;top:20%;bottom:20%;border:2px solid #8b0000;}
.photo .press::before{content:"";position:absolute;left:12%;right:12%;top:24%;height:2px;background:#8b0000;}
.badge{position:absolute;top:6px;left:6px;background:#ee9441;color:#191919;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 7px;font-family:'Jost',sans-serif;}
.ctitle{font-size:14px;font-weight:400;padding:8px 2px 0;}
.cprice{font-family:'Jost',sans-serif;font-size:12px;font-weight:600;color:#8b0000;padding:2px 2px 0;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#191919;color:#c8c8c8;font-size:11px;font-family:'Jost',sans-serif;padding:10px 28px;display:flex;justify-content:space-between;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Greenwich Letterpress</div>
<div class="navlinks"><span class="active">Stationery</span><span>Wedding</span><span>Cards</span><span>Custom</span></div>
</div>
<div class="hero">
<div class="heroText">
<h1>Letterpress, pressed the old way.</h1>
<p>Fine stationery, wedding suites, and greeting cards — printed on antique iron presses with real cotton stock.</p>
<div class="heroBtn">Shop Stationery</div>
</div>
<div class="heroPress"><div class="card1"></div></div>
</div>
<div class="section">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="photo"><div class="badge">Sale</div><div class="press"></div></div><div class="ctitle">Letterpress Notecards, Set of 8</div><div class="cprice">$36.00</div></div>
<div class="card"><div class="photo"><div class="press"></div></div><div class="ctitle">Wedding Invitation Suite</div><div class="cprice">$8.50 / ea</div></div>
<div class="card"><div class="photo"><div class="press"></div></div><div class="ctitle">Holiday Card Collection</div><div class="cprice">$42.00</div></div>
<div class="card"><div class="photo"><div class="badge">New</div><div class="press"></div></div><div class="ctitle">Correspondence Card Box</div><div class="cprice">$28.00</div></div>
</div>
</div>
<div class="footer"><span>© Greenwich Letterpress</span><span>Printed on 100% cotton stock</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #5bbad5; color: #000000;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #111111;
border: 1px solid #5bbad5; border-radius: 8px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #5bbad5; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#111111;color:#999999;font-family:'Helvetica Neue',Arial,sans-serif;}
*{box-sizing:border-box;}
.nav{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #222;}
.logo{font-weight:700;font-size:20px;color:#fff;letter-spacing:1px;}
.navlinks{display:flex;gap:26px;font-size:11px;font-weight:400;color:#999;letter-spacing:.5px;text-transform:uppercase;}
.navlinks span.active{color:#5bbad5;}
.hero{display:flex;padding:36px 32px;gap:40px;align-items:center;}
.hero-txt{width:360px;}
.hero-txt .eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#5bbad5;margin-bottom:14px;}
.hero-txt h1{font-size:34px;font-weight:700;color:#fff;margin:0 0 14px;line-height:1.15;letter-spacing:-.5px;}
.hero-txt p{font-size:12px;color:#888;line-height:1.6;margin:0 0 18px;}
.cta{border:1px solid #5bbad5;color:#5bbad5;padding:10px 22px;font-size:11px;letter-spacing:.5px;text-transform:uppercase;display:inline-block;border-radius:8px;}
.monitor{flex:1;height:220px;background:#0e141b;border-radius:12px;position:relative;display:flex;align-items:center;justify-content:center;}
.monitor .cab{width:110px;height:150px;background:#1a1a1a;border-radius:8px;position:relative;}
.monitor .cab::before{content:'';position:absolute;top:20px;left:20px;right:20px;width:70px;height:70px;border-radius:50%;background:#000;margin:0 auto;}
.monitor .ring{position:absolute;top:40px;left:35px;width:40px;height:40px;border-radius:50%;border:3px solid #5bbad5;box-shadow:0 0 16px rgba(91,186,213,.6);}
.monitor .ring2{position:absolute;bottom:34px;left:20px;right:20px;height:24px;border-radius:4px;background:#000;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#222;margin:0 32px;border-radius:12px;overflow:hidden;}
.card{background:#0e141b;padding:14px;}
.box{height:80px;border-radius:8px;margin-bottom:10px;background:#161d24;position:relative;}
.box .dot{position:absolute;top:10px;right:10px;width:10px;height:10px;border-radius:50%;background:#5bbad5;box-shadow:0 0 8px rgba(91,186,213,.7);}
.box .warn{position:absolute;bottom:10px;left:10px;width:10px;height:10px;border-radius:50%;background:#da532c;}
.name{font-size:12px;font-weight:700;color:#fff;margin:0 0 3px;}
.spec{font-size:10px;color:#666;margin:0 0 6px;letter-spacing:.3px;}
.price{font-size:13px;font-weight:700;color:#5bbad5;}
</style>
<div class="nav">
<div class="logo">Genelec</div>
<div class="navlinks"><span class="active">Monitors</span><span>Studio</span><span>Broadcast</span><span>Support</span></div>
</div>
<div class="hero">
<div class="hero-txt">
<div class="eyebrow">Calibrated for Truth</div>
<h1>Hear exactly what you recorded</h1>
<p>Precision studio monitors trusted by mastering engineers since 1978. No coloration, no compromise.</p>
<a class="cta">Explore 8000 Series</a>
</div>
<div class="monitor"><div class="cab"><div class="ring"></div><div class="ring2"></div></div></div>
</div>
<div class="grid">
<div class="card"><div class="box"><div class="dot"></div></div><div class="name">8331A SAM Studio Monitor</div><div class="spec">Active · DSP Room Response</div><div class="price">$2,150.00</div></div>
<div class="card"><div class="box"><div class="warn"></div></div><div class="name">7050C Subwoofer</div><div class="spec">Active · 178mm Driver</div><div class="price">$1,395.00</div></div>
<div class="card"><div class="box"><div class="dot"></div></div><div class="name">8010A Compact Monitor</div><div class="spec">Nearfield · Aluminum Cabinet</div><div class="price">$395.00</div></div>
<div class="card"><div class="box"><div class="dot"></div></div><div class="name">GLM Calibration Kit</div><div class="spec">Includes Measurement Mic</div><div class="price">$299.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5f0080; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5f0080; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b287c0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5f0080; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5f0080; color: #f5f5f5;
border: 1px solid #772793; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b287c0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #792994; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px; overflow:hidden; display:flex; flex-direction:column; }
header.ku-top { height:54px; flex:0 0 54px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #dfe4eb; }
.ku-brand { font-size:18px; font-weight:700; color:#5f0080; margin:0; }
.ku-delivery { font-size:13px; color:#464c52; background:#f7f7f7; border-radius:4px; padding:6px 10px; }
.ku-tabs { display:flex; gap:26px; padding:0 28px; border-bottom:1px solid #dfe4eb; }
.ku-tab { padding:13px 0; font-size:18px; color:#b5b5b5; font-weight:400; }
.ku-tab.on { color:#5f0080; font-weight:500; border-bottom:2px solid #5f0080; }
main.ku-body { flex:1; display:flex; overflow:hidden; }
.ku-media { flex:0 0 350px; padding:24px; display:flex; align-items:center; justify-content:center; }
.ku-plate { width:280px; height:280px; border-radius:4px; position:relative; overflow:hidden;
background:linear-gradient(150deg,#fdf3f7 0%, #ffffff 55%); border:1px solid #dfe4eb; }
.ku-berry { position:absolute; border-radius:50%; }
.ku-berry.b1 { width:120px; height:120px; background:radial-gradient(circle at 35% 30%, #ff6f91, #c81d4f 70%); top:52px; left:40px; }
.ku-berry.b2 { width:80px; height:80px; background:radial-gradient(circle at 35% 30%, #ff8aa8, #b81646 70%); top:150px; left:150px; }
.ku-berry.b3 { width:60px; height:60px; background:radial-gradient(circle at 35% 30%, #ffa5bc, #c81d4f 70%); top:60px; left:170px; }
.ku-leaf { position:absolute; width:34px; height:56px; background:#3f8f4e; border-radius:0 60% 0 60%; }
.ku-leaf.l1 { top:30px; left:80px; transform:rotate(-20deg); }
.ku-leaf.l2 { top:132px; left:184px; transform:rotate(30deg); }
.ku-panel { flex:1; padding:22px 28px; display:flex; flex-direction:column; overflow:hidden; }
.ku-name { font-size:20px; font-weight:500; color:#333333; margin:0 0 4px; }
.ku-sub { font-size:14px; color:#999999; margin:0 0 12px; }
.ku-price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.ku-price { font-size:24px; font-weight:700; color:#333333; }
.ku-orig { font-size:14px; color:#999999; text-decoration:line-through; }
.ku-badges { display:flex; gap:8px; margin-bottom:16px; }
.ku-badge { font-size:13px; color:#5f0080; background:#f7f7f7; padding:4px 8px; border-radius:2px; }
.ku-qty-row { display:flex; align-items:center; justify-content:space-between; border:1px solid #dfe4eb;
border-radius:4px; padding:10px 14px; margin-bottom:16px; }
.ku-qty-lbl { font-size:14px; color:#333333; }
.ku-qty-ctl { display:flex; align-items:center; gap:14px; }
.ku-qty-ctl button { width:24px; height:24px; border:1px solid #dfe4eb; background:#ffffff; border-radius:4px; font-size:13px; color:#333333; }
.ku-qty-ctl span { font-size:14px; font-weight:500; }
.ku-cart { border-top:1px solid #dfe4eb; padding-top:14px; margin-top:auto; }
.ku-cart h4 { font-size:14px; font-weight:500; margin:0 0 8px; color:#333333; }
.ku-line { display:flex; justify-content:space-between; font-size:13px; color:#464c52; padding:4px 0; }
.ku-total { display:flex; justify-content:space-between; font-size:15px; font-weight:700; color:#333333;
padding-top:8px; margin-top:4px; border-top:1px solid #dfe4eb; }
footer.ku-foot { flex:0 0 66px; border-top:1px solid #dfe4eb; padding:0 28px; display:flex; align-items:center;
gap:12px; }
.ku-btn-cart { flex:1; height:44px; border:1px solid #dfe4eb; border-radius:4px; background:#ffffff;
color:#333333; font-size:14px; font-weight:400; }
.ku-btn-buy { flex:1; height:44px; border:none; border-radius:4px; background:#5f0080; color:#ffffff;
font-size:14px; font-weight:500; }
</style></head>
<body>
<div class="stage">
<header class="ku-top">
<p class="ku-brand">Kurly</p>
<div class="ku-delivery">Order by 11pm for Dawn Delivery</div>
</header>
<div class="ku-tabs">
<div class="ku-tab">Fresh Produce</div>
<div class="ku-tab on">Dairy & Eggs</div>
<div class="ku-tab">Meat & Fish</div>
<div class="ku-tab">Bakery</div>
</div>
<main class="ku-body">
<div class="ku-media">
<div class="ku-plate">
<div class="ku-leaf l1"></div>
<div class="ku-leaf l2"></div>
<div class="ku-berry b1"></div>
<div class="ku-berry b2"></div>
<div class="ku-berry b3"></div>
</div>
</div>
<div class="ku-panel">
<div class="ku-name">Chilled Strawberries, 500g</div>
<div class="ku-sub">Sourced from Jamie's Farm · Cold-chain delivered</div>
<div class="ku-price-row">
<span class="ku-price">$8.90</span>
<span class="ku-orig">$11.20</span>
</div>
<div class="ku-badges">
<span class="ku-badge">Dawn Delivery</span>
<span class="ku-badge">Cold Chain</span>
</div>
<div class="ku-qty-row">
<span class="ku-qty-lbl">Quantity</span>
<div class="ku-qty-ctl"><button>−</button><span>2</span><button>+</button></div>
</div>
<div class="ku-cart">
<h4>Cart summary</h4>
<div class="ku-line"><span>Chilled Strawberries x2</span><span>$17.80</span></div>
<div class="ku-line"><span>Organic Whole Milk x1</span><span>$5.40</span></div>
<div class="ku-total"><span>Total</span><span>$23.20</span></div>
</div>
</div>
</main>
<footer class="ku-foot">
<button class="ku-btn-cart">Add to Cart</button>
<button class="ku-btn-buy">Checkout Now</button>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.2; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.55; margin: 0; color: #9a9a9a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.8px; background: #ef521b; color: #ffffff;
border: none; border-radius: 2px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.8px; background: #ffffff; color: #111111;
border: 1px solid #ef521b; border-radius: 2px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.65; background: #ffffff; color: #111111;
border: 1px solid #dedede; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9a9a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.2px; background: #ef521b; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'museo-sans','Helvetica Neue',Arial,sans-serif; font-weight:300; background:#111111; color:#fff; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #2a2a2a;}
.logo{font-weight:700;font-size:18px;letter-spacing:-0.2px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:500;color:#9a9a9a;}
.navlinks .on{color:#fff;}
.hero{height:220px;display:flex;background:#121212;}
.herotxt{width:48%;padding:24px 36px;display:flex;flex-direction:column;justify-content:center;}
.tag{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#cb8a3d;margin-bottom:10px;}
.herotxt h1{font-family:'museo-sans-display','Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:32px;margin:0 0 12px;line-height:1.1;letter-spacing:-1px;}
.herotxt p{font-size:14px;font-weight:300;color:#9a9a9a;margin:0 0 18px;max-width:280px;}
.cta{width:fit-content;font-size:13px;font-weight:600;letter-spacing:0.8px;text-transform:uppercase;background:#ef521b;color:#fff;padding:14px 28px;border-radius:2px;}
.desk{width:52%;position:relative;background:linear-gradient(180deg,#1a1a1a,#111111);}
.mat{position:absolute;left:50px;bottom:40px;width:220px;height:100px;border-radius:10px;background:linear-gradient(160deg,#cb8a3d,#7a5423);}
.hub{position:absolute;left:220px;bottom:100px;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ef521b);}
.sec{padding:18px 36px 0;}
.sec h2{font-size:15px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;margin:0 0 14px;}
.grid{display:flex;gap:14px;}
.card{width:210px;background:#1a1a1a;border-radius:2px;padding:12px;}
.cimg{height:100px;border-radius:2px;margin-bottom:10px;}
.ctitle{font-size:13px;font-weight:500;}
.cprice{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:15px;font-weight:400;margin-top:4px;color:#ef521b;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#121212;border-top:1px solid #2a2a2a;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:11px;color:#9a9a9a;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Native Union Desk Acc 2</div>
<div class="navlinks"><div>Cables</div><div>Chargers</div><div class="on">Desk</div><div>Cases</div></div>
</div>
<div class="hero">
<div class="herotxt">
<div class="tag">Desk Companions</div>
<h1>A quieter,<br>tidier desk</h1>
<p>Bamboo mats, magnetic hubs, and cord organizers made to disappear into the room.</p>
<div class="cta">Shop Desk Accessories</div>
</div>
<div class="desk"><div class="mat"></div><div class="hub"></div></div>
</div>
<div class="sec">
<h2>Desk Essentials</h2>
<div class="grid">
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#cb8a3d,#111111)"></div><div class="ctitle">Bamboo Desk Mat, Large</div><div class="cprice">$59.99</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#ef521b,#1a1a1a)"></div><div class="ctitle">Magnetic Charging Hub</div><div class="cprice">$99.99</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#9a9a9a,#111111)"></div><div class="ctitle">Cord Organizer, Set of 3</div><div class="cprice">$19.99</div></div>
</div>
</div>
<div class="footer"><span>Natural Materials, Considered Design</span><span>Care Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0072ce;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0072ce;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #0072ce; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #0072ce; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #ffffff; color: #002d52;
border: 1px solid #002d52; border-radius: 4px;
padding: 9px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #020202;
border: 1px solid #bfdcf3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #0072ce; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#555555; box-sizing:border-box;
font-family:Poppins, Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
.util { height:30px; background:#001439; display:flex; align-items:center; justify-content:flex-end;
gap:18px; padding:0 32px; font-size:11px; color:#9d9d9d; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#002d52; }
.brand { font-size:20px; font-weight:700; color:#ffffff; letter-spacing:-0.3px; }
.nlinks { display:flex; gap:24px; }
.nlinks div { font-size:13px; font-weight:500; color:#c9daf0; }
.nlinks div.on { color:#ffffff; font-weight:600; }
.navcta { background:#0072ce; color:#fff; font-size:13px; font-weight:600; border-radius:4px; padding:9px 18px; }
.hero { height:230px; background:#002d52; position:relative; display:flex; align-items:center; padding:0 40px; overflow:hidden; }
.hero::after { content:''; position:absolute; right:6%; top:18%; width:190px; height:190px; border:6px solid #0059b5;
border-radius:8px; opacity:0.55; }
.hero::before { content:''; position:absolute; right:14%; top:34%; width:140px; height:140px; border:6px solid #2176bd;
border-radius:8px; opacity:0.55; }
.herotxt { position:relative; z-index:2; max-width:440px; }
.herotxt h1 { color:#ffffff; font-size:34px; font-weight:700; letter-spacing:-0.5px; margin:0 0 10px; }
.herotxt p { color:#ebf6ff; font-size:15px; line-height:1.5; margin:0 0 16px; }
.herobtn { display:inline-block; background:transparent; border:2px solid #ffffff; color:#fff; font-size:13px;
font-weight:600; border-radius:4px; padding:10px 22px; }
.section { padding:22px 32px 0; }
.sechead { font-size:20px; font-weight:600; color:#020202; margin-bottom:14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { background:#ffffff; border:1px solid #e5e5e5; border-radius:8px; overflow:hidden; }
.shot { height:92px; position:relative; }
.c1 .shot { background:linear-gradient(150deg,#0072ce,#002d52); }
.c2 .shot { background:linear-gradient(150deg,#2176bd,#001439); }
.c3 .shot { background:linear-gradient(150deg,#8ab4d7,#002d52); }
.c4 .shot { background:linear-gradient(150deg,#0059b5,#001439); }
.shot .box { position:absolute; left:50%; top:50%; width:44px; height:56px; border:2px solid rgba(255,255,255,0.6);
border-radius:3px; transform:translate(-50%,-50%); }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; text-transform:uppercase;
padding:2px 8px; border-radius:4px; color:#fff; background:#5cb85c; }
.cbody { padding:10px 12px 12px; }
.cmodel { font-family:Consolas,"Courier New",Monaco,monospace; font-size:10px; color:#777777; }
.ctitle { font-size:14px; font-weight:600; color:#020202; margin:3px 0 6px; }
.cprice { font-size:16px; font-weight:700; color:#0072ce; }
</style></head>
<body>
<div class="util">EN / FR · Track Order · Support</div>
<nav>
<div class="brand">Danby</div>
<div class="nlinks"><div class="on">Refrigeration</div><div>Cooking</div><div>Laundry</div><div>Compare</div></div>
<div class="navcta">Find A Retailer</div>
</nav>
<div class="hero">
<div class="herotxt">
<h1>Appliances Built To Fit Real Life</h1>
<p>Compact, efficient, and reliable — home and specialty appliances engineered for every space.</p>
<div class="herobtn">Compare Models</div>
</div>
</div>
<div class="section">
<div class="sechead">Best Selling Models</div>
<div class="grid">
<div class="card c1"><div class="shot"><span class="box"></span><span class="badge">Energy Star</span></div>
<div class="cbody"><div class="cmodel">DCR044A2BSLDB</div><div class="ctitle">4.4 cu.ft. Compact Fridge</div><div class="cprice">$249.99</div></div></div>
<div class="card c2"><div class="shot"><span class="box"></span></div>
<div class="cbody"><div class="cmodel">DBC120BLS</div><div class="ctitle">Beverage Center 120-Can</div><div class="cprice">$399.99</div></div></div>
<div class="card c3"><div class="shot"><span class="box"></span><span class="badge">Energy Star</span></div>
<div class="cbody"><div class="cmodel">DDW631SDB</div><div class="ctitle">18" Built-In Dishwasher</div><div class="cprice">$549.99</div></div></div>
<div class="card c4"><div class="shot"><span class="box"></span></div>
<div class="cbody"><div class="cmodel">DPAC10011BL</div><div class="ctitle">10,000 BTU Portable AC</div><div class="cprice">$429.99</div></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #868e96; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #004085; color: #ffffff;
border: none; border-radius: 12px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #111111;
border: 1px solid #004085; border-radius: 12px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #868e96; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; background: #b1dfbb; color: #155724;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#111111; font-family:-apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;background:#111111;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.logo{font-size:19px;font-weight:600;color:#fff;}
.navlinks{display:flex;gap:16px;font-size:14px;font-weight:600;color:#fff;}
.searchpill{width:220px;height:36px;border-radius:9999px;border:1px solid #dae0e5;display:flex;align-items:center;padding:0 16px;font-size:13px;color:#868e96;}
.catbanner{margin:14px 24px 0;background:#004085;color:#fff;font-size:18px;font-weight:600;padding:12px 24px;border-radius:12px;}
.grid{display:flex;gap:14px;padding:14px 24px 0;}
.card{width:216px;background:#fff;border-radius:12px;padding:12px;}
.thumb{aspect-ratio:1/1;height:110px;border-radius:12px;margin-bottom:8px;}
.ptitle{font-size:16px;font-weight:600;}
.pprice{font-size:14px;color:#868e96;margin-top:4px;}
.badgerow{display:flex;gap:6px;margin-top:6px;}
.badge{font-size:12px;font-weight:700;padding:2px 8px;border-radius:4px;}
.badge.success{background:#b1dfbb;color:#155724;}
.badge.warn{background:#ffe8a1;color:#856404;}
.cartrow{display:flex;justify-content:space-between;align-items:center;padding:14px 24px 0;}
.cartbtn{background:#004085;color:#fff;font-size:14px;font-weight:500;padding:8px 16px;border-radius:9999px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#f8f9fa;color:#636b6f;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:12px;border-top:1px solid #dae0e5;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Reckless Records Independ 2</div>
<div class="navlinks"><div>Rock</div><div>Jazz</div><div>Hip-Hop</div></div>
<div class="searchpill">Search inventory...</div>
</div>
<div class="catbanner">Independent & Local — Chicago Pressings</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#004085,#111);"></div><div class="ptitle">Aja</div><div class="pprice">Steely Dan · $24.99</div><div class="badgerow"><div class="badge success">In Stock</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#155724,#111);"></div><div class="ptitle">Sign O' The Times</div><div class="pprice">Prince · $28.99</div><div class="badgerow"><div class="badge warn">Low Stock</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0c5460,#111);"></div><div class="ptitle">Purple Rain</div><div class="pprice">Prince · $19.99</div><div class="badgerow"><div class="badge success">In Stock</div></div></div>
</div>
<div class="cartrow"><span style="font-size:14px;color:#636b6f;">3 items in cart</span><div class="cartbtn">Checkout</div></div>
<div class="footer"><span>© Reckless Records Independent</span><span>Store Hours Locations</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #090909;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #090909;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #090909; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.38; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #3c763d; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #f5f5f5; color: #090909;
border: 1px solid #3c763d; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #090909;
border: 1px solid #bababa; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #dff0d8; color: #3c763d;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#f5f5f5; color:#090909; box-sizing:border-box; font-family:Arial, Helvetica, sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;background:#ffffff;border-bottom:1px solid #e7e7e7;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.nav .logo{font-weight:700;font-size:16px;letter-spacing:.3px;color:#090909;}
.nav .links{display:flex;gap:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#777;}
.nav .links span:first-child{color:#3c763d;border-bottom:2px solid #3c763d;padding-bottom:4px;}
.wrap{display:flex;height:584px;}
.left{width:420px;background:#eeeeee;display:flex;align-items:center;justify-content:center;position:relative;padding:24px;}
.guitar{width:220px;height:460px;position:relative;}
.body{position:absolute;bottom:0;left:20px;width:180px;height:230px;border-radius:90px 90px 60px 60px;background:linear-gradient(135deg,#b5732e,#7a4a1e);box-shadow:0 12px 24px rgba(9,9,9,.18);}
.body::before{content:'';position:absolute;top:60px;left:55px;width:70px;height:70px;border-radius:50%;background:#2b1710;box-shadow:inset 0 0 0 6px #d9c39a;}
.neck{position:absolute;top:0;left:88px;width:22px;height:230px;background:linear-gradient(90deg,#3d2b16,#5a3f22);border-radius:4px;}
.head{position:absolute;top:-6px;left:76px;width:46px;height:60px;background:#3d2b16;border-radius:6px 6px 14px 14px;}
.thumb{position:absolute;bottom:16px;left:16px;background:#3c763d;color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:4px;border:1px solid #2b542c;}
.right{flex:1;padding:28px 32px;display:flex;flex-direction:column;}
.badge-row{display:flex;gap:8px;margin-bottom:12px;}
.badge{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.b-green{background:#dff0d8;color:#3c763d;border:1px solid #d6e9c6;}
.b-info{background:#d9edf7;color:#31708f;border:1px solid #bce8f1;}
h1{font-size:24px;font-weight:700;margin:0 0 6px;letter-spacing:-.25px;}
.sub{color:#555;font-size:14px;margin:0 0 14px;}
.price{color:#3c763d;font-weight:600;font-size:20px;margin:0 0 16px;}
.desc{font-size:13px;color:#555;line-height:1.5;margin:0 0 16px;}
.spec-table{border:1px solid #e7e7e7;border-radius:8px;overflow:hidden;margin-bottom:16px;}
.spec-row{display:flex;font-family:Consolas,'Courier New',monospace;font-size:12px;border-bottom:1px solid #e7e7e7;}
.spec-row:last-child{border-bottom:none;}
.spec-row .k{width:130px;background:#eeeeee;padding:7px 10px;font-weight:700;text-transform:uppercase;font-size:11px;color:#090909;}
.spec-row .v{padding:7px 10px;color:#555;flex:1;}
.actions{display:flex;gap:10px;margin-top:auto;}
.btn-primary{background:#3c763d;color:#fff;font-size:15px;font-weight:600;letter-spacing:.3px;border-radius:8px;padding:12px 24px;height:44px;display:flex;align-items:center;}
.btn-secondary{background:#f5f5f5;color:#090909;font-size:15px;font-weight:600;border-radius:8px;padding:11px 23px;height:44px;border:1px solid #e7e7e7;display:flex;align-items:center;}
</style>
</head>
<body>
<div class="nav"><div class="logo">Cordoba Music</div><div class="links"><span>Guitars</span><span>Ukuleles</span><span>Accessories</span><span>Care Guide</span></div></div>
<div class="wrap">
<div class="left">
<div class="guitar">
<div class="head"></div>
<div class="neck"></div>
<div class="body"></div>
</div>
<div class="thumb">In Stock</div>
</div>
<div class="right">
<div class="badge-row"><span class="badge b-green">In Stock</span><span class="badge b-info">Handmade</span></div>
<h1>C12 SP/IN Nylon-String Classical</h1>
<p class="sub">Solano Series · Solid European Spruce Top</p>
<p class="price">$899.00</p>
<p class="desc">A workshop favorite for players moving up from a student instrument. Indian rosewood back and sides give this classical a warm, articulate voice suited to fingerstyle and traditional repertoire alike.</p>
<div class="spec-table">
<div class="spec-row"><div class="k">Scale Length</div><div class="v">650mm</div></div>
<div class="spec-row"><div class="k">Nut Width</div><div class="v">52mm</div></div>
<div class="spec-row"><div class="k">Frets</div><div class="v">19</div></div>
<div class="spec-row"><div class="k">Finish</div><div class="v">Satin</div></div>
</div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Compare</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdfdfd; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdfdfd; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #0076bf; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fdfdfd; color: #313131;
border: 1px solid #0076bf; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #313131; color: #ffffff;
border: 1px solid #cacaca; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #0076bf; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fdfdfd; color:#313131; font-family:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;background:#2b2a38;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.navlinks{display:flex;gap:0;}
.navitem{color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:0 16px;height:64px;display:flex;align-items:center;}
.navitem.active{color:#0076bf;border-bottom:2px solid #0076bf;}
.search{background:#313131;color:#a7a9ac;border-radius:9999px;font-size:12px;padding:9px 18px;}
.hero{height:200px;background:#313131;color:#fff;display:flex;align-items:center;padding:0 32px;}
.herotext{width:460px;}
.herotext h1{font-size:28px;font-weight:700;margin:0 0 10px;}
.cta{display:inline-block;background:#0076bf;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;border-radius:4px;}
.grid{display:flex;gap:14px;padding:16px 32px;}
.card{width:200px;background:#fff;border:1px solid #d7d7d7;border-radius:8px;padding:12px;}
.thumb{height:88px;background:#f2f2f2;border-radius:8px 8px 0 0;margin:-12px -12px 10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#0076bf;color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.ptitle{font-size:14px;font-weight:600;}
.pprice{font-size:14px;color:#444;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#2b2a38;color:#a7a9ac;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Pioneer DJ</div>
<div class="navlinks"><div class="navitem active">DJ Players</div><div class="navitem">Mixers</div><div class="navitem">rekordbox</div></div>
<div class="search">Search gear...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Precision instruments for the booth.</h1>
<div class="cta">Shop CDJs</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0076bf,#313131)"><div class="badge">New</div></div><div class="ptitle">CDJ-3000</div><div class="pprice">$2,299.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#313131,#0076bf)"></div><div class="ptitle">DJM-A9 Mixer</div><div class="pprice">$2,699.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#20dfc3,#313131)"></div><div class="ptitle">XDJ-RX3</div><div class="pprice">$1,899.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e40010,#313131)"></div><div class="ptitle">DDJ-FLX10</div><div class="pprice">$999.00</div></div>
</div>
<div class="footer"><span>© Pioneer DJ · DJ Equipment</span><span>Support · rekordbox Cloud</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #55565a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #55565a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #55565a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7c6a55; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #e94125; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #4dacaa; color: #ffffff;
border: 1px solid #e94125; border-radius: 9999px;
padding: 14px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #55565a;
border: 1px solid #d4d5d6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6a55; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: 500; line-height: 1.18; letter-spacing: 0.2px; background: #e94125; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Infantino</title>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#f2f2f2;font-family:Georgia,'Times New Roman',serif;color:#55565a;}
*{box-sizing:border-box;}
.nav{position:absolute;top:0;left:0;width:960px;height:64px;background:#ffffff;border-bottom:1px solid #e5e5e5;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:Georgia,serif;font-weight:500;font-size:22px;color:#55565a;letter-spacing:-0.3px;}
.logo b{color:#e94125;}
.navlinks{display:flex;gap:28px;font-size:14px;font-weight:500;}
.navlinks span{color:#55565a;}
.navlinks span.active{color:#e94125;}
.navicons{display:flex;gap:16px;align-items:center;}
.searchpill{width:170px;height:32px;border-radius:9999px;background:#f2f2f2;border:1px solid #e5e5e5;display:flex;align-items:center;padding:0 14px;font-size:12px;color:#7c6a55;}
.cart{width:32px;height:32px;border-radius:9999px;background:#4dacaa;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;}
.promo{position:absolute;top:64px;left:0;width:960px;height:30px;background:#e94125;color:#fff;font-size:11px;font-weight:500;display:flex;align-items:center;justify-content:center;letter-spacing:0.3px;}
.hero{position:absolute;top:94px;left:0;width:960px;height:290px;background:#f2f2f2;display:flex;align-items:center;padding:0 48px;}
.hero-copy{width:430px;}
.hero-copy .eyebrow{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#4dacaa;font-weight:600;margin-bottom:10px;}
.hero-copy h1{font-family:'Brush Script MT',cursive;font-style:italic;font-weight:400;font-size:52px;line-height:1.05;color:#3a3a3a;margin:0 0 14px 0;}
.hero-copy p{font-size:15px;line-height:1.5;color:#55565a;margin:0 0 20px 0;width:380px;}
.btnrow{display:flex;gap:14px;}
.btn-primary{background:#e94125;color:#fff;border-radius:9999px;padding:13px 26px;font-size:14px;font-weight:600;letter-spacing:0.3px;display:inline-block;}
.btn-ghost{border:2px solid #e94125;color:#e94125;border-radius:9999px;padding:11px 24px;font-size:14px;font-weight:600;display:inline-block;}
.hero-art{position:absolute;right:56px;top:38px;width:280px;height:230px;}
.blob{position:absolute;border-radius:50%;}
.blob1{width:230px;height:230px;background:radial-gradient(circle at 35% 30%,#ffd7c2,#f5b3a5 70%);left:20px;top:0;}
.blob2{width:110px;height:110px;background:#4dacaa;top:20px;right:0;opacity:0.85;}
.blob3{width:70px;height:70px;background:#00afab;bottom:0;left:60px;opacity:0.9;}
.agebadge{position:absolute;bottom:14px;right:14px;background:#4dacaa;color:#fff;font-size:10px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;border-radius:9999px;padding:5px 12px;}
.catrow{position:absolute;top:400px;left:48px;width:864px;height:36px;display:flex;gap:10px;}
.chip{border:1px solid #e5e5e5;border-radius:9999px;padding:8px 16px;font-size:13px;color:#55565a;background:#f2f2f2;}
.chip.active{background:#4dacaa;color:#fff;border:none;}
.grid{position:absolute;top:452px;left:48px;width:864px;height:172px;display:flex;gap:20px;}
.card{width:200px;height:172px;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(85,86,90,0.08);padding:12px;position:relative;}
.card .imgbox{width:176px;height:88px;border-radius:8px;margin-bottom:8px;}
.imgbox.a{background:linear-gradient(135deg,#ffd7c2,#f5b3a5);}
.imgbox.b{background:linear-gradient(135deg,#cdeeed,#4dacaa);}
.imgbox.c{background:linear-gradient(135deg,#e8ded0,#7c6a55);}
.imgbox.d{background:linear-gradient(135deg,#fff0e8,#e94125);opacity:0.85;}
.card .title{font-size:13px;font-weight:500;color:#55565a;margin-bottom:4px;}
.card .price{font-size:15px;font-weight:500;color:#e94125;}
.badge{position:absolute;top:8px;left:8px;background:#e94125;color:#fff;font-size:9px;font-weight:500;border-radius:4px;padding:3px 6px;}
</style>
<div class="nav">
<div class="logo"><b>Infantino</b></div>
<div class="navlinks">
<span class="active">New Baby</span><span>Feeding</span><span>Play</span><span>Gift Sets</span>
</div>
<div class="navicons">
<div class="searchpill">Search products…</div>
<div class="cart">2</div>
</div>
</div>
<div class="promo">FREE SHIPPING ON ORDERS OVER $35 — SHOP THE NEW ARRIVAL COLLECTION</div>
<div class="hero">
<div class="hero-copy">
<div class="eyebrow">Seasonal Collection</div>
<h1>soft starts,<br>bright days</h1>
<p>Rounded-corner toys and feeding essentials designed for tiny hands and busy nights — tested for the earliest months.</p>
<div class="btnrow">
<div class="btn-primary">Shop New Baby</div>
<div class="btn-ghost">Gift Finder</div>
</div>
</div>
<div class="hero-art">
<div class="blob blob1"></div>
<div class="blob blob2"></div>
<div class="blob blob3"></div>
<div class="agebadge">0–3M</div>
</div>
</div>
<div class="catrow">
<div class="chip active">All</div>
<div class="chip">Rattles</div>
<div class="chip">Bath Time</div>
<div class="chip">Teethers</div>
<div class="chip">Bundles</div>
</div>
<div class="grid">
<div class="card">
<div class="badge">New</div>
<div class="imgbox a"></div>
<div class="title">Twist & Fold Rattle</div>
<div class="price">$14.99</div>
</div>
<div class="card">
<div class="imgbox b"></div>
<div class="title">Sensory Bath Set</div>
<div class="price">$21.99</div>
</div>
<div class="card">
<div class="imgbox c"></div>
<div class="title">Cloud Teether Ring</div>
<div class="price">$9.99</div>
</div>
<div class="card">
<div class="badge">Bundle</div>
<div class="imgbox d"></div>
<div class="title">First Year Gift Set</div>
<div class="price">$39.99</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #18181b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #18181b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #18181b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #52525b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #a72a2f; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #fafafa; color: #18181b;
border: 1px solid #a72a2f; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #18181b;
border: 1px solid #c2c2c2; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #52525b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.8px; background: #e8d087; color: #18181b;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:'Arial Narrow',Arial,sans-serif; color:#27272a; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#18181b;}
.logo{font-size:19px;font-weight:800;letter-spacing:.5px;color:#fff;text-transform:uppercase;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#a1a1aa;}
.pillar{height:340px;position:relative;display:flex;justify-content:center;align-items:center;background:radial-gradient(ellipse at 50% 30%,#f4f4f5,#e4e4e7 75%);}
.chair{position:relative;width:150px;height:230px;}
.back{position:absolute;left:20px;top:0;width:110px;height:150px;border-radius:20px 20px 10px 10px;background:linear-gradient(160deg,#a72a2f,#18181b 70%);}
.seat{position:absolute;left:10px;top:130px;width:130px;height:50px;border-radius:10px;background:linear-gradient(160deg,#27272a,#18181b);}
.base{position:absolute;left:55px;top:180px;width:40px;height:40px;background:#18181b;border-radius:4px;}
.htext{position:absolute;left:60px;top:56px;width:280px;}
.htext .k{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#a72a2f;margin-bottom:12px;}
.htext h1{font-size:26px;font-weight:800;color:#18181b;margin:0 0 10px;line-height:1.2;}
.htext p{font-size:13px;color:#52525b;line-height:1.5;margin:0;max-width:260px;}
.specrow{position:absolute;right:70px;top:70px;display:flex;flex-direction:column;gap:10px;}
.specchip{background:#fff;border:1px solid #d4d4d8;border-radius:8px;padding:8px 14px;font-size:11px;font-weight:700;color:#3f3f46;text-transform:uppercase;box-shadow:0 2px 6px rgba(0,0,0,.05);}
.configbar{height:64px;background:#18181b;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.cfginfo{color:#fff;font-size:14px;font-weight:700;}
.cfginfo span{color:#a1a1aa;font-weight:400;font-size:12px;display:block;margin-top:2px;}
.btn{background:#a72a2f;color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;padding:12px 26px;border-radius:8px;letter-spacing:.4px;}
.grid{display:flex;gap:14px;padding:16px 36px 0;}
.card{width:150px;background:#fff;border:1px solid #e4e4e7;border-radius:8px;padding:9px;}
.thumb{height:70px;border-radius:0;margin-bottom:8px;}
.pname{font-size:11.5px;font-weight:700;color:#18181b;height:28px;overflow:hidden;line-height:1.3;}
.price{font-size:12.5px;font-weight:700;color:#a72a2f;margin-top:3px;}
</style>
<div class="nav">
<div class="logo">Secretlab</div>
<div class="navlinks"><div>Titan Evo</div><div>Fabrics</div><div>Accessories</div><div>Configure</div></div>
</div>
<div class="pillar">
<div class="htext">
<div class="k">Titan Evo 2022</div>
<h1>Engineered for the long session.</h1>
<p>SoftWeave Plus fabric over a NEO Hybrid foam core, built for hours that don't end.</p>
</div>
<div class="chair"><div class="back"></div><div class="seat"></div><div class="base"></div></div>
<div class="specrow">
<div class="specchip">4D Armrests</div>
<div class="specchip">Magnetic Head Pillow</div>
<div class="specchip">Steel Frame</div>
</div>
</div>
<div class="configbar">
<div class="cfginfo">Titan Evo 2022 — Stealth<span>SoftWeave Plus / Black</span></div>
<div class="btn">Configure Yours</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#a72a2f,#18181b)"></div><div class="pname">Titan Evo 2022 Stealth</div><div class="price">$599</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#e8d087,#18181b)"></div><div class="pname">Titan Evo Prism Edition</div><div class="price">$649</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#52525b,#18181b)"></div><div class="pname">Magnetic Head Pillow</div><div class="price">$39</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#d4d4d8,#27272a)"></div><div class="pname">Skins Cover Set</div><div class="price">$199</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; background: #0066c0; color: #ffffff;
border: none; border-radius: 0px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; background: #ffffff; color: #222222;
border: 1px solid #0066c0; border-radius: 0px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; background: #ffffff; color: #333333;
border: 1px solid #c0c0c0; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; background: #008000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Arial,Helvetica,sans-serif; background:#f5f5f5; color:#333333; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:48px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #cccccc;}
.logo{font-size:17px;font-weight:700;color:#0066c0;}
.navlinks{display:flex;gap:18px;font-size:13px;font-weight:700;color:#333;}
.searchrow{display:flex;padding:10px 24px;gap:10px;background:#fff;border-bottom:1px solid #cccccc;}
.search{flex:1;height:32px;background:#fafafa;border:1px solid #cccccc;}
.searchbtn{width:80px;height:32px;background:#0066c0;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.catstrip{display:flex;gap:16px;padding:8px 24px;font-size:12px;font-weight:700;color:#666;background:#f5f5f5;border-bottom:1px solid #cccccc;}
.catstrip .on{color:#0066c0;}
.sec{padding:14px 24px 0;}
.sec h2{font-size:14px;font-weight:700;margin:0 0 10px;}
.grid{display:flex;flex-wrap:wrap;gap:10px;}
.card{width:110px;background:#fff;border:1px solid #cccccc;padding:6px;}
.cimg{height:130px;background:#fafafa;margin-bottom:6px;position:relative;}
.stock{position:absolute;bottom:4px;left:4px;right:4px;font-size:9px;font-weight:700;text-align:center;color:#fff;padding:1px 0;}
.ctitle{font-size:11px;font-weight:700;line-height:1.3;height:28px;overflow:hidden;}
.cgrade{font-size:10px;color:#666;margin-top:2px;}
.cprice{font-size:13px;font-weight:700;color:#0066c0;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:32px;background:#fff;border-top:1px solid #cccccc;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:11px;color:#666;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mycomicshop</div>
<div class="navlinks"><div>Sell</div><div>My Account</div><div>Want List</div></div>
</div>
<div class="searchrow"><div class="search"></div><div class="searchbtn">Search</div></div>
<div class="catstrip"><div class="on">Back Issues</div><div>Golden Age</div><div>Silver Age</div><div>Variants</div><div>Graded (CGC)</div></div>
<div class="sec">
<h2>Amazing Fantasy — Search Results (47 items)</h2>
<div class="grid">
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#0066c0,#cccccc)"><div class="stock" style="background:#008000;">In Stock</div></div><div class="ctitle">Amazing Fantasy #15</div><div class="cgrade">Condition: VG 4.0</div><div class="cprice">$4,250.00</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#666,#cccccc)"><div class="stock" style="background:#ff8c00;">Low Stock</div></div><div class="ctitle">Amazing Fantasy #15 Reprint</div><div class="cgrade">Condition: NM 9.4</div><div class="cprice">$89.00</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#999,#333)"><div class="stock" style="background:#d9534f;">Sold Out</div></div><div class="ctitle">Amazing Spider-Man #300</div><div class="cgrade">Condition: FN 6.0</div><div class="cprice">$450.00</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#0066c0,#333)"><div class="stock" style="background:#008000;">In Stock</div></div><div class="ctitle">Spider-Man #1 Variant</div><div class="cgrade">Condition: NM 9.6</div><div class="cprice">$120.00</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#999,#0066c0)"><div class="stock" style="background:#008000;">In Stock</div></div><div class="ctitle">Venom Lethal Protector #1</div><div class="cgrade">Condition: VF 8.0</div><div class="cprice">$32.00</div></div>
</div>
</div>
<div class="footer"><span>© MyComicShop.com</span><span>Grading Guide Consign</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1e1f26;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1e1f26;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #1e1f26; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffcc33; color: #1e1f26;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #1e1f26;
border: 1px solid #ffcc33; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #32373c;
border: 1px solid #c7c7c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffcc33; color: #1e1f26;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Montserrat,Helvetica,Arial,sans-serif; color:#1e1f26; }
*{box-sizing:border-box;}
.nav{height:64px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;letter-spacing:-0.2px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;}
.navlinks div:first-child{border-bottom:2px solid #ffcc33;padding-bottom:22px;}
.cart{background:#ffcc33;color:#1e1f26;font-size:11px;font-weight:700;padding:6px 14px;border-radius:8px;}
.hero{height:250px;background:#1e1f26;display:flex;align-items:center;padding:0 36px;position:relative;overflow:hidden;}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,0.4);}
.herotext{position:relative;z-index:2;}
.herotext h1{font-size:28px;font-weight:600;color:#fff;margin:0 0 10px;max-width:360px;}
.herotext p{font-size:14px;color:#eeeeee;margin:0 0 16px;max-width:340px;}
.cta{display:inline-block;background:#ffcc33;color:#1e1f26;font-size:12px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;padding:12px 24px;border-radius:8px;}
.spot{position:absolute;right:40px;top:20px;width:260px;height:210px;background:linear-gradient(160deg,#1ea0c3,#e94c89 55%,#02e49b);opacity:0.5;border-radius:12px;}
.sec{padding:18px 32px 0;}
.sech{font-size:20px;font-weight:600;margin:0 0 12px;}
.grid{display:flex;gap:14px;}
.card{width:150px;}
.thumb{width:150px;height:220px;background:#f7f7f7;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#e94c89;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.badgec{background:#1ea0c3;}
.ftitle{font-size:14px;font-weight:600;margin-top:8px;}
.fmeta{font-size:11px;color:#949494;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#1e1f26;color:#eeeeee;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;}
.footer span{margin-left:16px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Oscilloscope Laboratories</div>
<div class="navlinks"><div>Films</div><div>Shop</div><div>About</div><div>News</div></div>
<div class="cart">Cart (0)</div>
</div>
<div class="hero">
<div class="scrim"></div><div class="spot"></div>
<div class="herotext">
<h1>Now Playing: Films Worth Talking About</h1>
<p>A curated microcinema of independent and repertory film.</p>
<div class="cta">Browse Films</div>
</div>
</div>
<div class="sec">
<div class="sech">Now Playing</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#1ea0c3,#1e1f26)"></div><div class="badgec badge">Coming Soon</div><div class="ftitle">Static Bloom</div><div class="fmeta">2024 · Dir. Reyes</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e94c89,#1e1f26)"></div><div class="badge">New</div><div class="ftitle">Nightshift</div><div class="fmeta">2023 · Dir. Adeyemi</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#02e49b,#1e1f26)"></div><div class="ftitle">Salt Water Town</div><div class="fmeta">2022 · Dir. Lindqvist</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#ffcc33,#1e1f26)"></div><div class="ftitle">The Long Take</div><div class="fmeta">2021 · Dir. Kowalski</div></div>
</div>
</div>
<div class="footer"><span>© A Microcinema Online</span><span>Distribution<span> Press<span> Contact</span></span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f5f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f7f5f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fefdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#FFFFFF; color:#1E1919; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; padding:24px 40px 0; position:relative; }
h1 { font-size:28px; font-weight:700; margin:0; letter-spacing:-0.4pt; }
.shelf-h { font-size:22px; font-weight:700; margin:24px 0 12px; }
.shelf { display:flex; gap:12px; }
.rcard { width:140px; height:160px; border-radius:12px; border:1px solid #E6E1DA; flex-shrink:0; }
.rthumb { width:140px; height:96px; border-radius:12px 12px 0 0; }
.rname { font-size:13px; font-weight:600; padding:8px 8px 2px; }
.rmeta { font-size:11px; color:#6F6A65; padding:0 8px; }
.filerow { display:flex; align-items:center; padding:12px 0; border-bottom:1px solid #E4E5E5; }
.typeicon { width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:800; margin-right:14px; flex-shrink:0; }
.filemain { flex:1; }
.filemain .n { font-size:16px; font-weight:600; }
.filemain .m { font-size:14px; color:#6F6A65; margin-top:2px; }
.dots { color:#6F6A65; font-size:18px; }
.fab { position:absolute; bottom:16px; right:32px; width:56px; height:56px; border-radius:50%; background:#0061FF; display:flex; align-items:center; justify-content:center; color:#fff; font-size:26px; box-shadow:0 8px 20px rgba(0,97,255,0.32); }
.uploadbar { margin:20px 112px 0 40px; }
.ub-label { font-size:14px; font-weight:600; margin-bottom:6px; }
.ub-track { height:3px; background:#E6E1DA; border-radius:2px; }
.ub-fill { width:52%; height:3px; background:#0061FF; border-radius:2px; }
</style>
</head>
<body>
<div class="stage">
<div style="font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#6F6A65;margin-bottom:4px;">Dropbox (iOS)</div>
<h1>Home</h1>
<div class="shelf-h">Recents</div>
<div class="shelf">
<div class="rcard"><div class="rthumb" style="background:linear-gradient(135deg,#cfe6ff,#8bb8ee)"></div><div class="rname">Site Redesign.fig</div><div class="rmeta">12 KB · Today</div></div>
<div class="rcard"><div class="rthumb" style="background:#F7F5F2;display:flex;align-items:center;justify-content:center;font-size:28px;color:#FA551E">📄</div><div class="rname">Q3 Report.pdf</div><div class="rmeta">2.4 MB · Apr 12</div></div>
<div class="rcard"><div class="rthumb" style="background:linear-gradient(135deg,#ffe0c8,#f0a878)"></div><div class="rname">Trip photos</div><div class="rmeta">18 items</div></div>
<div class="rcard"><div class="rthumb" style="background:#F7F5F2;display:flex;align-items:center;justify-content:center;font-size:28px;color:#1A8754">📊</div><div class="rname">Budget 2026.xlsx</div><div class="rmeta">88 KB · Mar 2</div></div>
</div>
<div class="shelf-h">All files</div>
<div class="filerow">
<div class="typeicon" style="background:#FA551E">PDF</div>
<div class="filemain"><div class="n">Q3 Report.pdf</div><div class="m">2.4 MB · Modified Apr 12</div></div>
<div class="dots">⋯</div>
</div>
<div class="filerow">
<div class="typeicon" style="background:#0061FF">DOC</div>
<div class="filemain"><div class="n">Meeting Notes.paper</div><div class="m">14 KB · Modified Apr 10</div></div>
<div class="dots">⋯</div>
</div>
<div class="filerow">
<div class="typeicon" style="background:#1A8754">XLS</div>
<div class="filemain"><div class="n">Budget 2026.xlsx</div><div class="m">88 KB · Modified Mar 2</div></div>
<div class="dots">⋯</div>
</div>
<div class="uploadbar">
<div class="ub-label">Uploading 3 of 8 · 4.2 MB</div>
<div class="ub-track"><div class="ub-fill"></div></div>
</div>
<div class="fab">+</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #9ca3af; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #412a78; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: transparent; color: #ffffff;
border: 1px solid #412a78; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #1a1a1a; color: #ffffff;
border: 1px solid #121212; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ca3af; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff0000; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#ffffff; box-sizing:border-box;
font-family:'Montserrat', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#111111; display:flex; align-items:center; gap:22px; padding:0 24px; }
.logo { font-size:18px; font-weight:600; letter-spacing:-.3px; }
.navlink { font-size:13px; font-weight:500; text-transform:uppercase; letter-spacing:.2px; color:#9ca3af; }
.navlink.active { color:#412a78; }
.navlink.active::after { content:''; display:block; height:2px; background:#412a78; margin-top:6px; }
.searchw { margin-left:auto; width:180px; height:36px; border-radius:999px; background:#1a1a1a;
display:flex; align-items:center; padding:0 14px; font-size:12px; color:#9ca3af; }
.cart { width:36px; height:36px; border-radius:4px; background:#412a78; display:flex; align-items:center;
justify-content:center; font-size:12px; font-weight:700; }
.stage { display:flex; gap:26px; padding:24px; }
.cover { width:230px; height:230px; border-radius:4px; flex:0 0 auto; position:relative; overflow:hidden;
background: radial-gradient(circle at 30% 20%, #632244 0%, #16140e 55%), linear-gradient(160deg,#412a78,#111);
box-shadow:0 10px 30px rgba(0,0,0,.5); }
.cover::before { content:''; position:absolute; inset:0;
background:repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 10px); }
.genretag { position:absolute; left:12px; bottom:12px; background:#412a78; color:#fff; font-size:10px;
font-weight:700; text-transform:uppercase; letter-spacing:.5px; border-radius:999px; padding:4px 12px; }
.info { flex:1; }
.kicker { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:#10b484; }
h1 { font-size:26px; font-weight:600; margin:6px 0 4px; }
.artist { font-size:15px; color:#9ca3af; margin-bottom:14px; }
.fmtrow { display:flex; gap:8px; margin-bottom:16px; }
.fmt { border:1px solid #2a2a2a; border-radius:4px; padding:8px 16px; font-size:13px; color:#dedede; }
.fmt.active { background:#412a78; border-color:#412a78; color:#fff; }
.pricerow { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.price { font-size:24px; font-weight:600; }
.old { font-size:14px; color:#6b6b6b; text-decoration:line-through; }
.btnrow { display:flex; gap:10px; }
.btn-p { background:#412a78; color:#fff; border:none; border-radius:4px; height:44px; padding:0 28px;
font-size:14px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
.btn-o { background:transparent; color:#fff; border:1px solid #ebebeb; border-radius:4px; height:44px; padding:0 22px;
font-size:14px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
.tracklist { margin-top:18px; border-top:1px solid #1f1f1f; padding-top:12px; }
.track { display:flex; justify-content:space-between; font-size:12px; color:#9ca3af; padding:4px 0; }
.track b { color:#fff; font-weight:400; }
.relatedwrap { padding:0 24px; }
.relatedhdr { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#9ca3af;
border-top:1px solid #1f1f1f; padding-top:12px; margin-bottom:10px; }
.relgrid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.rc { background:#1f1f1f; border-radius:4px; padding:6px; }
.rc .th { height:56px; border-radius:2px; background:linear-gradient(160deg,#10b484,#111); margin-bottom:6px; }
.rc .t { font-size:10px; color:#fff; line-height:1.3; height:24px; overflow:hidden; }
</style></head>
<body>
<nav>
<span class="logo">Century Media</span>
<span class="navlink">New Releases</span>
<span class="navlink active">Metal</span>
<span class="navlink">Vinyl</span>
<span class="navlink">Merch</span>
<div class="searchw">Search bands…</div>
<div class="cart">2</div>
</nav>
<div class="stage">
<div class="cover"><span class="genretag">Death Metal</span></div>
<div class="info">
<div class="kicker">New Release · Ltd. Colored Vinyl</div>
<h1>Hollow Choir — "The Ashfall Requiem"</h1>
<div class="artist">Hollow Choir · Century Media Records</div>
<div class="fmtrow">
<span class="fmt active">180g Black Vinyl</span>
<span class="fmt">Splatter Vinyl</span>
<span class="fmt">CD Digipak</span>
</div>
<div class="pricerow">
<span class="price">$28.99</span>
<span class="old">$34.99</span>
</div>
<div class="btnrow">
<button class="btn-p">Add to Cart</button>
<button class="btn-o">Preview Tracks</button>
</div>
<div class="tracklist">
<div class="track"><span>01. Ashfall Requiem (Intro)</span><b>3:12</b></div>
<div class="track"><span>02. Widow's Static</span><b>4:47</b></div>
<div class="track"><span>03. Cathedral of Rust</span><b>5:03</b></div>
</div>
</div>
</div>
<div class="relatedwrap">
<div class="relatedhdr">You May Also Like</div>
<div class="relgrid">
<div class="rc"><div class="th"></div><div class="t">Iron Vale — Descent</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(160deg,#ff0000,#111)"></div><div class="t">Sable Mourn — Static</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(160deg,#412a78,#000)"></div><div class="t">Grave Choir — Ruin</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(160deg,#9ca3af,#111)"></div><div class="t">Wraithborn — Split EP</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(160deg,#10b484,#1f1f1f)"></div><div class="t">Hollow Choir — Live '24</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(160deg,#632244,#111)"></div><div class="t">Nightglass — Fracture</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #aba1fa; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #aba1fa; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #56527a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #aba1fa; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #aba1fa; color: #111111;
border: 1px solid #928ad5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #56527a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #9087d2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box; font-family:"Inter", "Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
.split { display:flex; height:100%; }
.corp { width:400px; background:#ffffff; display:flex; flex-direction:column; justify-content:center; padding:0 34px; }
.corp .brand { font-size:14px; margin-bottom:18px; letter-spacing:0.4px; }
.corp h1 { font-size:42px; font-weight:400; line-height:1.2; margin:0 0 16px; }
.corp .code { font-family:monospace; font-size:12px; color:#333; background:#f7f7f7; padding:8px 10px; border-radius:4px; }
.corp .navrow { display:flex; gap:16px; font-size:12px; margin-top:26px; color:#000; }
.prod { flex:1; background:#090719; color:#fff; display:flex; flex-direction:column; }
.prodnav { display:flex; justify-content:space-between; align-items:center; padding:16px 24px; }
.prodnav .links { display:flex; gap:16px; font-size:13px; }
.prodnav .links span:not(:first-child) { opacity:0.5; }
.lang { border:3px solid #aba1fa; color:#aba1fa; border-radius:8px; padding:6px 12px; font-size:11px; font-weight:700; }
.prodhero { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:0 20px; text-align:center; }
.prodhero h2 { font-size:26px; margin:0; color:#aba1fa; font-weight:700; }
.chips { display:flex; gap:10px; }
.chip { border-radius:28px; padding:10px 20px; font-size:14px; font-weight:700; }
.chip.on { background:#030112; color:#fff; }
.chip.off { background:#cecdd5; color:#030112; }
.cta { background:#ffffff; color:#150e2d; border:none; border-radius:20px; padding:12px 30px; font-size:15px; font-weight:700; }
</style></head>
<body>
<div class="split">
<div class="corp">
<div class="brand">POZAlabs</div>
<h1>Ignite your creativity</h1>
<div class="code">with POZAlabs as technology:<br> expand(your_creativity)</div>
<div class="navrow"><span>About</span><span>Service</span><span>Research</span><span>Recruit</span></div>
</div>
<div class="prod">
<div class="prodnav">
<div class="links"><span>MUSIA</span><span>PRODUCTS</span><span>PRICING</span><span>SUPPORT</span></div>
<div class="lang">ENGLISH</div>
</div>
<div class="prodhero">
<h2>MUSIA ONE</h2>
<div class="chips">
<div class="chip on">Songwriting</div>
<div class="chip off">Instrument</div>
<div class="chip off">Download</div>
</div>
<button class="cta">TRY FOR FREE</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf6f0; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf6f0; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.2; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #8a8178; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.1em; background: #1c1c1c; color: #faf6f0;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.1em; background: transparent; color: #1c1c1c;
border: 1px solid #1c1c1c; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #faf6f0; color: #1c1c1c;
border: 1px solid #c2c0bb; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8178; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.1em; background: #e8cfc0; color: #1c1c1c;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#faf6f0; font-family:'Helvetica Neue',Arial,sans-serif; color:#1c1c1c; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #ede5db;}
.logo{font-family:'Times New Roman',Georgia,serif;font-size:24px;font-weight:400;}
.navlinks{display:flex;gap:22px;font-size:12px;letter-spacing:0.06em;}
.hero{height:320px;display:flex;}
.heroimg{width:50%;background:radial-gradient(circle at 50% 55%,#e8cfc0 0%,#f4ede1 60%,#faf6f0 100%);position:relative;}
.heroimg::before{content:'';position:absolute;left:50%;top:52%;width:70px;height:100px;border-radius:35px 35px 20px 20px;background:#1c1c1c;transform:translate(-50%,-50%);}
.herotext{width:50%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;}
.herotext h1{font-family:'Times New Roman',Georgia,serif;font-size:36px;font-weight:400;line-height:1.15;margin:0 0 14px;}
.herotext p{font-size:14px;color:#3d3936;margin:0 0 20px;max-width:300px;line-height:1.5;}
.cta{background:#1c1c1c;color:#faf6f0;font-size:13px;text-transform:uppercase;letter-spacing:0.1em;padding:14px 28px;width:fit-content;}
.shades{display:flex;gap:8px;padding:20px 40px 0;}
.shade{width:28px;height:28px;border-radius:50%;border:1px solid #e3d9cd;}
.shade.on{border:2px solid #1c1c1c;}
.label{padding:20px 40px 8px;font-size:13px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;}
.grid{display:flex;gap:14px;padding:0 40px;}
.card{width:200px;background:#f4ede1;border-radius:8px;padding:12px;}
.thumb{height:110px;border-radius:6px;margin-bottom:8px;}
.pname{font-size:15px;margin-bottom:2px;}
.pprice{font-size:14px;font-weight:700;}
</style>
<div class="nav">
<div class="logo">Rhode</div>
<div class="navlinks"><span>SKIN</span><span>LIP</span><span>SET</span><span>ABOUT</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Glaze from the inside out.</h1>
<p>A dewy formula built for skin that speaks for itself. No filter needed.</p>
<div class="cta">Shop the Peptide Glaze</div>
</div>
<div class="heroimg"></div>
</div>
<div class="shades">
<div class="shade on" style="background:#e8cfc0"></div>
<div class="shade" style="background:#c98a68"></div>
<div class="shade" style="background:#8a5a3f"></div>
<div class="shade" style="background:#f0ddd3"></div>
</div>
<div class="label">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e8cfc0,#faf6f0)"></div><div class="pname">Peptide Lip Treatment</div><div class="pprice">$18</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c98a68,#f4ede1)"></div><div class="pname">Barrier Dew Cream</div><div class="pprice">$28</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8a5a3f,#faf6f0)"></div><div class="pname">Watermelon Glaze Duo</div><div class="pprice">$32</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #444444;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #444444;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.3px; background: #234600; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #234600;
border: 1px solid #234600; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #444444;
border: 1px solid #d0d0d0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ed541d; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,Verdana,sans-serif; color:#444444; }
*{box-sizing:border-box;}
.nav{height:56px;background:#234600;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.logo{font-family:Baskerville,'Times New Roman',Georgia,serif;font-size:22px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.2px;color:#fff;}
.breadcrumb{background:#f6f6f6;padding:8px 28px;font-size:12px;color:#aaaaaa;}
.breadcrumb span{color:#003399;}
.hero{background:#234600;color:#fff;padding:36px 28px;display:flex;align-items:center;min-height:170px;}
.herotext{width:55%;}
.h1{font-family:Baskerville,serif;font-size:34px;font-weight:700;margin:0 0 10px;line-height:1.2;}
.sub{font-size:14px;line-height:1.5;margin:0 0 18px;max-width:340px;color:#e0ead4;}
.btn{display:inline-block;background:#fff;color:#234600;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;padding:11px 22px;border-radius:4px;}
.grid{display:flex;gap:14px;padding:20px 28px 0;}
.card{width:200px;background:#fff;border:1px solid #dfdfdf;border-radius:8px;padding:12px;}
.thumb{height:100px;background:#f6f6f6;border-radius:4px;margin-bottom:10px;}
.title{font-size:16px;font-weight:700;color:#444;}
.price{font-size:18px;font-weight:700;color:#234600;margin-top:6px;}
.newbadge{display:inline-block;background:#bbee77;color:#234600;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;padding:4px 8px;border-radius:4px;margin-top:8px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#234600;color:#fff;font-size:12px;display:flex;align-items:center;padding:0 28px;gap:20px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Spear And Jackson</div>
<div class="navlinks"><span>Digging</span><span>Cutting</span><span>Raking</span><span>Compare</span></div>
</div>
<div class="breadcrumb">Garden > Digging > <span>Stainless Steel Spades</span></div>
<div class="hero">
<div class="herotext">
<div class="h1">Trading since 1760.</div>
<div class="sub">Sheffield-steel tools built for a lifetime of hard ground, not a single season.</div>
<div class="btn">View Range</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#234600,#bbee77)"></div><div class="title">Stainless Digging Spade</div><div class="price">£42.00</div><div class="newbadge">New</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#bbee77,#234600)"></div><div class="title">Razorsharp Secateurs</div><div class="price">£24.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#234600,#1a3400)"></div><div class="title">Traditional Garden Fork</div><div class="price">£38.00</div></div>
</div>
<div class="footer"><span>Product Ranges</span><span>Support</span><span>Company Info</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7360f2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7360f2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bab2f4; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7360f2; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7360f2; color: #f5f5f5;
border: 1px solid #8878f2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bab2f4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #8979f4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1825; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { position:absolute; inset:0; display:flex; }
.chatlist { width:252px; flex-shrink:0; background:#F4F3F8; border-right:1px solid #E4E2EC;
padding:18px 14px; overflow:hidden; }
.clbrand { font-size:24px; font-weight:800; margin:0 4px 12px; letter-spacing:-0.3px; }
.searchbox { height:32px; background:#FFFFFF; border:1px solid #E4E2EC; border-radius:10px;
display:flex; align-items:center; padding:0 10px; font-size:12px; color:#A8A5B5; margin-bottom:12px; }
.row { display:flex; align-items:center; gap:10px; padding:9px 6px; border-radius:10px; }
.row.on { background:#E9E7F2; }
.ravatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; position:relative;
background:linear-gradient(135deg,#8F7DF7,#7360F2); }
.pdot { position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%;
background:#46C26A; border:2px solid #F4F3F8; }
.rcol { flex:1; min-width:0; }
.rname { font-size:14px; font-weight:700; margin:0; }
.rprev { font-size:12px; color:#7D7A8C; margin:2px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rmeta { text-align:right; flex-shrink:0; }
.rtime { font-size:10px; color:#A8A5B5; display:block; }
.badge { display:inline-block; margin-top:4px; background:#F0506E; color:#fff; font-size:9px; font-weight:700;
border-radius:999px; padding:2px 6px; }
.thread { flex:1; display:flex; flex-direction:column; min-width:0; }
.chathead { height:56px; flex-shrink:0; border-bottom:1px solid #E4E2EC; display:flex; align-items:center;
justify-content:space-between; padding:0 22px; }
.headleft { display:flex; align-items:center; gap:10px; }
.havatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#8F7DF7,#7360F2); }
.hname { font-size:15px; font-weight:700; margin:0; }
.honline { font-size:11px; color:#46C26A; font-weight:600; margin:1px 0 0; }
.headicons { display:flex; gap:20px; font-size:19px; color:#7360F2; }
.banner { margin:14px 22px 0; border-radius:14px; padding:11px 14px; display:flex; align-items:center;
justify-content:space-between; background:linear-gradient(135deg,#7360F2,#59267C); }
.banner .bl { display:flex; align-items:center; gap:10px; }
.banner .bicon { font-size:18px; color:#fff; }
.banner b { display:block; font-size:13px; color:#fff; font-weight:700; }
.banner small { display:block; font-size:11px; color:rgba(255,255,255,0.8); margin-top:1px; }
.callpill { background:rgba(255,255,255,0.22); color:#fff; font-size:12px; font-weight:700;
border-radius:999px; padding:6px 14px; }
.msgs { flex:1; padding:14px 22px; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.brow { display:flex; }
.brow.out { justify-content:flex-end; }
.bubble { max-width:60%; padding:9px 14px; font-size:14px; line-height:1.32; border-radius:16px; }
.bubble.inc { background:#EDEBF5; color:#1A1825; border-bottom-left-radius:5px; }
.bubble.out { background:#7360F2; color:#FFFFFF; border-bottom-right-radius:5px; }
.bfoot { font-size:9px; color:#A8A5B5; margin-top:4px; display:flex; gap:4px; align-items:center; }
.brow.out .bfoot { justify-content:flex-end; }
.seen { color:#8F7DF7; font-weight:700; }
.sentchk { color:#A8A5B5; font-weight:700; }
.stickerwrap { display:flex; flex-direction:column; }
.sticker { width:88px; height:88px; border-radius:14px;
background:radial-gradient(circle at 32% 30%, #FFE29A, #F0506E 70%); }
.quote { border-left:3px solid #59267C; padding-left:8px; margin-bottom:5px; font-size:12px; opacity:0.85; }
.composebar { flex-shrink:0; border-top:1px solid #E4E2EC; padding:10px 18px; display:flex;
align-items:center; gap:10px; }
.plus { font-size:22px; color:#7360F2; }
.field { flex:1; height:36px; background:#F4F3F8; border-radius:18px; display:flex; align-items:center;
padding:0 14px; font-size:13px; color:#A8A5B5; }
.emo { font-size:20px; color:#7D7A8C; }
.send { width:36px; height:36px; border-radius:50%; background:#7360F2; color:#fff; display:flex;
align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
</style></head>
<body>
<div class="shell">
<div class="chatlist">
<p class="clbrand">Viber (iOS)</p>
<div class="searchbox">🔍 Search</div>
<div class="row on">
<div class="ravatar"><span class="pdot"></span></div>
<div class="rcol"><p class="rname">Elena Marchetti</p><p class="rprev">Yes! 1pm at the usual place</p></div>
<div class="rmeta"><span class="rtime">9:41</span></div>
</div>
<div class="row">
<div class="ravatar" style="background:linear-gradient(135deg,#c9b8ff,#59267C);"></div>
<div class="rcol"><p class="rname">Marco T.</p><p class="rprev">Sent a photo</p></div>
<div class="rmeta"><span class="rtime">Mon</span><span class="badge">3</span></div>
</div>
<div class="row">
<div class="ravatar" style="background:linear-gradient(135deg,#ffb3d1,#7360F2);"></div>
<div class="rcol"><p class="rname">Family Group</p><p class="rprev">Dad: call me when free</p></div>
<div class="rmeta"><span class="rtime">Sun</span></div>
</div>
</div>
<div class="thread">
<div class="chathead">
<div class="headleft">
<div class="havatar"></div>
<div><p class="hname">Elena Marchetti</p><p class="honline">online</p></div>
</div>
<div class="headicons"><span>📞</span><span>🎥</span></div>
</div>
<div class="banner">
<div class="bl"><span class="bicon">📞</span><div><b>Free Viber Call</b><small>Talk free, Viber to Viber</small></div></div>
<span class="callpill">Call</span>
</div>
<div class="msgs">
<div class="brow"><div class="bubble inc">Hey! Are we still on for lunch tomorrow?</div></div>
<div class="brow out">
<div class="stickerwrap">
<div class="bubble out">Yes! 1pm at the usual place</div>
<div class="bfoot">9:41 <span class="seen">✓✓</span></div>
</div>
</div>
<div class="brow">
<div class="stickerwrap">
<div class="sticker"></div>
<div class="bfoot">9:42</div>
</div>
</div>
<div class="brow out">
<div class="stickerwrap" style="max-width:60%;">
<div class="bubble out"><div class="quote">Elena: usual place?</div>Table by the window, I already booked it</div>
<div class="bfoot">9:43 <span class="sentchk">✓</span></div>
</div>
</div>
</div>
<div class="composebar">
<span class="plus">+</span>
<div class="field">Type a message</div>
<span class="emo">☺</span>
<div class="send">➤</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #5a5a5a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.4px; background: #c8102e; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.4px; background: #ffffff; color: #0d1f3c;
border: 1px solid #0d1f3c; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a5a5a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #f0e0a8; color: #0d1f3c;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Open Sans',Arial,Helvetica,sans-serif; color:#111111; }
*{box-sizing:border-box;}
.stripe{height:32px;background:#c8102e;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;}
.nav{height:60px;background:#0d1f3c;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.logo{font-family:Oswald,Arial,sans-serif;font-size:20px;font-weight:700;text-transform:uppercase;color:#fff;}
.searchbar{width:320px;height:36px;background:#fff;border-radius:4px;display:flex;align-items:center;padding:0 12px;font-size:13px;color:#999;}
.navicons{color:#fff;font-size:13px;font-weight:600;}
.hero{background:linear-gradient(to right,rgba(13,31,60,0.9) 45%,rgba(13,31,60,0.2)),linear-gradient(135deg,#0d1f3c,#c8102e);min-height:200px;color:#fff;display:flex;align-items:center;padding:0 28px;}
.herotext{width:60%;}
.h1{font-family:Oswald,Arial,sans-serif;font-size:34px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;line-height:1.15;margin:0 0 10px;}
.sub{font-size:15px;margin:0 0 16px;max-width:400px;}
.btn{display:inline-block;background:#c8102e;color:#fff;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;padding:14px 28px;border-radius:4px;}
.grid{display:flex;gap:14px;padding:20px 28px 0;}
.card{width:200px;background:#fff;border:1px solid #eeeeee;border-radius:4px;padding:8px;position:relative;}
.thumb{aspect-ratio:1/1;height:130px;background:#f5f6f8;border-radius:4px;}
.authbadge{position:absolute;bottom:70px;left:16px;background:#f0e0a8;color:#0d1f3c;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;padding:3px 7px;border-radius:4px;border:1px solid #c9a84c;}
.title{font-size:15px;font-weight:600;margin-top:8px;}
.price{font-size:17px;font-weight:700;color:#c8102e;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;border-top:3px solid #c8102e;background:#0d1f3c;color:#e8ecf2;font-size:12px;display:flex;align-items:center;padding:0 28px;gap:20px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="stripe">Free Shipping on Orders Over $199</div>
<div class="nav">
<div class="logo">Sports Memorabilia</div>
<div class="searchbar">Search players, teams, sets...</div>
<div class="navicons">Cart (2)</div>
</div>
<div class="hero">
<div class="herotext">
<div class="h1">Authenticated.<br>Framed. Forever.</div>
<div class="sub">Signed jerseys, hologram-backed cards, and premium cuts — provenance transparency first.</div>
<div class="btn">Shop Authenticated</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0d1f3c,#c8102e)"></div><span class="authbadge">Beckett</span><div class="title">Signed Home Jersey</div><div class="price">$899.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c8102e,#0d1f3c)"></div><span class="authbadge">JSA</span><div class="title">Rookie Card Case</div><div class="price">$249.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#0d1f3c,#c9a84c)"></div><div class="title">Framed 8x10 Print</div><div class="price">$129.00</div></div>
</div>
<div class="footer"><span>Beckett Partner</span><span>JSA Partner</span><span>Authenticity Guarantee</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #820ad1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #820ad1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c18be5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #9b2be0; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #820ad1; color: #ffffff;
border: 1px solid #9b2be0; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #820ad1; color: #f5f5f5;
border: 1px solid #9430d7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c18be5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #860fd3; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F4F2F7; color:#1A1523; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { height:150px; background:linear-gradient(160deg, #820AD1, #9B2BE0 55%, #6A07AD);
padding:22px 40px; display:flex; flex-direction:column; justify-content:space-between; }
.hero-top { display:flex; align-items:center; justify-content:space-between; }
.avatar { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.18);
color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.chrome { display:flex; gap:18px; color:#fff; opacity:0.9; font-size:16px; }
.greet { color:#fff; }
.greet .hi { font-size:14px; font-weight:500; opacity:0.85; display:block; margin-bottom:2px; }
.greet .nm { font-size:24px; font-weight:700; letter-spacing:-0.3px; }
.board { padding:0 40px; margin-top:-30px; display:flex; gap:16px; }
.tile { background:#FFFFFF; border-radius:16px; padding:18px; box-shadow:0 6px 18px -10px rgba(40,12,60,0.22); }
.tile-head { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; margin-bottom:10px; color:#1A1523; }
.tile-head .ic { color:#820AD1; font-size:16px; }
.balance { font-size:28px; font-weight:800; letter-spacing:-0.5px; font-variant-numeric:tabular-nums; }
.sub { font-size:12.5px; font-weight:500; color:#6B6178; margin-top:4px; }
.acct { width:300px; flex-shrink:0; }
.card-tile { flex:1; }
.roxinho { display:flex; align-items:center; gap:10px; margin-bottom:2px; }
.mini-card { width:42px; height:27px; border-radius:5px; background:linear-gradient(120deg,#820AD1,#9B2BE0); }
.invoice-amt { font-size:22px; font-weight:800; letter-spacing:-0.4px; font-variant-numeric:tabular-nums; margin:8px 0 2px; }
.progress { height:6px; border-radius:3px; background:#E6E1EE; margin:10px 0 6px; overflow:hidden; }
.progress .fill { height:100%; width:42%; background:#9B2BE0; border-radius:3px; }
.quick { display:flex; gap:22px; padding:18px 40px 6px; }
.qa { display:flex; flex-direction:column; align-items:center; gap:6px; width:64px; }
.qa .circ { width:52px; height:52px; border-radius:50%; background:#ECE8F2; display:flex;
align-items:center; justify-content:center; font-size:20px; color:#820AD1; }
.qa .cap { font-size:10.5px; font-weight:500; color:#6B6178; text-align:center; }
.activity { padding:8px 40px 0; }
.act-title { font-size:15px; font-weight:700; margin-bottom:6px; }
.arow { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid #E6E1EE; }
.arow .aic { width:36px; height:36px; border-radius:50%; background:#ECE8F2; display:flex;
align-items:center; justify-content:center; font-size:15px; color:#820AD1; flex-shrink:0; }
.arow .info { flex:1; }
.arow .ti { font-size:14px; font-weight:600; }
.arow .me { font-size:11.5px; font-weight:500; color:#6B6178; }
.arow .amt { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.amt.pos { color:#1FB76A; }
</style></head>
<body>
<div class="hero">
<div class="hero-top">
<div class="avatar">S</div>
<div class="chrome">⚙️ 🔔 ❓</div>
</div>
<div class="greet"><span class="hi">Olá,</span><span class="nm">Nubank (iOS)</span></div>
</div>
<div class="board">
<div class="tile acct">
<div class="tile-head"><span class="ic">◎</span> Conta</div>
<div class="balance">R$ 4.812,35</div>
<div class="sub">Saldo disponível</div>
</div>
<div class="tile card-tile">
<div class="roxinho"><span class="mini-card"></span><span class="tile-head" style="margin:0;">Cartão de crédito</span></div>
<div class="invoice-amt">R$ 1.248,90</div>
<div class="sub">Fatura atual · vence 10 jun</div>
<div class="progress"><div class="fill"></div></div>
<div class="sub">Limite disponível R$ 6.751,10</div>
</div>
</div>
<div class="quick">
<div class="qa"><div class="circ">⇄</div><span class="cap">Pix</span></div>
<div class="qa"><div class="circ">🧾</div><span class="cap">Pagar</span></div>
<div class="qa"><div class="circ">💳</div><span class="cap">Cartões</span></div>
<div class="qa"><div class="circ">📈</div><span class="cap">Investir</span></div>
<div class="qa"><div class="circ">💰</div><span class="cap">Empréstimo</span></div>
</div>
<div class="activity">
<div class="act-title">Atividade recente</div>
<div class="arow"><div class="aic">↑</div><div class="info"><div class="ti">Pix enviado — Camila</div><div class="me">Hoje · 14:02</div></div><div class="amt">R$ 120,00</div></div>
<div class="arow"><div class="aic">↓</div><div class="info"><div class="ti">Pix recebido</div><div class="me">Ontem · 09:41</div></div><div class="amt pos">+R$ 2.400,00</div></div>
<div class="arow"><div class="aic">🛒</div><div class="info"><div class="ti">iFood</div><div class="me">Ontem · 20:15</div></div><div class="amt">R$ 58,30</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfcff; color: #141321;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfcff; color: #141321;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #141321; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #86e4e0; color: #141321;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #fcfcff; color: #141321;
border: 1px solid #86e4e0; border-radius: 12px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfcff; color: #1c1b2e;
border: 1px solid #c2c2c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c16452; color: #fcfcff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#1c1b2e; font-family:'Figtree',-apple-system,sans-serif; color:#f4f4f6; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#141321;}
.logo{font-family:'Asul',Georgia,serif;font-size:20px;font-weight:700;color:#86e4e0;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#cecdeb;}
.getbox{background:#86e4e0;color:#141321;font-size:13px;font-weight:700;padding:10px 20px;border-radius:9999px;}
.hero{height:220px;position:relative;display:flex;align-items:center;padding:0 40px;overflow:hidden;background:radial-gradient(circle at 78% 50%,#4d384b 0%,#1c1b2e 60%,#141321 100%);}
.stars-bg{position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 60% 15%,#fff,transparent),radial-gradient(1.5px 1.5px at 85% 45%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 75% 80%,#fff,transparent);opacity:0.5;}
.herotext{position:relative;z-index:2;max-width:420px;}
.kicker{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#ffcb67;margin-bottom:8px;}
.h1{font-family:'Asul',Georgia,serif;font-size:32px;font-weight:700;line-height:1.2;color:#fff;margin:0 0 10px;}
.sub{font-size:14px;color:#9a9db1;line-height:1.5;margin:0 0 16px;max-width:340px;}
.box{position:absolute;right:70px;top:36px;width:150px;height:150px;border-radius:12px;background:linear-gradient(135deg,#86e4e0 0%,#19cfd2 60%,#4d384b 100%);box-shadow:0 8px 30px rgba(25,207,210,0.25);}
.box:before{content:'';position:absolute;left:12px;top:64px;width:126px;height:8px;background:rgba(20,19,33,0.35);}
.badges{display:flex;gap:8px;padding:14px 40px 0;}
.badge{font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:5px 10px;border-radius:8px;}
.badge.new{background:#c16452;color:#fff;}
.badge.excl{background:#ffcb67;color:#141321;}
.badge.spoil{background:#4d384b;color:#fff;}
.grid{display:flex;gap:14px;padding:14px 40px 0;}
.card{width:196px;background:#141321;border-radius:12px;overflow:hidden;}
.thumb{height:96px;position:relative;}
.cbody{padding:11px 13px;}
.ctitle{font-size:14px;font-weight:700;margin:0 0 4px;color:#fff;}
.stars{color:#ffcb67;font-size:11px;margin-bottom:3px;}
.cprice{font-size:14px;font-weight:700;color:#86e4e0;margin:0;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#141321;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;color:#676986;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Owlcrate</div>
<div class="navlinks"><span>The Box</span><span>Add-Ons</span><span>Past Boxes</span></div>
<div class="getbox">Get the Box</div>
</div>
<div class="hero">
<div class="stars-bg"></div>
<div class="box"></div>
<div class="herotext">
<div class="kicker">This Month's Theme: Lost Cities</div>
<div class="h1">A monthly box for readers<br>who miss the fantastical.</div>
<div class="sub">A hand-picked hardcover, exclusive art, and a wax-sealed letter — every month, a little magic in the mail.</div>
</div>
</div>
<div class="badges">
<div class="badge new">New Theme</div>
<div class="badge excl">Exclusive Edition</div>
<div class="badge spoil">Spoiler-Free</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#86e4e0,#4d384b)"></div><div class="cbody"><div class="ctitle">OwlCrate Monthly</div><div class="stars">★★★★★</div><div class="cprice">$39.99/mo</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c16452,#141321)"></div><div class="cbody"><div class="ctitle">OwlCrate Jr.</div><div class="stars">★★★★★</div><div class="cprice">$29.99/mo</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffcb67,#141321)"></div><div class="cbody"><div class="ctitle">Enamel Pin Add-On</div><div class="stars">★★★★☆</div><div class="cprice">$12.99</div></div></div>
</div>
<div class="footer"><span>Ships worldwide · Cancel anytime</span><span>Est. 2016</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.35; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #73bec4; color: #000000;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #f6f6f6; color: #121212;
border: 1px solid #73bec4; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #494949;
border: 1px solid #bdbdbd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fb8077; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6f6f6; color:#121212; box-sizing:border-box;
font-family:'DM Sans', Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; background:#f6f6f6; display:flex; align-items:center; justify-content:center; position:relative; }
.navlinks { position:absolute; left:32px; display:flex; gap:22px; }
.navlinks span { font-size:15px; font-weight:500; color:#777777; }
.brand { font-size:20px; font-weight:600; letter-spacing:-0.3px; }
.navicons { position:absolute; right:32px; display:flex; align-items:center; gap:14px; }
.cartbadge { background:#fb8077; color:#fff; font-size:10px; font-weight:600; border-radius:9999px;
width:20px; height:20px; display:flex; align-items:center; justify-content:center; }
.hero { height:230px; background:#aaccaa; display:flex; align-items:center; justify-content:center;
flex-direction:column; text-align:center; }
.hero h1 { font-size:32px; font-weight:600; letter-spacing:-0.5px; margin:0 0 10px; }
.hero p { font-size:15px; color:#333; margin:0 0 16px; max-width:400px; }
.btn { display:inline-block; background:#73bec4; color:#fff; font-size:16px; font-weight:600; padding:14px 32px;
border-radius:9999px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:16px 32px; }
.card { background:#fff; border-radius:12px; overflow:hidden; }
.cover { height:100px; background:#aaccaa; position:relative; display:flex; align-items:center; justify-content:center; }
.swatch { width:60%; height:60%; border-radius:50%; }
.badge { position:absolute; top:6px; left:6px; font-size:9px; font-weight:600; letter-spacing:0.5px;
text-transform:uppercase; padding:4px 10px; border-radius:9999px; }
.b-sale { background:#fb8077; color:#fff; } .b-new { background:#aaccaa; color:#121212; }
.info { padding:8px 12px 12px; }
.t { font-size:14px; font-weight:500; margin:0 0 3px; }
.p { font-size:14px; color:#494949; }
footer { position:absolute; bottom:0; left:0; right:0; height:52px; background:#f6f6f6; color:#777777;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
</style></head>
<body>
<nav>
<div class="navlinks"><span>Placemats</span><span>Bowls</span><span>Sets</span></div>
<div class="brand">Ezpz</div>
<div class="navicons"><span>Search</span><div class="cartbadge">2</div></div>
</nav>
<div class="hero">
<h1>Feeding, made simple.</h1>
<p>Silicone placemats and bowls designed to stay put — for calmer mealtimes.</p>
<span class="btn">Shop Best Sellers</span>
</div>
<div class="grid">
<div class="card"><div class="cover"><span class="badge b-new">New</span><div class="swatch" style="background:#fff;"></div></div>
<div class="info"><p class="t">Happy Mat — Coral</p><p class="p">$29.95</p></div></div>
<div class="card"><div class="cover"><div class="swatch" style="background:#73bec4;"></div></div>
<div class="info"><p class="t">Mini Mat — Teal</p><p class="p">$24.95</p></div></div>
<div class="card"><div class="cover"><span class="badge b-sale">Sale</span><div class="swatch" style="background:#fb8077;"></div></div>
<div class="info"><p class="t">Happy Bowl Set</p><p class="p">$19.95</p></div></div>
<div class="card"><div class="cover"><div class="swatch" style="background:#e8e8e8;"></div></div>
<div class="info"><p class="t">Toddler Utensils</p><p class="p">$14.95</p></div></div>
</div>
<footer><span>© Ezpz — Feeding essentials</span><span>FAQs · Shipping · Contact</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0064ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0064ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b4fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #202632; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0064ff; color: #202632;
border: 1px solid #202632; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0064ff; color: #f5f5f5;
border: 1px solid #277bfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b4fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #055ade; color: #202632;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212529; box-sizing:border-box;
font-family:-apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
border-bottom:1px solid #e5e8eb; }
.brand { font-size:16px; font-weight:700; }
.brand span { color:#0064ff; }
.hero { padding:36px 34px 24px; text-align:center; }
h1 { font-size:40px; font-weight:700; margin:0 0 12px; line-height:1.25; }
.sub { font-size:15px; color:#4e5968; margin:0 0 20px; }
.pillcta { display:inline-block; background:#fdfdfe; border:1px solid #e5e8eb; border-radius:100px;
padding:18px 32px; font-size:16px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:6px 34px; }
.tile { border:1px solid #d1d6db; border-radius:8px; padding:22px 18px; background:#ffffff; }
.tile .t { font-size:17px; font-weight:700; margin-bottom:6px; }
.tile .d { font-size:13px; color:#6b7684; line-height:1.5; }
.tile .rate { font-size:22px; font-weight:700; color:#0064ff; margin-top:10px; }
.docs { display:flex; gap:16px; padding:24px 34px 0; align-items:center; }
.tab { font-size:16px; padding:9px 14px; color:#212529; border-bottom:2px solid transparent; }
.tab.on { border-color:#212529; font-weight:700; }
.outline { margin-left:auto; border:1px solid #4e5968; color:#4e5968; border-radius:40px; padding:4px 10px; font-size:11px; font-weight:600; }
</style></head>
<body>
<nav>
<div class="brand">Toss Bank <span>Bank</span></div>
<span style="font-size:13px;color:#4e5968">24-hour customer support</span>
</nav>
<section class="hero">
<h1>A bank that keeps<br>changing for you</h1>
<p class="sub">Interest builds from day one. Start in minutes, no branch visit needed.</p>
<span class="pillcta">Open an account</span>
</section>
<div class="grid">
<div class="tile"><div class="t">Everyday savings</div><div class="d">Interest calculated daily, paid every day.</div><div class="rate">2.0%</div></div>
<div class="tile"><div class="t">Foreign exchange</div><div class="d">No fee currency exchange, held in the app.</div><div class="rate">0% fee</div></div>
<div class="tile"><div class="t">Personal loans</div><div class="d">See your rate before you apply, instantly.</div><div class="rate">from 3.9%</div></div>
</div>
<div class="docs">
<span class="tab on">Product disclosure</span>
<span class="tab">Protected products</span>
<span class="outline">Details</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7dc73; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7dc73; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #5c5c5c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #dd0031; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #dd0031;
border: 1px solid #dd0031; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #2a2a2a;
border: 1px solid #beaa5b; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5c5c5c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #dd0031; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7dc73; color:#121212; box-sizing:border-box;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.logo { font-size:20px; font-weight:700; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:24px; font-size:15px; font-weight:500; }
.icons { display:flex; gap:16px; font-size:15px; }
.cart-count { background:#dd0031; color:#fff; font-size:10px; font-weight:700; border-radius:9999px;
width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; margin-left:2px; }
main { display:flex; gap:32px; padding:12px 32px 0; height:436px; }
.shot { width:336px; background:#dedede; border-radius:12px; position:relative; overflow:hidden; }
.shot::before { content:''; position:absolute; inset:0;
background:
radial-gradient(circle at 25% 20%, rgba(255,255,255,0.55), transparent 42%),
radial-gradient(circle at 78% 70%, rgba(221,0,49,0.14), transparent 46%),
linear-gradient(155deg, #fff 0%, #f7dc73 55%, #ffffff 100%); }
.badge-best { position:absolute; top:12px; left:12px; background:#2a8c4a; color:#fff; font-size:11px;
font-weight:700; letter-spacing:0.5px; text-transform:uppercase; border-radius:4px; padding:3px 8px; }
.badge-sale { position:absolute; top:12px; right:12px; background:#dd0031; color:#fff; font-size:11px;
font-weight:700; letter-spacing:0.5px; text-transform:uppercase; border-radius:4px; padding:3px 8px; }
.thumbstrip { display:flex; gap:8px; margin-top:8px; }
.thumbstrip div { flex:1; height:56px; border-radius:8px; background:#dedede; }
.thumbstrip div:nth-child(1) { background:linear-gradient(155deg,#fff,#f7dc73); }
.thumbstrip div:nth-child(2) { background:linear-gradient(155deg,#f7dc73,#dedede); }
.thumbstrip div:nth-child(3) { background:linear-gradient(155deg,#dedede,#fff); }
.info { flex:1; display:flex; flex-direction:column; padding-top:4px; }
.eyebrow { font-size:13px; font-weight:400; color:#5c5c5c; margin-bottom:6px; }
.name { font-size:28px; font-weight:600; letter-spacing:-0.25px; line-height:1.29; margin:0 0 8px; max-width:420px; }
.stars { font-size:14px; color:#121212; margin-bottom:6px; }
.stars span { color:#5c5c5c; font-weight:400; margin-left:6px; font-size:13px; }
.price { font-size:24px; font-weight:700; color:#dd0031; margin-bottom:14px; }
.tags { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.tag { background:#f7dc73; color:#121212; font-size:13px; font-weight:400; border-radius:9999px; padding:4px 12px; }
.field { margin-bottom:14px; }
.field .lbl { font-size:13px; color:#5c5c5c; margin-bottom:8px; }
.sizes { display:flex; gap:8px; }
.size { border:1px solid #dedede; border-radius:8px; padding:10px 16px; font-size:14px; background:#fff; }
.size.active { background:#121212; color:#fff; border-color:#121212; font-weight:600; }
.qty-row { display:flex; align-items:center; gap:14px; margin-top:auto; }
.qty { display:flex; align-items:center; border:1px solid #dedede; border-radius:8px; height:40px; background:#fff; }
.qty span { width:32px; text-align:center; color:#dd0031; font-weight:700; }
.qty b { padding:0 14px; font-weight:400; font-size:15px; }
.btn-add { flex:1; background:#dd0031; color:#fff; border:none; border-radius:8px; height:48px;
font-size:16px; font-weight:600; }
.btn-fav { width:48px; height:48px; border-radius:8px; border:2px solid #dd0031; color:#dd0031;
display:flex; align-items:center; justify-content:center; background:#fff; }
.trust { display:flex; gap:8px; margin-top:12px; }
.trust span { background:#dedede; color:#5c5c5c; font-size:12px; border-radius:8px; padding:8px 12px; }
footer { background:#f7dc73; padding:16px 32px; display:flex; justify-content:space-between;
align-items:center; font-size:13px; color:#121212; }
footer .fl { display:flex; gap:20px; text-decoration:underline; }
</style></head>
<body>
<nav>
<div class="logo">California Baby</div>
<div class="navlinks"><span>Shop by Concern</span><span>Bath & Body</span><span>Sun Care</span><span>Gift Sets</span></div>
<div class="icons">⌕ ♡ ⬭<span class="cart-count">3</span></div>
</nav>
<main>
<div class="shot">
<span class="badge-best">Bestseller</span>
<span class="badge-sale">Sale</span>
<div class="thumbstrip"><div></div><div></div><div></div></div>
</div>
<div class="info">
<div class="eyebrow">Calming Collection</div>
<h1 class="name">Chamomile & Calendula Bubble Bath</h1>
<div class="stars">★★★★★ <span>4.9 (1,204 reviews)</span></div>
<div class="price">$16.00</div>
<div class="tags">
<span class="tag">Chamomile</span>
<span class="tag">Calendula</span>
<span class="tag">Aloe Vera</span>
<span class="tag">Tear-Free</span>
</div>
<div class="field">
<div class="lbl">Size</div>
<div class="sizes">
<span class="size">6.5 oz</span>
<span class="size active">13 oz</span>
<span class="size">22 oz</span>
</div>
</div>
<div class="qty-row">
<div class="qty"><span>–</span><b>1</b><span>+</span></div>
<button class="btn-add">Add to Cart</button>
<div class="btn-fav">♡</div>
</div>
<div class="trust">
<span>Free shipping $65+</span>
<span>Cruelty-Free</span>
<span>EWG Verified</span>
</div>
</div>
</main>
<footer>
<span>© California Baby</span>
<div class="fl"><span>Ingredients</span><span>Shipping</span><span>Our Story</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #227cff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #227cff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #96bffa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #94fb4d; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #227cff; color: #94fb4d;
border: 1px solid #94fb4d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #227cff; color: #f5f5f5;
border: 1px solid #448ffd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #96bffa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3490e3; color: #94fb4d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#090909; color:#f0f0f0; box-sizing:border-box;
font-family:"Euclid Circular B", Arial, sans-serif; font-weight:300; }
* { box-sizing:border-box; }
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:300; color:#f0f0f0; }
.navlinks { display:flex; gap:22px; font-size:14px; }
.navlinks span.on { color:#227cff; }
.btn-blue { background:#227cff; color:#2b2b2b; border-radius:30px; height:36px; padding:0 20px; font-size:14px;
display:flex; align-items:center; }
.btn-lime { background:#94fb4d; color:#2b2b2b; border-radius:30px; height:36px; padding:0 20px; font-size:14px;
display:flex; align-items:center; }
.hero { text-align:center; padding:26px 40px; }
.hero .eyebrow { font-size:20px; color:#227cff; margin:0 0 6px; }
.hero h1 { font-size:52px; font-weight:300; letter-spacing:-1.5px; margin:0 0 14px; }
.hero-btns { display:flex; justify-content:center; gap:10px; }
.light { background:#f0f0f0; color:#090909; padding:22px 40px; }
.light .sec-eyebrow { text-align:center; font-size:24px; color:#227cff; margin:0 0 14px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#1c1c1c; color:#f0f0f0; border:1px solid #090909; border-radius:8px; padding:12.8px; }
.card h3 { font-size:16px; font-weight:300; margin:0 0 6px; }
.card p { font-size:13px; color:#909090; margin:0; line-height:1.4; }
footer { position:absolute; bottom:0; left:0; right:0; background:#090909; padding:10px 40px;
display:flex; justify-content:space-between; font-size:12px; color:#6c6c6c; }
</style></head>
<body>
<nav>
<div class="brand">Supertone</div>
<div class="navlinks"><span class="on">Products</span><span>Developers</span><span>Business</span><span>Company</span></div>
<div class="btn-lime">Get Started</div>
</nav>
<div class="hero">
<p class="eyebrow">The Voice Intelligence Platform</p>
<h1>Play</h1>
<div class="hero-btns">
<div class="btn-blue">Learn More</div>
</div>
</div>
<div class="light">
<p class="sec-eyebrow">Solutions</p>
<div class="cards">
<div class="card"><h3>Text-to-speech</h3><p>Natural, controllable voices for every language and platform.</p></div>
<div class="card"><h3>Voice conversion</h3><p>Transform any voice while preserving performance and timing.</p></div>
<div class="card"><h3>Voice design</h3><p>Control pitch, tone, and style with independent parameters.</p></div>
</div>
</div>
<footer><span>© Supertone</span><span>Supertone · Research · Careers · Responsible AI</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #142435;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #142435;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #142435; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: #205b65; color: #ffffff;
border: none; border-radius: 9999px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f9fafb; color: #205b65;
border: 1px solid #205b65; border-radius: 9999px;
padding: 14px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9fafb; color: #3f4a56;
border: 1px solid #c0c4ca; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #205b65; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Ergatta — Home</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f9fafb; color:#3f4a56;
font-family:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;}
.page{width:960px;height:640px;position:relative;display:flex;flex-direction:column;}
.hero{height:340px;position:relative;background:linear-gradient(150deg,#205b65,#163e46);overflow:hidden;}
.hero .ripple{position:absolute;inset:0;background:
radial-gradient(circle at 20% 80%, rgba(168,156,200,0.35), transparent 55%),
radial-gradient(circle at 85% 20%, rgba(254,102,63,0.25), transparent 50%);}
nav{position:absolute;top:16px;left:24px;right:24px;height:44px;border-radius:999px;background:rgba(255,255,255,0.12);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:3;}
.logo{font-family:'Pressura Light','Nunito Sans',sans-serif;font-weight:300;font-size:19px;color:#fff;letter-spacing:0.5px;}
.navlinks{display:flex;gap:20px;}
.navlinks span{font-size:12px;font-weight:700;color:#eef7f6;}
.nav-cta{background:#fbcd0a;color:#142435;padding:8px 18px;border-radius:999px;font-size:12px;font-weight:700;}
.hero-copy{position:absolute;left:40px;bottom:44px;z-index:3;max-width:420px;}
.hero-copy .kicker{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fbcd0a;margin-bottom:8px;}
.hero-copy h1{font-family:'Pressura Light','Nunito Sans',sans-serif;font-weight:300;font-size:44px;color:#fff;line-height:1.05;margin:0 0 12px;letter-spacing:-0.5px;}
.hero-cta{display:inline-block;background:#fe663f;color:#fff;padding:12px 26px;border-radius:999px;font-size:13px;font-weight:700;}
.badge-float{position:absolute;right:60px;bottom:60px;z-index:3;background:rgba(20,36,53,0.55);border-radius:999px;padding:8px 16px;display:flex;gap:10px;align-items:center;}
.badge-float b{color:#fbcd0a;font-size:18px;}
.badge-float span{color:#cfe7e7;font-size:10px;text-transform:uppercase;letter-spacing:0.5px;}
main{flex:1;padding:20px 40px 0;}
.row-head{display:flex;justify-content:space-between;margin-bottom:12px;}
.row-head h2{font-family:'Nunito Sans',sans-serif;font-weight:700;font-size:17px;margin:0;color:#142435;}
.row-head span{font-size:11px;color:#205b65;font-weight:700;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.card{background:#ffffff;border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(20,36,53,0.06);}
.thumb{height:84px;background:linear-gradient(150deg,#c1e6e6,#edf5f5);position:relative;}
.thumb::after{content:'';position:absolute;left:30%;right:30%;top:30%;bottom:30%;border-radius:50%;background:rgba(32,91,101,0.15);}
.card .info{padding:12px 14px;}
.card h4{font-size:13px;margin:0 0 4px;color:#142435;font-weight:700;}
.card .desc{font-size:10.5px;color:#7b7b7b;margin-bottom:8px;}
.pill-badge{display:inline-block;background:#edf5f5;color:#205b65;font-size:9px;font-weight:700;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:6px;}
.card .price{font-size:14px;font-weight:700;color:#205b65;}
footer{background:#142435;color:#9aa6b4;padding:16px 40px;display:flex;justify-content:space-between;align-items:center;margin-top:16px;}
footer span{font-size:10px;}
</style>
<div class="page">
<div class="hero">
<div class="ripple"></div>
<nav>
<div class="logo">Ergatta</div>
<div class="navlinks"><span>Rower</span><span>Membership</span><span>Games</span><span>Community</span></div>
<div class="nav-cta">Join a Race</div>
</nav>
<div class="hero-copy">
<div class="kicker">Game-Based Rowing</div>
<h1>Row like it's a race, not a routine.</h1>
<div class="hero-cta">Start Workout</div>
</div>
<div class="badge-float"><b>21:04</b><span>Personal Best</span></div>
</div>
<main>
<div class="row-head"><h2>Your Next Session</h2><span>Explore Games →</span></div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="info"><span class="pill-badge">Sprint Race</span><h4>Tempo Rush — 20min</h4><div class="desc">Race the field, medal by pace</div><div class="price">Included in Membership</div></div></div>
<div class="card"><div class="thumb"></div><div class="info"><span class="pill-badge">Endurance</span><h4>Open Water — 40min</h4><div class="desc">Steady state, scenic route</div><div class="price">Included in Membership</div></div></div>
<div class="card"><div class="thumb"></div><div class="info"><span class="pill-badge">Ergatta Rower</span><h4>The Rower, Charcoal</h4><div class="desc">Water resistance, game screen</div><div class="price">$2,299</div></div></div>
</div>
</main>
<footer>
<span>© Ergatta — Play your way to fitness</span>
<span>Membership · Games Library · Support</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #006fff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #006fff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b9fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0066cc; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #006fff; color: #000000;
border: 1px solid #0066cc; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #006fff; color: #f5f5f5;
border: 1px solid #2784fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b9fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #006ef7; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#3d4046; box-sizing:border-box;
font-family:"Spoqa Han Sans Neo", "Malgun Gothic", "Segoe UI", Helvetica, Arial, sans-serif; font-weight:700; }
* { box-sizing:border-box; }
.hero { background:#0b1335; height:190px; padding:18px 30px; }
.hero nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.brand { color:#ffffff; font-size:17px; margin:0; }
.navlinks { display:flex; gap:18px; }
.navlinks span { color:#b2c0cb; font-size:14px; }
.cta { background:#006fff; color:#ffffff; border:none; border-radius:20px; height:40px; padding:0 18px; font-size:14px;
box-shadow:rgba(0,104,255,0.4) 2px 2px 8px 0px; }
.hero h1 { color:#ffffff; font-size:28px; line-height:1.3; margin:0 0 12px; max-width:600px; }
.liftbtn { background:#006fff; color:#ffffff; border:none; border-radius:24px; height:44px; padding:0 20px; font-size:15px;
box-shadow:rgba(0,104,255,0.4) 0px 4px 16px -4px; }
.body { padding:20px 30px; height:430px; }
.eyebrow { color:#7e8696; font-size:14px; margin:0 0 6px; }
.body h2 { font-size:20px; margin:0 0 16px; color:#000000; }
.funnel { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.fnode { flex:1; text-align:center; background:#f4f9ff; border:1px solid rgba(0,0,0,0.05); border-radius:20px; padding:16px 10px; }
.fnode .n { font-size:20px; color:#006fff; margin:0; }
.fnode .l { font-size:12px; color:#7e8696; margin:4px 0 0; font-weight:400; }
.arrow { color:#b2c0cb; font-size:18px; font-weight:400; }
.cardrow { display:flex; gap:16px; }
.card { flex:1; border-radius:20px; padding:20px; border:1px solid #e8eaee; box-shadow:rgba(0,0,0,0.04) 0px 5px 51px 0px; background:#ffffff; }
.card h3 { font-size:16px; margin:0 0 6px; }
.card p { font-size:13px; color:#53585f; margin:0; font-weight:400; }
.card.mint { background:#dbf4eb; border:1px solid #7edbb9; box-shadow:none; }
.card.accent { background:#e1f1ff; border:none; box-shadow:none; }
</style></head>
<body>
<div class="hero">
<nav>
<p class="brand">Bigin</p>
<div class="navlinks"><span>Campaigns</span><span>Automation</span><span>Integrations</span><span>Pricing</span></div>
<button class="cta">Talk to Sales</button>
</nav>
<h1>From customer acquisition to loyalty,<br>a marketing automation pipeline</h1>
<button class="liftbtn">Talk to Sales</button>
</div>
<div class="body">
<p class="eyebrow">Funnel Overview</p>
<h2>This Month's Campaign Journey</h2>
<div class="funnel">
<div class="fnode"><p class="n">18,204</p><p class="l">Visits</p></div>
<span class="arrow">→</span>
<div class="fnode"><p class="n">6,512</p><p class="l">Sign-ups</p></div>
<span class="arrow">→</span>
<div class="fnode"><p class="n">2,048</p><p class="l">Conversions</p></div>
<span class="arrow">→</span>
<div class="fnode"><p class="n">1,120</p><p class="l">Loyal Customers</p></div>
</div>
<div class="cardrow">
<div class="card"><h3>Automation Scenario</h3><p>Condition-based email/SMS automation drives repeat purchases.</p></div>
<div class="card accent"><h3>New Segment</h3><p>Automatically classified customers recently at risk of churn.</p></div>
<div class="card mint"><h3>Integration Complete</h3><p>Storefront order data is syncing in real time.</p></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafaef; color: #15271a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafaef; color: #15271a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #15271a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #134431; color: #ccff00;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.3px; background: transparent; color: #134431;
border: 1px solid #134431; border-radius: 12px;
padding: 13px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #15271a;
border: 1px solid #dedede; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 1.2px; background: #ff5400; color: #fafaef;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafaef; font-family:'Assistant', -apple-system, sans-serif; color:#121212; }
*{box-sizing:border-box;}
.announce{height:36px;background:#ccff00;color:#134431;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;}
.nav{height:64px;background:#134431;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.logo{color:#ccff00;font-size:20px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:500;color:#fafaef;}
.hero{height:280px;background:#134431;display:flex;align-items:center;padding:0 40px;}
.herotext{max-width:460px;}
.herotext h1{color:#fafaef;font-size:40px;font-weight:700;line-height:1.1;letter-spacing:-0.5px;margin:0 0 14px;}
.herotext p{color:#c9d8cd;font-size:18px;margin:0 0 22px;}
.btn{display:inline-block;background:#ccff00;color:#134431;font-size:16px;font-weight:600;padding:14px 28px;border-radius:12px;}
.pot{margin-left:auto;width:200px;height:180px;border-radius:12px;background:linear-gradient(160deg,#e7ecd6,#eef4db);position:relative;}
.pot:before{content:'';position:absolute;left:60px;bottom:20px;width:80px;height:60px;background:#9b907d;border-radius:0 0 12px 12px;}
.pot:after{content:'';position:absolute;left:50px;bottom:75px;width:100px;height:60px;background:#655c4e;border-radius:50% 50% 0 0;}
.pills{display:flex;gap:10px;padding:16px 40px;}
.pill{background:#f1ece8;color:#15271a;font-size:13px;padding:8px 18px;border-radius:9999px;}
.pill.active{background:#134431;color:#ccff00;}
.grid{display:flex;gap:16px;padding:0 40px;}
.card{flex:1;background:#fff;border-radius:12px;padding:10px;position:relative;}
.badge{position:absolute;top:16px;left:16px;background:#ff5400;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:4px 8px;border-radius:4px;}
.thumb{height:100px;border-radius:8px;margin-bottom:8px;}
.pname{font-size:16px;font-weight:600;}
.pprice{font-size:16px;font-weight:600;color:#134431;margin-top:2px;}
</style>
<div class="announce">Free shipping on orders over $50 — new plants dropping weekly</div>
<div class="nav">
<div class="logo">Rooted</div>
<div class="navlinks"><div>Plants</div><div>Pots</div><div>Subscriptions</div><div>Care Guide</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>New growth, delivered weekly.</h1>
<p>A nursery counter transplanted into your browser — soil-stained and sun-lit.</p>
<div class="btn">Shop Plants</div>
</div>
<div class="pot"></div>
</div>
<div class="pills">
<div class="pill active">All Plants</div><div class="pill">Low Light</div><div class="pill">Pet Safe</div><div class="pill">Beginner</div>
</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:#e7ecd6"></div><div class="pname">Monstera Deliciosa</div><div class="pprice">$45.00</div></div>
<div class="card"><div class="thumb" style="background:#eef4db"></div><div class="pname">Snake Plant Laurentii</div><div class="pprice">$29.00</div></div>
<div class="card"><div class="thumb" style="background:#f1ece8"></div><div class="pname">Fiddle Leaf Fig</div><div class="pprice">$65.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1f2228; color:#ffffff; box-sizing:border-box;
font-family:"universalSans", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid rgba(255,255,255,0.1); }
.brand { font-family:"GeistMono", ui-monospace, monospace; font-size:14px; text-transform:uppercase; letter-spacing:1.4px; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; color:#ffffff; }
.navlinks span:nth-child(2) { color:rgba(255,255,255,0.5); }
.btn-primary { background:#ffffff; color:#1f2228; border:none; border-radius:0; padding:8px 18px;
font-family:"GeistMono",monospace; font-size:12px; letter-spacing:1.4px; text-transform:uppercase; }
.hero { padding:34px 32px 10px; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.hero .kicker { font-family:"GeistMono",monospace; font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:rgba(255,255,255,0.5); }
.hero h1 { font-family:"GeistMono", ui-monospace, monospace; font-size:64px; font-weight:300; line-height:1.05; margin:0; letter-spacing:-1px; }
.hero p { font-size:16px; color:rgba(255,255,255,0.7); margin:0; max-width:520px; line-height:1.5; }
.row { display:flex; gap:12px; margin-top:6px; }
.btn-ghost { background:transparent; color:#ffffff; border:1px solid rgba(255,255,255,0.2); padding:12px 24px;
font-family:"GeistMono",monospace; font-size:12px; letter-spacing:1.4px; text-transform:uppercase; }
.btn-primary-lg { background:#ffffff; color:#1f2228; border:none; padding:12px 24px;
font-family:"GeistMono",monospace; font-size:12px; letter-spacing:1.4px; text-transform:uppercase; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,0.1);
margin:22px 32px 0; border:1px solid rgba(255,255,255,0.1); }
.card { background:#1f2228; padding:20px; display:flex; flex-direction:column; gap:8px; }
.card .tag { font-family:"GeistMono",monospace; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.5); border:1px solid rgba(255,255,255,0.2); padding:3px 8px; align-self:flex-start; }
.card h3 { margin:0; font-size:17px; font-weight:400; }
.card p { margin:0; font-size:13px; color:rgba(255,255,255,0.7); line-height:1.5; }
.metrics { display:flex; gap:0; margin:20px 32px 0; border:1px solid rgba(255,255,255,0.1); }
.metric { flex:1; padding:16px 20px; border-right:1px solid rgba(255,255,255,0.1); }
.metric:last-child { border-right:none; }
.metric .num { font-family:"GeistMono",monospace; font-size:26px; font-weight:300; }
.metric .lbl { font-size:11px; color:rgba(255,255,255,0.5); margin-top:4px; }
footer { position:absolute; bottom:0; left:0; right:0; padding:14px 32px; border-top:1px solid rgba(255,255,255,0.1);
display:flex; justify-content:space-between; font-size:12px; color:rgba(255,255,255,0.5); }
</style></head>
<body>
<nav>
<p class="brand">xAI</p>
<div class="navlinks"><span>Models</span><span>API</span><span>Research</span><span>Company</span></div>
<button class="btn-primary">Try Now</button>
</nav>
<section class="hero">
<span class="kicker">Frontier Intelligence</span>
<h1>Understand<br>the Universe.</h1>
<p>A research lab building models that reason from first principles — for developers, researchers, and everyone curious enough to ask.</p>
<div class="row">
<button class="btn-primary-lg">Use Now</button>
<button class="btn-ghost">View Docs</button>
</div>
</section>
<div class="cards">
<div class="card"><span class="tag">Model</span><h3>Reasoning at scale</h3><p>Trained on one of the largest GPU clusters ever assembled.</p></div>
<div class="card"><span class="tag">API</span><h3>Build with the frontier</h3><p>Ship production reasoning in a single request.</p></div>
<div class="card"><span class="tag">Research</span><h3>First-principles science</h3><p>Papers and benchmarks published as the work happens.</p></div>
</div>
<div class="metrics">
<div class="metric"><div class="num">100K+</div><div class="lbl">GPUS IN CLUSTER</div></div>
<div class="metric"><div class="num">128K</div><div class="lbl">CONTEXT WINDOW</div></div>
<div class="metric"><div class="num">04</div><div class="lbl">MAJOR RELEASES</div></div>
</div>
<footer>
<span>© xAI</span>
<span>Models · API · Research · Careers</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 400; line-height: 1.3; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 0.04em; background: #003399; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 0.04em; background: #ffffff; color: #000000;
border: 1px solid #003399; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.45; letter-spacing: 0.08em; background: #da532c; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:Georgia,'Times New Roman',serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dddddd;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;}
.logo{font-size:16px;font-weight:400;letter-spacing:2px;text-transform:uppercase;color:#000000;}
.navlinks{display:flex;gap:26px;font-size:12px;font-weight:400;letter-spacing:0.5px;text-transform:uppercase;color:#1a1a1a;}
.navlinks .a{color:#003399;}
.hero{height:280px;display:flex;}
.heroimg{width:520px;background:linear-gradient(150deg,#e9e9e9 0%,#c9c9c9 40%,#f7eea6 70%,#ffbbbb 100%);position:relative;}
.frame{position:absolute;left:60px;top:40px;width:220px;height:180px;border:2px solid #000000;background:#ffffff;}
.heroText{width:440px;padding:44px 40px;display:flex;flex-direction:column;justify-content:center;}
.label{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#da532c;margin-bottom:14px;}
.h1{font-size:32px;font-weight:300;line-height:1.15;margin:0 0 14px;color:#000000;}
.sub{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;color:#1a1a1a;line-height:1.6;margin:0 0 22px;width:360px;}
.cta{display:inline-flex;align-items:center;justify-content:center;width:180px;height:44px;background:#003399;color:#ffffff;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:13px;font-weight:400;letter-spacing:1px;}
.sec{padding:28px 40px 0;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;}
.secTitle{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#666666;margin-bottom:16px;border-bottom:1px solid #dddddd;padding-bottom:10px;}
.grid{display:flex;gap:0;}
.card{width:220px;padding:0 20px 0 0;border-right:1px solid #eeeeee;margin-right:20px;}
.thumb{height:130px;margin-bottom:12px;}
.artist{font-family:Georgia,serif;font-size:15px;font-weight:400;color:#000000;margin:0 0 2px;}
.medium{font-size:11px;letter-spacing:0.5px;text-transform:uppercase;color:#666666;}
</style>
<div class="nav">
<div class="logo">White Cube</div>
<div class="navlinks"><span>Exhibitions</span><span>Artists</span><span class="a">Editions</span><span>Info</span></div>
</div>
<div class="hero">
<div class="heroimg"><div class="frame"></div></div>
<div class="heroText">
<div class="label">Now Showing</div>
<div class="h1">Surface and Distance</div>
<div class="sub">A group presentation of new works across painting, sculpture, and photography.</div>
<div class="cta">View Exhibition</div>
</div>
</div>
<div class="sec">
<div class="secTitle">Editions</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003399,#fafafa);"></div><div class="artist">Study No. 4</div><div class="medium">Screenprint, 2024</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#da532c,#fafafa);"></div><div class="artist">Interior Plane</div><div class="medium">Archival Print, 2023</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f7eea6,#c9c9c9);"></div><div class="artist">Field Notes III</div><div class="medium">Lithograph, 2024</div></div>
<div class="card" style="border-right:none;"><div class="thumb" style="background:linear-gradient(135deg,#ffbbbb,#fafafa);"></div><div class="artist">Untitled (Blue)</div><div class="medium">Etching, 2022</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6B6B6B; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #FF6B00; color: #FFFFFF;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #FF6B00; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B6B6B; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.33; letter-spacing: 0.5px; background: #FF6B00; color: #FFFFFF;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Framework Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Inter',-apple-system,system-ui,'Segoe UI',Roboto,'Helvetica Neue',sans-serif; background:#ffffff; color:#1A1A1A; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
.nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; border-bottom:1px solid #E0E0E0; }
.logo { font-weight:600; font-size:19px; letter-spacing:-.3px; }
.navlinks { display:flex; gap:30px; font-size:13px; font-weight:500; color:#3D3D3D; }
.navcta { background:#FF6B00; color:#fff; font-weight:600; font-size:13px; padding:9px 18px; border-radius:4px; }
.hero { display:flex; padding:40px; gap:40px; align-items:center; }
.hero-copy { flex:1; }
.hero h1 { font-size:38px; font-weight:600; letter-spacing:-.5px; line-height:1.18; margin:0 0 14px; }
.hero p { font-size:14.5px; color:#3D3D3D; line-height:1.6; max-width:400px; margin:0 0 20px; }
.btn-primary { background:#FF6B00; color:#fff; font-weight:600; font-size:14px; padding:11px 22px; border-radius:4px; display:inline-block; }
.hero-visual { flex:1; height:220px; background:#F5F5F5; border-radius:4px; display:flex; align-items:center; justify-content:center; }
.laptop { width:200px; height:130px; position:relative; }
.laptop .lid { width:200px; height:120px; background:#1A1A1A; border-radius:4px; }
.laptop .module { position:absolute; bottom:14px; left:14px; width:36px; height:20px; background:#FF6B00; border-radius:2px; }
.laptop .module2 { position:absolute; bottom:14px; right:14px; width:36px; height:20px; background:#3D3D3D; border-radius:2px; }
.section { padding:24px 40px; flex:1; }
.section h2 { font-size:19px; font-weight:600; margin:0 0 16px; }
.configrow { display:flex; gap:16px; }
.config-list { flex:1.1; display:flex; flex-direction:column; gap:10px; }
.configopt { border:1px solid #E0E0E0; border-radius:4px; padding:12px 14px; display:flex; justify-content:space-between; align-items:center; font-size:13px; }
.configopt.selected { border-color:#FF6B00; }
.radio { width:14px; height:14px; border-radius:50%; border:2px solid #E0E0E0; }
.radio.on { border-color:#FF6B00; background:radial-gradient(circle,#FF6B00 40%,transparent 42%); }
.specs { flex:1; background:#F5F5F5; border-radius:4px; padding:16px; font-size:12px; color:#3D3D3D; }
.specs .row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #E0E0E0; }
.specs .row b { color:#1A1A1A; }
</style>
<div class="page">
<div class="nav">
<div class="logo">Framework</div>
<div class="navlinks"><span>Laptops</span><span>Expansion Cards</span><span>Marketplace</span><span>Support</span></div>
<div class="navcta">Build Yours</div>
</div>
<div class="hero">
<div class="hero-copy">
<h1>Snap a module in.<br>Own it forever.</h1>
<p>Exposed structure, no decorative veneer — every element earns its pixel footprint, just like the aluminum chassis.</p>
<div class="btn-primary">Configure Laptop</div>
</div>
<div class="hero-visual"><div class="laptop"><div class="lid"></div><div class="module"></div><div class="module2"></div></div></div>
</div>
<div class="section">
<h2>Configure Your Framework 13</h2>
<div class="configrow">
<div class="config-list">
<div class="configopt selected"><span>Intel Core Ultra 7 258V</span><div class="radio on"></div></div>
<div class="configopt"><span>32GB LPDDR5x Memory</span><div class="radio"></div></div>
<div class="configopt"><span>1TB WD Black SN7100</span><div class="radio"></div></div>
<div class="configopt"><span>4x Expansion Card Bays</span><div class="radio"></div></div>
</div>
<div class="specs">
<div class="row"><span>Display</span><b>13.5in 2.8K</b></div>
<div class="row"><span>Weight</span><b>1.3kg</b></div>
<div class="row"><span>Battery</span><b>61Wh</b></div>
<div class="row"><span>Price</span><b>$1,399.00</b></div>
</div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fc6b2d; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fc6b2d; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7b3a1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #363a44; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fc6b2d; color: #363a44;
border: 1px solid #363a44; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fc6b2d; color: #111111;
border: 1px solid #d65d29; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b3a1e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dc6331; color: #363a44;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111827; box-sizing:border-box;
font-family:"Pretendard Variable", -apple-system, "Malgun Gothic", sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-weight:700; font-size:17px; }
.navlinks { display:flex; gap:6px; }
.navlinks span { font-size:14px; color:#111827; padding:8px 12px; border-radius:64px; }
.navlinks span:first-child { color:#fc6b2d; }
.navr { display:flex; gap:10px; }
.btn-charcoal { background:#363a44; color:#fff; border:none; border-radius:9999px; padding:9px 16px; font-size:13px; font-weight:400; }
.btn-orange { background:#fc6b2d; color:#fff; border:none; border-radius:9999px; padding:9px 16px; font-size:13px; font-weight:700; }
.hero { padding:34px 40px 20px; text-align:center; }
.eyebrow { color:#fc6b2d; font-weight:800; font-size:16px; margin-bottom:8px; }
.hero h1 { font-size:42px; font-weight:400; margin:0 0 20px; color:#111827; }
.section { background:#f9fafb; margin:0 40px; border-radius:30px; padding:22px 26px; }
.section h2 { font-size:22px; font-weight:1000; margin:0 0 14px; }
.cards { display:flex; gap:14px; }
.c { flex:1; background:#fff; border:1px solid #d1d5db; border-radius:20px; padding:18px; }
.c h4 { font-size:14px; margin:0 0 6px; }
.c p { font-size:12px; color:#6b7280; margin:0; }
.badge-succ { display:inline-block; background:#dcfce7; color:#374151; border-radius:8px; font-size:11px; font-weight:500; padding:3px 9px; margin-bottom:8px; }
</style></head>
<body>
<nav>
<div class="brand">PortOne</div>
<div class="navlinks"><span>One Payment Infra</span><span>Solutions</span><span>Pricing</span><span>Help Center</span></div>
<div class="navr"><button class="btn-charcoal">Get started</button><button class="btn-orange">Talk to sales</button></div>
</nav>
<div class="hero">
<div class="eyebrow">One Payment Infra</div>
<h1>Run payments and finance freely with AI</h1>
</div>
<div class="section">
<h2>From payment integration to global finance operations</h2>
<div class="cards">
<div class="c"><span class="badge-succ">Settled</span><h4>Domestic Payments</h4><p>Connect 25 payment gateways through a single API.</p></div>
<div class="c"><span class="badge-succ">Automated</span><h4>Partner Settlements</h4><p>Automate payouts to hundreds of partners.</p></div>
<div class="c"><span class="badge-succ">Global</span><h4>Cross-Border Payments</h4><p>Support 100+ payment methods across 8 countries.</p></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1b9efb; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1b9efb; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #20d5c4; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1b9efb; color: #000000;
border: 1px solid #20d5c4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1b9efb; color: #f5f5f5;
border: 1px solid #3eacfa; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1ca7f2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0B0E11; color:#EAEEF2; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-variant-numeric:tabular-nums; }
* { box-sizing:border-box; font-variant-numeric:tabular-nums; }
body { position:relative; }
.col { position:absolute; top:18px; bottom:18px; }
.rail-title { font-size:13px; font-weight:700; color:#EAEEF2; margin-bottom:8px; letter-spacing:-0.1px; }
/* ---- brand strip ---- */
.brand { position:absolute; top:18px; left:222px; display:flex; align-items:center; gap:8px; }
.brand .mark { width:16px; height:16px; border-radius:4px; background:linear-gradient(135deg,#1B9EFB,#20D5C4); }
.brand b { font-size:13px; font-weight:800; letter-spacing:0.2px; }
/* ---- left: watchlist ---- */
.watchlist { left:16px; width:190px; }
.wrow { height:52px; border-bottom:0.5px solid #232931; display:flex; align-items:center; justify-content:space-between; }
.wrow .sym { font-size:13px; font-weight:600; }
.wrow .name { font-size:10px; color:#8B95A1; }
.spark { width:44px; height:20px; }
.wrow .price { font-size:13px; font-weight:700; text-align:right; }
.chip { font-size:10px; font-weight:800; padding:1px 5px; border-radius:4px; text-align:center; margin-top:2px; }
.up-c { color:#00C076; } .down-c { color:#FA5252; }
.chip.up { background:#00C076; color:#03150D; } .chip.down { background:#FA5252; color:#1B0606; }
/* ---- center: quote + chart ---- */
.quote { left:222px; width:480px; }
.qhead { display:flex; align-items:flex-start; justify-content:space-between; margin:26px 0 10px; }
.qhead .sym { font-size:20px; font-weight:800; }
.qhead .exch { font-size:12px; color:#8B95A1; margin-top:2px; }
.paper { background:#20D5C4; color:#04121C; font-size:10px; font-weight:800; padding:3px 8px; border-radius:4px; }
.lastpx { font-size:32px; font-weight:800; letter-spacing:-0.6px; color:#00C076; }
.delta { font-size:14px; font-weight:700; color:#00C076; margin-top:2px; }
.chartbox { position:relative; width:470px; height:170px; margin-top:14px; border-radius:4px; overflow:hidden; }
.gridline { position:absolute; left:0; right:0; height:1px; background:#1A1F26; }
.prevclose { position:absolute; left:0; right:0; height:0; border-top:1px dashed #1B9EFB; }
.body { position:absolute; width:8px; border-radius:1px; }
.wick { position:absolute; width:2px; border-radius:1px; }
.up { background:#00C076; } .down { background:#FA5252; }
.tf-row { display:flex; gap:6px; margin-top:10px; }
.tf { font-size:11px; font-weight:700; color:#8B95A1; padding:5px 10px; border-radius:4px; }
.tf.on { color:#1B9EFB; background:rgba(27,158,251,0.16); }
.ind-row { display:flex; gap:6px; margin-top:12px; }
.ind { font-size:11px; font-weight:600; color:#8B95A1; background:#1C2127; border:1px solid #232931; padding:5px 9px; border-radius:6px; }
.ind.on { color:#1B9EFB; background:rgba(27,158,251,0.16); border-color:transparent; }
.buysell { display:flex; gap:10px; margin-top:20px; }
.bs { flex:1; height:48px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; }
.buy { background:#00C076; color:#03150D; } .sell { background:#FA5252; color:#1B0606; }
/* ---- right: order book + chain ---- */
.book { left:718px; width:224px; }
.lrow { height:24px; position:relative; display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:700; }
.lrow .depth { position:absolute; right:0; top:0; bottom:0; }
.lrow .px { position:relative; z-index:1; padding-left:4px; }
.lrow .sz { position:relative; z-index:1; padding-right:4px; color:#8B95A1; font-weight:400; }
.mid { border-top:0.5px solid #232931; border-bottom:0.5px solid #232931; text-align:center; font-size:13px; font-weight:800; padding:5px 0; margin:2px 0; }
.chain-title { font-size:12px; font-weight:700; margin:16px 0 6px; }
.chain-head { display:grid; grid-template-columns:1fr 1fr 1fr; font-size:10px; font-weight:600; color:#5A636E; text-transform:uppercase; border-bottom:0.5px solid #232931; padding-bottom:4px; }
.chain-row { display:grid; grid-template-columns:1fr 1fr 1fr; font-size:12px; padding:5px 0; border-bottom:0.5px solid #232931; }
.chain-row.atm { background:#1C2127; }
.call { color:#00C076; font-weight:700; } .strike { text-align:center; font-weight:800; } .put { color:#FA5252; font-weight:700; text-align:right; }
</style></head>
<body>
<div class="brand"><div class="mark"></div><b>Webull (iOS)</b></div>
<div class="col watchlist">
<div class="rail-title" style="margin-top:44px;">Quotes</div>
<div class="wrow"><div><div class="sym">TSLA</div><div class="name">Tesla, Inc.</div></div><svg class="spark" viewBox="0 0 44 20"><polyline points="0,16 8,12 16,14 24,6 32,8 44,2" fill="none" stroke="#00C076" stroke-width="2"/></svg><div><div class="price up-c">248.50</div><div class="chip up">+3.04%</div></div></div>
<div class="wrow"><div><div class="sym">AAPL</div><div class="name">Apple Inc.</div></div><svg class="spark" viewBox="0 0 44 20"><polyline points="0,6 8,10 16,7 24,13 32,11 44,16" fill="none" stroke="#FA5252" stroke-width="2"/></svg><div><div class="price down-c">191.20</div><div class="chip down">-1.12%</div></div></div>
<div class="wrow"><div><div class="sym">NVDA</div><div class="name">NVIDIA Corp.</div></div><svg class="spark" viewBox="0 0 44 20"><polyline points="0,14 8,12 16,9 24,10 32,4 44,2" fill="none" stroke="#00C076" stroke-width="2"/></svg><div><div class="price up-c">905.40</div><div class="chip up">+5.61%</div></div></div>
<div class="wrow"><div><div class="sym">AMD</div><div class="name">Adv. Micro Dev.</div></div><svg class="spark" viewBox="0 0 44 20"><polyline points="0,8 8,9 16,12 24,10 32,14 44,13" fill="none" stroke="#FA5252" stroke-width="2"/></svg><div><div class="price down-c">162.05</div><div class="chip down">-0.48%</div></div></div>
<div class="wrow"><div><div class="sym">SPY</div><div class="name">SPDR S&P 500</div></div><svg class="spark" viewBox="0 0 44 20"><polyline points="0,12 8,11 16,9 24,8 32,6 44,5" fill="none" stroke="#00C076" stroke-width="2"/></svg><div><div class="price up-c">512.88</div><div class="chip up">+0.62%</div></div></div>
<div class="wrow" style="border-bottom:none;"><div><div class="sym">COIN</div><div class="name">Coinbase Gl.</div></div><svg class="spark" viewBox="0 0 44 20"><polyline points="0,10 8,14 16,11 24,15 32,10 44,7" fill="none" stroke="#00C076" stroke-width="2"/></svg><div><div class="price up-c">228.61</div><div class="chip up">+2.15%</div></div></div>
</div>
<div class="col quote">
<div class="qhead">
<div><div class="sym">TSLA</div><div class="exch">Tesla, Inc. · NASDAQ</div></div>
<div class="paper">PAPER</div>
</div>
<div class="lastpx">248.50</div>
<div class="delta">+7.32 (+3.04%) ▲</div>
<div class="chartbox">
<div class="gridline" style="top:20px;"></div>
<div class="gridline" style="top:80px;"></div>
<div class="gridline" style="top:140px;"></div>
<div class="prevclose" style="top:100px;"></div>
<div class="wick up" style="left:9px;top:136px;height:28px;"></div><div class="body up" style="left:6px;top:142px;height:16px;"></div>
<div class="wick down" style="left:35px;top:126px;height:32px;"></div><div class="body down" style="left:32px;top:132px;height:20px;"></div>
<div class="wick up" style="left:61px;top:114px;height:36px;"></div><div class="body up" style="left:58px;top:120px;height:24px;"></div>
<div class="wick down" style="left:87px;top:122px;height:26px;"></div><div class="body down" style="left:84px;top:128px;height:14px;"></div>
<div class="wick up" style="left:113px;top:99px;height:34px;"></div><div class="body up" style="left:110px;top:105px;height:22px;"></div>
<div class="wick down" style="left:139px;top:106px;height:28px;"></div><div class="body down" style="left:136px;top:112px;height:16px;"></div>
<div class="wick up" style="left:165px;top:82px;height:38px;"></div><div class="body up" style="left:162px;top:88px;height:26px;"></div>
<div class="wick down" style="left:191px;top:90px;height:30px;"></div><div class="body down" style="left:188px;top:96px;height:18px;"></div>
<div class="wick up" style="left:217px;top:64px;height:36px;"></div><div class="body up" style="left:214px;top:70px;height:24px;"></div>
<div class="wick down" style="left:243px;top:72px;height:28px;"></div><div class="body down" style="left:240px;top:78px;height:16px;"></div>
<div class="wick up" style="left:269px;top:46px;height:38px;"></div><div class="body up" style="left:266px;top:52px;height:26px;"></div>
<div class="wick down" style="left:295px;top:54px;height:30px;"></div><div class="body down" style="left:292px;top:60px;height:18px;"></div>
<div class="wick up" style="left:321px;top:28px;height:36px;"></div><div class="body up" style="left:318px;top:34px;height:24px;"></div>
<div class="wick down" style="left:347px;top:36px;height:28px;"></div><div class="body down" style="left:344px;top:42px;height:16px;"></div>
<div class="wick up" style="left:373px;top:10px;height:38px;"></div><div class="body up" style="left:370px;top:16px;height:26px;"></div>
<div class="wick down" style="left:399px;top:18px;height:26px;"></div><div class="body down" style="left:396px;top:24px;height:14px;"></div>
<div class="wick up" style="left:425px;top:4px;height:30px;"></div><div class="body up" style="left:422px;top:10px;height:18px;"></div>
<div class="wick down" style="left:451px;top:8px;height:24px;"></div><div class="body down" style="left:448px;top:12px;height:14px;"></div>
</div>
<div class="tf-row">
<div class="tf">1m</div><div class="tf">5m</div><div class="tf on">1D</div><div class="tf">5D</div><div class="tf">1M</div><div class="tf">1Y</div>
</div>
<div class="ind-row">
<div class="ind on">MA</div><div class="ind">EMA</div><div class="ind">BOLL</div><div class="ind on">MACD</div><div class="ind">RSI</div>
</div>
<div class="buysell">
<div class="bs buy">Buy</div>
<div class="bs sell">Sell</div>
</div>
</div>
<div class="col book">
<div class="rail-title" style="margin-top:44px;">Order book</div>
<div class="lrow"><div class="depth" style="width:70%;background:#FA525224;"></div><span class="px" style="color:#FA5252;">248.62</span><span class="sz">120</span></div>
<div class="lrow"><div class="depth" style="width:52%;background:#FA525224;"></div><span class="px" style="color:#FA5252;">248.58</span><span class="sz">340</span></div>
<div class="lrow"><div class="depth" style="width:38%;background:#FA525224;"></div><span class="px" style="color:#FA5252;">248.54</span><span class="sz">210</span></div>
<div class="lrow"><div class="depth" style="width:24%;background:#FA525224;"></div><span class="px" style="color:#FA5252;">248.51</span><span class="sz">96</span></div>
<div class="mid">248.50 · Spread 0.08</div>
<div class="lrow"><div class="depth" style="width:30%;background:#00C07624;"></div><span class="px" style="color:#00C076;">248.42</span><span class="sz">142</span></div>
<div class="lrow"><div class="depth" style="width:48%;background:#00C07624;"></div><span class="px" style="color:#00C076;">248.38</span><span class="sz">288</span></div>
<div class="lrow"><div class="depth" style="width:64%;background:#00C07624;"></div><span class="px" style="color:#00C076;">248.34</span><span class="sz">402</span></div>
<div class="lrow"><div class="depth" style="width:80%;background:#00C07624;"></div><span class="px" style="color:#00C076;">248.30</span><span class="sz">560</span></div>
<div class="chain-title">Options · Jun 21</div>
<div class="chain-head"><span>Call</span><span style="text-align:center;">Strike</span><span style="text-align:right;">Put</span></div>
<div class="chain-row"><span class="call">4.20</span><span class="strike">245</span><span class="put">1.05</span></div>
<div class="chain-row atm"><span class="call">2.85</span><span class="strike">250</span><span class="put">2.40</span></div>
<div class="chain-row"><span class="call">1.60</span><span class="strike">255</span><span class="put">4.15</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #8c8c8c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #00b4c5; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: transparent; color: #00b4c5;
border: 1px solid #00b4c5; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #00b4c5; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,'Helvetica Neue',Arial,sans-serif; color:#4a4a4a; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#1a1a1a;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.hero{height:200px;background:#111820;display:flex;align-items:center;padding:0 32px;position:relative;overflow:hidden;}
.htxt{width:380px;z-index:2;}
.htxt h1{font-size:36px;font-weight:700;letter-spacing:-0.7px;color:#fff;line-height:1.15;margin:0 0 10px;}
.htxt p{font-size:14px;color:#b5b5b5;margin:0 0 16px;}
.hcta{display:inline-block;background:#00b4c5;color:#fff;font-size:16px;font-weight:600;padding:14px 30px;border-radius:9999px;}
.device{position:absolute;right:80px;top:36px;width:180px;height:130px;border-radius:20px;background:linear-gradient(120deg,#2a2a2a,#050505 60%);box-shadow:0 0 40px rgba(0,180,197,0.25);}
.device:before{content:'';position:absolute;top:14px;right:16px;width:40px;height:14px;border-radius:9999px;background:rgba(0,180,197,0.7);}
.mah{padding:14px 32px 0;display:flex;align-items:baseline;gap:8px;}
.mah .num{font-size:34px;font-weight:700;color:#00b4c5;letter-spacing:-0.5px;}
.mah .unit{font-size:13px;color:#8c8c8c;}
.grid{display:flex;gap:16px;padding:14px 32px 0;}
.card{width:206px;background:#fff;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,0.06);}
.thumb{height:96px;background:#f5f7f8;border-radius:12px 12px 0 0;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#fff;border-radius:4px;padding:2px 8px;}
.body{padding:12px 14px 14px;}
.title{font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:6px;}
.specstrip{background:#f5f7f8;border-radius:8px;padding:5px 8px;font-size:11px;color:#4a4a4a;margin-bottom:6px;}
.price{font-size:15px;font-weight:700;color:#1a1a1a;}
</style>
<div class="nav">
<div class="logo">Luxtude</div>
<div class="navlinks"><span>Shop</span><span>Brand Story</span><span>Support</span></div>
</div>
<div class="hero">
<div class="htxt">
<h1>Charge like it's charged already.</h1>
<p>Fast, dependable portable power for every pocket and bag.</p>
<div class="hcta">Shop Chargers</div>
</div>
<div class="device"></div>
</div>
<div class="mah"><span class="num">10000</span><span class="unit">mAh capacity</span></div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge" style="background:#00b4c5;">New</span></div><div class="body"><div class="title">Slim 10K Power Bank</div><div class="specstrip">10000mAh · 20W · 180g</div><div class="price">$29.99</div></div></div>
<div class="card"><div class="thumb"><span class="badge" style="background:#e74c3c;">Sale</span></div><div class="body"><div class="title">MagSafe Wireless Charger</div><div class="specstrip">5000mAh · 15W · MagSafe</div><div class="price">$34.99</div></div></div>
<div class="card"><div class="thumb"><span class="badge" style="background:#f5a623;">Bestseller</span></div><div class="body"><div class="title">GaN 65W Wall Charger</div><div class="specstrip">65W · USB-C · 120g</div><div class="price">$24.99</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #23569d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #23569d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #96adcd; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #23569d; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #23569d; color: #f5f5f5;
border: 1px solid #456fab; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #96adcd; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4671ad; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#17181c; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; border-bottom:1px solid #8e959f33; }
.brand { font-size:18px; font-weight:700; margin:0; color:#23569d; }
.navlinks { display:flex; gap:24px; font-size:16px; font-weight:500; }
.btn { background:#23569d; color:#fff; border:none; border-radius:8px; height:56px; padding:0 20px; font-size:16px; font-weight:500; }
.hero { background:linear-gradient(160deg,#f1f8fd,#ffffff 60%); padding:26px 40px 20px; }
.hero h1 { font-size:40px; font-weight:500; line-height:1.4; margin:0 0 4px; }
.hero p { font-size:16px; color:#69707a; margin:0; }
.dialog { margin:18px 40px 0; background:#ffffff; border-radius:20px;
box-shadow: rgba(23,24,28,0.12) 0px 2px 4px 0px, rgba(23,24,28,0.09) 0px 4px 28px 0px, rgba(23,24,28,0.1) 0px 20px 32px 0px;
padding:20px; }
.tabs { display:flex; gap:8px; margin-bottom:16px; }
.tab { border-radius:8px; padding:0 12px; height:48px; display:flex; align-items:center; font-size:16px; font-weight:500; color:#69707a; }
.tab.on { background:#ffffff; color:#23569d; border:1px solid #9fd1f1; }
.fields { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:14px; align-items:end; }
.field .l { font-size:12px; color:#69707a; margin-bottom:4px; }
.field .v { font-size:16px; font-weight:500; }
.searchbtn { background:#23569d; color:#fff; border:none; border-radius:8px; height:56px; padding:0 20px; font-size:16px; font-weight:500; }
.chips { display:flex; gap:10px; margin-top:16px; }
.chip { background:#f1f8fd; border:1px solid #9fd1f1; border-radius:40px; padding:6px 14px; font-size:13px; color:#23569d; }
.promo { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:22px 40px; }
.p-card { border-radius:16px; padding:22px; color:#fff; }
.p1 { background:linear-gradient(135deg,#23569d,#1d6dcd); }
.p2 { background:linear-gradient(135deg,#d81159,#a10d43); }
.p-card .t { font-size:18px; font-weight:700; margin-bottom:4px; }
.p-card .s { font-size:13px; opacity:.9; }
</style></head>
<body>
<nav>
<p class="brand">China Airlines</p>
<div class="navlinks"><span>Book</span><span>Membership</span><span>Flight Status</span></div>
<button class="btn">Book Now</button>
</nav>
<section class="hero">
<h1>Fly to the World, Depart with Confidence</h1>
<p>Believe we can always do better — China Airlines flies with you</p>
</section>
<section class="dialog">
<div class="tabs"><span class="tab on">One-way</span><span class="tab">Round-trip</span><span class="tab">Multi-city</span></div>
<div class="fields">
<div class="field"><div class="l">From</div><div class="v">Taipei TPE</div></div>
<div class="field"><div class="l">To</div><div class="v">Seoul ICN</div></div>
<div class="field"><div class="l">Date</div><div class="v">2026-10-05</div></div>
<button class="searchbtn">Search Flights</button>
</div>
<div class="chips"><span class="chip">Mileage Redemption</span><span class="chip">Member-Only Deals</span></div>
</section>
<section class="promo">
<div class="p-card"><div class="t">Early Bird Offer</div><div class="s">Book 90 days ahead and save up to 25%</div></div>
<div class="p-card p2"><div class="t">Taoyuan Fast Track</div><div class="s">Priority check-in and baggage service for members</div></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1868db; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1868db; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #92b6e9; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0055cc; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1868db; color: #ffffff;
border: 1px solid #0055cc; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1868db; color: #f5f5f5;
border: 1px solid #3b7fdf; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #92b6e9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1465d9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #FFFFFF; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
nav { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; border-bottom: 1px solid #DCDFE4; }
.brand { font-size: 20px; font-weight: 600; color: #172B4D; margin: 0; }
.brand span { color: #1868DB; }
.navlinks { display: flex; gap: 32px; }
.navlinks span { font-size: 14px; color: #44546F; font-weight: 400; }
.navlinks span.active { color: #1868DB; font-weight: 500; }
.cta { background: #1868DB; color: #fff; border: none; border-radius: 4px; padding: 8px 16px; font-weight: 500; font-size: 14px; }
.hero { padding: 40px 32px 24px; display: flex; gap: 32px; }
.hero-copy { width: 340px; flex-shrink: 0; padding-top: 16px; }
.eyebrow { font-size: 12px; color: #6E5DC6; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.hero-copy h1 { font-size: 35px; line-height: 40px; font-weight: 500; color: #172B4D; margin: 8px 0 12px; }
.hero-copy p { font-size: 14px; line-height: 20px; color: #44546F; margin: 0 0 20px; }
.hero-btns { display: flex; gap: 12px; }
.btn-primary { background: #1868DB; color: #fff; border: none; border-radius: 4px; padding: 10px 20px; font-weight: 500; font-size: 14px; }
.btn-secondary { background: #F7F8F9; color: #1868DB; border: none; border-radius: 4px; padding: 10px 20px; font-weight: 500; font-size: 14px; }
.board-wrap { flex: 1; background: #F7F8F9; border-radius: 8px; border: 1px solid #DCDFE4; padding: 20px; }
.board-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.board-head h3 { font-size: 20px; font-weight: 500; color: #172B4D; margin: 0; }
.board-head .tag { background: #6E5DC6; color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 4px; }
.board { display: flex; gap: 14px; }
.col { flex: 1; }
.col-title { font-size: 12px; font-weight: 600; color: #44546F; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.card { background: #fff; border: 1px solid #DCDFE4; border-radius: 4px; padding: 10px 12px; margin-bottom: 8px; box-shadow: 0 1px 1px rgba(9,50,108,0.08); }
.card p { margin: 0 0 8px; font-size: 13px; color: #172B4D; line-height: 18px; }
.chip { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; color: #fff; }
.chip.green { background: #22A06B; }
.chip.yellow { background: #B38600; }
.chip.red { background: #CA3521; }
.chip.teal { background: #1D7F8C; }
.avatar { float: right; width: 20px; height: 20px; border-radius: 50%; background: #1868DB; }
.features { display: flex; gap: 20px; padding: 8px 32px 32px; }
.feat { flex: 1; border: 1px solid #DCDFE4; border-radius: 4px; padding: 16px; }
.feat .ic { width: 32px; height: 32px; border-radius: 4px; margin-bottom: 10px; }
.feat h4 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: #172B4D; }
.feat p { margin: 0; font-size: 12px; color: #44546F; line-height: 16px; }
</style>
<nav>
<p class="brand">Atlassian</p>
<div class="navlinks"><span class="active">Products</span><span>Solutions</span><span>Enterprise</span><span>Pricing</span></div>
<button class="cta">Get it free</button>
</nav>
<div class="hero">
<div class="hero-copy">
<span class="eyebrow">New · Team Workspaces</span>
<h1>Clarity, at the density your team actually needs.</h1>
<p>One workspace for planning, docs and code — built so 4.5:1 contrast and an 8px grid keep every screen legible at scale.</p>
<div class="hero-btns">
<button class="btn-primary">Start free</button>
<button class="btn-secondary">View demo</button>
</div>
</div>
<div class="board-wrap">
<div class="board-head"><h3>Sprint 42 — Platform</h3><span class="tag">Discovery</span></div>
<div class="board">
<div class="col">
<div class="col-title">To do</div>
<div class="card"><p>Audit color contrast across settings</p><span class="chip yellow">Warning</span><span class="avatar"></span></div>
<div class="card"><p>Draft spacing tokens v2</p><span class="chip teal">Info</span><span class="avatar"></span></div>
</div>
<div class="col">
<div class="col-title">In progress</div>
<div class="card"><p>Ship focus-ring update</p><span class="chip red">Blocked</span><span class="avatar"></span></div>
<div class="card"><p>Mono type audit</p><span class="chip green">On track</span><span class="avatar"></span></div>
</div>
<div class="col">
<div class="col-title">Done</div>
<div class="card"><p>Migrate to space.200</p><span class="chip green">Shipped</span><span class="avatar"></span></div>
</div>
</div>
</div>
</div>
<div class="features">
<div class="feat"><div class="ic" style="background:#1868DB"></div><h4>Consistent grid</h4><p>Every layout follows the 8px spacing scale — space.100 to space.400.</p></div>
<div class="feat"><div class="ic" style="background:#6E5DC6"></div><h4>Accessible by default</h4><p>4.5:1 contrast enforced across text and interactive states.</p></div>
<div class="feat"><div class="ic" style="background:#22A06B"></div><h4>One design language</h4><p>Shared components across Jira, Confluence and Bitbucket.</p></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #2c2a41;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #2c2a41;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.35; margin: 0; color: #2c2a41; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ec8816; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f5f5f5; color: #2c2a41;
border: 1px solid #ec8816; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #3c3c3c;
border: 1px solid #c3c2c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d10000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; color:#2c2a41; font-family:Arial,Helvetica,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#fff;border-bottom:1px solid #e5e5e5;}
.logo{font-size:21px;font-weight:700;color:#2c2a41;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:700;color:#2c2a41;}
.search{width:170px;height:36px;border-radius:9999px;background:#f5f5f5;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#777575;}
.hero{height:270px;display:flex;align-items:center;padding:0 44px;background:#2c2a41;}
.herotext{width:430px;}
.herotext h1{font-size:32px;font-weight:700;color:#fff;margin:0 0 12px;line-height:1.25;}
.herotext p{font-size:14px;color:#c3c1d6;margin:0 0 20px;max-width:340px;}
.btn{display:inline-block;height:46px;line-height:46px;padding:0 28px;background:#ec8816;color:#fff;font-size:14px;font-weight:700;border-radius:6px;width:fit-content;}
.blocks{position:absolute;right:100px;width:220px;height:180px;}
.block{position:absolute;border-radius:8px;}
.b1{width:70px;height:70px;background:#ec8816;left:20px;bottom:0;}
.b2{width:60px;height:60px;background:#9ebadc;left:100px;bottom:0;transform:rotate(8deg);}
.b3{width:50px;height:50px;background:#7069bc;left:60px;bottom:70px;transform:rotate(-6deg);}
.sec{padding:24px 44px 0;position:relative;}
.sectitle{font-size:16px;font-weight:700;margin-bottom:16px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#fff;border-radius:12px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#199800;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:9999px;z-index:2;}
.thumb{height:96px;border-radius:8px;background:#f5f5f5;}
.pname{font-size:13px;font-weight:700;margin-top:8px;}
.pprice{font-size:13px;font-weight:700;color:#ec8816;margin-top:3px;}
</style>
<div class="nav">
<div class="logo">LE Toy Van</div>
<div class="navlinks"><span>Wooden Toys</span><span>Dolls Houses</span><span>Nursery</span></div>
<div class="search">Search toys...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Wooden play, built for imagination.</h1>
<p>Eco-ethical toys crafted with a playroom floor in mind.</p>
<div class="btn">Shop Wooden Toys</div>
</div>
<div class="blocks"><div class="b3"></div><div class="b2"></div><div class="b1"></div></div>
</div>
<div class="sec">
<div class="sectitle">New This Season</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#ec8816,#f5f5f5)"></div><div class="pname">Budkins Farm Set</div><div class="pprice">$38</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#9ebadc,#f5f5f5)"></div><div class="pname">Dolls House Cottage</div><div class="pprice">$129</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7069bc,#f5f5f5)"></div><div class="pname">Stacking Rainbow Blocks</div><div class="pprice">$24</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d10000,#f5f5f5)"></div><div class="pname">Wooden Fire Truck</div><div class="pprice">$32</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0cd25f; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0cd25f; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #05f067; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0cd25f; color: #000000;
border: 1px solid #05f067; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0cd25f; color: #000000;
border: 1px solid #31d877; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0bd760; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#262626; box-sizing:border-box;
font-family:'Nunito','Segoe UI Rounded','Segoe UI',Verdana,sans-serif; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; overflow:hidden; background:#ffffff; }
nav { height:64px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #eef2ee; }
.logomark { width:30px; height:30px; border-radius:10px; background:#0cd25f; position:relative; flex:0 0 auto; }
.logomark::after { content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
color:#ffffff; font-size:16px; font-weight:800; }
.brandwrap { display:flex; align-items:center; gap:10px; }
.brand { font-size:19px; font-weight:800; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:700; color:#2c3e50; opacity:0.55; }
.pill-cta { background:#05f067; color:#262626; border:none; border-radius:999px; padding:10px 22px;
font-weight:800; font-size:13px; white-space:nowrap; }
main { flex:1 1 auto; display:flex; gap:34px; padding:26px 40px; overflow:hidden; }
.phone { width:270px; height:452px; flex:0 0 auto; background:#2c3e50; border-radius:38px; padding:12px;
box-shadow: 0 18px 40px rgba(44,62,80,0.18); }
.screen { width:100%; height:100%; background:#ffffff; border-radius:28px; padding:26px 20px 22px;
display:flex; flex-direction:column; align-items:center; gap:12px; position:relative; overflow:hidden; }
.screen::before { content:''; position:absolute; top:-40px; right:-40px; width:140px; height:140px;
border-radius:50%; background:#e6faef; }
.callmeta { position:relative; font-size:11px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
color:#019d91; }
.avatar { position:relative; width:78px; height:78px; border-radius:50%; background:#e6faef;
display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:800; color:#0cd25f;
margin-top:6px; }
.callnum { position:relative; font-size:21px; font-weight:800; letter-spacing:-0.3px; }
.callloc { position:relative; font-size:12px; color:#6e6e6e; margin-top:-6px; }
.spamtag { position:relative; background:#f53f90; color:#ffffff; font-size:11px; font-weight:800;
letter-spacing:0.02em; padding:6px 14px; border-radius:999px; margin-top:6px; }
.callrow { position:relative; display:flex; gap:34px; margin-top:auto; margin-bottom:6px; }
.callbtn { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:20px; font-weight:800; color:#ffffff; }
.callbtn.decline { background:#2c3e50; }
.callbtn.accept { background:#0cd25f; }
.calllabel { position:relative; font-size:11px; color:#9096a2; font-weight:700; }
.side { flex:1 1 auto; display:flex; flex-direction:column; gap:14px; min-width:0; overflow:hidden; }
.badge { align-self:flex-start; background:#000000; color:#ffffff; border-radius:999px; padding:5px 13px;
font-size:10px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; }
h1 { font-size:34px; font-weight:800; line-height:1.06; letter-spacing:-0.8px; margin:2px 0 0; max-width:480px; }
.lede { font-size:15px; color:#3a3a3a; margin:0; max-width:440px; line-height:1.5; }
.ctarow { display:flex; gap:12px; align-items:center; margin-top:2px; }
.btn-primary { background:#05f067; color:#262626; border:none; border-radius:999px; padding:14px 26px;
font-weight:800; font-size:14px; }
.btn-secondary { background:rgba(255,255,255,0.8); color:#262626; border:1.5px solid #2c3e50; border-radius:999px;
padding:13px 26px; font-weight:800; font-size:14px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px; }
.stat { border:1px solid #eef2ee; border-radius:18px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; }
.tag { align-self:flex-start; font-size:10px; font-weight:800; letter-spacing:0.05em; padding:3px 9px; border-radius:999px; }
.tag.pink { background:#fde6f0; color:#f53f90; }
.tag.teal { background:#dcf3f1; color:#019d91; }
.tag.green { background:#e6faef; color:#0cd25f; }
.stat b { font-size:22px; font-weight:800; letter-spacing:-0.4px; }
.stat span { font-size:11px; color:#6e6e6e; font-weight:700; }
.premium { align-self:flex-start; background:#e6faef; color:#262626; border:none; border-radius:40px;
padding:11px 22px; font-weight:700; font-size:13px; margin-top:2px; }
footer { flex:0 0 auto; height:52px; border-top:1px solid #eef2ee; padding:0 40px; display:flex;
align-items:center; justify-content:space-between; font-size:11px; color:#6e6e6e; font-weight:700; }
</style></head>
<body>
<div class="page">
<nav>
<div class="brandwrap"><div class="logomark"></div><p class="brand">Gogolook</p></div>
<div class="navlinks"><span>Protect</span><span>Business</span><span>Pricing</span><span>Support</span></div>
<button class="pill-cta">Get Gogolook</button>
</nav>
<main>
<div class="phone">
<div class="screen">
<span class="callmeta">Incoming call</span>
<div class="avatar">?</div>
<div class="callnum">+1 (702) 555 0148</div>
<div class="callloc">Las Vegas, NV · Mobile carrier</div>
<span class="spamtag">Suspected Spam · 93%</span>
<div class="callrow">
<div>
<div class="callbtn decline">✕</div>
<div class="calllabel">Decline</div>
</div>
<div>
<div class="callbtn accept">✓</div>
<div class="calllabel">Accept</div>
</div>
</div>
</div>
</div>
<div class="side">
<span class="badge">Trusted by millions</span>
<h1>Know who's calling — before you answer.</h1>
<p class="lede">A friendly caller-ID and spam shield that keeps unknown numbers from ruining your day, with zero technical fuss.</p>
<div class="ctarow">
<button class="btn-primary">Download free</button>
<button class="btn-secondary">Watch demo</button>
</div>
<div class="stats">
<div class="stat"><span class="tag pink">Scam DB</span><b>1.8B+</b><span>numbers checked</span></div>
<div class="stat"><span class="tag teal">Blocked</span><b>42M</b><span>spam calls / month</span></div>
<div class="stat"><span class="tag green">Trust</span><b>98%</b><span>user satisfaction</span></div>
</div>
<button class="premium">Explore Premium →</button>
</div>
</main>
<footer>
<span>© Gogolook</span>
<span>Gogolook · Protect · Business · Legal</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0041c0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0041c0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87a4dd; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2f2f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0041c0; color: #f2f2f2;
border: 1px solid #f2f2f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0041c0; color: #f5f5f5;
border: 1px solid #275ec8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87a4dd; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #275dc8; color: #f2f2f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f2f2f2; color:#1a1a1a; box-sizing:border-box;
font-family:"Noto Sans", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #e0e0e0; }
.brand { font-size:18px; font-weight:400; letter-spacing:0.02em; }
.navlinks { display:flex; }
.navlinks span { color:#4d4d4d; font-size:15px; font-weight:400; margin-right:26px; }
.search { width:16px; height:16px; border:1.5px solid #1a1a1a; border-radius:0px; position:relative; }
.search::after { content:''; position:absolute; right:-5px; bottom:-4px; width:6px; height:1.5px;
background:#1a1a1a; transform:rotate(45deg); }
.hero { padding:36px 32px 26px; background:#f2f2f2; border-bottom:1px solid #e2e2e2; }
.hero .eyebrow { font-size:13px; color:#666666; margin:0 0 8px; }
.hero h1 { font-size:26px; font-weight:400; line-height:1.4; margin:0 0 10px; max-width:560px; }
.hero p { font-size:16px; line-height:24px; color:#1a1a1a; margin:0; max-width:520px; }
.panel { display:flex; }
.p-left { width:560px; padding:26px 32px 0; }
.p-left h2 { font-size:16px; font-weight:400; margin:0 0 12px; border-bottom:1px solid #d8d8d8;
padding-bottom:8px; }
.row-item { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid #e6e6e6;
font-size:15px; }
.row-item .lbl { color:#1a1a1a; }
.row-item .val { color:#666666; }
.p-right { flex:1; padding:26px 32px 0; }
.swatch { display:flex; gap:0; height:150px; }
.swatch div { flex:1; }
.s1 { background:#f2f2f2; border:1px solid #d8d8d8; }
.s2 { background:#1a1a1a; }
.s3 { background:#0041c0; }
.s4 { background:#666666; }
.caption { font-size:12px; color:#666666; margin-top:8px; }
.foot { position:absolute; bottom:0; left:0; right:0; height:0; }
.link-line { font-size:15px; color:#0041c0; margin-top:16px; }
</style></head>
<body>
<nav>
<div class="brand">Panasonic</div>
<div class="navlinks"><span>Products</span><span>Technology</span><span>Sustainability</span><span>Company</span></div>
<div class="search"></div>
</nav>
<section class="hero">
<p class="eyebrow">Technology</p>
<h1>Finding the real problems in everyday life, and delivering the right solutions.</h1>
<p>Panasonic's design philosophy, "Future Craft," guides how we make things with future generations in mind.</p>
</section>
<div class="panel">
<div class="p-left">
<h2>Related</h2>
<div class="row-item"><span class="lbl">Panasonic GREEN IMPACT</span><span class="val">Sustainability</span></div>
<div class="row-item"><span class="lbl">Future Craft Design Philosophy</span><span class="val">Design</span></div>
<div class="row-item"><span class="lbl">Our Technology Strategy</span><span class="val">Technology</span></div>
<div class="row-item"><span class="lbl">Our Journey Since 1918</span><span class="val">Company</span></div>
<p class="link-line">Learn More →</p>
</div>
<div class="p-right">
<div class="swatch"><div class="s1"></div><div class="s2"></div><div class="s3"></div><div class="s4"></div></div>
<p class="caption">Brand palette — canvas / foreground / link / muted</p>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #373737;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #373737;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #373737; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9a9db1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffcf2a; color: #272d45;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #373737;
border: 1px solid #ffcf2a; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #373737;
border: 1px solid #cdcdcd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9db1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; background: #ffcf2a; color: #272d45;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Montserrat,'Segoe UI',sans-serif; color:#373737; }
*{box-sizing:border-box;}
.announce{height:32px;background:#272d45;color:#ffcf2a;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;}
.nav{height:64px;background:#f8f8f8;border-bottom:1px solid #dbdde4;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:700;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;color:#515151;}
.navlinks div:first-child{color:#373737;border-bottom:2px solid #ffcf2a;padding-bottom:20px;}
.hero{height:224px;background:#272d45;display:flex;align-items:center;padding:0 36px;position:relative;overflow:hidden;}
.rule{width:44px;height:3px;background:#ffcf2a;margin-bottom:14px;}
.herotext h1{font-size:32px;font-weight:600;color:#fff;margin:0 0 8px;max-width:420px;line-height:1.2;}
.herotext p{font-size:14px;color:#dbdde4;margin:0 0 16px;max-width:360px;opacity:0.8;}
.cta{display:inline-block;background:#ffcf2a;color:#272d45;font-size:14px;font-weight:600;padding:14px 26px;border-radius:4px;}
.card1{position:absolute;right:80px;top:60px;width:140px;height:90px;background:linear-gradient(135deg,#3c55e4,#272d45);border-radius:8px;transform:rotate(-6deg);}
.card2{position:absolute;right:120px;top:90px;width:140px;height:90px;background:linear-gradient(135deg,#ffcf2a,#3c55e4);border-radius:8px;transform:rotate(4deg);}
.grid{display:flex;gap:14px;padding:20px 36px 0;}
.card{width:150px;background:#f8f8f8;border-radius:8px;padding:10px;}
.thumb{height:100px;border-radius:8px;background:#f4f4f4;margin-bottom:8px;}
.badgesale{display:inline-block;background:#3c55e4;color:#fff;font-size:9px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:2px 6px;margin-bottom:4px;}
.pname{font-size:13px;font-weight:500;}
.pprice{font-size:14px;font-weight:600;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:46px;background:#272d45;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#fff;font-size:11px;}
.footer span{margin-left:16px;color:#ffcf2a;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">Free Shipping Over $75</div>
<div class="nav">
<div class="logo">Orbitkey</div>
<div class="navlinks"><div>Wallets</div><div>Key Organizers</div><div>Bags</div><div>Journals</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="rule"></div>
<h1>Precision, carried daily.</h1>
<p>Swiss-grade materials, built for people who notice details.</p>
<div class="cta">Shop Now</div>
</div>
<div class="card1"></div><div class="card2"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#272d45,#ffcf2a)"></div><div class="pname">Key Organizer 2.0</div><div class="pprice">$39</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3c55e4,#272d45)"></div><div class="badgesale">Sale</div><div class="pname">Cardholder Slim</div><div class="pprice">$45</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b2f9e9,#272d45)"></div><div class="pname">Recycled Nylon Pouch</div><div class="pprice">$29</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffcf2a,#3c55e4)"></div><div class="pname">Everyday Journal</div><div class="pprice">$32</div></div>
</div>
<div class="footer"><span>© Precision Everyday</span><span>Warranty<span> Shipping<span> About</span></span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e60012; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e60012; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #cc0010; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e60012; color: #ffffff;
border: 1px solid #cc0010; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e60012; color: #f5f5f5;
border: 1px solid #e82736; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ffffff; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e20012; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP","Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 44px;
border-bottom:1px solid #e1e4e8; }
.brand-mark { display:flex; align-items:center; gap:10px; }
.thread { width:34px; height:4px; background:#E60012; border-radius:2px; }
.brand { font-size:18px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; color:#33383f; }
.cta { background:#E60012; color:#ffffff; border:none; border-radius:4px; padding:11px 22px; font-size:14px; font-weight:700; }
.hero { padding:44px 44px 26px; }
.hero h1 { font-size:34px; font-weight:700; line-height:1.35; margin:0 0 14px; max-width:600px; }
.hero p { font-size:16px; color:#4a5159; line-height:1.75; max-width:480px; margin:0 0 20px; }
.row { display:flex; gap:12px; }
.outl { background:#ffffff; color:#E60012; border:1.5px solid #E60012; border-radius:4px; padding:9.5px 21px; font-size:16px; font-weight:700; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:8px 44px 0; }
.card { background:#ffffff; border:1px solid #e1e4e8; border-radius:8px; padding:22px; box-shadow:0 1px 3px rgba(26,26,26,0.06); }
.badge { display:inline-block; background:#fdecec; color:#cc0010; font-size:12px; font-weight:700; border-radius:4px; padding:3px 8px; margin-bottom:10px; }
.card h3 { font-size:18px; font-weight:600; margin:0 0 8px; }
.card p { font-size:13px; color:#4a5159; line-height:1.5; margin:0; }
</style></head>
<body>
<nav>
<div class="brand-mark"><span class="brand">Sansan</span><span class="thread"></span></div>
<div class="navlinks"><span>Services</span><span>Case Studies</span><span>Careers</span></div>
<button class="cta">Request Materials</button>
</nav>
<section class="hero">
<h1>From encounters,<br>to innovation.</h1>
<p>Turning every business card exchange into a shared company asset. Sales, elevated.</p>
<div class="row">
<button class="cta">Request Materials</button>
<button class="outl">Learn More</button>
</div>
</section>
<section class="cards">
<div class="card"><span class="badge">Recommended</span><h3>Business Card Cloud</h3><p>Scanned cards become a shared company asset.</p></div>
<div class="card"><span class="badge">NEW</span><h3>Bill One</h3><p>Receive and pay invoices from a single dashboard.</p></div>
<div class="card"><span class="badge">Trusted Widely</span><h3>Contract One</h3><p>Smooth, thorough contract management — nothing slips through.</p></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6e6e6e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.43; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.43; letter-spacing: 0.5px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e6e6e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.33; letter-spacing: 0.2px; background: #c0392b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
border-bottom:1px solid #e8e8e8; }
.brand { font-size:18px; font-weight:700; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; text-transform:uppercase; color:#6e6e6e; }
.navlinks span:first-child { color:#313131; border-bottom:2px solid #313131; padding-bottom:6px; }
.layout { display:flex; height:calc(640px - 64px); }
.media { width:360px; flex-shrink:0; background:#f5f5f5; position:relative; display:flex; align-items:center; justify-content:center; }
.box { width:220px; height:280px; background:linear-gradient(160deg, #c0392b 0%, #d4a017 55%, #2980b9 100%);
border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,0.2); }
.badge-new { position:absolute; top:18px; left:18px; background:#c0392b; color:#ffffff; font-size:12px; font-weight:600;
border-radius:4px; padding:3px 10px; }
.detail { flex:1; padding:26px 34px; display:flex; flex-direction:column; gap:14px; }
.kicker { font-size:13px; color:#6e6e6e; }
h1 { font-size:24px; font-weight:600; margin:0; }
.price { font-size:20px; font-weight:600; }
.meta-row { display:flex; gap:16px; font-size:14px; color:#4a4a4a; }
.meta-row .item { display:flex; align-items:center; gap:6px; }
.badges { display:flex; gap:8px; }
.badge-gold { background:#d4a017; color:#ffffff; font-size:12px; padding:2px 8px; border-radius:4px; }
.badge-red { background:#c0392b; color:#ffffff; font-size:12px; padding:2px 8px; border-radius:4px; }
.desc { font-size:14px; color:#4a4a4a; line-height:1.5; }
.actions { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#313131; color:#ffffff; border:none; border-radius:8px; height:44px; font-size:14px;
font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.btn-secondary { background:#ffffff; color:#313131; border:1px solid #d4d4d4; border-radius:8px; height:44px;
padding:0 20px; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
</style></head>
<body>
<div class="topbar">
<div class="brand">Cmon</div>
<div class="navlinks"><span>Games</span><span>Kickstarter</span><span>News</span><span>Shop</span></div>
</div>
<div class="layout">
<div class="media">
<div class="badge-new">New</div>
<div class="box"></div>
</div>
<div class="detail">
<div class="kicker">Cooperative Miniatures Game</div>
<h1>Zombie Siege: Reckoning</h1>
<div class="price">$89.99</div>
<div class="meta-row">
<div class="item">1–6 Players</div>
<div class="item">·</div>
<div class="item">60–90 min</div>
<div class="item">·</div>
<div class="item">Ages 14+</div>
</div>
<div class="badges"><span class="badge-red">Kickstarter Exclusive</span><span class="badge-gold">Collector's Edition</span></div>
<div class="desc">62 highly-detailed miniatures, modular board tiles, and a campaign that scales from a quick skirmish to a full siege.</div>
<div class="actions">
<button class="btn-primary">Pre-order Now</button>
<button class="btn-secondary">View Details</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f6f7f8; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f6f7f8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fefefe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#242529; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.top { padding:20px 28px 0; display:flex; align-items:center; justify-content:space-between; }
.brand { margin:0; font-size:20px; font-weight:700; }
.search { background:#F6F7F8; border-radius:10px; height:40px; width:320px; display:flex; align-items:center; padding:0 14px; color:#72757E; font-size:14px; }
.storecard { margin:16px 28px 0; background:#fff; border:1px solid #E8E9EB; border-radius:14px; padding:14px 16px; display:flex; align-items:center; gap:14px; }
.slogo { width:44px; height:44px; border-radius:10px; background:linear-gradient(135deg,#0AAD0A,#098F09); }
.sname { font-size:17px; font-weight:700; }
.smeta { font-size:12px; color:#72757E; margin-top:2px; }
.deal { margin-left:auto; background:#FFF0E6; color:#FF7009; font-size:11px; font-weight:700; padding:4px 10px; border-radius:6px; }
.section-title { margin:22px 28px 12px; font-size:14px; font-weight:700; color:#242529; }
.grid { margin:0 28px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcard { border:1px solid #E8E9EB; border-radius:12px; padding:10px; }
.pimg { height:80px; border-radius:8px; margin-bottom:8px; }
.pimg.a { background:linear-gradient(135deg,#dff4d0,#b7e6a4); }
.pimg.b { background:linear-gradient(135deg,#ffe3c2,#ffc98a); }
.pimg.c { background:linear-gradient(135deg,#d7e8ff,#a9caf5); }
.pimg.d { background:linear-gradient(135deg,#f6d7e2,#eeb3c6); }
.ptitle { font-size:13px; font-weight:400; line-height:1.3; height:34px; overflow:hidden; }
.prow { display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.pprice { font-size:15px; font-weight:700; }
.punit { font-size:11px; color:#72757E; }
.stepper { display:flex; align-items:center; gap:8px; background:#0AAD0A; border-radius:8px; padding:4px 8px; color:#fff; font-size:13px; font-weight:700; }
.cartbar { position:absolute; left:0; right:0; bottom:0; height:56px; background:#0AAD0A; color:#fff;
display:flex; align-items:center; justify-content:space-between; padding:0 28px; font-weight:700; font-size:14px; }
</style></head>
<body>
<div class="top">
<p class="brand">Instacart (iOS)</p>
<div class="search">🔍 Search groceries, stores, aisles</div>
</div>
<div class="storecard">
<div class="slogo"></div>
<div>
<div class="sname">Instacart (iOS) Market</div>
<div class="smeta">Delivery by 4:30pm · $3.99 delivery fee</div>
</div>
<div class="deal">20% off</div>
</div>
<div class="section-title">Buy it again</div>
<div class="grid">
<div class="pcard"><div class="pimg a"></div><div class="ptitle">Organic Bananas, bunch</div>
<div class="prow"><div><div class="pprice">$1.49</div><div class="punit">$0.42/oz</div></div><div class="stepper">− 2 +</div></div></div>
<div class="pcard"><div class="pimg b"></div><div class="ptitle">Sourdough Bread Loaf</div>
<div class="prow"><div><div class="pprice">$4.29</div><div class="punit">each</div></div><div class="stepper">Add</div></div></div>
<div class="pcard"><div class="pimg c"></div><div class="ptitle">Whole Milk, 1 Gallon</div>
<div class="prow"><div><div class="pprice">$3.79</div><div class="punit">each</div></div><div class="stepper">Add</div></div></div>
<div class="pcard"><div class="pimg d"></div><div class="ptitle">Strawberries, 1 lb</div>
<div class="prow"><div><div class="pprice">$3.99</div><div class="punit">$3.99/lb</div></div><div class="stepper">Add</div></div></div>
</div>
<div class="cartbar"><span>3 items</span><span>View cart · $12.56</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.1px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.8px; background: #313131; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#313131; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e2e2e2;}
.logo{font-size:19px;font-weight:500;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;letter-spacing:.3px;}
.hero{height:280px;background:#313131;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,#4a3a2a,#1a1a1a 70%);opacity:.9;}
.dotgrid{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.08) 1px,transparent 1px);background-size:22px 22px;}
.herotext{position:relative;text-align:center;color:#fff;}
.herotext h1{font-size:38px;font-weight:300;letter-spacing:-.5px;margin:0 0 14px;}
.hbtn{display:inline-block;background:#313131;color:#fff;border:1px solid #fff;font-size:14px;font-weight:500;letter-spacing:.5px;padding:14px 30px;}
.sec{padding:22px 40px 0;}
.sectitle{font-size:12px;font-weight:500;letter-spacing:.5px;color:#767676;margin-bottom:12px;}
.grid{display:flex;gap:16px;}
.card{width:150px;}
.thumb{aspect-ratio:3/4;height:150px;border-radius:2px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#313131;color:#fff;font-size:11px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;padding:4px 10px;}
.ptitle{font-size:14px;font-weight:500;margin-top:10px;}
.pspec{font-size:12px;color:#767676;margin-top:2px;}
.pprice{font-size:14px;font-weight:400;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:0;}
</style>
<div class="wrap">
<div class="nav"><div class="logo">Nuuna</div><div class="navlinks"><div>Notebooks</div><div>Collections</div><div>Collaborations</div><div>About</div></div></div>
<div class="hero"><div class="dotgrid"></div><div class="herotext"><h1>Every page begins with a dot.</h1><div class="hbtn">Shop the Collection</div></div></div>
<div class="sec">
<div class="sectitle">Current Editions</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#8a6a4a,#3a2a1a)"><div class="badge">New</div></div><div class="ptitle">Terracotta Study</div><div class="pspec">Dot grid · A5 · 176 pages</div><div class="pprice">€24.90</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#4a5a6a,#1a2530)"></div><div class="ptitle">Nightfall Geometry</div><div class="pspec">Dot grid · A5 · 176 pages</div><div class="pprice">€24.90</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#7a3a3a,#2a1010)"></div><div class="ptitle">Rust Field Notes</div><div class="pspec">Dot grid · A6 · 128 pages</div><div class="pprice">€18.90</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#5a6a4a,#1a2010)"></div><div class="ptitle">Olive Grove Edition</div><div class="pspec">Dot grid · A5 · 176 pages</div><div class="pprice">€24.90</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcf9f8; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcf9f8; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #727272; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #933c06; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #fcf9f8; color: #121212;
border: 1px solid #933c06; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c2bfbe; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #727272; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.4px; background: #d20000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcf9f8; color:#4f5354; box-sizing:border-box;
font-family:'Inter', -apple-system, system-ui, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#121212; display:flex; align-items:center; gap:22px; padding:0 26px; }
.logo { font-size:18px; font-weight:700; color:#fff; }
.navlink { font-size:14px; font-weight:500; color:#c9c9c9; }
.navlink.active { color:#933c06; }
.searchw { margin-left:auto; width:200px; height:34px; background:#1e222b; border-radius:4px;
display:flex; align-items:center; padding:0 12px; font-size:12px; color:#9e9e9e; }
.stage { display:flex; gap:26px; padding:20px 26px 0; }
.oven { width:230px; height:230px; border-radius:8px; flex:0 0 auto; position:relative; overflow:hidden;
background:radial-gradient(circle at 35% 30%, #d4772a 0%, #933c06 45%, #242833 100%); box-shadow:0 8px 20px rgba(0,0,0,.18); }
.oven::before { content:''; position:absolute; left:40px; top:50px; width:150px; height:100px; border-radius:50% 50% 20% 20%;
background:rgba(0,0,0,.28); }
.badge { position:absolute; top:12px; left:12px; background:#933c06; color:#fff; font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:.4px; border-radius:4px; padding:4px 8px; }
.info { flex:1; }
h1 { font-size:24px; font-weight:700; margin:6px 0 6px; color:#121212; }
.desc { font-size:15px; line-height:1.5; max-width:520px; margin-bottom:14px; }
.selrow { display:flex; gap:8px; margin-bottom:10px; }
.sel { border:2px solid #d4d4d4; border-radius:4px; padding:10px 18px; font-size:13px; font-weight:600; color:#121212; }
.sel.active { border-color:#933c06; background:#fcf9f8; }
.pricerow { display:flex; align-items:baseline; gap:10px; margin:12px 0 14px; }
.price { font-size:26px; font-weight:700; color:#121212; }
.btnrow { display:flex; gap:10px; }
.btn-p { background:#933c06; color:#fff; border:none; border-radius:4px; height:48px; padding:0 28px;
font-size:15px; font-weight:600; }
.btn-s { background:#fcf9f8; color:#121212; border:2px solid #121212; border-radius:4px; height:48px; padding:0 22px;
font-size:15px; font-weight:600; }
.specwrap { padding:14px 26px 0; margin-top:14px; border-top:1px solid #dedede; }
.spechdr { font-size:13px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:#727272; margin-bottom:10px; }
.spectable { background:#f3f3f3; border-radius:8px; padding:8px 16px; }
.specline { display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px solid #e4e0db; }
.specline b { color:#121212; }
.specline:last-child { border-bottom:none; }
</style></head>
<body>
<nav>
<span class="logo">Chicago Brick Oven</span>
<span class="navlink active">Wood-Fired</span>
<span class="navlink">Gas</span>
<span class="navlink">Hybrid</span>
<div class="searchw">Search ovens…</div>
</nav>
<div class="stage">
<div class="oven"><span class="badge">Bestseller</span></div>
<div class="info">
<h1>Americano 750 Wood-Fired Oven</h1>
<div class="desc">A commercial-grade masonry dome built from refractory cement and steel, capable of reaching 900°F for authentic Neapolitan crusts in under 90 seconds.</div>
<div class="selrow">
<span class="sel active">Wood-Fired</span>
<span class="sel">Gas</span>
<span class="sel">Hybrid</span>
</div>
<div class="pricerow"><span class="price">$5,795.00</span></div>
<div class="btnrow">
<button class="btn-p">Add to Cart</button>
<button class="btn-s">Compare Models</button>
</div>
</div>
</div>
<div class="specwrap">
<div class="spechdr">Specifications</div>
<div class="spectable">
<div class="specline"><span>Cooking Surface</span><b>28" diameter</b></div>
<div class="specline"><span>Max Temperature</span><b>900°F</b></div>
<div class="specline"><span>Weight</span><b>1,850 lbs</b></div>
<div class="specline"><span>Fuel Type</span><b>Hardwood</b></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdfbf6; color: #252222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdfbf6; color: #252222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #252222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6a5e5e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: 0.3px; background: #da532c; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: 0.3px; background: #fdfbf6; color: #252222;
border: 1px solid #da532c; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fdfbf6; color: #252222;
border: 1px solid #c7c5c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a5e5e; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d7f0e8; color: #252222;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Honey Pot Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Rational Display','Domaine Sans Text',Georgia,serif; background:#fdfbf6; color:#252222; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dedede;}
.logo{font-size:20px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.2px;}
.navlinks .active{color:#da532c;border-bottom:2px solid #da532c;padding-bottom:6px;}
.searchpill{background:#f7f7f2;border:1px solid #dedede;border-radius:999px;height:34px;width:170px;font-size:11px;color:#6a5e5e;padding:0 16px;line-height:34px;}
.hero{padding:22px 36px;display:flex;flex-direction:column;align-items:center;text-align:center;height:250px;justify-content:center;}
.hero h1{font-size:38px;font-weight:700;line-height:1.15;margin:0 0 10px;}
.hero p{font-size:15px;color:#231f20;margin:0 0 14px;max-width:440px;}
.hero-visual{width:200px;height:100px;background:linear-gradient(135deg,#f0b8a0,#da532c);border-radius:12px;margin-bottom:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;}
.btn{display:inline-block;background:#da532c;color:#fff;font-weight:600;font-size:15px;padding:12px 26px;border-radius:999px;}
.section{padding:6px 36px;}
.section h2{font-size:18px;font-weight:600;margin:0 0 12px;text-align:center;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{background:#fff;border-radius:12px;overflow:hidden;}
.imgbox{height:66px;background:#f7f7f2;display:flex;align-items:center;justify-content:center;color:#9e9494;font-size:9px;text-align:center;}
.cardbody{padding:10px;}
.ingredient{display:inline-block;background:#d7f0e8;color:#252222;font-family:'Syke Mono','Courier New',monospace;font-size:9px;text-transform:uppercase;padding:2px 8px;border-radius:999px;margin-bottom:6px;}
.pname{font-size:14px;font-weight:600;margin:0 0 2px;}
.price{font-family:'Syke Mono','Courier New',monospace;font-size:13px;color:#da532c;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#252222;color:#fdfbf6;padding:12px 36px;display:flex;justify-content:space-between;font-size:11px;}
</style>
<div class="nav">
<div class="logo">Honey Pot</div>
<div class="navlinks"><span class="active">Feminine Wash</span><span>Wipes</span><span>Bundles</span><span>Ingredients</span></div>
<div class="searchpill">Search products…</div>
</div>
<div class="hero">
<div class="hero-visual">PRODUCT PHOTOGRAPHY</div>
<h1>Plant-derived care,<br>honestly made.</h1>
<p>Feminine wellness formulated without the stuff that doesn't belong there.</p>
<div class="btn">Shop Best Sellers</div>
</div>
<div class="section">
<h2>Shop by Ingredient</h2>
<div class="grid">
<div class="card"><div class="imgbox">Wash Bottle</div><div class="cardbody"><div class="ingredient">Aloe Vera</div><div class="pname">Sensitive Wash</div><div class="price">$13.99</div></div></div>
<div class="card"><div class="imgbox">Wipes Pack</div><div class="cardbody"><div class="ingredient">Chamomile</div><div class="pname">Daily Wipes</div><div class="price">$7.99</div></div></div>
<div class="card"><div class="imgbox">Cooling Gel</div><div class="cardbody"><div class="ingredient">Mint Leaf</div><div class="pname">Cooling Relief Gel</div><div class="price">$15.99</div></div></div>
<div class="card"><div class="imgbox">Bundle</div><div class="cardbody"><div class="ingredient">Full Set</div><div class="pname">Complete Care Bundle</div><div class="price">$34.99</div></div></div>
</div>
</div>
<div class="footer"><span>© Honey Pot</span><span>Products · Support · Social</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0068ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0068ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b6fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0068ff; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0068ff; color: #f5f5f5;
border: 1px solid #277ffd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2980ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#E8ECF1; color:#1A1A1A; box-sizing:border-box;
font-family:"Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.app { width:960px; height:640px; display:flex; }
.side { width:300px; background:#FFFFFF; border-right:1px solid #E4E6EB; display:flex; flex-direction:column; }
.side .shead { padding:20px 20px 12px; }
.side .shead h1 { font-size:22px; font-weight:700; margin:0 0 12px; }
.search { background:#F4F5F7; border-radius:19px; height:34px; display:flex; align-items:center; padding:0 14px;
color:#9AA0AA; font-size:13px; }
.crow { display:flex; align-items:center; gap:10px; padding:11px 20px; }
.crow.active { background:#F4F5F7; }
.cavatar { width:40px; height:40px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
color:#fff; font-weight:700; font-size:13px; position:relative; }
.cavatar.a { background:linear-gradient(135deg,#4D9FFF,#0047B3); }
.cavatar.b { background:linear-gradient(135deg,#FF9F7B,#E23744); }
.cavatar.c { background:linear-gradient(135deg,#7B5CFF,#4D2EBF); }
.cavatar .dot { position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%;
background:#18A957; border:2px solid #fff; }
.cinfo h4 { font-size:14px; font-weight:600; margin:0 0 2px; }
.cinfo p { font-size:12px; color:#6B7280; margin:0; }
.thread-wrap { flex:1; display:flex; flex-direction:column; }
header { height:64px; background:#0068FF; display:flex; align-items:center; padding:0 22px; gap:12px; flex:none; }
header .back { color:#fff; font-size:20px; }
.havatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#4D9FFF,#0047B3);
display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px; }
.hwho .name { font-size:15px; font-weight:600; color:#fff; margin:0; }
.hwho .presence { font-size:11px; color:rgba(255,255,255,0.85); margin:1px 0 0; }
.hwho { flex:1; }
.hicons { display:flex; gap:20px; color:#fff; font-size:16px; }
.thread { flex:1; background:#E8ECF1; padding:18px 40px; overflow:hidden; }
.daypill { text-align:center; margin-bottom:14px; }
.daypill span { background:rgba(255,255,255,0.7); color:#6B7280; font-size:11px; font-weight:600;
padding:3px 12px; border-radius:999px; }
.row { display:flex; margin-bottom:6px; align-items:flex-end; gap:8px; }
.row.out { justify-content:flex-end; }
.rowavatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#FF9F7B,#E23744);
flex:none; }
.bubble { max-width:340px; padding:9px 13px; font-size:15px; line-height:1.4; }
.bubble.in { background:#FFFFFF; color:#1A1A1A; border-radius:16px 16px 16px 5px;
box-shadow:0 1px 2px rgba(0,0,0,0.06); }
.bubble.out { background:#DBEBFF; color:#14223A; border-radius:16px 16px 5px 16px; }
.bubble img.imgbub { width:100%; border-radius:14px; display:block; }
.seen { text-align:right; font-size:10px; color:#9AA0AA; margin:0 0 12px; }
.composer { flex:none; height:60px; background:#FFFFFF; border-top:1px solid #E4E6EB;
display:flex; align-items:center; padding:0 16px; gap:12px; }
.composer .ic { font-size:20px; color:#0068FF; }
.field { flex:1; background:#F4F5F7; border-radius:20px; height:38px; display:flex; align-items:center;
padding:0 16px; color:#9AA0AA; font-size:13px; }
.sendbtn { width:38px; height:38px; border-radius:50%; background:#0068FF; color:#fff;
display:flex; align-items:center; justify-content:center; font-size:15px; }
</style></head>
<body>
<div class="app">
<div class="side">
<div class="shead"><h1>Tin nhắn</h1><div style="font-size:11px;color:#9AA0AA;margin:-8px 0 8px;">Zalo (iOS)</div><div class="search">🔍 Tìm kiếm</div></div>
<div class="crow active">
<div class="cavatar a">MJ<span class="dot"></span></div>
<div class="cinfo"><h4>Minh Jae</h4><p>Chị ơi, mai họp mấy giờ?</p></div>
</div>
<div class="crow">
<div class="cavatar b">SY</div>
<div class="cinfo"><h4>Nhóm Sao Yến</h4><p>Đã gửi một hình ảnh</p></div>
</div>
<div class="crow">
<div class="cavatar c">HB</div>
<div class="cinfo"><h4>Hân Bảo</h4><p>Cảm ơn nhiều nha ❤️</p></div>
</div>
</div>
<div class="thread-wrap">
<header>
<span class="back">‹</span>
<div class="havatar">MJ</div>
<div class="hwho"><p class="name">Minh Jae</p><p class="presence">Đang hoạt động</p></div>
<div class="hicons"><span>📞</span><span>📹</span></div>
</header>
<div class="thread">
<div class="daypill"><span>Hôm nay</span></div>
<div class="row"><div class="rowavatar"></div><div class="bubble in">Chị ơi, mai họp lúc mấy giờ vậy ạ?</div></div>
<div class="row out"><div class="bubble out">9 giờ sáng nha em, phòng họp tầng 3</div></div>
<div class="row out"><div class="bubble out">Nhớ mang laptop theo nhé</div></div>
<div class="seen">Đã xem · 09:41</div>
<div class="row"><div class="rowavatar"></div><div class="bubble in">Dạ em nhớ rồi ạ, cảm ơn chị 🙏</div></div>
</div>
<div class="composer">
<span class="ic">😊</span>
<div class="field">Tin nhắn</div>
<span class="ic">📷</span>
<div class="sendbtn">➤</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #313131; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.3px; background: #f5f5f5; color: #6b6b6b;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#3d3d3d; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
}
*, *::before, *::after { box-sizing:border-box; }
.wrap{ position:relative; width:960px; height:640px; }
.nav{ height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#ffffff; border-bottom:1px solid #d4d4d4; }
.logo{ font-size:20px; font-weight:700; color:#313131; }
.navlinks{ display:flex; gap:26px; }
.navlinks span{ font-size:12px; color:#6b6b6b; }
.navlinks span.active{ color:#313131; font-weight:700; }
.cta{ font-size:12px; font-weight:700; color:#ffffff; background:#313131; padding:12px 20px; border-radius:8px; }
.hero{ height:250px; display:flex; align-items:center; padding:0 34px; gap:30px; }
.hero-text{ width:400px; }
.kicker{ font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#8c8c8c; margin-bottom:12px; }
.h1{ font-size:32px; font-weight:700; line-height:1.2; color:#313131; margin-bottom:12px; }
.sub{ font-size:14px; line-height:1.6; color:#3d3d3d; max-width:340px; margin-bottom:18px; }
.btn{ font-size:13px; font-weight:700; color:#ffffff; background:#313131; padding:14px 26px; border-radius:8px; width:fit-content; }
.quiz{ flex:1; height:210px; background:#f7f7f7; border-radius:8px; padding:20px 24px; position:relative; }
.quiz-title{ font-size:13px; font-weight:700; color:#313131; margin-bottom:14px; }
.quiz-bar{ height:4px; width:100%; background:#e0e0e0; border-radius:2px; margin-bottom:16px; overflow:hidden; }
.quiz-bar-fill{ width:60%; height:100%; background:#313131; }
.quiz-opt{ display:flex; align-items:center; justify-content:space-between; background:#ffffff; border:1px solid #d4d4d4; border-radius:8px; padding:12px 16px; margin-bottom:8px; font-size:13px; color:#313131; }
.quiz-opt .radio{ width:14px; height:14px; border-radius:50%; border:2px solid #d4d4d4; display:inline-block; }
.quiz-opt.sel .radio{ border-color:#313131; background:#313131; }
.section-title{ padding:14px 34px 8px; font-size:15px; font-weight:700; color:#313131; }
.grid{ display:flex; gap:16px; padding:0 34px; }
.card{ width:200px; background:#ffffff; border:1px solid #d4d4d4; border-radius:8px; padding:12px; }
.card-img{ width:100%; height:66px; border-radius:6px; margin-bottom:8px; }
.card-title{ font-size:13px; font-weight:700; color:#313131; margin-bottom:2px; }
.card-note{ font-size:10px; color:#8c8c8c; margin-bottom:8px; }
.row{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-size:12px; font-weight:700; color:#313131; }
.tag{ font-size:9px; font-weight:700; text-transform:uppercase; color:#2e7d32; }
.footer{ position:absolute; bottom:0; left:0; width:960px; height:52px; background:#f7f7f7; border-top:1px solid #d4d4d4; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.footer span{ font-size:11px; color:#8c8c8c; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Hers Women S 2</div>
<div class="navlinks">
<span>Skincare</span>
<span class="active">Hair Loss</span>
<span>Mental Health</span>
<span>Birth Control</span>
</div>
<div class="cta">Take the Quiz</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="kicker">Women's Telehealth</div>
<div class="h1">Clinical-calm, not clinic-cold.</div>
<div class="sub">A five-minute intake, a licensed provider, and treatment shipped to your door. No pastel branding required.</div>
<div class="btn">Start Your Visit</div>
</div>
<div class="quiz">
<div class="quiz-title">Question 3 of 5</div>
<div class="quiz-bar"><div class="quiz-bar-fill"></div></div>
<div class="quiz-opt sel"><span>Noticeable thinning at the part</span><span class="radio"></span></div>
<div class="quiz-opt"><span>Slight shedding, not concerning</span><span class="radio"></span></div>
</div>
</div>
<div class="section-title">Recommended For You</div>
<div class="grid">
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#313131,#8c8c8c);"></div>
<div class="card-title">Hair Growth Serum</div>
<div class="card-note">Minoxidil 2%</div>
<div class="row"><span class="price">$25/mo</span><span class="tag">Rx</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#8c8c8c,#3d3d3d);"></div>
<div class="card-title">Birth Control</div>
<div class="card-note">Delivered monthly</div>
<div class="row"><span class="price">$0–20/mo</span><span class="tag">Rx</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#d4d4d4,#8c8c8c);"></div>
<div class="card-title">Sleep Support</div>
<div class="card-note">Non-habit forming</div>
<div class="row"><span class="price">$25/mo</span><span class="tag">Non-Rx</span></div>
</div>
</div>
<div class="footer">
<span>© Hers</span>
<span>Licensed Providers · Privacy · Support</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #787878; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #C4842D; color: #FFFFFF;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #FFFFFF; color: #111111;
border: 1px solid #C4842D; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #111111;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787878; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #F5F5F4; color: #111111;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'DM Sans','Inter',sans-serif; color:#3D3D3D; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fff;border-bottom:1px solid #D8D8D8;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:18px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#111;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#3D3D3D;}
.hero{height:250px;background:#1A1A1A;display:flex;align-items:center;padding:0 32px;}
.h1{font-size:44px;font-weight:700;color:#fff;line-height:1.1;letter-spacing:-1px;margin:0 0 14px;max-width:440px;}
.ctarow{display:flex;gap:10px;}
.cta{background:#C4842D;color:#fff;font-size:15px;font-weight:600;padding:14px 26px;border-radius:4px;}
.cta.dark{background:#1A1A1A;border:1.5px solid #fff;}
.dimrow{display:flex;justify-content:space-between;margin:16px 32px 0;border-top:1px solid #EBEBEB;padding-top:10px;}
.dim{font-size:13px;font-weight:600;color:#787878;}
.dim b{color:#111;font-weight:600;font-size:15px;display:block;margin-top:2px;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:200px;border:1px solid #EBEBEB;border-radius:4px;padding:14px;}
.thumb{height:100px;background:#F5F5F4;margin-bottom:10px;}
.ptitle{font-size:16px;font-weight:600;color:#111;}
.pprice{font-size:24px;font-weight:700;color:#111;margin-top:6px;}
.avail{display:inline-block;margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;border:1px solid #C4842D;padding:4px 10px;border-radius:4px;color:#111;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#1A1A1A;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#A8A8A8;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Maverick Desk</div>
<div class="navlinks"><span>Desks</span><span>Frames</span><span>Accessories</span><span>Compare</span></div>
</div>
<div class="hero">
<div>
<div class="h1">Built like a machine. Configured like a desk.</div>
<div class="ctarow"><div class="cta">Build Your Desk</div><div class="cta dark">Compare Models</div></div>
</div>
</div>
<div class="dimrow">
<div class="dim">Surface Width<b>60 in</b></div>
<div class="dim">Height Range<b>25.5 – 51 in</b></div>
<div class="dim">Load Rating<b>310 lb</b></div>
<div class="dim">Warranty<b>10 Yr Frame</b></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ptitle">Foundry Steel Frame</div><div class="pprice">$549</div><div class="avail">In Stock</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Weld-Line Bamboo Top</div><div class="pprice">$219</div><div class="avail">Ships in 5 Days</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Cable Spine Management Tray</div><div class="pprice">$39</div><div class="avail">Ships Free</div></div>
</div>
<div class="footer"><span>© Maverick Desk Industrial Workspaces</span><span>Warranty · Spec Sheets · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #272626;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #272626;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #272626; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f14595; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #272626;
border: 1px solid #f14595; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #272626;
border: 1px solid #c9c9c9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f14595; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Nunito Sans','Noto Sans TC',sans-serif; color:#272626; }
*{box-sizing:border-box;}
.nav{height:56px;border-bottom:1px solid #ebebeb;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:19px;font-weight:700;color:#272626;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;color:#272626;}
.hero{height:220px;background:#1c1c1c;display:flex;align-items:center;padding:0 30px;position:relative;}
.hero:before{content:'';position:absolute;left:520px;top:35px;width:340px;height:150px;background:linear-gradient(135deg,#323232,#1c1c1c);border-radius:8px;border:2px solid #f14595;}
.hero:after{content:'';position:absolute;left:600px;top:80px;width:180px;height:14px;background:#f14595;border-radius:2px;}
.herotext{max-width:460px;}
.herotext h1{font-size:32px;font-weight:700;color:#fff;margin:0 0 10px;}
.herotext h1 span{color:#f14595;}
.herotext p{font-size:14px;color:#e2dede;margin:0 0 16px;line-height:1.5;}
.btn{display:inline-block;background:#f14595;color:#fff;font-size:14px;font-weight:700;letter-spacing:.4px;padding:12px 24px;border-radius:4px;}
.chiprow{display:flex;gap:8px;padding:16px 30px 0;}
.chip{background:#f7f7f7;border-radius:9999px;padding:6px 14px;font-size:12px;color:#4f4f4f;}
.chip.active{background:#f14595;color:#fff;}
.secTitle{position:relative;padding:16px 30px 12px 40px;font-size:22px;font-weight:700;color:#272626;}
.secTitle:before{content:'';position:absolute;left:30px;top:16px;bottom:16px;width:4px;background:#f14595;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:200px;background:#f4f4f4;border:1px solid #ebebeb;border-radius:8px;padding:12px;position:relative;}
.badge{position:absolute;top:20px;left:20px;background:#f14595;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;text-transform:uppercase;}
.badgenavy{position:absolute;top:20px;right:20px;background:#003399;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;text-transform:uppercase;}
.thumb{height:90px;background:#f0eaea;border-radius:8px;margin-bottom:8px;}
.ctitle{font-size:16px;font-weight:600;color:#272626;margin-bottom:4px;}
.cprice{font-size:18px;font-weight:600;color:#272626;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Silicon Power</div>
<div class="navlinks"><div>Storage</div><div>Flash</div><div>DRAM</div><div>Power Banks</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Storage built for <span>speed.</span></h1>
<p>SSDs, flash drives, and memory built for reliability at scale — engineered in Taiwan.</p>
<div class="btn">Where to Buy</div>
</div>
</div>
<div class="chiprow">
<div class="chip active">All</div>
<div class="chip">SSD</div>
<div class="chip">USB</div>
<div class="chip">microSD</div>
<div class="chip">DRAM</div>
</div>
<div class="secTitle">Storage Solutions</div>
<div class="grid">
<div class="card"><div class="badge">Hot</div><div class="thumb"></div><div class="ctitle">XS70 Portable SSD</div><div class="cprice">$89.99</div></div>
<div class="card"><div class="badgenavy">PCIe Gen4</div><div class="thumb"></div><div class="ctitle">US75 NVMe SSD 1TB</div><div class="cprice">$74.99</div></div>
<div class="card"><div class="badge">Award</div><div class="thumb"></div><div class="ctitle">Blaze B32 USB 3.2</div><div class="cprice">$19.99</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Superior Pro microSD</div><div class="cprice">$24.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ff6600; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #ff6600;
border: 1px solid #ff6600; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff6600; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background:#fff; color:#2b2b2b; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #d9d9d9;}
.logo{font-size:20px;font-weight:700;color:#1a1a1a;letter-spacing:1px;text-transform:uppercase;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:#1a1a1a;}
.hero{height:240px;display:flex;background:#f5f5f5;}
.herotext{width:48%;display:flex;flex-direction:column;justify-content:center;padding:0 32px;}
.herotext .spec{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#ff6600;margin-bottom:10px;}
.herotext h1{font-size:30px;font-weight:700;color:#1a1a1a;margin:0 0 10px;letter-spacing:-.3px;}
.herotext p{font-size:14px;color:#2b2b2b;margin:0 0 16px;max-width:300px;}
.herocta{display:inline-block;background:#ff6600;color:#fff;font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:12px 24px;border-radius:4px;width:fit-content;}
.heroimg{width:52%;background:radial-gradient(circle at 40% 60%, #ff6600, #1a1a1a 70%);position:relative;overflow:hidden;}
.heroimg:before{content:'';position:absolute;left:60px;top:30px;width:16px;height:120px;background:#2b2b2b;border-radius:8px;}
.heroimg:after{content:'';position:absolute;left:52px;top:20px;width:32px;height:20px;border-radius:9999px;background:#ff6600;}
.spectable{display:flex;gap:1px;background:#d9d9d9;margin:14px 30px 0;}
.speccell{flex:1;background:#f0f0f0;text-align:center;padding:8px;}
.speclabel{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#666;}
.specvalue{font-size:14px;color:#1a1a1a;margin-top:2px;}
.grid{display:flex;gap:12px;padding:14px 30px 0;}
.card{width:150px;border:1px solid #e6e6e6;border-radius:4px;padding:8px;}
.thumb{height:100px;border-radius:4px;margin-bottom:6px;background:#f5f5f5;}
.ptitle{font-size:13px;font-weight:600;color:#1a1a1a;line-height:1.3;height:32px;overflow:hidden;text-transform:uppercase;letter-spacing:.3px;}
.pprice{font-size:14px;font-weight:700;color:#ff6600;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;color:#666;border-top:1px solid #d9d9d9;}
.footer span{margin-left:14px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Jetboil</div>
<div class="navlinks"><div>Cooking Systems</div><div>Fuel</div><div>Accessories</div><div>Compare</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="spec">Boils 500ml in 100 Seconds</div>
<h1>Precision-Engineered for Altitude</h1>
<p>Backcountry cooking systems built like instruments, not camping gear.</p>
<div class="herocta">Shop Now</div>
</div>
<div class="heroimg"></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Boil Time</div><div class="specvalue">100 sec</div></div>
<div class="speccell"><div class="speclabel">Weight</div><div class="specvalue">14.6 oz</div></div>
<div class="speccell"><div class="speclabel">Fuel Efficiency</div><div class="specvalue">+45%</div></div>
<div class="speccell"><div class="speclabel">Packed Size</div><div class="specvalue">4.1 x 6.5"</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff6600,#1a1a1a)"></div><div class="ptitle">Flash Cooking System</div><div class="pprice">$114.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a1a1a,#ff6600)"></div><div class="ptitle">MiniMo Personal Stove</div><div class="pprice">$149.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2b2b2b,#ff6600)"></div><div class="ptitle">100g Fuel Canister</div><div class="pprice">$6.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff6600,#2b2b2b)"></div><div class="ptitle">Sumo Group Cooking System</div><div class="pprice">$179.95</div></div>
</div>
<div class="footer"><span>© Engineered for Altitude</span><span>Warranty<span> Compare Models</span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafae1; color: #1a1918;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafae1; color: #1a1918;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #1a1918; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #43454b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.8px; background: #003388; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.8px; background: transparent; color: #003388;
border: 1px solid #003388; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1918;
border: 1px solid #c2c2af; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #43454b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.8px; background: #c49800; color: #1a1918;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafae1; color:#1a1918; box-sizing:border-box;
font-family:Georgia, 'Times New Roman', serif; }
* { box-sizing:border-box; }
nav { height:66px; background:#fafae1; display:flex; align-items:center; justify-content:space-between;
padding:0 34px; border-bottom:1px solid #e8e8eb; }
.brand { font-size:20px; font-weight:400; letter-spacing:0.5px; margin:0; color:#003388; font-family:Georgia, serif; }
.navlinks { display:flex; gap:24px; font-family:'Arial Narrow', Arial, sans-serif; }
.navlinks span { font-size:12px; letter-spacing:0.8px; text-transform:uppercase; color:#43454b; }
.icons { font-family:'Arial Narrow', Arial, sans-serif; font-size:12px; color:#003388; }
main { display:flex; height:574px; }
.stage { width:340px; background:#e8e8eb; display:flex; align-items:center; justify-content:center; position:relative; }
.season-badge { position:absolute; top:22px; left:22px; background:#c49800; color:#1a1918; font-size:10px;
font-weight:700; letter-spacing:0.8px; text-transform:uppercase; padding:5px 10px; font-family:'Arial Narrow',Arial,sans-serif; }
.lantern { width:80px; height:170px; position:relative; }
.lantern-top { width:40px; height:16px; background:#003388; margin:0 auto; border-radius:4px 4px 0 0; }
.lantern-cage { width:80px; height:110px; border:3px solid #003388; border-radius:6px; margin-top:0; position:relative;
background:linear-gradient(180deg,#fff9df,#f0b849 120%); }
.lantern-cage::before, .lantern-cage::after { content:''; position:absolute; top:0; bottom:0; width:3px; background:#003388; }
.lantern-cage::before { left:24px; } .lantern-cage::after { right:24px; }
.lantern-base { width:60px; height:20px; background:#757c71; margin:0 auto; border-radius:0 0 6px 6px; }
.info { flex:1; padding:30px 34px; display:flex; flex-direction:column; gap:12px; }
.cat-label { font-family:'Arial Narrow', Arial, sans-serif; font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:#757c71; margin:0; }
h1 { font-size:27px; font-weight:400; margin:0; letter-spacing:0.2px; line-height:1.25; }
.sub { font-size:14px; color:#2f2f2f; margin:0; line-height:1.5; max-width:440px; }
.price-row { display:flex; align-items:baseline; gap:10px; font-family:'Arial Narrow', Arial, sans-serif; }
.price { font-size:22px; font-weight:700; color:#003388; }
.badge { display:inline-flex; background:#fafae1; border:1px solid #c49800; color:#c49800; font-size:11px;
font-weight:700; letter-spacing:0.8px; text-transform:uppercase; padding:4px 10px; width:fit-content;
font-family:'Arial Narrow', Arial, sans-serif; }
.actions { display:flex; gap:12px; margin-top:8px; font-family:'Arial Narrow', Arial, sans-serif; }
.btn-primary { background:#003388; color:#fff; padding:14px 30px; height:46px; display:flex; align-items:center;
font-size:13px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; }
.btn-secondary { background:transparent; border:1px solid #003388; color:#003388; padding:13px 26px; height:46px;
display:flex; align-items:center; font-size:13px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; }
.footer-note { margin-top:auto; border-top:1px solid #e8e8eb; padding-top:12px; font-size:12px; color:#43454b;
font-family:'Arial Narrow', Arial, sans-serif; }
</style></head>
<body>
<nav>
<p class="brand">Authentic Provence</p>
<div class="navlinks"><span>Garden</span><span>Lighting</span><span>Table</span><span>Journal</span></div>
<span class="icons">Panier (0)</span>
</nav>
<main>
<div class="stage">
<span class="season-badge">Harvest Edition</span>
<div class="lantern"><div class="lantern-top"></div><div class="lantern-cage"></div><div class="lantern-base"></div></div>
</div>
<div class="info">
<p class="cat-label">Outdoor Lighting</p>
<h1>Lumière de Village Hanging Lantern</h1>
<p class="sub">Hand-finished iron lantern with amber glass, wired for warm outdoor evenings on the terrace.</p>
<span class="badge">Limited Harvest Run</span>
<div class="price-row"><span class="price">$128.00</span></div>
<div class="actions">
<div class="btn-primary">Add to Panier</div>
<div class="btn-secondary">View the Collection</div>
</div>
<div class="footer-note">Ships direct from our atelier in Provence — allow 2–3 weeks for delivery.</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #1d1d1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.5px; background: #272d45; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #272d45;
border: 1px solid #272d45; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1d1d1d;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f65934; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Founders Grotesk','Helvetica Neue',Arial,sans-serif; color:#272d45; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;background:#1d1d1d;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:18px;font-weight:600;color:#fff;letter-spacing:0.2px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:0.3px;color:#fff;}
.hero{height:230px;background:#f4f4f6;display:flex;align-items:center;padding:0 32px;gap:30px;}
.herotxt{max-width:390px;}
.h1{font-size:32px;font-weight:600;letter-spacing:-0.5px;margin:0 0 10px;line-height:1.15;color:#272d45;}
.sub{font-size:16px;color:#272d45;line-height:1.5;margin:0 0 18px;}
.btn{display:inline-block;background:#272d45;color:#fff;font-size:15px;font-weight:500;letter-spacing:0.5px;padding:14px 28px;border-radius:8px;}
.garmentimg{width:170px;height:170px;border-radius:8px;background:linear-gradient(155deg,#676986,#272d45);position:relative;}
.guarantee{position:absolute;bottom:-10px;left:-10px;background:#ffcf2a;color:#1d1d1d;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:6px 16px;border-radius:9999px;}
.grid{display:flex;gap:16px;padding:24px 32px 0;}
.card{width:210px;background:#fff;border-radius:8px;}
.thumb{height:130px;border-radius:8px;background:linear-gradient(135deg,#f65934,#272d45);position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#f65934;color:#fff;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:4px 10px;border-radius:9999px;}
.ctitle{font-size:16px;font-weight:500;margin:10px 0 4px;}
.cprice{font-size:16px;font-weight:400;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#1d1d1d;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#e5e5eb;font-size:11px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Modibodi</div>
<div class="navlinks"><span>Period Wear</span><span>Incontinence</span><span>Swim</span></div>
</div>
<div class="hero">
<div class="herotxt">
<div class="h1">Function first. No euphemisms.</div>
<p class="sub">Body-positive performance wear with a Leak-Free Guarantee you can actually trust.</p>
<div class="btn">Shop Now</div>
</div>
<div class="garmentimg"><span class="guarantee">Leak-Free</span></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge">Best Seller</span></div><div class="ctitle">Classic Bikini Brief</div><div class="cprice">$26</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Overnight Boyshort</div><div class="cprice">$29</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Active Sport Short</div><div class="cprice">$32</div></div>
</div>
<div class="footer"><span>Leak-Free Guarantee on every pair</span><span>© Modibodi</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f6f0; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f6f0; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; font-weight: 400; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.06em; margin: 0; color: #677279; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0.07em; background: #625d4c; color: #f8f6f0;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0.07em; background: transparent; color: #625d4c;
border: 1px solid #625d4c; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f6f0; color: #121212;
border: 1px solid #bebdb8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #677279; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.25; background: #dad5c5; color: #423e31;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f6f0; font-family:'General Sans',Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-family:Georgia,serif;font-size:22px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.hero{height:250px;display:flex;background:#e6e3d8;}
.heroImg{width:44%;height:250px;background:linear-gradient(160deg,#dad5c5,#092933);}
.heroText{width:56%;display:flex;flex-direction:column;justify-content:center;padding:0 36px;}
.heroText h1{font-family:Georgia,serif;font-size:40px;font-weight:400;letter-spacing:-.4px;margin:0 0 12px;line-height:1.1;}
.heroText p{font-size:14px;color:#3a3a3a;max-width:340px;margin:0 0 16px;}
.btn{display:inline-block;background:#625d4c;color:#f8f6f0;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;padding:14px 26px;width:fit-content;}
.filters{display:flex;gap:8px;padding:16px 32px;}
.chip{border:1px solid #dedede;border-radius:9999px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:7px 16px;}
.chip.active{background:#625d4c;color:#f8f6f0;border-color:#625d4c;}
.grid{display:flex;gap:16px;padding:6px 32px 0;}
.card{width:196px;}
.thumb{height:150px;aspect-ratio:3/4;}
.artist{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:#677279;margin:10px 0 2px;}
.title{font-family:Georgia,serif;font-size:17px;margin:0 0 2px;}
.medium{font-size:12px;color:#a19a83;margin:0 0 6px;}
.price{font-size:14px;font-weight:500;color:#625d4c;margin:0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Ugallery</div>
<div class="navlinks"><span>Browse</span><span>Artists</span><span>Collections</span><span>Gifts</span></div>
</div>
<div class="hero">
<div class="heroImg"></div>
<div class="heroText">
<h1>Original art, curated for collectors.</h1>
<p>Discover paintings from emerging and established artists — no prints, no reproductions.</p>
<div class="btn">Browse Artwork</div>
</div>
</div>
<div class="filters">
<div class="chip active">All Mediums</div><div class="chip">Oil</div><div class="chip">Watercolor</div><div class="chip">Acrylic</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#dad5c5,#625d4c)"></div><div class="artist">Marlena Vos</div><div class="title">Quiet Harbor</div><div class="medium">Oil on canvas, 24x30in</div><div class="price">$1,850</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#092933,#e6e3d8)"></div><div class="artist">Theo Marchetti</div><div class="title">Winter Field</div><div class="medium">Watercolor, 18x24in</div><div class="price">$980</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#a19a83,#092933)"></div><div class="artist">Renna Okoye</div><div class="title">Coastal Study No. 3</div><div class="medium">Acrylic, 30x40in</div><div class="price">$2,400</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00dc87; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00dc87; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096c46; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #002d37; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00dc87; color: #002d37;
border: 1px solid #002d37; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00dc87; color: #111111;
border: 1px solid #03bc74; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096c46; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00c07a; color: #002d37;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#191919; box-sizing:border-box;
font-family:"Clear Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.app { width:960px; height:640px; display:flex; overflow:hidden; }
.side { width:280px; flex:0 0 280px; background:#002d37; color:#ffffff; display:flex; flex-direction:column;
padding:22px 18px; }
.side .brand { font-size:20px; font-weight:700; margin-bottom:22px; letter-spacing:-0.2px; }
.side .navitem { height:40px; display:flex; align-items:center; padding:0 12px; border-radius:4px;
font-size:15px; font-weight:500; color:#bcd6da; margin-bottom:4px; }
.side .navitem.act { background:rgba(255,255,255,0.10); color:#ffffff; }
.side .doclabel { font-size:12px; color:#8fb0b5; margin:18px 0 8px; text-transform:uppercase; letter-spacing:0.6px; }
.doc { height:44px; border:1px solid rgba(255,255,255,0.14); border-radius:4px; display:flex;
align-items:center; padding:0 12px; gap:8px; margin-bottom:8px; }
.doc .icon { width:16px; height:20px; border:1.5px solid #00dc87; border-radius:2px; flex:0 0 16px; }
.doc .name { font-size:13px; color:#e8f4f2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side .grow { flex:1; }
.side .newbtn { height:44px; background:#caff00; color:#000000; border:none; border-radius:4px; font-size:16px;
font-weight:500; display:flex; align-items:center; justify-content:center; }
.main { flex:1; display:flex; flex-direction:column; padding:22px 34px; overflow:hidden; }
.topbar { flex:0 0 40px; display:flex; align-items:center; justify-content:space-between; }
.topbar .fname { font-size:16px; font-weight:500; color:#191919; }
.topbar .status { font-size:13px; font-weight:500; color:#007aff; border:1.5px solid #007aff; border-radius:4px;
padding:4px 10px; }
.preview { flex:1; margin-top:14px; background:#ffffff; border:1.5px solid #002d37; border-radius:4px;
padding:28px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.preview h2 { font-size:56px; font-weight:700; margin:0 0 6px; color:#002d37; letter-spacing:-0.5px; }
.line { height:10px; background:#e6e6e6; border-radius:2px; }
.line.w1 { width:92%; } .line.w2 { width:78%; } .line.w3 { width:85%; } .line.w4 { width:60%; }
.sigbox { margin-top:auto; align-self:flex-end; width:280px; height:96px; border:1.5px dashed #4b4b4b;
border-radius:4px; position:relative; display:flex; align-items:flex-end; padding:10px 14px; }
.sigbox .siglabel { position:absolute; top:8px; left:14px; font-size:12px; color:#4b4b4b; }
.sigscript { width:170px; height:28px; border-bottom:2px solid #002d37; position:relative; }
.sigscript::after { content:"Sam Carter"; position:absolute; left:0; bottom:4px; font-size:20px; font-style:italic;
color:#002d37; font-weight:500; }
.actions { flex:0 0 66px; display:flex; align-items:center; gap:12px; margin-top:16px; }
.btn-outline { height:38px; padding:0 18px; border:1.5px solid #002d37; color:#002d37; background:transparent;
border-radius:4px; font-size:16px; font-weight:500; display:flex; align-items:center; }
.btn-solid { height:38px; padding:0 18px; border:1.5px solid #002d37; background:#002d37; color:#ffffff;
border-radius:4px; font-size:16px; font-weight:500; display:flex; align-items:center; }
.grow2 { flex:1; }
.btn-hero { height:53px; padding:0 30px; background:#caff00; color:#000000; border:none; border-radius:4px;
font-size:22px; font-weight:500; display:flex; align-items:center; }
</style></head>
<body>
<div class="app">
<div class="side">
<div class="brand">Kdan Mobile</div>
<div class="navitem act">Documents</div>
<div class="navitem">Templates</div>
<div class="navitem">Signatures</div>
<div class="navitem">Settings</div>
<div class="doclabel">Recent</div>
<div class="doc"><div class="icon"></div><div class="name">Service_Agreement.pdf</div></div>
<div class="doc"><div class="icon"></div><div class="name">NDA_Draft_v2.pdf</div></div>
<div class="doc"><div class="icon"></div><div class="name">Vendor_Contract.pdf</div></div>
<div class="grow"></div>
<button class="newbtn">New Document</button>
</div>
<div class="main">
<div class="topbar">
<div class="fname">Service_Agreement.pdf</div>
<div class="status">Awaiting signature</div>
</div>
<div class="preview">
<h2>Service Agreement</h2>
<div class="line w1"></div>
<div class="line w2"></div>
<div class="line w3"></div>
<div class="line w4"></div>
<div class="sigbox">
<div class="siglabel">Sign here</div>
<div class="sigscript"></div>
</div>
</div>
<div class="actions">
<button class="btn-outline">Save Draft</button>
<button class="btn-solid">Request Signature</button>
<div class="grow2"></div>
<button class="btn-hero">Send Now</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0066b4;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0066b4;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #0066b4; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #003366; color: #ffffff;
border: none; border-radius: 2px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #003366;
border: 1px solid #003366; border-radius: 2px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #bfd9ec; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #a90f14; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px;
background:#003366; }
.brand { font-family:'Open Sans Condensed',sans-serif; font-size:17px; font-weight:700; color:#fff;
letter-spacing:0.02em; text-transform:uppercase; }
.navlinks { display:flex; gap:20px; font-size:12px; color:#cddcea; font-weight:600; text-transform:uppercase; }
.search { background:#ffffff; font-size:11.5px; color:#888888; padding:6px 12px; border-radius:2px; width:200px; }
.breadcrumb { padding:8px 30px; font-size:10.5px; color:#444444; border-bottom:1px solid #eeeeee;
font-family:'Open Sans Condensed',sans-serif; }
main { display:flex; height:552px; }
.gallery { width:330px; background:#f5f7f9; position:relative; display:flex; align-items:center; justify-content:center; }
.valve { width:150px; height:190px; background:#313131; border-radius:6px; position:relative;
box-shadow:0 14px 28px rgba(0,0,0,0.2); }
.valve::before { content:''; position:absolute; top:-24px; left:50%; transform:translateX(-50%);
width:70px; height:30px; background:#003366; border-radius:4px; }
.valve .stripe { position:absolute; top:20px; left:0; right:0; height:10px; background:#a90f14; }
.badge-instock { position:absolute; top:16px; left:16px; background:#a90f14; color:#fff; font-size:9.5px;
font-weight:700; padding:4px 10px; text-transform:uppercase; }
.info { flex:1; padding:22px 30px; display:flex; flex-direction:column; gap:8px; }
.partno { font-family:'Open Sans Condensed',sans-serif; font-size:11px; color:#444444; font-weight:700; }
h1 { font-size:19px; font-weight:700; margin:0; line-height:1.3; }
.price-row { display:flex; align-items:baseline; gap:10px; padding:8px 0; border-top:1px solid #eeeeee;
border-bottom:1px solid #eeeeee; }
.price { font-size:20px; font-weight:700; color:#003366; }
.spec-table { font-size:11.5px; border-collapse:collapse; width:100%; }
.spec-table td { padding:4px 0; border-bottom:1px solid #eeeeee; }
.spec-table td.k { color:#444444; width:150px;
font-family:'Open Sans Condensed',sans-serif; text-transform:uppercase; font-size:10.5px; }
.spec-table td.v { font-weight:700; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#003366; color:#fff; border:none; border-radius:2px; padding:11px 18px;
font-size:13px; font-weight:700; }
.btn-outline { border:1.5px solid #a90f14; color:#a90f14; background:#fff; border-radius:2px; padding:9.5px 16px;
font-size:12px; font-weight:700; white-space:nowrap; }
.stock { font-size:11px; color:#2d7a3a; font-weight:700; }
</style></head>
<body>
<nav>
<div class="brand">Air And Hydraulic Equipment</div>
<div class="navlinks"><span>Pneumatics</span><span>Hydraulics</span><span>Fittings</span><span>Get Quote</span></div>
<div class="search">Search part #...</div>
</nav>
<div class="breadcrumb">HOME / HYDRAULIC / DIRECTIONAL VALVES / DCV-350-NPT</div>
<main>
<div class="gallery">
<span class="badge-instock">In Stock</span>
<div class="valve"><div class="stripe"></div></div>
</div>
<div class="info">
<span class="partno">PART NO. DCV-350-NPT-24V</span>
<h1>4-Way Directional Control Valve, 3000 PSI</h1>
<div class="price-row"><span class="price">$284.50</span></div>
<table class="spec-table">
<tr><td class="k">Max Pressure</td><td class="v">3000 PSI</td></tr>
<tr><td class="k">Port Size</td><td class="v">3/4" NPT</td></tr>
<tr><td class="k">Coil Voltage</td><td class="v">24V DC</td></tr>
<tr><td class="k">Flow Rate</td><td class="v">40 GPM</td></tr>
</table>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">Request Quote</button>
</div>
<span class="stock">✓ 214 units in warehouse — ships today</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c2126;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c2126;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -0.25px; margin: 0; color: #1c2126; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #5a6470; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #e05c1a; color: #ffffff;
border: none; border-radius: 3px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #1c2126;
border: 1px solid #e05c1a; border-radius: 3px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1c2126;
border: 1px solid #c6c8c9; border-radius: 3px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a6470; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.8px; background: #2d7d45; color: #ffffff;
border-radius: 3px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Roboto','Helvetica Neue',Arial,sans-serif; color:#2e363e; }
*{box-sizing:border-box;}
.utility{height:28px;background:#111518;color:#5a6470;font-size:11px;display:flex;align-items:center;padding:0 32px;justify-content:flex-end;gap:16px;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#1c2126;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.search{width:300px;height:32px;background:#fff;border-radius:2px;display:flex;align-items:center;padding:0 12px;font-size:12px;color:#5a6470;}
.catstrip{display:flex;gap:0;background:#f5f4f2;border-bottom:1px solid #d0d5da;padding:0 32px;}
.cat{font-size:13px;font-weight:500;padding:10px 16px;}
.cat.on{border-bottom:2px solid #e05c1a;}
.hero{height:130px;background:#1c2126;display:flex;align-items:center;padding:0 32px;}
.h1{font-family:'Roboto Condensed','Arial Narrow',sans-serif;font-size:26px;font-weight:700;color:#fff;letter-spacing:-0.25px;}
.sub{font-size:13px;color:#d0d5da;margin-top:4px;}
.section{padding:16px 32px 0;}
.grid{display:flex;gap:14px;}
.card{width:150px;border:1px solid #d0d5da;border-radius:3px;padding:10px;}
.partno{font-family:'Roboto Mono',monospace;font-size:11px;color:#5a6470;margin-bottom:4px;}
.thumb{height:76px;background:#edecea;border-radius:2px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;margin-bottom:4px;}
.pprice{font-family:'Roboto Condensed',sans-serif;font-size:18px;font-weight:700;color:#e05c1a;}
.stock{display:inline-block;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#fff;background:#2d7d45;padding:2px 6px;border-radius:2px;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#111518;border-top:3px solid #e05c1a;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;letter-spacing:0.5px;text-transform:uppercase;color:#5a6470;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="utility"><span>1-800-555-BOLT</span><span>My Account</span></div>
<div class="nav">
<div class="logo">Tanner Bolt</div>
<div class="search">Search by part number...</div>
</div>
<div class="catstrip"><div class="cat on">Bolts</div><div class="cat">Nuts</div><div class="cat">Washers</div><div class="cat">Threaded Rod</div><div class="cat">Anchors</div></div>
<div class="hero">
<div><div class="h1">Fasteners, Sourced Right The First Time.</div><div class="sub">Grade-5 hex bolts, lock nuts, and threaded rod sold by the foot.</div></div>
</div>
<div class="section">
<div class="grid">
<div class="card"><div class="partno">HB-3810-M8</div><div class="thumb" style="background:linear-gradient(150deg,#e05c1a,#edecea);"></div><div class="pname">Grade-5 Hex Bolt M8x40</div><div class="pprice">$0.42</div><div class="stock">In Stock</div></div>
<div class="card"><div class="partno">LN-2205-M10</div><div class="thumb" style="background:linear-gradient(150deg,#2a4f72,#edecea);"></div><div class="pname">Nylon Insert Lock Nut M10</div><div class="pprice">$0.18</div><div class="stock">In Stock</div></div>
<div class="card"><div class="partno">TR-9012-3FT</div><div class="thumb" style="background:linear-gradient(150deg,#5a6470,#edecea);"></div><div class="pname">Threaded Rod 3/8" (per ft)</div><div class="pprice">$1.10</div><div class="stock" style="background:#c98a00;">Low Stock</div></div>
<div class="card"><div class="partno">WA-1140-M6</div><div class="thumb" style="background:linear-gradient(150deg,#e05c1a,#2a4f72);"></div><div class="pname">Flat Washer M6, 100-Pack</div><div class="pprice">$6.75</div><div class="stock">In Stock</div></div>
</div>
</div>
<div class="footer"><span>© Industrial Fastener Supply</span><span>Bulk Pricing · Request Quote</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0A0A0A; color: #FFFFFF;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0A0A0A; color: #FFFFFF;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: #FFFFFF; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9A9A9A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; background: #FF2D20; color: #FFFFFF;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; background: transparent; color: #FFFFFF;
border: 1px solid #FF2D20; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #141414; color: #FFFFFF;
border: 1px solid #474747; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9A9A9A; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #141414; color: #FF2D20;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A0A0A; color:#FFFFFF; box-sizing:border-box;
font-family:'Arial Narrow', 'Barlow', system-ui, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.cond { font-stretch:condensed; letter-spacing:-1px; text-transform:uppercase; font-weight:800; }
nav { flex:0 0 auto; height:68px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; border-bottom:1px solid #2A2A2A; }
.brand { font-size:20px; font-weight:800; margin:0; letter-spacing:1px; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; letter-spacing:0.5px; }
.cta-mini { background:#FF2D20; color:#fff; padding:8px 18px; font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
main { flex:1 1 auto; display:flex; flex-direction:column; padding:0 30px; min-height:0; }
.hero { flex:1 1 auto; display:flex; align-items:center; min-height:0; position:relative; }
.hero::before { content:''; position:absolute; right:0; top:0; bottom:0; width:44%;
background:linear-gradient(150deg,#1c1c1c,#0a0a0a 70%); }
.hero::after { content:''; position:absolute; right:6%; top:20%; bottom:20%; width:30%; border-radius:12px;
background:radial-gradient(circle at 40% 30%, rgba(255,45,32,0.35), transparent 60%), #141414; border:1px solid #2A2A2A; }
.hero-copy { position:relative; z-index:1; max-width:440px; }
.hero-copy h1 { font-size:56px; line-height:0.95; margin:0 0 12px; }
.hero-copy p { font-size:14px; color:#E0E0E0; margin:0 0 16px; font-family:'Barlow', sans-serif; text-transform:none; letter-spacing:0; font-weight:400; }
.hero-copy button { background:#FF2D20; color:#fff; border:none; padding:14px 28px; font-size:15px; font-weight:700;
letter-spacing:1.5px; text-transform:uppercase; }
.stats { flex:0 0 auto; display:flex; gap:14px; padding:16px 0 18px; }
.stat { flex:1; background:#141414; border:1px solid #2A2A2A; border-radius:8px; padding:10px 16px; }
.stat .val { font-family:'Courier New', monospace; font-size:26px; font-weight:700; color:#22C55E; margin:0; }
.stat .lab { font-family:'Courier New', monospace; font-size:10px; letter-spacing:0.5px; text-transform:uppercase; color:#9A9A9A; margin:4px 0 0; }
.workout { flex:0 0 auto; display:flex; gap:12px; padding-bottom:16px; }
.wcard { flex:1; background:#1C1C1C; border:1px solid #2A2A2A; border-left:3px solid #FF2D20; border-radius:12px; padding:12px 14px; }
.wcard h3 { font-size:15px; margin:0 0 4px; font-family:'Barlow', sans-serif; text-transform:none; letter-spacing:0; font-weight:600; }
.wcard p { font-size:11px; color:#9A9A9A; margin:0; text-transform:uppercase; letter-spacing:0.3px; }
footer { flex:0 0 auto; height:52px; background:#141414; border-top:1px solid #2A2A2A; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; color:#9A9A9A; }
</style></head>
<body>
<nav>
<p class="brand cond">Apex</p>
<div class="navlinks cond"><span>Ride</span><span>Train</span><span>Compete</span></div>
<span class="cta-mini cond">Join Now</span>
</nav>
<main>
<div class="hero">
<div class="hero-copy">
<h1 class="cond">Ride now</h1>
<p>Studio-grade resistance, live leaderboard, and a cadence sensor that never misses a beat.</p>
<button class="cond">Add to Cart — $1,895</button>
</div>
</div>
<div class="stats">
<div class="stat"><p class="val">312W</p><p class="lab">Avg Output</p></div>
<div class="stat"><p class="val">1–24</p><p class="lab">Resistance Levels</p></div>
<div class="stat"><p class="val">18,204</p><p class="lab">Sessions Ridden</p></div>
</div>
<div class="workout">
<div class="wcard"><h3>Interval Sprint 30</h3><p>30 min · High Intensity</p></div>
<div class="wcard"><h3>Endurance Climb</h3><p>45 min · Moderate</p></div>
<div class="wcard"><h3>Recovery Flow</h3><p>20 min · Low Intensity</p></div>
</div>
</main>
<footer>
<span>© Apex</span>
<span>Financing Available · Free Delivery · 30-Day Trial</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbf8f0; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbf8f0; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7f7f7f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #e0634e; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fbf8f0; color: #222222;
border: 1px solid #e0634e; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fbf8f0; color: #222222;
border: 1px solid #c5c2bc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7f7f7f; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 10px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #83adc5; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#fbf8f0; color:#222; font-family:'GT America','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Perpetua Titling',Georgia,serif;font-size:20px;}
.navlinks{display:flex;gap:22px;font-size:13px;text-transform:uppercase;letter-spacing:.3px;color:#7f7f7f;}
.navlinks span.active{color:#222;}
.hero{padding:26px 32px 30px;text-align:center;}
.hero h1{font-family:'Perpetua Titling',Georgia,serif;font-size:44px;font-weight:400;margin:0 0 10px;}
.hero p{font-size:15px;color:#7f7f7f;margin:0 0 16px;}
.cta{background:#e0634e;color:#fff;font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:12px 26px;border-radius:8px;}
.section{padding:6px 32px 0;}
.grid{display:flex;gap:18px;}
.card{flex:1;background:#fff;border-radius:12px;overflow:hidden;}
.card .img{aspect-ratio:1/1;height:130px;position:relative;}
.d1{background:linear-gradient(135deg,#e0634e,#f0c0b8);}
.d2{background:linear-gradient(135deg,#83adc5,#b9d9eb);}
.d3{background:linear-gradient(135deg,#3d7562,#83adc5);}
.badge{position:absolute;top:8px;left:8px;font-family:'GT America Mono','Courier New',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.5px;padding:2px 6px;border-radius:4px;color:#fff;}
.bb1{background:#83adc5;}
.bb2{background:#3d7562;}
.info{padding:12px 14px;}
.card h3{font-size:16px;font-weight:600;margin:0 0 4px;}
.card .price{font-size:14px;color:#7f7f7f;}
</style>
<div class="nav">
<div class="logo">Dieux</div>
<div class="navlinks"><span class="active">Skincare</span><span>Ingredients</span><span>Journal</span><span>About</span></div>
</div>
<div class="hero">
<h1>A quiet rebellion against skincare noise.</h1>
<p>Clinical formulas, unadorned copy — precise as a lab notebook.</p>
<a class="cta">Shop Bestsellers</a>
</div>
<div class="section">
<div class="grid">
<div class="card"><div class="img d1"><span class="badge bb1">New</span></div><div class="info"><h3>Forget The Filler</h3><div class="price">$78</div></div></div>
<div class="card"><div class="img d2"></div><div class="info"><h3>Instant Angel</h3><div class="price">$32</div></div></div>
<div class="card"><div class="img d3"><span class="badge bb2">Retinol</span></div><div class="info"><h3>Deep Sleep Retinol</h3><div class="price">$68</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #5d5d5d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 2px; background: #9e703c; color: #f8f8f8;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 2px; background: transparent; color: #1c1c1c;
border: 1px solid #9e703c; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #f8f8f8; color: #1c1c1c;
border: 1px solid #c1c1c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5d5d5d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 1.5px; background: #9e703c; color: #f8f8f8;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#f8f8f8; color:#2a2f37; box-sizing:border-box; font-family:'brandon-grotesque','Futura',sans-serif; }
* { box-sizing:border-box; }
.announce { height:32px; background:#9e703c; color:#f8f8f8; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
display:flex; align-items:center; justify-content:center; }
nav { height:64px; background:#272d45; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:14px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#f8f8f8; margin:0; }
.navlinks { display:flex; gap:20px; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#f8f8f8; }
.navlinks span.active { color:#748cab; }
.main { display:flex; gap:0; height:392px; }
.gallery { width:440px; background:#efece6; display:flex; align-items:center; justify-content:center; position:relative; }
.lantern { width:60px; height:120px; position:relative; }
.lantern::before { content:''; position:absolute; top:0; left:6px; right:6px; height:70px; background:radial-gradient(circle,#ff763d,#f04600); border-radius:8px; }
.lantern::after { content:''; position:absolute; bottom:0; left:0; right:0; height:44px; background:#1c1c1c; border-radius:4px; }
.material-badge { position:absolute; top:20px; left:20px; background:#ddcfbe; color:#71491d; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:3px 8px; border:1px solid #d8c6b1; }
.info { flex:1; padding:28px 36px; display:flex; flex-direction:column; gap:8px; }
.info h1 { font-size:28px; font-weight:700; margin:0; letter-spacing:-0.2px; }
.price { font-size:18px; font-weight:700; margin-top:2px; }
.desc { font-size:14px; line-height:1.6; color:#2a2f37; max-width:400px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#9e703c; color:#f8f8f8; border:none; border-radius:4px; font-weight:700; font-size:13px; letter-spacing:2px; text-transform:uppercase; }
.btn-secondary { flex:1; height:48px; background:transparent; color:#1c1c1c; border:1.5px solid #1c1c1c; border-radius:4px; font-weight:700; font-size:13px; letter-spacing:2px; text-transform:uppercase; }
.feature-strip { display:flex; gap:32px; padding:16px 32px; border-top:1px solid #dedede; border-bottom:1px solid #dedede; }
.feature-strip div { flex:1; text-align:center; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#5d5d5d; }
</style></head>
<body>
<div class="announce">Free Shipping Over $75</div>
<nav>
<p class="brand">Barebones Living</p>
<div class="navlinks"><span class="active">Lighting</span><span>Cookware</span><span>Fire Tools</span><span>Camp Kitchen</span></div>
</nav>
<div class="main">
<div class="gallery">
<span class="material-badge">Steel & Brass</span>
<div class="lantern"></div>
</div>
<div class="info">
<h1>The Beacon Camp Lantern</h1>
<span class="price">$89.00</span>
<p class="desc">Solid brass and hand-blown glass, built to run for 12 hours on a single fuel fill. No plastic, no gimmicks — just a light that will outlast the tent it hangs in.</p>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Learn More</button>
</div>
</div>
</div>
<div class="feature-strip">
<div>Lifetime Guarantee</div>
<div>Free Shipping Over $75</div>
<div>American Designed</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #252525;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #252525;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #252525; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #da291c; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #f8f8f8; color: #252525;
border: 1px solid #da291c; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f8f8f8; color: #252525;
border: 1px solid #c3c3c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.27; letter-spacing: 0.2px; background: #da291c; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f8f8; font-family:'DINPro','Helvetica Neue',Arial,sans-serif; color:#252525; }
*{box-sizing:border-box;}
.nav{height:48px;background:#252525;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.logo{font-size:18px;font-weight:700;color:#fff;letter-spacing:0.5px;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;}
.navlinks span{color:#fff;}
.navlinks .active{color:#da291c;}
.hero{background:#252525;color:#fff;height:230px;display:flex;align-items:center;padding:0 30px;}
.herotext{width:50%;}
.h1{font-size:36px;font-weight:600;line-height:1.15;letter-spacing:-0.5px;margin:0 0 12px;}
.sub{font-size:15px;color:#bcbcbc;margin:0 0 18px;max-width:340px;}
.btn{display:inline-block;background:#da291c;color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:14px 28px;border-radius:8px;}
.heroimg{width:44%;height:170px;border-radius:12px;background:linear-gradient(135deg,#da291c,#252525 70%);}
.grid{display:flex;gap:14px;padding:20px 28px 0;}
.card{width:200px;background:#fff;border-radius:12px;overflow:hidden;position:relative;}
.thumb{height:110px;border-radius:12px 12px 0 0;}
.pbody{padding:10px 14px 14px;}
.title{font-size:16px;font-weight:600;}
.price{font-size:16px;font-weight:600;margin-top:4px;}
.badge{position:absolute;top:8px;left:8px;background:#da291c;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:2px 8px;border-radius:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#252525;color:#989898;font-size:12px;display:flex;align-items:center;padding:0 28px;gap:20px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Specialized</div>
<div class="navlinks"><span class="active">Bikes</span><span>Gear</span><span>Apparel</span><span>Accessories</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="h1">Made for riders,<br>by riders.</div>
<div class="sub">Rider First Engineered — race-proven geometry for every kind of ride.</div>
<div class="btn">Shop Bikes</div>
</div>
<div class="heroimg"></div>
</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#da291c,#252525)"></div><div class="pbody"><div class="title">Tarmac SL8</div><div class="price">$6,500</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#252525,#da291c)"></div><div class="pbody"><div class="title">Turbo Vado</div><div class="price">$3,200</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#3d3d3d,#da291c)"></div><div class="pbody"><div class="title">Diverge Comp</div><div class="price">$2,800</div></div></div>
</div>
<div class="footer"><span>Bikes</span><span>Support</span><span>Find a Dealer</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a1a1a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a1a1a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #929292; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #181818; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: 1px solid #181818; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a1a1a; color: #f5f5f5;
border: 1px solid #3d3d3d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929292; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1a1a1a; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#181818; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #dfe0e2; background:#ffffff; }
.brand { font-size:17px; font-weight:600; letter-spacing:-0.3px; color:#1a1a1a; }
.navlinks { display:flex; gap:28px; }
.navlinks span { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.02em; color:#1a1a1a; }
.navlinks span.on { border-bottom:2px solid #1a1a1a; padding-bottom:16px; }
.cta-map { background:#000000; color:#fff; border-radius:20px; padding:8px 16px; font-size:13px; font-weight:500; }
.hero { position:relative; height:230px; display:flex; align-items:flex-end; padding:24px 40px;
background:linear-gradient(135deg,#e7ded0 0%,#cfc2ab 45%,#b7a385 100%); }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%); }
.hero-inner { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:flex-end; width:100%; }
.hero h1 { color:#fff; font-size:26px; font-weight:600; margin:0 0 4px; letter-spacing:-0.4px; }
.hero p { color:rgba(255,255,255,0.85); font-size:13px; margin:0; }
.pills { display:flex; gap:8px; }
.pill { background:#fff; border:1px solid #dfe0e2; border-radius:100px; height:36px; padding:0 16px;
display:flex; align-items:center; font-size:12px; color:#181818; box-shadow:rgba(0,0,0,0.08) 0px 4px 8px; }
.pill.active { font-weight:600; }
.section-head { padding:20px 40px 8px; display:flex; justify-content:space-between; align-items:baseline; }
.section-head h2 { font-size:19px; font-weight:600; letter-spacing:-0.4px; color:#171719; margin:0; }
.section-head span { font-size:12px; color:#6b6b6e; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:0 40px; }
.card { background:#fff; }
.thumb { height:110px; }
.t1 { background:linear-gradient(160deg,#a9c7b4,#4f6f5a); }
.t2 { background:linear-gradient(160deg,#d9c3a5,#8a6b48); }
.t3 { background:linear-gradient(160deg,#c9d3da,#5a7080); }
.t4 { background:linear-gradient(160deg,#e0cfd6,#9a7683); }
.card h3 { font-size:14px; font-weight:600; color:#333333; margin:8px 0 2px; letter-spacing:-0.1px; }
.card p { font-size:11px; color:#6b6b6e; margin:0 8px 0 0; }
.card .row { padding-right:6px; }
.promo { margin:16px 40px 0; background:#017bc6; color:#fff; border-radius:0; padding:12px 16px;
display:flex; justify-content:space-between; align-items:center; font-size:12px; }
.promo b { font-weight:700; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #dfe0e2; padding:12px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#979799; background:#fff; }
</style></head>
<body>
<nav>
<div class="brand">Stayfolio</div>
<div class="navlinks"><span class="on">Find Stay</span><span>Promotion</span><span>Journal</span><span>Pre-order</span></div>
<div class="cta-map">Map</div>
</nav>
<div class="hero">
<div class="hero-inner">
<div>
<h1>When the rain deepens the scent of the mountains</h1>
<p>Set out for a forest stay</p>
</div>
<div class="pills">
<div class="pill active">Domestic</div>
<div class="pill">Overseas</div>
</div>
</div>
</div>
<div class="section-head"><h2>Editor's Picks This Week</h2><span>See all</span></div>
<div class="cards">
<div class="card"><div class="thumb t1"></div><div class="row"><h3>Amber Pure Hill</h3><p>Yangpyeong, Gyeonggi</p></div></div>
<div class="card"><div class="thumb t2"></div><div class="row"><h3>Villa Mardi</h3><p>Jeju Island</p></div></div>
<div class="card"><div class="thumb t3"></div><div class="row"><h3>Chwiho House</h3><p>Gangneung, Gangwon</p></div></div>
<div class="card"><div class="thumb t4"></div><div class="row"><h3>Forest Pine Lodge</h3><p>Hongcheon, Gangwon</p></div></div>
</div>
<div class="promo"><span>Overseas stays are open for booking now — <b>go take a look</b></span><span>→</span></div>
<footer><span>© Stayfolio</span><span>Stayfolio · Journal · Pre-order · Company</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #898989; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #9f0000; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #9f0000;
border: 1px solid #9f0000; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #898989; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #9f0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:'Barlow', Roboto, Arial, sans-serif; }
* { box-sizing:border-box; }
.mont { font-family:'Montserrat', Arial, sans-serif; }
.topbar { height:26px; background:#9f0000; color:#fff; display:flex; align-items:center; justify-content:center;
font-size:10px; font-weight:600; letter-spacing:0.6px; text-transform:uppercase; }
nav { height:52px; background:#1a1a1a; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { color:#fff; font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:600; color:#fff; }
.btn-primary { background:#9f0000; color:#fff; border:none; border-radius:8px; padding:9px 18px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; }
.content { display:flex; padding:16px 32px; gap:24px; }
.search { display:flex; align-items:center; height:38px; border:2px solid #cfcfcf; border-radius:4px; padding:0 14px;
font-size:13px; color:#898989; }
.layout { display:flex; gap:20px; padding:8px 32px 0; }
.side { width:150px; }
.chip { display:inline-block; background:#f5f5f5; border:1px solid #cfcfcf; border-radius:4px; padding:5px 10px;
font-size:11px; margin:0 6px 6px 0; color:#5b5b5b; }
.chip.active { background:#9f0000; color:#fff; border-color:#9f0000; }
.main { flex:1; }
.breadcrumb { font-size:12px; color:#898989; margin-bottom:8px; }
.pdp { display:flex; gap:20px; }
.pimg { width:200px; height:150px; background:#f5f5f5; border:1px solid #e0e0e0; border-radius:4px;
display:flex; align-items:center; justify-content:center; position:relative; }
.pimg::before { content:''; width:60px; height:60px; border-radius:50%; border:8px solid #b13030; }
.info-panel { flex:1; }
.sku { font-family:monospace; font-size:11px; color:#898989; }
.ptitle { font-size:19px; font-weight:700; margin:6px 0 8px; }
.price { font-size:22px; font-weight:700; color:#9f0000; margin-bottom:8px; }
.badge-blue { display:inline-block; background:#30abd8; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.3px;
text-transform:uppercase; padding:3px 8px; border-radius:4px; }
.bulk-table { margin-top:10px; border:1px solid #e0e0e0; border-radius:4px; overflow:hidden; font-size:12px; }
.bulk-row { display:flex; justify-content:space-between; padding:6px 12px; border-bottom:1px solid #e0e0e0; }
.bulk-row:nth-child(even) { background:#f5f5f5; }
.bulk-row .qty { color:#5b5b5b; }
.bulk-row .p { color:#9f0000; font-weight:700; }
footer { border-top:4px solid #9f0000; background:#1a1a1a; color:#b9b9b9; padding:12px 32px;
display:flex; justify-content:space-between; font-size:11px; }
</style></head>
<body>
<div class="topbar">Free shipping on orders over $99 — Same-day ships before 3pm EST</div>
<nav>
<p class="brand">Boltsandnuts Com</p>
<div class="navlinks"><span>Machine Screws</span><span>Bolts</span><span>Nuts</span><span>Washers</span></div>
<button class="btn-primary">Request Quote</button>
</nav>
<div class="layout">
<div class="side">
<div class="chip active">Stainless</div>
<div class="chip">Grade 5</div>
<div class="chip">Zinc</div>
<div class="chip">Hex Drive</div>
<div class="chip">Phillips</div>
<div class="chip">Black Oxide</div>
</div>
<div class="main">
<div class="breadcrumb">Fasteners / Bolts / Hex Cap Screws</div>
<div class="pdp">
<div class="pimg"></div>
<div class="info-panel">
<div class="sku">SKU: HCS-0038-SS</div>
<div class="ptitle">3/8"-16 x 2" Hex Cap Screw, Stainless</div>
<div class="price">$0.42 <span class="badge-blue">Ships Today</span></div>
<div class="bulk-table">
<div class="bulk-row"><span class="qty">1–9</span><span class="p">$0.52 ea</span></div>
<div class="bulk-row"><span class="qty">10–49</span><span class="p">$0.46 ea</span></div>
<div class="bulk-row"><span class="qty">100+</span><span class="p">$0.38 ea</span></div>
</div>
</div>
</div>
</div>
</div>
<footer>
<span>© Boltsandnuts Com</span>
<span>CSA Certified Materials · Bulk Quotes Available</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1814;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1814;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: 0.01em; margin: 0; color: #1A1814; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.6; letter-spacing: 0.02em; margin: 0; color: #7A7570; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.18em; background: #B8965A; color: #FFFFFF;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.18em; background: transparent; color: #1A1814;
border: 1px solid #B8965A; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; letter-spacing: 0.02em; background: #FFFFFF; color: #1A1814;
border: 1px solid #c6c5c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7A7570; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.14em; background: transparent; color: #B8965A;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#FAF8F5; color:#1A1814; font-family:'Jost','Montserrat',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:center;gap:34px;border-bottom:1px solid #E8E2D9;}
.navlinks{display:flex;gap:34px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:#7A7570;}
.logo{position:absolute;left:40px;top:18px;font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-size:22px;font-weight:400;letter-spacing:1px;}
.hero{height:400px;display:flex;}
.himg{width:52%;height:400px;background:radial-gradient(circle at 32% 30%, #D4B896 0%, #B8965A 45%, #1A1814 100%);position:relative;}
.himg:before{content:'';position:absolute;left:38%;top:36%;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f3e3c8,#B8965A 70%);box-shadow:0 20px 50px rgba(184,150,90,0.4);}
.himg:after{content:'';position:absolute;left:44%;top:56%;width:40px;height:14px;background:#9A7A44;border-radius:9999px;}
.htext{width:48%;padding:0 48px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:#9A7A44;margin-bottom:16px;}
.htext h1{font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-weight:400;font-size:38px;line-height:1.25;margin:0 0 16px;}
.htext p{font-size:13px;color:#7A7570;line-height:1.7;margin:0 0 22px;max-width:320px;}
.btn{display:inline-block;background:none;border-bottom:1px solid #1A1814;color:#1A1814;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;padding:0 0 4px;width:fit-content;}
.sec{padding:26px 48px 0;}
.sectitle{font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-size:19px;font-weight:400;letter-spacing:0.5px;margin-bottom:18px;text-align:center;}
.grid{display:flex;gap:18px;justify-content:center;}
.card{width:196px;}
.cardimg{width:100%;height:150px;background:linear-gradient(150deg,#D4B896,#1A1814 85%);position:relative;}
.cardimg:before{content:'';position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f3e3c8,#B8965A 75%);}
.cardtitle{font-size:12px;margin-top:12px;letter-spacing:0.06em;}
.cardprice{font-size:12px;color:#9A7A44;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;display:flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:#7A7570;border-top:1px solid #E8E2D9;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Meghan BO Designs</div>
<div class="navlinks"><span>Fine Jewelry</span><span>Rings</span><span>Necklaces</span><span>Custom</span></div>
</div>
<div class="hero">
<div class="himg"></div>
<div class="htext">
<div class="kicker">Solid 14k Gold</div>
<h1>The object speaks for itself.</h1>
<p>Quiet, wearable gold — cast slowly, worn every day, never precious.</p>
<div class="btn">Discover the Collection</div>
</div>
</div>
<div class="sec">
<div class="sectitle">New Arrivals</div>
<div class="grid">
<div class="card"><div class="cardimg"></div><div class="cardtitle">Signet Ring</div><div class="cardprice">$680</div></div>
<div class="card"><div class="cardimg"></div><div class="cardtitle">Bezel Pendant</div><div class="cardprice">$540</div></div>
<div class="card"><div class="cardimg"></div><div class="cardtitle">Baby Hoops</div><div class="cardprice">$420</div></div>
</div>
</div>
<div class="footer">Handcrafted in Small Batches</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #aba000; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #ffffff; color: #1a1a1a;
border: 1px solid #aba000; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #aba000; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:18px;font-weight:600;color:#1a1a1a;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:400;color:#333333;}
.navlinks span:first-child{color:#aba000;font-weight:600;}
.searchbar{width:200px;height:32px;border:1px solid #e0e0e0;border-radius:4px;font-size:12px;color:#999999;display:flex;align-items:center;padding:0 12px;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;gap:36px;}
.herotext{width:400px;}
.kicker{font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:#aba000;margin-bottom:12px;}
.h1{font-size:28px;font-weight:600;line-height:1.3;color:#1a1a1a;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.6;color:#666666;margin:0 0 18px;max-width:340px;}
.btn{width:160px;text-align:center;background:#aba000;color:#fff;font-size:13px;font-weight:600;padding:11px 0;border-radius:4px;}
.posterrow{display:flex;gap:12px;}
.poster{width:100px;height:150px;border-radius:4px;border:1px solid #e0e0e0;position:relative;overflow:hidden;}
.poster:before{content:'';position:absolute;bottom:0;left:0;right:0;height:34px;background:rgba(0,0,0,.35);}
.poster.mid{margin-top:-14px;}
.sec{padding:14px 40px 0;}
.sectitle{font-size:15px;font-weight:600;color:#1a1a1a;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:130px;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;background:#fff;}
.thumb{height:170px;position:relative;}
.thumb:before{content:'';position:absolute;bottom:0;left:0;right:0;height:30px;background:rgba(0,0,0,.35);}
.pbody{padding:8px;}
.pname{font-size:11px;color:#1a1a1a;font-weight:600;line-height:1.3;height:28px;overflow:hidden;}
.pprice{font-size:12px;color:#aba000;margin-top:4px;font-weight:600;}
</style>
<div class="nav">
<div class="logo">Olive Films</div>
<div class="navlinks"><span>New Releases</span><span>Criterion</span><span>Foreign</span><span>Box Sets</span></div>
<div class="searchbar">Search titles...</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Boutique Blu-ray Since 2013</div>
<div class="h1">The catalog does the talking.</div>
<div class="sub">Meticulously restored films, licensed for collectors who care about the transfer as much as the title.</div>
<div class="btn">Shop New Releases</div>
</div>
<div class="posterrow">
<div class="poster" style="background:linear-gradient(160deg,#3e5871,#1a1a1a)"></div>
<div class="poster mid" style="background:linear-gradient(160deg,#aba000,#1a1a1a)"></div>
<div class="poster" style="background:linear-gradient(160deg,#8b6b3e,#1a1a1a)"></div>
</div>
</div>
<div class="sec">
<div class="sectitle">Featured Restorations</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(165deg,#aba000,#1a1a1a)"></div><div class="pbody"><div class="pname">Midnight Reel</div><div class="pprice">$29.95</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(165deg,#6e8269,#1a1a1a)"></div><div class="pbody"><div class="pname">The Long Platform</div><div class="pprice">$34.95</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(165deg,#3e5871,#1a1a1a)"></div><div class="pbody"><div class="pname">Harbor Season</div><div class="pprice">$24.95</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(165deg,#8b6b3e,#1a1a1a)"></div><div class="pbody"><div class="pname">Winter Reissue Box</div><div class="pprice">$59.95</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(165deg,#aba000,#3e5871)"></div><div class="pbody"><div class="pname">Director's Cut Set</div><div class="pprice">$44.95</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #08191b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #08191b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #08191b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.02em; background: #003399; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.02em; background: #ffffff; color: #08191b;
border: 1px solid #003399; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #08191b;
border: 1px solid #c1c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.08em; background: #007d00; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#08191b; box-sizing:border-box;
font-family:Akkurat, Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; border-bottom:1px solid #e1e1e1; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.wordmark { font-family:Cambon, Georgia, serif; font-size:19px; letter-spacing:0; }
.cities { display:flex; gap:22px; font-size:13px; color:#323232; }
.cities .on { color:#003399; }
.sections { display:flex; gap:22px; font-size:13px; color:#08191b; }
.crumb { padding:16px 40px 0; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#595959; }
main { display:flex; padding:16px 40px 0; gap:48px; height:460px; }
.art { width:400px; aspect-ratio:4/5; position:relative;
background:
radial-gradient(circle at 60% 30%, rgba(255,255,255,0.06), transparent 50%),
linear-gradient(150deg, #343957 0%, #24283e 55%, #08191b 100%); }
.art::after { content:''; position:absolute; inset:0;
background-image:
linear-gradient(115deg, transparent 40%, rgba(255,125,0,0.18) 41%, rgba(255,125,0,0.18) 43%, transparent 44%),
linear-gradient(70deg, transparent 60%, rgba(255,255,255,0.08) 61%, rgba(255,255,255,0.08) 63%, transparent 64%); }
.status { position:absolute; top:0; left:0; background:#007d00; color:#fff; font-size:11px; font-weight:500;
letter-spacing:0.08em; text-transform:uppercase; padding:2px 8px; }
.detail { flex:1; display:flex; flex-direction:column; padding-top:4px; }
.artist { font-family:Cambon, Georgia, serif; font-size:26px; margin:0 0 2px; }
.work-title { font-size:15px; font-style:italic; color:#323232; margin-bottom:14px; }
.meta-row { font-size:13px; color:#595959; line-height:1.7; margin-bottom:18px; }
.divider { height:1px; background:#e1e1e1; margin:0 0 18px; }
.desc { font-size:13px; color:#323232; line-height:1.7; max-width:400px; margin-bottom:20px; }
.price-block { margin-bottom:20px; }
.price-label { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#7d7d7d; margin-bottom:4px; }
.price { font-family:Cambon, Georgia, serif; font-size:22px; }
.actions { margin-top:auto; display:flex; gap:12px; }
.btn-primary { background:#003399; color:#fff; border:none; height:44px; padding:0 26px; font-size:14px;
letter-spacing:0.02em; }
.btn-secondary { background:#fff; color:#08191b; border:1px solid #08191b; height:44px; padding:0 26px; font-size:14px; }
.press { display:flex; gap:8px; margin-top:16px; }
.tag { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#595959;
background:#f1f1f1; padding:2px 8px; }
footer { border-top:1px solid #e1e1e1; margin-top:8px; padding:12px 40px; display:flex;
justify-content:space-between; font-size:12px; color:#08191b; }
</style></head>
<body>
<nav>
<div class="wordmark">Almine Rech</div>
<div class="cities"><span class="on">Paris</span><span>Brussels</span><span>London</span><span>New York</span></div>
<div class="sections"><span>Exhibitions</span><span>Artists</span><span>Art Fairs</span><span>Press</span></div>
</nav>
<div class="crumb">Artists › Represented Artists</div>
<main>
<div class="art"><span class="status">On View</span></div>
<div class="detail">
<h1 class="artist">Mira Solheim</h1>
<p class="work-title">Untitled (Field Study VII), 2023</p>
<div class="meta-row">
Oil and pigment on linen<br>
190 × 140 cm / 74.8 × 55.1 in<br>
Edition of 1 + 1 AP
</div>
<div class="divider"></div>
<p class="desc">Part of the Field Study series exploring topography and memory through
layered pigment and worked linen. Held in a private Paris collection since acquisition.</p>
<div class="price-block">
<div class="price-label">Price on Request</div>
<div class="price">Available for viewing</div>
</div>
<div class="actions">
<button class="btn-primary">Enquire</button>
<button class="btn-secondary">Add to Wishlist</button>
</div>
<div class="press"><span class="tag">Feature</span><span class="tag">Interview · Frieze</span></div>
</div>
</main>
<footer>
<span>© Almine Rech</span>
<span>Gallery · Artists · Exhibitions · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.6; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0.08em; background: #313131; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0.08em; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.1em; background: #f9f7f4; color: #555555;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #E0DDD8;}
.logo{font-size:19px;font-weight:400;letter-spacing:.5px;}
.navlinks{display:flex;gap:26px;font-size:12px;font-weight:400;letter-spacing:.3px;text-transform:uppercase;color:#313131;}
.hero{height:300px;display:flex;}
.herotext{width:44%;padding:0 40px;display:flex;flex-direction:column;justify-content:center;}
h1{font-size:34px;font-weight:400;letter-spacing:-.5px;margin:0 0 16px;line-height:1.3;}
.sub{font-size:13px;color:#6a6a6a;margin:0 0 22px;max-width:280px;}
.cta{display:inline-block;background:#313131;color:#fff;font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:15px 30px;width:fit-content;}
.heroimg{width:56%;background:#f9f7f4;position:relative;}
.ring{position:absolute;left:150px;top:110px;width:120px;height:120px;border-radius:50%;border:14px solid #c4a46a;}
.sec{padding:26px 40px 0;}
.sectitle{font-size:16px;font-weight:400;margin-bottom:16px;}
.grid{display:flex;gap:20px;}
.card{width:200px;}
.thumb{height:120px;background:#f9f7f4;margin-bottom:10px;}
.pname{font-size:13px;margin-bottom:4px;}
.pprice{font-size:12px;color:#6a6a6a;}
.pills{display:flex;gap:6px;margin-top:6px;}
.pill{width:14px;height:14px;border-radius:9999px;}
</style>
<div class="nav">
<div class="logo">Linjer</div>
<div class="navlinks"><span>Rings</span><span>Watches</span><span>Bags</span><span>Journal</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Let the object speak.</h1>
<div class="sub">Solid-gold pieces photographed flat against near-white — no props, no filter.</div>
<div class="cta">Shop Rings</div>
</div>
<div class="heroimg"><div class="ring"></div></div>
</div>
<div class="sec">
<div class="sectitle">The Collection</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="pname">Solid Gold Band, 2mm</div><div class="pprice">$390</div><div class="pills"><div class="pill" style="background:#c4a46a;"></div><div class="pill" style="background:#b8b6b2;"></div></div></div>
<div class="card"><div class="thumb"></div><div class="pname">Minimalist Watch, 36mm</div><div class="pprice">$495</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Leather Card Case</div><div class="pprice">$95</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #1a1a1a;
border: 1px solid #757575; border-radius: 0px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #1a1a1a; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,Helvetica,sans-serif; color:#1a1a1a; }
*{box-sizing:border-box; border-radius:0 !important;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #ddd;}
.logo{font-size:18px;font-weight:700;letter-spacing:.5px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:400;color:#1a1a1a;}
.hero{height:240px;display:flex;}
.herotext{width:46%;padding:0 36px;display:flex;flex-direction:column;justify-content:center;}
h1{font-size:30px;font-weight:700;margin:0 0 12px;line-height:1.2;}
.sub{font-size:14px;color:#555;margin:0 0 18px;max-width:300px;}
.cta{display:inline-block;background:#1a1a1a;color:#fff;font-size:14px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:12px 26px;width:fit-content;}
.heroimg{width:54%;background:#f5f5f5;position:relative;}
.notebook{position:absolute;left:60px;top:40px;width:120px;height:160px;background:#757575;box-shadow:4px 4px 0 #ddd;}
.notebook2{position:absolute;left:190px;top:60px;width:120px;height:160px;background:#1a1a1a;box-shadow:4px 4px 0 #ddd;}
.spine{position:absolute;left:186px;top:60px;width:4px;height:160px;background:#333;}
.sec{padding:18px 36px 0;}
.sectitle{font-size:16px;font-weight:700;margin-bottom:14px;}
.swrow{display:flex;gap:10px;margin-bottom:16px;}
.sw{width:24px;height:24px;border-radius:9999px !important;border:2px solid #1a1a1a;}
.grid{display:flex;gap:14px;}
.card{width:198px;border:1px solid #ddd;padding:10px;position:relative;}
.thumb{height:100px;background:#f5f5f5;margin-bottom:8px;}
.badge{position:absolute;top:16px;left:16px;background:#1a1a1a;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 8px;}
.pname{font-size:13px;font-weight:700;margin-bottom:3px;}
.pprice{font-size:13px;color:#555;}
</style>
<div class="nav">
<div class="logo">Leuchtturm1917</div>
<div class="navlinks"><span>Notebooks</span><span>Planners</span><span>Accessories</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Numbered pages, 1 to 249.</h1>
<div class="sub">Precision-bound notebooks for those who know exactly what they came for.</div>
<div class="cta">Shop Notebooks</div>
</div>
<div class="heroimg"><div class="notebook"></div><div class="notebook2"></div><div class="spine"></div></div>
</div>
<div class="sec">
<div class="sectitle">25+ Cover Colors</div>
<div class="swrow">
<div class="sw" style="background:#d40f0f;"></div><div class="sw" style="background:#003388;"></div><div class="sw" style="background:#3ed660;"></div><div class="sw" style="background:#f9d861;"></div><div class="sw" style="background:#757575;"></div>
</div>
<div class="grid">
<div class="card"><div class="badge">Bestseller</div><div class="thumb"></div><div class="pname">Medium A5 Dotted</div><div class="pprice">$21.95</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Weekly Planner 2026</div><div class="pprice">$26.95</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Pocket A6 Ruled</div><div class="pprice">$15.95</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #006799; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #eeeeee; color: #111111;
border: 1px solid #006799; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #32373c;
border: 1px solid #b7b7b7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #006799; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#eeeeee; font-family:'Poppins',Arial,sans-serif; color:#111111; }
*{box-sizing:border-box;}
.nav{height:60px;background:#0f1f18;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#fff;letter-spacing:.3px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:500;color:#9de1bc;}
.cta{background:#006799;color:#fff;font-size:12px;font-weight:600;padding:9px 18px;border-radius:9999px;}
.hero{height:250px;display:flex;background:linear-gradient(120deg,#eeeeee 55%,#1e3828 100%);}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 32px;}
.kicker{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#006799;margin-bottom:10px;}
.herotext h1{font-size:32px;font-weight:700;margin:0 0 10px;line-height:1.2;}
.herotext p{font-size:14px;color:#444;margin:0 0 16px;max-width:300px;}
.btn{display:inline-block;background:#006799;color:#fff;font-size:13px;font-weight:600;padding:12px 24px;border-radius:9999px;width:fit-content;}
.heroimg{width:54%;position:relative;overflow:hidden;}
.kb{position:absolute;right:60px;top:60px;width:280px;height:130px;background:#111111;border-radius:12px;padding:12px;display:grid;grid-template-columns:repeat(10,1fr);gap:4px;}
.key{background:#32373c;border-radius:3px;height:18px;}
.key.b{background:#006799;}
.key.g{background:#82c0c7;}
.sec{padding:20px 32px 0;}
.sectitle{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#666;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border-radius:10px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#006799;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;border-radius:9999px;padding:3px 10px;z-index:2;}
.thumb{height:96px;border-radius:8px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;}
.pprice{font-size:13px;font-weight:700;color:#006799;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Monsgeek</div>
<div class="navlinks"><span>Keyboards</span><span>Switches</span><span>Keycaps</span><span>Community</span></div>
<div class="cta">Shop All</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Make Cool Gears Accessible</div>
<h1>Precision Feel, Zero Gatekeeping</h1>
<p>Gasket-mount keyboards built for enthusiasts who want the sound without the price tag.</p>
<div class="btn">Explore Boards</div>
</div>
<div class="heroimg">
<div class="kb">
<div class="key"></div><div class="key"></div><div class="key b"></div><div class="key"></div><div class="key g"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
<div class="key"></div><div class="key g"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key b"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
<div class="key"></div><div class="key"></div><div class="key"></div><div class="key g"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key b"></div><div class="key"></div><div class="key"></div>
</div>
</div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#006799,#0f1f18)"></div><div class="pname">M3 Gasket Board 75%</div><div class="pprice">$129.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#82c0c7,#1e3828)"></div><div class="pname">M1W Wireless TKL</div><div class="pprice">$99.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#9de1bc,#005580)"></div><div class="pname">Lavender Switch Set</div><div class="pprice">$16.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0f1f18,#006799)"></div><div class="pname">PBT Keycap Kit</div><div class="pprice">$34.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #404040; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #ffffff; color: #404040;
border: 1px solid #404040; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #272727;
border: 1px solid #c9c9c9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #bd2426; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#404040; font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;
}
*, *::before, *::after { box-sizing:border-box; }
.wrap{ position:relative; width:960px; height:640px; }
.nav{ height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#ffffff; border-bottom:1px solid #dedede; }
.logo{ font-size:17px; font-weight:700; letter-spacing:0.02em; color:#404040; }
.navlinks{ display:flex; gap:22px; }
.navlinks span{ font-size:12px; color:#404040; }
.navlinks span.active{ color:#62a1d8; }
.cta{ font-size:12px; font-weight:700; color:#ffffff; background:#404040; padding:9px 16px; }
.hero{ height:220px; display:flex; align-items:center; padding:0 34px; gap:26px; background:#ebebeb; }
.hero-text{ width:380px; }
.kicker{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#707070; margin-bottom:10px; }
.h1{ font-size:26px; font-weight:700; line-height:1.25; color:#404040; margin-bottom:10px; }
.sub{ font-size:13px; line-height:1.5; color:#5a5a5a; max-width:330px; }
.hero-visual{ flex:1; height:180px; position:relative; overflow:hidden; }
.kb-body{ position:absolute; left:100px; top:60px; width:320px; height:90px; background:#404040; border-radius:6px; }
.key{ position:absolute; width:22px; height:22px; background:#ebebeb; border-radius:3px; top:70px; }
.k1{ left:114px; } .k2{ left:140px; } .k3{ left:166px; } .k4{ left:192px; } .k5{ left:218px; } .k6{ left:244px; } .k7{ left:270px; } .k8{ left:296px; } .k9{ left:322px; } .k10{ left:348px; } .k11{ left:374px; } .k12{ left:400px; }
.section-title{ padding:14px 34px 8px; font-size:14px; font-weight:700; color:#404040; }
.grid{ display:flex; gap:16px; padding:0 34px; }
.card{ width:200px; background:#ffffff; border:1px solid #dedede; border-radius:8px; padding:12px; }
.card-img{ width:100%; height:66px; border-radius:4px; margin-bottom:8px; }
.card-title{ font-size:12px; font-weight:700; color:#404040; margin-bottom:2px; }
.card-note{ font-size:10px; color:#707070; margin-bottom:8px; }
.row{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-size:12px; font-weight:700; color:#404040; }
.tag{ font-size:9px; font-weight:700; text-transform:uppercase; color:#ffffff; padding:3px 8px; }
.tag.red{ background:#bd2426; }
.tag.green{ background:#9bca3e; }
.tag.blue{ background:#62a1d8; }
.accents{ margin:18px 34px 0; padding:14px 20px; border:1px solid #dedede; border-radius:8px; display:flex; align-items:center; justify-content:space-between; }
.accents-label{ font-size:11px; color:#707070; }
.swatch-row{ display:flex; gap:10px; }
.asw{ width:18px; height:18px; border-radius:3px; }
.footer{ position:absolute; bottom:0; left:0; width:960px; height:48px; background:#ebebeb; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.footer span{ font-size:10px; color:#707070; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Hhkb</div>
<div class="navlinks">
<span class="active">Keyboards</span>
<span>Keycaps</span>
<span>Accessories</span>
<span>Support</span>
</div>
<div class="cta">Add to Cart</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="kicker">Topre Electrostatic Capacitive</div>
<div class="h1">The only color allowed is the one you choose.</div>
<div class="sub">A compact, monochrome keyboard built for people who type all day and expect nothing less than silence in the design.</div>
</div>
<div class="hero-visual">
<div class="kb-body"></div>
<div class="key k1"></div><div class="key k2"></div><div class="key k3"></div><div class="key k4"></div>
<div class="key k5"></div><div class="key k6"></div><div class="key k7"></div><div class="key k8"></div>
<div class="key k9"></div><div class="key k10"></div><div class="key k11"></div><div class="key k12"></div>
</div>
</div>
<div class="section-title">Spec Table</div>
<div class="grid">
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#404040,#707070);"></div>
<div class="card-title">HHKB Studio</div>
<div class="card-note">Type-S Silent</div>
<div class="row"><span class="price">$385.00</span><span class="tag blue">In Stock</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#dedede,#404040);"></div>
<div class="card-title">HHKB Classic</div>
<div class="card-note">Blank Keycaps</div>
<div class="row"><span class="price">$255.00</span><span class="tag green">In Stock</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#707070,#dedede);"></div>
<div class="card-title">HHKB Hybrid</div>
<div class="card-note">Bluetooth + USB-C</div>
<div class="row"><span class="price">$315.00</span><span class="tag red">Low Stock</span></div>
</div>
</div>
<div class="accents">
<span class="accents-label">Six accent signals, grayscale everywhere else</span>
<div class="swatch-row">
<span class="asw" style="background:#bd2426;"></span>
<span class="asw" style="background:#9bca3e;"></span>
<span class="asw" style="background:#62a1d8;"></span>
<span class="asw" style="background:#e9a13a;"></span>
<span class="asw" style="background:#8a5fbf;"></span>
<span class="asw" style="background:#404040;"></span>
</div>
</div>
<div class="footer">
<span>© HHKB</span>
<span>Firmware · Manual · Contact</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.25; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.25; letter-spacing: 0.06em; background: #ff3300; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.25; letter-spacing: 0.06em; background: #ffffff; color: #111111;
border: 1px solid #ff3300; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111111;
border: 1px solid #dedede; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.08em; background: #222222; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Instrument Sans','neuzeit-grotesk',sans-serif; color:#111111; }
*{box-sizing:border-box;}
.announce{height:34px;background:#111111;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #ebebeb;}
.logo{font-family:'Georgia',serif;font-size:20px;}
.navlinks{display:flex;gap:22px;font-size:14px;}
.hero{padding:20px 34px 0;display:flex;align-items:center;gap:24px;}
.h1{font-family:'Georgia',serif;font-size:38px;line-height:1.08;letter-spacing:-0.3px;margin:0 0 12px;width:400px;}
.sub{font-size:13px;color:#595959;}
.art{width:180px;height:150px;background:linear-gradient(150deg,#ffb510,#8500d3);border-radius:2px;margin-left:auto;}
.chips{display:flex;gap:8px;padding:16px 34px 0;}
.chip{border:1px solid #dedede;border-radius:9999px;font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:6px 14px;color:#595959;}
.chip.on{background:#111111;color:#fff;border-color:#111111;}
.grid{display:flex;gap:16px;padding:16px 34px 0;}
.card{width:150px;}
.thumb{height:120px;background:#f8f8f8;margin-bottom:8px;}
.artist{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#595959;margin-bottom:2px;}
.title{font-size:14px;margin-bottom:2px;}
.price{font-size:15px;font-weight:500;}
.badge{display:inline-block;background:#222222;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:3px 8px;margin-bottom:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#222222;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">New Works Just Added</div>
<div class="nav">
<div class="logo">Tappan Collective</div>
<div class="navlinks"><div>Shop</div><div>Artists</div><div>Editorial</div><div>About</div></div>
</div>
<div class="hero">
<div>
<div class="h1">Original art, curated like a gallery.</div>
<div class="sub">One-of-a-kind paintings and limited editions from working artists.</div>
</div>
<div class="art"></div>
</div>
<div class="chips"><div class="chip on">All</div><div class="chip">Painting</div><div class="chip">Photography</div><div class="chip">Works On Paper</div></div>
<div class="grid">
<div class="card"><span class="badge">Original</span><div class="thumb" style="background:linear-gradient(150deg,#00a47c,#8da1e9);"></div><div class="artist">Nadia Farrow</div><div class="title">Low Tide Study</div><div class="price">$1,850</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#ffb510,#836300);"></div><div class="artist">Rowan Blake</div><div class="title">Field Notes No. 4</div><div class="price">$620</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#19bcad,#8500d3);"></div><div class="artist">Marguerite Sol</div><div class="title">Interior, Morning</div><div class="price">$2,400</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#f29100,#00bf48);"></div><div class="artist">Julian Okafor</div><div class="title">Ed. 12 Riverbend</div><div class="price">$310</div></div>
</div>
<div class="footer"><span>© Original Works From Living Artists</span><span>Authentication · Shipping</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c362; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c362; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00ff91; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c362; color: #000000;
border: 1px solid #00ff91; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c362; color: #000000;
border: 1px solid #27cb7a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00cd6a; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Noto Sans KR', Roboto, sans-serif; }
* { box-sizing:border-box; }
.nav { height:56px; background:#ffffff; border-bottom:1px solid #e5e6e9; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.nav .logo { font-size:18px; font-weight:700; color:#323438; letter-spacing:-0.2px; }
.nav .links { display:flex; gap:24px; font-size:15px; font-weight:400; color:#4b4c50; }
.nav .links .active { color:#00c362; font-weight:700; }
.nav .auth { display:flex; gap:16px; font-size:13px; color:#686a6d; }
.grey { background:#f3f3f4; padding:20px 32px 22px; }
.search { height:48px; background:#ffffff; border-radius:8px; display:flex; align-items:center;
gap:10px; padding:0 16px; font-size:16px; color:#c5c7cc; margin-bottom:18px; }
.search .ico { width:16px; height:16px; border:2px solid #c5c7cc; border-radius:50%; position:relative; flex:0 0 auto; }
.search .ico::after { content:''; position:absolute; width:7px; height:2px; background:#c5c7cc; right:-6px; bottom:1px; transform:rotate(45deg); border-radius:2px; }
.head-row { display:flex; align-items:center; justify-content:space-between; }
.head-row h2 { font-size:24px; font-weight:700; color:#323438; margin:0; line-height:1.5; }
.badge-highlight { background:#00ff91; color:#333333; border-radius:4px; font-size:13px; font-weight:400;
padding:3px 8px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:20px 32px 0; }
.card { position:relative; background:#ffffff; border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:10px;
overflow:hidden; }
.card::before { content:''; position:absolute; left:0; top:0; right:0; height:3px; background:#00c274; }
.avatar { width:36px; height:36px; border-radius:8px; background:#003a1c; color:#ffffff; font-size:15px; font-weight:700;
display:flex; align-items:center; justify-content:center; }
.card h3 { font-size:16px; font-weight:700; margin:0; color:#333333; }
.card .sub { font-size:13px; color:#a4a6ad; margin:0; line-height:1.4; }
.chips { display:flex; gap:8px; }
.chip { flex:1; background:#f3f3f4; color:#333333; border-radius:8px; height:44px; display:flex; flex-direction:column;
align-items:flex-start; justify-content:center; padding:0 12px; font-size:14px; font-weight:700; line-height:1.3; }
.chip small { font-size:10px; font-weight:400; color:#686a6d; }
.cta { margin-top:auto; background:#00c362; color:#ffffff; border-radius:5px; height:40px; border:none;
font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.foot { position:absolute; left:0; right:0; bottom:0; height:40px; border-top:1px solid #e5e6e9; background:#ffffff;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:12px; color:#a4a6ad; }
.foot .page { color:#00c362; font-weight:700; display:flex; gap:10px; }
body { position:relative; }
</style></head>
<body>
<div class="nav">
<div class="logo">Jobplanet</div>
<div class="links">
<span class="active">Company Rankings</span>
<span>Community</span>
<span>Jobs</span>
<span>Content</span>
<span>Salary</span>
</div>
<div class="auth"><span>Log in</span><span>Sign up</span></div>
</div>
<div class="grey">
<div class="search"><span class="ico"></span>Search companies, jobs, content</div>
<div class="head-row">
<h2>Companies rated best by employees</h2>
<span class="badge-highlight">Top Rated</span>
</div>
</div>
<div class="cards">
<div class="card">
<div class="avatar">N</div>
<h3>Nexabyte Cloud</h3>
<p class="sub">Cloud infrastructure · Software</p>
<div class="chips">
<div class="chip">782<small>employee reviews</small></div>
<div class="chip">15<small>open positions</small></div>
</div>
<button class="cta">View company</button>
</div>
<div class="card">
<div class="avatar">H</div>
<h3>Harborline Retail</h3>
<p class="sub">E-commerce · Logistics</p>
<div class="chips">
<div class="chip">431<small>employee reviews</small></div>
<div class="chip">9<small>open positions</small></div>
</div>
<button class="cta">View company</button>
</div>
<div class="card">
<div class="avatar">S</div>
<h3>Silverfin Studio</h3>
<p class="sub">Game development</p>
<div class="chips">
<div class="chip">208<small>employee reviews</small></div>
<div class="chip">4<small>open positions</small></div>
</div>
<button class="cta">View company</button>
</div>
</div>
<div class="foot">
<span>© Jobplanet · Company Rankings · Community · Jobs · Content</span>
<span class="page">1 2 3 ›</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbf0d9; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbf0d9; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7a756b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fbf0d9; color: #1a1a1a;
border: 1px solid #1a1a1a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fbf0d9; color: #111111;
border: 1px solid #d6ccb9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a756b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d7ceba; color: #1a1a1a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FBF0D9; color:#5F4B32; box-sizing:border-box;
font-family:Georgia, "Bitter", "Times New Roman", serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:640px; }
.reader { flex:1; padding:36px 56px; display:flex; flex-direction:column; }
.eyebrow { font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:#8a6f47; text-align:center; margin-bottom:14px; }
.chaptitle { font-size:24px; text-align:center; margin:0 0 22px; font-weight:400; }
.dropcap { float:left; font-size:56px; line-height:0.8; padding:6px 8px 0 0; font-weight:700; }
.body { font-size:15.5px; line-height:1.72; text-align:justify; }
.body p { margin:0 0 14px; }
.footer { margin-top:auto; display:flex; justify-content:space-between; font-size:11px; color:#8a6f47; padding-top:14px; }
.toolbar { position:absolute; left:0; right:0; bottom:0; background:rgba(251,240,217,0.96); border-top:1px solid #e4d9bb;
padding:14px 40px; display:flex; align-items:center; justify-content:center; gap:22px; }
.swatch { width:26px; height:26px; border-radius:50%; border:2px solid transparent; }
.swatch.active { border-color:#FF9900; }
.aabtn { font-family:-apple-system, sans-serif; font-size:20px; font-weight:800; color:#1A1A1A; margin-right:20px; }
.lib { width:280px; flex:0 0 auto; background:#FFFFFF; padding:20px; font-family:-apple-system, sans-serif; color:#1A1A1A; }
.libh { font-size:18px; font-weight:700; margin-bottom:14px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.cover { aspect-ratio:2/3; border-radius:4px; position:relative; overflow:hidden; }
.c1 { background:linear-gradient(160deg,#2b3a67,#101a33); }
.c2 { background:linear-gradient(160deg,#7a3d28,#3d1f14); }
.c3 { background:linear-gradient(160deg,#3d5a3d,#182818); }
.c4 { background:linear-gradient(160deg,#5a3d5a,#281828); }
.c5 { background:linear-gradient(160deg,#8a6f10,#3d3208); }
.c6 { background:linear-gradient(160deg,#3d5a6f,#182430); }
.cprog { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,0.25); }
.cprog i { display:block; height:3px; background:#FF9900; }
</style></head>
<body>
<div class="wrap">
<div class="reader">
<div class="eyebrow">Chapter Seven</div>
<h1 class="chaptitle">Kindle (iOS)</h1>
<div class="body">
<p><span class="dropcap">T</span>he morning light came in low and gold across the harbor, and for a moment she forgot why she had come. The letters were still in her coat pocket, unopened, waiting for a courage she wasn't sure she had.</p>
<p>She had read once that the sea remembers everything — every ship, every storm, every name whispered to it in the dark. She hoped, standing there, that it remembered him too.</p>
</div>
<div class="footer"><span>38% · 14 min left in chapter</span><span>Loc 2,481 of 6,204</span></div>
</div>
<div class="lib">
<div class="libh">Library</div>
<div class="grid3">
<div class="cover c1"><div class="cprog"><i style="width:64%"></i></div></div>
<div class="cover c2"><div class="cprog"><i style="width:20%"></i></div></div>
<div class="cover c3"><div class="cprog"><i style="width:88%"></i></div></div>
<div class="cover c4"></div>
<div class="cover c5"><div class="cprog"><i style="width:45%"></i></div></div>
<div class="cover c6"></div>
</div>
</div>
</div>
<div class="toolbar">
<span class="aabtn">Aa</span>
<div class="swatch" style="background:#FFFFFF;border:1px solid #ddd;"></div>
<div class="swatch active" style="background:#FBF0D9;"></div>
<div class="swatch" style="background:#C5E1C5;"></div>
<div class="swatch" style="background:#2A2A2A;"></div>
<div class="swatch" style="background:#000000;"></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; margin: 0; color: #6e6e6e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #313131; color: #ffffff;
border: none; border-radius: 0px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 0px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e6e6e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f5f5f5; color: #6e6e6e;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
.topnav { height:56px; border-bottom:1px solid #dddddd; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:16px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:16px; font-size:14px; font-weight:600; text-transform:uppercase; }
.navlinks span:first-child { border-bottom:2px solid #313131; padding-bottom:4px; }
.search { width:180px; height:40px; background:#f5f5f5; display:flex; align-items:center; padding:0 12px; font-size:13px; color:#6e6e6e; }
.filterrow { display:flex; gap:10px; padding:10px 32px; border-bottom:1px solid #dddddd; }
.filter-dd { height:36px; border:1px solid #dddddd; display:flex; align-items:center; padding:0 12px; font-size:13px; }
.list { padding:6px 32px; }
.row-item { display:flex; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid #e8e8e8; }
.thumb { width:44px; height:44px; background:#f5f5f5; flex-shrink:0; }
.meta { flex:1; }
.meta .artist { font-size:13px; color:#6e6e6e; }
.meta .title { font-size:14px; font-weight:600; }
.badge-format { background:#f5f5f5; color:#6e6e6e; font-size:10px; font-weight:700; text-transform:uppercase; padding:2px 6px; margin-right:6px; }
.badge-new { background:#313131; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; padding:2px 6px; }
.row-price { font-size:14px; font-weight:600; width:56px; text-align:right; }
.row-btn { background:#313131; color:#fff; border:none; padding:6px 14px; font-size:12px; font-weight:600; margin-left:12px; }
.player-bar { height:52px; border-top:1px solid #dddddd; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; font-size:13px; color:#4a4a4a; }
.playbtn { width:28px; height:28px; background:#313131; border-radius:50%; }
.prog { flex:1; height:2px; background:#dddddd; margin:0 20px; position:relative; }
.prog::before { content:''; position:absolute; left:0; top:-5px; width:12px; height:12px; border-radius:50%; background:#313131; }
footer { background:#f5f5f5; padding:10px 32px; font-size:13px; color:#6e6e6e; }
</style></head>
<body>
<div class="topnav">
<p class="brand">Boomkat</p>
<div class="navlinks"><span>Electronic</span><span>Experimental</span><span>Ambient</span></div>
<div class="search">Search catalog...</div>
</div>
<div class="filterrow">
<div class="filter-dd">Genre ▾</div>
<div class="filter-dd">Format ▾</div>
<div class="filter-dd">Price ▾</div>
</div>
<div class="list">
<div class="row-item"><div class="thumb"></div><div class="meta"><span class="badge-new">New</span><div class="title">Selected Ambient Works</div><div class="artist">Aphex Twin — LP</div></div><div class="row-price">£24.99</div><button class="row-btn">Add</button></div>
<div class="row-item"><div class="thumb"></div><div class="meta"><span class="badge-format">Cassette</span><div class="title">Deep Field</div><div class="artist">Kaitlyn Aurelia Smith</div></div><div class="row-price">£12.99</div><button class="row-btn">Add</button></div>
<div class="row-item"><div class="thumb"></div><div class="meta"><span class="badge-format">CD</span><div class="title">Music For Airports</div><div class="artist">Brian Eno</div></div><div class="row-price">£14.99</div><button class="row-btn">Add</button></div>
<div class="row-item"><div class="thumb"></div><div class="meta"><span class="badge-format">Digital</span><div class="title">Rewind The Film</div><div class="artist">Manic Street Preachers</div></div><div class="row-price">£8.99</div><button class="row-btn">Add</button></div>
</div>
<div class="player-bar">
<div class="playbtn"></div>
<div>Aphex Twin — Xtal</div>
<div class="prog"></div>
<div>2:14 / 4:32</div>
</div>
<footer>© Boomkat — Shipping worldwide since 2003</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #001d48;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #001d48;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.27; letter-spacing: -0.25px; margin: 0; color: #001d48; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #0626a9; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #ffffff; color: #001d48;
border: 1px solid #0626a9; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #4e4e4e;
border: 1px solid #bfc6d1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ed1f34; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f7f7f7; font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif; color:#1a1a1a;
}
*{box-sizing:border-box;}
.nav{height:64px; background:#fff; display:flex; align-items:center; padding:0 30px;}
.logo{font-size:24px; font-weight:700; color:#0626a9;}
.navlinks{display:flex; gap:22px; margin-left:36px; font-size:13px; font-weight:600; text-transform:uppercase; color:#333;}
.navicons{margin-left:auto; font-size:12px; font-weight:600; color:#0626a9;}
.hero{display:flex; align-items:center; gap:30px; padding:24px 30px; background:#0626a9; color:#fff;}
.heroText{flex:1;}
.heroText h1{font-size:32px; font-weight:700; margin:0 0 10px; line-height:1.2; max-width:400px;}
.heroText p{font-size:14px; color:#c7d0f0; line-height:1.5; max-width:380px; margin:0 0 16px;}
.heroBtn{display:inline-block; background:#fff; color:#0626a9; padding:12px 26px; border-radius:999px; font-size:14px; font-weight:700;}
.heroArt{width:230px; height:160px; border-radius:12px; background:linear-gradient(135deg,#d44316,#f36d21); flex-shrink:0; position:relative;}
.heroArt::after{content:''; position:absolute; left:30%; right:30%; top:14%; bottom:14%; background:#e0a529; opacity:.5; border-radius:999px;}
.section{padding:16px 30px 0;}
.sectitle{font-size:18px; font-weight:700; margin:0 0 12px;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.card{background:#fff; border-radius:12px; padding:10px; text-align:center;}
.thumb{height:76px; border-radius:12px; margin-bottom:8px; position:relative;}
.t1{background:linear-gradient(135deg,#0626a9,#3a56d4);}
.t2{background:linear-gradient(135deg,#d44316,#f36d21);}
.t3{background:linear-gradient(135deg,#e0a529,#f5cf7d);}
.t4{background:linear-gradient(135deg,#ededed,#c8c8c8);}
.badge{position:absolute; top:5px; left:5px; background:#ed1f34; color:#fff; font-size:8px; font-weight:700; padding:2px 6px; border-radius:999px;}
.pname{font-size:12px; font-weight:600; margin-bottom:3px;}
.pprice{font-size:12px; color:#0626a9; font-weight:700;}
.footer{position:absolute; bottom:0; left:0; right:0; background:#fff; color:#888; font-size:10px; text-align:center; padding:8px 0; border-top:1px solid #ededed;}
</style>
<div class="nav">
<div class="logo">Harry S</div>
<div class="navlinks"><span>Shave</span><span>Skin</span><span>Hair</span><span>Sets</span></div>
<div class="navicons">Search · Account · Cart</div>
</div>
<div class="hero">
<div class="heroText">
<h1>Quality Shaving, Without the Markup</h1>
<p>Precision blades and skincare designed for everyday use — no luxury pricing, just good grooming done right.</p>
<div class="heroBtn">Start Your Set</div>
</div>
<div class="heroArt"></div>
</div>
<div class="section">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb t1"></div><div class="pname">Starter Razor Set</div><div class="pprice">$15</div></div>
<div class="card"><div class="thumb t2"><span class="badge">SALE</span></div><div class="pname">Refill Cartridges (8ct)</div><div class="pprice">$18</div></div>
<div class="card"><div class="thumb t3"></div><div class="pname">Face Wash Duo</div><div class="pprice">$24</div></div>
<div class="card"><div class="thumb t4"></div><div class="pname">Travel Dopp Kit</div><div class="pprice">$32</div></div>
</div>
</div>
<div class="footer">© Harry S — Grooming Essentials, Fairly Priced</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #E8645A; color: #FFFFFF;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #FFFFFF; color: #E8645A;
border: 1px solid #E8645A; border-radius: 9999px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #FDF0EE; color: #E8645A;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Century Gothic', Arial, sans-serif; color:#1A1A1A; }
*{box-sizing:border-box;}
.nav{height:64px;background:#ffffff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:600;color:#E8645A;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;color:#3D3D3D;}
.cart{width:34px;height:34px;border-radius:9999px;background:#FDF0EE;}
.hero{height:220px;background:#FDF0EE;display:flex;align-items:center;padding:0 32px;}
.heroText{width:440px;}
.h1{font-size:28px;font-weight:600;line-height:1.2;margin:0 0 10px;}
.sub{font-size:13px;color:#3D3D3D;margin:0 0 16px;max-width:340px;}
.btn{display:inline-flex;align-items:center;height:44px;padding:0 26px;border-radius:9999px;background:#E8645A;color:#fff;font-size:13px;font-weight:600;}
.boxwrap{width:400px;height:220px;position:relative;}
.box{position:absolute;left:170px;top:50px;width:90px;height:120px;border-radius:16px;background:#ffffff;border:2px solid #E8645A;}
.stripe{position:absolute;left:170px;top:80px;width:90px;height:14px;background:#E8645A;}
.sec{padding:18px 32px;}
.sectitle{font-size:15px;font-weight:600;margin-bottom:12px;}
.quizbar{display:flex;gap:6px;margin-bottom:14px;}
.seg{flex:1;height:6px;border-radius:9999px;background:#FAD4CF;}
.seg.on{background:#E8645A;}
.grid{display:flex;gap:14px;}
.card{width:216px;background:#FDF5F4;border-radius:16px;padding:12px;}
.thumb{height:84px;border-radius:10px;margin-bottom:10px;}
.ptitle{font-size:13px;font-weight:600;margin-bottom:4px;}
.pprice{font-size:14px;font-weight:600;}
</style>
<div class="nav">
<div class="logo">Stix</div>
<div class="navlinks"><span>Pregnancy</span><span>Fertility</span><span>Wellness</span></div>
<div class="cart"></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Feel a little less<br>alone at 6 a.m.</div>
<div class="sub">Pregnancy and fertility tests designed to feel reassuring, not clinical.</div>
<div class="btn">Take the Quiz</div>
</div>
<div class="boxwrap"><div class="box"></div><div class="stripe"></div></div>
</div>
<div class="sec">
<div class="sectitle">Find Your Test</div>
<div class="quizbar"><div class="seg on"></div><div class="seg on"></div><div class="seg on"></div><div class="seg"></div><div class="seg"></div></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#E8645A"></div><div class="ptitle">Pregnancy Test, 2ct</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb" style="background:#FAD4CF"></div><div class="ptitle">Ovulation Test Kit</div><div class="pprice">$19.99</div></div>
<div class="card"><div class="thumb" style="background:#4CAF7D"></div><div class="ptitle">Early Result Test, 4ct</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="thumb" style="background:#3D3D3D"></div><div class="ptitle">Prenatal Vitamin Pack</div><div class="pprice">$29.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #5f3f3f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #5f3f3f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #5f3f3f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777620; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #a9c7e7; color: #2b2b2b;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f6f6f6; color: #5f3f3f;
border: 1px solid #a9c7e7; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #454545;
border: 1px solid #c5c5c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777620; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #fffa90; color: #5f3f3f;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6f6f6; color:#5f3f3f; box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#f6f6f6; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:20px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; }
.navlinks span:first-child { border-bottom:2px solid #a9c7e7; padding-bottom:4px; }
.chips { display:flex; gap:8px; padding:0 36px 14px; }
.chip { border:1px solid #c5c5c5; border-radius:9999px; padding:6px 14px; font-size:12px; background:#fff; }
.chip.active { background:#a9c7e7; color:#2b2b2b; border:none; font-weight:600; }
.hero { background:#eeeeee; padding:28px 36px; display:flex; align-items:center; gap:32px; }
.hero-copy { flex:1.2; }
.hero h1 { font-size:32px; font-weight:700; line-height:1.2; letter-spacing:-0.5px; margin:0 0 10px; }
.hero p { font-size:14px; color:#454545; margin:0 0 16px; max-width:400px; line-height:1.5; }
.row { display:flex; gap:10px; }
.btn-primary { background:#a9c7e7; color:#2b2b2b; border:none; border-radius:8px; padding:12px 22px;
font-size:13px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; height:44px; }
.btn-accent { background:#dad55e; color:#2b2b2b; border:none; border-radius:8px; padding:12px 22px;
font-size:13px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; height:44px; }
.hero-visual { flex:1; height:170px; border-radius:12px; position:relative; overflow:hidden; background:#fff; }
.hero-visual .b1 { position:absolute; width:90px; height:90px; border-radius:16px; background:#f1a899; left:20px; top:20px; transform:rotate(-8deg); }
.hero-visual .b2 { position:absolute; width:70px; height:70px; border-radius:50%; background:#dad55e; right:36px; top:44px; }
.hero-visual .b3 { position:absolute; width:80px; height:80px; border-radius:12px; background:#a9c7e7; right:100px; bottom:16px; transform:rotate(10deg); }
.section { padding:16px 36px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-size:22px; font-weight:700; margin:0; }
.sec-head span { font-size:13px; font-weight:600; color:#5f3f3f; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#ffffff; border-radius:12px; padding:16px; }
.thumb { height:100px; border-radius:8px; position:relative; margin-bottom:10px; }
.t1 { background:linear-gradient(150deg,#f1a899,#fddfdf); }
.t2 { background:linear-gradient(150deg,#a9c7e7,#d4e3f3); }
.t3 { background:linear-gradient(150deg,#dad55e,#fffa90); }
.badge { position:absolute; top:8px; left:8px; background:#fffa90; color:#5f3f3f; font-size:10px; font-weight:700;
letter-spacing:0.3px; text-transform:uppercase; padding:4px 8px; border-radius:4px; }
.card h3 { font-size:16px; font-weight:600; margin:0 0 4px; }
.card .price { font-size:16px; margin:0 0 10px; color:#454545; }
.addbtn { width:100%; background:#f6f6f6; color:#5f3f3f; border:none; border-radius:8px; padding:9px;
font-size:12px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
footer { background:#2b2b2b; color:#eeeeee; font-size:12px; padding:16px 36px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#eeeeee; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Beginagain</p>
<div class="navlinks"><span>Toys</span><span>Music</span><span>Wood Play</span><span>Gifts</span></div>
</nav>
<div class="chips">
<div class="chip active">All Ages</div>
<div class="chip">0–2</div>
<div class="chip">3–5</div>
<div class="chip">6+</div>
</div>
<section class="hero">
<div class="hero-copy">
<h1>Toys that let imagination lead</h1>
<p>Solid wood, saturated color, no batteries required — playthings built to be handed down, not thrown away.</p>
<div class="row">
<button class="btn-primary">Shop Now</button>
<button class="btn-accent">New Arrivals</button>
</div>
</div>
<div class="hero-visual"><div class="b1"></div><div class="b2"></div><div class="b3"></div></div>
</section>
<section class="section">
<div class="sec-head"><h2>Favorites</h2><span>See All</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge">Bestseller</span></div>
<h3>Rainbow Wood Xylophone</h3>
<p class="price">$29.00</p>
<button class="addbtn">Add to Cart</button>
</div>
<div class="card">
<div class="thumb t2"></div>
<h3>Stacking Cloud Blocks</h3>
<p class="price">$34.50</p>
<button class="addbtn">Add to Cart</button>
</div>
<div class="card">
<div class="thumb t3"><span class="badge">New</span></div>
<h3>Wooden Shape Sorter</h3>
<p class="price">$22.00</p>
<button class="addbtn">Add to Cart</button>
</div>
</div>
</section>
<footer>
<span>© Beginagain</span>
<div><a href="#">Shop</a><a href="#">About</a><a href="#">Support</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3e6ae1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3e6ae1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a3b6ec; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3e6ae1; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3e6ae1; color: #f5f5f5;
border: 1px solid #5b80e4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a3b6ec; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5d82e6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#393c41; box-sizing:border-box;
font-family:"Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { height:280px; background:linear-gradient(160deg,#e9e9ea,#c9cbce 60%,#a6a9ad); position:relative; }
nav { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center;
padding:16px 40px; }
.navlinks { display:flex; gap:16px; }
.navlinks span { color:#fff; font-size:14px; font-weight:500; background:rgba(0,0,0,0.35); border-radius:4px;
padding:4px 16px; }
.hero h1 { position:absolute; left:40px; top:80px; font-size:48px; font-weight:500; color:#171a20; margin:0; }
.hero-ctas { position:absolute; left:40px; top:160px; display:flex; gap:8px; }
.cta-primary { background:#3e6ae1; color:#fff; border-radius:4px; padding:10px 20px; font-size:14px; font-weight:500; }
.cta-outline { background:#fff; color:#393c41; border-radius:4px; padding:10px 20px; font-size:14px; font-weight:500; }
.dots { position:absolute; bottom:16px; left:40px; display:flex; gap:6px; }
.dot { width:8px; height:8px; border-radius:8px; background:#ffffff; }
.dot.off { background:#d0d1d2; }
.cards { display:flex; gap:0; padding:22px 40px 0; }
.card { flex:1; background:#f4f4f4; border-radius:8px; padding:32px 24px 48px; margin-right:16px; }
.card:last-child { margin-right:0; }
.card h2 { font-size:26px; font-weight:500; color:#171a20; margin:0 0 8px; }
.card p { font-size:15px; color:#393c41; margin:0; line-height:1.4; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #f4f4f4; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#5c5e62; }
</style></head>
<body>
<div class="hero">
<nav>
<div class="navlinks"><span>Model S</span><span>Model 3</span><span>Model X</span><span>Model Y</span></div>
<div class="navlinks"><span>Shop</span></div>
</nav>
<h1>Model 3</h1>
<div class="hero-ctas"><div class="cta-primary">Order Now</div><div class="cta-outline">Demo Drive</div></div>
<div class="dots"><div class="dot"></div><div class="dot off"></div><div class="dot off"></div></div>
</div>
<div class="cards">
<div class="card"><h2>Performance</h2><p>Zero to 60 mph in as little as 2.9 seconds.</p></div>
<div class="card"><h2>Range</h2><p>Up to 363 miles of estimated range.</p></div>
</div>
<footer><span>© Tesla</span><span>Tesla · Support · Shop</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f2ec; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f2ec; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #636262; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #5b1d10; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #f5f2ec; color: #5b1d10;
border: 1px solid #5b1d10; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f5f2ec; color: #212121;
border: 1px solid #c0beb9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #636262; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #ab8c52; color: #f5f2ec;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f2ec; font-family:'Figtree',Arial,sans-serif; color:#2e2e2e; }
*{box-sizing:border-box;}
.nav{height:62px;background:#f5f2ec;border-bottom:1px solid #d9d9d9;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-family:'PPWoodland-Regular',Georgia,serif;font-size:19px;color:#5b1d10;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#2e2e2e;}
.hero{height:220px;display:flex;align-items:center;padding:0 34px;gap:36px;}
.herotext{width:400px;}
h1{font-family:'PPWoodland-Regular',Georgia,serif;font-size:32px;font-weight:400;color:#5b1d10;margin:0 0 12px;line-height:1.2;}
.sub{font-size:14px;color:#2e2e2e;line-height:1.6;margin:0 0 18px;width:360px;}
.cta{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 28px;background:#5b1d10;color:#fff;font-size:13px;font-weight:600;border-radius:9999px;}
.mat{width:200px;height:170px;position:relative;}
.rolled{position:absolute;width:180px;height:44px;left:10px;top:60px;border-radius:9999px;background:linear-gradient(90deg,#ab8c52,#5b1d10);}
.rolled:before{content:'';position:absolute;left:-4px;top:-4px;width:52px;height:52px;border-radius:9999px;background:#5b1d10;}
.eco{position:absolute;left:10px;top:10px;background:#ab8c52;color:#f5f2ec;font-size:10px;font-weight:600;padding:3px 9px;border-radius:9999px;}
.section{padding:0 34px;}
.sectitle{font-family:'PPWoodland-Regular',Georgia,serif;font-size:20px;color:#5b1d10;margin:18px 0 14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fcfbf9;border-radius:12px;padding:12px;position:relative;}
.thumb{height:110px;border-radius:8px;margin-bottom:10px;}
.tag{position:absolute;top:8px;left:8px;font-size:9px;font-weight:600;padding:3px 8px;border-radius:9999px;color:#f5f2ec;}
.tag.eco{background:#ab8c52;}
.tag.sale{background:#c65d52;}
.ptitle{font-size:14px;font-weight:500;color:#2e2e2e;line-height:1.3;height:36px;overflow:hidden;}
.pprice{font-size:14px;font-weight:600;color:#5b1d10;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Yogi Bare</div>
<div class="navlinks"><div>Mats</div><div>Blocks</div><div>Straps</div><div>Apparel</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Grounded practice, honest materials.</h1>
<div class="sub">Cork and natural rubber yoga mats made for a studio that smells of cedar, not plastic.</div>
<div class="cta">Shop Mats</div>
</div>
<div class="mat"><div class="rolled"></div><div class="eco">Eco</div></div>
</div>
<div class="section">
<div class="sectitle">Bestselling Mats</div>
<div class="grid">
<div class="card"><span class="tag eco">Eco</span><div class="thumb" style="background:linear-gradient(150deg,#ab8c52,#5b1d10)"></div><div class="ptitle">Cork Alignment Mat</div><div class="pprice">$92.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#c65d52,#5b1d10)"></div><div class="ptitle">Rubber Grip Mat</div><div class="pprice">$78.00</div></div>
<div class="card"><span class="tag sale">Sale</span><div class="thumb" style="background:linear-gradient(150deg,#00164d,#5b1d10)"></div><div class="ptitle">Travel Yoga Mat</div><div class="pprice">$58.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#806430,#5b1d10)"></div><div class="ptitle">Cork Yoga Blocks (Pair)</div><div class="pprice">$34.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Kakao Games detail mock</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:'SUIT Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
* { box-sizing:border-box; }
.wrap { width:960px; height:640px; display:grid; grid-template-rows:56px 260px 1fr 48px; }
/* nav */
.nav { display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #000000; }
.nav .brand { font-size:20px; font-weight:700; letter-spacing:-0.2px; color:#000000; }
.nav .links { display:flex; gap:24px; }
.nav .links span { font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#000000; }
/* hero */
.hero { position:relative; overflow:hidden; background:#000000; }
.heroart { position:absolute; inset:0;
background:
radial-gradient(420px 320px at 78% 20%, rgba(255,150,60,0.35), rgba(255,150,60,0) 70%),
linear-gradient(135deg, #2a2a2a 0%, #101010 55%, #000000 100%); }
.heroart .ridge { position:absolute; left:0; right:0; bottom:0; height:120px;
background:#000000; clip-path:polygon(0% 100%, 0% 60%, 15% 40%, 30% 65%, 46% 30%, 62% 58%, 78% 20%, 100% 50%, 100% 100%); opacity:0.85; }
.herotext { position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
justify-content:center; padding:0 40px; gap:14px; max-width:640px; }
.tag { display:inline-flex; align-self:flex-start; border:1px solid #ffffff; color:#ffffff;
font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; padding:5px 12px; }
.herotext h1 { margin:0; font-size:50px; font-weight:700; line-height:1.2; letter-spacing:0; color:#ffffff; }
.herotext p { margin:0; font-size:16px; font-weight:300; line-height:1.4; color:#ffffff; opacity:0.85; max-width:480px; }
.arrow { position:absolute; right:24px; bottom:20px; z-index:3; width:60px; height:60px;
border:1px solid #ffffff; display:flex; align-items:center; justify-content:center; }
.arrow span { display:block; width:12px; height:12px; border-right:2px solid #ffffff; border-bottom:2px solid #ffffff;
transform:rotate(-135deg); }
/* catalogue */
.catalogue { padding:24px 32px 0 32px; }
.catalogue h2 { margin:0 0 18px 0; font-size:34px; font-weight:600; line-height:1; color:#000000; }
.cards { display:flex; gap:20px; }
.card { flex:1; border:1px solid #000000; border-radius:0; padding-bottom:40px; display:flex; flex-direction:column; }
.card .art { height:96px; position:relative; overflow:hidden; border-bottom:1px solid #000000; }
.card .art .b1 { position:absolute; inset:0; background:linear-gradient(160deg,#1c1c1c,#000000); }
.card .art .b2 { position:absolute; width:70px; height:70px; border-radius:50%; right:-20px; top:-20px; }
.card.c1 .art .b2 { background:radial-gradient(circle, rgba(120,180,255,0.55), rgba(120,180,255,0) 70%); }
.card.c2 .art .b2 { background:radial-gradient(circle, rgba(255,120,90,0.5), rgba(255,120,90,0) 70%); }
.card.c3 .art .b2 { background:radial-gradient(circle, rgba(200,150,255,0.5), rgba(200,150,255,0) 70%); }
.card .meta { padding:14px 14px 0 14px; }
.card .meta .title { font-size:15px; font-weight:700; color:#000000; }
.card .meta .genre { margin-top:4px; font-size:12px; font-weight:400; color:#898989; }
/* footer */
.footer { border-top:1px solid #000000; padding:0 32px; display:flex; align-items:center;
justify-content:space-between; font-size:14px; font-weight:300; line-height:1.4; color:#898989; }
.footer .links { display:flex; gap:18px; }
</style></head>
<body>
<div class="wrap">
<div class="nav">
<div class="brand">Kakao Games</div>
<div class="links"><span>Games</span><span>Studios</span><span>News</span></div>
</div>
<div class="hero">
<div class="heroart"><div class="ridge"></div></div>
<div class="herotext">
<div class="tag">MMORPG · Global Launch</div>
<h1>Emberfall Odyssey</h1>
<p>An open-world adventure spanning mobile, PC, and console — uniting players across every platform this fall.</p>
</div>
<div class="arrow"><span></span></div>
</div>
<div class="catalogue">
<h2>More from our studios</h2>
<div class="cards">
<div class="card c1">
<div class="art"><div class="b1"></div><div class="b2"></div></div>
<div class="meta"><div class="title">Nebula Frontier</div><div class="genre">MMORPG</div></div>
</div>
<div class="card c2">
<div class="art"><div class="b1"></div><div class="b2"></div></div>
<div class="meta"><div class="title">Iron Requiem</div><div class="genre">Strategy</div></div>
</div>
<div class="card c3">
<div class="art"><div class="b1"></div><div class="b2"></div></div>
<div class="meta"><div class="title">Whisker Kingdoms</div><div class="genre">Casual</div></div>
</div>
</div>
</div>
<div class="footer">
<span>© Kakao Games. All titles and trademarks are property of their respective owners.</span>
<div class="links"><span>Privacy</span><span>Terms</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #1d1d1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #1d1d1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #1d1d1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #ae81ac; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #70377c; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #fafafa; color: #70377c;
border: 1px solid #70377c; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #1d1d1f;
border: 1px solid #c3c3c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ae81ac; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #70377c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Eureka — Home</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#fafafa; color:#434343;
font-family:Gotham,'Sk-Modernist',sans-serif;
}
*{box-sizing:border-box;}
.page{width:960px;height:640px;display:flex;flex-direction:column;}
header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #dedede;}
.logo{font-family:'Sk-Modernist','Modernist Bold',Gotham,sans-serif;font-size:20px;font-weight:700;color:#1d1d1f;}
.logo span{color:#70377c;}
nav{display:flex;gap:22px;}
nav a{font-size:12px;font-weight:600;color:#434343;}
.nav-cta{background:#70377c;color:#fff;padding:8px 18px;border-radius:8px;font-size:12px;font-weight:600;}
.hero{position:relative;height:200px;background:linear-gradient(120deg,#f6f6f6,#efefef);display:flex;align-items:center;padding:0 30px;overflow:hidden;}
.hero::after{content:'';position:absolute;right:60px;top:30px;bottom:30px;width:150px;border-radius:12px;background:linear-gradient(160deg,#70377c,#7037cc);opacity:0.15;}
.vac{position:absolute;right:100px;top:24px;width:110px;height:150px;}
.vac-body{position:absolute;bottom:0;left:20px;width:60px;height:90px;border-radius:14px;background:linear-gradient(160deg,#8a4694,#5c2d66);}
.vac-handle{position:absolute;top:0;left:44px;width:8px;height:70px;background:#3a3a3a;border-radius:4px;}
.hero-copy{max-width:340px;z-index:2;}
.hero-copy .kicker{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#70377c;margin-bottom:8px;}
.hero-copy h1{font-family:'Sk-Modernist','Modernist Bold',Gotham,sans-serif;font-size:28px;font-weight:700;color:#1d1d1f;margin:0 0 10px;line-height:1.2;}
.hero-copy p{font-size:12.5px;color:#434343;max-width:300px;margin:0 0 14px;line-height:1.6;}
.hero-cta{display:inline-block;background:#70377c;color:#fff;padding:10px 20px;border-radius:8px;font-size:12px;font-weight:600;}
main{flex:1;padding:16px 30px 0;}
.row-head{display:flex;justify-content:space-between;margin-bottom:12px;}
.row-head h2{font-size:16px;margin:0;color:#1d1d1f;font-family:'Sk-Modernist',Gotham,sans-serif;}
.row-head span{font-size:11px;color:#70377c;font-weight:600;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#f5f5f5;border-radius:12px;padding:10px;position:relative;}
.thumb{height:64px;border-radius:8px;background:linear-gradient(150deg,#e5d5e8,#efefef);margin-bottom:8px;}
.badge{position:absolute;top:6px;left:6px;font-size:8px;font-weight:700;padding:3px 6px;border-radius:4px;color:#fff;background:#7037cc;text-transform:uppercase;}
.card h4{font-size:11px;margin:0 0 4px;color:#1d1d1f;font-weight:600;}
.card .price{font-size:13px;font-weight:700;color:#70377c;}
footer{background:#1f1f1f;padding:14px 30px;display:flex;justify-content:space-between;align-items:center;margin-top:14px;}
footer span{font-size:10px;color:#949494;}
</style>
<div class="page">
<header>
<div class="logo">Eureka<span>.</span></div>
<nav><a>Vacuums</a><a>Stick Vacs</a><a>Robot Vacs</a><a>Filters</a></nav>
<div class="nav-cta">Shop Now</div>
</header>
<div class="hero">
<div class="vac"><div class="vac-body"></div><div class="vac-handle"></div></div>
<div class="hero-copy">
<div class="kicker">Cyclone Filtration Systems</div>
<h1>Floor care that reads like consumer electronics.</h1>
<p>HEPA-stack filtration and motor engineering, presented with the confidence of a device launch.</p>
<div class="hero-cta">Shop Vacuums</div>
</div>
</div>
<main>
<div class="row-head"><h2>Popular This Month</h2><span>Shop All →</span></div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb"></div><h4>NeatoBlade Cordless Stick</h4><div class="price">$249.99</div></div>
<div class="card"><div class="thumb"></div><h4>PowerSpeed Upright</h4><div class="price">$179.99</div></div>
<div class="card"><div class="thumb"></div><h4>Cyclone Pet Pro</h4><div class="price">$219.99</div></div>
<div class="card"><div class="thumb"></div><h4>HEPA Filter 3-Pack</h4><div class="price">$34.99</div></div>
</div>
</main>
<footer>
<span>© Eureka — Floor Care Engineering</span>
<span>Filter Finder · Warranty · Support</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #818182; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #007fad; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: transparent; color: #007fad;
border: 1px solid #007fad; border-radius: 4px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1e1e1e;
border: 1px solid #c2c2c2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #818182; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; letter-spacing: 0.5px; background: #e53c3c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f9f9; font-family:Lato,Arial,sans-serif; color:#383d41; }
*{box-sizing:border-box;}
.stripbar{height:32px;background:#007fad;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;text-transform:uppercase;}
.nav{height:64px;background:#002543;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:700;color:#fff;}
.hero{height:220px;background:#002543;display:flex;align-items:center;padding:0 32px;gap:26px;}
.herotext{width:46%;}
.herotext h1{font-size:32px;font-weight:700;color:#fff;margin:0 0 10px;line-height:1.2;}
.herotext p{font-size:14px;color:#e0e0e0;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#007fad;color:#fff;font-size:16px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:14px 28px;border-radius:4px;}
.deskart{flex:1;height:140px;position:relative;}
.top{position:absolute;left:10%;top:24px;width:80%;height:12px;background:#00a1e0;border-radius:2px;}
.legd{position:absolute;top:36px;width:6px;height:70px;background:#94e1ff;}
.legd1{left:22%;} .legd2{right:22%;}
.spec{display:flex;gap:14px;padding:16px 32px 0;}
.speccell{flex:1;background:#ececf6;border:1px solid #c8cbcf;border-radius:8px;padding:14px;text-align:center;}
.speclabel{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#818182;}
.specvalue{font-size:24px;font-weight:700;color:#1e1e1e;margin-top:4px;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:206px;background:#fff;border:1px solid #d6d8db;border-radius:8px;padding:16px;}
.thumb{height:90px;border-radius:4px;margin-bottom:8px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#e53c3c;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-radius:4px;padding:2px 8px;}
.ptitle{font-size:18px;font-weight:700;}
.pprice{font-size:22px;font-weight:700;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#002543;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#00a1e0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="stripbar">Free Shipping on All Standing Desks</div>
<div class="nav">
<div class="logo">Vari</div>
<div class="navlinks"><div>Standing Desks</div><div>Monitor Arms</div><div>Chairs</div><div>Compare</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Move more. Sit less. Work better.</h1>
<p>Height-adjustable desks and ergonomic gear built for real office days.</p>
<div class="cta">Shop Standing Desks</div>
</div>
<div class="deskart">
<div class="top"></div>
<div class="legd legd1"></div>
<div class="legd legd2"></div>
</div>
</div>
<div class="spec">
<div class="speccell"><div class="speclabel">Lift Range</div><div class="specvalue">25.6-52"</div></div>
<div class="speccell"><div class="speclabel">Weight Cap.</div><div class="specvalue">220 lbs</div></div>
<div class="speccell"><div class="speclabel">Warranty</div><div class="specvalue">7 Years</div></div>
</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#007fad,#002543)"></div><div class="ptitle">Electric Standing Desk</div><div class="pprice">$399</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00a1e0,#002543)"></div><div class="ptitle">Dual Monitor Arm</div><div class="pprice">$89</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#002543,#005474)"></div><div class="ptitle">Ergonomic Task Chair</div><div class="pprice">$249</div></div>
</div>
<div class="footer"><span>© Ergonomic Workspace Furniture</span><span>Compare Models · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffc000; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffc000; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c6009; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #917300; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffc000; color: #917300;
border: 1px solid #917300; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffc000; color: #111111;
border: 1px solid #d9a403; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c6009; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #edb400; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:"LamboType",Roboto,"Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; background:#000000; }
.brand { font-size:18px; font-weight:400; letter-spacing:0.14em; text-transform:uppercase; }
.navlinks { display:flex; gap:30px; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:#c4c4c4; }
.navlinks .on { color:#ffffff; border-bottom:2px solid #ffc000; padding-bottom:18px; }
.hero { position:relative; height:330px; background:
linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.75) 70%, #000 100%),
linear-gradient(115deg, #1a1a1a 0%, #303030 38%, #0d0d0d 60%, #000000 100%);
display:flex; align-items:flex-end; overflow:hidden; }
.hero::before { content:''; position:absolute; left:8%; right:8%; bottom:60px; height:2px;
background:linear-gradient(90deg, transparent, rgba(255,192,0,0.55), transparent); }
.hero .wedge { position:absolute; right:-40px; top:20px; width:520px; height:220px;
background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.06) 35%, transparent 55%);
transform:skewX(-18deg); }
.hero-content { position:relative; padding:28px 32px 24px; }
.hero .kicker { font-size:11px; letter-spacing:0.22em; color:#ffc000; text-transform:uppercase; margin-bottom:10px; }
.hero h1 { font-size:52px; font-weight:400; letter-spacing:0.01em; line-height:0.98; margin:0 0 16px; text-transform:uppercase; }
.hero .row { display:flex; gap:0; }
.btn-accent { background:#ffc000; color:#000000; padding:16px 28px; font-size:14px; letter-spacing:0.08em;
text-transform:uppercase; font-weight:400; }
.btn-outline { color:#ffffff; border:1px solid #ffffff; padding:16px 28px; font-size:14px; letter-spacing:0.08em;
text-transform:uppercase; font-weight:400; }
.strip { display:grid; grid-template-columns:repeat(3,1fr); background:#000000; }
.model { position:relative; height:250px; border-right:1px solid #202020; overflow:hidden; }
.model:last-child { border-right:none; }
.model .plate { position:absolute; inset:0; }
.m1 .plate { background:linear-gradient(145deg,#2b2b2b,#0a0a0a 70%); }
.m2 .plate { background:linear-gradient(145deg,#3a2f00,#0a0a0a 70%); }
.m3 .plate { background:linear-gradient(145deg,#242424,#000000 70%); }
.model .stripe { position:absolute; left:0; right:0; bottom:78px; height:1px; background:rgba(255,192,0,0.4); }
.model .info { position:absolute; left:20px; bottom:20px; }
.model .info .cat { font-size:10px; letter-spacing:0.18em; color:#969696; text-transform:uppercase; margin-bottom:6px; }
.model .info .name { font-size:22px; font-weight:400; letter-spacing:0.02em; text-transform:uppercase; }
</style></head>
<body>
<nav>
<div class="brand">Lamborghini</div>
<div class="navlinks"><span class="on">Models</span><span>Ownership</span><span>Racing</span><span>News</span></div>
</nav>
<section class="hero">
<div class="wedge"></div>
<div class="hero-content">
<div class="kicker">Driving Humans Beyond</div>
<h1>Brave. Unexpected.<br>Authentic.</h1>
<div class="row"><span class="btn-accent">Discover the Range</span><span class="btn-outline">Configure</span></div>
</div>
</section>
<div class="strip">
<div class="model m1"><div class="plate"></div><div class="stripe"></div><div class="info"><div class="cat">V12 · Coupe</div><div class="name">Revuelto</div></div></div>
<div class="model m2"><div class="plate"></div><div class="stripe"></div><div class="info"><div class="cat">V8 · Hybrid</div><div class="name">Temerario</div></div></div>
<div class="model m3"><div class="plate"></div><div class="stripe"></div><div class="info"><div class="cat">V12 · SUV</div><div class="name">Urus</div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #444444;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #444444;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: 0.01em; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #7e8993; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; background: #016087; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; background: #ffffff; color: #016087;
border: 1px solid #016087; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #444444;
border: 1px solid #d0d0d0; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7e8993; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; background: #016087; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,'Helvetica Neue',sans-serif; color:#444444; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid #dadada;}
.logo{font-size:18px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;}
.navlinks{position:absolute;left:34px;display:flex;gap:24px;font-size:13px;letter-spacing:.05em;color:#444444;}
.icons{position:absolute;right:34px;font-size:13px;letter-spacing:.05em;color:#444444;}
.hero{height:250px;background:#f3f5f6;display:flex;align-items:center;padding:0 34px;gap:30px;}
.herotext{width:44%;}
.herotext h1{font-family:Georgia,serif;font-size:34px;font-weight:300;margin:0 0 12px;line-height:1.2;letter-spacing:.02em;}
.herotext p{font-size:15px;color:#7e8993;margin:0 0 20px;max-width:320px;}
.cta{display:inline-block;background:#016087;color:#fff;font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:14px 32px;}
.heroimg{flex:1;height:180px;background:linear-gradient(135deg,#135e96,#043959);position:relative;}
.heroimg:before{content:'';position:absolute;left:40%;top:30%;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.2);}
.configurator{padding:22px 34px 0;border-top:1px solid #dadada;}
.configlabel{font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px;}
.swatches{display:flex;gap:10px;}
.swatch{width:32px;height:32px;border-radius:50%;border:1px solid #dadada;}
.swatch.active{border:2px solid #016087;}
.grid{display:flex;gap:22px;padding:22px 34px 0;}
.card{width:206px;background:#f3f5f6;}
.thumb{aspect-ratio:1/1;height:120px;}
.ptitle{font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-top:10px;}
.pprice{font-family:Georgia,serif;font-size:18px;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:48px;background:#444444;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:13px;color:#ccd0d4;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="navlinks"><div>Collections</div><div>Engagement</div><div>About</div></div>
<div class="logo">Vanessa Fernandez</div>
<div class="icons">Wishlist · Account</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Rings meant to be seen up close.</h1>
<p>Hand-set stones and precision metalwork, designed one ring at a time.</p>
<div class="cta">Book a Private Consultation</div>
</div>
<div class="heroimg"></div>
</div>
<div class="configurator">
<div class="configlabel">Choose Your Metal</div>
<div class="swatches">
<div class="swatch active" style="background:#e8c48c"></div>
<div class="swatch" style="background:#e8e2d8"></div>
<div class="swatch" style="background:#d8d0c8"></div>
<div class="swatch" style="background:#e0b8a8"></div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e8c48c,#f3f5f6)"></div><div class="ptitle">The Willowmere Solitaire</div><div class="pprice">$4,200</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#135e96,#f3f5f6)"></div><div class="ptitle">The Ashford Halo</div><div class="pprice">$3,850</div></div>
</div>
<div class="footer"><span>© Fine Jewelry Atelier</span><span>Collections · Contact · Care</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fafafa; color: #111111;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #444444;
border: 1px solid #c0c0c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fbcd0a; color: #111111;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Montserrat','Open Sans',sans-serif; background:#fafafa; color:#111111; }
*{box-sizing:border-box;}
.nav{height:72px;background:#fafafa;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:19px;font-weight:700;color:#111;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;letter-spacing:.3px;}
.hero{height:270px;background:#121212;display:flex;align-items:center;padding:0 44px;color:#fff;}
.left{width:52%;}
.left h1{font-size:36px;font-weight:700;line-height:1.2;margin:0 0 14px;}
.left p{font-size:15px;color:#c9c9c9;max-width:340px;margin:0 0 18px;}
.btn{display:inline-block;background:#108474;color:#fff;font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:14px 32px;border-radius:8px;}
.right{width:48%;height:180px;border-radius:10px;background:linear-gradient(135deg,#5c4225,#8a6438 60%);position:relative;}
.right:before{content:'';position:absolute;left:35%;top:25%;width:80px;height:120px;border-radius:6px;background:rgba(255,255,255,.15);}
.section{padding:22px 40px 0;}
.sectitle{font-size:24px;font-weight:600;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:8px;overflow:hidden;}
.thumb{height:100px;background:linear-gradient(135deg,#7a5a3a,#4a3524);position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#fbcd0a;color:#111;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 7px;border-radius:2px;}
.cbody{padding:12px;}
.ptitle{font-size:16px;font-weight:500;}
.pprice{font-size:16px;color:#444;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Woodchuck Usa</div>
<div class="navlinks"><div>Flasks</div><div>Watches</div><div>Journals</div><div>Custom</div></div>
</div>
<div class="hero">
<div class="left">
<h1>Wooden gifts that tell your story.</h1>
<p>Personalized flasks, watches, and journals made from real hardwood.</p>
<div class="btn">Customize Now</div>
</div>
<div class="right"></div>
</div>
<div class="section">
<div class="sectitle">Popular Gifts</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">Sale</div></div><div class="cbody"><div class="ptitle">Engraved Flask</div><div class="pprice">$34.99</div></div></div>
<div class="card"><div class="thumb"></div><div class="cbody"><div class="ptitle">Wooden Watch</div><div class="pprice">$89.99</div></div></div>
<div class="card"><div class="thumb"></div><div class="cbody"><div class="ptitle">Custom Journal</div><div class="pprice">$24.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #06c755; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #06c755; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #06c755; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #06c755; color: #000000;
border: 1px solid #2cce6f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #13b76e; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
.tabsbar { height:52px; display:flex; align-items:center; gap:28px; padding:0 24px;
border-bottom:1px solid #e8e8e8; }
.tabsbar .brand { font-size:16px; font-weight:900; margin-right:8px; }
.tab { font-size:14px; color:#000000; padding:16px 2px; border-bottom:2px solid transparent; position:relative; }
.tab.active { border-bottom-color:#06c755; font-weight:700; }
.tab .reddot { position:absolute; top:10px; right:-10px; width:7px; height:7px; border-radius:50%; background:#ff334b; }
.layout { display:flex; height:calc(640px - 52px); }
.chatlist { width:300px; border-right:1px solid #e8e8e8; overflow:hidden; }
.chatlist .row { display:flex; align-items:center; gap:12px; padding:12px 18px; }
.chatlist .row.selected { background:#f5faf6; }
.avatar { width:44px; height:44px; border-radius:50%; flex:none; display:flex; align-items:center;
justify-content:center; color:#ffffff; font-size:14px; font-weight:700; }
.a1 { background:#06c755; } .a2 { background:#638dff; } .a3 { background:#949494; }
.a4 { background:#4cc764; } .a5 { background:#ff334b; }
.chatmeta { flex:1; min-width:0; }
.chatmeta .name { font-size:14px; font-weight:700; color:#000000; }
.chatmeta .last { font-size:13px; color:#949494; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.chatright { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.chatright .time { font-size:11px; color:#949494; }
.unread { background:#06c755; color:#ffffff; font-size:11px; font-weight:700; border-radius:9999px;
min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding:0 5px; }
.convo { flex:1; display:flex; flex-direction:column; }
.convo-head { height:52px; border-bottom:1px solid #e8e8e8; display:flex; align-items:center;
gap:12px; padding:0 20px; }
.convo-head .name { font-size:15px; font-weight:700; }
.convo-head .status { font-size:12px; color:#949494; }
.thread { flex:1; padding:20px 24px; display:flex; flex-direction:column; gap:12px; background:#fafafa; }
.bubblerow { display:flex; }
.bubblerow.mine { justify-content:flex-end; }
.bubble { max-width:280px; padding:10px 14px; font-size:14px; line-height:1.45; border-radius:14px; }
.bubble.theirs { background:#efefef; color:#000000; border-bottom-left-radius:4px; }
.bubble.mine { background:#06c755; color:#ffffff; border-bottom-right-radius:4px; }
.stamp { font-size:11px; color:#949494; align-self:flex-end; margin:0 6px; }
.composer { border-top:1px solid #e8e8e8; padding:14px 20px; display:flex; align-items:center; gap:12px; }
.composer .field { flex:1; border:none; border-bottom:1px solid #949494; padding:8px 2px; font-size:14px; color:#000000; }
.sendbtn { background:#06c755; color:#ffffff; border-radius:5px; height:36px; padding:0 18px;
font-size:14px; font-weight:700; display:flex; align-items:center; }
</style></head>
<body>
<div class="tabsbar">
<span class="brand">LINE</span>
<span class="tab active">Chats</span>
<span class="tab">Calls</span>
<span class="tab">Timeline<span class="reddot"></span></span>
<span class="tab">Wallet</span>
</div>
<div class="layout">
<div class="chatlist">
<div class="row selected">
<div class="avatar a1">MJ</div>
<div class="chatmeta"><div class="name">Minji</div><div class="last">See you at 7, I'll bring snacks 🎒</div></div>
<div class="chatright"><span class="time">2:14</span></div>
</div>
<div class="row">
<div class="avatar a2">Team</div>
<div class="chatmeta"><div class="name">Weekend Hiking Group</div><div class="last">Jihoon: uploaded 4 photos</div></div>
<div class="chatright"><span class="time">1:02</span><span class="unread">3</span></div>
</div>
<div class="row">
<div class="avatar a3">SY</div>
<div class="chatmeta"><div class="name">Soyeon</div><div class="last">sent a sticker</div></div>
<div class="chatright"><span class="time">11:40</span></div>
</div>
<div class="row">
<div class="avatar a4">JW</div>
<div class="chatmeta"><div class="name">Jiwoo</div><div class="last">Thanks for today!</div></div>
<div class="chatright"><span class="time">Yesterday</span></div>
</div>
<div class="row">
<div class="avatar a5">Ops</div>
<div class="chatmeta"><div class="name">Delivery Notice</div><div class="last">Your package has shipped</div></div>
<div class="chatright"><span class="time">Mon</span><span class="unread">1</span></div>
</div>
</div>
<div class="convo">
<div class="convo-head">
<div class="avatar a1" style="width:32px;height:32px;font-size:12px;">MJ</div>
<div><div class="name">Minji</div><div class="status">Active now</div></div>
</div>
<div class="thread">
<div class="bubblerow"><div class="bubble theirs">Are we still on for the hike tomorrow?</div></div>
<div class="bubblerow mine"><div class="bubble mine">Yes! Meeting point is the north gate at 7</div></div>
<div class="bubblerow mine"><div class="bubble mine">I'll bring extra water this time</div></div>
<div class="bubblerow"><div class="bubble theirs">Perfect, see you at 7, I'll bring snacks 🎒</div></div>
<div class="stamp">Read 2:14</div>
</div>
<div class="composer">
<div class="field">Message</div>
<div class="sendbtn">Send</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f0e6; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f0e6; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.3px; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #105742; color: #fefefe;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #fefefe; color: #105742;
border: 1px solid #105742; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fefefe; color: #646464;
border: 1px solid #bfbcb5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cf263b; color: #fefefe;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f0e6; color:#212121; box-sizing:border-box;
font-family:'Figtree','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#105742; }
.brand { font-family:'Fraunces',Georgia,serif; font-size:22px; font-weight:800; letter-spacing:-0.5px; color:#fefefe; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#dfe8e3; }
.btn-primary { background:#fefefe; color:#105742; border:none; border-radius:8px; padding:11px 22px; font-size:13px; font-weight:700; }
main { display:flex; height:calc(640px - 76px - 44px); }
.gallery { width:400px; background:#ece5d4; position:relative; display:flex; align-items:center; justify-content:center; }
.egg { width:200px; height:230px; border-radius:50% 50% 46% 46% / 58% 58% 42% 42%;
background:radial-gradient(circle at 35% 30%,#1c7355,#0d4535 75%); box-shadow:0 20px 40px rgba(0,0,0,0.2); }
.egg::after { content:''; position:absolute; width:200px; height:14px; background:#3a2f1e; border-radius:4px;
bottom:120px; left:50%; transform:translateX(-100px); }
.badge-warranty { position:absolute; top:20px; left:20px; background:#a07636; color:#fefefe; font-size:11px;
font-weight:700; padding:4px 10px; border-radius:6px; }
.info { flex:1; padding:30px 34px; display:flex; flex-direction:column; gap:14px; }
.cat { font-size:12px; text-transform:uppercase; letter-spacing:0.5px; color:#888888; font-weight:600; }
h1 { font-family:'Fraunces',Georgia,serif; font-size:30px; font-weight:800; letter-spacing:-0.8px; margin:0; }
.quote { font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:14px; color:#646464;
border-left:3px solid #105742; padding-left:12px; }
.price-row { display:flex; align-items:center; gap:12px; }
.price { font-size:22px; font-weight:800; }
.sale { background:#cf263b; color:#fefefe; font-size:11px; font-weight:700; padding:3px 9px; border-radius:6px; }
.temp { display:flex; align-items:center; gap:8px; background:#f7f7f7; border-radius:8px; padding:10px 14px; font-size:12px; color:#646464; }
.temp .bar { flex:1; height:6px; background:#aadddd; border-radius:3px; position:relative; }
.temp .bar::after { content:''; position:absolute; left:62%; top:-3px; width:12px; height:12px; border-radius:9999px; background:#105742; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#105742; color:#fefefe; border:none; border-radius:8px; padding:14px; font-size:15px; font-weight:700; }
.btn-sec { background:#fefefe; color:#105742; border:1px solid #105742; border-radius:8px; padding:14px 18px; font-size:14px; font-weight:600; }
footer { padding:12px 34px; border-top:1px solid #cecbc7; font-size:11px; color:#888888; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Big Green Egg</div>
<div class="navlinks"><span>Grills</span><span>Accessories</span><span>Recipes</span><span>EGGcessories</span></div>
<button class="btn-primary">Find a Dealer</button>
</nav>
<main>
<div class="gallery"><span class="badge-warranty">Lifetime Warranty</span><div class="egg"></div></div>
<div class="info">
<span class="cat">Ceramic Kamado Grill</span>
<h1>Big Green Egg — Large</h1>
<p class="quote">"A single unbroken temperature curve, from low-and-slow to searing heat."</p>
<div class="price-row"><span class="price">$1,299.00</span><span class="sale">Save $100</span></div>
<div class="temp">Cooking mode: <b style="color:#212121">Low & Slow</b><div class="bar"></div>225°F</div>
<div class="btn-row">
<button class="btn-add">Add to Cart</button>
<button class="btn-sec">View Recipes</button>
</div>
</div>
</main>
<footer><span>© Big Green Egg</span><span>Lifetime Warranty · EGGhead Community</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #2b2b2b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #2b2b2b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #2b2b2b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.43; letter-spacing: 0.5px; background: #303030; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.43; letter-spacing: 0.5px; background: #f7f7f7; color: #303030;
border: 1px solid #303030; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.625; background: #f7f7f7; color: #2b2b2b;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.27; letter-spacing: 0.5px; background: #1f3521; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{
width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;
background:#f7f7f7;font-family:'ValueSans','ValueSans Medium','Helvetica Neue',Arial,sans-serif;
color:#707070;
}
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:56px;background:#dfd5c4;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.logo{font-weight:700;font-size:18px;color:#2b2b2b;letter-spacing:0.3px;}
.logo span{color:#1f3521;}
.navlinks{display:flex;gap:20px;}
.navlinks span{font-size:12px;font-weight:600;color:#303030;}
.cartbtn{background:#303030;color:#fff;font-size:12px;font-weight:600;padding:8px 18px;border-radius:8px;}
.hero{padding:26px 24px;display:flex;gap:24px;align-items:center;}
.heroText{flex:1.1;}
.heroText .leaf{color:#1f3521;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;}
.heroText h1{font-size:28px;font-weight:700;color:#2b2b2b;line-height:1.25;margin:0 0 8px;}
.heroText p{font-size:13px;color:#707070;margin:0 0 14px;max-width:400px;}
.heroBtn{display:inline-block;background:#303030;color:#fff;font-size:13px;font-weight:600;padding:11px 24px;border-radius:8px;}
.heroImg{flex:1;height:140px;background:linear-gradient(150deg,#dfd5c4,#eee5d6);border-radius:8px;position:relative;}
.heroImg .bottle{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:34px;height:100px;background:linear-gradient(180deg,#1f3521,#2f4d33);border-radius:6px 6px 3px 3px;}
.heroImg .cap{position:absolute;bottom:106px;left:50%;transform:translateX(-50%);width:20px;height:14px;background:#cc6328;border-radius:3px;}
.section{padding:14px 24px 0;}
.sectitle{font-size:14px;font-weight:700;color:#2b2b2b;margin:0 0 10px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#fff;border-radius:8px;overflow:hidden;}
.photo{aspect-ratio:1/1;background:linear-gradient(150deg,#f3f3f3,#e0e0e0);position:relative;}
.photo .bottle2{position:absolute;bottom:10%;left:50%;transform:translateX(-50%);width:32%;height:70%;background:linear-gradient(180deg,#1f3521,#2f4d33);border-radius:8px 8px 4px 4px;}
.greenbadge{position:absolute;top:6px;left:6px;background:#1f3521;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:8px;}
.ctitle{font-size:12px;font-weight:700;color:#2b2b2b;padding:8px 10px 0;}
.cprice{font-size:13px;font-weight:700;color:#303030;padding:2px 10px 10px;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#dfd5c4;color:#777777;font-size:11px;padding:10px 24px;display:flex;justify-content:space-between;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Grab Green<span>.</span></div>
<div class="navlinks"><span>Laundry</span><span>Dish</span><span>Home</span><span>Bundles</span></div>
<div class="cartbtn">Cart (2)</div>
</div>
<div class="hero">
<div class="heroText">
<div class="leaf">Plant-Powered</div>
<h1>Clean that trusts the ingredients list.</h1>
<p>Naturally-derived laundry pods, dish soaps, and home cleaners — no shouting, just what's inside.</p>
<div class="heroBtn">Shop Laundry</div>
</div>
<div class="heroImg"><div class="cap"></div><div class="bottle"></div></div>
</div>
<div class="section">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="photo"><div class="greenbadge">Plant-Based</div><div class="bottle2"></div></div>
<div class="ctitle">Laundry Detergent Pods</div><div class="cprice">$14.99</div></div>
<div class="card"><div class="photo"><div class="bottle2"></div></div>
<div class="ctitle">Dish Soap Concentrate</div><div class="cprice">$8.99</div></div>
<div class="card"><div class="photo"><div class="greenbadge">New</div><div class="bottle2"></div></div>
<div class="ctitle">All-Purpose Cleaner</div><div class="cprice">$9.99</div></div>
<div class="card"><div class="photo"><div class="bottle2"></div></div>
<div class="ctitle">Fabric Softener Pods</div><div class="cprice">$12.99</div></div>
</div>
</div>
<div class="footer"><span>© Grab Green</span><span>Cruelty-free · Biodegradable formulas</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb5505; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb5505; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb5505; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb5505; color: #f5f5f5;
border: 1px solid #ed6f2b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d3582b; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Noto Sans JP", "Noto Sans CJK JP", "Malgun Gothic", "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:54px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #e5e5e5; }
.brand { font-size:18px; font-weight:700; color:#eb5505; margin:0; letter-style:italic; }
.search { border:1px solid #d1d1d1; height:32px; width:220px; display:flex; align-items:center; padding:0 12px;
font-size:12px; color:#777777; }
.tabs { display:flex; gap:0; padding:0 28px; border-bottom:1px solid #e5e5e5; }
.tab { padding:12px 16px; font-size:16px; color:#333333; }
.tab.on { border-bottom:2px solid #eb5505; color:#333333; font-weight:700; }
.body { padding:22px 28px; height:498px; }
.head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; }
.head h2 { font-size:20px; font-weight:700; margin:0; }
.head .count { font-size:12px; color:#777777; }
.grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.card { background:#ffffff; border:1px solid #e5e5e5; border-radius:5px; padding:15px 20px 20px; }
.label { display:inline-block; background:#ffffff; color:#eb5505; border:1px solid #eb5505; font-size:11px;
padding:3.3px 11px; margin-bottom:10px; }
.device { width:100%; height:90px; background:linear-gradient(160deg,#f2f2f2,#dcdcdc); border-radius:5px; margin-bottom:12px;
position:relative; }
.device::after { content:''; position:absolute; left:50%; top:50%; width:36px; height:36px; margin:-18px 0 0 -18px;
background:#eb5505; border-radius:8px; opacity:0.85; }
.card h4 { font-size:14px; font-weight:700; margin:0 0 6px; }
.card .plan { font-size:12px; color:#777777; margin:0 0 10px; }
.card .price { font-size:16px; font-weight:700; color:#333333; margin:0 0 12px; }
.card .price span { font-size:11px; color:#777777; font-weight:400; }
.rowbtns { display:flex; gap:8px; }
.orangebtn { background:#eb5505; color:#ffffff; border:none; height:34px; font-size:12px; flex:1; padding:0 8px; }
.outlinebtn { background:#ffffff; color:#333333; border:1px solid #333333; height:34px; font-size:12px; flex:1; }
</style></head>
<body>
<nav>
<p class="brand">au</p>
<div class="search">Search for a plan or device</div>
</nav>
<div class="tabs">
<div class="tab on">Smartphone</div>
<div class="tab">Plans</div>
<div class="tab">Devices</div>
<div class="tab">Support</div>
</div>
<div class="body">
<div class="head"><h2>Smartphone catalog</h2><span class="count">128 models</span></div>
<div class="grid">
<div class="card">
<span class="label">NEW</span>
<div class="device"></div>
<h4>au Vega 12</h4>
<p class="plan">128GB · Midnight Blue</p>
<p class="price">¥98,800 <span>/ No installment</span></p>
<div class="rowbtns"><button class="orangebtn">Order now</button><button class="outlinebtn">Compare</button></div>
</div>
<div class="card">
<span class="label">POPULAR</span>
<div class="device"></div>
<h4>au Vega 12 Pro</h4>
<p class="plan">256GB · Graphite</p>
<p class="price">¥134,800 <span>/ No installment</span></p>
<div class="rowbtns"><button class="orangebtn">Order now</button><button class="outlinebtn">Compare</button></div>
</div>
<div class="card">
<span class="label">VALUE</span>
<div class="device"></div>
<h4>au Lite 5</h4>
<p class="plan">64GB · White</p>
<p class="price">¥54,800 <span>/ No installment</span></p>
<div class="rowbtns"><button class="orangebtn">Order now</button><button class="outlinebtn">Compare</button></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fff4fd; color: #200000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fff4fd; color: #200000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #200000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #716e74; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #de1b83; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #fff4fd; color: #de1b83;
border: 1px solid #de1b83; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fff4fd; color: #201f21;
border: 1px solid #c7b7be; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #716e74; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #de1b83; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff4fd; font-family:'Poppins',Arial,sans-serif; color:#201f21; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#fff4fd;border-bottom:1px solid #f6f6f7;}
.logo{font-size:20px;font-weight:700;color:#200000;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.navlinks .active{color:#de1b83;}
.search{width:150px;height:36px;border-radius:9999px;background:#fff4f7;border:1px solid #f6f6f7;font-size:12px;color:#716e74;display:flex;align-items:center;padding:0 14px;}
.hero{height:210px;display:flex;align-items:center;padding:0 32px;background:linear-gradient(120deg,#fff4fd 45%,#ffe0e9 100%);}
.htxt{width:400px;}
.htxt h1{font-size:32px;font-weight:700;line-height:1.2;letter-spacing:-0.5px;margin:0 0 10px;color:#200000;}
.htxt p{font-size:15px;margin:0 0 16px;color:#201f21;}
.cta{display:inline-block;background:#de1b83;color:#fff;font-size:16px;font-weight:600;padding:14px 32px;border-radius:8px;}
.blobwrap{position:relative;width:300px;height:180px;}
.blob{position:absolute;border-radius:9999px;}
.b1{width:170px;height:170px;background:radial-gradient(circle at 35% 30%,#fe5000,#de1b83 70%);top:0;right:60px;}
.b2{width:70px;height:70px;background:#ffe593;top:20px;left:0;}
.b3{width:44px;height:44px;background:#0077d7;bottom:10px;right:10px;}
.seclabel{padding:16px 32px 10px;font-size:20px;font-weight:600;}
.grid{display:flex;gap:16px;padding:0 32px;}
.card{width:196px;background:#fff;border-radius:12px;padding:0 0 12px;position:relative;overflow:hidden;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#fff;border-radius:9999px;padding:4px 10px;z-index:2;}
.thumb{height:110px;border-radius:12px 12px 0 0;position:relative;}
.body{padding:10px 12px 0;}
.title{font-size:15px;font-weight:500;margin-bottom:4px;}
.price{font-size:16px;font-weight:600;color:#de1b83;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#200000;color:#fff4fd;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Lume Deodorant</div>
<div class="navlinks"><span class="active">Deodorant</span><span>Whole Body</span><span>Bundles</span></div>
<div class="search">Search...</div>
</div>
<div class="hero">
<div class="htxt">
<h1>Sweat happens. Odor is optional.</h1>
<p>Whole-body deodorant, backed by science and unafraid of pink.</p>
<div class="cta">Shop Now</div>
</div>
<div class="blobwrap"><div class="blob b2"></div><div class="blob b1"></div><div class="blob b3"></div></div>
</div>
<div class="seclabel">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#de1b83;">New</span><div class="thumb" style="background:linear-gradient(135deg,#de1b83,#0077d7);"></div><div class="body"><div class="title">Invisible Solid Stick</div><div class="price">$14.99</div></div></div>
<div class="card"><span class="badge" style="background:#fe5000;">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#ffe593,#fe5000);"></div><div class="body"><div class="title">Cream Tube Deodorant</div><div class="price">$12.99</div></div></div>
<div class="card"><span class="badge" style="background:#0077d7;">Best Seller</span><div class="thumb" style="background:linear-gradient(135deg,#0077d7,#ad0da6);"></div><div class="body"><div class="title">Starter Pack Duo</div><div class="price">$24.99</div></div></div>
</div>
<div class="footer"><span>© Lume Deodorant</span><span>Free shipping over $30</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #cc0000; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #cc0000; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; background: #cc0000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.utilbar{height:32px;background:#f5f5f5;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 32px;font-size:12px;color:#666666;}
.mainnav{height:56px;background:#fff;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#121212;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:18px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#121212;}
.hero{height:170px;background:#121212;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#333333,#121212 70%);}
.herotext{position:relative;z-index:1;text-align:center;}
.herotext h1{font-size:30px;font-weight:700;color:#fff;letter-spacing:-0.3px;margin:0;}
.grid{display:flex;gap:12px;padding:20px 32px 0;}
.card{width:216px;background:#fff;border:1px solid #eeeeee;padding:10px;}
.thumb{height:120px;margin-bottom:8px;}
.badge{position:absolute;background:#cc0000;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 8px;margin-bottom:6px;}
.cardwrap{position:relative;}
.ptitle{font-size:16px;font-weight:400;color:#121212;margin-top:2px;}
.pprice{font-size:16px;font-weight:700;color:#121212;margin-top:4px;}
.pprice.sale{color:#cc0000;}
</style>
<div class="utilbar">Sign In · Cart (2) · Store Locator</div>
<div class="mainnav">
<div class="logo">Newbury Comics Independ 2</div>
<div class="navlinks"><div>Vinyl</div><div>Music</div><div>Movies</div><div>Pop Culture</div></div>
</div>
<div class="hero"><div class="herotext"><h1>Wicked Good Time.</h1></div></div>
<div class="grid">
<div class="card cardwrap"><span class="badge" style="top:18px;left:18px;">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#121212,#666666);margin-top:20px;"></div><div class="ptitle">Radiohead — In Rainbows LP</div><div class="pprice sale">$24.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#333333,#999999)"></div><div class="ptitle">Funko Pop! Stranger Things</div><div class="pprice">$12.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#666666,#121212)"></div><div class="ptitle">Wu-Tang Clan Band Tee</div><div class="pprice">$28.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#999999,#333333)"></div><div class="ptitle">Ghostbusters Blu-ray Steelbook</div><div class="pprice">$19.99</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121713;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121713;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #121713; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #121713; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #121713;
border: 1px solid #121713; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #404041;
border: 1px solid #c4c5c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff4127; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'Helvetica Neue',Arial,sans-serif; color:#121713; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d3d2d1;}
.logo{font-size:19px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.hero{height:230px;background:#121713;display:flex;align-items:center;padding:0 32px;}
.heroText{width:52%;}
.heroText h1{font-size:32px;font-weight:600;color:#fff;margin:0 0 12px;letter-spacing:-.3px;line-height:1.2;}
.heroText p{font-size:14px;color:#d3d2d1;max-width:320px;margin:0 0 16px;}
.btnrow{display:flex;gap:10px;}
.btn-p{background:#fff;color:#121713;font-size:15px;font-weight:600;padding:13px 24px;}
.btn-s{background:transparent;color:#fff;border:1.5px solid #fff;font-size:15px;font-weight:600;padding:12px 23px;}
.heroImg{width:48%;height:190px;position:relative;}
.case{position:absolute;right:60px;top:20px;width:110px;height:150px;border-radius:8px;background:linear-gradient(160deg,#3d2817,#1a1a1a);}
.case:before{content:'';position:absolute;left:10px;top:10px;width:90px;height:6px;background:#045c7d;}
.grid{display:flex;gap:14px;padding:22px 32px 0;}
.card{width:206px;border-radius:12px;padding:0;background:#fff;}
.thumb{height:120px;border-radius:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:0;color:#fff;}
.ptitle{font-size:16px;font-weight:600;margin:10px 0 4px;}
.pprice{font-size:14px;color:#404041;margin:0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Twelve South</div>
<div class="navlinks"><span>Cases</span><span>Stands</span><span>Cables</span><span>Desk</span></div>
</div>
<div class="hero">
<div class="heroText">
<h1>Desk accessories built like heirlooms.</h1>
<p>Leather cases and machined aluminum stands designed for the Apple ecosystem you actually use daily.</p>
<div class="btnrow"><div class="btn-p">Shop Now</div><div class="btn-s">Explore Collections</div></div>
</div>
<div class="heroImg"><div class="case"></div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3d2817,#1a1a1a)"><span class="badge" style="background:#ff4127;">Sale</span></div><div class="ptitle">BookBook Case</div><div class="pprice">$99.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#404041,#121713)"></div><div class="ptitle">HiRise Pro Stand</div><div class="pprice">$129.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#045c7d,#121713)"><span class="badge" style="background:#ffcf2a;color:#121713;">Loyalty</span></div><div class="ptitle">Compass Pro</div><div class="pprice">$49.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#495857,#1a1a1a)"></div><div class="ptitle">AirFly Pro Adapter</div><div class="pprice">$54.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #121212;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d9d9d9; color: #121212;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#02060C; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; font-variant-numeric: tabular-nums; }
.loc-hdr { display:flex; align-items:center; gap:8px; padding:20px 34px 0; }
.pin { color:#FC8019; font-size:18px; }
.loc-title { font-size:17px; font-weight:800; }
.avatar { margin-left:auto; width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#FC8019,#D7385E); }
.addr { font-size:12px; color:#686B78; margin-left:26px; }
.search-pill { margin:14px 34px 0; height:46px; border-radius:14px; background:#F4F4F6; display:flex; align-items:center; padding:0 16px; color:#686B78; font-size:14px; gap:10px; }
.search-pill .ic { color:#FC8019; }
.chip-row { display:flex; gap:8px; padding:14px 34px 0; }
.chip { height:32px; border-radius:8px; border:1px solid #E2E2E7; padding:0 14px; display:flex; align-items:center; font-size:12px; font-weight:600; }
.chip.on { background:#ECECEE; border-color:#686B78; }
.rcard { margin:16px 34px 0; }
.photo { height:190px; border-radius:16px; position:relative; overflow:hidden; background:linear-gradient(135deg,#f6a04d,#c9622a); }
.photo::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,0.78) 100%); }
.offer { position:absolute; bottom:12px; left:14px; z-index:1; color:#fff; }
.offer b { font-size:16px; font-weight:800; display:block; }
.offer span { font-size:11px; font-weight:600; }
.heart { position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,.4); }
.rname { font-size:18px; font-weight:800; margin-top:10px; }
.rmeta-row { display:flex; align-items:center; gap:8px; margin-top:4px; }
.rating-chip { background:#48C479; color:#fff; font-size:12px; font-weight:700; padding:2px 6px; border-radius:6px; }
.eta { font-size:14px; font-weight:600; color:#686B78; }
.cuisine { font-size:14px; color:#686B78; margin-top:4px; }
.dashed-footer { margin-top:10px; padding-top:10px; border-top:1px dashed #E2E2E7; color:#FC8019; font-size:12px; font-weight:700; }
</style></head>
<body>
<div class="loc-hdr"><span class="pin">📍</span><span class="loc-title">Home ⌄</span><div class="avatar"></div></div>
<div class="addr">123 Cross River Rd, Sector 4</div>
<div class="addr">Swiggy (iOS)</div>
<div class="search-pill"><span class="ic">🔍</span>Search "biryani"</div>
<div class="chip-row">
<div class="chip">☰ Filter</div>
<div class="chip on">Under 30 mins</div>
<div class="chip">Rating 4.0+</div>
<div class="chip">Pure Veg</div>
<div class="chip">Offers</div>
</div>
<div class="rcard">
<div class="photo"><div class="heart"></div><div class="offer"><b>60% OFF</b><span>UPTO ₹120</span></div></div>
<div class="rname">Punjab Grill Express</div>
<div class="rmeta-row"><div class="rating-chip">★ 4.4</div><div class="eta">30–35 mins · 2.1 km</div></div>
<div class="cuisine">North Indian · Tandoor · Biryani</div>
<div class="dashed-footer">⏱ Free delivery on orders above ₹199</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #bb0321; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #bb0321;
border: 1px solid #bb0321; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.8px; background: #bb0321; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Hoover Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Roboto',sans-serif; background:#ffffff; color:#484848; }
*{box-sizing:border-box;}
.promobar{height:28px;background:#bb0321;color:#fff;font-size:12px;font-weight:600;letter-spacing:.3px;display:flex;align-items:center;justify-content:center;text-transform:uppercase;}
.nav{height:56px;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#121212;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.navlinks .active{color:#bb0321;}
.hero{background:#121212;color:#fff;height:200px;display:flex;align-items:center;padding:0 32px;position:relative;}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to right, rgba(18,18,18,0.7) 40%, transparent);}
.hero-txt{position:relative;z-index:1;max-width:380px;}
.hero-txt h1{font-size:30px;font-weight:700;line-height:1.25;margin:0 0 10px;}
.hero-txt p{font-size:14px;color:#dedede;margin:0 0 14px;}
.btn{display:inline-block;background:#bb0321;color:#fff;font-weight:500;font-size:15px;text-transform:uppercase;letter-spacing:.5px;padding:12px 24px;border-radius:4px;position:relative;z-index:1;}
.section{padding:14px 32px;}
.section h2{font-size:16px;font-weight:600;color:#121212;margin:0 0 12px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{background:#fff;border:1px solid #e1e3e4;border-radius:8px;padding:16px;position:relative;}
.imgbox{height:70px;background:#f5f5f5;border-radius:4px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:#767676;font-size:9px;text-align:center;}
.badge{position:absolute;top:12px;left:12px;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:2px;}
.badge.promo{background:#bb0321;color:#fff;}
.badge.sage{background:#aaccaa;color:#121212;}
.pname{font-size:16px;font-weight:600;color:#121212;margin:2px 0;}
.price{font-size:20px;font-weight:700;color:#121212;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#121212;color:#dedede;padding:14px 32px;border-top:3px solid #bb0321;display:flex;justify-content:space-between;font-size:11px;}
</style>
<div class="promobar">Free Shipping on Orders Over $75</div>
<div class="nav">
<div class="logo">Hoover</div>
<div class="navlinks"><span class="active">Vacuums</span><span>Robot Vacuums</span><span>Carpet Cleaners</span><span>Parts & Filters</span></div>
</div>
<div class="hero">
<div class="hero-txt">
<h1>Suction that<br>means business.</h1>
<p>HEPA filtration, pet-specific modes, and award-winning engineering since 1908.</p>
<div class="btn">Shop Vacuums</div>
</div>
</div>
<div class="section">
<h2>Featured Products</h2>
<div class="grid">
<div class="card"><div class="badge promo">Save $50</div><div class="imgbox">Upright Vac</div><div class="pname">SmartWash Pet Complete</div><div class="price">$249.99</div></div>
<div class="card"><div class="badge sage">Award Winner</div><div class="imgbox">Robot Mop</div><div class="pname">ONEPWR Robot Mop</div><div class="price">$399.99</div></div>
<div class="card"><div class="imgbox">Cordless Stick</div><div class="pname">ONEPWR Blade Cordless</div><div class="price">$179.99</div></div>
<div class="card"><div class="imgbox">Filter Set</div><div class="pname">HEPA Filter 3-Pack</div><div class="price">$24.99</div></div>
</div>
</div>
<div class="footer"><span>© Hoover</span><span>Support · Warranty · Dealers · Contact</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #232323;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #232323;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #232323; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #003399; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #006b6d; color: #ffffff;
border: 1px solid #003399; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #383333;
border: 1px solid #bbbbbb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #006b6d; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#eeeeee; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#383333; }
*{box-sizing:border-box;}
.nav{height:64px;background:#ffffff;border-bottom:1px solid #d6d6d6;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:Georgia,serif;font-size:22px;font-weight:700;color:#232323;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;color:#383333;}
.navlinks span:first-child{color:#003399;border-bottom:2px solid #003399;padding-bottom:20px;}
.searchbar{height:52px;background:#006b6d;display:flex;align-items:center;padding:0 40px;}
.searchpill{width:100%;height:32px;border-radius:9999px;background:#fff;color:#006b6d;display:flex;align-items:center;padding:0 18px;font-size:13px;}
.hero{height:224px;display:flex;align-items:center;padding:0 40px;background:#ffffff;}
.heroText{width:460px;}
.eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#006b6d;margin-bottom:10px;}
.headline{font-family:Georgia,serif;font-size:30px;font-weight:700;color:#232323;line-height:1.25;margin:0 0 12px;}
.sub{font-size:14px;color:#555;margin:0 0 18px;max-width:380px;}
.btn{display:inline-block;background:#003399;color:#fff;font-size:14px;font-weight:600;padding:12px 26px;}
.heroshelf{position:absolute;right:60px;top:88px;display:flex;gap:6px;align-items:flex-end;}
.spine{width:20px;background:#003399;border-radius:1px 1px 0 0;}
.sec{position:relative;height:300px;padding:24px 40px;}
.secTitle{font-family:Georgia,serif;font-size:19px;font-weight:700;color:#232323;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:216px;background:#fff;border:1px solid #d6d6d6;padding:12px;}
.thumb{height:110px;margin-bottom:10px;}
.cardTitle{font-size:14px;font-weight:600;color:#232323;margin-bottom:4px;}
.cardAuthor{font-size:12px;color:#777;margin-bottom:6px;}
.cardPrice{font-size:14px;font-weight:700;color:#006b6d;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;background:#232323;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#eeeeee;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Little City Books</div>
<div class="navlinks"><span>New Arrivals</span><span>Staff Picks</span><span>Events</span><span>Signed Copies</span></div>
</div>
<div class="searchbar"><div class="searchpill">Search by title, author, or ISBN...</div></div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">Staff Recommended</div>
<div class="headline">Books chosen<br>by people who read.</div>
<div class="sub">An independent shop stocked by hand, one honest recommendation at a time.</div>
<div class="btn">Browse New Arrivals</div>
</div>
<div class="heroshelf">
<div class="spine" style="height:130px;background:#003399"></div>
<div class="spine" style="height:110px;background:#006b6d"></div>
<div class="spine" style="height:140px;background:#232323"></div>
<div class="spine" style="height:100px;background:#003399"></div>
<div class="spine" style="height:120px;background:#006b6d"></div>
</div>
</div>
<div class="sec">
<div class="secTitle">This Week's Staff Picks</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#003399,#232323)"></div><div class="cardTitle">The Quiet Ledger</div><div class="cardAuthor">A. Marchetti</div><div class="cardPrice">$18.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#006b6d,#232323)"></div><div class="cardTitle">Harbor Light</div><div class="cardAuthor">N. Okafor</div><div class="cardPrice">$22.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#232323,#003399)"></div><div class="cardTitle">Field Notes on Rain</div><div class="cardAuthor">S. Delacroix</div><div class="cardPrice">$16.50</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#006b6d,#003399)"></div><div class="cardTitle">The Long Ferry</div><div class="cardAuthor">R. Voss</div><div class="cardPrice">$24.00</div></div>
</div>
</div>
<div class="footer"><span>© An Independent Bookshop</span><span>Store Hours & Events</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0cefd3; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0cefd3; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #0f7568; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0cefd3; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0cefd3; color: #111111;
border: 1px solid #0dcbb4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #0f7568; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #18d9d8; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.left { width:520px; flex:0 0 520px; display:flex; flex-direction:column; border-right:1px solid #f6f6f6; }
.hero { height:150px; background:linear-gradient(135deg,#0cefd3 0%, #05c9ad 100%); position:relative; padding:18px 24px; }
.hero .back { color:#ffffff; font-size:13px; font-weight:700; opacity:0.9; }
.hero .title { color:#000000; font-size:26px; font-weight:800; margin-top:34px; letter-spacing:-0.5px; }
.hero .meta { color:#000000; opacity:0.7; font-size:13px; margin-top:6px; font-weight:700; }
.menulist { flex:1; overflow:hidden; padding:8px 0; }
.menuhead { padding:14px 24px 6px; font-size:15px; font-weight:800; }
.item { display:flex; align-items:center; gap:14px; padding:12px 24px; border-bottom:1px solid #f6f6f6; }
.thumb { width:64px; height:64px; border-radius:12px; flex:0 0 64px; }
.t1 { background:linear-gradient(135deg,#ffd7a8,#ff9f43); }
.t2 { background:linear-gradient(135deg,#c8f7dc,#0cefd3); }
.t3 { background:linear-gradient(135deg,#ffd1dc,#ff7597); }
.t4 { background:linear-gradient(135deg,#d8d4ff,#8f7bff); }
.iteminfo { flex:1; min-width:0; }
.iteminfo .name { font-size:15px; font-weight:700; }
.iteminfo .desc { font-size:12px; color:#6c6d6f; margin-top:3px; }
.iteminfo .price { font-size:14px; font-weight:800; margin-top:6px; }
.addbtn { width:28px; height:28px; border-radius:8px; border:1.5px solid #0cefd3; color:#0cefd3;
display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; flex:0 0 28px; }
.right { flex:1; display:flex; flex-direction:column; background:#f6f6f6; }
.rhead { padding:20px 24px 10px; font-size:16px; font-weight:800; }
.cart { flex:1; padding:0 24px; overflow:hidden; }
.cartrow { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #e6e6e6; font-size:13px; }
.cartrow .qty { color:#6c6d6f; margin-right:6px; }
.cartrow .amt { font-weight:700; }
.promo { margin:14px 0; padding:12px 14px; background:#ffffff; border-radius:12px; display:flex;
justify-content:space-between; align-items:center; }
.promo .lbl { font-size:12px; color:#232324; font-weight:700; }
.promo .tag { background:rgba(12,239,211,0.18); color:#04a98f; font-size:11px; font-weight:800;
padding:4px 8px; border-radius:8px; }
.summary { padding:16px 24px; background:#ffffff; border-top:1px solid #e6e6e6; }
.sumrow { display:flex; justify-content:space-between; font-size:13px; color:#6c6d6f; margin-bottom:6px; }
.sumrow.total { font-size:16px; font-weight:800; color:#000000; margin-top:8px; }
.cta { margin-top:14px; width:100%; height:52px; border-radius:14px; border:none;
background:#000000; color:#0cefd3; font-size:16px; font-weight:800; }
</style></head>
<body>
<div class="app">
<div class="left">
<div class="hero">
<div class="back">← Baemin</div>
<div class="title">Golden Bowl Kitchen</div>
<div class="meta">4.9 · 1.2km · 25–35 min</div>
</div>
<div class="menulist">
<div class="menuhead">Popular menu</div>
<div class="item">
<div class="thumb t1"></div>
<div class="iteminfo">
<div class="name">Soy Garlic Fried Chicken</div>
<div class="desc">Crispy half · house soy garlic glaze</div>
<div class="price">18,900 won</div>
</div>
<div class="addbtn">+</div>
</div>
<div class="item">
<div class="thumb t2"></div>
<div class="iteminfo">
<div class="name">Cold Buckwheat Noodles</div>
<div class="desc">Chilled broth · extra egg</div>
<div class="price">9,500 won</div>
</div>
<div class="addbtn">+</div>
</div>
<div class="item">
<div class="thumb t3"></div>
<div class="iteminfo">
<div class="name">Tteokbokki Set</div>
<div class="desc">Rice cake · fish cake · noodles</div>
<div class="price">12,000 won</div>
</div>
<div class="addbtn">+</div>
</div>
<div class="item">
<div class="thumb t4"></div>
<div class="iteminfo">
<div class="name">Sparkling Yogurt Drink</div>
<div class="desc">Chilled · 500ml</div>
<div class="price">3,200 won</div>
</div>
<div class="addbtn">+</div>
</div>
</div>
</div>
<div class="right">
<div class="rhead">Your order</div>
<div class="cart">
<div class="cartrow"><span><span class="qty">1x</span>Soy Garlic Fried Chicken</span><span class="amt">18,900</span></div>
<div class="cartrow"><span><span class="qty">1x</span>Tteokbokki Set</span><span class="amt">12,000</span></div>
<div class="cartrow"><span><span class="qty">2x</span>Sparkling Yogurt Drink</span><span class="amt">6,400</span></div>
<div class="promo">
<span class="lbl">Free delivery over 20,000 won</span>
<span class="tag">Applied</span>
</div>
</div>
<div class="summary">
<div class="sumrow"><span>Items subtotal</span><span>37,300 won</span></div>
<div class="sumrow"><span>Delivery fee</span><span>0 won</span></div>
<div class="sumrow total"><span>Total</span><span>37,300 won</span></div>
<button class="cta">Place order</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1b5bff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1b5bff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #1b5bff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7333f1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fe2f2f; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #7333f1; color: #ffffff;
border: 1px solid #fe2f2f; border-radius: 0px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #000000;
border: 1px solid #c6d6ff; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7333f1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fffe5b; color: #000000;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#fe2f2f; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.brand { color:#fff; font-size:16px; font-weight:900; text-transform:uppercase; letter-spacing:-1px; margin:0; }
.navlinks { display:flex; gap:0; }
.navlinks span { color:#fff; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:0 16px; }
main { display:flex; height:calc(640px - 60px - 24px); }
.promo { height:24px; background:#fffe5b; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.gallery { width:40%; background:#ede5ff; display:flex; align-items:center; justify-content:center; }
.box { width:200px; height:200px; background:#fe2f2f; position:relative; box-shadow:6px 6px 0 #7333f1; }
.box::before { content:'CAH'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
color:#fff; font-size:32px; font-weight:900; }
.details { width:60%; padding:24px 32px; }
.badges { display:flex; gap:6px; margin-bottom:12px; }
.badge { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:4px 8px; color:#000; }
.badge.new { background:#b1ffc5; }
.badge.ship { background:#fffe5b; }
h1 { font-size:30px; font-weight:900; text-transform:uppercase; letter-spacing:-1.5px; margin:0 0 10px; line-height:1.1; }
.price { font-size:26px; font-weight:900; letter-spacing:-1px; color:#1b5bff; margin:0 0 16px; }
.desc { font-size:15px; line-height:1.5; margin:0 0 20px; max-width:420px; font-weight:400; }
.buyrow { display:flex; gap:0; }
.btn-buy { background:#fe2f2f; color:#fff; border:none; padding:16px 32px; font-size:16px; font-weight:700; text-transform:uppercase; }
.btn-add { background:#7333f1; color:#fff; border:none; padding:16px 28px; font-size:14px; font-weight:700; text-transform:uppercase; margin-left:8px; }
</style></head>
<body>
<div class="promo">Free shipping over $40 · No returns, no refunds, no apologies</div>
<nav>
<p class="brand">Cards Against Humanity</p>
<div class="navlinks"><span>Base Game</span><span>Expansions</span><span>About</span></div>
</nav>
<main>
<div class="gallery"><div class="box"></div></div>
<div class="details">
<div class="badges"><span class="badge new">New</span><span class="badge ship">Free Shipping</span></div>
<h1>Cards Against Humanity: The Bigger, Blacker Box</h1>
<p class="price">$45.00</p>
<p class="desc">A party game for horrible people. 600 cards of pure, unfiltered nonsense. Batteries not included. Feelings not considered.</p>
<div class="buyrow">
<button class="btn-buy">Buy Now</button>
<button class="btn-add">Add to Cart</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; letter-spacing: 0.3px; background: #783df6; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; letter-spacing: 0.3px; background: #fefefe; color: #1e1e1e;
border: 1px solid #783df6; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fefefe; color: #494949;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.18; letter-spacing: 0.5px; background: #783df6; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fefefe; color:#1e1e1e; box-sizing:border-box;
font-family:'Helvetica Neue','Helvetica',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#1e1e1e; color:#fefefe; }
.brand { font-size:18px; font-weight:500; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:24px; font-size:13px; font-weight:500; letter-spacing:0.2px; opacity:0.85; }
.navlinks span.on { opacity:1; border-bottom:2px solid #783df6; padding-bottom:4px; }
.cart-ico { width:30px; height:30px; border-radius:9999px; background:#783df6; display:flex; align-items:center;
justify-content:center; font-size:12px; font-weight:700; }
.subnav { height:40px; display:flex; align-items:center; gap:22px; padding:0 32px; border-bottom:1px solid #e8e8e8;
font-size:13px; color:#494949; }
.subnav span.on { color:#1e1e1e; border-bottom:2px solid #783df6; padding-bottom:11px; font-weight:500; }
main { display:flex; height:536px; }
.gallery { width:400px; background:#f7f7f7; position:relative; display:flex; align-items:center; justify-content:center; }
.poster { width:230px; height:330px; border-radius:8px; background:
linear-gradient(160deg,#221155 0%,#003399 55%,#783df6 100%); position:relative; box-shadow:0 18px 40px rgba(0,0,0,0.18); }
.poster::after { content:'BFI'; position:absolute; bottom:16px; left:16px; color:#fff; font-size:12px; font-weight:700;
letter-spacing:2px; }
.badge-limited { position:absolute; top:14px; left:14px; background:#003399; color:#fff; font-size:11px; font-weight:500;
letter-spacing:0.5px; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.thumbs { position:absolute; bottom:18px; display:flex; gap:8px; }
.thumb { width:36px; height:26px; border-radius:4px; background:#e8e8e8; border:1px solid #d8d8d8; }
.info { flex:1; padding:32px 36px; display:flex; flex-direction:column; gap:14px; }
.cat { font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:0.5px; color:#6a6a6a; }
h1 { font-size:24px; font-weight:500; letter-spacing:-0.3px; margin:0; line-height:1.3; }
.badges { display:flex; gap:8px; }
.badge-member { background:#783df6; color:#fff; font-size:11px; font-weight:500; letter-spacing:0.5px;
text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.badge-soldout { background:#e6e6e6; color:#6a6a6a; font-size:11px; font-weight:500; letter-spacing:0.5px;
text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:500; }
.price-member { font-size:13px; color:#783df6; font-weight:500; }
.desc { font-size:14px; color:#494949; line-height:1.5; max-width:340px; }
.fmt-row { display:flex; gap:8px; }
.fmt { border:1px solid #e8e8e8; border-radius:8px; padding:8px 14px; font-size:13px; font-weight:500; }
.fmt.on { border-color:#783df6; color:#783df6; background:#f7f4ff; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { background:#783df6; color:#fff; border:none; border-radius:8px; padding:12px 24px; font-size:15px;
font-weight:500; letter-spacing:0.3px; }
.btn-blue { background:#003399; color:#fff; border:none; border-radius:8px; padding:12px 20px; font-size:13px; font-weight:500; }
.meta { font-size:12px; color:#929292; }
</style></head>
<body>
<nav>
<div class="brand">Bfi Shop</div>
<div class="navlinks"><span>Blu-ray</span><span>DVD</span><span class="on">Merchandise</span><span>Books</span></div>
<div class="cart-ico">2</div>
</nav>
<div class="subnav"><span class="on">All</span><span>New Releases</span><span>Criterion</span><span>Posters</span><span>Apparel</span></div>
<main>
<div class="gallery">
<span class="badge-limited">Limited Edition</span>
<div class="poster"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">4K Ultra HD Steelbook</span>
<h1>Archive Restoration Vol. 12</h1>
<div class="badges"><span class="badge-member">Member Price</span><span class="badge-soldout">Almost Gone</span></div>
<div class="price-row"><span class="price">£34.99</span><span class="price-member">£28.99 for members</span></div>
<p class="desc">Fully restored 4K transfer with new commentary tracks and a 40-page collector's booklet.</p>
<div class="fmt-row"><span class="fmt on">Steelbook</span><span class="fmt">Standard</span><span class="fmt">Digital</span></div>
<div class="btn-row">
<button class="btn-primary">Add to Bag</button>
<button class="btn-blue">Join & Save 20%</button>
</div>
<span class="meta">In stock · Ships within 2 working days</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0d1117; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0d1117; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8e91; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #161b22; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d1117; color: #ffffff;
border: 1px solid #161b22; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0d1117; color: #f5f5f5;
border: 1px solid #32353b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8e91; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e1319; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0D1117; color:#E6EDF3; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, "JetBrains Mono", monospace; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#0D1117; padding:24px 16px; position:relative; border-right:1px solid #30363D; }
.reponame { font-size:15px; margin-bottom:2px; }
.reponame b { color:#2F81F7; }
.reponame i { color:#7D8590; font-style:normal; }
.desc { font-size:12px; color:#7D8590; margin-bottom:8px; }
.stats { display:flex; gap:12px; font-size:11px; color:#7D8590; margin-bottom:14px; }
.stats .dot { width:9px; height:9px; border-radius:50%; background:#3178C6; display:inline-block; margin-right:4px; }
.tabs { display:flex; gap:16px; font-size:12px; color:#7D8590; border-bottom:1px solid #21262D; padding-bottom:8px; margin-bottom:12px; }
.tabs .on { color:#E6EDF3; font-weight:600; border-bottom:2px solid #F78166; padding-bottom:8px; }
.branchpill { display:inline-flex; align-items:center; gap:6px; background:#161B22; border:1px solid #30363D; border-radius:6px;
padding:5px 10px; font-size:11px; margin-bottom:10px; }
.branchpill span.name { color:#E6EDF3; }
.commitstrip { background:#161B22; border-bottom:1px solid #30363D; padding:8px 10px; font-size:11px; color:#7D8590;
display:flex; gap:6px; align-items:center; margin-bottom:10px; border-radius:6px 6px 0 0;}
.commitstrip .av { width:16px; height:16px; border-radius:50%; background:#3178C6; }
.filetree { border:1px solid #30363D; border-radius:8px; overflow:hidden; margin-bottom:14px; }
.frow { display:flex; justify-content:space-between; padding:8px 10px; font-size:12px; border-bottom:1px solid #21262D; }
.frow:last-child { border-bottom:none; }
.frow .meta { color:#6E7681; font-size:10px; }
.readme { border:1px solid #30363D; border-radius:8px; overflow:hidden; }
.readme .head { background:#161B22; padding:8px 10px; font-size:12px; font-weight:600; border-bottom:1px solid #30363D; }
.readme .body { padding:10px; font-size:11px; color:#7D8590; }
.heat { display:grid; grid-template-columns:repeat(18, 8px); gap:3px; margin-top:12px; }
.heat div { width:8px; height:8px; border-radius:2px; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.brand span { color:#2F81F7; }
.tag { font-size:14px; color:#7D8590; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:6px; border:1px solid #30363D; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#7D8590; text-align:center; }
.typeblock .t1 { font-size:22px; font-weight:700; }
.typeblock .t2 { font-size:13px; color:#7D8590; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:999px;
background:#161B22; border:1px solid #30363D; color:#7D8590; }
.footer { margin-top:auto; border-top:1px solid #30363D; padding-top:16px; font-size:11px; color:#6E7681; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="reponame mono"><b>anthropic</b><i> / </i><b>claude-agent-sdk</b></div>
<div class="desc">A toolkit for building agentic apps on top of Claude</div>
<div class="stats"><span><span class="dot"></span>TypeScript</span><span>★ 2.3k</span><span>⑂ 184</span></div>
<div class="tabs"><span class="on">Code</span><span>Issues</span><span>Pull requests</span><span>Actions</span></div>
<div class="branchpill">⑂ <span class="name mono">main</span></div>
<div class="commitstrip"><span class="av"></span> Fix streaming tool-use edge case <span class="mono">· a3f9c2e</span></div>
<div class="filetree">
<div class="frow"><span>📁 src</span><span class="meta">2h ago</span></div>
<div class="frow"><span>📄 package.json</span><span class="meta">3d ago</span></div>
<div class="frow"><span>📄 README.md</span><span class="meta">3d ago</span></div>
</div>
<div class="readme">
<div class="head">📄 README.md</div>
<div class="body">Build reliable agents with typed tools, MCP servers, and streaming — all from one SDK.</div>
</div>
<div class="heat">
<div style="background:#161B22"></div><div style="background:#0E4429"></div><div style="background:#006D32"></div><div style="background:#161B22"></div><div style="background:#26A641"></div><div style="background:#39D353"></div><div style="background:#0E4429"></div><div style="background:#161B22"></div><div style="background:#006D32"></div><div style="background:#26A641"></div><div style="background:#161B22"></div><div style="background:#39D353"></div><div style="background:#0E4429"></div><div style="background:#161B22"></div><div style="background:#006D32"></div><div style="background:#161B22"></div><div style="background:#26A641"></div><div style="background:#0E4429"></div>
<div style="background:#0E4429"></div><div style="background:#161B22"></div><div style="background:#39D353"></div><div style="background:#006D32"></div><div style="background:#161B22"></div><div style="background:#0E4429"></div><div style="background:#26A641"></div><div style="background:#161B22"></div><div style="background:#39D353"></div><div style="background:#161B22"></div><div style="background:#006D32"></div><div style="background:#0E4429"></div><div style="background:#161B22"></div><div style="background:#26A641"></div><div style="background:#161B22"></div><div style="background:#39D353"></div><div style="background:#006D32"></div><div style="background:#161B22"></div>
</div>
</div>
<div class="info">
<div>
<h1 class="brand">GitHub (iOS)<span>.</span></h1>
<p class="tag">Primer dark default — one blue for links, one reserved green for Code/Merge, and a semantic state color for everything else.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#0D1117"></div><small>#0D1117</small></div>
<div class="sw"><div class="chip2" style="background:#2F81F7"></div><small>#2F81F7</small></div>
<div class="sw"><div class="chip2" style="background:#238636"></div><small>#238636</small></div>
<div class="sw"><div class="chip2" style="background:#A371F7"></div><small>#A371F7</small></div>
<div class="sw"><div class="chip2" style="background:#F85149"></div><small>#F85149</small></div>
</div>
<div class="typeblock">
<div class="t1 mono">anthropic / claude-agent-sdk</div>
<div class="t2">Mona Sans + monospace · owner/name in accent blue, code always monospace</div>
</div>
<div class="taglist">
<span>Contributions heatmap</span><span>Inline README card</span><span>Orange tab underline</span>
<span>Reserved green button</span><span>1px borders, not shadows</span>
</div>
<div class="footer">#0D1117 blue-black · borders + luminance steps define regions, never drop-shadows</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #151414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #151414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.2; margin: 0; color: #151414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #767574; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 1.2px; background: #f28c1f; color: #000000;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 1.2px; background: transparent; color: #151414;
border: 1px solid #f28c1f; border-radius: 4px;
padding: 12px 30px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #151414;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767574; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 400; line-height: 1.2; letter-spacing: 1.8px; background: rgba(242,140,31,0.12); color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#383838; box-sizing:border-box;
font-family:'Avenir Next', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; border-bottom:1px solid #e0dfdf; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.logo { font-family:'Futura', 'Helvetica Neue', Arial, sans-serif; font-weight:700; font-size:18px; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#151414; letter-spacing:0.2px; }
.storesel { display:flex; border-radius:4px; overflow:hidden; }
.storesel div { background:#2f2e2e; color:#f1f0ef; font-size:11px; font-weight:600; letter-spacing:1px;
text-transform:uppercase; padding:8px 14px; }
.storesel div.on { background:#151414; color:#fff; box-shadow:0 2px 0 #f28c1f inset; }
.hero { height:210px; position:relative; background:#151414; overflow:hidden; display:flex;
flex-direction:column; justify-content:flex-end; padding:28px 32px; }
.hero::before { content:''; position:absolute; inset:0;
background:radial-gradient(circle at 78% 30%, rgba(242,140,31,0.5), transparent 55%),
linear-gradient(180deg, rgba(21,20,20,0.2) 0%, rgba(21,20,20,0.92) 85%),
linear-gradient(120deg,#2f2e2e,#151414 70%); }
.badge-heat { position:relative; z-index:2; display:inline-block; background:rgba(242,140,31,0.15);
border:1px solid #f28c1f; color:#f28c1f; font-size:10px; font-weight:600; letter-spacing:1.8px;
text-transform:uppercase; padding:5px 10px; border-radius:4px; margin-bottom:10px; width:fit-content; }
.hero h1 { position:relative; z-index:2; font-family:'Futura','Helvetica Neue',Arial,sans-serif; font-weight:700;
font-size:30px; color:#fff; margin:0 0 6px; letter-spacing:-0.3px; }
.hero .flags { position:relative; z-index:2; display:flex; gap:8px; }
.flagbadge { font-size:11px; font-weight:600; padding:3px 8px; border-radius:4px; color:#fff; }
.flag-usa { background:#116dff; }
.flag-canada { background:#df3336; }
.spec-strip { background:#151414; display:flex; border-top:3px solid #f28c1f; padding:18px 32px; gap:44px; }
.spec-col .lbl { font-size:10px; color:#a8a6a5; letter-spacing:1.8px; text-transform:uppercase; margin-bottom:4px; }
.spec-col .val { font-family:'Futura','Helvetica Neue',Arial,sans-serif; font-size:20px; font-weight:600; color:#fff; }
.body { display:flex; padding:20px 32px 0; gap:28px; height:172px; }
.price-col { flex:1; }
.price-col .price { font-family:'Futura','Helvetica Neue',Arial,sans-serif; font-size:26px; font-weight:600; color:#151414; margin-bottom:6px; }
.price-col p { font-size:13px; line-height:1.6; color:#767574; margin:0 0 14px; }
.cta { display:flex; gap:10px; }
.btn-primary { background:#f28c1f; color:#fff; border:none; border-radius:4px; height:46px; padding:0 24px;
font-family:'Futura','Helvetica Neue',Arial,sans-serif; font-size:12px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; }
.btn-secondary { background:transparent; border:2px solid #151414; color:#151414; border-radius:4px; height:46px;
padding:0 22px; font-family:'Futura','Helvetica Neue',Arial,sans-serif; font-size:12px; font-weight:600;
letter-spacing:1.2px; text-transform:uppercase; }
.faq-col { width:300px; border-left:1px solid #e0dfdf; padding-left:24px; }
.faq-col .h { font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#767574; margin-bottom:10px; }
.faq-item { border:1px solid #e0dfdf; border-radius:4px; padding:10px 14px; margin-bottom:8px; font-size:13px; color:#151414; display:flex; justify-content:space-between; }
.faq-item span { color:#f28c1f; }
footer { height:54px; background:#151414; border-top:3px solid #f28c1f; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; color:#f1f0ef; font-size:11px; letter-spacing:1px; text-transform:uppercase; }
</style></head>
<body>
<nav>
<div class="logo">Calcana</div>
<div class="navlinks"><span>Residential</span><span>Commercial</span><span>Support</span></div>
<div class="storesel"><div class="on">USA Store</div><div>Canada Store</div></div>
</nav>
<div class="hero">
<span class="badge-heat">40,000 BTU Output</span>
<h1>Infrared Patio Heater — Wall Mount, Dual Element</h1>
<div class="flags"><span class="flagbadge flag-usa">Ships USA</span><span class="flagbadge flag-canada">Ships Canada</span></div>
</div>
<div class="spec-strip">
<div class="spec-col"><div class="lbl">BTU Output</div><div class="val">40,000</div></div>
<div class="spec-col"><div class="lbl">Coverage Area</div><div class="val">200 sq ft</div></div>
<div class="spec-col"><div class="lbl">Voltage</div><div class="val">120V</div></div>
<div class="spec-col"><div class="lbl">IP Rating</div><div class="val">IP65</div></div>
</div>
<div class="body">
<div class="price-col">
<div class="price">$1,249.00</div>
<p>Commercial-grade infrared heat with near-instant warmup and a corrosion-resistant housing built for
year-round outdoor mounting. Includes wall bracket, remote, and 5-year element warranty.</p>
<div class="cta">
<button class="btn-primary">Request Quote</button>
<button class="btn-secondary">Find a Dealer</button>
</div>
</div>
<div class="faq-col">
<div class="h">Installation FAQ</div>
<div class="faq-item">Mounting height guide <span>+</span></div>
<div class="faq-item">Wiring & electrical code <span>+</span></div>
<div class="faq-item">Warranty registration <span>+</span></div>
</div>
</div>
<footer>
<span>© Calcana</span>
<span>USA Store · Canada Store · Contractor Portal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px; background: #111111; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px; background: #ffffff; color: #111111;
border: 1px solid #111111; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #111111; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#111111; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:16px;font-weight:700;letter-spacing:.3px;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;}
.navlinks .active{border-bottom:2px solid #111;padding-bottom:20px;}
.search{font-size:12px;color:#666;border:1px solid #e0e0e0;border-radius:4px;padding:6px 12px;width:140px;}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;padding:20px 30px;}
.card{}
.thumb{width:100%;aspect-ratio:1/1;background:#111;position:relative;}
.artist{font-size:11px;color:#666;margin-top:8px;}
.title{font-size:12px;font-weight:600;margin-top:2px;}
.price{font-size:12px;font-weight:600;margin-top:2px;}
.badge{position:absolute;top:4px;left:4px;background:#111;color:#fff;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 6px;}
.detail{display:flex;gap:20px;padding:0 30px;}
.dtitle{font-size:20px;font-weight:700;}
.dartist{font-size:14px;color:#666;margin-top:4px;}
.tracklist{font-family:'Courier New',Courier,monospace;font-size:11px;color:#333;line-height:1.8;margin-top:10px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#f5f5f5;border-top:1px solid #e0e0e0;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:11px;color:#333;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Phonica Records</div>
<div class="navlinks"><div class="active">New Arrivals</div><div>Genres</div><div>Charts</div></div>
<div class="search">Search records...</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#222,#555)"><div class="badge">New</div></div><div class="artist">Four Tet</div><div class="title">Beautiful Rewind</div><div class="price">£24.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#111,#333)"></div><div class="artist">Floating Points</div><div class="title">Elaenia</div><div class="price">£28.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#444,#111)"></div><div class="artist">Caribou</div><div class="title">Suddenly</div><div class="price">£22.50</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#2a2a2a,#666)"></div><div class="artist">Bonobo</div><div class="title">Fragments</div><div class="price">£25.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#000,#444)"></div><div class="artist">Nubya Garcia</div><div class="title">Source</div><div class="price">£26.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#333,#000)"></div><div class="artist">Kelly Lee Owens</div><div class="title">LP.8</div><div class="price">£23.99</div></div>
</div>
<div class="detail">
<div>
<div class="dtitle">Beautiful Rewind</div>
<div class="dartist">Four Tet · 2LP · Text Records</div>
<div class="tracklist">A1 Gong<br>A2 Kool FM<br>B1 Ba Teaches Yoga<br>B2 Aerial</div>
</div>
</div>
<div class="footer"><span>© Phonica Records · 51 Poland St, Soho</span><span>Shipping · Mailing List</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f6; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f6; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #1c4bba; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f4f4f6; color: #212121;
border: 1px solid #1c4bba; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #212121;
border: 1px solid #bfbfc1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ea8e74; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system, 'Segoe UI', Roboto, Arial, sans-serif; background:#f4f4f6; color:#464343; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #e5e5eb;}
.logo{font-size:19px;font-weight:700;color:#212121;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.navlinks .active{color:#1c4bba;}
.hero{height:220px;background:#f4f4f6;display:flex;align-items:center;padding:0 30px;}
.headline{font-size:32px;font-weight:700;line-height:1.25;max-width:440px;margin-bottom:14px;}
.btn{display:inline-block;background:#1c4bba;color:#fff;font-size:15px;font-weight:600;padding:14px 32px;border-radius:8px;}
.pan{margin-left:auto;width:220px;height:150px;position:relative;}
.pan .p1{position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#5084c3,#1c4bba 75%);}
.pan .handle{position:absolute;right:0;top:64px;width:60px;height:16px;background:#464343;border-radius:8px;}
.sec{padding:16px 30px;}
.sectitle{font-size:18px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:210px;background:#fff;border-radius:12px;overflow:hidden;}
.thumb{height:120px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#ea8e74;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.badgenew{position:absolute;top:8px;left:8px;background:#0f918b;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.info{padding:10px 12px 12px;}
.title{font-size:16px;font-weight:600;}
.price{font-size:14px;color:#676986;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Misen</div>
<div class="navlinks"><span class="active">Cookware</span><span>Knives</span><span>Bakeware</span><span>Sale</span></div>
</div>
<div class="hero">
<div>
<div class="headline">Professional-grade, for the home cook.</div>
<div class="btn">Shop Cookware</div>
</div>
<div class="pan"><div class="p1"></div><div class="handle"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#5084c3,#1c4bba)"><div class="badge">Sale</div></div><div class="info"><div class="title">Nonstick Skillet, 10-inch</div><div class="price">$95</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#676986,#1c4bba)"><div class="badgenew">New</div></div><div class="info"><div class="title">5-Piece Knife Set</div><div class="price">$249</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#1c4bba,#5084c3)"></div><div class="info"><div class="title">Carbon Steel Wok</div><div class="price">$119</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.25px; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: 0.25px; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #005BAC; color: #FFFFFF;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #FFFFFF; color: #005BAC;
border: 1px solid #005BAC; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.25px; background: #E8F1FB; color: #005BAC;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1A1A; box-sizing:border-box;
font-family:'Source Sans Pro','Open Sans',Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#003D73; }
.brand { font-size:16px; font-weight:700; color:#fff; }
.navlinks { display:flex; gap:18px; font-size:11px; color:#cfe1f5; }
.searchbar { width:260px; background:#fff; border-radius:2px; padding:7px 12px; font-size:11px; color:#666; }
main { display:flex; height:calc(640px - 56px - 42px); }
.gallery { width:290px; background:#F5F7FA; position:relative; display:flex; align-items:center; justify-content:center; }
.well { width:130px; height:100px; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.w { border-radius:9999px; background:radial-gradient(circle,#4A90D9,#005BAC); }
.info { flex:1; padding:22px 30px; display:flex; flex-direction:column; gap:9px; border-right:1px solid #DDDDDD; }
.catnum { font-size:11px; color:#666; font-family:monospace; }
h1 { font-size:18px; font-weight:700; margin:0; }
.metarow { font-size:11px; color:#666; display:flex; gap:14px; flex-wrap:wrap; }
.metarow b { color:#1A1A1A; }
.apps { display:flex; gap:6px; }
.app { background:#E8F1FB; color:#005BAC; font-size:10px; font-weight:700; padding:3px 7px; border-radius:2px; }
.desc { font-size:12px; color:#333; line-height:1.5; max-width:340px; }
.ctas { display:flex; gap:8px; }
.btn-add { background:#005BAC; color:#fff; border:none; border-radius:2px; padding:9px 16px; font-size:12px; font-weight:700; }
.btn-quote { background:#fff; color:#005BAC; border:1px solid #005BAC; border-radius:2px; padding:9px 16px; font-size:12px; font-weight:700; }
.btn-doc { background:none; color:#005BAC; border:none; font-size:12px; text-decoration:underline; padding:0; }
.side { width:280px; padding:22px 24px; display:flex; flex-direction:column; gap:10px; }
.side .label { font-size:10px; text-transform:uppercase; color:#999; letter-spacing:0.4px; }
.pricetable { border:1px solid #DDDDDD; font-size:11px; }
.prow { display:flex; justify-content:space-between; padding:7px 10px; border-bottom:1px solid #EBEBEB; }
.prow:last-child { border-bottom:none; }
footer { padding:10px 32px; border-top:1px solid #DDDDDD; font-size:10px; color:#666; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Bio Techne</div>
<div class="navlinks"><span>R&D Systems</span><span>Novus Biologicals</span><span>Tocris</span><span>ProteinSimple</span></div>
<div class="searchbar">Search by catalog # or gene name…</div>
</nav>
<main>
<div class="gallery"><div class="well"><div class="w"></div><div class="w"></div><div class="w"></div><div class="w"></div><div class="w"></div><div class="w"></div><div class="w"></div><div class="w"></div></div></div>
<div class="info">
<span class="catnum">Cat. # MAB1406 · R&D Systems</span>
<h1>Human/Mouse CDX2 Antibody</h1>
<div class="metarow"><b>Host:</b> Mouse <b>Reactivity:</b> Human, Mouse</div>
<div class="apps"><span class="app">WB</span><span class="app">IHC</span><span class="app">IF</span><span class="app">ELISA</span></div>
<p class="desc">Monoclonal antibody validated across four applications with lot-specific datasheets and citation records.</p>
<div class="ctas">
<button class="btn-add">Add to Cart</button>
<button class="btn-quote">Request a Quote</button>
</div>
<button class="btn-doc">View Datasheet · Download Protocol</button>
</div>
<div class="side">
<span class="label">Size / Pricing</span>
<div class="pricetable">
<div class="prow"><span>100 µg</span><span>$425.00</span></div>
<div class="prow"><span>50 µg</span><span>$310.00</span></div>
<div class="prow"><span>Bulk quote</span><span>Contact us</span></div>
</div>
<span class="label">In Stock — ships next business day</span>
</div>
</main>
<footer><span>© Bio Techne</span><span>12 brands · one catalog · Citations · Support</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; margin: 0; color: #6e6e6e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #2a3b5c; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #2a3b5c;
border: 1px solid #2a3b5c; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e6e6e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.2px; background: #f5f5f5; color: #3a3a3a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Gotham','Helvetica Neue',Helvetica,Arial,sans-serif; background:#ffffff; color:#3a3a3a; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #dedede;}
.logo{font-family:'quincy-cf',Georgia,serif;font-size:22px;font-weight:700;color:#2a3b5c;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:500;letter-spacing:0.4px;text-transform:uppercase;color:#3a3a3a;}
.hero{height:210px;display:flex;align-items:center;padding:0 40px;background:#f0eeeb;}
.heroText{width:48%;}
.h1{font-family:'quincy-cf',Georgia,serif;font-size:32px;font-weight:700;color:#121212;line-height:1.15;margin:0 0 12px;}
.sub{font-size:14px;color:#6e6e6e;margin:0 0 16px;max-width:300px;}
.cta{display:inline-block;background:#2a3b5c;color:#fff;font-size:12px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;padding:12px 26px;width:fit-content;}
.heroImg{width:52%;height:150px;background:#ffffff;border:1px solid #dedede;position:relative;}
.chair{position:absolute;width:110px;height:110px;top:18px;left:70px;background:linear-gradient(160deg,#607089,#2a3b5c);}
.sec{padding:16px 40px 0;}
.secTitle{font-family:'Gotham','Helvetica Neue',sans-serif;font-size:17px;font-weight:500;color:#121212;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;border:1px solid #dedede;padding:10px;}
.thumb{height:104px;margin-bottom:8px;}
.swrow{display:flex;gap:6px;margin-bottom:6px;}
.sw{width:14px;height:14px;border-radius:9999px;border:1px solid #dedede;}
.ptitle{font-size:13px;font-weight:500;color:#121212;line-height:1.3;height:34px;overflow:hidden;}
.pprice{font-size:14px;font-weight:500;color:#121212;margin-top:4px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Polywood</div>
<div class="navlinks"><span>Adirondack</span><span>Dining</span><span>Seating</span><span>Accessories</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Built like lumber. Lasts like plastic never could.</div>
<div class="sub">Recycled-material outdoor furniture, engineered to outlast the weather and the guest list.</div>
<div class="cta">Shop Adirondack Chairs</div>
</div>
<div class="heroImg"><div class="chair"></div></div>
</div>
<div class="sec">
<div class="secTitle">Best-Selling Collections</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#607089,#2a3b5c);"></div><div class="swrow"><div class="sw" style="background:#2a3b5c;"></div><div class="sw" style="background:#607089;"></div><div class="sw" style="background:#f0eeeb;"></div></div><div class="ptitle">Classic Folding Adirondack Chair</div><div class="pprice">$249.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2a3b5c,#607089);"></div><div class="swrow"><div class="sw" style="background:#607089;"></div><div class="sw" style="background:#2a3b5c;"></div></div><div class="ptitle">Six-Seat Farmhouse Dining Set</div><div class="pprice">$1,899.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#607089,#f0eeeb);"></div><div class="swrow"><div class="sw" style="background:#2a3b5c;"></div></div><div class="ptitle">Outdoor Rocking Chair</div><div class="pprice">$389.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2a3b5c,#f0eeeb);"></div><div class="swrow"><div class="sw" style="background:#607089;"></div><div class="sw" style="background:#2a3b5c;"></div></div><div class="ptitle">Side Table, Slat Top</div><div class="pprice">$179.00</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fef9ea; color: #2d2d2d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fef9ea; color: #2d2d2d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #2d2d2d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #b1b0b8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ea5c8e; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #fef9ea; color: #2d2d2d;
border: 1px solid #ea5c8e; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fef9ea; color: #2d2d2d;
border: 1px solid #cac6bb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b1b0b8; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; letter-spacing: 0.5px; background: #ea5c8e; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fef9ea; font-family:'Segoe UI',Arial,sans-serif; color:#504f60; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#2d2d2d;}
.logo{font-size:19px;font-weight:600;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;color:#fff;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;}
.herotext{width:440px;}
h1{font-size:30px;font-weight:500;color:#2d2d2d;margin:0 0 12px;line-height:1.25;}
.sub{font-size:14px;color:#504f60;margin:0 0 18px;max-width:330px;}
.cta{display:inline-block;background:#ea5c8e;color:#fff;font-size:14px;font-weight:700;padding:13px 28px;border-radius:9999px;width:fit-content;}
.mat{position:absolute;right:90px;top:50px;width:180px;height:220px;border-radius:16px;background:linear-gradient(160deg,#ea5c8e,#8f1354);}
.line{position:absolute;background:#fff;opacity:.5;}
.l1{width:140px;height:2px;right:110px;top:100px;}
.l2{width:140px;height:2px;right:110px;top:150px;}
.sec{padding:18px 40px 0;}
.sectitle{font-size:17px;font-weight:600;margin-bottom:14px;color:#2d2d2d;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:12px;padding:12px;box-shadow:0 4px 14px rgba(0,0,0,.05);position:relative;}
.thumb{height:96px;border-radius:8px;background:#f2e3e9;margin-bottom:8px;}
.badge{position:absolute;top:20px;left:20px;background:#ea5c8e;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 10px;border-radius:9999px;}
.pname{font-size:13px;font-weight:600;color:#2d2d2d;margin-bottom:3px;}
.pprice{font-size:14px;font-weight:600;color:#504f60;}
</style>
<div class="nav">
<div class="logo">Liforme</div>
<div class="navlinks"><span>Mats</span><span>Accessories</span><span>Community</span></div>
</div>
<div class="hero" style="position:relative;">
<div class="herotext">
<h1>Alignment You Can See.</h1>
<div class="sub">Patented alignment markers on a mat that never lets your practice drift.</div>
<div class="cta">Shop Yoga Mats</div>
</div>
<div class="mat"></div><div class="line l1"></div><div class="line l2"></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb"></div><div class="pname">Original Yoga Mat</div><div class="pprice">$149.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Travel Mat, Foldable</div><div class="pprice">$120.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Yoga Mat Bag</div><div class="pprice">$59.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #ff4c2d; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #000000;
border: 1px solid #ff4c2d; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffff00; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#1a1a1a; font-family:Arial,Helvetica,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:18px;font-weight:700;text-transform:uppercase;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;}
.navlinks .active{color:#ff4c2d;}
.hero{background:#000;color:#fff;padding:34px 32px;}
.hero h1{font-size:32px;font-weight:700;margin:0 0 14px;max-width:520px;}
.cta{display:inline-block;background:#ff4c2d;color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:12px 28px;border-radius:9999px;}
.grid{display:flex;gap:14px;padding:16px 32px;}
.card{width:200px;border-radius:8px;overflow:hidden;}
.thumb{height:110px;position:relative;}
.badge{position:absolute;top:6px;left:6px;font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.new{background:#ffff00;color:#000;}
.sale{background:#ff4c2d;color:#fff;}
.ptitle{font-size:13px;font-weight:700;margin-top:8px;}
.artist{font-size:12px;color:#666;}
.price{font-size:13px;font-weight:700;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:52px;background:#000;color:#999;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Planet MU</div>
<div class="navlinks"><div class="active">Releases</div><div>Artists</div><div>Merch</div><div>Streaming</div></div>
</div>
<div class="hero">
<h1>Electronic music, pressed and shipped direct.</h1>
<div class="cta">Shop New Releases</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff4c2d,#0099ff)"><div class="badge new">New</div></div><div class="ptitle">Venetian Snares</div><div class="artist">Cavalcade of Glee</div><div class="price">£19.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0099ff,#ffff00)"></div><div class="ptitle">Machinedrum</div><div class="artist">Room(s)</div><div class="price">£17.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffff00,#ff4c2d)"><div class="badge sale">Sale</div></div><div class="ptitle">µ-Ziq</div><div class="artist">Lunatic Harness</div><div class="price">£15.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#000,#ff4c2d)"></div><div class="ptitle">Various Artists</div><div class="artist">Mu Compilation Vol.3</div><div class="price">£21.99</div></div>
</div>
<div class="footer"><span>© Planet MU · Independent Since 1995</span><span>Streaming · Newsletter</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f06a6a; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f06a6a; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #753939; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fd3ffd; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f06a6a; color: #000000;
border: 1px solid #fd3ffd; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f06a6a; color: #111111;
border: 1px solid #cc5c5c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #753939; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f26382; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0d0e10; box-sizing:border-box;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #e7e7e7; }
.brand { font-size:18px; font-weight:500; letter-spacing:-0.01em; margin:0; }
.breadcrumb { color:#646f79; font-size:13px; margin-left:14px; }
.topbar .left { display:flex; align-items:center; }
.newbtn { background:#0d0d0d; color:#ffffff; border:none; border-radius:100px;
padding:0 20px; height:36px; font-size:13px; font-weight:500; }
.body { display:flex; height:584px; }
.side { width:190px; background:#fafafa; border-right:1px solid #e7e7e7; padding:20px 14px; }
.side .proj { font-size:13px; font-weight:500; color:#0d0d0d; margin:0 0 18px; padding:0 8px; }
.side .item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; font-size:13px; color:#646f79; margin-bottom:2px; }
.side .item.on { background:#f3f3f3; color:#0d0d0d; font-weight:500; }
.dot { width:8px; height:8px; border-radius:50%; }
.d1{background:#f06a6a;} .d2{background:#222875;} .d3{background:#cbefff;} .d4{background:#466451;}
.board { flex:1; padding:20px 24px; overflow:hidden; }
.boardhead { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.boardhead h2 { font-size:22px; font-weight:400; margin:0; letter-spacing:-0.01em; }
.tag-pill { background:#ffeaec; color:#690031; border-radius:9999px; font-size:11px; padding:4px 12px; font-weight:400; }
.cols { display:flex; gap:16px; height:490px; }
.col { width:210px; }
.colhead { display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:500;
color:#646f79; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:10px; }
.colhead .count { background:#f3f3f3; color:#0d0d0d; border-radius:9999px; padding:1px 8px; font-size:11px; }
.card { background:#ffffff; border:1px solid #e7e7e7; border-radius:16px; padding:14px; margin-bottom:12px; }
.card h4 { font-size:13px; font-weight:500; margin:0 0 8px; color:#0d0e10; }
.badgerow { display:flex; gap:6px; margin-bottom:10px; }
.b-sky { background:#cbefff; color:#0d0e10; border-radius:9999px; font-size:10px; padding:2px 8px; }
.b-sage { background:#e9f1ea; color:#466451; border-radius:9999px; font-size:10px; padding:2px 8px; }
.cardfoot { display:flex; align-items:center; justify-content:space-between; }
.avatar { width:22px; height:22px; border-radius:50%; background:#222875; }
.due { font-size:11px; color:#9ca6af; }
.col.done .card { opacity:0.6; }
.accent-col { background:#f3f3f3; border-radius:16px; padding:12px; height:fit-content; }
</style></head>
<body>
<div class="topbar">
<div class="left">
<p class="brand">Asana</p>
<span class="breadcrumb">/ Growth Roadmap</span>
</div>
<button class="newbtn">+ New task</button>
</div>
<div class="body">
<div class="side">
<p class="proj">My Workspace</p>
<div class="item on"><span class="dot d1"></span>Growth Roadmap</div>
<div class="item"><span class="dot d2"></span>Design System</div>
<div class="item"><span class="dot d3"></span>Q3 Launch</div>
<div class="item"><span class="dot d4"></span>Support Backlog</div>
</div>
<div class="board">
<div class="boardhead">
<h2>Growth Roadmap</h2>
<span class="tag-pill">AI Teammate active</span>
</div>
<div class="cols">
<div class="col">
<div class="colhead">To do <span class="count">4</span></div>
<div class="card"><h4>Draft onboarding email sequence</h4>
<div class="badgerow"><span class="b-sky">Marketing</span></div>
<div class="cardfoot"><div class="avatar"></div><span class="due">Due Fri</span></div></div>
<div class="card"><h4>Audit signup funnel drop-off</h4>
<div class="badgerow"><span class="b-sage">Growth</span></div>
<div class="cardfoot"><div class="avatar"></div><span class="due">Due Mon</span></div></div>
</div>
<div class="col">
<div class="colhead">In progress <span class="count">3</span></div>
<div class="card"><h4>Ship referral program v2</h4>
<div class="badgerow"><span class="b-sky">Product</span></div>
<div class="cardfoot"><div class="avatar"></div><span class="due">Due Wed</span></div></div>
<div class="card"><h4>Interview 5 churned users</h4>
<div class="badgerow"><span class="b-sage">Research</span></div>
<div class="cardfoot"><div class="avatar"></div><span class="due">Due Thu</span></div></div>
</div>
<div class="col done">
<div class="colhead">Done <span class="count">6</span></div>
<div class="card"><h4>Set Q3 growth targets</h4>
<div class="badgerow"><span class="b-sky">Planning</span></div>
<div class="cardfoot"><div class="avatar"></div><span class="due">Done</span></div></div>
<div class="card"><h4>Publish pricing page test</h4>
<div class="badgerow"><span class="b-sage">Growth</span></div>
<div class="cardfoot"><div class="avatar"></div><span class="due">Done</span></div></div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6d6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #0035ff; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: transparent; color: #0035ff;
border: 1px solid #0035ff; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ffd100; color: #121212;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Elegoo</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#121212; font-family:Poppins,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #dedede; }
.logo { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:20px; letter-spacing:-.5px; }
.navlinks { display:flex; gap:24px; font-size:14px; }
.navlinks span.on { border-bottom:2px solid #0035ff; padding-bottom:24px; }
.btn { background:#0035ff; color:#fff; border-radius:4px; padding:12px 24px; font-size:15px; font-weight:600;
font-family:'Plus Jakarta Sans',sans-serif; }
.hero { height:220px; background:#121212; display:flex; align-items:center; padding:0 32px; gap:30px; color:#fff; }
.hero-copy { flex:1; }
.hero-copy h1 { font-family:'Plus Jakarta Sans',sans-serif; font-size:34px; font-weight:700; line-height:1.15; margin:0 0 12px; letter-spacing:-.3px; }
.hero-copy p { font-size:14px; color:#b2b2b2; margin:0 0 16px; max-width:340px; }
.hero-art { flex:1; height:170px; border-radius:8px; position:relative; overflow:hidden;
background:linear-gradient(160deg,#2c2d2e,#121212); }
.printer { position:absolute; width:120px; height:130px; border:3px solid #0035ff; border-radius:8px; top:18px; left:40px; }
.printer::before { content:''; position:absolute; width:60px; height:6px; background:#a75bff; top:20px; left:26px; border-radius:3px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:20px 32px; }
.card { background:#fff; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.08); padding:14px; }
.thumb { height:80px; border-radius:8px; margin-bottom:8px; position:relative; }
.t1 { background:linear-gradient(160deg,#121212,#0035ff); }
.t2 { background:linear-gradient(160deg,#2c2d2e,#a75bff); }
.t3 { background:linear-gradient(160deg,#e2e2e2,#121212); }
.t4 { background:linear-gradient(160deg,#121212,#ffd100); }
.badge { position:absolute; top:6px; left:6px; border-radius:9999px; padding:3px 10px; font-size:10px; font-weight:700;
letter-spacing:.3px; text-transform:uppercase; color:#fff; background:#0035ff; }
.tags { display:flex; gap:6px; margin-bottom:6px; }
.tags span { background:#f5f5f5; color:#272727; font-size:10px; border-radius:4px; padding:3px 6px; }
.name { font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:600; margin:0 0 4px; }
.price { font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; font-weight:700; }
</style></head>
<body>
<nav>
<div class="logo">Elegoo</div>
<div class="navlinks"><span class="on">Resin Printers</span><span>FDM</span><span>Laser Engravers</span><span>Materials</span></div>
<div class="btn">Shop All</div>
</nav>
<div class="hero">
<div class="hero-copy">
<h1>Precision printing, one layer at a time.</h1>
<p>0.05mm resolution resin and FDM printers built for makers who demand exactness.</p>
</div>
<div class="hero-art"><div class="printer"></div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="badge">New</span></div><div class="tags"><span>4K Mono</span><span>172x102</span></div><p class="name">Saturn 4 Ultra</p><p class="price">$429.00</p></div>
<div class="card"><div class="thumb t2"></div><div class="tags"><span>Flagship</span></div><p class="name">Neptune 4 Max FDM</p><p class="price">$399.00</p></div>
<div class="card"><div class="thumb t3"></div><div class="tags"><span>Beginner</span></div><p class="name">Mars 5 Resin Printer</p><p class="price">$199.00</p></div>
<div class="card"><div class="thumb t4"></div><div class="tags"><span>Sale</span></div><p class="name">1KG Standard Resin</p><p class="price">$24.99</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff8d08; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff8d08; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c490d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1d1d1d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff8d08; color: #1d1d1d;
border: 1px solid #1d1d1d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff8d08; color: #111111;
border: 1px solid #d97909; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c490d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #db7b0b; color: #1d1d1d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Inter", -apple-system, BlinkMacSystemFont, "Noto Sans KR", sans-serif; }
* { box-sizing:border-box; }
.chip { position:absolute; border-radius:9999px; opacity:0.14; }
.chip.c1 { width:220px; height:220px; left:-70px; top:-60px; background:#ff3c96; }
.chip.c2 { width:180px; height:180px; right:-50px; top:-70px; background:#22ccdd; }
.chip.c3 { width:150px; height:150px; right:60px; bottom:-60px; background:#ccdd32; }
nav { position:relative; z-index:2; height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; background:#ffffff; }
.brand { font-size:20px; font-weight:800; margin:0; letter-spacing:-0.3px; color:#001122; }
.navlinks { display:flex; gap:6px; font-size:12px; color:#000000; }
.navlinks span { padding:6px 10px; border-radius:4px; }
.cta-pill { background:#ff8d08; color:#ffffff; border:none; border-radius:100px; padding:0 20px; height:32px;
font-size:12px; font-weight:700; white-space:nowrap; box-shadow:rgba(0,0,0,0.04) 0px 1px 2px; }
.hero { position:relative; z-index:2; padding:22px 36px 18px; display:flex; flex-direction:column; gap:10px; }
.eyebrow { display:inline-flex; align-self:flex-start; background:#f2f2f2; color:#8a8a8a; font-size:14px;
font-weight:600; padding:4px 12px; border-radius:9999px; letter-spacing:0.02em; }
.hero h1 { font-size:36px; font-weight:700; letter-spacing:-0.6px; margin:0; color:#001122; line-height:1.2; max-width:640px; }
.hero p { font-size:15px; color:#000000; margin:0; max-width:560px; }
.row { display:flex; gap:10px; align-items:center; margin-top:4px; }
.btn-primary { background:#ff8d08; color:#ffffff; border:none; border-radius:100px; padding:0 24px; height:44px;
font-size:15px; font-weight:700; box-shadow:rgba(0,0,0,0.04) 0px 1px 2px; }
.btn-ghost { background:rgba(255,255,255,0.05); color:#000000; border:1.5px solid #001122; border-radius:118px;
padding:0 24px; height:44px; font-size:14px; font-weight:600; }
.main { position:relative; z-index:2; display:grid; grid-template-columns:1.15fr 0.85fr; gap:16px; padding:6px 36px 20px; }
.dash { background:#f2f2f2; border-radius:12px; padding:18px; }
.dash-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.dash-title { font-size:14px; font-weight:700; color:#001122; }
.dash-tag { font-size:11px; color:#8a8a8a; font-weight:600; }
.chan-row { display:flex; align-items:center; gap:10px; background:#ffffff; border-radius:10px; padding:10px 12px; margin-bottom:8px; }
.dot { width:10px; height:10px; border-radius:50%; flex:none; }
.chan-name { font-size:13px; font-weight:700; color:#000000; width:78px; }
.bar-track { flex:1; height:8px; background:#f2f2f2; border-radius:99px; overflow:hidden; }
.bar-fill { height:100%; border-radius:99px; }
.chan-val { font-size:12px; font-weight:700; color:#8a8a8a; width:44px; text-align:right; }
.side { display:flex; flex-direction:column; gap:12px; }
.cat-card { border-radius:12px; padding:14px 16px; color:#ffffff; display:flex; flex-direction:column; gap:6px; }
.cat-card .tag { font-size:11px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; opacity:0.9; }
.cat-card h3 { margin:0; font-size:16px; font-weight:800; }
.cat-card p { margin:0; font-size:12px; line-height:1.4; opacity:0.95; }
.badges { display:flex; gap:8px; padding:0 36px 16px; flex-wrap:wrap; position:relative; z-index:2; }
.badge { border-radius:9999px; padding:4px 12px; font-size:12px; font-weight:700; color:#ffffff; }
footer { position:relative; z-index:2; border-top:1px solid #f2f2f2; padding:12px 36px;
display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#8a8a8a; }
</style></head>
<body>
<div class="chip c1"></div>
<div class="chip c2"></div>
<div class="chip c3"></div>
<nav>
<p class="brand">Wisetracker</p>
<div class="navlinks"><span>Product</span><span>Pricing</span><span>Contact</span><span>Partners</span></div>
<button class="cta-pill">Get Started</button>
</nav>
<section class="hero">
<span class="eyebrow">Marketing Automation</span>
<h1>Your starting point for smarter data use</h1>
<p>Wisetracker unifies every service you need for marketing analytics & activation — Kakao, Meta, and Naver channel performance, all in one place.</p>
<div class="row">
<button class="btn-primary">Start Free Demo</button>
<button class="btn-ghost">Try Demo</button>
</div>
</section>
<section class="main">
<div class="dash">
<div class="dash-head">
<span class="dash-title">Conversion Attribution by Channel</span>
<span class="dash-tag">Last 7 days</span>
</div>
<div class="chan-row"><span class="dot" style="background:#ff3c96"></span><span class="chan-name">Kakao</span><div class="bar-track"><div class="bar-fill" style="width:82%;background:#ff3c96"></div></div><span class="chan-val">38.2%</span></div>
<div class="chan-row"><span class="dot" style="background:#22ccdd"></span><span class="chan-name">Meta</span><div class="bar-track"><div class="bar-fill" style="width:64%;background:#22ccdd"></div></div><span class="chan-val">27.6%</span></div>
<div class="chan-row"><span class="dot" style="background:#ccdd32"></span><span class="chan-name">Naver</span><div class="bar-track"><div class="bar-fill" style="width:48%;background:#ccdd32"></div></div><span class="chan-val">19.4%</span></div>
<div class="chan-row"><span class="dot" style="background:#bb66cc"></span><span class="chan-name">Organic</span><div class="bar-track"><div class="bar-fill" style="width:31%;background:#bb66cc"></div></div><span class="chan-val">14.8%</span></div>
</div>
<div class="side">
<div class="cat-card" style="background:#22ccdd;"><span class="tag">Attribution</span><h3>From comparison to action</h3><p>Measure every channel, then automate the next best action.</p></div>
<div class="cat-card" style="background:#ff53ae;"><span class="tag">Automation</span><h3>Cart-abandon nudges</h3><p>Send a purchase reminder to abandoners exactly one day later.</p></div>
<div class="cat-card" style="background:#ffbb0e;"><span class="tag">SDK</span><h3>Developer guide</h3><p>From pre-setup diagnostics to live event tracking status.</p></div>
</div>
</section>
<div class="badges">
<span class="badge" style="background:#ff3c96">Kakao Ads</span>
<span class="badge" style="background:#22ccdd">Meta Ads</span>
<span class="badge" style="background:#ccdd32">Naver Ads</span>
<span class="badge" style="background:#bb66cc">CRM</span>
</div>
<footer>
<span>© Wisetracker</span>
<span>Wisetracker · Product · Pricing · Contact</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #030303; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #030303; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #000000; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:"Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:15px; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:24px; font-size:14px; letter-spacing:-0.16px; color:#c9ccd1; }
.btn { background:#000; color:#fff; border:1px solid #27272a; border-radius:4px; padding:6px 14px; font-size:13px; }
.reel { display:grid; grid-template-columns:1.4fr 1fr 1fr; grid-template-rows:180px 180px; gap:4px; padding:0 4px; }
.frame { position:relative; overflow:hidden; }
.frame.f1 { grid-row:1/3; background:linear-gradient(160deg,#1a1a2e,#5c3d7a 40%,#c9556d 75%,#f2a154); }
.frame.f2 { background:linear-gradient(160deg,#0d2b3e,#1a5276); }
.frame.f3 { background:linear-gradient(200deg,#3a2a1a,#8a5a2e,#d4a24e); }
.frame.f4 { background:linear-gradient(160deg,#1a1a1a,#404040); }
.frame.f5 { background:linear-gradient(200deg,#1a1a1a,#767d88); }
.frame .caption { position:absolute; left:12px; bottom:10px; font-size:11px; letter-spacing:0.35px; text-transform:uppercase; color:#fff; font-weight:450; }
.frame.f1 h1 { position:absolute; left:16px; bottom:36px; right:16px; font-size:34px; line-height:1; letter-spacing:-1.2px; margin:0; }
.row2 { display:flex; gap:16px; padding:16px 32px; }
.col { flex:1; }
.col .lab { font-size:11px; text-transform:uppercase; letter-spacing:0.35px; color:#7d848e; margin:0 0 8px; }
.col h3 { font-size:20px; font-weight:400; line-height:1; margin:0 0 6px; }
.col p { font-size:13px; color:#767d88; line-height:1.4; margin:0; }
footer { border-top:1px solid #27272a; padding:10px 32px; display:flex; justify-content:space-between; font-size:11px; color:#767d88; }
</style></head>
<body>
<nav>
<span class="brand">RunwayML</span>
<div class="navlinks"><span>Product</span><span>Research</span><span>Enterprise</span><span>Pricing</span></div>
<span class="btn">Sign in</span>
</nav>
<div class="reel">
<div class="frame f1"><h1>Tools for<br>human imagination.</h1></div>
<div class="frame f2"><span class="caption">Gen-4 · Video</span></div>
<div class="frame f3"><span class="caption">Act-Two · Motion</span></div>
<div class="frame f4"><span class="caption">Aleph · Editing</span></div>
<div class="frame f5"><span class="caption">Frames · Image</span></div>
</div>
<div class="row2">
<div class="col"><p class="lab">Generative Video</p><h3>Gen-4</h3><p>Create consistent characters and worlds across every shot.</p></div>
<div class="col"><p class="lab">Video Editing</p><h3>Aleph</h3><p>Edit any video with a single instruction — no timeline required.</p></div>
<div class="col"><p class="lab">Research</p><h3>General World Models</h3><p>Building systems that understand the visual world.</p></div>
</div>
<footer>
<span>© RunwayML</span>
<span>Product · Research · Enterprise · Pricing</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.18; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #dcc532; color: #111111;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #111111;
border: 1px solid #dcc532; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; letter-spacing: 0.3px; background: #7a9c59; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>July AC Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Roboto,Arial,-apple-system,system-ui,sans-serif; background:#ffffff; color:#111111; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #eeeeee;}
.logo{font-size:19px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.search{width:220px;height:38px;border-radius:999px;background:#f3f3f3;font-size:12px;color:#777;line-height:38px;padding:0 16px;}
.hero{background:#f1f1f1;padding:26px 36px;display:flex;align-items:center;justify-content:space-between;}
.hero-text h1{font-size:34px;font-weight:700;line-height:1.15;letter-spacing:-.4px;margin:0 0 10px;}
.hero-text p{font-size:14px;color:#444;max-width:340px;margin:0 0 16px;}
.btn{display:inline-block;background:#dcc532;color:#111;padding:14px 30px;border-radius:8px;font-size:14px;font-weight:600;}
.hero-art{width:170px;height:140px;border-radius:12px;background:linear-gradient(160deg,#f0e5b0,#dcc532);position:relative;}
.swatches{display:flex;gap:8px;padding:16px 36px;align-items:center;}
.swatch{width:36px;height:36px;border-radius:999px;border:2px solid #e0e0e0;}
.swatch.active{border-color:#dcc532;box-shadow:0 0 0 2px #dcc532;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 36px 20px;}
.card{background:#fff;border:1px solid #eeeeee;border-radius:12px;padding:14px;}
.imgbox{background:#f1f1f1;border-radius:12px;height:96px;}
.title{font-size:15px;font-weight:600;margin-top:10px;}
.specs{font-size:11px;color:#777;margin-top:2px;}
.price{font-size:18px;font-weight:700;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">July AC</div>
<div class="navlinks"><span>Products</span><span>How It Works</span><span>Design Yours</span><span>Support</span></div>
<div class="search">Search products, specs…</div>
</div>
<div class="hero">
<div class="hero-text">
<h1>An air conditioner<br>you'll want to see.</h1>
<p>Custom panel colors that match your wall — window units designed for style, not just cooling.</p>
<div class="btn">Design Yours</div>
</div>
<div class="hero-art"></div>
</div>
<div class="swatches">
<div class="swatch" style="background:#c98a5a;"></div>
<div class="swatch active" style="background:#8fa878;"></div>
<div class="swatch" style="background:#e8dfc8;"></div>
<div class="swatch" style="background:#2b2b3a;"></div>
<div class="swatch" style="background:#d9a8a0;"></div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#e5dcc5,#c9973f);"></div>
<div class="title">July Standard 8,000 BTU</div>
<div class="specs">Covers up to 350 sq ft</div>
<div class="price">$429</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#d5e0d5,#7a9c59);"></div>
<div class="title">July Standard 12,000 BTU</div>
<div class="specs">Covers up to 550 sq ft</div>
<div class="price">$529</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#d8d8dd,#3c3c48);"></div>
<div class="title">Side Panel — Midnight Trim</div>
<div class="specs">Compatible with all models</div>
<div class="price">$49</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff66af; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff66af; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c3758; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff66af; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff66af; color: #111111;
border: 1px solid #d95896; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c3758; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff7ebc; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Spoqa Han Sans Neo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #eeeeee; }
.brand { font-size:17px; font-weight:700; }
.pills { display:flex; gap:8px; }
.pill { background:#ffffff; color:#8c8c8c; font-size:12px; border:1px solid #eeeeee; border-radius:32px;
padding:6px 16px; box-shadow:0 2px 0 rgba(0,0,0,0.02); }
.hero { padding:30px 36px 18px; position:relative; }
.h1 { font-size:32px; font-weight:700; line-height:1.25; margin:0 0 8px; max-width:600px; }
.sub { font-size:14px; color:#5a5a5a; margin:0 0 18px; max-width:520px; line-height:1.5; }
.cta { display:inline-block; background:#ff66af; color:#ffffff; border:none; border-radius:32px;
padding:15px 30px; font-size:16px; box-shadow:rgba(255,5,88,0.06) 0px 2px 0px 0px; }
.fins { position:absolute; right:36px; top:26px; display:flex; gap:6px; }
.fin { width:0; height:0; border-style:solid; }
.fin1 { border-width:0 18px 46px 18px; border-color:transparent transparent #ff66af transparent; transform:rotate(-6deg); }
.fin2 { border-width:0 14px 36px 14px; border-color:transparent transparent #08c7ff transparent; margin-top:14px; transform:rotate(8deg); }
.fin3 { border-width:0 22px 56px 22px; border-color:transparent transparent #ffd2e6 transparent; transform:rotate(3deg); }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:14px 36px 28px; }
.tile { border:1px solid #eeeeee; border-radius:12px; padding:16px 14px; display:flex; flex-direction:column; gap:10px; }
.tile-fin { width:0; height:0; border-style:solid; border-width:0 10px 24px 10px; }
.tf1 { border-color:transparent transparent #ff66af transparent; }
.tf2 { border-color:transparent transparent #08c7ff transparent; }
.tf3 { border-color:transparent transparent #ffcf3d transparent; }
.tf4 { border-color:transparent transparent #7ad2c3 transparent; }
.tile h4 { font-size:14px; font-weight:700; margin:0; }
.tile p { font-size:11px; color:#5a5a5a; margin:0; line-height:1.4; }
.outline-btn { align-self:flex-start; background:#ffffff; color:#08c7ff; border:1.5px solid #08c7ff;
border-radius:32px; padding:6px 14px; font-size:12px; }
.foot { padding:0 36px; display:flex; justify-content:space-between; align-items:center;
font-size:11px; color:#8c8c8c; }
</style></head>
<body>
<nav>
<span class="brand">The Pinkfong Company</span>
<div class="pills">
<span class="pill">Pinkfong</span>
<span class="pill">Shark Family</span>
<span class="pill">Bebe World</span>
</div>
</nav>
<section class="hero">
<div class="fins"><span class="fin fin1"></span><span class="fin fin2"></span><span class="fin fin3"></span></div>
<h1 class="h1">Connecting people through joyful content</h1>
<p class="sub">The Pinkfong Company makes memorable music, stories, and characters that travel from a nursery in Seoul to a living room anywhere in the world.</p>
<button class="cta">Explore our world</button>
</section>
<section class="grid">
<div class="tile"><span class="tile-fin tf1"></span><h4>Content</h4><p>Music, stories, and video series built around characters kids remember.</p><span class="outline-btn">Learn more</span></div>
<div class="tile"><span class="tile-fin tf2"></span><h4>Partnerships</h4><p>Co-creating experiences with studios and platforms worldwide.</p><span class="outline-btn">Learn more</span></div>
<div class="tile"><span class="tile-fin tf3"></span><h4>Merchandise</h4><p>Toys and goods that bring the characters off the screen.</p><span class="outline-btn">Learn more</span></div>
<div class="tile"><span class="tile-fin tf4"></span><h4>Live Events</h4><p>Concerts and shows for families to enjoy together.</p><span class="outline-btn">Learn more</span></div>
</section>
<div class="foot">
<span>© The Pinkfong Company</span>
<span>The Pinkfong Company · Company · Business · Newsroom</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8a8f8d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #116dff; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #080808;
border: 1px solid #116dff; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #080808;
border: 1px solid #c1c1c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8f8d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #116dff; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#5f6360; box-sizing:border-box;
font-family:Arial,Helvetica,'Hiragino Kaku Gothic Pro','Meiryo',sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#080808; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:20px; font-weight:700; color:#fff; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; color:#fff; }
.navlinks span.active { color:#116dff; }
.icon-row { display:flex; gap:14px; align-items:center; }
.search-pill { width:170px; height:34px; border-radius:9999px; background:#fff; font-size:12px; color:#5f6360;
display:flex; align-items:center; padding:0 16px; }
.cart-dot { color:#116dff; font-size:18px; }
.hero { height:180px; background:#080808; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.hero h1 { color:#fff; font-size:28px; font-weight:700; margin:0 0 8px; max-width:400px; line-height:1.3; }
.hero p { color:#b0b5b3; font-size:14px; margin:0 0 16px; }
.btn-blue { display:inline-block; background:#116dff; color:#fff; font-size:15px; font-weight:600; letter-spacing:0.3px;
padding:14px 24px; border-radius:8px; }
.coils { display:flex; gap:6px; }
.coil { width:14px; height:130px; border-radius:7px; background:repeating-linear-gradient(0deg,#c0c0c0 0 4px, #888 4px 8px); }
.grid { display:flex; gap:16px; padding:18px 32px 0; }
.card { flex:1; background:#ffffff; border-radius:8px; overflow:hidden; box-shadow:0 0 0 1px #e5e8e6; position:relative; }
.card .art { height:88px; background:#f5f6f5; display:flex; align-items:center; justify-content:center; }
.coil-mini { width:8px; height:56px; border-radius:4px; background:repeating-linear-gradient(0deg,#aaa 0 3px, #666 3px 6px); }
.badge { position:absolute; top:8px; left:8px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
padding:4px 8px; border-radius:4px; color:#fff; }
.badge.new { background:#116dff; }
.badge.sale { background:#e63946; }
.card .body { padding:10px 12px 14px; }
.card .name { font-size:14px; font-weight:600; color:#080808; margin-bottom:4px; }
.card .price { font-size:16px; color:#080808; }
footer { position:absolute; bottom:0; left:0; right:0; height:80px; background:#080808; color:#b0b5b3; display:flex;
align-items:center; justify-content:space-between; padding:0 32px; }
footer .col { font-size:12px; line-height:1.9; }
footer .col b { display:block; color:#fff; margin-bottom:3px; }
.wrap { position:relative; height:640px; }
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="brand">DR Strings</div>
<div class="navlinks"><span class="active">Electric</span><span>Acoustic</span><span>Bass</span><span>Accessories</span></div>
<div class="icon-row"><div class="search-pill">Search string sets...</div><div class="cart-dot">🛒</div></div>
</nav>
<div class="hero">
<div>
<h1>Nickel and steel, wound for tone.</h1>
<p>String sets engineered for players who hear the difference.</p>
<a class="btn-blue">Shop String Sets</a>
</div>
<div class="coils"><div class="coil"></div><div class="coil"></div><div class="coil"></div></div>
</div>
<div class="grid">
<div class="card"><span class="badge new">New</span><div class="art"><div class="coil-mini"></div></div><div class="body"><div class="name">Pure Blues 10-46</div><div class="price">$8.99</div></div></div>
<div class="card"><span class="badge sale">Sale</span><div class="art"><div class="coil-mini"></div></div><div class="body"><div class="name">Tite-Fit Bass 45-105</div><div class="price">$21.99</div></div></div>
<div class="card"><div class="art"><div class="coil-mini"></div></div><div class="body"><div class="name">Neon Electric Coated</div><div class="price">$12.99</div></div></div>
<div class="card"><div class="art"><div class="coil-mini"></div></div><div class="body"><div class="name">Sunbeam Acoustic 12-54</div><div class="price">$9.99</div></div></div>
</div>
<footer>
<div class="col"><b>Shop</b>String Sets<br>Accessories</div>
<div class="col"><b>Support</b>Gauge Guide<br>Contact</div>
<div class="col"><b>DR Strings</b>© Tuned for tone.</div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; background: #163959; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #163959;
border: 1px solid #163959; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #272727;
border: 1px solid #dedede; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #9bca3e; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#272727; box-sizing:border-box;
font-family:Arial, 'Helvetica Neue', -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#163959; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; }
.brand { color:#fff; font-size:18px; font-weight:700; letter-spacing:0.3px; margin:0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#fff; opacity:0.85; font-size:13px; }
.cart { color:#fff; font-size:13px; }
main { display:flex; height:580px; }
.stage { width:340px; background:#ebebeb; display:flex; align-items:center; justify-content:center; position:relative; }
.photo-frame { width:200px; height:250px; background:#fff; border:1px solid #dedede; box-shadow:0 16px 34px rgba(0,0,0,0.18);
display:flex; align-items:center; justify-content:center; padding:12px; }
.photo { width:100%; height:100%; background:linear-gradient(160deg,#4a4a4a,#1a1a1a); position:relative; }
.autograph { position:absolute; bottom:16px; left:16px; right:16px; font-family:'Brush Script MT', cursive; color:#f0f0f0;
font-size:22px; transform:rotate(-4deg); }
.cert-badge { position:absolute; top:20px; right:20px; background:#9bca3e; color:#1a2e08; font-size:10px;
font-weight:700; letter-spacing:0.4px; text-transform:uppercase; padding:5px 10px; border-radius:3px; }
.info { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:11px; }
.badges { display:flex; gap:8px; }
.badge { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; padding:3px 9px; border-radius:3px; color:#fff; }
.b-rare { background:#bd2426; } .b-cert { background:#9bca3e; color:#1a2e08; } .b-feat { background:#f68b1f; }
h1 { font-size:23px; font-weight:700; margin:0; letter-spacing:-0.1px; }
.sub { font-size:13px; color:#404040; margin:0; line-height:1.5; max-width:440px; }
.meta { display:flex; gap:20px; font-size:12px; color:#737373; margin-top:2px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:6px; }
.price { font-size:24px; font-weight:700; color:#163959; }
.authent { font-size:12px; color:#2f7bbf; }
.actions { display:flex; gap:10px; margin-top:6px; }
.btn-primary { background:#163959; color:#fff; border-radius:4px; height:46px; padding:0 26px; display:flex;
align-items:center; font-weight:700; font-size:13px; }
.btn-secondary { background:#fff; border:1px solid #163959; color:#163959; border-radius:4px; height:46px;
padding:0 20px; display:flex; align-items:center; font-size:13px; font-weight:600; }
.coa { margin-top:auto; border-top:1px solid #dedede; padding-top:12px; display:flex; gap:14px; align-items:center; }
.coa-icon { width:32px; height:32px; border-radius:999px; background:#163959; color:#fff; display:flex;
align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.coa p { margin:0; font-size:12px; color:#404040; }
</style></head>
<body>
<nav>
<p class="brand">Autographia</p>
<div class="navlinks"><span>Film & TV</span><span>Music</span><span>Sports</span><span>Certification</span></div>
<span class="cart">Cart (0)</span>
</nav>
<main>
<div class="stage">
<span class="cert-badge">Certified</span>
<div class="photo-frame"><div class="photo"><div class="autograph">R. Halden</div></div></div>
</div>
<div class="info">
<div class="badges"><span class="badge b-rare">Rare</span><span class="badge b-cert">Certified Authentic</span><span class="badge b-feat">Featured</span></div>
<h1>Robert Halden Signed 11x14 Studio Photo</h1>
<p class="sub">Hand-signed in silver marker during the 1987 press tour. Includes full letter of authenticity and archival framing.</p>
<div class="meta"><span>Item #A-40218</span><span>Grade: A+</span><span>Est. 1987</span></div>
<div class="price-row"><span class="price">$1,250.00</span></div>
<p class="authent">✓ Third-party verified · JSA & Beckett witnessed</p>
<div class="actions">
<div class="btn-primary">Purchase Item</div>
<div class="btn-secondary">Request Provenance</div>
</div>
<div class="coa"><div class="coa-icon">COA</div><p>Ships with tamper-evident hologram and full chain-of-custody documentation.</p></div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fa4065; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fa4065; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d62952; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fa4065; color: #000000;
border: 1px solid #d62952; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fa4065; color: #f5f5f5;
border: 1px solid #f95d7c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f43c62; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#444444; box-sizing:border-box;
font-family:"Dotum", "돋움", -apple-system, sans-serif; }
* { box-sizing: border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
border-bottom:1px solid #eef1f4; background:#ffffff; }
.brand { font-size:19px; font-weight:700; color:#fa4065; margin:0; }
.gnb { display:flex; gap:22px; font-size:15px; font-weight:700; color:#27282d; }
.gnb span.on { color:#fa4065; border-bottom:2px solid #fa4065; padding-bottom:15px; }
.nav-right { display:flex; align-items:center; gap:12px; }
.util { font-size:12px; color:#8b8b8b; }
.search { border:1px solid #d2d2d2; border-radius:4px; padding:1px 8px; height:26px; font-size:12px;
color:#969697; width:150px; display:flex; align-items:center; }
.main { display:flex; gap:16px; padding:16px 28px 14px; }
.chart { flex:2; background:#ffffff; border:1px solid #eef1f4; border-radius:8px; box-shadow:rgba(0,0,0,0.06) 0px 1px 3px; }
.chart-head { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid #eef1f4; }
.chart-title { font-size:14px; font-weight:700; color:#27282d; }
.tabs { display:flex; gap:14px; }
.tabs span { font-size:12px; font-weight:400; color:#8b8b8b; padding:0 8px; }
.tabs span.on { color:#0096ff; font-weight:700; }
.row { display:flex; align-items:center; gap:10px; padding:7px 16px; border-bottom:1px solid #eef1f4; }
.rank { width:16px; font-size:11px; color:#969697; text-align:right; }
.thumb { width:32px; height:32px; border-radius:4px; background:linear-gradient(135deg,#f7f8f9,#eef1f4); flex-shrink:0; }
.meta { display:flex; flex-direction:column; flex:1; min-width:0; }
.title { font-size:12px; color:#27282d; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.artist { font-size:11px; color:#969697; }
.ghost { border:1px solid #d2d2d2; color:#444444; border-radius:4px; padding:0 10px; height:22px; font-size:11px;
display:flex; align-items:center; }
.play { background:#fa4065; color:#ffffff; border-radius:4px; padding:0 12px; height:24px; font-size:11px;
font-weight:700; display:flex; align-items:center; }
.row.now .title { color:#fa4065; font-weight:700; }
.side { flex:1; display:flex; flex-direction:column; gap:12px; }
.card { background:#ffffff; border:1px solid #eef1f4; border-radius:8px; box-shadow:rgba(0,0,0,0.06) 0px 1px 3px; padding:12px 14px; }
.card .h { font-size:13px; font-weight:700; color:#27282d; margin:0 0 10px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { background:#434354; color:#ffffff; border-radius:13px; padding:0 12px; height:25px; font-size:12px;
font-weight:700; display:flex; align-items:center; }
.now-card .art { width:100%; height:70px; border-radius:8px; background:linear-gradient(135deg,#fa4065,#434354); margin-bottom:8px; }
.now-card .t { font-size:12px; font-weight:700; color:#27282d; }
.now-card .a { font-size:11px; color:#969697; }
footer { border-top:1px solid #eef1f4; padding:10px 28px; display:flex; justify-content:space-between;
align-items:center; font-size:11px; color:#969697; background:#ffffff; }
</style></head>
<body>
<nav>
<p class="brand">Genie Music</p>
<div class="gnb"><span class="on">Chart</span><span>New Music</span><span>Radio</span><span>Magazine</span></div>
<div class="nav-right">
<span class="util">Log in</span>
<div class="search">Search songs</div>
</div>
</nav>
<section class="main">
<div class="chart">
<div class="chart-head">
<span class="chart-title">Realtime Chart</span>
<div class="tabs"><span class="on">Total</span><span>Domestic</span><span>International</span></div>
</div>
<div class="row now">
<span class="rank">1</span><div class="thumb"></div>
<div class="meta"><span class="title">Midnight Glow</span><span class="artist">Soyeon</span></div>
<div class="ghost">+</div><div class="play">Play</div>
</div>
<div class="row">
<span class="rank">2</span><div class="thumb"></div>
<div class="meta"><span class="title">Paper Boats</span><span class="artist">Jihoon</span></div>
<div class="ghost">+</div><div class="play">Play</div>
</div>
<div class="row">
<span class="rank">3</span><div class="thumb"></div>
<div class="meta"><span class="title">Neon Rain</span><span class="artist">Minji & Camila</span></div>
<div class="ghost">+</div><div class="play">Play</div>
</div>
<div class="row">
<span class="rank">4</span><div class="thumb"></div>
<div class="meta"><span class="title">Slow City</span><span class="artist">Jordan</span></div>
<div class="ghost">+</div><div class="play">Play</div>
</div>
<div class="row">
<span class="rank">5</span><div class="thumb"></div>
<div class="meta"><span class="title">Blue Hour</span><span class="artist">Priya</span></div>
<div class="ghost">+</div><div class="play">Play</div>
</div>
<div class="row" style="border-bottom:none;">
<span class="rank">6</span><div class="thumb"></div>
<div class="meta"><span class="title">After the Rain</span><span class="artist">Alex</span></div>
<div class="ghost">+</div><div class="play">Play</div>
</div>
</div>
<div class="side">
<div class="card">
<p class="h">Realtime Search</p>
<div class="chips">
<div class="chip">Midnight Glow</div><div class="chip">Soyeon</div><div class="chip">Paper Boats</div>
<div class="chip">Neon Rain</div><div class="chip">Jordan</div>
</div>
</div>
<div class="card now-card">
<div class="art"></div>
<div class="t">Midnight Glow</div>
<div class="a">Soyeon</div>
</div>
</div>
</section>
<footer>
<span>© Genie Music</span>
<span>Genie Music · Chart · New Music · Radio</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #F9F9F9; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #F9F9F9; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6B6B6B; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #E8490F; color: #FFFFFF;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #E8490F; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c1c1c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B6B6B; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.4px; background: #C93D0B; color: #FFFFFF;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#F9F9F9; font-family:Arial,'Helvetica Neue',sans-serif; color:#333333; }
*{box-sizing:border-box;}
.announce{height:32px;background:#1A1A1A;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;letter-spacing:.3px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #E5E5E5;}
.logo{font-size:19px;font-weight:700;color:#1A1A1A;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;color:#1A1A1A;}
.cart{position:relative;font-size:18px;color:#1A1A1A;}
.hero{height:260px;background:radial-gradient(circle at 60% 40%,#E8490F 0%,#1A1A1A 65%);display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;}
.herotext h1{font-size:36px;font-weight:700;margin:0 0 14px;}
.herocta{display:inline-block;background:#E8490F;color:#fff;font-size:16px;font-weight:600;border-radius:4px;padding:14px 32px;}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:198px;background:#fff;border-radius:8px;overflow:hidden;}
.thumb{height:110px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#C93D0B;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;border-radius:4px;padding:3px 8px;}
.body{padding:10px 12px 12px;}
.ptitle{font-size:14px;font-weight:600;color:#1A1A1A;margin-bottom:4px;}
.pprice{font-size:16px;font-weight:700;color:#1A1A1A;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#1A1A1A;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.footer span{color:#F9F9F9;font-size:11px;opacity:.8;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">FREE SHIPPING ON ORDERS $49+</div>
<div class="nav">
<div class="logo">Solo Stove</div>
<div class="navlinks"><span>Fire Pits</span><span>Stoves</span><span>Grills</span><span>Pizza Ovens</span></div>
<div class="cart">🛒</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Flame you can gather around.</h1>
<div class="herocta">Compare Fire Pits</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#E8490F,#1A1A1A)"><span class="badge">Sale</span></div><div class="body"><div class="ptitle">Bonfire 2.0</div><div class="pprice">$349.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#F5A623,#1A1A1A)"></div><div class="body"><div class="ptitle">Ranger Portable</div><div class="pprice">$229.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#6B6B6B,#1A1A1A)"></div><div class="body"><div class="ptitle">Pi Prime Pizza Oven</div><div class="pprice">$399.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1A1A1A,#E8490F)"></div><div class="body"><div class="ptitle">Yukon 2.0 Fire Pit</div><div class="pprice">$599.99</div></div></div>
</div>
<div class="footer"><span>© Solo Stove — #SoloStove</span><span>Compare Models · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #111827; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #111827; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e9298; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #242424; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #111827; color: #ffffff;
border: 1px solid #242424; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #111827; color: #f5f5f5;
border: 1px solid #353b48; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e9298; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #141a27; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#242424; box-sizing:border-box;
font-family:'Cal Sans',Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:17px; font-weight:600; color:#242424; margin:0; letter-spacing:-.3px; }
.navlinks { display:flex; gap:24px; font-family:Inter; font-size:16px; font-weight:600; color:#111; }
.btn { background:#242424; color:#fff; border:none; border-radius:9999px; height:38px; padding:0 20px;
font-family:Inter; font-size:16px; font-weight:600; }
.hero { text-align:center; padding:20px 40px 22px; }
.hero h1 { font-size:56px; font-weight:600; line-height:1.08; margin:0 0 12px; letter-spacing:-0.5px; }
.hero p { font-family:Inter; font-weight:300; font-size:18px; color:#898989; margin:0; }
.booker { margin:24px auto 0; width:820px; border-radius:12px;
box-shadow: rgba(19,19,22,0.7) 0px 1px 5px -4px, rgba(34,42,53,0.08) 0px 0px 0px 1px, rgba(34,42,53,0.05) 0px 4px 8px 0px;
display:flex; overflow:hidden; }
.bk-left { width:280px; padding:24px; border-right:1px solid #ececec; }
.bk-left .who { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.avatar { width:36px; height:36px; border-radius:50%; background:#242424; }
.bk-left .name { font-family:Inter; font-size:14px; font-weight:600; color:#242424; }
.bk-left .title { font-family:'Cal Sans'; font-size:20px; margin:0 0 6px; }
.bk-left .meta { font-family:Inter; font-size:14px; color:#898989; margin-bottom:6px; }
.bk-right { flex:1; padding:24px; }
.month { font-family:Inter; font-size:14px; font-weight:600; margin-bottom:14px; color:#242424; }
.days { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-bottom:16px; }
.day { text-align:center; font-family:Inter; font-size:13px; padding:6px 0; border-radius:8px; color:#242424; }
.day.muted { color:#c8c8c8; }
.day.sel { background:#242424; color:#fff; font-weight:600; }
.slots { display:flex; gap:8px; flex-wrap:wrap; }
.slot { border:1px solid rgb(118,118,118); border-radius:8px; padding:8px 16px; font-family:Inter; font-size:14px; color:#242424; }
.slot.on { background:#242424; color:#fff; border-color:#242424; }
</style></head>
<body>
<nav>
<p class="brand">Cal.com</p>
<div class="navlinks"><span>Product</span><span>Enterprise</span><span>Pricing</span></div>
<button class="btn">Get started</button>
</nav>
<section class="hero">
<h1>Scheduling for everyone</h1>
<p>One link. Every calendar. Zero back-and-forth.</p>
</section>
<div class="booker">
<div class="bk-left">
<div class="who"><div class="avatar"></div><span class="name">Alex Rivera</span></div>
<p class="title">30 Min Meeting</p>
<div class="meta">⏱ 30 minutes</div>
<div class="meta">🌐 Asia/Seoul</div>
<div class="meta">📹 Cal Video</div>
</div>
<div class="bk-right">
<div class="month">September 2026</div>
<div class="days">
<div class="day muted">Su</div><div class="day">Mo</div><div class="day">Tu</div><div class="day sel">We</div>
<div class="day">Th</div><div class="day">Fr</div><div class="day muted">Sa</div>
</div>
<div class="slots">
<div class="slot">9:00am</div><div class="slot on">10:30am</div><div class="slot">1:00pm</div>
<div class="slot">2:30pm</div><div class="slot">4:00pm</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fff3e0; color: #1a1a17;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fff3e0; color: #1a1a17;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.5; letter-spacing: 0.1px; margin: 0; color: #1a1a17; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 400; line-height: 1.55; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #5bb8f5; color: #1a1a17;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #fff3e0; color: #1a1a17;
border: 1px solid #5bb8f5; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #2a2a26;
border: 1px solid #c6bdae; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #5bb8f5; color: #1a1a17;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff3e0; font-family:Baskerville,'Times New Roman',serif; color:#2a2a26; }
*{box-sizing:border-box;}
.nav{height:56px;background:#fff3e0;border-bottom:1px solid #e8e6df;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#1a1a17;}
.navlinks{display:flex;gap:20px;font-family:Avenir,'Helvetica Neue',sans-serif;font-size:14px;font-weight:600;letter-spacing:.3px;color:#757575;}
.navlinks span:first-child{color:#1a1a17;border-bottom:2px solid #5bb8f5;padding-bottom:16px;}
.main{padding:24px 32px 0;max-width:640px;}
.h1{font-size:34px;font-weight:700;color:#1a1a17;margin:0 0 10px;line-height:1.2;}
.meta{font-family:Avenir,sans-serif;font-size:13px;color:#757575;margin-bottom:14px;}
.excerpt{font-size:18px;line-height:1.6;margin:0 0 18px;}
.blockquote{border-left:3px solid #2a2000;background:#f5f5f5;padding:12px 20px;font-style:italic;font-size:22px;color:#2a2000;margin:0 0 20px;}
.articleRow{display:flex;gap:24px;padding:0 32px;}
.miniCard{flex:1;border-bottom:1px solid #e8e6df;padding-bottom:14px;}
.minititle{font-size:20px;font-weight:600;color:#1a1a17;margin-bottom:4px;}
.minimeta{font-family:Avenir,sans-serif;font-size:12px;color:#9e9e98;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#1a1a17;color:#f5f5f5;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-family:Avenir,sans-serif;font-size:12px;}
.footer a{color:#5bb8f5;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mcsweeney S</div>
<div class="navlinks"><span>Humor</span><span>Fiction</span><span>Essays</span><span>Store</span></div>
</div>
<div class="main">
<div class="h1">A Brief Survey of Things I Should Not Have Said at the Dinner Party</div>
<div class="meta">By a Contributor Who Wishes to Remain Anonymous · Humor</div>
<div class="excerpt">It began, as these things do, with a comment about the wine, and ended somewhere near the coat closet.</div>
<div class="blockquote">"Nobody asked, and yet here we all are."</div>
</div>
<div class="articleRow">
<div class="miniCard"><div class="minititle">Lists I Have Made Instead of Sleeping</div><div class="minimeta">Essays · 6 min read</div></div>
<div class="miniCard"><div class="minititle">A Chapter From a Novel That Does Not Exist</div><div class="minimeta">Fiction · 9 min read</div></div>
</div>
<div class="footer"><span>© McSweeney's Internet Tendency</span><span>About · Categories · Follow</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #574f4a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #574f4a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #574f4a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.38; margin: 0; color: #7a726d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #3c64f4; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: transparent; color: #3c64f4;
border: 1px solid #221155; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #574f4a;
border: 1px solid #d5d3d2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a726d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #3c64f4; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Fira Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:#574f4a; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #ebebeb;}
.logo{font-size:19px;font-weight:700;color:#221155;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#574f4a;}
.hero{height:220px;background:#221155;display:flex;align-items:center;padding:0 32px;position:relative;overflow:hidden;}
.h1{font-size:34px;font-weight:700;letter-spacing:-0.4px;line-height:1.15;color:#fff;margin:0 0 12px;width:420px;}
.sub{font-size:15px;color:rgba(255,255,255,0.85);margin:0 0 18px;width:380px;}
.btn{display:inline-block;background:#3c64f4;color:#fff;font-size:15px;font-weight:600;padding:13px 26px;border-radius:8px;}
.laptop{position:absolute;right:60px;top:40px;width:220px;height:130px;background:linear-gradient(150deg,#3c64f4,#1a0d44);border-radius:8px;}
.laptopbase{position:absolute;right:50px;top:170px;width:240px;height:14px;background:#1a0d44;border-radius:0 0 8px 8px;}
.section{padding:20px 32px 0;}
.stitle{font-size:18px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:150px;background:#f5f5f5;border-radius:12px;padding:14px;}
.thumb{height:80px;border-radius:8px;margin-bottom:10px;}
.pname{font-size:15px;font-weight:600;color:#2d2926;margin-bottom:4px;}
.pprice{font-size:14px;color:#7a726d;}
.badge{display:inline-block;background:#221155;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:3px 8px;border-radius:4px;margin-bottom:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#221155;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:rgba(255,255,255,0.7);}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">System76</div>
<div class="navlinks"><div>Laptops</div><div>Desktops</div><div>Accessories</div><div>Pop!_OS</div></div>
</div>
<div class="hero">
<div>
<div class="h1">Linux hardware, engineered for developers.</div>
<div class="sub">Configure a machine that ships with an operating system built for you.</div>
<div class="btn">Configure Now</div>
</div>
<div class="laptopbase"></div>
<div class="laptop"></div>
</div>
<div class="section">
<div class="stitle">Popular Configurations</div>
<div class="grid">
<div class="card"><span class="badge">Pop!_OS</span><div class="thumb" style="background:linear-gradient(150deg,#3c64f4,#221155);"></div><div class="pname">Lemur Pro 14"</div><div class="pprice">Starting at $1,199</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#221155,#3c64f4);"></div><div class="pname">Thelio Desktop</div><div class="pprice">Starting at $1,499</div></div>
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(150deg,#574f4a,#221155);"></div><div class="pname">Oryx Pro 16"</div><div class="pprice">Starting at $1,899</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#3c64f4,#574f4a);"></div><div class="pname">Meerkat Mini PC</div><div class="pprice">Starting at $699</div></div>
</div>
</div>
<div class="footer"><span>© Linux-Powered Hardware</span><span>Support · Community · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #131314;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #131314;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.25px; margin: 0; color: #131314; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #565656; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.2px; background: #1ce4d5; color: #131314;
border: none; border-radius: 20px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.2px; background: transparent; color: #131314;
border: 1px solid #1ce4d5; border-radius: 20px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9f9f9; color: #131314;
border: 1px solid #c0c0c0; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #565656; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f42d53; color: #f9f9f9;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Century Gothic', 'Segoe UI', sans-serif; background:#f9f9f9; color:#131314; }
*{box-sizing:border-box;}
.nav{height:72px;background:#131314;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:20px;font-weight:900;color:#f9f9f9;letter-spacing:-0.5px;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:500;color:#f9f9f9;}
.btn{background:#1ce4d5;color:#131314;font-size:14px;font-weight:600;padding:10px 22px;border-radius:20px;}
.hero{height:250px;background:#131314;display:flex;align-items:center;padding:0 34px;position:relative;overflow:hidden;}
.herotext{max-width:440px;}
.headline{font-size:44px;font-weight:900;color:#f9f9f9;letter-spacing:-1.5px;line-height:1.05;margin-bottom:12px;}
.sub{font-size:20px;font-weight:600;color:#949494;margin-bottom:18px;}
.glow{position:absolute;right:60px;top:40px;width:180px;height:180px;border-radius:20px;background:radial-gradient(circle at 40% 40%,#1ce4d5,#16b7ab 70%);box-shadow:0 0 60px rgba(28,228,213,0.4);}
.sec{padding:18px 34px;}
.sectitle{font-size:20px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:210px;background:#fff;border-radius:20px;padding:16px;box-shadow:0 2px 16px rgba(0,0,0,0.07);}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:4px 12px;border-radius:9999px;margin-bottom:10px;color:#131314;}
.thumb{height:90px;border-radius:12px;margin-bottom:10px;background:#f0ece5;}
.name{font-size:17px;font-weight:600;}
.desc{font-size:13px;color:#565656;margin-top:2px;}
.price{font-size:17px;font-weight:600;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Mila</div>
<div class="navlinks"><span>Filters</span><span>Devices</span><span>Subscribe & Save</span></div>
<div class="btn">Shop Now</div>
</div>
<div class="hero">
<div class="herotext">
<div class="headline">CLEAN AIR, MATCHED TO YOU.</div>
<div class="sub">Filters engineered for every room, every allergy, every night.</div>
</div>
<div class="glow"></div>
</div>
<div class="sec">
<div class="sectitle">Find Your Filter Personality</div>
<div class="grid">
<div class="card"><div class="badge" style="background:#f42d53;color:#f9f9f9">Performance</div><div class="thumb"></div><div class="name">The Overreactor</div><div class="desc">Max allergen filtration</div><div class="price">$79/mo</div></div>
<div class="card"><div class="badge" style="background:#ffc140">Sleep</div><div class="thumb"></div><div class="name">Basic Breather</div><div class="desc">Quiet nighttime mode</div><div class="price">$59/mo</div></div>
<div class="card"><div class="badge" style="background:#f394b5">Sensitive</div><div class="thumb"></div><div class="name">Critter Cuddler</div><div class="desc">Nursery & pet safe</div><div class="price">$65/mo</div></div>
<div class="card"><div class="badge" style="background:#1ce4d5">Clean</div><div class="thumb"></div><div class="name">Baseline Clean</div><div class="desc">Everyday air quality</div><div class="price">$49/mo</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.25px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 800; line-height: 1; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: #ffd040; color: #111111;
border: none; border-radius: 20px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: #ffffff; color: #111111;
border: 1px solid #ffd040; border-radius: 20px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 800; line-height: 1; background: #ffd040; color: #111111;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#333333; font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #f3f3f3;}
.logo{font-size:20px;font-weight:800;color:#111111;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:400;color:#333333;}
.navcta{background:#ffd040;color:#111111;font-size:13px;font-weight:800;padding:10px 20px;border-radius:9999px;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;background:#f3f3f3;}
.htext{width:440px;}
.htext h1{font-size:32px;font-weight:800;letter-spacing:-0.5px;line-height:1.2;margin:0 0 14px;}
.htext p{font-size:14px;color:#333333;margin:0 0 20px;max-width:380px;}
.btn{display:inline-block;background:#ffd040;color:#111111;font-size:14px;font-weight:800;padding:14px 30px;border-radius:9999px;}
.box{position:absolute;right:80px;top:44px;width:190px;height:170px;background:#ffd040;border-radius:16px;transform:rotate(-4deg);box-shadow:0 14px 30px rgba(0,0,0,0.12);}
.box:before{content:'MEL';position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) rotate(4deg);font-size:36px;font-weight:800;color:#111111;letter-spacing:1px;}
.box:after{content:'⚡';position:absolute;right:16px;top:14px;font-size:22px;transform:rotate(4deg);}
.sec{padding:24px 40px 0;}
.sectitle{font-size:19px;font-weight:800;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:216px;border-radius:16px;background:#f3f3f3;padding:14px;position:relative;}
.card.featured{background:#ffd040;}
.agebadge{position:absolute;top:10px;left:10px;background:#111111;color:#ffd040;font-size:10px;font-weight:800;padding:4px 10px;border-radius:9999px;}
.card.featured .agebadge{background:#111111;color:#ffd040;}
.thumb{height:88px;border-radius:12px;background:#fff;margin:20px 0 10px;display:flex;align-items:center;justify-content:center;font-size:26px;}
.card.featured .thumb{background:#fff5cf;}
.cardtitle{font-size:14px;font-weight:800;}
.cardprice{font-size:13px;color:#555555;margin-top:4px;}
.card.featured .cardprice{color:#111111;font-weight:700;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#111111;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#cccccc;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mel Science</div>
<div class="navlinks"><span>Subscription</span><span>Kits</span><span>How It Works</span></div>
<div class="navcta">Start Free Trial</div>
</div>
<div class="hero">
<div class="htext">
<h1>Science isn't hard. It's electric.</h1>
<p>Real chemistry experiments delivered monthly, exploding with color right on the kitchen table.</p>
<div class="btn">Get Started</div>
</div>
<div class="box"></div>
</div>
<div class="sec">
<div class="sectitle">Monthly Kits</div>
<div class="grid">
<div class="card featured"><div class="agebadge">Ages 5–7</div><div class="thumb">🧪</div><div class="cardtitle">Junior Chemist Box</div><div class="cardprice">$29.90/mo</div></div>
<div class="card"><div class="agebadge">Ages 8–12</div><div class="thumb">🔬</div><div class="cardtitle">MEL Chemistry Box</div><div class="cardprice">$34.90/mo</div></div>
<div class="card"><div class="agebadge">Ages 12+</div><div class="thumb">⚛️</div><div class="cardtitle">MEL Physics Box</div><div class="cardprice">$34.90/mo</div></div>
<div class="card"><div class="agebadge">All Ages</div><div class="thumb">🌋</div><div class="cardtitle">Single Experiment Kit</div><div class="cardprice">$12.90</div></div>
</div>
</div>
<div class="footer"><span>© Curiosity, Delivered</span><span>Safety · Subscription FAQ</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #e32c2b; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #121212;
border: 1px solid #e32c2b; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f0b300; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:'Assistant', 'Montserrat', -apple-system, system-ui, sans-serif; }
* { box-sizing:border-box; }
.tg { font-family:'Trade Gothic', 'Montserrat', 'Assistant', sans-serif; }
nav { height:64px; background:#272d45; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { color:#fff; font-size:19px; font-weight:700; margin:0; text-transform:uppercase; letter-spacing:0.5px; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:#fff; }
.navlinks span:first-child { color:#f0b300; }
.search { width:160px; height:34px; background:#1c2135; border:1px solid #444a63; border-radius:8px; font-size:12px;
color:#9a9db1; display:flex; align-items:center; padding-left:14px; }
.hero { background:#272d45; padding:28px 40px; display:flex; align-items:center; gap:32px; min-height:150px; }
.hero-copy { flex:1.2; }
.hero h1 { color:#fff; font-size:32px; font-weight:700; line-height:1.2; letter-spacing:-0.3px; margin:0 0 10px; text-transform:uppercase; }
.hero p { color:#9a9db1; font-size:14px; margin:0 0 16px; max-width:400px; line-height:1.5; }
.row { display:flex; gap:10px; }
.btn-primary { background:#e32c2b; color:#fff; border:none; border-radius:8px; padding:12px 24px; font-size:14px;
font-weight:600; text-transform:uppercase; letter-spacing:0.3px; height:44px; }
.btn-gold { background:#f0b300; color:#121212; border:none; border-radius:8px; padding:12px 24px; font-size:14px;
font-weight:600; text-transform:uppercase; letter-spacing:0.3px; height:44px; }
.hero-visual { flex:1; height:150px; border-radius:8px; background:#1c2135; position:relative; overflow:hidden; border:1px solid #444a63; }
.hero-visual::before { content:''; position:absolute; width:80px; height:100px; border-radius:6px;
background:linear-gradient(160deg,#f0b300,#e32c2b); left:40px; top:14px; }
.hero-visual::after { content:''; position:absolute; width:60px; height:70px; border-radius:6px;
background:linear-gradient(160deg,#00caaa,#00756a); right:50px; bottom:12px; }
.section { padding:18px 40px 0; background:#f4f4f6; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; padding-top:4px; }
.sec-head h2 { font-size:20px; font-weight:600; margin:0; text-transform:uppercase; }
.sec-head span { font-size:13px; color:#e32c2b; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#fff; border-radius:8px; overflow:hidden; border:1px solid #dbdde4; }
.thumb { aspect-ratio:1/1; position:relative; }
.t1 { background:linear-gradient(150deg,#272d45,#1c2135); }
.t2 { background:linear-gradient(150deg,#e32c2b,#8f1f1e); }
.t3 { background:linear-gradient(150deg,#00caaa,#00756a); }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
padding:2px 8px; border-radius:4px; }
.badge.gold { background:#f0b300; color:#121212; }
.badge.sale { background:#e32c2b; color:#fff; }
.cbody { padding:10px 14px 14px; }
.stars { color:#f0b300; font-size:12px; margin-bottom:4px; }
.card h3 { font-size:15px; font-weight:600; margin:0 0 4px; text-transform:uppercase; }
.price { font-size:16px; font-weight:400; margin:0; }
footer { background:#2c3e50; color:#e5e5eb; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; }
footer a { color:#e5e5eb; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand tg">Bethesda Gear</p>
<div class="navlinks"><span>Fallout</span><span>Elder Scrolls</span><span>Starfield</span><span>Doom</span></div>
<div class="search">Search…</div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1 class="tg">Gear up for the wasteland</h1>
<p>Official apparel, collectibles, and loot from every world Bethesda has built.</p>
<div class="row"><button class="btn-primary">Shop Now</button><button class="btn-gold">Pre-Order</button></div>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2 class="tg">Featured Loot</h2><span>Shop All →</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge gold">New</span></div>
<div class="cbody"><div class="stars">★★★★★</div><h3 class="tg">Vault-Tec Bomber Jacket</h3><p class="price">$89.99</p></div>
</div>
<div class="card">
<div class="thumb t2"><span class="badge sale">Sale</span></div>
<div class="cbody"><div class="stars">★★★★☆</div><h3 class="tg">Doom Slayer Statue</h3><p class="price">$149.99</p></div>
</div>
<div class="card">
<div class="thumb t3"></div>
<div class="cbody"><div class="stars">★★★★★</div><h3 class="tg">Starfield Constellation Tee</h3><p class="price">$32.99</p></div>
</div>
</div>
</section>
<footer>
<span>© Bethesda Gear</span>
<div><a href="#">Support</a><a href="#">Shipping</a><a href="#">Legal</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafaf5; color: #090909;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafaf5; color: #090909;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #090909; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #090909; color: #fafaf5;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #fafaf5; color: #090909;
border: 1px solid #090909; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafaf5; color: #212529;
border: 1px solid #bebeba; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #fae5db; color: #090909;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafaf5; color:#090909; box-sizing:border-box;
font-family:'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#fafaf5; border-bottom:1px solid #fafaf5; }
.brand { font-size:19px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; color:#090909; }
.btn-primary { background:#090909; color:#fafaf5; border:none; border-radius:999px; padding:11px 26px;
font-weight:500; font-size:14px; letter-spacing:0.5px; text-transform:uppercase; }
.hero { display:flex; align-items:center; padding:20px 36px; gap:32px; }
.hero-copy { flex:1; }
.hero h1 { font-family:Georgia,serif; font-style:italic; font-weight:400; font-size:30px; line-height:1.15; margin:0 0 10px; color:#090909; }
.hero p { font-size:14px; color:#212529; line-height:1.5; margin:0 0 16px; max-width:380px; }
.row { display:flex; gap:10px; }
.btn-outline { background:#fafaf5; color:#090909; border:1px solid #dedede; border-radius:999px; padding:10px 24px; font-size:13px; font-weight:600; }
.btn-teal { background:#1990c6; color:#fafaf5; border:none; border-radius:999px; padding:10px 24px; font-size:13px; font-weight:600; }
.hero-visual { flex:0.9; height:260px; border-radius:20px; background:linear-gradient(160deg,#fae5db 0%,#f19a7e 100%);
position:relative; overflow:hidden; }
.hero-visual::before { content:''; position:absolute; width:150px; height:150px; border-radius:50%;
background:rgba(255,255,255,0.35); top:-40px; left:-30px; }
.hero-visual::after { content:''; position:absolute; width:60px; height:60px; border-radius:50%; background:#1990c6;
opacity:0.7; bottom:24px; right:36px; }
.row3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:14px 36px 18px; }
.pcard { background:#fff; border-radius:20px 20px 0 0; overflow:hidden; }
.pcard .imgbox { aspect-ratio:1/1; height:74px; background:#fae5db; display:flex; align-items:center; justify-content:center; position:relative; }
.pcard .imgbox::after { content:''; width:34px; height:60px; background:#1990c6; border-radius:16px; opacity:0.85; }
.badge-new { position:absolute; top:8px; left:8px; background:#fae5db; color:#090909; font-size:10px; font-weight:700;
text-transform:uppercase; letter-spacing:0.5px; padding:3px 9px; border-radius:999px; }
.pcard .info { padding:12px 14px 14px; }
.pcard h3 { font-size:15px; font-weight:500; margin:0 0 4px; }
.pcard .price { font-size:13px; color:#767676; }
footer { background:#090909; color:#fafaf5; padding:14px 36px; display:flex; justify-content:space-between;
align-items:center; font-size:13px; }
footer span:last-child { color:#989494; }
</style></head>
<body>
<nav>
<p class="brand">Boka</p>
<div class="navlinks"><span>Toothpaste</span><span>Floss</span><span>Kits</span><span>Kids</span></div>
<button class="btn-primary">Shop Now</button>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Mindful oral care, made a ritual</h1>
<p>Nano-hydroxyapatite toothpaste and floss designed to make brushing feel like something you actually look forward to.</p>
<div class="row">
<button class="btn-primary">Shop the Kit</button>
<button class="btn-teal">Find Relief</button>
</div>
</div>
<div class="hero-visual"></div>
</section>
<section class="row3">
<div class="pcard"><div class="imgbox"><span class="badge-new">New</span></div><div class="info"><h3>Ela Mint Toothpaste</h3><div class="price">$12.00</div></div></div>
<div class="pcard"><div class="imgbox"></div><div class="info"><h3>Charcoal Floss</h3><div class="price">$9.00</div></div></div>
<div class="pcard"><div class="imgbox"></div><div class="info"><h3>Travel Kit</h3><div class="price">$28.00</div></div></div>
</section>
<footer>
<span>© Boka</span>
<span>Nano-Hydroxyapatite · Fluoride-Free</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00dd99; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00dd99; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096d4e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #18da9e; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00dd99; color: #000000;
border: 1px solid #18da9e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00dd99; color: #111111;
border: 1px solid #03bc83; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096d4e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #04dd9a; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Poppins","Inter",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.logo { font-size:18px; font-weight:700; }
.navlinks { display:flex; gap:22px; font-size:16px; font-weight:700; }
.navlinks .active { color:#00dd99; }
.hero { background:#1c1c1c; color:#ffffff; text-align:center; padding:34px 40px; }
.hero h1 { font-size:42px; font-weight:700; line-height:1.17; margin:0 0 8px; }
.hero p { font-size:15px; color:rgba(255,255,255,0.75); margin:0; }
.band { background:#f8f8f8; padding:24px 40px; }
.band h2 { font-size:28px; font-weight:700; margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#ffffff; border-radius:8px; padding:16px; box-shadow:rgba(0,0,0,0.08) 0px 4px 16px; }
.card h3 { font-size:14px; font-weight:700; margin:0 0 6px; }
.card p { font-size:12px; color:#696969; margin:0; }
.row { display:flex; gap:10px; justify-content:center; padding:20px 40px; }
.btn-ink { background:#222222; color:#ffffff; border-radius:2px; padding:12px 30px; font-size:14px;
font-weight:700; letter-spacing:0.14px; }
.pill { background:#3860be; color:#ffffff; border-radius:17px; padding:8px 16px; font-size:14px; font-weight:600;
border:1px solid #bbbbbb; }
</style></head>
<body>
<nav>
<span class="logo">Hyperconnect</span>
<div class="navlinks"><span class="active">Our Mission</span><span>Culture</span><span>Careers</span></div>
</nav>
<section class="hero">
<h1>Our Mission</h1>
<p>Connecting people across languages and borders through real-time video.</p>
</section>
<div class="band">
<h2>Grow Rapidly & Expand Globally</h2>
<div class="grid">
<div class="card"><h3>Real-time Video</h3><p>WebRTC infrastructure at global scale.</p></div>
<div class="card"><h3>AI Translation</h3><p>On-device ML connects any two languages.</p></div>
<div class="card"><h3>Global Matching</h3><p>Millions of connections across the world.</p></div>
</div>
</div>
<div class="row">
<button class="btn-ink">Apply</button>
<span class="pill">Serviced in 150+ countries</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #3a3a3a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #3a3a3a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #3a3a3a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ef5023; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #f9fafb; color: #108474;
border: 1px solid #ef5023; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9fafb; color: #3a3a3a;
border: 1px solid #c9cacb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fbcd0a; color: #3a3a3a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Duck Camp Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:'Helvetica','Arial',sans-serif;
background:#f9fafb; color:#3a3a3a;
}
*{box-sizing:border-box;}
.nav{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-family:Georgia,'Baskerville',serif;font-size:22px;font-weight:700;}
.navlinks{display:flex;gap:24px;font-size:15px;font-weight:500;color:#7b7b7b;}
.navlinks span.active{color:#3a3a3a;border-bottom:2px solid #108474;padding-bottom:6px;}
.searchbar{background:#f9fafb;border:1px solid #e5e6e9;border-radius:9999px;padding:10px 18px;font-size:13px;color:#3a3a3a;width:170px;}
.hero{background:#f2ede5;padding:40px 36px;display:flex;align-items:center;justify-content:space-between;}
.hero-copy h1{font-family:Georgia,serif;font-size:34px;font-weight:700;line-height:1.15;margin:0 0 12px;max-width:400px;}
.hero-copy p{font-size:14px;color:#555555;max-width:340px;margin:0 0 16px;}
.btnrow{display:flex;gap:12px;}
.btn-primary{background:#ef5023;color:#fff;font-size:15px;font-weight:600;padding:13px 28px;border-radius:9999px;}
.btn-secondary{background:#f2ede5;color:#108474;font-size:15px;font-weight:600;padding:11px 26px;border-radius:9999px;border:2px solid #108474;}
.hero-visual{width:220px;height:150px;border-radius:12px;background:linear-gradient(160deg,#108474,#aaccaa);position:relative;}
.section{padding:20px 36px 0;}
.grid{display:flex;gap:14px;}
.card{flex:1;background:#fff;border-radius:8px;overflow:hidden;}
.card-img{height:110px;position:relative;}
.card-img.c1{background:linear-gradient(140deg,#ef5023,#fbcd0a);}
.card-img.c2{background:linear-gradient(140deg,#108474,#aaccaa);}
.card-img.c3{background:linear-gradient(140deg,#9c8d5f,#fbcd0a);}
.card-img.c4{background:linear-gradient(140deg,#a89cc8,#108474);}
.badge{position:absolute;top:6px;left:6px;background:#fbcd0a;color:#3a3a3a;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:2px 8px;border-radius:4px;}
.card-title{font-family:'Baton Turbo',Helvetica,sans-serif;font-size:16px;font-weight:600;padding:10px 10px 0;}
.card-price{font-size:16px;padding:0 10px 10px;}
</style>
<nav class="nav">
<div class="logo">Duck Camp</div>
<div class="navlinks">
<span class="active">Shop by Species</span><span>New Arrivals</span><span>Waders</span><span>Apparel</span>
</div>
<div class="searchbar">Search gear…</div>
</nav>
<div class="hero">
<div class="hero-copy">
<h1>Built for the marsh.<br>Made to last camp.</h1>
<p>Hunting and fishing gear that trades hype for craft.</p>
<div class="btnrow">
<div class="btn-primary">Shop Now</div>
<div class="btn-secondary">Learn More</div>
</div>
</div>
<div class="hero-visual"></div>
</div>
<div class="section">
<div class="grid">
<div class="card"><div class="card-img c1"><span class="badge">Limited</span></div><div class="card-title">Camo Wader Jacket</div><div class="card-price">$225.00</div></div>
<div class="card"><div class="card-img c2"></div><div class="card-title">Marsh Boot Sock</div><div class="card-price">$28.00</div></div>
<div class="card"><div class="card-img c3"></div><div class="card-title">Field Canvas Vest</div><div class="card-price">$165.00</div></div>
<div class="card"><div class="card-img c4"></div><div class="card-title">Duck Camp Cap</div><div class="card-price">$34.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 300; line-height: 1.3; letter-spacing: 0.02em; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.06em; background: #720eec; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.06em; background: #ffffff; color: #222222;
border: 1px solid #720eec; border-radius: 0px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.08em; background: #e9e6ed; color: #720eec;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Open Sans',Helvetica,Arial,sans-serif; color:#444444; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e4e4e4;}
.logo{font-family:'Myriad Pro','Open Sans',Arial,sans-serif;font-size:19px;font-weight:300;letter-spacing:.5px;color:#222222;}
.navlinks{display:flex;gap:26px;font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:#888888;}
.navlinks .active{color:#720eec;border-bottom:1px solid #720eec;padding-bottom:4px;}
.hero{height:214px;display:flex;padding:0 34px;align-items:center;background:#fcfbfe;}
.heroText{width:420px;}
.eyebrow{font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#888888;margin-bottom:12px;}
.h1{font-family:'Myriad Pro','Open Sans',Arial,sans-serif;font-size:30px;font-weight:300;line-height:1.25;color:#222222;margin:0 0 14px;}
.sub{font-size:13px;line-height:1.6;color:#444444;margin:0 0 16px;max-width:360px;}
.btn{display:inline-block;background:#720eec;color:#fff;font-size:12px;font-weight:400;letter-spacing:.05em;padding:11px 22px;}
.objWrap{margin-left:auto;width:200px;height:150px;background:#e9e6ed;position:relative;}
.obj{position:absolute;width:100px;height:100px;background:linear-gradient(160deg,#720eec,#252525);top:25px;left:50px;}
.sec{padding:20px 34px 0;}
.secTitle{font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#888888;margin-bottom:14px;border-bottom:1px solid #e4e4e4;padding-bottom:8px;}
.grid{display:flex;gap:14px;}
.card{width:203px;}
.thumb{height:130px;background:#f5f5f5;margin-bottom:8px;}
.ptitle{font-size:13px;font-weight:400;color:#222222;margin:0 0 3px;}
.pmeta{font-size:11px;color:#888888;}
.tag{display:inline-block;font-size:9px;color:#b81c23;letter-spacing:.04em;text-transform:uppercase;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Todd Merrill Studio</div>
<div class="navlinks"><span class="active">Collection</span><span>Designers</span><span>Exhibitions</span><span>Inquire</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">Mid-Century & Contemporary</div>
<div class="h1">Museum-quality design, privately held.</div>
<div class="sub">Rare American furniture and new work from living designers, presented without pretense.</div>
<div class="btn">Request Inquiry</div>
</div>
<div class="objWrap"><div class="obj"></div></div>
</div>
<div class="sec">
<div class="secTitle">Current Collection</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#720eec,#e9e6ed);"></div><div class="ptitle">Sculptural Walnut Credenza</div><div class="pmeta">American, c. 1962</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#e4e4e4,#222222);"></div><div class="ptitle">Cast Bronze Floor Lamp</div><div class="pmeta">Contemporary Edition</div><div class="tag">Sold</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#252525,#720eec);"></div><div class="ptitle">Studio Lounge Chair, Pair</div><div class="pmeta">American, c. 1971</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#e9e6ed,#720eec);"></div><div class="ptitle">Hand-Blown Glass Vessel</div><div class="pmeta">Contemporary Edition</div><div class="tag">Condition Note</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #313638;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #313638;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.35; margin: 0; color: #313638; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #686563; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #421540; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f5f5f5; color: #313638;
border: 1px solid #421540; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f5f5f5; color: #313638;
border: 1px solid #c4c5c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #686563; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #d35b17; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f5; color:#313638; box-sizing:border-box;
font-family:'Archer-Book',Georgia,serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#421540; color:#fff; }
.brand { font-size:17px; font-weight:400; margin:0; }
.navlinks { display:flex; gap:22px; font-family:'Helvetica Neue',Arial,sans-serif; font-size:14px; font-weight:500; }
.util { font-family:'Helvetica Neue',Arial,sans-serif; font-size:13px; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 64px); }
.stage { padding:26px; display:flex; flex-direction:column; gap:12px; background:#eff0f1; }
.crumb { font-family:'Helvetica Neue',Arial,sans-serif; font-size:11px; color:#686563; }
.pan { flex:1; border-radius:12px; background:#ffffff; position:relative; overflow:hidden; }
.pan::before { content:''; position:absolute; left:50%; top:56%; width:190px; height:220px; transform:translate(-50%,-50%); border-radius:16px 16px 40px 40px;
background:linear-gradient(160deg,#4a2e48,#313638 70%); box-shadow:0 20px 30px rgba(0,0,0,0.16); }
.pan::after { content:''; position:absolute; left:50%; top:30%; width:70px; height:70px; transform:translate(-50%,0); border-radius:50%;
background:radial-gradient(circle at 35% 30%,#00bbff,#046b99 70%); }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; border-radius:8px; background:#ffffff; border:1px solid #cccccc; }
.info { padding:24px 34px; display:flex; flex-direction:column; gap:11px; overflow:hidden; }
.cat { font-family:'Helvetica Neue',Arial,sans-serif; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#421540; }
h1 { margin:0; font-size:24px; font-weight:400; line-height:1.3; }
.rating { display:flex; align-items:center; gap:8px; font-family:'Helvetica Neue',Arial,sans-serif; font-size:12px; color:#686563; }
.stars { color:#d35b17; }
.price-row { display:flex; align-items:baseline; gap:10px; font-family:'Helvetica Neue',Arial,sans-serif; }
.price { font-size:20px; font-weight:600; }
.badge-new { background:#00bbff; color:#fff; font-size:11px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; padding:3px 6px; border-radius:4px; }
.desc { font-family:'Helvetica Neue',Arial,sans-serif; font-size:14px; color:#2d2c2f; line-height:1.5; }
.selectors { display:flex; gap:10px; font-family:'Helvetica Neue',Arial,sans-serif; }
.chip { border:1px solid #cccccc; border-radius:9999px; padding:6px 14px; font-size:12px; font-weight:600; color:#313638; }
.chip.on { background:#421540; color:#fff; border-color:#421540; }
.trust { background:#e8f4fd; border-radius:8px; color:#046b99; font-family:'Helvetica Neue',Arial,sans-serif; font-size:12px; font-weight:500; padding:10px 12px; }
.cta-row { display:flex; gap:10px; margin-top:auto; font-family:'Helvetica Neue',Arial,sans-serif; }
.btn-primary { flex:1; background:#421540; color:#fff; border:none; height:48px; font-size:14px; font-weight:600;
letter-spacing:0.3px; text-transform:uppercase; border-radius:9999px; }
.btn-secondary { width:150px; background:#f5f5f5; border:none; color:#313638; height:48px; font-size:14px; font-weight:600;
letter-spacing:0.3px; text-transform:uppercase; border-radius:9999px; }
</style></head>
<body>
<nav>
<p class="brand">Breville</p>
<div class="navlinks"><span>Espresso</span><span>Ovens</span><span>Juicers</span><span>Kettles</span></div>
<div class="util">Search Account Cart (1)</div>
</nav>
<main>
<div class="stage">
<div class="crumb">Breville / Espresso / Die-Cast</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Die-Cast Series</span>
<h1>Barista Touch Impress Espresso Machine</h1>
<div class="rating"><span class="stars">★★★★★</span> 4.7 · 3,208 reviews</div>
<div class="price-row"><span class="price">$949.95</span><span class="badge-new">New</span></div>
<p class="desc">Auto-adjusting Impress Puck System, integrated conical burr grinder, and precise PID temperature control for cafe-quality espresso at home.</p>
<div class="selectors">
<span class="chip on">Black Truffle</span><span class="chip">Brushed Steel</span>
</div>
<div class="trust">2-Year Warranty · Free grinder cleaning kit included</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compare</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; letter-spacing: -0.3px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffb800; color: #121212;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #ffb800; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.2px; background: #fff5db; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #dedede; }
.brand { font-size:20px; font-weight:600; letter-spacing:-0.5px; }
.search { flex:1; max-width:340px; margin:0 32px; background:#f5f5f5; border:1px solid #dedede; border-radius:9999px; padding:9px 18px; font-size:13px; color:#666; }
.cart { font-size:20px; }
.strip { display:flex; justify-content:center; gap:28px; padding:14px 0; font-size:12px; font-weight:600; color:#666; border-bottom:1px solid #e1e1e1; }
.strip div.active { color:#121212; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:20px 32px; }
.card { border:1px solid #e1e1e1; border-radius:8px; padding:8px; }
.cover { position:relative; aspect-ratio:1/1; border-radius:4px; overflow:hidden; margin-bottom:8px; }
.g1 { background:linear-gradient(140deg,#ffb800,#3a2b00); }
.g2 { background:linear-gradient(140deg,#121212,#555); }
.g3 { background:linear-gradient(140deg,#b3efb9,#1a5a20); }
.g4 { background:linear-gradient(140deg,#f1c3c6,#6b1620); }
.badge { position:absolute; top:6px; left:6px; font-size:9px; font-weight:600; text-transform:uppercase; padding:2px 6px; border-radius:4px; background:#b3efb9; color:#121212; }
.title { font-size:14px; font-weight:600; margin-bottom:2px; }
.price { font-size:14px; color:#333; }
.cartbtn { position:absolute; bottom:8px; right:8px; background:#ffb800; color:#121212; font-size:10px; font-weight:600; padding:5px 10px; border-radius:9999px; letter-spacing:.3px; }
.footer { display:flex; gap:60px; padding:20px 32px; background:#f5f5f5; font-size:12px; color:#666; }
.footer h4 { font-size:13px; color:#121212; margin:0 0 8px; font-weight:600; }
.footer div div { margin-bottom:6px; }
</style></head>
<body>
<nav>
<div class="brand">Fat Beats</div>
<div class="search">Search records, artists, labels...</div>
<div class="cart">🛍</div>
</nav>
<div class="strip">
<div class="active">New Arrivals</div><div>Hip-Hop</div><div>Vinyl</div><div>CDs</div><div>Apparel</div><div>Sale</div>
</div>
<div class="grid">
<div class="card"><div class="cover g1"><span class="badge">New</span><span class="cartbtn">Add</span></div><div class="title">Golden Era Vol. 1</div><div class="price">$28.00</div></div>
<div class="card"><div class="cover g2"><span class="cartbtn">Add</span></div><div class="title">Midnight Sessions LP</div><div class="price">$32.00</div></div>
<div class="card"><div class="cover g3"><span class="badge">New</span><span class="cartbtn">Add</span></div><div class="title">Boom Bap Anthology</div><div class="price">$24.00</div></div>
<div class="card"><div class="cover g4"><span class="cartbtn">Add</span></div><div class="title">Rare Grooves 12"</div><div class="price">$19.00</div></div>
</div>
<div class="footer">
<div><h4>Shop</h4><div>New Releases</div><div>Vinyl</div><div>Apparel</div></div>
<div><h4>Help</h4><div>Shipping</div><div>Returns</div><div>Contact</div></div>
<div><h4>Connect</h4><div>Instagram</div><div>Newsletter</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #08090a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #08090a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8a8b8b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #08090a; color: #ffffff;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #08090a; color: #f5f5f5;
border: 1px solid #2e2f30; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8b8b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0a0a0b; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#08090A; color:#F7F8F8; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:640px; }
.sidebar { width:220px; flex:0 0 auto; background:#141516; border-right:1px solid #23252A; padding:18px 14px; }
.sbrand { font-size:14px; font-weight:700; margin-bottom:18px; letter-spacing:-0.2px; }
.snav { font-size:13px; color:#8A8F98; padding:7px 8px; border-radius:6px; margin-bottom:2px; }
.snav.on { background:#1C1D1F; color:#F7F8F8; }
.main { flex:1; padding:18px 24px; }
.listhead { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.listtitle { font-size:15px; font-weight:600; }
.cmdk { background:#1C1D1F; border:1px solid #23252A; border-radius:6px; padding:5px 10px; font-size:11px; color:#8A8F98; }
.row { display:flex; align-items:center; gap:12px; padding:10px 8px; border-bottom:1px solid #23252A; font-size:13px; }
.status { width:14px; height:14px; border-radius:50%; border:1.5px solid #8A8F98; flex:0 0 auto; }
.status.progress { background:conic-gradient(#F2C94C 180deg, transparent 0); border-color:#F2C94C; }
.status.done { background:#5E6AD2; border-color:#5E6AD2; }
.status.review { border-color:#5E6AD2; background:conic-gradient(#5E6AD2 270deg, transparent 0); }
.idcode { color:#8A8F98; font-size:12px; width:64px; flex:0 0 auto; }
.rtitle { flex:1; }
.bars { display:flex; gap:2px; }
.bar { width:3px; height:10px; background:#23252A; border-radius:1px; }
.bar.on { background:#8A8F98; }
.avatar { width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,#5E6AD2,#23252A); }
.cmdoverlay { position:absolute; top:70px; left:50%; transform:translateX(-50%); width:480px; background:#1C1D1F;
border:1px solid #23252A; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.cmdinput { padding:14px 16px; border-bottom:1px solid #23252A; font-size:14px; color:#8A8F98; }
.cmditem { padding:10px 16px; font-size:13px; display:flex; align-items:center; gap:10px; }
.cmditem.focus { background:rgba(94,106,210,0.14); color:#F7F8F8; }
.cmditem span.g { color:#8A8F98; margin-left:auto; }
</style></head>
<body>
<div class="wrap">
<div class="sidebar">
<div class="sbrand">Linear (iOS)</div>
<div class="snav on">◉ Issues</div>
<div class="snav">◯ Cycles</div>
<div class="snav">◯ Projects</div>
<div class="snav">◯ Views</div>
</div>
<div class="main">
<div class="listhead"><span class="listtitle">In Progress</span><span class="cmdk">⌘K</span></div>
<div class="row"><div class="status progress"></div><span class="idcode">ENG-142</span><span class="rtitle">Fix flaky auth token refresh test</span>
<div class="bars"><div class="bar on"></div><div class="bar on"></div><div class="bar"></div></div><div class="avatar"></div></div>
<div class="row"><div class="status review"></div><span class="idcode">ENG-138</span><span class="rtitle">Add keyboard nav to command palette</span>
<div class="bars"><div class="bar on"></div><div class="bar"></div><div class="bar"></div></div><div class="avatar"></div></div>
<div class="row"><div class="status"></div><span class="idcode">ENG-151</span><span class="rtitle">Migrate webhook queue to new worker</span>
<div class="bars"><div class="bar on"></div><div class="bar on"></div><div class="bar on"></div></div><div class="avatar"></div></div>
<div class="row"><div class="status done"></div><span class="idcode">ENG-129</span><span class="rtitle">Ship dark-mode toggle in settings</span>
<div class="bars"><div class="bar"></div><div class="bar"></div><div class="bar"></div></div><div class="avatar"></div></div>
</div>
</div>
<div class="cmdoverlay">
<div class="cmdinput">Search issues, projects, and commands...</div>
<div class="cmditem focus">Create new issue <span class="g">⌘⏎</span></div>
<div class="cmditem">Go to Cycles <span class="g">G C</span></div>
<div class="cmditem">Switch workspace <span class="g">⌘O</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2a2d5a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2a2d5a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9a9baf; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3b4371; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2a2d5a; color: #ffffff;
border: 1px solid #3b4371; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2a2d5a; color: #f5f5f5;
border: 1px solid #4a4d73; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9baf; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2d315e; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background: linear-gradient(180deg,#2A2D5A 0%,#3B4371 42%,#14152E 100%);
color:#F2F3FB; box-sizing:border-box;
font-family:"Nunito", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { padding:32px 40px; }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:1.4px; color:#4FD1E6; text-transform:uppercase; }
.title { font-size:32px; font-weight:900; margin-top:6px; }
.sub { font-size:14px; color:#A6A9D4; margin-top:4px; }
.row1 { display:flex; gap:24px; margin-top:22px; align-items:center; }
.ring { width:92px; height:92px; border-radius:50%;
background: conic-gradient(#4FD1E6 0deg 300deg, #292C58 300deg 360deg);
display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ring-in { width:74px; height:74px; border-radius:50%; background:#1E2046; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-in b { font-size:26px; font-weight:900; }
.ring-in span { font-size:9px; font-weight:700; color:#A6A9D4; text-transform:uppercase; }
.stat b { font-size:26px; font-weight:800; }
.stat span { display:block; font-size:12px; color:#A6A9D4; margin-top:2px; }
.pill { display:inline-block; margin-top:8px; background:#4FD1E6; color:#07303A; font-size:11px; font-weight:800; padding:5px 12px; border-radius:999px; }
.card { background:#1E2046; border:1px solid #353974; border-radius:20px; padding:18px; margin-top:22px; }
svg { width:100%; height:110px; display:block; }
.legend { display:flex; gap:20px; margin-top:10px; }
.leg { display:flex; align-items:center; gap:6px; font-size:10px; font-weight:700; color:#A6A9D4; }
.dot { width:9px; height:9px; border-radius:50%; }
.alarm { display:flex; align-items:center; gap:14px; margin-top:16px; background:#1E2046; border:1px solid #353974; border-radius:18px; padding:14px 18px; }
.icon-tile { width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#6C7BFF,#3D4ABF); display:flex; align-items:center; justify-content:center; font-size:18px; }
.al-title { font-size:15px; font-weight:800; }
.al-sub { font-size:11px; color:#A6A9D4; }
.al-time { margin-left:auto; font-size:19px; font-weight:900; }
</style></head>
<body>
<div class="wrap">
<div class="eyebrow">Sleep Cycle (iOS) · Sleep Analysis</div>
<div class="title">Last night</div>
<div class="sub">Mon, May 12 · 23:42 – 07:18</div>
<div class="row1">
<div class="ring"><div class="ring-in"><b>83</b><span>Score</span></div></div>
<div>
<div class="stat"><b>7h 36m</b><span>Time asleep · 31m to fall asleep</span></div>
<div class="pill">Good night</div>
</div>
</div>
<div class="card">
<svg viewBox="0 0 700 110" preserveAspectRatio="none">
<path d="M0,20 C60,20 90,80 150,85 C220,90 260,40 330,45 C400,50 430,90 500,88 C560,86 600,30 700,25"
fill="none" stroke="#7FE3F0" stroke-width="2.5" stroke-linecap="round"/>
<path d="M0,20 C60,20 90,80 150,85 C220,90 260,40 330,45 C400,50 430,90 500,88 C560,86 600,30 700,25 L700,110 L0,110 Z"
fill="rgba(108,123,255,0.25)"/>
</svg>
<div class="legend">
<div class="leg"><div class="dot" style="background:#FF8FB1;"></div>Awake</div>
<div class="leg"><div class="dot" style="background:#6C7BFF;"></div>Light</div>
<div class="leg"><div class="dot" style="background:#3D4ABF;"></div>Deep</div>
<div class="leg"><div class="dot" style="background:#4FD1E6;"></div>REM</div>
</div>
</div>
<div class="alarm">
<div class="icon-tile">⏰</div>
<div><div class="al-title">Smart alarm</div><div class="al-sub">Wakes you in your lightest sleep</div></div>
<div class="al-time">07:30</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #333333;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #333333;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #333333; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #e5877c; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #333333;
border: 1px solid #e5877c; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #333333;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff5268; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:'Avenir Next','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-size:20px; font-weight:700; color:#404365; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#4a5764; }
.btn-primary { background:#e5877c; color:#fff; border:none; border-radius:8px; padding:11px 20px; font-size:13px; font-weight:600; }
main { display:flex; height:calc(640px - 68px - 44px); }
.gallery { width:380px; background:#f6f6f6; position:relative; display:flex; align-items:center; justify-content:center; }
.bottle { width:70px; height:170px; border-radius:20px 20px 8px 8px; background:linear-gradient(180deg,#e5877c,#e77769); position:relative; }
.bottle::before { content:''; position:absolute; top:-18px; left:22px; width:26px; height:22px; border-radius:6px; background:#404365; }
.badge { position:absolute; top:20px; left:20px; background:#00b3ff; color:#fff; font-size:11px; font-weight:600; padding:4px 10px; border-radius:8px; }
.info { flex:1; padding:30px 34px; display:flex; flex-direction:column; gap:13px; }
.cat { font-size:12px; color:#777777; }
h1 { font-size:22px; font-weight:700; margin:0; }
.stars { color:#222222; font-size:13px; }
.price { font-size:20px; font-weight:700; color:#e5877c; }
.desc { font-size:13px; color:#4e4e4e; line-height:1.55; max-width:340px; }
.scentrow { display:flex; gap:8px; }
.scent { border-radius:8px; padding:8px 14px; font-size:12px; background:#f6f6f6; }
.scent.on { background:#e5877c; color:#fff; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#e5877c; color:#fff; border:none; border-radius:8px; padding:14px; font-size:14px; font-weight:700; }
.btn-sec { background:#fff; color:#404365; border:1px solid #404365; border-radius:8px; padding:14px 18px; font-size:13px; font-weight:600; }
footer { padding:12px 34px; border-top:1px solid #eeeeee; font-size:11px; color:#777777; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Bippy</div>
<div class="navlinks"><span>Baby Wash</span><span>Lotion</span><span>Gift Sets</span></div>
<button class="btn-primary">Shop Bundles</button>
</nav>
<main>
<div class="gallery"><span class="badge">Tear-Free</span><div class="bottle"></div></div>
<div class="info">
<span class="cat">Baby Wash + Shampoo</span>
<h1>Bippy Everyday Wash</h1>
<div class="stars">★★★★★ 4.9 (1,022 reviews)</div>
<div class="price">$14.00</div>
<p class="desc">A gentle, tear-free wash for hair and skin — dermatologist tested and free of dyes and parabens.</p>
<div class="scentrow"><span class="scent on">Lavender</span><span class="scent">Fragrance-Free</span><span class="scent">Citrus</span></div>
<div class="btn-row">
<button class="btn-add">Add to Cart</button>
<button class="btn-sec">Build a Bundle</button>
</div>
</div>
</main>
<footer><span>© Bippy</span><span>Feel good in your skin</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #bb1919; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #bb1919;
border: 1px solid #bb1919; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1e0404; color: #bb1919;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#202224; box-sizing:border-box;
font-family:"BBC Reith Sans", Arial, Helvetica, freesans, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:38px; background:#000000; display:flex; align-items:center; padding:0 28px; }
.topbar .logo { color:#ffffff; font-size:14px; font-weight:700; letter-spacing:0.02em; }
.topbar .logo b { color:#eb0000; }
nav { height:52px; display:flex; align-items:center; padding:0 28px; gap:22px; border-bottom:1px solid #e6e8ea; }
.brand { font-size:20px; font-weight:700; margin:0 22px 0 0; }
.navlinks { display:flex; gap:20px; flex:1; }
.navlinks span { font-size:14px; font-weight:500; }
.navlinks span.active { font-weight:700; border-bottom:3px solid #000000; padding-bottom:14px; }
.register { background:#000000; color:#ffffff; border:2px solid #000000; padding:6px 14px; font-size:14px; font-weight:500; }
.signin { background:transparent; color:#000000; border:2px solid transparent; padding:6px 14px; font-size:14px; font-weight:500; margin-left:8px; }
.content { padding:20px 28px; height:496px; display:flex; gap:24px; }
.lead { width:560px; }
.live { display:inline-block; background:#bb1919; color:#ffffff; font-size:12px; font-weight:700; padding:2px 6px; margin-bottom:10px; }
.lead h1 { font-size:28px; font-weight:700; line-height:1.25; margin:0 0 10px; max-width:520px; }
.lead .byline { font-size:13px; color:#545658; margin:0 0 14px; }
.leadimg { width:100%; height:220px; background:linear-gradient(135deg,#3a3c3e,#8a8d90); margin-bottom:10px; }
.lead p.body { font-size:16px; line-height:1.5; color:#3a3c3e; max-width:65ch; margin:0; }
.side { flex:1; }
.side h3 { font-size:14px; font-weight:700; text-transform:uppercase; border-bottom:2px solid #bb1919; padding-bottom:8px; margin:0 0 10px; }
.teaser { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid #e6e8ea; }
.teaser .img { width:80px; height:56px; background:linear-gradient(135deg,#dcdcdc,#b5b5b5); flex-shrink:0; }
.teaser h4 { font-size:14px; font-weight:400; margin:0 0 4px; line-height:1.3; }
.teaser span { font-size:12px; color:#545658; }
</style></head>
<body>
<div class="topbar"><span class="logo">bbc</span></div>
<nav>
<p class="brand">BBC</p>
<div class="navlinks"><span class="active">News</span><span>Sport</span><span>Weather</span><span>iPlayer</span><span>Sounds</span></div>
<button class="signin">Sign In</button>
<button class="register">Register</button>
</nav>
<div class="content">
<div class="lead">
<span class="live">LIVE</span>
<h1>Global markets steady as central banks signal coordinated rate pause</h1>
<p class="byline">By Business Correspondent · Reith Sans · Updated 3 hours ago</p>
<div class="leadimg"></div>
<p class="body">Policymakers across three continents indicated a shared pause on rate changes this quarter, easing pressure on currency markets and giving analysts room to reassess growth forecasts for the year ahead.</p>
</div>
<div class="side">
<h3>More stories</h3>
<div class="teaser"><div class="img"></div><div><h4>Coastal cities test new flood defences ahead of storm season</h4><span>Science · 1 hr ago</span></div></div>
<div class="teaser"><div class="img"></div><div><h4>Championship final draws record streaming audience</h4><span>Sport · 2 hrs ago</span></div></div>
<div class="teaser"><div class="img"></div><div><h4>New Reith lecture series to explore digital trust</h4><span>Culture · 4 hrs ago</span></div></div>
<div class="teaser"><div class="img"></div><div><h4>Weather: Mild week ahead across the UK</h4><span>Weather · 5 hrs ago</span></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #313131; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #1a1a1a;
border: 1px solid #313131; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #e74c3c; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#313131; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;background:#1a1a1a;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{color:#fff;font-size:19px;font-weight:600;}
.navlinks{display:flex;gap:24px;}
.navlinks span{color:#fff;font-size:14px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;}
.navlinks .a{border-bottom:2px solid #fff;padding-bottom:20px;}
.navlinks .i{color:#9a9a9a;}
.hero{height:220px;background:#1a1a1a;display:flex;flex-direction:column;justify-content:center;padding:0 36px;}
.hero h1{font-size:32px;font-weight:700;letter-spacing:-.5px;color:#fff;margin:0 0 8px;}
.hero p{font-size:16px;color:#9a9a9a;margin:0;max-width:520px;}
.filterbar{display:flex;gap:8px;padding:14px 36px;background:#f5f5f5;border-bottom:1px solid #d4d4d4;}
.tag{background:#fff;border:1px solid #d4d4d4;padding:6px 12px;font-size:12px;color:#313131;}
.tag.active{background:#313131;color:#fff;border-color:#313131;}
.sec{padding:20px 36px 0;}
.grid{display:flex;gap:16px;}
.card{width:206px;background:#fff;border:1px solid #e8e8e8;border-radius:4px;}
.thumb{height:130px;border-radius:4px 4px 0 0;position:relative;background:#f5f5f5;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;color:#fff;}
.badge.new{background:#e74c3c;}
.badge.sale{background:#27ae60;}
.cbody{padding:12px 12px 14px;}
.ctitle{font-size:16px;font-weight:500;}
.cmeta{font-size:12px;color:#6a6a6a;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#1a1a1a;color:#9a9a9a;font-size:13px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
</style>
<div class="wrap">
<div class="nav"><div class="logo">Nucleus Films</div><div class="navlinks"><span class="a">All Films</span><span class="i">Documentary</span><span class="i">Genre</span><span class="i">Rentals</span></div></div>
<div class="hero"><h1>Cinema, not catalog.</h1><p>Restored documentaries and genre features licensed direct from the archive.</p></div>
<div class="filterbar"><div class="tag active">All Films</div><div class="tag">Restored 4K</div><div class="tag">New Arrivals</div><div class="tag">Under $15</div></div>
<div class="sec">
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#4a4a4a,#1a1a1a)"><div class="badge new">New</div></div><div class="cbody"><div class="ctitle">The Long Reel</div><div class="cmeta">1978 · Restored 4K</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#8a8a8a,#313131)"><div class="badge sale">Sale</div></div><div class="cbody"><div class="ctitle">Nightshift Docks</div><div class="cmeta">1991 · Documentary</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#5a5a5a,#1a1a1a)"></div><div class="cbody"><div class="ctitle">Behind the Curtain Call</div><div class="cmeta">2004 · Genre</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#313131,#6a6a6a)"></div><div class="cbody"><div class="ctitle">A Reel of Ash</div><div class="cmeta">1985 · Restored 4K</div></div></div>
</div>
</div>
<div class="footer"><span>Every restoration graded frame by frame</span><span>Distribution Enquiries</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #1a1a1a;
border: 1px solid #1a1a1a; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #e0ddd7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.33; letter-spacing: 0.2px; background: #e6f2e4; color: #236b14;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Avenir Next',Avenir,Montserrat,-apple-system,sans-serif; background:#ffffff; color:#3d3d3d; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #eceae5;}
.logo{font-size:19px;font-weight:600;color:#1a1a1a;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:0.3px;color:#1a1a1a;}
.hero{height:230px;display:flex;align-items:center;background:#d5ccb4;padding:0 32px;}
.herotext{width:420px;}
.herotext h1{font-size:38px;font-weight:600;color:#1a1a1a;margin:0 0 12px;letter-spacing:-0.6px;line-height:1.1;}
.herotext p{font-size:16px;color:#1a1a1a;margin:0 0 18px;max-width:320px;}
.cta{display:inline-block;background:#1a1a1a;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.3px;padding:14px 28px;border-radius:8px;}
.machine{width:260px;height:170px;margin-left:auto;position:relative;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.1);}
.machine:before{content:'';position:absolute;left:30px;top:30px;width:200px;height:110px;border-radius:8px;background:linear-gradient(160deg,#9a9a9a,#1a1a1a);}
.machine:after{content:'';position:absolute;left:60px;top:120px;width:60px;height:30px;background:#003399;border-radius:0 0 6px 6px;}
.section{padding:18px 32px 0;}
.sectitle{font-size:18px;font-weight:600;color:#1a1a1a;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:150px;background:#f8f6f2;border-radius:12px;padding:12px;}
.thumb{height:88px;border-radius:8px;margin-bottom:8px;}
.pname{font-size:16px;font-weight:600;color:#1a1a1a;}
.pprice{font-size:20px;font-weight:600;color:#1a1a1a;margin-top:6px;letter-spacing:-0.2px;}
.avail{display:inline-block;font-size:11px;color:#236b14;background:#e6f2e4;border-radius:4px;padding:2px 8px;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#1a1a1a;color:#9a9a9a;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">LA Marzocco Home</div>
<div class="navlinks"><div>Espresso Machines</div><div>Grinders</div><div>Accessories</div><div>Support</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>The showroom, brought home.</h1>
<p>Polished steel and walnut accents, engineered to Florentine standards.</p>
<div class="cta">Configure Your Machine</div>
</div>
<div class="machine"></div>
</div>
<div class="section">
<div class="sectitle">Home Collection</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d5ccb4,#1a1a1a)"></div><div class="pname">Linea Mini</div><div class="pprice">$3,825</div><div class="avail">In Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003399,#d5ccb4)"></div><div class="pname">GS3</div><div class="pprice">$5,500</div><div class="avail">In Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#236b14,#d5ccb4)"></div><div class="pname">Lux D Grinder</div><div class="pprice">$1,275</div><div class="avail">In Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#9a9a9a,#1a1a1a)"></div><div class="pname">Bottomless Portafilter</div><div class="pprice">$95</div><div class="avail">In Stock</div></div>
</div>
</div>
<div class="footer"><span>© La Marzocco Home</span><span>Warranty · Care Guide</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #111111; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; background: #ffffff; color: #111111;
border: 1px solid #111111; border-radius: 8px;
padding: 12px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; background: #f5f5f5; color: #111111;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:16px; font-weight:600; }
.pillgroup { display:flex; gap:4px; background:#f8f9fa; border-radius:999px; padding:5px; }
.pillgroup span { font-size:12px; padding:6px 14px; border-radius:999px; color:#6b7280; }
.pillgroup span.on { background:#fff; color:#111; box-shadow:0 1px 2px rgba(0,0,0,0.06); font-weight:600; }
.navcta { display:flex; gap:10px; align-items:center; }
.signin { font-size:13px; color:#374151; }
.btnp { background:#111111; color:#fff; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:600; }
.hero { display:flex; align-items:center; gap:30px; padding:22px 32px; height:280px; }
.hero .left { flex:1; }
.hero h1 { font-size:38px; font-weight:600; letter-spacing:-1.4px; margin:0 0 10px; line-height:1.08; }
.hero p { font-size:15px; color:#374151; margin:0 0 16px; max-width:340px; }
.hero .row { display:flex; gap:10px; }
.btn2 { background:#fff; color:#111; border:1px solid #e5e7eb; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:600; }
.mockup { flex:1; background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:18px;
box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.mockup .mtitle { font-size:13px; font-weight:600; margin-bottom:10px; }
.caldays { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:10px; }
.caldays span { font-size:11px; text-align:center; padding:5px 0; border-radius:6px; background:#f5f5f5; color:#374151; }
.caldays span.on { background:#111; color:#fff; font-weight:600; }
.slots { display:flex; gap:8px; }
.slot { flex:1; text-align:center; font-size:11px; padding:7px; border:1px solid #e5e7eb; border-radius:6px; }
.slot.pick { background:#111; color:#fff; border-color:#111; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 32px; }
.fcard { background:#f5f5f5; border-radius:12px; padding:18px; }
.fcard h3 { font-size:15px; font-weight:600; margin:0 0 6px; }
.fcard p { font-size:12px; color:#374151; margin:0; line-height:1.4; }
footer { height:96px; margin-top:16px; background:#101010; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; color:#a1a1aa; font-size:12px; }
footer b { color:#fff; font-size:14px; }
</style></head>
<body>
<nav>
<div class="brand">Cal.com</div>
<div class="pillgroup"><span class="on">Personal</span><span>Teams</span><span>Enterprise</span></div>
<div class="navcta"><span class="signin">Sign in</span><span class="btnp">Sign up free</span></div>
</nav>
<div class="hero">
<div class="left">
<h1>The better way<br>to schedule meetings</h1>
<p>Simple, all-in-one scheduling for individuals, businesses taking calls, and developers building calendar apps.</p>
<div class="row"><span class="btnp">Get started</span><span class="btn2">Book a demo</span></div>
</div>
<div class="mockup">
<div class="mtitle">Pick a time</div>
<div class="caldays"><span>M</span><span>T</span><span class="on">W</span><span>T</span><span>F</span><span>S</span><span>S</span></div>
<div class="slots"><span class="slot pick">9:00</span><span class="slot">9:30</span><span class="slot">10:00</span><span class="slot">10:30</span></div>
</div>
</div>
<div class="features">
<div class="fcard"><h3>Scheduling infrastructure</h3><p>Build on top of the world's leading calendar scheduling platform.</p></div>
<div class="fcard"><h3>Workflow automation</h3><p>Automate reminders, follow-ups, and confirmations for every booking.</p></div>
<div class="fcard"><h3>Team routing</h3><p>Route meetings to the right person, every time, automatically.</p></div>
</div>
<footer><b>Cal.com</b><span>Product · Solutions · Resources · Pricing</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.27; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; background: #313131; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.3px; background: #313131; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Insta360</title>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:#4a4a4a;}
*{box-sizing:border-box;}
.nav{position:absolute;top:0;left:0;width:960px;height:64px;background:#fff;border-bottom:1px solid #e5e5e5;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-weight:600;font-size:18px;color:#313131;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:26px;font-size:15px;font-weight:500;}
.navlinks span.active{font-weight:600;color:#313131;}
.navlinks span.inactive{color:#6b6b6b;}
.navicons{font-size:13px;color:#313131;}
.hero{position:absolute;top:64px;left:0;width:960px;height:280px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;}
.hero h1{font-size:32px;font-weight:600;letter-spacing:-0.5px;color:#313131;margin:0 0 12px 0;}
.hero p{font-size:16px;color:#4a4a4a;width:440px;margin:0 0 20px 0;}
.btnrow{display:flex;gap:12px;}
.btn-primary{background:#313131;color:#fff;border-radius:4px;padding:12px 24px;font-size:15px;font-weight:500;}
.btn-secondary{border:1px solid #d4d4d4;color:#313131;border-radius:4px;padding:11px 23px;font-size:15px;font-weight:500;background:#fff;}
.camera{position:absolute;top:96px;right:80px;width:130px;height:130px;}
.lens{width:100px;height:100px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5a5a5a,#1a1a1a);position:absolute;top:15px;left:15px;}
.lens::after{content:'';width:38px;height:38px;border-radius:50%;background:#000;position:absolute;top:31px;left:31px;box-shadow:inset 0 0 10px #444;}
.body360{position:absolute;top:0;left:0;width:130px;height:20px;background:#313131;border-radius:10px;}
.sectitle{position:absolute;top:378px;left:36px;font-size:22px;font-weight:600;color:#313131;}
.grid{position:absolute;top:420px;left:36px;width:888px;height:190px;display:flex;gap:18px;}
.card{width:207px;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.08);overflow:hidden;}
.imgbox{width:207px;height:110px;background:#f5f5f5;position:relative;}
.imgbox.a{background:linear-gradient(135deg,#1a1a1a,#313131);}
.imgbox.b{background:linear-gradient(135deg,#3a3a3a,#6b6b6b);}
.imgbox.c{background:linear-gradient(135deg,#0d0d0d,#313131);}
.imgbox.d{background:linear-gradient(135deg,#2a2a2a,#4a4a4a);}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;border-radius:2px;padding:2px 8px;color:#fff;}
.badge.new{background:#313131;}
.badge.sale{background:#c13515;}
.title{font-size:16px;font-weight:500;padding:10px 12px 2px;color:#313131;}
.price{font-size:16px;font-weight:500;padding:0 12px 12px;color:#313131;}
</style>
<div class="nav">
<div class="logo">Insta360</div>
<div class="navlinks"><span class="active">Cameras</span><span class="inactive">Accessories</span><span class="inactive">Software</span><span class="inactive">Support</span></div>
<div class="navicons">Search · Cart</div>
</div>
<div class="hero">
<h1>Capture every angle.</h1>
<p>360° and action cameras built for creators who don't want to choose a direction.</p>
<div class="btnrow">
<div class="btn-primary">Shop Cameras</div>
<div class="btn-secondary">Compare Models</div>
</div>
<div class="camera"><div class="body360"></div><div class="lens"></div></div>
</div>
<div class="sectitle">Shop the Lineup</div>
<div class="grid">
<div class="card">
<div class="imgbox a"><div class="badge new">New</div></div>
<div class="title">X4 360 Camera</div>
<div class="price">$499.99</div>
</div>
<div class="card">
<div class="imgbox b"></div>
<div class="title">Ace Pro 2</div>
<div class="price">$449.99</div>
</div>
<div class="card">
<div class="imgbox c"><div class="badge sale">Sale</div></div>
<div class="title">GO 3S Mini</div>
<div class="price">$319.99</div>
</div>
<div class="card">
<div class="imgbox d"></div>
<div class="title">Invisible Selfie Stick</div>
<div class="price">$24.99</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; background: #337ab7; color: #ffffff;
border: none; border-radius: 4px; padding: 6px 12px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #ffffff; color: #337ab7;
border: 1px solid #337ab7; border-radius: 999px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #080808;
border: 1px solid #e5e5e5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; background: #e2ecf5; color: #337ab7;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,'Helvetica Neue',sans-serif; color:#080808; }
*{box-sizing:border-box;}
.nav{height:56px;background:#080808;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.searchbox{width:340px;height:32px;background:#fff;border-radius:3px;display:flex;align-items:center;padding:0 12px;font-size:12px;color:#777777;}
.searchbtn{background:#337ab7;color:#fff;font-size:12px;font-weight:700;padding:8px 16px;border-radius:3px;}
.catbar{height:34px;background:#f5f5f5;border-bottom:1px solid #e7e7e7;display:flex;align-items:center;gap:20px;padding:0 30px;font-size:12px;font-weight:700;color:#337ab7;}
.sec{padding:16px 30px;}
.secTitle{font-size:16px;font-weight:700;color:#080808;margin-bottom:10px;}
.row{display:flex;align-items:center;gap:16px;padding:10px 12px;border:1px solid #e7e7e7;margin-bottom:6px;}
.row:nth-child(odd){background:#f5f5f5;}
.row:nth-child(even){background:#ffffff;}
.thumb{width:56px;height:56px;border-radius:3px;flex-shrink:0;}
.rinfo{flex:1;}
.rtitle{font-size:13px;font-weight:700;color:#080808;}
.rsub{font-size:11px;color:#777777;}
.status{font-size:11px;font-weight:700;padding:2px 8px;border-radius:3px;}
.instock{background:#dff0d8;color:#3c763d;}
.rare{background:#fcf8e3;color:#8a6d3b;}
.soldout{background:#f2dede;color:#a94442;}
.price{width:70px;text-align:right;font-size:14px;font-weight:700;color:#080808;}
.addbtn{background:#5cb85c;color:#fff;font-size:11px;font-weight:700;padding:8px 12px;border-radius:3px;}
.footer{height:30px;background:#080808;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:11px;color:#cccccc;}
.wrap{display:flex;flex-direction:column;height:640px;}
.seclist{flex:1;overflow:hidden;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Lukie Games</div>
<div class="searchbox">Search 30,000+ titles...</div>
<div class="searchbtn">Search</div>
</div>
<div class="catbar"><span>NES</span><span>SNES</span><span>N64</span><span>Genesis</span><span>PS1</span><span>Game Boy</span></div>
<div class="seclist">
<div class="sec">
<div class="secTitle">Recently Listed</div>
<div class="row"><div class="thumb" style="background:linear-gradient(135deg,#337ab7,#080808)"></div><div class="rinfo"><div class="rtitle">Chrono Voyager (SNES, Cart Only)</div><div class="rsub">Tested & Working · Ships in 1 Business Day</div></div><div class="status instock">In Stock</div><div class="price">$89.99</div><div class="addbtn">Add to Cart</div></div>
<div class="row"><div class="thumb" style="background:linear-gradient(135deg,#5cb85c,#080808)"></div><div class="rinfo"><div class="rtitle">Metroid Origins (NES, CIB)</div><div class="rsub">Complete in Box · Manual Included</div></div><div class="status rare">Rare</div><div class="price">$249.99</div><div class="addbtn">Add to Cart</div></div>
<div class="row"><div class="thumb" style="background:linear-gradient(135deg,#a94442,#080808)"></div><div class="rinfo"><div class="rtitle">Star Fighter 64 (N64, Cart Only)</div><div class="rsub">Tested & Working</div></div><div class="status soldout">Sold Out</div><div class="price">$34.99</div><div class="addbtn">Notify Me</div></div>
<div class="row"><div class="thumb" style="background:linear-gradient(135deg,#8a6d3b,#080808)"></div><div class="rinfo"><div class="rtitle">Ring Runner (Genesis, Cart Only)</div><div class="rsub">Tested & Working · Ships in 1 Business Day</div></div><div class="status instock">In Stock</div><div class="price">$19.99</div><div class="addbtn">Add to Cart</div></div>
</div>
</div>
<div class="footer"><span>© Retro Games, Tested and Shipped</span><span>Trade-In Program</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #141414; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #141414; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.3px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #44b5ed; color: #141414;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #222222; color: #44b5ed;
border: 1px solid #44b5ed; border-radius: 9999px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #222222; color: #ffffff;
border: 1px solid #141414; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #44b5ed; color: #141414;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#141414; color:#ffffff; box-sizing:border-box;
font-family:'Inter', 'Sora', 'Space Grotesk', -apple-system, system-ui, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#141414; border-bottom:1px solid #383838; }
.logo { font-family:'Sora',sans-serif; font-weight:600; font-size:16px; letter-spacing:-0.3px; color:#fff; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#878787; font-weight:500; }
.cart { position:relative; color:#878787; font-size:13px; }
.cart::after { content:'2'; position:absolute; top:-8px; right:-12px; background:#44b5ed; color:#141414;
font-family:'Space Grotesk',sans-serif; font-size:10px; font-weight:600; border-radius:9999px;
width:16px; height:16px; display:flex; align-items:center; justify-content:center; }
main { display:flex; height:calc(640px - 56px - 28px); }
.stage { width:440px; position:relative; background:linear-gradient(160deg,#141414 0%,#1f2021 60%,#182226 100%);
display:flex; align-items:center; justify-content:center; overflow:hidden; border-right:1px solid #383838; }
.glow { position:absolute; width:340px; height:340px; border-radius:50%;
background:radial-gradient(circle, rgba(68,181,237,0.35) 0%, rgba(68,181,237,0.05) 55%, transparent 75%); }
.visor { position:relative; width:230px; height:150px; }
.visor .body { position:absolute; inset:0; background:linear-gradient(145deg,#2b2c2d,#141414);
border-radius:28px; border:1px solid #454545; box-shadow:0 30px 60px rgba(0,0,0,0.55); }
.visor .lens { position:absolute; left:26px; top:34px; width:76px; height:76px; border-radius:50%;
background:radial-gradient(circle at 35% 30%, #6fd4ff 0%, #1a3a4a 55%, #0a1418 100%);
box-shadow:0 0 24px rgba(68,181,237,0.55), inset 0 0 12px rgba(0,0,0,0.6); }
.visor .lens2 { left:auto; right:26px; }
.visor .strap { position:absolute; left:-18px; top:50px; width:24px; height:50px; background:#1c1c1c;
border-radius:8px; border:1px solid #383838; }
.visor .strap2 { left:auto; right:-18px; }
.visor .led { position:absolute; left:50%; top:18px; transform:translateX(-50%); width:8px; height:8px;
border-radius:50%; background:#44b5ed; box-shadow:0 0 10px 3px rgba(68,181,237,0.8); }
.badges-stage { position:absolute; top:20px; left:20px; display:flex; gap:8px; }
.b { font-family:'Space Grotesk',sans-serif; font-size:10px; font-weight:600; letter-spacing:0.5px;
text-transform:uppercase; border-radius:4px; padding:3px 9px; }
.b-new { background:#ec0101; color:#141414; }
.b-sale { background:#ffc23d; color:#141414; }
.thumbs { position:absolute; bottom:20px; left:20px; display:flex; gap:8px; }
.thumb { width:44px; height:44px; border-radius:8px; background:#222222; border:1px solid #383838; }
.thumb.active { border-color:#44b5ed; }
.info { flex:1; padding:28px 36px; display:flex; flex-direction:column; }
.crumb { font-size:11px; color:#878787; margin-bottom:10px; }
.crumb b { color:#44b5ed; font-weight:500; }
h1 { font-family:'Sora',sans-serif; font-size:25px; font-weight:600; letter-spacing:-0.3px; margin:0 0 8px; }
.stars { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.stars .s { color:#ffc23d; font-size:14px; letter-spacing:1px; }
.stars .n { font-size:12px; color:#878787; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.price { font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:600; color:#44b5ed; }
.was { font-size:14px; color:#878787; text-decoration:line-through; }
p.desc { font-size:14px; line-height:1.55; color:#c9c9c9; margin:0 0 18px; max-width:420px; }
.spec { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; background:#1f2021; border:1px solid #383838;
border-radius:12px; padding:14px 16px; margin-bottom:18px; }
.spec div { font-size:11px; color:#878787; }
.spec b { display:block; font-size:13px; color:#fff; font-weight:600; margin-top:2px; }
.variant-label { font-size:11px; color:#878787; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.chips { display:flex; gap:8px; margin-bottom:20px; }
.chip { padding:8px 16px; border-radius:9999px; border:1px solid #383838; background:#222222; font-size:13px; color:#c9c9c9; }
.chip.active { border-color:#44b5ed; color:#44b5ed; background:#1a2a30; }
.cta-row { display:flex; gap:12px; margin-top:auto; }
.btn-primary { background:#44b5ed; color:#141414; border:none; border-radius:9999px; padding:13px 30px;
font-size:14px; font-weight:600; }
.btn-secondary { background:#222222; color:#44b5ed; border:1px solid #383838; border-radius:9999px;
padding:13px 24px; font-size:14px; font-weight:600; }
.trust { display:flex; gap:16px; margin-top:14px; font-size:11px; color:#878787; }
</style></head>
<body>
<nav>
<span class="logo">Amvr</span>
<div class="navlinks"><span>Headsets</span><span>Trackers</span><span>Mounts</span><span>Support</span></div>
<span class="cart">Cart</span>
</nav>
<main>
<div class="stage">
<div class="glow"></div>
<div class="badges-stage"><span class="b b-new">New</span><span class="b b-sale">-15%</span></div>
<div class="visor">
<div class="strap"></div><div class="strap strap2"></div>
<div class="body"></div>
<div class="lens"></div><div class="lens lens2"></div>
<div class="led"></div>
</div>
<div class="thumbs">
<div class="thumb active"></div><div class="thumb"></div><div class="thumb"></div>
</div>
</div>
<div class="info">
<div class="crumb">Headsets / Accessories / <b>Facial Interface Kit</b></div>
<h1>Cushion & Facial Interface Kit — Pro</h1>
<div class="stars"><span class="s">★★★★★</span><span class="n">4.8 · 612 ratings</span></div>
<div class="price-row"><span class="price">$39.00</span><span class="was">$46.00</span></div>
<p class="desc">PU-leather facial interface with anti-fog channeling and a hypoallergenic foam core — engineered to seal light while keeping long sessions cool.</p>
<div class="spec">
<div>Compatibility<b>Quest 3 / 3S</b></div>
<div>Weight<b>68g</b></div>
<div>Material<b>PU Leather + Foam</b></div>
<div>Light Seal<b>98.4%</b></div>
</div>
<div>
<div class="variant-label">Fit</div>
<div class="chips">
<span class="chip active">Standard</span>
<span class="chip">Glasses</span>
<span class="chip">Slim</span>
</div>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compatibility Check</button>
</div>
<div class="trust"><span>Free shipping $49+</span><span>30-day returns</span><span>2yr warranty</span></div>
</div>
</main>
<footer style="height:28px; border-top:1px solid #383838; display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; color:#5a5a5a;">
<span>© Amvr</span><span>Engineered for immersion</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff9100; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff9100; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c4b09; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff9100; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff9100; color: #111111;
border: 1px solid #d97d03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c4b09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e48a27; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#292929; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
header { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #dddddd; background:#ffffff; }
.brand { font-size:18px; font-weight:700; color:#292929; letter-spacing:-0.2px; }
.search-action { background:#ff9100; color:#ffffff; border:none; border-radius:4px;
padding:0 18px; height:42px; font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; }
.outline-action { color:#ff9100; border:1px solid #ff9100; border-radius:4px; background:#ffffff;
padding:0 14px; height:32px; font-size:13px; font-weight:700; }
.head-right { display:flex; gap:10px; align-items:center; }
.tabs { display:flex; gap:4px; padding:14px 32px 0; border-bottom:1px solid #dddddd; background:#ffffff; }
.tab { padding:8px 16px; font-size:14px; font-weight:700; color:#7e7e7e; border-radius:4px 4px 0 0; }
.tab.active { color:#ff7800; border-bottom:2px solid #ff7800; }
.searchbar { margin:20px 32px 6px; height:44px; border:2px solid #ff9100; border-radius:4px;
display:flex; align-items:center; padding:0 16px; gap:10px; background:#ffffff; }
.searchbar .ph { color:#7e7e7e; font-size:14px; }
.searchbar .sbtn { margin-left:auto; background:#ff9100; color:#fff; border-radius:4px;
height:32px; padding:0 14px; font-size:13px; font-weight:700; display:flex; align-items:center; }
.topics { display:flex; gap:8px; padding:14px 32px; flex-wrap:wrap; }
.pill { padding:8px 16px; border-radius:4px; font-size:13px; font-weight:700; background:#dbf7f7; color:#00afb8; }
.pill.act { background:#ff7800; color:#ffffff; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:6px 32px 20px; }
.card { background:#ffffff; border:1px solid #dddddd; border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:8px; }
.card .logo { width:44px; height:44px; border-radius:8px; background:linear-gradient(135deg,#ff9100,#00afb8); }
.card h4 { margin:0; font-size:15px; font-weight:700; color:#292929; }
.card p { margin:0; font-size:13px; color:#7e7e7e; line-height:1.4; }
.card .tags { display:flex; gap:6px; margin-top:4px; }
.card .tag { font-size:11px; font-weight:700; color:#00afb8; background:#dbf7f7; border-radius:4px; padding:2px 8px; }
.sidebox { position:absolute; right:32px; top:216px; width:220px; background:#eeeeee; border-radius:12px; padding:16px; }
.sidebox h5 { margin:0 0 8px; font-size:13px; font-weight:700; color:#292929; }
.sidebox .row { display:flex; justify-content:space-between; font-size:12px; color:#7e7e7e; padding:6px 0; border-bottom:1px solid #dddddd; }
.sidebox .row b { color:#292929; font-weight:700; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #dddddd; padding:14px 32px;
display:flex; justify-content:space-between; font-size:11px; color:#7e7e7e; background:#ffffff; }
</style></head>
<body>
<header>
<span class="brand">104 Job Bank</span>
<div class="head-right">
<button class="outline-action">Post a Job</button>
<button class="search-action">Search Jobs</button>
</div>
</header>
<div class="tabs">
<span class="tab active">Jobs</span>
<span class="tab">Companies</span>
<span class="tab">Resume Tools</span>
<span class="tab">Career Advice</span>
<span class="tab">Salary Guide</span>
</div>
<div class="searchbar">
<span class="ph">Job title, company, or skill…</span>
<span class="sbtn">Search</span>
</div>
<div class="topics">
<span class="pill act">Engineering</span>
<span class="pill">Design</span>
<span class="pill">Marketing</span>
<span class="pill">Finance</span>
<span class="pill">Remote</span>
</div>
<div class="grid" style="width:660px;">
<div class="card"><div class="logo"></div><h4>Frontend Engineer</h4><p>Taipei · Full-time · 3+ yrs experience</p><div class="tags"><span class="tag">React</span><span class="tag">Hybrid</span></div></div>
<div class="card"><div class="logo"></div><h4>HR Business Partner</h4><p>Kaohsiung · Full-time · Talent management</p><div class="tags"><span class="tag">HR</span><span class="tag">On-site</span></div></div>
<div class="card"><div class="logo"></div><h4>Product Designer</h4><p>Taichung · Full-time · Career direction focus</p><div class="tags"><span class="tag">Figma</span><span class="tag">Remote</span></div></div>
<div class="card"><div class="logo"></div><h4>Data Analyst</h4><p>Taipei · Contract · Entry friendly</p><div class="tags"><span class="tag">SQL</span><span class="tag">Hybrid</span></div></div>
<div class="card"><div class="logo"></div><h4>Customer Success</h4><p>Tainan · Full-time · People-first team</p><div class="tags"><span class="tag">CS</span><span class="tag">On-site</span></div></div>
<div class="card"><div class="logo"></div><h4>Operations Manager</h4><p>Taipei · Full-time · Manage more than tasks</p><div class="tags"><span class="tag">Ops</span><span class="tag">Hybrid</span></div></div>
</div>
<div class="sidebox">
<h5>Your Career Direction</h5>
<div class="row"><span>Resume completeness</span><b>82%</b></div>
<div class="row"><span>Matched openings</span><b>146</b></div>
<div class="row"><span>Saved jobs</span><b>12</b></div>
<div class="row" style="border:none;"><span>Recommended by AI</span><b>9</b></div>
</div>
<footer>
<span>© 104 Job Bank</span>
<span>Find direction, not just a job.</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #917e57; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #917e57; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c8bfae; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #917e57; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #917e57; color: #f5f5f5;
border: 1px solid #a19170; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c8bfae; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #887a70; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212529; box-sizing:border-box;
font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #cccccc; }
.brand { font-weight:700; font-size:20px; letter-spacing:2px; color:#917e57; }
.search { flex:1; max-width:340px; margin:0 30px; height:40px; display:flex; }
.search input { flex:1; border:1px solid #cccccc; border-right:none; border-radius:8px 0 0 8px; padding:6px 16px 6px 16px;
color:#999999; font-size:16px; }
.search .go { width:44px; background:#917e57; color:#fff; display:flex; align-items:center; justify-content:center;
border-radius:0; }
.navlinks { display:flex; gap:18px; font-size:13px; color:#212529; }
.banner { padding:20px 40px; }
.banner .band { height:120px; border-radius:0; background:linear-gradient(135deg,#f0ede4,#d8cdb0);
display:flex; align-items:center; padding:0 30px; }
.banner .band span { font-size:20px; font-weight:700; color:#5c4d2e; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#e6e6e6; padding:0 40px 24px; }
.card { background:#fff; height:270px; padding:14px; }
.card .cover { height:150px; background:linear-gradient(160deg,#efece4,#c9bc9a); margin-bottom:10px; }
.card h5 { font-size:13px; margin:0 0 6px; line-height:1.4; }
.card .price { font-size:13px; color:#917e57; font-weight:700; }
.section-title { padding:0 40px; font-size:15px; font-weight:700; margin:6px 0 12px; }
</style></head>
<body>
<nav>
<span class="brand">Eslite</span>
<div class="search"><input placeholder="Search books, products"><div class="go">🔍</div></div>
<div class="navlinks"><span>Books</span><span>Stationery & Design</span><span>Apparel</span><span>Home & Living</span></div>
</nav>
<section class="banner"><div class="band"><span>Live your Dream — 35th Anniversary</span></div></section>
<div class="section-title">Staff Picks</div>
<section class="grid">
<div class="card"><div class="cover"></div><h5>Designer's Everyday Objects</h5><div class="price">NT$420</div></div>
<div class="card"><div class="cover"></div><h5>Handcrafted Ceramic Tea Set</h5><div class="price">NT$1,280</div></div>
<div class="card"><div class="cover"></div><h5>Local Artisan Picks: Woven Rush Grass</h5><div class="price">NT$680</div></div>
<div class="card"><div class="cover"></div><h5>Literary Magazine — 2026 Autumn Issue</h5><div class="price">NT$260</div></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1ec59f; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1ec59f; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #176251; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #17a384; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1ec59f; color: #000000;
border: 1px solid #17a384; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1ec59f; color: #111111;
border: 1px solid #1ca888; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #176251; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1dc09b; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:"Pretendard", "Apple SD Gothic Neo", -apple-system, Arial, sans-serif; }
* { box-sizing:border-box; }
.top { background:#19254d; color:#fff; padding:16px 40px; }
nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.brand { font-size:16px; font-weight:700; }
.navlinks { display:flex; gap:20px; font-size:13px; color:rgba(255,255,255,0.75); }
.cta-white { background:#fff; color:#19254d; border-radius:12px; padding:8px 16px; font-size:13px; font-weight:700; }
.top h1 { font-size:24px; font-weight:700; margin:0 0 8px; }
.top p { font-size:13px; color:rgba(255,255,255,0.7); margin:0 0 12px; }
.top-cta { display:inline-flex; background:#1ec59f; color:#fff; border-radius:12px; padding:12px 20px; font-size:14px; font-weight:700; }
.map { position:relative; margin:14px 40px; height:220px; background:linear-gradient(160deg,#eef2f0,#d7e3dc); border-radius:16px; overflow:hidden; }
.pin { position:absolute; width:12px; height:12px; border-radius:50%; background:#1ec59f; box-shadow:0 0 0 6px rgba(30,197,159,0.2); }
.pin.a { top:60px; left:120px; } .pin.b { top:120px; left:260px; background:#1a1a1a; box-shadow:none; }
.road { position:absolute; height:3px; background:#bbbbbb; }
.r1 { top:80px; left:100px; width:180px; transform:rotate(15deg); }
.search-field { position:absolute; top:14px; left:14px; right:14px; background:#f2f2f2; border-radius:12px;
height:48px; display:flex; align-items:center; padding:0 16px 0 20px; font-size:16px; color:#999999; }
.tripcard { position:absolute; bottom:14px; left:14px; right:14px; background:#fff; border-radius:16px;
padding:14px 16px; display:flex; justify-content:space-between; align-items:center; box-shadow:0px 2px 8px rgba(0,0,0,0.08); }
.tripcard .eta { font-size:20px; font-weight:700; }
.tripcard .status { background:#e6f8f3; color:#149378; border-radius:8px; font-size:11px; font-weight:700; padding:4px 8px; }
.call-btn { background:#1ec59f; color:#fff; border-radius:12px; padding:10px 22px; font-size:14px; font-weight:700; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #e5e5e5; padding:8px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#999999; }
</style></head>
<body>
<div class="top">
<nav>
<div class="brand">TADA</div>
<div class="navlinks"><span>Ride</span><span>Business</span><span>Reservations</span></div>
<div class="cta-white">Call TADA now, no sign-up</div>
</nav>
<h1>Better movement, better living</h1>
<p>Roomy rides, a clear ETA, and one calm button.</p>
<div class="top-cta">Call a car</div>
</div>
<div class="map">
<div class="search-field">Where to?</div>
<div class="road r1"></div>
<div class="pin a"></div><div class="pin b"></div>
<div class="tripcard">
<div><span class="status">Driver assigned</span><div class="eta">3 min</div></div>
<div class="call-btn">Confirm</div>
</div>
</div>
<footer><span>© TADA</span><span>TADA · Business · Airport Transfer</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #bd2426; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #0045a6; color: #ffffff;
border: 1px solid #0045a6; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #9bca3e; color: #313131;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Roboto,'Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#404040; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;background:#0045a6;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:6px;}
.navlinks span{color:#fff;font-size:14px;font-weight:500;letter-spacing:0.25px;text-transform:uppercase;padding:8px 16px;}
.navlinks span:first-child{background:#003681;border-radius:4px;}
.hero{height:210px;background:#0045a6;display:flex;align-items:center;padding:0 40px;}
.heroText h1{font-size:30px;font-weight:700;color:#fff;margin:0 0 10px;}
.heroText p{font-size:15px;color:#dbe6f5;margin:0 0 16px;max-width:420px;}
.cta{display:inline-block;background:#bd2426;color:#fff;font-size:15px;font-weight:600;letter-spacing:0.25px;padding:12px 26px;border-radius:4px;}
.sec{padding:20px 32px 0;}
.secTitle{font-size:18px;font-weight:600;color:#313131;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border:1px solid #d9d9d9;border-radius:8px;padding:16px;position:relative;}
.thumb{height:90px;background:#f5f5f5;border-radius:8px;margin-bottom:10px;position:relative;overflow:hidden;}
.headset{position:absolute;left:50px;top:22px;width:100px;height:46px;border-radius:22px;background:linear-gradient(135deg,#0045a6,#313131);}
.strap{position:absolute;left:36px;top:10px;width:128px;height:14px;border-radius:8px;background:#003681;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:2px;color:#fff;}
.badge.compat{background:#9bca3e;color:#313131;}
.badge.new{background:#f68b1f;}
.ctitle{font-size:16px;font-weight:600;color:#313131;margin-bottom:6px;}
.cprice{font-size:18px;font-weight:700;color:#0045a6;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#313131;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#dedede;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">VR Cover</div>
<div class="navlinks"><span>Facial Interfaces</span><span>Lens Protectors</span><span>Compatibility</span></div>
</div>
<div class="hero">
<div class="heroText">
<h1>Comfort That Doesn't Compromise Fit</h1>
<p>Precision foam facials and lens protectors engineered for every major VR headset.</p>
<div class="cta">Shop by Headset</div>
</div>
</div>
<div class="sec">
<div class="secTitle">Popular Accessories</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge compat">Works With Quest 3</div><div class="strap"></div><div class="headset"></div></div><div class="ctitle">VR Cover Foam Facial</div><div class="cprice">$29.95</div></div>
<div class="card"><div class="thumb"><div class="badge new">New</div><div class="strap" style="background:#2f7bbf"></div><div class="headset" style="background:linear-gradient(135deg,#2f7bbf,#313131)"></div></div><div class="ctitle">Lens Protector Set</div><div class="cprice">$14.95</div></div>
<div class="card"><div class="thumb"><div class="strap" style="background:#003681"></div><div class="headset" style="background:linear-gradient(135deg,#003681,#5d5d65)"></div></div><div class="ctitle">Silicone Facial Interface</div><div class="cprice">$24.95</div></div>
</div>
</div>
<div class="footer"><span>© Precision Hardware Accessories</span><span>Compatibility Guide</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2d2e2f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2d2e2f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #2d2e2f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #00892d; color: #ffffff;
border: none; border-radius: 12px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #00892d;
border: 1px solid #00892d; border-radius: 12px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #2d2e2f;
border: 1px solid #cacbcb; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #e00087; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#ffffff; color:#2d2e2f; box-sizing:border-box; font-family:'OpenSans-Regular',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;background:#fff;border-bottom:1px solid #dce7e2;display:flex;align-items:center;justify-content:space-between;padding:0 26px;}
.nav .logo{font-family:'Omnes-Bold',Arial,sans-serif;font-weight:700;font-size:18px;color:#00892d;}
.nav .links{display:flex;gap:18px;font-family:'Omnes-Semibold',sans-serif;font-weight:600;font-size:14px;}
.nav .links span:first-child{color:#00892d;border-bottom:3px solid #00892d;padding-bottom:4px;}
.wrap{display:flex;height:580px;}
.left{width:400px;background:#fefad5;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;}
.box{width:200px;height:150px;background:linear-gradient(90deg,#00892d,#ffcc33,#e71a13,#792e88,#0dcaf0);border-radius:12px;box-shadow:0 14px 26px rgba(0,0,0,.12);position:relative;}
.box::before{content:'';position:absolute;top:16px;left:16px;right:16px;bottom:60px;background:rgba(255,255,255,.85);border-radius:6px;}
.badge-new{position:absolute;top:24px;left:24px;background:#e00087;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;border-radius:9999px;}
.right{flex:1;padding:28px 32px;display:flex;flex-direction:column;}
h1{font-family:'Omnes-Bold',Arial,sans-serif;font-size:28px;font-weight:700;margin:0 0 8px;letter-spacing:-.25px;}
.sub{color:#373b3e;font-size:16px;margin:0 0 16px;}
.age-badge{display:inline-flex;background:#0dcaf0;color:#2d2e2f;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;border-radius:9999px;margin-bottom:16px;width:fit-content;}
.price{font-size:20px;font-weight:700;margin:0 0 18px;}
.cat-cards{display:flex;gap:10px;margin-bottom:20px;}
.cat{background:#fff;border:1px solid #e1f3e7;border-radius:20px;padding:12px 16px;font-family:'Omnes-Semibold',sans-serif;font-size:13px;font-weight:600;}
.desc{font-size:16px;color:#373b3e;line-height:1.5;margin:0 0 20px;}
.actions{display:flex;gap:10px;margin-top:auto;}
.btn-primary{background:#00892d;color:#fff;font-family:'Omnes-Semibold',sans-serif;font-size:16px;font-weight:600;border-radius:12px;padding:14px 24px;height:48px;display:flex;align-items:center;}
.btn-secondary{background:#ffcc33;color:#2d2e2f;font-family:'Omnes-Semibold',sans-serif;font-size:16px;font-weight:600;border-radius:12px;padding:14px 24px;height:48px;display:flex;align-items:center;}
</style>
</head>
<body>
<div class="nav"><div class="logo">Crayola</div><div class="links"><span>Crayons</span><span>Markers</span><span>Coloring Books</span><span>Craft Kits</span></div></div>
<div class="wrap">
<div class="left"><div class="badge-new">New</div><div class="box"></div></div>
<div class="right">
<h1>Ultimate Crayon Collection, 152 Count</h1>
<p class="sub">Every color, one box · With built-in sharpener</p>
<span class="age-badge">Ages 4+</span>
<p class="price">$19.99</p>
<div class="cat-cards"><span class="cat">Crayons</span><span class="cat">Craft Kits</span></div>
<p class="desc">The biggest box of crayons we make, with every color in the current Crayola lineup plus a handy built-in sharpener so the fun never has to stop for a broken tip.</p>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Shop Category</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0d333f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0d333f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d9ea3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d333f; color: #ffffff;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0d333f; color: #f5f5f5;
border: 1px solid #32525c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d9ea3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0b2b35; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Avenir Next forINTUIT", "Avenir Next", "Avenir", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
body { display:flex; flex-direction:column; }
nav.top { flex:0 0 84px; height:84px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#ffffff; border-bottom:1px solid #e5e5e5; }
.logo { font-size:19px; font-weight:600; color:#000000; margin:0; }
.tabs { display:flex; align-items:center; gap:32px; height:100%; }
.tab { font-size:16px; font-weight:400; color:#000000; height:100%; display:flex; align-items:center;
border-bottom:2px solid transparent; }
.tab.active { border-bottom:2px solid #0d333f; font-weight:600; }
.signin { font-size:16px; color:#055393; }
.hero { flex:0 0 auto; padding:32px 40px 8px; display:flex; flex-direction:column; gap:20px; max-width:640px; }
.hero h1 { margin:0; font-size:40px; font-weight:600; line-height:52px; color:#000000; }
.hero p { margin:0; font-size:16px; font-weight:400; line-height:24px; color:#6b6c72; max-width:520px; }
.btn-secondary { align-self:flex-start; background:transparent; color:#0d333f; border:1px solid #0d333f;
border-radius:4px; height:52px; padding:0 28px; font-size:16px; font-weight:400; }
.tiles { flex:1; padding:16px 40px 0; display:grid; grid-template-columns:repeat(4,1fr); }
.tile { padding:20px 20px 0; border-left:1px solid #e5e5e5; display:flex; flex-direction:column; }
.tile:first-child { border-left:none; }
.swatch { width:100%; height:88px; border-radius:0; }
.tile .label { margin-top:20px; font-size:16px; font-weight:600; color:#000000; }
.tile .sub { margin-top:4px; font-size:14px; font-weight:400; color:#6b6c72; line-height:1.4; }
footer { flex:0 0 56px; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-top:1px solid #e5e5e5; font-size:12px; color:#6b6c72; }
</style></head>
<body>
<nav class="top">
<p class="logo">Intuit QuickBooks</p>
<div class="tabs">
<span class="tab active">Overview</span>
<span class="tab">Small business</span>
<span class="tab">Accounting</span>
<span class="tab">Payments</span>
<span class="tab">Payroll</span>
</div>
<span class="signin">Sign in</span>
</nav>
<section class="hero">
<h1>Champion the business you serve.</h1>
<p>See what needs your attention today, and keep moving forward with confidence.</p>
<button class="btn-secondary">See how it works</button>
</section>
<section class="tiles">
<div class="tile">
<div class="swatch" style="background:#0d333f;"></div>
<p class="label">Retail</p>
<p class="sub">Point of sale and inventory in one place.</p>
</div>
<div class="tile">
<div class="swatch" style="background:#055393;"></div>
<p class="label">Services</p>
<p class="sub">Invoicing and time tracking, made simple.</p>
</div>
<div class="tile">
<div class="swatch" style="background:#6b6c72;"></div>
<p class="label">Freelance</p>
<p class="sub">Track expenses and estimate taxes as you go.</p>
</div>
<div class="tile">
<div class="swatch" style="background:#4a6b75;"></div>
<p class="label">Nonprofit</p>
<p class="sub">Fund and grant tracking built for accountability.</p>
</div>
</section>
<footer>
<span>© Intuit QuickBooks</span>
<span>Intuit QuickBooks · Small business · Accounting · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #486d97; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: transparent; color: #000000;
border: 1px solid #486d97; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #2b2b2b; color: #ffffff;
border: 1px solid #ffffff; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #063950; color: #3086ab;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#181818; font-family:'Roboto Condensed','Helvetica Neue',Arial,sans-serif; color:#ffffff; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:700;letter-spacing:-.5px;text-transform:uppercase;}
.navlinks{font-family:'Open Sans',sans-serif;display:flex;gap:20px;font-size:14px;font-weight:600;}
.hero{height:230px;display:flex;align-items:center;padding:0 32px;gap:26px;}
.herotext{width:46%;}
.herotext h1{font-size:44px;font-weight:700;margin:0 0 10px;line-height:1.1;letter-spacing:-1.5px;text-transform:uppercase;}
.herotext p{font-family:'Open Sans',sans-serif;font-size:15px;color:#d9d9d9;margin:0 0 16px;max-width:300px;}
.cta{display:inline-block;background:#486d97;color:#fff;font-size:16px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:14px 28px;border-radius:4px;}
.towerart{flex:1;height:160px;display:flex;align-items:center;justify-content:center;}
.tower{width:70px;height:150px;background:#262626;border:2px solid #3086ab;border-radius:4px;position:relative;}
.tower:before{content:'';position:absolute;left:10px;top:20px;width:8px;height:8px;border-radius:50%;background:#3086ab;box-shadow:0 20px 0 #3086ab,0 40px 0 #3086ab;}
.grid{display:flex;gap:14px;padding:20px 32px 0;}
.card{width:206px;background:#262626;border-radius:4px;overflow:hidden;}
.thumb{aspect-ratio:4/3;height:100px;background:#2b2b2b;}
.cardbody{padding:16px;}
.specbadge{display:inline-block;background:#063950;color:#3086ab;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;border-radius:4px;padding:4px 8px;margin-bottom:8px;}
.ptitle{font-family:'Open Sans',sans-serif;font-size:16px;font-weight:600;}
.pprice{font-size:22px;font-weight:700;margin-top:6px;letter-spacing:-.5px;}
.configbtn{display:inline-block;margin-top:10px;background:#3086ab;color:#fff;font-family:'Roboto Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;border-radius:4px;padding:8px 16px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#181818;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-family:'Open Sans',sans-serif;font-size:12px;color:#777777;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Velocity Micro</div>
<div class="navlinks"><div>Gaming</div><div>Workstation</div><div>Proton</div><div>Support</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Hand-built. One at a time.</h1>
<p>Custom gaming and workstation PCs assembled to your exact spec.</p>
<div class="cta">Configure Yours</div>
</div>
<div class="towerart"><div class="tower"></div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#3086ab,#181818)"></div><div class="cardbody"><div class="specbadge">RTX 5090</div><div class="ptitle">Raptor Z95 Gaming PC</div><div class="pprice">$3,299</div><div class="configbtn">Configure</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#486d97,#262626)"></div><div class="cardbody"><div class="specbadge">i9-14900K</div><div class="ptitle">Vector Z95 Workstation</div><div class="pprice">$2,799</div><div class="configbtn">Configure</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#005a78,#181818)"></div><div class="cardbody"><div class="specbadge">Proton Series</div><div class="ptitle">Proton Mini Gaming PC</div><div class="pprice">$1,899</div><div class="configbtn">Configure</div></div></div>
</div>
<div class="footer"><span>© Hand-Built Gaming PCs</span><span>Warranty · Custom Builds</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #f3f3f3;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #f3f3f3;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.35; margin: 0; color: #f3f3f3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #a0a0a0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #334fb4; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #242833; color: #f3f3f3;
border: 1px solid #334fb4; border-radius: 9999px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #242833; color: #f3f3f3;
border: 1px solid #4a4a4a; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a0a0a0; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #334fb4; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#dedede; box-sizing:border-box;
font-family:'Lato','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#121212; border-bottom:1px solid #3a3a3a; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { color:#f3f3f3; font-size:20px; font-weight:700; margin:0; letter-spacing:0.3px; }
.navlinks { display:flex; gap:22px; align-items:center; }
.navlinks span { font-size:12px; color:#a0a0a0; font-weight:400; }
.searchpill { background:#242833; border-radius:999px; padding:8px 18px; font-size:11px; color:#a0a0a0; }
.hero { height:250px; display:flex; align-items:center; padding:0 40px; gap:36px; background:radial-gradient(ellipse at 70% 50%, #242833, #121212 70%); }
.reel { width:150px; height:150px; border-radius:50%; position:relative; background:conic-gradient(#334fb4 0deg 90deg, #1e1e1e 90deg 180deg, #334fb4 180deg 270deg, #1e1e1e 270deg 360deg); }
.reel::after { content:''; position:absolute; inset:36px; border-radius:50%; background:#121212; border:2px solid #c9a84c; }
.heroTxt h1 { color:#f3f3f3; font-size:30px; font-weight:700; margin:0 0 12px; line-height:1.25; }
.heroTxt p { font-size:13px; color:#dedede; margin:0 0 18px; max-width:340px; line-height:1.6; }
.heroTxt .cta { display:inline-block; background:#334fb4; color:#fff; font-weight:700; font-size:13px; padding:12px 28px; border-radius:999px; }
.section-label { padding:16px 40px 10px; font-size:14px; font-weight:700; color:#f3f3f3; }
.grid { display:flex; gap:14px; padding:0 40px; }
.card { flex:1; background:#1e1e1e; border-radius:8px; padding:12px; }
.card .art { height:92px; border-radius:6px; margin-bottom:10px; position:relative; }
.a1 { background:linear-gradient(160deg,#334fb4,#242833); } .a2 { background:linear-gradient(160deg,#c9a84c,#242833); }
.a3 { background:linear-gradient(160deg,#242833,#121212); } .a4 { background:linear-gradient(160deg,#5a72c4,#334fb4); }
.card .badge { position:absolute; top:14px; left:14px; background:#c9a84c; color:#1e1e1e; font-size:8px; font-weight:700; padding:3px 8px; border-radius:3px; }
.card h3 { color:#f3f3f3; font-size:12px; font-weight:700; margin:0 0 4px; }
.card p { font-size:10px; color:#a0a0a0; margin:0 0 8px; }
.card .price { font-size:13px; font-weight:700; color:#c9a84c; }
footer { height:56px; margin-top:14px; border-top:1px solid #3a3a3a; display:flex; align-items:center; gap:26px; padding:0 40px; }
footer span { font-size:10px; color:#a0a0a0; }
</style></head>
<body>
<nav>
<p class="brand">Flicker Alley</p>
<div class="navlinks"><span>Silent Era</span><span>Restorations</span><span>Box Sets</span><div class="searchpill">🔍 Search the archive</div></div>
</nav>
<div class="hero">
<div class="reel"></div>
<div class="heroTxt">
<h1>Film history,<br>restored frame by frame.</h1>
<p>Rare and obscure titles brought back to a new generation — the projection surface for the archive.</p>
<span class="cta">Explore the Archive</span>
</div>
</div>
<div class="section-label">Newly Restored</div>
<div class="grid">
<div class="card"><div class="art a1"></div><span class="badge">RESTORED</span><h3>The Silver Reel</h3><p>1927 · Blu-ray</p><div class="price">$34.99</div></div>
<div class="card"><div class="art a2"></div><h3>Nightframe Collection</h3><p>Box Set · 4 Discs</p><div class="price">$89.99</div></div>
<div class="card"><div class="art a3"></div><span class="badge">NEW</span><h3>Echoes of Avalon</h3><p>1932 · DVD</p><div class="price">$24.99</div></div>
<div class="card"><div class="art a4"></div><h3>The Lantern Cycle</h3><p>1919 · Blu-ray</p><div class="price">$29.99</div></div>
</div>
<footer>
<span>RESTORATION PROCESS</span><span>PRE-ORDER UPCOMING TITLES</span><span>LICENSING & ARCHIVE ACCESS</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f63440; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #f63440;
border: 1px solid #f63440; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fedfe0; color: #f63440;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1B1B1B; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#fff; padding:22px 16px; position:relative; }
.addrrow { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
.addr .l1 { font-size:11px; font-weight:600; color:#707070; }
.addr .l2 { font-size:15px; font-weight:700; }
.bagbtn { width:34px; height:34px; border-radius:50%; background:#262626; color:#fff; display:flex;
align-items:center; justify-content:center; font-size:14px; position:relative; }
.bagbtn .badge { position:absolute; top:-4px; right:-4px; background:#F63440; color:#fff; font-size:9px; font-weight:800;
border-radius:50%; width:16px; height:16px; display:flex; align-items:center; justify-content:center; }
.search { height:44px; background:#F6F6F4; border-radius:12px; display:flex; align-items:center; padding:0 12px;
font-size:13px; color:#707070; margin-bottom:12px; }
.chiprow { display:flex; gap:8px; margin-bottom:14px; overflow:hidden; }
.chiprow span { background:#F63440; color:#fff; border-radius:999px; padding:7px 14px; font-size:12px; font-weight:500; white-space:nowrap; }
.chiprow span.i { background:#F6F6F4; color:#707070; }
.rcard { border-radius:14px; overflow:hidden; margin-bottom:16px; }
.photo { height:130px; border-radius:14px; position:relative; background:linear-gradient(135deg,#f4a742,#c9601f); }
.perks { position:absolute; top:8px; left:8px; background:#FFB81C; color:#1A1206; font-size:10px; font-weight:700;
text-transform:uppercase; padding:3px 8px; border-radius:6px; }
.heart { position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%;
background:rgba(0,0,0,0.45); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; }
.r1 { display:flex; justify-content:space-between; margin-top:8px; }
.rname { font-size:16px; font-weight:700; }
.rating { font-size:13px; font-weight:600; color:#18A957; }
.rmeta { font-size:13px; color:#707070; margin-top:2px; }
.rdeal { font-size:12px; font-weight:700; color:#FF8000; margin-top:2px; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:52px; background:#fff; border-top:0.5px solid #E6E6E6;
display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:#888; text-align:center; }
.tab.on { color:#F63440; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:900; letter-spacing:-0.3px; margin:0; }
.brand span { color:#F63440; }
.tag { font-size:14px; color:#707070; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:14px; border:1px solid #E6E6E6; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#707070; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:900; }
.typeblock .t2 { font-size:13px; color:#707070; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:700; padding:6px 12px; border-radius:999px;
background:#F6F6F4; border:1px solid #E6E6E6; color:#707070; }
.footer { margin-top:auto; border-top:1px solid #E6E6E6; padding-top:16px; font-size:11px; color:#A0A0A0; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="addrrow"><div class="addr"><div class="l1">DELIVER TO</div><div class="l2">123 Main St ⌄</div></div><div class="bagbtn">🛍<span class="badge">2</span></div></div>
<div class="search">🔍 Search Grubhub</div>
<div class="chiprow"><span>All</span><span class="i">Pizza</span><span class="i">Sushi</span><span class="i">Burgers</span></div>
<div class="rcard">
<div class="photo"><span class="perks">Grubhub+ Perks</span><span class="heart">♡</span></div>
<div class="r1"><span class="rname">Marzano's Kitchen</span><span class="rating">★ 4.6</span></div>
<div class="rmeta">Italian · 20–30 min · $0 delivery fee</div>
<div class="rdeal">Free delivery with Grubhub+</div>
</div>
<div class="tabbar"><div class="tab on">Delivery</div><div class="tab">Search</div><div class="tab">Orders</div><div class="tab">Saved</div><div class="tab">Account</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">Grubhub (iOS)<span>.</span></h1>
<p class="tag">An appetite-first marketplace — wide restaurant photography leads, red drives action, orange carries the deal.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#F63440"></div><small>#F63440</small></div>
<div class="sw"><div class="chip2" style="background:#FF8000"></div><small>#FF8000</small></div>
<div class="sw"><div class="chip2" style="background:#FFB81C"></div><small>#FFB81C</small></div>
<div class="sw"><div class="chip2" style="background:#00A0DF"></div><small>#00A0DF</small></div>
<div class="sw"><div class="chip2" style="background:#18A957"></div><small>#18A957</small></div>
</div>
<div class="typeblock">
<div class="t1">Marzano's Kitchen</div>
<div class="t2">Inter (Graphik sub) · numbers always bold + tabular — economics lead</div>
</div>
<div class="taglist">
<span>16:9 restaurant photo</span><span>Green rating star</span><span>Grubhub+ gold badge</span>
<span>Live tracking blue</span><span>Pill CTAs everywhere</span>
</div>
<div class="footer">Pure white canvas · Track Blue reserved for order tracking only</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; background: #008cba; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; background: #ffffff; color: #008cba;
border: 1px solid #008cba; border-radius: 8px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #b9b9b9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #990000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:56px; background:#00303f; color:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-family:'Century Gothic', Arial, sans-serif; font-size:18px; font-weight:700; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; }
.layout { display:flex; height:calc(640px - 56px); }
.media { width:320px; flex-shrink:0; background:#ebebeb; display:flex; align-items:center; justify-content:center; position:relative; }
.card { width:150px; height:210px; border-radius:4px; background:linear-gradient(160deg, #008cba, #f1da36); border:1px solid #b9b9b9; }
.badge-instock { position:absolute; top:16px; left:16px; background:#43ac6a; color:#ffffff; font-size:11px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; border-radius:4px; padding:2px 6px; }
.detail { flex:1; padding:24px 34px; display:flex; flex-direction:column; gap:12px; }
.kicker { font-size:12px; color:#888888; }
h1 { font-family:'Century Gothic', Arial, sans-serif; font-size:22px; font-weight:700; margin:0; }
.price { font-family:'Century Gothic', Arial, sans-serif; font-size:20px; font-weight:700; }
.stars { color:#f1da36; font-size:14px; }
.category-filter { display:flex; gap:8px; }
.chip { background:#ebebeb; color:#555555; font-size:13px; border-radius:8px; padding:6px 12px; border:1px solid #b9b9b9; }
.chip.active { background:#008cba; color:#ffffff; border-color:#008cba; }
.search-row { display:flex; gap:0; }
.search-input { flex:1; border:2px solid #008cba; border-radius:8px 0 0 8px; padding:8px 16px; font-size:14px; color:#888888; }
.search-btn { background:#008cba; color:#ffffff; border:none; border-radius:0 8px 8px 0; padding:0 16px; font-size:14px; font-weight:600; }
.actions { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#008cba; color:#ffffff; border:none; border-radius:8px; height:40px; font-family:'Century Gothic', Arial, sans-serif; font-size:14px; font-weight:600; }
.btn-secondary { background:#ffffff; color:#008cba; border:1px solid #008cba; border-radius:8px; height:40px; padding:0 20px; font-size:14px; font-weight:600; }
</style></head>
<body>
<div class="topbar">
<div class="brand">Coolstuffinc</div>
<div class="navlinks"><span>Singles</span><span>Sealed</span><span>Accessories</span></div>
</div>
<div class="layout">
<div class="media">
<div class="badge-instock">In Stock</div>
<div class="card"></div>
</div>
<div class="detail">
<div class="kicker">Trading Card Game</div>
<h1>Radiant Phoenix, Holo</h1>
<div class="price">$18.99</div>
<div class="stars">★★★★☆ <span style="color:#888888;font-size:13px;">218 reviews</span></div>
<div class="category-filter">
<span class="chip active">Pokémon</span>
<span class="chip">Magic</span>
<span class="chip">Yu-Gi-Oh!</span>
</div>
<div class="search-row">
<div class="search-input">Search inventory…</div>
<div class="search-btn">Search</div>
</div>
<div class="actions">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">View Details</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.27; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.05em; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; background: #ffc700; color: #3f3f3f;
border: none; border-radius: 2px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; background: #2a2a2a; color: #ffffff;
border: 1px solid #ffc700; border-radius: 2px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #1a1a1a;
border: 1px solid #d4d4d4; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.05em; background: #fff3cc; color: #7a5a00;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
background:#2a2a2a; border-bottom:3px solid #ffc700; }
.brand { font-size:16px; font-weight:700; color:#fff; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; font-weight:600; color:#fff; }
.navlinks span:first-child { color:#ffc700; }
.cart { font-size:12px; font-weight:600; color:#ffc700; }
.toolbar { display:flex; gap:10px; padding:12px 28px; background:#f5f5f5; align-items:center; }
.search { flex:1; height:32px; border:1px solid #d4d4d4; border-radius:2px; background:#fff; display:flex; align-items:center; padding:0 10px; font-size:12px; color:#767676; }
.btnq { background:#ffc700; color:#3f3f3f; font-weight:700; font-size:12px; padding:8px 16px; border-radius:2px; }
.content { display:flex; padding:14px 28px; gap:14px; }
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; flex:2; }
.card { border:1px solid #d4d4d4; padding:12px; display:flex; gap:10px; }
.thumb { width:64px; height:64px; background:linear-gradient(135deg,#3f3f3f,#1a1a1a); flex-shrink:0; position:relative; }
.thumb::after { content:''; position:absolute; left:50%; top:50%; width:22px; height:22px; border-radius:50%; border:3px solid #ffc700; transform:translate(-50%,-50%); }
.info h3 { font-size:13px; font-weight:600; margin:0 0 4px; }
.part { font-family:'Courier New',monospace; font-size:11px; font-weight:600; letter-spacing:.5px; background:#fff3cc; color:#7a5a00; padding:2px 6px; display:inline-block; margin-bottom:4px; }
.stock { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:2px 6px; color:#fff; display:inline-block; margin-left:4px; }
.stock.in { background:#27ae60; }
.stock.out { background:#c0392b; }
.price { font-size:14px; font-weight:700; margin-top:4px; }
.side { flex:1; background:#2a2a2a; padding:16px; color:#fff; }
.side h4 { font-size:13px; font-weight:700; margin:0 0 10px; color:#ffc700; text-transform:uppercase; letter-spacing:.5px; }
.specrow { display:flex; justify-content:space-between; font-size:11px; padding:6px 0; border-bottom:1px solid #3f3f3f; }
.specrow span:first-child { color:#a0a0a0; }
.strip { background:#ffc700; color:#3f3f3f; padding:14px 28px; display:flex; justify-content:space-between; align-items:center; position:absolute; bottom:0; left:0; right:0; }
.strip h4 { font-size:16px; font-weight:700; margin:0; }
.strip p { font-size:11px; margin:2px 0 0; }
.btnbig { background:#2a2a2a; color:#fff; font-weight:700; font-size:12px; padding:10px 22px; border-radius:2px; }
</style></head>
<body>
<nav>
<p class="brand">Barker Air And Hydraulics</p>
<div class="navlinks"><span>Cylinders</span><span>Valves</span><span>Fittings</span><span>Pneumatics</span></div>
<div class="cart">Quote Cart (3)</div>
</nav>
<div class="toolbar">
<div class="search">Search by part number...</div>
<div class="btnq">Search</div>
</div>
<div class="content">
<div class="grid">
<div class="card">
<div class="thumb"></div>
<div class="info">
<span class="part">HYD-2200-4B</span>
<span class="stock in">In Stock</span>
<h3>2-Stage Hydraulic Cylinder</h3>
<div class="price">$412.00</div>
</div>
</div>
<div class="card">
<div class="thumb"></div>
<div class="info">
<span class="part">PNU-0871-R</span>
<span class="stock in">In Stock</span>
<h3>Rodless Pneumatic Actuator</h3>
<div class="price">$268.50</div>
</div>
</div>
<div class="card">
<div class="thumb"></div>
<div class="info">
<span class="part">VLV-3390-K</span>
<span class="stock out">Backorder</span>
<h3>Directional Control Valve</h3>
<div class="price">$189.00</div>
</div>
</div>
<div class="card">
<div class="thumb"></div>
<div class="info">
<span class="part">FIT-1145-S</span>
<span class="stock in">In Stock</span>
<h3>Stainless Push-to-Connect Fitting</h3>
<div class="price">$14.25</div>
</div>
</div>
</div>
<div class="side">
<h4>Specifications</h4>
<div class="specrow"><span>Bore</span><span>4.00 in</span></div>
<div class="specrow"><span>Stroke</span><span>12.00 in</span></div>
<div class="specrow"><span>Max Pressure</span><span>3000 psi</span></div>
<div class="specrow"><span>Rod Diameter</span><span>1.75 in</span></div>
<div class="specrow"><span>Mount Type</span><span>Trunnion</span></div>
</div>
</div>
<div class="strip">
<div><h4>Need a Custom Configuration?</h4><p>Request an engineering quote for bulk orders.</p></div>
<div class="btnbig">Request Quote</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2f76aa; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2f76aa; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9cbcd3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fafafa; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2f76aa; color: #fafafa;
border: 1px solid #fafafa; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2f76aa; color: #f5f5f5;
border: 1px solid #4f8ab6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9cbcd3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4f8bb7; color: #fafafa;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#000000; box-sizing:border-box;
font-family:"Noto Sans TC", -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
nav { height:52px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 30px; border-bottom:1px solid #e0e0e0; }
.brand { font-size:17px; font-weight:700; }
.navlinks { display:flex; gap:16px; font-size:13px; color:#000000; }
.navlinks span.on { color:#ee5103; font-weight:700; }
.layout { display:flex; gap:18px; padding:18px 30px; }
.main { flex:2.2; }
.headline { font-size:20px; font-weight:500; line-height:1.4; letter-spacing:1px; margin:0 0 10px; }
.lead { display:flex; gap:14px; margin-bottom:14px; }
.lead .img { width:230px; height:150px; background:linear-gradient(150deg,#e2e2e2,#c7c7c7); flex-shrink:0; }
.lead .body { font-size:13px; color:#777777; line-height:1.6; }
.item { display:flex; gap:10px; padding:10px 0; border-top:1px solid #e0e0e0; }
.item .img { width:70px; height:52px; background:#e0e0e0; flex-shrink:0; }
.item .t { font-size:14px; line-height:1.4; }
.side { flex:1; display:flex; flex-direction:column; gap:10px; }
.panel { background:#ffffff; border:1px solid #e0e0e0; padding:14px; }
.panel .h { font-size:14px; font-weight:700; margin-bottom:8px; color:#2f76aa; }
.panel .row { font-size:12px; padding:6px 0; border-top:1px solid #e0e0e0; color:#000000; }
.panel .row:first-of-type { border-top:none; }
.loadmore { background:#c7c7c7; color:#ffffff; font-size:15px; padding:6px 40px; border-radius:0 0 3px 3px;
display:inline-block; margin-top:8px; }
</style></head>
<body>
<nav>
<span class="brand">UDN</span>
<div class="navlinks"><span class="on">Headlines</span><span>Politics</span><span>Business</span><span>World</span><span>Life</span></div>
</nav>
<div class="layout">
<div class="main">
<div class="lead">
<div class="img"></div>
<div class="body">
<div class="headline">Cross-agency task force launches city resilience pilot program</div>
Officials say the program will run six-month trials in three pilot districts before evaluating a full-scale rollout timeline.
</div>
</div>
<div class="item"><div class="img"></div><div class="t">New round of regional revitalization grants approved, focused on youth returning home for work</div></div>
<div class="item"><div class="img"></div><div class="t">Industry groups call for faster digital transformation support to lower barriers for small businesses</div></div>
<div class="item"><div class="img"></div><div class="t">Weather bureau issues alert for continued rainfall, urges caution in low-lying areas</div></div>
<span class="loadmore">More news</span>
</div>
<div class="side">
<div class="panel">
<div class="h">Trending</div>
<div class="row">1. City resilience pilot program enters testing phase</div>
<div class="row">2. Youth homecoming employment grants announced</div>
<div class="row">3. Continued rainfall alert issued</div>
</div>
<div class="panel">
<div class="h">Newsletter</div>
<div class="row">Daily top stories, delivered straight to your inbox.</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1565C0;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1565C0;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-size: 20px; font-weight:700; margin: 0; color: #1565C0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-size: 12px; font-weight:400; line-height:1.4; margin: 0; color: #73a3d9; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: linear-gradient(135deg, #006B3F, #004D2D); color: #ffffff;
border: none; border-radius: 999; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #FFFFFF; color: linear-gradient(135deg, #006B3F, #004D2D);
border: 1px solid linear-gradient(135deg, #006B3F, #004D2D); border-radius: 999;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #FFFFFF; color: #1565C0;
border: 1px solid #c4d8ef; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #73a3d9; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #ededed; color: linear-gradient(135deg, #006B3F, #004D2D);
border-radius: 999; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: "Nunito Sans", system-ui, sans-serif; background: #FAFAF8; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
nav { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 36px; background: #FFFFFF; }
.brand { font-size: 20px; font-weight: 800; color: #003520; margin: 0; }
.brand span { color: #C5A34D; }
.navlinks { display: flex; gap: 26px; font-size: 13px; color: #2D2D2D; font-weight: 600; opacity: 0.75; }
.cta { background: #006B3F; color: #fff; border: none; border-radius: 8px; padding: 10px 20px; font-weight: 700; font-size: 13px; }
.hero { display: flex; padding: 30px 36px 0; gap: 30px; }
.hero-copy { width: 340px; padding-top: 14px; }
.hero .kicker { font-size: 12px; font-weight: 700; color: #A6873D; text-transform: uppercase; letter-spacing: 0.05em; }
.hero-copy h1 { font-size: 34px; font-weight: 800; color: #1A1A1A; margin: 10px 0 12px; line-height: 1.15; }
.hero-copy p { font-size: 14px; color: #6B6B6B; line-height: 1.55; margin: 0 0 20px; }
.btn-green { background: #006B3F; color: #fff; border: none; border-radius: 8px; padding: 12px 22px; font-weight: 700; font-size: 13px; }
.heroimg { flex: 1; border-radius: 16px; background: linear-gradient(135deg, #E6F5EF, #F5EDDA); position: relative; overflow: hidden; }
.heroimg::before { content: ''; position: absolute; width: 160px; height: 160px; border-radius: 50%; background: rgba(0,107,63,0.14); left: 40px; top: 30px; }
.heroimg::after { content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: rgba(197,163,77,0.24); right: 50px; bottom: 26px; }
.seal { position: absolute; right: 30px; top: 26px; background: #C5A34D; color: #fff; font-size: 11px; font-weight: 800; padding: 6px 12px; border-radius: 999px; }
.tabs { display: flex; gap: 18px; padding: 26px 36px 0; }
.tab { font-size: 12px; font-weight: 700; color: #6B6B6B; padding-bottom: 8px; }
.tab.on { color: #006B3F; border-bottom: 2px solid #006B3F; }
.grid { display: flex; gap: 16px; padding: 14px 36px 0; }
.p { flex: 1; background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
.p .img { height: 90px; border-radius: 8px; margin-bottom: 10px; }
.p h4 { margin: 0 0 4px; font-size: 13px; font-weight: 800; color: #1A1A1A; }
.p .stars { font-size: 10px; color: #C5A34D; margin-bottom: 6px; }
.p .price { font-size: 15px; font-weight: 800; color: #006B3F; }
.trust { display: flex; gap: 0; margin: 22px 36px 0; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #006B3F, #004D2D); padding: 16px 20px; }
.trust div { flex: 1; color: #fff; }
.trust b { display: block; font-size: 16px; font-weight: 800; }
.trust span { font-size: 11px; opacity: 0.85; }
</style>
<nav>
<p class="brand">Grupo Boticário</p>
<div class="navlinks"><span>Fragrance</span><span>Skincare</span><span>Makeup</span><span>Gifts</span></div>
<button class="cta">Shop now</button>
</nav>
<div class="hero">
<div class="hero-copy">
<span class="kicker">Botanical heritage</span>
<h1>Beauty grown like an ecosystem.</h1>
<p>Every product connects to the next — premium fragrance and skincare rooted in Brazilian botany.</p>
<button class="btn-green">Discover the collection</button>
</div>
<div class="heroimg"><span class="seal">Premium seal</span></div>
</div>
<div class="tabs">
<span class="tab on">Bestsellers</span>
<span class="tab">New arrivals</span>
<span class="tab">Gift sets</span>
</div>
<div class="grid">
<div class="p"><div class="img" style="background:linear-gradient(135deg,#D4B86E,#C5A34D)"></div><h4>Essence Parfum</h4><div class="stars">★★★★★</div><div class="price">$68.00</div></div>
<div class="p"><div class="img" style="background:linear-gradient(135deg,#1A8A5C,#006B3F)"></div><h4>Botanical Serum</h4><div class="stars">★★★★★</div><div class="price">$42.00</div></div>
<div class="p"><div class="img" style="background:linear-gradient(135deg,#E6F5EF,#A6873D)"></div><h4>Gift Set Trio</h4><div class="stars">★★★★☆</div><div class="price">$95.00</div></div>
<div class="p"><div class="img" style="background:linear-gradient(135deg,#D4B86E,#7A632D)"></div><h4>Body Cream</h4><div class="stars">★★★★★</div><div class="price">$29.00</div></div>
</div>
<div class="trust">
<div><b>4,000+ stores</b><span>Across 1,600 Brazilian cities</span></div>
<div><b>40+ countries</b><span>A truly global beauty ecosystem</span></div>
<div><b>6 brands</b><span>United by one design language</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.18; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.14; letter-spacing: 0.4px; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 4px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.14; letter-spacing: 0.4px; background: transparent; color: #1a1a1a;
border: 1px solid #b8964e; border-radius: 4px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.27; letter-spacing: 1.2px; background: #b8964e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:'Helvetica Neue',Helvetica,Arial,-apple-system,system-ui,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:14px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.navlinks { display:flex; gap:32px; font-size:12px; color:#3d3d3d; }
.navlinks span.on { color:#1a1a1a; border-bottom:1px solid #b8964e; padding-bottom:4px; }
.cart { font-size:12px; color:#3d3d3d; }
.wrap { display:flex; height:512px; padding:0 40px; gap:56px; align-items:center; }
.photo { width:300px; height:100%; display:flex; align-items:center; justify-content:center; position:relative; }
.cylinder { width:70px; height:220px; border-radius:14px; background:linear-gradient(100deg,#e8e8e8 0%,#c9a96e 8%,#f5f5f5 20%,#c9a96e 30%,#e8e8e8 55%,#2c2c2c 100%);
box-shadow:0 30px 60px rgba(0,0,0,.12); }
.badge { position:absolute; top:10px; left:10px; font-size:10px; color:#b8964e; border:1px solid #b8964e; padding:4px 10px; border-radius:4px;
text-transform:uppercase; letter-spacing:.08em; }
.info { flex:1; display:flex; flex-direction:column; gap:16px; }
.info .cat { font-size:12px; color:#7a7a7a; letter-spacing:.04em; }
.info h1 { font-size:32px; font-weight:500; margin:0; letter-spacing:-.3px; }
.price { font-size:19px; font-weight:500; }
.color-row { display:flex; gap:10px; }
.colorchip { width:26px; height:26px; border-radius:8px; }
.cc1{background:#2c2c2c}.cc2{background:#c9a96e}.cc3{background:#e8e8e8; border:1px solid #ddd}
.desc { font-size:14px; color:#3d3d3d; line-height:1.65; max-width:420px; }
.buy-row { display:flex; gap:12px; margin-top:auto; }
.btn-buy { flex:1; background:#b8964e; color:#ffffff; border:none; border-radius:4px; padding:15px; font-size:13px; letter-spacing:.04em; }
.btn-wish { border:1px solid #1a1a1a; border-radius:4px; padding:15px 22px; font-size:13px; }
footer { height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; font-size:11px; color:#7a7a7a; border-top:1px solid #e5e5e5; }
</style></head>
<body>
<nav>
<p class="brand">Aarke Water FI 2</p>
<div class="navlinks"><span>Carbonators</span><span class="on">Water fi 2</span><span>Accessories</span><span>About</span></div>
<span class="cart">Bag</span>
</nav>
<div class="wrap">
<div class="photo"><span class="badge">New</span><div class="cylinder"></div></div>
<div class="info">
<span class="cat">Sparkling Water Maker</span>
<h1>Water fi 2</h1>
<span class="price">$249.00</span>
<div class="color-row">
<div class="colorchip cc1"></div><div class="colorchip cc2"></div><div class="colorchip cc3"></div>
</div>
<p class="desc">Precision-milled from a single piece of stainless steel, with a brushed brass carbonation button — the object is the interface. No plastic, no compromise.</p>
<div class="buy-row">
<button class="btn-buy">Add to Cart</button>
<button class="btn-wish">♡</button>
</div>
</div>
</div>
<footer><span>© Aarke Water FI 2</span><span>Cylinder Exchange · Warranty · Shipping</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #e05525; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #1a1a1a;
border: 1px solid #e05525; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #e0e0e0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e05525; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Ergohuman — Home</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#333333;
font-family:'Poppins',sans-serif;
}
*{box-sizing:border-box;}
.page{width:960px;height:640px;display:flex;flex-direction:column;}
header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:19px;font-weight:700;color:#1a1a1a;}
.logo span{color:#e05525;}
nav{display:flex;gap:22px;}
nav a{font-size:12px;font-weight:600;color:#333333;}
.nav-cta{background:#e05525;color:#fff;padding:8px 18px;border-radius:4px;font-size:12px;font-weight:600;}
.hero{display:flex;padding:0;}
.hero-visual{flex:1.2;background:#f7f7f7;position:relative;display:flex;align-items:center;justify-content:center;}
.chair{width:170px;height:220px;position:relative;}
.chair .back{position:absolute;top:0;left:35px;width:100px;height:130px;border-radius:40px 40px 16px 16px;background:linear-gradient(160deg,#e8e8e8,#d0d0d0);border:1px solid #ccc;}
.chair .back::after{content:'';position:absolute;inset:14px;border:1px solid #bbb;border-radius:30px 30px 12px 12px;}
.chair .seat{position:absolute;top:126px;left:20px;width:130px;height:34px;border-radius:14px;background:linear-gradient(160deg,#2c2c2c,#1a1a1a);}
.chair .base{position:absolute;bottom:0;left:60px;width:6px;height:56px;background:#999;}
.chair .stars{position:absolute;bottom:0;left:5px;width:160px;height:8px;border-radius:50%;background:linear-gradient(90deg,transparent,#bbb,transparent);}
.chair .accent{position:absolute;top:60px;left:35px;width:100px;height:6px;background:#e05525;border-radius:3px;}
.hero-copy{flex:1;padding:36px 30px;}
.hero-copy .kicker{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#e05525;margin-bottom:10px;}
.hero-copy h1{font-size:32px;font-weight:700;color:#1a1a1a;margin:0 0 12px;line-height:1.2;letter-spacing:-0.3px;}
.hero-copy p{font-size:13px;color:#666666;max-width:320px;margin:0 0 18px;line-height:1.6;}
.hero-cta{display:inline-block;background:#e05525;color:#fff;padding:11px 24px;border-radius:4px;font-size:12px;font-weight:600;}
main{flex:1;padding:18px 30px 0;border-top:1px solid #e0e0e0;}
.configurator{display:flex;gap:14px;margin-bottom:16px;padding-top:14px;}
.swatch-group{flex:1;}
.swatch-group h5{font-size:11px;color:#1a1a1a;margin:0 0 8px;font-weight:600;}
.swatches{display:flex;gap:8px;}
.swatches i{width:22px;height:22px;border-radius:50%;display:inline-block;border:2px solid #fff;box-shadow:0 0 0 1px #e0e0e0;}
.row-head{font-size:16px;font-weight:700;color:#1a1a1a;margin:0 0 12px;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.card{border:1px solid #e0e0e0;border-radius:6px;overflow:hidden;}
.thumb{height:74px;background:#f7f7f7;}
.card .info{padding:10px 12px;}
.card h4{font-size:13px;margin:0 0 4px;color:#1a1a1a;font-weight:600;}
.card .price{font-size:14px;font-weight:700;color:#e05525;}
footer{border-top:1px solid #e0e0e0;padding:12px 30px;display:flex;justify-content:space-between;margin-top:14px;}
footer span{font-size:10px;color:#666666;}
</style>
<div class="page">
<header>
<div class="logo">Ergohuman<span>.</span></div>
<nav><a>Plus Series</a><a>Pro Series</a><a>Fit Series</a><a>Accessories</a></nav>
<div class="nav-cta">Configure Chair</div>
</header>
<div class="hero">
<div class="hero-visual"><div class="chair"><div class="back"></div><div class="accent"></div><div class="seat"></div><div class="base"></div><div class="stars"></div></div></div>
<div class="hero-copy">
<div class="kicker">Engineered Ergonomics</div>
<h1>Built for the joints that hold up your workday.</h1>
<p>Synchro-tilt mechanisms, adjustable lumbar geometry, and mesh tension tuned per body weight.</p>
<div class="hero-cta">Build Your Chair</div>
</div>
</div>
<main>
<div class="configurator">
<div class="swatch-group">
<h5>Mesh Colour</h5>
<div class="swatches"><i style="background:#1a1a1a"></i><i style="background:#666"></i><i style="background:#e05525"></i><i style="background:#f7f7f7;box-shadow:0 0 0 1px #ccc"></i></div>
</div>
<div class="swatch-group">
<h5>Base Finish</h5>
<div class="swatches"><i style="background:#c0c0c0"></i><i style="background:#2b2b2b"></i></div>
</div>
</div>
<div class="row-head">Ergohuman Chair Series</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="info"><h4>Ergohuman Plus</h4><div class="price">$999.00</div></div></div>
<div class="card"><div class="thumb"></div><div class="info"><h4>Ergohuman Pro</h4><div class="price">$1,199.00</div></div></div>
<div class="card"><div class="thumb"></div><div class="info"><h4>Ergohuman Fit</h4><div class="price">$849.00</div></div></div>
</div>
</main>
<footer>
<span>© Ergohuman — Task Seating Engineering</span>
<span>Warranty · Assembly Guides · Trade Program</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #108910; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #108910; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8ec48e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #003d29; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #108910; color: #003d29;
border: 1px solid #003d29; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #108910; color: #f5f5f5;
border: 1px solid #359a35; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8ec48e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0d7d14; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#242529; box-sizing:border-box;
font-family:"Instacart Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
body { display:flex; flex-direction:column; }
nav.top { flex:0 0 60px; height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#ffffff; }
.logo { font-size:20px; font-weight:600; color:#108910; margin:0; letter-spacing:-0.2px; }
.navactions { display:flex; align-items:center; gap:12px; }
.btn-outline { background:#ffffff; color:#242529; border:1px solid #C7C8CD; border-radius:20px;
height:40px; padding:0 16px; font-size:16px; font-weight:400; white-space:nowrap; }
.btn-green { background:#108910; color:#ffffff; border:none; border-radius:20px;
height:40px; padding:0 16px; font-size:16px; font-weight:400; white-space:nowrap; }
.hero { flex:0 0 auto; padding:16px 40px 14px; display:flex; flex-direction:column; align-items:center;
text-align:center; gap:12px; }
.hero h1 { margin:0; font-size:26px; font-weight:600; line-height:1.25; color:#242529; max-width:620px; }
.searchbar { width:100%; max-width:600px; height:56px; border-radius:28px; border:1px solid #C7C8CD;
background:#ffffff; box-shadow: rgba(0,0,0,0.05) 0px 2px 4px 0px inset; display:flex; align-items:center;
padding:0 6px 0 24px; }
.searchbar span { flex:1; font-size:15px; color:#343538; }
.searchbar .go { width:44px; height:44px; border-radius:999px; background:#108910; border:none; position:relative; flex:0 0 44px; }
.searchbar .go::before { content:''; position:absolute; width:11px; height:11px; border:1.6px solid #fff; border-radius:50%; top:12px; left:12px; }
.searchbar .go::after { content:''; position:absolute; width:6px; height:1.6px; background:#fff; top:23px; left:22px; transform:rotate(45deg); }
.ctarow { display:flex; flex-direction:column; align-items:center; gap:4px; }
.btn-hero { background:#108910; color:#ffffff; border:none; border-radius:28px; height:52px;
padding:0 24px; font-size:16px; font-weight:400; }
.note { font-size:12px; color:#7b7b78; }
.storessec { flex:0 0 auto; padding:10px 40px 0; }
.storessec h2 { margin:0 0 10px; font-size:20px; font-weight:700; color:#242529; line-height:1.17; }
.storerow { display:flex; gap:14px; }
.storecard { flex:1; background:#F6F7F8; border-radius:8px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.storeicon { width:36px; height:36px; border-radius:8px; color:#ffffff; font-size:15px; font-weight:700;
display:flex; align-items:center; justify-content:center; }
.storecard .name { font-size:15px; font-weight:600; color:#242529; margin:0; }
.storecard .eta { font-size:13px; color:#343538; margin:0; }
.chiprow { flex:0 0 auto; padding:12px 40px 0; display:flex; gap:8px; }
.chip { border-radius:999px; height:32px; padding:0 16px; font-size:14px; font-weight:600;
display:flex; align-items:center; white-space:nowrap; }
.chip.active { background:#242529; color:#ffffff; }
.chip.inactive { background:#E8E9EB; color:#242529; }
.productsec { flex:1; padding:12px 40px 0; }
.productrow { display:flex; gap:12px; height:100%; align-items:flex-start; }
.productcard { flex:1; background:#F6F7F8; border-radius:8px; padding:10px; display:flex; align-items:center; gap:10px; }
.pthumb { width:52px; height:52px; border-radius:8px; flex:0 0 52px; }
.pinfo { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.pinfo .pname { font-size:14px; font-weight:600; color:#242529; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pinfo .pprice { font-size:13px; color:#343538; margin:0; }
.addbtn { background:#108910; color:#ffffff; border:none; border-radius:20px; height:32px;
padding:0 14px; font-size:13px; font-weight:400; flex:0 0 auto; }
footer { flex:0 0 34px; height:34px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; font-size:12px; color:#7b7b78; }
</style></head>
<body>
<nav class="top">
<p class="logo">Instacart</p>
<div class="navactions">
<button class="btn-outline">Log in</button>
<button class="btn-green">Sign up</button>
</div>
</nav>
<section class="hero">
<h1>Order groceries for delivery or pickup today</h1>
<div class="searchbar"><span>Enter your delivery address</span><button class="go" aria-hidden="true"></button></div>
<div class="ctarow">
<button class="btn-hero">Sign up to get $0 delivery fee*</button>
<span class="note">*On your first order over $35</span>
</div>
</section>
<section class="storessec">
<h2>Stores to help you save</h2>
<div class="storerow">
<div class="storecard"><div class="storeicon" style="background:#108910;">F</div><p class="name">Fresh Market</p><p class="eta">Delivery by 5:40pm</p></div>
<div class="storecard"><div class="storeicon" style="background:#003D29;">C</div><p class="name">Corner Grocer</p><p class="eta">Delivery by 6:10pm</p></div>
<div class="storecard"><div class="storeicon" style="background:#1E6F30;">S</div><p class="name">Sunrise Foods</p><p class="eta">Delivery by 5:55pm</p></div>
<div class="storecard"><div class="storeicon" style="background:#242529;">V</div><p class="name">Value Grocery</p><p class="eta">Delivery by 6:30pm</p></div>
</div>
</section>
<div class="chiprow">
<span class="chip active">All</span>
<span class="chip inactive">EBT</span>
<span class="chip inactive">Fastest</span>
<span class="chip inactive">Offers</span>
<span class="chip inactive">Grocery</span>
</div>
<section class="productsec">
<div class="productrow">
<div class="productcard"><div class="pthumb" style="background:#108910;"></div><div class="pinfo"><p class="pname">Organic Avocados</p><p class="pprice">$1.99 each</p></div><button class="addbtn">Add</button></div>
<div class="productcard"><div class="pthumb" style="background:#E8E9EB;"></div><div class="pinfo"><p class="pname">Whole Milk, 1 gal</p><p class="pprice">$3.49</p></div><button class="addbtn">Add</button></div>
<div class="productcard"><div class="pthumb" style="background:#1E6F30;"></div><div class="pinfo"><p class="pname">Baby Spinach, 5oz</p><p class="pprice">$2.79</p></div><button class="addbtn">Add</button></div>
</div>
</section>
<footer>
<span>© Instacart</span>
<span>Instacart · Delivery · Pickup · EBT</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f5f2; color: #232325;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f5f2; color: #232325;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.33; margin: 0; color: #232325; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #93919b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: 0.6px; background: #06386b; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: 0.6px; background: transparent; color: #06386b;
border: 1px solid #06386b; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.625; background: #ffffff; color: #232325;
border: 1px solid #c4c0bf; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #93919b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.8px; background: #06386b; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#f9f5f2;color:#4b4b4b;font-family:'Lato',Arial,sans-serif;}
*{box-sizing:border-box;}
.topbar{background:#06386b;color:#dfe8f1;height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:10px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#ffffff;border-bottom:1px solid #d8d8d8;}
.logo{font-family:'DM Serif Display',Georgia,serif;font-size:22px;color:#06386b;}
.navlinks{display:flex;gap:18px;font-size:11px;font-weight:700;color:#232325;text-transform:uppercase;letter-spacing:.3px;}
.subnav{display:flex;gap:0;background:#247390;}
.subnav span{color:#e2eef2;font-size:10px;padding:7px 14px;border-right:1px solid rgba(255,255,255,.2);}
.hero{display:flex;padding:22px 24px;gap:26px;align-items:center;}
.hero-txt{width:400px;}
.hero-txt h1{font-family:'DM Serif Display',Georgia,serif;font-size:32px;font-weight:400;color:#06386b;margin:0 0 10px;line-height:1.15;}
.hero-txt p{font-size:13px;color:#4b4b4b;margin:0 0 14px;}
.cta{background:#06386b;color:#fff;padding:10px 22px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;display:inline-block;}
.cta2{background:transparent;border:1px solid #06386b;color:#06386b;padding:10px 22px;font-size:11px;font-weight:700;text-transform:uppercase;margin-left:8px;display:inline-block;}
.spec-panel{flex:1;height:200px;background:#232325;color:#fff;padding:16px;position:relative;}
.spec-panel h4{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#e09004;margin:0 0 10px;}
.spec-row{display:flex;justify-content:space-between;font-size:11px;padding:5px 0;border-bottom:1px solid #3a3a3d;color:#cfcfcf;}
.badge-red{position:absolute;top:14px;right:14px;background:#b80e02;color:#fff;font-size:9px;font-weight:700;padding:4px 8px;text-transform:uppercase;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0 24px;border-top:1px solid #d8d8d8;}
.card{background:#ffffff;padding:12px;border-right:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8;}
.box{height:80px;margin-bottom:8px;}
.b1{background:linear-gradient(135deg,#06386b,#0a4a8a);}
.b2{background:linear-gradient(135deg,#247390,#2f8ba8);}
.b3{background:linear-gradient(135deg,#e09004,#c47c00);}
.b4{background:linear-gradient(135deg,#232325,#403c40);}
.name{font-family:'DM Serif Display',Georgia,serif;font-size:13px;color:#232325;margin:0 0 3px;}
.spec{font-size:10px;color:#93919b;margin:0 0 5px;}
.price{font-size:12px;font-weight:700;color:#06386b;}
</style>
<div class="topbar"><span>Garden Light Led · Commercial & Landscape Lighting Specifications</span><span>CSI Spec Sheets | Dealer Login</span></div>
<div class="nav">
<div class="logo">Garden Light Led</div>
<div class="navlinks"><span>Path Lights</span><span>Well Lights</span><span>Bollards</span><span>Transformers</span><span>Controls</span></div>
</div>
<div class="subnav"><span>Landscape Architects</span><span>Electrical Contractors</span><span>Commercial Installers</span><span>Resources</span></div>
<div class="hero">
<div class="hero-txt">
<h1>Photometric-grade lighting for the built landscape</h1>
<p>Specification-first fixtures for architects and contractors — full CSI data, dealer pricing, and CCT selection on every SKU.</p>
<a class="cta">Request Spec Sheet</a><a class="cta2">Find a Dealer</a>
</div>
<div class="spec-panel">
<div class="badge-red">Stock Alert</div>
<h4>LED Well Light — WL-412</h4>
<div class="spec-row"><span>Lumens</span><span>820 lm</span></div>
<div class="spec-row"><span>CCT</span><span>3000K / 4000K</span></div>
<div class="spec-row"><span>Beam Angle</span><span>25° Narrow Flood</span></div>
<div class="spec-row"><span>IP Rating</span><span>IP67</span></div>
</div>
</div>
<div class="grid">
<div class="card"><div class="box b1"></div><div class="name">Bronze Path Light PL-220</div><div class="spec">700 lm · 3000K</div><div class="price">$142.00</div></div>
<div class="card"><div class="box b2"></div><div class="name">Well Light WL-412</div><div class="spec">820 lm · IP67</div><div class="price">$189.00</div></div>
<div class="card"><div class="box b3"></div><div class="name">Bollard Fixture BL-900</div><div class="spec">1200 lm · 4000K</div><div class="price">$268.00</div></div>
<div class="card"><div class="box b4"></div><div class="name">300W Transformer T-300</div><div class="spec">Multi-Tap · Stainless</div><div class="price">$412.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b0e11; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b0e11; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c8d8e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2b3139; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0e11; color: #ffffff;
border: 1px solid #2b3139; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b0e11; color: #f5f5f5;
border: 1px solid #303335; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8d8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #101417; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0B0E11; color:#EAECEF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-variant-numeric:tabular-nums; }
nav { height:48px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #2B3139; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; font-weight:600; color:#848E9C; }
.navlinks span.on { color:#EAECEF; border-bottom:2px solid #F0B90B; padding-bottom:14px; }
.btn-y { background:#F0B90B; color:#0B0E11; border:none; border-radius:6px; padding:8px 18px;
font-weight:700; font-size:12px; }
.toprow { display:flex; padding:22px 32px 16px; gap:36px; }
.balancecol { width:290px; }
.balancecol .lbl { font-size:11px; color:#848E9C; margin-bottom:4px; }
.balancecol .num { font-size:26px; font-weight:600; letter-spacing:-0.4px; }
.balancecol .num small { font-size:13px; color:#848E9C; font-weight:600; margin-left:4px; }
.pnl { font-size:12px; color:#0ECB81; margin-top:4px; font-weight:600; }
.actions { display:flex; gap:8px; margin-top:14px; }
.a-btn { flex:1; text-align:center; padding:8px 0; border-radius:6px; font-size:11px; font-weight:700; }
.a-y { background:#F0B90B; color:#0B0E11; }
.a-g { background:#2B3139; color:#EAECEF; }
.marketscard { flex:1; background:#181A20; border-radius:8px; padding:12px 0; }
.mrow { display:flex; align-items:center; padding:8px 16px; border-bottom:1px solid #2B3139; }
.mrow:last-child { border-bottom:none; }
.coin { width:22px; height:22px; border-radius:50%; margin-right:10px; flex-shrink:0; }
.c-btc { background:#F7931A; } .c-eth { background:#627EEA; } .c-bnb { background:#F0B90B; }
.mpair { flex:1; }
.mpair b { font-size:13px; font-weight:600; display:block; }
.mpair small { font-size:10px; color:#5E6673; }
.mprice { text-align:right; margin-right:10px; }
.mprice b { font-size:13px; font-weight:600; display:block; }
.mprice small { font-size:10px; color:#848E9C; }
.pill { min-width:58px; text-align:center; padding:4px 0; border-radius:4px; font-size:11px; font-weight:600; color:#fff; }
.p-up { background:#0ECB81; } .p-down { background:#F6465D; }
.panels { display:flex; gap:20px; padding:6px 32px 0; }
.chartpanel { flex:1.6; background:#181A20; border-radius:8px; padding:14px 16px; }
.chpanel-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.chpanel-head b { font-size:13px; font-weight:600; }
.chpanel-head .px { font-size:15px; font-weight:600; color:#0ECB81; }
.intervals { display:flex; gap:10px; margin-bottom:10px; }
.intervals span { font-size:11px; color:#848E9C; font-weight:600; }
.intervals span.on { color:#F0B90B; background:rgba(240,185,11,0.12); padding:2px 7px; border-radius:4px; }
.candles { display:flex; align-items:flex-end; gap:5px; height:96px; }
.candles i { flex:1; border-radius:1px; }
.obookpanel { flex:1; background:#181A20; border-radius:8px; padding:14px 16px; }
.obookpanel b.title { font-size:13px; font-weight:600; display:block; margin-bottom:8px; }
.orow { position:relative; display:flex; justify-content:space-between; font-size:11px; padding:2px 0; }
.obar { position:absolute; top:0; right:0; height:100%; z-index:0; }
.obar.ask { background:rgba(246,70,93,0.14); } .obar.bid { background:rgba(14,203,129,0.14); }
.oval { position:relative; z-index:1; } .ask-px { color:#F6465D; } .bid-px { color:#0ECB81; }
.spread { display:flex; justify-content:center; padding:5px 0; font-size:12px; font-weight:600; color:#0ECB81; border-top:1px solid #2B3139; border-bottom:1px solid #2B3139; margin:4px 0; }
footer { position:absolute; bottom:0; left:0; right:0; height:44px; border-top:1px solid #2B3139;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:10px; color:#5E6673; }
</style></head>
<body>
<nav>
<p class="brand">Binance (iOS)</p>
<div class="navlinks"><span class="on">Markets</span><span>Trade</span><span>Futures</span><span>Wallets</span></div>
<button class="btn-y">Deposit</button>
</nav>
<div class="toprow">
<div class="balancecol">
<div class="lbl">Est. Total Value</div>
<div class="num mono">12,840.57 <small>USDT</small></div>
<div class="pnl mono">+$214.86 (+1.70%)</div>
<div class="actions">
<div class="a-btn a-y">Deposit</div>
<div class="a-btn a-g">Withdraw</div>
<div class="a-btn a-g">Convert</div>
</div>
</div>
<div class="marketscard">
<div class="mrow">
<div class="coin c-btc"></div>
<div class="mpair"><b>BTC</b><small>/USDT · Vol 1.42B</small></div>
<div class="mprice"><b class="mono">67,284.10</b><small class="mono">$67,284.10</small></div>
<div class="pill p-up mono">+2.34%</div>
</div>
<div class="mrow">
<div class="coin c-eth"></div>
<div class="mpair"><b>ETH</b><small>/USDT · Vol 812.0M</small></div>
<div class="mprice"><b class="mono">3,412.88</b><small class="mono">$3,412.88</small></div>
<div class="pill p-down mono">-0.92%</div>
</div>
<div class="mrow">
<div class="coin c-bnb"></div>
<div class="mpair"><b>BNB</b><small>/USDT · Vol 205.3M</small></div>
<div class="mprice"><b class="mono">592.14</b><small class="mono">$592.14</small></div>
<div class="pill p-up mono">+1.08%</div>
</div>
</div>
</div>
<div class="panels">
<div class="chartpanel">
<div class="chpanel-head"><b>BTC/USDT</b><span class="px mono">67,284.10</span></div>
<div class="intervals"><span>1m</span><span>5m</span><span class="on">1H</span><span>4H</span><span>1D</span><span>1W</span></div>
<div class="candles">
<i style="height:38%;background:#0ECB81"></i><i style="height:52%;background:#0ECB81"></i>
<i style="height:30%;background:#F6465D"></i><i style="height:64%;background:#0ECB81"></i>
<i style="height:44%;background:#F6465D"></i><i style="height:70%;background:#0ECB81"></i>
<i style="height:58%;background:#0ECB81"></i><i style="height:35%;background:#F6465D"></i>
<i style="height:80%;background:#0ECB81"></i><i style="height:47%;background:#F6465D"></i>
<i style="height:66%;background:#0ECB81"></i><i style="height:41%;background:#F6465D"></i>
<i style="height:74%;background:#0ECB81"></i><i style="height:55%;background:#0ECB81"></i>
<i style="height:29%;background:#F6465D"></i><i style="height:60%;background:#0ECB81"></i>
</div>
</div>
<div class="obookpanel">
<b class="title">Order Book</b>
<div class="orow"><div class="obar ask" style="width:70%"></div><span class="oval ask-px mono">67,301.2</span><span class="oval mono">0.842</span></div>
<div class="orow"><div class="obar ask" style="width:52%"></div><span class="oval ask-px mono">67,298.4</span><span class="oval mono">0.510</span></div>
<div class="orow"><div class="obar ask" style="width:30%"></div><span class="oval ask-px mono">67,290.0</span><span class="oval mono">0.212</span></div>
<div class="spread mono">67,284.10 ↓</div>
<div class="orow"><div class="obar bid" style="width:44%"></div><span class="oval bid-px mono">67,280.6</span><span class="oval mono">0.388</span></div>
<div class="orow"><div class="obar bid" style="width:64%"></div><span class="oval bid-px mono">67,276.1</span><span class="oval mono">0.601</span></div>
<div class="orow"><div class="obar bid" style="width:38%"></div><span class="oval bid-px mono">67,270.9</span><span class="oval mono">0.294</span></div>
</div>
</div>
<footer>
<span>© Binance (iOS)</span>
<span>Binance (iOS) · Markets · Trade · Futures · Wallets</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #282828;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #282828;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #282828; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: 0.5px; background: #0099cc; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: 0.5px; background: #ffffff; color: #0099cc;
border: 1px solid #0099cc; border-radius: 4px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #5f5f5f;
border: 1px solid #c9c9c9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #4f8300; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#282828; box-sizing:border-box;
font-family:'Lato', Arial, sans-serif; }
* { box-sizing:border-box; }
.util { height:26px; background:#282828; color:#fff; display:flex; align-items:center;
justify-content:flex-end; gap:16px; padding:0 20px; font-size:11px; font-weight:700; }
.util span { opacity:.85; }
.util .cartct { background:#e82020; border-radius:2px; padding:0 5px; margin-left:3px; }
nav { height:52px; display:flex; align-items:center; gap:22px; padding:0 20px;
border-bottom:1px solid #d8d8d8; }
.logo { font-size:19px; font-weight:700; letter-spacing:-.3px; color:#0099cc; margin-right:8px; }
.logo b { color:#282828; }
.genre { font-size:12px; font-weight:700; color:#5f5f5f; padding:6px 2px; border-bottom:2px solid transparent; }
.genre.active { color:#0099cc; border-bottom-color:#0099cc; }
.searchw { margin-left:auto; width:210px; height:28px; border:1px solid #d8d8d8; border-radius:4px;
display:flex; align-items:center; padding:0 10px; font-size:12px; color:#888; background:#fff; }
.crumb { font-size:11px; color:#888; padding:8px 20px 0; }
.crumb b { color:#282828; }
.wrap { display:flex; gap:20px; padding:10px 20px 0; }
.cover { width:230px; height:300px; border-radius:4px; flex:0 0 auto;
background:linear-gradient(155deg,#0099cc 0%,#0d5a78 55%,#111 100%);
position:relative; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.cover::before { content:''; position:absolute; left:-30px; top:40px; width:290px; height:80px;
background:rgba(255,255,255,.14); transform:rotate(-8deg); }
.cover::after { content:''; position:absolute; right:14px; bottom:14px; width:70px; height:70px;
border-radius:50%; background:rgba(255,255,255,.12); }
.covertag { position:absolute; left:10px; top:10px; display:flex; gap:6px; }
.badge { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
border-radius:2px; padding:2px 6px; color:#fff; }
.b-instock{background:#4f8300;} .b-preorder{background:#eb3588;} .b-sale{background:#e82020;}
.info { flex:1; min-width:0; }
.fmt { font-size:11px; font-weight:700; text-transform:uppercase; color:#888; letter-spacing:.4px; }
h1 { font-size:20px; font-weight:700; margin:4px 0 2px; line-height:1.3; }
.artist { font-size:13px; color:#007399; font-weight:700; margin-bottom:8px; }
.meta { display:grid; grid-template-columns:100px 1fr; row-gap:4px; font-size:12px; color:#5f5f5f; margin-bottom:10px; }
.meta b { color:#282828; }
.pricerow { display:flex; align-items:baseline; gap:10px; margin:10px 0 8px; }
.price { font-size:24px; font-weight:700; color:#282828; }
.strike { font-size:13px; color:#aaaaaa; text-decoration:line-through; }
.save { font-size:11px; font-weight:700; color:#e82020; background:#ffecec; border-radius:2px; padding:2px 6px; }
.btnrow { display:flex; gap:8px; margin-top:6px; }
.btn-p { background:#0099cc; color:#fff; border:none; border-radius:4px; height:34px; padding:0 22px;
font-size:13px; font-weight:700; letter-spacing:.3px; }
.btn-s { background:#fff; color:#0099cc; border:1px solid #0099cc; border-radius:4px; height:34px; padding:0 18px;
font-size:13px; font-weight:700; }
.note { font-size:11px; color:#888; margin-top:8px; line-height:1.5; }
.recs { padding:12px 20px 0; border-top:1px solid #eeeeee; margin-top:10px; }
.recs h4 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#888; margin:8px 0 8px; }
.recgrid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.rc { border:1px solid #eeeeee; border-radius:4px; padding:6px; }
.rc .th { height:64px; border-radius:2px; margin-bottom:6px;
background:linear-gradient(160deg,#eb3588,#0099cc); }
.rc .t { font-size:10px; font-weight:700; color:#282828; line-height:1.3; height:26px; overflow:hidden; }
.rc .p { font-size:11px; color:#e82020; font-weight:700; margin-top:2px; }
</style></head>
<body>
<div class="util"><span>Login</span><span>Wishlist</span><span>Cart<span class="cartct">3</span></span></div>
<nav>
<span class="logo"><b>Cdjapan</b></span>
<span class="genre active">Anime</span>
<span class="genre">J-Pop</span>
<span class="genre">Game Music</span>
<span class="genre">DVD/BD</span>
<span class="genre">Goods</span>
<div class="searchw">Search titles, artists…</div>
</nav>
<div class="crumb">Anime > Blu-ray > <b>New Releases</b></div>
<div class="wrap">
<div class="cover">
<div class="covertag"><span class="badge b-preorder">Pre-order</span><span class="badge b-sale">Sale</span></div>
</div>
<div class="info">
<div class="fmt">Blu-ray · Limited Edition · Region A/B</div>
<h1>Twilight Signal Vol. 3 [First Press Limited Edition]</h1>
<div class="artist">Neon Harbor Animation Studio</div>
<div class="meta">
<span>Catalog No.</span><b>NHAS-0417</b>
<span>Release Date</span><b>2026-11-18</b>
<span>Format</span><b>Blu-ray Disc + Booklet</b>
<span>Stock Status</span><b style="color:#eb3588">Accepting Pre-orders</b>
</div>
<div class="pricerow">
<span class="price">¥6,980</span>
<span class="strike">¥8,200</span>
<span class="save">Save 15%</span>
</div>
<div class="btnrow">
<button class="btn-p">Add to Cart</button>
<button class="btn-s">Add to Wishlist</button>
</div>
<div class="note">Includes exclusive character booklet and clear jacket art. International shipping calculated at checkout. Pre-order bonus available while supplies last.</div>
</div>
</div>
<div class="recs">
<h4>Recommended Items</h4>
<div class="recgrid">
<div class="rc"><div class="th"></div><div class="t">Twilight Signal Vol. 1</div><div class="p">¥5,480</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(160deg,#4f8300,#0099cc)"></div><div class="t">Twilight Signal Vol. 2</div><div class="p">¥5,480</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(160deg,#eabe00,#282828)"></div><div class="t">OST — Twilight Signal</div><div class="p">¥3,200</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(160deg,#e82020,#0099cc)"></div><div class="t">Acrylic Stand Set</div><div class="p">¥2,100</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(160deg,#0099cc,#eb3588)"></div><div class="t">Character Art Book</div><div class="p">¥4,600</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #17191a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #17191a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #17191a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #575a5d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffc633; color: #17191a;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #17191a;
border: 1px solid #ffc633; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #25282a;
border: 1px solid #bebebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #575a5d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #bc3c26; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; font-family:'Helvetica Neue',Arial,sans-serif; color:#17191a; }
*{box-sizing:border-box;}
.nav{height:72px;background:#ffffff;border-bottom:1px solid #cccccc;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:700;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;}
.navlinks div:first-child{color:#17191a;border-bottom:2px solid #ffc633;padding-bottom:20px;}
.navlinks div{color:#575a5d;}
.cart{background:#ffc633;color:#17191a;font-size:12px;font-weight:700;padding:8px 16px;border-radius:8px;}
.hero{height:280px;background:#25282a;display:flex;align-items:center;padding:0 36px;position:relative;overflow:hidden;}
.flame{position:absolute;right:60px;top:40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#ffd057,#f79a20 45%,#bc3c26 80%);filter:blur(2px);opacity:0.9;}
.oven{position:absolute;right:110px;bottom:20px;width:120px;height:70px;background:linear-gradient(180deg,#293035,#17191a);border-radius:16px 16px 8px 8px;}
.herotext{width:440px;position:relative;z-index:2;}
.kicker{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#ffc633;margin-bottom:12px;}
.herotext h1{font-size:38px;font-weight:700;color:#fff;margin:0 0 12px;line-height:1.1;}
.herotext p{font-size:15px;color:#e2e2e2;margin:0 0 20px;max-width:380px;}
.cta{display:inline-block;background:#ffc633;color:#17191a;font-size:15px;font-weight:600;padding:14px 28px;border-radius:8px;}
.specs{display:flex;gap:1px;background:#c1c2c3;margin:16px 32px 0;}
.spec{flex:1;background:#ffffff;text-align:center;padding:14px 8px;}
.specval{font-size:26px;font-weight:700;color:#f79a20;}
.speclabel{font-size:11px;color:#575a5d;text-transform:uppercase;letter-spacing:0.5px;margin-top:2px;}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:216px;background:#fff;border:1px solid #e2e2e2;border-radius:12px;overflow:hidden;position:relative;}
.thumb{height:100px;}
.fuel{position:absolute;top:10px;left:10px;background:#bc3c26;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;padding:3px 8px;border-radius:9999px;}
.pname{font-size:14px;font-weight:600;padding:10px 12px 2px;}
.pprice{font-size:14px;color:#575a5d;padding:0 12px 12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Ooni</div>
<div class="navlinks"><div>Ovens</div><div>Fuel</div><div>Accessories</div><div>Recipes</div></div>
<div class="cart">Cart (0)</div>
</div>
<div class="hero">
<div class="flame"></div><div class="oven"></div>
<div class="herotext">
<div class="kicker">950°F in 60 Seconds</div>
<h1>Pizzeria Quality.<br>Your Backyard.</h1>
<p>Wood, gas, or charcoal — the world's fastest ovens for the world's best pizza.</p>
<div class="cta">Shop Ovens</div>
</div>
</div>
<div class="specs">
<div class="spec"><div class="specval">60s</div><div class="speclabel">Cook Time</div></div>
<div class="spec"><div class="specval">950°F</div><div class="speclabel">Max Temp</div></div>
<div class="spec"><div class="specval">4</div><div class="speclabel">Fuel Types</div></div>
<div class="spec"><div class="specval">20kg</div><div class="speclabel">Portable</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffc633,#bc3c26)"></div><div class="fuel">Wood</div><div class="pname">Karu 16</div><div class="pprice">from $399</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f79a20,#293035)"></div><div class="fuel">Gas</div><div class="pname">Koda 16</div><div class="pprice">from $499</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d4602c,#17191a)"></div><div class="fuel">Multi</div><div class="pname">Fyra 12</div><div class="pprice">from $349</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#bc3c26,#ffd057)"></div><div class="fuel">Charcoal</div><div class="pname">Pro 16</div><div class="pprice">from $899</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #070707; color: #f4f4f4;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #070707; color: #f4f4f4;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 300; line-height: 1.2; letter-spacing: 0.02em; margin: 0; color: #f4f4f4; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; letter-spacing: 0.02em; margin: 0; color: #8f8f8f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0.14em; background: #88744a; color: #f8f8f8;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0.14em; background: transparent; color: #f4f4f4;
border: 1px solid #88744a; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: 0.02em; background: #1f1f21; color: #f4f4f4;
border: 1px solid #424242; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f8f8f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.12em; background: transparent; color: #88744a;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#070707; color:#e0e0e0; font-family:'Helvetica Neue', Arial, sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #222;}
.logo{font-size:15px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:#f4f4f4;}
.navlinks{display:flex;gap:26px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8f8f8f;}
.hero{position:relative;height:300px;background:radial-gradient(ellipse at 60% 40%,#2a1f14 0%,#070707 70%);overflow:hidden;}
.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom, rgba(7,7,7,0) 55%, rgba(7,7,7,0.9) 100%);}
.herotext{position:absolute;left:36px;bottom:24px;z-index:2;}
.herotext .ed{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c9a45d;margin-bottom:10px;}
.herotext h1{font-size:34px;font-weight:300;color:#f4f4f4;margin:0 0 8px;letter-spacing:.01em;max-width:520px;}
.cta{display:inline-block;background:#88744a;color:#f8f8f8;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:13px 28px;margin-top:8px;}
.grid{display:flex;gap:1px;background:#161616;margin-top:1px;}
.card{flex:1;background:#070707;padding:14px 16px;}
.thumb{height:100px;margin-bottom:10px;}
.ptitle{font-size:13px;color:#e0e0e0;letter-spacing:.04em;}
.pmeta{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8e7b53;margin-top:6px;}
.pprice{font-size:16px;font-weight:300;color:#c9a45d;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#636363;border-top:1px solid #222;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Peter Lik</div>
<div class="navlinks"><div>Collections</div><div>Galleries</div><div>Editions</div><div>About</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="ed">Limited Edition · 1/950</div>
<h1>Light held still, forever.</h1>
<div class="cta">View Edition</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 30% 70%,#8e6b3a,#070707 75%)"></div><div class="ptitle">Canyon Aurora</div><div class="pmeta">Edition of 950</div><div class="pprice">$2,400</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 60% 30%,#3a2e1a,#070707 75%)"></div><div class="ptitle">Manhattan Storm</div><div class="pmeta">Edition of 500</div><div class="pprice">$3,100</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 45% 55%,#59462a,#070707 75%)"></div><div class="ptitle">Maui Reflection</div><div class="pmeta">Sold Out</div><div class="pprice">$1,950</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 55% 45%,#2f2412,#070707 75%)"></div><div class="ptitle">Desert Ember</div><div class="pmeta">Edition of 250</div><div class="pprice">$4,600</div></div>
</div>
<div class="footer"><span>Galleries: Las Vegas · Maui · Manhattan</span><span>Visit a Gallery</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #f5d83e; color: #111111;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #303030;
border: 1px solid #f5d83e; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #303030;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f5d83e; color: #9b6e00;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#303030; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#111111;}
.logo{font-size:19px;font-weight:700;color:#fff;letter-spacing:.4px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:700;text-transform:uppercase;color:#fff;}
.hero{height:230px;display:flex;background:#f0f0f0;}
.htext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 34px;}
.htext .k{display:inline-block;background:#f5d83e;color:#111111;font-size:11px;font-weight:700;padding:3px 10px;margin-bottom:12px;width:fit-content;}
.htext h1{font-size:27px;font-weight:700;color:#111111;margin:0 0 10px;line-height:1.22;}
.htext p{font-size:13.5px;line-height:1.5;color:#555555;margin:0 0 16px;max-width:280px;}
.btn{width:fit-content;background:#f5d83e;color:#111111;font-size:13px;font-weight:700;text-transform:uppercase;padding:11px 22px;}
.himg{width:54%;position:relative;background:#ededed;}
.clamp{position:absolute;left:110px;top:70px;width:120px;height:70px;background:#303030;border-radius:4px;}
.clamp:before{content:'';position:absolute;left:20px;top:-16px;width:80px;height:16px;background:#f5d83e;border-radius:2px;}
.sec{padding:16px 34px 0;}
.seclabel{font-size:18px;font-weight:700;color:#111111;margin-bottom:12px;}
.grid{display:flex;gap:12px;}
.card{width:150px;background:#f0f0f0;border:1px solid #c2c2c2;border-radius:8px;padding:10px;}
.thumb{height:76px;border-radius:4px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:700;color:#111111;height:30px;overflow:hidden;line-height:1.3;text-transform:uppercase;}
.price{font-size:13px;font-weight:700;color:#111111;margin-top:4px;background:#f5d83e;display:inline-block;padding:1px 6px;}
</style>
<div class="nav">
<div class="logo">Scosche</div>
<div class="navlinks"><div>Mounts</div><div>Charging</div><div>Audio</div><div>#1 Mount</div></div>
</div>
<div class="hero">
<div class="htext">
<div class="k">#1 Selling Mount</div>
<h1>Hold it. Charge it. Forget about it.</h1>
<p>Magnetic phone mounts and chargers built for the vent, the dash, and the desk.</p>
<div class="btn">Shop Mounts</div>
</div>
<div class="himg"><div class="clamp"></div></div>
</div>
<div class="sec">
<div class="seclabel">Top Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#f5d83e,#303030)"></div><div class="pname">MagicMount Vent Pro</div><div class="price">$29.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#303030,#767676)"></div><div class="pname">Wireless Charge Pad</div><div class="price">$39.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#111111,#f5d83e)"></div><div class="pname">FlexView Dash Mount</div><div class="price">$24.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#767676,#111111)"></div><div class="pname">BoomBottle Speaker</div><div class="price">$59.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0c0c0c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0c0c0c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #0c0c0c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #4a4a4a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #e01a78; color: #ffffff;
border: none; border-radius: 12px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #0c0c0c;
border: 1px solid #e01a78; border-radius: 12px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4a4a4a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #e01a78; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>iam8bit mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#0c0c0c;
font-family:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}
*{box-sizing:border-box;}
.nav{
height:64px; background:#ffffff; border-bottom:1px solid #dedede;
display:flex; align-items:center; justify-content:space-between; padding:0 32px;
}
.logo{font-size:20px; font-weight:600; color:#0c0c0c; letter-spacing:0.2px;}
.navlinks{display:flex; gap:26px;}
.navlinks span{font-size:13px; font-weight:500; color:#121212;}
.navlinks .pink{color:#e01a78; font-weight:600;}
.navcart{width:32px; height:32px; border-radius:8px; border:1px solid #dedede; display:flex; align-items:center; justify-content:center; font-size:11px; color:#0c0c0c;}
.hero{height:220px; display:flex; align-items:center; padding:0 60px; gap:60px;}
.hero-left{width:420px;}
.hkicker{font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#e01a78; margin-bottom:12px;}
.h1{font-size:30px; font-weight:600; line-height:1.25; margin:0 0 12px 0; color:#0c0c0c;}
.hsub{font-size:14px; font-weight:400; color:#121212; line-height:1.6; margin:0 0 20px 0; max-width:380px;}
.cta{
display:inline-flex; align-items:center; justify-content:center; width:170px; height:48px;
background:#e01a78; color:#fff; border-radius:12px; font-size:14px; font-weight:600;
}
.hero-right{flex:1; display:flex; align-items:center; justify-content:center; gap:16px;}
.vinyl{width:130px; height:130px; border-radius:50%; background:radial-gradient(circle at 50% 50%, #0c0c0c 0 20%, #2a2a2a 20% 34%, #0c0c0c 34% 48%, #2a2a2a 48% 62%, #0c0c0c 62% 100%); position:relative; box-shadow:0 8px 20px rgba(0,0,0,0.12);}
.vinyl:after{content:''; position:absolute; top:50%; left:50%; width:34px; height:34px; border-radius:50%; background:#e01a78; transform:translate(-50%,-50%);}
.box{width:100px; height:130px; background:#f5f5f5; border:1px solid #dedede; border-radius:8px;}
.seclabel{padding:20px 32px 14px 32px; font-size:12px; font-weight:600; letter-spacing:0.6px; text-transform:uppercase; color:#4a4a4a;}
.grid{display:flex; gap:16px; padding:0 32px;}
.card{width:190px; background:#ffffff; border:1px solid #dedede; border-radius:8px; padding:14px; position:relative;}
.badge{position:absolute; top:10px; left:10px; background:#e01a78; color:#fff; font-size:10px; font-weight:600; letter-spacing:0.3px; text-transform:uppercase; border-radius:4px; padding:3px 8px; z-index:2;}
.thumb{height:96px; background:#f5f5f5; border-radius:6px; margin-bottom:12px; display:flex; align-items:center; justify-content:center;}
.thumb-shape{width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg,#e8e8e8,#cfcfcf);}
.pname{font-size:13px; font-weight:600; margin:0 0 6px 0; color:#0c0c0c;}
.pprice{font-size:15px; font-weight:600; color:#121212; margin:0;}
</style>
<div class="nav">
<div class="logo">Iam8bit</div>
<div class="navlinks">
<span class="pink">Shop</span>
<span>Vinyl</span>
<span>Apparel</span>
<span>Collectibles</span>
</div>
<div class="navcart">Bag</div>
</div>
<div class="hero">
<div class="hero-left">
<div class="hkicker">Limited Edition Drop</div>
<h1 class="h1">Artifacts for the games you never stopped playing.</h1>
<p class="hsub">Curated soundtracks, apparel, and collectibles from the studios that made you a fan.</p>
<div class="cta">Shop the Drop</div>
</div>
<div class="hero-right">
<div class="vinyl"></div>
<div class="box"></div>
</div>
</div>
<div class="seclabel">New Arrivals</div>
<div class="grid">
<div class="card">
<span class="badge">NEW</span>
<div class="thumb"><div class="thumb-shape"></div></div>
<p class="pname">Original Score Vinyl LP</p>
<p class="pprice">$32.00</p>
</div>
<div class="card">
<div class="thumb"><div class="thumb-shape" style="border-radius:8px; background:linear-gradient(135deg,#0c0c0c,#3a3a3a);"></div></div>
<p class="pname">Pixel Logo Tee</p>
<p class="pprice">$28.00</p>
</div>
<div class="card">
<span class="badge" style="background:#0c0c0c;">SALE</span>
<div class="thumb"><div class="thumb-shape" style="border-radius:8px; background:linear-gradient(135deg,#e01a78,#c01566);"></div></div>
<p class="pname">Collector's Art Print</p>
<p class="pprice">$18.00</p>
</div>
<div class="card">
<div class="thumb"><div class="thumb-shape" style="width:50px; height:70px; border-radius:6px; background:linear-gradient(135deg,#dedede,#bbbbbb);"></div></div>
<p class="pname">Boxed Figure Set</p>
<p class="pprice">$64.00</p>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #569a43; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #569a43; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #569a43; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #569a43; color: #f5f5f5;
border: 1px solid #6fa95f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #488138; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:"Pretendard",sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:700; margin:0; font-family:"Roboto Condensed", sans-serif; letter-spacing:1px; }
.navlinks { display:flex; gap:26px; font-size:16px; font-family:"Roboto Condensed", sans-serif; text-transform:uppercase; font-weight:500; }
.store { border:2px solid #ffffff; color:#ffffff; padding:0 16px; height:36px; display:flex; align-items:center; font-size:14px; font-family:"Roboto Condensed",sans-serif; font-weight:700; }
.gamecard { position:relative; margin:0 40px; height:260px; background:linear-gradient(135deg,#1a1a1a,#000000);
border-radius:0px 80px 0px 0px; display:flex; align-items:flex-end; padding:24px; }
.gamecard h2 { font-size:24px; font-weight:500; letter-spacing:-0.96px; margin:0; }
.gamecard .row { position:absolute; right:24px; bottom:24px; display:flex; gap:10px; }
.outl { border:2px solid #ffffff; color:#777777; padding:0 20px; height:44px; display:flex; align-items:center; font-size:14px; }
.newsband { background:#222222; margin-top:16px; padding:20px 40px; }
.newsband h3 { font-family:"Roboto Condensed",sans-serif; text-transform:uppercase; font-weight:700; font-size:28px; letter-spacing:1.8px; margin:0 0 14px; }
.newsrow { display:flex; justify-content:space-between; font-size:16px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.3); }
.newsrow span:last-child { color:rgba(255,255,255,0.5); font-size:13px; }
</style></head>
<body>
<nav>
<p class="brand">Shift Up</p>
<div class="navlinks"><span>GAMES</span><span>RECRUIT</span><span>IR</span></div>
<span class="store">STORE</span>
</nav>
<div class="gamecard">
<h2>Stellar Blade</h2>
<div class="row"><span class="outl">About This Project</span><span class="outl">Apply Now</span></div>
</div>
<div class="newsband">
<h3>NEWS</h3>
<div class="newsrow"><span>Stellar Blade launches on Nintendo Switch 2</span><span>Mar 2, 2026</span></div>
<div class="newsrow"><span>NIKKE: Goddess of Victory tops app store charts in KR/JP</span><span>Feb 14, 2026</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #202936;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #202936;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #202936; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #461413; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f8f8f8; color: #202936;
border: 1px solid #461413; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f8f8; color: #202936;
border: 1px solid #c2c4c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #3784b0; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f8f8; font-family:'GoodOT',Arial,sans-serif; color:#202936; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#202936;}
.logo{font-family:'Domine',Georgia,serif;font-size:19px;font-weight:700;color:#ebc48d;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#b9c1cc;}
.cart{background:#461413;color:#fefad6;font-size:12px;font-weight:700;padding:9px 18px;border-radius:8px;}
.hero{height:220px;display:flex;align-items:center;padding:0 40px;background:radial-gradient(circle at 78% 40%,#461413 0%,#202936 65%);position:relative;overflow:hidden;}
.stars-bg{position:absolute;inset:0;background-image:radial-gradient(1.4px 1.4px at 15% 20%,#ebc48d,transparent),radial-gradient(1.4px 1.4px at 55% 60%,#ebc48d,transparent),radial-gradient(1.4px 1.4px at 80% 25%,#ebc48d,transparent),radial-gradient(1.4px 1.4px at 90% 70%,#ebc48d,transparent);opacity:0.5;}
.herotext{position:relative;z-index:2;max-width:420px;}
.kicker{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#ebc48d;margin-bottom:8px;}
.h1{font-family:'Domine',Georgia,serif;font-size:30px;font-weight:700;line-height:1.2;color:#fff;margin:0 0 10px;}
.sub{font-size:14px;color:#c9cdd6;line-height:1.5;margin:0 0 16px;max-width:340px;}
.btn{display:inline-block;background:#461413;color:#fefad6;font-size:14px;font-weight:700;padding:12px 26px;border-radius:8px;}
.badgerow{display:flex;gap:8px;padding:14px 40px 0;}
.badge{font-size:11px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;padding:5px 10px;}
.badge.new{background:#3784b0;color:#fff;}
.badge.sale{background:#500c06;color:#fff;}
.badge.alert{background:#fefad6;color:#202936;border:1px solid #ebc48d;}
.grid{display:flex;gap:14px;padding:14px 40px 0;}
.card{width:196px;background:#fff;border:1px solid #d3d3d3;}
.thumb{height:92px;}
.cbody{padding:11px 13px;}
.ctitle{font-size:14px;font-weight:700;margin:0 0 4px;color:#202936;}
.cprice{font-size:15px;font-weight:700;color:#461413;margin:0;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#071a2f;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;color:#7d7ba6;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Paizo</div>
<div class="navlinks"><span>Rulebooks</span><span>Adventure Paths</span><span>Miniatures</span></div>
<div class="cart">Cart (2)</div>
</div>
<div class="hero">
<div class="stars-bg"></div>
<div class="herotext">
<div class="kicker">New Adventure Path</div>
<div class="h1">The dice remember every choice.</div>
<div class="sub">Rulebooks, campaign settings, and miniatures for the table that never wants to leave the dungeon.</div>
<div class="btn">Shop New Releases</div>
</div>
</div>
<div class="badgerow">
<div class="badge new">Golem's Got It!</div>
<div class="badge sale">Sale</div>
<div class="badge alert">Limited Print Run</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#461413,#202936)"></div><div class="cbody"><div class="ctitle">Core Rulebook, 2nd Ed.</div><div class="cprice">$59.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7d7ba6,#202936)"></div><div class="cbody"><div class="ctitle">Curse of the Crimson Throne</div><div class="cprice">$44.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ebc48d,#202936)"></div><div class="cbody"><div class="ctitle">Bestiary: Beyond the Void</div><div class="cprice">$49.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#202936,#461413)"></div><div class="cbody"><div class="ctitle">Painted Miniature Set</div><div class="cprice">$34.99</div></div></div>
</div>
<div class="footer"><span>Free shipping over $60</span><span>Est. 2002 · Redmond, WA</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff3621; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff3621; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b2026; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff3621; color: #0b2026;
border: 1px solid #0b2026; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff3621; color: #f5f5f5;
border: 1px solid #fd5543; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d83222; color: #0b2026;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1B3139; box-sizing:border-box;
font-family:"DM Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:500; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; }
.btn-lava { background:#FF3621; color:#fff; border-radius:0; padding:8px 24px; font-size:14px; font-weight:500; }
.hero { padding:14px 40px 20px; }
.hero h1 { font-size:44px; font-weight:500; line-height:1.1; margin:0 0 10px; max-width:640px; }
.hero p { font-size:16px; color:#1B3139; opacity:0.7; max-width:440px; margin:0 0 14px; }
.row { display:flex; gap:10px; }
.btn-navy { background:#1B3139; color:#fff; padding:8px 24px; font-size:14px; font-weight:500; }
.darkband { background:#0B2026; padding:22px 40px; display:flex; gap:8px; }
.tab { border-radius:20px; padding:9px 16px; font-size:14px; font-weight:500; color:#fff; background:rgba(237,242,248,0.1); }
.tab.active { background:#fff; color:#1B3139; font-weight:700; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:20px 40px 26px; }
.card { border:1px solid #EEEDE9; padding:16px; }
.card h3 { font-size:18px; font-weight:400; margin:0 0 6px; }
.card p { font-size:13px; color:#1B3139; opacity:0.75; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">Databricks</p>
<div class="navlinks"><span>Platform</span><span>Database</span><span>AI</span><span>BI</span></div>
<button class="btn-lava">Try Databricks</button>
</nav>
<section class="hero">
<h1>The database your AI agents deserve</h1>
<p>Build and run apps, agents, and AI on your data — on one unified lakehouse platform.</p>
<div class="row">
<button class="btn-lava">Start free trial</button>
<button class="btn-navy">See demo</button>
</div>
</section>
<div class="darkband">
<span class="tab active">Platform</span>
<span class="tab">Database</span>
<span class="tab">AI</span>
<span class="tab">BI</span>
<span class="tab">Governance</span>
</div>
<div class="cards">
<div class="card"><h3>Data Engineering</h3><p>Orchestrate, transform, and ingest at any scale.</p></div>
<div class="card"><h3>Data Warehousing</h3><p>Serverless SQL with lakehouse economics.</p></div>
<div class="card"><h3>Unity Catalog</h3><p>Governance across every workspace and cloud.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.33; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #FF5500; color: #FFFFFF;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #FF5500; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #E5E5E5; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; background: #1A1A1A; color: #FFFFFF;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1A1A1A; box-sizing:border-box; font-family:'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; padding:0 32px; border-bottom:1px solid #F0F0F0; gap:26px; }
.brand { font-weight:800; font-size:20px; text-transform:uppercase; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:22px; flex:1; }
.navlinks div { font-size:13px; font-weight:500; }
.icons { font-size:15px; display:flex; gap:16px; }
.hero { position:relative; height:280px; background:linear-gradient(120deg,#FF5500,#ffb17a 60%,#F7F7F7); display:flex; align-items:flex-end; padding:32px; }
.hero .txt { color:#fff; }
.hero h1 { font-size:56px; font-weight:800; text-transform:uppercase; letter-spacing:-2px; margin:0; line-height:0.95; }
.hero .cta { display:inline-block; margin-top:12px; background:#1A1A1A; color:#fff; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; padding:12px 24px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:20px 32px; }
.card { border:1px solid #F0F0F0; border-radius:8px; padding:10px; }
.img { aspect-ratio:1/1; border-radius:4px; margin-bottom:8px; }
.g1 { background:linear-gradient(135deg,#FF5500,#992f00); }
.g2 { background:linear-gradient(135deg,#333,#000); }
.g3 { background:linear-gradient(135deg,#f0c419,#8a6d00); }
.g4 { background:linear-gradient(135deg,#3a86c8,#0f2f52); }
.name { font-size:13px; font-weight:400; margin-bottom:4px; }
.price { font-size:16px; font-weight:600; margin-bottom:6px; }
.swrow { display:flex; gap:4px; }
.sw { width:14px; height:14px; border-radius:9999px; }
.footer { background:#1A1A1A; color:#fff; display:flex; gap:50px; padding:18px 32px; font-size:12px; }
.footer h4 { font-size:13px; margin:0 0 6px; text-transform:uppercase; }
.footer div div { color:#ccc; margin-bottom:4px; }
</style></head>
<body>
<nav>
<div class="brand">Fatboy</div>
<div class="navlinks"><div>Bean Bags</div><div>Outdoor</div><div>Lamps</div><div>Accessories</div></div>
<div class="icons">Search ♡ Bag</div>
</nav>
<div class="hero"><div class="txt"><h1>SIT<br>DIFFERENT</h1><div class="cta">Shop Original</div></div></div>
<div class="grid">
<div class="card"><div class="img g1"></div><div class="name">Original Bean Bag</div><div class="price">$429</div><div class="swrow"><div class="sw" style="background:#FF5500"></div><div class="sw" style="background:#1A1A1A"></div><div class="sw" style="background:#3a86c8"></div></div></div>
<div class="card"><div class="img g2"></div><div class="name">Point Outdoor Lamp</div><div class="price">$159</div><div class="swrow"><div class="sw" style="background:#333"></div><div class="sw" style="background:#f0c419"></div></div></div>
<div class="card"><div class="img g3"></div><div class="name">Headdemock Hammock</div><div class="price">$389</div><div class="swrow"><div class="sw" style="background:#f0c419"></div><div class="sw" style="background:#FF5500"></div></div></div>
<div class="card"><div class="img g4"></div><div class="name">Buggle-Up Blanket</div><div class="price">$249</div><div class="swrow"><div class="sw" style="background:#3a86c8"></div><div class="sw" style="background:#1A1A1A"></div></div></div>
</div>
<div class="footer">
<div><h4>Shop</h4><div>Bean Bags</div><div>Outdoor</div></div>
<div><h4>Support</h4><div>Shipping</div><div>Returns</div></div>
<div><h4>Company</h4><div>About</div><div>Newsletter</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #223355;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #223355;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #223355; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #667788; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #222299; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #eeeeee; color: #222299;
border: 1px solid #222299; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #223355;
border: 1px solid #bbbfc8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #667788; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d1d1e2; color: #222299;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; background:#eeeeee; color:#334466; }
*{box-sizing:border-box;}
.nav{height:56px;background:#223355;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:18px;font-weight:700;color:#ffffff;letter-spacing:.5px;}
.navlinks{display:flex;gap:6px;font-size:13px;font-weight:600;color:#ffffff;}
.navlinks span{padding:8px 12px;border-radius:4px;}
.navlinks span.active{background:#222299;}
.searchwrap{padding:14px 30px 0;}
.searchbar{height:44px;background:#ffffff;border:1px solid #ccccdd;border-radius:4px;display:flex;align-items:center;padding:0 14px;gap:10px;}
.mag{width:14px;height:14px;border:2px solid #667788;border-radius:50%;position:relative;flex:none;}
.mag:after{content:'';position:absolute;width:6px;height:2px;background:#667788;right:-6px;bottom:1px;transform:rotate(45deg);}
.searchbar span{font-size:13px;color:#667788;}
.chips{display:flex;gap:8px;padding:12px 30px 0;}
.chip{font-size:12px;font-weight:600;padding:6px 14px;border-radius:9999px;border:1px solid #ccccdd;color:#334466;background:#ffffff;}
.chip.active{background:#222299;color:#ffffff;border-color:#222299;}
.grid{display:flex;gap:14px;padding:16px 30px 0;}
.card{width:190px;background:#ffffff;border-radius:4px;padding:10px;position:relative;}
.thumb{height:120px;border-radius:4px;margin-bottom:8px;}
.badge{position:absolute;top:18px;left:18px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#ffffff;padding:2px 6px;border-radius:2px;}
.badge.new{background:#ff6600;}
.badge.sale{background:#cc0000;}
.artist{font-size:11px;color:#667788;font-weight:600;text-transform:uppercase;}
.title{font-size:14px;font-weight:700;color:#222299;line-height:1.3;margin:2px 0 6px;height:36px;overflow:hidden;}
.row{display:flex;align-items:center;justify-content:space-between;}
.price{font-size:14px;font-weight:700;color:#223355;}
.stars{color:#ffcc00;font-size:11px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#223355;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:11px;color:#99aabb;}
.footer b{color:#ffffff;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Zia Records Independ 2</div>
<div class="navlinks"><span class="active">New Arrivals</span><span>Vinyl</span><span>CDs</span><span>Cassettes</span><span>Merch</span><span>Locations</span></div>
</div>
<div class="searchwrap">
<div class="searchbar"><div class="mag"></div><span>Search by artist, album, or catalog number...</span></div>
</div>
<div class="chips">
<div class="chip active">All Formats</div>
<div class="chip">New Vinyl</div>
<div class="chip">Used Vinyl</div>
<div class="chip">CD</div>
<div class="chip">Cassette</div>
</div>
<div class="grid">
<div class="card"><div class="badge new">New</div><div class="thumb" style="background:linear-gradient(135deg,#334466,#222299)"></div><div class="artist">Desert Static</div><div class="title">Voltage & Dust</div><div class="row"><div class="price">$27.99</div><div class="stars">★★★★☆</div></div></div>
<div class="card"><div class="badge sale">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#667788,#223355)"></div><div class="artist">Low Mesa</div><div class="title">Night Sky Pressing</div><div class="row"><div class="price">$14.50</div><div class="stars">★★★★★</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#223355,#99aabb)"></div><div class="artist">Canyon Wire</div><div class="title">Used — VG+</div><div class="row"><div class="price">$9.99</div><div class="stars">★★★☆☆</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#222299,#667788)"></div><div class="artist">Salt Flat Radio</div><div class="title">Reissue Series 07</div><div class="row"><div class="price">$32.00</div><div class="stars">★★★★☆</div></div></div>
</div>
<div class="footer"><span><b>Since 1980</b> · 6 Southwest Locations</span><span>Locations · Hours · Trade-Ins · Newsletter</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f3f3; color: #3f4244;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f3f3; color: #3f4244;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: #3f4244; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #787e7e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #8a947c; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #f3f3f3; color: #3f4244;
border: 1px solid #8a947c; border-radius: 8px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #f3f3f3; color: #3f4244;
border: 1px solid #c6c7c7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787e7e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #adaa1d; color: #3f4244;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f3f3f3; font-family:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif; color:#5b5c5e; }
*{box-sizing:border-box;}
.nav{height:56px;background:#f3f3f3;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.logo{font-family:'Brush Script MT',cursive;font-size:26px;color:#3f4244;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#3f4244;}
.hero{height:150px;background:#f5f6f7;display:flex;align-items:center;justify-content:center;padding:0 28px;}
.h1{font-family:'Brush Script MT',cursive;font-size:40px;color:#3f4244;text-align:center;}
.strip{display:flex;gap:8px;padding:12px 28px;overflow:hidden;}
.pill{background:#e8eae5;color:#3f4244;border-radius:9999px;font-size:13px;padding:6px 16px;}
.pill.on{background:#8a947c;color:#fff;}
.grid{display:flex;gap:12px;padding:0 28px;}
.card{width:150px;background:#fff;border-radius:8px;padding:8px;position:relative;}
.thumb{height:100px;border-radius:4px;margin-bottom:8px;}
.badge{position:absolute;top:14px;left:14px;background:#adaa1d;color:#3f4244;font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;border-radius:4px;padding:2px 6px;}
.badge.out{background:#f6343f;color:#fff;}
.ptitle{font-size:13px;font-weight:600;color:#3f4244;line-height:1.3;}
.artist{font-size:12px;color:#787e7e;}
.pprice{font-size:16px;font-weight:600;color:#3f4244;margin-top:4px;}
.pprice.sale{color:#adaa1d;}
.footer{position:absolute;bottom:0;left:0;right:0;height:52px;background:#3f4244;display:flex;align-items:center;justify-content:space-between;padding:0 28px;font-size:12px;color:#b0b7bd;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Resident Music</div>
<div class="navlinks"><div>New In</div><div>Genres</div><div>Reissues</div><div>Events</div></div>
</div>
<div class="hero"><div class="h1">crate-digging, quietly done</div></div>
<div class="strip">
<div class="pill on">Vinyl</div><div class="pill">Jazz</div><div class="pill">Folk</div><div class="pill">Soul</div><div class="pill">Electronic</div>
</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#8a947c,#3f4244)"></div><div class="ptitle">Quiet Rooms</div><div class="artist">Lena Marsh</div><div class="pprice sale">£12.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3f4244,#8a947c)"></div><div class="ptitle">Field Recordings I</div><div class="artist">Orin Vale</div><div class="pprice">£18.00</div></div>
<div class="card"><div class="badge out">Sold Out</div><div class="thumb" style="background:linear-gradient(135deg,#787e7e,#3f4244)"></div><div class="ptitle">Analog Weather</div><div class="artist">Set & Coast</div><div class="pprice">£16.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8a947c,#787e7e)"></div><div class="ptitle">Low Tide Sessions</div><div class="artist">Marlowe Reed</div><div class="pprice">£15.00</div></div>
</div>
<div class="footer"><span>© Resident Music — let the records do the talking</span><span>Store Locator · Events</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0969da; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0969da; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8bb6e9; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0d1117; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0969da; color: #0d1117;
border: 1px solid #0d1117; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0969da; color: #f5f5f5;
border: 1px solid #2f7fde; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8bb6e9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0a5bbb; color: #0d1117;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0d1117; color:#e6edf3; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.mono { font-family:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
nav { height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 24px;
background:#010409; border-bottom:1px solid #30363d; }
.brand { font-size:15px; font-weight:700; color:#e6edf3; margin:0; }
.navlinks { display:flex; gap:18px; font-size:13px; color:#9198a1; }
.search-fake { background:#0d1117; border:1px solid #30363d; border-radius:6px; color:#9198a1; font-size:12px;
padding:0 10px; height:28px; width:220px; display:flex; align-items:center; }
.repohead { padding:16px 24px 10px; border-bottom:1px solid #30363d; }
.crumb { font-size:13px; color:#4493f8; }
.crumb span.cur { color:#9198a1; }
.titlerow { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.repotitle { font-size:22px; font-weight:600; color:#e6edf3; }
.repotitle .pub { font-size:11px; font-weight:400; color:#9198a1; border:1px solid #30363d; border-radius:9999px;
padding:1px 8px; margin-left:8px; vertical-align:2px; }
.btns { display:flex; gap:8px; }
.btn-default { background:#21262d; color:#e6edf3; border:1px solid #30363d; border-radius:6px; height:28px;
padding:0 12px; font-size:12px; font-weight:600; display:flex; align-items:center; gap:6px; }
.btn-primary { background:#238636; color:#ffffff; border:1px solid rgba(240,246,252,0.1); border-radius:6px;
height:28px; padding:0 12px; font-size:12px; font-weight:600; display:flex; align-items:center; gap:4px; }
.desc { font-size:12px; color:#9198a1; margin-top:6px; }
.tabs { display:flex; gap:16px; padding:0 24px; border-bottom:1px solid #30363d; margin-top:8px; }
.tab { font-size:13px; color:#9198a1; padding:8px 2px; border-bottom:2px solid transparent; }
.tab.on { color:#e6edf3; font-weight:600; border-bottom:2px solid #fd8c73; }
.tab .cnt { background:rgba(175,184,193,0.2); color:#e6edf3; border-radius:9999px; font-size:11px; padding:0 6px; margin-left:5px; }
.body { display:flex; gap:14px; padding:14px 24px 0; }
.main { flex:2.3; display:flex; flex-direction:column; gap:12px; }
.rail { flex:1; display:flex; flex-direction:column; gap:10px; }
.box { background:#161b22; border:1px solid #30363d; border-radius:6px; }
.box .hd { padding:8px 14px; border-bottom:1px solid #30363d; font-size:12px; color:#9198a1; display:flex; justify-content:space-between; }
.filerow { display:flex; align-items:center; gap:8px; padding:6px 14px; font-size:13px; border-bottom:1px solid #21262d; }
.filerow:last-child { border-bottom:none; }
.filerow .name { color:#e6edf3; }
.filerow.dir .name { color:#4493f8; }
.filerow .msg { color:#9198a1; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filerow .time { color:#9198a1; font-size:12px; }
.dot { width:8px; height:8px; border-radius:9999px; background:#4493f8; flex-shrink:0; }
.dot.dir { background:transparent; }
.issue { display:flex; align-items:center; gap:8px; padding:8px 14px; font-size:13px; border-bottom:1px solid #21262d; }
.issue:last-child { border-bottom:none; }
.state { border-radius:9999px; padding:2px 8px; font-size:11px; font-weight:600; color:#ffffff; flex-shrink:0; }
.state.open { background:#238636; }
.state.merged { background:#8250df; }
.state.closed { background:#da3633; }
.issue .t { color:#e6edf3; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.issue .meta { color:#9198a1; font-size:11px; }
.rail .h3 { font-size:13px; font-weight:600; color:#e6edf3; margin:0; }
.rail p.d { font-size:12px; color:#9198a1; margin:6px 0 10px; }
.topics { display:flex; flex-wrap:wrap; gap:6px; }
.topic { background:#388bfd26; color:#4493f8; border:1px solid #388bfd4d; border-radius:9999px; font-size:11px;
padding:2px 9px; }
.stat { display:flex; justify-content:space-between; font-size:12px; color:#9198a1; padding:4px 0; }
.stat b { color:#e6edf3; font-weight:600; }
footer { border-top:1px solid #30363d; padding:10px 24px; display:flex; justify-content:space-between;
align-items:center; font-size:11px; color:#9198a1; margin-top:12px; }
</style></head>
<body>
<nav>
<p class="brand">GitHub</p>
<div class="navlinks"><span>Pull requests</span><span>Issues</span><span>Marketplace</span><span>Explore</span></div>
<div class="search-fake">Type / to search</div>
</nav>
<section class="repohead">
<div class="crumb">octobox-labs / <span class="cur">flowline</span> <span style="color:#9198a1; font-weight:400;">Public</span></div>
<div class="titlerow">
<span class="repotitle">flowline</span>
<div class="btns">
<div class="btn-default">★ Star <span style="opacity:0.7;">2.1k</span></div>
<div class="btn-default">⑂ Fork <span style="opacity:0.7;">318</span></div>
<div class="btn-primary">Code ▾</div>
</div>
</div>
<p class="desc">A lightweight workflow engine for background jobs, written in Go.</p>
</section>
<div class="tabs">
<span class="tab on">Code</span>
<span class="tab">Issues <span class="cnt">42</span></span>
<span class="tab">Pull requests <span class="cnt">7</span></span>
<span class="tab">Actions</span>
<span class="tab">Settings</span>
</div>
<section class="body">
<div class="main">
<div class="box">
<div class="hd"><span>main</span><span class="mono">128 commits</span></div>
<div class="filerow dir"><span class="dot dir">📁</span><span class="name">internal</span><span class="msg mono">refactor: split scheduler queue</span><span class="time">2 days ago</span></div>
<div class="filerow dir"><span class="dot dir">📁</span><span class="name">cmd</span><span class="msg mono">feat: add --dry-run flag</span><span class="time">5 days ago</span></div>
<div class="filerow"><span class="dot">●</span><span class="name mono">go.mod</span><span class="msg mono">chore: bump dependencies</span><span class="time">1 week ago</span></div>
<div class="filerow"><span class="dot">●</span><span class="name mono">README.md</span><span class="msg mono">docs: update install steps</span><span class="time">2 weeks ago</span></div>
</div>
<div class="box">
<div class="hd"><span>Recent activity</span><span>3 open</span></div>
<div class="issue"><span class="state open">Open</span><span class="t">Retry backoff should be configurable</span><span class="meta">#412</span></div>
<div class="issue"><span class="state merged">Merged</span><span class="t">Add Prometheus metrics exporter</span><span class="meta">#409</span></div>
<div class="issue"><span class="state closed">Closed</span><span class="t">Panic on empty queue name</span><span class="meta">#405</span></div>
</div>
</div>
<div class="rail">
<div>
<p class="h3">About</p>
<p class="d">A lightweight, dependency-free workflow engine for scheduling and running background jobs.</p>
<div class="topics">
<span class="topic">go</span><span class="topic">workflow</span><span class="topic">queue</span><span class="topic">jobs</span>
</div>
</div>
<div class="box" style="padding:12px 14px;">
<div class="stat"><span>Stars</span><b>2,142</b></div>
<div class="stat"><span>Watching</span><b>64</b></div>
<div class="stat"><span>Forks</span><b>318</b></div>
<div class="stat"><span>Contributors</span><b>29</b></div>
</div>
</div>
</section>
<footer>
<span>© GitHub</span>
<span>GitHub · Code · Issues · Actions</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 31.2px; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 12px; letter-spacing: 0.6px; margin: 0; color: #898989; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 25.6px; letter-spacing: -0.16px; background: #080808; color: #ffffff;
border: none; border-radius: 4px; padding: {spacing.md} {spacing.xl};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 25.6px; letter-spacing: -0.16px; background: #ffffff; color: #080808;
border: 1px solid #d8d8d8; border-radius: 4px;
padding: {spacing.md} {spacing.xl}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 25.6px; letter-spacing: -0.16px; background: #ffffff; color: #080808;
border: 1px solid #d8d8d8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #898989; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 550; line-height: 15.36px; background: #146ef5; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#080808; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #d8d8d8; }
.brand { font-size:16px; font-weight:600; letter-spacing:-.3px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; color:#5a5a5a; font-weight:500; }
.navcta { background:#080808; color:#ffffff; border-radius:6px; padding:9px 18px; font-size:13px; font-weight:600; }
.hero { text-align:center; padding:44px 32px 20px; }
.hero h1 { font-size:42px; font-weight:600; letter-spacing:-1.4px; line-height:1.08; margin:0 auto 14px; max-width:600px; }
.hero p { font-size:14px; color:#363636; margin:0 auto 22px; max-width:420px; }
.btnrow { display:flex; gap:10px; justify-content:center; }
.btn { border-radius:6px; padding:9px 18px; font-size:13px; font-weight:600; }
.btn-blk { background:#080808; color:#ffffff; }
.btn-out { background:#ffffff; color:#080808; border:1px solid #d8d8d8; }
.catstrip { display:flex; gap:10px; padding:8px 32px 22px; justify-content:center; }
.catchip { border-radius:999px; padding:6px 16px; font-size:12px; font-weight:600; color:#ffffff; }
.c-purple { background:#7a3dff; } .c-pink { background:#ed52cb; } .c-blue { background:#3b89ff; }
.c-orange { background:#ff6b00; } .c-green { background:#00d722; color:#080808; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 32px 28px; }
.card { border:1px solid #d8d8d8; border-radius:10px; padding:18px; position:relative; overflow:hidden; }
.card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; }
.c1::before { background:#7a3dff; } .c2::before { background:#3b89ff; } .c3::before { background:#ff6b00; }
.card h3 { font-size:15px; font-weight:600; margin:0 0 6px; letter-spacing:-.2px; }
.card p { font-size:12px; color:#5a5a5a; margin:0; line-height:1.4; }
</style></head>
<body>
<nav>
<div class="brand">Webflow</div>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Resources</span><span>Enterprise</span><span>Pricing</span></div>
<div class="navcta">Get started — it's free</div>
</nav>
<div class="hero">
<h1>Build fully custom, production-grade websites — visually</h1>
<p>The visual-first platform for building exceptional websites, with the power of code.</p>
<div class="btnrow"><button class="btn btn-blk">Start building</button><button class="btn btn-out">Get a demo</button></div>
</div>
<div class="catstrip">
<span class="catchip c-purple">Designer</span>
<span class="catchip c-pink">CMS</span>
<span class="catchip c-blue">Ecommerce</span>
<span class="catchip c-orange">Interactions</span>
<span class="catchip c-green">Hosting</span>
</div>
<div class="cards">
<div class="card c1"><h3>Design freely</h3><p>A visual canvas with the power of hand-written HTML, CSS, and JavaScript.</p></div>
<div class="card c2"><h3>Manage content</h3><p>A CMS built for editors and developers to work side by side.</p></div>
<div class="card c3"><h3>Ship it fast</h3><p>Enterprise-grade hosting on a global edge network, out of the box.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #2a2c6b; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #ffffff; color: #2a2c6b;
border: 1px solid #2a2c6b; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #5a7d2c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:'Lato','Open Sans',sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:monospace; }
nav { height:58px; background:#2a2c6b; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#ffffff; font-size:17px; font-weight:700; letter-spacing:.03em; }
.navlinks { display:flex; gap:22px; font-size:12px; color:#c7c8de; }
.navlinks span.on { color:#ffffff; font-weight:700; }
.lot-search { background:#ffffff; border-radius:4px; padding:7px 14px; font-size:11px; color:#1a1a1a; width:190px; }
.wrap { display:flex; height:522px; padding:24px 30px; gap:28px; }
.photo { width:280px; flex-shrink:0; background:#f2f2f2; border-radius:8px; position:relative; display:flex; align-items:center; justify-content:center; }
.helmet { width:140px; height:100px; border-radius:70px 70px 20px 20px / 60px 60px 16px 16px; background:linear-gradient(160deg,#5a7d2c,#3f5a1e); box-shadow:0 6px 0 rgba(0,0,0,.08); }
.badge-auth { position:absolute; top:14px; left:14px; background:#5a7d2c; color:#fff; font-size:10px; font-weight:700; padding:5px 10px; border-radius:4px; }
.badge-feat { position:absolute; top:14px; right:14px; background:#f68721; color:#fff; font-size:10px; font-weight:700; padding:5px 10px; border-radius:4px; }
.lot-num { position:absolute; bottom:14px; left:14px; font-size:11px; color:#555555; }
.info { flex:1; display:flex; flex-direction:column; gap:12px; }
.info h1 { margin:0; font-size:23px; font-weight:700; }
.provenance { font-size:12px; color:#555555; }
.price-row { display:flex; align-items:baseline; gap:12px; }
.price { font-size:24px; font-weight:700; color:#2a2c6b; }
.price-note { font-size:11px; color:#f68721; font-weight:700; }
.grade-table { display:flex; gap:20px; border-top:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0; padding:10px 0; font-size:12px; }
.grade-table div b { display:block; color:#1a1a1a; font-size:12px; }
.grade-table div span { color:#555555; font-size:11px; }
.desc { font-size:12.5px; color:#333333; line-height:1.6; max-width:480px; }
.buy-row { display:flex; gap:10px; margin-top:auto; }
.btn-buy { flex:1; background:#2a2c6b; color:#fff; border:none; border-radius:4px; padding:13px; font-size:13px; font-weight:700; }
.btn-inquire { border:1px solid #2a2c6b; color:#2a2c6b; border-radius:4px; padding:13px 20px; font-size:13px; }
footer { height:60px; background:#194769; color:#a9c1d6; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; font-size:10.5px; }
</style></head>
<body>
<nav>
<p class="brand">1944 Militaria</p>
<div class="navlinks"><span>Uniforms</span><span class="on">Headgear</span><span>Medals & Insignia</span><span>Field Gear</span></div>
<span class="lot-search mono">LOT #4471</span>
</nav>
<div class="wrap">
<div class="photo">
<span class="badge-auth">Authenticated</span>
<span class="badge-feat">Featured Lot</span>
<div class="helmet"></div>
<span class="lot-num mono">SN-4471-B</span>
</div>
<div class="info">
<h1>M1 Officer's Field Helmet, European Theater, 1944</h1>
<span class="provenance">Provenance: Private US collection, acquired 2011 · Original liner intact</span>
<div class="price-row">
<span class="price">$1,850.00</span>
<span class="price-note">3 collectors watching</span>
</div>
<div class="grade-table">
<div><b>Condition</b><span>Grade A-</span></div>
<div><b>Era</b><span>1944, ETO</span></div>
<div><b>Maker</b><span>McCord Radiator Co.</span></div>
</div>
<p class="desc">Front-seam fixed-bale shell with correct heat lot stamp, paired with a period liner showing honest service wear. Accompanied by a signed letter of authenticity and full condition report.</p>
<div class="buy-row">
<button class="btn-buy">Purchase Lot</button>
<button class="btn-inquire">Ask a Question</button>
</div>
</div>
</div>
<footer><span>© 1944 Militaria — every lot authenticated before listing</span><span>Authentication Policy · Insured Shipping · Returns</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfbfe; color: #1f2124;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfbfe; color: #1f2124;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #1f2124; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #69727d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #cc3366; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #fcfbfe; color: #cc3366;
border: 1px solid #cc3366; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfbfe; color: #1f2124;
border: 1px solid #c5c4c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #69727d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #cc3366; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fcfbfe; font-family:'Nunito Sans','Open Sans',Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e9e6ed;}
.logo{font-size:20px;font-weight:700;color:#1f2124;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:600;}
.navlinks .active{color:#cc3366;border-bottom:2px solid #cc3366;padding-bottom:24px;}
.hero{height:190px;background:#f2f2f2;border-radius:0 0 20px 20px;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;}
.hero h1{font-size:32px;font-weight:700;letter-spacing:-0.5px;color:#1f2124;margin:0 0 8px;}
.hero p{font-size:14px;color:#69727d;margin:0 0 16px;}
.cta{display:inline-block;background:#cc3366;color:#fff;font-size:16px;font-weight:600;padding:14px 32px;border-radius:9999px;}
.rowlabel{padding:18px 34px 10px;font-size:20px;font-weight:600;}
.grid{display:flex;gap:16px;padding:0 34px;}
.card{width:206px;background:#fff;border-radius:12px;padding:16px;position:relative;}
.badge{position:absolute;top:12px;left:12px;font-size:11px;font-weight:700;text-transform:uppercase;border-radius:9999px;padding:4px 10px;z-index:2;}
.thumb{height:96px;border-radius:8px;margin-bottom:10px;}
.title{font-size:16px;font-weight:600;margin-bottom:6px;}
.price{font-size:15px;color:#cc3366;font-weight:600;}
</style>
<div class="nav">
<div class="logo">Magic Sleek</div>
<div class="navlinks"><span class="active">Straightening</span><span>Care</span><span>Tools</span></div>
</div>
<div class="hero">
<h1>Formaldehyde-free. Salon-strong.</h1>
<p>A straightening system that trusts the science and skips the fumes.</p>
<div class="cta">Shop the System</div>
</div>
<div class="rowlabel">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#5eead4;color:#1f2124;">New</span><div class="thumb" style="background:linear-gradient(135deg,#cc3366,#108474);"></div><div class="title">Keratin Smoothing Treatment</div><div class="price">$89</div></div>
<div class="card"><span class="badge" style="background:#cc3366;color:#fff;">Bestseller</span><div class="thumb" style="background:linear-gradient(135deg,#108474,#5eead4);"></div><div class="title">Botanical Repair Serum</div><div class="price">$42</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#720eec,#cc3366);"></div><div class="title">Ionic Straightening Brush</div><div class="price">$64</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.14; letter-spacing: 0.36px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: 0.72px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 420; line-height: 1.5; background: #000000; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 420; line-height: 1.5; background: #000000; color: #ffffff;
border: 1px solid #000000; border-radius: 9999px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 420; line-height: 1.5; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ffffff; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: 0.72px; background: #c1fbd4; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:300; font-size:17px; letter-spacing:1px; }
.navlinks { display:flex; gap:20px; font-size:12.5px; color:rgba(255,255,255,.7); }
.pill { border-radius:9999px; padding:9px 20px; font-size:13px; border:none; }
.pill.outline { background:transparent; border:1.5px solid #fff; color:#fff; }
.hero { position:relative; height:250px; padding:28px 32px; overflow:hidden;
background:radial-gradient(ellipse 640px 300px at 70% 30%, rgba(70,70,80,.5), transparent 65%),
linear-gradient(180deg,#050505,#000 70%); }
.hero h1 { font-size:66px; font-weight:330; letter-spacing:1.6px; line-height:1; margin:0 0 16px; max-width:600px; }
.hero .subrow { display:flex; gap:10px; }
.storefront { position:absolute; right:36px; bottom:0; width:210px; height:190px; border-radius:20px 20px 0 0;
background:linear-gradient(160deg,#1a1a1a,#0a0a0a); border:1px solid rgba(255,255,255,.1); }
.storefront::after { content:''; position:absolute; left:16px; top:20px; right:16px; height:8px; border-radius:4px; background:rgba(255,255,255,.14); }
.cream { background:#fbfbf5; color:#000; padding:22px 32px; }
.creamgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.pc { background:#fff; border-radius:12px; padding:18px; border:1px solid #e4e4e7; }
.pc.featured { background:#c1fbd4; }
.pc h4 { font-size:15px; margin:0 0 6px; font-weight:500; letter-spacing:.3px; }
.pc .price { font-size:26px; font-weight:330; margin:0 0 6px; }
.pc p { font-size:11px; color:#52525b; margin:0; }
.pill.dark { background:#000; color:#fff; }
footer { background:#000; color:#fff; padding:14px 32px; display:flex; justify-content:space-between;
font-size:11px; color:#9797a2; }
</style></head>
<body>
<nav>
<div class="brand">Shopify</div>
<div class="navlinks"><span>Sell online</span><span>Point of sale</span><span>Enterprise</span></div>
<button class="pill outline">Log in</button>
</nav>
<section class="hero">
<h1>Cinematic<br>commerce</h1>
<div class="subrow">
<button class="pill" style="background:#fff;color:#000;">Start free trial</button>
<button class="pill outline">Watch film</button>
</div>
<div class="storefront"></div>
</section>
<section class="cream">
<div class="creamgrid">
<div class="pc"><h4>Basic</h4><div class="price">$29</div><p>For solo merchants starting out</p></div>
<div class="pc featured"><h4>Grow</h4><div class="price">$79</div><p>Best for scaling storefronts</p><button class="pill dark">Start free trial</button></div>
<div class="pc"><h4>Advanced</h4><div class="price">$299</div><p>Custom reporting & support</p></div>
</div>
</section>
<footer>
<span>© Shopify</span>
<span>Shopify · Themes · Apps · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-size: 20px; font-weight:700; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-size: 12px; font-weight:400; line-height:1.4; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #008C56; color: #ffffff;
border: none; border-radius: 999; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #FFFFFF; color: #008C56;
border: 1px solid #008C56; border-radius: 999;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #FFFFFF; color: #111111;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dbefe7; color: #008C56;
border-radius: 999; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: "Sharon Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #FFFFFF; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
.wrap { width:960px; height:640px; display:flex; flex-direction:column; color:#1A1A1A; }
nav { flex:0 0 60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#FFFFFF; box-shadow:0 1px 3px rgba(0,0,0,0.08); position:relative; z-index:2; }
.logo { font-size:19px; font-weight:800; letter-spacing:.06em; color:#1A1A1A; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#4A4A4A; font-weight:500; }
.navcta { display:flex; gap:10px; align-items:center; }
.btn { font-size:13.5px; font-weight:700; border:none; cursor:default; white-space:nowrap; }
.btn-primary { background:#00A868; color:#FFFFFF; padding:11px 24px; border-radius:999px; }
.btn-outline { background:transparent; color:#00A868; border:2px solid #00A868; padding:9px 22px; border-radius:999px; }
main { flex:1 1 auto; display:flex; flex-direction:column; }
.hero { flex:0 0 260px; display:flex; align-items:center; gap:30px; padding:0 32px; background:#F5F5F7; }
.hero-left { flex:1 1 auto; display:flex; flex-direction:column; gap:12px; }
.hero-left .kicker { font-size:12px; font-weight:700; color:#00A868; letter-spacing:.08em; text-transform:uppercase; }
.hero h1 { font-size:40px; font-weight:800; line-height:1.1; margin:0; color:#1A1A1A; max-width:480px; }
.hero p { font-size:16px; color:#4A4A4A; margin:0; max-width:440px; line-height:1.5; }
.hero .row { display:flex; gap:12px; margin-top:8px; }
.machine-wrap { flex:0 0 190px; display:flex; align-items:center; justify-content:center; }
.machine { width:118px; height:180px; background:linear-gradient(180deg,#1A1A1A,#0D0D0D); border-radius:20px; position:relative; box-shadow:0 16px 32px rgba(0,0,0,0.22); padding:14px; display:flex; flex-direction:column; gap:10px; align-items:center; }
.machine .screen { width:100%; height:64px; background:linear-gradient(135deg,#00A868,#33BF87); border-radius:10px; display:flex; align-items:center; justify-content:center; }
.machine .screen span { color:#fff; font-size:20px; font-weight:800; }
.machine .slot { width:80%; height:6px; background:#3D3D3D; border-radius:3px; }
.machine .keys { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:100%; }
.machine .keys i { display:block; height:14px; background:#2D2D2D; border-radius:4px; }
.machine .brand { font-size:9px; letter-spacing:.12em; color:#33BF87; font-weight:800; margin-top:2px; }
.benefits { flex:0 0 60px; display:flex; align-items:center; gap:28px; padding:0 32px; background:#FFFFFF; border-bottom:1px solid #EBEBEB; }
.benefit { display:flex; align-items:center; gap:8px; font-size:13px; color:#4A4A4A; font-weight:500; }
.benefit .check { width:18px; height:18px; border-radius:50%; background:#E6F7F0; color:#00A868; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.products { flex:0 0 220px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:24px 32px; background:#FFFFFF; }
.pcard { border:1px solid #EBEBEB; border-radius:16px; padding:18px 20px; display:flex; flex-direction:column; gap:10px; box-shadow:0 1px 3px rgba(0,0,0,0.08); }
.pcard .icon { width:40px; height:40px; border-radius:12px; background:#E6F7F0; color:#00A868; font-size:18px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.pcard h3 { font-size:17px; font-weight:700; margin:0; color:#1A1A1A; }
.pcard p { font-size:13px; color:#6B6B6B; margin:0; line-height:1.45; }
.pcard .link { font-size:12.5px; font-weight:700; color:#00A868; margin-top:auto; }
footer { flex:0 0 40px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-top:1px solid #EBEBEB; font-size:12px; color:#6B6B6B; background:#FFFFFF; }
</style>
<div class="wrap">
<nav>
<div class="logo">Stone</div>
<div class="navlinks"><span>Sales</span><span>Business account</span><span>Credit</span><span>Management</span></div>
<div class="navcta">
<button class="btn btn-outline">Log in</button>
<button class="btn btn-primary">Get the machine</button>
</div>
</nav>
<main>
<section class="hero">
<div class="hero-left">
<span class="kicker">Payments for entrepreneurs</span>
<h1>Sell more. Wait less.</h1>
<p>One green card machine, one account and one app to run your whole business — built for Brazil's small and medium entrepreneurs.</p>
<div class="row">
<button class="btn btn-primary">Buy now</button>
<button class="btn btn-outline">See plans</button>
</div>
</div>
<div class="machine-wrap">
<div class="machine">
<div class="screen"><span>R$</span></div>
<div class="slot"></div>
<div class="keys"><i></i><i></i><i></i><i></i><i></i><i></i></div>
<span class="brand">STONE</span>
</div>
</div>
</section>
<section class="benefits">
<div class="benefit"><span class="check">✓</span>Money in your account the next day</div>
<div class="benefit"><span class="check">✓</span>No monthly fee</div>
<div class="benefit"><span class="check">✓</span>Support that speaks your language</div>
</section>
<section class="products">
<div class="pcard">
<div class="icon">▮</div>
<h3>Card machine</h3>
<p>Accept cards, Pix and installments in seconds, anywhere you sell.</p>
<span class="link">See models →</span>
</div>
<div class="pcard">
<div class="icon">$</div>
<h3>Business account</h3>
<p>Free digital account made for your business, with instant transfers.</p>
<span class="link">Open account →</span>
</div>
<div class="pcard">
<div class="icon">%</div>
<h3>Credit</h3>
<p>Credit lines based on your real sales, with clear and fair rates.</p>
<span class="link">Check limit →</span>
</div>
</section>
</main>
<footer>
<span>© Stone · StoneCo</span>
<span>Sales · Account · Credit · Support</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0e1311;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0e1311;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; letter-spacing: -0.2px; margin: 0; color: #0e1311; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #11b1a7; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #0e1311;
border: 1px solid #11b1a7; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #333333;
border: 1px solid #c3c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e7656e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Dreamfarm Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background:#ffffff; color:#0e1311;
}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dddddd;background:#fff;}
.logo{font-size:20px;font-weight:700;letter-spacing:-0.3px;color:#0e1311;}
.navlinks{display:flex;gap:24px;font-size:15px;font-weight:500;color:#333;}
.navlinks span.active{color:#11b1a7;border-bottom:2px solid #11b1a7;padding-bottom:4px;}
.searchpill{background:#fff;border:1px solid #dddddd;border-radius:9999px;padding:8px 18px;font-size:13px;color:#888;width:170px;}
.icons{display:flex;gap:12px;align-items:center;}
.iconbtn{width:36px;height:36px;border-radius:9999px;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:14px;}
.hero{height:230px;background:linear-gradient(135deg,#f0f0f0 0%,#e6faf8 100%);display:flex;align-items:center;justify-content:space-between;padding:0 48px;}
.hero-copy h1{font-size:32px;font-weight:700;letter-spacing:-0.5px;margin:0 0 10px;line-height:1.25;}
.hero-copy p{font-size:15px;color:#555;margin:0 0 16px;max-width:340px;}
.hero-cta{background:#11b1a7;color:#fff;font-size:16px;font-weight:600;padding:12px 24px;border-radius:8px;display:inline-block;}
.hero-visual{width:220px;height:150px;border-radius:12px;background:linear-gradient(160deg,#5ddab1,#00a6ce);position:relative;box-shadow:0 8px 20px rgba(0,0,0,0.08);}
.hero-visual::after{content:"";position:absolute;top:20px;left:20px;width:60px;height:60px;border-radius:9999px;background:rgba(255,255,255,0.35);}
.hero-visual::before{content:"";position:absolute;bottom:16px;right:16px;width:100px;height:14px;border-radius:9999px;background:rgba(255,255,255,0.5);}
.section{padding:20px 48px 0;}
.section-title{font-size:22px;font-weight:600;margin:0 0 14px;}
.grid{display:flex;gap:16px;}
.card{flex:1;background:#fff;border-radius:12px;padding:12px;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.card-img{height:90px;border-radius:12px;margin-bottom:8px;position:relative;}
.card-img.c1{background:linear-gradient(135deg,#e7656e,#ffb846);}
.card-img.c2{background:linear-gradient(135deg,#11b1a7,#5ddab1);}
.card-img.c3{background:linear-gradient(135deg,#575ad6,#7563e1);}
.card-img.c4{background:linear-gradient(135deg,#00a6ce,#5ddab1);}
.badge{position:absolute;top:6px;left:6px;background:#e7656e;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 7px;border-radius:4px;}
.card-title{font-size:14px;font-weight:600;margin:4px 0 2px;}
.card-price{font-size:14px;font-weight:600;color:#0e1311;}
.card-price .old{color:#888;text-decoration:line-through;font-weight:400;font-size:12px;margin-left:6px;}
</style>
<nav class="nav">
<div class="logo">Dreamfarm</div>
<div class="navlinks">
<span class="active">Shop</span><span>Spoons</span><span>Peelers</span><span>Gadgets</span><span>About</span>
</div>
<div class="icons">
<div class="searchpill">Search kitchen tools…</div>
<div class="iconbtn">👤</div>
<div class="iconbtn">🛒</div>
</div>
</nav>
<div class="hero">
<div class="hero-copy">
<h1>Tools that make<br>the kitchen kinder.</h1>
<p>Clever, well-loved gear for people who cook every single day.</p>
<div class="hero-cta">Shop the DrawTite Spoon</div>
</div>
<div class="hero-visual"></div>
</div>
<div class="section">
<div class="section-title">Bestselling Gadgets</div>
<div class="grid">
<div class="card"><div class="card-img c1"><span class="badge">New</span></div><div class="card-title">DrawTite Spoon</div><div class="card-price">$14.99</div></div>
<div class="card"><div class="card-img c2"></div><div class="card-title">Y Peeler Set</div><div class="card-price">$11.50 <span class="old">$15.00</span></div></div>
<div class="card"><div class="card-img c3"></div><div class="card-title">Better Grater</div><div class="card-price">$22.00</div></div>
<div class="card"><div class="card-img c4"></div><div class="card-title">Speedy Chop</div><div class="card-price">$28.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #a88ef5; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #a88ef5; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #554978; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c9b5f4; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #a88ef5; color: #000000;
border: 1px solid #c9b5f4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #a88ef5; color: #111111;
border: 1px solid #907ad1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #554978; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ad94f5; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:Pretendard, -apple-system, sans-serif; }
* { box-sizing: border-box; }
.dark { height:340px; padding:32px 40px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.navrow { display:flex; gap:24px; font-size:22px; font-weight:700; margin-bottom:6px; }
.navrow span { color:#aaaaaa; }
.navrow span.on { color:#ffffff; }
h1 { font-size:34px; font-weight:400; line-height:1.3; margin:0; max-width:600px; }
.mark { background:#cedc00; color:#000000; padding:2px 6px; font-weight:400; }
.pilllink { display:inline-flex; align-items:center; background:#000000; border-radius:100px; padding:6px 18px;
font-size:12px; color:#ffffff; box-shadow:0px 0px 10px #cedc00; width:fit-content; margin-top:8px; }
.light { height:300px; background:#f9f8fc; display:flex; align-items:center; justify-content:center; padding:20px; }
.notice { background:#ffffff; border:2px solid #c9b5f4; border-radius:16px; padding:36px 30px;
box-shadow:0px 4px 10px rgba(0,0,0,0.03); width:460px; text-align:center; }
.notice h2 { font-size:22px; font-weight:700; color:#1a1a1a; margin:0 0 10px; }
.notice p { font-size:14px; color:#6b6b6b; margin:0 0 18px; line-height:1.5; }
.violetbtn { background:#a88ef5; color:#ffffff; border-radius:8px; padding:12px 24px; font-size:14px; font-weight:600; }
</style></head>
<body>
<div class="dark">
<div class="navrow"><span class="on">HOME</span><span>ABOUT</span><span>PRODUCT</span><span>NEWSROOM</span></div>
<h1>Making <span class="mark">enterprise work</span><br>easier and more efficient through software</h1>
<span class="pilllink">Visit our latest product →</span>
</div>
<div class="light">
<div class="notice">
<h2>We're saying goodbye</h2>
<p>Typed (Business Canvas) has been discontinued. Export your workspace to Google Drive before the migration window closes.</p>
<span class="violetbtn">Migration Guide</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.0; letter-spacing: 1px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.33; letter-spacing: 0.25px; background: #ffb612; color: #1a1a1a;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.33; letter-spacing: 0.25px; background: #ffffff; color: #313131;
border: 1px solid #ffb612; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fff5de; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#1c1c1c; font-family:-apple-system, Roboto, 'Segoe UI', sans-serif; color:#f0f0f0; }
*{box-sizing:border-box;}
.nav{height:60px;background:#313131;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#ffb612;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:700;text-transform:uppercase;color:#a0a0a0;}
.navlinks span:first-child{color:#fff;}
.timerbadge{background:#ffb612;color:#1a1a1a;font-size:11px;font-weight:700;padding:6px 12px;border-radius:8px;}
.hero{height:230px;background:#313131;display:flex;align-items:center;padding:0 32px;}
.heroText{width:460px;}
.kicker{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#ffb612;margin-bottom:10px;}
.h1{font-size:28px;font-weight:700;line-height:1.2;margin:0 0 10px;color:#fff;}
.sub{font-size:13px;color:#a0a0a0;margin:0 0 18px;max-width:360px;}
.btn{display:inline-flex;align-items:center;height:42px;padding:0 24px;border-radius:8px;background:#ffb612;color:#1a1a1a;font-size:13px;font-weight:700;}
.slabs{width:400px;height:230px;position:relative;}
.slab{position:absolute;width:130px;height:170px;border-radius:8px;background:#1a1a1a;border:2px solid #ffb612;}
.s1{left:40px;top:30px;transform:rotate(-6deg);} .s2{left:130px;top:15px;background:#242424;border-color:#3e3e3e;}
.grade{position:absolute;left:150px;top:22px;background:#ffb612;color:#1a1a1a;font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;}
.sec{padding:18px 32px;}
.sectitle{font-size:15px;font-weight:700;margin-bottom:12px;color:#fff;}
.grid{display:flex;gap:14px;}
.card{width:216px;background:#242424;border-radius:8px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,0.35);}
.thumb{height:90px;position:relative;}
.chip{position:absolute;top:8px;left:8px;background:#ffb612;color:#1a1a1a;font-size:10px;font-weight:700;padding:2px 8px;border-radius:9999px;}
.hotchip{position:absolute;top:8px;right:8px;background:#ffb612;color:#1a1a1a;font-size:10px;font-weight:700;padding:2px 8px;border-radius:9999px;}
.pbody{padding:10px 12px 12px;}
.ptitle{font-size:13px;font-weight:700;color:#fff;margin-bottom:4px;}
.pmeta{font-size:11px;color:#7a7a7a;margin-bottom:6px;}
.pprice{font-size:14px;font-weight:700;color:#ffb612;}
</style>
<div class="nav">
<div class="logo">Steel City Collectibles</div>
<div class="navlinks"><span>Sealed Wax</span><span>Live Breaks</span><span>Graded Slabs</span><span>Auctions</span></div>
<div class="timerbadge">Live Break 04:12</div>
</div>
<div class="hero">
<div class="heroText">
<div class="kicker">Certified & Sealed</div>
<div class="h1">Every pull, every slab,<br>authenticated.</div>
<div class="sub">Sealed wax, live breaks and graded cards, organized for the collector who knows exactly what they want.</div>
<div class="btn">Shop Breaks</div>
</div>
<div class="slabs"><div class="slab s1"></div><div class="slab s2"><div class="grade">PSA 10</div></div></div>
</div>
<div class="sec">
<div class="sectitle">Trending Now</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#313131"><div class="chip">BGS 9.5</div><div class="hotchip">HOT</div></div><div class="pbody"><div class="ptitle">2024 Prizm Silver Rookie</div><div class="pmeta">Graded slab, PWE shipped</div><div class="pprice">$189.00</div></div></div>
<div class="card"><div class="thumb" style="background:#3e3e3e"><div class="chip">Sealed</div></div><div class="pbody"><div class="ptitle">Hobby Box, 2024 Series</div><div class="pmeta">24 packs per box</div><div class="pprice">$249.99</div></div></div>
<div class="card"><div class="thumb" style="background:#1a1a1a"><div class="chip">PSA 10</div></div><div class="pbody"><div class="ptitle">Vintage Rookie Card</div><div class="pmeta">Population report: 12</div><div class="pprice">$1,299.00</div></div></div>
<div class="card"><div class="thumb" style="background:#313131"></div><div class="pbody"><div class="ptitle">Jersey Patch Auto /99</div><div class="pmeta">On-card autograph</div><div class="pprice">$449.00</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #010101;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #010101;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #010101; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #8a8a8a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #84abfc; color: #000000;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #010101;
border: 1px solid #84abfc; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #010101;
border: 1px solid #c0c0c0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ee3a45; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Poppins','Mabry Pro',-apple-system,sans-serif; background:#ffffff; color:#010101; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e2e2e2;}
.logo{font-size:19px;font-weight:600;letter-spacing:.3px;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;letter-spacing:.3px;text-transform:uppercase;}
.navlinks .a{color:#010101;border-bottom:2px solid #84abfc;padding-bottom:24px;}
.navlinks .i{color:#8a8a8a;}
.hero{height:250px;background:#f7f7f7;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.herotext{max-width:400px;}
.herotext h1{font-size:36px;font-weight:600;letter-spacing:-.3px;margin:0 0 12px;line-height:1.2;}
.herotext p{font-size:15px;color:#151515;margin:0 0 18px;}
.hbtn{display:inline-block;background:#84abfc;color:#fff;font-size:14px;font-weight:500;letter-spacing:.3px;padding:12px 26px;border-radius:4px;}
.device{width:150px;height:180px;border-radius:16px;background:linear-gradient(155deg,#010101,#2a2a2a);position:relative;box-shadow:0 16px 30px rgba(0,0,0,.22);}
.device:after{content:'';position:absolute;left:30%;top:14px;width:40%;height:14px;border-radius:9999px;background:#639cff;box-shadow:0 0 16px #84abfc;}
.sec{padding:20px 40px 0;}
.sectitle{font-size:18px;font-weight:500;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:196px;background:#fff;border-radius:8px;padding:16px;}
.thumb{height:96px;background:#f7f7f7;border-radius:8px;margin-bottom:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;color:#fff;background:#84abfc;}
.badge.sale{background:#ee3a45;}
.ptitle{font-size:16px;font-weight:500;}
.pprice{font-size:16px;color:#151515;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#010101;color:#acacac;font-size:12px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
</style>
<div class="wrap">
<div class="nav"><div class="logo">Nuface</div><div class="navlinks"><span class="a">Devices</span><span class="i">Gels & Accessories</span><span class="i">Results</span><span class="i">Support</span></div></div>
<div class="hero"><div class="herotext"><h1>Microcurrent, made precise.</h1><p>Clinical-grade devices engineered for a five-minute daily routine.</p><div class="hbtn">Shop Devices</div></div><div class="device"></div></div>
<div class="sec">
<div class="sectitle">Shop the Line</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">New</div></div><div class="ptitle">Trinity+ Device</div><div class="pprice">$339</div></div>
<div class="card"><div class="thumb"><div class="badge sale">Sale</div></div><div class="ptitle">Mini+ Device</div><div class="pprice">$199</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Hydrating Leave-On Gel</div><div class="pprice">$45</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Firming Facial Trainer</div><div class="pprice">$79</div></div>
</div>
</div>
<div class="footer"><span>Five minutes a day, clinically studied</span><span>How It Works · Reviews</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0d0d0d; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0d0d0d; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #d10000; color: #ffffff;
border: none; border-radius: 2px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: transparent; color: #ffffff;
border: 1px solid #d10000; border-radius: 2px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #2d2d2d; color: #ffffff;
border: 1px solid #0c0c0c; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d10000; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Inter','Segoe UI',sans-serif; background:#0d0d0d; color:#fff; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#0d0d0d;border-bottom:1px solid #333;}
.logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;}
.logo span{color:#d10000;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#999;}
.navlinks .on{color:#fff;border-bottom:2px solid #d10000;padding-bottom:20px;}
.cart{width:36px;height:36px;background:#2d2d2d;border-radius:4px;}
.hero{height:230px;display:flex;background:linear-gradient(120deg,#1a1a1a 55%,#0a0a0a 100%);position:relative;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%,0 92%);}
.herotxt{width:52%;padding:26px 32px;display:flex;flex-direction:column;justify-content:center;}
.tag{font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#d10000;margin-bottom:8px;}
.herotxt h1{font-size:32px;font-weight:700;margin:0 0 8px;letter-spacing:-1px;line-height:1.1;}
.herotxt p{font-size:13px;color:#999;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;width:fit-content;background:#d10000;color:#fff;font-size:13px;font-weight:600;padding:12px 24px;border-radius:2px;}
.rig{width:48%;position:relative;background:radial-gradient(circle at 65% 45%,#3a0000,#0a0a0a 70%);}
.rig:before{content:'';position:absolute;right:60px;top:50px;width:180px;height:110px;background:linear-gradient(135deg,#2d2d2d,#1a1a1a);border-radius:2px;transform:skew(-6deg);}
.rig:after{content:'';position:absolute;right:70px;top:60px;width:150px;height:6px;background:#d10000;box-shadow:0 20px 0 #c0c0c0,0 40px 0 #d10000;}
.specs{display:flex;gap:1px;background:#333;margin:16px 32px 0;}
.spec{flex:1;background:#1a1a1a;text-align:center;padding:12px 6px;}
.spec .lbl{font-size:10px;color:#999;letter-spacing:0.5px;text-transform:uppercase;}
.spec .val{font-size:20px;font-weight:700;margin-top:4px;}
.grid{display:flex;gap:12px;padding:16px 32px 0;}
.card{width:150px;background:#2d2d2d;border-radius:4px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#d10000;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:2px 6px;border-radius:2px;}
.thumb{height:88px;border-radius:4px;margin-bottom:8px;background:#1a1a1a;}
.pname{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.2px;line-height:1.3;height:30px;overflow:hidden;}
.pprice{font-size:14px;font-weight:700;color:#d10000;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;color:#666;border-top:1px solid #333;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Msi <span>GAMING</span></div>
<div class="navlinks"><div class="on">Laptops</div><div>Desktops</div><div>Peripherals</div><div>Support</div></div>
<div class="cart"></div>
</div>
<div class="hero">
<div class="herotxt">
<div class="tag">Raider GE Series</div>
<h1>Engineered For<br>Zero Compromise</h1>
<p>Overclocked cores, liquid metal cooling, RGB precision built for competitive frame rates.</p>
<div class="cta">Configure Now</div>
</div>
<div class="rig"></div>
</div>
<div class="specs">
<div class="spec"><div class="lbl">CPU</div><div class="val">i9-14900HX</div></div>
<div class="spec"><div class="lbl">GPU</div><div class="val">RTX 4090</div></div>
<div class="spec"><div class="lbl">Display</div><div class="val">240Hz</div></div>
<div class="spec"><div class="lbl">RAM</div><div class="val">32GB</div></div>
</div>
<div class="grid">
<div class="card"><div class="badge">Gaming</div><div class="thumb" style="background:linear-gradient(135deg,#d10000,#1a1a1a)"></div><div class="pname">Raider GE78 HX</div><div class="pprice">$2,899</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a1a1a,#00a8ff)"></div><div class="pname">Creator Z16 HX</div><div class="pprice">$2,499</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2d2d2d,#c0c0c0)"></div><div class="pname">Stealth 14 Studio</div><div class="pprice">$1,899</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d10000,#2d2d2d)"></div><div class="pname">Vector 16 HX</div><div class="pprice">$2,199</div></div>
</div>
<div class="footer"><span>© Precision Engineering</span><span>Drivers & Downloads Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #0057A8; color: #FFFFFF;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #FFFFFF; color: #0057A8;
border: 1px solid #0057A8; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #FFFFFF; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #B8922A; color: #FFFFFF;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#4A4A4A; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #E0E0E0;}
.logo{font-size:20px;font-weight:700;color:#313131;}
.navutil{display:flex;gap:16px;align-items:center;}
.navutil .btn{background:#0057A8;color:#fff;font-size:13px;font-weight:600;padding:9px 18px;border-radius:8px;}
.rail{height:40px;display:flex;gap:26px;align-items:center;padding:0 30px;border-bottom:1px solid #E0E0E0;}
.railitem{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.2px;color:#4A4A4A;padding-bottom:11px;}
.railitem.on{color:#0057A8;border-bottom:2px solid #0057A8;}
.hero{height:150px;background:#313131;display:flex;align-items:center;padding:0 30px;}
.h1{font-size:28px;font-weight:700;color:#fff;margin:0 0 6px;letter-spacing:-0.3px;}
.hsub{font-size:14px;color:#cfcfcf;max-width:440px;margin:0 0 12px;}
.hbtn{display:inline-block;background:#0057A8;color:#fff;font-size:14px;font-weight:600;padding:11px 22px;border-radius:8px;}
.section{padding:18px 30px 0;}
.sectitle{font-size:15px;font-weight:600;color:#313131;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#fff;border-radius:12px;padding:14px;}
.thumb{height:88px;background:#F4F4F4;border-radius:8px;margin-bottom:8px;position:relative;overflow:hidden;}
.frame{position:absolute;inset:14px;border:4px solid #313131;border-radius:2px;}
.tier{position:absolute;top:6px;left:6px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#fff;padding:3px 8px;border-radius:4px;}
.ptitle{font-size:16px;font-weight:600;color:#313131;}
.pprice{font-size:14px;color:#4A4A4A;margin-top:4px;}
.pspec{font-size:12px;color:#717171;margin-top:2px;}
</style>
<div class="nav">
<div class="logo">Quartet</div>
<div class="navutil"><div class="btn">Book a Consultation</div></div>
</div>
<div class="rail">
<div class="railitem on">Whiteboards</div><div class="railitem">Cork Boards</div><div class="railitem">Glass Boards</div><div class="railitem">Planners</div><div class="railitem">Accessories</div>
</div>
<div class="hero">
<div><div class="h1">Boards Built for the Long Meeting</div><div class="hsub">Glass, porcelain, and melamine surfaces engineered for daily use — chosen by the room, not the aesthetic.</div><div class="hbtn">Shop All Boards</div></div>
</div>
<div class="section">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="tier" style="background:#B8922A;">Glass</div><div class="frame"></div></div><div class="ptitle">Infinity Glass Board</div><div class="pspec">Magnetic · 48x36in</div><div class="pprice">$289.00</div></div>
<div class="card"><div class="thumb"><div class="tier" style="background:#5B8DB8;">Porcelain</div><div class="frame"></div></div><div class="ptitle">Prestige Porcelain Board</div><div class="pspec">Aluminum Frame · 36x24in</div><div class="pprice">$149.00</div></div>
<div class="card"><div class="thumb"><div class="tier" style="background:#717171;">Melamine</div><div class="frame"></div></div><div class="ptitle">Classic Melamine Board</div><div class="pspec">Value Line · 24x18in</div><div class="pprice">$39.00</div></div>
<div class="card"><div class="thumb"><div class="tier" style="background:#B8922A;">Glass</div><div class="frame"></div></div><div class="ptitle">Boardwalk Color Panel</div><div class="pspec">Frameless · 60x40in</div><div class="pprice">$399.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #58595b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #58595b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -0.2px; margin: 0; color: #58595b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.2; letter-spacing: 1.6px; margin: 0; color: #a7a9ac; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #b92c32; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #ffffff; color: #58595b;
border: 1px solid #b92c32; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #58595b;
border: 1px solid #d5d6d6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a7a9ac; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: 1.6px; background: #ffffff; color: #000000;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#58595b; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #eeeeee;}
.logo{font-size:20px;font-weight:700;letter-spacing:-1px;color:#58595b;}
.navlinks{display:flex;gap:32px;font-size:14px;color:#58595b;}
.navlinks .active{color:#b92c32;}
.hero{height:340px;display:flex;padding:0 40px;}
.herotext{width:440px;display:flex;flex-direction:column;justify-content:center;}
.herotext .spec{font-family:Eurostile,sans-serif;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#a7a9ac;margin-bottom:14px;}
.herotext h1{font-size:44px;font-weight:700;letter-spacing:-1.5px;line-height:1.05;margin:0 0 16px;color:#58595b;}
.herotext p{font-size:15px;color:#a7a9ac;max-width:340px;margin:0 0 24px;}
.btnrow{display:flex;gap:12px;}
.btn-primary{background:#b92c32;color:#fff;font-size:14px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;padding:14px 28px;}
.btn-secondary{background:#fff;color:#58595b;border:1px solid #58595b;font-size:14px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;padding:13px 27px;}
.heroimg{flex:1;background:linear-gradient(160deg,#eeeeee 0%,#eeeeee 60%,#f5f5f5 100%);position:relative;margin-left:20px;}
.heroimg:before{content:'';position:absolute;left:44%;top:20%;width:60px;height:150px;background:#9ca3af;}
.heroimg:after{content:'';position:absolute;left:38%;top:12%;width:150px;height:40px;background:#58595b;}
.spectable{display:flex;gap:1px;background:#eeeeee;margin:0 40px;}
.speccell{flex:1;background:#eeeeee;text-align:center;padding:14px 8px;}
.speclabel{font-family:Eurostile,sans-serif;font-size:11px;letter-spacing:0.9px;text-transform:uppercase;color:#a7a9ac;}
.specvalue{font-size:15px;color:#58595b;margin-top:4px;font-weight:600;}
.grid{display:flex;gap:1px;background:#eeeeee;margin:24px 40px 0;}
.card{flex:1;background:#fff;padding:16px;}
.thumb{height:100px;background:#eeeeee;margin-bottom:10px;}
.model{font-family:Eurostile,sans-serif;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#a7a9ac;}
.ptitle{font-size:22px;font-weight:700;color:#58595b;margin:4px 0;}
.pspec{font-family:Eurostile,sans-serif;font-size:11px;letter-spacing:0.5px;text-transform:uppercase;color:#a7a9ac;}
</style>
<div class="nav">
<div class="logo">Rocket Espresso</div>
<div class="navlinks"><div class="active">Home Machines</div><div>Commercial</div><div>Grinders</div><div>Support</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="spec">Dual Boiler · E61 Grouphead</div>
<h1>Machines you service, not consume.</h1>
<p>Hand-polished steel, engraved knobs, and a boiler system built to hold pressure for decades.</p>
<div class="btnrow"><div class="btn-primary">Configure</div><div class="btn-secondary">Find a Dealer</div></div>
</div>
<div class="heroimg"></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Boiler</div><div class="specvalue">Dual, 2.7L</div></div>
<div class="speccell"><div class="speclabel">Pump Pressure</div><div class="specvalue">9 Bar</div></div>
<div class="speccell"><div class="speclabel">Heating</div><div class="specvalue">PID</div></div>
<div class="speccell"><div class="speclabel">Width</div><div class="specvalue">38 cm</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="model">R58</div><div class="ptitle">Mozzafiato</div><div class="pspec">E61 · Dual Boiler</div></div>
<div class="card"><div class="thumb"></div><div class="model">R9V</div><div class="ptitle">R Nine One</div><div class="pspec">Vibration Pump</div></div>
<div class="card"><div class="thumb"></div><div class="model">GS3</div><div class="ptitle">Giotto</div><div class="pspec">Single Boiler</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #1d1d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #1d1d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #1d1d1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #616161; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #77471f; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f7f7f7; color: #77471f;
border: 1px solid #77471f; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1d1d1d;
border: 1px solid #c0c0c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #616161; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.25px; background: #9a6372; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f7; color:#1d1d1d; box-sizing:border-box;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-size:18px; font-weight:600; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; color:#1d1d1d; }
.navlinks span:first-child { color:#77471f; border-bottom:2px solid #77471f; padding-bottom:6px; }
.layout { display:flex; height:calc(640px - 64px); }
.media { width:320px; flex-shrink:0; background:#ffffff; display:flex; align-items:center; justify-content:center; }
.cover { width:170px; height:250px; background:linear-gradient(160deg, #77471f 0%, #855935 60%, #9a6372 100%); border-radius:2px;
box-shadow:0 10px 26px rgba(0,0,0,0.12); }
.detail { flex:1; padding:26px 34px; display:flex; flex-direction:column; gap:12px; }
.kicker { font-size:13px; color:#616161; }
h1 { font-size:28px; font-weight:700; margin:0; }
.author { font-size:15px; color:#616161; }
.price { font-size:18px; }
.badge { background:#9a6372; color:#ffffff; font-size:12px; border-radius:4px; padding:2px 8px; width:fit-content; }
.desc { font-size:14px; color:#424242; line-height:1.6; }
.actions { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#77471f; color:#ffffff; border:none; border-radius:8px; height:44px; font-size:14px;
font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.btn-secondary { background:#f7f7f7; color:#77471f; border:2px solid #77471f; border-radius:8px; height:44px;
padding:0 20px; font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
</style></head>
<body>
<div class="topbar">
<div class="brand">Coffee House Press</div>
<div class="navlinks"><span>Poetry</span><span>Fiction</span><span>Authors</span><span>Events</span></div>
</div>
<div class="layout">
<div class="media"><div class="cover"></div></div>
<div class="detail">
<div class="kicker">Poetry Collection</div>
<h1>Field Notes from the Interior</h1>
<div class="author">by Rosalind Achebe</div>
<div class="price">$17.00</div>
<div class="badge">Award Winner</div>
<div class="desc">A quiet, precise collection tracing memory and migration through the American Midwest — Achebe's most assured work yet.</div>
<div class="actions">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Read More</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #3c404d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #3c404d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; color: #3c404d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7585; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.2px; background: #ffd100; color: #3c404d;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.2px; background: #ffffff; color: #3c404d;
border: 1px solid #ffd100; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #3c404d;
border: 1px solid #cecfd2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7585; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #ffd100; color: #3c404d;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#3c404d; box-sizing:border-box;
font-family:Calibri, Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#3c404d; }
.brand { font-size:17px; font-weight:700; color:#ffd100; letter-spacing:0.02em; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#c1ccd0; font-weight:600; }
.navlinks span.on { color:#ffd100; }
.search { background:#4c5160; color:#c1ccd0; font-size:12px; padding:7px 14px; border-radius:4px; width:220px; }
main { display:flex; height:580px; }
.breadcrumb { padding:10px 32px; font-size:11px; color:#6b7585; border-bottom:1px solid #eaeaea; }
.body-row { display:flex; height:544px; }
.gallery { width:340px; background:#f4f5f6; display:flex; align-items:center; justify-content:center; position:relative; }
.device { width:170px; height:230px; background:#3c404d; border-radius:8px; position:relative;
box-shadow:0 16px 30px rgba(60,64,77,0.28); }
.device::before { content:''; position:absolute; top:18px; left:18px; right:18px; height:76px;
background:linear-gradient(160deg,#7fcdfe,#aadeff); border-radius:4px; }
.device::after { content:'A M E C'; position:absolute; bottom:16px; left:0; right:0; text-align:center;
color:#ffd100; font-size:11px; font-weight:700; letter-spacing:0.2em; }
.clamp { position:absolute; top:74px; left:50%; transform:translateX(-50%); width:60px; height:60px;
border:8px solid #c1ccd0; border-radius:50%; border-left-color:transparent; }
.badge-cal { position:absolute; top:18px; left:18px; background:#ffd100; color:#3c404d; font-size:10px;
font-weight:700; padding:5px 10px; border-radius:4px; }
.info { flex:1; padding:26px 32px; display:flex; flex-direction:column; gap:10px; }
.partno { font-size:11px; color:#6b7585; font-weight:600; }
h1 { font-size:21px; font-weight:700; margin:0; line-height:1.3; }
.stars { font-size:12px; color:#3c404d; }
.stars .n { color:#6b7585; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; padding:8px 0; border-top:1px solid #eaeaea;
border-bottom:1px solid #eaeaea; }
.price { font-size:22px; font-weight:700; }
.spec-table { font-size:12px; border-collapse:collapse; width:100%; }
.spec-table td { padding:5px 0; border-bottom:1px solid #eaeaea; }
.spec-table td.k { color:#6b7585; width:130px; }
.spec-table td.v { font-weight:600; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#ffd100; color:#3c404d; border:none; border-radius:4px; padding:12px 18px;
font-size:14px; font-weight:700; }
.btn-outline { border:1.5px solid #3c404d; color:#3c404d; background:#fff; border-radius:4px; padding:11px 16px;
font-size:12.5px; font-weight:700; white-space:nowrap; }
.stock { font-size:11.5px; color:#1f873d; font-weight:700; }
</style></head>
<body>
<nav>
<div class="brand">Aemc Instruments</div>
<div class="navlinks"><span class="on">Clamp Meters</span><span>Power Analyzers</span><span>Insulation Testers</span><span>Support</span></div>
<div class="search">Search part #...</div>
</nav>
<div class="breadcrumb">Home / Test & Measurement / Clamp Meters / MTX 3630</div>
<div class="body-row">
<div class="gallery">
<span class="badge-cal">ISO Calibrated</span>
<div class="clamp"></div>
<div class="device"></div>
</div>
<div class="info">
<span class="partno">Part No. 2140.63</span>
<h1>MTX 3630 True-RMS Power Clamp Meter</h1>
<div class="stars">★★★★☆ <span class="n">4.4 · 96 verified reviews</span></div>
<div class="price-row"><span class="price">$612.00</span></div>
<table class="spec-table">
<tr><td class="k">Current range</td><td class="v">0.5 A – 1200 A AC/DC</td></tr>
<tr><td class="k">Accuracy</td><td class="v">±0.5% rdg</td></tr>
<tr><td class="k">CAT rating</td><td class="v">CAT IV 600V</td></tr>
<tr><td class="k">Interface</td><td class="v">Bluetooth · DataView®</td></tr>
</table>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">Download Datasheet</button>
</div>
<span class="stock">✓ In stock — ships within 24 hours</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdfbf6; color: #252222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdfbf6; color: #252222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #252222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #da532c; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #fdfbf6; color: #252222;
border: 1px solid #da532c; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fdfbf6; color: #231f20;
border: 1px solid #c7c5c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #7bc6b9; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Honey Pot Company Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Domaine Sans Text',Georgia,'Times New Roman',serif; background:#fdfbf6; color:#231f20; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-family:'Rational Display','Domaine Sans Text',Georgia,serif;font-size:19px;font-weight:600;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;letter-spacing:.1px;}
.navlinks .active{color:#da532c;}
.btn{display:inline-block;background:#da532c;color:#fff;font-family:'Rational Display',sans-serif;font-weight:600;font-size:14px;padding:11px 24px;border-radius:999px;}
.hero{display:flex;align-items:center;padding:14px 36px;gap:28px;height:230px;}
.hero-visual{width:300px;height:200px;background:linear-gradient(150deg,#d7f0e8,#dccdf1);border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#5a4a5a;font-size:10px;}
.hero-txt h1{font-family:'Rational Display',sans-serif;font-size:30px;font-weight:700;line-height:1.2;margin:0 0 8px;}
.quote{font-style:italic;font-weight:300;font-size:16px;color:#6a5e5e;margin:0 0 14px;max-width:340px;}
.section{padding:6px 36px;}
.section h2{font-family:'Rational Display',sans-serif;font-size:16px;font-weight:600;margin:0 0 10px;}
.rowcards{display:flex;gap:14px;}
.card{background:#fff;border-radius:12px;flex:1;overflow:hidden;position:relative;}
.imgbox{height:70px;background:#f7f0e8;display:flex;align-items:center;justify-content:center;color:#9e9494;font-size:9px;text-align:center;}
.cardbody{padding:10px;}
.badge{position:absolute;top:8px;left:8px;font-family:'Syke Mono','Courier New',monospace;font-size:9px;text-transform:uppercase;padding:2px 8px;border-radius:999px;}
.badge.vegan{background:#d7f0e8;color:#7bc6b9;}
.badge.new{background:#7bc6b9;color:#fff;}
.badge.sale{background:#da532c;color:#fff;}
.pname{font-family:'Rational Display',sans-serif;font-size:13px;font-weight:600;margin:2px 0;}
.price{color:#da532c;font-weight:600;font-size:13px;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#252222;color:#fdfbf6;padding:12px 36px;display:flex;justify-content:space-between;font-size:11px;}
</style>
<div class="nav">
<div class="logo">Honey Pot Company</div>
<div class="navlinks"><span class="active">Feminine Care</span><span>Vaginal Health</span><span>Bundles</span></div>
<div class="btn">Shop Now</div>
</div>
<div class="hero">
<div class="hero-visual">BOTANICAL PHOTOGRAPHY</div>
<div class="hero-txt">
<h1>Wellness, gently<br>plant-derived.</h1>
<div class="quote">"A trusted friend who happens to be a botanist."</div>
<div class="btn">Shop Vaginal Health</div>
</div>
</div>
<div class="section">
<h2>Shop the Line</h2>
<div class="rowcards">
<div class="card"><div class="badge vegan">Vegan</div><div class="imgbox">Wash</div><div class="cardbody"><div class="pname">Normal Wash</div><div class="price">$13.99</div></div></div>
<div class="card"><div class="badge new">New</div><div class="imgbox">Suppositories</div><div class="cardbody"><div class="pname">Boric Acid Suppositories</div><div class="price">$19.99</div></div></div>
<div class="card"><div class="badge sale">Sale</div><div class="imgbox">Wipes</div><div class="cardbody"><div class="pname">Refreshing Wipes</div><div class="price">$8.49</div></div></div>
</div>
</div>
<div class="footer"><span>© Honey Pot Company</span><span>Ingredients · Support · Legal</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e3ded2; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e3ded2; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 500; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #2e9e7b; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #1a1a1a;
border: 1px solid #2e9e7b; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #b1ada4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ff8717; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Lexend','Lexend Deca','Helvetica Neue',Arial,sans-serif; background:#e3ded2; color:#222222; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#e3ded2;}
.logo{font-size:19px;font-weight:600;color:#1a1a1a;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:0.3px;text-transform:uppercase;color:#1a1a1a;}
.search{width:150px;height:40px;border-radius:9999px;background:#fff;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#676986;border:1px solid #e5e5e4;}
.hero{height:230px;display:flex;align-items:center;background:#fbf6f3;padding:0 32px;}
.herotext{width:420px;}
.herotext h1{font-size:34px;font-weight:600;color:#1a1a1a;margin:0 0 12px;letter-spacing:-0.4px;line-height:1.2;}
.herotext p{font-size:16px;color:#222222;margin:0 0 18px;max-width:320px;}
.cta{display:inline-block;background:#2e9e7b;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:12px 24px;border-radius:8px;}
.heroimg{width:280px;height:150px;border-radius:12px;margin-left:auto;position:relative;overflow:hidden;background:#fff;}
.heroimg:before{content:'';position:absolute;left:40px;top:30px;width:200px;height:90px;border-radius:45px;background:linear-gradient(160deg,#2e9e7b,#475e66);}
.section{padding:18px 32px 0;}
.sectitle{font-size:16px;font-weight:600;color:#1a1a1a;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:150px;background:#fff;border-radius:12px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#ff8717;color:#fff;font-size:9px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;border-radius:9999px;padding:3px 8px;}
.thumb{aspect-ratio:1/1;background:#fbf6f3;border-radius:12px;margin-bottom:8px;}
.pname{font-size:14px;font-weight:600;color:#1a1a1a;line-height:1.3;}
.swatches{display:flex;gap:4px;margin-top:6px;}
.sw{width:16px;height:16px;border-radius:9999px;}
.pprice{font-size:16px;font-weight:600;color:#1a1a1a;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#e3ded2;color:#676986;font-size:12px;border-top:1px solid #e5e5e4;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kyte Baby</div>
<div class="navlinks"><div>Sleep Bags</div><div>Clothing</div><div>Bedding</div><div>Bundles</div></div>
<div class="search">Search...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Bamboo softness, calm by design.</h1>
<p>Sleep essentials built for serene nights, not stimulation.</p>
<div class="cta">Shop Sleep Bags</div>
</div>
<div class="heroimg"></div>
</div>
<div class="section">
<div class="sectitle">Bestsellers</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#2e9e7b,#fbf6f3)"></div><div class="pname">Sleep Bag 1.0 TOG</div><div class="swatches"><div class="sw" style="background:#2e9e7b"></div><div class="sw" style="background:#475e66"></div></div><div class="pprice">$48.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#777968,#fbf6f3)"></div><div class="pname">Bamboo Romper</div><div class="swatches"><div class="sw" style="background:#777968"></div></div><div class="pprice">$36.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#475e66,#e3ded2)"></div><div class="pname">Toddler Bedding Set</div><div class="swatches"><div class="sw" style="background:#475e66"></div><div class="sw" style="background:#e3ded2"></div></div><div class="pprice">$68.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2e9e7b,#777968)"></div><div class="pname">Swaddle Blanket</div><div class="swatches"><div class="sw" style="background:#2e9e7b"></div></div><div class="pprice">$32.00</div></div>
</div>
</div>
<div class="footer"><span>© Kyte Baby</span><span>Shipping · Returns</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #676767; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #006bb4; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #ffffff; color: #222222;
border: 1px solid #006bb4; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #343434;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676767; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #006bb4; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f8f8; color:#343434; font-family:'Open Sans','Roboto',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;background:#222222;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:19px;font-weight:600;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;color:#c6c6c6;}
.navcta{background:#006bb4;color:#fff;font-size:12px;font-weight:600;padding:9px 18px;border-radius:8px;}
.hero{height:230px;display:flex;align-items:center;padding:0 34px;background:#303030;position:relative;overflow:hidden;}
.herotext{width:50%;}
.herotext h1{font-size:28px;font-weight:600;color:#fff;margin:0 0 12px;line-height:1.25;}
.herotext p{font-size:13px;color:#c6c6c6;margin:0 0 18px;max-width:320px;line-height:1.6;}
.cta{display:inline-block;background:#006bb4;color:#fff;font-size:13px;font-weight:600;padding:12px 26px;border-radius:8px;width:fit-content;}
.loop{position:absolute;right:70px;top:40px;width:180px;height:150px;}
.rad{position:absolute;width:60px;height:150px;background:#0f0f0f;border-radius:8px;right:0;top:0;}
.fan{position:absolute;width:56px;height:56px;border-radius:50%;border:3px solid #006bb4;right:2px;box-shadow:0 0 16px 4px rgba(0,107,180,0.5);}
.f1{top:6px;} .f2{top:66px;} .f3{top:126px;}
.tube{position:absolute;width:90px;height:8px;background:#006bb4;right:60px;top:70px;border-radius:4px;}
.seclabel{font-size:13px;font-weight:600;color:#222222;padding:20px 34px 12px;}
.grid{display:flex;gap:14px;padding:0 34px;}
.card{width:150px;background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 7px;border-radius:6px;color:#fff;z-index:2;}
.badge-sale{background:#e02b27;} .badge-limited{background:#ff5501;}
.thumb{height:90px;border-radius:8px;margin-bottom:8px;background:#f8f8f8;}
.ptitle{font-size:12px;font-weight:600;color:#222222;line-height:1.3;height:30px;overflow:hidden;}
.pprice{font-size:13px;font-weight:700;color:#006bb4;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:11px;color:#676767;border-top:1px solid #e5e5e5;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Thermaltake</div>
<div class="navlinks"><span>Cooling</span><span>Cases</span><span>Power Supplies</span><span>Peripherals</span></div>
<div class="navcta">Build Configurator</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Liquid-Cooled Performance, Engineered Quiet.</h1>
<p>AIO coolers and cases built to keep the hardware's light show running cool.</p>
<div class="cta">Shop Cooling</div>
</div>
<div class="loop"><div class="tube"></div><div class="rad"></div><div class="fan f1"></div><div class="fan f2"></div><div class="fan f3"></div></div>
</div>
<div class="seclabel">Toughpower Series</div>
<div class="grid">
<div class="card"><div class="badge badge-sale">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#006bb4,#222222)"></div><div class="ptitle">TH360 ARGB AIO Cooler</div><div class="pprice">$129.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#222222,#006bb4)"></div><div class="ptitle">Core P3 Case</div><div class="pprice">$159.99</div></div>
<div class="card"><div class="badge badge-limited">Limited</div><div class="thumb" style="background:linear-gradient(135deg,#343434,#006bb4)"></div><div class="ptitle">Toughpower GF3 850W</div><div class="pprice">$149.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#006bb4,#343434)"></div><div class="ptitle">Riing Quad Fan 3-Pack</div><div class="pprice">$64.99</div></div>
</div>
<div class="footer"><span>© Engineered for Performance</span><span>2-Year Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #a1a1a1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #011f31; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #f6f6f6; color: #141414;
border: 1px solid #011f31; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #141414;
border: 1px solid #bebebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a1a1a1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #8e8733; color: #141414;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f6f6; font-family:'Assistant','Inter',Arial,sans-serif; color:#141414; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid #dedede;}
.logo{font-size:19px;font-weight:600;letter-spacing:1px;text-transform:lowercase;}
.navlinks{position:absolute;left:36px;top:0;height:64px;display:flex;align-items:center;gap:20px;font-size:13px;font-weight:400;text-transform:lowercase;color:#545454;}
.hero{height:250px;display:flex;background:#141414;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;color:#fff;}
.herotext h1{font-size:30px;font-weight:600;margin:0 0 14px;line-height:1.3;}
.herotext p{font-size:14px;color:#a1a1a1;margin:0 0 20px;max-width:300px;line-height:1.6;}
.btn{display:inline-block;background:#011f31;border:1px solid #8e8733;color:#fff;font-size:13px;font-weight:500;padding:14px 26px;border-radius:8px;width:fit-content;}
.heroimg{width:54%;position:relative;background:linear-gradient(160deg,#011f31,#141414 80%);}
.heroimg .mat{position:absolute;left:80px;top:30px;width:60px;height:190px;border-radius:30px;background:#011f31;border:1px solid #8e8733;}
.sec{padding:22px 40px 0;}
.sectitle{font-size:18px;font-weight:500;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:206px;}
.thumb{height:120px;border-radius:8px;margin-bottom:10px;}
.pname{font-size:14px;font-weight:500;}
.pprice{font-size:13px;color:#545454;margin-top:4px;}
.tag{display:inline-block;color:#8e8733;font-size:11px;font-weight:600;margin-top:6px;}
</style>
<div class="nav">
<div class="navlinks"><span>mats</span><span>apparel</span><span>accessories</span></div>
<div class="logo">Manduka</div>
</div>
<div class="hero">
<div class="herotext">
<h1>The studio before class starts.</h1>
<p>Mats and gear built for the quiet minutes before the first pose.</p>
<div class="btn">Shop Mats</div>
</div>
<div class="heroimg"><div class="mat"></div></div>
</div>
<div class="sec">
<div class="sectitle">Studio Essentials</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#011f31,#f6f6f6);"></div><div class="pname">PRO Yoga Mat</div><div class="pprice">$130</div><div class="tag">Sale</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#141414,#a1a1a1);"></div><div class="pname">eKO Lite Mat</div><div class="pprice">$78</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8e8733,#f6f6f6);"></div><div class="pname">Recycled Yoga Block</div><div class="pprice">$22</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #222021;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #222021;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #222021; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757679; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.1px; background: #f55a19; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.1px; background: transparent; color: #222021;
border: 1px solid #f55a19; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #222021;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757679; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #f55a19; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; color:#4c4c4c; }
*{box-sizing:border-box;}
.announce{height:32px;background:#4e34e0;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;}
.nav{height:56px;background:#222021;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:17px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:18px;font-size:13px;font-weight:500;color:#fff;}
.hero{height:210px;background:#222021;display:flex;align-items:center;padding:0 44px;}
.herotext{width:52%;}
.herotext h1{font-size:34px;font-weight:700;color:#fff;margin:0 0 12px;letter-spacing:-0.4px;line-height:1.1;}
.herotext p{font-size:14px;color:#cfc6bf;margin:0 0 16px;max-width:300px;}
.cta{display:inline-block;background:#f55a19;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.1px;padding:12px 26px;border-radius:8px;}
.heroimg{width:40%;height:130px;border-radius:8px;background:linear-gradient(135deg,#cfc6bf,#f55a19 70%);}
.pillrow{display:flex;gap:8px;padding:14px 44px 0;}
.pill{background:#f4f4f6;border:1px solid #dedede;color:#4c4c4c;font-size:12px;padding:6px 16px;border-radius:9999px;}
.pill.active{background:#222021;color:#fff;}
.section{padding:14px 44px 0;}
.seclabel{font-size:18px;font-weight:600;color:#222021;margin-bottom:10px;position:relative;}
.seclabel:after{content:'';display:block;width:36px;height:3px;background:#f55a19;margin-top:6px;}
.grid{display:flex;gap:14px;}
.card{width:190px;background:#f4f4f6;border-radius:4px;padding:14px;position:relative;}
.badgesale{position:absolute;top:8px;left:8px;background:#f55a19;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.badgenew{position:absolute;top:8px;right:8px;background:#4e34e0;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.thumb{height:88px;background:#ede6e0;border-radius:4px;margin-bottom:8px;}
.ptitle{font-size:15px;font-weight:500;color:#222021;}
.pprice{font-size:18px;font-weight:700;color:#222021;margin-top:4px;}
</style>
<div class="announce">Free 2-Day Shipping On All Desk Accessories</div>
<div class="nav">
<div class="logo">Satechi Desk Acc 2</div>
<div class="navlinks"><div>Stands</div><div>Organizers</div><div>Lighting</div><div>Bundles</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>A desk that photographs like a showroom.</h1>
<p>Aluminum stands, cable organizers, and lighting for the setup you're proud of.</p>
<div class="cta">Shop Desk Accessories</div>
</div>
<div class="heroimg"></div>
</div>
<div class="pillrow">
<div class="pill active">All</div>
<div class="pill">Stands</div>
<div class="pill">Organizers</div>
<div class="pill">Lighting</div>
</div>
<div class="section">
<div class="seclabel">New Arrivals</div>
<div class="grid">
<div class="card"><span class="badgesale">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#f55a19,#222021)"></div><div class="ptitle">Aluminum Laptop Stand</div><div class="pprice">$49.99</div></div>
<div class="card"><span class="badgenew">New</span><div class="thumb" style="background:linear-gradient(135deg,#222021,#4e34e0)"></div><div class="ptitle">Desk Cable Organizer</div><div class="pprice">$29.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00eab6,#222021)"></div><div class="ptitle">LED Desk Lamp, Dimmable</div><div class="pprice">$69.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111827;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111827;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #111827; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.6px; background: #00548e; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.6px; background: #ffffff; color: #00548e;
border: 1px solid #00548e; border-radius: 4px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111827;
border: 1px solid #c4c5c9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #00548e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Gotham A','Helvetica Neue',Arial,sans-serif; color:#111827; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e5e7eb;}
.logo{font-family:Georgia,serif;font-size:22px;font-weight:700;color:#00548e;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;}
.hero{height:280px;background:#00548e;display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;}
.herotext{width:50%;color:#fff;}
.badge{display:inline-block;background:#00548e;border:2px solid #fff;font-size:11px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;padding:6px 12px;margin-bottom:14px;}
.hero h1{font-family:Georgia,serif;font-size:34px;font-weight:700;margin:0 0 12px;line-height:1.2;}
.hero p{font-size:15px;margin:0 0 20px;max-width:340px;opacity:0.9;}
.cta{background:#da532c;color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:13px 26px;width:fit-content;}
.machine{position:absolute;right:70px;top:60px;width:160px;height:160px;background:radial-gradient(circle at 40% 40%,#ffffff,#cbd5e1 70%);border-radius:20px;}
.spec{display:flex;gap:1px;background:#e5e7eb;margin:0 40px;}
.scell{flex:1;background:#f6f6f6;text-align:center;padding:12px;}
.slabel{font-size:10px;font-weight:600;letter-spacing:0.6px;text-transform:uppercase;color:#6b7280;}
.sval{font-size:16px;margin-top:4px;}
.dealer{margin:20px 40px 0;background:#f4f4f4;border:1px solid #e5e7eb;border-radius:8px;padding:20px;display:flex;justify-content:space-between;align-items:center;}
.dealer h3{font-size:16px;margin:0 0 4px;}
.dealer p{font-size:13px;color:#374151;margin:0;}
.dealerbtn{background:#00548e;color:#fff;font-size:13px;font-weight:600;text-transform:uppercase;padding:12px 22px;}
</style>
<div class="nav">
<div class="logo">Riccar</div>
<div class="navlinks"><span>Upright</span><span>Canister</span><span>Tandem Air</span><span>Accessories</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="badge">Tandem Air Technology</div>
<h1>Belt-driven power, engineered for a lifetime.</h1>
<p>Commercial-grade motors built the way vacuums used to be built — to last.</p>
<div class="cta">Find a Dealer</div>
</div>
<div class="machine"></div>
</div>
<div class="spec">
<div class="scell"><div class="slabel">Motor</div><div class="sval">Tandem Air</div></div>
<div class="scell"><div class="slabel">Filtration</div><div class="sval">HEPA Media</div></div>
<div class="scell"><div class="slabel">Weight</div><div class="sval">17.5 lbs</div></div>
<div class="scell"><div class="slabel">Cord Length</div><div class="sval">35 ft</div></div>
</div>
<div class="dealer">
<div><h3>Not sold online.</h3><p>Riccar vacuums are available exclusively through authorized specialty dealers.</p></div>
<div class="dealerbtn">Find a Dealer</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f1f1ef; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f1f1ef; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfdfc; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#37352F; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
/* 사이드바 — 워크스페이스 + Teamspaces/Shared/Private */
.sidebar { width:220px; height:640px; background:#F7F6F3; border-right:1px solid #EAECEC;
display:flex; flex-direction:column; padding:14px 8px; flex-shrink:0; }
.ws { display:flex; align-items:center; gap:8px; padding:6px 8px 14px; }
.ws-icon { width:22px; height:22px; border-radius:6px; background:#37352F; color:#fff;
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.ws-name { font-size:14px; font-weight:600; }
.sb-section { font-size:11px; font-weight:600; color:#9B9A97; text-transform:uppercase;
letter-spacing:0.04em; margin:14px 8px 4px; }
.sb-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:5px; font-size:14px; font-weight:500; }
.sb-row.active { background:#EFEEE9; }
.sb-row .ic { font-size:14px; width:16px; text-align:center; }
/* 페이지 본문 */
.page { flex:1; display:flex; flex-direction:column; position:relative; height:640px; }
.cover { height:96px; background:linear-gradient(120deg, #E7F3F8, #F6F3F9 55%, #FAF1F5); }
.head { padding:0 40px; position:relative; }
.emoji { font-size:46px; margin-top:-28px; margin-bottom:6px; display:block; }
.title { font-size:30px; font-weight:700; letter-spacing:-0.4px; margin:0 0 10px; }
.subactions { display:flex; gap:14px; margin-bottom:18px; }
.subactions span { font-size:12px; color:#9B9A97; font-weight:400; }
.body { padding:0 40px 24px; flex:1; overflow:hidden; }
.h2 { font-size:18px; font-weight:700; letter-spacing:-0.2px; margin:14px 0 5px; }
.p { font-size:14px; line-height:1.5; margin:0 0 6px; color:#37352F; }
.p .mention { display:inline-flex; align-items:center; gap:3px; background:#2E75CC1A; color:#2E75CC;
font-weight:500; border-radius:3px; padding:1px 5px 1px 3px; }
.p .mention .av { width:13px; height:13px; border-radius:50%; background:#2E75CC; display:inline-block; }
.toggle { display:flex; gap:6px; align-items:flex-start; margin:8px 0; }
.toggle .chev { color:#9B9A97; font-size:11px; margin-top:2px; }
.toggle .tx { font-size:14px; font-weight:500; }
.toggle .child { margin-left:20px; margin-top:4px; font-size:13px; color:#37352F; line-height:1.5; }
.callout { display:flex; gap:10px; background:#FBF3DB; border-radius:4px; padding:12px 14px; margin:10px 0; }
.callout .em { font-size:17px; }
.callout p { margin:0; font-size:13.5px; color:#DFAB01; line-height:1.45; font-weight:500; }
.quote { border-left:3px solid #37352F; padding:2px 0 2px 12px; margin:10px 0; }
.quote p { font-style:italic; font-size:14px; margin:0; }
.code { background:#F7F6F3; border-radius:4px; padding:12px 14px; margin:10px 0; position:relative; }
.code .lang { position:absolute; top:8px; right:12px; font-size:10px; color:#9B9A97; }
.code pre { margin:0; font-family:"SFMono-Regular", Consolas, "IBM Plex Mono", monospace; font-size:12px; color:#37352F; }
.dbblock { border-top:1px solid #EAECEC; margin-top:14px; padding-top:10px; }
.dbtabs { display:flex; gap:16px; margin-bottom:8px; }
.dbtabs span { font-size:12px; color:#9B9A97; padding-bottom:5px; }
.dbtabs span.on { color:#37352F; font-weight:600; border-bottom:2px solid #37352F; }
.dbrow { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid #EAECEC; font-size:12.5px; }
.dbrow .chip { font-size:10.5px; padding:2px 8px; border-radius:3px; font-weight:600; }
.chip.g { background:#EDF3EC; color:#0F7B6C; }
.chip.o { background:#FAEBDD; color:#D9730D; }
.chip.b { background:#E7F3F8; color:#0B6E99; }
.dbrow .nm { flex:1; font-weight:500; }
.dbrow .who { color:#9B9A97; }
/* / 커맨드 팔레트 — 문서 위에 뜨는 플로팅 패널 */
.palette { position:absolute; right:36px; bottom:26px; width:230px; background:#FFFFFF;
border:1px solid #EAECEC; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,0.08); overflow:hidden; }
.palette .hd { font-size:10.5px; color:#9B9A97; padding:8px 12px 4px; }
.prow { display:flex; align-items:center; gap:8px; padding:7px 12px; }
.prow.sel { background:#EFEEE9; }
.prow .ico { width:18px; height:18px; border-radius:4px; background:#F1F1EF; display:flex;
align-items:center; justify-content:center; font-size:11px; }
.prow .tt { font-size:12.5px; font-weight:500; }
.prow .st { font-size:10.5px; color:#9B9A97; display:block; }
</style></head>
<body>
<div class="app">
<div class="sidebar">
<div class="ws"><div class="ws-icon">B</div><span class="ws-name">Notion (iOS)</span></div>
<div class="sb-row active"><span class="ic">🏠</span> Home</div>
<div class="sb-row"><span class="ic">🔍</span> Search</div>
<div class="sb-section">Teamspaces</div>
<div class="sb-row"><span class="ic">📈</span> Product</div>
<div class="sb-row"><span class="ic">🎨</span> Design</div>
<div class="sb-section">Private</div>
<div class="sb-row"><span class="ic">📔</span> Journal</div>
<div class="sb-row"><span class="ic">✅</span> Tasks Q3</div>
</div>
<div class="page">
<div class="cover"></div>
<div class="head">
<span class="emoji">🗺️</span>
<h1 class="title">Project Roadmap</h1>
<div class="subactions"><span>Add icon</span><span>Add comment</span><span>Add link</span></div>
</div>
<div class="body">
<div class="h2">Q3 Objectives</div>
<p class="p">Owner is <span class="mention"><span class="av"></span>Jihoon</span> — ship the onboarding rewrite before the offsite.</p>
<div class="toggle"><span class="chev">▾</span><span class="tx">Launch checklist</span></div>
<div class="child">Design review · Copy pass · Analytics events wired up</div>
<div class="callout"><span class="em">💡</span><p>Blocks are the atom here — drag the handle to reorder anything.</p></div>
<div class="quote"><p>"A tool for thought, not a form to fill out."</p></div>
<div class="code"><span class="lang">JSON</span><pre>{ "status": "in_progress" }</pre></div>
<div class="dbblock">
<div class="dbtabs"><span class="on">Table</span><span>Board</span><span>Timeline</span><span>Calendar</span></div>
<div class="dbrow"><span class="chip g">Done</span><span class="nm">Auth flow</span><span class="who">Minji</span></div>
<div class="dbrow"><span class="chip o">Doing</span><span class="nm">Empty states</span><span class="who">Jihoon</span></div>
<div class="dbrow"><span class="chip b">Next</span><span class="nm">Localize KR</span><span class="who">Soyeon</span></div>
</div>
</div>
<div class="palette">
<div class="hd">BASIC BLOCKS</div>
<div class="prow sel"><span class="ico">H</span><div><span class="tt">Heading 2</span><span class="st">Section heading</span></div></div>
<div class="prow"><span class="ico">▸</span><div><span class="tt">Toggle list</span><span class="st">Collapsible content</span></div></div>
<div class="prow"><span class="ico">🖼</span><div><span class="tt">Image</span><span class="st">Upload or embed</span></div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f3f1; color: #fc4c5e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f3f1; color: #fc4c5e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #fc4c5e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.3; letter-spacing: 0.5px; margin: 0; color: #6c6c6c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #00558d; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: transparent; color: #00558d;
border: 1px solid #00558d; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #0a0a0a;
border: 1px solid #bdbdbd; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c6c6c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #e02b27; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f3f1; color:#0a0a0a; box-sizing:border-box;
font-family:'Univers Medium','Univers Regular','Helvetica Neue', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.promo { flex:0 0 24px; background:#e02b27; color:#ffffff; display:flex; align-items:center; justify-content:center;
font-size:10.5px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; }
.utility { flex:0 0 24px; background:#002d5e; color:#ffffff; display:flex; align-items:center; justify-content:center;
gap:18px; font-size:10.5px; letter-spacing:0.2px; }
nav { flex:0 0 54px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; background:#ffffff; border-bottom:1px solid #bdbdbd; }
.brand { font-size:16px; font-weight:600; margin:0; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:20px; font-size:12.5px; font-weight:500; color:#0a0a0a; }
.navicons { display:flex; gap:10px; }
.icon-dot { width:26px; height:26px; border:1px solid #bdbdbd; border-radius:4px; display:flex; align-items:center;
justify-content:center; font-size:10px; color:#6c6c6c; }
.hero { flex:0 0 138px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; gap:20px; }
.hero-render { position:relative; width:150px; height:100px; flex-shrink:0; }
.platter { position:absolute; width:96px; height:96px; border-radius:9999px; background:radial-gradient(circle,#2a2a2a 0%,#111 60%,#000 100%);
left:0; top:2px; border:2px solid #00558d; }
.platter::after { content:''; position:absolute; inset:38%; background:#00558d; border-radius:9999px; }
.tonearm { position:absolute; width:70px; height:6px; background:#00558d; right:0; top:20px; border-radius:2px; transform:rotate(18deg); transform-origin:right center; }
.hero-copy { max-width:420px; text-align:right; }
.hero-copy .modeltag { font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#6c6c6c; }
.hero h1 { font-size:24px; font-weight:600; letter-spacing:-0.2px; margin:6px 0 6px; }
.hero p { font-size:12.5px; color:#515153; margin:0 0 10px; }
.btn-primary { background:#00558d; color:#ffffff; border:none; border-radius:4px; padding:9px 18px;
font-weight:600; font-size:12px; letter-spacing:0.3px; text-transform:uppercase; }
.cattabs { flex:0 0 34px; display:flex; align-items:center; gap:22px; padding:0 32px; background:#ffffff;
border-bottom:1px solid #efefef; font-size:12.5px; font-weight:500; color:#515153; }
.cattabs .active { color:#00558d; border-bottom:2px solid #00558d; padding-bottom:9px; }
.tablewrap { flex:1 1 auto; padding:14px 32px; overflow:hidden; }
table { width:100%; border-collapse:collapse; background:#f5f5f5; border:1px solid #bdbdbd; }
thead th { background:#f1f1f1; font-size:10px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase;
color:#0a0a0a; text-align:left; padding:7px 10px; border-bottom:1px solid #bdbdbd; }
tbody td { font-size:12px; color:#515153; padding:8px 10px; border-bottom:1px solid #bdbdbd; }
tbody tr:last-child td { border-bottom:none; }
td.model { font-family:'Univers Condensed','Helvetica Neue',sans-serif; font-size:11.5px; letter-spacing:0.3px; color:#0a0a0a; font-weight:600; }
td.price { font-weight:600; color:#0a0a0a; }
.badge-new, .badge-sale { display:inline-block; font-size:9px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase;
color:#ffffff; padding:2px 6px; border-radius:0; }
.badge-new { background:#00558d; }
.badge-sale { background:#e02b27; }
.dash { color:#a6a6a6; }
footer { flex:0 0 42px; background:#0a0a0a; color:#bdbdbd; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; font-size:11px; }
footer .link { color:#bdbdbd; }
</style></head>
<body>
<div class="promo">Free 2-Day Shipping on Turntables $299+</div>
<div class="utility"><span>Support</span><span>Warranty Registration</span><span>Store Locator</span></div>
<nav>
<p class="brand">Audio Technica Vinyl AC 2</p>
<div class="navlinks">
<span>Turntables</span><span>Cartridges</span><span>Headphones</span><span>Microphones</span><span>Accessories</span>
</div>
<div class="navicons">
<div class="icon-dot">Q</div>
<div class="icon-dot">A</div>
</div>
</nav>
<section class="hero">
<div class="hero-render">
<div class="platter"></div>
<div class="tonearm"></div>
</div>
<div class="hero-copy">
<span class="modeltag">AT-LP120XBT-USB</span>
<h1>Direct-drive precision, built to last.</h1>
<p>Fully manual belt-alternative turntable with USB output and Bluetooth streaming.</p>
<button class="btn-primary">View Specifications</button>
</div>
</section>
<div class="cattabs">
<span class="active">All Products</span><span>Turntables</span><span>Cartridges</span><span>Headphones</span><span>Microphones</span>
</div>
<section class="tablewrap">
<table>
<thead>
<tr><th>Model</th><th>Type</th><th>Output</th><th>Price</th><th>Status</th></tr>
</thead>
<tbody>
<tr>
<td class="model">AT-LP120XBT-USB</td><td>Direct-Drive Turntable</td><td>USB / Bluetooth</td>
<td class="price">$299</td><td><span class="badge-new">New</span></td>
</tr>
<tr>
<td class="model">AT-VM95E</td><td>Dual Moving Magnet Cartridge</td><td>—</td>
<td class="price">$79</td><td><span class="dash">—</span></td>
</tr>
<tr>
<td class="model">ATH-M50x</td><td>Studio Monitor Headphones</td><td>38mm Driver</td>
<td class="price">$149</td><td><span class="badge-sale">Sale</span></td>
</tr>
<tr>
<td class="model">AT2020</td><td>Cardioid Condenser Microphone</td><td>XLR</td>
<td class="price">$99</td><td><span class="dash">—</span></td>
</tr>
</tbody>
</table>
</section>
<footer>
<span>© Audio Technica Vinyl AC 2</span>
<span><span class="link">Turntables</span> · <span class="link">Support</span> · <span class="link">Compare</span></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f8f9; color: #00112c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f8f9; color: #00112c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #00112c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #687282; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #3877f5; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #3877f5;
border: 1px solid #3877f5; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #3e3a39;
border: 1px solid #d4d9db; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #687282; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #3877f5; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f5f5f7; font-family:'SF Pro','Noto Sans',Arial,sans-serif; color:#00112c;
}
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#00112c;}
.logo{font-size:18px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:12px;color:#a9c0ea;}
.cta{background:#3877f5;color:#fff;padding:10px 18px;font-size:12px;font-weight:700;border-radius:8px;}
.hero{display:flex;padding:22px 32px 14px;gap:22px;align-items:center;}
.hero-copy{width:370px;}
.hero-title{font-size:30px;font-weight:700;line-height:1.15;letter-spacing:-.5px;margin-bottom:10px;color:#00112c;}
.hero-sub{font-size:13px;line-height:1.5;color:#333;margin-bottom:14px;}
.btn-main{display:inline-block;background:#3877f5;color:#fff;padding:12px 22px;font-size:12.5px;font-weight:700;border-radius:8px;}
.hero-visual{flex:1;height:200px;border-radius:12px;background:linear-gradient(150deg,#1c4aa2,#00112c);position:relative;}
.robot{position:absolute;width:110px;height:110px;border-radius:50%;background:linear-gradient(160deg,#5a90ff,#3877f5);top:50%;left:50%;transform:translate(-50%,-50%);border:4px solid #f5f5f7;}
.robot:before{content:'';position:absolute;top:20px;left:20px;width:70px;height:70px;border-radius:50%;background:#00112c;}
.promo-tag{position:absolute;top:14px;right:14px;background:#fa6400;color:#fff;font-size:9.5px;font-weight:700;padding:5px 10px;border-radius:6px;}
.section{padding:4px 32px 0;}
.section-title{font-size:16px;font-weight:700;margin-bottom:12px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#fff;border:1px solid #e6e6ea;border-radius:8px;overflow:hidden;}
.card-img{height:88px;background:linear-gradient(150deg,#e8eefc,#a9c0ea);position:relative;}
.rate{position:absolute;bottom:6px;left:6px;background:#ffab47;color:#00112c;font-size:8.5px;font-weight:700;padding:3px 7px;border-radius:6px;}
.card-body{padding:10px;}
.card-name{font-size:12px;font-weight:700;margin-bottom:4px;}
.feature-row{display:flex;gap:6px;margin-bottom:6px;}
.feat{font-size:8.5px;color:#089a43;font-weight:600;}
.card-price{font-size:12.5px;font-weight:700;color:#1c4aa2;}
</style>
<div class="nav">
<div class="logo">Ecovacs</div>
<div class="navlinks"><span>Robot Vacuums</span><span>Window Cleaners</span><span>Lawn Mowers</span><span>Compare</span></div>
<div class="cta">Shop Deals</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="hero-title">Precision cleaning, engineered.</div>
<div class="hero-sub">LiDAR mapping, AI obstacle avoidance, and self-emptying stations — robotics built for the whole home.</div>
<div class="btn-main">Shop Robot Vacuums</div>
</div>
<div class="hero-visual">
<div class="promo-tag">Save $150</div>
<div class="robot"></div>
</div>
</div>
<div class="section">
<div class="section-title">Top Rated Robots</div>
<div class="grid">
<div class="card"><div class="card-img"><div class="rate">4.8 ★</div></div><div class="card-body"><div class="card-name">DEEBOT X5 Pro Omni</div><div class="feature-row"><span class="feat">✓ Mopping</span><span class="feat">✓ LiDAR</span></div><div class="card-price">$899.99</div></div></div>
<div class="card"><div class="card-img"><div class="rate">4.6 ★</div></div><div class="card-body"><div class="card-name">DEEBOT T30S Combo</div><div class="feature-row"><span class="feat">✓ Auto-Empty</span></div><div class="card-price">$649.99</div></div></div>
<div class="card"><div class="card-img"><div class="rate">4.7 ★</div></div><div class="card-body"><div class="card-name">WINBOT W2 Pro</div><div class="feature-row"><span class="feat">✓ Window</span></div><div class="card-price">$399.99</div></div></div>
<div class="card"><div class="card-img"><div class="rate">4.5 ★</div></div><div class="card-body"><div class="card-name">GOAT G1 Lawn Mower</div><div class="feature-row"><span class="feat">✓ No Wire</span></div><div class="card-price">$1,299.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1b1b2e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #1b1b2e;
border: 1px solid #1b1b2e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdbde; color: #1b1b2e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1B1B2E; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; width:960px; height:640px; position:relative; }
.rail { width:64px; flex:0 0 64px; background:#F7F7FB; border-right:1px solid #E7E7EF;
display:flex; flex-direction:column; align-items:center; padding-top:18px; gap:16px; }
.rail .sq { width:30px; height:30px; border-radius:9px; background:#7B68EE; }
.rail .sq2 { width:30px; height:30px; border-radius:9px; background:#F7F7FB; border:1.5px solid #DEDEE9; }
.rail .sq3 { width:30px; height:30px; border-radius:9px; background:#F7F7FB; border:1.5px solid #DEDEE9; }
.main { flex:1; display:flex; flex-direction:column; }
.header { padding:16px 26px 0; }
.crumb { font-size:11px; color:#9292A8; margin-bottom:6px; }
.titlerow { display:flex; align-items:center; gap:10px; }
.colorsq { width:20px; height:20px; border-radius:6px; background:linear-gradient(135deg,#7B68EE,#FD71AF); }
.listtitle { font-size:24px; font-weight:800; letter-spacing:-0.3pt; }
.viewtabs { display:flex; gap:18px; margin-top:12px; border-bottom:1px solid #E7E7EF; padding-bottom:0; }
.vtab { font-size:12px; font-weight:600; color:#5E5E7A; padding-bottom:9px; }
.vtab.active { color:#7B68EE; border-bottom:2.5px solid #7B68EE; }
.list { flex:1; padding:14px 26px 0; overflow:hidden; }
.statushead { display:flex; align-items:center; gap:8px; margin:14px 0 6px; }
.pill { font-size:9px; font-weight:800; letter-spacing:0.5pt; text-transform:uppercase; color:#fff;
padding:3px 8px; border-radius:5px; }
.pill.todo { background:#5B5B79; }
.pill.prog { background:#49CCF9; color:#0E2A33; }
.pill.done { background:#2ECC71; }
.cnt { font-size:11px; color:#9292A8; }
.row { display:flex; align-items:center; gap:10px; padding:9px 6px; border-bottom:1px solid #E7E7EF; }
.chk { width:16px; height:16px; border-radius:5px; border:2px solid #5B5B79; flex:0 0 16px; }
.chk.prog { border-color:#49CCF9; }
.chk.done { background:#2ECC71; border-color:#2ECC71; color:#fff; font-size:10px; display:flex;
align-items:center; justify-content:center; }
.name { flex:1; font-size:13px; font-weight:600; }
.name.strike { text-decoration:line-through; color:#9292A8; font-weight:400; }
.flag { width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent;
border-bottom:10px solid #F44E6E; }
.flag.hi { border-bottom-color:#FF9F1A; }
.flag.no { border-bottom-color:#49CCF9; }
.tag { font-size:9px; font-weight:700; padding:2px 7px; border-radius:999px; }
.tag.purple { background:#7B68EE38; color:#7B68EE; }
.tag.teal { background:#1ECBE138; color:#06363C; }
.due { font-size:11px; color:#5E5E7A; width:46px; text-align:right; }
.due.over { color:#F44E6E; }
.avatar { width:20px; height:20px; border-radius:50%; background:#7B68EE; color:#fff; font-size:8px;
font-weight:700; display:flex; align-items:center; justify-content:center; flex:0 0 20px; }
.aibar { margin:14px 6px 0; display:flex; align-items:center; gap:8px; border-radius:10px;
border:1px solid #7B68EE; background:linear-gradient(90deg,rgba(123,104,238,0.14),rgba(253,113,175,0.14),rgba(73,204,249,0.14));
padding:9px 12px; }
.aibar .sparkle { color:#7B68EE; font-size:12px; }
.aibar .txt { font-size:11px; color:#5E5E7A; }
.aibar .txt b { color:#1B1B2E; }
.fab { position:absolute; right:24px; bottom:22px; width:56px; height:56px; border-radius:18px;
background:linear-gradient(135deg,#7B68EE,#FD71AF,#49CCF9); display:flex; align-items:center;
justify-content:center; color:#fff; font-size:24px; font-weight:300;
box-shadow:0 8px 22px rgba(123,104,238,0.5); }
</style></head>
<body>
<div class="shell">
<div class="rail"><div class="sq"></div><div class="sq2"></div><div class="sq3"></div></div>
<div class="main">
<div class="header">
<div class="crumb">Product ▸ Sprints ▸ ClickUp (iOS)</div>
<div class="titlerow"><div class="colorsq"></div><div class="listtitle">Everything</div></div>
<div class="viewtabs">
<div class="vtab active">List</div><div class="vtab">Board</div><div class="vtab">Calendar</div>
<div class="vtab">Gantt</div><div class="vtab">Doc</div><div class="vtab">Table</div>
</div>
</div>
<div class="list">
<div class="statushead"><span class="pill prog">In Progress</span><span class="cnt">3</span></div>
<div class="row"><div class="chk prog"></div><div class="name">Ship the AI compose field</div>
<div class="flag"></div><span class="tag purple">design</span><span class="due">Fri</span>
<div class="avatar">JK</div></div>
<div class="row"><div class="chk prog"></div><div class="name">Fix squircle FAB shadow on dark</div>
<div class="flag hi"></div><span class="tag teal">bug</span><span class="due over">Mon</span>
<div class="avatar">MT</div></div>
<div class="row"><div class="chk prog"></div><div class="name">Write status-pill copy for onboarding</div>
<div class="flag no"></div><span class="tag purple">copy</span><span class="due">Wed</span>
<div class="avatar">RS</div></div>
<div class="statushead"><span class="pill todo">To Do</span><span class="cnt">2</span></div>
<div class="row"><div class="chk"></div><div class="name">Audit tag tint contrast in dark mode</div>
<div class="flag hi"></div><span class="tag teal">a11y</span><span class="due">Next wk</span>
<div class="avatar">JK</div></div>
<div class="statushead"><span class="pill done">Complete</span><span class="cnt">1</span></div>
<div class="row"><div class="chk done">✓</div><div class="name strike">Migrate board columns to new schema</div>
<div class="flag no"></div><span class="tag purple">infra</span><span class="due">—</span>
<div class="avatar">MT</div></div>
<div class="aibar"><span class="sparkle">✦</span><span class="txt"><b>ClickUp (iOS) AI</b> · summarize this sprint</span></div>
</div>
</div>
<div class="fab">+</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #e91e63; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #313131;
border: 1px solid #e91e63; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e91e63; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:#313131;}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dddddd;}
.logo{font-size:22px;font-weight:700;letter-spacing:-0.5px;color:#313131;}
.logo b{color:#e91e63;}
.navlinks{display:flex;gap:28px;font-size:14px;font-weight:600;color:#3f3f3f;}
.navlinks span.sale{color:#e91e63;}
.navicons{display:flex;gap:14px;}
.circ{width:34px;height:34px;border-radius:20px;background:#f7f7f7;border:1px solid #dddddd;}
.hero{height:288px;display:flex;padding:32px 40px;gap:36px;}
.hero-text{width:420px;display:flex;flex-direction:column;justify-content:center;}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.5px;color:#e91e63;text-transform:uppercase;margin-bottom:10px;}
.headline{font-size:36px;font-weight:700;letter-spacing:-0.5px;line-height:1.15;color:#313131;margin-bottom:14px;}
.sub{font-size:15px;color:#6a6a6a;line-height:1.5;margin-bottom:20px;width:380px;}
.cta{display:inline-block;width:180px;text-align:center;padding:14px 0;background:#e91e63;color:#ffffff;border-radius:8px;font-size:14px;font-weight:600;}
.hero-visual{flex:1;position:relative;border-radius:20px;background:linear-gradient(135deg,#fce4ec 0%,#f7f7f7 60%);overflow:hidden;}
.lip1{position:absolute;left:36px;top:40px;width:100px;height:170px;border-radius:20px;background:linear-gradient(160deg,#e91e63,#c2185b);}
.lip2{position:absolute;left:154px;top:96px;width:80px;height:114px;border-radius:20px;background:linear-gradient(160deg,#f8bbd0,#e91e63);}
.dot1{position:absolute;right:56px;top:34px;width:56px;height:56px;border-radius:28px;background:#313131;}
.dot2{position:absolute;right:44px;bottom:30px;width:64px;height:64px;border-radius:32px;background:#c2185b;}
.section{padding:22px 40px 0 40px;}
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;}
.section-title{font-size:22px;font-weight:600;letter-spacing:-0.2px;color:#313131;}
.section-link{font-size:13px;font-weight:600;color:#e91e63;}
.grid{display:flex;gap:26.66px;padding:0 40px;}
.card{width:200px;background:#ffffff;border:1px solid #dddddd;border-radius:20px;overflow:hidden;}
.swatch{height:110px;position:relative;}
.badge{position:absolute;left:10px;top:10px;background:#e91e63;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.4px;padding:4px 9px;border-radius:8px;text-transform:uppercase;}
.card-body{padding:12px 14px 16px 14px;}
.card-title{font-size:14px;font-weight:600;color:#313131;margin-bottom:4px;}
.card-cat{font-size:11px;color:#929292;margin-bottom:8px;}
.card-price{font-size:15px;font-weight:700;color:#313131;}
.stars{color:#313131;font-size:11px;margin-bottom:4px;}
</style>
<div class="nav">
<div class="logo"><b>Huda Beauty</b></div>
<div class="navlinks"><span>New</span><span>Makeup</span><span>Skin</span><span>Fragrance</span><span class="sale">Sale</span></div>
<div class="navicons"><div class="circ"></div><div class="circ"></div></div>
</div>
<div class="hero">
<div class="hero-text">
<div class="eyebrow">Power. Pigment. Presence.</div>
<div class="headline">Makeup built for<br/>maximum voltage.</div>
<div class="sub">High-pigment formulas engineered for editorial intensity and all-day wear. This is beauty with no dimmer switch.</div>
<div class="cta">SHOP THE EDIT</div>
</div>
<div class="hero-visual">
<div class="lip1"></div>
<div class="lip2"></div>
<div class="dot1"></div>
<div class="dot2"></div>
</div>
</div>
<div class="section">
<div class="section-head"><div class="section-title">Bestselling Faces</div><div class="section-link">View all</div></div>
</div>
<div class="grid">
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#e91e63,#f8bbd0);"><div class="badge">New</div></div>
<div class="card-body"><div class="stars">★★★★★</div><div class="card-title">Rose Velvet Matte</div><div class="card-cat">Lipstick — 12 shades</div><div class="card-price">$26</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#313131,#6a6a6a);"></div>
<div class="card-body"><div class="stars">★★★★★</div><div class="card-title">Obsidian Liner</div><div class="card-cat">Eyeliner</div><div class="card-price">$22</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#c2185b,#e91e63);"><div class="badge">Sale</div></div>
<div class="card-body"><div class="stars">★★★★★</div><div class="card-title">Voltage Palette</div><div class="card-cat">Eyeshadow — 9 pan</div><div class="card-price">$48</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#f7f7f7,#ebebeb);"></div>
<div class="card-body"><div class="stars">★★★★★</div><div class="card-title">Dewy Skin Tint</div><div class="card-cat">Complexion</div><div class="card-price">$34</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #3858e9; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #3858e9;
border: 1px solid #3858e9; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1e1e1e;
border: 1px solid #c7c7c7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f0b849; color: #1e1e1e;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif; color:#32373c; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:19px;font-weight:700;color:#1e1e1e;letter-spacing:.2px;}
.navlinks{display:flex;gap:24px;font-size:15px;font-weight:500;color:#32373c;}
.navlinks .active{color:#3858e9;border-bottom:2px solid #3858e9;padding-bottom:20px;}
.search{width:170px;height:36px;border-radius:9999px;background:#f0f0f0;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#949494;}
.hero{height:220px;display:flex;padding:34px;gap:36px;}
.herotext{width:420px;}
.breadcrumb{font-size:12px;color:#949494;margin-bottom:10px;}
.breadcrumb b{color:#1e1e1e;}
h1{font-size:26px;font-weight:700;color:#1e1e1e;margin:0 0 10px;letter-spacing:-.4px;}
.sub{font-size:14px;color:#32373c;line-height:1.6;margin:0 0 16px;width:380px;}
.ctarow{display:flex;gap:12px;}
.cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;background:#3858e9;color:#fff;font-size:15px;font-weight:600;border-radius:8px;}
.ctasec{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border:2px solid #3858e9;color:#3858e9;font-size:15px;font-weight:600;border-radius:8px;}
.bookcover{width:150px;height:220px;border-radius:4px;position:relative;box-shadow:0 4px 14px rgba(0,0,0,.12);background:linear-gradient(160deg,#3858e9,#1e1e1e);}
.bookcover .spine{position:absolute;left:0;top:0;bottom:0;width:10px;background:rgba(0,0,0,.25);}
.bookcover .titlebar{position:absolute;left:20px;top:28px;right:16px;height:2px;background:rgba(255,255,255,.6);}
.bookcover .titlebar2{position:absolute;left:20px;top:40px;right:34px;height:2px;background:rgba(255,255,255,.4);}
.section{padding:0 34px;}
.sectitle{font-size:20px;font-weight:600;color:#1e1e1e;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:8px;padding:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;padding:2px 6px;border-radius:4px;color:#1e1e1e;}
.badge.new{background:#f0b849;}
.badge.sale{background:#cc1818;color:#fff;}
.cover{height:120px;border-radius:4px;margin-bottom:10px;}
.ctitle{font-size:14px;font-weight:600;color:#1e1e1e;line-height:1.3;height:36px;overflow:hidden;}
.cprice{font-size:14px;color:#32373c;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Yale University Press</div>
<div class="navlinks"><span class="active">Subjects</span><span>New Releases</span><span>Series</span><span>Authors</span></div>
<div class="search">Search titles...</div>
</div>
<div class="hero">
<div class="herotext">
<div class="breadcrumb">History > <b>Modern Europe</b></div>
<h1>Scholarship that outlasts the moment.</h1>
<div class="sub">Rigorous, peer-reviewed titles across history, art, and the humanities — built for readers who stay with an idea.</div>
<div class="ctarow"><div class="cta">Browse Subjects</div><div class="ctasec">View Catalog</div></div>
</div>
<div class="bookcover"><div class="spine"></div><div class="titlebar"></div><div class="titlebar2"></div></div>
</div>
<div class="section">
<div class="sectitle">New Releases</div>
<div class="grid">
<div class="card"><span class="badge new">New</span><div class="cover" style="background:linear-gradient(160deg,#3858e9,#1e1e1e)"></div><div class="ctitle">The Long Century: Europe Remade</div><div class="cprice">$45.00</div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#4ab866,#1e1e1e)"></div><div class="ctitle">Botanical Empire</div><div class="cprice">$38.00</div></div>
<div class="card"><span class="badge sale">Sale</span><div class="cover" style="background:linear-gradient(160deg,#7d268a,#1e1e1e)"></div><div class="ctitle">Letters from the Archive</div><div class="cprice">$29.00</div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#00356b,#1e1e1e)"></div><div class="ctitle">A History of Cartography</div><div class="cprice">$52.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.02em; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.02em; background: #ffffff; color: #1a1a1a;
border: 1px solid #1a1a1a; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.08em; background: #f5f4f2; color: #767676;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:Georgia,'Playfair Display',serif; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:14px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; }
.navlinks { display:flex; gap:30px; font-size:11px; color:#767676; letter-spacing:.04em; }
.navlinks span.on { color:#1a1a1a; }
.wrap { display:flex; height:524px; padding:0 40px; gap:52px; align-items:center; }
.artwork { width:340px; height:100%; background:#f9f8f6; display:flex; align-items:center; justify-content:center; position:relative; }
.canvas-art { width:240px; height:300px; background:conic-gradient(from 200deg,#dfd8ce,#b7a898,#e8e2d8,#8a7a68); box-shadow:0 30px 60px rgba(0,0,0,.08); }
.info { flex:1; display:flex; flex-direction:column; gap:16px; }
.info .artist { font-size:12px; color:#767676; }
.info h1 { font-family:Georgia,'Playfair Display',serif; font-size:28px; font-weight:400; margin:0; line-height:1.3; letter-spacing:.2px; }
.meta-row { display:flex; gap:10px; }
.chip { border-radius:9999px; border:1px solid #e8e8e8; padding:6px 16px; font-size:11px; color:#767676; }
.desc { font-size:13px; color:#3d3d3d; line-height:1.7; max-width:420px; }
.divider { height:1px; background:#e8e8e8; }
.price-row { display:flex; align-items:baseline; gap:14px; }
.price { font-family:Georgia,serif; font-size:20px; }
.edition-note { font-size:11px; color:#9e9e9e; }
.buy-row { display:flex; gap:12px; margin-top:auto; }
.btn-buy { flex:1; background:#1a1a1a; color:#fff; border:none; padding:14px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.btn-wish { border:1px solid #1a1a1a; padding:14px 20px; font-size:12px; }
footer { height:56px; border-top:1px solid #e8e8e8; display:flex; align-items:center; justify-content:space-between; padding:0 40px; font-size:11px; color:#767676; }
</style></head>
<body>
<nav>
<p class="brand">Absolut Art</p>
<div class="navlinks"><span>Prints</span><span class="on">Originals</span><span>Artists</span><span>Curated Sets</span></div>
</nav>
<div class="wrap">
<div class="artwork"><div class="canvas-art"></div></div>
<div class="info">
<span class="artist">Sarah Lindqvist · Norway</span>
<h1>Quiet Coastline, Study No. 3</h1>
<div class="meta-row">
<span class="chip">Giclée Print</span>
<span class="chip">70 × 90 cm</span>
</div>
<p class="desc">Loads against an unbroken white — the artwork occupies the frame, pricing surfaces only when you're ready to look closer.</p>
<div class="divider"></div>
<div class="price-row">
<span class="price">$480.00</span>
<span class="edition-note">Edition of 75, hand-signed</span>
</div>
<div class="buy-row">
<button class="btn-buy">Add to Cart</button>
<button class="btn-wish">♡</button>
</div>
</div>
</div>
<footer><span>© Absolut Art</span><span>Framing · Shipping · Artist Program</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d32f2f; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:19px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;}
.navlinks span:first-child{color:#313131;border-bottom:2px solid #313131;padding-bottom:20px;}
.hero{height:170px;background:#f5f5f5;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.hero h1{font-size:28px;font-weight:700;letter-spacing:-.5px;max-width:340px;line-height:1.25;}
.hero span{display:block;background:#313131;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;border-radius:4px;width:fit-content;margin-top:14px;}
.tiles{display:flex;gap:14px;padding:0 32px;}
.tile{border:1px solid #e0e0e0;border-radius:8px;background:#fff;width:110px;height:60px;flex-shrink:0;}
.hero .heroimg{width:220px;height:130px;background:radial-gradient(circle at 40% 40%,#5a5a5a,#1a1a1a 75%);border-radius:8px;}
.grid{display:flex;gap:14px;padding:20px 32px 0;}
.card{width:210px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:16px;}
.thumb{background:#f5f5f5;border-radius:4px;height:110px;margin-bottom:10px;}
.pname{font-size:16px;font-weight:600;}
.pprice{font-size:16px;font-weight:600;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:64px;background:#313131;color:#fff;display:flex;align-items:center;justify-content:center;gap:32px;font-size:13px;opacity:.9;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Powertraveller</div>
<div class="navlinks"><span>Power Banks</span><span>Solar Panels</span><span>Chargers</span></div>
</div>
<div class="hero">
<div><h1>Off-grid power for the serious traveler.</h1><span>Shop All</span></div>
<div class="heroimg"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="pname">Solar Panel 24W</div><div class="pprice">$89.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Powerbank 20000mAh</div><div class="pprice">$59.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">USB-C Charge Hub</div><div class="pprice">$34.00</div></div>
</div>
<div class="footer"><span>Support</span><span>Warranty</span><span>Shipping</span><span>Contact</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #171717;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #171717;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.27; letter-spacing: -0.2px; margin: 0; color: #171717; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #a4a2a2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #e1251b; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #ffffff; color: #294e95;
border: 1px solid #e1251b; border-radius: 4px;
padding: 9px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #171717;
border: 1px solid #c5c5c5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a4a2a2; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.3px; background: #e1251b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Lato,Arial,sans-serif; color:#171717; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #eee;}
.logo{font-size:20px;font-weight:700;color:#e1251b;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#171717;}
.navlinks span:first-child{color:#294e95;}
.hero{height:250px;display:flex;background:#171717;}
.herotext{width:46%;padding:0 36px;display:flex;flex-direction:column;justify-content:center;}
.herotext h1{font-size:32px;font-weight:700;color:#fff;margin:0 0 10px;line-height:1.15;}
.herotext p{font-size:14px;color:#c9c9c9;margin:0 0 18px;max-width:320px;}
.cta{background:#e1251b;color:#fff;font-size:14px;font-weight:600;padding:12px 26px;border-radius:2px;width:fit-content;}
.heroimg{width:54%;position:relative;background:linear-gradient(160deg,#252525,#171717);}
.laptop{position:absolute;left:70px;top:60px;width:220px;height:130px;background:linear-gradient(135deg,#3a3a3a,#0a0a0a);border-radius:4px;}
.laptop:before{content:'';position:absolute;left:20px;top:20px;width:180px;height:90px;background:linear-gradient(135deg,#294e95,#171717);}
.pricetag{position:absolute;left:70px;top:200px;background:#e1251b;color:#fff;font-size:22px;font-weight:700;padding:4px 12px;border-radius:2px;}
.specstrip{display:flex;gap:1px;background:#eee;}
.speccell{flex:1;background:#f6f7f8;text-align:center;padding:10px;}
.speclabel{font-size:10px;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:.5px;}
.specvalue{font-size:14px;font-weight:700;color:#171717;margin-top:2px;}
.sec{padding:18px 36px 0;}
.sectitle{font-size:18px;font-weight:700;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;border:1px solid #eee;border-radius:8px;padding:10px;position:relative;}
.thumb{height:88px;border-radius:8px;background:#f6f7f8;margin-bottom:8px;}
.badge{position:absolute;top:16px;left:16px;background:#c73d00;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:2px;}
.pname{font-size:13px;font-weight:600;color:#171717;margin-bottom:4px;}
.pprice{font-size:15px;font-weight:700;color:#e1251b;}
</style>
<div class="nav">
<div class="logo">Lenovo</div>
<div class="navlinks"><span>ThinkPad</span><span>IdeaPad</span><span>Legion</span><span>Deals</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Configure Your Next Machine.</h1>
<p>Precision engineering meets flash-sale urgency across every ThinkPad tier.</p>
<div class="cta">Shop Laptops</div>
</div>
<div class="heroimg"><div class="laptop"></div><div class="pricetag">$899</div></div>
</div>
<div class="specstrip">
<div class="speccell"><div class="speclabel">CPU</div><div class="specvalue">Core Ultra 7</div></div>
<div class="speccell"><div class="speclabel">RAM</div><div class="specvalue">16GB</div></div>
<div class="speccell"><div class="speclabel">Display</div><div class="specvalue">14" 2.8K</div></div>
<div class="speccell"><div class="speclabel">Battery</div><div class="specvalue">Up to 15h</div></div>
</div>
<div class="sec">
<div class="sectitle">Configurator Picks</div>
<div class="grid">
<div class="card"><div class="badge">Flash Sale</div><div class="thumb"></div><div class="pname">ThinkPad X1 Carbon</div><div class="pprice">$1,299.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">IdeaPad Slim 5</div><div class="pprice">$649.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Legion Pro 5</div><div class="pprice">$1,449.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Yoga 9i 2-in-1</div><div class="pprice">$1,099.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: -0.14px; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: -0.14px; background: #000000; color: #ffffff;
border: none; border-radius: 100px; padding: 14px 30px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: -0.14px; background: transparent; color: #0a1317;
border: 1px solid #0064e0; border-radius: 100px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.16px; background: #ffffff; color: #1c1e21;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; background: #f7b928; color: #0a1317;
border-radius: 100px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c1e21; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.promo { background:#0a1317; color:#fff; text-align:center; font-size:11px; font-weight:700; padding:6px; }
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #dee3e9; }
.brand { font-size:15px; font-weight:700; }
.pills { display:flex; gap:8px; }
.pilltab { border:1px solid #ced0d4; border-radius:100px; padding:6px 14px; font-size:12px; font-weight:700; }
.pilltab.active { background:#0a1317; color:#fff; border:none; }
.searchpill { background:#f1f4f7; border-radius:100px; padding:7px 16px; font-size:12px; color:#5d6c7b; }
.hero { position:relative; margin:14px 36px 0; border-radius:32px; overflow:hidden; height:210px;
background:linear-gradient(120deg,#0a1317,#1c1e21 60%,#0064e0 140%); display:flex; align-items:flex-end; padding:20px 26px; }
.hero h1 { color:#fff; font-size:32px; font-weight:500; line-height:1.16; margin:0 0 6px; max-width:420px; }
.hero .sub { color:#dee3e9; font-size:12px; margin-bottom:10px; }
.herobtns { display:flex; gap:8px; }
.btn-black { background:#000; color:#fff; border:none; border-radius:100px; padding:9px 18px; font-size:12px; font-weight:700; }
.btn-ghostw { background:transparent; color:#fff; border:2px solid #fff; border-radius:100px; padding:7px 18px; font-size:12px; font-weight:700; }
.featurerow { display:flex; gap:14px; padding:16px 36px; }
.fcard { flex:1; background:#fff; border:1px solid #dee3e9; border-radius:16px; padding:16px; text-align:center; }
.fcard .ic { width:28px; height:28px; margin:0 auto 8px; background:#f1f4f7; border-radius:50%; }
.fcard h4 { font-size:13px; font-weight:700; margin:0 0 4px; }
.fcard p { font-size:10.5px; color:#5d6c7b; margin:0; }
.promostrip { margin:0 36px 14px; background:#0a1317; color:#fff; border-radius:32px; padding:18px 24px;
display:flex; align-items:center; justify-content:space-between; }
.promostrip h3 { font-size:19px; font-weight:500; margin:0; max-width:360px; line-height:1.2; }
footer { margin-top:auto; padding:12px 36px; border-top:1px solid #dee3e9; display:flex; justify-content:space-between;
font-size:11px; color:#5d6c7b; }
</style></head>
<body>
<div class="promo">Get 25% off the #1 selling AI glasses</div>
<nav>
<span class="brand">Meta</span>
<div class="pills"><span class="pilltab active">Glasses</span><span class="pilltab">Quest</span><span class="pilltab">Apps</span></div>
<span class="searchpill">⌕ Search</span>
</nav>
<div class="hero">
<div>
<h1>Built for prescriptions.<br>Made for comfort.</h1>
<div class="sub">AI glasses that see, hear, and help — all day long.</div>
<div class="herobtns"><button class="btn-black">Shop now</button><button class="btn-ghostw">Learn more</button></div>
</div>
</div>
<div class="featurerow">
<div class="fcard"><div class="ic"></div><h4>Free 2-day delivery</h4><p>On every order, every time.</p></div>
<div class="fcard"><div class="ic"></div><h4>Free 30-day returns</h4><p>Try it risk-free at home.</p></div>
<div class="fcard"><div class="ic"></div><h4>Worry-free warranty</h4><p>One year of coverage included.</p></div>
<div class="fcard"><div class="ic"></div><h4>Buy now, pay later</h4><p>Flexible financing available.</p></div>
</div>
<div class="promostrip">
<h3>Meta Quest brings the magic of virtual reality to everyone.</h3>
<button class="btn-black" style="background:#fff;color:#0a1317">Shop Quest</button>
</div>
<footer>
<span>© Meta</span>
<span>Meta · Glasses · Quest · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7e3aaf; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7e3aaf; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #bfa1d6; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #a73aaf; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7e3aaf; color: #ffffff;
border: 1px solid #a73aaf; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7e3aaf; color: #f5f5f5;
border: 1px solid #9158ba; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bfa1d6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #853aaf; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#18131d; color:#e3e3e3; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; height:640px; }
aside { width:110px; background:#251633; padding:16px 0; display:flex; flex-direction:column; gap:2px; }
aside .item { padding:12px 8px; font-size:11px; text-align:center; color:#e3e3e3; }
aside .item.active { background:rgba(126,58,175,0.2); font-weight:600; }
main { flex:1; display:flex; flex-direction:column; }
nav { height:64px; background:linear-gradient(to right,#210040,#1d102b); display:flex; align-items:center;
justify-content:space-between; padding:0 28px; }
.brand { font-weight:700; font-size:17px; }
.navlinks { display:flex; gap:20px; font-size:13px; }
.row { display:flex; gap:10px; }
.btnp { background:linear-gradient(135.73deg,#653aaf,#a73aaf 98.77%); color:#ffffff; border-radius:9999px;
height:36px; padding:0 18px; font-size:13px; font-weight:500; display:flex; align-items:center; }
.btno { background:transparent; border:1px solid #e3e3e3; color:#e3e3e3; border-radius:9999px; height:36px;
padding:0 18px; font-size:13px; font-weight:500; display:flex; align-items:center; }
.content { flex:1; padding:24px 28px; overflow:hidden; }
.h1 { font-size:24px; font-weight:700; margin:0 0 4px; }
.h1sub { font-size:13px; color:#b4b4b4; margin:0 0 18px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { background:#251633; border-radius:6px; overflow:hidden; }
.thumb { height:80px; }
.th1 { background:linear-gradient(135deg,#7e3aaf,#3a2050); }
.th2 { background:linear-gradient(135deg,#a73aaf,#4a2060); }
.th3 { background:linear-gradient(135deg,#4283e4,#2a3a70); }
.th4 { background:linear-gradient(135deg,#33991d,#204020); }
.cbody { padding:10px; }
.cbody h4 { font-size:12.5px; margin:0 0 6px; line-height:1.3; }
.tag { background:#7e3aaf; color:#e3e3e3; border-radius:4px; padding:2.5px 10px; font-size:11px; display:inline-block; }
</style></head>
<body>
<div class="shell">
<aside>
<div class="item active">Videos</div>
<div class="item">Hero</div>
<div class="item">Vclass</div>
<div class="item">Dictionary</div>
</aside>
<main>
<nav>
<span class="brand">VoiceTube</span>
<div class="navlinks"><span>Article</span><span>Team</span><span>Philosophy</span></div>
<div class="row"><span class="btno">Log in</span><span class="btnp">Join free</span></div>
</nav>
<div class="content">
<div class="h1">Connect. Have fun!</div>
<div class="h1sub">Where is the work that makes me serious? Learn English through video you actually want to watch.</div>
<div class="grid">
<div class="card"><div class="thumb th1"></div><div class="cbody"><span class="tag">Business</span><h4>Negotiation phrases used in real meetings</h4></div></div>
<div class="card"><div class="thumb th2"></div><div class="cbody"><span class="tag">Travel</span><h4>Ordering coffee like a local, five ways</h4></div></div>
<div class="card"><div class="thumb th3"></div><div class="cbody"><span class="tag">Tech</span><h4>How keynote speakers structure a demo</h4></div></div>
<div class="card"><div class="thumb th4"></div><div class="cbody"><span class="tag">Daily</span><h4>Small talk that doesn't feel forced</h4></div></div>
</div>
</div>
</main>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1f2326; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1f2326; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #959698; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e5a00d; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1f2326; color: #e5a00d;
border: 1px solid #e5a00d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1f2326; color: #f5f5f5;
border: 1px solid #414547; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #959698; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3f3722; color: #e5a00d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1F2326; color:#F2F3F4; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { position:relative; width:960px; height:640px; background:#1F2326; }
.topbar { position:absolute; top:0; left:0; right:0; height:56px; display:flex; align-items:center;
justify-content:space-between; padding:0 24px; background:#1F2326; }
.serverpill { display:flex; align-items:center; gap:8px; background:#282C30; border:1px solid #34393D;
border-radius:999px; padding:7px 14px; }
.sdot { width:8px; height:8px; border-radius:50%; background:#4CAF50; }
.serverpill .name { font-size:13px; font-weight:600; color:#F2F3F4; }
.serverpill .chev { font-size:12px; color:#9BA0A4; }
.brandmark { font-size:14px; font-weight:800; color:#E5A00D; letter-spacing:0.02em; }
.topicons { color:#F2F3F4; font-size:16px; display:flex; gap:14px; }
.content { position:absolute; top:56px; left:0; right:0; bottom:64px; padding:20px 24px; }
.sectionhdr { font-size:18px; font-weight:700; color:#F2F3F4; margin:0 0 10px; }
.ondeck { display:flex; gap:16px; }
.odtile { position:relative; width:260px; height:146px; border-radius:6px; overflow:hidden; flex-shrink:0; }
.od1 { background:linear-gradient(150deg,#3a4a63,#5a3a4a); }
.od2 { background:linear-gradient(150deg,#2f4a3f,#3a5a63); }
.od3 { background:linear-gradient(150deg,#4a3a5a,#63403a); }
.playov { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px;
border-radius:50%; background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center;
color:#fff; font-size:15px; }
.progtrack { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,0.22); }
.progfill { position:absolute; left:0; bottom:0; height:3px; background:#E5A00D; }
.odmeta { margin-top:24px; }
.odrow { display:flex; gap:16px; }
.odcol { width:260px; }
.odtitle { font-size:15px; font-weight:600; color:#F2F3F4; margin:0 0 3px; }
.odsub { font-size:14px; font-weight:400; color:#9BA0A4; margin:0; }
.libsection { margin-top:20px; }
.postergrid { display:flex; gap:12px; }
.poster { position:relative; width:142px; height:213px; border-radius:6px; overflow:hidden; flex-shrink:0; }
.p1 { background:linear-gradient(165deg,#5a3a3a,#2f2f3a); }
.p2 { background:linear-gradient(165deg,#3a4a5a,#2f2f2f); }
.p3 { background:linear-gradient(165deg,#4a5a3a,#2f3a2f); }
.p4 { background:linear-gradient(165deg,#5a3a5a,#2f2f3a); }
.p5 { background:linear-gradient(165deg,#3a5a4a,#2f3a3a); }
.p6 { background:linear-gradient(165deg,#5a4a3a,#3a2f2f); }
.udot { position:absolute; top:7px; right:7px; width:9px; height:9px; border-radius:50%; background:#E5A00D;
box-shadow:0 1px 3px rgba(0,0,0,0.5); }
.tabbar { position:absolute; left:0; right:0; bottom:0; height:64px; background:rgba(31,35,38,0.96);
border-top:0.5px solid #34393D; display:flex; align-items:center; justify-content:space-around; }
.tab { display:flex; flex-direction:column; align-items:center; gap:4px; }
.tab .ic { font-size:20px; color:#6B7075; }
.tab .lb { font-size:10px; font-weight:600; color:#6B7075; letter-spacing:0.02em; }
.tab.active .ic, .tab.active .lb { color:#E5A00D; }
</style></head>
<body>
<div class="app">
<div class="topbar">
<div class="serverpill"><span class="sdot"></span><span class="name">Home Media Server</span><span class="chev">▾</span></div>
<div class="brandmark">Plex (iOS)</div>
<div class="topicons"><span>🔍</span><span>⚙</span></div>
</div>
<div class="content">
<p class="sectionhdr">On Deck</p>
<div class="ondeck">
<div class="odtile od1"><div class="playov">▶</div><div class="progtrack"><div class="progfill" style="width:62%;"></div></div></div>
<div class="odtile od2"><div class="playov">▶</div><div class="progtrack"><div class="progfill" style="width:34%;"></div></div></div>
<div class="odtile od3"><div class="playov">▶</div><div class="progtrack"><div class="progfill" style="width:80%;"></div></div></div>
</div>
<div class="odrow odmeta">
<div class="odcol"><p class="odtitle">Nightfall Station</p><p class="odsub">S2 · E5 · 22 min left</p></div>
<div class="odcol"><p class="odtitle">The Long Drive</p><p class="odsub">2023 · 1h 02m left</p></div>
<div class="odcol"><p class="odtitle">Quiet Harbor</p><p class="odsub">S1 · E1 · 8 min left</p></div>
</div>
<div class="libsection">
<p class="sectionhdr">Movies</p>
<div class="postergrid">
<div class="poster p1"><div class="udot"></div></div>
<div class="poster p2"></div>
<div class="poster p3"><div class="udot"></div></div>
<div class="poster p4"></div>
<div class="poster p5"><div class="udot"></div></div>
<div class="poster p6"></div>
</div>
</div>
</div>
<div class="tabbar">
<div class="tab active"><span class="ic">⌂</span><span class="lb">HOME</span></div>
<div class="tab"><span class="ic">☰</span><span class="lb">LIBRARY</span></div>
<div class="tab"><span class="ic">✦</span><span class="lb">DISCOVER</span></div>
<div class="tab"><span class="ic">📺</span><span class="lb">LIVE TV</span></div>
<div class="tab"><span class="ic">👤</span><span class="lb">YOU</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #050505;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #050505;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #050505; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #53585b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fe6728; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fafafa; color: #050505;
border: 1px solid #fe6728; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #1b1b1b;
border: 1px solid #bdbdbd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #53585b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cc0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#1b1b1b; box-sizing:border-box;
font-family:'Avenir','Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
h1,h2 { font-family:Georgia,'Times New Roman',serif; font-weight:300; }
nav { height:72px; background:#fafafa; border-bottom:1px solid #e5e5e5; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.brand { font-size:19px; font-weight:600; color:#050505; letter-spacing:0.5px; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:500; text-transform:uppercase; letter-spacing:0.3px; }
.navlinks span.active { color:#fe6728; border-bottom:2px solid #fe6728; padding-bottom:24px; }
.navlinks span:not(.active) { color:#050505; }
.search-pill { width:170px; height:34px; border-radius:9999px; border:1px solid #dddddd; font-size:12px; color:#868a89;
display:flex; align-items:center; padding:0 16px; }
.hero { height:200px; background:#f5f5f5; display:flex; align-items:center; justify-content:space-between; padding:0 44px; }
.hero h1 { font-size:40px; margin:0 0 12px; color:#050505; max-width:420px; line-height:1.2; }
.hero p { font-size:15px; color:#53585b; margin:0 0 16px; max-width:360px; font-family:'Avenir','Helvetica Neue',sans-serif; }
.btn-orange { display:inline-block; background:#fe6728; color:#fff; font-size:14px; font-weight:600; text-transform:uppercase;
letter-spacing:0.5px; padding:14px 30px; border-radius:8px; }
.device { width:130px; height:150px; border-radius:12px; background:linear-gradient(150deg,#222,#050505); position:relative; }
.device::after { content:''; position:absolute; top:20px; left:20px; right:20px; height:60px; border-radius:8px; background:linear-gradient(90deg,#0018ff33,#4efac033); }
.grid { display:flex; gap:16px; padding:16px 44px 0; }
.card { flex:1; background:#ffffff; border-radius:12px; box-shadow:0 1px 3px rgba(5,5,5,.06); padding:14px; position:relative; }
.card .imgbox { height:88px; background:#f5f5f5; border-radius:8px; margin-bottom:8px; }
.badge { position:absolute; top:10px; left:10px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
padding:4px 8px; border-radius:4px; }
.badge.sale { background:#cc0000; color:#fff; }
.badge.new { background:#4efac0; color:#050505; }
.badge.limited { background:#0018ff; color:#fff; }
.ing-tag { display:inline-block; background:#b4d5fe; color:#050505; font-size:11px; padding:4px 12px; border-radius:9999px; margin-bottom:6px; }
.card .name { font-size:16px; font-weight:600; margin-bottom:4px; }
.card .price { font-size:16px; color:#1b1b1b; }
.card .price.sale { color:#cc0000; }
footer { position:absolute; bottom:0; left:0; right:0; height:88px; background:#050505; color:#fff; display:flex;
align-items:center; justify-content:space-between; padding:0 44px; }
footer .col { font-size:12px; color:#868a89; line-height:1.9; }
footer .col b { display:block; color:#fff; margin-bottom:3px; }
.wrap { position:relative; height:640px; }
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="brand">DR Dennis Gross</div>
<div class="navlinks"><span class="active">Skincare</span><span>Devices</span><span>Ingredients</span><span>Results</span></div>
<div class="search-pill">Search products</div>
</nav>
<div class="hero">
<div>
<h1>Clinical results, wrapped in warmth.</h1>
<p>Dermatologist-formulated skincare, proven by real clinical study.</p>
<a class="btn-orange">Shop Best Sellers</a>
</div>
<div class="device"></div>
</div>
<div class="grid">
<div class="card"><span class="badge new">New</span><div class="imgbox"></div><div class="ing-tag">Vitamin C</div><div class="name">C+ Collagen Serum</div><div class="price">$88</div></div>
<div class="card"><span class="badge limited">Limited</span><div class="imgbox"></div><div class="ing-tag">Retinol</div><div class="name">Alpha Beta Peel Pads</div><div class="price">$88</div></div>
<div class="card"><span class="badge sale">Sale</span><div class="imgbox"></div><div class="name">Hyaluronic Marine Filler</div><div class="price sale">$62</div></div>
<div class="card"><div class="imgbox"></div><div class="name">SPF Ferulic Day Cream</div><div class="price">$68</div></div>
</div>
<footer>
<div class="col"><b>Shop</b>Serums<br>Devices</div>
<div class="col"><b>Learn</b>Ingredients<br>Clinical Studies</div>
<div class="col"><b>DR Dennis Gross</b>Dermatologist-proven.</div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #102c40; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #102c40; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e9ba4; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #102c40; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #102c40; color: #f5f5f5;
border: 1px solid #354c5d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e9ba4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #364e5f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:-apple-system, "Segoe UI", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#102c40; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:700; color:#ffffff; margin:0; }
.navlinks { display:flex; gap:20px; color:#ffffff; opacity:0.85; font-size:14px; }
.cta { background:#222222; color:#ffffff; border:1px solid transparent; border-radius:8px; padding:8px 20px; font-size:14px; font-weight:450; height:42px; display:flex; align-items:center; }
.hero { padding:36px 40px 20px; }
.hero h1 { font-size:48px; font-weight:700; line-height:1.1; letter-spacing:-1.6px; margin:0 0 14px; max-width:640px; }
.hero p { font-size:16px; color:#0b1012; opacity:0.7; max-width:480px; margin:0 0 20px; }
.section-title { font-size:32px; font-weight:700; margin:20px 40px 12px; letter-spacing:-0.6px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 40px; }
.card { background:#ffffff; border:1px solid #cfd5d7; border-radius:8px; height:150px; padding:18px; display:flex; flex-direction:column; justify-content:space-between; }
.card .link { color:#0000ee; font-size:14px; text-decoration:underline; }
.card h3 { font-size:16px; font-weight:700; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">Horizon</p>
<div class="navlinks"><span>Getting Started</span><span>Workspace</span><span>Components</span></div>
<button class="cta">Explore</button>
</nav>
<section class="hero">
<h1>ServiceNow Horizon Design System</h1>
<p>The source of truth for experience design across the Now Platform.</p>
</section>
<div class="section-title">Workspace components</div>
<section class="cards">
<div class="card"><h3>Component library</h3><span class="link">View components</span></div>
<div class="card"><h3>Patterns</h3><span class="link">Browse patterns</span></div>
<div class="card"><h3>App frameworks</h3><span class="link">Read guidance</span></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eb001b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eb001b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #141413; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #eb001b; color: #141413;
border: 1px solid #141413; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #eb001b; color: #f5f5f5;
border: 1px solid #ed273e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ffffff; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #c9031a; color: #141413;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#141413; box-sizing:border-box;
font-family:"Mark", "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; padding:0 40px; border-bottom:1px solid #E0E0E0; }
.circles { width:26px; height:16px; position:relative; margin-right:10px; }
.circles span { position:absolute; width:16px; height:16px; border-radius:50%; top:0; }
.circles .r { left:0; background:#EB001B; }
.circles .y { left:10px; background:#F79E1B; mix-blend-mode:multiply; }
.brand { font-size:15px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:26px; margin-left:32px; }
.navlinks span { font-size:14px; color:#5A5A5A; }
.cta-dark { margin-left:auto; background:#141413; color:#FFFFFF; border-radius:24px; height:40px;
padding:0 22px; display:flex; align-items:center; font-size:14px; font-weight:600; }
.hero { display:flex; align-items:center; padding:40px 40px 30px; gap:30px; }
.hero-text { flex:1.2; }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#EB001B; }
.hero h1 { font-size:42px; font-weight:700; line-height:1.14; letter-spacing:-0.5px; margin:10px 0 14px; max-width:460px; }
.hero p { font-size:18px; font-weight:500; color:#5A5A5A; margin:0 0 22px; max-width:420px; line-height:1.4; }
.cta-row { display:flex; gap:12px; }
.btn-red { background:#EB001B; color:#FFFFFF; border-radius:24px; height:48px; padding:0 26px;
display:flex; align-items:center; font-size:16px; font-weight:600; }
.btn-outline { background:transparent; color:#141413; border:1.5px solid #141413; border-radius:24px;
height:48px; padding:0 26px; display:flex; align-items:center; font-size:16px; font-weight:600; }
.marks { flex:1; height:220px; position:relative; }
.disc { position:absolute; width:150px; height:150px; border-radius:50%; }
.disc.r { background:#EB001B; left:40px; top:30px; }
.disc.y { background:#F79E1B; left:150px; top:30px; mix-blend-mode:multiply; }
.stats { display:flex; gap:16px; padding:20px 40px 30px; }
.stat { flex:1; background:#F7F7F7; border-radius:12px; padding:20px; position:relative; overflow:hidden; }
.stat::before { content:''; position:absolute; top:0; left:0; right:0; height:4px;
background:linear-gradient(90deg,#EB001B,#FF5F00,#F79E1B); }
.stat .v { font-size:32px; font-weight:700; color:#141413; }
.stat .l { font-size:13px; color:#767676; text-transform:uppercase; letter-spacing:0.04em; margin-top:4px; }
</style></head>
<body>
<nav>
<div class="circles"><span class="r"></span><span class="y"></span></div>
<p class="brand">Mastercard</p>
<div class="navlinks"><span>Personal</span><span>Business</span><span>Partners</span><span>News</span></div>
<div class="cta-dark">Sign in</div>
</nav>
<div class="hero">
<div class="hero-text">
<span class="eyebrow">Global Payments Network</span>
<h1>Start something priceless</h1>
<p>Connecting consumers, merchants, and banks in over 210 countries — safely, instantly, everywhere.</p>
<div class="cta-row"><div class="btn-red">Get started</div><div class="btn-outline">Learn more</div></div>
</div>
<div class="marks"><div class="disc r"></div><div class="disc y"></div></div>
</div>
<div class="stats">
<div class="stat"><div class="v">210+</div><div class="l">Countries & Territories</div></div>
<div class="stat"><div class="v">3B+</div><div class="l">Cards Accepted</div></div>
<div class="stat"><div class="v">100%</div><div class="l">Network Uptime Goal</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #8b1a1a; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #1a1a1a;
border: 1px solid #8b1a1a; border-radius: 4px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; background: #8b1a1a; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; font-family:Arial,Helvetica,sans-serif; color:#333333;
}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #e6e6e6;}
.logo{font-size:20px;font-weight:700;color:#111;}
.search{background:#f5f5f5;border-radius:999px;height:40px;width:320px;display:flex;align-items:center;padding:0 18px;font-size:13px;color:#888;}
.cta{background:#8b1a1a;color:#fff;height:48px;display:flex;align-items:center;padding:0 20px;font-size:13px;font-weight:700;border-radius:6px;}
.subnav{display:flex;gap:24px;padding:12px 30px;font-size:13px;color:#555;border-bottom:1px solid #e6e6e6;}
.subnav span.active{color:#8b1a1a;font-weight:700;}
.hero{padding:22px 30px;display:flex;gap:20px;align-items:center;}
.hero-copy{width:340px;}
.hero-title{font-size:26px;font-weight:700;line-height:1.25;margin-bottom:10px;}
.hero-sub{font-size:13px;color:#666;line-height:1.5;margin-bottom:14px;}
.btn-main{display:inline-block;background:#8b1a1a;color:#fff;padding:12px 22px;font-size:13px;font-weight:700;border-radius:6px;}
.hero-visual{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.vinyl{aspect-ratio:1/1;background:linear-gradient(155deg,#333,#111);border-radius:4px;position:relative;}
.vinyl:before{content:'';position:absolute;width:24px;height:24px;border-radius:50%;background:#8b1a1a;top:50%;left:50%;transform:translate(-50%,-50%);}
.section{padding:6px 30px 0;}
.section-title{font-size:16px;font-weight:700;margin-bottom:12px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{background:#fff;}
.card-img{width:100%;aspect-ratio:1/1;background:linear-gradient(155deg,#555,#222);border-radius:2px;margin-bottom:8px;}
.card-name{font-size:13px;font-weight:600;color:#222;}
.card-artist{font-size:11.5px;color:#777;margin-bottom:4px;}
.card-price{font-size:13px;font-weight:700;color:#333;}
</style>
<div class="nav">
<div class="logo">Easy Street Records</div>
<div class="search">Search artist, album, or catalog #...</div>
<div class="cta">Cart (0)</div>
</div>
<div class="subnav">
<span class="active">New Arrivals</span><span>Rock</span><span>Jazz</span><span>Soul</span><span>Hip-Hop</span><span>Used Bins</span>
</div>
<div class="hero">
<div class="hero-copy">
<div class="hero-title">Every record has its place.</div>
<div class="hero-sub">Curated new and used vinyl, sourced from collections and pressed straight from the label.</div>
<div class="btn-main">Browse New Arrivals</div>
</div>
<div class="hero-visual">
<div class="vinyl"></div><div class="vinyl"></div><div class="vinyl"></div><div class="vinyl"></div>
</div>
</div>
<div class="section">
<div class="section-title">This Week's Arrivals</div>
<div class="grid">
<div class="card"><div class="card-img"></div><div class="card-name">Midnight Frequencies</div><div class="card-artist">The Quiet Static</div><div class="card-price">$24.99</div></div>
<div class="card"><div class="card-img"></div><div class="card-name">Blue Room Sessions</div><div class="card-artist">Marcus Feld Trio</div><div class="card-price">$29.99</div></div>
<div class="card"><div class="card-img"></div><div class="card-name">Corner Store Soul</div><div class="card-artist">Delta Nine</div><div class="card-price">$21.99</div></div>
<div class="card"><div class="card-img"></div><div class="card-name">Analog Dreaming</div><div class="card-artist">Foreign Static</div><div class="card-price">$26.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #383838;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #383838;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #383838; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #108474; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #383838;
border: 1px solid #c9caca; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fbcd0a; color: #383838;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; color:#555555; font-family:'Nunito Sans','Red Hat Text',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;background:#ffffff;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dedede;}
.logo{font-size:19px;font-weight:800;color:#108474;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:700;color:#555555;}
.navcta{background:#ffd600;color:#3b2b00;font-size:12px;font-weight:800;padding:9px 20px;border-radius:9999px;}
.hero{height:250px;display:flex;align-items:center;padding:0 36px;background:linear-gradient(120deg,#c1e6e6 0%,#f9fafb 60%);position:relative;overflow:hidden;}
.herotext{width:48%;}
.herotext h1{font-size:29px;font-weight:800;color:#0d6b5c;margin:0 0 12px;line-height:1.25;}
.herotext p{font-size:14px;color:#555555;margin:0 0 18px;max-width:300px;line-height:1.6;}
.cta{display:inline-block;background:#ffd600;color:#3b2b00;font-size:13px;font-weight:800;padding:12px 28px;border-radius:9999px;width:fit-content;}
.toys{position:absolute;right:60px;top:60px;width:280px;height:130px;}
.toy{position:absolute;border-radius:12px;}
.t1{width:70px;height:70px;background:#108474;left:0;top:40px;}
.t2{width:60px;height:60px;background:#b3c636;left:80px;top:10px;border-radius:50%;}
.t3{width:80px;height:50px;background:#ffd600;left:150px;top:50px;}
.t4{width:50px;height:50px;background:#a89cc8;left:230px;top:0;border-radius:50%;}
.seclabel{font-size:14px;font-weight:800;color:#0d6b5c;padding:20px 36px 12px;}
.grid{display:flex;gap:14px;padding:0 36px;}
.card{width:150px;background:#ffffff;border-radius:12px;padding:10px;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.thumb{height:90px;border-radius:8px;margin-bottom:8px;}
.ptitle{font-size:12px;font-weight:700;color:#383838;line-height:1.3;height:30px;overflow:hidden;}
.pprice{font-size:13px;font-weight:800;color:#108474;margin-top:4px;}
.tag{display:inline-block;margin-top:6px;font-size:9px;font-weight:700;background:#c1e6e6;color:#0d6b5c;border-radius:6px;padding:2px 7px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:11px;color:#7b7b7b;border-top:1px solid #dedede;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Tender Leaf Toys</div>
<div class="navlinks"><span>Wooden Toys</span><span>Dollhouses</span><span>Baby & Toddler</span></div>
<div class="navcta">Shop Nursery</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Wooden toys for a gentler kind of play.</h1>
<p>Sustainably sourced rubberwood, hand-finished with water-based paints for tiny hands.</p>
<div class="cta">Shop New In</div>
</div>
<div class="toys"><div class="toy t1"></div><div class="toy t2"></div><div class="toy t3"></div><div class="toy t4"></div></div>
</div>
<div class="seclabel">Little Nursery Favourites</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#108474,#b3c636)"></div><div class="ptitle">Rainbow Stacking Tower</div><div class="pprice">£24.00</div><div class="tag">Ages 1+</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffd600,#b3c636)"></div><div class="ptitle">Fairy Garden Dollhouse</div><div class="pprice">£89.00</div><div class="tag">Best Seller</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a89cc8,#c1e6e6)"></div><div class="ptitle">Woodland Push-Along Cart</div><div class="pprice">£32.00</div><div class="tag">New</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b5e0fa,#108474)"></div><div class="ptitle">Wooden Farm Puzzle</div><div class="pprice">£16.00</div><div class="tag">Ages 2+</div></div>
</div>
<div class="footer"><span>© Sustainably Sourced Wood</span><span>Free Delivery Over £45</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8b8b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #151515; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a0a; color: #ffffff;
border: 1px solid #151515; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0a0a; color: #f5f5f5;
border: 1px solid #303030; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b8b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0c0c0c; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A0A0A; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px; display:flex; align-items:center; }
.hero { position:relative; z-index:2; width:460px; padding:0 56px; display:flex; flex-direction:column; gap:16px; }
.kicker { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#6E6E6E; }
.word { font-size:44px; font-weight:700; letter-spacing:-1.4pt; line-height:1.02; margin:0; }
.tag { font-size:15px; color:#A1A1A1; line-height:1.5; max-width:340px; margin:0; }
.row { display:flex; gap:12px; align-items:center; margin-top:8px; }
.cta { background:#FFFFFF; color:#000000; border-radius:28px; padding:13px 26px; font-weight:600; font-size:15px; }
.cta2 { background:transparent; color:#FFFFFF; border:1pt solid #2A2A2A; border-radius:24px; padding:12px 22px; font-weight:600; font-size:14px; }
.stats { display:flex; gap:28px; margin-top:22px; }
.stat b { display:block; font-size:26px; font-weight:700; letter-spacing:-0.6pt; }
.stat span { font-size:11px; color:#6E6E6E; text-transform:uppercase; letter-spacing:0.06em; }
/* AI accent line watermark */
.aiwash { position:absolute; left:56px; bottom:64px; width:340px; height:3px; border-radius:3px;
background:linear-gradient(90deg,#4DA8FF,#8B8DF5,#FF6E87); opacity:0.85; }
.phonewrap { position:relative; z-index:2; width:500px; height:640px; display:flex; align-items:center; justify-content:center; }
.phone { position:relative; width:296px; height:604px; background:#0A0A0A; border:1pt solid #252525; border-radius:46px;
box-shadow:0 30px 80px rgba(0,0,0,0.6); padding:14px 14px 0; overflow:hidden; }
.notch { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:120px; height:22px; background:#000; border-radius:12px; z-index:5; }
.pnav { display:flex; align-items:center; justify-content:space-between; padding:18px 4px 10px; }
.pnav .ptitle { font-size:22px; font-weight:700; letter-spacing:-0.4pt; }
.avatar { width:30px; height:30px; border-radius:50%; background:#1E1E1E; border:1pt solid #2A2A2A; }
.herocard { background:#151515; border-radius:22px; padding:18px; margin:8px 4px 14px; }
.hlabel { font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#A1A1A1; }
.hnum { font-size:52px; font-weight:700; letter-spacing:-1.4pt; line-height:1; margin:6px 0 2px; }
.hsub { font-size:12px; color:#A1A1A1; margin-bottom:12px; }
.pbar { height:6px; border-radius:6px; background:#2A2A2A; overflow:hidden; margin-bottom:16px; }
.pbar i { display:block; height:100%; width:45%; background:#FFFFFF; border-radius:6px; }
.rings { display:flex; justify-content:space-between; }
.ring { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; }
.ring::before { content:''; position:absolute; inset:0; border-radius:50%; background:#2A2A2A; }
.ring b { position:relative; font-size:14px; font-weight:700; }
.ring span { position:relative; font-size:8px; color:#A1A1A1; text-transform:uppercase; letter-spacing:0.06em; }
.rp { background:conic-gradient(#4DA8FF 0deg 260deg, #2A2A2A 260deg 360deg); }
.rc { background:conic-gradient(#FFB54C 0deg 190deg, #2A2A2A 190deg 360deg); }
.rf { background:conic-gradient(#FF6E87 0deg 110deg, #2A2A2A 110deg 360deg); }
.ringin { position:absolute; inset:7px; border-radius:50%; background:#151515; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.mealcard { background:#151515; border-radius:20px; margin:0 4px 14px; overflow:hidden; }
.mealphoto { height:92px; background:linear-gradient(135deg,#3a2a1a,#6b4a2a 45%,#c9863f); }
.mealbody { padding:14px; }
.mealname { font-size:16px; font-weight:600; }
.mealmeta { font-size:11px; color:#A1A1A1; margin:2px 0 10px; }
.mealrow { display:flex; justify-content:space-between; align-items:center; }
.chips { display:flex; gap:6px; }
.chip { font-size:10px; font-weight:700; padding:4px 8px; border-radius:10px; }
.chip.p { background:rgba(77,168,255,0.16); color:#4DA8FF; }
.chip.c { background:rgba(255,181,76,0.16); color:#FFB54C; }
.chip.f { background:rgba(255,110,135,0.16); color:#FF6E87; }
.kcal { font-size:26px; font-weight:700; letter-spacing:-0.6pt; }
.ptabbar { position:absolute; left:0; right:0; bottom:0; height:70px; background:rgba(10,10,10,0.92); border-top:0.5pt solid #252525;
display:flex; align-items:center; justify-content:space-around; }
.tdot { width:6px; height:6px; border-radius:50%; background:#6E6E6E; }
.fab { width:52px; height:52px; border-radius:50%; background:#FFFFFF; box-shadow:0 0 26px rgba(255,255,255,0.18); margin-top:-24px;
display:flex; align-items:center; justify-content:center; }
.fab i { width:16px; height:16px; border-radius:4px; border:2pt solid #0A0A0A; }
</style></head>
<body>
<div class="stage">
<div class="hero">
<span class="kicker">AI Calorie Tracking</span>
<h1 class="word">Cal AI (iOS)</h1>
<p class="tag">Snap a photo. The AI reads the plate — dish, ingredients, macros, calories — in about four seconds. Every number stays editable.</p>
<div class="row">
<div class="cta">Scan a meal</div>
<div class="cta2">See plans</div>
</div>
<div class="stats">
<div class="stat"><b>1,247</b><span>kcal today</span></div>
<div class="stat"><b>14</b><span>day streak</span></div>
<div class="stat"><b>4s</b><span>avg scan</span></div>
</div>
<div class="aiwash"></div>
</div>
<div class="phonewrap">
<div class="phone">
<div class="notch"></div>
<div class="pnav"><span class="ptitle">Today</span><span class="avatar"></span></div>
<div class="herocard">
<span class="hlabel">Today</span>
<div class="hnum">1,247</div>
<div class="hsub">kcal remaining of 2,200</div>
<div class="pbar"><i></i></div>
<div class="rings">
<span class="ring rp"><span class="ringin"><b>42</b><span>protein</span></span></span>
<span class="ring rc"><span class="ringin"><b>58</b><span>carbs</span></span></span>
<span class="ring rf"><span class="ringin"><b>14</b><span>fat</span></span></span>
</div>
</div>
<div class="mealcard">
<div class="mealphoto"></div>
<div class="mealbody">
<div class="mealname">Grilled Chicken Bowl</div>
<div class="mealmeta">12:30 PM · 1 serving</div>
<div class="mealrow">
<div class="chips"><span class="chip p">P 42g</span><span class="chip c">C 48g</span><span class="chip f">F 14g</span></div>
<div class="kcal">487</div>
</div>
</div>
</div>
<div class="ptabbar">
<span class="tdot"></span><span class="tdot"></span>
<span class="fab"><i></i></span>
<span class="tdot"></span><span class="tdot"></span>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff7700; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #ff7700;
border: 1px solid #ff7700; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff7700; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f3f2f7; font-family:Arial, 'Helvetica Neue', sans-serif; color:#222222; }
*{box-sizing:border-box;}
.nav{height:56px;background:#282f37;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;color:#a9b0b8;}
.navlinks span:first-child{color:#ff7700;}
.gradebadge{background:#003388;color:#fff;font-size:11px;font-weight:700;padding:5px 12px;border-radius:9999px;}
.hero{height:230px;background:#f3f2f7;display:flex;align-items:center;padding:0 32px;position:relative;}
.heroText{width:440px;}
.h1{font-size:27px;font-weight:700;line-height:1.2;margin:0 0 10px;}
.sub{font-size:13px;color:#444444;margin:0 0 16px;max-width:340px;}
.btn{height:42px;padding:0 24px;border-radius:6px;background:#ff7700;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;}
.domewrap{width:400px;height:230px;position:relative;}
.base{position:absolute;left:150px;top:150px;width:100px;height:40px;background:#282f37;border-radius:6px;}
.dome{position:absolute;left:160px;top:60px;width:80px;height:90px;border-radius:40px 40px 0 0;background:#ff7700;}
.spark{position:absolute;width:6px;height:24px;background:#4592fe;border-radius:2px;}
.s1{left:150px;top:50px;transform:rotate(20deg);} .s2{left:250px;top:40px;transform:rotate(-25deg);} .s3{left:200px;top:20px;}
.sec{padding:18px 32px;}
.sectitle{font-size:15px;font-weight:700;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:216px;background:#ffffff;border-radius:10px;padding:12px;position:relative;}
.pillrow{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:6px;z-index:2;}
.agepill{background:#ff7700;color:#fff;font-size:9px;font-weight:700;padding:3px 8px;border-radius:9999px;}
.gradepill{background:#003388;color:#fff;font-size:9px;font-weight:700;padding:3px 8px;border-radius:9999px;}
.thumb{height:86px;border-radius:6px;margin-bottom:10px;}
.ptitle{font-size:13px;font-weight:700;margin-bottom:4px;}
.pprice{font-size:14px;font-weight:700;color:#ff7700;}
</style>
<div class="nav">
<div class="logo">Steve Spangler Science Educatio 2</div>
<div class="navlinks"><span>Classroom Kits</span><span>Curriculum</span><span>Bulk Orders</span><span>Chemistry</span></div>
<div class="gradebadge">Grade 3-5 Aligned</div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Curriculum-aligned kits,<br>parent-approved fun.</div>
<div class="sub">Grade-level science experiments teachers can trust and kids actually want to do.</div>
<div class="btn">Shop Classroom Kits</div>
</div>
<div class="domewrap"><div class="base"></div><div class="dome"></div><div class="spark s1"></div><div class="spark s2"></div><div class="spark s3"></div></div>
</div>
<div class="sec">
<div class="sectitle">Curriculum Favorites</div>
<div class="grid">
<div class="card"><div class="pillrow"><div class="agepill">Ages 8+</div><div class="gradepill">Grade 3-5</div></div><div class="thumb" style="background:#ff7700"></div><div class="ptitle">Static Electricity Lab Set</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="pillrow"><div class="agepill">Ages 10+</div><div class="gradepill">Grade 5-8</div></div><div class="thumb" style="background:#003388"></div><div class="ptitle">Circuits & Conductors Kit</div><div class="pprice">$29.99</div></div>
<div class="card"><div class="pillrow"><div class="agepill">Ages 6+</div><div class="gradepill">Grade K-2</div></div><div class="thumb" style="background:#282f37"></div><div class="ptitle">Weather Station Starter</div><div class="pprice">$19.99</div></div>
<div class="card"><div class="pillrow"><div class="agepill">Ages 9+</div><div class="gradepill">Grade 4-6</div></div><div class="thumb" style="background:#4592fe"></div><div class="ptitle">Chemical Reactions Bundle</div><div class="pprice">$34.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4a154b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4a154b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a890a8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4a154b; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4a154b; color: #f5f5f5;
border: 1px solid #653966; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a890a8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #673a68; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1D1C1D; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; height:100%; }
.sidebar { width:230px; background:#4A154B; padding:0; display:flex; flex-direction:column; }
.ws-hdr { height:56px; display:flex; align-items:center; gap:10px; padding:0 16px; }
.ws-ic { width:32px; height:32px; border-radius:4px; background:#fff; color:#4A154B; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; }
.ws-name { color:#fff; font-size:17px; font-weight:700; }
.sec-label { color:rgba(207,195,207,.6); font-size:11px; font-weight:700; letter-spacing:.6px; padding:14px 16px 4px; }
.ch-row { display:flex; align-items:center; gap:8px; padding:5px 16px; color:#CFC3CF; font-size:14px; }
.ch-row.active { background:#1164A3; color:#fff; font-weight:700; }
.ch-row.unread { color:#fff; font-weight:700; }
.badge { margin-left:auto; background:#E01E5A; color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:9px; }
.main { flex:1; display:flex; flex-direction:column; }
.ch-hdr { height:52px; display:flex; align-items:center; gap:8px; padding:0 20px; border-bottom:1px solid #DDDDDD; }
.ch-title { font-size:17px; font-weight:700; }
.ch-topic { font-size:12px; color:#616061; margin-left:8px; }
.huddle { background:#1264A3; color:#fff; height:44px; display:flex; align-items:center; gap:10px; padding:0 20px; font-size:14px; font-weight:700; }
.huddle .join { margin-left:auto; background:#fff; color:#1264A3; font-size:12px; font-weight:700; padding:5px 14px; border-radius:4px; }
.msgs { flex:1; padding:14px 20px; }
.msg { display:flex; gap:12px; margin-top:14px; }
.av { width:36px; height:36px; border-radius:4px; }
.mline1 { font-size:15px; }
.uname { font-weight:700; }
.ts { color:#616061; font-size:12px; margin-left:6px; }
.mbody { font-size:15px; margin-top:2px; line-height:1.5; }
.reactions { display:flex; gap:6px; margin-top:8px; }
.chip { background:#F1F1F1; border-radius:500px; padding:4px 8px; font-size:12px; font-weight:600; }
.chip.on { background:#E3F2FC; border:1px solid #1264A3; }
.thread-link { margin-top:8px; font-size:13px; font-weight:600; color:#1264A3; }
</style></head>
<body>
<div class="app">
<div class="sidebar">
<div class="ws-hdr"><div class="ws-ic">A</div><div class="ws-name">Acme Design</div><div style="margin-left:auto;font-size:10px;font-weight:700;color:rgba(255,255,255,.5);">Slack (iOS)</div></div>
<div class="sec-label">Channels</div>
<div class="ch-row unread"># design</div>
<div class="ch-row active"># general</div>
<div class="ch-row"># random</div>
<div class="sec-label">Direct messages</div>
<div class="ch-row unread">Sarah Kim<span class="badge">2</span></div>
<div class="ch-row">Marco Diaz</div>
</div>
<div class="main">
<div class="ch-hdr"><div class="ch-title"># general</div><div class="ch-topic">14 members</div></div>
<div class="huddle">🟡🩷🟢🔵 Huddle in progress<div class="join">Join</div></div>
<div class="msgs">
<div class="msg">
<div class="av" style="background:linear-gradient(135deg,#e9a,#c56);"></div>
<div><div class="mline1"><span class="uname">Sarah Kim</span><span class="ts">10:42 AM</span></div>
<div class="mbody">Shipped the new onboarding flow — would love a look before standup!</div>
<div class="reactions"><div class="chip on">👍 4</div><div class="chip">🎉 2</div></div>
<div class="thread-link">💬 5 replies, last reply 3h ago</div>
</div>
</div>
<div class="msg">
<div class="av" style="background:linear-gradient(135deg,#89b,#456);"></div>
<div><div class="mline1"><span class="uname">Marco Diaz</span><span class="ts">10:55 AM</span></div>
<div class="mbody">Looks great! One nit on the empty state copy, left a comment.</div>
</div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e1027; color: #5865f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#18181b; box-sizing:border-box;
font-family:"MiSans", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.display { font-family:"Outfit", "MiSans", sans-serif; }
nav { height:56px; display:flex; align-items:center; padding:0 36px; }
.brand { font-size:15px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:22px; margin-left:32px; }
.navlinks span { font-size:14px; color:#45515e; }
.light-action { margin-left:auto; background:#f5f5f5; color:#181e25; border-radius:32px; height:40px; padding:0 28px;
display:flex; align-items:center; font-size:16px; }
.hero { padding:14px 36px 10px; }
.hero .kicker { font-size:13px; color:#86909c; margin-bottom:6px; }
.hero h1 { font-size:56px; font-weight:600; line-height:1.1; margin:0 0 14px; letter-spacing:-1px; }
.actions { display:flex; gap:8px; }
.dark-action { background:#000000; color:#ffffff; border-radius:8px; height:38px; padding:0 16px; display:flex;
align-items:center; font-size:14px; }
.light-pair { background:#ffffff; color:#222222; border:1px solid #e5e7eb; border-radius:8px; height:38px;
padding:0 16px; display:flex; align-items:center; font-size:14px; }
.divider { height:1px; background:#e5e7eb; margin:16px 36px; }
.audio { display:flex; align-items:center; gap:20px; padding:0 36px; }
.audio-panel { flex:1; background:#f5f5f5; border-radius:16px; padding:20px 22px; display:flex; align-items:center; gap:16px; }
.waveform { flex:1; height:40px; display:flex; align-items:flex-end; gap:3px; }
.waveform span { flex:1; background:#7659fa; opacity:0.6; border-radius:2px; }
.generate { background:#7659fa; color:#f8f8f8; border-radius:100px; height:36px; padding:0 20px; display:flex;
align-items:center; font-size:14px; font-weight:500; }
.careers { display:flex; align-items:center; gap:14px; padding:20px 36px 0; }
.careers-primary { background:#181e25; color:#ffffff; border-radius:9999px; height:44px; padding:12px 24px;
display:flex; align-items:center; font-size:14px; font-weight:500; }
.careers-outline { background:#ffffff; color:#18181b; border:1px solid #18181b; border-radius:9999px; height:44px;
padding:12px 32px; display:flex; align-items:center; font-size:16px; font-weight:500; }
</style></head>
<body>
<nav>
<p class="brand">MiniMax</p>
<div class="navlinks"><span>Models</span><span>Products</span><span>Platform</span><span>Careers</span></div>
<div class="light-action">Try now</div>
</nav>
<div class="hero">
<div class="kicker">MODEL LAUNCH</div>
<h1 class="display">Intelligence with everyone</h1>
<div class="actions"><div class="dark-action">Read the paper</div><div class="light-pair">View benchmarks</div></div>
</div>
<div class="divider"></div>
<div class="audio">
<div class="audio-panel">
<div class="waveform">
<span style="height:30%"></span><span style="height:60%"></span><span style="height:90%"></span>
<span style="height:45%"></span><span style="height:70%"></span><span style="height:35%"></span>
<span style="height:80%"></span><span style="height:50%"></span><span style="height:65%"></span>
<span style="height:40%"></span>
</div>
<div class="generate">Generate audio</div>
</div>
</div>
<div class="careers">
<div class="careers-primary">View open roles</div>
<div class="careers-outline">Life at MiniMax</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f1eee7; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f1eee7; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.35; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0.5px; background: #1990c6; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0.5px; background: #f1eee7; color: #121212;
border: 1px solid #1990c6; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f1eee7; color: #121212;
border: 1px solid #b9b7b2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #1990c6; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f1eee7; font-family:'Gotham','Helvetica Neue',Arial,sans-serif; color:#4b4a49; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#f1eee7;}
.logo{font-size:19px;font-weight:500;letter-spacing:0.5px;color:#121212;text-transform:uppercase;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:0.4px;color:#121212;}
.search{width:170px;height:36px;border-radius:9999px;background:#fff;border:1px solid #dedede;display:flex;align-items:center;padding:0 14px;font-size:12px;color:#929292;}
.hero{height:200px;background:#f9f7f2;display:flex;align-items:center;justify-content:center;padding:0 32px;}
.hero h1{font-size:26px;font-weight:500;color:#121212;text-align:center;max-width:500px;line-height:1.35;}
.grid{display:flex;gap:16px;padding:22px 36px 0;justify-content:center;}
.card{width:206px;background:#fff;border-radius:12px;overflow:hidden;}
.thumb{height:130px;border-radius:12px 12px 0 0;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.b-new{background:#1990c6;color:#fff;} .b-sale{background:#e2c2bc;color:#121212;}
.pbody{padding:10px 14px 14px;}
.ptitle{font-size:14px;font-weight:500;color:#121212;}
.pprice{font-size:14px;color:#4b4a49;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Nest New York</div>
<div class="navlinks"><div>Candles</div><div>Fragrance</div><div>Diffusers</div><div>Gifts</div></div>
<div class="search">Search</div>
</div>
<div class="hero"><h1>A quiet ritual, bottled —<br>fragrance for the home you love.</h1></div>
<div class="grid">
<div class="card"><span class="badge b-new">New</span><div class="thumb" style="background:linear-gradient(160deg,#1990c6,#e2c2bc)"></div><div class="pbody"><div class="ptitle">Blue Cypress & Snow Candle</div><div class="pprice">$46</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e2c2bc,#4b4a49)"></div><div class="pbody"><div class="ptitle">Bamboo Reed Diffuser</div><div class="pprice">$58</div></div></div>
<div class="card"><span class="badge b-sale">Sale</span><div class="thumb" style="background:linear-gradient(160deg,#4b4a49,#1990c6)"></div><div class="pbody"><div class="ptitle">Grapefruit Room Spray</div><div class="pprice">$32</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f3ee; color: #272d45;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f3ee; color: #272d45;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.3; margin: 0; color: #272d45; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #ac624b; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #f4f3ee; color: #272d45;
border: 1px solid #ac624b; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f4f3ee; color: #2c3e50;
border: 1px solid #c1c2c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #b2f9e9; color: #272d45;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f4f3ee; font-family:Georgia,'Times New Roman',serif; color:#272d45;
}
*{box-sizing:border-box;}
.sans{font-family:Arial,Helvetica,sans-serif;}
.nav{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e2ded3;}
.logo{font-size:21px;font-weight:400;letter-spacing:.5px;}
.navlinks{display:flex;gap:26px;font-size:12.5px;color:#5a5f74;}
.pill-btn{background:#ac624b;color:#fff;border-radius:999px;padding:12px 22px;font-size:12px;font-weight:600;}
.hero{display:flex;padding:30px 34px 20px;gap:26px;align-items:center;}
.hero-copy{width:380px;}
.hero-title{font-size:36px;line-height:1.2;margin-bottom:14px;}
.hero-sub{font-size:14px;line-height:1.6;color:#4a4f66;margin-bottom:18px;max-width:340px;}
.btn-outline{display:inline-block;border:1.5px solid #272d45;border-radius:999px;color:#272d45;padding:11px 22px;font-size:12px;font-weight:600;}
.hero-visual{flex:1;height:220px;border-radius:20px;background:linear-gradient(135deg,#ac624b 0%,#272d45 100%);position:relative;}
.pot{position:absolute;width:100px;height:100px;border-radius:50% 50% 46% 46%;background:#fffaf3;bottom:20px;left:50%;transform:translateX(-50%);box-shadow:0 8px 16px rgba(0,0,0,.15);}
.pot:before{content:'';position:absolute;top:-10px;left:16px;right:16px;height:20px;border-radius:50%;background:#fff;}
.gold-dot{position:absolute;top:24px;right:40px;width:16px;height:16px;border-radius:50%;background:#ffcf2a;}
.teal-dot{position:absolute;top:60px;left:30px;width:12px;height:12px;border-radius:50%;background:#0e7a82;}
.section{padding:8px 34px 0;}
.section-title{font-size:19px;margin-bottom:14px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{background:#fff;border-radius:12px;overflow:hidden;}
.card-img{height:96px;background:linear-gradient(160deg,#e9c9be,#ac624b);}
.card-body{padding:11px;}
.card-name{font-size:13px;margin-bottom:4px;}
.card-color{font-size:10px;color:#0e7a82;font-family:Arial,sans-serif;margin-bottom:6px;}
.card-price{font-size:13px;font-weight:600;font-family:Arial,sans-serif;color:#272d45;}
</style>
<div class="nav">
<div class="logo">East Fork</div>
<div class="navlinks sans"><span>Dinnerware</span><span>Serveware</span><span>Colors</span><span>Journal</span></div>
<div class="pill-btn sans">Shop Best Sellers</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="hero-title">Pottery made for everyday use.</div>
<div class="hero-sub sans">Handcrafted in Asheville. Each piece carries the maker's touch — small variations that make it yours.</div>
<div class="btn-outline sans">Explore Colorways</div>
</div>
<div class="hero-visual">
<div class="gold-dot"></div><div class="teal-dot"></div>
<div class="pot"></div>
</div>
</div>
<div class="section">
<div class="section-title">The Essentials Collection</div>
<div class="grid sans">
<div class="card"><div class="card-img"></div><div class="card-body"><div class="card-name">Dinner Plate</div><div class="card-color">Terracotta</div><div class="card-price">$38.00</div></div></div>
<div class="card"><div class="card-img"></div><div class="card-body"><div class="card-name">Serving Bowl</div><div class="card-color">Deep Navy</div><div class="card-price">$68.00</div></div></div>
<div class="card"><div class="card-img"></div><div class="card-body"><div class="card-name">Mug, 12oz</div><div class="card-color">Muted Gold</div><div class="card-price">$24.00</div></div></div>
<div class="card"><div class="card-img"></div><div class="card-body"><div class="card-name">Pasta Bowl</div><div class="card-color">Deep Teal</div><div class="card-price">$44.00</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #787878; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.06em; background: #313131; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.06em; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787878; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.1em; background: #313131; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; color:#4c4c4c; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 44px;border-bottom:1px solid #dcdcdc;}
.logo{font-family:Georgia,'Times New Roman',serif;font-size:22px;color:#313131;letter-spacing:.2px;}
.navlinks{display:flex;gap:26px;font-size:13px;color:#313131;}
.cart{font-size:12px;color:#313131;letter-spacing:.5px;text-transform:uppercase;}
.hero{height:270px;display:flex;align-items:center;padding:0 44px;}
.herotext{width:420px;}
.label{font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:#787878;margin-bottom:16px;}
.headline{font-family:Georgia,'Times New Roman',serif;font-size:32px;font-weight:400;color:#313131;margin-bottom:16px;line-height:1.25;letter-spacing:-0.3px;}
.sub{font-size:14px;line-height:1.65;color:#4c4c4c;margin-bottom:22px;max-width:340px;}
.btn{display:inline-block;background:#313131;color:#fff;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:14px 30px;}
.toolbox{width:280px;height:230px;margin-left:60px;display:flex;align-items:center;justify-content:center;position:relative;}
.handle{position:absolute;left:110px;top:20px;width:14px;height:130px;background:#313131;border-radius:2px;transform:rotate(18deg);}
.blade{position:absolute;left:150px;top:20px;width:70px;height:22px;background:#787878;border-radius:0 40% 40% 0;transform:rotate(18deg);}
.sec{padding:22px 44px 0;}
.sectitle{font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:#787878;margin-bottom:18px;}
.grid{display:flex;gap:20px;}
.card{width:190px;}
.thumb{height:150px;background:#f9f9f7;margin-bottom:12px;display:flex;align-items:center;justify-content:center;}
.mini{width:8px;height:90px;background:#313131;border-radius:2px;}
.pname{font-size:13px;color:#313131;margin-bottom:4px;}
.pprice{font-size:13px;color:#787878;}
</style>
<div class="nav">
<div class="logo">Niwaki</div>
<div class="navlinks"><span>Pruning</span><span>Ladders</span><span>Maintenance</span><span>Clothing</span></div>
<div class="cart">Bag (0)</div>
</div>
<div class="hero">
<div class="herotext">
<div class="label">Japanese Garden Tools</div>
<div class="headline">Tools built for the craft, not the shelf.</div>
<div class="sub">Precision-forged instruments for gardeners who value the work as much as the result.</div>
<div class="btn">Shop All Tools</div>
</div>
<div class="toolbox"><div class="handle"></div><div class="blade"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="mini"></div></div><div class="pname">Niwaki Tobisho Secateurs</div><div class="pprice">£58</div></div>
<div class="card"><div class="thumb"><div class="mini" style="height:70px"></div></div><div class="pname">Sentei Bypass Shears</div><div class="pprice">£45</div></div>
<div class="card"><div class="thumb"><div class="mini" style="height:110px"></div></div><div class="pname">Tripod Garden Ladder</div><div class="pprice">£195</div></div>
<div class="card"><div class="thumb"><div class="mini" style="height:60px"></div></div><div class="pname">Hori Hori Knife</div><div class="pprice">£32</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00dc82; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00dc82; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096c44; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #020420; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00dc82; color: #020420;
border: 1px solid #020420; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00dc82; color: #111111;
border: 1px solid #03bc70; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096c44; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00b972; color: #020420;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #020420; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
.glow { position:absolute; border-radius:50%; filter:blur(70px); opacity:0.35; pointer-events:none; }
.g1 { width:420px; height:420px; left:-140px; top:-160px; background:#00DC82; }
.g2 { width:320px; height:320px; right:-120px; top:120px; background:#00A155; opacity:0.22; }
nav { position:relative; z-index:2; height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; border-bottom:1px solid rgba(255,255,255,0.08); }
.brand { display:flex; align-items:center; gap:9px; font-size:16px; font-weight:700; color:#FFFFFF; letter-spacing:-0.2px; }
.brand .mark { width:22px; height:22px; border-radius:7px; background:#00DC82; color:#020420; display:flex;
align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.navlinks { display:flex; gap:26px; font-size:13px; color:rgba(255,255,255,0.55); font-weight:500; }
.navlinks span.active { color:#00DC82; }
.navcta { display:flex; align-items:center; gap:14px; }
.searchbox { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
border-radius:8px; padding:6px 12px; font-size:12px; color:rgba(255,255,255,0.4); }
.kbd { background:rgba(255,255,255,0.08); border-radius:4px; padding:1px 6px; font-size:10px; color:rgba(255,255,255,0.5); font-family:monospace; }
.btn-primary { background:#00DC82; color:#020420; border:none; border-radius:8px; padding:8px 18px;
font-weight:600; font-size:13px; white-space:nowrap; }
main { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:44px 36px 0; align-items:center; }
.hero-copy { display:flex; flex-direction:column; gap:16px; }
.eyebrow { display:inline-flex; width:fit-content; align-items:center; gap:6px; background:rgba(0,220,130,0.12);
border:1px solid rgba(0,220,130,0.3); color:#00DC82; font-size:11px; font-weight:600; letter-spacing:0.04em;
text-transform:uppercase; padding:5px 11px; border-radius:999px; }
.hero-copy h1 { font-size:38px; font-weight:600; color:#FFFFFF; margin:0; line-height:1.12; letter-spacing:-0.6px; }
.hero-copy h1 em { color:#00DC82; font-style:normal; }
.hero-copy p { font-size:15px; color:rgba(255,255,255,0.55); margin:0; max-width:400px; line-height:1.55; }
.hero-actions { display:flex; gap:10px; margin-top:6px; }
.btn-ghost { background:transparent; color:#FFFFFF; border:1px solid rgba(255,255,255,0.16); border-radius:8px;
padding:9px 18px; font-weight:600; font-size:13px; }
.terminal { border-radius:12px; background:#0A0D2E; border:1px solid rgba(255,255,255,0.08);
box-shadow:0 24px 60px rgba(0,0,0,0.5); overflow:hidden; }
.term-bar { display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,0.06); }
.dot { width:9px; height:9px; border-radius:50%; }
.d1 { background:#ff5f57; } .d2 { background:#febc2e; } .d3 { background:#28c840; }
.term-title { margin-left:8px; font-size:11px; color:rgba(255,255,255,0.35); font-family:monospace; }
.term-body { padding:16px 18px 20px; font-family:'SFMono-Regular', Menlo, Consolas, monospace; font-size:12.5px; line-height:1.85; }
.term-body .prompt { color:#00DC82; }
.term-body .cmd { color:#FFFFFF; }
.term-body .out { color:rgba(255,255,255,0.4); padding-left:16px; display:block; }
.term-body .ok { color:#00DC82; }
.cursor { display:inline-block; width:6px; height:13px; background:#00DC82; vertical-align:middle; margin-left:2px; }
section.grid3 { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:34px 36px 0; }
.feat { background:#0A0D2E; border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:18px; display:flex; flex-direction:column; gap:8px; }
.feat .ic { width:30px; height:30px; border-radius:7px; background:rgba(0,220,130,0.14); color:#00DC82;
display:flex; align-items:center; justify-content:center; font-size:15px; }
.feat h3 { margin:0; font-size:14px; font-weight:600; color:#FFFFFF; }
.feat p { margin:0; font-size:12px; color:rgba(255,255,255,0.45); line-height:1.5; }
footer { position:relative; z-index:2; margin-top:26px; border-top:1px solid rgba(255,255,255,0.08); padding:14px 36px;
display:flex; justify-content:space-between; align-items:center; font-size:11.5px; color:rgba(255,255,255,0.35); }
footer .fmark { color:#00DC82; font-weight:700; }
</style>
<div class="glow g1"></div>
<div class="glow g2"></div>
<nav>
<div class="brand"><span class="mark">N</span>Nuxt</div>
<div class="navlinks"><span class="active">Docs</span><span>Guide</span><span>UI</span><span>Modules</span><span>Deploy</span></div>
<div class="navcta">
<div class="searchbox">Search docs <span class="kbd">⌘K</span></div>
<button class="btn-primary">Get started</button>
</div>
</nav>
<main>
<div class="hero-copy">
<span class="eyebrow">● v4 · Nuxt UI + Tailwind v4</span>
<h1>The Intuitive <em>Vue</em> Framework</h1>
<p>Build full-stack Vue applications with confidence — server rendering, file-based routing, and auto-imports, wired up out of the box.</p>
<div class="hero-actions">
<button class="btn-primary">Get started</button>
<button class="btn-ghost">View on GitHub</button>
</div>
</div>
<div class="terminal">
<div class="term-bar"><span class="dot d1"></span><span class="dot d2"></span><span class="dot d3"></span><span class="term-title">~/project</span></div>
<div class="term-body">
<span><span class="prompt">$</span> <span class="cmd">npx nuxi@latest init app</span></span>
<span class="out">✔ Project created</span>
<span><span class="prompt">$</span> <span class="cmd">npm run dev</span></span>
<span class="out"><span class="ok">✔</span> Nuxt 4.0 ready</span>
<span class="out">➜ Local: localhost:3000<span class="cursor"></span></span>
</div>
</div>
</main>
<section class="grid3">
<div class="feat"><span class="ic">▤</span><h3>File-based Routing</h3><p>Pages, layouts, and middleware generated automatically from your file structure.</p></div>
<div class="feat"><span class="ic">⇄</span><h3>Hybrid Rendering</h3><p>Mix SSR, SSG, and client-side rendering per route without extra config.</p></div>
<div class="feat"><span class="ic">◧</span><h3>Nuxt UI + Tailwind v4</h3><p>Accessible, themeable components built on the primary green token.</p></div>
</section>
<footer>
<span><span class="fmark">Nuxt</span> · Public Sans · Dark by default</span>
<span>Docs · GitHub · Discord</span>
</footer>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111827;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111827;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #111827; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #698796; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #f4b153; color: #111827;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #ffffff; color: #325d75;
border: 1px solid #2299dd; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111827;
border: 1px solid #d1d5db; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #698796; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0.6px; background: #325d75; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111827; box-sizing:border-box;
font-family:'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace; }
* { box-sizing:border-box; }
nav { height:56px; background:#1f2937; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.brand { color:#f4b153; font-size:16px; font-weight:700; margin:0; letter-spacing:0.5px; }
.navlinks { display:flex; gap:20px; font-family:Georgia, serif; }
.navlinks span { color:#e5e7eb; font-size:12px; }
.searchbox { background:#111827; border:1px solid #325d75; border-radius:2px; height:30px; padding:0 12px;
display:flex; align-items:center; font-size:11px; color:#698796; width:220px; }
main { display:flex; height:584px; }
.stage { width:310px; background:#1f2937; display:flex; align-items:center; justify-content:center; position:relative; }
.instrument { width:220px; height:150px; background:#0d1420; border:3px solid #325d75; border-radius:4px; position:relative; }
.screen { position:absolute; top:14px; left:14px; right:14px; height:60px; background:#08110a; border:1px solid #325d75; }
.needle { position:absolute; top:34px; left:24px; width:100px; height:2px; background:#f4b153; transform:rotate(-8deg); }
.knob { position:absolute; bottom:14px; width:22px; height:22px; border-radius:999px; background:#325d75; border:2px solid #698796; }
.k1 { left:20px; } .k2 { left:52px; } .k3 { left:84px; }
.info { flex:1; padding:26px 32px; display:flex; flex-direction:column; gap:10px; }
.breadcrumb { font-size:11px; color:#6b7280; }
h1 { font-size:19px; font-weight:700; margin:0; font-family:Georgia, serif; color:#111827; }
table.specs { width:100%; border-collapse:collapse; margin-top:4px; font-size:11px; }
table.specs td { border:1px solid #e5e7eb; padding:5px 9px; }
table.specs td.k { background:#f3f4f6; font-weight:700; width:170px; color:#325d75; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:6px; }
.price { font-size:22px; font-weight:700; color:#f4b153; }
.actions { display:flex; gap:10px; }
.btn-primary { background:#f4b153; color:#111827; border-radius:2px; height:42px; padding:0 22px; display:flex;
align-items:center; font-weight:700; font-size:12px; }
.btn-secondary { background:#fff; border:1px solid #d1d5db; color:#111827; border-radius:2px; height:42px;
padding:0 16px; display:flex; align-items:center; font-size:12px; }
.note { margin-top:auto; font-size:11px; color:#6b7280; border-top:1px solid #e5e7eb; padding-top:10px; }
</style></head>
<body>
<nav>
<p class="brand">B And K Precision</p>
<div class="navlinks"><span>Oscilloscopes</span><span>Power Supplies</span><span>Meters</span></div>
<div class="searchbox">model, part no., or spec…</div>
</nav>
<main>
<div class="stage">
<div class="instrument"><div class="screen"><div class="needle"></div></div><div class="knob k1"></div><div class="knob k2"></div><div class="knob k3"></div></div>
</div>
<div class="info">
<p class="breadcrumb">Power Supplies / Bench DC / Dual Output</p>
<h1>Model 9130 Triple-Output DC Power Supply</h1>
<table class="specs">
<tr><td class="k">Output</td><td>0-30V/3A x2, 0-5V/3A x1</td></tr>
<tr><td class="k">Regulation</td><td>±0.01% line, ±0.02% load</td></tr>
<tr><td class="k">Interface</td><td>USB, RS-232, GPIB optional</td></tr>
<tr><td class="k">Warranty</td><td>3-year standard</td></tr>
</table>
<div class="price-row"><span class="price">$895.00</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Download Manual</div>
</div>
<div class="note">Calibration certificate available on request at time of order.</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #454f5e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #003388; color: #ffffff;
border: none; border-radius: 12px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fafafa; color: #003388;
border: 1px solid #003388; border-radius: 12px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #222222;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #454f5e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #fd1949; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#fafafa;color:#3a3a3a;font-family:'Open Sans',Arial,sans-serif;}
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#003388;}
.logo{font-family:'Montserrat',sans-serif;font-weight:700;font-size:22px;color:#fff;}
.logo span{color:#221155;background:#fff;padding:1px 6px;border-radius:3px;margin-left:4px;}
.navlinks{display:flex;gap:18px;font-size:12px;font-weight:600;color:#cfe0ff;}
.hero{display:flex;padding:22px 28px;gap:26px;align-items:center;background:linear-gradient(120deg,#003388,#0274be);}
.hero-txt{width:360px;}
.hero-txt h1{font-family:'Montserrat',sans-serif;font-size:28px;font-weight:700;color:#fff;margin:0 0 10px;line-height:1.2;}
.hero-txt p{font-size:12px;color:#dce7fb;margin:0 0 14px;}
.cta{background:#fd1949;color:#fff;padding:11px 24px;border-radius:8px;font-weight:700;font-size:13px;display:inline-block;}
.pc{flex:1;height:190px;background:#0d0614;border-radius:10px;position:relative;overflow:hidden;}
.pc .tower{position:absolute;bottom:16px;left:70px;width:70px;height:150px;background:#221155;border-radius:6px;}
.pc .tower::after{content:'';position:absolute;top:20px;left:14px;right:14px;height:20px;background:#0274be;border-radius:4px;box-shadow:0 0 12px rgba(2,116,190,.8);}
.pc .glow{position:absolute;bottom:40px;left:84px;width:42px;height:42px;border-radius:50%;background:#fd1949;filter:blur(10px);opacity:.6;}
.strip{display:flex;gap:8px;padding:12px 28px 0;}
.chip{background:#efefef;border-radius:6px;padding:6px 14px;font-size:11px;font-weight:700;color:#222;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:14px 28px;}
.card{background:#fff;border-radius:6px;padding:10px;border:1px solid #e6e6e6;}
.box{height:82px;border-radius:6px;margin-bottom:8px;}
.b1{background:linear-gradient(160deg,#003388,#0274be);}
.b2{background:linear-gradient(160deg,#221155,#3a2a70);}
.b3{background:linear-gradient(160deg,#fd1949,#c8123a);}
.b4{background:linear-gradient(160deg,#05c2fc,#0274be);}
.name{font-size:12px;font-weight:700;color:#222;margin:0 0 3px;}
.spec{font-size:10px;color:#454f5e;margin:0 0 5px;}
.price{font-size:13px;font-weight:700;color:#003388;}
</style>
<div class="nav">
<div class="logo">Genki Buy<span>GB</span></div>
<div class="navlinks"><span>GPUs</span><span>Keyboards</span><span>Import PCs</span><span>Peripherals</span></div>
</div>
<div class="hero">
<div class="hero-txt">
<h1>Import gaming gear, direct from Japan</h1>
<p>High-performance PCs, mechanical keyboards, and rare peripherals for the enthusiast who reads spec sheets for fun.</p>
<a class="cta">Shop Import PCs</a>
</div>
<div class="pc"><div class="glow"></div><div class="tower"></div></div>
</div>
<div class="strip">
<div class="chip">RTX Builds</div><div class="chip">Mechanical Keyboards</div><div class="chip">Limited Edition</div><div class="chip">Clearance</div>
</div>
<div class="grid">
<div class="card"><div class="box b1"></div><div class="name">Genki Custom RTX 4070 Build</div><div class="spec">32GB RAM · 1TB NVMe</div><div class="price">$1,899.00</div></div>
<div class="card"><div class="box b2"></div><div class="name">Otaku Edition Mechanical Keyboard</div><div class="spec">Hot-Swap · RGB</div><div class="price">$149.00</div></div>
<div class="card"><div class="box b3"></div><div class="name">Limited Import GPU Backplate</div><div class="spec">Only 12 Left</div><div class="price">$89.00</div></div>
<div class="card"><div class="box b4"></div><div class="name">RGB Case Fan Bundle</div><div class="spec">3-Pack · Addressable</div><div class="price">$44.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #232323;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #232323;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #232323; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #003399; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #eeeeee; color: #232323;
border: 1px solid #003399; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #232323;
border: 1px solid #bbbbbb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #003399; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eeeeee; color:#232323; box-sizing:border-box;
font-family:'Arial', 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.serif { font-family:'Georgia', 'Times New Roman', serif; }
nav { flex:0 0 auto; height:64px; background:#003399; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 28px; }
.brand { font-size:18px; font-weight:700; margin:0; font-family:'Georgia', serif; }
.navlinks { display:flex; gap:6px; font-size:14px; font-weight:600; letter-spacing:0.3px; }
.navlinks span { padding:8px 14px; border-radius:4px; }
.navlinks .active { background:rgba(255,255,255,0.15); }
.cart { font-size:13px; font-weight:600; }
main { flex:1 1 auto; display:flex; flex-direction:column; padding:18px 28px; min-height:0; }
.hero { flex:0 0 auto; margin-bottom:16px; }
.hero h1 { font-size:26px; margin:0 0 6px; font-weight:700; max-width:520px; line-height:1.2; }
.hero p { font-size:14px; color:#555555; margin:0; max-width:480px; }
.grid { flex:1 1 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; min-height:0; }
.card { background:#ffffff; border:1px solid #dddddd; border-radius:12px; padding:12px; display:flex;
flex-direction:column; gap:6px; position:relative; }
.card .badge { position:absolute; top:10px; left:10px; background:#003399; color:#fff; font-size:10px;
font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:2px 7px; border-radius:4px; }
.cover { flex:1; border-radius:8px; min-height:0; }
.c1 { background:linear-gradient(160deg,#01426a,#24588d 130%); }
.c2 { background:linear-gradient(160deg,#d32f2f,#8a1414 130%); }
.c3 { background:linear-gradient(160deg,#232323,#555 130%); }
.c4 { background:linear-gradient(160deg,#003399,#01426a 130%); }
.card h3 { font-size:14px; font-weight:600; margin:2px 0 0; font-family:'Arial', sans-serif; }
.card .author { font-size:12px; color:#555555; margin:0; }
.card .price { font-size:14px; font-weight:700; margin:2px 0 0; }
footer { flex:0 0 auto; background:#003399; color:#ffffff; height:52px; display:flex; align-items:center;
justify-content:space-between; padding:0 28px; font-size:12px; }
footer .links { display:flex; gap:16px; opacity:0.85; }
</style></head>
<body>
<nav>
<p class="brand">Annabelle S Book Club LA</p>
<div class="navlinks"><span class="active">New Arrivals</span><span>Fiction</span><span>Staff Picks</span><span>Events</span></div>
<div class="cart">Cart (0)</div>
</nav>
<main>
<div class="hero">
<h1 class="serif">A living room for readers in Los Angeles</h1>
<p>Hand-picked fiction, staff notes, and a shelf that changes with the season.</p>
</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="cover c1"></div>
<h3>The Long Water</h3><p class="author">Nadia Farrow</p><p class="price">$24.00</p></div>
<div class="card"><div class="cover c2"></div>
<h3>Salt & Company</h3><p class="author">Iris Weller</p><p class="price">$18.50</p></div>
<div class="card"><span class="badge">New</span><div class="cover c3"></div>
<h3>Nine Winters</h3><p class="author">Tomas Reyes</p><p class="price">$21.00</p></div>
<div class="card"><div class="cover c4"></div>
<h3>Blue Hour Diner</h3><p class="author">Marguerite Cole</p><p class="price">$16.75</p></div>
</div>
</main>
<footer>
<span>© Annabelle S Book Club LA</span>
<div class="links"><span>Shipping</span><span>Returns</span><span>Contact</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f2f2f2; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f2f2f2; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #00303c; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #f2f2f2; color: #1a1a1a;
border: 1px solid #00303c; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fefefe; color: #1a1a1a;
border: 1px solid #dedede; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #a45cec; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f2f2f2; font-family:'montserrat','AvenirRegular',sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:64px;background:#00303c;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-family:'din-2014','montserrat',sans-serif;font-size:20px;font-weight:600;}
.navlinks{display:flex;gap:22px;color:#fff;font-size:15px;font-weight:500;}
.search{background:#fefefe;border-radius:9999px;height:36px;width:150px;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#888;}
.hero{height:220px;background:#d1e2ef;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.hero h1{font-family:'din-2014','montserrat',sans-serif;font-size:32px;font-weight:700;line-height:1.15;max-width:380px;}
.hero span{display:block;background:#00303c;color:#fff;font-size:15px;font-weight:600;padding:13px 26px;border-radius:9999px;width:fit-content;margin-top:16px;}
.hero .bottle{width:150px;height:150px;border-radius:9999px;background:radial-gradient(circle at 40% 35%,#fffee1,#00aad5 90%);}
.grid{display:flex;gap:16px;padding:20px 40px 0;}
.card{width:210px;background:#fefefe;border-radius:12px;padding:16px;}
.thumb{height:110px;background:#f7f9fa;border-radius:8px;margin-bottom:10px;}
.pname{font-family:'din-2014','montserrat',sans-serif;font-size:16px;font-weight:500;}
.pprice{font-size:16px;color:#444;margin-top:6px;}
.badge{background:#a45cec;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;border-radius:9999px;display:inline-block;margin-bottom:8px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:48px;background:#00303c;color:#d1e2ef;display:flex;align-items:center;justify-content:center;gap:26px;font-size:13px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Prequel</div>
<div class="navlinks"><span>Skincare</span><span>Ingredients</span><span>Quiz</span></div>
<div class="search">Search...</div>
</div>
<div class="hero"><div><h1>Dermatologist-developed. Made for you.</h1><span>Take the Quiz</span></div><div class="bottle"></div></div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb"></div><div class="pname">Retinol Renewal Serum</div><div class="pprice">$48.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Gentle Cleanser Duo</div><div class="pprice">$32.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Overnight Barrier Cream</div><div class="pprice">$38.00</div></div>
</div>
<div class="footer"><span>Ingredients</span><span>Reviews</span><span>Consult a Dermatologist</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #FF6900; color: #FFFFFF;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #FFFFFF; color: #313131;
border: 1px solid #FF6900; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #FFFFFF; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 1.2px; background: #C62828; color: #FFFFFF;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#4A4A4A; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; border-bottom:1px solid #EBEBEB; }
.brand { color:#313131; font-size:20px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:12px; color:#313131; font-weight:600; }
.navlinks .tag { background:#FF6900; color:#fff; padding:6px 14px; border-radius:999px; font-size:11px; font-weight:700; }
.hero { height:250px; position:relative; background:linear-gradient(120deg,#313131 0%, #4A4A4A 55%, #717171 100%); display:flex; align-items:center; padding:0 40px; overflow:hidden; }
.heroshape { position:absolute; right:60px; top:30px; width:190px; height:190px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #FF6900, #E55E00 70%); }
.heroshape::after { content:''; position:absolute; left:50%; top:-20px; width:8px; height:230px; background:#313131; transform:rotate(24deg); border-radius:4px; }
.heroTxt { position:relative; z-index:2; max-width:400px; }
.heroTxt h1 { color:#fff; font-size:32px; font-weight:700; margin:0 0 12px; line-height:1.2; }
.heroTxt p { color:#EBEBEB; font-size:13px; margin:0 0 18px; }
.heroTxt .cta { display:inline-block; background:#FF6900; color:#fff; font-weight:700; font-size:13px; padding:12px 26px; border-radius:4px; }
.section-label { padding:18px 36px 10px; font-size:14px; font-weight:700; color:#313131; }
.grid { display:flex; gap:14px; padding:0 36px; }
.card { flex:1; background:#ffffff; border-radius:8px; padding:12px; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.card .art { height:96px; border-radius:8px; margin-bottom:10px; position:relative; }
.a1 { background:linear-gradient(160deg,#FF6900,#E55E00); }
.a2 { background:linear-gradient(160deg,#9B9B9B,#4A4A4A); }
.a3 { background:linear-gradient(160deg,#FFB980,#FF6900); }
.a4 { background:linear-gradient(160deg,#313131,#1A1A1A); }
.card .tag { position:absolute; top:16px; left:16px; background:#313131; color:#fff; font-size:8px; font-weight:700; padding:3px 8px; border-radius:999px; }
.card h3 { font-size:12px; font-weight:700; color:#313131; margin:0 0 4px; }
.card p { font-size:10px; color:#717171; margin:0 0 8px; }
.card .price { font-size:14px; font-weight:700; color:#313131; }
.card .stars { color:#FF6900; font-size:10px; margin-top:4px; }
footer { height:70px; margin-top:14px; background:#1a1a1a; display:flex; align-items:center; gap:26px; padding:0 36px; }
footer span { color:#EBEBEB; font-size:10px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Fiskars</p>
<div class="navlinks"><span>Scissors</span><span>Garden</span><span>Kitchen</span><span>Crafting</span><span class="tag">Best Sellers</span></div>
</nav>
<div class="hero">
<div class="heroshape"></div>
<div class="heroTxt">
<h1>Since 1649,<br>orange has meant sharp.</h1>
<p>Ergonomic tools for the kitchen counter, the garden soil, and everything in between.</p>
<span class="cta">Shop Best Sellers</span>
</div>
</div>
<div class="section-label">Reach for These First</div>
<div class="grid">
<div class="card"><div class="art a1"></div><h3>Classic Orange-Handled Scissors</h3><p>Softgrip · All-Purpose</p><div class="price">$14.99</div><div class="stars">★★★★★</div></div>
<div class="card"><div class="art a2"><span class="tag">NEW</span></div><h3>Bypass Pruning Shears</h3><p>Precision Ground Blade</p><div class="price">$29.99</div></div>
<div class="card"><div class="art a3"></div><h3>Chef's Knife, 8"</h3><p>Kitchen Essentials</p><div class="price">$34.99</div><div class="stars">★★★★★</div></div>
<div class="card"><div class="art a4"></div><h3>Splitting Axe X25</h3><p>Forestry Series</p><div class="price">$79.99</div></div>
</div>
<footer>
<span>WARRANTY REGISTRATION</span><span>SHARPENING GUIDE</span><span>FIND A RETAILER</span><span>OUR HERITAGE</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f4; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f4; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #4e5154; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.25px; background: #e54601; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.25px; background: #f4f4f4; color: #1a1a1a;
border: 1px solid #e54601; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f4f4f4; color: #1a1a1a;
border: 1px solid #bebebe; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4e5154; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e54601; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f4f4; color:#1a1a1a; box-sizing:border-box;
font-family:'Effra', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#1a1a1a; color:#fff; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; }
.brand { font-weight:700; font-size:17px; }
.navlinks { display:flex; gap:6px; }
.navlinks span { font-size:14px; font-weight:500; text-transform:uppercase; letter-spacing:0.25px; padding:8px 12px; }
.navlinks span.on { color:#e54601; }
.search { width:160px; height:32px; border-radius:9999px; background:#f4f4f4; color:#1a1a1a; font-size:11px;
display:flex; align-items:center; padding:0 14px; }
.hero { height:180px; background:#1a1a1a; color:#fff; display:flex; flex-direction:column; justify-content:center;
padding:0 32px; }
.hero h1 { font-size:36px; font-weight:700; letter-spacing:-0.5px; margin:0 0 8px; }
.hero p { font-size:15px; color:#c9c9c9; margin:0 0 14px; max-width:420px; }
.btn { display:inline-block; width:fit-content; background:#e54601; color:#fff; font-size:15px; font-weight:600;
padding:12px 24px; border-radius:8px; }
.chips { display:flex; gap:8px; padding:14px 32px; }
.chip { background:#fff; border:1px solid #d3d3d3; font-size:13px; font-weight:600; padding:6px 16px; border-radius:9999px; }
.chip.on { background:#1a1a1a; color:#fff; border-color:#1a1a1a; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:0 32px; }
.card { background:#fff; border-radius:4px; padding:8px; }
.cover { height:120px; border-radius:4px; margin-bottom:8px; position:relative; }
.badge { position:absolute; top:6px; left:6px; background:#e54601; color:#fff; font-size:9px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.t { font-size:14px; font-weight:500; margin:0 0 2px; }
.p { font-size:12px; color:#4e5154; }
.mono { font-family:'CommitMono','Source Code Pro',monospace; font-size:11px; color:#4e5154; }
footer { position:absolute; bottom:0; left:0; right:0; height:44px; background:#1a1a1a; color:#595959;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
</style></head>
<body>
<nav>
<div class="brand">Evolv</div>
<div class="navlinks"><span class="on">Climbing Shoes</span><span>Harnesses</span><span>Chalk</span><span>Apparel</span></div>
<div class="search">Search…</div>
</nav>
<div class="hero">
<h1>Built on the wall, tested on the rock</h1>
<p>Precision engineering meets chalk dust — climbing gear for those who read the spec sheet.</p>
<span class="btn">Shop Shoes</span>
</div>
<div class="chips"><span class="chip on">Men's</span><span class="chip">Women's</span><span class="chip">Shoes</span><span class="chip">Harnesses</span></div>
<div class="grid">
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#e54601,#cb2f12);"><span class="badge">New</span></div>
<p class="t">Defy LV</p><p class="p">$165.00</p><p class="mono">edge: 4.2mm</p></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#4e5154,#2a2b2d);"></div>
<p class="t">Shaman</p><p class="p">$189.00</p><p class="mono">arch: aggressive</p></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#af5bd7,#7c3fa3);"></div>
<p class="t">Kira</p><p class="p">$145.00</p><p class="mono">fit: neutral</p></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#1f495b,#31738f);"></div>
<p class="t">Talon Harness</p><p class="p">$89.00</p><p class="mono">weight: 320g</p></div>
</div>
<footer><span>© Evolv — Climbing gear, engineered</span><span>Size Guide · Warranty · Support</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #272727; color: #ebebeb;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #272727; color: #ebebeb;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #ebebeb; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #bfbfbf; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 1px; background: #bd2426; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 1px; background: transparent; color: #ebebeb;
border: 1px solid #595959; border-radius: 4px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #404040; color: #ebebeb;
border: 1px solid #595959; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #bfbfbf; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #3c2727; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#272727; color:#e5e5e5; font-family:Arial,'Helvetica Neue',Roboto,-apple-system,sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#163959;}
.logo{font-size:19px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0.5px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:700;text-transform:uppercase;color:#d8e4ee;}
.hero{height:236px;position:relative;display:flex;align-items:center;padding:0 36px;overflow:hidden;}
.hbg{position:absolute;inset:0;background:linear-gradient(135deg,#404040 0%,#1a1a1a 70%);}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,0.6);}
.htext{position:relative;z-index:2;width:440px;}
.htext h1{font-size:27px;font-weight:700;color:#fff;line-height:1.3;margin:0 0 12px;}
.htext p{font-size:13px;color:#bdbdbd;margin:0 0 18px;max-width:380px;line-height:1.5;}
.btn{display:inline-block;background:#bd2426;color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;padding:12px 26px;border-radius:4px;}
.figure{position:absolute;right:80px;top:20px;width:100px;height:190px;z-index:1;}
.coat{position:absolute;left:6px;top:36px;width:80px;height:110px;background:linear-gradient(180deg,#5a4a3a,#2a2018);border-radius:6px;}
.fhead{position:absolute;left:32px;top:0;width:38px;height:38px;border-radius:50%;background:#9bca3e;}
.flegs{position:absolute;left:20px;top:140px;width:62px;height:44px;background:#1a1a1a;border-radius:0 0 6px 6px;}
.sec{padding:16px 36px 0;}
.sectitle{font-size:15px;font-weight:700;text-transform:uppercase;margin-bottom:14px;color:#fff;}
.grid{display:flex;gap:14px;}
.card{width:158px;border:1px solid #4a4a4a;border-radius:4px;padding:10px;background:#333333;position:relative;}
.badge{position:absolute;top:6px;left:6px;color:#1a1a1a;font-size:8px;font-weight:700;text-transform:uppercase;padding:3px 6px;border-radius:2px;}
.b-stock{background:#9bca3e;}
.b-pre{background:#f68b1f;}
.b-back{background:#bada7a;}
.thumb{height:96px;border-radius:2px;margin-bottom:8px;}
.ptitle{font-size:11px;font-weight:600;line-height:1.3;height:28px;overflow:hidden;color:#e5e5e5;}
.pprice{font-size:12px;font-weight:700;color:#bd2426;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;background:#163959;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:10px;color:#d8e4ee;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mezco Toyz Action F 2 Action Figures</div>
<div class="navlinks"><span>Series 2</span><span>Accessories</span><span>Archive</span></div>
</div>
<div class="hero">
<div class="hbg"></div>
<div class="scrim"></div>
<div class="htext">
<h1>A precision archive, not a toy shop.</h1>
<p>Hand-stitched fabric coats and die-cast metal hardware in a series built for the display case.</p>
<div class="btn">Shop Series 2</div>
</div>
<div class="figure">
<div class="fhead"></div>
<div class="coat"></div>
<div class="flegs"></div>
</div>
</div>
<div class="sec">
<div class="sectitle">Series 2 Availability</div>
<div class="grid">
<div class="card"><span class="badge b-stock">In Stock</span><div class="thumb" style="background:linear-gradient(135deg,#9bca3e,#1a1a1a);"></div><div class="ptitle">Action Figure 2 — Field Coat</div><div class="pprice">$95.00</div></div>
<div class="card"><span class="badge b-pre">Pre-Order</span><div class="thumb" style="background:linear-gradient(135deg,#f68b1f,#1a1a1a);"></div><div class="ptitle">Action Figure 2 — Night Variant</div><div class="pprice">$95.00</div></div>
<div class="card"><span class="badge b-back">Back-Order</span><div class="thumb" style="background:linear-gradient(135deg,#bada7a,#1a1a1a);"></div><div class="ptitle">Die-Cast Accessory Pack</div><div class="pprice">$35.00</div></div>
<div class="card"><span class="badge b-stock">In Stock</span><div class="thumb" style="background:linear-gradient(135deg,#1a1a1a,#9bca3e);"></div><div class="ptitle">Display Base, Numbered</div><div class="pprice">$25.00</div></div>
</div>
</div>
<div class="footer"><span>© Precision Collector's Archive</span><span>Availability Guide · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #01060e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #01060e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #01060e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #015afd; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #01060e;
border: 1px solid #015afd; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #141414;
border: 1px solid #c0c1c3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #015afd; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#141414; font-family:'trade-gothic-next', Arial, sans-serif; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#01060e;}
.logo{font-size:20px;font-weight:700;color:#fff;letter-spacing:-0.5px;}
.navlinks{display:flex;gap:6px;font-size:14px;font-weight:500;letter-spacing:0.25px;}
.navlinks span{color:#c2c2c2;padding:8px 16px;}
.navlinks span.active{color:#fff;border-bottom:2px solid #015afd;}
.hero{height:250px;display:flex;background:#01060e;color:#fff;}
.herotext{width:48%;padding:0 32px;display:flex;flex-direction:column;justify-content:center;}
.herotext h1{font-family:'trade-gothic-next-compressed',Arial,sans-serif;font-size:42px;font-weight:700;letter-spacing:-1px;margin:0 0 12px;line-height:1.1;}
.herotext p{font-size:15px;color:#c2c2c2;margin:0 0 18px;max-width:320px;}
.herocta{width:fit-content;background:#015afd;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:14px 28px;border-radius:4px;}
.heroimg{width:52%;position:relative;overflow:hidden;}
.mixer{position:absolute;right:60px;top:50px;width:220px;height:150px;background:#141414;border-radius:6px;border:1px solid #333;}
.fader{position:absolute;width:8px;height:70px;background:#333;border-radius:4px;}
.fadercap{position:absolute;width:20px;height:12px;background:#015afd;border-radius:2px;}
.spectable{margin:14px 32px 0;display:flex;gap:1px;background:#e4e4e5;}
.speccell{flex:1;background:#fff;padding:10px;text-align:center;}
.speclabel{font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:#555;}
.specval{font-size:15px;color:#01060e;margin-top:2px;font-weight:600;}
.grid{display:flex;gap:16px;padding:16px 32px 0;}
.card{width:216px;background:#fff;border:1px solid #e4e4e5;border-radius:8px;padding:14px;}
.thumb{height:96px;border-radius:8px;margin-bottom:10px;background:#eeeeee;}
.ptitle{font-size:16px;font-weight:600;color:#01060e;}
.pprice{font-size:14px;color:#141414;margin-top:4px;}
.badge{display:inline-block;background:#015afd;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#c2c2c2;background:#01060e;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Rane</div>
<div class="navlinks"><span class="active">Mixers</span><span>Controllers</span><span>Accessories</span><span>Support</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Cut clean under strobes.</h1>
<p>Professional DJ mixers engineered for the booth, not the bedroom — every control legible at a glance.</p>
<div class="herocta">Shop Mixers</div>
</div>
<div class="heroimg">
<div class="mixer">
<div class="fader" style="left:40px;top:30px;"></div><div class="fadercap" style="left:34px;top:40px;"></div>
<div class="fader" style="left:100px;top:30px;"></div><div class="fadercap" style="left:94px;top:75px;"></div>
<div class="fader" style="left:160px;top:30px;"></div><div class="fadercap" style="left:154px;top:60px;"></div>
</div>
</div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Channels</div><div class="specval">4</div></div>
<div class="speccell"><div class="speclabel">Crossfader</div><div class="specval">Contactless</div></div>
<div class="speccell"><div class="speclabel">Inputs</div><div class="specval">USB / XLR</div></div>
<div class="speccell"><div class="speclabel">FX Sends</div><div class="specval">3</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ptitle">SEVENTY TWO Mixer</div><div class="pprice">$1,899.00</div><div class="badge">In Stock</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">FOUR SIXTY Controller</div><div class="pprice">$999.00</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">ONE Turntable</div><div class="pprice">$799.00</div></div>
</div>
<div class="footer"><span>© Precision Audio Hardware</span><span>Firmware Manuals Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #020202;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #020202;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #020202; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #020202; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #020202;
border: 1px solid #020202; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #020202;
border: 1px solid #c0c0c0; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #020202; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,Helvetica,Verdana,sans-serif; color:#020202; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-family:'Avenir Next LT W02 Bold',Arial,sans-serif;font-size:20px;font-weight:700;letter-spacing:-.5px;}
.navlinks{display:flex;gap:22px;font-family:'Avenir Next LT W02 Bold',Arial,sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.hero{height:280px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;}
.hero h1{font-family:'Avenir Next LT W02 Bold',Arial,sans-serif;font-size:36px;font-weight:700;letter-spacing:-.5px;margin:0 0 14px;}
.hero p{font-size:15px;color:#333333;margin:0 0 18px;}
.btn{background:#020202;color:#fff;font-family:'Avenir Next LT W02 Bold',Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:12px 26px;}
.grid{display:flex;gap:14px;padding:18px 30px 0;}
.card{width:210px;border:1px solid #e5e5e5;}
.thumb{height:120px;background:#f5f5f5;}
.cbody{padding:10px 12px;}
.ctitle{font-family:'AvenirNextLTW02-Medium',Arial,sans-serif;font-size:16px;font-weight:500;margin:0;}
.cprice{font-size:16px;margin-top:6px;}
.badge{position:absolute;top:8px;left:8px;background:#020202;color:#fff;font-family:'Avenir Next LT W02 Bold',Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;}
.cardwrap{position:relative;width:210px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:96px;background:#020202;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:14px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Patagonia</div>
<div class="navlinks"><div>Men's</div><div>Women's</div><div>Kids</div><div>Provisions</div></div>
</div>
<div class="hero">
<h1>Built to last. Made to be worn out.</h1>
<p>Gear for the mountains, rivers, and everywhere in between.</p>
<div class="btn">Shop All</div>
</div>
<div class="grid">
<div class="cardwrap"><div class="badge">New</div><div class="card"><div class="thumb"></div><div class="cbody"><div class="ctitle">Better Sweater Fleece</div><div class="cprice">$139</div></div></div></div>
<div class="cardwrap"><div class="card"><div class="thumb" style="background:#e5e5e5;"></div><div class="cbody"><div class="ctitle">Torrentshell 3L Jacket</div><div class="cprice">$179</div></div></div></div>
<div class="cardwrap"><div class="card"><div class="thumb" style="background:#cccccc;"></div><div class="cbody"><div class="ctitle">Down Sweater Vest</div><div class="cprice">$149</div></div></div></div>
<div class="cardwrap"><div class="card"><div class="thumb" style="background:#999999;"></div><div class="cbody"><div class="ctitle">Baggies Shorts, 5"</div><div class="cprice">$65</div></div></div></div>
</div>
<div class="footer"><span>© Patagonia</span><span>Repairs Worn Wear Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: 0px; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; margin: 0; color: #868e96; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.0; letter-spacing: 0px; background: #6741d9; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.0; letter-spacing: 0px; background: #ffffff; color: #1e1e1e;
border: 1px solid #ced4da; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; background: #ffffff; color: #1e1e1e;
border: 1px solid #e9ecef; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #868e96; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0px; background: #e5dbff; color: #5f3dc4;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1e1e1e; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.hand { font-family:"Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; }
.topbar { position:absolute; top:14px; left:50%; transform:translateX(-50%);
display:flex; gap:6px; background:#ffffff; border:1px solid #e9ecef; border-radius:8px;
padding:6px; box-shadow:0 2px 8px rgba(0,0,0,.08); z-index:2; }
.tool { width:34px; height:34px; border-radius:6px; display:flex; align-items:center;
justify-content:center; font-size:15px; color:#1e1e1e; }
.tool.active { background:#e0dcff; color:#6741d9; }
.leftpanel { position:absolute; top:70px; left:14px; width:150px; background:#fff;
border:1px solid #e9ecef; border-radius:8px; padding:12px; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.leftpanel .lbl { font-size:10px; color:#868e96; text-transform:uppercase; letter-spacing:.05em; margin:8px 0 5px; }
.swrow { display:flex; gap:5px; margin-bottom:4px; }
.sw { width:20px; height:20px; border-radius:4px; border:1px solid rgba(0,0,0,.1); }
.canvas { position:absolute; inset:0; }
.rough-rect { position:absolute; border:2.5px solid #6741d9; border-radius:2px;
transform:rotate(-0.6deg); background:rgba(103,65,217,0.05); }
.rough-rect::before { content:''; position:absolute; inset:-2px; border:2.5px solid #6741d9;
border-radius:3px; transform:rotate(0.9deg); opacity:.35; }
.rough-ellipse { position:absolute; border:2.5px solid #1e1e1e; border-radius:50%; transform:rotate(1deg); }
.arrow-line { position:absolute; height:2.5px; background:#1e1e1e; transform-origin:left center; }
.arrow-line::after { content:''; position:absolute; right:-2px; top:-5px; border:6px solid transparent;
border-left-color:#1e1e1e; }
.label { position:absolute; font-size:17px; color:#1e1e1e; transform:rotate(-0.4deg); }
.label.purple { color:#6741d9; font-weight:600; }
.rightpanel { position:absolute; top:70px; right:14px; width:170px; background:#fff;
border:1px solid #e9ecef; border-radius:8px; padding:12px; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.rightpanel .lbl { font-size:10px; color:#868e96; text-transform:uppercase; letter-spacing:.05em; margin:0 0 6px; }
.strokewrap { display:flex; gap:5px; margin-bottom:12px; }
.stroke-sw { width:18px; height:18px; border-radius:50%; }
.btn-share { background:#6741d9; color:#fff; border-radius:6px; padding:8px 0; text-align:center;
font-size:12px; font-weight:700; margin-top:6px; }
.brandbadge { position:absolute; bottom:14px; left:14px; background:#fff; border:1px solid #e9ecef;
border-radius:8px; padding:8px 14px; font-size:13px; font-weight:600; box-shadow:0 2px 8px rgba(0,0,0,.08); }
</style></head>
<body>
<div class="topbar">
<div class="tool">✎</div>
<div class="tool active">□</div>
<div class="tool">◯</div>
<div class="tool">→</div>
<div class="tool hand">Aa</div>
<div class="tool">🖉</div>
</div>
<div class="canvas">
<div class="rough-rect" style="left:220px; top:150px; width:220px; height:130px;"></div>
<div class="rough-ellipse" style="left:520px; top:130px; width:150px; height:150px;"></div>
<div class="arrow-line" style="left:445px; top:210px; width:80px;"></div>
<div class="label" style="left:265px; top:200px;">Idea</div>
<div class="label purple hand" style="left:555px; top:195px;">Excalidraw!</div>
<div class="rough-rect" style="left:300px; top:380px; width:260px; height:110px; transform:rotate(0.8deg);"></div>
<div class="label" style="left:355px; top:425px;">Sketch it out</div>
</div>
<div class="leftpanel">
<div class="lbl">Stroke</div>
<div class="swrow"><div class="sw" style="background:#1e1e1e"></div><div class="sw" style="background:#e03131"></div>
<div class="sw" style="background:#2f9e44"></div><div class="sw" style="background:#1971c2"></div></div>
<div class="lbl">Background</div>
<div class="swrow"><div class="sw" style="background:#ffc9c9"></div><div class="sw" style="background:#b2f2bb"></div>
<div class="sw" style="background:#a5d8ff"></div><div class="sw" style="background:#eebefa"></div></div>
<div class="lbl">Fill</div>
<div class="swrow"><div class="sw" style="background:repeating-linear-gradient(45deg,#ddd,#ddd 2px,#fff 2px,#fff 5px)"></div>
<div class="sw" style="background:#666"></div><div class="sw" style="background:#fff;border-color:#999"></div></div>
</div>
<div class="rightpanel">
<div class="lbl">Selected shape</div>
<div class="strokewrap">
<div class="stroke-sw" style="background:#6741d9"></div>
<div class="stroke-sw" style="background:#e0dcff;border:2px solid #6741d9"></div>
</div>
<div class="lbl">Layers</div>
<div style="font-size:12px;color:#495057;margin-bottom:2px">Bring to front</div>
<div style="font-size:12px;color:#495057;margin-bottom:2px">Send to back</div>
<div class="btn-share">Share</div>
</div>
<div class="brandbadge hand">Excalidraw</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0f0f0; color: #00008f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0f0f0; color: #00008f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #00008f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #d12328; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #f0f0f0; color: #00008f;
border: 1px solid #d12328; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f0f0f0; color: #212121;
border: 1px solid #b4b4d8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c12020; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f0f0f0; font-family:'Archivo','Libre Franklin',Arial,sans-serif; color:#212121; }
*{box-sizing:border-box;}
.nav{height:56px;background:#00008f;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;}
.navlinks{display:flex;gap:0;}
.navlinks div{color:#fff;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;padding:0 16px;}
.hero{padding:22px 32px 0;display:flex;justify-content:space-between;align-items:flex-start;}
.hero h1{font-size:26px;font-weight:700;margin:0 0 8px;max-width:440px;}
.hero p{font-family:Baskerville,'Times New Roman',serif;font-size:16px;color:#212121;margin:0 0 14px;max-width:440px;line-height:1.5;}
.btn{display:inline-block;background:#d12328;color:#fff;font-size:15px;font-weight:600;letter-spacing:0.3px;padding:12px 24px;}
.newyellow{background:#09093a;color:#e4e4e4;width:220px;padding:14px;font-family:Baskerville,serif;font-size:13px;}
.newyellow b{color:#ffff00;}
.sec{padding:20px 32px 0;}
.sectitle{font-size:20px;font-weight:600;margin-bottom:12px;}
.grid{display:flex;gap:16px;}
.card{width:196px;background:#fff;padding:14px;}
.cover{aspect-ratio:1/1;background:#f0f0f0;margin-bottom:10px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#c12020;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;}
.badge.stock{background:#00964d;}
.ptitle{font-size:16px;font-weight:500;}
.author{font-family:Baskerville,serif;font-size:14px;color:#444;margin:4px 0;}
.pprice{font-size:18px;font-weight:500;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#09093a;color:#e4e4e4;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kitchen Arts And Letters</div>
<div class="navlinks"><div>Cookbooks</div><div>Rare & Out-of-Print</div><div>Wine</div><div>Events</div></div>
</div>
<div class="hero">
<div>
<h1>A specialty bookstore since 1983.</h1>
<p>Rare and out-of-print culinary titles, curated by people who have read every one of them.</p>
<div class="btn">Browse Rare Books</div>
</div>
<div class="newyellow">Just In: first-edition <b>Larousse Gastronomique</b>, 1938 printing.</div>
</div>
<div class="sec">
<div class="sectitle">Staff Picks</div>
<div class="grid">
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#00008f,#d12328)"><div class="badge">Sale</div></div><div class="ptitle">The Cured Larder</div><div class="author">M. Alden</div><div class="pprice">$42.00</div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#212121,#00008f)"><div class="badge stock">In Stock</div></div><div class="ptitle">Bread of the Coast</div><div class="author">J. Fennimore</div><div class="pprice">$38.00</div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#d12328,#212121)"></div><div class="ptitle">Salt, Smoke, Time</div><div class="author">R. Okafor</div><div class="pprice">$55.00</div></div>
</div>
</div>
<div class="footer"><span>75 W 68th St, New York, NY</span><span>Newsletter · Gift Cards</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7a8aba; color: #21242e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7a8aba; color: #21242e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.3; margin: 0; color: #21242e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.1; letter-spacing: 0.5px; background: #ecab37; color: #21242e;
border: none; border-radius: 2px; padding: {spacing.md};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.1; letter-spacing: 0.5px; background: #21242e; color: #ffffff;
border: 1px solid #e60012; border-radius: 0px;
padding: {spacing.md}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; background: #ffffff; color: #21242e;
border: 1px solid #647097; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 400; line-height: 1.3; background: #ecab37; color: #21242e;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#7a8aba; color:#21242e; box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
/* Y2K 콘솔 크롬: 브러시드 페리윙클 바디 + 카본 하프톤 도트 네비 + 베벨 금속 패널.
모든 패널은 "게임기 페이스플레이트"처럼 라이트/다크 이중 보더로 입체를 낸다. */
.navbar { height:44px; background:#21242e; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; background-image:radial-gradient(#3d4f97 1px,transparent 1.3px); background-size:6px 6px;
background-color:#21242e; }
.navbar .brand { color:#e60012; font-family:Arial Black,Arial,sans-serif; font-weight:900; font-size:16px;
letter-spacing:-0.5px; text-shadow:1px 1px 0 #000; }
.navlinks { display:flex; gap:18px; }
.navlinks span { color:#e48600; font-size:11px; font-weight:700; letter-spacing:0.03em; text-shadow:0 1px 0 rgba(0,0,0,0.4); }
.navlinks span.on { color:#ecab37; text-decoration:underline; }
.subnav { height:26px; background:#9fbee7; border-top:1px solid #c0d5e6; border-bottom:1px solid #3d4f97;
display:flex; align-items:center; gap:16px; padding:0 24px; font-size:10px; font-weight:700; color:#3d4f97; }
.hero { height:220px; position:relative; overflow:hidden;
background:linear-gradient(160deg,#acace7,#8ba1d4 60%,#7a8aba); }
.grid { position:absolute; inset:0; background-image:linear-gradient(#00000012 1px,transparent 1px),linear-gradient(90deg,#00000012 1px,transparent 1px);
background-size:20px 20px; }
.herotext { position:relative; z-index:2; padding:36px 40px 0; }
.herotext h1 { font-family:Arial Black,Arial,sans-serif; font-size:46px; font-weight:900; margin:0; letter-spacing:-1px;
color:#ffffff; -webkit-text-stroke:2px #21242e; text-shadow:3px 3px 0 #3d4f97; }
.herotext p { font-size:14px; font-weight:700; color:#21242e; margin-top:10px; max-width:400px; text-shadow:0 1px 0 rgba(255,255,255,0.4); }
.btn { position:relative; z-index:2; margin:16px 0 0 40px; background:linear-gradient(180deg,#f68d1f,#e48600);
color:#fff; border:2px solid #21242e; border-radius:4px; padding:9px 22px; font-weight:900; font-size:12px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 2px 2px 0 #21242e; }
/* 베벨 금속 패널 3장 — 라이트/다크 보더 페어로 "판금" 느낌 */
.panels { display:flex; gap:14px; padding:22px 40px 30px; }
.panel { flex:1; background:#dedede; border-top:2px solid #ffffff; border-left:2px solid #ffffff;
border-right:2px solid #3d4f97; border-bottom:2px solid #3d4f97; border-radius:3px; padding:14px; }
.panel .k { display:inline-block; background:#21242e; color:#ecab37; font-size:10px; font-weight:700;
padding:2px 8px; border-radius:2px; margin-bottom:8px; }
.panel h4 { font-family:Arial Black,Arial,sans-serif; font-size:16px; margin:0 0 4px; color:#21242e; }
.panel p { font-size:11px; color:#3d4f97; margin:0; font-weight:700; line-height:1.4; }
footer { height:34px; background:#21242e; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; font-size:10px; color:#e48600; font-weight:700; }
</style></head>
<body>
<div class="navbar">
<span class="brand">Nintendo.com (2001)</span>
<div class="navlinks"><span class="on">HOME</span><span>GAMES</span><span>SYSTEMS</span><span>DOWNLOADS</span></div>
</div>
<div class="subnav"><span>◆ WHAT'S NEW</span><span>◆ FUN STUFF</span><span>◆ CLUB NINTENDO</span></div>
<div class="hero">
<div class="grid"></div>
<div class="herotext">
<h1>PLAY IT ON</h1>
<p>The newest games, systems, and characters — straight from Nintendo.</p>
</div>
<button class="btn">ENTER »</button>
</div>
<div class="panels">
<div class="panel"><span class="k">SYSTEMS</span><h4>GameCube</h4><p>The little purple box with a big library.</p></div>
<div class="panel"><span class="k">GAMES</span><h4>F-Zero GX</h4><p>Racing at 1000 km/h — buckle up.</p></div>
<div class="panel"><span class="k">DOWNLOADS</span><h4>NES Classics</h4><p>Play the originals right in your browser.</p></div>
</div>
<footer>
<span>© Nintendo.com (2001)</span>
<span>GAMES · SYSTEMS · SUPPORT · LEGAL</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7074; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #c8102e; color: #ffffff;
border: none; border-radius: 2px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #121212;
border: 1px solid #c8102e; border-radius: 2px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7074; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.4; background: #272c32; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{
width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;
background:#ffffff;font-family:'Maison Neue Demi',sans-serif;
color:#3a3f45;
}
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:56px;background:#272c32;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.logo{color:#fff;font-weight:700;font-size:18px;letter-spacing:0.3px;}
.logo span{color:#c8102e;}
.navlinks{display:flex;gap:20px;}
.navlinks span{color:#dedede;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.madeUK{background:#012169;color:#fff;font-size:10px;font-weight:700;padding:5px 10px;letter-spacing:0.3px;}
.hero{background:#272c32;color:#fff;padding:22px 24px;display:flex;gap:0;}
.statPanel{display:flex;gap:0;flex:1;border:1px solid #454b52;}
.statCell{flex:1;padding:14px 16px;border-right:1px solid #454b52;}
.statCell:last-child{border-right:none;}
.statCell .num{font-family:'Maison Neue Mono',monospace;font-size:26px;font-weight:700;color:#c8102e;letter-spacing:-1px;}
.statCell .lbl{font-size:10px;color:#9ca3af;text-transform:uppercase;letter-spacing:0.5px;margin-top:4px;}
.heroTitle{padding:0 24px 14px;background:#272c32;}
.heroTitle h1{color:#fff;font-size:26px;font-weight:700;letter-spacing:-0.5px;margin:0 0 6px;}
.heroTitle p{color:#9ca3af;font-size:12px;font-family:sans-serif;max-width:500px;margin:0 0 12px;}
.heroBtn{display:inline-block;background:#c8102e;color:#fff;font-size:12px;font-weight:700;padding:10px 20px;letter-spacing:0.5px;text-transform:uppercase;}
.section{padding:14px 24px 0;}
.sectitle{font-size:14px;font-weight:700;margin:0 0 10px;color:#121212;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.card{border:1px solid #dedede;}
.photo{aspect-ratio:1/1;background:#f4f4f4;position:relative;}
.photo .box{position:absolute;bottom:12%;left:18%;right:18%;height:55%;background:#272c32;}
.photo .flame{position:absolute;bottom:22%;left:50%;transform:translateX(-50%);width:30%;height:24%;background:#c8102e;}
.navytag{position:absolute;top:6px;left:6px;background:#012169;color:#fff;font-size:9px;font-weight:700;padding:2px 6px;}
.monospec{font-family:'Maison Neue Mono',monospace;font-size:10px;color:#c8102e;font-weight:700;padding:6px 8px 0;}
.ctitle{font-size:12px;font-weight:700;color:#121212;padding:2px 8px 0;}
.cprice{font-size:12px;font-weight:700;color:#3a3f45;padding:2px 8px 8px;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#272c32;color:#9ca3af;font-size:10px;padding:8px 24px;display:flex;justify-content:space-between;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Gozney Pizza OV 2<span>.</span></div>
<div class="navlinks"><span>Ovens</span><span>Fuel</span><span>Specs</span><span>Support</span></div>
<div class="madeUK">MADE IN THE UK</div>
</div>
<div class="hero">
<div class="statPanel">
<div class="statCell"><div class="num">950°F</div><div class="lbl">Max Temp</div></div>
<div class="statCell"><div class="num">02:00</div><div class="lbl">Recovery Time</div></div>
<div class="statCell"><div class="num">14″</div><div class="lbl">Stone Diameter</div></div>
<div class="statCell"><div class="num">19.8kg</div><div class="lbl">Unit Weight</div></div>
</div>
</div>
<div class="heroTitle">
<h1>Instrument-panel numbers.<br>Fire-forward performance.</h1>
<p>Every spec measured, logged, and printed at the same weight as the price tag — because ambiguous heat claims don't cook pizza.</p>
<div class="heroBtn">Compare Models</div>
</div>
<div class="section">
<div class="sectitle">Ovens By The Numbers</div>
<div class="grid">
<div class="card"><div class="photo"><div class="navytag">Made in UK</div><div class="box"></div><div class="flame"></div></div>
<div class="monospec">950°F / 02:00</div><div class="ctitle">Dome S1 Propane</div><div class="cprice">$599.00</div></div>
<div class="card"><div class="photo"><div class="box"></div><div class="flame"></div></div>
<div class="monospec">900°F / 03:00</div><div class="ctitle">Roccbox Dual Fuel</div><div class="cprice">$499.00</div></div>
<div class="card"><div class="photo"><div class="box"></div><div class="flame"></div></div>
<div class="monospec">14″ STONE</div><div class="ctitle">Tourbox Portable</div><div class="cprice">$429.00</div></div>
<div class="card"><div class="photo"><div class="navytag">Made in UK</div><div class="box"></div><div class="flame"></div></div>
<div class="monospec">19.8KG</div><div class="ctitle">Dome Dual Fuel Pro</div><div class="cprice">$899.00</div></div>
</div>
</div>
<div class="footer"><span>© Gozney Pizza OV 2</span><span>Precision-engineered outdoor cooking hardware</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #dcd7ca; color: #1e1f26;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #dcd7ca; color: #1e1f26;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #1e1f26; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6d6d6d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: 0.8px; background: #cd2653; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: 0.8px; background: transparent; color: #32373c;
border: 1px solid #cd2653; border-radius: 0px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #1e1f26;
border: 1px solid #aca9a1; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d6d6d; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dabeb9; color: #cd2653;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#dcd7ca; font-family:Palatino,Georgia,serif; color:#32373c;
}
*{box-sizing:border-box;}
.sans{font-family:Geneva,Verdana,Arial,sans-serif;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #c7c0ae;}
.logo{font-size:19px;font-weight:400;color:#1e1f26;letter-spacing:.5px;}
.navlinks{display:flex;gap:24px;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#382110;}
.navlinks span.active{color:#cd2653;border-bottom:1px solid #cd2653;padding-bottom:20px;}
.cta{background:#cd2653;color:#fff;padding:11px 20px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;}
.hero{display:flex;padding:28px 32px 18px;gap:26px;align-items:center;}
.hero-copy{width:380px;}
.hero-title{font-size:32px;font-weight:400;line-height:1.25;margin-bottom:14px;color:#1e1f26;}
.hero-sub{font-size:13.5px;line-height:1.6;color:#32373c;margin-bottom:16px;}
.btn-main{display:inline-block;background:#cd2653;color:#fff;padding:12px 22px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;}
.hero-visual{flex:1;height:200px;background:#eae5d8;border:1px solid #c7c0ae;position:relative;}
.pen{position:absolute;width:14px;height:170px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#382110,#1e1f26);top:15px;left:50%;transform:translateX(-50%) rotate(20deg);}
.pen:before{content:'';position:absolute;top:-8px;left:2px;width:10px;height:16px;background:#cd2653;border-radius:50% 50% 0 0;}
.section{padding:6px 32px 0;}
.section-title{font-size:16px;font-weight:400;margin-bottom:14px;color:#1e1f26;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#eae5d8;border:1px solid #c7c0ae;}
.card-img{aspect-ratio:4/3;background:linear-gradient(150deg,#c7c0ae,#382110);position:relative;}
.swatchring{position:absolute;bottom:8px;right:8px;width:14px;height:14px;border-radius:50%;border:2px solid #fff;background:#cd2653;}
.card-body{padding:10px;}
.card-name{font-size:13px;margin-bottom:6px;}
.card-price{font-size:12.5px;font-weight:700;font-family:Geneva,Verdana,sans-serif;color:#1e1f26;}
</style>
<div class="nav">
<div class="logo">Edison Pen CO</div>
<div class="navlinks sans"><span class="active">Fountain Pens</span><span>Inks</span><span>Nibs</span><span>Custom Orders</span></div>
<div class="cta sans">Shop The Collection</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="hero-title">Instruments for a slower kind of writing.</div>
<div class="hero-sub sans">Handcrafted fountain pens, turned from acrylic and ebonite — each nib tuned before it ships.</div>
<div class="btn-main">Shop Fountain Pens</div>
</div>
<div class="hero-visual"><div class="pen"></div></div>
</div>
<div class="section">
<div class="section-title">Featured Pens</div>
<div class="grid sans">
<div class="card"><div class="card-img"><div class="swatchring"></div></div><div class="card-body"><div class="card-name">Collaboration Fountain Pen</div><div class="card-price">$245.00</div></div></div>
<div class="card"><div class="card-img"><div class="swatchring"></div></div><div class="card-body"><div class="card-name">Pearl Fountain Pen</div><div class="card-price">$195.00</div></div></div>
<div class="card"><div class="card-img"><div class="swatchring"></div></div><div class="card-body"><div class="card-name">Menlo Fountain Pen</div><div class="card-price">$285.00</div></div></div>
<div class="card"><div class="card-img"><div class="swatchring"></div></div><div class="card-body"><div class="card-name">Nouveau Premier</div><div class="card-price">$165.00</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f3f3; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f3f3; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #334fb4; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #146ff8; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #f3f3f3; color: #121212;
border: 1px solid #146ff8; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #bbbbbb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #334fb4; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #146ff8; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:'Assistant', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#ffffff; border-bottom:1px solid #e8e8e8; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.brand { font-size:20px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.navlinks span:first-child { color:#146ff8; }
.navicons { display:flex; gap:16px; align-items:center; }
.search { width:140px; height:32px; background:#fafafa; border-radius:9999px; font-size:12px; color:#6a7ab5;
display:flex; align-items:center; padding-left:14px; }
.cart { width:22px; height:22px; border:1.5px solid #121212; border-radius:5px; position:relative; }
.cart::after { content:'1'; position:absolute; top:-8px; right:-8px; width:15px; height:15px; border-radius:999px;
background:#146ff8; color:#fff; font-size:9px; display:flex; align-items:center; justify-content:center; }
.hero { background:#f3f3f3; padding:30px 40px; display:flex; align-items:center; gap:32px; }
.hero-copy { flex:1.15; }
.hero h1 { font-size:34px; font-weight:700; line-height:1.2; letter-spacing:-0.5px; margin:0 0 10px; }
.hero p { font-size:14px; color:#242833; margin:0 0 18px; max-width:380px; line-height:1.5; }
.row { display:flex; gap:10px; }
.btn-primary { background:#146ff8; color:#fff; border:none; border-radius:9999px; padding:14px 30px;
font-size:14px; font-weight:600; letter-spacing:0.3px; height:48px; }
.btn-secondary { background:#fff; color:#121212; border:2px solid #dedede; border-radius:9999px;
padding:12px 28px; font-size:14px; font-weight:600; height:48px; }
.hero-visual { flex:1; height:170px; border-radius:20px; overflow:hidden; position:relative;
background:linear-gradient(150deg,#fdf0dc,#e9c99a); }
.hero-visual::before { content:''; position:absolute; width:60px; height:100px; border-radius:12px 12px 30px 30px;
background:#334fb4; opacity:0.85; left:60px; bottom:0; }
.hero-visual::after { content:''; position:absolute; width:56px; height:80px; border-radius:12px 12px 30px 30px;
background:#8ea1e0; right:70px; bottom:0; }
.section { padding:18px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-size:22px; font-weight:600; margin:0; }
.sec-head span { font-size:12px; color:#146ff8; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { position:relative; }
.thumb { aspect-ratio:1/1; border-radius:12px; position:relative; margin-bottom:8px; }
.t1 { background:linear-gradient(160deg,#fef3d6,#e6b45c); }
.t2 { background:linear-gradient(160deg,#e3ede6,#a6c9ab); }
.t3 { background:linear-gradient(160deg,#f6e2e8,#e3a3b7); }
.t4 { background:linear-gradient(160deg,#dedede,#b8b8b8); }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; letter-spacing:0.5px;
text-transform:uppercase; padding:4px 10px; border-radius:9999px; color:#fff; }
.badge.new { background:#146ff8; }
.badge.sale { background:#121212; }
.card h3 { font-size:14px; font-weight:600; margin:0 0 2px; }
.card .price { font-size:14px; color:#242833; margin:0; }
footer { background:#f3f3f3; color:#242833; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#242833; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Being Frenshe</p>
<div class="navlinks"><span>Body</span><span>Home</span><span>Fragrance</span><span>Gift Sets</span></div>
<div class="navicons"><div class="search">Search…</div><div class="cart"></div></div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Your shelf, your ritual</h1>
<p>Clean body oils, whipped butters, and sculptural pumps designed to be seen, not hidden in a cabinet.</p>
<div class="row">
<button class="btn-primary">Shop Now</button>
<button class="btn-secondary">Learn More</button>
</div>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2>Shelf Edit</h2><span>View All</span></div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="badge new">New</span></div><h3>Amber Body Oil</h3><p class="price">$28.00</p></div>
<div class="card"><div class="thumb t2"></div><h3>Sage Cream Deodorant</h3><p class="price">$14.00</p></div>
<div class="card"><div class="thumb t3"><span class="badge sale">Sale</span></div><h3>Rose Whipped Butter</h3><p class="price">$22.00</p></div>
<div class="card"><div class="thumb t4"></div><h3>Charcoal Bar Set</h3><p class="price">$18.00</p></div>
</div>
</section>
<footer>
<span>© Being Frenshe</span>
<div><a href="#">Shop</a><a href="#">About</a><a href="#">Help</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard Variable",-apple-system,"Apple SD Gothic Neo",sans-serif; }
* { box-sizing:border-box; }
header { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
border-bottom:1px solid #eeeeee; }
.brand { font-weight:700; font-size:16px; letter-spacing:-0.3px; }
.search { background:#f6f6f6; font-size:13px; color:#999999; padding:8px 16px; width:220px; }
.navlinks { display:flex; gap:18px; font-size:13px; }
.cats { display:flex; gap:24px; padding:12px 28px; font-size:15px; font-weight:600; border-bottom:1px solid #eeeeee; }
.cats span.on { text-decoration:underline; text-underline-offset:6px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:0; }
.card { border-right:1px solid #eeeeee; padding:10px; }
.card:nth-child(4n) { border-right:none; }
.img { height:150px; background:#f6f6f6; margin-bottom:8px; position:relative; }
.exclusive { position:absolute; top:0; left:0; background:#000000; color:#ffffff; font-size:11px; font-weight:700; padding:3px 6px; }
.brandname { font-size:14px; font-weight:700; margin:0 0 2px; }
.prodname { font-size:14px; color:#555555; margin:0 0 4px; }
.price { font-size:14px; font-weight:700; }
.sale { color:#ff4600; margin-right:4px; }
.orig { font-size:13px; color:#999999; text-decoration:line-through; margin-left:6px; }
.i1 { background:linear-gradient(160deg,#e8e8e8,#c8c8c8); }
.i2 { background:linear-gradient(160deg,#eee2d8,#d8c0a0); }
.i3 { background:linear-gradient(160deg,#e0e4e2,#a8b8b0); }
.i4 { background:linear-gradient(160deg,#efe8e8,#d8b8b8); }
</style></head>
<body>
<header>
<span class="brand">W Concept</span>
<div class="navlinks"><span>Women</span><span>Men</span><span>Beauty</span><span>Life</span><span>Luxury</span></div>
<div class="search">Brand, product search</div>
</header>
<div class="cats"><span class="on">Featured brands</span><span>New arrivals</span><span>Best</span></div>
<div class="grid">
<div class="card"><div class="img i1"><span class="exclusive">EXCLUSIVE</span></div><p class="brandname">STUDIO NOIR</p><p class="prodname">Wool blend overcoat</p>
<span class="price"><span class="sale">-30%</span>238,000<span class="orig">340,000</span></span></div>
<div class="card"><div class="img i2"></div><p class="brandname">HANRA</p><p class="prodname">Linen wide trousers</p>
<span class="price">128,000</span></div>
<div class="card"><div class="img i3"><span class="exclusive">NEW</span></div><p class="brandname">MUTED FIELD</p><p class="prodname">Cropped knit cardigan</p>
<span class="price"><span class="sale">-15%</span>96,000<span class="orig">112,000</span></span></div>
<div class="card"><div class="img i4"></div><p class="brandname">SEOAN</p><p class="prodname">Leather crossbody bag</p>
<span class="price">168,000</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffde00; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffde00;
border: 1px solid #ffde00; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292400; color: #ffde00;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#000; padding:20px 0 0; position:relative; }
.topbar { display:flex; justify-content:space-between; padding:0 16px; margin-bottom:14px; align-items:center; }
.mask { color:#FFDE00; font-weight:800; font-size:16px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.tile { position:relative; aspect-ratio:1; overflow:hidden; }
.g1 { background:linear-gradient(160deg,#7a4a6a,#2a1a24); }
.g2 { background:linear-gradient(160deg,#4a6a7a,#1a222a); }
.g3 { background:linear-gradient(160deg,#8a6a4a,#2a201a); }
.g4 { background:linear-gradient(160deg,#5a7a5a,#1a2a1a); }
.g5 { background:linear-gradient(160deg,#7a5a8a,#241a2a); }
.g6 { background:linear-gradient(160deg,#6a4a4a,#221818); }
.scrim { position:absolute; left:0; right:0; bottom:0; height:45%;
background:linear-gradient(transparent, rgba(0,0,0,0.65)); }
.tname { position:absolute; bottom:14px; left:8px; font-size:12px; font-weight:700; }
.tdist { position:absolute; bottom:3px; left:8px; font-size:9px; font-weight:700; letter-spacing:0.2px; }
.onl { position:absolute; top:6px; right:6px; width:9px; height:9px; border-radius:50%; background:#4CD964; border:2px solid #000; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:52px; background:rgba(0,0,0,0.94);
border-top:0.5px solid #2C2C2C; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:#999; text-align:center; }
.tab.on { color:#FFDE00; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; background:#000; }
.brand { font-size:30px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.brand span { color:#FFDE00; }
.tag { font-size:14px; color:#999; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:0; border:1px solid #2C2C2C; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#999; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:700; }
.typeblock .t2 { font-size:13px; color:#999; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:700; padding:6px 12px; border-radius:999px;
background:#1A1A1A; border:1px solid #2C2C2C; color:#999; }
.footer { margin-top:auto; border-top:1px solid #2C2C2C; padding-top:16px; font-size:11px; color:#5C5C5C; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="topbar"><span class="mask">▲</span><span style="font-size:11px;color:#999">Filter</span></div>
<div class="grid">
<div class="tile g1"><div class="scrim"></div><div class="onl"></div><span class="tname">Alex</span><span class="tdist">220 ft</span></div>
<div class="tile g2"><div class="scrim"></div><span class="tname">Jordan</span><span class="tdist">0.4 mi</span></div>
<div class="tile g3"><div class="scrim"></div><div class="onl"></div><span class="tname">Sam</span><span class="tdist">0.6 mi</span></div>
<div class="tile g4"><div class="scrim"></div><span class="tname">Chris</span><span class="tdist">0.8 mi</span></div>
<div class="tile g5"><div class="scrim"></div><div class="onl"></div><span class="tname">Kai</span><span class="tdist">1.1 mi</span></div>
<div class="tile g6"><div class="scrim"></div><span class="tname">Theo</span><span class="tdist">1.3 mi</span></div>
</div>
<div class="tabbar"><div class="tab on">Browse</div><div class="tab">Taps</div><div class="tab">Messages</div><div class="tab">Profile</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">Grindr (iOS)<span>.</span></h1>
<p class="tag">A true-black wall of photos, sorted nearest-first — one accent color, one presence dot, zero decoration.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#000000"></div><small>#000000</small></div>
<div class="sw"><div class="chip2" style="background:#FFDE00"></div><small>#FFDE00</small></div>
<div class="sw"><div class="chip2" style="background:#4CD964"></div><small>#4CD964</small></div>
<div class="sw"><div class="chip2" style="background:#1A1A1A"></div><small>#1A1A1A</small></div>
<div class="sw"><div class="chip2" style="background:#FF3B30"></div><small>#FF3B30</small></div>
</div>
<div class="typeblock">
<div class="t1">220 ft</div>
<div class="t2">Inter · 400/700 only · overlay text always bold + scrimmed</div>
</div>
<div class="taglist">
<span>3-col cascade grid</span><span>2pt gutter, 0pt radius</span><span>Online presence dot</span>
<span>Distance scrim label</span><span>Black-on-yellow Tap</span>
</div>
<div class="footer">Pure black #000000 · yellow reserved for the Tap action + active tab only</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #3a3a3a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #3a3a3a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #3a3a3a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #00b5e2; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #3a3a3a;
border: 1px solid #00b5e2; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #3a3a3a;
border: 1px solid #cecece; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #4e008e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f1f1f1; font-family:'Proxima Nova',Helvetica,Arial,sans-serif; color:#2b2b2b; }
*{box-sizing:border-box;}
.nav{height:60px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e5e5e5;}
.logo{font-size:20px;font-weight:700;color:#2b2b2b;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;color:#2b2b2b;}
.search{width:170px;height:30px;border-radius:9999px;background:#fafafa;border:1px solid #e5e5e5;font-size:11px;color:#8a8a8a;display:flex;align-items:center;padding:0 14px;}
.hero{display:flex;height:270px;background:#fff;}
.left{width:430px;padding:44px 36px;display:flex;flex-direction:column;justify-content:center;}
.h1{font-size:32px;font-weight:700;line-height:1.2;margin:0 0 14px;}
.sub{font-size:15px;line-height:1.6;color:#6b6b6b;max-width:340px;margin:0 0 22px;}
.cta{display:inline-block;background:#00b5e2;color:#fff;font-size:14px;font-weight:600;padding:13px 28px;border-radius:8px;width:fit-content;}
.right{flex:1;position:relative;background:linear-gradient(160deg,#e5e5e5,#f1f1f1);}
.case{position:absolute;left:50%;top:40px;transform:translateX(-50%);width:110px;height:200px;border-radius:16px;background:linear-gradient(160deg,#6b4a2f,#3a2b1f);}
.case:before{content:'';position:absolute;top:20px;left:14px;right:14px;bottom:20px;border-radius:8px;background:rgba(255,255,255,.06);}
.swrow{display:flex;gap:8px;padding:14px 36px;}
.sw{width:18px;height:18px;border-radius:50%;border:2px solid transparent;}
.sw.sel{border-color:#2b2b2b;}
.sec{padding:6px 36px 0;}
.seclabel{font-size:15px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:210px;background:#fff;border-radius:8px;padding:12px;box-shadow:0 1px 3px rgba(0,0,0,.08);position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#4e008e;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 7px;border-radius:8px;}
.thumb{aspect-ratio:1/1;background:#f1f1f1;border-radius:6px;margin-bottom:8px;}
.ptitle{font-size:14px;font-weight:600;margin:0 0 4px;}
.pprice{font-size:13px;color:#00b5e2;font-weight:600;}
</style>
<div class="nav">
<div class="logo">Sena Cases</div>
<div class="navlinks"><div>Cases</div><div>Wallets</div><div>Straps</div></div>
<div class="search">Search leather…</div>
</div>
<div class="hero">
<div class="left">
<div class="h1">A case for a phone<br>is a case for a life.</div>
<div class="sub">Leather goods that happen to hold your phone — not an accessory brand pretending at fashion.</div>
<div class="cta">Shop Leather Cases</div>
</div>
<div class="right"><div class="case"></div></div>
</div>
<div class="swrow">
<div class="sw sel" style="background:#3a2b1f"></div>
<div class="sw" style="background:#571eae"></div>
<div class="sw" style="background:#33c4e8"></div>
<div class="sw" style="background:#ff1493"></div>
<div class="sw" style="background:#4e008e"></div>
</div>
<div class="sec">
<div class="seclabel">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#6b4a2f,#3a2b1f)"></div><div class="ptitle">Wallet Book Case</div><div class="pprice">$59.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#571eae,#2b2b2b)"></div><div class="ptitle">UltraSlim Snap Case</div><div class="pprice">$34.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#33c4e8,#2b2b2b)"></div><div class="ptitle">Crossbody Strap</div><div class="pprice">$44.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3a2b1f,#571eae)"></div><div class="ptitle">MagSafe Cardholder</div><div class="pprice">$29.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5741d9; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5741d9; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #aea4e8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7132f5; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5741d9; color: #ffffff;
border: 1px solid #7132f5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5741d9; color: #f5f5f5;
border: 1px solid #705edd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aea4e8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5b3fdd; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#101114; box-sizing:border-box;
font-family:"Kraken-Product","Helvetica Neue",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px; overflow:hidden; display:flex; }
/* sidebar */
.kr-side { flex:0 0 176px; border-right:1px solid #dedee5; padding:20px 16px; display:flex; flex-direction:column; gap:4px; }
.kr-brand { font-family:"Kraken-Brand","IBM Plex Sans",sans-serif; font-size:19px; font-weight:700; letter-spacing:-0.5px; margin:0 0 18px 6px; }
.kr-navitem { font-size:14px; font-weight:500; color:#686b82; padding:10px 12px; border-radius:12px; }
.kr-navitem.on { background:rgba(133,91,251,0.16); color:#7132f5; font-weight:600; }
/* main */
.kr-main { flex:1; padding:24px 28px; overflow:hidden; }
.kr-topline { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; }
.kr-headline { display:flex; align-items:center; gap:10px; }
.kr-headline h1 { font-family:"Kraken-Brand","IBM Plex Sans",sans-serif; font-size:28px; font-weight:700;
letter-spacing:-0.5px; margin:0; }
.kr-sym { font-size:13px; font-weight:500; color:#9497a9; background:rgba(148,151,169,0.08); padding:3px 8px; border-radius:8px; }
.kr-tf { display:flex; gap:6px; }
.kr-pill { font-size:12px; font-weight:500; padding:6px 12px; border-radius:12px; color:#686b82; }
.kr-pill.on { background:#7132f5; color:#ffffff; }
.kr-price-row { display:flex; align-items:flex-end; gap:12px; margin-bottom:14px; }
.kr-price { font-family:"Kraken-Brand","IBM Plex Sans",sans-serif; font-size:36px; font-weight:700; letter-spacing:-1px; }
.kr-delta { font-size:14px; font-weight:600; color:#026b3f; background:rgba(20,158,97,0.16); padding:4px 10px; border-radius:6px; margin-bottom:4px; }
.kr-chart-wrap { border:1px solid rgba(148,151,169,0.16); border-radius:12px; padding:14px 16px;
box-shadow:rgba(0,0,0,0.03) 0px 4px 24px; margin-bottom:16px; }
.kr-stats { display:flex; gap:12px; margin-bottom:16px; }
.kr-stat { flex:1; background:#ffffff; border:1px solid rgba(148,151,169,0.16); border-radius:16px; padding:14px 16px;
box-shadow:rgba(0,0,0,0.03) 0px 4px 24px; }
.kr-stat .lbl { font-size:12px; font-weight:500; color:#686b82; }
.kr-stat .val { font-size:20px; font-weight:700; color:#101114; margin-top:4px; }
.kr-actions { display:flex; gap:12px; }
.kr-btn-primary { flex:1; background:#7132f5; color:#ffffff; border:none; padding:13px 16px; border-radius:12px;
font-size:16px; font-weight:500; }
.kr-btn-outline { flex:1; background:#ffffff; color:#5741d8; border:1px solid #5741d8; padding:13px 16px; border-radius:12px;
font-size:16px; font-weight:500; }
/* order book (right rail baked into main via absolute) */
.kr-book { position:absolute; right:28px; top:24px; width:186px; }
.kr-book-card { background:linear-gradient(135deg,#7132f5 0%, #5741d8 100%); color:#ffffff; border-radius:16px;
padding:16px 18px; box-shadow: inset 0 0 60px rgba(255,255,255,0.08); }
.kr-book-card .t { font-size:13px; font-weight:600; opacity:0.9; }
.kr-book-card .v { font-size:22px; font-weight:700; margin-top:6px; }
.kr-book-card .s { font-size:11px; opacity:0.75; margin-top:8px; }
</style></head>
<body>
<div class="stage">
<div class="kr-side">
<p class="kr-brand">Kraken</p>
<div class="kr-navitem">Trade</div>
<div class="kr-navitem on">Assets</div>
<div class="kr-navitem">Learn</div>
<div class="kr-navitem">Security</div>
</div>
<div class="kr-main" style="position:relative;">
<div class="kr-topline">
<div class="kr-headline">
<h1>Bitcoin</h1>
<span class="kr-sym">BTC</span>
</div>
<div class="kr-tf">
<span class="kr-pill">1D</span>
<span class="kr-pill on">1W</span>
<span class="kr-pill">1M</span>
<span class="kr-pill">1Y</span>
</div>
</div>
<div class="kr-price-row">
<div class="kr-price">$68,214.50</div>
<div class="kr-delta">▲ 2.34%</div>
</div>
<div class="kr-chart-wrap">
<svg width="560" height="150" viewBox="0 0 560 150">
<defs>
<linearGradient id="krFill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#7132f5" stop-opacity="0.25"/>
<stop offset="100%" stop-color="#7132f5" stop-opacity="0"/>
</linearGradient>
</defs>
<polyline points="0,100 40,92 80,104 120,80 160,88 200,60 240,70 280,44 320,58 360,38 400,50 440,28 480,36 520,18 560,26"
fill="none" stroke="#7132f5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<polygon points="0,100 40,92 80,104 120,80 160,88 200,60 240,70 280,44 320,58 360,38 400,50 440,28 480,36 520,18 560,26 560,150 0,150"
fill="url(#krFill)"/>
</svg>
</div>
<div class="kr-stats">
<div class="kr-stat"><div class="lbl">Market Cap</div><div class="val">$1.34T</div></div>
<div class="kr-stat"><div class="lbl">24h Volume</div><div class="val">$28.6B</div></div>
<div class="kr-stat"><div class="lbl">Circulating Supply</div><div class="val">19.7M BTC</div></div>
</div>
<div class="kr-actions">
<button class="kr-btn-primary">Buy BTC</button>
<button class="kr-btn-outline">Sell BTC</button>
</div>
<div class="kr-book">
<div class="kr-book-card">
<div class="t">Portfolio balance</div>
<div class="v">$4,920.11</div>
<div class="s">Held by Jamie · 0.0721 BTC</div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcf4e9; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcf4e9; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #765454; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ef308d; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #fcf4e9; color: #1a1a1a;
border: 1px solid #ef308d; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #282725;
border: 1px solid #c4beb5; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #765454; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d6deba; color: #1a1a1a;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fcf4e9; font-family:'Basis Grotesque Pro',Arial,sans-serif; color:#282725; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:22px;font-weight:700;color:#663399;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#282725;}
.navcta{background:#ef308d;color:#fff;font-size:12px;font-weight:700;padding:9px 18px;border-radius:9999px;}
.hero{height:236px;display:flex;align-items:center;padding:0 34px;}
.heroText{width:430px;}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#f9b146;margin-bottom:10px;}
.h1{font-family:'Inferi',Georgia,serif;font-size:32px;font-weight:400;line-height:1.2;color:#282725;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.6;color:#282725;margin:0 0 18px;max-width:370px;}
.btn{display:inline-block;background:#ef308d;color:#fff;font-size:13px;font-weight:700;padding:13px 26px;border-radius:9999px;}
.orbwrap{margin-left:auto;width:230px;height:190px;position:relative;}
.orb1{position:absolute;width:150px;height:150px;border-radius:50%;background:#d6deba;top:10px;left:40px;}
.orb2{position:absolute;width:80px;height:80px;border-radius:50%;background:#f95647;top:0;right:10px;}
.orb3{position:absolute;width:56px;height:56px;border-radius:50%;background:#0cc67b;bottom:10px;left:10px;}
.sec{padding:22px 34px 0;}
.pathrow{display:flex;gap:10px;margin-bottom:16px;}
.path{flex:1;text-align:center;padding:10px;border-radius:9999px;font-size:12px;font-weight:700;color:#282725;}
.grid{display:flex;gap:14px;}
.card{width:203px;background:#fff;border-radius:16px;padding:12px;}
.thumb{height:100px;border-radius:12px;margin-bottom:10px;}
.pname{font-size:13px;font-weight:600;color:#282725;margin:0 0 4px;}
.pprice{font-size:12px;color:#831a4a;font-weight:700;}
</style>
<div class="nav">
<div class="logo">Tia</div>
<div class="navlinks"><span>Primary Care</span><span>Gynecology</span><span>Mental Health</span><span>Wellness</span></div>
<div class="navcta">Book a Visit</div>
</div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">Care That Fits Your Life</div>
<div class="h1">Healthcare you'd choose, not endure.</div>
<div class="sub">Whole-person women's health — in person and virtual, without the waiting-room dread.</div>
<div class="btn">Book Your Visit</div>
</div>
<div class="orbwrap"><div class="orb1"></div><div class="orb2"></div><div class="orb3"></div></div>
</div>
<div class="sec">
<div class="pathrow">
<div class="path" style="background:#e4f3ff;">Primary Care</div>
<div class="path" style="background:#ffeff7;">Gynecology</div>
<div class="path" style="background:#d6deba;">Mental Health</div>
<div class="path" style="background:#f9b146;color:#fff;">Wellness</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#ef308d,#f9b146);"></div><div class="pname">Annual Wellness Visit</div><div class="pprice">Covered by most plans</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#0cc67b,#d6deba);"></div><div class="pname">Therapy Session</div><div class="pprice">From $90</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#f95647,#831a4a);"></div><div class="pname">Same-Day Virtual Visit</div><div class="pprice">From $49</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#663399,#e4f3ff);"></div><div class="pname">Prenatal Care Plan</div><div class="pprice">Covered by most plans</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0C0C0C; color: #FFFFFF;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0C0C0C; color: #FFFFFF;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #FFFFFF; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #C8843A; color: #FFFFFF;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: transparent; color: #FFFFFF;
border: 1px solid #C8843A; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1F1F1F; color: #FFFFFF;
border: 1px solid #494949; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #2A4A6A; color: #FFFFFF;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>FX Luminaire</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#0C0C0C; font-family:'Montserrat','Gotham',-apple-system,'Helvetica Neue',sans-serif; color:#FFFFFF; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #2A2A2A;}
.logo{font-size:19px;font-weight:700;letter-spacing:0.5px;}
.navlinks{display:flex;gap:26px;font-size:14px;font-weight:500;letter-spacing:0.3px;color:#CCCCCC;}
.cta-nav{background:#C8843A;color:#fff;border:none;border-radius:4px;padding:8px 18px;font-size:12px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.hero{min-height:280px;background:linear-gradient(to right, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.18) 60%),linear-gradient(120deg,#3a2a10,#0C0C0C 60%);padding:44px 32px;display:flex;flex-direction:column;justify-content:center;}
.overline{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#C8843A;margin-bottom:12px;}
h1{font-size:40px;font-weight:700;line-height:1.15;letter-spacing:-0.5px;margin:0 0 12px;max-width:520px;}
.sub{font-size:15px;color:#CCCCCC;margin:0 0 22px;max-width:460px;}
.cta{background:#C8843A;color:#fff;border:none;border-radius:4px;padding:12px 24px;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;width:fit-content;}
.section{padding:24px 32px 0;}
.section h2{font-size:24px;font-weight:600;margin:0 0 16px;}
.grid{display:flex;gap:16px;}
.card{flex:1;background:#1F1F1F;border:1px solid #1E1E1E;border-radius:8px;padding:16px;}
.card-img{background:#181818;border-radius:4px;height:100px;position:relative;display:flex;align-items:center;justify-content:center;}
.fixture{width:40px;height:60px;background:linear-gradient(180deg,#C8843A,#7A5228);border-radius:4px;position:relative;}
.fixture::after{content:'';position:absolute;top:-16px;left:12px;width:16px;height:16px;background:radial-gradient(circle,#ffe9c2,#C8843A);border-radius:50%;}
.spec-badge{position:absolute;top:8px;left:8px;background:#2A4A6A;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.card-title{font-size:15px;font-weight:600;margin-top:12px;}
.card-sub{font-size:13px;color:#888;margin-top:2px;}
.chips{display:flex;gap:8px;margin-top:10px;}
.chip{background:#252525;color:#CCCCCC;font-size:12px;padding:4px 10px;border-radius:4px;}
.chip.sel{border:1px solid #C8843A;color:#C8843A;}
</style>
<div class="nav">
<div class="logo">FX Luminaire</div>
<div class="navlinks"><span>Fixtures</span><span>Controllers</span><span>Configurator</span><span>Resources</span></div>
<button class="cta-nav">Find a Rep</button>
</div>
<div class="hero">
<div class="overline">Architectural Outdoor Lighting</div>
<h1>Precision light for the landscapes<br>that deserve it</h1>
<p class="sub">Specification-grade fixtures for pathways, facades, and gardens. Photometric data included with every family.</p>
<button class="cta">Configure a Fixture</button>
</div>
<div class="section">
<h2>Featured Fixture Families</h2>
<div class="grid">
<div class="card"><div class="card-img"><div class="spec-badge">IP68</div><div class="fixture"></div></div><div class="card-title">Luxor ZDC Well Light</div><div class="card-sub">3W · 15°–60° beam</div><div class="chips"><div class="chip sel">15°</div><div class="chip">25°</div><div class="chip">40°</div></div></div>
<div class="card"><div class="card-img"><div class="spec-badge">IP66</div><div class="fixture" style="background:linear-gradient(180deg,#8a8a8a,#333);"></div></div><div class="card-title">Palladian Bollard</div><div class="card-sub">6W · Path & area</div><div class="chips"><div class="chip">Bronze</div><div class="chip sel">Black</div></div></div>
<div class="card"><div class="card-img"><div class="spec-badge">IP68</div><div class="fixture"></div></div><div class="card-title">Sedona Uplight</div><div class="card-sub">9W · Facade wash</div><div class="chips"><div class="chip sel">2700K</div><div class="chip">3000K</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #02294b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #02294b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8899a8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #012e37; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #02294b; color: #ffffff;
border: 1px solid #012e37; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #02294b; color: #f5f5f5;
border: 1px solid #294a66; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8899a8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #022a48; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:700; font-size:18px; color:#00172e; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:8px; }
.navlinks span { font-size:14px; color:#232424; padding:8px 12px; border-radius:9999px; }
.navr { display:flex; align-items:center; gap:10px; }
.btn-dark { background:#111112; color:#fff; border:none; border-radius:9999px; padding:9px 18px; font-size:13px; font-weight:600; }
.ghost { font-size:13px; color:#111112; font-weight:600; }
.hero { height:280px; background:linear-gradient(180deg,#02294b,#0d0d3f); display:flex;
flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; }
.hero h1 { font-size:44px; font-weight:500; letter-spacing:-1.5px; margin:0; line-height:1.1;
background:linear-gradient(90deg,#86ef5a,#10d0b7); -webkit-background-clip:text; background-clip:text; color:transparent; max-width:700px; }
.hero p { color:rgba(255,255,255,0.75); font-size:15px; margin:0; }
.pill { background:#ffffff; color:#02294b; border:none; border-radius:9999px; padding:13px 28px; font-size:16px; font-weight:600; }
.stats { display:flex; justify-content:center; gap:60px; padding:22px 0; background:#ffffff; }
.stat { text-align:center; }
.stat b { font-size:26px; font-weight:800; color:#00172e; display:block; }
.stat span { font-size:12px; color:#5c7695; }
.cards { display:flex; gap:16px; padding:0 32px 20px; }
.card { flex:1; background:#ffffff; border:1px solid #ebf0f4; border-radius:12px; padding:18px; }
.card h3 { font-size:16px; font-weight:600; margin:0 0 6px; color:#00172e; }
.card p { font-size:12.5px; color:#5c7695; margin:0; line-height:1.4; }
.swatch { width:32px; height:32px; border-radius:8px; margin-bottom:10px; }
</style></head>
<body>
<nav>
<div class="brand">Plaid</div>
<div class="navlinks"><span>Use cases</span><span>Industries</span><span>Developers</span><span>Company</span></div>
<div class="navr"><span class="ghost">Log in</span><button class="btn-dark">Contact sales</button></div>
</nav>
<div class="hero">
<h1>Turn data into revolutionary financial products</h1>
<p>Powered by the largest financial network</p>
<button class="pill">Start building</button>
</div>
<div class="stats">
<div class="stat"><b>1 in 2</b><span>banked adults in the U.S.</span></div>
<div class="stat"><b>1M+</b><span>daily connections</span></div>
<div class="stat"><b>12,000</b><span>financial institutions</span></div>
</div>
<div class="cards">
<div class="card"><div class="swatch" style="background:#02294b;"></div><h3>Auth</h3><p>Bank payments designed for fast, reliable connections.</p></div>
<div class="card"><div class="swatch" style="background:#468254;"></div><h3>Identity</h3><p>Verify identity and reduce fraud at account opening.</p></div>
<div class="card"><div class="swatch" style="background:#0a54c4;"></div><h3>Transfer</h3><p>Move money between accounts with confidence.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #53b232; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #53b232; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #10a83b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #53b232; color: #000000;
border: 1px solid #10a83b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #53b232; color: #000000;
border: 1px solid #6dbd51; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #48b033; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c1c1c; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.page { display:flex; flex-direction:column; width:960px; height:640px; }
/* nav */
nav { height:60px; flex:0 0 60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #cdcdcd; background:#ffffff; }
.logo { font-size:19px; font-weight:600; letter-spacing:-0.2px; color:#1c1c1c; }
.navlinks { display:flex; gap:26px; font-size:15.5px; color:#777573; }
.navlinks .active { color:#10a83b; font-weight:700; }
.btn-primary { background:#53b232; color:#ffffff; border:none; border-radius:100px;
padding:9px 22px; font-weight:700; font-size:13.5px; white-space:nowrap; cursor:default; }
.btn-primary.lg { padding:15px 36px; font-size:16px; height:52px; }
.btn-ghost { background:transparent; color:#10a83b; border:1.5px solid #53b232; border-radius:100px;
padding:12.5px 30px; font-weight:700; font-size:15px; white-space:nowrap; cursor:default; }
/* hero */
.hero { flex:0 0 172px; padding:24px 40px 0; display:flex; flex-direction:column; align-items:center;
gap:12px; text-align:center; background:#ffffff; }
.badge-green { display:inline-block; background:#53b232; color:#ffffff; border-radius:50px;
padding:6px 18px; font-size:12px; font-weight:700; letter-spacing:0.02em; }
.hero h1 { font-size:36px; font-weight:600; line-height:1.22; margin:0; color:#1c1c1c; max-width:640px; }
.hero p { font-size:15px; color:#212529; margin:0; max-width:460px; line-height:1.5; }
.row { display:flex; gap:14px; align-items:center; }
/* feature band */
.features { flex:0 0 226px; background:#f4f4f4; display:flex; gap:20px; padding:26px 40px; }
.card { flex:1; background:#ffffff; border-radius:8px; box-shadow:rgba(0,0,0,0.25) 0 0 5px 0;
padding:22px 20px; display:flex; flex-direction:column; gap:10px; }
.card .dot { width:38px; height:38px; border-radius:50%;
background:radial-gradient(circle at 30% 30%, #00c43e, #10a83b 70%); flex:0 0 38px; }
.card h4 { font-size:18px; font-weight:600; color:#53b232; margin:0; }
.card p { font-size:12.5px; color:#212529; line-height:1.5; margin:0; }
/* green band */
.band { flex:0 0 138px; background:#00a73c; display:flex; flex-direction:column; align-items:center;
justify-content:center; gap:14px; padding:0 40px; }
.band h2 { color:#ffffff; font-size:22px; font-weight:600; margin:0; text-align:center; max-width:640px; }
.social { display:flex; gap:14px; }
.chip { width:42px; height:42px; border-radius:200px; background:#f4f4f4; color:#00c43e;
display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
/* footer */
footer { flex:0 0 44px; border-top:1px solid #cdcdcd; padding:0 40px; display:flex;
align-items:center; justify-content:space-between; font-size:11.5px; color:#777573; background:#ffffff; }
</style></head>
<body>
<div class="page">
<nav>
<div class="logo">iPASS MONEY</div>
<div class="navlinks">
<span class="active">Pay</span>
<span>Transfer</span>
<span>Transit</span>
<span>Rewards</span>
</div>
<button class="btn-primary">Get the App</button>
</nav>
<section class="hero">
<span class="badge-green">Cross-border PayPay now live</span>
<h1>Achieve simple, free living.</h1>
<p>Pay, transfer, and tap through transit — all from one green wallet built for everyday commuters.</p>
<div class="row">
<button class="btn-primary lg">Download the App</button>
<button class="btn-ghost">See how it works</button>
</div>
</section>
<section class="features">
<div class="card">
<span class="dot"></span>
<h4>Instant top-up</h4>
<p>Reload your balance from any linked bank account in seconds, no fees attached.</p>
</div>
<div class="card">
<span class="dot"></span>
<h4>Zero-fee transfers</h4>
<p>Send money between iPASS MONEY accounts anytime, anywhere, free of charge.</p>
</div>
<div class="card">
<span class="dot"></span>
<h4>Tap-to-ride transit</h4>
<p>One card for MRT, bus, and rail — auto top-up keeps every gate green.</p>
</div>
</section>
<section class="band">
<h2>Earn Green Points every time you ride public transit.</h2>
<div class="social">
<span class="chip">FB</span>
<span class="chip">LN</span>
<span class="chip">YT</span>
<span class="chip">IG</span>
</div>
</section>
<footer>
<span>© iPASS MONEY</span>
<span>Payments · Transit · Transfers · Rewards</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #d80c18; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #d80c18; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e88c92; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c00b15; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #d80c18; color: #ffffff;
border: 1px solid #c00b15; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #d80c18; color: #f5f5f5;
border: 1px solid #dd313b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e88c92; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d40c18; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#191919; box-sizing:border-box;
font-family:"Pretendard Variable", -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.nav .brand { font-weight:700; font-size:18px; color:#d80c18; }
.search { flex:1; max-width:380px; margin:0 20px; height:36px; border:1px solid #e5e5e5; border-radius:999px;
display:flex; align-items:center; padding:0 16px; font-size:14px; color:#999; background:#f6f6f6; }
.navbtn { background:#d80c18; color:#fff; border-radius:6px; padding:8px 16px; font-size:13px; font-weight:500; }
.chiprow { display:flex; gap:8px; padding:12px 24px 0; }
.chip { border:1px solid #e5e5e5; border-radius:999px; padding:6px 14px; font-size:12px; color:#666; }
.chip.sel { background:#191919; color:#fff; border-color:#191919; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; padding:14px 24px 0; }
.card { border-radius:6px; overflow:hidden; }
.thumb { position:relative; aspect-ratio:81/100; background:#f6f6f6; }
.thumb .ph { position:absolute; inset:0; }
.p1{background:linear-gradient(150deg,#e9ecf5,#d3d9ea);} .p2{background:linear-gradient(150deg,#f5ece0,#ecdcc4);}
.p3{background:linear-gradient(150deg,#e6f5ec,#c8e8d4);} .p4{background:linear-gradient(150deg,#f5e0e6,#ecc4d0);} .p5{background:linear-gradient(150deg,#e0f0f5,#c4dfec);}
.heart { position:absolute; top:8px; right:8px; width:18px; height:18px; }
.chiptag { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; color:#fff; border-radius:6px; padding:2px 6px; }
.safe{background:#5558a8;} .info{background:#027aff;} .care{background:#ffe1a6; color:#191919;}
.meta { padding:8px 2px 0; }
.cprice { font-size:15px; font-weight:700; }
.ctitle { font-size:13px; color:#666; margin:2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmeta { font-size:11px; color:#999; }
</style></head>
<body>
<nav class="nav">
<div class="brand">Bunjang</div>
<div class="search">Search sneakers, phones, K-pop goods…</div>
<button class="navbtn">Sell</button>
</nav>
<div class="chiprow">
<div class="chip sel">All</div><div class="chip">Sneakers</div><div class="chip">Phones</div><div class="chip">K-pop</div><div class="chip">Beauty</div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="ph p1"></div><span class="chiptag safe">Safe Payment</span><div class="heart"></div></div>
<div class="meta"><div class="cprice">₩128,000</div><div class="ctitle">Nike Dunk Low Panda 260</div><div class="cmeta">19 hours ago · Seoul · Likes 12</div></div></div>
<div class="card"><div class="thumb"><div class="ph p2"></div><span class="chiptag info">Price Check</span><div class="heart"></div></div>
<div class="meta"><div class="cprice">₩640,000</div><div class="ctitle">iPhone 14 Pro 128GB</div><div class="cmeta">2 hours ago · Gyeonggi · Likes 31</div></div></div>
<div class="card"><div class="thumb"><div class="ph p3"></div><div class="heart"></div></div>
<div class="meta"><div class="cprice">₩45,000</div><div class="ctitle">K-pop Album (Sealed)</div><div class="cmeta">5 hours ago · Incheon · Likes 8</div></div></div>
<div class="card"><div class="thumb"><div class="ph p4"></div><span class="chiptag care">Authenticated</span><div class="heart"></div></div>
<div class="meta"><div class="cprice">₩890,000</div><div class="ctitle">Chanel Classic Card Wallet</div><div class="cmeta">1 day ago · Busan · Likes 44</div></div></div>
<div class="card"><div class="thumb"><div class="ph p5"></div><div class="heart"></div></div>
<div class="meta"><div class="cprice">₩22,000</div><div class="ctitle">iPad Case (New)</div><div class="cmeta">30 min ago · Daejeon · Likes 3</div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111827;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111827;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #111827; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.5px; background: #059669; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.5px; background: #ffffff; color: #111827;
border: 1px solid #059669; border-radius: 0px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111827;
border: 1px solid #e5e7eb; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.5px; background: #059669; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'FuturaNow',Arial,sans-serif; background:#ffffff; color:#374151; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e5e7eb;}
.logo{font-size:20px;font-weight:600;color:#111827;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:0.3px;color:#111827;}
.navlinks .on{color:#059669;border-bottom:2px solid #059669;padding-bottom:20px;}
.hero{height:220px;display:flex;align-items:center;background:#111827;padding:0 32px;}
.herotext{width:400px;}
.script{font-family:'English111AdagioBT',Georgia,serif;font-size:22px;color:#059669;margin-bottom:6px;}
.herotext h1{font-size:36px;font-weight:600;color:#f9fafb;margin:0 0 12px;letter-spacing:-0.4px;line-height:1.15;}
.cta{display:inline-block;background:#059669;color:#fff;font-size:14px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;padding:14px 24px;}
.penwrap{width:280px;height:150px;margin-left:auto;position:relative;}
.pen{position:absolute;left:40px;top:20px;width:200px;height:18px;border-radius:9999px;background:linear-gradient(90deg,#111827,#374151);transform:rotate(-8deg);}
.nib{position:absolute;left:36px;top:12px;width:30px;height:30px;border-radius:9999px;background:#059669;}
.section{padding:18px 32px 0;}
.sectitle{font-size:18px;font-weight:500;color:#111827;margin-bottom:12px;}
.nibrow{display:flex;gap:8px;margin-bottom:16px;}
.nibpill{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;border:1px solid #e5e7eb;border-radius:9999px;padding:6px 14px;color:#374151;}
.nibpill.active{background:#111827;color:#fff;border-color:#111827;}
.grid{display:flex;gap:14px;}
.card{width:150px;background:#f3f4f6;border:1px solid #e5e7eb;padding:10px;}
.thumb{aspect-ratio:1/1;margin-bottom:8px;}
.pname{font-size:15px;font-weight:500;color:#111827;}
.swatches{display:flex;gap:4px;margin-top:6px;}
.sw{width:16px;height:16px;border-radius:9999px;border:1px solid #d1d5db;}
.pprice{font-size:20px;font-weight:600;color:#111827;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#111827;color:#9ca3af;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Lamy</div>
<div class="navlinks"><div class="on">Fountain Pens</div><div>Rollerballs</div><div>Ink</div><div>Accessories</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="script">The Classic Returns</div>
<h1>An instrument for the act of writing.</h1>
<div class="cta">Shop Safari</div>
</div>
<div class="penwrap"><div class="pen"></div><div class="nib"></div></div>
</div>
<div class="section">
<div class="sectitle">Choose Your Nib</div>
<div class="nibrow">
<div class="nibpill">EF</div><div class="nibpill active">F</div><div class="nibpill">M</div><div class="nibpill">B</div><div class="nibpill">BB</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#111827,#059669)"></div><div class="pname">LAMY Safari</div><div class="swatches"><div class="sw" style="background:#059669"></div><div class="sw" style="background:#111827"></div><div class="sw" style="background:#dc2626"></div></div><div class="pprice">$32.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#374151,#111827)"></div><div class="pname">LAMY 2000</div><div class="swatches"><div class="sw" style="background:#444444"></div></div><div class="pprice">$225.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#059669,#374151)"></div><div class="pname">LAMY AL-star</div><div class="swatches"><div class="sw" style="background:#059669"></div><div class="sw" style="background:#9ca3af"></div></div><div class="pprice">$42.00</div></div>
</div>
</div>
<div class="footer"><span>© Lamy</span><span>Nib Guide · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0f0f0f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0f0f0f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #0f0f0f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676e72; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #4195b6; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #4195b6;
border: 1px solid #4195b6; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #0f0f0f;
border: 1px solid #c3c3c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676e72; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.8px; background: #f1e5b8; color: #444444;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0f0f0f; box-sizing:border-box;
font-family:'Outfit',sans-serif; }
* { box-sizing:border-box; }
.display { font-family:'Tenor Sans',Georgia,serif; }
nav { height:60px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-size:19px; font-weight:600; color:#0f0f0f; }
.navlinks { display:flex; gap:22px; font-size:12px; color:#676e72; }
.navlinks span.on { color:#4195b6; font-weight:600; }
.cart-btn { background:#4195b6; color:#fff; border-radius:9999px; padding:8px 18px; font-size:12px; font-weight:600; }
.hero-strip { height:8px; background:linear-gradient(90deg,#ffc0cb,#ff0000,#6a0dad,#964b00,#ffff00,#4195b6,#f47d32); }
.wrap { display:flex; height:512px; padding:22px 30px; gap:28px; }
.swatchpanel { width:280px; flex-shrink:0; background:#f1e5b8; border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:10px; }
.swatchpanel .label { font-size:11px; color:#444444; text-transform:uppercase; letter-spacing:.05em; }
.swatch-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.swatch { width:100%; aspect-ratio:1; border-radius:9999px; border:2px solid #ffffff; box-shadow:0 0 0 1px #dedede; }
.swatch.on { box-shadow:0 0 0 2px #4195b6; }
.s1{background:#ffc0cb}.s2{background:#ff0000}.s3{background:#6a0dad}.s4{background:#964b00}
.s5{background:#ffff00}.s6{background:#4195b6}.s7{background:#e2a764}.s8{background:#f47d32}
.s9{background:#d9bb92}.s10{background:#6a0dad}.s11{background:#28a99e}.s12{background:#111827}
.count-note { font-size:11px; color:#444; }
.info { flex:1; display:flex; flex-direction:column; gap:12px; }
.info h1 { font-family:'Tenor Sans',Georgia,serif; font-size:26px; font-weight:400; margin:0; }
.sub { font-size:13px; color:#676e72; }
.price { font-size:22px; font-weight:600; color:#0f0f0f; }
.opt-row { display:flex; gap:8px; }
.opt { border:1px solid #dedede; border-radius:12px; padding:8px 16px; font-size:12px; color:#323232; }
.opt.on { background:#4195b6; color:#fff; border-color:#4195b6; }
.desc { font-size:13px; color:#323232; line-height:1.6; max-width:500px; }
.amber-note { background:#e2a764; color:#fff; font-size:11px; padding:6px 12px; border-radius:9999px; display:inline-block; width:fit-content; }
.buy-row { display:flex; gap:10px; margin-top:auto; }
.btn-buy { flex:1; background:#4195b6; color:#fff; border:none; border-radius:9999px; padding:14px; font-size:14px; font-weight:600; }
.btn-wish { border:1.5px solid #0f0f0f; border-radius:9999px; padding:14px 20px; font-size:14px; }
footer { height:60px; background:#f7f7f7; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; font-size:11px; color:#676e72; }
</style></head>
<body>
<nav>
<p class="brand">12x12 Cardstock Shop</p>
<div class="navlinks"><span>By Color</span><span class="on">Multipacks</span><span>By Weight</span><span>Finishes</span></div>
<span class="cart-btn">Cart · 3</span>
</nav>
<div class="hero-strip"></div>
<div class="wrap">
<div class="swatchpanel">
<span class="label">Select Colors</span>
<div class="swatch-grid">
<div class="swatch s1"></div><div class="swatch s2 on"></div><div class="swatch s3"></div><div class="swatch s4"></div><div class="swatch s5"></div><div class="swatch s6"></div>
<div class="swatch s7"></div><div class="swatch s8"></div><div class="swatch s9"></div><div class="swatch s10"></div><div class="swatch s11"></div><div class="swatch s12"></div>
</div>
<span class="count-note">48 colors · flip through the chip book</span>
</div>
<div class="info">
<h1 class="display">Rainbow Multipack — 12x12 Cardstock</h1>
<span class="sub">Smooth Finish · 65lb Cover Weight · 48 Sheets</span>
<span class="price">$18.50</span>
<div class="opt-row">
<span class="opt on">Smooth</span>
<span class="opt">Linen</span>
<span class="opt">Glitter</span>
</div>
<p class="desc">A full-spectrum ream for card makers and scrapbookers — every hue from candy pink to royal purple, cut true to size and acid-free for archival projects.</p>
<span class="amber-note">Ships in kraft paper wrap</span>
<div class="buy-row">
<button class="btn-buy">Add to Cart</button>
<button class="btn-wish">♡</button>
</div>
</div>
</div>
<footer><span>© 12x12 Cardstock Shop</span><span>Color Guide · Bulk Orders · Contact</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f4ed; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f4ed; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #787774; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c1c1c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f4ed; color: #1c1c1c;
border: 1px solid #1c1c1c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f7f4ed; color: #111111;
border: 1px solid #d2d0ca; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787774; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d4d1cc; color: #1c1c1c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f4ed; color:#1c1c1c; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:600; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#1c1c1c; }
.btn-dark { background:#1c1c1c; color:#fcfbf8; border:none; border-radius:6px; padding:8px 16px; font-size:13px;
box-shadow:rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset; }
.hero { text-align:center; padding:16px 40px 10px; }
.hero h1 { font-size:44px; font-weight:600; letter-spacing:-1.2px; line-height:1.05; margin:0 0 10px; }
.hero p { font-size:13px; color:#5f5f5d; margin:0 0 14px; }
.chatinput { margin:0 auto 12px; width:520px; background:#fff; border:1px solid #eceae4; border-radius:16px; padding:14px 16px; text-align:left; }
.chatinput .ph { font-size:13px; color:#5f5f5d; margin-bottom:10px; }
.chippills { display:flex; gap:6px; flex-wrap:wrap; }
.chip { border:1px solid #eceae4; border-radius:9999px; padding:5px 12px; font-size:11px; color:#1c1c1c; }
.iconbtn { width:26px; height:26px; border-radius:9999px; background:#f7f4ed; display:inline-flex; align-items:center; justify-content:center; }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:8px 40px 14px; }
.template { background:#fff; border:1px solid #eceae4; border-radius:12px; overflow:hidden; }
.template .img { height:70px; background:linear-gradient(135deg,#f4c5a8,#c8b8e0 60%,#a8c8e8); }
.template .cap { padding:8px 10px; font-size:11px; font-weight:400; }
.statsbar { display:flex; justify-content:space-around; padding:10px 40px 16px; }
.statitem { text-align:center; }
.statitem .n { font-size:26px; font-weight:600; letter-spacing:-0.6px; }
.statitem .l { font-size:11px; color:#5f5f5d; }
footer { margin-top:auto; padding:12px 40px; border-top:1px solid #eceae4; display:flex; justify-content:space-between;
font-size:11px; color:#5f5f5d; }
</style></head>
<body>
<nav>
<span class="brand">Lovable</span>
<div class="navlinks"><span>Community</span><span>Enterprise</span><span>Pricing</span></div>
<button class="btn-dark">Start Building</button>
</nav>
<section class="hero">
<h1>Build something Lovable</h1>
<p>Create apps and websites by chatting with AI.</p>
</section>
<div class="chatinput">
<div class="ph">Ask Lovable to create a landing page for my startup...</div>
<div class="chippills">
<span class="chip"><span class="iconbtn">+</span></span>
<span class="chip">Dashboard</span>
<span class="chip">Landing page</span>
<span class="chip">Mobile app</span>
</div>
</div>
<div class="gallery">
<div class="template"><div class="img"></div><div class="cap">Portfolio site</div></div>
<div class="template"><div class="img" style="background:linear-gradient(135deg,#a7e5d3,#c8b8e0)"></div><div class="cap">Habit tracker</div></div>
<div class="template"><div class="img" style="background:linear-gradient(135deg,#e8b8c4,#a8c8e8)"></div><div class="cap">Recipe finder</div></div>
</div>
<div class="statsbar">
<div class="statitem"><div class="n">10M+</div><div class="l">Apps built</div></div>
<div class="statitem"><div class="n">2M+</div><div class="l">Users</div></div>
<div class="statitem"><div class="n">180+</div><div class="l">Countries</div></div>
</div>
<footer>
<span>© Lovable</span>
<span>Lovable · Community · Enterprise · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbf9f4; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbf9f4; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #5f6368; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #006fcf; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #fbf9f4; color: #231f20;
border: 1px solid #006fcf; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fbf9f4; color: #231f20;
border: 1px solid #c5c2bf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5f6368; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #6bbbae; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#fbf9f4; color:#242833; box-sizing:border-box; font-family:'Maven Pro','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:center; position:relative; padding:0 32px; }
.brand { font-size:20px; font-weight:700; margin:0; color:#006fcf; }
.navlinks { position:absolute; left:32px; display:flex; gap:20px; font-size:14px; font-weight:500; text-transform:uppercase; letter-spacing:0.5px; color:#231f20; }
.search-pill { position:absolute; right:32px; background:#fff; border:1px solid #dedede; border-radius:999px; padding:10px 20px; font-size:13px; color:#5f6368; }
.main { display:flex; gap:20px; padding:12px 32px; height:388px; }
.gallery { width:400px; background:#fff; border-radius:24px; display:flex; align-items:center; justify-content:center; position:relative; }
.diaper-shape { width:200px; height:130px; background:linear-gradient(160deg,#f48120,#006fcf); border-radius:999px; }
.badge-eco { position:absolute; top:20px; left:20px; background:#6bbbae; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:2px 10px; border-radius:999px; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; }
.info h1 { font-size:24px; font-weight:600; margin:0; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:22px; font-weight:600; }
.price-sale { color:#f48120; }
.desc { font-size:14px; line-height:1.5; color:#5f6368; max-width:420px; }
.tag-row { display:flex; gap:8px; margin-top:2px; }
.cat-tag { background:#f1f1f1; color:#5f6368; font-size:12px; padding:6px 14px; border-radius:999px; }
.cat-tag.active { background:#006fcf; color:#fff; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:44px; background:#006fcf; color:#fff; border:none; border-radius:8px; font-weight:600; font-size:15px; }
.btn-secondary { flex:1; height:44px; background:#fbf9f4; color:#231f20; border:2px solid #006fcf; border-radius:8px; font-weight:600; font-size:15px; }
footer { position:absolute; bottom:0; left:0; right:0; background:#f1f1f1; padding:14px 32px; display:flex; justify-content:space-between; font-size:12px; color:#242833; }
</style></head>
<body>
<nav>
<div class="navlinks"><span>Diapers</span><span>Wipes</span><span>Bath</span></div>
<p class="brand">Bambo Nature</p>
<div class="search-pill">🔍 Search</div>
</nav>
<div class="main">
<div class="gallery">
<span class="badge-eco">Eco Certified</span>
<div class="diaper-shape"></div>
</div>
<div class="info">
<h1>Premium Eco Diapers, Size 3</h1>
<div class="price-row">
<span class="price price-sale">$21.99</span>
</div>
<p class="desc">Made with FSC-certified sustainable wood pulp and free from chlorine bleaching, lotions, and fragrances — soft next-to-skin comfort for sensitive newborn skin.</p>
<div class="tag-row">
<span class="cat-tag active">Newborn</span>
<span class="cat-tag">Size 1</span>
<span class="cat-tag">Size 2</span>
<span class="cat-tag">Size 3</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Subscribe & Save</button>
</div>
</div>
</div>
<footer>
<span>© Bambo Nature</span>
<span>Bambo Nature · Sustainability · Support · Connect</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #21C25E; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #21C25E; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-size: 20px; font-weight:700; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-size: 12px; font-weight:400; line-height:1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #1A1A1A; color: #ffffff;
border: none; border-radius: 999; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #21C25E; color: #1A1A1A;
border: 1px solid #1A1A1A; border-radius: 999;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #21C25E; color: #000000;
border: 1px solid #56cf84; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #20aa54; color: #1A1A1A;
border-radius: 999; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #FFFFFF; color: #1A1A1A; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #E5E7EB; background:#FFFFFF; }
.brand { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:700; color:#1A1A1A; }
.brand .mark { width:24px; height:24px; border-radius:8px; background:#11C76F; color:#FFFFFF; font-weight:700;
font-size:13px; display:flex; align-items:center; justify-content:center; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#4B5563; font-weight:500; }
.btn-cta { background:linear-gradient(135deg, #21C25E, #1AA34E); color:#FFFFFF; border:none; border-radius:999px;
padding:9px 20px; font-weight:700; font-size:13px; box-shadow:0 4px 16px rgba(33,194,94,0.24); }
.hero { position:relative; height:344px; background:linear-gradient(180deg, #1A1A2E 0%, #16213E 100%);
display:grid; grid-template-columns:1.15fr 0.85fr; align-items:center; padding:0 32px; overflow:hidden; }
.hero::before { content:''; position:absolute; width:260px; height:260px; border-radius:50%;
background:radial-gradient(circle, rgba(33,194,94,0.18), transparent 70%); top:-90px; right:120px; }
.hero-copy { position:relative; z-index:1; display:flex; flex-direction:column; gap:14px; padding-right:20px; }
.eyebrow { display:inline-flex; width:fit-content; align-items:center; gap:6px; background:rgba(33,194,94,0.16);
color:#4CD97F; font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
padding:5px 12px; border-radius:999px; }
.hero-copy h1 { font-size:36px; font-weight:700; color:#FFFFFF; margin:0; line-height:1.14; letter-spacing:-0.4px; }
.hero-copy h1 span { color:#4CD97F; }
.hero-copy p { font-size:14.5px; color:rgba(255,255,255,0.62); margin:0; max-width:380px; line-height:1.6; }
.hero-actions { display:flex; gap:10px; margin-top:6px; }
.btn-outline { background:transparent; color:#FFFFFF; border:1.5px solid rgba(255,255,255,0.3); border-radius:999px;
padding:9px 20px; font-weight:600; font-size:13px; }
.phone { position:relative; z-index:1; justify-self:center; width:212px; height:298px; background:#1A1A2E;
border:6px solid #2D2D3A; border-radius:28px; box-shadow:0 30px 60px rgba(0,0,0,0.45); padding:14px 14px 16px;
display:flex; flex-direction:column; gap:12px; }
.ph-appbar { display:flex; align-items:center; justify-content:space-between; }
.ph-appbar .who { font-size:10.5px; color:rgba(255,255,255,0.5); }
.ph-appbar .ic { width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,0.12); }
.ph-balance-label { font-size:10px; color:rgba(255,255,255,0.45); }
.ph-balance { font-size:23px; font-weight:700; color:#FFFFFF; letter-spacing:-0.4px; }
.ph-quick { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.qa { display:flex; flex-direction:column; align-items:center; gap:4px; }
.qa .circ { width:34px; height:34px; border-radius:50%; background:rgba(33,194,94,0.16); color:#4CD97F;
display:flex; align-items:center; justify-content:center; font-size:14px; }
.qa span { font-size:8px; color:rgba(255,255,255,0.55); font-weight:600; }
.ph-tx { display:flex; flex-direction:column; gap:8px; margin-top:2px; }
.tx-row { display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,0.05);
border-radius:10px; padding:7px 9px; }
.tx-row .who { display:flex; align-items:center; gap:7px; }
.tx-dot { width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,0.14); flex:0 0 18px; }
.tx-row .name { font-size:10px; color:#FFFFFF; font-weight:600; }
.tx-row .amt { font-size:10px; font-weight:700; }
.amt.pos { color:#4CD97F; } .amt.neg { color:rgba(255,255,255,0.6); }
.products { padding:22px 32px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.pcard { background:#F5F7FA; border:1px solid #E5E7EB; border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:7px; }
.pcard .ic { width:32px; height:32px; border-radius:10px; background:#E6F9ED; color:#1AA34E; display:flex;
align-items:center; justify-content:center; font-size:16px; }
.pcard h3 { margin:0; font-size:13.5px; font-weight:700; color:#1A1A1A; }
.pcard p { margin:0; font-size:11.5px; color:#6B7280; line-height:1.45; }
.tiers { padding:16px 32px 0; display:flex; align-items:center; gap:10px; }
.tiers .label { font-size:11px; color:#9CA3AF; font-weight:600; margin-right:2px; }
.tier-chip { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:#374151;
background:#FFFFFF; border:1px solid #E5E7EB; border-radius:999px; padding:5px 12px 5px 6px; }
.tier-dot { width:16px; height:16px; border-radius:50%; }
.td-gold { background:#C9A96E; } .td-plat { background:#8C8C8C; } .td-black { background:#1A1A1A; }
</style>
<nav>
<div class="brand"><span class="mark">P</span>PicPay</div>
<div class="navlinks"><span>Account</span><span>Pix</span><span>Card</span><span>Invest</span><span>Business</span></div>
<button class="btn-cta">Get the app</button>
</nav>
<section class="hero">
<div class="hero-copy">
<span class="eyebrow">● 66M+ customers</span>
<h1>Your money, <span>uncomplicated</span></h1>
<p>One app for your digital account, no-fee credit card, instant Pix payments, and investments — built simple, built for you.</p>
<div class="hero-actions">
<button class="btn-cta">Open free account</button>
<button class="btn-outline">See Pix</button>
</div>
</div>
<div class="phone">
<div class="ph-appbar"><span class="who">Good evening</span><span class="ic"></span></div>
<div>
<div class="ph-balance-label">Available balance</div>
<div class="ph-balance">R$ 2,481.90</div>
</div>
<div class="ph-quick">
<div class="qa"><span class="circ">⇄</span><span>Pix</span></div>
<div class="qa"><span class="circ">$</span><span>Pay</span></div>
<div class="qa"><span class="circ">↔</span><span>Transfer</span></div>
<div class="qa"><span class="circ">▦</span><span>QR</span></div>
</div>
<div class="ph-tx">
<div class="tx-row"><div class="who"><span class="tx-dot"></span><span class="name">Pix received</span></div><span class="amt pos">+R$120.00</span></div>
<div class="tx-row"><div class="who"><span class="tx-dot"></span><span class="name">Grocery store</span></div><span class="amt neg">-R$58.30</span></div>
</div>
</div>
</section>
<section class="products">
<div class="pcard"><span class="ic">⇄</span><h3>Pix, instantly</h3><p>Send and receive money in seconds, any time, any day.</p></div>
<div class="pcard"><span class="ic">▭</span><h3>No-fee credit card</h3><p>Build your limit with a card that charges zero annual fee.</p></div>
<div class="pcard"><span class="ic">▲</span><h3>Investments</h3><p>Grow your balance with simple, transparent investment options.</p></div>
</section>
<section class="tiers">
<span class="label">Card tiers</span>
<span class="tier-chip"><span class="tier-dot td-gold"></span>Gold</span>
<span class="tier-chip"><span class="tier-dot td-plat"></span>Platinum</span>
<span class="tier-chip"><span class="tier-dot td-black"></span>Black</span>
</section>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.5px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; margin: 0; color: #575757; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #003665; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #003665;
border: 1px solid #003665; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c2c2c2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #575757; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e0b20d; color: #003665;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f7f7; font-family:'Roboto Slab',Georgia,serif; color:#323232; }
*{box-sizing:border-box;}
.ticker{height:26px;background:#222222;display:flex;align-items:center;padding:0 34px;gap:26px;font-family:Consolas,'Courier New',monospace;font-size:12px;color:#e6cc3d;}
.ticker span.dn{color:#dc1d2c;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#003665;}
.logo{font-family:'Roboto Slab',Georgia,serif;font-size:19px;font-weight:700;color:#fff;}
.navlinks{font-family:'Open Sans',Arial,sans-serif;display:flex;gap:20px;font-size:12px;font-weight:600;color:#e6cc3d;}
.hero{height:224px;display:flex;background:#ffffff;}
.htext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 34px;}
.htext .k{font-family:'Open Sans',Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#dc1d2c;margin-bottom:10px;}
.htext h1{font-size:24px;font-weight:700;color:#003665;margin:0 0 10px;line-height:1.28;}
.htext p{font-family:'Open Sans',Arial,sans-serif;font-size:13px;line-height:1.5;color:#323232;margin:0 0 16px;max-width:280px;}
.btn{font-family:'Open Sans',Arial,sans-serif;width:fit-content;background:#e0b20d;color:#003665;font-size:13px;font-weight:700;padding:11px 22px;}
.himg{width:54%;position:relative;background:#f0f0f0;}
.coin{position:absolute;left:150px;top:40px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#e6cc3d,#c1a91e 70%);box-shadow:0 8px 20px rgba(193,169,30,.4);}
.coin2{position:absolute;left:200px;top:70px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f0f0f0,#b0b0b0 70%);}
.seclabel{font-family:'Open Sans',Arial,sans-serif;padding:14px 34px 8px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#575757;}
.grid{display:flex;gap:12px;padding:0 34px;font-family:'Open Sans',Arial,sans-serif;}
.card{width:150px;background:#fff;border:1px solid #d7d7d7;padding:9px;}
.thumb{height:74px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:600;color:#222222;height:30px;overflow:hidden;line-height:1.3;}
.price{font-size:13px;font-weight:700;color:#003665;margin-top:4px;}
.spot{font-family:Consolas,monospace;font-size:9.5px;color:#c1a91e;}
</style>
<div class="ticker">
<span>AU $2,384.10 <span class="dn">▼0.4%</span></span>
<span>AG $28.72 <span style="color:#e6cc3d;">▲1.1%</span></span>
<span>PT $958.30 <span class="dn">▼0.2%</span></span>
</div>
<div class="nav">
<div class="logo">SD Bullion</div>
<div class="navlinks"><div>Gold</div><div>Silver</div><div>Platinum</div><div>Spot Prices</div></div>
</div>
<div class="hero">
<div class="htext">
<div class="k">Live Market Pricing</div>
<h1>Buy metal at the price you see.</h1>
<p>Gold and silver bullion priced directly off live spot, shipped insured.</p>
<div class="btn">Shop Gold Bars</div>
</div>
<div class="himg"><div class="coin"></div><div class="coin2"></div></div>
</div>
<div class="seclabel">Trending Bullion</div>
<div class="grid">
<div class="card"><div class="spot">SPOT +$4.20/oz</div><div class="thumb" style="background:linear-gradient(140deg,#e6cc3d,#c1a91e)"></div><div class="pname">1 oz Gold Bar</div><div class="price">$2,428.60</div></div>
<div class="card"><div class="spot">SPOT +$1.80/oz</div><div class="thumb" style="background:linear-gradient(140deg,#d7d7d7,#969696)"></div><div class="pname">1 oz Silver Round</div><div class="price">$30.52</div></div>
<div class="card"><div class="spot">LIMITED MINTAGE</div><div class="thumb" style="background:linear-gradient(140deg,#dc1d2c,#c1a91e)"></div><div class="pname">American Eagle Coin</div><div class="price">$2,510.00</div></div>
<div class="card"><div class="spot">SPOT +$0.90/oz</div><div class="thumb" style="background:linear-gradient(140deg,#4172d5,#003665)"></div><div class="pname">10 oz Silver Bar</div><div class="price">$298.40</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 2.5rem; font-weight: 700; line-height: 1.15; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 2.5rem; font-weight: 700; line-height: 1.15; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #EC0000; color: #ffffff;
border: none; border-radius: 999px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #FFFFFF; color: #EC0000;
border: 1px solid #EC0000; border-radius: 999px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #FFFFFF; color: #000000;
border: 1px solid #bfbfbf; border-radius: 16px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #fcdbdb; color: #EC0000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif; background: #FFFFFF; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
nav { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 36px; }
.brand { display: flex; align-items: center; gap: 10px; }
.flame { width: 26px; height: 30px; background: #EC0000; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.brand p { margin: 0; font-size: 19px; font-weight: 700; color: #000; }
.navlinks { display: flex; gap: 28px; font-size: 13px; color: #000; opacity: 0.65; font-weight: 600; }
.cta { background: #EC0000; color: #fff; border: none; border-radius: 24px; padding: 10px 22px; font-weight: 700; font-size: 13px; }
.hero { display: flex; height: 380px; background: #DEEDF2; }
.hero-copy { width: 420px; padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.hero-copy .kicker { font-size: 12px; font-weight: 700; color: #990000; text-transform: uppercase; letter-spacing: 0.05em; }
.hero-copy h1 { font-size: 40px; font-weight: 700; color: #000; line-height: 1.1; margin: 10px 0 12px; }
.hero-copy p { font-size: 15px; color: #333; line-height: 1.5; margin: 0 0 20px; max-width: 340px; }
.rowbtn { display: flex; gap: 10px; }
.btn-red { background: #EC0000; color: #fff; border: none; border-radius: 24px; padding: 12px 22px; font-weight: 700; font-size: 14px; }
.btn-out { background: transparent; color: #000; border: 1.5px solid #000; border-radius: 24px; padding: 11px 22px; font-weight: 700; font-size: 14px; }
.appcard { flex: 1; display: flex; align-items: center; justify-content: center; }
.phone { width: 260px; height: 320px; background: #ffffff; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.14); padding: 20px; }
.phone .greet { font-size: 11px; color: #999; }
.phone .name { font-size: 14px; font-weight: 700; color: #000; margin-bottom: 14px; }
.balcard { background: linear-gradient(135deg, #EC0000, #990000); border-radius: 16px; padding: 16px; color: #fff; margin-bottom: 14px; }
.balcard .lbl { font-size: 10px; opacity: 0.8; }
.balcard .amt { font-size: 22px; font-weight: 700; margin-top: 4px; }
.quick { display: flex; gap: 10px; }
.qbtn { flex: 1; text-align: center; }
.qbtn .ic { width: 34px; height: 34px; border-radius: 50%; background: #FBF1EA; margin: 0 auto 6px; }
.qbtn span { font-size: 9px; color: #333; font-weight: 700; }
.ramp { padding: 30px 36px; }
.ramp h2 { font-size: 18px; font-weight: 700; color: #000; margin: 0 0 14px; }
.swatches { display: flex; gap: 0; border-radius: 10px; overflow: hidden; height: 60px; }
.sw { flex: 1; display: flex; align-items: flex-end; padding: 6px; }
.sw span { font-size: 10px; font-weight: 700; }
.principles { display: flex; gap: 16px; padding: 4px 36px 30px; }
.p { flex: 1; padding: 14px 16px; border-radius: 12px; background: #FBF1EA; }
.p h4 { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: #000; }
.p p { margin: 0; font-size: 11px; color: #666; }
</style>
<nav>
<div class="brand"><div class="flame"></div><p>Flame (Santander)</p></div>
<div class="navlinks"><span>Accounts</span><span>Cards</span><span>Investments</span><span>Support</span></div>
<button class="cta">Open account</button>
</nav>
<div class="hero">
<div class="hero-copy">
<span class="kicker">Simple. Personal. Fair.</span>
<h1>Banking that moves with purpose.</h1>
<p>Every animation informs, guides or celebrates — never just decoration. That's the Flame way.</p>
<div class="rowbtn"><button class="btn-red">Open an account</button><button class="btn-out">See features</button></div>
</div>
<div class="appcard">
<div class="phone">
<div class="greet">Good afternoon</div>
<div class="name">Welcome back</div>
<div class="balcard"><div class="lbl">Available balance</div><div class="amt">$ 4,230.90</div></div>
<div class="quick">
<div class="qbtn"><div class="ic"></div><span>Transfer</span></div>
<div class="qbtn"><div class="ic"></div><span>Pay</span></div>
<div class="qbtn"><div class="ic"></div><span>Invest</span></div>
<div class="qbtn"><div class="ic"></div><span>Cards</span></div>
</div>
</div>
</div>
</div>
<div class="ramp">
<h2>Red ramp — named by global cities</h2>
<div class="swatches">
<div class="sw" style="background:#FBF1EA"><span style="color:#990000">Lisbon</span></div>
<div class="sw" style="background:#F5DECF"><span style="color:#990000">Rio</span></div>
<div class="sw" style="background:#EA6F5D"><span style="color:#fff">Madrid</span></div>
<div class="sw" style="background:#CC0000"><span style="color:#fff">Boston</span></div>
<div class="sw" style="background:#990000"><span style="color:#fff">London</span></div>
</div>
</div>
<div class="principles">
<div class="p"><h4>Purposeful motion</h4><p>Scale, opacity and timing are pre-defined by function.</p></div>
<div class="p"><h4>Three primaries</h4><p>Santander Red, sky and white — balanced, never overused.</p></div>
<div class="p"><h4>One system, 12 markets</h4><p>1,780+ components shared across the whole ecosystem.</p></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #6c5ce7; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #6c5ce7; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b7b0ef; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #a06cff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6c5ce7; color: #ffffff;
border: 1px solid #a06cff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #6c5ce7; color: #f5f5f5;
border: 1px solid #8274e9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b7b0ef; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #745feb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#6C5CE7; color:#1A1530; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; position:relative; overflow:hidden;
background:linear-gradient(160deg,#6C5CE7,#A06CFF); padding:24px 18px; }
.toprow { display:flex; justify-content:space-between; align-items:center; color:#fff; font-size:11px; font-weight:800; margin-bottom:18px; }
.flamepill { background:rgba(255,255,255,0.22); border-radius:999px; padding:5px 12px; font-weight:900; }
.pollcard { background:#fff; border-radius:28px; padding:22px 18px 18px; box-shadow:0 24px 50px -20px rgba(40,20,90,0.55); }
.emoji { font-size:38px; text-align:center; display:block; }
.question { font-size:19px; font-weight:900; text-align:center; margin:10px 0 4px; }
.pollcard .tagline { text-align:center; font-size:10px; font-weight:800; color:#7B4DFF; letter-spacing:0.4px; margin-bottom:14px; }
.choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choice { border-radius:20px; padding:16px 8px; text-align:center; font-weight:800; font-size:14px; color:#fff; }
.c1 { background:linear-gradient(135deg,#6C5CE7,#8B6CFF); }
.c2 { background:linear-gradient(135deg,#FF6CC8,#FF9CDB); }
.c3 { background:linear-gradient(135deg,#FFC93C,#FFB13C); color:#4A3300; }
.c4 { background:linear-gradient(135deg,#2BC48A,#4FD9A6); }
.shuffle { text-align:center; font-size:12px; font-weight:800; color:#7B4DFF; margin-top:14px; }
.dots { display:flex; justify-content:center; gap:6px; margin-top:16px; }
.dots span { width:22px; height:5px; border-radius:3px; background:rgba(255,255,255,0.35); }
.dots span.active { background:#fff; width:30px; }
.tabbar { position:absolute; bottom:16px; left:18px; right:18px; height:56px; border-radius:20px;
background:rgba(255,255,255,0.16); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:rgba(255,255,255,0.6); text-align:center; }
.tab.mid { width:44px; height:44px; border-radius:50%; background:#fff; color:#6C5CE7; font-size:20px; font-weight:900;
display:flex; align-items:center; justify-content:center; margin-top:-16px; box-shadow:0 8px 20px rgba(40,20,90,0.5); }
.tab.on { color:#fff; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; background:#fff; color:#1A1530; }
.brand { font-size:30px; font-weight:900; letter-spacing:-0.3px; margin:0; }
.brand span { color:#7B4DFF; }
.tag { font-size:14px; color:#6B6588; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:14px; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#6B6588; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:900; letter-spacing:-0.2px; }
.typeblock .t2 { font-size:13px; color:#6B6588; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:800; padding:6px 12px; border-radius:999px;
background:#F4F2FF; border:1px solid #ECE9FB; color:#6B6588; }
.footer { margin-top:auto; border-top:1px solid #ECE9FB; padding-top:16px; font-size:11px; color:#A29DB8; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="toprow"><span>Central High</span><span class="flamepill">🔥 128</span></div>
<div class="pollcard">
<span class="emoji">😄</span>
<div class="question">Who has the best smile?</div>
<div class="tagline">ANONYMOUS · BE NICE</div>
<div class="choices">
<div class="choice c1">Maya</div><div class="choice c2">Sofia</div>
<div class="choice c3">Jordan</div><div class="choice c4">Alex</div>
</div>
<div class="shuffle">🔄 Shuffle names</div>
</div>
<div class="dots"><span class="active"></span><span></span><span></span><span></span><span></span></div>
<div class="tabbar">
<div class="tab on">Polls</div><div class="tab">Inbox</div>
<div class="tab mid">+</div><div class="tab">School</div><div class="tab">You</div>
</div>
</div>
<div class="info">
<div>
<h1 class="brand">Gas (iOS)<span>.</span></h1>
<p class="tag">A candy-bright indigo world with one white card at a time — an anonymous compliment poll, answered one tap at a time.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#6C5CE7"></div><small>#6C5CE7</small></div>
<div class="sw"><div class="chip2" style="background:#FF6CC8"></div><small>#FF6CC8</small></div>
<div class="sw"><div class="chip2" style="background:#FFC93C"></div><small>#FFC93C</small></div>
<div class="sw"><div class="chip2" style="background:#2BC48A"></div><small>#2BC48A</small></div>
<div class="sw"><div class="chip2" style="background:#FF7A45"></div><small>#FF7A45</small></div>
</div>
<div class="typeblock">
<div class="t1">Who has the best smile? 😄</div>
<div class="t2">Nunito · 900 weight · a 50pt emoji headline crowns every card</div>
</div>
<div class="taglist">
<span>2×2 name grid</span><span>Flame currency</span><span>Shuffle names</span>
<span>No feed, no scroll</span><span>Purple-tinted shadows</span>
</div>
<div class="footer">Light-UI by design · one white poll card floats centered · finite, positive, safe</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f7f9; color: #23282d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f7f9; color: #23282d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 500; line-height: 1.3; margin: 0; color: #23282d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; margin: 0; color: #697582; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #fa5252; color: #ffffff;
border: none; border-radius: 32px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #122246; color: #ffffff;
border: 1px solid #fa5252; border-radius: 32px;
padding: 14px 32px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.6; background: #fdfdfd; color: #23282d;
border: 1px solid #c1c3c6; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #697582; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.2px; background: #fa5252; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Museo Sans','Helvetica Neue',Arial,sans-serif; background:#f6f7f9; color:#23282d; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fdfdfd;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e9ebf1;}
.logo{font-family:'Georgia',serif;font-weight:700;font-size:22px;color:#122246;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#444;}
.hero{height:280px;background:#122246;display:flex;align-items:center;padding:0 44px;color:#fff;}
.left{width:52%;}
.left h1{font-family:'Georgia',serif;font-size:38px;font-weight:700;line-height:1.1;margin:0 0 14px;}
.left p{font-size:15px;color:#c9d0e0;max-width:340px;margin:0 0 18px;}
.btn{display:inline-block;background:#fa5252;color:#fff;font-weight:700;font-size:14px;padding:12px 26px;border-radius:24px;}
.robot{width:44%;height:170px;border-radius:50%;background:radial-gradient(circle,#fff 30%,#e9ebf1 70%);position:relative;}
.robot:before{content:'';position:absolute;left:50%;top:30%;transform:translateX(-50%);width:40px;height:40px;border-radius:50%;background:#00acd7;}
.robot:after{content:'';position:absolute;left:50%;bottom:20%;transform:translateX(-50%);width:70px;height:20px;border-radius:10px;background:#122246;}
.section{padding:22px 36px 0;}
.badgerow{display:flex;gap:10px;margin-bottom:16px;}
.badge{border-radius:9999px;padding:4px 12px;font-size:11px;font-weight:500;color:#fff;}
.sectitle{font-size:20px;font-weight:700;margin-bottom:14px;font-family:'Georgia',serif;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fdfdfd;border:1px solid #d5d9e2;border-radius:12px;padding:14px;}
.thumb{height:90px;border-radius:8px;background:#f6f7f9;margin-bottom:8px;}
.ptitle{font-size:16px;font-weight:500;margin-bottom:4px;}
.pprice{font-size:20px;font-weight:500;color:#122246;}
</style>
<div class="nav">
<div class="logo">Wonder Workshop</div>
<div class="navlinks"><div>Robots</div><div>Curriculum</div><div>App</div><div>For Schools</div></div>
</div>
<div class="hero">
<div class="left">
<h1>Robots that teach kids to create.</h1>
<p>Coding companions Dash and Dot bring computer science to life through play.</p>
<div class="btn">Meet the Robots</div>
</div>
<div class="robot"></div>
</div>
<div class="section">
<div class="badgerow">
<div class="badge" style="background:#fa5252;">Action</div>
<div class="badge" style="background:#4bce61;">Go</div>
<div class="badge" style="background:#f26a21;">Create</div>
<div class="badge" style="background:#00acd7;">Info</div>
<div class="badge" style="background:#8c5aca;">Advanced</div>
</div>
<div class="sectitle">Robot Family</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ptitle">Dash Robot</div><div class="pprice">$149</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Dot Creativity Kit</div><div class="pprice">$49</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Cue Coding Robot</div><div class="pprice">$199</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.8px; margin: 0; color: #6e6e6e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #313131; color: #ffffff;
border: none; border-radius: 2px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 2px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e6e6e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Fulgor Milano</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'Helvetica Neue',-apple-system,'Segoe UI',Arial,sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e8e8e8;}
.logo{font-size:19px;font-weight:700;letter-spacing:1px;}
.navlinks{display:flex;gap:30px;font-size:15px;font-weight:500;color:#3a3a3a;}
.icons{font-size:13px;color:#6e6e6e;}
.hero{background:#313131;color:#fff;padding:44px 36px;min-height:220px;display:flex;align-items:center;}
.hero-copy{max-width:460px;}
.hero small{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;opacity:0.7;}
h1{font-size:44px;font-weight:700;line-height:1.12;letter-spacing:-0.6px;margin:10px 0 12px;}
.sub{font-size:16px;opacity:0.85;margin:0 0 22px;}
.btn{background:#fff;color:#313131;border:none;border-radius:2px;padding:14px 28px;font-size:16px;font-weight:600;letter-spacing:0.3px;}
.range-graphic{width:180px;height:130px;position:absolute;right:80px;background:linear-gradient(180deg,#4a4a4a,#1a1a1a);border-radius:2px;top:50px;}
.range-graphic::before{content:'';position:absolute;top:14px;left:14px;width:60px;height:14px;background:#666;border-radius:2px;box-shadow:76px 0 0 #666;}
.range-graphic::after{content:'';position:absolute;bottom:14px;left:14px;right:14px;height:50px;border:2px solid #666;border-radius:2px;}
.strip{display:flex;gap:0;padding:16px 36px;border-bottom:1px solid #e8e8e8;}
.tab{font-size:13px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:#6e6e6e;padding:6px 16px;border-radius:4px;}
.tab.active{background:#f2f2f2;color:#1a1a1a;}
.section{padding:22px 36px 0;}
.section h2{font-size:22px;font-weight:600;margin:0 0 16px;}
.grid{display:flex;gap:16px;}
.card{flex:1;border:1px solid #e8e8e8;border-radius:4px;padding:14px;}
.card-img{background:#f5f5f5;border-radius:2px;height:110px;position:relative;display:flex;align-items:center;justify-content:center;}
.oven{width:70px;height:70px;background:linear-gradient(160deg,#5a5a5a,#222);border-radius:2px;}
.badge{position:absolute;top:8px;left:8px;background:#313131;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:4px 10px;border-radius:2px;}
.card-title{font-size:16px;font-weight:600;margin-top:12px;}
.card-sub{font-size:13px;color:#6e6e6e;margin-top:2px;}
.card-price{font-size:22px;font-weight:700;margin-top:10px;}
.swatches{display:flex;gap:6px;margin-top:10px;}
.sw{width:20px;height:20px;border-radius:2px;border:1px solid #d6d6d6;}
</style>
<div class="nav">
<div class="logo">Fulgor Milano</div>
<div class="navlinks"><span>Ranges</span><span>Cooktops</span><span>Wall Ovens</span><span>Ventilation</span><span>Outdoor</span></div>
<div class="icons">Find a Dealer EN</div>
</div>
<div class="hero" style="position:relative;">
<div class="hero-copy">
<small>Sofia Professional Series</small>
<h1>Italian craftsmanship,<br>professional precision</h1>
<p class="sub">48-inch dual fuel ranges built for the home cook who refuses to compromise.</p>
<button class="btn">Explore the Series</button>
</div>
<div class="range-graphic"></div>
</div>
<div class="strip">
<div class="tab active">Ranges</div><div class="tab">Cooktops</div><div class="tab">Wall Ovens</div><div class="tab">Ventilation</div>
</div>
<div class="section">
<h2>Sofia Professional Series</h2>
<div class="grid">
<div class="card"><div class="card-img"><div class="badge">Sofia</div><div class="oven"></div></div><div class="card-title">48" Dual Fuel Range</div><div class="card-sub">6 burners · Convection oven</div><div class="card-price">$8,499</div><div class="swatches"><div class="sw" style="background:#c9c9c9;"></div><div class="sw" style="background:#111;"></div><div class="sw" style="background:#fff;"></div></div></div>
<div class="card"><div class="card-img"><div class="badge">Catania</div><div class="oven"></div></div><div class="card-title">36" Gas Range</div><div class="card-sub">5 burners · Single oven</div><div class="card-price">$5,299</div><div class="swatches"><div class="sw" style="background:#c9c9c9;"></div><div class="sw" style="background:#111;"></div></div></div>
<div class="card"><div class="card-img"><div class="badge">Distinto</div><div class="oven"></div></div><div class="card-title">30" Induction Range</div><div class="card-sub">4 zones · Double oven</div><div class="card-price">$6,899</div><div class="swatches"><div class="sw" style="background:#c9c9c9;"></div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e0e10; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e0e10; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8d8e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e0e10; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0e0e10; color: #f5f5f5;
border: 1px solid #333335; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8d8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #353536; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0E0E10; color:#ECECEC; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:'SF Mono', ui-monospace, Menlo, monospace; }
.shell { position:relative; width:960px; height:640px; display:flex; flex-direction:column; }
.topbar { height:44px; display:flex; align-items:center; justify-content:center; position:relative;
border-bottom:1px solid #2E2F33; flex-shrink:0; }
.topbar .whale { width:20px; height:20px; border-radius:5px; background:#4D6BFE; margin-right:8px; }
.topbar-title { font-size:16px; font-weight:700; display:flex; align-items:center; }
.topbar-title span.acc { color:#4D6BFE; }
.topbar-left { position:absolute; left:20px; width:20px; height:20px; border-radius:4px; background:#2E2F33; }
.topbar-right { position:absolute; right:20px; width:20px; height:20px; border-radius:4px; background:#2E2F33; }
.chat { flex:1; padding:20px 60px; display:flex; flex-direction:column; gap:18px; overflow:hidden; }
.turn-user { align-self:flex-end; max-width:65%; background:#1E2240; border:1px solid #2A3360;
color:#ECECEC; font-size:15px; line-height:1.5; padding:12px 16px; border-radius:18px 18px 4px 18px; }
.assistant { display:flex; flex-direction:column; gap:8px; }
.assistant-head { display:flex; align-items:center; gap:8px; }
.assistant-head .whale { width:18px; height:18px; border-radius:5px; background:#4D6BFE; }
.assistant-head span { font-size:13px; font-weight:600; color:#9A9BA0; }
.reasoning { background:#16171A; border-left:2px solid #4D6BFE; border-radius:10px; padding:12px 16px; }
.reasoning-head { font-size:12px; font-weight:600; color:#9A9BA0; margin-bottom:6px; }
.reasoning-head b { color:#4D6BFE; font-weight:600; }
.reasoning-body { font-size:13px; line-height:1.55; font-style:italic; color:#8A8B90; }
.answer-body { font-size:15px; line-height:1.6; color:#ECECEC; }
.answer-actions { display:flex; gap:14px; margin-top:2px; }
.answer-actions span { width:15px; height:15px; border-radius:4px; background:#2E2F33; }
.toggle-row { display:flex; gap:8px; padding:0 60px 8px; }
.toggle { display:flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px; font-size:13px; font-weight:600; }
.toggle.on { background:#1E2240; border:1px solid #4D6BFE; color:#4D6BFE; }
.toggle.off { background:#1A1B1E; border:1px solid #2E2F33; color:#9A9BA0; }
.toggle .ic { width:12px; height:12px; border-radius:3px; background:currentColor; }
.composer { padding:0 60px 20px; }
.prompt-pill { height:50px; background:#1A1B1E; border:1px solid #3A3B40; border-radius:25px;
display:flex; align-items:center; padding:0 8px 0 18px; gap:10px; }
.prompt-pill .ph { flex:1; font-size:15px; color:#6A6B70; }
.plusbtn { width:22px; height:22px; border-radius:6px; background:#2E2F33; }
.sendbtn { width:36px; height:36px; border-radius:50%; background:#4D6BFE; display:flex; align-items:center; justify-content:center; }
.sendbtn::before { content:''; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:8px solid #fff; }
</style></head>
<body>
<div class="shell">
<div class="topbar">
<div class="topbar-left"></div>
<div class="topbar-title"><span class="whale"></span>DeepSeek (iOS) <span class="acc">Seek</span></div>
<div class="topbar-right"></div>
</div>
<div class="chat">
<div class="turn-user">If a train leaves at 60mph and another at 80mph from 210 miles apart, when do they meet?</div>
<div class="assistant">
<div class="assistant-head"><span class="whale"></span><span>DeepSeek-R1</span></div>
<div class="reasoning">
<div class="reasoning-head"><b>🧠 Thought for 8 seconds</b> · tap to collapse</div>
<div class="reasoning-body">They're approaching each other, so I should add the speeds: 60 + 80 = 140 mph
combined closing speed. Distance is 210 miles. Time = distance / speed = 210 / 140 = 1.5 hours.
Let me double check by computing each train's distance at t=1.5: 60×1.5=90, 80×1.5=120, sum=210. That matches.</div>
</div>
<div class="answer-body">The trains meet after <b>1.5 hours</b>. At that point the first train has covered
90 miles and the second has covered 120 miles — together, exactly the 210 miles between them.</div>
<div class="answer-actions"><span></span><span></span><span></span><span></span></div>
</div>
</div>
<div class="toggle-row">
<div class="toggle on"><span class="ic"></span>DeepThink (R1)</div>
<div class="toggle off"><span class="ic"></span>Search</div>
</div>
<div class="composer">
<div class="prompt-pill">
<div class="plusbtn"></div>
<div class="ph">Message DeepSeek</div>
<div class="sendbtn"></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00de5a; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00de5a; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #096d32; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #17191d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00de5a; color: #17191d;
border: 1px solid #17191d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00de5a; color: #111111;
border: 1px solid #03bd4e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #096d32; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #04be50; color: #17191d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#17191d; box-sizing:border-box;
font-family:"Malgun Gothic", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #ececec; }
.brand { font-size:19px; font-weight:700; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:16px; color:#17191d; padding-bottom:16px; }
.navlinks span.on { border-bottom:2px solid #00de5a; }
.searchbox { width:180px; height:32px; border:1px solid #e5e5e5; border-radius:4px; padding:0 12px;
font-size:12px; color:#919191; display:flex; align-items:center; }
.hero { position:relative; height:210px; overflow:hidden;
background:linear-gradient(120deg, #0d1210 0%, #142218 55%, #0d1210 100%); }
.hero::before { content:''; position:absolute; right:-40px; top:-30px; width:280px; height:280px; border-radius:50%;
background:radial-gradient(circle, rgba(0,222,90,0.35), transparent 65%); }
.herotext { position:relative; z-index:2; padding:26px 32px 0; }
.kicker { color:#00de5a; font-size:12px; font-weight:700; letter-spacing:0.05em; margin-bottom:8px; }
.hero h1 { color:#fff; font-size:32px; font-weight:700; margin:0 0 16px; }
.cta-green { display:inline-flex; align-items:center; background:#00de5a; color:#000000; font-size:14px;
font-weight:700; padding:12px 24px; border-radius:0px; }
.body { position:absolute; top:264px; left:0; right:0; bottom:0; padding:18px 32px 0; }
.sectitle { font-size:16px; font-weight:700; color:#17191d; margin-bottom:12px; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.card { background:#ffffff; border-radius:4px; box-shadow:rgba(0,0,0,0.08) 0px 2px 8px; overflow:hidden; }
.art { height:80px; background:linear-gradient(135deg, rgba(0,222,90,0.18), rgba(23,25,29,0.06)); position:relative; }
.badge { position:absolute; top:6px; left:6px; background:#00de5a; color:#000; font-size:10px; font-weight:700;
padding:1px 7px; border-radius:4px; }
.cbody { padding:10px 10px 12px; }
.ctitle { font-size:13px; font-weight:700; margin-bottom:4px; }
.cmeta { font-size:11px; color:#737881; }
.footer-line { position:absolute; bottom:14px; left:32px; right:32px; display:flex; justify-content:space-between;
font-size:11px; color:#9fa1a7; font-weight:700; border-top:1px solid #ececec; padding-top:10px; }
</style></head>
<body>
<nav>
<span class="brand">Nexon</span>
<div class="navlinks"><span class="on">Games</span><span>Events</span><span>Community</span><span>Company</span></div>
<span class="searchbox">Search games</span>
</nav>
<div class="hero">
<div class="herotext">
<div class="kicker">PRE-REGISTRATION OPEN</div>
<h1>Second Life Guild: New Season</h1>
<span class="cta-green">Play Now</span>
</div>
</div>
<div class="body">
<div class="sectitle">Popular This Week</div>
<div class="grid">
<div class="card"><div class="art"><span class="badge">NEW</span></div><div class="cbody"><div class="ctitle">Iron Frontier</div><div class="cmeta">MMORPG · PC</div></div></div>
<div class="card"><div class="art"></div><div class="cbody"><div class="ctitle">Kart Rally X</div><div class="cmeta">Racing · Mobile</div></div></div>
<div class="card"><div class="art"><span class="badge">EVENT</span></div><div class="cbody"><div class="ctitle">Dungeon Rift</div><div class="cmeta">Action RPG · PC</div></div></div>
<div class="card"><div class="art"></div><div class="cbody"><div class="ctitle">Sky Command</div><div class="cmeta">Strategy · PC</div></div></div>
</div>
</div>
<div class="footer-line">
<span>© Nexon</span>
<span>Games · Events · Support · Company</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #acacac; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #1e306e; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #1e306e;
border: 1px solid #1e306e; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #acacac; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffce33; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:'Calibre','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-family:'NewKansas-Medium',Georgia,serif; font-size:19px; font-weight:500; margin:0; }
.navlinks { display:flex; gap:24px; font-size:15px; font-weight:500; }
main { display:flex; height:calc(640px - 72px); }
.gallery { width:44%; background:#1e306e; display:flex; align-items:center; justify-content:center; }
.mattress { width:280px; height:110px; border-radius:16px; background:linear-gradient(180deg,#ffffff,#d5dae3); position:relative;
box-shadow:0 20px 40px rgba(0,0,0,0.3); }
.mattress::before { content:''; position:absolute; left:20px; top:20px; right:20px; height:2px; background:#acacac; }
.moon { position:absolute; top:30px; right:40px; width:36px; height:36px; border-radius:9999px; background:#ffce33; }
.details { width:56%; padding:28px 36px; }
.badge { display:inline-block; background:#ffce33; color:#121212; font-size:11px; font-weight:700; letter-spacing:0.5px;
text-transform:uppercase; border-radius:4px; padding:2px 8px; margin-bottom:12px; }
h1 { font-family:'NewKansas-Medium',Georgia,serif; font-size:32px; font-weight:500; letter-spacing:-0.3px; margin:0 0 8px; }
.price { font-size:18px; font-weight:600; margin:0 0 14px; }
.desc { font-size:16px; line-height:1.5; color:#242445; margin:0 0 18px; max-width:400px; }
.stars { color:#ffce33; margin-bottom:20px; font-size:14px; }
.buyrow { display:flex; gap:12px; }
.btn-primary { background:#1e306e; color:#fff; border:none; border-radius:8px; padding:14px 24px; font-size:16px; font-weight:600; letter-spacing:0.5px; height:48px; }
.btn-secondary { background:#fff; color:#1e306e; border:2px solid #1e306e; border-radius:8px; padding:13px 23px; font-size:16px; font-weight:600; height:48px; }
</style></head>
<body>
<nav>
<p class="brand">Casper</p>
<div class="navlinks"><span>Mattresses</span><span>Bedding</span><span>Furniture</span></div>
</nav>
<main>
<div class="gallery"><div class="mattress"></div><div class="moon"></div></div>
<div class="details">
<span class="badge">Best Seller</span>
<h1>The Original Casper Mattress</h1>
<p class="price">$1,295 · Queen</p>
<p class="desc">Breathable foam layers engineered for deep, restorative sleep — with a 100-night risk-free trial.</p>
<div class="stars">★★★★★ 4.6 (48,203 reviews)</div>
<div class="buyrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compare Mattresses</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #3c3936;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #3c3936;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #3c3936; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7a7673; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #77bc21; color: #000000;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: transparent; color: #3c3936;
border: 1px solid #77bc21; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fefefe; color: #3c3936;
border: 1px solid #cecdcc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7673; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #ff772a; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Ego Power Plus</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#fefefe; color:#3c3936; font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#3c3936; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.logo { font-weight:700; font-size:19px; }
.logo b { color:#77bc21; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; }
.navlinks span:hover, .navlinks span.on { color:#77bc21; }
.search { background:#fff; border-radius:4px; padding:8px 14px; font-size:12px; color:#7a7673; width:160px; }
.hero { height:230px; background:#1a1816; display:flex; align-items:center; padding:0 32px; gap:30px; }
.hero-copy { flex:1; color:#fff; }
.hero-copy .kicker { color:#77bc21; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.hero-copy h1 { font-size:38px; font-weight:700; line-height:1.15; margin:8px 0 12px; }
.btn { display:inline-block; background:#77bc21; color:#fff; border-radius:4px; padding:14px 28px; font-size:14px; font-weight:600; }
.hero-art { flex:1; height:170px; border-radius:4px; position:relative; background:linear-gradient(155deg,#2b2925,#111); overflow:hidden; }
.mower { position:absolute; width:180px; height:70px; background:#77bc21; border-radius:8px; bottom:34px; left:30px;
box-shadow:0 10px 24px rgba(0,0,0,.5); }
.mower::before { content:''; position:absolute; width:36px; height:36px; border-radius:50%; background:#1a1816; bottom:-16px; left:14px; }
.mower::after { content:''; position:absolute; width:36px; height:36px; border-radius:50%; background:#1a1816; bottom:-16px; right:14px; }
.badge-eco { position:absolute; top:20px; right:24px; background:#ff772a; color:#fff; font-size:11px; font-weight:700;
text-transform:uppercase; padding:4px 10px; border-radius:4px; }
.row { display:flex; gap:16px; padding:20px 32px 0; }
.card { flex:1; background:#fff; border:1px solid #dbd8d6; border-radius:8px; padding:16px; }
.thumb { height:70px; border-radius:4px; margin-bottom:10px; }
.th1 { background:linear-gradient(160deg,#d4edb0,#77bc21); }
.th2 { background:linear-gradient(160deg,#ffe0c2,#ff772a); }
.th3 { background:linear-gradient(160deg,#e0e0e0,#3c3936); }
.name { font-size:15px; font-weight:600; margin:0 0 4px; }
.price { font-size:20px; font-weight:700; }
.spec { font-size:12px; color:#7a7673; margin:6px 0; }
</style></head>
<body>
<nav>
<div class="logo">Ego Power Plus</div>
<div class="navlinks"><span class="on">Mowers</span><span>Blowers</span><span>Trimmers</span><span>Batteries</span></div>
<div class="search">Search 56V ARC...</div>
</nav>
<div class="hero">
<div class="hero-copy">
<div class="kicker">56V ARC Lithium</div>
<h1>Gas-tool power.<br>Zero emissions.</h1>
<div class="btn">Shop Mowers</div>
</div>
<div class="hero-art"><span class="badge-eco">#1 Rated</span><div class="mower"></div></div>
</div>
<div class="row">
<div class="card"><div class="thumb th1"></div><p class="name">Select Cut XP 21" Mower</p><p class="spec">56V · 60 min runtime</p><p class="price">$549.00</p></div>
<div class="card"><div class="thumb th2"></div><p class="name">Power+ 615 CFM Blower</p><p class="spec">Limited Time</p><p class="price">$249.00</p></div>
<div class="card"><div class="thumb th3"></div><p class="name">7.5Ah ARC Lithium Battery</p><p class="spec">Fits all EGO tools</p><p class="price">$329.00</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 1px; background: #c51c34; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 1px; background: #fafafa; color: #222222;
border: 1px solid #c51c34; border-radius: 4px;
padding: 11px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #222222;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #428445; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#1b1b1b; box-sizing:border-box;
font-family:'Jost','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#fafafa; display:flex; align-items:center; justify-content:center;
position:relative; }
.logo { font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-weight:700; font-size:22px;
letter-spacing:1px; text-transform:uppercase; }
.navlinks { position:absolute; left:30px; display:flex; gap:20px; font-family:'Barlow Condensed','Arial Narrow',sans-serif;
font-size:15px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#1b1b1b; }
.navicons { position:absolute; right:30px; font-size:14px; color:#1b1b1b; }
.hairline { height:1px; background:#dedede; }
main { display:flex; padding:26px 34px 0; gap:34px; height:340px; }
.shot { width:340px; background:#f5f5f5; position:relative; overflow:hidden; }
.shot::before { content:''; position:absolute; left:60px; right:60px; top:60px; bottom:60px;
background:linear-gradient(160deg,#3a2a1e,#1b1b1b 60%); }
.shot::after { content:''; position:absolute; left:60px; right:60px; top:50%; height:14px; background:#c51c34;
box-shadow:0 0 0 2px #1b1b1b inset; }
.badge-new { position:absolute; top:14px; left:14px; background:#108474; color:#fff; font-size:11px;
font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:3px 8px; z-index:2; }
.info { flex:1; display:flex; flex-direction:column; min-width:0; }
h1 { font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-size:28px; font-weight:600; margin:0 0 8px;
line-height:1.2; text-transform:uppercase; letter-spacing:0.2px; }
.stars { color:#e0b252; font-size:13px; margin-bottom:12px; }
.stars span { color:#7b7b7b; font-family:'Jost',sans-serif; margin-left:6px; font-size:13px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.price { font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-size:22px; font-weight:700; color:#c51c34; }
.badge-stock { background:#428445; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase;
letter-spacing:0.5px; padding:2px 8px; }
.field { margin-bottom:14px; }
.field .lbl { font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-size:14px; font-weight:600;
text-transform:uppercase; letter-spacing:0.3px; margin-bottom:8px; }
.swatches { display:flex; gap:10px; }
.sw { width:26px; height:26px; border:2px solid transparent; }
.sw.a { background:#3a2a1e; border-color:#1b1b1b; }
.sw.b { background:#b59677; }
.sw.c { background:#1b1b1b; }
.cta { margin-top:auto; display:flex; gap:10px; }
.btn-primary { flex:1; background:#c51c34; color:#fff; border:none; height:44px;
font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-size:16px; font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.btn-secondary { background:transparent; border:1px solid #1b1b1b; color:#1b1b1b; height:44px; padding:0 20px;
font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-size:16px; font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.divider { height:1px; background:#eeeeee; margin:16px 34px 0; }
.accordion { padding:12px 34px 0; }
.acc { border-bottom:1px solid #eeeeee; padding:10px 0; display:flex; justify-content:space-between;
font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-size:16px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
footer { margin-top:auto; height:52px; background:#222222; color:#c7c7c7; display:flex; align-items:center;
justify-content:space-between; padding:0 34px; font-size:13px; }
footer b { color:#fff; }
</style></head>
<body>
<nav>
<div class="navlinks"><span>Belts</span><span>Wallets</span><span>Bags</span></div>
<div class="logo">Bullstrap</div>
<div class="navicons">⌕ ♡ 🛒</div>
</nav>
<div class="hairline"></div>
<main>
<div class="shot"><span class="badge-new">New</span></div>
<div class="info">
<h1>Full-Grain Leather Belt — Saddle Tan</h1>
<div class="stars">★★★★★ <span>4.9 (612 reviews)</span></div>
<div class="price-row"><span class="price">$79.00</span><span class="badge-stock">In Stock</span></div>
<div class="field">
<div class="lbl">Color — Saddle</div>
<div class="swatches"><span class="sw a"></span><span class="sw b"></span><span class="sw c"></span></div>
</div>
<div class="cta">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Details</button>
</div>
</div>
</main>
<div class="divider"></div>
<div class="accordion">
<div class="acc"><span>Materials & Craft</span><span>+</span></div>
<div class="acc"><span>Shipping & Returns</span><span>+</span></div>
</div>
<footer>
<span>© Bullstrap</span>
<span><b>Full-grain leather</b> · Hand-finished in-house · Lifetime hardware warranty</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 500; line-height: 1.4; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #9C6B44; color: #FFFFFF;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1px; background: #FFFFFF; color: #9C6B44;
border: 1px solid #9C6B44; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #DDDDDD; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #FAF7F3; color: #7A4F30;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#FFFFFF; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #DDDDDD;}
.logo{font-size:19px;font-weight:700;color:#1A1A1A;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#1A1A1A;}
.navcta{background:#9C6B44;color:#fff;font-size:12px;font-weight:600;padding:9px 18px;border-radius:2px;}
.hero{height:250px;display:flex;align-items:center;padding:0 36px;background:#F5F2EE;}
.herotext{width:420px;}
.badges{display:flex;gap:8px;margin-bottom:16px;}
.chip{background:#F0EBE4;color:#7A4F30;font-size:10px;font-weight:600;padding:4px 10px;border-radius:2px;border:1px solid #9C6B44;}
.headline{font-size:28px;font-weight:700;color:#1A1A1A;margin-bottom:12px;line-height:1.2;}
.sub{font-size:14px;color:#333;margin-bottom:18px;max-width:340px;}
.btn{display:inline-block;background:#9C6B44;color:#fff;font-size:14px;font-weight:600;padding:12px 26px;border-radius:2px;}
.fan{width:180px;height:180px;margin-left:80px;border-radius:8px;background:linear-gradient(135deg,#C8A882,#7A4F30);position:relative;}
.hub{position:absolute;left:65px;top:65px;width:50px;height:50px;border-radius:50%;background:#1A1A1A;}
.sec{padding:20px 36px 0;}
.spectable{display:flex;gap:1px;background:#DDDDDD;margin-bottom:16px;}
.speccell{flex:1;background:#FAF7F3;text-align:center;padding:10px;}
.slabel{font-size:9px;letter-spacing:.5px;text-transform:uppercase;color:#888888;}
.sval{font-family:Menlo,Consolas,monospace;font-size:14px;color:#1A1A1A;margin-top:3px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border:1px solid #DDDDDD;border-radius:2px;padding:12px;}
.thumb{height:80px;border-radius:2px;margin-bottom:10px;}
.pname{font-size:13px;font-weight:600;color:#1A1A1A;}
.pprice{font-size:13px;color:#7A4F30;font-weight:700;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Noctua</div>
<div class="navlinks"><span>CPU Coolers</span><span>Fans</span><span>Thermal Paste</span></div>
<div class="navcta">Compatibility Check</div>
</div>
<div class="hero">
<div class="herotext">
<div class="badges"><div class="chip">Editor's Choice</div><div class="chip">Gold Award</div></div>
<div class="headline">Proven quiet. Proven cool.</div>
<div class="sub">Award-winning cooling engineered past the RGB phase of your build.</div>
<div class="btn">Find Your Socket</div>
</div>
<div class="fan"><div class="hub"></div></div>
</div>
<div class="sec">
<div class="spectable">
<div class="speccell"><div class="slabel">Airflow</div><div class="sval">140.2 m³/h</div></div>
<div class="speccell"><div class="slabel">Noise</div><div class="sval">24.6 dB(A)</div></div>
<div class="speccell"><div class="slabel">Bearing Life</div><div class="sval">150,000 h</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#9C6B44,#1A1A1A)"></div><div class="pname">NH-D15 chromax.black</div><div class="pprice">$109.90</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#C8A882,#7A4F30)"></div><div class="pname">NF-A12x25 PWM Fan</div><div class="pprice">$29.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7A4F30,#333333)"></div><div class="pname">NT-H2 Thermal Paste</div><div class="pprice">$9.90</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #121212;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d9d9d9; color: #121212;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1A1A; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#fff; position:relative; }
.navbar { height:66px; background:#00AFF0; display:flex; align-items:center; gap:10px; padding:0 14px 0 10px; color:#fff; }
.gav { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#FF6B6B,#FF8E53); }
.gname { font-size:19px; font-weight:700; }
.gsub { font-size:10px; color:rgba(255,255,255,0.82); }
.msgs { padding:14px; }
.inbrow { display:flex; gap:8px; margin-bottom:10px; }
.iav { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#2ECC71,#16A085); flex-shrink:0; }
.sender { font-size:11px; font-weight:600; color:#2ECC71; margin-bottom:2px; }
.inbub { background:#F0F0F0; border-radius:18px 18px 18px 5px; padding:9px 13px; font-size:14px; max-width:76%; position:relative; }
.likepill { position:absolute; bottom:-8px; right:8px; background:#fff; border:1px solid #E4E4E6; border-radius:999px;
padding:2px 7px 2px 5px; font-size:9px; font-weight:700; color:#6A6A6A; display:flex; align-items:center; gap:2px; }
.outrow { display:flex; justify-content:flex-end; margin:18px 0 10px; }
.outbub { background:#00AFF0; color:#fff; border-radius:18px 18px 5px 18px; padding:9px 13px; font-size:14px; max-width:76%; }
.composer { position:absolute; bottom:0; left:0; right:0; height:56px; background:#fff; border-top:0.5px solid #E4E4E6;
display:flex; align-items:center; padding:0 10px; gap:8px; }
.plus { color:#00AFF0; font-size:20px; font-weight:700; }
.field { flex:1; height:38px; background:#F0F0F0; border-radius:999px; display:flex; align-items:center; padding:0 14px;
font-size:13px; color:#9A9A9A; }
.sendc { width:38px; height:38px; border-radius:50%; background:#00AFF0; color:#fff; display:flex; align-items:center;
justify-content:center; font-size:14px; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:800; letter-spacing:-0.3px; margin:0; }
.brand span { color:#00AFF0; }
.tag { font-size:14px; color:#6A6A6A; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:18px; border:1px solid #E4E4E6; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#6A6A6A; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:700; }
.typeblock .t2 { font-size:13px; color:#6A6A6A; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:999px;
background:#F7F7F8; border:1px solid #E4E4E6; color:#6A6A6A; }
.footer { margin-top:auto; border-top:1px solid #E4E4E6; padding-top:16px; font-size:11px; color:#9A9A9A; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="navbar"><span>‹</span><div class="gav"></div><div><div class="gname">Roadtrip 🚐</div><div class="gsub">8 members · Maya is typing…</div></div></div>
<div class="msgs">
<div class="inbrow">
<div class="iav"></div>
<div><div class="sender">Maya</div>
<div class="inbub">are we still leaving at 6am tomorrow??<div class="likepill">❤ 3</div></div>
</div>
</div>
<div class="outrow"><div class="outbub">yes! gas is full, snacks are packed 🎉</div></div>
</div>
<div class="composer"><span class="plus">+</span><div class="field">Send a message</div><div class="sendc">➤</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">GroupMe (iOS)<span>.</span></h1>
<p class="tag">A group chat that feels like a party — a solid blue chrome header, a heart-like docked below every bubble, and a wall of gradient faces.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#00AFF0"></div><small>#00AFF0</small></div>
<div class="sw"><div class="chip2" style="background:#FF3B5C"></div><small>#FF3B5C</small></div>
<div class="sw"><div class="chip2" style="background:#F0F0F0"></div><small>#F0F0F0</small></div>
<div class="sw"><div class="chip2" style="background:#2ECC71"></div><small>#2ECC71</small></div>
<div class="sw"><div class="chip2" style="background:#9B59B6"></div><small>#9B59B6</small></div>
</div>
<div class="typeblock">
<div class="t1">Roadtrip 🚐</div>
<div class="t2">SF Pro (system) · group name always bold white on the blue nav bar</div>
</div>
<div class="taglist">
<span>Solid blue chat header</span><span>Heart like pill</span><span>Per-group themes</span>
<span>Gradient avatars</span><span>Image gallery grid</span>
</div>
<div class="footer">GroupMe Blue #00AFF0 chrome · outbound bubbles always blue, never the group accent</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf9f7; color: #241f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf9f7; color: #241f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 300; line-height: 1.3; letter-spacing: 0.01em; margin: 0; color: #241f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #737368; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; background: #009161; color: #f7f7f7;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; background: transparent; color: #241f20;
border: 1px solid #009161; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #faf9f7; color: #241f20;
border: 1px solid #c4c2c1; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737368; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; background: #ebf9f4; color: #009161;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Helvetica Neue',Arial,sans-serif; background:#faf9f7; color:#3c3c3b; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;display:flex;}
.main{flex:1;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #eaeaea;}
.logo{font-size:19px;font-weight:300;letter-spacing:0.05em;color:#241f20;}
.navlinks{display:flex;gap:22px;font-size:13px;letter-spacing:0.04em;color:#241f20;}
.hero{height:190px;display:flex;align-items:center;padding:0 40px;}
.heroText h1{font-size:34px;font-weight:300;color:#241f20;margin:0 0 10px;letter-spacing:0.01em;}
.heroText p{font-size:14px;color:#737368;margin:0 0 16px;max-width:380px;}
.strip{background:#f5eecc;text-align:center;padding:10px;font-size:13px;color:#241f20;border-bottom:1px solid #eaeaea;}
.strip b{color:#009161;}
.sec{padding:16px 32px 0;}
.secTitle{font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:#737368;margin-bottom:12px;}
.grid{display:flex;gap:16px;}
.card{width:196px;background:#f7f7f7;border:1px solid #e5e5e5;}
.thumb{height:130px;background:#f1f1f1;position:relative;overflow:hidden;}
.ring{position:absolute;left:78px;top:44px;width:40px;height:40px;border-radius:50%;border:8px solid;}
.stone{position:absolute;left:90px;top:34px;width:16px;height:16px;transform:rotate(45deg);}
.ctitle{font-size:16px;font-weight:400;color:#241f20;padding:12px 12px 2px;}
.cprice{font-size:22px;font-weight:300;color:#241f20;padding:0 12px 4px;}
.ccap{font-size:12px;color:#737368;padding:0 12px 14px;}
.panel{width:210px;border-left:1px solid #e5e5e5;padding:24px 20px;background:#faf9f7;}
.panelTitle{font-size:10px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:#241f20;margin-bottom:16px;}
.swatches{display:flex;gap:10px;margin-bottom:20px;}
.sw{width:26px;height:26px;border-radius:50%;border:2px solid transparent;}
.sw.on{border-color:#241f20;}
.badgesus{display:inline-block;background:#ebf9f4;border:1px solid #009161;color:#009161;font-size:9px;letter-spacing:0.14em;text-transform:uppercase;padding:5px 8px;margin-bottom:16px;}
.price{font-size:26px;font-weight:300;color:#241f20;margin-bottom:16px;}
.btn{background:#009161;color:#f7f7f7;text-align:center;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;padding:14px 0;}
</style>
<div class="wrap">
<div class="main">
<div class="nav">
<div class="logo">Vrai</div>
<div class="navlinks"><span>Rings</span><span>Necklaces</span><span>Bracelets</span><span>Origins</span></div>
</div>
<div class="strip">Every diamond, <b>zero emissions</b> — traceable to a solar-powered foundry.</div>
<div class="hero">
<div class="heroText">
<h1>Diamonds, Measured Twice</h1>
<p>Lab-grown clarity paired with a verified zero-emission origin story.</p>
</div>
</div>
<div class="sec">
<div class="secTitle">The Signature Collection</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="ring" style="border-color:#c8ab6e"></div><div class="stone" style="background:#f1f1f1;box-shadow:0 0 0 2px #c8ab6e"></div></div><div class="ctitle">The Petite Solitaire</div><div class="cprice">$1,190</div><div class="ccap">14k Gold · Round Cut</div></div>
<div class="card"><div class="thumb"><div class="ring" style="border-color:#e8e8e8"></div><div class="stone" style="background:#f1f1f1;box-shadow:0 0 0 2px #e8e8e8"></div></div><div class="ctitle">The Pavé Halo</div><div class="cprice">$2,340</div><div class="ccap">White Gold · Oval Cut</div></div>
<div class="card"><div class="thumb"><div class="ring" style="border-color:#d4a090"></div><div class="stone" style="background:#f1f1f1;box-shadow:0 0 0 2px #d4a090"></div></div><div class="ctitle">The Three Stone</div><div class="cprice">$3,110</div><div class="ccap">Rose Gold · Emerald Cut</div></div>
</div>
</div>
</div>
<div class="panel">
<div class="panelTitle">Configure Your Ring</div>
<div class="swatches"><div class="sw on" style="background:#c8ab6e"></div><div class="sw" style="background:#e8e8e8"></div><div class="sw" style="background:#d4a090"></div></div>
<div class="badgesus">Zero Emission Certified</div>
<div class="price">$1,190</div>
<div class="btn">Begin Customizing</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #111111; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #111111; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e8e8e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1d1d1d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #111111; color: #ffffff;
border: 1px solid #1d1d1d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #111111; color: #f5f5f5;
border: 1px solid #353535; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e8e8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #131313; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>IICOMBINED</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.hero { position:relative; width:960px; height:340px; overflow:hidden;
background:linear-gradient(160deg,#1d1d1d 0%,#111111 55%,#0a0a0a 100%); }
.lens { position:absolute; border-radius:50%; opacity:0.5; }
.lens.l1 { width:260px; height:260px; left:-70px; top:40px; background:#27455c; opacity:0.35; }
.lens.l2 { width:220px; height:220px; right:60px; top:-40px; background:#343434; opacity:0.55; transform:rotate(8deg); }
.lens.l3 { width:140px; height:140px; right:200px; bottom:-40px; background:#000000; opacity:0.5; }
header { position:absolute; top:0; left:0; width:100%; height:64px; z-index:3;
display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.wordmark { font-size:13px; font-weight:400; letter-spacing:0.14em; text-transform:uppercase; color:#ffffff; margin:0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:12px; color:#ffffff; opacity:0.88; }
.campaign { position:absolute; left:40px; bottom:36px; z-index:3; max-width:420px; }
.overlay-label { font-size:12px; font-weight:400; letter-spacing:0.12em; text-transform:uppercase;
color:#ffffff; opacity:0.85; margin:0 0 10px; }
.campaign h1 { font-family:Georgia,"Times New Roman",serif; font-size:34px; font-weight:400; line-height:1.17;
color:#ffffff; margin:0; }
.campaign-cta { display:flex; align-items:center; gap:18px; margin-top:18px; }
.btn-pill { background:transparent; border:1px solid #ffffff; color:#ffffff; border-radius:25px;
height:36px; padding:0 23px; font-size:14px; font-weight:400; box-shadow:none; white-space:nowrap; }
.link-onlight { color:#ffffff; font-size:13px; opacity:0.85; }
.products { padding:24px 40px 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tile { background:#ffffff; border-radius:0; box-shadow:none; }
.tile-art { height:118px; background:#f3f4f6; position:relative; overflow:hidden; }
.tile-art .oval { position:absolute; border-radius:50%; }
.tile-art .o1 { width:88px; height:56px; left:50%; top:50%; transform:translate(-58%,-50%); background:#27455c; opacity:0.28; }
.tile-art .o2 { width:70px; height:44px; left:50%; top:50%; transform:translate(-38%,-46%); background:#111111; opacity:0.16; }
.tile-name { font-size:11px; font-weight:400; letter-spacing:0.08em; text-transform:uppercase; color:#111111;
margin:10px 0 0; }
.tile-meta { font-size:11px; color:#858585; margin:3px 0 0; }
.consent { position:relative; z-index:3; height:44px; background:#f3f4f6; display:flex;
align-items:center; justify-content:space-between; padding:0 40px; }
.consent p { font-size:11px; color:#555555; margin:0; }
.btn-solid { background:#111111; color:#ffffff; border:none; border-radius:8px; height:30px;
padding:0 16px; font-size:11px; font-weight:400; letter-spacing:0.06em; text-transform:uppercase; box-shadow:none; }
</style></head>
<body>
<section class="hero">
<div class="lens l1"></div>
<div class="lens l2"></div>
<div class="lens l3"></div>
<header>
<p class="wordmark">IICOMBINED</p>
<div class="navlinks">
<span>Sunglasses</span><span>Glasses</span><span>Bestsellers</span><span>Gifts</span>
</div>
</header>
<div class="campaign">
<p class="overlay-label">New Campaign — 2027</p>
<h1>Solstice Collection</h1>
<div class="campaign-cta">
<button class="btn-pill">View Campaign</button>
<span class="link-onlight">Shop Eyewear →</span>
</div>
</div>
</section>
<section class="products">
<div class="tile">
<div class="tile-art"><span class="oval o1"></span><span class="oval o2"></span></div>
<p class="tile-name">Toffee 02</p>
<p class="tile-meta">Acetate / Grey</p>
</div>
<div class="tile">
<div class="tile-art"><span class="oval o1"></span><span class="oval o2"></span></div>
<p class="tile-name">Vert 02</p>
<p class="tile-meta">Metal / Green</p>
</div>
<div class="tile">
<div class="tile-art"><span class="oval o1"></span><span class="oval o2"></span></div>
<p class="tile-name">Arden 02</p>
<p class="tile-meta">Acetate / Black</p>
</div>
</section>
<section class="consent">
<p>© IICOMBINED — Eyewear · Fragrance · Gifts</p>
<button class="btn-solid">Accept All</button>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f70e0e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f70e0e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fa3e3e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f70e0e; color: #000000;
border: 1px solid #fa3e3e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f70e0e; color: #f5f5f5;
border: 1px solid #f73333; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f71616; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box; font-family:"Open Sans","Noto Sans TC",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; border-bottom:1px solid #dddddd; }
.brand { font-weight:800; font-size:17px; color:#000; }
.navlinks { display:flex; gap:16px; font-size:15px; color:#0066cc; }
.btn { background:#f70e0e; color:#fff; border:none; border-radius:6px; padding:11px 22px; font-size:14px; font-weight:600; }
.hero { padding:24px 30px 14px; }
.hero h1 { font-size:32px; font-weight:800; letter-spacing:-1px; margin:0 0 8px; color:#000; max-width:600px; }
.hero p { font-size:14px; color:#222; margin:0 0 12px; max-width:500px; }
.tabs { display:flex; gap:10px; padding:6px 30px 14px; }
.tab { border:1px solid #dddddd; border-radius:5px; padding:8px 16px; font-size:13px; color:#aaaaaa; }
.tab.active { border-color:#65a4f4; color:#65a4f4; }
.stats { display:flex; gap:20px; padding:0 30px 16px; }
.stat { flex:1; background:#fafafa; border:1px solid #dddddd; border-radius:6px; padding:16px; text-align:center; }
.stat b { font-size:28px; font-weight:300; color:#fa3e3e; display:block; }
.stat span { font-size:12px; color:#333333; }
.band { background:#d50e0e; color:#fff; padding:16px 30px; text-align:center; }
.band h2 { font-size:18px; font-weight:800; margin:0; }
</style></head>
<body>
<nav>
<div class="brand">Ragic</div>
<div class="navlinks"><span>Try it now</span><span>Templates</span><span>How to get started?</span></div>
<button class="btn">Create account</button>
</nav>
<div class="hero">
<h1>The #1 No Code database builder</h1>
<p>Build powerful, relational business apps the way you'd lay out a spreadsheet.</p>
</div>
<div class="tabs">
<div class="tab active">Featured templates</div>
<div class="tab">Sales</div>
<div class="tab">HR</div>
<div class="tab">Accounting</div>
</div>
<div class="stats">
<div class="stat"><b>$200,000</b><span>Saved on custom software</span></div>
<div class="stat"><b>50,000+</b><span>Businesses running on Ragic</span></div>
<div class="stat"><b>0</b><span>Lines of code required</span></div>
</div>
<div class="band"><h2>No Code AI tool for your business — Create account for free</h2></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; margin: 0; color: #62625b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; background: #e60023; color: #ffffff;
border: none; border-radius: 16px; padding: 6px 14px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; background: #e5e5e0; color: #000000;
border: 1px solid #e60023; border-radius: 16px;
padding: 6px 14px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 16px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #62625b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1; background: #f6f6f3; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbfbf9; color:#211922; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:17px; font-weight:700; color:#e60023; margin:0; }
.navlinks { display:flex; gap:10px; }
.navlinks span { background:#e5e5e0; border-radius:999px; padding:8px 16px; font-size:13px; font-weight:600; color:#211922; }
.navlinks span.on { background:#211922; color:#fff; }
.btn-red { background:#e60023; color:#fff; border:none; border-radius:999px; padding:9px 20px; font-weight:700; font-size:13px; }
.headline { text-align:center; padding:8px 40px 18px; }
.headline h1 { font-size:40px; font-weight:600; letter-spacing:-1px; margin:0; }
.headline p { font-size:13px; color:#62625b; margin:6px 0 0; }
/* 핀터레스트의 진짜 신원: 컬럼 기반 매서너리 핀 그리드 — 사진 대신 CSS 그라디언트 타일로
정사각/세로/가로 3종 비율을 섞는다. 16px 라운드, 8px 갭. */
.masonry { columns:5; column-gap:8px; padding:0 40px 20px; }
.pin { break-inside:avoid; margin-bottom:8px; border-radius:16px; position:relative; overflow:hidden; }
.pin .save { position:absolute; top:8px; right:8px; background:#e60023; color:#fff; font-size:10px; font-weight:700;
border-radius:999px; padding:4px 10px; }
.p1 { height:150px; background:linear-gradient(160deg,#ffd8f4,#e60023); }
.p2 { height:100px; background:linear-gradient(160deg,#c8c8c1,#62625b); }
.p3 { height:180px; background:linear-gradient(160deg,#7e238b,#211922); }
.p4 { height:120px; background:linear-gradient(160deg,#fde0f0,#91918c); }
.p5 { height:90px; background:linear-gradient(160deg,#e5e5e0,#c8c8c1); }
.p6 { height:160px; background:linear-gradient(160deg,#e60023,#620006); }
.p7 { height:110px; background:linear-gradient(160deg,#dadad3,#91918c); }
.p8 { height:140px; background:linear-gradient(160deg,#6845ab,#211922); }
.p9 { height:95px; background:linear-gradient(160deg,#f6f6f3,#c8c8c1); }
.p10 { height:170px; background:linear-gradient(160deg,#ffb0dd,#7e238b); }
</style></head>
<body>
<nav>
<p class="brand">Pinterest</p>
<div class="navlinks"><span class="on">Home</span><span>Explore</span><span>Create</span></div>
<button class="btn-red">Sign up</button>
</nav>
<div class="headline">
<h1>Get your next idea</h1>
<p>Millions of ideas to explore, save, and try.</p>
</div>
<div class="masonry">
<div class="pin p1"><span class="save">Save</span></div>
<div class="pin p6"><span class="save">Save</span></div>
<div class="pin p2"></div>
<div class="pin p7"></div>
<div class="pin p3"><span class="save">Save</span></div>
<div class="pin p8"><span class="save">Save</span></div>
<div class="pin p4"></div>
<div class="pin p9"></div>
<div class="pin p5"></div>
<div class="pin p10"><span class="save">Save</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.4; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #f9fafb; color: #141414;
border: 1px solid #108474; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; background: #f9fafb; color: #555555;
border: 1px solid #c0c0c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fbcd0a; color: #141414;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9fafb; color:#141414; box-sizing:border-box;
font-family:'Nunito Sans', Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #dedede; }
.brand { font-size:18px; font-weight:700; margin:0; color:#141414; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; color:#141414; }
.btn-primary { background:#108474; color:#fff; border:none; border-radius:4px; padding:11px 22px; font-size:14px; font-weight:600; }
.hero { display:flex; align-items:center; padding:24px 36px; gap:30px; background:#edf5f5; }
.hero-copy { flex:1.1; }
.hero h1 { font-size:28px; font-weight:700; line-height:1.35; margin:0 0 8px; }
.hero p { font-size:15px; color:#555; margin:0 0 14px; line-height:1.6; max-width:400px; }
.row { display:flex; gap:10px; }
.btn-outline { background:#f9fafb; color:#141414; border:1px solid #dedede; border-radius:4px; padding:10px 22px; font-size:14px; font-weight:600; }
.hero-visual { flex:0.9; height:190px; position:relative; }
.chair-back { position:absolute; right:60px; top:10px; width:100px; height:130px; border-radius:16px;
background:linear-gradient(180deg,#141414,#333); }
.chair-seat { position:absolute; right:40px; top:120px; width:140px; height:36px; border-radius:8px; background:#108474; }
.chair-base { position:absolute; right:90px; bottom:10px; width:40px; height:36px; background:#7b7b7b; border-radius:0 0 8px 8px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:14px 36px 20px; }
.card { background:#fff; border-radius:8px; overflow:hidden; }
.card .imgbox { aspect-ratio:1/1; height:80px; background:#edf5f5; border-radius:8px 8px 0 0; position:relative; }
.badge-sale { position:absolute; top:8px; left:8px; background:#fbcd0a; color:#141414; font-size:10px; font-weight:700;
text-transform:uppercase; letter-spacing:0.5px; padding:2px 8px; border-radius:4px; }
.card .info { padding:10px 12px 12px; }
.card h3 { font-size:16px; font-weight:600; margin:0 0 4px; }
.card .price { font-size:14px; }
footer { background:#141414; color:#8c8c8c; padding:14px 36px; display:flex; justify-content:space-between;
align-items:center; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Boulies</p>
<div class="navlinks"><span>Gaming Chairs</span><span>Office Chairs</span><span>Standing Desks</span></div>
<button class="btn-primary">Shop Now</button>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Ergonomic seating for people who sit for a living</h1>
<p>Boulies is a furniture company that happens to serve gamers — engineered for stability and focus, not neon flash.</p>
<div class="row">
<button class="btn-primary">Shop Chairs</button>
<button class="btn-outline">Compare Models</button>
</div>
</div>
<div class="hero-visual"><div class="chair-back"></div><div class="chair-seat"></div><div class="chair-base"></div></div>
</section>
<section class="grid">
<div class="card"><div class="imgbox"><span class="badge-sale">Sale</span></div><div class="info"><h3>Master Series Chair</h3><div class="price">$419.99</div></div></div>
<div class="card"><div class="imgbox"></div><div class="info"><h3>EP Series Chair</h3><div class="price">$309.99</div></div></div>
<div class="card"><div class="imgbox"></div><div class="info"><h3>Electric Standing Desk</h3><div class="price">$389.99</div></div></div>
</section>
<footer>
<span>© Boulies</span>
<span>2-Year Warranty · Free Returns</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.1; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fdc415; color: #141414;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #141414;
border: 1px solid #fdc415; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #141414;
border: 1px solid #dfe0e1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #141414; color: #cbccce;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Endgame Gear — Home</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#141414; color:#fff;
font-family:'Source Sans Pro','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;}
.page{width:960px;height:640px;position:relative;display:flex;flex-direction:column;}
header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #2a2a2a;background:#141414;}
.logo{font-family:Arial Black,Arial,sans-serif;font-size:19px;font-weight:900;letter-spacing:-0.3px;color:#fff;}
.logo b{color:#fdc415;}
nav{display:flex;gap:22px;}
nav a{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#cbccce;}
.nav-cta{background:#fdc415;color:#141414;padding:7px 16px;border-radius:4px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.hero{position:relative;height:280px;display:flex;align-items:center;padding:0 28px;background:
radial-gradient(ellipse at 78% 50%, rgba(253,196,21,0.16), transparent 60%),
linear-gradient(180deg,#161616,#101010);border-bottom:1px solid #232323;}
.hero-copy{max-width:430px;z-index:2;}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fdc415;margin-bottom:10px;}
.hero h1{font-family:Arial Black,Arial,sans-serif;font-size:40px;font-weight:900;line-height:1.06;letter-spacing:-0.5px;margin:0 0 12px;color:#fff;}
.hero p{font-size:14px;color:#a7a9ab;line-height:1.5;margin:0 0 18px;max-width:380px;}
.hero-cta{display:inline-flex;align-items:center;gap:8px;background:#fdc415;color:#141414;padding:11px 20px;border-radius:4px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.spec-row{display:flex;gap:22px;margin-top:20px;}
.spec-row div{border-left:2px solid #fdc415;padding-left:9px;}
.spec-row b{display:block;font-family:Arial Black,Arial,sans-serif;font-size:18px;color:#fff;}
.spec-row span{font-size:10px;color:#8a8c8e;letter-spacing:0.5px;text-transform:uppercase;}
.device{position:absolute;right:60px;top:38px;width:260px;height:200px;z-index:1;}
.mouse-shape{position:absolute;right:40px;top:20px;width:120px;height:170px;border-radius:60px 60px 30px 30px;background:linear-gradient(160deg,#2a2a2a,#171717);border:1px solid #3a3a3a;box-shadow:0 0 40px rgba(253,196,21,0.25);}
.mouse-shape::after{content:'';position:absolute;top:14px;left:50%;transform:translateX(-50%);width:2px;height:60px;background:#fdc415;box-shadow:0 0 8px #fdc415;}
.pad{position:absolute;left:0;top:60px;width:150px;height:110px;border-radius:6px;background:linear-gradient(135deg,#1c1c1c,#101010);border:1px solid #2c2c2c;}
.pad::before{content:'ENDGAME';position:absolute;bottom:8px;left:10px;font-size:9px;letter-spacing:2px;color:#fdc415;font-weight:700;}
main{flex:1;padding:18px 28px 0;}
.row-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;}
.row-head h2{font-family:Arial Black,Arial,sans-serif;font-size:18px;margin:0;color:#fff;}
.row-head span{font-size:11px;color:#6eb80f;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#1a1a1a;border:1px solid #262626;border-radius:4px;padding:12px;position:relative;}
.card.hover{border-color:#fdc415;box-shadow:0 0 0 1px #fdc415;}
.thumb{height:78px;border-radius:4px;margin-bottom:10px;background:linear-gradient(150deg,#242424,#141414);position:relative;border:1px solid #2c2c2c;}
.thumb::after{content:'';position:absolute;left:14px;right:14px;top:50%;height:2px;background:#fdc415;opacity:0.5;}
.badge{position:absolute;top:8px;left:8px;font-size:8px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:3px 6px;border-radius:3px;}
.b-award{background:#fdc415;color:#141414;}
.b-sale{background:#6eb80f;color:#141414;}
.b-low{background:#ec2913;color:#fff;}
.card h4{font-size:12px;margin:0 0 4px;color:#e8e8e8;font-weight:600;}
.price{font-family:Arial Black,Arial,sans-serif;font-size:15px;color:#fdc415;}
.price s{font-size:11px;color:#5a5c5e;margin-left:6px;font-family:'Source Sans Pro';font-weight:400;}
footer{margin-top:16px;background:#003399;padding:14px 28px;display:flex;justify-content:space-between;align-items:center;}
.footer-links{display:flex;gap:18px;}
.footer-links span{font-size:10px;color:#cfe0ff;letter-spacing:0.5px;text-transform:uppercase;}
footer .fcopy{font-size:10px;color:#8fb4ff;}
</style>
<div class="page">
<header>
<div class="logo">Endgame Gear</div>
<nav>
<a>Mice</a><a>Keyboards</a><a>Pads</a><a>Software</a>
<div class="nav-cta">Configure</div>
</nav>
</header>
<div class="hero">
<div class="device"><div class="pad"></div><div class="mouse-shape"></div></div>
<div class="hero-copy">
<div class="eyebrow">XM2se Series — In Stock</div>
<h1>Built for the<br>frame that wins.</h1>
<p>Ultra-light shells, zero-lag optical switches, and firmware tuned for competitive play. No lifestyle branding — just voltage-tested hardware.</p>
<div class="hero-cta">Shop the Lineup</div>
<div class="spec-row">
<div><b>19.6g</b><span>Weight</span></div>
<div><b>26K</b><span>DPI Ceiling</span></div>
<div><b>0.2ms</b><span>Click Latency</span></div>
</div>
</div>
</div>
<main>
<div class="row-head"><h2>Performance Tier</h2><span>Certified Competitive Grade</span></div>
<div class="grid">
<div class="card hover"><div class="badge b-award">Award</div><div class="thumb"></div><h4>XM2se Wireless</h4><div class="price">$59.99</div></div>
<div class="card"><div class="badge b-sale">-15%</div><div class="thumb"></div><h4>OP1w 8K Optical</h4><div class="price">$74.99 <s>$89.99</s></div></div>
<div class="card"><div class="badge b-low">Low Stock</div><div class="thumb"></div><h4>EG75 Keyboard</h4><div class="price">$129.99</div></div>
<div class="card"><div class="thumb"></div><h4>MPC890 Pad</h4><div class="price">$24.99</div></div>
</div>
</main>
<footer>
<div class="footer-links"><span>Warranty</span><span>Firmware</span><span>Support</span><span>Distributors</span></div>
<div class="fcopy">© Endgame Gear Gaming Hardware</div>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #292929;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #292929;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #292929; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #bd202e; color: #fefefe;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #fefefe; color: #292929;
border: 1px solid #bd202e; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fefefe; color: #2d2d2d;
border: 1px solid #c9c9c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #25878c; color: #fefefe;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Iron Lion Collectibles</title>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#fefefe;font-family:'Roboto','Helvetica Neue',Arial,sans-serif;color:#2d2d2d;}
*{box-sizing:border-box;}
.nav{position:absolute;top:0;left:0;width:960px;height:64px;background:#bd202e;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fefefe;font-weight:700;font-size:19px;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:500;color:#fefefe;letter-spacing:0.3px;}
.searchpill{width:220px;height:32px;border-radius:9999px;background:#fefefe;display:flex;align-items:center;padding:0 14px;font-size:12px;color:#6a6a6a;}
.hero{position:absolute;top:64px;left:0;width:960px;height:200px;background:#f7f7f7;display:flex;align-items:center;padding:0 44px;}
.hero h1{font-size:28px;font-weight:700;color:#292929;margin:0 0 12px 0;width:440px;}
.hero p{font-size:14px;color:#2d2d2d;margin:0 0 18px 0;width:420px;}
.cta{background:#bd202e;color:#fefefe;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:600;letter-spacing:0.5px;display:inline-block;}
.cardart{position:absolute;right:70px;top:36px;width:120px;height:170px;background:linear-gradient(160deg,#25878c,#1a6669);border-radius:8px;transform:rotate(-6deg);}
.cardart2{position:absolute;right:110px;top:50px;width:120px;height:170px;background:linear-gradient(160deg,#bd202e,#7c1316);border-radius:8px;transform:rotate(6deg);}
.filterrow{position:absolute;top:288px;left:32px;width:896px;height:34px;display:flex;gap:10px;}
.pill{background:#f7f7f7;color:#2d2d2d;border-radius:9999px;font-size:13px;font-weight:500;padding:6px 16px;}
.pill.active{background:#bd202e;color:#fefefe;}
.grid{position:absolute;top:340px;left:32px;width:896px;height:264px;display:flex;gap:16px;}
.card{width:207px;background:#fff;border-radius:8px;padding:12px;position:relative;}
.imgbox{width:183px;height:183px;border-radius:8px;margin-bottom:10px;}
.imgbox.a{background:linear-gradient(160deg,#25878c,#1a6669);}
.imgbox.b{background:linear-gradient(160deg,#bd202e,#7c1316);}
.imgbox.c{background:linear-gradient(160deg,#292929,#454545);}
.imgbox.d{background:linear-gradient(160deg,#1199ff,#0d6fb8);}
.salebadge{position:absolute;top:20px;left:20px;background:#25878c;color:#fefefe;font-size:11px;font-weight:700;text-transform:uppercase;border-radius:4px;padding:2px 8px;}
.newbadge{position:absolute;top:20px;left:20px;background:#1199ff;color:#fefefe;font-size:11px;font-weight:700;text-transform:uppercase;border-radius:4px;padding:2px 6px;}
.title{font-size:16px;font-weight:500;margin-bottom:6px;color:#292929;}
.price{font-size:18px;font-weight:700;color:#292929;}
</style>
<div class="nav">
<div class="logo">Iron Lion Collectibles</div>
<div class="navlinks"><span>Singles</span><span>Sealed Product</span><span>Graded</span></div>
<div class="searchpill">Search cards, sets…</div>
</div>
<div class="hero">
<h1>Every card. Every set. Priced to trade.</h1>
<p>A curated marketplace for trading card collectors — singles, sealed boxes, and graded slabs.</p>
<div class="cta">Browse Marketplace</div>
<div class="cardart2"></div>
<div class="cardart"></div>
</div>
<div class="filterrow">
<div class="pill active">All Cards</div>
<div class="pill">Pokémon</div>
<div class="pill">Magic</div>
<div class="pill">Sports</div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox a"><div class="salebadge">Sale</div></div>
<div class="title">Charizard Holo 1st Ed.</div>
<div class="price">$1,299.00</div>
</div>
<div class="card">
<div class="imgbox b"></div>
<div class="title">Black Lotus (LP)</div>
<div class="price">$8,450.00</div>
</div>
<div class="card">
<div class="imgbox c"><div class="newbadge">New</div></div>
<div class="title">Elite Trainer Box — Scarlet</div>
<div class="price">$54.99</div>
</div>
<div class="card">
<div class="imgbox d"></div>
<div class="title">PSA 10 Rookie Card</div>
<div class="price">$389.00</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #262627;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #262627;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #262627; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 500; line-height: 1.4; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #3e34d3; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: transparent; color: #3e34d3;
border: 1px solid #3e34d3; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #262627;
border: 1px solid #c9c9c9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.2px; background: #3e34d3; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#262627; box-sizing:border-box;
font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#000309; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { color:#fff; font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#fff; font-size:14px; font-weight:500; }
.navcta { background:#3e34d3; color:#fff; border:none; border-radius:4px; padding:9px 18px; font-size:13px; font-weight:600; }
main { display:flex; height:calc(640px - 60px); }
.gallery { width:44%; background:#23263b; display:flex; align-items:center; justify-content:center; }
.machine { width:260px; height:200px; border:2px solid #5468ff; border-radius:8px; position:relative;
background:linear-gradient(145deg,#2c2f45,#1a1c2b); }
.machine::before { content:''; position:absolute; left:20px; top:20px; right:20px; bottom:60px; border:1px dashed #7777a3; border-radius:4px; }
.machine::after { content:''; position:absolute; left:40%; top:30px; width:20px; height:100px; background:#3e34d3; border-radius:2px; }
.details { width:56%; padding:28px 36px; }
.badge-sw { display:inline-block; background:#3e34d3; color:#fff; font-size:11px; font-weight:700; letter-spacing:1.2px;
text-transform:uppercase; border-radius:2px; padding:4px 8px; margin-bottom:10px; }
h1 { font-size:30px; font-weight:700; letter-spacing:-0.3px; margin:0 0 8px; }
.price { font-size:20px; font-weight:700; letter-spacing:-0.2px; margin:0 0 14px; }
.desc { font-size:15px; line-height:1.5; color:#2c2e40; margin:0 0 18px; max-width:400px; }
.spectable { background:#f5f5fa; border-radius:8px; border-left:3px solid #3e34d3; margin-bottom:20px; overflow:hidden; }
.specrow { display:flex; justify-content:space-between; padding:8px 16px; font-size:13px; }
.specrow:nth-child(even) { background:#ffffff; }
.specrow span:first-child { color:#777777; }
.specrow span:last-child { font-family:'SF Mono','Consolas',monospace; color:#262627; font-weight:500; }
.buyrow { display:flex; gap:12px; }
.btn-primary { background:#3e34d3; color:#fff; border:none; border-radius:4px; padding:12px 24px; font-size:15px; font-weight:600; }
.btn-secondary { background:transparent; color:#3e34d3; border:1.5px solid #3e34d3; border-radius:4px; padding:11px 23px; font-size:15px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Carbide 3D</p>
<div class="navlinks"><span>Machines</span><span>Software</span><span>Accessories</span><span>Support</span></div>
<button class="navcta">Shop</button>
</nav>
<main>
<div class="gallery"><div class="machine"></div></div>
<div class="details">
<span class="badge-sw">Carbide Create</span>
<h1>Shapeoko 5 Pro</h1>
<p class="price">$2,899</p>
<p class="desc">Desktop CNC router built for precision cutting in wood, aluminum, and composites — probing wizard included.</p>
<div class="spectable">
<div class="specrow"><span>Cutting Area</span><span>32in x 32in</span></div>
<div class="specrow"><span>Spindle</span><span>65mm Router</span></div>
<div class="specrow"><span>Max Feed Rate</span><span>10000 mm/min</span></div>
<div class="specrow"><span>Software</span><span>Carbide Motion</span></div>
</div>
<div class="buyrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compare Machines</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; letter-spacing: 0px; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #d20000; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fafafa; color: #212121;
border: 1px solid #d20000; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #fafafa; color: #212121;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d20000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#212121; box-sizing:border-box;
font-family:'Helvetica Now Display','Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
background:#212121; }
.brand { font-size:17px; font-weight:700; color:#fff; letter-spacing:0.04em; text-transform:uppercase; }
.navlinks { display:flex; gap:24px; font-size:12.5px; color:#959595; font-weight:500; }
.search-orb { width:170px; height:28px; border-radius:9999px; background:#404040; position:relative; }
.search-orb::after { content:''; position:absolute; right:6px; top:6px; width:16px; height:16px;
border-radius:50%; background:#1199ff; }
main { display:flex; height:580px; }
.gallery { width:420px; background:#f2f2f2; position:relative; display:flex; align-items:center; justify-content:center; }
.pack { width:190px; height:260px; background:linear-gradient(160deg,#404040 0%,#212121 100%);
border-radius:16px 16px 30px 30px; position:relative; box-shadow:0 20px 40px rgba(0,0,0,0.22); }
.pack::before { content:''; position:absolute; top:-16px; left:50%; transform:translateX(-50%);
width:70px; height:26px; border:4px solid #575757; border-bottom:none; border-radius:16px 16px 0 0; }
.pack::after { content:''; position:absolute; top:40px; left:14px; right:14px; height:2px; background:#707070; }
.zip { position:absolute; top:60px; left:24px; right:24px; height:150px; border:1.5px dashed #575757; border-radius:8px; }
.badge-sale { position:absolute; top:20px; left:20px; background:#d20000; color:#fff; font-size:10px;
font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:5px 10px; border-radius:2px; }
.thumbs { position:absolute; bottom:22px; display:flex; gap:8px; }
.thumb { width:34px; height:34px; background:#e3e3e3; border:1px solid #d9d9d9; }
.info { flex:1; padding:32px 38px; display:flex; flex-direction:column; gap:12px; background:#fff; }
.cat { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:#707070; }
h1 { font-size:23px; font-weight:700; margin:0; letter-spacing:-0.2px; line-height:1.3; }
.stars { font-size:12px; color:#212121; }
.stars .n { color:#707070; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:21px; font-weight:700; }
.price-old { font-size:14px; color:#959595; text-decoration:line-through; }
.desc { font-size:13.5px; color:#404040; line-height:1.55; max-width:340px; }
.color-row { display:flex; gap:8px; }
.swatch { width:26px; height:26px; border-radius:9999px; border:2px solid #fff; box-shadow:0 0 0 1px #d9d9d9; }
.swatch.on { box-shadow:0 0 0 2px #212121; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#000000; color:#fff; border:none; border-radius:2px; padding:14px 18px;
font-size:14px; font-weight:700; letter-spacing:0.02em; }
.btn-outline { border:1.5px solid #212121; color:#212121; background:#fff; border-radius:2px; padding:12.5px 16px;
font-size:12.5px; font-weight:700; white-space:nowrap; }
.meta { font-size:11px; color:#959595; }
</style></head>
<body>
<nav>
<div class="brand">Aer</div>
<div class="navlinks"><span>Bags</span><span>Travel</span><span>Tech</span><span>Sale</span></div>
<div class="search-orb"></div>
</nav>
<main>
<div class="gallery">
<span class="badge-sale">Sale</span>
<div class="pack"><div class="zip"></div></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Travel Pack · 28L</span>
<h1>Aer Travel Pack 3 X-Pac</h1>
<div class="stars">★★★★★ <span class="n">4.7 · 2,930 reviews</span></div>
<div class="price-row"><span class="price">$249.00</span><span class="price-old">$289.00</span></div>
<p class="desc">A structured, weatherproof carry-on built from ripstop X-Pac — clamshell access, dedicated laptop compartment, zero wasted space.</p>
<div class="color-row">
<div class="swatch on" style="background:#212121"></div>
<div class="swatch" style="background:#707070"></div>
<div class="swatch" style="background:#d20000"></div>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">Notify Restock</button>
</div>
<span class="meta">Only 4 left · Free shipping over $75</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1B1B1B;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1B1B1B;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1B1B1B; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6B6B6B; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #C41230; color: #FFFFFF;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #FFFFFF; color: #1B1B1B;
border: 1px solid #C41230; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1B1B1B;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B6B6B; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #C41230; color: #FFFFFF;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#1B1B1B; }
*{box-sizing:border-box;}
.nav{height:64px;background:#1B1B1B;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{color:#fff;font-size:18px;font-weight:700;letter-spacing:0.5px;}
.navlinks{display:flex;gap:26px;font-size:14px;font-weight:500;color:#fff;}
.hero{height:250px;background:#F5F5F5;display:flex;align-items:center;padding:0 40px;}
.herotext{width:46%;}
.herotext h1{font-size:36px;font-weight:600;line-height:1.15;margin:0 0 12px;}
.herotext p{font-size:15px;color:#333;margin:0 0 16px;max-width:340px;}
.btn{display:inline-block;background:#C41230;color:#fff;font-size:16px;font-weight:600;letter-spacing:0.3px;padding:14px 30px;border-radius:4px;}
.mixer{width:54%;height:210px;position:relative;}
.mixerbody{position:absolute;right:60px;top:20px;width:180px;height:150px;background:linear-gradient(160deg,#C41230,#7a0a1c);border-radius:12px;}
.mixerbody:before{content:'';position:absolute;left:20px;top:-30px;width:60px;height:60px;background:#C41230;border-radius:50%;}
.swatchrow{display:flex;gap:8px;padding:14px 40px 0;}
.swatch{width:20px;height:20px;border-radius:50%;}
.sectitle{font-size:18px;font-weight:600;padding:16px 40px 12px;margin:0;}
.grid{display:flex;gap:20px;padding:0 40px;}
.card{width:196px;border:1px solid #EBEBEB;border-radius:8px;padding:16px;text-align:center;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#C41230;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.pimg{aspect-ratio:1/1;background:#F5F5F5;border-radius:4px;margin-bottom:10px;}
.ptitle{font-size:14px;font-weight:600;}
.pprice{font-size:16px;font-weight:700;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#1B1B1B;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kitchenaid</div>
<div class="navlinks"><div>Stand Mixers</div><div>Blenders</div><div>Cookware</div><div>Support</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>The mixer, in Empire Red since 1955.</h1>
<p>Die-cast zinc alloy, 40+ colors, and every attachment your kitchen will ever need.</p>
<div class="btn">Shop Mixers</div>
</div>
<div class="mixer"><div class="mixerbody"></div></div>
</div>
<div class="swatchrow">
<div class="swatch" style="background:#C41230;border:2px solid #1B1B1B"></div>
<div class="swatch" style="background:#1B1B1B"></div>
<div class="swatch" style="background:#F9A825"></div>
<div class="swatch" style="background:#2E7D32"></div>
<div class="swatch" style="background:#999999"></div>
</div>
<div class="sectitle">Artisan Series</div>
<div class="grid">
<div class="card"><div class="badge">New Color</div><div class="pimg" style="background:linear-gradient(160deg,#C41230,#1B1B1B)"></div><div class="ptitle">Artisan Stand Mixer</div><div class="pprice">$429.99</div></div>
<div class="card"><div class="pimg" style="background:linear-gradient(160deg,#F9A825,#1B1B1B)"></div><div class="ptitle">K400 Blender</div><div class="pprice">$249.99</div></div>
<div class="card"><div class="pimg" style="background:linear-gradient(160deg,#2E7D32,#F5F5F5)"></div><div class="ptitle">Hard-Anodized Cookware Set</div><div class="pprice">$349.99</div></div>
</div>
<div class="footer"><span>Products · Support</span><span>Find a Retailer</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #222222; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #222222;
border: 1px solid #222222; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c0392b; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#333333; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:20px;font-weight:700;color:#222222;letter-spacing:-0.3px;}
.navlinks{display:flex;}
.navlinks div{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#222222;padding:0 16px;border-left:1px solid #e0e0e0;}
.navlinks div:first-child{border-left:none;}
.hero{height:230px;position:relative;background:#f5f5f5;overflow:hidden;}
.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,#222222 0%,#6a6a6a 60%,#f5f5f5 100%);}
.herotext{position:relative;width:420px;height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 32px;}
.herotext h1{font-size:30px;font-weight:700;color:#fff;margin:0 0 10px;letter-spacing:-0.4px;line-height:1.2;}
.herotext p{font-size:14px;color:#e0e0e0;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#222222;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:14px 28px;border-radius:4px;width:fit-content;}
.mountain{position:absolute;right:0;bottom:0;width:0;height:0;border-style:solid;border-width:0 260px 180px 0;border-color:transparent #c0392b transparent transparent;opacity:0.9;}
.section{padding:16px 32px 0;}
.sectitle{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#6a6a6a;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:150px;background:#fff;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,0.08);position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#c0392b;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:2px 8px;border-radius:2px;}
.thumb{aspect-ratio:1/1;border-radius:4px 4px 0 0;}
.body{padding:10px;}
.pname{font-size:16px;font-weight:600;color:#222222;}
.pprice{font-size:16px;color:#222222;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#f5f5f5;color:#6a6a6a;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">LA Sportiva</div>
<div class="navlinks"><div>Mountaineering</div><div>Climbing</div><div>Trail Running</div><div>Find Your Fit</div></div>
</div>
<div class="hero">
<div class="mountain"></div>
<div class="herotext">
<h1>Built on granite. Tested on ice.</h1>
<p>Footwear engineered for the mountain, not the marketing.</p>
<div class="cta">Find Your Fit</div>
</div>
</div>
<div class="section">
<div class="sectitle">Featured Footwear</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#c0392b,#222222)"></div><div class="body"><div class="pname">Mythos Eco</div><div class="pprice">$139.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#27ae60,#222222)"></div><div class="body"><div class="pname">TX4 Evo</div><div class="pprice">$159.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f39c12,#222222)"></div><div class="body"><div class="pname">Nucleo High GTX</div><div class="pprice">$219.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#6a6a6a,#222222)"></div><div class="body"><div class="pname">Kaptiva</div><div class="pprice">$135.00</div></div></div>
</div>
</div>
<div class="footer"><span>© La Sportiva 1928</span><span>Size Guide · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdfcfa; color: #2b2b2b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdfcfa; color: #2b2b2b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #2b2b2b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #747474; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #b79b54; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #fdfcfa; color: #b79b54;
border: 1px solid #b79b54; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #fdfcfa; color: #2b2b2b;
border: 1px solid #d9d9d9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #747474; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #890000; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fdfcfa; color:#2b2b2b; box-sizing:border-box;
font-family:Lora, 'Addington CF', Georgia, 'Times New Roman', serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:58px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #d9d9d9; background:#fdfcfa; }
.brand { font-family:'Addington CF', Lora, Georgia, serif; font-size:20px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:22px; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:13px; color:#2b2b2b; }
.navicons { display:flex; gap:16px; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12px; color:#747474; }
.hero { flex:0 0 auto; padding:22px 40px 14px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.hero-copy { max-width:420px; }
.hero-copy h1 { font-family:'Addington CF', Lora, Georgia, serif; font-size:30px; font-weight:700; line-height:1.14;
letter-spacing:-0.4px; margin:0 0 8px; }
.hero-copy p { font-size:14px; color:#444444; margin:0 0 14px; line-height:1.5; }
.hero-copy button { background:#b79b54; color:#fff; border:none; border-radius:4px; padding:12px 24px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:13px; font-weight:500; letter-spacing:0.5px; }
.hero-visual { width:190px; height:120px; background:linear-gradient(150deg,#d9d1c2,#b79b54); flex:0 0 auto; }
.filters { flex:0 0 auto; display:flex; gap:10px; padding:6px 40px 10px; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; }
.pill { border-radius:999px; padding:6px 14px; font-size:12px; background:#f2f2f2; color:#2b2b2b; }
.pill.active { border:1px solid #b79b54; color:#b79b54; background:#fdfcfa; }
.products { flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:0 40px 8px; min-height:0; }
.card { display:flex; flex-direction:column; gap:6px; }
.imgwrap { position:relative; flex:1; min-height:0; }
.status { position:absolute; top:8px; left:8px; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; padding:3px 8px; color:#fff; z-index:2; }
.status.sold { background:#890000; }
.status.available { background:#005f16; }
.a1 .imgwrap { background:linear-gradient(150deg,#b5dced,#2b2b2b); }
.a2 .imgwrap { background:linear-gradient(150deg,#ddcee2,#8d7840); }
.a3 .imgwrap { background:linear-gradient(150deg,#efe7a5,#444444); }
.a4 .imgwrap { background:linear-gradient(150deg,#f3d6b9,#2b2b2b); }
.tags { display:flex; gap:4px; margin:2px 0 0; }
.tag { font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:10px; font-weight:600; text-transform:uppercase;
letter-spacing:0.3px; border-radius:999px; padding:2px 8px; color:#2b2b2b; }
.tag.blue { background:#b5dced; }
.tag.lavender { background:#ddcee2; }
.tag.yellow { background:#efe7a5; }
.tag.peach { background:#f3d6b9; }
.cardmeta .title { font-family:'Addington CF', Lora, Georgia, serif; font-size:14px; font-weight:500; margin:2px 0 1px; }
.cardmeta .artist { font-size:12px; color:#747474; margin:0 0 3px; }
.cardmeta .price { font-family:'Addington CF', Lora, Georgia, serif; font-size:14px; font-weight:600; margin:0; }
footer { flex:0 0 auto; background:#2b2b2b; color:#ffffff; padding:11px 40px; display:flex;
justify-content:space-between; align-items:center; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:11px; }
footer .flinks span { margin-left:16px; color:#acacac; }
</style></head>
<body>
<nav>
<p class="brand">Artling</p>
<div class="navlinks"><span>Discover</span><span>Artists</span><span>Photography</span><span>Sculpture</span></div>
<div class="navicons"><span>Sell With Us</span><span>Account</span><span>Cart</span></div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Original art, delivered with confidence</h1>
<p>Discover contemporary works from over 700 galleries and independent artists worldwide.</p>
<button>Explore Collections</button>
</div>
<div class="hero-visual"></div>
</section>
<div class="filters">
<span class="pill active">All Works</span>
<span class="pill">Photography</span>
<span class="pill">Sculpture</span>
<span class="pill">Prints</span>
<span class="pill">Under $1,000</span>
</div>
<section class="products">
<div class="card a1">
<div class="imgwrap"><span class="status available">Available</span></div>
<div class="cardmeta">
<div class="tags"><span class="tag blue">Photography</span></div>
<p class="title">Coastal Fog Study</p>
<p class="artist">Alex M.</p>
<p class="price">$1,200</p>
</div>
</div>
<div class="card a2">
<div class="imgwrap"><span class="status sold">Sold</span></div>
<div class="cardmeta">
<div class="tags"><span class="tag lavender">Prints</span></div>
<p class="title">Fragmented Light II</p>
<p class="artist">Jordan T.</p>
<p class="price">$860</p>
</div>
</div>
<div class="card a3">
<div class="imgwrap"><span class="status available">Available</span></div>
<div class="cardmeta">
<div class="tags"><span class="tag yellow">Works on Paper</span></div>
<p class="title">Quiet Interior No. 3</p>
<p class="artist">Sam K.</p>
<p class="price">$540</p>
</div>
</div>
<div class="card a4">
<div class="imgwrap"><span class="status available">Available</span></div>
<div class="cardmeta">
<div class="tags"><span class="tag peach">Ceramics</span></div>
<p class="title">Vessel Series, Form 6</p>
<p class="artist">Riley P.</p>
<p class="price">$980</p>
</div>
</div>
</section>
<footer>
<span>© Artling</span>
<span class="flinks"><span>About</span><span>Discover</span><span>Support</span></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2c2a29;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2c2a29;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #2c2a29; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; background: #0064af; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #2c2a29;
border: 1px solid #0064af; border-radius: 4px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2c2a29;
border: 1px solid #cacaca; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #dff0d8; color: #3c763d;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#2c2a29; font-family:Arial, Helvetica, sans-serif; }
*{box-sizing:border-box;}
.utility{height:36px;background:#2c2a29;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;}
.nav{height:50px;background:#0064af;display:flex;align-items:center;justify-content:space-between;padding:0 16px;}
.logo{font-family:'Metropolis',Arial,sans-serif;font-size:17px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:16px;font-family:'Metropolis',Arial,sans-serif;font-size:14px;font-weight:600;color:#fff;}
.body{display:flex;padding:14px 16px 0;gap:16px;}
.sidebar{width:150px;background:#f5f5f5;border:1px solid #eeeeee;padding:10px;font-size:14px;flex-shrink:0;}
.sidebar .h{font-family:'Metropolis',Arial,sans-serif;font-weight:700;font-size:13px;margin-bottom:6px;}
.sidebar div.item{padding:4px 0;color:#595959;}
.sidebar div.item.active{color:#0064af;font-weight:600;}
.main{flex:1;}
.pcard{border:1px solid #eeeeee;padding:12px;display:flex;gap:14px;}
.pimg{width:120px;height:120px;background:#f5f5f5;border-radius:2px;flex-shrink:0;}
.pinfo{flex:1;}
.pinfo h1{font-family:'Metropolis',Arial,sans-serif;font-size:18px;font-weight:600;margin:0 0 4px;}
.pinfo .price{font-family:'Metropolis',Arial,sans-serif;font-size:20px;font-weight:700;color:#cb090d;margin:6px 0;}
.instock{display:inline-block;background:#dff0d8;color:#3c763d;font-family:'Metropolis',Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:2px;}
.btnrow{display:flex;gap:8px;margin-top:10px;}
.btn{background:#0064af;color:#fff;font-family:'Metropolis',Arial,sans-serif;font-size:14px;font-weight:600;padding:8px 16px;border-radius:4px;}
.datatable{margin-top:12px;border:1px solid #eeeeee;}
.trow{display:flex;border-bottom:1px solid #eeeeee;}
.trow:last-child{border-bottom:none;}
.trow div{flex:1;padding:6px 12px;font-size:13px;}
.trow.head{background:#f5f5f5;}
.trow.head div{font-family:'Metropolis',Arial,sans-serif;font-weight:700;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#2c2a29;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="utility"><span>1-800-555-0142</span><span>My Account Cart (3)</span></div>
<div class="nav">
<div class="logo">RC Fastener</div>
<div class="navlinks"><div>Bolts</div><div>Nuts</div><div>Washers</div><div>Drive Screws</div></div>
</div>
<div class="body">
<div class="sidebar">
<div class="h">Grade</div>
<div class="item active">Grade 8</div>
<div class="item">Grade 5</div>
<div class="item">18-8 Stainless</div>
<div class="h" style="margin-top:10px;">Thread Pitch</div>
<div class="item">1/2"-13</div>
<div class="item">3/8"-16</div>
</div>
<div class="main">
<div class="pcard">
<div class="pimg"></div>
<div class="pinfo">
<h1>1/2"-13 Hex Head Cap Screw, Grade 8</h1>
<div class="instock">In Stock</div>
<div class="price">Unit Price: $0.34</div>
<div class="btnrow"><div class="btn">Add to Cart</div></div>
</div>
</div>
<div class="datatable">
<div class="trow head"><div>Length</div><div>Qty Tier</div><div>Unit Price</div></div>
<div class="trow"><div>1.5"</div><div>100-499</div><div>$0.34</div></div>
<div class="trow"><div>1.5"</div><div>500-999</div><div>$0.29</div></div>
<div class="trow"><div>1.5"</div><div>1000+</div><div>$0.24</div></div>
</div>
</div>
</div>
<div class="footer"><span>© RC Fastener, Wholesale Supply</span><span>MOQ Policy Lead Times</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6e6e6e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.6px; background: #566f54; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.6px; background: #ffffff; color: #121212;
border: 1px solid #566f54; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e6e6e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #566f54; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:system-ui,-apple-system,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-family:Georgia,serif;font-size:20px;font-weight:700;color:#566f54;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;}
.search{background:#f4f4f4;border:1px solid #dedede;border-radius:4px;padding:10px 16px;font-size:14px;color:#6e6e6e;width:200px;}
.breadcrumb{font-size:12px;color:#6e6e6e;padding:10px 32px 0;}
.hero{background:#566f54;color:#fff;position:relative;padding:36px 32px;min-height:150px;display:flex;flex-direction:column;justify-content:center;}
.hero:before{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.35);}
.hero h1{font-family:Georgia,serif;font-size:30px;font-weight:700;margin:0;z-index:2;position:relative;}
.grid{display:flex;gap:14px;padding:20px 32px;}
.card{flex:1;border:1px solid #dedede;border-radius:4px;padding:14px;position:relative;}
.thumb{aspect-ratio:4/3;background:#f4f4f4;border-radius:4px;margin-bottom:10px;}
.badges{display:flex;gap:6px;position:absolute;top:22px;left:22px;}
.condbadge{background:#566f54;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.periodtag{background:#f4f4f4;border:1px solid #dedede;color:#444;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.soldbadge{background:#ff0000;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.title{font-size:15px;font-weight:600;margin-top:4px;}
.itemno{font-size:11px;color:#6e6e6e;background:#f4f4f4;border:1px solid #dedede;border-radius:4px;padding:2px 6px;display:inline-block;margin-top:6px;}
.price{font-family:Georgia,serif;font-size:20px;font-weight:700;color:#566f54;margin-top:8px;}
</style>
<div class="nav">
<div class="logo">Ruptured Duck</div>
<div class="navlinks"><div>US Militaria</div><div>German Third Reich</div><div>Insignia</div></div>
<div class="search">Search item number...</div>
</div>
<div class="breadcrumb">Home > US Militaria > Air Corps > Leather Flying Jackets</div>
<div class="hero"><h1>The object does the selling.</h1></div>
<div class="grid">
<div class="card"><div class="badges"><span class="condbadge">Excellent</span><span class="periodtag">WW2</span></div><div class="thumb"></div><div class="title">A-2 Leather Flying Jacket</div><div class="itemno">Item #A2-1943-07</div><div class="price">$1,850.00</div></div>
<div class="card"><div class="badges"><span class="condbadge">Very Good</span><span class="periodtag">Korea</span></div><div class="thumb"></div><div class="title">M-1951 Field Jacket</div><div class="itemno">Item #K51-2210</div><div class="price">$420.00</div></div>
<div class="card"><div class="badges"><span class="soldbadge">Sold</span><span class="periodtag">WW2</span></div><div class="thumb"></div><div class="title">Honorable Discharge Pin</div><div class="itemno">Item #RD-0044</div><div class="price">$95.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c805; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c805; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c805; color: #000000;
border: 1px solid #ff5000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c805; color: #000000;
border: 1px solid #27cf2b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29b504; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; font-variant-numeric: tabular-nums; }
.topbar { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; border-bottom:0.5px solid #E6E6E6; }
.title { font-size:20px; font-weight:700; }
.icons { display:flex; gap:16px; color:#5C6166; font-size:16px; }
.hero { padding:20px 34px 6px; }
.label { font-size:11px; font-weight:700; letter-spacing:.6px; color:#5C6166; text-transform:uppercase; }
.value { font-size:38px; font-weight:700; margin-top:6px; letter-spacing:-0.5px; }
.change { font-size:15px; font-weight:500; color:#00C805; margin-top:4px; }
.chart-wrap { padding:8px 0 0; position:relative; height:150px; margin:0 34px; }
svg { width:100%; height:100%; display:block; }
.range-row { display:flex; gap:22px; padding:10px 34px 0; }
.range { font-size:13px; font-weight:600; color:#5C6166; letter-spacing:.3px; }
.range.on { color:#000; border-bottom:2px solid #00C805; padding-bottom:6px; }
.list { padding:16px 34px; }
.row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:0.5px solid #E6E6E6; }
.row:last-child { border-bottom:none; }
.lead { display:flex; align-items:center; gap:12px; }
.logo { width:32px; height:32px; border-radius:8px; }
.co { font-size:16px; font-weight:600; }
.tick { font-size:13px; color:#5C6166; letter-spacing:.3px; }
.right { text-align:right; }
.mv { font-size:17px; font-weight:500; }
.dc { font-size:13px; font-weight:500; }
.up { color:#00C805; }
.down { color:#FF5000; }
.footer { position:absolute; bottom:0; left:0; right:0; height:64px; background:#fff; border-top:0.5px solid #E6E6E6;
display:flex; align-items:center; padding:0 34px; }
.trade { flex:1; background:#000; color:#fff; height:48px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:16px; }
.side { width:300px; padding:20px 20px 0; float:right; }
</style></head>
<body>
<div class="topbar"><div class="title">Robinhood (iOS)</div><div class="icons">⌕ ◎</div></div>
<div style="display:flex;">
<div style="flex:1;">
<div class="hero">
<div class="label">Buying power</div>
<div class="value">$24,847.93</div>
<div class="change">+$847.93 (+3.52%) Today</div>
</div>
<div class="chart-wrap">
<svg viewBox="0 0 600 150" preserveAspectRatio="none">
<polyline fill="none" stroke="#00C805" stroke-width="2.5" points="0,90 60,70 120,95 180,60 240,80 300,40 360,55 420,30 480,50 540,20 600,35"/>
</svg>
</div>
<div class="range-row">
<div class="range on">1D</div><div class="range">1W</div><div class="range">1M</div><div class="range">3M</div><div class="range">YTD</div><div class="range">1Y</div><div class="range">ALL</div>
</div>
<div class="list">
<div class="row"><div class="lead"><div class="logo" style="background:#000;"></div><div><div class="co">Apple Inc.</div><div class="tick">AAPL · 4 shares</div></div></div><div class="right"><div class="mv">$1,247.92</div><div class="dc up">+$24.13 (+1.97%)</div></div></div>
<div class="row"><div class="lead"><div class="logo" style="background:linear-gradient(135deg,#5865F2,#4752C4);"></div><div><div class="co">Robinhood Markets</div><div class="tick">HOOD · 20 shares</div></div></div><div class="right"><div class="mv">$412.60</div><div class="dc down">-$8.20 (-1.95%)</div></div></div>
<div class="row"><div class="lead"><div class="logo" style="background:linear-gradient(135deg,#F7931A,#c9760a);"></div><div><div class="co">Bitcoin</div><div class="tick">BTC · 0.021</div></div></div><div class="right"><div class="mv">$1,940.10</div><div class="dc up">+$62.40 (+3.32%)</div></div></div>
<div class="row"><div class="lead"><div class="logo" style="background:#627EEA;"></div><div><div class="co">Ethereum</div><div class="tick">ETH · 1.4</div></div></div><div class="right"><div class="mv">$3,120.55</div><div class="dc up">+$40.00</div></div></div>
</div>
</div>
<div class="side">
<div style="font-size:13px;font-weight:700;color:#5C6166;margin-bottom:10px;">Lists</div>
<div style="font-size:14px;font-weight:600;padding:8px 0;border-bottom:0.5px solid #E6E6E6;">Watchlist</div>
<div style="font-size:14px;font-weight:600;padding:8px 0;border-bottom:0.5px solid #E6E6E6;">Tech Movers</div>
<div style="font-size:14px;font-weight:600;padding:8px 0;">Dividend Payers</div>
</div>
</div>
<div class="footer"><div class="trade">Trade</div></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.27; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #5a5a5a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.25; background: #165dba; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.25; background: #ffffff; color: #165dba;
border: 1px solid #165dba; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #231f20;
border: 1px solid #c8c7c7; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a5a5a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.17; letter-spacing: 0.2px; background: #cceaf7; color: #165dba;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>HP Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'HPSimplifiedRegular','Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#2c3038; }
*{box-sizing:border-box;}
.utilbar{height:24px;background:#f5f5f5;color:#5a5a5a;font-size:11px;display:flex;align-items:center;justify-content:flex-end;padding:0 32px;gap:16px;}
.nav{height:48px;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;padding:0 32px;justify-content:space-between;}
.logo{font-family:'HPSimplifiedLight',Arial,sans-serif;font-weight:300;font-size:22px;color:#165dba;}
.navlinks{display:flex;gap:20px;font-size:13px;}
.hero{background:#f5f5f5;height:220px;display:flex;align-items:center;padding:0 32px;gap:30px;}
.hero-visual{width:300px;height:170px;background:linear-gradient(135deg,#e8f0fb,#cceaf7);border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#7fa8d0;font-size:11px;}
.hero-txt h1{font-family:'HPSimplifiedLight',Arial,sans-serif;font-weight:300;font-size:34px;line-height:1.2;margin:0 0 10px;}
.hero-txt p{font-size:14px;color:#5a5a5a;margin:0 0 14px;max-width:340px;}
.btn{display:inline-block;background:#165dba;color:#fff;font-size:15px;padding:11px 22px;border-radius:4px;}
.section{padding:12px 32px;}
.section h2{font-size:18px;font-weight:400;margin:0 0 12px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{border:1px solid #e8e8e8;border-radius:8px;padding:12px;}
.imgbox{height:70px;background:#f5f5f5;border-radius:4px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:#767676;font-size:9px;text-align:center;}
.catbadge{display:inline-block;background:#cceaf7;color:#165dba;font-size:11px;padding:3px 8px;border-radius:4px;margin-bottom:6px;}
.catbadge.omen{background:#7d3894;color:#fff;}
.catbadge.spectre{background:#debc33;color:#231f20;}
.pname{font-size:16px;margin:0 0 4px;}
.spec{font-size:12px;color:#5a5a5a;margin:0 0 6px;}
.price{font-size:19px;}
.strike{font-size:12px;color:#5a5a5a;text-decoration:line-through;margin-left:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#2c3038;color:#fff;padding:14px 32px;display:flex;justify-content:space-between;font-size:11px;}
</style>
<div class="utilbar">Support · Order Status · Sign In</div>
<div class="nav">
<div class="logo">HP</div>
<div class="navlinks"><span>Laptops</span><span>Desktops</span><span>Printers</span><span>Ink & Toner</span><span>Accessories</span></div>
</div>
<div class="hero">
<div class="hero-visual">DEVICE PHOTOGRAPHY</div>
<div class="hero-txt">
<h1>Engineered for<br>how you work.</h1>
<p>Spectre, OMEN and EliteBook — precision hardware for every kind of workday.</p>
<div class="btn">Shop Laptops</div>
</div>
</div>
<div class="section">
<h2>Shop Featured Laptops</h2>
<div class="grid">
<div class="card"><div class="imgbox">Spectre x360</div><div class="catbadge spectre">Spectre</div><div class="pname">Spectre x360 14</div><div class="spec">Intel Core Ultra 7 · 16GB</div><div class="price">$1,299.99<span class="strike">$1,499.99</span></div></div>
<div class="card"><div class="imgbox">OMEN 16</div><div class="catbadge omen">OMEN</div><div class="pname">OMEN 16 Gaming Laptop</div><div class="spec">RTX 4060 · 165Hz Display</div><div class="price">$1,449.99</div></div>
<div class="card"><div class="imgbox">EliteBook</div><div class="catbadge">Laptop</div><div class="pname">EliteBook 840 G11</div><div class="spec">Intel Core i7 · 32GB</div><div class="price">$1,699.99</div></div>
<div class="card"><div class="imgbox">Envy Printer</div><div class="catbadge">Printer</div><div class="pname">ENVY Inspire 7955e</div><div class="spec">All-in-One · Wireless</div><div class="price">$179.99</div></div>
</div>
</div>
<div class="footer"><span>© HP</span><span>Support · Store Locator · Privacy · Legal</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0f0f0f; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0f0f0f; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.5px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background: #0007cd; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background: #222222; color: #ffffff;
border: 1px solid #0007cd; border-radius: 8px;
padding: 10px 18px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #181818; color: #ffffff;
border: 1px solid #4b4b4b; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; background: #222222; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0f0f0f; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:16px; font-weight:500; letter-spacing:-0.4px; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#a8a8a8; }
.btnp { background:#0007cd; color:#fff; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:500; }
.hero { position:relative; text-align:center; padding:10px 32px 4px; overflow:hidden; }
.hero::before { content:''; position:absolute; left:50%; top:20px; width:500px; height:280px; transform:translateX(-50%);
background:radial-gradient(circle, rgba(26,38,255,0.35), transparent 65%); z-index:0; }
.hero h1 { position:relative; z-index:1; font-size:32px; font-weight:500; letter-spacing:-1px; margin:0 0 8px; }
.hero p { position:relative; z-index:1; font-size:13px; color:#a8a8a8; margin:0 auto 16px; max-width:420px; }
.termgrid { position:relative; z-index:1; background:#000000; border-radius:16px; margin:0 32px; padding:22px;
display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pane { background:#181818; border-radius:12px; padding:14px; height:78px; }
.pane .lbl { font-size:10px; color:#888; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; }
.pane pre { margin:0; font-size:11px; font-family:"Courier New", monospace; color:#ccc; line-height:1.5; }
.pane .kw { color:#00d4ff; } .pane .ok { color:#33d17a; }
.toolkits { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; padding:20px 32px 0; }
.tk { background:#181818; border-radius:12px; padding:14px; text-align:center; }
.tk .ic { width:34px; height:34px; border-radius:8px; margin:0 auto 8px; }
.tk span { font-size:11px; color:#e6e6e6; }
.i1 { background:#4a154b; } .i2 { background:#181717; } .i3 { background:#635bff; } .i4 { background:#000000; } .i5 { background:#5e6ad2; }
</style></head>
<body>
<nav>
<div class="brand">Composio</div>
<div class="navlinks"><span>Product</span><span>Toolkits</span><span>Docs</span><span>Pricing</span></div>
<span class="btnp">Get started</span>
</nav>
<div class="hero">
<h1>Tool calling infrastructure<br>for AI agents</h1>
<p>Connect your AI agents to 250+ tools with one unified integration layer.</p>
<div class="termgrid">
<div class="pane"><div class="lbl">agent.py</div><pre><span class="kw">tool</span> = compose.get(<span class="kw">"github"</span>)
result = tool.run(action)</pre></div>
<div class="pane"><div class="lbl">output</div><pre><span class="ok">✓ 200 OK</span>
issue_id: 4821
status: created</pre></div>
<div class="pane"><div class="lbl">toolkit.yaml</div><pre>auth: oauth2
scopes: [repo, issues]</pre></div>
<div class="pane"><div class="lbl">trace</div><pre>call_id: 9f2a
latency: 184ms</pre></div>
</div>
</div>
<div class="toolkits">
<div class="tk"><div class="ic i1"></div><span>Slack</span></div>
<div class="tk"><div class="ic i2"></div><span>GitHub</span></div>
<div class="tk"><div class="ic i3"></div><span>Stripe</span></div>
<div class="tk"><div class="ic i4"></div><span>Notion</span></div>
<div class="tk"><div class="ic i5"></div><span>Linear</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #07beb8; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #07beb8; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2fdf6; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #07beb8; color: #000000;
border: 1px solid #f2fdf6; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #07beb8; color: #000000;
border: 1px solid #2dc7c2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2dc8c2; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fffdfa; color:#000000; box-sizing:border-box;
font-family:"NanumSquareRound", sans-serif; }
* { box-sizing:border-box; }
.wrap { text-align:center; padding:36px 60px 0; }
.wrap h1 { font-size:44px; margin:0 0 6px; }
.wrap h1 .reg { font-weight:400; color:#07beb8; }
.wrap h1 .bold { font-weight:700; color:#07beb8; }
.wrap h3 { font-size:22px; font-weight:400; color:#404642; margin:0 0 20px; }
.pills { display:flex; justify-content:center; gap:12px; }
.pill { border-radius:20px; height:53px; padding:0 32px; display:flex; align-items:center; font-size:13px; }
.p1 { background:#f2fdf6; color:#000; } .p2 { background:#f9f7f2; color:#000; }
.blocks { display:flex; gap:16px; padding:30px 60px 0; }
.block { flex:1; border-radius:20px; padding:18px; text-align:left; }
.b1 { background:#f9f7f2; } .b2 { background:#e6e4e2; }
.block h4 { font-size:16px; color:#404642; margin:0 0 6px; }
.block p { font-size:12px; color:#666f6a; margin:0; line-height:1.5; }
footer { position:absolute; bottom:0; left:0; right:0; padding:12px 60px; display:flex;
justify-content:space-between; font-size:11px; color:#807f7d; }
</style></head>
<body>
<div class="wrap">
<h1><span class="reg">A time to </span><span class="bold">know yourself</span></h1>
<h3>Once a day, answer a question and get closer to who you really are.</h3>
<div class="pills">
<div class="pill p1">Start</div>
<div class="pill p2">Download the app</div>
</div>
</div>
<div class="blocks">
<div class="block b1"><h4>A question just for you</h4><p>Delivered every morning at 6am, so you never face a blank page.</p></div>
<div class="block b2"><h4>Feelings made simple</h4><p>Six gentle emotion stickers help you organize how each entry felt.</p></div>
</div>
<footer><span>© TellingMe</span><span>TellingMe · Newsletter · Team Story</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #eeeeee;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #eeeeee;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 900; line-height: 1.2; margin: 0; color: #eeeeee; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #abb8c3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 900; line-height: 1.25; letter-spacing: 1px; background: #e09900; color: #121212;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 900; line-height: 1.25; letter-spacing: 1px; background: transparent; color: #eeeeee;
border: 1px solid #e09900; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #2a2a2a; color: #eeeeee;
border: 1px solid #494949; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #abb8c3; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; background: #e09900; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121212; font-family:'Archivo Black','Arial Black',sans-serif; color:#eeeeee; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #4e4e4e;}
.logo{font-size:18px;letter-spacing:0.5px;}
.navlinks{display:flex;gap:24px;font-family:Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:0.8px;text-transform:uppercase;color:#eeeeee;}
.navlinks .active{color:#e09900;border-bottom:2px solid #e09900;padding-bottom:24px;}
.hero{height:230px;position:relative;background:radial-gradient(ellipse at 75% 50%,#3a2e1a 0%,#121212 65%);display:flex;align-items:center;padding:0 40px;overflow:hidden;}
.herotext{max-width:420px;z-index:2;}
.herotext .over{font-family:Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#e09900;margin-bottom:12px;}
.herotext h1{font-size:34px;line-height:1.1;margin:0 0 14px;}
.herotext p{font-family:Arial,sans-serif;font-size:14px;color:#d0d0d0;margin:0 0 18px;}
.btn{display:inline-block;background:#e09900;color:#121212;font-size:13px;letter-spacing:1px;text-transform:uppercase;padding:14px 28px;}
.gbody{position:absolute;right:70px;top:30px;width:150px;height:150px;border-radius:50% 50% 50% 15%;background:radial-gradient(circle at 35% 35%,#edb059,#2a2a2a 65%);}
.sec{padding:20px 40px 0;}
.sectitle{font-family:Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#abb8c3;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#313131;border:1px solid #4e4e4e;border-radius:8px;padding:16px;}
.thumb{aspect-ratio:4/3;border-radius:4px;margin-bottom:10px;position:relative;}
.sbadge{position:absolute;top:8px;left:8px;background:#e09900;color:#121212;font-family:Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 8px;}
.pname{font-family:Arial,sans-serif;font-size:16px;font-weight:700;margin:0 0 6px;}
.pprice{font-size:20px;color:#e09900;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#121212;border-top:1px solid #4e4e4e;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-family:Arial,sans-serif;font-size:11px;color:#d0d0d0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Knaggs Guitars</div>
<div class="navlinks"><div class="active">Kenai</div><div>Tula</div><div>Choptank</div><div>Pegasus</div><div>Custom Shop</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="over">Built by the master builder behind PRS</div>
<h1>Amber lacquer, carved to order.</h1>
<p>Dimensional accuracy and figured maple, finished the way a nitro-lacquer room on a humid afternoon demands.</p>
<div class="btn">View Gallery</div>
</div>
<div class="gbody"></div>
</div>
<div class="sec">
<div class="sectitle">Featured Series</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e09900,#121212)"><div class="sbadge">Kenai</div></div><div class="pname">Kenai T Custom</div><div class="pprice">$4,895</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#edb059,#2a2a2a)"><div class="sbadge">Choptank</div></div><div class="pname">Choptank Deluxe</div><div class="pprice">$5,250</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2a2a2a,#1863dc)"><div class="sbadge">Pegasus</div></div><div class="pname">Pegasus Trem</div><div class="pprice">$4,595</div></div>
</div>
</div>
<div class="footer"><span>Dealer Locator · Custom Shop Inquiry</span><span>Care & Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #121212; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #121212; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #121212; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Times New Roman',Georgia,serif; background:#ffffff; color:#2a2a2a; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dedede;}
.logo{font-size:20px;font-weight:700;color:#121212;}
.icons{display:flex;gap:18px;font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:13px;color:#6a6a6a;}
.subnav{display:flex;gap:24px;padding:10px 40px;font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:13px;color:#6a6a6a;border-bottom:1px solid #e8e8e8;}
.subnav .on{color:#121212;font-weight:600;}
.hero{padding:30px 40px;text-align:center;}
.hero h1{font-size:26px;font-weight:700;margin:0 0 8px;}
.hero p{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:13px;color:#6a6a6a;margin:0;}
.shelf{padding:20px 40px 0;}
.shelf h2{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:14px;font-weight:600;color:#6a6a6a;text-transform:uppercase;letter-spacing:0.5px;margin:0 0 16px;}
.grid{display:flex;gap:22px;justify-content:center;}
.book{width:130px;text-align:left;}
.cover{height:190px;background:#f5f5f5;border:1px solid #dedede;position:relative;}
.cover:before{content:'';position:absolute;left:0;top:0;bottom:0;width:10px;background:rgba(18,18,18,0.15);}
.title{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:13px;font-weight:600;margin-top:10px;line-height:1.3;height:34px;overflow:hidden;}
.author{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:12px;color:#6a6a6a;margin-top:2px;}
.price{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:13px;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;border-top:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:11px;color:#6a6a6a;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mysterious Bookshop</div>
<div class="icons"><span>Search</span><span>Cart</span></div>
</div>
<div class="subnav"><div class="on">First Editions</div><div>Signed Copies</div><div>Mystery & Crime</div><div>Events</div></div>
<div class="hero">
<h1>Crime, Mystery & Suspense — Since 1979</h1>
<p>A narrow shop in Tribeca, open online. Every book chosen by hand.</p>
</div>
<div class="shelf">
<h2>Signed First Editions</h2>
<div class="grid">
<div class="book"><div class="cover" style="background:linear-gradient(160deg,#dedede,#2a2a2a)"></div><div class="title">The Long Ledger</div><div class="author">Signed — First Ed.</div><div class="price">$45.00</div></div>
<div class="book"><div class="cover" style="background:linear-gradient(160deg,#f5f5f5,#6a6a6a)"></div><div class="title">A Quiet Alibi</div><div class="author">First Edition</div><div class="price">$28.00</div></div>
<div class="book"><div class="cover" style="background:linear-gradient(160deg,#9a9a9a,#121212)"></div><div class="title">Nightfall on 5th</div><div class="author">Signed — First Ed.</div><div class="price">$65.00</div></div>
<div class="book"><div class="cover" style="background:linear-gradient(160deg,#dedede,#6a6a6a)"></div><div class="title">The Locked Room</div><div class="author">First Edition</div><div class="price">$32.00</div></div>
</div>
</div>
<div class="footer"><span>Open Tuesday–Saturday</span><span>Newsletter Directions</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #7b7e7e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #50fcce; color: #054040;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #fafafa; color: #1a1a1a;
border: 1px solid #50fcce; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #1a1a1a;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7e7e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #50fcce; color: #054040;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:Inter,Arial,sans-serif; color:#595959; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e6e6e6;}
.logo{font-family:Poppins,Inter,sans-serif;font-size:20px;font-weight:600;color:#1a1a1a;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;color:#1a1a1a;}
.navlinks .on{border-bottom:2px solid #50fcce;padding-bottom:22px;}
.hero{height:220px;background:#054040;display:flex;align-items:center;padding:0 40px;justify-content:space-between;}
.h1{font-family:Poppins,Inter,sans-serif;font-size:30px;font-weight:500;color:#fafafa;margin:0 0 10px;letter-spacing:-0.3px;}
.hsub{font-size:14px;color:#b3d4c8;max-width:340px;margin:0 0 16px;}
.btn{display:inline-block;background:#50fcce;color:#054040;font-size:15px;font-weight:600;padding:12px 26px;border-radius:9999px;}
.brush{width:100px;height:170px;border-radius:50px 50px 20px 20px;background:linear-gradient(180deg,#e0e0e0,#8b8b8b 60%,#333);position:relative;}
.brush:before{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;background:#50fcce;box-shadow:0 0 20px 6px rgba(80,252,206,0.5);}
.section{padding:20px 40px 0;}
.sectitle{font-family:Poppins,Inter,sans-serif;font-size:18px;font-weight:600;color:#1a1a1a;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#fff;border:1px solid #e6e6e6;border-radius:12px;padding:14px;}
.thumb{height:80px;border-radius:8px;margin-bottom:8px;}
.ptitle{font-family:Poppins,Inter,sans-serif;font-size:15px;font-weight:600;color:#1a1a1a;}
.pprice{font-size:14px;color:#595959;margin-top:4px;}
.pillbtn{margin-top:8px;background:#50fcce;color:#054040;font-size:12px;font-weight:600;text-align:center;padding:8px 0;border-radius:9999px;}
</style>
<div class="nav">
<div class="logo">Quip</div>
<div class="navlinks"><div class="on">Shop</div><div>Learn</div><div>Reviews</div></div>
</div>
<div class="hero">
<div><div class="h1">Oral Care, Reimagined as a Ritual</div><div class="hsub">Electric toothbrushes and refills designed to make the daily routine feel calm, not clinical.</div><div class="btn">Get Started</div></div>
<div class="brush"></div>
</div>
<div class="section">
<div class="sectitle">Shop the Essentials</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#054040,#50fcce);"></div><div class="ptitle">Quip Electric Toothbrush</div><div class="pprice">$40.00</div><div class="pillbtn">Shop Now</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#9cddc0,#054040);"></div><div class="ptitle">Refill Brush Heads (3-Pack)</div><div class="pprice">$15.00</div><div class="pillbtn">Shop Now</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#50fcce,#222);"></div><div class="ptitle">Anticavity Toothpaste</div><div class="pprice">$8.00</div><div class="pillbtn">Shop Now</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#054040,#686969);"></div><div class="ptitle">Floss Pick Refills</div><div class="pprice">$6.00</div><div class="pillbtn">Shop Now</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff0056; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff0056; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #222222; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff0056; color: #222222;
border: 1px solid #222222; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff0056; color: #f5f5f5;
border: 1px solid #fd276f; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dc054e; color: #222222;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Pretendard", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:20px; font-weight:700; }
.navlinks { display:flex; gap:10px; }
.navitem { font-size:14px; font-weight:600; color:#212429; background:#fff; border-radius:4px; padding:5.5px 12px; }
.navitem.on { background:#222222; color:#fff; }
.hero { padding:20px 36px 0; }
.eyebrow { color:#767676; font-size:15px; font-weight:400; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:8px; }
.hero h1 { font-size:42px; font-weight:700; line-height:1.2; margin:0 0 16px; max-width:520px; }
.cta-pink { display:inline-flex; align-items:center; background:#ff0056; color:#fff; font-size:16px; font-weight:700;
border-radius:30px; padding:8px 20px; height:40px; }
.darksection { position:absolute; top:250px; left:0; right:0; bottom:0; background:#111111; padding:24px 36px 0; }
.ds-title { color:#fff; font-size:23px; font-weight:700; margin-bottom:16px; }
.cards { display:flex; gap:16px; }
.dcard { flex:1; background:#212126; color:#fff; border-radius:12px; padding:18px; }
.dcard .icon { width:36px; height:36px; border-radius:9999px; background:linear-gradient(135deg,#ff0056,#8c1c55); margin-bottom:12px; }
.dcard h4 { font-size:16px; font-weight:700; margin:0 0 6px; }
.dcard p { font-size:13px; color:#c9c9c9; margin:0; line-height:1.4; }
.fab { position:absolute; right:24px; bottom:24px; width:48px; height:48px; border-radius:24px; background:#212529;
box-shadow:rgba(0,0,0,0.04) 0px 1px 2px 0px, rgba(0,0,0,0.06) 0px 8px 24px; }
</style></head>
<body>
<nav>
<span class="brand">NRISE (WIPPY)</span>
<div class="navlinks">
<span class="navitem on">Home</span>
<span class="navitem">Product</span>
<span class="navitem">Culture</span>
<span class="navitem">Career</span>
</div>
</nav>
<div class="hero">
<div class="eyebrow">Mission</div>
<h1>Comfortable connection,<br>everyday happiness.</h1>
<span class="cta-pink">Learn More</span>
</div>
<div class="darksection">
<div class="ds-title">What we build</div>
<div class="cards">
<div class="dcard"><div class="icon"></div><h4>Social Discovery</h4><p>Meet people who share your interests, safely and simply.</p></div>
<div class="dcard"><div class="icon"></div><h4>Healthy Habits</h4><p>Small daily routines that add up to real life change.</p></div>
<div class="dcard"><div class="icon"></div><h4>Trust First</h4><p>Safety is our top priority for every connection made.</p></div>
</div>
</div>
<div class="fab"></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cc0000; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #cc0000;
border: 1px solid #cc0000; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #eef1f5; color: #2c3e50;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.topstrip{height:28px;background:#1a1a1a;color:#fff;display:flex;align-items:center;justify-content:flex-end;padding:0 30px;font-size:11px;gap:16px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:3px solid #cc0000;}
.logo{font-size:19px;font-weight:700;color:#1a1a1a;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;}
.search{width:220px;height:36px;border:1px solid #e0e0e0;font-size:12px;color:#666;display:flex;align-items:center;padding:0 12px;border-radius:4px;}
.body-wrap{display:flex;padding-top:10px;}
.rail{width:150px;padding:0 12px;font-size:13px;font-weight:700;color:#1a1a1a;flex-shrink:0;}
.railitem{padding:8px 0;font-size:13px;font-weight:400;color:#333;border-bottom:1px solid #f0f0f0;}
.railitem.active{color:#cc0000;border-left:3px solid #cc0000;padding-left:8px;font-weight:600;}
.main{flex:1;padding:0 20px;}
.hero{height:70px;background:#1a1a1a;border-left:4px solid #cc0000;display:flex;flex-direction:column;justify-content:center;padding:0 20px;margin-bottom:14px;}
.hero h1{font-size:20px;font-weight:700;color:#fff;margin:0;}
.hero p{font-size:12px;color:#999;margin:2px 0 0;}
.grid{display:flex;gap:12px;}
.card{width:150px;border:1px solid #e0e0e0;border-radius:4px;padding:12px;}
.thumb{height:80px;border-radius:2px;background:#f5f5f5;margin-bottom:8px;}
.title{font-size:13px;font-weight:700;margin-bottom:6px;}
.badges{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px;}
.cbadge{font-size:9px;font-weight:700;text-transform:uppercase;background:#eef1f5;color:#2c3e50;border:1px solid #e0e0e0;border-radius:2px;padding:2px 5px;}
.price{font-size:15px;font-weight:700;color:#1a1a1a;}
</style>
<div class="topstrip"><span>Account</span><span>Order Tracking</span><span>1-800-MAGID</span></div>
<div class="nav">
<div class="logo">Magid Glove And Safety</div>
<div class="navlinks"><span>Cut Protection</span><span>Chemical</span><span>Arc Flash</span><span>Hi-Vis</span></div>
<div class="search">Search SKU or item...</div>
</div>
<div class="body-wrap">
<div class="rail">
<div class="railitem active">Cut Resistant</div>
<div class="railitem">Chemical</div>
<div class="railitem">Arc Flash</div>
<div class="railitem">Hi-Vis</div>
<div class="railitem">Impact</div>
</div>
<div class="main">
<div class="hero"><h1>Find the right glove.</h1><p>Filter by hazard type, ANSI cut level, and industry.</p></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#cc0000,#f5f5f5);"></div><div class="title">Cut-A5 Work Glove</div><div class="badges"><span class="cbadge">ANSI A5</span><span class="cbadge">EN 388</span></div><div class="price">$8.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff6600,#f5f5f5);"></div><div class="title">Arc Flash Sleeve, ATPV 12</div><div class="badges"><span class="cbadge">ATPV 12</span><span class="cbadge">NFPA 70E</span></div><div class="price">$34.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffd100,#f5f5f5);"></div><div class="title">Hi-Vis Safety Vest, Class 2</div><div class="badges"><span class="cbadge">ANSI 107</span></div><div class="price">$12.49</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #ef2d8e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #ef2d8e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #ef2d8e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.2px; background: #d3161f; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #d3161f;
border: 1px solid #d3161f; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #fbcae3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.8px; background: #d3161f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; background:#ffffff; color:#2d2d2d; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d3d3d3;}
.logo{font-size:22px;font-weight:700;color:#1a1a1a;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:700;color:#1a1a1a;}
.navlinks span:first-child{color:#d3161f;}
.cart{background:#d3161f;color:#fff;font-size:13px;font-weight:700;padding:8px 16px;border-radius:4px;}
.hero{height:280px;background:#1a1a1a;display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;}
.heroText{width:440px;z-index:1;}
.heroText h1{font-size:40px;font-weight:700;color:#fff;margin:0 0 12px;line-height:1.15;letter-spacing:-0.5px;}
.heroText p{font-size:15px;color:#d3d3d3;margin:0 0 20px;}
.cta{display:inline-block;background:#d3161f;color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:13px 26px;border-radius:4px;}
.vortex{position:absolute;right:100px;top:60px;width:160px;height:160px;border-radius:50%;background:conic-gradient(#2d2d2d,#d3161f,#2d2d2d,#595959,#2d2d2d);opacity:0.9;}
.vortex:before{content:'';position:absolute;inset:35px;border-radius:50%;background:#1a1a1a;}
.specrow{display:flex;gap:1px;background:#d3d3d3;margin:14px 32px 0;}
.speccell{flex:1;background:#f4f4f4;text-align:center;padding:10px 4px;}
.speclabel{font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#808080;}
.specval{font-size:16px;color:#1a1a1a;font-weight:700;margin-top:2px;}
.sec{padding:20px 32px 0;}
.secTitle{font-size:19px;font-weight:700;color:#1a1a1a;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;border:1px solid #e5e5e5;border-radius:8px;padding:12px;position:relative;}
.thumb{height:90px;border-radius:6px;margin-bottom:8px;background:#ededed;position:relative;overflow:hidden;}
.fanbody{position:absolute;left:60px;top:10px;width:70px;height:70px;border-radius:50%;background:conic-gradient(#2d2d2d,#808080,#2d2d2d);}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:3px 7px;border-radius:4px;color:#fff;}
.badge.eco{background:#2f8541;}
.ctitle{font-size:14px;font-weight:600;color:#1a1a1a;line-height:1.3;height:34px;overflow:hidden;}
.cprice{font-size:16px;font-weight:700;color:#1a1a1a;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#2d2d2d;border-top:4px solid #d3161f;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#d3d3d3;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Vornado</div>
<div class="navlinks"><span>Fans</span><span>Heaters</span><span>Air Purifiers</span><span>Humidifiers</span></div>
<div class="cart">CART (0)</div>
</div>
<div class="hero">
<div class="heroText">
<h1>Engineered Airflow, Whisper Quiet</h1>
<p>Vortex-action circulation that moves a whole room, not just the air in front of it.</p>
<div class="cta">Shop Fans</div>
</div>
<div class="vortex"></div>
</div>
<div class="specrow">
<div class="speccell"><div class="speclabel">Coverage</div><div class="specval">500 sq ft</div></div>
<div class="speccell"><div class="speclabel">Noise</div><div class="specval">35 dB</div></div>
<div class="speccell"><div class="speclabel">Energy Save</div><div class="specval">80%</div></div>
<div class="speccell"><div class="speclabel">Warranty</div><div class="specval">5 Years</div></div>
</div>
<div class="sec">
<div class="secTitle">Best Selling Air Circulators</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge eco">Energy Star</div><div class="fanbody"></div></div><div class="ctitle">Vortex 660 Air Circulator</div><div class="cprice">$139.99</div></div>
<div class="card"><div class="thumb"><div class="fanbody" style="background:conic-gradient(#595959,#2d2d2d)"></div></div><div class="ctitle">Vortex 460 Small Room</div><div class="cprice">$89.99</div></div>
<div class="card"><div class="thumb"><div class="fanbody" style="background:conic-gradient(#d3161f,#2d2d2d)"></div></div><div class="ctitle">Vortex Whole Room Heater</div><div class="cprice">$99.99</div></div>
</div>
</div>
<div class="footer"><span>© Air Circulation Engineering</span><span>Find a Retailer</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #72e3ad; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #72e3ad; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #3d7057; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #72e3ad; color: #5865f2;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #72e3ad; color: #111111;
border: 1px solid #62c194; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #3d7057; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6ecfb8; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:"Inter", ui-sans-serif, -apple-system, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:600; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#1a1a1a; }
.right { display:flex; gap:8px; align-items:center; }
.menu { background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:6px; padding:4px 10px; font-size:12px; }
.btn-fill { background:#72e3ad; color:#111; border:1px solid rgba(60,180,130,0.75); border-radius:6px;
height:32px; padding:0 14px; font-size:12px; font-weight:600; display:flex; align-items:center; }
.hero { text-align:center; padding:14px 40px 16px; font-family:"Manrope", "Inter", sans-serif; }
.hero h1 { font-size:38px; font-weight:500; line-height:1.0; margin:0 0 10px; }
.hero p { font-size:14px; color:#3a3a3a; margin:0 0 16px; }
.tabs { display:flex; justify-content:center; gap:8px; margin-bottom:16px; }
.tab { border:1px solid rgba(0,0,0,0.1); border-radius:9999px; padding:8px 24px; font-size:13px; }
.tab.on { background:#fff; font-weight:600; }
.tab.off { color:#666; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 40px; }
.cell { background:#f4f4f5; border-radius:8px; padding:16px; }
.cell h3 { font-size:14px; font-weight:600; margin:0 0 6px; }
.cell p { font-size:12px; color:#555; margin:0; line-height:1.5; }
.cell .dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; }
.d1 { background:#3fcf8e; } .d2 { background:#0a874f; } .d3 { background:#3fcf8e; }
.cta-band { margin:16px 40px 0; background:#0a0a0a; color:#fff; border-radius:8px; padding:14px 20px;
display:flex; justify-content:space-between; align-items:center; }
.cta-band .txt { font-size:14px; font-weight:600; }
.cta-band .sub { font-size:11px; color:#ccc; }
.form-input { background:oklab(0.1 0 0 / 0.06); border:1px solid rgba(255,255,255,0.15); border-radius:6px;
padding:8px; font-size:12px; color:#fff; width:160px; }
.send { background:#72e3ad; color:#111; border-radius:6px; padding:8px 14px; font-size:12px; font-weight:600; margin-left:8px; }
footer { position:absolute; bottom:0; left:0; right:0; padding:10px 40px; display:flex; justify-content:space-between;
font-size:11px; color:#666; }
</style></head>
<body>
<nav>
<div class="brand">Supabase</div>
<div class="navlinks"><span>Product</span><span>Developers</span><span>Pricing</span><span>Docs</span></div>
<div class="right"><div class="menu">Sign in</div><div class="btn-fill">Start your project</div></div>
</nav>
<div class="hero">
<h1>Build in a weekend<br>Scale to millions</h1>
<p>The Postgres development platform. Every project ships with a database, auth, storage, and edge functions.</p>
<div class="tabs">
<div class="tab on">Database</div>
<div class="tab off">Auth</div>
<div class="tab off">Storage</div>
<div class="tab off">Functions</div>
</div>
</div>
<div class="grid">
<div class="cell"><h3><span class="dot d1"></span>Postgres database</h3><p>A full Postgres instance with extensions, not an abstraction on top.</p></div>
<div class="cell"><h3><span class="dot d2"></span>Instant APIs</h3><p>Auto-generated REST and GraphQL from your schema.</p></div>
<div class="cell"><h3><span class="dot d3"></span>Realtime</h3><p>Listen to database changes over websockets in real time.</p></div>
</div>
<div class="cta-band">
<div><div class="txt">Build something real this weekend</div><div class="sub">Free tier, no credit card required</div></div>
<div style="display:flex;align-items:center;"><span class="form-input">[email protected]</span><span class="send">Start your project</span></div>
</div>
<footer><span>© Supabase</span><span>Supabase · Docs · Community · Company</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f2f2f2; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f2f2f2; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7e7d7d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #115e67; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #115e67;
border: 1px solid #115e67; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #212121;
border: 1px solid #bebebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7e7d7d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #c00000; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f2f2f2; font-family:'Sofia Sans','Poppins',Arial,sans-serif; color:#434242; }
*{box-sizing:border-box;}
.nav{height:64px;background:#115e67;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Poppins',sans-serif;font-size:20px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:6px;}
.navlinks div{color:#fff;font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;padding:8px 12px;border-radius:8px;}
.navlinks .active{background:rgba(255,255,255,0.15);}
.search{width:220px;height:36px;border-radius:9999px;background:#fff;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#7e7d7d;}
.hero{height:210px;background:#115e67;display:flex;align-items:center;padding:0 32px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:60px;top:30px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffc945,#028e48 75%);}
.herotext{max-width:420px;}
.herotext h1{font-family:'Poppins',sans-serif;font-size:26px;font-weight:700;color:#fff;margin:0 0 8px;line-height:1.25;}
.herotext p{font-size:14px;color:rgba(255,255,255,0.85);margin:0 0 16px;}
.herocta{display:inline-block;background:#ffc945;color:#212121;font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;padding:12px 26px;border-radius:8px;}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:216px;background:#fff;border-radius:12px;padding:14px;box-shadow:0 2px 8px rgba(0,0,0,0.08);position:relative;}
.thumb{height:100px;border-radius:12px;margin-bottom:8px;}
.badge{position:absolute;top:20px;left:20px;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:6px;color:#fff;}
.b-sale{background:#c00000;} .b-eco{background:#028e48;} .b-new{background:#ffc945;color:#212121;}
.ptitle{font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;color:#212121;}
.pprice{font-size:15px;color:#115e67;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Nest Diapers</div>
<div class="navlinks"><div class="active">Diapers</div><div>Wipes</div><div>Training Pants</div><div>Subscribe</div></div>
<div class="search">Search...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Clean, Safe, and Sustainable<br>Baby Care.</h1>
<p>Sensitive-skin diapers made without chlorine, latex, or lotions.</p>
<div class="herocta">Subscribe & Save</div>
</div>
</div>
<div class="grid">
<div class="card"><span class="badge b-eco">Sustainable</span><div class="thumb" style="background:linear-gradient(160deg,#115e67,#028e48)"></div><div class="ptitle">Overnight Diapers, Size 3</div><div class="pprice">$24.99</div></div>
<div class="card"><span class="badge b-new">New</span><div class="thumb" style="background:linear-gradient(160deg,#ffc945,#115e67)"></div><div class="ptitle">Sensitive Baby Wipes 8-Pack</div><div class="pprice">$29.99</div></div>
<div class="card"><span class="badge b-sale">Sale</span><div class="thumb" style="background:linear-gradient(160deg,#c00000,#115e67)"></div><div class="ptitle">Overnight Training Pants</div><div class="pprice">$19.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#028e48,#ffc945)"></div><div class="ptitle">Daily Diaper Bundle</div><div class="pprice">$54.99</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5160; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5160; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5160; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5160; color: #f5f5f5;
border: 1px solid #fd6b78; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e45477; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1f1f1f; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { width:300px; height:640px; float:left; border-right:1px solid #dddddd; padding:16px; position:relative; }
.apptop { display:flex; justify-content:space-between; align-items:center; }
.abrand { font-size:16px; font-weight:600; color:#ff5160; letter-spacing:-0.4px; }
.openapp { border:1px solid #dddddd; background:#ffffff; color:#1f1f1f; border-radius:20px; padding:0 8px;
height:28px; font-size:12px; font-weight:600; }
.feedtitle { font-size:16px; font-weight:600; margin:14px 0 8px; letter-spacing:-0.4px; }
.feedgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.pcard .img { aspect-ratio:3/4; border-radius:8px; background:linear-gradient(150deg,#ffe3e6,#ffd0d6); }
.pcard .nm { font-size:12px; font-weight:600; margin-top:6px; }
.pcard .pr { font-size:12px; color:#777777; }
.heartrow { display:flex; gap:6px; margin-top:16px; }
.htag { background:#fff2ea; color:#ff5160; border-radius:20px; padding:6px 12px; font-size:11px; font-weight:600; }
.team { margin-left:300px; padding:32px 40px; }
.tbrand { font-size:48px; font-weight:600; letter-spacing:-0.3px; line-height:1.1; margin:0 0 10px; }
.tsub { font-size:16px; color:#757575; max-width:480px; line-height:1.5; margin:0 0 20px; }
.tcta-row { display:flex; gap:12px; }
.tprimary { background:#ff5160; color:#ffffff; border:none; border-radius:12px; width:160px; height:56px; font-size:18px; font-weight:600; }
.tsoft { background:#fff2ea; color:#ff5160; border:none; border-radius:12px; width:200px; height:48px; font-size:16px; font-weight:600; }
.storyrow { display:flex; gap:16px; margin-top:28px; }
.story { flex:1; background:#ffffff; border-radius:12px; box-shadow:0 4px 48px rgba(0,0,0,0.08); padding:18px; }
.story h4 { margin:0 0 6px; font-size:24px; font-weight:600; }
.story p { margin:0; font-size:14px; color:#757575; line-height:1.5; }
footer { position:absolute; bottom:0; left:300px; right:0; padding:12px 40px; font-size:11px; color:#757575; border-top:1px solid #e5e7eb; }
</style></head>
<body>
<div class="app">
<div class="apptop"><span class="abrand">Ably</span><button class="openapp">Open app</button></div>
<div class="feedtitle">Curated for your taste</div>
<div class="feedgrid">
<div class="pcard"><div class="img"></div><div class="nm">Oversized knit cardigan</div><div class="pr">₩28,900</div></div>
<div class="pcard"><div class="img"></div><div class="nm">Wide leg denim</div><div class="pr">₩32,000</div></div>
<div class="pcard"><div class="img"></div><div class="nm">Soft pastel blouse</div><div class="pr">₩19,800</div></div>
<div class="pcard"><div class="img"></div><div class="nm">Minimal tote bag</div><div class="pr">₩24,500</div></div>
</div>
<div class="heartrow"><span class="htag">My Style</span><span class="htag">New In</span></div>
</div>
<div class="team">
<div class="tbrand">Ably</div>
<p class="tsub">Style commerce built on personal taste — discover, buy, make, and sell, with less friction.</p>
<div class="tcta-row">
<button class="tprimary">Start Selling</button>
<button class="tsoft">Explore the App</button>
</div>
<div class="storyrow">
<div class="story"><h4>Taste-driven discovery</h4><p>A feed that adapts to what you're expressing or looking for, beyond fashion alone.</p></div>
<div class="story"><h4>An open seller ecosystem</h4><p>Lower friction for anyone who wants to make and sell their own style.</p></div>
</div>
</div>
<footer>© Ably · Next commerce, powered by taste</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f6; color: #343132;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f6; color: #343132;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #343132; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #9a9db1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #087780; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #087780;
border: 1px solid #087780; border-radius: 9999px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #343132;
border: 1px solid #c4c3c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9db1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #07818b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#f4f4f6; color:#676986; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:60px;background:#ffffff;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-radius:0 0 0 0;}
.logo{font-size:20px;font-weight:700;color:#087780;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;color:#343132;}
.search{width:200px;height:34px;border-radius:9999px;background:#f4f4f6;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#9a9db1;}
.hero{height:210px;display:flex;align-items:center;padding:0 40px;background:#d9f5f6;}
.heroText{width:50%;}
.h1{font-size:30px;font-weight:700;color:#343132;line-height:1.2;margin:0 0 12px;}
.sub{font-size:14px;color:#676986;margin:0 0 16px;max-width:290px;}
.cta{display:inline-block;background:#087780;color:#fff;font-size:14px;font-weight:600;padding:12px 28px;border-radius:9999px;width:fit-content;}
.heroImg{width:50%;height:150px;position:relative;}
.blob{position:absolute;border-radius:9999px;}
.b1{width:100px;height:100px;background:#54bdb6;top:16px;left:60px;}
.b2{width:60px;height:60px;background:#00caaa;top:70px;left:150px;opacity:0.8;}
.sec{padding:16px 40px 0;}
.secTitle{font-size:17px;font-weight:700;color:#343132;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#ffffff;border-radius:9999px 9999px 12px 12px;padding:12px;position:relative;}
.badge{position:absolute;top:10px;left:10px;font-size:9px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;color:#fff;padding:3px 8px;border-radius:9999px;background:#00caaa;}
.thumb{height:94px;border-radius:9999px 9999px 8px 8px;margin-bottom:10px;}
.ptitle{font-size:13px;font-weight:600;color:#343132;line-height:1.3;height:34px;overflow:hidden;}
.pprice{font-size:14px;font-weight:700;color:#087780;margin-top:6px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Posh Peanut</div>
<div class="navlinks"><span>New Baby</span><span>Sleepwear</span><span>Matching Sets</span></div>
<div class="search">Search sizes...</div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Soft edges for the softest people.</div>
<div class="sub">Bamboo sleepwear and matching family sets, made gentle from the very first wash.</div>
<div class="cta">Shop New Baby</div>
</div>
<div class="heroImg"><div class="blob b1"></div><div class="blob b2"></div></div>
</div>
<div class="sec">
<div class="secTitle">Nursery Favorites</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#54bdb6,#d9f5f6);"></div><div class="ptitle">Bamboo Zip Romper, Newborn</div><div class="pprice">$36.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#087780,#54bdb6);"></div><div class="ptitle">Matching Family Pajama Set</div><div class="pprice">$52.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00caaa,#d9f5f6);"></div><div class="ptitle">Swaddle Blanket, Set of 2</div><div class="pprice">$28.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#272d45,#54bdb6);"></div><div class="ptitle">Ruffle Bubble Romper</div><div class="pprice">$32.00</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #171717;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #171717;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #171717; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ff3300; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #171717;
border: 1px solid #ff3300; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #171717;
border: 1px solid #c5c5c5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff3300; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; font-family:'Open Sans',Arial,sans-serif; color:#4d4d4d; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#171717;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#dddddd;}
.hero{height:250px;display:flex;background:#fff;}
.herotext{width:46%;padding:0 36px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#007dc6;margin-bottom:10px;}
.h1{font-size:28px;font-weight:700;line-height:1.2;color:#171717;margin:0 0 12px;}
.sub{font-size:13px;color:#4d4d4d;margin:0 0 18px;max-width:300px;}
.cta{display:inline-block;background:#ff3300;color:#fff;font-size:13px;font-weight:700;padding:13px 26px;border-radius:4px;}
.heroimg{width:54%;position:relative;background:linear-gradient(160deg,#eeeeee,#171717 90%);}
.panel{position:absolute;left:70px;top:50px;width:220px;height:130px;background:repeating-linear-gradient(0deg,#221155,#221155 30px,#171717 30px,#171717 32px);border-radius:4px;}
.wh{position:absolute;top:20px;right:30px;background:#ff3300;color:#fff;font-size:20px;font-weight:700;padding:8px 16px;border-radius:4px;}
.sec{padding:22px 36px 0;}
.secTitle{font-size:18px;font-weight:700;color:#171717;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#f6f6f6;border-radius:8px;padding:12px;border:1px solid #e5e5e5;}
.whlabel{font-size:20px;font-weight:700;color:#171717;margin-bottom:6px;}
.thumb{height:90px;border-radius:4px;margin-bottom:10px;}
.pname{font-size:13px;font-weight:600;color:#4d4d4d;}
.pprice{font-size:14px;font-weight:700;color:#ff3300;margin-top:8px;}
.status{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:4px;margin-top:8px;background:#d5ffd8;color:#008a06;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Voltaic Systems</div>
<div class="navlinks"><span>Solar Panels</span><span>Power Banks</span><span>Chargers</span><span>Specs</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Engineering-First Solar</div>
<div class="h1">Watt-hours, not marketing hours.</div>
<div class="sub">Portable solar chargers built for people who read the spec sheet first.</div>
<div class="cta">Shop Solar Chargers</div>
</div>
<div class="heroimg"><div class="panel"></div><div class="wh">52Wh</div></div>
</div>
<div class="sec">
<div class="secTitle">Solar Panels & Power Banks</div>
<div class="grid">
<div class="card"><div class="whlabel">17W</div><div class="thumb" style="background:linear-gradient(135deg,#171717,#ff3300)"></div><div class="pname">Arc 17W Solar Panel</div><div class="pprice">$139.00</div><div class="status">In Stock</div></div>
<div class="card"><div class="whlabel">52Wh</div><div class="thumb" style="background:linear-gradient(135deg,#4d4d4d,#007dc6)"></div><div class="pname">V88 Fast-Charge Bank</div><div class="pprice">$189.00</div><div class="status">In Stock</div></div>
<div class="card"><div class="whlabel">10W</div><div class="thumb" style="background:linear-gradient(135deg,#221155,#171717)"></div><div class="pname">Fuse 10W Panel</div><div class="pprice">$79.00</div><div class="status">In Stock</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f6; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f6; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #262626; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f4f4f6; color: #212121;
border: 1px solid #262626; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f4f4f6; color: #212121;
border: 1px solid #bfbfc1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #feb7bb; color: #212121;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#f4f4f6; color:#212121; box-sizing:border-box; font-family:'Diatype','Chalet',-apple-system,system-ui,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#f4f4f6; border-bottom:1px solid #e5e5e5; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-family:'Chalet',sans-serif; font-size:14px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; margin:0; }
.navlinks { display:flex; gap:22px; font-family:'Chalet',sans-serif; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:#878787; }
.navlinks span.active { color:#212121; border-bottom:2px solid #262626; padding-bottom:20px; }
.main { display:flex; gap:24px; padding:24px 32px; height:404px; }
.gallery { width:400px; background:#fff; border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative; }
.bangle { width:190px; height:190px; border-radius:50%; border:32px solid #feb7bb; }
.badge { position:absolute; top:16px; left:16px; background:#262626; color:#fff; font-family:'Chalet',sans-serif; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:4px 10px; border-radius:4px; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; }
.info h1 { font-family:'Chalet',sans-serif; font-size:22px; font-weight:700; margin:0; }
.price { font-family:'Chalet',sans-serif; font-size:18px; font-weight:600; }
.desc { font-size:13px; line-height:1.55; color:#454545; max-width:420px; }
.swatch-label { font-size:12px; font-weight:500; color:#454545; margin-top:6px; }
.swatch-row { display:flex; gap:10px; }
.swatch { width:32px; height:32px; border-radius:50%; border:1px solid #dedede; }
.swatch.sel { border:2px solid #212121; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#262626; color:#fff; border:none; border-radius:8px; font-family:'Chalet',sans-serif; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:0.5px; }
.btn-pink { flex:1; height:48px; background:#feb7bb; color:#212121; border:none; border-radius:8px; font-family:'Chalet',sans-serif; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:0.5px; }
.accordion { padding:0 32px; }
.acc-item { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid #e5e5e5; font-family:'Chalet',sans-serif; font-size:13px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Bala</p>
<div class="navlinks"><span class="active">Bangles</span><span>Kettlebells</span><span>Bala Balls</span><span>Wristbands</span></div>
</nav>
<div class="main">
<div class="gallery">
<div class="badge">Bestseller</div>
<div class="bangle"></div>
</div>
<div class="info">
<h1>The Bala Bangles — 1lb Pair</h1>
<span class="price">$49.00</span>
<p class="desc">Ankle or wrist weights cast in a continuous oval form, wrapped in soft, sweat-resistant neoprene. Add resistance to walks, yoga flows, or strength circuits without breaking stride.</p>
<span class="swatch-label">Finish</span>
<div class="swatch-row">
<div class="swatch sel" style="background:#feb7bb"></div>
<div class="swatch" style="background:#abaf8f"></div>
<div class="swatch" style="background:#dfb8a7"></div>
<div class="swatch" style="background:#272d45"></div>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-pink">Shop the Set</button>
</div>
</div>
</div>
<div class="accordion">
<div class="acc-item"><span>Details</span><span>+</span></div>
<div class="acc-item"><span>Shipping & Returns</span><span>+</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.5px; background: #003344; color: #ffffff;
border: none; border-radius: 2px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.5px; background: transparent; color: #003344;
border: 1px solid #003344; border-radius: 2px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.27; letter-spacing: 1.2px; background: #b8860b; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#333333; font-family:'Helvetica Neue',Arial,sans-serif; font-weight:300; }
*{box-sizing:border-box;}
.nav{height:64px;background:#0a0a0a;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:17px;font-weight:300;letter-spacing:4px;text-transform:uppercase;color:#fff;}
.navlinks{display:flex;gap:28px;font-size:12px;font-weight:300;letter-spacing:1px;color:#7a9eab;}
.hero{height:290px;background:linear-gradient(115deg,#001a24 0%,#003344 55%,#0a0a0a 100%);display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;}
.range{position:absolute;right:70px;top:60px;width:220px;height:170px;background:#1a1a1a;border-radius:2px;}
.knob{position:absolute;width:22px;height:22px;border-radius:50%;background:#7a9eab;}
.k1{left:14px;top:14px;} .k2{left:46px;top:14px;} .k3{left:78px;top:14px;}
.burner{position:absolute;width:50px;height:50px;border-radius:50%;border:2px solid #003344;}
.b1{left:20px;top:60px;} .b2{left:90px;top:60px;}
.herotext{position:relative;z-index:2;max-width:400px;}
.herotext h1{font-size:30px;font-weight:300;color:#fff;margin:0 0 16px;line-height:1.35;letter-spacing:0.3px;}
.herotext p{font-size:13px;color:#7a9eab;margin:0 0 22px;line-height:1.7;}
.cta{display:inline-block;background:#003344;color:#fff;font-size:12px;font-weight:400;letter-spacing:1px;text-transform:uppercase;padding:14px 30px;border-radius:2px;width:fit-content;border:1px solid #7a9eab;}
.seclabel{font-size:13px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;color:#1a1a1a;padding:26px 40px 14px;}
.grid{display:flex;gap:16px;padding:0 40px;}
.card{width:150px;padding:10px;border-radius:2px;background:#f5f5f5;}
.thumb{height:96px;margin-bottom:10px;border-radius:2px;}
.ptitle{font-size:12px;font-weight:400;color:#1a1a1a;line-height:1.4;height:32px;overflow:hidden;}
.pspec{font-size:11px;color:#666666;margin-top:5px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;letter-spacing:0.5px;color:#666666;border-top:1px solid #e8e8e8;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Thermador</div>
<div class="navlinks"><span>Ranges</span><span>Cooktops</span><span>Ventilation</span><span>Refrigeration</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Precision engineered. Quietly professional.</h1>
<p>Appliances built for kitchens that treat cooking as craft, not chore.</p>
<div class="cta">Explore the Collection</div>
</div>
<div class="range"><div class="knob k1"></div><div class="knob k2"></div><div class="knob k3"></div><div class="burner b1"></div><div class="burner b2"></div></div>
</div>
<div class="seclabel">Professional Collection</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003344,#1a1a1a)"></div><div class="ptitle">48" Pro Range</div><div class="pspec">Dual Fuel</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a1a1a,#003344)"></div><div class="ptitle">36" Induction Cooktop</div><div class="pspec">Star Burner</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7a9eab,#003344)"></div><div class="ptitle">Column Refrigerator</div><div class="pspec">Masterpiece Series</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003344,#7a9eab)"></div><div class="ptitle">Wall Ventilation Hood</div><div class="pspec">1200 CFM</div></div>
</div>
<div class="footer"><span>© Since 1947</span><span>Find a Showroom</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfcfc; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfcfc; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #747c83; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #006fcf; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #fcfcfc; color: #006fcf;
border: 1px solid #006fcf; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfcfc; color: #383838;
border: 1px solid #c6c5c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #747c83; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f48120; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcfcfc; color:#231f20; box-sizing:border-box;
font-family:'Averta', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
.announce { height:32px; background:#231f20; color:#fcfcfc; display:flex; align-items:center; justify-content:center; font-size:13px; }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-family:'Baginda Script', cursive; font-size:24px; color:#006fcf; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#231f20; }
.navlinks span:first-child { color:#006fcf; border-bottom:2px solid #006fcf; padding-bottom:6px; }
.layout { display:flex; height:calc(640px - 32px - 64px); }
.media { width:340px; flex-shrink:0; background:#f0f0f0; position:relative; display:flex; align-items:center; justify-content:center; }
.onesie { width:150px; height:190px; background:#ffffff; border-radius:16px 16px 40px 40px; box-shadow:0 8px 20px rgba(35,31,32,0.08); position:relative; }
.onesie::before { content:''; position:absolute; left:20px; right:20px; top:14px; height:30px; border-radius:0 0 20px 20px; background:#8f9685; }
.badge { position:absolute; top:18px; left:18px; background:#f48120; color:#ffffff; font-size:11px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; border-radius:4px; padding:4px 8px; }
.detail { flex:1; padding:24px 34px; display:flex; flex-direction:column; gap:12px; }
.kicker { font-size:13px; color:#747c83; text-transform:uppercase; letter-spacing:0.5px; }
h1 { font-family:'Mrs Eaves', Georgia, serif; font-size:26px; font-weight:400; margin:0; }
.price-row { display:flex; gap:10px; align-items:baseline; }
.price-sale { font-family:'Mrs Eaves', Georgia, serif; font-size:18px; color:#e9563b; font-weight:600; }
.price-compare { font-size:14px; text-decoration:line-through; color:#a6a6a6; }
.swatches { display:flex; gap:8px; }
.swatch { width:24px; height:24px; border-radius:999px; border:2px solid #dedede; }
.swatch.active { border-color:#231f20; }
.size-row { display:flex; gap:8px; }
.size { border:1px solid #dedede; border-radius:8px; padding:8px 14px; font-size:13px; }
.size.active { border:2px solid #231f20; background:#f0f0f0; }
.trust { display:flex; gap:14px; font-size:12px; color:#747c83; border-top:1px solid #dedede; border-bottom:1px solid #dedede; padding:8px 0; }
.actions { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#006fcf; color:#ffffff; border:none; border-radius:8px; height:44px; font-size:15px; font-weight:600; }
.btn-secondary { background:#fcfcfc; color:#006fcf; border:2px solid #006fcf; border-radius:8px; height:44px; padding:0 20px; font-size:15px; font-weight:600; }
</style></head>
<body>
<div class="announce">Free shipping on orders over $75</div>
<div class="topbar">
<div class="brand">Colored Organics</div>
<div class="navlinks"><span>Baby</span><span>Toddler</span><span>Gifts</span></div>
</div>
<div class="layout">
<div class="media">
<div class="badge">Sale</div>
<div class="onesie"></div>
</div>
<div class="detail">
<div class="kicker">Organic Cotton</div>
<h1>Sage Stripe Footed Romper</h1>
<div class="price-row"><span class="price-sale">$24.00</span><span class="price-compare">$32.00</span></div>
<div class="swatches">
<div class="swatch active" style="background:#8f9685;"></div>
<div class="swatch" style="background:#9e8575;"></div>
<div class="swatch" style="background:#80565b;"></div>
</div>
<div class="size-row">
<div class="size">0-3M</div>
<div class="size active">3-6M</div>
<div class="size">6-9M</div>
</div>
<div class="trust">GOTS Certified · Dermatologist Tested · Flexible Returns</div>
<div class="actions">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Add to Wishlist</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #232322;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #232322;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #232322; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.55; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #fafafa; color: #232322;
border: 1px solid #108474; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.6; background: #fafafa; color: #232322;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#232322; box-sizing:border-box;
font-family:'GT Walsheim Pro Light','Helvetica',Arial,sans-serif; }
* { box-sizing:border-box; }
.bold { font-family:'GT Walsheim Pro Bold','Baskerville',Georgia,serif; }
nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:15px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.navlinks { display:flex; gap:26px; font-size:12px; color:#666666; }
.navlinks span.on { color:#108474; }
.search { background:#ffffff; border:1px solid #dddddd; border-radius:9999px; padding:7px 18px; font-size:11px; color:#999; width:150px; }
.wrap { display:flex; height:520px; padding:0 36px; gap:44px; align-items:center; }
.photo { width:300px; height:88%; background:#ffffff; border-radius:8px; display:flex; align-items:center; justify-content:center; position:relative; }
.carb { width:64px; height:200px; border-radius:14px; background:linear-gradient(120deg,#e8e8e8,#108474 45%,#0d6b5d 100%); box-shadow:0 20px 40px rgba(0,0,0,.08); }
.new-badge { position:absolute; top:14px; left:14px; background:#fbcd0a; color:#232322; font-size:10px; font-weight:700; padding:4px 10px; border-radius:4px; text-transform:uppercase; }
.lav-glow { position:absolute; bottom:0; right:0; width:120px; height:120px; background:radial-gradient(circle,#a89cc8 0%,transparent 70%); opacity:.5; border-radius:8px; }
.info { flex:1; display:flex; flex-direction:column; gap:14px; }
.cat { font-size:12px; color:#999999; }
.info h1 { font-family:'GT Walsheim Pro Bold','Baskerville',Georgia,serif; font-size:30px; font-weight:700; margin:0; }
.stars { color:#232322; font-size:12px; }
.price { font-size:18px; font-weight:700; }
.swatch-row { display:flex; gap:8px; }
.swatch { width:24px; height:24px; border-radius:9999px; }
.sw1{background:#232322}.sw2{background:#c1e6e6}.sw3{background:#a89cc8}.sw4{background:#fbcd0a}
.desc { font-size:13px; color:#333333; line-height:1.65; max-width:420px; }
.buy-row { display:flex; gap:12px; margin-top:auto; }
.btn-buy { flex:1; background:#108474; color:#fff; border:none; border-radius:9999px; padding:14px; font-size:13px; font-weight:700; }
.btn-wish { border:1px solid #232322; border-radius:9999px; padding:14px 20px; font-size:13px; }
footer { height:62px; background:#f2f2f2; display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; color:#666666; }
</style></head>
<body>
<nav>
<p class="brand">Aarke</p>
<div class="navlinks"><span>Carbonator</span><span class="on">Carbonator III</span><span>Cylinders</span><span>Journal</span></div>
<span class="search">Search</span>
</nav>
<div class="wrap">
<div class="photo"><span class="new-badge">New</span><div class="lav-glow"></div><div class="carb"></div></div>
<div class="info">
<span class="cat">Sparkling Water Maker</span>
<h1 class="bold">Carbonator III</h1>
<span class="stars">★★★★★ 4.8 (612)</span>
<span class="price">$219.00</span>
<div class="swatch-row"><div class="swatch sw1"></div><div class="swatch sw2"></div><div class="swatch sw3"></div><div class="swatch sw4"></div></div>
<p class="desc">A design museum gift shop object disguised as a kitchen appliance. Stainless steel body, glass carafe, and a single quiet accent — the teal button that turns still into sparkling.</p>
<div class="buy-row">
<button class="btn-buy">Add to Cart</button>
<button class="btn-wish">♡</button>
</div>
</div>
</div>
<footer><span>© Aarke — Swedish design since 2013</span><span>Cylinder Refill · Warranty · Stockists</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A73E8;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A73E8;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-size: 20px; font-weight:700; margin: 0; color: #1A73E8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-size: 12px; font-weight:400; line-height:1.4; margin: 0; color: #76abf1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #CC0000; color: #ffffff;
border: none; border-radius: 999; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #FFFFFF; color: #CC0000;
border: 1px solid #CC0000; border-radius: 999;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #FFFFFF; color: #1A73E8;
border: 1px solid #c6dcf9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #76abf1; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #f8dbdb; color: #CC0000;
border-radius: 999; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: "Helvetica Neue", Arial, sans-serif; background: #0A0A0A; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
.hero { position: relative; height: 380px; background: linear-gradient(120deg, #2a1010 0%, #1a1414 55%, #0A0A0A 100%); overflow: hidden; }
.heroimg { position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(255,0,0,0.18), transparent 55%); }
.overlay { position: absolute; left: 0; right: 0; bottom: 0; height: 220px; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.9) 100%); }
nav { position: relative; z-index: 3; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 36px; }
.brand { color: #fff; font-size: 20px; font-weight: 700; letter-spacing: -0.5px; margin: 0; }
.brand span { color: #FF0000; }
.navlinks { display: flex; gap: 24px; }
.navlinks span { color: rgba(255,255,255,0.75); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.navlinks span.on { color: #fff; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: #FF0000; }
.hero-copy { position: relative; z-index: 3; padding: 30px 36px 0; max-width: 480px; }
.livebadge { display: inline-flex; align-items: center; gap: 6px; background: #FF0000; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 4px; }
.livebadge .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.hero-copy h1 { color: #fff; font-size: 44px; font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 10px; line-height: 1.05; }
.hero-copy p { color: rgba(255,255,255,0.75); font-size: 13.5px; line-height: 1.5; margin: 0 0 18px; }
.rowbtn { display: flex; gap: 10px; }
.btn-watch { background: #fff; color: #111; border: none; border-radius: 6px; padding: 11px 22px; font-weight: 700; font-size: 13px; }
.btn-info { background: rgba(255,255,255,0.16); color: #fff; border: none; border-radius: 6px; padding: 11px 22px; font-weight: 700; font-size: 13px; }
.rails { padding: 6px 36px 0; margin-top: -60px; position: relative; z-index: 3; }
.rail-title { color: #fff; font-size: 14px; font-weight: 700; margin: 0 0 10px; }
.rail { display: flex; gap: 12px; margin-bottom: 20px; }
.card { width: 150px; height: 84px; border-radius: 6px; background: linear-gradient(135deg, #1E1E1E, #141414); position: relative; overflow: hidden; flex-shrink: 0; }
.card .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.2); }
.card .prog span { display: block; height: 100%; background: #FF0000; }
.card .tag { position: absolute; top: 6px; left: 6px; font-size: 8px; font-weight: 800; color: #fff; background: rgba(0,0,0,0.5); padding: 2px 5px; border-radius: 3px; }
.top10 { display: flex; gap: 4px; align-items: flex-end; }
.top10 .item { position: relative; width: 96px; height: 84px; flex-shrink: 0; }
.top10 .num { position: absolute; left: -8px; bottom: -8px; font-size: 60px; font-weight: 800; color: #0A0A0A; -webkit-text-stroke: 1.5px #3a3a3a; z-index: 1; }
.top10 .card { width: 78px; height: 78px; position: absolute; right: 0; bottom: 0; z-index: 2; }
</style>
<div class="hero">
<div class="heroimg"></div>
<div class="overlay"></div>
<nav>
<p class="brand">Globo<span>play</span></p>
<div class="navlinks"><span class="on">Home</span><span>Series</span><span>Movies</span><span>Sports</span><span>Live</span></div>
<div class="avatar"></div>
</nav>
<div class="hero-copy">
<span class="livebadge"><span class="dot"></span>LIVE</span>
<h1>Coastal Nights</h1>
<p>An original series set on the edge of the Atlantic — 3,000+ hours of drama and entertainment streaming this season.</p>
<div class="rowbtn"><button class="btn-watch">▶ Watch now</button><button class="btn-info">More info</button></div>
</div>
</div>
<div class="rails">
<p class="rail-title">Continue watching</p>
<div class="rail">
<div class="card"><span class="tag">EP 4</span><div class="prog"><span style="width:70%"></span></div></div>
<div class="card"><span class="tag">EP 9</span><div class="prog"><span style="width:35%"></span></div></div>
<div class="card"><span class="tag">NEW</span><div class="prog"><span style="width:10%"></span></div></div>
<div class="card"><span class="tag">EP 2</span><div class="prog"><span style="width:88%"></span></div></div>
<div class="card"><span class="tag">EP 6</span><div class="prog"><span style="width:52%"></span></div></div>
</div>
<p class="rail-title">Top 10 today</p>
<div class="top10">
<div class="item"><span class="num">1</span><div class="card"></div></div>
<div class="item"><span class="num">2</span><div class="card"></div></div>
<div class="item"><span class="num">3</span><div class="card"></div></div>
<div class="item"><span class="num">4</span><div class="card"></div></div>
<div class="item"><span class="num">5</span><div class="card"></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3182f6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3182f6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9dc1f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3182f6; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3182f6; color: #f5f5f5;
border: 1px solid #5094f6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9dc1f5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5296f7; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1f29; box-sizing:border-box;
font-family:-apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #f2f4f6; }
.brand { font-size:15px; font-weight:700; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#4e5968; }
.entry { background:#3182f6; color:#ffffff; border:none; border-radius:8px; padding:6px 12px;
font-size:14px; font-weight:600; }
.main { display:flex; padding:26px 32px; gap:24px; }
.stockcol { flex:1.3; }
.stockrow { display:flex; align-items:baseline; gap:12px; margin-bottom:4px; }
.stockrow .name { font-size:22px; font-weight:700; }
.stockrow .code { font-size:13px; color:#4e5968; }
.price { font-size:34px; font-weight:700; margin-bottom:2px; }
.change { font-size:15px; font-weight:600; color:#3182f6; margin-bottom:18px; }
.chart { height:150px; border-radius:8px; background:linear-gradient(180deg,rgba(49,130,246,0.14),rgba(49,130,246,0));
position:relative; overflow:hidden; border:1px solid #e5e8eb; }
.chart svg { width:100%; height:100%; }
.dialog { width:280px; background:#fbfcfd; border-radius:16px; padding:20px;
box-shadow:0 12px 28px -4px rgba(0,0,0,0.12), 0 8px 56px -4px rgba(0,0,0,0.1); }
.dialog .t { font-size:16px; font-weight:700; margin-bottom:12px; }
.row2 { display:flex; justify-content:space-between; font-size:16px; color:#4e5968; padding:10px 0;
border-bottom:1px solid #e5e8eb; }
.row2:last-of-type { border-bottom:none; }
.buyrow { display:flex; gap:8px; margin-top:16px; }
.buybtn { flex:1; background:#3182f6; color:#ffffff; border:none; border-radius:8px; height:36px; font-size:14px; font-weight:600; }
.sellbtn { flex:1; background:#ffffff; color:#4e5968; border:1px solid #e5e8eb; border-radius:8px; height:36px; font-size:14px; font-weight:600; }
</style></head>
<body>
<nav>
<span class="brand">Toss Securities</span>
<div class="navlinks"><span>Domestic</span><span>Overseas</span><span>ETF</span><span>Bonds</span></div>
<button class="entry">See markets</button>
</nav>
<div class="main">
<div class="stockcol">
<div class="stockrow"><span class="name">Northfield Robotics</span><span class="code">081720</span></div>
<div class="price">92,400</div>
<div class="change">+1,850 (+2.04%)</div>
<div class="chart">
<svg viewBox="0 0 300 100" preserveAspectRatio="none">
<polyline points="0,70 40,60 80,64 120,40 160,48 200,26 240,34 300,16" fill="none" stroke="#3182f6" stroke-width="3"/>
</svg>
</div>
</div>
<div class="dialog">
<div class="t">Order</div>
<div class="row2"><span>Available</span><span>3,204,000</span></div>
<div class="row2"><span>Quantity</span><span>10 shares</span></div>
<div class="row2"><span>Est. total</span><span>924,000</span></div>
<div class="buyrow">
<button class="buybtn">Buy</button>
<button class="sellbtn">Sell</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #101010;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #101010;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.2; margin: 0; color: #101010; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.06em; background: #101010; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.06em; background: #ffffff; color: #101010;
border: 1px solid #101010; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #101010;
border: 1px solid #c3c3c3; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.1em; background: #f7f7f7; color: #101010;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#101010; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 44px;border-bottom:1px solid #e5e5e5;}
.logo{font-size:15px;font-weight:400;letter-spacing:0.2px;color:#101010;}
.navlinks{display:flex;gap:28px;font-size:13px;font-weight:400;color:#101010;}
.hero{height:170px;display:flex;align-items:center;padding:0 44px;}
.label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#767676;margin-bottom:14px;}
.h1{font-size:52px;font-weight:300;letter-spacing:-1px;line-height:1.05;color:#101010;margin:0;max-width:640px;}
.divider{height:1px;background:#e5e5e5;margin:0 44px;}
.sec{padding:20px 44px 0;}
.sectitle{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#767676;margin:0 0 16px;}
.artists{display:flex;flex-direction:column;}
.artistrow{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid #e5e5e5;font-size:16px;font-weight:300;}
.artistrow span.med{font-size:12px;color:#767676;font-weight:400;}
.exhib{display:flex;gap:16px;margin-top:16px;}
.excard{width:220px;}
.eximg{height:110px;background:#f7f7f7;}
.extitle{font-size:13px;font-weight:400;margin:10px 0 2px;}
.exmeta{font-size:11px;color:#767676;margin:0;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;background:#101010;display:flex;align-items:center;justify-content:space-between;padding:0 44px;font-size:11px;color:#ffffff;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Pace Gallery</div>
<div class="navlinks"><span>Artists</span><span>Exhibitions</span><span>Locations</span><span>Contact</span></div>
</div>
<div class="hero">
<div>
<div class="label">Current Exhibition</div>
<div class="h1">Structures of Silence</div>
</div>
</div>
<div class="divider"></div>
<div class="sec">
<div class="sectitle">Represented Artists</div>
<div class="artists">
<div class="artistrow"><span>Agnes Kessler</span><span class="med">Painting</span></div>
<div class="artistrow"><span>Julian Whitcombe</span><span class="med">Sculpture</span></div>
<div class="artistrow"><span>Mira Osei</span><span class="med">Photography</span></div>
</div>
<div class="exhib">
<div class="excard"><div class="eximg"></div><div class="extitle">Structures of Silence</div><div class="exmeta">New York · Through Nov 12</div></div>
<div class="excard"><div class="eximg"></div><div class="extitle">Field Recordings</div><div class="exmeta">London · Through Dec 03</div></div>
<div class="excard"><div class="eximg"></div><div class="extitle">Interior Weather</div><div class="exmeta">Hong Kong · Opens Oct 22</div></div>
</div>
</div>
<div class="footer"><span>New York · London · Hong Kong · Geneva</span><span>© Pace Gallery</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3959cc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3959cc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a0afe3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #304cad; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3959cc; color: #ffffff;
border: 1px solid #304cad; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3959cc; color: #f5f5f5;
border: 1px solid #5772d3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a0afe3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3857c7; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#32353a; box-sizing:border-box;
font-family:"Hiragino Kaku Gothic ProN", -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #dcdddd; }
.brand { font-size:17px; font-weight:700; color:#3959cc; }
.navlinks { font-size:13px; color:#686a6d; display:flex; gap:18px; }
.hero { text-align:center; padding:22px 32px 18px; }
h1 { font-size:26px; font-weight:700; margin:0 0 8px; }
.sub { font-size:14px; color:#686a6d; margin:0 0 16px; }
.qcard { max-width:480px; margin:0 auto; background:#ffffff; border:1px solid #dcdddd; border-radius:12px;
padding:24px; box-shadow:0px 1px 4px rgba(22,25,31,0.08); }
.qcard .q { font-size:16px; font-weight:700; margin-bottom:14px; }
.opt { border:1px solid #dcdddd; border-radius:12px; padding:12px 16px; font-size:14px; margin-bottom:8px;
display:flex; justify-content:space-between; align-items:center; }
.opt.on { border:1px solid #8296df; background:#f0f2fc; }
.buttonrow { display:flex; gap:12px; padding:18px 32px 0; justify-content:center; }
.btn-primary { background:#3959cc; color:#ffffff; border-radius:8px; padding:12px 24px; font-size:16px; font-weight:700; }
.btn-accent { background:#27cc91; color:#ffffff; border-radius:8px; padding:12px 24px; font-size:16px; font-weight:700; }
.tags { display:flex; gap:8px; justify-content:center; padding-top:20px; }
.tag { border-radius:4px; padding:2px 8px; font-size:12px; font-weight:700; }
.tag.green { background:#e9faf4; color:#1c9167; }
.tag.blue { background:#f0f2fc; color:#283f91; }
</style></head>
<body>
<nav>
<span class="brand">Ubie</span>
<div class="navlinks"><span>Search by symptom</span><span>Find a hospital</span><span>For healthcare providers</span></div>
</nav>
<section class="hero">
<h1>Just 3 minutes. Developed by doctors.</h1>
<p class="sub">What symptoms are you experiencing? Let's take it one step at a time.</p>
</section>
<div class="qcard">
<div class="q">Have you had headaches recently?</div>
<div class="opt on"><span>Yes, occasionally</span><span>◉</span></div>
<div class="opt"><span>No, never</span><span>○</span></div>
<div class="opt"><span>Not sure</span><span>○</span></div>
</div>
<div class="buttonrow">
<button class="btn-primary">Next</button>
<button class="btn-accent">Check my symptoms</button>
</div>
<div class="tags">
<span class="tag green">Safe and trusted to use</span>
<span class="tag blue">50,000+ medical sources</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #d6403d; color: #ffffff;
border: none; border-radius: 4px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: transparent; color: #111111;
border: 1px solid #d6403d; border-radius: 4px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d6403d; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:'Lato','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; background:#121212; }
.brand { font-size:16px; font-weight:700; color:#fff; margin:0; text-transform:uppercase; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; color:#fff; }
.navlinks span.on { color:#ff82af; }
.util { font-size:12px; color:#dedede; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 64px); }
.stage { padding:24px; border-right:1px solid #e8e8e1; display:flex; flex-direction:column; gap:10px; background:#f4f4f4; }
.panel { flex:1; position:relative; overflow:hidden; border-radius:8px; }
.panel::before { content:''; position:absolute; left:50%; bottom:6%; width:44%; height:70%; transform:translateX(-50%); border-radius:0 0 12px 12px; background:linear-gradient(180deg,#e2e2e2,#b8b8b8 60%,#8a8a8a); box-shadow:0 10px 24px rgba(0,0,0,0.15); }
.panel::after { content:''; position:absolute; left:50%; top:20%; width:30%; height:16%; transform:translateX(-50%); border-radius:8px 8px 0 0; background:linear-gradient(180deg,#f4c542,#d6403d); }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; background:#e8e8e1; border-radius:8px; }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:14px; font-weight:400; color:#717171; }
h1 { margin:0; font-size:26px; font-weight:700; letter-spacing:-0.3px; line-height:1.15; }
.badge-new { background:#ff82af; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:4px 8px; border-radius:4px; display:inline-block; width:fit-content; }
.price { font-size:20px; font-weight:700; }
.feature-grid { display:flex; gap:10px; }
.feature { flex:1; background:#fff; border:1px solid #dedede; border-radius:8px; padding:10px; text-align:center; font-size:12px; color:#323232; }
.feature b { display:block; font-size:16px; color:#d6403d; }
.desc { font-size:14px; color:#323232; line-height:1.5; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:52px; background:#d6403d; color:#fff; border:none; border-radius:4px; font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; }
.btn-secondary { width:150px; height:52px; background:#fff; border:2px solid #111111; color:#111111; border-radius:4px; font-size:16px; font-weight:700; text-transform:uppercase; }
</style></head>
<body>
<nav>
<p class="brand">Blendtec</p>
<div class="navlinks"><span class="on">Blenders</span><span>Jars</span><span>Recipes</span><span>Commercial</span></div>
<div class="util">Search Account Cart (0)</div>
</nav>
<main>
<div class="stage">
<div class="panel"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Designer Series</span>
<h1>Designer 725 Blender</h1>
<span class="badge-new">New Colorway</span>
<div class="price">$449.95</div>
<div class="feature-grid">
<div class="feature"><b>1800W</b>Peak Power</div>
<div class="feature"><b>6</b>Pre-Programmed Cycles</div>
<div class="feature"><b>90 sec</b>Smoothie Cycle</div>
</div>
<p class="desc">Commercial-grade motor housed in a powder-coated base, paired with a shatterproof jar built to crush ice, whole fruit, and frozen produce in seconds.</p>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compare Models</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0c0c0c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0c0c0c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #0c0c0c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #989898; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #1a211e; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #1a211e;
border: 1px solid #1a211e; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #0c0c0c;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #989898; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #cc2e39; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Geist','Open Sans',Helvetica,sans-serif; color:#0c0c0c; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #d7dad8;}
.logo{font-family:'Exposure-10','Bryant',Helvetica,sans-serif;font-size:20px;font-weight:700;letter-spacing:-1px;text-transform:uppercase;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;}
.navlinks div:nth-child(1){color:#1a211e;border-bottom:2px solid #1a211e;padding-bottom:20px;}
.navlinks div:not(:nth-child(1)){color:#606562;}
.hero{height:230px;background:#1a211e;color:#fff;display:flex;align-items:center;padding:0 40px;}
.herotext{width:420px;}
.herotext h1{font-family:'Exposure-10','Bryant',Helvetica,sans-serif;font-size:40px;font-weight:700;letter-spacing:-1px;line-height:1.12;margin:0 0 14px;}
.herotext p{font-size:14px;color:#b8bcba;margin:0 0 16px;max-width:340px;}
.btn{display:inline-block;background:#fff;color:#1a211e;font-size:14px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;padding:12px 24px;border-radius:8px;}
.heroart{flex:1;height:170px;border-radius:12px;background:linear-gradient(135deg,#9ea790,#0c0c0c 70%);}
.grid{display:flex;gap:14px;padding:16px 30px 0;}
.card{width:210px;border:1px solid #e6e9e8;border-radius:12px;padding:12px;}
.thumb{height:110px;background:#eef1f0;border-radius:8px;margin-bottom:8px;}
.ctitle{font-size:16px;font-weight:600;margin:0;}
.cprice{font-size:16px;margin-top:4px;}
.rating{color:#e9a93f;font-size:12px;margin-top:2px;}
.badge{display:inline-block;background:#cc2e39;color:#fff;font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;border-radius:4px;padding:2px 8px;margin-bottom:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:96px;background:#1a211e;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Peak Design</div>
<div class="navlinks"><div>Bags</div><div>Camera Straps</div><div>Tripods</div><div>Mounts</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Carry gear for people who move with intention.</h1>
<p>Modular bags and mounts engineered for photographers, travelers, and everyday carry.</p>
<div class="btn">Shop Bags</div>
</div>
<div class="heroart"></div>
</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb"></div><div class="ctitle">Everyday Backpack 20L</div><div class="rating">★★★★★</div><div class="cprice">$259.95</div></div>
<div class="card"><div class="thumb" style="background:#9ea790;"></div><div class="ctitle">Travel Tripod, Carbon</div><div class="rating">★★★★★</div><div class="cprice">$349.95</div></div>
<div class="card"><div class="thumb" style="background:#e6e9e8;"></div><div class="ctitle">Capture Camera Clip</div><div class="rating">★★★★☆</div><div class="cprice">$69.95</div></div>
<div class="card"><div class="thumb" style="background:#606562;"></div><div class="ctitle">Slide Camera Strap</div><div class="rating">★★★★★</div><div class="cprice">$44.95</div></div>
</div>
<div class="footer"><span>© Peak Design</span><span>Shop Support Community</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.18; letter-spacing: -0.25px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; background: #1a5fa8; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; background: #ffffff; color: #1a5fa8;
border: 1px solid #1a5fa8; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.36; letter-spacing: 0.2px; background: #c0392b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:'Courier New',Courier,'Lucida Console',monospace; }
nav { height:56px; background:#313131; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#ffffff; font-size:16px; font-weight:700; }
.navlinks { display:flex; gap:22px; font-size:12px; color:#c9c9c9; }
.navlinks span.on { color:#e05c00; }
.partsearch { background:#ffffff; border-radius:6px; padding:7px 16px; font-size:11px; color:#767676; width:210px; }
.breadcrumb { height:24px; padding:6px 30px 0; font-size:11px; color:#767676; }
.wrap { display:flex; height:500px; padding:12px 30px; gap:26px; }
.photo { width:280px; flex-shrink:0; background:#f5f5f5; border-radius:6px; display:flex; align-items:center; justify-content:center; position:relative; }
.unit { width:180px; height:200px; border-radius:6px; background:linear-gradient(160deg,#dfe4e8,#a0bddb 60%,#1a5fa8 100%); position:relative; }
.unit::before { content:''; position:absolute; inset:16px; border:2px solid rgba(255,255,255,.5); border-radius:3px; }
.quote-badge { position:absolute; top:14px; left:14px; background:#e05c00; color:#fff; font-size:10px; font-weight:700; padding:4px 10px; border-radius:4px; }
.info { flex:1; display:flex; flex-direction:column; gap:10px; }
.model-no { font-size:11px; color:#767676; }
.info h1 { font-size:20px; font-weight:700; margin:0; line-height:1.3; }
.spec-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; border-top:1px solid #d6d6d6; border-bottom:1px solid #d6d6d6; padding:10px 0; font-size:11px; }
.spec-grid div b { display:block; font-size:13px; color:#1a5fa8; }
.desc { font-size:12.5px; color:#444444; line-height:1.6; max-width:460px; }
.badges-row { display:flex; gap:8px; }
.badges-row span { font-size:10.5px; border:1px solid #d6d6d6; border-radius:4px; padding:4px 10px; color:#444; }
.price-row { display:flex; align-items:center; gap:16px; margin-top:auto; }
.price { font-size:20px; font-weight:700; color:#313131; }
.btn-buy { background:#1a5fa8; color:#fff; border:none; border-radius:4px; padding:12px 24px; font-size:12px; font-weight:700; }
.btn-quote { background:#e05c00; color:#fff; border:none; border-radius:4px; padding:12px 20px; font-size:12px; font-weight:700; }
footer { height:60px; background:#f5f5f5; display:flex; align-items:center; justify-content:space-between; padding:0 30px; font-size:10.5px; color:#767676; }
</style></head>
<body>
<nav>
<p class="brand">AC Direct</p>
<div class="navlinks"><span>Split Systems</span><span class="on">Air Handlers</span><span>Filtration</span><span>Support</span></div>
<span class="partsearch mono">Part # lookup…</span>
</nav>
<div class="breadcrumb">HVAC Equipment / Air Handlers / Fan Coil Units</div>
<div class="wrap">
<div class="photo"><span class="quote-badge">Ships in 3–5 Days</span><div class="unit"></div></div>
<div class="info">
<span class="model-no mono">MODEL: FCU-2400-V2</span>
<h1>2-Ton Vertical Fan Coil Unit, Cleanroom Rated</h1>
<div class="spec-grid">
<div>Airflow<b>2400 CFM</b></div>
<div>Filtration<b>MERV 13</b></div>
<div>Voltage<b>208/230V</b></div>
</div>
<p class="desc">Direct-to-facility unit for HVAC contractors and cleanroom operators. Spec sheet, submittal data, and CAD drawings available on request.</p>
<div class="badges-row"><span>ETL Listed</span><span>2-Yr Warranty</span><span>Net-30 Available</span></div>
<div class="price-row">
<span class="price">$2,140.00</span>
<button class="btn-buy">Add to Cart</button>
<button class="btn-quote">Get a Quote</button>
</div>
</div>
</div>
<footer><span>© AC Direct</span><span>Spec Sheets · Submittal Data · Contractor Accounts</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; background: #3498db; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; background: #fefefe; color: #121212;
border: 1px solid #3498db; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fefefe; color: #121212;
border: 1px solid #c3c3c3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.6px; background: #3498db; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fefefe; font-family:Myriad,'Helvetica Neue',Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dedede;}
.logo{font-family:Oswald,Arial,sans-serif;font-size:20px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
.navlinks{display:flex;gap:22px;font-family:Oswald,Arial,sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#121212;}
.filterrail{height:40px;background:#f3f3f3;display:flex;align-items:center;gap:18px;padding:0 36px;font-size:12px;color:#5b5b5b;}
.hero{height:220px;background:#121212;display:flex;align-items:center;padding:0 36px;color:#fefefe;}
.left{width:440px;}
.h1{font-family:'Big Caslon','Bodoni MT',Cardo,Georgia,serif;font-size:28px;font-weight:600;line-height:1.3;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.6;color:#c9c9c9;max-width:340px;margin:0 0 16px;}
.cta{display:inline-block;background:#3498db;color:#fff;font-family:Oswald,Arial,sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:11px 24px;border-radius:8px;}
.right{flex:1;position:relative;height:150px;}
.frame{position:absolute;right:70px;top:0;width:140px;height:150px;border:6px solid #3498db;background:#1a1a1a;}
.sec{padding:20px 36px 0;}
.seclabel{font-family:Oswald,Arial,sans-serif;font-size:22px;font-weight:700;text-transform:uppercase;margin-bottom:4px;}
.secline{width:60px;height:2px;background:#3498db;margin-bottom:16px;}
.grid{display:flex;gap:14px;}
.card{width:200px;border:1px solid #dedede;padding:0;}
.thumb{width:100%;aspect-ratio:4/5;background:#f3f3f3;}
.cardbody{padding:10px;}
.ptitle{font-family:'Big Caslon','Bodoni MT',Cardo,Georgia,serif;font-size:14px;font-weight:600;margin:0 0 4px;}
.pprice{font-size:13px;color:#5b5b5b;}
.authbadge{display:inline-flex;align-items:center;gap:4px;background:#f3f3f3;color:#3498db;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:9999px;margin-top:6px;}
.dot{width:6px;height:6px;border-radius:50%;background:#3498db;}
</style>
<div class="nav">
<div class="logo">Shop Rsa</div>
<div class="navlinks"><div>Jerseys</div><div>Photos</div><div>Equipment</div><div>Authenticity</div></div>
</div>
<div class="filterrail">All Sports · Football · Basketball · Baseball · Boxing</div>
<div class="hero">
<div class="left">
<div class="h1">Certified-dealer<br>confidence.</div>
<div class="sub">More archive than lifestyle brand — one accent color, restraint everywhere else.</div>
<div class="cta">Shop Authenticated</div>
</div>
<div class="right"><div class="frame"></div></div>
</div>
<div class="sec">
<div class="seclabel">Featured Memorabilia</div>
<div class="secline"></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3498db,#121212)"></div><div class="cardbody"><div class="ptitle">Signed Championship Jersey</div><div class="pprice">$899.00</div><div class="authbadge"><span class="dot"></span>COA Verified</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#dedede,#121212)"></div><div class="cardbody"><div class="ptitle">Framed Action Photo, 16x20</div><div class="pprice">$249.00</div><div class="authbadge"><span class="dot"></span>COA Verified</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#121212,#3498db)"></div><div class="cardbody"><div class="ptitle">Game-Worn Batting Glove</div><div class="pprice">$1,450.00</div><div class="authbadge"><span class="dot"></span>COA Verified</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #706952; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #d7ca9e; color: #222222;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #f9f9f9; color: #222222;
border: 1px solid #d7ca9e; border-radius: 0px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9f9f9; color: #222222;
border: 1px solid #c3c3c3; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #706952; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #008827; color: #f9f9f9;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9f9f9; color:#222222; box-sizing:border-box;
font-family:Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:64px; border-bottom:1px solid #eae7e4; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#706952; }
.navlinks span:first-child { color:#222222; border-bottom:2px solid #d7ca9e; padding-bottom:6px; }
.layout { display:flex; height:calc(640px - 64px); }
.media { width:360px; flex-shrink:0; background:#ede6d2; position:relative; display:flex; align-items:center; justify-content:center; }
.bike { width:220px; height:140px; position:relative; }
.bike::before { content:''; position:absolute; left:10px; bottom:0; width:70px; height:70px; border-radius:50%; border:8px solid #383d41; }
.bike::after { content:''; position:absolute; right:10px; bottom:0; width:70px; height:70px; border-radius:50%; border:8px solid #383d41; }
.frame { position:absolute; left:70px; bottom:30px; width:90px; height:8px; background:#d7ca9e; transform:rotate(-18deg); }
.badge-sale { position:absolute; top:18px; left:18px; background:#cc0000; color:#f9f9f9; font-size:11px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; padding:4px 8px; }
.detail { flex:1; padding:24px 34px; display:flex; flex-direction:column; gap:12px; }
.kicker { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#706952; }
h1 { font-size:24px; font-weight:700; margin:0; text-transform:uppercase; }
.price { font-size:20px; font-weight:700; }
.badges { display:flex; gap:8px; }
.badge-green { background:#008827; color:#f9f9f9; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:4px 8px; }
.filter-row { display:flex; gap:0; }
.filter { border:1px solid #c8cbcf; padding:8px 12px; font-size:13px; }
.filter.active { border-bottom:2px solid #d7ca9e; }
.spec-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:13px; color:#444444; }
.spec-grid div { border-bottom:1px solid #eae7e4; padding:4px 0; }
.actions { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#d7ca9e; color:#222222; border:none; border-radius:0; height:44px; font-size:14px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
.btn-secondary { background:#f9f9f9; color:#222222; border:2px solid #222222; border-radius:0; height:44px; padding:0 22px; font-size:14px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
</style></head>
<body>
<div class="topbar">
<div class="brand">Commencal</div>
<div class="navlinks"><span>Bikes</span><span>Snow</span><span>Lifestyle</span></div>
</div>
<div class="layout">
<div class="media">
<div class="badge-sale">Sale</div>
<div class="bike"><div class="frame"></div></div>
</div>
<div class="detail">
<div class="kicker">Enduro / Trail</div>
<h1>Meta TR 29 Ride</h1>
<div class="price">$3,299</div>
<div class="badges"><span class="badge-green">Green Line</span></div>
<div class="filter-row">
<div class="filter active">Enduro</div>
<div class="filter">Trail</div>
<div class="filter">Downhill</div>
</div>
<div class="spec-grid">
<div>Frame: Aluminum</div>
<div>Travel: 160mm</div>
<div>Wheels: 29"</div>
<div>Groupset: SX Eagle</div>
</div>
<div class="actions">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Learn More</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #304cb2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #304cb2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9ca9d7; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e51d23; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #304cb2; color: #ffffff;
border: 1px solid #e51d23; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #304cb2; color: #f5f5f5;
border: 1px solid #5067bd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ca9d7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4d449b; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0E1726; color:#EAF0FA; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; font-variant-numeric: tabular-nums; }
.wrap { padding:30px 44px; }
.title { font-size:26px; font-weight:900; }
.board-card { margin-top:20px; border-radius:20px; padding:22px 26px; position:relative;
background: linear-gradient(135deg,#304CB2,#243C8E); box-shadow: rgba(48,76,178,0.30) 0 14px 30px -16px; }
.eyebrow { font-size:13px; font-weight:700; letter-spacing:1.2px; color:rgba(255,255,255,.78); text-transform:uppercase; }
.board-row { display:flex; align-items:baseline; gap:12px; margin-top:6px; }
.grp { font-size:76px; font-weight:900; color:#F9B612; line-height:1; }
.num { font-size:46px; font-weight:800; color:#fff; line-height:1; }
.cap { font-size:13px; font-weight:500; color:rgba(255,255,255,.85); margin-top:6px; }
.divider { height:1px; background:rgba(255,255,255,.18); margin:14px 0; }
.footer-cols { display:flex; gap:44px; }
.fcol span { display:block; font-size:11px; font-weight:600; text-transform:uppercase; color:rgba(255,255,255,.7); }
.fcol b { font-size:16px; font-weight:700; }
.flight-strip { margin-top:18px; background:#16223A; border:1px solid #2A3A57; border-radius:16px; padding:16px 20px; }
.route-row { display:flex; align-items:center; justify-content:space-between; }
.code { font-size:26px; font-weight:800; }
.mini-route { flex:1; text-align:center; }
.mini-line { height:2px; background:#F9B612; width:70%; margin:0 auto; }
.nonstop { font-size:10px; font-weight:700; text-transform:uppercase; color:#9DAAC4; margin-top:4px; }
.meta-row { display:flex; justify-content:space-between; font-size:12px; color:#9DAAC4; margin-top:10px; }
.cta { margin-top:20px; background:#F9B612; color:#1A1A1A; height:52px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; }
</style></head>
<body>
<div class="wrap">
<div class="title">Southwest (iOS) · Your trip</div>
<div class="board-card">
<div class="eyebrow">Boarding position</div>
<div class="board-row"><div class="grp">A</div><div class="num">23</div></div>
<div class="cap">Board in group A, position 23</div>
<div class="divider"></div>
<div class="footer-cols">
<div class="fcol"><span>Boarding starts</span><b>4:25 PM</b></div>
<div class="fcol"><span>Confirmation</span><b>K9F2Q2</b></div>
</div>
</div>
<div class="flight-strip">
<div class="route-row">
<div class="code">DAL</div>
<div class="mini-route"><div class="mini-line"></div><div class="nonstop">Nonstop · 2h 35m</div></div>
<div class="code">MDW</div>
</div>
<div class="meta-row"><span>WN 2418 · Mon, Jun 9</span><span>Gate B14 · 4:55 PM</span></div>
</div>
<div class="cta">Check in</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #121212;
border: 1px solid #108474; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #b7b7b7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#eeeeee; font-family:'Poppins','Nunito Sans',Arial,Helvetica,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-size:18px;font-weight:600;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.navlinks .active{color:#108474;border-bottom:2px solid #108474;padding-bottom:20px;}
.hero{padding:22px 32px 0;display:flex;justify-content:space-between;align-items:center;}
.hero h1{font-size:28px;font-weight:600;margin:0 0 8px;max-width:420px;}
.hero p{font-size:14px;color:#555;margin:0 0 16px;max-width:380px;}
.btn{display:inline-block;background:#108474;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;border-radius:8px;}
.strap{width:200px;height:130px;background:linear-gradient(160deg,#108474,#0d6b5e);border-radius:12px;position:relative;}
.strap:before{content:'';position:absolute;left:20px;top:20px;width:60px;height:60px;background:#fbcd0a;border-radius:50%;}
.sec{padding:20px 32px 0;}
.sectitle{font-size:16px;font-weight:600;margin-bottom:12px;}
.grid{display:flex;gap:16px;}
.card{width:190px;background:#fff;border-radius:12px;padding:16px;}
.thumb{aspect-ratio:1/1;border-radius:8px;margin-bottom:8px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#fbcd0a;color:#121212;font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.ptitle{font-size:16px;font-weight:600;margin:8px 0 4px;}
.pprice{font-size:18px;font-weight:700;}
.stars{color:#fbcd0a;font-size:12px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#121212;color:#f2f2f2;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kiwi Design</div>
<div class="navlinks"><div class="active">VR Accessories</div><div>Charging Docks</div><div>Face Covers</div></div>
</div>
<div class="hero">
<div>
<h1>Precision straps for a headset that stays put.</h1>
<p>Utility-first VR accessories engineered for long sessions and heavy use.</p>
<div class="btn">Shop Best Sellers</div>
</div>
<div class="strap"></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#108474,#0d6b5e)"><div class="badge">New</div></div><div class="ptitle">Elite Battery Head Strap</div><div class="stars">★★★★★ (2,140)</div><div class="pprice">$59.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#eeeeee,#108474)"></div><div class="ptitle">Silicone Face Cover</div><div class="stars">★★★★★ (890)</div><div class="pprice">$19.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#fbcd0a,#108474)"></div><div class="ptitle">Fast-Charge Dock</div><div class="stars">★★★★★ (615)</div><div class="pprice">$34.99</div></div>
</div>
</div>
<div class="footer"><span>Compatibility Guide · Reviews</span><span>Warranty Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4c0a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4c0a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fd9b12; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4c0a; color: #000000;
border: 1px solid #fd9b12; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4c0a; color: #f5f5f5;
border: 1px solid #fd6730; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff590b; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f4f3; color:#333333; box-sizing:border-box;
font-family:"Hiragino Kaku Gothic ProN", "Noto Sans JP", -apple-system, "Meiryo", sans-serif; }
* { box-sizing:border-box; }
.numeral { font-family:"Oswald", sans-serif; }
nav { height:56px; background:#ffffff; display:flex; align-items:center; padding:0 32px; }
.brand { font-size:16px; font-weight:900; color:#ff4c0a; margin:0; }
.navlinks { display:flex; gap:22px; margin-left:30px; }
.navlinks span { font-size:16px; font-weight:700; color:#333333; }
.navlinks span.on { color:#ff4c0a; }
.cta { margin-left:auto; background:#ff4c0a; color:#ffffff; border-radius:6px; height:40px; padding:0 20px;
display:flex; align-items:center; font-size:14px; font-weight:700; }
.hero { text-align:center; padding:20px 32px 10px; }
.hero .label { font-size:44px; font-weight:900; color:#ff4c0a; margin:0; letter-spacing:-0.5px; }
.hero h1 { font-size:26px; font-weight:900; margin:2px 0 10px; color:#333333; }
.hero p { font-size:14px; color:#666666; margin:0; }
.navy { background:#001c46; color:#ffffff; padding:20px 32px; display:flex; gap:20px; margin-top:14px; }
.step { flex:1; display:flex; gap:14px; align-items:flex-start; }
.step .num { font-size:44px; font-weight:600; color:#fd9b12; line-height:1; }
.step h4 { font-size:16px; font-weight:700; margin:0 0 4px; color:#ffffff; }
.step p { font-size:12px; color:#cdd6e6; margin:0; line-height:1.4; }
.school { display:flex; align-items:center; gap:16px; padding:16px 32px 20px; }
.btn-school { background:#ff7f09; color:#ffffff; border-radius:8px; height:58px; padding:0 26px; display:flex;
align-items:center; font-size:15px; font-weight:400; box-shadow:#e26f00 0px 4px 0px 0px; }
.btn-outline { background:#ffffff; color:#333333; border:2px solid #ff7f09; border-radius:8px; height:58px;
padding:0 26px; display:flex; align-items:center; font-size:15px; box-shadow:#e26f00 0px 4px 0px 0px; }
.badge { margin-left:auto; background:#e5f7f5; color:#00b29d; border-radius:40px; padding:6px 16px; font-size:14px; font-weight:700; }
</style></head>
<body>
<nav>
<p class="brand">mikan</p>
<div class="navlinks"><span class="on">Top</span><span>About</span><span>Members</span><span>News</span></div>
<div class="cta">Careers</div>
</nav>
<div class="hero">
<div class="label">Service</div>
<h1>Supporting every small "I got it" moment, one at a time</h1>
<p>The mikan English app — over 10 million downloads</p>
</div>
<div class="navy">
<div class="step"><span class="num numeral">01</span><div><h4>See the Word</h4><p>Quickly check its meaning and pronunciation</p></div></div>
<div class="step"><span class="num numeral">02</span><div><h4>Choose an Answer</h4><p>Build up that feeling of getting it right</p></div></div>
<div class="step"><span class="num numeral">03</span><div><h4>Review</h4><p>Revisit it once more before you forget</p></div></div>
</div>
<div class="school">
<div class="btn-school">Sign Up for a Free Trial</div>
<div class="btn-outline">Request Materials</div>
<div class="badge">mikan for School</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #848484; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; background: #ffcf2a; color: #111111;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; background: #ffffff; color: #111111;
border: 1px solid #ffcf2a; border-radius: 12px;
padding: 14px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #3a3a3a;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #848484; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffcf2a; color: #111111;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Kala Brand Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'neue-haas-unica','greycliff-cf',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#ffffff; color:#3a3a3a; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e5e5e5;}
.logo{font-weight:700;font-size:19px;color:#111111;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;}
.navlinks .active{color:#e5b800;border-bottom:2px solid #ffcf2a;padding-bottom:5px;}
.search{width:190px;height:36px;border-radius:999px;border:1px solid #e5e5e5;font-size:12px;color:#3a3a3a;line-height:36px;padding:0 16px;}
.hero{background:#111111;color:#fff;padding:28px 36px;display:flex;align-items:center;justify-content:space-between;}
.hero-text h1{font-size:32px;font-weight:600;line-height:1.15;letter-spacing:-.4px;margin:0 0 10px;}
.hero-text p{font-size:14px;color:#bfbfbf;max-width:340px;margin:0 0 14px;}
.btn{display:inline-block;background:#ffcf2a;color:#111;padding:12px 26px;border-radius:12px;font-size:14px;font-weight:600;}
.hero-art{width:180px;height:130px;border-radius:12px;background:linear-gradient(160deg,#2c3034,#272d45 50%,#00caaa);}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px 36px;}
.card{background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.08);overflow:hidden;}
.imgbox{height:100px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;background:#ffcf2a;color:#111;}
.badge.teal{background:#00caaa;color:#111;}
.body{padding:10px 12px 12px;}
.title{font-size:14px;font-weight:600;}
.price{font-size:13px;color:#3a3a3a;margin-top:3px;}
</style>
<div class="nav">
<div class="logo">Kala Brand</div>
<div class="navlinks"><span class="active">Ukuleles</span><span>Guitars</span><span>Accessories</span><span>Learn</span></div>
<div class="search">Search instruments…</div>
</div>
<div class="hero">
<div class="hero-text">
<h1>Instrument craft<br>meets musical joy.</h1>
<p>Ukuleles handcrafted from koa, mahogany, and spruce — for beginners and touring pros alike.</p>
<div class="btn">Shop Ukuleles</div>
</div>
<div class="hero-art"></div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#e5cba0,#b88a4e);"><div class="badge">New</div></div>
<div class="body"><div class="title">Kala KA-C Concert Ukulele</div><div class="price">$99.00</div></div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#d0b088,#8a5c2e);"><div class="badge teal">Best Seller</div></div>
<div class="body"><div class="title">Kala Mahogany Tenor Uke</div><div class="price">$149.00</div></div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#c8a888,#7a4e2c);"></div>
<div class="body"><div class="title">Kala Solid Spruce Ukulele</div><div class="price">$199.00</div></div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#2c3034,#676986);"></div>
<div class="body"><div class="title">Kala U-Bass Fretted</div><div class="price">$399.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 300; line-height: 1.2; letter-spacing: 3px; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.8px; background: #ee9441; color: #000000;
border: none; border-radius: 4px; padding: 13px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.8px; background: #ffffff; color: #141414;
border: 1px solid #ee9441; border-radius: 4px;
padding: 12px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #141414;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.33; letter-spacing: 0.2px; background: #3ed660; color: #141414;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#141414; box-sizing:border-box;
font-family:'Inter',sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #dedede; }
.brand { font-family:'Spectral',Georgia,serif; font-size:19px; font-weight:300; letter-spacing:0.5px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; font-weight:500; letter-spacing:0.2px; color:#141414; }
.navcta { position:relative; }
.dot { position:absolute; top:-4px; right:-8px; width:7px; height:7px; border-radius:50%; background:#ee9441; }
.hero { background:#0a3036; color:#fff; display:flex; align-items:center; padding:0 32px; height:230px; gap:32px; }
.heroText { flex:1.2; }
.headline { font-family:'Spectral',Georgia,serif; font-size:38px; font-weight:300; line-height:1.15; margin-bottom:10px; }
.sub { font-size:14px; opacity:0.7; line-height:1.5; max-width:340px; margin-bottom:16px; }
.heroBtn { display:inline-block; background:#ee9441; color:#fff; border-radius:4px; padding:13px 28px; font-size:13px;
font-weight:500; letter-spacing:0.8px; text-transform:uppercase; }
.heroImg { flex:1; height:150px; border-radius:8px; background:radial-gradient(circle at 35% 35%,#f4c48b,#ee9441 60%,#a5641a); }
.content { display:flex; gap:24px; padding:24px 32px 0; }
.productCol { flex:1.4; }
.productImg { aspect-ratio:1/1; background:#f6f6f6; border-radius:2px; margin-bottom:12px; position:relative; }
.productImg::after { content:''; position:absolute; left:50%; top:50%; width:130px; height:130px; margin:-65px 0 0 -65px;
border-radius:50%; background:conic-gradient(from 210deg,#ee9441,#f4c48b,#ee9441); }
.pname { font-size:16px; font-weight:500; letter-spacing:0.3px; }
.pprice { font-size:17px; margin-top:4px; }
.panel { flex:1; background:#f6f6f6; border:1px solid #dedede; border-radius:8px; padding:20px; }
.panelLabel { font-size:13px; color:#141414; margin-bottom:10px; font-weight:500; }
.engraveBox { background:#fff; border:1px solid #dedede; border-radius:8px; padding:14px; margin-bottom:14px; text-align:center; }
.engravePreview { font-family:'Spectral',Georgia,serif; font-size:20px; font-weight:300; letter-spacing:3px; color:#545454; }
.charms { display:flex; gap:8px; margin-bottom:16px; }
.charm { width:36px; height:36px; border-radius:50%; background:#e2e2e2; border:1px solid #dedede; }
.charm.sel { border:2px solid #ee9441; background:linear-gradient(150deg,#f4c48b,#ee9441); }
.panelBtn { background:#ee9441; color:#fff; border-radius:4px; padding:12px; text-align:center; font-size:13px;
font-weight:500; letter-spacing:0.8px; text-transform:uppercase; }
</style></head>
<body>
<nav>
<div class="brand">Gldn</div>
<div class="navlinks"><span>Necklaces</span><span>Rings</span><span>Charms</span><span>Made Personal</span></div>
<div class="navcta">Cart<span class="dot"></span></div>
</nav>
<div class="hero">
<div class="heroText">
<div class="headline">Made Personal.</div>
<div class="sub">Engrave it, stack it, make it yours — fine jewelry built around your story.</div>
<div class="heroBtn">Start Personalizing</div>
</div>
<div class="heroImg"></div>
</div>
<div class="content">
<div class="productCol">
<div class="productImg"></div>
<div class="pname">Signature Bar Necklace</div>
<div class="pprice">$128</div>
</div>
<div class="panel">
<div class="panelLabel">Engraving</div>
<div class="engraveBox"><div class="engravePreview">A M A R A</div></div>
<div class="panelLabel">Choose a Charm</div>
<div class="charms">
<div class="charm sel"></div><div class="charm"></div><div class="charm"></div><div class="charm"></div>
</div>
<div class="panelBtn">Add to Cart</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffe600; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #ffe600; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fffbd6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1A1A; box-sizing:border-box;
font-family:'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
* { box-sizing:border-box; }
.top { display:flex; align-items:center; justify-content:space-between; padding:18px 24px 6px; }
.tabs { display:flex; gap:22px; font-size:15px; font-weight:700; }
.tabs span.on { border-bottom:3px solid #FFE600; padding-bottom:6px; }
.fab { width:34px; height:44px; border-radius:12px; background:#FFE600; display:flex; align-items:center; justify-content:center; font-weight:800; color:#1A1A1A; }
.masonry { column-count:4; column-gap:10px; padding:14px 10px; }
.card { break-inside:avoid; margin-bottom:12px; border-radius:14px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04); background:#fff; }
.cimg { position:relative; }
.cimg.h1 { height:150px; background:linear-gradient(150deg,#FCE8EE,#F09BB6); }
.cimg.h2 { height:200px; background:linear-gradient(150deg,#E4F5EC,#6FD49E); }
.cimg.h3 { height:120px; background:linear-gradient(150deg,#E6F0FB,#8FBEE8); }
.cimg.h4 { height:170px; background:linear-gradient(150deg,#FFF6CC,#E6CF66); }
.chip { position:absolute; bottom:8px; left:8px; background:rgba(26,26,26,0.55); color:#fff; font-size:9px; font-weight:600; padding:2px 7px; border-radius:8px; }
.cbody { padding:10px 11px; }
.ctitle { font-size:13px; font-weight:600; line-height:1.3; margin-bottom:6px; font-family:'Poppins',sans-serif; }
.tags { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:8px; }
.tag { font-size:9px; font-weight:700; padding:2px 6px; border-radius:6px; }
.creator { display:flex; align-items:center; gap:6px; }
.cav { width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,#F09BB6,#8FBEE8); }
.cname { font-size:10px; color:#6B6B6B; }
.likes { margin-left:auto; font-size:10px; color:#6B6B6B; }
</style></head>
<body>
<div class="top">
<div class="tabs"><span>Following</span><span class="on">For You</span><span>Nearby</span></div>
<div class="fab">+</div>
</div>
<div class="masonry">
<div class="card"><div class="cimg h2"><span class="chip">Guide</span></div>
<div class="cbody"><div class="ctitle">10 aesthetic desk setups that will fix your 2026</div>
<div class="tags"><span class="tag" style="background:#FFF6CC;color:#8A7300;">Home</span></div>
<div class="creator"><div class="cav"></div><span class="cname">Lemon8 (iOS)</span><span class="likes">♥ 2.4k</span></div></div></div>
<div class="card"><div class="cimg h1"><span class="chip">5 photos</span></div>
<div class="cbody"><div class="ctitle">Get ready with me: soft glam edition</div>
<div class="tags"><span class="tag" style="background:#FCE8EE;color:#C13E68;">Beauty</span></div>
<div class="creator"><div class="cav"></div><span class="cname">rosie.k</span><span class="likes">♥ 891</span></div></div></div>
<div class="card"><div class="cimg h3"></div>
<div class="cbody"><div class="ctitle">Weekend brunch spots you need to try</div>
<div class="tags"><span class="tag" style="background:#E4F5EC;color:#1F8A52;">Food</span></div>
<div class="creator"><div class="cav"></div><span class="cname">min.eats</span><span class="likes">♥ 1.2k</span></div></div></div>
<div class="card"><div class="cimg h4"></div>
<div class="cbody"><div class="ctitle">3 stretches to start your morning right</div>
<div class="tags"><span class="tag" style="background:#E6F0FB;color:#2D6FB8;">Wellness</span><span class="tag" style="background:#F0EAFB;color:#7050B0;">Hobbies</span></div>
<div class="creator"><div class="cav"></div><span class="cname">wellwithava</span><span class="likes">♥ 640</span></div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; letter-spacing: 1.5px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 3.0px; margin: 0; color: #999999; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 2.5px; background: transparent; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 9999px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: transparent; color: #ffffff;
border: 1px solid #404040; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #999999; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 2px; background: transparent; color: #999999;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; position:relative; z-index:3; }
nav span { font-size:12px; letter-spacing:2px; font-family:ui-monospace, "SF Mono", "Cascadia Mono", monospace; color:#cccccc; }
.wordmark { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:14px;
letter-spacing:6px; font-weight:400; }
.hero { position:relative; height:420px; display:flex; align-items:center; justify-content:center; text-align:center;
background:
radial-gradient(70% 60% at 50% 35%, rgba(255,255,255,0.05), transparent 65%),
linear-gradient(100deg,#050505 0%,#151515 45%,#050505 100%);
overflow:hidden; }
.hero::before { content:''; position:absolute; left:8%; right:8%; bottom:6%; height:60%;
background:linear-gradient(180deg, transparent, rgba(255,255,255,0.03) 40%, rgba(255,255,255,0.07) 100%);
border-radius:50% / 18%; }
.heroinner { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:16px; }
.heroinner h1 { font-size:52px; font-weight:400; letter-spacing:4px; text-transform:uppercase; margin:0; line-height:1.15; }
.heroinner .cap { font-family:ui-monospace, "SF Mono", "Cascadia Mono", monospace; font-size:11px; letter-spacing:2px;
text-transform:uppercase; color:#999999; }
.heroinner .btn { border:1px solid #fff; border-radius:999px; padding:13px 30px; font-size:13px;
font-family:ui-monospace, "SF Mono", "Cascadia Mono", monospace; letter-spacing:2px; text-transform:uppercase; margin-top:6px; }
.career { position:absolute; right:36px; top:96px; width:210px; background:#141414; padding:16px; z-index:3; }
.career .thumb { height:60px; background:linear-gradient(120deg,#2a2a2a,#0d0d0d); margin-bottom:10px; }
.career p { font-family:Garamond,"Times New Roman",serif; font-size:13px; line-height:1.4; margin:0 0 8px; color:#e6e6e6; }
.career .lnk { font-family:ui-monospace,"SF Mono",monospace; font-size:10px; letter-spacing:2px; color:#999; text-transform:uppercase; }
footer { height:164px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
footer p { font-family:Garamond,"Times New Roman",serif; font-size:15px; color:#cccccc; max-width:560px; text-align:center; line-height:1.5; margin:0; }
footer .fw { font-size:12px; letter-spacing:6px; margin-top:4px; color:#666; }
</style></head>
<body>
<nav><span>MENU</span><div class="wordmark">Bugatti</div><span>STORE</span></nav>
<div class="hero">
<div class="heroinner">
<div class="cap">HONORING VISIONARY ENGINEERING</div>
<h1>TOURBILLON</h1>
<div class="btn">DISCOVER</div>
</div>
<div class="career">
<div class="thumb"></div>
<p>Are you ready for a new adventure?</p>
<div class="lnk">EXPLORE OUR OPPORTUNITIES</div>
</div>
</div>
<footer>
<p>Form follows perfection. Every line, every surface, considered — nothing added, nothing spared.</p>
<div class="fw">Bugatti</div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #356dff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #356dff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9fb8fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00142d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #356dff; color: #00142d;
border: 1px solid #00142d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #356dff; color: #f5f5f5;
border: 1px solid #5483fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9fb8fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2d5fdd; color: #00142d;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#00142d; color:#ffffff; box-sizing:border-box;
font-family:"Noto Sans TC",-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:700; margin:0; color:#00142d; }
.navlinks { display:flex; gap:20px; font-size:16px; color:#00142d; }
.navcta { background:#000000; color:#ffffff; border-radius:30px; height:38px; padding:0 24px; font-size:14px; font-weight:700; display:flex; align-items:center; }
.hero { padding:44px 40px; text-align:center; }
.hero h1 { font-size:48px; font-weight:700; line-height:1.33; margin:0 0 20px; }
.row { display:flex; gap:14px; justify-content:center; }
.pillblue { background:#356dff; color:#ffffff; border-radius:30px; height:45px; padding:0 24px; font-size:18px; font-weight:700; display:flex; align-items:center; }
.pillout { background:#ffffff; color:#356dff; border:1px solid #356dff; border-radius:30px; height:45px; padding:0 24px; font-size:18px; font-weight:700; display:flex; align-items:center; }
.wash { background:#edf4fd; color:#00142d; padding:26px 40px; margin-top:10px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#ffffff; border-radius:8px; padding:16px; box-shadow:0 8px 16px rgba(0,0,0,0.08); }
.card h3 { font-size:15px; font-weight:700; margin:0 0 6px; }
.card p { font-size:12px; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">SHOPLINE</p>
<div class="navlinks"><span>Features</span><span>Pricing</span><span>Case Studies</span></div>
<span class="navcta">Free Trial</span>
</nav>
<section class="hero">
<h1>All-in-one retail integration expert</h1>
<div class="row"><span class="pillblue">14-Day Free Trial</span><span class="pillout">See All Plans</span></div>
</section>
<div class="wash">
<div class="cards">
<div class="card"><h3>Store Builder</h3><p>Complete store-opening features to keep your business growing.</p></div>
<div class="card"><h3>Payments</h3><p>Local and international payment methods, connected.</p></div>
<div class="card"><h3>Omni-Channel</h3><p>Online and offline inventory, synced in real time.</p></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a0a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a0a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8b8b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00ff7b; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a0a; color: #00ff7b;
border: 1px solid #00ff7b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0a0a; color: #f5f5f5;
border: 1px solid #303030; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b8b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #08311c; color: #00ff7b;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A0A0A; color:#F5F5F7; box-sizing:border-box;
font-family:'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
.tnum { font-variant-numeric: tabular-nums; }
.wrap { width:100%; height:100%; padding:24px 28px; display:flex; flex-direction:column; gap:14px; }
/* header */
.hdr { height:38px; display:flex; align-items:center; justify-content:space-between; }
.brand { font-size:20px; font-weight:800; letter-spacing:-0.4px; color:#FFFFFF; margin:0; }
.hdr-right { display:flex; align-items:center; gap:10px; }
.sync-pill { height:26px; background:#2A2A2A; border-radius:13px; padding:0 12px; display:flex; align-items:center;
gap:6px; font-size:10px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:#A1A1AA; }
.sync-pill b { color:#00FF7B; font-weight:700; }
.bell { width:20px; height:20px; border-radius:50%; border:1.5px solid #3A3A3A; }
/* day switcher */
.days { height:40px; display:flex; align-items:center; gap:8px; }
.day { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:700; color:#A1A1AA; border:1px solid #2A2A2A; }
.day span.dow { display:block; font-size:8px; letter-spacing:0.4px; opacity:0.7; }
.day.today { background:#00FF7B; color:#0A0A0A; border-color:#00FF7B; box-shadow:0 0 12px rgba(0,255,123,0.35); }
/* main row */
.main { display:flex; gap:18px; flex:1; min-height:0; }
.card { background:#1C1C1E; border:1px solid #252525; border-radius:12px; }
/* recovery card */
.recovery { width:308px; padding:20px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.recovery .lbl { font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:#A1A1AA; }
.ringwrap { position:relative; width:168px; height:168px; }
.ringnum { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ringnum b { font-size:52px; font-weight:800; letter-spacing:-1.4px; color:#FFFFFF; line-height:1; }
.ringnum small { font-size:16px; font-weight:700; color:#FFFFFF; }
.metrics { width:100%; display:flex; justify-content:space-between; margin-top:4px; }
.metric { display:flex; flex-direction:column; align-items:center; gap:4px; }
.metric .v { font-size:15px; font-weight:700; color:#FFFFFF; }
.metric .l { font-size:9px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#5F5F65; }
/* right column */
.rcol { flex:1; display:flex; flex-direction:column; gap:16px; min-width:0; }
.strain { padding:18px 20px; display:flex; flex-direction:column; gap:10px; }
.row-between { display:flex; justify-content:space-between; align-items:baseline; }
.strain .lbl { font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:#A1A1AA; }
.strain .val { font-size:30px; font-weight:800; letter-spacing:-0.8px; color:#00FF7B; }
.bar-track { position:relative; height:12px; border-radius:6px; background:#2A2A2A; margin-top:2px; }
.bar-fill { position:absolute; left:0; top:0; bottom:0; width:73%; border-radius:6px;
background:linear-gradient(90deg,#005F2F,#00FF7B 70%,#67E26B); }
.bar-marker { position:absolute; top:-2px; left:calc(73% - 8px); width:16px; height:16px; border-radius:50%;
background:#FFFFFF; border:2px solid #0A0A0A; box-shadow:0 0 8px rgba(255,255,255,0.5); }
.ticks { display:flex; justify-content:space-between; margin-top:2px; }
.ticks span { font-size:9px; font-weight:600; letter-spacing:0.4px; text-transform:uppercase; color:#5F5F65; }
.hr-card { flex:1; padding:16px 20px; display:flex; flex-direction:column; gap:8px; min-height:0; }
.hr-top { display:flex; align-items:center; gap:10px; }
.hr-top b { font-size:32px; font-weight:800; color:#FFFFFF; }
.hr-top .u { font-size:12px; color:#A1A1AA; font-weight:600; }
.hr-pills { display:flex; gap:8px; margin-top:auto; }
.hr-pill { background:#2A2A2A; border-radius:14px; padding:4px 10px; font-size:9px; font-weight:700;
letter-spacing:0.4px; text-transform:uppercase; color:#A1A1AA; }
.hr-pill b { color:#F5F5F7; }
/* activity list */
.activity { height:96px; display:flex; flex-direction:column; }
.arow { height:48px; display:flex; align-items:center; border-bottom:1px solid #252525; }
.arow:last-child { border-bottom:none; }
.aicon { width:34px; height:34px; border-radius:50%; border:1.5px solid #00FF7B; display:flex; align-items:center;
justify-content:center; flex-shrink:0; }
.abody { margin-left:12px; flex:1; min-width:0; }
.aname { font-size:13px; font-weight:600; color:#F5F5F7; }
.astrain { font-size:15px; font-weight:800; color:#00FF7B; }
.aright { text-align:right; flex-shrink:0; }
.adur { font-size:12px; font-weight:600; color:#F5F5F7; }
.atime { font-size:10px; color:#A1A1AA; }
</style></head>
<body>
<div class="wrap">
<div class="hdr">
<p class="brand">WHOOP (iOS)</p>
<div class="hdr-right">
<div class="sync-pill">BATT <b>82%</b> · SYNCED 6M AGO</div>
<div class="bell"></div>
</div>
</div>
<div class="days">
<div class="day"><span class="dow">M</span>12</div>
<div class="day"><span class="dow">T</span>13</div>
<div class="day"><span class="dow">W</span>14</div>
<div class="day"><span class="dow">T</span>15</div>
<div class="day"><span class="dow">F</span>16</div>
<div class="day"><span class="dow">S</span>17</div>
<div class="day today"><span class="dow" style="color:#0A0A0A">S</span>18</div>
</div>
<div class="main">
<div class="card recovery">
<span class="lbl">Recovery</span>
<div class="ringwrap">
<svg width="168" height="168" viewBox="0 0 168 168">
<circle cx="84" cy="84" r="74" fill="none" stroke="#2A2A2A" stroke-width="10"/>
<circle cx="84" cy="84" r="74" fill="none" stroke="#16EC06" stroke-width="10" stroke-linecap="round"
stroke-dasharray="339 465" stroke-dashoffset="0" transform="rotate(-90 84 84)"/>
</svg>
<div class="ringnum tnum"><b>73<small>%</small></b></div>
</div>
<div class="metrics">
<div class="metric"><span class="v tnum">57 ms</span><span class="l">HRV</span></div>
<div class="metric"><span class="v tnum">52 bpm</span><span class="l">RHR</span></div>
<div class="metric"><span class="v tnum">98%</span><span class="l">SpO₂</span></div>
<div class="metric"><span class="v tnum">88.1°</span><span class="l">Skin</span></div>
</div>
</div>
<div class="rcol">
<div class="card strain">
<div class="row-between">
<span class="lbl">Strain</span>
<span class="val tnum">13.2</span>
</div>
<div class="bar-track"><div class="bar-fill"></div><div class="bar-marker"></div></div>
<div class="ticks"><span>8 Low</span><span>10 Mod</span><span>14 High</span><span>18 All-Out</span></div>
</div>
<div class="card hr-card">
<span class="lbl" style="font-size:11px;">Heart Rate</span>
<svg width="100%" height="46" viewBox="0 0 520 46" preserveAspectRatio="none">
<polyline points="0,28 40,26 70,30 100,10 120,38 150,24 180,27 220,12 250,34 290,26 330,29 360,9 400,36 440,25 470,28 520,24"
fill="none" stroke="#00FF7B" stroke-width="2"/>
</svg>
<div class="hr-top"><b class="tnum">61</b><span class="u">BPM · LIVE</span></div>
<div class="hr-pills">
<div class="hr-pill">MIN <b class="tnum">54</b></div>
<div class="hr-pill">AVG <b class="tnum">63</b></div>
<div class="hr-pill">MAX <b class="tnum">142</b></div>
</div>
</div>
</div>
</div>
<div class="card activity">
<div class="arow" style="padding:0 16px;">
<div class="aicon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#00FF7B" stroke-width="2"><path d="M13 4l-4 8h5l-4 8"/></svg>
</div>
<div class="abody"><div class="aname">Running</div><div class="astrain tnum">11.8</div></div>
<div class="aright"><div class="adur tnum">1h 32m</div><div class="atime tnum">6:42 AM</div></div>
</div>
<div class="arow" style="padding:0 16px;">
<div class="aicon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#00FF7B" stroke-width="2"><circle cx="12" cy="12" r="8"/></svg>
</div>
<div class="abody"><div class="aname">Strength</div><div class="astrain tnum">7.4</div></div>
<div class="aright"><div class="adur tnum">48m</div><div class="atime tnum">6:10 PM</div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #040404; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #040404; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.0; letter-spacing: 0.5px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #f94877; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #040404; color: #fbfbfb;
border: 1px solid #f94877; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #040404; color: #fbfbfb;
border: 1px solid #070707; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f94877; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#040404;color:#eeeeee;font-family:Arial,'Helvetica Neue',sans-serif;}
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid #272727;}
.logo{font-family:'League Gothic','Arial Narrow',sans-serif;font-size:28px;letter-spacing:1px;color:#fbfbfb;}
.logo span{color:#f94877;}
.navlinks{display:flex;gap:20px;font-size:11px;font-weight:700;color:#aaaaaa;text-transform:uppercase;}
.strip{background:#111111;padding:6px 26px;font-size:10px;color:#777;border-bottom:1px solid #1e1e1e;}
.hero{display:flex;padding:22px 26px;gap:26px;align-items:center;}
.hero-txt{width:360px;}
.hero-txt h1{font-family:'League Gothic','Arial Narrow',sans-serif;font-size:42px;letter-spacing:.5px;color:#fff;margin:0 0 10px;line-height:1;}
.hero-txt p{font-size:12px;color:#aaaaaa;margin:0 0 16px;}
.cta{background:#f94877;color:#fff;padding:10px 22px;font-size:11px;font-weight:700;text-transform:uppercase;display:inline-block;}
.crate{flex:1;height:190px;background:#111111;border:1px solid #272727;display:flex;align-items:flex-end;justify-content:center;gap:6px;padding:14px;}
.sleeve{width:60px;height:150px;border-radius:2px;position:relative;}
.s1{background:linear-gradient(160deg,#f94877,#c22150);height:170px;}
.s2{background:linear-gradient(160deg,#222222,#111111);}
.s3{background:linear-gradient(160deg,#3b5998,#26426e);height:150px;}
.s4{background:linear-gradient(160deg,#cc2127,#8f1418);height:160px;}
.sale{position:absolute;top:6px;right:6px;background:#f94877;color:#fff;font-size:8px;font-weight:800;padding:2px 5px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px 26px;}
.card{background:#111111;border-radius:2px;padding:10px;border:1px solid #1e1e1e;}
.box{height:82px;border-radius:2px;margin-bottom:8px;}
.b1{background:linear-gradient(160deg,#f94877,#a02147);}
.b2{background:linear-gradient(160deg,#222222,#000);}
.b3{background:linear-gradient(160deg,#333333,#111);}
.b4{background:linear-gradient(160deg,#4a4a4a,#222);}
.genre{display:inline-block;background:transparent;border:1px solid #444;color:#aaa;font-size:8px;padding:2px 6px;margin-bottom:5px;border-radius:0;}
.name{font-family:'League Gothic','Arial Narrow',sans-serif;font-size:16px;letter-spacing:.3px;color:#fbfbfb;margin:2px 0;}
.price{font-size:12px;font-weight:700;color:#f94877;}
</style>
<div class="nav">
<div class="logo">Generation Records<span>.</span></div>
<div class="navlinks"><span>Vinyl</span><span>Cassettes</span><span>CDs</span><span>Merch</span><span>Sell Your Collection</span></div>
</div>
<div class="strip">NYC record shop since 1994 · Punk / Hardcore / Ska / Indie · In-store & online</div>
<div class="hero">
<div class="hero-txt">
<h1>DIG THROUGH THE BINS</h1>
<p>Punk, hardcore, and everything you can't stream. New pressings and used crates, curated by hand.</p>
<a class="cta">Shop New Arrivals</a>
</div>
<div class="crate">
<div class="sleeve s1"><span class="sale">SALE</span></div><div class="sleeve s2"></div><div class="sleeve s3"></div><div class="sleeve s4"></div>
</div>
</div>
<div class="grid">
<div class="card"><div class="box b1"></div><span class="genre">PUNK</span><div class="name">Dead Kennedys — Fresh Fruit LP</div><div class="price">$26.00</div></div>
<div class="card"><div class="box b2"></div><span class="genre">HARDCORE</span><div class="name">Minor Threat — Complete Discography</div><div class="price">$22.00</div></div>
<div class="card"><div class="box b3"></div><span class="genre">SKA</span><div class="name">Operation Ivy — Energy LP</div><div class="price">$24.00</div></div>
<div class="card"><div class="box b4"></div><span class="genre">INDIE</span><div class="name">Various — Generation Records Comp</div><div class="price">$18.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.33; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.5px; background: #0675c4; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.5px; background: #ffffff; color: #0675c4;
border: 1px solid #0675c4; border-radius: 4px;
padding: 10px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1e1e1e;
border: 1px solid #dcddde; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.2px; background: #4ab866; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Roboto,-apple-system,'Segoe UI',Arial,sans-serif; color:#1e1e1e; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dcddde;}
.logo{font-size:18px;font-weight:700;color:#0675c4;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#2f2f2f;border-bottom:2px solid transparent;}
.navlinks .on{border-bottom:2px solid #0675c4;color:#0675c4;padding-bottom:18px;}
.hero{height:230px;display:flex;background:#f0f0f0;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;}
.herotext .kick{font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#949494;margin-bottom:10px;}
.herotext h1{font-size:28px;font-weight:700;color:#1e1e1e;margin:0 0 12px;line-height:1.3;}
.herotext p{font-size:14px;color:#2f2f2f;margin:0 0 18px;max-width:300px;}
.btn{display:inline-block;background:#0675c4;color:#fff;font-size:14px;font-weight:600;padding:13px 26px;border-radius:4px;width:fit-content;}
.heroimg{width:54%;position:relative;background:#313131;}
.heroimg .hmi{position:absolute;left:60px;top:40px;width:180px;height:130px;background:#1e1e1e;border:2px solid #0675c4;border-radius:4px;}
.heroimg .hmi:before{content:'';position:absolute;left:14px;top:14px;width:60px;height:8px;background:#4ab866;}
.heroimg .hmi:after{content:'';position:absolute;left:14px;top:30px;width:100px;height:8px;background:#0675c4;}
.spectable{display:flex;gap:1px;background:#dcddde;margin:0 40px;}
.speccell{flex:1;background:#f0f0f0;text-align:center;padding:9px;}
.speclabel{font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#949494;}
.specvalue{font-size:14px;font-weight:600;color:#1e1e1e;margin-top:2px;}
.sec{padding:20px 40px 0;}
.sectitle{font-size:18px;font-weight:700;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:212px;border:1px solid #dcddde;border-radius:4px;padding:10px;}
.thumb{height:100px;border-radius:4px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;}
.pprice{font-size:14px;font-weight:600;color:#0675c4;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Maple Systems</div>
<div class="navlinks"><div class="on">HMI Panels</div><div>PLC I/O</div><div>Software</div><div>Support</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kick">Industrial Control</div>
<h1>Data first. Decoration never.</h1>
<p>Rugged HMI panels and PLC I/O modules engineered for the plant floor.</p>
<div class="btn">View Panels</div>
</div>
<div class="heroimg"><div class="hmi"></div></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Display</div><div class="specvalue">10.1" TFT</div></div>
<div class="speccell"><div class="speclabel">I/O Points</div><div class="specvalue">32 DI/DO</div></div>
<div class="speccell"><div class="speclabel">Protocol</div><div class="specvalue">Modbus TCP</div></div>
<div class="speccell"><div class="speclabel">Rating</div><div class="specvalue">IP65</div></div>
</div>
<div class="sec">
<div class="sectitle">HMI Panels</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0675c4,#f0f0f0);"></div><div class="pname">EZWarePlus HMI-10</div><div class="pprice">$1,249.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#313131,#f0f0f0);"></div><div class="pname">PLC I/O Expansion Module</div><div class="pprice">$389.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4ab866,#f0f0f0);"></div><div class="pname">Remote I/O Gateway</div><div class="pprice">$599.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.38; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #6b53cc; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #6b53cc;
border: 1px solid #6b53cc; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #6b53cc; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:'Poppins', 'Roboto', -apple-system, system-ui, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; border-bottom:1px solid #e5e0df; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:20px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:26px; font-size:14px; font-weight:500; }
.navlinks span:first-child { color:#6b53cc; border-bottom:3px solid #6b53cc; padding-bottom:20px; border-radius:9999px 9999px 0 0; }
.search { width:150px; height:34px; background:#f2f2f2; border-radius:9999px; font-size:12px; color:#9e9e9e;
display:flex; align-items:center; padding-left:16px; }
.hero { background:#222222; padding:28px 40px; display:flex; align-items:center; gap:32px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:linear-gradient(to right, rgba(107,83,204,0.35), transparent 65%); }
.hero-copy { flex:1.2; position:relative; z-index:1; }
.hero h1 { color:#fff; font-size:32px; font-weight:700; line-height:1.15; letter-spacing:-0.4px; margin:0 0 10px; max-width:420px; }
.hero p { color:#d8d3f2; font-size:14px; margin:0 0 16px; max-width:380px; line-height:1.5; }
.row { display:flex; gap:10px; }
.btn-primary { background:#6b53cc; color:#fff; border:none; border-radius:8px; padding:14px 26px; font-size:14px; font-weight:600; height:48px; }
.btn-accent { background:#e94b20; color:#fff; border:none; border-radius:8px; padding:14px 26px; font-size:14px; font-weight:600; height:48px; }
.hero-visual { flex:1; height:150px; border-radius:12px; position:relative; z-index:1; overflow:hidden;
background:linear-gradient(135deg,#492582,#b27aff); }
.hero-visual::before { content:''; position:absolute; width:80px; height:100px; border-radius:6px; background:#1a1a1a; left:36px; top:16px; }
.section { padding:18px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-size:20px; font-weight:600; margin:0; }
.sec-head span { font-size:13px; color:#6b53cc; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#fff; border-radius:8px; padding:14px; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.thumb { aspect-ratio:4/3; background:#f2f2f2; border-radius:4px; position:relative; margin-bottom:10px; }
.t1::after { content:''; position:absolute; inset:20%; background:linear-gradient(150deg,#6b53cc,#492582); border-radius:4px; }
.t2::after { content:''; position:absolute; inset:20%; background:linear-gradient(150deg,#cdb889,#e7d7b5); border-radius:4px; }
.t3::after { content:''; position:absolute; inset:20%; background:linear-gradient(150deg,#e94b20,#ba3c1a); border-radius:4px; }
.badge { position:absolute; top:6px; left:6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px;
padding:4px 10px; border-radius:4px; color:#fff; z-index:2; }
.badge.p { background:#6b53cc; }
.badge.g { background:#cdb889; color:#222; }
.chip { display:inline-block; background:#e6e6f2; color:#492582; font-size:11px; padding:4px 10px; border-radius:9999px; margin-bottom:6px; }
.card h3 { font-size:15px; font-weight:600; margin:0 0 4px; }
.price { font-size:20px; font-weight:700; margin:0; }
footer { background:#222222; color:#9e9e9e; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#9e9e9e; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Benq</p>
<div class="navlinks"><span>Monitors</span><span>Projectors</span><span>ScreenBar</span><span>Speakers</span></div>
<div class="search">Search…</div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Color that means something</h1>
<p>Pantone Validated monitors and studio-grade lighting, built for creators who see the difference.</p>
<div class="row"><button class="btn-primary">Shop Monitors</button><button class="btn-accent">Buy Now</button></div>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2>Featured Products</h2><span>View all →</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge p">HDRi</span></div>
<div class="chip">Delta E<2</div>
<h3>PD2725U Designer Monitor</h3>
<p class="price">$899</p>
</div>
<div class="card">
<div class="thumb t2"><span class="badge g">Premium</span></div>
<div class="chip">Eye-Care</div>
<h3>ScreenBar Halo</h3>
<p class="price">$129</p>
</div>
<div class="card">
<div class="thumb t3"></div>
<div class="chip">4K HDR</div>
<h3>TK700STi Projector</h3>
<p class="price">$1,299</p>
</div>
</div>
</section>
<footer>
<span>© Benq</span>
<div><a href="#">Support</a><a href="#">Warranty</a><a href="#">Company</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f5f2; color: #110c0d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f5f2; color: #110c0d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #110c0d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #173482; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #e6c9c1; color: #110c0d;
border: 1px solid #173482; border-radius: 8px;
padding: 14px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9f5f2; color: #110c0d;
border: 1px solid #bfbbb9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c1996c; color: #110c0d;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f5f2; font-family:'Assistant',Geneva,sans-serif; color:#2c3e50; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e5e5eb;}
.logo{font-family:'Matter',Georgia,serif;font-size:22px;font-weight:500;color:#110c0d;}
.navlinks{display:flex;gap:20px;font-size:15px;font-weight:600;color:#2c3e50;}
.navlinks .active{color:#173482;border-bottom:2px solid #173482;padding-bottom:6px;}
.hero{height:200px;background:#e6c9c1;display:flex;align-items:center;padding:0 34px;}
.herotext{max-width:420px;}
.script{font-family:'Brush Script MT',cursive;font-size:26px;color:#173482;margin-bottom:6px;}
.herotext h1{font-family:'Matter',Georgia,serif;font-size:28px;font-weight:500;color:#110c0d;margin:0 0 10px;line-height:1.2;}
.herocta{display:inline-block;background:#173482;color:#fff;font-size:16px;font-weight:600;padding:12px 26px;border-radius:8px;}
.grid{display:flex;gap:14px;padding:20px 34px 0;}
.card{width:216px;background:#fff;border-radius:8px;overflow:hidden;position:relative;}
.thumb{height:110px;border-radius:8px 8px 0 0;}
.badge{position:absolute;top:8px;left:8px;background:#c1996c;color:#110c0d;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 10px;border-radius:9999px;}
.pbody{padding:10px 14px 14px;}
.ptitle{font-size:15px;font-weight:600;color:#110c0d;}
.pprice{font-size:14px;color:#2c3e50;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Nestig</div>
<div class="navlinks"><div class="active">Nursery</div><div>Cribs</div><div>Bedding</div><div>Registry</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="script">a room you want to sit in</div>
<h1>Heirloom-Solid.<br>Tender in Every Detail.</h1>
<div class="herocta">Shop the Nursery</div>
</div>
</div>
<div class="grid">
<div class="card"><span class="badge">Best Seller</span><div class="thumb" style="background:linear-gradient(160deg,#173482,#8fbed4)"></div><div class="pbody"><div class="ptitle">Wave Convertible Crib</div><div class="pprice">$895</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e6c9c1,#c1996c)"></div><div class="pbody"><div class="ptitle">Clay Nursery Glider</div><div class="pprice">$1,295</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#bf7f4c,#e2c4c9)"></div><div class="pbody"><div class="ptitle">Organic Cotton Crib Sheet</div><div class="pprice">$45</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#c2e6fa,#173482)"></div><div class="pbody"><div class="ptitle">Sky Blue Storage Basket</div><div class="pprice">$68</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #171717;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #171717;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.2; margin: 0; color: #171717; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background: #3ecf8e; color: #171717;
border: none; border-radius: 6px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; background: #ffffff; color: #171717;
border: 1px solid #3ecf8e; border-radius: 6px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #171717;
border: 1px solid #c5c5c5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.45; background: #3ecf8e; color: #171717;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#171717; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #dfdfdf; }
.brand { font-weight:500; font-size:15px; }
.brand .dot { color:#3ecf8e; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#171717; }
.btngreen { background:#3ecf8e; color:#171717; border:none; border-radius:6px; padding:8px 16px; font-size:13px; font-weight:500; }
.hero { padding:34px 32px 20px; text-align:center; }
.hero h1 { font-size:44px; font-weight:500; letter-spacing:-1.3px; line-height:1.1; margin:0 0 12px; }
.hero p { font-size:14px; color:#707070; margin:0 0 16px; }
.heroctas { display:flex; gap:10px; justify-content:center; }
.btnoutline { background:#fff; color:#171717; border:1px solid #c7c7c7; border-radius:6px; padding:8px 16px; font-size:13px; font-weight:500; }
.mockwrap { display:grid; grid-template-columns:1.2fr 1fr; gap:14px; padding:8px 32px 20px; }
.panel { background:#1c1c1c; border-radius:12px; padding:14px; box-shadow:0 8px 24px rgba(0,0,0,.08); }
.panel .tabs { display:flex; gap:8px; margin-bottom:8px; }
.panel .tab { font-size:9.5px; color:#9a9a9a; padding:3px 8px; border-radius:4px; }
.panel .tab.active { background:#202020; color:#fff; }
pre { color:#e0e0e0; font-size:11px; line-height:1.5; margin:0; }
.tok { color:#3ecf8e; }
.table { background:#1c1c1c; border-radius:12px; padding:12px; box-shadow:0 8px 24px rgba(0,0,0,.08); }
.trow { display:flex; justify-content:space-between; font-size:10.5px; color:#e0e0e0; padding:5px 0;
border-bottom:1px solid #2a2a2a; }
.trow:last-child { border-bottom:none; }
.trow .idc { color:#3ecf8e; }
.featgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:0 32px 18px; }
.fcard { border:1px solid #dfdfdf; border-radius:12px; padding:14px; }
.fcard h3 { font-size:14px; margin:0 0 4px; }
.fcard p { font-size:11px; color:#707070; margin:0; }
footer { display:flex; justify-content:space-between; padding:12px 32px; font-size:11px; color:#707070;
border-top:1px solid #dfdfdf; }
</style></head>
<body>
<nav>
<div class="brand">Supabase</div>
<div class="navlinks"><span>Product</span><span>Developers</span><span>Pricing</span></div>
<button class="btngreen">Start your project</button>
</nav>
<section class="hero">
<h1>Build in a weekend<br>Scale to millions</h1>
<p>The Postgres development platform. Open source alternative to Firebase.</p>
<div class="heroctas">
<button class="btngreen">Start your project</button>
<button class="btnoutline">Documentation</button>
</div>
</section>
<div class="mockwrap">
<div class="panel mono">
<div class="tabs"><span class="tab active">SQL Editor</span><span class="tab">Table</span></div>
<pre><span class="tok">select</span> * <span class="tok">from</span> users
<span class="tok">where</span> active = true
<span class="tok">order by</span> created_at <span class="tok">desc</span>;</pre>
</div>
<div class="table mono">
<div class="trow"><span class="idc">id</span><span>name</span><span>role</span></div>
<div class="trow"><span>1</span><span>ada</span><span>admin</span></div>
<div class="trow"><span>2</span><span>grace</span><span>editor</span></div>
<div class="trow"><span>3</span><span>alan</span><span>viewer</span></div>
</div>
</div>
<div class="featgrid">
<div class="fcard"><h3>Database</h3><p>Every project is a full Postgres database.</p></div>
<div class="fcard"><h3>Auth</h3><p>Add user sign ups and logins in minutes.</p></div>
<div class="fcard"><h3>Storage</h3><p>Store and serve large files, images, videos.</p></div>
</div>
<footer>
<span>© Supabase</span>
<span>Supabase · Docs · GitHub · Pricing</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #e11f26; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #121212;
border: 1px solid #e11f26; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #e11f26; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #dedede; }
.brand { font-size:16px; font-weight:700; letter-spacing:0.02em; text-transform:uppercase; }
.utils { display:flex; gap:22px; align-items:center; font-size:12px; color:#2a2a2a; }
.cart-dot { position:relative; }
.cart-dot::after { content:'2'; position:absolute; top:-7px; right:-9px; background:#e11f26; color:#fff;
font-size:9px; font-weight:700; width:14px; height:14px; border-radius:9999px; display:flex;
align-items:center; justify-content:center; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#e8e8e8; height:calc(640px - 64px); }
.card { background:#ffffff; padding:28px; display:flex; flex-direction:column; gap:10px; }
.shot { flex:1; background:#f5f5f5; border-radius:4px; position:relative; }
.shot .lens { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:150px; height:60px;
border-radius:9999px; border:6px solid #121212; }
.name { font-size:13.5px; font-weight:700; }
.spec { font-size:11px; color:#6b6b6b; letter-spacing:0.02em; }
.price-row { display:flex; align-items:center; justify-content:space-between; }
.price { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.btn-primary { background:#e11f26; color:#ffffff; border:none; border-radius:9999px; padding:9px 20px;
font-size:12px; font-weight:700; }
</style></head>
<body>
<div class="topbar">
<div class="brand">District Vision</div>
<div class="utils"><span>Search</span><span>Account</span><span class="cart-dot">Cart</span></div>
</div>
<div class="row">
<div class="card">
<div class="shot"><div class="lens"></div></div>
<div class="name">Junya Running Sunglasses</div>
<div class="spec">Polarized · UV400 · 22g</div>
<div class="price-row"><span class="price">$225.00</span><button class="btn-primary">Add to Cart</button></div>
</div>
<div class="card">
<div class="shot"><div class="lens"></div></div>
<div class="name">Nagata Speed Blade</div>
<div class="spec">Photochromic · UV400 · 19g</div>
<div class="price-row"><span class="price">$255.00</span><button class="btn-primary">Add to Cart</button></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 500; line-height: 1.3; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #a3a3a3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; letter-spacing: 0.02em; background: #000000; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; letter-spacing: 0.02em; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a3a3a3; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dbdbdb; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'Helvetica Neue',Arial,sans-serif; color:#000; }
*{box-sizing:border-box;}
.nav{height:56px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d4d4d4;}
.logo{font-size:15px;letter-spacing:.02em;}
.locs{display:flex;gap:24px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;}
.locs span{color:#a3a3a3;padding-bottom:14px;}
.locs span.active{color:#000;border-bottom:1px solid #ff901b;}
.hero{height:210px;background:#000;position:relative;display:flex;align-items:flex-end;padding:0 32px 20px;}
.hkicker{position:absolute;top:24px;left:32px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#a3a3a3;}
.h1{font-size:56px;color:#fff;margin:0;letter-spacing:-.01em;line-height:1;}
.artgrid{display:flex;gap:1px;background:#d4d4d4;padding:0;margin-top:0;}
.artcard{flex:1;background:#fff;padding:0;}
.artimg{height:100px;background:#f7f7f7;}
.artcap{padding:8px 10px;}
.artist{font-size:14px;}
.title{font-size:14px;font-style:italic;}
.detail{font-size:12px;color:#a3a3a3;}
.catalog{font-family:monospace;font-size:11px;color:#a3a3a3;letter-spacing:.04em;}
.section2{display:flex;gap:32px;padding:20px 32px 0;}
.pressCol{width:56%;}
.pressLead{font-size:20px;line-height:1.3;margin:0 0 8px;}
.pressDate{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#a3a3a3;}
.inquiryCol{width:44%;background:#f7f7f7;padding:16px;}
.inqLabel{font-size:12px;color:#a3a3a3;margin-bottom:8px;}
.inqField{border-bottom:1px solid #d4d4d4;padding:5px 0;font-size:14px;color:#a3a3a3;margin-bottom:6px;}
.inqBtn{background:#000;color:#fff;font-size:14px;padding:11px 20px;display:inline-block;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#000;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Massimo DE Carlo</div>
<div class="locs"><span class="active">Milan</span><span>London</span><span>Hong Kong</span><span>Brussels</span></div>
</div>
<div class="hero">
<div class="hkicker">27 May – 12 Jul</div>
<div class="h1">Vessels of Silence</div>
</div>
<div class="artgrid">
<div class="artcard"><div class="artimg"></div><div class="artcap"><div class="artist">Studio A. Renner</div><div class="title">Untitled (Vessel)</div><div class="detail">Bronze, 44 × 22 × 22 cm</div><div class="catalog">MDC-2026-014</div></div></div>
<div class="artcard"><div class="artimg"></div><div class="artcap"><div class="artist">Studio A. Renner</div><div class="title">Silence No. 3</div><div class="detail">Oil on linen, 180 × 140 cm</div><div class="catalog">MDC-2026-015</div></div></div>
<div class="artcard"><div class="artimg"></div><div class="artcap"><div class="artist">Studio A. Renner</div><div class="title">Fracture Study</div><div class="detail">Marble, 60 × 30 × 30 cm</div><div class="catalog">MDC-2026-016</div></div></div>
</div>
<div class="section2">
<div class="pressCol">
<div class="pressLead">The exhibition traces a decade of the artist's return to the vessel as form.</div>
<div class="pressDate">Press Release</div>
</div>
<div class="inquiryCol">
<div class="inqLabel">Inquire</div>
<div class="inqField">Full name</div>
<div class="inqField">Email address</div>
<div class="inqBtn">Send Inquiry</div>
</div>
</div>
<div class="footer"><span>Milan · London · Hong Kong · Brussels</span><span>Contact · Press · Editions</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #584de4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #584de4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #aea9ed; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4d55b2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #584de4; color: #ffffff;
border: 1px solid #4d55b2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #584de4; color: #f5f5f5;
border: 1px solid #7168e7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aea9ed; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #564edc; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9f9f9; color:#333333; box-sizing:border-box;
font-family:"Pretendard","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.layout { display:flex; height:640px; }
.panel { width:360px; background:#ffffff; display:flex; flex-direction:column; }
.panel-head { padding:16px; }
.logo { font-size:18px; font-weight:700; color:#584de4; margin-bottom:10px; }
.search { border:1px solid #cecfdc; border-radius:6px; height:44px; display:flex; align-items:center;
padding:0 14px; font-size:14px; color:#b3b3b3; }
.chips { display:flex; gap:8px; padding:12px 16px; }
.chip { border:1px solid #f3f3f3; border-radius:8px; height:30px; padding:0 12px; font-size:13px;
display:flex; align-items:center; }
.chip.active { border:1px solid #584de4; color:#584de4; }
.list { flex:1; overflow:hidden; padding:0 16px; }
.row { padding:12px 0; border-bottom:1px solid #f2f2f2; }
.row .title { font-size:16px; font-weight:600; margin-bottom:4px; }
.row .price { color:#4337de; font-size:18px; font-weight:500; }
.row .up { color:#3dab6a; font-size:12px; margin-left:6px; }
.map { flex:1; background:linear-gradient(135deg,#eeedfc,#c9d3f5); position:relative; }
.bubble { position:absolute; background:#ffffff; border-radius:16px; padding:6px 12px; font-size:12px;
font-weight:700; color:#4337de; box-shadow:4px 2px 12px 0px rgba(0,0,0,0.24); }
.b1 { top:120px; left:180px; }
.b2 { top:220px; left:340px; }
.b3 { top:100px; left:420px; }
.fab { position:absolute; top:20px; right:20px; width:38px; height:38px; background:#ffffff;
border-radius:4px; box-shadow:4px 2px 12px 0px rgba(0,0,0,0.24); }
</style></head>
<body>
<div class="layout">
<div class="panel">
<div class="panel-head">
<div class="logo">Hogangnono</div>
<div class="search">Search by apartment or area</div>
</div>
<div class="chips">
<div class="chip active">For Sale</div>
<div class="chip">Lease</div>
<div class="chip">School District</div>
</div>
<div class="list">
<div class="row"><div class="title">Raemian Gangnam Park</div><div class="price">$1.42M<span class="up">▲2.1%</span></div></div>
<div class="row"><div class="title">Hillstate Pangyo</div><div class="price">$0.95M<span class="up">▲0.8%</span></div></div>
<div class="row"><div class="title">Xi Wirye</div><div class="price">$0.75M</div></div>
</div>
</div>
<div class="map">
<div class="fab"></div>
<div class="bubble b1">$1.42M</div>
<div class="bubble b2">$0.95M</div>
<div class="bubble b3">$0.75M</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #202020;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #202020;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #202020; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fff200; color: #202020;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #202020;
border: 1px solid #fff200; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #202020;
border: 1px solid #c7c7c7; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ed1c24; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#202020; box-sizing:border-box;
font-family:Arial, Helvetica, Verdana, sans-serif; }
* { box-sizing:border-box; }
body { position:relative; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 24px;
border-bottom:1px solid #d7d7d7; }
.brand { font-family:'standard0765Regular',Arial,Helvetica,sans-serif; font-size:22px; }
.navlinks { display:flex; gap:18px; font-size:14px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; }
.navlinks .on { border-bottom:3px solid #fff200; padding-bottom:14px; }
.cart { width:32px; height:32px; border-radius:9999px; background:#fff200; position:relative; }
.cart .badge { position:absolute; top:-4px; right:-4px; width:18px; height:18px; border-radius:9999px;
background:#ed1c24; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.searchbar { height:40px; margin:10px 24px 0; border:2px solid #d7d7d7; border-radius:4px; display:flex;
align-items:center; padding:0 14px; font-size:13px; color:#777777; }
main { display:flex; gap:20px; padding:12px 24px 0; height:470px; }
.left { width:230px; display:flex; flex-direction:column; gap:8px; }
.sleeve { height:230px; background:#f3f3f3; border:1px solid #d7d7d7; position:relative; display:flex;
align-items:center; justify-content:center; overflow:hidden; }
.vinyl { width:170px; height:170px; border-radius:9999px; background:
repeating-radial-gradient(circle,#141414 0px,#141414 2px,#1f1f1f 3px,#1f1f1f 5px);
position:relative; box-shadow:0 6px 14px rgba(0,0,0,.25); }
.vinyl::before { content:''; position:absolute; inset:38%; border-radius:9999px;
background:linear-gradient(160deg,#ed1c24,#7a0e12); }
.vinyl::after { content:''; position:absolute; inset:47%; border-radius:9999px; background:#202020; }
.badges-float { position:absolute; top:8px; left:8px; display:flex; flex-direction:column; gap:5px; }
.badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
padding:2px 6px; border-radius:2px; color:#202020; }
.b-sale { background:#ed1c24; color:#fff; }
.b-used { background:#202020; color:#fff200; }
.genres { display:flex; gap:6px; flex-wrap:wrap; }
.genre { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#777777;
background:#f3f3f3; border-radius:4px; padding:4px 8px; }
.genre.on { background:#202020; color:#fff; }
.right { flex:1; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.crumb { font-size:11px; color:#777777; }
h1 { font-family:'standard0758Regular',Arial,Helvetica,sans-serif; font-size:22px; font-weight:400; margin:2px 0 0; }
.artist { font-size:14px; font-weight:700; color:#404040; }
.stars { font-size:12px; color:#202020; }
.stars span.n { color:#777777; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:2px; }
.price { font-size:20px; font-weight:700; }
.price-old { font-size:13px; color:#777777; text-decoration:line-through; }
.formats { display:flex; gap:8px; margin-top:2px; }
.chip { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; background:#ffffff;
border:2px solid #202020; padding:7px 14px; }
.chip.sel { background:#202020; color:#fff200; border-color:#202020; }
.cta-row { display:flex; gap:10px; margin-top:6px; }
.btn-primary { background:#fff200; color:#202020; font-size:14px; font-weight:700; text-transform:uppercase;
letter-spacing:.5px; border-radius:4px; height:40px; padding:0 24px; display:flex; align-items:center; }
.btn-secondary { background:#ffffff; color:#202020; border:2px solid #202020; font-size:14px; font-weight:700;
text-transform:uppercase; letter-spacing:.5px; border-radius:4px; height:40px; padding:0 20px;
display:flex; align-items:center; }
.specs { margin-top:4px; background:#f3f3f3; border:1px solid #d7d7d7; padding:10px 14px; display:grid;
grid-template-columns:1fr 1fr; gap:6px 16px; }
.spec-item { font-size:11px; }
.spec-item .lab { color:#777777; text-transform:uppercase; letter-spacing:.4px; font-size:10px; }
.spec-item .val { color:#202020; font-weight:700; font-size:12px; }
footer { position:absolute; bottom:0; left:0; right:0; height:34px; background:#36043c; color:#fff;
display:flex; align-items:center; justify-content:space-between; padding:0 24px; font-size:11px; }
footer b { color:#fff200; text-transform:uppercase; letter-spacing:.5px; }
</style></head>
<body>
<nav>
<span class="brand">Amoeba Music</span>
<div class="navlinks"><span class="on">Vinyl</span><span>CDs</span><span>Movies</span><span>Merch</span></div>
<div class="cart"><span class="badge">3</span></div>
</nav>
<div class="searchbar">Search artist, title, or catalog #…</div>
<main>
<div class="left">
<div class="sleeve">
<div class="badges-float">
<span class="badge b-sale">Sale</span>
<span class="badge b-used">Used — VG+</span>
</div>
<div class="vinyl"></div>
</div>
<div class="genres">
<span class="genre on">Post-Punk</span><span class="genre">Import</span><span class="genre">Reissue</span>
</div>
</div>
<div class="right">
<div class="crumb">Home / Vinyl / Post-Punk / <b>Nocturne Static</b></div>
<h1>Nocturne Static</h1>
<div class="artist">Glass Harbor</div>
<div class="stars">★★★★☆ <span class="n">4.4 (67 reviews)</span></div>
<div class="price-row">
<span class="price">$21.99</span>
<span class="price-old">$27.99</span>
</div>
<div class="formats">
<span class="chip sel">180g LP</span>
<span class="chip">CD</span>
<span class="chip">Cassette</span>
</div>
<div class="cta-row">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">In-Store Pickup</div>
</div>
<div class="specs">
<div class="spec-item"><div class="lab">Label</div><div class="val">Harbor Line Records</div></div>
<div class="spec-item"><div class="lab">Pressing</div><div class="val">2027 Reissue, 180g</div></div>
<div class="spec-item"><div class="lab">Condition</div><div class="val">Sleeve: VG+ / Disc: NM</div></div>
<div class="spec-item"><div class="lab">Catalog #</div><div class="val">HLR-0442</div></div>
</div>
</div>
</main>
<footer><span>© Amoeba Music</span><span>Buy · Sell · Trade — <b>walk-ins welcome</b></span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf9f5; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf9f5; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.4; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ed7c35; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: transparent; color: #111111;
border: 1px solid #ed7c35; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c0bfbc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.45; letter-spacing: 0.3px; background: #f4f2ee; color: #464646;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#faf9f5; color:#111111; box-sizing:border-box;
font-family:'Libre Franklin','Franklin Gothic Medium','Arial Narrow',sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:'Merriweather',Georgia,'Times New Roman',serif; }
nav { height:56px; background:#faf9f5; border-bottom:1px solid #dedede; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; }
.brand { font-size:16px; letter-spacing:.02em; font-weight:700; }
.navlinks { display:flex; gap:22px; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:#767676; }
.navlinks span.on { color:#ed7c35; }
.acct { font-size:11px; color:#767676; }
.wrap { display:flex; height:530px; padding:24px 30px; gap:30px; }
.frame { width:300px; flex-shrink:0; background:#ffffff; border:1px solid #dedede; padding:16px; display:flex;
align-items:center; justify-content:center; }
.print { width:100%; height:100%; background:linear-gradient(135deg,#ed7c35 0%,#faf9f5 45%,#7e1412 100%); position:relative; }
.edition-tag { position:absolute; bottom:10px; left:10px; background:#111111; color:#fff; font-size:10px; padding:4px 8px; }
.info { flex:1; display:flex; flex-direction:column; gap:12px; }
.artist { font-size:12px; color:#767676; }
.info h1 { font-size:26px; font-weight:700; margin:0; font-family:'Merriweather',Georgia,serif; line-height:1.25; }
.edition-line { font-size:13px; color:#363636; }
.edition-line b { color:#ed7c35; }
.price-row { display:flex; align-items:baseline; gap:14px; }
.price { font-size:22px; font-weight:700; }
.price-note { font-size:11px; color:#7e1412; background:#feebeb; padding:3px 8px; border-radius:4px; }
.opt-row { display:flex; gap:8px; }
.opt { border:1px solid #dedede; border-radius:4px; padding:8px 16px; font-size:12px; }
.opt.on { border-color:#ed7c35; color:#ed7c35; }
.desc { font-size:13px; font-family:'Merriweather',Georgia,serif; color:#363636; line-height:1.65; max-width:460px; }
.buy-row { display:flex; gap:10px; margin-top:auto; }
.btn-buy { flex:1; background:#ed7c35; color:#fff; border:none; border-radius:4px; padding:13px; font-size:13px; font-weight:700; letter-spacing:.03em; }
.btn-save { border:1px solid #111111; border-radius:4px; padding:13px 20px; font-size:13px; }
footer { height:54px; background:#f4f2ee; border-top:1px solid #dedede; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; font-size:11px; color:#767676; }
</style></head>
<body>
<nav>
<p class="brand">20x200</p>
<div class="navlinks"><span>New Editions</span><span class="on">Photography</span><span>Illustration</span><span>Artists</span></div>
<span class="acct">My Collection</span>
</nav>
<div class="wrap">
<div class="frame">
<div class="print"><span class="edition-tag">40 / 200</span></div>
</div>
<div class="info">
<span class="artist">Photograph by Camila Reyes</span>
<h1>Low Tide, Point Reyes</h1>
<p class="edition-line">Limited edition of <b>200</b> · archival pigment print · signed and numbered</p>
<div class="price-row">
<span class="price">$35.00</span>
<span class="price-note">Only 40 prints remain</span>
</div>
<div class="opt-row">
<span class="opt on">8×10 Unframed</span>
<span class="opt">11×14 Framed</span>
<span class="opt">16×20 Framed</span>
</div>
<p class="desc">One fixed run, one fixed price — when the edition sells out, it's gone for good. Printed on 100% cotton rag paper with archival pigment inks.</p>
<div class="buy-row">
<button class="btn-buy">Add to Collection</button>
<button class="btn-save">Save</button>
</div>
</div>
</div>
<footer><span>© 20x200 — a fixed run, a fixed price</span><span>Framing Guide · Shipping · Artist Program</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbf5ef; color: #1d1d1b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbf5ef; color: #1d1d1b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1d1d1b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #9a9db1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #dedc00; color: #1d1d1b;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: transparent; color: #1d1d1b;
border: 1px solid #dedc00; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1d1d1b;
border: 1px solid #e5e5e5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9db1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #b2f9e9; color: #0e7a82;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbf5ef; color:#1d1d1b; box-sizing:border-box;
font-family:'Acre','BentonMod', -apple-system, 'Segoe UI', Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
h1,h2,h3,p,span,div,a,button { font-family:inherit; }
.bodyfont { font-family:'BentonMod', -apple-system, 'Segoe UI', Arial, sans-serif; }
.announce { flex:0 0 26px; background:#272d45; color:#fbf5ef; display:flex; align-items:center; justify-content:center;
font-size:11px; letter-spacing:0.2px; }
.announce b { color:#dedc00; font-weight:700; margin:0 4px; }
nav { flex:0 0 56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; background:#fbf5ef; border-bottom:1px solid #e5e5e5; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:500; color:#1d1d1b; }
.btn-primary { background:#dedc00; color:#1d1d1b; border:none; border-radius:8px;
padding:9px 18px; font-weight:600; font-size:12.5px; white-space:nowrap; }
.hero { flex:0 0 176px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; gap:24px; background:#fbf5ef; }
.hero-copy { max-width:430px; }
.hero h1 { font-size:29px; font-weight:700; line-height:1.15; margin:0 0 8px; letter-spacing:-0.4px; }
.hero p { font-size:13px; color:#4f4f4f; line-height:1.5; margin:0 0 14px; }
.hero-actions { display:flex; gap:10px; }
.btn-secondary { background:transparent; color:#1d1d1b; border:1.5px solid #1d1d1b; border-radius:8px;
padding:8px 17px; font-weight:600; font-size:12.5px; white-space:nowrap; }
.hero-art { position:relative; width:170px; height:130px; flex-shrink:0; }
.blob1 { position:absolute; width:120px; height:120px; border-radius:9999px; background:#fac8a7; left:10px; top:0; opacity:0.9; }
.blob2 { position:absolute; width:70px; height:70px; border-radius:9999px; background:#00caaa; right:0; bottom:6px; opacity:0.85; }
.blob3 { position:absolute; width:44px; height:44px; border-radius:9999px; background:#ffcf2a; left:60px; bottom:0; }
.trust { flex:0 0 40px; background:#272d45; display:flex; align-items:center; justify-content:center; gap:32px; }
.trust-item { display:flex; align-items:center; gap:6px; color:#fbf5ef; font-size:11px; }
.trust-dot { width:7px; height:7px; border-radius:9999px; background:#dedc00; flex-shrink:0; }
.cards { flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:16px 32px; align-content:center; overflow:hidden; }
.pcard { background:#ffffff; border:1px solid #e5e5e5; border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:7px; }
.pcard .swatch { height:64px; border-radius:8px; background:linear-gradient(135deg,#ebe2d8,#fac8a7); position:relative; }
.pcard .swatch::after { content:''; position:absolute; left:50%; bottom:8px; width:26px; height:38px; transform:translateX(-50%);
background:#ffffff; border:2px solid #0e7a82; border-radius:4px; opacity:0.9; }
.pcard h3 { font-size:13.5px; font-weight:600; margin:0; }
.badges { display:flex; gap:5px; flex-wrap:wrap; }
.badge-claim { background:#b2f9e9; color:#0e7a82; font-size:9.5px; font-weight:600; border-radius:9999px; padding:2px 8px; }
.badge-primary { background:#dedc00; color:#1d1d1b; font-size:9.5px; font-weight:600; border-radius:9999px; padding:2px 8px; }
.pcard .price { font-size:16px; font-weight:700; margin-top:auto; }
footer { flex:0 0 56px; background:#1d1d1b; color:#9a9db1; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; font-size:11px; }
footer .link { color:#9a9db1; }
</style></head>
<body>
<div class="announce"><span>Free shipping over $50</span><b>·</b><span>30-day guarantee</span></div>
<nav>
<p class="brand">Attn Grace</p>
<div class="navlinks bodyfont">
<span>Shop</span><span>Our Ingredients</span><span>Reviews</span><span>Take the Quiz</span>
</div>
<button class="btn-primary bodyfont">Shop Now</button>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Wellness made for grown women.</h1>
<p class="bodyfont">Formulated by the women who live it — clean science, honest labels, and a color that refuses to whisper.</p>
<div class="hero-actions">
<button class="btn-primary bodyfont">Take the Quiz</button>
<button class="btn-secondary bodyfont">Shop Best Sellers</button>
</div>
</div>
<div class="hero-art">
<div class="blob1"></div>
<div class="blob2"></div>
<div class="blob3"></div>
</div>
</section>
<div class="trust">
<div class="trust-item bodyfont"><span class="trust-dot"></span>Dermatologist-Tested</div>
<div class="trust-item bodyfont"><span class="trust-dot"></span>Fragrance-Free</div>
<div class="trust-item bodyfont"><span class="trust-dot"></span>Clean Science, No BS</div>
</div>
<section class="cards">
<div class="pcard">
<div class="swatch"></div>
<h3>Overnight Renewal Serum</h3>
<div class="badges"><span class="badge-claim">Fragrance-Free</span></div>
<div class="price">$38</div>
</div>
<div class="pcard">
<div class="swatch"></div>
<h3>Daily Glow Cream</h3>
<div class="badges"><span class="badge-claim">Dermatologist-Tested</span></div>
<div class="price">$42</div>
</div>
<div class="pcard">
<div class="swatch"></div>
<h3>Hydration Duo Set</h3>
<div class="badges"><span class="badge-primary">Bestseller</span></div>
<div class="price">$65</div>
</div>
</section>
<footer>
<span>© Attn Grace</span>
<span><span class="link">Shop</span> · <span class="link">Our Story</span> · <span class="link">Support</span></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fff2f5; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #fff2f5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fffdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#0B051D; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:640px; }
.col { flex:1; padding:26px 32px; }
.brand { font-size:14px; font-weight:700; color:#6E6878; margin:0 0 20px; }
.heropanel { background:#0B051D; border-radius:20px; padding:22px 24px; color:#fff; margin-bottom:20px; }
.heropanel .k { font-size:12px; color:rgba(255,255,255,0.6); }
.heropanel .amt { font-size:32px; font-weight:700; margin:6px 0 14px; }
.paybtn { display:inline-block; background:#FFB3C7; color:#0B051D; font-weight:700; font-size:14px; padding:11px 22px; border-radius:999px; }
.sectitle { font-size:14px; font-weight:700; margin:0 0 14px; }
.timeline { display:flex; align-items:center; margin-bottom:8px; }
.dot { width:22px; height:22px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; }
.dot.paid { background:#FFB3C7; color:#0B051D; }
.dot.open { background:#fff; border:2px solid #F0DDE3; color:#9B96A3; }
.track { flex:1; height:2px; background:#F0DDE3; }
.paylabels { display:flex; justify-content:space-between; font-size:11px; color:#6E6878; margin-bottom:24px; }
.order { display:flex; align-items:center; padding:12px 0; border-bottom:1px solid #F0DDE3; gap:12px; }
.oicon { width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,#FFB3C7,#FFF2F5); }
.oname { font-size:14px; font-weight:600; }
.ostatus { font-size:12px; color:#0E8A4F; margin-top:2px; }
.oamt { margin-left:auto; font-size:14px; font-weight:700; }
.col2 { width:320px; flex:0 0 auto; background:#FFF2F5; padding:26px; }
.browser { background:#fff; border-radius:16px; padding:16px; box-shadow:0 8px 24px rgba(11,5,29,0.08); }
.bhead { font-size:12px; color:#6E6878; margin-bottom:10px; }
.bimg { height:120px; border-radius:10px; background:linear-gradient(135deg,#FFD9E4,#FFB3C7); margin-bottom:12px; }
.bname { font-size:15px; font-weight:700; }
.bprice { font-size:14px; margin-top:4px; }
</style></head>
<body>
<div class="wrap">
<div class="col">
<p class="brand">Klarna (iOS)</p>
<div class="heropanel">
<div class="k">Total due today</div>
<div class="amt">$34.75</div>
<div class="paybtn">Pay now</div>
</div>
<div class="sectitle">Pay in 4</div>
<div class="timeline">
<div class="dot paid">✓</div><div class="track"></div>
<div class="dot open">2</div><div class="track"></div>
<div class="dot open">3</div><div class="track"></div>
<div class="dot open">4</div>
</div>
<div class="paylabels"><span>Today · $34.75</span><span>Nov 4</span><span>Nov 18</span><span>Dec 2</span></div>
<div class="sectitle">Recent orders</div>
<div class="order"><div class="oicon"></div><div><div class="oname">Everlane · Wool Coat</div><div class="ostatus">Paid in full</div></div><div class="oamt">$139.00</div></div>
<div class="order"><div class="oicon"></div><div><div class="oname">Sonos · Era 100</div><div class="ostatus">3 of 4 paid</div></div><div class="oamt">$249.00</div></div>
</div>
<div class="col2">
<div class="bhead">Shopping in Klarna</div>
<div class="browser">
<div class="bimg"></div>
<div class="bname">Klarna (iOS)</div>
<div class="bprice">$34.75 · or 4 payments of $8.69</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4eee2; color: #252525;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4eee2; color: #252525;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: 0.1px; margin: 0; color: #252525; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 300; line-height: 1.6; letter-spacing: 0.15px; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 1.8px; background: #003399; color: #fefefe;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 1.8px; background: transparent; color: #003399;
border: 1px solid #003399; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; letter-spacing: 0.1px; background: #fefefe; color: #252525;
border: 1px solid #c0bcb3; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.55; letter-spacing: 0.02em; background: transparent; color: #808080;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f4eee2; font-family:'Futura',Arial,sans-serif; color:#252525; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;border-bottom:1px solid #d9cdb8;}
.logo{font-size:20px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#003399;}
.navlinks{display:flex;gap:26px;font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:#252525;}
.hero{height:260px;display:flex;}
.herotext{width:48%;display:flex;flex-direction:column;justify-content:center;padding:0 42px;background:#eee4d0;}
.herotext .prov{font-family:'Courier New',monospace;font-size:11px;color:#b26840;margin-bottom:14px;letter-spacing:.5px;}
.herotext h1{font-size:28px;font-weight:300;margin:0 0 14px;line-height:1.3;color:#003399;}
.herotext p{font-size:14px;color:#4a4a4a;margin:0 0 20px;max-width:320px;line-height:1.6;}
.btn{display:inline-block;border:1px solid #b26840;color:#b26840;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:13px 26px;border-radius:0;width:fit-content;}
.heroimg{width:52%;position:relative;background:#e2d5b8;overflow:hidden;}
.heroimg .vase{position:absolute;left:120px;top:40px;width:80px;height:150px;border-radius:40px 40px 10px 10px;background:linear-gradient(160deg,#003399,#252525 80%);}
.heroimg .vase:before{content:'';position:absolute;left:10px;top:-20px;width:60px;height:30px;border-radius:30px;background:#003399;}
.sec{padding:22px 42px 0;}
.sectitle{font-size:13px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:#252525;margin-bottom:16px;border-bottom:1px solid #d9cdb8;padding-bottom:10px;}
.grid{display:flex;gap:18px;}
.card{width:198px;}
.thumb{height:120px;background:#e2d5b8;margin-bottom:10px;}
.ptitle{font-size:14px;font-weight:400;color:#252525;}
.pmeta{font-family:'Courier New',monospace;font-size:11px;color:#8a7a5f;margin:6px 0;border-left:3px solid #b26840;padding-left:8px;}
.pprice{font-size:13px;font-weight:700;color:#003399;}
</style>
<div class="nav">
<div class="logo">Maison Gerard</div>
<div class="navlinks"><span>Furniture</span><span>Ceramics</span><span>Lighting</span><span>Provenance</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="prov">EST. 1974 // NY</div>
<h1>An acquisition is a conversation, not a checkout.</h1>
<p>Twentieth-century design and decorative arts, catalogued with full provenance.</p>
<div class="btn">Inquire</div>
</div>
<div class="heroimg"><div class="vase"></div></div>
</div>
<div class="sec">
<div class="sectitle">Recent Acquisitions</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003399,#e2d5b8);"></div><div class="ptitle">Sèvres Cobalt Urn</div><div class="pmeta">Circa 1890, Paris</div><div class="pprice">$18,500</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b26840,#e2d5b8);"></div><div class="ptitle">Tortoiseshell Console</div><div class="pmeta">Circa 1965, Milan</div><div class="pprice">$24,200</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#252525,#e2d5b8);"></div><div class="ptitle">Bronze Table Lamp</div><div class="pmeta">Circa 1932, Vienna</div><div class="pprice">$9,800</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.04em; background: #163959; color: #ffffff;
border: none; border-radius: 2px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.04em; background: #ffffff; color: #163959;
border: 1px solid #163959; border-radius: 2px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #272727;
border: 1px solid #c9c9c9; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.08em; background: #f5f5f5; color: #595959;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Arial,sans-serif; color:#272727; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #ebebeb;}
.logo{font-size:19px;font-weight:400;color:#163959;letter-spacing:0.5px;}
.navlinks{display:flex;gap:22px;font-size:14px;}
.strip{display:flex;height:576px;}
.side{width:260px;background:#f5f5f5;border-right:1px solid #ebebeb;padding:20px;}
.side h4{font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#595959;margin:0 0 10px;}
.shapes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.shape{width:44px;height:44px;border:1px solid #dedede;border-radius:4px;}
.shape.on{border:2px solid #163959;}
.slider{height:3px;background:#dedede;border-radius:2px;margin:10px 0 4px;position:relative;}
.slider::after{content:'';position:absolute;left:30%;right:30%;top:0;bottom:0;background:#163959;border-radius:2px;}
.srow{font-size:12px;color:#404040;}
.main{flex:1;display:flex;}
.gallery{width:400px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;}
.stone{width:180px;height:180px;background:radial-gradient(circle at 40% 40%,#ffffff,#62a1d8 60%,#163959 100%);border-radius:50%;}
.detail{flex:1;padding:24px;}
.detail h1{font-size:22px;font-weight:400;margin:0 0 8px;}
.price{font-family:Georgia,serif;font-size:26px;font-weight:300;margin:0 0 16px;}
.spec{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #ebebeb;font-size:13px;}
.spec span:first-child{font-family:'Courier New',monospace;color:#595959;}
.cta{margin-top:20px;background:#163959;color:#fff;text-align:center;padding:14px;font-size:14px;font-weight:500;letter-spacing:0.04em;border-radius:2px;}
</style>
<div class="nav">
<div class="logo">Ritani</div>
<div class="navlinks"><span>Engagement Rings</span><span>Diamonds</span><span>Fine Jewelry</span></div>
</div>
<div class="strip">
<div class="side">
<h4>Shape</h4>
<div class="shapes">
<div class="shape on"></div><div class="shape"></div><div class="shape"></div><div class="shape"></div>
</div>
<h4>Carat</h4>
<div class="slider"></div>
<div class="srow">1.00 ct – 2.50 ct</div>
</div>
<div class="main">
<div class="gallery"><div class="stone"></div></div>
<div class="detail">
<h1>Round Brilliant Solitaire</h1>
<div class="price">$8,240</div>
<div class="spec"><span>Cut:</span><span>Ideal</span></div>
<div class="spec"><span>Color:</span><span>F</span></div>
<div class="spec"><span>Clarity:</span><span>VS1</span></div>
<div class="spec"><span>Certificate:</span><span>GIA Certified</span></div>
<div class="cta">Build This Ring</div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f1ea; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f1ea; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #777673; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #382110; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4f1ea; color: #382110;
border: 1px solid #382110; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f4f1ea; color: #111111;
border: 1px solid #d0cdc7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777673; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6d0c7; color: #382110;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F4F1EA; color:#382110; box-sizing:border-box;
font-family:Georgia, 'Times New Roman', serif; }
* { box-sizing:border-box; }
.sans { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#F4F1EA; padding:24px 18px; position:relative; border-right:1px solid #DDD6C7; }
.header { display:flex; gap:14px; margin-bottom:16px; }
.cover { width:88px; height:132px; border-radius:3px; flex-shrink:0; position:relative; overflow:hidden;
background:linear-gradient(160deg,#8a5a3a,#3c2415); box-shadow:rgba(0,0,0,0.18) 0 4px 10px; }
.cover::before { content:''; position:absolute; left:0; top:0; bottom:0; width:6px; background:rgba(0,0,0,0.35); }
.cover .t { position:absolute; top:16px; left:14px; right:10px; color:#f4f1ea; font-size:11px; font-weight:700; line-height:1.3; }
.hinfo .title { font-size:19px; font-weight:900; line-height:1.2; }
.hinfo .author { font-size:13px; font-weight:700; color:#00635D; font-family:sans-serif; margin-top:6px; }
.stars { color:#E9A100; font-size:14px; margin-top:8px; }
.ratingmeta { font-size:11px; color:#6B5E47; font-family:sans-serif; }
.ctablock { margin:16px 0; }
.wantbtn { background:#409D69; color:#fff; text-align:center; border-radius:4px; padding:12px; font-size:14px;
font-weight:900; font-family:sans-serif; }
.segrow { display:flex; border:1px solid #DDD6C7; border-radius:4px; margin-top:8px; overflow:hidden; font-family:sans-serif; }
.segrow span { flex:1; text-align:center; padding:8px; font-size:11px; font-weight:700; color:#6B5E47; border-right:1px solid #DDD6C7; }
.segrow span:last-child { border-right:none; }
.segrow span.act { color:#E9A100; }
.revcard { display:flex; gap:10px; margin-top:14px; }
.revav { width:32px; height:32px; border-radius:50%; background:linear-gradient(160deg,#58371F,#382110); flex-shrink:0; }
.revbody .rname { font-family:sans-serif; font-weight:700; font-size:12px; }
.revbody .rstars { color:#E9A100; font-size:11px; margin:2px 0; }
.revbody .rtext { font-size:12px; line-height:1.5; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:50px; background:#F4F1EA; border-top:0.5px solid #DDD6C7;
display:flex; align-items:center; justify-content:space-around; font-family:sans-serif; }
.tab { font-size:9px; color:#988B6F; text-align:center; }
.tab.on { color:#382110; font-weight:700; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; font-family:sans-serif; }
.brand { font-size:30px; font-weight:900; letter-spacing:-0.3px; margin:0; font-family:Georgia,serif; }
.brand span { color:#E9A100; }
.tag { font-size:14px; color:#6B5E47; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:4px; border:1px solid #DDD6C7; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#6B5E47; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:900; font-family:Georgia,serif; }
.typeblock .t2 { font-size:13px; color:#6B5E47; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:700; padding:6px 12px; border-radius:999px;
background:#EBE6DA; border:1px solid #DDD6C7; color:#6B5E47; }
.footer { margin-top:auto; border-top:1px solid #DDD6C7; padding-top:16px; font-size:11px; color:#988B6F; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="header">
<div class="cover"><div class="t">The Warm<br>Season</div></div>
<div class="hinfo">
<div class="title">The Warm Season</div>
<div class="author">Elena Marsh</div>
<div class="stars">★★★★☆</div>
<div class="ratingmeta">4.01 · 3,284,991 ratings</div>
</div>
</div>
<div class="ctablock">
<div class="wantbtn">Want to Read</div>
<div class="segrow"><span>Rate</span><span class="act">Review</span><span>Shelve ▾</span></div>
</div>
<div class="revcard">
<div class="revav"></div>
<div class="revbody">
<div class="rname">J. Alvarez</div>
<div class="rstars">★★★★★</div>
<div class="rtext">A quiet, devastating book about the years we don't talk about. Couldn't put it down.</div>
</div>
</div>
<div class="tabbar"><div class="tab on">Home</div><div class="tab">My Books</div><div class="tab">Browse</div><div class="tab">Updates</div><div class="tab">Profile</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">Goodreads (iOS)<span>.</span></h1>
<p class="tag">A warm paper library where the book cover is the hero, amber is reserved for stars, and the shelf model organizes everything.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#382110"></div><small>#382110</small></div>
<div class="sw"><div class="chip2" style="background:#E9A100"></div><small>#E9A100</small></div>
<div class="sw"><div class="chip2" style="background:#409D69"></div><small>#409D69</small></div>
<div class="sw"><div class="chip2" style="background:#00635D"></div><small>#00635D</small></div>
<div class="sw"><div class="chip2" style="background:#F4F1EA"></div><small>#F4F1EA</small></div>
</div>
<div class="typeblock">
<div class="t1">The Warm Season</div>
<div class="t2">Merriweather serif for reading, Lato sans for chrome — 1.6 line-height on reviews</div>
</div>
<div class="taglist">
<span>Full-color covers</span><span>Amber 5-star rating</span><span>Shelf model</span>
<span>Community reviews</span><span>Teal author links</span>
</div>
<div class="footer">Warm tan paper canvas #F4F1EA · covers never tinted, always the hero</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #38393a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #38393a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #38393a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; margin: 0; color: #808184; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #af272e; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: transparent; color: #38393a;
border: 1px solid #5b5378; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.6; background: #ffffff; color: #38393a;
border: 1px solid #c7c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808184; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.18; letter-spacing: 0.5px; background: #5b5378; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f7f7; font-family:'Museo Sans','Helvetica Neue',sans-serif; color:#4c4d4f; }
*{box-sizing:border-box;}
.nav{height:60px;background:#2d293c;display:flex;align-items:center;justify-content:space-between;padding:0 44px;}
.logo{font-size:19px;font-weight:200;letter-spacing:1px;color:#ffffff;}
.navlinks{display:flex;gap:26px;font-size:12px;font-weight:300;letter-spacing:0.3px;color:#ffffff;}
.hero{height:266px;display:flex;align-items:center;padding:0 44px;background:linear-gradient(120deg,#f7f7f7 50%,#494260 140%);}
.heroText{width:460px;}
.h1{font-size:32px;font-weight:200;line-height:1.25;color:#38393a;margin:0 0 14px;}
.sub{font-size:14px;color:#4c4d4f;line-height:1.5;margin:0 0 22px;width:390px;}
.cta{display:inline-flex;align-items:center;justify-content:center;width:170px;height:46px;background:#af272e;color:#ffffff;font-size:13px;font-weight:500;border-radius:2px;}
.range{position:relative;width:340px;height:200px;}
.body1{position:absolute;left:60px;top:50px;width:220px;height:110px;border-radius:4px;background:linear-gradient(160deg,#5b5378,#2d293c);}
.burner{position:absolute;width:34px;height:34px;border-radius:9999px;background:#af272e;}
.b1{left:80px;top:66px;}
.b2{left:130px;top:66px;}
.b3{left:180px;top:66px;}
.b4{left:230px;top:66px;}
.sec{padding:24px 44px 0;}
.secTitle{font-size:18px;font-weight:300;color:#38393a;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#ffffff;border-radius:2px;padding:12px;position:relative;}
.thumb{height:100px;border-radius:2px;margin-bottom:10px;}
.badge{position:absolute;top:22px;left:22px;font-size:9px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;padding:3px 8px;border-radius:2px;color:#fff;}
.blime{background:#8c9900;}
.bamber{background:#da9735;}
.pname{font-size:13px;font-weight:500;color:#38393a;margin:0 0 4px;}
.pprice{font-size:13px;color:#4c4d4f;}
</style>
<div class="nav">
<div class="logo">Wolf</div>
<div class="navlinks"><span>Ranges</span><span>Ovens</span><span>Ventilation</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Instruments for open flame.</div>
<div class="sub">Professional-grade ranges engineered with the precision of machined hardware.</div>
<div class="cta">Explore Ranges</div>
</div>
<div class="range"><div class="body1"></div><div class="burner b1"></div><div class="burner b2"></div><div class="burner b3"></div><div class="burner b4"></div></div>
</div>
<div class="sec">
<div class="secTitle">Featured Ranges</div>
<div class="grid">
<div class="card"><span class="badge blime">Efficient</span><div class="thumb" style="background:linear-gradient(135deg,#5b5378,#af272e);"></div><div class="pname">48" Dual-Fuel Range</div><div class="pprice">$12,999</div></div>
<div class="card"><span class="badge bamber">Featured</span><div class="thumb" style="background:linear-gradient(135deg,#2d293c,#af272e);"></div><div class="pname">36" Gas Cooktop</div><div class="pprice">$6,499</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#524b6c,#00393b);"></div><div class="pname">Wall Oven Duo</div><div class="pprice">$8,299</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f0e8; color: #0e1a2e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f0e8; color: #0e1a2e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.35; margin: 0; color: #0e1a2e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #5a6e85; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.06em; background: #c9a84c; color: #0e1a2e;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.06em; background: transparent; color: #152340;
border: 1px solid #c9a84c; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; background: #f5f0e8; color: #0e1a2e;
border: 1px solid #bbbaba; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a6e85; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.08em; background: #1d2f4f; color: #f5f0e8;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f0e8; font-family:'Open Sans',sans-serif; color:#0e1a2e; }
*{box-sizing:border-box;}
.utilbar{height:36px;background:#0e1a2e;color:#f5f0e8;font-size:13px;display:flex;align-items:center;padding:0 30px;gap:20px;}
.nav{height:64px;background:#1d2f4f;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:3px solid #c9a84c;}
.logo{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:700;color:#c9a84c;letter-spacing:0.03em;}
.navlinks{display:flex;gap:20px;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;color:#f5f0e8;}
.hero{background:#0e1a2e;color:#f5f0e8;padding:26px 30px;position:relative;min-height:170px;display:flex;align-items:center;}
.hero:before{content:'';position:absolute;left:30px;top:26px;bottom:26px;width:4px;background:#c9a84c;}
.herotext{padding-left:20px;}
.h1{font-family:'Libre Baskerville',Georgia,serif;font-size:32px;font-weight:700;line-height:1.2;margin:0 0 10px;}
.sub{font-size:15px;color:#f0e0a0;margin:0 0 16px;max-width:400px;}
.btn{display:inline-block;background:#c9a84c;color:#0e1a2e;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;padding:12px 26px;border-radius:8px;}
.grid{display:flex;gap:16px;padding:18px 30px 0;}
.card{width:210px;background:#fff;border:1px solid #d6ccb4;border-radius:4px;padding:12px;}
.lotnum{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#5a6e85;}
.thumb{aspect-ratio:4/3;height:100px;background:#f5f0e8;margin:6px 0 8px;}
.title{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:600;}
.catval{font-family:'Libre Baskerville',Georgia,serif;font-size:16px;font-weight:700;color:#a07828;margin-top:6px;}
.price{font-family:'Libre Baskerville',Georgia,serif;font-size:22px;font-weight:700;color:#1d2f4f;margin-top:2px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="utilbar"><span>Est. 1856</span><span>Expert Certificates Available</span></div>
<div class="nav">
<div class="logo">Stanley Gibbons</div>
<div class="navlinks"><span>Stamps</span><span>Coins</span><span>Auctions</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="h1">170 years of<br>provenance.</div>
<div class="sub">Lot reference, catalogue value, condition notes — descended from print.</div>
<div class="btn">View Lots</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="lotnum">Lot 2214</div><div class="thumb" style="background:linear-gradient(135deg,#c9a84c,#0e1a2e)"></div><div class="title">Cape Triangular 1d</div><div class="catval">Cat. £4,200</div><div class="price">£3,850</div></div>
<div class="card"><div class="lotnum">Lot 2215</div><div class="thumb" style="background:linear-gradient(135deg,#0e1a2e,#c9a84c)"></div><div class="title">Penny Black Plate 1a</div><div class="catval">Cat. £1,100</div><div class="price">£980</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcf4f1; color: #0d0b09;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcf4f1; color: #0d0b09;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 700; line-height: 1.1; margin: 0; color: #0d0b09; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #303030; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ba4444; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #ba4444;
border: 1px solid #ba4444; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcf4f1; color: #0d0b09;
border: 1px solid #dedede; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #303030; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #cc9f53; color: #0d0b09;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Georgia,'Times New Roman',serif; background:#fcf4f1; color:#1c1712; }
*{box-sizing:border-box;}
.nav{height:64px;background:#0d0b09;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:2px solid rgba(204,159,83,.25);}
.logo{font-size:20px;font-weight:700;color:#cc9f53;}
.navlinks{display:flex;gap:22px;font-size:15px;color:#f6efe2;}
.hero{height:270px;position:relative;background:linear-gradient(rgba(13,11,9,.6),rgba(13,11,9,.6)),linear-gradient(135deg,#3a2418,#1c1712);display:flex;align-items:center;padding:0 44px;}
.hero h1{font-size:44px;color:#f6efe2;margin:0 0 14px;font-weight:700;max-width:500px;}
.hero p{color:#e8e8e1;font-size:15px;max-width:400px;margin:0 0 18px;}
.btn{display:inline-block;background:#ba4444;color:#fff;font-size:15px;font-weight:600;letter-spacing:.5px;padding:12px 28px;border-radius:4px;}
.section{padding:24px 44px 0;}
.sectitle{font-size:22px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#f6efe2;border:1px solid #e8e8e1;border-radius:8px;padding:14px;position:relative;}
.thumb{height:100px;border-radius:4px;background:linear-gradient(135deg,#5a3a20,#2b1a10);margin-bottom:8px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#cc9f53;color:#1c1712;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 7px;}
.ptitle{font-size:16px;font-weight:600;margin-bottom:4px;}
.pprice{font-size:20px;font-weight:700;color:#ba4444;}
</style>
<div class="nav">
<div class="logo">Wooden Cork</div>
<div class="navlinks"><div>Whiskey</div><div>Wine</div><div>Spirits</div><div>Gift Sets</div></div>
</div>
<div class="hero">
<div>
<h1>The interior of a bottle shop at closing hour.</h1>
<p>Curated whiskey, wine, and spirits from small-batch distilleries and estates.</p>
<div class="btn">Browse Collection</div>
</div>
</div>
<div class="section">
<div class="sectitle">Featured Bottles</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">2015</div></div><div class="ptitle">Highland Single Malt</div><div class="pprice">$89.99</div></div>
<div class="card"><div class="thumb"><div class="badge">Rare</div></div><div class="ptitle">Cabernet Reserve</div><div class="pprice">$64.99</div></div>
<div class="card"><div class="thumb"><div class="badge">Sale</div></div><div class="ptitle">Small Batch Bourbon</div><div class="pprice">$54.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000033; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000033; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; background: #ff0000; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; background: #ffffff; color: #000033;
border: 1px solid #ff0000; border-radius: 4px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #000033;
border: 1px solid #000033; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; background: #ff0000; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Arial, Verdana, sans-serif; background:#000033; color:#faebd7; }
*{box-sizing:border-box;}
.nav{height:48px;background:#000033;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:2px solid #ccccff;}
.logo{font-size:20px;font-weight:700;color:#ffff00;text-transform:uppercase;}
.navlinks{display:flex;gap:6px;}
.navlinks span{color:#fff;font-size:14px;font-weight:700;padding:0 12px;}
.navlinks .active{background:#ff0000;padding:6px 12px;border-radius:4px;}
.chips{display:flex;gap:8px;padding:14px 26px 0;}
.chip{background:#23238e;color:#fff;font-size:12px;font-weight:700;padding:5px 14px;border-radius:9999px;}
.chip.active{background:#ff0000;}
.grid{display:flex;gap:10px;padding:14px 26px;}
.card{width:200px;background:#fff;color:#000033;border-radius:4px;padding:8px;}
.thumb{height:150px;border-radius:4px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#ff0000;color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:2px;}
.stock{position:absolute;bottom:6px;left:6px;background:#00ff00;color:#000033;font-size:10px;font-weight:700;padding:2px 6px;border-radius:2px;}
.title{font-size:15px;font-weight:700;margin-top:8px;line-height:1.2;height:36px;overflow:hidden;}
.price{font-size:18px;font-weight:700;color:#ff0000;margin-top:4px;}
.banner{margin:0 26px;background:#23238e;border-radius:4px;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;}
.bannertext{font-size:16px;font-weight:700;color:#66ff00;}
.bannerbtn{background:#ff0000;color:#fff;font-size:13px;font-weight:700;padding:8px 18px;border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Mile High Comics</div>
<div class="navlinks"><span class="active">New Arrivals</span><span>Back Issues</span><span>Graphic Novels</span><span>Original Art</span></div>
</div>
<div class="chips"><div class="chip active">All</div><div class="chip">Golden Age</div><div class="chip">Silver Age</div><div class="chip">Modern</div></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#ffd700,#ff0000)"><div class="badge">Sale</div><div class="stock">In Stock</div></div><div class="title">Fantastic Origins #4 CGC 9.6</div><div class="price">$249.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#66ff00,#0674b5)"><div class="stock">In Stock</div></div><div class="title">Web-Slinger Annual #1 Raw</div><div class="price">$89.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#ffa500,#00008b)"><div class="badge">Sale</div></div><div class="title">Sentinel Squad Vol. 2 TPB</div><div class="price">$24.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#ffff00,#ff0000)"><div class="stock">In Stock</div></div><div class="title">Night Watchman #27 First Print</div><div class="price">$14.99</div></div>
</div>
<div class="banner"><div class="bannertext">MILLIONS OF COMICS IN STOCK — GRADED & RAW</div><div class="bannerbtn">Search Now</div></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.1px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.8px; background: #ff3300; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.8px; background: #ffffff; color: #222222;
border: 1px solid #ff3300; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #262626; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#faf1e9; font-family:Georgia,serif; color:#222222; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #c7c7c7;}
.logo{font-size:19px;font-weight:600;letter-spacing:.3px;}
.navlinks{font-family:Arial,sans-serif;display:flex;gap:22px;font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:#595959;}
.cta{background:#ff3300;color:#fff;font-family:Arial,sans-serif;font-size:11px;font-weight:700;padding:8px 4px;width:96px;text-align:center;}
.hero{height:250px;display:flex;background:#222222;}
.heroimg{width:56%;position:relative;overflow:hidden;background:radial-gradient(circle at 60% 40%,#737373,#222222 75%);}
.spot{position:absolute;top:20px;left:120px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,#ff3300,transparent 70%);opacity:.7;}
.herotext{width:44%;display:flex;flex-direction:column;justify-content:center;padding:0 34px;background:#faf1e9;}
.herotext h1{font-size:26px;font-weight:600;margin:0 0 10px;line-height:1.25;}
.herotext p{font-family:Arial,sans-serif;font-size:13px;color:#595959;margin:0 0 16px;max-width:270px;}
.btn{display:inline-block;background:#222222;color:#fff;font-family:Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:.3px;padding:12px 22px;width:fit-content;}
.sec{padding:20px 34px 0;}
.sectitle{font-family:Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#595959;margin-bottom:14px;}
.grid{display:flex;gap:1px;background:#c7c7c7;}
.card{flex:1;background:#faf1e9;padding:10px;}
.thumb{height:96px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;}
.pmeta{font-family:Arial,sans-serif;font-size:11px;color:#3d4246;margin-top:4px;}
.pprice{font-family:Arial,sans-serif;font-size:12px;color:#00a47c;margin-top:2px;}
</style>
<div class="nav">
<div class="logo">Morrison Hotel Gallery</div>
<div class="navlinks"><span>Artists</span><span>Decades</span><span>Editions</span></div>
<div class="cta">Inquire</div>
</div>
<div class="hero">
<div class="heroimg"><div class="spot"></div></div>
<div class="herotext">
<h1>The Photographs Behind the Music</h1>
<p>Limited-edition fine art prints from the archives of rock and roll's defining photographers.</p>
<div class="btn">Browse the Archive</div>
</div>
</div>
<div class="sec">
<div class="sectitle">Featured Editions</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#222222,#737373)"></div><div class="pname">Backstage, 1969</div><div class="pmeta">16x20, ed. 50</div><div class="pprice">$1,200</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#3d4246,#ff3300)"></div><div class="pname">Stage Light, 1972</div><div class="pmeta">20x24, ed. 75</div><div class="pprice">$1,600</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#595959,#222222)"></div><div class="pname">Soundcheck, 1977</div><div class="pmeta">16x20, ed. 50</div><div class="pprice">$1,200</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#737373,#3d4246)"></div><div class="pname">Green Room, 1981</div><div class="pmeta">24x30, ed. 25</div><div class="pprice">$2,400</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #4b4b4b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #4b4b4b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #4b4b4b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #696969; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #080808; color: #ffffff;
border: none; border-radius: 0px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #ffffff; color: #080808;
border: 1px solid #080808; border-radius: 0px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 13px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #4b4b4b;
border: 1px solid #d2d2d2; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #696969; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #080808; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#080808; color:#888888; font-family:Georgia,'Times New Roman',serif; }
*{box-sizing:border-box;}
.nav{height:48px;background:#080808;border-bottom:1px solid #4b4b4b;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Times New Roman',Times,serif;font-size:19px;font-weight:700;color:#ffffff;letter-spacing:.5px;}
.navlinks{display:flex;gap:22px;font-family:'Arial Narrow',Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#888888;}
.navlinks span:first-child{color:#ffffff;}
.crumb{padding:10px 32px 0;font-family:Arial,sans-serif;font-size:12px;color:#696969;}
.crumb b{color:#ffffff;font-weight:400;}
.main{display:flex;padding:14px 32px 0;gap:30px;}
.cover{width:230px;height:230px;background:linear-gradient(160deg,#1a1a1a,#3a3a3a 60%,#080808);position:relative;flex-shrink:0;}
.cover:before{content:'';position:absolute;inset:18px;border:1px solid #4b4b4b;}
.cover:after{content:'DIRECT-TO-DISC';position:absolute;bottom:24px;left:24px;right:24px;color:#ffffff;font-family:'Arial Narrow',Arial,sans-serif;font-size:11px;letter-spacing:2px;}
.badge{position:absolute;top:10px;left:10px;background:#080808;color:#ffffff;font-family:'Arial Narrow',Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:2px 6px;}
.details h1{font-family:'Times New Roman',Times,serif;font-size:26px;font-weight:700;color:#080808;color:#ffffff;margin:0 0 6px;line-height:1.2;}
.artist{font-size:16px;color:#888888;margin:0 0 14px;}
.meta{font-family:Arial,sans-serif;font-size:12px;color:#999999;margin-bottom:16px;}
.price{font-size:20px;color:#ffffff;margin-bottom:16px;}
.btnrow{display:flex;gap:10px;}
.btn{background:#080808;border:1px solid #ffffff;color:#ffffff;font-family:'Arial Narrow',Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:8px 18px;height:32px;display:flex;align-items:center;}
.btn.out{background:transparent;}
.desc{font-size:14px;line-height:1.6;color:#888888;max-width:400px;margin-top:16px;}
.related{margin-top:18px;padding:0 32px;}
.rlabel{font-family:'Arial Narrow',Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#ffffff;margin-bottom:10px;}
.rgrid{display:flex;gap:16px;}
.rcard{width:110px;}
.rthumb{width:110px;height:110px;margin-bottom:6px;}
.rtitle{font-size:12px;color:#ffffff;line-height:1.3;}
.rprice{font-size:11px;color:#696969;margin-top:3px;}
</style>
<div class="nav">
<div class="logo">Stockfisch Records</div>
<div class="navlinks"><span>Catalog</span><span>Artists</span><span>Vinyl</span><span>SACD</span></div>
</div>
<div class="crumb">Catalog / Direct-to-Disc / <b>Nocturne Sessions</b></div>
<div class="main">
<div class="cover"><span class="badge">SACD</span></div>
<div class="details">
<h1>Nocturne Sessions</h1>
<p class="artist">The Analog Quartet</p>
<div class="meta">Format: Hybrid SACD | Mastered by Pauler Acoustics | Cat. SFR 2231</div>
<div class="price">$34.00</div>
<div class="btnrow">
<div class="btn">Add to Cart</div>
<div class="btn out">View Details</div>
</div>
<p class="desc">A single-microphone direct-to-disc session, cut live to lacquer with no compression. The recording speaks for itself; the interface does not compete with it.</p>
</div>
</div>
<div class="related">
<div class="rlabel">Also in the Catalog</div>
<div class="rgrid">
<div class="rcard"><div class="rthumb" style="background:linear-gradient(135deg,#1a1a1a,#4b4b4b)"></div><div class="rtitle">Winter Sessions</div><div class="rprice">$32.00</div></div>
<div class="rcard"><div class="rthumb" style="background:linear-gradient(135deg,#2b2b2b,#4b4b4b)"></div><div class="rtitle">Live at Bauer Studio</div><div class="rprice">$36.00</div></div>
<div class="rcard"><div class="rthumb" style="background:linear-gradient(135deg,#1a1a1a,#3a3a3a)"></div><div class="rtitle">Solo Piano I</div><div class="rprice">$30.00</div></div>
<div class="rcard"><div class="rthumb" style="background:linear-gradient(135deg,#2b2b2b,#080808)"></div><div class="rtitle">String Quartet No.2</div><div class="rprice">$34.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #181818;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #181818;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; letter-spacing: 0px; margin: 0; color: #181818; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; margin: 0; color: #9ca3af; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.5px; background: #fd2121; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.5px; background: #f6f6f6; color: #181818;
border: 1px solid #fd2121; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; background: #f6f6f6; color: #181818;
border: 1px solid #bebebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ca3af; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #149d22; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#181818; font-family:system-ui,-apple-system,'Helvetica Neue',sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #f6f6f6;}
.logo{font-size:17px;font-weight:600;letter-spacing:3px;text-transform:uppercase;}
.navlinks{display:flex;gap:30px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#5c5c5c;}
.hero{height:290px;display:flex;background:#f6f6f6;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;}
.herotext h1{font-size:26px;font-weight:400;line-height:1.4;margin:0 0 20px;letter-spacing:0.2px;}
.herotext p{font-size:13px;color:#5c5c5c;margin:0 0 22px;max-width:280px;line-height:1.6;}
.cta{display:inline-block;background:#fd2121;color:#fff;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:13px 26px;border-radius:8px;width:fit-content;}
.heroimg{width:54%;position:relative;background:#e9e9e9;}
.towel{position:absolute;width:280px;height:170px;top:60px;left:60px;border-radius:12px;background:linear-gradient(180deg,#ffffff,#dadada);}
.stripe{position:absolute;left:60px;width:280px;height:8px;background:#fd2121;}
.s1{top:100px;} .s2{top:130px;background:#181818;}
.seclabel{font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#5c5c5c;padding:26px 40px 14px;}
.grid{display:flex;gap:16px;padding:0 40px;}
.card{width:150px;}
.thumb{height:120px;border-radius:12px;margin-bottom:10px;background:#f6f6f6;}
.ptitle{font-size:13px;font-weight:500;color:#181818;line-height:1.3;}
.pprice{font-size:13px;color:#5c5c5c;margin-top:4px;}
.stock{font-size:10px;color:#149d22;margin-top:6px;letter-spacing:0.3px;text-transform:uppercase;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#9ca3af;border-top:1px solid #f6f6f6;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Tekla</div>
<div class="navlinks"><span>Bath</span><span>Bedding</span><span>Table</span><span>Objects</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Textiles made to be lived in, not displayed.</h1>
<p>Organic cotton terry, woven and finished in restrained tones for a considered home.</p>
<div class="cta">Shop Collection</div>
</div>
<div class="heroimg"><div class="towel"></div><div class="stripe s1"></div><div class="stripe s2"></div></div>
</div>
<div class="seclabel">New Arrivals</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(180deg,#e6e6e6,#c9c9c9)"></div><div class="ptitle">Terry Bath Towel</div><div class="pprice">$45</div><div class="stock">In Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(180deg,#181818,#3d3d3d)"></div><div class="ptitle">Solid Bath Mat</div><div class="pprice">$65</div><div class="stock">In Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(180deg,#f6f6f6,#dedede)"></div><div class="ptitle">Organic Duvet Cover</div><div class="pprice">$285</div><div class="stock">In Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(180deg,#dadada,#9e9e9d)"></div><div class="ptitle">Linen Tablecloth</div><div class="pprice">$165</div><div class="stock">In Stock</div></div>
</div>
<div class="footer"><span>© Stockholm, Since 2015</span><span>Made in Portugal</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffffe; color: #231914;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffffe; color: #231914;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; margin: 0; color: #231914; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #737578; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.25px; background: #0058a2; color: #fffffe;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.25px; background: #fffffe; color: #0058a2;
border: 1px solid #0058a2; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fffffe; color: #231914;
border: 1px solid #c8c6c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737578; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #cd0a1e; color: #fffffe;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fffffe; color:#231914; font-family:Roboto, Verdana, sans-serif; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedbd6;}
.logo{font-size:20px;font-weight:700;color:#0058a2;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:500;}
.navlinks .active{color:#0058a2;border-bottom:2px solid #0058a2;padding-bottom:22px;}
.hero{height:220px;position:relative;background:#0058a2;color:#fff;display:flex;align-items:center;}
.hero:before{content:'';position:absolute;inset:0;background:#231914;opacity:0.3;}
.herotext{position:relative;z-index:1;padding:0 32px;max-width:400px;}
.herotext .k{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;opacity:0.85;}
.herotext h1{font-size:28px;font-weight:700;margin:0 0 10px;line-height:1.25;}
.herocta{width:fit-content;background:#fffffe;color:#0058a2;font-size:16px;font-weight:500;padding:12px 24px;border-radius:8px;}
.tiles{display:flex;gap:12px;padding:14px 32px 0;}
.tile{flex:1;background:#f2f2f2;border-radius:8px;padding:16px;text-align:center;font-size:18px;font-weight:600;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:206px;background:#fffffd;border-radius:8px;overflow:hidden;}
.thumb{height:110px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;color:#fffffe;}
.body{padding:12px 4px;}
.ptitle{font-size:16px;font-weight:600;}
.age{font-size:12px;color:#737578;margin-top:2px;}
.pprice{font-size:16px;font-weight:600;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#002c58;color:#fffffe;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Ravensburger</div>
<div class="navlinks"><div class="active">Puzzles</div><div>Games</div><div>Crafts</div><div>Gifts</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="k">140 Years of Play</div>
<h1>Finish something difficult, together.</h1>
<div class="herocta">Shop Puzzles</div>
</div>
</div>
<div class="tiles"><div class="tile">Puzzles</div><div class="tile">Games</div><div class="tile">Crafts</div><div class="tile">Gifts</div></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0058a2,#002c58);"><div class="badge" style="background:#cd0a1e;">Sale</div></div><div class="body"><div class="ptitle">Lake Constance 1000pc</div><div class="age">Age 12+</div><div class="pprice">$19.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0b7c39,#002c58);"><div class="badge" style="background:#0058a2;">New</div></div><div class="body"><div class="ptitle">Labyrinth Family Game</div><div class="age">Age 8+</div><div class="pprice">$24.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#beb7ad,#002c58);"></div><div class="body"><div class="ptitle">Alpine Meadow 500pc</div><div class="age">Age 10+</div><div class="pprice">$14.99</div></div></div>
</div>
<div class="footer"><span>© Ravensburger, Lake Constance</span><span>Warranty Store Locator</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf5ef; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf5ef; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7a7875; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f1641e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #faf5ef; color: #f1641e;
border: 1px solid #f1641e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #faf5ef; color: #111111;
border: 1px solid #d5d1cb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7875; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f9dece; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#FAF5EF; color:#222222; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; padding:22px 32px 0; }
.topnav { display:flex; align-items:center; justify-content:space-between; }
.wordmark { color:#F1641E; font-size:24px; font-weight:800; font-style:italic; }
.search { margin-top:14px; height:48px; background:#fff; border:1px solid #E1DDD5; border-radius:999px; display:flex; align-items:center; padding:0 18px; color:#595959; font-size:15px; gap:8px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:18px; }
.pcard { background:#fff; border-radius:12px; overflow:hidden; }
.pphoto { aspect-ratio:1/1; position:relative; }
.pphoto .tag { position:absolute; top:8px; left:8px; background:#FDEDE4; color:#F1641E; font-size:10px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:999px; }
.pphoto .heart { position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%; background:rgba(0,0,0,0.45); color:#fff; display:flex; align-items:center; justify-content:center; }
.ptext { padding:10px; }
.ptext .nm { font-size:13px; font-weight:500; line-height:1.3; height:34px; overflow:hidden; }
.ptext .price { font-size:15px; font-weight:700; margin-top:4px; }
.ptext .stars { font-size:11px; margin-top:4px; color:#222; }
.ptext .shop { font-size:12px; color:#595959; margin-top:4px; }
</style>
</head>
<body>
<div class="stage">
<div class="topnav"><div class="wordmark">Etsy (iOS)</div><div style="font-size:20px">🔔 🛒</div></div>
<div class="search">🔍 Search for anything</div>
<div class="grid">
<div class="pcard"><div class="pphoto" style="background:linear-gradient(135deg,#e8d5b8,#c9a86a)"><span class="tag">Bestseller</span><span class="heart">♡</span></div>
<div class="ptext"><div class="nm">Hand-thrown ceramic mug set</div><div class="price">$38.00</div><div class="stars">★★★★★ (1,284)</div><div class="shop">ClayAndEmber</div></div>
</div>
<div class="pcard"><div class="pphoto" style="background:linear-gradient(135deg,#d8c8e8,#9878b8)"><span class="heart">♡</span></div>
<div class="ptext"><div class="nm">Macramé wall hanging, boho</div><div class="price">$52.00</div><div class="stars">★★★★★ (642)</div><div class="shop">KnotAndFiber</div></div>
</div>
<div class="pcard"><div class="pphoto" style="background:linear-gradient(135deg,#f0c8a8,#d88858)"><span class="tag">Etsy's Pick</span><span class="heart">♡</span></div>
<div class="ptext"><div class="nm">Engraved wooden jewelry box</div><div class="price">$64.00</div><div class="stars">★★★★★ (2,910)</div><div class="shop">OakAndOwl</div></div>
</div>
<div class="pcard"><div class="pphoto" style="background:linear-gradient(135deg,#c8e0d0,#78a888)"><span class="heart">♡</span></div>
<div class="ptext"><div class="nm">Hand-poured soy candle trio</div><div class="price">$28.00</div><div class="stars">★★★★☆ (398)</div><div class="shop">WickAndWillow</div></div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #333333; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #333333; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9e9e9e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #323232; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #333333; color: #ffffff;
border: 1px solid #323232; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #333333; color: #f5f5f5;
border: 1px solid #525252; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9e9e9e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #333333; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", system-ui, sans-serif; }
* { box-sizing:border-box; }
header { height:56px; background:#000000; display:flex; align-items:center; }
.navlist { display:flex; height:100%; }
.navlist li { list-style:none; height:100%; display:flex; align-items:center; padding:20px 13px;
color:#ffffff; font-size:14px; font-weight:400; }
.breadcrumb { padding:16px 40px 0; font-size:12px; color:#888; }
main { padding:20px 40px 0; }
h1.m-h1 { font-size:30px; font-weight:700; line-height:42px; margin:0 0 8px; color:#333333; }
p.m-text-lead { font-size:16px; font-weight:400; line-height:32px; color:#656565; margin:0 0 24px; max-width:640px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid #e2e2e2; }
.cell { border-right:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2; padding:22px 22px; }
.cell:nth-child(3n) { border-right:none; }
.cell .tag { font-size:11px; color:#999; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:8px; }
.cell h3 { font-size:16px; font-weight:700; margin:0 0 8px; color:#333; }
.cell p { font-size:13px; color:#656565; line-height:1.6; margin:0; }
footer { position:absolute; bottom:0; width:960px; height:52px; background:#f7f7f7; border-top:1px solid #e2e2e2;
display:flex; align-items:center; justify-content:space-between; padding:0 40px; font-size:11px; color:#888; }
</style></head>
<body>
<header>
<ul class="navlist">
<li>SoftBank</li>
<li>Mobile</li>
<li>Broadband</li>
<li>Business</li>
<li>Company</li>
</ul>
</header>
<div class="breadcrumb">Home / Products & Services / Solutions</div>
<main>
<h1 class="m-h1">Information Revolution — Happiness for Everyone</h1>
<p class="m-text-lead">Building on our communications infrastructure, we're expanding the real-world use of AI across society, aiming to solve social challenges through technology.</p>
<div class="grid">
<div class="cell"><div class="tag">Mobile</div><h3>Mobile Communication Services</h3><p>A network supporting daily life, from voice and data to device sales.</p></div>
<div class="cell"><div class="tag">AI</div><h3>Activate AI for Society</h3><p>Driving AI adoption across society to create value for both industry and everyday life.</p></div>
<div class="cell"><div class="tag">Enterprise</div><h3>Enterprise Solutions</h3><p>An integrated service platform combining communications, cloud, and security.</p></div>
</div>
</main>
<footer>
<span>© SoftBank</span>
<span>Company / Careers / Privacy</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #43454b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #003399; color: #ffffff;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #003399;
border: 1px solid #003399; border-radius: 6px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #2f2f2f;
border: 1px solid #c4c4c4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #43454b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #cd2653; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#e3ddd8; color:#333333; font-family:'Open Sans', Arial, sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;background:#ffffff;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:'Montserrat',Arial,sans-serif;font-size:20px;font-weight:600;color:#003399;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;font-family:'Montserrat',Arial,sans-serif;color:#333333;}
.searchpill{width:170px;height:36px;border-radius:9999px;border:1px solid #d9d3cc;background:#f7f5f2;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#8a8378;}
.hero{height:270px;display:flex;align-items:center;padding:0 40px;background:linear-gradient(120deg,#e3ddd8 55%,#d7cfc6 100%);}
.htext{width:440px;}
.htext h1{font-family:'Montserrat',Arial,sans-serif;font-size:32px;font-weight:600;line-height:1.25;margin:0 0 14px;color:#1c1c1c;}
.htext p{font-size:14px;color:#54544f;margin:0 0 20px;max-width:380px;}
.btn{display:inline-block;background:#003399;color:#fff;font-family:'Montserrat',Arial,sans-serif;font-size:14px;font-weight:600;padding:13px 28px;border-radius:12px;}
.hgraphic{position:absolute;right:76px;top:74px;width:280px;height:210px;}
.wheel{position:absolute;width:64px;height:64px;border-radius:50%;background:#1c1c1c;bottom:0;}
.wheel:before{content:'';position:absolute;inset:14px;border-radius:50%;background:#f0b849;}
.w1{left:20px;}
.w2{right:20px;}
.chassis{position:absolute;left:16px;right:16px;bottom:50px;height:70px;background:linear-gradient(160deg,#003399,#00266e);border-radius:16px 16px 6px 6px;}
.hood{position:absolute;left:56px;right:56px;bottom:112px;height:44px;background:#f0b849;border-radius:12px 12px 0 0;}
.sec{padding:24px 40px 0;}
.sectitle{font-family:'Montserrat',Arial,sans-serif;font-size:19px;font-weight:600;margin-bottom:16px;color:#1c1c1c;}
.grid{display:flex;gap:16px;}
.card{width:216px;background:#fff;border-radius:12px;overflow:hidden;position:relative;}
.cardimg{width:100%;height:104px;background:#f0ede8;display:flex;align-items:center;justify-content:center;}
.cardimg .seat{width:60px;height:60px;border-radius:12px;background:linear-gradient(135deg,#003399,#f0b849);}
.cardbody{padding:12px;}
.cardtitle{font-family:'Montserrat',Arial,sans-serif;font-size:15px;font-weight:600;color:#1c1c1c;}
.cardprice{font-size:13px;color:#54544f;margin-top:4px;}
.badge{position:absolute;top:8px;left:8px;background:#cd2653;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:3px 9px;border-radius:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#111111;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#cccccc;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mee GO</div>
<div class="navlinks"><span>Pushchairs</span><span>Car Seats</span><span>Nursery</span></div>
<div class="searchpill">Search products...</div>
</div>
<div class="hero">
<div class="htext">
<h1>Built to carry the whole world, safely.</h1>
<p>Rigorously tested travel systems for the family that doesn't compromise on either.</p>
<div class="btn">Shop Travel Systems</div>
</div>
<div class="hgraphic">
<div class="hood"></div>
<div class="chassis"></div>
<div class="wheel w1"></div>
<div class="wheel w2"></div>
</div>
</div>
<div class="sec">
<div class="sectitle">Everyday Essentials</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="cardimg"><div class="seat"></div></div><div class="cardbody"><div class="cardtitle">Milano Duo Pushchair</div><div class="cardprice">$549.00</div></div></div>
<div class="card"><div class="cardimg"><div class="seat"></div></div><div class="cardbody"><div class="cardtitle">Aria Infant Car Seat</div><div class="cardprice">$289.00</div></div></div>
<div class="card"><div class="cardimg"><div class="seat"></div></div><div class="cardbody"><div class="cardtitle">Cosmo Crib & Dresser</div><div class="cardprice">$899.00</div></div></div>
<div class="card"><div class="cardimg"><div class="seat"></div></div><div class="cardbody"><div class="cardtitle">Traveler Carrycot</div><div class="cardprice">$199.00</div></div></div>
</div>
</div>
<div class="footer"><span>© Trusted Since Day One</span><span>Safety Standards · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #1a1c1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #1a1c1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #1a1c1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6d6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #5f85c1; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #5f85c1;
border: 1px solid #5f85c1; border-radius: 4px;
padding: 9px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2c2d2e;
border: 1px solid #bebfbf; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffaa47; color: #1a1c1d;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; font-family:'Poppins','Helvetica Neue',Arial,sans-serif; color:#2c2d2e; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#2c2d2e;}
.logo{font-size:19px;font-weight:600;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;color:#fff;}
.navlinks .on{color:#ffaa47;}
.searchi{color:#fff;font-size:13px;}
.section{padding:20px 32px 0;}
.stitle{font-size:20px;font-weight:500;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:150px;background:#fff;border:1px solid #dadce0;border-radius:8px;padding:14px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:9px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;background:#ffaa47;color:#2c2d2e;padding:2px 8px;border-radius:4px;}
.thumb{height:80px;border-radius:4px;margin-bottom:10px;}
.pname{font-size:14px;font-weight:500;margin-bottom:4px;}
.pprice{font-size:14px;font-weight:500;}
.hero{margin:0 32px 0;padding:24px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:space-between;}
.h1{font-size:22px;font-weight:600;margin-bottom:6px;}
.sub{font-size:13px;color:#6d6b6b;}
.btn{background:#5f85c1;color:#fff;font-size:14px;font-weight:500;padding:10px 24px;border-radius:4px;}
.cablewrap{width:180px;height:70px;position:relative;}
.cable{position:absolute;width:150px;height:8px;background:#ffaa47;border-radius:4px;top:20px;left:10px;transform:rotate(-8deg);}
.cable2{position:absolute;width:150px;height:8px;background:#5f85c1;border-radius:4px;top:40px;left:20px;transform:rotate(6deg);}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#1a1c1d;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#aaaeb6;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Syncwire</div>
<div class="navlinks"><div class="on">Cables</div><div>Chargers</div><div>Mounts</div><div>Adapters</div></div>
<div class="searchi">🔍 Search</div>
</div>
<div style="padding:16px 32px 0;">
<div class="hero">
<div><div class="h1">Charge It. Mount It. Move On.</div><div class="sub">Reliable electronics accessories, no frills, fast shipping.</div><div style="margin-top:10px;"><span class="btn">Shop Best Sellers</span></div></div>
<div class="cablewrap"><div class="cable"></div><div class="cable2"></div></div>
</div>
</div>
<div class="section">
<div class="stitle">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(150deg,#5f85c1,#2c2d2e);"></div><div class="pname">Braided USB-C Cable</div><div class="pprice">$11.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#ffaa47,#2c2d2e);"></div><div class="pname">65W GaN Charger</div><div class="pprice">$29.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#279a4b,#2c2d2e);"></div><div class="pname">Magnetic Car Mount</div><div class="pprice">$16.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#003996,#2c2d2e);"></div><div class="pname">4-Port Hub Adapter</div><div class="pprice">$22.99</div></div>
</div>
</div>
<div class="footer"><span>© Electronics Accessories, Organized</span><span>Warranty · Bulk Orders</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #111820;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #111820;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #111820; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8f8f8f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; background: #3665f3; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; background: #ffffff; color: #3665f3;
border: 1px solid #3665f3; border-radius: 8px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111820;
border: 1px solid #bebfc1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f8f8f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #92c821; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f7; color:#191919; box-sizing:border-box; font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#fff; display:flex; align-items:center; gap:18px; padding:0 24px; }
.logo { font-size:18px; font-weight:700; color:#3665f3; }
.navlink { font-size:14px; font-weight:600; color:#8f8f8f; }
.navlink.active { color:#3665f3; }
.searchw { margin-left:auto; width:280px; height:36px; border-radius:999px; border:1px solid #e5e5e5;
display:flex; align-items:center; padding:0 16px; font-size:13px; color:#8f8f8f; background:#fff; }
.searchbtn { background:#3665f3; color:#fff; border-radius:999px; height:36px; padding:0 18px; font-size:12px; font-weight:600; }
.crumb { font-size:11px; color:#8f8f8f; padding:8px 24px 0; }
.stage { display:flex; gap:20px; padding:8px 24px 0; }
.prod { width:220px; height:200px; flex:0 0 auto; border-radius:8px; position:relative; overflow:hidden;
background:linear-gradient(160deg,#3665f3 0%,#111820 130%); border:1px solid #e5e5e5; }
.prod::before { content:''; position:absolute; left:16px; top:16px; width:100px; height:130px; border-radius:4px;
background:rgba(255,255,255,.12); }
.condbadge { position:absolute; top:10px; right:10px; background:#92c821; color:#fff; font-size:10px; font-weight:700;
text-transform:uppercase; letter-spacing:.4px; border-radius:4px; padding:2px 6px; }
.info { flex:1; }
h1 { font-size:19px; font-weight:600; margin:0 0 6px; }
.seller { font-size:11px; color:#8f8f8f; margin-bottom:8px; }
.seller b { color:#191919; }
.pricebox { background:#fff; border:1px solid #e5e5e5; border-radius:8px; padding:12px 16px; margin-bottom:10px; width:260px; }
.pricebox .price { font-size:20px; font-weight:700; color:#e0103a; }
.pricebox .ship { font-size:12px; color:#8f8f8f; margin-top:4px; }
.badgerow { display:flex; gap:6px; margin-bottom:10px; }
.bd { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; border-radius:4px; padding:3px 7px; color:#fff; }
.bd-green{background:#92c821;} .bd-teal{background:#07465a;} .bd-purple{background:#3b1fc6;}
.btncol { display:flex; flex-direction:column; gap:8px; width:220px; }
.btn-p { background:#3665f3; color:#fff; border:none; border-radius:8px; height:44px; font-size:14px; font-weight:600; }
.btn-g { background:#92c821; color:#fff; border:none; border-radius:8px; height:44px; font-size:14px; font-weight:600; }
.btn-s { background:#fff; color:#3665f3; border:1px solid #3665f3; border-radius:8px; height:36px; font-size:12px; font-weight:600; }
.sellerbox { width:220px; background:#fff; border:1px solid #e5e5e5; border-radius:8px; padding:12px; }
.sellerbox .name { font-size:13px; font-weight:700; }
.sellerbox .rate { font-size:11px; color:#8f8f8f; margin-top:2px; }
.sellerbox .stars { color:#ffbd14; font-size:12px; margin-top:4px; }
.relwrap { padding:14px 24px 0; border-top:1px solid #e5e5e5; margin-top:14px; }
.relhdr { font-size:12px; font-weight:700; color:#191919; margin-bottom:8px; }
.relgrid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.rc { background:#fff; border:1px solid #e5e5e5; border-radius:6px; padding:6px; }
.rc .th { height:50px; border-radius:4px; background:linear-gradient(160deg,#e0103a,#111820); margin-bottom:6px; }
.rc .t { font-size:10px; font-weight:600; height:22px; overflow:hidden; }
.rc .p { font-size:11px; color:#e0103a; font-weight:700; }
</style></head>
<body>
<nav>
<span class="logo">Classic Game Source</span>
<span class="navlink active">Consoles</span>
<span class="navlink">Cartridges</span>
<span class="navlink">Accessories</span>
<div class="searchw">Search retro games, consoles…</div>
<div class="searchbtn">Search</div>
</nav>
<div class="crumb">Consoles > Handhelds > Listing #5891422</div>
<div class="stage">
<div class="prod"><span class="condbadge">Used — Good</span></div>
<div class="info">
<h1>Portable Handheld Console — Charcoal, Working Condition</h1>
<div class="seller">Sold by <b>retro_relics_88</b> · 99.4% positive feedback</div>
<div class="badgerow">
<span class="bd bd-green">Buy It Now</span>
<span class="bd bd-teal">Free Shipping</span>
<span class="bd bd-purple">Best Offer</span>
</div>
<div class="pricebox">
<div class="price">$64.99</div>
<div class="ship">or Best Offer · Free shipping · 3 watching</div>
</div>
<div class="btncol">
<button class="btn-g">Buy It Now</button>
<button class="btn-p">Add to Cart</button>
<button class="btn-s">Make Offer</button>
</div>
</div>
<div class="sellerbox">
<div class="name">retro_relics_88</div>
<div class="rate">1,842 items sold</div>
<div class="stars">★★★★★ 4.9</div>
</div>
</div>
<div class="relwrap">
<div class="relhdr">More From This Seller</div>
<div class="relgrid">
<div class="rc"><div class="th"></div><div class="t">Cartridge Bundle (5)</div><div class="p">$38.00</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(160deg,#92c821,#191919)"></div><div class="t">AC Adapter, OEM</div><div class="p">$14.00</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(160deg,#3665f3,#191919)"></div><div class="t">Carrying Case</div><div class="p">$12.50</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(160deg,#ffbd14,#191919)"></div><div class="t">Replacement Screen</div><div class="p">$22.00</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(160deg,#e0103a,#191919)"></div><div class="t">Link Cable</div><div class="p">$9.00</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffce5; color: #03010c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffce5; color: #03010c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #03010c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: 1px; background: #170a69; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: 1px; background: #fffce5; color: #170a69;
border: 1px solid #170a69; border-radius: 9999px;
padding: 14px 32px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #03010c;
border: 1px solid #c0bdaf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ecfab3; color: #03010c;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fffce5; font-family:'ABCFavoritMono','Courier New',monospace; color:#170a69; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-family:Georgia,serif;font-size:20px;font-style:italic;color:#170a69;}
.navlinks{display:flex;gap:20px;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:#170a69;}
.hero{height:236px;display:flex;align-items:center;padding:0 34px;background:#fafafa;}
.heroText{width:430px;}
.eyebrow{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#afb84a;margin-bottom:10px;}
.h1{font-family:Georgia,serif;font-size:34px;font-weight:400;line-height:1.2;color:#170a69;margin:0 0 12px;}
.sub{font-size:13px;line-height:1.6;color:#170a69;margin:0 0 18px;max-width:370px;}
.btn{display:inline-block;background:#170a69;color:#fff;font-size:12px;letter-spacing:.5px;text-transform:uppercase;padding:12px 26px;border-radius:9999px;}
.jar{margin-left:auto;width:220px;height:170px;position:relative;}
.jarbody{position:absolute;width:130px;height:130px;border-radius:9999px;background:radial-gradient(circle at 35% 30%,#e5cb00,#911a4b 75%);top:10px;left:40px;box-shadow:0 12px 26px rgba(23,10,105,.18);}
.dot1{position:absolute;width:34px;height:34px;border-radius:50%;background:#ecfab3;top:0;right:10px;}
.dot2{position:absolute;width:20px;height:20px;border-radius:50%;background:#fff6b2;bottom:10px;left:10px;}
.sec{padding:22px 34px 0;}
.secTitle{font-family:Georgia,serif;font-style:italic;font-size:19px;color:#170a69;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:203px;background:#fff;border-radius:12px;padding:12px;}
.thumb{height:100px;border-radius:12px;margin-bottom:10px;}
.pname{font-family:Georgia,serif;font-size:13px;color:#170a69;margin:0 0 4px;}
.pprice{font-size:12px;color:#911a4b;font-weight:700;}
</style>
<div class="nav">
<div class="logo">Three Ships</div>
<div class="navlinks"><span>Skincare</span><span>Bestsellers</span><span>Our Ingredients</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">Clinically Clean</div>
<div class="h1">Natural skincare, visible results.</div>
<div class="sub">Botanical formulas engineered like a lab notebook — every claim backed, every ingredient explained.</div>
<div class="btn">Shop Bestsellers</div>
</div>
<div class="jar"><div class="jarbody"></div><div class="dot1"></div><div class="dot2"></div></div>
</div>
<div class="sec">
<div class="secTitle">Reader Favorites</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#911a4b,#e5cb00);"></div><div class="pname">Wonder Serum</div><div class="pprice">$66</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#afb84a,#ecfab3);"></div><div class="pname">Bright Eyes Cream</div><div class="pprice">$45</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#d43747,#fff6b2);"></div><div class="pname">Superpatch Acne Dots</div><div class="pprice">$16</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#e5cb00,#911a4b);"></div><div class="pname">Send It Body Wash</div><div class="pprice">$22</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #828384; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #0081a3; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #006e52; color: #ffffff;
border: 1px solid #0081a3; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #828384; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #6cc4d5; color: #005f75;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial, sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:60px;background:#ffffff;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:700;color:#58595b;}
.navlinks span:first-child{color:#0081a3;}
.cart{font-size:12px;font-weight:700;color:#006e52;}
.hero{height:210px;background:#f0f0f0;display:flex;align-items:center;padding:0 32px;}
.heroText{width:460px;}
.h1{font-size:26px;font-weight:700;line-height:1.25;margin:0 0 10px;}
.sub{font-size:13px;color:#58595b;margin:0 0 16px;max-width:380px;}
.ctarow{display:flex;gap:10px;}
.btn{height:40px;padding:0 22px;border-radius:4px;display:flex;align-items:center;font-size:13px;font-weight:700;}
.btnT{background:#0081a3;color:#fff;}
.btnG{background:#ffffff;color:#006e52;border:1px solid #006e52;}
.cardmock{width:420px;height:170px;position:relative;}
.paper{position:absolute;width:160px;height:100px;background:#ffffff;border:1px solid #dedede;border-radius:4px;}
.p1{left:40px;top:20px;} .p2{left:80px;top:44px;background:#0081a3;}
.p3{left:120px;top:68px;background:#006e52;}
.sec{padding:18px 32px;}
.sectitle{font-size:15px;font-weight:700;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:216px;background:#ffffff;border:1px solid #dedede;border-radius:4px;overflow:hidden;}
.thumb{height:90px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;text-transform:uppercase;color:#fff;padding:2px 6px;border-radius:4px;}
.pbody{padding:10px 12px 12px;}
.ptitle{font-size:13px;font-weight:700;margin-bottom:4px;}
.pmeta{font-size:11px;color:#828384;margin-bottom:6px;}
.pprice{font-size:14px;font-weight:700;color:#0081a3;}
.footer{height:44px;background:#0081a3;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#fff;font-size:11px;}
</style>
<div class="nav">
<div class="logo">Stationeryhq</div>
<div class="navlinks"><span>Business Cards</span><span>Invitations</span><span>Notebooks</span><span>Stamps</span></div>
<div class="cart">CART (0)</div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Custom paper, printed<br>your way in days.</div>
<div class="sub">Business cards, wedding invitations and notebooks — designed online, printed with precision.</div>
<div class="ctarow"><div class="btn btnT">Design Now</div><div class="btn btnG">Track Order</div></div>
</div>
<div class="cardmock"><div class="paper p1"></div><div class="paper p2"></div><div class="paper p3"></div></div>
</div>
<div class="sec">
<div class="sectitle">Popular Products</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#f0f0f0"><div class="badge" style="background:#0081a3">Best Seller</div></div><div class="pbody"><div class="ptitle">Premium Business Cards</div><div class="pmeta">Matte or gloss, 500 qty</div><div class="pprice">$34.99</div></div></div>
<div class="card"><div class="thumb" style="background:#dedede"><div class="badge" style="background:#006e52">New</div></div><div class="pbody"><div class="ptitle">Wedding Invitation Suite</div><div class="pmeta">Custom foil, 100 qty</div><div class="pprice">$189.00</div></div></div>
<div class="card"><div class="thumb" style="background:#6cc4d5"></div><div class="pbody"><div class="ptitle">Spiral Notebook, A5</div><div class="pmeta">Dot grid, 120 pages</div><div class="pprice">$12.99</div></div></div>
<div class="card"><div class="thumb" style="background:#58595b"></div><div class="pbody"><div class="ptitle">Self-Inking Address Stamp</div><div class="pmeta">Custom engraving</div><div class="pprice">$24.99</div></div></div>
</div>
</div>
<div class="footer"><span>© Custom Print Since Day One</span><span>Support Track Order Reorder</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #262626; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #262626; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #060606; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:18px; font-weight:700; }
.navlinks { display:flex; gap:8px; align-items:center; }
.navlinks span:not(.cta) { font-size:18px; color:#000; padding:6px 14px; }
.cta { background:#262626; color:#ffffff; border-radius:9999px; padding:6px 16px; font-size:18px; }
.hero { padding:30px 32px 0; text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero h1 { font-size:36px; font-weight:500; margin:0 0 8px; letter-spacing:-0.3px; }
.hero p { font-size:16px; color:#737373; margin:0 0 18px; }
.term { width:520px; background:#ffffff; border:1px solid #e5e7eb; border-radius:9999px; padding:10px 12px;
font-family:"Courier New", monospace; font-size:14px; color:#000; text-align:left; display:flex; align-items:center; gap:8px; }
.term .dollar { color:#737373; }
.heroCta { margin-top:18px; background:#262626; color:#ffffff; border-radius:9999px; padding:12px 32px;
font-size:18px; font-weight:500; }
.body { padding:26px 32px 0; }
.grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.card { border:1px solid #e5e7eb; border-radius:12px; padding:16px; }
.card .modelname { font-family:"Courier New", monospace; font-size:14px; color:#000; margin-bottom:6px; }
.card .desc { font-size:14px; color:#737373; line-height:1.4; }
.pricingrow { display:flex; justify-content:center; gap:10px; margin-top:22px; }
.pill-outline { border:1px solid #d4d4d4; border-radius:9999px; padding:8px 24px; font-size:14px; font-weight:500; }
.pill-white { background:#ffffff; border-radius:9999px; padding:8px 24px; font-size:14px; font-weight:500; }
</style></head>
<body>
<nav>
<span class="brand">Ollama</span>
<div class="navlinks"><span>Models</span><span>Docs</span><span>Pricing</span><span class="cta">Download</span></div>
</nav>
<div class="hero">
<h1>The easiest way to build with open models</h1>
<p>Start local. Scale with cloud.</p>
<div class="term"><span class="dollar">$</span>ollama run llama3</div>
<div class="heroCta">Get started</div>
</div>
<div class="body">
<div class="grid">
<div class="card"><div class="modelname">llama3.2</div><div class="desc">A general purpose model, tuned for chat and reasoning.</div></div>
<div class="card"><div class="modelname">codeqwen</div><div class="desc">Optimized for code generation and completion tasks.</div></div>
<div class="card"><div class="modelname">gemma2</div><div class="desc">A lightweight, fast model for local inference.</div></div>
</div>
<div class="pricingrow">
<span class="pill-outline">Free</span>
<span class="pill-white">Pro</span>
<span class="pill-white">Max</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #82dc28; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #82dc28; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #446c1b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #82dc28; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #82dc28; color: #111111;
border: 1px solid #70bc24; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #446c1b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #96e24a; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#131518; box-sizing:border-box;
font-family:"Montserrat", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #ebebeb; }
.brand { font-size:19px; font-weight:700; color:#82dc28; letter-spacing:-0.2px; }
.search { width:294px; height:38px; border:1px solid #ebebeb; border-radius:5px; padding:0 14px 0 14px;
font-size:14px; color:#131518; display:flex; align-items:center; }
.navlinks { display:flex; gap:18px; font-size:13.3px; font-weight:700; color:#131518; }
.promo { padding:16px 32px 0; }
.carousel { height:140px; background:linear-gradient(120deg, #eafccc, #f4fff0); border-radius:8px;
position:relative; display:flex; align-items:center; padding:0 24px; }
.carousel h2 { font-size:22px; font-weight:700; color:#131518; margin:0; }
.carousel p { font-size:14px; color:#666666; margin:4px 0 0; }
.dots { position:absolute; right:20px; bottom:14px; display:flex; gap:6px; }
.dot { width:24px; height:24px; border-radius:12px; background:transparent; color:#888888; font-size:11px;
display:flex; align-items:center; justify-content:center; }
.dot.on { background:#2f3030; color:#fff; }
.section { padding:18px 32px 0; }
.sectitle { font-size:16px; font-weight:700; margin-bottom:12px; }
.grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; }
.card { display:flex; flex-direction:column; gap:6px; position:relative; }
.thumb { width:100%; aspect-ratio:1/1; background:#f6f6f6; border-radius:0px; position:relative; }
.zzim { position:absolute; top:6px; right:6px; width:26px; height:26px; background:#ffffff; border:1px solid #ebebeb; }
.ptitle { font-size:13px; color:#131518; }
.pprice { font-size:14px; font-weight:700; color:#131518; }
.porig { font-size:12px; color:#888888; text-decoration:line-through; margin-left:4px; }
</style></head>
<body>
<nav>
<span class="brand">Olive Young</span>
<div class="search">Search brand, product</div>
<div class="navlinks"><span>Skincare</span><span>Makeup</span><span>Wellness</span></div>
</nav>
<div class="promo">
<div class="carousel">
<div><h2>New season skincare picks</h2><p>Curated routines for every skin type</p></div>
<div class="dots"><span class="dot on">1</span><span class="dot">2</span><span class="dot">3</span></div>
</div>
</div>
<div class="section">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="zzim"></span></div><div class="ptitle">Green Tea Toner 200ml</div><div class="pprice">₩18,900<span class="porig">₩22,000</span></div></div>
<div class="card"><div class="thumb"><span class="zzim"></span></div><div class="ptitle">Vitamin C Serum</div><div class="pprice">₩24,500</div></div>
<div class="card"><div class="thumb"><span class="zzim"></span></div><div class="ptitle">Cushion Foundation</div><div class="pprice">₩32,000</div></div>
<div class="card"><div class="thumb"><span class="zzim"></span></div><div class="ptitle">Sleeping Mask 100ml</div><div class="pprice">₩15,900</div></div>
<div class="card"><div class="thumb"><span class="zzim"></span></div><div class="ptitle">Collagen Powder Stick</div><div class="pprice">₩29,000</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #50de7f; color: #121212;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #121212;
border: 1px solid #50de7f; border-radius: 12px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #50de7f; color: #121212;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dedede;}
.logo{font-size:20px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:500;}
.cta{background:#50de7f;color:#121212;font-size:16px;font-weight:600;padding:12px 24px;border-radius:12px;}
.hero{height:290px;display:flex;align-items:center;padding:0 40px;}
.herotext{width:48%;}
.hero h1{font-size:40px;font-weight:700;margin:0 0 14px;line-height:1.15;}
.hero p{font-size:16px;color:#333;margin:0 0 22px;max-width:340px;}
.herobtn{background:#50de7f;color:#121212;font-size:16px;font-weight:600;padding:14px 28px;border-radius:12px;width:fit-content;}
.heroimg{width:52%;height:220px;position:relative;background:linear-gradient(160deg,#e8f8ef,#f2fbf5);border-radius:16px;overflow:hidden;}
.tower{position:absolute;left:110px;top:20px;width:110px;height:180px;background:#f8f8f8;border:2px solid #dedede;border-radius:8px;}
.leaf{position:absolute;width:26px;height:14px;background:#50de7f;border-radius:0 12px 0 12px;}
.l1{left:120px;top:40px;} .l2{left:160px;top:60px;} .l3{left:130px;top:90px;} .l4{left:170px;top:110px;}
.label{padding:22px 40px 10px;font-size:15px;font-weight:600;}
.grid{display:flex;gap:16px;padding:0 40px;}
.card{width:200px;background:#f8f8f8;border-radius:12px;overflow:hidden;border:1px solid #dedede;}
.thumb{height:120px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#50de7f;color:#121212;font-size:11px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;border-radius:9999px;padding:3px 10px;}
.badge.harvest{background:#fec535;}
.body{padding:12px 14px;}
.pname{font-size:15px;font-weight:600;margin-bottom:4px;}
.pprice{font-size:16px;font-weight:700;}
</style>
<div class="nav">
<div class="logo">Rise Gardens</div>
<div class="navlinks"><span>Gardens</span><span>Seed Pods</span><span>Accessories</span></div>
<div class="cta">Shop Now</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Grow more, indoors, year-round.</h1>
<p>Modular indoor gardens with full-spectrum LED and self-watering reservoirs.</p>
<div class="herobtn">Shop Gardens</div>
</div>
<div class="heroimg"><div class="tower"></div><div class="leaf l1"></div><div class="leaf l2"></div><div class="leaf l3"></div><div class="leaf l4"></div></div>
</div>
<div class="label">Featured Grow Kits</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e8f8ef,#50de7f)"><div class="badge">Growing</div></div><div class="body"><div class="pname">Personal Garden 1</div><div class="pprice">$449</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#fef6dd,#fec535)"><div class="badge harvest">Ready to Harvest</div></div><div class="body"><div class="pname">Herb Seed Pod Trio</div><div class="pprice">$24</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e8f8ef,#008968)"></div><div class="body"><div class="pname">Garden Tower Frame</div><div class="pprice">$189</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ebeae4; color: #2e2d29;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ebeae4; color: #2e2d29;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #2e2d29; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #8c1515; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: transparent; color: #2e2d29;
border: 1px solid #8c1515; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2e2d29;
border: 1px solid #bcbbb5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #a1c4b1; color: #2e2d29;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ebeae4; font-family:'Source Sans 3','Source Sans Pro',Arial,sans-serif; color:#2e2d29; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-family:'Source Serif Pro',Georgia,serif;font-size:18px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:600;}
.hero{padding:24px 30px;}
.h1{font-family:'Source Serif Pro',Georgia,serif;font-size:34px;font-weight:700;line-height:1.25;margin:0 0 12px;}
.sub{font-family:'Source Serif Pro',Georgia,serif;font-size:17px;color:#53565a;margin:0 0 18px;max-width:440px;line-height:1.5;}
.btn{display:inline-block;background:#8c1515;color:#fff;font-size:16px;font-weight:600;letter-spacing:0.3px;padding:12px 24px;border-radius:4px;}
.grid{display:flex;gap:16px;padding:16px 30px 0;}
.card{width:210px;background:#fff;border-radius:4px;overflow:hidden;}
.thumb{aspect-ratio:3/4;height:150px;background:#d5d5d4;}
.pbody{padding:10px 12px;}
.title{font-size:16px;font-weight:600;line-height:1.3;}
.author{font-size:14px;color:#6b7280;margin-top:4px;}
.price{font-size:14px;font-weight:600;margin-top:6px;}
.badge{display:inline-block;margin-top:6px;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;background:#a1c4b1;padding:2px 8px;border-radius:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#2f2424;color:#dcefec;font-size:13px;display:flex;align-items:center;padding:0 30px;gap:22px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Stanford University Press</div>
<div class="navlinks"><span>Books</span><span>Subjects</span><span>Series</span><span>Blog</span></div>
</div>
<div class="hero">
<div class="h1">Scholarship that<br>commands attention.</div>
<div class="sub">Serif for reading, sans for navigating — a press that trusts its content over visual theatrics.</div>
<div class="btn">Browse All</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8c1515,#2e2d29)"></div><div class="pbody"><div class="title">The Archive of Silence</div><div class="author">by E. Whitfield</div><div class="price">$32.00</div><span class="badge">New</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a1c4b1,#2e2d29)"></div><div class="pbody"><div class="title">Field Notes on Method</div><div class="author">by R. Okafor</div><div class="price">$28.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#6aa083,#2e2d29)"></div><div class="pbody"><div class="title">Empire of Paper</div><div class="author">by J. Alcott</div><div class="price">$45.00</div></div></div>
</div>
<div class="footer"><span>About</span><span>Subjects</span><span>Connect</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffc00; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffc00; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7b09; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e6e300; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fffc00; color: #000000;
border: 1px solid #e6e300; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fffc00; color: #111111;
border: 1px solid #d9d603; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7b09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fbf800; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:"Avenir Next", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.cam { position:relative; height:100%;
background: radial-gradient(circle at 30% 20%, #2b3a2e 0%, #14201a 40%, #0a0f0c 100%); }
.hud-top { position:absolute; top:22px; left:26px; right:26px; display:flex; justify-content:space-between; align-items:center; }
.bitmoji { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#ffd166,#ef476f); box-shadow:rgba(0,0,0,.4) 0 1px 2px; }
.hud-ic { font-size:22px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.lenses { position:absolute; bottom:150px; left:0; right:0; display:flex; justify-content:center; gap:14px; }
.lens { width:60px; height:60px; border-radius:50%; border:2px solid transparent; }
.lens.active { width:72px; height:72px; border-color:#FFFC00; }
.lens-label { text-align:center; font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; margin-top:4px; }
.capture-wrap { position:absolute; bottom:26px; left:0; right:0; display:flex; justify-content:center; }
.outer { width:82px; height:82px; border-radius:50%; border:6px solid #FFFC00; display:flex; align-items:center; justify-content:center; }
.inner { width:64px; height:64px; border-radius:50%; background:#fff; }
.corner-ic { position:absolute; font-size:26px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.bl { bottom:40px; left:26px; } .br { bottom:40px; right:26px; }
.nav-strip { position:absolute; bottom:0; left:0; right:0; height:0; }
</style></head>
<body>
<div class="cam">
<div class="hud-top"><div class="bitmoji"></div><div style="font-size:13px;font-weight:800;letter-spacing:.3px;text-shadow:0 1px 2px rgba(0,0,0,.4);">Snapchat (iOS)</div><div class="hud-ic">🔍</div></div>
<div class="corner-ic bl">🖼</div>
<div class="corner-ic br">💬</div>
<div class="lenses">
<div><div class="lens" style="background:linear-gradient(135deg,#9be,#57a);"></div></div>
<div><div class="lens active" style="background:linear-gradient(135deg,#fc9,#f69);"></div><div class="lens-label" style="color:#FFFC00;">Beach</div></div>
<div><div class="lens" style="background:linear-gradient(135deg,#bf9,#5a7);"></div></div>
<div><div class="lens" style="background:linear-gradient(135deg,#f9c,#a5e);"></div></div>
</div>
<div class="capture-wrap"><div class="outer"><div class="inner"></div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111827;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111827;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #111827; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 500; line-height: 1.25; background: #e8a983; color: #000000;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 500; line-height: 1.25; background: #ffffff; color: #6d93c9;
border: 1px solid #e8a983; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.63; background: #ffffff; color: #374151;
border: 1px solid #c4c5c9; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 600; line-height: 1.27; letter-spacing: 0.5px; background: #c7315f; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Gilroy',-apple-system,sans-serif; color:#374151; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e5e7eb;}
.logo{font-size:20px;font-weight:600;color:#111827;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:500;color:#6b7280;}
.navlinks .active{color:#e8a983;border-bottom:2px solid #e8a983;padding-bottom:6px;}
.hero{height:180px;background:#fff4ee;display:flex;align-items:center;padding:0 34px;}
.herotext{max-width:420px;}
.herotext h1{font-size:28px;font-weight:600;color:#111827;margin:0 0 8px;line-height:1.3;}
.herotext p{font-size:15px;color:#374151;margin:0 0 16px;}
.herocta{display:inline-block;background:#e8a983;color:#fff;font-size:16px;font-weight:500;padding:14px 28px;border-radius:8px;}
.grid{display:flex;gap:16px;padding:22px 34px 0;}
.card{width:216px;background:#fff;border-radius:20px;padding:16px;box-shadow:0px 2px 8px rgba(17,24,39,0.08);position:relative;}
.thumb{height:110px;border-radius:12px;margin-bottom:10px;}
.badge{position:absolute;top:22px;left:22px;background:#c7315f;color:#fff;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:4px 8px;border-radius:8px;}
.ptitle{font-size:16px;font-weight:500;color:#111827;}
.pprice{font-size:16px;font-weight:600;color:#111827;margin-top:4px;}
.stars{color:#03b2cb;font-size:14px;margin-top:2px;}
</style>
<div class="nav">
<div class="logo">Nexwear</div>
<div class="navlinks"><div class="active">Mobility</div><div>Bathroom Safety</div><div>Daily Living</div><div>Care Support</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Every touch, deliberate.<br>Every interaction, generous.</h1>
<p>Thoughtfully designed elder care essentials for calmer, safer days.</p>
<div class="herocta">Shop Mobility</div>
</div>
</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(160deg,#e8a983,#6d93c9)"></div><div class="ptitle">Foldable Walking Cane</div><div class="pprice">$34.00</div><div class="stars">★★★★★</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#6d93c9,#3d3e7c)"></div><div class="ptitle">Bathroom Safety Rail Kit</div><div class="pprice">$59.00</div><div class="stars">★★★★★</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#3d3e7c,#e8a983)"></div><div class="ptitle">Easy-Grip Utensil Set</div><div class="pprice">$22.00</div><div class="stars">★★★★☆</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; font-weight: 700; line-height: 1.2; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #3a6aaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #abb837; color: #000000;
border: none; border-radius: 8px; padding: 13px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #204a80;
border: 1px solid #abb837; border-radius: 8px;
padding: 11px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #3a6aaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #abb837; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:36px; background:#121212; color:#ffffff; display:flex; align-items:center;
justify-content:center; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; }
nav { height:64px; background:#204a80; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; }
.logo { color:#ffffff; font-family:Georgia,serif; font-weight:700; font-size:19px; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; color:#ffffff; }
.navlinks .on { border-bottom:2px solid #abb837; padding-bottom:4px; }
.navicons { display:flex; gap:16px; color:#ffffff; font-size:15px; }
main { display:flex; height:452px; }
.shot { width:400px; position:relative; overflow:hidden; }
.shot::before { content:''; position:absolute; inset:0;
background:
radial-gradient(circle at 35% 25%, rgba(171,184,55,0.30), transparent 55%),
linear-gradient(155deg, #eef1e8 0%, #d8dfd0 100%); }
.tool { position:absolute; left:120px; top:70px; width:16px; height:230px; border-radius:8px;
background:linear-gradient(90deg,#7d5a3a,#a8804f); transform:rotate(-8deg); box-shadow:0 12px 24px rgba(0,0,0,0.2); }
.tool-head { position:absolute; left:88px; top:52px; width:80px; height:52px; border-radius:6px 6px 24px 24px;
background:linear-gradient(160deg,#c9ced2,#8b9298); transform:rotate(-8deg); box-shadow:0 10px 18px rgba(0,0,0,0.22); }
.badge-cat { position:absolute; top:16px; left:16px; background:#abb837; color:#ffffff; font-size:11px;
font-weight:700; letter-spacing:0.6px; text-transform:uppercase; border-radius:4px; padding:4px 10px; }
.info { flex:1; display:flex; flex-direction:column; padding:26px 36px; }
.crumb { font-size:12px; color:#5e5e5e; margin-bottom:10px; }
.crumb b { color:#121212; }
.name { font-family:Georgia,serif; font-size:30px; font-weight:700; letter-spacing:-0.3px; line-height:1.2; margin:0 0 10px; }
.desc { font-size:14px; color:#2d2d2d; line-height:1.5; margin:0 0 16px; max-width:420px; }
.price { font-family:Georgia,serif; font-size:22px; font-weight:700; margin-bottom:18px; }
.field { margin-bottom:16px; }
.lbl { font-size:11px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:#5e5e5e; margin-bottom:8px; }
.opts { display:flex; gap:10px; }
.opt { padding:9px 16px; border:2px solid #204a80; border-radius:8px; font-size:14px; font-weight:600; color:#204a80; }
.opt.active { background:#204a80; color:#ffffff; }
.cta { margin-top:auto; display:flex; gap:12px; }
.btn-add { flex:1; background:#abb837; color:#ffffff; border:none; border-radius:8px; height:48px;
font-size:15px; font-weight:600; letter-spacing:0.3px; }
.btn-outline { padding:0 22px; height:48px; border-radius:8px; border:2px solid #204a80; color:#204a80;
background:#ffffff; font-size:15px; font-weight:600; }
.trust { display:flex; gap:0; padding:16px 40px; background:#f6f6f4; }
.trust div { flex:1; display:flex; align-items:center; gap:10px; font-size:13px; color:#121212; }
.trust span { color:#abb837; font-size:18px; }
footer { background:#121212; color:#dedede; padding:14px 40px; display:flex; justify-content:space-between;
align-items:center; font-size:12px; }
footer b { color:#abb837; }
</style></head>
<body>
<div class="topbar">Sheffield Steel Since 1730 — Free UK Delivery Over £45</div>
<nav>
<div class="logo">Burgon And Ball</div>
<div class="navlinks"><span class="on">Borders</span><span>Digging</span><span>Harvesting</span><span>Planting</span></div>
<div class="navicons">⌕ ♡ ⛃</div>
</nav>
<main>
<div class="shot">
<span class="badge-cat">RHS Collection</span>
<div class="tool-head"></div>
<div class="tool"></div>
</div>
<div class="info">
<div class="crumb">Digging <b>/ Border Spade</b></div>
<h1 class="name">Stainless Border Spade, Ash Handle</h1>
<p class="desc">Forged Sheffield stainless steel head fitted to an FSC-certified ash shaft — built for narrow beds and precise border work that lasts generations, not seasons.</p>
<div class="price">£64.95</div>
<div class="field">
<div class="lbl">Handle Length</div>
<div class="opts"><span class="opt">Short</span><span class="opt active">Standard</span><span class="opt">Long</span></div>
</div>
<div class="cta">
<button class="btn-add">Add to Basket</button>
<button class="btn-outline">Compare</button>
</div>
</div>
</main>
<div class="trust">
<div><span>⚒</span>Forged in Sheffield</div>
<div><span>🌿</span>RHS Partner Collection</div>
<div><span>↺</span>25-Year Guarantee</div>
</div>
<footer>
<span>© Burgon And Ball</span>
<span><b>Est. 1730</b> · Sheffield, England</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #cc0000; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #313131;
border: 1px solid #cc0000; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #cc0000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:Arial, 'Helvetica Neue', Helvetica, -apple-system, system-ui, sans-serif; }
* { box-sizing:border-box; }
.announce { height:22px; background:#222222; color:#ffffff; font-size:11px; letter-spacing:0.2px;
display:flex; align-items:center; justify-content:center; }
nav.top { height:52px; border-bottom:1px solid #e0e0e0; display:flex; align-items:center;
padding:0 24px; gap:20px; }
.logo { font-size:20px; font-weight:700; letter-spacing:-0.5px; color:#313131; white-space:nowrap; }
.search { flex:1; height:32px; border:2px solid #e0e0e0; border-radius:4px; display:flex; align-items:center;
padding:0 0 0 12px; color:#767676; font-size:13px; }
.search span.go { margin-left:auto; height:32px; width:44px; background:#cc0000; color:#fff;
display:flex; align-items:center; justify-content:center; border-radius:0 3px 3px 0; font-weight:700; font-size:12px; }
.navlinks { display:flex; gap:14px; font-size:11px; font-weight:700; color:#313131; white-space:nowrap; }
.crumbs { padding:8px 24px 0; font-size:11px; color:#767676; }
.crumbs b { color:#313131; }
main { display:flex; padding:12px 24px 0; gap:28px; height:456px; }
.gallery { width:400px; display:flex; flex-direction:column; gap:8px; }
.frame-main { flex:1; border:1px solid #f0f0f0; position:relative;
background:
linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.0) 60%),
radial-gradient(circle at 30% 20%, #e08a2b, transparent 55%),
radial-gradient(circle at 75% 70%, #2b5f8a, transparent 55%),
linear-gradient(160deg, #1a1a2e, #16213e 60%, #0f3460); }
.frame-main::before { content:'MOVIE STILL PRINT'; position:absolute; bottom:10px; left:10px;
background:rgba(255,255,255,0.92); color:#313131; font-size:10px; font-weight:700; padding:3px 7px; letter-spacing:0.3px; }
.sale-badge { position:absolute; top:0; left:0; background:#cc0000; color:#fff; font-size:11px; font-weight:700;
letter-spacing:0.3px; text-transform:uppercase; padding:3px 8px; }
.thumbs { display:flex; gap:6px; }
.thumbs div { width:60px; height:44px; border:1px solid #e0e0e0; background:#f7f7f7; }
.thumbs div:nth-child(1) { background:linear-gradient(160deg,#1a1a2e,#0f3460); }
.thumbs div:nth-child(2) { background:linear-gradient(160deg,#0f3460,#e08a2b); }
.thumbs div:nth-child(3) { background:linear-gradient(160deg,#2b5f8a,#1a1a2e); }
.thumbs div:nth-child(4) { background:#eeeeee; }
.info { flex:1; display:flex; flex-direction:column; }
.title { font-size:20px; font-weight:700; line-height:1.3; margin:0 0 4px; }
.sub { font-size:12px; color:#767676; margin-bottom:8px; }
.stars { font-size:12px; color:#f5a623; display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.stars span.count { color:#767676; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.price { font-size:26px; font-weight:700; color:#cc0000; }
.was { font-size:13px; color:#767676; text-decoration:line-through; }
.save { font-size:11px; font-weight:700; color:#fff; background:#cc0000; padding:2px 6px; }
.field { margin-bottom:12px; }
.field label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px;
color:#313131; margin-bottom:6px; }
.pills { display:flex; gap:8px; flex-wrap:wrap; }
.pill { border:1px solid #e0e0e0; border-radius:999px; padding:6px 14px; font-size:12px; font-weight:700; color:#313131; }
.pill.active { background:#cc0000; color:#fff; border-color:#cc0000; }
.swatch { border:2px solid #e0e0e0; padding:5px 12px; font-size:11px; font-weight:700; }
.swatch.active { border-color:#cc0000; color:#cc0000; }
.cta { margin-top:auto; display:flex; gap:8px; }
.btn-cart { flex:1; background:#cc0000; color:#fff; border:none; border-radius:4px; height:44px;
font-size:14px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
.btn-save { width:44px; height:44px; border:1px solid #e0e0e0; border-radius:4px; display:flex;
align-items:center; justify-content:center; font-size:16px; color:#313131; }
.trust { display:flex; gap:16px; margin-top:12px; font-size:11px; color:#767676; }
.trust b { color:#313131; }
footer { border-top:1px solid #e0e0e0; margin-top:10px; padding:10px 24px; display:flex;
justify-content:space-between; font-size:11px; color:#767676; background:#222222; color:#cccccc; }
footer b { color:#fff; }
</style></head>
<body>
<div class="announce">FREE SHIPPING ON ORDERS OVER $79 · 500,000+ PRINTS IN STOCK</div>
<nav class="top">
<div class="logo">Allposters</div>
<div class="search">Search movies, art, photos, and more…<span class="go">GO</span></div>
<div class="navlinks"><span>MOVIES</span><span>MUSIC</span><span>FINE ART</span><span>PHOTOGRAPHY</span></div>
</nav>
<div class="crumbs">Home › Movies › Sci-Fi › <b>Nebula Drift (2019)</b></div>
<main>
<div class="gallery">
<div class="frame-main"><span class="sale-badge">SALE</span></div>
<div class="thumbs"><div></div><div></div><div></div><div></div></div>
</div>
<div class="info">
<p class="sub">MOVIE POSTER</p>
<h1 class="title">Nebula Drift — Regular Style Print</h1>
<div class="stars">★★★★★ <span class="count">(1,204 reviews)</span></div>
<div class="price-row">
<span class="price">$24.99</span>
<span class="was">$34.99</span>
<span class="save">SAVE 29%</span>
</div>
<div class="field">
<label>Size</label>
<div class="pills">
<span class="pill">11x17</span>
<span class="pill active">24x36</span>
<span class="pill">27x40</span>
</div>
</div>
<div class="field">
<label>Format</label>
<div class="pills">
<span class="swatch active">Poster</span>
<span class="swatch">Framed</span>
<span class="swatch">Canvas</span>
</div>
</div>
<div class="cta">
<button class="btn-cart">Add to Cart</button>
<div class="btn-save">♡</div>
</div>
<div class="trust"><span><b>Ships in 1–2 days</b></span><span><b>Satisfaction guaranteed</b></span></div>
</div>
</main>
<footer>
<span>© Allposters</span>
<span>Help · Track Order · Returns</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a1a1a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a1a1a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #929292; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2a2a2a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: 1px solid #2a2a2a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a1a1a; color: #f5f5f5;
border: 1px solid #3d3d3d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929292; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1d1d1d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1A1A1A; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:Georgia, "Times New Roman", Times, serif; }
.mono { font-variant-numeric:tabular-nums; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:20px; font-weight:700; margin:0; }
.brand.serif { letter-spacing:0.2px; }
.navr span { font-size:12px; color:#B0B0B0; margin-left:20px; }
main { display:flex; height:calc(640px - 52px - 54px); padding:6px 32px 0; gap:36px; }
/* left: the player, Audible's actual home surface */
.player { width:360px; text-align:center; }
.coverwrap { position:relative; width:210px; height:210px; margin:6px auto 14px; border-radius:50%;
background:conic-gradient(#FF9900 0deg 252deg, #3A3A3A 252deg 360deg);
display:flex; align-items:center; justify-content:center; }
.cover { width:186px; height:186px; border-radius:10px; box-shadow:rgba(0,0,0,0.4) 0 6px 16px;
background:linear-gradient(150deg,#7a3d0a,#c96a12 60%,#FF9900); }
.booktitle { font-size:22px; font-weight:700; margin:2px 0 2px; }
.author { font-size:13px; color:#B0B0B0; margin:0 0 1px; }
.narrator { font-size:12px; color:#B0B0B0; font-weight:600; margin:0 0 14px; }
.transport { display:flex; align-items:center; justify-content:center; gap:26px; margin-bottom:12px; }
.skip { font-size:12px; font-weight:700; color:#FFFFFF; }
.play { width:58px; height:58px; border-radius:50%; background:#FF9900; color:#1A1A1A;
display:flex; align-items:center; justify-content:center; font-size:20px;
box-shadow:rgba(255,153,0,0.28) 0 6px 22px; }
.scrub { height:3px; background:#3A3A3A; border-radius:2px; margin:0 8px 6px; position:relative; }
.scrub::after { content:''; position:absolute; left:0; top:0; bottom:0; width:38%; background:#FF9900; border-radius:2px; }
.timerow { display:flex; justify-content:space-between; font-size:11px; color:#B0B0B0; padding:0 8px; }
.speedpill { display:inline-block; margin-top:14px; font-size:12px; font-weight:700; color:#FF9900;
background:rgba(255,153,0,0.12); padding:5px 14px; border-radius:8px; }
/* right: chapter list */
.chapters { flex:1; padding-top:4px; }
.chaphead { font-size:12px; font-weight:700; letter-spacing:0.4px; color:#B0B0B0; text-transform:uppercase; margin:0 0 10px; }
.chrow { display:flex; align-items:center; padding:11px 0; border-bottom:1px solid #3A3A3A; }
.chnum { width:22px; font-size:12px; color:#6E6E6E; }
.chinfo { flex:1; }
.chname { font-size:14px; font-weight:600; }
.chname.active { color:#FF9900; }
.chbar { width:3px; align-self:stretch; background:#FF9900; margin-right:10px; border-radius:2px; }
.chdur { font-size:12px; color:#B0B0B0; }
.chcheck { color:#FF9900; font-size:12px; margin-right:6px; }
footer { height:54px; border-top:1px solid #3A3A3A; margin:0 32px; padding-top:9px;
display:flex; align-items:center; gap:12px; }
.mini-cover { width:34px; height:34px; border-radius:6px; background:linear-gradient(150deg,#7a3d0a,#FF9900); }
.mini-t { font-size:12px; font-weight:700; }
.mini-a { font-size:10px; color:#B0B0B0; }
.foot-actions { margin-left:auto; font-size:11px; color:#B0B0B0; }
</style></head>
<body>
<nav>
<p class="brand serif">Audible (iOS)</p>
<div class="navr"><span>Home</span><span>Library</span><span>Discover</span></div>
</nav>
<main>
<div class="player">
<div class="coverwrap"><div class="cover"></div></div>
<p class="booktitle serif">Circe</p>
<p class="author">By Madeline Miller</p>
<p class="narrator">Narrated by Perdita Weeks</p>
<div class="transport">
<span class="skip">-30</span>
<div class="play">▶</div>
<span class="skip">+30</span>
</div>
<div class="scrub"></div>
<div class="timerow mono"><span>5:12:40</span><span>1.5×</span><span>-6:47:20</span></div>
<span class="speedpill">1.5× speed</span>
</div>
<div class="chapters">
<p class="chaphead">Chapters</p>
<div class="chrow"><div class="chbar" style="background:transparent"></div><span class="chnum mono">01</span>
<div class="chinfo"><span class="chname">A Daughter of Helios</span></div><span class="chdur mono">✓ 24:12</span></div>
<div class="chrow"><div class="chbar"></div><span class="chnum mono">02</span>
<div class="chinfo"><span class="chname active">The Halls of the Sun</span></div><span class="chdur mono">18:04</span></div>
<div class="chrow"><div class="chbar" style="background:transparent"></div><span class="chnum mono">03</span>
<div class="chinfo"><span class="chname">Glass and Stone</span></div><span class="chdur mono">21:47</span></div>
<div class="chrow"><div class="chbar" style="background:transparent"></div><span class="chnum mono">04</span>
<div class="chinfo"><span class="chname">A House of Herbs</span></div><span class="chdur mono">19:58</span></div>
<div class="chrow" style="border-bottom:none"><div class="chbar" style="background:transparent"></div><span class="chnum mono">05</span>
<div class="chinfo"><span class="chname">The Voice of Zeus</span></div><span class="chdur mono">26:31</span></div>
</div>
</main>
<footer>
<div class="mini-cover"></div>
<div><div class="mini-t">Circe · Ch. 2</div><div class="mini-a">Audible (iOS)</div></div>
<span class="foot-actions">-30 ▶ +30</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ee1e3a; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #1a1a1a;
border: 1px solid #ee1e3a; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.8px; background: #ee1e3a; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #eee;}
.logo{font-size:20px;font-weight:700;color:#1a1a1a;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:700;color:#1a1a1a;}
.navlinks .on{border-bottom:2px solid #ee1e3a;padding-bottom:18px;}
.hero{height:260px;background:#1a1a1a;display:flex;align-items:center;padding:0 36px;color:#fff;}
.left{width:440px;}
.h1{font-size:32px;font-weight:700;line-height:1.2;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.6;color:#c9c9c9;max-width:340px;margin:0 0 18px;}
.model{font-family:'Courier New',Courier,monospace;font-size:12px;color:#f7a0aa;margin-bottom:14px;}
.cta{display:inline-block;background:#ee1e3a;color:#fff;font-size:14px;font-weight:700;padding:12px 26px;}
.right{flex:1;position:relative;height:180px;}
.tv{position:absolute;right:60px;top:0;width:220px;height:130px;background:#000;border:6px solid #2a2a2a;}
.tvstand{position:absolute;right:150px;top:130px;width:40px;height:16px;background:#2a2a2a;}
.sec{padding:20px 36px 0;}
.seclabel{font-size:16px;font-weight:700;margin-bottom:12px;}
.spectable{display:flex;border-top:1px solid #eee;margin-bottom:16px;}
.speccol{flex:1;padding:8px 0;border-bottom:1px solid #eee;font-size:12px;}
.speccol:nth-child(odd){background:#f5f5f5;}
.grid{display:flex;gap:14px;}
.card{width:210px;border:1px solid #eee;padding:10px;}
.thumb{aspect-ratio:4/3;background:#f5f5f5;margin-bottom:8px;}
.ptitle{font-size:14px;font-weight:700;margin:0 0 2px;}
.pmodel{font-family:'Courier New',Courier,monospace;font-size:11px;color:#888;margin-bottom:6px;}
.pprice{font-size:14px;color:#ee1e3a;font-weight:700;}
</style>
<div class="nav">
<div class="logo">Sharp</div>
<div class="navlinks"><div class="on">TVs</div><div>Appliances</div><div>Solar</div><div>Support</div></div>
</div>
<div class="hero">
<div class="left">
<div class="model">MODEL: AQUOS-8K-65</div>
<div class="h1">Engineered to last.</div>
<div class="sub">Precision over persuasion — the red operates at single points of commitment only.</div>
<div class="cta">Shop TVs</div>
</div>
<div class="right"><div class="tv"></div><div class="tvstand"></div></div>
</div>
<div class="sec">
<div class="seclabel">AQUOS 8K Specifications</div>
<div class="spectable">
<div class="speccol">Panel: Mini-LED</div>
<div class="speccol">Refresh: 120Hz</div>
<div class="speccol">HDMI: 4x 2.1</div>
<div class="speccol">Warranty: 3yr</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a1a1a,#ee1e3a)"></div><div class="ptitle">AQUOS 8K 65"</div><div class="pmodel">4T-C65EQ1</div><div class="pprice">$1,899</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a1a1a,#f5f5f5)"></div><div class="ptitle">Countertop Microwave</div><div class="pmodel">SMC1655</div><div class="pprice">$149</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a1a1a,#c91530)"></div><div class="ptitle">Plasmacluster Air Purifier</div><div class="pmodel">FP-J60UW</div><div class="pprice">$299</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00a3ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00a3ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a3ff; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00a3ff; color: #f5f5f5;
border: 1px solid #27b0fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e99fd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#f0f0f0; box-sizing:border-box;
font-family:"Inter", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid rgba(214,235,253,0.12); }
.brand { font-size:16px; font-weight:600; color:#f0f0f0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; color:#a1a4a5; }
.cta { border:1px solid rgba(214,235,253,0.19); border-radius:9999px; padding:5px 16px; font-size:14px; color:#f0f0f0; }
.hero { padding:44px 32px 20px; text-align:center; }
.hero h1 { font-family:"Domaine Display", Georgia, serif; font-size:52px; font-weight:400; letter-spacing:-1.2px;
line-height:1; margin:0 0 16px; color:#f0f0f0; }
.hero p { font-size:15px; color:#a1a4a5; margin:0 0 22px; max-width:460px; margin-left:auto; margin-right:auto; }
.herobtns { display:flex; gap:10px; justify-content:center; }
.btn-primary { background:#00a3ff; color:#ffffff; border-radius:4px; padding:10px 20px; font-size:14px; font-weight:600; }
.btn-outline { border:1px solid rgba(214,235,253,0.19); color:#f0f0f0; border-radius:9999px; padding:9px 20px; font-size:14px; }
.codepanel { margin:0 32px 24px; background:#0d0d0d; border:1px solid rgba(214,235,253,0.12); border-radius:16px; padding:20px; }
.codepanel .tabs { display:flex; gap:8px; margin-bottom:12px; }
.codetab { font-size:12px; color:#a1a4a5; padding:5px 12px; border-radius:16px; }
.codetab.active { background:rgba(214,235,253,0.19); color:#f0f0f0; }
.codeline { font-family:monospace; font-size:12px; color:#d6ebfd; line-height:1.9; }
.codeline .kw { color:#00a3ff; }
.codeline .str { color:#9fe6a0; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,0.06); }
.feat { background:#000; padding:22px; }
.feat h3 { font-family:"ABC Favorit", sans-serif; font-size:18px; font-weight:400; margin:0 0 8px; color:#f0f0f0; }
.feat p { font-size:13px; color:#a1a4a5; line-height:1.6; margin:0; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid rgba(214,235,253,0.12); padding:12px 32px;
display:flex; justify-content:space-between; font-size:12px; color:#4a4a4a; }
</style></head>
<body style="position:relative">
<nav>
<span class="brand">Resend</span>
<div class="navlinks"><span>Product</span><span>Docs</span><span>Pricing</span><span>Changelog</span></div>
<span class="cta">Sign in</span>
</nav>
<section class="hero">
<h1>Email for developers</h1>
<p>The best way to reach humans instead of spam folders — build, test, and deliver emails at scale.</p>
<div class="herobtns">
<span class="btn-primary">Start building</span>
<span class="btn-outline">Read the docs</span>
</div>
</section>
<div class="codepanel">
<div class="tabs"><span class="codetab active">index.ts</span><span class="codetab">curl</span><span class="codetab">python</span></div>
<div class="codeline"><span class="kw">import</span> { Resend } <span class="kw">from</span> <span class="str">'resend'</span>;</div>
<div class="codeline"><span class="kw">const</span> resend = <span class="kw">new</span> Resend(process.env.API_KEY);</div>
<div class="codeline">resend.emails.send({ from: <span class="str">'[email protected]'</span>, to: <span class="str">'[email protected]'</span> });</div>
</div>
<div class="features">
<div class="feat"><h3>Audiences</h3><p>Manage subscriber lists and segment your sends with precision.</p></div>
<div class="feat"><h3>Automations</h3><p>Trigger sequences on events without leaving your codebase.</p></div>
<div class="feat"><h3>Broadcasts</h3><p>Send one-off campaigns to thousands of contacts in seconds.</p></div>
</div>
<footer>
<span>© Resend</span>
<span>Product · Docs · Pricing · Changelog</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #161414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #161414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #161414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #003399; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #003399;
border: 1px solid #003399; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #383d41;
border: 1px solid #c5c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #e71c42; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#383d41; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#003399; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:20px; font-weight:700; color:#fff; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:#fff; }
.search-box { width:200px; height:32px; border-radius:8px; background:#fff; color:#888888; font-size:12px; display:flex;
align-items:center; padding:0 12px; }
.hero { height:170px; background:#ececf6; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.hero h1 { font-size:30px; font-weight:700; color:#161414; margin:0 0 8px; letter-spacing:-0.5px; max-width:420px; }
.hero p { font-size:14px; color:#888888; margin:0 0 14px; }
.btn-blue { display:inline-block; background:#003399; color:#fff; font-size:16px; font-weight:600; padding:12px 26px; border-radius:8px; }
.disc-stack { display:flex; }
.disc { width:80px; height:80px; border-radius:50%; background:radial-gradient(circle,#161414 0 20%, #f18e7e 21% 40%, #161414 41% 100%); margin-left:-24px; border:3px solid #ececf6; }
.disc:first-child { margin-left:0; }
.grid { display:flex; gap:16px; padding:18px 36px 0; }
.card { flex:1; background:#ffffff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); overflow:hidden; position:relative; }
.card .art { height:96px; background:linear-gradient(150deg,#003399,#161414); border-radius:12px 12px 0 0; }
.badge { position:absolute; top:10px; left:10px; background:#e71c42; color:#fff; font-size:11px; font-weight:700;
text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.card .body { padding:12px 14px; }
.card .title { font-size:18px; font-weight:600; color:#161414; margin-bottom:4px; }
.card .price { font-size:16px; color:#383d41; }
footer { position:absolute; bottom:0; left:0; right:0; height:100px; background:#ececf6; display:flex;
align-items:center; justify-content:space-between; padding:0 40px; }
footer .col { font-size:12px; color:#888888; line-height:1.9; }
footer .col b { display:block; color:#161414; margin-bottom:3px; }
.wrap { position:relative; height:640px; }
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="brand">Domino Mart</div>
<div class="navlinks"><span>Shop</span><span>Artists</span><span>About</span><span>Help</span></div>
<div class="search-box">Search catalog...</div>
</nav>
<div class="hero">
<div>
<h1>The label shop for record collectors.</h1>
<p>Vinyl, merch, and imprint deep-cuts, curated by people who actually listen.</p>
<a class="btn-blue">Browse Catalog</a>
</div>
<div class="disc-stack"><div class="disc"></div><div class="disc"></div><div class="disc"></div></div>
</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="art"></div><div class="body"><div class="title">Night Bloom LP</div><div class="price">$28.00</div></div></div>
<div class="card"><div class="art"></div><div class="body"><div class="title">Static Choir 7"</div><div class="price">$14.00</div></div></div>
<div class="card"><span class="badge">Sale</span><div class="art"></div><div class="body"><div class="title">Domino Tee, Navy</div><div class="price">$32.00</div></div></div>
<div class="card"><div class="art"></div><div class="body"><div class="title">Field Notes Boxset</div><div class="price">$64.00</div></div></div>
</div>
<footer>
<div class="col"><b>Shop</b>Vinyl<br>Merch</div>
<div class="col"><b>Artists</b>Roster<br>Imprints</div>
<div class="col"><b>Domino Mart</b>© The catalog is the star.</div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f3f3; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f3f3; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.35; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #07529d; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #121212;
border: 1px solid #07529d; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #bbbbbb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.17; letter-spacing: 0.3px; background: #fff3d6; color: #242833;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f3f3f3; font-family:Assistant,Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#fff;border-bottom:1px solid #e4e4e4;}
.logo{font-size:19px;font-weight:700;color:#121212;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#242833;}
.navlinks span:first-child{color:#07529d;border-bottom:2px solid #07529d;padding-bottom:18px;}
.hero{height:250px;display:flex;background:#fff;}
.herotext{width:46%;padding:0 36px;display:flex;flex-direction:column;justify-content:center;}
h1{font-size:30px;font-weight:700;margin:0 0 12px;line-height:1.25;}
.sub{font-size:14px;color:#242833;margin:0 0 18px;max-width:300px;}
.cta{display:inline-block;background:#07529d;color:#fff;font-size:14px;font-weight:700;padding:13px 26px;border-radius:8px;width:fit-content;}
.heroimg{width:54%;position:relative;background:#f3f3f3;}
.piece{position:absolute;background:linear-gradient(135deg,#07529d,#ffc863);border-radius:8px;}
.p1{width:90px;height:90px;left:90px;top:40px;transform:rotate(-6deg);}
.p2{width:70px;height:70px;left:180px;top:100px;transform:rotate(10deg);background:linear-gradient(135deg,#ffc863,#07529d);}
.p3{width:60px;height:60px;left:110px;top:140px;transform:rotate(4deg);background:#242833;}
.sec{padding:18px 36px 0;}
.sectitle{font-size:17px;font-weight:700;margin-bottom:14px;}
.stars{color:#ffc863;font-size:14px;margin-bottom:8px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.06);}
.thumb{height:100px;background:#e4e4e4;}
.cardbody{padding:10px;}
.pname{font-size:13px;font-weight:700;margin-bottom:3px;}
.pprice{font-size:13px;color:#242833;}
</style>
<div class="nav">
<div class="logo">Liberty Puzzles</div>
<div class="navlinks"><span>Puzzles</span><span>New Releases</span><span>Gift Guide</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Puzzles worth framing.</h1>
<div class="sub">Thick-cut maple and hand-painted whimsy, designed for adults who finish what they start.</div>
<div class="cta">Shop Puzzles</div>
</div>
<div class="heroimg"><div class="piece p3"></div><div class="piece p2"></div><div class="piece p1"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="stars">★★★★★</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="pname">Autumn Orchard, 500pc</div><div class="pprice">$59.00</div></div></div>
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="pname">Coastal Map, 1000pc</div><div class="pprice">$89.00</div></div></div>
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="pname">Botanical Study, 250pc</div><div class="pprice">$45.00</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #323237; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #323237; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #080809; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:'Graphik','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; overflow:hidden; background:#000000; }
nav { height:60px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; background:#000000; border-bottom:1px solid rgba(255,255,255,0.08); }
.navleft { display:flex; align-items:center; gap:12px; }
.gmark { width:26px; height:26px; border-radius:7px; background:#0074ff; position:relative; }
.gmark::after { content:''; position:absolute; left:5px; top:5px; width:10px; height:10px; border-radius:50%;
background:#28c3ff; }
.brand { font-size:16px; font-weight:700; letter-spacing:-0.2px; color:#ffffff; margin:0; }
.navright { display:flex; align-items:center; gap:12px; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; color:#b9bcbf; margin-right:6px; }
.btn-account { background:#2b96ed; color:#ffffff; border:none; border-radius:12px; padding:0 18px; height:34px;
font-size:13px; font-weight:600; }
main { flex:1 1 auto; display:flex; overflow:hidden; }
.stage { width:540px; flex:0 0 auto; padding:34px 40px; display:flex; flex-direction:column; gap:12px;
position:relative; overflow:hidden; background:#000000; }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#737d82; }
.stage h1 { font-size:52px; font-weight:700; line-height:1.03; letter-spacing:-1.6px; margin:2px 0 0; color:#ffffff; }
.stage .sub { font-size:20px; font-weight:700; letter-spacing:-0.3px; color:#28c3ff; margin:0; }
.ctarow { display:flex; gap:12px; margin-top:10px; }
.btn-marketing { background:#0074ff; color:#ffffff; border:none; border-radius:12px; padding:14px 26px;
font-weight:600; font-size:15px; }
.btn-outline { background:transparent; color:#ffffff; border:1px solid rgba(255,255,255,0.4); border-radius:12px;
padding:14px 26px; font-weight:600; font-size:15px; }
.rig { flex:1 1 auto; position:relative; margin-top:6px; }
.glow { position:absolute; left:60px; bottom:18px; width:260px; height:120px; border-radius:50%;
background:radial-gradient(closest-side, rgba(0,116,255,0.35), rgba(0,116,255,0)); }
.scooter { position:absolute; left:40px; bottom:52px; width:340px; height:74px; border-radius:38px;
background:linear-gradient(100deg,#1c1e21,#323237); transform:rotate(-3deg); }
.scooter::before { content:''; position:absolute; right:36px; top:-46px; width:70px; height:60px; border-radius:16px;
background:linear-gradient(160deg,#2a2c30,#141719); transform:rotate(-3deg); }
.wheel { position:absolute; bottom:22px; width:58px; height:58px; border-radius:50%; background:#101214;
border:6px solid #45474a; }
.wheel.front { left:58px; }
.wheel.back { left:296px; }
.wheel::after { content:''; position:absolute; inset:14px; border-radius:50%; background:#28c3ff; opacity:0.55; }
.panel { flex:1 1 auto; background:#f6f6f6; color:#323237; padding:26px 30px; display:flex; flex-direction:column;
gap:16px; overflow:hidden; }
.panelhead { display:flex; align-items:center; justify-content:space-between; }
.panelhead h2 { font-size:19px; font-weight:700; margin:0; letter-spacing:-0.2px; }
.livepill { display:flex; align-items:center; gap:6px; background:#ffffff; border:1px solid #dee2e6; border-radius:999px;
padding:5px 12px; font-size:11px; font-weight:600; color:#737d82; }
.livedot { width:7px; height:7px; border-radius:50%; background:#28c3ff; }
.map { position:relative; height:216px; border-radius:16px; background:
radial-gradient(circle,#dee2e6 1.4px,transparent 1.4px) 0 0/18px 18px, #ffffff;
border:1px solid #dee2e6; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.08); }
.pin { position:absolute; width:14px; height:14px; border-radius:50%; background:#0074ff; border:3px solid #ffffff;
box-shadow:0 1px 4px rgba(0,0,0,0.25); }
.pin.sel { background:#28c3ff; width:18px; height:18px; }
.card-pop { position:absolute; background:#ffffff; border-radius:12px; padding:10px 14px; box-shadow:0 4px 16px rgba(0,0,0,0.14);
display:flex; flex-direction:column; gap:2px; }
.card-pop b { font-size:13px; color:#141719; }
.card-pop span { font-size:11px; color:#737d82; }
.specs { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:auto; }
.spec { background:#ffffff; border-radius:16px; padding:16px 14px; box-shadow:0 2px 12px rgba(0,0,0,0.08); }
.spec b { display:block; font-size:26px; font-weight:700; letter-spacing:-0.5px; color:#141719; }
.spec span { font-size:11px; font-weight:600; color:#737d82; }
</style></head>
<body>
<div class="page">
<nav>
<div class="navleft"><div class="gmark"></div><p class="brand">Gogoro</p></div>
<div class="navright">
<div class="navlinks"><span>Smartscooter</span><span>Network</span><span>Owners</span></div>
<button class="btn-account">Account</button>
</div>
</nav>
<main>
<div class="stage">
<span class="eyebrow">Electric Mobility</span>
<h1>Ride Smarter.</h1>
<p class="sub">Refuel in seconds.</p>
<div class="ctarow">
<button class="btn-marketing">DISCOVER MORE</button>
<button class="btn-outline">WORK WITH US</button>
</div>
<div class="rig">
<div class="glow"></div>
<div class="scooter"></div>
<div class="wheel front"></div>
<div class="wheel back"></div>
</div>
</div>
<div class="panel">
<div class="panelhead">
<h2>GoStation Network</h2>
<div class="livepill"><span class="livedot"></span>1,842 stations live</div>
</div>
<div class="map">
<div class="pin" style="left:34px; top:40px;"></div>
<div class="pin" style="left:96px; top:118px;"></div>
<div class="pin sel" style="left:168px; top:70px;"></div>
<div class="pin" style="left:240px; top:150px;"></div>
<div class="pin" style="left:296px; top:56px;"></div>
<div class="card-pop" style="left:150px; top:20px;"><b>Battery available</b><span>2 min walk</span></div>
</div>
<div class="specs">
<div class="spec"><b>170 km</b><span>Range per charge</span></div>
<div class="spec"><b><6 s</b><span>Battery swap time</span></div>
<div class="spec"><b>1,842</b><span>GoStations live</span></div>
</div>
</div>
</main>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.2px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #313131; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.625; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; color:#4a4a4a; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:22px;font-weight:700;color:#313131;letter-spacing:-.3px;}
.navlinks{font-size:14px;font-weight:600;color:#313131;}
.hero{display:flex;padding:56px 40px 40px;gap:40px;}
.left{width:400px;}
.h1{font-size:36px;font-weight:700;color:#313131;line-height:1.2;margin:0 0 18px;}
.sub{font-size:16px;line-height:1.625;color:#4a4a4a;margin:0 0 26px;max-width:340px;}
.pill{display:inline-block;background:#313131;color:#fff;font-size:14px;font-weight:600;padding:13px 30px;border-radius:9999px;}
.right{flex:1;position:relative;height:220px;}
.dish{position:absolute;width:150px;height:150px;border-radius:50%;border:10px solid #e0e0e0;top:10px;right:60px;background:radial-gradient(circle at 40% 40%,#f0f0f0,#ffffff);}
.dish:before{content:'';position:absolute;top:40px;left:36px;width:20px;height:20px;border-radius:50%;background:#a0a0a0;}
.dish:after{content:'';position:absolute;top:70px;left:70px;width:14px;height:14px;border-radius:50%;background:#c9c9c9;}
.dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#313131;top:100px;right:230px;}
.line{position:absolute;top:104px;right:120px;width:100px;height:1px;background:#e0e0e0;}
.section{padding:6px 40px;border-top:1px solid #e0e0e0;}
.seclabel{font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#313131;padding:16px 0 14px;}
.grid{display:flex;gap:18px;}
.card{width:200px;}
.thumb{aspect-ratio:1/1;background:#f5f5f5;border-radius:4px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;}
.cap{width:40px;height:70px;border-radius:20px;background:linear-gradient(180deg,#313131 50%,#e0e0e0 50%);}
.ptitle{font-size:15px;font-weight:600;color:#313131;margin:0 0 4px;}
.pprice{font-size:14px;color:#4a4a4a;}
.accordion{margin-top:4px;border-top:1px solid #e0e0e0;padding-top:8px;font-size:12px;color:#a0a0a0;}
</style>
<div class="nav">
<div class="logo">Seed</div>
<div class="navlinks">Shop</div>
</div>
<div class="hero">
<div class="left">
<div class="h1">Clinical precision.<br>Quiet authority.</div>
<div class="sub">A single dark ink governs the entire system — restraint, not decoration, does the persuading.</div>
<div class="pill">Shop the Synbiotic</div>
</div>
<div class="right">
<div class="dish"></div>
<div class="dot"></div><div class="line"></div>
</div>
</div>
<div class="section">
<div class="seclabel">The Daily Synbiotic</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="cap"></div></div><div class="ptitle">DS-01 Daily Capsule</div><div class="pprice">$49.99 / mo</div></div>
<div class="card"><div class="thumb"><div class="cap" style="background:linear-gradient(180deg,#4a4a4a 50%,#e0e0e0 50%)"></div></div><div class="ptitle">PDS-08 Pediatric</div><div class="pprice">$39.99 / mo</div></div>
<div class="card"><div class="thumb"><div class="cap" style="background:linear-gradient(180deg,#1a1a1a 50%,#e0e0e0 50%)"></div></div><div class="ptitle">WS-01 Women's Synbiotic</div><div class="pprice">$54.99 / mo</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #171923;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #171923;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.1; margin: 0; color: #171923; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #637381; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.0; letter-spacing: 0.05em; background: #303030; color: #f9fafb;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.0; letter-spacing: 0.05em; background: transparent; color: #303030;
border: 1px solid #303030; border-radius: 8px;
padding: 12px 30px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #171923;
border: 1px solid #c0c2c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #637381; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.0; letter-spacing: 0.08em; background: #dddedf; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#303030; color:#dfd5c4; font-family:'Inter',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #454545;}
.logo{font-family:Impact,'Arial Narrow',sans-serif;font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:-.5px;color:#dfd5c4;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#dfd5c4;}
.cart{background:#dfd5c4;color:#303030;font-size:11px;font-weight:700;text-transform:uppercase;padding:9px 16px;border-radius:8px;}
.hero{height:280px;display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;background:#121212;}
.herotext{width:460px;z-index:2;}
.h1{font-family:Impact,'Arial Narrow',sans-serif;font-size:58px;font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:-1px;margin:0 0 14px;color:#dfd5c4;}
.script{font-family:'Brush Script MT',cursive;font-size:24px;color:#cc6328;margin:0 0 16px;}
.btn{display:inline-block;height:52px;line-height:52px;padding:0 30px;background:#dfd5c4;color:#121212;font-size:13px;font-weight:700;text-transform:uppercase;border-radius:8px;width:fit-content;}
.splat{position:absolute;right:40px;top:30px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#cc6328,#1f3521 75%);opacity:.9;}
.sec{padding:22px 40px 0;}
.swatches{display:flex;gap:14px;margin-bottom:18px;}
.swatch{width:32px;height:32px;border-radius:50%;border:2px solid #454545;}
.swatch.active{border:3px solid #dfd5c4;}
.sectitle{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#a89e8d;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#454545;border-radius:8px;padding:12px;}
.thumb{height:96px;border-radius:6px;}
.pname{font-family:Impact,sans-serif;font-size:15px;text-transform:uppercase;letter-spacing:-.2px;color:#dfd5c4;margin-top:10px;}
.pprice{font-size:13px;color:#cc6328;font-weight:700;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Laundry Sauce</div>
<div class="navlinks"><span>Detergent</span><span>Scents</span><span>Bundles</span></div>
<div class="cart">Cart</div>
</div>
<div class="hero">
<div class="herotext">
<div class="h1">Wash Day<br>With Conviction</div>
<div class="script">— crafted by hand</div>
<div class="btn">Shop All Scents</div>
</div>
<div class="splat"></div>
</div>
<div class="sec">
<div class="swatches">
<div class="swatch active" style="background:#805ad5;"></div>
<div class="swatch" style="background:#1f3521;"></div>
<div class="swatch" style="background:#cc6328;"></div>
<div class="swatch" style="background:#2ea818;"></div>
</div>
<div class="sectitle">Pick Your Scent</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#805ad5,#322659)"></div><div class="pname">Lavender Sauce</div><div class="pprice">$28</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1f3521,#0d1a0e)"></div><div class="pname">Forest Sauce</div><div class="pprice">$28</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#cc6328,#7a3b17)"></div><div class="pname">Citrus Sauce</div><div class="pprice">$28</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2ea818,#175b0c)"></div><div class="pname">Fresh Green Sauce</div><div class="pprice">$28</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f2f1; color: #292826;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f2f1; color: #292826;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #292826; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8b8988; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.06em; background: #904b3c; color: #f3f2f1;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.06em; background: transparent; color: #292826;
border: 1px solid #904b3c; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f3f2f1; color: #292826;
border: 1px solid #c0c0be; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8988; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.12em; background: #ebe9e8; color: #4d4749;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f3f2f1; font-family:'Bookmania',Georgia,serif; color:#4d4749; }
*{box-sizing:border-box;}
.wrap{display:flex;height:640px;}
.sidebar{width:200px;background:#ebe9e8;border-right:1px solid #c7c5c4;padding:22px 20px;}
.logo{font-size:18px;font-weight:700;color:#292826;margin-bottom:20px;}
.filtergroup{margin-bottom:18px;}
.fg-title{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:#8b8988;margin-bottom:8px;font-family:Arial,sans-serif;}
.fg-item{font-size:12px;color:#4d4749;padding:4px 0;font-family:Arial,sans-serif;}
.fg-item.active{color:#904b3c;font-weight:700;}
.main{flex:1;}
.hero{height:240px;display:flex;background:#fff;border-bottom:1px solid #c7c5c4;}
.herotext{width:440px;padding:36px 34px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:#91b08e;margin-bottom:12px;font-family:Arial,sans-serif;}
.h1{font-size:26px;font-weight:700;line-height:1.3;color:#292826;margin:0 0 12px;}
.sub{font-size:13px;line-height:1.6;color:#8b8988;margin:0 0 18px;max-width:320px;font-family:Arial,sans-serif;}
.btn{width:170px;text-align:center;background:#904b3c;color:#f3f2f1;font-size:11px;letter-spacing:.4px;text-transform:uppercase;padding:12px 0;font-family:Arial,sans-serif;}
.heroimg{flex:1;background:linear-gradient(160deg,#3e5871,#91b08e 80%);position:relative;}
.newel{position:absolute;bottom:20px;left:80px;width:24px;height:160px;background:#3e5871;border-radius:6px 6px 3px 3px;}
.newel:before{content:'';position:absolute;top:-14px;left:-8px;width:40px;height:20px;border-radius:8px;background:#3e5871;}
.sec{padding:18px 34px 0;}
.sectitle{font-size:15px;font-weight:700;color:#292826;margin-bottom:12px;}
.grid{display:flex;gap:12px;}
.card{width:150px;background:#fff;border:1px solid #c7c5c4;padding:8px;}
.thumb{height:96px;margin-bottom:8px;background:#ebe9e8;}
.pname{font-size:11px;color:#292826;line-height:1.3;height:28px;overflow:hidden;font-family:Arial,sans-serif;}
.pmeta{font-size:10px;color:#8b8988;margin-top:3px;font-family:Arial,sans-serif;letter-spacing:.3px;text-transform:uppercase;}
.pprice{font-size:12px;color:#904b3c;margin-top:4px;font-weight:700;font-family:Arial,sans-serif;}
</style>
<div class="wrap">
<div class="sidebar">
<div class="logo">Olde Good Things</div>
<div class="filtergroup">
<div class="fg-title">Era</div>
<div class="fg-item active">Victorian</div>
<div class="fg-item">Arts & Crafts</div>
<div class="fg-item">Industrial</div>
</div>
<div class="filtergroup">
<div class="fg-title">Material</div>
<div class="fg-item">Cast Iron</div>
<div class="fg-item">Pressed Tin</div>
<div class="fg-item">Stained Glass</div>
</div>
</div>
<div class="main">
<div class="hero">
<div class="herotext">
<div class="kicker">Salvaged & Catalogued</div>
<div class="h1">Architectural salvage with the paperwork to prove it.</div>
<div class="sub">One-of-a-kind mantels, ironwork, and pressed-tin ceilings pulled from buildings that no longer stand.</div>
<div class="btn">Browse Inventory</div>
</div>
<div class="heroimg"><div class="newel"></div></div>
</div>
<div class="sec">
<div class="sectitle">Recently Catalogued</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#3e5871,#ebe9e8)"></div><div class="pname">Cast-Iron Newel Post</div><div class="pmeta">Item No. 27-114</div><div class="pprice">$1,450</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#91b08e,#ebe9e8)"></div><div class="pname">Pressed-Tin Ceiling Panel</div><div class="pmeta">Item No. 27-119</div><div class="pprice">$220</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#904b3c,#ebe9e8)"></div><div class="pname">Victorian Mantel, Marble</div><div class="pmeta">Item No. 27-131</div><div class="pprice">$3,900</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#6e8269,#ebe9e8)"></div><div class="pname">Industrial Factory Window</div><div class="pmeta">Item No. 27-140</div><div class="pprice">$680</div></div>
</div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #1878b9; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #fafafa; color: #121212;
border: 1px solid #1878b9; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #121212;
border: 1px solid #c0c0c0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #e22120; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#121212; box-sizing:border-box;
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#fafafa; display:flex; align-items:center; justify-content:space-between; padding:0 30px; border-bottom:1px solid #e8e8e8; }
.brand { font-size:16px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; letter-spacing:0.2px; text-transform:uppercase; color:#333; }
.navlinks span.on { color:#1878b9; border-bottom:2px solid #1878b9; padding-bottom:20px; }
main { display:grid; grid-template-columns:440px 1fr; height:calc(640px - 64px); }
.stage { padding:26px; display:flex; flex-direction:column; gap:12px; border-right:1px solid #e8e8e8; }
.frame { flex:1; border-radius:8px; background:#f2f2f2; position:relative; overflow:hidden; }
.frame svg { position:absolute; inset:0; }
.thumbs { display:flex; gap:8px; }
.thumb { width:56px; height:56px; background:#fff; border:1px solid #dedede; border-radius:4px; }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:12px; font-weight:600; letter-spacing:0.3px; text-transform:uppercase; color:#1878b9; }
h1 { margin:0; font-size:24px; font-weight:600; letter-spacing:-0.2px; line-height:1.25; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:600; }
.badge-new { background:#1878b9; color:#fff; font-size:11px; font-weight:600; letter-spacing:0.3px; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.desc { font-size:14px; color:#333; line-height:1.55; }
.opt-row { display:flex; gap:8px; }
.opt-chip { border:1px solid #dedede; border-radius:4px; padding:8px 14px; font-size:13px; font-weight:600; background:#fff; }
.opt-chip.on { border:1px solid #1878b9; color:#1878b9; }
.spec-table { border:1px solid #e8e8e8; border-radius:8px; overflow:hidden; }
.spec-row { display:flex; justify-content:space-between; padding:7px 12px; font-size:13px; border-bottom:1px solid #e8e8e8; }
.spec-row:last-child { border-bottom:none; }
.spec-row .l { color:#666; }
.spec-row .v { font-weight:600; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:44px; background:#1878b9; color:#fff; border:none; border-radius:4px; font-size:15px; font-weight:600; letter-spacing:0.2px; }
.btn-secondary { width:140px; height:44px; background:#fafafa; border:1px solid #dedede; color:#121212; border-radius:4px; font-size:15px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Allied Cycle Works</p>
<div class="navlinks"><span class="on">Road</span><span>Gravel</span><span>Mountain</span><span>Framesets</span></div>
</nav>
<main>
<div class="stage">
<div class="frame">
<svg viewBox="0 0 440 340" width="100%" height="100%">
<polygon points="70,250 150,110 260,110 340,250" fill="none" stroke="#1878b9" stroke-width="5"/>
<line x1="150" y1="110" x2="340" y2="250" stroke="#1878b9" stroke-width="5"/>
<line x1="150" y1="110" x2="150" y2="110" stroke="#1878b9" stroke-width="5"/>
<circle cx="70" cy="250" r="52" fill="none" stroke="#999" stroke-width="6"/>
<circle cx="340" cy="250" r="52" fill="none" stroke="#999" stroke-width="6"/>
<line x1="260" y1="110" x2="300" y2="70" stroke="#121212" stroke-width="5"/>
</svg>
</div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Allied Cycle Works · Allroad Series</span>
<h1>Echo Carbon Gravel Frameset</h1>
<div class="price-row"><span class="price">$2,850.00</span><span class="badge-new">New Geometry</span></div>
<p class="desc">Monocoque carbon frame tuned for mixed-surface speed — tire clearance to 45mm, three bottle mounts, and a T47 threaded bottom bracket built to last through gravel seasons.</p>
<div class="opt-row">
<span class="opt-chip">51cm</span><span class="opt-chip on">54cm</span><span class="opt-chip">57cm</span><span class="opt-chip">60cm</span>
</div>
<div class="spec-table">
<div class="spec-row"><span class="l">Frame Material</span><span class="v">T800 Carbon</span></div>
<div class="spec-row"><span class="l">Tire Clearance</span><span class="v">45mm</span></div>
<div class="spec-row"><span class="l">Weight</span><span class="v">1,050g (54cm)</span></div>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Geometry</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #cc0000; color: #ffffff;
border: none; border-radius: 2px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #cc0000;
border: 1px solid #cc0000; border-radius: 2px;
padding: 8px 18px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cc0000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Entertainment Earth — Home</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#444444;
font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;}
.page{width:960px;height:640px;display:flex;flex-direction:column;}
header{height:54px;background:#313131;display:flex;align-items:center;justify-content:space-between;padding:0 26px;}
.logo{font-size:18px;font-weight:700;color:#ffffff;}
.logo span{color:#cc0000;}
nav{display:flex;gap:16px;}
nav a{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;color:#dddddd;}
.search{background:#ffffff;border-radius:3px;padding:6px 10px;font-size:11px;color:#888;width:150px;}
.subnav{height:30px;background:#f5f5f5;display:flex;align-items:center;gap:16px;padding:0 26px;border-bottom:1px solid #dddddd;overflow:hidden;}
.subnav span{font-size:10px;font-weight:700;text-transform:uppercase;color:#555;padding:4px 8px;background:#ffffff;border-radius:3px;border:1px solid #dddddd;white-space:nowrap;}
main{flex:1;display:flex;padding:14px 26px 0;gap:16px;overflow:hidden;}
aside{width:130px;}
aside h5{font-size:11px;text-transform:uppercase;color:#313131;margin:0 0 8px;border-bottom:2px solid #cc0000;padding-bottom:6px;}
aside .cat{font-size:11px;color:#444;padding:5px 0;border-bottom:1px solid #eeeeee;}
.content{flex:1;}
.banner{height:78px;border-radius:4px;background:linear-gradient(120deg,#313131,#4a4a4a);display:flex;align-items:center;padding:0 20px;margin-bottom:14px;position:relative;overflow:hidden;}
.banner::after{content:'';position:absolute;right:16px;top:12px;bottom:12px;width:120px;background:linear-gradient(135deg,#5a5a5a,#3a3a3a);border-radius:4px;}
.banner-copy{z-index:2;}
.banner-copy .tag{font-size:9px;color:#ffcc00;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.banner-copy h1{font-size:20px;color:#fff;margin:2px 0;}
.banner-copy p{font-size:10px;color:#cccccc;margin:0;}
.row-head{display:flex;justify-content:space-between;margin-bottom:8px;}
.row-head h2{font-size:14px;margin:0;color:#313131;}
.row-head span{font-size:10px;color:#cc0000;font-weight:700;}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;}
.card{border:1px solid #dddddd;border-radius:2px;padding:6px;position:relative;background:#fff;}
.thumb{height:56px;border-radius:2px;background:linear-gradient(150deg,#e8e8e8,#d3d3d3);margin-bottom:6px;position:relative;}
.badge{position:absolute;top:3px;left:3px;font-size:6.5px;font-weight:700;text-transform:uppercase;padding:2px 4px;border-radius:2px;color:#fff;}
.b-excl{background:#cc0000;}
.b-pre{background:#1565c0;}
.b-new{background:#2e7d32;}
.b-sale{background:#ffcc00;color:#000;}
.card h4{font-size:9.5px;margin:0 0 4px;color:#313131;line-height:1.25;height:22px;overflow:hidden;font-weight:600;}
.card .price{font-size:11px;font-weight:700;color:#313131;}
.card .price s{font-size:9px;color:#999;font-weight:400;margin-left:3px;}
.card .cta{margin-top:4px;background:#cc0000;color:#fff;font-size:8px;font-weight:700;text-transform:uppercase;text-align:center;padding:3px 0;border-radius:2px;}
footer{background:#1a1a1a;border-top:3px solid #cc0000;padding:10px 26px;display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
footer span{font-size:9px;color:#bbbbbb;}
footer .flinks{display:flex;gap:14px;}
</style>
<div class="page">
<header>
<div class="logo">Entertainment Earth<span>.com</span></div>
<nav><a>Marvel</a><a>Star Wars</a><a>DC</a><a>Transformers</a><a>Anime</a></nav>
<div class="search">Search figures…</div>
</header>
<div class="subnav">
<span>Pre-Orders</span><span>New Releases</span><span>Exclusives</span><span>Clearance</span><span>Statues</span>
</div>
<main>
<aside>
<h5>Categories</h5>
<div class="cat">Action Figures</div>
<div class="cat">Statues</div>
<div class="cat">Plush</div>
<div class="cat">Vinyl Figures</div>
<div class="cat">Trading Cards</div>
<div class="cat">Apparel</div>
<div class="cat">Collectibles</div>
</aside>
<div class="content">
<div class="banner">
<div class="banner-copy">
<div class="tag">Pre-Order Now</div>
<h1>Legends Wave 12 Arrives</h1>
<p>Reserve your slot before allocation closes.</p>
</div>
</div>
<div class="row-head"><h2>Trending This Week</h2><span>See All →</span></div>
<div class="grid">
<div class="card"><div class="badge b-excl">Exclusive</div><div class="thumb"></div><h4>Galaxy Trooper 6" Figure</h4><div class="price">$24.99</div><div class="cta">Add to Cart</div></div>
<div class="card"><div class="badge b-pre">Pre-Order</div><div class="thumb"></div><h4>Chrome Edition Statue</h4><div class="price">$189.99</div><div class="cta">Reserve</div></div>
<div class="card"><div class="badge b-new">New</div><div class="thumb"></div><h4>Retro Wave Vinyl Set</h4><div class="price">$34.99</div><div class="cta">Add to Cart</div></div>
<div class="card"><div class="badge b-sale">Sale</div><div class="thumb"></div><h4>Squad Box, 6-Pack</h4><div class="price">$44.99 <s>$59.99</s></div><div class="cta">Add to Cart</div></div>
<div class="card"><div class="thumb"></div><h4>Convention Comic Set</h4><div class="price">$14.99</div><div class="cta">Add to Cart</div></div>
</div>
</div>
</main>
<footer>
<div class="flinks"><span>Franchise Index</span><span>Help Center</span><span>Track Order</span></div>
<span>© Entertainment Earth Collectibles</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #083ccc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #083ccc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8aa2e3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #012ca2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #083ccc; color: #ffffff;
border: 1px solid #012ca2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #083ccc; color: #f5f5f5;
border: 1px solid #2e5ad3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8aa2e3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0739c5; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6f7f8; color:#1a1a1e; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.page { display:flex; flex-direction:column; width:960px; height:640px; }
nav { flex:0 0 60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#ffffff; border-bottom:1px solid #e6e8ea; }
.logo { font-size:19px; font-weight:700; color:#083ccc; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#575f6c; font-weight:500; }
.navlinks .active { color:#083ccc; border-bottom:2px solid #083ccc; padding-bottom:18px; }
.row { display:flex; gap:10px; align-items:center; }
.btn-ghost { background:#ffffff; color:#1a1a1e; border:1px solid #d5d8dc; border-radius:10px;
height:36px; padding:0 16px; font-size:13px; font-weight:500; display:flex; align-items:center; white-space:nowrap; cursor:default; }
.btn-primary { background:#083ccc; color:#ffffff; border:none; border-radius:10px;
height:36px; padding:0 16px; font-size:13px; font-weight:700; display:flex; align-items:center; white-space:nowrap; cursor:default; }
.hero { flex:0 0 178px; background:#ffffff; display:flex; flex-direction:column; align-items:center;
justify-content:center; gap:16px; padding:0 40px; border-bottom:1px solid #e6e8ea; }
.hero h1 { font-size:30px; font-weight:700; letter-spacing:-0.5px; margin:0; text-align:center; color:#1a1a1e; }
.search-wrap { width:520px; padding:2px; border-radius:999px;
background:linear-gradient(90deg, #ff9ec7, #ffd48a, #6fa8ff); }
.search { background:#f6f7f8; border-radius:999px; height:46px; display:flex; align-items:center;
padding:0 20px; gap:10px; }
.search .ai { font-size:11px; font-weight:700; color:#083ccc; background:#f0f2fa; border-radius:999px;
padding:3px 10px; white-space:nowrap; }
.search span.q { font-size:14px; color:#949ba8; }
.listwrap { flex:1; padding:20px 40px; display:flex; flex-direction:column; gap:10px; }
.listwrap .lh { font-size:12px; font-weight:700; color:#575f6c; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:2px; }
.cards { display:flex; gap:16px; }
.jcard { flex:1; background:#ffffff; border:1px solid #e6e8ea; border-radius:10px; padding:16px;
box-shadow: rgba(0,0,0,0.06) 0px 2px 8px; display:flex; flex-direction:column; gap:8px; position:relative; }
.jcard .badge-urgent { position:absolute; top:14px; right:14px; font-size:11px; font-weight:700;
color:#ff6d12; background:#fff2e9; border-radius:6px; padding:2px 8px; }
.jcard .co { font-size:11.5px; color:#949ba8; font-weight:500; }
.jcard h3 { font-size:15.5px; font-weight:700; margin:0; color:#1a1a1e; }
.jcard .chip { display:inline-block; background:#f0f2fa; color:#083ccc; border-radius:999px;
padding:3px 10px; font-size:11.5px; font-weight:600; width:fit-content; }
.jcard .meta { font-size:11px; color:#575f6c; margin-top:auto; }
footer { flex:0 0 40px; background:#ffffff; border-top:1px solid #e6e8ea; padding:0 40px;
display:flex; align-items:center; justify-content:space-between; font-size:11px; color:#949ba8; }
</style></head>
<body>
<div class="page">
<nav>
<div class="logo">JobKorea</div>
<div class="navlinks">
<span class="active">All jobs</span>
<span>IT</span>
<span>Design</span>
<span>Senior</span>
<span>Startup</span>
</div>
<div class="row">
<button class="btn-ghost">Sign in</button>
<button class="btn-primary">Post a job</button>
</div>
</nav>
<section class="hero">
<h1>Find work that actually fits you.</h1>
<div class="search-wrap">
<div class="search">
<span class="ai">AI</span>
<span class="q">Search 9M+ profiles and matched openings…</span>
</div>
</div>
</section>
<section class="listwrap">
<span class="lh">Matched for you</span>
<div class="cards">
<div class="jcard">
<span class="badge-urgent">D-2</span>
<span class="co">Northline Robotics</span>
<h3>Frontend Engineer, Platform</h3>
<span class="chip">$58K–$72K</span>
<span class="meta">128 applied · 340 recruiter views</span>
</div>
<div class="jcard">
<span class="co">Cedarwave Studio</span>
<h3>Product Designer, Growth</h3>
<span class="chip">$50K–$64K</span>
<span class="meta">64 applied · 190 recruiter views</span>
</div>
<div class="jcard">
<span class="badge-urgent">D-5</span>
<span class="co">Alex Kim & Partners</span>
<h3>Marketing Manager, In-house</h3>
<span class="chip">$46K–$58K</span>
<span class="meta">201 applied · 512 recruiter views</span>
</div>
</div>
</section>
<footer>
<span>© JobKorea</span>
<span>Jobs · Companies · Salaries · Career advice</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #120a0e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #120a0e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8f8b8d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c6002b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #120a0e; color: #c6002b;
border: 1px solid #c6002b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #120a0e; color: #f5f5f5;
border: 1px solid #363033; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f8b8d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2f0813; color: #c6002b;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#120A0E; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:20px 32px 0; }
.brand { margin:0; font-size:14px; font-weight:900; letter-spacing:0.06em; color:#B8A0A8; text-transform:uppercase; }
.k { font-size:12px; color:#B8A0A8; }
.player { width:420px; margin:26px auto 0; display:flex; flex-direction:column; align-items:center; gap:22px; }
.tile { width:260px; height:260px; border-radius:28px; position:relative; overflow:hidden;
background:radial-gradient(circle at 50% 40%, #E40A5D 0%, #C6002B 55%, #2A171D 100%);
display:flex; align-items:center; justify-content:center; box-shadow:0 20px 50px rgba(198,0,43,0.25); }
.heart { font-size:96px; color:#fff; opacity:0.92; }
.freqchip { position:absolute; bottom:14px; right:14px; background:rgba(18,10,14,0.55); backdrop-filter:blur(4px);
border-radius:999px; padding:5px 12px; font-size:12px; font-weight:700; }
.live { position:absolute; top:14px; left:14px; background:#F23A2F; border-radius:999px; padding:4px 10px 4px 8px;
display:flex; align-items:center; gap:6px; font-size:11px; font-weight:900; letter-spacing:0.06em; }
.live i { width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,0.35); }
.stationname { font-size:26px; font-weight:800; letter-spacing:-0.4px; margin:0; text-align:center; }
.nowairing { font-size:14px; color:#B8A0A8; margin:4px 0 0; text-align:center; }
.scanwrap { width:100%; }
.scanrail { width:100%; height:4px; background:#2A171D; border-radius:99px; overflow:hidden; position:relative; }
.scansweep { position:absolute; left:-30%; width:30%; height:100%; background:linear-gradient(90deg, transparent, #F23A2F, transparent); }
.scanlabel { text-align:center; font-size:11px; color:#7C6168; margin-top:8px; letter-spacing:0.04em; text-transform:uppercase; }
.transport { display:flex; align-items:center; gap:34px; }
.skip { font-size:22px; color:#B8A0A8; }
.stopbtn { width:68px; height:68px; border-radius:50%; background:#C6002B; display:flex; align-items:center; justify-content:center;
box-shadow:0 10px 26px rgba(198,0,43,0.4); }
.stopbtn i { width:20px; height:20px; background:#fff; border-radius:3px; }
.foryou { margin:30px 40px 0; }
.foryou h4 { font-size:13px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:#B8A0A8; margin:0 0 12px; }
.shelf { display:flex; gap:14px; }
.card { width:120px; }
.cart { width:120px; height:120px; border-radius:16px; background:linear-gradient(135deg,#C6002B,#E40A5D); }
.cn { font-size:12px; font-weight:700; margin-top:8px; }
</style></head>
<body>
<div class="topbar"><p class="brand">iHeartRadio</p><span class="k">For You</span></div>
<div class="player">
<div class="tile"><span class="live"><i></i>LIVE</span><span class="heart">♡</span><span class="freqchip">101.3 FM</span></div>
<div>
<h2 class="stationname">iHeartRadio (iOS)</h2>
<p class="nowairing">Now airing · Midnight Drive — The Weekend Set</p>
</div>
<div class="scanwrap">
<div class="scanrail"><div class="scansweep"></div></div>
<div class="scanlabel">Streaming Live</div>
</div>
<div class="transport">
<span class="skip">⏮</span>
<div class="stopbtn"><i></i></div>
<span class="skip">⏭</span>
</div>
</div>
<div class="foryou">
<h4>Recently Played</h4>
<div class="shelf">
<div class="card"><div class="cart"></div><div class="cn">Sunset Hits</div></div>
<div class="card"><div class="cart" style="background:linear-gradient(135deg,#7C6168,#2A171D)"></div><div class="cn">True Crime Weekly</div></div>
<div class="card"><div class="cart" style="background:linear-gradient(135deg,#F23A2F,#C6002B)"></div><div class="cn">Morning Zoo</div></div>
<div class="card"><div class="cart" style="background:linear-gradient(135deg,#E40A5D,#341C24)"></div><div class="cn">Latin Beats</div></div>
<div class="card"><div class="cart" style="background:linear-gradient(135deg,#341C24,#120A0E)"></div><div class="cn">Chart Toppers</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0c1b22; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0c1b22; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c9396; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0c1b22; color: #ffffff;
border: 1px solid #121212; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0c1b22; color: #f5f5f5;
border: 1px solid #313e44; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c9396; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0d1a1f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0C1B22; color:#FFFFFF; box-sizing:border-box;
font-family:"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#081218; border-bottom:1px solid #234653; }
.brand { font-size:16px; font-weight:800; margin:0; letter-spacing:-0.2px; }
.navtabs { display:flex; gap:22px; font-size:12px; font-weight:600; color:#6B8693; }
.navtabs span.on { color:#25D1DA; }
.player { display:flex; height:592px;
background:linear-gradient(180deg,#1C4A57 0%,#163A45 22%,#0F2730 55%,#0C1B22 100%); }
.left { width:300px; display:flex; flex-direction:column; align-items:center; padding-top:26px; }
.art { width:186px; height:186px; border-radius:6px; background:linear-gradient(135deg,#25D1DA,#0C1B22 70%);
box-shadow:0 18px 44px -16px rgba(0,0,0,0.65); }
.tname { font-size:20px; font-weight:700; margin-top:16px; text-align:center; }
.artist { font-size:13px; color:#9FB6BF; margin-top:4px; }
.scrub { width:220px; margin-top:16px; }
.track { height:4px; border-radius:2px; background:rgba(255,255,255,0.16); position:relative; }
.fill { position:absolute; left:0; top:0; height:4px; width:38%; border-radius:2px; background:#00A8E1; }
.thumb { position:absolute; left:38%; top:-4px; width:12px; height:12px; border-radius:50%; background:#00A8E1;
box-shadow:0 0 0 4px rgba(0,168,225,0.2); margin-left:-6px; }
.times { display:flex; justify-content:space-between; font-size:10px; color:#9FB6BF; margin-top:6px; }
.controls { display:flex; align-items:center; gap:22px; margin-top:16px; }
.ic2 { font-size:20px; color:#9FB6BF; }
.play { width:52px; height:52px; border-radius:50%; background:#00A8E1; display:flex; align-items:center;
justify-content:center; font-size:20px; color:#fff; box-shadow:0 8px 22px -6px rgba(0,168,225,0.55); }
.right { flex:1; padding:24px 30px 0; }
.eyebrow2 { font-size:10px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:#9FB6BF; }
.xray { margin-top:10px; background:rgba(0,168,225,0.07); border:1px solid rgba(37,209,218,0.22);
border-radius:10px; padding:14px 16px; }
.xhead { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.xbadge { background:#25D1DA; color:#042730; font-size:9px; font-weight:800; letter-spacing:0.5px;
border-radius:4px; padding:2px 6px; }
.xlabel { font-size:10px; font-weight:700; letter-spacing:0.6px; color:#9FB6BF; text-transform:uppercase; }
.lyric { font-size:15px; font-weight:600; line-height:1.6; }
.lyric.now { color:#25D1DA; }
.lyric.next { color:#9FB6BF; }
.lyric.dim { color:#6B8693; }
.shelftitle { font-size:15px; font-weight:700; margin-top:20px; }
.shelf { display:flex; gap:12px; margin-top:10px; }
.card2 { width:100px; }
.cardart { width:100px; height:100px; border-radius:6px; }
.cardtitle { font-size:11px; font-weight:600; margin-top:6px; }
.cardsub { font-size:10px; color:#9FB6BF; }
</style></head>
<body>
<nav>
<p class="brand">Amazon Music (iOS)</p>
<div class="navtabs"><span class="on">Home</span><span>Find</span><span>Podcasts</span><span>Library</span></div>
<span style="font-size:12px; color:#25D1DA; font-weight:700;">HD</span>
</nav>
<div class="player">
<div class="left">
<div class="art"></div>
<div class="tname">Ocean Static</div>
<div class="artist">Coastline Radio</div>
<div class="scrub">
<div class="track"><div class="fill"></div><div class="thumb"></div></div>
<div class="times"><span>1:24</span><span>-2:11</span></div>
</div>
<div class="controls">
<span class="ic2">⏮</span>
<div class="play">▶</div>
<span class="ic2">⏭</span>
</div>
</div>
<div class="right">
<div class="eyebrow2">Playing From Playlist</div>
<div class="xray">
<div class="xhead"><span class="xbadge">X-RAY</span><span class="xlabel">Lyrics</span></div>
<div class="lyric dim">Every tide comes back around</div>
<div class="lyric next">Waiting on the harbor light</div>
<div class="lyric now">We were never lost, just drifting slow</div>
<div class="lyric next">Holding on to what we know</div>
<div class="lyric dim">Ocean static in the dark</div>
</div>
<div class="shelftitle">Recently played</div>
<div class="shelf">
<div class="card2"><div class="cardart" style="background:linear-gradient(135deg,#25D1DA,#0C1B22)"></div><div class="cardtitle">Your Soundtrack</div><div class="cardsub">Mix</div></div>
<div class="card2"><div class="cardart" style="background:linear-gradient(135deg,#00A8E1,#122A33)"></div><div class="cardtitle">Deep Focus</div><div class="cardsub">Station</div></div>
<div class="card2"><div class="cardart" style="background:linear-gradient(135deg,#16404C,#0C1B22)"></div><div class="cardtitle">Late Night Drive</div><div class="cardsub">Playlist</div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #02cab9; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #02cab9; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #0a645d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5f5f; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #02cab9; color: #000000;
border: 1px solid #ff5f5f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #02cab9; color: #111111;
border: 1px solid #04ac9e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #0a645d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2ab9ab; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#484848; box-sizing:border-box;
font-family:Roboto, -apple-system, "Helvetica Neue", "PingFang", "Microsoft JhengHei", sans-serif; }
* { box-sizing:border-box; }
.nav { height:60px; display:flex; align-items:center; padding:0 32px; justify-content:space-between; }
.nav .brand { font-size:20px; font-weight:600; color:#02cab9; }
.nav .links { display:flex; gap:26px; font-size:14px; color:rgba(0,0,0,0.7); }
.nav .right { display:flex; gap:14px; align-items:center; font-size:14px; color:#484848; }
.signbtn { background:#02cab9; color:#fff; border-radius:5px; padding:8px 18px; font-size:14px; }
.hero { position:relative; height:300px; margin:0 32px; border-radius:8px; overflow:hidden;
background:linear-gradient(120deg,#0a2a2c 0%,#0e4a48 40%,#02b3a4 75%,#02cab9 100%); }
.hero::after{ content:''; position:absolute; inset:0;
background:radial-gradient(circle at 78% 30%, rgba(255,255,255,0.18), transparent 45%); }
.herotxt { position:relative; z-index:2; padding:44px 44px; max-width:520px; }
.herotxt h1 { color:#fff; font-size:38px; font-weight:600; line-height:1.25; margin:0 0 12px; }
.herotxt p { color:#eaf9f7; font-size:17px; margin:0 0 20px; }
.herobtn { background:#fff; color:#02b3a4; border-radius:5px; padding:12px 26px; font-size:16px; font-weight:500; display:inline-block; }
.section { padding:22px 32px 0; }
.section h2 { font-size:20px; font-weight:500; margin:0 0 14px; color:#363636; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#fff; border:1px solid #dcdfe6; border-radius:8px; overflow:hidden;
box-shadow: rgba(0,0,0,0.10) 0px 4px 16px; }
.thumb { height:78px; background:linear-gradient(135deg,#ffe5e5,#ffd0d0); position:relative; }
.thumb.b { background:linear-gradient(135deg,#e6fbf9,#c9f3ee); }
.thumb.c { background:linear-gradient(135deg,#eef1ff,#dbe1ff); }
.thumb .av { position:absolute; bottom:-18px; left:16px; width:44px; height:44px; border-radius:50%; border:3px solid #fff;
background:linear-gradient(135deg,#ff9a8b,#ff6f6f); }
.thumb.b .av{background:linear-gradient(135deg,#02cab9,#02b3a4);}
.thumb.c .av{background:linear-gradient(135deg,#8b9dff,#5a6fe0);}
.cardbody { padding:24px 14px 14px; }
.cardbody h3 { font-size:16px; font-weight:400; margin:0 0 4px; color:#363636; }
.cardbody .price { font-size:14px; font-weight:300; color:#484848; margin:0 0 8px; }
.badge { display:inline-block; background:#ffe5e5; color:#ff5f5f; font-size:11px; font-weight:500; border-radius:4px; padding:3px 8px; }
</style></head>
<body>
<nav class="nav">
<div class="brand">AmazingTalker</div>
<div class="links"><span>English Tutors</span><span>Japanese Tutors</span><span>Korean Tutors</span><span>Spanish Tutors</span></div>
<div class="right"><span>Sign In</span><button class="signbtn">Apply To Teach</button></div>
</nav>
<div class="hero">
<div class="herotxt">
<h1>Languages and learning made fun</h1>
<p>Match with a tutor in minutes and start your first lesson today.</p>
<span class="herobtn">Find tutors</span>
</div>
</div>
<div class="section">
<h2>Popular this week</h2>
<div class="cards">
<div class="card">
<div class="thumb"><div class="av"></div></div>
<div class="cardbody"><h3>Camila R. — English</h3><div class="price">$18.50/lesson</div><span class="badge">Popular</span></div>
</div>
<div class="card">
<div class="thumb b"><div class="av"></div></div>
<div class="cardbody"><h3>Jordan K. — Korean</h3><div class="price">$14,580₩/lesson</div><span class="badge">New</span></div>
</div>
<div class="card">
<div class="thumb c"><div class="av"></div></div>
<div class="cardbody"><h3>Sora M. — Japanese</h3><div class="price">$21.00/lesson</div><span class="badge">Popular</span></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e23744; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #e23744;
border: 1px solid #e23744; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fadfe1; color: #e23744;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1C1C1C; box-sizing:border-box;
font-family:Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { width:960px; height:640px; display:flex; }
.left { width:960px; display:flex; }
.detail { width:560px; display:flex; flex-direction:column; border-right:1px solid #E8E8E8; }
.hero { position:relative; height:150px; flex:none;
background:linear-gradient(160deg,#7a4b2e 0%, #b5773f 45%, #e3a45c 100%); }
.hero .scrim { position:absolute; top:14px; left:16px; right:16px; display:flex; justify-content:space-between; }
.hero .navcirc { width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,0.4);
display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; }
.infocard { margin-top:-22px; border-radius:22px 22px 0 0; background:#fff; position:relative; z-index:2;
padding:18px 24px 0; flex:none; }
.infocard h1 { font-size:22px; font-weight:800; margin:0 0 4px; letter-spacing:-0.3px; }
.metaline { font-size:12px; color:#696969; margin:0 0 12px; }
.ratrow { display:flex; gap:22px; margin-bottom:14px; }
.ratpillwrap { text-align:center; }
.ratpill { display:inline-flex; align-items:center; gap:4px; background:#267E3E; color:#fff; font-weight:800;
font-size:13px; padding:4px 9px; border-radius:7px; }
.ratpillwrap p { font-size:10px; color:#696969; margin:5px 0 0; text-decoration:underline; }
.toggle { display:flex; background:#F4F4F5; border-radius:999px; padding:4px; margin-bottom:14px; }
.toggle span { flex:1; text-align:center; font-size:12px; font-weight:700; padding:8px 0; border-radius:999px; color:#696969; }
.toggle span.active { background:#E23744; color:#fff; }
.menu { flex:1; overflow:hidden; padding:0 24px; }
.catname { font-size:15px; font-weight:800; margin:14px 0 8px; }
.item { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #E8E8E8; gap:12px; }
.iteminfo { flex:1; }
.vegmark { width:14px; height:14px; border:1.4px solid #267E3E; border-radius:3px; display:inline-flex;
align-items:center; justify-content:center; margin-right:6px; vertical-align:middle; }
.vegmark .dot { width:6px; height:6px; border-radius:50%; background:#267E3E; }
.nonveg { border-color:#B91C1C; }
.nonveg .tri { width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
border-bottom:7px solid #B91C1C; }
.best { font-size:10px; font-weight:800; color:#DB7C38; display:block; margin-bottom:2px; }
.iname { font-size:14px; font-weight:700; margin:0 0 3px; }
.iprice { font-size:13px; font-weight:700; margin:0 0 3px; }
.irating { font-size:11px; color:#696969; }
.irating .g { color:#267E3E; font-weight:700; }
.thumbwrap { position:relative; width:80px; flex:none; }
.thumb { width:80px; height:64px; border-radius:12px; }
.th1 { background:linear-gradient(135deg,#e3a45c,#c26b2c); }
.th2 { background:linear-gradient(135deg,#f2c17a,#d98a3d); }
.th3 { background:linear-gradient(135deg,#e0895a,#b5502a); }
.addbtn { position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); background:#fff;
border:1px solid #E23744; color:#E23744; font-size:11px; font-weight:800; letter-spacing:0.3px;
padding:4px 12px; border-radius:10px; box-shadow:0 3px 8px rgba(0,0,0,0.12); white-space:nowrap; }
.right { width:400px; padding:22px 24px; background:#F4F4F5; overflow:hidden; }
.right h2 { font-size:16px; font-weight:800; margin:0 0 4px; }
.right .sub { font-size:12px; color:#696969; margin:0 0 16px; }
.bagrow { display:flex; justify-content:space-between; background:#fff; border-radius:12px; padding:10px 14px;
margin-bottom:10px; align-items:center; }
.bagrow .bname { font-size:13px; font-weight:700; }
.bagrow .bprice { font-size:12px; color:#696969; }
.stepper { display:flex; align-items:center; gap:10px; border:1px solid #E23744; border-radius:10px; padding:3px 8px; }
.stepper span { color:#E23744; font-weight:800; font-size:14px; }
.billline { display:flex; justify-content:space-between; font-size:13px; color:#696969; margin:10px 0; }
.billline.total { color:#1C1C1C; font-weight:800; font-size:14px; }
.paybtn { width:100%; background:#E23744; color:#fff; border-radius:12px; height:50px; display:flex;
align-items:center; justify-content:center; font-weight:800; font-size:15px; margin-top:12px; }
.gold { margin-top:16px; background:linear-gradient(135deg,#FCEBB8,#EFC75E); border-radius:12px; padding:12px 14px;
font-size:12px; font-weight:700; color:#6b4e10; }
</style></head>
<body>
<div class="app">
<div class="left">
<div class="detail">
<div class="hero">
<div class="scrim"><div class="navcirc">‹</div><div class="navcirc">♡</div></div>
</div>
<div class="infocard">
<h1>Old Town Kebab House</h1>
<p class="metaline">North Indian, Kebabs · Hanam-dong · 2.4 km</p>
<div class="ratrow">
<div class="ratpillwrap"><div class="ratpill">★ 4.3</div><p>12.4K Delivery</p></div>
<div class="ratpillwrap"><div class="ratpill">★ 4.1</div><p>3.2K Dining</p></div>
</div>
<div class="toggle"><span class="active">Delivery</span><span>Dining Out</span></div>
</div>
<div class="menu">
<div class="catname">Kebabs & Starters</div>
<div class="item">
<div class="iteminfo">
<span class="best">★ Bestseller</span>
<p class="iname"><span class="vegmark nonveg"><span class="tri"></span></span>Seekh Kebab (6 pcs)</p>
<p class="iprice">₩14,500</p>
<p class="irating"><span class="g">★ 4.5</span> (218)</p>
</div>
<div class="thumbwrap"><div class="thumb th1"></div><div class="addbtn">ADD</div></div>
</div>
<div class="item">
<div class="iteminfo">
<p class="iname"><span class="vegmark"><span class="dot"></span></span>Paneer Tikka</p>
<p class="iprice">₩11,000</p>
<p class="irating"><span class="g">★ 4.2</span> (96)</p>
</div>
<div class="thumbwrap"><div class="thumb th2"></div><div class="addbtn">ADD</div></div>
</div>
<div class="item">
<div class="iteminfo">
<p class="iname"><span class="vegmark nonveg"><span class="tri"></span></span>Butter Chicken</p>
<p class="iprice">₩16,000</p>
<p class="irating"><span class="g">★ 4.6</span> (341)</p>
</div>
<div class="thumbwrap"><div class="thumb th3"></div><div class="addbtn">ADD</div></div>
</div>
</div>
</div>
<div class="right">
<h2>My Cart</h2>
<p class="sub">Old Town Kebab House</p>
<div class="bagrow">
<div><p class="bname">Seekh Kebab (6 pcs)</p><p class="bprice">₩14,500</p></div>
<div class="stepper"><span>−</span>1<span>+</span></div>
</div>
<div class="bagrow">
<div><p class="bname">Butter Chicken</p><p class="bprice">₩16,000</p></div>
<div class="stepper"><span>−</span>1<span>+</span></div>
</div>
<div class="billline"><span>Subtotal</span><span>₩30,500</span></div>
<div class="billline"><span>Delivery fee</span><span>₩2,000</span></div>
<div class="billline total"><span>Total</span><span>₩32,500</span></div>
<div class="paybtn">Proceed to Pay · ₩32,500</div>
<div class="gold">👑 Get free delivery with Zomato (iOS) Gold</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3efe8; color: #1b1a1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3efe8; color: #1b1a1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1b1a1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #e22828; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #f3efe8; color: #1b1a1f;
border: 1px solid #e22828; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #383635;
border: 1px solid #bdbab6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e22828; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f3efe8; color:#1b1a1f; box-sizing:border-box;
font-family:'Brandon Grotesque', 'Figtree', Poppins, sans-serif; }
* { box-sizing: border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 58px; height:58px; display:flex; align-items:center; justify-content:space-between;
padding:0 44px; border-bottom:1px solid #e6e6e6; background:#f3efe8; }
.brand { font-size:20px; font-weight:700; letter-spacing:-0.3px; margin:0; color:#1b1a1f; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:12.5px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; color:#808080; }
.navlinks span.on { color:#1b1a1f; border-bottom:2px solid #1b1a1f; padding-bottom:4px; }
.navicons { display:flex; align-items:center; gap:16px; }
.icon-search { width:14px; height:14px; border:1.5px solid #1b1a1f; border-radius:50%; position:relative; }
.icon-search::after { content:''; position:absolute; width:6px; height:1.5px; background:#1b1a1f; right:-5px; bottom:-1px; transform:rotate(45deg); }
.icon-cart { width:17px; height:14px; border:1.5px solid #1b1a1f; border-radius:0 0 3px 3px; position:relative; }
.icon-cart::before { content:''; position:absolute; top:-6px; left:2px; width:10px; height:6px; border:1.5px solid #1b1a1f; border-bottom:none; border-radius:6px 6px 0 0; }
.hero { flex:0 0 148px; height:148px; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:10px; text-align:center; padding:0 40px; background:#f3efe8; }
.hero h1 { margin:0; font-size:32px; font-weight:700; letter-spacing:-0.4px; line-height:1.15; max-width:520px; }
.hero p { margin:0; font-family:'Cardinal Fruit','Figtree',serif; font-size:14.5px; color:#383635; max-width:420px; line-height:1.5; }
.hero-cta { background:#e22828; color:#ffffff; border:none; border-radius:999px; padding:12px 30px;
font-size:14px; font-weight:600; letter-spacing:0.2px; margin-top:4px; }
main.grid { flex:1 1 auto; overflow:hidden; display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
padding:14px 44px 0; }
.card { position:relative; background:#ffffff; border-radius:20px; display:flex; flex-direction:column; overflow:hidden; }
.card-img { flex:0 0 60%; position:relative; }
.img1 { background:linear-gradient(155deg,#e5cba0 0%,#d9a877 55%,#c98a5c 100%); }
.img2 { background:linear-gradient(155deg,#d8cdbd 0%,#b39a7f 55%,#8f7458 100%); }
.img3 { background:linear-gradient(155deg,#e7d9c9 0%,#c9ac8e 55%,#a9835f 100%); }
.card-img::after { content:''; position:absolute; left:50%; bottom:14%; width:34%; height:38%;
transform:translateX(-50%); background:rgba(255,255,255,0.35); border-radius:8px 8px 3px 3px; }
.pill-badge { position:absolute; top:10px; left:10px; z-index:2; border-radius:999px; padding:4px 11px;
font-size:10px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; }
.pill-badge.sale { background:#e22828; color:#ffffff; }
.pill-badge.new { background:#6b3a5b; color:#ffffff; }
.card-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:5px; flex:1; }
.card-body h3 { margin:0; font-size:15.5px; font-weight:600; letter-spacing:0; }
.rating { font-size:11px; color:#1b1a1f; letter-spacing:1px; }
.rating span { color:#808080; font-weight:500; margin-left:5px; letter-spacing:0; font-family:'Brandon Grotesque','Figtree',sans-serif; }
.price-row { display:flex; align-items:baseline; gap:7px; margin-top:2px; }
.price { font-family:'Cardinal Fruit','Figtree',serif; font-size:14.5px; color:#383635; }
.price.sale { color:#e22828; font-weight:600; font-family:'Brandon Grotesque','Figtree',sans-serif; }
.price.orig { font-size:12px; color:#acacac; text-decoration:line-through; font-family:'Brandon Grotesque','Figtree',sans-serif; }
.trustrow { flex:0 0 34px; height:34px; display:flex; align-items:center; justify-content:center; gap:12px; padding:0 40px; }
.trust { background:#f7f5f0; color:#808080; font-size:10.5px; font-weight:500; letter-spacing:0.2px;
border-radius:8px; padding:5px 12px; }
footer { flex:0 0 46px; height:46px; background:#1b1a1f; color:#f3efe8; display:flex; align-items:center;
justify-content:space-between; padding:0 44px; font-size:11.5px; }
footer span.dim { color:#acacac; }
</style></head>
<body>
<nav>
<p class="brand">Arrae</p>
<div class="navlinks">
<span class="on">Shop</span><span>Ingredients</span><span>Our Story</span><span>Reviews</span>
</div>
<div class="navicons">
<div class="icon-search"></div>
<div class="icon-cart"></div>
</div>
</nav>
<section class="hero">
<h1>Wellness, without the noise.</h1>
<p>Clean formulas made from ingredients you can pronounce, in a jar you'll actually want on your shelf.</p>
<button class="hero-cta">Shop Best Sellers</button>
</section>
<main class="grid">
<div class="card">
<div class="card-img img1"><span class="pill-badge sale">Sale</span></div>
<div class="card-body">
<h3>Balance Daily Capsules</h3>
<div class="rating">★★★★★<span>4.8 (2,341)</span></div>
<div class="price-row"><span class="price sale">$42</span><span class="price orig">$52</span></div>
</div>
</div>
<div class="card">
<div class="card-img img2"><span class="pill-badge new">New</span></div>
<div class="card-body">
<h3>Rest Nighttime Blend</h3>
<div class="rating">★★★★★<span>4.9 (876)</span></div>
<div class="price-row"><span class="price">$38</span></div>
</div>
</div>
<div class="card">
<div class="card-img img3"></div>
<div class="card-body">
<h3>Glow Skin Support</h3>
<div class="rating">★★★★☆<span>4.6 (1,204)</span></div>
<div class="price-row"><span class="price">$45</span></div>
</div>
</div>
</main>
<div class="trustrow">
<span class="trust">Free Shipping</span>
<span class="trust">30-Day Guarantee</span>
<span class="trust">Made in USA</span>
</div>
<footer>
<span>© Arrae</span>
<span class="dim">Arrae · Shop · Support · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #202020; color: #fefefe;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #202020; color: #fefefe;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.25; margin: 0; color: #fefefe; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #d8d8d8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #fb940f; color: #000000;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #303030; color: #fefefe;
border: 1px solid #fb940f; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #2a2a2a; color: #fefefe;
border: 1px solid #585858; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #d8d8d8; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffd91a; color: #202020;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#202020; color:#eeeeee; box-sizing:border-box;
font-family:'Founders Grotesk Regular', -apple-system, system-ui, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#202020; border-bottom:1px solid #2e2e2e; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.brand { font-weight:700; font-size:18px; letter-spacing:-0.3px; color:#fefefe; text-transform:uppercase; }
.brand span { color:#fb940f; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#eeeeee;
padding-bottom:4px; }
.navlinks span.on { color:#fefefe; border-bottom:2px solid #fb940f; }
.hero { height:280px; position:relative; display:flex; align-items:center; padding:0 32px;
background:linear-gradient(to right, #202020 40%, #303030 100%); }
.hero h1 { font-weight:700; font-size:56px; line-height:1; text-transform:uppercase; letter-spacing:-1px;
color:#fefefe; margin:0 0 16px; }
.btn { display:inline-block; width:fit-content; background:#fb940f; color:#fff; font-size:15px; font-weight:600;
padding:12px 24px; }
.specrow { display:flex; gap:10px; margin-top:18px; }
.chip { background:#383838; font-size:12px; font-weight:500; letter-spacing:0.3px; text-transform:uppercase;
padding:4px 10px; color:#d8d8d8; }
.chip.hi { background:#02e2f2; color:#202020; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:16px 32px; }
.card { background:#303030; border-radius:8px; padding:14px; }
.cover { height:80px; border-radius:4px; margin-bottom:10px; }
.t { font-size:16px; font-weight:600; margin:0 0 6px; }
.specs { display:flex; gap:6px; margin-bottom:8px; }
.specs span { background:#383838; font-size:10px; font-weight:500; letter-spacing:0.3px; text-transform:uppercase;
padding:3px 8px; border-radius:4px; color:#eeeeee; }
.badge { display:inline-block; background:#ffd91a; color:#202020; font-size:10px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; padding:3px 8px; border-radius:4px; }
footer { position:absolute; bottom:0; left:0; right:0; height:44px; background:#202020; border-top:1px solid #3a3a3a;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; color:#d8d8d8; }
</style></head>
<body>
<nav>
<div class="brand">Falcon Northwest</div>
<div class="navlinks"><span class="on">Talon</span><span>Tiki</span><span>FragBox</span><span>Mach V</span></div>
</nav>
<div class="hero">
<div>
<h1>The Talon</h1>
<span class="btn">Configure Build</span>
<div class="specrow"><span class="chip hi">RTX 5090</span><span class="chip">i9-15900K</span><span class="chip">64GB DDR5</span></div>
</div>
</div>
<div class="grid">
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#fb940f,#e07d00);"></div>
<p class="t">Talon</p><div class="specs"><span>RTX 5090</span><span>i9</span></div><span class="badge">Elite</span></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#02e2f2,#0298a3);"></div>
<p class="t">Tiki</p><div class="specs"><span>RTX 4080</span><span>Ryzen 9</span></div><span class="badge" style="background:#00ff85;">In Stock</span></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#383838,#555;);"></div>
<p class="t">FragBox</p><div class="specs"><span>RTX 4070</span><span>i7</span></div></div>
</div>
<footer><span>© Falcon Northwest — Custom-built gaming PCs</span><span>Systems · Support · Warranty</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.15; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #788188; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.6px; background: #cad618; color: #212121;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.6px; background: #212121; color: #ffffff;
border: 1px solid #cad618; border-radius: 4px;
padding: 14px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #212121;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #788188; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #383c41; color: #cad618;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#231f20; color:#fff; box-sizing:border-box;
font-family:'Galaxie Polaris Book',Arial,sans-serif; }
* { box-sizing:border-box; }
.promo { background:#cad618; color:#212121; text-align:center; font-size:12px; font-weight:700; letter-spacing:0.5px;
text-transform:uppercase; height:32px; display:flex; align-items:center; justify-content:center; }
nav { height:56px; background:#212121; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-family:'Galaxie Polaris Condensed',Arial,sans-serif; font-size:19px; font-weight:700; }
.navlinks { display:flex; gap:20px; }
.navlinks span { font-size:14px; font-weight:600; letter-spacing:0.25px; }
.navlinks span.active { color:#cad618; }
.hero { position:relative; min-height:220px; display:flex; align-items:center; padding:0 32px;
background:linear-gradient(90deg, #1b1e21 40%, transparent), radial-gradient(circle at 75% 50%, #2c3540, #12151a 70%); }
.heroText { max-width:400px; position:relative; z-index:1; }
.headline { font-family:'Galaxie Polaris Condensed',Arial,sans-serif; font-size:44px; font-weight:700; line-height:1.0;
letter-spacing:-0.5px; margin-bottom:14px; }
.sub { font-size:16px; margin-bottom:16px; opacity:0.85; }
.btnRow { display:flex; gap:12px; }
.btnPrimary { background:#cad618; color:#212121; border-radius:4px; padding:14px 28px; font-size:14px; font-weight:700;
letter-spacing:0.6px; text-transform:uppercase; }
.btnOutline { background:transparent; border:2px solid #fff; color:#fff; border-radius:4px; padding:12px 26px; font-size:14px;
font-weight:700; letter-spacing:0.6px; text-transform:uppercase; }
.powerBar { padding:14px 32px; display:flex; align-items:center; gap:12px; }
.track { flex:1; height:8px; background:#d2d3d3; border-radius:4px; overflow:hidden; }
.fill { width:72%; height:100%; background:#cad618; }
.pct { font-size:13px; color:#cad618; font-weight:700; }
.section { padding:14px 32px 0; }
.section h2 { font-family:'Galaxie Polaris Condensed',Arial,sans-serif; font-size:22px; font-weight:700; margin-bottom:14px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#fff; color:#212121; border:1px solid #d2d3d3; border-radius:4px; padding:14px; }
.photo { aspect-ratio:1/1; background:#efefef; margin-bottom:8px; position:relative; }
.c1 .photo { background:linear-gradient(150deg,#383c41,#12151a); }
.c2 .photo { background:linear-gradient(150deg,#cad618,#7a9e0d); }
.c3 .photo { background:linear-gradient(150deg,#7796a8,#1c3a52); }
.specTag { position:absolute; bottom:6px; left:6px; background:#383c41; color:#cad618; font-size:10px; font-weight:700;
text-transform:uppercase; padding:3px 8px; }
.name { font-size:16px; font-weight:600; }
.price { font-family:'Galaxie Polaris Condensed',Arial,sans-serif; font-size:22px; font-weight:700; margin-top:4px; }
</style></head>
<body>
<div class="promo">Free Shipping on Orders Over $99</div>
<nav>
<div class="brand">Goal Zero Cell Pho 2</div>
<div class="navlinks"><span class="active">Power Stations</span><span>Solar</span><span>Accessories</span></div>
</nav>
<div class="hero">
<div class="heroText">
<div class="headline">Power that goes wherever you do.</div>
<div class="sub">Portable power stations engineered for off-grid life.</div>
<div class="btnRow"><div class="btnPrimary">Shop Now</div><div class="btnOutline">Learn More</div></div>
</div>
</div>
<div class="powerBar"><div class="track"><div class="fill"></div></div><div class="pct">72%</div></div>
<div class="section">
<h2>Featured Gear</h2>
<div class="grid">
<div class="card c1"><div class="photo"><div class="specTag">1516Wh</div></div><div class="name">Yeti 1500X</div><div class="price">$1,999.95</div></div>
<div class="card c2"><div class="photo"><div class="specTag">100W</div></div><div class="name">Boulder 100 Briefcase</div><div class="price">$249.95</div></div>
<div class="card c3"><div class="photo"><div class="specTag">983Wh</div></div><div class="name">Yeti 1000X</div><div class="price">$1,299.95</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff385c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff385c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5a5f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff385c; color: #000000;
border: 1px solid #ff5a5f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff385c; color: #f5f5f5;
border: 1px solid #fd5674; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff3d5c; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#484848; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:20px; font-weight:800; color:#FF385C; margin:0; letter-spacing:-0.3px; }
.navtabs { display:flex; gap:30px; font-size:15px; font-weight:800; color:#484848; }
.navtabs span { opacity:0.45; }
.navtabs span.on { opacity:1; border-bottom:2px solid #222222; padding-bottom:4px; }
.avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#767676,#484848); }
.search { margin:0 36px 14px; height:52px; border-radius:999px; border:0.5px solid #EBEBEB;
box-shadow:rgba(0,0,0,0.08) 0 4px 12px, rgba(0,0,0,0.04) 0 1px 2px;
display:flex; align-items:center; padding:0 22px; gap:16px; font-size:13px; color:#767676; }
.search b { color:#222222; font-weight:700; font-size:14px; }
.search .div { width:1px; height:18px; background:#EBEBEB; }
.catbar { margin:0 36px 16px; display:flex; gap:28px; border-bottom:0.5px solid #EBEBEB; padding-bottom:10px; }
.cat { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:11px; font-weight:600; color:#717171; }
.cat .ic { width:20px; height:20px; border-radius:5px; background:#EBEBEB; }
.cat.on { color:#222222; }
.cat.on .ic { background:#FC642D; }
.cat.on span.u { display:block; width:100%; height:2px; background:#222222; margin-top:1px; }
.cat span.u { height:2px; visibility:hidden; }
.body { padding:0 36px; display:flex; gap:24px; }
.card { width:440px; background:#fff; }
.photo { position:relative; width:100%; height:260px; border-radius:16px; overflow:hidden;
background:linear-gradient(135deg,#f7c59f 0%,#efb0a1 40%,#c68fa0 75%,#7d5a8c 100%); }
.heart { position:absolute; top:12px; right:12px; width:26px; height:26px; border-radius:50%;
background:#FF385C; box-shadow:rgba(0,0,0,0.2) 0 2px 4px; }
.dots { position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:5px; }
.dot { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.55); }
.dot.on { background:#fff; }
.rating { display:flex; align-items:center; gap:4px; font-size:13px; font-weight:500; margin-top:10px; }
.rating b { font-weight:500; }
.title2 { font-size:16px; font-weight:600; margin-top:3px; }
.subtitle { font-size:13px; color:#767676; margin-top:2px; }
.dates { font-size:13px; color:#767676; margin-top:5px; }
.priceline { font-size:15px; font-weight:700; margin-top:5px; }
.priceline span { font-weight:400; }
.side { flex:1; display:flex; flex-direction:column; gap:16px; padding-top:2px; }
.mini { display:flex; gap:12px; }
.miniphoto { width:96px; height:76px; border-radius:12px; flex-shrink:0; }
.minititle { font-size:14px; font-weight:600; }
.minisub { font-size:12px; color:#767676; margin-top:2px; }
.miniprice { font-size:13px; font-weight:700; margin-top:4px; }
.footer2 { margin-top:auto; display:flex; align-items:center; justify-content:space-between;
border-top:0.5px solid #EBEBEB; padding-top:14px; }
.footprice { font-size:16px; font-weight:700; color:#222222; }
.footprice small { font-weight:400; color:#767676; }
.reserve { background:#FF385C; color:#fff; font-weight:700; font-size:14px; border-radius:8px; padding:11px 26px; }
</style></head>
<body>
<nav>
<p class="brand">Airbnb (iOS)</p>
<div class="navtabs"><span class="on">Explore</span><span>Wishlists</span><span>Trips</span><span>Inbox</span></div>
<div class="avatar"></div>
</nav>
<div class="search">
<span>🔍</span><b>Where to?</b><span class="div"></span><span>Anywhere</span><span class="div"></span><span>Any week</span><span class="div"></span><span>Add guests</span>
</div>
<div class="catbar">
<div class="cat on"><div class="ic"></div>Amazing views<span class="u"></span></div>
<div class="cat"><div class="ic"></div>Cabins<span class="u"></span></div>
<div class="cat"><div class="ic"></div>Trending<span class="u"></span></div>
<div class="cat"><div class="ic"></div>Beachfront<span class="u"></span></div>
<div class="cat"><div class="ic"></div>Design<span class="u"></span></div>
</div>
<div class="body">
<div class="card">
<div class="photo">
<div class="heart"></div>
<div class="dots"><span class="dot on"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
</div>
<div class="rating">★ <b>4.92</b> · 324</div>
<div class="title2">Private room in Reykjavík</div>
<div class="subtitle">Hosted by Sigrún · Superhost</div>
<div class="dates">Oct 12 – 17</div>
<div class="priceline">$214 <span>night</span></div>
<div class="footer2">
<div class="footprice">$1,284 <small>total</small></div>
<div class="reserve">Reserve</div>
</div>
</div>
<div class="side">
<div class="mini">
<div class="miniphoto" style="background:linear-gradient(135deg,#a8c5b0,#5f8b6e)"></div>
<div><div class="minititle">Dome in Joshua Tree</div><div class="minisub">★ 4.98 · Superhost</div><div class="miniprice">$342 night</div></div>
</div>
<div class="mini">
<div class="miniphoto" style="background:linear-gradient(135deg,#e8c39e,#b9754a)"></div>
<div><div class="minititle">Farmhouse in Tuscany</div><div class="minisub">★ 4.87 · 210 reviews</div><div class="miniprice">$186 night</div></div>
</div>
<div class="mini">
<div class="miniphoto" style="background:linear-gradient(135deg,#9fc9d3,#4c7d8c)"></div>
<div><div class="minititle">Micro-apartment in Tokyo</div><div class="minisub">★ 4.79 · 98 reviews</div><div class="miniprice">$97 night</div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfbf7; color: #2d2d2d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfbf7; color: #2d2d2d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #2d2d2d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #505050; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #0073e5; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #fcfbf7; color: #2d2d2d;
border: 1px solid #0073e5; border-radius: 4px;
padding: 10px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfbf7; color: #2d2d2d;
border: 1px solid #c8c8c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #505050; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #9b1b30; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Source Sans Pro',Arial,sans-serif; background:#fcfbf7; color:#2d2d2d; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:'Open Sans Condensed',Arial,sans-serif;font-size:20px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
.navlinks{display:flex;gap:24px;font-family:'Open Sans Condensed',Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
.navlinks .a{color:#0073e5;border-bottom:2px solid #0073e5;padding-bottom:24px;}
.hero{height:250px;background:#111111;display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;}
.hero:after{content:'';position:absolute;right:80px;top:40px;width:220px;height:170px;border-radius:50% 50% 40% 40%;background:linear-gradient(150deg,#d7b87e,#796545);box-shadow:0 14px 30px rgba(0,0,0,.4);}
.strings{position:absolute;right:170px;top:56px;width:2px;height:140px;background:#8c8c8c;}
.herotext{width:440px;color:#fcfbf7;}
.herotext h1{font-family:'Montserrat',Arial,sans-serif;font-size:32px;font-weight:700;letter-spacing:-.5px;margin:0 0 12px;line-height:1.2;}
.herotext p{font-size:15px;color:#c9c9be;margin:0 0 18px;max-width:340px;}
.hbtn{display:inline-block;background:#0073e5;color:#fff;font-family:'Montserrat',Arial,sans-serif;font-size:14px;font-weight:600;letter-spacing:.3px;padding:12px 26px;border-radius:4px;}
.hbtn.brass{background:#d7b87e;color:#111111;margin-left:10px;}
.ctarow{display:flex;}
.sec{padding:22px 40px 0;}
.sectitle{font-family:'Montserrat',Arial,sans-serif;font-size:18px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:196px;background:#fff;border:1px solid #eeeeee;border-radius:8px;overflow:hidden;}
.thumb{height:104px;border-radius:8px 8px 0 0;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-family:'Montserrat',Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;color:#fff;background:#9b1b30;}
.badge.brass{background:#d7b87e;color:#111111;}
.cbody{padding:12px;}
.series{font-family:'Montserrat',Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#505050;}
.ptitle{font-family:'Montserrat',Arial,sans-serif;font-size:16px;font-weight:600;margin:4px 0;}
.pprice{font-size:14px;color:#444444;}
.footer{position:absolute;bottom:0;left:0;right:0;height:46px;background:#111111;color:#949494;font-size:12px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.footer b{color:#d7b87e;}
</style>
<div class="wrap">
<div class="nav"><div class="logo">NS Design</div><div class="navlinks"><span class="a">Electric Violins</span><span>Cellos</span><span>Amplification</span><span>Accessories</span></div></div>
<div class="hero">
<div class="strings"></div>
<div class="herotext"><h1>Precision strung for the stage.</h1><p>Electric strings engineered with the same exactness as the pickups that carry them.</p><div class="ctarow"><div class="hbtn">Configure a Model</div><div class="hbtn brass">Find a Dealer</div></div></div>
</div>
<div class="sec">
<div class="sectitle">Featured Instruments</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d7b87e,#796545)"><div class="badge">New</div></div><div class="cbody"><div class="series">CR Series</div><div class="ptitle">CR5 Electric Cello</div><div class="pprice">$2,690</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0073e5,#003d80)"></div><div class="cbody"><div class="series">WAV Series</div><div class="ptitle">WAV5 Electric Violin</div><div class="pprice">$1,890</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#625137,#1a1a1a)"><div class="badge brass">Sale</div></div><div class="cbody"><div class="series">NXTa Series</div><div class="ptitle">NXTa 5-String</div><div class="pprice">$2,150</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#9b1b30,#4a0d15)"></div><div class="cbody"><div class="series">Amplification</div><div class="ptitle">NS Design AMP1</div><div class="pprice">$495</div></div></div>
</div>
</div>
<div class="footer"><span>Engineered where instrument meets amplifier</span><span><b>Compare Models</b> · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #e99292; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 1.5px; background: #cc3b3b; color: #f5f5f5;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 1.5px; background: transparent; color: #000000;
border: 1px solid #112233; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #111111;
border: 1px solid #c0c0c0; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e99292; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 1.5px; background: #cc3b3b; color: #f5f5f5;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:Arial,'Helvetica Neue',sans-serif; color:#272727; }
*{box-sizing:border-box;}
.nav{height:56px;background:#112233;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Josefin Sans',Arial,sans-serif;font-size:19px;font-weight:600;letter-spacing:.4px;color:#eeeeee;}
.navlinks{display:flex;gap:20px;font-family:'Oswald',Arial,sans-serif;font-size:11px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:#aaaaaa;}
.hero{height:230px;background:#040404;display:flex;align-items:center;padding:0 32px;}
.heroText{width:430px;}
.eyebrow{font-family:'Oswald',Arial,sans-serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#cc3b3b;margin-bottom:12px;}
.h1{font-family:'Josefin Sans',Arial,sans-serif;font-size:32px;font-weight:600;line-height:1.15;color:#f5f5f5;margin:0 0 14px;}
.sub{font-size:13px;line-height:1.6;color:#aaaaaa;margin:0 0 18px;max-width:370px;}
.btn{display:inline-block;background:#cc3b3b;color:#f5f5f5;font-family:'Oswald',Arial,sans-serif;font-size:12px;letter-spacing:.5px;text-transform:uppercase;padding:12px 24px;}
.guitarWrap{margin-left:auto;width:100px;height:190px;position:relative;}
.gbody{position:absolute;width:80px;height:110px;border-radius:50% 50% 40% 40%;background:radial-gradient(circle at 35% 30%,#cc3b3b,#1e1e1e 75%);bottom:0;left:10px;box-shadow:0 0 30px rgba(204,59,59,.25);}
.gneck{position:absolute;width:12px;height:100px;background:#112233;top:0;left:44px;}
.sec{background:#fff;padding:20px 32px 0;}
.secTitle{font-family:'Oswald',Arial,sans-serif;font-size:14px;letter-spacing:.6px;text-transform:uppercase;color:#111111;margin-bottom:14px;}
.grid{display:flex;gap:12px;}
.card{width:224px;background:#f7f7f7;padding:10px;}
.thumb{height:94px;background:#eeeeee;margin-bottom:8px;}
.pname{font-family:'Josefin Sans',Arial,sans-serif;font-size:13px;font-weight:600;color:#111111;margin:0 0 4px;}
.pprice{font-size:13px;font-weight:700;color:#cc3b3b;}
</style>
<div class="nav">
<div class="logo">Tom Anderson</div>
<div class="navlinks"><span>Electric</span><span>Signature Models</span><span>Hardware</span><span>Dealers</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">Precision-Machined</div>
<div class="h1">Every layout decision defers to the guitar.</div>
<div class="sub">Instruments built by a workshop, not a factory — grain and finish under studio light.</div>
<div class="btn">View Model Catalog</div>
</div>
<div class="guitarWrap"><div class="gneck"></div><div class="gbody"></div></div>
</div>
<div class="sec">
<div class="secTitle">Current Models</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 35% 30%,#cc3b3b,#112233 75%);"></div><div class="pname">Drop Top Classic</div><div class="pprice">$4,890</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 35% 30%,#bd0000,#040404 75%);"></div><div class="pname">Hollow Classic S</div><div class="pprice">$5,200</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 35% 30%,#e99292,#112233 75%);"></div><div class="pname">Angel Player Series</div><div class="pprice">$3,650</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 35% 30%,#112233,#cc3b3b 75%);"></div><div class="pname">Cobra Custom Set</div><div class="pprice">$6,100</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; background: #0066cc; color: #ffffff;
border: none; border-radius: 2px; padding: 8px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; background: #ffffff; color: #0066cc;
border: 1px solid #0066cc; border-radius: 2px;
padding: 7px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.3px; background: #2e7d32; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; font-family:Arial,'Helvetica Neue',Roboto,sans-serif; color:#444444;
}
*{box-sizing:border-box;}
.topbar{background:#313131;color:#fff;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:11px;letter-spacing:.3px;}
.topbar span{color:#cfcfcf;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #dddddd;background:#fff;}
.logo{font-weight:700;font-size:22px;letter-spacing:-0.5px;color:#313131;}
.logo b{color:#0066cc;}
.navlinks{display:flex;gap:18px;font-size:12px;font-weight:700;color:#313131;text-transform:uppercase;letter-spacing:.4px;}
.search-hero{background:#313131;padding:20px 18px 22px;display:flex;flex-direction:column;gap:10px;}
.search-hero h1{color:#fff;font-size:20px;font-weight:700;margin:0;letter-spacing:-.3px;}
.search-hero p{color:#b9b9b9;font-size:11px;margin:0;}
.searchbar{display:flex;height:42px;border-radius:2px;overflow:hidden;background:#fff;}
.searchbar input{flex:1;border:none;padding:0 14px;font-size:13px;font-family:inherit;color:#313131;}
.searchbar button{width:110px;background:#e85000;color:#fff;border:none;font-weight:700;font-size:12px;letter-spacing:.3px;text-transform:uppercase;cursor:default;}
.catrow{display:flex;gap:0;background:#f5f5f5;border-bottom:1px solid #dddddd;padding:0 18px;}
.catchip{padding:9px 12px;font-size:11px;font-weight:700;color:#313131;border-right:1px solid #dddddd;}
.catchip.active{background:#0066cc;color:#fff;}
.body{display:flex;gap:14px;padding:14px 18px;}
.col-l{width:150px;font-size:11px;}
.col-l h4{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:#767676;margin:0 0 6px;border-bottom:1px solid #dddddd;padding-bottom:4px;}
.col-l div{padding:4px 0;color:#444;border-bottom:1px solid #eeeeee;}
.grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.card{border:1px solid #dddddd;border-radius:2px;padding:8px;background:#fff;}
.swatch{height:64px;border-radius:2px;margin-bottom:6px;background:linear-gradient(135deg,#e8f0fb,#c9dcf5);display:flex;align-items:center;justify-content:center;}
.swatch .chip{width:34px;height:44px;background:#313131;border-radius:2px;position:relative;}
.swatch .chip::after{content:'';position:absolute;top:6px;left:6px;right:6px;height:4px;background:#0066cc;}
.pn{font-family:Consolas,monospace;font-size:10px;color:#767676;}
.pname{font-size:11px;font-weight:700;color:#313131;margin:3px 0;line-height:1.2;}
.stock{font-size:9px;font-weight:700;color:#2e7d32;text-transform:uppercase;}
.price{font-size:13px;font-weight:700;color:#313131;float:right;}
.btnq{display:block;margin-top:6px;background:#e85000;color:#fff;text-align:center;font-size:10px;font-weight:700;padding:5px 0;border-radius:2px;text-transform:uppercase;}
</style>
<div class="topbar"><span>Galco Industrial Electronics · 165,000+ SKUs in stock · Same-Day Ship</span><span>Login | Request Quote | (800) 555-0134</span></div>
<div class="nav">
<div class="logo">Galco Industrial Electronics</div>
<div class="navlinks"><span>Drives</span><span>Motors</span><span>Sensors</span><span>PLCs</span><span>Power Supplies</span><span>Datasheets</span></div>
</div>
<div class="search-hero">
<h1>Search 165,000+ Industrial Electronics SKUs</h1>
<p>Enter a part number, manufacturer cross-reference, or keyword — Allen-Bradley, Siemens, ABB, Schneider.</p>
<div class="searchbar"><input value="AB 1756-L73 ControlLogix Processor" readonly><button>Check Availability</button></div>
</div>
<div class="catrow">
<div class="catchip active">AC Drives</div><div class="catchip">Servo Motors</div><div class="catchip">Photoeyes</div>
<div class="catchip">Contactors</div><div class="catchip">HMI Panels</div><div class="catchip">Circuit Protection</div><div class="catchip">Cable & Connectors</div>
</div>
<div class="body">
<div class="col-l">
<h4>Manufacturer</h4>
<div>Allen-Bradley</div><div>Siemens</div><div>ABB</div><div>Schneider Electric</div><div>Omron</div>
<h4 style="margin-top:10px;">Availability</h4>
<div>In Stock (2,340)</div><div>Ships Today</div><div>Special Order</div>
</div>
<div class="grid">
<div class="card"><div class="swatch"><div class="chip"></div></div><div class="pn">PN 1756-L73</div><div class="pname">ControlLogix 5570 Processor Module</div><div class="stock">In Stock: 48</div><div class="price">$4,812.00</div><a class="btnq">Add to Cart</a></div>
<div class="card"><div class="swatch"><div class="chip"></div></div><div class="pn">PN 6SL3210</div><div class="pname">Sinamics G120 AC Drive, 7.5kW</div><div class="stock">In Stock: 12</div><div class="price">$1,204.50</div><a class="btnq">Add to Cart</a></div>
<div class="card"><div class="swatch"><div class="chip"></div></div><div class="pn">PN 42EF-D2</div><div class="pname">MiniSight Photoelectric Sensor</div><div class="stock">In Stock: 310</div><div class="price">$62.10</div><a class="btnq">Add to Cart</a></div>
<div class="card"><div class="swatch"><div class="chip"></div></div><div class="pn">PN 100-C23</div><div class="pname">IEC Contactor, 23A, 3-Pole</div><div class="stock">In Stock: 96</div><div class="price">$88.75</div><a class="btnq">Add to Cart</a></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #007ff5; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #007ff5; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87c0f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3b4043; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007ff5; color: #3b4043;
border: 1px solid #3b4043; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #007ff5; color: #f5f5f5;
border: 1px solid #2792f5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87c0f5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0975d9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#282a2b; color:#ffffff; box-sizing:border-box;
font-family:"Pretendard",sans-serif; letter-spacing:-0.5px; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:700; margin:0; color:#ffffff; }
.navlinks { display:flex; gap:20px; font-size:14px; opacity:0.8; }
.cbtn { background:#ffffff; color:#000000; border:1px solid #000000; border-radius:8px; height:38px; padding:0 16px; font-size:15px; font-weight:700; display:flex; align-items:center; }
.hero { padding:26px 40px 20px; }
.eyebrow { color:#007ff5; font-size:16px; font-weight:700; margin-bottom:8px; }
.hero h1 { font-size:44px; font-weight:700; line-height:1.3; margin:0 0 18px; max-width:640px; }
.row { display:flex; gap:12px; }
.darkpill { background:#3b4043; color:#ffffff; border-radius:90px; padding:16px 30px; font-size:16px; font-weight:700; }
.outlinepill { background:transparent; color:#007ff5; border:1px solid #007ff5; border-radius:90px; padding:16px 24px; font-size:16px; font-weight:700; }
.whitesection { background:#ffffff; color:#000000; padding:28px 40px; }
.whitesection .eyebrow2 { color:#007ff5; font-size:16px; font-weight:700; margin-bottom:10px; }
.whitesection h2 { font-size:32px; font-weight:700; margin:0 0 18px; max-width:600px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#ffffff; border:1px solid #eceff1; border-radius:30px; padding:20px; }
.card h3 { font-size:16px; font-weight:700; margin:0 0 6px; }
.card p { font-size:13px; color:#596066; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">SIONIC AI</p>
<div class="navlinks"><span>STORM PLATFORM</span><span>USE CASE</span><span>NEWS</span></div>
<span class="cbtn">Contact us</span>
</nav>
<section class="hero">
<div class="eyebrow">STORM PLATFORM</div>
<h1>The Power of AI for Every Business</h1>
<div class="row"><span class="darkpill">Learn More</span><span class="outlinepill">Explore STORM PLATFORM</span></div>
</section>
<div class="whitesection">
<div class="eyebrow2">USE CASE</div>
<h2>Reliable, Hallucination-Free Answers</h2>
<div class="cards">
<div class="card"><h3>Optimized for RAG</h3><p>Grounded in your own company data.</p></div>
<div class="card"><h3>No Experts Needed</h3><p>Anyone can design and deploy AI agents.</p></div>
<div class="card"><h3>Data Engine</h3><p>Turns messy documents into clean context.</p></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fafafa; color: #1a1a1a;
border: 1px solid #108474; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #fafafa; color: #1a1a1a;
border: 1px solid #c2c2c2; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:'Montserrat',Arial,sans-serif; color:#555; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fafafa;border-bottom:1px solid #e9e9e9;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:600;color:#1a1a1a;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.navlinks span:first-child{color:#1a1a1a;border-bottom:2px solid #108474;padding-bottom:20px;}
.navlinks span{color:#808080;}
.hero{margin:20px 32px 0;background:#f5f5f5;border-radius:20px;padding:40px 44px;display:flex;align-items:center;justify-content:space-between;}
.h1{font-size:36px;font-weight:600;letter-spacing:-.5px;color:#1a1a1a;max-width:400px;line-height:1.15;margin:0 0 12px;}
.sub{font-size:15px;color:#555;max-width:380px;margin:0 0 18px;}
.cta{display:inline-block;background:#108474;color:#fff;font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:12px 26px;border-radius:8px;}
.hpack{width:170px;height:130px;border-radius:20px;background:linear-gradient(135deg,#108474,#0d6b5c);position:relative;}
.hpack:before{content:'';position:absolute;width:60px;height:30px;background:#fbcd0a;border-radius:9999px;bottom:20px;left:20px;}
.grid{display:flex;gap:16px;padding:20px 32px 0;}
.card{width:210px;background:#fff;border-radius:12px;overflow:hidden;}
.thumb{height:110px;background:#f5f5f5;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#108474;color:#fff;font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.badge.sale{background:#fbcd0a;color:#1a1a1a;}
.cardbody{padding:12px 14px 16px;}
.ptitle{font-size:14px;font-weight:600;color:#1a1a1a;}
.pprice{font-size:14px;color:#555;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#1a1a1a;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#fafafa;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Matador</div>
<div class="navlinks"><span>Shop</span><span>Explore</span><span>About</span></div>
</div>
<div class="hero">
<div>
<div class="h1">Gear that folds into your pocket, not your plans.</div>
<div class="sub">Packable hip packs and travel essentials built for granite, snow, and sandstone.</div>
<div class="cta">Shop Now</div>
</div>
<div class="hpack"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge sale">Sale</div></div><div class="cardbody"><div class="ptitle">Packable Hip Pack 2.0</div><div class="pprice">$24.99</div></div></div>
<div class="card"><div class="thumb"><div class="badge">Best Seller</div></div><div class="cardbody"><div class="ptitle">Freerain Rain Shell</div><div class="pprice">$99.99</div></div></div>
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="ptitle">Flatpak Toiletry Bottle</div><div class="pprice">$14.99</div></div></div>
</div>
<div class="footer"><span>© Packable Adventure Gear</span><span>Shop · Support · About</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00aff0; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00aff0; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0078d4; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00aff0; color: #000000;
border: 1px solid #0078d4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00aff0; color: #000000;
border: 1px solid #27baf1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00a6ec; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#16161A; color:#F2F2F4; box-sizing:border-box;
font-family:"Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.th-hdr { height:56px; display:flex; align-items:center; gap:12px; padding:0 26px; border-bottom:0.5px solid #34343C; }
.av { width:36px; height:36px; border-radius:50%; position:relative; background:linear-gradient(135deg,#34C3FF,#0078D4); }
.av::after { content:''; position:absolute; bottom:0; right:0; width:9px; height:9px; border-radius:50%; background:#2DC26B; border:2px solid #16161A; }
.th-name { font-size:15px; font-weight:700; }
.th-status { font-size:11px; color:#2DC26B; }
.icons { margin-left:auto; display:flex; gap:20px; color:#00AFF0; font-size:20px; }
.msgs { padding:20px 26px; display:flex; flex-direction:column; gap:6px; }
.bubble { max-width:60%; padding:9px 14px; border-radius:14px; font-size:15px; }
.in { align-self:flex-start; background:#2A2A30; border-bottom-left-radius:4px; }
.out { align-self:flex-end; background:#0078D4; color:#fff; border-bottom-right-radius:4px; }
.callcard { align-self:flex-start; display:flex; gap:10px; align-items:center; background:#2A2A30; border-radius:14px; padding:10px 14px; margin:6px 0; }
.call-ic { width:30px; height:30px; border-radius:50%; background:rgba(45,194,107,.18); color:#2DC26B; display:flex; align-items:center; justify-content:center; font-size:14px; }
.call-title { font-size:13px; font-weight:700; }
.call-sub { font-size:11px; color:#A4A4AE; }
.grid-wrap { padding:16px 26px; }
.grid-hdr { font-size:13px; font-weight:700; margin-bottom:10px; color:#A4A4AE; }
.vgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.tile { position:relative; border-radius:14px; height:130px; overflow:hidden; }
.tile .name { position:absolute; bottom:8px; left:8px; font-size:11px; font-weight:600; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.tile .mic { position:absolute; top:8px; right:8px; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,.45); }
.ctrl-bar { position:absolute; bottom:20px; left:0; right:0; display:flex; justify-content:center; gap:14px; }
.cbtn { width:52px; height:52px; border-radius:50%; background:#2A2A30; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; }
.cbtn.end { background:#E8364F; }
</style></head>
<body>
<div class="th-hdr">
<div class="av"></div>
<div><div class="th-name">Family Group</div><div class="th-status">Active now</div></div>
<div style="margin-left:14px; font-size:11px; font-weight:700; color:#00AFF0; letter-spacing:.3px;">Skype (iOS)</div>
<div class="icons">📞 📹</div>
</div>
<div class="msgs">
<div class="bubble in">did you guys see the photos from the trip?</div>
<div class="bubble out">yes!! sending you the best ones now</div>
<div class="callcard"><div class="call-ic">📹</div><div><div class="call-title">Group video call</div><div class="call-sub">12 min · 3 participants</div></div></div>
<div class="bubble in">that beach shot is incredible 😍</div>
</div>
<div class="grid-wrap">
<div class="grid-hdr">Live · Group video call</div>
<div class="vgrid">
<div class="tile" style="background:linear-gradient(135deg,#34C3FF,#0078D4);"><div class="mic"></div><div class="name">Dana</div></div>
<div class="tile" style="background:linear-gradient(135deg,#8a6fd1,#4a3a8f);"><div class="mic"></div><div class="name">Marek</div></div>
</div>
</div>
<div class="ctrl-bar">
<div class="cbtn">🎤</div><div class="cbtn">📹</div><div class="cbtn end">☎</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfbfe; color: #141b38;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfbfe; color: #141b38;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #141b38; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #003388; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #fcfbfe; color: #003388;
border: 1px solid #003388; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.63; background: #fcfbfe; color: #141b38;
border: 1px solid #c2c3cc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.3px; background: #aa0000; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fcfbfe; font-family:'Open Sans',Arial,Helvetica,sans-serif; color:#141b38; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#003388;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#ccffff;}
.search{background:#fff;color:#767676;font-size:12px;padding:8px 18px;border-radius:9999px;}
.hero{height:222px;display:flex;align-items:center;padding:0 40px;background:linear-gradient(120deg,#ccffff 0%,#e9e6ed 60%,#fcfbfe 100%);position:relative;overflow:hidden;}
.sax{position:absolute;right:90px;top:20px;width:60px;height:180px;border-radius:30px 30px 10px 60px;background:linear-gradient(160deg,#fa9b57,#003388 80%);transform:rotate(8deg);}
.sax:before{content:'';position:absolute;left:8px;top:20px;width:44px;height:120px;background:repeating-linear-gradient(0deg,rgba(255,255,255,0.35) 0 4px,transparent 4px 14px);}
.herotext{max-width:420px;position:relative;z-index:2;}
.h1{font-size:32px;font-weight:700;line-height:1.2;color:#141b38;margin:0 0 10px;}
.sub{font-size:14px;color:#434960;line-height:1.5;margin:0 0 16px;max-width:330px;}
.btn{display:inline-block;background:#003388;color:#fff;font-size:14px;font-weight:700;padding:12px 26px;border-radius:4px;}
.badgerow{display:flex;gap:8px;padding:16px 40px 0;}
.badge{font-size:11px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;padding:5px 10px;border-radius:4px;}
.badge.limited{background:#720eec;color:#fff;}
.badge.sale{background:#aa0000;color:#fff;}
.badge.new{background:#008a20;color:#fff;}
.grid{display:flex;gap:14px;padding:14px 40px 0;}
.card{width:196px;background:#fff;border:1px solid #dcdde1;border-radius:4px;overflow:hidden;}
.thumb{height:92px;}
.cbody{padding:11px 13px;}
.ctitle{font-size:14px;font-weight:700;margin:0 0 4px;color:#141b38;}
.stars{color:#ffba00;font-size:11px;margin-bottom:4px;}
.cprice{font-size:15px;font-weight:700;color:#003388;margin:0;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#003388;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;color:#ccffff;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">P Mauriat</div>
<div class="navlinks"><span>Saxophones</span><span>Mouthpieces</span><span>Artists</span></div>
<div class="search">Search models...</div>
</div>
<div class="hero">
<div class="sax"></div>
<div class="herotext">
<div class="h1">Precision, in every key.</div>
<div class="sub">Professional saxophones engineered for stage clarity and studio precision — dark lacquer, clean voice.</div>
<div class="btn">Shop Saxophones</div>
</div>
</div>
<div class="badgerow">
<div class="badge limited">Limited Edition</div>
<div class="badge sale">Sale</div>
<div class="badge new">New</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003388,#fa9b57)"></div><div class="cbody"><div class="ctitle">PMXT-66R Tenor</div><div class="stars">★★★★★</div><div class="cprice">$2,895</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#247390,#003388)"></div><div class="cbody"><div class="ctitle">System 76 Alto</div><div class="stars">★★★★★</div><div class="cprice">$3,195</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0068a0,#141b38)"></div><div class="cbody"><div class="ctitle">Hard-Rubber Mouthpiece</div><div class="stars">★★★★☆</div><div class="cprice">$189</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#720eec,#003388)"></div><div class="cbody"><div class="ctitle">Master Series Soprano</div><div class="stars">★★★★★</div><div class="cprice">$3,895</div></div></div>
</div>
<div class="footer"><span>Play-Tested Before Shipping</span><span>Artist Endorsed Worldwide</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f4; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f4; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #009be3; color: #ffffff;
border: none; border-radius: 0px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #f4f4f4; color: #1e1e1e;
border: 1px solid #009be3; border-radius: 0px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1e1e1e;
border: 1px solid #bebebe; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #a0a600; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Honest Jon's Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,Arial,'Helvetica Neue',sans-serif; background:#f4f4f4; color:#444444; }
*{box-sizing:border-box;}
.nav{height:48px;background:#fff;border-bottom:1px solid #d7d7d7;display:flex;align-items:center;padding:0 24px;justify-content:space-between;}
.logo{font-family:'Myriad Pro Regular','Helvetica Neue',Arial,sans-serif;font-size:20px;color:#1e1e1e;}
.logo span{color:#009be3;}
.navlinks{display:flex;gap:18px;font-family:'Myriad Pro Regular',Arial,sans-serif;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:#1e1e1e;}
.navlinks .active{color:#009be3;border-bottom:2px solid #009be3;padding-bottom:14px;}
.search{border:1px solid #d7d7d7;height:28px;width:200px;font-size:12px;color:#444;padding:0 8px;line-height:28px;}
.hero{padding:14px 24px;display:flex;gap:16px;height:180px;}
.hero-txt{width:260px;flex-shrink:0;}
.hero-txt h1{font-family:'Myriad Pro Regular',Arial,sans-serif;font-size:24px;font-weight:400;line-height:1.2;margin:0 0 8px;color:#1e1e1e;}
.hero-txt p{font-size:13px;color:#444;margin:0 0 10px;}
.btn{display:inline-block;background:#009be3;color:#fff;font-family:'Myriad Pro Regular',Arial,sans-serif;font-size:13px;letter-spacing:.3px;padding:9px 18px;}
.hero-visual{flex:1;background:repeating-linear-gradient(90deg,#e5e3df,#e5e3df 30px,#d9d6cf 30px,#d9d6cf 60px);display:flex;align-items:center;justify-content:center;color:#888;font-size:11px;}
.section{padding:4px 24px;}
.section h2{font-size:15px;font-weight:600;color:#000;margin:0 0 10px;}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.card{background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.08);overflow:hidden;position:relative;}
.imgbox{aspect-ratio:1/1;height:74px;background:#e5e3df;display:flex;align-items:center;justify-content:center;color:#888;font-size:9px;text-align:center;}
.cardbody{padding:8px;}
.badge{position:absolute;top:6px;left:6px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 6px;color:#fff;}
.badge.new{background:#a0a600;}
.badge.sale{background:#be0000;}
.title{font-size:13px;margin:0 0 4px;color:#1e1e1e;}
.price{font-size:14px;color:#1e1e1e;}
.saleprice{color:#be0000;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#002869;color:#fff;padding:10px 24px;display:flex;justify-content:space-between;font-size:11px;}
</style>
<div class="nav">
<div class="logo">Honest Jon S</div>
<div class="navlinks"><span class="active">Latest 100</span><span>Reggae</span><span>Jazz</span><span>Vinyl Reissues</span></div>
<div class="search">Search records…</div>
</div>
<div class="hero">
<div class="hero-txt">
<h1>Latest 100<br>Arrivals</h1>
<p>Fresh in from the crates — rare pressings, reissues and record-shop finds.</p>
<div class="btn">Browse All</div>
</div>
<div class="hero-visual">RECORD SLEEVE PHOTOGRAPHY</div>
</div>
<div class="section">
<h2>Latest 100 — Reggae & Dub</h2>
<div class="grid">
<div class="card"><div class="imgbox">Sleeve A</div><div class="cardbody"><div class="badge new">New</div><div class="title">Studio One Rarities LP</div><div class="price">£24.00</div></div></div>
<div class="card"><div class="imgbox">Sleeve B</div><div class="cardbody"><div class="badge sale">Sale</div><div class="title">Dub Plate Selections 7"</div><div class="price saleprice">£9.00</div></div></div>
<div class="card"><div class="imgbox">Sleeve C</div><div class="cardbody"><div class="title">Lovers Rock Anthology</div><div class="price">£19.00</div></div></div>
<div class="card"><div class="imgbox">Sleeve D</div><div class="cardbody"><div class="title">Roots & Culture Vol.2</div><div class="price">£22.00</div></div></div>
<div class="card"><div class="imgbox">Sleeve E</div><div class="cardbody"><div class="title">Kingston Sessions LP</div><div class="price">£26.00</div></div></div>
</div>
</div>
<div class="footer"><span>© Honest Jon S Records</span><span>f · t · p</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf9f5; color: #141413;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf9f5; color: #141413;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #141413; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6c6a64; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; background: #cc785c; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; background: #faf9f5; color: #141413;
border: 1px solid #cc785c; border-radius: 8px;
padding: 12px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #faf9f5; color: #141413;
border: 1px solid #c0c0bc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c6a64; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; background: #efe9de; color: #141413;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#faf9f5; color:#141413; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:Georgia, "Times New Roman", Times, serif; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:500; }
.spike { width:14px; height:14px; position:relative; }
.spike::before, .spike::after { content:''; position:absolute; left:50%; top:50%; width:14px; height:2px;
background:#141413; transform:translate(-50%,-50%) rotate(0deg); }
.spike::after { transform:translate(-50%,-50%) rotate(90deg); }
.navlinks { display:flex; gap:20px; font-size:13px; }
.btnc { background:#cc785c; color:#fff; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:500; }
.hero { display:flex; align-items:center; gap:28px; padding:14px 32px; height:230px; }
.hero .left { flex:1; }
.hero h1 { font-size:38px; font-weight:400; letter-spacing:-1.2px; line-height:1.08; margin:0 0 10px; }
.hero p { font-size:15px; color:#3d3d3a; margin:0 0 16px; max-width:340px; }
.hero .row { display:flex; gap:10px; }
.btn2 { background:#faf9f5; color:#141413; border:1px solid #e6dfd8; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:500; }
.illus { flex:1; height:190px; border-radius:16px; background:#efe9de; position:relative; overflow:hidden; }
.illus svg { position:absolute; inset:0; margin:auto; }
.codewrap { margin:0 32px; background:#181715; border-radius:12px; padding:20px; height:196px; }
.codewrap .bar { display:flex; gap:6px; margin-bottom:12px; }
.dot { width:9px; height:9px; border-radius:50%; }
.d1 { background:#e8907e; } .d2 { background:#e8a55a; } .d3 { background:#5db872; }
.codewrap pre { margin:0; color:#a09d96; font-size:12px; font-family:"Courier New", monospace; line-height:1.7; }
.codewrap .kw { color:#e8a55a; } .codewrap .str { color:#5db8a6; } .codewrap .fn { color:#cc785c; }
.ctaband { margin:16px 32px 0; background:#cc785c; color:#fff; border-radius:12px; padding:22px 32px;
display:flex; align-items:center; justify-content:space-between; }
.ctaband h2 { font-size:22px; font-weight:400; margin:0; }
.ctaband .btn3 { background:#faf9f5; color:#141413; border-radius:8px; padding:9px 18px; font-size:13px; font-weight:500; }
</style></head>
<body>
<nav>
<div class="brand"><span class="spike"></span>Claude</div>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Research</span><span>Pricing</span></div>
<span class="btnc">Try Claude</span>
</nav>
<div class="hero">
<div class="left">
<h1 class="serif">Meet your<br>thinking partner</h1>
<p>Claude is a family of AI models built by Anthropic to help you think, write, and reason.</p>
<div class="row"><span class="btnc">Try Claude</span><span class="btn2">Learn more</span></div>
</div>
<div class="illus">
<svg width="220" height="150" viewBox="0 0 220 150">
<path d="M10 120 Q60 40 110 90 T210 30" stroke="#cc785c" stroke-width="3" fill="none"/>
<circle cx="110" cy="90" r="6" fill="#181715"/>
<circle cx="10" cy="120" r="4" fill="#181715"/>
<circle cx="210" cy="30" r="4" fill="#181715"/>
</svg>
</div>
</div>
<div class="codewrap">
<div class="bar"><span class="dot d1"></span><span class="dot d2"></span><span class="dot d3"></span></div>
<pre><span class="kw">import</span> anthropic
client = anthropic.Client()
response = client.messages.<span class="fn">create</span>(
model=<span class="str">"claude-opus-4"</span>,
messages=[{ "role": "user", "content": "Hello, Claude" }]
)</pre>
</div>
<div class="ctaband">
<h2 class="serif">Ready to start building?</h2>
<span class="btn3">Get API access</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111827;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111827;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #111827; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.02em; background: #111827; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.02em; background: #ffffff; color: #111827;
border: 1px solid #111827; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111827;
border: 1px solid #e5e7eb; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.03em; background: transparent; color: #6b7280;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#374151; font-family:'geistSans',-apple-system,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e5e7eb;}
.logo{font-size:18px;font-weight:500;color:#111827;}
.navlinks{display:flex;gap:24px;font-size:14px;color:#111827;}
.hero{padding:36px 32px 22px;text-align:center;}
.hero h1{font-size:40px;font-weight:300;color:#111827;margin:0 0 10px;letter-spacing:-.4px;}
.hero p{font-size:15px;color:#374151;margin:0;max-width:480px;margin:0 auto;}
.filterrow{display:flex;gap:8px;padding:16px 32px 0;justify-content:center;}
.chip{background:#f3f4f6;border:1px solid #d1d5db;border-radius:9999px;font-size:12px;color:#374151;padding:5px 14px;}
.chip.active{background:#111827;color:#fff;border-color:#111827;}
.grid{display:flex;gap:20px;padding:20px 32px 0;justify-content:center;}
.card{width:170px;}
.thumb{aspect-ratio:3/4;height:180px;background:#fafafa;margin-bottom:8px;}
.ptitle{font-size:14px;font-weight:500;color:#111827;margin:0 0 2px;}
.pmeta{font-family:Menlo,Consolas,monospace;font-size:11px;color:#9ca3af;letter-spacing:.02em;}
.footer{position:absolute;bottom:0;left:0;right:0;height:48px;background:#1f2937;color:#f3f4f6;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Sugarlift</div>
<div class="navlinks"><span>Artists</span><span>Exhibitions</span><span>Artworks</span><span>Fairs</span></div>
</div>
<div class="hero">
<h1>A gallery, translated to screen.</h1>
<p>Contemporary painting, photography, and mixed media — presented the way a wall would present it.</p>
</div>
<div class="filterrow">
<div class="chip active">All Media</div><div class="chip">Painting</div><div class="chip">Photography</div><div class="chip">Works on Paper</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#111827,#9ca3af)"></div><div class="ptitle">Untitled (Coastline)</div><div class="pmeta">Ed. 3/15 · Oil</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#374151,#d1d5db)"></div><div class="ptitle">Interior Study No.9</div><div class="pmeta">Price on Request</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#4b5563,#e5e7eb)"></div><div class="ptitle">Field Notes III</div><div class="pmeta">Archival Print</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#111827,#6b7280)"></div><div class="ptitle">Quiet Hour</div><div class="pmeta">Ed. 1/8 · Mixed Media</div></div>
</div>
<div class="footer"><span>© Sugarlift</span><span>Artists Exhibitions Contact</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0f2f5; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0f2f5; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #757678; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1877f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f0f2f5; color: #1877f2;
border: 1px solid #1877f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f0f2f5; color: #111111;
border: 1px solid #ccced1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757678; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cddef5; color: #1877f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#F0F2F5; color:#050505; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; padding:0; }
.topnav { height:56px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid #E4E6EB; }
.flogo { width:32px; height:32px; border-radius:8px; background:#1877F2; color:#fff; font-weight:900; font-size:20px; display:flex; align-items:center; justify-content:center; }
.iconrow { display:flex; gap:10px; }
.icirc { width:36px; height:36px; border-radius:50%; background:#E4E6EB; display:flex; align-items:center; justify-content:center; }
.stories { display:flex; gap:8px; padding:8px; overflow:hidden; }
.story { width:96px; height:150px; border-radius:12px; position:relative; flex-shrink:0; }
.story .ring { position:absolute; top:8px; left:8px; width:28px; height:28px; border-radius:50%; border:3px solid #E1306C; background:#333; }
.story .nm { position:absolute; bottom:6px; left:6px; color:#fff; font-size:11px; font-weight:600; }
.card { background:#fff; border-radius:8px; margin:8px; padding:12px; }
.pheader { display:flex; align-items:center; gap:10px; }
.avatar { width:40px; height:40px; border-radius:50%; }
.pname { font-size:15px; font-weight:600; }
.ptime { font-size:13px; color:#65676B; }
.pbody { font-size:15px; margin-top:10px; line-height:1.35; }
.reactsum { display:flex; justify-content:space-between; font-size:13px; color:#65676B; margin-top:10px; }
.actionrow { display:flex; justify-content:space-around; border-top:1px solid #E4E6EB; margin-top:8px; padding-top:6px; }
.abtn { font-size:15px; font-weight:600; color:#65676B; }
.abtn.on { color:#1877F2; }
</style>
</head>
<body>
<div class="stage">
<div class="topnav"><div class="flogo">f</div><div style="flex:1;margin-left:10px;font-weight:700;font-size:20px;color:#1877F2">Facebook (iOS)</div><div class="iconrow"><div class="icirc">🔍</div><div class="icirc">💬</div></div></div>
<div class="stories">
<div class="story" style="background:linear-gradient(160deg,#333,#555)"><div class="ring"></div><div class="nm">Create Story</div></div>
<div class="story" style="background:linear-gradient(160deg,#5a3a2a,#8a6a4a)"><div class="ring"></div><div class="nm">Priya</div></div>
<div class="story" style="background:linear-gradient(160deg,#2a4a5a,#4a7a8a)"><div class="ring"></div><div class="nm">Devon</div></div>
<div class="story" style="background:linear-gradient(160deg,#4a2a5a,#7a4a8a)"><div class="ring"></div><div class="nm">Kai</div></div>
</div>
<div class="card">
<div class="pheader"><div class="avatar" style="background:linear-gradient(135deg,#f0a878,#c85a3a)"></div><div><div class="pname">Sarah Johnson</div><div class="ptime">2 hrs · 🌐 Public</div></div></div>
<div class="pbody">Finally finished the community garden fence this weekend! Took way longer than expected but so worth it 🌻</div>
<div class="reactsum"><span>👍❤️😂 You, Priya, and 45 others</span><span>12 comments · 3 shares</span></div>
<div class="actionrow">
<div class="abtn on">👍 Like</div>
<div class="abtn">💬 Comment</div>
<div class="abtn">↗ Share</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafaf8; color: #2e2930;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafaf8; color: #2e2930;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #2e2930; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #2e3192; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #fafaf8; color: #2e3192;
border: 1px solid #2e3192; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafaf8; color: #3a303d;
border: 1px solid #c7c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fff88a; color: #2e2930;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafaf8; font-family:'Basis','Helvetica Neue',Arial,sans-serif; color:#3a303d; }
*{box-sizing:border-box;}
.nav{height:60px;background:#2e3192;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-family:Georgia,serif;font-size:19px;font-weight:600;color:#fff;letter-spacing:.3px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;color:#fff88a;}
.cta{background:#ffcf2a;color:#2e2930;font-size:12px;font-weight:700;padding:9px 18px;border-radius:4px;}
.hero{height:250px;display:flex;background:#eceadd;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 34px;}
.tag{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#00caaa;margin-bottom:10px;}
.herotext h1{font-family:Georgia,serif;font-size:32px;font-weight:600;margin:0 0 10px;line-height:1.2;color:#2e2930;}
.herotext p{font-size:13px;color:#676986;margin:0 0 16px;max-width:290px;}
.btn{display:inline-block;background:#2e3192;color:#fff;font-size:13px;font-weight:700;padding:12px 24px;border-radius:4px;width:fit-content;}
.heroimg{width:54%;position:relative;overflow:hidden;background:linear-gradient(160deg,#fafaf8,#b2f9e9 70%);}
.jar{position:absolute;bottom:24px;left:120px;width:70px;height:100px;border-radius:6px;background:linear-gradient(180deg,#2e3192,#00caaa);}
.jarlid{position:absolute;bottom:120px;left:112px;width:86px;height:16px;border-radius:4px;background:#fff88a;}
.jar2{position:absolute;bottom:24px;left:220px;width:60px;height:80px;border-radius:6px;background:#b5de57;}
.sec{padding:20px 34px 0;}
.sectitle{font-family:'Courier New',monospace;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#676986;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border-radius:4px;padding:10px;box-shadow:0 3px 10px rgba(0,0,0,0.04);}
.thumb{height:96px;border-radius:4px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;}
.pprice{font-size:13px;font-weight:700;color:#2e3192;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Moon Juice</div>
<div class="navlinks"><span>Adaptogens</span><span>Powders</span><span>Skincare</span><span>Learn</span></div>
<div class="cta">Shop Best Sellers</div>
</div>
<div class="hero">
<div class="herotext">
<div class="tag">Apothecary Meets Wellness</div>
<h1>Beauty and Calm, From the Inside Out</h1>
<p>Adaptogenic powders and elixirs formulated with ingredients you can pronounce.</p>
<div class="btn">Shop Adaptogens</div>
</div>
<div class="heroimg"><div class="jarlid"></div><div class="jar"></div><div class="jar2"></div></div>
</div>
<div class="sec">
<div class="sectitle">Ingredient Callouts</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2e3192,#00caaa)"></div><div class="pname">SuperYou Adaptogen</div><div class="pprice">$49.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00caaa,#b5de57)"></div><div class="pname">Beauty Dust</div><div class="pprice">$55.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffcf2a,#2e3192)"></div><div class="pname">Magnesi-Om</div><div class="pprice">$38.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b5de57,#fff88a)"></div><div class="pname">Plump Jelly Serum</div><div class="pprice">$68.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #2e7d32; color: #ffffff;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 6px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e65100; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#4a4a4a; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; gap:22px; padding:0 26px; }
.logo { font-size:19px; font-weight:700; color:#313131; }
.navlink { font-size:14px; font-weight:500; color:#313131; letter-spacing:.3px; }
.navlink.active { color:#2e7d32; border-bottom:2px solid #2e7d32; padding-bottom:22px; margin-bottom:-23px; }
.searchw { margin-left:auto; width:220px; height:44px; border-radius:999px; background:#f5f5f5;
display:flex; align-items:center; padding:0 16px; font-size:13px; color:#6a6a6a; }
.catstrip { display:flex; gap:8px; padding:0 26px 14px; }
.cattab { border-radius:999px; padding:7px 16px; font-size:12px; font-weight:600; color:#6a6a6a; }
.cattab.active { background:#f5f5f5; color:#313131; }
.stage { display:flex; gap:26px; padding:0 26px; }
.cover { width:200px; height:200px; border-radius:8px; flex:0 0 auto; position:relative; overflow:hidden;
background:linear-gradient(150deg,#2e7d32 0%,#1b5e20 55%,#313131 130%); box-shadow:0 6px 16px rgba(0,0,0,.14); }
.cover::before { content:''; position:absolute; left:-20px; top:60px; width:250px; height:60px;
background:rgba(255,255,255,.08); transform:rotate(-8deg); }
.newbadge { position:absolute; top:10px; left:10px; background:#e65100; color:#fff; font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:.4px; border-radius:4px; padding:3px 8px; }
.info { flex:1; }
h1 { font-size:22px; font-weight:600; margin:4px 0 4px; color:#313131; }
.author { font-size:14px; color:#6a6a6a; margin-bottom:2px; }
.narrator { font-size:12px; color:#8a8a8a; margin-bottom:10px; }
.stars { color:#313131; font-size:13px; margin-bottom:12px; }
.stars span { color:#8a8a8a; font-size:12px; margin-left:6px; }
.desc { font-size:13px; line-height:1.5; max-width:500px; margin-bottom:14px; }
.pricerow { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.price { font-size:22px; font-weight:700; color:#313131; }
.btnrow { display:flex; gap:10px; }
.btn-p { background:#2e7d32; color:#fff; border:none; border-radius:6px; height:44px; padding:0 26px;
font-size:15px; font-weight:600; }
.btn-s { background:#fff; color:#313131; border:1px solid #d4d4d4; border-radius:6px; height:44px; padding:0 20px;
font-size:15px; font-weight:600; }
.relwrap { padding:14px 26px 0; border-top:1px solid #e8e8e8; margin-top:14px; }
.relhdr { font-size:12px; font-weight:600; color:#4a4a4a; margin-bottom:10px; }
.relgrid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.rc { background:#fff; border-radius:8px; padding:6px; }
.rc .th { height:56px; border-radius:6px; background:linear-gradient(150deg,#313131,#2e7d32); margin-bottom:6px; }
.rc .t { font-size:10px; font-weight:600; color:#313131; height:24px; overflow:hidden; }
.rc .p { font-size:11px; color:#313131; font-weight:700; }
</style></head>
<body>
<nav>
<span class="logo">Chirp</span>
<span class="navlink active">Fiction</span>
<span class="navlink">Nonfiction</span>
<span class="navlink">Mystery</span>
<span class="navlink">Romance</span>
<div class="searchw">Search titles, authors, narrators…</div>
</nav>
<div class="catstrip">
<span class="cattab active">Bestsellers</span>
<span class="cattab">New Releases</span>
<span class="cattab">Staff Picks</span>
</div>
<div class="stage">
<div class="cover"><span class="newbadge">New Release</span></div>
<div class="info">
<h1>The Wintering House</h1>
<div class="author">by Odalys March</div>
<div class="narrator">Narrated by Reece Callahan · 11 hr 24 min</div>
<div class="stars">★★★★★ <span>4.7 (3,281 ratings)</span></div>
<div class="desc">Three sisters return to their childhood home for one last winter before it's sold — and uncover a promise their mother made decades ago that none of them were meant to find.</div>
<div class="pricerow"><span class="price">$17.99</span></div>
<div class="btnrow">
<button class="btn-p">Start Listening</button>
<button class="btn-s">Add to Wishlist</button>
</div>
</div>
</div>
<div class="relwrap">
<div class="relhdr">More by Odalys March</div>
<div class="relgrid">
<div class="rc"><div class="th"></div><div class="t">The Orchard Letters</div><div class="p">$15.99</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(150deg,#e65100,#313131)"></div><div class="t">Salt and Harbor</div><div class="p">$16.99</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(150deg,#c62828,#313131)"></div><div class="t">A Room Full of Maps</div><div class="p">$14.99</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(150deg,#2e7d32,#1b5e20)"></div><div class="t">Late Bloom</div><div class="p">$15.99</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(150deg,#6a6a6a,#313131)"></div><div class="t">The Cartographer's Wife</div><div class="p">$17.99</div></div>
<div class="rc"><div class="th" style="background:linear-gradient(150deg,#313131,#8a8a8a)"></div><div class="t">Winter Ledger</div><div class="p">$16.99</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0a2a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0a2a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8b9a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7408ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0a2a; color: #7408ff;
border: 1px solid #7408ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0a2a; color: #f5f5f5;
border: 1px solid #30304a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b9a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1b0a4c; color: #7408ff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A0A2A; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:44px; display:flex; align-items:center; padding:0 24px; }
.grad { background:linear-gradient(135deg,#7408FF,#FF00FF); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:900; font-size:22px; }
.hero { margin:8px 24px; height:230px; border-radius:18px; position:relative; overflow:hidden;
background:linear-gradient(155deg,#3a1a55,#0a0a2a 70%); }
.heroscrim { position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(10,10,42,0.95) 100%); }
.oribadge { position:absolute; top:16px; left:16px; background:linear-gradient(135deg,#7408FF,#FF00FF); font-size:9px; font-weight:800; padding:4px 10px; border-radius:4px; letter-spacing:0.6px; }
.herotitle { position:absolute; left:16px; bottom:70px; font-size:32px; font-weight:900; letter-spacing:-0.6px; }
.herometa { position:absolute; left:16px; bottom:52px; font-size:11px; color:#B9B9D6; }
.herobtns { position:absolute; left:16px; bottom:16px; display:flex; gap:10px; }
.playfree { background:#fff; color:#0A0A2A; font-weight:800; font-size:14px; padding:10px 22px; border-radius:8px; }
.plusbtn { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.16); display:flex; align-items:center; justify-content:center; }
.row { padding:0 24px; margin-top:14px; }
.rowhead { font-size:19px; font-weight:800; margin-bottom:8px; }
.posters { display:flex; gap:10px; }
.poster { width:100px; height:150px; border-radius:10px; position:relative; flex-shrink:0; }
.p1 { background:linear-gradient(160deg,#553355,#15153D); }
.p2 { background:linear-gradient(160deg,#335555,#15153D); }
.p3 { background:linear-gradient(160deg,#553333,#15153D); }
.p4 { background:linear-gradient(160deg,#335533,#15153D); }
.p5 { background:linear-gradient(160deg,#555533,#15153D); }
.freetag { position:absolute; top:6px; left:6px; background:#FFD400; color:#1A0A2A; font-size:8px; font-weight:900; padding:2px 5px; border-radius:3px; }
.prog { position:absolute; left:6px; right:6px; bottom:6px; height:4px; background:rgba(255,255,255,0.16); border-radius:2px; }
.prog i { display:block; height:100%; width:60%; background:linear-gradient(90deg,#7408FF,#FF00FF); border-radius:2px; }
</style></head>
<body>
<div class="topbar"><span class="grad">Tubi (iOS)</span></div>
<div class="hero">
<div class="heroscrim"></div>
<span class="oribadge">Tubi (iOS) ORIGINAL</span>
<div class="herotitle">Midnight Frequency</div>
<div class="herometa">2024 · Thriller · 1h 52m · TV-MA</div>
<div class="herobtns"><div class="playfree">▶ Play Free</div><div class="plusbtn">+</div></div>
</div>
<div class="row">
<div class="rowhead">Continue Watching</div>
<div class="posters">
<div class="poster p1"><div class="prog"><i></i></div></div>
<div class="poster p2"><span class="freetag">FREE</span></div>
<div class="poster p3"><span class="freetag">FREE</span></div>
<div class="poster p4"><span class="freetag">FREE</span></div>
<div class="poster p5"><span class="freetag">FREE</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f54211; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f54211; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #262626; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f54211; color: #262626;
border: 1px solid #262626; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f54211; color: #f5f5f5;
border: 1px solid #f55f35; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d43e14; color: #262626;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#262626; box-sizing:border-box;
font-family:"Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif; }
* { box-sizing:border-box; }
.layout { display:flex; height:640px; }
.rail { width:220px; flex:none; padding:20px 14px; display:flex; flex-direction:column; gap:6px; border-right:1px solid #f1f1f1; }
.brand { font-size:18px; font-weight:700; margin:0 8px 14px; color:#262626; }
.rail-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:20px; font-size:14px; font-weight:500; color:#262626; }
.rail-item .dot { width:10px; height:10px; border-radius:50%; }
.rail-item.blue { background:#dcf5ff; }
.rail-item.pink { background:#fee2ec; }
.rail-item.peach { background:#fff5ec; }
.rail-item.plain { background:transparent; color:#656565; }
.main { flex:1; display:flex; flex-direction:column; }
nav { height:56px; display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:0 28px; border-bottom:1px solid #f1f1f1; }
.btn-signup { background:#ffffff; color:#262626; border:1px solid #d3d3d3; border-radius:36px; padding:0 20px; height:36px; font-size:14px; }
.btn-login { background:#262626; color:#ffffff; border:1px solid #262626; border-radius:36px; padding:0 20px; height:36px; font-size:14px; }
.hero { padding:36px 60px 8px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.hero h1 { font-size:30px; font-weight:700; margin:0; color:#262626; }
.hero p { font-size:14px; color:#656565; margin:0; }
.composer-wrap { padding:18px 60px 0; }
.composer { background:#ffffff; border:1px solid #d3d3d3; border-radius:20px; padding:16px 18px; box-shadow:rgba(0,0,0,0.1) 0px 0px 15px 0px; display:flex; flex-direction:column; gap:12px; }
.composer .ph { font-size:16px; color:#c5c5c5; }
.composer-row { display:flex; gap:8px; align-items:center; justify-content:space-between; }
.role-chip { display:inline-flex; align-items:center; gap:6px; background:#ffffff; border:1px solid #f1f1f1; border-radius:999px; padding:4px 6px 4px 10px; font-size:13px; color:#262626; }
.send-dot { width:30px; height:30px; border-radius:12px; background:#f54211; }
.chips { display:flex; gap:10px; padding:16px 60px 0; flex-wrap:wrap; }
.tool-chip { border:1px solid #171717; border-radius:300px; height:32px; padding:0 16px; font-size:13px; color:#262626; display:flex; align-items:center; }
.cards { display:flex; gap:14px; padding:20px 60px 0; }
.oc { flex:1; border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:6px; }
.oc h4 { margin:0; font-size:13px; font-weight:600; color:#262626; }
.oc p { margin:0; font-size:11px; color:#656565; line-height:1.4; }
footer { margin-top:auto; padding:10px 60px 16px; font-size:11px; color:#c5c5c5; text-align:center; }
</style></head>
<body>
<div class="layout">
<div class="rail">
<p class="brand">Wrtn</p>
<div class="rail-item plain"><span class="dot" style="background:#262626"></span>Home</div>
<div class="rail-item blue"><span class="dot" style="background:#22b3e0"></span>Tools</div>
<div class="rail-item pink"><span class="dot" style="background:#ff77a6"></span>Perks</div>
<div class="rail-item peach"><span class="dot" style="background:#f8a35f"></span>Saved</div>
</div>
<div class="main">
<nav>
<button class="btn-signup">Sign Up Free</button>
<button class="btn-login">Log In</button>
</nav>
<section class="hero">
<h1>Trusted by 5 million users worldwide</h1>
<p>The latest AI, free for everyone — get started with Wrtn</p>
</section>
<div class="composer-wrap">
<div class="composer">
<span class="ph">Ask me anything</span>
<div class="composer-row">
<span class="role-chip">✦ Choose a persona</span>
<span class="send-dot"></span>
</div>
</div>
</div>
<div class="chips">
<span class="tool-chip">Image Generation</span>
<span class="tool-chip">Writing Assistant</span>
<span class="tool-chip">Code Explainer</span>
<span class="tool-chip">Trip Planner</span>
</div>
<div class="cards">
<div class="oc" style="background:#dcf5ff;"><h4>Open Space · Tools</h4><p>From image generation to research, all in one place.</p></div>
<div class="oc" style="background:#fee2ec;"><h4>Open Space · Perks</h4><p>New credits and events every day.</p></div>
<div class="oc" style="background:#fff5ec;"><h4>Open Space · Saved</h4><p>Collect the results you love.</p></div>
</div>
<footer>© Wrtn · Company · Service · News · Careers</footer>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefdf9; color: #272d45;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefdf9; color: #272d45;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #272d45; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9a9db1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #084b6d; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #fefdf9; color: #084b6d;
border: 1px solid #084b6d; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fefdf9; color: #272d45;
border: 1px solid #c8c9cc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9db1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #9cb7c5; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fefdf9; color:#272d45; font-family:-apple-system,system-ui,'Helvetica Neue',sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:Georgia,serif;font-size:20px;color:#084b6d;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;}
.navlinks .active{color:#084b6d;border-bottom:2px solid #084b6d;padding-bottom:20px;}
.hero{text-align:center;padding:20px 32px 24px;}
.hero h1{font-family:Georgia,serif;font-size:34px;font-weight:600;margin:0 0 10px;}
.hero p{font-size:14px;color:#676986;margin:0 0 16px;}
.cta{display:inline-block;background:#084b6d;color:#fff;font-size:15px;font-weight:600;padding:12px 28px;border-radius:8px;}
.grid{display:flex;gap:14px;padding:8px 32px;justify-content:center;}
.card{width:190px;background:#fff;border-radius:12px;padding:16px;}
.thumb{height:90px;border-radius:12px;margin-bottom:10px;}
.tags{display:flex;gap:5px;margin-bottom:6px;}
.tag{font-size:9px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;background:#9cb7c5;color:#fff;padding:3px 7px;border-radius:4px;}
.tagteal{background:#0e7a82;}
.ptitle{font-size:14px;font-weight:600;}
.pprice{font-size:13px;color:#676986;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:60px;background:#084b6d;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Pipette</div>
<div class="navlinks"><div class="active">Baby Skincare</div><div>Bath</div><div>Bundles</div></div>
</div>
<div class="hero">
<h1>Skincare for the smallest humans.</h1>
<p>Fragrance-free, dermatologist tested, formulated for sensitive skin.</p>
<div class="cta">Shop Skincare</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#9cb7c5,#0e7a82)"></div><div class="tags"><span class="tag">Fragrance-Free</span></div><div class="ptitle">Baby Lotion</div><div class="pprice">$16.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0e7a82,#a4b7bc)"></div><div class="tags"><span class="tag tagteal">Best Seller</span></div><div class="ptitle">Diaper Cream</div><div class="pprice">$14.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a4b7bc,#084b6d)"></div><div class="tags"><span class="tag">Derm Tested</span></div><div class="ptitle">Wash & Shampoo</div><div class="pprice">$15.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#084b6d,#9cb7c5)"></div><div class="tags"><span class="tag tagteal">New</span></div><div class="ptitle">Starter Bundle</div><div class="pprice">$42.00</div></div>
</div>
<div class="footer"><span>© Pipette · Sensitive Skin, Serious Science</span><span>Ingredients · Reviews</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.1; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.43; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #337ab7; color: #ffffff;
border: none; border-radius: 4px; padding: 6px 12px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #555555;
border: 1px solid #337ab7; border-radius: 4px;
padding: 6px 12px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #555555;
border: 1px solid #c1c1c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.33; background: #5cb85c; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#555555; }
*{box-sizing:border-box;}
.nav{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#080808;}
.logo{font-size:18px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:13px;color:#fff;}
.hero{height:230px;display:flex;background:#f5f5f5;border-bottom:1px solid #e5e5e5;}
.htext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 34px;}
.htext .lbl{display:inline-block;background:#5cb85c;color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:3px;margin-bottom:12px;width:fit-content;}
.htext h1{font-size:26px;font-weight:700;color:#080808;margin:0 0 10px;line-height:1.25;}
.htext p{font-size:13.5px;color:#555555;margin:0 0 16px;max-width:290px;}
.btn{width:fit-content;background:#337ab7;color:#fff;font-size:14px;font-weight:600;padding:9px 20px;border-radius:4px;border:1px solid #2e6da4;}
.himg{width:54%;position:relative;background:#e7e7e7;}
.tv{position:absolute;left:70px;top:52px;width:280px;height:150px;background:#080808;border-radius:6px;}
.tv:before{content:'';position:absolute;left:14px;top:14px;right:14px;bottom:14px;background:linear-gradient(140deg,#337ab7,#286090);border-radius:2px;}
.stand{position:absolute;left:200px;top:200px;width:20px;height:20px;background:#080808;}
.sec{padding:18px 34px 0;}
.seclabel{font-size:18px;font-weight:700;color:#080808;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:150px;border:1px solid #e7e7e7;border-radius:4px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;color:#fff;padding:2px 6px;border-radius:3px;}
.thumb{height:80px;border-radius:3px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:600;color:#080808;height:30px;overflow:hidden;line-height:1.3;}
.price{font-size:14px;font-weight:700;color:#337ab7;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Sceptre</div>
<div class="navlinks"><div>TVs</div><div>Monitors</div><div>Soundbars</div><div>Support</div></div>
</div>
<div class="hero">
<div class="htext">
<div class="lbl">In Stock</div>
<h1>Big screens. Honest prices.</h1>
<p>4K UHD televisions and gaming monitors engineered for value without the compromise.</p>
<div class="btn">Shop Televisions</div>
</div>
<div class="himg"><div class="tv"></div><div class="stand"></div></div>
</div>
<div class="sec">
<div class="seclabel">Popular Right Now</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#d9534f;">Sale</span><div class="thumb" style="background:linear-gradient(140deg,#080808,#337ab7)"></div><div class="pname">55" 4K UHD TV</div><div class="price">$289.99</div></div>
<div class="card"><span class="badge" style="background:#5cb85c;">In Stock</span><div class="thumb" style="background:linear-gradient(140deg,#337ab7,#080808)"></div><div class="pname">27" QHD Gaming Monitor</div><div class="price">$199.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#777777,#080808)"></div><div class="pname">2.1 Ch Soundbar</div><div class="price">$79.99</div></div>
<div class="card"><span class="badge" style="background:#f0ad4e;">New</span><div class="thumb" style="background:linear-gradient(140deg,#080808,#555555)"></div><div class="pname">32" FHD Monitor</div><div class="price">$99.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #171717;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #171717;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.27; letter-spacing: -0.44px; margin: 0; color: #171717; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffdb01; color: #171717;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fafafa; color: #171717;
border: 1px solid #ffdb01; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #171717;
border: 1px solid #c1c1c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.33px; background: #ffdb01; color: #171717;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:-apple-system,'Segoe UI',Roboto,sans-serif; color:#171717; }
*{box-sizing:border-box;}
.nav{position:absolute;top:0;left:0;right:0;height:64px;background:rgba(255,255,255,0.8);border-bottom:1px solid #ededed;display:flex;align-items:center;justify-content:space-between;padding:0 32px;z-index:2;}
.logo{font-size:19px;font-weight:600;letter-spacing:-0.4px;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;}
.navlinks div:first-child{color:#171717;border-bottom:2px solid #ffdb01;padding-bottom:20px;}
.navlinks div{color:#777777;}
.hero{position:absolute;top:64px;left:0;right:0;height:280px;background:#171717;display:flex;align-items:center;padding:0 40px;}
.badge{display:inline-block;background:#ffdb01;color:#171717;font-size:10px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;padding:4px 12px;border-radius:9999px;margin-bottom:14px;}
.herotext h1{font-size:28px;font-weight:600;color:#fff;margin:0 0 10px;line-height:1.2;letter-spacing:-0.4px;}
.herotext p{font-size:14px;color:#bbbbbb;margin:0 0 18px;max-width:280px;}
.cta{display:inline-block;background:#ffdb01;color:#171717;font-size:14px;font-weight:600;padding:13px 28px;border-radius:9999px;}
.camwrap{position:absolute;right:80px;top:60px;width:200px;height:170px;}
.camring{position:absolute;right:50px;top:10px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3a3a3a,#0a0a0a 70%);box-shadow:0 0 0 4px #222;}
.camdot{position:absolute;right:88px;top:48px;width:24px;height:24px;border-radius:50%;background:#ffdb01;}
.camstand{position:absolute;right:96px;top:100px;width:8px;height:50px;background:#2a2a2a;}
.sec{position:absolute;top:360px;left:0;right:0;padding:20px 40px;}
.grid{display:flex;gap:16px;}
.card{width:196px;background:#fff;border:1px solid #ededed;border-radius:12px;padding:14px;}
.thumb{height:90px;border-radius:8px;margin-bottom:10px;}
.pname{font-size:14px;font-weight:600;}
.pprice{font-size:14px;color:#222;margin-top:4px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Opal</div>
<div class="navlinks"><div>Webcam</div><div>Accessories</div><div>Software</div><div>Support</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="badge">Award Winner</div>
<h1>The camera that sees<br>you the way you<br>are.</h1>
<p>Precision-machined aluminum. A sensor built for real faces, real light.</p>
<div class="cta">Shop Opal</div>
</div>
<div class="camwrap"><div class="camring"></div><div class="camdot"></div><div class="camstand"></div></div>
</div>
<div class="sec">
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#171717,#3a3a3a)"></div><div class="pname">Opal C1 Camera</div><div class="pprice">$499</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#222222,#767676)"></div><div class="pname">Tak Adjustable Mount</div><div class="pprice">$79</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#767676,#171717)"></div><div class="pname">Opal Anywhere Bar</div><div class="pprice">$59</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3a3a3a,#222222)"></div><div class="pname">Lens Cover</div><div class="pprice">$19</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #989898; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #7737bd; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: transparent; color: #7737bd;
border: 1px solid #7737bd; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #989898; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #7737bd; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; color:#565656; }
*{box-sizing:border-box;}
.announce{height:32px;background:#7737bd;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;}
.nav{height:60px;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:18px;font-weight:700;color:#121212;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#565656;}
.navlinks span:first-child{color:#7737bd;font-weight:600;}
.hero{height:220px;background:#121212;display:flex;align-items:center;padding:0 32px;}
.h1{font-size:36px;font-weight:700;color:#fff;line-height:1.15;letter-spacing:-.5px;margin:0 0 14px;max-width:420px;}
.cta{display:inline-block;background:#7737bd;color:#fff;font-size:15px;font-weight:600;padding:12px 28px;border-radius:8px;}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:200px;background:#f1f1f1;border:1px solid #dedede;border-radius:8px;padding:12px;position:relative;}
.thumb{background:#e3e3e3;height:100px;border-radius:6px;margin-bottom:8px;}
.badge{position:absolute;top:18px;left:18px;background:#7737bd;color:#fff;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.ptitle{font-size:16px;font-weight:600;color:#121212;}
.pmeta{font-size:13px;color:#989898;margin:4px 0;}
.pprice{font-size:20px;font-weight:700;color:#121212;}
.spectable{margin:16px 32px 0;background:#f7f7f7;border-radius:8px;overflow:hidden;}
.specrow{display:flex;padding:8px 16px;border-bottom:1px solid #dedede;}
.specrow:last-child{border-bottom:none;}
.speclabel{width:140px;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#989898;}
.specval{font-size:14px;color:#121212;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#b9b9b9;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">Free shipping over $75 · New switches in stock</div>
<div class="nav">
<div class="logo">Matrix Lab</div>
<div class="navlinks"><span>Keyboards</span><span>Switches</span><span>Keycaps</span><span>Deskmats</span></div>
</div>
<div class="hero">
<div>
<div class="h1">Precision typing at a purple frequency.</div>
<div class="cta">Shop Keyboards</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb"></div><div class="ptitle">Vector 75 Keyboard</div><div class="pmeta">Hot-swap · Gasket mount</div><div class="pprice">$249</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Linear Silent Switch Pack</div><div class="pmeta">Set of 90</div><div class="pprice">$34</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Voltage Keycap Set</div><div class="pmeta">PBT · Cherry Profile</div><div class="pprice">$59</div></div>
</div>
<div class="spectable">
<div class="specrow"><div class="speclabel">Layout</div><div class="specval">75% Compact</div></div>
<div class="specrow"><div class="speclabel">Connectivity</div><div class="specval">USB-C / 2.4GHz / Bluetooth</div></div>
</div>
<div class="footer"><span>© Matrix Lab Mechanical Keyboards</span><span>Warranty · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffefb; color: #201515;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffefb; color: #201515;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 30px; letter-spacing: -0.6px; margin: 0; color: #201515; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 14px; letter-spacing: 1px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 27px; background: #ff4f00; color: #fffefb;
border: none; border-radius: 12px; padding: {spacing.md} {spacing.xl};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 27px; background: #201515; color: #fffefb;
border: 1px solid #ff4f00; border-radius: 12px;
padding: {spacing.md} {spacing.xl}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 27px; background: #fffefb; color: #201515;
border: 1px solid #201515; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 24px; background: #f8f4f0; color: #201515;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fffefb; color:#201515; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:17px; font-weight:800; letter-spacing:-.3px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; color:#605d52; font-weight:600; }
.pill { border-radius:999px; padding:9px 20px; font-size:13px; font-weight:700; }
.pill-o { background:#ff4f00; color:#fffefb; }
.hero { text-align:center; padding:22px 32px 8px; }
.hero h1 { font-size:46px; font-weight:800; letter-spacing:-1px; line-height:1.06; margin:0 auto 14px; max-width:600px; }
.hero p { font-size:14px; color:#605d52; margin:0 auto 24px; max-width:420px; }
.zap { display:flex; align-items:center; justify-content:center; gap:0; padding:8px 32px 24px; position:relative; }
.node { display:flex; flex-direction:column; align-items:center; gap:8px; width:150px; }
.nodecircle { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:20px; font-weight:800; color:#fffefb; }
.n1 { background:#ff4f00; } .n2 { background:#201515; } .n3 { background:#939084; }
.node .lbl { font-size:11px; font-weight:700; color:#201515; }
.node .sub { font-size:10px; color:#939084; }
.connector { flex:1; height:0; border-top:2px dashed #c5c0b1; margin-top:-24px; min-width:40px; }
.cards { display:flex; gap:16px; padding:6px 32px 30px; }
.card { flex:1; background:#f8f4f0; border-radius:14px; padding:18px; }
.card .tag { font-size:11px; font-weight:800; text-transform:uppercase; color:#ff4f00; }
.card h3 { font-size:16px; font-weight:800; margin:8px 0 6px; }
.card p { font-size:12px; color:#605d52; margin:0; line-height:1.4; }
</style></head>
<body>
<nav>
<div class="brand">Zapier</div>
<div class="navlinks"><span>Product</span><span>Solutions</span><span>Resources</span><span>Pricing</span></div>
<div class="pill pill-o">Sign up</div>
</nav>
<div class="hero">
<h1>Automation for everyone, everywhere</h1>
<p>Connect your apps and automate workflows — no code required.</p>
</div>
<div class="zap">
<div class="node"><div class="nodecircle n1">⚡</div><div class="lbl">New Form Submitted</div><div class="sub">Trigger</div></div>
<div class="connector"></div>
<div class="node"><div class="nodecircle n2">✓</div><div class="lbl">Add Row to Sheet</div><div class="sub">Action</div></div>
<div class="connector"></div>
<div class="node"><div class="nodecircle n3">✉</div><div class="lbl">Send Slack Message</div><div class="sub">Action</div></div>
</div>
<div class="cards">
<div class="card"><div class="tag">Zaps</div><h3>7,000+ app integrations</h3><p>Connect the tools your team already uses in minutes.</p></div>
<div class="card"><div class="tag">Agents</div><h3>AI-powered automation</h3><p>Let AI agents handle repetitive work across your stack.</p></div>
<div class="card"><div class="tag">Tables</div><h3>Data that moves with you</h3><p>Store and sync data directly inside your workflows.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-size: 20px; font-weight:700; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-size: 12px; font-weight:400; line-height:1.4; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: linear-gradient(135deg, #820AD1, #530789); color: #ffffff;
border: none; border-radius: 999; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #FFFFFF; color: linear-gradient(135deg, #820AD1, #530789);
border: 1px solid linear-gradient(135deg, #820AD1, #530789); border-radius: 999;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #FFFFFF; color: #111111;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #ededed; color: linear-gradient(135deg, #820AD1, #530789);
border-radius: 999; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: Inter, Arial, sans-serif; background: #FFFFFF; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
.page { width: 960px; height: 640px; display: flex; flex-direction: column; }
nav { flex: 0 0 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid #E8E8E8; }
.logo { font-size: 18px; font-weight: 700; color: #820AD1; margin: 0; }
.navlinks { display: flex; gap: 22px; font-size: 13px; font-weight: 500; color: #2E2E2E; }
.navlinks span.on { color: #820AD1; }
.navcta { background: linear-gradient(135deg,#820AD1,#530789); color: #FFFFFF; border: none; border-radius: 999px; padding: 8px 18px; font-size: 12px; font-weight: 700; }
.hero { flex: 0 0 92px; padding: 16px 28px 0; display: flex; align-items: center; justify-content: space-between; }
.hero h1 { margin: 0; font-size: 26px; font-weight: 700; color: #1A1A1A; letter-spacing: -0.4px; }
.hero p { margin: 4px 0 0; font-size: 12.5px; color: #6E6E6E; max-width: 380px; }
.statpills { display: flex; gap: 10px; }
.statpill { background: #F5F5F5; border-radius: 12px; padding: 8px 14px; text-align: center; }
.statpill b { display: block; font-size: 15px; font-weight: 700; color: #820AD1; }
.statpill span { font-size: 9.5px; color: #6E6E6E; text-transform: uppercase; letter-spacing: 0.04em; }
.modes { flex: 1; display: flex; gap: 16px; padding: 14px 28px 12px; }
.panel { flex: 1; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.panel.light { background: #FFFFFF; border: 1px solid #E8E8E8; }
.panel.dark { background: #000000; }
.panellabel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.panel.light .panellabel { color: #A3A3A3; }
.panel.dark .panellabel { color: #6E6E6E; }
.row { display: flex; gap: 8px; }
.btn { border: none; border-radius: 999px; padding: 0 16px; height: 34px; font-size: 12px; font-weight: 700; display: flex; align-items: center; }
.btn-p-light { background: #820AD1; color: #FFFFFF; }
.btn-s-light { background: transparent; border: 1.5px solid #820AD1; color: #820AD1; }
.btn-p-dark { background: #A633E6; color: #FFFFFF; }
.btn-s-dark { background: transparent; border: 1.5px solid #A633E6; color: #A633E6; }
.input { border-radius: 8px; padding: 9px 12px; font-size: 12px; }
.input-light { border: 1px solid #D1D1D1; color: #A3A3A3; background: #FFFFFF; }
.input-dark { border: 1px solid #3D3D3D; color: #6E6E6E; background: #1A1A1A; }
.chiprow { display: flex; gap: 6px; }
.chip { border-radius: 999px; font-size: 10.5px; font-weight: 700; padding: 4px 10px; }
.chip.uv-l { background: #D6A3F9; color: #530789; }
.chip.uv-d { background: #3D0066; color: #D6A3F9; }
.chip.pix-l { background: #E6F9EF; color: #1AAE5C; }
.chip.pix-d { background: #0d3322; color: #1AAE5C; }
.balance { border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; }
.balance.light { background: #F5F5F5; }
.balance.dark { background: #1A1A1A; }
.balance .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.panel.light .lbl { color: #6E6E6E; }
.panel.dark .lbl { color: #B8B8B8; }
.balance .amt { font-size: 20px; font-weight: 300; }
.panel.light .amt { color: #111111; }
.panel.dark .amt { color: #F5F5F5; }
.balance .eye { font-size: 11px; font-weight: 700; color: #820AD1; }
.panel.dark .eye { color: #A633E6; }
.feedbackrow { display: flex; gap: 6px; }
.fbadge { border-radius: 4px; font-size: 9.5px; font-weight: 700; padding: 3px 8px; text-transform: uppercase; }
.fbadge.success { background: #E6F9EF; color: #1AAE5C; }
.fbadge.warning { background: #FFF8E6; color: #E5A30A; }
.fbadge.alert { background: #FDE8E9; color: #E5222D; }
.fbadge.success-d { background: #0d3322; color: #1AAE5C; }
.fbadge.warning-d { background: #332600; color: #E5A30A; }
.fbadge.alert-d { background: #330a0c; color: #E5222D; }
.ccard { border-radius: 12px; height: 68px; padding: 10px 14px; display: flex; flex-direction: column; justify-content: space-between; color: #FFFFFF; }
.ccard.light { background: linear-gradient(135deg,#820AD1,#530789); }
.ccard.dark { background: linear-gradient(135deg,#3D0066,#1A0033); }
.ccard .ctop { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.ccard .cnum { font-size: 13px; font-weight: 700; letter-spacing: 1px; }
.togglerow { display: flex; align-items: center; justify-content: space-between; }
.toggleleft { display: flex; align-items: center; gap: 8px; }
.avatar { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.avatar.light { background: #D6A3F9; color: #530789; }
.avatar.dark { background: #3D0066; color: #D6A3F9; }
.togglelabel { font-size: 11px; font-weight: 500; }
.panel.light .togglelabel { color: #2E2E2E; }
.panel.dark .togglelabel { color: #F5F5F5; }
.switch { width: 34px; height: 18px; border-radius: 999px; position: relative; }
.switch.on-light { background: #820AD1; }
.switch.on-dark { background: #A633E6; }
.switch::after { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; top: 2px; right: 2px; }
footer { flex: 0 0 40px; background: #F5F5F5; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; font-size: 10.5px; color: #6E6E6E; }
</style>
<div class="page">
<nav>
<p class="logo">Nubank NuDS</p>
<div class="navlinks"><span class="on">Foundations</span><span>Components</span><span>Patterns</span><span>Resources</span></div>
<button class="navcta">Open in Figma</button>
</nav>
<section class="hero">
<div>
<h1>Design once. Ship everywhere.</h1>
<p>One purple, two modes, 100+ components serving Brazil, Mexico and Colombia.</p>
</div>
<div class="statpills">
<div class="statpill"><b>118M+</b><span>Customers</span></div>
<div class="statpill"><b>100+</b><span>Components</span></div>
<div class="statpill"><b>80%</b><span>Adoption</span></div>
</div>
</section>
<section class="modes">
<div class="panel light">
<span class="panellabel">Light mode</span>
<div class="row">
<button class="btn btn-p-light">Transfer</button>
<button class="btn btn-s-light">Add money</button>
</div>
<div class="ccard light">
<span class="ctop">Nubank Ultravioleta</span>
<span class="cnum">•••• 4821</span>
</div>
<div class="input input-light">Card number</div>
<div class="chiprow">
<span class="chip uv-l">Ultravioleta</span>
<span class="chip pix-l">Pix</span>
</div>
<div class="balance light">
<div><div class="lbl">Available balance</div><div class="amt">R$ 4,238.90</div></div>
<span class="eye">Show</span>
</div>
<div class="togglerow">
<div class="toggleleft"><span class="avatar light">AM</span><span class="togglelabel">Face ID login</span></div>
<span class="switch on-light"></span>
</div>
<div class="feedbackrow">
<span class="fbadge success">Approved</span>
<span class="fbadge warning">Pending</span>
<span class="fbadge alert">Blocked</span>
</div>
</div>
<div class="panel dark">
<span class="panellabel">Dark mode</span>
<div class="row">
<button class="btn btn-p-dark">Transfer</button>
<button class="btn btn-s-dark">Add money</button>
</div>
<div class="ccard dark">
<span class="ctop">Nubank Ultravioleta</span>
<span class="cnum">•••• 4821</span>
</div>
<div class="input input-dark">Card number</div>
<div class="chiprow">
<span class="chip uv-d">Ultravioleta</span>
<span class="chip pix-d">Pix</span>
</div>
<div class="balance dark">
<div><div class="lbl">Available balance</div><div class="amt">R$ 4,238.90</div></div>
<span class="eye">Show</span>
</div>
<div class="togglerow">
<div class="toggleleft"><span class="avatar dark">AM</span><span class="togglelabel">Face ID login</span></div>
<span class="switch on-dark"></span>
</div>
<div class="feedbackrow">
<span class="fbadge success-d">Approved</span>
<span class="fbadge warning-d">Pending</span>
<span class="fbadge alert-d">Blocked</span>
</div>
</div>
</section>
<footer>
<span>© Nubank NuDS · Nu Design System</span>
<span>Colors · Typography · Elevation · Shapes · Components</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.2; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #838383; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.06em; background: #111111; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.06em; background: #ffffff; color: #111111;
border: 1px solid #111111; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #838383; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.08em; background: #f6f6f6; color: #444444;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Gagosian</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'GTAmerica',Helvetica,Arial,sans-serif; color:#444444; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d5dee2;}
.logo{font-family:'GagosianHeadline',Georgia,serif;font-size:24px;color:#111111;letter-spacing:1px;}
.navlinks{display:flex;gap:26px;font-size:13px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:#111111;}
.menu-toggle{font-size:12px;letter-spacing:0.04em;text-transform:uppercase;color:#111111;}
.hero{background:#1e2428;min-height:280px;display:flex;align-items:flex-end;padding:32px;position:relative;background-image:linear-gradient(to top, #161a1c 0%, transparent 60%),linear-gradient(120deg,#3a342b,#1e2428 70%);}
.hero-meta{color:#b2b2b2;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:8px;}
h1{font-family:'GagosianHeadline',Georgia,serif;font-size:56px;font-weight:400;line-height:1.05;letter-spacing:-1.5px;color:#fff;margin:0;}
.section{padding:28px 32px 0;}
.divider{border:none;border-top:1px solid #d5dee2;margin:0 0 22px;}
.section-label{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:#838383;margin-bottom:16px;}
.grid{display:flex;gap:24px;}
.card{flex:1;}
.card-img{background:#f6f6f6;aspect-ratio:4/5;height:150px;}
.card-title{font-family:'GagosianHeadline',Georgia,serif;font-size:22px;color:#111111;margin-top:12px;}
.card-meta{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:#838383;margin-top:4px;}
.card-body{font-size:14px;color:#444444;margin-top:6px;font-style:italic;}
</style>
<div class="nav">
<div class="logo">Gagosian</div>
<div class="navlinks"><span>Exhibitions</span><span>Artists</span><span>Art Fairs</span><span>Quarterly</span></div>
<div class="menu-toggle">Menu</div>
</div>
<div class="hero">
<div>
<div class="hero-meta">Britannia Street — Through October</div>
<h1>Recent Works</h1>
</div>
</div>
<div class="section">
<div class="section-label">Current Exhibitions</div>
<div class="grid">
<div class="card"><div class="card-img"></div><div class="card-title">Reyes Solano</div><div class="card-meta">Grosvenor Hill — London</div><div class="card-body">Structures of Silence</div></div>
<div class="card"><div class="card-img" style="background:#f0f0f0;"></div><div class="card-title">Odile Vantour</div><div class="card-meta">West 24th Street — New York</div><div class="card-body">Fields and Fragments</div></div>
<div class="card"><div class="card-img" style="background:#fafafa;"></div><div class="card-title">Kenji Arata</div><div class="card-meta">Rue de Ponthieu — Paris</div><div class="card-body">Weight of Light</div></div>
</div>
</div>
<hr class="divider" style="margin-top:26px;">
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #368727; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #368727; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9fc498; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00754a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #368727; color: #000000;
border: 1px solid #00754a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #368727; color: #f5f5f5;
border: 1px solid #559948; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9fc498; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2d842d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#0E1411; color:#E8EFE9; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; font-variant-numeric:tabular-nums; }
.stage { width:960px; height:640px; padding:24px 36px 0; }
.greet { font-size:13px; font-weight:500; color:#9DB0A2; }
.h1 { font-size:26px; font-weight:700; margin-top:2px; }
.totallbl { font-size:12px; font-weight:500; color:#9DB0A2; margin-top:16px; }
.balance { font-size:34px; font-weight:800; letter-spacing:-0.6pt; margin-top:4px; }
.daych { font-size:13px; font-weight:600; color:#15B374; margin-top:6px; }
.daych .m { color:#9DB0A2; font-weight:400; }
.spark { margin-top:16px; height:80px; position:relative; }
.sparksvg { width:100%; height:100%; }
.rangepills { display:flex; gap:8px; margin-top:8px; }
.rp { font-size:11px; font-weight:600; padding:5px 12px; border-radius:999px; background:#1F2C24; color:#9DB0A2; }
.rp.on { background:#368727; color:#fff; }
.rows { margin-top:20px; }
.row { display:flex; align-items:center; padding:12px 0; border-bottom:0.5px solid #26342B; }
.chip38 { width:38px; height:38px; border-radius:10px; background:#1F2C24; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; margin-right:14px; }
.rmid { flex:1; }
.rmid .sym { font-size:15px; font-weight:600; }
.rmid .nm { font-size:12px; color:#9DB0A2; margin-top:2px; }
.rval { text-align:right; }
.rval .v { font-size:16px; font-weight:700; }
.rval .p { font-size:12px; font-weight:600; margin-top:2px; }
.gain { color:#15B374; } .loss { color:#E5544B; }
</style>
</head>
<body>
<div class="stage">
<div style="font-size:11px;font-weight:700;letter-spacing:1pt;text-transform:uppercase;color:#368727;margin-bottom:4px">Fidelity (iOS)</div>
<div class="greet">Good morning</div>
<div class="h1">Accounts</div>
<div class="totallbl">Total account value</div>
<div class="balance">$428,164.92</div>
<div class="daych">▲ +$3,841.20 <span class="m">(+0.90%) today</span></div>
<div class="spark">
<svg class="sparksvg" viewBox="0 0 400 80" preserveAspectRatio="none">
<defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#4FB23B" stop-opacity="0.32"/><stop offset="100%" stop-color="#4FB23B" stop-opacity="0"/></linearGradient></defs>
<path d="M0,60 L40,50 L80,55 L120,35 L160,40 L200,20 L240,28 L280,15 L320,22 L360,8 L400,12 L400,80 L0,80 Z" fill="url(#g)"/>
<path d="M0,60 L40,50 L80,55 L120,35 L160,40 L200,20 L240,28 L280,15 L320,22 L360,8 L400,12" fill="none" stroke="#4FB23B" stroke-width="2"/>
</svg>
</div>
<div class="rangepills"><span class="rp on">1D</span><span class="rp">1W</span><span class="rp">1M</span><span class="rp">1Y</span><span class="rp">5Y</span><span class="rp">All</span></div>
<div class="rows">
<div class="row"><div class="chip38">VOO</div><div class="rmid"><div class="sym">VOO</div><div class="nm">Vanguard S&P 500 ETF</div></div><div class="rval"><div class="v">$512.30</div><div class="p gain">+1.24%</div></div></div>
<div class="row"><div class="chip38">AAPL</div><div class="rmid"><div class="sym">AAPL</div><div class="nm">Apple Inc.</div></div><div class="rval"><div class="v">$228.40</div><div class="p loss">−0.62%</div></div></div>
<div class="row"><div class="chip38">FXAIX</div><div class="rmid"><div class="sym">FXAIX</div><div class="nm">Fidelity 500 Index Fund</div></div><div class="rval"><div class="v">$198.75</div><div class="p gain">+0.88%</div></div></div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4af1c; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4af1c; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #775816; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e49b00; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4af1c; color: #000000;
border: 1px solid #e49b00; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f4af1c; color: #111111;
border: 1px solid #d0961a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #775816; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f1ac18; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#323232; box-sizing:border-box;
font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; flex-direction:column; height:640px; }
header { height:50px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 20px;
border-bottom:1px solid #eaeaea; }
.logo { font-size:16px; font-weight:700; color:#323232; }
.search { background:#eaeaea; border-radius:4px; padding:0 5px; height:32px; display:flex; align-items:center;
font-size:14px; color:#8b8a8a; width:220px; }
.btn-amber { background:#f4af1c; color:#ffffff; border-radius:4px; height:32px; padding:0 16px; display:flex;
align-items:center; font-size:14px; font-weight:700; }
.body { flex:1 1 auto; display:flex; min-height:0; }
.sidebar { width:236px; flex:0 0 auto; border-right:1px solid #eaeaea; display:flex; flex-direction:column; }
.sidebar .stitle { font-size:12px; color:#8b8a8a; padding:12px 14px 6px; }
.srow { height:55px; border-bottom:1px solid #eaeaea; display:flex; align-items:center; justify-content:space-between;
padding:0 14px; }
.srow.hover { background:rgba(0,0,0,0.04); }
.sname { font-size:14px; color:#323232; }
.scode { font-size:11px; color:#8b8a8a; }
.sprice { text-align:right; }
.sprice .p { font-size:14px; font-weight:700; }
.sprice .d { font-size:11px; }
.rise { color:#f3746d; }
.fall { color:#6c9c46; }
.main { flex:1 1 auto; padding:14px 20px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.tickerrow { display:flex; align-items:baseline; gap:14px; }
.tcode { font-size:20px; font-weight:700; color:#323232; }
.tname { font-size:13px; color:#8b8a8a; }
.tprice { font-size:24px; font-weight:700; }
.tdelta { font-size:14px; font-weight:700; }
.chartcard { background:#ffffff; border-radius:4px; box-shadow:0 2px 2px 0 rgba(0,0,0,.08), 0 2px 7px 0 rgba(0,0,0,.1);
padding:14px 16px; flex:1 1 auto; min-height:0; }
.chartcard svg { width:100%; height:100%; display:block; }
.lowerrow { display:flex; gap:14px; }
.infocard { flex:1; background:#eaeaea; border-radius:8px; padding:12px 14px; }
.infocard .ititle { font-size:12px; color:#8b8a8a; margin-bottom:8px; }
.irow { display:flex; justify-content:space-between; font-size:13px; padding:3px 0; color:#323232; }
.tradecard { flex:1.2; background:#ffffff; border-radius:4px; box-shadow:0 2px 2px 0 rgba(0,0,0,.08), 0 2px 7px 0 rgba(0,0,0,.1);
padding:14px 16px; display:flex; flex-direction:column; gap:8px; justify-content:center; }
.tradebtns { display:flex; gap:8px; }
.btn-buy { flex:1; background:#f3746d; color:#ffffff; border-radius:4px; height:32px; display:flex; align-items:center;
justify-content:center; font-size:14px; font-weight:700; }
.btn-sell { flex:1; background:#6c9c46; color:#ffffff; border-radius:4px; height:32px; display:flex; align-items:center;
justify-content:center; font-size:14px; font-weight:700; }
.qtyrow { display:flex; align-items:center; gap:8px; }
.qty { flex:1; background:#eaeaea; border-radius:4px; height:32px; display:flex; align-items:center; padding:0 5px;
font-size:16px; color:#323232; }
</style></head>
<body>
<div class="wrap">
<header>
<div class="logo">Fugle</div>
<div class="search">Search ticker or company</div>
<div class="btn-amber">Start Trading</div>
</header>
<div class="body">
<div class="sidebar">
<div class="stitle">WATCHLIST</div>
<div class="srow hover">
<div><div class="sname">TSMC</div><div class="scode">2330</div></div>
<div class="sprice"><div class="p">1,015</div><div class="d rise">+2.14%</div></div>
</div>
<div class="srow">
<div><div class="sname">MediaTek</div><div class="scode">2454</div></div>
<div class="sprice"><div class="p">1,320</div><div class="d fall">-0.87%</div></div>
</div>
<div class="srow">
<div><div class="sname">Hon Hai</div><div class="scode">2317</div></div>
<div class="sprice"><div class="p">205.5</div><div class="d rise">+1.02%</div></div>
</div>
<div class="srow">
<div><div class="sname">Fubon Fin</div><div class="scode">2881</div></div>
<div class="sprice"><div class="p">92.4</div><div class="d fall">-0.35%</div></div>
</div>
<div class="srow">
<div><div class="sname">CTBC Fin</div><div class="scode">2891</div></div>
<div class="sprice"><div class="p">44.9</div><div class="d rise">+0.68%</div></div>
</div>
</div>
<div class="main">
<div class="tickerrow">
<span class="tcode">2330</span><span class="tname">Taiwan Semiconductor</span>
<span class="tprice rise">1,015</span><span class="tdelta rise">+21.5 (+2.14%)</span>
</div>
<div class="chartcard">
<svg viewBox="0 0 900 190" preserveAspectRatio="none">
<line x1="0" y1="47" x2="900" y2="47" stroke="#eaeaea" stroke-width="1"/>
<line x1="0" y1="95" x2="900" y2="95" stroke="#eaeaea" stroke-width="1"/>
<line x1="0" y1="142" x2="900" y2="142" stroke="#eaeaea" stroke-width="1"/>
<polyline points="0,120 90,110 180,130 270,90 360,100 450,60 540,75 630,40 720,55 810,20 900,35"
fill="none" stroke="#f3746d" stroke-width="2"/>
<polygon points="0,120 90,110 180,130 270,90 360,100 450,60 540,75 630,40 720,55 810,20 900,35 900,190 0,190"
fill="#f4af1c" opacity="0.08"/>
</svg>
</div>
<div class="lowerrow">
<div class="infocard">
<div class="ititle">ORDER BOOK</div>
<div class="irow"><span>Bid</span><span class="rise">1,014</span></div>
<div class="irow"><span>Ask</span><span class="fall">1,016</span></div>
<div class="irow"><span>Volume</span><span>48.2M</span></div>
</div>
<div class="tradecard">
<div class="tradebtns"><div class="btn-buy">Buy</div><div class="btn-sell">Sell</div></div>
<div class="qtyrow"><div class="qty">1,000 shares</div><div class="btn-amber" style="height:32px;">Submit</div></div>
</div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; background: #bd2426; color: #ffffff;
border: none; border-radius: 2px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; background: #ffffff; color: #272727;
border: 1px solid #bd2426; border-radius: 2px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #272727;
border: 1px solid #c9c9c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #bd2426; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,'Segoe UI',Roboto,Ubuntu,sans-serif; color:#272727; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #ebebeb;}
.logo{font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;text-transform:uppercase;color:#595959;}
.navlinks .active{color:#272727;border-bottom:2px solid #bd2426;padding-bottom:20px;}
.catnav{background:#f5f5f5;display:flex;gap:20px;padding:10px 32px;font-size:14px;font-weight:600;text-transform:uppercase;color:#595959;}
.hero{background:#163959;color:#fff;padding:26px 32px;display:flex;align-items:center;justify-content:space-between;margin-top:14px;}
.herotext h2{font-size:28px;font-weight:700;margin:0 0 8px;}
.herotext p{font-size:14px;color:#cdd9e3;margin:0 0 12px;}
.btn{display:inline-block;background:#bd2426;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;border-radius:2px;}
.pill{background:#f68b1f;color:#fff;font-size:13px;font-weight:600;padding:8px 20px;border-radius:9999px;}
.grid{display:flex;gap:14px;padding:20px 32px;}
.card{flex:1;border:1px solid #dedede;border-radius:4px;overflow:hidden;}
.thumb{aspect-ratio:1/1;background:#f5f5f5;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;text-transform:uppercase;color:#fff;padding:2px 8px;border-radius:2px;}
.body{padding:10px;}
.artist{font-size:14px;color:#595959;}
.title{font-size:16px;font-weight:600;margin:2px 0;}
.price{font-size:16px;font-weight:700;}
.price.sale{color:#bd2426;}
.orig{font-size:14px;color:#737373;text-decoration:line-through;margin-left:6px;}
</style>
<div class="nav">
<div class="logo">Rough Trade US</div>
<div class="navlinks"><div class="active">Rock</div><div>Electronic</div><div>Jazz</div><div>Hip-Hop</div></div>
</div>
<div class="catnav"><span>Vinyl</span><span>CDs</span><span>Merch</span><span>Turntables</span></div>
<div class="hero">
<div class="herotext"><h2>Independent since the start.</h2><p>Warehouse-shelf pricing, no frictionless browsing pretense.</p><div class="btn">Shop New Arrivals</div></div>
<div class="pill">Limited Edition Drop</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#e8dfd0"><span class="badge" style="background:#bd2426">Sale</span></div><div class="body"><div class="artist">Sonic Youth</div><div class="title">Daydream Nation</div><div class="price sale">$19.99<span class="orig">$28.99</span></div></div></div>
<div class="card"><div class="thumb" style="background:#d0e0e8"><span class="badge" style="background:#9bca3e">New</span></div><div class="body"><div class="artist">Fela Kuti</div><div class="title">Expensive Shit</div><div class="price">$24.99</div></div></div>
<div class="card"><div class="thumb" style="background:#e8d0e0"><span class="badge" style="background:#f68b1f">Limited</span></div><div class="body"><div class="artist">Slowdive</div><div class="title">Souvlaki (Splatter)</div><div class="price">$34.99</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; background: #0072cf; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #0072cf;
border: 1px solid #0072cf; border-radius: 4px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #36373a;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #dff0d8; color: #3c763d;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#36373a; box-sizing:border-box;
font-family:"Open Sans",Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
.topstrip { height:30px; background:#0072cf; display:flex; align-items:center; padding:0 32px; gap:20px; }
.topstrip span { color:#ffffff; font-size:11px; font-weight:600; }
nav { height:50px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#ffffff; border-bottom:1px solid #e7e7e7; }
.brand { font-size:19px; font-weight:700; color:#222222; }
.nlinks { display:flex; gap:22px; }
.nlinks div { font-size:14px; font-weight:600; color:#36373a; }
.nlinks div.on { color:#0072cf; }
.searchbtn { background:#00b4e0; color:#fff; font-size:13px; font-weight:600; border-radius:4px; padding:8px 16px; }
.hero { height:200px; background:#f5f5f5; display:flex; align-items:center; padding:0 40px; border-bottom:1px solid #eeeeee; }
.herotxt .k { color:#0072cf; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
.herotxt h1 { color:#222222; font-size:28px; font-weight:700; margin:8px 0 8px; }
.herotxt p { color:#36373a; font-size:15px; margin:0 0 14px; max-width:440px; }
.herobtn { display:inline-block; background:#0072cf; color:#fff; font-size:14px; font-weight:600; border-radius:4px; padding:11px 22px; }
.section { padding:18px 32px 0; }
.sechead { font-size:18px; font-weight:700; color:#222222; margin-bottom:12px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { border:1px solid #eeeeee; background:#fff; }
.shot { aspect-ratio:4/3; background:#f5f5f5; position:relative; }
.shot .chair { position:absolute; left:50%; top:50%; width:50px; height:60px; transform:translate(-50%,-50%);
border-radius:6px 6px 3px 3px; }
.c1 .chair { background:linear-gradient(160deg,#0072cf,#286090); }
.c2 .chair { background:linear-gradient(160deg,#00b4e0,#0072cf); }
.c3 .chair { background:linear-gradient(160deg,#555555,#222222); }
.c4 .chair { background:linear-gradient(160deg,#4a89bf,#0072cf); }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; text-transform:uppercase;
padding:2px 8px; border-radius:20px; background:#dff0d8; color:#3c763d; }
.badge.info { border-radius:4px; background:#d9edf7; color:#31708f; }
.cbody { padding:10px 10px 12px; }
.ctitle { font-size:13px; font-weight:600; color:#0072cf; margin-bottom:4px; }
.cprice { font-size:14px; font-weight:700; color:#222222; }
</style></head>
<body>
<div class="topstrip"><span>Free Shipping On Orders $99+</span><span>Business Accounts Available</span></div>
<nav>
<div class="brand">Davies Office</div>
<div class="nlinks"><div class="on">Seating</div><div>Desks</div><div>Storage</div><div>Bulk Orders</div></div>
<div class="searchbtn">⌕ Search Catalog</div>
</nav>
<div class="hero">
<div class="herotxt">
<div class="k">Trusted By Facilities Buyers</div>
<h1>Office Furniture, Fully Specified</h1>
<p>Task chairs, desks, and storage systems with the specs office managers actually need.</p>
<div class="herobtn">Request A Quote</div>
</div>
</div>
<div class="section">
<div class="sechead">Best Selling Chairs</div>
<div class="grid">
<div class="card c1"><div class="shot"><span class="badge">In Stock</span><div class="chair"></div></div>
<div class="cbody"><div class="ctitle">ErgoTask Mesh Chair</div><div class="cprice">$249.00</div></div></div>
<div class="card c2"><div class="shot"><span class="badge info">Best Seller</span><div class="chair"></div></div>
<div class="cbody"><div class="ctitle">ProLine Executive Chair</div><div class="cprice">$389.00</div></div></div>
<div class="card c3"><div class="shot"><div class="chair"></div></div>
<div class="cbody"><div class="ctitle">Conference Guest Chair</div><div class="cprice">$159.00</div></div></div>
<div class="card c4"><div class="shot"><span class="badge">In Stock</span><div class="chair"></div></div>
<div class="cbody"><div class="ctitle">StackPro Training Chair</div><div class="cprice">$99.00</div></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1b18;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1b18;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #1a1b18; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #207c83; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #207c83;
border: 1px solid #207c83; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1b18;
border: 1px solid #c6c6c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.2px; background: #d0eaec; color: #175d63;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Cabin','Helvetica Neue',sans-serif; color:#272d45; }
*{box-sizing:border-box;}
.nav{height:64px;background:#ffffff;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:'Apercu',sans-serif;font-size:21px;font-weight:600;color:#272d45;}
.navlinks{display:flex;gap:24px;font-family:'Apercu',sans-serif;font-size:13px;font-weight:500;color:#272d45;}
.subtoggle{display:flex;align-items:center;gap:8px;background:#f7f7f8;border-radius:8px;padding:6px 12px;font-size:12px;color:#207c83;}
.hero{height:238px;display:flex;align-items:center;padding:0 40px;background:#207c83;color:#fff;}
.heroText{width:440px;}
.headline{font-family:'Apercu',sans-serif;font-size:30px;font-weight:600;line-height:1.25;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.55;color:#d0eaec;margin:0 0 20px;max-width:370px;}
.btn{display:inline-block;background:#ff9529;color:#fff;font-family:'Apercu',sans-serif;font-size:14px;font-weight:600;padding:12px 26px;border-radius:8px;}
.ingredchip{position:absolute;right:100px;top:70px;background:#b2f9e9;color:#175d63;font-size:11px;font-weight:700;padding:6px 14px;border-radius:8px;}
.ingredchip2{position:absolute;right:70px;top:110px;background:#b2f9e9;color:#175d63;font-size:11px;font-weight:700;padding:6px 14px;border-radius:8px;}
.ingredchip3{position:absolute;right:130px;top:150px;background:#b2f9e9;color:#175d63;font-size:11px;font-weight:700;padding:6px 14px;border-radius:8px;}
.sec{position:relative;height:302px;padding:26px 40px;}
.eyebrow{font-family:'Apercu',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#207c83;margin-bottom:8px;}
.secTitle{font-family:'Apercu',sans-serif;font-size:18px;font-weight:600;color:#272d45;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:216px;background:#f4f4f6;border-radius:8px;padding:12px;}
.thumb{height:96px;border-radius:8px;margin-bottom:10px;}
.chiprow{display:flex;gap:4px;margin-bottom:8px;}
.chip{background:#d0eaec;color:#175d63;font-size:9px;font-weight:700;padding:2px 7px;border-radius:6px;}
.cardTitle{font-family:'Apercu',sans-serif;font-size:14px;font-weight:600;color:#272d45;margin-bottom:4px;}
.cardPrice{font-size:13px;font-weight:700;color:#207c83;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#272d45;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#b2f9e9;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Lola</div>
<div class="navlinks"><span>Period Care</span><span>Sexual Wellness</span><span>Supplements</span></div>
<div class="subtoggle">Subscribe & Save 20%</div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">Ingredients first.<br>Always.</div>
<div class="sub">Wellness built on radical transparency — read the label before you read the name.</div>
<div class="btn">Build Your Box</div>
</div>
<div class="ingredchip">Organic Cotton</div>
<div class="ingredchip2">Fragrance-Free</div>
<div class="ingredchip3">Dermatologist Tested</div>
</div>
<div class="sec">
<div class="eyebrow">Subscribe & Save</div>
<div class="secTitle">Shop the Essentials</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#207c83,#272d45)"></div><div class="chiprow"><div class="chip">Organic</div><div class="chip">Fragrance-Free</div></div><div class="cardTitle">Tampons, Regular</div><div class="cardPrice">$8.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff9529,#272d45)"></div><div class="chiprow"><div class="chip">Vegan</div><div class="chip">pH Balanced</div></div><div class="cardTitle">Daily Wash</div><div class="cardPrice">$12.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b2f9e9,#207c83)"></div><div class="chiprow"><div class="chip">Non-GMO</div><div class="chip">Vegan</div></div><div class="cardTitle">Prenatal Vitamins</div><div class="cardPrice">$32.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#272d45,#207c83)"></div><div class="chiprow"><div class="chip">Water-Based</div></div><div class="cardTitle">Personal Lubricant</div><div class="cardPrice">$14.99</div></div>
</div>
</div>
<div class="footer"><span>© Wellness, Honestly Labeled</span><span>Ingredient Glossary</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0061fe; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0061fe; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b2f9; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f5f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0061fe; color: #f7f5f2;
border: 1px solid #f7f5f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0061fe; color: #f5f5f5;
border: 1px solid #2779fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b2f9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2879fc; color: #f7f5f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f5f2; color:#1e1919; box-sizing:border-box;
font-family:"Sharp Grotesk","Atlas Grotesk",-apple-system,sans-serif; }
* { box-sizing:border-box; }
header { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:700; font-size:18px; }
.navlinks { display:flex; gap:20px; font-size:15px; }
.cta-blue { background:#0061fe; color:#f7f5f2; border:2px solid #0061fe; border-radius:12px; padding:0 16px; height:40px;
display:flex; align-items:center; font-size:15px; }
.hero { display:flex; gap:30px; padding:24px 32px; align-items:center; }
.hero-txt { flex:1; }
.hero h1 { font-size:34px; font-weight:500; line-height:1.2; margin:0 0 14px; }
.row { display:flex; gap:10px; }
.btn-blue { background:#0061fe; color:#f7f5f2; border:2px solid #0061fe; border-radius:16px; padding:14px 22px;
font-size:15px; font-weight:400; }
.btn-outline { background:transparent; color:#1e1919; border:2px solid #1e1919; border-radius:16px; padding:14px 22px;
font-size:15px; }
.hero-visual { flex:1; height:180px; border-radius:16px; background:#eee9e2; position:relative; }
.hero-visual .chip { position:absolute; background:#fff; border-radius:12px; padding:12px; font-size:12px; }
.hero-visual .chip.c1 { top:16px; left:16px; }
.hero-visual .chip.c2 { bottom:20px; right:24px; background:#cd2f7b; color:#fff; }
.band { background:#1e1919; color:#f7f5f2; padding:26px 32px; display:flex; gap:20px; align-items:center; }
.band .txt { flex:1; }
.band h2 { font-size:24px; font-weight:500; margin:0 0 6px; }
.band p { font-size:14px; margin:0; opacity:0.8; }
.band .btn-out2 { border:2px solid #f7f5f2; color:#f7f5f2; border-radius:16px; padding:10px 18px; font-size:14px; }
.menu { display:flex; gap:14px; padding:22px 32px; }
.mcard { flex:1; border-radius:12px; padding:16px; height:60px; }
.mcard.a { background:#eee9e2; }
.mcard.b { background:#ffffff; border:1px solid #eee9e2; }
.mcard h4 { font-size:14px; margin:0; }
</style></head>
<body>
<header>
<span class="brand">Dropbox</span>
<div class="navlinks"><span>Products</span><span>Solutions</span><span>Enterprise</span><span>Pricing</span></div>
<div class="cta-blue">Get started</div>
</header>
<section class="hero">
<div class="hero-txt">
<h1>Get to work, with a lot less work.</h1>
<div class="row"><button class="btn-blue">Try Dropbox free</button><button class="btn-outline">Learn more</button></div>
</div>
<div class="hero-visual">
<div class="chip c1">Q4-report.pdf<br><b>Synced</b></div>
<div class="chip c2">Shared with 4</div>
</div>
</section>
<section class="band">
<div class="txt"><h2>Security never comes second.</h2><p>These aren't just your files. They are pieces of your life.</p></div>
<div class="btn-out2">Learn more</div>
</section>
<section class="menu">
<div class="mcard a"><h4>Dropbox</h4></div>
<div class="mcard b"><h4>Replay</h4></div>
<div class="mcard a"><h4>Sign</h4></div>
<div class="mcard b"><h4>Dash</h4></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #a3a3a3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; background: #000000; color: #ffffff;
border: none; border-radius: 9999px; padding: 8px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 9999px;
padding: 8px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a3a3a3; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.43; background: #fafafa; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
/* 정말 아무것도 없다 — README 같은 단일 중앙 컬럼, 검은 필 하나, 터미널 스니펫,
손그림풍 라마 마스코트(원+삼각형만으로 절제해 표현) 하나가 유일한 장식. */
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; border-bottom:1px solid #e5e5e5; }
.brand { font-size:15px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#737373; }
.btn-pill { background:#000; color:#fff; border:none; border-radius:999px; padding:8px 18px; font-size:13px; font-weight:500; }
.main { display:flex; flex-direction:column; align-items:center; padding:56px 40px 0; text-align:center; }
.llama { width:64px; height:64px; margin-bottom:18px; position:relative; }
.llama .body { position:absolute; width:40px; height:44px; background:#525252; border-radius:50% 50% 45% 45%; left:12px; top:18px; }
.llama .neck { position:absolute; width:14px; height:30px; background:#525252; left:24px; top:-6px; border-radius:6px; transform:rotate(-8deg); }
.llama .head { position:absolute; width:18px; height:16px; background:#525252; left:16px; top:-16px; border-radius:50%; }
.llama .ear { position:absolute; width:5px; height:10px; background:#525252; left:18px; top:-24px; border-radius:3px; }
.llama .ear2 { position:absolute; width:5px; height:10px; background:#525252; left:27px; top:-24px; border-radius:3px; }
.main h1 { font-size:34px; font-weight:500; letter-spacing:-0.5px; margin:0; max-width:520px; }
.main p { font-size:14px; color:#737373; margin:12px 0 0; }
.install { margin-top:20px; background:#171717; color:#e5e5e5; border-radius:999px; padding:12px 24px;
font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:13px; }
.install .p { color:#27c93f; }
.row { display:flex; gap:10px; margin-top:18px; }
.btn-black { background:#000; color:#fff; border:none; border-radius:999px; padding:11px 26px; font-size:13px; font-weight:600; }
.btn-out { background:#fff; color:#000; border:1px solid #d4d4d4; border-radius:999px; padding:10px 26px; font-size:13px; font-weight:600; }
.cards { display:flex; gap:14px; padding:34px 40px 0; justify-content:center; }
.card { flex:1; max-width:220px; border:1px solid #e5e5e5; border-radius:16px; padding:18px; text-align:left; }
.card h4 { font-size:14px; font-weight:600; margin:0 0 6px; }
.card p { font-size:12px; color:#737373; margin:0; line-height:1.5; }
</style></head>
<body>
<nav>
<p class="brand">Ollama</p>
<div class="navlinks"><span>Models</span><span>Docs</span><span>Blog</span></div>
<button class="btn-pill">Download</button>
</nav>
<div class="main">
<div class="llama"><span class="ear"></span><span class="ear2"></span><span class="head"></span><span class="neck"></span><span class="body"></span></div>
<h1>Get up and running with large language models, locally.</h1>
<p>Run open models on your own machine. No cloud, no lock-in.</p>
<div class="install"><span class="p">$</span> ollama run llama3.2</div>
<div class="row"><button class="btn-black">Download</button><button class="btn-out">View docs</button></div>
</div>
<div class="cards">
<div class="card"><h4>Your data stays yours</h4><p>Everything runs locally — nothing ever leaves your machine.</p></div>
<div class="card"><h4>Free forever</h4><p>Open source, no seat limits, no surprise invoices.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #191d21;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #191d21;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #191d21; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #191d21;
border: 1px solid #108474; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #191d21;
border: 1px solid #c1c3c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.4px; background: #108474; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:'Nunito Sans', Arial, sans-serif; color:#555555; }
*{box-sizing:border-box;}
.ann{height:28px;background:#108474;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:.3px;}
.nav{height:60px;background:#fff;border-bottom:1px solid #e2e2e2;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-family:'Maven Pro',Arial,sans-serif;font-size:20px;font-weight:700;color:#191d21;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#191d21;}
.hero{height:196px;background:#191d21;display:flex;align-items:center;padding:0 34px;gap:30px;}
.herotext{width:400px;}
.kicker{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#f28c00;margin-bottom:8px;}
h1{font-family:'Maven Pro',Arial,sans-serif;font-size:28px;font-weight:700;color:#fff;margin:0 0 8px;letter-spacing:-.3px;}
.sub{font-size:13px;color:#c7c9cc;margin:0 0 14px;width:340px;}
.cta{display:inline-block;background:#108474;color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:12px 22px;border-radius:4px;}
.heroart{width:200px;height:150px;position:relative;}
.brick{position:absolute;width:120px;height:60px;border-radius:8px;background:linear-gradient(135deg,#108474,#0c6a5d);right:20px;top:40px;}
.port{position:absolute;width:34px;height:12px;border-radius:9999px;background:#f28c00;right:40px;top:64px;}
.wattbadge{position:absolute;left:0;top:0;background:#108474;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:4px 10px;border-radius:9999px;}
.spectable{display:flex;gap:1px;background:#e2e2e2;margin:16px 30px 0;}
.speccell{flex:1;background:#f2f2f2;text-align:center;padding:10px 4px;}
.speclabel{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#7b7b7b;}
.specvalue{font-family:'Maven Pro',Arial,sans-serif;font-size:15px;font-weight:700;color:#191d21;margin-top:3px;}
.grid{display:flex;gap:14px;padding:16px 30px 0;}
.card{width:150px;background:#fff;border:1px solid #eeeeee;border-radius:8px;padding:10px;position:relative;}
.thumb{height:88px;border-radius:8px;margin-bottom:8px;position:relative;}
.chip{position:absolute;top:6px;right:6px;background:#108474;color:#fff;font-size:9px;font-weight:700;padding:2px 8px;border-radius:9999px;}
.chip.lav{background:#a89cc8;}
.ptitle{font-family:'Maven Pro',Arial,sans-serif;font-size:13px;font-weight:600;color:#191d21;line-height:1.3;height:32px;overflow:hidden;}
.pprice{font-family:'Maven Pro',Arial,sans-serif;font-size:14px;font-weight:700;color:#191d21;margin-top:4px;}
.mah{display:inline-block;background:#c1e6e6;color:#0c6a5d;font-size:10px;font-weight:600;padding:2px 8px;border-radius:9999px;margin-top:4px;}
</style>
<div class="ann">FREE SHIPPING OVER $50 · 20000MAH FUEL SERIES NOW LIVE</div>
<div class="nav">
<div class="logo">Xtorm</div>
<div class="navlinks"><div>Power Banks</div><div>Solar</div><div>Fuel Series</div><div>Cables</div><div>Compare</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">45W PD Fast Charge</div>
<h1>Power that keeps pace.</h1>
<div class="sub">Engineered chargers and cables built like instruments, tested for the road, the desk, and everywhere between.</div>
<div class="cta">Shop Power Banks</div>
</div>
<div class="heroart"><div class="brick"></div><div class="port"></div><div class="wattbadge">100W</div></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Output</div><div class="specvalue">100W PD</div></div>
<div class="speccell"><div class="speclabel">Capacity</div><div class="specvalue">20000 mAh</div></div>
<div class="speccell"><div class="speclabel">Recharge</div><div class="specvalue">1.5 hrs</div></div>
<div class="speccell"><div class="speclabel">Ports</div><div class="specvalue">USB-C x2</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#108474,#191d21)"><div class="chip">45W</div></div><div class="ptitle">XB Fuel Power Bank</div><div class="mah">20000 mAh</div><div class="pprice">$79.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a89cc8,#191d21)"><div class="chip lav">Fuel</div></div><div class="ptitle">Fuel Series Solar Panel</div><div class="mah">Foldable</div><div class="pprice">$119.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f28c00,#191d21)"><div class="chip" style="background:#f28c00">Sale</div></div><div class="ptitle">XWC GaN Wall Charger</div><div class="mah">65W</div><div class="pprice">$44.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#191d21,#108474)"></div><div class="ptitle">Braided USB-C Cable</div><div class="mah">1.5m</div><div class="pprice">$19.99</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2c3a50;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2c3a50;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #2c3a50; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #596677; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #0096db; color: #ffffff;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #ffffff; color: #2c3a50;
border: 1px solid #0096db; border-radius: 6px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #2c3a50;
border: 1px solid #caced3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #596677; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ffc168; color: #2c3a50;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>HTC Vive Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Roboto','Noto Sans JP',-apple-system,system-ui,sans-serif; background:#ffffff; color:#3a4570; }
*{box-sizing:border-box;}
.nav{height:56px;background:#3a4570;color:#fff;display:flex;align-items:center;padding:0 32px;justify-content:space-between;}
.logo{font-weight:700;font-size:19px;letter-spacing:.3px;}
.navlinks{display:flex;gap:0;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.4px;}
.navlinks span{padding:0 16px;height:56px;line-height:56px;}
.navlinks .active{background:#495588;}
.hero{background:#3a4570;color:#fff;height:210px;display:flex;align-items:center;padding:0 32px;}
.hero-txt{max-width:380px;}
.hero-txt h1{font-size:30px;font-weight:700;line-height:1.25;margin:0 0 10px;letter-spacing:-.5px;}
.hero-txt p{font-size:14px;color:#c4c8d8;margin:0 0 16px;}
.btn{display:inline-block;background:#0096db;color:#fff;font-weight:600;font-size:15px;letter-spacing:.3px;padding:12px 24px;border-radius:6px;}
.hero-visual{flex:1;height:170px;margin-left:24px;background:linear-gradient(135deg,#242f52,#3a4570);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#8891ba;font-size:11px;}
.section{padding:14px 32px;}
.section h2{font-size:18px;font-weight:600;margin:0 0 12px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{border:1px solid #dfe2ee;border-radius:12px;padding:12px;position:relative;}
.imgbox{height:72px;background:#e3e5ec;border-radius:8px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:#596677;font-size:9px;text-align:center;}
.badge{position:absolute;top:10px;left:10px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:2px;}
.badge.new{background:#ffc168;color:#2c3a50;}
.badge.sale{background:#d43430;color:#fff;}
.pname{font-size:14px;font-weight:600;color:#2c3a50;margin:2px 0 4px;}
.spec{display:inline-block;background:#e3e5ec;color:#596677;font-size:9px;padding:3px 8px;border-radius:2px;margin-right:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#3a4570;color:#2c9cdb;padding:14px 32px;display:flex;justify-content:space-between;font-size:11px;}
</style>
<div class="nav">
<div class="logo">Htc Vive</div>
<div class="navlinks"><span class="active">Headsets</span><span>Accessories</span><span>Software</span><span>Business</span></div>
</div>
<div class="hero">
<div class="hero-txt">
<h1>Step into immersive<br>computing.</h1>
<p>Precision tracking, high-resolution displays, and a control system built for VR at scale.</p>
<div class="btn">Shop Headsets</div>
</div>
<div class="hero-visual">VR HARDWARE PHOTOGRAPHY</div>
</div>
<div class="section">
<h2>Shop Headsets</h2>
<div class="grid">
<div class="card"><div class="badge new">New</div><div class="imgbox">VIVE XR Elite</div><div class="pname">VIVE XR Elite</div><div class="spec">Standalone</div><div class="spec">4K PPD</div></div>
<div class="card"><div class="imgbox">VIVE Pro 2</div><div class="pname">VIVE Pro 2</div><div class="spec">5K Display</div><div class="spec">120Hz</div></div>
<div class="card"><div class="badge sale">Sale</div><div class="imgbox">VIVE Focus 3</div><div class="pname">VIVE Focus 3</div><div class="spec">Enterprise</div><div class="spec">Swappable Battery</div></div>
<div class="card"><div class="imgbox">Tracker 3.0</div><div class="pname">VIVE Tracker (3.0)</div><div class="spec">Full-body</div><div class="spec">Wireless</div></div>
</div>
</div>
<div class="footer"><span>© Htc Vive</span><span>Support · Developers · Business · Legal</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3c3c3c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3c3c3c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a2a2a2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3c3c3c; color: #ffffff;
border: 1px solid #1a1a1a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3c3c3c; color: #f5f5f5;
border: 1px solid #5a5a5a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a2a2a2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #373737; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1a1a1a; color:#d6d6d6; box-sizing:border-box;
font-family:"Inter", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid #2e2e2e; }
.brand { color:#fff; font-size:16px; font-weight:700; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#8a8a8a; }
.btn-accent { background:#e0613a; color:#fff; border-radius:6px; padding:7px 18px; font-size:13px; font-weight:600; }
.app { display:flex; height:396px; }
.tray { width:150px; background:#0e0e0e; border-right:1px solid #2e2e2e; padding:14px 10px; }
.tray .lab { font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:#6b6b6b; margin:0 0 8px 4px; }
.comp { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:6px; font-size:12px; color:#b4b4b4; margin-bottom:2px; }
.comp .ic { width:16px; height:16px; border-radius:4px; background:#3c3c3c; flex-shrink:0; }
.comp.active { background:#232323; color:#fff; }
.canvas { flex:1; background:#1a1a1a; padding:16px; position:relative; }
.canvas .grid-bg { position:absolute; inset:16px; background-image:linear-gradient(#2e2e2e 1px, transparent 1px), linear-gradient(90deg, #2e2e2e 1px, transparent 1px);
background-size:20px 20px; opacity:0.4; }
.mockcard { position:relative; z-index:1; background:#232323; border:1px solid #2e2e2e; border-radius:8px; padding:14px; margin-bottom:10px; }
.mockcard h4 { font-size:13px; font-weight:600; color:#fff; margin:0 0 8px; }
.table-row { display:flex; gap:10px; font-size:11px; color:#8a8a8a; padding:5px 0; border-bottom:1px solid #2e2e2e; }
.table-row.head { color:#6b6b6b; text-transform:uppercase; letter-spacing:0.04em; font-size:10px; }
.table-row span { flex:1; }
.badge { display:inline-block; border-radius:4px; font-size:10px; font-weight:600; padding:2px 8px; }
.badge.success { background:rgba(47,168,106,0.14); color:#2fa86a; }
.badge.warn { background:rgba(224,162,58,0.14); color:#e0a23a; }
.inspector { width:170px; background:#0e0e0e; border-left:1px solid #2e2e2e; padding:14px; font-size:11px; color:#8a8a8a; }
.inspector h5 { font-size:11px; color:#fff; margin:0 0 10px; }
.fld { margin-bottom:10px; }
.fld .k { color:#6b6b6b; margin-bottom:3px; }
.fld .v { background:#1a1a1a; border:1px solid #2e2e2e; border-radius:6px; padding:5px 8px; color:#d6d6d6; font-family:"IBM Plex Mono",monospace; font-size:11px; }
footer { border-top:1px solid #2e2e2e; padding:10px 28px; display:flex; justify-content:space-between; font-size:11px; color:#6b6b6b; }
</style></head>
<body>
<nav>
<span class="brand">Retool</span>
<div class="navlinks"><span>Products</span><span>Solutions</span><span>Docs</span><span>Pricing</span></div>
<span class="btn-accent">Start for free</span>
</nav>
<div class="app">
<div class="tray">
<p class="lab">Components</p>
<div class="comp active"><span class="ic"></span>Table</div>
<div class="comp"><span class="ic"></span>Button</div>
<div class="comp"><span class="ic"></span>Text Input</div>
<div class="comp"><span class="ic"></span>Chart</div>
<div class="comp"><span class="ic"></span>JSON Form</div>
</div>
<div class="canvas">
<div class="grid-bg"></div>
<div class="mockcard">
<h4>Customer Refunds Queue</h4>
<div class="table-row head"><span>ID</span><span>Customer</span><span>Amount</span><span>Status</span></div>
<div class="table-row"><span>#8841</span><span>Acme Corp</span><span>$482.00</span><span><span class="badge success">Approved</span></span></div>
<div class="table-row"><span>#8842</span><span>Nimbus Inc</span><span>$129.50</span><span><span class="badge warn">Pending</span></span></div>
<div class="table-row"><span>#8843</span><span>Fintra Ltd</span><span>$76.00</span><span><span class="badge success">Approved</span></span></div>
</div>
<div class="mockcard"><h4>Query: get_refund_queue.sql</h4><div class="table-row"><span style="font-family:'IBM Plex Mono',monospace;color:#e0613a;">SELECT</span><span style="font-family:'IBM Plex Mono',monospace;">* FROM refunds WHERE status != 'closed'</span></div></div>
</div>
<div class="inspector">
<h5>Inspector</h5>
<div class="fld"><div class="k">Component</div><div class="v">table1</div></div>
<div class="fld"><div class="k">Data source</div><div class="v">{{ get_refund_queue.data }}</div></div>
<div class="fld"><div class="k">Row height</div><div class="v">Compact</div></div>
</div>
</div>
<footer>
<span>© Retool</span>
<span>Products · Solutions · Docs · Pricing</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #353535;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #353535;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; letter-spacing: -0.2px; margin: 0; color: #353535; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.27; letter-spacing: 0.2px; background: #108474; color: #ffffff;
border: none; border-radius: 20px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.27; letter-spacing: 0.2px; background: #ffffff; color: #353535;
border: 1px solid #108474; border-radius: 20px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #353535;
border: 1px solid #c8c8c8; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.2px; background: #fade20; color: #353535;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f9f9; font-family:'DM Sans','Montserrat','Roboto',sans-serif; color:#555555; }
*{box-sizing:border-box;}
.nav{position:absolute; top:0; left:0; width:960px; height:64px; background:#ffffff; border-bottom:1px solid #eeeeee; display:flex; align-items:center; justify-content:space-between; padding:0 40px;}
.logo{font-size:19px; font-weight:600; color:#353535;}
.navlinks{display:flex; gap:22px; font-size:15px; font-weight:500; color:#555555;}
.navlinks span:nth-child(1){color:#108474; border-bottom:2px solid #108474; padding-bottom:18px;}
.searchpill{width:180px; height:36px; border-radius:9999px; border:1px solid #e1e1e1; background:#fff; display:flex; align-items:center; padding:0 16px; font-size:12px; color:#7b7b7b;}
.hero{position:absolute; top:64px; left:0; width:960px; height:270px; display:flex; align-items:center; padding:0 50px; background:linear-gradient(120deg,#f9f9f9 55%,#eafaf6 100%);}
.heroText{width:440px;}
.headline{font-size:32px; font-weight:600; letter-spacing:-0.5px; line-height:1.25; color:#353535; margin-bottom:14px;}
.sub{font-size:15px; color:#555555; margin-bottom:20px; width:380px;}
.btn{display:inline-block; background:#108474; color:#fff; font-size:15px; font-weight:600; padding:12px 28px; border-radius:20px;}
.kbGraphic{position:absolute; right:70px; top:60px; width:320px; height:150px; background:#fff; border-radius:12px; padding:14px; box-shadow:0 8px 24px rgba(0,0,0,0.06); display:grid; grid-template-columns:repeat(10,1fr); grid-gap:5px;}
.key{background:#eeeeee; border-radius:4px; height:20px;}
.key.hl{background:#108474;}
.sec{position:absolute; top:334px; left:0; width:960px; height:306px; padding:28px 40px;}
.secTitle{font-size:20px; font-weight:600; margin-bottom:16px; color:#353535;}
.grid{display:flex; gap:16px;}
.card{width:216px; background:#fff; border:1px solid #eeeeee; border-radius:12px; overflow:hidden; position:relative;}
.cardImg{width:100%; height:100px; background:#f7f7f7; display:grid; grid-template-columns:repeat(6,1fr); grid-gap:3px; padding:10px;}
.k2{background:#e5e5e5; border-radius:2px; height:12px;}
.cardBody{padding:12px;}
.cardTitle{font-size:16px; font-weight:600; color:#353535;}
.cardPrice{font-size:15px; color:#108474; margin-top:4px;}
.badge{position:absolute; top:8px; left:8px; background:#fade20; color:#353535; font-size:10px; font-weight:600; padding:2px 8px; border-radius:4px;}
.chips{position:absolute; top:auto; margin-top:8px;}
.filterRow{display:flex; gap:8px; margin-bottom:14px;}
.chip{background:#f7f7f7; border:1px solid #e1e1e1; border-radius:9999px; padding:4px 14px; font-size:12px; color:#555;}
.chip.active{background:#108474; color:#fff; border-color:#108474;}
</style>
<div class="nav">
<div class="logo">Keychron</div>
<div class="navlinks"><span>Keyboards</span><span>Accessories</span><span>Support</span></div>
<div class="searchpill">Search products...</div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">Type Better.<br>Feel The Difference.</div>
<div class="sub">Wireless mechanical keyboards for the workshop, the office, and everywhere between.</div>
<div class="btn">Shop Keyboards</div>
</div>
<div class="kbGraphic">
<div class="key"></div><div class="key"></div><div class="key hl"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
<div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key hl"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
<div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key hl"></div><div class="key"></div><div class="key"></div><div class="key"></div>
</div>
</div>
<div class="sec">
<div class="filterRow"><div class="chip active">All</div><div class="chip">75%</div><div class="chip">TKL</div><div class="chip">Full Size</div></div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="cardImg"><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div></div><div class="cardBody"><div class="cardTitle">Keychron Q1</div><div class="cardPrice">$179</div></div></div>
<div class="card"><div class="cardImg"><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div></div><div class="cardBody"><div class="cardTitle">Keychron K8 Pro</div><div class="cardPrice">$99</div></div></div>
<div class="card"><div class="cardImg"><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div></div><div class="cardBody"><div class="cardTitle">Keychron V3</div><div class="cardPrice">$74</div></div></div>
<div class="card"><div class="cardImg"><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div></div><div class="cardBody"><div class="cardTitle">Keychron K3 Ultra Slim</div><div class="cardPrice">$89</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FDFAF8; color: #2A2025;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FDFAF8; color: #2A2025;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #2A2025; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 400; line-height: 1.55; margin: 0; color: #7A6E7D; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.05em; background: #7A4B7D; color: #FFFFFF;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.05em; background: #FDFAF8; color: #7A4B7D;
border: 1px solid #7A4B7D; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #FDFAF8; color: #2A2025;
border: 1px solid #c8c4c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7A6E7D; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: 0.12em; background: #EDE0EF; color: #5E3961;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'adobe-garamond-pro',Georgia,serif; background:#FDFAF8; color:#4A3F4D; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #DDD0DF;}
.logo{font-family:'bressay-display',serif;font-size:22px;color:#7A4B7D;}
.navlinks{display:flex;gap:24px;font-size:14px;color:#4A3F4D;}
.hero{height:200px;display:flex;align-items:center;padding:0 40px;}
.heroText{width:48%;}
.h1{font-family:'bressay-display',serif;font-size:38px;font-weight:400;color:#2A2025;line-height:1.12;margin:0 0 12px;}
.sub{font-size:15px;color:#7A6E7D;margin:0 0 16px;max-width:300px;}
.cta{display:inline-block;background:#7A4B7D;color:#fff;font-size:13px;letter-spacing:0.05em;padding:11px 26px;border-radius:6px;width:fit-content;}
.heroImg{width:52%;height:150px;background:#F5EFF7;border-radius:8px;position:relative;overflow:hidden;}
.step{position:absolute;top:20px;left:24px;display:flex;gap:8px;}
.dot{width:22px;height:22px;border-radius:50%;background:#EDE0EF;display:flex;align-items:center;justify-content:center;font-size:11px;color:#7A4B7D;}
.dot.active{background:#7A4B7D;color:#fff;}
.cover{position:absolute;top:56px;left:24px;width:120px;height:80px;border-radius:6px;background:linear-gradient(135deg,#7A4B7D,#B8926A);}
.sec{padding:16px 40px 0;}
.secTitle{font-family:'bressay-display',serif;font-size:20px;color:#2A2025;margin-bottom:12px;}
.grid{display:flex;gap:16px;}
.card{width:198px;background:#FFFFFF;border-radius:8px;padding:12px;border:1px solid #DDD0DF;}
.thumb{height:96px;border-radius:6px;margin-bottom:10px;}
.ptitle{font-size:15px;font-weight:600;color:#2A2025;line-height:1.3;height:36px;overflow:hidden;}
.pprice{font-size:15px;font-weight:600;color:#7A4B7D;margin-top:6px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Plum Paper</div>
<div class="navlinks"><span>Planners</span><span>Notebooks</span><span>Calendars</span><span>Customize</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Your year, bound in your own hand.</div>
<div class="sub">Personalized planners built layout by layout, cover by cover, just for you.</div>
<div class="cta">Start Customizing</div>
</div>
<div class="heroImg">
<div class="step"><div class="dot active">1</div><div class="dot">2</div><div class="dot">3</div></div>
<div class="cover"></div>
</div>
</div>
<div class="sec">
<div class="secTitle">Featured Collections</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7A4B7D,#EDE0EF);"></div><div class="ptitle">Vertical Weekly Planner, Undated</div><div class="pprice">$42.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#B8926A,#EDE0EF);"></div><div class="ptitle">Academic Year Student Planner</div><div class="pprice">$38.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#EDE0EF,#7A4B7D);"></div><div class="ptitle">Personalized Notebook Set of 3</div><div class="pprice">$28.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7A4B7D,#B8926A);"></div><div class="ptitle">Wall Calendar, Botanical Cover</div><div class="pprice">$24.00</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a2e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a2e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #1a1a2e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ff6b35; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #1a1a2e;
border: 1px solid #ff6b35; border-radius: 9999px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a2e;
border: 1px solid #c6c6cb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff6b35; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Educational Insights</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#faf8f5; color:#1a1a2e; font-family:'Montserrat','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #f0f0f0; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.logo { font-weight:700; font-size:20px; letter-spacing:-.5px; color:#1a1a2e; }
.logo b { color:#ff6b35; }
.navlinks { display:flex; gap:26px; font-size:14px; font-weight:600; }
.navlinks span { color:#7a7a7a; }
.navlinks span.on { color:#ff6b35; border-bottom:2px solid #ff6b35; padding-bottom:20px; }
.navicons { display:flex; gap:16px; align-items:center; }
.search { background:#faf8f5; border:1px solid #e0e0e0; border-radius:20px; padding:8px 16px; font-size:12px; color:#a0a0a0; width:160px; }
.cart { width:34px; height:34px; border-radius:50%; background:#ff6b35; color:#fff; display:flex; align-items:center;
justify-content:center; font-size:13px; font-weight:700; }
.hero { display:flex; align-items:center; padding:26px 32px; gap:28px; height:190px; background:#faf8f5; }
.hero-copy { flex:1; }
.hero-copy .tag { color:#ff6b35; font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.hero-copy h1 { font-size:30px; font-weight:700; letter-spacing:-.5px; line-height:1.2; margin:8px 0 10px; }
.hero-copy p { font-size:14px; color:#4a4a4a; margin:0 0 14px; max-width:380px; font-family:'Open Sans',sans-serif; }
.hero-cta { background:#ff6b35; color:#fff; border-radius:9999px; padding:12px 26px; font-size:14px; font-weight:600; display:inline-block; }
.hero-art { flex:1; height:160px; border-radius:20px; position:relative; overflow:hidden;
background:linear-gradient(135deg,#ffd4b3 0%,#ff6b35 60%,#e55a2b 100%); }
.hero-art .dot { position:absolute; border-radius:50%; }
.hero-art .d1 { width:60px; height:60px; background:#4caf50; top:14px; left:24px; }
.hero-art .d2 { width:40px; height:40px; background:#2196f3; bottom:20px; right:40px; }
.hero-art .d3 { width:26px; height:26px; background:#ffc107; top:60px; right:80px; }
.ages { display:flex; gap:10px; padding:0 32px 18px; }
.ages span { font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#fff;
border-radius:9999px; padding:5px 14px; }
.a1 { background:#ff6b35; } .a2 { background:#4caf50; } .a3 { background:#2196f3; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:0 32px; }
.card { background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); overflow:hidden; }
.thumb { height:82px; position:relative; }
.t1 { background:linear-gradient(160deg,#ffe0cc,#ff6b35); }
.t2 { background:linear-gradient(160deg,#d4f0d6,#4caf50); }
.t3 { background:linear-gradient(160deg,#cfe6fb,#2196f3); }
.t4 { background:linear-gradient(160deg,#fff0c2,#ffc107); }
.badge { position:absolute; top:6px; left:6px; background:#ff6b35; color:#fff; font-size:9px; font-weight:700;
text-transform:uppercase; border-radius:4px; padding:2px 6px; letter-spacing:.5px; }
.cbody { padding:8px 10px; }
.cbody .name { font-size:12px; font-weight:600; margin:0 0 4px; }
.cbody .price { font-size:12px; color:#1a1a2e; }
.cbody .stars { color:#ffc107; font-size:10px; margin-top:2px; }
</style></head>
<body>
<nav>
<div class="logo">Educational Insights</div>
<div class="navlinks"><span class="on">Science</span><span>Math</span><span>Reading</span><span>STEM</span></div>
<div class="navicons"><span class="search">Search toys...</span><span class="cart">2</span></div>
</nav>
<div class="hero">
<div class="hero-copy">
<div class="tag">Shop by Age</div>
<h1>Learning that feels<br>like play</h1>
<p>Hands-on kits and games built for curious minds — science, math, and reading made joyful.</p>
<div class="hero-cta">Shop New Arrivals</div>
</div>
<div class="hero-art"><div class="dot d1"></div><div class="dot d2"></div><div class="dot d3"></div></div>
</div>
<div class="ages"><span class="a1">Ages 3-5</span><span class="a2">Ages 6-8</span><span class="a3">Ages 9-12</span></div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="badge">New</span></div><div class="cbody"><p class="name">GeoSafari Explorer Kit</p><p class="price">$34.99</p><div class="stars">★★★★★</div></div></div>
<div class="card"><div class="thumb t2"></div><div class="cbody"><p class="name">Design & Drill Numbers</p><p class="price">$19.99</p><div class="stars">★★★★☆</div></div></div>
<div class="card"><div class="thumb t3"><span class="badge">Sale</span></div><div class="cbody"><p class="name">Playfoam Sound Circuit</p><p class="price">$24.99</p><div class="stars">★★★★★</div></div></div>
<div class="card"><div class="thumb t4"></div><div class="cbody"><p class="name">Phonics Word Builder</p><p class="price">$16.99</p><div class="stars">★★★★☆</div></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #272d45;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #272d45;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; letter-spacing: -0.2px; margin: 0; color: #272d45; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f3818b; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f6f6f6; color: #272d45;
border: 1px solid #f3818b; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f6f6f6; color: #444444;
border: 1px solid #c2c4ca; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f3818b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f6f6; font-family:-apple-system,'Segoe UI',Roboto,sans-serif; color:#444444; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#f6f6f6;border-bottom:1px solid #f4f4f6;}
.logo{font-size:19px;font-weight:700;color:#272d45;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#676986;}
.navlinks span:first-child{color:#f3818b;border-bottom:2px solid #f3818b;padding-bottom:20px;}
.search{width:180px;height:36px;border-radius:9999px;border:1px solid #e5e5e5;background:#fff;display:flex;align-items:center;padding:0 14px;font-size:11px;color:#676986;}
.hero{height:250px;background:#faecec;display:flex;align-items:center;padding:0 40px;gap:30px;}
.herotext{width:46%;}
.herotext h1{font-size:32px;font-weight:700;color:#272d45;margin:0 0 14px;line-height:1.25;}
.herocta{display:inline-block;background:#f3818b;color:#fff;font-size:15px;font-weight:600;border-radius:8px;padding:14px 32px;}
.heroimg{width:46%;height:180px;border-radius:16px;background:radial-gradient(circle at 35% 30%,#fd848d,#272d45 75%);position:relative;overflow:hidden;}
.heroimg:before{content:'';position:absolute;width:80px;height:150px;border-radius:22px;background:#fff;top:16px;left:110px;box-shadow:0 8px 18px rgba(0,0,0,0.1);}
.heroimg:after{content:'';position:absolute;width:80px;height:150px;border-radius:22px;border:6px solid #e69392;top:16px;left:110px;}
.grid{display:flex;gap:16px;padding:20px 40px 0;}
.card{width:196px;background:#fff;border-radius:12px;padding:12px;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#f3818b;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;padding:3px 8px;}
.thumb{height:96px;border-radius:8px;margin-bottom:8px;aspect-ratio:1/1;}
.ptitle{font-size:16px;font-weight:500;color:#272d45;}
.pprice{font-size:16px;font-weight:600;color:#444444;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#272d45;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.footer span{color:#d3d3d3;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Sonix</div>
<div class="navlinks"><span>Phone Cases</span><span>MagSafe</span><span>Accessories</span><span>New</span></div>
<div class="search">Search cases...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Protective cases in colors that never blush.</h1>
<div class="herocta">Shop Cases</div>
</div>
<div class="heroimg"></div>
</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#f3818b,#272d45)"></div><div class="ptitle">Coral Glow MagSafe Case</div><div class="pprice">$44</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#fd848d,#faecec)"></div><div class="ptitle">Terrazzo Impact Case</div><div class="pprice">$38</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e69392,#272d45)"></div><div class="ptitle">Rosewater Wallet Case</div><div class="pprice">$48</div></div>
</div>
<div class="footer"><span>© Sonix</span><span>MagSafe Compatible · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #e50043; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #222222;
border: 1px solid #e50043; border-radius: 9999px;
padding: 12px 32px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e50043; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Arial','Helvetica Neue',sans-serif; color:#36383a; }
*{box-sizing:border-box;}
.nav{height:64px;background:#222222;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff;}
.navlinks{display:flex;gap:26px;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#fff;}
.navlinks .active{color:#e50043;}
.hero{height:260px;background:#161e22;display:flex;align-items:center;padding:0 34px;gap:30px;}
.herotext{width:420px;}
h1{font-size:44px;font-weight:700;letter-spacing:-1px;line-height:1.05;margin:0 0 14px;color:#fff;text-transform:uppercase;}
.sub{font-size:14px;color:#cfcfcf;margin:0 0 20px;width:360px;line-height:1.5;}
.ctarow{display:flex;gap:12px;}
.cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 30px;background:#e50043;color:#fff;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;border-radius:9999px;}
.ctaghost{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 30px;border:2px solid #fff;color:#fff;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;border-radius:9999px;}
.heroart{width:220px;height:160px;position:relative;}
.mouse{position:absolute;width:110px;height:150px;right:40px;top:5px;border-radius:40px 40px 20px 20px;background:radial-gradient(circle at 35% 20%,#3a3a3a,#161e22 70%);box-shadow:0 0 30px rgba(229,0,67,.35);}
.stripe{position:absolute;width:110px;height:8px;right:40px;top:60px;background:#e50043;}
.grid{display:flex;gap:14px;padding:22px 32px 0;}
.card{width:206px;background:#fff;padding:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#e50043;color:#fff;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:4px 8px;border-radius:4px;z-index:2;}
.badge.yellow{background:#ede939;color:#222;}
.thumb{height:110px;background:#f7f7f7;margin-bottom:10px;display:flex;align-items:center;justify-content:center;}
.tshape{width:56px;height:74px;border-radius:24px 24px 12px 12px;}
.pname{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;margin:0 0 6px;color:#222;}
.pprice{font-size:16px;font-weight:700;color:#222;margin:0 0 10px;}
.addcart{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 18px;background:#e50043;color:#fff;font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;border-radius:9999px;}
</style>
<div class="nav">
<div class="logo">Xtrfy</div>
<div class="navlinks"><div class="active">Mice</div><div>Keyboards</div><div>Mousepads</div><div>Headsets</div><div>Cables</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Built for the frag.</h1>
<div class="sub">Competitive gaming peripherals engineered for speed, precision, and zero excuses.</div>
<div class="ctarow"><div class="cta">Shop Mice</div><div class="ctaghost">New Drops</div></div>
</div>
<div class="heroart"><div class="mouse"></div><div class="stripe"></div></div>
</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb"><div class="tshape" style="background:radial-gradient(circle at 35% 25%,#3a3a3a,#161e22 70%)"></div></div><p class="pname">M4 Wireless Mouse</p><p class="pprice">$59.95</p><div class="addcart">Add to Cart</div></div>
<div class="card"><div class="thumb"><div class="tshape" style="background:radial-gradient(circle at 35% 25%,#4d4d4d,#161e22 70%)"></div></div><p class="pname">K5 Compact Keyboard</p><p class="pprice">$99.95</p><div class="addcart">Add to Cart</div></div>
<div class="card"><span class="badge yellow">Limited</span><div class="thumb"><div class="tshape" style="background:radial-gradient(circle at 35% 25%,#e50043,#161e22 70%)"></div></div><p class="pname">GP4 Large Mousepad</p><p class="pprice">$24.95</p><div class="addcart">Add to Cart</div></div>
<div class="card"><div class="thumb"><div class="tshape" style="background:radial-gradient(circle at 35% 25%,#5bbad5,#161e22 70%)"></div></div><p class="pname">H2 Gaming Headset</p><p class="pprice">$79.95</p><div class="addcart">Add to Cart</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.25px; background: #eb1256; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.25px; background: #ffffff; color: #121212;
border: 1px solid #eb1256; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #212222;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #eb1256; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,'Helvetica Neue',Roboto,Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-size:20px;font-weight:700;color:#121212;}
.searchpill{width:220px;height:36px;border-radius:9999px;background:#e5e5e5;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#808080;}
.cart{position:relative;font-size:13px;font-weight:600;}
.cartdot{position:absolute;top:-6px;right:-14px;background:#eb1256;color:#fff;border-radius:9999px;width:16px;height:16px;font-size:9px;display:flex;align-items:center;justify-content:center;}
.hero{height:220px;background:#f5f5f5;display:flex;align-items:center;padding:0 32px;gap:24px;}
.herotext{width:46%;}
.herotext h1{font-size:32px;font-weight:700;margin:0 0 10px;line-height:1.2;letter-spacing:-.5px;}
.herotext p{font-size:14px;color:#212222;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#eb1256;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;border-radius:8px;}
.heroimg{flex:1;height:150px;border-radius:12px;background:linear-gradient(135deg,#eb1256,#121212);}
.grid{display:flex;gap:16px;padding:20px 32px 0;}
.card{width:206px;}
.thumb{height:120px;background:#e5e5e5;border-radius:12px;margin-bottom:8px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#eb1256;color:#fff;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;border-radius:4px;padding:2px 8px;}
.ptitle{font-size:15px;font-weight:600;color:#121212;margin-top:2px;}
.pprice{font-size:15px;color:#212222;margin-top:4px;}
.addcart{margin-top:8px;display:inline-block;background:#121212;color:#fff;font-size:12px;font-weight:600;border-radius:9999px;padding:6px 16px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#121212;display:flex;align-items:center;justify-content:center;padding:0 32px;font-size:12px;color:#fff;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Uniaccessories</div>
<div class="searchpill">Search cases, chargers...</div>
<div class="cart">CART<span class="cartdot">3</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Phone gear that keeps up with you.</h1>
<p>Cases, chargers, and screen protection for every phone, every day.</p>
<div class="cta">Shop Accessories</div>
</div>
<div class="heroimg"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">Sale</div></div><div class="ptitle">Clear Grip Case</div><div class="pprice">$19.99</div><div class="addcart">Add</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">MagSafe Charger</div><div class="pprice">$34.99</div><div class="addcart">Add</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Tempered Glass 2-Pack</div><div class="pprice">$14.99</div><div class="addcart">Add</div></div>
</div>
<div class="footer">Free shipping over $35 · Easy returns</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #003388; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #ffffff;
border: 1px solid #003388; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #1e1f26; color: #ffffff;
border: 1px solid #121212; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #02e49b; color: #121212;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#eeeeee; box-sizing:border-box;
font-family:'futura-pt','Lato','Arial',sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
background:#003388; }
.brand { font-size:15px; font-weight:700; letter-spacing:0.1em; color:#fff; text-transform:uppercase; }
.navlinks { display:flex; gap:22px; font-size:12.5px; color:#cfe0ff; font-weight:600; }
.navlinks span.on { color:#02e49b; }
.cart { background:#ff9900; color:#121212; font-size:11px; font-weight:700; padding:6px 12px; }
main { display:flex; height:580px; }
.gallery { width:360px; background:#1e1f26; position:relative; display:flex; align-items:center; justify-content:center; }
.poster { width:190px; height:270px; border-radius:2px; background:
linear-gradient(160deg,#003388 0%,#24292d 55%,#02e49b 100%); position:relative;
box-shadow:0 20px 40px rgba(0,0,0,0.5); }
.poster::after { content:'AGFA'; position:absolute; bottom:16px; left:16px; color:#fff; font-size:12px;
font-weight:800; letter-spacing:0.2em; }
.poster::before { content:'35mm RESTORATION'; position:absolute; top:16px; left:16px; color:#ff9900;
font-size:9px; font-weight:700; letter-spacing:0.1em; }
.badge-limited { position:absolute; top:22px; left:22px; background:#02e49b; color:#121212; font-size:10px;
font-weight:700; letter-spacing:0.04em; padding:5px 10px; }
.info { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:12px; background:#121212; }
.cat { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:#949494; }
h1 { font-size:22px; font-weight:700; margin:0; line-height:1.28; color:#fff; }
.stars { font-size:12px; color:#ff9900; }
.stars .n { color:#949494; margin-left:6px; font-size:11.5px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:700; color:#02e49b; }
.desc { font-size:13px; color:#c8c8c8; line-height:1.55; max-width:340px; }
.fmt-row { display:flex; gap:8px; }
.fmt { border:1px solid #444444; border-radius:8px; padding:7px 14px; font-size:12px; color:#eeeeee; }
.fmt.on { border-color:#02e49b; color:#02e49b; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#003388; color:#fff; border:none; border-radius:0; padding:13px 18px;
font-size:14px; font-weight:700; }
.btn-outline { border:1.5px solid #ff9900; color:#ff9900; background:transparent; border-radius:0; padding:11.5px 16px;
font-size:12.5px; font-weight:700; white-space:nowrap; }
.meta { font-size:11px; color:#949494; }
</style></head>
<body>
<nav>
<div class="brand">Agfa American Genre Film Archive</div>
<div class="navlinks"><span class="on">Blu-ray</span><span>4K UHD</span><span>Screenings</span><span>Archive</span></div>
<div class="cart">CART (1)</div>
</nav>
<main>
<div class="gallery">
<span class="badge-limited">Limited 3,000</span>
<div class="poster"></div>
</div>
<div class="info">
<span class="cat">Cult Classic · 1976</span>
<h1>Blood Highway — 4K Restoration Blu-ray</h1>
<div class="stars">★★★★★ <span class="n">4.9 · 188 reviews</span></div>
<div class="price-row"><span class="price">$34.99</span></div>
<p class="desc">Scanned from the original camera negative and restored frame-by-frame — includes new commentary and a 40-page liner notes booklet.</p>
<div class="fmt-row">
<span class="fmt on">Blu-ray</span>
<span class="fmt">4K UHD</span>
<span class="fmt">Digital</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">Watch Trailer</button>
</div>
<span class="meta">Ships in collector's slipcase</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f9f9; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f9f9; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #d0021b; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: transparent; color: #121212;
border: 1px solid #d0021b; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #d0021b; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9f9f9; color:#121212; box-sizing:border-box;
font-family:'Figtree', -apple-system, sans-serif; }
* { box-sizing:border-box; }
.announce { height:32px; background:#121212; color:#ffffff; display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; }
.topbar { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
border-bottom:1px solid #dedede; }
.brand { font-size:19px; font-weight:700; color:#d0021b; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; color:#1c1d1d; }
.layout { display:flex; height:calc(640px - 32px - 56px); }
.media { width:340px; flex-shrink:0; background:#ffffff; position:relative; display:flex; align-items:center; justify-content:center;
border-right:1px solid #dedede; }
.book { width:170px; height:230px; background:#112233; border-radius:2px; box-shadow:0 10px 26px rgba(0,0,0,0.15); position:relative; }
.book::after { content:''; position:absolute; inset:16px; border:1px solid rgba(255,255,255,0.3); }
.badge-sale { position:absolute; top:18px; left:18px; background:#d0021b; color:#ffffff; font-size:11px; font-weight:700;
letter-spacing:0.8px; text-transform:uppercase; padding:3px 8px; }
.detail { flex:1; padding:24px 34px; display:flex; flex-direction:column; gap:14px; }
.kicker { font-size:11px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:#444444; }
h1 { font-size:26px; font-weight:700; margin:0; letter-spacing:-0.3px; }
.price-row { display:flex; gap:10px; align-items:baseline; }
.price-sale { font-size:18px; font-weight:700; color:#d0021b; }
.price-compare { font-size:14px; text-decoration:line-through; color:#444444; }
.swatches { display:flex; gap:8px; }
.swatch { width:24px; height:24px; border-radius:999px; }
.swatch.active { outline:2px solid #121212; outline-offset:2px; }
.review { display:flex; gap:6px; align-items:center; font-size:13px; color:#444444; }
.review .stars { color:#d0021b; }
.feature { background:#112233; color:#ffffff; border-radius:8px; padding:14px 16px; font-size:14px; }
.actions { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#d0021b; color:#ffffff; border:none; border-radius:4px; height:48px; font-size:15px; font-weight:600; }
.btn-secondary { background:transparent; color:#121212; border:1px solid #121212; border-radius:4px; height:48px; padding:0 22px; font-size:15px; font-weight:600; }
</style></head>
<body>
<div class="announce">Free shipping over $50</div>
<div class="topbar">
<div class="brand">Code And Quill</div>
<div class="navlinks"><span>Notebooks</span><span>Planners</span><span>Pens</span><span>Gifts</span></div>
</div>
<div class="layout">
<div class="media">
<div class="badge-sale">Sale</div>
<div class="book"></div>
</div>
<div class="detail">
<div class="kicker">Dot Grid · Lay-Flat Binding</div>
<h1>The Foundry Notebook</h1>
<div class="price-row"><span class="price-sale">$22.00</span><span class="price-compare">$28.00</span></div>
<div class="swatches">
<div class="swatch active" style="background:#112233;"></div>
<div class="swatch" style="background:#9c2426;"></div>
<div class="swatch" style="background:#4b916d;"></div>
</div>
<div class="review"><span class="stars">★★★★★</span> 4.8 (642 reviews)</div>
<div class="feature">192 pages of 100gsm paper. Lay-flat binding. Cloth cover in three colorways.</div>
<div class="actions">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Learn More</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4f4f4; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f4f4f4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfdfd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1A1A; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-variant-numeric:tabular-nums; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #EAEAEA; }
.brand { font-size:19px; font-weight:700; margin:0; }
.navr span { font-size:12px; color:#767676; margin-left:22px; }
main { display:flex; height:calc(640px - 52px - 30px); padding:26px 32px 0; gap:34px; }
/* left: the big square album art — the whole point of Bandcamp */
.art { width:260px; height:260px; border-radius:2px; flex:0 0 auto;
background:linear-gradient(150deg,#1DA0C3,#629AA9 55%,#123842); }
/* right: album page, editorial record-sleeve rhythm */
.albumpage { flex:1; }
.atitle { font-size:24px; font-weight:700; margin:0 0 4px; letter-spacing:-0.3px; }
.byartist { font-size:17px; font-weight:600; color:#1DA0C3; margin:0 0 6px; }
.relmeta { font-size:13px; color:#767676; margin:0 0 16px; }
.buycard { border:1px solid #E2E2E2; border-radius:6px; padding:16px; margin-bottom:16px; max-width:420px; }
.buyrow { display:flex; align-items:baseline; justify-content:space-between; }
.price { font-size:22px; font-weight:700; }
.priceunit { font-size:12px; font-weight:600; color:#767676; margin-left:4px; }
.ormore { font-size:12px; color:#767676; }
.nyp { font-size:11px; color:#767676; margin:6px 0 12px; }
.buybtn { display:block; text-align:center; background:#1DA0C3; color:#fff; font-size:14px; font-weight:700;
padding:11px 0; border-radius:4px; }
.wishlist { display:block; text-align:center; font-size:12px; color:#1DA0C3; font-weight:600; margin-top:10px; }
.playerbar { display:flex; align-items:center; gap:10px; border-top:1px solid #EAEAEA; border-bottom:1px solid #EAEAEA;
padding:9px 2px; max-width:420px; margin-bottom:14px; }
.playbtn { width:28px; height:28px; border-radius:50%; background:#1A1A1A; color:#fff; font-size:10px;
display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.ptitle { font-size:12px; font-weight:600; }
.ptime { font-size:10px; color:#767676; }
.wave { flex:1; height:14px; display:flex; align-items:flex-end; gap:2px; }
.wave i { width:2px; background:#1DA0C3; display:block; }
.wave i.un { opacity:0.35; }
.tracklist { max-width:420px; }
.trow { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid #F0F0F0; }
.tnum { width:16px; font-size:11px; color:#9A9A9A; }
.tname { flex:1; font-size:13px; font-weight:500; }
.tname.playing { color:#1DA0C3; font-weight:700; }
.tdur { font-size:11px; color:#767676; }
footer { height:30px; border-top:1px solid #EAEAEA; padding:0 32px; display:flex; align-items:center;
justify-content:space-between; font-size:11px; color:#767676; }
</style></head>
<body>
<nav>
<p class="brand">Bandcamp (iOS)</p>
<div class="navr"><span>Feed</span><span>Discover</span><span>Collection</span></div>
</nav>
<main>
<div class="art"></div>
<div class="albumpage">
<p class="atitle">Field Recordings, Vol. II</p>
<p class="byartist">by Bandcamp (iOS)</p>
<p class="relmeta">Released June 4 · 10 tracks</p>
<div class="buycard">
<div class="buyrow">
<span><span class="price mono">$9</span><span class="priceunit">USD</span></span>
<span class="ormore">or more</span>
</div>
<p class="nyp">Name your price · pay what you want</p>
<span class="buybtn">Buy Digital Album</span>
<span class="wishlist">Add to wishlist</span>
</div>
<div class="playerbar">
<div class="playbtn">▶</div>
<div>
<div class="ptitle">Low Tide</div>
<div class="ptime mono">1:42 / 5:08</div>
</div>
<div class="wave">
<i style="height:6px"></i><i style="height:10px"></i><i style="height:5px"></i><i style="height:12px"></i>
<i style="height:8px"></i><i style="height:14px"></i><i style="height:6px" class="un"></i><i style="height:9px" class="un"></i>
<i style="height:11px" class="un"></i><i style="height:7px" class="un"></i><i style="height:13px" class="un"></i><i style="height:5px" class="un"></i>
</div>
</div>
<div class="tracklist">
<div class="trow"><span class="tnum mono">01</span><span class="tname playing">Low Tide</span><span class="tdur mono">5:08</span></div>
<div class="trow"><span class="tnum mono">02</span><span class="tname">Harbor Light</span><span class="tdur mono">4:22</span></div>
<div class="trow"><span class="tnum mono">03</span><span class="tname">Static Bloom</span><span class="tdur mono">3:57</span></div>
<div class="trow"><span class="tnum mono">04</span><span class="tname">Quiet Machines</span><span class="tdur mono">6:14</span></div>
</div>
</div>
</main>
<footer>
<span>© Bandcamp (iOS)</span>
<span>Bandcamp (iOS) · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #006341; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #006341;
border: 1px solid #006341; border-radius: 4px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #212121;
border: 1px solid #e6e6e6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffa549; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Georgia,'Times New Roman',serif; color:#3d3d3d; }
*{box-sizing:border-box;}
.promo{height:34px;background:#006341;color:#fff;display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
.nav{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e6e6e6;}
.logo{font-size:22px;font-weight:700;color:#006341;letter-spacing:-.3px;}
.navlinks{display:flex;gap:22px;font-family:Arial,sans-serif;font-size:13px;font-weight:600;color:#212121;}
.hero{height:222px;background:#e1efea;display:flex;align-items:center;padding:0 34px;gap:24px;}
.herotext{width:44%;}
.herotext .eyebrow{font-family:Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#006341;margin-bottom:8px;}
.herotext h1{font-size:32px;font-weight:700;color:#212121;margin:0 0 10px;letter-spacing:-.5px;line-height:1.15;}
.herotext p{font-family:Arial,sans-serif;font-size:14px;color:#3d3d3d;margin:0 0 14px;max-width:320px;}
.herocta{display:inline-block;background:#006341;color:#fff;font-family:Arial,sans-serif;font-size:14px;font-weight:600;padding:12px 24px;border-radius:4px;}
.heroart{flex:1;height:150px;border-radius:8px;background:linear-gradient(135deg,#eb5721 0%,#f5bc22 50%,#2ac4e3 100%);position:relative;}
.heroart:before{content:'';position:absolute;left:20%;top:20%;width:60px;height:60px;border-radius:50%;background:#fee4ca;}
.taxonomy{display:flex;gap:10px;padding:16px 34px 0;}
.tag{font-family:Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#fff;border-radius:9999px;padding:5px 12px;}
.grid{display:flex;gap:14px;padding:16px 34px 0;}
.card{width:150px;border-radius:8px;padding:10px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);}
.thumb{height:96px;border-radius:8px;margin-bottom:8px;}
.ptitle{font-family:Georgia,serif;font-size:13px;font-weight:600;color:#212121;line-height:1.3;height:32px;overflow:hidden;}
.pprice{font-size:14px;font-weight:600;color:#212121;margin-top:4px;}
.psale{color:#eb5721;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#003926;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-family:Arial,sans-serif;font-size:11px;color:#ccecf2;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="promo">Free Shipping on Orders Over $75</div>
<div class="nav">
<div class="logo">Uncommon Goods</div>
<div class="navlinks"><div>For Her</div><div>For Him</div><div>Home & Garden</div><div>Personalized</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="eyebrow">Gifts Worth Giving</div>
<h1>Uncommonly good, uncommonly you.</h1>
<p>One-of-a-kind finds from independent makers, sorted by who you're shopping for.</p>
<div class="herocta">Find A Gift</div>
</div>
<div class="heroart"></div>
</div>
<div class="taxonomy">
<div class="tag" style="background:#eb5721">Outdoor & Garden</div>
<div class="tag" style="background:#d94f6a">Personal Care</div>
<div class="tag" style="background:#2ac4e3">Kitchen & Bar</div>
<div class="tag" style="background:#f5bc22;color:#212121">Art & Home</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#fee4ca,#eb5721)"></div><div class="ptitle">Hand-Thrown Garden Planter</div><div class="pprice">$68</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f391a4,#d94f6a)"></div><div class="ptitle">Engraved Keepsake Box</div><div class="pprice psale">$42</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2ac4e3,#0097b5)"></div><div class="ptitle">Copper Cocktail Kit</div><div class="pprice">$95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f5bc22,#eca154)"></div><div class="ptitle">Artist-Made Ceramic Vase</div><div class="pprice">$58</div></div>
</div>
<div class="footer"><span>© Gifts For Every Story</span><span>Registry · Track Order · Help</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #848d9f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #cc1818; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #1e1e1e;
border: 1px solid #cc1818; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1e1e1e;
border: 1px solid #c7c7c7; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #848d9f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #cc1818; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,'Segoe UI',Roboto,sans-serif; color:#444444; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #eeeeee;}
.logo{font-size:20px;font-weight:700;color:#1e1e1e;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#1e1e1e;}
.cart{background:#cc1818;color:#fff;font-size:12px;font-weight:600;border-radius:4px;padding:8px 16px;}
.hero{height:250px;background:#1e1e1e;display:flex;align-items:center;padding:0 40px;gap:30px;}
.herotext{width:48%;color:#fff;}
.herotext h1{font-size:32px;font-weight:700;margin:0 0 12px;line-height:1.2;}
.herotext p{font-size:14px;opacity:.85;margin:0 0 18px;max-width:320px;}
.herocta{display:inline-block;background:#cc1818;color:#fff;font-size:15px;font-weight:600;border-radius:4px;padding:12px 26px;}
.heroimg{width:44%;height:170px;border-radius:4px;background:radial-gradient(circle at 35% 30%,#b6b8ba,#1e1e1e 75%);position:relative;overflow:hidden;}
.heroimg:before{content:'';position:absolute;width:14px;height:130px;background:#cc1818;border-radius:4px;top:20px;left:70px;transform:rotate(12deg);}
.heroimg:after{content:'';position:absolute;width:60px;height:40px;background:#b6b8ba;border-radius:4px;bottom:24px;right:50px;transform:rotate(-8deg);}
.spectable{display:flex;gap:1px;background:#eeeeee;margin:0 36px;}
.speccell{flex:1;background:#f7f7f7;text-align:center;padding:10px;}
.speclabel{font-size:10px;font-weight:600;text-transform:uppercase;color:#848d9f;}
.specvalue{font-size:14px;color:#1e1e1e;margin-top:2px;font-weight:600;}
.grid{display:flex;gap:14px;padding:16px 36px 0;}
.card{width:154px;background:#fff;border:1px solid #eeeeee;border-radius:6px;overflow:hidden;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#cc1818;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;border-radius:4px;padding:3px 7px;z-index:2;}
.thumb{height:88px;background:#f7f7f7;}
.body{padding:8px 10px;}
.ptitle{font-size:12px;font-weight:600;color:#1e1e1e;height:30px;overflow:hidden;}
.pprice{font-size:14px;font-weight:700;color:#1e1e1e;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#1e1e1e;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.footer span{color:#fff;font-size:11px;opacity:.75;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Sneeboer</div>
<div class="navlinks"><div>Tuingereedschap</div><div>Handschoffels</div><div>Snoeischaren</div><div>Over Ons</div></div>
<div class="cart">In winkelmand</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Forged steel, from a Dutch workshop.</h1>
<p>Hand-hammered tools built to outlast the gardener who first swings them.</p>
<div class="herocta">Bekijk Gereedschap</div>
</div>
<div class="heroimg"></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Blade</div><div class="specvalue">Boron Steel</div></div>
<div class="speccell"><div class="speclabel">Handle</div><div class="specvalue">Ash Wood</div></div>
<div class="speccell"><div class="speclabel">Weight</div><div class="specvalue">680g</div></div>
</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#cc1818,#1e1e1e)"></div><div class="body"><div class="ptitle">Border Spade</div><div class="pprice">€89</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b6b8ba,#1e1e1e)"></div><div class="body"><div class="ptitle">Hand Trowel</div><div class="pprice">€34</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f0b849,#1e1e1e)"></div><div class="body"><div class="ptitle">Pruning Shears</div><div class="pprice">€52</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00a854,#1e1e1e)"></div><div class="body"><div class="ptitle">Border Fork</div><div class="pprice">€95</div></div></div>
</div>
<div class="footer"><span>© Sneeboer — Bovenkarspel, Nederland</span><span>Garantie · Verzending</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfbfb; color: #2b2b2b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfbfb; color: #2b2b2b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #2b2b2b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #fbfbfb; color: #2b2b2b;
border: 1px solid #108474; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fbfbfb; color: #2b2b2b;
border: 1px solid #c7c7c7; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Jones Snowboards Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Lato','Helvetica Neue',Arial,sans-serif; background:#fbfbfb; color:#2b2b2b; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid #dedede;padding:0 24px;}
.logo{font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:1px;}
.navlinks{position:absolute;left:24px;display:flex;gap:20px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;}
.navlinks .active{color:#108474;border-bottom:2px solid #108474;padding-bottom:4px;}
.carticon{position:absolute;right:24px;font-size:14px;}
.hero{background:#2b2b2b;color:#fbfbfb;padding:22px 40px;display:flex;align-items:center;justify-content:space-between;}
.hero-text h1{font-size:26px;font-weight:700;line-height:1.15;margin:0 0 8px;text-transform:uppercase;}
.hero-text p{font-size:13px;color:#c9c9c9;max-width:340px;margin:0 0 12px;}
.btn{display:inline-block;background:#108474;color:#fff;padding:10px 22px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.hero-art{width:180px;height:90px;background:linear-gradient(135deg,#0d6b5d,#108474 60%,#f48120);}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:14px 24px;background:#eeeeee;}
.card{background:#fff;padding:0;}
.imgbox{width:100%;height:150px;position:relative;}
.badge{position:absolute;top:0;left:0;background:#108474;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;}
.title{font-size:13px;font-weight:600;padding:8px 8px 0;}
.price{font-size:13px;color:#4a4a4a;padding:2px 8px 8px;}
</style>
<div class="nav">
<div class="navlinks"><span class="active">Snowboards</span><span>Splitboards</span><span>Outerwear</span></div>
<div class="logo">Jones Snowboards</div>
<div class="carticon">🛒 2</div>
</div>
<div class="hero">
<div class="hero-text">
<h1>Built for the<br>backcountry.</h1>
<p>Sustainably crafted snowboards designed by riders who spend more time in the mountains than in the shop.</p>
<div class="btn">Shop Now</div>
</div>
<div class="hero-art"></div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#dbe6e4,#94b0ac);"><div class="badge">New</div></div>
<div class="title">Frontier Snowboard</div>
<div class="price">$549.95</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#e0dbd2,#b0a48f);"></div>
<div class="title">Explorer Splitboard</div>
<div class="price">$899.95</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#d6ddd0,#8ba070);"></div>
<div class="title">Mountain Twin Board</div>
<div class="price">$479.95</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#dfe0e2,#a5a9ae);"><div class="badge">Sale</div></div>
<div class="title">Storm Chaser Jacket</div>
<div class="price">$329.95</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #003681; color: #ffffff;
border: none; border-radius: 2px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #003681;
border: 1px solid #003681; border-radius: 2px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #bd2426; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Roboto,'Helvetica Neue',Arial,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.utilbar{height:32px;background:#313131;color:#fff;font-size:12px;display:flex;align-items:center;padding:0 28px;gap:20px;}
.nav{height:56px;background:#003681;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:3px solid #f68b1f;}
.logo{font-size:18px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#fff;}
.hero{background:#003681;color:#fff;padding:24px 28px;border-left:0;min-height:120px;position:relative;}
.hero:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:#f68b1f;}
.h1{font-size:28px;font-weight:700;line-height:1.25;margin:0 0 8px;padding-left:16px;}
.sub{font-size:14px;padding-left:16px;max-width:500px;}
.grid{display:flex;gap:14px;padding:20px 28px 0;}
.card{width:200px;background:#fff;border:1px solid #dedede;border-radius:4px;padding:12px;}
.thumb{height:100px;background:#f5f5f5;border-radius:2px;margin-bottom:8px;}
.title{font-size:15px;font-weight:600;}
.sku{font-family:'Courier New',monospace;font-size:11px;color:#666;margin-top:4px;}
.price{font-size:18px;font-weight:600;margin-top:6px;}
.tags{display:flex;gap:4px;margin-top:8px;}
.tag{font-size:10px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;padding:2px 6px;}
.t-red{background:#bd2426;color:#fff;}
.t-blue{background:#003681;color:#fff;}
.t-green{background:#9bca3e;color:#fff;}
.spectable{margin:16px 28px 0;border:1px solid #dedede;}
.srow{display:flex;border-bottom:1px solid #dedede;}
.srow:last-child{border-bottom:none;}
.slabel{width:180px;background:#003681;color:#fff;font-size:12px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;padding:8px 12px;}
.sval{flex:1;background:#fff;font-size:13px;padding:8px 12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="utilbar"><span>1-800-555-0199</span><span>Quick Order</span><span>My Account</span></div>
<div class="nav">
<div class="logo">Spi Safety</div>
<div class="navlinks"><span>Head Protection</span><span>Hand Protection</span><span>Fall Protection</span></div>
</div>
<div class="hero">
<div class="h1">ANSI-rated PPE, by the numbers.</div>
<div class="sub">Cut levels and reorder codes — not brand storytelling.</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003681,#0051c3)"></div><div class="title">Cut-Resistant Gloves A5</div><div class="sku">SKU: SPI-CG-A5-L</div><div class="price">$8.49</div><div class="tags"><span class="tag t-red">DANGER</span><span class="tag t-green">In Stock</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f68b1f,#003681)"></div><div class="title">Hi-Vis Safety Vest</div><div class="sku">SKU: SPI-HV-100</div><div class="price">$14.99</div><div class="tags"><span class="tag t-blue">ANSI Z87.1</span></div></div>
</div>
<div class="spectable">
<div class="srow"><div class="slabel">Cut Level</div><div class="sval">ANSI/ISEA 105 A5</div></div>
<div class="srow"><div class="slabel">Material</div><div class="sval">HPPE / Steel Fiber Blend</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #303030;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #303030;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.27; letter-spacing: -0.22px; margin: 0; color: #303030; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.28px; background: #cf2027; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.28px; background: #f7f7f7; color: #303030;
border: 1px solid #cf2027; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f7f7f7; color: #303030;
border: 1px solid #c5c5c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.22px; background: #d12121; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f7; color:#2c2c2c; box-sizing:border-box;
font-family:Inter, "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#ffffff; border-bottom:1px solid #e0e0e0; }
.brand { font-size:19px; font-weight:700; color:#303030; letter-spacing:0.2px; }
.brand span { color:#cf2027; }
.nlinks { display:flex; gap:26px; }
.nlinks div { font-size:13px; font-weight:600; color:#303030; position:relative; padding-bottom:20px; }
.nlinks div.on { color:#cf2027; }
.nlinks div.on::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:#cf2027; }
.navcta { background:#cf2027; color:#fff; font-size:12px; font-weight:600; text-transform:uppercase;
letter-spacing:0.28px; padding:11px 22px; border-radius:2px; }
.hero { height:230px; background:#303030; position:relative; display:flex; align-items:center; padding:0 40px; }
.hero::before { content:''; position:absolute; inset:0; background:rgba(48,48,48,0.4); }
.hero::after { content:''; position:absolute; right:0; top:0; bottom:0; width:44%;
background:repeating-linear-gradient(100deg,#4a4a4a 0 3px,#3a3a3a 3px 6px); opacity:0.6; }
.herotxt { position:relative; z-index:2; max-width:440px; }
.herotxt .k { color:#f0b3b6; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.herotxt h1 { color:#f7f7f7; font-size:30px; font-weight:500; margin:8px 0 10px; }
.herotxt p { color:#e0e0e0; font-size:15px; margin:0 0 16px; line-height:1.5; }
.herobtn { display:inline-block; background:#cf2027; color:#fff; font-size:14px; font-weight:600;
text-transform:uppercase; letter-spacing:0.28px; padding:13px 26px; border-radius:2px; }
.section { padding:22px 32px 0; }
.sechead { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sechead h2 { font-size:18px; font-weight:600; color:#303030; margin:0; }
.sechead span { font-size:13px; color:#cf2027; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card { background:#ffffff; border:1px solid #e2e6eb; border-radius:8px; overflow:hidden; }
.shot { height:96px; position:relative; }
.c1 .shot { background:linear-gradient(150deg,#cf2027,#a3191f); }
.c2 .shot { background:linear-gradient(150deg,#707070,#303030); }
.c3 .shot { background:linear-gradient(150deg,#cc6328,#a3191f); }
.c4 .shot { background:linear-gradient(150deg,#289551,#1f3521); }
.shot::after { content:''; position:absolute; left:50%; top:50%; width:60px; height:2px; background:#f7f7f7;
transform:translate(-50%,-50%) rotate(-8deg); box-shadow:0 8px 0 #f7f7f7, 0 16px 0 #f7f7f7, 0 -8px 0 #f7f7f7; opacity:0.7; }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:0.22px; padding:2px 8px; border-radius:4px; color:#fff; }
.badge.sale { background:#d12121; }
.badge.eco { background:#1f3521; }
.cbody { padding:10px 12px 12px; }
.ctitle { font-size:14px; font-weight:600; color:#303030; margin-bottom:4px; }
.cprice { font-size:14px; font-weight:400; color:#2c2c2c; }
.cstock { font-size:11px; color:#289551; margin-top:4px; font-weight:500; }
</style></head>
<body>
<nav>
<div class="brand">D Addario</div>
<div class="nlinks"><div class="on">Strings</div><div>Reeds</div><div>Accessories</div><div>Pro-Arte</div></div>
<div class="navcta">Shop All</div>
</nav>
<div class="hero">
<div class="herotxt">
<div class="k">Tested. Trusted. Since 1905.</div>
<h1>The Strings Professionals Trust</h1>
<p>Precision-manufactured strings, reeds, and accessories built for musicians who won't settle.</p>
<div class="herobtn">Find Your Strings</div>
</div>
</div>
<div class="section">
<div class="sechead"><h2>Best Sellers</h2><span>Shop the collection</span></div>
<div class="grid">
<div class="card c1"><div class="shot"><span class="badge sale">Sale</span></div>
<div class="cbody"><div class="ctitle">NYXL Electric Guitar Strings</div><div class="cprice">$9.99</div><div class="cstock">In stock</div></div></div>
<div class="card c2"><div class="shot"></div>
<div class="cbody"><div class="ctitle">Pro-Arte Classical Nylon</div><div class="cprice">$14.50</div><div class="cstock">In stock</div></div></div>
<div class="card c3"><div class="shot"><span class="badge eco">Eco Pack</span></div>
<div class="cbody"><div class="ctitle">EJ16 Phosphor Bronze</div><div class="cprice">$8.25</div><div class="cstock">In stock</div></div></div>
<div class="card c4"><div class="shot"></div>
<div class="cbody"><div class="ctitle">Reserve Bb Clarinet Reeds</div><div class="cprice">$24.00</div><div class="cstock">In stock</div></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #45474a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #45474a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #45474a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #c8102e; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #fefefe; color: #45474a;
border: 1px solid #c8102e; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fefefe; color: #45474a;
border: 1px solid #d0d0d1; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #84bd00; color: #45474a;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Drunk Elephant Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:'Lato','Open Sans',Helvetica,Arial,sans-serif;
background:#fefefe; color:#45474a;
}
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#fefefe;}
.logo{font-family:Georgia,serif;font-size:22px;font-weight:500;letter-spacing:-0.3px;color:#c8102e;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#4a4a4a;}
.searchbar{background:#fefefe;border:1px solid #cccccc;border-radius:9999px;padding:10px 18px;font-size:13px;color:#767676;width:170px;}
.hero{background:#f7f8fa;padding:34px 40px;text-align:center;}
.hero h1{font-family:Georgia,serif;font-size:34px;font-weight:500;letter-spacing:-0.3px;margin:0 0 10px;}
.hero p{font-size:14px;color:#4a4a4a;margin:0 auto 16px;max-width:420px;}
.herobtn{background:#c8102e;color:#fff;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:14px 32px;display:inline-block;}
.grid{display:flex;gap:16px;padding:24px 40px 0;}
.card{flex:1;background:#fff;position:relative;}
.card-img{height:140px;position:relative;}
.card-img.c1{background:linear-gradient(135deg,#f68f5b,#e6fe52);}
.card-img.c2{background:linear-gradient(135deg,#84bd00,#f6dcff);}
.card-img.c3{background:linear-gradient(135deg,#c8102e,#f68f5b);}
.card-img.c4{background:linear-gradient(135deg,#be9170,#f6dcff);}
.badge{position:absolute;top:8px;left:8px;background:#84bd00;color:#45474a;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:4px 8px;border-radius:4px;}
.card-title{font-size:14px;font-weight:600;margin:10px 0 4px;}
.card-price{font-size:13px;color:#c8102e;}
.pinkstrip{background:#f6dcff;padding:14px 40px;display:flex;gap:10px;align-items:center;}
.pinktag{background:#fff;border-radius:9999px;padding:4px 12px;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#45474a;}
</style>
<nav class="nav">
<div class="logo">Drunk Elephant</div>
<div class="navlinks">
<span>Shop</span><span>Bestsellers</span><span>Skin Concerns</span><span>About</span>
</div>
<div class="searchbar">Search products…</div>
</nav>
<div class="hero">
<h1>Biocompatible skincare.<br>Zero compromise.</h1>
<p>Clean, clinical, and full of color — efficacy that never forgets to have fun.</p>
<div class="herobtn">Shop The Marula Oil</div>
</div>
<div class="pinkstrip">
<span class="pinktag">Vegan</span><span class="pinktag">Cruelty-Free</span><span class="pinktag">Biocompatible</span><span class="pinktag">Suspicious 6-Free</span>
</div>
<div class="grid">
<div class="card"><div class="card-img c1"><span class="badge">New</span></div><div class="card-title">Marula Luxury Oil</div><div class="card-price">$84.00</div></div>
<div class="card"><div class="card-img c2"><span class="badge">Bestseller</span></div><div class="card-title">C-Firma Serum</div><div class="card-price">$78.00</div></div>
<div class="card"><div class="card-img c3"></div><div class="card-title">A-Passioni Retinol</div><div class="card-price">$74.00</div></div>
<div class="card"><div class="card-img c4"></div><div class="card-title">Lala Retro Cream</div><div class="card-price">$60.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2d2d2d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2d2d2d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9b9b9b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #018849; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2d2d2d; color: #018849;
border: 1px solid #018849; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2d2d2d; color: #f5f5f5;
border: 1px solid #4d4d4d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9b9b9b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #263c31; color: #018849;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Futura", "Century Gothic", "Trebuchet MS", Tahoma, Geneva, Verdana, Arial, sans-serif; }
* { box-sizing:border-box; }
.lime { background:#ccff00; color:#000000; height:26px; display:flex; align-items:center; justify-content:center;
font-size:12px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; }
nav { height:52px; background:#2d2d2d; display:flex; align-items:center; padding:0 24px; gap:20px; }
.brand { color:#ffffff; font-size:16px; font-weight:900; letter-spacing:0.04em; margin:0 26px 0 0; }
.gtab { color:#ffffff; font-size:12px; font-weight:900; letter-spacing:0.03em; padding:6px 4px; }
.gtab.on { border-bottom:2px solid #ffffff; }
.searchbar { margin-left:auto; background:#ffffff; color:#2d2d2d; border-radius:19px; height:28px; width:220px;
display:flex; align-items:center; padding:0 14px; font-size:11px; color:#858585; }
.subnav { height:34px; background:#525050; display:flex; align-items:center; gap:18px; padding:0 24px; }
.subnav span { color:#ffffff; font-size:11px; }
.subnav span.sale { color:#ffcccc; font-weight:700; }
.stage { display:flex; height:528px; }
.gallery { width:420px; background:#f0f0f0; position:relative; display:flex; align-items:center; justify-content:center; }
.gallery .shape1 { position:absolute; width:220px; height:300px; background:linear-gradient(160deg,#d1d1d1,#9a9a9a); left:60px; top:40px; }
.gallery .shape2 { position:absolute; width:150px; height:190px; background:linear-gradient(160deg,#ececec,#c7c7c7); right:40px; bottom:50px; }
.thumbs { position:absolute; left:16px; top:16px; display:flex; flex-direction:column; gap:8px; }
.thumb { width:44px; height:56px; background:#dddddd; border:1px solid #ffffff; }
.thumb.on { border-color:#2d2d2d; }
.details { flex:1; padding:26px 30px; display:flex; flex-direction:column; }
.brandline { font-size:12px; color:#666666; letter-spacing:0.05em; text-transform:uppercase; margin:0 0 6px; }
.details h2 { font-size:19px; font-weight:400; margin:0 0 12px; line-height:1.3; max-width:340px; }
.pricebox { display:flex; align-items:baseline; gap:10px; margin-bottom:18px; }
.pricebox .now { font-size:20px; font-weight:700; color:#d01345; }
.pricebox .was { font-size:14px; color:#666666; text-decoration:line-through; }
.salebadge { background:#d01345; color:#ffffff; font-size:11px; font-weight:700; padding:3px 8px; }
.sizelabel { font-size:12px; color:#2d2d2d; font-weight:700; margin:0 0 8px; }
.sizes { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.size { width:44px; height:36px; background:#e8e8e8; display:flex; align-items:center; justify-content:center; font-size:12px; }
.size.out { color:#999999; text-decoration:line-through; }
.size.on { background:#2d2d2d; color:#ffffff; }
.addbag { margin-top:auto; background:#018849; color:#ffffff; border:none; height:44px; font-size:15px; font-weight:700;
text-transform:uppercase; letter-spacing:0.02em; width:100%; }
.wish { margin-top:8px; background:#ffffff; border:2px solid #2d2d2d; color:#000000; height:40px; font-size:13px; font-weight:700; width:100%; }
.meta { display:flex; gap:16px; margin-top:16px; font-size:11px; color:#858585; }
</style></head>
<body>
<div class="lime">Download our new app for exclusive drops</div>
<nav>
<p class="brand">ASOS</p>
<span class="gtab on">WOMEN</span>
<span class="gtab">MEN</span>
<div class="searchbar">Search for items and brands</div>
</nav>
<div class="subnav">
<span class="sale">Sale</span><span>New in</span><span>Clothing</span><span>Dresses</span><span>Shoes</span><span>Accessories</span><span>Brands</span>
</div>
<div class="stage">
<div class="gallery">
<div class="thumbs"><div class="thumb on"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
<div class="shape1"></div>
<div class="shape2"></div>
</div>
<div class="details">
<p class="brandline">ASOS DESIGN</p>
<h2>Oversized cropped jacket in washed grey with contrast stitching</h2>
<div class="pricebox">
<span class="now">£38.00</span>
<span class="was">£60.00</span>
<span class="salebadge">SALE</span>
</div>
<p class="sizelabel">Size — UK 6 to 18</p>
<div class="sizes">
<div class="size">6</div><div class="size on">8</div><div class="size">10</div>
<div class="size">12</div><div class="size out">14</div><div class="size">16</div><div class="size">18</div>
</div>
<div class="meta"><span>Free delivery over £30</span><span>Free returns</span></div>
<button class="addbag">Add to bag</button>
<button class="wish">Save for later</button>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #396eff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #396eff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a0b8fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #396eff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #396eff; color: #f5f5f5;
border: 1px solid #5784fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a0b8fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #305cd6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0d0d0e; box-sizing:border-box;
font-family:"Spoqa Han Sans Neo","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #e9eaec; }
.logo { font-size:19px; font-weight:700; }
.navlinks { display:flex; gap:20px; font-size:15px; font-weight:700; }
.navlinks span:nth-child(2) { color:#37383d; opacity:0.6; font-weight:400; }
.btn-primary { background:#396eff; color:#f8f8f9; border-radius:4px; padding:0 20px; height:38px; font-size:14px;
font-weight:700; display:flex; align-items:center; }
.listing { display:grid; grid-template-columns:1.1fr 1fr; gap:20px; padding:24px 36px; }
.gallery { background:rgba(112,114,124,0.08); border-radius:4px; height:220px; position:relative; }
.gallery::before { content:''; position:absolute; inset:20px; background:linear-gradient(135deg,#d0d2da,#70727c); border-radius:4px; }
.info h1 { font-size:20px; font-weight:700; margin:0 0 6px; }
.info .meta { font-size:15px; color:#858892; margin:0 0 14px; }
.chips { display:flex; gap:8px; margin-bottom:16px; }
.chip { background:rgba(112,114,124,0.08); border:1px solid #000000; border-radius:4px; padding:8px 12px;
font-size:14px; }
.strip { background:rgba(57,110,255,0.04); border-radius:4px; padding:12px; font-size:14px; margin-bottom:16px; }
.btn-row { display:flex; gap:10px; }
.btn-blue { flex:1; background:#396eff; color:#f8f8f9; border-radius:4px; height:52px; font-size:15px;
font-weight:700; display:flex; align-items:center; justify-content:center; }
.btn-black { flex:1; background:#000000; color:#f8f8f9; border-radius:4px; height:52px; font-size:15px;
font-weight:700; display:flex; align-items:center; justify-content:center; }
.similar { padding:0 36px 24px; }
.similar h3 { font-size:18px; font-weight:700; margin:0 0 12px; letter-spacing:-0.252px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.card { background:#ffffff; border:1px solid #e9eaec; border-radius:4px; padding:10px; }
.card .thumb { height:70px; background:rgba(112,114,124,0.08); border-radius:4px; margin-bottom:8px; }
.card .p { font-size:15px; font-weight:500; }
</style></head>
<body>
<nav>
<span class="logo">Heydealer</span>
<div class="navlinks"><span>Buy a Car</span><span>Sell My Car</span></div>
<span class="btn-primary">Reserve Now</span>
</nav>
<section class="listing">
<div class="gallery"></div>
<div class="info">
<h1>2022 Grandeur IG 2.4 Gasoline</h1>
<p class="meta">2022 model · 32,400km · No accident history</p>
<div class="chips"><span class="chip">2.4 Gasoline</span><span class="chip">No Accidents</span></div>
<div class="strip">1-year free warranty on every car · Free refund even for a simple change of mind</div>
<div class="btn-row">
<div class="btn-black">Verified Report</div>
<div class="btn-blue">Reserve Now</div>
</div>
</div>
</section>
<section class="similar">
<h3>Similar Cars</h3>
<div class="cards">
<div class="card"><div class="thumb"></div><div class="p">$16,700</div></div>
<div class="card"><div class="thumb"></div><div class="p">$15,100</div></div>
<div class="card"><div class="thumb"></div><div class="p">$17,900</div></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #00bbff; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #111111;
border: 1px solid #00bbff; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ff3442; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:'Montserrat', Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; gap:22px; padding:0 26px; border-bottom:1px solid #e8e8e8; }
.logo { font-size:18px; font-weight:600; color:#111111; margin:0 auto 0 0; }
.logo b { color:#00bbff; }
.navr { display:flex; gap:18px; margin-left:auto; align-items:center; }
.navlink { font-size:13px; font-weight:600; text-transform:uppercase; color:#333333; }
.searchpill { width:180px; height:34px; background:#f5f5f5; border:1px solid #e8e8e8; border-radius:999px;
display:flex; align-items:center; padding:0 14px; font-size:12px; color:#aaaaaa; }
.stage { display:flex; gap:26px; padding:22px 26px 0; }
.product { width:220px; height:280px; flex:0 0 auto; position:relative; overflow:hidden; background:#f5f5f5; }
.product::before { content:''; position:absolute; left:30px; top:40px; width:160px; height:160px; border-radius:50%;
background:radial-gradient(circle, #00bbff 0%, #0099d6 60%, #111 100%); }
.product::after { content:''; position:absolute; left:44px; top:54px; width:132px; height:14px; border-radius:8px;
background:#ff3442; }
.badge { position:absolute; top:12px; left:12px; background:#ff3442; color:#fff; font-size:11px; font-weight:600;
text-transform:uppercase; letter-spacing:.5px; padding:2px 8px; }
.info { flex:1; }
.kicker { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:#00bbff; }
h1 { font-size:22px; font-weight:600; margin:6px 0 8px; color:#111111; }
.desc { font-size:14px; line-height:1.5; max-width:500px; margin-bottom:14px; }
.swrow { display:flex; gap:8px; margin-bottom:16px; }
.swchip { width:26px; height:26px; border:2px solid transparent; }
.swchip.active { border-color:#111111; }
.pricerow { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.price { font-size:22px; font-weight:600; color:#333333; }
.btnrow { display:flex; gap:10px; }
.btn-p { background:#00bbff; color:#fff; border:none; height:44px; padding:0 26px;
font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.btn-s { background:#fff; color:#111111; border:2px solid #111111; height:44px; padding:0 22px;
font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.relwrap { padding:14px 26px 0; border-top:1px solid #e8e8e8; margin-top:14px; }
.relhdr { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:#aaaaaa; margin-bottom:10px; }
.relgrid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.rc { background:#f5f5f5; padding:10px; }
.rc .th { height:60px; margin-bottom:8px; background:radial-gradient(circle,#ff3442,#111); border-radius:50%; width:60px; margin-left:auto; margin-right:auto; }
.rc .t { font-size:11px; font-weight:600; color:#111111; text-align:center; }
.rc .p { font-size:11px; color:#333333; text-align:center; }
</style></head>
<body>
<nav>
<span class="logo"><b>C</b>Ciele Athletics</span>
<div class="navr">
<span class="navlink">Caps</span>
<span class="navlink">Apparel</span>
<span class="navlink">Accessories</span>
<div class="searchpill">Search</div>
</div>
</nav>
<div class="stage">
<div class="product"><span class="badge">Final Sale</span></div>
<div class="info">
<div class="kicker">GOCap SC — Running Cap</div>
<h1>GOCap SC Lightweight Trail Cap</h1>
<div class="desc">Ultralight ripstop construction with a moisture-wicking sweatband and a reflective rear strip built for early-morning miles. One size fits most, adjustable back closure.</div>
<div class="swrow">
<span class="swchip active" style="background:#00bbff"></span>
<span class="swchip" style="background:#111111"></span>
<span class="swchip" style="background:#ff3442"></span>
<span class="swchip" style="background:#aaaaaa"></span>
</div>
<div class="pricerow"><span class="price">$38.00</span></div>
<div class="btnrow">
<button class="btn-p">Add to Cart</button>
<button class="btn-s">Size Guide</button>
</div>
</div>
</div>
<div class="relwrap">
<div class="relhdr">Complete the Kit</div>
<div class="relgrid">
<div class="rc"><div class="th"></div><div class="t">ALZCap</div><div class="p">$36.00</div></div>
<div class="rc"><div class="th" style="background:radial-gradient(circle,#00bbff,#111)"></div><div class="t">Race Day Vest</div><div class="p">$48.00</div></div>
<div class="rc"><div class="th" style="background:radial-gradient(circle,#62a667,#111)"></div><div class="t">Trail Buff</div><div class="p">$22.00</div></div>
<div class="rc"><div class="th" style="background:radial-gradient(circle,#a77a06,#111)"></div><div class="t">Reflective Belt</div><div class="p">$18.00</div></div>
<div class="rc"><div class="th" style="background:radial-gradient(circle,#111,#00bbff)"></div><div class="t">Athletics Tee</div><div class="p">$34.00</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.55; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #108474; color: #ffffff;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #f9fafb; color: #108474;
border: 1px solid #108474; border-radius: 6px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #bfc0c1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d93240; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:'Nunito Sans',Arial,Helvetica,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fff;border-bottom:1px solid #e9e9e9;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:20px;font-weight:700;color:#108474;}
.navlinks{display:flex;gap:20px;font-size:15px;font-weight:600;color:#555;}
.hero{height:230px;display:flex;align-items:center;padding:0 30px;gap:26px;}
.herotext{width:320px;}
.herotext h1{font-size:32px;font-weight:700;line-height:1.2;letter-spacing:-.5px;margin:0 0 10px;}
.herotext p{font-size:16px;font-weight:300;color:#555;margin:0 0 16px;}
.cta{display:inline-block;background:#108474;color:#fff;font-size:16px;font-weight:600;padding:12px 24px;border-radius:6px;}
.water{flex:1;height:170px;border-radius:6px;background:linear-gradient(180deg,#557b97 0%,#108474 100%);position:relative;overflow:hidden;}
.board{position:absolute;bottom:40px;left:60px;width:180px;height:26px;border-radius:9999px;background:#fafafa;}
.pill{position:absolute;top:14px;right:14px;background:#d93240;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;border-radius:9999px;padding:5px 14px;}
.rowlabel{padding:14px 30px 8px;font-size:20px;font-weight:600;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:196px;background:#fff;border:1px solid #e9e9e9;border-radius:6px;overflow:hidden;position:relative;}
.thumb{aspect-ratio:1/1;background:linear-gradient(160deg,#108474,#eeeeee);}
.badge{position:absolute;top:8px;left:8px;background:#d93240;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;border-radius:9999px;padding:4px 10px;}
.body{padding:10px 14px;}
.ptitle{font-size:16px;font-weight:600;}
.price{font-size:22px;font-weight:700;color:#d93240;margin-top:4px;}
.compare{font-size:14px;color:#7b7b7b;text-decoration:line-through;margin-left:6px;}
</style>
<div class="nav">
<div class="logo">Tower Paddle Boards</div>
<div class="navlinks"><div>Inflatable SUP</div><div>Hard Boards</div><div>Accessories</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Get out on the water.</h1>
<p>Inflatable and hard boards built for value, not vanity.</p>
<div class="cta">Shop Boards</div>
</div>
<div class="water"><div class="board"></div><div class="pill">Price Drop</div></div>
</div>
<div class="rowlabel">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge">-25%</span><div class="thumb" style="background:linear-gradient(160deg,#108474,#fafafa)"></div><div class="body"><div class="ptitle">Adventurer 2 iSUP</div><div class="price">$449<span class="compare">$599</span></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#557b97,#fafafa)"></div><div class="body"><div class="ptitle">Waterman Hard Board</div><div class="price" style="color:#121212">$999</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#fbcd0a,#fafafa)"></div><div class="body"><div class="ptitle">Adjustable SUP Paddle</div><div class="price" style="color:#121212">$79</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 25.3px; letter-spacing: -0.22px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 500; line-height: 11px; letter-spacing: 0.55px; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 500; line-height: 16px; letter-spacing: 0.08px; background: #000000; color: #ffffff;
border: none; border-radius: 4px; padding: {spacing.xs} {spacing.2xl};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 500; line-height: 16px; letter-spacing: 0.08px; background: #c8f6f9; color: #000000;
border: 1px solid #000000; border-radius: 4px;
padding: {spacing.xs} {spacing.2xl}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20.8px; letter-spacing: -0.16px; background: #ffffff; color: #000000;
border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 20.8px; letter-spacing: -0.16px; background: #ffffff; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#010120; }
.brand { font-size:16px; font-weight:600; color:#ffffff; letter-spacing:-.2px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; color:#ffffff; opacity:.8; }
.navcta { background:#000000; color:#ffffff; border-radius:4px; padding:8px 16px; font-size:13px; font-weight:600; }
.heroband { background:#010120; padding:34px 32px 40px; display:flex; gap:20px; align-items:center; }
.heroleft { flex:1.1; }
.eyebrow { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#bdbbff; margin-bottom:10px; }
.heroleft h1 { font-size:36px; font-weight:500; line-height:1.05; letter-spacing:-.6px; color:#ffffff; margin:0 0 12px; max-width:420px; }
.heroleft p { font-size:14px; color:#c8c8de; margin:0 0 18px; max-width:400px; }
.btnrow { display:flex; gap:10px; }
.btn { border-radius:4px; padding:9px 18px; font-size:13px; font-weight:600; }
.btn-blk { background:#000000; color:#ffffff; }
.btn-out { background:transparent; color:#ffffff; border:1px solid #4a4a66; }
.ribbon { flex:1; height:150px; border-radius:8px; position:relative; overflow:hidden;
background:linear-gradient(115deg,#fc4c02 0%,#ef2cc1 48%,#bdbbff 100%); }
.ribbon::after { content:''; position:absolute; inset:0;
background:repeating-linear-gradient(115deg, rgba(1,1,32,0) 0px, rgba(1,1,32,0) 22px, rgba(1,1,32,.14) 22px, rgba(1,1,32,.14) 24px); }
.midband { background:#ffffff; padding:30px 32px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.stat { border:1px solid #959494; border-radius:4px; padding:18px; }
.stat.tinted { background:#c8f6f9; border-color:#959494; }
.stat .num { font-size:26px; font-weight:600; color:#000000; }
.stat .lbl { font-size:12px; color:#959494; margin-top:4px; }
.stat.tinted .lbl { color:#01344a; }
.row2 { display:flex; gap:18px; margin-top:18px; }
.card { flex:1; border:1px solid #959494; border-radius:4px; padding:16px; background:#ffffff; }
.card .tag { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#959494; }
.card h3 { font-size:15px; font-weight:600; margin:8px 0 4px; }
.card p { font-size:12px; color:#959494; margin:0; line-height:1.4; }
</style></head>
<body>
<nav>
<div class="brand">Together AI</div>
<div class="navlinks"><span>Platform</span><span>Research</span><span>Pricing</span><span>Docs</span></div>
<div class="navcta">Get started</div>
</nav>
<div class="heroband">
<div class="heroleft">
<div class="eyebrow mono">Grounded in cutting-edge research</div>
<h1>The fastest inference stack for open models</h1>
<p>Fine-tune, deploy, and scale generative AI on infrastructure built for it.</p>
<div class="btnrow"><button class="btn btn-blk">Start building</button><button class="btn btn-out">Contact sales</button></div>
</div>
<div class="ribbon"></div>
</div>
<div class="midband">
<div class="stats">
<div class="stat"><div class="num">4x</div><div class="lbl">Faster inference throughput</div></div>
<div class="stat tinted"><div class="num">200+</div><div class="lbl">Open-source models supported</div></div>
<div class="stat"><div class="num">11ms</div><div class="lbl">Median time to first token</div></div>
</div>
<div class="row2">
<div class="card"><div class="tag">Inference</div><h3>Serverless endpoints</h3><p>Pay per token with sub-second cold starts across every region.</p></div>
<div class="card"><div class="tag">Fine-tuning</div><h3>Custom model training</h3><p>Bring your data and ship a private model in an afternoon.</p></div>
<div class="card"><div class="tag">GPU Clusters</div><h3>Dedicated capacity</h3><p>Reserve H100 and H200 clusters for large training runs.</p></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fc1c49; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fc1c49; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c9032a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fc1c49; color: #000000;
border: 1px solid #c9032a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fc1c49; color: #f5f5f5;
border: 1px solid #fb3f65; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f41844; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#ffffff; color:#171b1f; box-sizing:border-box; font-family: "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.app { width:960px; height:640px; display:flex; flex-direction:column; position:relative; }
nav.gnb { flex:0 0 56px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid #e7e7e8; }
.gnb-left { display:flex; align-items:center; gap:22px; }
.logo { font-size:18px; font-weight:700; color:#171b1f; letter-spacing:-0.3px; }
.gnb-links { display:flex; align-items:baseline; gap:20px; }
.gnb-links span.main { font-size:16px; font-weight:400; color:#171b1f; }
.gnb-links span.compact { font-size:12px; font-weight:600; color:#747678; }
.gnb-right { display:flex; align-items:center; gap:10px; }
.search { width:168px; height:32px; border:1px solid #cfd0d1; border-radius:4px; padding:0 10px; font-size:12px; color:#747678; display:flex; align-items:center; }
.btn-cta { background:#fc1c49; color:#ffffff; border-radius:4px; padding:0 16px; height:32px; display:flex; align-items:center; font-size:14px; font-weight:600; white-space:nowrap; }
.banner { flex:0 0 auto; margin:16px 28px 0; height:120px; border-radius:4px;
background:linear-gradient(115deg, #ffeb3b 0%, #f8930f 46%, #e91e63 100%);
position:relative; padding:18px 24px; overflow:hidden; }
.banner h1 { font-size:30px; font-weight:700; line-height:1.2; color:#171b1f; margin:0; max-width:540px; }
.banner .sub { font-size:12px; font-weight:600; color:#171b1f; opacity:0.72; margin-top:8px; }
.banner .dots { position:absolute; right:20px; bottom:14px; display:flex; gap:5px; background:rgba(0,0,0,0.2); border-radius:19px; padding:6px 10px; }
.banner .dot { width:5px; height:5px; border-radius:50%; background:#171b1f; opacity:0.4; }
.banner .dot.on { opacity:1; width:14px; border-radius:4px; }
.pills { flex:0 0 auto; display:flex; gap:8px; padding:16px 28px 0; }
.pill { height:32px; border-radius:4px; padding:0 14px; display:flex; align-items:center; font-size:13px; font-weight:600; white-space:nowrap; }
.pill.sel { background:#000000; color:#ffffff; }
.pill.un { background:#f5f5f6; color:#747678; }
.rail { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; padding:0 28px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { border-radius:4px 4px 0 0; overflow:hidden; background:#ffffff; }
.thumb { height:132px; position:relative; }
.thumb.t1 { background:linear-gradient(135deg,#ebf3ff,#3b83ff); }
.thumb.t2 { background:linear-gradient(135deg,#fce4ec,#e91e63); }
.thumb.t3 { background:linear-gradient(135deg,#fff9c4,#f8930f); }
.rank { position:absolute; top:0; left:0; background:#171b1f; color:#ffffff; font-size:11px; font-weight:500; padding:4px 9px 4px 7px; border-radius:0 0 4px 0; }
.enr { position:absolute; left:8px; bottom:8px; background:rgba(0,0,0,0.35); color:#ffffff; font-size:11px; font-weight:400; padding:2px 9px; border-radius:19px; }
.meta { padding:10px 2px 0; }
.tag { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:4px; margin-bottom:7px; }
.tag.blue { background:#ebf3ff; color:#3b83ff; }
.tag.pink { background:#fce4ec; color:#e91e63; }
.tag.yellow { background:#fff9c4; color:#f57f17; }
.title { font-size:14px; font-weight:700; color:#171b1f; margin:0 0 4px; line-height:1.3; }
.inst { font-size:12px; color:#747678; margin:0; }
footer { flex:0 0 30px; border-top:1px solid #e7e7e8; display:flex; align-items:center; justify-content:space-between; padding:0 28px; font-size:11px; color:#747678; }
</style></head>
<body>
<div class="app">
<nav class="gnb">
<div class="gnb-left">
<span class="logo">Fastcampus</span>
<div class="gnb-links"><span class="main">All Courses</span><span class="compact">Corporate</span><span class="compact">Community</span></div>
</div>
<div class="gnb-right">
<div class="search">Search courses</div>
<div class="btn-cta">Enroll now</div>
</div>
</nav>
<div class="banner">
<h1>Pick a one-day class you like<br>Get the free-alert sign up today!</h1>
<div class="sub">Limited seats · This cohort closes Friday</div>
<div class="dots"><span class="dot on"></span><span class="dot"></span><span class="dot"></span></div>
</div>
<div class="pills">
<div class="pill sel">All</div>
<div class="pill un">AI Tech</div>
<div class="pill un">Design</div>
<div class="pill un">Data</div>
<div class="pill un">Marketing</div>
<div class="pill un">Video / 3D</div>
</div>
<div class="rail">
<div class="cards">
<div class="card">
<div class="thumb t1"><span class="rank">1st</span><span class="enr">1,940+</span></div>
<div class="meta"><span class="tag blue">Data / Dev</span><p class="title">AI Agent Bootcamp: Build & Ship</p><p class="inst">by Jiho Kang</p></div>
</div>
<div class="card">
<div class="thumb t2"><span class="rank">2nd</span><span class="enr">1,020+</span></div>
<div class="meta"><span class="tag pink">Design</span><p class="title">Visual Branding for Product Teams</p><p class="inst">by Yerin Song</p></div>
</div>
<div class="card">
<div class="thumb t3"><span class="rank">3rd</span><span class="enr">880+</span></div>
<div class="meta"><span class="tag yellow">Free</span><p class="title">One-Day Class: Career Reset Map</p><p class="inst">by Studio Team</p></div>
</div>
</div>
</div>
<footer>
<span>© Fastcampus</span>
<span>Fastcampus · Courses · Corporate Training · Community</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #0e0d0e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #0e0d0e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #0e0d0e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #828282; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #79a70a; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fefefe; color: #0e0d0e;
border: 1px solid #79a70a; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fefefe; color: #0e0d0e;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #828282; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #79a70a; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fefefe; font-family:'Sabon Next LT Pro',Georgia,serif; color:#484f51; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e5e5e5;}
.logo{font-family:'FoundersGroteskCondensed','Inter',sans-serif;font-size:24px;font-weight:700;letter-spacing:-0.5px;color:#0e0d0e;}
.navlinks{display:flex;gap:22px;font-family:'FoundersGroteskCondensed',sans-serif;font-size:13px;font-weight:500;letter-spacing:0.3px;text-transform:uppercase;color:#0e0d0e;}
.hero{height:220px;background:#f8f8f8;display:flex;align-items:center;padding:0 32px;}
.h1{font-family:'FoundersGroteskCondensed',sans-serif;font-size:36px;font-weight:700;letter-spacing:-0.7px;line-height:1.12;margin:0 0 12px;width:420px;color:#0e0d0e;}
.sub{font-size:15px;margin:0 0 18px;width:360px;}
.btn{display:inline-block;background:#79a70a;color:#fff;font-family:'FoundersGroteskCondensed',sans-serif;font-size:13px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:12px 24px;border-radius:8px;}
.cover{position:relative;width:150px;height:190px;margin-left:auto;background:linear-gradient(150deg,#2e409e,#ac1212 80%);}
.section{padding:20px 32px 0;}
.stitle{font-family:'FoundersGroteskCondensed',sans-serif;font-size:14px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;margin-bottom:14px;color:#0e0d0e;}
.grid{display:flex;gap:16px;}
.card{width:150px;}
.badge{display:inline-block;font-family:'FoundersGroteskCondensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#fff;background:#79a70a;padding:2px 8px;margin-bottom:6px;}
.thumb{height:120px;background:#f8f8f8;margin-bottom:8px;}
.pname{font-size:16px;margin-bottom:2px;color:#0e0d0e;}
.pprice{font-family:'FoundersGroteskCondensed',sans-serif;font-size:15px;font-weight:600;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#f8f8f8;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-family:'FoundersGroteskCondensed',sans-serif;font-size:12px;color:#828282;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Taschen</div>
<div class="navlinks"><div>Art</div><div>Architecture</div><div>Photography</div><div>Limited Editions</div></div>
</div>
<div class="hero">
<div>
<div class="h1">Books for optimists since 1980.</div>
<div class="sub">Editorial monographs and collector's editions, printed like they'll matter.</div>
<div class="btn">Shop New Titles</div>
</div>
<div class="cover"></div>
</div>
<div class="section">
<div class="stitle">Featured Editions</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(150deg,#2e409e,#79a70a);"></div><div class="pname">The Art of Structure</div><div class="pprice">$85.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#f2be80,#ac1212);"></div><div class="pname">Modern Interiors, Vol. II</div><div class="pprice">$65.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#722b92,#0e0d0e);"></div><div class="pname">Photography Now</div><div class="pprice">$120.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#79a70a,#ebc621);"></div><div class="pname">Collector's Slipcase Set</div><div class="pprice">$450.00</div></div>
</div>
</div>
<div class="footer"><span>© Books For Optimists Since 1980</span><span>Shipping · Rare Editions</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #404040;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #404040;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #404040; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #999999; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #0051c3; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #ffffff; color: #404040;
border: 1px solid #0051c3; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #404040;
border: 1px solid #cfcfcf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #999999; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f68b1f; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,Arial,BlinkMacSystemFont,'Helvetica Neue',sans-serif; color:#404040; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #ebebeb;}
.logo{font-size:20px;font-weight:700;color:#0051c3;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;}
.searchpill{background:#fff;border:1px solid #dedede;border-radius:9999px;padding:12px 20px;font-size:14px;color:#999;width:200px;}
.hero{background:#ebebeb;padding:30px 32px;min-height:200px;display:flex;flex-direction:column;justify-content:center;}
.hero h1{font-size:32px;font-weight:700;letter-spacing:-0.5px;margin:0 0 12px;max-width:460px;}
.btn{display:inline-block;background:#0051c3;color:#fff;font-size:16px;font-weight:600;padding:12px 32px;border-radius:8px;width:fit-content;}
.grid{display:flex;gap:14px;padding:20px 32px 0;}
.card{flex:1;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.06);}
.thumb{aspect-ratio:1/1;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;text-transform:uppercase;color:#fff;padding:4px 8px;border-radius:4px;}
.body{padding:8px 10px 12px;}
.title{font-size:16px;font-weight:600;}
.price{font-size:18px;font-weight:700;margin-top:6px;}
.price.sale{color:#bd2426;}
.orig{font-size:14px;color:#999;text-decoration:line-through;margin-left:6px;}
.stars{color:#f68b1f;font-size:14px;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Rugs Usa</div>
<div class="navlinks"><div>Living Room</div><div>Outdoor</div><div>Runners</div><div>Sale</div></div>
<div class="searchpill">Search rugs...</div>
</div>
<div class="hero">
<h1>Style at every price point.</h1>
<div class="btn">Shop All Rugs</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#e8e0d0"><span class="badge" style="background:#f68b1f">Sale</span></div><div class="body"><div class="title">Bohemian Medallion Rug</div><div class="price sale">$89.00<span class="orig">$139.00</span></div><div class="stars">★★★★☆ (1,842)</div></div></div>
<div class="card"><div class="thumb" style="background:#d0e0e8"><span class="badge" style="background:#bada7a;color:#404040">New</span></div><div class="body"><div class="title">Coastal Stripe Runner</div><div class="price">$59.00</div><div class="stars">★★★★★ (612)</div></div></div>
<div class="card"><div class="thumb" style="background:#e0d0e8"><span class="badge" style="background:#9bca3e">Free Shipping</span></div><div class="body"><div class="title">Vintage Persian Style</div><div class="price">$249.00</div><div class="stars">★★★★☆ (2,105)</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5500; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5500; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5500; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5500; color: #f5f5f5;
border: 1px solid #fd6f27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff7029; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0b0b0b; box-sizing:border-box;
font-family:"Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 44px; }
.brand { font-size:16px; font-weight:600; margin:0; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:8px; }
.pill { border-radius:99999px; padding:4px 12px; font-size:13px; font-family:"Courier New", monospace; }
.pill.light { background:#ededed; color:#0b0b0b; }
.pill.inverse { background:#0b0b0b; color:#ffffff; }
.hero { padding:36px 44px 24px; }
.hero h1 { font-size:60px; font-weight:400; line-height:0.98; letter-spacing:-2.4px; margin:0 0 18px; max-width:760px; }
.hero p { font-size:18px; color:#424242; max-width:480px; line-height:1.4; margin:0 0 20px; }
.cta-row { display:flex; gap:10px; }
.cta-brand { background:color-mix(in srgb, #ff5500 100%, white 0%); background:#ff5500; color:#0b0b0b;
border-radius:99999px; padding:8px 32px; font-size:20px; font-family:"Helvetica Neue", Arial, sans-serif;
border:1px solid #ff5500; }
.cta-dark { background:#0b0b0b; color:#ffffff; border-radius:99999px; padding:8px 24px; font-size:14px; border:1px solid #0b0b0b; }
.split { display:flex; gap:0; padding:16px 44px 0; }
.field { flex:1; background:#0b0b0b; border-radius:3px; padding:18px; }
.field .lbl { color:#b9b9b9; font-size:13px; font-family:"Courier New", monospace; margin-bottom:8px; }
.field .fill { height:52px; border:1px solid #ff5500; border-radius:3px; background:#212121; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:22px 44px 0; }
.card { background:#212121; border-radius:8px; padding:16px; }
.card .k { color:#ff5500; font-family:"Courier New", monospace; font-size:12px; }
.card .v { color:#ffffff; font-size:20px; font-weight:600; margin-top:6px; }
</style></head>
<body>
<nav>
<p class="brand">Sanity</p>
<div class="navlinks">
<span class="pill light">Docs</span>
<span class="pill light">Pricing</span>
<span class="pill inverse">Contact sales</span>
</div>
</nav>
<section class="hero">
<h1>The Content<br>Operating System</h1>
<p>Structured content, a configurable Studio, and APIs built for the AI era.</p>
<div class="cta-row">
<button class="cta-brand">Get started</button>
<button class="cta-dark">Book a demo</button>
</div>
</section>
<div class="split">
<div class="field"><div class="lbl">Ask anything about your content</div><div class="fill"></div></div>
</div>
<div class="grid3">
<div class="card"><div class="k">STUDIO</div><div class="v">Configurable</div></div>
<div class="card"><div class="k">CONTENT LAKE</div><div class="v">One source of truth</div></div>
<div class="card"><div class="k">AI AGENT</div><div class="v">Built in</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1033d4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1033d4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e9ee6; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2f67d6; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1033d4; color: #ffffff;
border: 1px solid #2f67d6; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1033d4; color: #f5f5f5;
border: 1px solid #3552d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e9ee6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #153bd4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box; font-family:"Inter","Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-weight:700; font-size:16px; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#fff; }
.ghost { border:1px solid rgba(255,255,255,0.55); background:transparent; color:#fff; border-radius:14px; padding:10px 18px; font-size:14px; }
.hero { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; padding:40px 20px; }
.hero h1 { font-size:56px; font-weight:600; margin:0; letter-spacing:0.5px; }
.hero h2 { font-size:16px; font-weight:500; color:#fff; margin:0; opacity:0.85; }
.news { background:#ffffff; color:#1b2230; padding:24px 30px; display:flex; gap:16px; }
.card { flex:1; background:#fbfaf7; border:1px solid rgba(15,18,24,0.1); border-radius:16px; padding:14px; }
.card h3 { font-size:13px; margin:0 0 6px; color:#0e1420; }
.card p { font-size:12px; margin:0; color:#1b2230; }
.chip { display:inline-block; border-radius:999px; font-size:12px; font-weight:600; padding:5px 12px; }
.chip.blue { background:rgba(47,103,214,0.1); color:#234a93; }
.chip.amber { background:rgba(255,175,42,0.12); color:#7a4600; margin-left:6px; }
</style></head>
<body>
<nav>
<div class="brand">Qraft Technologies</div>
<div class="navlinks"><span>About Us</span><span>Businesses</span><span>News</span><span>Careers</span></div>
<button class="ghost">Learn More</button>
</nav>
<div class="hero">
<h1>Transforming Investing with AI</h1>
<h2>Founded in 2016 and backed by SoftBank Group</h2>
</div>
<div class="news">
<div class="card"><h3>Barron's</h3><p>"An AI-driven approach reshaping how institutions manage risk and allocation."</p></div>
<div class="card"><h3>Milestone</h3><span class="chip blue">AI-Enhanced ETF</span><span class="chip amber">Series C</span></div>
<div class="card"><h3>Global Offices</h3><p>Seoul · Tokyo · New York — engineering-led financial infrastructure.</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px; background: #003da5; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px; background: #ffffff; color: #003da5;
border: 1px solid #003da5; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #333333;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #003da5; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#1a1a1a; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #d9d9d9;}
.logo{font-size:20px;font-weight:700;color:#1a1a1a;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;}
.navlinks .active{color:#003da5;border-bottom:2px solid #003da5;padding-bottom:24px;}
.hero{height:220px;background:#f5f5f5;display:flex;align-items:center;padding:0 36px;}
.herotext{width:460px;}
.herotext h1{font-size:28px;font-weight:700;margin:0 0 10px;letter-spacing:-.3px;}
.herotext p{font-size:15px;color:#333;margin:0 0 18px;}
.cta{display:inline-block;background:#003da5;color:#fff;font-size:14px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;padding:12px 24px;border-radius:4px;}
.heroimg{margin-left:auto;width:220px;height:160px;position:relative;}
.carabiner{position:absolute;right:40px;top:10px;width:90px;height:130px;border:14px solid #003da5;border-radius:50% 50% 50% 8%;}
.grid{display:flex;gap:16px;padding:20px 36px;}
.card{width:200px;border:1px solid #d9d9d9;padding:12px;}
.thumb{height:96px;background:#f5f5f5;margin-bottom:10px;}
.ptitle{font-size:14px;font-weight:600;}
.pprice{font-size:14px;color:#333;margin-top:4px;}
.badge{display:inline-block;background:#003da5;color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;margin-top:6px;border-radius:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#1a1a1a;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Petzl</div>
<div class="navlinks"><div class="active">Climbing</div><div>Headlamps</div><div>Work at Height</div><div>Rescue</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Equipment proven on the wall.</h1>
<p>Precision hardware for climbers, technicians, and rescue professionals.</p>
<div class="cta">Shop Gear</div>
</div>
<div class="heroimg"><div class="carabiner"></div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003da5,#f5f5f5)"></div><div class="ptitle">GRIGRI Belay Device</div><div class="pprice">$109.95</div><div class="badge">New</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f5f5f5,#003da5)"></div><div class="ptitle">ACTIK CORE Headlamp</div><div class="pprice">$74.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003da5,#333)"></div><div class="ptitle">SIROCCO Helmet</div><div class="pprice">$129.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#333,#003da5)"></div><div class="ptitle">VOLTA Dynamic Rope</div><div class="pprice">$219.95</div></div>
</div>
<div class="footer"><span>© Petzl · Vertical World Since 1975</span><span>Find a Dealer</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafdff; color: #232527;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafdff; color: #232527;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #232527; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8d9398; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.2px; background: #3561ff; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.2px; background: #fafdff; color: #232527;
border: 1px solid #3561ff; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafdff; color: #232527;
border: 1px solid #c4c7c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d9398; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffd900; color: #232527;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafdff; font-family:'Outfit',-apple-system,system-ui,sans-serif; color:#1c1d1f; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e9ecee;}
.logo{font-size:20px;font-weight:600;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;letter-spacing:0.2px;text-transform:uppercase;color:#8d9398;}
.navlinks span:first-child{color:#3561ff;}
.hero{height:230px;background:#232527;display:flex;align-items:center;padding:0 40px;}
.herotext{width:420px;}
h1{font-size:36px;font-weight:600;letter-spacing:-0.3px;color:#fff;margin:0 0 12px;}
.sub{font-size:16px;color:#d3d7d9;margin:0 0 20px;max-width:340px;}
.cta{display:inline-block;background:#3561ff;color:#fff;font-size:15px;font-weight:500;padding:14px 32px;border-radius:8px;}
.mouse{width:160px;height:150px;position:relative;margin-left:100px;}
.mouse .body{position:absolute;left:40px;top:15px;width:80px;height:110px;border-radius:40px 40px 24px 24px;background:linear-gradient(160deg,#3561ff,#1dfef2);}
.sec{padding:22px 40px 0;}
.sectitle{font-size:20px;font-weight:600;margin:0 0 14px;}
.grid{display:flex;gap:16px;}
.card{width:210px;background:#fff;border-radius:12px;}
.thumb{height:100px;border-radius:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;padding:2px 8px;border-radius:4px;color:#232527;}
.pname{font-size:16px;font-weight:500;margin:10px 0 4px;}
.pprice{font-size:16px;font-weight:500;}
</style>
<div class="nav">
<div class="logo">Pwnage</div>
<div class="navlinks"><span>Mice</span><span>Keyboards</span><span>Mousepads</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Precision, engineered.</h1>
<p class="sub">Performance gaming gear built like precision instruments, not esports spectacle.</p>
<div class="cta">Shop Mice</div>
</div>
<div class="mouse"><div class="body"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3561ff,#121212)"><span class="badge" style="background:#1dfef2">New</span></div><div class="pname">Stormbreaker Wireless</div><div class="pprice">$89.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8500ff,#121212)"><span class="badge" style="background:#8500ff;color:#fff">Pre-Order</span></div><div class="pname">Ultra Custom Ergo</div><div class="pprice">$119.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8d9398,#121212)"><span class="badge" style="background:#ffd900">Sale</span></div><div class="pname">Speed Mousepad XL</div><div class="pprice">$24.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffbf0; color: #091727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffbf0; color: #091727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #091727; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; background: #003399; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; background: #fffbf0; color: #091727;
border: 1px solid #003399; border-radius: 4px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fffbf0; color: #111111;
border: 1px solid #c2c2be; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; background: #003399; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fffbf0; color:#111111; box-sizing:border-box;
font-family:Tahoma,'Trebuchet MS',Geneva,Verdana,sans-serif; }
* { box-sizing:border-box; }
nav { height:48px; background:#fffbf0; border-bottom:2px solid #091727; display:flex; align-items:center;
justify-content:space-between; padding:0 28px; }
.brand { font-size:18px; font-weight:700; color:#091727; }
.navlinks { display:flex; gap:6px; font-size:14px; font-weight:700; color:#091727; }
.navlinks span { padding:8px 14px; }
.navlinks span.active { text-decoration:underline; }
.layout { display:flex; padding:14px 28px; gap:20px; }
.sidebar { width:180px; flex-shrink:0; background:#f5f0e0; border-radius:4px; padding:14px; }
.sidebar h4 { margin:0 0 8px; font-size:15px; color:#091727; }
.sidebar .opt { font-size:13px; color:#111111; padding:5px 0; border-bottom:1px solid #e0e0e0; }
.sidebar .opt:last-child { border-bottom:none; }
.main { flex:1; }
.main h2 { font-size:20px; font-weight:700; color:#091727; margin:0 0 12px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { background:#fffbf0; border-radius:4px; padding:8px; position:relative; }
.card .art { height:96px; background:linear-gradient(150deg,#091727,#003399); border-radius:4px; margin-bottom:8px; position:relative; }
.badge { position:absolute; top:6px; left:6px; background:#003399; color:#fff; font-size:11px; font-weight:700; padding:2px 6px; border-radius:2px; }
.card .title { font-size:13px; font-weight:700; color:#091727; margin-bottom:3px; }
.card .price { font-size:14px; color:#003399; font-weight:700; }
.rowB { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px; }
footer { position:absolute; bottom:0; left:0; right:0; height:110px; background:#111111; color:#fff; display:flex;
align-items:center; justify-content:space-between; padding:0 28px; }
footer .col { font-size:12px; line-height:1.8; }
footer .col b { display:block; margin-bottom:3px; }
.wrap { position:relative; height:640px; }
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="brand">Discotek Media</div>
<div class="navlinks"><span class="active">HOME</span><span>NEW RELEASES</span><span>CATALOG</span><span>ABOUT</span><span>CONTACT</span></div>
</nav>
<div class="layout">
<div class="sidebar">
<h4>Categories</h4>
<div class="opt">Anime</div>
<div class="opt">Tokusatsu</div>
<div class="opt">Cult Films</div>
<div class="opt">Live-Action TV</div>
<div class="opt">Soundtracks</div>
<h4 style="margin-top:14px;">Format</h4>
<div class="opt">Blu-ray</div>
<div class="opt">DVD</div>
<div class="opt">Steelbook</div>
</div>
<div class="main">
<h2>New Releases</h2>
<div class="grid">
<div class="card"><div class="art"><span class="badge">NEW</span></div><div class="title">Galaxy Rangers Vol. 1</div><div class="price">$34.99</div></div>
<div class="card"><div class="art"><span class="badge">PRE-ORDER</span></div><div class="title">Iron Fang Complete Series</div><div class="price">$59.99</div></div>
<div class="card"><div class="art"></div><div class="title">Moonlit Detective S1</div><div class="price">$29.99</div></div>
<div class="card"><div class="art"><span class="badge">NEW</span></div><div class="title">Crimson Steel OVA</div><div class="price">$24.99</div></div>
</div>
<div class="rowB">
<div class="card"><div class="art"></div><div class="title">Neon Harbor Movie</div><div class="price">$19.99</div></div>
<div class="card"><div class="art"></div><div class="title">Starfall Chronicles</div><div class="price">$44.99</div></div>
<div class="card"><div class="art"><span class="badge">PRE-ORDER</span></div><div class="title">Wandering Blade Box Set</div><div class="price">$79.99</div></div>
<div class="card"><div class="art"></div><div class="title">Tokyo Static OST</div><div class="price">$16.99</div></div>
</div>
</div>
</div>
<footer>
<div class="col"><b>Discotek Media</b>Physical media for the discerning collector.</div>
<div class="col"><b>Shop</b>New Releases<br>Full Catalog</div>
<div class="col"><b>Company</b>About Us<br>Contact</div>
<div class="col"><b>Legal</b>Terms<br>Privacy Policy</div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0063d1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0063d1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b3e5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #333333; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0063d1; color: #ffffff;
border: 1px solid #333333; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0063d1; color: #f5f5f5;
border: 1px solid #277ad7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b3e5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #085bb8; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbfbfb; color:#333333; box-sizing:border-box;
font-family:"Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { position:relative; width:960px; height:640px; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
background:#fbfbfb; border-bottom:1px solid #e5e7eb; }
.brand { font-size:18px; font-weight:700; color:#333333; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:14px; color:#384e69; }
.navlinks span.active { color:#566881; font-weight:500; }
.signup { background:#0063d1; color:#fff; font-size:14px; font-weight:500; border-radius:4px; padding:8px 16px; height:36px;
display:flex; align-items:center; }
.hero { padding:34px 40px 18px; text-align:center; }
.hero h1 { font-size:30px; font-weight:500; line-height:1.4; margin:0 0 8px; color:#333333; }
.hero p { font-size:14px; color:#8596ad; margin:0 0 18px; }
.searchbar { max-width:520px; margin:0 auto; background:#ffffff; border-radius:6px; border:1px solid #e5e7eb;
padding:12px 18px; font-size:14px; color:#8596ad; text-align:left;
box-shadow: rgb(242,242,242) 2px 3px 0px 0px; }
.tiles { display:flex; gap:10px; padding:18px 40px 4px; justify-content:center; flex-wrap:wrap; }
.tile { background:#edf8ff; color:#0063d1; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:400; }
.sect { padding:18px 40px 8px; font-size:15px; font-weight:500; color:#333333; }
.cards { display:flex; gap:16px; padding:0 40px; }
.jcard { flex:1; background:#ffffff; border:1px solid #e5e7eb; border-radius:8px; padding:16px;
box-shadow: rgb(242,242,242) 2px 3px 0px 0px; }
.jcard .logo { width:40px; height:40px; border-radius:9999px; margin-bottom:10px; }
.jc1 .logo { background:linear-gradient(135deg,#8fc7ff,#0063d1); }
.jc2 .logo { background:linear-gradient(135deg,#9adfc4,#1fa878); }
.jc3 .logo { background:linear-gradient(135deg,#ffcf9a,#ff8a3d); }
.jcard .title { font-size:15px; font-weight:700; color:#333333; margin-bottom:3px; }
.jcard .co { font-size:12px; color:#8596ad; margin-bottom:10px; }
.jcard .tagrow { display:flex; gap:6px; flex-wrap:wrap; }
.jtag { background:#edf8ff; color:#0063d1; border-radius:8px; padding:3px 9px; font-size:11px; }
.jtag.n { background:#eceff6; color:#566881; border-radius:4px; }
.footerpanel { position:absolute; left:0; right:0; bottom:0; height:118px; background:#eceff6;
padding:18px 40px; display:flex; align-items:center; justify-content:space-between; }
.fp-left { font-size:13px; color:#384e69; line-height:1.6; }
.fp-left b { color:#333333; font-weight:700; }
.fp-btn { background:#ffffff; color:#0063d1; border:1px solid #e5e7eb; border-radius:4px; padding:9px 18px;
font-size:13px; font-weight:500; }
</style></head>
<body>
<div class="app">
<nav>
<span class="brand">Yourator</span>
<div class="navlinks">
<span class="active">Jobs</span>
<span>Companies</span>
<span>Resume Builder</span>
<span>Career Guide</span>
</div>
<span class="signup">Sign up</span>
</nav>
<div class="hero">
<h1>Expand your job search horizon,<br>find your ideal role</h1>
<p>Curated startup and tech roles across the region</p>
<div class="searchbar">Frontend engineer · Taipei</div>
</div>
<div class="tiles">
<span class="tile">Startup Internships</span>
<span class="tile">New Grad Friendly</span>
<span class="tile">Senior Roles</span>
<span class="tile">DEI Hiring</span>
<span class="tile">Overseas Track</span>
</div>
<div class="sect">Recommended for you</div>
<div class="cards">
<div class="jcard jc1">
<div class="logo"></div>
<div class="title">Frontend Engineer</div>
<div class="co">Northline Labs · Taipei</div>
<div class="tagrow"><span class="jtag">React</span><span class="jtag n">Hybrid</span></div>
</div>
<div class="jcard jc2">
<div class="logo"></div>
<div class="title">Product Designer</div>
<div class="co">Harbor Studio · Hsinchu</div>
<div class="tagrow"><span class="jtag">Figma</span><span class="jtag n">Senior</span></div>
</div>
<div class="jcard jc3">
<div class="logo"></div>
<div class="title">Growth Marketer</div>
<div class="co">Fieldtrip Inc. · Remote</div>
<div class="tagrow"><span class="jtag">Growth</span><span class="jtag n">New Grad</span></div>
</div>
</div>
<div class="footerpanel">
<div class="fp-left">Build a resume that gets noticed.<br><b>Free resume builder</b> for every Yourator member.</div>
<span class="fp-btn">Start building</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #313131; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #f5f5f5; color: #757575;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#313131; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; }
.brand { color:#ffffff; font-size:18px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#ffffff; opacity:0.82; font-size:14px; font-weight:500; }
.cart { display:flex; align-items:center; gap:8px; color:#ffffff; font-size:13px; }
.cart-dot { width:20px; height:20px; border-radius:999px; background:#ffffff; color:#313131;
display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
main { display:flex; height:576px; }
.cover-col { width:300px; background:#f5f5f5; display:flex; align-items:center; justify-content:center;
border-right:1px solid #e8e8e8; }
.cover { width:190px; height:280px; border-radius:8px; position:relative; overflow:hidden;
background:linear-gradient(160deg,#313131 0%,#4a4a4a 55%,#1a1a1a 100%); box-shadow:0 12px 30px rgba(0,0,0,0.18); }
.cover::before { content:''; position:absolute; left:0; top:0; width:14px; height:100%; background:rgba(255,255,255,0.08); }
.cover .spine-title { position:absolute; top:26px; left:26px; right:20px; color:#fff; font-size:20px; font-weight:700;
line-height:1.2; letter-spacing:-0.3px; }
.cover .spine-author { position:absolute; bottom:26px; left:26px; color:rgba(255,255,255,0.75); font-size:12px; font-weight:500; }
.waveform { display:flex; align-items:flex-end; gap:2px; height:26px; margin-top:14px; }
.waveform i { width:3px; background:#a0a0a0; display:block; border-radius:2px; }
.info-col { flex:1; padding:32px 36px; display:flex; flex-direction:column; gap:14px; }
.badge-row { display:flex; gap:8px; }
.badge { font-size:11px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase;
background:#f5f5f5; color:#757575; border-radius:4px; padding:2px 8px; }
.badge-new { background:#2e7d32; color:#fff; }
h1 { font-size:28px; font-weight:700; margin:0; letter-spacing:-0.25px; line-height:1.25; }
.author { font-size:15px; color:#4a4a4a; margin:0; }
.narrator { font-size:13px; color:#757575; margin:0; }
.rating { display:flex; align-items:center; gap:6px; font-size:13px; color:#4a4a4a; }
.stars { color:#313131; font-size:14px; letter-spacing:2px; }
.desc { font-size:14px; color:#4a4a4a; line-height:1.55; max-width:480px; margin:4px 0 0; }
.meta-row { display:flex; gap:24px; font-size:12px; color:#757575; margin-top:2px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:6px; }
.price { font-size:24px; font-weight:700; color:#313131; }
.price-note { font-size:12px; color:#757575; }
.actions { display:flex; gap:12px; margin-top:8px; }
.btn-primary { background:#313131; color:#fff; border:none; border-radius:8px; padding:12px 24px;
font-weight:600; font-size:16px; height:48px; display:flex; align-items:center; }
.btn-secondary { background:#ffffff; color:#313131; border:2px solid #313131; border-radius:8px;
padding:11px 23px; font-weight:600; font-size:16px; height:48px; display:flex; align-items:center; }
.related { border-top:1px solid #e8e8e8; padding:16px 36px; display:flex; gap:16px; align-items:center; }
.related-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:#757575; width:110px; }
.mini { display:flex; gap:8px; align-items:center; }
.mini-cover { width:38px; height:56px; border-radius:4px; }
.mc1 { background:linear-gradient(160deg,#5a5a5a,#2a2a2a); }
.mc2 { background:linear-gradient(160deg,#8a8a8a,#4a4a4a); }
.mc3 { background:linear-gradient(160deg,#3a3a3a,#151515); }
.mini-info p { margin:0; font-size:12px; }
.mini-info .t { font-weight:600; color:#313131; }
.mini-info .p { color:#757575; }
</style></head>
<body>
<nav>
<p class="brand">Audiobooks Com</p>
<div class="navlinks"><span>Browse</span><span>Bestsellers</span><span>Originals</span><span>Membership</span></div>
<div class="cart"><div class="cart-dot">3</div><span>Library</span></div>
</nav>
<main>
<div class="cover-col">
<div class="cover">
<div class="spine-title">The Quiet<br>Correspondence</div>
<div class="spine-author">Margaret Colby</div>
</div>
</div>
<div class="info-col">
<div class="badge-row"><span class="badge badge-new">New</span><span class="badge">Fiction</span><span class="badge">Unabridged</span></div>
<h1>The Quiet Correspondence</h1>
<p class="author">by Margaret Colby</p>
<p class="narrator">Narrated by James Whitfield · 11 hr 42 min</p>
<div class="rating"><span class="stars">★★★★☆</span><span>4.3 (2,108 ratings)</span></div>
<p class="desc">A decades-spanning story told through letters never sent — a librarian's quiet inheritance of secrets she never asked to keep.</p>
<div class="meta-row"><span>Audiobook</span><span>English</span><span>Released Mar 2026</span></div>
<div class="price-row"><span class="price">$19.99</span><span class="price-note">or 1 credit</span></div>
<div class="actions">
<div class="btn-primary">Add to Library</div>
<div class="btn-secondary">Free with Trial</div>
</div>
</div>
</main>
<div class="related">
<span class="related-label">You may also like</span>
<div class="mini"><div class="mini-cover mc1"></div><div class="mini-info"><p class="t">Harbor Light</p><p class="p">$17.99</p></div></div>
<div class="mini"><div class="mini-cover mc2"></div><div class="mini-info"><p class="t">The Last Ferry</p><p class="p">$15.49</p></div></div>
<div class="mini"><div class="mini-cover mc3"></div><div class="mini-info"><p class="t">Winter Notation</p><p class="p">$21.00</p></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffc32d; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffc32d; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c611e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffc32d; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffc32d; color: #111111;
border: 1px solid #d9a729; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c611e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ffcd4f; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:Pretendard,Lato,"Noto Sans KR",sans-serif; }
* { box-sizing:border-box; }
header { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#ffffff; }
.brand { font-size:19px; font-weight:600; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:24px; font-size:16px; font-weight:500; color:#2e303b; }
.navlinks .active { color:#000000; font-weight:700; }
.hactions { display:flex; gap:10px; }
.btn-outline { border:1px solid #d0d8dc; border-radius:10px; padding:0 18px; height:38px; display:flex; align-items:center; font-size:13px; color:#2e303b; }
main { padding:20px 32px; background:#f6f6f6; height:calc(100% - 64px); }
.section-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.section-head h1 { font-size:24px; font-weight:600; letter-spacing:-0.3px; margin:0; }
.section-head span { font-size:13px; color:#6a6a6a; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#ffffff; border-radius:8px; padding:16px; display:flex; flex-direction:column; gap:8px; }
.tags { display:flex; gap:6px; }
.tag { background:#ffc32d; color:#000000; font-size:12px; font-weight:600; padding:3px 6px; }
.tag.blue { background:#2054ae; color:#ffffff; border-radius:4px; }
.card h4 { font-size:16px; font-weight:600; letter-spacing:-0.2px; margin:6px 0 0; }
.card .meta { font-size:13px; color:#6a6a6a; }
.bar-track { height:6px; background:#e8ecef; border-radius:4px; overflow:hidden; margin-top:6px; }
.bar-fill { height:100%; background:#2054ae; }
.card .cta { margin-top:auto; height:38px; border-top:1px solid #f0f0f0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; color:#000000; }
.dark-cta { margin-top:20px; background:#000000; border-radius:8px; padding:20px 26px; display:flex; align-items:center; justify-content:space-between; color:#ffffff; }
.dark-cta h3 { font-size:20px; font-weight:600; margin:0 0 4px; letter-spacing:-0.2px; }
.dark-cta p { font-size:13px; color:rgba(255,255,255,0.7); margin:0; }
.pill-btn { background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.2); border-radius:30px; padding:0 22px; height:44px; display:flex; align-items:center; font-size:14px; }
</style></head>
<body>
<header>
<div class="brand">PeopleFund</div>
<div class="navlinks"><span class="active">Invest</span><span>Loans</span><span>How it works</span></div>
<div class="hactions">
<div class="btn-outline">Sign up</div>
<div class="btn-outline">Log in</div>
</div>
</header>
<main>
<div class="section-head">
<h1>Featured investment products</h1>
<span>Updated 4 minutes ago</span>
</div>
<div class="grid">
<div class="card">
<div class="tags"><span class="tag">HOT</span><span class="tag blue">94.7% funded</span></div>
<h4>Seoul · Yangcheon-gu Residence Bond</h4>
<div class="meta">Term 6mo · Est. return 9.8%</div>
<div class="bar-track"><div class="bar-fill" style="width:95%"></div></div>
<div class="cta">View Product</div>
</div>
<div class="card">
<div class="tags"><span class="tag">Near Close</span><span class="tag blue">95.1% funded</span></div>
<h4>Pyeongtaek · Dokgok-dong Property</h4>
<div class="meta">Term 4mo · Est. return 10.2%</div>
<div class="bar-track"><div class="bar-fill" style="width:95%"></div></div>
<div class="cta">View Product</div>
</div>
<div class="card">
<div class="tags"><span class="tag">NEW</span><span class="tag blue">18.4% funded</span></div>
<h4>Incheon · Namdong Industrial Loan</h4>
<div class="meta">Term 12mo · Est. return 8.5%</div>
<div class="bar-track"><div class="bar-fill" style="width:18%"></div></div>
<div class="cta">View Product</div>
</div>
<div class="card">
<div class="tags"><span class="tag">NOTICE</span><span class="tag blue">61.0% funded</span></div>
<h4>Busan · Haeundae Retail Bridge</h4>
<div class="meta">Term 8mo · Est. return 9.1%</div>
<div class="bar-track"><div class="bar-fill" style="width:61%"></div></div>
<div class="cta">View Product</div>
</div>
<div class="card">
<div class="tags"><span class="tag">HOT</span><span class="tag blue">88.3% funded</span></div>
<h4>Daejeon · Yuseong Office Fitout</h4>
<div class="meta">Term 6mo · Est. return 9.4%</div>
<div class="bar-track"><div class="bar-fill" style="width:88%"></div></div>
<div class="cta">View Product</div>
</div>
<div class="card">
<div class="tags"><span class="tag">NEW</span><span class="tag blue">7.2% funded</span></div>
<h4>Gwangju · Sangmu District Loan</h4>
<div class="meta">Term 10mo · Est. return 8.9%</div>
<div class="bar-track"><div class="bar-fill" style="width:7%"></div></div>
<div class="cta">View Product</div>
</div>
</div>
<div class="dark-cta">
<div>
<h3>Questions about investing?</h3>
<p>Our team is ready to help — don't hesitate to ask.</p>
</div>
<div class="pill-btn">1600-0000 · FAQ</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #1a1919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #1a1919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; margin: 0; color: #1a1919; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7a99ac; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #789fbb; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f8f8f8; color: #1a1919;
border: 1px solid #789fbb; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f8f8; color: #1a1919;
border: 1px solid #c0c0c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a99ac; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #001d40; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f8f8; color:#242833; box-sizing:border-box;
font-family:'Assistant', 'Open Sans', sans-serif; }
* { box-sizing:border-box; }
nav { height:80px; background:#1a1919; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.brand { color:#fff; font-family:'ff-good-headline-web-pro-con','Trade Gothic Next',sans-serif; font-weight:700;
font-size:20px; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#fff; font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.navlinks span.on { color:#789fbb; }
.hero { height:230px; background:#1a1919; display:flex; align-items:center; padding:0 32px;
background:linear-gradient(rgba(26,25,25,0.4),rgba(26,25,25,0.4)), radial-gradient(circle at 75% 50%,#334fb4,#001d40); }
.hero h1 { color:#fff; font-family:'ff-good-headline-web-pro-con',sans-serif; font-weight:700; font-size:42px;
letter-spacing:-0.5px; margin:0 0 12px; }
.btn { display:inline-block; width:fit-content; background:#789fbb; color:#fff; font-size:14px; font-weight:600;
letter-spacing:0.5px; text-transform:uppercase; padding:12px 24px; border-radius:8px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:16px 32px; }
.card { background:#fff; border-radius:12px; overflow:hidden; }
.cover { height:110px; }
.info { padding:10px 14px 14px; }
.t { font-size:16px; font-weight:600; margin:0 0 6px; }
.p { font-size:16px; color:#242833; }
.badge { display:inline-block; background:#001d40; color:#fff; font-size:10px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; padding:4px 10px; border-radius:9999px; margin-bottom:8px; }
footer { position:absolute; bottom:0; left:0; right:0; height:56px; background:#1a1919; color:#7a99ac;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
</style></head>
<body>
<nav>
<div class="brand">Far Bank</div>
<div class="navlinks"><span class="on">Rods & Reels</span><span>Fly Line</span><span>Apparel</span><span>Journal</span></div>
</nav>
<div class="hero"><h1>Precision over flash</h1><span class="btn">Shop Fly Rods</span></div>
<div class="grid">
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#789fbb,#5a8aa8);"></div>
<div class="info"><span class="badge">New</span><p class="t">Helios Fly Rod 9wt</p><p class="p">$895.00</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#334fb4,#1f2f6e);"></div>
<div class="info"><span class="badge" style="background:#334fb4;">Sale</span><p class="t">Sage Trout Reel</p><p class="p">$425.00</p></div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#242833,#121419;);"></div>
<div class="info"><p class="t">Weight-Forward Fly Line</p><p class="p">$89.00</p></div></div>
</div>
<footer><span>© Far Bank — Fly fishing, engineered</span><span>Guides · Warranty · Contact</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d2124;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d2124;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #1d2124; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.38; margin: 0; color: #818182; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #3e84b6; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #3e84b6;
border: 1px solid #3e84b6; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1d2124;
border: 1px solid #c6c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #818182; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.2px; background: #b1dfbb; color: #155724;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{
width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;
background:#ffffff;font-family:Arial,'Helvetica Neue',Helvetica,-apple-system,BlinkMacSystemFont,sans-serif;
color:#383d41;
}
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:54px;background:#004085;display:flex;align-items:center;justify-content:space-between;padding:0 22px;}
.logo{color:#fff;font-weight:700;font-size:18px;}
.logo span{color:#8cc63f;}
.navlinks{display:flex;gap:18px;}
.navlinks span{color:#fff;font-size:12px;font-weight:600;}
.quotebtn{background:#8cc63f;color:#1d2124;font-size:12px;font-weight:700;padding:8px 16px;border-radius:4px;}
.alertbar{background:#abdde5;color:#0c5460;font-size:11px;padding:6px 22px;border-bottom:1px solid #86cfda;}
.hero{background:#f0f4f7;padding:22px;display:flex;gap:20px;}
.quoteBox{flex:1;background:#ffffff;border:1px solid #dae0e5;border-radius:4px;padding:16px;}
.quoteBox h1{font-size:22px;color:#1d2124;margin:0 0 4px;}
.quoteBox p{font-size:12px;color:#818182;margin:0 0 12px;}
.field{display:flex;gap:8px;margin-bottom:8px;}
.field div{flex:1;background:#f0f4f7;border:1px solid #dae0e5;border-radius:4px;font-size:11px;color:#818182;padding:8px 10px;}
.calcbtn{background:#3e84b6;color:#fff;font-size:12px;font-weight:700;padding:9px 20px;border-radius:4px;display:inline-block;}
.statusPanel{width:260px;background:#ffffff;border:1px solid #dae0e5;border-radius:4px;padding:12px;}
.statusPanel h3{font-size:12px;color:#1d2124;margin:0 0 8px;}
.statusrow{display:flex;justify-content:space-between;font-size:11px;padding:6px 0;border-bottom:1px solid #ececf6;}
.pill{border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700;}
.pill.ok{background:#b1dfbb;color:#155724;}
.pill.warn{background:#ffe8a1;color:#856404;}
.pill.info{background:#abdde5;color:#0c5460;}
.section{padding:16px 22px 0;}
.sectitle{font-size:14px;font-weight:700;color:#1d2124;margin:0 0 10px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.card{border:1px solid #dae0e5;border-radius:4px;background:#fff;padding:8px;}
.photo{aspect-ratio:1/1;background:linear-gradient(150deg,#ececf6,#dae0e5);border-radius:4px;position:relative;margin-bottom:6px;}
.photo .stack{position:absolute;bottom:14%;left:20%;right:20%;height:16px;background:#3e84b6;box-shadow:0 -6px 0 #5a9ac9,0 -12px 0 #7cb1d6;}
.ctitle{font-size:12px;font-weight:700;color:#1d2124;}
.cprice{font-size:12px;color:#3e84b6;font-weight:700;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#004085;color:#dae0e5;font-size:11px;padding:10px 22px;display:flex;justify-content:space-between;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Gotprint<span>.</span></div>
<div class="navlinks"><span>Business Cards</span><span>Postcards</span><span>Banners</span><span>Stickers</span><span>Apparel</span></div>
<div class="quotebtn">Get A Quote</div>
</div>
<div class="alertbar">✓ Proof approved — your job enters production within 2 hours</div>
<div class="hero">
<div class="quoteBox">
<h1>Fast quotes. Faster proofs.</h1>
<p>Upload your file, pick your stock, and we'll have a proof back before your coffee's cold.</p>
<div class="field"><div>Product: Business Cards</div><div>Quantity: 500</div><div>Stock: 16pt Matte</div></div>
<div class="calcbtn">Calculate Price — $34.99</div>
</div>
<div class="statusPanel">
<h3>Order #GP-88214 Status</h3>
<div class="statusrow"><span>File Uploaded</span><span class="pill ok">Done</span></div>
<div class="statusrow"><span>Proof Approved</span><span class="pill ok">Done</span></div>
<div class="statusrow"><span>In Production</span><span class="pill info">Active</span></div>
<div class="statusrow"><span>Shipping Label</span><span class="pill warn">Pending</span></div>
</div>
</div>
<div class="section">
<div class="sectitle">Popular Print Products</div>
<div class="grid">
<div class="card"><div class="photo"><div class="stack"></div></div><div class="ctitle">Business Cards</div><div class="cprice">from $9.99</div></div>
<div class="card"><div class="photo"><div class="stack"></div></div><div class="ctitle">Vinyl Banners</div><div class="cprice">from $24.99</div></div>
<div class="card"><div class="photo"><div class="stack"></div></div><div class="ctitle">Die-Cut Stickers</div><div class="cprice">from $14.99</div></div>
<div class="card"><div class="photo"><div class="stack"></div></div><div class="ctitle">Postcards 4x6</div><div class="cprice">from $19.99</div></div>
</div>
</div>
<div class="footer"><span>© Gotprint</span><span>Free Ground Shipping on Qualifying Orders</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #d6c9b9; color: #444444;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #d6c9b9; color: #444444;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #cd783f; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #e8ddd0; color: #444444;
border: 1px solid #cd783f; border-radius: 8px;
padding: 10px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #e8ddd0; color: #636051;
border: 1px solid #b2a89c; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #98937d; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#d6c9b9; font-family:Arial,Helvetica,sans-serif; color:#636051; }
*{box-sizing:border-box;}
.nav{height:56px;background:#d6c9b9;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.logo{font-size:19px;font-weight:700;color:#444444;}
.navlinks{display:flex;gap:18px;font-size:14px;font-weight:600;color:#444444;}
.navlinks .on{border-bottom:2px solid #cd783f;padding-bottom:16px;}
.hero{height:150px;display:flex;align-items:center;padding:0 28px;justify-content:center;text-align:center;}
.h1{font-size:28px;font-weight:700;color:#444444;max-width:520px;}
.strip{display:flex;gap:8px;padding:12px 28px;}
.chip{background:#e8ddd0;border:1px solid #aaaaaa;border-radius:9999px;font-size:12px;padding:6px 14px;color:#444444;}
.chip.on{background:#cd783f;color:#fff;border-color:#cd783f;}
.grid{display:flex;gap:12px;padding:6px 28px 0;}
.card{width:150px;background:#e8ddd0;border-radius:8px;padding:12px;}
.thumb{height:96px;border-radius:4px;margin-bottom:8px;}
.ptitle{font-size:14px;font-weight:600;color:#444444;font-family:Arial,Helvetica,sans-serif;}
.desc{font-family:'Times New Roman',serif;font-size:12px;color:#636051;font-style:italic;margin:4px 0;}
.pprice{font-size:15px;font-weight:600;color:#cd783f;}
.badge{display:inline-block;background:#98937d;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 6px;border-radius:4px;margin-bottom:4px;}
.badge.rare{background:#cd783f;}
.footer{position:absolute;bottom:0;left:0;right:0;height:48px;background:#4d4b3f;display:flex;align-items:center;justify-content:space-between;padding:0 28px;font-size:12px;color:#cdcee3;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Retro Games UK</div>
<div class="navlinks"><div class="on">All Platforms</div><div>NES</div><div>Mega Drive</div><div>Boxed</div></div>
</div>
<div class="hero"><div class="h1">A well-organised charity shop for retro games — orderly, slightly dusty, utterly sincere.</div></div>
<div class="strip">
<div class="chip on">NES</div><div class="chip">SNES</div><div class="chip">Mega Drive</div><div class="chip">Boxed</div><div class="chip">Loose</div>
</div>
<div class="grid">
<div class="card"><div class="badge rare">Rare</div><div class="thumb" style="background:linear-gradient(135deg,#cd783f,#4d4b3f)"></div><div class="ptitle">Boxed NES Bundle</div><div class="desc">Complete with manual</div><div class="pprice">£45.00</div></div>
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#98937d,#4d4b3f)"></div><div class="ptitle">Mega Drive Console</div><div class="desc">Two-controller set</div><div class="pprice">£62.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4d4b3f,#cd783f)"></div><div class="ptitle">SNES Cartridge Lot</div><div class="desc">Loose, tested working</div><div class="pprice">£28.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#cd783f,#98937d)"></div><div class="ptitle">Original Manual Set</div><div class="desc">Ten-title collection</div><div class="pprice">£15.00</div></div>
</div>
<div class="footer"><span>© Retro Games UK — thirty years in a cardboard box, cared for</span><span>Boxed · Loose · Rare</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #efefef; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #efefef; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #790002; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #efefef; color: #121212;
border: 1px solid #790002; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #efefef; color: #121212;
border: 1px solid #b8b8b8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #790002; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#efefef; color:#121212; box-sizing:border-box;
font-family:'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#232a39; }
.brand { font-size:16px; font-weight:700; color:#fff; margin:0; text-transform:uppercase; letter-spacing:0.5px; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:#fff; }
.navlinks span.on { color:#f4bf2a; }
.util { font-size:12px; color:#dcdcdc; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 64px); }
.stage { padding:24px; border-right:1px solid #d9d9da; display:flex; flex-direction:column; gap:10px; background:#2b374c; }
.panel { flex:1; position:relative; overflow:hidden; border-radius:8px; }
.panel::before { content:''; position:absolute; left:50%; top:50%; width:60%; height:60%; transform:translate(-50%,-50%) rotate(45deg); background:linear-gradient(135deg,#790002,#bd3d44); box-shadow:0 0 40px rgba(121,0,2,0.6); }
.panel::after { content:''; position:absolute; left:50%; top:50%; width:30%; height:30%; transform:translate(-50%,-50%); border-radius:50%; background:#f4bf2a; box-shadow:0 0 30px rgba(244,191,42,0.6); }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; background:#232a39; border-radius:8px; }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:12px; font-weight:500; letter-spacing:0.2px; color:#6a6a6a; }
h1 { margin:0; font-size:24px; font-weight:600; letter-spacing:-0.3px; }
.badge-row { display:flex; gap:6px; }
.badge-new { background:#f4bf2a; color:#121212; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:2px 8px; border-radius:4px; }
.badge-faction { background:#0074e0; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:2px 10px; border-radius:999px; }
.price { font-size:18px; font-weight:600; color:#790002; }
.pills { display:flex; gap:8px; flex-wrap:wrap; }
.pill { background:#efefef; border:1px solid #d9d9da; border-radius:999px; font-size:13px; padding:6px 14px; }
.pill.on { background:#790002; color:#fff; border-color:#790002; }
.desc { font-size:14px; color:#2a2c32; line-height:1.5; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#790002; color:#fff; border:none; border-radius:8px; font-size:16px; font-weight:600; }
.btn-secondary { width:150px; height:48px; background:#efefef; color:#121212; border:2px solid #dedede; border-radius:8px; font-size:16px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Blizzard Gear</p>
<div class="navlinks"><span class="on">Overwatch</span><span>Warcraft</span><span>Diablo</span><span>Collectibles</span></div>
<div class="util">Search Account Cart (3)</div>
</nav>
<main>
<div class="stage">
<div class="panel"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Overwatch 2 · Apparel</span>
<h1>Tracer Pulse Pilot Bomber Jacket</h1>
<div class="badge-row"><span class="badge-new">New</span><span class="badge-faction">Overwatch</span></div>
<div class="price">$89.99</div>
<div class="pills">
<span class="pill">S</span><span class="pill on">M</span><span class="pill">L</span><span class="pill">XL</span>
</div>
<p class="desc">Embroidered chronal accelerator patch on a heavyweight bomber shell — built for BlizzCon lines and cold-weather raids alike.</p>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Size Guide</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #899df1;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #899df1;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #899df1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #090302;
border: 1px solid #d5d5d5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #edf5f5; color: #108474;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>French Paper CO Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Figtree','Nunito Sans',sans-serif; background:#ffffff; color:#090302; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
.nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; border-bottom:1px solid #dedede; }
.logo { font-family:Times,'Times New Roman',serif; font-weight:700; font-size:21px; color:#23022e; }
.navlinks { display:flex; gap:24px; font-size:13px; font-weight:600; color:#121212; }
.navcta { background:#108474; color:#fff; font-weight:700; font-size:12.5px; padding:9px 18px; }
.hero { display:flex; padding:34px 40px; gap:36px; align-items:center; }
.hero-copy { flex:1; }
.hero h1 { font-family:Times,'Times New Roman',serif; font-size:44px; font-weight:400; letter-spacing:-.3px; line-height:1.15; margin:0 0 14px; color:#090302; }
.hero p { font-size:14.5px; color:#121212; line-height:1.6; max-width:400px; margin:0 0 18px; }
.btn-primary { background:#108474; color:#fff; font-weight:700; font-size:13.5px; padding:12px 22px; display:inline-block; }
.hero-visual { flex:1; height:200px; display:flex; align-items:center; justify-content:center; gap:6px; }
.swatch { width:38px; height:170px; border-radius:2px; }
.section { padding:20px 40px; flex:1; }
.section h2 { font-family:Times,serif; font-size:20px; font-weight:700; margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { background:#fafafa; border:1px solid #d5d5d5; padding:12px; }
.card .ph { height:70px; margin-bottom:8px; }
.card .name { font-weight:700; font-size:12.5px; margin-bottom:2px; }
.card .desc { font-size:10.5px; color:#7b7b7b; margin-bottom:8px; }
.card .price { font-weight:700; font-size:13px; color:#108474; }
.tag { display:inline-block; font-size:9px; font-weight:700; padding:2px 8px; border-radius:2px; color:#fff; margin-bottom:6px; }
</style>
<div class="page">
<div class="nav">
<div class="logo">French Paper CO</div>
<div class="navlinks"><span>Paper Lines</span><span>Envelopes</span><span>Swatch Books</span><span>Print Shop</span></div>
<div class="navcta">Order Swatches</div>
</div>
<div class="hero">
<div class="hero-copy">
<h1>Fourteen colors of<br>press-ready stock.</h1>
<p>High-chroma primaries against near-neutral substrate — a production designer's palette, more swatches, less gradient.</p>
<div class="btn-primary">Shop Paper</div>
</div>
<div class="hero-visual">
<div class="swatch" style="background:#108474;"></div>
<div class="swatch" style="background:#ec3e3d;"></div>
<div class="swatch" style="background:#fbcd0a;"></div>
<div class="swatch" style="background:#899df1;"></div>
<div class="swatch" style="background:#2c7e3f;"></div>
<div class="swatch" style="background:#23022e;"></div>
</div>
</div>
<div class="section">
<h2>Paper Lines</h2>
<div class="grid">
<div class="card"><span class="tag" style="background:#108474;">Pop-Tone</span><div class="ph" style="background:#108474;"></div><div class="name">Mill Teal 80lb</div><div class="desc">Cover Stock · Uncoated</div><div class="price">$12.99</div></div>
<div class="card"><span class="tag" style="background:#ec3e3d;">Speckletone</span><div class="ph" style="background:#ec3e3d;"></div><div class="name">Printer's Red 100lb</div><div class="desc">Text Weight</div><div class="price">$9.99</div></div>
<div class="card"><span class="tag" style="background:#899df1;">Construction</span><div class="ph" style="background:#899df1;"></div><div class="name">Periwinkle 70lb</div><div class="desc">Envelope Stock</div><div class="price">$8.49</div></div>
<div class="card"><span class="tag" style="background:#2c7e3f;">Speckletone</span><div class="ph" style="background:#2c7e3f;"></div><div class="name">Forest Green 80lb</div><div class="desc">Cover Stock</div><div class="price">$12.99</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 900; line-height: 1.05; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.0; background: #000000; color: #ffffff;
border: none; border-radius: 0px; padding: 6px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.0; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 0px;
padding: 6px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #fcdfe1; color: #e91d2a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#000000; box-sizing:border-box;
font-family:"Times New Roman", Times, serif; }
* { box-sizing:border-box; }
.frame { position:relative; width:960px; height:640px; background:#000000; padding:8px; }
.inner { position:relative; width:100%; height:100%; background:#ffffff; overflow:hidden; }
.topbanner { background:#000000; color:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:10px 14px; border-bottom:2px solid #000; }
.topbanner .tag { font-family:Arial, Helvetica, sans-serif; font-weight:700; font-size:15px; }
.topbanner .tag small { display:block; font-weight:400; font-size:10px; color:#cfcfcf; }
.stickers { display:flex; align-items:center; gap:8px; }
.buysticker { background:#fcc20f; border:1px solid #000; padding:3px 7px; font-family:Arial, Helvetica, sans-serif;
font-weight:700; font-size:11px; color:#000; }
.buysticker b { color:#6a26a4; }
.phone { color:#e91d2a; font-family:Arial, Helvetica, sans-serif; font-weight:700; font-size:14px; white-space:nowrap; }
.body2col { display:flex; height:calc(100% - 46px); }
.rail { width:27%; background:#fff; border-right:1px solid #000; padding:10px; }
.railgrid { display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; margin-bottom:10px; }
.railitem { font-family:Arial, Helvetica, sans-serif; font-weight:700; font-size:10px; text-transform:uppercase;
color:#000; border-bottom:1px solid #0000ee; padding-bottom:3px; }
.ctared { background:#e91d2a; color:#fff; border:1px solid #000; padding:10px; font-size:12px; line-height:1.35; }
.ctared b { display:block; font-family:Arial Black, Arial, sans-serif; font-size:15px; margin-bottom:4px; }
.main { flex:1; padding:10px 14px; overflow:hidden; }
.eyebrow { background:#8e8a25; color:#000; font-family:"Arial Black", Arial, sans-serif; font-weight:900;
font-size:20px; padding:8px 10px; margin-bottom:8px; text-transform:uppercase; }
.ribbon { border:1px solid #000; margin-bottom:8px; display:flex; }
.ribbon-title { background:#fff; border-right:1px solid #000; padding:5px 10px; font-family:Helvetica, Arial, sans-serif;
font-weight:700; font-size:12px; text-transform:uppercase; display:flex; align-items:center; white-space:nowrap; }
.ribbon-body { flex:1; padding:6px 10px; font-size:12px; line-height:1.35; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.r-sage { background:#b3bd95; }
.r-salmon { background:#d77a7a; }
.r-lime { background:#c0d4a7; }
.r-peri { background:#8c9ae0; }
.photonotch { width:46px; height:34px; background:repeating-linear-gradient(135deg,#000 0 4px,#fff 4px 8px);
border:1px solid #000; flex:0 0 auto; }
.newburst { background:#fcc20f; border:1px solid #000; font-family:Helvetica, Arial, sans-serif; font-weight:700;
font-size:9px; padding:2px 5px; transform:rotate(-10deg); position:absolute; margin-left:-6px; margin-top:-14px; }
.footerbar { position:absolute; bottom:0; left:0; right:0; height:34px; background:#fff; border-top:1px solid #000;
display:flex; align-items:center; justify-content:space-between; padding:0 14px; font-size:10px; color:#000; }
.iconnav { display:flex; gap:14px; font-family:Arial, Helvetica, sans-serif; font-weight:700; font-size:9px; text-transform:uppercase; }
.iconnav span { border-bottom:2px solid #8e8a25; padding-bottom:2px; }
.copy { color:#0000ee; text-decoration:underline; }
</style></head>
<body>
<div class="frame">
<div class="inner">
<div class="topbanner">
<div class="tag">BUILD YOUR OWN COMPUTER. ONLINE.<small>Dell (1996) — Reliable PC's for High-Performance Computing.</small></div>
<div class="stickers">
<div class="buysticker">BUY <b>a</b> DELL</div>
<div class="phone">1-800-213-DELL</div>
</div>
</div>
<div class="body2col">
<div class="rail">
<div class="railgrid">
<div class="railitem">Online Store</div>
<div class="railitem">Service</div>
<div class="railitem">Why Dell?</div>
<div class="railitem">Government</div>
<div class="railitem">Worldwide</div>
<div class="railitem">Order Status</div>
<div class="railitem">Company Info</div>
<div class="railitem">U.S. Careers</div>
</div>
<div class="ctared">
<b>At Dell (1996).com</b>
we'll help you find the right system, configure it, price it, and order it — direct from the people who build it.
</div>
</div>
<div class="main">
<div class="eyebrow">DIMENSION DESKTOPS</div>
<div class="ribbon">
<div class="newburst">NEW!</div>
<div class="ribbon-title">DIMENSION XPS</div>
<div class="ribbon-body r-peri">
<span>Our fastest desktop system, built for high-performance computing at home or the office.</span>
<div class="photonotch"></div>
</div>
</div>
<div class="ribbon">
<div class="ribbon-title">OPTIPLEX GX PRO</div>
<div class="ribbon-body r-salmon">
<span>Managed corporate desktops with the reliability IT departments demand.</span>
<div class="photonotch"></div>
</div>
</div>
<div class="ribbon">
<div class="ribbon-title">LATITUDE NOTEBOOKS</div>
<div class="ribbon-body r-sage">
<span>Take your office on the road — durable, long battery life, corporate-ready.</span>
<div class="photonotch"></div>
</div>
</div>
<div class="ribbon">
<div class="ribbon-title">OPTIPLEX G SERIES</div>
<div class="ribbon-body r-lime">
<span>The value leader — dependable computing for growing businesses.</span>
<div class="photonotch"></div>
</div>
</div>
</div>
</div>
<div class="footerbar">
<div class="iconnav"><span>Find</span><span>Home</span><span>Online Store</span><span>Service & Support</span></div>
<div><span class="copy">Copyright</span> Dell (1996) Corp. (Terms of Use)</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #409eff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #409eff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #409eff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #909399; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #910582; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #ffffff; color: #4a5565;
border: 1px solid #910582; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1d1d1d;
border: 1px solid #cfe7ff; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #909399; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #910582; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'MiSans-Normal','PingFang SC','Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#4a5565; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#282626;}
.logo{font-size:20px;font-weight:600;color:#fff;}
.logo span{color:#910582;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;color:#fff;}
.hero{height:230px;display:flex;background:#1d2129;position:relative;}
.accentbar{position:absolute;left:32px;top:44px;width:3px;height:120px;background:#910582;}
.herotext{width:50%;display:flex;flex-direction:column;justify-content:center;padding:0 32px 0 46px;}
.herotext h1{font-size:36px;font-weight:700;color:#fff;margin:0 0 8px;letter-spacing:-0.4px;line-height:1.15;}
.herotext p{font-size:15px;color:#909399;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#910582;color:#fff;font-size:16px;font-weight:500;padding:12px 24px;border-radius:8px;width:fit-content;}
.heroimg{width:50%;position:relative;background:radial-gradient(circle at 60% 45%,#282626,#1d2129 70%);}
.monitor{position:absolute;left:60px;top:44px;width:220px;height:130px;border-radius:6px;background:#000;border:6px solid #1d1d1d;}
.stand{position:absolute;left:150px;top:174px;width:40px;height:30px;background:#1d1d1d;}
.specrow{display:flex;gap:1px;background:#dcdfe6;margin:16px 32px 0;}
.speccell{flex:1;background:#1d2129;text-align:center;padding:16px 10px;position:relative;border-left:3px solid #910582;}
.specvalue{font-size:28px;font-weight:700;color:#910582;}
.specunit{font-size:12px;color:#909399;}
.speclabel{font-size:10px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;color:#909399;margin-top:4px;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:150px;background:#fff;border:1px solid #e4e7ed;border-radius:12px;padding:12px;position:relative;}
.thumb{height:80px;background:#f5f5f5;border-radius:8px;margin-bottom:8px;}
.pname{font-size:14px;font-weight:600;color:#1d1d1d;}
.badge{position:absolute;top:8px;left:8px;background:#910582;color:#fff;font-size:10px;font-weight:600;border-radius:4px;padding:2px 8px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#282626;color:#dcdfe6;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo"><span>K</span>Ktc</div>
<div class="navlinks"><div>Gaming</div><div>Professional</div><div>Curved</div><div>Support</div></div>
</div>
<div class="hero">
<div class="accentbar"></div>
<div class="herotext">
<h1>4K clarity. 144Hz precision.</h1>
<p>Display hardware engineered for the room where spec sheets win arguments.</p>
<div class="cta">Shop Monitors</div>
</div>
<div class="heroimg"><div class="monitor"></div><div class="stand"></div></div>
</div>
<div class="specrow">
<div class="speccell"><div class="specvalue">165<span class="specunit">Hz</span></div><div class="speclabel">Refresh Rate</div></div>
<div class="speccell"><div class="specvalue">1<span class="specunit">ms</span></div><div class="speclabel">Response Time</div></div>
<div class="speccell"><div class="specvalue">4<span class="specunit">K</span></div><div class="speclabel">Resolution</div></div>
</div>
<div class="grid">
<div class="card"><span class="badge">4K</span><div class="thumb"></div><div class="pname">K27 Pro Gaming</div></div>
<div class="card"><div class="thumb"></div><div class="pname">M27T20 Curved</div></div>
<div class="card"><div class="thumb"></div><div class="pname">H32S6 Home Office</div></div>
</div>
<div class="footer"><span>© KTC Display Technology</span><span>Warranty · Dealers</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1d1b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1d1b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #1d1d1b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.06em; background: #1d1d1b; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0.06em; background: #ffffff; color: #1d1d1b;
border: 1px solid #1d1d1b; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1d1d1b;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.01em; background: #eeeeee; color: #767676;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;font-family:'Neue Haas Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;color:#3d3d3d;}
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:19px;font-weight:500;letter-spacing:-0.2px;color:#1d1d1b;}
.navlinks{display:flex;gap:30px;font-size:13px;font-weight:500;color:#1d1d1b;}
.navlinks span{border-bottom:2px solid transparent;}
.navlinks span.active{border-bottom:2px solid #1d1d1b;padding-bottom:4px;}
.cta-nav{padding:9px 18px;border:1px solid #1d1d1b;color:#1d1d1b;font-size:11px;font-weight:500;letter-spacing:0.6px;text-transform:uppercase;}
.hero{height:270px;display:flex;padding:34px 40px;gap:40px;}
.hero-text{width:400px;display:flex;flex-direction:column;justify-content:center;}
.headline{font-size:44px;font-weight:300;letter-spacing:-0.5px;line-height:1.12;color:#1d1d1b;margin-bottom:14px;}
.sub{font-size:14px;color:#767676;line-height:1.55;width:365px;margin-bottom:20px;}
.cta{display:inline-block;padding:13px 26px;background:#1d1d1b;color:#ffffff;font-size:11px;font-weight:500;letter-spacing:0.6px;text-transform:uppercase;width:fit-content;}
.hero-visual{flex:1;background:#f4f4f4;position:relative;padding:16px;}
.hv-title{font-size:11px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:#767676;margin-bottom:12px;}
.swrow{display:flex;gap:8px;margin-bottom:8px;}
.sw{width:34px;height:34px;border:2px solid transparent;}
.sw.sel{border:2px solid #1d1d1b;}
.chairsil{position:absolute;right:20px;bottom:16px;width:90px;height:110px;}
.chr-back{position:absolute;left:14px;top:0;width:62px;height:66px;border:2px solid #1d1d1b;border-radius:4px;}
.chr-seat{position:absolute;left:6px;top:64px;width:78px;height:14px;background:#3d3d3d;}
.chr-leg{position:absolute;left:42px;top:78px;width:6px;height:30px;background:#767676;}
.section{padding:22px 40px 0 40px;display:flex;justify-content:space-between;align-items:baseline;}
.section-title{font-size:22px;font-weight:300;color:#1d1d1b;}
.section-link{font-size:11px;font-weight:500;letter-spacing:0.5px;color:#767676;text-transform:uppercase;}
.grid{display:flex;gap:24px;padding:14px 40px 0 40px;}
.card{width:204px;background:#ffffff;border:1px solid #e0e0e0;overflow:hidden;}
.swatch{height:104px;background:#f4f4f4;display:flex;align-items:center;justify-content:center;}
.swatch .mini{width:56px;height:70px;border:2px solid #1d1d1b;border-radius:3px;}
.card-body{padding:11px 13px 14px 13px;}
.card-title{font-size:13px;font-weight:500;color:#1d1d1b;margin-bottom:5px;}
.card-desc{font-size:11px;color:#9e9e9e;margin-bottom:10px;}
.card-cta{font-size:10px;font-weight:500;letter-spacing:0.6px;text-transform:uppercase;color:#1d1d1b;border-bottom:1px solid #1d1d1b;width:fit-content;padding-bottom:2px;}
</style>
<div class="nav">
<div class="logo">Humanscale Chairs</div>
<div class="navlinks"><span class="active">Seating</span><span>Freedom</span><span>Liberty</span><span>Diffrient</span></div>
<div class="cta-nav">Find a Dealer</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="headline">Seating engineered<br/>to disappear.</div>
<div class="sub">Ergonomic task chairs built on load ratings and range-of-motion data — not upholstery trends.</div>
<div class="cta">Configure</div>
</div>
<div class="hero-visual">
<div class="hv-title">Fabric Family — Select Grade</div>
<div class="swrow">
<div class="sw sel" style="background:#3d3d3d;"></div>
<div class="sw" style="background:#9e9e9e;"></div>
<div class="sw" style="background:#d1cfc7;"></div>
<div class="sw" style="background:#767676;"></div>
</div>
<div class="hv-title" style="margin-top:14px;">Base Finish</div>
<div class="swrow">
<div class="sw sel" style="background:#1d1d1b;"></div>
<div class="sw" style="background:#b0b0b0;"></div>
</div>
<div class="chairsil"><div class="chr-back"></div><div class="chr-seat"></div><div class="chr-leg"></div></div>
</div>
</div>
<div class="section"><div class="section-title">Task Seating</div><div class="section-link">Request a Quote</div></div>
<div class="grid">
<div class="card">
<div class="swatch"><div class="mini"></div></div>
<div class="card-body"><div class="card-title">Freedom Headrest</div><div class="card-desc">Carbon-fiber shell · Weight-sensing recline</div><div class="card-cta">Configure</div></div>
</div>
<div class="card">
<div class="swatch"><div class="mini"></div></div>
<div class="card-body"><div class="card-title">Liberty Task Chair</div><div class="card-desc">Gossamer mesh · Form-sensing technology</div><div class="card-cta">Configure</div></div>
</div>
<div class="card">
<div class="swatch"><div class="mini"></div></div>
<div class="card-body"><div class="card-title">Diffrient Smart</div><div class="card-desc">Folding geometry · Flexible frame</div><div class="card-cta">Configure</div></div>
</div>
<div class="card">
<div class="swatch"><div class="mini"></div></div>
<div class="card-body"><div class="card-title">World Chair</div><div class="card-desc">Auto-adjust recline · No manual controls</div><div class="card-cta">Configure</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #c73e3a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #c73e3a;
border: 1px solid #c73e3a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #200a09; color: #c73e3a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#F5F5F5; box-sizing:border-box;
font-family:'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:'Playfair Display', 'New York', Georgia, serif; }
.hero { position:relative; width:960px; height:230px; overflow:hidden;
background:linear-gradient(135deg,#3a1e1c 0%, #000 70%); }
.hero::before { content:''; position:absolute; inset:0;
background:radial-gradient(circle at 70% 30%, rgba(199,62,58,0.25), transparent 50%); }
.navcircle { position:absolute; top:16px; width:32px; height:32px; border-radius:50%;
background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; font-size:14px; }
.back { left:20px; } .heart-nav { right:64px; } .share-nav { right:20px; }
.dots { position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:5px; }
.dots span { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.4); }
.dots span.active { background:#fff; }
.content { padding:16px 20px 0; }
.rname { font-size:27px; font-weight:700; letter-spacing:-0.3px; margin:0 0 6px; }
.metarow { display:flex; align-items:center; gap:8px; font-size:13px; color:#9E9E9E; margin-bottom:8px; }
.gold { color:#C9A24B; font-weight:700; font-family:'Inter',sans-serif; }
.tagline { font-style:italic; font-size:15px; color:#9E9E9E; margin:0 0 16px; max-width:560px; }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:#9E9E9E; margin-bottom:10px; }
.datestrip { display:flex; gap:8px; margin-bottom:14px; }
.datecell { width:64px; height:56px; border-radius:10px; background:#121212; border:1px solid #262626;
display:flex; flex-direction:column; align-items:center; justify-content:center; }
.datecell .wd { font-size:10px; font-weight:600; text-transform:uppercase; color:#9E9E9E; }
.datecell .dn { font-size:17px; font-weight:700; }
.datecell.selected { background:#C73E3A; border-color:#C73E3A; }
.datecell.selected .wd, .datecell.selected .dn { color:#fff; }
.context { font-size:14px; color:#9E9E9E; margin-bottom:14px; }
.context b { color:#F5F5F5; font-weight:600; }
.slotgrid { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:20px; }
.slot { width:96px; height:56px; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.slot.avail { border:1px solid #C73E3A; background:transparent; }
.slot.avail .t { font-size:14px; font-weight:700; color:#F5F5F5; }
.slot.avail .s { font-size:9px; font-weight:600; letter-spacing:0.3px; text-transform:uppercase; color:#9E9E9E; }
.slot.primary { background:#C73E3A; }
.slot.primary .t { font-size:14px; font-weight:700; color:#fff; }
.slot.primary .s { font-size:9px; font-weight:600; letter-spacing:0.3px; text-transform:uppercase; color:rgba(255,255,255,0.82); }
.slot.notify { border:1px dashed #262626; }
.slot.notify .t { font-size:12px; font-weight:700; color:#D99A2B; }
.slot.notify .s { font-size:9px; font-weight:600; text-transform:uppercase; color:#D99A2B; }
.bookbar { display:flex; align-items:center; justify-content:space-between; padding:0 20px; }
.booktext { font-size:13px; color:#9E9E9E; }
.bookbtn { background:#C73E3A; color:#fff; font-weight:700; font-size:16px; border-radius:8px; padding:12px 28px; }
.tabbar { position:absolute; left:0; right:0; bottom:0; height:52px; background:rgba(0,0,0,0.96);
border-top:1px solid #262626; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:10px; font-weight:600; color:#6A6A6A; }
.tab.active { color:#E2504B; }
.wrap { position:relative; width:960px; height:640px; }
.brandmark { position:absolute; top:16px; left:20px; font-size:16px; font-weight:700; letter-spacing:0.3px; z-index:3; }
</style></head>
<body>
<div class="wrap">
<div class="hero">
<span class="brandmark">Resy (iOS)</span>
<div class="navcircle back">←</div>
<div class="navcircle heart-nav">♡</div>
<div class="navcircle share-nav">↗</div>
<div class="dots"><span class="active"></span><span></span><span></span></div>
</div>
<div class="content">
<h1 class="rname serif">Casa Ember</h1>
<div class="metarow"><span class="gold">★ 9.4</span><span>·</span><span>Italian · $$$ · Williamsburg</span></div>
<p class="tagline serif">A wood-fired room that feels like your favorite aunt's kitchen, if your aunt trained under a Michelin chef.</p>
<p class="eyebrow">Select a date</p>
<div class="datestrip">
<div class="datecell"><span class="wd">Wed</span><span class="dn">21</span></div>
<div class="datecell selected"><span class="wd">Thu</span><span class="dn">22</span></div>
<div class="datecell"><span class="wd">Fri</span><span class="dn">23</span></div>
<div class="datecell"><span class="wd">Sat</span><span class="dn">24</span></div>
<div class="datecell"><span class="wd">Sun</span><span class="dn">25</span></div>
</div>
<p class="context">2 guests · <b>Thu May 22</b> · Dinner</p>
<div class="slotgrid">
<div class="slot avail"><span class="t">6:00</span><span class="s">Dining Room</span></div>
<div class="slot primary"><span class="t">6:30</span><span class="s">Dining Room</span></div>
<div class="slot avail"><span class="t">7:15</span><span class="s">Bar</span></div>
<div class="slot notify"><span class="t">Notify</span><span class="s">8:00</span></div>
</div>
</div>
<div class="bookbar">
<span class="booktext">Confirmation is instant</span>
<span class="bookbtn">Book Now</span>
</div>
<div class="tabbar">
<span class="tab active">Search</span>
<span class="tab">Hit List</span>
<span class="tab">Reservations</span>
<span class="tab">Notify</span>
<span class="tab">Account</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e9e5df; color: #23221e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e9e5df; color: #23221e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.35; margin: 0; color: #23221e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #e9e5df; color: #23221e;
border: 1px solid #108474; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #23221e;
border: 1px solid #b8b4af; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fbcd0a; color: #23221e;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#e9e5df; font-family:'Nunito Sans','DM Sans',sans-serif; color:#4d403c; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#e9e5df;}
.logo{font-family:'DM Sans',sans-serif;font-size:19px;font-weight:600;color:#23221e;}
.navlinks{display:flex;gap:22px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;color:#23221e;}
.navlinks span:first-child{border-bottom:2px solid #108474;padding-bottom:20px;}
.icon{width:38px;height:38px;border-radius:9999px;background:#ffffff;border:1px solid #dbdbdb;display:flex;align-items:center;justify-content:center;font-size:12px;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;gap:30px;}
.herotext{width:46%;}
.herotext h1{font-family:'DM Sans',sans-serif;font-size:26px;font-weight:600;color:#23221e;margin:0 0 12px;line-height:1.3;}
.herotext p{font-size:14px;color:#4d403c;margin:0 0 18px;max-width:290px;}
.herocta{display:inline-block;background:#108474;color:#fff;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;letter-spacing:.3px;border-radius:9999px;padding:14px 28px;}
.heroimg{width:46%;height:180px;border-radius:20px;background:linear-gradient(135deg,#c1e6e6,#a89cc8 75%);position:relative;overflow:hidden;}
.heroimg:before{content:'';position:absolute;width:90px;height:110px;border-radius:40px;background:#f8f6f3;bottom:20px;left:70px;}
.grid{display:flex;gap:16px;padding:20px 40px 0;}
.card{width:196px;background:#fff;border-radius:20px;overflow:hidden;}
.thumb{height:120px;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#fbcd0a;color:#23221e;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;padding:3px 8px;}
.body{padding:12px 14px 16px;}
.ptitle{font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;color:#23221e;margin-bottom:4px;}
.pprice{font-size:14px;color:#108474;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#23221e;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.footer span{color:#f8f6f3;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Solly Baby</div>
<div class="navlinks"><span>Baby Wraps</span><span>Carriers</span><span>Accessories</span><span>New Parents</span></div>
<div class="icon">◍</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Soft, structured baby wearing for tired new parents.</h1>
<p>A calm, teal-hued nursery world built for the tender early days.</p>
<div class="herocta">Shop Wraps</div>
</div>
<div class="heroimg"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#108474,#c1e6e6)"><span class="badge">New</span></div><div class="body"><div class="ptitle">Stretchy Wrap Carrier</div><div class="pprice">$54</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a89cc8,#e9e5df)"></div><div class="body"><div class="ptitle">Structured Carrier</div><div class="pprice">$98</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c1e6e6,#108474)"></div><div class="body"><div class="ptitle">Swaddle Set</div><div class="pprice">$36</div></div></div>
</div>
<div class="footer"><span>© Solly Baby</span><span>How To Wear · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfbf9; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfbf9; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #505050; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px; background: #e5ff01; color: #001da3;
border: none; border-radius: 12px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px; background: #001da3; color: #fcfbf9;
border: 1px solid #e5ff01; border-radius: 12px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfbf9; color: #2e2e2e;
border: 1px solid #c5c4c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #505050; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 10px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #e5ff01; color: #001da3;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fcfbf9; font-family:'Instrument Sans',-apple-system,sans-serif; color:#2e2e2e; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#fcfbf9;}
.logo{font-family:'Lars Mono',monospace;font-size:18px;text-transform:uppercase;letter-spacing:1px;color:#212121;}
.navlinks{display:flex;gap:20px;font-family:'Lars Mono',monospace;font-size:13px;text-transform:uppercase;letter-spacing:0.5px;color:#212121;}
.navlinks .active{color:#001da3;border-bottom:2px solid #001da3;padding-bottom:6px;}
.hero{height:200px;background:#001da3;display:flex;align-items:center;padding:0 34px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:70px;top:40px;width:120px;height:120px;background:#e5ff01;clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%);}
.herotext{max-width:420px;}
.herotext h1{font-family:'Lars Mono',monospace;font-size:32px;font-weight:400;color:#fcfbf9;margin:0 0 10px;letter-spacing:-0.5px;line-height:1.15;}
.herotext p{font-size:14px;color:#e7ebff;margin:0 0 16px;}
.herocta{display:inline-block;background:#e5ff01;color:#001da3;font-size:15px;font-weight:600;padding:12px 28px;border-radius:12px;}
.grid{display:flex;gap:14px;padding:20px 34px 0;}
.card{width:216px;background:#fff;border-radius:8px;padding:16px;}
.thumb{height:100px;border-radius:8px;aspect-ratio:1/1;margin-bottom:10px;}
.badge{display:inline-block;background:#e5ff01;color:#001da3;font-family:'Lars Mono',monospace;font-size:10px;text-transform:uppercase;padding:2px 8px;border-radius:4px;margin-bottom:8px;}
.badgesale{background:#fed602;color:#212121;}
.ptitle{font-size:15px;font-weight:600;color:#212121;}
.pprice{font-size:14px;color:#2e2e2e;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Nette</div>
<div class="navlinks"><div class="active">Fragrance</div><div>Body</div><div>Home</div><div>Ingredients</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Clean Beauty,<br>High Voltage.</h1>
<p>Ingredient-forward fragrance for people who read the label.</p>
<div class="herocta">Shop Fragrance</div>
</div>
</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(160deg,#e5ff01,#001da3)"></div><div class="ptitle">Fig & Vetiver Eau de Parfum</div><div class="pprice">$120.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#061c81,#99a5da)"></div><div class="ptitle">Charcoal Botanical Soap Bar</div><div class="pprice">$14.00</div></div>
<div class="card"><span class="badge badgesale">Sale</span><div class="thumb" style="background:linear-gradient(160deg,#fed602,#001da3)"></div><div class="ptitle">Neroli Body Oil</div><div class="pprice">$48.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#1d1d1d,#e5ff01)"></div><div class="ptitle">Indigo Room Diffuser</div><div class="pprice">$64.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #00112c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #00112c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #00112c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8d95a3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.5px; background: #00112c; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.5px; background: #ffffff; color: #00112c;
border: 1px solid #00112c; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #00112c;
border: 1px solid #bfc4ca; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d95a3; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.2px; background: #00112c; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Moderat',-apple-system,'Helvetica Neue',Arial,sans-serif; background:#f7f7f8; color:#5c687c; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dbdee2;}
.logo{font-family:'TTRamillas',Georgia,serif;font-size:20px;font-weight:300;color:#00112c;}
.navlinks{display:flex;gap:22px;font-size:14px;color:#5c687c;}
.chips{display:flex;gap:8px;padding:12px 36px 0;}
.chip{border:1px solid #dbdee2;padding:6px 14px;font-size:12px;color:#5c687c;}
.chip.active{background:#00112c;color:#fff;border-color:#00112c;}
.sec{padding:14px 36px 0;}
.secTitle{font-family:'TTRamillas',Georgia,serif;font-size:20px;font-weight:300;color:#00112c;margin-bottom:12px;}
.grid{display:flex;gap:16px;}
.card{width:150px;}
.thumb{width:150px;height:225px;background:#f3f4f6;margin-bottom:8px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:9px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;padding:2px 7px;color:#fff;}
.pname{font-family:'TTRamillas',Georgia,serif;font-size:14px;color:#00112c;}
.pprice{font-size:13px;color:#5c687c;margin-top:2px;}
.stars{color:#f5a623;font-size:11px;}
.footerband{position:absolute;bottom:0;left:0;right:0;height:44px;background:#00112c;display:flex;align-items:center;justify-content:center;color:#f7f7f8;font-size:12px;letter-spacing:0.2px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Postery</div>
<div class="navlinks"><span>Art Prints</span><span>Photography</span><span>Frames</span></div>
</div>
<div class="chips"><div class="chip active">All</div><div class="chip">Abstract</div><div class="chip">Nature</div><div class="chip">Monochrome</div></div>
<div class="sec">
<div class="secTitle">Limited-Run Prints</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#00112c,#8d95a3);"><div class="badge" style="background:#e22d2d;">Sale</div></div><div class="pname">Midnight Ridge</div><div class="pprice">$38.00</div><div class="stars">★★★★★</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#8d95a3,#00112c);"><div class="badge" style="background:#3f6b47;">In Stock</div></div><div class="pname">Quiet Field Study</div><div class="pprice">$42.00</div><div class="stars">★★★★☆</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#5c687c,#00112c);"></div><div class="pname">Amber Line No. 2</div><div class="pprice">$36.00</div><div class="stars">★★★★★</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#00112c,#eeeff1);"></div><div class="pname">Cloud Bank Edition</div><div class="pprice">$44.00</div><div class="stars">★★★★☆</div></div>
</div>
</div>
<div class="footerband">Limited-edition art prints, framed to order</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a2a2e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a2a2e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #1a2a2e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #7a9da5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #226d7a; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #ffffff; color: #226d7a;
border: 1px solid #226d7a; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a2a2e;
border: 1px solid #c8e2ea; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a9da5; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.33; background: #22b8d1; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Fontana Forni Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Open Sans',Arial,sans-serif; background:#ffffff; color:#1a2a2e; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
.nav { background:#226d7a; height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.logo { color:#fff; font-weight:700; font-size:20px; letter-spacing:-.3px; }
.navlinks { display:flex; gap:26px; color:#e4f5fa; font-size:13px; font-weight:600; }
.navcta { background:#22b8d1; color:#fff; font-weight:700; font-size:12px; padding:9px 18px; border-radius:2px; text-transform:uppercase; letter-spacing:.5px; }
.hero { display:flex; padding:38px 40px; gap:36px; align-items:center; background:#e4f5fa; }
.hero-copy { flex:1; }
.overline { color:#22b8d1; font-weight:700; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px; }
.hero h1 { font-size:40px; font-weight:700; color:#1a2a2e; line-height:1.18; letter-spacing:-.4px; margin:0 0 12px; }
.hero p { font-size:15px; color:#2e4a52; line-height:1.6; max-width:400px; margin:0 0 18px; }
.btn-primary { background:#226d7a; color:#fff; font-weight:700; font-size:14px; padding:12px 22px; border-radius:2px; display:inline-block; }
.hero-visual { flex:1; height:220px; display:flex; align-items:center; justify-content:center; }
.oven { width:180px; height:170px; position:relative; }
.oven .dome { width:180px; height:130px; border-radius:100px 100px 20px 20px; background:linear-gradient(160deg,#7ab8c4,#226d7a); box-shadow:0 20px 30px rgba(34,109,122,.25); }
.oven .mouth { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); width:60px; height:44px; background:#1a2a2e; border-radius:10px 10px 4px 4px; }
.oven .flame { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); width:20px; height:26px; background:#ffb100; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; opacity:.9; }
.strip { display:flex; gap:0; background:#b0e0e9; }
.strip div { flex:1; text-align:center; padding:12px; font-size:11px; font-weight:700; color:#1a2a2e; text-transform:uppercase; letter-spacing:.5px; border-right:1px solid #c8e2ea; }
.strip div:last-child { border-right:none; }
.section { padding:24px 40px; flex:1; }
.section h2 { font-size:22px; font-weight:700; color:#1a2a2e; margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#fff; border:1px solid #c8e2ea; border-radius:4px; padding:14px; }
.card .ph { height:80px; border-radius:4px; margin-bottom:10px; background:linear-gradient(160deg,#b0e0e9,#22b8d1); display:flex; align-items:center; justify-content:center; position:relative; }
.card .ph .minidome { width:60px; height:44px; border-radius:30px 30px 6px 6px; background:#226d7a; }
.card .name { font-weight:700; font-size:14px; margin-bottom:3px; color:#1a2a2e; }
.card .desc { font-size:11.5px; color:#7a9da5; margin-bottom:8px; }
.card .pricerow { display:flex; justify-content:space-between; align-items:center; }
.card .price { font-weight:700; font-size:15px; color:#226d7a; }
.card .buy { background:#22b8d1; color:#fff; font-size:11px; font-weight:700; padding:6px 12px; border-radius:2px; }
</style>
<div class="page">
<div class="nav">
<div class="logo">Fontana Forni</div>
<div class="navlinks"><span>Wood Ovens</span><span>Gas Ovens</span><span>Accessories</span><span>Recipes</span></div>
<div class="navcta">Request Quote</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="overline">Handcrafted in Italy Since 1965</div>
<h1>The fountain of<br>open flame.</h1>
<p>Precision-engineered outdoor ovens built for the buyer who has already spent three weeks comparing dome thickness and firebrick specs.</p>
<div class="btn-primary">Explore the Collection</div>
</div>
<div class="hero-visual"><div class="oven"><div class="dome"></div><div class="mouth"></div><div class="flame"></div></div></div>
</div>
<div class="strip"><div>Refractory Firebrick</div><div>800°F Dome Temp</div><div>10-Year Warranty</div><div>Made in Italy</div></div>
<div class="section">
<h2>Best Sellers</h2>
<div class="grid">
<div class="card"><div class="ph"><div class="minidome"></div></div><div class="name">Marinara Wood Oven</div><div class="desc">28in dome · Cart included</div><div class="pricerow"><span class="price">$3,199</span><span class="buy">Add</span></div></div>
<div class="card"><div class="ph"><div class="minidome"></div></div><div class="name">Mangiafuoco Gas</div><div class="desc">36in · Dual burner</div><div class="pricerow"><span class="price">$5,499</span><span class="buy">Add</span></div></div>
<div class="card"><div class="ph"><div class="minidome"></div></div><div class="name">Pizza Party Portable</div><div class="desc">Countertop · Hybrid</div><div class="pricerow"><span class="price">$899</span><span class="buy">Add</span></div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f82f62; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f82f62; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #de2a60; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f82f62; color: #000000;
border: 1px solid #de2a60; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f82f62; color: #f5f5f5;
border: 1px solid #f84f7a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f42e62; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:Pretendard,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:700; font-size:17px; color:#f82f62; }
.navlinks { display:flex; gap:20px; font-size:14px; color:#999ca1; }
.navlinks span.on { color:#ffffff; }
.btn { background:#f82f62; color:#ffffff; border-radius:4px; padding:8px 16px; font-size:13px; font-weight:500; }
.billboard { height:180px; margin:0 32px 18px; border-radius:4px; background:linear-gradient(100deg,#1a1a1a,#3a1120 60%,#f82f62);
position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; overflow:hidden; }
.billboard::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent,rgba(0,0,0,0.85)); }
.billboard .b { position:relative; z-index:1; }
.billboard h2 { font-size:26px; font-weight:700; margin:0 0 6px; }
.billboard .row { display:flex; gap:8px; align-items:center; font-size:12px; color:#999ca1; }
.star { color:#f82f62; font-weight:700; }
.row-title { padding:0 32px; font-size:18px; font-weight:700; margin:0 0 10px; }
.grid { display:flex; gap:10px; padding:0 32px 20px; }
.poster { width:110px; height:156px; border-radius:4px; flex-shrink:0; position:relative; }
.p1 { background:linear-gradient(160deg,#3a2050,#7a2050); }
.p2 { background:linear-gradient(160deg,#204030,#1a6640); }
.p3 { background:linear-gradient(160deg,#402020,#802020); }
.p4 { background:linear-gradient(160deg,#1a2a40,#204a80); }
.p5 { background:linear-gradient(160deg,#302a10,#7a6020); }
.p6 { background:linear-gradient(160deg,#2a1030,#601a70); }
</style></head>
<body>
<nav>
<span class="brand">Watcha</span>
<div class="navlinks"><span class="on">Movies</span><span>Series</span><span>WatchaPedia</span></div>
<span class="btn">Log in</span>
</nav>
<div class="billboard"><div class="b">
<h2>The Long Ferry</h2>
<div class="row"><span class="star">★ 4.4</span><span>2026 · Drama · 118 min</span></div>
</div></div>
<div class="row-title">Recommended for you</div>
<div class="grid">
<div class="poster p1"></div><div class="poster p2"></div><div class="poster p3"></div>
<div class="poster p4"></div><div class="poster p5"></div><div class="poster p6"></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #111111; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #111111; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8e8e8e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #111111; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #111111; color: #f5f5f5;
border: 1px solid #353535; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e8e8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #373737; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:"Helvetica Now Text", "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:14px; font-weight:500; }
.search { width:170px; height:36px; background:#f5f5f5; border-radius:9999px; font-size:13px; color:#8d8d8d;
display:flex; align-items:center; padding:0 16px; }
.hero { position:relative; height:300px; background:#111111; overflow:hidden; padding:0 36px; }
.hero::after { content:''; position:absolute; right:0; top:0; bottom:0; width:44%;
background:linear-gradient(135deg, rgba(216,255,0,0.14), rgba(255,255,255,0.02)); }
.herotext { position:relative; z-index:2; padding-top:40px; max-width:480px; }
.label { color:#d8ff00; font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:10px; }
.hero h1 { color:#fff; font-size:56px; font-weight:700; line-height:0.95; text-transform:uppercase; margin:0 0 18px;
letter-spacing:-0.01em; }
.btnrow { display:flex; gap:12px; }
.btn-inv { background:#ffffff; color:#111111; border-radius:9999px; padding:0 24px; height:48px; display:flex;
align-items:center; font-size:16px; font-weight:500; }
.btn-volt { background:#d8ff00; color:#111111; border-radius:9999px; padding:0 24px; height:48px; display:flex;
align-items:center; font-size:16px; font-weight:700; }
.body { position:absolute; top:360px; left:0; right:0; bottom:0; padding:20px 36px 0; }
.rowhead { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.rowhead h2 { font-size:24px; font-weight:500; margin:0; }
.rowhead span { font-size:15px; color:#111111; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.pcard { display:flex; flex-direction:column; gap:6px; }
.pimg { width:100%; aspect-ratio:1/1; background:#f7f7f7; position:relative; }
.pimg::after { content:''; position:absolute; left:14%; right:14%; top:36%; bottom:30%; border-radius:40px;
background:linear-gradient(120deg, rgba(17,17,17,0.08), rgba(17,17,17,0.02)); }
.just-in { font-size:12px; font-weight:700; color:#d43f21; }
.ptitle { font-size:15px; font-weight:500; }
.pcat { font-size:13px; color:#757575; }
.price { font-size:15px; font-weight:500; }
.price .sale { color:#d43f21; }
.price .orig { color:#8d8d8d; text-decoration:line-through; margin-left:6px; }
</style></head>
<body>
<nav>
<span class="brand">Nike</span>
<div class="navlinks"><span>New</span><span>Men</span><span>Women</span><span>SNKRS</span></div>
<span class="search">Search</span>
</nav>
<div class="hero">
<div class="herotext">
<div class="label">Just In</div>
<h1>Move to<br>Zero</h1>
<div class="btnrow">
<span class="btn-inv">Shop Now</span>
<span class="btn-volt">SNKRS Drop</span>
</div>
</div>
</div>
<div class="body">
<div class="rowhead"><h2>Trending</h2><span>Shop All →</span></div>
<div class="grid">
<div class="pcard"><div class="pimg"></div><div class="just-in">Just In</div><div class="ptitle">Air Zoom Ridge</div><div class="pcat">Men's Running Shoes</div><div class="price">$140</div></div>
<div class="pcard"><div class="pimg"></div><div class="ptitle">Court Vantage</div><div class="pcat">Women's Shoes</div><div class="price"><span class="sale">$79.97</span><span class="orig">$110</span></div></div>
<div class="pcard"><div class="pimg"></div><div class="ptitle">Flex Trainer 9</div><div class="pcat">Training Shoes</div><div class="price">$65</div></div>
<div class="pcard"><div class="pimg"></div><div class="ptitle">Windrunner Jacket</div><div class="pcat">Men's Jacket</div><div class="price">$120</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; background: #fb485e; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; background: #ffffff; color: #121212;
border: 1px solid #fb485e; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.05em; background: #fb485e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; color:#2a2a2a; }
*{box-sizing:border-box;}
.nav{position:absolute; top:0; left:0; width:960px; height:64px; background:#fff; border-bottom:1px solid #dedede; display:flex; align-items:center; justify-content:space-between; padding:0 40px;}
.logo{font-size:19px; font-weight:700;}
.navlinks{display:flex; gap:24px; font-size:15px; color:#121212;}
.searchcart{display:flex; align-items:center; gap:16px;}
.search{width:150px; height:32px; border-radius:9999px; background:#f5f5f5; font-size:12px; color:#888; display:flex; align-items:center; padding:0 12px;}
.cart{background:#fb485e; color:#fff; font-size:12px; font-weight:700; padding:6px 12px; border-radius:8px;}
.countdown{position:absolute; top:64px; left:0; width:960px; height:44px; background:#121212; display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font-size:12px;}
.digit{background:#1e1e1e; padding:4px 8px; border-radius:4px; font-family:monospace; color:#fb485e; font-weight:700;}
.hero{position:absolute; top:108px; left:0; width:960px; height:236px; background:#121212; display:flex; align-items:center; padding:0 50px;}
.heroText{width:460px;}
.headline{font-size:32px; font-weight:700; line-height:1.2; letter-spacing:-0.5px; color:#fff; margin-bottom:12px;}
.sub{font-size:14px; color:#cccccc; margin-bottom:18px; width:400px;}
.btn{display:inline-block; background:#fb485e; color:#fff; font-size:15px; font-weight:600; padding:12px 24px; border-radius:8px;}
.kbGraphic{position:absolute; right:60px; top:36px; width:340px; height:170px; background:#1e1e1e; border-radius:12px; padding:14px; display:grid; grid-template-columns:repeat(10,1fr); grid-gap:5px;}
.key{background:#333; border-radius:3px; height:22px;}
.key.hl{background:#fb485e;}
.sec{position:absolute; top:344px; left:0; width:960px; height:296px; padding:28px 40px;}
.secTitle{font-size:20px; font-weight:700; margin-bottom:16px;}
.grid{display:flex; gap:16px;}
.card{width:216px; background:#fff; border:1px solid #efefef; border-radius:8px; padding:14px; position:relative;}
.cardImg{width:100%; height:96px; border-radius:6px; background:#f5f5f5; display:grid; grid-template-columns:repeat(6,1fr); grid-gap:3px; padding:8px;}
.k2{background:#ddd; border-radius:2px; height:12px;}
.cardTitle{font-size:15px; font-weight:600; margin-top:10px;}
.cardSpec{font-size:12px; color:#888; margin-top:2px;}
.cardPrice{font-size:18px; font-weight:700; margin-top:6px;}
.saleBadge{position:absolute; top:8px; left:8px; background:#fb485e; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:4px;}
.gbBadge{position:absolute; top:8px; left:8px; background:#d7030b; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Kbdfans</div>
<div class="navlinks"><span>Keyboards</span><span>Switches</span><span>Keycaps</span><span>Group Buys</span></div>
<div class="searchcart"><div class="search">Search...</div><div class="cart">Cart 3</div></div>
</div>
<div class="countdown">GROUP BUY ENDS IN <span class="digit">02</span>:<span class="digit">14</span>:<span class="digit">37</span></div>
<div class="hero">
<div class="heroText">
<div class="headline">Build the board<br>you've been waiting for.</div>
<div class="sub">Hot-swap PCBs, gasket mounts, and switches for people who already know what they want.</div>
<div class="btn">Shop Keyboards</div>
</div>
<div class="kbGraphic">
<div class="key"></div><div class="key"></div><div class="key"></div><div class="key hl"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
<div class="key"></div><div class="key"></div><div class="key hl"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
<div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key hl"></div><div class="key"></div><div class="key"></div>
</div>
</div>
<div class="sec">
<div class="secTitle">Group Buys & Sales</div>
<div class="grid">
<div class="card"><div class="gbBadge">Group Buy</div><div class="cardImg"><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div></div><div class="cardTitle">Tofu65 Frosted</div><div class="cardSpec">Gasket / Hot-swap</div><div class="cardPrice">$189</div></div>
<div class="card"><div class="saleBadge">Sale</div><div class="cardImg"><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div></div><div class="cardTitle">D67 Aluminum</div><div class="cardSpec">Anodized</div><div class="cardPrice">$139</div></div>
<div class="card"><div class="cardImg"><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div></div><div class="cardTitle">Cream Blue Switch</div><div class="cardSpec">Tactile / 62g</div><div class="cardPrice">$0.45</div></div>
<div class="card"><div class="cardImg"><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div></div><div class="cardTitle">GMK Olivia</div><div class="cardSpec">Cherry Profile</div><div class="cardPrice">$119</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #2c2d2e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #2c2d2e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #2c2d2e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #868d94; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #0f4c81; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #0f4c81;
border: 1px solid #0f4c81; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #2c2d2e;
border: 1px solid #c4c4c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #868d94; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #279a4b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#f7f7f7;font-family:'Manrope','Work Sans',Arial,sans-serif;color:#2c2d2e;}
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#0f4c81;}
.logo{font-family:'Oswald','Manrope',sans-serif;font-size:20px;font-weight:700;letter-spacing:1px;color:#ffffff;text-transform:uppercase;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#ffffff;text-transform:uppercase;letter-spacing:0.5px;font-family:'Oswald','Manrope',sans-serif;}
.navlinks span.sale{color:#ffaa47;}
.cartpill{padding:8px 18px;background:#ffffff;color:#0f4c81;border-radius:999px;font-size:12px;font-weight:700;}
.hero{height:250px;display:flex;padding:30px 40px;gap:34px;}
.hero-text{width:400px;display:flex;flex-direction:column;justify-content:center;}
.eyebrow{font-family:'Oswald','Manrope',sans-serif;font-size:12px;font-weight:700;letter-spacing:2px;color:#0f4c81;text-transform:uppercase;margin-bottom:10px;}
.headline{font-size:32px;font-weight:700;letter-spacing:-0.5px;line-height:1.18;color:#17314b;margin-bottom:12px;}
.sub{font-size:14px;color:#606060;line-height:1.5;width:370px;margin-bottom:18px;}
.cta{display:inline-block;padding:14px 30px;background:#0f4c81;color:#ffffff;border-radius:999px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;}
.hero-visual{flex:1;position:relative;border-radius:6px;background:linear-gradient(180deg,#0e4174 0%,#17314b 100%);overflow:hidden;}
.wave{position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(180deg,rgba(69,190,166,0.0),rgba(69,190,166,0.55));}
.boat{position:absolute;left:40px;bottom:30px;width:220px;height:44px;border-radius:22px 22px 4px 4px;background:#f7f7f7;}
.sun{position:absolute;right:40px;top:26px;width:52px;height:52px;border-radius:26px;background:#ffaa47;}
.badgeflag{position:absolute;left:30px;top:26px;background:#45bea6;color:#17314b;font-size:10px;font-weight:800;padding:4px 10px;border-radius:2px;text-transform:uppercase;letter-spacing:0.5px;}
.section{padding:20px 40px 0 40px;display:flex;justify-content:space-between;align-items:baseline;}
.section-title{font-family:'Oswald','Manrope',sans-serif;font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#17314b;}
.section-link{font-size:12px;font-weight:700;color:#0581ff;}
.grid{display:flex;gap:24px;padding:14px 40px 0 40px;}
.card{width:204px;background:#ffffff;border:1px solid #dadce0;border-radius:6px;overflow:hidden;}
.swatch{height:104px;position:relative;}
.badge-new{position:absolute;left:8px;top:8px;background:#279a4b;color:#fff;font-size:9px;font-weight:800;padding:3px 7px;border-radius:2px;text-transform:uppercase;}
.badge-sale{position:absolute;left:8px;top:8px;background:#c62a32;color:#fff;font-size:9px;font-weight:800;padding:3px 7px;border-radius:2px;text-transform:uppercase;}
.card-body{padding:11px 13px 14px 13px;}
.card-cat{font-family:'Oswald','Manrope',sans-serif;font-size:10px;font-weight:600;letter-spacing:0.6px;color:#868d94;text-transform:uppercase;margin-bottom:4px;}
.card-title{font-size:14px;font-weight:700;color:#2c2d2e;margin-bottom:6px;}
.card-price{font-family:'Oswald','Manrope',sans-serif;font-size:16px;font-weight:700;color:#0f4c81;}
</style>
<div class="nav">
<div class="logo">Huk Gear</div>
<div class="navlinks"><span>Fishing</span><span>Hunting</span><span>Outerwear</span><span class="sale">Sale</span></div>
<div class="cartpill">Cart (0)</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="eyebrow">Built For The Hunt</div>
<div class="headline">Gear that works<br/>as hard as you.</div>
<div class="sub">Performance fishing and hunting apparel engineered for open water and long days on deck.</div>
<div class="cta">Shop New Arrivals</div>
</div>
<div class="hero-visual">
<div class="badgeflag">Marine Grade</div>
<div class="sun"></div>
<div class="wave"></div>
<div class="boat"></div>
</div>
</div>
<div class="section"><div class="section-title">Best Sellers</div><div class="section-link">Shop All</div></div>
<div class="grid">
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#0f4c81,#45bea6);"><div class="badge-new">New</div></div>
<div class="card-body"><div class="card-cat">Performance Shirt</div><div class="card-title">Icon Pursuit LS</div><div class="card-price">$59.99</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#2c2d2e,#606060);"></div>
<div class="card-body"><div class="card-cat">Outerwear</div><div class="card-title">NXTLVL Rain Shell</div><div class="card-price">$149.99</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#17314b,#0f4c81);"><div class="badge-sale">Sale</div></div>
<div class="card-body"><div class="card-cat">Headwear</div><div class="card-title">A1A Trucker Cap</div><div class="card-price">$24.99</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#ffaa47,#e97f32);"></div>
<div class="card-body"><div class="card-cat">Waders</div><div class="card-title">Rogue Wave Bibs</div><div class="card-price">$189.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #c4398d; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #1c1c1c;
border: 1px solid #c4398d; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1c1c1c;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c4398d; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#fbfbfb; font-family:'Helvetica Neue',Arial,sans-serif; color:#1c1c1c;
}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#1c1c1c;}
.logo{font-size:20px;font-weight:700;letter-spacing:1px;color:#fff;text-transform:uppercase;}
.navlinks{display:flex;gap:28px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#cfcfcf;}
.navlinks span.active{color:#fff;border-bottom:2px solid #c4398d;padding-bottom:4px;}
.cta{background:#c4398d;color:#fff;font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:10px 18px;font-weight:700;}
.hero{height:250px;display:flex;background:#1c1c1c;}
.hero-copy{width:420px;padding:36px 40px;display:flex;flex-direction:column;justify-content:center;}
.hero-eyebrow{font-size:11px;letter-spacing:2px;color:#c4398d;text-transform:uppercase;font-weight:700;margin-bottom:10px;}
.hero-title{font-size:40px;font-weight:700;line-height:1.05;color:#fbfbfb;margin-bottom:14px;letter-spacing:-0.5px;}
.hero-sub{font-size:14px;color:#a8a8a8;line-height:1.5;max-width:340px;}
.hero-visual{flex:1;background:linear-gradient(135deg,#2e2e2e 0%,#1c1c1c 60%);position:relative;display:flex;align-items:center;justify-content:center;}
.machine{width:70px;height:170px;border-radius:35px;background:linear-gradient(180deg,#3a3a3a,#151515);border:2px solid #c4398d;position:relative;}
.machine:before{content:'';position:absolute;top:14px;left:14px;right:14px;height:60px;border-radius:20px;background:#c4398d;opacity:.85;}
.specbar{position:absolute;bottom:18px;left:40px;right:40px;display:flex;justify-content:space-between;}
.spec-num{font-size:32px;font-weight:700;color:#ffff00;}
.spec-unit{font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;}
.section{padding:22px 32px 0;}
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
.section-title{font-size:18px;font-weight:700;letter-spacing:-0.3px;}
.section-link{font-size:11px;color:#c4398d;text-transform:uppercase;letter-spacing:1px;font-weight:700;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{background:#ffffff;border:1px solid #f0f0f0;}
.card-img{height:110px;background:#f0f0f0;position:relative;overflow:hidden;}
.swatch{position:absolute;width:44px;height:100px;border-radius:22px;top:5px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,#d9d9d9,#bfbfbf);}
.swatch.m{background:linear-gradient(180deg,#e6a9cf,#c4398d);}
.swatch.y{background:linear-gradient(180deg,#ffff9e,#e6d400);}
.card-body{padding:12px;}
.card-cat{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#79b928;font-weight:700;margin-bottom:4px;}
.card-name{font-size:13px;font-weight:700;line-height:1.3;margin-bottom:6px;}
.card-price{font-size:13px;font-weight:700;color:#c4398d;}
</style>
<div class="nav">
<div class="logo">Dyson</div>
<div class="navlinks">
<span class="active">Vacuums</span><span>Air Treatment</span><span>Hair Care</span><span>Lighting</span><span>Support</span>
</div>
<div class="cta">Shop Now</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="hero-eyebrow">Engineered Airflow</div>
<div class="hero-title">Cyclone V22 Detect</div>
<div class="hero-sub">Absolute Extra. Whole-machine HEPA filtration captures 99.99% of particles as small as 0.1 microns.</div>
</div>
<div class="hero-visual">
<div class="machine"></div>
<div class="specbar">
<div><div class="spec-num">230</div><div class="spec-unit">AW Suction</div></div>
<div><div class="spec-num">60</div><div class="spec-unit">Min Runtime</div></div>
<div><div class="spec-num">4.2</div><div class="spec-unit">Kg Weight</div></div>
</div>
</div>
</div>
<div class="section">
<div class="section-head">
<div class="section-title">Engineered For Every Floor</div>
<div class="section-link">View All →</div>
</div>
<div class="grid">
<div class="card"><div class="card-img"><div class="swatch m"></div></div><div class="card-body"><div class="card-cat">Cordless</div><div class="card-name">Cyclone V22 Absolute</div><div class="card-price">$699.99</div></div></div>
<div class="card"><div class="card-img"><div class="swatch"></div></div><div class="card-body"><div class="card-cat">Purifier</div><div class="card-name">Purifier Cool Formaldehyde</div><div class="card-price">$549.99</div></div></div>
<div class="card"><div class="card-img"><div class="swatch y"></div></div><div class="card-body"><div class="card-cat">Hair Care</div><div class="card-name">Airwrap Multi-Styler</div><div class="card-price">$599.99</div></div></div>
<div class="card"><div class="card-img"><div class="swatch m"></div></div><div class="card-body"><div class="card-cat">Lighting</div><div class="card-name">Lightcycle Morph Desk</div><div class="card-price">$399.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #8081ff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #8081ff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #43437c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0abbb5; color: #000000;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #8081ff; color: #000000;
border: 1px solid #0abbb5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #8081ff; color: #111111;
border: 1px solid #6e6fd9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #43437c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6d8af3; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Noto Sans TC", "Open Sans", Arial, "Microsoft JhengHei", "Apple LiGothic Medium", sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #eeeef5; }
.brand { font-size:19.2px; font-weight:700; color:#8081ff; }
.navlinks { display:flex; gap:22px; font-size:16px; font-weight:900; }
.navlinks span.active { color:#8081ff; }
.navcta { background:#8081ff; color:#ffffff; border-radius:8px; padding:10px 15px;
font-size:16px; font-weight:900; }
.hero { height:150px; background:linear-gradient(120deg,#cf7ffa,#8081ff);
display:flex; align-items:center; padding:0 32px; position:relative; overflow:hidden; }
.hero::after { content:''; position:absolute; right:-40px; top:-60px; width:220px; height:220px;
border-radius:9999px; background:rgba(255,255,255,0.14); }
.hero::before { content:''; position:absolute; right:120px; bottom:-70px; width:140px; height:140px;
border-radius:9999px; background:rgba(255,255,255,0.12); }
.hero h1 { color:#ffffff; font-size:28.8px; font-weight:700; margin:0; position:relative; z-index:1; }
.hero p { color:#f5f2ff; font-size:16px; margin:6px 0 0; position:relative; z-index:1; }
.section { padding:22px 32px 0; }
.section h2 { font-size:22.4px; font-weight:700; margin:0 0 16px; }
.more { float:right; font-size:16px; font-weight:900; color:#000000; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#ffffff; box-shadow:2px 2px 5px 0px rgba(0,0,0,0.16); }
.card .img { height:96px; background:linear-gradient(135deg,#f5f2ff,#eeeef5); position:relative; }
.card .img::after { content:''; position:absolute; right:10px; bottom:10px; width:34px; height:34px;
border-radius:9999px; background:linear-gradient(135deg,#cf7ffa,#8081ff); }
.card .txt { background:#f3f3f3; padding:14px 16px; }
.card .date { color:#0abbb5; font-size:13px; font-weight:900; margin-bottom:4px; }
.card .title { font-size:15px; font-weight:900; color:#000000; line-height:1.3; }
.ptbar { margin:22px 32px 0; background:#f5f2ff; border-radius:8px; padding:14px 18px;
display:flex; align-items:center; justify-content:space-between; }
.ptbar .lbl { font-size:14px; color:#48484e; }
.ptbar .val { font-size:22.4px; font-weight:700; color:#8081ff; }
.ptbar .badge { background:linear-gradient(to right,#cf7ffa,#8081ff); color:#ffffff;
font-size:12px; font-weight:900; padding:5px 12px; border-radius:9999px; }
</style></head>
<body>
<nav>
<div class="brand">OPENPOINT</div>
<div class="navlinks"><span class="active">Promotions</span><span>Point Exchange</span><span>Travel Points Passport</span></div>
<div class="navcta">Member Login</div>
</nav>
<div class="hero">
<div>
<h1>OPENPOINT Promotions</h1>
<p>Promo period: 2026/01/01–06/30 · Earn points on every purchase</p>
</div>
</div>
<div class="ptbar">
<div><div class="lbl">My Points Balance</div><div class="val">2,480 pt</div></div>
<div class="badge">PRIMA Member Bonus</div>
</div>
<div class="section">
<h2>This Week's Top Deals <span class="more">See all deals ›</span></h2>
<div class="grid">
<div class="card"><div class="img"></div><div class="txt"><div class="date">Promo period: 01/05–01/20</div><div class="title">Coffee buy-one-get-one, double points</div></div></div>
<div class="card"><div class="img"></div><div class="txt"><div class="date">Promo period: 01/10–02/10</div><div class="title">Spend and win with icash Pay</div></div></div>
<div class="card"><div class="img"></div><div class="txt"><div class="date">Promo period: 01/15–02/28</div><div class="title">Bonus points on airline mile exchange</div></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; background: #f89406; color: #000000;
border: none; border-radius: 8px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; background: #ffffff; color: #222222;
border: 1px solid #f89406; border-radius: 8px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c0c0c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f13d34; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#222222; font-family:Arial,'Helvetica Neue',sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #333333;}
.logo{font-size:19px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#f5f5f5;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:700;text-transform:uppercase;color:#a7a7a7;}
.hero{height:242px;display:flex;background:#1a1a1a;}
.htext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 36px;}
.htext .k{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#f89406;margin-bottom:12px;}
.htext h1{font-size:28px;font-weight:700;color:#f5f5f5;margin:0 0 10px;line-height:1.2;text-transform:uppercase;}
.htext p{font-size:13px;line-height:1.5;color:#a7a7a7;margin:0 0 18px;max-width:280px;}
.btn{width:fit-content;background:#f89406;color:#222222;font-size:13px;font-weight:700;text-transform:uppercase;padding:11px 22px;border-radius:8px;}
.himg{width:54%;position:relative;background:#111111;}
.vinyl{position:absolute;left:150px;top:30px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,#111111 0 20%,#333 21% 24%,#111 25% 40%,#333 41% 44%,#f89406 45% 100%);}
.seclabel{padding:16px 36px 10px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#a7a7a7;}
.grid{display:flex;gap:14px;padding:0 36px;}
.card{width:150px;background:#f5f5f5;border-radius:12px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#f13d34;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 7px;border-radius:8px;}
.thumb{height:78px;border-radius:8px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:700;color:#222222;height:30px;overflow:hidden;line-height:1.3;}
.price{font-size:13px;font-weight:700;color:#f89406;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Season OF Mist</div>
<div class="navlinks"><div>Vinyl</div><div>Merch</div><div>New Releases</div><div>Bands</div></div>
</div>
<div class="hero">
<div class="htext">
<div class="k">New Release</div>
<h1>Find the record. Add to cart. Get out.</h1>
<p>Vinyl and merch pressed for the extreme metal underground since day one.</p>
<div class="btn">Shop New Releases</div>
</div>
<div class="himg"><div class="vinyl"></div></div>
</div>
<div class="seclabel">New Releases</div>
<div class="grid">
<div class="card"><span class="badge">Limited</span><div class="thumb" style="background:linear-gradient(140deg,#f89406,#222222)"></div><div class="pname">Ashen Cathedral LP</div><div class="price">$28.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#ee5f5b,#222222)"></div><div class="pname">Void Choir Digipak CD</div><div class="price">$14.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#0088cc,#222222)"></div><div class="pname">Winter Sermon Tour Tee</div><div class="price">$22.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#333333,#f89406)"></div><div class="pname">Grim Frequency Cassette</div><div class="price">$10.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #5c5c5c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ff5a3c; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f8f8f8; color: #121212;
border: 1px solid #ff5a3c; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1d252d;
border: 1px solid #bebebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5c5c5c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff5a3c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>June Oven Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Euclid Circular','Jost',Poppins,sans-serif; background:#f8f8f8; color:#1d252d; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#f8f8f8;}
.logo{font-weight:600;font-size:19px;color:#121212;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.navlinks .active{border-bottom:2px solid #ff5a3c;padding-bottom:5px;}
.icons{color:#5c5c5c;}
.hero{background:#121212;color:#fff;padding:28px 36px;display:flex;align-items:center;justify-content:space-between;}
.hero-text h1{font-size:32px;font-weight:600;letter-spacing:-.4px;line-height:1.15;margin:0 0 10px;}
.hero-text p{font-family:'Publico Headline',Georgia,serif;font-size:14px;color:#c9c9c9;max-width:360px;margin:0 0 16px;}
.btn{display:inline-block;background:#ff5a3c;color:#fff;padding:14px 30px;border-radius:8px;font-size:14px;font-weight:600;letter-spacing:.4px;}
.hero-art{width:180px;height:130px;border-radius:12px;background:linear-gradient(160deg,#2c2c2c,#1990c6);position:relative;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:22px 36px;}
.card{background:#fff;border-radius:12px;overflow:hidden;}
.imgbox{height:110px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#ff5a3c;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:3px 8px;border-radius:4px;}
.badge.sale{background:#1990c6;}
.body{padding:10px 12px 12px;}
.title{font-size:14px;font-weight:500;}
.price{font-family:'Publico Headline',Georgia,serif;font-size:14px;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">June Oven</div>
<div class="navlinks"><span class="active">Oven</span><span>Recipes</span><span>Accessories</span><span>App</span></div>
<div class="icons">◎ ⛃</div>
</div>
<div class="hero">
<div class="hero-text">
<h1>One appliance.<br>A dozen gadgets replaced.</h1>
<p>An intelligent countertop oven that recognizes your food and cooks it perfectly — every time.</p>
<div class="btn">Pre-Order Now</div>
</div>
<div class="hero-art"></div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#3a3a3a,#181818);"><div class="badge">New</div></div>
<div class="body"><div class="title">June Oven — Gen 4</div><div class="price">$599.00</div></div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#d8d8dd,#9a9aa5);"><div class="badge sale">Sale</div></div>
<div class="body"><div class="title">Air Fry Basket</div><div class="price">$39.00</div></div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#e5d5c5,#b89468);"></div>
<div class="body"><div class="title">Roasting Rack & Pan Set</div><div class="price">$59.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #171923;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #171923;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #171923; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #1f2c39; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #223746; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #223746;
border: 1px solid #223746; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #273745;
border: 1px solid #c5c6c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #1f2c39; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f6d381; color: #171923;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Freight Sans Pro','Helvetica Neue',Arial,sans-serif; color:#273745; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-family:'Jost',sans-serif;font-size:20px;font-weight:600;color:#223746;}
.navlinks{display:flex;gap:22px;font-family:'Jost',sans-serif;font-size:14px;font-weight:500;letter-spacing:0.2px;color:#223746;}
.hero{height:250px;background:#f2f4f7;display:flex;align-items:center;padding:0 32px;gap:32px;}
.herotxt{max-width:390px;}
.h1{font-family:'Jost',sans-serif;font-size:32px;font-weight:600;letter-spacing:-0.4px;margin:0 0 10px;color:#223746;line-height:1.15;}
.sub{font-size:15px;color:#273745;line-height:1.5;margin:0 0 18px;}
.btn{display:inline-block;background:#223746;color:#fff;font-family:'Jost',sans-serif;font-size:16px;font-weight:600;padding:13px 26px;border-radius:8px;}
.strollerimg{width:200px;height:180px;border-radius:12px;background:linear-gradient(150deg,#f6d381,#ea817f 60%,#223746);position:relative;}
.grid{display:flex;gap:16px;padding:20px 32px 0;}
.card{width:210px;background:#fff;border-radius:12px;padding:16px;box-shadow:0 4px 16px rgba(0,0,0,0.06);}
.thumb{height:120px;border-radius:8px;background:linear-gradient(135deg,#f6d381,#805ad5);position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#805ad5;color:#fff;font-family:'Jost',sans-serif;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.ctitle{font-family:'Jost',sans-serif;font-size:16px;font-weight:500;margin:10px 0 4px;color:#171923;}
.cprice{font-family:'Jost',sans-serif;font-size:18px;font-weight:600;color:#171923;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#223746;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#f6d381;font-family:'Jost',sans-serif;font-size:12px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mockingbird</div>
<div class="navlinks"><span>Strollers</span><span>Travel Systems</span><span>Accessories</span><span>Compare</span></div>
</div>
<div class="hero">
<div class="herotxt">
<div class="h1">Built for the miles you actually walk.</div>
<p class="sub">Single-to-double expandability, harness clips you can trust in one hand.</p>
<div class="btn">Shop Strollers</div>
</div>
<div class="strollerimg"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge">Expandable</span></div><div class="ctitle">Wingtip Duo Stroller</div><div class="cprice">$549</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Skylark Single</div><div class="cprice">$399</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Cargo Basket Add-On</div><div class="cprice">$59</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">All-Weather Shield</div><div class="cprice">$79</div></div>
</div>
<div class="footer"><span>Single-to-Double compatible</span><span>© Mockingbird</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f6; color: #272d45;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f6; color: #272d45;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #272d45; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #d6aa62; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f4f4f6; color: #272d45;
border: 1px solid #d6aa62; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f4f4f6; color: #272d45;
border: 1px solid #c1c2ca; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #00caaa; color: #272d45;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f4f4f6; font-family:'Inter',Helvetica,Arial,sans-serif; color:#454142; }
*{box-sizing:border-box;}
.nav{height:60px;background:#ffffff;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dbdde4;}
.logo{font-family:Georgia,serif;font-size:19px;font-weight:400;color:#272d45;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;color:#454142;}
.cart{width:26px;height:26px;position:relative;}
.cartdot{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:9999px;background:#00caaa;}
.hero{height:262px;display:flex;align-items:center;padding:0 40px;background:#f7f7f8;}
.heroText{width:440px;}
.h1{font-family:Georgia,serif;font-size:30px;font-weight:400;line-height:1.25;color:#272d45;margin:0 0 14px;}
.sub{font-size:14px;color:#676986;line-height:1.6;margin:0 0 20px;width:370px;}
.cta{display:inline-flex;align-items:center;justify-content:center;width:170px;height:46px;background:#d6aa62;color:#ffffff;font-size:13px;font-weight:600;border-radius:12px;}
.carrier{position:relative;width:340px;height:210px;}
.wrap1{position:absolute;left:110px;top:20px;width:130px;height:170px;border-radius:40% 40% 20% 20%;background:linear-gradient(160deg,#d6aa62,#272d45);}
.strap{position:absolute;left:60px;top:10px;width:40px;height:180px;background:#676986;border-radius:20px;transform:rotate(-12deg);opacity:0.7;}
.sec{padding:24px 40px 0;}
.secTitle{font-family:Georgia,serif;font-size:18px;font-weight:400;color:#272d45;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#ffffff;border-radius:16px;padding:12px;}
.thumb{height:100px;border-radius:12px;margin-bottom:10px;}
.pname{font-size:13px;font-weight:600;color:#272d45;margin:0 0 4px;}
.pprice{font-size:13px;color:#676986;}
</style>
<div class="nav">
<div class="logo">Wildbird</div>
<div class="navlinks"><span>Carriers</span><span>Accessories</span><span>Registry</span></div>
<div class="cart">👜<div class="cartdot"></div></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Made to be worn. Made to last.</div>
<div class="sub">Ergonomic carriers designed for real parents, in real homes, every day.</div>
<div class="cta">Shop Carriers</div>
</div>
<div class="carrier"><div class="strap"></div><div class="wrap1"></div></div>
</div>
<div class="sec">
<div class="secTitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d6aa62,#f4f4f6);"></div><div class="pname">HipHug Original</div><div class="pprice">$139</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#676986,#f4f4f6);"></div><div class="pname">GO Sling</div><div class="pprice">$79</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#272d45,#f4f4f6);"></div><div class="pname">Drool Pad Set</div><div class="pprice">$24</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #333333;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #333333;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #333333; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f79b76; color: #000000;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: 1px solid #f79b76; border-radius: 9999px;
padding: 14px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#eeeeee; font-family:'DM Sans',Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e9e9e9;}
.logo{font-family:'DM Serif Display',Georgia,serif;font-size:22px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;}
.hero{height:220px;display:flex;align-items:center;padding:0 32px;}
.heroText{width:52%;}
.heroText h1{font-family:'DM Serif Display',Georgia,serif;font-size:36px;font-weight:400;letter-spacing:-.4px;margin:0 0 12px;line-height:1.2;}
.heroText p{font-size:14px;color:#555;max-width:320px;margin:0 0 16px;}
.btn{display:inline-block;background:#f79b76;color:#fff;font-size:15px;font-weight:600;padding:14px 28px;border-radius:9999px;}
.heroImg{width:48%;height:170px;position:relative;}
.bar{position:absolute;right:70px;top:20px;width:80px;height:110px;border-radius:16px;background:linear-gradient(160deg,#f79b76,#ff7743);}
.bar:before{content:'';position:absolute;left:26px;top:-10px;width:28px;height:16px;border-radius:6px;background:#108474;}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:206px;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(51,51,51,.06);}
.thumb{aspect-ratio:1/1;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;border-radius:9999px;z-index:2;}
.info{padding:10px 12px 14px;}
.ptitle{font-size:16px;font-weight:600;margin:0 0 4px;}
.pprice{font-size:14px;color:#555;margin:0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Unbottled</div>
<div class="navlinks"><span>Body</span><span>Hair</span><span>Bundles</span><span>Our Story</span></div>
</div>
<div class="hero">
<div class="heroText">
<h1>Solid care, zero plastic.</h1>
<p>Plastic-free body and hair care that feels like a small daily luxury, never a sacrifice.</p>
<div class="btn">Shop Solids</div>
</div>
<div class="heroImg"><div class="bar"></div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#f79b76,#ff7743)"><span class="badge" style="background:#108474;color:#fff;">Solid</span></div><div class="info"><div class="ptitle">Solid Shampoo Bar</div><div class="pprice">$18</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#108474,#0d6b5e)"><span class="badge" style="background:#fbcd0a;color:#333;">Sale</span></div><div class="info"><div class="ptitle">Body Wash Bar</div><div class="pprice">$14</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#a89cc8,#f79b76)"></div><div class="info"><div class="ptitle">Coral Clay Conditioner Bar</div><div class="pprice">$18</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#fde16c,#f79b76)"><span class="badge" style="background:#108474;color:#fff;">New</span></div><div class="info"><div class="ptitle">Reusable Travel Tin</div><div class="pprice">$9</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f1eee6; color: #272d45;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f1eee6; color: #272d45;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 500; line-height: 1.3; margin: 0; color: #272d45; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9da1a0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #d33167; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f1eee6; color: #272d45;
border: 1px solid #d33167; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f1eee6; color: #272d45;
border: 1px solid #bebebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9da1a0; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #088f87; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f1eee6; font-family:'Founders Grotesk',Helvetica,sans-serif; color:#272d45; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:Georgia,serif;font-size:22px;font-weight:600;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:0.3px;text-transform:uppercase;}
.hero{padding:10px 40px 0;display:flex;justify-content:space-between;align-items:center;}
.herotext h1{font-family:Georgia,serif;font-size:44px;font-weight:700;line-height:1.1;margin:0 0 14px;max-width:420px;}
.btn{display:inline-block;background:#d33167;color:#fff;font-size:15px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:14px 32px;border-radius:9999px;}
.herovis{width:190px;height:190px;border-radius:9999px;background:linear-gradient(160deg,#e81f76,#088f87);}
.sec{padding:20px 40px 0;}
.sectitle{font-size:14px;font-weight:500;letter-spacing:0.3px;text-transform:uppercase;margin-bottom:14px;}
.grid{display:flex;gap:18px;}
.card{width:196px;}
.thumb{aspect-ratio:1/1;border-radius:20px;margin-bottom:10px;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#088f87;color:#fff;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:4px 12px;border-radius:9999px;}
.badge.hot{background:#ff5742;}
.ptitle{font-size:16px;font-weight:500;}
.pprice{font-size:15px;color:#676986;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#272d45;color:#bdbdbd;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kosas</div>
<div class="navlinks"><div>Face</div><div>Lips</div><div>Eyes</div><div>Skincare</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Makeup that lives on skincare terms.</h1>
<div class="btn">Shop Bestsellers</div>
</div>
<div class="herovis"></div>
</div>
<div class="sec">
<div class="sectitle">Clean Bestsellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#d33167,#272d45)"><div class="badge">Clean</div></div><div class="ptitle">Tinted Face Oil</div><div class="pprice">$38</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#088f87,#f1eee6)"><div class="badge hot">Sale</div></div><div class="ptitle">Wet Lip Oil</div><div class="pprice">$22</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e81f76,#088f87)"></div><div class="ptitle">10 Second Cat Eye</div><div class="pprice">$20</div></div>
</div>
</div>
<div class="footer"><span>Ingredients · Clean Standard</span><span>Rewards · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ea4b46; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #1a1a1a;
border: 1px solid #ea4b46; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.2px; background: #f7f5f2; color: #1a1a1a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Georgia,'Times New Roman',serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dedede;font-family:'Helvetica Neue',Arial,sans-serif;}
.logo{font-family:Georgia,serif;font-size:20px;}
.navlinks{display:flex;gap:22px;font-size:14px;}
.hero{height:280px;background:#111111;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.35);}
.grain{position:absolute;inset:0;background:linear-gradient(160deg,#333,#111 60%);}
.hero h1{position:relative;color:#fff;font-size:38px;text-align:center;margin:0 0 12px;}
.hero p{position:relative;color:#eee;font-size:14px;font-family:'Helvetica Neue',Arial,sans-serif;margin:0 0 18px;}
.cta{position:relative;background:#ea4b46;color:#fff;font-family:'Helvetica Neue',Arial,sans-serif;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:14px 28px;border-radius:8px;}
.pills{display:flex;gap:10px;padding:20px 40px 0;font-family:'Helvetica Neue',Arial,sans-serif;}
.pill{background:#f7f5f2;border:1px solid #dedede;border-radius:9999px;font-size:12px;font-weight:600;letter-spacing:0.3px;padding:6px 14px;}
.pill.on{background:#1a1a1a;color:#fff;border-color:#1a1a1a;}
.grid{display:flex;gap:16px;padding:20px 40px;}
.card{width:200px;}
.thumb{aspect-ratio:3/4;height:200px;position:relative;background:#f7f5f2;}
.badge{position:absolute;bottom:8px;left:8px;background:#f7f5f2;border:1px solid #dedede;font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:3px 8px;}
.title{font-family:'Helvetica Neue',Arial,sans-serif;font-size:15px;font-weight:600;margin:8px 0 2px;}
.credit{font-size:13px;font-style:italic;color:#666;margin-bottom:6px;}
.price{font-size:20px;font-weight:700;}
</style>
<div class="nav">
<div class="logo">Rock Archive</div>
<div class="navlinks"><span>Rock</span><span>Punk</span><span>Jazz</span><span>Photographers</span></div>
</div>
<div class="hero">
<div class="grain"></div>
<h1>Concert photography, framed as history.</h1>
<p>Limited-edition silver-gelatin prints from the pit, the pier, and the last row.</p>
<div class="cta">Shop Editions</div>
</div>
<div class="pills">
<div class="pill on">All</div><div class="pill">Rock</div><div class="pill">Jazz</div><div class="pill">Blues</div><div class="pill">Punk</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#444,#111)"><div class="badge">Edition of 50</div></div><div class="title">The Last Set, 1979</div><div class="credit">Photograph by R. Alden</div><div class="price">$340</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#666,#1a1a1a)"><div class="badge">Sold Out</div></div><div class="title">Backstage Static</div><div class="credit">Photograph by M. Okafor</div><div class="price">$280</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#333,#116633)"><div class="badge">Edition of 25</div></div><div class="title">Front Row, Sound Check</div><div class="credit">Photograph by J. Renard</div><div class="price">$420</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #38393a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #38393a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #38393a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; margin: 0; color: #808184; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #5b5378; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: transparent; color: #5b5378;
border: 1px solid #5b5378; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; background: #ffffff; color: #38393a;
border: 1px solid #c7c8c8; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808184; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.33; letter-spacing: 0.2px; background: #c4d600; color: #38393a;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Century Gothic','Helvetica Neue',Arial,sans-serif; background:#f7f7f7; color:#38393a; }
*{box-sizing:border-box;}
.nav{height:72px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e6e6e6;}
.logo{font-size:20px;font-weight:200;letter-spacing:.02em;color:#2d293c;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;letter-spacing:.02em;color:#38393a;}
.hero{height:300px;background:#2d293c;display:flex;align-items:center;padding:0 44px;color:#fff;}
.herotext{width:52%;}
.herotext h1{font-size:36px;font-weight:200;line-height:1.18;margin:0 0 14px;}
.herotext p{font-size:14px;font-weight:300;color:#d2cfe0;max-width:340px;margin:0 0 20px;}
.btn{display:inline-block;background:#af272e;color:#fff;font-size:13px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;padding:12px 26px;border-radius:4px;}
.heroimg{width:48%;height:180px;border-radius:8px;background:linear-gradient(135deg,#5b5378,#00393b 70%);position:relative;}
.heroimg:before{content:'';position:absolute;left:30%;top:20%;width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.12);}
.section{padding:22px 44px 0;}
.sectitle{font-size:22px;font-weight:500;margin-bottom:16px;color:#2d293c;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border:1px solid #ececec;border-radius:4px;padding:14px;}
.thumb{height:100px;border-radius:2px;background:#f7f7f7;margin-bottom:10px;}
.ptitle{font-size:16px;font-weight:500;color:#38393a;margin-bottom:6px;}
.pprice{font-size:20px;font-weight:300;color:#38393a;}
.badge{display:inline-block;background:#da9735;color:#fff;font-size:10px;font-weight:500;letter-spacing:.02em;padding:3px 8px;border-radius:2px;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Wolf Gourmet</div>
<div class="navlinks"><div>Blenders</div><div>Toasters</div><div>Cookware</div><div>Compare</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Countertop tools for those who cook seriously.</h1>
<p>Die-cast housings and stainless bezels engineered for daily professional use at home.</p>
<div class="btn">Shop Now</div>
</div>
<div class="heroimg"></div>
</div>
<div class="section">
<div class="sectitle">Featured Appliances</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ptitle">High-Performance Blender</div><div class="pprice">$599</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Precision Toaster</div><div class="pprice">$349</div><div class="badge">New</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Multi-Function Cooker</div><div class="pprice">$799</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f0e8; color: #1c1915;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f0e8; color: #1c1915;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #1c1915; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 13px; font-weight: 400; line-height: 1.6; margin: 0; color: #7a6e66; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 1px; background: #7d3c28; color: #f4f0e8;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 1px; background: transparent; color: #1c1915;
border: 1px solid #7d3c28; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f4f0e8; color: #1c1915;
border: 1px solid #bebab3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a6e66; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 1.2px; background: #f0e6d0; color: #8b7355;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f4f0e8; font-family:Georgia,'Times New Roman',serif; color:#1c1915; }
*{box-sizing:border-box;}
.nav{height:64px;background:#f4f0e8;border-bottom:1px solid #c8a96e;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:21px;font-weight:600;letter-spacing:.5px;color:#1c1915;}
.navlinks{font-family:'Helvetica Neue',Arial,sans-serif;display:flex;gap:22px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#7d3c28;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;background:#ffffff;}
.heroText{width:420px;}
.headline{font-size:28px;font-weight:500;line-height:1.35;color:#1c1915;margin:0 0 12px;}
.sub{font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;line-height:1.6;color:#4a4a4a;margin:0 0 20px;max-width:360px;}
.btn{font-family:'Helvetica Neue',Arial,sans-serif;display:inline-block;border:1px solid #1c1915;color:#1c1915;font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:14px 26px;}
.piece{position:absolute;right:100px;top:60px;width:200px;height:150px;background:linear-gradient(160deg,#c8a96e,#7d3c28);}
.piecebadge{position:absolute;right:100px;top:60px;background:#7d3c28;color:#f4f0e8;font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;}
.sec{position:relative;height:290px;padding:26px 40px;}
.secTitle{font-size:18px;font-weight:600;color:#1c1915;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:216px;background:#fff;}
.thumb{height:110px;margin-bottom:10px;position:relative;}
.provbadge{position:absolute;top:8px;left:8px;background:#c8a96e;color:#1c1915;font-family:'Helvetica Neue',Arial,sans-serif;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 8px;}
.cardTitle{font-size:15px;font-weight:500;color:#1c1915;margin-bottom:4px;}
.cardEra{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;color:#7d3c28;margin-bottom:6px;}
.cardCta{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;color:#1c1915;text-decoration:underline;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;background:#1c1915;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;color:#c8a96e;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Lost City Nyc</div>
<div class="navlinks"><span>Furniture</span><span>Lighting</span><span>Ceramics</span><span>Industrial</span><span>Signage</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">A city of layered erasures — <br>what vanished, we keep.</div>
<div class="sub">Salvaged furniture and signage, documented and dealt with archival care.</div>
<div class="btn">Visit the Showroom</div>
</div>
<div class="piece"></div>
<div class="piecebadge">Circa 1962</div>
</div>
<div class="sec">
<div class="secTitle">Recently Acquired</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#c8a96e,#7d3c28)"><div class="provbadge">1950s · NYC</div></div><div class="cardTitle">Factory Pendant Lamp</div><div class="cardEra">Industrial, Brooklyn</div><div class="cardCta">Inquire</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#7d3c28,#1c1915)"><div class="provbadge">1930s · NYC</div></div><div class="cardTitle">Diner Counter Stool</div><div class="cardEra">Chrome & Vinyl</div><div class="cardCta">Inquire</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#c8a96e,#1c1915)"><div class="provbadge">1970s · NYC</div></div><div class="cardTitle">Hand-Painted Shop Sign</div><div class="cardEra">Enamel on Tin</div><div class="cardCta">Inquire</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#1c1915,#c8a96e)"><div class="provbadge">1940s · NYC</div></div><div class="cardTitle">Ceramic Table Lamp</div><div class="cardEra">Glazed Stoneware</div><div class="cardCta">Inquire</div></div>
</div>
</div>
<div class="footer"><span>© A Dealer of the City's Remains</span><span>Provenance Notes</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00a82d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00a82d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a82d; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00a82d; color: #f5f5f5;
border: 1px solid #27b44d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29b64f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#FFFFFF; color:#1C2B33; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; display:flex; }
.list { width:300px; background:#FAFAFA; border-right:1px solid #E4E5E5; padding:18px 0; }
.listh { font-size:22px; font-weight:700; padding:0 16px 12px; }
.row { padding:14px 16px; border-bottom:1px solid #E4E5E5; }
.row.sel { background:#E6F4EA; }
.row .t { font-size:15px; font-weight:600; }
.row .s { font-size:14px; color:#5C6970; margin-top:2px; }
.row .d { font-size:12px; color:#8C969C; margin-top:4px; }
.editor { flex:1; padding:24px 30px; }
.metaline { font-size:12px; color:#8C969C; margin-top:6px; }
.title { font-size:24px; font-weight:700; margin-top:10px; }
.tags { display:flex; gap:8px; margin-top:12px; }
.tag { background:#E6F4EA; color:#1F7A33; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; }
.body { margin-top:18px; font-size:16px; line-height:1.6; }
.h2 { font-size:20px; font-weight:700; margin-top:20px; }
.checklist { margin-top:12px; }
.citem { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:15px; }
.cbox { width:19px; height:19px; border-radius:5px; border:2px solid #8C969C; }
.cbox.checked { background:#00A82D; border:none; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; }
.strike { text-decoration:line-through; color:#8C969C; }
</style>
</head>
<body>
<div class="stage">
<div class="list">
<div style="font-size:11px;font-weight:700;color:#00A82D;letter-spacing:0.5pt;text-transform:uppercase;padding:0 16px 6px">Evernote (iOS)</div>
<div class="listh">Notes</div>
<div class="row sel"><div class="t">Product Launch Plan</div><div class="s">Q3 roadmap, timeline, blockers to resolve...</div><div class="d">Updated May 16 · Work</div></div>
<div class="row"><div class="t">Grocery List</div><div class="s">Milk, eggs, spinach, coffee beans</div><div class="d">May 14 · Personal</div></div>
<div class="row"><div class="t">Book Notes: Sapiens</div><div class="s">Ch 4 — the agricultural revolution...</div><div class="d">May 12 · Reading</div></div>
</div>
<div class="editor">
<div class="metaline">Updated May 16 · Work notebook</div>
<div class="title">Product Launch Plan</div>
<div class="tags"><span class="tag">roadmap</span><span class="tag">q3</span><span class="tag">team</span></div>
<div class="body">
Notes from the sync with design and eng. Ship date holds if QA passes by Friday.
<div class="h2">Checklist</div>
<div class="checklist">
<div class="citem"><div class="cbox checked">✓</div><span class="strike">Finalize onboarding copy</span></div>
<div class="citem"><div class="cbox checked">✓</div><span class="strike">Review pricing tiers with sales</span></div>
<div class="citem"><div class="cbox"></div><span>QA sign-off on payment flow</span></div>
<div class="citem"><div class="cbox"></div><span>Schedule launch day standup</span></div>
</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #221155;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #221155;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 22px; font-weight: 400; line-height: 1.4; margin: 0; color: #221155; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #e03e2d; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #221155;
border: 1px solid #e03e2d; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #c8c4d4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e03e2d; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:'Roboto',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#221155; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.brand { font-family:'Courier New',monospace; font-size:18px; color:#fff; letter-spacing:1px; }
.navlinks { display:flex; gap:18px; font-size:14px; font-weight:500; }
.navlinks span.active { color:#e03e2d; }
.navlinks span:not(.active) { color:#fff; }
.search-box { width:200px; height:34px; border-radius:8px; background:#2b1a6b; color:#b0a0c0; font-size:12px;
display:flex; align-items:center; padding:0 14px; }
.hero { height:180px; background:#221155; display:flex; align-items:center; justify-content:space-between; padding:0 44px;
background-image:repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 2px, transparent 2px, transparent 4px); }
.hero h1 { font-family:'Courier New',monospace; color:#fff; font-size:22px; line-height:1.5; margin:0 0 12px; max-width:440px; }
.btn-red { display:inline-block; background:#e03e2d; color:#fff; font-size:16px; font-weight:700; letter-spacing:0.5px;
padding:14px 30px; border-radius:8px; }
.cart-stack { display:flex; gap:8px; }
.cart-item { width:56px; height:76px; border-radius:6px; background:linear-gradient(160deg,#3a2a8a,#221155); border:2px solid #28a300; position:relative; }
.cart-item.b { border-color:#e03e2d; }
.cart-item.c { border-color:#fabd00cc; border-color:#ffd54f; }
.grid { display:flex; gap:16px; padding:18px 28px 0; }
.card { flex:1; background:#ffffff; border:1px solid #e8e8e8; border-radius:8px; padding:12px; position:relative; }
.card:hover {}
.card .art { height:88px; background:#f5f5f5; border-radius:6px; margin-bottom:8px; display:flex; align-items:center; justify-content:center; }
.cartridge { width:34px; height:44px; border-radius:4px 4px 8px 8px; background:linear-gradient(160deg,#666,#333); }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px;
color:#fff; padding:2px 7px; border-radius:4px; }
.badge.stock { background:#28a300; }
.badge.sale { background:#e03e2d; }
.card .title { font-size:15px; font-weight:500; color:#221155; margin-bottom:4px; }
.card .price { font-size:16px; font-weight:700; color:#221155; }
.card .price.drop { color:#28a300; }
footer { position:absolute; bottom:0; left:0; right:0; height:96px; background:#221155; color:#d0c0e0; display:flex;
align-items:center; justify-content:space-between; padding:0 44px; }
footer .col { font-size:12px; line-height:1.9; }
footer .col b { display:block; color:#fff; margin-bottom:3px; }
.wrap { position:relative; height:640px; }
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="brand">Dkoldies</div>
<div class="navlinks"><span class="active">Nintendo</span><span>Sega</span><span>PlayStation</span><span>Xbox</span></div>
<div class="search-box">Search games...</div>
</nav>
<div class="hero">
<div>
<h1>Retro games,<br>tested & guaranteed.</h1>
<a class="btn-red">Shop All Consoles</a>
</div>
<div class="cart-stack">
<div class="cart-item"></div>
<div class="cart-item b"></div>
<div class="cart-item"></div>
</div>
</div>
<div class="grid">
<div class="card"><span class="badge stock">In Stock</span><div class="art"><div class="cartridge"></div></div><div class="title">Chrono Voyager (SNES)</div><div class="price">$44.99</div></div>
<div class="card"><span class="badge sale">Sale</span><div class="art"><div class="cartridge"></div></div><div class="title">Sonic Rift (Genesis)</div><div class="price drop">$19.99</div></div>
<div class="card"><div class="art"><div class="cartridge"></div></div><div class="title">Metroid Fusion Cart</div><div class="price">$29.99</div></div>
<div class="card"><span class="badge stock">In Stock</span><div class="art"><div class="cartridge"></div></div><div class="title">Dreamcast Console Bundle</div><div class="price">$149.99</div></div>
</div>
<footer>
<div class="col"><b>Shop</b>Consoles<br>Games</div>
<div class="col"><b>Company</b>About<br>Trade-In</div>
<div class="col"><b>Dkoldies</b>Level up your shelf.</div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #003399;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #003399;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; color: #003399; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6b6860; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #003399; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #003399;
border: 1px solid #003399; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1c1c1a;
border: 1px solid #d6d1c7; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6860; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; background: #aea288; color: #1c1c1a;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c1c1a; box-sizing:border-box; font-family:'New Century Schoolbook', Georgia, serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; padding:0 32px; border-bottom:1px solid #d6d1c7; }
.brand { font-weight:700; font-size:19px; }
.navlinks { display:flex; gap:24px; margin-left:auto; }
.navlinks div { font-size:14px; }
.edition-strip { background:#aea288; padding:16px 32px; border-bottom:2px solid #d6d1c7; }
.edition-strip h1 { font-size:26px; font-weight:700; margin:0; }
.hero { background:#f5f2ec; padding:32px 32px; display:flex; align-items:center; justify-content:space-between; }
.hero .txt { max-width:420px; }
.hero h2 { font-size:32px; font-weight:700; margin:0 0 10px; letter-spacing:-0.3px; }
.hero p { font-size:15px; margin:0 0 16px; }
.hero .cta { display:inline-block; background:#003399; color:#fff; font-weight:700; letter-spacing:.5px; padding:12px 24px; border-radius:4px; }
.hero .cover { width:150px; height:210px; background:linear-gradient(160deg,#3f8da7,#aea288); border-radius:2px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:20px 32px; }
.card { border:1px solid #e8e4de; border-radius:2px; padding:12px; }
.img { aspect-ratio:3/4; border-radius:2px; margin-bottom:8px; }
.g1 { background:linear-gradient(160deg,#003399,#001c55); }
.g2 { background:linear-gradient(160deg,#3f8da7,#1c4a58); }
.g3 { background:linear-gradient(160deg,#aea288,#5c5340); }
.g4 { background:linear-gradient(160deg,#333330,#000); }
.name { font-size:15px; font-weight:700; margin-bottom:4px; }
.price { font-size:15px; font-weight:700; }
.badge { display:inline-block; background:#aea288; color:#1c1c1a; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:3px 8px; margin-bottom:6px; }
</style></head>
<body>
<nav>
<div class="brand">Field Notes</div>
<div class="navlinks"><div>Memo Books</div><div>Journals</div><div>Limited Editions</div></div>
</nav>
<div class="edition-strip"><h1>Limited Edition: Harvest</h1></div>
<div class="hero">
<div class="txt"><h2>Sixty-four pages. Shirt pocket size.</h2><p>The original 3-pack memo book, made in the USA since 2007.</p><div class="cta">Shop Now</div></div>
<div class="cover"></div>
</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="img g1"></div><div class="name">Original Kraft 3-Pack</div><div class="price">$12.95</div></div>
<div class="card"><div class="img g2"></div><div class="name">Steno Notebook</div><div class="price">$8.00</div></div>
<div class="card"><span class="badge">Archive</span><div class="img g3"></div><div class="name">Harvest Edition 3-Pack</div><div class="price">$14.95</div></div>
<div class="card"><div class="img g4"></div><div class="name">Ruled Journal</div><div class="price">$24.00</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1f2324;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1f2324;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #1f2324; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.1px; background: #226d7a; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.1px; background: #ffffff; color: #226d7a;
border: 1px solid #226d7a; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1f2324;
border: 1px solid #d0e8ed; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: 0.2px; background: #22b8d1; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Open Sans',Arial,sans-serif; color:#3c3c3c; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #d0e8ed;}
.logo{font-size:20px;font-weight:700;color:#226d7a;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;color:#1f2324;}
.hero{height:220px;background:#226d7a;display:flex;align-items:center;padding:0 44px;}
.herotext{width:56%;}
.herotext h1{font-size:32px;font-weight:700;color:#fff;margin:0 0 12px;letter-spacing:-0.5px;}
.herotext p{font-size:15px;color:#e4f5fa;margin:0 0 18px;max-width:340px;}
.cta{display:inline-block;background:#22b8d1;color:#fff;font-size:15px;font-weight:600;letter-spacing:0.1px;text-transform:uppercase;padding:12px 24px;border-radius:4px;}
.pillrow{display:flex;gap:10px;padding:16px 44px 0;}
.pill{background:#e4f5fa;color:#226d7a;font-size:12px;font-weight:600;letter-spacing:0.3px;padding:6px 14px;border-radius:9999px;border:1px solid #b0e0e9;}
.pill.active{background:#226d7a;color:#fff;}
.section{padding:16px 44px 0;}
.seclabel{font-size:17px;font-weight:600;color:#226d7a;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:180px;border:1px solid #eaf3f6;border-radius:8px;padding:10px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#226d7a;color:#fff;font-size:9px;font-weight:600;letter-spacing:0.2px;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.thumb{height:96px;border-radius:8px;margin-bottom:6px;background:#e4f5fa;}
.ptitle{font-size:15px;font-weight:600;color:#1f2324;margin-bottom:4px;}
.pprice{font-size:16px;font-weight:700;color:#226d7a;}
.swatchrow{display:flex;gap:5px;margin-top:6px;}
.swatch{width:14px;height:14px;border-radius:9999px;border:1.5px solid #d0e8ed;}
</style>
<div class="nav">
<div class="logo">Sakura OF America</div>
<div class="navlinks"><div>Pigma Micron</div><div>Gelly Roll</div><div>Cray-Pas</div><div>Koi</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Archival Ink. Sixty-Plus Colors.</h1>
<p>Pigma Micron pens and studio-grade art supplies trusted since 1963.</p>
<div class="cta">Shop Micron Pens</div>
</div>
</div>
<div class="pillrow">
<div class="pill active">Pigma Micron</div>
<div class="pill">Gelly Roll</div>
<div class="pill">Cray-Pas</div>
<div class="pill">Koi Watercolor</div>
</div>
<div class="section">
<div class="seclabel">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#226d7a,#22b8d1)"></div><div class="ptitle">Micron Pen Set, 6-Pack</div><div class="pprice">$14.99</div><div class="swatchrow"><div class="swatch" style="background:#226d7a"></div><div class="swatch" style="background:#e22120;border-color:#e22120"></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1e6d7a,#b0e0e9)"></div><div class="ptitle">Gelly Roll Gel Pens, 10ct</div><div class="pprice">$9.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#22b8d1,#226d7a)"></div><div class="ptitle">Cray-Pas Oil Pastels</div><div class="pprice">$7.49</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #292929;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #292929;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #292929; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 20px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #292929;
border: 1px solid #108474; border-radius: 20px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #292929;
border: 1px solid #cacaca; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #e22120; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,Helvetica,sans-serif; color:#323e48; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 38px;border-bottom:1px solid #dadada;}
.logo{font-family:'Shapiro 95 Super Extd',Arial,sans-serif;font-size:22px;font-weight:900;color:#108474;letter-spacing:.5px;}
.navlinks{display:flex;gap:26px;font-family:'Shapiro 45 Welter',Arial,sans-serif;font-size:13px;font-weight:600;color:#292929;}
.navcta{background:#108474;color:#fff;font-family:'Shapiro 45 Welter',Arial,sans-serif;font-size:13px;font-weight:600;padding:10px 20px;border-radius:20px;}
.hero{height:260px;background:linear-gradient(120deg,#e1e6f9 0%,#bbc1e1 100%);display:flex;align-items:center;padding:0 38px;position:relative;}
.herotext{width:460px;}
.kicker{font-family:'Shapiro 35 Feather',Arial,sans-serif;font-size:12px;font-weight:300;letter-spacing:1px;text-transform:uppercase;color:#108474;margin-bottom:14px;}
.h1{font-family:'Shapiro 95 Super Extd',Arial,sans-serif;font-size:38px;font-weight:900;line-height:1.1;letter-spacing:-.5px;color:#292929;margin:0 0 14px;}
.sub{font-size:14px;line-height:1.6;color:#323e48;margin:0 0 20px;max-width:380px;}
.cta{display:inline-block;background:#108474;color:#fff;font-family:'Shapiro 45 Welter',Arial,sans-serif;font-size:14px;font-weight:600;padding:14px 30px;border-radius:20px;}
.helmet{position:absolute;right:80px;top:50px;width:180px;height:170px;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 35% 30%,#ffffff,#108474 75%);box-shadow:0 12px 32px rgba(16,132,116,.25);}
.facemask{position:absolute;right:90px;top:130px;width:150px;height:60px;border-radius:0 0 40px 40px;background:#292929;opacity:.15;}
.sec{padding:24px 38px 0;}
.secTitle{font-family:'Shapiro 75 Heavy Extd',Arial,sans-serif;font-size:19px;font-weight:800;color:#292929;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:12px;padding:14px;border:1px solid #eeeeee;position:relative;}
.badge{position:absolute;top:12px;left:12px;background:#ff3b3a;color:#fff;font-family:'Shapiro 45 Welter',Arial,sans-serif;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;border-radius:20px;padding:3px 10px;z-index:2;}
.thumb{height:100px;background:#f9fafb;border-radius:12px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;}
.thumb-shape{width:70px;height:60px;border-radius:50% 50% 45% 45%;}
.pname{font-family:'Shapiro 45 Welter',Arial,sans-serif;font-size:14px;font-weight:600;color:#292929;margin:0 0 4px;}
.pprice{font-size:15px;font-weight:700;color:#108474;margin:0;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Vicis</div>
<div class="navlinks"><span>Helmets</span><span>Youth</span><span>Technology</span><span>Fit Guide</span></div>
<div class="navcta">Find Your Fit</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Protection First</div>
<div class="h1">Engineered like medicine, not merchandise.</div>
<div class="sub">Helmets built on impact science, not tradition — protection before aggression.</div>
<div class="cta">Shop Helmets</div>
</div>
<div class="helmet"></div><div class="facemask"></div>
</div>
<div class="sec">
<div class="secTitle">Featured Helmets</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb"><div class="thumb-shape" style="background:radial-gradient(circle at 35% 30%,#fff,#108474 75%);"></div></div><div class="pname">Zero1 Pro</div><div class="pprice">$949.99</div></div>
<div class="card"><div class="thumb"><div class="thumb-shape" style="background:radial-gradient(circle at 35% 30%,#fff,#bbc1e1 75%);"></div></div><div class="pname">Zero2 Elite</div><div class="pprice">$899.99</div></div>
<div class="card"><div class="thumb"><div class="thumb-shape" style="background:radial-gradient(circle at 35% 30%,#fff,#292929 75%);"></div></div><div class="pname">Youth Trainer</div><div class="pprice">$399.99</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6d7175; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.25px; background: #f8c423; color: #111111;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.25px; background: #f8f8f8; color: #202223;
border: 1px solid #f8c423; border-radius: 0px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f8f8f8; color: #202223;
border: 1px solid #bebebe; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d7175; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f8c423; color: #111111;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif; background:#f8f8f8; color:#202223; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#111111;}
.logo{font-size:18px;font-weight:700;color:#fff;letter-spacing:0.5px;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:#fff;}
.navlinks .on{color:#f8c423;}
.hero{height:220px;display:flex;background:#111111;}
.herotext{width:50%;display:flex;flex-direction:column;justify-content:center;padding:0 32px;}
.herotext h1{font-size:32px;font-weight:700;color:#fff;margin:0 0 10px;letter-spacing:-0.5px;line-height:1.15;}
.herotext p{font-size:14px;color:#c5c8d1;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#f8c423;color:#111111;font-size:14px;font-weight:600;letter-spacing:0.25px;padding:12px 24px;width:fit-content;}
.heroimg{width:50%;position:relative;background:#202223;}
.speaker{position:absolute;left:70px;top:36px;width:180px;height:150px;background:#111111;}
.cone{position:absolute;left:100px;top:56px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 40% 40%, #f8c423, #6d7175 75%);}
.conedot{position:absolute;left:145px;top:101px;width:20px;height:20px;border-radius:50%;background:#111111;}
.grid{display:flex;gap:1px;background:#e0e1e5;padding:14px 32px 0;}
.card{flex:1;background:#fff;padding:12px;position:relative;}
.strip{height:4px;background:#f8c423;margin:-12px -12px 10px;}
.thumb{height:88px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;background:#f0f0f0;}
.thumbcone{width:56px;height:56px;border-radius:50%;}
.pname{font-size:14px;font-weight:600;color:#202223;}
.pprice{font-size:14px;color:#202223;margin-top:4px;}
.badge{position:absolute;top:2px;right:8px;background:#f8c423;color:#111111;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#111111;color:#c5c8d1;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Krk Systems</div>
<div class="navlinks"><div class="on">Rokit</div><div>Studio</div><div>Subwoofers</div><div>Support</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Reference monitors. Zero compromise.</h1>
<p>The signature yellow cone that studios trust to tell the truth about your mix.</p>
<div class="cta">SHOP ROKIT SERIES</div>
</div>
<div class="heroimg"><div class="speaker"></div><div class="cone"></div><div class="conedot"></div></div>
</div>
<div class="grid">
<div class="card"><div class="strip"></div><span class="badge">New</span><div class="thumb"><div class="thumbcone" style="background:radial-gradient(circle at 40% 40%,#f8c423,#202223 75%)"></div></div><div class="pname">Rokit 5 G4</div><div class="pprice">$149.00</div></div>
<div class="card"><div class="strip"></div><div class="thumb"><div class="thumbcone" style="background:radial-gradient(circle at 40% 40%,#f8c423,#202223 75%)"></div></div><div class="pname">Rokit 8 G4</div><div class="pprice">$249.00</div></div>
<div class="card"><div class="strip"></div><div class="thumb"><div class="thumbcone" style="background:radial-gradient(circle at 40% 40%,#c5c8d1,#202223 75%)"></div></div><div class="pname">S10.4 Subwoofer</div><div class="pprice">$349.00</div></div>
<div class="card"><div class="strip"></div><div class="thumb"><div class="thumbcone" style="background:radial-gradient(circle at 40% 40%,#f8c423,#202223 75%)"></div></div><div class="pname">V-Series V6</div><div class="pprice">$399.00</div></div>
</div>
<div class="footer"><span>© KRK Systems</span><span>Warranty · Downloads</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; background: #337ab7; color: #ffffff;
border: none; border-radius: 4px; padding: 6px 12px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; background: #ffffff; color: #555555;
border: 1px solid #337ab7; border-radius: 4px;
padding: 6px 12px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #555555;
border: 1px solid #c1c1c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; background: #dff0d8; color: #337ab7;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Full Moon Direct</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#555555; }
*{box-sizing:border-box;}
.nav{background:#f8f8f8;height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #e7e7e7;}
.logo{font-size:16px;font-weight:700;color:#080808;}
.navlinks{display:flex;gap:0;font-size:14px;font-weight:600;color:#555555;}
.navlinks span{padding:15px;}
.navlinks span.active{background:#e7e7e7;}
.searchrow{display:flex;align-items:center;gap:8px;}
.searchbox{border:1px solid #e5e5e5;border-radius:4px;height:34px;padding:6px 12px;font-size:12px;color:#777;width:160px;}
.searchbtn{background:#337ab7;color:#fff;border:none;border-radius:4px;height:34px;padding:6px 12px;font-size:12px;font-weight:600;}
.alert{background:#dff0d8;border:1px solid #3c763d;color:#3c763d;font-size:14px;padding:10px 20px;margin:14px 20px 0;border-radius:6px;}
.content{display:flex;gap:16px;padding:14px 20px 0;}
.catcol{width:150px;font-size:14px;}
.catcol .h{font-weight:600;color:#080808;margin-bottom:8px;}
.catcol div.item{padding:6px 0;color:#337ab7;}
.main{flex:1;}
.banner{background:#f5f5f5;border:1px solid #eeeeee;border-radius:6px;padding:18px 20px;margin-bottom:14px;}
.banner h1{font-size:22px;font-weight:600;margin:0 0 6px;color:#080808;}
.banner p{font-size:12px;color:#777;margin:0;}
.grid{display:flex;gap:14px;}
.card{flex:1;border:1px solid #eeeeee;padding:16px;}
.card-img{background:#e5e5e5;height:150px;position:relative;}
.badge{position:absolute;top:6px;left:6px;font-size:11px;font-weight:700;padding:2px 6px;border-radius:4px;}
.badge.instock{background:#dff0d8;color:#3c763d;}
.badge.sold{background:#f2dede;color:#a94442;}
.badge.pre{background:#fcf8e3;color:#8a6d3b;}
.card-title{font-size:16px;font-weight:600;margin-top:8px;color:#080808;}
.card-meta{font-size:11px;color:#9d9d9d;margin-top:2px;}
.card-price{font-size:16px;font-weight:700;color:#555555;margin-top:6px;}
.card-price.sale{color:#d9534f;}
.btnrow{margin-top:10px;}
.btn{background:#337ab7;color:#fff;border:none;border-radius:4px;padding:6px 12px;font-size:12px;font-weight:600;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#080808;color:#9d9d9d;font-size:11px;text-align:center;padding:12px;}
</style>
<div style="position:relative;height:640px;">
<div class="nav">
<div class="logo">Full Moon Direct</div>
<div class="navlinks"><span class="active">Catalog</span><span>New Releases</span><span>Collections</span><span>Account</span></div>
<div class="searchrow"><input class="searchbox" placeholder="Search titles..."><button class="searchbtn">Search</button></div>
</div>
<div class="alert">In Stock: Direct-to-collector shipping resumes Monday. Orders over $50 ship free.</div>
<div class="content">
<div class="catcol">
<div class="h">Categories</div>
<div class="item">Cult Classics</div>
<div class="item">Late Night</div>
<div class="item">Import Editions</div>
<div class="item">Director Sets</div>
<div class="item">Limited Runs</div>
<div class="item">Clearance</div>
</div>
<div class="main">
<div class="banner"><h1>Rare genre cinema, direct to your door</h1><p>Adult. Sexy. Rare. Independent releases you won't find anywhere else.</p></div>
<div class="grid">
<div class="card"><div class="card-img"><div class="badge instock">In Stock</div></div><div class="card-title">Midnight Reel Vol. 3</div><div class="card-meta">Region Free · DVD</div><div class="card-price">$14.99</div><div class="btnrow"><button class="btn">Add to Cart</button></div></div>
<div class="card"><div class="card-img"><div class="badge sold">Sold Out</div></div><div class="card-title">Neon Static</div><div class="card-meta">Import · Blu-ray</div><div class="card-price sale">$9.99</div><div class="btnrow"><button class="btn">Notify Me</button></div></div>
<div class="card"><div class="card-img"><div class="badge pre">Pre-Order</div></div><div class="card-title">Velvet Curfew</div><div class="card-meta">Director's Cut · DVD</div><div class="card-price">$19.99</div><div class="btnrow"><button class="btn">Pre-Order</button></div></div>
</div>
</div>
</div>
<div class="footer">© Full Moon Direct — Privacy Policy — Terms of Service</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #131313; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #131313; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #f0523d; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #272727; color: #ffffff;
border: 1px solid #f0523d; border-radius: 9999px;
padding: 14px 32px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #272727; color: #ffffff;
border: 1px solid #121212; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f0523d; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#131313; font-family:'Century Gothic','AppleGothic',sans-serif; color:#ffffff; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.navlinks .on{color:#f0523d;}
.navlinks span{color:#aaaaaa;}
.hero{height:220px;display:flex;align-items:center;padding:0 32px;background:radial-gradient(circle at 75% 40%,#272727,#131313 70%);}
.h1{font-size:30px;font-weight:600;line-height:1.25;margin:0 0 12px;width:420px;}
.sub{font-size:14px;color:#d0d0d0;margin:0 0 18px;width:360px;}
.btn{display:inline-block;background:#f0523d;color:#fff;font-size:16px;font-weight:600;letter-spacing:0.5px;padding:14px 30px;border-radius:9999px;}
.phone{position:absolute;right:80px;top:30px;width:120px;height:160px;background:linear-gradient(150deg,#3e3e3e,#f0523d 90%);border-radius:20px;}
.section{padding:20px 32px 0;}
.stitle{font-size:16px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:150px;background:#272727;border-radius:20px;padding:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#f0523d;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:2px 8px;border-radius:8px;}
.thumb{height:88px;border-radius:20px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;margin-bottom:4px;}
.pprice{font-size:15px;color:#f6f6f6;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#aaaaaa;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Taikan</div>
<div class="navlinks"><span class="on">Cases</span><span>Straps</span><span>Chargers</span><span>Bundles</span></div>
</div>
<div class="hero">
<div>
<div class="h1">A case that matches the black glass.</div>
<div class="sub">Sculptural phone accessories for a screen that deserves the same restraint.</div>
<div class="btn">Shop Cases</div>
</div>
<div class="phone"></div>
</div>
<div class="section">
<div class="stitle">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(150deg,#3e3e3e,#f0523d);"></div><div class="pname">Obsidian Slim Case</div><div class="pprice">$34.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#222222,#3e3e3e);"></div><div class="pname">Woven Wrist Strap</div><div class="pprice">$18.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#f0523d,#1d1d1d);"></div><div class="pname">MagFast Charger</div><div class="pprice">$42.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#3e3e3e,#111111);"></div><div class="pname">Card Wallet Case</div><div class="pprice">$38.00</div></div>
</div>
</div>
<div class="footer"><span>© Sculptural Phone Accessories</span><span>Fit Guide · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9e9e9e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #282828; color: #dedede;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #282828; color: #dedede;
border: 1px solid #282828; border-radius: 9999px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1e1e1e; color: #dedede;
border: 1px solid #121212; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9e9e9e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #dedede; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>G-Wolves</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121212; font-family:'Instrument Sans','Epilogue',sans-serif; color:#dedede; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #2e2e2e;}
.logo{font-family:'Epilogue','Instrument Sans',sans-serif;font-size:19px;font-weight:700;color:#dedede;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;color:#9e9e9e;}
.navlinks span.active{color:#dedede;border-bottom:2px solid #dedede;padding-bottom:20px;}
.search-pill{background:#1e1e1e;border:1px solid #3a3a3a;border-radius:9999px;padding:8px 16px;font-size:13px;color:#dedede;width:160px;}
.hero{padding:36px 32px;min-height:220px;display:flex;align-items:center;justify-content:space-between;}
.hero-copy{max-width:440px;}
h1{font-family:'Epilogue','Instrument Sans',sans-serif;font-size:36px;font-weight:700;line-height:1.1;letter-spacing:-0.5px;margin:0 0 12px;}
.sub{font-size:15px;color:#9e9e9e;margin:0 0 20px;}
.cta{background:#282828;color:#dedede;border:none;border-radius:9999px;padding:14px 32px;font-size:15px;font-weight:600;letter-spacing:0.2px;}
.mouse{width:220px;height:170px;position:relative;}
.mousebody{position:absolute;bottom:20px;left:60px;width:100px;height:120px;background:#282828;border-radius:40% 40% 20% 20%;box-shadow:0 12px 30px rgba(0,0,0,0.5);}
.honeycomb{position:absolute;top:20px;left:20px;width:14px;height:14px;border:1px solid #444;border-radius:2px;}
.section{padding:22px 32px 0;}
.section h2{font-family:'Epilogue',sans-serif;font-size:24px;font-weight:600;margin:0 0 16px;}
.grid{display:flex;gap:16px;}
.card{flex:1;background:#282828;border-radius:12px;padding:16px;}
.card-img{background:#1e1e1e;border-radius:8px;height:100px;display:flex;align-items:center;justify-content:center;position:relative;}
.mini-mouse{width:60px;height:74px;background:linear-gradient(160deg,#dedede,#9e9e9e);border-radius:40% 40% 20% 20%;}
.badge{position:absolute;top:8px;left:8px;background:#dedede;color:#121212;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.card-title{font-size:16px;font-weight:500;margin-top:10px;}
.card-price{font-size:14px;color:#9e9e9e;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">G Wolves</div>
<div class="navlinks"><span class="active">Mice</span><span>Skates</span><span>Cables</span><span>Software</span></div>
<input class="search-pill" placeholder="Search...">
</div>
<div class="hero">
<div class="hero-copy">
<h1>Engineered for the<br>fastest hands</h1>
<p class="sub">Honeycomb shells, custom PCBs, and PTFE feet — lightweight gaming mice built with no compromise.</p>
<button class="cta">Shop Mice</button>
</div>
<div class="mouse"><div class="mousebody"><div class="honeycomb"></div></div></div>
</div>
<div class="section">
<h2>Featured Mice</h2>
<div class="grid">
<div class="card"><div class="card-img"><div class="badge">New</div><div class="mini-mouse"></div></div><div class="card-title">Hati HSK Pro</div><div class="card-price">$69.99</div></div>
<div class="card"><div class="card-img"><div class="mini-mouse" style="background:linear-gradient(160deg,#f0f0f0,#c9c9c9);"></div></div><div class="card-title">Skoll II Wireless</div><div class="card-price">$79.99</div></div>
<div class="card"><div class="card-img"><div class="mini-mouse" style="background:linear-gradient(160deg,#9e9e9e,#282828);"></div></div><div class="card-title">Hati S Wireless</div><div class="card-price">$64.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #a3a3a3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #007934; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #f8f8f8; color: #121212;
border: 1px solid #007934; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f8f8f8; color: #121212;
border: 1px solid #bebebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a3a3a3; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #8b0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f8f8; font-family:'Segoe UI',Roboto,Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.topnav{height:60px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-size:19px;font-weight:600;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#fff;}
.searchpill{width:340px;height:40px;background:#f8f8f8;border-radius:9999px;display:flex;align-items:center;padding:0 20px;font-size:13px;color:#a3a3a3;}
.catstrip{display:flex;gap:10px;padding:14px 32px;background:#f8f8f8;}
.pill{background:#f0f1f2;border-radius:9999px;font-size:13px;padding:8px 16px;color:#404040;}
.pill.active{background:#007934;color:#fff;}
.hero{height:190px;display:flex;align-items:center;padding:0 32px;}
.heroText{width:52%;}
.heroText h1{font-size:30px;font-weight:600;margin:0 0 10px;letter-spacing:-.3px;}
.heroText p{font-size:14px;color:#404040;max-width:320px;margin:0 0 14px;}
.btn{display:inline-block;background:#007934;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;border-radius:8px;}
.heroImg{width:48%;height:140px;position:relative;}
.hub{position:absolute;right:60px;top:10px;width:120px;height:70px;border-radius:12px;background:linear-gradient(135deg,#121212,#007934);}
.hub:before{content:'';position:absolute;left:10px;top:20px;width:8px;height:8px;border-radius:9999px;background:#3ed660;box-shadow:0 0 6px #3ed660;}
.grid{display:flex;gap:14px;padding:6px 32px 0;}
.card{width:206px;background:#fff;border-radius:8px;padding:12px;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.04);}
.badge{position:absolute;top:20px;left:20px;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 6px;color:#fff;z-index:2;}
.thumb{height:88px;border-radius:4px;background:#f0f1f2;margin-bottom:8px;}
.pname{font-size:14px;font-weight:600;margin:0 0 4px;}
.pprice{font-size:14px;color:#404040;margin:0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="topnav">
<div class="logo">Ugreen</div>
<div class="navlinks"><span>Chargers</span><span>Cables</span><span>Hubs</span></div>
<div class="searchpill">Search cables, chargers, hubs...</div>
</div>
<div class="catstrip"><div class="pill active">All</div><div class="pill">USB-C</div><div class="pill">GaN Chargers</div><div class="pill">Power Banks</div></div>
<div class="hero">
<div class="heroText">
<h1>Charging gear you never think about.</h1>
<p>GaN chargers, braided cables, and hubs built for the drawer you actually reach for.</p>
<div class="btn">Shop Chargers</div>
</div>
<div class="heroImg"><div class="hub"></div></div>
</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#c30000;">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#007934,#121212)"></div><div class="pname">100W GaN Charger</div><div class="pprice">$44.99</div></div>
<div class="card"><span class="badge" style="background:#ee901d;">New</span><div class="thumb" style="background:linear-gradient(135deg,#121212,#007934)"></div><div class="pname">Nexode 4-Port Hub</div><div class="pprice">$59.99</div></div>
<div class="card"><span class="badge" style="background:#7b1ec7;">Best</span><div class="thumb" style="background:linear-gradient(135deg,#3ed660,#121212)"></div><div class="pname">Braided USB-C Cable</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#404040,#007934)"></div><div class="pname">20000mAh Power Bank</div><div class="pprice">$49.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #14161a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #14161a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #909192; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fcfcfc; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #14161a; color: #fcfcfc;
border: 1px solid #fcfcfc; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #14161a; color: #f5f5f5;
border: 1px solid #383a3d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #909192; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #393b3e; color: #fcfcfc;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcfcfc; color:#14161a; box-sizing:border-box;
font-family:"Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; border-bottom:1px solid #e5e7eb; }
.brand { font-family:"Playfair Display", Georgia, serif; font-size:20px; font-weight:600; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; color:#6c727f; }
.btn { background:#14161a; color:#fafafa; border-radius:6px; padding:8px 16px; font-size:14px; font-weight:500; }
.hero { padding:40px 36px 26px; display:flex; align-items:center; gap:30px; }
.hero-txt { flex:1; }
.hero h1 { font-family:"Playfair Display", Georgia, serif; font-size:42px; font-weight:400; letter-spacing:0.4px; line-height:1.2; margin:0 0 16px; }
.hero p { font-size:16px; color:#6c727f; line-height:1.625; margin:0 0 20px; max-width:400px; }
.btn-cta { display:inline-block; background:#14161a; color:#fafafa; border-radius:6px; padding:12px 32px; font-size:16px; font-weight:500; }
.hero-visual { width:250px; height:170px; position:relative; flex-shrink:0; }
.ring { position:absolute; border-radius:50%; border:1px solid #e8eaed; }
.r1 { width:170px; height:170px; top:0; left:40px; }
.r2 { width:110px; height:110px; top:30px; left:70px; background:#f1f2f4; }
.r3 { width:60px; height:60px; top:55px; left:95px; background:#14161a; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 36px 26px; }
.card { background:#fafafa; border:1px solid #e5e7eb; border-radius:8px; padding:22px; }
.card h3 { font-family:"Playfair Display", Georgia, serif; font-size:20px; font-weight:600; margin:0 0 8px; }
.card p { font-size:14px; color:#6c727f; line-height:1.625; margin:0; }
.quote { margin:0 36px 24px; padding:20px 24px; border-left:2px solid #14161a; background:#f1f2f4; }
.quote p { font-family:"Playfair Display", Georgia, serif; font-size:18px; font-style:italic; margin:0; color:#14161a; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #e5e7eb; padding:12px 36px;
display:flex; justify-content:space-between; font-size:12px; color:#6c727f; }
</style></head>
<body style="position:relative">
<nav>
<span class="brand">Riiid</span>
<div class="navlinks"><span>Santa</span><span>Research</span><span>Careers</span><span>About</span></div>
<span class="btn">Try Santa</span>
</nav>
<section class="hero">
<div class="hero-txt">
<h1>AI that grows humans</h1>
<p>Personalized learning built on adaptive AI — helping every learner reach their own pace of mastery.</p>
<span class="btn-cta">Get started</span>
</div>
<div class="hero-visual"><span class="ring r1"></span><span class="ring r2"></span><span class="ring r3"></span></div>
</section>
<div class="cards">
<div class="card"><h3>Adaptive Pathways</h3><p>Every question adjusts to what the learner already knows.</p></div>
<div class="card"><h3>Diagnostic Precision</h3><p>Pinpoint the exact concept holding a learner back.</p></div>
<div class="card"><h3>Human in the Loop</h3><p>Tutors and teachers stay central — AI amplifies, not replaces.</p></div>
</div>
<div class="quote"><p>"Education should meet each learner exactly where they are."</p></div>
<footer>
<span>© Riiid</span>
<span>Santa · Research · Careers · About</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfbf6; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfbf6; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #45523e; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fcfbf6; color: #45523e;
border: 1px solid #45523e; border-radius: 8px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfbf6; color: #272d45;
border: 1px solid #c4c3c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #a32121; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcfbf6; color:#272d45; box-sizing:border-box;
font-family:'Georgia','Times New Roman',serif; }
* { box-sizing:border-box; }
nav { height:66px; background:#fcfbf6; display:flex; align-items:center; justify-content:space-between; padding:0 40px; border-bottom:1px solid #e5e5eb; }
.brand { color:#45523e; font-size:22px; font-weight:400; margin:0; font-style:italic; }
.navlinks { display:flex; gap:26px; align-items:center; font-family:'Trebuchet MS',sans-serif; }
.navlinks span { font-size:11px; color:#3d4534; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }
.navlinks .cta { background:#45523e; color:#fff; padding:9px 20px; border-radius:24px; font-size:11px; font-weight:700; }
.hero { height:250px; background:#eff2e9; display:flex; align-items:center; padding:0 40px; gap:36px; border-radius:0 0 32px 32px; }
.jar { width:150px; height:190px; position:relative; }
.jar .lid { position:absolute; top:0; left:30px; right:30px; height:20px; background:#a32121; border-radius:6px; }
.jar .body { position:absolute; top:16px; left:8px; right:8px; bottom:0; background:linear-gradient(160deg,#45523e,#2f3829); border-radius:20px 20px 30px 30px; }
.jar .label { position:absolute; top:60px; left:24px; right:24px; height:60px; background:#fcfbf6; border-radius:4px; }
.heroTxt h1 { font-size:30px; font-weight:400; margin:0 0 12px; line-height:1.3; color:#1c1c1c; }
.heroTxt p { font-family:'Trebuchet MS',sans-serif; font-size:13px; color:#676986; margin:0 0 18px; max-width:340px; line-height:1.6; }
.heroTxt .cta { display:inline-block; font-family:'Trebuchet MS',sans-serif; background:#45523e; color:#fff; font-weight:700; font-size:12px; padding:12px 28px; border-radius:24px; }
.section-label { padding:18px 40px 10px; font-size:17px; font-style:italic; color:#1c1c1c; }
.grid { display:flex; gap:16px; padding:0 40px; }
.card { flex:1; background:#ffffff; border-radius:16px; padding:14px; }
.card .art { height:88px; border-radius:16px; margin-bottom:10px; position:relative; }
.a1 { background:linear-gradient(160deg,#45523e,#eff2e9); } .a2 { background:linear-gradient(160deg,#a32121,#f3768d); }
.a3 { background:linear-gradient(160deg,#52604a,#eff2e9); } .a4 { background:linear-gradient(160deg,#ffcf2a,#4469af); }
.card .dot { position:absolute; top:14px; right:14px; width:16px; height:16px; border-radius:50%; background:#a32121; }
.card h3 { font-family:'Trebuchet MS',sans-serif; font-size:12px; font-weight:700; color:#1c1c1c; margin:0 0 4px; }
.card p { font-family:'Trebuchet MS',sans-serif; font-size:10px; color:#676986; margin:0 0 8px; }
.card .price { font-family:'Trebuchet MS',sans-serif; font-size:13px; font-weight:700; color:#45523e; }
footer { height:58px; margin-top:14px; background:#eff2e9; display:flex; align-items:center; gap:26px; padding:0 40px; font-family:'Trebuchet MS',sans-serif; border-radius:24px 24px 0 0; }
footer span { font-size:10px; color:#3d4534; font-weight:700; letter-spacing:0.04em; }
</style></head>
<body>
<nav>
<p class="brand">Flamingo Estate</p>
<div class="navlinks"><span>Body</span><span>Bath</span><span>Home</span><span>Garden</span><span class="cta">Shop the Estate</span></div>
</nav>
<div class="hero">
<div class="jar"><div class="lid"></div><div class="body"></div><div class="label"></div></div>
<div class="heroTxt">
<h1>A garden, bottled.</h1>
<p>Rosemary, tomato, and honey — grown, harvested, and pressed into bath and body rituals that still have soil on them.</p>
<span class="cta">Explore the Harvest</span>
</div>
</div>
<div class="section-label">From the Estate</div>
<div class="grid">
<div class="card"><div class="art a1"><span class="dot"></span></div><h3>Tomato & Basil Soak</h3><p>Body Oil, 200ml</p><div class="price">$48</div></div>
<div class="card"><div class="art a2"></div><h3>Heirloom Rose Candle</h3><p>Limited Harvest</p><div class="price">$56</div></div>
<div class="card"><div class="art a3"></div><h3>Rosemary Hand Wash</h3><p>Kitchen Collection</p><div class="price">$32</div></div>
<div class="card"><div class="art a4"></div><h3>Honey Fig Body Butter</h3><p>Estate Reserve</p><div class="price">$44</div></div>
</div>
<footer>
<span>GROWN ON THE ESTATE</span><span>GIFT THE HARVEST</span><span>OUR FARMING PRACTICES</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdfdfd; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdfdfd; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #6d6d6d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #1863dc; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fdfdfd; color: #1863dc;
border: 1px solid #1863dc; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fdfdfd; color: #1a1a1a;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d6d6d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: 0.2px; background: #1863dc; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fdfdfd; color:#1a1a1a; box-sizing:border-box;
font-family:'Poppins',sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:'Courier','Courier 10 Pitch',monospace; }
nav { height:56px; background:#003388; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#ffffff; font-size:16px; font-weight:600; }
.navlinks { display:flex; gap:22px; font-size:12px; color:#abb8c3; }
.navlinks span.on { color:#fac917; font-weight:600; }
.search { background:#ffffff; border-radius:4px; padding:7px 16px; font-size:11px; color:#6d6d6d; width:180px; }
.wrap { display:flex; height:524px; padding:16px 30px; gap:26px; }
.photo { width:280px; flex-shrink:0; background:#ebebeb; border-radius:4px; display:flex; align-items:center; justify-content:center; position:relative; }
.scope { width:70px; height:190px; position:relative; }
.scope::before { content:''; position:absolute; top:0; left:14px; width:42px; height:70px; border-radius:4px; background:linear-gradient(180deg,#1863dc,#003388); }
.scope::after { content:''; position:absolute; bottom:0; left:0; width:70px; height:60px; border-radius:4px; background:#02609b; }
.gold-badge { position:absolute; top:14px; left:14px; background:#fac917; color:#1a1a1a; font-size:10px; font-weight:600; padding:4px 10px; border-radius:4px; }
.info { flex:1; display:flex; flex-direction:column; gap:10px; }
.model-code { font-size:12px; color:#6d6d6d; }
.info h1 { font-size:20px; font-weight:600; margin:0; line-height:1.3; }
.spec-row { display:flex; gap:20px; font-size:11px; border-top:1px solid #d5d5d5; border-bottom:1px solid #d5d5d5; padding:10px 0; }
.spec-row div b { display:block; font-size:13px; color:#1863dc; font-family:'Courier','Courier 10 Pitch',monospace; }
.desc { font-size:12.5px; color:#404040; line-height:1.6; max-width:460px; }
.accessory-chip-row { display:flex; gap:8px; }
.accessory-chip-row span { font-size:10.5px; border:1px solid #d5d5d5; border-radius:4px; padding:4px 10px; color:#404040; }
.price-row { display:flex; align-items:center; gap:16px; margin-top:auto; }
.price { font-size:20px; font-weight:600; }
.btn-buy { background:#1863dc; color:#fff; border:none; border-radius:4px; padding:12px 24px; font-size:12px; font-weight:600; }
.btn-quote { border:1px solid #003388; color:#003388; border-radius:4px; padding:12px 18px; font-size:12px; font-weight:600; }
footer { height:60px; background:#003388; display:flex; align-items:center; justify-content:space-between; padding:0 30px; font-size:10.5px; color:#abb8c3; }
</style></head>
<body>
<nav>
<p class="brand">Accu Scope</p>
<div class="navlinks"><span>Compound</span><span class="on">Stereo</span><span>Digital</span><span>Fluorescence</span></div>
<span class="search">Search model…</span>
</nav>
<div class="wrap">
<div class="photo"><span class="gold-badge">Sale Ends Friday</span><div class="scope"></div></div>
<div class="info">
<span class="model-code mono">MODEL: ASZ-2000-T</span>
<h1>Stereo Zoom Microscope, Trinocular, LED Ring Light</h1>
<div class="spec-row">
<div>Magnification<b>7x–45x</b></div>
<div>Objective<b>0.7x–4.5x</b></div>
<div>Illumination<b>LED Ring</b></div>
</div>
<p class="desc">Precision-milled optics calibrated to a tolerance measured in microns — built for inspection, assembly, and research benches that can't afford drift.</p>
<div class="accessory-chip-row"><span>Camera Compatible</span><span>2-Yr Warranty</span><span>US Calibrated</span></div>
<div class="price-row">
<span class="price">$1,890.00</span>
<button class="btn-buy">Add to Cart</button>
<button class="btn-quote">Request Quote</button>
</div>
</div>
</div>
<footer><span>© Accu Scope</span><span>Calibration Service · Warranty · Distributors</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4500; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4500; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff8717; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4500; color: #000000;
border: 1px solid #ff8717; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4500; color: #f5f5f5;
border: 1px solid #fd6127; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff5004; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F6F7F8; color:#1A1A1B; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Noto Sans", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:44px; background:#fff; border-bottom:1px solid #EDEFF1; display:flex; align-items:center;
padding:0 28px; gap:14px; }
.av-me { width:26px; height:26px; border-radius:50%; background:#FF4500; }
.brand { font-size:17px; font-weight:600; letter-spacing:-0.2px; margin:0; color:#FF4500; }
.switcher { margin-left:auto; font-size:13px; color:#7C7C7C; display:flex; align-items:center; gap:6px; }
.layout { display:flex; height:596px; }
.feed { flex:1; padding:12px 20px; overflow:hidden; }
.card { background:#fff; border-radius:16px; padding:12px; margin-bottom:8px; }
.head { display:flex; align-items:center; gap:6px; font-size:12px; color:#7C7C7C; margin-bottom:8px; }
.sub-av { width:20px; height:20px; border-radius:50%; }
.sub-av.g { background:#24A0ED; } .sub-av.o { background:#FF4500; } .sub-av.p { background:#0079D3; }
.subname { font-weight:600; color:#1A1A1B; }
.title { font-size:18px; font-weight:600; margin:0 0 8px; line-height:1.25; letter-spacing:-0.2px; }
.flair { display:inline-block; font-size:11px; font-weight:600; background:#F3B200; color:#000; border-radius:4px;
padding:3px 6px; margin-bottom:8px; }
.flair.oc { background:#46D160; color:#fff; }
.preview { height:100px; border-radius:16px; margin-bottom:10px; }
.p1 { background:linear-gradient(135deg,#ffd8a8,#ff922b); }
.p2 { background:linear-gradient(135deg,#a5d8ff,#4dabf7); }
.actionrow { display:flex; align-items:center; gap:14px; }
.votecol { display:flex; align-items:center; gap:4px; background:#F2F3F5; border-radius:16px; padding:4px 8px; }
.votecol .up { color:#FF8717; font-weight:700; }
.votecol .karma { font-size:12px; font-weight:700; color:#1A1A1B; }
.votecol .down { color:#7193FF; font-weight:700; }
.meta-icon { font-size:12px; color:#878A8C; display:flex; align-items:center; gap:4px; }
.side { width:230px; padding:14px 18px; border-left:1px solid #EDEFF1; background:#fff; }
.side-card { border:1px solid #EDEFF1; border-radius:12px; padding:12px; margin-bottom:10px; }
.side-title { font-size:12px; font-weight:700; letter-spacing:0.5px; color:#7C7C7C; text-transform:uppercase; margin-bottom:8px; }
.rec { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:12px; font-weight:600; }
.rec-av { width:20px; height:20px; border-radius:50%; }
.joinbtn { font-size:11px; font-weight:600; color:#fff; background:#FF4500; border-radius:24px; padding:4px 12px; margin-left:auto; }
.tabbar { position:absolute; left:0; right:0; bottom:0; height:49px; background:#fff; border-top:1px solid #EDEFF1;
display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:11px; font-weight:500; color:#878A8C; }
.tab.active { color:#FF4500; }
</style></head>
<body>
<nav>
<span class="av-me"></span>
<p class="brand">Reddit (iOS)</p>
<div class="switcher">Home ▾</div>
</nav>
<div class="layout">
<div class="feed">
<div class="card">
<div class="head"><span class="sub-av o"></span><span class="subname">r/AskReddit</span> · 2h ago · 125 comments</div>
<h3 class="title">What's a skill that seems useless until you suddenly need it?</h3>
<span class="flair">Discussion</span>
<div class="actionrow">
<div class="votecol"><span class="up">▲</span><span class="karma">14.2K</span><span class="down">▼</span></div>
<span class="meta-icon">💬 3.1K</span>
<span class="meta-icon">↗ Share</span>
<span class="meta-icon">🔖 Save</span>
</div>
</div>
<div class="card">
<div class="head"><span class="sub-av g"></span><span class="subname">r/AnimalCrossing</span> · 5h ago · 48 comments</div>
<h3 class="title">Finally finished my Japanese garden island — 3 years in the making</h3>
<span class="flair oc">OC</span>
<div class="preview p1"></div>
<div class="actionrow">
<div class="votecol"><span class="up">▲</span><span class="karma">2.4K</span><span class="down">▼</span></div>
<span class="meta-icon">💬 48</span>
<span class="meta-icon">↗ Share</span>
<span class="meta-icon">🔖 Save</span>
</div>
</div>
<div class="card">
<div class="head"><span class="sub-av p"></span><span class="subname">r/programming</span> · 1d ago · 210 comments</div>
<h3 class="title">Why boring technology wins in production, ten years later</h3>
<div class="preview p2"></div>
<div class="actionrow">
<div class="votecol"><span class="up">▲</span><span class="karma">891</span><span class="down">▼</span></div>
<span class="meta-icon">💬 210</span>
<span class="meta-icon">↗ Share</span>
</div>
</div>
</div>
<div class="side">
<div class="side-card">
<div class="side-title">Community info</div>
<div class="rec"><span class="rec-av" style="background:#FF4500"></span>r/AskReddit<span class="joinbtn">Joined</span></div>
<div class="rec"><span class="rec-av" style="background:#24A0ED"></span>r/AnimalCrossing<span class="joinbtn">Join</span></div>
<div class="rec"><span class="rec-av" style="background:#0079D3"></span>r/programming<span class="joinbtn">Join</span></div>
</div>
</div>
</div>
<div class="tabbar">
<span class="tab active">Home</span>
<span class="tab">Communities</span>
<span class="tab">+</span>
<span class="tab">Chat</span>
<span class="tab">Inbox</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f3ef; color: #161616;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f3ef; color: #161616;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.55; margin: 0; color: #161616; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #5a5a5a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #100aed; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #f6f3ef; color: #161616;
border: 1px solid #100aed; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f6f3ef; color: #161616;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a5a5a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #028d05; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f3ef; font-family:'IBM Plex Sans',Arial,sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#f6f3ef;border-bottom:2px solid #100aed;}
.logo{font-family:'Messina Sans','IBM Plex Sans',Arial,sans-serif;font-size:20px;font-weight:700;color:#100aed;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#333;}
.hero{height:250px;background:#000e1a;display:flex;align-items:center;padding:0 40px;}
.herotext{width:440px;}
.herotext .kick{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#0693e3;margin-bottom:12px;}
.herotext h1{font-family:'Messina Sans','IBM Plex Sans',Arial,sans-serif;font-size:34px;font-weight:700;color:#fff;margin:0 0 14px;line-height:1.15;}
.herotext p{font-size:15px;color:#c0c8d0;margin:0 0 20px;max-width:340px;}
.btn{display:inline-block;background:#100aed;color:#fff;font-size:14px;font-weight:700;padding:13px 26px;border-radius:8px;width:fit-content;}
.printer{position:absolute;right:70px;top:70px;width:200px;height:150px;}
.printer .box{position:absolute;left:20px;top:20px;width:160px;height:110px;background:#1a2a3a;border-radius:4px;}
.printer .light{position:absolute;left:32px;top:32px;width:16px;height:16px;border-radius:9999px;background:#00c84e;}
.hero{position:relative;}
.sec{padding:22px 40px 0;}
.sectitle{font-size:16px;font-weight:700;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:206px;background:#fff;border-radius:8px;padding:10px;}
.thumb{height:100px;border-radius:4px;margin-bottom:8px;}
.pname{font-size:14px;font-weight:600;}
.pprice{font-size:13px;color:#003388;font-weight:700;margin-top:4px;}
.tag{display:inline-block;background:#028d05;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;border-radius:9999px;padding:2px 9px;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Makerbot</div>
<div class="navlinks"><span>Printers</span><span>Filament</span><span>Classroom</span><span>Support</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kick">For the Classroom</div>
<h1>Pedagogy first, hardware second.</h1>
<p>3D printers designed to teach as much as they print, built for students and makers alike.</p>
<div class="btn">Shop Printers</div>
</div>
<div class="printer"><div class="box"></div><div class="light"></div></div>
</div>
<div class="sec">
<div class="sectitle">Classroom Favorites</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#100aed,#f6f3ef);"></div><div class="pname">Method X Printer</div><div class="pprice">$2,499.00</div><div class="tag">In Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0693e3,#ede8df);"></div><div class="pname">Sketch Classroom Printer</div><div class="pprice">$799.00</div><div class="tag">In Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffd204,#ede8df);"></div><div class="pname">PLA Filament Spool</div><div class="pprice">$34.99</div><div class="tag">In Stock</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ea1921; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #ea1921;
border: 1px solid #ea1921; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #272d45;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ea1921; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,Helvetica,sans-serif; color:#272d45; }
*{box-sizing:border-box;}
.nav{height:56px;background:#272d45;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:700;color:#c6c9d6;}
.navcta{background:#ea1921;color:#fff;font-size:12px;font-weight:700;padding:8px 16px;border-radius:2px;}
.hero{height:210px;background:#2c3e50;display:flex;align-items:center;padding:0 32px;}
.heroText{width:430px;}
.h1{font-size:28px;font-weight:700;line-height:1.2;color:#fff;margin:0 0 12px;}
.sub{font-size:13px;line-height:1.5;color:#9a9db1;margin:0 0 16px;max-width:370px;}
.btn{display:inline-block;background:#ea1921;color:#fff;font-size:13px;font-weight:700;padding:11px 24px;border-radius:2px;}
.bootWrap{margin-left:auto;width:110px;height:150px;position:relative;}
.boot{position:absolute;width:60px;height:120px;background:#ffcf2a;border-radius:6px 6px 20px 4px;left:25px;top:15px;}
.badgesRow{display:flex;gap:1px;background:#dbdde4;margin:14px 32px 0;}
.badgecell{flex:1;background:#f7f7f8;text-align:center;padding:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;}
.sec{padding:16px 32px 0;}
.grid{display:flex;gap:12px;}
.card{width:224px;background:#f4f4f6;border:1px solid #dbdde4;border-radius:2px;padding:10px;position:relative;}
.thumb{height:90px;background:#d3d4dd;border-radius:2px;margin-bottom:8px;}
.compliance{display:flex;gap:4px;margin-bottom:6px;}
.tag{font-size:8px;font-weight:700;color:#fff;padding:2px 6px;border-radius:2px;}
.pname{font-size:12px;font-weight:700;color:#272d45;margin:0 0 4px;}
.pprice{font-size:13px;font-weight:700;color:#ea1921;}
</style>
<div class="nav">
<div class="logo">Tingley Rubber</div>
<div class="navlinks"><div>Boots</div><div>Rainwear</div><div>Gloves</div><div>PPE</div></div>
<div class="navcta">Request Catalog</div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Waterproof protection, certified.</div>
<div class="sub">ANSI-rated boots, rainwear, and hi-vis gear for jobsites that don't tolerate guesswork.</div>
<div class="btn">Shop PPE</div>
</div>
<div class="bootWrap"><div class="boot"></div></div>
</div>
<div class="badgesRow">
<div class="badgecell" style="color:#ea1921;">ANSI Rated</div>
<div class="badgecell" style="color:#4bb543;">Certified</div>
<div class="badgecell" style="color:#00caaa;">Chemical Resist.</div>
<div class="badgecell" style="color:#ffcf2a;background:#272d45;">Hi-Vis Class 3</div>
</div>
<div class="sec">
<div class="grid">
<div class="card"><div class="compliance"><span class="tag" style="background:#ea1921;">ANSI</span><span class="tag" style="background:#4bb543;">CERT</span></div><div class="thumb"></div><div class="pname">Rubber Overshoe Boot</div><div class="pprice">$34.99</div></div>
<div class="card"><div class="compliance"><span class="tag" style="background:#00caaa;">CHEM</span></div><div class="thumb"></div><div class="pname">PVC Rain Jacket</div><div class="pprice">$54.99</div></div>
<div class="card"><div class="compliance"><span class="tag" style="background:#ffcf2a;color:#272d45;">HI-VIS</span></div><div class="thumb"></div><div class="pname">Class 3 Safety Vest</div><div class="pprice">$22.99</div></div>
<div class="card"><div class="compliance"><span class="tag" style="background:#4bb543;">CERT</span></div><div class="thumb"></div><div class="pname">Chemical-Resist Gloves</div><div class="pprice">$14.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a3035;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a3035;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a3035; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5c808a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #226d7a; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #226d7a;
border: 1px solid #226d7a; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a3035;
border: 1px solid #c6cbcc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5c808a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; letter-spacing: 0.5px; background: #e4f5fa; color: #226d7a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a3035; box-sizing:border-box;
font-family:'Segoe UI', 'Open Sans', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; background:#226d7a; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#fff; font-size:17px; font-weight:700; margin:0; letter-spacing:0.2px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#fff; opacity:0.9; font-size:13px; }
.cart { background:#22b8d1; color:#fff; font-size:12px; font-weight:600; border-radius:12px; padding:8px 16px; }
main { display:flex; height:582px; }
.stage { width:320px; background:#e4f5fa; display:flex; align-items:center; justify-content:center; }
.tank { width:60px; height:170px; background:linear-gradient(180deg,#22b8d1,#226d7a); border-radius:10px 10px 20px 20px;
position:relative; box-shadow:0 16px 30px rgba(34,109,122,0.25); }
.tank::before { content:''; position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:20px; height:16px; background:#1a3035; border-radius:4px; }
.fin { width:40px; height:80px; background:#b0e0e9; border-radius:4px; position:absolute; bottom:20px; }
.fin-l { left:-46px; } .fin-r { right:-46px; }
.info { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:11px; }
h1 { font-size:22px; font-weight:700; margin:0; }
.sub { font-size:13px; color:#2e5059; margin:0; max-width:440px; line-height:1.5; }
table.specs { width:100%; border-collapse:collapse; margin-top:4px; font-size:12px; }
table.specs td { border:1px solid #c8e8ed; padding:6px 10px; }
table.specs td.k { background:#e4f5fa; font-weight:600; width:170px; color:#226d7a; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:4px; }
.price { font-size:24px; font-weight:700; color:#226d7a; }
.actions { display:flex; gap:10px; }
.btn-primary { background:#22b8d1; color:#fff; border-radius:12px; height:46px; padding:0 26px; display:flex;
align-items:center; font-weight:700; font-size:13px; }
.btn-secondary { background:#fff; border:1px solid #c8e8ed; color:#226d7a; border-radius:12px; height:46px;
padding:0 20px; display:flex; align-items:center; font-size:12px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">B4adventure</p>
<div class="navlinks"><span>Dive Gear</span><span>Camping</span><span>Snorkel</span><span>Bags</span></div>
<span class="cart">Cart · 0</span>
</nav>
<main>
<div class="stage"><div class="tank"><div class="fin fin-l"></div><div class="fin fin-r"></div></div></div>
<div class="info">
<h1>ProDive 12L Aluminum Scuba Tank Kit</h1>
<p class="sub">Complete kit with fins, regulator mount points, and a corrosion-resistant valve — packed the night before, ready at the dock.</p>
<table class="specs">
<tr><td class="k">Capacity</td><td>12 liters / 80 cu ft</td></tr>
<tr><td class="k">Material</td><td>Aircraft-grade aluminum</td></tr>
<tr><td class="k">Rated Pressure</td><td>3000 PSI</td></tr>
</table>
<div class="price-row"><span class="price">$249.00</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Compare Tanks</div>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0076ce; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0076ce; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bce3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0063af; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0076ce; color: #ffffff;
border: 1px solid #0063af; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0076ce; color: #f5f5f5;
border: 1px solid #278ad4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bce3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0073c9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#11141a; box-sizing:border-box;
font-family:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
header { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #DDE1E6; }
.logo { font-weight:700; font-size:18px; color:#0076CE; }
.search { width:260px; height:32px; background:#F7F8FA; border:1px solid #DDE1E6; border-radius:4px;
display:flex; align-items:center; padding:0 12px; font-size:12px; color:#9AA3AE; }
.cart { background:#0076CE; color:#fff; border-radius:4px; padding:8px 16px; font-size:13px; font-weight:500; }
.layout { display:flex; gap:20px; padding:20px 32px; }
.filters { width:150px; font-size:13px; color:#4C545E; }
.filters h5 { font-size:11px; text-transform:uppercase; color:#6B7480; margin:0 0 8px; }
.filters .opt { padding:6px 0; }
.filters .opt.on { color:#11141a; font-weight:500; }
.content { flex:1; }
.content h1 { font-size:20px; margin:0 0 12px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { border:1px solid #DDE1E6; border-radius:8px; padding:14px; }
.card .img { height:70px; border-radius:6px; background:linear-gradient(135deg,#E5F1FA,#0076CE); margin-bottom:10px; }
.card .badge { display:inline-block; background:#E5F1FA; color:#0076CE; font-size:10px; font-weight:700; border-radius:4px;
padding:2px 6px; margin-bottom:6px; }
.card h4 { font-size:13px; margin:0 0 4px; }
.card .spec { font-size:11px; color:#6B7480; margin:2px 0; }
.card .price { font-size:16px; font-weight:700; margin:8px 0; }
.card .cta { background:#0076CE; color:#fff; border-radius:4px; padding:6px 14px; font-size:12px; font-weight:500;
display:inline-block; }
.spectable { margin-top:16px; border:1px solid #DDE1E6; border-radius:8px; overflow:hidden; }
.srow { display:flex; padding:8px 16px; font-size:12px; border-bottom:1px solid #EEF0F3; }
.srow:nth-child(even) { background:#F7F8FA; }
.srow .lbl { width:40%; color:#6B7480; }
.srow .val { color:#22262B; }
</style></head>
<body>
<header>
<span class="logo">Dell</span>
<div class="search">Search products</div>
<div class="cart">Cart (2)</div>
</header>
<div class="layout">
<div class="filters">
<h5>Category</h5>
<div class="opt on">Laptops</div>
<div class="opt">Monitors</div>
<div class="opt">Workstations</div>
<h5 style="margin-top:16px">Price</h5>
<div class="opt">Under $1,000</div>
<div class="opt">$1,000 – $2,000</div>
</div>
<div class="content">
<h1>Laptops</h1>
<div class="grid">
<div class="card"><div class="img"></div><span class="badge">NEW</span><h4>XPS 13 Laptop</h4><div class="spec">16GB LPDDR5x · 512GB SSD</div><div class="price">$1,299.99</div><div class="cta">Add to Cart</div></div>
<div class="card"><div class="img"></div><h4>Latitude 7450</h4><div class="spec">Intel Core Ultra 7</div><div class="price">$1,749.00</div><div class="cta">Add to Cart</div></div>
<div class="card"><div class="img"></div><h4>Alienware m18 R2</h4><div class="spec">RTX 4080 · 18" QHD+</div><div class="price">$2,899.00</div><div class="cta">Add to Cart</div></div>
</div>
<div class="spectable">
<div class="srow"><span class="lbl">Processor</span><span class="val">Intel Core Ultra 7 155H</span></div>
<div class="srow"><span class="lbl">Memory</span><span class="val">16GB LPDDR5x 7467MT/s</span></div>
<div class="srow"><span class="lbl">Storage</span><span class="val">512GB M.2 PCIe NVMe SSD</span></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #292827;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #292827;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 460; line-height: 1.1; letter-spacing: -0.315px; margin: 0; color: #292827; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 460; line-height: 1.5; margin: 0; color: #73706d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #1b1938; color: #ffffff;
border: none; border-radius: 999px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.0; background: #ffffff; color: #292827;
border: 1px solid #1b1938; border-radius: 8px;
padding: 12px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 460; line-height: 1.5; background: #ffffff; color: #292827;
border: 1px solid #cac9c9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #73706d; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dfdfe3; color: #1b1938;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#292827; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { position:relative; height:250px; background:#1b1938; overflow:hidden;
background:
radial-gradient(ellipse 500px 280px at 78% 20%, rgba(201,180,250,.45), transparent 60%),
radial-gradient(ellipse 460px 300px at 95% 60%, rgba(120,160,220,.3), transparent 60%),
#1b1938; }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { color:#fff; font-weight:460; font-size:15px; }
.navlinks { display:flex; gap:20px; font-size:13px; color:rgba(255,255,255,.75); }
.pillviolet { background:#c9b4fa; color:#1b1938; border:none; border-radius:9999px; padding:9px 18px; font-size:13px; font-weight:700; }
.herotext { position:relative; z-index:2; padding:14px 32px; max-width:440px; }
.herotext h1 { color:#fff; font-size:44px; font-weight:540; line-height:.98; margin:0 0 12px; }
.portrait { position:absolute; right:60px; top:30px; width:120px; height:170px; border-radius:50% 50% 45% 45%/55% 55% 45% 45%;
background:radial-gradient(circle at 40% 30%, #d9b98a, #7a5a45 75%); z-index:1; opacity:.9; }
.featrow { display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:16px 32px; background:#fafaf8; }
.tab { text-align:center; font-size:12px; font-weight:600; padding:8px; border-radius:9999px; background:#fff; margin:0 4px; }
.cardgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:16px 32px; }
.card { background:#fff; border:1px solid #e8e4dd; border-radius:12px; padding:16px; }
.card h3 { font-size:15px; margin:0 0 6px; font-weight:460; letter-spacing:-.3px; }
.card p { font-size:11.5px; color:#73706d; margin:0; line-height:1.4; }
.tealband { background:#0e3030; color:#fff; text-align:center; padding:26px 32px; }
.tealband h2 { font-size:26px; font-weight:540; margin:0 0 14px; letter-spacing:-.5px; }
.btnwhite { background:#fff; color:#0e3030; border:none; border-radius:8px; padding:11px 22px; font-size:14px; font-weight:700; }
footer { padding:12px 32px; display:flex; justify-content:space-between; font-size:11px; color:#73706d; }
</style></head>
<body>
<div class="hero">
<nav>
<div class="brand">Superhuman</div>
<div class="navlinks"><span>Product</span><span>Company</span><span>Pricing</span></div>
<button class="pillviolet">Get Started</button>
</nav>
<div class="herotext">
<h1>The fastest<br>email experience</h1>
</div>
<div class="portrait"></div>
</div>
<div class="featrow">
<div class="tab">Mail</div><div class="tab">Channels</div><div class="tab">AI</div><div class="tab">Calendar</div>
</div>
<div class="cardgrid">
<div class="card"><h3>Split Inbox</h3><p>Focus on what matters — the rest waits quietly.</p></div>
<div class="card"><h3>Instant Everything</h3><p>Every action feels instant, every time.</p></div>
<div class="card"><h3>AI Triage</h3><p>Let AI clear your inbox before you open it.</p></div>
</div>
<div class="tealband">
<h2>Ready to become superhuman?</h2>
<button class="btnwhite">Try it free</button>
</div>
<footer>
<span>© Superhuman</span>
<span>Superhuman · Company · Careers · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1f1f1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1f1f1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #1f1f1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #a8a8a8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: #fa520f; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; background: transparent; color: #1f1f1f;
border: 1px solid #fa520f; border-radius: 8px;
padding: 10px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #1f1f1f;
border: 1px solid #c7c7c7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a8a8a8; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; background: #fa520f; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fff8e0; color:#1f1f1f; box-sizing:border-box;
font-family:Georgia,"Times New Roman",Times,serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.brand { font-size:17px; font-weight:700; margin:0; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#4a4a4a; }
.btn { background:#fa520f; color:#fff; border:none; border-radius:8px; padding:9px 20px; font-weight:600; font-size:13px;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
/* 대표 시각 모먼트: 산맥 위로 지는 해 그라디언트(mustard→orange→deep red) —
실제 사진 대신 CSS 로 능선을 근사한다. 세리프 히어로가 그 위에 얹힌다. */
.hero { position:relative; height:300px; overflow:hidden;
background:linear-gradient(180deg,#ffd06a 0%,#ffa110 45%,#fa520f 75%,#cc3a05 100%); }
.ridge { position:absolute; bottom:0; left:0; right:0; height:120px; background:#2c1608;
clip-path:polygon(0 100%,0 55%,10% 70%,22% 40%,35% 60%,48% 30%,60% 55%,74% 25%,88% 50%,100% 35%,100% 100%); }
.ridge2 { position:absolute; bottom:0; left:0; right:0; height:70px; background:#1a0d05; opacity:0.85;
clip-path:polygon(0 100%,0 70%,15% 85%,30% 55%,50% 80%,65% 45%,82% 70%,100% 50%,100% 100%); }
.herocopy { position:relative; z-index:2; text-align:center; padding-top:44px; }
.herocopy .tag { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#fff8e0; opacity:0.9; }
.herocopy h1 { font-size:52px; font-weight:400; letter-spacing:-1px; margin:10px 0 0; color:#fff; line-height:1.05; }
.body { padding:26px 40px; display:flex; gap:28px; }
.col { flex:1; }
.col h3 { font-size:20px; font-weight:400; margin:0 0 6px; }
.col p { font-size:13px; color:#3d3d3d; line-height:1.6; margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.swatch { width:34px; height:34px; border-radius:6px; margin-bottom:10px; }
.sw1 { background:#ff8105; } .sw2 { background:#ffd900; } .sw3 { background:#fa520f; }
/* 시그니처 "sunset stripe" — 매 페이지를 닫는 가로 그라디언트 바 */
.stripe { height:64px; background:linear-gradient(90deg,#ffd06a,#ffa110,#fa520f,#cc3a05,#ff8105,#ffd900);
display:flex; align-items:center; justify-content:space-between; padding:0 40px;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
color:#1f1f1f; font-size:12px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Mistral AI</p>
<div class="navlinks"><span>Le Studio</span><span>Coding</span><span>Solutions</span><span>Pricing</span></div>
<button class="btn">Try the API</button>
</nav>
<div class="hero">
<div class="herocopy">
<span class="tag">Frontier AI</span>
<h1>Intelligence, in the open</h1>
</div>
<div class="ridge2"></div>
<div class="ridge"></div>
</div>
<div class="body">
<div class="col"><span class="swatch sw1"></span><h3>Le Studio</h3><p>Build, evaluate, and deploy custom AI agents with full observability.</p></div>
<div class="col"><span class="swatch sw2"></span><h3>Codestral</h3><p>A coding model tuned for low-latency completions across 80+ languages.</p></div>
<div class="col"><span class="swatch sw3"></span><h3>Enterprise</h3><p>Deploy on your own cloud, on-prem, or fully managed — your choice.</p></div>
</div>
<div class="stripe">
<span>© Mistral AI</span>
<span>Frontier AI · Le Studio · Docs · Contact</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f8; color: #1279ec;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f8; color: #1279ec;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1; margin: 0; color: #1279ec; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.8px; background: #03c9a0; color: #111111;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.8px; background: transparent; color: #000000;
border: 1px solid #03c9a0; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1d1d1f; color: #f7f7f8;
border: 1px solid #bed8f5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #03c9a0; color: #111111;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Roboto,sans-serif; background:#f7f7f8; color:#1d1d1f; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;background:#111111;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #303030;}
.logo{font-family:'Roboto Condensed',Roboto,sans-serif;font-size:22px;font-weight:700;color:#03c9a0;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#f7f7f8;}
.hero{height:250px;background:#111111;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.herotext{max-width:420px;}
.herotext .kick{font-family:'Roboto Condensed',Roboto,sans-serif;font-size:11px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:#03c9a0;margin-bottom:12px;}
.herotext h1{font-family:'Roboto Condensed',Roboto,sans-serif;font-size:40px;font-weight:700;letter-spacing:-.3px;color:#f7f7f8;margin:0 0 12px;line-height:1.1;}
.herotext p{font-size:15px;color:#9a9db1;margin:0 0 18px;max-width:360px;}
.hbtn{display:inline-block;background:#03c9a0;color:#111111;font-family:'Roboto Condensed',Roboto,sans-serif;font-size:14px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:13px 26px;border-radius:8px;}
.kb{width:280px;height:110px;border-radius:10px;background:#1d1d1f;border:1px solid #303030;display:grid;grid-template-columns:repeat(12,1fr);gap:3px;padding:10px;}
.k{background:#272727;border-radius:2px;height:14px;}
.k.g{background:#03c9a0;}
.sec{padding:20px 40px 0;}
.sectitle{font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:#757575;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:196px;background:#f3f3f3;border-radius:8px;padding:12px;}
.thumb{height:96px;background:#111111;border-radius:8px;margin-bottom:8px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-family:'Roboto Condensed',Roboto,sans-serif;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 7px;border-radius:4px;color:#111111;background:#03c9a0;}
.badge.gold{background:#ffcf2a;}
.ptitle{font-size:15px;font-weight:600;}
.pprice{font-family:'Roboto Condensed',Roboto,sans-serif;font-size:20px;font-weight:700;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:0;}
</style>
<div class="wrap">
<div class="nav"><div class="logo">Nuphy</div><div class="navlinks"><div>Keyboards</div><div>Switches</div><div>Keycaps</div><div>Bundles</div></div></div>
<div class="hero"><div class="herotext"><div class="kick">Air75 V2</div><h1>Backlit for the drop.</h1><p>Wireless mechanical keyboards tuned with gasket-mount flex and south-facing sockets.</p><div class="hbtn">Shop Air75 V2</div></div><div class="kb"><div class="k g"></div><div class="k"></div><div class="k"></div><div class="k"></div><div class="k g"></div><div class="k"></div><div class="k"></div><div class="k"></div><div class="k g"></div><div class="k"></div><div class="k"></div><div class="k"></div><div class="k"></div><div class="k"></div><div class="k g"></div><div class="k"></div><div class="k"></div><div class="k"></div><div class="k"></div><div class="k"></div><div class="k"></div><div class="k g"></div><div class="k"></div><div class="k"></div></div></div>
<div class="sec">
<div class="sectitle">Shop Keyboards</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">New</div></div><div class="ptitle">Air75 V2 Wireless</div><div class="pprice">$119</div></div>
<div class="card"><div class="thumb"><div class="badge gold">Sale</div></div><div class="ptitle">Halo75 V2 Gasket</div><div class="pprice">$139</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Nuphy Moss Switches</div><div class="pprice">$16</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Wisteria PBT Keycaps</div><div class="pprice">$49</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafaf9; color: #111827;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafaf9; color: #111827;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #111827; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #6bffc6; color: #000e2e;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: transparent; color: #000000;
border: 1px solid #6bffc6; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f6f6f6; color: #111827;
border: 1px solid #c0c2c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.2px; background: #000e2e; color: #6bffc6;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafaf9; font-family:'Manrope',Arial,sans-serif; color:#374151; }
*{box-sizing:border-box;}
.nav{height:60px;background:#000e2e;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;color:#d3d8e6;}
.hero{height:230px;background:#000e2e;display:flex;align-items:center;padding:0 34px;gap:36px;}
.herotext{width:410px;}
.kicker{font-family:'IBMPlexSerif',Georgia,serif;font-size:13px;color:#6bffc6;margin-bottom:10px;}
h1{font-size:30px;font-weight:700;color:#fff;margin:0 0 12px;line-height:1.2;}
.sub{font-size:14px;color:#b8c0d2;line-height:1.6;margin:0 0 18px;width:370px;}
.cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 26px;background:#6bffc6;color:#000e2e;font-size:14px;font-weight:700;border-radius:8px;}
.meter{width:200px;height:150px;background:#0a1a42;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.tds{font-family:Consolas,Menlo,Monaco,monospace;font-size:48px;font-weight:700;color:#6bffc6;letter-spacing:2px;}
.tdslabel{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#8891a8;margin-top:6px;}
.section{padding:0 34px;}
.sectitle{font-size:20px;font-weight:700;color:#111827;margin:20px 0 14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:12px;padding:12px;position:relative;}
.thumb{height:104px;border-radius:8px;margin-bottom:10px;}
.tag{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;color:#000e2e;background:#dcfce7;}
.ptitle{font-size:13px;font-weight:600;color:#111827;line-height:1.3;height:32px;overflow:hidden;}
.pprice{font-size:14px;font-weight:700;color:#000e2e;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Zerowater</div>
<div class="navlinks"><div>Filters</div><div>Pitchers</div><div>Dispensers</div><div>TDS Meters</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Measured to zero, not approximated.</div>
<h1>Five-stage filtration. Zero dissolved solids.</h1>
<div class="sub">The only filter certified to reduce total dissolved solids all the way down to zero.</div>
<div class="cta">Shop Filters</div>
</div>
<div class="meter"><div class="tds">000</div><div class="tdslabel">TDS Reading</div></div>
</div>
<div class="section">
<div class="sectitle">Featured Products</div>
<div class="grid">
<div class="card"><span class="tag">Certified</span><div class="thumb" style="background:linear-gradient(150deg,#6bffc6,#000e2e)"></div><div class="ptitle">10-Cup Filtration Pitcher</div><div class="pprice">$34.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#2968fe,#000e2e)"></div><div class="ptitle">23-Cup Dispenser</div><div class="pprice">$49.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#5a31f4,#000e2e)"></div><div class="ptitle">Digital TDS Meter</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#2563eb,#000e2e)"></div><div class="ptitle">Replacement Filter (4-Pack)</div><div class="pprice">$24.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf8f5; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf8f5; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.8px; background: #163959; color: #ffffff;
border: none; border-radius: 4px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.8px; background: transparent; color: #163959;
border: 1px solid #163959; border-radius: 4px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #272727;
border: 1px solid #c5c4c2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.27; letter-spacing: 1.2px; background: #b8924a; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; background:#faf8f5; color:#404040; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-family:'Playfair Display',Georgia,serif;font-size:22px;color:#163959;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;letter-spacing:0.8px;text-transform:uppercase;color:#272727;}
.util{font-size:12px;letter-spacing:0.5px;color:#737373;}
.hero{height:230px;position:relative;display:flex;align-items:center;padding:0 32px;background:#163959;overflow:hidden;}
.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,57,89,0.85) 0%, transparent 65%);}
.herotext{position:relative;width:420px;}
.herotext h1{font-family:'Playfair Display',Georgia,serif;font-size:38px;font-weight:400;color:#fff;margin:0 0 12px;letter-spacing:-0.4px;line-height:1.15;}
.herotext p{font-size:14px;color:#dedede;margin:0 0 18px;max-width:320px;}
.cta{display:inline-block;background:transparent;border:1px solid #fff;color:#fff;font-size:13px;font-weight:500;letter-spacing:0.8px;text-transform:uppercase;padding:14px 28px;border-radius:4px;}
.range{position:absolute;right:60px;top:36px;width:220px;height:150px;background:linear-gradient(160deg,#b8924a,#163959 70%);border-radius:4px;}
.range:before{content:'';position:absolute;left:20px;bottom:20px;width:60px;height:60px;border-radius:50%;background:#faf8f5;opacity:0.9;}
.section{padding:16px 32px 0;}
.sectitle{font-family:'Playfair Display',Georgia,serif;font-size:24px;color:#272727;margin-bottom:12px;text-align:center;}
.grid{display:flex;gap:14px;justify-content:center;}
.card{width:150px;background:#fff;border:1px solid #ebebeb;padding:10px;position:relative;}
.badge{position:absolute;top:8px;right:8px;background:#b8924a;color:#fff;font-size:9px;font-weight:600;letter-spacing:0.6px;text-transform:uppercase;padding:3px 8px;}
.thumb{aspect-ratio:4/3;margin-bottom:8px;}
.pname{font-size:14px;font-weight:500;color:#272727;}
.psub{font-size:11px;color:#737373;margin-top:2px;}
.pprice{font-size:15px;color:#272727;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#163959;color:#d4be8a;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">LA Cornue</div>
<div class="navlinks"><div>Château</div><div>CornuFé</div><div>Flamberge</div><div>Configurator</div></div>
<div class="util">Dealer Locator</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Hand-enamelled iron. Since 1908.</h1>
<p>Flame-vaulted ovens and hand-riveted doors, made to a household's legacy.</p>
<div class="cta">Discover the Collection</div>
</div>
<div class="range"></div>
</div>
<div class="section">
<div class="sectitle">Signature Ranges</div>
<div class="grid">
<div class="card"><span class="badge">Bespoke</span><div class="thumb" style="background:linear-gradient(135deg,#163959,#b8924a)"></div><div class="pname">Château 90</div><div class="psub">32+ Enamel Colours</div><div class="pprice">On Request</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b8924a,#163959)"></div><div class="pname">CornuFé 110</div><div class="psub">7 Metal Finishes</div><div class="pprice">On Request</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#404040,#b8924a)"></div><div class="pname">Flamberge Range</div><div class="psub">Grand Feu Enamel</div><div class="pprice">On Request</div></div>
</div>
</div>
<div class="footer"><span>© La Cornue — Paris, 1908</span><span>Showroom Appointment</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #171717;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #171717;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #171717; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #9a9db1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #d54300; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #171717;
border: 1px solid #d54300; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #171717;
border: 1px solid #c5c5c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9db1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #28657e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;font-family:'Geogrotesque W01','Public Sans',Arial,Helvetica,sans-serif;color:#676986;}
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e5e5e5;}
.logo{font-size:19px;font-weight:600;letter-spacing:0;color:#171717;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;color:#171717;}
.carticon{width:34px;height:34px;border-radius:8px;background:#f4f4f6;}
.hero{height:262px;display:flex;align-items:center;padding:0 40px;gap:38px;background:#f7f7f8;}
.hero-text{width:400px;}
.eyebrow{font-size:13px;font-weight:600;color:#d54300;margin-bottom:10px;}
.headline{font-size:30px;font-weight:600;letter-spacing:0;line-height:1.25;color:#171717;margin-bottom:14px;}
.sub{font-size:14px;color:#676986;line-height:1.5;width:365px;margin-bottom:20px;}
.cta{display:inline-block;padding:13px 28px;background:#d54300;color:#ffffff;border-radius:8px;font-size:14px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;}
.hero-visual{flex:1;height:200px;position:relative;}
.pack{position:absolute;left:60px;top:12px;width:100px;height:170px;border-radius:16px 16px 8px 8px;background:linear-gradient(160deg,#9a9db1,#676986);}
.tent{position:absolute;right:60px;bottom:10px;width:160px;height:80px;border-radius:0 60px 0 0;background:linear-gradient(120deg,#d3d4dd,#272d45);}
.stake{position:absolute;right:52px;bottom:6px;width:4px;height:26px;background:#d54300;}
.section{padding:22px 40px 0 40px;display:flex;justify-content:space-between;align-items:baseline;}
.section-title{font-size:20px;font-weight:600;color:#171717;}
.section-link{font-size:12px;font-weight:600;color:#d54300;}
.grid{display:flex;gap:24px;padding:14px 40px 0 40px;}
.card{width:204px;background:#ffffff;border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;}
.swatch{height:100px;background:#f7f7f8;position:relative;}
.badge-new{position:absolute;left:8px;top:8px;background:#28657e;color:#fff;font-size:9px;font-weight:600;padding:3px 8px;border-radius:2px;text-transform:uppercase;}
.badge-sale{position:absolute;left:8px;top:8px;background:#6d7d42;color:#fff;font-size:9px;font-weight:600;padding:3px 8px;border-radius:2px;text-transform:uppercase;}
.card-body{padding:11px 13px 14px 13px;}
.card-title{font-size:13px;font-weight:600;color:#171717;margin-bottom:6px;}
.card-price{font-size:14px;font-weight:600;color:#171717;}
</style>
<div class="nav">
<div class="logo">Hyperlite Mountain Gear</div>
<div class="navlinks"><span>Packs</span><span>Shelters</span><span>Accessories</span><span>Dyneema</span></div>
<div class="carticon"></div>
</div>
<div class="hero">
<div class="hero-text">
<div class="eyebrow">Dyneema Composite Fabric</div>
<div class="headline">Ultralight gear<br/>for the last mile.</div>
<div class="sub">Packs, shelters and accessories built from Dyneema composite fabric — engineered to disappear on your back.</div>
<div class="cta">Shop Gear</div>
</div>
<div class="hero-visual">
<div class="pack"></div>
<div class="tent"></div>
<div class="stake"></div>
</div>
</div>
<div class="section"><div class="section-title">Best Sellers</div><div class="section-link">Shop all gear</div></div>
<div class="grid">
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#d3d4dd,#9a9db1);"><div class="badge-new">New</div></div>
<div class="card-body"><div class="card-title">3400 Southwest Pack</div><div class="card-price">$369.00</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#272d45,#676986);"></div>
<div class="card-body"><div class="card-title">Unbound 2 Shelter</div><div class="card-price">$549.00</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#d54300,#eeb499);"><div class="badge-sale">Sale</div></div>
<div class="card-body"><div class="card-title">Titanium Stake Set</div><div class="card-price">$24.00</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#9a9db1,#f4f4f6);"></div>
<div class="card-body"><div class="card-title">Porter 55 Pack</div><div class="card-price">$319.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f8f1; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f8f1; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #969696; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.25; letter-spacing: 1.5px; background: #868159; color: #f9f8f1;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.25; letter-spacing: 1.5px; background: transparent; color: #121212;
border: 1px solid #868159; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9f8f1; color: #121212;
border: 1px solid #e5e5e5; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969696; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 400; line-height: 1.3; letter-spacing: 1.5px; background: #b2f9e9; color: #272d45;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Holden Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Louize',serif; background:#f9f8f1; color:#121212; }
*{box-sizing:border-box;}
.announce{height:30px;background:#868159;color:#f9f8f1;font-family:'TO Record',sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;border-bottom:1px solid #e5e5e5;}
.logo{font-size:22px;font-weight:400;letter-spacing:-.2px;}
.navlinks{font-family:'TO Record',sans-serif;display:flex;gap:24px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#121212;}
.hero{display:flex;padding:20px 48px;gap:36px;align-items:center;height:250px;}
.hero-visual{width:280px;height:210px;background:linear-gradient(160deg,#e8e3d3,#c8c5b3);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#8a8265;font-size:10px;letter-spacing:1px;}
.hero-txt{max-width:380px;}
.script{font-family:'Petit Formal Script',cursive;color:#868159;font-size:22px;display:block;margin-bottom:6px;}
.hero-txt h1{font-size:42px;font-weight:400;line-height:1.15;margin:0 0 12px;}
.hero-txt p{font-size:14px;color:#272d45;line-height:1.5;margin:0 0 16px;}
.btn{display:inline-block;background:#868159;color:#f9f8f1;font-family:'TO Record',sans-serif;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;padding:13px 26px;}
.section{padding:6px 48px;}
.section h2{font-size:24px;font-weight:400;margin:0 0 12px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.card{background:#fff;}
.imgbox{aspect-ratio:3/4;height:110px;background:#f4f4f6;display:flex;align-items:center;justify-content:center;color:#969696;font-size:9px;text-align:center;margin-bottom:6px;}
.pname{font-size:15px;font-weight:500;margin:0 0 2px;}
.metal{font-family:'TO Record',sans-serif;font-size:10px;color:#969696;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;}
.price{font-size:16px;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#121212;color:#f9f8f1;padding:12px 48px;display:flex;justify-content:space-between;font-size:10px;font-family:'TO Record',sans-serif;letter-spacing:.5px;}
</style>
<div class="announce">Complimentary Resizing — Lab-Grown, Always</div>
<div class="nav">
<div class="logo">Holden</div>
<div class="navlinks"><span>Engagement</span><span>Wedding Bands</span><span>Lab Diamonds</span><span>Our Story</span></div>
</div>
<div class="hero">
<div class="hero-visual">RING PHOTOGRAPHY</div>
<div class="hero-txt">
<span class="script">letters, not adverts</span>
<h1>Rings written<br>like a letter.</h1>
<p>Lab-grown diamonds, warm gold, and settings built to be worn — not just looked at.</p>
<div class="btn">Shop Engagement</div>
</div>
</div>
<div class="section">
<h2>The Collection</h2>
<div class="grid">
<div class="card"><div class="imgbox">Round Solitaire</div><div class="pname">The Ivy Solitaire</div><div class="metal">14k Gold · Round</div><div class="price">from $1,240</div></div>
<div class="card"><div class="imgbox">Oval Pave</div><div class="pname">The Marlowe Pavé</div><div class="metal">18k Rose · Oval</div><div class="price">from $1,680</div></div>
<div class="card"><div class="imgbox">Emerald Cut</div><div class="pname">The Winslow Emerald</div><div class="metal">Platinum · Emerald</div><div class="price">from $2,150</div></div>
<div class="card"><div class="imgbox">Wedding Band</div><div class="pname">Slim Eternity Band</div><div class="metal">14k White</div><div class="price">from $890</div></div>
</div>
</div>
<div class="footer"><span>© Holden</span><span>Shipping · Sizing Guide · Contact · Legal</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0f0f0; color: #1f1f1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0f0f0; color: #1f1f1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: -0.25px; margin: 0; color: #1f1f1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7a8475; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.04em; background: #b43232; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.04em; background: transparent; color: #1f1f1f;
border: 1px solid #b43232; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f0f0f0; color: #1f1f1f;
border: 1px solid #bcbcbc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a8475; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.08em; background: #5a6455; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f0f0f0; font-family:'Instrument Sans', Helvetica, Arial, sans-serif; color:#1f1f1f; font-weight:300; }
*{box-sizing:border-box;}
.nav{height:60px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:19px;font-weight:400;color:#f0f0f0;letter-spacing:.5px;}
.navlinks{display:flex;gap:26px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:1px;color:#bed2dc;}
.hero{height:250px;display:flex;background:linear-gradient(100deg,#000044,#121212 70%);position:relative;}
.herotext{width:48%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;}
.herotext .cap{font-size:11px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;color:#bed2dc;margin-bottom:12px;}
.herotext h1{font-size:34px;font-weight:300;color:#f0f0f0;margin:0 0 12px;line-height:1.2;}
.herotext p{font-size:15px;color:#9a9a9a;margin:0 0 20px;max-width:320px;line-height:1.6;}
.btn{display:inline-block;background:#b43232;color:#fff;font-size:13px;font-weight:500;letter-spacing:.4px;padding:14px 26px;border-radius:0;width:fit-content;}
.heroimg{width:52%;position:relative;overflow:hidden;background:radial-gradient(circle at 60% 40%,#3a3a3a,#0a0a0a 70%);}
.heroimg:before{content:'';position:absolute;left:0;top:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,255,255,.03) 3px,rgba(255,255,255,.03) 4px);}
.sec{padding:24px 40px 0;}
.sectitle{font-size:11px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;color:#6a6a6a;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:206px;position:relative;}
.thumb{height:130px;border-radius:4px;margin-bottom:10px;}
.info{background:#fff;border-left:3px solid #5a6455;padding:8px 10px;}
.cat{font-size:10px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:#5a6455;background:#5a6455;color:#fff;display:inline-block;padding:2px 8px;margin-bottom:6px;}
.ptitle{font-size:14px;font-weight:400;color:#1f1f1f;}
.pyear{font-size:11px;color:#6a6a6a;margin-top:2px;}
.pprice{font-size:13px;font-weight:500;color:#1f1f1f;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Magnum Photos Shop</div>
<div class="navlinks"><span>Photographers</span><span>Editions</span><span>Themes</span><span>About</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="cap">Limited Edition Prints</div>
<h1>Photographs as historical objects.</h1>
<p>Archival prints drawn from decades of documentary work, printed to museum standard.</p>
<div class="btn">Browse the Archive</div>
</div>
<div class="heroimg"></div>
</div>
<div class="sec">
<div class="sectitle">Recently Catalogued</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2a2a2a,#6a6a6a);"></div><div class="info"><div class="cat">Street</div><div class="ptitle">Untitled, Rue Vavin</div><div class="pyear">1974, Gelatin Silver</div><div class="pprice">$450</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3a3a3a,#bed2dc);"></div><div class="info"><div class="cat">Portrait</div><div class="ptitle">Fisherman, North Sea</div><div class="pyear">1961, Silver Print</div><div class="pprice">$620</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a1a1a,#5a6455);"></div><div class="info"><div class="cat">Conflict</div><div class="ptitle">Dispatch, Border Crossing</div><div class="pyear">1988, Archival Pigment</div><div class="pprice">$380</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4a4a4a,#9a9a9a);"></div><div class="info"><div class="cat">Landscape</div><div class="ptitle">Quarry at Dusk</div><div class="pyear">1993, Gelatin Silver</div><div class="pprice">$510</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #3a3a3a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #3a3a3a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #3a3a3a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #75787b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #21a641; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #3a3a3a;
border: 1px solid #21a641; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #3a3a3a;
border: 1px solid #cecece; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #75787b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.18; letter-spacing: 0.5px; background: #21a641; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,system-ui,sans-serif; background:#ffffff; color:#4a5464; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #d0d3d4;}
.logo{font-size:19px;font-weight:700;color:#21a641;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#3a3a3a;}
.hero{height:210px;display:flex;background:#f8f2e9;}
.herotxt{width:48%;padding:22px 34px;display:flex;flex-direction:column;justify-content:center;}
.herotxt .k{font-size:12px;font-weight:500;color:#28724f;letter-spacing:0.3px;text-transform:uppercase;margin-bottom:8px;}
.herotxt h1{font-family:Georgia,serif;font-size:30px;font-weight:700;color:#3a3a3a;margin:0 0 10px;line-height:1.2;}
.herotxt p{font-size:14px;margin:0 0 18px;max-width:280px;}
.cta{width:fit-content;font-size:14px;font-weight:500;background:#21a641;color:#fff;padding:12px 28px;border-radius:9999px;}
.juicer{width:52%;display:flex;align-items:flex-end;justify-content:center;}
.jug{width:100px;height:140px;border-radius:20px 20px 8px 8px;background:linear-gradient(160deg,#7bdb56,#21a641);position:relative;}
.jug:before{content:'';position:absolute;top:-16px;left:20px;width:60px;height:20px;border-radius:8px 8px 0 0;background:#28724f;}
.jug:after{content:'';position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:70px;height:60px;border-radius:50%;background:rgba(255,255,255,0.25);}
.sec{padding:18px 34px 0;}
.sec h2{font-size:17px;font-weight:700;color:#3a3a3a;margin:0 0 14px;}
.compare{display:flex;gap:1px;background:#d0d3d4;}
.col{flex:1;background:#fff;text-align:center;padding:12px 8px;}
.col:nth-child(odd){background:#f5f5f5;}
.col .name{font-size:13px;font-weight:700;color:#3a3a3a;}
.col .price{font-size:16px;font-weight:700;color:#21a641;margin-top:4px;}
.col .spec{font-size:11px;color:#75787b;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;background:#23282f;color:#d0d3d4;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:11px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Nama</div>
<div class="navlinks"><div>Juicers</div><div>Presses</div><div>Recipes</div><div>Compare</div></div>
</div>
<div class="hero">
<div class="herotxt">
<div class="k">Cold Press Engineering</div>
<h1>Juice that keeps<br>its nutrients</h1>
<p>Slow masticating extraction preserves enzymes other juicers destroy.</p>
<div class="cta">Shop Juicers</div>
</div>
<div class="juicer"><div class="jug"></div></div>
</div>
<div class="sec">
<h2>Compare the Lineup</h2>
<div class="compare">
<div class="col"><div class="name">J2 Cold Press</div><div class="price">$149</div><div class="spec">Single Auger</div></div>
<div class="col"><div class="name">C2 Centrifugal</div><div class="price">$99</div><div class="spec">High Speed</div></div>
<div class="col"><div class="name">Vitajuicer Pro</div><div class="price">$249</div><div class="spec">Twin Gear</div></div>
</div>
</div>
<div class="footer"><span>10-Year Motor Warranty</span><span>Recipes Parts & Accessories</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f9fd; color: #191a19;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f9fd; color: #191a19;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.1px; margin: 0; color: #191a19; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #00cb69; color: #000000;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #f8f9fd; color: #191a19;
border: 1px solid #00cb69; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f9fd; color: #191a19;
border: 1px solid #c0c1c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #00cb69; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'InterTight','Helvetica Neue',Arial,sans-serif; background:#f8f9fd; color:#191a19; }
*{box-sizing:border-box;}
.promo{height:40px;background:#108474;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #d9d9d9;background:#fff;}
.logo{font-size:19px;font-weight:700;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;}
.hero{height:230px;background:#191a19;display:flex;align-items:center;padding:0 44px;color:#fff;}
.left{width:52%;}
.left h1{font-size:36px;font-weight:700;line-height:1.15;margin:0 0 14px;letter-spacing:-.5px;}
.left p{font-size:14px;color:#ccc;max-width:340px;margin:0 0 18px;}
.btn{display:inline-block;background:#00cb69;color:#fff;font-size:16px;font-weight:600;padding:12px 28px;border-radius:8px;}
.right{width:44%;height:150px;border-radius:12px;background:linear-gradient(135deg,#00cb69,#191a19 70%);}
.section{padding:20px 40px 0;}
.chips{display:flex;gap:10px;margin-bottom:16px;}
.chip{background:#eeeeee;color:#1d1d1d;font-size:13px;padding:6px 16px;border-radius:9999px;}
.chip.active{background:#191a19;color:#fff;}
.sectitle{font-size:20px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#ecedf0;border-radius:12px;padding:16px;position:relative;}
.thumb{height:80px;background:#dfe1e5;border-radius:8px;margin-bottom:8px;}
.badge{position:absolute;top:8px;left:8px;background:#00cb69;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.ptitle{font-size:16px;font-weight:600;}
.pprice{font-size:22px;font-weight:700;margin-top:4px;}
</style>
<div class="promo">Free Shipping on Orders Over $99</div>
<div class="nav">
<div class="logo">Xtool</div>
<div class="navlinks"><div>Laser Cutters</div><div>Engravers</div><div>Materials</div><div>Compare</div></div>
</div>
<div class="hero">
<div class="left">
<h1>Precision laser tools for makers.</h1>
<p>Desktop laser engravers and cutters built for creators, from hobbyists to studios.</p>
<div class="btn">Shop Lasers</div>
</div>
<div class="right"></div>
</div>
<div class="section">
<div class="chips"><div class="chip active">All</div><div class="chip">Diode</div><div class="chip">CO2</div><div class="chip">Fiber</div></div>
<div class="sectitle">Popular Machines</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb"></div><div class="ptitle">xTool D1 Pro</div><div class="pprice">$489</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">xTool S1</div><div class="pprice">$1,699</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">xTool F1 Ultra</div><div class="pprice">$1,199</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f2ec; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f2ec; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: 0.5px; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #a49c8b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #ab8c52; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #f5f2ec; color: #212121;
border: 1px solid #ab8c52; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f5f2ec; color: #212121;
border: 1px solid #c0beb9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a49c8b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #868154; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f5f2ec; font-family:'Brandon Grotesque','Helvetica Neue',Arial,sans-serif; color:#212121;
}
*{box-sizing:border-box;}
.nav{height:56px; display:flex; align-items:center; padding:0 30px; border-bottom:1px solid #ab8c52;}
.logo{font-family:'Alternate Gothic No 3D','Arial Narrow',sans-serif; font-size:24px; letter-spacing:1px; text-transform:uppercase;}
.navlinks{display:flex; gap:22px; margin-left:40px; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#5a5648;}
.navicons{margin-left:auto; font-size:11px; letter-spacing:1px; color:#5a5648;}
.hero{display:flex; gap:0; height:230px;}
.heroImg{flex:1.2; background:linear-gradient(150deg,#3a3733 0%,#ab8c52 100%); position:relative;}
.heroImg .stitch{position:absolute; inset:16px; border:1px dashed rgba(255,255,255,.4);}
.heroText{flex:1; padding:26px 32px; display:flex; flex-direction:column; justify-content:center;}
.heroText .eyebrow{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#ab8c52; margin-bottom:8px;}
.heroText h1{font-family:'Alternate Gothic No 3D','Arial Narrow',sans-serif; font-size:34px; text-transform:uppercase; letter-spacing:.5px; line-height:1.05; margin:0 0 10px;}
.heroText p{font-size:12.5px; color:#4a463c; line-height:1.5; margin:0 0 14px;}
.heroBtn{display:inline-block; background:#ab8c52; color:#fff; padding:11px 24px; font-size:11px; letter-spacing:1px; text-transform:uppercase; border-radius:4px; width:fit-content;}
.section{padding:16px 30px 0;}
.sectitle{font-family:'Alternate Gothic No 3D','Arial Narrow',sans-serif; font-size:17px; text-transform:uppercase; letter-spacing:.5px; margin:0 0 12px;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.card{background:#fff; border-radius:4px; padding:8px; text-align:center;}
.thumb{height:74px; border-radius:4px; margin-bottom:8px;}
.t1{background:linear-gradient(135deg,#ab8c52,#212121);}
.t2{background:linear-gradient(135deg,#b0a38b,#7a7160);}
.t3{background:linear-gradient(135deg,#a49c8b,#4a4638);}
.t4{background:linear-gradient(135deg,#c9b98a,#8a7248);}
.pname{font-size:11.5px; font-weight:600; margin-bottom:3px;}
.pprice{font-size:11.5px; color:#ab8c52; font-weight:700;}
.footer{position:absolute; bottom:0; left:0; right:0; background:#282c2e; border-top:2px solid #ab8c52; color:#c9c2b0; font-size:10px; text-align:center; padding:8px 0;}
</style>
<div class="nav">
<div class="logo">Hardgraft</div>
<div class="navlinks"><span>Bags</span><span>Home</span><span>Apparel</span><span>Journal</span></div>
<div class="navicons">Search · Cart</div>
</div>
<div class="hero">
<div class="heroImg"><div class="stitch"></div></div>
<div class="heroText">
<div class="eyebrow">New Season</div>
<h1>A Workshop Ledger, Not a Wishlist</h1>
<p>Vegetable-tanned leather goods, hand-cut and stitched — serious, material, unimpressed by trends.</p>
<div class="heroBtn">View Collection</div>
</div>
</div>
<div class="section">
<div class="sectitle">Essentials</div>
<div class="grid">
<div class="card"><div class="thumb t1"></div><div class="pname">Field Tote</div><div class="pprice">€310</div></div>
<div class="card"><div class="thumb t2"></div><div class="pname">Desk Roll</div><div class="pprice">€185</div></div>
<div class="card"><div class="thumb t3"></div><div class="pname">Card Sleeve</div><div class="pprice">€65</div></div>
<div class="card"><div class="thumb t4"></div><div class="pname">Travel Pouch</div><div class="pprice">€140</div></div>
</div>
</div>
<div class="footer">© Hardgraft — Hand-Made Leather, Slowly</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #1268b3; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #1268b3;
border: 1px solid #1268b3; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #d4d8dd; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e8f0f9; color: #1268b3;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Lato','Helvetica Neue',Helvetica,Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:60px;background:#043d5d;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Arial Narrow',Arial,sans-serif;font-size:20px;font-weight:800;color:#ffffff;letter-spacing:0.5px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:700;color:#ffffff;}
.search{width:200px;height:34px;background:#fff;border-radius:2px;display:flex;align-items:center;padding:0 12px;font-size:12px;color:#666666;}
.search:after{content:'⌕';margin-left:auto;color:#1268b3;font-weight:700;}
.hero{height:180px;background:linear-gradient(rgba(4,61,93,0.82),rgba(4,61,93,0.82)),repeating-linear-gradient(45deg,#25516b 0,#25516b 10px,#1e4258 10px,#1e4258 20px);display:flex;align-items:center;padding:0 32px;}
.h1{font-family:Arial,sans-serif;font-size:34px;font-weight:800;color:#fff;letter-spacing:-0.3px;line-height:1.15;margin:0 0 8px;}
.sub{font-size:14px;color:#dbe9f3;margin:0 0 14px;max-width:400px;}
.btn{display:inline-block;background:#1268b3;color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;padding:11px 22px;border-radius:2px;}
.strip{height:44px;background:#f4f6f8;display:flex;align-items:center;gap:24px;padding:0 32px;font-size:12px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;color:#333333;border-bottom:1px solid #d4d8dd;}
.strip .on{color:#1268b3;border-bottom:2px solid #1268b3;padding-bottom:12px;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:206px;background:#fff;border:1px solid #d4d8dd;border-radius:2px;padding:12px;}
.thumb{height:100px;background:#f4f6f8;border-radius:2px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;}
.chip{width:44px;height:70px;border-radius:2px;}
.ptitle{font-family:Arial,sans-serif;font-size:15px;font-weight:700;color:#1a1a1a;}
.pn{font-family:monospace,Arial;font-size:11px;font-weight:700;color:#666666;letter-spacing:0.5px;text-transform:uppercase;margin:2px 0 6px;}
.badges{display:flex;gap:5px;}
.pbadge{background:#e8f0f9;color:#1268b3;border:1px solid #1268b3;font-size:10px;font-weight:700;padding:2px 6px;border-radius:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#043d5d;border-top:4px solid #1268b3;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#93c5e8;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Red Lion Controls</div>
<div class="navlinks"><div>Controllers</div><div>Monitors</div><div>Networking</div><div>Software</div></div>
<div class="search">Search part number...</div>
</div>
<div class="hero">
<div>
<div class="h1">Precision hardware for<br>the factory floor.</div>
<div class="sub">Temperature controllers and process monitors engineered for uptime, not upsells.</div>
<div class="btn">Find a Controller</div>
</div>
</div>
<div class="strip">
<div class="on">Temperature Controllers</div><div>Process Monitors</div><div>PLC I/O</div><div>Networking</div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="chip" style="background:linear-gradient(160deg,#1268b3,#043d5d)"></div></div><div class="ptitle">Model D1S Panel Meter</div><div class="pn">D1S-1000</div><div class="badges"><div class="pbadge">MODBUS</div><div class="pbadge">4-20mA</div></div></div>
<div class="card"><div class="thumb"><div class="chip" style="background:linear-gradient(160deg,#043d5d,#1268b3)"></div></div><div class="ptitle">CUB5 Universal Counter</div><div class="pn">CUB5-1000</div><div class="badges"><div class="pbadge">RS-485</div></div></div>
<div class="card"><div class="thumb"><div class="chip" style="background:linear-gradient(160deg,#1268b3,#0d57a0)"></div></div><div class="ptitle">PAX2C Process Meter</div><div class="pn">PAX2C-100</div><div class="badges"><div class="pbadge">ETHERNET/IP</div></div></div>
<div class="card"><div class="thumb"><div class="chip" style="background:linear-gradient(160deg,#0d57a0,#043d5d)"></div></div><div class="ptitle">G3 Data Station Plus</div><div class="pn">G3-2000</div><div class="badges"><div class="pbadge">PROFINET</div></div></div>
</div>
<div class="footer"><span>© Red Lion Controls — Products · Support · Dealers</span><span>Datasheets & Firmware</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #313131; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #3f3f3f;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #313131; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.topbar { height:56px; background:#313131; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.brand { font-size:15px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; margin:0; }
.navlinks { display:flex; gap:20px; font-size:12px; font-weight:600; letter-spacing:0.3px; text-transform:uppercase; }
.navlinks span { opacity:0.8; }
.navlinks span.on { opacity:1; border-bottom:2px solid #fff; padding-bottom:18px; }
.subbar { height:36px; background:#fff; border-bottom:1px solid #d4d4d4; display:flex; align-items:center; padding:0 28px; font-size:12px; color:#3f3f3f; gap:20px; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 92px); }
.stage { padding:24px; border-right:1px solid #e8e8e8; display:flex; flex-direction:column; gap:12px; }
.panel { flex:1; border-radius:12px; position:relative; overflow:hidden;
background:linear-gradient(180deg,#3a3a3a,#1f1f1f); }
.panel .strip { position:absolute; left:8%; top:14%; width:84%; height:72%; border-radius:6px; background:#232323; box-shadow:inset 0 0 0 1px #444; display:flex; padding:14px 10px; gap:8px; }
.fader { flex:1; background:linear-gradient(#161616,#0d0d0d); border-radius:4px; position:relative; }
.fader::after { content:''; position:absolute; left:2px; right:2px; height:6px; border-radius:2px; background:#aeaeae; box-shadow:0 0 4px rgba(0,0,0,0.5); }
.fader:nth-child(1)::after{ top:30%; } .fader:nth-child(2)::after{ top:50%; } .fader:nth-child(3)::after{ top:20%; }
.fader:nth-child(4)::after{ top:60%; } .fader:nth-child(5)::after{ top:40%; } .fader:nth-child(6)::after{ top:70%; }
.rec { position:absolute; right:16px; top:16px; width:8px; height:8px; border-radius:50%; background:#c8102e; box-shadow:0 0 8px rgba(200,16,46,0.8); }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.badges { display:flex; gap:6px; }
.badge { background:#313131; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:2px 10px; border-radius:999px; }
.badge-live { background:#c8102e; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:2px 10px; border-radius:999px; }
h1 { margin:0; font-size:22px; font-weight:600; }
.price { font-size:20px; font-weight:600; }
.spec-table { border:1px solid #e8e8e8; border-radius:4px; overflow:hidden; }
.spec-row { display:flex; justify-content:space-between; padding:8px 12px; font-size:13px; border-bottom:1px solid #e8e8e8; }
.spec-row:last-child { border-bottom:none; }
.spec-row .l { font-weight:600; color:#1a1a1a; }
.spec-row .v { color:#3f3f3f; }
.spec-row.head { background:#f5f5f5; font-weight:600; }
.tabs { display:flex; gap:8px; }
.tab { padding:8px 16px; font-size:13px; font-weight:600; border-radius:8px; background:#f5f5f5; color:#6a6a6a; }
.tab.on { background:#313131; color:#fff; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:44px; background:#313131; color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; }
.btn-download { width:170px; height:44px; background:#2ecc71; color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; }
</style></head>
<body>
<div class="topbar">
<p class="brand">Allen And Heath</p>
<div class="navlinks"><span>Mixers</span><span class="on">Digital Consoles</span><span>Interfaces</span><span>Support</span></div>
</div>
<div class="subbar">Allen And Heath > Live Sound > dLive Series</div>
<main>
<div class="stage">
<div class="panel"><div class="rec"></div><div class="strip">
<div class="fader"></div><div class="fader"></div><div class="fader"></div><div class="fader"></div><div class="fader"></div><div class="fader"></div>
</div></div>
</div>
<div class="info">
<div class="badges"><span class="badge">Flagship</span><span class="badge-live">Live-tested</span></div>
<h1>dLive S5000 Digital Mixing Surface</h1>
<div class="price">$18,499.00</div>
<div class="spec-table">
<div class="spec-row head"><span class="l">Specification</span><span class="v">Value</span></div>
<div class="spec-row"><span class="l">Faders</span><span class="v">24 motorized</span></div>
<div class="spec-row"><span class="l">Processing</span><span class="v">128 channels</span></div>
<div class="spec-row"><span class="l">I/O</span><span class="v">Dual gigaACE</span></div>
<div class="spec-row"><span class="l">Firmware</span><span class="v">v1.92</span></div>
</div>
<div class="tabs"><span class="tab on">Overview</span><span class="tab">Specs</span><span class="tab">Firmware</span></div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-download">Download Manual</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #252525;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #252525;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.18; margin: 0; color: #252525; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #616161; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.02em; background: #00816c; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.02em; background: #ffffff; color: #252525;
border: 1px solid #00816c; border-radius: 0px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #252525;
border: 1px solid #c8c8c8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #616161; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.23; letter-spacing: 0.02em; background: #e22d00; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#fafafa; color:#252525; font-family:'Soehne', Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing:border-box; }
.wrap{ position:relative; width:960px; height:640px; }
.nav{ height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#ffffff; border-bottom:1px solid #d8d8d8; }
.logo{ font-size:17px; font-weight:700; letter-spacing:0.02em; }
.navlinks{ display:flex; gap:22px; }
.navlinks span{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#5a5a5a; }
.navlinks span.active{ color:#00816c; }
.cta{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; font-weight:700; color:#ffffff; background:#00816c; padding:9px 16px; }
.hero{ height:206px; display:flex; border-bottom:1px solid #d8d8d8; }
.hero-text{ width:400px; padding:26px 32px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid #d8d8d8; }
.kicker{ font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:#00816c; margin-bottom:10px; }
.h1{ font-size:30px; font-weight:700; line-height:1.14; color:#252525; margin-bottom:10px; }
.sub{ font-size:13px; line-height:1.5; color:#5a5a5a; max-width:320px; }
.hero-spec{ flex:1; display:flex; align-items:center; padding:0 26px; gap:22px; }
.chair{ position:relative; width:150px; height:150px; flex-shrink:0; }
.c-back{ position:absolute; left:44px; top:6px; width:62px; height:76px; background:#252525; }
.c-seat{ position:absolute; left:28px; top:82px; width:94px; height:16px; background:#3a3a3a; }
.c-leg{ position:absolute; left:70px; top:98px; width:6px; height:44px; background:#00816c; }
.spec-table{ font-size:11px; letter-spacing:0.04em; }
.spec-row{ display:flex; justify-content:space-between; width:220px; padding:6px 0; border-bottom:1px solid #e2e2e2; }
.spec-label{ color:#8a8a8a; text-transform:uppercase; letter-spacing:0.08em; font-size:10px; }
.spec-val{ font-family:monospace; color:#252525; font-weight:700; }
.section-title{ padding:14px 32px 6px; font-size:14px; font-weight:700; letter-spacing:0.02em; }
.grid{ display:flex; gap:0; padding:0 32px; border-top:1px solid #d8d8d8; }
.card{ width:214.67px; background:#ffffff; border-right:1px solid #d8d8d8; padding:12px; }
.card:last-child{ border-right:none; }
.card-img{ width:100%; height:76px; margin-bottom:8px; }
.card-title{ font-size:12px; font-weight:700; margin-bottom:2px; }
.card-note{ font-size:10px; color:#8a8a8a; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:8px; }
.row{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-family:monospace; font-size:12px; font-weight:700; color:#252525; }
.tag{ font-size:9px; letter-spacing:0.06em; text-transform:uppercase; color:#fff; background:#e22d00; padding:2px 6px; }
.promo{ margin:18px 32px 0; height:96px; background:#eef7f5; border:1px solid #cfe6e1; display:flex; align-items:center; justify-content:space-between; padding:0 26px; }
.promo-label{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#00816c; font-weight:700; }
.promo-sub{ font-size:12px; color:#5a5a5a; margin-top:4px; max-width:400px; }
.promo-fig{ display:flex; gap:16px; }
.promo-num{ text-align:center; }
.promo-num b{ display:block; font-family:monospace; font-size:20px; color:#252525; }
.promo-num small{ font-size:9px; letter-spacing:0.08em; text-transform:uppercase; color:#8a8a8a; }
.footer{ position:absolute; bottom:0; left:0; width:960px; height:44px; background:#004338; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.footer span{ font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:#bcded8; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Herman Miller Chairs</div>
<div class="navlinks">
<span class="active">Task Chairs</span>
<span>Lounge</span>
<span>Specifications</span>
<span>CAD Library</span>
</div>
<div class="cta">Request Spec Sheet</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="kicker">Aeron Family — Size B</div>
<div class="h1">Every spec, uppercase, to the millimeter.</div>
<div class="sub">Aluminum frame, 8Z Pellicle suspension, PostureFit SL. Documented like a white paper, not a lifestyle catalog.</div>
</div>
<div class="hero-spec">
<div class="chair">
<div class="c-back"></div>
<div class="c-seat"></div>
<div class="c-leg"></div>
</div>
<div class="spec-table">
<div class="spec-row"><span class="spec-label">Seat Height</span><span class="spec-val">40.6–53.3 CM</span></div>
<div class="spec-row"><span class="spec-label">Weight Limit</span><span class="spec-val">136 KG</span></div>
<div class="spec-row"><span class="spec-label">Frame</span><span class="spec-val">CAST ALUMINUM</span></div>
<div class="spec-row"><span class="spec-label">Warranty</span><span class="spec-val">12 YEARS</span></div>
</div>
</div>
</div>
<div class="section-title">Configuration Options</div>
<div class="grid">
<div class="card">
<div class="card-img" style="background:#252525;"></div>
<div class="card-title">Aeron — Graphite</div>
<div class="card-note">Size B · Fully Adj Arms</div>
<div class="row"><span class="price">$1,895.00</span><span class="tag">Ships Now</span></div>
</div>
<div class="card">
<div class="card-img" style="background:#00816c;"></div>
<div class="card-title">Embody — Balance</div>
<div class="card-note">Standard · Adv Arms</div>
<div class="row"><span class="price">$2,095.00</span><span class="tag" style="background:#ce973d;">4 Wk Lead</span></div>
</div>
<div class="card">
<div class="card-img" style="background:#004e41;"></div>
<div class="card-title">Cosm — Mid Back</div>
<div class="card-note">Leaf Arms · G1</div>
<div class="row"><span class="price">$1,095.00</span><span class="tag" style="background:#cd4557;">Sale</span></div>
</div>
<div class="card">
<div class="card-img" style="background:#8a8a8a;"></div>
<div class="card-title">Sayl — Y-Tower</div>
<div class="card-note">Task · Armless</div>
<div class="row"><span class="price">$695.00</span><span class="tag">Ships Now</span></div>
</div>
</div>
<div class="promo">
<div>
<div class="promo-label">Contract & Trade Program</div>
<div class="promo-sub">Volume pricing, CAD/BIM files and 12-year warranty documentation for facilities and design firms.</div>
</div>
<div class="promo-fig">
<div class="promo-num"><b>136 KG</b><small>Weight Limit</small></div>
<div class="promo-num"><b>12 YR</b><small>Warranty</small></div>
<div class="promo-num"><b>4 SIZES</b><small>Frame Range</small></div>
</div>
</div>
<div class="footer">
<span>© Herman Miller Chairs — Spec Documentation</span>
<span>CAD / BIM · Contract Sales</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #656565; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #7bc7c7; color: #000000;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #121212;
border: 1px solid #7bc7c7; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #656565; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 1.2px; background: #53b8d4; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Montserrat',sans-serif; color:#4d4d4d; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dedede;}
.logo{font-size:19px;font-weight:600;color:#121212;letter-spacing:.3px;}
.navlinks{display:flex;gap:30px;font-size:13px;font-weight:400;color:#4d4d4d;}
.hero{height:200px;display:flex;align-items:center;padding:0 40px;background:linear-gradient(120deg,#d8edf5,#7bc7c7);}
h1{font-size:32px;font-weight:600;color:#121212;margin:0 0 10px;letter-spacing:-.4px;}
.sub{font-size:14px;color:#4d4d4d;margin:0;width:460px;}
.section{padding:22px 40px 0;}
.sectitle{font-size:18px;font-weight:600;color:#121212;margin-bottom:14px;}
.configrow{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.pill{height:38px;padding:0 20px;border-radius:9999px;background:#f7f7f7;font-size:13px;font-weight:600;color:#656565;display:flex;align-items:center;}
.pill.active{background:#7bc7c7;color:#fff;}
.swrow{display:flex;gap:8px;}
.sw{width:28px;height:28px;border-radius:9999px;border:2px solid #fff;box-shadow:0 0 0 1px #dedede;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:8px;padding:12px;box-shadow:0 2px 4px rgba(0,0,0,.06);}
.thumb{height:100px;border-radius:8px;margin-bottom:10px;}
.ptitle{font-size:14px;font-weight:600;color:#121212;line-height:1.3;height:36px;overflow:hidden;}
.pprice{font-size:13px;color:#656565;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Yardbird Outdoor 2</div>
<div class="navlinks"><span>Modular Sofas</span><span>Configurator</span><span>Outdoor Living</span><span>Care</span></div>
</div>
<div class="hero">
<div>
<h1>Build your own poolside sectional.</h1>
<div class="sub">Modular outdoor sofas, configured piece by piece to fit your patio, your pool, your afternoon.</div>
</div>
</div>
<div class="section">
<div class="sectitle">Configure: Delray Modular Sofa</div>
<div class="configrow">
<div class="pill active">Corner</div>
<div class="pill">Armless</div>
<div class="pill">Ottoman</div>
<div class="swrow">
<div class="sw" style="background:#7bc7c7"></div>
<div class="sw" style="background:#5487a0"></div>
<div class="sw" style="background:#53b8d4"></div>
<div class="sw" style="background:#7396a2"></div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#7bc7c7,#d8edf5)"></div><div class="ptitle">Delray Corner Module</div><div class="pprice">$899</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#5487a0,#d8edf5)"></div><div class="ptitle">Delray Armless Module</div><div class="pprice">$749</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#53b8d4,#d8edf5)"></div><div class="ptitle">Delray Ottoman</div><div class="pprice">$399</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#7396a2,#f3f3f3)"></div><div class="ptitle">Weatherproof Cushion Cover</div><div class="pprice">$129</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #0f3b56;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #0f3b56;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #0f3b56; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f9fafb; color: #0f3b56;
border: 1px solid #108474; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #0f3b56;
border: 1px solid #becad2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:'Montserrat','Nunito Sans',-apple-system,sans-serif; color:#0f3b56; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fff;border-bottom:1px solid #e7e7e7;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-size:19px;font-weight:700;color:#0d3863;letter-spacing:-0.2px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;color:#0d3863;}
.cart{position:relative;font-size:13px;font-weight:600;color:#0f3b56;}
.cartdot{position:absolute;top:-8px;right:-14px;background:#108474;color:#fff;font-size:10px;font-weight:700;border-radius:9999px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;}
.hero{height:230px;position:relative;overflow:hidden;background:linear-gradient(120deg,#0f3b56 0%,#175a72 55%,#108474 100%);display:flex;align-items:center;padding:0 40px;}
.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(16,132,116,0.2),rgba(15,59,86,0.4));}
.peak{position:absolute;right:0;bottom:0;width:340px;height:140px;background:linear-gradient(115deg,#7b9aa8 0%,#dfe7e9 45%,transparent 46%);clip-path:polygon(0% 100%,30% 30%,48% 55%,68% 10%,100% 60%,100% 100%);opacity:0.55;}
.herotext{position:relative;z-index:2;max-width:430px;}
.kicker{font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#8fd9cc;margin-bottom:10px;}
.h1{font-size:32px;font-weight:700;line-height:1.2;letter-spacing:-0.5px;color:#fff;margin:0 0 10px;}
.sub{font-size:14px;line-height:1.5;color:#dceeee;margin:0 0 18px;max-width:340px;}
.btn{display:inline-block;background:#108474;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.3px;padding:12px 26px;border-radius:8px;}
.pills{display:flex;gap:10px;padding:16px 36px 10px;}
.pill{background:#f5f5f5;color:#0f3b56;font-size:12px;font-weight:600;padding:8px 16px;border-radius:9999px;}
.pill.active{background:#108474;color:#fff;}
.grid{display:flex;gap:14px;padding:6px 36px 0;}
.card{width:190px;background:#fff;border-radius:12px;overflow:hidden;position:relative;box-shadow:0 1px 3px rgba(15,59,86,0.06);}
.badge{position:absolute;top:8px;left:8px;background:#108474;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:4px 8px;border-radius:4px;z-index:2;}
.thumb{height:98px;position:relative;}
.pbody{padding:10px 12px 12px;}
.ptitle{font-size:14px;font-weight:600;color:#0f3b56;margin:0 0 4px;line-height:1.3;}
.stars{color:#108474;font-size:11px;margin-bottom:4px;}
.pprice{font-size:15px;font-weight:600;color:#108474;margin:0;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#f9f9f9;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:12px;color:#7b7b7b;border-top:1px solid #e7e7e7;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Outdoor Vitals</div>
<div class="navlinks"><div>Shop</div><div>Learn</div><div>About</div></div>
<div class="cart">CART<span class="cartdot">3</span></div>
</div>
<div class="hero">
<div class="peak"></div>
<div class="herotext">
<div class="kicker">Alpine Tested · Trail Proven</div>
<div class="h1">Built for altitude, not the mall.</div>
<div class="sub">Ultralight tents, bags, and layers engineered on real ridgelines — not marketing decks.</div>
<div class="btn">Shop Gear</div>
</div>
</div>
<div class="pills">
<div class="pill active">Tents</div>
<div class="pill">Sleeping Bags</div>
<div class="pill">Cookware</div>
<div class="pill">Layers</div>
</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#108474,#0f3b56)"></div><div class="pbody"><div class="ptitle">StormLoft 2P Tent</div><div class="stars">★★★★★</div><div class="pprice">$249</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#558499,#0f3b56)"></div><div class="pbody"><div class="ptitle">Down Hammock Quilt</div><div class="stars">★★★★★</div><div class="pprice">$189</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0f3b56,#108474)"></div><div class="pbody"><div class="ptitle">Traverse Rain Shell</div><div class="stars">★★★★☆</div><div class="pprice">$159</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7b7b7b,#0f3b56)"></div><div class="pbody"><div class="ptitle">Titan Cook Set</div><div class="stars">★★★★★</div><div class="pprice">$79</div></div></div>
</div>
<div class="footer"><span>Free Shipping Over $75</span><span>Lifetime Warranty · Trail-Tested</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313440;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313440;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.35; margin: 0; color: #313440; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; background: #008a06; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 18px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; background: #ffffff; color: #313440;
border: 1px solid #008a06; border-radius: 4px;
padding: 9px 17px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313440;
border: 1px solid #cccccf; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.2px; background: #d5ffd8; color: #008a06;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313440; box-sizing:border-box; font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
.navbar { height:52px; background:#313440; display:flex; align-items:center; padding:0 18px; gap:16px; }
.brand { color:#fff; font-weight:700; font-size:19px; }
.search { flex:1; max-width:380px; display:flex; height:38px; }
.search input { flex:1; border:1px solid #e5e5e5; border-radius:4px 0 0 4px; padding:0 10px; outline:none; }
.search .btn { width:60px; background:#f1a500; color:#fff; font-weight:700; border-radius:0 4px 4px 0; display:flex; align-items:center; justify-content:center; font-size:12px; }
.navicons { color:#fff; font-size:12px; margin-left:auto; display:flex; gap:16px; }
.subnav { height:36px; background:#f5f5f5; border-bottom:1px solid #e5e5e5; display:flex; align-items:center; gap:18px; padding:0 18px; font-size:12px; }
.body { display:flex; height:calc(640px - 88px); }
.sidebar { width:180px; background:#f5f5f5; border-right:1px solid #e5e5e5; font-size:12px; padding:12px; }
.sidebar .item { padding:7px 4px; color:#313440; }
.sidebar .item.active { background:#008a06; color:#fff; border-radius:2px; }
.main { flex:1; padding:14px 18px; }
.crumb { font-size:11px; color:#757575; margin-bottom:8px; }
table { width:100%; border-collapse:collapse; font-size:11px; }
th { background:#f5f5f5; text-align:left; padding:6px 8px; text-transform:uppercase; font-size:10px; letter-spacing:.3px; }
td { padding:6px 8px; border-bottom:1px solid #ececec; }
tr:nth-child(even) td { background:#f5f5f5; }
.part { font-family:'Courier New', monospace; background:#f5f5f5; padding:2px 6px; border-radius:4px; color:#757575; }
.instock { background:#d5ffd8; color:#008a06; font-size:9px; font-weight:700; text-transform:uppercase; padding:2px 6px; border-radius:4px; }
.addbtn { background:#008a06; color:#fff; font-size:11px; font-weight:700; padding:6px 12px; border-radius:4px; display:inline-block; }
.qtybox { border:1px solid #e5e5e5; width:44px; height:26px; text-align:center; border-radius:4px; display:inline-block; line-height:26px; background:#fff; font-size:11px; }
.dtable { margin-top:14px; }
.dtable th { background:#313440; color:#fff; }
</style></head>
<body>
<div class="navbar">
<div class="brand">Fasteners Direct</div>
<div class="search"><input placeholder="Search by part number..." /><div class="btn">SEARCH</div></div>
<div class="navicons"><span>Account</span><span>Cart (0)</span></div>
</div>
<div class="subnav"><div>Bolts</div><div>Nuts</div><div>Screws</div><div>Washers</div><div>Anchors</div><div>Rivets</div></div>
<div class="body">
<div class="sidebar">
<div class="item active">Bolts</div>
<div class="item">Nuts</div>
<div class="item">Screws</div>
<div class="item">Washers</div>
<div class="item">Anchors</div>
<div class="item">Rivets</div>
</div>
<div class="main">
<div class="crumb">Home / Bolts / Hex Bolts</div>
<table>
<tr><th>Part No.</th><th>Description</th><th>UOM</th><th>Unit Price</th><th>Qty</th><th></th></tr>
<tr><td><span class="part">M8X1.25-25</span></td><td>Hex Bolt M8x1.25x25mm Gr10.9</td><td>EA</td><td>$0.38</td><td><span class="qtybox">10</span></td><td><span class="instock">In Stock</span></td></tr>
<tr><td><span class="part">M10X1.5-40</span></td><td>Hex Bolt M10x1.5x40mm Gr10.9</td><td>EA</td><td>$0.54</td><td><span class="qtybox">10</span></td><td><span class="instock">In Stock</span></td></tr>
<tr><td><span class="part">M6X1.0-20</span></td><td>Hex Bolt M6x1.0x20mm Gr8.8</td><td>EA</td><td>$0.22</td><td><span class="qtybox">10</span></td><td><span class="instock">In Stock</span></td></tr>
</table>
<table class="dtable">
<tr><th>Min Qty</th><th>Unit Price</th><th>Savings</th></tr>
<tr><td>1-99</td><td>$0.38</td><td>—</td></tr>
<tr><td>100-499</td><td>$0.32</td><td>16%</td></tr>
<tr><td>500+</td><td>$0.27</td><td>29%</td></tr>
</table>
<div style="margin-top:12px"><span class="addbtn">Add to Cart</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #001017; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #001017; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878e91; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #002a3a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #001017; color: #ffffff;
border: 1px solid #002a3a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #001017; color: #f5f5f5;
border: 1px solid #27353b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878e91; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00141d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#001017; color:#EAF6F9; box-sizing:border-box; font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'SF Pro Rounded','SF Pro Display','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; padding:22px 32px 0; }
.greeting { font-size:22px; font-weight:700; }
.heroCard { display:flex; align-items:center; gap:24px; background:#002A3A; border-radius:24px; padding:22px; margin-top:16px; }
.ring { width:116px; height:116px; position:relative; flex-shrink:0; }
.ringtext { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ringtext .n { font-size:26px; font-weight:700; }
.ringtext .l { font-size:11px; color:#8AAEB8; margin-top:2px; }
.heroright .h { font-size:15px; font-weight:700; }
.heroright .s { font-size:13px; color:#8AAEB8; margin-top:4px; }
.trendchip { display:inline-block; margin-top:10px; background:rgba(0,176,185,0.15); color:#21D9CE; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; }
.tilesgrid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:16px; }
.tile { background:#002A3A; border-radius:20px; padding:16px; }
.tilehead { display:flex; align-items:center; gap:8px; }
.iconchip { width:24px; height:24px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:#001017; font-size:13px; }
.tilelabel { font-size:12px; font-weight:600; color:#8AAEB8; }
.tileval { font-size:26px; font-weight:700; margin-top:8px; }
.tileunit { font-size:13px; font-weight:600; color:#8AAEB8; }
.tilesub { font-size:12px; color:#5C808B; margin-top:4px; }
</style>
</head>
<body>
<div class="stage">
<div style="font-size:11px;font-weight:700;letter-spacing:1pt;text-transform:uppercase;color:#00B0B9;margin-bottom:6px">Fitbit (iOS)</div>
<div class="greeting">Good morning, Maya</div>
<div class="heroCard">
<div class="ring">
<svg width="116" height="116" viewBox="0 0 116 116">
<circle cx="58" cy="58" r="52" fill="none" stroke="#0A475E" stroke-width="11"/>
<circle cx="58" cy="58" r="52" fill="none" stroke="#00B0B9" stroke-width="11" stroke-linecap="round" stroke-dasharray="326" stroke-dashoffset="98" transform="rotate(-90 58 58)"/>
</svg>
<div class="ringtext"><div class="n">7,842</div><div class="l">of 10,000 steps</div></div>
</div>
<div class="heroright">
<div class="h">You're close!</div>
<div class="s">2,158 steps to hit your daily goal.</div>
<div class="trendchip">▲ 12% vs last week</div>
</div>
</div>
<div class="tilesgrid">
<div class="tile"><div class="tilehead"><div class="iconchip" style="background:#FF6B81">♥</div><div class="tilelabel">Heart Rate</div></div><div class="tileval">68 <span class="tileunit">bpm</span></div><div class="tilesub">Resting · 52–148 today</div></div>
<div class="tile"><div class="tilehead"><div class="iconchip" style="background:#7C5CFF">☾</div><div class="tilelabel">Sleep</div></div><div class="tileval">7h <span class="tileunit">24m</span></div><div class="tilesub">Score 84 · Good</div></div>
<div class="tile"><div class="tilehead"><div class="iconchip" style="background:#B8E986">✓</div><div class="tilelabel">Readiness</div></div><div class="tileval">78</div><div class="tilesub">Good to go today</div></div>
<div class="tile"><div class="tilehead"><div class="iconchip" style="background:#FF8A3D">⚡</div><div class="tilelabel">Active Zone</div></div><div class="tileval">32 <span class="tileunit">min</span></div><div class="tilesub">of 30 min weekly avg</div></div>
<div class="tile"><div class="tilehead"><div class="iconchip" style="background:#FFC233">🔥</div><div class="tilelabel">Calories</div></div><div class="tileval">1,840</div><div class="tilesub">Burned today</div></div>
<div class="tile"><div class="tilehead"><div class="iconchip" style="background:#4FC3F7">%</div><div class="tilelabel">SpO2</div></div><div class="tileval">97 <span class="tileunit">%</span></div><div class="tilesub">Overnight average</div></div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8e8e8e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; background: #e47911; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; background: #ffffff; color: #222222;
border: 1px solid #e47911; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8e8e8e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; background: #e4282c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>JJGames Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Arial,Geneva,Helvetica,sans-serif; background:#ffffff; color:#222222; }
*{box-sizing:border-box;}
.topbar{background:#660000;color:#fff;font-size:12px;padding:6px 20px;text-align:center;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #e0e0e0;}
.logo{font-weight:700;font-size:22px;color:#660000;}
.logo span{color:#e47911;}
.searchbar{flex:1;max-width:400px;margin:0 20px;display:flex;}
.searchbar input{flex:1;height:40px;border:2px solid #e47911;border-right:none;border-radius:8px 0 0 8px;padding:0 12px;font-size:14px;color:#8e8e8e;line-height:40px;}
.searchbtn{width:44px;height:40px;background:#e47911;border-radius:0 8px 8px 0;color:#fff;text-align:center;line-height:40px;}
.navicons{display:flex;gap:16px;font-size:14px;font-weight:600;color:#222;align-items:center;}
.cartbadge{background:#e4282c;color:#fff;border-radius:999px;font-size:10px;padding:1px 6px;margin-left:4px;}
.catrow{display:flex;gap:8px;padding:10px 20px;background:#f5f5f5;overflow:hidden;}
.pill{padding:6px 16px;border-radius:999px;background:#fff;border:1px solid #cccccc;font-size:13px;font-weight:600;}
.pill.active{background:#e47911;color:#fff;border-color:#e47911;}
.main{display:flex;gap:14px;padding:14px 20px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;flex:1;}
.card{border:1px solid #e0e0e0;padding:10px;position:relative;background:#fff;}
.imgbox{width:100%;height:96px;position:relative;}
.badge{position:absolute;top:0;left:0;background:#e4282c;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;}
.badge.sold{background:#8e8e8e;}
.badge.clear{background:#e47911;}
.title{font-size:14px;font-weight:600;margin-top:6px;line-height:1.3;height:36px;overflow:hidden;}
.price{font-size:16px;font-weight:700;color:#e47911;margin-top:4px;}
footer{background:#660000;color:#fff;font-size:11px;padding:14px 20px;position:absolute;bottom:0;left:0;right:0;height:70px;display:flex;justify-content:space-between;}
footer .col{line-height:1.9;}
footer .col b{display:block;margin-bottom:4px;font-size:12px;}
</style>
<div class="topbar">🎮 FREE SHIPPING ON ORDERS OVER $50 — RETRO GAMING SINCE 1997</div>
<div class="nav">
<div class="logo">Jjgames<span>.com</span></div>
<div class="searchbar"><input value="super mario"/><div class="searchbtn">🔍</div></div>
<div class="navicons"><span>Sign In</span><span>Cart<span class="cartbadge">3</span></span></div>
</div>
<div class="catrow">
<div class="pill active">NES</div><div class="pill">SNES</div><div class="pill">N64</div><div class="pill">PS1</div><div class="pill">Sega Genesis</div><div class="pill">GameCube</div>
</div>
<div class="main">
<div class="grid">
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#f0d9a0,#c9973f);"><div class="badge">Sale</div></div>
<div class="title">Super Mario Bros. 3 (NES, Cart Only)</div>
<div class="price">$34.99</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#b8c9e0,#5e7fb0);"><div class="badge sold">Sold Out</div></div>
<div class="title">Chrono Trigger (SNES, CIB)</div>
<div class="price">$189.99</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#d0c3e0,#8a6cae);"><div class="badge clear">Clearance</div></div>
<div class="title">GoldenEye 007 (N64, Cart Only)</div>
<div class="price">$24.99</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#c0d8c8,#5e9270);"></div>
<div class="title">Final Fantasy VII (PS1, CIB)</div>
<div class="price">$79.99</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#e0c8c8,#b06060);"><div class="badge">Sale</div></div>
<div class="title">Sonic the Hedgehog 2 (Genesis)</div>
<div class="price">$19.99</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#dcdcc0,#a2a262);"></div>
<div class="title">Metroid Prime (GameCube, CIB)</div>
<div class="price">$44.99</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#c8d0e0,#6a7ca0);"><div class="badge clear">Clearance</div></div>
<div class="title">Zelda: Ocarina of Time (N64)</div>
<div class="price">$39.99</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#e0d0b8,#b08b52);"></div>
<div class="title">Donkey Kong Country (SNES)</div>
<div class="price">$29.99</div>
</div>
</div>
</div>
<footer>
<div class="col"><b>Categories</b>Consoles<br>Cartridges<br>Accessories</div>
<div class="col"><b>Customer Service</b>Track Order<br>Returns<br>Contact Us</div>
<div class="col"><b>About</b>Our Story<br>Buy/Sell/Trade<br>Store Locations</div>
<div class="col"><b>Connect</b>Newsletter<br>Facebook<br>Instagram</div>
</footer>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #151414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #151414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #151414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.45; letter-spacing: 0.1px; margin: 0; color: #767574; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #116dff; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #151414;
border: 1px solid #116dff; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #151414;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767574; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #deebff; color: #116dff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#383838; box-sizing:border-box;
font-family:Madefor,Arial,"Helvetica Neue",Helvetica,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
border-bottom:1px solid #e0dfdf; }
.brand { font-size:19px; font-weight:700; color:#151414; }
.brand span { color:#116dff; }
.nlinks { display:flex; gap:24px; }
.nlinks div { font-size:13px; font-weight:600; color:#383838; }
.nlinks div.on { color:#116dff; }
.searchbar { background:#f1f0ef; border-radius:12px; padding:9px 18px; font-size:12px; color:#767574; }
.hero { height:230px; background:#151414; display:flex; align-items:center; padding:0 44px; position:relative; overflow:hidden; }
.hero::after { content:''; position:absolute; right:60px; top:50%; transform:translateY(-50%); width:160px; height:160px;
border-radius:50%; border:8px solid #116dff; opacity:0.85; }
.herotxt .k { color:#597dff; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; }
.herotxt h1 { color:#ffffff; font-size:32px; font-weight:700; margin:10px 0 10px; }
.herotxt p { color:#e0dfdf; font-size:14px; max-width:400px; margin:0 0 16px; }
.herobtn { display:inline-block; background:#116dff; color:#fff; font-size:13px; font-weight:600; border-radius:8px; padding:12px 24px; }
.section { padding:22px 34px 0; }
.sechead { font-size:16px; font-weight:600; color:#151414; margin-bottom:14px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.07); padding:12px; }
.shot { aspect-ratio:1/1; background:#f5f7ff; border-radius:10px; position:relative; display:flex; align-items:center; justify-content:center; }
.dial { width:60%; height:60%; border-radius:50%; border:5px solid #116dff; background:radial-gradient(circle,#fff,#eaefff 75%); }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; text-transform:uppercase;
padding:2px 8px; border-radius:20px; }
.badge.mint { background:#effae5; color:#0d4f3d; } .badge.sold { background:#fcebeb; color:#9c2426; }
.cref { font-family:"Courier New",monospace; font-size:10px; color:#767574; margin-top:8px; }
.ctitle { font-size:14px; font-weight:600; color:#151414; margin:3px 0; }
.cprice { font-size:16px; font-weight:700; color:#116dff; }
</style></head>
<body>
<nav>
<div class="brand">DC <span>DC Vintage Watches</span></div>
<div class="nlinks"><div class="on">Rolex</div><div>Tudor</div><div>Provenance</div><div>Sell</div></div>
<div class="searchbar">⌕ Search reference number</div>
</nav>
<div class="hero">
<div class="herotxt">
<div class="k">Verified Provenance</div>
<h1>Instrument-Grade Vintage Watches</h1>
<p>Every piece inspected, documented, and priced with the collector's intelligence in mind.</p>
<div class="herobtn">View Inventory</div>
</div>
</div>
<div class="section">
<div class="sechead">Recently Verified</div>
<div class="grid">
<div class="card"><div class="shot"><span class="badge mint">Mint</span><div class="dial"></div></div>
<div class="cref">Ref. 1675</div><div class="ctitle">GMT-Master, 1972</div><div class="cprice">$24,900</div></div>
<div class="card"><div class="shot"><div class="dial"></div></div>
<div class="cref">Ref. 7928</div><div class="ctitle">Tudor Chronograph, 1969</div><div class="cprice">$11,200</div></div>
<div class="card"><div class="shot"><span class="badge sold">Sold</span><div class="dial"></div></div>
<div class="cref">Ref. 6263</div><div class="ctitle">Daytona "Big Red", 1980</div><div class="cprice">$68,500</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #006aff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #006aff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b6fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #408fff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #006aff; color: #ffffff;
border: 1px solid #408fff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #006aff; color: #f5f5f5;
border: 1px solid #2780fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0a70ff; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:"Outfit", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:18px; font-weight:500; letter-spacing:1px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:15px; color:#ccc; }
.navcta { background:#006aff; color:#fff; border-radius:13px 13px 0px; padding:6px 16px; font-size:14px; font-weight:500; }
.hero { padding:30px 36px 0; text-align:center; }
.hero p.eyebrow { color:#8ca8cf; font-size:16px; margin:0 0 8px; }
.hero h1 { font-size:40px; font-weight:500; line-height:1.2; margin:0 0 18px; letter-spacing:1px;
background:linear-gradient(270deg, #ac9cff, #8e4dff, #69dfb2, #379afd);
-webkit-background-clip:text; background-clip:text; color:transparent; }
.heroCta { display:inline-flex; align-items:center; background:#3337f6; color:#fff; border-radius:10px;
padding:10px 22px; font-size:16px; font-weight:500; }
.band { position:absolute; top:260px; left:0; right:0; bottom:0; background:#ffffff; color:#333; padding:24px 36px 0; }
.bandtitle { font-size:22px; font-weight:500; color:#2e2e2e; margin-bottom:16px; text-align:center; }
.cards { display:flex; gap:16px; }
.card { flex:1; background:#ffffff; border:2px solid #ffffff; border-radius:20px; padding:20px 16px;
box-shadow:rgba(0,0,0,0.06) 3px 3px 15px 0px; text-align:center; }
.card.featured { border:2px solid #006aff; position:relative; }
.badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:#006aff; color:#fff;
font-size:13px; border-radius:5px; padding:1px 16px; white-space:nowrap; }
.card h3 { font-size:20px; font-weight:500; color:#3d3d3d; margin:6px 0 8px; }
.card p { font-size:13px; color:#666; margin:0 0 14px; }
.ribbon { display:inline-flex; background:#408fff; color:#fff; border-radius:0px 24px; padding:8px 20px 11px;
font-size:14px; font-weight:500; }
</style></head>
<body>
<nav>
<span class="brand">Omnichat</span>
<div class="navlinks"><span>Platform</span><span>Solutions</span><span>Cases</span><span>Pricing</span></div>
<span class="navcta">Talk to an Expert</span>
</nav>
<div class="hero">
<p class="eyebrow">Omni AI by Omnichat</p>
<h1>The AI Omnichannel Customer Experience Platform</h1>
<span class="heroCta">Talk to an Expert</span>
</div>
<div class="band">
<div class="bandtitle">Choose the plan that fits your team</div>
<div class="cards">
<div class="card"><h3>Starter</h3><p>Essential live chat across LINE and WhatsApp.</p><span class="ribbon">Get a Quote</span></div>
<div class="card featured"><span class="badge">Most Popular</span><h3>Growth</h3><p>Omnichannel automation with AI-assisted replies.</p><span class="ribbon">Get a Quote</span></div>
<div class="card"><h3>Enterprise</h3><p>Full Social CDP with dedicated onboarding.</p><span class="ribbon">Contact Sales</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffff0; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffff0; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.25; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #884400; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #16a7bb; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #fffff0; color: #141414;
border: 1px solid #16a7bb; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffea; color: #141414;
border: 1px solid #c4c4b9; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #884400; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ed541d; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fffff0; font-family:'Montserrat', Arial, sans-serif; color:#234600; }
*{box-sizing:border-box;}
.nav{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#fffff0;}
.logo{font-family:'Georgia', serif;font-weight:700;font-size:24px;color:#16a7bb;letter-spacing:-1px;}
.navlinks{display:flex;gap:18px;font-size:13px;font-weight:600;color:#234600;}
.search{width:190px;height:36px;border-radius:9999px;border:1px solid #c4c4c4;background:#ffffea;display:flex;align-items:center;padding:0 16px;font-size:11px;color:#884400;}
.hero{height:224px;display:flex;background:#f8fff0;align-items:center;padding:0 30px;gap:20px;}
.herotext{width:46%;}
.herotext .age{display:inline-block;background:#0072b9;color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-radius:9999px;padding:4px 10px;margin-bottom:10px;}
.herotext h1{font-family:'Georgia', serif;font-size:28px;font-weight:700;color:#141414;margin:0 0 8px;line-height:1.15;}
.herotext p{font-size:13px;color:#234600;margin:0 0 14px;max-width:280px;}
.herocta{display:inline-block;background:#eedd55;color:#141414;font-family:'Georgia',serif;font-size:15px;font-weight:700;border-radius:9999px;padding:12px 28px;}
.heroart{width:54%;height:170px;border-radius:20px;background:radial-gradient(circle at 30% 30%,#bbee77,#16a7bb 70%);position:relative;overflow:hidden;}
.heroart:before{content:'';position:absolute;width:60px;height:60px;background:#eedd55;border-radius:12px;top:26px;left:40px;transform:rotate(12deg);}
.heroart:after{content:'';position:absolute;width:50px;height:50px;background:#ed541d;border-radius:50%;bottom:26px;right:60px;}
.grid{display:flex;gap:14px;padding:18px 30px 0;}
.card{width:150px;background:#ffffea;border-radius:12px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#ed541d;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;border-radius:8px;padding:3px 7px;}
.thumb{height:88px;border-radius:8px;margin-bottom:8px;}
.ptitle{font-size:12px;font-weight:700;color:#141414;line-height:1.3;height:30px;overflow:hidden;}
.agebadge{display:inline-block;background:#0072b9;color:#fff;font-size:9px;font-weight:700;border-radius:9999px;padding:2px 8px;margin:4px 0;}
.pprice{font-size:14px;font-weight:700;color:#16a7bb;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#141414;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.footer span{color:#bbee77;font-size:12px;font-weight:600;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Smartgames</div>
<div class="navlinks"><div>Logic Games</div><div>Puzzles</div><div>Ages 3-8</div><div>Sale</div></div>
<div class="search">Search toys...</div>
</div>
<div class="hero">
<div class="herotext">
<div class="age">Ages 6+</div>
<h1>Brain games that feel like play.</h1>
<p>Screen-free logic puzzles built to make thinking fun again.</p>
<div class="herocta">Shop Now</div>
</div>
<div class="heroart"></div>
</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#16a7bb,#bbee77)"></div><div class="ptitle">IQ Twist Puzzle</div><div class="agebadge">8+</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0072b9,#eedd55)"></div><div class="ptitle">Camelot Jr.</div><div class="agebadge">6+</div><div class="pprice">$19.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ed541d,#bbee77)"></div><div class="ptitle">Chameleon Chess</div><div class="agebadge">7+</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#eedd55,#16a7bb)"></div><div class="ptitle">Ubongo Pocket</div><div class="agebadge">8+</div><div class="pprice">$12.99</div></div>
</div>
<div class="footer"><span>Brain games for curious minds</span><span>Age Guide · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcf9f3; color: #224229;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcf9f3; color: #224229;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #224229; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #018342; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: transparent; color: #224229;
border: 1px solid #224229; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcf9f3; color: #224229;
border: 1px solid #c6cbc0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #f6cfb2; color: #224229;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcf9f3; color:#224229; box-sizing:border-box;
font-family:Circular,-apple-system,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#224229; }
.brand { font-size:16px; font-weight:500; color:#fff; margin:0; font-family:Georgia,serif; }
.navlinks { display:flex; gap:22px; font-size:15px; font-weight:500; color:#fff; }
.navlinks span.on { text-decoration:underline; text-underline-offset:4px; }
.util { font-size:12px; color:#d4ead4; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 64px); }
.stage { padding:24px; border-right:1px solid #ede3d6; display:flex; flex-direction:column; gap:10px; background:#f8f1e3; }
.panel { flex:1; position:relative; overflow:hidden; border-radius:8px; background:#fdfcfa; }
.panel::before { content:''; position:absolute; left:50%; bottom:8%; width:34%; height:18%; transform:translateX(-50%); background:linear-gradient(180deg,#f6cfb2,#f4c4a0); border-radius:0 0 6px 6px; }
.panel::after { content:''; position:absolute; left:50%; bottom:24%; width:46%; height:56%; transform:translateX(-50%); background:radial-gradient(ellipse at 50% 100%,#607765,#224229 70%); border-radius:50% 50% 10% 10% / 60% 60% 10% 10%; }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; background:#fdfcfa; border-radius:8px; }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:13px; font-weight:500; color:#607765; }
h1 { margin:0; font-size:26px; font-weight:500; font-family:Georgia,serif; letter-spacing:-0.3px; }
.badge-row { display:flex; gap:6px; }
.tag { background:#f6cfb2; color:#224229; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:4px 8px; border-radius:4px; }
.price { font-size:16px; font-weight:600; }
.desc { font-size:15px; color:#3d3d3d; line-height:1.6; }
.size-row { display:flex; gap:8px; }
.size-chip { border:1px solid #ede3d6; border-radius:4px; padding:10px 16px; font-size:14px; }
.size-chip.on { background:#224229; color:#fff; }
.care { background:#f2eadc; border-radius:8px; padding:12px 14px; font-size:13px; color:#224229; display:flex; gap:10px; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#018342; color:#fff; border:none; border-radius:4px; font-size:16px; font-weight:500; }
.btn-secondary { width:170px; height:48px; background:transparent; border:2px solid #224229; color:#224229; border-radius:4px; font-size:16px; font-weight:500; }
</style></head>
<body>
<nav>
<p class="brand">Bloomscape</p>
<div class="navlinks"><span class="on">Plants</span><span>Pots & Planters</span><span>Plant Care</span><span>Gifts</span></div>
<div class="util">Search Account Cart (2)</div>
</nav>
<main>
<div class="stage">
<div class="panel"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Easy Care · Pet Friendly</span>
<h1>Monstera Deliciosa</h1>
<div class="badge-row"><span class="tag">Gift Favorite</span><span class="tag">Easy Care</span></div>
<div class="price">$79.00</div>
<p class="desc">Iconic split-leaf foliage arrives rooted and ready in our signature ceramic planter — a low-fuss statement plant for bright, indirect light.</p>
<div class="size-row">
<span class="size-chip">Small — 6" pot</span><span class="size-chip on">Large — 10" pot</span>
</div>
<div class="care">🌿 Bright indirect light 💧 Water weekly</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Care Guide</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2ea3f2;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2ea3f2;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #2ea3f2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #848484; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #c0372f; color: #ffffff;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #003388;
border: 1px solid #c0372f; border-radius: 6px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #cbe8fc; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #848484; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffbb00; color: #222222;
border-radius: 3px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Open Sans',Arial,Helvetica,sans-serif; color:#555555; }
*{box-sizing:border-box;}
.topbar{height:28px;background:#003388;color:#fff;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 34px;font-size:11px;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #d9d9d9;}
.logo{font-family:Poppins,'Open Sans',sans-serif;font-size:19px;font-weight:700;color:#222222;}
.searchbar{width:280px;height:32px;border:2px solid #c0372f;border-radius:6px;display:flex;align-items:center;padding:0 12px;font-size:12px;color:#848484;}
.hero{height:230px;background:#003388;position:relative;display:flex;align-items:center;padding:0 44px;}
.hero:before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:#c0372f;}
.herotext{width:56%;}
.herotext h1{font-family:Poppins,'Open Sans',sans-serif;font-size:34px;font-weight:700;color:#fff;margin:0 0 12px;letter-spacing:-0.4px;}
.herotext p{font-size:14px;color:#eeeeee;margin:0 0 18px;max-width:340px;}
.cta{display:inline-block;background:#c0372f;color:#fff;font-family:Poppins,sans-serif;font-size:14px;font-weight:600;letter-spacing:0.3px;padding:12px 24px;border-radius:6px;}
.trust{height:44px;background:#003388;display:flex;align-items:center;justify-content:center;gap:32px;font-size:12px;color:#fff;}
.trust span{color:#ffbb00;margin-right:4px;}
.section{padding:16px 44px 0;}
.seclabel{font-family:Poppins,'Open Sans',sans-serif;font-size:18px;font-weight:600;color:#222222;margin-bottom:10px;}
.grid{display:flex;gap:14px;}
.card{width:190px;border:1px solid #d9d9d9;border-radius:6px;padding:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#ffbb00;color:#222222;font-size:9px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;padding:2px 7px;border-radius:3px;}
.thumb{height:88px;border-radius:6px;background:#f5f5f5;margin-bottom:8px;}
.ptitle{font-family:Poppins,sans-serif;font-size:14px;font-weight:600;color:#222222;margin-bottom:4px;}
.sku{font-family:'Courier New',monospace;font-size:11px;color:#848484;margin-bottom:4px;}
.pprice{font-family:Poppins,sans-serif;font-size:18px;font-weight:700;color:#c0372f;}
</style>
<div class="topbar">Account Track Order 1-800-555-0134</div>
<div class="nav">
<div class="logo">Salazar Packaging</div>
<div class="searchbar">Search corrugated boxes...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Packaging That Ships On Time.</h1>
<p>Corrugated boxes, mailers, and void fill — bulk pricing for fulfillment teams.</p>
<div class="cta">Get a Custom Quote</div>
</div>
</div>
<div class="trust"><span>●</span>Free Shipping $150+ <span>●</span>Bulk Savings Tiers <span>●</span>Recyclable Materials</div>
<div class="section">
<div class="seclabel">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge">Bulk</span><div class="thumb" style="background:linear-gradient(135deg,#c0372f,#003388)"></div><div class="ptitle">Corrugated Shipping Box, 12x12x12</div><div class="sku">SKU-BX-121212</div><div class="pprice">$0.89/ea</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003388,#c0372f)"></div><div class="ptitle">Poly Mailer, 10x13</div><div class="sku">SKU-PM-1013</div><div class="pprice">$0.12/ea</div></div>
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#eeeeee,#c0372f)"></div><div class="ptitle">Kraft Void Fill, 50lb Case</div><div class="sku">SKU-VF-050</div><div class="pprice">$24.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.0; letter-spacing: 0.5px; background: #313131; color: #FFFFFF;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.0; letter-spacing: 0.5px; background: #FFFFFF; color: #313131;
border: 1px solid #313131; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: 0.2px; background: #F0F0F0; color: #313131;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#4A4A4A; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #E2E2E2;}
.logo{font-size:19px;font-weight:700;color:#313131;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;color:#313131;}
.hero{height:200px;display:flex;align-items:center;padding:0 40px;}
.heroText{width:44%;}
.h1{font-size:28px;font-weight:700;color:#313131;line-height:1.25;margin:0 0 12px;}
.sub{font-size:14px;color:#767676;margin:0 0 16px;max-width:280px;}
.cta{display:inline-block;background:#313131;color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;padding:11px 24px;border-radius:4px;width:fit-content;}
.colorwall{width:56%;height:160px;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,1fr);gap:4px;}
.cw{border-radius:2px;}
.sec{padding:16px 40px 0;}
.secTitle{font-size:16px;font-weight:600;color:#313131;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;}
.thumb{height:100px;border-radius:2px;margin-bottom:8px;}
.swrow{display:flex;gap:6px;margin-bottom:6px;}
.sw{width:14px;height:14px;border-radius:2px;border:1px solid #E2E2E2;}
.ptitle{font-size:13px;font-weight:600;color:#313131;line-height:1.3;height:34px;overflow:hidden;}
.pprice{font-size:14px;font-weight:600;color:#313131;margin-top:4px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Poppin</div>
<div class="navlinks"><span>Desk Accessories</span><span>Seating</span><span>Storage</span><span>Whiteboards</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Office equipment that has an opinion about color.</div>
<div class="sub">The same stapler, in every mood your desk could ask for.</div>
<div class="cta">Shop Desk Accessories</div>
</div>
<div class="colorwall">
<div class="cw" style="background:#e63946;"></div><div class="cw" style="background:#457b9d;"></div><div class="cw" style="background:#f4a261;"></div><div class="cw" style="background:#2a9d8f;"></div><div class="cw" style="background:#e9c46a;"></div><div class="cw" style="background:#313131;"></div>
<div class="cw" style="background:#a8dadc;"></div><div class="cw" style="background:#ffb4a2;"></div><div class="cw" style="background:#6d6875;"></div><div class="cw" style="background:#b5838d;"></div><div class="cw" style="background:#e5989b;"></div><div class="cw" style="background:#264653;"></div>
<div class="cw" style="background:#f28482;"></div><div class="cw" style="background:#84a59d;"></div><div class="cw" style="background:#f6bd60;"></div><div class="cw" style="background:#3d405b;"></div><div class="cw" style="background:#81b29a;"></div><div class="cw" style="background:#e07a5f;"></div>
</div>
</div>
<div class="sec">
<div class="secTitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#e63946;"></div><div class="swrow"><div class="sw" style="background:#e63946;"></div><div class="sw" style="background:#457b9d;"></div><div class="sw" style="background:#2a9d8f;"></div><div class="sw" style="background:#313131;"></div></div><div class="ptitle">Stapler, 8 Colors Available</div><div class="pprice">$18.00</div></div>
<div class="card"><div class="thumb" style="background:#457b9d;"></div><div class="swrow"><div class="sw" style="background:#457b9d;"></div><div class="sw" style="background:#f4a261;"></div><div class="sw" style="background:#313131;"></div></div><div class="ptitle">Monitor Stand, Adjustable</div><div class="pprice">$44.00</div></div>
<div class="card"><div class="thumb" style="background:#e9c46a;"></div><div class="swrow"><div class="sw" style="background:#e9c46a;"></div><div class="sw" style="background:#2a9d8f;"></div></div><div class="ptitle">Pencil Cup, Set of 2</div><div class="pprice">$12.00</div></div>
<div class="card"><div class="thumb" style="background:#2a9d8f;"></div><div class="swrow"><div class="sw" style="background:#2a9d8f;"></div><div class="sw" style="background:#313131;"></div><div class="sw" style="background:#e63946;"></div></div><div class="ptitle">File Organizer, Modular</div><div class="pprice">$36.00</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffaf4; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffaf4; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #939598; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px; background: #ff860d; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px; background: #fffaf4; color: #121212;
border: 1px solid #ff860d; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #fffaf4; color: #121212;
border: 1px solid #c4c0bc; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #939598; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff860d; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#fffaf4; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
color:#36363b;
}
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.logo{color:#ffffff;font-weight:700;font-size:18px;letter-spacing:-0.3px;}
.logo span{color:#ff860d;}
.navlinks{display:flex;gap:24px;}
.navlinks span{color:#ffffff;font-size:12px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.navlinks span.active{color:#ff860d;}
.navicons{display:flex;gap:12px;}
.icircle{width:36px;height:36px;border-radius:9999px;background:#202025;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;}
.hero{background:#121212;color:#fff;padding:26px 24px;display:flex;gap:24px;align-items:center;}
.heroText{flex:1.2;}
.heroText .kick{color:#ff860d;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:6px;}
.heroText h1{font-size:30px;font-weight:700;letter-spacing:-0.5px;margin:0 0 8px;line-height:1.2;}
.heroText p{color:#dedede;font-size:14px;margin:0 0 14px;max-width:420px;}
.heroBtn{display:inline-block;background:#ff860d;color:#fff;font-size:13px;font-weight:600;padding:11px 22px;border-radius:8px;}
.heroStage{flex:1;height:150px;background:radial-gradient(circle at 50% 40%,#3a3a40 0%,#121212 75%);border-radius:12px;position:relative;overflow:hidden;}
.heroStage .fig{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:60px;height:110px;background:linear-gradient(180deg,#ff860d 0%,#f47920 100%);border-radius:30px 30px 8px 8px;}
.heroStage .glow{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(255,134,13,0.35) 0%,rgba(255,134,13,0) 70%);}
.section{padding:16px 24px 0;}
.sectitle{font-size:15px;font-weight:600;color:#121212;margin:0 0 10px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#ffffff;border-radius:12px;overflow:hidden;}
.stage{aspect-ratio:1/1;background:#121212;position:relative;}
.stage .glow2{position:absolute;inset:15%;border-radius:50%;background:radial-gradient(circle at 45% 35%,#444349 0%,#121212 70%);}
.stage .body{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);width:44%;height:60%;background:linear-gradient(180deg,#ff860d,#f47920);border-radius:20px 20px 6px 6px;}
.preorder{position:absolute;top:6px;left:6px;background:#ff860d;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.ctitle{font-size:13px;font-weight:600;color:#121212;padding:8px 10px 0;}
.cprice{font-size:14px;font-weight:700;color:#ff860d;padding:2px 10px 10px;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#121212;color:#939598;font-size:11px;padding:10px 24px;display:flex;justify-content:space-between;}
.footer b{color:#fff;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Good Smile Company<span>.</span></div>
<div class="navlinks">
<span class="active">Figures</span>
<span>Nendoroid</span>
<span>Pre-Order</span>
<span>Scale</span>
</div>
<div class="navicons">
<div class="icircle">⚲</div>
<div class="icircle">👤</div>
</div>
</div>
<div class="hero">
<div class="heroText">
<div class="kick">Pre-Order Now Open</div>
<h1>The stage lights up<br>when the box opens.</h1>
<p>Scale figures, Nendoroids, and Figma models — cast, painted, and photographed on black.</p>
<div class="heroBtn">Browse Pre-Orders</div>
</div>
<div class="heroStage"><div class="glow"></div><div class="fig"></div></div>
</div>
<div class="section">
<div class="sectitle">New This Week</div>
<div class="grid">
<div class="card"><div class="stage"><div class="preorder">Pre-Order</div><div class="glow2"></div><div class="body"></div></div>
<div class="ctitle">Nendoroid — Halcyon</div><div class="cprice">$62.00</div></div>
<div class="card"><div class="stage"><div class="glow2"></div><div class="body"></div></div>
<div class="ctitle">Figma — Vantablade</div><div class="cprice">$78.00</div></div>
<div class="card"><div class="stage"><div class="preorder">Pre-Order</div><div class="glow2"></div><div class="body"></div></div>
<div class="ctitle">Scale 1/7 — Moonlit Ren</div><div class="cprice">$189.00</div></div>
<div class="card"><div class="stage"><div class="glow2"></div><div class="body"></div></div>
<div class="ctitle">Nendoroid — Captain Ohta</div><div class="cprice">$58.00</div></div>
</div>
</div>
<div class="footer">
<span><b>Good Smile Company</b> Global Store</span>
<span>Secure checkout · Worldwide shipping</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7fafd; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7fafd; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.27; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.3px; background: #1a1a1a; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.3px; background: transparent; color: #1a1a1a;
border: 1px solid #1a1a1a; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c0c2c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #d8dbdd; color: #1a1a1a;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Inter','Helvetica Neue',Arial,sans-serif; background:#f7fafd; color:#3d3d3d; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #eeeeee;}
.logo{font-size:19px;font-weight:400;letter-spacing:1px;text-transform:uppercase;color:#1a1a1a;}
.navlinks{display:flex;gap:26px;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#3d3d3d;}
.hero{height:250px;display:flex;padding:0 36px;align-items:center;}
.heroImg{width:38%;height:220px;background:linear-gradient(170deg,#eeeeee,#c8b89a);position:relative;}
.vessel{position:absolute;width:90px;height:130px;border-radius:0 0 40px 40px / 0 0 60px 60px;background:linear-gradient(160deg,#8a9a7b,#1a1a1a);bottom:20px;left:64px;}
.heroText{width:62%;padding-left:44px;}
.h1{font-size:34px;font-weight:300;color:#1a1a1a;line-height:1.2;margin:0 0 12px;}
.sub{font-size:15px;color:#767676;margin:0 0 18px;max-width:340px;}
.cta{display:inline-block;background:#1a1a1a;color:#fff;font-size:13px;font-weight:500;letter-spacing:0.3px;padding:12px 26px;width:fit-content;}
.sec{padding:14px 36px 0;}
.secTitle{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#767676;margin-bottom:12px;}
.grid{display:flex;gap:16px;}
.card{width:150px;}
.thumb{width:150px;height:200px;background:#eeeeee;margin-bottom:8px;}
.swrow{display:flex;gap:6px;margin-bottom:6px;}
.sw{width:14px;height:14px;border-radius:9999px;}
.pname{font-size:13px;font-weight:500;color:#1a1a1a;}
.pprice{font-size:13px;color:#767676;margin-top:2px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Pottery Pots</div>
<div class="navlinks"><span>Planters</span><span>Vessels</span><span>Materials</span><span>Contract</span></div>
</div>
<div class="hero">
<div class="heroImg"><div class="vessel"></div></div>
<div class="heroText">
<div class="h1">One object, considered.</div>
<div class="sub">Architectural planters and vessels for spaces that treat a room like a gallery.</div>
<div class="cta">View the Collection</div>
</div>
</div>
<div class="sec">
<div class="secTitle">Featured Vessels</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#8a9a7b,#1a1a1a);"></div><div class="swrow"><div class="sw" style="background:#1a1a1a;"></div><div class="sw" style="background:#8a9a7b;"></div><div class="sw" style="background:#c8b89a;"></div></div><div class="pname">Cylinder Planter, Large</div><div class="pprice">$680.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#c8b89a,#1a1a1a);"></div><div class="swrow"><div class="sw" style="background:#c8b89a;"></div><div class="sw" style="background:#1a1a1a;"></div></div><div class="pname">Tapered Urn, Weathered Finish</div><div class="pprice">$920.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#eeeeee,#8a9a7b);"></div><div class="swrow"><div class="sw" style="background:#8a9a7b;"></div></div><div class="pname">Low Bowl Planter, Wide</div><div class="pprice">$410.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#1a1a1a,#c8b89a);"></div><div class="swrow"><div class="sw" style="background:#1a1a1a;"></div><div class="sw" style="background:#eeeeee;"></div></div><div class="pname">Square Column Vessel</div><div class="pprice">$540.00</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #100a05;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #100a05;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: 2px; margin: 0; color: #100a05; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.5px; background: #003399; color: #ffffff;
border: none; border-radius: 2px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.5px; background: transparent; color: #003399;
border: 1px solid #003399; border-radius: 2px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #100a05;
border: 1px solid #c3c2c0; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.2px; background: #003399; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#100a05; font-family:Arial,Helvetica,sans-serif; color:#f2f0ec;
}
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #2a2118;}
.logo{font-size:18px;font-weight:700;letter-spacing:1px;color:#f2f0ec;}
.navlinks{display:flex;gap:20px;font-size:11.5px;color:#b9b2a6;text-transform:uppercase;letter-spacing:.5px;}
.navlinks span.active{color:#fff;}
.lang{display:flex;gap:8px;font-size:11px;color:#7a7166;}
.lang span.on{color:#fff;font-weight:700;}
.hero{display:flex;padding:24px 30px;gap:22px;}
.hero-copy{width:360px;}
.hero-eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#8fa8d6;margin-bottom:10px;}
.hero-title{font-size:30px;font-weight:700;line-height:1.15;margin-bottom:12px;letter-spacing:-.5px;}
.hero-sub{font-size:13px;color:#b9b2a6;line-height:1.55;margin-bottom:16px;}
.btn-main{display:inline-block;background:#003399;color:#fff;padding:12px 22px;font-size:12px;font-weight:700;border-radius:2px;}
.hero-visual{flex:1;background:linear-gradient(160deg,#1a1410,#100a05);border-radius:2px;position:relative;border:1px solid #2a2118;}
.lens{position:absolute;width:80px;height:80px;border-radius:50%;border:3px solid #003399;top:50%;left:50%;transform:translate(-50%,-50%);}
.lens:before{content:'';position:absolute;inset:14px;border-radius:50%;background:radial-gradient(circle,#0044c9,#001c56);}
.section{padding:6px 30px 0;}
.section-head{display:flex;justify-content:space-between;margin-bottom:12px;}
.section-title{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#1a1410;border:1px solid #2a2118;border-radius:2px;}
.card-img{height:96px;background:#e6e5e3;position:relative;}
.card-img .machine{position:absolute;width:44px;height:70px;background:linear-gradient(160deg,#003399,#001c56);left:50%;top:12px;transform:translateX(-50%);border-radius:2px;}
.card-body{padding:10px;}
.card-name{font-size:12px;font-weight:700;margin-bottom:4px;}
.card-spec{font-size:10px;color:#7a7166;margin-bottom:6px;}
.card-price{font-size:12.5px;font-weight:700;color:#8fa8d6;}
</style>
<div class="nav">
<div class="logo">Ecm</div>
<div class="navlinks"><span class="active">Machines</span><span>Grinders</span><span>Parts</span><span>Dealer Locator</span></div>
<div class="lang"><span class="on">EN</span><span>DE</span></div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="hero-eyebrow">Precision Since 1979</div>
<div class="hero-title">Espresso engineering, machined to spec.</div>
<div class="hero-sub">Group heads milled from solid brass. Boilers built for continuous service. Every unit tested to a documented tolerance.</div>
<div class="btn-main">Configure A Machine</div>
</div>
<div class="hero-visual"><div class="lens"></div></div>
</div>
<div class="section">
<div class="section-head"><div class="section-title">Commercial Line</div></div>
<div class="grid">
<div class="card"><div class="card-img"><div class="machine"></div></div><div class="card-body"><div class="card-name">Synchronika 2-Group</div><div class="card-spec">220V / 5.5L Boiler</div><div class="card-price">€8,900.00</div></div></div>
<div class="card"><div class="card-img"><div class="machine"></div></div><div class="card-body"><div class="card-name">Mechanika V4</div><div class="card-spec">Lever / Dual Boiler</div><div class="card-price">€7,200.00</div></div></div>
<div class="card"><div class="card-img"><div class="machine"></div></div><div class="card-body"><div class="card-name">Robur E61 Titan</div><div class="card-spec">Single Group</div><div class="card-price">€5,600.00</div></div></div>
<div class="card"><div class="card-img"><div class="machine"></div></div><div class="card-body"><div class="card-name">Compak F10 Grinder</div><div class="card-spec">Flat Burr 65mm</div><div class="card-price">€2,100.00</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 300; line-height: 1.25; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.12em; background: #111111; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.12em; background: transparent; color: #111111;
border: 1px solid #b43f69; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.05em; background: #f5f5f5; color: #444444;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:Helvetica, 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.serif { font-family:'Times New Roman', Georgia, serif; font-weight:300; }
nav { flex:0 0 auto; height:64px; display:flex; align-items:center; justify-content:center; position:relative;
border-bottom:1px solid #dedede; }
nav .brand { font-size:15px; font-weight:400; letter-spacing:0.14em; text-transform:uppercase; margin:0; }
nav .links { position:absolute; left:32px; display:flex; gap:22px; font-size:11px; letter-spacing:0.1em;
text-transform:uppercase; color:#111111; }
nav .cart { position:absolute; right:32px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; }
.hero { flex:0 0 auto; height:230px; background:#121212; color:#ffffff; display:flex; flex-direction:column;
align-items:center; justify-content:center; text-align:center; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0;
background:radial-gradient(ellipse at 30% 30%, rgba(180,63,105,0.30), transparent 55%),
radial-gradient(ellipse at 75% 70%, rgba(255,255,255,0.06), transparent 50%); }
.hero .eyebrow { position:relative; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#dedede; margin-bottom:10px; }
.hero h1 { position:relative; font-size:38px; margin:0 0 12px; letter-spacing:-0.02em; }
.hero button { position:relative; background:transparent; border:1px solid #ffffff; color:#ffffff; padding:11px 28px;
font-size:11px; letter-spacing:0.12em; text-transform:uppercase; }
main { flex:1 1 auto; display:flex; padding:20px 32px; gap:18px; min-height:0; }
.card { flex:1; display:flex; flex-direction:column; gap:8px; position:relative; }
.card .thumb { flex:1; border-radius:0; background:#0f0f0f; position:relative; min-height:0; }
.ring1 { background:radial-gradient(circle at 50% 42%, #b43f69 0 10px, transparent 12px), #0f0f0f; }
.ring2 { background:radial-gradient(circle at 50% 42%, #d9d9d9 0 9px, transparent 11px), #0f0f0f; }
.ring3 { background:radial-gradient(circle at 50% 42%, #ffffff 0 8px, transparent 10px), #0f0f0f; }
.card .wish { position:absolute; top:10px; right:10px; width:18px; height:18px; border-radius:999px;
border:1px solid #dedede; }
.card .name { font-size:14px; font-weight:300; margin:2px 0 0; }
.card .price { font-size:16px; font-weight:300; margin:0; }
.swatches { display:flex; gap:6px; }
.sw { width:12px; height:12px; border-radius:999px; }
.sw.a { background:#c4bdb7; }
.sw.b { background:#8b0000; }
.sw.c { background:#111111; box-shadow:0 0 0 2px #fff, 0 0 0 3px #111; }
footer { flex:0 0 auto; height:52px; background:#121212; color:#888888; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; font-size:11px; letter-spacing:0.05em; }
footer .cols { display:flex; gap:22px; }
</style></head>
<body>
<nav>
<div class="links"><span>Collections</span><span>Fine Jewelry</span></div>
<p class="brand">Anita KO</p>
<div class="cart">Bag (0)</div>
</nav>
<div class="hero">
<span class="eyebrow">Los Angeles — Est. Fine Jewelry</span>
<h1 class="serif">The Voltage of Rose</h1>
<button>Shop the Edit</button>
</div>
<main>
<div class="card">
<div class="thumb ring1"></div>
<div class="wish"></div>
<p class="name serif">Diamond Baguette Huggie</p>
<p class="price serif">$2,450</p>
<div class="swatches"><span class="sw a"></span><span class="sw b"></span><span class="sw c"></span></div>
</div>
<div class="card">
<div class="thumb ring2"></div>
<div class="wish"></div>
<p class="name serif">Pavé Eternity Band</p>
<p class="price serif">$3,150</p>
<div class="swatches"><span class="sw c"></span><span class="sw a"></span></div>
</div>
<div class="card">
<div class="thumb ring3"></div>
<div class="wish"></div>
<p class="name serif">Emerald Cut Solitaire</p>
<p class="price serif">$5,900</p>
<div class="swatches"><span class="sw a"></span><span class="sw b"></span><span class="sw c"></span></div>
</div>
</main>
<footer>
<span>© Anita KO</span>
<div class="cols"><span>Care Guide</span><span>Shipping</span><span>Contact</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #03253d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #03253d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -0.3px; margin: 0; color: #03253d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #003399; color: #ffffff;
border: none; border-radius: 6px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #003399;
border: 1px solid #003399; border-radius: 6px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #03253d;
border: 1px solid #c0c8ce; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #003399; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Proxima Nova',ProximaNova,sans-serif; color:#03253d; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e7e6e7;}
.logo{color:#003399;font-weight:800;font-size:20px;}
.navlinks{display:flex;gap:22px;font-weight:700;font-size:15px;}
.cta{background:#003399;color:#fff;font-weight:700;font-size:14px;padding:10px 20px;border-radius:6px;}
.hero{height:230px;background:#03253d;display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;}
.hero h1{color:#fff;font-weight:800;font-size:38px;line-height:1.1;max-width:400px;letter-spacing:-.5px;}
.hero p{color:#c3d7e0;font-size:15px;margin-top:10px;max-width:380px;}
.herobtns{display:flex;gap:12px;margin-top:16px;}
.btn1{background:#003399;color:#fff;font-weight:700;font-size:14px;padding:12px 24px;border-radius:6px;}
.btn2{background:transparent;color:#fff;font-weight:700;font-size:14px;padding:10px 22px;border-radius:6px;border:2px solid #fff;}
.mockup{position:absolute;right:60px;top:50px;width:180px;height:150px;background:#f4e3d9;border-radius:16px;}
.chips{display:flex;gap:8px;padding:16px 40px 0;}
.chip{background:#c3d7e0;color:#03253d;font-size:13px;font-weight:700;padding:6px 14px;border-radius:9999px;}
.chip.active{background:#003399;color:#fff;}
.grid{display:flex;gap:16px;padding:16px 40px 0;}
.card{width:210px;border:1px solid #e7e6e7;border-radius:12px;padding:14px;}
.thumb{height:100px;background:#f4e3d9;border-radius:8px;margin-bottom:10px;}
.pname{font-weight:600;font-size:15px;}
.pprice{font-weight:800;font-size:20px;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#03253d;color:#fff;display:flex;align-items:center;justify-content:center;gap:26px;font-size:13px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Printful</div>
<div class="navlinks"><span>Products</span><span>Integrations</span><span>Pricing</span></div>
<div class="cta">Get started</div>
</div>
<div class="hero">
<div><h1>Print on demand, done right.</h1><p>Design, sell, and ship custom products without holding inventory.</p><div class="herobtns"><div class="btn1">Start for free</div><div class="btn2">See all products</div></div></div>
<div class="mockup"></div>
</div>
<div class="chips"><div class="chip active">Apparel</div><div class="chip">Mugs</div><div class="chip">Posters</div><div class="chip">Accessories</div></div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="pname">Unisex T-Shirt</div><div class="pprice">$12.95</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Ceramic Mug 11oz</div><div class="pprice">$8.50</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Matte Poster</div><div class="pprice">$14.00</div></div>
</div>
<div class="footer"><span>Products</span><span>Integrations</span><span>Help Center</span><span>Blog</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0f0f0; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0f0f0; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.18; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.33; letter-spacing: 0.25px; background: #1863dc; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.33; letter-spacing: 0.25px; background: #f0f0f0; color: #1e1e1e;
border: 1px solid #1863dc; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f0f0f0; color: #2a2a2a;
border: 1px solid #bcbcbc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #178087; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f0f0f0; color:#1e1e1e; box-sizing:border-box;
font-family:'Lato','Open Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#f0f0f0; border-bottom:1px solid #d0d0d0; }
.brand { font-size:15px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:#555555; }
.navlinks span:first-child { color:#1863dc; }
.cart { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#1e1e1e; }
.cart .dot { width:18px; height:18px; border-radius:4px; background:#1863dc; color:#fff; font-size:10px; display:flex; align-items:center; justify-content:center; }
.hero { background:#1e1e1e; color:#fff; padding:26px 32px; display:flex; justify-content:space-between; align-items:center; }
.hero h1 { font-size:26px; font-weight:700; letter-spacing:-.5px; margin:0 0 6px; line-height:1.15; }
.hero p { font-size:13px; color:#949494; margin:0; max-width:360px; line-height:1.4; }
.hero .specbox { display:flex; gap:18px; }
.spec { text-align:center; }
.spec .v { font-size:20px; font-weight:700; color:#178087; }
.spec .l { font-size:9px; text-transform:uppercase; letter-spacing:.5px; color:#949494; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#eeeeee; padding:1px; margin:0 32px; }
.card { background:#ffffff; padding:16px; display:flex; flex-direction:column; gap:6px; }
.imgbox { height:110px; background:linear-gradient(135deg,#2a2a2a,#444444); border-radius:0; position:relative; overflow:hidden; }
.imgbox::before { content:''; position:absolute; left:50%; top:50%; width:44px; height:44px; border-radius:50%;
border:3px solid #d0d0d0; transform:translate(-50%,-50%); }
.imgbox::after { content:''; position:absolute; left:50%; top:50%; width:16px; height:16px; border-radius:50%;
background:#178087; transform:translate(-50%,-50%); }
.tag { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#178087; }
.card h3 { font-size:15px; font-weight:700; margin:2px 0 0; }
.price-row { display:flex; justify-content:space-between; align-items:center; margin-top:2px; }
.price { font-size:16px; font-weight:700; }
.badge { background:#00d084; color:#fff; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
padding:2px 7px; border-radius:4px; }
.btnrow { display:flex; gap:8px; margin-top:4px; }
.btn { flex:1; text-align:center; padding:8px; border-radius:4px; font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; }
.btn-primary { background:#1863dc; color:#fff; }
.btn-outline { background:#f0f0f0; color:#1e1e1e; border:2px solid #1e1e1e; }
.spectable { margin:14px 32px 0; border:1px solid #eeeeee; display:grid; grid-template-columns:repeat(4,1fr); }
.stcell { padding:9px 12px; border-right:1px solid #eeeeee; }
.stcell:last-child { border-right:none; }
.stcell .l { font-size:9px; text-transform:uppercase; letter-spacing:.5px; color:#555555; font-weight:700; }
.stcell .v { font-size:15px; font-weight:700; margin-top:2px; }
footer { position:absolute; bottom:0; left:0; right:0; height:38px; background:#1e1e1e; color:#949494;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Barefoot Sound</p>
<div class="navlinks"><span>Monitors</span><span>Amplifiers</span><span>Accessories</span><span>Support</span></div>
<div class="cart">Cart <span class="dot">2</span></div>
</nav>
<section class="hero">
<div>
<h1>Reference Monitors.<br>Engineered for Truth.</h1>
<p>Anodized aluminum enclosures, precision waveguides, zero coloration. Built for the room that demands accuracy.</p>
</div>
<div class="specbox">
<div class="spec"><div class="v">38Hz</div><div class="l">Low End</div></div>
<div class="spec"><div class="v">±1.5dB</div><div class="l">Flatness</div></div>
<div class="spec"><div class="v">150W</div><div class="l">Bi-Amp</div></div>
</div>
</section>
<div class="grid">
<div class="card">
<div class="imgbox"></div>
<span class="tag">Studio Monitor</span>
<h3>MicroMain 27 Gen3</h3>
<div class="price-row"><span class="price">$1,249</span><span class="badge">New</span></div>
<div class="btnrow"><div class="btn btn-primary">Add to Cart</div><div class="btn btn-outline">Specs</div></div>
</div>
<div class="card">
<div class="imgbox"></div>
<span class="tag">Studio Monitor</span>
<h3>Footprint 06 Coaxial</h3>
<div class="price-row"><span class="price">$899</span></div>
<div class="btnrow"><div class="btn btn-primary">Add to Cart</div><div class="btn btn-outline">Specs</div></div>
</div>
<div class="card">
<div class="imgbox"></div>
<span class="tag">Subwoofer</span>
<h3>Depth 12 Sealed Sub</h3>
<div class="price-row"><span class="price">$1,599</span></div>
<div class="btnrow"><div class="btn btn-primary">Add to Cart</div><div class="btn btn-outline">Specs</div></div>
</div>
</div>
<div class="spectable">
<div class="stcell"><div class="l">Driver</div><div class="v">6.5" LF</div></div>
<div class="stcell"><div class="l">Tweeter</div><div class="v">1" Silk</div></div>
<div class="stcell"><div class="l">Freq. Resp.</div><div class="v">38Hz–22kHz</div></div>
<div class="stcell"><div class="l">Finish</div><div class="v">Matte Black</div></div>
</div>
<footer>
<span>© Barefoot Sound</span>
<span>Barefoot Sound · Warranty · Dealer Locator · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0909; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0909; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 22px; font-weight: 700; line-height: 1.36; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #677279; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.25px; background: #f70f0f; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.25px; background: #f3f5f6; color: #0a0909;
border: 1px solid #f70f0f; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.5; background: #121212; color: #f3f5f6;
border: 1px solid #0a0909; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #677279; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #2b0a0a; color: #f70f0f;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:flex; flex-direction:column; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0a0909; color:#f3f5f6; box-sizing:border-box;
font-family:'DM Sans',sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
border-bottom:1px solid #212121; }
.brand { font-size:20px; font-weight:700; color:#f70f0f; letter-spacing:0.3px; }
.search { width:220px; height:28px; border-radius:999px; background:#121212; display:flex; align-items:center;
padding:0 14px; font-size:11px; color:#677279; gap:6px; }
.search::before { content:'⌕'; color:#f70f0f; font-weight:700; }
.cart { width:26px; height:26px; border-radius:999px; background:#f70f0f; display:flex; align-items:center;
justify-content:center; font-size:11px; font-weight:700; }
.pillrow { display:flex; gap:10px; padding:16px 34px 4px; }
.pill { border-radius:999px; padding:6px 16px; font-size:12px; font-weight:700; color:#fff; }
.p-horror { background:#ff0000; }
.p-cult { background:#1e2d7d; }
.p-expl { background:#008a00; }
.p-anime { background:#00badb; }
.p-comedy { background:#a5860a; }
.hero { padding:18px 34px 20px; display:flex; gap:32px; align-items:center; }
.htext { max-width:400px; }
.htext h1 { font-size:26px; font-weight:700; line-height:1.25; margin:0 0 10px; }
.htext p { font-size:14px; color:#8a9297; line-height:1.5; margin:0 0 14px; }
.btn { display:inline-block; background:#f70f0f; color:#fff; font-size:14px; font-weight:700; padding:10px 22px;
border-radius:999px; }
.marquee { width:220px; height:130px; border-radius:6px; flex-shrink:0; position:relative;
background:linear-gradient(140deg,#1e2d7d,#0a0909 65%); border:1px solid #f70f0f; }
.marquee::after { content:'NOW SHOWING'; position:absolute; top:10px; left:10px; font-size:11px; font-weight:700;
color:#f70f0f; letter-spacing:1px; }
.section { padding:0 34px; }
.section h2 { font-size:18px; font-weight:700; margin:0 0 12px; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.card { background:#f3f5f6; border-radius:6px; padding:10px; color:#0a0909; }
.cover { height:76px; border-radius:4px; margin-bottom:8px; }
.v1 .cover { background:linear-gradient(150deg,#ff0000,#4a0000); }
.v2 .cover { background:linear-gradient(150deg,#1e2d7d,#0a0909); }
.v3 .cover { background:linear-gradient(150deg,#008a00,#062906); }
.v4 .cover { background:linear-gradient(150deg,#00badb,#03303a); }
.v5 .cover { background:linear-gradient(150deg,#ffbd00,#4a3400); }
.card .t { font-size:11px; font-weight:700; margin:0 0 4px; line-height:1.3; }
.card .p { font-size:11px; font-weight:700; color:#f70f0f; }
.trust { display:flex; gap:26px; padding:16px 34px 0; }
.trust span { font-size:11px; color:#8a9297; display:flex; align-items:center; gap:6px; }
.trust b { color:#f70f0f; }
footer { margin-top:auto; height:40px; display:flex; align-items:center;
justify-content:space-between; padding:0 34px; border-top:1px solid #212121; flex-shrink:0; }
footer .f1 { font-size:10px; color:#677279; }
footer .dots { display:flex; gap:8px; }
footer .dot { width:8px; height:8px; border-radius:50%; }
.d1 { background:#3b5998; } .d2 { background:#1da1f2; } .d3 { background:#bd081c; } .d4 { background:#d83776; }
</style></head>
<body>
<nav>
<div class="brand">Grindhouse Video</div>
<div class="search">Search horror, cult, anime…</div>
<div class="cart">4</div>
</nav>
<div class="pillrow">
<div class="pill p-horror">Horror</div>
<div class="pill p-cult">Cult</div>
<div class="pill p-expl">Exploitation</div>
<div class="pill p-anime">Anime</div>
<div class="pill p-comedy">Comedy</div>
</div>
<div class="hero">
<div class="htext">
<h1>Genre-specific. Unapologetic. Open late.</h1>
<p>Thousands of horror, cult and exploitation titles on physical media — the neon-lit lobby your streaming queue is missing.</p>
<span class="btn">Browse New Arrivals</span>
</div>
<div class="marquee"></div>
</div>
<div class="section">
<h2>Fresh on the Shelf</h2>
<div class="grid">
<div class="card v1"><div class="cover"></div><div class="t">Red Room Redux</div><div class="p">$16.99</div></div>
<div class="card v2"><div class="cover"></div><div class="t">Cult of the Reel</div><div class="p">$19.99</div></div>
<div class="card v3"><div class="cover"></div><div class="t">Jungle Massacre</div><div class="p">$14.99</div></div>
<div class="card v4"><div class="cover"></div><div class="t">Neon Samurai</div><div class="p">$22.99</div></div>
<div class="card v5"><div class="cover"></div><div class="t">Laugh Track Terror</div><div class="p">$12.99</div></div>
</div>
</div>
<div class="trust"><span><b>★</b> Rentals & Sales</span><span><b>★</b> Physical Media Only</span><span><b>★</b> Open Late</span><span><b>★</b> Since 1985</span></div>
<footer>
<div class="f1">© Grindhouse Video · rentals & sales since 1985</div>
<div class="dots"><div class="dot d1"></div><div class="dot d2"></div><div class="dot d3"></div><div class="dot d4"></div></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f2efe4; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f2efe4; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #767570; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #38b569; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2efe4; color: #000000;
border: 1px solid #38b569; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f2efe4; color: #111111;
border: 1px solid #cecbc2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767570; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d4e6d0; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1A1A1A; color:#F2EFE4; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.room { width:960px; height:640px; display:flex; flex-direction:column; }
.topbar { height:52px; flex:0 0 52px; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; }
.chev { color:#B8B2A0; font-size:16px; }
.icons { display:flex; gap:18px; color:#B8B2A0; font-size:16px; }
.clubline { padding:0 26px; display:flex; align-items:center; gap:6px; font-size:12px; color:#B8B2A0; }
.dot { width:6px; height:6px; border-radius:50%; background:#38B569; }
.roomtitle { font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:27px;
padding:6px 26px 18px; letter-spacing:-0.2pt; }
.stage { flex:1; padding:0 26px; overflow:hidden; }
.overline { font-size:10.5px; font-weight:700; letter-spacing:1pt; text-transform:uppercase;
color:#837D6D; margin:8px 0 12px; }
.grid { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:8px; }
.speaker { width:74px; text-align:center; }
.circle { width:58px; height:58px; border-radius:50%; margin:0 auto 6px; position:relative;
display:flex; align-items:center; justify-content:center; color:#2A2620; font-size:18px; font-weight:700; }
.peach { background:linear-gradient(135deg,#F4C77B,#E0A24B); }
.sage { background:linear-gradient(135deg,#9FD8B4,#5FB484); }
.lavender { background:linear-gradient(135deg,#C9B6E8,#9C7FD0); }
.coral { background:linear-gradient(135deg,#F2A9A0,#D9776B); }
.sky { background:linear-gradient(135deg,#A9C7E8,#6E9CD0); }
.speaking { box-shadow:0 0 0 3px #38B569, 0 0 0 9px rgba(56,181,105,0.18); }
.hostpin { position:absolute; top:-4px; right:-4px; width:18px; height:18px; border-radius:50%;
background:#242220; font-size:9px; display:flex; align-items:center; justify-content:center; }
.muted { opacity:0.55; }
.sname { font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.srole { font-size:10px; color:#837D6D; margin-top:1px; }
.srole.gold { color:#E9C46A; }
.footer { flex:0 0 72px; border-top:0.5px solid #3A372F; display:flex; align-items:center;
justify-content:space-between; padding:0 24px; }
.handpill { display:inline-flex; align-items:center; gap:8px; background:#2E2B27; border-radius:999px;
padding:12px 20px; font-size:15px; font-weight:700; }
.rightctrl { display:flex; align-items:center; gap:14px; }
.pulse { width:9px; height:9px; border-radius:50%; background:#38B569; box-shadow:0 0 0 5px rgba(56,181,105,0.18); }
.mic { font-size:19px; color:#F2EFE4; }
</style></head>
<body>
<div class="room">
<div class="topbar"><span class="chev">︿</span><span class="icons"><span>👤+</span><span>⋯</span></span></div>
<div class="clubline"><span class="dot"></span> Clubhouse (iOS) Design Mornings · Open</div>
<div class="roomtitle">What we got wrong shipping our first serif ☕️</div>
<div class="stage">
<div class="overline">Speakers</div>
<div class="grid">
<div class="speaker"><div class="circle sage speaking">JC<div class="hostpin">🎙️</div></div>
<div class="sname">Jia Chen</div><div class="srole">Host</div></div>
<div class="speaker"><div class="circle coral">MP</div>
<div class="sname">Marco P.</div><div class="srole gold">Moderator</div></div>
<div class="speaker"><div class="circle lavender muted">RT</div>
<div class="sname">Rina T.</div><div class="srole">Speaker</div></div>
</div>
<div class="overline">Followed by the speakers</div>
<div class="grid">
<div class="speaker"><div class="circle peach">EW</div><div class="sname">Ela W.</div></div>
<div class="speaker"><div class="circle sky">DK</div><div class="sname">Devon K.</div></div>
<div class="speaker"><div class="circle sage">NB</div><div class="sname">Noor B.</div></div>
<div class="speaker"><div class="circle coral">TL</div><div class="sname">Tomas L.</div></div>
</div>
<div class="overline">Others in the room · 218</div>
<div class="grid">
<div class="speaker"><div class="circle lavender">+</div><div class="sname">and 218 others</div></div>
</div>
</div>
<div class="footer">
<div class="handpill">✋ Raise hand</div>
<div class="rightctrl"><div class="pulse"></div><span class="mic">🎙️</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0f4ff; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0f4ff; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #90a4ae; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #000d8c; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #f0f4ff; color: #000d8c;
border: 1px solid #000d8c; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #141414;
border: 1px solid #b9bcc4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #90a4ae; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #f4bc51; color: #141414;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Dropps Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:'Inter','Helvetica Neue',Arial,sans-serif;
background:#f0f4ff; color:#141414;
}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #f6f6f6;background:#f0f4ff;}
.logo{font-size:19px;font-weight:700;color:#000d8c;}
.icons{display:flex;gap:14px;align-items:center;}
.hamburger{width:22px;height:14px;position:relative;}
.hamburger span{display:block;height:2px;background:#141414;margin-bottom:4px;}
.carticon{font-size:18px;}
.hero{display:flex;align-items:center;justify-content:space-between;padding:36px;}
.hero-copy h1{font-size:36px;font-weight:700;letter-spacing:-0.5px;margin:0 0 12px;max-width:420px;line-height:1.15;}
.hero-copy p{color:#545454;font-size:15px;max-width:380px;margin:0 0 18px;}
.herobtn{background:#f4bc51;color:#141414;font-size:15px;font-weight:600;letter-spacing:0.2px;padding:12px 24px;border-radius:8px;display:inline-block;}
.hero-visual{width:230px;height:170px;border-radius:20px;background:linear-gradient(160deg,#000d8c,#3b5bdb);position:relative;}
.hero-visual::after{content:"Save up to 30%";position:absolute;bottom:14px;left:14px;background:#f4bc51;color:#141414;font-size:11px;font-weight:700;text-transform:uppercase;padding:4px 10px;border-radius:4px;}
.subrow{display:flex;gap:14px;padding:0 36px 20px;}
.subtoggle{flex:1;border-radius:8px;padding:12px 16px;background:#f5f7fa;font-size:13px;color:#545454;}
.subtoggle.active{background:#dcfffb;border:2px solid #00847b;color:#00847b;font-weight:600;}
.grid{display:flex;gap:16px;padding:0 36px;}
.card{flex:1;background:#fff;border-radius:20px;overflow:hidden;}
.card-img{height:130px;position:relative;}
.card-img.c1{background:linear-gradient(150deg,#f4bc51,#000d8c);}
.card-img.c2{background:linear-gradient(150deg,#00847b,#dcfffb);}
.card-img.c3{background:linear-gradient(150deg,#000d8c,#bacdff);}
.card-img.c4{background:linear-gradient(150deg,#e0a83a,#000d8c);}
.badge{position:absolute;top:8px;left:8px;background:#f4bc51;color:#141414;font-size:10px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:2px 8px;border-radius:8px;}
.card-title{font-size:16px;font-weight:600;padding:12px 12px 0;}
.card-price{font-size:18px;font-weight:700;padding:4px 12px 12px;}
</style>
<nav class="nav">
<div class="logo">Dropps</div>
<div class="icons">
<div class="hamburger"><span></span><span></span><span></span></div>
<div class="carticon">🛒</div>
</div>
</nav>
<div class="hero">
<div class="hero-copy">
<h1>Laundry & dish pods,<br>ingredient-first.</h1>
<p>Plastic-free, carbon-neutral, delivered on your schedule.</p>
<div class="herobtn">Add to Cart</div>
</div>
<div class="hero-visual"></div>
</div>
<div class="subrow">
<div class="subtoggle">One-Time Purchase</div>
<div class="subtoggle active">Subscribe & Save</div>
</div>
<div class="grid">
<div class="card"><div class="card-img c1"><span class="badge">Subscribe</span></div><div class="card-title">Laundry Pods 32ct</div><div class="card-price">$18.99</div></div>
<div class="card"><div class="card-img c2"></div><div class="card-title">Dish Pods 20ct</div><div class="card-price">$12.99</div></div>
<div class="card"><div class="card-img c3"></div><div class="card-title">Free & Clear Bundle</div><div class="card-price">$29.99</div></div>
<div class="card"><div class="card-img c4"><span class="badge">Subscribe</span></div><div class="card-title">Fresh Scent Duo</div><div class="card-price">$27.99</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2d91ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2d91ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0257d7; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2d91ff; color: #000000;
border: 1px solid #0257d7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2d91ff; color: #f5f5f5;
border: 1px solid #4da1fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2688f9; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1e2137; box-sizing:border-box;
font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic",Arial,sans-serif; }
* { box-sizing:border-box; }
.app { width:960px; height:640px; display:flex; flex-direction:column; overflow:hidden; }
.nav { flex:0 0 66px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #eeeeee; }
.nav .brand { font-size:18px; font-weight:700; color:#1e2137; }
.nav .links { display:flex; gap:22px; }
.nav .links a { font-size:18px; font-weight:700; color:#1e2137; text-decoration:none; }
.nav .links a.act { color:#2d91ff; }
.nav .ghost { height:44px; padding:0 22px; border:1px solid #1e2137; border-radius:6px; font-size:15px;
font-weight:700; display:flex; align-items:center; color:#1e2137; }
.headline { flex:0 0 108px; display:flex; align-items:center; gap:16px; padding:22px 32px 0; }
.headline h1 { font-size:40px; font-weight:700; color:#192d82; margin:0; line-height:1.2; }
.chip { background:#e2f3ff; color:#192d82; border-radius:20px; padding:6px 14px; font-size:14px; font-weight:600; }
.bignum { flex:0 0 74px; padding:0 32px; font-size:34px; font-weight:700; color:#0c1120; }
.cards { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:14px 32px 0; overflow:hidden; }
.card { background:#f9fbfc; border:1px solid #f9fbfc; border-radius:20px; padding:18px 20px; display:flex;
flex-direction:column; gap:10px; }
.card .t { font-size:15px; font-weight:600; color:#44546f; }
.card .v { font-size:22px; font-weight:700; color:#192d82; }
.bars { display:flex; align-items:flex-end; gap:5px; height:56px; }
.bars i { flex:1; background:#2d91ff; border-radius:3px 3px 0 0; display:block; }
.bars i.track { background:#e2f3ff; }
.bottomrow { flex:0 0 88px; display:flex; align-items:center; gap:16px; padding:16px 32px 24px; }
.softbtn { height:48px; padding:0 16px; background:#f4f7f9; color:#2d91ff; border-radius:16px; font-size:19px;
font-weight:700; border:none; display:flex; align-items:center; }
.tintcard { flex:1; height:56px; background:#e2f3ff; color:#192d82; border-radius:20px; display:flex;
align-items:center; padding:0 20px; font-size:16px; font-weight:600; justify-content:space-between; }
</style></head>
<body>
<div class="app">
<div class="nav">
<div class="brand">Korea Credit Data</div>
<div class="links">
<a class="act">Dashboard</a>
<a>Payments</a>
<a>Supplies</a>
<a>Consulting</a>
</div>
<div class="ghost">View report</div>
</div>
<div class="headline">
<h1>Today's sales</h1>
<div class="chip">As of May 2026</div>
</div>
<div class="bignum">₩ 4,820,000</div>
<div class="cards">
<div class="card">
<div class="t">Card sales</div>
<div class="v">₩ 3,110,000</div>
<div class="bars">
<i class="track" style="height:30%"></i><i style="height:55%"></i><i style="height:40%"></i>
<i style="height:70%"></i><i class="track" style="height:35%"></i><i style="height:60%"></i>
</div>
</div>
<div class="card">
<div class="t">Cash sales</div>
<div class="v">₩ 980,000</div>
<div class="bars">
<i style="height:20%"></i><i class="track" style="height:25%"></i><i style="height:45%"></i>
<i style="height:30%"></i><i style="height:50%"></i><i class="track" style="height:22%"></i>
</div>
</div>
<div class="card">
<div class="t">Settlements</div>
<div class="v">₩ 730,000</div>
<div class="bars">
<i class="track" style="height:40%"></i><i style="height:65%"></i><i style="height:50%"></i>
<i class="track" style="height:38%"></i><i style="height:58%"></i><i style="height:44%"></i>
</div>
</div>
</div>
<div class="bottomrow">
<button class="softbtn">Open Korea Credit Data</button>
<div class="tintcard"><span>Connected accounts</span><span>3 stores</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #545454; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #a9cdd3; color: #141414;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #141414;
border: 1px solid #a9cdd3; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #141414;
border: 1px solid #c4c4c4; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #545454; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.33; background: #fad588; color: #141414;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Inter', 'Helvetica Neue', sans-serif; color:#141414; }
*{box-sizing:border-box;}
.nav{height:68px;background:#ffffff;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:'Alana','Inter',sans-serif;font-size:24px;font-weight:600;color:#141414;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;color:#141414;}
.searchpill{width:170px;height:34px;border-radius:9999px;background:#f6f6f6;display:flex;align-items:center;padding:0 16px;font-size:11px;color:#8a8a8a;}
.hero{height:238px;display:flex;align-items:center;padding:0 40px;background:#cce8f2;}
.heroText{width:430px;}
.headline{font-family:'Alana','Inter',sans-serif;font-size:30px;font-weight:600;line-height:1.25;color:#141414;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.55;color:#3a3a3a;margin:0 0 20px;max-width:360px;}
.btn{display:inline-block;background:#a9cdd3;color:#141414;font-size:14px;font-weight:600;padding:13px 28px;border-radius:9999px;}
.cloud{position:absolute;right:100px;top:70px;width:160px;height:90px;background:#ffffff;border-radius:9999px;opacity:.85;}
.cloud2{position:absolute;right:150px;top:110px;width:120px;height:70px;background:#ffffff;border-radius:9999px;opacity:.7;}
.moon{position:absolute;right:120px;top:60px;width:60px;height:60px;background:#fad588;border-radius:50%;}
.sec{position:relative;height:334px;padding:26px 40px;}
.secTitle{font-family:'Alana','Inter',sans-serif;font-size:18px;font-weight:600;color:#141414;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:216px;background:#fff;border:1px solid #f0f0f0;border-radius:20px;padding:12px;position:relative;}
.thumb{height:100px;border-radius:16px;margin-bottom:10px;}
.badge{position:absolute;top:8px;left:8px;background:#fad588;color:#141414;font-size:10px;font-weight:700;padding:3px 10px;border-radius:9999px;}
.badgeSale{background:#d95c5c;color:#fff;}
.stars{color:#fad588;font-size:12px;margin-bottom:4px;}
.cardTitle{font-size:14px;font-weight:600;color:#141414;margin-bottom:4px;}
.cardPrice{font-size:13px;font-weight:700;color:#141414;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#f6f6f6;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#6a6a6a;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Little Sleepies</div>
<div class="navlinks"><span>Pajamas</span><span>Bamboo Basics</span><span>Matching Family</span></div>
<div class="searchpill">Search sizes...</div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">Soft as a<br>bedtime story.</div>
<div class="sub">Bamboo-soft pajamas in a color story built for quiet, calm evenings.</div>
<div class="btn">Shop Pajamas</div>
</div>
<div class="cloud2"></div><div class="cloud"></div><div class="moon"></div>
</div>
<div class="sec">
<div class="secTitle">New This Week</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#a9cdd3,#cce8f2)"></div><div class="stars">★★★★★</div><div class="cardTitle">Two-Piece Bamboo Set</div><div class="cardPrice">$38.00</div></div>
<div class="card"><div class="badgeSale">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#fad588,#cce8f2)"></div><div class="stars">★★★★★</div><div class="cardTitle">Footie Sleeper</div><div class="cardPrice">$34.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#cce8f2,#a9cdd3)"></div><div class="stars">★★★★☆</div><div class="cardTitle">Ruffle Gown</div><div class="cardPrice">$36.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a9cdd3,#fad588)"></div><div class="stars">★★★★★</div><div class="cardTitle">Family Matching Set</div><div class="cardPrice">$42.00</div></div>
</div>
</div>
<div class="footer"><span>© A Digital Nursery, Soft and Calm</span><span>Size Guide</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfbfb; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfbfb; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6d6e71; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #a32035; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fbfbfb; color: #a32035;
border: 1px solid #a32035; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #231f20;
border: 1px solid #e0e0e0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d6e71; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #a32035; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbfbfb; color:#231f20; box-sizing:border-box;
font-family:'Lato', Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
.poppins { font-family:'Poppins', Arial, Helvetica, sans-serif; }
.util { flex:0 0 auto; height:28px; background:#a32035; color:#fff; font-size:11px; display:flex; align-items:center;
justify-content:center; letter-spacing:0.3px; }
nav { flex:0 0 auto; height:58px; background:#231f20; color:#fff; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; }
.brand { font-size:16px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; }
main { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.hero { flex:1 1 auto; background:#231f20; color:#fff; display:flex; align-items:center; padding:0 30px;
min-height:0; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:rgba(10,0,0,0.45); }
.hero::after { content:''; position:absolute; inset:0;
background:radial-gradient(circle at 75% 60%, rgba(163,32,53,0.35), transparent 55%),
linear-gradient(160deg,#3a3a3a,#111 70%); }
.hero-copy { position:relative; z-index:1; max-width:420px; }
.overline { color:#e0455c; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; margin:0 0 8px; }
.hero-copy h1 { font-size:34px; margin:0 0 8px; font-weight:700; line-height:1.15; }
.hero-copy p { font-size:14px; color:#dcdcdc; margin:0 0 14px; }
.btnrow { display:flex; gap:10px; }
.btn-primary { background:#a32035; color:#fff; border:none; border-radius:8px; padding:14px 28px; font-weight:600; font-size:15px; }
.btn-ghost { background:transparent; color:#fff; border:1px solid #fff; border-radius:8px; padding:13px 27px; font-weight:600; font-size:15px; }
.features { flex:0 0 auto; display:flex; gap:12px; padding:16px 30px 18px; }
.feat { flex:1; background:#f5f5f5; border-radius:12px; padding:12px 14px; }
.feat .ic { width:28px; height:28px; border-radius:6px; background:#a32035; margin-bottom:8px; }
.feat h3 { font-size:13px; margin:0 0 4px; }
.feat p { font-size:11px; color:#515151; margin:0; }
footer { flex:0 0 auto; height:52px; background:#231f20; color:#eeeeee; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; }
</style></head>
<body>
<div class="util">Find a Dealer Near You · 1-800-555-0134</div>
<nav>
<p class="brand poppins">Arctic Spas</p>
<div class="navlinks poppins"><span>Hot Tubs</span><span>Swim Spas</span><span>Accessories</span><span>Compare</span></div>
</nav>
<main>
<div class="hero">
<div class="hero-copy">
<p class="overline">Frontier Series</p>
<h1 class="poppins">Built for every weather.</h1>
<p>All-weather insulation, full-foam construction, and jet configurations engineered for cold climates.</p>
<div class="btnrow">
<button class="btn-primary poppins">Configure Yours</button>
<button class="btn-ghost poppins">Find a Dealer</button>
</div>
</div>
</div>
<div class="features">
<div class="feat"><div class="ic"></div><h3 class="poppins">All-Weather Insulation</h3><p>Holds temperature in sub-zero climates.</p></div>
<div class="feat"><div class="ic"></div><h3 class="poppins">Onzen Filtration</h3><p>Continuous water purification system.</p></div>
<div class="feat"><div class="ic"></div><h3 class="poppins">54 Jet Configuration</h3><p>Fully customizable hydrotherapy zones.</p></div>
</div>
</main>
<footer>
<span>© Arctic Spas</span>
<span>Warranty · Financing · Dealer Locator</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.6px; background: #2ea3f2; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.6px; background: #ffffff; color: #111111;
border: 1px solid #2ea3f2; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 1.5px; background: #111111; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#222222; font-family:'Open Sans',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d9d9d9;}
.logo{font-size:19px;font-weight:700;color:#111111;letter-spacing:.5px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;color:#111111;}
.hero{height:220px;background:#111111;display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;}
.herotext{max-width:400px;color:#fff;}
.herotext h1{font-size:32px;font-weight:700;line-height:1.15;margin:0 0 10px;}
.herotext p{font-size:15px;color:#cfcfcf;margin:0 0 16px;}
.cta{display:inline-block;background:#2ea3f2;color:#fff;font-size:14px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:12px 28px;border-radius:4px;}
.guitarbody{position:absolute;right:70px;top:30px;width:150px;height:160px;border-radius:45% 45% 40% 40%;background:radial-gradient(circle at 35% 30%,#2ea3f2,#111111 70%);}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:200px;background:#f4f4f4;border-radius:4px;padding:12px;}
.thumb{aspect-ratio:3/4;height:110px;border-radius:4px;margin-bottom:8px;}
.ptitle{font-size:16px;font-weight:600;color:#111111;margin:0 0 2px;}
.psub{font-size:13px;color:#444444;margin-bottom:6px;}
.pcta{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#2ea3f2;}
.swatchrow{display:flex;gap:8px;padding:16px 32px 0;}
.swatch{width:28px;height:28px;border-radius:9999px;border:2px solid transparent;}
.swatch.sel{border-color:#2ea3f2;}
.footer{position:absolute;bottom:0;left:0;right:0;height:46px;background:#111111;color:#bcc8c9;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Suhr</div>
<div class="navlinks"><span>Guitars</span><span>Amps</span><span>Pickups</span><span>Dealers</span></div>
</div>
<div class="hero">
<div class="herotext"><h1>Precision-built, finish to fretboard.</h1><p>Instruments engineered on a manufacturing floor where finish quality does the talking.</p><div class="cta">Configure Yours</div></div>
<div class="guitarbody"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2ea3f2,#111111)"></div><div class="ptitle">Modern Pro Series</div><div class="psub">Alder Body · Maple Neck</div><div class="pcta">Configure</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#444444,#111111)"></div><div class="ptitle">Standard Legacy</div><div class="psub">Ash Body · Rosewood</div><div class="pcta">Configure</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c600ff,#111111)"></div><div class="ptitle">Custom Shop Artist</div><div class="psub">Limited Run</div><div class="pcta">Request Quote</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#bcc8c9,#111111)"></div><div class="ptitle">Signature Amp Head</div><div class="psub">50W Tube</div><div class="pcta">View Specs</div></div>
</div>
<div class="swatchrow">
<div class="swatch sel" style="background:#2ea3f2"></div><div class="swatch" style="background:#111111"></div><div class="swatch" style="background:#c600ff"></div><div class="swatch" style="background:#bcc8c9"></div>
</div>
<div class="footer"><span>© Suhr</span><span>Custom Shop Dealer Locator</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafefb; color: #444444;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafefb; color: #444444;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #fe3bae; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #fafefb; color: #fe3bae;
border: 1px solid #fe3bae; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafefb; color: #444444;
border: 1px solid #ccd0cd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f5634c; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafefb; color:#444444; box-sizing:border-box;
font-family:'Quicksand','Tenor Sans',sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#fafefb; }
.brand { font-family:'MotelCalifornia-Regular','Tenor Sans',sans-serif; font-size:24px; font-weight:400; color:#fe3bae; margin:0; }
.navlinks { display:flex; gap:22px; font-size:15px; font-weight:600; letter-spacing:0.3px; color:#565a5b; }
.util { font-size:13px; color:#6a6a6a; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 72px); }
.stage { padding:26px; display:flex; flex-direction:column; gap:12px; background:#fdf6ed; }
.crumb { font-size:11px; color:#6a6a6a; }
.pan { flex:1; border-radius:20px; background:#fffaf6; box-shadow:0 2px 8px rgba(0,0,0,0.06); position:relative; overflow:hidden; }
.pan::before { content:''; position:absolute; left:24px; top:32px; width:110px; height:110px; border-radius:16px; background:#5bc6ce; transform:rotate(-8deg); }
.pan::after { content:''; position:absolute; right:30px; bottom:36px; width:130px; height:100px; border-radius:16px; background:#fcd94c; transform:rotate(6deg); }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; border-radius:12px; background:#fffaf6; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.info { padding:24px 34px; display:flex; flex-direction:column; gap:11px; overflow:hidden; }
.cat { font-size:13px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; color:#d96bff; }
h1 { font-family:'MotelCalifornia-Regular','Tenor Sans',sans-serif; margin:0; font-size:32px; font-weight:400; line-height:1.15; }
.rating { display:flex; align-items:center; gap:8px; font-size:13px; color:#929292; }
.stars { color:#fcd94c; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:18px; font-weight:700; color:#fe3bae; }
.badge-new { background:#5bc6ce; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:2px 8px; border-radius:8px; }
.desc { font-size:14px; color:#565a5b; line-height:1.45; }
.selectors { display:flex; gap:10px; }
.chip { background:#fdf6ed; color:#6a6a6a; border-radius:9999px; padding:8px 16px; font-size:14px; font-weight:600; }
.chip.on { background:#fe3bae; color:#fff; }
.trust { background:#fdf6ed; border-radius:12px; font-size:13px; color:#6a6a6a; padding:10px 14px; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#fe3bae; color:#fff; border:none; height:48px; font-size:16px; font-weight:600;
letter-spacing:0.5px; border-radius:9999px; }
.btn-secondary { width:150px; background:#fafefb; border:2px solid #fe3bae; color:#fe3bae; height:48px; font-size:16px; font-weight:600; border-radius:9999px; }
</style></head>
<body>
<nav>
<p class="brand">Bright Stripes</p>
<div class="navlinks"><span>Craft Kits</span><span>Coloring</span><span>Stickers</span><span>Bundles</span></div>
<div class="util">Search Account Cart (3)</div>
</nav>
<main>
<div class="stage">
<div class="crumb">Bright Stripes / Stickers / Rainbow Scenes</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Rainbow Scenes</span>
<h1>Rainbow Sticker Scene Kit</h1>
<div class="rating"><span class="stars">★★★★★</span> 4.8 · 962 reviews</div>
<div class="price-row"><span class="price">$16.00</span><span class="badge-new">New</span></div>
<p class="desc">Reusable puffy stickers and a glittering backdrop let little hands build a new scene again and again — no mess, endless play.</p>
<div class="selectors">
<span class="chip on">Ages 3+</span><span class="chip">Ages 5+</span>
</div>
<div class="trust">Non-toxic materials · Includes travel case</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Get Inspired</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 0.25px; margin: 0; color: #5b544f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c82423; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #003399; color: #ffffff;
border: 1px solid #c82423; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c0c0c0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5b544f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c82423; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:Lato,Arial,sans-serif; color:#403b37; }
*{box-sizing:border-box;}
.promo{height:32px;background:#003399;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;letter-spacing:.3px;}
.nav{height:64px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dedede;}
.logo{font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#403b37;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:700;letter-spacing:.25px;color:#403b37;}
.hero{display:flex;height:250px;background:#fff;}
.left{width:430px;padding:40px 36px;display:flex;flex-direction:column;justify-content:center;}
.h1{font-family:'Playfair Display',serif;font-size:34px;font-weight:700;line-height:1.2;margin:0 0 14px;}
.sub{font-size:15px;line-height:1.6;color:#5b544f;max-width:340px;margin:0 0 20px;}
.cta{display:inline-block;background:#c82423;color:#fff;font-size:14px;font-weight:700;padding:12px 26px;border-radius:4px;width:fit-content;}
.right{flex:1;position:relative;background:linear-gradient(160deg,#e6ded2,#d9cdb8);}
.shelf{position:absolute;left:40px;top:30px;width:220px;height:12px;background:#403b37;}
.shelf2{position:absolute;left:40px;top:80px;width:220px;height:12px;background:#403b37;}
.shelf3{position:absolute;left:40px;top:130px;width:220px;height:12px;background:#403b37;}
.leg{position:absolute;left:60px;top:30px;width:8px;height:150px;background:#5b544f;}
.leg2{position:absolute;left:250px;top:30px;width:8px;height:150px;background:#5b544f;}
.sec{padding:20px 36px 0;}
.seclabel{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:210px;background:#fff;border-radius:4px;padding:10px;box-shadow:0 1px 4px rgba(0,0,0,.06);}
.thumb{aspect-ratio:4/3;background:#f0ece0;border-radius:2px;margin-bottom:8px;}
.ptitle{font-size:14px;font-weight:700;margin:0 0 4px;}
.pprice{font-size:14px;color:#c82423;font-weight:700;}
.pprice .was{color:#54585b;font-weight:400;text-decoration:line-through;font-size:12px;margin-left:6px;}
.badge{display:inline-block;background:#003399;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 7px;border-radius:2px;margin-bottom:6px;}
</style>
<div class="promo">FREE SHIPPING OVER $75 — GARAGE ORGANIZATION SALE</div>
<div class="nav">
<div class="logo">Seville Classics</div>
<div class="navlinks"><div>Storage</div><div>Workbenches</div><div>Shelving</div><div>Home</div></div>
</div>
<div class="hero">
<div class="left">
<div class="h1">The material<br>language of a<br>well-kept garage.</div>
<div class="sub">Wood grain and powder-coated steel do the persuading — functional seriousness, not softness.</div>
<div class="cta">Shop Workbenches</div>
</div>
<div class="right"><div class="leg"></div><div class="leg2"></div><div class="shelf"></div><div class="shelf2"></div><div class="shelf3"></div></div>
</div>
<div class="sec">
<div class="seclabel">Featured Storage</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#403b37,#c82423)"></div><div class="ptitle">UltraHD Rolling Workbench</div><div class="pprice">$249.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#5b544f,#003399)"></div><div class="ptitle">5-Tier Steel Shelving</div><div class="pprice">$139.99<span class="was">$169.99</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d9cdb8,#403b37)"></div><div class="ptitle">Pegboard Wall Panel Kit</div><div class="pprice">$79.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c82423,#5b544f)"></div><div class="ptitle">Rolling Tool Cart</div><div class="pprice">$189.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1818;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1818;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #1a1818; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6c6e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #896b27; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #2b3033;
border: 1px solid #896b27; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1818;
border: 1px solid #c6c5c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6c6e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #896b27; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#faf8f5; font-family:'Gotham',Arial,Helvetica,sans-serif; color:#2b3033; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fff;border-bottom:1px solid #dddcdc;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#1a1818;letter-spacing:0.3px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:0.3px;color:#1a1818;}
.navlinks .on{color:#896b27;border-bottom:2px solid #896b27;padding-bottom:20px;}
.hero{height:190px;background:#2b3033;display:flex;align-items:center;padding:0 32px;}
.h1{font-size:38px;font-weight:700;letter-spacing:-0.4px;color:#fff;margin:0 0 8px;max-width:440px;}
.sub{font-size:15px;color:#dddcdc;max-width:380px;}
.catband{height:70px;background:#ede8e0;border-bottom:1px solid #b9babb;display:flex;align-items:center;padding:0 32px;}
.cat{font-size:22px;font-weight:600;color:#1a1818;}
.chips{display:flex;gap:8px;padding:14px 32px 0;}
.chip{border:1px solid #b9babb;border-radius:9999px;padding:5px 14px;font-size:12px;color:#2b3033;}
.chip.on{background:#1a1818;color:#fff;border-color:#1a1818;}
.grid{display:flex;gap:14px;padding:14px 32px 0;}
.card{width:150px;background:#faf8f5;border:1px solid #dddcdc;}
.thumb{height:150px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#896b27;color:#fff;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 7px;}
.body{padding:10px;}
.ptitle{font-size:14px;font-weight:600;color:#1a1818;}
.pnote{font-size:11px;color:#6b6c6e;margin:2px 0;}
.pprice{font-size:16px;font-weight:700;color:#1a1818;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#1a1818;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#b9babb;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Rejuvenation Vintage</div>
<div class="navlinks"><div class="on">Estate Finds</div><div>Hardware</div><div>Lighting</div><div>Provenance</div></div>
</div>
<div class="hero">
<div>
<div class="h1">A museum of hardware, priced to own.</div>
<div class="sub">Documented estate pieces from 1910–1940, catalogued like the auction house that came before us.</div>
</div>
</div>
<div class="catband"><div class="cat">Cast Iron & Antique Brass</div></div>
<div class="chips">
<div class="chip on">Era: 1920s</div><div class="chip">Finish: Brass</div><div class="chip">Material: Iron</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#896b27,#1a1818)"><div class="badge">Estate</div></div><div class="body"><div class="ptitle">Foundry Door Pull</div><div class="pnote">c. 1924 · Good</div><div class="pprice">$68</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#1a1818,#896b27)"><div class="badge" style="background:#d04727">Sale</div></div><div class="body"><div class="ptitle">Depot Wall Sconce</div><div class="pnote">c. 1931 · Fair</div><div class="pprice">$145</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#a88b4a,#2b3033)"></div><div class="body"><div class="ptitle">Iron Bin Latch Set</div><div class="pnote">c. 1918 · Good</div><div class="pprice">$42</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#2b3033,#896b27)"><div class="badge">Estate</div></div><div class="body"><div class="ptitle">Tilework Address Tile</div><div class="pnote">c. 1928 · Excellent</div><div class="pprice">$95</div></div></div>
</div>
<div class="footer"><span>© Rejuvenation Vintage — a catalogue, not a clearance bin</span><span>Provenance Notes · Condition Guide</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5537; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5537; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4dcbcb; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5537; color: #000000;
border: 1px solid #4dcbcb; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5537; color: #f5f5f5;
border: 1px solid #fd6f55; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e3684f; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f4f5; color:#252729; box-sizing:border-box;
font-family: "Helvetica Neue", Helvetica, "PingFang TC", "Microsoft JhengHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; flex-direction:column; height:640px; }
nav { height:50px; flex:0 0 auto; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; }
.logo { font-size:17px; font-weight:700; color:#ff5537; }
.city { font-size:15px; color:#000000; font-weight:400; }
.navright { display:flex; align-items:center; gap:10px; }
.btn-outline-teal { border:1px solid #4dcbcb; color:#4dcbcb; border-radius:4px; height:30px; padding:0 10px;
display:flex; align-items:center; font-size:12px; }
.btn-text { color:#000000; border-radius:4px; height:30px; padding:0 10px; display:flex; align-items:center; font-size:12px; }
.hero { flex:0 0 auto; background:#ffffff; padding:16px 24px; }
.hero h1 { font-size:26px; font-weight:500; line-height:1.2; margin:0 0 4px; color:#252729; }
.hero h2 { font-size:13px; font-weight:400; color:#a7a7a9; margin:0 0 12px; }
.bookbar { display:flex; align-items:center; gap:0; border:1px solid #eaeaea; border-radius:4px; overflow:hidden; }
.bparam { font-size:12px; color:#252729; padding:0 12px; height:36px; display:flex; align-items:center;
border-right:1px solid #eaeaea; white-space:nowrap; }
.bsearch { flex:1; font-size:12px; color:#a7a7a9; padding:0 12px; height:36px; display:flex; align-items:center; min-width:0; }
.bsubmit { background:#ff5537; color:#ffffff; border-radius:0; height:36px; padding:0 18px; display:flex;
align-items:center; font-size:13px; font-weight:400; white-space:nowrap; }
.content { flex:1 1 auto; padding:14px 24px; overflow:hidden; display:flex; flex-direction:column; gap:12px; min-height:0; }
.sectiontitle { font-size:15px; font-weight:700; color:#252729; margin:0 0 8px; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.tile { background:#ffffff; border-radius:4px; overflow:hidden; }
.photo { height:98px; position:relative; }
.p1 { background:linear-gradient(135deg,#ffb199,#ff5537); }
.p2 { background:linear-gradient(135deg,#8fe3e3,#4dcbcb); }
.p3 { background:linear-gradient(135deg,#ffe08a,#ffb107); }
.p4 { background:linear-gradient(135deg,#c7c9fb,#5a69eb); }
.tag { position:absolute; top:6px; left:6px; border-radius:4px; padding:2px 7px; font-size:10px; font-weight:500; color:#ffffff; }
.tag-avail { background:#ff5537; }
.tinfo { padding:8px 10px; }
.tname { font-size:12px; color:#252729; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trate { font-size:10px; color:#ffb107; margin-bottom:3px; }
.tprice { font-size:12px; font-weight:700; color:#ff5537; }
.flashband { flex:1 1 auto; background:#ffffff; border-radius:4px; padding:10px 14px; min-height:0; }
.flashrow { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.fcard { display:flex; border:1px solid #eaeaea; border-radius:4px; overflow:hidden; }
.fphoto { width:64px; flex:0 0 auto; }
.f1 { background:linear-gradient(135deg,#c7c9fb,#5a69eb); }
.f2 { background:linear-gradient(135deg,#ffe08a,#ffb107); }
.f3 { background:linear-gradient(135deg,#8fe3e3,#4dcbcb); }
.finfo { padding:7px 10px; min-width:0; }
.fname { font-size:11px; color:#252729; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ftag { display:inline-block; background:#5a69eb; color:#ffffff; border-radius:4px; padding:0 6px; font-size:10px; }
</style></head>
<body>
<div class="wrap">
<nav>
<div class="logo">FunNow</div>
<div class="city">Taipei ▾</div>
<div class="navright">
<span class="btn-outline-teal">Download App</span>
<span class="btn-text">Login / Sign Up</span>
</div>
</nav>
<div class="hero">
<h1>Explore & book your fun activities in Taipei now</h1>
<h2>Enjoy your life the way you want.</h2>
<div class="bookbar">
<div class="bparam">Category</div>
<div class="bparam">Now</div>
<div class="bparam">Date</div>
<div class="bparam">Time</div>
<div class="bparam" style="border-right:none;">Pax</div>
<div class="bsearch">Search for products or locations</div>
<div class="bsubmit">Search</div>
</div>
</div>
<div class="content">
<div>
<div class="sectiontitle">Trending Themes</div>
<div class="grid">
<div class="tile">
<div class="photo p1"><span class="tag tag-avail">Available now</span></div>
<div class="tinfo"><div class="tname">Beitou Hot Spring Hotel</div><div class="trate">★★★★★ 4.8</div><div class="tprice">$1,280</div></div>
</div>
<div class="tile">
<div class="photo p2"></div>
<div class="tinfo"><div class="tname">Riverside Massage & Spa</div><div class="trate">★★★★★ 4.6</div><div class="tprice">$980</div></div>
</div>
<div class="tile">
<div class="photo p3"><span class="tag tag-avail">Book For 20:00</span></div>
<div class="tinfo"><div class="tname">Rooftop Bar & Bistro</div><div class="trate">★★★★★ 4.7</div><div class="tprice">$650</div></div>
</div>
<div class="tile">
<div class="photo p4"></div>
<div class="tinfo"><div class="tname">Jiaoxi Hot Spring Room</div><div class="trate">★★★★★ 4.9</div><div class="tprice">$2,100</div></div>
</div>
</div>
</div>
<div class="flashband">
<div class="sectiontitle" style="margin-bottom:8px;">Flash Sales Now</div>
<div class="flashrow">
<div class="fcard"><div class="fphoto f1"></div><div class="finfo"><div class="fname">Night Market Food Tour</div><span class="ftag">20:00 Flash Sale</span></div></div>
<div class="fcard"><div class="fphoto f2"></div><div class="finfo"><div class="fname">Late-Night Karaoke Room</div><span class="ftag">22:00 Flash Sale</span></div></div>
<div class="fcard"><div class="fphoto f3"></div><div class="finfo"><div class="fname">Express Foot Massage</div><span class="ftag">21:00 Flash Sale</span></div></div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f6f0; color: #0c271c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f6f0; color: #0c271c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #0c271c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #507c5f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0.1em; background: #5a8c6b; color: #f8f6f0;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0.1em; background: transparent; color: #0c271c;
border: 1px solid #5a8c6b; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f6f0; color: #0c271c;
border: 1px solid #bdc2bb; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #507c5f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.1em; background: #5a8c6b; color: #f8f6f0;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f6f0; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif; color:#0c271c; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dedede;}
.logo{font-family:Georgia,'Cormorant Garamond',serif;font-size:22px;color:#0c271c;letter-spacing:0.5px;}
.navlinks{display:flex;gap:24px;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;color:#0c271c;}
.hero{height:300px;display:flex;background:#f0ecdf;}
.herotext{width:46%;padding:0 40px;display:flex;flex-direction:column;justify-content:center;}
.rule{width:48px;height:1px;background:#cfb56b;margin-bottom:16px;}
.herotext h1{font-family:Georgia,'Cormorant Garamond',serif;font-size:38px;font-weight:400;margin:0 0 14px;line-height:1.15;}
.herotext p{font-size:15px;color:#556860;margin:0 0 22px;max-width:300px;line-height:1.5;}
.cta{background:#5a8c6b;color:#f8f6f0;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;padding:15px 34px;width:fit-content;}
.heroimg{width:54%;background:radial-gradient(circle at 40% 45%,#cfb56b 0%,#5a8c6b 45%,#0c271c 100%);position:relative;}
.heroimg::before{content:'';position:absolute;left:50%;top:50%;width:90px;height:90px;border:2px solid #f8f6f0;border-radius:50%;transform:translate(-50%,-50%);}
.tags{display:flex;gap:10px;padding:20px 40px 0;}
.tag{background:#f0ecdf;border:1px solid #dedede;border-radius:9999px;padding:6px 16px;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#556860;}
.tag.on{background:#5a8c6b;color:#f8f6f0;border-color:#5a8c6b;}
.grid{display:flex;gap:16px;padding:22px 40px 0;}
.card{width:170px;}
.thumb{height:120px;margin-bottom:10px;background:#fafafa;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#5a8c6b;color:#f8f6f0;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;border-radius:9999px;padding:3px 10px;}
.pname{font-size:13px;color:#0c271c;margin-bottom:4px;}
.pprice{font-family:Georgia,serif;font-size:16px;color:#0c271c;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Retrouvai</div>
<div class="navlinks"><span>Rings</span><span>Necklaces</span><span>Bracelets</span><span>The Atelier</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="rule"></div>
<h1>Modern Heirlooms</h1>
<p>One-of-a-kind fine jewelry cast from found stones and antique gold, made to be handed down.</p>
<div class="cta">Shop Collection</div>
</div>
<div class="heroimg"></div>
</div>
<div class="tags">
<div class="tag on">All</div><div class="tag">Signet</div><div class="tag">Cluster</div><div class="tag">Bridal</div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">New</div></div><div class="pname">Found Stone Signet</div><div class="pprice">$1,480</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f0dad7,#c5682e)"></div><div class="pname">Terracotta Cluster Ring</div><div class="pprice">$980</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f9dee5,#af7b88)"></div><div class="pname">Blush Sapphire Band</div><div class="pprice">$1,220</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#cfb56b,#0c271c)"></div><div class="pname">Antique Gold Hoop</div><div class="pprice">$640</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #e3e4ec;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #e3e4ec;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.15; letter-spacing: 0.3px; margin: 0; color: #e3e4ec; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.0; letter-spacing: 1.5px; background: #3245ff; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.0; letter-spacing: 1.5px; background: transparent; color: #e3e4ec;
border: 1px solid #3245ff; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #242424; color: #e3e4ec;
border: 1px solid #464648; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #303030; color: #e3e4ec;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121212; color:#e3e4ec; font-family:'Arial',sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #303030;}
.logo{font-family:Impact,'Arial Narrow',sans-serif;font-size:24px;letter-spacing:1px;text-transform:uppercase;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;}
.navlinks span:first-child{color:#3245ff;}
.hero{height:210px;display:flex;align-items:center;padding:0 32px;background:#0a0a0a;}
.heroText{width:52%;}
.heroText .eyebrow{font-size:11px;font-weight:700;letter-spacing:1px;color:#3245ff;text-transform:uppercase;margin-bottom:8px;}
.heroText h1{font-family:Impact,'Arial Narrow',sans-serif;font-size:48px;text-transform:uppercase;line-height:.95;letter-spacing:.5px;margin:0 0 10px;color:#f0f0f0;}
.heroText p{font-size:14px;color:#8d8d8d;max-width:300px;margin:0 0 14px;}
.btn{display:inline-block;background:#3245ff;color:#fff;font-family:Impact,sans-serif;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;padding:12px 26px;}
.heroImg{width:48%;height:180px;position:relative;}
.vinyl{position:absolute;right:40px;top:10px;width:150px;height:150px;border-radius:9999px;background:radial-gradient(circle,#1a1a1a 0 20px,#3245ff 20px 22px,#0a0a0a 22px 60px,#333 60px 62px,#0a0a0a 62px 75px);}
.sectionhead{padding:16px 32px 8px;font-family:Impact,sans-serif;font-size:26px;text-transform:uppercase;border-bottom:2px solid #3245ff;margin:0 32px;display:flex;justify-content:space-between;}
.catalog{padding:6px 32px 0;}
.row{display:flex;align-items:center;padding:8px 0;border-bottom:1px solid #242424;font-size:13px;}
.rowid{width:80px;font-family:'Courier New',monospace;font-size:11px;text-transform:uppercase;color:#737373;}
.rowinfo{flex:1;}
.rowartist{color:#d0d0d8;}
.rowtitle{color:#e3e4ec;font-weight:600;}
.rowprice{font-family:'Courier New',monospace;font-weight:700;color:#e3e4ec;}
.badge{font-family:'Courier New',monospace;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 6px;margin-left:8px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Turntable Lab</div>
<div class="navlinks"><span>New Arrivals</span><span>Staff Picks</span><span>Used</span><span>Gear</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">Now Spinning</div>
<h1>Deep Cuts For Deep Ears</h1>
<p>Vinyl, gear, and staff picks curated for people who still flip through crates.</p>
<div class="btn">Browse Crates</div>
</div>
<div class="heroImg"><div class="vinyl"></div></div>
</div>
<div class="sectionhead"><span>New This Week</span></div>
<div class="catalog">
<div class="row"><div class="rowid">LP-00214</div><div class="rowinfo"><span class="rowartist">Nightlong Echoes — </span><span class="rowtitle">Static Bloom</span><span class="badge" style="background:#3245ff;color:#fff;">NEW</span></div><div class="rowprice">$28.00</div></div>
<div class="row"><div class="rowid">LP-00198</div><div class="rowinfo"><span class="rowartist">Field Recorder — </span><span class="rowtitle">Concrete Season</span><span class="badge" style="background:#0ea352;color:#fff;">IN STOCK</span></div><div class="rowprice">$24.00</div></div>
<div class="row"><div class="rowid">7IN-00087</div><div class="rowinfo"><span class="rowartist">Low Tide Choir — </span><span class="rowtitle">Salt Line</span><span class="badge" style="background:#d02f2e;color:#fff;">SALE</span></div><div class="rowprice">$12.00</div></div>
<div class="row"><div class="rowid">LP-00201</div><div class="rowinfo"><span class="rowartist">Ironwood Set — </span><span class="rowtitle">Ampersand</span><span class="badge" style="background:#f7a504;color:#000;">PRE-ORDER</span></div><div class="rowprice">$32.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff9900; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff9900; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c4e09; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #131921; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff9900; color: #131921;
border: 1px solid #131921; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff9900; color: #111111;
border: 1px solid #d98303; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c4e09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d98505; color: #131921;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#0F1111; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
.navy { background:#131921; height:52px; display:flex; align-items:center; gap:16px; padding:0 20px; }
.brand { font-size:16px; font-weight:700; color:#fff; margin:0; flex-shrink:0; }
.search { flex:1; height:34px; background:#fff; border-radius:8px; display:flex; align-items:center;
padding:0 12px; font-size:13px; color:#565959; }
.search .go { margin-left:auto; background:#FF9900; color:#0F1111; width:34px; height:34px; margin-right:-12px;
border-radius:0 8px 8px 0; display:flex; align-items:center; justify-content:center; font-size:14px; }
.bell { color:#fff; font-size:18px; flex-shrink:0; }
.subnav { background:#232F3E; height:30px; display:flex; align-items:center; padding:0 20px; gap:6px;
color:#fff; font-size:12px; }
.crumbs { display:flex; gap:16px; padding:8px 20px; font-size:12px; color:#007185; font-weight:600;
border-bottom:1px solid #DDDDDD; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:12px 20px; }
.tile { border:1px solid #DDDDDD; border-radius:4px; padding:8px; }
.timg { width:100%; height:78px; border-radius:4px; margin-bottom:6px; }
.ttitle { font-size:11.5px; line-height:1.3; height:29px; overflow:hidden; }
.stars { color:#FFA41C; font-size:10px; margin-top:4px; }
.stars span { color:#007185; font-size:10px; }
.price { font-size:15px; font-weight:700; margin-top:3px; }
.strike { font-size:10.5px; color:#565959; text-decoration:line-through; margin-left:5px; font-weight:400; }
.prime { font-size:10px; color:#00A8E1; font-weight:700; margin-top:3px; }
.deliv { font-size:10px; color:#007600; font-weight:500; }
.addcart { margin-top:6px; background:#FF9900; color:#0F1111; font-size:10.5px; font-weight:600; text-align:center;
border-radius:6px; padding:4px 0; border-top:1px solid #FCD200; }
.deal { margin:0 20px 10px; background:linear-gradient(90deg,#B12704,#CC0C39); border-radius:4px;
padding:6px 12px; color:#fff; font-size:11px; font-weight:700; display:flex; justify-content:space-between; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:44px; background:#fff; border-top:1px solid #DDDDDD;
display:flex; }
.tabbar .t { flex:1; text-align:center; font-size:9px; font-weight:600; color:#565959; padding-top:6px; }
.tabbar .t.on { color:#FF9900; }
.cartbadge { display:inline-block; background:#CC0C39; color:#fff; border-radius:8px; font-size:8px;
padding:0 4px; margin-left:2px; }
</style></head>
<body style="position:relative;">
<div class="navy">
<p class="brand">Amazon (iOS)</p>
<div class="search">🔍 Search Amazon<span class="go">🎤</span></div>
<span class="bell">🔔</span>
</div>
<div class="subnav">📍 Deliver to Alex — Seattle 98109</div>
<div class="crumbs"><span>Deals</span><span>Electronics</span><span>Home</span><span>Fashion</span><span>Prime Video</span></div>
<div class="deal"><span>⚡ Lightning Deal</span><span>Ends in 02h 45m 10s</span></div>
<div class="grid">
<div class="tile">
<div class="timg" style="background:linear-gradient(135deg,#dfe6e9,#636e72)"></div>
<div class="ttitle">Wireless Noise-Cancelling Over-Ear Headphones, Black</div>
<div class="stars">★★★★★ <span>(12,345)</span></div>
<div class="price">$24.99<span class="strike">$34.99</span></div>
<div class="prime">✓ prime</div>
<div class="deliv">FREE delivery Tomorrow</div>
<div class="addcart">Add to Cart</div>
</div>
<div class="tile">
<div class="timg" style="background:linear-gradient(135deg,#ffeaa7,#fdcb6e)"></div>
<div class="ttitle">Stainless Steel Insulated Water Bottle 32oz</div>
<div class="stars">★★★★☆ <span>(3,201)</span></div>
<div class="price">$18.49</div>
<div class="prime">✓ prime</div>
<div class="deliv">FREE delivery Tue</div>
<div class="addcart">Add to Cart</div>
</div>
<div class="tile">
<div class="timg" style="background:linear-gradient(135deg,#a29bfe,#6c5ce7)"></div>
<div class="ttitle">4K Streaming Media Player with Voice Remote</div>
<div class="stars">★★★★★ <span>(48,902)</span></div>
<div class="price">$39.99<span class="strike">$49.99</span></div>
<div class="prime">✓ prime</div>
<div class="deliv">FREE delivery Tomorrow</div>
<div class="addcart">Add to Cart</div>
</div>
<div class="tile">
<div class="timg" style="background:linear-gradient(135deg,#fab1a0,#e17055)"></div>
<div class="ttitle">Non-Stick Ceramic Frying Pan Set, 3-Piece</div>
<div class="stars">★★★★☆ <span>(892)</span></div>
<div class="price">$52.00</div>
<div class="prime">✓ prime</div>
<div class="deliv">FREE delivery Wed</div>
<div class="addcart">Add to Cart</div>
</div>
</div>
<div class="tabbar">
<div class="t on">🏠<br>Home</div>
<div class="t">☰<br>Menu</div>
<div class="t">🛒<span class="cartbadge">3</span><br>Cart</div>
<div class="t">👤<br>You</div>
<div class="t">🔍<br>Search</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4a154b; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4a154b; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a890a8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #611f69; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4a154b; color: #ffffff;
border: 1px solid #611f69; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4a154b; color: #f5f5f5;
border: 1px solid #653966; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a890a8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4e1750; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1D1C1D; box-sizing:border-box;
font-family:"Lato","Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; height:640px; }
.sidebar { width:220px; background:#3F0E40; color:#ffffff; padding:20px 14px; }
.sidebar .ws { font-size:15px; font-weight:700; margin-bottom:18px; }
.chan { padding:8px 10px; border-radius:6px; font-size:15px; font-weight:700; margin-bottom:2px; }
.chan.active { background:#1164A3; }
.chan.inactive { color:rgba(255,255,255,0.7); font-weight:400; }
.main { flex:1; display:flex; flex-direction:column; }
header { height:52px; border-bottom:1px solid #E8E8E8; display:flex; align-items:center; padding:0 20px; font-weight:700; font-size:16px; }
.thread { flex:1; padding:20px; }
.msg { display:flex; gap:10px; margin-bottom:16px; }
.avatar { width:36px; height:36px; background:#E8E8E8; border-radius:4px; }
.name { font-size:15px; font-weight:700; }
.time { font-size:12px; color:#868686; margin-left:6px; }
.body { font-size:15px; color:#1D1C1D; margin-top:2px; line-height:1.46; }
.composer { margin:0 20px 20px; border:1px solid rgba(29,28,29,0.3); border-radius:8px; padding:8px 12px; font-size:15px; color:#868686; }
.cta { background:#007A5A; color:#ffffff; border-radius:4px; padding:0 12px; height:36px; display:inline-flex; align-items:center; font-size:15px; font-weight:700; margin-left:12px; }
</style></head>
<body>
<div class="app">
<div class="sidebar">
<div class="ws">Slack</div>
<div class="chan active"># general</div>
<div class="chan inactive"># engineering</div>
<div class="chan inactive"># random</div>
<div class="chan inactive">+ Add channels</div>
</div>
<div class="main">
<header># general <span class="cta">Try for free</span></header>
<div class="thread">
<div class="msg"><div class="avatar"></div><div><span class="name">Maya</span><span class="time">10:24 AM</span><div class="body">This is the very beginning of the #general channel 👋</div></div></div>
<div class="msg"><div class="avatar"></div><div><span class="name">Daniel</span><span class="time">10:26 AM</span><div class="body">Where work happens — let's ship it.</div></div></div>
</div>
<div class="composer">Message #general</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf9f7; color: #585858;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf9f7; color: #585858;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #585858; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #9b9b9b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.3; letter-spacing: 1px; background: #bd957b; color: #faf9f7;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.3; letter-spacing: 1px; background: transparent; color: #585858;
border: 1px solid #bd957b; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #faf9f7; color: #585858;
border: 1px solid #d2d1cf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9b9b9b; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 10px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #e2976e; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#faf9f7; color:#585858; box-sizing:border-box; font-family:Georgia, serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; padding:0 32px; border-bottom:1px solid #e5e0d8; }
.brand { font-size:20px; letter-spacing:-0.3px; color:#585858; }
.navlinks { display:flex; gap:24px; margin-left:auto; font-family:'Courier New', monospace; }
.navlinks div { font-size:11px; text-transform:uppercase; letter-spacing:.6px; }
.hero { text-align:center; padding:56px 32px; }
.hero h1 { font-size:44px; font-weight:400; letter-spacing:-0.4px; max-width:600px; margin:0 auto 14px; color:#3a352d; }
.hero p { font-size:15px; max-width:460px; margin:0 auto 20px; color:#7e7469; }
.hero .cta { display:inline-block; background:#bd957b; color:#faf9f7; font-family:'Courier New', monospace; font-size:12px; letter-spacing:1.2px; text-transform:uppercase; padding:14px 32px; border-radius:9999px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:10px 32px 24px; }
.card { background:#fcfbf7; border-radius:20px; padding:16px; }
.img { aspect-ratio:1/1; border-radius:12px; margin-bottom:10px; }
.g1 { background:linear-gradient(150deg,#e2976e,#835436); }
.g2 { background:linear-gradient(150deg,#d2c2af,#66594a); }
.g3 { background:linear-gradient(150deg,#fbbd54,#a36f4d); }
.name { font-size:16px; margin-bottom:4px; color:#3a352d; }
.price { font-size:14px; color:#7e7469; }
.badge { display:inline-block; background:#e2976e; color:#faf9f7; font-family:'Courier New', monospace; font-size:9px; letter-spacing:.5px; text-transform:uppercase; padding:3px 10px; border-radius:9999px; margin-bottom:8px; }
</style></head>
<body>
<nav>
<div class="brand">Ffern</div>
<div class="navlinks"><div>Fragrance</div><div>Seasons</div><div>About</div><div>Journal</div></div>
</nav>
<div class="hero">
<h1>Four bottles a year. No more, no less.</h1>
<p>A British fragrance house working in step with the seasons.</p>
<div class="cta">Discover This Season</div>
</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="img g1"></div><div class="name">Autumn Edition</div><div class="price">£120</div></div>
<div class="card"><div class="img g2"></div><div class="name">Summer Edition</div><div class="price">£120</div></div>
<div class="card"><div class="img g3"></div><div class="name">Winter Edition</div><div class="price">£120</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #3a2210;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #3a2210;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #3a2210; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #108474; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #3a2210;
border: 1px solid #108474; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #3a3a3a;
border: 1px solid #c9c4c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #980707; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:'Assistant','Helvetica Neue',Arial,sans-serif; color:#3a3a3a; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#fff;border-bottom:1px solid #eeeeee;}
.logo{font-size:20px;font-weight:600;color:#3a2210;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;}
.navlinks .on{color:#108474;border-bottom:2px solid #108474;padding-bottom:20px;}
.search{background:#f4f6f8;border-radius:9999px;padding:12px 20px;font-size:14px;color:#7b7b7b;width:200px;}
.hero{height:260px;background:#edf5f5;display:flex;align-items:center;padding:0 40px;}
.herotext{width:48%;}
.hero h1{font-size:32px;font-weight:600;margin:0 0 12px;line-height:1.25;color:#3a2210;}
.hero p{font-size:16px;color:#3a3a3a;margin:0 0 20px;max-width:340px;}
.cta{background:#108474;color:#fff;font-size:15px;font-weight:600;padding:14px 32px;border-radius:9999px;width:fit-content;}
.heroimg{width:52%;height:200px;background:radial-gradient(circle at 40% 45%,#e3ad7c,#108474 70%);border-radius:16px;}
.label{padding:22px 40px 10px;font-size:16px;font-weight:600;color:#3a2210;}
.grid{display:flex;gap:16px;padding:0 40px;}
.card{width:200px;background:#fff;border-radius:12px;overflow:hidden;}
.thumb{height:120px;border-radius:12px 12px 0 0;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#980707;color:#fff;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;border-radius:4px;padding:2px 8px;}
.badge.new{background:#108474;}
.body{padding:12px;}
.pname{font-size:14px;margin-bottom:4px;}
.stars{color:#f1e04d;font-size:12px;margin-bottom:4px;}
.pprice{font-size:15px;font-weight:600;}
</style>
<div class="nav">
<div class="logo">Riley Home</div>
<div class="navlinks"><span class="on">Bath</span><span>Bedding</span><span>Bundles</span></div>
<div class="search">Search products...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>The best part of your morning routine.</h1>
<p>Plush, sustainable towels and bath essentials designed to feel like a sanctuary.</p>
<div class="cta">Shop Bath</div>
</div>
<div class="heroimg"></div>
</div>
<div class="label">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e3ad7c,#f4f6f8)"><div class="badge">Sale</div></div><div class="body"><div class="pname">Sand Terry Bath Towel Set</div><div class="stars">★★★★★</div><div class="pprice">$68</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#108474,#edf5f5)"><div class="badge new">New</div></div><div class="body"><div class="pname">Teal Waffle Robe</div><div class="stars">★★★★★</div><div class="pprice">$92</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#bfa999,#f4f6f8)"></div><div class="body"><div class="pname">Clay Bath Mat</div><div class="stars">★★★★☆</div><div class="pprice">$44</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1b1c1b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1b1c1b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #1b1c1b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.1px; background: #15815b; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.1px; background: #ffffff; color: #15815b;
border: 1px solid #15815b; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1b1c1b;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #dc2626; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#ffffff; color:#393b38; box-sizing:border-box; font-family:'Satoshi',system-ui,-apple-system,sans-serif; }
* { box-sizing:border-box; }
.banner { height:40px; background:#15815b; color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; }
nav { height:60px; border-bottom:1px solid #e6e6e6; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:19px; font-weight:700; color:#1b1c1b; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:500; color:#1b1c1b; }
.search-pill { background:#f7f7f7; border:1px solid #d1d1d1; border-radius:999px; padding:8px 18px 8px 16px; font-size:12px; color:#6b6b6b; }
.main { display:flex; gap:20px; padding:20px 32px; height:404px; }
.gallery { width:380px; background:#f1d2a6; border-radius:8px; display:flex; align-items:center; justify-content:center; position:relative; }
.packet { width:130px; height:190px; background:#fff; border:1px solid #d1d1d1; border-radius:6px; position:relative; box-shadow:0 6px 18px rgba(27,28,27,0.12); }
.packet::before { content:''; position:absolute; top:12px; left:12px; right:12px; height:80px; background:linear-gradient(180deg,#dc2626,#f1d2a6); border-radius:4px; }
.badge-new { position:absolute; top:16px; left:16px; background:#15815b; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:4px; }
.info { flex:1; display:flex; flex-direction:column; gap:6px; }
.info h1 { font-size:24px; font-weight:600; margin:0; }
.botanical { font-size:13px; font-style:italic; color:#6b6b6b; }
.price { font-size:18px; font-weight:600; margin-top:4px; }
.desc { font-size:13px; line-height:1.55; color:#393b38; max-width:440px; }
.cat-row { display:flex; gap:8px; margin-top:4px; }
.cat-badge { background:#f1d2a6; color:#393b38; font-size:11px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:4px; letter-spacing:0.5px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:44px; background:#15815b; color:#fff; border:none; border-radius:8px; font-weight:600; font-size:14px; }
.btn-secondary { flex:1; height:44px; background:#fff; color:#15815b; border:1.5px solid #15815b; border-radius:8px; font-weight:600; font-size:14px; }
.breadcrumb-row { padding:0 32px; font-size:12px; color:#6b6b6b; }
.breadcrumb-row a { color:#003399; }
.related { display:flex; gap:14px; padding:12px 32px; }
.rel-card { flex:1; background:#fff; border:1px solid #e6e6e6; border-radius:8px; padding:10px; }
.rel-card .rel-img { height:56px; background:#f1d2a6; border-radius:4px; margin-bottom:6px; }
.rel-card span { font-size:11px; font-weight:600; display:block; }
.rel-card small { font-size:10px; color:#6b6b6b; font-style:italic; }
</style></head>
<body>
<div class="banner">Spring planting deadline: order by March 15 for guaranteed delivery</div>
<nav>
<p class="brand">Baker Creek Heirloom Seeds</p>
<div class="navlinks"><span>Vegetables</span><span>Flowers</span><span>Herbs</span><span>Grains</span></div>
<div class="search-pill">🔍 Search 2,000+ varieties</div>
</nav>
<div class="breadcrumb-row">Home / Vegetables / <b>Tomatoes</b></div>
<div class="main">
<div class="gallery">
<div class="badge-new">New</div>
<div class="packet"></div>
</div>
<div class="info">
<h1>Amish Paste Tomato Seeds</h1>
<span class="botanical">Solanum lycopersicum var. amish paste</span>
<span class="price">$4.25</span>
<p class="desc">A century-old heirloom prized for its deep red, meaty flesh — ideal for sauce and canning. Indeterminate vines produce heavily from midsummer through first frost.</p>
<div class="cat-row">
<span class="cat-badge">Heirloom</span>
<span class="cat-badge">Open-Pollinated</span>
<span class="cat-badge">Rare</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Browse Category</button>
</div>
</div>
</div>
<div class="related">
<div class="rel-card"><div class="rel-img"></div><span>Brandywine Tomato</span><small>Solanum lycopersicum</small></div>
<div class="rel-card"><div class="rel-img"></div><span>Glass Gem Corn</span><small>Zea mays</small></div>
<div class="rel-card"><div class="rel-img"></div><span>Cherokee Purple</span><small>Solanum lycopersicum</small></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #828282; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #ff6458; color: #ffffff;
border: none; border-radius: 4px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #141414;
border: 1px solid #ff6458; border-radius: 4px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #141414;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #828282; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff6458; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#141414; box-sizing:border-box;
font-family:'Proxima Nova', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #eeeeee; background:#ffffff; }
.brand { font-size:19px; font-weight:600; letter-spacing:-0.3px; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:600; color:#141414; }
.navlinks span:first-child { border-bottom:2px solid #ff6458; padding-bottom:18px; }
.navicons { display:flex; gap:18px; font-size:12px; color:#626262; }
.hero { flex:0 0 auto; background:#f2f2f2; padding:26px 40px; display:flex; align-items:center;
justify-content:space-between; gap:32px; }
.hero-copy { max-width:420px; }
.hero-copy h1 { font-size:32px; font-weight:600; margin:0 0 8px; letter-spacing:-0.4px; line-height:1.15; }
.hero-copy p { font-size:14px; color:#626262; margin:0 0 14px; }
.hero-copy button { background:#ff6458; color:#fff; border:none; border-radius:4px; padding:12px 26px;
font-size:13px; font-weight:700; letter-spacing:0.2px; }
.hero-visual { width:220px; height:110px; border-radius:8px; background:linear-gradient(140deg,#ffa29b,#ff6458 60%,#cc5046); flex:0 0 auto; }
.rowlabel { flex:0 0 auto; padding:16px 40px 10px; font-size:13px; font-weight:600; color:#141414; }
.products { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:0 40px 14px; min-height:0; }
.card { display:flex; flex-direction:column; gap:8px; }
.imgwrap { position:relative; flex:1; min-height:0; border-radius:0; overflow:hidden; }
.badge { position:absolute; top:12px; left:12px; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:0.5px; padding:4px 8px; border-radius:4px; color:#fff; z-index:2; }
.badge.sale { background:#ff6458; }
.badge.new { background:#141414; }
.badge.bestseller { background:#e6b94f; color:#141414; }
.p1 .imgwrap { background:linear-gradient(150deg,#e7dcc9,#c8a97e); }
.p2 .imgwrap { background:linear-gradient(150deg,#d9d2c4,#8f8577); }
.p3 .imgwrap { background:linear-gradient(150deg,#e3ded3,#a99c86); }
.cardmeta .name { font-size:15px; font-weight:600; margin:0 0 3px; }
.cardmeta .desc { font-size:12px; color:#828282; margin:0 0 5px; }
.cardmeta .pricerow { display:flex; align-items:center; gap:8px; }
.cardmeta .price { font-size:15px; font-weight:600; color:#141414; }
.cardmeta .price-sale { color:#ff6458; }
.cardmeta .price-orig { font-size:12px; color:#a7a7a7; text-decoration:line-through; }
.stock { display:flex; align-items:center; gap:5px; font-size:11px; color:#626262; margin-top:2px; }
.stock .dot { width:7px; height:7px; border-radius:999px; background:#3cb064; }
footer { flex:0 0 auto; background:#2e2e2e; color:#ffffff; padding:14px 40px; display:flex;
justify-content:space-between; align-items:center; font-size:11px; }
footer .flinks span { margin-left:18px; opacity:0.7; }
</style></head>
<body>
<nav>
<p class="brand">Article</p>
<div class="navlinks"><span>Living</span><span>Bedroom</span><span>Dining</span><span>Outdoor</span><span>Office</span></div>
<div class="navicons"><span>Account</span><span>Cart (0)</span></div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Furniture for real life</h1>
<p>Modern, well-made pieces designed to last — shipped straight to your door.</p>
<button>Shop Living Room</button>
</div>
<div class="hero-visual"></div>
</section>
<p class="rowlabel">New in Living</p>
<section class="products">
<div class="card p1">
<div class="imgwrap"><span class="badge sale">Sale</span></div>
<div class="cardmeta">
<p class="name">Sven Sofa</p>
<p class="desc">Cognac leather · Walnut legs</p>
<div class="pricerow"><span class="price price-sale">$1,899</span><span class="price-orig">$2,199</span></div>
<div class="stock"><span class="dot"></span>In stock</div>
</div>
</div>
<div class="card p2">
<div class="imgwrap"><span class="badge new">New</span></div>
<div class="cardmeta">
<p class="name">Ceni Lounge Chair</p>
<p class="desc">Boucle · Natural oak</p>
<div class="pricerow"><span class="price">$949</span></div>
<div class="stock"><span class="dot"></span>In stock</div>
</div>
</div>
<div class="card p3">
<div class="imgwrap"><span class="badge bestseller">Bestseller</span></div>
<div class="cardmeta">
<p class="name">Timo Coffee Table</p>
<p class="desc">Solid ash · Round top</p>
<div class="pricerow"><span class="price">$629</span></div>
<div class="stock"><span class="dot"></span>In stock</div>
</div>
</div>
</section>
<footer>
<span>© Article</span>
<span class="flinks"><span>Shipping</span><span>Returns</span><span>Trade Program</span><span>Careers</span></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #efeae6; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #efeae6; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.33; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #9b9b9b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; letter-spacing: 0.5px; background: #304038; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; letter-spacing: 0.5px; background: transparent; color: #304038;
border: 1px solid #304038; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fdfcfc; color: #272727;
border: 1px solid #bdb9b6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9b9b9b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.27; letter-spacing: 1.2px; background: #bfccb8; color: #304038;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#efeae6; color:#272727; box-sizing:border-box;
font-family:-apple-system, 'Helvetica Neue', Arial, Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#fdfcfc; display:flex; align-items:center; justify-content:space-between;
padding:0 34px; border-bottom:1px solid #eaeaea; }
.brand { font-size:17px; font-weight:500; letter-spacing:0.3px; margin:0; color:#304038; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:13px; letter-spacing:0.3px; color:#272727; }
.icons { display:flex; gap:14px; font-size:13px; color:#304038; }
main { display:flex; height:576px; }
.stage { width:320px; background:#efeae6; display:flex; align-items:center; justify-content:center; }
.ring { width:130px; height:130px; border-radius:999px; border:16px solid; border-color:#d9a441 #b26118 #d9a441 #ffd196;
box-shadow:0 20px 40px rgba(178,97,24,0.2); position:relative; }
.ring::after { content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:16px; height:16px;
background:#fff; border-radius:999px; box-shadow:0 0 0 3px #ffd196, 0 4px 10px rgba(0,0,0,0.2); }
.info { flex:1; padding:30px 36px; display:flex; flex-direction:column; gap:12px; }
.badges { display:flex; gap:8px; }
.badge { font-size:11px; font-weight:500; letter-spacing:1.2px; text-transform:uppercase; border-radius:999px; padding:4px 10px; }
.b-mat { background:#bfccb8; color:#304038; }
.b-gold { background:#ffd196; color:#b26118; }
h1 { font-size:26px; font-weight:400; margin:0; letter-spacing:-0.3px; }
.sub { font-size:14px; color:#5f6a66; margin:0; max-width:440px; line-height:1.5; }
.price { font-size:18px; color:#b26118; font-weight:400; margin-top:2px; }
.size-row { display:flex; gap:8px; margin-top:6px; }
.size { width:40px; height:40px; border:1px solid #e8e8e8; border-radius:4px; display:flex; align-items:center;
justify-content:center; font-size:13px; color:#272727; }
.size.on { background:#304038; color:#fff; border-color:#304038; }
.qty { display:flex; align-items:center; gap:0; border:1px solid #e8e8e8; border-radius:4px; width:120px; height:40px; margin-top:6px; }
.qty div { flex:1; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:500; }
.actions { display:flex; gap:12px; margin-top:8px; }
.btn-primary { background:#304038; color:#fff; border-radius:8px; padding:14px 32px; height:48px;
display:flex; align-items:center; font-size:14px; font-weight:500; letter-spacing:0.5px; }
.btn-secondary { background:transparent; border:1px solid #304038; color:#304038; border-radius:8px; padding:13px 24px;
height:48px; display:flex; align-items:center; font-size:14px; font-weight:500; }
.sustain { margin-top:auto; background:#e6f7f4; border-top:1px solid #739487; border-bottom:1px solid #739487;
padding:10px 0; font-size:11px; font-weight:500; letter-spacing:1.2px; text-transform:uppercase; color:#304038;
text-align:center; }
</style></head>
<body>
<nav>
<p class="brand">Aurate New York</p>
<div class="navlinks"><span>Rings</span><span>Necklaces</span><span>Earrings</span><span>Gifts</span></div>
<div class="icons"><span>Search</span><span>Account</span><span>Bag (0)</span></div>
</nav>
<main>
<div class="stage"><div class="ring"></div></div>
<div class="info">
<div class="badges"><span class="badge b-mat">Recycled Gold</span><span class="badge b-gold">14K</span></div>
<h1>The Bezel Solitaire Ring</h1>
<p class="sub">A single lab-grown diamond set in a hand-finished bezel — cast from 100% recycled 14K gold.</p>
<p class="price">$495</p>
<div class="size-row">
<div class="size">5</div><div class="size on">6</div><div class="size">7</div><div class="size">8</div>
</div>
<div class="qty"><div>–</div><div>1</div><div>+</div></div>
<div class="actions">
<div class="btn-primary">Add to Bag</div>
<div class="btn-secondary">Save for Later</div>
</div>
</div>
</main>
<div class="sustain">100% Recycled Gold · Lab-Grown Diamonds · Carbon Neutral Shipping</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1D1D1B;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1D1D1B;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.1px; margin: 0; color: #1D1D1B; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0; margin: 0; color: #7C7670; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #E8614F; color: #FFFFFF;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #FFFFFF; color: #1D1D1B;
border: 1px solid #E8614F; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: 0; background: #FFFFFF; color: #1D1D1B;
border: 1px solid #E0DAD2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7C7670; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #F3EFE8; color: #3A3632;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FAF8F4; color:#1D1D1B; box-sizing:border-box;
font-family:'Matter','DM Sans',Inter,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; background:#FFFFFF; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #E0DAD2; }
.brand { font-family:'Tiempos Display',Georgia,serif; font-size:20px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:24px; font-size:15px; color:#1D1D1B; }
.navcta { background:#E8614F; color:#fff; border:none; border-radius:8px; padding:12px 22px; font-size:14px; font-weight:600; }
main { display:flex; height:calc(640px - 72px); }
.gallery { width:38%; background:#F3EFE8; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.packet { width:120px; height:150px; border-radius:10px; background:linear-gradient(160deg,#E8614F,#F4B8AE); position:relative; box-shadow:0 10px 24px rgba(0,0,0,0.08); }
.packet::after { content:'Sarah'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-family:'Tiempos Display',serif; font-size:18px; color:#fff; font-weight:700; }
.caption { font-size:12px; color:#7C7670; }
.details { width:62%; padding:30px 36px; }
.tag { display:inline-block; background:#F3EFE8; color:#3A3632; font-size:11px; font-weight:700; letter-spacing:0.8px;
text-transform:uppercase; border-radius:9999px; padding:4px 10px; margin-right:6px; margin-bottom:12px; }
h1 { font-family:'Tiempos Display',Georgia,serif; font-size:32px; font-weight:700; letter-spacing:-0.3px; margin:0 0 8px; }
.price { font-size:18px; font-weight:600; margin:0 0 14px; }
.desc { font-size:15px; line-height:1.6; color:#3A3632; margin:0 0 18px; max-width:420px; }
.benefit { display:inline-block; background:#E8F2EC; color:#4A7C59; font-size:12px; border-radius:9999px; padding:4px 12px; margin-right:6px; }
.buyrow { display:flex; gap:12px; margin-top:20px; }
.btn-primary { background:#E8614F; color:#fff; border:none; border-radius:8px; padding:14px 28px; font-size:16px; font-weight:600; letter-spacing:0.3px; }
.btn-secondary { background:#fff; color:#1D1D1B; border:1.5px solid #1D1D1B; border-radius:8px; padding:13px 27px; font-size:16px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Care OF</p>
<div class="navlinks"><span>How it works</span><span>Ingredients</span><span>Reviews</span></div>
<button class="navcta">Take the quiz</button>
</nav>
<main>
<div class="gallery">
<div class="packet"></div>
<span class="caption">Your daily pack, personalized</span>
</div>
<div class="details">
<span class="tag">Magnesium</span><span class="tag">Vitamin D3</span>
<h1>Your Personalized Daily Packs</h1>
<p class="price">$54 / month · 30-day supply</p>
<p class="desc">Built from your quiz results — sleep, stress, diet, and goals — into one foil packet with your name on it.</p>
<span class="benefit">Supports sleep</span><span class="benefit">Immune support</span>
<div class="buyrow">
<button class="btn-primary">Retake the Quiz</button>
<button class="btn-secondary">See the Science</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #222222; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fafafa; color: #222222;
border: 1px solid #222222; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #222222;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cc2127; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:flex; flex-direction:column; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#272727; box-sizing:border-box;
font-family:Arial,Helvetica,'Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
nav { height:46px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #e1e1e1; }
.brand { font-size:16px; font-weight:700; color:#222222; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:14px; color:#222222; }
.navlinks span.cur { border-bottom:2px solid #cc2127; padding-bottom:2px; }
.hero { padding:34px 40px 20px; max-width:600px; }
.hero .kicker { font-size:12px; font-weight:700; color:#cc2127; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }
.hero h1 { font-size:28px; font-weight:700; color:#222222; margin:0 0 12px; line-height:1.3; letter-spacing:-0.5px; }
.hero p { font-size:16px; color:#272727; line-height:1.6; margin:0 0 16px; }
.btn { display:inline-block; border:1px solid #222222; color:#222222; font-size:14px; font-weight:600;
padding:9px 20px; text-transform:uppercase; letter-spacing:0.5px; }
.divider { height:1px; background:#e1e1e1; margin:6px 40px 0; }
.section { padding:20px 40px 0; }
.section h2 { font-size:18px; font-weight:600; color:#222222; margin:0 0 14px; }
.row { display:flex; gap:0; }
.col { flex:1; padding-right:30px; border-right:1px solid #eeeeee; }
.col:last-child { border-right:none; padding-right:0; padding-left:30px; }
.col .t { font-size:16px; font-weight:600; color:#222222; margin:0 0 4px; }
.col .a { font-size:13px; color:#aaaaaa; margin:0 0 6px; }
.col .p { font-size:14px; font-weight:700; color:#cc2127; }
.swatch { width:100%; height:64px; background:#eeeeee; margin-bottom:10px; }
.sw1 { background:linear-gradient(120deg,#222222,#555555); }
.sw2 { background:linear-gradient(120deg,#cc2127,#7a1216); }
.sw3 { background:linear-gradient(120deg,#8a8a8a,#dddddd); }
footer { margin-top:auto; flex-shrink:0; border-top:1px solid #e1e1e1; padding:14px 40px; display:flex;
align-items:center; justify-content:space-between; }
.foolinks { display:flex; gap:16px; font-size:12px; color:#272727; }
.soc { display:flex; gap:8px; }
.soc span { width:16px; height:16px; border-radius:2px; display:inline-block; }
.fb{background:#3b5998;} .tw{background:#55acee;} .ig{background:#e4405f;} .yt{background:#cc2127;}
</style></head>
<body>
<nav>
<div class="brand">Grolier Poetry Book Shop</div>
<div class="navlinks"><span class="cur">Home</span><span>About</span><span>Events</span><span>Shop</span><span>Contact</span></div>
</nav>
<div class="hero">
<div class="kicker">Plympton Street, Cambridge · Since 1927</div>
<h1>America's oldest bookshop devoted entirely to poetry.</h1>
<p>A narrow storefront, a dense shelf, and the belief that a single line of verse is worth more than a sale banner.</p>
<span class="btn">View Current Stock</span>
</div>
<div class="divider"></div>
<div class="section">
<h2>New Arrivals</h2>
<div class="row">
<div class="col"><div class="swatch sw1"></div><div class="t">Winter Correspondence</div><div class="a">Reyes, M.</div><div class="p">$18.00</div></div>
<div class="col"><div class="swatch sw2"></div><div class="t">The Quiet Register</div><div class="a">Okafor, T.</div><div class="p">$16.00</div></div>
<div class="col"><div class="swatch sw3"></div><div class="t">Field Notes & Ash</div><div class="a">Lindqvist, A.</div><div class="p">$20.00</div></div>
</div>
</div>
<footer>
<div class="foolinks"><span>Store Hours</span><span>Readings & Events</span><span>Mailing List</span><span>Press</span></div>
<div class="soc"><span class="fb"></span><span class="tw"></span><span class="ig"></span><span class="yt"></span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfbfb; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfbfb; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6e6e6e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #015845; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fbfbfb; color: #015845;
border: 1px solid #015845; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c3c3c3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e6e6e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.33; letter-spacing: 0.2px; background: #b52a1c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbfbfb; color:#1a1a1a; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
.announce { background:#015845; color:#fff; height:32px; display:flex; align-items:center; justify-content:center;
font-size:12px; font-weight:500; letter-spacing:0.2px; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #eeeeee; }
.logo { font-size:19px; font-weight:600; color:#015845; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; }
.icons { display:flex; gap:14px; font-size:14px; color:#3d3d3d; }
.crumb { padding:12px 32px 0; font-size:13px; color:#6e6e6e; }
.crumb b { color:#1a1a1a; font-weight:600; }
main { display:flex; gap:32px; padding:16px 32px 0; height:400px; }
.shot { width:320px; background:#f4f4f2; border-radius:4px; position:relative; overflow:hidden;
display:flex; align-items:flex-end; justify-content:center; }
.shot::before { content:''; position:absolute; inset:0;
background: radial-gradient(circle at 50% 15%, rgba(1,88,69,0.10), transparent 55%), linear-gradient(180deg,#fff,#ebe4d6 90%); }
.urn { position:relative; width:150px; z-index:1; margin-bottom:18px; }
.urn .lip { width:150px; height:14px; background:#7a8c74; border-radius:4px; }
.urn .neck { width:100px; height:18px; margin:0 auto; background:#647a5e; }
.urn .belly { width:150px; height:100px; margin-top:-2px; background:linear-gradient(180deg,#8a9c7f,#5a6e52);
border-radius:16px 16px 30px 30px; }
.urn .base { width:96px; height:14px; margin:0 auto; background:#4a5a44; border-radius:0 0 4px 4px; }
.badge-best { position:absolute; top:12px; left:12px; background:#d4c5a9; color:#1a1a1a; font-size:12px;
font-weight:500; letter-spacing:0.2px; border-radius:4px; padding:4px 8px; z-index:2; }
.thumbstrip { position:absolute; bottom:10px; right:10px; display:flex; gap:6px; z-index:2; }
.thumbstrip div { width:38px; height:38px; border-radius:4px; background:#d4c5a9; border:1px solid #e0e0e0; }
.thumbstrip div:nth-child(1) { background:#5a6e52; }
.thumbstrip div:nth-child(2) { background:#d4c5a9; }
.thumbstrip div:nth-child(3) { background:#b86f4a; }
.info { flex:1; display:flex; flex-direction:column; min-width:0; }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase; color:#6e6e6e; margin-bottom:8px; }
.name { font-size:24px; font-weight:600; letter-spacing:-0.2px; line-height:1.25; margin:0 0 8px; max-width:420px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.price { font-size:20px; font-weight:600; }
.price-was { font-size:14px; color:#6e6e6e; text-decoration:line-through; }
.field { margin-bottom:16px; }
.field .lbl { font-size:14px; font-weight:600; margin-bottom:10px; }
.finishes { display:flex; gap:12px; align-items:center; }
.swatch { width:28px; height:28px; border-radius:9999px; border:2px solid #e0e0e0; }
.swatch.active { border:2px solid #015845; box-shadow:0 0 0 2px #fbfbfb, 0 0 0 4px #015845; }
.sw-verde { background:#5a6e52; }
.sw-limestone { background:#d4c5a9; }
.sw-bronze { background:#8a5a2e; }
.finish-name { font-size:13px; color:#3d3d3d; margin-left:6px; }
.desc { font-size:14px; color:#3d3d3d; line-height:1.5; margin-bottom:16px; max-width:420px; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.qty { display:flex; align-items:center; border:1px solid #e0e0e0; border-radius:4px; height:48px; width:96px;
justify-content:space-between; padding:0 12px; }
.qty span { color:#015845; font-weight:700; }
.btn-add { flex:1; background:#015845; color:#fff; border:none; border-radius:4px; height:52px;
font-size:15px; font-weight:600; letter-spacing:0.3px; }
footer { background:#1a1a1a; color:#d9d9d9; padding:16px 32px; display:flex; justify-content:space-between;
align-items:center; font-size:12px; }
footer .fl span { margin-left:20px; }
</style></head>
<body>
<div class="announce">Complimentary crating on all fountains & large urns</div>
<nav>
<div class="logo">Campania International</div>
<div class="navlinks"><span>Planters</span><span>Fountains</span><span>Statuary</span><span>Garden Décor</span></div>
<div class="icons">⌕ ♡ 🛒</div>
</nav>
<div class="crumb">Home / Planters / Large Urns / <b>Bellamy Cast Stone Urn</b></div>
<main>
<div class="shot">
<span class="badge-best">Bestseller</span>
<div class="urn">
<div class="lip"></div>
<div class="neck"></div>
<div class="belly"></div>
<div class="base"></div>
</div>
<div class="thumbstrip"><div></div><div></div><div></div></div>
</div>
<div class="info">
<div class="eyebrow">Estate Collection</div>
<h1 class="name">Bellamy Cast Stone Urn, Large</h1>
<div class="price-row"><span class="price">$428.00</span><span class="price-was">$495.00</span></div>
<p class="desc">Hand-cast in a weather-resistant stone blend and finished to weather gracefully outdoors for decades. 28"H × 24"W, drainage hole included.</p>
<div class="field">
<div class="lbl">Finish — Verde</div>
<div class="finishes">
<span class="swatch sw-verde active"></span>
<span class="swatch sw-limestone"></span>
<span class="swatch sw-bronze"></span>
<span class="finish-name">Aged Limestone · Copper Bronze available</span>
</div>
</div>
<div class="cta-row">
<div class="qty"><span>–</span>1<span>+</span></div>
<button class="btn-add">Add to Cart</button>
</div>
</div>
</main>
<footer>
<span>© Campania International</span>
<div class="fl"><span>Shipping & Crating</span><span>Care Guide</span><span>Trade Program</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4f00; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4f00; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4f00; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4f00; color: #f5f5f5;
border: 1px solid #fd6a27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e45327; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fffefb; color:#201515; box-sizing:border-box;
font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { position:relative; width:960px; height:640px; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #eceae3; }
.brand { font-size:19px; font-weight:700; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#605d52; }
.navlinks span.active { color:#201515; font-weight:600; }
.headerbtns { display:flex; gap:10px; align-items:center; }
.signin { font-size:14px; color:#605d52; font-weight:600; }
.signup { background:#ff4f00; color:#fffefb; border-radius:18px; padding:6px 16px; height:36px;
display:flex; align-items:center; font-size:14px; font-weight:600; }
.hero { padding:30px 40px 8px; text-align:center; }
.hero h1 { font-family:"Degular Display", Georgia, serif; font-size:38px; font-weight:500; line-height:1.05;
margin:0 0 10px; letter-spacing:-0.5px; }
.hero p { font-size:15px; color:#605d52; margin:0; }
.flowzone { position:relative; margin:22px 40px 0; height:296px; background:#f8f4f0; border-radius:8px;
border:1px solid #eceae3; padding:26px 32px; }
.flowrow { display:flex; align-items:center; gap:0; }
.node { flex:1; background:#fffefb; border:1px solid #eceae3; border-radius:8px; padding:14px 16px;
display:flex; flex-direction:column; gap:6px; }
.node .kind { font-size:11px; font-weight:600; color:#c5c0b1; text-transform:uppercase; letter-spacing:0.06em; }
.node .icon { width:32px; height:32px; border-radius:8px; margin-bottom:2px; }
.n1 .icon { background:linear-gradient(135deg,#ffb37a,#ff4f00); }
.n2 .icon { background:linear-gradient(135deg,#8fc7ff,#3f6fe0); }
.n3 .icon { background:linear-gradient(135deg,#9adfc4,#1fa878); }
.n4 .icon { background:linear-gradient(135deg,#e0a3ff,#a44fd6); }
.node .title { font-size:14px; font-weight:600; color:#201515; }
.node .sub { font-size:12px; color:#605d52; }
.connector { width:36px; height:2px; background:#c5c0b1; position:relative; flex:0 0 36px; }
.connector::after { content:''; position:absolute; right:-1px; top:-3px; width:0; height:0;
border-left:6px solid #c5c0b1; border-top:4px solid transparent; border-bottom:4px solid transparent; }
.flowlabel { position:absolute; top:-11px; left:32px; background:#ff4f00; color:#fffefb; font-size:11px;
font-weight:600; padding:3px 10px; border-radius:4px; }
.statsrow { display:flex; gap:18px; margin-top:20px; }
.stat { flex:1; text-align:center; }
.stat .num { font-family:"Degular Display", Georgia, serif; font-size:24px; font-weight:500; color:#201515; }
.stat .lbl { font-size:12px; color:#605d52; margin-top:2px; }
.footerbar { position:absolute; left:0; right:0; bottom:0; height:70px; border-top:1px solid #eceae3;
display:flex; align-items:center; justify-content:center; gap:14px; }
.cta1 { background:#ff4f00; color:#fffefb; border-radius:4px; padding:12px 24px; height:48px;
display:flex; align-items:center; font-size:18px; font-weight:600; }
.cta2 { background:#201515; color:#fffefb; border-radius:4px; padding:12px 24px; height:48px;
display:flex; align-items:center; font-size:18px; font-weight:600; }
</style></head>
<body>
<div class="app">
<nav>
<span class="brand">Zapier</span>
<div class="navlinks">
<span class="active">Product</span>
<span>Solutions</span>
<span>Pricing</span>
<span>Resources</span>
</div>
<div class="headerbtns">
<span class="signin">Sign in</span>
<span class="signup">Sign up</span>
</div>
</nav>
<div class="hero">
<h1>Automate the work between your apps</h1>
<p>Connect your tools, move your data, and let the workflow run itself.</p>
</div>
<div class="flowzone">
<span class="flowlabel">Live workflow</span>
<div class="flowrow">
<div class="node n1"><span class="kind">Trigger</span><div class="icon"></div><span class="title">New form submission</span><span class="sub">Forms</span></div>
<div class="connector"></div>
<div class="node n2"><span class="kind">Action</span><div class="icon"></div><span class="title">Create record</span><span class="sub">Database</span></div>
<div class="connector"></div>
<div class="node n3"><span class="kind">Action</span><div class="icon"></div><span class="title">Send notification</span><span class="sub">Messaging</span></div>
<div class="connector"></div>
<div class="node n4"><span class="kind">Action</span><div class="icon"></div><span class="title">Update spreadsheet</span><span class="sub">Sheets</span></div>
</div>
<div class="statsrow">
<div class="stat"><div class="num">6,000+</div><div class="lbl">connected apps</div></div>
<div class="stat"><div class="num">1.2M</div><div class="lbl">tasks run daily</div></div>
<div class="stat"><div class="num">0</div><div class="lbl">lines of code</div></div>
</div>
</div>
<div class="footerbar">
<span class="cta1">Start free with Zapier</span>
<span class="cta2">See how it works</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #303030;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #303030;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #303030; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.38; margin: 0; color: #919191; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; background: #485bad; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; background: #fafafa; color: #485bad;
border: 1px solid #485bad; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f7f7f7; color: #303030;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #919191; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.2px; background: #168804; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; color:#303030; font-family:Inter,-apple-system,'Segoe UI',sans-serif; }
*{box-sizing:border-box;}
.promo{height:32px;background:#f4270c;color:#fff;font-size:12px;font-weight:600;text-align:center;line-height:32px;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e2e2e2;}
.logo{font-size:18px;font-weight:700;color:#485bad;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;}
.hero{padding:24px 32px;}
.hero h1{font-size:24px;font-weight:700;margin:0 0 6px;}
.hero p{font-size:14px;color:#5e5e5e;margin:0;}
.filters{display:flex;gap:8px;padding:0 32px 12px;}
.chip{font-size:12px;background:#f7f7f7;border:1px solid #e2e2e2;border-radius:4px;padding:5px 12px;}
.chip.active{background:#485bad;color:#fff;border-color:#485bad;}
.grid{display:flex;gap:14px;padding:0 32px;}
.card{width:200px;background:#fff;border:1px solid #e2e2e2;border-radius:8px;padding:12px;}
.thumb{height:78px;background:#ededed;border-radius:4px;margin-bottom:8px;}
.ptitle{font-size:13px;font-weight:600;}
.pmeta{font-size:11px;color:#919191;margin-top:2px;}
.pprice{font-size:16px;font-weight:600;margin-top:4px;}
.badges{display:flex;gap:6px;margin-top:6px;}
.badge{font-size:9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:2px 6px;border-radius:4px;color:#fff;}
.eff{background:#168804;}
.sale{background:#f4270c;}
.footer{position:absolute;bottom:0;left:0;right:0;height:52px;background:#303030;color:#c2c9cf;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="promo">SEASON SALE: UP TO 18% OFF MINI-SPLIT SYSTEMS</div>
<div class="nav">
<div class="logo">Pioneer</div>
<div class="navlinks"><div>Products</div><div>Where to Buy</div><div>Support</div><div>About</div></div>
</div>
<div class="hero">
<h1>Efficient heating and cooling, engineered.</h1>
<p>Mini-splits, portable ACs, and heat pumps rated for real performance.</p>
</div>
<div class="filters">
<div class="chip active">9,000-36,000 BTU</div><div class="chip">Single Zone</div><div class="chip">Heat Pump</div><div class="chip">Cooling Only</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#485bad,#303030)"></div><div class="ptitle">WYS012-A Mini-Split 12k</div><div class="pmeta">SEER2 20.6</div><div class="pprice">$899</div><div class="badges"><span class="badge eff">Energy Star</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#303030,#485bad)"></div><div class="ptitle">WYS024-A Mini-Split 24k</div><div class="pmeta">SEER2 18.0</div><div class="pprice">$1,499</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#929457,#303030)"></div><div class="ptitle">Portable AC 10,000 BTU</div><div class="pmeta">EER 11.2</div><div class="pprice">$389</div><div class="badges"><span class="badge sale">-18%</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#868f89,#485bad)"></div><div class="ptitle">Heat Pump System 18k</div><div class="pmeta">HSPF2 10.1</div><div class="pprice">$1,299</div></div>
</div>
<div class="footer"><span>© Pioneer Heating & Cooling</span><span>Compare Models · Financing</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f3f3; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f3f3; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #3f464d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #cc6633; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: transparent; color: #121212;
border: 1px solid #cc6633; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f3f3f3; color: #121212;
border: 1px solid #bbbbbb; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #3f464d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #786f51; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f3f3f3; font-family:'Assistant',Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#101820;}
.logo{font-size:19px;font-weight:600;color:#dedede;letter-spacing:.3px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;color:#c7c4b9;}
.cta{border:1px solid #cc6633;color:#cc6633;font-size:12px;font-weight:600;padding:9px 18px;border-radius:6px;}
.hero{height:250px;display:flex;background:#dedede;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 34px;}
.herotext h1{font-size:30px;font-weight:600;margin:0 0 10px;line-height:1.25;color:#121212;}
.herotext p{font-size:13px;color:#3f464d;margin:0 0 16px;max-width:290px;}
.btn{display:inline-block;background:#cc6633;color:#fff;font-size:13px;font-weight:600;padding:12px 24px;border-radius:6px;width:fit-content;}
.heroimg{width:54%;position:relative;overflow:hidden;background:linear-gradient(200deg,#242833,#101820 70%);}
.frame{position:absolute;bottom:40px;left:70px;width:280px;height:5px;background:#cc6633;transform:rotate(-8deg);}
.frame2{position:absolute;bottom:60px;left:90px;width:200px;height:5px;background:#786f51;transform:rotate(18deg);}
.weld{position:absolute;bottom:96px;left:150px;width:14px;height:14px;border-radius:50%;background:#334fb4;}
.sec{padding:20px 34px 0;}
.sectitle{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#3f464d;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border:1px solid #c7c4b9;border-radius:4px;padding:10px;}
.thumb{height:96px;border-radius:2px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;}
.pprice{font-size:13px;font-weight:700;color:#cc6633;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Moots</div>
<div class="navlinks"><span>Road</span><span>Gravel</span><span>Mountain</span><span>Custom</span></div>
<div class="cta">Build Yours</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Hand-welded titanium, born in Colorado.</h1>
<p>Frames built by the same hands that will answer your call about geometry.</p>
<div class="btn">Explore Frames</div>
</div>
<div class="heroimg"><div class="frame"></div><div class="frame2"></div><div class="weld"></div></div>
</div>
<div class="sec">
<div class="sectitle">The Frame Collection</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#242833,#cc6633)"></div><div class="pname">Vamoots RSL</div><div class="pprice">$4,995</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#101820,#786f51)"></div><div class="pname">Routt 45 Gravel</div><div class="pprice">$4,395</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#334fb4,#242833)"></div><div class="pname">Baxter Mountain</div><div class="pprice">$4,695</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#786f51,#101820)"></div><div class="pname">Psychlo X Frameset</div><div class="pprice">$3,895</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0e0e0e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0e0e0e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #0e0e0e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ff9900; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #1b254f;
border: 1px solid #ff9900; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #0e0e0e;
border: 1px solid #c3c3c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #1ea0c3; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Montserrat,-apple-system,'Segoe UI',sans-serif; color:#1e1f26; }
*{box-sizing:border-box;}
.nav{height:72px;background:#1b254f;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:20px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#fff;}
.navlinks div:first-child{color:#ff9900;}
.search{width:200px;height:40px;border-radius:9999px;background:#fff;display:flex;align-items:center;padding:0 18px;font-size:12px;color:#555;}
.hero{height:210px;background:#1b254f;display:flex;align-items:center;padding:0 30px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:60px;top:35px;width:300px;height:6px;background:#ff9900;transform:rotate(-8deg);box-shadow:0 26px 0 #2a3a6e,0 52px 0 #ff9900,0 78px 0 #2a3a6e;}
.herotext h1{font-size:32px;font-weight:700;color:#fff;margin:0 0 10px;}
.herotext p{font-size:14px;color:#c9cee0;margin:0 0 16px;max-width:360px;}
.btn{display:inline-block;background:#ff9900;color:#fff;font-size:15px;font-weight:600;letter-spacing:.3px;padding:12px 24px;border-radius:8px;}
.secTitle{font-size:22px;font-weight:600;padding:16px 30px 10px;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:200px;background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,0.08);padding:0 0 10px;}
.thumb{height:100px;background:#f5f5f5;border-radius:8px 8px 0 0;position:relative;margin-bottom:8px;}
.badge{position:absolute;top:8px;left:8px;background:#ff9900;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.badgeteal{position:absolute;top:8px;right:8px;background:#1ea0c3;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.ctitle{font-size:16px;font-weight:600;margin:0 12px 4px;}
.cprice{font-size:16px;color:#1e1f26;margin:0 12px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#1b254f;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:11px;color:#7f7f7f;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Sit Strings</div>
<div class="navlinks"><div>Electric</div><div>Acoustic</div><div>Bass</div></div>
<div class="search">Search strings...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Strings that hold the note.</h1>
<p>Precision-wound guitar and bass strings built for tone that stays in tune.</p>
<div class="btn">Shop Strings</div>
</div>
</div>
<div class="secTitle">Featured Sets</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">Sale</div></div><div class="ctitle">Power Wound Electric Set</div><div class="cprice">$8.99</div></div>
<div class="card"><div class="thumb"><div class="badgeteal">New</div></div><div class="ctitle">Phosphor Bronze Acoustic Set</div><div class="cprice">$11.99</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Roundwound Bass Strings</div><div class="cprice">$16.99</div></div>
</div>
<div class="footer"><span>© Sit Strings</span><span>Warranty · Find a Retailer</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f3f3; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f3f3; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #334fb4; color: #fffff0;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #f3f3f3; color: #222222;
border: 1px solid #334fb4; border-radius: 6px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f3f3f3; color: #222222;
border: 1px solid #bfbfbf; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #dc4144; color: #f3f3f3;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f3f3f3; color:#222; font-family:'Rubik',Arial,sans-serif;
}
*{box-sizing:border-box;}
.nav{height:56px;background:#222222;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{color:#f3f3f3;font-family:'Roboto Mono','Courier New',monospace;font-weight:700;font-size:16px;}
.logo b{color:#ff00ff;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;color:#f3f3f3;}
.navlinks span.active{color:#eb9e48;}
.hero{background:#242833;color:#fff;padding:30px;text-align:center;}
.hero h1{font-family:'Roboto Mono','Courier New',monospace;font-size:30px;font-weight:700;margin:0 0 10px;}
.hero p{font-size:14px;color:#cfd0d8;margin:0 0 16px;}
.ctas{display:flex;gap:10px;justify-content:center;}
.cta{background:#ff00ff;color:#fff;font-weight:600;font-size:15px;letter-spacing:.3px;padding:12px 26px;border-radius:6px;}
.cta2{background:#eb9e48;color:#222;font-weight:600;font-size:15px;padding:12px 26px;border-radius:6px;}
.section{padding:22px 30px;}
.tags{display:flex;gap:8px;margin-bottom:14px;}
.tag{background:#eb9e48;color:#222;font-family:'Roboto Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;padding:4px 12px;border-radius:9999px;}
.tag.active{background:#55dd99;}
.grid{display:flex;gap:16px;}
.card{flex:1;background:#fff;border-radius:6px;padding:10px;}
.card .img{aspect-ratio:1/1;height:100px;border-radius:6px;margin-bottom:8px;}
.g1{background:linear-gradient(135deg,#ff00ff,#4b0082);}
.g2{background:linear-gradient(135deg,#eb9e48,#dc4144);}
.g3{background:linear-gradient(135deg,#55dd99,#334fb4);}
.card h3{font-family:'Roboto Mono','Courier New',monospace;font-size:16px;font-weight:600;margin:0 0 4px;}
.card .price{font-size:14px;color:#888;}
.badge{display:inline-block;font-family:'Roboto Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:2px;margin-bottom:6px;color:#fff;}
.b1{background:#dc4144;}
.b2{background:#222;}
</style>
<div class="nav">
<div class="logo">Devolver Digital Store</div>
<div class="navlinks"><span class="active">Merch</span><span>Vinyl</span><span>Apparel</span><span>Bootleg</span></div>
</div>
<div class="hero">
<h1>Weird games. Weirder merch.</h1>
<p>Cassette tapes, vinyl scores, and t-shirts for games that don't take themselves seriously.</p>
<div class="ctas"><a class="cta">Shop Now</a><a class="cta2">New Drops</a></div>
</div>
<div class="section">
<div class="tags"><div class="tag active">T-Shirts</div><div class="tag">Vinyl</div><div class="tag">Posters</div><div class="tag">Bootleg</div></div>
<div class="grid">
<div class="card"><span class="badge b1">Sale</span><div class="img g1"></div><h3>SERIOUS SAM TEE</h3><div class="price">$24.00</div></div>
<div class="card"><div class="img g2"></div><h3>OST VINYL LP</h3><div class="price">$32.00</div></div>
<div class="card"><span class="badge b2">Sold Out</span><div class="img g3"></div><h3>ARCADE POSTER</h3><div class="price">$18.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.7; letter-spacing: 0.32px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.7; letter-spacing: 0.32px; margin: 0; color: #f0f0fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #000000; color: #ffffff;
border: none; border-radius: 32px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13.008px; font-weight: 700; line-height: 0.94; letter-spacing: 1.17px; background: #000000; color: #ffffff;
border: 1px solid #000000; border-radius: 32px;
padding: 18px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0.32px; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f0f0fa; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #000000; color: #ffffff;
border-radius: 32px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:Arial Narrow, Arial, Verdana, -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { position:absolute; top:0; left:0; right:0; z-index:5; height:auto; display:flex; align-items:center;
justify-content:space-between; padding:24px 32px; }
.brand { font-size:15px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; }
.navlinks { display:flex; gap:22px; font-size:11px; font-weight:400; letter-spacing:.96px; text-transform:uppercase; color:rgba(255,255,255,.85); }
.hero { position:relative; height:400px; overflow:hidden;
background:
radial-gradient(circle 260px at 78% 65%, rgba(255,150,60,.55), rgba(255,90,20,.25) 40%, transparent 70%),
linear-gradient(200deg, #050505 0%, #0a0a10 45%, #000 100%); }
.hero::before { content:''; position:absolute; left:76%; top:20%; width:6px; height:180px; border-radius:3px;
background:linear-gradient(180deg,#e8e8e8,#999 60%,#555); transform:rotate(14deg); }
.hero::after { content:''; position:absolute; left:74%; top:150px; width:60px; height:120px;
background:radial-gradient(ellipse at top, rgba(255,200,120,.9), rgba(255,120,30,.5) 50%, transparent 75%);
transform:rotate(14deg); filter:blur(2px); }
.herotext { position:absolute; left:32px; bottom:26px; z-index:2; max-width:440px; }
.herotext h1 { font-size:66px; font-weight:700; line-height:.95; letter-spacing:1.6px; text-transform:uppercase; margin:0 0 16px; }
.ghostbtn { background:transparent; border:1px solid #fff; color:#fff; border-radius:32px; padding:18px 24px;
font-size:12px; font-weight:700; letter-spacing:1.17px; text-transform:uppercase; }
.band { padding:26px 32px; text-align:center; }
.band h2 { font-size:40px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; line-height:1.2; margin:0 0 14px; }
.shopgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 32px 20px; background:#000; }
.shopcard { background:#fff; color:#000; border-radius:8px; padding:12px; }
.shopcard .thumb { height:60px; border-radius:6px; margin-bottom:8px; background:linear-gradient(135deg,#e0e0e8,#c9ccd1); }
.shopcard .name { font-size:12px; font-weight:400; }
.shopcard .price { font-size:12px; font-weight:700; margin-top:2px; }
footer { padding:14px 32px; display:flex; justify-content:space-between; font-size:11px; color:#fff; }
</style></head>
<body>
<div style="position:relative;">
<nav>
<div class="brand">SpaceX</div>
<div class="navlinks"><span>FALCON</span><span>DRAGON</span><span>STARSHIP</span><span>HUMAN SPACEFLIGHT</span></div>
</nav>
<div class="hero">
<div class="herotext">
<h1>STARSHIP</h1>
<button class="ghostbtn">WATCH LAUNCH</button>
</div>
</div>
</div>
<div class="band">
<h2>MAKING LIFE<br>MULTIPLANETARY</h2>
</div>
<div class="shopgrid">
<div class="shopcard"><div class="thumb"></div><div class="name">Starship Cap</div><div class="price">$35</div></div>
<div class="shopcard"><div class="thumb"></div><div class="name">Falcon Model</div><div class="price">$60</div></div>
<div class="shopcard"><div class="thumb"></div><div class="name">Mission Patch</div><div class="price">$15</div></div>
</div>
<footer>
<span>© SpaceX</span>
<span>SpaceX · SHOP · CAREERS · MISSION</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffb73e; color: #222222;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #0079c7;
border: 1px solid #ffb73e; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #fff5e4; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#333; }
*{box-sizing:border-box;}
.util{height:34px;background:#1a1a1a;color:#fff;font-size:12px;display:flex;align-items:center;padding:0 30px;justify-content:space-between;}
.util span{color:#ffb73e;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #dddddd;}
.logo{font-size:20px;font-weight:700;color:#222;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;color:#222;}
.navlinks .u{border-bottom:2px solid #0079c7;padding-bottom:20px;color:#0079c7;}
.searchbar{width:280px;height:38px;border:2px solid #dddddd;border-radius:4px;display:flex;align-items:center;padding:0 12px;font-size:13px;color:#999;}
.hero{height:150px;background:#1a1a1a;display:flex;align-items:center;padding:0 30px;justify-content:space-between;}
.h1{font-size:26px;font-weight:700;color:#fff;margin:0 0 6px;}
.hsub{font-size:14px;color:#ccc;max-width:440px;margin:0;}
.section{padding:18px 30px 0;}
.sectitle{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#222;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#fff;border:1px solid #dddddd;border-radius:4px;padding:12px;position:relative;}
.thumb{height:80px;background:#f5f7f9;border-radius:4px;margin-bottom:8px;}
.partno{font-family:Consolas,monospace;font-size:11px;color:#666;letter-spacing:0.3px;}
.ptitle{font-size:13px;font-weight:600;color:#222;margin-top:2px;}
.stock{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:4px;margin-top:6px;letter-spacing:0.3px;}
.instock{background:#e8f5e9;color:#2e7d32;}
.lowstock{background:#fff8e6;color:#e65c00;}
.pprice{font-size:16px;font-weight:700;color:#222;margin-top:6px;}
.addbtn{margin-top:8px;background:#ffb73e;color:#222;font-size:12px;font-weight:600;text-align:center;padding:8px 0;border-radius:4px;}
</style>
<div class="util"><div>1-800-555-0142 · Same-Day Shipping</div><div><span>Request a Quote</span></div></div>
<div class="nav">
<div class="logo">Quality Hydraulics</div>
<div class="navlinks"><div class="u">Fittings</div><div>Cylinders</div><div>Valves</div><div>Pneumatics</div></div>
<div class="searchbar">Search part number...</div>
</div>
<div class="hero">
<div><div class="h1">Hydraulic Parts, In Stock, Today</div><div class="hsub">Fittings, cylinders, and valves supplied at working-shop speed — no middlemen, no waiting.</div></div>
</div>
<div class="section">
<div class="sectitle">Popular Fittings</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0079c7,#1a1a1a);"></div><div class="partno">HYD-4302-B</div><div class="ptitle">JIC 37° Elbow Fitting</div><div class="stock instock">In Stock</div><div class="pprice">$12.40</div><div class="addbtn">Add to Cart</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffb73e,#1a1a1a);"></div><div class="partno">HYD-9910-C</div><div class="ptitle">2-Bolt Flange Cylinder</div><div class="stock lowstock">Low Stock</div><div class="pprice">$88.00</div><div class="addbtn">Add to Cart</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#666,#1a1a1a);"></div><div class="partno">HYD-1187-V</div><div class="ptitle">3-Way Directional Valve</div><div class="stock instock">In Stock</div><div class="pprice">$54.75</div><div class="addbtn">Add to Cart</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0079c7,#333);"></div><div class="partno">PNU-5502-Q</div><div class="ptitle">Quick-Connect Coupler</div><div class="stock instock">In Stock</div><div class="pprice">$9.95</div><div class="addbtn">Add to Cart</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f4f3; color: #041e29;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f4f3; color: #041e29;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #041e29; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #979492; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #041e29; color: #f6f4f3;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f6f4f3; color: #041e29;
border: 1px solid #041e29; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f6f4f3; color: #041e29;
border: 1px solid #babec0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #979492; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #a91f1f; color: #f6f4f3;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f4f3; font-family:'Muli',Arial,sans-serif; color:#041e29; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#041e29;}
.logo{font-family:'Cormorant',Georgia,serif;font-size:22px;font-weight:600;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#e8e6e4;}
.hero{height:250px;background:linear-gradient(120deg,#041e29,#0a2e3d);display:flex;align-items:center;padding:0 64px;justify-content:space-between;}
.herotext{width:420px;}
.herotext h1{font-family:'Cormorant',Georgia,serif;font-size:32px;font-weight:600;color:#fff;margin:0 0 14px;line-height:1.25;}
.herotext p{font-size:14px;color:#c7d3d8;margin:0 0 20px;max-width:340px;line-height:1.6;}
.btn{display:inline-block;background:#fff;color:#041e29;font-size:14px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:14px 28px;border-radius:9999px;width:fit-content;}
.drop{position:relative;width:200px;height:200px;}
.drop .bottle{position:absolute;left:70px;top:20px;width:60px;height:150px;border-radius:30px 30px 12px 12px;background:linear-gradient(160deg,#3ed660,#041e29);}
.sec{padding:24px 64px 0;}
.sectitle{font-family:'Cormorant',Georgia,serif;font-size:22px;font-weight:600;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:206px;background:#fff;border-radius:12px;padding:10px;}
.thumb{height:110px;border-radius:12px 12px 4px 4px;margin-bottom:10px;}
.pname{font-size:14px;font-weight:600;}
.pprice{font-size:13px;color:#a91f1f;font-weight:700;margin-top:4px;}
.tag{display:inline-block;background:#3ed660;color:#041e29;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:9999px;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Mara Beauty</div>
<div class="navlinks"><span>Skincare</span><span>Ingredients</span><span>Sets</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Ocean-grade skincare, calm efficacy.</h1>
<p>Algae-derived actives formulated for clinical results in a spa-quiet routine.</p>
<div class="btn">Shop Skincare</div>
</div>
<div class="drop"><div class="bottle"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3ed660,#041e29);"></div><div class="pname">Algae Retinol Serum</div><div class="pprice">$58</div><div class="tag">Certified Clean</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a91f1f,#f6f4f3);"></div><div class="pname">Universal Face Oil</div><div class="pprice">$52</div><div class="tag">Certified Clean</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1990c6,#f6f4f3);"></div><div class="pname">Algae Enzyme Cleanser</div><div class="pprice">$32</div><div class="tag">Certified Clean</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e92434; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e92434; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #f0979e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f0203e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e92434; color: #000000;
border: 1px solid #f0203e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e92434; color: #f5f5f5;
border: 1px solid #eb4553; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #f0979e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ea2336; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#141414; color:#F2EDED; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Poppins', 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px; display:flex; align-items:center; justify-content:center; }
/* full-bleed profile card is the hero */
.card { position:relative; width:400px; height:600px; border-radius:20px; overflow:hidden;
background:linear-gradient(160deg,#3a2a4a,#5a2f3a 45%,#7a4a3a 100%); box-shadow:0 12px 28px rgba(0,0,0,0.55); }
.story { position:absolute; top:12px; left:12px; right:12px; display:flex; gap:5px; z-index:3; }
.story .seg { flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,0.35); }
.story .seg.on { background:#FFFFFF; }
.scrim { position:absolute; left:0; right:0; bottom:0; height:56%; background:linear-gradient(to bottom, transparent, rgba(20,20,20,0.95)); z-index:1; }
.meta { position:absolute; left:20px; right:20px; bottom:98px; z-index:2; color:#fff; }
.namerow { display:flex; align-items:baseline; gap:8px; }
.namerow .name { font-size:26px; font-weight:700; letter-spacing:-0.3pt; }
.namerow .age { font-size:22px; font-weight:500; color:rgba(255,255,255,0.9); }
.namerow .verify { width:15px; height:15px; border-radius:50%; background:#1FB6FF; display:inline-block; }
.job { font-size:14px; font-weight:500; color:rgba(255,255,255,0.9); margin-top:4px; }
.distance { font-size:14px; color:rgba(255,255,255,0.75); margin-top:4px; display:flex; align-items:center; gap:6px; }
.distance .dot { width:7px; height:7px; border-radius:50%; background:#2ECC71; }
.chips { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.chip { font-size:12px; font-weight:600; color:#fff; background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.28); border-radius:999px; padding:5px 12px; }
.dock { position:absolute; left:0; right:0; bottom:20px; display:flex; justify-content:center; align-items:center; gap:16px; z-index:3; }
.circ { border-radius:50%; background:#1E1E1E; border:1px solid #322C2C; box-shadow:0 6px 16px rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; }
.circ.rewind { width:44px; height:44px; }
.circ.rewind .g { width:16px; height:16px; border:2px solid #D6A75B; border-radius:50%; border-right-color:transparent; }
.circ.pass { width:56px; height:56px; }
.circ.pass .g { width:20px; height:20px; position:relative; }
.circ.pass .g::before, .circ.pass .g::after { content:''; position:absolute; top:9px; left:0; width:20px; height:3px; background:#A89E9E; }
.circ.pass .g::before { transform:rotate(45deg); }
.circ.pass .g::after { transform:rotate(-45deg); }
.circ.superlike { width:48px; height:48px; }
.circ.superlike .g { width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:16px solid #1FB6FF; }
.circ.like { width:56px; height:56px; background:#F0203E; border:none; }
.circ.like .g { width:22px; height:20px; background:#fff;
clip-path:polygon(50% 100%, 8% 55%, 0% 32%, 8% 10%, 26% 0%, 50% 18%, 74% 0%, 92% 10%, 100% 32%, 92% 55%); }
.circ.boost { width:44px; height:44px; }
.circ.boost .g { width:14px; height:20px; background:#B36BD8; clip-path:polygon(60% 0, 0 55%, 40% 55%, 20% 100%, 100% 40%, 55% 40%); }
.side { position:absolute; top:26px; left:26px; z-index:4; font-size:22px; font-weight:800; color:#F0203E; letter-spacing:-0.4pt; }
.side b { font-weight:800; }
</style></head>
<body>
<div class="stage">
<div class="side">Match (iOS)</div>
<div class="card">
<div class="story"><div class="seg on"></div><div class="seg on"></div><div class="seg"></div><div class="seg"></div></div>
<div class="scrim"></div>
<div class="meta">
<div class="namerow"><span class="name">Sofia</span><span class="age">27</span><span class="verify"></span></div>
<div class="job">Product Designer · Brooklyn</div>
<div class="distance"><span class="dot"></span>Active now · 3 miles away</div>
<div class="chips"><span class="chip">Hiking</span><span class="chip">Jazz</span><span class="chip">Ramen</span><span class="chip">Design</span></div>
</div>
<div class="dock">
<div class="circ rewind"><div class="g"></div></div>
<div class="circ pass"><div class="g"></div></div>
<div class="circ superlike"><div class="g"></div></div>
<div class="circ like"><div class="g"></div></div>
<div class="circ boost"><div class="g"></div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #171717;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #171717;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #171717; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #2346da; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #2346da;
border: 1px solid #2346da; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #171717;
border: 1px solid #c5c5c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e11d48; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Inter',Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#171717;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.cta{height:40px;padding:0 22px;background:#2346da;color:#fff;border-radius:9999px;display:flex;align-items:center;font-size:14px;font-weight:600;}
.hero{height:190px;background:#171717;display:flex;align-items:center;padding:0 32px;position:relative;overflow:hidden;}
.htxt{width:400px;z-index:2;}
.htxt h1{font-size:32px;font-weight:700;letter-spacing:-0.5px;color:#fff;margin:0 0 8px;}
.htxt p{font-size:14px;color:#999999;margin:0 0 14px;}
.hcta{display:inline-block;background:#e11d48;color:#fff;font-size:18px;font-weight:600;padding:14px 32px;border-radius:9999px;}
.tileshape{position:absolute;}
.ts1{right:80px;top:20px;width:90px;height:90px;background:#2346da;opacity:0.85;transform:rotate(15deg);border-radius:8px;}
.ts2{right:150px;top:70px;width:70px;height:70px;background:#9c00ff;opacity:0.85;border-radius:8px;transform:rotate(-10deg);}
.ts3{right:40px;top:100px;width:60px;height:60px;background:#ff7e27;opacity:0.85;border-radius:8px;transform:rotate(30deg);}
.pillrow{display:flex;gap:8px;padding:14px 32px 0;}
.pill{background:#f5f5f5;border-radius:9999px;font-size:13px;font-weight:600;padding:8px 18px;}
.pill.active{background:#2346da;color:#fff;}
.grid{display:flex;gap:16px;padding:14px 32px 0;}
.card{width:206px;background:#fff;border-radius:12px;padding:16px;position:relative;}
.badge{position:absolute;top:12px;left:12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#fff;border-radius:9999px;padding:2px 10px;z-index:2;}
.thumb{height:96px;background:#dedede;border-radius:8px;margin-bottom:10px;}
.title{font-size:16px;font-weight:600;margin-bottom:4px;}
.price{font-size:16px;font-weight:600;}
</style>
<div class="nav">
<div class="logo">Magna Tiles</div>
<div class="navlinks"><span>Sets</span><span>Single Tiles</span><span>Vehicles</span></div>
<div class="cta">Shop Sets</div>
</div>
<div class="hero">
<div class="htxt">
<h1>Magnetic tiles, built to snap and stack.</h1>
<p>Translucent, colorful, and unapologetically bold — for hands of every size.</p>
<div class="hcta">Shop Now</div>
</div>
<div class="tileshape ts2"></div><div class="tileshape ts1"></div><div class="tileshape ts3"></div>
</div>
<div class="pillrow"><div class="pill active">All</div><div class="pill">Starter Sets</div><div class="pill">Vehicles</div><div class="pill">Farm</div></div>
<div class="grid">
<div class="card"><span class="badge" style="background:#9c00ff;">New</span><div class="thumb" style="background:linear-gradient(135deg,#2346da,#9c00ff);"></div><div class="title">100-Piece Clear Colors Set</div><div class="price">$149.99</div></div>
<div class="card"><span class="badge" style="background:#ff7e27;">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#e11d48,#ff7e27);"></div><div class="title">Vehicle Expansion Set</div><div class="price">$59.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2346da,#e11d48);"></div><div class="title">32-Piece Starter Set</div><div class="price">$49.99</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f33d4d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f33d4d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2c2c2f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f33d4d; color: #2c2c2f;
border: 1px solid #2c2c2f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f33d4d; color: #f5f5f5;
border: 1px solid #f35a68; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d33a48; color: #2c2c2f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#141415; box-sizing:border-box;
font-family:"Apple SD Gothic Neo", "Malgun Gothic", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.brand { font-weight:700; font-size:18px; }
.brand span { color:#f33d4d; }
.navlinks { display:flex; gap:4px; }
.navlinks span { font-size:15px; padding:4px 12px; border-radius:8px; color:#2c2c2f; }
.navlinks span.active { background:#f2f2f3; }
.navr { display:flex; gap:8px; }
.btn-login { background:#fff; color:#2c2c2f; border:1px solid #eaeaeb; border-radius:8px; padding:8px 16px; font-size:14px; font-weight:600; }
.btn-signup { background:#2c2c2f; color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:14px; font-weight:600; }
.hero { padding:24px 28px 10px; }
.hero h1 { font-size:26px; font-weight:700; margin:0 0 6px; }
.hero p { font-size:14px; color:#62626a; margin:0; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:16px 28px; }
.card { background:#f9f9fa; border-radius:8px; overflow:hidden; }
.cover { height:100px; }
.c1 .cover { background:linear-gradient(150deg,#ffd0d6,#f33d4d); }
.c2 .cover { background:linear-gradient(150deg,#d6e0ff,#8956f8); }
.c3 .cover { background:linear-gradient(150deg,#d0f0ea,#3478ff); }
.ctitle { font-size:15px; font-weight:700; padding:12px 14px 4px; }
.cauthor { display:flex; align-items:center; gap:6px; padding:0 14px 8px; font-size:12px; color:#76767f; }
.av { width:18px; height:18px; border-radius:50%; }
.sub { background:#f2f2f3; color:#2c2c2f; border:none; border-radius:8px; padding:5px 12px; font-size:12px; font-weight:600; margin-left:auto; }
.tags { padding:0 14px 14px; }
.tag { display:inline-block; background:#f2f2f3; color:#2c2c2f; border-radius:24px; font-size:11px; padding:3px 9px; margin-right:5px; }
</style></head>
<body>
<nav>
<div class="brand">POSTYPE<span>.</span></div>
<div class="navlinks"><span class="active">Home</span><span>Open Channels</span><span>Requests</span><span>Character Chat</span><span>Library</span></div>
<div class="navr"><button class="btn-login">Log in</button><button class="btn-signup">Sign up</button></div>
</nav>
<div class="hero">
<h1>A creator community that turns taste into value</h1>
<p>A world where every taste has value — turn your posts and creativity into income.</p>
</div>
<div class="grid">
<div class="card c1"><div class="cover"></div><div class="ctitle">From the Harbor at Night</div><div class="cauthor"><span class="av" style="background:#f33d4d;"></span>writer_bora<button class="sub">Subscribe</button></div><div class="tags"><span class="tag">#fiction</span><span class="tag">#mystery</span></div></div>
<div class="card c2"><div class="cover"></div><div class="ctitle">Illustration Commissions Open</div><div class="cauthor"><span class="av" style="background:#8956f8;"></span>jihu.draws<button class="sub">Subscribe</button></div><div class="tags"><span class="tag">#illustration</span><span class="tag">#commission</span></div></div>
<div class="card c3"><div class="cover"></div><div class="ctitle">Weekly News Briefing</div><div class="cauthor"><span class="av" style="background:#3478ff;"></span>news.desk<button class="sub">Subscribe</button></div><div class="tags"><span class="tag">#current-events</span><span class="tag">#newsletter</span></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e2d2b3; color: #233746;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e2d2b3; color: #233746;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #233746; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7c918d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #2f4d47; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #e2d2b3; color: #233746;
border: 1px solid #2f4d47; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #233746;
border: 1px solid #e1c08d; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c918d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c69214; color: #233746;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#e2d2b3; font-family:'Nunito', 'Helvetica Neue', sans-serif; color:#2f2417; }
*{box-sizing:border-box;}
.nav{height:72px;background:#e2d2b3;border-bottom:2px solid #c69214;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:'Poppins',sans-serif;font-size:22px;font-weight:700;color:#2f4d47;}
.navlinks{display:flex;gap:26px;font-size:13px;font-weight:600;letter-spacing:.3px;color:#233746;}
.searchpill{width:170px;height:34px;border-radius:9999px;background:#fff;border:1px solid #c69214;display:flex;align-items:center;padding:0 16px;font-size:11px;color:#7c918d;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;background:linear-gradient(120deg,#e2d2b3 55%,#d6c19a 100%);}
.heroText{width:430px;}
.badge{display:inline-block;background:#c69214;color:#fff;font-family:'Poppins',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:5px 12px;border-radius:9999px;margin-bottom:14px;}
.headline{font-family:'Poppins',sans-serif;font-size:32px;font-weight:700;color:#233746;line-height:1.2;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.55;color:#4b3d28;margin:0 0 20px;max-width:370px;}
.btn{display:inline-block;background:#2f4d47;color:#fff;font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;letter-spacing:.3px;padding:13px 26px;border-radius:6px;}
.heroCrate{position:absolute;right:70px;top:150px;width:220px;height:170px;background:radial-gradient(circle at 35% 30%,#7c918d,#2f4d47 75%);border-radius:10px;box-shadow:0 10px 26px rgba(35,55,70,.25);}
.heroCrate:before{content:'';position:absolute;left:20px;top:24px;width:180px;height:12px;background:#c69214;border-radius:3px;}
.sec{position:relative;height:318px;padding:26px 40px;}
.secTitle{font-family:'Poppins',sans-serif;font-size:18px;font-weight:700;color:#2f4d47;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:216px;background:#fdf9f0;border:1px solid #c69214;border-radius:10px;padding:12px;position:relative;}
.thumb{height:96px;border-radius:8px;margin-bottom:10px;}
.tierBadge{position:absolute;top:8px;left:8px;background:#7c918d;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 9px;border-radius:9999px;}
.cardTitle{font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;color:#233746;margin-bottom:4px;}
.cardPrice{font-size:13px;font-weight:700;color:#c69214;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#233746;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#c69214;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Litjoy Crate</div>
<div class="navlinks"><span>Book Crates</span><span>Author Notes</span><span>Gifting</span></div>
<div class="searchpill">Find your next read...</div>
</div>
<div class="hero">
<div class="heroText">
<div class="badge">Limited Edition Box</div>
<div class="headline">A curated library,<br>delivered monthly.</div>
<div class="sub">Hand-picked fiction, author letters, and bookish keepsakes wrapped in parchment and gold foil.</div>
<div class="btn">Join the Crate</div>
</div>
<div class="heroCrate"></div>
</div>
<div class="sec">
<div class="secTitle">Choose Your Membership</div>
<div class="grid">
<div class="card"><div class="tierBadge">Classic</div><div class="thumb" style="background:linear-gradient(135deg,#7c918d,#2f4d47)"></div><div class="cardTitle">Quarterly Crate</div><div class="cardPrice">$54.99</div></div>
<div class="card"><div class="tierBadge">Popular</div><div class="thumb" style="background:linear-gradient(135deg,#c69214,#2f4d47)"></div><div class="cardTitle">Monthly Crate</div><div class="cardPrice">$32.99</div></div>
<div class="card"><div class="tierBadge">Signed</div><div class="thumb" style="background:linear-gradient(135deg,#2f4d47,#7c918d)"></div><div class="cardTitle">Author Edition</div><div class="cardPrice">$44.99</div></div>
<div class="card"><div class="tierBadge">Gift</div><div class="thumb" style="background:linear-gradient(135deg,#233746,#c69214)"></div><div class="cardTitle">Give-a-Crate</div><div class="cardPrice">$38.99</div></div>
</div>
</div>
<div class="footer"><span>© A Bookish Library, Curated</span><span>Track My Crate</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2b2622; color: #f7f5f0;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2b2622; color: #f7f5f0;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 32px; letter-spacing: -0.4px; margin: 0; color: #f7f5f0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 18px; margin: 0; color: #aea69c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; background: #f7f5f0; color: #2b2622;
border: none; border-radius: 3px; padding: {spacing.sm} {spacing.lg};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; background: #2b2622; color: #f7f5f0;
border: 1px solid #f7f5f0; border-radius: 3px;
padding: {spacing.sm} {spacing.lg}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background: #383330; color: #f7f5f0;
border: 1px solid #3f3a36; border-radius: 3px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aea69c; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #48433f; color: #f7f5f0;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#2b2622; color:#f7f5f0; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.serif { font-family:Georgia,"Times New Roman",Times,serif; font-style:italic; }
.mono { font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #3f3a36; }
.brand { font-size:14px; font-weight:600; letter-spacing:.02em; color:#f7f5f0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; color:#c9c0ad; }
.navcta { border:1px solid #3f3a36; border-radius:6px; padding:7px 16px; font-size:12.5px; color:#f7f5f0; }
.split { display:flex; gap:0; padding:44px 32px 30px; align-items:center; }
.left { flex:1; padding-right:26px; }
.left h1 { font-size:38px; font-weight:400; line-height:1.14; margin:0 0 14px; letter-spacing:-.6px; }
.left p { font-size:13.5px; color:#c9c0ad; margin:0 0 20px; max-width:340px; line-height:1.5; }
.btnrow { display:flex; gap:10px; }
.btn { border-radius:6px; padding:8px 16px; font-size:13px; font-weight:500; }
.btn-p { background:#f7f5f0; color:#2b2622; }
.btn-o { background:transparent; color:#dad2c1; border:1px solid #3f3a36; }
.right { flex:1; background:#383330; border:1px solid #3f3a36; border-radius:10px; overflow:hidden; }
.rbar { height:28px; display:flex; align-items:center; gap:6px; padding:0 12px; border-bottom:1px solid #3f3a36; }
.rdot { width:7px; height:7px; border-radius:50%; background:#4a453f; }
.rbody { padding:14px 16px; font-size:11.5px; line-height:1.9; }
.rbody .p { color:#aea69c; } .rbody .c { color:#f7f5f0; } .rbody .a { color:#dad2c1; }
.press { padding:6px 32px 30px; }
.press .lbl { font-size:11px; color:#aea69c; text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }
.presrow { display:flex; gap:26px; }
.presrow span { font-size:13px; color:#c9c0ad; font-weight:600; }
</style></head>
<body>
<nav>
<div class="brand">Warp</div>
<div class="navlinks"><span>Terminal</span><span>Agents</span><span>Pricing</span><span>Docs</span></div>
<div class="navcta">Download Warp</div>
</nav>
<div class="split">
<div class="left">
<h1>Code at the speed of <span class="serif">thought</span></h1>
<p>An agentic development environment built for coding with AI — a terminal that reads, plans, and executes alongside you.</p>
<div class="btnrow"><button class="btn btn-p">Download</button><button class="btn btn-o">Read the docs</button></div>
</div>
<div class="right">
<div class="rbar"><span class="rdot"></span><span class="rdot"></span><span class="rdot"></span></div>
<div class="rbody mono">
<span class="p">~/app ›</span> <span class="c">warp agent run</span><br>
<span class="a">Planning 3 steps to fix the failing test...</span><br>
<span class="p">1.</span> <span class="c">read src/api/handler.ts</span><br>
<span class="p">2.</span> <span class="c">patch missing null check</span><br>
<span class="p">3.</span> <span class="c">re-run test suite</span><br>
<span class="a">✓ All 42 tests passing</span>
</div>
</div>
</div>
<div class="press">
<div class="lbl">Trusted by engineers at</div>
<div class="presrow"><span>Databricks</span><span>Perplexity</span><span>Cursor</span><span>Vercel</span><span>Ramp</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7353ea; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7353ea; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #baacf0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #212121; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7353ea; color: #212121;
border: 1px solid #212121; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7353ea; color: #f5f5f5;
border: 1px solid #886dec; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #baacf0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #664bca; color: #212121;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#191f28; box-sizing:border-box;
font-family:"Pretendard Variable",-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-weight:700; font-size:17px; color:#7353ea; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; color:#191f28; }
.cta-dark { background:#212121; color:#fff; border-radius:8px; padding:8px 16px; font-size:14px; font-weight:600; }
.hero { padding:34px 40px 20px; text-align:center; }
.hero h1 { font-family:"Elice DX Neolli",sans-serif; font-size:40px; font-weight:500; letter-spacing:-2.4%;
line-height:1.2; margin:0 0 12px; }
.hero p { color:#66717e; font-size:15px; margin:0; }
.stats { display:flex; gap:20px; justify-content:center; padding:20px 0; }
.stat { text-align:center; }
.stat .n { font-family:"Elice DX Neolli",sans-serif; font-size:32px; font-weight:500; color:#7353ea; }
.stat .l { font-size:12px; color:#66717e; margin-top:4px; }
.band { background:rgba(102,113,126,0.04); padding:26px 40px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#fff; border:1px solid #e9ebf0; border-radius:24px; padding:20px; }
.card .ic { width:36px; height:36px; border-radius:9999px; background:linear-gradient(135deg,#7353ea,#2f5efb); margin-bottom:10px; }
.card h4 { font-size:15px; margin:0 0 6px; }
.card p { font-size:12.5px; color:#66717e; margin:0; line-height:1.5; }
.footer-nav { padding:20px 40px; display:flex; gap:14px; }
.nav-tab { border-radius:4px; padding:8px 12px; font-size:14px; font-weight:500; color:#212121; }
.nav-tab.active { background:rgba(115,83,234,0.08); color:#7353ea; }
</style></head>
<body>
<nav>
<span class="brand">Elice</span>
<div class="navlinks"><span>Elice AX</span><span>Elice Cloud</span><span>Resources</span></div>
<div class="cta-dark">Try Free Trial</div>
</nav>
<section class="hero">
<h1>Learn, build, and execute<br>— AI happens at Elice</h1>
<p>AI-powered, reliable education operation.</p>
</section>
<section class="stats">
<div class="stat"><div class="n">13,000+</div><div class="l">Enterprise learners</div></div>
<div class="stat"><div class="n">2,810,000+</div><div class="l">Lessons completed</div></div>
</section>
<section class="band">
<div class="grid">
<div class="card"><div class="ic"></div><h4>Hands-on AI Training</h4><p>A curriculum you learn today and apply tomorrow.</p></div>
<div class="card"><div class="ic"></div><h4>Stable AI infrastructure</h4><p>GPU/cloud operation for training workloads.</p></div>
<div class="card"><div class="ic"></div><h4>Enterprise upskilling</h4><p>Elice AX for organization-wide AI literacy.</p></div>
</div>
</section>
<section class="footer-nav">
<div class="nav-tab active">Explore</div><div class="nav-tab">My Classes</div><div class="nav-tab">Dashboard</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.25px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #cc3b3b; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #f5f5f5; color: #222222;
border: 1px solid #cc3b3b; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c0c0c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #cc3b3b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; font-family:'Poppins',Arial,Helvetica,'Helvetica Neue',sans-serif; color:#272727; }
*{box-sizing:border-box;}
.nav{height:64px;background:#f5f5f5;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #eeeeee;}
.logo{font-size:20px;font-weight:600;color:#111111;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:#222222;}
.navlinks .on{color:#cc3b3b;}
.search{width:190px;height:36px;border-radius:9999px;border:1px solid #eeeeee;background:#fff;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#aaaaaa;}
.hero{height:196px;display:flex;align-items:center;padding:0 28px;background:#fafafa;border-bottom:1px solid #eeeeee;}
.heroText{width:430px;}
.cap{font-size:12px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:#cc3b3b;margin-bottom:8px;}
.h1{font-size:32px;font-weight:600;letter-spacing:-0.5px;line-height:1.25;color:#222222;margin:0 0 10px;}
.sub{font-size:14px;color:#272727;margin:0 0 16px;max-width:340px;}
.btn{display:inline-block;background:#cc3b3b;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:12px 24px;border-radius:8px;}
.stack{margin-left:auto;width:250px;height:150px;position:relative;}
.disc{position:absolute;width:130px;height:130px;border-radius:50%;background:repeating-radial-gradient(circle,#111111 0px,#111111 2px,#2a2a2a 2px,#2a2a2a 6px);top:10px;right:60px;}
.disc:after{content:'';position:absolute;width:24px;height:24px;background:#cc3b3b;border-radius:50%;top:53px;left:53px;}
.sleeve{position:absolute;width:120px;height:120px;background:#111111;top:20px;right:0px;box-shadow:-6px 6px 0 #bd0000;}
.strip{display:flex;gap:8px;padding:14px 28px 0;}
.tab{font-size:13px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:#aaaaaa;padding-bottom:8px;border-bottom:2px solid transparent;}
.tab.on{color:#cc3b3b;border-bottom-color:#cc3b3b;}
.grid{display:flex;gap:12px;padding:16px 28px 0;}
.card{width:150px;background:#fff;border-radius:8px;padding:8px;position:relative;}
.thumb{height:100px;border-radius:4px;margin-bottom:8px;}
.badge{position:absolute;top:14px;left:14px;background:#bd0000;color:#fff;font-size:10px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;border-radius:4px;padding:2px 7px;}
.ptitle{font-size:16px;font-weight:500;color:#111111;line-height:1.3;height:34px;overflow:hidden;}
.pprice{font-size:15px;font-weight:600;color:#222222;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#222222;display:flex;align-items:center;justify-content:space-between;padding:0 28px;font-size:12px;color:#e1e1e1;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Record Grouch</div>
<div class="navlinks"><div class="on">Vinyl</div><div>New Arrivals</div><div>Genres</div><div>Sale</div></div>
<div class="search">Search records...</div>
</div>
<div class="hero">
<div class="heroText">
<div class="cap">Since the Crate-Digging Days</div>
<div class="h1">Find the record.<br>Fast.</div>
<div class="sub">No pastels, no fuss — just red, black, white, and every pressing worth owning.</div>
<div class="btn">Shop New Arrivals</div>
</div>
<div class="stack"><div class="sleeve"></div><div class="disc"></div></div>
</div>
<div class="strip">
<div class="tab on">All</div><div class="tab">Rock</div><div class="tab">Punk</div><div class="tab">Soul</div><div class="tab">Reissues</div>
</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#cc3b3b,#111111)"></div><div class="ptitle">Concrete Static LP</div><div class="pprice">$28.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#222222,#bd0000)"></div><div class="ptitle">Low Tide Sessions</div><div class="pprice">$24.00</div></div>
<div class="card"><div class="badge" style="background:#aaaaaa">Sold</div><div class="thumb" style="background:linear-gradient(135deg,#bd0000,#040404)"></div><div class="ptitle">Nine Empty Blocks</div><div class="pprice">$32.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#111111,#cc3b3b)"></div><div class="ptitle">Second Hand Sirens</div><div class="pprice">$22.00</div></div>
</div>
<div class="footer"><span>© Record Grouch — crate-diggers welcome</span><span>Shipping · Returns</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 900; line-height: 1.25; letter-spacing: 0.5px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #565656; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 900; line-height: 1.29; letter-spacing: 1px; background: #0099ff; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 900; line-height: 1.29; letter-spacing: 1px; background: transparent; color: #0099ff;
border: 1px solid #0099ff; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #1f1f1f; color: #ffffff;
border: 1px solid #121212; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #565656; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 900; line-height: 1.18; letter-spacing: 1px; background: #ff8c00; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#ffffff; box-sizing:border-box;
font-family:'Arial Black','DM Sans',Helvetica,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #2a2a2a; }
.brand { font-size:16px; font-weight:900; text-transform:uppercase; letter-spacing:1px; margin:0; color:#0099ff; }
.navlinks { display:flex; gap:22px; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:1px; color:#a2a2a2; }
.navlinks span.active { color:#0099ff; }
.cart { background:#0099ff; color:#fff; font-size:11px; font-weight:900; padding:8px 16px; border-radius:8px; text-transform:uppercase; }
.content { display:flex; padding:18px 32px; gap:20px; }
.preview { flex:1.1; background:#1f1f1f; border-radius:0; display:flex; align-items:center; justify-content:center; height:290px; position:relative; }
.preview::before { content:''; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle,#0099ff 0%,#1f1f1f 70%); }
.preview .halo { position:absolute; top:12px; left:12px; font-size:10px; font-weight:900; letter-spacing:1px; background:#ff1493; padding:4px 10px; text-transform:uppercase; }
.config { flex:1; }
.config h1 { font-size:22px; font-weight:900; text-transform:uppercase; margin:0 0 4px; letter-spacing:-.5px; }
.config .sub { font-size:12px; color:#a2a2a2; margin:0 0 12px; }
.step-label { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:1px; color:#a2a2a2; margin-bottom:8px; }
.swrow { display:flex; gap:8px; margin-bottom:16px; }
.sw { width:30px; height:30px; border-radius:50%; }
.sw.sel { border:2px solid #fff; }
.pills { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.pill { border:1px solid #3a3a3a; border-radius:999px; padding:8px 16px; font-size:11px; font-weight:900; text-transform:uppercase; color:#a2a2a2; }
.pill.sel { background:#0099ff; color:#fff; border-color:#0099ff; }
.price { font-size:24px; font-weight:900; margin:10px 0; }
.btn-cta { display:block; text-align:center; background:#53ffba; color:#121212; font-weight:900; font-size:14px; padding:14px; border-radius:8px; text-transform:uppercase; }
footer { position:absolute; bottom:0; left:0; right:0; height:44px; background:#1f1f1f; color:#a2a2a2;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
</style></head>
<body>
<nav>
<p class="brand">Battle Beaver Customs</p>
<div class="navlinks"><span class="active">Configurator</span><span>Pro Controllers</span><span>Parts</span></div>
<div class="cart">Cart (1)</div>
</nav>
<div class="content">
<div class="preview"><span class="halo">Limited</span></div>
<div class="config">
<h1>Custom Pro Controller</h1>
<p class="sub">Xbox Series X/S · Hall Effect Sticks</p>
<div class="step-label">Shell Color</div>
<div class="swrow">
<div class="sw sel" style="background:#0099ff"></div>
<div class="sw" style="background:#53ffba"></div>
<div class="sw" style="background:#ff1493"></div>
<div class="sw" style="background:#ff8c00"></div>
<div class="sw" style="background:#50e1ff"></div>
</div>
<div class="step-label">Trigger Stops</div>
<div class="pills">
<div class="pill sel">Mid</div>
<div class="pill">Short</div>
<div class="pill">Long</div>
</div>
<div class="price">$189.00</div>
<span class="btn-cta">Add to Build</span>
</div>
</div>
<footer>
<span>© Battle Beaver Customs</span>
<span>Pro · Custom · Limited</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3c2bac; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3c2bac; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a29ad4; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2b1e90; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3c2bac; color: #ffffff;
border: 1px solid #2b1e90; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3c2bac; color: #f5f5f5;
border: 1px solid #5a4bb8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a29ad4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3929a8; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#140f33; box-sizing:border-box;
font-family:"Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:19px; font-weight:800; color:#140f33; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; color:#80839e; }
.navlinks span:first-child { color:#3c2bac; }
.btn-nav { background:#3c2bac; color:#fff; border-radius:5px; padding:10px 16px; font-size:14px; }
.hero { padding:24px 32px 20px; text-align:center; }
.hero .eyebrow { font-size:22px; font-weight:700; color:#3c2bac; margin:0 0 8px; }
.hero h1 { font-size:44px; font-weight:800; line-height:1.3; margin:0 0 18px; }
.btn-primary { display:inline-block; background:#3c2bac; color:#fff; border-radius:8px; height:56px; line-height:56px; padding:0 40px; font-size:18px; }
.band { background:#201852; padding:30px 32px; display:flex; gap:20px; }
.bandcard { flex:1; text-align:center; color:#fff; }
.bandcard h3 { font-size:28px; font-weight:800; margin:0 0 8px; }
.bandcard p { font-size:13px; color:#a89ee6; margin:0 0 14px; }
.link-dark { display:inline-block; background:#120b60; color:#fff; border-radius:8px; padding:10px 22px; font-size:13px; }
.tints { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:24px 32px; }
.tint { background:#eeebfa; border-radius:12px; padding:18px; }
.tint h4 { font-size:16px; font-weight:700; margin:0 0 6px; color:#140f33; }
.tint p { font-size:12px; color:#3e426a; margin:0; line-height:1.6; }
.promo { margin:0 32px 20px; background:#2259e5; border-radius:24px; padding:22px 28px; display:flex; align-items:center; justify-content:space-between; }
.promo h4 { color:#ffd391; font-weight:700; font-size:18px; margin:0; }
.promo span.link-dark { background:#ffffff; color:#2259e5; }
footer { border-top:1px solid #eeebfa; padding:12px 32px; display:flex; justify-content:space-between; font-size:12px; color:#80839e; }
</style></head>
<body>
<nav>
<span class="brand">Ringle</span>
<div class="navlinks"><span>Video Tutoring</span><span>AI Speaking</span><span>Business Solutions</span><span>Ringle Teens</span></div>
<span class="btn-nav">Free Trial</span>
</nav>
<section class="hero">
<p class="eyebrow">1:1 video lessons with top-university tutors</p>
<h1>Speak English Like You Mean It</h1>
<span class="btn-primary">Get Started with Ringle</span>
</section>
<div class="band">
<div class="bandcard"><h3>1:1 Video Tutoring</h3><p>Lessons tailored to your goals</p><span class="link-dark">Learn More</span></div>
<div class="bandcard"><h3>AI Speaking</h3><p>Practice speaking daily, pressure-free</p><span class="link-dark">Learn More</span></div>
</div>
<div class="tints">
<div class="tint"><h4>Ivy League Tutors</h4><p>Learn 1:1 with vetted tutors from top universities.</p></div>
<div class="tint"><h4>Business English</h4><p>Prepare for meetings, presentations, and negotiations with real scenarios.</p></div>
<div class="tint"><h4>Personalized Reports</h4><p>Get detailed feedback after every lesson.</p></div>
</div>
<div class="promo">
<h4>Fall Sign-Up Special for New Members</h4>
<span class="link-dark">Check It Out</span>
</div>
<footer>
<span>© Ringle</span>
<span>Video Tutoring · AI Speaking · Business · Teens</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #dedede;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #dedede;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.2px; margin: 0; color: #dedede; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #171717; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: transparent; color: #dedede;
border: 1px solid #171717; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #1f1f1f; color: #dedede;
border: 1px solid #454545; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #ff6b35; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#121212;font-family:'myFontRegular',Inter,'Helvetica Neue',sans-serif;color:#b0b0b0;}
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #2a2a2a;}
.logo{font-family:'myFontMedium',Inter,sans-serif;font-size:19px;font-weight:600;letter-spacing:0.5px;color:#dedede;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:400;color:#b0b0b0;}
.carticon{width:34px;height:34px;border-radius:8px;background:#1f1f1f;border:1px solid #2a2a2a;}
.hero{height:262px;display:flex;align-items:center;padding:0 40px;gap:36px;}
.hero-text{width:400px;}
.headline{font-family:'myFontBold',Inter,sans-serif;font-size:32px;font-weight:700;letter-spacing:-0.5px;line-height:1.22;color:#dedede;margin-bottom:14px;}
.sub{font-size:15px;color:#888888;line-height:1.5;width:365px;margin-bottom:20px;}
.cta{display:inline-block;padding:13px 28px;background:#dedede;color:#121212;border-radius:8px;font-family:'myFontMedium',Inter,sans-serif;font-size:14px;font-weight:600;}
.hero-visual{flex:1;height:200px;position:relative;background:#1a1a1a;border-radius:8px;border:1px solid #2a2a2a;}
.dock{position:absolute;left:70px;top:60px;width:280px;height:16px;border-radius:8px;background:linear-gradient(90deg,#c9c9c9,#8a8a8a);}
.port{position:absolute;top:82px;width:14px;height:14px;border-radius:3px;background:#2a2a2a;border:1px solid #444444;}
.port1{left:100px;}
.port2{left:130px;}
.port3{left:160px;}
.port4{left:190px;}
.port5{left:220px;}
.port6{left:250px;}
.led{position:absolute;left:290px;top:64px;width:8px;height:8px;border-radius:4px;background:#008060;}
.section{padding:20px 40px 0 40px;}
.section-title{font-family:'myFontMedium',Inter,sans-serif;font-size:20px;font-weight:600;color:#dedede;margin-bottom:14px;}
.grid{display:flex;gap:24px;padding:0 40px;}
.card{width:204px;background:#1f1f1f;border:1px solid #2a2a2a;border-radius:8px;overflow:hidden;}
.swatch{height:92px;background:#1a1a1a;position:relative;display:flex;align-items:center;justify-content:center;}
.swatch .hub{width:74px;height:20px;border-radius:6px;background:linear-gradient(90deg,#bbbbbb,#8a8a8a);}
.badge{position:absolute;left:8px;top:8px;background:#ff6b35;color:#fff;font-size:9px;font-weight:700;padding:3px 8px;border-radius:8px;}
.card-body{padding:11px 13px 14px 13px;}
.card-title{font-family:'myFontMedium',Inter,sans-serif;font-size:14px;font-weight:600;color:#dedede;margin-bottom:6px;}
.card-price{font-size:14px;font-weight:600;color:#dedede;}
</style>
<div class="nav">
<div class="logo">Hyperdrive</div>
<div class="navlinks"><span>Docks</span><span>Hubs</span><span>Cables</span><span>Chargers</span></div>
<div class="carticon"></div>
</div>
<div class="hero">
<div class="hero-text">
<div class="headline">One port.<br/>Every connection.</div>
<div class="sub">Precision-machined aluminum docks and hubs engineered for creators who live on USB-C.</div>
<div class="cta">Shop Docks</div>
</div>
<div class="hero-visual">
<div class="dock"></div>
<div class="port port1"></div>
<div class="port port2"></div>
<div class="port port3"></div>
<div class="port port4"></div>
<div class="port port5"></div>
<div class="port port6"></div>
<div class="led"></div>
</div>
</div>
<div class="section"><div class="section-title">Featured Hubs</div></div>
<div class="grid">
<div class="card">
<div class="swatch"><div class="hub"></div><div class="badge">New</div></div>
<div class="card-body"><div class="card-title">HyperDrive 8-in-1 Dock</div><div class="card-price">$119.99</div></div>
</div>
<div class="card">
<div class="swatch"><div class="hub"></div></div>
<div class="card-body"><div class="card-title">GEN2 6-in-1 USB-C Hub</div><div class="card-price">$79.99</div></div>
</div>
<div class="card">
<div class="swatch"><div class="hub"></div></div>
<div class="card-body"><div class="card-title">100W GaN Wall Charger</div><div class="card-price">$59.99</div></div>
</div>
<div class="card">
<div class="swatch"><div class="hub"></div></div>
<div class="card-body"><div class="card-title">Thunderbolt 4 Cable</div><div class="card-price">$34.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FAFAF7; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FAFAF7; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #2E4D3C; color: #FFFFFF;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: transparent; color: #2E4D3C;
border: 1px solid #2E4D3C; border-radius: 9999px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FAFAF7; color: #1A1A1A;
border: 1px solid #E5E0D8; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.36; letter-spacing: 0.1em; background: #F0EDE7; color: #717171;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FAFAF7; color:#1A1A1A; box-sizing:border-box;
font-family:'GT Walsheim','Neue Haas Grotesk','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:19px; font-weight:700; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:24px; font-size:12px; letter-spacing:0.2px; color:#3D3D3D; }
.btn-primary { background:#2E4D3C; color:#fff; border:none; border-radius:2px; padding:11px 22px; font-size:12px; font-weight:600; letter-spacing:0.3px; }
.trustrow { display:flex; gap:10px; padding:0 40px 14px; }
.trust { font-size:10px; text-transform:uppercase; letter-spacing:0.8px; color:#717171; border:1px solid #E5E0D8; border-radius:9999px; padding:5px 12px; }
main { display:flex; height:calc(640px - 70px - 34px - 40px); background:#F0EDE7; }
.gallery { width:390px; display:flex; align-items:center; justify-content:center; position:relative; }
.jar { width:110px; height:140px; border-radius:12px 12px 20px 20px; background:linear-gradient(180deg,rgba(255,255,255,0.5),rgba(255,255,255,0.15));
border:2px solid #2E4D3C; position:relative; }
.jar::before { content:''; position:absolute; left:14px; right:14px; bottom:14px; top:60px; background:#2E4D3C; border-radius:0 0 10px 10px; opacity:0.85; }
.jar::after { content:''; position:absolute; top:-16px; left:24px; width:62px; height:20px; border-radius:4px; background:#2E4D3C; }
.info { flex:1; padding:26px 32px; display:flex; flex-direction:column; gap:12px; background:#FAFAF7; }
.cat { font-size:11px; text-transform:uppercase; letter-spacing:0.6px; color:#717171; }
h1 { font-size:24px; font-weight:700; margin:0; letter-spacing:-0.3px; }
.price { font-size:19px; font-weight:600; }
.desc { font-size:13px; color:#3D3D3D; line-height:1.55; max-width:320px; }
.steps { display:flex; gap:6px; }
.step { flex:1; text-align:center; font-size:10px; color:#9A9A9A; border-bottom:2px solid #E5E0D8; padding-bottom:8px; letter-spacing:0.3px; }
.step.on { color:#2E4D3C; border-color:#2E4D3C; font-weight:600; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#2E4D3C; color:#fff; border:none; border-radius:2px; padding:14px; font-size:13px; font-weight:600; letter-spacing:0.3px; }
.btn-sec { background:transparent; color:#2E4D3C; border:1px solid #2E4D3C; border-radius:2px; padding:14px 18px; font-size:12px; font-weight:600; }
footer { padding:12px 40px; font-size:10px; letter-spacing:0.3px; color:#717171; text-align:center; }
</style></head>
<body>
<nav>
<div class="brand">Bite</div>
<div class="navlinks"><span>Toothpaste Bits</span><span>Subscriptions</span><span>Refills</span><span>Our Impact</span></div>
<button class="btn-primary">Build Your Bundle</button>
</nav>
<div class="trustrow"><span class="trust">Zero Plastic Waste</span><span class="trust">B-Corp Certified</span><span class="trust">Carbon-Neutral Shipping</span></div>
<main>
<div class="gallery"><div class="jar"></div></div>
<div class="info">
<span class="cat">Toothpaste Bits · Jar of 62</span>
<h1>Fresh Mint Refill Jar</h1>
<span class="price">$16.00</span>
<p class="desc">Compressed toothpaste bits in a refillable glass jar — chew, brush, done. No tube, ever.</p>
<div class="steps"><div class="step on">1. Choose Flavor</div><div class="step on">2. Choose Frequency</div><div class="step">3. Confirm</div></div>
<div class="btn-row">
<button class="btn-add">Add to Cart</button>
<button class="btn-sec">Subscribe & Save</button>
</div>
</div>
</main>
<footer>© Bite · The future of oral care is plastic-free</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf7f2; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf7f2; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #c49a3c; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: transparent; color: #1e4d4f;
border: 1px solid #c49a3c; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c2c0bc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; letter-spacing: 0.4px; background: #f3efe8; color: #3d3d3d;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#faf7f2; color:#1a1a1a; box-sizing:border-box;
font-family:'Inter', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing: border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 56px; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #eae6df; background:#faf7f2; }
.brand { font-family:'Playfair Display','Georgia',serif; font-size:21px; font-weight:400; letter-spacing:-0.2px; margin:0; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:12.5px; font-weight:500; letter-spacing:0.1px; color:#3d3d3d; }
.navlinks span.on { color:#1e4d4f; font-weight:600; }
.navicons { display:flex; align-items:center; gap:16px; }
.icon-search { width:14px; height:14px; border:1.5px solid #1a1a1a; border-radius:50%; position:relative; }
.icon-search::after { content:''; position:absolute; width:6px; height:1.5px; background:#1a1a1a; right:-5px; bottom:-1px; transform:rotate(45deg); }
.icon-cart { width:17px; height:14px; border:1.5px solid #1a1a1a; border-radius:0 0 3px 3px; position:relative; }
.icon-cart::before { content:''; position:absolute; top:-6px; left:2px; width:10px; height:6px; border:1.5px solid #1a1a1a; border-bottom:none; border-radius:6px 6px 0 0; }
.hero { flex:0 0 156px; height:156px; display:flex; }
.hero-art { flex:0 0 46%; position:relative; background:linear-gradient(140deg,#c49a3c 0%,#8a5a2e 40%,#1e4d4f 100%); overflow:hidden; }
.hero-art::after { content:''; position:absolute; left:18%; top:20%; width:38%; height:55%;
background:rgba(255,255,255,0.14); border-radius:6px; transform:rotate(-6deg); }
.hero-art::before { content:''; position:absolute; right:10%; bottom:14%; width:26%; height:30%;
background:rgba(250,247,242,0.18); border-radius:50%; }
.hero-panel { flex:1 1 auto; background:#1e4d4f; color:#faf7f2; display:flex; flex-direction:column;
justify-content:center; gap:8px; padding:0 32px; }
.hero-panel h1 { margin:0; font-family:'Playfair Display','Georgia',serif; font-size:26px; font-weight:400;
line-height:1.18; letter-spacing:-0.3px; }
.hero-panel p { margin:0; font-size:12.5px; opacity:0.85; max-width:340px; line-height:1.5; }
.hero-cta { align-self:flex-start; margin-top:6px; background:#c49a3c; color:#ffffff; border:none;
border-radius:4px; padding:9px 20px; font-size:12.5px; font-weight:600; letter-spacing:0.2px; }
.collhead { flex:0 0 34px; height:34px; display:flex; align-items:center; justify-content:center; }
.collhead h2 { margin:0; font-family:'Playfair Display','Georgia',serif; font-size:18px; font-weight:500; }
main.grid { flex:1 1 auto; overflow:hidden; display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
padding:6px 40px 0; }
.card { background:#ffffff; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,0.04); display:flex;
flex-direction:column; overflow:hidden; padding:10px; }
.card-img { flex:0 0 auto; aspect-ratio:1/1; border-radius:4px; position:relative; overflow:hidden; }
.img1 { background:linear-gradient(135deg,#e7b96a 0%,#c49a3c 45%,#7a4a20 100%); }
.img2 { background:linear-gradient(135deg,#7fa9a8 0%,#1e4d4f 55%,#123334 100%); }
.img3 { background:linear-gradient(135deg,#d98f7a 0%,#a6503a 55%,#6b2f22 100%); }
.card-img::after { content:''; position:absolute; left:22%; top:22%; width:56%; height:56%;
border:2px solid rgba(255,255,255,0.35); border-radius:2px; }
.piece-badge { position:absolute; bottom:8px; left:8px; background:#f3efe8; color:#3d3d3d; font-size:10px;
font-weight:700; letter-spacing:0.4px; border-radius:999px; padding:3px 10px; z-index:2; }
.card-body { padding:9px 2px 0; display:flex; flex-direction:column; gap:3px; }
.card-body h3 { margin:0; font-size:14.5px; font-weight:600; }
.artist { font-family:'Playfair Display','Georgia',serif; font-style:italic; font-size:12px; color:#6b6b6b; margin:0; }
.rating { font-size:10.5px; color:#c49a3c; letter-spacing:1px; margin-top:2px; }
.rating span { color:#6b6b6b; font-weight:500; margin-left:5px; letter-spacing:0; font-family:'Inter',sans-serif; }
.price { font-size:13.5px; font-weight:600; color:#1a1a1a; margin-top:3px; }
footer { flex:0 0 44px; height:44px; background:#1e4d4f; color:#faf7f2; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; font-size:11.5px; }
footer span.dim { opacity:0.75; }
</style></head>
<body>
<nav>
<p class="brand">Art And Fable Puzzle Company</p>
<div class="navlinks">
<span class="on">Shop</span><span>Artists</span><span>Collections</span><span>Gifting</span>
</div>
<div class="navicons">
<div class="icon-search"></div>
<div class="icon-cart"></div>
</div>
</nav>
<section class="hero">
<div class="hero-art"></div>
<div class="hero-panel">
<h1>Gallery-grade jigsaw puzzles</h1>
<p>Museum-quality reproductions of original artwork, printed on premium recycled board.</p>
<button class="hero-cta">Shop New Arrivals</button>
</div>
</section>
<div class="collhead"><h2>Featured Artists</h2></div>
<main class="grid">
<div class="card">
<div class="card-img img1"><span class="piece-badge">1000 pcs</span></div>
<div class="card-body">
<h3>Golden Hour Meadow</h3>
<p class="artist">by Nora Ashford</p>
<div class="rating">★★★★★<span>4.9 (612)</span></div>
<span class="price">$32</span>
</div>
</div>
<div class="card">
<div class="card-img img2"><span class="piece-badge">500 pcs</span></div>
<div class="card-body">
<h3>Deep Sea Study</h3>
<p class="artist">by Marcus Liu</p>
<div class="rating">★★★★★<span>4.8 (348)</span></div>
<span class="price">$28</span>
</div>
</div>
<div class="card">
<div class="card-img img3"><span class="piece-badge">1000 pcs</span></div>
<div class="card-body">
<h3>Terracotta Grove</h3>
<p class="artist">by Elena Ruiz</p>
<div class="rating">★★★★☆<span>4.6 (201)</span></div>
<span class="price">$32</span>
</div>
</div>
</main>
<footer>
<span>© Art And Fable Puzzle Company</span>
<span class="dim">Art And Fable Puzzle Company · Shop · Artists · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #eeeeee; color: #222222;
border: none; border-radius: 9999px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #ffffff; color: #222222;
border: 1px solid #eeeeee; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cc0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:56px;border-bottom:1px solid #dddddd;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:19px;font-weight:700;color:#222222;}
.navlinks{display:flex;gap:6px;font-size:14px;font-weight:600;color:#222222;}
.navlinks div{padding:8px 12px;border-radius:8px;}
.navlinks div:first-child{background:#f7f7f7;}
.search{width:210px;height:40px;border-radius:9999px;background:#f7f7f7;border:1px solid #dddddd;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#666;}
.hero{background:#eeeeee;padding:26px 30px;}
.hero h1{font-size:24px;font-weight:600;margin:0 0 6px;}
.hero p{font-size:14px;color:#333;margin:0;}
.secTitle{font-size:20px;font-weight:700;padding:16px 30px 10px;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:200px;background:#fff;border:1px solid #e8e8e8;border-radius:8px;padding:12px;position:relative;}
.badge{position:absolute;top:20px;left:20px;background:#cc0000;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.badgestock{position:absolute;top:20px;right:20px;background:#999999;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.thumb{height:100px;border-radius:4px;margin-bottom:8px;}
.ctitle{font-size:14px;font-weight:600;margin-top:8px;}
.cprice{font-size:14px;color:#666;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#f7f7f7;border-top:1px solid #dddddd;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:11px;color:#666;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Silver Platters</div>
<div class="navlinks"><div>Vinyl</div><div>CDs</div><div>Turntables</div><div>Movies</div></div>
<div class="search">Search vinyl, CDs...</div>
</div>
<div class="hero">
<h1>Seattle's home for vinyl since 1983.</h1>
<p>New arrivals, used gems, and turntables — browse the bins online.</p>
</div>
<div class="secTitle">New Arrivals</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#d9d9d9,#999);"></div><div class="ctitle">Analog Waves LP</div><div class="cprice">$24.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c9c9c9,#7a7a7a);"></div><div class="ctitle">Late Night Sessions CD</div><div class="cprice">$14.99</div></div>
<div class="card"><div class="badgestock">Out of Stock</div><div class="thumb" style="background:linear-gradient(135deg,#e0e0e0,#8a8a8a);"></div><div class="ctitle">Deluxe Turntable AT-120</div><div class="cprice">$249.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d0d0d0,#909090);"></div><div class="ctitle">Studio Reissue Box Set</div><div class="cprice">$59.99</div></div>
</div>
<div class="footer"><span>© Silver Platters</span><span>Store Locator · Trade-Ins</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #171717;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #171717;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #171717; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #c02826; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #171717;
border: 1px solid #c02826; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #171717;
border: 1px solid #c5c5c5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #c02826; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Emeril Lagasse</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#171717; font-family:Inter,-apple-system,sans-serif; }
* { box-sizing:border-box; }
.announce { height:36px; background:#c02826; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; }
nav { height:64px; background:#171717; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.logo { font-family:Montserrat,sans-serif; font-weight:700; font-size:19px; }
.navlinks { display:flex; gap:22px; font-family:Montserrat,sans-serif; font-size:14px; font-weight:600; }
.btn { background:#c02826; color:#fff; border-radius:4px; padding:12px 24px; font-size:14px; font-weight:600; font-family:Montserrat,sans-serif; }
.hero { height:220px; background:#121212; color:#fff; display:flex; align-items:center; padding:0 32px; gap:30px; }
.hero-copy { flex:1; }
.hero-copy h1 { font-family:Montserrat,sans-serif; font-size:38px; font-weight:700; letter-spacing:-.5px; margin:0 0 14px; line-height:1.15; }
.hero-copy p { font-size:14px; color:#ccc; opacity:.85; max-width:340px; margin:0 0 16px; }
.hero-art { flex:1; height:170px; border-radius:4px; position:relative; overflow:hidden; background:linear-gradient(160deg,#2a2a2a,#121212); }
.airfryer { position:absolute; width:110px; height:110px; border-radius:16px; background:linear-gradient(160deg,#ececec,#bbb);
top:30px; left:50px; box-shadow:0 14px 26px rgba(0,0,0,.4); }
.airfryer::after { content:''; position:absolute; inset:20%; border-radius:50%; background:#c02826; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:20px 32px; }
.card { background:#fff; border:1px solid #dedede; border-radius:8px; padding:14px; position:relative; }
.thumb { aspect-ratio:1/1; height:80px; background:#f5f5f5; border-radius:4px; margin-bottom:8px; position:relative; }
.sw1 { background:linear-gradient(160deg,#f5f5f5,#c02826); } .sw2 { background:linear-gradient(160deg,#f5f5f5,#171717); }
.sw3 { background:linear-gradient(160deg,#f5f5f5,#999); } .sw4 { background:linear-gradient(160deg,#f5f5f5,#a12120); }
.sale { position:absolute; top:0; left:0; background:#c02826; color:#fff; font-family:Montserrat,sans-serif; font-size:11px;
font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:4px 8px; }
.name { font-family:Montserrat,sans-serif; font-size:14px; font-weight:600; margin:0 0 4px; }
.price { font-family:Montserrat,sans-serif; font-size:16px; font-weight:700; }
.compare { font-size:12px; color:#999; text-decoration:line-through; margin-left:6px; }
</style></head>
<body>
<div class="announce">Free shipping on all orders over $75</div>
<nav>
<div class="logo">Emeril Lagasse</div>
<div class="navlinks"><span>Air Fryers</span><span>Pressure Cookers</span><span>Blenders</span><span>Recipes</span></div>
<div class="btn">Shop All</div>
</nav>
<div class="hero">
<div class="hero-copy">
<h1>Kick it up<br>a notch.</h1>
<p>Kitchen appliances built with Emeril's confidence — every gadget earns its place on the counter.</p>
</div>
<div class="hero-art"><div class="airfryer"></div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb sw1"><span class="sale">Sale</span></div><p class="name">6-in-1 Digital Air Fryer</p><p class="price">$89.99 <span class="compare">$119.99</span></p></div>
<div class="card"><div class="thumb sw2"></div><p class="name">9-in-1 Pressure Cooker</p><p class="price">$99.99</p></div>
<div class="card"><div class="thumb sw3"></div><p class="name">High-Power Blender</p><p class="price">$79.99</p></div>
<div class="card"><div class="thumb sw4"></div><p class="name">Cast Iron Grill Pan</p><p class="price">$49.99</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 400; line-height: 1.55; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #2ba6cb; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #fefefe; color: #0a0a0a;
border: 1px solid #2ba6cb; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #fefefe; color: #222222;
border: 1px solid #c1c1c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #5da423; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fefefe; color:#0a0a0a; box-sizing:border-box;
font-family:'adobe-caslon-pro', Georgia, 'Times New Roman', serif; }
* { box-sizing:border-box; }
.topbar { height:64px; border-bottom:1px solid #e6e6e6; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-size:20px; font-weight:600; }
.navlinks { display:flex; gap:20px; font-family:'Open Sans', Arial, sans-serif; font-size:13px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#0a0a0a; }
.navlinks span:first-child { color:#2ba6cb; border-bottom:2px solid #2ba6cb; padding-bottom:6px; }
.layout { display:flex; height:calc(640px - 64px); }
.media { width:300px; flex-shrink:0; background:#ffffff; display:flex; align-items:center; justify-content:center; }
.cover { width:150px; height:200px; background:linear-gradient(160deg, #2ba6cb 0%, #0a0a0a 100%); border-radius:2px; box-shadow:0 6px 18px rgba(10,10,10,0.08); }
.detail { flex:1; padding:26px 34px; display:flex; flex-direction:column; gap:12px; }
.kicker { font-family:'Open Sans', Arial, sans-serif; font-size:13px; color:#757575; }
h1 { font-size:28px; font-weight:600; margin:0; }
.author { font-size:17px; color:#222222; }
.price { font-family:'Open Sans', Arial, sans-serif; font-size:16px; font-weight:600; }
.badges { display:flex; gap:8px; }
.badge-award { background:#ffae00; color:#0a0a0a; font-family:'Open Sans', Arial, sans-serif; font-size:11px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; border-radius:4px; padding:2px 8px; }
.badge-new { background:#5da423; color:#ffffff; font-family:'Open Sans', Arial, sans-serif; font-size:11px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; border-radius:4px; padding:2px 8px; }
.excerpt { font-size:16px; line-height:1.6; color:#222222; font-style:italic; border-left:2px solid #cacaca; padding-left:14px; }
.tags { display:flex; gap:8px; }
.tag { background:#f0f0f0; color:#757575; font-family:'Open Sans', Arial, sans-serif; font-size:12px; border-radius:999px; padding:4px 12px; }
.actions { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#2ba6cb; color:#ffffff; border:none; border-radius:8px; height:44px; font-family:'Open Sans', Arial, sans-serif; font-size:15px; font-weight:600; }
.btn-secondary { background:#fefefe; color:#0a0a0a; border:1px solid #cacaca; border-radius:8px; height:44px; padding:0 20px; font-family:'Open Sans', Arial, sans-serif; font-size:15px; font-weight:600; }
</style></head>
<body>
<div class="topbar">
<div class="brand">Copper Canyon Press</div>
<div class="navlinks"><span>Poetry</span><span>Prose</span><span>Events</span></div>
</div>
<div class="layout">
<div class="media"><div class="cover"></div></div>
<div class="detail">
<div class="kicker">Single-Author Collection</div>
<h1>What the Water Remembers</h1>
<div class="author">Poems by Idris Calloway</div>
<div class="price">$18.00</div>
<div class="badges"><span class="badge-award">National Book Award Finalist</span><span class="badge-new">New Release</span></div>
<div class="excerpt">"The river does not forgive — it only forgets, slowly, the way a bruise forgets its color."</div>
<div class="tags"><span class="tag">Poetry</span><span class="tag">American</span><span class="tag">Nature</span></div>
<div class="actions">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Read More</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1c2028; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1c2028; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #939599; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #543e35; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c2028; color: #ffffff;
border: 1px solid #543e35; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1c2028; color: #f5f5f5;
border: 1px solid #3f4249; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #939599; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #25252a; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1C2028; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 24px;
border-bottom:1px solid rgba(182,171,161,0.15); }
.nav .brand { font-size:16px; font-weight:700; }
.nav .links { display:flex; gap:20px; font-size:13px; color:#93989E; }
.nav .links .cur { color:#fff; }
.signup { background:#1C2028; border:1px solid #B6ABA1; color:#fff; border-radius:4px; height:32px; padding:0 14px; font-size:13px; font-weight:500; }
.chips { display:flex; gap:8px; padding:14px 24px 0; }
.chip { border-radius:8px; height:36px; padding:0 14px; font-size:13px; display:flex; align-items:center; }
.chip.active { background:#1C2028; border:1px solid #fff; font-weight:600; }
.chip.inactive { background:transparent; border:1px solid rgba(28,32,40,0.5); color:#707882; }
.ticker { margin:14px 24px 0; border:1px solid rgba(182,171,161,0.15); border-radius:8px; overflow:hidden; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:11px; font-weight:500; color:#93989E; padding:9px 16px; border-bottom:1px solid rgba(182,171,161,0.15); }
td { padding:9px 16px; font-size:13px; border-bottom:1px solid rgba(182,171,161,0.08); }
.coin { display:flex; align-items:center; gap:8px; }
.coin .ic { width:22px; height:22px; border-radius:50%; }
.up { color:#E15241; } .down { color:#4880EE; }
.ctarow { display:flex; gap:12px; padding:16px 24px 0; }
.cta-filled { flex:1; background:#543E35; color:#F8F9FA; border-radius:4px; height:56px; font-size:18px; font-weight:500;
display:flex; align-items:center; justify-content:center; }
.cta-outline { flex:1; background:transparent; color:#D8CFC5; border:1px solid #B6ABA1; border-radius:4px; height:56px;
font-size:18px; font-weight:500; display:flex; align-items:center; justify-content:center; background-color:#2a2f38; }
</style></head>
<body>
<nav class="nav">
<div class="brand">Bithumb</div>
<div class="links"><span class="cur">Exchange</span><span>Markets</span><span>NFT</span><span>Wallet</span><span>Support</span></div>
<button class="signup">Sign up</button>
</nav>
<div class="chips">
<div class="chip active">Favorites</div>
<div class="chip inactive">KRW Market</div>
<div class="chip inactive">BTC Market</div>
<div class="chip inactive">USDT Market</div>
</div>
<div class="ticker">
<table>
<tr><th>Asset</th><th>Price (KRW)</th><th>24h change</th><th>Volume</th></tr>
<tr><td><div class="coin"><div class="ic" style="background:linear-gradient(135deg,#f7931a,#ffb84d);"></div>Bitcoin</div></td><td>91,204,000</td><td class="up">+3.42%</td><td>210.4B</td></tr>
<tr><td><div class="coin"><div class="ic" style="background:linear-gradient(135deg,#627eea,#8ea2f2);"></div>Ethereum</div></td><td>4,812,300</td><td class="down">-1.08%</td><td>153.2B</td></tr>
<tr><td><div class="coin"><div class="ic" style="background:linear-gradient(135deg,#00c2a8,#5be3cf);"></div>Solana</div></td><td>288,900</td><td class="up">+6.71%</td><td>98.7B</td></tr>
<tr><td><div class="coin"><div class="ic" style="background:linear-gradient(135deg,#c2a6ff,#8f6bff);"></div>Polkadot</div></td><td>9,420</td><td class="down">-0.42%</td><td>21.4B</td></tr>
<tr><td><div class="coin"><div class="ic" style="background:linear-gradient(135deg,#ffcf4d,#ff9d4d);"></div>Chainlink</div></td><td>19,880</td><td class="up">+2.15%</td><td>30.1B</td></tr>
</table>
</div>
<div class="ctarow">
<div class="cta-filled">Start trading</div>
<div class="cta-outline">View markets</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #331612; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #331612;
border: 1px solid #331612; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #c0392b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Instant Pot</title>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;font-family:'Nunito','Trebuchet MS',sans-serif;color:#333333;}
*{box-sizing:border-box;}
.promo{position:absolute;top:0;left:0;width:960px;height:34px;background:#331612;color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;}
.nav{position:absolute;top:34px;left:0;width:960px;height:64px;background:#fff;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-weight:700;font-size:20px;color:#331612;}
.navlinks{display:flex;gap:26px;font-size:15px;font-weight:500;color:#333;}
.navicons{font-size:13px;color:#333;}
.hero{position:absolute;top:98px;left:0;width:960px;height:250px;background:#faf8f7;display:flex;align-items:center;padding:0 44px;}
.hero h1{font-size:36px;font-weight:700;letter-spacing:-0.5px;color:#121212;margin:0 0 12px 0;width:420px;line-height:1.15;}
.hero p{font-size:15px;color:#333;width:380px;margin:0 0 18px 0;}
.cta{background:#331612;color:#fff;border-radius:8px;padding:14px 28px;font-size:15px;font-weight:600;display:inline-block;}
.pot{position:absolute;right:90px;top:50px;width:150px;height:150px;border-radius:20px;background:linear-gradient(160deg,#4a2a24,#331612);}
.pot::after{content:'';position:absolute;top:-14px;left:20px;width:110px;height:22px;border-radius:8px;background:#5a342c;}
.pot::before{content:'';position:absolute;top:44px;left:44px;width:62px;height:62px;border-radius:50%;background:#f5f3f2;opacity:0.9;}
.sectitle{position:absolute;top:364px;left:36px;font-size:24px;font-weight:700;color:#121212;}
.grid{position:absolute;top:412px;left:36px;width:888px;height:196px;display:flex;gap:16px;}
.card{width:207px;background:#fff;border:1px solid #dedede;border-radius:12px;overflow:hidden;position:relative;}
.imgbox{width:207px;height:100px;background:#f5f3f2;position:relative;}
.imgbox.a{background:linear-gradient(135deg,#f5f3f2,#331612);}
.imgbox.b{background:linear-gradient(135deg,#eeeeee,#6b6b6b);}
.imgbox.c{background:linear-gradient(135deg,#faf8f7,#8a5a4a);}
.imgbox.d{background:linear-gradient(135deg,#f5f3f2,#4a2a24);}
.badge{position:absolute;top:8px;left:8px;background:#c0392b;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;border-radius:4px;padding:4px 8px;}
.cardbody{padding:12px 14px;}
.title{font-size:16px;font-weight:600;color:#121212;margin-bottom:6px;}
.price{font-size:16px;font-weight:700;color:#121212;}
</style>
<div class="promo">FREE SHIPPING ON ORDERS OVER $49 — SHOP FALL RECIPES</div>
<div class="nav">
<div class="logo">Instant Pot</div>
<div class="navlinks"><span>Cookers</span><span>Air Fryers</span><span>Blenders</span><span>Recipes</span></div>
<div class="navicons">Search · Account · Cart</div>
</div>
<div class="hero">
<h1>One pot. Endless dinners.</h1>
<p>Pressure cook, sauté, and slow cook your way through weeknight dinners in a fraction of the time.</p>
<div class="cta">Shop Cookers</div>
<div class="pot"></div>
</div>
<div class="sectitle">Shop Bestsellers</div>
<div class="grid">
<div class="card">
<div class="badge">Best Seller</div>
<div class="imgbox a"></div>
<div class="cardbody"><div class="title">Duo Plus 6-Quart</div><div class="price">$99.95</div></div>
</div>
<div class="card">
<div class="imgbox b"></div>
<div class="cardbody"><div class="title">Vortex Air Fryer 6QT</div><div class="price">$89.95</div></div>
</div>
<div class="card">
<div class="imgbox c"></div>
<div class="cardbody"><div class="title">Ace Blender Nova</div><div class="price">$79.95</div></div>
</div>
<div class="card">
<div class="imgbox d"></div>
<div class="cardbody"><div class="title">Pro Crisp 8-Quart</div><div class="price">$149.95</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #40e2de; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #40e2de; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #266f6d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #102135; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #40e2de; color: #102135;
border: 1px solid #102135; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #40e2de; color: #111111;
border: 1px solid #38c1bd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #266f6d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #38c3c3; color: #102135;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#102135; color:#d7dfe6; box-sizing:border-box;
font-family:Poppins,"NANUMSQUARE",Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-weight:600; font-size:17px; color:#ffffff; }
.navlinks { display:flex; gap:22px; font-size:15px; }
.navlinks span.active { color:#40e2de; }
.lang { display:flex; gap:8px; font-size:14px; }
.lang .on { color:#ffffff; font-weight:500; } .lang .off { color:#9bacbb; }
.hero { text-align:center; padding:26px 34px 20px; }
.eyebrow { color:#40e2de; font-weight:500; font-size:15px; margin-bottom:6px; }
.hero h1 { font-size:32px; font-weight:600; color:#ffffff; margin:0 0 10px; line-height:1.36; }
.hero p { font-size:14px; color:#d7dfe6; margin:0 auto 14px; max-width:480px; line-height:1.5; }
.cta { display:inline-block; color:#40e2de; font-size:16px; font-weight:600; }
.news { background:#ffffff; margin:0 34px; padding:26px; }
.news h2 { color:#102135; font-size:20px; margin:0 0 14px; }
.cards { display:flex; gap:14px; }
.card { flex:1; border:none; padding:14px; }
.card.featured { border:2px solid #40e2de; }
.card .cat { font-size:11px; color:#40e2de; font-weight:700; }
.card h3 { font-size:15px; color:#000000; margin:8px 0 6px; line-height:1.3; }
.card p { font-size:11px; color:#707070; margin:0; }
.icon { width:40px; height:40px; border:1px solid #ffffff; border-radius:50%; margin:14px auto 0; display:flex; align-items:center;
justify-content:center; color:#ffffff; font-size:16px; }
</style></head>
<body>
<nav>
<span class="brand">VUNO</span>
<div class="navlinks"><span class="active">About</span><span>Products</span><span>News</span><span>IR</span><span>Publications</span><span>Career</span></div>
<div class="lang"><span class="on">KR</span><span class="off">EN</span></div>
</nav>
<section class="hero">
<div class="eyebrow">View the Invisible, Know the Unknown</div>
<h1>Leading the future of medical artificial intelligence</h1>
<p>Imaging, pathology, and biosignal AI that augments clinicians in their daily workflow.</p>
<span class="cta">Contact us</span>
</section>
<div class="icon">↓</div>
<section class="news">
<h2>Latest News</h2>
<div class="cards">
<div class="card featured"><span class="cat">CLINICAL</span><h3>Chest X-ray abnormality detection cleared for hospital deployment</h3><p>Regulatory approval expands coverage across partner networks.</p></div>
<div class="card"><span class="cat">RESEARCH</span><h3>Cardiac-arrest risk model reduces false alerts by 21%</h3><p>New study published on ICU deployment outcomes.</p></div>
<div class="card"><span class="cat">IR</span><h3>Quarterly results show continued platform growth</h3><p>Expansion into pathology and biosignal product lines.</p></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #07120c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #07120c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #07120c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #97a39c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #00ac73; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #ffffff; color: #00ac73;
border: 1px solid #00ac73; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #07120c;
border: 1px solid #c1c4c2; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #97a39c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.18; letter-spacing: 0.5px; background: #f3f3f3; color: #1d1d1b;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ecefed; font-family:'Avenir Next Rounded',Arial,sans-serif; color:#1d1d1b; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-size:20px;font-weight:700;color:#07120c;border-radius:9999px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#1d1d1b;}
.cta{background:#00ac73;color:#fff;font-size:13px;font-weight:700;padding:11px 24px;border-radius:9999px;}
.hero{height:250px;display:flex;background:#fff;border-radius:24px;margin:0 36px;overflow:hidden;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 32px;}
.herotext h1{font-size:32px;font-weight:700;margin:0 0 12px;line-height:1.25;color:#07120c;}
.herotext p{font-size:14px;color:#1d1d1b;margin:0 0 18px;max-width:290px;}
.btn{display:inline-block;background:#00ac73;color:#fff;font-size:13px;font-weight:700;padding:13px 26px;border-radius:9999px;width:fit-content;}
.heroimg{width:54%;position:relative;background:linear-gradient(140deg,#e6f7f0,#00ac73 90%);}
.card1{position:absolute;top:50px;left:60px;width:130px;height:80px;background:#fff;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,0.1);}
.card2{position:absolute;top:100px;left:120px;width:130px;height:80px;background:#122e1d;border-radius:14px;}
.dot{position:absolute;top:60px;right:60px;width:36px;height:36px;border-radius:50%;background:#fff;}
.sec{padding:22px 36px 0;}
.sectitle{font-size:17px;font-weight:700;color:#07120c;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:20px;padding:12px;}
.thumb{height:96px;border-radius:14px;margin-bottom:8px;}
.pname{font-size:14px;font-weight:700;color:#07120c;}
.pprice{font-size:13px;color:#1d1d1b;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Moo</div>
<div class="navlinks"><span>Business Cards</span><span>Stationery</span><span>Packaging</span></div>
<div class="cta">Start Designing</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Print that feels as good as it looks.</h1>
<p>Business cards, stationery, and packaging designed to make a real first impression.</p>
<div class="btn">Design My Cards</div>
</div>
<div class="heroimg"><div class="dot"></div><div class="card2"></div><div class="card1"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00ac73,#122e1d)"></div><div class="pname">Original Business Cards</div><div class="pprice">from $19.90</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#07120c,#00ac73)"></div><div class="pname">Luxe Cards</div><div class="pprice">from $34.90</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#97a39c,#00ac73)"></div><div class="pname">Notebooks</div><div class="pprice">from $14.90</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#122e1d,#97a39c)"></div><div class="pname">Custom Stickers</div><div class="pprice">from $9.90</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfbfb; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfbfb; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #a2a2a2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.25px; background: #0044cc; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.25px; background: #fbfbfb; color: #0044cc;
border: 1px solid #0044cc; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fbfbfb; color: #222222;
border: 1px solid #c5c5c5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a2a2a2; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #0044cc; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fbfbfb; color:#444444; font-family:Arial,Helvetica,sans-serif; }
*{box-sizing:border-box;}
.nav{height:58px;background:#0044cc;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:700;color:#d1e3fb;}
.navcta{background:#fff;color:#0044cc;font-size:12px;font-weight:700;padding:9px 18px;border-radius:4px;}
.hero{height:240px;display:flex;align-items:center;padding:0 34px;background:#e6e6e6;position:relative;overflow:hidden;}
.herotext{width:50%;}
.herotext h1{font-size:28px;font-weight:700;color:#222222;margin:0 0 12px;line-height:1.25;}
.herotext p{font-size:13px;color:#444444;margin:0 0 18px;max-width:320px;line-height:1.6;}
.cta{display:inline-block;background:#0044cc;color:#fff;font-size:13px;font-weight:700;padding:12px 26px;border-radius:4px;width:fit-content;}
.circuit{position:absolute;right:60px;top:50px;width:220px;height:140px;}
.node{position:absolute;width:16px;height:16px;border-radius:50%;background:#2bbaf4;}
.n1{left:0;top:0;} .n2{left:100px;top:40px;} .n3{left:190px;top:10px;} .n4{left:60px;top:100px;}
.wire{position:absolute;background:#0088cc;height:3px;}
.w1{width:100px;left:8px;top:8px;transform:rotate(20deg);}
.w2{width:100px;left:100px;top:48px;transform:rotate(-15deg);}
.w3{width:70px;left:60px;top:100px;transform:rotate(-25deg);}
.seclabel{font-size:14px;font-weight:700;color:#222222;padding:20px 34px 12px;}
.grid{display:flex;gap:14px;padding:0 34px;}
.card{width:150px;background:#fff;border-radius:8px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#bd362f;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 7px;border-radius:4px;z-index:2;}
.thumb{height:92px;border-radius:6px;margin-bottom:8px;}
.ptitle{font-size:12px;font-weight:700;color:#222222;line-height:1.3;height:30px;overflow:hidden;}
.pprice{font-size:13px;font-weight:700;color:#0044cc;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:11px;color:#a2a2a2;border-top:1px solid #d9d9d9;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Thames And Kosmos</div>
<div class="navlinks"><span>Chemistry</span><span>Physics</span><span>Circuitry</span><span>Astronomy</span></div>
<div class="navcta">Shop Kits</div>
</div>
<div class="hero">
<div class="herotext">
<h1>A Laboratory of Curiosity, in a Box.</h1>
<p>Real experiments, real circuits, real chemistry — kits built for kids who ask why.</p>
<div class="cta">Shop Science Kits</div>
</div>
<div class="circuit"><div class="wire w1"></div><div class="wire w2"></div><div class="wire w3"></div><div class="node n1"></div><div class="node n2"></div><div class="node n3"></div><div class="node n4"></div></div>
</div>
<div class="seclabel">Bestselling Kits</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#0044cc,#2bbaf4)"></div><div class="ptitle">Physics Workshop 250</div><div class="pprice">$59.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2bbaf4,#0044cc)"></div><div class="ptitle">Kids First Chemistry Set</div><div class="pprice">$29.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0088cc,#0044cc)"></div><div class="ptitle">Electronics Discovery Kit</div><div class="pprice">$44.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0044cc,#0088cc)"></div><div class="ptitle">Solar System Planetarium</div><div class="pprice">$39.95</div></div>
</div>
<div class="footer"><span>© Real Science, Real Fun</span><span>Ages 8 and Up</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f8f2; color: #282828;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f8f2; color: #282828;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #282828; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #7d7b76; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #7bc7c7; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #f9f8f2; color: #282828;
border: 1px solid #7bc7c7; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #efeeeb; color: #282828;
border: 1px solid #c5c4c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7d7b76; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #b7d692; color: #282828;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Arial,Helvetica,sans-serif; background:#f9f8f2; color:#574846; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-size:19px;font-weight:400;letter-spacing:0.5px;color:#282828;}
.navlinks{display:flex;gap:24px;font-size:13px;text-transform:uppercase;letter-spacing:0.4px;color:#282828;}
.hero{height:230px;display:flex;}
.herotxt{width:44%;padding:24px 36px;display:flex;flex-direction:column;justify-content:center;}
.herotxt h1{font-family:Georgia,serif;font-size:28px;font-weight:400;color:#282828;margin:0 0 12px;line-height:1.35;}
.herotxt p{font-family:Georgia,serif;font-size:14px;line-height:1.6;margin:0 0 18px;max-width:280px;}
.cta{width:fit-content;font-size:13px;letter-spacing:0.3px;background:#282828;color:#f9f8f2;padding:12px 26px;border-radius:8px;}
.room{width:56%;background:#efeeeb;position:relative;}
.sofa{position:absolute;bottom:40px;left:60px;width:220px;height:80px;border-radius:12px;background:linear-gradient(160deg,#eeecea,#7bc7c7);}
.lamp{position:absolute;bottom:40px;right:60px;width:6px;height:130px;background:#282828;}
.lamp:after{content:'';position:absolute;top:-30px;left:-22px;width:50px;height:28px;border-radius:12px 12px 0 0;background:#ca8268;}
.rug{position:absolute;bottom:20px;left:40px;right:40px;height:16px;border-radius:8px;background:#b7d692;opacity:0.5;}
.sec{padding:20px 36px 0;}
.sec h2{font-size:17px;font-weight:400;color:#282828;margin:0 0 14px;}
.grid{display:flex;gap:16px;}
.card{width:196px;background:#fff;border-radius:12px;padding:10px;}
.cimg{height:110px;border-radius:8px;margin-bottom:8px;}
.ctitle{font-family:Georgia,serif;font-size:14px;font-weight:400;color:#282828;}
.cprice{font-size:13px;margin-top:4px;color:#7d7b76;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#282828;color:#f9f8f2;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:11px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Muuto</div>
<div class="navlinks"><div>Seating</div><div>Lighting</div><div>Tables</div><div>Storage</div></div>
</div>
<div class="hero">
<div class="herotxt">
<h1>New Nordic,<br>made accessible.</h1>
<p>Furniture and lighting designed to feel like quiet Scandinavian daylight.</p>
<div class="cta">Explore the Collection</div>
</div>
<div class="room"><div class="rug"></div><div class="sofa"></div><div class="lamp"></div></div>
</div>
<div class="sec">
<h2>Living Room Essentials</h2>
<div class="grid">
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#eeecea,#7bc7c7)"></div><div class="ctitle">Oslo Lounge Chair</div><div class="cprice">$895</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#fff,#ca8268)"></div><div class="ctitle">Ambit Pendant Lamp</div><div class="cprice">$349</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#e2f1fd,#b7d692)"></div><div class="ctitle">Nerd Side Table</div><div class="cprice">$225</div></div>
</div>
</div>
<div class="footer"><span>Designed in Copenhagen</span><span>Trade Program Care</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.18; letter-spacing: -0.44px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #ff385c; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #ffffff; color: #222222;
border: 1px solid #ff385c; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; background: #ffffff; color: #222222;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #ebebeb; background:#ffffff; }
.brand { font-size:19px; font-weight:700; color:#ff385c; letter-spacing:-0.3px; }
.tabs { display:flex; gap:26px; align-items:center; }
.tab { font-size:14px; font-weight:600; color:#6a6a6a; display:flex; align-items:center; gap:6px; }
.tab.active { color:#222222; position:relative; padding-bottom:19px; }
.tab.active::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:#222222; }
.new-tag { background:#ffffff; border:1px solid #dddddd; color:#222; font-size:8px; font-weight:700;
letter-spacing:0.3px; text-transform:uppercase; padding:1px 6px; border-radius:999px; }
.navcta { background:#ff385c; color:#fff; border-radius:999px; padding:9px 18px; font-size:14px; font-weight:600; }
.searchwrap { display:flex; justify-content:center; padding:20px 0 14px; }
.searchbar { display:flex; align-items:stretch; background:#fff; border:1px solid #dddddd; border-radius:999px;
box-shadow:0 1px 2px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06); overflow:hidden; }
.seg { padding:11px 22px; display:flex; flex-direction:column; gap:1px; min-width:120px; }
.seg + .seg { border-left:1px solid #ebebeb; }
.seg .lbl { font-size:11px; font-weight:700; color:#222; }
.seg .val { font-size:12px; color:#929292; }
.orb { width:40px; height:40px; border-radius:999px; background:#ff385c; align-self:center; margin:6px 10px 6px 4px;
display:flex; align-items:center; justify-content:center; }
.orb svg { width:16px; height:16px; }
.catstrip { display:flex; gap:26px; justify-content:center; padding:2px 0 14px; }
.cat { font-size:12px; font-weight:600; color:#929292; padding-bottom:8px; }
.cat.active { color:#222; border-bottom:2px solid #222; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding:0 32px; }
.card { display:flex; flex-direction:column; gap:8px; }
.photo { position:relative; aspect-ratio:1/1; border-radius:14px; overflow:hidden; }
.p1 .photo { background:linear-gradient(155deg,#f6d365,#fda085 55%,#f6d365); }
.p2 .photo { background:linear-gradient(155deg,#89f7fe,#66a6ff 55%,#89f7fe); }
.p3 .photo { background:linear-gradient(155deg,#a1c4fd,#c2e9fb 60%); }
.fav-badge { position:absolute; top:10px; left:10px; background:#fff; border-radius:999px; padding:4px 10px;
font-size:11px; font-weight:600; box-shadow:0 2px 6px rgba(0,0,0,0.15); }
.heart { position:absolute; top:10px; right:10px; width:24px; height:24px; }
.heart svg { width:22px; height:22px; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.35)); }
.meta-row { display:flex; justify-content:space-between; font-size:15px; font-weight:600; }
.meta-sub { font-size:14px; color:#6a6a6a; }
.price { font-size:14px; }
.price b { font-weight:600; }
</style></head>
<body>
<nav>
<div class="brand">Airbnb</div>
<div class="tabs">
<div class="tab active">Homes</div>
<div class="tab">Experiences <span class="new-tag">NEW</span></div>
<div class="tab">Services <span class="new-tag">NEW</span></div>
</div>
<div class="navcta">Sign up</div>
</nav>
<div class="searchwrap">
<div class="searchbar">
<div class="seg"><span class="lbl">Where</span><span class="val">Search destinations</span></div>
<div class="seg"><span class="lbl">Check in</span><span class="val">Add dates</span></div>
<div class="seg"><span class="lbl">Check out</span><span class="val">Add dates</span></div>
<div class="seg"><span class="lbl">Who</span><span class="val">Add guests</span></div>
<div class="orb"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.2" y2="16.2"/></svg></div>
</div>
</div>
<div class="catstrip">
<span class="cat active">Amazing views</span>
<span class="cat">Cabins</span>
<span class="cat">Trending</span>
<span class="cat">Beachfront</span>
<span class="cat">Design</span>
</div>
<div class="grid">
<div class="card p1">
<div class="photo"><span class="fav-badge">Guest favorite</span>
<span class="heart"><svg viewBox="0 0 32 32"><path d="M16 28s-11-7-13.5-13.5C.5 9 3 4 8 4c3 0 5 2 8 6 3-4 5-6 8-6 5 0 7.5 5 5.5 10.5C27 21 16 28 16 28z" fill="rgba(255,255,255,0.9)"/></svg></span>
</div>
<div class="meta-row"><span>Cottage in Wilmington</span><span>★ 4.91</span></div>
<div class="meta-sub">2 nights · Nov 12–14</div>
<div class="price"><b>$142</b> night</div>
</div>
<div class="card p2">
<div class="photo"><span class="heart"><svg viewBox="0 0 32 32"><path d="M16 28s-11-7-13.5-13.5C.5 9 3 4 8 4c3 0 5 2 8 6 3-4 5-6 8-6 5 0 7.5 5 5.5 10.5C27 21 16 28 16 28z" fill="rgba(255,255,255,0.55)" stroke="#fff" stroke-width="1"/></svg></span></div>
<div class="meta-row"><span>Villa in Santorini</span><span>★ 4.98</span></div>
<div class="meta-sub">5 nights · Dec 3–8</div>
<div class="price"><b>$389</b> night</div>
</div>
<div class="card p3">
<div class="photo"><span class="fav-badge">Guest favorite</span>
<span class="heart"><svg viewBox="0 0 32 32"><path d="M16 28s-11-7-13.5-13.5C.5 9 3 4 8 4c3 0 5 2 8 6 3-4 5-6 8-6 5 0 7.5 5 5.5 10.5C27 21 16 28 16 28z" fill="rgba(255,255,255,0.55)" stroke="#fff" stroke-width="1"/></svg></span>
</div>
<div class="meta-row"><span>Cabin near Athens</span><span>★ 4.87</span></div>
<div class="meta-sub">3 nights · Jan 9–12</div>
<div class="price"><b>$96</b> night</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a2e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a2e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a2e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b80; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #de8435; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #1a1a2e;
border: 1px solid #de8435; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #1a1a2e;
border: 1px solid #c6c6cb; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b80; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #27ae60; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>D&D Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:'Roboto','Helvetica Neue',Arial,sans-serif;
background:#ffffff; color:#1a1a2e;
}
*{box-sizing:border-box;}
.topnav{height:64px;background:#1a1a2e;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{color:#fff;font-family:'Roboto Condensed',sans-serif;font-size:20px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;}
.navlinks{display:flex;gap:22px;font-family:'Roboto Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#fff;}
.navlinks span.active{color:#de8435;}
.searchbar{background:#fff;border-radius:9999px;padding:8px 18px;font-size:13px;color:#2d2d44;width:150px;}
.hero{background:#1a1a2e;color:#fff;padding:40px 36px;text-align:center;}
.hero h1{font-family:'Roboto Condensed',sans-serif;font-size:48px;font-weight:700;letter-spacing:-0.5px;line-height:1.1;margin:0 0 14px;}
.hero p{color:#9a9aad;font-size:14px;margin:0 auto 18px;max-width:400px;}
.herobtn{background:#de8435;color:#fff;font-family:'Roboto Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:12px 28px;border-radius:8px;display:inline-block;}
.section{padding:20px 36px 0;}
.grid{display:flex;gap:14px;}
.card{flex:1;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.08);overflow:hidden;}
.card-img{height:110px;position:relative;}
.card-img.c1{background:linear-gradient(140deg,#de8435,#1a1a2e);}
.card-img.c2{background:linear-gradient(140deg,#bdd6e6,#1a1a2e);}
.card-img.c3{background:linear-gradient(140deg,#1a1a2e,#de8435);}
.card-img.c4{background:linear-gradient(140deg,#c46f2a,#bdd6e6);}
.badge{position:absolute;top:8px;left:8px;background:#27ae60;color:#fff;font-family:'Roboto Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.card-title{font-size:16px;font-weight:600;padding:12px 16px 4px;}
.card-price{font-size:14px;color:#de8435;padding:0 16px 12px;}
</style>
<div class="topnav">
<div class="logo">Dungeons And Dragons</div>
<div class="navlinks">
<span class="active">Sourcebooks</span><span>Adventures</span><span>Accessories</span><span>Digital</span>
</div>
<div class="searchbar">Search…</div>
</div>
<div class="hero">
<h1>ADVENTURE AWAITS</h1>
<p>Sourcebooks, adventure modules, and dice for every table.</p>
<div class="herobtn">Join the Adventure</div>
</div>
<div class="section">
<div class="grid">
<div class="card"><div class="card-img c1"><span class="badge">New</span></div><div class="card-title">Player's Handbook</div><div class="card-price">$49.95</div></div>
<div class="card"><div class="card-img c2"></div><div class="card-title">Monster Manual</div><div class="card-price">$49.95</div></div>
<div class="card"><div class="card-img c3"><span class="badge" style="background:#c0392b;">Sale</span></div><div class="card-title">Curse of Strahd</div><div class="card-price">$39.95</div></div>
<div class="card"><div class="card-img c4"></div><div class="card-title">Dungeon Master's Guide</div><div class="card-price">$49.95</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #000000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Electric Fetus</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#000000; font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; }
* { box-sizing:border-box; }
.topnav { height:48px; display:flex; align-items:center; justify-content:center; gap:30px;
border-bottom:1px solid #f0f0f0; font-size:13px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.topnav span { color:#666666; }
.topnav span.on { color:#000000; }
.header { display:flex; align-items:center; justify-content:space-between; padding:18px 32px; }
.logo { font-size:22px; font-weight:700; }
.search { border:1px solid #e0e0e0; border-radius:0; padding:10px 16px; font-size:14px; width:340px; color:#333; }
.cart-btn { background:#000; color:#fff; border-radius:8px; padding:10px 20px; font-size:12px; font-weight:700; letter-spacing:.3px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:6px 32px; }
.card { border:1px solid #e0e0e0; border-radius:4px; padding:16px; }
.thumb { aspect-ratio:1/1; height:96px; border-radius:2px; margin-bottom:10px; }
.t1 { background:linear-gradient(160deg,#3a3a3a,#000); }
.t2 { background:linear-gradient(160deg,#cc0000,#660000); }
.t3 { background:linear-gradient(160deg,#999,#333); }
.t4 { background:linear-gradient(160deg,#666,#111); }
.name { font-size:14px; font-weight:700; margin:0 0 2px; }
.artist { font-size:14px; color:#666666; margin:0 0 6px; }
.price { font-size:14px; font-weight:700; }
.sale { color:#cc0000; }
.badge { display:inline-block; background:#000; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase;
letter-spacing:.5px; padding:2px 8px; border-radius:4px; margin-bottom:6px; }
footer { margin-top:8px; background:#f5f5f5; padding:20px 32px; display:flex; justify-content:space-between; font-size:12px; color:#666; }
footer .col b { display:block; color:#000; font-size:14px; margin-bottom:8px; }
footer .col div { margin-bottom:4px; }
</style></head>
<body>
<div class="topnav"><span class="on">New Arrivals</span><span>Vinyl</span><span>CDs</span><span>Turntables</span><span>Merch</span></div>
<div class="header">
<div class="logo">Electric Fetus</div>
<input class="search" placeholder="Search artist, album, format..." disabled>
<div class="cart-btn">Cart (0)</div>
</div>
<div class="grid">
<div class="card"><div class="thumb t1"></div><span class="badge">New</span><p class="name">Midnight Session</p><p class="artist">The Quiet Ones</p><p class="price">$28.99</p></div>
<div class="card"><div class="thumb t2"></div><p class="name">Red Room LP</p><p class="artist">Sable Coast</p><p class="price sale">$19.99</p></div>
<div class="card"><div class="thumb t3"></div><p class="name">Analog Fields</p><p class="artist">Grayson Vale</p><p class="price">$24.99</p></div>
<div class="card"><div class="thumb t4"></div><p class="name">Static & Slow</p><p class="artist">Iron Wren</p><p class="price">$22.99</p></div>
</div>
<footer>
<div class="col"><b>Shop</b><div>New Arrivals</div><div>Used Vinyl</div><div>Turntables</div></div>
<div class="col"><b>Store</b><div>Minneapolis, MN</div><div>Since 1968</div><div>In-Store Events</div></div>
<div class="col"><b>Help</b><div>Shipping</div><div>Returns</div><div>Contact</div></div>
<div class="col">© 2026 The Electric Fetus</div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafbfc; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafbfc; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.25px; background: #ce0e2d; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.25px; background: #fafbfc; color: #1a1a1a;
border: 1px solid #ce0e2d; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafbfc; color: #1a1a1a;
border: 1px solid #c2c3c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ce0e2d; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafbfc; font-family:'Roboto','Helvetica Neue',Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:64px;border-bottom:1px solid #e6e6e6;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:19px;font-weight:700;color:#1a1a1a;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;letter-spacing:.25px;text-transform:uppercase;color:#1a1a1a;}
.navlinks div:first-child{color:#ce0e2d;border-bottom:2px solid #ce0e2d;padding-bottom:4px;}
.catstrip{display:flex;gap:16px;padding:8px 30px;border-bottom:1px solid #e6e6e6;font-size:14px;color:#6b6b6b;}
.catstrip div:first-child{color:#ce0e2d;border-bottom:2px solid #ce0e2d;padding-bottom:4px;}
.hero{height:180px;background:#fcf0f2;display:flex;align-items:center;padding:0 30px;}
.hero h1{font-size:28px;font-weight:500;color:#1a1a1a;margin:0 0 10px;}
.hero p{font-size:14px;color:#333;margin:0 0 12px;}
.secTitle{font-size:18px;font-weight:500;padding:16px 30px 10px;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:200px;background:#fff;border:1px solid #e6e6e6;border-radius:8px;overflow:hidden;}
.thumb{height:110px;background:#f0f1f2;border-radius:8px 8px 0 0;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#ce0e2d;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.cardbody{padding:8px 16px 12px;}
.ctitle{font-size:16px;font-weight:500;margin:0 0 4px;}
.cprice{font-size:16px;font-weight:400;color:#333;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#f0f1f2;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:11px;color:#6b6b6b;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Skip Hop</div>
<div class="navlinks"><div>Diaper Bags</div><div>Feeding</div><div>Bath</div></div>
</div>
<div class="catstrip"><div>New Arrivals</div><div>Best Sellers</div><div>Sale</div></div>
<div class="hero">
<div>
<h1>Gear that keeps up with baby.</h1>
<p>Diaper bags, feeding gear, and bath essentials built for busy parents.</p>
</div>
</div>
<div class="secTitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">Sale</div></div><div class="cardbody"><div class="ctitle">Grab & Go Diaper Bag</div><div class="cprice">$59.99</div></div></div>
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="ctitle">Stack & Snack Container</div><div class="cprice">$14.99</div></div></div>
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="ctitle">Moby Bath Sponge Set</div><div class="cprice">$12.99</div></div></div>
</div>
<div class="footer"><span>© Skip Hop</span><span>Registry · Shipping</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 0.1px; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #ffc617; color: #121212;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: transparent; color: #121212;
border: 1px solid #ffc617; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #38c172; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121212; font-family:'Arial Black',Arial,sans-serif; color:#ffffff; }
*{box-sizing:border-box;}
.bar{height:26px;background:#ffc617;color:#121212;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;}
.nav{height:58px;background:#191919;border-bottom:2px solid #ffc617;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:22px;font-weight:800;letter-spacing:-0.5px;color:#ffc617;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;color:#ffffff;}
.cart{background:#002ee7;color:#fff;font-size:11px;font-weight:700;padding:6px 12px;border-radius:4px;text-transform:uppercase;}
.hero{height:250px;display:flex;align-items:center;background:#ffc617;padding:0 32px;}
.heroText{width:480px;}
.h1{font-size:40px;font-weight:800;letter-spacing:-0.5px;line-height:1.05;color:#121212;margin:0 0 12px;}
.sub{font-size:14px;font-weight:600;color:#232323;margin:0 0 18px;width:400px;}
.cta{display:inline-flex;align-items:center;justify-content:center;width:180px;height:46px;background:#121212;color:#ffc617;font-size:14px;font-weight:800;letter-spacing:0.3px;text-transform:uppercase;border-radius:6px;}
.cardpile{position:relative;width:280px;height:210px;}
.stickerCard{position:absolute;width:120px;height:160px;border-radius:8px;box-shadow:0 6px 0 rgba(0,0,0,0.3);}
.c1{background:#002ee7;top:10px;left:10px;transform:rotate(-8deg);}
.c2{background:#38c172;top:0;left:100px;transform:rotate(6deg);}
.c3{background:#121212;top:24px;left:60px;transform:rotate(-2deg);z-index:2;}
.sec{padding:22px 32px 0;}
.filterRow{display:flex;gap:10px;margin-bottom:16px;}
.chip{background:#232323;border-radius:4px;padding:6px 14px;font-size:11px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;color:#ffffff;}
.chip.active{background:#ffc617;color:#121212;}
.grid{display:flex;gap:12px;}
.card{width:198px;background:#191919;border-radius:6px;padding:10px;position:relative;}
.thumb{height:100px;border-radius:4px;margin-bottom:10px;}
.badge{position:absolute;top:20px;left:20px;font-size:9px;font-weight:800;letter-spacing:0.3px;text-transform:uppercase;padding:3px 8px;border-radius:4px;color:#fff;}
.bnew{background:#38c172;}
.bbest{background:#002ee7;}
.pname{font-size:13px;font-weight:800;color:#ffffff;margin:0 0 4px;text-transform:uppercase;}
.pprice{font-size:14px;font-weight:800;color:#ffc617;}
</style>
<div class="bar">Free Shipping On Orders Over $35</div>
<div class="nav">
<div class="logo">What DO You Meme</div>
<div class="navlinks"><span>Card Games</span><span>Expansions</span><span>Gifts</span></div>
<div class="cart">Cart (3)</div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Party Foul Not Included.</div>
<div class="sub">The adult party game that turns a Friday night into a legal problem.</div>
<div class="cta">Shop The Game</div>
</div>
<div class="cardpile">
<div class="stickerCard c1"></div>
<div class="stickerCard c2"></div>
<div class="stickerCard c3"></div>
</div>
</div>
<div class="sec">
<div class="filterRow"><div class="chip active">All</div><div class="chip">Expansions</div><div class="chip">Bundles</div><div class="chip">Gifts</div></div>
<div class="grid">
<div class="card"><span class="badge bbest">Best Seller</span><div class="thumb" style="background:linear-gradient(135deg,#002ee7,#121212);"></div><div class="pname">Core Game</div><div class="pprice">$34.99</div></div>
<div class="card"><span class="badge bnew">New</span><div class="thumb" style="background:linear-gradient(135deg,#38c172,#121212);"></div><div class="pname">Freaky Pack</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffc617,#121212);"></div><div class="pname">After Dark Pack</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#121212,#002ee7);"></div><div class="pname">Family Edition</div><div class="pprice">$29.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2d72d2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2d72d2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9bbae5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #111418; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2d72d2; color: #111418;
border: 1px solid #111418; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2d72d2; color: #f5f5f5;
border: 1px solid #4d87d8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9bbae5; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2963b4; color: #111418;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c2127; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { height:212px; background:#111418; padding:34px 40px; position:relative; overflow:hidden; }
.hero::after { content:''; position:absolute; right:0; top:0; width:420px; height:212px;
background-image:
linear-gradient(rgba(45,114,210,0.18) 1px, transparent 1px),
linear-gradient(90deg, rgba(45,114,210,0.18) 1px, transparent 1px);
background-size:28px 28px; opacity:0.7; }
.hero .kicker { color:#5f6b7c; font-size:13px; font-weight:400; margin:0 0 8px; position:relative; }
.hero h1 { color:#ffffff; font-size:28px; font-weight:400; line-height:1.2; margin:0 0 16px;
max-width:520px; position:relative; }
.hero .row { display:flex; gap:10px; position:relative; }
.hero .btn-blue { background:#2d72d2; color:#ffffff; border:none; border-radius:4px;
padding:4px 16px; height:30px; font-size:14px; font-weight:500; display:flex; align-items:center; }
.hero .btn-ghost { background:transparent; color:#ffffff; border:1px solid #5f6b7c; border-radius:4px;
padding:4px 16px; height:30px; font-size:14px; display:flex; align-items:center; }
.docs { display:flex; height:428px; }
.dside { width:190px; flex-shrink:0; border-right:1px solid #eaeef2; padding:18px 14px; }
.dside .grp { font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:#5f6b7c;
padding:10px 8px 4px; }
.dside .link { padding:6px 8px; font-size:13px; color:#1c2127; border-radius:4px; }
.dside .link.active { color:#215db0; background:#eef3fc; }
.dmain { flex:1; padding:22px 28px; }
.dmain h2 { font-size:22px; font-weight:600; margin:0 0 6px; }
.dmain .sub { font-size:14px; color:#5f6b7c; margin:0 0 18px; }
.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.card { background:#ffffff; border-radius:4px; padding:16px 18px;
box-shadow:rgba(0,0,0,0.15) 0px 0px 0px 1px, rgba(0,0,0,0.02) 0px 0px 5px 0px;
height:118px; }
.card .tag { font-size:11px; color:#5f6b7c; margin-bottom:6px; }
.card .name { font-size:15px; font-weight:600; color:#1c2127; margin-bottom:6px; }
.card .desc { font-size:13px; color:#215db0; line-height:1.4; }
</style></head>
<body>
<section class="hero">
<p class="kicker">Palantir Blueprint · v6.2</p>
<h1>A React-based UI toolkit for the web,<br>optimized for complex data-dense interfaces.</h1>
<div class="row">
<div class="btn-blue">Get started</div>
<div class="btn-ghost">View on GitHub</div>
</div>
</section>
<div class="docs">
<aside class="dside">
<div class="grp">Foundations</div>
<div class="link">Colors</div>
<div class="link">Typography</div>
<div class="link active">Components</div>
<div class="grp">Components</div>
<div class="link">Button</div>
<div class="link">Card</div>
<div class="link">Table</div>
<div class="link">Select</div>
<div class="link">Dialog</div>
</aside>
<div class="dmain">
<h2>Components</h2>
<p class="sub">Optimized for building complex data-dense interfaces.</p>
<div class="cards">
<div class="card"><div class="tag">CORE</div><div class="name">Card</div><div class="desc">A bordered container with configurable elevation and padding.</div></div>
<div class="card"><div class="tag">CORE</div><div class="name">Table</div><div class="desc">A performant, scrollable data table with resizable columns.</div></div>
<div class="card"><div class="tag">SELECT</div><div class="name">Select</div><div class="desc">A dropdown list for choosing one item from a set of options.</div></div>
<div class="card"><div class="tag">DATETIME</div><div class="name">DateRangeInput</div><div class="desc">An input for selecting a range between two dates.</div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #272725; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #272725; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.4px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #c8c8c8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.4px; background: #dd4938; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.4px; background: #272725; color: #f6f6f6;
border: 1px solid #dd4938; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9f9f9; color: #3a3a38;
border: 1px solid #272725; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c8c8c8; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.6px; background: #dd4938; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#272725; font-family:'aktiv-grotesk',Arial,sans-serif; color:#c8c8c8; }
*{box-sizing:border-box;}
.nav{height:64px;background:#272725;display:flex;align-items:center;justify-content:space-between;padding:0 28px;}
.logo{font-family:'Epilogue',sans-serif;font-weight:700;font-size:20px;color:#fff;letter-spacing:-.5px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;}
.navlinks span:first-child{color:#fff;}
.hero{padding:36px 28px 20px;}
.h1{font-family:'Epilogue',sans-serif;font-weight:700;font-size:42px;color:#fff;letter-spacing:-1.2px;line-height:1.1;margin:0 0 8px;max-width:520px;}
.sub{font-size:15px;color:#c8c8c8;margin:0 0 18px;max-width:400px;}
.cta{display:inline-block;background:#dd4938;color:#fff;font-size:14px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;padding:12px 26px;border-radius:8px;}
.grid{display:flex;gap:14px;padding:8px 28px 0;}
.card{width:150px;background:#fafafa;border-radius:12px;overflow:hidden;position:relative;}
.thumb{height:150px;background:linear-gradient(135deg,#3a3a38,#dd4938);}
.badge{position:absolute;top:8px;left:8px;background:#dd4938;color:#fff;font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.cardbody{padding:12px 16px 12px;}
.ptitle{font-size:16px;font-weight:500;color:#272725;}
.pprice{font-size:16px;color:#272725;margin-top:4px;}
.searchbar{margin:18px 28px 0;background:#f9f9f9;border-radius:9999px;padding:10px 20px;font-size:13px;color:#3a3a38;width:280px;}
.divider{height:1px;background:#3a3a38;margin:16px 28px;}
.artistRow{display:flex;justify-content:space-between;padding:0 28px;}
.artistName{font-family:'Epilogue',sans-serif;font-size:20px;font-weight:600;color:#fff;}
.artistRole{font-size:11px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:#c8c8c8;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#1a1a18;display:flex;align-items:center;justify-content:space-between;padding:0 28px;font-size:12px;color:#c8c8c8;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Matador Records</div>
<div class="navlinks"><span>Artists</span><span>News</span><span>Shop</span><span>Tours</span></div>
</div>
<div class="hero">
<div class="h1">New pressings for a record store at midnight.</div>
<div class="sub">Vinyl, tour merch, and pre-orders from the label's full roster.</div>
<div class="cta">Shop Vinyl</div>
</div>
<div class="grid">
<div class="card"><div class="badge">Pre-Order</div><div class="thumb"></div><div class="cardbody"><div class="ptitle">Low Static LP</div><div class="pprice">$28</div></div></div>
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#c13515,#272725)"></div><div class="cardbody"><div class="ptitle">Field Recordings EP</div><div class="pprice">$22</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3a3a38,#c8c8c8)"></div><div class="cardbody"><div class="ptitle">Nightshade Tour Tee</div><div class="pprice">$32</div></div></div>
</div>
<div class="divider"></div>
<div class="artistRow"><div class="artistName">Field Static</div><div class="artistRole">Indie Rock</div></div>
<div class="footer"><span>© Matador Records</span><span>About · Contact · Newsletter</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #313131; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 4px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; background: #cc0000; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; background:#fff; color:#313131; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #dcdcdc;}
.logo{font-size:18px;font-weight:700;color:#1a1a1a;}
.searchbar{width:340px;height:32px;border:1px solid #dcdcdc;border-radius:2px;display:flex;align-items:center;padding:0 12px;font-size:13px;color:#999999;background:#f5f5f5;}
.catstrip{height:34px;display:flex;align-items:center;gap:22px;padding:0 28px;border-bottom:1px solid #e8e8e8;font-size:13px;font-weight:500;color:#313131;}
.catstrip span:first-child{font-weight:700;color:#1a1a1a;border-bottom:2px solid #1a1a1a;padding-bottom:9px;}
.sec{padding:14px 28px 0;}
.secTitle{font-size:14px;font-weight:700;color:#1a1a1a;margin-bottom:10px;}
.grid{display:flex;gap:12px;}
.card{width:143px;}
.thumb{width:143px;height:143px;background:#f5f5f5;border:1px solid #e8e8e8;margin-bottom:6px;}
.ptitle{font-size:12px;font-weight:600;color:#1a1a1a;line-height:1.35;height:32px;overflow:hidden;}
.pprice{font-size:14px;font-weight:700;color:#1a1a1a;margin:4px 0 6px;}
.addbtn{width:100%;height:26px;background:#313131;color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;border-radius:2px;}
.footerwall{position:absolute;bottom:0;left:0;right:0;height:118px;background:#f5f5f5;border-top:1px solid #dcdcdc;padding:14px 28px;display:flex;gap:44px;}
.fcol{font-size:11px;color:#666666;line-height:2;}
.fcol b{display:block;font-size:12px;color:#1a1a1a;margin-bottom:2px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Play Asia</div>
<div class="searchbar">Search 200,000+ items...</div>
</div>
<div class="catstrip"><span>PS5</span><span>Nintendo Switch</span><span>Anime</span><span>Figures</span><span>Pre-orders</span><span>Music</span><span>Trading Cards</span></div>
<div class="sec">
<div class="secTitle">New Arrivals — Import Exclusives</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ptitle">Limited Steelbook Edition — Region Free</div><div class="pprice">$54.90</div><div class="addbtn">Add to Cart</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Scale Figure — Prize Ver. B</div><div class="pprice">$38.20</div><div class="addbtn">Add to Cart</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Import Soundtrack CD + Booklet</div><div class="pprice">$22.50</div><div class="addbtn">Add to Cart</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Trading Card Booster Pack Box</div><div class="pprice">$69.90</div><div class="addbtn">Add to Cart</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Console Bundle — Asia Version</div><div class="pprice">$412.00</div><div class="addbtn">Add to Cart</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Acrylic Stand — Wave 2 Set</div><div class="pprice">$16.80</div><div class="addbtn">Add to Cart</div></div>
</div>
</div>
<div class="footerwall">
<div class="fcol"><b>Help</b>Shipping<br>Returns<br>FAQ</div>
<div class="fcol"><b>Company</b>About Us<br>Careers<br>Press</div>
<div class="fcol"><b>Payment</b>Visa · Mastercard<br>PayPal · Alipay</div>
<div class="fcol"><b>Community</b>Forums<br>Reviews<br>We ship worldwide</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #1a2a4a; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #1a2a4a;
border: 1px solid #1a2a4a; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c41e3a; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:'Proxima Nova','Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#1a2a4a; }
.brand { font-size:19px; font-weight:700; color:#f5f0e8; letter-spacing:0.05em; }
.navlinks { display:flex; gap:26px; font-size:13px; color:#d9d4cc; font-weight:600; }
.navlinks span.on { color:#fff; }
.cart { background:#c41e3a; color:#fff; font-size:12px; font-weight:700; padding:8px 16px; border-radius:2px; }
main { display:flex; height:574px; }
.gallery { width:410px; background:#f5f0e8; position:relative; display:flex; align-items:center; justify-content:center; }
.cooker { width:220px; height:150px; background:linear-gradient(160deg,#c41e3a,#8a1428); border-radius:14px;
position:relative; box-shadow:0 20px 40px rgba(26,42,74,0.28); }
.cooker::before { content:''; position:absolute; top:-10px; left:16px; right:16px; height:20px;
background:#1a2a4a; border-radius:10px 10px 0 0; }
.cooker .knob { position:absolute; bottom:16px; width:20px; height:20px; border-radius:50%; background:#f5f0e8; }
.cooker .knob.k1 { left:24px; } .cooker .knob.k2 { left:56px; } .cooker .knob.k3 { left:88px; }
.badge-heritage { position:absolute; top:22px; left:22px; background:#1a2a4a; color:#fff; font-size:10px;
font-weight:700; letter-spacing:0.05em; padding:5px 12px; border-radius:2px; }
.info { flex:1; padding:30px 38px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#6b6b6b; }
h1 { font-size:22px; font-weight:700; margin:0; line-height:1.3; }
.stars { font-size:12px; color:#d4a017; }
.stars .n { color:#6b6b6b; margin-left:6px; font-size:11.5px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:21px; font-weight:700; }
.desc { font-size:13.5px; color:#3d3d3d; line-height:1.55; max-width:340px; }
.color-row { display:flex; gap:8px; }
.swatch { width:26px; height:26px; border-radius:4px; border:1px solid #d9d4cc; }
.swatch.on { outline:2px solid #1a2a4a; outline-offset:2px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#1a2a4a; color:#fff; border:none; border-radius:2px; padding:13px 18px;
font-size:14px; font-weight:700; }
.btn-outline { border:1.5px solid #1a2a4a; color:#1a2a4a; background:#fff; border-radius:2px; padding:11.5px 16px;
font-size:12.5px; font-weight:700; white-space:nowrap; }
.meta { font-size:11px; color:#6b6b6b; }
</style></head>
<body>
<nav>
<div class="brand">Aga</div>
<div class="navlinks"><span class="on">Range Cookers</span><span>Modules</span><span>Refrigeration</span><span>Outdoor</span></div>
<div class="cart">Basket (0)</div>
</nav>
<main>
<div class="gallery">
<span class="badge-heritage">Since 1922</span>
<div class="cooker"><div class="knob k1"></div><div class="knob k2"></div><div class="knob k3"></div></div>
</div>
<div class="info">
<span class="cat">Range Cooker · Claret Enamel</span>
<h1>AGA eR7 Series 100 Electric Range Cooker</h1>
<div class="stars">★★★★★ <span class="n">4.8 · 214 reviews</span></div>
<div class="price-row"><span class="price">£12,995.00</span></div>
<p class="desc">Engineered for a century of heat retention — five ovens, radiant heat plates, and enduring cast-iron construction.</p>
<div class="color-row">
<div class="swatch on" style="background:#c41e3a"></div>
<div class="swatch" style="background:#1a2a4a"></div>
<div class="swatch" style="background:#2f2f2f"></div>
</div>
<div class="btn-row">
<button class="btn-primary">Book a Showroom Visit</button>
<button class="btn-outline">Request Brochure</button>
</div>
<span class="meta">Free installation consultation</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1b1b1b; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #1b1b1b;
border: 1px solid #1b1b1b; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dbdbdb; color: #1b1b1b;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#000000; box-sizing:border-box;
font-family:"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; height:100%; }
.list { width:300px; border-right:0.5px solid #E5E5E5; }
.list-hdr { padding:24px 20px 10px; }
.list-hdr .big { font-size:26px; font-weight:700; letter-spacing:-.3px; }
.search { margin:10px 16px; height:34px; border-radius:10px; background:#F5F5F5; display:flex; align-items:center; padding:0 12px; color:#9A9A9A; font-size:13px; }
.row { display:flex; align-items:center; gap:12px; padding:10px 16px; }
.row.active { background:#F5F5F5; }
.av { width:44px; height:44px; border-radius:50%; }
.name { font-size:15px; font-weight:500; }
.prev { font-size:13px; color:#6B6B6B; margin-top:2px; }
.meta { margin-left:auto; text-align:right; }
.time { font-size:11px; color:#6B6B6B; }
.badge { margin-top:4px; width:18px; height:18px; border-radius:50%; background:#3A76F0; color:#fff; font-size:10px;
display:flex; align-items:center; justify-content:center; margin-left:auto; }
.thread { flex:1; display:flex; flex-direction:column; }
.th-hdr { height:52px; display:flex; align-items:center; gap:12px; padding:0 24px; border-bottom:0.5px solid #E5E5E5; }
.th-hdr .av { width:32px; height:32px; }
.th-name { font-size:17px; font-weight:600; }
.icons { margin-left:auto; display:flex; gap:20px; color:#3A76F0; font-size:16px; }
.encrypt { text-align:center; font-size:13px; color:#6B6B6B; padding:16px 0 6px; }
.msgs { flex:1; padding:8px 24px; display:flex; flex-direction:column; gap:8px; }
.bubble { max-width:75%; padding:9px 13px; border-radius:18px; font-size:16px; line-height:1.4; }
.in { align-self:flex-start; background:#E9E9EB; color:#000; border-bottom-left-radius:6px; }
.out { align-self:flex-end; background:#3A76F0; color:#fff; border-bottom-right-radius:6px; }
.meta-in { font-size:12px; color:#6B6B6B; align-self:flex-start; margin-top:-4px; }
.composer { display:flex; align-items:center; gap:10px; padding:12px 24px; }
.pill { flex:1; background:#F5F5F5; border-radius:18px; height:36px; display:flex; align-items:center; padding:0 14px; color:#9A9A9A; font-size:16px; }
.send { width:32px; height:32px; border-radius:50%; background:#3A76F0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; }
</style></head>
<body>
<div class="app">
<div class="list">
<div class="list-hdr"><div style="font-size:11px;font-weight:600;color:#8E8E93;letter-spacing:.2px;">Signal (iOS)</div><div class="big">Chats</div></div>
<div class="search">Search</div>
<div class="row active"><div class="av" style="background:linear-gradient(135deg,#767676,#484848);"></div><div><div class="name">Renata Vogel</div><div class="prev">See you at 8 then</div></div><div class="meta"><div class="time">9:41 PM</div><div class="badge">3</div></div></div>
<div class="row"><div class="av" style="background:linear-gradient(135deg,#89b,#456);"></div><div><div class="name">Family Group</div><div class="prev">Mom: dinner sunday?</div></div><div class="meta"><div class="time">Yesterday</div></div></div>
<div class="row"><div class="av" style="background:linear-gradient(135deg,#e9a,#c56);"></div><div><div class="name">Marco</div><div class="prev">👍</div></div><div class="meta"><div class="time">Mon</div></div></div>
</div>
<div class="thread">
<div class="th-hdr"><div class="av" style="background:linear-gradient(135deg,#767676,#484848);"></div><div class="th-name">Renata Vogel</div><div class="icons">📹 📞</div></div>
<div class="encrypt">🔒 Messages and calls are end-to-end encrypted.</div>
<div class="msgs">
<div class="bubble in">Running a little late, sorry!</div>
<div class="bubble out">No worries, we'll grab a table</div>
<div class="bubble in">See you at 8 then</div>
<div class="meta-in">Read 9:41 PM</div>
</div>
<div class="composer"><div class="pill">Signal message</div><div class="send">↑</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FEFDF8; color: #1C1C1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FEFDF8; color: #1C1C1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; font-weight: 400; line-height: 1.35; letter-spacing: 0.03em; margin: 0; color: #1C1C1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: 0.01em; margin: 0; color: #7A7870; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: 0.18em; background: #B8935A; color: #FFFFFF;
border: none; border-radius: 3px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: 0.18em; background: transparent; color: #1C1C1A;
border: 1px solid #B8935A; border-radius: 3px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.65; letter-spacing: 0.01em; background: #FEFDF8; color: #1C1C1A;
border: 1px solid #c6c5c0; border-radius: 3px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7A7870; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px; font-weight: 500; line-height: 1.2; letter-spacing: 0.14em; background: #F0E6D3; color: #8C6F3E;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FEFDF8; color:#3D3C38; box-sizing:border-box;
font-family:"Cormorant Garamond","EB Garamond",Georgia,serif; }
* { box-sizing:border-box; }
nav { height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #E5E2DC; }
.brand { font-size:22px; font-weight:500; color:#1C1C1A; letter-spacing:3px; text-transform:uppercase; }
.nlinks { display:flex; gap:34px; }
.nlinks div { font-size:13px; font-weight:500; color:#3D3C38; letter-spacing:2px; text-transform:uppercase; }
.nlinks div.on { color:#B8935A; }
.navicons { font-size:14px; color:#1C1C1A; letter-spacing:1px; }
.hero { height:270px; display:flex; }
.heroimg { flex:1; background:linear-gradient(160deg,#EFECE6,#B8935A 120%); position:relative; }
.heroimg::after { content:''; position:absolute; left:30%; top:20%; width:120px; height:120px; border-radius:50%;
background:radial-gradient(circle at 35% 30%,#F0E6D3,#B8935A 80%); box-shadow:0 0 0 3px #FEFDF8; }
.herotxt { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 40px; }
.herotxt .k { font-size:12px; letter-spacing:3px; text-transform:uppercase; color:#7A7870; margin-bottom:10px; }
.herotxt h1 { font-size:40px; font-weight:300; color:#1C1C1A; margin:0 0 14px; font-style:italic; }
.herotxt p { font-size:16px; color:#3D3C38; margin:0 0 18px; max-width:340px; }
.herobtn { display:inline-block; background:#B8935A; color:#fff; font-size:12px; letter-spacing:2px;
text-transform:uppercase; padding:13px 30px; border-radius:2px; }
.section { padding:26px 40px 0; }
.sechead { text-align:center; font-size:15px; letter-spacing:3px; text-transform:uppercase; color:#1C1C1A; margin-bottom:16px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.card { text-align:center; }
.shot { aspect-ratio:3/4; background:#F7F4EE; position:relative; margin-bottom:10px; }
.shot .ring { position:absolute; left:50%; top:38%; width:46px; height:46px; border-radius:50%;
border:4px solid #B8935A; transform:translate(-50%,-50%); }
.shot .chain { position:absolute; left:50%; bottom:14%; width:2px; height:60px; background:#B8935A; transform:translateX(-50%); }
.badge { position:absolute; top:10px; left:10px; font-size:9px; letter-spacing:1px; text-transform:uppercase;
background:#F0E6D3; color:#8C6F3E; padding:3px 9px; border-radius:20px; }
.ctitle { font-size:15px; color:#1C1C1A; margin-bottom:3px; }
.cprice { font-size:14px; color:#7A7870; }
</style></head>
<body>
<nav>
<div class="brand">Daphine</div>
<div class="nlinks"><div class="on">Necklaces</div><div>Rings</div><div>Earrings</div><div>Bespoke</div></div>
<div class="navicons">☰ ♡ ⌕</div>
</nav>
<div class="hero">
<div class="heroimg"></div>
<div class="herotxt">
<div class="k">18K Gold · Handset</div>
<h1>An Heirloom<br>Gesture</h1>
<p>Jewelry made to be worn against skin, not behind glass.</p>
<div class="herobtn">Discover The Collection</div>
</div>
</div>
<div class="section">
<div class="sechead">New Arrivals</div>
<div class="grid">
<div class="card"><div class="shot"><span class="badge">New</span><div class="ring"></div><div class="chain"></div></div>
<div class="ctitle">Filament Pendant</div><div class="cprice">$1,240</div></div>
<div class="card"><div class="shot"><div class="ring"></div><div class="chain"></div></div>
<div class="ctitle">Sable Hoop Earrings</div><div class="cprice">$680</div></div>
<div class="card"><div class="shot"><span class="badge">Best Seller</span><div class="ring"></div></div>
<div class="ctitle">Contour Signet Ring</div><div class="cprice">$920</div></div>
<div class="card"><div class="shot"><div class="ring"></div><div class="chain"></div></div>
<div class="ctitle">Ribbon Chain Bracelet</div><div class="cprice">$540</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f04646; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f04646; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f06354; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f04646; color: #000000;
border: 1px solid #f06354; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f04646; color: #f5f5f5;
border: 1px solid #f16262; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f04b48; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#564e4a; box-sizing:border-box;
font-family:system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif; }
* { box-sizing: border-box; }
header { height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; border-bottom:1px solid #e0d9d5; background:#ffffff; }
.brand-wrap { display:flex; flex-direction:column; }
.brand { font-size:20px; font-weight:700; color:#564e4a; line-height:1.1; }
.tagline { font-size:11px; font-weight:400; color:#89817d; }
.search { flex:0 0 340px; height:40px; background:#fbfaf8; display:flex; align-items:center;
padding:0 15px; font-size:14px; color:#89817d; }
.app-cta { background:#f04646; color:#ffffff; border:none; border-radius:4px; padding:1px 6px;
height:32px; font-size:14px; font-weight:500; display:flex; align-items:center; }
nav.tabs { display:flex; gap:2px; padding:0 24px; border-bottom:1px solid #e0d9d5; background:#ffffff; }
.tab { height:40px; padding:0 16px; display:flex; align-items:center; font-size:16px; font-weight:700;
color:#564e4a; border-bottom:2px solid transparent; }
.tab.active { color:#f04646; border-bottom:2px solid #f04646; }
.section { padding:20px 24px 0; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.section-head h2 { font-size:24px; font-weight:600; color:#564e4a; margin:0; }
.more-wrap { display:flex; align-items:center; gap:8px; }
.more { font-size:16px; font-weight:400; color:#f06354; }
.ghost { width:32px; height:32px; border-radius:50%; border:1px solid #f06354; color:#f06354;
display:flex; align-items:center; justify-content:center; font-size:14px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#f0f0f0; border-radius:16px; overflow:hidden; position:relative; }
.photo { height:108px; position:relative; }
.p1 { background:linear-gradient(135deg,#ffb199,#f0993c); }
.p2 { background:linear-gradient(135deg,#f0993c,#ffd39a); }
.p3 { background:linear-gradient(135deg,#f06354,#ffb199); }
.badge-amber { position:absolute; top:8px; left:8px; background:#f0993c; color:#ffffff;
border-radius:4px; padding:2px 8px; font-size:12px; font-weight:400; }
.card-body { padding:14px; }
.card-body h3 { font-size:20px; font-weight:700; margin:0 0 6px; color:#564e4a; line-height:1.3; }
.card-body p { font-size:14px; font-weight:400; color:#89817d; margin:0; line-height:1.15; }
.chip { display:inline-block; margin-top:8px; font-size:12px; color:#f06354; border:1px solid #f06354;
border-radius:4px; padding:2px 8px; }
footer { position:absolute; bottom:0; left:0; right:0; padding:12px 24px; text-align:center;
font-size:12px; color:#89817d; }
</style></head>
<body>
<header>
<div class="brand-wrap">
<span class="brand">iCook</span>
<span class="tagline">Begin a beautiful life, cook.</span>
</div>
<div class="search">Search for a recipe or ingredient</div>
<button class="app-cta">Get App</button>
</header>
<nav class="tabs">
<div class="tab active">Popular</div>
<div class="tab">Newest</div>
<div class="tab">Low-Cal</div>
<div class="tab">Quick & Easy</div>
<div class="tab">Drinks</div>
</nav>
<section class="section">
<div class="section-head">
<h2>Popular Recipes</h2>
<div class="more-wrap">
<span class="more">More</span>
<span class="ghost">‹</span>
<span class="ghost">›</span>
</div>
</div>
<div class="cards">
<div class="card">
<div class="photo p1"><span class="badge-amber">Seasonal</span></div>
<div class="card-body">
<h3>Cast-Iron Braised Rice</h3>
<p>One pot, thirty minutes, deeply savory</p>
<span class="chip">Rice Cooker Friendly</span>
</div>
</div>
<div class="card">
<div class="photo p2"></div>
<div class="card-body">
<h3>Honey Soy Glazed Wings</h3>
<p>Sticky, sweet, and ready in one tray</p>
</div>
</div>
<div class="card">
<div class="photo p3"></div>
<div class="card-body">
<h3>Cold Sesame Noodles</h3>
<p>A five-minute weeknight favorite</p>
</div>
</div>
</div>
</section>
<footer>© iCook · 300,000+ recipes, new ones every day</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #101010; color: #f9f9f9;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #101010; color: #f9f9f9;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #f9f9f9; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #8a8a8d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #0066f5; color: #f9f9f9;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: transparent; color: #f9f9f9;
border: 1px solid #0066f5; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #242427; color: #f9f9f9;
border: 1px solid #4a4a4a; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.33; background: #303034; color: #d8d8d9;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#101010; color:#f9f9f9; font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #242427;}
.logo{font-size:19px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.navlinks .active{color:#0066f5;}
.hero{height:230px;display:flex;align-items:center;padding:0 36px;position:relative;overflow:hidden;background:linear-gradient(120deg,#101010 40%,#3a1f0a 100%);}
.herotext{width:440px;z-index:2;}
.herotext h1{font-size:36px;font-weight:700;margin:0 0 12px;line-height:1.15;}
.herotext p{font-size:15px;color:#d8d8d9;margin:0 0 16px;}
.cta{display:inline-block;background:#0066f5;color:#f9f9f9;font-size:15px;font-weight:600;padding:13px 26px;border-radius:8px;}
.glow{position:absolute;right:80px;top:30px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,#ffb454,#ff8a1f 60%,transparent 80%);filter:blur(2px);}
.grid{display:flex;gap:14px;padding:20px 36px;}
.card{width:200px;background:#242427;border-radius:20px;padding:16px;}
.thumb{height:80px;background:#303034;border-radius:12px;margin-bottom:10px;}
.ptitle{font-size:14px;font-weight:600;}
.pprice{font-size:16px;font-weight:700;margin-top:4px;}
.badges{display:flex;gap:6px;margin-top:8px;}
.dotbadge{display:flex;align-items:center;gap:5px;background:#303034;border-radius:9999px;padding:4px 10px;font-size:11px;color:#d8d8d9;}
.dot{width:8px;height:8px;border-radius:50%;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#18181a;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:12px;color:#8a8a8d;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Philips Hue</div>
<div class="navlinks"><div class="active">Lights</div><div>Scenes</div><div>Bridge & Hub</div><div>Outdoor</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Light that knows the mood.</h1>
<p>Smart bulbs and scenes that turn a room into an experience.</p>
<div class="cta">Shop Lights</div>
</div>
<div class="glow"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:radial-gradient(circle,#0066f5,#242427 70%)"></div><div class="ptitle">White & Color Ambiance</div><div class="pprice">$54.99</div><div class="badges"><div class="dotbadge"><span class="dot" style="background:#ffb454"></span>Relax</div></div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle,#ff8a1f,#242427 70%)"></div><div class="ptitle">Gradient Signe Lamp</div><div class="pprice">$289.99</div><div class="badges"><div class="dotbadge"><span class="dot" style="background:#d92e8b"></span>Energize</div></div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle,#0066f5,#101010 70%)"></div><div class="ptitle">Play Light Bar</div><div class="pprice">$69.99</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle,#7a4bff,#242427 70%)"></div><div class="ptitle">Outdoor Lily Spot</div><div class="pprice">$99.99</div></div>
</div>
<div class="footer"><span>Works with Alexa · Google Home · Apple HomeKit</span><span>© Philips Hue</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1267CF;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1267CF;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-size: 20px; font-weight:700; margin: 0; color: #1267CF; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-size: 12px; font-weight:400; line-height:1.4; margin: 0; color: #71a4e2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: linear-gradient(101deg, #F4AB34, #FF6B0B); color: #ffffff;
border: none; border-radius: 999; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #FFFFFF; color: linear-gradient(101deg, #F4AB34, #FF6B0B);
border: 1px solid linear-gradient(101deg, #F4AB34, #FF6B0B); border-radius: 999;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #FFFFFF; color: #1267CF;
border: 1px solid #c4d9f3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #71a4e2; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #ededed; color: linear-gradient(101deg, #F4AB34, #FF6B0B);
border-radius: 999; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: Roboto, Arial, sans-serif; background: #FAFAFA; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
.brandbar { height: 30px; background: #FFFFFF; border-bottom: 1px solid #E1E1E1; display: flex; align-items: center; gap: 8px; padding: 0 24px; }
.bpill { font-size: 11px; font-weight: 500; color: #737373; padding: 4px 12px; border-radius: 999px; }
.bpill.on { background: #F4AB34; color: #111111; font-weight: 700; }
nav { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; background: #FFFFFF; border-bottom: 1px solid #E1E1E1; }
.logo { font-size: 20px; font-weight: 700; color: #111111; letter-spacing: -0.3px; margin: 0; }
.logo span { color: #FF6B0B; }
.navlinks { display: flex; gap: 28px; font-size: 14px; font-weight: 500; color: #363636; }
.cta { background: linear-gradient(101deg, #F4AB34, #FF6B0B); color: #111111; border: none; border-radius: 999px; padding: 10px 22px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.hero { display: flex; align-items: center; padding: 28px 32px; gap: 32px; height: 224px; }
.hero-copy { flex: 1.1; display: flex; flex-direction: column; gap: 12px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #CD902C; }
.hero h1 { font-size: 36px; font-weight: 700; line-height: 1.15; margin: 0; color: #111111; letter-spacing: -0.5px; }
.hero p { font-size: 16px; line-height: 1.5; color: #4E4E4E; margin: 0; max-width: 380px; }
.hero-row { display: flex; gap: 12px; margin-top: 4px; }
.btn-primary { background: linear-gradient(101deg, #F4AB34, #FF6B0B); color: #111111; border: none; border-radius: 999px; padding: 12px 26px; font-size: 14px; font-weight: 700; }
.btn-ghost { background: transparent; color: #111111; border: 1.5px solid #363636; border-radius: 999px; padding: 11px 24px; font-size: 14px; font-weight: 700; }
.hero-visual { flex: 1; height: 176px; border-radius: 16px; background: linear-gradient(101deg, #F4AB34, #FF6B0B); position: relative; overflow: hidden; }
.hero-visual::before { content: ''; position: absolute; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,0.22); top: -40px; right: -30px; }
.hero-visual::after { content: ''; position: absolute; width: 90px; height: 90px; border-radius: 50%; background: rgba(255,255,255,0.16); bottom: -30px; left: 30px; }
.token-chip { position: absolute; bottom: 14px; left: 14px; background: #FFFFFF; border-radius: 8px; padding: 8px 12px; font-size: 11px; font-weight: 700; color: #4E4E4E; box-shadow: 0 3px 4px 0 rgba(0,0,0,0.14); }
.token-chip b { color: #A67423; }
.section-label { padding: 4px 32px 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8C8C8C; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 0 32px; }
.card { background: #FFFFFF; border: 1px solid #E1E1E1; border-radius: 8px; padding: 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14); }
.swatch { width: 100%; height: 64px; border-radius: 4px; margin-bottom: 4px; }
.s1 { background: linear-gradient(135deg,#F4AB34,#F6B854); }
.s2 { background: linear-gradient(135deg,#FF6B0B,#FF9A59); }
.s3 { background: linear-gradient(135deg,#F8C675,#CD902C); }
.card h3 { margin: 0; font-size: 16px; font-weight: 700; color: #111111; }
.card p { margin: 0; font-size: 12.5px; color: #737373; line-height: 1.4; }
.badges { display: flex; gap: 6px; margin-top: 2px; }
.badge { font-size: 10px; font-weight: 700; border-radius: 2px; padding: 3px 7px; text-transform: uppercase; letter-spacing: 0.04em; }
.badge.success { background: #92D492; color: #2F833E; }
.badge.alert { background: #FFA392; color: #DE3529; }
.badge.info { background: #A5C0FC; color: #1267CF; }
footer { position: absolute; bottom: 0; left: 0; right: 0; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; border-top: 1px solid #E1E1E1; background: #FFFFFF; font-size: 11px; color: #8C8C8C; }
.stack { position: relative; width: 960px; height: 640px; }
</style>
<div class="stack">
<div class="brandbar">
<span class="bpill on">Natura</span>
<span class="bpill">Avon</span>
<span class="bpill">Aesop</span>
<span class="bpill">The Body Shop</span>
</div>
<nav>
<p class="logo">Natura GaYa</p>
<div class="navlinks"><span>Skincare</span><span>Fragrance</span><span>Body</span><span>Gifting</span></div>
<button class="cta">Shop the drop</button>
</nav>
<section class="hero">
<div class="hero-copy">
<span class="eyebrow">Multi-brand system</span>
<h1>One token set, four beauty houses</h1>
<p>Shared components, swappable themes — GaYa powers Natura, Avon, Aesop and The Body Shop from a single source of truth.</p>
<div class="hero-row">
<button class="btn-primary">Explore tokens</button>
<button class="btn-ghost">View components</button>
</div>
</div>
<div class="hero-visual">
<span class="token-chip">primary <b>#F4AB34</b></span>
</div>
</section>
<div class="section-label">Featured rituals</div>
<div class="cards">
<div class="card">
<div class="swatch s1"></div>
<h3>Golden Radiance Serum</h3>
<p>Vitamin-rich facial oil with a warm citrus finish.</p>
<div class="badges"><span class="badge success">In stock</span><span class="badge info">New</span></div>
</div>
<div class="card">
<div class="swatch s2"></div>
<h3>Ember Bloom Eau de Parfum</h3>
<p>Signature secondary accent — spiced amber and orange blossom.</p>
<div class="badges"><span class="badge alert">Low stock</span></div>
</div>
<div class="card">
<div class="swatch s3"></div>
<h3>Sunlit Body Balm</h3>
<p>Whipped shea butter, shared formula across every house theme.</p>
<div class="badges"><span class="badge success">In stock</span></div>
</div>
</div>
<footer>
<span>© Natura GaYa — a Natura & Co design system</span>
<span>Overview · Colors · Typography · Components</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fb355e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fb355e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fbfaf9; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fb355e; color: #fbfaf9;
border: 1px solid #fbfaf9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fb355e; color: #f5f5f5;
border: 1px solid #fa5476; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fb5577; color: #fbfaf9;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body {
display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fbfaf9; color:#0d131c; box-sizing:border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:18px; font-weight:700; letter-spacing:-0.4px; margin:0; }
.navlinks { display:flex; gap:6px; }
.navlinks span { font-size:13px; font-weight:500; padding:8px 14px; border-radius:10px; color:#0d131c; }
.cta-pink { background:#fb355e; color:#fafafa; border:none; border-radius:16px; padding:0 20px; height:34px; font-size:13px; font-weight:500; }
main { flex:1 1 auto; display:flex; gap:24px; padding:6px 32px 12px; overflow:hidden; }
.left { flex:0 0 380px; display:flex; flex-direction:column; justify-content:center; gap:12px; }
.pill { display:inline-flex; align-items:center; background:rgba(255,230,231,.8); border:1px solid #ffe6e7; border-radius:16px; padding:6px 14px; font-size:12px; color:#0d131c; width:fit-content; }
.left h1 { font-size:34px; font-weight:700; letter-spacing:-1px; line-height:1.04; margin:0; }
.left p { font-size:14px; color:#4f5661; line-height:1.5; margin:0; max-width:340px; }
.cta-row { display:flex; gap:10px; margin-top:4px; }
.cta-big { background:#fb355e; color:#fafafa; border:none; border-radius:16px; padding:0 26px; height:40px; font-size:14px; font-weight:500; }
.distrow { display:flex; gap:8px; margin-top:10px; }
.dchip { width:30px; height:30px; border-radius:9px; }
.right { flex:1 1 auto; background:#ffffff; border:1px solid #e0e3e8; border-radius:16px; padding:20px; display:flex; gap:18px; overflow:hidden; }
.cover { flex:0 0 130px; height:130px; border-radius:12px; background:linear-gradient(135deg,#ffe6e7,#edf0f6); position:relative; }
.cover::after{ content:''; position:absolute; inset:0; margin:auto; width:44px; height:44px; border-radius:50%; background:#fb355e; }
.player { flex:1 1 auto; display:flex; flex-direction:column; gap:10px; min-width:0; }
.ptitle { font-size:16px; font-weight:600; margin:0; }
.psub { font-size:12px; color:#4f5661; margin:0; }
.wave { display:flex; align-items:flex-end; gap:3px; height:34px; margin-top:4px; }
.wave i { width:4px; background:#fb355e; border-radius:2px; opacity:.85; }
.eplist { margin-top:6px; display:flex; flex-direction:column; gap:8px; }
.eprow { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; background:#edf0f6; border-radius:10px; font-size:12px; }
.eprow b { font-weight:600; font-size:12px; }
.eprow span { color:#4f5661; }
.badge-save { background:#ffe6e7; color:#962339; border-radius:9999px; padding:2px 8px; font-size:10px; font-weight:600; }
.stats { flex:0 0 96px; display:flex; gap:16px; padding:0 32px 20px; }
.stat { flex:1; background:#ffffff; border:1px solid #e0e3e8; border-radius:16px; padding:14px 18px; }
.stat h3 { font-size:20px; font-weight:700; margin:0 0 2px; }
.stat span { font-size:11px; color:#4f5661; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.stat .grow { color:#00c950; font-size:11px; font-weight:600; text-transform:none; }
</style></head>
<body>
<nav>
<p class="brand">Firstory</p>
<div class="navlinks"><span>Features</span><span>Monetize</span><span>Pricing</span><span>Blog</span></div>
<button class="cta-pink">Get started</button>
</nav>
<main>
<div class="left">
<span class="pill">First Wave in Asia-Pacific</span>
<h1>Start your media business with podcasting</h1>
<p>Host, distribute, and monetize your show everywhere listeners are — from one dashboard.</p>
<div class="cta-row"><button class="cta-big">Get started today</button></div>
<div class="distrow">
<span class="dchip" style="background:#edf0f6"></span>
<span class="dchip" style="background:#ffe6e7"></span>
<span class="dchip" style="background:#f6efe5"></span>
<span class="dchip" style="background:#edf0f6"></span>
</div>
</div>
<div class="right">
<div class="cover"></div>
<div class="player">
<div>
<p class="ptitle">Episode 42 — Building in Public</p>
<p class="psub">The Creator Lab · 38 min</p>
</div>
<div class="wave">
<i style="height:10px"></i><i style="height:22px"></i><i style="height:14px"></i><i style="height:30px"></i>
<i style="height:18px"></i><i style="height:26px"></i><i style="height:12px"></i><i style="height:20px"></i>
<i style="height:28px"></i><i style="height:16px"></i><i style="height:24px"></i><i style="height:12px"></i>
<i style="height:20px"></i><i style="height:30px"></i><i style="height:14px"></i><i style="height:22px"></i>
</div>
<div class="eplist">
<div class="eprow"><b>Ep. 41 — Pricing Your Show</b><span>34 min</span></div>
<div class="eprow"><b>Ep. 40 — Sponsor Outreach 101</b><span>29 min <span class="badge-save">NEW</span></span></div>
</div>
</div>
</div>
</main>
<div class="stats">
<div class="stat"><h3>128K</h3><span>Downloads</span></div>
<div class="stat"><h3>42</h3><span>Episodes <span class="grow">▲ 8 this month</span></span></div>
<div class="stat"><h3>$1,240</h3><span>Listener revenue</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0e10; color: #dedede;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0e10; color: #dedede;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; font-weight: 400; line-height: 1.4; letter-spacing: 0.02em; margin: 0; color: #dedede; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; letter-spacing: 0.01em; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: 0.14em; background: #ff7f50; color: #0a0e10;
border: none; border-radius: 0px; padding: 14px 36px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: 0.14em; background: transparent; color: #dedede;
border: 1px solid #ff7f50; border-radius: 0px;
padding: 13px 35px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.65; letter-spacing: 0.01em; background: transparent; color: #dedede;
border: 1px solid #3f4244; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px; font-weight: 400; line-height: 1.2; letter-spacing: 0.18em; background: transparent; color: #757562;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Foundrae Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Georgia,'Times New Roman',serif; background:#0a0e10; color:#dedede; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
.nav { height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 44px; border-bottom:1px solid #2a2a2a; }
.logo { font-weight:300; font-size:19px; letter-spacing:.25em; text-transform:uppercase; color:#dedede; }
.navlinks { display:flex; gap:28px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#757562; }
.navcta { color:#ff7f50; font-size:11px; letter-spacing:.15em; text-transform:uppercase; border:1px solid #ff7f50; padding:9px 18px; }
.hero { display:flex; align-items:center; padding:36px 60px; gap:50px; flex:1; }
.hero-copy { max-width:380px; }
.hero .kicker { color:#757562; font-size:11px; letter-spacing:.25em; text-transform:uppercase; margin-bottom:16px; }
.hero h1 { font-weight:300; font-size:38px; line-height:1.25; letter-spacing:.02em; margin:0 0 16px; color:#dedede; }
.hero p { color:#c0c0c0; font-size:14.5px; line-height:1.7; letter-spacing:.01em; margin:0 0 24px; max-width:340px; }
.btn-coral { color:#ff7f50; border:1px solid #ff7f50; font-size:11.5px; letter-spacing:.15em; text-transform:uppercase; padding:12px 26px; display:inline-block; }
.medallion-row { display:flex; gap:20px; }
.medallion { width:90px; height:90px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#e8c27a,#a97a2e 70%); display:flex; align-items:center; justify-content:center; box-shadow:0 0 30px rgba(255,127,80,.15); }
.medallion .sym { width:34px; height:34px; border:2px solid #5c3d15; border-radius:50%; }
.symbol-scroll { display:flex; gap:14px; padding:16px 60px; overflow:hidden; border-top:1px solid #2a2a2a; border-bottom:1px solid #2a2a2a; }
.symbol-scroll .item { font-size:10.5px; color:#757562; letter-spacing:.15em; text-transform:uppercase; white-space:nowrap; padding-right:14px; border-right:1px solid #2a2a2a; }
.section { padding:22px 60px; flex:1; }
.section h2 { font-weight:300; font-size:17px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 16px; color:#dedede; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#1c1c1c; border:1px solid #2a2a2a; padding:14px; }
.card .ph { height:76px; margin-bottom:10px; border-radius:50%; width:76px; margin-left:auto; margin-right:auto; }
.card .name { font-size:13px; font-weight:400; text-align:center; margin-bottom:2px; color:#dedede; }
.card .meta { font-size:10px; color:#757562; text-align:center; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px; }
.card .price { font-size:13px; text-align:center; color:#dedede; }
</style>
<div class="page">
<div class="nav">
<div class="logo">Foundrae</div>
<div class="navlinks"><span>Wholeness</span><span>Alchemy</span><span>Protect</span><span>Bespoke</span></div>
<div class="navcta">Add to Cart</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="kicker">Symbolic Systems in 18k Gold</div>
<h1>Medallions struck<br>with meaning.</h1>
<p>Objects meant to last decades, not UX patterns that date in eighteen months — archival gravity in full relief against the dark.</p>
<div class="btn-coral">Shop the Collection</div>
</div>
<div class="medallion-row">
<div class="medallion"><div class="sym"></div></div>
<div class="medallion" style="background:radial-gradient(circle at 35% 30%,#f0d090,#8a6020 70%);"><div class="sym"></div></div>
</div>
</div>
<div class="symbol-scroll">
<div class="item">Wholeness</div><div class="item">Alchemy</div><div class="item">Protect</div><div class="item">Guardian</div><div class="item">Trust</div><div class="item">Karma</div>
</div>
<div class="section">
<h2>Talisman Medallions</h2>
<div class="grid">
<div class="card"><div class="ph" style="background:radial-gradient(circle at 35% 30%,#e8c27a,#a97a2e 70%);"></div><div class="name">Wholeness Medallion</div><div class="meta">18k Yellow Gold</div><div class="price">$4,850</div></div>
<div class="card"><div class="ph" style="background:radial-gradient(circle at 35% 30%,#f0d090,#8a6020 70%);"></div><div class="name">Alchemy Amulet</div><div class="meta">18k Gold + Diamond</div><div class="price">$6,200</div></div>
<div class="card"><div class="ph" style="background:radial-gradient(circle at 35% 30%,#e8c27a,#8a6020 70%);"></div><div class="name">Protect Charm</div><div class="meta">18k Rose Gold</div><div class="price">$3,950</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfbfe; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfbfe; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.27; letter-spacing: 0.5px; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; letter-spacing: 0.25px; margin: 0; color: #515151; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: #003388; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.5px; background: transparent; color: #003388;
border: 1px solid #003388; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; letter-spacing: 0.25px; background: #fcfbfe; color: #2f2f2f;
border: 1px solid #c4c4c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #515151; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #00d084; color: #1e1e1e;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#fcfbfe; font-family:'Univers LT Std','Helvetica Neue',Arial,sans-serif; color:#1e1e1e;
}
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#1e1e1e;}
.logo{font-size:16px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:#fff;}
.navlinks{display:flex;gap:26px;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:#cfc8d8;}
.search{background:#fff;border-radius:3px;height:32px;width:200px;display:flex;align-items:center;padding:0 12px;font-size:11.5px;color:#999;}
.section{padding:26px 30px 0;}
.section-title{font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:18px;text-align:center;color:#4a4560;}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;}
.card{background:#fff;border:1px solid #e9e6ed;}
.card-img{aspect-ratio:1/1;background:linear-gradient(160deg,#cfc8d8,#003388);}
.card-body{padding:10px 8px;}
.catno{font-size:9px;color:#8a8296;letter-spacing:.5px;margin-bottom:4px;}
.card-name{font-size:11px;font-weight:500;margin-bottom:2px;line-height:1.3;}
.card-artist{font-size:10px;color:#5a5560;margin-bottom:6px;}
.card-price{font-size:11px;font-weight:500;color:#003388;}
.divider{height:1px;background:#e9e6ed;margin:24px 0;}
.about{display:flex;gap:20px;padding:0 30px;align-items:center;}
.about-text{width:420px;font-size:12px;line-height:1.6;color:#4a4560;}
.about-text b{color:#1e1e1e;}
.about-visual{flex:1;height:70px;display:flex;gap:10px;justify-content:flex-end;}
.bar{width:6px;background:#003388;align-self:flex-end;}
</style>
<div class="nav">
<div class="logo">Ecm Records</div>
<div class="navlinks"><span>New Series</span><span>Catalogue</span><span>Artists</span><span>About</span></div>
<div class="search">Search catalogue no...</div>
</div>
<div class="section">
<div class="section-title">New Series — Recent Releases</div>
<div class="grid">
<div class="card"><div class="card-img"></div><div class="card-body"><div class="catno">ECM 2705</div><div class="card-name">Nocturne Fragments</div><div class="card-artist">Halvorsen Trio</div><div class="card-price">€22.00</div></div></div>
<div class="card"><div class="card-img"></div><div class="card-body"><div class="catno">ECM 2698</div><div class="card-name">Winter Ensemble</div><div class="card-artist">K. Vasilenko</div><div class="card-price">€20.00</div></div></div>
<div class="card"><div class="card-img"></div><div class="card-body"><div class="catno">ECM 2711</div><div class="card-name">Solo Piano, Vol. IV</div><div class="card-artist">M. Ferreira</div><div class="card-price">€19.00</div></div></div>
<div class="card"><div class="card-img"></div><div class="card-body"><div class="catno">ECM 2690</div><div class="card-name">Quiet Room Sessions</div><div class="card-artist">Nordvik Quartet</div><div class="card-price">€22.00</div></div></div>
<div class="card"><div class="card-img"></div><div class="card-body"><div class="catno">ECM 2703</div><div class="card-name">Chamber Studies</div><div class="card-artist">A. Brandt Ensemble</div><div class="card-price">€20.00</div></div></div>
</div>
<div class="divider"></div>
<div class="about">
<div class="about-text"><b>ECM Records</b> — founded on the principle that a recording deserves the same silence as a concert hall. No promotional carousels. No autoplay. A catalogue, presented as a catalogue.</div>
<div class="about-visual">
<div class="bar" style="height:20px;"></div><div class="bar" style="height:40px;"></div><div class="bar" style="height:28px;"></div><div class="bar" style="height:50px;"></div><div class="bar" style="height:34px;"></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c473; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c473; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c473; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c473; color: #000000;
border: 1px solid #27cc88; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29cd89; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.page { display:flex; flex-direction:column; width:960px; height:640px; }
nav { flex:0 0 64px; display:flex; align-items:center; justify-content:space-between;
padding:0 44px; border-bottom:1px solid #ececec; background:#ffffff; }
.logo { font-size:20px; font-weight:700; color:#000000; letter-spacing:-0.2px; }
.navlinks { display:flex; align-items:center; gap:22px; font-size:14px; color:#333333; }
.btn-green { background:#00c473; color:#ffffff; border:1px solid #00c473; border-radius:6px;
padding:7px 14px; font-size:14px; font-weight:500; white-space:nowrap; cursor:default; }
.btn-white { background:#ffffff; color:#041911; border:1px solid #e2e2e2; border-radius:6px;
padding:12px 30px; font-size:15px; font-weight:500; white-space:nowrap; cursor:default; }
main { flex:1; display:flex; }
.col-left { flex:0 0 400px; padding:48px 44px; display:flex; flex-direction:column;
justify-content:center; gap:18px; }
.kicker { font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#a2a2a2; }
.col-left h1 { font-size:42px; font-weight:700; line-height:1.16; margin:0; color:#000000; }
.col-left p { font-size:15px; line-height:1.55; color:#333333; margin:0; max-width:320px; }
.row { display:flex; gap:12px; margin-top:4px; }
.col-right { flex:1; background:#fafafa; padding:40px 44px; display:flex; flex-direction:column;
justify-content:center; gap:16px; border-left:1px solid #ececec; }
.env-card { background:#ffffff; border:1px solid #ececec; border-radius:16px; padding:22px 24px;
display:flex; gap:16px; align-items:flex-start; }
.env-card .sq { width:34px; height:34px; border-radius:10px; background:#00c473; flex:0 0 34px; }
.env-card .txt h3 { font-size:16px; font-weight:700; margin:0 0 4px; color:#000000; }
.env-card .txt p { font-size:12.5px; color:#333333; margin:0; line-height:1.5; }
.env-card .num { margin-left:auto; font-size:11px; color:#a2a2a2; font-weight:500; }
footer { flex:0 0 52px; border-top:1px solid #ececec; padding:0 44px; display:flex;
align-items:center; justify-content:space-between; font-size:11.5px; color:#a2a2a2; }
</style></head>
<body>
<div class="page">
<nav>
<div class="logo">JANDI</div>
<div class="navlinks">
<span>Collaboration</span>
<span>Members</span>
<span>Security</span>
<span>JANDI AI</span>
<button class="btn-green">Start free</button>
</div>
</nav>
<main>
<div class="col-left">
<span class="kicker">Collaboration Platform</span>
<h1>Work, together, without the noise.</h1>
<p>Messaging, projects, and AI-assisted collaboration in one connected workspace built for teams that ship.</p>
<div class="row">
<button class="btn-green" style="padding:12px 26px;font-size:15px;">Start free</button>
<button class="btn-white">Watch overview</button>
</div>
</div>
<div class="col-right">
<div class="env-card">
<span class="sq"></span>
<div class="txt">
<h3>Team collaboration</h3>
<p>Messages, files, and projects live in the same connected workspace.</p>
</div>
<span class="num">01</span>
</div>
<div class="env-card">
<span class="sq"></span>
<div class="txt">
<h3>Member management</h3>
<p>Invite, organize, and track member work status at a glance.</p>
</div>
<span class="num">02</span>
</div>
<div class="env-card">
<span class="sq"></span>
<div class="txt">
<h3>Security environment</h3>
<p>Enterprise-grade access controls built into every workspace.</p>
</div>
<span class="num">03</span>
</div>
</div>
</main>
<footer>
<span>© JANDI</span>
<span>Collaboration · Projects · Security · AI</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #3e3e3e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #3e3e3e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #3e3e3e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #797979; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f0523d; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f6f6f6; color: #3e3e3e;
border: 1px solid #f0523d; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #3e3e3e;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #797979; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #f0523d; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f6f6; font-family:Clarkson,Helvetica,'Helvetica Neue',Arial,sans-serif; color:#3e3e3e; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e4e4e4;}
.logo{font-size:20px;font-weight:500;color:#3e3e3e;}
.cta-nav{background:#f0523d;color:#fff;font-size:13px;font-weight:600;padding:10px 22px;border-radius:9999px;}
.hero{display:flex;height:250px;background:#fff;}
.left{width:420px;padding:40px 36px;display:flex;flex-direction:column;justify-content:center;}
.h1{font-size:32px;font-weight:500;line-height:1.25;margin:0 0 14px;}
.sub{font-size:16px;line-height:1.6;color:#6b6b6b;max-width:340px;margin:0 0 18px;}
.cta{display:inline-block;background:#f0523d;color:#fff;font-size:15px;font-weight:600;padding:12px 28px;border-radius:9999px;width:fit-content;}
.right{flex:1;position:relative;background:linear-gradient(135deg,#fce9e5,#f6f6f6);}
.book{position:absolute;left:60px;top:40px;width:60px;height:150px;background:#3e3e3e;border-radius:3px;}
.book2{position:absolute;left:126px;top:60px;width:60px;height:130px;background:#f0523d;border-radius:3px;}
.book3{position:absolute;left:192px;top:30px;width:60px;height:160px;background:#a1a1a1;border-radius:3px;}
.sec{padding:20px 36px 0;}
.seclabel{font-size:18px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:210px;background:#fff;border-radius:12px;padding:12px;}
.thumb{aspect-ratio:1/1;background:#f6f6f6;border-radius:8px;margin-bottom:8px;}
.ptitle{font-size:15px;font-weight:600;margin:0 0 4px;}
.pdesc{font-size:12px;color:#a1a1a1;margin-bottom:8px;}
.subbtn{display:inline-block;background:#f0523d;color:#fff;font-size:12px;font-weight:600;padding:8px 18px;border-radius:8px;}
</style>
<div class="nav">
<div class="logo">Shelflove Crate</div>
<div class="cta-nav">Get Your Box</div>
</div>
<div class="hero">
<div class="left">
<div class="h1">A bookish<br>marketplace, warm<br>but not saccharine.</div>
<div class="sub">Structured but not rigid — coral does the emotional work, grayscale keeps it clear.</div>
<div class="cta">Get Your Box</div>
</div>
<div class="right"><div class="book"></div><div class="book2"></div><div class="book3"></div></div>
</div>
<div class="sec">
<div class="seclabel">This Month's Crates</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f0523d,#3e3e3e)"></div><div class="ptitle">Fantasy Reader Crate</div><div class="pdesc">Signed hardcover + 3 curated extras</div><div class="subbtn">Subscribe</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a1a1a1,#3e3e3e)"></div><div class="ptitle">Cozy Mystery Crate</div><div class="pdesc">First-edition pick + tea & bookmark</div><div class="subbtn">Subscribe</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e4e4e4,#f0523d)"></div><div class="ptitle">Romance Bundle</div><div class="pdesc">Author letter + candle + enamel pin</div><div class="subbtn">Subscribe</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ebebe4; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ebebe4; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; background: #d91c01; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; background: #ebebe4; color: #121212;
border: 1px solid #d91c01; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ebebe4; color: #121212;
border: 1px solid #b5b5b0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #d91c01; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; position:relative; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ebebe4; color:#292929; box-sizing:border-box;
font-family:'Rubik',-apple-system,system-ui,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:20px; font-weight:500; color:#121212; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:28px; }
.navlinks span { font-size:14px; font-weight:400; color:#6a6a6a; }
.navr { display:flex; align-items:center; gap:18px; }
.icon { width:20px; height:20px; border-radius:50%; border:1.5px solid #6a6a6a; }
.cart { background:#d91c01; color:#fff; font-size:11px; font-weight:700; border-radius:999px;
width:18px; height:18px; display:flex; align-items:center; justify-content:center; }
.hero { display:flex; align-items:center; padding:20px 40px 26px; gap:48px; }
.htext { max-width:400px; }
.htext h1 { font-size:32px; font-weight:500; letter-spacing:-0.5px; color:#121212; margin:0 0 12px; line-height:1.2; }
.htext p { font-size:16px; color:#292929; margin:0 0 18px; line-height:1.5; }
.btn { display:inline-block; background:#d91c01; color:#fff; font-size:14px; font-weight:500;
padding:12px 26px; border-radius:12px; }
.hshapes { display:flex; gap:14px; flex-shrink:0; }
.shape { width:88px; height:120px; border-radius:12px; }
.s1 { background:#c5c5c5; align-self:flex-end; }
.s2 { background:#d91c01; height:150px; }
.s3 { background:#292929; align-self:flex-start; height:100px; }
.section { padding:0 40px; }
.section h2 { font-size:20px; font-weight:500; color:#121212; margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.card { background:#ffffff; border-radius:12px; padding:14px; }
.swatch { height:96px; border-radius:12px; margin-bottom:12px; }
.k1 .swatch { background:#a4a4a4; }
.k2 .swatch { background:#d91c01; }
.k3 .swatch { background:#121212; }
.k4 .swatch { background:#c5c5c5; }
.card .t { font-size:16px; font-weight:500; color:#121212; margin:0 0 4px; }
.card .p { font-size:14px; color:#6a6a6a; }
.checkout-note { position:absolute; bottom:14px; right:40px; display:flex; align-items:center; gap:6px;
font-size:11px; color:#a4a4a4; }
.checkout-note .dot { width:8px; height:8px; border-radius:50%; background:#005bd3; }
</style></head>
<body>
<nav>
<div class="brand">Grimm S</div>
<div class="navlinks"><span>Wooden Toys</span><span>Games</span><span>Building</span><span>By Age</span></div>
<div class="navr"><div class="icon"></div><div class="cart">2</div></div>
</nav>
<div class="hero">
<div class="htext">
<h1>Honest toys, cut from raw beechwood.</h1>
<p>No gloss, no gradients, no plastic — every piece is built to be handed down, not thrown out.</p>
<span class="btn">Shop Wooden Toys</span>
</div>
<div class="hshapes"><div class="shape s1"></div><div class="shape s2"></div><div class="shape s3"></div></div>
</div>
<div class="section">
<h2>Best Sellers</h2>
<div class="grid">
<div class="card k1"><div class="swatch"></div><div class="t">Rainbow Stacker</div><div class="p">$42.00</div></div>
<div class="card k2"><div class="swatch"></div><div class="t">Balance Board</div><div class="p">$68.00</div></div>
<div class="card k3"><div class="swatch"></div><div class="t">Marble Run Set</div><div class="p">$96.00</div></div>
<div class="card k4"><div class="swatch"></div><div class="t">Nesting Blocks</div><div class="p">$34.00</div></div>
</div>
</div>
<div class="checkout-note"><div class="dot"></div>Secure checkout</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdfdfd; color: #0c0c0c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdfdfd; color: #0c0c0c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.18; margin: 0; color: #0c0c0c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #b1b3b5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 1px; background: #e1e723; color: #0c0c0c;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 1px; background: transparent; color: #0c0c0c;
border: 1px solid #e1e723; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #0c0c0c;
border: 1px solid #c1c1c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b1b3b5; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 1px; background: #e1e723; color: #0c0c0c;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fdfdfd; font-family:Roboto,Helvetica,Arial,sans-serif; color:#141e23; }
*{box-sizing:border-box;}
.utility{height:30px;background:#141e23;color:#fff;display:flex;align-items:center;justify-content:flex-end;gap:18px;padding:0 34px;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.nav{height:60px;background:#0c0c0c;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-family:'futura-pt',Helvetica,sans-serif;font-size:20px;font-weight:700;color:#fff;letter-spacing:0.5px;}
.logo span{color:#e1e723;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:#fff;}
.hero{height:250px;background:#0c0c0c;display:flex;align-items:center;padding:0 34px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:60px;top:30px;width:220px;height:190px;background:linear-gradient(160deg,#e1e723,#4a6e78 70%);border-radius:8px;}
.herotext{width:48%;z-index:1;}
.herotext h1{font-family:'futura-pt',Helvetica,sans-serif;font-size:36px;font-weight:700;color:#fff;text-transform:uppercase;line-height:1.05;margin:0 0 14px;letter-spacing:-0.3px;}
.herotext p{font-size:14px;color:#dddedf;margin:0 0 18px;max-width:320px;}
.cta{display:inline-block;background:#e1e723;color:#0c0c0c;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:14px 26px;border-radius:4px;}
.platformrow{display:flex;gap:1px;background:#dddedf;margin:16px 34px 0;}
.platform{flex:1;background:#f7f7f8;text-align:center;padding:10px;font-family:'futura-pt',Helvetica,sans-serif;font-size:13px;font-weight:600;text-transform:uppercase;color:#141e23;}
.platform.active{background:#0c0c0c;color:#fff;border-bottom:3px solid #e1e723;}
.grid{display:flex;gap:14px;padding:16px 34px 0;}
.card{width:150px;border:1px solid #dddedf;border-radius:4px;padding:8px;position:relative;}
.badge{position:absolute;top:4px;left:4px;background:#e1e723;color:#0c0c0c;font-size:9px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;padding:3px 6px;z-index:2;}
.thumb{height:100px;border-radius:4px;margin-bottom:6px;background:#f7f7f8;}
.ptitle{font-family:'futura-pt',Helvetica,sans-serif;font-size:13px;font-weight:600;color:#0c0c0c;line-height:1.25;text-transform:uppercase;height:32px;overflow:hidden;}
.pprice{font-family:'futura-pt',Helvetica,sans-serif;font-size:15px;font-weight:700;color:#0c0c0c;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;background:#0c0c0c;border-top:3px solid #e1e723;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:11px;color:#b1b3b5;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="utility">Store Finder Track Order</div>
<div class="nav">
<div class="logo">Ryobi<span>+</span></div>
<div class="navlinks"><div>Outdoor</div><div>Power Tools</div><div>Batteries</div><div>Deals</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>One Battery.<br>Every Tool.</h1>
<p>18V ONE+ platform tools built for the job site, priced for the garage.</p>
<div class="cta">Shop ONE+</div>
</div>
</div>
<div class="platformrow">
<div class="platform active">ONE+</div>
<div class="platform">LINK</div>
<div class="platform">HP</div>
<div class="platform">48V</div>
</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#e1e723,#0c0c0c)"></div><div class="ptitle">18V Brushless Drill Kit</div><div class="pprice">$129.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#141e23,#e1e723)"></div><div class="ptitle">40V Cordless Mower</div><div class="pprice">$399.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4a6e78,#e1e723)"></div><div class="ptitle">ONE+ 6.0Ah Battery</div><div class="pprice">$99.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0c0c0c,#141e23)"></div><div class="ptitle">HP Impact Driver</div><div class="pprice">$149.00</div></div>
</div>
<div class="footer"><span>© Tools Built to Match</span><span>Warranty Battery Finder Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a1a1a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a1a1a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #929292; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fdf8f2; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #fdf8f2;
border: 1px solid #fdf8f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a1a1a; color: #f5f5f5;
border: 1px solid #3d3d3d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929292; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3e3e3d; color: #fdf8f2;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FDF8F2; color:#1A1A1A; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#FDF8F2; padding:22px 18px; position:relative; }
.header { font-size:22px; font-weight:700; margin-bottom:14px; }
.photo { height:190px; border-radius:16px; margin-bottom:14px; position:relative; overflow:hidden;
background:linear-gradient(160deg,#e7c9a8,#a6785a); }
.hearttap { position:absolute; bottom:12px; right:12px; width:44px; height:44px; border-radius:50%; background:#FAF6F0;
border:1px solid #1A1A1A; display:flex; align-items:center; justify-content:center; font-size:18px; }
.prompt { background:#FAF6F0; border:0.5px solid #E0D6C5; border-radius:16px; padding:24px; position:relative; }
.pq { font-size:16px; font-weight:500; color:#4A4239; margin-bottom:10px; font-style:italic; }
.pa { font-size:18px; font-weight:700; color:#1A1A1A; }
.prompt .hearttap { bottom:12px; right:12px; }
.vitals { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.vitals span { background:#F2EBE0; border-radius:999px; padding:7px 12px; font-size:12px; font-weight:500; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:56px; background:#FDF8F2; border-top:0.5px solid #E0D6C5;
display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:#7A7268; text-align:center; }
.tab.on { color:#1A1A1A; font-weight:600; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.brand span { color:#E8A04D; }
.tag { font-size:14px; color:#4A4239; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:16px; border:1px solid #E0D6C5; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#4A4239; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:700; }
.typeblock .t2 { font-size:13px; color:#4A4239; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:999px;
background:#F2EBE0; border:1px solid #E0D6C5; color:#4A4239; }
.footer { margin-top:auto; border-top:1px solid #E0D6C5; padding-top:16px; font-size:11px; color:#7A7268; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="header">Sigrún, 28</div>
<div class="photo"><div class="hearttap">♥</div></div>
<div class="prompt">
<div class="pq">Two truths and a lie</div>
<div class="pa">I've summited three volcanoes, I once slept through an earthquake, and I hate coffee.</div>
<div class="hearttap">♥</div>
</div>
<div class="vitals"><span>5'9"</span><span>Product Designer</span><span>San Francisco</span></div>
<div class="tabbar"><div class="tab on">Discover</div><div class="tab">Likes You</div><div class="tab">Standouts</div><div class="tab">Matches</div><div class="tab">Profile</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">Hinge (iOS)<span>.</span></h1>
<p class="tag">A profile printed on warm cream paper — a vertical scroll of prompts and photos, each answered with a tap, not a swipe.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#1A1A1A"></div><small>#1A1A1A</small></div>
<div class="sw"><div class="chip2" style="background:#FDF8F2"></div><small>#FDF8F2</small></div>
<div class="sw"><div class="chip2" style="background:#E8A04D"></div><small>#E8A04D</small></div>
<div class="sw"><div class="chip2" style="background:#F2EBE0"></div><small>#F2EBE0</small></div>
<div class="sw"><div class="chip2" style="background:#2D7A4B"></div><small>#2D7A4B</small></div>
</div>
<div class="typeblock">
<div class="t1">Two truths and a lie</div>
<div class="t2">Sailec + Inter · prompt answers set larger than the question, magazine pull-quote weight</div>
</div>
<div class="taglist">
<span>Vertical scroll profile</span><span>Heart-tap on every card</span><span>Rose Gold Standouts</span>
<span>Comment-on-photo</span><span>No swipe stack</span>
</div>
<div class="footer">Cream canvas #FDF8F2 · Rose Gold sacred to Standouts, Roses, premium only</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #1c1c1c; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #1c1c1c;
border: 1px solid #1c1c1c; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f5f5f5; color: #777777;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:18px;font-weight:700;color:#1c1c1c;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#1c1c1c;}
.navlinks span:first-child{border-bottom:2px solid #1c1c1c;padding-bottom:16px;}
.hero{height:250px;display:flex;background:#f5f5f5;}
.herotext{width:44%;padding:0 36px;display:flex;flex-direction:column;justify-content:center;}
h1{font-size:28px;font-weight:700;color:#1c1c1c;margin:0 0 10px;line-height:1.25;}
.sub{font-size:13px;color:#333333;margin:0 0 18px;max-width:280px;}
.cta{display:inline-block;background:#1c1c1c;color:#fff;font-size:13px;font-weight:500;padding:12px 26px;border-radius:4px;width:fit-content;}
.heroimg{width:56%;position:relative;background:#e8e8e8;}
.kbrow{position:absolute;left:60px;top:70px;display:flex;gap:4px;}
.key{width:22px;height:22px;background:#1c1c1c;border-radius:3px;}
.kbrow2{position:absolute;left:60px;top:96px;display:flex;gap:4px;}
.spectable{display:flex;gap:1px;background:#e0e0e0;}
.speccell{flex:1;background:#fff;text-align:center;padding:10px;}
.speclabel{font-size:10px;color:#888;text-transform:uppercase;letter-spacing:.5px;}
.specvalue{font-size:14px;font-weight:700;color:#1c1c1c;margin-top:3px;}
.sec{padding:18px 36px 0;}
.sectitle{font-size:16px;font-weight:700;margin-bottom:14px;color:#1c1c1c;}
.swrow{display:flex;gap:8px;margin-bottom:14px;}
.sw{width:24px;height:24px;background:#1c1c1c;}
.grid{display:flex;gap:14px;}
.card{width:200px;border:1px solid #e0e0e0;border-radius:4px;padding:10px;}
.thumb{height:80px;background:#f5f5f5;margin-bottom:8px;}
.pname{font-size:13px;font-weight:700;margin-bottom:3px;}
.pprice{font-size:13px;color:#333;}
</style>
<div class="nav">
<div class="logo">Leopold</div>
<div class="navlinks"><span>Keyboards</span><span>Switches</span><span>Keycaps</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Built for the keystroke, not the aesthetic.</h1>
<div class="sub">Mechanical keyboards specified like instruments, sold without lifestyle noise.</div>
<div class="cta">Compare Models</div>
</div>
<div class="heroimg">
<div class="kbrow"><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div></div>
<div class="kbrow2"><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div></div>
</div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Layout</div><div class="specvalue">TKL / 60%</div></div>
<div class="speccell"><div class="speclabel">Switch</div><div class="specvalue">Cherry MX</div></div>
<div class="speccell"><div class="speclabel">Case</div><div class="specvalue">Aluminum</div></div>
<div class="speccell"><div class="speclabel">Connection</div><div class="specvalue">USB-C</div></div>
</div>
<div class="sec">
<div class="sectitle">Color Options</div>
<div class="swrow"><div class="sw" style="background:#1c1c1c;"></div><div class="sw" style="background:#aaaaaa;"></div><div class="sw" style="background:#e0e0e0;"></div></div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="pname">FC750R Series</div><div class="pprice">$189.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">FC900R Series</div><div class="pprice">$199.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">FC660C Compact</div><div class="pprice">$169.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0096d6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0096d6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0073a8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0096d6; color: #000000;
border: 1px solid #0073a8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0096d6; color: #f5f5f5;
border: 1px solid #27a5db; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0090cf; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212121; box-sizing:border-box;
font-family:"Forma DJR UI",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #e0e0e0; }
.logo { font-size:20px; font-weight:700; color:#0096d6; }
.search { background:#f7f7f7; border-radius:24px; height:36px; padding:0 16px; font-size:14px; color:#9e9e9e;
display:flex; align-items:center; width:220px; }
.btn-primary { background:#0096d6; color:#ffffff; border-radius:4px; padding:10px 20px; font-size:14px;
font-weight:600; }
.hero { background:#f7f7f7; display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:28px 40px; gap:20px; }
.hero h1 { font-size:38px; font-weight:700; line-height:1.17; letter-spacing:-0.5px; margin:0 0 12px; }
.hero p { font-size:16px; color:#595959; margin:0 0 16px; }
.row { display:flex; gap:10px; }
.btn-outline { background:#ffffff; color:#0096d6; border:1.5px solid #0096d6; border-radius:4px;
padding:10px 20px; font-size:14px; font-weight:600; }
.hero-visual { height:200px; background:linear-gradient(135deg,#e6f4fb,#0096d6); border-radius:8px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:24px 40px; }
.card { border:1px solid #e0e0e0; border-radius:8px; padding:16px; }
.card .thumb { height:80px; background:#eeeeee; border-radius:4px; margin-bottom:10px; }
.card h3 { font-size:15px; font-weight:600; margin:0 0 6px; }
.card .price { font-size:16px; font-weight:700; }
.card .badge { display:inline-block; background:#e6f4d9; color:#0c7d2f; border-radius:4px; padding:3px 8px;
font-size:11px; font-weight:600; margin-top:6px; }
footer { border-top:1px solid #e0e0e0; padding:14px 40px; text-align:center; font-size:12px; color:#767676; }
</style></head>
<body>
<nav>
<span class="logo">HP</span>
<span class="search">Search products</span>
<span class="btn-primary">Shop laptops</span>
</nav>
<section class="hero">
<div>
<h1>Power through your day</h1>
<p>Discover laptops and printers engineered for the way you work.</p>
<div class="row">
<button class="btn-primary">Shop now</button>
<button class="btn-outline">Learn more</button>
</div>
</div>
<div class="hero-visual"></div>
</section>
<div class="grid">
<div class="card"><div class="thumb"></div><h3>Spectre x360</h3><div class="price">$1,399</div><span class="badge">In stock</span></div>
<div class="card"><div class="thumb"></div><h3>OfficeJet Pro</h3><div class="price">$249</div><span class="badge">In stock</span></div>
<div class="card"><div class="thumb"></div><h3>OMEN 16</h3><div class="price">$1,799</div><span class="badge">In stock</span></div>
</div>
<footer>© HP · Keep Reinventing</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.5px; background: #ef4f29; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.5px; background: transparent; color: #1a1a1a;
border: 1px solid #ef4f29; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #d0d0d0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ef4f29; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>EN Route</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#1a1a1a; font-family:Poppins,Inter,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e5e5e5; }
.logo { font-family:'Times New Roman',serif; font-size:22px; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; }
.btn { background:#ef4f29; color:#fff; border-radius:4px; padding:12px 24px; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.hero { height:230px; background:#0d0c0c; color:#fff; display:flex; align-items:center; padding:0 32px; gap:30px; position:relative; }
.hero::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.35); }
.hero-copy { flex:1; position:relative; z-index:1; }
.hero-copy h1 { font-family:'Times New Roman',serif; font-size:44px; font-weight:400; margin:0 0 14px; line-height:1.15; }
.hero-copy p { font-size:14px; color:#ddd; max-width:340px; margin:0 0 18px; }
.hero-art { flex:1; height:160px; position:relative; z-index:1; display:flex; align-items:center; justify-content:center; }
.ring { width:130px; height:130px; border-radius:50%; border:16px solid #ef4f29; box-shadow:0 0 40px rgba(239,79,41,.4); }
.collection-header { background:#f4f4f4; padding:20px 32px; text-align:center; }
.collection-header .label { font-size:13px; letter-spacing:1px; text-transform:uppercase; color:#737373; }
.collection-header h2 { font-family:'Times New Roman',serif; font-size:26px; margin:8px 0 0; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:16px 32px; }
.card { background:#f8f8f8; border-radius:8px; padding:10px; }
.thumb { aspect-ratio:1/1; height:88px; border-radius:6px; margin-bottom:8px; position:relative; }
.t1 { background:linear-gradient(160deg,#f9bda4,#ef4f29); }
.t2 { background:linear-gradient(160deg,#e5e5e5,#1a1a1a); }
.t3 { background:linear-gradient(160deg,#f0faf0,#2d8a4e); }
.t4 { background:linear-gradient(160deg,#fafafa,#8c8c8c); }
.badge { position:absolute; top:6px; left:6px; background:#1a1a1a; color:#fff; font-size:10px; font-weight:700;
text-transform:uppercase; letter-spacing:.5px; border-radius:4px; padding:2px 6px; }
.name { font-size:13px; margin:0 0 4px; }
.price { font-size:14px; font-weight:600; }
.compare { font-size:12px; color:#888; text-decoration:line-through; margin-left:6px; }
</style></head>
<body>
<nav>
<div class="logo">EN Route</div>
<div class="navlinks"><span>Rings</span><span>Necklaces</span><span>Bracelets</span><span>Gemstones</span></div>
<div class="btn">Shop New</div>
</nav>
<div class="hero">
<div class="hero-copy">
<h1>Fine jewelry,<br>found your way</h1>
<p>Gold, silver, and gemstone pieces designed for every step of the journey.</p>
</div>
<div class="hero-art"><div class="ring"></div></div>
</div>
<div class="collection-header"><div class="label">New Arrivals</div><h2>Autumn Gold Collection</h2></div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="badge">New</span></div><p class="name">Paprika Halo Ring</p><p class="price">$249</p></div>
<div class="card"><div class="thumb t2"></div><p class="name">Ink Onyx Pendant</p><p class="price">$189 <span class="compare">$229</span></p></div>
<div class="card"><div class="thumb t3"></div><p class="name">Sage Emerald Studs</p><p class="price">$159</p></div>
<div class="card"><div class="thumb t4"></div><p class="name">Silver Chain Bracelet</p><p class="price">$99</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6d6d6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { display:flex; height:640px; }
/* left rail — federated identity, always visible */
.rail { width:230px; flex-shrink:0; border-right:1px solid #C0CDD9; padding:22px 18px; display:flex; flex-direction:column; gap:18px; }
.brand { display:flex; align-items:center; gap:10px; }
.brand .mark { width:30px; height:30px; border-radius:8px; background:#6364FF; }
.brand h1 { font-size:19px; font-weight:700; margin:0; letter-spacing:-0.3pt; }
.switcher { display:flex; gap:14px; border-bottom:1px solid #C0CDD9; padding-bottom:10px; }
.switcher span { font-size:14px; color:#606984; padding-bottom:8px; }
.switcher span.on { color:#6364FF; font-weight:600; border-bottom:2px solid #6364FF; }
.profile { margin-top:auto; display:flex; align-items:center; gap:10px; }
.avatar-sq { width:38px; height:38px; border-radius:8px; background:linear-gradient(135deg,#dceeb1,#c5b0f4); }
.profile .who b { display:block; font-size:14px; }
.profile .who span { font-size:12px; color:#606984; }
.compose-fab { position:absolute; left:196px; bottom:22px; width:52px; height:52px; border-radius:999px; background:#6364FF;
box-shadow:rgba(99,100,255,0.35) 0 6px 20px; display:flex; align-items:center; justify-content:center; }
.compose-fab .pencil { width:18px; height:18px; border:2px solid #fff; border-radius:3px; transform:rotate(45deg); }
/* timeline */
.feed { flex:1; overflow:hidden; padding:0 0 0 0; }
.feed-head { padding:18px 26px 8px; border-bottom:1px solid #C0CDD9; }
.feed-head h2 { margin:0; font-size:22px; font-weight:700; letter-spacing:-0.3pt; }
.toot { padding:16px 26px; border-bottom:1px solid #C0CDD9; display:flex; gap:12px; }
.toot .av { width:46px; height:46px; border-radius:8px; flex-shrink:0; }
.toot .body { flex:1; min-width:0; }
.toot .headrow { display:flex; align-items:baseline; gap:6px; }
.toot .headrow b { font-size:16px; font-weight:600; }
.toot .headrow .handle { font-size:14px; color:#606984; }
.toot .headrow .time { margin-left:auto; font-size:13px; color:#606984; }
.toot p.text { margin:6px 0 10px; font-size:16px; line-height:1.45; }
.toot p.text .mention { color:#6364FF; }
.actions { display:flex; justify-content:space-between; max-width:340px; }
.actions .a { display:flex; align-items:center; gap:6px; font-size:13px; color:#606984; }
.actions .a .ic { width:16px; height:16px; border:2px solid #606984; border-radius:3px; }
.actions .a.boost .ic { border-color:#2DCE89; background:#2DCE89; }
.actions .a.boost { color:#2DCE89; }
.actions .a.fav .ic { border-color:#CA8F04; background:#CA8F04; border-radius:2px; }
.actions .a.fav { color:#CA8F04; }
.cw { background:#F2F3F8; border-radius:8px; padding:12px 14px; margin:6px 0 10px; }
.cw .warn { font-size:15px; font-weight:600; display:flex; align-items:center; gap:8px; }
.cw .warn .eye { width:14px; height:10px; border:2px solid #000; border-radius:50%; }
.cw .more { margin-top:8px; font-size:14px; font-weight:700; letter-spacing:0.2pt; color:#6364FF; text-transform:uppercase; }
.avatar-1 { background:linear-gradient(135deg,#efd4d4,#c5b0f4); }
.avatar-2 { background:linear-gradient(135deg,#dceeb1,#c8e6cd); }
.avatar-3 { background:linear-gradient(135deg,#c5b0f4,#dceeb1); }
</style></head>
<body>
<div class="shell">
<div class="rail">
<div class="brand"><div class="mark"></div><h1>Mastodon (iOS)</h1></div>
<div class="switcher"><span class="on">Home</span><span>Local</span><span>Federated</span></div>
<div class="profile">
<div class="avatar-sq"></div>
<div class="who"><b>Eugen</b><span>@[email protected]</span></div>
</div>
</div>
<div class="feed">
<div class="feed-head"><h2>Home</h2></div>
<div class="toot">
<div class="av avatar-1"></div>
<div class="body">
<div class="headrow"><b>Marta Reyes</b><span class="handle">@[email protected]</span><span class="time">2h</span></div>
<p class="text">Migrated my whole photography archive to the fediverse this weekend — feels good to own my own timeline again. <span class="mention">#fediverse</span></p>
<div class="actions">
<div class="a"><div class="ic"></div>12</div>
<div class="a boost"><div class="ic"></div>34</div>
<div class="a fav"><div class="ic"></div>58</div>
<div class="a"><div class="ic"></div></div>
</div>
</div>
</div>
<div class="toot">
<div class="av avatar-2"></div>
<div class="body">
<div class="headrow"><b>Deck Notes</b><span class="handle">@[email protected]</span><span class="time">4h</span></div>
<div class="cw">
<div class="warn"><div class="eye"></div>spoilers: season finale reaction</div>
<div class="more">SHOW MORE</div>
</div>
<div class="actions">
<div class="a"><div class="ic"></div>3</div>
<div class="a"><div class="ic"></div>7</div>
<div class="a"><div class="ic"></div>21</div>
<div class="a"><div class="ic"></div></div>
</div>
</div>
</div>
<div class="toot">
<div class="av avatar-3"></div>
<div class="body">
<div class="headrow"><b>Ilya Petrov</b><span class="handle">@[email protected]</span><span class="time">6h</span></div>
<p class="text">Reminder that the federated timeline is the whole point — you're not just talking to your instance, you're talking to the network. <span class="mention">@[email protected]</span> said it best.</p>
<div class="actions">
<div class="a"><div class="ic"></div>2</div>
<div class="a boost"><div class="ic"></div>9</div>
<div class="a"><div class="ic"></div>15</div>
<div class="a"><div class="ic"></div></div>
</div>
</div>
</div>
</div>
</div>
<div class="compose-fab"><div class="pencil"></div></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f9f9; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f9f9; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 22px; font-weight: 400; line-height: 1.2; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #121212; color: #f8f9f9;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #f8f9f9; color: #121212;
border: 1px solid #121212; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f8f9f9; color: #121212;
border: 1px solid #bebfbf; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 10px; font-weight: 400; line-height: 1.2; letter-spacing: 0.3px; background: #121212; color: #f8f9f9;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f9f9; font-family:'Courier New',Consolas,monospace; color:#5c5951; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #121212;}
.logo{font-size:17px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#121212;}
.navlinks{display:flex;gap:22px;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#121212;}
.body{display:flex;height:502px;}
.left{width:56%;padding:34px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid #dedede;}
.left .tag{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#baafa4;margin-bottom:16px;}
.left h1{font-size:34px;font-weight:700;letter-spacing:-.5px;color:#121212;margin:0 0 16px;line-height:1.15;text-transform:uppercase;}
.left p{font-size:13px;line-height:1.7;color:#5c5951;margin:0 0 22px;max-width:360px;}
.btn{width:fit-content;background:#121212;color:#f8f9f9;font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;padding:14px 26px;}
.right{width:44%;padding:34px;}
.right .lbl{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#121212;margin-bottom:16px;}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.tile{height:98px;background:#121212;}
.tile.a{background:linear-gradient(160deg,#2a2a2a,#121212);}
.tile.b{background:linear-gradient(160deg,#5c5951,#2a2a2a);}
.tile.c{background:linear-gradient(160deg,#baafa4,#5c5951);}
.tile.d{background:linear-gradient(160deg,#dbdfe0,#baafa4);}
.strip{height:82px;border-top:1px solid #121212;display:flex;align-items:center;padding:0 34px;gap:20px;}
.chip{border:1px solid #121212;border-radius:9999px;padding:6px 18px;font-size:11px;font-weight:700;letter-spacing:.6px;color:#121212;}
.chip.on{background:#121212;color:#f8f9f9;}
.price{margin-left:auto;font-size:18px;font-weight:700;color:#121212;}
</style>
<div class="nav">
<div class="logo">Satisfy</div>
<div class="navlinks"><div>Run</div><div>Recover</div><div>Archive</div><div>Cart(1)</div></div>
</div>
<div class="body">
<div class="left">
<div class="tag">Spec 004 // Distance Tee</div>
<h1>Built for the miles no one applauds.</h1>
<p>Raw-cut running fabric, no branding theatrics. A garment that knows exactly what it is.</p>
<div class="btn">Add to Cart</div>
</div>
<div class="right">
<div class="lbl">Colorway</div>
<div class="gallery">
<div class="tile a"></div><div class="tile b"></div>
<div class="tile c"></div><div class="tile d"></div>
</div>
</div>
</div>
<div class="strip">
<div class="chip on">S</div><div class="chip">M</div><div class="chip">L</div><div class="chip">XL</div>
<div class="price">$85.00</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #32373c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #32373c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #32373c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #667085; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #17bbef; color: #000000;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #003388; color: #ffffff;
border: 1px solid #17bbef; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #32373c;
border: 1px solid #dcdee2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #667085; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #17bbef; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Roboto,Arial,sans-serif; color:#444444; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dcdee2;}
.logo{font-family:Montserrat,Arial,sans-serif;font-size:19px;font-weight:700;color:#17bbef;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;color:#444444;}
.navlinks span:first-child{border-bottom:2px solid #17bbef;padding-bottom:18px;}
.hero{height:250px;display:flex;background:#ecf0f5;}
.herotext{width:46%;padding:0 36px;display:flex;flex-direction:column;justify-content:center;}
h1{font-family:Montserrat,Arial,sans-serif;font-size:30px;font-weight:700;color:#222;margin:0 0 12px;line-height:1.2;}
.sub{font-size:14px;color:#667085;margin:0 0 18px;max-width:300px;}
.cta{display:inline-block;background:#17bbef;color:#fff;font-family:Montserrat,Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:12px 26px;border-radius:4px;width:fit-content;}
.heroimg{width:54%;position:relative;background:linear-gradient(160deg,#ffffff,#ecf0f5);}
.chassis{position:absolute;left:80px;top:30px;width:130px;height:180px;background:linear-gradient(135deg,#f5f5f5,#ecf0f5);border:2px solid #17bbef;border-radius:8px;}
.glow{position:absolute;left:100px;top:60px;width:90px;height:6px;background:#17bbef;border-radius:3px;box-shadow:0 0 12px #17bbef;}
.glow2{position:absolute;left:100px;top:100px;width:90px;height:6px;background:#17bbef;border-radius:3px;box-shadow:0 0 12px #17bbef;}
.sec{padding:18px 36px 0;}
.sectitle{font-family:Montserrat,Arial,sans-serif;font-size:16px;font-weight:700;margin-bottom:14px;color:#222;}
.grid{display:flex;gap:14px;}
.card{width:198px;border-radius:8px;border:1px solid #dcdee2;padding:10px;position:relative;}
.thumb{height:84px;background:#ecf0f5;border-radius:6px;margin-bottom:8px;}
.badge{position:absolute;top:16px;left:16px;background:#17bbef;color:#fff;font-family:Montserrat,Arial,sans-serif;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.pname{font-size:13px;font-weight:500;color:#222;margin-bottom:3px;}
.pprice{font-size:14px;font-weight:700;color:#222;}
</style>
<div class="nav">
<div class="logo">Lian LI</div>
<div class="navlinks"><span>Cases</span><span>Cooling</span><span>Fans</span><span>Accessories</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Architectural, Not Arcade.</h1>
<div class="sub">Cases and cooling engineered for builders who measure clearances before colors.</div>
<div class="cta">Shop Cases</div>
</div>
<div class="heroimg"><div class="chassis"></div><div class="glow"></div><div class="glow2"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb"></div><div class="pname">O11 Dynamic EVO</div><div class="pprice">$169.99</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Uni Fan SL-Infinity</div><div class="pprice">$79.99</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Lancool 216</div><div class="pprice">$99.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #171717;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #171717;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #171717; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6d6d6d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #2aded0; color: #171717;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f5f5f5; color: #171717;
border: 1px solid #2aded0; border-radius: 6px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f5f5f5; color: #2c2b2b;
border: 1px solid #bebebe; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d6d6d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #e1e83a; color: #171717;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; color:#2c2b2b; font-family:'Inter',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;background:#171717;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-family:'Denton',Georgia,serif;font-size:19px;font-weight:700;color:#2aded0;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#e7e7e7;}
.hero{height:230px;background:#171717;display:flex;align-items:center;padding:0 34px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:0;top:0;width:340px;height:230px;background:linear-gradient(135deg,#082c2a,#16736c 60%,#2aded0);}
.herotext{position:relative;z-index:2;width:56%;}
.kicker{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#e1e83a;margin-bottom:10px;}
.herotext h1{font-family:'Denton',Georgia,serif;font-size:32px;font-weight:700;color:#fff;margin:0 0 12px;line-height:1.15;}
.herotext p{font-size:14px;color:#b0b0b0;margin:0 0 18px;max-width:340px;}
.cta{display:inline-block;background:#2aded0;color:#171717;font-size:13px;font-weight:700;padding:12px 26px;border-radius:8px;width:fit-content;}
.colorbar{height:36px;background:#2aded0;display:flex;align-items:center;padding:0 34px;font-size:12px;font-weight:700;color:#0f504b;letter-spacing:0.5px;text-transform:uppercase;}
.seclabel{font-family:'Denton',Georgia,serif;font-size:16px;font-weight:700;color:#171717;padding:18px 34px 12px;}
.grid{display:flex;gap:14px;padding:0 34px;}
.card{width:150px;background:#ffffff;border-radius:10px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#e1e83a;color:#2c2b2b;font-size:9px;font-weight:800;letter-spacing:0.3px;text-transform:uppercase;padding:3px 7px;border-radius:6px;z-index:2;}
.thumb{height:94px;border-radius:8px;margin-bottom:8px;}
.ptitle{font-size:12px;font-weight:700;color:#171717;line-height:1.3;height:30px;overflow:hidden;}
.pprice{font-size:13px;font-weight:800;color:#0f504b;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#171717;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:11px;color:#b0b0b0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Teton Gravity Research</div>
<div class="navlinks"><span>Films</span><span>Apparel</span><span>Adventures</span><span>Journal</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">New Film Series</div>
<h1>Summit Sunrise, Every Frame</h1>
<p>Apparel built for the treeline and the alpine, worn in every film we've shot since 1995.</p>
<div class="cta">Shop the Drop</div>
</div>
</div>
<div class="colorbar">Now Streaming — Deeper Into the Range Vol. 12</div>
<div class="seclabel">Alpine Layers</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#2aded0,#082c2a)"></div><div class="ptitle">Summit Shell Jacket</div><div class="pprice">$289.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#082c2a,#e1e83a)"></div><div class="ptitle">Ridge Fleece Pullover</div><div class="pprice">$135.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e1e83a,#2aded0)"></div><div class="ptitle">TGR Trucker Cap</div><div class="pprice">$32.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#16736c,#e1e83a)"></div><div class="ptitle">Backcountry Film Vol. 12</div><div class="pprice">$24.99</div></div>
</div>
<div class="footer"><span>© High-Altitude Media Since 1995</span><span>Watch the Trailer</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #232323;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #232323;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.36; margin: 0; color: #232323; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #53565b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.16px; background: #006449; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.16px; background: #f7f7f7; color: #006449;
border: 1px solid #006449; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #494a4d;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #53565b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.11px; background: #e3f1ca; color: #006449;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f7f7; font-family:Arial,sans-serif; color:#494a4d; }
*{box-sizing:border-box;}
.nav{height:60px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 38px;border-bottom:1px solid #dedede;}
.logo{font-family:'ps-roobert',Arial,sans-serif;font-size:22px;font-weight:700;color:#006449;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;color:#494a4d;}
.search{width:220px;height:34px;border-radius:9999px;background:#f7f7f7;border:1px solid #dedede;font-size:12px;color:#8a8a8a;display:flex;align-items:center;padding:0 16px;}
.hero{display:flex;height:260px;background:#f7f7f7;position:relative;}
.leaf{position:absolute;right:40px;top:30px;width:120px;height:120px;border-radius:0 100% 0 100%;background:#4d8000;opacity:.15;}
.left{width:440px;padding:44px 38px;display:flex;flex-direction:column;justify-content:center;}
.h1{font-family:'ps-roobert',Arial,sans-serif;font-size:28px;font-weight:700;color:#006449;line-height:1.25;margin:0 0 14px;}
.sub{font-size:16px;line-height:1.6;color:#494a4d;max-width:340px;margin:0 0 20px;}
.cta{display:inline-block;background:#006449;color:#fff;font-size:14px;font-weight:700;padding:12px 26px;border-radius:10px;width:fit-content;}
.right{flex:1;position:relative;}
.bottle{position:absolute;left:50%;top:30px;transform:translateX(-50%);width:70px;height:170px;border-radius:10px 10px 20px 20px;background:linear-gradient(180deg,#006449,#4d8000);}
.cap{position:absolute;left:50%;top:16px;transform:translateX(-50%);width:36px;height:20px;border-radius:4px;background:#015b42;}
.sec{padding:20px 38px 0;}
.seclabel{font-size:16px;font-weight:700;color:#494a4d;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:210px;background:#fff;border:1px solid #dedede;border-radius:8px;padding:12px;}
.thumb{aspect-ratio:1/1;background:#f0f5ec;border-radius:8px;margin-bottom:8px;}
.ptitle{font-size:14px;font-weight:700;margin:0 0 6px;color:#333;}
.pprice{font-size:13px;color:#494a4d;}
.ecobadge{display:inline-block;background:#e3f1ca;color:#006449;font-size:9px;font-weight:700;padding:3px 8px;border-radius:8px;margin-bottom:6px;text-transform:uppercase;}
</style>
<div class="nav">
<div class="logo">Seventh Generation</div>
<div class="navlinks"><div>Cleaning</div><div>Laundry</div><div>Dish</div><div>Baby</div></div>
<div class="search">Search products…</div>
</div>
<div class="hero">
<div class="leaf"></div>
<div class="left">
<div class="h1">Stewardship, not<br>just surface clean.</div>
<div class="sub">Belongs in a CSA box, not a supermarket aisle — serious without being stern.</div>
<div class="cta">Shop Cleaners</div>
</div>
<div class="right"><div class="bottle"></div><div class="cap"></div></div>
</div>
<div class="sec">
<div class="seclabel">Best Sellers</div>
<div class="grid">
<div class="card"><span class="ecobadge">USDA Bio-Based</span><div class="thumb" style="background:linear-gradient(135deg,#006449,#f7f7f7)"></div><div class="ptitle">Free & Clear Dish Liquid</div><div class="pprice">$5.49</div></div>
<div class="card"><span class="ecobadge">EWG Verified</span><div class="thumb" style="background:linear-gradient(135deg,#4d8000,#f7f7f7)"></div><div class="ptitle">Laundry Detergent Concentrate</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff3008,#f7f7f7)"></div><div class="ptitle">Disinfecting Wipes</div><div class="pprice">$6.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#006449,#4d8000)"></div><div class="ptitle">All-Purpose Cleaner</div><div class="pprice">$4.29</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e1311; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e1311; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; letter-spacing: 0.01em; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9a9a94; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.04em; background: #11b1a7; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.04em; background: transparent; color: #11b1a7;
border: 1px solid #11b1a7; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1c1d1d; color: #f5f5f5;
border: 1px solid #2b2b2b; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9a94; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.08em; background: #2b2b2b; color: #ffb846;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#0e1311; color:#f5f5f5; font-family:'Outfit', system-ui, sans-serif; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #2b2b2b;}
.logo{font-family:'Tenor Sans',Georgia,serif;font-size:22px;color:#f5f5f5;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#e8e8e1;}
.hero{height:230px;display:flex;background:#0e1311;position:relative;}
.hero:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 75% 50%, rgba(255,184,70,0.10), transparent 60%);}
.herotext{width:48%;padding:0 32px;display:flex;flex-direction:column;justify-content:center;z-index:1;}
.herotext h1{font-family:'Tenor Sans',Georgia,serif;font-size:38px;font-weight:400;margin:0 0 12px;line-height:1.15;}
.herotext p{font-size:14px;color:#9a9a94;margin:0 0 18px;max-width:300px;}
.herocta{width:fit-content;background:#11b1a7;color:#fff;font-size:15px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;padding:14px 28px;border-radius:8px;}
.bottleimg{position:absolute;right:100px;top:24px;width:64px;height:180px;background:linear-gradient(180deg,#ffb846,#d05b2e 80%);border-radius:6px 6px 14px 14px;}
.bottleimg:before{content:'';position:absolute;left:14px;top:-18px;width:36px;height:22px;background:#231f20;border-radius:4px;}
.filters{display:flex;gap:8px;padding:16px 32px 0;}
.pill{background:#1c1d1d;color:#e8e8e1;font-size:12px;padding:6px 14px;border-radius:9999px;}
.pill.active{background:#11b1a7;color:#fff;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:206px;background:#231f20;border-radius:8px;padding:14px;}
.thumb{height:96px;background:linear-gradient(180deg,#e16f27,#231f20);border-radius:6px;margin-bottom:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#2b2b2b;color:#ffb846;border:1px solid #ffb846;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.ptitle{font-size:16px;font-weight:600;}
.pprice{font-family:'Tenor Sans',Georgia,serif;font-size:22px;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#1c1d1d;color:#e8e8e1;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;border-top:1px solid #2b2b2b;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Rare Whiskey Shop</div>
<div class="navlinks"><div>Scotch</div><div>Bourbon</div><div>Rare Casks</div><div>Auctions</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Pappy Van Winkle 23-Year</h1>
<p>Allocated bottles from bonded warehouses, poured and inspected under a single lamp.</p>
<div class="herocta">Reserve Allocation</div>
</div>
<div class="bottleimg"></div>
</div>
<div class="filters"><div class="pill active">All</div><div class="pill">Age 18+</div><div class="pill">Cask Strength</div><div class="pill">In Stock</div></div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">23 Year</div></div><div class="ptitle">Pappy Van Winkle 23</div><div class="pprice">$3,200</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(180deg,#ffb846,#231f20);"><div class="badge">Cask Strength</div></div><div class="ptitle">Highland Single Malt 18</div><div class="pprice">$680</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(180deg,#d05b2e,#231f20);"><div class="badge">Only 2 Left</div></div><div class="ptitle">Islay Peated Reserve</div><div class="pprice">$420</div></div>
</div>
<div class="footer"><span>© The Rare Whiskey Shop</span><span>Provenance Verified Insured Shipping</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: #ee3f34; color: #ffffff;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: #ffffff; color: #1a1a1a;
border: 1px solid #ee3f34; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.4px; background: #e8f7f0; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Century Gothic', Arial, sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.announce{height:32px;background:#ee3f34;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:0.3px;}
.nav{height:56px;background:#ffffff;border-bottom:1px solid #ebebeb;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:800;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:700;color:#3d3d3d;}
.navlinks span:first-child{color:#ee3f34;}
.hero{height:190px;display:flex;align-items:center;padding:0 32px;}
.heroText{width:440px;}
.h1{font-size:30px;font-weight:800;line-height:1.15;margin:0 0 10px;}
.sub{font-size:13px;color:#3d3d3d;margin:0 0 14px;max-width:340px;}
.btn{display:inline-flex;align-items:center;height:42px;padding:0 24px;border-radius:12px;background:#ee3f34;color:#fff;font-size:13px;font-weight:700;}
.upload{width:400px;height:100px;border:2px dashed #dddddd;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#ee3f34;background:#f5f5f5;}
.pricebar{display:flex;margin:0 32px;background:#f5f5f5;border-radius:4px;overflow:hidden;}
.pcell{flex:1;text-align:center;padding:8px;font-size:11px;color:#767676;border-right:1px solid #ebebeb;}
.pcell:last-child{border-right:none;}
.pcell b{display:block;font-size:13px;color:#1a1a1a;margin-top:2px;}
.sec{padding:16px 32px;}
.sectitle{font-size:14px;font-weight:800;margin-bottom:10px;}
.grid{display:flex;gap:12px;}
.card{width:216px;background:#f5f5f5;border-radius:8px;padding:12px;}
.thumb{height:78px;border-radius:9999px;margin:0 auto 10px;width:78px;}
.ptitle{font-size:13px;font-weight:700;text-align:center;margin-bottom:4px;}
.turnaround{font-size:10px;color:#ee3f34;font-weight:700;text-align:center;margin-bottom:4px;}
.pprice{font-size:13px;font-weight:700;text-align:center;}
</style>
<div class="announce">FREE SHIPPING ON ALL ORDERS OVER $25</div>
<div class="nav">
<div class="logo">Sticker Mule</div>
<div class="navlinks"><span>Stickers</span><span>Labels</span><span>Magnets</span><span>Signs</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Custom stickers,<br>printed and shipped fast.</div>
<div class="sub">Upload your artwork and get production-grade stickers in days, not weeks.</div>
<div class="btn">Get a Quote</div>
</div>
<div class="upload">Upload artwork</div>
</div>
<div class="pricebar">
<div class="pcell">Qty<b>100</b></div>
<div class="pcell">Unit Price<b>$0.42</b></div>
<div class="pcell">Total<b>$42.00</b></div>
</div>
<div class="sec">
<div class="sectitle">Popular Products</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#ee3f34"></div><div class="ptitle">Die-Cut Stickers</div><div class="turnaround">2-day turnaround</div><div class="pprice">from $42.00</div></div>
<div class="card"><div class="thumb" style="background:#1a1a1a"></div><div class="ptitle">Vinyl Product Labels</div><div class="turnaround">3-day turnaround</div><div class="pprice">from $59.00</div></div>
<div class="card"><div class="thumb" style="background:#767676"></div><div class="ptitle">Custom Magnets</div><div class="turnaround">4-day turnaround</div><div class="pprice">from $65.00</div></div>
<div class="card"><div class="thumb" style="background:#9e9e9e"></div><div class="ptitle">Yard Signs</div><div class="turnaround">3-day turnaround</div><div class="pprice">from $19.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #282828;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #282828;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #282828; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #616161; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #003388; color: #ffffff;
border: none; border-radius: 0px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #003388;
border: 1px solid #003388; border-radius: 0px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #282828;
border: 1px solid #bcbcbc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #616161; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ff6900; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eeeeee; color:#282828; box-sizing:border-box;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:64px; background:#eeeeee; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; }
.brand { font-size:18px; font-weight:700; color:#003388; text-transform:uppercase; letter-spacing:1px; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:600; letter-spacing:0.3px; color:#282828; }
.hero { background:#003388; color:#ffffff; padding:26px 36px; display:flex; justify-content:space-between; align-items:flex-end; }
.hero h1 { font-size:30px; font-weight:700; margin:0; letter-spacing:-0.6px; }
.hero .sub { font-size:13px; opacity:0.8; margin-top:6px; }
.hero .price { font-size:26px; font-weight:700; }
.layout { display:flex; height:calc(640px - 64px - 96px); }
.media { width:360px; flex-shrink:0; background:#e8e8eb; position:relative; }
.frame { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:180px; height:260px;
border:8px solid #003388; border-radius:0; background:repeating-linear-gradient(0deg, #ffffff 0 2px, #e8e8eb 2px 20px); }
.badge { position:absolute; top:16px; left:16px; background:#ff6900; color:#ffffff; font-size:11px; font-weight:600;
letter-spacing:0.5px; text-transform:uppercase; padding:4px 8px; }
.detail { flex:1; padding:22px 34px; display:flex; flex-direction:column; gap:12px; }
.stars { color:#ff6900; font-size:14px; }
.spec-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.spec { border:1px solid #b6b6b6; padding:10px 12px; }
.spec .k { font-size:12px; color:#616161; text-transform:uppercase; letter-spacing:0.3px; }
.spec .v { font-size:15px; font-weight:600; margin-top:2px; }
.actions { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#003388; color:#ffffff; border:none; border-radius:0; height:52px; font-size:15px;
font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.btn-secondary { background:transparent; color:#003388; border:2px solid #003388; border-radius:0; height:52px;
padding:0 24px; font-size:15px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
</style></head>
<body>
<div class="topbar">
<div class="brand">Clmbr</div>
<div class="navlinks"><span>The Machine</span><span>Compare</span><span>Membership</span><span>Support</span></div>
</div>
<div class="hero">
<div>
<h1>Clmbr Machine — Studio Black</h1>
<div class="sub">Vertical climbing, low-impact, full-body engine</div>
</div>
<div class="price">$2,495</div>
</div>
<div class="layout">
<div class="media">
<div class="badge">Best Seller</div>
<div class="frame"></div>
</div>
<div class="detail">
<div class="stars">★★★★★ <span style="color:#616161;font-size:13px;">4.9 (312 reviews)</span></div>
<div class="spec-grid">
<div class="spec"><div class="k">Footprint</div><div class="v">30" × 33"</div></div>
<div class="spec"><div class="k">Resistance</div><div class="v">16 magnetic levels</div></div>
<div class="spec"><div class="k">Display</div><div class="v">15.6" touchscreen</div></div>
<div class="spec"><div class="k">Max user weight</div><div class="v">350 lbs</div></div>
</div>
<div class="actions">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compare Models</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdfcfc; color: #201d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdfcfc; color: #201d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 16px; font-weight: 700; line-height: 1.5; margin: 0; color: #201d1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 400; line-height: 1.5; margin: 0; color: #646262; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 500; line-height: 2; background: #201d1d; color: #fdfcfc;
border: none; border-radius: 4px; padding: 4px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 500; line-height: 2; background: #fdfcfc; color: #201d1d;
border: 1px solid #201d1d; border-radius: 4px;
padding: 4px 20px; white-space: nowrap; cursor: default;
}
input {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f8f7f7; color: #201d1d;
border: 1px solid #c6c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #646262; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 2; background: #201d1d; color: #fdfcfc;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fdfcfc; color:#201d1d; box-sizing:border-box;
font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
* { box-sizing:border-box; }
/* 전면 모노스페이스 — 헤드라인부터 풋터 잔글씨까지 전부 monospace.
유일한 시각적 순간은 TUI 를 흉내내는 다크 히어로 카드 하나뿐. */
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid rgba(15,0,0,0.12); font-size:13px; }
.brand { font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; color:#646262; }
.btn { background:#201d1d; color:#fdfcfc; border:none; border-radius:4px; padding:7px 16px; font-size:12px; font-weight:700;
font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; }
.wrap { padding:26px 40px 0; }
.lede { font-size:12px; color:#6e6e73; }
.lede .b { color:#007aff; }
h1 { font-size:34px; font-weight:700; margin:14px 0 8px; letter-spacing:0; line-height:1.15; max-width:560px; }
.sub { font-size:13px; color:#424245; max-width:520px; line-height:1.5; margin:0 0 20px; }
/* 다크 TUI 히어로 카드 — OpenCode 의 유일한 "비주얼 모먼트" */
.tui { background:#201d1d; border-radius:4px; padding:16px 20px; color:#fdfcfc; font-size:12px; line-height:1.7; }
.tui .prompt { color:#30d158; }
.tui .path { color:#9a9898; }
.tui .pipe { color:#646262; }
.tui .ascii { color:#ff9f0a; font-weight:700; }
.rows { padding:20px 40px 0; display:flex; flex-direction:column; gap:0; }
.row { display:flex; gap:10px; padding:10px 0; border-top:1px solid rgba(15,0,0,0.12); font-size:12.5px; }
.row .m { color:#201d1d; font-weight:700; }
.row .neg { color:#ff3b30; font-weight:700; }
.row p { margin:0; color:#424245; }
footer { border-top:1px solid rgba(15,0,0,0.12); margin-top:20px; padding:12px 40px; display:flex; justify-content:space-between;
font-size:11px; color:#6e6e73; }
</style></head>
<body>
<nav>
<p class="brand">OpenCode</p>
<div class="navlinks"><span>docs</span><span>github</span><span>discord</span></div>
<button class="btn">[ install ]</button>
</nav>
<div class="wrap">
<div class="lede">$ <span class="b">man opencode</span> — the AI coding agent, built for the terminal</div>
<h1>Your terminal.<br>Now with a co-pilot.</h1>
<p class="sub">A model-agnostic coding agent that lives where you already work — no browser tab required.</p>
<div class="tui">
<span class="path">~/projects/app</span> <span class="pipe">›</span> <span class="prompt">opencode</span><br>
<span class="ascii">[+]</span> loaded 3 providers, 12 tools<br>
<span class="ascii">[+]</span> reading src/index.ts <span class="pipe">|</span> 412 lines<br>
<span class="ascii">[-]</span> found 1 failing test <span class="pipe">|</span> patching...<br>
<span class="prompt">✓</span> all tests passing
</div>
</div>
<div class="rows">
<div class="row"><span class="m">[+]</span><p>Works with any model — Claude, GPT, Llama, or your own.</p></div>
<div class="row"><span class="neg">[-]</span><p>No lock-in, no telemetry, no non-monospace characters.</p></div>
</div>
<footer>
<span>© OpenCode</span>
<span>docs / github / discord / license</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f4; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f4; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #858585; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #680202; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #f4f4f4; color: #680202;
border: 1px solid #680202; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #bebebe; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #858585; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #5f5e97; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Hofner Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Lato','Helvetica Neue',Arial,sans-serif; background:#f4f4f4; color:#404040; }
*{box-sizing:border-box;}
.announce{height:36px;background:#680202;color:#fff;font-size:11px;letter-spacing:.5px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;}
.nav{height:72px;background:#fff;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:24px;font-weight:700;color:#1a1a1a;}
.navlinks{display:flex;gap:26px;font-size:15px;font-weight:600;color:#1a1a1a;}
.navlinks .active{color:#680202;border-bottom:2px solid #680202;padding-bottom:6px;}
.hero{display:flex;padding:24px 40px;gap:30px;align-items:center;height:210px;}
.hero-visual{width:340px;height:180px;background:linear-gradient(135deg,#3a1010,#680202);border-radius:0;display:flex;align-items:center;justify-content:center;color:#e8c;font-size:11px;letter-spacing:1px;flex-shrink:0;}
.hero-txt h1{font-size:34px;font-weight:700;line-height:1.2;margin:0 0 10px;color:#1a1a1a;}
.hero-txt p{font-size:14px;color:#404040;margin:0 0 14px;max-width:400px;}
.btn{display:inline-block;background:#680202;color:#fff;font-weight:700;font-size:14px;letter-spacing:.3px;padding:11px 22px;border-radius:8px;}
.section{padding:8px 40px;}
.section h2{font-size:20px;font-weight:600;margin:0 0 12px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{background:#fff;border-radius:4px;padding:14px;position:relative;}
.imgbox{aspect-ratio:4/3;height:90px;background:#eee;border-radius:4px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:#999;font-size:10px;text-align:center;}
.badge{position:absolute;top:10px;left:10px;background:#5f5e97;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:4px;}
.pname{font-size:15px;font-weight:600;margin:0 0 4px;color:#1a1a1a;}
.price{font-size:15px;font-weight:700;color:#680202;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#1a1a1a;color:#ababab;padding:12px 40px;display:flex;justify-content:space-between;font-size:11px;}
</style>
<div class="announce">Heritage Series — 70th Anniversary Editions Now Available</div>
<div class="nav">
<div class="logo">Hofner</div>
<div class="navlinks"><span class="active">Basses</span><span>Guitars</span><span>Heritage</span><span>Accessories</span></div>
</div>
<div class="hero">
<div class="hero-visual">INSTRUMENT PHOTOGRAPHY</div>
<div class="hero-txt">
<h1>Crafted for the<br>iconic tone.</h1>
<p>Since 1887, Höfner has built the violin bass that changed popular music — precision workmanship, unmistakable finish.</p>
<div class="btn">Shop Basses</div>
</div>
</div>
<div class="section">
<h2>Featured Instruments</h2>
<div class="grid">
<div class="card"><div class="badge">Heritage</div><div class="imgbox">500/1</div><div class="pname">500/1 Violin Bass</div><div class="price">$1,899</div></div>
<div class="card"><div class="imgbox">Verythin</div><div class="pname">Verythin Semi-Acoustic</div><div class="price">$1,299</div></div>
<div class="card"><div class="badge">Limited</div><div class="imgbox">Club Bass</div><div class="pname">Club Bass Artist Edition</div><div class="price">$2,150</div></div>
<div class="card"><div class="imgbox">Case</div><div class="pname">Hardshell Case</div><div class="price">$189</div></div>
</div>
</div>
<div class="footer"><span>© Hofner</span><span>Dealers · Support · Heritage · Contact</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1b1b1b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1b1b1b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1b1b1b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.571; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #0c4da2; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #0c4da2;
border: 1px solid #0c4da2; border-radius: 4px;
padding: 10px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.625; background: #ffffff; color: #1b1b1b;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #4caf50; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'SamsungOne',Arial,sans-serif; color:#3c3c3c; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e6e6e6;}
.logo{font-size:17px;font-weight:700;color:#0c4da2;}
.navlinks{display:flex;gap:20px;font-size:14px;color:#1b1b1b;}
.hero{height:260px;background:#1b1b1b;display:flex;align-items:center;padding:0 44px;}
.herotext{width:48%;}
.herotext h1{font-size:38px;font-weight:700;color:#fff;margin:0 0 14px;letter-spacing:-0.5px;line-height:1.1;}
.herotext p{font-size:15px;color:#dddddd;margin:0 0 18px;max-width:300px;}
.ctarow{display:flex;gap:12px;}
.cta{display:inline-block;background:#0c4da2;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;border-radius:4px;}
.cta2{display:inline-block;background:transparent;color:#fff;border:2px solid #fff;font-size:15px;font-weight:600;padding:10px 22px;border-radius:4px;}
.heroimg{width:48%;height:190px;border-radius:8px;background:radial-gradient(circle at 40% 45%,#8eb3d9,#1b1b1b 75%);}
.section{padding:18px 44px 0;}
.seclabel{font-size:22px;font-weight:600;color:#1b1b1b;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:190px;border:1px solid #f0f0f0;border-radius:8px;padding:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#e30019;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:2px 7px;border-radius:4px;}
.energybadge{position:absolute;top:8px;right:8px;background:#4caf50;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:2px 7px;border-radius:4px;}
.thumb{height:96px;border-radius:8px;background:#f5f5f5;margin-bottom:8px;}
.ptitle{font-size:15px;font-weight:500;color:#1b1b1b;margin-bottom:4px;}
.pprice{font-size:20px;font-weight:700;color:#1b1b1b;}
</style>
<div class="nav">
<div class="logo">Samsung</div>
<div class="navlinks"><div>Refrigerators</div><div>Bespoke</div><div>Family Hub</div><div>Compare</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Built to disappear into your kitchen.</h1>
<p>Bespoke panels in 24 colorways, engineered for the details you'll actually notice.</p>
<div class="ctarow"><div class="cta">Shop Bespoke</div><div class="cta2">Compare Models</div></div>
</div>
<div class="heroimg"></div>
</div>
<div class="section">
<div class="seclabel">Refrigerators</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><span class="energybadge">A+++</span><div class="thumb" style="background:linear-gradient(135deg,#f5f5f5,#0c4da2)"></div><div class="ptitle">Bespoke 4-Door Flex</div><div class="pprice">$3,199</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8eb3d9,#1b1b1b)"></div><div class="ptitle">Family Hub Touchscreen</div><div class="pprice">$3,899</div></div>
<div class="card"><span class="energybadge">A+++</span><div class="thumb" style="background:linear-gradient(135deg,#1b1b1b,#0c4da2)"></div><div class="ptitle">Counter Depth French Door</div><div class="pprice">$2,499</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a2a3a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a2a3a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a2a3a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7f8c8d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #c0392b; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #1a2a3a;
border: 1px solid #c0392b; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2c3e50;
border: 1px solid #c6cace; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7f8c8d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d4a017; color: #1a2a3a;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#2c3e50; box-sizing:border-box; font-family:Georgia, 'Times New Roman', serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#1a2a3a; display:flex; align-items:center; gap:20px; padding:0 30px;
font-family:'Montserrat', Arial, sans-serif; }
.logo { font-size:18px; font-weight:700; color:#fff; letter-spacing:-.2px; }
.navlink { font-size:14px; font-weight:500; color:#fff; padding:8px 12px; }
.navlink.active { border-bottom:2px solid #c0392b; }
.searchw { margin-left:auto; width:230px; height:36px; background:#fff; display:flex; align-items:center;
padding:0 14px; font-size:13px; color:#2c3e50; }
.crumb { font-size:12px; color:#7f8c8d; padding:10px 30px 0; font-family:'Montserrat', Arial, sans-serif; }
.crumb b { color:#1a2a3a; }
.stage { display:flex; gap:30px; padding:14px 30px 0; }
.cover { width:190px; height:280px; flex:0 0 auto; position:relative; overflow:hidden;
background:linear-gradient(160deg,#1a2a3a 0%,#c0392b 130%); box-shadow:0 6px 16px rgba(0,0,0,.16); }
.cover::before { content:''; position:absolute; left:20px; top:36px; width:150px; height:3px; background:rgba(255,255,255,.4); }
.cover::after { content:''; position:absolute; left:20px; top:48px; width:100px; height:3px; background:rgba(255,255,255,.25); }
.info { flex:1; }
h1 { font-size:24px; font-weight:700; margin:4px 0 6px; color:#1a2a3a; font-family:'Montserrat', Arial, sans-serif; }
.author { font-size:15px; color:#7f8c8d; margin-bottom:14px; }
.desc { font-size:15px; line-height:1.6; max-width:520px; margin-bottom:16px; }
.pricerow { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; font-family:'Montserrat', Arial, sans-serif; }
.price { font-size:20px; font-weight:600; }
.btnrow { display:flex; gap:10px; font-family:'Montserrat', Arial, sans-serif; }
.btn-p { background:#c0392b; color:#fff; border:none; height:44px; padding:0 26px;
font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.btn-s { background:#fff; color:#1a2a3a; border:1px solid #d5d8dc; height:44px; padding:0 22px;
font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.note { font-size:13px; color:#7f8c8d; margin-top:12px; }
.sectionwrap { padding:16px 30px 0; border-top:1px solid #d5d8dc; margin-top:16px; }
.sechdr { font-family:'Montserrat', Arial, sans-serif; font-size:20px; font-weight:600; color:#1a2a3a;
padding-bottom:8px; border-bottom:1px solid #d5d8dc; margin-bottom:12px; }
.booklist { display:flex; gap:16px; }
.bl { width:140px; }
.bl .th { width:100%; height:130px; background:linear-gradient(160deg,#1a2a3a,#7f8c8d); margin-bottom:6px; }
.bl .t { font-size:13px; font-weight:700; color:#1a2a3a; }
.bl .a { font-size:12px; color:#7f8c8d; }
</style></head>
<body>
<nav>
<span class="logo">City Lights</span>
<span class="navlink active">Books</span>
<span class="navlink">Events</span>
<span class="navlink">About</span>
<div class="searchw">Search inventory…</div>
</nav>
<div class="crumb">Fiction > Literary > <b>Staff Picks</b></div>
<div class="stage">
<div class="cover"></div>
<div class="info">
<h1>The Weight of Fog</h1>
<div class="author">by Iris Cavanaugh</div>
<div class="desc">A translator in postwar Lisbon takes on one final manuscript — a novel written by a man who may or may not have existed — and finds her own history folded inside its pages.</div>
<div class="pricerow"><span class="price">$27.00</span></div>
<div class="btnrow">
<button class="btn-p">Add to Cart</button>
<button class="btn-s">Check Store Stock</button>
</div>
<div class="note">Signed first-edition copies available while supplies last. Ships from our North Beach storefront.</div>
</div>
</div>
<div class="sectionwrap">
<div class="sechdr">Staff Picks — Literary Fiction</div>
<div class="booklist">
<div class="bl"><div class="th"></div><div class="t">A Room of Rain</div><div class="a">N. Okafor</div></div>
<div class="bl"><div class="th" style="background:linear-gradient(160deg,#c0392b,#1a2a3a)"></div><div class="t">Salt Ledger</div><div class="a">D. Marsh</div></div>
<div class="bl"><div class="th" style="background:linear-gradient(160deg,#d4a017,#1a2a3a)"></div><div class="t">The Last Cartographer</div><div class="a">P. Solano</div></div>
<div class="bl"><div class="th" style="background:linear-gradient(160deg,#7f8c8d,#1a2a3a)"></div><div class="t">Winter's Ledger</div><div class="a">R. Aoki</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff2233; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff2233; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff1414; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff2233; color: #000000;
border: 1px solid #ff1414; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff2233; color: #f5f5f5;
border: 1px solid #fd4452; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff202e; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#2a303a; box-sizing:border-box;
font-family:"Apple SD Gothic Neo", "Noto Sans", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.sidebar-header { height:100px; background:#FF2233; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; }
.brand { font-size:20px; font-weight:700; color:#ffffff; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#ffffff; opacity:0.92; }
.wrap { padding:26px 36px; }
.hero-row { display:flex; gap:20px; align-items:center; margin-bottom:22px; }
.hero-copy h1 { font-size:30px; font-weight:700; letter-spacing:-0.4px; margin:0 0 8px; color:#2d2d2d; }
.hero-copy p { font-size:13px; color:#666666; margin:0 0 14px; max-width:340px; line-height:1.4; }
.btn-primary { background:#FF2233; color:#ffffff; border:1px solid #FF2233; border-radius:8px;
padding:12px 22px; font-size:14px; font-weight:700; }
.point-card { flex:1; background:#f4f6fa; border-radius:20px; padding:20px; display:flex; flex-direction:column; gap:6px; }
.point-card .label { font-size:11px; color:#666666; }
.point-card .amount { font-size:30px; font-weight:700; color:#FF2233; letter-spacing:-0.5px; }
.point-card .sub { font-size:11px; color:#999999; }
.tabs { display:flex; gap:10px; margin-bottom:16px; }
.tab { font-size:13px; font-weight:400; padding:8px 16px; border-radius:100px; color:#191919; border:1px solid #d4d4d4; }
.tab.active { background:#565960; color:#ffffff; border-color:#565960; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.service { background:#ffffff; border:1px solid #ededed; border-radius:8px; padding:16px 10px; text-align:center; }
.service .icon { width:34px; height:34px; border-radius:9999px; background:#FF2233; margin:0 auto 8px; opacity:0.9; }
.service .name { font-size:12px; color:#2a303a; font-weight:400; }
.list-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #ededed; }
.list-row .name { font-size:12px; color:#2a303a; }
.list-row .amt { font-size:12px; color:#666666; }
</style></head>
<body>
<div class="sidebar-header">
<p class="brand">PAYCO</p>
<div class="navlinks"><span>Pay</span><span>Points</span><span>Finance</span><span>Documents</span></div>
</div>
<div class="wrap">
<div class="hero-row">
<div class="hero-copy">
<h1>Filling the gaps in everyday life</h1>
<p>Solid points, easy payments, and simple finance — all in one app. Go with PAYCO.</p>
<button class="btn-primary">Pay Now</button>
</div>
<div class="point-card">
<span class="label">Points Balance</span>
<span class="amount">12,480 P</span>
<span class="sub">Earned this month +1,220 P</span>
</div>
</div>
<div class="tabs">
<span class="tab active">All</span>
<span class="tab">Pay</span>
<span class="tab">Points</span>
<span class="tab">Finance</span>
</div>
<div class="grid">
<div class="service"><div class="icon"></div><div class="name">Easy Pay</div></div>
<div class="service"><div class="icon"></div><div class="name">Points Shop</div></div>
<div class="service"><div class="icon"></div><div class="name">Document Vault</div></div>
<div class="service"><div class="icon"></div><div class="name">Campus</div></div>
</div>
<div style="margin-top:16px;">
<div class="list-row"><span class="name">Transfer to Alex Kim</span><span class="amt">-$15.00</span></div>
<div class="list-row"><span class="name">Convenience store rewards</span><span class="amt">+120 P</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #a0a0a0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #334fb4; color: #ffffff;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #242833; color: #dedede;
border: 1px solid #334fb4; border-radius: 6px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #242833; color: #dedede;
border: 1px solid #121212; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a0a0a0; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #334fb4; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121212; color:#dedede; font-family:'Assistant',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#121212;border-bottom:1px solid #3a3a3a;}
.logo{font-family:Lato,Arial,sans-serif;font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#dedede;}
.navlinks{display:flex;gap:22px;font-family:Lato,Arial,sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#a0a0a0;}
.cart{width:34px;height:34px;border-radius:6px;border:1px solid #334fb4;display:flex;align-items:center;justify-content:center;color:#334fb4;font-size:14px;}
.hero{height:280px;position:relative;background:linear-gradient(180deg,#1a1a1a,#0a0a0a);display:flex;align-items:center;padding:0 44px;overflow:hidden;}
.projector{position:absolute;right:60px;top:40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,#334fb4 0%,transparent 70%);opacity:.5;}
.filmstrip{position:absolute;right:120px;top:60px;width:100px;height:160px;background:#242833;border-radius:4px;}
.herotext{z-index:2;width:420px;}
.hkicker{font-family:Lato;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:#334fb4;margin-bottom:12px;}
.herotext h1{font-family:Lato,Arial,sans-serif;font-size:32px;font-weight:700;color:#fff;margin:0 0 12px;line-height:1.2;}
.herotext p{font-size:14px;color:#a0a0a0;margin:0 0 20px;max-width:340px;}
.btn{display:inline-block;height:44px;line-height:44px;padding:0 26px;background:#334fb4;color:#fff;font-family:Lato;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;border-radius:6px;width:fit-content;}
.sec{padding:22px 44px 0;}
.sectitle{font-family:Lato;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;color:#a0a0a0;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#242833;border-radius:6px;padding:10px;}
.thumb{height:100px;border-radius:6px;background:#1a1a1a;}
.pname{font-size:13px;font-weight:600;color:#dedede;margin-top:8px;}
.pprice{font-size:13px;color:#334fb4;font-weight:700;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">LE Chat Qui Fume</div>
<div class="navlinks"><span>Posters</span><span>Vinyl</span><span>Apparel</span><span>Rare Finds</span></div>
<div class="cart">💼</div>
</div>
<div class="hero">
<div class="projector"></div>
<div class="filmstrip"></div>
<div class="herotext">
<div class="hkicker">Cult Cinema Serious</div>
<h1>Merch for the last screening of the night.</h1>
<p>Movie posters and collectibles for the truly obsessed.</p>
<div class="btn">Enter the Lobby</div>
</div>
</div>
<div class="sec">
<div class="sectitle">Rare Finds</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#242833,#334fb4)"></div><div class="pname">Vintage Noir Poster</div><div class="pprice">€65</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a1a1a,#334fb4)"></div><div class="pname">Original Soundtrack LP</div><div class="pprice">€38</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#334fb4,#1a1a1a)"></div><div class="pname">Cinema Bomber Jacket</div><div class="pprice">€120</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#242833,#121212)"></div><div class="pname">Numbered Lobby Card</div><div class="pprice">€48</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #8169ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #8169ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c1b6fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6d4ff0; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #8169ff; color: #000000;
border: 1px solid #6d4ff0; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #8169ff; color: #f5f5f5;
border: 1px solid #947ffd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c1b6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7e65fd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#181818; box-sizing:border-box; font-family:"Inter", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 4px 0 20px; }
.brand { font-weight:700; font-size:17px; }
.navlinks { display:flex; gap:2px; }
.navlinks span { font-size:12px; padding:4px 20px; }
.btn-violet { background:#8169ff; color:#fff; border:none; border-radius:4px; padding:14px 16px; font-size:12px; margin-right:20px; }
.hero { padding:36px 40px 22px; }
.hero h1 { font-family:'Gilroy', 'Helvetica Neue', sans-serif; font-size:44px; font-weight:700; line-height:1.25; margin:0 0 14px; max-width:640px; }
.hero h1 em { color:#6d4ff0; font-style:normal; }
.hero .cta { background:#8169ff; color:#fff; border:none; border-radius:4px; padding:14px 20px; font-size:12px; }
.dark { background:#1a1935; color:#fff; padding:26px 40px; display:flex; gap:20px; }
.card { flex:1; }
.card h3 { font-family:'Gilroy', sans-serif; font-size:22px; font-weight:700; margin:0 0 6px; }
.card p { font-size:12px; color:rgba(255,255,255,0.75); margin:0; }
.resources { display:flex; gap:14px; padding:20px 40px; }
.res { flex:1; background:#fff; border-radius:12px; box-shadow:rgba(0,0,0,0.08) 0px 3px 12px 0px; padding:16px; }
.res .tag { display:inline-block; background:#e3deff; color:#6d4ff0; border-radius:4px; font-size:11px; padding:3px 8px; margin-bottom:8px; }
.res h4 { font-size:15px; margin:0; }
</style></head>
<body>
<nav>
<div class="brand">ProtoPie</div>
<div class="navlinks"><span>Solutions</span><span>Resources</span><span>Features</span><span>Pricing</span></div>
<button class="btn-violet">Get started for free</button>
</nav>
<div class="hero">
<h1>#1 advanced prototyping tool for <em>dynamic</em> interactions</h1>
<button class="cta">Book a Demo</button>
</div>
<div class="dark">
<div class="card"><h3>Powerful features for highest fidelity</h3><p>Sensors, hardware, and conditional logic — prototypes that respond like the real product.</p></div>
<div class="card"><h3>Built for makers</h3><p>Automotive, aviation, finance, and consumer teams design real interaction, not slideshows.</p></div>
</div>
<div class="resources">
<div class="res"><span class="tag">Learn</span><h4>ProtoPie School</h4></div>
<div class="res"><span class="tag">Belong</span><h4>Community</h4></div>
<div class="res"><span class="tag">Read</span><h4>Blog</h4></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; letter-spacing: 0.3px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0.1px; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #009944; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #ffffff; color: #009944;
border: 1px solid #009944; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: 0.1px; background: #ffffff; color: #444444;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #e92121; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'Hiragino Kaku Gothic ProN','Meiryo',-apple-system,Arial,sans-serif; color:#222; }
*{box-sizing:border-box;}
.nav{height:60px;background:#009944;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-size:17px;font-weight:600;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#fff;}
.hero{padding:20px 32px 0;display:flex;justify-content:space-between;align-items:center;}
.hero h1{font-size:24px;font-weight:600;margin:0 0 8px;max-width:400px;}
.hero p{font-size:14px;color:#444;margin:0 0 14px;max-width:360px;}
.btn{display:inline-block;background:#009944;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;border-radius:8px;}
.taxonomy{display:flex;gap:8px;padding:14px 32px 0;}
.tag{border-radius:9999px;font-size:11px;font-weight:600;padding:4px 12px;color:#fff;}
.sec{padding:16px 32px 0;}
.sectitle{font-size:16px;font-weight:500;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:196px;background:#fff;border:1px solid #e6e6e6;border-radius:8px;overflow:hidden;}
.thumb{aspect-ratio:1/1;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;color:#fff;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.body{padding:10px 12px 12px;}
.ptitle{font-size:14px;font-weight:500;}
.pprice{font-size:16px;font-weight:600;margin-top:4px;color:#009944;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#222;color:#8d8d8d;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kotobukiya Collecti 2</div>
<div class="navlinks"><div>M.S.G</div><div>Frame Arms</div><div>Megami Device</div><div>Hexa Gear</div></div>
</div>
<div class="hero">
<div>
<h1>A color-coded catalog for collectors.</h1>
<p>Every product line has its own hue — so a vast catalog stays navigable at a glance.</p>
<div class="btn">Browse All Lines</div>
</div>
</div>
<div class="taxonomy">
<div class="tag" style="background:#f77a00">M.S.G</div>
<div class="tag" style="background:#0577c8">Frame Arms</div>
<div class="tag" style="background:#f26faa">Megami Device</div>
<div class="tag" style="background:#eac33d;color:#222">Hexa Gear</div>
</div>
<div class="sec">
<div class="sectitle">Featured Lines</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#f77a00,#222)"><div class="badge" style="background:#f77a00">M.S.G</div></div><div class="body"><div class="ptitle">Weapon Unit MW-01</div><div class="pprice">$18.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#0577c8,#222)"><div class="badge" style="background:#0577c8">Frame Arms</div></div><div class="body"><div class="ptitle">Frame Arms Zelfikar</div><div class="pprice">$42.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#f26faa,#222)"><div class="badge" style="background:#f26faa">Megami Device</div></div><div class="body"><div class="ptitle">Megami Device Asuka</div><div class="pprice">$64.00</div></div></div>
</div>
</div>
<div class="footer"><span>Series Guide · Pre-Orders</span><span>Company · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f6f2; color: #090a0f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f6f2; color: #090a0f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #090a0f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #4a5764; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #00a4e4; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f7f6f2; color: #090a0f;
border: 1px solid #00a4e4; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #231f20;
border: 1px solid #bcbbb9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4a5764; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #00b3ff; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f6f2; color:#231f20; font-family:'Inter',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e2ded4;}
.logo{font-family:'Founders Grotesk',Arial,sans-serif;font-size:20px;font-weight:700;color:#090a0f;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:400;text-transform:uppercase;letter-spacing:0.5px;color:#231f20;}
.hero{height:250px;display:flex;position:relative;overflow:hidden;}
.hbg{position:absolute;inset:0;background:linear-gradient(120deg,#090a0f 0%,#231f20 60%);}
.scrim{position:absolute;inset:0;background:rgba(9,10,15,0.35);}
.htext{position:relative;z-index:2;padding:0 40px;display:flex;flex-direction:column;justify-content:center;height:100%;width:460px;}
.htext h1{font-family:'Founders Grotesk',Arial,sans-serif;font-size:30px;font-weight:700;color:#fff;line-height:1.25;margin:0 0 14px;}
.htext p{font-size:14px;color:#dcdcdc;margin:0 0 20px;max-width:390px;}
.btn{display:inline-block;background:#00a4e4;color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:13px 28px;border-radius:8px;}
.knife{position:absolute;right:70px;top:60px;width:230px;height:36px;background:linear-gradient(90deg,#e8e8e8,#f7f6f2 65%);border-radius:0 4px 4px 0;z-index:1;}
.knife:before{content:'';position:absolute;left:-70px;top:6px;width:80px;height:24px;background:#5a4230;border-radius:6px 0 0 6px;}
.sec{padding:24px 40px 0;}
.sectitle{font-family:'Founders Grotesk',Arial,sans-serif;font-size:18px;font-weight:700;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:216px;background:#fff;border-radius:12px;padding:14px;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#00a4e4;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;padding:3px 9px;border-radius:8px;}
.thumb{width:100%;height:88px;border-radius:8px;margin:16px 0 10px;}
.cardtitle{font-size:14px;font-weight:600;}
.cardprice{font-size:13px;color:#338fb1;margin-top:4px;font-weight:600;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#090a0f;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#dcdcdc;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Messermeister</div>
<div class="navlinks"><span>Chef Knives</span><span>Steak Knives</span><span>Sharpening</span></div>
</div>
<div class="hero">
<div class="hbg"></div>
<div class="scrim"></div>
<div class="htext">
<h1>Built to last a lifetime, not a season.</h1>
<p>Forged steel and quiet authority for cooks who take the craft seriously.</p>
<div class="btn">Shop Chef Knives</div>
</div>
<div class="knife"></div>
</div>
<div class="sec">
<div class="sectitle">Forged Essentials</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#e8e8e8,#338fb1);"></div><div class="cardtitle">8" Chef's Knife, Forged</div><div class="cardprice">$149.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e8e8e8,#00b3ff);"></div><div class="cardtitle">Oliva Elite Paring Knife</div><div class="cardprice">$59.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e8e8e8,#00a4e4);"></div><div class="cardtitle">4-Piece Steak Knife Set</div><div class="cardprice">$179.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#231f20,#338fb1);"></div><div class="cardtitle">Ceramic Honing Rod</div><div class="cardprice">$39.00</div></div>
</div>
</div>
<div class="footer"><span>© Precision Forged Since 1981</span><span>Warranty · Care</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ecf0f3; color: #393d40;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ecf0f3; color: #393d40;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #393d40; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #183f86; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ecf0f3; color: #183f86;
border: 1px solid #183f86; border-radius: 8px;
padding: 14px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #393d40;
border: 1px solid #bfc3c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d4f0fc; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ecf0f3; font-family:-apple-system,'Helvetica Neue',Arial,sans-serif; color:#393d40; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#fff;border-bottom:1px solid #d1d5db;}
.logo{font-size:19px;font-weight:700;color:#183f86;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#393d40;}
.navcta{background:#183f86;color:#fff;font-size:12px;font-weight:700;padding:9px 18px;border-radius:8px;}
.hero{height:250px;display:flex;align-items:center;padding:0 36px;background:linear-gradient(120deg,#ecf0f3 45%,#d4f0fc 100%);}
.herotext{width:440px;}
.kicker{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#12abe3;margin-bottom:12px;}
.h1{font-size:30px;font-weight:700;line-height:1.2;color:#183f86;margin:0 0 12px;}
.sub{font-size:13px;color:#393d40;margin:0 0 18px;max-width:340px;}
.cta{display:inline-block;background:#183f86;color:#fff;font-size:13px;font-weight:700;padding:13px 28px;border-radius:8px;}
.jar{position:absolute;right:90px;top:56px;width:110px;height:150px;border-radius:14px;background:linear-gradient(160deg,#12abe3,#183f86 85%);}
.lid{position:absolute;right:100px;top:44px;width:90px;height:22px;border-radius:6px;background:#183f86;}
.jar2{position:absolute;right:210px;top:96px;width:80px;height:108px;border-radius:12px;background:linear-gradient(160deg,#d4f0fc,#12abe3 85%);}
.sec{padding:22px 36px 0;}
.secTitle{font-size:18px;font-weight:700;color:#183f86;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border-radius:12px;padding:12px;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#10b981;color:#fff;font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:3px 8px;border-radius:8px;z-index:2;}
.thumb{height:100px;border-radius:8px;margin-bottom:10px;}
.pname{font-size:14px;font-weight:700;color:#393d40;}
.pmeta{font-size:11px;color:#6b7280;margin-top:3px;}
.pprice{font-size:14px;font-weight:700;color:#183f86;margin-top:6px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Vital Proteins</div>
<div class="navlinks"><span>Collagen</span><span>Beauty</span><span>Wellness</span><span>Subscribe & Save</span></div>
<div class="navcta">Shop Now</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Clinically Studied Collagen</div>
<div class="h1">Glow from within.</div>
<div class="sub">Collagen peptides that support skin, joints, and everyday vitality.</div>
<div class="cta">Shop Collagen Peptides</div>
</div>
<div class="jar2"></div><div class="jar"></div><div class="lid"></div>
</div>
<div class="sec">
<div class="secTitle">Bestselling Collagen</div>
<div class="grid">
<div class="card"><span class="badge">Best Seller</span><div class="thumb" style="background:linear-gradient(135deg,#183f86,#12abe3)"></div><div class="pname">Original Collagen Peptides</div><div class="pmeta">20 oz canister</div><div class="pprice">$43.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#12abe3,#d4f0fc)"></div><div class="pname">Collagen Creamer</div><div class="pmeta">French Vanilla</div><div class="pprice">$34.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8ba3c9,#183f86)"></div><div class="pname">Beauty Collagen Gummies</div><div class="pmeta">Berry Lemonade</div><div class="pprice">$28.00</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf0e4; color: #050505;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf0e4; color: #050505;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #050505; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #798c5e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #008fa1; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #faf0e4; color: #050505;
border: 1px solid #008fa1; border-radius: 8px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #faf0e4; color: #050505;
border: 1px solid #bdb5ac; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #798c5e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #008fa1; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#faf0e4; color:#050505; box-sizing:border-box;
font-family:'Arimo',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-family:'Fraunces',Georgia,serif; font-size:20px; font-weight:600; color:#00343b; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#414141; }
.btn-primary { background:#008fa1; color:#fff; border:none; border-radius:6px; padding:11px 20px; font-size:13px; font-weight:600; }
main { display:flex; height:calc(640px - 66px - 44px); }
.gallery { width:390px; background:#fff; position:relative; display:flex; align-items:center; justify-content:center; border-top:1px solid #dedede; border-bottom:1px solid #dedede; }
.stove { width:110px; height:90px; border-radius:10px; background:linear-gradient(160deg,#008fa1,#00343b); position:relative; }
.stove::before { content:''; position:absolute; top:-14px; left:38px; width:34px; height:24px; border-radius:6px; background:#1c1c1c; }
.badge { position:absolute; top:20px; left:20px; background:#00343b; color:#fff; font-size:11px; font-weight:600; padding:4px 10px; border-radius:6px; }
.info { flex:1; padding:28px 32px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:12px; color:#798c5e; text-transform:uppercase; letter-spacing:0.4px; }
h1 { font-family:'Fraunces',Georgia,serif; font-size:24px; font-weight:600; margin:0; }
.price { font-size:20px; font-weight:600; }
.desc { font-size:13px; color:#414141; line-height:1.55; max-width:340px; }
.row { display:flex; gap:20px; font-size:12px; color:#414141; }
.row b { display:block; font-size:15px; color:#050505; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#008fa1; color:#fff; border:none; border-radius:6px; padding:14px; font-size:14px; font-weight:600; }
.btn-sec { background:#fff; color:#050505; border:1px solid #dedede; border-radius:6px; padding:14px 18px; font-size:13px; font-weight:600; }
footer { padding:12px 34px; font-size:11px; color:#414141; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Biolite</div>
<div class="navlinks"><span>Camp Stoves</span><span>Solar</span><span>Lights</span><span>Power</span></div>
<button class="btn-primary">Shop All Gear</button>
</nav>
<main>
<div class="gallery"><span class="badge">Best Seller</span><div class="stove"></div></div>
<div class="info">
<span class="cat">Wood-Burning Camp Stove</span>
<h1>CampStove 2+ with USB Charging</h1>
<div class="price">$149.95</div>
<p class="desc">Turns twigs into a rolling boil and charges your phone at the same time — no fuel canisters, no batteries.</p>
<div class="row">
<div><b>3 min</b>Boil time</div>
<div><b>3W</b>USB output</div>
<div><b>934g</b>Weight</div>
</div>
<div class="btn-row">
<button class="btn-add">Add to Cart</button>
<button class="btn-sec">Compare Stoves</button>
</div>
</div>
</main>
<footer><span>© Biolite</span><span>Off-grid power for basecamp and beyond</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #28ab6c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #28ab6c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #002926; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #28ab6c; color: #002926;
border: 1px solid #002926; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #28ab6c; color: #f5f5f5;
border: 1px solid #49b782; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #229661; color: #002926;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Google Sans","Pretendard","Apple SD Gothic Neo",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; background:#ffffff; }
.brand { font-size:17px; font-weight:700; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#000000; }
.navlinks .on { color:#28ab6c; }
.hero { background:#002926; padding:28px 32px 26px; color:#ffffff; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(40,171,108,0.35), transparent 70%); }
.hero h1 { position:relative; font-size:38px; font-weight:700; line-height:1.12; margin:0 0 10px; max-width:560px; }
.hero p { position:relative; font-size:14px; color:#badba3; max-width:480px; margin:0 0 18px; line-height:1.5; }
.hero .row { position:relative; display:flex; gap:12px; }
.pill-white { background:#ffffff; color:#002926; border-radius:999px; padding:11px 26px; font-size:14px; font-weight:700; }
.pill-ghost { background:transparent; color:#ffffff; border:1px solid rgba(255,255,255,0.3); border-radius:999px; padding:11px 24px; font-size:14px; font-weight:600; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:22px 32px; }
.card { border-radius:24px; padding:20px; }
.card .tag { font-size:11px; text-transform:uppercase; letter-spacing:0.06em; opacity:0.65; margin-bottom:8px; }
.card h3 { font-size:18px; font-weight:700; margin:0 0 6px; }
.card p { font-size:12.5px; line-height:1.5; margin:0; }
.card.light { background:#f3f3f3; color:#000000; }
.card.dark { background:#1a1a1a; color:#ffffff; }
.card.teal { background:#002926; color:#ffffff; }
.card.teal .tag { color:#28ab6c; opacity:1; }
.blog { margin:0 32px; background:#f3f3f3; border:1px solid #e5e5e5; border-radius:18px;
padding:16px 20px; display:flex; align-items:center; justify-content:space-between; }
.blog .left b { font-size:14px; }
.blog .left div.sub { font-size:12px; color:#606060; margin-top:3px; }
.doclink { color:#03b5e5; font-size:13px; font-weight:500; }
</style></head>
<body>
<nav>
<div class="brand">Lablup</div>
<div class="navlinks"><span class="on">Backend.AI</span><span>About us</span><span>Media center</span><span>Stories</span><span>Careers</span></div>
<div style="width:80px"></div>
</nav>
<section class="hero">
<h1>Making AI possible<br>where it wasn't.</h1>
<p>Lablup untangles complex AI infrastructure with software, for a tomorrow where AI reaches everyone.</p>
<div class="row"><span class="pill-white">Contact Us</span><span class="pill-ghost">View All</span></div>
</section>
<div class="grid3">
<div class="card light"><div class="tag">Product</div><h3>Backend.AI</h3><p>The operating system for AI infrastructure — from a laptop workload to frontier-model training.</p></div>
<div class="card dark"><div class="tag">News</div><h3>Latest from Lablup</h3><p>Marking ten years of untangling GPU and accelerator complexity for research teams.</p></div>
<div class="card teal"><div class="tag">Careers</div><h3>Join our team</h3><p>Build alongside hardware, storage, cloud, and service partners across Seoul and San Jose.</p></div>
</div>
<div class="blog">
<div class="left"><b>docs.backend.ai</b><div class="sub">Configuration guides, GPU scheduling, and API reference</div></div>
<span class="doclink">Read the docs →</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0082ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0082ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007bff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0082ff; color: #000000;
border: 1px solid #007bff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0082ff; color: #f5f5f5;
border: 1px solid #2794fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0081ff; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Spoqa Han Sans", "Spoqa Han Sans JP", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { height:60px; flex:0 0 60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#ffffff; }
.brand { font-size:18px; font-weight:700; color:#1a1b22; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; color:#333333; }
.navcta { background:#007bff; color:#ffffff; border:1px solid #007bff; border-radius:6px;
height:38px; padding:0 16px; font-size:14px; font-weight:700; display:flex; align-items:center; }
.hero { flex:0 0 auto; padding:14px 40px 8px; text-align:center; }
.hero h1 { font-size:26px; font-weight:700; color:#1a1b22; line-height:1.25; margin:0 0 4px; }
.hero p { font-size:13px; color:#6b6c74; margin:0; }
.widget { flex:0 0 auto; margin:14px auto 0; width:640px; background:#f7f7f8; border-radius:16px;
box-shadow:rgba(0,0,0,0.05) 0px 4px 15px 0px; padding:20px 28px; display:flex; align-items:center; gap:18px; }
.amtcol { flex:1; }
.amtcol label { font-size:11.5px; color:#818daa; font-weight:700; letter-spacing:0.02em; }
.amtrow { display:flex; align-items:baseline; gap:6px; }
.amt { font-size:32px; font-weight:700; color:#242424; }
.amt.active { color:#0082ff; }
.cur { font-size:14px; color:#6b6c74; font-weight:700; }
.arrow { width:34px; height:34px; border-radius:50%; background:#ffffff; border:1px solid #e0e0e0;
display:flex; align-items:center; justify-content:center; color:#555555; font-size:14px; flex:0 0 34px; }
.sendbtn { flex:0 0 auto; background:#0082ff; color:#ffffff; border:1px solid rgba(0,50,100,0.1);
border-radius:6px; height:50px; padding:0 26px; font-size:16px; font-weight:700; }
.features { flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:22px 40px; align-content:center; }
.feat { background:#f3f5f8; border:1px solid #efefef; border-radius:16px; padding:18px 18px; }
.eyebrow { color:#0082ff; font-weight:700; font-size:13px; margin-bottom:6px; display:block; }
.feat h3 { font-size:17px; font-weight:700; color:#1a1b22; margin:0 0 6px; }
.feat p { font-size:12.5px; color:#6b6c74; margin:0; line-height:1.45; }
.reviews { flex:0 0 118px; background:#ffffff; border-top:1px solid #efefef; padding:14px 40px; display:flex; align-items:center; gap:14px; }
.revcard { flex:1; background:#f7f7f8; border-radius:16px; box-shadow:rgba(0,0,0,0.05) 0px 4px 15px 0px;
padding:14px 18px; font-size:12.5px; color:#1a1b22; }
.revcard b { display:block; font-size:13px; margin-bottom:3px; color:#1a1b22; }
.navarrow { width:34px; height:34px; border-radius:8px; background:#ffffff; border:1px solid #e0e0e0;
display:flex; align-items:center; justify-content:center; color:#555555; flex:0 0 34px; }
</style></head>
<body>
<nav>
<p class="brand">Moin</p>
<div class="navlinks"><span>Remittance</span><span>Rate calculator</span><span>Reviews</span><span>Support</span></div>
<div class="navcta">Send money</div>
</nav>
<section class="hero">
<h1>Complex international remittances,<br>now made simple with Moin</h1>
<p>Done in five minutes, right in the app — see the rate and fee before you commit.</p>
</section>
<div class="widget">
<div class="amtcol">
<label>YOU SEND</label>
<div class="amtrow"><span class="amt">1,000,000</span><span class="cur">KRW</span></div>
</div>
<div class="arrow">→</div>
<div class="amtcol">
<label>THEY RECEIVE</label>
<div class="amtrow"><span class="amt active">742.15</span><span class="cur">USD</span></div>
</div>
<button class="sendbtn">Send money</button>
</div>
<section class="features">
<div class="feat"><span class="eyebrow">Speed</span><h3>Fast, direct remittances you can trust</h3><p>Money moves on a direct rail, not a chain of correspondent banks.</p></div>
<div class="feat"><span class="eyebrow">Easy to start</span><h3>Done in five minutes, right in the app</h3><p>Verify once, then send again in a couple of taps.</p></div>
<div class="feat"><span class="eyebrow">Lower fees</span><h3>See the real rate before you send</h3><p>The fee and exchange rate are shown up front, never after you commit.</p></div>
</section>
<div class="reviews">
<div class="navarrow">←</div>
<div class="revcard"><b>Alex Kim</b>Sent money home in minutes — the rate was exactly what the app showed.</div>
<div class="revcard"><b>Jane Doe</b>Switched from my bank and started saving on every transfer since.</div>
<div class="navarrow">→</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-size: 20px; font-weight:700; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-size: 12px; font-weight:400; line-height:1.4; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #0055FF; color: #ffffff;
border: none; border-radius: 999; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #FFFFFF; color: #0055FF;
border: 1px solid #0055FF; border-radius: 999;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #FFFFFF; color: #111111;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dbe7ff; color: #0055FF;
border-radius: 999; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif; background: #FFFFFF; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
header { height: 68px; background: linear-gradient(91.41deg, #00BAFF 4.07%, #006AFF 36.38%); display: flex; align-items: center; justify-content: space-between; padding: 0 36px; }
.brand { color: #fff; font-size: 20px; font-weight: 800; margin: 0; letter-spacing: -0.3px; }
.navlinks { display: flex; gap: 24px; }
.navlinks span { color: rgba(255,255,255,0.9); font-size: 13px; font-weight: 500; }
.cta { background: #fff; color: #0055FF; border: none; border-radius: 8px; padding: 9px 18px; font-weight: 700; font-size: 13px; }
.hero { padding: 34px 36px 0; display: flex; gap: 30px; }
.hero-copy { width: 380px; }
.hero-copy h1 { font-size: 32px; font-weight: 800; color: #1A1A1A; margin: 0 0 10px; line-height: 1.2; }
.hero-copy p { font-size: 14px; color: #666666; line-height: 1.5; margin: 0 0 18px; }
.trackbox { background: #F2F2F2; border-radius: 8px; padding: 4px; display: flex; gap: 6px; }
.trackbox .in { flex: 1; height: 40px; background: #fff; border-radius: 6px; display: flex; align-items: center; padding: 0 12px; font-size: 12px; color: #6E6E6E; }
.trackbox button { background: #0055FF; color: #fff; border: none; border-radius: 6px; padding: 0 18px; font-weight: 700; font-size: 12px; }
.trackcard { flex: 1; background: #06142C; border-radius: 12px; padding: 22px; color: #fff; }
.trackcard .head { display: flex; justify-content: space-between; margin-bottom: 14px; }
.trackcard .head b { font-size: 13px; }
.trackcard .head span { font-size: 11px; color: #DADADA; }
.timeline { position: relative; padding-left: 18px; }
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ''; position: absolute; left: -18px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #00BAFF; }
.tl-item::after { content: ''; position: absolute; left: -14px; top: 12px; width: 1px; height: calc(100% - 4px); background: rgba(255,255,255,0.15); }
.tl-item:last-child::after { display: none; }
.tl-item b { font-size: 12px; display: block; }
.tl-item span { font-size: 10px; color: #DADADA; }
.metrics { display: flex; gap: 0; margin: 24px 36px 0; border-radius: 12px; overflow: hidden; border: 1px solid #E6E6E6; }
.metrics .m { flex: 1; text-align: center; padding: 18px; border-right: 1px solid #E6E6E6; }
.metrics .m:last-child { border-right: none; }
.metrics .m b { display: block; font-size: 22px; font-weight: 800; color: #0055FF; }
.metrics .m span { font-size: 11px; color: #666666; }
.logos { display: flex; gap: 20px; padding: 20px 36px 0; align-items: center; }
.logos span { font-size: 11px; color: #A3A3A3; font-weight: 700; letter-spacing: 0.03em; }
.logos .pill { background: #F2F2F2; color: #333333; font-size: 11px; font-weight: 700; padding: 6px 14px; border-radius: 6px; }
</style>
<header>
<p class="brand">Loggi</p>
<div class="navlinks"><span>Ship</span><span>Track</span><span>Business</span><span>Delivery partners</span></div>
<button class="cta">Get started</button>
</header>
<div class="hero">
<div class="hero-copy">
<h1>Every package, everywhere in Brazil.</h1>
<p>Real-time tracking, 1M+ packages a day, powered by the largest sorter in South America.</p>
<div class="trackbox">
<div class="in">Enter tracking code</div>
<button>Track</button>
</div>
</div>
<div class="trackcard">
<div class="head"><b>Package #BR992104</b><span>ETA today, 18:40</span></div>
<div class="timeline">
<div class="tl-item"><b>Order picked up</b><span>Distribution center — 08:12</span></div>
<div class="tl-item"><b>In transit</b><span>Sorted at hub — 11:45</span></div>
<div class="tl-item"><b>Out for delivery</b><span>With courier — 15:20</span></div>
</div>
</div>
</div>
<div class="metrics">
<div class="m"><b>100%</b><span>Coverage of Brazil</span></div>
<div class="m"><b>1M+</b><span>Packages per day</span></div>
<div class="m"><b>200K+</b><span>Delivery partners</span></div>
<div class="m"><b>1,700+</b><span>Pickup points</span></div>
</div>
<div class="logos">
<span>TRUSTED BY</span>
<span class="pill">Retail Co.</span>
<span class="pill">Jewelry Group</span>
<span class="pill">Beauty Market</span>
<span class="pill">Sports Track</span>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3a3a3a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #3a3a3a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #090909; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; }
.close { font-size:22px; font-weight:300; color:#FFFFFF; }
.toptitle { font-size:13px; font-weight:500; letter-spacing:1.4px; text-transform:uppercase; color:#B3B3B3; }
.next { font-size:13px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:#FFFFFF; }
.stage { height:364px; display:flex; align-items:center; justify-content:center; }
.photo { width:280px; height:364px; border-radius:2px;
background:linear-gradient(165deg,#3a3f2e 0%,#c8a86b 40%,#2c3542 78%,#0e0e0e 100%); }
.origtag { position:relative; }
.sliderwrap { padding:0 22px; margin-top:2px; }
.sliderlabelrow { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; }
.toolname { font-size:12px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; color:#B3B3B3; }
.liveval { font-size:14px; font-weight:600; color:#FFFFFF; }
.track { position:relative; height:1px; background:#3A3A3A; margin:0 9px; }
.fill { position:absolute; left:50%; top:0; height:1px; width:22%; background:#FFFFFF; }
.knob { position:absolute; left:72%; top:50%; transform:translate(-50%,-50%); width:18px; height:18px;
border-radius:50%; background:#FFFFFF; box-shadow:0 1px 4px rgba(0,0,0,0.6); }
.carouselwrap { margin-top:22px; padding:0 22px; overflow:hidden; }
.carousel { display:flex; gap:14px; }
.tile { flex-shrink:0; width:56px; text-align:center; }
.swatch { width:56px; height:56px; border-radius:2px; }
.tile.active .swatch { box-shadow:0 0 0 2px #FFFFFF; }
.code { display:block; margin-top:6px; font-size:11px; font-weight:600; letter-spacing:1px;
text-transform:uppercase; color:#B3B3B3; }
.tile.active .code { color:#FFFFFF; }
.tray { position:absolute; bottom:0; left:0; right:0; height:84px; border-top:0.5px solid #2A2A2A;
display:flex; align-items:center; justify-content:center; gap:30px; }
.tool { display:flex; flex-direction:column; align-items:center; gap:8px; }
.toolic { font-size:20px; color:#B3B3B3; }
.toollb { font-size:12px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; color:#B3B3B3; }
.tool.on .toolic, .tool.on .toollb { color:#FFFFFF; }
</style></head>
<body>
<div class="topbar">
<span class="close">✕</span>
<span class="toptitle">Edit</span>
<span class="next">Next</span>
</div>
<div class="stage"><div class="photo"></div></div>
<div class="sliderwrap">
<div class="sliderlabelrow"><span class="toolname">Contrast</span><span class="liveval">+2.4</span></div>
<div class="track"><div class="fill"></div><div class="knob"></div></div>
</div>
<div class="toolname" style="padding:0 22px;">VSCO (iOS)</div>
<div class="carouselwrap">
<div class="carousel">
<div class="tile"><div class="swatch" style="background:linear-gradient(160deg,#e8d9b5,#C8A86B);"></div><span class="code">A6</span></div>
<div class="tile active"><div class="swatch" style="background:linear-gradient(160deg,#efe1c2,#C8A86B 60%,#3F382C);"></div><span class="code">C1</span></div>
<div class="tile"><div class="swatch" style="background:linear-gradient(160deg,#c7d3dd,#7E8FA1);"></div><span class="code">M5</span></div>
<div class="tile"><div class="swatch" style="background:linear-gradient(160deg,#aebac4,#7E8FA1 70%,#242424);"></div><span class="code">AV4</span></div>
<div class="tile"><div class="swatch" style="background:linear-gradient(160deg,#dcc9a0,#C8A86B 55%,#3F382C);"></div><span class="code">KP9</span></div>
<div class="tile"><div class="swatch" style="background:linear-gradient(160deg,#bdb8ae,#9A9388);"></div><span class="code">HB2</span></div>
</div>
</div>
<div class="tray">
<div class="tool"><span class="toolic">☀</span><span class="toollb">Exposure</span></div>
<div class="tool on"><span class="toolic">◑</span><span class="toollb">Contrast</span></div>
<div class="tool"><span class="toolic">💧</span><span class="toollb">Saturation</span></div>
<div class="tool"><span class="toolic">▦</span><span class="toollb">Grain</span></div>
<div class="tool"><span class="toolic">▲</span><span class="toollb">Sharpen</span></div>
<div class="tool"><span class="toolic">⬟</span><span class="toollb">HSL</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fee500; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fee500; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7009; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2d900; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fee500; color: #000000;
border: 1px solid #f2d900; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fee500; color: #111111;
border: 1px solid #d8c303; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7009; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fce300; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Kakao T detail mock</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#191919; box-sizing:border-box;
font-family:'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', -apple-system, BlinkMacSystemFont, 'Noto Sans KR', sans-serif; }
* { box-sizing:border-box; }
.wrap { width:960px; height:640px; position:relative; }
.map { position:absolute; top:0; left:0; right:0; height:210px; overflow:hidden;
background:linear-gradient(160deg, #eef1f3, #dfe3e6); }
.map .roadv { position:absolute; top:0; bottom:0; width:14px; background:#ffffff; }
.map .roadh { position:absolute; left:0; right:0; height:14px; background:#ffffff; }
.map .block { position:absolute; background:#e4e7ea; border-radius:4px; }
.map .pin { position:absolute; width:20px; height:20px; border-radius:50%; background:#191919;
box-shadow:0 0 0 6px rgba(254,229,0,0.45), 0 0 0 12px rgba(254,229,0,0.2); }
.map .topbar { position:absolute; top:14px; left:20px; background:#ffffff; border-radius:999px; padding:8px 16px;
font-size:14px; font-weight:700; color:#191919; box-shadow:0px 2px 12px rgba(0,0,0,0.08); }
.sheet { position:absolute; left:0; right:0; bottom:0; height:430px; background:#ffffff;
border-radius:20px 20px 0 0; box-shadow:0px -4px 16px rgba(0,0,0,0.10); padding:14px 24px 24px 24px;
display:flex; flex-direction:column; gap:14px; }
.handle { width:36px; height:4px; border-radius:999px; background:#e5e6e8; align-self:center; }
.sheet h1 { margin:0; font-size:22px; font-weight:700; line-height:1.35; color:#191919; }
.classes { display:flex; gap:12px; }
.vcard { flex:1; border:1px solid #e5e6e8; border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.vcard.sel { border:2px solid #191919; }
.vicon { width:34px; height:34px; border-radius:10px; background:#f5f6f7; }
.vcard.sel .vicon { background:#fee500; }
.vcard .vname { font-size:16px; font-weight:600; color:#26282b; }
.vcard .veta { font-size:12px; font-weight:400; color:#76787a; }
.vcard .vfare { font-size:14px; font-weight:700; color:#191919; }
.farerow { display:flex; align-items:center; justify-content:space-between; }
.farerow .fareblock .flabel { font-size:12px; font-weight:400; color:#76787a; }
.farerow .fareblock .fval { font-size:24px; font-weight:700; letter-spacing:-0.4px; color:#191919; }
.pill-live { background:rgba(15,184,130,0.12); color:#0fb882; border-radius:999px; padding:4px 12px; font-size:12px; font-weight:700; }
.cta { width:100%; height:52px; border-radius:12px; background:#fee500; color:#191919; font-size:16px; font-weight:600;
display:flex; align-items:center; justify-content:center; }
</style></head>
<body>
<div class="wrap">
<div class="map">
<div class="block" style="left:0; top:0; width:220px; height:80px;"></div>
<div class="block" style="right:0; top:100px; width:260px; height:90px;"></div>
<div class="block" style="left:260px; top:0; width:180px; height:60px;"></div>
<div class="roadv" style="left:240px;"></div>
<div class="roadv" style="left:560px;"></div>
<div class="roadh" style="top:96px;"></div>
<div class="pin" style="left:420px; top:70px;"></div>
<div class="topbar">Kakao T</div>
</div>
<div class="sheet">
<div class="handle"></div>
<h1>Choose a ride</h1>
<div class="classes">
<div class="vcard sel"><div class="vicon"></div><div class="vname">Standard</div><div class="veta">3 min away</div><div class="vfare">$18.40</div></div>
<div class="vcard"><div class="vicon"></div><div class="vname">Blue</div><div class="veta">5 min away</div><div class="vfare">$21.90</div></div>
<div class="vcard"><div class="vicon"></div><div class="vname">Black</div><div class="veta">8 min away</div><div class="vfare">$34.00</div></div>
</div>
<div class="farerow">
<div class="fareblock"><div class="flabel">Estimated fare</div><div class="fval">$18.40</div></div>
<div class="pill-live">Driver nearby</div>
</div>
<div class="cta">Call a ride</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.23; letter-spacing: 0.3px; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #141414; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #141414;
border: 1px solid #141414; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #141414; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'Inter',sans-serif; color:#121212; }
*{box-sizing:border-box;}
.announce{height:34px;background:#141414;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;letter-spacing:0.3px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e2e2e2;}
.logo{font-size:19px;font-weight:700;letter-spacing:-0.5px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.hero{background:#faf9f7;height:230px;display:flex;align-items:center;justify-content:space-between;padding:0 44px;}
.herotext h1{font-size:34px;font-weight:700;letter-spacing:-0.5px;margin:0 0 12px;max-width:400px;line-height:1.15;}
.herotext p{font-size:14px;color:#545454;margin:0 0 16px;max-width:340px;}
.btn{display:inline-block;background:#141414;color:#fff;font-size:16px;font-weight:600;padding:14px 30px;border-radius:8px;}
.herovis{width:190px;height:180px;background:linear-gradient(160deg,#e2e2e2,#a0a0a0);border-radius:12px;}
.trustbar{display:flex;justify-content:space-around;background:#f6f6f6;padding:16px 40px;font-size:12px;color:#545454;}
.trustbar div{display:flex;align-items:center;gap:8px;}
.dot{width:8px;height:8px;border-radius:50%;background:#141414;}
.sec{padding:18px 40px 0;}
.sectitle{font-size:18px;font-weight:600;margin-bottom:12px;}
.grid{display:flex;gap:16px;}
.card{width:196px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#141414;color:#fff;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:4px 8px;border-radius:4px;}
.thumb{aspect-ratio:3/4;}
.body{padding:10px 12px 14px;}
.ptitle{font-size:15px;font-weight:600;}
.pprice{font-size:15px;font-weight:600;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:34px;background:#f6f6f6;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;color:#545454;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">Find Your Fit — free returns, always.</div>
<div class="nav">
<div class="logo">Knix</div>
<div class="navlinks"><div>Bras</div><div>Leakproof</div><div>Loungewear</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Wear what moves you.</h1>
<p>Designed for every body, unretouched and unbothered.</p>
<div class="btn">Find Your Fit</div>
</div>
<div class="herovis"></div>
</div>
<div class="trustbar">
<div><span class="dot"></span>Leak-proof</div>
<div><span class="dot"></span>Wire-free</div>
<div><span class="dot"></span>60-Day Trial</div>
</div>
<div class="sec">
<div class="sectitle">Bestsellers</div>
<div class="grid">
<div class="card"><div class="badge">Bestseller</div><div class="thumb" style="background:linear-gradient(160deg,#dedede,#999999)"></div><div class="body"><div class="ptitle">Wonder Wireless Bra</div><div class="pprice">$54</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e2e2e2,#757575)"></div><div class="body"><div class="ptitle">Leakproof Boyshort</div><div class="pprice">$28</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#f6f6f6,#a0a0a0)"></div><div class="body"><div class="ptitle">Catalyst High-Rise</div><div class="pprice">$42</div></div></div>
</div>
</div>
<div class="footer"><span>Find Your Fit Quiz</span><span>Reviews · Press</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212226;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212226;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #212226; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #092c74; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #092c74;
border: 1px solid #092c74; border-radius: 0px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #212226;
border: 1px solid #c8c8c9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f05a4f; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;color:#393a37;font-family:'effra',Arial,Helvetica,sans-serif;}
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#092c74;}
.logo{font-weight:700;font-size:22px;color:#fff;letter-spacing:.5px;}
.navlinks{display:flex;gap:20px;font-size:11px;font-weight:700;text-transform:uppercase;color:#dbe6f4;letter-spacing:.3px;}
.hero{background:#092c74;padding:0 28px 20px;display:flex;align-items:center;gap:26px;}
.hero-txt{width:360px;}
.hero-txt h1{font-size:30px;font-weight:700;color:#fff;margin:0 0 10px;line-height:1.2;}
.hero-txt p{font-size:12px;color:#c6d5ea;margin:0 0 14px;}
.cta{background:#fff;color:#092c74;padding:11px 24px;font-weight:700;font-size:12px;display:inline-block;text-transform:uppercase;}
.fridge{flex:1;height:180px;background:#f4f3ef;position:relative;}
.fridge .body-box{position:absolute;top:14px;left:60px;width:110px;height:150px;background:#1a63a2;}
.fridge .body-box::after{content:'';position:absolute;top:50px;left:0;right:0;height:2px;background:#092c74;}
.fridge .body-box::before{content:'';position:absolute;top:20px;right:8px;width:6px;height:24px;background:#f4f3ef;}
.badge-coral{position:absolute;top:20px;right:24px;background:#f05a4f;color:#fff;font-size:9px;font-weight:800;padding:5px 10px;text-transform:uppercase;}
.catrow{display:flex;background:#f4f3ef;}
.catrow div{flex:1;text-align:center;padding:12px 4px;font-size:10px;font-weight:700;color:#212226;border-right:1px solid #e5e5e5;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0 28px;}
.card{padding:14px 10px;border-right:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;}
.box{height:86px;margin-bottom:8px;}
.b1{background:linear-gradient(160deg,#1a63a2,#092c74);}
.b2{background:linear-gradient(160deg,#acc37e,#8bab5c);}
.b3{background:linear-gradient(160deg,#212226,#454545);}
.b4{background:linear-gradient(160deg,#a11f7f,#db3eb1);}
.name{font-size:12px;font-weight:700;color:#212226;margin:0 0 3px;}
.spec{font-size:10px;color:#757575;margin:0 0 5px;}
.price{font-size:13px;font-weight:700;color:#092c74;}
.star{color:#ffbc00;font-size:9px;}
</style>
<div class="nav">
<div class="logo">GE</div>
<div class="navlinks"><span>Refrigerators</span><span>Ranges</span><span>Dishwashers</span><span>Laundry</span><span>Support</span></div>
</div>
<div class="hero">
<div class="hero-txt">
<h1>American-made appliances, built to last decades</h1>
<p>Energy Star certified. Nationwide service. The reliability the GE marque has carried since 1892.</p>
<a class="cta">Shop Refrigerators</a>
</div>
<div class="fridge"><div class="badge-coral">Flash Sale</div><div class="body-box"></div></div>
</div>
<div class="catrow"><div>Refrigerators</div><div>Ranges</div><div>Dishwashers</div><div>Washers</div><div>Dryers</div><div>Microwaves</div></div>
<div class="grid">
<div class="card"><div class="box b1"></div><div class="name">27 cu ft French-Door Refrigerator</div><div class="spec">Energy Star · Ice & Water</div><div class="star">★★★★★</div><div class="price">$2,199.00</div></div>
<div class="card"><div class="box b2"></div><div class="name">Front-Load Washer</div><div class="spec">Energy Star · 4.8 cu ft</div><div class="star">★★★★☆</div><div class="price">$949.00</div></div>
<div class="card"><div class="box b3"></div><div class="name">Slide-In Gas Range</div><div class="spec">Convection · 5 Burners</div><div class="star">★★★★★</div><div class="price">$1,599.00</div></div>
<div class="card"><div class="box b4"></div><div class="name">Rebate Event: Dishwashers</div><div class="spec">Save up to $200 · Ends Soon</div><div class="price">Shop Rebate</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #414141;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #414141;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #414141; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #003399; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #fefefe; color: #414141;
border: 1px solid #003399; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.53; background: #fefefe; color: #414141;
border: 1px solid #cacaca; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; background: #ffff00; color: #414141;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f7; color:#414141; box-sizing:border-box;
font-family:'Open Sans', 'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:56px; background:#ffffff; border-bottom:1px solid #e5e5e5; display:flex; align-items:center;
justify-content:space-between; padding:0 34px; }
.brand { font-size:18px; font-weight:600; color:#003399; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; color:#777777; }
.navlinks span:first-child { color:#414141; border-bottom:2px solid #003399; padding-bottom:6px; }
.layout { display:flex; height:calc(640px - 56px); }
.media { width:340px; flex-shrink:0; background:#fefefe; position:relative; display:flex; align-items:center; justify-content:center;
border-right:1px solid #e5e5e5; }
.figure { width:150px; height:220px; background:linear-gradient(160deg, #003399, #54afe9); border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.1); }
.badge-limited { position:absolute; top:18px; left:18px; background:#ffff00; color:#414141; font-size:11px; font-weight:700; padding:2px 6px; }
.badge-stock { position:absolute; top:18px; right:18px; background:#116600; color:#ffffff; font-size:11px; font-weight:700; padding:2px 6px; }
.detail { flex:1; padding:24px 34px; display:flex; flex-direction:column; gap:12px; }
.breadcrumb { font-size:12px; color:#777777; }
.breadcrumb span:last-child { color:#414141; font-weight:600; }
h1 { font-size:20px; font-weight:600; margin:0; color:#414141; }
.price { font-size:16px; font-weight:700; }
.filter-chips { display:flex; gap:8px; }
.chip { background:#f0f0f0; color:#414141; font-size:12px; font-weight:600; border-radius:999px; padding:6px 16px; }
.chip.active { background:#003399; color:#ffffff; }
.card { background:#fefefe; border:1px solid #e5e5e5; border-radius:4px; padding:12px 14px; font-size:13px; color:#474747; }
.actions { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#003399; color:#ffffff; border:none; border-radius:4px; height:40px; font-size:14px; font-weight:600; }
.btn-secondary { background:#fefefe; color:#414141; border:1px solid #e5e5e5; border-radius:4px; height:40px; padding:0 20px; font-size:14px; font-weight:600; }
</style></head>
<body>
<div class="topbar">
<div class="brand">Collectors Anime</div>
<div class="navlinks"><span>Figures</span><span>Manga</span><span>Apparel</span><span>Pre-orders</span></div>
</div>
<div class="layout">
<div class="media">
<div class="badge-limited">Limited</div>
<div class="badge-stock">In Stock</div>
<div class="figure"></div>
</div>
<div class="detail">
<div class="breadcrumb">Figures / Scale / <span>1/7 Scale</span></div>
<h1>Starlight Ronin — 1/7 Scale Figure</h1>
<div class="price">$189.99</div>
<div class="filter-chips"><span class="chip active">1/7 Scale</span><span class="chip">Painted</span></div>
<div class="card">Ships in collector-grade box with acrylic display base. Limited run of 800 units worldwide.</div>
<div class="actions">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">View Details</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 300; line-height: 1.2; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.0; letter-spacing: 0.08em; background: #222222; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.0; letter-spacing: 0.08em; background: transparent; color: #222222;
border: 1px solid #a5d3ef; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.02em; background: transparent; color: #666666;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#222222; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 44px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:18px;font-weight:300;letter-spacing:1px;text-transform:uppercase;color:#222222;}
.navlinks{display:flex;gap:28px;font-size:12px;font-weight:400;letter-spacing:.5px;text-transform:uppercase;color:#333333;}
.navlinks .active{color:#2d89ef;}
.hero{padding:56px 44px 30px;}
.kicker{font-size:11px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;color:#666666;margin-bottom:16px;}
.h1{font-size:32px;font-weight:300;font-style:italic;line-height:1.3;color:#222222;margin:0 0 10px;max-width:600px;}
.sub{font-size:13px;font-weight:400;color:#666666;max-width:480px;}
.grid{display:flex;gap:2px;padding:24px 44px 0;}
.art{width:222px;height:270px;position:relative;}
.artlabel{margin-top:12px;}
.aname{font-size:13px;font-style:italic;color:#222222;line-height:1.35;}
.ayear{font-size:11px;color:#666666;margin-top:2px;}
.hoverdot{position:absolute;top:14px;right:14px;width:8px;height:8px;border-radius:50%;background:#a5d3ef;}
.footer{position:absolute;bottom:0;left:0;right:0;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 44px;font-size:11px;color:#666666;border-top:1px solid #e0e0e0;letter-spacing:.3px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Victoria Miro</div>
<div class="navlinks"><span class="active">Exhibitions</span><span>Artists</span><span>Fairs</span><span>Publications</span></div>
</div>
<div class="hero">
<div class="kicker">Current Exhibition</div>
<div class="h1">Works on paper, glass, and canvas.</div>
<div class="sub">A survey exhibition spanning three decades of gallery representation.</div>
</div>
<div class="grid">
<div class="art"><div style="width:100%;height:100%;background:linear-gradient(160deg,#a5d3ef,#f8f8f8 75%);"></div><div class="hoverdot"></div><div class="artlabel"><div class="aname">Untitled (Reclining Figure)</div><div class="ayear">2019</div></div></div>
<div class="art"><div style="width:100%;height:100%;background:linear-gradient(160deg,#d6eaf7,#f8f8f8 75%);"></div><div class="artlabel"><div class="aname">Accumulation No. 14</div><div class="ayear">2021</div></div></div>
<div class="art"><div style="width:100%;height:100%;background:linear-gradient(160deg,#e0e0e0,#f8f8f8 75%);"></div><div class="artlabel"><div class="aname">Vessel Study II</div><div class="ayear">2017</div></div></div>
<div class="art"><div style="width:100%;height:100%;background:linear-gradient(160deg,#2d89ef,#f8f8f8 80%);"></div><div class="artlabel"><div class="aname">Interior with Window</div><div class="ayear">2023</div></div></div>
</div>
<div class="footer"><span>Victoria Miro, London & Venice</span><span>Enquire · Visit · Press</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111827;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111827;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #111827; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.2px; background: #2563eb; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0.2px; background: #ffffff; color: #111827;
border: 1px solid #2563eb; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111827;
border: 1px solid #c4c5c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #2563eb; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Focal Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#111827; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
.nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; border-bottom:1px solid #e5e7eb; }
.logo { font-weight:700; font-size:20px; letter-spacing:-.3px; color:#111827; }
.navlinks { display:flex; gap:30px; font-size:13px; font-weight:500; color:#374151; }
.navlinks span.active { color:#2563eb; }
.navcta { background:#2563eb; color:#fff; font-weight:700; font-size:13px; padding:9px 18px; }
.hero { display:flex; padding:44px 40px; gap:40px; align-items:center; }
.hero-copy { flex:1; }
.kicker { font-family:monospace; font-size:11px; color:#2563eb; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; }
.hero h1 { font-size:36px; font-weight:700; letter-spacing:-.5px; line-height:1.15; margin:0 0 14px; color:#111827; }
.hero p { font-size:15px; color:#6b7280; line-height:1.6; max-width:400px; margin:0 0 20px; }
.btn-primary { background:#2563eb; color:#fff; font-weight:700; font-size:14px; padding:11px 22px; display:inline-block; }
.spec-strip { display:flex; gap:20px; margin-top:22px; font-family:monospace; font-size:11px; color:#9ca3af; }
.spec-strip div { border-left:2px solid #e5e7eb; padding-left:10px; }
.spec-strip b { color:#111827; font-size:15px; display:block; font-family:Helvetica,Arial,sans-serif; font-weight:700; }
.hero-visual { flex:1; height:230px; background:#f8f8f8; border:1px solid #e5e7eb; display:flex; align-items:center; justify-content:center; }
.speaker { width:150px; height:190px; background:#111827; border-radius:10px; position:relative; box-shadow:0 20px 40px rgba(0,0,0,.15); }
.speaker .ring1 { position:absolute; top:20px; left:50%; transform:translateX(-50%); width:90px; height:90px; border-radius:50%; border:6px solid #2563eb; background:#1f2937; }
.speaker .ring2 { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); width:50px; height:50px; border-radius:50%; border:4px solid #6b7280; background:#374151; }
.divider { height:1px; background:#e5e7eb; margin:0 40px; }
.section { padding:26px 40px; flex:1; }
.section h2 { font-size:20px; font-weight:600; margin:0 0 16px; color:#111827; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { border:1px solid #e5e7eb; background:#fff; padding:14px; }
.card .ph { height:80px; margin-bottom:10px; display:flex; align-items:center; justify-content:center; background:#f8f8f8; }
.cone { width:50px; height:50px; border-radius:50%; background:radial-gradient(circle at 40% 35%,#374151,#111827 70%); border:3px solid #2563eb; }
.card .name { font-weight:600; font-size:13px; margin-bottom:2px; }
.card .spec { font-family:monospace; font-size:10.5px; color:#9ca3af; margin-bottom:8px; }
.card .pricerow { display:flex; justify-content:space-between; align-items:center; }
.card .price { font-family:monospace; font-weight:700; font-size:14px; color:#111827; }
.card .add { color:#2563eb; font-weight:700; font-size:11px; }
</style>
<div class="page">
<div class="nav">
<div class="logo">Focal</div>
<div class="navlinks"><span class="active">Headphones</span><span>Speakers</span><span>Studio Monitors</span><span>Car Audio</span><span>Support</span></div>
<div class="navcta">Add to Cart</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="kicker">// precision.transducer.v3</div>
<h1>Engineering that lets<br>the sound speak.</h1>
<p>Studio monitors and reference headphones built on a single principle: the interface organizes information, the product does the rest.</p>
<div class="btn-primary">Configure Monitor</div>
<div class="spec-strip">
<div>Freq Response<b>18Hz–40kHz</b></div>
<div>Driver<b>165mm W-cone</b></div>
<div>THD<b><0.3%</b></div>
</div>
</div>
<div class="hero-visual"><div class="speaker"><div class="ring1"></div><div class="ring2"></div></div></div>
</div>
<div class="divider"></div>
<div class="section">
<h2>Studio Monitors</h2>
<div class="grid">
<div class="card"><div class="ph"><div class="cone"></div></div><div class="name">Solo6 Be</div><div class="spec">6.5in · Beryllium</div><div class="pricerow"><span class="price">$1,290</span><span class="add">Add →</span></div></div>
<div class="card"><div class="ph"><div class="cone" style="width:40px;height:40px;"></div></div><div class="name">Alpha 65 Evo</div><div class="spec">6.5in · Near-field</div><div class="pricerow"><span class="price">$399</span><span class="add">Add →</span></div></div>
<div class="card"><div class="ph"><div class="cone" style="width:60px;height:60px;"></div></div><div class="name">Trio6 St6</div><div class="spec">3-way · Coaxial</div><div class="pricerow"><span class="price">$4,190</span><span class="add">Add →</span></div></div>
<div class="card"><div class="ph"><div class="cone" style="width:36px;height:36px;"></div></div><div class="name">Shape 40</div><div class="spec">4in · Compact</div><div class="pricerow"><span class="price">$299</span><span class="add">Add →</span></div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f7f7; color: #0b1e2f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f7f7; color: #0b1e2f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: 0.2px; margin: 0; color: #0b1e2f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0.1px; margin: 0; color: #434e4e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #557b97; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f8f7f7; color: #0b1e2f;
border: 1px solid #557b97; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f7f7; color: #0b1e2f;
border: 1px solid #bdc1c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #434e4e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f9c23c; color: #0b1e2f;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f7f7; color:#0b1e2f; box-sizing:border-box; font-family:'GT America', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; padding:0 32px; }
.brand { font-family:Georgia, serif; font-size:22px; font-weight:400; letter-spacing:.3px; }
.navlinks { display:flex; gap:20px; margin-left:auto; }
.navlinks div { font-size:14px; font-weight:500; text-transform:uppercase; letter-spacing:.3px; }
.hero { background:#f4f4f6; padding:36px 32px; text-align:center; }
.hero h1 { font-family:Georgia, serif; font-weight:300; font-size:36px; margin:0 0 10px; }
.hero p { font-size:14px; margin:0 0 16px; color:#3a3a3a; }
.hero .cta { display:inline-block; background:#f9c23c; color:#0b1e2f; font-size:15px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; padding:12px 24px; border-radius:8px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:20px 32px; }
.card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.img { aspect-ratio:1/1; }
.g1 { background:radial-gradient(circle,#557b97,#0b1e2f); }
.g2 { background:radial-gradient(circle,#0e7a82,#0b1e2f); }
.g3 { background:radial-gradient(circle,#434e4e,#0b1e2f); }
.info { padding:14px; }
.badge { display:inline-block; background:#f9c23c; color:#0b1e2f; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:3px 8px; border-radius:4px; margin-bottom:6px; }
.name { font-size:16px; font-weight:600; margin-bottom:4px; }
.price { font-size:16px; }
.footer { background:#0b1e2f; color:#f8f7f7; padding:18px 32px; font-size:13px; display:flex; gap:60px; }
</style></head>
<body>
<nav>
<div class="brand">Field Company</div>
<div class="navlinks"><div>Skillets</div><div>Sets</div><div>Care</div><div>About</div></div>
</nav>
<div class="hero">
<h1>Cast Iron, Reimagined</h1>
<p>Machined smooth cooking surfaces that only get better with use</p>
<div class="cta">Shop Skillets</div>
</div>
<div class="grid">
<div class="card"><span class="badge" style="margin:10px 0 0 10px">Bestseller</span><div class="img g1"></div><div class="info"><div class="name">No. 8 Cast Iron Skillet</div><div class="price">$155</div></div></div>
<div class="card"><div class="img g2"></div><div class="info"><div class="name">No. 10 Dutch Oven</div><div class="price">$225</div></div></div>
<div class="card"><div class="img g3"></div><div class="info"><div class="name">Wax Seasoning Kit</div><div class="price">$28</div></div></div>
</div>
<div class="footer"><div>Shop · Care Guide</div><div>Support · Contact</div></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #232221;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #232221;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.2; margin: 0; color: #232221; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #727272; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.2; letter-spacing: 1.2px; background: #232221; color: #fefefe;
border: none; border-radius: 0px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.2; letter-spacing: 1.2px; background: transparent; color: #232221;
border: 1px solid #ffff00; border-radius: 0px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fefefe; color: #232221;
border: 1px solid #c7c7c7; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #727272; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #fefeda; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fefefe; color:#232221; font-family:'Helvetica Neue',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 44px;border-bottom:1px solid #e5e5e5;}
.logo{font-size:18px;font-weight:300;letter-spacing:.02em;color:#232221;}
.navlinks{display:flex;gap:28px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#727272;}
.hero{height:340px;display:flex;background:#f3f3f3;}
.herotext{width:42%;display:flex;flex-direction:column;justify-content:center;padding:0 44px;}
.herotext .label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#9ba2a7;margin-bottom:14px;}
.herotext h1{font-size:32px;font-weight:300;color:#232221;margin:0 0 14px;line-height:1.3;}
.herotext p{font-size:13px;font-style:italic;color:#727272;margin:0 0 20px;max-width:290px;}
.link{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#232221;border-bottom:2px solid #ffff00;padding-bottom:6px;width:fit-content;}
.heroimg{width:58%;position:relative;background:linear-gradient(135deg,#afafaf,#727272 50%,#232221);}
.frame{position:absolute;left:50px;top:40px;width:220px;height:260px;background:#fefefe;}
.canvas{position:absolute;left:66px;top:56px;width:188px;height:228px;background:linear-gradient(160deg,#9ba2a7,#232221);}
.sec{padding:24px 44px 0;}
.sectitle{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#727272;margin-bottom:18px;}
.grid{display:flex;gap:2px;}
.card{width:200px;background:#fefefe;}
.thumb{height:150px;background:#f3f3f3;}
.pname{font-size:12px;font-weight:300;color:#232221;margin-top:10px;font-style:italic;}
.pmeta{font-size:10px;color:#727272;text-transform:uppercase;letter-spacing:.3px;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Lehmann Maupin</div>
<div class="navlinks"><span>Artists</span><span>Exhibitions</span><span>Publications</span><span>Contact</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="label">Current Exhibition</div>
<h1>Objects with personality, seen plainly.</h1>
<p>A gallery-world framing that lets the work speak first.</p>
<div class="link">View Exhibition</div>
</div>
<div class="heroimg"><div class="frame"></div><div class="canvas"></div></div>
</div>
<div class="sec">
<div class="sectitle">Available Works</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#afafaf,#232221)"></div><div class="pname">Untitled Composition I</div><div class="pmeta">Oil on Canvas, 2023</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#9ba2a7,#727272)"></div><div class="pname">Field Study No. 4</div><div class="pmeta">Mixed Media, 2024</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#b3b3b3,#232221)"></div><div class="pname">Silent Register</div><div class="pmeta">Bronze, 2022</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#727272,#9ba2a7)"></div><div class="pname">Interior Landscape</div><div class="pmeta">Photograph, 2024</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7e7e7e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ff5742; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #fafafa; color: #121212;
border: 1px solid #ff5742; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #121212;
border: 1px solid #c0c0c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7e7e7e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #00b84a; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Jones Road Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Articulat CF','Ringside Wide',Arial,sans-serif; background:#fafafa; color:#121212; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-weight:700;font-size:20px;letter-spacing:-1px;text-transform:uppercase;}
.navlinks{display:flex;gap:28px;font-size:13px;font-weight:500;letter-spacing:.3px;text-transform:uppercase;}
.navlinks .active{border-bottom:2px solid #121212;padding-bottom:4px;}
.searchpill{width:180px;height:36px;border-radius:999px;border:1px solid #dedede;background:#fafafa;font-size:12px;color:#7e7e7e;line-height:36px;padding:0 16px;}
.hero{padding:20px 40px 30px;text-align:center;}
.hero h1{font-size:44px;font-weight:700;letter-spacing:-1px;line-height:1.05;margin:0 0 10px;}
.hero p{font-size:16px;color:#7e7e7e;margin:0 0 18px;}
.btn{display:inline-block;background:#ff5742;color:#fff;padding:14px 30px;border-radius:8px;font-weight:600;font-size:14px;letter-spacing:.3px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:0 40px;}
.card{background:#fff;border-radius:8px;padding:16px;}
.imgbox{background:#f3f3f3;border-radius:8px;height:120px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#00b84a;color:#fff;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:4px;}
.title{font-size:15px;font-weight:500;margin-top:10px;}
.price{font-size:13px;color:#7e7e7e;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Jones Road</div>
<div class="navlinks"><span class="active">Face</span><span>Eyes</span><span>Lips</span><span>Bundles</span></div>
<div class="searchpill">Search</div>
</div>
<div class="hero">
<h1>Makeup that looks<br>like skin, not makeup.</h1>
<p>Clean, minimal formulas designed to disappear into your skin — not sit on top of it.</p>
<div class="btn">Shop Best Sellers</div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox" style="background:#efe7de;"><div class="badge">New</div></div>
<div class="title">The Miracle Balm</div>
<div class="price">$38</div>
</div>
<div class="card">
<div class="imgbox" style="background:#e9e2d8;"></div>
<div class="title">What The Foundation</div>
<div class="price">$44</div>
</div>
<div class="card">
<div class="imgbox" style="background:#e4ddd2;"></div>
<div class="title">The Bronzer</div>
<div class="price">$34</div>
</div>
<div class="card">
<div class="imgbox" style="background:#efe9de;"><div class="badge">New</div></div>
<div class="title">Lip Gloss Enhancer</div>
<div class="price">$26</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1f1f1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1f1f1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #1f1f1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #525252; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ff6f61; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #1f1f1f;
border: 1px solid #ff6f61; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1f1f1f;
border: 1px solid #c7c7c7; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #525252; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff6f61; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Jost',sans-serif; color:#2b2b2b; }
*{box-sizing:border-box;}
.nav{height:60px;background:#001f39;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:20px;font-weight:700;color:#f5f5f5;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#f5f5f5;}
.hero{height:262px;display:flex;align-items:center;padding:0 40px;background:#f5f5f5;}
.heroText{width:440px;}
.h1{font-size:32px;font-weight:600;line-height:1.2;color:#001f39;margin:0 0 14px;}
.sub{font-size:14px;color:#525252;line-height:1.5;margin:0 0 20px;width:370px;}
.cta{display:inline-flex;align-items:center;justify-content:center;width:170px;height:46px;background:#ff6f61;color:#ffffff;font-size:14px;font-weight:600;border-radius:8px;}
.spinner{position:relative;width:340px;height:200px;}
.pole{position:absolute;left:170px;top:20px;width:4px;height:170px;background:#525252;}
.blade{position:absolute;left:130px;top:40px;width:80px;height:80px;border-radius:50% 0 50% 0;background:linear-gradient(135deg,#ff6f61,#28bb74,#ff9736,#001f39);}
.sec{padding:24px 40px 0;}
.secTitle{font-size:18px;font-weight:600;color:#001f39;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#ffffff;border:1px solid #e5e5e5;border-radius:8px;overflow:hidden;}
.thumb{height:100px;}
.body{padding:10px;position:relative;}
.status{position:absolute;top:-10px;left:10px;font-size:9px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;color:#fff;padding:3px 8px;border-radius:4px;}
.s1{background:#28bb74;}
.s2{background:#ff9736;}
.pname{font-size:13px;font-weight:600;color:#001f39;margin:0 0 4px;}
.pprice{font-size:13px;color:#2b2b2b;}
</style>
<div class="nav">
<div class="logo">Wind And Weather</div>
<div class="navlinks"><span>Wind Spinners</span><span>Garden Decor</span><span>Weathervanes</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Bring the sky into your garden.</div>
<div class="sub">Kinetic weathervanes and wind spinners for the yard that's always in motion.</div>
<div class="cta">Shop Best Sellers</div>
</div>
<div class="spinner"><div class="pole"></div><div class="blade"></div></div>
</div>
<div class="sec">
<div class="secTitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="body"><span class="status s1">Available</span><div class="thumb" style="background:linear-gradient(135deg,#ff6f61,#001f39);"></div><div class="pname">Copper Weathervane</div><div class="pprice">$189</div></div></div>
<div class="card"><div class="body"><span class="status s2">Low Stock</span><div class="thumb" style="background:linear-gradient(135deg,#28bb74,#001f39);"></div><div class="pname">Garden Wind Spinner</div><div class="pprice">$59</div></div></div>
<div class="card"><div class="body"><div class="thumb" style="background:linear-gradient(135deg,#001f39,#ff6f61);"></div><div class="pname">Wall Medallion</div><div class="pprice">$79</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #03060f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #03060f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #88898e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b1426; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #03060f; color: #ffffff;
border: 1px solid #0b1426; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #03060f; color: #f5f5f5;
border: 1px solid #2a2c34; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #88898e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #040813; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#03060F; color:#F4F7FB; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:'SF Mono', ui-monospace, Menlo, Consolas, monospace; }
.shell { position:relative; width:960px; height:640px; padding:20px 24px 0; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.topbar b { font-size:18px; font-weight:800; }
.topicon { width:22px; height:22px; border-radius:50%; background:#15263F; }
.content { flex:1; display:flex; gap:20px; overflow:hidden; }
.colL { width:300px; display:flex; flex-direction:column; gap:16px; }
.colR { flex:1; display:flex; flex-direction:column; gap:14px; }
.balance-label { font-size:12px; color:#8DA0BD; }
.balance-value { font-size:30px; font-weight:600; letter-spacing:-0.5px; margin:4px 0; }
.balance-pnl { font-size:12px; font-weight:600; color:#00C08B; }
.quickrow { display:flex; gap:14px; margin-top:6px; }
.qa { display:flex; flex-direction:column; align-items:center; gap:6px; }
.qa .circ { width:46px; height:46px; border-radius:50%; background:#0B1426; border:1px solid #1C3354;
display:flex; align-items:center; justify-content:center; }
.qa .circ::before { content:''; width:14px; height:14px; background:#1199FA; border-radius:3px; }
.qa span { font-size:11px; font-weight:600; color:#8DA0BD; }
.card { width:100%; aspect-ratio:1.586; border-radius:18px; position:relative; margin-top:6px;
background:linear-gradient(135deg,#0A0A0C,#26262C); box-shadow:0 14px 30px -14px rgba(0,0,0,0.8); padding:16px; }
.card::before { content:''; position:absolute; inset:0; border-radius:18px;
background:linear-gradient(120deg, rgba(255,255,255,0.08), transparent 40%); }
.card-tier { font-size:12px; font-weight:700; letter-spacing:1.5px; color:#C8A24A; position:relative; }
.card-mark { position:absolute; top:16px; right:16px; font-size:13px; font-weight:800; color:#fff; }
.card-chip { position:absolute; top:44px; left:16px; width:32px; height:22px; border-radius:5px;
background:linear-gradient(135deg,#E8CE8A,#C8A24A); }
.card-pan { position:absolute; left:16px; bottom:34px; font-size:14px; letter-spacing:2px; color:#F4F7FB; }
.card-name { position:absolute; left:16px; bottom:16px; font-size:11px; font-weight:600; letter-spacing:0.5px;
color:rgba(255,255,255,0.75); text-transform:uppercase; }
.card-visa { position:absolute; right:16px; bottom:14px; font-size:16px; font-weight:800; font-style:italic; color:#fff; }
.promo { border-radius:18px; padding:16px; background:linear-gradient(135deg,#002D74,#103F68);
display:flex; flex-direction:column; gap:8px; }
.promo b { font-size:15px; font-weight:800; }
.promo span { font-size:12px; color:#cfe0ff; }
.promo .pill { align-self:flex-start; background:#1199FA; color:#fff; font-size:12px; font-weight:700;
padding:6px 14px; border-radius:500px; margin-top:2px; }
.sectitle { font-size:15px; font-weight:700; margin-bottom:2px; }
.watchlist { display:flex; flex-direction:column; }
.wrow { display:flex; align-items:center; padding:11px 0; border-bottom:1px solid #1C3354; }
.coin { width:34px; height:34px; border-radius:50%; margin-right:12px; flex-shrink:0; }
.coin.btc { background:#F7931A; } .coin.eth { background:#627EEA; } .coin.sol { background:#14F195; } .coin.cro { background:#1199FA; }
.wname { flex:1; }
.wname b { display:block; font-size:15px; font-weight:700; }
.wname span { font-size:12px; color:#8DA0BD; }
.wprice { text-align:right; }
.wprice b { display:block; font-size:15px; font-weight:600; }
.wprice span.up { font-size:12px; font-weight:600; color:#00C08B; }
.wprice span.down { font-size:12px; font-weight:600; color:#F6485D; }
.tabbar { height:56px; display:flex; align-items:center; justify-content:space-around;
border-top:1px solid #1C3354; margin-top:auto; position:relative; }
.tab { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10px; font-weight:600; color:#5B6E8C; }
.tab.active { color:#1199FA; }
.tab .dot { width:20px; height:20px; border-radius:5px; background:currentColor; opacity:0.85; }
.tab-trade { width:44px; height:44px; border-radius:50%; background:#1199FA; margin-top:-26px;
box-shadow:0 6px 16px rgba(17,153,250,0.4); display:flex; align-items:center; justify-content:center; }
.tab-trade::before { content:''; width:16px; height:16px; border:2px solid #fff; border-radius:4px; }
</style></head>
<body>
<div class="shell">
<div class="topbar"><b>Crypto.com (iOS)</b><div class="topicon"></div></div>
<div class="content">
<div class="colL">
<div class="balance-label">Total Balance (USD)</div>
<div class="balance-value mono">$ 18,402.65</div>
<div class="balance-pnl mono">+$320.18 (+1.77%) Today</div>
<div class="quickrow">
<div class="qa"><div class="circ"></div><span>Deposit</span></div>
<div class="qa"><div class="circ"></div><span>Send</span></div>
<div class="qa"><div class="circ"></div><span>Trade</span></div>
<div class="qa"><div class="circ"></div><span>Earn</span></div>
</div>
<div class="card">
<div class="card-tier">OBSIDIAN</div>
<div class="card-mark">Crypto.com (iOS)</div>
<div class="card-chip"></div>
<div class="card-pan mono">5482 •••• •••• 7310</div>
<div class="card-name">JANE APPLESEED</div>
<div class="card-visa">VISA</div>
</div>
<div class="promo">
<b>Stake CRO, unlock the Obsidian tier</b>
<span>Earn 5% cashback on every purchase</span>
<div class="pill">Stake now</div>
</div>
</div>
<div class="colR">
<div class="sectitle">Watchlist</div>
<div class="watchlist">
<div class="wrow"><span class="coin btc"></span><div class="wname"><b>BTC</b><span>Bitcoin</span></div><div class="wprice"><b class="mono">$67,284.10</b><span class="up mono">+2.34%</span></div></div>
<div class="wrow"><span class="coin eth"></span><div class="wname"><b>ETH</b><span>Ethereum</span></div><div class="wprice"><b class="mono">$3,412.05</b><span class="down mono">-0.81%</span></div></div>
<div class="wrow"><span class="coin cro"></span><div class="wname"><b>CRO</b><span>Cronos</span></div><div class="wprice"><b class="mono">$0.1284</b><span class="up mono">+5.62%</span></div></div>
<div class="wrow"><span class="coin sol"></span><div class="wname"><b>SOL</b><span>Solana</span></div><div class="wprice"><b class="mono">$178.44</b><span class="up mono">+1.19%</span></div></div>
</div>
<div class="sectitle" style="margin-top:8px;">Earn</div>
<div class="watchlist">
<div class="wrow"><span class="coin cro"></span><div class="wname"><b>Cronos</b><span>3-month term</span></div><div class="wprice"><b class="mono" style="color:#00C08B;">8.00% APR</b></div></div>
</div>
</div>
</div>
<div class="tabbar">
<div class="tab active"><span class="dot"></span>Home</div>
<div class="tab"><span class="dot"></span>Prices</div>
<div class="tab-trade"></div>
<div class="tab"><span class="dot"></span>Earn</div>
<div class="tab"><span class="dot"></span>Card</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: 0.5px; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; background: #0871b9; color: #ffffff;
border: none; border-radius: 4px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; background: #ffffff; color: #080808;
border: 1px solid #0871b9; border-radius: 4px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #080808;
border: 1px solid #c1c1c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #dff0d8; color: #3c763d;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6f6f6; color:#080808; box-sizing:border-box;
font-family:'Trebuchet MS', Roboto, Arial, sans-serif; }
* { box-sizing:border-box; }
.utility { height:36px; background:#0871b9; color:#fff; font-size:11px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; }
.navbar { height:50px; background:#080808; display:flex; align-items:center; padding:0 20px; gap:16px; }
.brand { color:#fff; font-weight:700; font-size:20px; letter-spacing:.3px; font-family:'Arial Black', Arial, sans-serif; }
.navlinks { display:flex; gap:16px; flex:1; }
.navlinks div { color:#fff; font-size:13px; font-weight:600; }
.search { display:flex; height:32px; flex:0 0 260px; }
.search input { border:none; outline:none; flex:1; padding:0 10px; font-size:12px; border-radius:4px 0 0 4px; }
.search .go { width:38px; background:#0871b9; color:#fff; display:flex; align-items:center; justify-content:center; border-radius:0 4px 4px 0; font-size:13px; }
.subnav { height:36px; background:#f5f5f5; border-bottom:1px solid #eeeeee; display:flex; align-items:center; gap:16px; padding:0 20px; font-size:13px; color:#555; }
.body { display:flex; height:calc(640px - 122px); }
.sidebar { width:220px; background:#f5f5f5; border-right:1px solid #eeeeee; padding:14px; font-size:13px; }
.sidebar .h { font-weight:700; margin-bottom:8px; }
.sidebar .item { padding:6px 0; color:#555; }
.sidebar .item.active { background:#0871b9; color:#fff; padding:6px 8px; border-radius:4px; margin:0 -8px; }
.main { flex:1; padding:16px 20px; }
.crumb { font-size:12px; color:#777; margin-bottom:10px; background:#f6f6f6; padding:8px 12px; border-radius:4px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#f5f5f5; border:1px solid #eeeeee; border-radius:4px; padding:12px; }
.imgbox { background:#fff; height:80px; border-radius:4px; margin-bottom:8px; display:flex; align-items:center; justify-content:center; }
.imgbox div { width:60%; height:50%; border-radius:4px; }
.g1 { background:linear-gradient(135deg,#c9ced6,#7d8896); }
.g2 { background:linear-gradient(135deg,#e8c98a,#a97f38); }
.g3 { background:linear-gradient(135deg,#b9c7d6,#4c6b86); }
.partno { font-family:Consolas, monospace; font-size:11px; color:#777; }
.name { font-size:14px; font-weight:700; margin:4px 0; }
.price { font-size:18px; font-weight:700; color:#0871b9; }
.stock { display:inline-block; background:#dff0d8; color:#3c763d; font-size:10px; font-weight:700; text-transform:uppercase; padding:2px 6px; border-radius:4px; margin-top:6px; }
</style></head>
<body>
<div class="utility"><span>☎ 1-888-555-0193</span><span>Login | Cart (0)</span></div>
<div class="navbar">
<div class="brand">Fastener Superstore</div>
<div class="navlinks"><div>Fasteners</div><div>Brands</div><div>Industries</div></div>
<div class="search"><input placeholder="Search by part or spec" /><div class="go">🔍</div></div>
</div>
<div class="subnav"><div>Screws</div><div>Bolts</div><div>Nuts</div><div>Washers</div><div>Rivets</div><div>Anchors</div></div>
<div class="body">
<div class="sidebar">
<div class="h">Refine Results</div>
<div class="item active">Machine Screws</div>
<div class="item">Thread Size: 8-32</div>
<div class="item">Material: Stainless</div>
<div class="item">Head Style: Pan</div>
<div class="item">Drive: Phillips</div>
</div>
<div class="main">
<div class="crumb">Home / Fasteners / Machine Screws</div>
<div class="grid">
<div class="card"><div class="imgbox"><div class="g1"></div></div><div class="partno">MSC-8-32-1</div><div class="name">Machine Screw 8-32 x 1"</div><div class="price">$4.29</div><div class="stock">In Stock</div></div>
<div class="card"><div class="imgbox"><div class="g2"></div></div><div class="partno">MSC-10-24-2</div><div class="name">Machine Screw 10-24 x 2"</div><div class="price">$5.19</div><div class="stock">In Stock</div></div>
<div class="card"><div class="imgbox"><div class="g3"></div></div><div class="partno">MSC-6-32-.5</div><div class="name">Machine Screw 6-32 x 0.5"</div><div class="price">$3.49</div><div class="stock">In Stock</div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf8f0; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf8f0; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #9b1f3a; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #faf8f0; color: #9b1f3a;
border: 1px solid #9b1f3a; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1c1c1c;
border: 1px solid #c2c1bb; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.6px; background: #9b1f3a; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#faf8f0; font-family:'Georgia','Times New Roman',serif; color:#1c1c1c; }
*{box-sizing:border-box;}
.util{height:26px;background:#1e3456;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;color:#fff;}
.nav{height:56px;background:#faf8f0;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.logo{font-size:21px;font-weight:700;color:#1c1c1c;}
.navlinks{display:flex;gap:20px;font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#4a4232;}
.crumbs{background:#f5f3ec;padding:6px 24px;font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;color:#6b6b6b;}
.body{display:flex;height:436px;}
.side{width:180px;padding:14px 16px;border-right:1px solid #dedede;}
.sidelabel{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:600;color:#1c1c1c;padding-bottom:6px;border-bottom:1px solid #efefef;margin-bottom:8px;}
.chiprow{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px;}
.chip{background:#f0ede4;color:#4a4232;font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;border-radius:4px;padding:3px 7px;}
.chip.on{background:#9b1f3a;color:#fff;}
.main{flex:1;padding:14px 20px;}
.title{font-size:20px;font-weight:700;margin:0 0 10px;color:#1c1c1c;}
.grid{display:flex;gap:12px;}
.card{width:150px;background:#fff;border:1px solid #efefef;border-radius:4px;padding:8px;}
.thumb{height:90px;border-radius:4px;background:#f5f3ec;margin-bottom:6px;}
.ptitle{font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;font-weight:600;color:#1c1c1c;line-height:1.3;}
.pspec{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;color:#6b6b6b;margin-top:4px;}
.pprice{font-family:'Helvetica Neue',Arial,sans-serif;font-size:15px;font-weight:700;margin-top:6px;}
.footer{height:158px;background:#1e3456;color:#c8d4e8;padding:18px 24px;display:flex;gap:40px;font-family:'Helvetica Neue',Arial,sans-serif;}
.fcol h5{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#c8a84b;margin:0 0 8px;}
.fcol div{font-size:12px;line-height:2;}
</style>
<div class="util"><span>Free shipping on orders over $75</span><span>FSC Certified Stock | Account</span></div>
<div class="nav">
<div class="logo">Paper Mill Store</div>
<div class="navlinks"><div>Paper Type</div><div>Occasion</div><div>Format</div><div>Brands</div></div>
</div>
<div class="crumbs">Home / Paper / Text Weight / 80lb Cover</div>
<div class="body">
<div class="side">
<div class="sidelabel">Weight</div>
<div class="chiprow"><div class="chip on">80lb</div><div class="chip">60lb</div><div class="chip">100lb</div></div>
<div class="sidelabel">Finish</div>
<div class="chiprow"><div class="chip">Linen</div><div class="chip on">Laid</div><div class="chip">Smooth</div></div>
<div class="sidelabel">Color</div>
<div class="chiprow"><div class="chip">Bright White</div><div class="chip on">Natural</div><div class="chip">Ivory</div></div>
</div>
<div class="main">
<div class="title">80lb Cover — Laid Finish</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ptitle">Natural White Laid Cover</div><div class="pspec">80lb · 8.5×11 · Ream of 250</div><div class="pprice">$24.95</div></div>
<div class="card"><div class="thumb" style="background:#f5e8eb;"></div><div class="ptitle">Ivory Laid Cover</div><div class="pspec">80lb · A4 · Ream of 250</div><div class="pprice">$26.95</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Bright White Linen Cover</div><div class="pspec">100lb · 8.5×11 · Ream of 100</div><div class="pprice">$31.95</div></div>
<div class="card"><div class="thumb" style="background:#f5e8eb;"></div><div class="ptitle">Natural Smooth Text</div><div class="pspec">60lb · Letter · Ream of 500</div><div class="pprice">$18.95</div></div>
</div>
</div>
</div>
<div class="footer">
<div class="fcol"><h5>Paper Types</h5><div>Cardstock<br>Text Weight<br>Specialty</div></div>
<div class="fcol"><h5>Occasions</h5><div>Wedding<br>Announcement<br>Business</div></div>
<div class="fcol"><h5>Certifications</h5><div>FSC Certified<br>Recycled Content<br>SFI Sourced</div></div>
<div class="fcol"><h5>Customer Service</h5><div>Bulk Orders<br>Sample Kits<br>Contact</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #060f1e; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #060f1e; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8a6e20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #c9a032; color: #091d3d;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: transparent; color: #c9a032;
border: 1px solid #091d3d; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #0f2341; color: #ffffff;
border: 1px solid #444b56; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a6e20; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: 0.8px; background: #c9a032; color: #091d3d;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#060f1e; font-family:'Barlow Condensed',Arial,sans-serif; color:#ffffff; }
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#091d3d;border-bottom:1px solid #1e3558;}
.logo{font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#f0c050;}
.navlinks{display:flex;gap:18px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:#9aa3b2;}
.cart{background:#c8102e;color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;padding:9px 18px;border-radius:2px;}
.hero{height:222px;display:flex;align-items:center;padding:0 40px;background:radial-gradient(circle at 78% 45%,rgba(201,160,50,0.2),#060f1e 65%);position:relative;overflow:hidden;}
.pack{position:absolute;right:100px;top:24px;width:130px;height:170px;border-radius:6px;background:linear-gradient(160deg,#c9a032 0%,#091d3d 55%,#060f1e 100%);box-shadow:0 0 40px rgba(201,160,50,0.25);transform:rotate(6deg);}
.pack:before{content:'';position:absolute;left:14px;top:16px;right:14px;height:2px;background:rgba(232,208,128,0.5);}
.herotext{max-width:420px;position:relative;z-index:2;}
.kicker{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#f0c050;margin-bottom:8px;}
.h1{font-size:44px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;line-height:1;color:#fff;margin:0 0 10px;}
.sub{font-family:Arial,sans-serif;font-size:14px;color:#e8eaf0;line-height:1.5;margin:0 0 16px;max-width:320px;}
.btn{display:inline-block;background:#c9a032;color:#091d3d;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;padding:12px 26px;border-radius:2px;}
.grid{display:flex;gap:14px;padding:16px 40px 0;}
.card{width:196px;background:#0f2341;border-radius:4px;overflow:hidden;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#c8102e;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:4px 8px;border-radius:2px;z-index:2;}
.thumb{height:92px;}
.cbody{padding:11px 13px;font-family:Arial,sans-serif;}
.ctitle{font-size:13px;font-weight:700;margin:0 0 4px;color:#fff;}
.cprice{font-size:15px;font-weight:700;color:#f0c050;margin:0;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#091d3d;border-top:1px solid #1e3558;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-family:Arial,sans-serif;font-size:12px;color:#9aa3b2;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Panini America</div>
<div class="navlinks"><span>NBA</span><span>NFL</span><span>MLB</span><span>Soccer</span></div>
<div class="cart">Cart (1)</div>
</div>
<div class="hero">
<div class="pack"></div>
<div class="herotext">
<div class="kicker">Drop Live · Ends Midnight</div>
<div class="h1">What's inside<br>the pack?</div>
<div class="sub">Licensed trading cards across every major league — rookies, autos, and serial-numbered parallels.</div>
<div class="btn">Shop the Drop</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="badge">Live</div><div class="thumb" style="background:linear-gradient(135deg,#c9a032,#060f1e)"></div><div class="cbody"><div class="ctitle">Prizm Hobby Box</div><div class="cprice">$189.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c8102e,#060f1e)"></div><div class="cbody"><div class="ctitle">Select Football Blaster</div><div class="cprice">$29.99</div></div></div>
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#091d3d,#c9a032)"></div><div class="cbody"><div class="ctitle">Donruss Optic Case</div><div class="cprice">$449.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3a4e6b,#060f1e)"></div><div class="cbody"><div class="ctitle">Mosaic Soccer Hobby Box</div><div class="cprice">$159.99</div></div></div>
</div>
<div class="footer"><span>Officially Licensed · NBA · NFL · MLB</span><span>Serial-Numbered Parallels Included</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0d0c0c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0d0c0c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #0d0c0c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; margin: 0; color: #787878; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #ff0283; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #0d0c0c;
border: 1px solid #ff0283; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.6; background: #ffffff; color: #0d0c0c;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787878; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #ff0283; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>IL MAKIAGE mockup</title>
<style>
:host, html, body {
width: 960px; height: 640px; margin: 0; padding: 0;
overflow: hidden; box-sizing: border-box;
font-family: 'Maison Neue Book', 'Helvetica Neue', Helvetica, Arial, sans-serif;
background: #ffffff; color: #3c3c3c;
}
*, *::before, *::after { box-sizing: border-box; }
.wrap { width: 960px; height: 640px; position: relative; overflow: hidden; background: #ffffff; }
.nav { height: 56px; background: #ffffff; border-bottom: 1px solid #e8e8e8;
display: flex; align-items: center; justify-content: space-between; padding: 0 40px; }
.logo { font-size: 17px; font-weight: 700; letter-spacing: 3px; color: #0d0c0c; }
.navlinks { display: flex; gap: 24px; }
.navlinks a { font-size: 12px; font-weight: 600; color: #3c3c3c; text-decoration: none; }
.quiz-pill { background: #ff0283; color: #ffffff; font-size: 11px; font-weight: 700; padding: 8px 16px; border-radius: 9999px; }
.hero { height: 230px; display: flex; align-items: center; padding: 0 40px; gap: 20px;
background: linear-gradient(120deg,#fff3f8 0%,#ffffff 60%); }
.hero-text { width: 460px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #1890ff; margin-bottom: 10px; }
.headline { font-size: 34px; font-weight: 700; color: #0d0c0c; line-height: 1.15; letter-spacing: -0.3px; }
.headline span { color: #ff0283; }
.sub { font-size: 13.5px; color: #3c3c3c; margin-top: 12px; width: 390px; line-height: 1.55; }
.cta-row { display: flex; align-items: center; gap: 18px; margin-top: 20px; }
.btn-primary { background: #ff0283; color: #ffffff; font-size: 13px; font-weight: 700; padding: 13px 24px; border-radius: 10px; }
.link-blue { font-size: 12.5px; font-weight: 700; color: #1890ff; }
.hero-art { position: relative; width: 340px; height: 190px; }
.bottle { position: absolute; border-radius: 14px; box-shadow: 0 14px 26px rgba(13,12,12,0.14); }
.cap { position: absolute; border-radius: 6px; }
.b1 { left: 60px; top: 40px; width: 76px; height: 118px; background: linear-gradient(160deg,#ff0283,#c81068); }
.b1cap { left: 78px; top: 24px; width: 42px; height: 22px; background: #0d0c0c; }
.b2 { left: 170px; top: 68px; width: 92px; height: 90px; background: linear-gradient(160deg,#fff,#f5eee3); border: 1px solid #e8e8e8; }
.b2cap { left: 197px; top: 52px; width: 40px; height: 20px; background: #faad14; }
.banner { height: 30px; background: #faad14; display: flex; align-items: center; justify-content: center;
font-size: 11.5px; font-weight: 700; color: #0d0c0c; letter-spacing: 0.3px; }
.section-head { padding: 10px 40px 0 40px; display: flex; align-items: baseline; justify-content: space-between; }
.section-title { font-size: 17px; font-weight: 700; color: #0d0c0c; }
.section-link { font-size: 12px; font-weight: 700; color: #1890ff; }
.grid { display: flex; gap: 18px; padding: 14px 40px 0 40px; width: 880px; }
.card { flex: 1; background: #ffffff; border: 1px solid #e8e8e8; border-radius: 12px; padding: 14px; position: relative; display: flex; flex-direction: column; align-items: center; }
.badge { position: absolute; top: 10px; left: 10px; background: #ff0283; color: #ffffff; font-size: 9px; font-weight: 700;
letter-spacing: 0.4px; text-transform: uppercase; padding: 3px 8px; border-radius: 9999px; }
.swatch { width: 56px; height: 56px; border-radius: 9999px; margin-bottom: 12px; margin-top: 10px; border: 3px solid #ffffff; box-shadow: 0 0 0 1px #e8e8e8; }
.p-title { font-size: 13px; font-weight: 700; color: #0d0c0c; }
.p-meta { font-size: 10.5px; color: #787878; margin-top: 3px; }
.p-price { font-size: 13.5px; font-weight: 700; color: #0d0c0c; margin-top: 8px; }
.footer { position: absolute; left: 0; bottom: 0; width: 960px; height: 40px; background: #0d0c0c; color: #d9d9d9;
display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0.3px; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">IL Makiage</div>
<div class="navlinks">
<a href="#">Shade Match</a>
<a href="#">Best Sellers</a>
<a href="#">Skincare</a>
<a href="#">Reviews</a>
</div>
<div class="quiz-pill">Take the Quiz</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="eyebrow">AI-Matched Shades</div>
<div class="headline">Your <span>perfect match</span>, decoded</div>
<div class="sub">Answer four questions, snap a selfie, and get a foundation shade built for your exact undertone — no counter required.</div>
<div class="cta-row">
<div class="btn-primary">Find My Shade</div>
<div class="link-blue">How it works →</div>
</div>
</div>
<div class="hero-art">
<div class="bottle b2"></div>
<div class="cap b2cap"></div>
<div class="bottle b1"></div>
<div class="cap b1cap"></div>
</div>
</div>
<div class="banner">✦ VIP Rewards — Earn points on every order, redeem for full-size favorites ✦</div>
<div class="section-head">
<div class="section-title">Shade-Matched Bestsellers</div>
<div class="section-link">Shop all shades →</div>
</div>
<div class="grid">
<div class="card">
<div class="badge">Bestseller</div>
<div class="swatch" style="background:#f2c9a1;"></div>
<div class="p-title">Woke Up Like This Foundation</div>
<div class="p-meta">Shade 120 — Light Neutral</div>
<div class="p-price">$44.00</div>
</div>
<div class="card">
<div class="swatch" style="background:#e0a878;"></div>
<div class="p-title">Woke Up Like This Foundation</div>
<div class="p-meta">Shade 220 — Medium Warm</div>
<div class="p-price">$44.00</div>
</div>
<div class="card">
<div class="swatch" style="background:#b97a52;"></div>
<div class="p-title">Woke Up Like This Foundation</div>
<div class="p-meta">Shade 340 — Tan Golden</div>
<div class="p-price">$44.00</div>
</div>
<div class="card">
<div class="swatch" style="background:#8a5a3c;"></div>
<div class="p-title">Woke Up Like This Foundation</div>
<div class="p-meta">Shade 460 — Deep Neutral</div>
<div class="p-price">$44.00</div>
</div>
</div>
<div class="footer">IL Makiage — Precision beauty, matched to you.</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5100; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5100; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1cfbce; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5100; color: #000000;
border: 1px solid #1cfbce; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5100; color: #f5f5f5;
border: 1px solid #fd6b27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #db6c21; color: #1cfbce;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#2e3137; box-sizing:border-box;
font-family:"Pretendard", -apple-system, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { padding:22px 40px 10px; }
.hero h1 { font-size:24px; font-weight:700; color:#000000; margin:0 0 12px; }
.search { background:#fff; border:2px solid #222222; border-radius:30px; height:52px; padding:0 20px;
display:flex; align-items:center; font-size:16px; color:#969fac; margin-bottom:12px; }
.region-row { display:flex; gap:8px; flex-wrap:wrap; }
.rpill { background:#f0f4ff; color:#2e3137; border:1px solid rgba(0,0,0,0.04); border-radius:24px;
height:34px; padding:0 16px; display:flex; align-items:center; font-size:13px; }
.section { padding:10px 40px 0; }
.section h2 { font-size:18px; font-weight:700; color:#000; margin:0 0 10px; }
.list { display:flex; flex-direction:column; gap:0; }
.row { display:flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid #dfe3e6; }
.thumb { width:64px; height:64px; border-radius:12px; flex-shrink:0; }
.th1 { background:linear-gradient(135deg,#ffd6c2,#ff8a5c); }
.th2 { background:linear-gradient(135deg,#c9e8ff,#4b9cfb); }
.th3 { background:linear-gradient(135deg,#e0ffe0,#5cbf7d); }
.info { flex:1; }
.info .name { font-size:16px; font-weight:700; color:#2e3137; }
.info .meta { font-size:12px; color:#6d7583; }
.stats { text-align:right; }
.stats .waiting { font-size:12px; font-weight:700; color:#1cfbce; }
.stats .rating { font-size:12px; font-weight:700; color:#131517; }
.stats .rev { font-size:11px; color:#969fac; }
.promo { margin:12px 40px 0; background:#ffece8; border-radius:12px; padding:14px 18px; display:flex;
justify-content:space-between; align-items:center; }
.promo .txt { font-size:15px; font-weight:700; color:#ff5100; }
.promo .media { display:flex; gap:8px; }
.promo .media div { width:60px; height:40px; border-radius:12px; }
.m1 { background:#fff7eb; } .m2 { background:#f0f0f0; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #dfe3e6; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#969fac; }
</style></head>
<body>
<div class="hero">
<h1>What should we eat today? Restaurant search is Tabling</h1>
<div class="search">Search for a restaurant</div>
<div class="region-row">
<span class="rpill">Nationwide</span><span class="rpill">Seoul South</span><span class="rpill">Busan</span><span class="rpill">Daegu</span>
</div>
</div>
<div class="section">
<h2>Popular waiting spots by region</h2>
<div class="list">
<div class="row"><div class="thumb th1"></div><div class="info"><div class="name">Hanok Grill House</div><div class="meta">Korean · Cheongjin-dong</div></div>
<div class="stats"><div class="waiting">17 teams waiting</div><div class="rating">4.6</div><div class="rev">(2,172)</div></div></div>
<div class="row"><div class="thumb th2"></div><div class="info"><div class="name">Ocean Noodle Bar</div><div class="meta">Seafood · Haeundae</div></div>
<div class="stats"><div class="waiting">45 teams waiting</div><div class="rating">4.8</div><div class="rev">(3,590)</div></div></div>
<div class="row"><div class="thumb th3"></div><div class="info"><div class="name">Maple Bakery Café</div><div class="meta">Café · Itaewon</div></div>
<div class="stats"><div class="waiting">6 teams waiting</div><div class="rating">4.5</div><div class="rev">(981)</div></div></div>
</div>
</div>
<div class="promo">
<span class="txt">More great restaurant picks, check the Tabling app!</span>
<div class="media"><div class="m1"></div><div class="m2"></div></div>
</div>
<footer><span>© Tabling</span><span>Tabling · TOP100 · App Download</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.27; background: #313131; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.27; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #e63946; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #d4d4d4;}
.logo{font-size:18px;font-weight:700;letter-spacing:-0.3px;color:#313131;}
.navicons{display:flex;gap:16px;font-size:13px;font-weight:600;color:#313131;}
.search{margin:14px 28px;height:48px;background:#f5f5f5;display:flex;align-items:center;padding:0 16px;font-size:14px;color:#9e9e9e;}
.catstrip{display:flex;gap:20px;padding:0 28px 10px;border-bottom:1px solid #e8e8e8;font-size:14px;font-weight:400;color:#7a7a7a;}
.catstrip .active{color:#313131;font-weight:600;border-bottom:2px solid #313131;padding-bottom:8px;}
.grid{display:flex;gap:14px;padding:16px 28px 0;}
.card{width:170px;}
.thumb{width:170px;height:170px;border:1px solid #e8e8e8;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#e63946;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.badge.sale{background:#2a9d8f;}
.title{font-size:14px;font-weight:600;margin-top:8px;color:#313131;}
.artist{font-size:12px;color:#7a7a7a;margin-top:2px;}
.price{font-size:14px;font-weight:600;color:#313131;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#313131;display:flex;align-items:center;padding:0 28px;color:#fff;font-size:12px;gap:24px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Sounds OF The Universe</div>
<div class="navicons"><span>NEW ARRIVALS</span><span>GENRES</span><span>CART</span><span>ACCOUNT</span></div>
</div>
<div class="search">Search artist, album, catalog number...</div>
<div class="catstrip">
<span class="active">All</span><span>Jazz</span><span>Soul</span><span>Ambient</span><span>Post-Punk</span><span>Reissues</span>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3d3d3d,#8a8a8a)"><span class="badge">New</span></div><div class="title">Midnight Frequencies</div><div class="artist">Various Artists</div><div class="price">$28.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#5a5a5a,#c9c9c9)"></div><div class="title">Low Tide Sessions</div><div class="artist">The Copper Room</div><div class="price">$32.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(120deg,#2b2b2b,#6b6b6b)"><span class="badge sale">Sale</span></div><div class="title">Concrete Hymns</div><div class="artist">Marlowe Dust</div><div class="price">$22.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(200deg,#7a7a7a,#1a1a1a)"></div><div class="title">Field Recordings Vol. II</div><div class="artist">N. Okafor</div><div class="price">$26.00</div></div>
</div>
<div class="footer"><span>About Us</span><span>Customer Service</span><span>Connect</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #18213f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #18213f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #18213f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #34bd4d; color: #000000;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #18213f;
border: 1px solid #34bd4d; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #292929;
border: 1px solid #c5c8cf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #eab000; color: #18213f;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Quicksand,Arial,sans-serif; color:#18213f; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #efefef;}
.logo{font-family:'Archivo Black',Arial,sans-serif;font-size:18px;color:#18213f;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;color:#18213f;}
.hero{height:240px;background:#18213f;display:flex;align-items:center;padding:0 36px;color:#fff;}
.left{width:440px;}
.h1{font-family:'Archivo Black',Arial,sans-serif;font-size:30px;line-height:1.25;margin:0 0 14px;}
.sub{font-size:15px;font-weight:500;line-height:1.6;color:#c9d0e0;max-width:340px;margin:0 0 18px;}
.cta{display:inline-block;background:#34bd4d;color:#fff;font-size:15px;font-weight:600;padding:12px 26px;border-radius:8px;}
.right{flex:1;position:relative;height:160px;}
.sheet{position:absolute;right:80px;top:10px;width:100px;height:140px;background:#fff;border-radius:8px;transform:rotate(-6deg);}
.sheet2{position:absolute;right:130px;top:30px;width:100px;height:140px;background:#34bd4d;border-radius:8px;transform:rotate(6deg);opacity:.85;}
.toggle{margin:18px 36px 0;display:flex;background:#f1f3f5;border-radius:9999px;width:260px;padding:4px;}
.toggleopt{flex:1;text-align:center;font-size:12px;font-weight:600;padding:8px 0;border-radius:9999px;color:#666;}
.toggleopt.on{background:#fff;color:#18213f;box-shadow:0 1px 3px rgba(0,0,0,.1);}
.sec{padding:16px 36px 0;}
.seclabel{font-family:'Archivo Black',Arial,sans-serif;font-size:16px;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:210px;background:#fff;border:1px solid #efefef;border-radius:8px;padding:10px;position:relative;}
.thumb{aspect-ratio:1/1;background:#f1f3f5;border-radius:8px;margin-bottom:8px;}
.ptitle{font-size:14px;font-weight:600;margin:0 0 4px;}
.pprice{font-size:14px;font-weight:700;color:#18213f;}
.badgerow{display:flex;gap:6px;margin-top:6px;}
.badge{font-size:9px;font-weight:700;padding:2px 7px;border-radius:9999px;}
.eco{background:#e3f6e6;color:#34bd4d;}
.save{background:#fdf1d2;color:#eab000;}
.info{background:#e3f4fb;color:#19adde;}
</style>
<div class="nav">
<div class="logo">Sheets Laundry Club</div>
<div class="navlinks"><div>Detergent Sheets</div><div>Dryer Sheets</div><div>Bundles</div></div>
</div>
<div class="hero">
<div class="left">
<div class="h1">Laundry Made<br>Simple.</div>
<div class="sub">Zero plastic jug. Eco-friendly green, informational cyan, savings gold — clear hierarchy, light tone.</div>
<div class="cta">Shop Detergent Sheets</div>
</div>
<div class="right"><div class="sheet2"></div><div class="sheet"></div></div>
</div>
<div class="toggle"><div class="toggleopt">One-Time</div><div class="toggleopt on">Subscribe & Save</div></div>
<div class="sec">
<div class="seclabel">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#34bd4d,#18213f)"></div><div class="ptitle">Fresh Linen Detergent Sheets</div><div class="pprice">$16.99</div><div class="badgerow"><span class="badge eco">Eco</span><span class="badge save">Save 15%</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#19adde,#18213f)"></div><div class="ptitle">Unscented Dryer Sheets</div><div class="pprice">$12.99</div><div class="badgerow"><span class="badge info">Info</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#eab000,#18213f)"></div><div class="ptitle">Starter Bundle Kit</div><div class="pprice">$28.99</div><div class="badgerow"><span class="badge save">Save 20%</span></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #eeeeee; color: #555555;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #fafafa; color: #121212;
border: 1px solid #c0c0c0; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #fbcd0a; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Nunito Sans',Arial,sans-serif; background:#fafafa; color:#121212; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dedede;}
.logo{font-size:19px;font-weight:700;color:#108474;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:600;color:#555;}
.searchpill{width:200px;height:36px;border-radius:9999px;border:1px solid #dedede;background:#fff;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#7b7b7b;}
.hero{height:270px;display:flex;align-items:center;padding:0 44px;background:linear-gradient(120deg,#fafafa 55%,#c5f7f0 100%);}
.left{width:50%;}
.left h1{font-size:32px;font-weight:700;letter-spacing:-.5px;line-height:1.25;margin:0 0 14px;}
.left p{font-size:16px;color:#555;margin:0 0 18px;max-width:340px;}
.btn{display:inline-block;background:#108474;color:#fff;font-size:16px;font-weight:600;padding:12px 24px;border-radius:8px;}
.kb{width:44%;height:150px;background:#fff;border-radius:12px;padding:14px;box-shadow:0 8px 24px rgba(0,0,0,.06);display:grid;grid-template-columns:repeat(10,1fr);grid-gap:5px;}
.key{background:#eee;border-radius:4px;height:20px;}
.key.hl{background:#108474;}
.section{padding:20px 36px 0;}
.sectitle{font-size:20px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border:1px solid #dedede;border-radius:12px;overflow:hidden;}
.thumb{height:90px;background:#f2f2f2;display:grid;grid-template-columns:repeat(6,1fr);grid-gap:3px;padding:10px;}
.k2{background:#c1e6e6;border-radius:2px;height:12px;}
.cbody{padding:10px 12px;}
.ptitle{font-size:14px;font-weight:600;}
.pprice{font-size:14px;font-weight:700;margin-top:4px;}
.pprice.sale{color:#fbcd0a;}
</style>
<div class="nav">
<div class="logo">Womier</div>
<div class="navlinks"><div>Keyboards</div><div>Switches</div><div>Keycaps</div></div>
<div class="searchpill">Search products...</div>
</div>
<div class="hero">
<div class="left">
<h1>Type Fast. Feel Every Keystroke.</h1>
<p>Hot-swappable mechanical keyboards built for gamers and typists alike.</p>
<div class="btn">Shop Keyboards</div>
</div>
<div class="kb">
<div class="key"></div><div class="key"></div><div class="key hl"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
<div class="key"></div><div class="key"></div><div class="key"></div><div class="key hl"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
</div>
</div>
<div class="section">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div></div><div class="cbody"><div class="ptitle">Womier K87 Pro</div><div class="pprice sale">$59</div></div></div>
<div class="card"><div class="thumb"><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div></div><div class="cbody"><div class="ptitle">Womier SK75</div><div class="pprice">$79</div></div></div>
<div class="card"><div class="thumb"><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div><div class="k2"></div></div><div class="cbody"><div class="ptitle">Womier K61</div><div class="pprice">$49</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f3e9; color: #1c1c14;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f3e9; color: #1c1c14;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.35; margin: 0; color: #1c1c14; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5a5a48; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #537353; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f7f3e9; color: #537353;
border: 1px solid #537353; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #faf7f0; color: #1c1c14;
border: 1px solid #c0bdb4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a5a48; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #537353; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Courier New', 'Special Elite', monospace; background:#f7f3e9; color:#2e2e20; }
*{box-sizing:border-box;}
.util{height:36px;background:#1c1c14;color:#faf7f0;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:11px;letter-spacing:0.5px;}
.nav{height:60px;background:#537353;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:19px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0.5px;}
.navlinks{display:flex;gap:18px;font-size:13px;font-weight:700;color:#fff;text-transform:uppercase;}
.hero{height:200px;background:#1c1c14;display:flex;align-items:center;padding:0 30px;color:#fff;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#3d5a3d,#1c1c14 70%);opacity:0.6;}
.herotext{position:relative;max-width:440px;}
.headline{font-size:26px;font-weight:400;letter-spacing:0.5px;margin-bottom:8px;}
.btn{display:inline-block;background:#537353;color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:11px 22px;border-radius:4px;}
.sec{padding:16px 30px;}
.sectitle{font-size:20px;margin-bottom:14px;}
.grid{display:flex;gap:12px;}
.card{width:210px;background:#faf7f0;border:1px solid #c8c4b0;border-radius:4px;padding:10px;}
.thumb{height:105px;border-radius:2px;position:relative;}
.era{position:absolute;top:6px;left:6px;background:#537353;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 7px;border-radius:4px;}
.cond{position:absolute;bottom:6px;left:6px;background:#ede9da;color:#5a5a48;font-size:10px;font-weight:600;text-transform:uppercase;padding:2px 7px;border-radius:4px;border:1px solid #c8c4b0;}
.title{font-family:'Special Elite','Courier New',monospace;font-size:15px;margin-top:8px;}
.code{font-size:11px;color:#5a5a48;background:#ede9da;display:inline-block;padding:1px 6px;border-radius:4px;margin-top:4px;}
.price{font-family:Georgia,serif;font-size:20px;margin-top:6px;}
</style>
<div class="util">FREE APPRAISAL ON PROVENANCE ITEMS | ACCOUNT CART (0)</div>
<div class="nav">
<div class="logo">Military Collectibles Shop</div>
<div class="navlinks"><div>Medals</div><div>Uniforms</div><div>Documents</div><div>Firearms Relics</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="headline">Authenticated history, catalogued with care.</div>
<div class="btn">Browse the Archive</div>
</div>
</div>
<div class="sec">
<div class="sectitle">Featured Acquisitions</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#8da88d,#3d5a3d)"><div class="era">WWII</div><div class="cond">Very Good</div></div><div class="title">Bronze Star Medal, 1944</div><div class="code">LOT-2281</div><div class="price">$340</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#537353,#1c1c14)"><div class="era">Cold War</div><div class="cond">Excellent</div></div><div class="title">Field Dispatch Case</div><div class="code">LOT-2295</div><div class="price">$185</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#3d5a3d,#8da88d)"><div class="era">Korean War</div><div class="cond">Mint</div></div><div class="title">Officer's Wool Overcoat</div><div class="code">LOT-2308</div><div class="price">$425</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff3d00; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff3d00; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff3d00; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff3d00; color: #f5f5f5;
border: 1px solid #fd5a27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #e44327; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:'Pretendard Std Variable',Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #e4e4e4; }
.brand { font-size:18px; font-weight:700; margin:0; }
.search { background:#f5f5f5; border-radius:40px; padding:8px 15px 8px 32px; font-size:15px; font-weight:500;
color:#000; width:300px; }
.icon { width:36px; height:36px; border-radius:8px; border:1px solid #e4e4e4; }
.hero { padding:22px 40px 16px; }
.hero h1 { font-size:20px; font-weight:700; margin:0 0 14px; }
.cats { display:flex; gap:10px; }
.cat { background:#ffffff; border:1px solid #e4e4e4; border-radius:8px; height:32px; padding:0 16px;
font-size:14px; display:flex; align-items:center; color:#000; }
.cat.on { background:#000; color:#fff; border-color:#000; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:14px 40px 20px; }
.tile { border-radius:6px; overflow:hidden; }
.photo { height:100px; border-radius:6px; }
.p1 { background:linear-gradient(135deg,#ffe8d6,#ff3d0033); }
.p2 { background:linear-gradient(135deg,#dceeea,#26a86233); }
.p3 { background:linear-gradient(135deg,#f0e6ff,#640faf22); }
.p4 { background:linear-gradient(135deg,#fff0f0,#fc555522); }
.tile .t { font-size:14px; font-weight:700; margin-top:8px; }
.tile .m { font-size:12px; color:#666666; margin-top:2px; }
.tile .star { font-size:12px; color:#ff3d00; font-weight:700; margin-top:4px; }
.reserve { background:#002d4e; margin:0 40px; border-radius:8px; padding:22px 26px; display:flex;
justify-content:space-between; align-items:center; }
.reserve h2 { color:#fff; font-size:16px; font-weight:700; margin:0; }
.reserve p { color:#a8c2d4; font-size:13px; margin:4px 0 0; }
.reserve button { background:#ff3d00; color:#fff; border:none; border-radius:15px; padding:10.5px 24px; font-size:16px; }
</style></head>
<body>
<nav>
<p class="brand">CatchTable</p>
<div class="search">Where do you want to eat?</div>
<div class="icon"></div>
</nav>
<section class="hero">
<h1>Tonight's best tables</h1>
<div class="cats">
<span class="cat on">All</span><span class="cat">Korean BBQ</span><span class="cat">Omakase</span>
<span class="cat">Italian</span><span class="cat">Cafe</span>
</div>
</section>
<section class="grid">
<div class="tile"><div class="photo p1"></div><div class="t">Hanwoo House</div><div class="m">Gangnam · KRW $$$</div><div class="star">★ 4.8 (2,140)</div></div>
<div class="tile"><div class="photo p2"></div><div class="t">Omakase Sui</div><div class="m">Seongsu · KRW $$$$</div><div class="star">★ 4.9 (860)</div></div>
<div class="tile"><div class="photo p3"></div><div class="t">Osteria Blu</div><div class="m">Itaewon · KRW $$$</div><div class="star">★ 4.7 (1,320)</div></div>
<div class="tile"><div class="photo p4"></div><div class="t">Morning Bloom Cafe</div><div class="m">Yeonnam · KRW $$</div><div class="star">★ 4.6 (940)</div></div>
</section>
<section class="reserve">
<div><h2>Own a restaurant?</h2><p>Manage reservations, waitlists, and orders in one place.</p></div>
<button>See merchant plans</button>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #191919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #191919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #191919; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 600; line-height: 1.43; letter-spacing: 0.5px; background: #e32c2b; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 600; line-height: 1.43; letter-spacing: 0.5px; background: #ffffff; color: #191919;
border: 1px solid #e32c2b; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.625; background: #ffffff; color: #262626;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #0a3526; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#262626; font-family:'Courier New', 'Lucida Sans Typewriter', monospace; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dddddd;}
.logo{font-size:20px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.navlinks{display:flex;gap:24px;font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:0.5px;color:#262626;}
.navlinks span:first-child{color:#e32c2b;}
.hero{height:236px;display:flex;background:#ffffff;border-bottom:1px solid #ededed;}
.htext{width:52%;padding:0 36px;display:flex;flex-direction:column;justify-content:center;}
.rx{font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#777777;margin-bottom:12px;}
.rx:before{content:'Rx ';color:#e32c2b;}
.htext h1{font-size:32px;font-weight:700;margin:0 0 14px;line-height:1.25;}
.htext p{font-size:13px;color:#262626;margin:0 0 20px;max-width:340px;line-height:1.5;}
.cta{display:inline-block;width:fit-content;background:#e32c2b;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:13px 26px;border-radius:4px;}
.himg{width:48%;background:#f7f7f7;position:relative;border-left:1px solid #ededed;}
.vial{position:absolute;left:50%;top:30px;transform:translateX(-50%);width:52px;height:150px;background:#ffffff;border:1px solid #9fa0a5;border-radius:6px 6px 3px 3px;}
.vial:before{content:'';position:absolute;left:0;right:0;bottom:0;height:60px;background:#e32c2b;border-radius:0 0 3px 3px;}
.vial:after{content:'01% ACTIVE';position:absolute;left:0;right:0;top:70px;text-align:center;font-size:8px;font-weight:700;letter-spacing:0.5px;color:#191919;}
.badgestack{position:absolute;right:40px;top:24px;display:flex;flex-direction:column;gap:8px;}
.badge{font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#fff;padding:4px 10px;border-radius:4px;}
.b1{background:#0a3526;}
.b2{background:#1990c6;}
.spectable{display:flex;gap:1px;background:#dddddd;margin:16px 36px 0;}
.speccell{flex:1;background:#f7f7f7;text-align:center;padding:10px;}
.slabel{font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#777777;}
.sval{font-size:13px;margin-top:3px;}
.grid{display:flex;gap:14px;padding:16px 36px 0;}
.card{width:158px;border:1px solid #dddddd;border-radius:8px;padding:10px;}
.thumb{height:96px;border-radius:4px;margin-bottom:8px;background:#f7f7f7;position:relative;}
.thumb .cap{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:34px;height:16px;background:#191919;border-radius:2px;}
.ptitle{font-size:11px;font-weight:700;line-height:1.3;height:28px;overflow:hidden;text-transform:uppercase;letter-spacing:0.3px;}
.pprice{font-size:12px;font-weight:700;color:#e32c2b;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:10px;color:#cccccc;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Medik8</div>
<div class="navlinks"><span>Vitamin A</span><span>Vitamin C</span><span>Bestsellers</span><span>Skin Diagnostic</span></div>
</div>
<div class="hero">
<div class="htext">
<div class="rx">Prescription Skincare Science</div>
<h1>The formula speaks for itself.</h1>
<p>Clinically-dosed actives, engineered for results — no fragrance, no filler, no noise.</p>
<div class="cta">Take the Diagnostic</div>
</div>
<div class="himg">
<div class="vial"></div>
<div class="badgestack"><span class="badge b1">Sustainable Refill</span><span class="badge b2">Bestseller</span></div>
</div>
</div>
<div class="spectable">
<div class="speccell"><div class="slabel">Retinol</div><div class="sval">0.3–3%</div></div>
<div class="speccell"><div class="slabel">pH Level</div><div class="sval">5.5</div></div>
<div class="speccell"><div class="slabel">Clinical Trials</div><div class="sval">12-wk</div></div>
<div class="speccell"><div class="slabel">Fragrance</div><div class="sval">None</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="cap"></div></div><div class="ptitle">Crystal Retinal 6</div><div class="pprice">$74.00</div></div>
<div class="card"><div class="thumb"><div class="cap"></div></div><div class="ptitle">C-Tetra Serum</div><div class="pprice">$59.00</div></div>
<div class="card"><div class="thumb"><div class="cap"></div></div><div class="ptitle">Advanced Night Eye</div><div class="pprice">$49.00</div></div>
<div class="card"><div class="thumb"><div class="cap"></div></div><div class="ptitle">Press & Glow</div><div class="pprice">$45.00</div></div>
</div>
<div class="footer"><span>© Clinical Skincare</span><span>Diagnostic · Ingredients · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0d253d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0d253d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 300; line-height: 1.1; letter-spacing: -0.22px; margin: 0; color: #0d253d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.4; letter-spacing: -0.42px; margin: 0; color: #64748d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.0; background: #533afd; color: #ffffff;
border: none; border-radius: 9999px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.0; background: #ffffff; color: #533afd;
border: 1px solid #533afd; border-radius: 9999px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.4; background: #ffffff; color: #0d253d;
border: 1px solid #c2c8ce; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #64748d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 400; line-height: 1.15; letter-spacing: 0.1px; background: #b9b9f9; color: #4434d4;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0d253d; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight:300; }
* { box-sizing:border-box; }
.tnum { font-variant-numeric: tabular-nums; }
.meshwrap { position:relative; height:280px; overflow:hidden;
background:
radial-gradient(ellipse 500px 260px at 8% 0%, #f5e9d4 0%, transparent 55%),
radial-gradient(ellipse 480px 260px at 35% -10%, #ffb199 0%, transparent 55%),
radial-gradient(ellipse 520px 280px at 62% 5%, #c9b4fa 0%, transparent 55%),
radial-gradient(ellipse 520px 300px at 88% -5%, #533afd 0%, transparent 60%),
radial-gradient(ellipse 400px 260px at 100% 30%, #ea2261 0%, transparent 55%); }
nav { position:relative; z-index:2; height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:400; font-size:15px; }
.navlinks { display:flex; gap:20px; font-size:13.5px; font-weight:400; }
.pillbtn { background:#533afd; color:#fff; border:none; border-radius:9999px; padding:8px 16px; font-size:14px; font-weight:400; }
.herotext { position:relative; z-index:2; padding:14px 32px 0; }
.herotext h1 { font-size:48px; font-weight:300; letter-spacing:-.96px; line-height:1.05; margin:0 0 12px; max-width:480px; }
.herotext p { font-size:15px; font-weight:300; margin:0 0 16px; max-width:400px; color:#273951; }
.dashwrap { margin:-40px 32px 20px; position:relative; z-index:3; background:#fff; border-radius:16px;
box-shadow:rgba(0,55,112,.08) 0 8px 24px, rgba(0,55,112,.04) 0 2px 6px; padding:16px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.dpanel { background:#1c1e54; border-radius:8px; padding:10px; }
.dpanel .lbl { color:rgba(255,255,255,.6); font-size:9.5px; margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; }
.dpanel .val { color:#fff; font-size:20px; font-weight:400; letter-spacing:-.42px; }
.dpanel.table .row { display:flex; justify-content:space-between; font-size:10.5px; color:rgba(255,255,255,.8); padding:3px 0; }
.dpanel.chart .bars { display:flex; align-items:flex-end; gap:4px; height:40px; margin-top:4px; }
.dpanel.chart .bar { flex:1; background:#665efd; border-radius:2px 2px 0 0; }
.cream { background:#f5e9d4; border-radius:12px; margin:0 32px 20px; padding:18px 24px; }
.cream h3 { font-size:22px; font-weight:300; margin:0 0 4px; }
.cream p { font-size:13px; color:#273951; margin:0; }
footer { display:flex; justify-content:space-between; padding:12px 32px; font-size:11px; color:#64748d; border-top:1px solid #e3e8ee; }
</style></head>
<body>
<div class="meshwrap">
<nav>
<div class="brand">Stripe</div>
<div class="navlinks"><span>Payments</span><span>Billing</span><span>Connect</span><span>Pricing</span></div>
<button class="pillbtn">Sign in</button>
</nav>
<div class="herotext">
<h1>Financial infrastructure<br>to grow your revenue</h1>
<p>Join millions of companies using Stripe to accept payments online and in person.</p>
</div>
</div>
<div class="dashwrap">
<div class="dpanel">
<div class="lbl">Balance</div>
<div class="val tnum">$84,204.29</div>
</div>
<div class="dpanel table">
<div class="lbl">Recent payments</div>
<div class="row"><span>Acme Inc.</span><span class="tnum">$420.00</span></div>
<div class="row"><span>Globex Co.</span><span class="tnum">$1,204.50</span></div>
<div class="row"><span>Initech</span><span class="tnum">$89.90</span></div>
</div>
<div class="dpanel chart">
<div class="lbl">Volume</div>
<div class="bars">
<div class="bar" style="height:40%"></div><div class="bar" style="height:65%"></div>
<div class="bar" style="height:50%"></div><div class="bar" style="height:80%"></div>
<div class="bar" style="height:100%"></div><div class="bar" style="height:70%"></div>
</div>
</div>
</div>
<div class="cream">
<h3>Built for developers</h3>
<p>Sohne-thin type, tabular figures, and composited dashboards — the brand's quiet financial signature.</p>
</div>
<footer>
<span>© Stripe</span>
<span>Stripe · Docs · Pricing · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 300; line-height: 1.25; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.08em; background: #ce051d; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.08em; background: transparent; color: #212121;
border: 1px solid #ce051d; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #212121;
border: 1px solid #c8c8c8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.1em; background: #ce051d; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'HelveticaNowPro',Helvetica,Arial,sans-serif; color:#424242; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e0e0e0;}
.logo{font-family:'Canela-Light',serif;font-weight:300;font-size:20px;color:#212121;}
.navlinks{display:flex;gap:24px;font-size:13px;color:#212121;}
.navlinks span:first-child{border-bottom:1px solid #212121;padding-bottom:20px;}
.util{font-size:16px;color:#212121;}
.hero{height:280px;background:#f7f5f2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.herotext h1{font-family:'Canela-Light',serif;font-weight:300;font-size:44px;color:#212121;margin:0 0 18px;}
.herocta{background:#ce051d;color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:14px 28px;}
.grid{display:flex;gap:24px;padding:24px 36px 0;}
.card{width:200px;}
.thumb{height:150px;background:#e7e4da;margin-bottom:8px;position:relative;}
.edbadge{position:absolute;bottom:8px;left:8px;background:#ce051d;color:#fff;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;}
.pname{font-family:'Canela-Light',serif;font-weight:300;font-size:16px;color:#212121;margin-bottom:2px;}
.pmeta{font-size:12px;color:#676986;margin-bottom:4px;}
.pprice{font-size:14px;color:#212121;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#272d45;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.footer span{color:#b3b4c3;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Sonic Editions</div>
<div class="navlinks"><span>Photography</span><span>Photographers</span><span>Editions</span><span>Frame Shop</span></div>
<div class="util">⚲ ◍</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Fine-art photography, in limited edition.</h1>
<div class="herocta">Shop The Collection</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#272d45,#e7e4da)"><span class="edbadge">Edition of 150</span></div><div class="pname">Coastal Light</div><div class="pmeta">Sarah Vance</div><div class="pprice">from $195</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ce051d,#e7e4da)"><span class="edbadge">Sold Out</span></div><div class="pname">Desert Vantage</div><div class="pmeta">Marcus Oduya</div><div class="pprice">from $275</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0e7a82,#e7e4da)"><span class="edbadge">Edition of 75</span></div><div class="pname">Midnight Harbor</div><div class="pmeta">Elin Kroft</div><div class="pprice">from $225</div></div>
</div>
<div class="footer"><span>© Sonic Editions</span><span>Photographers · Care Guide</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #009fd9; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #009fd9; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #009fd9; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #009fd9; color: #f5f5f5;
border: 1px solid #27addd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e96dd; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#2f3033; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.shell { display:flex; height:640px; }
.side { width:210px; flex-shrink:0; background:#fafbfb; border-right:1px solid #e9eced;
padding:22px 18px; display:flex; flex-direction:column; gap:22px; }
.side .brand { font-size:16px; font-weight:700; letter-spacing:-0.2px; }
.side .brand span { color:#009fd9; }
.side nav { display:flex; flex-direction:column; gap:2px; }
.side nav a { font-size:13px; color:#676d73; padding:7px 10px; border-radius:4px; }
.side nav a.active { background:#e9eced; color:#2f3033; font-weight:600; }
.side .grp { font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:#8b95a1;
margin:6px 0 -8px 10px; font-weight:700; }
.main { flex:1; padding:34px 44px; overflow:hidden; }
.crumb { font-size:11px; color:#676d73; margin-bottom:10px; }
h1 { font-size:32px; font-weight:700; margin:0 0 8px; letter-spacing:-0.4px; }
.lead { font-size:15px; color:#676d73; margin:0 0 26px; max-width:520px; line-height:1.5; }
.row { display:flex; gap:28px; align-items:flex-start; }
.spec-card { background:#ffffff; border:1px solid #e9eced; border-radius:4px; padding:26px;
display:flex; flex-direction:column; align-items:center; gap:16px; width:300px; }
.spec-card .label { font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:#8b95a1; font-weight:700; align-self:flex-start; }
.doc-btn { background:#07344a; color:#7cdcfd; border:none; border-radius:9999px; padding:0 24px;
height:48px; font-size:16px; font-weight:700; white-space:nowrap; }
.doc-btn.disabled { background:#f5f6f6; color:#b9bbbf; }
.swatchrow { display:flex; gap:10px; }
.sw { width:34px; height:34px; border-radius:4px; }
.list { flex:1; display:flex; flex-direction:column; }
.list-item { border-top:1px solid #e9eced; padding:22px 0; display:flex; justify-content:space-between; align-items:center; }
.list-item:first-child { border-top:none; }
.list-item .t { font-size:16px; font-weight:400; }
.list-item .meta { font-size:13px; color:#676d73; }
.search { margin-top:24px; display:flex; align-items:center; gap:8px; background:#fafbfb;
border:1px solid #e9eced; border-radius:4px; height:38px; padding:9px 16px 9px 12px; width:280px; }
.search .icon { width:14px; height:14px; border:1.5px solid #8b95a1; border-radius:50%; position:relative; }
.search .icon::after { content:''; position:absolute; width:6px; height:1.5px; background:#8b95a1; right:-5px; bottom:1px; transform:rotate(45deg); }
.search span { font-size:14px; color:#8b95a1; }
</style></head>
<body>
<div class="shell">
<div class="side">
<div class="brand">Thumbtack Thumbprint<span>.</span></div>
<nav>
<div class="grp">Foundations</div>
<a href="#">Colors</a>
<a href="#">Typography</a>
<a href="#">Spacing</a>
<div class="grp">Components</div>
<a href="#" class="active">Button</a>
<a href="#">Text Field</a>
<a href="#">List</a>
<a href="#">Badge</a>
</nav>
<div class="search">
<div class="icon"></div>
<span>Search docs</span>
</div>
</div>
<div class="main">
<div class="crumb">Components / Button / v2 / React</div>
<h1>Button</h1>
<p class="lead">A single, consistent action control used across documentation and product surfaces. Default and disabled states shown below.</p>
<div class="row">
<div class="spec-card">
<span class="label">Default</span>
<button class="doc-btn">Get started</button>
</div>
<div class="spec-card">
<span class="label">Disabled</span>
<button class="doc-btn disabled">Get started</button>
</div>
<div class="spec-card">
<span class="label">Palette</span>
<div class="swatchrow">
<div class="sw" style="background:#009fd9"></div>
<div class="sw" style="background:#2f3033"></div>
<div class="sw" style="background:#676d73"></div>
<div class="sw" style="background:#e9eced;border:1px solid #e9eced"></div>
</div>
</div>
</div>
<div class="list">
<div class="list-item"><span class="t">Radius</span><span class="meta">9999px pill</span></div>
<div class="list-item"><span class="t">Padding</span><span class="meta">0px 24px</span></div>
<div class="list-item"><span class="t">Height</span><span class="meta">48px</span></div>
<div class="list-item"><span class="t">Font</span><span class="meta">16px / 700 / Rise</span></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #272d45;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #272d45;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; letter-spacing: -0.1px; margin: 0; color: #272d45; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #9a9db1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ff5e03; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #272d45;
border: 1px solid #ff5e03; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #272d45;
border: 1px solid #c9cad0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9db1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #0e7a82; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif; color:#676986; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e5e5eb;}
.logo{font-size:19px;font-weight:700;color:#272d45;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.hero{height:220px;background:#272d45;display:flex;align-items:center;padding:0 32px;gap:30px;}
.herotxt{max-width:400px;}
.h1{font-size:42px;font-weight:700;letter-spacing:-0.5px;color:#fff;margin:0 0 12px;line-height:1.1;}
.sub{font-size:16px;color:#fff;opacity:0.85;line-height:1.5;margin:0 0 18px;}
.btn{display:inline-block;background:#ff5e03;color:#fff;font-size:16px;font-weight:600;letter-spacing:0.2px;padding:14px 28px;border-radius:9999px;width:fit-content;}
.jarimg{width:150px;height:190px;border-radius:16px;background:linear-gradient(160deg,#ffcfb0,#ff5e03 60%,#272d45);}
.togglerow{display:flex;justify-content:center;padding:16px 32px 0;gap:0;}
.toggle{display:flex;background:#f4f4f6;border-radius:9999px;height:40px;padding:4px;}
.tseg{padding:6px 20px;font-size:14px;font-weight:600;border-radius:9999px;}
.tseg.active{background:#ff5e03;color:#fff;}
.tseg.inactive{color:#272d45;}
.grid{display:flex;gap:16px;padding:16px 32px 0;}
.card{width:210px;background:#f7f7f8;border-radius:12px;padding:16px;}
.thumb{height:110px;border-radius:8px;background:linear-gradient(135deg,#ff5e03,#0e7a82);position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#0e7a82;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:4px 8px;border-radius:4px;}
.ctitle{font-size:16px;font-weight:600;margin:10px 0 2px;color:#272d45;}
.cprice{font-size:22px;font-weight:700;color:#272d45;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Momentous</div>
<div class="navlinks"><span>Protein</span><span>Creatine</span><span>Sleep</span><span>Clinical Studies</span></div>
</div>
<div class="hero">
<div class="herotxt">
<div class="h1">Performance, verified.</div>
<p class="sub">Clinically studied formulas, tested for what athletes actually put on the line.</p>
<div class="btn">Add to Cart</div>
</div>
<div class="jarimg"></div>
</div>
<div class="togglerow"><div class="toggle"><div class="tseg active">Subscribe & Save</div><div class="tseg inactive">One-Time</div></div></div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge">NSF Certified</span></div><div class="ctitle">Whey Protein Isolate</div><div class="cprice">$65</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Creatine Monohydrate</div><div class="cprice">$39</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Sleep Pack</div><div class="cprice">$45</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #002991; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #002991; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8799c8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #60cdff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #002991; color: #60cdff;
border: 1px solid #60cdff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #002991; color: #f5f5f5;
border: 1px solid #274aa1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8799c8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0f43a3; color: #60cdff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; background:#000000; }
.brand { font-size:17px; font-weight:900; color:#ffffff; margin:0; letter-spacing:-0.3px; }
.navtabs { display:flex; gap:8px; }
.navtab { font-size:14px; padding:0 16px; height:34px; display:flex; align-items:center; border-radius:104px; color:#ffffff; }
.navtab.active { background:#ffffff; color:#000000; }
.btn-white { background:#ffffff; color:#000000; border:1px solid #ffffff; border-radius:1000px;
padding:8px 20px; font-size:13px; font-weight:900; }
.hero { background:#60cdff; padding:36px 40px 30px; }
.hero h1 { font-size:52px; font-weight:900; letter-spacing:-1.5px; line-height:1.05; margin:0 0 14px; color:#000000; max-width:640px; }
.row { display:flex; gap:12px; }
.btn-black { background:#000000; color:#ffffff; border-radius:1000px; padding:12px 26px; font-size:14px; font-weight:900; }
.btn-outline-dark { background:transparent; color:#000000; border:1px solid #000000; border-radius:1000px; padding:11px 26px; font-size:14px; font-weight:900; }
.midnight { background:#002991; padding:26px 40px; display:flex; gap:20px; }
.midnight h2 { font-size:26px; font-weight:900; color:#ffffff; margin:0 0 10px; letter-spacing:-0.5px; }
.btn-outline-light { background:transparent; color:#ffffff; border:1px solid #ffffff; border-radius:1000px; padding:10px 22px; font-size:12px; font-weight:900; }
.midnight .col { flex:1; }
.cards { padding:24px 40px; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.card { background:#ffffff; border-radius:16px; padding:18px; box-shadow:rgba(0,0,0,0.08) 0px 24px 48px 0px; }
.card h3 { font-size:20px; font-weight:900; margin:0 0 6px; color:#000000; }
.card p { font-size:13px; color:#686a6d; margin:0; line-height:1.4; }
.tag { display:inline-block; background:#f0f2f9; color:#002991; border-radius:4px; padding:2px 8px; font-size:11px; margin-bottom:8px; }
</style></head>
<body>
<nav>
<p class="brand">PayPal</p>
<div class="navtabs">
<span class="navtab active">Personal</span>
<span class="navtab">Business</span>
</div>
<button class="btn-white">Sign Up</button>
</nav>
<section class="hero">
<h1>Pay, send, and save smarter</h1>
<div class="row">
<button class="btn-black">Sign Up</button>
<button class="btn-outline-dark">Learn More</button>
</div>
</section>
<section class="midnight">
<div class="col">
<h2>Pay now or pay over time. It's your choice.</h2>
<button class="btn-outline-light">Learn About Pay in 4</button>
</div>
<div class="col">
<h2>The tools your business runs on. In one place.</h2>
<button class="btn-outline-light">Get Paid</button>
</div>
</section>
<section class="cards">
<div class="card">
<span class="tag">Checkout</span>
<h3>Take your business further, faster</h3>
<p>Accept payments customers already trust, with one recognizable button at checkout.</p>
</div>
<div class="card">
<span class="tag">Security</span>
<h3>See How You're Safe</h3>
<p>Your card details stay hidden from every merchant — fraud protection built in.</p>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0052cc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0052cc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87ace3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0052cc; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0052cc; color: #f5f5f5;
border: 1px solid #276cd3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87ace3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #296ed4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F7F8F9; color:#172B4D; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.top { background:#fff; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #091E4224; }
.breadcrumb { font-size:13px; color:#626F86; }
.breadcrumb b { color:#172B4D; }
.create { background:#0052CC; color:#fff; font-size:13px; font-weight:600; padding:8px 16px; border-radius:4px; }
.board { display:flex; gap:12px; padding:16px 24px; }
.col { width:225px; flex:0 0 auto; }
.colhead { font-size:11px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:#44546F; margin-bottom:10px; display:flex; justify-content:space-between; }
.card { background:#fff; border:1px solid #091E420F; border-radius:8px; padding:12px; margin-bottom:8px; box-shadow:0 1px 2px rgba(9,30,66,0.08); }
.csum { font-size:13px; font-weight:500; line-height:1.35; margin-bottom:8px; }
.labels { display:flex; gap:5px; margin-bottom:8px; flex-wrap:wrap; }
.lab { font-size:10px; font-weight:600; padding:2px 6px; border-radius:3px; }
.footer { display:flex; align-items:center; justify-content:space-between; }
.keyrow { display:flex; align-items:center; gap:6px; font-size:11px; color:#44546F; }
.typedot { width:8px; height:8px; border-radius:2px; display:inline-block; }
.avatar { width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,#8fb8f6,#0052CC); }
.pts { font-size:11px; font-weight:700; color:#44546F; margin-right:4px; }
.lozenge { font-size:10px; font-weight:700; padding:3px 8px; border-radius:3px; text-transform:uppercase; letter-spacing:0.03em; }
</style></head>
<body>
<div class="top">
<div class="breadcrumb">Projects / Mobile Platform / <b>Jira (iOS) Board</b></div>
<div class="create">+ Create</div>
</div>
<div class="board">
<div class="col">
<div class="colhead">To Do <span>4</span></div>
<div class="card"><div class="labels"><span class="lab" style="background:#DCDFE4;color:#44546F;">design</span></div>
<div class="csum">Redesign onboarding flow for new sign-ups</div>
<div class="footer"><span class="keyrow"><span class="typedot" style="background:#36B37E;"></span>MOB-388</span><span class="avatar"></span></div></div>
<div class="card"><div class="labels"><span class="lab" style="background:#F0E6FF;color:#6A3DAA;">epic</span></div>
<div class="csum">Payments SDK v2 migration</div>
<div class="footer"><span class="keyrow"><span class="typedot" style="background:#6A3DAA;"></span>MOB-401</span><span class="avatar"></span></div></div>
</div>
<div class="col">
<div class="colhead">In Progress <span>3</span></div>
<div class="card"><div class="lozenge" style="background:#E9F2FF;color:#0055CC;margin-bottom:8px;display:inline-block;">In Progress</div>
<div class="csum">Fix crash on push-notification tap (iOS 18)</div>
<div class="labels"><span class="lab" style="background:#FFEBE6;color:#AE2A19;">bug</span></div>
<div class="footer" style="margin-top:8px;"><span class="keyrow"><span class="typedot" style="background:#E2483D;"></span>MOB-372</span>
<span><span class="pts">5</span><span class="avatar"></span></span></div></div>
<div class="card"><div class="csum">Refactor auth token refresh logic</div>
<div class="footer"><span class="keyrow"><span class="typedot" style="background:#0052CC;"></span>MOB-390</span><span class="avatar"></span></div></div>
</div>
<div class="col">
<div class="colhead">In Review <span>2</span></div>
<div class="card"><div class="csum">Add dark-mode support to settings screen</div>
<div class="labels"><span class="lab" style="background:#DCDFE4;color:#44546F;">ui</span><span class="lab" style="background:#FFF7D6;color:#7F5F01;">a11y</span></div>
<div class="footer" style="margin-top:8px;"><span class="keyrow"><span class="typedot" style="background:#0052CC;"></span>MOB-355</span><span class="avatar"></span></div></div>
</div>
<div class="col">
<div class="colhead">Done <span>12</span></div>
<div class="card"><div class="lozenge" style="background:#DCFFF1;color:#216E4E;margin-bottom:8px;display:inline-block;">Done</div>
<div class="csum">Update Story point estimates for Sprint 24</div>
<div class="footer"><span class="keyrow"><span class="typedot" style="background:#36B37E;"></span>MOB-330</span><span class="avatar"></span></div></div>
<div class="card"><div class="csum">Ship release notes for v4.2.0</div>
<div class="footer"><span class="keyrow"><span class="typedot" style="background:#36B37E;"></span>MOB-321</span><span class="avatar"></span></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFF0EB; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFF0EB; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0em; margin: 0; color: #706a68; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.01em; background: #FFDDD1; color: #000000;
border: none; border-radius: 12px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: transparent; color: #000000;
border: 1px solid #FFDDD1; border-radius: 12px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #FFF0EB; color: #111111;
border: 1px solid #c4b8b4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #706a68; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #ffede7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #F9FAFB; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
nav { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 36px; background: #ffffff; }
.brand { font-size: 19px; font-weight: 700; color: #111827; margin: 0; font-family: Georgia, "Times New Roman", serif; }
.brand span { color: #F04E23; }
.navlinks { display: flex; gap: 26px; font-size: 13px; color: #374151; font-weight: 600; }
.cta { background: #F04E23; color: #fff; border: none; border-radius: 12px; padding: 10px 20px; font-weight: 600; font-size: 13px; }
.hero { padding: 40px 36px 0; text-align: center; }
.hero .kicker { font-size: 12px; font-weight: 600; color: #1A6BFF; letter-spacing: 0.04em; text-transform: uppercase; }
.hero h1 { font-family: Georgia, "Times New Roman", serif; font-size: 44px; font-weight: 700; color: #111827; letter-spacing: -0.02em; margin: 10px 0 12px; }
.hero p { font-size: 15px; color: #4B5563; margin: 0 auto 20px; max-width: 480px; }
.rowbtn { display: flex; gap: 10px; justify-content: center; }
.btn-c { background: #F04E23; color: #fff; border: none; border-radius: 12px; padding: 12px 22px; font-weight: 600; font-size: 14px; }
.btn-g { background: transparent; color: #374151; border: none; border-radius: 12px; padding: 12px 22px; font-weight: 600; font-size: 14px; }
.cardsrow { display: flex; gap: 18px; padding: 20px 36px 0; }
.card { flex: 1; background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); }
.card .thumb { height: 90px; border-radius: 12px; margin-bottom: 12px; }
.card h4 { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: #111827; }
.card .creator { font-size: 11px; color: #6B7280; margin-bottom: 8px; }
.card .price { font-size: 15px; font-weight: 700; color: #F04E23; }
.card .badge { display: inline-block; margin-top: 8px; background: #EEF4FF; color: #0052DB; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 8px; }
.stats { display: flex; gap: 0; margin: 24px 36px 0; border-radius: 16px; overflow: hidden; }
.stats .s { flex: 1; padding: 18px 22px; }
.stats .s.a { background: linear-gradient(135deg, #F04E23, #D43D16); color: #fff; }
.stats .s.b { background: #111827; color: #fff; }
.stats .s.c { background: #EEF4FF; color: #003EA8; }
.stats .s b { display: block; font-size: 20px; font-weight: 700; }
.stats .s span { font-size: 11px; opacity: 0.85; }
</style>
<nav>
<p class="brand">Hotmart</p>
<div class="navlinks"><span>Marketplace</span><span>Become a creator</span><span>Pricing</span></div>
<button class="cta">Start selling</button>
</nav>
<div class="hero">
<span class="kicker">Digital products, real income</span>
<h1>Turn what you know into something sold.</h1>
<p>Courses, memberships and digital products — one checkout, one dashboard, millions of buyers.</p>
<div class="rowbtn"><button class="btn-c">Create your product</button><button class="btn-g">Browse marketplace</button></div>
</div>
<div class="cardsrow">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#FF8F6E,#F04E23)"></div><h4>Photography Masterclass</h4><div class="creator">by Creator Studio</div><div class="price">$49.00</div><span class="badge">Bestseller</span></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4A88FF,#1A6BFF)"></div><h4>Business Coaching Program</h4><div class="creator">by Growth Academy</div><div class="price">$129.00</div><span class="badge">New</span></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#FFB8A3,#F96B3D)"></div><h4>Guitar for Beginners</h4><div class="creator">by Music Lab</div><div class="price">$29.00</div><span class="badge">Member area</span></div>
</div>
<div class="stats">
<div class="s a"><b>200K+ creators</b><span>Selling digital products worldwide</span></div>
<div class="s b"><b>25M+ buyers</b><span>Across 188 countries</span></div>
<div class="s c"><b>$50B+ processed</b><span>In creator sales to date</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111100;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111100;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.17; margin: 0; color: #111100; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #5c677a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #006341; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #006341;
border: 1px solid #006341; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #262626;
border: 1px solid #c4c4bf; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5c677a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #e83e8c; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'proxima-nova','Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#262626; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-size:19px;font-weight:700;color:#006341;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#262626;letter-spacing:0.3px;}
.navlinks span:first-child{border-bottom:2px solid #006341;padding-bottom:16px;}
.hero{height:200px;display:flex;padding:0 34px;align-items:center;}
.heroText{width:50%;}
.h1{font-size:27px;font-weight:700;color:#111100;line-height:1.2;margin:0 0 10px;}
.sub{font-size:14px;color:#5c677a;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#006341;color:#fff;font-size:15px;font-weight:600;padding:11px 24px;border-radius:4px;width:fit-content;}
.heroImg{width:50%;height:140px;background:#f4f4f4;border-radius:4px;position:relative;}
.dockbody{position:absolute;width:220px;height:36px;background:#5c677a;border-radius:4px;top:52px;left:30px;}
.led{position:absolute;width:8px;height:8px;border-radius:50%;background:#006341;top:66px;left:238px;}
.cable{position:absolute;width:60px;height:6px;background:#88888d;border-radius:3px;top:80px;left:250px;}
.specstrip{display:flex;gap:1px;background:#dedede;margin:0 32px;}
.spec{flex:1;background:#f7f7f7;text-align:center;padding:10px;}
.speclabel{font-size:10px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;color:#88888d;}
.specval{font-size:14px;color:#111100;margin-top:2px;font-weight:600;}
.sec{padding:16px 32px 0;}
.secTitle{font-size:16px;font-weight:600;color:#111100;margin-bottom:12px;}
.grid{display:flex;gap:16px;}
.card{width:198px;border:1px solid #dedede;border-radius:4px;padding:12px;}
.thumb{height:76px;border-radius:3px;margin-bottom:8px;}
.ptitle{font-size:13px;font-weight:600;line-height:1.3;height:34px;overflow:hidden;color:#111100;}
.pprice{font-size:14px;font-weight:700;color:#111100;margin-top:4px;}
.sale{color:#e83e8c;font-size:10px;font-weight:700;text-transform:uppercase;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Plugable Docking 2</div>
<div class="navlinks"><span>Docking Stations</span><span>Hubs</span><span>Adapters</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">One cable. Every port you own.</div>
<div class="sub">Docking stations engineered for dual 4K, gigabit ethernet, and all-day charging.</div>
<div class="cta">Compare Docks</div>
</div>
<div class="heroImg"><div class="dockbody"></div><div class="led"></div><div class="cable"></div></div>
</div>
<div class="specstrip">
<div class="spec"><div class="speclabel">Displays</div><div class="specval">Dual 4K@60Hz</div></div>
<div class="spec"><div class="speclabel">Power Delivery</div><div class="specval">100W</div></div>
<div class="spec"><div class="speclabel">Ports</div><div class="specval">14 Total</div></div>
<div class="spec"><div class="speclabel">Ethernet</div><div class="specval">Gigabit</div></div>
</div>
<div class="sec">
<div class="secTitle">Docking Station Lineup</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#006341,#5c677a);"></div><div class="ptitle">UD-6950 Triple Display Dock</div><div class="pprice">$199.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#5c677a,#006341);"></div><div class="sale">Sale</div><div class="ptitle">UD-3900 Dual HDMI Dock</div><div class="pprice">$119.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#006341,#e83e8c);"></div><div class="ptitle">USBC-6950PDZ Thunderbolt Dock</div><div class="pprice">$239.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#5c677a,#88888d);"></div><div class="ptitle">USB-C 7-in-1 Mini Dock</div><div class="pprice">$44.95</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #080707; color: #fafafa;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #080707; color: #fafafa;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.27; letter-spacing: -0.3px; margin: 0; color: #fafafa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #8a8a8a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #17b26a; color: #ffffff;
border: none; border-radius: 4px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: transparent; color: #fafafa;
border: 1px solid #17b26a; border-radius: 4px;
padding: 14px 30px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #161515; color: #fafafa;
border: 1px solid #444444; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.8px; background: #edfcf3; color: #0b9055;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#080707; color:#fafafa; box-sizing:border-box;
font-family:'Inter', 'Roboto', -apple-system, sans-serif; }
* { box-sizing:border-box; }
.topbar { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
border-bottom:1px solid #1e1e1e; }
.brand { font-size:16px; font-weight:800; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:22px; font-size:12px; font-weight:600; letter-spacing:0.3px; text-transform:uppercase; color:#8a8a8a; }
.navlinks span:first-child { color:#17b26a; }
.layout { display:flex; height:calc(640px - 60px); }
.media { width:380px; flex-shrink:0; background:#111010; position:relative; display:flex; align-items:center; justify-content:center;
border-right:1px solid #1e1e1e; }
.tower { width:150px; height:260px; background:linear-gradient(160deg, #1c1b1b 0%, #161515 100%); border:1px solid #2a2a2a;
border-radius:6px; position:relative; box-shadow:0 0 40px rgba(23,178,106,0.15); }
.tower::after { content:''; position:absolute; left:14px; top:20px; width:8px; height:220px; border-radius:4px;
background:linear-gradient(180deg, #17b26a, #73e2a7); box-shadow:0 0 16px #17b26a; }
.stock { position:absolute; top:18px; left:18px; background:#edfcf3; color:#0b9055; font-size:11px; font-weight:700;
letter-spacing:0.8px; text-transform:uppercase; border-radius:4px; padding:4px 8px; }
.detail { flex:1; padding:24px 34px; display:flex; flex-direction:column; gap:14px; }
.kicker { font-size:11px; font-weight:700; letter-spacing:0.8px; color:#8a8a8a; text-transform:uppercase; }
h1 { font-size:26px; font-weight:700; margin:0; letter-spacing:-0.5px; }
.price { font-size:32px; font-weight:800; letter-spacing:-0.5px; }
.price span { font-size:14px; color:#8a8a8a; font-weight:500; }
.spec-table { background:#111010; border-radius:8px; padding:14px 16px; display:flex; flex-direction:column; }
.spec-row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #1e1e1e; font-size:14px; }
.spec-row:last-child { border-bottom:none; }
.spec-row .k { font-size:12px; font-weight:600; letter-spacing:0.2px; color:#8a8a8a; }
.actions { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#17b26a; color:#ffffff; border:none; border-radius:4px; height:52px; font-size:16px;
font-weight:700; letter-spacing:0.3px; text-transform:uppercase; }
.btn-secondary { background:transparent; color:#fafafa; border:2px solid #fafafa; border-radius:4px; height:52px;
padding:0 24px; font-size:16px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; }
</style></head>
<body>
<div class="topbar">
<div class="brand">Clx Gaming</div>
<div class="navlinks"><span>Pre-Built</span><span>Custom</span><span>Components</span><span>Sale</span></div>
</div>
<div class="layout">
<div class="media">
<div class="stock">In Stock</div>
<div class="tower"></div>
</div>
<div class="detail">
<div class="kicker">Custom Gaming PC</div>
<h1>Forge X9 — RTX Edition</h1>
<div class="price">$2,199 <span>USD</span></div>
<div class="spec-table">
<div class="spec-row"><span class="k">CPU</span><span>Ryzen 9 7900X</span></div>
<div class="spec-row"><span class="k">GPU</span><span>RTX 4080 Super</span></div>
<div class="spec-row"><span class="k">RAM</span><span>32GB DDR5</span></div>
<div class="spec-row"><span class="k">Storage</span><span>2TB NVMe SSD</span></div>
</div>
<div class="actions">
<button class="btn-primary">Customize Build</button>
<button class="btn-secondary">Compare</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #303030;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #303030;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #303030; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #929495; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #db5757; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #394962;
border: 1px solid #db5757; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #303030;
border: 1px solid #cbcbcb; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929495; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.2px; background: #d0d6d9; color: #394962;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#303030; box-sizing:border-box;
font-family:'DM Sans',sans-serif; }
* { box-sizing:border-box; }
.topstripe { height:26px; background:#62623a; color:#e8e8d0; font-size:10.5px; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; }
nav { height:54px; background:#394962; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#ffffff; font-size:16px; font-weight:700; }
.navlinks { display:flex; gap:22px; font-size:12px; color:#c6c7c9; }
.navlinks span.on { color:#ffffff; font-weight:700; }
.modelsearch { background:#ffffff; border-radius:6px; padding:6px 14px; font-size:11px; color:#767676; width:190px; }
.wrap { display:flex; height:506px; padding:16px 30px; gap:26px; }
.photo { width:280px; flex-shrink:0; background:#d0d6d9; border-radius:6px; display:flex; align-items:center; justify-content:center; position:relative; }
.unit { width:170px; height:190px; border-radius:6px; background:linear-gradient(160deg,#c6c7c9,#929495 60%,#687979 100%); }
.auth-badge { position:absolute; top:14px; left:14px; background:#929457; color:#fff; font-size:10px; font-weight:700; padding:4px 10px; border-radius:4px; }
.info { flex:1; display:flex; flex-direction:column; gap:10px; }
.model-code { font-size:12px; color:#767676; letter-spacing:.03em; }
.info h1 { font-size:20px; font-weight:700; margin:0; letter-spacing:-.2px; }
.spec-row { display:flex; gap:20px; font-size:11px; border-top:1px solid #cfcfcf; border-bottom:1px solid #cfcfcf; padding:10px 0; }
.spec-row div b { display:block; font-size:13px; color:#394962; }
.desc { font-size:12.5px; color:#626263; line-height:1.6; max-width:460px; }
.trust-row { display:flex; gap:8px; }
.trust-row span { font-size:10.5px; border:1px solid #cfcfcf; border-radius:4px; padding:4px 10px; color:#626263; }
.price-row { display:flex; align-items:center; gap:16px; margin-top:auto; }
.price { font-size:20px; font-weight:700; }
.btn-buy { background:#db5757; color:#fff; border:none; border-radius:4px; padding:12px 24px; font-size:12px; font-weight:700; }
.btn-quote { border:1px solid #394962; color:#394962; border-radius:4px; padding:12px 18px; font-size:12px; font-weight:700; }
footer { height:54px; background:#d0d6d9; display:flex; align-items:center; justify-content:space-between; padding:0 30px; font-size:10.5px; color:#626263; }
</style></head>
<body>
<div class="topstripe"><span>Wholesale Account: Contractor Tier 2</span><span>Freight Ships to Jobsite · Net-30 Available</span></div>
<nav>
<p class="brand">AC Outlet</p>
<div class="navlinks"><span>Split Systems</span><span class="on">Package Units</span><span>Air Handlers</span><span>Thermostats</span></div>
<span class="modelsearch">GSX14024…</span>
</nav>
<div class="wrap">
<div class="photo"><span class="auth-badge">Authorized Dealer</span><div class="unit"></div></div>
<div class="info">
<span class="model-code">MODEL GSX14024 · Goodman</span>
<h1>2-Ton 14 SEER Split System A/C Condenser</h1>
<div class="spec-row">
<div>SEER<b>14.0</b></div>
<div>Refrigerant<b>R-410A</b></div>
<div>Warranty<b>10-Yr Parts</b></div>
</div>
<p class="desc">Direct from the jobsite catalog — full model documentation, matched-system compatibility, and freight shipping thresholds available at checkout.</p>
<div class="trust-row"><span>Goodman Authorized</span><span>Wholesale Pricing</span><span>Freight Available</span></div>
<div class="price-row">
<span class="price">$1,395.00</span>
<button class="btn-buy">Add to Cart</button>
<button class="btn-quote">Get Quote</button>
</div>
</div>
</div>
<footer><span>© AC Outlet</span><span>Matched Systems · Freight Info · Contractor Accounts</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #112233;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #112233;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #112233; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6d7278; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #108474; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #555555;
border: 1px solid #c4c8cc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d7278; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #deeeec; color: #108474;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; color:#555555; font-family:'Figtree',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;background:#ffffff;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #eeeeee;}
.logo{font-size:19px;font-weight:600;color:#112233;}
.navlinks{display:flex;gap:22px;font-size:14px;color:#555555;}
.searchpill{background:#eeeeee;border-radius:9999px;padding:8px 18px;font-size:12px;color:#6d7278;}
.hero{height:250px;display:flex;align-items:center;padding:0 36px;background:#eeeeee;position:relative;overflow:hidden;}
.herotext{width:48%;}
.badgeword{display:inline-block;background:#fed716;color:#5a4600;font-size:11px;font-weight:600;border-radius:9999px;padding:5px 14px;margin-bottom:12px;}
.herotext h1{font-size:28px;font-weight:600;color:#112233;margin:0 0 12px;line-height:1.3;letter-spacing:-0.3px;}
.herotext p{font-size:14px;color:#555555;margin:0 0 18px;max-width:290px;line-height:1.6;}
.cta{display:inline-block;background:#108474;color:#fff;font-size:14px;font-weight:600;padding:12px 28px;border-radius:9999px;width:fit-content;}
.orb{position:absolute;right:80px;top:70px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#12b985,#0d6b5d 70%);}
.orb2{position:absolute;right:60px;top:140px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fed716,#c9a900 70%);}
.seclabel{font-size:14px;font-weight:600;color:#112233;padding:20px 36px 12px;}
.grid{display:flex;gap:14px;padding:0 36px;}
.card{width:150px;background:#ffffff;border-radius:12px;padding:10px;position:relative;border:1px solid #dedede;}
.badge{position:absolute;top:8px;left:8px;font-size:9px;font-weight:700;border-radius:9999px;padding:3px 8px;color:#fff;z-index:2;}
.badge-sale{background:#fed716;color:#5a4600;}
.badge-low{background:#de3813;}
.thumb{height:92px;border-radius:9999px;margin-bottom:8px;}
.ptitle{font-size:12px;font-weight:600;color:#112233;line-height:1.3;height:30px;overflow:hidden;}
.pprice{font-size:13px;font-weight:600;color:#108474;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:11px;color:#6d7278;border-top:1px solid #eeeeee;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Terra</div>
<div class="navlinks"><span>Newborn</span><span>Bath & Body</span><span>Sleep</span></div>
<div class="searchpill">Search...</div>
</div>
<div class="hero">
<div class="herotext">
<div class="badgeword">Aotearoa Made</div>
<h1>Gentle baby care, born from the bush.</h1>
<p>Plant-based formulas developed for the softest, most sensitive newborn skin.</p>
<div class="cta">Shop Bestsellers</div>
</div>
<div class="orb"></div><div class="orb2"></div>
</div>
<div class="seclabel">New Parent Essentials</div>
<div class="grid">
<div class="card"><div class="badge badge-sale">Sale</div><div class="thumb" style="background:linear-gradient(135deg,#108474,#12b985)"></div><div class="ptitle">Baby Wash & Shampoo</div><div class="pprice">$18.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#12b985,#108474)"></div><div class="ptitle">Nappy Balm</div><div class="pprice">$22.00</div></div>
<div class="card"><div class="badge badge-low">Low Stock</div><div class="thumb" style="background:linear-gradient(135deg,#fed716,#108474)"></div><div class="ptitle">Muslin Wrap Set</div><div class="pprice">$34.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#de3813,#fed716)"></div><div class="ptitle">Baby Massage Oil</div><div class="pprice">$26.00</div></div>
</div>
<div class="footer"><span>© Made in New Zealand</span><span>Plant-Based, Always</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0d0d0d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0d0d0d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #0d0d0d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #757677; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #00bbff; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #ffffff; color: #003399;
border: 1px solid #003399; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2e2e2e;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757677; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #d93a42; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; font-family:'GT America',Arial,sans-serif; color:#1a1a1a;
}
*{box-sizing:border-box;}
.nav{height:72px; display:flex; align-items:center; padding:0 32px; border-bottom:1px solid #e2e2e2;}
.logo{font-size:20px; font-weight:700; color:#003399; letter-spacing:.3px;}
.navlinks{display:flex; gap:24px; margin-left:40px; font-size:13px; color:#444;}
.navlinks span.active{color:#003399; border-bottom:2px solid #00bbff; padding-bottom:4px; font-weight:600;}
.searchwrap{margin-left:auto;}
.searchbox{width:220px; height:36px; border-radius:999px; border:1px solid #d0d0d0; padding:0 16px; font-size:12px;}
.hero{display:flex; align-items:center; gap:34px; padding:24px 32px; background:#f5f7fb;}
.heroText{flex:1;}
.heroText .eyebrow{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#00bbff; font-weight:700; margin-bottom:10px;}
.heroText h1{font-size:32px; font-weight:700; line-height:1.25; margin:0 0 12px; max-width:400px; color:#111;}
.heroText p{font-size:13.5px; color:#555; line-height:1.6; max-width:380px; margin:0 0 16px;}
.heroBtn{display:inline-block; background:#00bbff; color:#fff; padding:12px 26px; border-radius:8px; font-size:13px; font-weight:700;}
.heroImg{width:180px; height:230px; background:linear-gradient(160deg,#003399,#00bbff); border-radius:8px; flex-shrink:0; box-shadow:0 8px 20px rgba(0,51,153,.2);}
.section{padding:14px 32px 0;}
.sectitle{font-size:18px; font-weight:700; margin:0 0 12px; color:#111;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.card{background:#fff; border-radius:8px; padding:8px; box-shadow:0 2px 8px rgba(0,0,0,.06); text-align:center;}
.thumb{height:100px; border-radius:6px; margin-bottom:8px; position:relative;}
.t1{background:linear-gradient(160deg,#003399,#5577cc);}
.t2{background:linear-gradient(160deg,#00bbff,#7fe0ff);}
.t3{background:linear-gradient(160deg,#d93a42,#f0a0a4);}
.t4{background:linear-gradient(160deg,#333,#888);}
.pname{font-size:11.5px; font-weight:600; margin-bottom:3px; line-height:1.3;}
.pauthor{font-size:10px; color:#888; margin-bottom:4px;}
.pprice{font-size:11.5px; color:#003399; font-weight:700;}
.footer{position:absolute; bottom:0; left:0; right:0; background:#003399; color:#cfe0ff; font-size:10px; text-align:center; padding:8px 0;}
</style>
<div class="nav">
<div class="logo">Harvard University Press</div>
<div class="navlinks"><span class="active">New Titles</span><span>Subjects</span><span>Authors</span><span>Journals</span></div>
<div class="searchwrap"><input class="searchbox" placeholder="Search the catalog..."/></div>
</div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">Fall Catalog 2026</div>
<h1>Scholarship That Shapes the Conversation</h1>
<p>Rigorous, field-defining books in history, economics, science, and the humanities — from a press built on argument, not decoration.</p>
<div class="heroBtn">Browse New Releases</div>
</div>
<div class="heroImg"></div>
</div>
<div class="section">
<div class="sectitle">Featured Scholarship</div>
<div class="grid">
<div class="card"><div class="thumb t1"></div><div class="pname">The Architecture of Empire</div><div class="pauthor">M. Whitfield</div><div class="pprice">$39.95</div></div>
<div class="card"><div class="thumb t2"></div><div class="pname">Markets and Meaning</div><div class="pauthor">R. Okonkwo</div><div class="pprice">$45.00</div></div>
<div class="card"><div class="thumb t3"></div><div class="pname">A Grammar of Silence</div><div class="pauthor">L. Bertrand</div><div class="pprice">$32.50</div></div>
<div class="card"><div class="thumb t4"></div><div class="pname">The Long Enlightenment</div><div class="pauthor">P. Alders</div><div class="pprice">$52.00</div></div>
</div>
</div>
<div class="footer">© Harvard University Press — Advancing Scholarship Since 1913</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.33; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #7a756e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.25; letter-spacing: 0.1em; background: #c09a50; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.25; letter-spacing: 0.1em; background: #ffffff; color: #313131;
border: 1px solid #c09a50; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a756e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; background: #ffffff; color: #313131;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:#4a4540; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e5e0d9;}
.logo{font-family:Georgia,serif;font-size:22px;color:#313131;}
.navlinks{display:flex;gap:26px;font-size:13px;letter-spacing:0.04em;color:#4a4540;}
.hero{height:280px;display:flex;background:#faf8f5;}
.herotext{width:46%;padding:36px 40px;display:flex;flex-direction:column;justify-content:center;}
.h1{font-family:Georgia,serif;font-weight:300;font-size:38px;color:#313131;margin:0 0 14px;letter-spacing:-0.5px;}
.hsub{font-size:14px;line-height:1.6;color:#4a4540;margin:0 0 20px;max-width:340px;}
.cta-row{display:flex;gap:12px;}
.btn-primary{background:#c09a50;color:#fff;font-size:12px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;padding:14px 26px;}
.btn-secondary{background:transparent;border:1px solid #313131;color:#313131;font-size:12px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;padding:13px 25px;}
.heroimg{width:54%;position:relative;background:linear-gradient(160deg,#eee6da 0%,#f0ece7 100%);}
.ringmark{position:absolute;left:50%;top:50%;width:110px;height:110px;border:6px solid #c09a50;border-radius:50%;transform:translate(-50%,-50%);}
.stone{position:absolute;left:50%;top:38%;width:28px;height:22px;background:linear-gradient(135deg,#fff,#e8d5a8);transform:translate(-50%,-50%) rotate(45deg);}
.section{padding:20px 34px 0;}
.sectitle{font-family:Georgia,serif;font-size:18px;color:#313131;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#faf8f5;padding:14px;}
.thumb{height:88px;background:#f0ece7;margin-bottom:10px;}
.meta{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:#7a756e;}
.ptitle{font-size:15px;color:#313131;margin-top:4px;}
.pprice{font-family:Georgia,serif;font-size:18px;font-weight:300;color:#313131;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Queensmith</div>
<div class="navlinks"><span>Engagement</span><span>Wedding Bands</span><span>Design Your Own</span><span>About</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="h1">Begin with the question, not the ring.</div>
<div class="hsub">A bespoke studio for engagement rings — collaborate on cut, metal, and setting before you ever browse a catalog.</div>
<div class="cta-row"><div class="btn-primary">Start Designing</div><div class="btn-secondary">Book a Consultation</div></div>
</div>
<div class="heroimg"><div class="ringmark"></div><div class="stone"></div></div>
</div>
<div class="section">
<div class="sectitle">Signature Settings</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 40% 40%,#fff,#e8d5a8 60%,#f0ece7);"></div><div class="meta">Solitaire · 18k Gold</div><div class="ptitle">The Hatton</div><div class="pprice">from £2,400</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 40% 40%,#fff,#d4d4d4 60%,#f0ece7);"></div><div class="meta">Halo · Platinum</div><div class="ptitle">The Marchmont</div><div class="pprice">from £3,150</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 40% 40%,#fff,#c4937a 60%,#f0ece7);"></div><div class="meta">Pavé · Rose Gold</div><div class="ptitle">The Bloomsbury</div><div class="pprice">from £2,890</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle at 40% 40%,#fff,#e8d5a8 60%,#f0ece7);"></div><div class="meta">Three-Stone · 18k Gold</div><div class="ptitle">The Islington</div><div class="pprice">from £3,780</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FDFAF5; color: #1A1714;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FDFAF5; color: #1A1714;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 300; line-height: 1.45; letter-spacing: 0.015em; margin: 0; color: #1A1714; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 300; line-height: 1.65; letter-spacing: 0.01em; margin: 0; color: #7A7068; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.16em; background: #B8975A; color: #FDFAF5;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.16em; background: transparent; color: #1A1714;
border: 1px solid #B8975A; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.7; letter-spacing: 0.01em; background: #FDFAF5; color: #1A1714;
border: 1px solid #c4c1bd; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7A7068; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 500; line-height: 1.4; letter-spacing: 0.18em; background: transparent; color: #B8975A;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#FDFAF5; color:#3B3530; font-family:Jost,Raleway,Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 44px;border-bottom:1px solid #E8DFC8;}
.logo{font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;font-weight:400;letter-spacing:.04em;color:#1A1714;}
.navlinks{display:flex;gap:26px;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#3B3530;}
.hero{height:340px;display:flex;background:#FDFAF5;}
.herotext{width:44%;display:flex;flex-direction:column;justify-content:center;padding:0 44px;}
.hkicker{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#B8975A;margin-bottom:16px;}
.herotext h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:38px;font-weight:400;letter-spacing:.02em;color:#1A1714;margin:0 0 16px;line-height:1.2;}
.herotext p{font-size:13px;color:#7A7068;margin:0 0 22px;max-width:280px;line-height:1.6;}
.link{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#B8975A;border-bottom:1px solid #B8975A;padding-bottom:4px;width:fit-content;}
.heroimg{width:56%;position:relative;background:linear-gradient(135deg,#E8DFC8,#c9b98a 60%,#B8975A);}
.ring{position:absolute;left:120px;top:110px;width:120px;height:120px;border-radius:50%;border:14px solid #FDFAF5;}
.sec{padding:34px 44px 0;}
.sectitle{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#7A7068;margin-bottom:20px;}
.grid{display:flex;gap:16px;}
.card{width:196px;}
.thumb{height:130px;background:#E8DFC8;}
.pname{font-family:'Cormorant Garamond',Georgia,serif;font-size:16px;font-weight:400;color:#1A1714;margin-top:12px;}
.pprice{font-family:'Cormorant Garamond',Georgia,serif;font-size:15px;color:#7A7068;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Leen Heyne</div>
<div class="navlinks"><span>Rings</span><span>Necklaces</span><span>Bespoke</span><span>Journal</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="hkicker">Editorial Quietness</div>
<h1>Warm metals, understated form.</h1>
<p>Fine jewelry composed with the calm of Scandinavian restraint.</p>
<div class="link">Discover the Atelier</div>
</div>
<div class="heroimg"><div class="ring"></div></div>
</div>
<div class="sec">
<div class="sectitle">The Signature Edit</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#E8DFC8;"></div><div class="pname">Aureate Band Ring</div><div class="pprice">€1,240</div></div>
<div class="card"><div class="thumb" style="background:#e2d5b0;"></div><div class="pname">Champagne Drop Earrings</div><div class="pprice">€980</div></div>
<div class="card"><div class="thumb" style="background:#0F0C0A;"></div><div class="pname">Onyx Signet</div><div class="pprice">€1,560</div></div>
<div class="card"><div class="thumb" style="background:#d8c8a0;"></div><div class="pname">Thread Chain Necklace</div><div class="pprice">€1,120</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #131c66;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #131c66;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #131c66; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6e757c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #131c66; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #131c66;
border: 1px solid #131c66; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #514f4e;
border: 1px solid #c4c6d9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e757c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #bbdc00; color: #131c66;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',sans-serif; color:#514f4e; }
*{box-sizing:border-box;}
.nav{height:64px;background:#ffffff;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:21px;font-weight:700;letter-spacing:-.3px;color:#131c66;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#131c66;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;background:#f5f7fc;}
.heroText{width:440px;}
.headline{font-size:32px;font-weight:700;letter-spacing:-.5px;line-height:1.2;color:#131c66;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.55;color:#514f4e;margin:0 0 20px;max-width:370px;}
.btn{display:inline-block;background:#131c66;color:#fff;font-size:14px;font-weight:600;padding:13px 28px;border-radius:20px;}
.toy1{position:absolute;right:110px;top:80px;width:90px;height:90px;border-radius:20px;background:#bbdc00;transform:rotate(-6deg);}
.toy2{position:absolute;right:70px;top:130px;width:70px;height:70px;border-radius:50%;background:#ff9955;}
.toy3{position:absolute;right:170px;top:130px;width:60px;height:60px;border-radius:20px;background:#60cbc2;transform:rotate(8deg);}
.sec{position:relative;height:290px;padding:26px 40px;}
.secTitle{font-size:18px;font-weight:700;color:#131c66;margin-bottom:14px;}
.stagerow{display:flex;gap:8px;margin-bottom:16px;}
.stagepill{background:#131c66;color:#fff;font-size:11px;font-weight:700;padding:6px 14px;border-radius:9999px;display:flex;align-items:center;gap:6px;}
.stagedot{width:6px;height:6px;border-radius:50%;}
.grid{display:flex;gap:16px;}
.card{width:216px;background:#fff;border-radius:20px;box-shadow:0 3px 10px rgba(0,0,0,.06);padding:12px;}
.thumb{height:96px;border-radius:16px;margin-bottom:10px;}
.cardTitle{font-size:14px;font-weight:600;color:#131c66;margin-bottom:4px;}
.cardPrice{font-size:13px;font-weight:700;color:#514f4e;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#131c66;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#bbdc00;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Lovevery</div>
<div class="navlinks"><span>Play Kits</span><span>By Stage</span><span>Gift Guide</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">Play, matched<br>to every stage.</div>
<div class="sub">Developmentally designed toys built like a serious tool, not a nursery afterthought.</div>
<div class="btn">Find Your Kit</div>
</div>
<div class="toy3"></div><div class="toy2"></div><div class="toy1"></div>
</div>
<div class="sec">
<div class="secTitle">Shop by Stage</div>
<div class="stagerow">
<div class="stagepill"><div class="stagedot" style="background:#bbdc00"></div>0–3 mo</div>
<div class="stagepill"><div class="stagedot" style="background:#ff9955"></div>7–9 mo</div>
<div class="stagepill"><div class="stagedot" style="background:#60cbc2"></div>13–15 mo</div>
<div class="stagepill"><div class="stagedot" style="background:#b85bbf"></div>25–28 mo</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#bbdc00,#131c66)"></div><div class="cardTitle">The Looker Play Kit</div><div class="cardPrice">$80</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff9955,#131c66)"></div><div class="cardTitle">The Babbler Play Kit</div><div class="cardPrice">$80</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#60cbc2,#131c66)"></div><div class="cardTitle">The Explorer Play Kit</div><div class="cardPrice">$120</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b85bbf,#131c66)"></div><div class="cardTitle">The Thinker Play Kit</div><div class="cardPrice">$120</div></div>
</div>
</div>
<div class="footer"><span>© Built for Every Stage of Play</span><span>The Play Guide</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.3px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border: none; border-radius: 2px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 2px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.8px; background: #f8f8f8; color: #767676;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#313131; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e0e0e0;}
.logo{font-weight:700;font-size:17px;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;}
.navlinks span.active{border-bottom:2px solid #313131;padding-bottom:4px;}
.hero{display:flex;padding:30px 32px;gap:30px;}
.hero .text{flex:1;padding-top:20px;}
.hero h1{font-size:32px;font-weight:700;letter-spacing:-.5px;line-height:1.2;margin:0 0 12px;}
.hero p{font-size:15px;color:#4d4d4d;line-height:1.6;margin:0 0 16px;max-width:340px;}
.cta{display:inline-block;background:#313131;color:#fff;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:12px 24px;border-radius:2px;}
.hero .img{flex:1;border-radius:2px;background:linear-gradient(160deg,#d8d0c0,#8a7a5c 60%,#313131);}
.section{padding:0 32px 26px;}
.section h2{font-size:13px;text-transform:uppercase;letter-spacing:.8px;font-weight:600;color:#767676;margin:0 0 14px;}
.grid{display:flex;gap:18px;}
.card{flex:1;border:1px solid #e0e0e0;border-radius:2px;padding:10px;}
.card .img{aspect-ratio:3/4;border-radius:2px;height:150px;margin-bottom:8px;}
.a1{background:linear-gradient(200deg,#a3392c,#e8c199);}
.a2{background:linear-gradient(200deg,#3d5a80,#98c1d9);}
.a3{background:linear-gradient(200deg,#313131,#767676);}
.card h3{font-size:14px;font-weight:600;margin:0 0 2px;}
.card .artist{font-size:12px;color:#767676;margin:0 0 4px;}
.card .price{font-size:15px;font-weight:700;}
.tag{display:inline-block;background:#f8f8f8;font-size:10px;text-transform:uppercase;letter-spacing:.8px;font-weight:600;padding:3px 7px;color:#767676;margin-bottom:6px;}
</style>
<div class="nav">
<div class="logo">Degreeart</div>
<div class="navlinks"><span class="active">Buy Art</span><span>Artists</span><span>Exhibitions</span><span>About</span></div>
</div>
<div class="hero">
<div class="text">
<h1>Original art, straight from the graduation show.</h1>
<p>Thousands of works by emerging artists — bought before the gallery markup, direct from the studio.</p>
<a class="cta">Browse Works</a>
</div>
<div class="img"></div>
</div>
<div class="section">
<h2>New This Week</h2>
<div class="grid">
<div class="card"><div class="img a1"></div><span class="tag">Original</span><h3>Ochre Study II</h3><p class="artist">M. Whitfield · RCA 2026</p><div class="price">£420</div></div>
<div class="card"><div class="img a2"></div><span class="tag">Ltd Ed of 10</span><h3>Coastal Fragment</h3><p class="artist">A. Reyes · Slade 2026</p><div class="price">£180</div></div>
<div class="card"><div class="img a3"></div><span class="tag">Sold</span><h3>Interior No. 4</h3><p class="artist">J. Okoye · Goldsmiths 2026</p><div class="price">£650</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #131c66;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #131c66;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #131c66; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #9ca3af; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #131c66; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #131c66;
border: 1px solid #131c66; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #514f4e;
border: 1px solid #c4c6d9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ca3af; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #131c66; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',sans-serif; color:#514f4e; }
*{box-sizing:border-box;}
.nav{height:60px;background:#ffffff;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:20px;font-weight:700;letter-spacing:-.3px;color:#131c66;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;color:#9ca3af;}
.detail{display:flex;height:400px;padding:24px 40px;gap:36px;}
.gallery{width:400px;height:352px;border-radius:12px;background:linear-gradient(150deg,#f5f7fc,#60cbc2 130%);position:relative;}
.toyblob{position:absolute;left:120px;top:120px;width:150px;height:150px;border-radius:50%;background:#bbdc00;}
.toyblob2{position:absolute;left:190px;top:170px;width:80px;height:80px;border-radius:20px;background:#ff9955;transform:rotate(12deg);}
.info{width:420px;padding-top:6px;}
.stagebadge{display:inline-flex;align-items:center;gap:8px;background:#131c66;color:#fff;font-size:12px;font-weight:700;padding:6px 14px;border-radius:9999px;margin-bottom:14px;}
.stagedot{width:8px;height:8px;border-radius:50%;background:#bbdc00;}
.pname{font-size:26px;font-weight:700;color:#131c66;letter-spacing:-.3px;margin:0 0 8px;}
.pprice{font-size:18px;font-weight:600;color:#514f4e;margin:0 0 16px;}
.pdesc{font-size:14px;line-height:1.6;color:#514f4e;margin:0 0 20px;}
.agechips{display:flex;gap:8px;margin-bottom:22px;}
.chip{border:1px solid #d7dae6;color:#514f4e;font-size:12px;font-weight:600;padding:8px 14px;border-radius:8px;}
.chip.active{background:#131c66;color:#fff;border-color:#131c66;}
.btn{display:inline-block;background:#131c66;color:#fff;font-size:14px;font-weight:600;padding:14px 32px;border-radius:20px;}
.sec{padding:14px 40px;}
.secTitle{font-size:14px;font-weight:700;color:#131c66;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:216px;background:#f5f7fc;border-radius:12px;padding:10px;}
.thumb{height:70px;border-radius:8px;margin-bottom:8px;}
.cardTitle{font-size:12px;font-weight:600;color:#131c66;}
</style>
<div class="detail">
<div class="gallery"><div class="toyblob"></div><div class="toyblob2"></div></div>
<div class="info">
<div class="stagebadge"><div class="stagedot"></div>Stage: 13–15 Months</div>
<div class="pname">The Chunky Stacker</div>
<div class="pprice">$34.00</div>
<div class="pdesc">A hand-sized play set from Lovevery Baby Toy 2, built to grow motor skills and sequencing as babies learn to sort, stack, and problem-solve.</div>
<div class="agechips">
<div class="chip">7–9 mo</div>
<div class="chip active">13–15 mo</div>
<div class="chip">19–21 mo</div>
</div>
<div class="btn">Add to Play Kit</div>
</div>
</div>
<div class="sec">
<div class="secTitle">Pairs Well With</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#60cbc2,#131c66)"></div><div class="cardTitle">Textured Ball Set</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff9955,#131c66)"></div><div class="cardTitle">Wooden Nesting Cups</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#bbdc00,#131c66)"></div><div class="cardTitle">Soft Book, Stage 4</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b85bbf,#131c66)"></div><div class="cardTitle">Object Permanence Box</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.11px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.38; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.16px; background: #298556; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.16px; background: #ffffff; color: #298556;
border: 1px solid #298556; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.44px; background: #ffb922; color: #111111;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Poppins',sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dedede;}
.logo{font-size:19px;font-weight:600;color:#111111;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;color:#333333;}
.navcta{background:#298556;color:#fff;font-size:12px;font-weight:600;padding:10px 18px;border-radius:6px;}
.hero{height:230px;display:flex;background:#f5f5f5;}
.herotext{width:440px;padding:28px 36px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:#007a3e;margin-bottom:10px;}
.h1{font-size:27px;font-weight:600;line-height:1.25;color:#111111;margin:0 0 10px;}
.sub{font-size:14px;color:#6b6b6b;margin:0 0 16px;max-width:340px;}
.btn{width:150px;text-align:center;background:#298556;color:#fff;font-size:13px;font-weight:600;padding:11px 0;border-radius:6px;}
.heroimg{flex:1;position:relative;background:#121212;}
.body1{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);width:70px;height:150px;border-radius:12px;background:linear-gradient(180deg,#298556,#111111);}
.spout{position:absolute;bottom:90px;left:calc(50% + 30px);width:36px;height:16px;background:#298556;border-radius:0 8px 8px 0;}
.juice{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:44px;height:40px;background:linear-gradient(180deg,#ffb922,#298556);border-radius:0 0 8px 8px;}
.strip{display:flex;gap:1px;background:#dedede;}
.cell{flex:1;background:#f5f5f5;text-align:center;padding:9px;}
.clabel{font-size:10px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:#6b6b6b;}
.cval{font-size:13px;color:#111111;margin-top:2px;font-weight:600;}
.sec{padding:16px 36px 0;}
.sectitle{font-size:13px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:#111111;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:154px;border:1px solid #dedede;border-radius:8px;padding:9px;background:#fff;position:relative;}
.thumb{height:96px;border-radius:6px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:600;line-height:1.3;height:30px;overflow:hidden;color:#111111;}
.pprice{font-size:13px;font-weight:700;color:#298556;margin-top:3px;}
.badge{position:absolute;top:7px;left:7px;background:#ffb922;color:#111111;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 6px;border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Omega Juicers</div>
<div class="navlinks"><span>Masticating</span><span>Centrifugal</span><span>Accessories</span><span>Recipes</span></div>
<div class="navcta">Shop Juicers</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Low Speed. Full Nutrients.</div>
<div class="h1">Extract more<br>than just juice.</div>
<div class="sub">Slow masticating juicers built for maximum yield and a fifteen-year warranty.</div>
<div class="btn">Shop Bestsellers</div>
</div>
<div class="heroimg"><div class="body1"></div><div class="spout"></div><div class="juice"></div></div>
</div>
<div class="strip">
<div class="cell"><div class="clabel">Speed</div><div class="cval">80 RPM</div></div>
<div class="cell"><div class="clabel">Yield</div><div class="cval">+30% More</div></div>
<div class="cell"><div class="clabel">Warranty</div><div class="cval">15 Years</div></div>
<div class="cell"><div class="clabel">Noise</div><div class="cval">Whisper Quiet</div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge">Top Rated</span><div class="thumb" style="background:linear-gradient(150deg,#298556,#111111)"></div><div class="pname">NC900HDC Juicer</div><div class="pprice">$429.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#007a3e,#121212)"></div><div class="pname">MM900 Masticating</div><div class="pprice">$369.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#ffb922,#111111)"></div><div class="pname">Replacement Strainer Set</div><div class="pprice">$34.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#9c005f,#111111)"></div><div class="pname">Cold Press Juicer C500</div><div class="pprice">$389.95</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121211; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121211; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #231f20; color: #dedede;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: transparent; color: #dedede;
border: 1px solid #231f20; border-radius: 0px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #121212; color: #dedede;
border: 1px solid #121211; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ffffff; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c0392b; color: #121211;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121211; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#dedede; }
*{box-sizing:border-box;}
.nav{height:60px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:16px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;}
.navlinks{display:flex;gap:26px;font-size:13px;font-weight:500;letter-spacing:1px;text-transform:uppercase;}
.navlinks span:first-child{color:#ffffff;border-bottom:2px solid #ffffff;padding-bottom:18px;}
.hero{height:170px;display:flex;align-items:center;padding:0 32px;}
.hero h1{font-size:32px;font-weight:700;letter-spacing:-.5px;max-width:500px;line-height:1.2;}
.hero p{font-size:16px;color:#444444;margin-top:10px;}
.grid{display:flex;gap:16px;padding:16px 32px 0;}
.card{width:210px;border:1px solid #444444;}
.cover{height:150px;background:linear-gradient(160deg,#231f20,#3a3a3a);position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#c0392b;color:#121211;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 6px;}
.badge.pre{background:#8e44ad;color:#fff;}
.info{padding:8px;}
.title{font-size:18px;font-weight:500;}
.price{font-size:14px;color:#444444;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:48px;border-top:1px solid #444444;display:flex;align-items:center;justify-content:center;gap:28px;font-size:12px;color:#666666;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Powerhouse Films Indicator</div>
<div class="navlinks"><span>Shop</span><span>Collections</span><span>Sale</span><span>Journal</span></div>
</div>
<div class="hero"><div><h1>Limited editions, catalog depth.</h1><p>Dual-format releases curated for the collector's shelf.</p></div></div>
<div class="grid">
<div class="card"><div class="cover"><div class="badge">Sale</div></div><div class="info"><div class="title">The Long Corridor</div><div class="price">$34.95</div></div></div>
<div class="card"><div class="cover"><div class="badge pre">Pre-Order</div></div><div class="info"><div class="title">A Season of Ash</div><div class="price">$39.95</div></div></div>
<div class="card"><div class="cover"></div><div class="info"><div class="title">Nightfall Terminal</div><div class="price">$29.95</div></div></div>
<div class="card"><div class="cover"></div><div class="info"><div class="title">Two Rivers, One Coast</div><div class="price">$44.95</div></div></div>
</div>
<div class="footer"><span>Shipping</span><span>Returns</span><span>About</span><span>Contact</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 32px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; margin: 0; color: #afafaf; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 20px; background: #000000; color: #ffffff;
border: none; border-radius: 999px; padding: {spacing.md} {spacing.md};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 20px; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 999px;
padding: {spacing.md} {spacing.md}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; background: #efefef; color: #000000;
border: 1px solid #bfbfbf; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #afafaf; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dbdbdb; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:22px; font-weight:800; letter-spacing:-.5px; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:14px; font-weight:500; }
.pill { border-radius:999px; padding:10px 20px; font-size:14px; font-weight:600; }
.pill-blk { background:#000000; color:#ffffff; }
.hero { padding:26px 32px 0; }
.hero h1 { font-size:46px; font-weight:700; letter-spacing:-1px; margin:0 0 22px; max-width:560px; line-height:1.05; }
.reqcard { background:#efefef; border-radius:14px; padding:14px; display:flex; gap:0; max-width:520px; }
.reqfield { flex:1; background:#ffffff; border-radius:10px; padding:12px 16px; }
.reqfield + .reqfield { margin-left:10px; }
.reqfield .lbl { font-size:12px; color:#5e5e5e; }
.reqfield .val { font-size:14px; font-weight:600; margin-top:2px; }
.reqbtn { border-radius:10px; background:#000000; color:#fff; font-size:14px; font-weight:600;
display:flex; align-items:center; justify-content:center; padding:0 22px; margin-left:10px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:28px 32px 0; }
.card { display:flex; flex-direction:column; gap:10px; }
.illus { aspect-ratio:4/3; border-radius:12px; position:relative; overflow:hidden; }
.i1 { background:#efefef; }
.i2 { background:#f3f3f3; }
.i3 { background:#e2e2e2; }
.shape { position:absolute; border-radius:999px; }
.i1 .shape { width:70px; height:70px; background:#000000; left:30px; top:30px; }
.i1 .shape2 { position:absolute; width:110px; height:12px; background:#000000; left:110px; bottom:40px; border-radius:999px; }
.i2 .shape { width:130px; height:130px; border:10px solid #000000; border-radius:999px; left:20px; top:14px; background:transparent; }
.i3 .shape { width:0; height:0; left:40px; top:36px; border-left:60px solid transparent; border-right:60px solid transparent; border-bottom:100px solid #000000; }
.card .tag { font-size:12px; font-weight:700; color:#5e5e5e; }
.card h3 { font-size:18px; font-weight:700; margin:0; }
.card .link { font-size:13px; color:#0000ee; font-weight:600; }
</style></head>
<body>
<nav>
<div class="brand">Uber</div>
<div class="navlinks"><span>Ride</span><span>Drive</span><span>Business</span><span>About</span></div>
<div class="pill pill-blk">Log in</div>
</nav>
<div class="hero">
<h1>Go anywhere with Uber</h1>
<div class="reqcard">
<div class="reqfield"><div class="lbl">Pickup location</div><div class="val">Current location</div></div>
<div class="reqfield"><div class="lbl">Dropoff location</div><div class="val">Where to?</div></div>
<div class="reqbtn">See prices</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="illus i1"><div class="shape"></div><div class="shape2"></div></div><div class="tag">RIDE</div><h3>Go where you need to</h3><span class="link">Get a ride →</span></div>
<div class="card"><div class="illus i2"><div class="shape"></div></div><div class="tag">DRIVE</div><h3>Earn on your schedule</h3><span class="link">Start driving →</span></div>
<div class="card"><div class="illus i3"><div class="shape"></div></div><div class="tag">BUSINESS</div><h3>Move your team, together</h3><span class="link">Get Uber for Business →</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111827;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111827;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #111827; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: #da272a; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: #ffffff; color: #da272a;
border: 1px solid #da272a; border-radius: 4px;
padding: 10px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #111827;
border: 1px solid #c4c5c9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 1.2px; background: #da272a; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f7; color:#374151; box-sizing:border-box;
font-family:'Open Sans','Titillium Web','Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#0a0a0a; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { color:#ffffff; font-family:'Titillium Web',Arial,sans-serif; font-size:19px; font-weight:700; margin:0; letter-spacing:0.3px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#e5e7eb; font-size:11px; font-weight:600; letter-spacing:0.03em; }
.navlinks .cta { background:#da272a; color:#fff; padding:8px 16px; border-radius:4px; font-size:11px; font-weight:700; }
.hero { height:236px; background:#1f2937; display:flex; align-items:center; padding:0 36px; gap:36px; }
.speaker { width:120px; height:180px; background:linear-gradient(160deg,#374151,#111827); border-radius:8px; position:relative; }
.speaker .cone1 { position:absolute; top:16px; left:20px; right:20px; height:60px; border-radius:50%; background:radial-gradient(circle, #4b5563, #111827); border:2px solid #da272a; }
.speaker .cone2 { position:absolute; top:96px; left:30px; right:30px; height:44px; border-radius:50%; background:radial-gradient(circle, #4b5563, #111827); border:2px solid #007cad; }
.heroTxt h1 { color:#ffffff; font-family:'Titillium Web',Arial,sans-serif; font-size:28px; font-weight:700; margin:0 0 12px; line-height:1.25; }
.heroTxt p { color:#d1d5db; font-size:13px; margin:0 0 18px; max-width:320px; }
.heroTxt .cta { display:inline-block; background:#da272a; color:#fff; font-weight:700; font-size:13px; padding:12px 26px; border-radius:4px; }
.section-label { padding:16px 34px 10px; font-family:'Titillium Web',Arial,sans-serif; font-size:14px; font-weight:700; color:#111827; }
.grid { display:flex; gap:12px; padding:0 34px; }
.card { flex:1; background:#f5f6f7; border-radius:8px; padding:12px; }
.card .art { height:88px; border-radius:4px; margin-bottom:10px; position:relative; }
.a1 { background:linear-gradient(160deg,#374151,#111827); } .a2 { background:linear-gradient(160deg,#da272a,#b52025); }
.a3 { background:linear-gradient(160deg,#007cad,#005f87); } .a4 { background:linear-gradient(160deg,#6b7280,#374151); }
.card .badge { position:absolute; top:14px; left:14px; background:#da272a; color:#fff; font-size:8px; font-weight:700; padding:3px 8px; border-radius:3px; }
.card h3 { font-family:'Titillium Web',Arial,sans-serif; font-size:12px; font-weight:700; color:#111827; margin:0 0 4px; }
.card .spec { font-family:'Exo 2',Arial,sans-serif; font-size:9px; color:#6b7280; margin:0 0 8px; letter-spacing:0.02em; }
.card .price { font-size:14px; font-weight:700; color:#da272a; }
footer { height:56px; margin-top:14px; background:#0a0a0a; display:flex; align-items:center; gap:26px; padding:0 34px; }
footer span { color:#9ca3af; font-size:10px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Fluance</p>
<div class="navlinks"><span>Bookshelf Speakers</span><span>Turntables</span><span>Soundbars</span><span class="cta">Shop Sale</span></div>
</nav>
<div class="hero">
<div class="speaker"><div class="cone1"></div><div class="cone2"></div></div>
<div class="heroTxt">
<h1>Engineered for the<br>signal, not the shelf.</h1>
<p>Audiophile sound systems built to spec — frequency response, signal-to-noise, and nothing left to guess.</p>
<span class="cta">Shop Bookshelf Speakers</span>
</div>
</div>
<div class="section-label">Top Rated</div>
<div class="grid">
<div class="card"><div class="art a1"></div><h3>Signature HiFi Tower</h3><div class="spec">40Hz–20kHz · 8Ω</div><div class="price">$599</div></div>
<div class="card"><div class="art a2"><span class="badge">SALE</span></div><h3>Ai61 Powered Bookshelf</h3><div class="spec">Bluetooth 5.0 aptX</div><div class="price">$329</div></div>
<div class="card"><div class="art a3"></div><h3>RT85 Turntable</h3><div class="spec">Belt-Drive · Bamboo Plinth</div><div class="price">$449</div></div>
<div class="card"><div class="art a4"></div><h3>AB40 Soundbar</h3><div class="spec">2.1 Channel · Sub Included</div><div class="price">$249</div></div>
</div>
<footer>
<span>SPEC SHEET DOWNLOADS</span><span>ROOM PAIRING GUIDE</span><span>5-YEAR WARRANTY</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf3f4; color: #290217;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf3f4; color: #290217;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #290217; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #7c1c2f; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #faf3f4; color: #290217;
border: 1px solid #7c1c2f; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #faf3f4; color: #290217;
border: 1px solid #c6b7bd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #00bbff; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#faf3f4; font-family:'Inter','TWKLausanne',sans-serif; color:#272d45; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-weight:600;font-size:19px;color:#290217;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:500;color:#290217;}
.cart{width:96px;height:40px;border-radius:9999px;background:#7c1c2f;color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.hero{height:246px;display:flex;align-items:center;padding:0 40px;gap:30px;}
.herotext{width:46%;}
.herotext h1{font-size:32px;font-weight:600;color:#290217;margin:0 0 12px;line-height:1.2;}
.herotext p{font-size:14px;color:#272d45;margin:0 0 18px;max-width:300px;}
.herocta{display:inline-block;background:#7c1c2f;color:#fff;font-size:16px;font-weight:600;border-radius:9999px;padding:14px 32px;}
.heroimg{width:46%;height:180px;border-radius:20px;background:radial-gradient(circle at 35% 30%,#00bbff,#7c1c2f 75%);position:relative;overflow:hidden;}
.heroimg:before{content:'';position:absolute;width:100px;height:100px;border-radius:50%;border:6px solid #e6c4c7;top:36px;left:50px;}
.grid{display:flex;gap:16px;padding:20px 40px 0;}
.card{width:196px;background:#f7f7f8;border-radius:12px;padding:12px;}
.badge{display:inline-block;background:#00bbff;color:#fff;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:9999px;padding:3px 10px;margin-bottom:8px;}
.thumb{height:96px;border-radius:12px;margin-bottom:8px;}
.ptitle{font-size:16px;font-weight:600;color:#290217;}
.pprice{font-size:16px;font-weight:600;color:#7c1c2f;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#290217;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.footer span{color:#e6c4c7;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Solawave</div>
<div class="navlinks"><span>Wands</span><span>Serums</span><span>Skin Care</span><span>Reviews</span></div>
<div class="cart">Bag (1)</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Red-light therapy, made for your morning.</h1>
<p>Clinical-grade skincare technology in a warm, approachable ritual.</p>
<div class="herocta">Shop The Wand</div>
</div>
<div class="heroimg"></div>
</div>
<div class="grid">
<div class="card"><span class="badge">Best Seller</span><div class="thumb" style="background:linear-gradient(135deg,#00bbff,#7c1c2f)"></div><div class="ptitle">4-in-1 Radiant Renewal Wand</div><div class="pprice">$119</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7c1c2f,#e6c4c7)"></div><div class="ptitle">Renew Complex Serum</div><div class="pprice">$59</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e6c4c7,#00bbff)"></div><div class="ptitle">Eye Perfecting Mask</div><div class="pprice">$45</div></div>
</div>
<div class="footer"><span>© Solawave — red-light for real life</span><span>Clinical Studies · FAQ</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0b0c0f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0b0c0f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8c8c8e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #151619; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0b0c0f; color: #ffffff;
border: 1px solid #151619; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0b0c0f; color: #f5f5f5;
border: 1px solid #303134; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8e; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0d0e11; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0B0C0F; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:16px 28px 8px; }
.brand { font-size:20px; font-weight:800; letter-spacing:-0.3px; color:#fff; margin:0; }
.icons { display:flex; gap:20px; color:#A0A4AB; font-size:14px; }
.hubs { display:flex; gap:12px; padding:8px 28px 18px; overflow:hidden; }
.hub { height:32px; padding:0 16px; background:#1E2024; border-radius:8px; display:flex; align-items:center;
font-size:12px; font-weight:600; color:#fff; white-space:nowrap; }
.hub.on { background:#1CE783; color:#0B0C0F; }
.rail { padding:0 28px 24px; }
.rail-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.rail-title { font-size:20px; font-weight:800; letter-spacing:-0.3px; margin:0; }
.rail-title .eyebrow { display:block; font-size:11px; font-weight:800; letter-spacing:0.06em; color:#1CE783; text-transform:uppercase; margin-bottom:2px; }
.seeall { font-size:12px; font-weight:600; color:#A0A4AB; }
.tiles { display:flex; gap:12px; }
.tile { width:196px; flex:0 0 auto; }
.thumb { width:196px; height:110px; border-radius:6px; position:relative; overflow:hidden;
background:linear-gradient(135deg,#2A2D33,#151619); }
.thumb.a { background:linear-gradient(135deg,#3a2f45,#151619); }
.thumb.b { background:linear-gradient(135deg,#1f3a35,#151619); }
.thumb.c { background:linear-gradient(135deg,#3a1f24,#151619); }
.thumb.d { background:linear-gradient(135deg,#26314a,#151619); }
.prog { position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,0.25); }
.prog i { display:block; height:4px; background:#1CE783; }
.badge-new { position:absolute; top:8px; left:8px; background:#1CE783; color:#0B0C0F; font-size:10px; font-weight:800;
letter-spacing:0.04em; padding:2px 6px; border-radius:4px; text-transform:uppercase; }
.ttitle { font-size:15px; font-weight:600; margin:8px 0 2px; }
.tsub { font-size:12px; color:#A0A4AB; }
.hero-strip { margin:6px 28px 0; height:130px; border-radius:10px; position:relative; overflow:hidden;
background:linear-gradient(120deg,#1a2e24,#0B0C0F 70%); display:flex; align-items:flex-end; padding:16px 20px; }
.hero-strip::after { content:''; position:absolute; right:-40px; top:-40px; width:220px; height:220px; border-radius:50%;
background:radial-gradient(circle, rgba(28,231,131,0.16), transparent 70%); }
.watchbtn { position:relative; z-index:2; background:#1CE783; color:#0B0C0F; font-weight:800; font-size:13px;
border-radius:8px; padding:9px 16px; display:flex; align-items:center; gap:6px; box-shadow:0 8px 24px rgba(28,231,131,0.30); }
.herotext { position:relative; z-index:2; }
.herotext .k { font-size:11px; font-weight:800; letter-spacing:0.06em; color:#1CE783; text-transform:uppercase; }
.herotext h2 { margin:2px 0 10px; font-size:24px; font-weight:800; letter-spacing:-0.4px; }
</style></head>
<body>
<div class="topbar">
<p class="brand">Hulu (iOS)</p>
<div class="icons"><span>●●● Home</span><span>Hubs</span><span>My Stuff</span><span>⚲</span></div>
</div>
<div class="hubs">
<div class="hub on">Hulu Originals</div>
<div class="hub">Disney</div>
<div class="hub">FX</div>
<div class="hub">HBO</div>
<div class="hub">Live TV</div>
</div>
<div class="hero-strip">
<div class="herotext">
<span class="k">New Episode</span>
<h2>Only Murders in the Building</h2>
<div class="watchbtn">▶ Watch</div>
</div>
</div>
<div class="rail" style="margin-top:20px;">
<div class="rail-head">
<h3 class="rail-title"><span class="eyebrow">Continue Watching</span></h3>
<span class="seeall">See All</span>
</div>
<div class="tiles">
<div class="tile"><div class="thumb a"><div class="prog"><i style="width:64%"></i></div></div>
<div class="ttitle">The Bear</div><div class="tsub">S3 · E4 · 24 min left</div></div>
<div class="tile"><div class="thumb b"><div class="prog"><i style="width:22%"></i></div></div>
<div class="ttitle">Shogun</div><div class="tsub">S1 · E7 · 41 min left</div></div>
<div class="tile"><div class="thumb c"><div class="badge-new">New</div><div class="prog"><i style="width:8%"></i></div></div>
<div class="ttitle">Only Murders</div><div class="tsub">New episode</div></div>
<div class="tile"><div class="thumb d"><div class="prog"><i style="width:90%"></i></div></div>
<div class="ttitle">Abbott Elementary</div><div class="tsub">S3 · E2 · 4 min left</div></div>
</div>
</div>
<div class="rail">
<div class="rail-head"><h3 class="rail-title">TV You Might Like</h3><span class="seeall">See All</span></div>
<div class="tiles">
<div class="tile"><div class="thumb d"></div><div class="ttitle">Reservation Dogs</div><div class="tsub">2024 · TV-MA · 3 Seasons</div></div>
<div class="tile"><div class="thumb a"></div><div class="ttitle">What We Do in the Shadows</div><div class="tsub">2024 · TV-14 · 6 Seasons</div></div>
<div class="tile"><div class="thumb b"></div><div class="ttitle">Death and Other Details</div><div class="tsub">2024 · TV-14 · 1 Season</div></div>
<div class="tile"><div class="thumb c"></div><div class="ttitle">Ranma 1/2</div><div class="tsub">2024 · TV-14 · New</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3f3fff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3f3fff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a3a3fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2f2fae; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3f3fff; color: #ffffff;
border: 1px solid #2f2fae; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3f3fff; color: #f5f5f5;
border: 1px solid #5c5cfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a3a3fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3c3cf2; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body {
display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#181818; box-sizing:border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
header { flex:0 0 64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #ebebeb; }
.brand { font-size:17px; font-weight:700; margin:0; }
.tabs { display:flex; gap:22px; }
.tab { font-size:13px; font-weight:500; color:#6d6d6d; padding-bottom:6px; border-bottom:2px solid transparent; }
.tab.active { color:#3f3fff; border-bottom-color:#3f3fff; font-weight:600; }
.search { background:#f5f5f5; border-radius:9999px; padding:8px 16px; font-size:12px; color:#989898; width:180px; }
.content { flex:1 1 auto; padding:20px 32px 4px; overflow:hidden; }
.crow { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.crow h2 { font-size:16px; font-weight:600; margin:0; }
.crow span { font-size:12px; color:#3f3fff; font-weight:500; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.album { display:flex; flex-direction:column; gap:6px; }
.thumb { width:100%; aspect-ratio:1/1; border-radius:6px; }
.album b { font-size:13px; font-weight:600; line-height:1.2; }
.album span { font-size:12px; color:#989898; }
.playerbar { flex:0 0 72px; border-top:1px solid #ebebeb; display:flex; align-items:center; gap:16px; padding:0 32px; }
.pthumb { width:44px; height:44px; border-radius:6px; background:linear-gradient(135deg,#3f3fff,#7286ff); flex:0 0 44px; }
.pmeta { flex:0 0 150px; }
.pmeta b { font-size:13px; font-weight:600; display:block; }
.pmeta span { font-size:11px; color:#989898; }
.controls { display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.play-circle { width:32px; height:32px; border-radius:50%; background:#3f3fff; display:flex; align-items:center; justify-content:center; }
.play-circle .tri { width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid #ffffff; margin-left:2px; }
.skip { width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:8px solid #6d6d6d; }
.progresswrap { flex:1 1 auto; display:flex; align-items:center; gap:8px; }
.progresswrap span { font-size:11px; color:#989898; }
.track { flex:1 1 auto; height:4px; border-radius:9999px; background:#323232; position:relative; overflow:hidden; }
.trackfill { position:absolute; left:0; top:0; bottom:0; width:38%; background:#3f3fff; border-radius:9999px; }
</style></head>
<body>
<header>
<p class="brand">FLO</p>
<div class="tabs"><span class="tab active">Home</span><span class="tab">Search</span><span class="tab">Library</span><span class="tab">Charts</span></div>
<span class="search">Search songs, artists</span>
</header>
<div class="content">
<div class="crow"><h2>Your Daily Mix</h2><span>See all</span></div>
<div class="grid">
<div class="album"><span class="thumb" style="background:linear-gradient(135deg,#3f3fff,#7286ff)"></span><b>Night Drive</b><span>Yuna Park</span></div>
<div class="album"><span class="thumb" style="background:linear-gradient(135deg,#525cfd,#3f3fff)"></span><b>Paper Moon</b><span>Jiho Lee</span></div>
<div class="album"><span class="thumb" style="background:linear-gradient(135deg,#576aff,#181818)"></span><b>Slow Tape</b><span>Minho Kim</span></div>
<div class="album"><span class="thumb" style="background:linear-gradient(135deg,#7286ff,#f5f5f5)"></span><b>Coastline</b><span>Suji Kang</span></div>
<div class="album"><span class="thumb" style="background:linear-gradient(135deg,#181818,#3f3fff)"></span><b>Static Bloom</b><span>Doyun Bae</span></div>
<div class="album"><span class="thumb" style="background:linear-gradient(135deg,#3f3fff,#525cfd)"></span><b>Afterglow</b><span>Harin Oh</span></div>
<div class="album"><span class="thumb" style="background:linear-gradient(135deg,#7286ff,#576aff)"></span><b>Blue Hour</b><span>Junseo Yoon</span></div>
<div class="album"><span class="thumb" style="background:linear-gradient(135deg,#323232,#576aff)"></span><b>Rewind</b><span>Aeri Song</span></div>
</div>
</div>
<div class="playerbar">
<span class="pthumb"></span>
<div class="pmeta"><b>Night Drive</b><span>Yuna Park</span></div>
<div class="controls"><span class="skip" style="transform:scaleX(-1)"></span><span class="play-circle"><span class="tri"></span></span><span class="skip"></span></div>
<div class="progresswrap"><span>1:24</span><span class="track"><span class="trackfill"></span></span><span>3:42</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; background: #bf0000; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; background: #ffffff; color: #1a1a1a;
border: 1px solid #bf0000; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #333333;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #bf0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:Georgia,'Times New Roman',Times,serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e6e6e6;font-family:'Trebuchet MS',Trebuchet,Arial,sans-serif;}
.logo{font-size:19px;font-weight:600;color:#bf0000;}
.navlinks{display:flex;gap:20px;font-size:14px;}
.tab.active{color:#bf0000;border-bottom:2px solid #bf0000;padding-bottom:16px;}
.hero{padding:22px 32px 0;}
.hero h1{font-family:'Trebuchet MS',Arial,sans-serif;font-size:26px;font-weight:600;margin:0 0 8px;}
.hero p{font-size:16px;color:#333;margin:0 0 16px;max-width:480px;}
.btn{display:inline-block;background:#bf0000;color:#fff;font-family:'Trebuchet MS',Arial,sans-serif;font-size:15px;font-weight:600;padding:10px 22px;border-radius:4px;}
.progresswrap{padding:14px 32px 0;max-width:420px;}
.plabel{font-family:'Trebuchet MS',Arial,sans-serif;font-size:12px;color:#666;margin-bottom:4px;}
.progress{height:4px;background:#e6e6e6;border-radius:9999px;}
.progressfill{width:62%;height:4px;background:#bf0000;border-radius:9999px;}
.sec{padding:20px 32px 0;}
.sectitle{font-family:'Trebuchet MS',Arial,sans-serif;font-size:18px;font-weight:600;margin-bottom:12px;}
.grid{display:flex;gap:16px;}
.card{width:184px;background:#fff;border-radius:4px;padding:12px;position:relative;box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.badge{position:absolute;top:6px;left:6px;background:#bf0000;color:#fff;font-family:'Trebuchet MS',Arial,sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.cover{aspect-ratio:1/1;border-radius:4px;margin-bottom:8px;}
.ptitle{font-family:'Trebuchet MS',Arial,sans-serif;font-size:18px;font-weight:600;margin:0;}
.author{font-size:14px;color:#666;margin:4px 0;}
.pprice{font-family:'Trebuchet MS',Arial,sans-serif;font-size:15px;font-weight:600;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#f5f5f5;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-family:'Trebuchet MS',Arial,sans-serif;font-size:12px;color:#666;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kobo Audiobooks</div>
<div class="navlinks"><div class="tab active">Audiobooks</div><div class="tab">Books</div><div class="tab">eReaders</div><div class="tab">Blog</div></div>
</div>
<div class="hero">
<h1>Long-form reading, told out loud.</h1>
<p>Serious listeners deserve a serious library — every audiobook you've ever wanted, one tap away.</p>
<div class="btn">Buy Now</div>
</div>
<div class="progresswrap">
<div class="plabel">Continue Listening — Chapter 9 of 14</div>
<div class="progress"><div class="progressfill"></div></div>
</div>
<div class="sec">
<div class="sectitle">Bestselling Audiobooks</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="cover" style="background:linear-gradient(160deg,#bf0000,#1a1a1a)"></div><div class="ptitle">The Salt Line</div><div class="author">N. Everhart</div><div class="pprice">$19.99</div></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#1a1a1a,#666)"></div><div class="ptitle">Harbor of Bones</div><div class="author">C. Whitfield</div><div class="pprice">$17.99</div></div>
<div class="card"><div class="badge">Sale</div><div class="cover" style="background:linear-gradient(160deg,#666,#bf0000)"></div><div class="ptitle">A Quiet Reckoning</div><div class="author">P. Oduya</div><div class="pprice">$14.99</div></div>
</div>
</div>
<div class="footer"><span>My Library · Wish List</span><span>Help & Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0056b3; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0056b3; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87add7; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f9f9f9; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0056b3; color: #f9f9f9;
border: 1px solid #f9f9f9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0056b3; color: #f5f5f5;
border: 1px solid #276fbe; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87add7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2870be; color: #f9f9f9;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9f9f9; color:#212529; box-sizing:border-box;
font-family:"Microsoft JhengHei", -apple-system, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #e3e3e3; }
.brand { font-size:16px; font-weight:700; color:#212529; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#212529; }
.login { color:#0056b3; font-size:14px; }
.band { padding:16px 40px; }
.band h1 { font-size:18px; font-weight:700; margin:0 0 4px; }
.band p { font-size:14px; color:#212529; margin:0 0 14px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.card { background:transparent; border:1px solid #e3e3e3; padding:14px; height:150px; }
.card .tag { font-size:12px; color:#0056b3; }
.card h3 { font-size:15px; font-weight:700; margin:8px 0 6px; }
.card p { font-size:12px; color:#212529; line-height:1.5; margin:0; }
.card .link { color:#0056b3; font-size:12px; margin-top:8px; display:inline-block; }
.personal { padding:16px 40px 0; }
.personal h2 { font-size:16px; font-weight:700; margin:0 0 10px; }
.row { display:flex; gap:0; }
.item { flex:1; background:#fff; border:1px solid #e3e3e3; padding:12px 14px; font-size:13px; }
.item .label { color:#0056b3; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #e3e3e3; background:#fff;
padding:10px 40px; display:flex; justify-content:space-between; font-size:11px; color:#212529; }
</style></head>
<body>
<nav>
<div class="brand">Taishin Bank</div>
<div class="navlinks"><span>Personal</span><span>Corporate</span><span>Wealth Management</span><span>Digital Finance</span></div>
<span class="login">Log in</span>
</nav>
<div class="band">
<h1>Investment products</h1>
<p>Fund and market information for personal banking customers.</p>
<div class="cards">
<div class="card"><span class="tag">Fund</span><h3>Global Balanced Fund</h3><p>Diversified allocation across equities and bonds.</p><span class="link">View details</span></div>
<div class="card"><span class="tag">Fund</span><h3>Asia Growth Fund</h3><p>Regional growth exposure for long-term investors.</p><span class="link">View details</span></div>
<div class="card"><span class="tag">Fund</span><h3>Fixed Income Fund</h3><p>Stable income allocation for conservative portfolios.</p><span class="link">View details</span></div>
</div>
</div>
<div class="personal">
<h2>Personal banking</h2>
<div class="row">
<div class="item"><span class="label">Deposits</span><br>Savings and time deposit accounts</div>
<div class="item"><span class="label">Loans</span><br>Mortgage and personal loan services</div>
<div class="item"><span class="label">Cards</span><br>Credit and debit card products</div>
</div>
</div>
<footer><span>© Taishin Bank</span><span>Taishin Bank · About · Fair Treatment · Support</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3282f0; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3282f0; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9dc1f3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6741d9; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3282f0; color: #000000;
border: 1px solid #6741d9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3282f0; color: #f5f5f5;
border: 1px solid #5194f1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9dc1f3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3a78ec; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f1f3f5; color:#1d2024; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#ffffff; border-bottom:1px solid #dee3e8; }
.brand { font-size:16px; font-weight:700; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; color:#9ca5ad; }
.navlinks span.on { color:#1d2024; font-weight:700; }
.cta { background:#3282f0; color:#ffffff; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:700; }
.stat { padding:20px 32px 6px; display:flex; align-items:baseline; justify-content:space-between; }
.stat-left .label { font-size:12px; color:#858d94; margin:0 0 4px; }
.stat-left .num { font-size:34px; font-weight:400; letter-spacing:-0.8px; color:#3c3c3c; margin:0; }
.pill-purple { background:rgba(103,65,217,0.1); color:#6741d9; border-radius:6px; padding:7px 14px; font-size:12px; font-weight:700; }
.section { padding:14px 32px 8px; }
.section h2 { font-size:19px; font-weight:700; letter-spacing:-0.4px; margin:0; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 32px 18px; }
.prod { background:#ffffff; border:1px solid #dee3e8; border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:8px; }
.prod-top { display:flex; align-items:center; justify-content:space-between; }
.grade { color:#ffffff; border-radius:4px; padding:2px 8px; font-size:12px; font-weight:400; }
.grade.b { background:#3770b2; }
.grade.a { background:#4a7656; }
.grade.c { background:#8884c9; }
.rate { font-size:12px; color:#3282f0; font-weight:700; }
.prod h3 { font-size:14px; font-weight:700; margin:0; line-height:1.35; }
.prod .meta { font-size:11px; color:#606060; }
.bar { height:5px; border-radius:9999px; background:#f1f3f5; overflow:hidden; }
.bar i { display:block; height:100%; background:#3282f0; }
.prod-bottom { display:flex; justify-content:space-between; font-size:11px; color:#858d94; }
.disclose { margin:0 32px; background:#ffffff; border:1px solid #dee3e8; border-radius:10px; padding:14px 18px;
display:flex; gap:22px; }
.disclose span { font-size:13px; color:#9ca5ad; }
.disclose span.on { color:#1d2024; font-weight:700; }
</style></head>
<body>
<nav>
<p class="brand">8percent</p>
<div class="navlinks"><span class="on">Products</span><span>My Investments</span><span>Disclosures</span><span>Press</span></div>
<div class="cta">Invest Now</div>
</nav>
<section class="stat">
<div class="stat-left">
<p class="label">Cumulative Loan Volume</p>
<p class="num">₩1,395,528,150,000</p>
</div>
<span class="pill-purple">Press coverage →</span>
</section>
<section class="section"><h2>Products Now Funding</h2></section>
<div class="grid">
<div class="prod">
<div class="prod-top"><span class="grade b">B</span><span class="rate">9.8% APR</span></div>
<h3>Small Business Working Capital, 12mo Term</h3>
<div class="bar"><i style="width:68%"></i></div>
<div class="prod-bottom"><span>68% funded</span><span>3 days left</span></div>
</div>
<div class="prod">
<div class="prod-top"><span class="grade a">A</span><span class="rate">7.2% APR</span></div>
<h3>Real Estate Backed Note, 24mo Term</h3>
<div class="bar"><i style="width:91%"></i></div>
<div class="prod-bottom"><span>91% funded</span><span>1 day left</span></div>
</div>
<div class="prod">
<div class="prod-top"><span class="grade c">C</span><span class="rate">12.4% APR</span></div>
<h3>Consumer Refinance Bundle, 18mo Term</h3>
<div class="bar"><i style="width:44%"></i></div>
<div class="prod-bottom"><span>44% funded</span><span>6 days left</span></div>
</div>
</div>
<div class="disclose">
<span class="on">Management Status</span>
<span>Usage Info</span>
<span>Origination Records</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #09aa5c; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #09aa5c; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00de5a; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #09aa5c; color: #000000;
border: 1px solid #00de5a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #09aa5c; color: #f5f5f5;
border: 1px solid #2fb674; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #08b25c; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1e1e23; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
* { box-sizing:border-box; }
.display { font-family:"NanumSquareNeo", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#ffffff; border-bottom:1px solid #dcdee0; }
.brand { font-size:18px; font-weight:700; margin:0; color:#1e1e23; }
.navlinks { display:flex; gap:26px; font-size:16px; color:#767678; }
.btnSecondary { background:#ffffff; color:#1e1e23; border:1px solid #dcdee0; border-radius:6px; padding:10px 13px;
font-size:16px; font-weight:500; }
.stepBar { display:flex; align-items:center; gap:8px; padding:16px 40px 0; font-size:12px; color:#767678; }
.stepBar b { color:#09aa5c; }
main { display:flex; gap:24px; padding:16px 40px 0; height:410px; }
.colLeft { flex:1.2; display:flex; flex-direction:column; gap:14px; }
.orderCard { background:#f6f8fa; border-radius:20px; padding:20px 22px; }
.orderCard h3 { font-size:16px; font-weight:600; color:#1e1e23; margin:0 0 12px; }
.lineItem { display:flex; justify-content:space-between; font-size:14px; color:#404048; padding:7px 0; }
.lineItem b { color:#1e1e23; font-weight:600; }
.divider { height:1px; background:#dcdee0; margin:6px 0; }
.totalRow { display:flex; justify-content:space-between; font-size:18px; font-weight:700; color:#1e1e23; padding-top:4px; }
.badgeGreen { display:inline-flex; align-items:center; background:#eef9f3; color:#09aa5c; border-radius:9999px;
padding:5px 14px; font-size:12px; width:fit-content; }
.guideCard { background:#eef9f3; border-radius:12px; padding:18px 20px; color:#404048; font-size:13px; line-height:1.5; }
.guideCard b { color:#09aa5c; }
.colRight { width:280px; flex:0 0 auto; }
.payPanel { background:#ffffff; border:1px solid #dcdee0; border-radius:20px; padding:22px; }
.payPanel h4 { font-size:16px; font-weight:600; margin:0 0 12px; color:#1e1e23; }
.field { border:1px solid #dcdee0; border-radius:6px; height:44px; display:flex; align-items:center;
padding:0 12px; font-size:16px; color:#1e1e23; margin-bottom:10px; }
.field.focus { border:1px solid #09aa5c; }
.payBtn { background:#09aa5c; color:#ffffff; border-radius:8px; height:52px; width:100%; display:flex;
align-items:center; justify-content:center; font-size:16px; font-weight:700; margin-top:6px; }
.amountLine { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.amountLine .amt { font-size:24px; font-weight:700; color:#1e1e23; }
.amountLine .lbl { font-size:13px; color:#767678; }
footer { height:36px; border-top:1px solid #dcdee0; padding:0 40px; display:flex; align-items:center;
justify-content:space-between; font-size:12px; color:#767678; background:#ffffff; }
footer a { color:#007eff; }
</style></head>
<body>
<nav>
<p class="brand">Naver Pay</p>
<div class="navlinks"><span>Shop</span><span>Benefits</span><span>Support</span></div>
<button class="btnSecondary">Log In</button>
</nav>
<div class="stepBar">Cart → <b>Payment</b> → Confirmation</div>
<main>
<div class="colLeft">
<div class="orderCard">
<h3>Order Summary</h3>
<div class="lineItem"><span>Wireless Noise-Canceling Headphones</span><b>$189.00</b></div>
<div class="lineItem"><span>Shipping</span><b>Free</b></div>
<div class="divider"></div>
<div class="lineItem"><span>Points Applied</span><b>-$5.00</b></div>
<div class="totalRow"><span>Total</span><span>$184.00</span></div>
</div>
<span class="badgeGreen">+2% Points on this purchase</span>
<div class="guideCard">Pay instantly using your existing <b>Naver Pay</b> account — no need to re-enter your card details. Points are credited automatically after checkout.</div>
</div>
<div class="colRight">
<div class="payPanel">
<h4 class="display">Confirm Payment</h4>
<div class="amountLine"><span class="lbl">Amount due</span><span class="amt">$184.00</span></div>
<div class="field">010 - •••• - ••••</div>
<div class="field focus">Verification code</div>
<div class="payBtn">Pay Now</div>
</div>
</div>
</main>
<footer>
<span>© Naver Pay</span>
<span><a>Merchant Center</a> · <a>Help</a> · <a>Terms</a></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdfbf8; color: #000914;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdfbf8; color: #000914;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #000914; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #732a18; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #7f2549; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #fdfbf8; color: #7f2549;
border: 1px solid #7f2549; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; background: #fdfbf8; color: #000914;
border: 1px solid #bebebf; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #732a18; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #da532c; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fdfbf8; color:#000914; font-family:-apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;}
.navlinks .active{color:#7f2549;border-bottom:2px solid #7f2549;padding-bottom:22px;}
.hero{height:230px;display:flex;background:#ffdcc6;}
.herotext{width:48%;padding:0 32px;display:flex;flex-direction:column;justify-content:center;}
.herotext h1{font-size:32px;font-weight:700;letter-spacing:-0.5px;margin:0 0 10px;line-height:1.2;}
.herotext p{font-size:15px;color:#732a18;margin:0 0 16px;max-width:300px;}
.herocta{width:fit-content;background:#7f2549;color:#fff;font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:14px 32px;border-radius:9999px;}
.heroimg{width:52%;position:relative;overflow:hidden;}
.blush{position:absolute;right:100px;top:50px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle at 40% 40%, #e5955b, #7f2549 80%);}
.blush2{position:absolute;right:60px;top:110px;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle at 40% 40%, #ebb288, #c86128 80%);}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:206px;background:#fdfbf8;border-radius:20px 20px 12px 12px;box-shadow:0 2px 8px rgba(0,0,0,0.08);overflow:hidden;}
.thumb{height:100px;background:linear-gradient(160deg,#ffdcc6,#7f2549);position:relative;}
.swatch{position:absolute;bottom:8px;left:8px;width:16px;height:16px;border-radius:50%;border:2px solid #fdfbf8;box-shadow:0 0 0 1px #dedede;}
.body{padding:10px 14px 14px;}
.ptitle{font-size:14px;color:#121212;}
.pprice{font-size:16px;font-weight:600;margin-top:4px;}
.stars{color:#7f2549;font-size:12px;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#000914;color:#fdfbf8;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Rare Beauty</div>
<div class="navlinks"><div class="active">Face</div><div>Lips</div><div>Eyes</div><div>Sets</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Makeup made to feel good.</h1>
<p>Vegan, cruelty-free color that celebrates confidence over cover-up.</p>
<div class="herocta">Shop Best Sellers</div>
</div>
<div class="heroimg"><div class="blush"></div><div class="blush2"></div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="swatch" style="background:#e5955b;"></span></div><div class="body"><div class="ptitle">Soft Pinch Liquid Blush</div><div class="pprice">$23.00</div><div class="stars">★★★★★ 4.9</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#ebb288,#732a18);"><span class="swatch" style="background:#c86128;"></span></div><div class="body"><div class="ptitle">Kind Words Lipstick</div><div class="pprice">$20.00</div><div class="stars">★★★★★ 4.8</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#5bbad5,#136f99);"><span class="swatch" style="background:#1990c6;"></span></div><div class="body"><div class="ptitle">Positive Light Highlighter</div><div class="pprice">$22.00</div><div class="stars">★★★★★ 4.9</div></div></div>
</div>
<div class="footer"><span>© Rare Beauty</span><span>1% for the Rare Impact Fund</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #4f4c4d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #2585a4; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #2585a4;
border: 1px solid #2585a4; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4f4c4d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.8px; background: #334fb4; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Montserrat,Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.promo{height:32px;background:#334fb4;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;}
.nav{height:64px;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:800;color:#2585a4;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;}
.search{width:220px;height:36px;background:#f3f5f6;border-radius:8px;font-size:11px;color:#4f4c4d;display:flex;align-items:center;padding:0 14px;}
.trust{display:flex;gap:12px;padding:14px 32px 0;}
.tbadge{background:#f3f5f6;border-radius:8px;padding:8px 14px;font-size:11px;color:#242833;}
.hero{height:180px;background:#2585a4;display:flex;align-items:center;padding:0 32px;margin-top:14px;}
.herotext h1{font-size:34px;font-weight:800;color:#fff;margin:0 0 8px;line-height:1.15;}
.herotext p{font-size:14px;color:#e0f0f5;margin:0 0 14px;max-width:400px;}
.cta{display:inline-block;background:#fff;color:#2585a4;font-size:14px;font-weight:600;padding:12px 24px;border-radius:8px;}
.grid{display:flex;gap:14px;padding:20px 32px 0;}
.card{width:196px;background:#f3f3f3;border-radius:8px;padding:14px;position:relative;}
.thumb{height:110px;background:#fff;border-radius:8px;margin-bottom:8px;}
.salebadge{position:absolute;top:22px;left:22px;background:#334fb4;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.pname{font-size:14px;font-weight:600;}
.pprice{font-size:20px;font-weight:700;margin-top:4px;}
.pstrike{font-size:14px;color:#4f4c4d;text-decoration:line-through;margin-left:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#242833;color:#f3f5f6;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;border-top:3px solid #2585a4;}
.footer span{margin-left:16px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="promo">Free Shipping on Orders $75+</div>
<div class="nav">
<div class="logo">Oreck</div>
<div class="navlinks"><div>Vacuums</div><div>Air Purifiers</div><div>Parts</div><div>Support</div></div>
<div class="search">Search vacuums...</div>
</div>
<div class="trust">
<div class="tbadge">HEPA Certified</div><div class="tbadge">10-Year Warranty</div><div class="tbadge">Free Returns</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Engineered to Weigh Less. Built to Last Longer.</h1>
<p>Vacuums and air purifiers trusted by hotels for decades.</p>
<div class="cta">Shop Vacuums</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2585a4,#f3f3f3)"></div><div class="salebadge">Sale</div><div class="pname">Elevate Conquer Upright</div><div class="pprice">$249<span class="pstrike">$299</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#334fb4,#f3f3f3)"></div><div class="pname">Commercial XL Pro</div><div class="pprice">$399</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a6e8a,#f3f3f3)"></div><div class="pname">Airfeather Lite</div><div class="pprice">$179</div></div>
</div>
<div class="footer"><span>© Engineered Since 1963</span><span>Warranty<span> Manuals<span> Contact</span></span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #006bd6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #006bd6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b7e7; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0090ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #006bd6; color: #ffffff;
border: 1px solid #0090ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #006bd6; color: #f5f5f5;
border: 1px solid #2781db; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b7e7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0071dd; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#17181B; box-sizing:border-box;
font-family:"Segoe UI", -apple-system, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #DDE4EB; }
.brand { font-size:16px; font-weight:700; color:#006BD6; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; color:#17181B; }
.signin { border:1px solid #AEB3BB; color:#79818F; border-radius:3px; padding:4px 10px; font-size:12px; }
.toolbar { display:flex; align-items:center; justify-content:space-between; padding:14px 32px;
background:#f7faff; }
.pairname { font-size:20px; font-weight:700; }
.pairprice { font-size:26px; font-weight:700; color:#0090FF; margin-left:10px; }
.pairchg { font-size:13px; color:#0090FF; margin-left:8px; }
.buysell { display:flex; gap:8px; }
.btn-buy { background:#0090FF; color:#fff; border-radius:6px; padding:8px 18px; font-size:13px; font-weight:500; }
.btn-sell { background:#ffffff; border:1px solid #DDE4EB; color:#17181B; border-radius:6px; padding:8px 18px; font-size:13px; font-weight:500; }
table { width:100%; border-collapse:collapse; margin-top:2px; }
thead td { font-size:11px; color:#79818F; padding:8px 32px; border-bottom:1px solid #DDE4EB; }
tbody td { font-size:13px; padding:9px 32px; border-bottom:1px solid #DDE4EB; }
.up { color:#0090FF; } .down { color:#e05353; }
.coin { font-weight:500; }
.sub { color:#79818F; font-size:11px; margin-left:6px; }
</style></head>
<body>
<nav>
<p class="brand">Coinone</p>
<div class="navlinks"><span>Exchange</span><span>Deposit/Withdraw</span><span>Promotions</span><span>Support</span></div>
<span class="signin">Sign In</span>
</nav>
<div class="toolbar">
<div>
<span class="pairname">BTC/KRW</span>
<span class="pairprice">142,580,000</span>
<span class="pairchg">+2.14%</span>
</div>
<div class="buysell">
<button class="btn-buy">Buy</button>
<button class="btn-sell">Sell</button>
</div>
</div>
<table>
<thead><tr><td>Coin</td><td>Price</td><td>Change</td><td>Volume</td></tr></thead>
<tbody>
<tr><td class="coin">Ethereum <span class="sub">ETH</span></td><td>5,231,000</td><td class="up">+1.82%</td><td>41.2B</td></tr>
<tr><td class="coin">Ripple <span class="sub">XRP</span></td><td>812</td><td class="down">-0.64%</td><td>9.8B</td></tr>
<tr><td class="coin">Solana <span class="sub">SOL</span></td><td>231,400</td><td class="up">+4.23%</td><td>25.6B</td></tr>
<tr><td class="coin">Cardano <span class="sub">ADA</span></td><td>612</td><td class="up">+0.51%</td><td>4.4B</td></tr>
<tr><td class="coin">Dogecoin <span class="sub">DOGE</span></td><td>214</td><td class="down">-1.12%</td><td>7.7B</td></tr>
<tr><td class="coin">Polkadot <span class="sub">DOT</span></td><td>7,140</td><td class="up">+0.94%</td><td>3.1B</td></tr>
</tbody>
</table>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #919191; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #f26322; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #1c1c1c;
border: 1px solid #f26322; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1c1c1c;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #919191; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #c00000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c1c1c; box-sizing:border-box;
font-family:'Acumin Pro','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.ribbon { height:32px; background:#f26322; color:#fff; font-size:12px; font-weight:500; display:flex; align-items:center; justify-content:center; letter-spacing:0.2px; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #d9d9d9; }
.brand { font-size:20px; font-weight:700; text-transform:uppercase; margin:0; font-family:Impact,'Arial Black',sans-serif; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; text-transform:uppercase; color:#1c1c1c; }
.navlinks span.on { color:#f26322; }
.util { font-size:12px; color:#58595b; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 96px); }
.stage { padding:24px; border-right:1px solid #d9d9d9; display:flex; flex-direction:column; gap:10px; background:#f5f5f5; }
.panel { flex:1; position:relative; overflow:hidden; border-radius:4px; background:linear-gradient(180deg,#2a2a2a,#111); }
.panel::before { content:''; position:absolute; left:8%; right:8%; top:20%; height:16px; border-radius:4px; background:linear-gradient(90deg,#6b6b6b,#2c2c2c); }
.panel::after { content:''; position:absolute; left:12%; right:12%; bottom:14%; top:42%; border-radius:4px; background:radial-gradient(circle at 35% 20%, #7a4a1c, #431c05 70%); box-shadow:inset 0 0 40px rgba(255,90,0,0.4); }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; background:#e8e8e8; border-radius:4px; }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:12px; font-weight:500; letter-spacing:0.2px; color:#58595b; }
h1 { margin:0; font-size:26px; font-weight:700; text-transform:uppercase; line-height:1.05; font-family:'CheddarGothicSans',Impact,sans-serif; }
.badge-row { display:flex; gap:6px; }
.badge-sale { background:#c00000; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:4px 8px; border-radius:4px; }
.badge-best { background:#1c1c1c; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:4px 8px; border-radius:4px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:22px; font-weight:700; font-family:'din-2014',Arial,sans-serif; }
.compare { font-size:15px; color:#919191; text-decoration:line-through; }
.feature { background:#ffe6da; border-radius:8px; padding:12px 14px; font-size:13px; color:#1c1c1c; }
.comparison { border:1px solid #d9d9d9; border-radius:8px; overflow:hidden; }
.crow { display:flex; justify-content:space-between; padding:8px 12px; font-size:13px; border-bottom:1px solid #d9d9d9; }
.crow:first-child { background:#f5f5f5; font-weight:600; }
.crow:last-child { border-bottom:none; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#f26322; color:#fff; border:none; border-radius:4px; font-size:16px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.btn-secondary { width:150px; height:48px; background:#1c1c1c; color:#fff; border:none; border-radius:4px; font-size:16px; font-weight:600; text-transform:uppercase; }
</style></head>
<body>
<div class="ribbon">Free shipping on griddles over $299 — ends soon</div>
<nav>
<p class="brand">Blackstone</p>
<div class="navlinks"><span class="on">Griddles</span><span>Accessories</span><span>Recipes</span><span>Sale</span></div>
<div class="util">Search Account Cart (2)</div>
</nav>
<main>
<div class="stage">
<div class="panel"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Original Griddle Collection</span>
<h1>36" 4-Burner Griddle with Hood</h1>
<div class="badge-row"><span class="badge-sale">Save $80</span><span class="badge-best">Best Seller</span></div>
<div class="price-row"><span class="price">$599.99</span><span class="compare">$679.99</span></div>
<div class="feature">513 sq in cooking surface across 4 independent heat zones — 60,000 BTU total output.</div>
<div class="comparison">
<div class="crow"><span>Model</span><span>Coverage</span></div>
<div class="crow"><span>36" 4-Burner</span><span>513 sq in</span></div>
<div class="crow"><span>28" 2-Burner</span><span>340 sq in</span></div>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compare Sizes</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f8f9; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f8f9; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.5; margin: 0; color: #66758c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: #ef4034; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: #ffffff; color: #231f20;
border: 1px solid #ef4034; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.5; background: #ffffff; color: #575757;
border: 1px solid #c2c2c3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #66758c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ef4034; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Infratech</title>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#f7f8f9;font-family:'Trebuchet MS','Helvetica Neue',Arial,sans-serif;color:#575757;}
*{box-sizing:border-box;}
.nav{position:absolute;top:0;left:0;width:960px;height:64px;background:#1e242b;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:1px;}
.logo b{color:#ef4034;}
.navlinks{display:flex;gap:26px;font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0.8px;}
.navlinks span:nth-child(2){color:#8c9091;}
.cta{background:#ef4034;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;border-radius:4px;padding:8px 18px;}
.hero{position:absolute;top:64px;left:0;width:960px;height:280px;background:#1e242b;display:flex;align-items:center;padding:0 48px;}
.hero::after{content:'';position:absolute;right:0;top:0;width:380px;height:280px;background:radial-gradient(ellipse at 70% 50%, #e85600 0%, #1e242b 75%);opacity:0.6;}
.heroinner{position:relative;z-index:1;}
.eyebrow{color:#afcfda;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;}
.hero h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:38px;color:#fff;margin:0 0 14px 0;line-height:1.15;}
.hero p{color:#dadee4;font-size:14px;width:340px;line-height:1.5;margin:0 0 20px 0;}
.btnrow{display:flex;gap:12px;}
.btn-primary{background:#ef4034;color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:14px 28px;border-radius:4px;}
.btn-secondary{border:1px solid #fff;color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:13px 27px;border-radius:4px;}
.wattrow{position:absolute;top:362px;left:32px;width:896px;height:60px;display:flex;gap:12px;align-items:center;}
.wsel{border:1px solid #dadee4;background:#fff;border-radius:4px;padding:14px 22px;font-size:16px;font-weight:500;color:#575757;}
.wsel.active{background:#ef4034;color:#fff;border:none;}
.grid{position:absolute;top:436px;left:32px;width:896px;height:188px;display:flex;gap:16px;}
.card{width:212px;height:188px;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.06);}
.imgbox{width:212px;height:96px;position:relative;}
.imgbox.a{background:linear-gradient(135deg,#3b4351,#ef4034);}
.imgbox.b{background:linear-gradient(135deg,#eef0f3,#bcc3ce);}
.imgbox.c{background:linear-gradient(135deg,#eae4d9,#c3b395);}
.imgbox.d{background:linear-gradient(135deg,#3d7e94,#afcfda);}
.badge{position:absolute;top:8px;left:8px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;border-radius:4px;padding:3px 8px;color:#fff;}
.badge.warranty{background:#fcc141;color:#231f20;}
.badge.energy{background:#3d7e94;}
.cardbody{padding:12px 14px;}
.title{font-size:14px;font-weight:500;color:#231f20;margin-bottom:6px;}
.price{font-size:15px;font-weight:700;color:#231f20;}
</style>
<div class="nav">
<div class="logo">Infratech</div>
<div class="navlinks"><span>PATIO HEATERS</span><span>COMMERCIAL</span><span>PARTS</span><span>DEALERS</span></div>
<div class="cta">Get a Quote</div>
</div>
<div class="hero">
<div class="heroinner">
<div class="eyebrow">Residential Heating</div>
<h1>Engineered warmth<br>for open-air living.</h1>
<p>Flush-mount infrared heaters built for hospitality patios and architect-specified residential decks.</p>
<div class="btnrow">
<div class="btn-primary">Find a Dealer</div>
<div class="btn-secondary">View Specs</div>
</div>
</div>
</div>
<div class="wattrow">
<div class="wsel active">1,500W</div>
<div class="wsel">2,000W</div>
<div class="wsel">3,000W</div>
<div class="wsel">4,000W</div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox a"><div class="badge warranty">3-Yr Warranty</div></div>
<div class="cardbody"><div class="title">WD Series Flush Mount</div><div class="price">$449.00</div></div>
</div>
<div class="card">
<div class="imgbox b"></div>
<div class="cardbody"><div class="title">SL Slimline Heater</div><div class="price">$389.00</div></div>
</div>
<div class="card">
<div class="imgbox c"><div class="badge energy">Energy Rated</div></div>
<div class="cardbody"><div class="title">C Series Comfort</div><div class="price">$529.00</div></div>
</div>
<div class="card">
<div class="imgbox d"></div>
<div class="cardbody"><div class="title">Dual Element Commercial</div><div class="price">$799.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: transparent; color: #313131;
border: 1px solid #313131; border-radius: 4px;
padding: 9px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#1a1a1a; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #313131;}
.logo{font-size:16px;font-weight:700;letter-spacing:0.5px;}
.navlinks{display:flex;gap:26px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0.3px;}
.navlinks span:first-child{border-bottom:2px solid #313131;padding-bottom:14px;}
.hero{padding:56px 64px 40px;max-width:640px;}
.hero .kicker{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:0.3px;color:#666666;margin-bottom:16px;}
.hero h1{font-size:32px;font-weight:700;line-height:1.3;margin:0 0 16px;}
.hero p{font-size:16px;line-height:1.6;color:#1a1a1a;margin:0 0 20px;max-width:520px;}
.btn{display:inline-block;border:1px solid #1a1a1a;color:#1a1a1a;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0.3px;padding:12px 24px;}
.sec{padding:0 40px;}
.sectitle{font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0.3px;color:#666666;margin-bottom:18px;border-bottom:1px solid #f5f5f5;padding-bottom:10px;}
.grid{display:flex;gap:24px;}
.card{width:200px;border:1px solid #1a1a1a;}
.cardimg{width:100%;height:150px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;font-size:11px;color:#666666;letter-spacing:0.3px;text-transform:uppercase;}
.cardbody{padding:12px;border-top:1px solid #1a1a1a;}
.cardtitle{font-size:14px;font-weight:600;line-height:1.35;margin-bottom:4px;}
.cardauthor{font-size:12px;color:#666666;margin-bottom:6px;}
.cardprice{font-size:13px;font-weight:600;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;border-top:1px solid #313131;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;color:#666666;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Melville House</div>
<div class="navlinks"><span>Books</span><span>Authors</span><span>About</span><span>News</span></div>
</div>
<div class="hero">
<div class="kicker">Independent Publishing Since 2001</div>
<h1>The interface disappears; the book remains.</h1>
<p>We publish fiction, essays, and reportage that reward slow reading. No algorithms, no urgency — just the work.</p>
<div class="btn">Browse Fall Catalog</div>
</div>
<div class="sec">
<div class="sectitle">New & Forthcoming</div>
<div class="grid">
<div class="card"><div class="cardimg">Novel</div><div class="cardbody"><div class="cardtitle">The Quiet Register</div><div class="cardauthor">A Novel</div><div class="cardprice">$26.00</div></div></div>
<div class="card"><div class="cardimg">Essays</div><div class="cardbody"><div class="cardtitle">Notes on Ordinary Time</div><div class="cardauthor">Essays</div><div class="cardprice">$22.00</div></div></div>
<div class="card"><div class="cardimg">Reportage</div><div class="cardbody"><div class="cardtitle">Field Reports from Nowhere</div><div class="cardauthor">Nonfiction</div><div class="cardprice">$28.00</div></div></div>
</div>
</div>
<div class="footer"><span>© Melville House Publishing</span><span>Press · Rights · Contact</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f7f5; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f7f5; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.25; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #989898; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.08em; background: #aa8b5f; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.08em; background: #f8f7f5; color: #aa8b5f;
border: 1px solid #aa8b5f; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #212121;
border: 1px solid #e5e5e5; border-radius: 10px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #989898; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.1em; background: #c00000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f7f5; color:#414042; box-sizing:border-box;
font-family:Gotham,Poppins,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
background:#f8f7f5; border-bottom:1px solid #e5e5e5; }
.brand { font-family:"Surveyor Display",Georgia,serif; font-size:22px; font-weight:400; color:#212121; }
.nlinks { display:flex; gap:26px; }
.nlinks div { font-size:12px; font-weight:500; color:#414042; letter-spacing:0.4px; text-transform:uppercase; }
.nlinks div.on { color:#aa8b5f; }
.navcta { background:#aa8b5f; color:#fff; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.6px; padding:11px 22px; }
.hero { height:250px; background:#272d45; display:flex; align-items:center; padding:0 44px; position:relative; }
.hero::after { content:''; position:absolute; right:60px; top:20%; width:130px; height:170px; background:#fff;
border-radius:2px; box-shadow:0 10px 30px rgba(0,0,0,0.3); }
.hero::before { content:''; position:absolute; right:100px; top:26%; width:70px; height:2px; background:#aa8b5f; z-index:2; }
.herotxt .k { color:#bce8de; font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:1.5px; }
.herotxt h1 { font-family:"Surveyor Display",Georgia,serif; color:#ffffff; font-size:38px; font-weight:400; margin:10px 0 12px; }
.herotxt p { color:#dedede; font-size:14px; max-width:380px; margin:0 0 16px; }
.herobtn { display:inline-block; background:#aa8b5f; color:#fff; font-size:13px; font-weight:600; text-transform:uppercase;
letter-spacing:0.8px; padding:13px 26px; }
.section { padding:24px 34px 0; }
.sechead { font-family:"Surveyor Display",Georgia,serif; font-size:20px; font-weight:400; color:#212121; margin-bottom:14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { background:#ffffff; border-radius:10px; overflow:hidden; }
.shot { height:96px; position:relative; }
.c1 .shot { background:linear-gradient(150deg,#aa8b5f,#8d7048); }
.c2 .shot { background:linear-gradient(150deg,#bce8de,#272d45); }
.c3 .shot { background:linear-gradient(150deg,#ffcf2a,#aa8b5f); }
.c4 .shot { background:linear-gradient(150deg,#272d45,#111111); }
.badge { position:absolute; top:8px; left:8px; font-size:9px; font-weight:600; text-transform:uppercase; padding:3px 8px; color:#fff; }
.badge.sale { background:#c00000; } .badge.new { background:#272d45; } .badge.best { background:#aa8b5f; }
.cbody { padding:10px 12px 12px; }
.ccat { font-size:10px; color:#989898; text-transform:uppercase; letter-spacing:0.5px; }
.ctitle { font-size:14px; color:#212121; margin:4px 0; }
.cprice { font-size:14px; font-weight:500; color:#212121; }
</style></head>
<body>
<nav>
<div class="brand">Day Designer</div>
<div class="nlinks"><div class="on">Planners</div><div>Notepads</div><div>Accessories</div><div>Gift Sets</div></div>
<div class="navcta">Shop New Covers</div>
</nav>
<div class="hero">
<div class="herotxt">
<div class="k">The Planner-Lover's Planner</div>
<h1>Plan Your Day<br>With Intention</h1>
<p>Daily planners and notepads designed for people who love the ritual of writing it down.</p>
<div class="herobtn">Shop 2026 Planners</div>
</div>
</div>
<div class="section">
<div class="sechead">Best Sellers</div>
<div class="grid">
<div class="card c1"><div class="shot"><span class="badge best">Best Seller</span></div>
<div class="cbody"><div class="ccat">Daily Planner</div><div class="ctitle">Flagship Undated Planner</div><div class="cprice">$68.00</div></div></div>
<div class="card c2"><div class="shot"><span class="badge new">New</span></div>
<div class="cbody"><div class="ccat">Notepad</div><div class="ctitle">To-Do Notepad, Mint</div><div class="cprice">$14.00</div></div></div>
<div class="card c3"><div class="shot"><span class="badge sale">Sale</span></div>
<div class="cbody"><div class="ccat">Accessory</div><div class="ctitle">Gold Pen Set</div><div class="cprice">$22.00</div></div></div>
<div class="card c4"><div class="shot"></div>
<div class="cbody"><div class="ccat">Journal</div><div class="ctitle">Navy Linen Journal</div><div class="cprice">$36.00</div></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -0.2px; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #000000; color: #ffffff;
border: none; border-radius: 0px; padding: 16px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 0px;
padding: 15px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #212121;
border: 1px solid #c8c8c8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 1px; background: #d20000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212121; box-sizing:border-box;
font-family:'Helvetica Now Display','Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
border-bottom:1px solid #d9d9d9; }
.brand { font-size:16px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; }
.navlinks { display:flex; gap:24px; font-size:12px; color:#707070; font-weight:500; text-transform:uppercase; letter-spacing:0.04em; }
.navlinks span.on { color:#212121; border-bottom:2px solid #000; padding-bottom:16px; }
.cart-ico { font-size:12px; font-weight:700; padding:6px 12px; border:1px solid #212121; }
main { display:flex; height:582px; }
.gallery { width:400px; background:#f7f7f7; position:relative; display:flex; align-items:center; justify-content:center; }
.bp { width:180px; height:250px; background:linear-gradient(150deg,#404040,#212121 65%); border-radius:14px 14px 26px 26px;
position:relative; box-shadow:0 18px 36px rgba(0,0,0,0.2); }
.bp .strap { position:absolute; top:-4px; left:22px; width:14px; height:60px; background:#575757; border-radius:8px; }
.bp .strap2 { position:absolute; top:-4px; right:22px; width:14px; height:60px; background:#575757; border-radius:8px; }
.bp .pocket { position:absolute; top:70px; left:20px; right:20px; height:60px; border:1px solid #707070; border-radius:6px; }
.laptop-badge { position:absolute; top:130px; left:34px; right:34px; height:60px; background:#e3e3e3;
border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:9px; color:#575757;
font-weight:700; letter-spacing:0.06em; }
.badge-fit { position:absolute; top:20px; left:20px; background:#000; color:#fff; font-size:10px; font-weight:700;
letter-spacing:0.04em; padding:5px 10px; }
.info { flex:1; padding:30px 36px; display:flex; flex-direction:column; gap:10px; }
.cat { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:#707070; }
h1 { font-size:22px; font-weight:700; margin:0; letter-spacing:-0.2px; line-height:1.3; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:700; }
.desc { font-size:13px; color:#404040; line-height:1.5; max-width:340px; }
.spec-strip { display:flex; gap:0; border-top:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9; }
.spec { flex:1; padding:10px 0; text-align:left; }
.spec + .spec { border-left:1px solid #d9d9d9; padding-left:14px; }
.spec .k { font-size:9.5px; color:#959595; text-transform:uppercase; letter-spacing:0.05em; }
.spec .v { font-size:13px; font-weight:700; margin-top:2px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#000000; color:#fff; border:none; border-radius:2px; padding:13px 18px;
font-size:13.5px; font-weight:700; letter-spacing:0.02em; }
.btn-outline { border:1.5px solid #212121; background:#fff; color:#212121; border-radius:2px; padding:11.5px 16px;
font-size:12px; font-weight:700; white-space:nowrap; }
.meta { font-size:11px; color:#d20000; font-weight:700; }
</style></head>
<body>
<nav>
<div class="brand">Aer Laptop B 2</div>
<div class="navlinks"><span>Bags</span><span class="on">Laptop</span><span>Travel</span><span>Sale</span></div>
<div class="cart-ico">Bag (1)</div>
</nav>
<main>
<div class="gallery">
<span class="badge-fit">Fits 16" Laptop</span>
<div class="bp"><div class="strap"></div><div class="strap2"></div><div class="pocket"></div><div class="laptop-badge">PADDED SLEEVE</div></div>
</div>
<div class="info">
<span class="cat">Laptop Backpack B2</span>
<h1>Aer Fit Pack 2 — Slim Commute Build</h1>
<div class="price-row"><span class="price">$189.00</span></div>
<p class="desc">A slim, structured commuter pack engineered around a padded 16" laptop sleeve — ballistic nylon shell, hidden zip security.</p>
<div class="spec-strip">
<div class="spec"><div class="k">Capacity</div><div class="v">18L</div></div>
<div class="spec"><div class="k">Weight</div><div class="v">1.1 kg</div></div>
<div class="spec"><div class="k">Material</div><div class="v">Ballistic Nylon</div></div>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">Compare Packs</button>
</div>
<span class="meta">Clearance — final sizes</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #0066CC; color: #FFFFFF;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #FFFFFF; color: #0066CC;
border: 1px solid #0066CC; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #CC0000; color: #FFFFFF;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>JETech Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; background:#FFFFFF; color:#1A1A1A; }
*{box-sizing:border-box;}
.topbar{height:22px;background:#0066CC;color:#fff;font-size:11px;line-height:22px;text-align:center;letter-spacing:.2px;}
.nav{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #F0F0F0;}
.logo{font-weight:700;font-size:20px;letter-spacing:-.5px;color:#1A1A1A;}
.logo span{color:#0066CC;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#333;}
.navlinks .active{color:#0066CC;border-bottom:2px solid #0066CC;padding-bottom:4px;}
.searchcart{display:flex;align-items:center;gap:14px;}
.search{width:170px;height:30px;border:1px solid #E0E0E0;border-radius:4px;font-size:12px;color:#777;padding:0 10px;line-height:30px;background:#fff;}
.cartdot{position:relative;font-size:18px;}
.cartdot::after{content:'2';position:absolute;top:-6px;right:-8px;background:#CC0000;color:#fff;font-size:9px;width:14px;height:14px;border-radius:50%;text-align:center;line-height:14px;}
.compat{display:flex;gap:8px;padding:12px 24px;background:#F8F8F8;border-bottom:1px solid #E0E0E0;}
.chip{padding:6px 14px;border-radius:999px;font-size:12px;border:1px solid #E0E0E0;background:#F8F8F8;color:#333;}
.chip.active{background:#0066CC;color:#fff;border-color:#0066CC;}
.main{display:flex;padding:14px 24px;gap:16px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;flex:1;}
.card{border:1px solid #F0F0F0;border-radius:4px;padding:10px;position:relative;background:#fff;}
.imgbox{width:100%;height:96px;border-radius:4px;position:relative;overflow:hidden;}
.badge{position:absolute;top:6px;left:6px;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#fff;padding:2px 6px;border-radius:4px;background:#CC0000;z-index:2;}
.badge.new{background:#0066CC;}
.badge.best{background:#FF6600;}
.title{font-size:12px;margin-top:8px;color:#1A1A1A;line-height:1.3;height:30px;overflow:hidden;}
.compat-str{font-size:10px;color:#777;margin-top:2px;}
.stars{font-size:10px;color:#FF9900;margin-top:4px;}
.stars span{color:#777;font-size:9px;margin-left:4px;}
.price{font-size:15px;font-weight:700;margin-top:4px;}
.price .strike{font-size:11px;color:#999;text-decoration:line-through;font-weight:400;margin-left:5px;}
.price.sale{color:#CC0000;}
footer{background:#1A1A1A;color:#fff;font-size:10px;padding:10px 24px;display:flex;justify-content:space-between;position:absolute;bottom:0;left:0;right:0;height:38px;align-items:center;}
footer a{color:#CCCCCC;margin-right:10px;text-decoration:none;}
</style>
<div class="topbar">FREE SHIPPING ON ORDERS OVER $25 — SHOP DEVICE CASES & SCREEN PROTECTORS</div>
<div class="nav">
<div class="logo">Jetech<span>.</span></div>
<div class="navlinks">
<span class="active">iPhone</span><span>Samsung</span><span>iPad</span><span>Accessories</span><span>Deals</span>
</div>
<div class="searchcart">
<div class="search">Search compatible cases…</div>
<div class="cartdot">🛒</div>
</div>
</div>
<div class="compat">
<div class="chip active">iPhone 15 Pro Max</div>
<div class="chip">iPhone 15</div>
<div class="chip">Galaxy S24</div>
<div class="chip">iPad Pro 12.9"</div>
<div class="chip">Galaxy Tab S9</div>
</div>
<div class="main">
<div class="grid">
<div class="card">
<div class="imgbox" style="background:linear-gradient(135deg,#dfe9f5,#c7d6ea);">
<div class="badge">Sale</div>
</div>
<div class="title">Tempered Glass Screen Protector 0.33mm — 2 Pack</div>
<div class="compat-str">Compatible with iPhone 15 Pro Max</div>
<div class="stars">★★★★★ <span>(1,204)</span></div>
<div class="price sale">$12.99 <span class="strike">$19.99</span></div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(135deg,#e7e2da,#cfc6b4);">
<div class="badge new">New</div>
</div>
<div class="title">Clear Polycarbonate Slim Case</div>
<div class="compat-str">Compatible with iPhone 15 / 15 Pro</div>
<div class="stars">★★★★☆ <span>(389)</span></div>
<div class="price">$16.99</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(135deg,#d7dee3,#b7c3ca);">
<div class="badge best">Best Seller</div>
</div>
<div class="title">Rugged Armor Case with Kickstand</div>
<div class="compat-str">Compatible with Galaxy S24 Ultra</div>
<div class="stars">★★★★★ <span>(2,881)</span></div>
<div class="price">$21.99</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(135deg,#eee,#ccc);"></div>
<div class="title">USB-C Fast Charging Cable 6ft — Braided</div>
<div class="compat-str">Compatible with iPhone 15 / iPad Pro</div>
<div class="stars">★★★★☆ <span>(760)</span></div>
<div class="price">$9.99</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(135deg,#e2e8f0,#c3ccd8);">
<div class="badge">Sale</div>
</div>
<div class="title">MagSafe Compatible Wallet Case</div>
<div class="compat-str">Compatible with iPhone 14 / 15</div>
<div class="stars">★★★★★ <span>(542)</span></div>
<div class="price sale">$18.49 <span class="strike">$27.00</span></div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(135deg,#dbe4ea,#b9c8d3);"></div>
<div class="title">Privacy Screen Protector — Anti-Spy</div>
<div class="compat-str">Compatible with Galaxy S24</div>
<div class="stars">★★★☆☆ <span>(198)</span></div>
<div class="price">$14.99</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(135deg,#e9e4dd,#d0c8ba);">
<div class="badge new">New</div>
</div>
<div class="title">Silicone Slim Fit Case — Multiple Colors</div>
<div class="compat-str">Compatible with iPad Pro 12.9"</div>
<div class="stars">★★★★☆ <span>(311)</span></div>
<div class="price">$13.99</div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(135deg,#e5e5e5,#c9c9c9);"></div>
<div class="title">Wireless Charging Pad 15W — Fast Charge</div>
<div class="compat-str">Universal Qi-Compatible</div>
<div class="stars">★★★★★ <span>(923)</span></div>
<div class="price">$24.99</div>
</div>
</div>
</div>
<footer>
<div><a href="#">Customer Service</a><a href="#">Products</a><a href="#">About JETech</a><a href="#">Follow Us</a></div>
<div>© 2024 Jetech. All rights reserved.</div>
</footer>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2c2930;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2c2930;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.1px; margin: 0; color: #2c2930; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.6; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #f97300; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 8px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #2c2930;
border: 1px solid #cacacb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f97300; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;color:#403d44;font-family:'Montserrat',Arial,sans-serif;}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#108474;}
.logo{font-weight:700;font-size:22px;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;color:#e9f7f5;}
.hero{display:flex;padding:22px 30px;gap:30px;align-items:center;background:linear-gradient(180deg,#f9fafb,#fafafa);}
.hero-txt{width:360px;}
.hero-txt h1{font-size:30px;font-weight:700;color:#2c2930;margin:0 0 10px;line-height:1.2;}
.hero-txt p{font-size:13px;color:#403d44;margin:0 0 16px;}
.cta{background:#f97300;color:#fff;padding:11px 24px;border-radius:8px;font-weight:700;font-size:13px;display:inline-block;}
.tablet{flex:1;height:210px;background:#2c2930;border-radius:12px;position:relative;box-shadow:0 12px 24px rgba(0,0,0,.15);}
.tablet .screen{position:absolute;top:16px;left:16px;right:16px;bottom:46px;background:linear-gradient(135deg,#108474,#0a6a5c);border-radius:8px;}
.tablet .pen{position:absolute;bottom:14px;right:30px;width:70px;height:8px;background:#f97300;border-radius:4px;transform:rotate(-8deg);}
.tags{display:flex;gap:8px;padding:12px 30px 0;}
.tag{border-radius:8px;padding:6px 14px;font-size:11px;font-weight:700;color:#2c2930;}
.tg1{background:#e4d3f1;}.tg2{background:#a4cff0;}.tg3{background:#fef5d8;}.tg4{background:#f7f9ea;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:14px 30px;}
.card{background:#eeeeee;border-radius:8px;padding:10px;}
.box{height:88px;border-radius:6px;margin-bottom:8px;}
.b1{background:linear-gradient(135deg,#108474,#0a6a5c);}
.b2{background:linear-gradient(135deg,#f97300,#ef8200);}
.b3{background:linear-gradient(135deg,#2c2930,#403d44);}
.b4{background:linear-gradient(135deg,#a4cff0,#7bb6e0);}
.name{font-size:12px;font-weight:600;color:#2c2930;margin:0 0 3px;}
.spec{font-size:10px;color:#7b7b7b;margin:0 0 5px;}
.price{font-size:14px;font-weight:700;color:#f97300;}
</style>
<div class="nav">
<div class="logo">Gaomon</div>
<div class="navlinks"><span>Drawing Tablets</span><span>Pen Displays</span><span>Software</span><span>For Students</span></div>
</div>
<div class="hero">
<div class="hero-txt">
<h1>Your first step into digital art</h1>
<p>Precision pen tablets and displays built for aspiring illustrators — from student sketchbook to studio pipeline.</p>
<a class="cta">Shop Tablets</a>
</div>
<div class="tablet"><div class="screen"></div><div class="pen"></div></div>
</div>
<div class="tags">
<div class="tag tg1">Beginner</div><div class="tag tg2">Pen Display</div><div class="tag tg3">Wireless</div><div class="tag tg4">Student Bundle</div>
</div>
<div class="grid">
<div class="card"><div class="box b1"></div><div class="name">GAOMON M6 Drawing Tablet</div><div class="spec">6x4 in · 8192 Levels</div><div class="price">$39.99</div></div>
<div class="card"><div class="box b2"></div><div class="name">GAOMON PD1560 Pen Display</div><div class="spec">15.6" IPS · USB-C</div><div class="price">$189.00</div></div>
<div class="card"><div class="box b3"></div><div class="name">GAOMON AP20 Stylus Pen</div><div class="spec">Battery-Free · Tilt</div><div class="price">$14.99</div></div>
<div class="card"><div class="box b4"></div><div class="name">GAOMON Student Bundle</div><div class="spec">Tablet + Glove + Guide</div><div class="price">$54.99</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #9146ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #9146ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c8a6fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5c16c5; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #9146ff; color: #ffffff;
border: 1px solid #5c16c5; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #9146ff; color: #f5f5f5;
border: 1px solid #a162fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c8a6fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #893ef6; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f8; color:#0e0e10; box-sizing:border-box;
font-family:Inter, -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
nav { height:56px; display:flex; align-items:center; gap:20px; padding:0 24px; background:#ffffff; }
.brand { font-size:16px; font-weight:600; color:#5c16c5; }
.navlinks { display:flex; gap:18px; font-size:14px; }
.navlinks span.on { color:#5c16c5; font-weight:600; }
.search { flex:1; max-width:240px; background:#ffffff; border-radius:8px; height:36px; display:flex;
align-items:center; padding:0 12px; font-size:14px; color:#747484; box-shadow:rgba(50,50,57,0.62) 0px 0px 0px 1px inset; }
.loginbtn { background:rgba(173,173,184,0.22); color:#0e0e10; border-radius:9000px; padding:0 16px; height:32px;
font-size:14px; font-weight:600; display:flex; align-items:center; }
.signup { background:#9146ff; color:#ffffff; border-radius:9000px; padding:0 16px; height:32px;
font-size:14px; font-weight:600; display:flex; align-items:center; }
.side { display:flex; height:584px; }
.rail { width:76px; background:#ffffff; display:flex; flex-direction:column; align-items:center; gap:14px; padding-top:14px; }
.rail .avatar { width:36px; height:36px; border-radius:9000px; background:linear-gradient(135deg,#c9a6ff,#5c16c5); }
.content { flex:1; padding:16px 24px; }
h2 { font-size:16px; font-weight:600; margin:0 0 12px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.tile { background:#f7f7f8; border-radius:4px; overflow:hidden; }
.tile .thumb { height:110px; background:linear-gradient(150deg,#efeff1,#c9a6ff); position:relative; }
.live { position:absolute; top:6px; left:6px; background:#eb0400; color:#fff; font-size:12px; padding:1px 5px; border-radius:4px; }
.viewers { position:absolute; bottom:6px; left:6px; background:rgba(0,0,0,0.6); color:#fff; font-size:14px; padding:0 4px; border-radius:2px; }
.tile .meta { padding:8px 4px; }
.tile .t { font-size:14px; font-weight:600; }
.tile .m { font-size:12px; color:#747484; }
</style></head>
<body>
<nav>
<span class="brand">Twitch</span>
<div class="navlinks"><span class="on">Browse</span><span>Following</span></div>
<span class="search">Search</span>
<span class="loginbtn">Log In</span>
<span class="signup">Sign Up</span>
</nav>
<div class="side">
<div class="rail">
<div class="avatar"></div><div class="avatar"></div><div class="avatar"></div>
</div>
<div class="content">
<h2>Live channels</h2>
<div class="grid">
<div class="tile"><div class="thumb"><span class="live">LIVE</span><span class="viewers">12.4K</span></div><div class="meta"><div class="t">Skyline Strategy</div><div class="m">Puzzle League</div></div></div>
<div class="tile"><div class="thumb"><span class="live">LIVE</span><span class="viewers">3.1K</span></div><div class="meta"><div class="t">Northwind Plays</div><div class="m">Just Chatting</div></div></div>
<div class="tile"><div class="thumb"><span class="live">LIVE</span><span class="viewers">890</span></div><div class="meta"><div class="t">Copper Coast Radio</div><div class="m">Music</div></div></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #4a4a4a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #cc0000; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #f5f5f5; color: #0a0a0a;
border: 1px solid #cc0000; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f5f5f5; color: #363636;
border: 1px solid #bababa; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4a4a4a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #efd3d3; color: #cc0000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5f5f5; color:#0a0a0a; font-family:-apple-system, 'Helvetica Neue', Arial, sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;background:#0a0a0a;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:16px;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.navlinks .active{color:#fff;}
.navlinks .in{color:#7a7a7a;}
.hero{padding:16px 32px 0;display:flex;gap:20px;}
.pimg{width:180px;height:220px;background:linear-gradient(160deg,#cc0000,#0a0a0a);border-radius:4px;flex-shrink:0;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#00d1b2;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 6px;border-radius:2px;}
.info{flex:1;}
.info h1{font-size:22px;font-weight:600;margin:0 0 6px;}
.info .sub{font-size:14px;color:#4a4a4a;margin-bottom:10px;}
.info .price{font-size:20px;font-weight:700;color:#363636;margin-bottom:12px;}
.btnrow{display:flex;gap:8px;}
.btn{background:#cc0000;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.5px;padding:10px 20px;border-radius:4px;}
.btn2{background:#fff;color:#0a0a0a;font-size:14px;font-weight:600;padding:9px 19px;border-radius:4px;border:2px solid #dbdbdb;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:206px;background:#fff;border:1px solid #dbdbdb;border-radius:4px;padding:16px;}
.thumb{height:96px;background:#fafafa;border-radius:4px;margin-bottom:8px;}
.ptitle{font-size:16px;font-weight:600;}
.pprice{font-size:16px;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#0a0a0a;color:#7a7a7a;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Reaper Miniatures</div>
<div class="navlinks"><div class="active">Bones</div><div class="in">Dark Heaven</div><div class="in">Paints</div></div>
</div>
<div class="hero">
<div class="pimg"><div class="badge">New</div></div>
<div class="info">
<h1>Ancient Red Dragon</h1>
<div class="sub">Bones Black · Unpainted Plastic Miniature</div>
<div class="price">$34.99</div>
<div class="btnrow"><div class="btn">Add to Cart</div><div class="btn2">View Scale</div></div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3273dc,#0a0a0a);"></div><div class="ptitle">Bones Paint Set, 8pc</div><div class="pprice">$19.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00d1b2,#0a0a0a);"></div><div class="ptitle">Skeleton Warband, 10pc</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#cc0000,#4a4a4a);"></div><div class="ptitle">Dungeon Terrain Tile Set</div><div class="pprice">$29.99</div></div>
</div>
<div class="footer"><span>© Reaper Miniatures</span><span>Painting Guides Order Status</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #223333; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #223333;
border: 1px solid #223333; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #223333; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; font-family:Arial,sans-serif; color:#1a1a1a;
}
*{box-sizing:border-box;}
.nav{height:64px; display:flex; align-items:center; padding:0 30px; border-bottom:1px solid #e0e0e0;}
.logo{font-family:'ITC New Baskerville',Georgia,serif; font-size:24px; letter-spacing:1px; color:#223333;}
.navlinks{display:flex; gap:22px; margin-left:36px; font-size:13px; text-transform:uppercase; letter-spacing:.3px; font-weight:500; color:#333;}
.navicons{margin-left:auto; font-size:12px; color:#6b6b6b;}
.hero{display:flex; align-items:center; gap:32px; padding:26px 30px; background:#f5f5f5;}
.heroText{flex:1;}
.heroText h1{font-family:'ITC New Baskerville',Georgia,serif; font-weight:400; font-size:36px; line-height:1.2; margin:0 0 12px; max-width:400px; color:#223333;}
.heroText p{font-size:14px; color:#6b6b6b; line-height:1.5; max-width:380px; margin:0 0 16px;}
.heroBtn{display:inline-block; background:#223333; color:#fff; padding:12px 26px; border-radius:8px; font-size:12px; text-transform:uppercase; font-weight:600; letter-spacing:.5px;}
.heroImg{width:250px; height:170px; border-radius:12px; background:linear-gradient(150deg,#d3d3d3,#d1dee7); flex-shrink:0; position:relative;}
.heroImg::before{content:''; position:absolute; left:20%; top:30%; width:60%; height:16px; background:#223333; opacity:.7; border-radius:8px;}
.section{padding:14px 30px 0;}
.sectitle{font-family:'ITC New Baskerville',Georgia,serif; font-size:20px; margin:0 0 12px; color:#223333;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.card{background:#fff; border-radius:8px; padding:8px; border:1px solid #e0e0e0;}
.thumb{height:80px; border-radius:8px; margin-bottom:8px; position:relative;}
.t1{background:linear-gradient(135deg,#223333,#5a7373);}
.t2{background:linear-gradient(135deg,#d1dee7,#a3c3d9);}
.t3{background:linear-gradient(135deg,#d3d3d3,#999999);}
.t4{background:linear-gradient(135deg,#223333,#1a2929);}
.badge{position:absolute; top:5px; left:5px; background:#223333; color:#fff; font-size:8px; font-weight:700; padding:2px 6px; border-radius:4px; text-transform:uppercase;}
.pname{font-size:12px; font-weight:600; margin-bottom:3px;}
.pprice{font-size:12px; color:#223333; font-weight:700;}
.footer{position:absolute; bottom:0; left:0; right:0; background:#223333; color:#fff; font-size:10px; text-align:center; padding:8px 0;}
</style>
<div class="nav">
<div class="logo">Hay</div>
<div class="navlinks"><span>Furniture</span><span>Lighting</span><span>Textiles</span><span>Outdoor</span></div>
<div class="navicons">Search · Wishlist · Bag</div>
</div>
<div class="hero">
<div class="heroText">
<h1>Soft Contrasts, Material Honesty</h1>
<p>Danish design that pairs muted earth tones with quiet craft — furniture and objects made to be used, not just admired.</p>
<div class="heroBtn">Shop the Season</div>
</div>
<div class="heroImg"></div>
</div>
<div class="section">
<div class="sectitle">New Arrivals</div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="badge">New</span></div><div class="pname">Palissade Chair</div><div class="pprice">$425</div></div>
<div class="card"><div class="thumb t2"></div><div class="pname">PC8 Wall Lamp</div><div class="pprice">$195</div></div>
<div class="card"><div class="thumb t3"></div><div class="pname">Mags Sofa Module</div><div class="pprice">$1,180</div></div>
<div class="card"><div class="thumb t4"></div><div class="pname">Copenhague Table</div><div class="pprice">$960</div></div>
</div>
</div>
<div class="footer">© Hay — Danish Design Since 2002</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f4f3; color: #25282a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f4f3; color: #25282a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; margin: 0; color: #25282a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #747778; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.25; letter-spacing: 1.2px; background: #d95e16; color: #ffffff;
border: none; border-radius: 4px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.25; letter-spacing: 1.2px; background: transparent; color: #25282a;
border: 1px solid #d95e16; border-radius: 4px;
padding: 14px 30px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #25282a;
border: 1px solid #c2c1c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #747778; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #d95e16; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f4f3; font-family:'Roboto',sans-serif; color:#393939; }
*{box-sizing:border-box;}
.nav{height:64px;background:#25282a;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-family:'Arial Narrow',Arial,sans-serif;font-size:22px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1px;}
.navlinks{display:flex;gap:22px;font-family:'Arial Narrow',Arial,sans-serif;font-size:14px;color:#fff;text-transform:uppercase;letter-spacing:1px;}
.hero{height:250px;background:#101010;color:#fff;display:flex;align-items:flex-end;padding:0 30px 24px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,#d95e16 0%,#101010 60%);opacity:.5;}
.herobox{position:relative;z-index:1;}
.hero h1{font-family:'Arial Narrow',Arial,sans-serif;font-size:52px;font-weight:700;text-transform:uppercase;letter-spacing:1px;line-height:.95;margin:0 0 12px;}
.cta{display:inline-block;background:#d95e16;color:#fff;font-family:'Arial Narrow',Arial,sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:16px 32px;border-radius:4px;}
.rowlabel{padding:14px 30px 8px;font-family:'Arial Narrow',Arial,sans-serif;font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:196px;background:#e9e9e6;border-radius:4px;overflow:hidden;position:relative;}
.thumb{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;}
.grillbody{width:70%;height:60%;border-radius:8px;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:4px 8px;border-radius:4px;}
.body{padding:10px 12px;}
.ptitle{font-size:16px;font-weight:700;}
.pprice{font-size:18px;font-weight:700;margin-top:4px;}
.saleprice{color:#e03d24;}
</style>
<div class="nav">
<div class="logo">Traeger</div>
<div class="navlinks"><div>Grills</div><div>Pellets</div><div>Accessories</div><div>Recipes</div></div>
</div>
<div class="hero">
<div class="herobox">
<h1>Wood-Fired<br>Flavor.</h1>
<div class="cta">Shop Grills</div>
</div>
</div>
<div class="rowlabel">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#d95e16;color:#fff">Promo</span><div class="thumb"><div class="grillbody" style="background:linear-gradient(135deg,#25282a,#d95e16)"></div></div><div class="body"><div class="ptitle">Ironwood 650</div><div class="pprice">$1,199.99</div></div></div>
<div class="card"><span class="badge" style="background:#e03d24;color:#fff">Sale</span><div class="thumb"><div class="grillbody" style="background:linear-gradient(135deg,#e97f38,#25282a)"></div></div><div class="body"><div class="ptitle">Pro 780</div><div class="pprice"><span class="saleprice">$999.99</span></div></div></div>
<div class="card"><span class="badge" style="background:#3ce783;color:#25282a">New</span><div class="thumb"><div class="grillbody" style="background:linear-gradient(135deg,#25282a,#e9ae85)"></div></div><div class="body"><div class="ptitle">Signature Blend Pellets</div><div class="pprice">$19.99</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #f47920; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #ffffff; color: #313131;
border: 1px solid #f47920; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; background: #f5f5f5; color: #4a4a4a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#4a4a4a; font-family:Arial, 'Segoe UI', Roboto, sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#313131;}
.logo{font-size:19px;font-weight:700;color:#fff;letter-spacing:0.3px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:700;text-transform:uppercase;color:#ebebeb;}
.navlinks span:first-child{color:#f47920;}
.hero{height:230px;background:#1e1e1e;display:flex;align-items:center;padding:0 36px;}
.htext{width:460px;}
.htext .eyebrow{font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#f47920;margin-bottom:10px;}
.htext h1{font-size:28px;font-weight:700;color:#fff;margin:0 0 12px;line-height:1.3;}
.htext p{font-size:14px;color:#bbbbbb;margin:0 0 18px;max-width:400px;line-height:1.5;}
.cta{display:inline-block;background:transparent;border:1.5px solid #f47920;color:#f47920;font-size:13px;font-weight:700;text-transform:uppercase;padding:11px 24px;border-radius:4px;}
.himg{position:absolute;right:60px;top:64px;width:180px;height:110px;background:#313131;border:6px solid #f47920;border-radius:4px;}
.himg:before{content:'';position:absolute;left:20px;top:16px;width:70px;height:16px;background:#ebebeb;border-radius:2px;}
.himg:after{content:'MΩ';position:absolute;right:20px;bottom:14px;color:#f47920;font-size:20px;font-weight:700;}
.alertbar{display:flex;gap:16px;padding:14px 36px;background:#f7f7f7;}
.alert{flex:1;border-left:4px solid #cc2200;padding:8px 12px;background:#fff;}
.alert.warn{border-left-color:#f0a500;}
.alert.ok{border-left-color:#2a7a3b;}
.alabel{font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#8a8a8a;}
.aval{font-size:13px;font-weight:700;color:#313131;margin-top:2px;}
.sec{padding:14px 36px 0;}
.sectitle{font-size:16px;font-weight:700;color:#313131;margin-bottom:12px;text-transform:uppercase;letter-spacing:0.3px;}
.spectable{border:1px solid #ebebeb;}
.row{display:flex;height:36px;align-items:center;border-bottom:1px solid #ebebeb;}
.row:last-child{border-bottom:none;}
.row .c1{width:340px;padding-left:14px;font-size:13px;color:#313131;}
.row .c2{flex:1;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#8a8a8a;}
.row .c3{width:110px;font-size:13px;font-weight:700;color:#f47920;padding-right:14px;text-align:right;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;background:#313131;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:11px;color:#bbbbbb;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Megger</div>
<div class="navlinks"><span>Insulation Testers</span><span>Earth Testers</span><span>Calibration</span><span>Support</span></div>
</div>
<div class="hero">
<div class="htext">
<div class="eyebrow">Field-Proven Since 1889</div>
<h1>Precision instruments for switchgear rooms, not showrooms.</h1>
<p>Insulation and earth resistance testers engineered to survive the darkened plant floor.</p>
<div class="cta">View Full Range</div>
</div>
<div class="himg"></div>
</div>
<div class="alertbar">
<div class="alert"><div class="alabel">Insulation Fault</div><div class="aval">0.2 MΩ</div></div>
<div class="alert warn"><div class="alabel">Calibration Due</div><div class="aval">14 Days</div></div>
<div class="alert ok"><div class="alabel">Earth Loop</div><div class="aval">0.18 Ω — Pass</div></div>
</div>
<div class="sec">
<div class="sectitle">Insulation Resistance Testers</div>
<div class="spectable">
<div class="row"><div class="c1">MIT485 Insulation & Continuity Tester</div><div class="c2">5kV · IP65</div><div class="c3">$2,450.00</div></div>
<div class="row"><div class="c1">MFT1835 Multifunction Tester</div><div class="c2">Loop & RCD</div><div class="c3">$3,120.00</div></div>
<div class="row"><div class="c1">DLRO10X Micro-Ohmmeter</div><div class="c2">10A · Rugged</div><div class="c3">$4,890.00</div></div>
</div>
</div>
<div class="footer"><span>© Engineered for the Field</span><span>Calibration Program · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #31373d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #31373d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: 0.01em; margin: 0; color: #31373d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #6c6c6c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.09em; background: #e9be33; color: #31373d;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.09em; background: #ffffff; color: #31373d;
border: 1px solid #e9be33; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #31373d;
border: 1px solid #cccdce; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c6c6c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.07em; background: #e9be33; color: #31373d;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Arial,Helvetica,sans-serif; color:#31373d; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #eaeaea;}
.logo{font-size:16px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;letter-spacing:0.05em;}
.hero{height:220px;display:flex;align-items:center;padding:0 40px;background:#ffffff;}
.herotext{width:440px;}
h1{font-size:42px;font-weight:700;letter-spacing:0.04em;line-height:1.08;margin:0 0 14px;}
.sub{font-size:15px;color:#3d4349;margin:0 0 20px;max-width:340px;}
.cta{display:inline-block;background:#e9be33;color:#31373d;font-size:13px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;padding:12px 24px;}
.pencilbox{width:200px;height:150px;position:relative;margin-left:60px;}
.pencilbox .p{position:absolute;width:16px;height:120px;background:#e9be33;transform:rotate(20deg);}
.pencilbox .p1{left:60px;top:10px;}
.pencilbox .p2{left:90px;top:10px;background:#31373d;}
.pencilbox .p3{left:120px;top:10px;background:#479ccf;}
.sec{padding:22px 40px 0;}
.sectitle{font-size:28px;font-weight:700;letter-spacing:0.03em;border-bottom:1px solid #eaeaea;padding-bottom:16px;margin:0 0 16px;}
.grid{display:flex;gap:16px;}
.card{width:210px;background:#fff;position:relative;}
.thumb{height:130px;background:#f5f5f5;position:relative;}
.badge{position:absolute;top:0;left:0;font-size:11px;font-weight:500;letter-spacing:0.07em;text-transform:uppercase;padding:3px 7px;}
.pname{font-size:13px;font-weight:600;margin:8px 0 4px;}
.pprice{font-size:14px;font-weight:600;}
</style>
<div class="nav">
<div class="logo">Public Supply</div>
<div class="navlinks"><span>Notebooks</span><span>Pens</span><span>Desk</span><span>Paper</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>SUPPLIES FOR THE MEASURED MIND.</h1>
<p class="sub">Recycled pulp, chipboard, and wire-coil goods indexed for people who file things properly.</p>
<div class="cta">Shop Notebooks</div>
</div>
<div class="pencilbox"><div class="p p1"></div><div class="p p2"></div><div class="p p3"></div></div>
</div>
<div class="sec">
<div class="sectitle">Notebooks & Journals</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#f5f5f5"><span class="badge" style="background:#e9be33;color:#31373d">Sale</span></div><div class="pname">Wirebound Notebook</div><div class="pprice">$8.00</div></div>
<div class="card"><div class="thumb" style="background:#eaeaea"><span class="badge" style="background:#31373d;color:#fff">New</span></div><div class="pname">Chipboard Journal</div><div class="pprice">$14.00</div></div>
<div class="card"><div class="thumb" style="background:#f5f5f5"></div><div class="pname">Recycled Legal Pad</div><div class="pprice">$6.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0e0a14; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0e0a14; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8d8b90; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #702082; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e0a14; color: #ffffff;
border: 1px solid #702082; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0e0a14; color: #f5f5f5;
border: 1px solid #333038; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8d8b90; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1e0e26; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0E0A14; color:#F4EFF7; box-sizing:border-box;
font-family:"Sora", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; font-variant-numeric: tabular-nums; }
.wrap { padding:26px 40px 0; }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:1pt; color:#FFC700; text-transform:uppercase; }
.btitle { font-size:26px; font-weight:800; margin-top:6px; }
.steps { display:flex; gap:8px; margin-top:16px; }
.step { height:30px; border-radius:999px; display:flex; align-items:center; gap:8px; padding:0 12px; font-size:12px; font-weight:700; }
.badge { width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; }
.step.done { border:1px solid #36C275; color:#F4EFF7; }
.step.done .badge { background:#36C275; color:#06210F; }
.step.active { background:linear-gradient(120deg,#702082,#C72BC8); color:#fff; }
.step.active .badge { background:rgba(255,255,255,.25); }
.step.def { background:#1A1322; border:1px solid #34273F; color:#A99BB6; }
.step.def .badge { background:#34273F; }
.hero { margin-top:16px; height:150px; border-radius:20px; position:relative; overflow:hidden;
background:linear-gradient(150deg,#702082,#4A1559,#2B0C36); padding:18px; }
.glow1 { position:absolute; top:-40px; right:-40px; width:180px; height:180px; border-radius:50%; background:rgba(199,43,200,.35); }
.glow2 { position:absolute; bottom:-50px; left:-30px; width:160px; height:160px; border-radius:50%; background:rgba(255,199,0,.22); }
.hero-bottom { position:absolute; bottom:14px; left:18px; right:18px; display:flex; justify-content:space-between; align-items:flex-end; }
.box-name { font-size:13px; font-weight:800; color:#fff; }
.box-count { font-size:11px; color:#FFC700; margin-top:2px; }
.box-price { font-size:20px; font-weight:800; color:#FFC700; }
.opt-row { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid #34273F; }
.food-thumb { width:46px; height:46px; border-radius:10px; }
.opt-name { font-size:15px; font-weight:600; }
.opt-desc { font-size:12px; color:#A99BB6; }
.upcharge { margin-left:auto; font-size:13px; font-weight:700; color:#A99BB6; margin-right:12px; }
.radio { width:24px; height:24px; border-radius:50%; border:2px solid #34273F; display:flex; align-items:center; justify-content:center; }
.radio.on { border-color:#C72BC8; }
.radio.on::after { content:''; width:16px; height:16px; border-radius:50%; background:#C72BC8; }
.cta-bar { margin-top:18px; display:flex; align-items:center; background:rgba(14,10,20,.96); border-top:1px solid #34273F; padding-top:14px; }
.total-lbl { font-size:11px; color:#A99BB6; }
.total-val { font-size:19px; font-weight:800; }
.add-btn { margin-left:auto; background:linear-gradient(120deg,#702082,#C72BC8); color:#fff; font-size:15px; font-weight:800;
padding:14px 28px; border-radius:14px; }
</style></head>
<body>
<div class="wrap">
<div class="box-count">Taco Bell (iOS)</div>
<div class="eyebrow">Build your box</div>
<div class="btitle">Cravings Box</div>
<div class="steps">
<div class="step done"><div class="badge">✓</div>Main</div>
<div class="step active"><div class="badge">2</div>Side</div>
<div class="step def"><div class="badge">3</div>Drink</div>
<div class="step def"><div class="badge">4</div>Sweet</div>
</div>
<div class="hero">
<div class="glow1"></div><div class="glow2"></div>
<div class="hero-bottom">
<div><div class="box-name">Cravings Box</div><div class="box-count">3 of 4 items</div></div>
<div class="box-price">$5.99</div>
</div>
</div>
<div class="opt-row"><img class="food-thumb" style="background:linear-gradient(135deg,#e0a13a,#c9762a);"/><div><div class="opt-name">Nacho Fries</div><div class="opt-desc">Seasoned fries, warm nacho cheese</div></div><div class="upcharge">+$1.00</div><div class="radio on"></div></div>
<div class="opt-row"><img class="food-thumb" style="background:linear-gradient(135deg,#a3c95c,#6f9930);"/><div><div class="opt-name">Cheesy Roll-Up</div><div class="opt-desc">Melted three-cheese blend</div></div><div class="upcharge"></div><div class="radio"></div></div>
<div class="cta-bar"><div><div class="total-lbl">Box total</div><div class="total-val">$5.99</div></div><div class="add-btn">Add to Order</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffcf8; color: #1d0e45;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffcf8; color: #1d0e45;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; letter-spacing: -0.2px; margin: 0; color: #1d0e45; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ed4c5c; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #fffcf8; color: #1d0e45;
border: 1px solid #ed4c5c; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fffcf8; color: #2f2f2f;
border: 1px solid #43454b; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ed4c5c; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fffcf8; color:#2f2f2f; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#1d0e45; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.brand { color:#fffcf8; font-size:19px; font-weight:700; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:15px; font-weight:600; color:#fffcf8; }
.navlinks span.on { color:#ed4c5c; }
.hero { height:220px; background:#1d0e45; display:flex; align-items:center; padding:0 32px; gap:30px; }
.hero .copy { flex:1.2; }
.hero h1 { color:#fff; font-size:32px; font-weight:700; margin:0 0 10px; letter-spacing:-0.5px; }
.hero p { color:#c188fb; font-size:14px; margin:0 0 16px; max-width:360px; }
.btn { display:inline-block; width:fit-content; background:#ed4c5c; color:#fff; font-size:16px; font-weight:600;
padding:12px 24px; border-radius:8px; }
.hero .art { flex:1; height:170px; border-radius:16px; background:radial-gradient(circle at 30% 30%,#9243e2,#1d0e45); }
.tiers { display:flex; gap:14px; padding:16px 32px; }
.tier { flex:1; background:#fff; border-radius:16px; padding:16px; text-align:center; }
.tier.f { border:2px solid #f0b849; }
.tier .n { font-size:15px; font-weight:600; margin:0 0 4px; }
.tier .p { font-size:20px; font-weight:700; color:#ed4c5c; margin:0; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:0 32px; }
.card { background:#fff; border-radius:12px; padding:10px; position:relative; }
.cover { height:80px; border-radius:8px; margin-bottom:6px; }
.badge { position:absolute; top:6px; left:6px; font-size:9px; font-weight:700; letter-spacing:0.5px;
text-transform:uppercase; padding:4px 10px; border-radius:9999px; color:#fff; }
.b-ex { background:#f0b849; color:#1d0e45; } .b-new { background:#9243e2; } .b-so { background:#dc3232; }
.t { font-size:12px; font-weight:600; margin:0 0 2px; }
.p { font-size:12px; color:#ed4c5c; font-weight:600; }
footer { position:absolute; bottom:0; left:0; right:0; height:52px; background:#1d0e45; color:#fffcf8;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
</style></head>
<body>
<nav>
<div class="brand">Fairyloot</div>
<div class="navlinks"><span class="on">Subscriptions</span><span>Shop</span><span>Blog</span><span>About</span></div>
</nav>
<div class="hero">
<div class="copy">
<h1>A magical book box, every month.</h1>
<p>Exclusive editions, bookish goodies, and stories worth staying up for.</p>
<span class="btn">Join Waitlist</span>
</div>
<div class="art"></div>
</div>
<div class="tiers">
<div class="tier"><p class="n">Book Only</p><p class="p">$24.99</p></div>
<div class="tier f"><p class="n">Book + Goodies</p><p class="p">$39.99</p></div>
<div class="tier"><p class="n">Deluxe Box</p><p class="p">$54.99</p></div>
</div>
<div class="grid">
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#ed4c5c,#c8102e);"><span class="badge b-ex">Exclusive</span></div>
<p class="t">April Box — Dragon's Bane</p><p class="p">$39.99</p></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#9243e2,#5a1f9e);"><span class="badge b-new">New</span></div>
<p class="t">Enamel Pin Set</p><p class="p">$14.00</p></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#f0b849,#c8931f);"></div>
<p class="t">Signed Edition — Ashwind</p><p class="p">$29.00</p></div>
<div class="card"><div class="cover" style="background:linear-gradient(160deg,#43454b,#6b7280);"><span class="badge b-so">Sold Out</span></div>
<p class="t">March Box — Sea of Ash</p><p class="p">$39.99</p></div>
</div>
<footer><span>© Fairyloot — Fantasy book subscription</span><span>Subscriptions · FAQ · Contact</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0f0f0f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #0f0f0f;
border: 1px solid #0f0f0f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d9d9d9; color: #0f0f0f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#0F0F0F; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { width:100%; height:100%; display:flex; flex-direction:column; }
.topbar { height:48px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 16px; }
.logo { display:flex; align-items:center; gap:8px; }
.logo .mark { width:28px; height:20px; border-radius:6px; background:#FF0000; display:flex; align-items:center; justify-content:center; }
.logo .mark svg { width:11px; height:11px; }
.logo b { font-size:19px; font-weight:700; letter-spacing:-0.2px; }
.topicons { display:flex; align-items:center; gap:18px; }
.topicons svg { width:22px; height:22px; }
.avatar-sm { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#3EA6FF,#0F0F0F); }
.chiprow { height:40px; flex-shrink:0; display:flex; align-items:center; gap:8px; padding:0 16px; }
.chip { height:32px; border-radius:16px; background:#F2F2F2; color:#0F0F0F; font-size:13px; font-weight:500;
padding:0 14px; display:flex; align-items:center; }
.chip.active { background:#0F0F0F; color:#FFFFFF; }
.feed { flex:1; min-height:0; padding:0 16px; display:flex; gap:16px; }
.vcard { flex:1; min-width:0; display:flex; flex-direction:column; }
.thumb { position:relative; width:100%; aspect-ratio:16/9; }
.th1 { background:linear-gradient(135deg,#232526,#414345); }
.th2 { background:linear-gradient(135deg,#485563,#29323c); }
.duration { position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,0.75); color:#fff; font-size:11px;
font-weight:500; border-radius:4px; padding:2px 5px; }
.livetag { position:absolute; left:6px; top:6px; background:#FF0000; color:#fff; font-size:11px; font-weight:700;
border-radius:4px; padding:2px 6px; display:flex; align-items:center; gap:4px; }
.livetag .dot { width:5px; height:5px; border-radius:50%; background:#fff; }
.meta { display:flex; padding-top:10px; gap:10px; }
.meta .av { width:28px; height:28px; border-radius:50%; flex-shrink:0; }
.av-a { background:linear-gradient(135deg,#FF6B6B,#556270); }
.av-b { background:linear-gradient(135deg,#43C6AC,#191654); }
.metatext { min-width:0; flex:1; }
.vtitle { font-size:15px; font-weight:500; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2;
-webkit-box-orient:vertical; overflow:hidden; }
.vsub { font-size:12px; color:#606060; margin-top:3px; }
.moreicon { color:#606060; font-size:16px; flex-shrink:0; }
.miniplayer { height:72px; flex-shrink:0; display:flex; align-items:center; background:#FFFFFF;
box-shadow:0 2px 8px rgba(0,0,0,0.08); padding:0 12px; gap:12px; }
.mini-thumb { width:112px; height:63px; border-radius:4px; flex-shrink:0;
background:linear-gradient(135deg,#8E2DE2,#4A00E0); }
.mini-text { flex:1; min-width:0; }
.mini-title { font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-chan { font-size:12px; color:#606060; margin-top:2px; }
.mini-icons { display:flex; align-items:center; gap:16px; }
.mini-icons svg { width:20px; height:20px; }
.tabbar { height:56px; flex-shrink:0; display:flex; align-items:center; justify-content:space-around;
border-top:1px solid #E5E5E5; }
.tab { display:flex; flex-direction:column; align-items:center; gap:2px; position:relative; }
.tab svg { width:22px; height:22px; }
.tab.active svg, .tab.active span { color:#0F0F0F; }
.tab svg, .tab span { color:#606060; }
.tab span { font-size:9px; font-weight:500; }
.tab .badge { position:absolute; top:-2px; right:-4px; width:7px; height:7px; border-radius:50%; background:#FF0000; }
.createbtn { width:32px; height:24px; border-radius:8px; border:1.6px solid #0F0F0F; display:flex; align-items:center; justify-content:center; }
</style></head>
<body>
<div class="wrap">
<div class="topbar">
<div class="logo"><div class="mark"><svg viewBox="0 0 24 24" fill="#fff"><path d="M8 5v14l11-7z"/></svg></div><b>YouTube (iOS)</b></div>
<div class="topicons">
<svg viewBox="0 0 24 24" fill="none" stroke="#0F0F0F" stroke-width="1.8"><rect x="2" y="5" width="15" height="11" rx="2"/><path d="M20 8l3-2v12l-3-2"/></svg>
<svg viewBox="0 0 24 24" fill="none" stroke="#0F0F0F" stroke-width="1.8"><path d="M18 8a6 6 0 00-12 0c0 5-2 6-2 6h16s-2-1-2-6z"/><path d="M9.5 18a2.5 2.5 0 005 0"/></svg>
<svg viewBox="0 0 24 24" fill="none" stroke="#0F0F0F" stroke-width="1.8"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
<div class="avatar-sm"></div>
</div>
</div>
<div class="chiprow">
<div class="chip active">All</div>
<div class="chip">Music</div>
<div class="chip">Gaming</div>
<div class="chip">Live</div>
<div class="chip">Coding</div>
<div class="chip">Podcasts</div>
</div>
<div class="feed">
<div class="vcard">
<div class="thumb th1">
<div class="livetag"><div class="dot"></div>LIVE</div>
</div>
<div class="meta">
<div class="av av-a"></div>
<div class="metatext">
<div class="vtitle">Designing a resilient sync engine from scratch — live build session</div>
<div class="vsub">Northbound Systems · 4.2K watching · Streaming now</div>
</div>
<div class="moreicon">⋮</div>
</div>
</div>
<div class="vcard">
<div class="thumb th2">
<div class="duration">12:34</div>
</div>
<div class="meta">
<div class="av av-b"></div>
<div class="metatext">
<div class="vtitle">Why every roadmap needs a "no" list (and how to write one)</div>
<div class="vsub">Clearline · 812K views · 3 days ago</div>
</div>
<div class="moreicon">⋮</div>
</div>
</div>
</div>
<div class="miniplayer">
<div class="mini-thumb"></div>
<div class="mini-text">
<div class="mini-title">Building a design system that survives contact with reality</div>
<div class="mini-chan">Field Notes</div>
</div>
<div class="mini-icons">
<svg viewBox="0 0 24 24" fill="#0F0F0F"><path d="M8 5v14l11-7z"/></svg>
<svg viewBox="0 0 24 24" fill="none" stroke="#606060" stroke-width="2"><path d="M6 6l12 12M18 6L6 18"/></svg>
</div>
</div>
<div class="tabbar">
<div class="tab active"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3z"/></svg><span>Home</span></div>
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="7" y="3" width="10" height="18" rx="2"/><path d="M11 7l4 3-4 3z" fill="currentColor" stroke="none"/></svg><span>Shorts</span></div>
<div class="tab"><div class="createbtn">+</div><span>Create</span></div>
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="4" rx="1"/><path d="M4 9v10a1 1 0 001 1h14a1 1 0 001-1V9M10 13h4"/></svg><div class="badge"></div><span>Subs</span></div>
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6"/></svg><span>You</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #231815;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #231815;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #231815; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #00dbdb; color: #000000;
border: none; border-radius: 4px; padding: 12px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #231815;
border: 1px solid #00dbdb; border-radius: 4px;
padding: 11px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #231815;
border: 1px solid #c8c5c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #00dbdb; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Outfit', -apple-system, sans-serif; color:#231815; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e5e5e5;}
.logo{font-size:20px;font-weight:700;color:#231815;}
.navlinks{display:flex;gap:24px;font-size:15px;font-weight:500;color:#231815;}
.search{background:#f5f5f5;border-radius:9999px;padding:10px 20px;font-size:13px;color:#b8bdc1;width:180px;}
.hero{height:280px;display:flex;align-items:center;padding:0 40px;}
.herotext{width:440px;}
.herotext h1{font-size:44px;font-weight:700;line-height:1.15;letter-spacing:-0.5px;margin:0 0 14px;}
.herotext p{font-size:16px;color:#444444;margin:0 0 20px;}
.btn{display:inline-block;background:#00dbdb;color:#fff;font-size:16px;font-weight:600;padding:12px 32px;border-radius:4px;}
.chargebar{position:relative;flex:1;height:120px;background:#f5f5f5;border-radius:12px;margin-left:20px;overflow:hidden;}
.chargefill{position:absolute;left:0;top:0;bottom:0;width:70%;background:linear-gradient(90deg,#00dbdb,#2cb2c2);}
.chargelabel{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:32px;font-weight:700;color:#00dbdb;}
.spechighlights{display:flex;gap:16px;padding:20px 40px 0;}
.spec{flex:1;background:#f5f5f5;border-radius:12px;text-align:center;padding:20px;}
.specval{font-size:32px;font-weight:700;color:#00dbdb;}
.specunit{font-size:14px;font-weight:500;color:#444444;margin-top:4px;}
.grid{display:flex;gap:16px;padding:20px 40px 0;}
.card{flex:1;background:#f5f5f5;border-radius:8px;padding:16px;}
.thumb{height:90px;background:#fff;border-radius:8px;margin-bottom:10px;}
.ptitle{font-size:16px;font-weight:600;}
.pspec{font-size:12px;color:#b8bdc1;margin:4px 0;}
.pprice{font-size:18px;font-weight:600;}
</style>
<div class="nav">
<div class="logo">Romoss</div>
<div class="navlinks"><div>Power Banks</div><div>Chargers</div><div>Cables</div></div>
<div class="search">Search products...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Charge Faster. Charge Smarter.</h1>
<p>Fast-charging power banks engineered for people who never stop moving.</p>
<div class="btn">Shop Power Banks</div>
</div>
<div class="chargebar"><div class="chargefill"></div><div class="chargelabel">70%</div></div>
</div>
<div class="spechighlights">
<div class="spec"><div class="specval">40000</div><div class="specunit">mAh</div></div>
<div class="spec"><div class="specval">65</div><div class="specunit">Watts</div></div>
<div class="spec"><div class="specval">4</div><div class="specunit">Ports</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ptitle">Sense 8+ Power Bank</div><div class="pspec">20000mAh · PD 3.0</div><div class="pprice">$59.99</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Rapid Wall Charger</div><div class="pspec">65W GaN</div><div class="pprice">$39.99</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Car Fast Charger</div><div class="pspec">Dual USB-C</div><div class="pprice">$24.99</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #13bd7e; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #13bd7e; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #13bd7e; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #13bd7e; color: #000000;
border: 1px solid #37c691; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1eaf91; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.side { width:200px; flex:0 0 200px; background:#ffffff; border-right:1px solid #f0f2f5; padding:20px 0; }
.side .brand { padding:0 20px 18px; font-size:16px; font-weight:700; }
.navitem { padding:10px 20px; font-size:14px; color:#555c68; }
.navitem.active { color:#111111; font-weight:700; background:rgba(19,189,126,0.10);
border-left:3px solid #13bd7e; padding-left:17px; }
.main { flex:1; padding:22px 26px; overflow:hidden; display:flex; flex-direction:column; }
.toprow { display:flex; justify-content:space-between; align-items:flex-start; }
.greet { font-size:14px; color:#555c68; }
.balance { font-size:32px; font-weight:700; letter-spacing:-0.08px; margin-top:4px; }
.balance .unit { font-size:16px; font-weight:500; color:#555c68; }
.chip-row { display:flex; gap:8px; }
.chip { background:rgba(19,189,126,0.15); color:#13bd7e; border-radius:6px; padding:8px 12px;
font-size:13px; font-weight:500; }
.chip.off { background:#f0f2f5; color:#555c68; }
.cols { display:flex; gap:20px; margin-top:20px; flex:1; overflow:hidden; }
.donutwrap { width:230px; flex:0 0 230px; display:flex; flex-direction:column; align-items:center; }
.donut { width:150px; height:150px; border-radius:50%;
background: conic-gradient(#13bd7e 0deg 158deg, #06a96c 158deg 245deg, #9fa4b0 245deg 300deg, #f0f2f5 300deg 360deg);
display:flex; align-items:center; justify-content:center; margin:6px 0 14px; }
.donutcenter { width:96px; height:96px; border-radius:50%; background:#ffffff; display:flex;
flex-direction:column; align-items:center; justify-content:center; }
.donutcenter .n { font-size:18px; font-weight:700; }
.donutcenter .l { font-size:11px; color:#9fa4b0; }
.legend { width:100%; font-size:12px; }
.legend .li { display:flex; align-items:center; gap:8px; padding:4px 0; }
.legend .sw { width:8px; height:8px; border-radius:50%; }
.legend .lbl { flex:1; color:#555c68; }
.legend .amt { font-weight:600; }
.accounts { flex:1; min-width:0; display:flex; flex-direction:column; }
.sectitle { font-size:16px; font-weight:700; margin-bottom:10px; }
.acct { display:flex; align-items:center; gap:12px; padding:14px 0; border-top:1px solid #f0f2f5; }
.acct:first-of-type { border-top:none; }
.icon { width:40px; height:40px; border-radius:24px; flex:0 0 40px; }
.ic1 { background:linear-gradient(135deg,#13bd7e,#06a96c); }
.ic2 { background:linear-gradient(135deg,#555c68,#111111); }
.ic3 { background:linear-gradient(135deg,#9fa4b0,#555c68); }
.acctinfo { flex:1; min-width:0; }
.acctinfo .nm { font-size:14px; font-weight:700; }
.acctinfo .sub { font-size:12px; color:#9fa4b0; margin-top:2px; }
.acctamt { font-size:15px; font-weight:700; }
.cta { margin-top:auto; width:100%; height:56px; border-radius:16px; border:none;
background:#06a96c; color:#ffffff; font-size:16px; font-weight:700; }
</style></head>
<body>
<div class="app">
<div class="side">
<div class="brand">Banksalad</div>
<div class="navitem active">Assets</div>
<div class="navitem">Cards</div>
<div class="navitem">Loans</div>
<div class="navitem">Insurance</div>
<div class="navitem">Credit score</div>
<div class="navitem">Safety center</div>
</div>
<div class="main">
<div class="toprow">
<div>
<div class="greet">Total net asset</div>
<div class="balance">32,480,200 <span class="unit">won</span></div>
</div>
<div class="chip-row">
<div class="chip">This month +2.4%</div>
<div class="chip off">Compare products</div>
</div>
</div>
<div class="cols">
<div class="donutwrap">
<div class="donut"><div class="donutcenter"><div class="n">6</div><div class="l">accounts</div></div></div>
<div class="legend">
<div class="li"><span class="sw" style="background:#13bd7e"></span><span class="lbl">Savings</span><span class="amt">44%</span></div>
<div class="li"><span class="sw" style="background:#06a96c"></span><span class="lbl">Investment</span><span class="amt">24%</span></div>
<div class="li"><span class="sw" style="background:#9fa4b0"></span><span class="lbl">Pension</span><span class="amt">15%</span></div>
<div class="li"><span class="sw" style="background:#f0f2f5"></span><span class="lbl">Card debt</span><span class="amt">17%</span></div>
</div>
</div>
<div class="accounts">
<div class="sectitle">Linked accounts</div>
<div class="acct">
<div class="icon ic1"></div>
<div class="acctinfo"><div class="nm">Everyday Savings</div><div class="sub">Woori Bank · updated 3m ago</div></div>
<div class="acctamt">14,200,000</div>
</div>
<div class="acct">
<div class="icon ic2"></div>
<div class="acctinfo"><div class="nm">Growth Fund A</div><div class="sub">Mirae Asset · updated 1h ago</div></div>
<div class="acctamt">7,850,000</div>
</div>
<div class="acct">
<div class="icon ic3"></div>
<div class="acctinfo"><div class="nm">Retirement Pension</div><div class="sub">Samsung Life · updated today</div></div>
<div class="acctamt">4,870,200</div>
</div>
<button class="cta">Compare a lower interest rate</button>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #050505;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #050505;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #050505; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #53585b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #fe6728; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: transparent; color: #050505;
border: 1px solid #fe6728; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #050505;
border: 1px solid #bdbdbd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #53585b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fe6728; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#1b1b1b; box-sizing:border-box;
font-family:'AvenirNextLTPro-Regular','Inter',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
h1 { font-family:Georgia,serif; font-weight:300; }
nav { height:64px; background:#fafafa; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:19px; font-weight:600; color:#050505; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.navlinks span.active { color:#fe6728; }
.navlinks span:not(.active) { color:#050505; }
.device-hero { height:280px; background:#050505; display:flex; align-items:center; justify-content:space-between; padding:0 48px; position:relative; overflow:hidden; }
.device-hero::before { content:''; position:absolute; right:60px; top:-30px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,#fe672855,transparent 70%); }
.device-hero-text { position:relative; z-index:2; }
.device-hero h1 { font-size:36px; color:#fff; margin:0 0 12px; max-width:400px; line-height:1.2; }
.device-hero p { font-size:15px; color:#c9c9c9; margin:0 0 18px; max-width:340px; font-family:'AvenirNextLTPro-Regular',Helvetica,sans-serif; }
.btn-orange { display:inline-block; background:#fe6728; color:#fff; font-size:14px; font-weight:600; letter-spacing:0.3px;
padding:14px 28px; border-radius:8px; }
.led-mask { position:relative; z-index:2; width:150px; height:190px; border-radius:12px; background:linear-gradient(160deg,#1b1b1b,#050505);
border:1px solid #3b3d3f; display:flex; align-items:center; justify-content:center; }
.led-dot { width:60px; height:60px; border-radius:50%; background:radial-gradient(circle,#fe6728,#3b3d3f 70%); }
.grid { display:flex; gap:16px; padding:20px 40px 0; }
.card { flex:1; background:#ffffff; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.06); padding:16px; position:relative; }
.card .imgbox { height:82px; background:#f3f3f3; border-radius:8px; margin-bottom:10px; }
.badge { position:absolute; top:12px; left:12px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
padding:4px 8px; border-radius:2px; }
.badge.sold { background:#53585b; color:#fff; }
.badge.new { background:#00b84a; color:#fff; }
.badge.limited { background:#cc0000; color:#fff; }
.card .name { font-size:16px; font-weight:600; margin-bottom:4px; }
.card .price { font-size:18px; font-weight:600; }
.card .price.sale { color:#cc0000; }
.card .price-old { font-size:13px; color:#868a89; text-decoration:line-through; margin-left:6px; }
footer { position:absolute; bottom:0; left:0; right:0; height:0; }
.wrap { position:relative; height:640px; }
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="brand">DR Dennis Gross Spectralite</div>
<div class="navlinks"><span class="active">Spectralite</span><span>Skincare</span><span>Devices</span><span>Support</span></div>
</nav>
<div class="device-hero">
<div class="device-hero-text">
<h1>Light therapy, engineered like a device should be.</h1>
<p>Clinically tested LED technology for firmer, clearer skin in weeks.</p>
<a class="btn-orange">Shop Spectralite</a>
</div>
<div class="led-mask"><div class="led-dot"></div></div>
</div>
<div class="grid">
<div class="card"><span class="badge new">New</span><div class="imgbox"></div><div class="name">Spectralite FaceWare Pro</div><div class="price">$395</div></div>
<div class="card"><span class="badge limited">Limited</span><div class="imgbox"></div><div class="name">Spectralite EyeCare Pro</div><div class="price">$225</div></div>
<div class="card"><div class="imgbox"></div><div class="name">Activator Serum</div><div class="price sale">$52 <span class="price-old">$65</span></div></div>
<div class="card"><span class="badge sold">Sold Out</span><div class="imgbox"></div><div class="name">Spectralite LipCare</div><div class="price">$135</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #202020;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #202020;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #202020; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #4d4d4d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #c20e1a; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #ffffff; color: #202020;
border: 1px solid #c20e1a; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #3e3e3e;
border: 1px solid #c7c7c7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4d4d4d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f0d039; color: #202020;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#202020; font-family:Arial,Helvetica,'Segoe UI',sans-serif; color:#f0f0f0;
}
*{box-sizing:border-box;}
.nav{height:64px; background:#151515; display:flex; align-items:center; padding:0 30px;}
.logo{font-size:22px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#c20e1a;}
.navlinks{display:flex; gap:22px; margin-left:36px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:#b8b8b8;}
.navcta{margin-left:auto; background:#c20e1a; color:#fff; padding:10px 20px; border-radius:4px; font-size:12px; font-weight:700; text-transform:uppercase;}
.hero{display:flex; align-items:center; gap:30px; padding:24px 30px; background:linear-gradient(120deg,#202020 0%,#3e3e3e 100%);}
.heroText{flex:1;}
.heroText .eyebrow{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#f0d039; font-weight:700; margin-bottom:10px;}
.heroText h1{font-size:30px; font-weight:700; line-height:1.2; margin:0 0 12px; max-width:400px; color:#fff;}
.heroText p{font-size:13px; color:#b8b8b8; line-height:1.5; max-width:380px; margin:0 0 16px;}
.heroBtn{display:inline-block; background:#c20e1a; color:#fff; padding:12px 26px; border-radius:4px; font-size:12px; font-weight:700; text-transform:uppercase;}
.heroImg{width:230px; height:160px; border-radius:4px; background:linear-gradient(150deg,#3e3e3e,#151515); position:relative; flex-shrink:0;}
.heroImg .dot{position:absolute; width:14px; height:14px; border-radius:50%;}
.d1{background:#c20e1a; top:20px; left:20px;} .d2{background:#f0d039; top:20px; left:44px;} .d3{background:#f70f5d; top:20px; left:68px;}
.heroImg .ring{position:absolute; width:70px; height:70px; border:6px solid #c49c48; border-radius:50%; bottom:16px; right:20px; opacity:.7;}
.section{padding:14px 30px 0;}
.sectitle{font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin:0 0 12px; color:#fff;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.card{background:#2b2b2b; border-radius:6px; padding:9px; text-align:center; position:relative;}
.thumb{height:76px; border-radius:6px; margin-bottom:8px; position:relative;}
.t1{background:linear-gradient(135deg,#c20e1a,#5c0a0e);}
.t2{background:linear-gradient(135deg,#f70f5d,#7a0a30);}
.t3{background:linear-gradient(135deg,#f0d039,#8a7519);}
.t4{background:linear-gradient(135deg,#c49c48,#6b5322);}
.badge{position:absolute; top:5px; left:5px; background:#f70f5d; color:#fff; font-size:8px; font-weight:700; padding:2px 6px; border-radius:4px;}
.pname{font-size:12px; font-weight:600; margin-bottom:3px; color:#f0f0f0;}
.pprice{font-size:12px; color:#f0d039; font-weight:700;}
.footer{position:absolute; bottom:0; left:0; right:0; background:#151515; color:#8a8a8a; font-size:10px; text-align:center; padding:8px 0;}
</style>
<div class="nav">
<div class="logo">Hercules DJ</div>
<div class="navlinks"><span>Controllers</span><span>Mixers</span><span>Speakers</span><span>Accessories</span></div>
<div class="navcta">Shop Gear</div>
</div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">Record. Cue. Effect.</div>
<h1>Gear Built for the Booth</h1>
<p>Precision DJ controllers, mixers, and speakers engineered for reliability under the lights — night after night.</p>
<div class="heroBtn">Shop Controllers</div>
</div>
<div class="heroImg"><span class="dot d1"></span><span class="dot d2"></span><span class="dot d3"></span><div class="ring"></div></div>
</div>
<div class="section">
<div class="sectitle">Featured Gear</div>
<div class="grid">
<div class="card"><div class="thumb t1"><span class="badge">Sale</span></div><div class="pname">Inpulse T7 Controller</div><div class="pprice">$399</div></div>
<div class="card"><div class="thumb t2"></div><div class="pname">DJControl Jogvision</div><div class="pprice">$249</div></div>
<div class="card"><div class="thumb t3"></div><div class="pname">Starlight Party Mixer</div><div class="pprice">$149</div></div>
<div class="card"><div class="thumb t4"></div><div class="pname">Akoustic 100 Monitors</div><div class="pprice">$179</div></div>
</div>
</div>
<div class="footer">© Hercules DJ — Professional DJ Equipment</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; letter-spacing: -0.2px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.38; margin: 0; color: #646464; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #004f9b; color: #ffffff;
border: none; border-radius: 2px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #ffffff; color: #004f9b;
border: 1px solid #004f9b; border-radius: 2px;
padding: 9px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #222222;
border: 1px solid #dbdddd; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #646464; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.36; letter-spacing: 0.5px; background: #dbe6f1; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Noto Sans',Arial,Helvetica,sans-serif; color:#363a3d; }
*{box-sizing:border-box;}
.topband{height:32px;background:#004f9b;display:flex;align-items:center;justify-content:flex-end;gap:18px;padding:0 34px;font-size:11px;color:#fff;}
.nav{height:60px;background:#fff;border-bottom:1px solid #dbdddd;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:18px;font-weight:700;color:#222222;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#363a3d;}
.hero{height:190px;background:#f5f5f5;display:flex;align-items:center;padding:0 34px;gap:34px;}
.herotext{width:410px;}
h1{font-size:26px;font-weight:700;color:#222222;margin:0 0 10px;letter-spacing:-.3px;}
.sub{font-size:13px;color:#363a3d;line-height:1.55;margin:0 0 14px;width:370px;}
.cta{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 22px;background:#004f9b;color:#fff;font-size:13px;font-weight:600;border-radius:2px;}
.panel{width:210px;height:130px;background:#222222;border-radius:4px;position:relative;padding:10px;}
.readout{font-family:Consolas,'Liberation Mono',monospace;font-size:22px;color:#61b6d9;margin-bottom:8px;}
.leds{display:flex;gap:8px;}
.led{width:14px;height:14px;border-radius:9999px;}
.section{padding:0 34px;}
.sectitle{font-size:18px;font-weight:700;color:#222222;margin:18px 0 12px;}
.grid{display:flex;gap:14px;}
.card{width:214px;background:#f6f6f7;border:1px solid #dbdddd;border-radius:4px;padding:12px;}
.thumb{height:96px;border-radius:2px;margin-bottom:10px;}
.ptitle{font-size:13px;font-weight:600;color:#222222;line-height:1.3;height:32px;overflow:hidden;}
.pmeta{font-family:Consolas,'Liberation Mono',monospace;font-size:12px;color:#646464;margin-top:6px;}
</style>
<div class="topband">EN | Global Support Portal | Contact Sales</div>
<div class="nav">
<div class="logo">Yokogawa</div>
<div class="navlinks"><div>Instruments</div><div>Control Systems</div><div>Solutions</div><div>Downloads</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Measurement you can act on.</h1>
<div class="sub">Precision flow, pressure, and temperature instruments engineered for industrial control at scale.</div>
<div class="cta">Explore Instruments</div>
</div>
<div class="panel">
<div class="readout">042.7</div>
<div class="leds"><div class="led" style="background:#43ac6a"></div><div class="led" style="background:#f08a24"></div><div class="led" style="background:#f04124"></div></div>
</div>
</div>
<div class="section">
<div class="sectitle">Featured Products</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#004f9b,#222222)"></div><div class="ptitle">EJX Series Pressure Transmitter</div><div class="pmeta">STATUS: NORMAL</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#3b0083,#222222)"></div><div class="ptitle">AXFA Magnetic Flowmeter</div><div class="pmeta">STATUS: NORMAL</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#f08a24,#222222)"></div><div class="ptitle">YTA Temperature Transmitter</div><div class="pmeta">STATUS: WARNING</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#61b6d9,#222222)"></div><div class="ptitle">CENTUM VP Control System</div><div class="pmeta">STATUS: NORMAL</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #222633;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #222633;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #222633; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #f388a1; color: #000000;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; background: #fefefe; color: #222633;
border: 1px solid #f388a1; border-radius: 9999px;
padding: 14px 32px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fefefe; color: #222633;
border: 1px solid #c7c8cb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #f388a1; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Foria Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Basis Grotesque',-apple-system,system-ui,sans-serif; background:#222633; color:#fefefe; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
.nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 44px; border-bottom:1px solid #33384a; }
.logo { font-weight:700; font-size:19px; letter-spacing:.5px; color:#fefefe; }
.navlinks { display:flex; gap:28px; font-size:12.5px; font-weight:500; color:#aaaaaa; }
.navcta { background:#f388a1; color:#222633; font-weight:700; font-size:13px; padding:10px 22px; border-radius:999px; }
.hero { display:flex; align-items:center; padding:44px 60px; gap:50px; flex:1; }
.hero-copy { max-width:400px; }
.tag { color:#f388a1; font-weight:600; font-size:11px; letter-spacing:2px; text-transform:uppercase; margin-bottom:14px; }
.hero h1 { font-weight:700; font-size:38px; line-height:1.18; margin:0 0 16px; color:#fefefe; }
.hero p { color:#c9c9c9; font-size:14.5px; line-height:1.7; margin:0 0 24px; max-width:360px; }
.btn-pill { background:#f388a1; color:#fff; font-weight:700; font-size:13px; padding:13px 28px; border-radius:999px; display:inline-block; }
.btn-outline { border:1.5px solid #9d4c1d; color:#f0b28a; font-weight:600; font-size:13px; padding:11px 26px; border-radius:999px; display:inline-block; margin-left:10px; }
.visual { width:280px; height:340px; border-radius:999px 999px 40px 40px; background:linear-gradient(160deg,#f388a1 0%,#9d4c1d 100%); position:relative; opacity:.92; }
.visual::after { content:''; position:absolute; inset:30px; border-radius:999px 999px 30px 30px; background:rgba(34,38,51,.35); }
.section { background:#fefefe; color:#222633; padding:26px 60px; }
.section h2 { font-weight:700; font-size:19px; margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#fefefe; border:1px solid #dedede; border-radius:16px; padding:16px; text-align:center; }
.card .ph { height:70px; width:70px; margin:0 auto 12px; border-radius:999px; }
.card .name { font-weight:600; font-size:13.5px; margin-bottom:4px; }
.card .desc { font-size:11px; color:#888888; margin-bottom:10px; line-height:1.5; }
.card .price { font-weight:700; font-size:14px; margin-bottom:10px; }
.card .buy { background:#222633; color:#fff; font-size:11px; font-weight:600; padding:8px 20px; border-radius:999px; display:inline-block; }
</style>
<div class="page">
<div class="nav">
<div class="logo">Foria</div>
<div class="navlinks"><span>Pleasure</span><span>Relief</span><span>Intimacy</span><span>Learn</span></div>
<div class="navcta">Shop the Line</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="tag">Plant-Powered Wellness</div>
<h1>Permission,<br>rendered in type.</h1>
<p>A private consultation held in negative space — pleasure oils and relief formulas for a body that deserves the whole room.</p>
<div><div class="btn-pill" style="display:inline-block;">Shop Pleasure</div><div class="btn-outline">Shop Relief</div></div>
</div>
<div class="visual"></div>
</div>
<div class="section">
<h2>Best Sellers</h2>
<div class="grid">
<div class="card"><div class="ph" style="background:linear-gradient(160deg,#f388a1,#d96a85);"></div><div class="name">Awaken Arousal Oil</div><div class="desc">CBD + Warming Botanicals</div><div class="price">$44.00</div><div class="buy">Add to Cart</div></div>
<div class="card"><div class="ph" style="background:linear-gradient(160deg,#9d4c1d,#222633);"></div><div class="name">Basics Suppositories</div><div class="desc">Menstrual Cramp Relief</div><div class="price">$65.00</div><div class="buy">Add to Cart</div></div>
<div class="card"><div class="ph" style="background:linear-gradient(160deg,#a45cec,#f388a1);"></div><div class="name">Intimacy Duo Set</div><div class="desc">Oil + Lubricant Pairing</div><div class="price">$78.00</div><div class="buy">Add to Cart</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #171717;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #171717;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #171717; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #108474; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #171717;
border: 1px solid #108474; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #171717;
border: 1px solid #c0c1c2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #edf5f5; color: #108474;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:'Inter', 'Open Sans', sans-serif; color:#1f1f1f; }
*{box-sizing:border-box;}
.nav{position:absolute; top:0; left:0; width:960px; height:64px; background:#171717; display:flex; align-items:center; justify-content:space-between; padding:0 40px;}
.logo{font-size:19px; font-weight:700; color:#f9fafb;}
.navlinks{display:flex; gap:24px; font-size:14px; font-weight:500; color:#f9fafb;}
.cart{font-size:13px; font-weight:600; color:#fbcd0a;}
.hero{position:absolute; top:64px; left:0; width:960px; height:280px; background:#121212; display:flex; align-items:center; padding:0 50px;}
.heroText{width:440px;}
.headline{font-size:38px; font-weight:700; letter-spacing:-0.8px; line-height:1.15; color:#f9fafb; margin-bottom:14px;}
.sub{font-size:15px; color:#dedede; margin-bottom:20px; width:380px; line-height:1.5;}
.btn{display:inline-block; background:#108474; color:#fff; font-size:14px; font-weight:600; padding:12px 26px; border-radius:4px;}
.penGraphic{position:absolute; right:60px; top:80px; width:320px; height:130px;}
.barrel{position:absolute; width:240px; height:20px; border-radius:10px 3px 3px 10px; background:linear-gradient(90deg,#0a6159,#108474 70%,#fbcd0a); top:50px; left:10px; transform:rotate(-14deg);}
.clip{position:absolute; width:60px; height:6px; background:#c5f7f0; top:34px; left:60px; transform:rotate(-14deg); border-radius:3px;}
.sec{position:absolute; top:344px; left:0; width:960px; height:296px; padding:30px 40px;}
.secTitle{font-size:22px; font-weight:700; margin-bottom:18px; color:#171717;}
.grid{display:flex; gap:18px;}
.card{width:216px; background:#fff; border:1px solid #eeeeee; border-radius:8px; padding:14px; position:relative;}
.cardImg{width:100%; height:100px; border-radius:4px; background:#f2f2f2; position:relative;}
.barrelMini{position:absolute; width:150px; height:12px; border-radius:6px 2px 2px 6px; background:#108474; top:44px; left:24px; transform:rotate(-8deg);}
.cardTitle{font-size:16px; font-weight:600; margin-top:12px;}
.cardPrice{font-size:20px; font-weight:700; margin-top:6px;}
.matBadge{position:absolute; top:8px; left:8px; background:#edf5f5; color:#108474; border:1px solid #c5f7f0; font-size:10px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:3px 8px; border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Karas Pen CO</div>
<div class="navlinks"><span>Pens</span><span>Materials</span><span>EDC</span><span>Journal</span></div>
<div class="cart">CART</div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">Machined From<br>Bar Stock.</div>
<div class="sub">CNC-cut aluminum, brass, and titanium pens, engineered a few blocks from our Phoenix shop.</div>
<div class="btn">Shop Pens</div>
</div>
<div class="penGraphic">
<div class="barrel"></div><div class="clip"></div>
</div>
</div>
<div class="sec">
<div class="secTitle">Bar Stock Series</div>
<div class="grid">
<div class="card"><div class="matBadge">Titanium</div><div class="cardImg"><div class="barrelMini"></div></div><div class="cardTitle">Bolt Action EDC</div><div class="cardPrice">$149</div></div>
<div class="card"><div class="matBadge">Aluminum</div><div class="cardImg"><div class="barrelMini" style="background:#7bbdb7"></div></div><div class="cardTitle">Render K</div><div class="cardPrice">$59</div></div>
<div class="card"><div class="matBadge">Brass</div><div class="cardImg"><div class="barrelMini" style="background:#fbcd0a"></div></div><div class="cardTitle">Fountain K</div><div class="cardPrice">$89</div></div>
<div class="card"><div class="matBadge">Copper</div><div class="cardImg"><div class="barrelMini" style="background:#0a6159"></div></div><div class="cardTitle">Retrakt</div><div class="cardPrice">$69</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: #000000; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #000000; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Arial,Helvetica,sans-serif; background:#ffffff; color:#333333; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:20px;font-weight:700;color:#000000;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;color:#6a6a6a;}
.navlinks span:first-child{color:#000000;border-bottom:2px solid #000000;padding-bottom:14px;}
.search{width:170px;height:32px;border-radius:9999px;background:#f5f5f5;border:1px solid #e0e0e0;font-size:12px;color:#6a6a6a;display:flex;align-items:center;padding:0 14px;}
.hero{padding:36px 32px;border-bottom:1px solid #e0e0e0;}
.hero h1{font-size:32px;font-weight:700;color:#000000;margin:0 0 8px;letter-spacing:-0.5px;}
.hero p{font-size:15px;color:#6a6a6a;margin:0;max-width:480px;}
.sec{padding:20px 32px 0;}
.secTitle{font-size:18px;font-weight:700;color:#000000;margin-bottom:14px;text-transform:uppercase;}
.grid{display:flex;gap:0;}
.card{width:210px;border:1px solid #f0f0f0;position:relative;}
.thumb{width:100%;aspect-ratio:1/1;background:#f5f5f5;position:relative;overflow:hidden;height:150px;}
.vinyl{position:absolute;left:45px;top:15px;width:120px;height:120px;border-radius:50%;background:repeating-radial-gradient(circle,#333 0,#333 2px,#555 3px,#555 5px);}
.vinyl:before{content:'';position:absolute;left:50px;top:50px;width:20px;height:20px;border-radius:50%;background:#cc0000;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;background:#000;color:#fff;padding:2px 8px;}
.ctitle{font-size:16px;font-weight:700;color:#000000;padding:10px 8px 0;line-height:1.3;height:42px;overflow:hidden;}
.artist{font-size:14px;color:#6a6a6a;padding:2px 8px;}
.cprice{font-size:16px;font-weight:700;color:#000000;padding:0 8px 12px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#000000;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:13px;color:#ffffff;}
.footer span{text-decoration:underline;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Waterloo Records Independ 2</div>
<div class="navlinks"><span>Rock</span><span>Pop</span><span>Soul</span><span>Jazz</span></div>
<div class="search">Search records...</div>
</div>
<div class="hero">
<h1>New Arrivals This Week</h1>
<p>Fresh pressings and used gems, sorted the old fashioned way — one crate at a time.</p>
</div>
<div class="sec">
<div class="secTitle">Rock & Soul</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">New Arrival</div><div class="vinyl"></div></div><div class="ctitle">Harvest Moon</div><div class="artist">Neil Young</div><div class="cprice">$28.00</div></div>
<div class="card"><div class="thumb"><div class="vinyl" style="background:repeating-radial-gradient(circle,#222 0,#222 2px,#444 3px,#444 5px)"></div></div><div class="ctitle">What's Going On</div><div class="artist">Marvin Gaye</div><div class="cprice">$24.00</div></div>
<div class="card"><div class="thumb"><div class="vinyl" style="background:repeating-radial-gradient(circle,#111 0,#111 2px,#333 3px,#333 5px)"></div></div><div class="ctitle">Kind of Blue</div><div class="artist">Miles Davis</div><div class="cprice">$32.00</div></div>
<div class="card"><div class="thumb"><div class="vinyl"></div></div><div class="ctitle">Blue Train</div><div class="artist">John Coltrane</div><div class="cprice">$26.00</div></div>
</div>
</div>
<div class="footer"><span>Store Hours & Address</span><span>Sell Us Your Records</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #084fff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #084fff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8aaafa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3971ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #084fff; color: #ffffff;
border: 1px solid #3971ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #084fff; color: #f5f5f5;
border: 1px solid #2e6afd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8aaafa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1054ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1a1d22; color:#ffffff; box-sizing:border-box;
font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:700; color:#fff; margin:0; }
.navlinks { display:flex; gap:24px; font-size:15px; font-weight:500; color:#c9ccd1; }
.cta { background:#084fff; color:#fff; border:none; border-radius:9999px; height:44px; padding:0 22px;
font-size:15px; font-weight:700; }
.hero { padding:36px 40px 30px; text-align:center; }
.hero h1 { font-size:42px; font-weight:700; line-height:1.25; margin:0 0 10px; letter-spacing:-.4px; }
.hero .accent { color:#bbf94f; }
.hero p { color:#c9ccd1; font-size:16px; margin:0 0 20px; }
.bigcta { background:#084fff; color:#fff; border:none; border-radius:9999px; height:52px; padding:0 32px;
font-size:17px; font-weight:700; }
.stores { background:#fff; padding:24px 40px 30px; }
.storetitle { color:#1c1c1c; font-size:22px; font-weight:700; margin:0 0 14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.store { background:#f9fafb; border-radius:20px; padding:16px; }
.swatch { width:100%; height:64px; border-radius:12px; margin-bottom:10px; }
.s1 { background:linear-gradient(135deg,#e6edff,#084fff33); }
.s2 { background:linear-gradient(135deg,#fff2e6,#f26d0033); }
.s3 { background:linear-gradient(135deg,#e9ffe6,#bbf94f55); }
.s4 { background:linear-gradient(135deg,#ffe6f2,#ff5c8a33); }
.store .t { font-size:13px; font-weight:700; color:#1c1c1c; }
.store .m { font-size:12px; color:#757575; margin-top:2px; }
.steps { display:flex; gap:20px; padding:0 40px 24px; justify-content:space-between; }
.step { display:flex; align-items:center; gap:10px; }
.num { background:#e6edff; color:#084fff; border-radius:8px; width:26px; height:26px; display:flex;
align-items:center; justify-content:center; font-weight:800; font-size:13px; }
.step span.t { color:#1c1c1c; font-size:13px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Cafe24</p>
<div class="navlinks"><span>Store</span><span>Marketing</span><span>Design</span><span>Partners</span></div>
<button class="cta">Start for Free</button>
</nav>
<section class="hero">
<h1>New here? No problem!<br><span class="accent">You can do it your first time.</span></h1>
<p>Anyone can build their own online store in just a few minutes.</p>
<button class="bigcta">Start for Free Now</button>
</section>
<section class="stores">
<p class="storetitle">Trending Stores</p>
<div class="grid">
<div class="store"><div class="swatch s1"></div><div class="t">Life Select Shop</div><div class="m">Fashion · Accessories</div></div>
<div class="store"><div class="swatch s2"></div><div class="t">Home Café Store</div><div class="m">Food · Coffee Beans</div></div>
<div class="store"><div class="swatch s3"></div><div class="t">Green Room Garden</div><div class="m">Living · Plants</div></div>
<div class="store"><div class="swatch s4"></div><div class="t">Beauty Lab</div><div class="m">Cosmetics</div></div>
</div>
<div class="steps" style="margin-top:20px;">
<div class="step"><span class="num">1</span><span class="t">Sign Up</span></div>
<div class="step"><span class="num">2</span><span class="t">Store Design</span></div>
<div class="step"><span class="num">3</span><span class="t">Add Products</span></div>
<div class="step"><span class="num">4</span><span class="t">Start Selling</span></div>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.18; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.27; letter-spacing: 0.2px; background: #0055FF; color: #FFFFFF;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.27; letter-spacing: 0.2px; background: #FFFFFF; color: #0055FF;
border: 1px solid #0055FF; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #111111;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #FF3B30; color: #FFFFFF;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#FFFFFF; font-family:'Gilroy','Inter',-apple-system,sans-serif; color:#111111; }
*{box-sizing:border-box;}
.trust{height:32px;background:#0055FF;display:flex;align-items:center;justify-content:space-around;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #E5E5E5;}
.logo{font-size:19px;font-weight:700;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;}
.hero{height:200px;background:#F7F8FF;display:flex;align-items:center;padding:0 40px;}
.herotext{width:420px;}
.herotext h1{font-size:36px;font-weight:700;letter-spacing:-.5px;line-height:1.15;margin:0 0 12px;}
.herotext p{font-size:14px;color:#333333;margin:0 0 14px;max-width:340px;}
.btn{display:inline-block;background:#0055FF;color:#fff;font-size:15px;font-weight:600;letter-spacing:.2px;padding:12px 24px;border-radius:8px;}
.heroart{flex:1;height:150px;border-radius:12px;background:linear-gradient(135deg,#99BBFF,#0055FF 70%);}
.pills{display:flex;gap:8px;padding:14px 30px 0;}
.pill{border:1px solid #E5E5E5;color:#666666;font-size:13px;font-weight:600;border-radius:9999px;padding:8px 18px;}
.pill.on{background:#0055FF;color:#fff;border-color:#0055FF;}
.grid{display:flex;gap:14px;padding:14px 30px 0;}
.card{width:206px;background:#fff;border:1px solid #F0F0F0;border-radius:12px;padding:12px;position:relative;box-shadow:0 2px 12px rgba(0,0,0,.06);}
.badge{position:absolute;top:8px;left:8px;background:#0055FF;color:#fff;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;border-radius:4px;padding:3px 8px;}
.thumb{height:90px;background:#F7F8FF;border-radius:8px;margin-bottom:8px;}
.ctitle{font-size:16px;font-weight:600;margin:0;}
.cprice{font-size:22px;font-weight:700;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:88px;background:#111111;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:13px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="trust"><span>Free Delivery Above ₹499</span><span>COD Available</span><span>30-Day Returns</span><span>Clinically Tested</span></div>
<div class="nav">
<div class="logo">Perfora</div>
<div class="navlinks"><div>Brushes</div><div>Whitening</div><div>Accessories</div><div>Travel Kits</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Oral care that feels like a gadget.</h1>
<p>Electric brushes and whitening kits engineered like premium electronics.</p>
<div class="btn">Shop Now</div>
</div>
<div class="heroart"></div>
</div>
<div class="pills"><div class="pill on">All</div><div class="pill">Brushes</div><div class="pill">Whitening</div><div class="pill">Kits</div></div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb"></div><div class="ctitle">Sonic Electric Toothbrush</div><div class="cprice">₹1,999</div></div>
<div class="card"><div class="thumb" style="background:#E8EEFF;"></div><div class="ctitle">Teeth Whitening Strips</div><div class="cprice">₹899</div></div>
<div class="card"><div class="thumb" style="background:#99BBFF;"></div><div class="ctitle">Travel Toothbrush Kit</div><div class="cprice">₹499</div></div>
<div class="card"><div class="thumb" style="background:#003DCC;"></div><div class="ctitle">Replacement Brush Heads</div><div class="cprice">₹349</div></div>
</div>
<div class="footer"><span>© Perfora</span><span>Shop Support About</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00b7ff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00b7ff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #111214; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b7ff; color: #111214;
border: 1px solid #111214; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00b7ff; color: #000000;
border: 1px solid #27c1fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #039dd9; color: #111214;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gaudio Lab</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#ffffff; color:#111214; box-sizing:border-box; font-family: "Roboto", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 26px; background:#ffffff; }
.logo { font-family:"Poppins", sans-serif; font-size:17px; font-weight:700; color:#111214; }
.nav-items { display:flex; gap:6px; }
.nav-item { font-size:14px; font-weight:500; color:#111214; padding:8px 16px; border-radius:6px; }
.nav-item.active { color:#00b7ff; }
.nav-cta { background:#00b7ff; color:#fafafa; border-radius:6px; padding:8px 16px; font-size:14px; font-weight:500; height:32px; display:flex; align-items:center; }
.darkband { height:284px; background:#1e1e1f; position:relative; overflow:hidden; padding:26px 34px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.wave { display:flex; align-items:center; justify-content:center; gap:3px; height:56px; margin-bottom:18px; }
.bar { width:4px; border-radius:2px; background:#00b7ff; }
.kicker { font-family:"Roboto", sans-serif; font-size:13px; font-weight:500; letter-spacing:1.5px; color:#9ca3af; text-transform:uppercase; margin-bottom:10px; }
.hero-title { font-family:"Poppins", sans-serif; font-size:34px; font-weight:900; line-height:1.2; color:#ffffff; margin:0 0 10px; }
.hero-sub { font-family:"Noto Sans KR", sans-serif; font-size:15px; color:#d3d5da; max-width:560px; line-height:1.5; margin:0 0 18px; }
.film-btn { background:#ffffff; color:#111214; border-radius:4px; padding:12px 30px; font-family:"Poppins", sans-serif; font-size:15px; font-weight:500; }
.statrow { height:104px; display:flex; align-items:center; justify-content:center; gap:64px; background:#f0f9ff; }
.stat { text-align:center; }
.stat-num { font-family:"Roboto", sans-serif; font-size:32px; font-weight:700; letter-spacing:0.15px; color:#111214; line-height:1.1; }
.stat-label { font-size:13px; color:#9ca3af; margin-top:2px; }
.newsrow { display:flex; gap:14px; padding:18px 26px 0; }
.news-card { flex:1; background:#ffffff; border:1px solid #d6d6d6; border-radius:12px; padding:14px 16px; }
.news-tag { font-size:11px; font-weight:500; color:#00b7ff; text-transform:uppercase; letter-spacing:0.6px; margin-bottom:6px; }
.news-title { font-family:"Roboto", sans-serif; font-size:15px; font-weight:500; line-height:1.4; color:#111214; margin:0; }
</style>
</head>
<body>
<div class="nav">
<div class="logo">Gaudio Lab</div>
<div class="nav-items">
<div class="nav-item active">Products</div>
<div class="nav-item">Technology</div>
<div class="nav-item">Blog & News</div>
<div class="nav-item">Careers</div>
</div>
<div class="nav-cta">Contact us</div>
</div>
<div class="darkband">
<div class="wave">
<div class="bar" style="height:14px;"></div>
<div class="bar" style="height:28px;"></div>
<div class="bar" style="height:42px;"></div>
<div class="bar" style="height:20px;"></div>
<div class="bar" style="height:52px;"></div>
<div class="bar" style="height:34px;"></div>
<div class="bar" style="height:56px;"></div>
<div class="bar" style="height:30px;"></div>
<div class="bar" style="height:44px;"></div>
<div class="bar" style="height:18px;"></div>
<div class="bar" style="height:38px;"></div>
<div class="bar" style="height:50px;"></div>
<div class="bar" style="height:24px;"></div>
<div class="bar" style="height:46px;"></div>
<div class="bar" style="height:16px;"></div>
<div class="bar" style="height:36px;"></div>
<div class="bar" style="height:54px;"></div>
<div class="bar" style="height:22px;"></div>
<div class="bar" style="height:40px;"></div>
<div class="bar" style="height:12px;"></div>
<div class="bar" style="height:32px;"></div>
<div class="bar" style="height:48px;"></div>
<div class="bar" style="height:20px;"></div>
<div class="bar" style="height:44px;"></div>
<div class="bar" style="height:26px;"></div>
</div>
<div class="kicker">The Science of Sound</div>
<div class="hero-title">Where sound is, Gaudio Lab is there.</div>
<div class="hero-sub">Spatial audio, AI dialogue separation, and loudness tools built by an audio-research team.</div>
<div class="film-btn">Watch the Film</div>
</div>
<div class="statrow">
<div class="stat"><div class="stat-num">50M</div><div class="stat-label">daily users</div></div>
<div class="stat"><div class="stat-num">119</div><div class="stat-label">IP filed</div></div>
<div class="stat"><div class="stat-num">35</div><div class="stat-label">partners</div></div>
</div>
<div class="newsrow">
<div class="news-card">
<div class="news-tag">Award</div>
<p class="news-title">CES Innovation Award — fourth consecutive year</p>
</div>
<div class="news-card">
<div class="news-tag">Product</div>
<p class="news-title">Gaudio Studio Pro adds real-time AI localization</p>
</div>
<div class="news-card">
<div class="news-tag">Partnership</div>
<p class="news-title">New streaming partner integrates spatial audio API</p>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff6000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff6000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #222222; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6000; color: #222222;
border: 1px solid #222222; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff6000; color: #f5f5f5;
border: 1px solid #fd7827; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #dc5605; color: #222222;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #e5e5e5; }
.brand { font-size:19px; font-weight:700; color:#222222; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#737373; }
.navlinks span:first-child { color:#ff6000; font-weight:600; }
.account-pill { border:1px solid #d4d4d4; border-radius:9999px; padding:10px 16px;
font-size:14px; color:#222222; background:#ffffff; }
.layout { display:flex; height:calc(640px - 64px); }
.side { width:220px; border-right:1px solid #e5e5e5; padding:28px 24px; }
.side .eyebrow { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
color:#a3a3a3; margin-bottom:14px; }
.side ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.side li { font-size:14px; color:#737373; }
.side li.active { color:#ff6000; font-weight:600; }
.side .divider { height:1px; background:#e5e5e5; margin:22px 0; }
.side .badge-mini { display:inline-block; margin-top:18px; font-size:11px; color:#a3a3a3;
border:1px solid #e5e5e5; border-radius:6px; padding:6px 10px; line-height:1.5; }
.main { flex:1; padding:28px 36px 0; overflow:hidden; }
.searchrow { display:flex; align-items:center; gap:10px; border:1px solid #e5e5e5;
border-radius:10px; padding:12px 16px; margin-bottom:22px; }
.searchrow .dot { width:8px; height:8px; border-radius:50%; background:#ff6000; flex:none; }
.searchrow .fake-input { font-size:20px; font-weight:600; color:#ff6000; }
.promo { background:#fcf4ee; border-radius:16px; padding:40px; display:flex; align-items:center;
justify-content:space-between; gap:24px; margin-bottom:26px; }
.promo h1 { font-size:32px; font-weight:700; line-height:1.25; margin:0 0 8px; color:#222222; max-width:420px; }
.promo p { margin:0; font-size:16px; color:#737373; line-height:1.5; max-width:380px; }
.promo .hackline { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
color:#ff6000; margin-bottom:10px; }
.promo .mark { width:96px; height:96px; border-radius:16px; background:#ffffff; flex:none;
display:flex; align-items:center; justify-content:center; }
.promo .mark .cub { width:44px; height:44px; border-radius:12px; background:#ff6000; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { border:1px solid #e5e5e5; border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:8px; }
.card .tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#a3a3a3; }
.card h3 { font-size:20px; font-weight:600; margin:0; line-height:1.3; color:#222222; }
.card p { font-size:13px; color:#737373; margin:0; line-height:1.5; }
.card .meta { margin-top:8px; font-size:12px; color:#a3a3a3; display:flex; gap:10px; }
</style></head>
<body>
<nav>
<span class="brand">LikeLion</span>
<div class="navlinks"><span>Courses</span><span>Bootcamp</span><span>AI Education</span><span>Business</span></div>
<div class="account-pill">Log in / Sign up</div>
</nav>
<div class="layout">
<aside class="side">
<div class="eyebrow">Learning Tracks</div>
<ul>
<li class="active">K-Digital Training</li>
<li>AI Bootcamp</li>
<li>Frontend Track</li>
<li>Data Track</li>
<li>Business Education</li>
</ul>
<div class="divider"></div>
<div class="badge-mini">Learn by solving real problems, then share what you found.</div>
</aside>
<div class="main">
<div class="searchrow"><span class="dot"></span><span class="fake-input">Search a course or a problem to solve</span></div>
<div class="promo">
<div>
<div class="hackline">Hack your life</div>
<h1>Turn your idea into something you can ship</h1>
<p>Structured tracks built around real problems, mentoring, and shared experience — from your first line of code to your first release.</p>
</div>
<div class="mark"><div class="cub"></div></div>
</div>
<div class="grid">
<div class="card">
<span class="tag">Bootcamp</span>
<h3>12-Week Backend Track</h3>
<p>Ship a real service from planning to deployment, mentored by working engineers.</p>
<div class="meta"><span>Next cohort · Mar</span><span>Onsite + Online</span></div>
</div>
<div class="card">
<span class="tag">AI Education</span>
<h3>Working With AI as a Teammate</h3>
<p>Practical sessions on using AI tools inside a real production workflow.</p>
<div class="meta"><span>6 weeks</span><span>Beginner friendly</span></div>
</div>
<div class="card">
<span class="tag">Business</span>
<h3>AX Learning for Teams</h3>
<p>Problem-led workshops for organizations adopting AI collaboration.</p>
<div class="meta"><span>Custom schedule</span><span>B2B</span></div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #0070f3; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #000000;
border: 1px solid #0070f3; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a2e;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #059669; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 64px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; border-bottom:1px solid #e5e7eb; background:#ffffff; }
.brand { font-size:17px; font-weight:700; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; font-size:14px; font-weight:500; color:#6b7280; }
.navlinks span.active { color:#0070f3; padding-bottom:20px; border-bottom:2px solid #0070f3; }
.btn-primary { background:#0070f3; color:#ffffff; border:none; border-radius:8px;
padding:10px 20px; font-weight:600; font-size:13px; white-space:nowrap; }
.hero { flex:0 0 224px; background:#f9fafb; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; gap:28px; }
.hero-copy { max-width:410px; }
.hero h1 { font-size:32px; font-weight:700; letter-spacing:-0.5px; line-height:1.15; margin:0 0 10px; }
.hero p { font-size:14px; color:#6b7280; line-height:1.55; margin:0 0 16px; }
.hero-actions { display:flex; align-items:center; gap:16px; }
.btn-pill { background:#0070f3; color:#ffffff; border:none; border-radius:9999px;
padding:11px 22px; font-weight:600; font-size:14px; white-space:nowrap; }
.btn-text { background:transparent; color:#0070f3; border:none; font-weight:500; font-size:14px; }
.dash-card { width:300px; background:#ffffff; border:1px solid #f3f4f6; border-radius:12px; padding:18px;
box-shadow:0 4px 12px rgba(0,0,0,0.08); flex-shrink:0; }
.dash-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.dash-head span { font-size:12px; font-weight:600; color:#1a1a2e; }
.badge-green { background:#059669; color:#ffffff; font-size:10px; font-weight:700; letter-spacing:0.3px;
text-transform:uppercase; border-radius:9999px; padding:2px 8px; }
.prow { display:flex; flex-direction:column; gap:9px; }
.pitem { display:flex; flex-direction:column; gap:3px; }
.plabel { display:flex; justify-content:space-between; font-size:11px; color:#6b7280; }
.ptrack { height:8px; border-radius:9999px; background:#f3f4f6; overflow:hidden; }
.pfill { height:100%; border-radius:9999px; background:#0070f3; }
.cards { flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:16px 36px; overflow:hidden; }
.pcard { border:1px solid #f3f4f6; border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:8px;
background:#ffffff; position:relative; }
.pcard.featured { border:2px solid #0070f3; box-shadow:0 8px 24px rgba(0,112,243,0.12); }
.pcard-badge { position:absolute; top:-9px; left:14px; }
.pcard .swatch { height:56px; border-radius:8px; background:linear-gradient(135deg,#e7f0ff,#cfe3ff); position:relative; }
.pcard .swatch::after { content:''; position:absolute; left:50%; top:50%; width:28px; height:28px; border-radius:9999px;
background:#0070f3; transform:translate(-50%,-50%); opacity:0.85; }
.pcard h3 { font-size:14px; font-weight:600; margin:0; }
.pcard .desc { font-size:12px; color:#6b7280; line-height:1.4; margin:0; }
.pcard .price { font-size:18px; font-weight:700; margin-top:auto; }
.pcard .price span { font-size:11px; font-weight:400; color:#9ca3af; }
.badge-outline { display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase;
color:#6b7280; border:1px solid #e5e7eb; border-radius:9999px; padding:2px 8px; align-self:flex-start; }
footer { flex:0 0 54px; background:#000000; color:#9ca3af; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; font-size:11px; }
footer .link { color:#9ca3af; }
</style></head>
<body>
<nav>
<p class="brand">Athletic Greens Ag1</p>
<div class="navlinks">
<span class="active">Product</span><span>Science</span><span>Reviews</span><span>Subscribe</span>
</div>
<button class="btn-primary">Shop Now</button>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>Foundational nutrition. Redefined.</h1>
<p>One scoop. 75 vitamins, minerals, and whole-food sourced ingredients — formulated with ongoing clinical research.</p>
<div class="hero-actions">
<button class="btn-pill">Subscribe & Save</button>
<button class="btn-text">See the science →</button>
</div>
</div>
<div class="dash-card">
<div class="dash-head">
<span>Daily Coverage</span>
<span class="badge-green">Verified</span>
</div>
<div class="prow">
<div class="pitem">
<div class="plabel"><span>Vitamins</span><span>92%</span></div>
<div class="ptrack"><div class="pfill" style="width:92%"></div></div>
</div>
<div class="pitem">
<div class="plabel"><span>Minerals</span><span>88%</span></div>
<div class="ptrack"><div class="pfill" style="width:88%"></div></div>
</div>
<div class="pitem">
<div class="plabel"><span>Probiotics & Enzymes</span><span>95%</span></div>
<div class="ptrack"><div class="pfill" style="width:95%"></div></div>
</div>
</div>
</div>
</section>
<section class="cards">
<div class="pcard featured">
<span class="pcard-badge"><span class="badge-green">Bestseller</span></span>
<div class="swatch"></div>
<h3>AG1 Subscription</h3>
<p class="desc">30-day supply, delivered monthly. Cancel anytime.</p>
<div class="price">$79 <span>/ month</span></div>
</div>
<div class="pcard">
<div class="swatch"></div>
<h3>AG1 Starter Kit</h3>
<p class="desc">Includes shaker bottle and travel canister.</p>
<div class="price">$99 <span>one-time</span></div>
</div>
<div class="pcard">
<span class="badge-outline">New</span>
<div class="swatch"></div>
<h3>AG1 Travel Packs</h3>
<p class="desc">30 single-serve sachets for on-the-go.</p>
<div class="price">$45 <span>one-time</span></div>
</div>
</section>
<footer>
<span>© Athletic Greens Ag1</span>
<span><span class="link">Product</span> · <span class="link">Support</span> · <span class="link">Company</span></span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f0ee; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f0ee; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #777574; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #141413; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f3f0ee; color: #141413;
border: 1px solid #141413; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f3f0ee; color: #111111;
border: 1px solid #cfcccb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777574; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cfcdcb; color: #141413;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F3F0EE; color:#141413; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.navpill { margin:16px auto 0; width:820px; background:rgba(255,255,255,0.92); border-radius:999px;
box-shadow:rgba(0,0,0,0.04) 0px 4px 24px 0px; display:flex; align-items:center; justify-content:space-between;
padding:12px 28px; }
.brand { font-size:14px; font-weight:700; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:26px; font-size:12px; font-weight:500; color:#141413; }
.searchdot { width:30px; height:30px; border-radius:50%; border:1px solid #141413; display:flex; align-items:center; justify-content:center; font-size:11px; }
.watermark { position:relative; text-align:center; margin-top:6px; }
.watermark .ghost { font-size:56px; font-weight:500; letter-spacing:-1.1px; color:#E8E2DA; margin:0; line-height:1; }
.orbitwrap { position:relative; height:260px; margin:-30px 20px 0; }
.portrait { position:absolute; width:150px; height:150px; border-radius:50%; }
.p1 { left:70px; top:20px; background:radial-gradient(circle at 35% 30%, #F37338, #9A3A0A 75%); }
.p2 { left:400px; top:70px; background:radial-gradient(circle at 40% 35%, #F3D6B0, #CF4500 75%); }
.p3 { left:700px; top:10px; background:radial-gradient(circle at 35% 30%, #D8CFC2, #696969 75%); }
.sat { position:absolute; width:40px; height:40px; border-radius:50%; background:#fff; display:flex; align-items:center;
justify-content:center; font-size:14px; color:#141413; }
.sat1 { left:190px; top:130px; } .sat2 { left:520px; top:180px; } .sat3 { left:820px; top:120px; }
.cap { position:absolute; width:150px; text-align:center; font-size:11px; }
.cap1 { left:70px; top:178px; } .cap2 { left:400px; top:228px; } .cap3 { left:700px; top:168px; }
.cap .eyebrow { font-size:10px; font-weight:700; letter-spacing:0.56px; text-transform:uppercase; color:#CF4500; }
.cap h3 { font-size:14px; font-weight:500; margin:2px 0 0; letter-spacing:-0.2px; }
.arc { position:absolute; top:0; left:0; width:960px; height:260px; }
.ctarow { display:flex; justify-content:center; gap:12px; margin-top:8px; }
.btn-ink { background:#141413; color:#F3F0EE; border:none; border-radius:20px; padding:8px 24px; font-size:13px; font-weight:500; }
.btn-outline { background:#fff; color:#141413; border:1.5px solid #141413; border-radius:20px; padding:8px 24px; font-size:13px; font-weight:400; }
footer { position:absolute; left:0; right:0; bottom:0; background:#141413; color:#fff; padding:14px 40px;
display:flex; justify-content:space-between; align-items:center; font-size:12px; }
footer .h2mini { font-size:16px; font-weight:500; }
</style></head>
<body>
<nav class="navpill">
<span class="brand">Mastercard</span>
<div class="navlinks"><span>For you</span><span>For business</span><span>For the world</span><span>News</span></div>
<span class="searchdot">⌕</span>
</nav>
<div class="watermark"><p class="ghost">SERVICES</p></div>
<div class="orbitwrap">
<svg class="arc" viewBox="0 0 960 260"><path d="M145 95 Q 300 40 400 145" stroke="#F37338" stroke-width="1.3" fill="none" opacity="0.7"/>
<path d="M475 145 Q 620 90 700 85" stroke="#F37338" stroke-width="1.3" fill="none" opacity="0.7"/></svg>
<div class="portrait p1"></div>
<div class="sat sat1">→</div>
<div class="cap cap1"><span class="eyebrow">• Services</span><h3>Payments network</h3></div>
<div class="portrait p2"></div>
<div class="sat sat2">→</div>
<div class="cap cap2"><span class="eyebrow">• Solutions</span><h3>Cyber & intelligence</h3></div>
<div class="portrait p3"></div>
<div class="sat sat3">→</div>
<div class="cap cap3"><span class="eyebrow">• Innovators</span><h3>Start Path</h3></div>
</div>
<div class="ctarow"><button class="btn-ink">Explore</button><button class="btn-outline">Learn more</button></div>
<footer>
<span class="h2mini">We're always here when you need us</span>
<span>Mastercard · Careers · Newsroom · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfcfd; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfcfd; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fcfcfd; color: #1a1a1e;
border: 1px solid #1a1a1e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fcfcfd; color: #111111;
border: 1px solid #d6d6d7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d8d8d9; color: #1a1a1e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FCFCFD; color:#1C1C22; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.shell { position:relative; width:960px; height:640px; display:flex; }
.side { width:220px; height:640px; background:#F4F4F6; border-right:1px solid #E6E6EA;
padding:20px 16px; display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
.side-title { font-size:12px; font-weight:600; color:#9B9BA6; text-transform:uppercase; letter-spacing:0.04em; margin:10px 0 4px; }
.side-row { height:36px; border-radius:8px; display:flex; align-items:center; gap:10px; padding:0 8px; font-size:13px; color:#1C1C22; }
.side-row.active { background:#ECECEF; }
.side-emoji { width:18px; text-align:center; font-size:14px; }
.side-daily { margin-top:auto; background:linear-gradient(135deg,#2F5BEA14,#6E56CF14); border:1px solid #E6E6EA;
border-radius:12px; padding:12px; font-size:12px; color:#6A6A78; }
.side-daily b { display:block; font-size:13px; color:#1C1C22; margin-bottom:2px; }
.doc { flex:1; height:640px; overflow:hidden; position:relative; }
.cover { height:88px; background:linear-gradient(120deg,#2F5BEA,#6E56CF); }
.doc-body { padding:0 46px; }
.icon-emoji { width:56px; height:56px; border-radius:16px; background:#FFFFFF; border:1px solid #E6E6EA;
box-shadow:0 6px 18px -10px rgba(0,0,0,0.10); margin-top:-28px; display:flex; align-items:center;
justify-content:center; font-size:30px; }
.doc-title { font-size:28px; font-weight:800; letter-spacing:-0.5px; margin:14px 0 4px; }
.doc-meta { font-size:13px; color:#6A6A78; margin-bottom:20px; }
.block-p { font-size:16px; line-height:1.55; margin-bottom:14px; color:#1C1C22; }
.block-h2 { font-size:20px; font-weight:700; letter-spacing:-0.2px; margin:18px 0 8px; }
.todo { display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:16px; }
.todo-box { width:18px; height:18px; border-radius:6px; border:1.8px solid #9B9BA6; flex-shrink:0; }
.todo-box.done { background:#2F5BEA; border-color:#2F5BEA; }
.todo.done span { color:#9B9BA6; text-decoration:line-through; }
.callout { background:#2F5BEA14; border-radius:12px; padding:14px; display:flex; gap:10px; align-items:flex-start;
font-size:15px; margin-bottom:14px; }
.callout .em { font-size:18px; }
.card-row { display:flex; gap:14px; margin-bottom:14px; }
.block-card { flex:1; border:1px solid #E6E6EA; border-radius:12px; padding:14px; background:#FFFFFF;
box-shadow:0 6px 18px -10px rgba(0,0,0,0.10); display:flex; align-items:center; gap:12px; }
.chip-icon { width:36px; height:36px; border-radius:9px; background:#6E56CF14; display:flex; align-items:center;
justify-content:center; font-size:18px; flex-shrink:0; }
.card-text b { display:block; font-size:15px; font-weight:600; }
.card-text span { font-size:12px; color:#6A6A78; }
.fab { position:absolute; right:26px; bottom:26px; width:46px; height:46px; border-radius:14px;
background:linear-gradient(135deg,#2F5BEA,#6E56CF); box-shadow:0 8px 20px -6px rgba(47,91,234,0.6);
display:flex; align-items:center; justify-content:center; }
.fab::before { content:'+'; color:#fff; font-size:22px; font-weight:400; line-height:1; }
</style></head>
<body>
<div class="shell">
<div class="side">
<div class="side-title">Spaces</div>
<div class="side-row active"><span class="side-emoji">📁</span>Product Notes</div>
<div class="side-row"><span class="side-emoji">🎯</span>2026 Goals</div>
<div class="side-title">Daily Notes</div>
<div class="side-row"><span class="side-emoji">📅</span>September 5</div>
<div class="side-row"><span class="side-emoji">📅</span>September 4</div>
<div class="side-daily"><b>📅 Daily Note — Sep 5</b>Auto-created · 3 blocks</div>
</div>
<div class="doc">
<div class="cover"></div>
<div class="doc-body">
<div class="icon-emoji">🚀</div>
<div class="doc-title">Craft (iOS) Launch Plan</div>
<div class="doc-meta">Edited 2m ago · Shared with 4</div>
<div class="block-p">Kickoff notes for the fall release. Use <b>/</b> to insert blocks — pages, to-dos,
images, or tables all live in this flow.</div>
<div class="block-h2">Milestones</div>
<div class="todo done"><span class="todo-box done"></span><span>Finalize onboarding copy</span></div>
<div class="todo"><span class="todo-box"></span><span>Ship the new pricing page</span></div>
<div class="todo"><span class="todo-box"></span><span>Record the launch walkthrough</span></div>
<div class="callout"><span class="em">💡</span><span>Daily Note captures standups automatically —
check the sidebar for today's entry.</span></div>
<div class="block-h2">Linked pages</div>
<div class="card-row">
<div class="block-card"><span class="chip-icon">📄</span><div class="card-text"><b>Design Review</b><span>Edited yesterday</span></div></div>
<div class="block-card"><span class="chip-icon">🔗</span><div class="card-text"><b>Marketing Brief</b><span>craft.do/marketing</span></div></div>
</div>
</div>
<div class="fab"></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; background: #b8860b; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; background: #ffffff; color: #313131;
border: 1px solid #b8860b; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.5; background: #fff8e1; color: #8b6914;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,'Helvetica Neue',Roboto,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.ticker{height:28px;background:#1a2a3a;display:flex;align-items:center;gap:26px;padding:0 30px;font-size:11px;font-weight:600;color:#e8d49a;letter-spacing:.3px;}
.ticker span b{color:#2e7d32;margin-left:4px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #d9d9d9;}
.logo{font-size:19px;font-weight:700;letter-spacing:.2px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#444444;}
.cta{background:#b8860b;color:#fff;font-size:12px;font-weight:700;padding:9px 18px;border-radius:2px;letter-spacing:.3px;}
.hero{display:flex;padding:22px 30px 0;gap:20px;}
.spot{flex:1;background:#f4f2ec;border:1px solid #d9d9d9;border-radius:2px;padding:16px;}
.spothead{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#6b6b6b;margin-bottom:10px;}
.spotrow{display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid #e6e4dc;font-size:13px;}
.spotrow:first-of-type{border-top:none;}
.spotrow b{color:#8b6914;}
.trust{flex:1;padding:16px;}
.trusttitle{font-size:19px;font-weight:700;line-height:1.3;margin-bottom:8px;}
.trustsub{font-size:12px;color:#6b6b6b;margin-bottom:14px;}
.badges{display:flex;gap:8px;}
.badge{border:1px solid #d9d9d9;border-radius:2px;padding:6px 10px;font-size:10px;font-weight:700;color:#444;background:#fafaf8;}
.sec{padding:20px 30px 0;}
.sectitle{font-size:14px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#313131;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;border:1px solid #d9d9d9;border-radius:2px;padding:10px;}
.thumb{height:96px;border-radius:2px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;line-height:1.3;}
.pprice{font-size:14px;font-weight:700;color:#8b6914;margin-top:6px;}
</style>
<div class="ticker"><span>AU $2,384.10 <b>▲0.4%</b></span><span>AG $28.92 <b>▲1.1%</b></span><span>PT $968.55 <b>▼0.2%</b></span><span>PD $1,012.30 <b>▲0.8%</b></span></div>
<div class="nav">
<div class="logo">Money Metals Exchange</div>
<div class="navlinks"><span>Gold</span><span>Silver</span><span>Platinum</span><span>IRA</span><span>News</span></div>
<div class="cta">Buy Now</div>
</div>
<div class="hero">
<div class="spot">
<div class="spothead">Live Spot Prices</div>
<div class="spotrow"><span>Gold / oz</span><b>$2,384.10</b></div>
<div class="spotrow"><span>Silver / oz</span><b>$28.92</b></div>
<div class="spotrow"><span>Platinum / oz</span><b>$968.55</b></div>
<div class="spotrow"><span>Palladium / oz</span><b>$1,012.30</b></div>
</div>
<div class="trust">
<div class="trusttitle">1 oz American Eagle Gold Coin</div>
<div class="trustsub">.9999 fine gold · IRA eligible · ships insured</div>
<div class="badges">
<div class="badge">BBB A+</div>
<div class="badge">Secure Checkout</div>
<div class="badge">Price Match</div>
</div>
</div>
</div>
<div class="sec">
<div class="sectitle">Popular Bullion</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c62828,#9a7009)"></div><div class="pname">Silver Eagle Coin</div><div class="pprice">$32.10</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#9a7009,#1a3a5c)"></div><div class="pname">Gold Buffalo Round</div><div class="pprice">$2,401.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a2a3a,#9a9a9a)"></div><div class="pname">10 oz Silver Bar</div><div class="pprice">$298.50</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8b6914,#2e7d32)"></div><div class="pname">Platinum Maple Leaf</div><div class="pprice">$981.20</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9b59e6; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #003388; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #ffffff; color: #003388;
border: 1px solid #003388; border-radius: 0px;
padding: 10px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #0a0a0a;
border: 1px solid #c2c2c2; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9b59e6; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.8px; background: #003388; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Lato','Open Sans',sans-serif; color:#0a0a0a; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d0d0d0;}
.logo{font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.3px;}
.navlinks{display:flex;gap:22px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.2px;}
.hero{height:220px;background:#1e1f26;display:flex;align-items:center;padding:0 40px;}
.hero h1{color:#fff;font-weight:700;font-size:34px;line-height:1.15;max-width:400px;}
.hero span{display:block;background:transparent;color:#fff;border:1px solid #fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:12px 24px;width:fit-content;margin-top:16px;}
.section-heading{font-size:24px;font-weight:700;border-bottom:3px solid #003388;padding:0 32px 8px;margin-top:20px;display:inline-block;margin-left:32px;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:210px;border:1px solid #d0d0d0;padding:16px;}
.thumb{height:110px;background:#f0f0f0;margin-bottom:10px;}
.catbadge{position:relative;top:-8px;background:#003388;color:#fff;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:3px 8px;display:inline-block;margin-bottom:8px;}
.pname{font-size:16px;font-weight:700;}
.pprice{font-size:24px;font-weight:700;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#0a0a0a;color:#949494;display:flex;align-items:center;justify-content:center;gap:26px;font-size:13px;border-top:3px solid #003388;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Pro Ject Audio Systems</div>
<div class="navlinks"><span>Turntables</span><span>Phono Stages</span><span>Cables</span></div>
</div>
<div class="hero"><h1>Forty-three years of platter-spin precision.</h1><span>Find a Dealer</span></div>
<div class="section-heading">Turntables</div>
<div class="grid">
<div class="card"><div class="catbadge">Turntable</div><div class="thumb"></div><div class="pname">Debut Carbon EVO</div><div class="pprice">$599</div></div>
<div class="card"><div class="catbadge">Phono Stage</div><div class="thumb"></div><div class="pname">Phono Box S3</div><div class="pprice">$179</div></div>
<div class="card"><div class="catbadge">Cable</div><div class="thumb"></div><div class="pname">Connect It RCA</div><div class="pprice">$59</div></div>
</div>
<div class="footer"><span>Support</span><span>Find a Dealer</span><span>Handmade in Europe</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #313131; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 4px;
padding: 9px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d0d0d0;}
.logo{font-size:19px;font-weight:700;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;}
.navlinks .active{color:#313131;border-bottom:2px solid #313131;padding-bottom:20px;}
.navlinks .inactive{color:#757575;}
.hero{background:#f5f5f5;padding:22px 32px;display:flex;align-items:center;justify-content:space-between;}
.hero h1{font-size:26px;font-weight:700;margin:0 0 6px;letter-spacing:-0.3px;}
.hero p{font-size:14px;color:#4a4a4a;margin:0;max-width:420px;}
.btn{background:#313131;color:#fff;font-size:14px;font-weight:600;padding:10px 24px;border-radius:4px;}
.grid{display:flex;gap:16px;padding:16px 32px 0;}
.card{flex:1;background:#fff;border:1px solid #d0d0d0;border-radius:8px;padding:14px;position:relative;}
.badge{position:absolute;top:10px;right:10px;background:#313131;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:2px;}
.badge.stock{background:#2e7d32;}
.chip{width:100%;height:78px;border-radius:4px;background:#eee;margin-bottom:10px;}
.pname{font-size:16px;font-weight:600;margin:0 0 4px;}
.pspec{font-size:12px;color:#757575;margin:0 0 8px;}
.pprice{font-size:15px;font-weight:600;}
.spec{padding:18px 32px 0;}
.spec-title{font-size:13px;font-weight:600;text-transform:uppercase;color:#313131;margin-bottom:8px;}
.spec-table{border:1px solid #d0d0d0;border-radius:4px;overflow:hidden;}
.row{display:flex;font-size:13px;border-bottom:1px solid #e0e0e0;}
.row:last-child{border-bottom:none;}
.row div{flex:1;padding:8px 16px;}
.row.head{background:#f5f5f5;font-weight:600;}
.row div:first-child{border-right:1px solid #e0e0e0;color:#4a4a4a;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;background:#f5f5f5;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#4a4a4a;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kingston</div>
<div class="navlinks"><div class="active">SSD</div><div class="inactive">Memory</div><div class="inactive">Flash</div><div class="inactive">Compare</div></div>
</div>
<div class="hero">
<div>
<h1>Storage built for the spec sheet.</h1>
<p>Compare speeds, capacities, and form factors — no splash pages, just the numbers.</p>
</div>
<div class="btn">Find a Retailer</div>
</div>
<div class="grid">
<div class="card"><span class="badge stock">In Stock</span><div class="chip" style="background:#e6e6e6"></div><div class="pname">NV3 NVMe SSD</div><div class="pspec">2TB · PCIe 4.0 · 6,000 MB/s</div><div class="pprice">$129.99</div></div>
<div class="card"><span class="badge">New</span><div class="chip" style="background:#e0e0e0"></div><div class="pname">FURY Beast DDR5</div><div class="pspec">32GB Kit · 6000MT/s</div><div class="pprice">$99.99</div></div>
<div class="card"><div class="chip" style="background:#eaeaea"></div><div class="pname">DataTraveler Max</div><div class="pspec">512GB · USB 3.2 Gen 2</div><div class="pprice">$54.99</div></div>
</div>
<div class="spec">
<div class="spec-title">Compare: NV3 vs KC3000</div>
<div class="spec-table">
<div class="row head"><div>Model</div><div>Sequential Read</div><div>Capacity</div></div>
<div class="row"><div>NV3</div><div>6,000 MB/s</div><div>2TB</div></div>
<div class="row"><div>KC3000</div><div>7,000 MB/s</div><div>2TB</div></div>
</div>
</div>
<div class="footer"><span>Support · Warranty Registration</span><span>Enterprise Solutions</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9e9e9e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #686de0; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #1a1a1a; color: #ffffff;
border: 1px solid #686de0; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1a1a1a; color: #ffffff;
border: 1px solid #404040; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9e9e9e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #686de0; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#000000; font-family:'Inter','Helvetica Neue',Arial,sans-serif; color:#ffffff; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:18px;font-weight:700;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;letter-spacing:0.3px;text-transform:uppercase;}
.navlinks span:first-child{color:#686de0;}
.hero{height:280px;display:flex;align-items:center;padding:0 32px;gap:36px;}
.herotxt{max-width:400px;}
.h1{font-size:34px;font-weight:700;letter-spacing:-0.5px;margin:0 0 12px;line-height:1.15;}
.sub{font-size:15px;color:#e0e0e0;line-height:1.5;margin:0 0 20px;}
.btn{display:inline-block;background:#686de0;color:#fff;font-size:15px;font-weight:600;letter-spacing:0.3px;padding:12px 26px;border-radius:4px;}
.sleeve{width:210px;height:210px;background:linear-gradient(150deg,#1a1a1a,#3a3a3a 45%,#1a1a1a);border:1px solid #2a2a2a;position:relative;}
.sleeve:before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:9999px;background:radial-gradient(circle,#000 0 6px,#686de0 8px,#111 40px,#000 41px);}
.grid{display:flex;gap:16px;padding:20px 32px 0;}
.card{width:210px;background:#1a1a1a;border-radius:8px;padding:12px;}
.thumb{height:130px;background:linear-gradient(150deg,#252525,#3a3a3a);border-radius:6px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#686de0;color:#fff;font-size:10px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:2px;}
.ctitle{font-size:14px;font-weight:500;margin:10px 0 4px;}
.cprice{font-size:14px;color:#fff;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;border-top:1px solid #2a2a2a;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#9e9e9e;font-size:11px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Mobile Fidelity Sound Lab</div>
<div class="navlinks"><span>Vinyl</span><span>Box Sets</span><span>Half-Speed Masters</span><span>Turntables</span></div>
</div>
<div class="hero">
<div class="herotxt">
<div class="h1">Mastered for the obsessive listener.</div>
<p class="sub">Half-speed remastering, one groove at a time. No shortcuts, no compromise.</p>
<div class="btn">Shop Pressings</div>
</div>
<div class="sleeve"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge">Original Master</span></div><div class="ctitle">Midnight Sessions LP</div><div class="cprice">$44.99</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Analog Reels Box Set</div><div class="cprice">$189.00</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Studio One Test Pressing</div><div class="cprice">$59.99</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">UltraDisc SACD</div><div class="cprice">$39.99</div></div>
</div>
<div class="footer"><span>Half-speed mastering since 1977</span><span>© Mobile Fidelity Sound Lab</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #e83630; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #32373c;
border: 1px solid #e83630; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #003050; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Open Sans',Arial,'Helvetica Neue',sans-serif; color:#32373c; }
*{box-sizing:border-box;}
.topstrip{height:24px;background:#111111;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 32px;font-size:11px;color:#808080;}
.nav{height:52px;background:#313131;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:3px solid #e83630;}
.logo{font-size:17px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:18px;font-size:13px;font-weight:600;color:#fff;}
.franchise{background:#003050;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;}
.flabel{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#e83630;margin-bottom:4px;}
.ftitle{font-size:20px;font-weight:600;color:#fff;}
.fright{display:flex;gap:8px;}
.fchip{width:50px;height:64px;border-radius:4px;}
.grid{display:flex;gap:12px;padding:18px 32px 0;}
.card{width:216px;background:#fff;border:1px solid #eeeeee;border-radius:4px;padding:8px;position:relative;}
.thumb{height:110px;background:#eeeeee;border-radius:4px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;}
.thumbshape{width:60px;height:80px;border-radius:4px;}
.badge{position:absolute;top:14px;left:14px;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 6px;color:#fff;letter-spacing:0.3px;}
.b-new{background:#003050;} .b-excl{background:#600040;} .b-sale{background:#e83630;}
.flabelsm{font-size:10px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;color:#e83630;margin-bottom:2px;}
.ptitle{font-size:13px;font-weight:600;color:#111111;}
.pprice{font-size:14px;font-weight:700;color:#e83630;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#313131;border-top:3px solid #e83630;display:flex;align-items:center;justify-content:center;color:#808080;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="topstrip">Account · Order Status · Help</div>
<div class="nav">
<div class="logo">Neca Action F 2</div>
<div class="navlinks"><div>Aliens</div><div>Predator</div><div>TMNT</div><div>Horror</div><div>Sci-Fi</div></div>
</div>
<div class="franchise">
<div><div class="flabel">Featured Franchise</div><div class="ftitle">Aliens: Series 14 Collection</div></div>
<div class="fright"><div class="fchip" style="background:linear-gradient(160deg,#4054b2,#003050)"></div><div class="fchip" style="background:linear-gradient(160deg,#600040,#111111)"></div><div class="fchip" style="background:linear-gradient(160deg,#e83630,#313131)"></div></div>
</div>
<div class="grid">
<div class="card"><span class="badge b-new">New</span><div class="thumb"><div class="thumbshape" style="background:linear-gradient(160deg,#4054b2,#111111)"></div></div><div class="flabelsm">Aliens</div><div class="ptitle">Warrior Alien — Battle Damaged</div><div class="pprice">$34.99</div></div>
<div class="card"><span class="badge b-excl">Exclusive</span><div class="thumb"><div class="thumbshape" style="background:linear-gradient(160deg,#600040,#111111)"></div></div><div class="flabelsm">Predator</div><div class="ptitle">Ultimate Dutch Schaefer</div><div class="pprice">$44.99</div></div>
<div class="card"><div class="thumb"><div class="thumbshape" style="background:linear-gradient(160deg,#003050,#313131)"></div></div><div class="flabelsm">TMNT</div><div class="ptitle">Ultimate Leonardo</div><div class="pprice">$29.99</div></div>
<div class="card"><span class="badge b-sale">Sale</span><div class="thumb"><div class="thumbshape" style="background:linear-gradient(160deg,#e83630,#313131)"></div></div><div class="flabelsm">Horror</div><div class="ptitle">Universal Monsters Wolf Man</div><div class="pprice">$39.99</div></div>
</div>
<div class="footer">© Licensed Collectibles — Trademarks Property of Their Respective Owners</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0050ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0050ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87abfa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1482ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0050ff; color: #ffffff;
border: 1px solid #1482ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0050ff; color: #f5f5f5;
border: 1px solid #276afd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87abfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0358ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#ffffff; color:#1b1e21; box-sizing:border-box; font-family: Pretendard, "Noto Sans KR", Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.nav{ height:60px; padding:0 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #eef1f5; }
.brandmark{ display:flex; align-items:center; gap:8px; font-family:Poppins,sans-serif; font-weight:700; font-size:19px; color:#0050ff; letter-spacing:-0.2px; }
.brandmark .paw{ width:9px;height:9px;border-radius:50%;background:#ff9300; }
.navlinks{ display:flex; gap:24px; font-family:Poppins,sans-serif; font-size:13px; font-weight:700; color:#1b1e21; }
.navlinks .on{ color:#1482ff; }
.navcart{ width:36px;height:36px;border-radius:999px;background:#f4f7fa;display:flex;align-items:center;justify-content:center;font-size:11px;color:#42494f;font-weight:700; }
.searchrow{ display:flex; gap:12px; padding:20px 32px 0; }
.searchbox{ flex:1; height:50px; background:#f4f7fa; border-radius:10px; display:flex; align-items:center; padding:0 20px; font-size:16px; color:#a7aeb5; }
.btn-primary{ height:48px; padding:0 26px; background:#0050ff; color:#fff; border-radius:28px; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; white-space:nowrap; }
.chiprow{ display:flex; gap:8px; padding:14px 32px 0; }
.chip{ height:32px; padding:0 16px; border-radius:999px; border:1px solid #c2c8cf; display:flex; align-items:center; font-size:12px; color:#42494f; }
.chip.on{ background:#0050ff; border-color:#0050ff; color:#fff; font-weight:700; }
.promo{ margin:18px 32px 0; background:#edf4ff; border-radius:10px; padding:14px 22px; display:flex; align-items:center; justify-content:space-between; font-size:13px; color:#42494f; }
.promo b{ color:#0035a8; }
.promo .arrow{ color:#0050ff; font-weight:700; font-size:15px; }
.sectiontitle{ margin:24px 32px 14px; font-size:24px; font-weight:700; color:#1b1e21; display:flex; align-items:center; gap:10px; }
.sectiontitle .tag{ font-size:11px; background:#ff5967; color:#fff; padding:3px 9px; border-radius:5px; font-weight:700; }
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:0 32px; }
.card{ background:#fff; border:1px solid #eef1f5; border-radius:10px; overflow:hidden; }
.thumb{ height:122px; position:relative; }
.thumb.a{ background:linear-gradient(135deg,#dce8ff,#a9c4ff); }
.thumb.b{ background:linear-gradient(135deg,#ffe3c2,#ffc98a); }
.thumb.c{ background:linear-gradient(135deg,#fff0c2,#ffe083); }
.thumb.d{ background:linear-gradient(135deg,#d8f3ea,#a6e6cf); }
.badge{ position:absolute; top:8px; left:8px; background:#ff5967; color:#fff; font-size:11px; font-weight:700; padding:3px 7px; border-radius:5px; }
.cbody{ padding:12px 14px 14px; }
.ctitle{ font-size:14px; color:#42494f; line-height:1.35; height:38px; overflow:hidden; }
.cmeta{ display:flex; align-items:center; gap:4px; font-size:11px; color:#8c949c; margin-top:8px; }
.cmeta .star{ color:#ffd633; letter-spacing:-1px; }
.crow{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.cprice{ font-size:15px; font-weight:700; color:#1b1e21; }
.cbtn{ font-size:11px; font-weight:700; color:#0050ff; background:#edf4ff; padding:6px 11px; border-radius:999px; }
.foot{ margin:22px 32px 0; text-align:center; font-size:11px; color:#a7aeb5; }
</style></head>
<body>
<div class="nav">
<div class="brandmark"><span class="paw"></span>Fitpet</div>
<div class="navlinks"><span>About Us</span><span>Team Culture</span><span class="on">Careers</span><span>Support</span></div>
<div class="navcart">Cart</div>
</div>
<div class="searchrow">
<div class="searchbox">Search for food, treats, supplies…</div>
<div class="btn-primary">Recommended</div>
</div>
<div class="chiprow">
<div class="chip on">All</div>
<div class="chip">Food</div>
<div class="chip">Treats</div>
<div class="chip">Health Kit</div>
<div class="chip">Rookie Picks</div>
</div>
<div class="promo">
<div><b>First purchase deal</b> — up to 55% off hand-picked best sellers</div>
<div class="arrow">→</div>
</div>
<div class="sectiontitle">Today's Hot Deals <span class="tag">-55%</span></div>
<div class="grid">
<div class="card">
<div class="thumb a"><span class="badge">-55%</span></div>
<div class="cbody">
<div class="ctitle">Grain-Free Weekly Kibble Box 2kg</div>
<div class="cmeta"><span class="star">★★★★★</span><span>4.9 (2,310)</span></div>
<div class="crow"><span class="cprice">₩24,900</span><span class="cbtn">Recommend</span></div>
</div>
</div>
<div class="card">
<div class="thumb b"><span class="badge">-32%</span></div>
<div class="cbody">
<div class="ctitle">At-Home Health Check Kit, 1-Minute</div>
<div class="cmeta"><span class="star">★★★★★</span><span>4.8 (1,882)</span></div>
<div class="crow"><span class="cprice">₩19,800</span><span class="cbtn">Recommend</span></div>
</div>
</div>
<div class="card">
<div class="thumb c"><span class="badge">-20%</span></div>
<div class="cbody">
<div class="ctitle">Freeze-Dried Salmon Treats, 120g</div>
<div class="cmeta"><span class="star">★★★★★</span><span>4.9 (960)</span></div>
<div class="crow"><span class="cprice">₩12,400</span><span class="cbtn">Recommend</span></div>
</div>
</div>
<div class="card">
<div class="thumb d"><span class="badge">-45%</span></div>
<div class="cbody">
<div class="ctitle">Orthopedic Bed, Small Breed</div>
<div class="cmeta"><span class="star">★★★★★</span><span>4.7 (703)</span></div>
<div class="crow"><span class="cprice">₩38,000</span><span class="cbtn">Recommend</span></div>
</div>
</div>
</div>
<div class="foot">Fitpet — a healthy companion life starts here</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #101010;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #101010;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #101010; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #606f7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffc617; color: #101010;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #101010;
border: 1px solid #ffc617; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #101010;
border: 1px solid #c3c3c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #606f7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #ffc617; color: #101010;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#101010; box-sizing:border-box;
font-family:'Jost', 'Segoe UI', system-ui, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:20px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:#606f7b; }
.navlinks span:first-child { color:#101010; }
.navicons { display:flex; gap:14px; align-items:center; }
.search { width:150px; height:34px; background:#f8f9fa; border-radius:8px; font-size:12px; color:#a7a7a7; display:flex; align-items:center; padding-left:14px; }
.hero { background:#f8f9fa; padding:30px 40px; display:flex; align-items:center; gap:34px; }
.hero-copy { flex:1.2; }
.hero h1 { font-size:34px; font-weight:600; line-height:1.15; letter-spacing:-0.4px; margin:0 0 10px; max-width:420px; }
.hero p { font-size:14px; color:#3d4852; margin:0 0 18px; max-width:380px; line-height:1.5; }
.btn-primary { background:#ffc617; color:#101010; border:none; border-radius:8px; padding:14px 32px;
font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; height:48px; }
.hero-visual { flex:1; height:160px; border-radius:8px; background:#fff; position:relative; overflow:hidden; border:1px solid #dae1e7; }
.hero-visual::before { content:''; position:absolute; width:100px; height:120px; border-radius:8px; background:linear-gradient(160deg,#ffe899,#ffc617); left:40px; top:14px; }
.hero-visual::after { content:''; position:absolute; width:70px; height:90px; border-radius:8px; background:linear-gradient(160deg,#252627,#101010); right:60px; bottom:14px; }
.section { padding:20px 40px 0; }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-head h2 { font-size:22px; font-weight:600; margin:0; }
.sec-head span { font-size:12px; font-weight:600; text-transform:uppercase; color:#101010; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#fff; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,0.08); padding:14px; }
.thumb { aspect-ratio:1/1; border-radius:8px; position:relative; margin-bottom:10px; }
.t1 { background:linear-gradient(150deg,#ffe899,#ffc617); }
.t2 { background:linear-gradient(150deg,#e9f9ee,#38c172); }
.t3 { background:linear-gradient(150deg,#f9e4ef,#ef228b); }
.badge { position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase;
padding:2px 8px; border-radius:2px; }
.badge.new { background:#ffc617; color:#101010; }
.badge.sale { background:#ef228b; color:#fff; }
.card h3 { font-size:16px; font-weight:500; margin:0 0 4px; }
.card .price { font-size:16px; color:#3d4852; margin:0; }
footer { background:#101010; color:#a7a7a7; font-size:12px; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; margin-top:16px; }
footer a { color:#a7a7a7; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">Better Life</p>
<div class="navlinks"><span>Shop All</span><span>Dish</span><span>Laundry</span><span>Home</span></div>
<div class="navicons"><div class="search">Search…</div></div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>The Better Ingredient</h1>
<p>Plant-powered cleaning that skips the harsh chemicals and never skips the clean.</p>
<button class="btn-primary">Shop Now</button>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2>Best Sellers</h2><span>Shop All</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge new">New</span></div>
<h3>Foaming Hand Soap, Citrus</h3>
<p class="price">$5.99</p>
</div>
<div class="card">
<div class="thumb t2"></div>
<h3>Laundry Detergent, Free & Clear</h3>
<p class="price">$14.99</p>
</div>
<div class="card">
<div class="thumb t3"><span class="badge sale">Sale</span></div>
<h3>All-Purpose Cleaner Bundle</h3>
<p class="price">$18.99</p>
</div>
</div>
</section>
<footer>
<span>© Better Life</span>
<div><a href="#">Shop</a><a href="#">Learn</a><a href="#">About</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #25f4ee; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #25f4ee; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #1a7774; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fe2c55; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #25f4ee; color: #fe2c55;
border: 1px solid #fe2c55; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #25f4ee; color: #111111;
border: 1px solid #22d0cb; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #1a7774; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #48d4d6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#010101; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { display:flex; width:960px; height:640px; align-items:center; }
.hero { width:420px; padding:0 56px; display:flex; flex-direction:column; gap:14px; }
.chroma { position:relative; font-size:46px; font-weight:900; width:fit-content; }
.chroma span { position:absolute; top:0; left:0; }
.chroma .c1 { color:#25F4EE; transform:translate(-3px,0); }
.chroma .c2 { color:#FE2C55; transform:translate(3px,0); }
.chroma .base { color:#fff; position:relative; }
.tag { color:#9c9caa; font-size:15px; line-height:1.5; max-width:320px; }
.createbtn { width:70px; height:44px; border-radius:8px; position:relative; background:#fff; margin-top:8px; overflow:hidden; }
.createbtn i { position:absolute; top:0; bottom:0; width:24px; }
.createbtn .cy { left:-6px; background:#25F4EE; }
.createbtn .rs { right:-6px; background:#FE2C55; }
.createbtn b { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:20px; color:#010101; font-weight:700; z-index:2; }
.phonewrap { flex:1; display:flex; align-items:center; justify-content:center; }
.phone { position:relative; width:290px; height:600px; background:linear-gradient(200deg,#3a1a2a,#101018 60%,#010101); border-radius:38px; border:1px solid #222; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,0.7); }
.toptabs { position:absolute; top:22px; left:0; right:0; display:flex; justify-content:center; gap:18px; font-size:15px; font-weight:700; }
.toptabs .off { color:rgba(255,255,255,0.6); font-weight:400; }
.rail { position:absolute; right:12px; bottom:120px; display:flex; flex-direction:column; align-items:center; gap:20px; }
.rav { width:42px; height:42px; border-radius:50%; background:#FE2C55; border:2px solid #fff; }
.ric { text-align:center; font-size:24px; }
.ric .cnt { font-size:11px; font-weight:700; display:block; margin-top:2px; }
.disc { width:36px; height:36px; border-radius:50%; background:radial-gradient(circle,#333,#111); border:2px solid #444; }
.caption { position:absolute; left:14px; bottom:26px; width:190px; }
.caption .u { font-weight:700; font-size:14px; }
.caption .c { font-size:13px; margin-top:4px; line-height:1.3; }
.caption .c b { color:#fff; }
.music { display:flex; align-items:center; gap:6px; font-size:12px; margin-top:6px; }
</style></head>
<body>
<div class="stage">
<div class="hero">
<div class="chroma"><span class="c1">TikTok (iOS)</span><span class="c2">TikTok (iOS)</span><span class="base">TikTok (iOS)</span></div>
<p class="tag">A full-bleed vertical video with nothing over it but a shadowed caption and a right-side rail. Chromatic aberration only lives in the logo.</p>
<div class="createbtn"><i class="cy"></i><i class="rs"></i><b>+</b></div>
</div>
<div class="phonewrap">
<div class="phone">
<div class="toptabs"><span class="off">Following</span><span>For You</span></div>
<div class="rail">
<div class="rav"></div>
<div class="ric">♥<span class="cnt">248K</span></div>
<div class="ric">💬<span class="cnt">3,201</span></div>
<div class="ric">🔖<span class="cnt">982</span></div>
<div class="ric">↗<span class="cnt">Share</span></div>
<div class="disc"></div>
</div>
<div class="caption">
<div class="u">@studio.motion</div>
<div class="c">packing our whole <b>#studio</b> into one van 📦</div>
<div class="music">♪ original sound - studio.motion</div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #a3a3a3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #007934; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #ffffff; color: #007934;
border: 1px solid #007934; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a3a3a3; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #ee9441; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:Metropolis,-apple-system,Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e9eaeb;}
.logo{font-size:19px;font-weight:700;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;}
.navlinks span:first-child{border-bottom:2px solid #007934;padding-bottom:19px;}
.hero{height:200px;background:linear-gradient(90deg,rgba(18,18,18,.9),rgba(18,18,18,.3)),linear-gradient(135deg,#007934,#121212);display:flex;align-items:center;padding:0 32px;}
.heroText{width:56%;}
.heroText h1{color:#fff;font-size:36px;font-weight:700;letter-spacing:-.4px;margin:0 0 10px;}
.heroText p{color:#e9eaeb;font-size:14px;max-width:340px;margin:0 0 14px;}
.btn{display:inline-block;background:#007934;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;border-radius:8px;}
.badges{display:flex;gap:8px;padding:14px 32px;}
.tag{background:#eef8f2;border:1px solid #007934;color:#006400;border-radius:9999px;font-size:12px;font-weight:600;padding:4px 12px;}
.grid{display:flex;gap:14px;padding:0 32px;}
.card{width:206px;background:#fff;border:1px solid #e9eaeb;border-radius:12px;padding:14px;}
.thumb{height:88px;border-radius:4px;background:#f0f1f2;margin-bottom:8px;}
.pname{font-size:16px;font-weight:600;margin:0 0 6px;}
.specrow{display:flex;gap:4px;margin-bottom:6px;}
.spec{background:#f0f1f2;color:#404040;font-size:10px;border-radius:4px;padding:2px 6px;}
.pprice{font-size:24px;font-weight:700;margin:0;}
.trust{display:flex;gap:14px;padding:14px 32px 0;}
.trustcard{flex:1;background:#f8f8f8;border-radius:8px;padding:10px;text-align:center;font-size:11px;font-weight:600;color:#404040;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Ugreen Cables A 2</div>
<div class="navlinks"><span>Cables</span><span>Adapters</span><span>Docking</span><span>Storage</span></div>
</div>
<div class="hero">
<div class="heroText">
<h1>Green means it's ready to charge.</h1>
<p>Compatibility-checked cables and hubs — engineered so the right one is always the obvious one.</p>
<div class="btn">Shop Compatible Gear</div>
</div>
</div>
<div class="badges">
<div class="tag">USB Power Delivery 100W</div><div class="tag">MagSafe Certified</div><div class="tag">Thunderbolt 4</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#007934,#121212)"></div><div class="pname">Revodok Pro 10-in-1 Hub</div><div class="specrow"><span class="spec">10 Ports</span><span class="spec">100W PD</span></div><div class="pprice">$89.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#121212,#007934)"></div><div class="pname">140W USB-C Cable</div><div class="specrow"><span class="spec">2m</span><span class="spec">E-Marker</span></div><div class="pprice">$19.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3ed660,#121212)"></div><div class="pname">Nexode Pro 65W GaN</div><div class="specrow"><span class="spec">3-Port</span><span class="spec">GaN III</span></div><div class="pprice">$54.99</div></div>
</div>
<div class="trust">
<div class="trustcard">18-Month Warranty</div>
<div class="trustcard">Certified Safe</div>
<div class="trustcard">30-Day Returns</div>
<div class="trustcard">24/7 Support</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #161015;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #161015;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.2; margin: 0; color: #161015; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 1px; background: #ffff00; color: #161015;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 1px; background: #ffffff; color: #161015;
border: 1px solid #ffff00; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c5c3c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 1px; background: #ffff00; color: #161015;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Elusive Disc</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#161015; color:#ffffff; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#fff; color:#161015; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #b2b7bb; }
.logo { font-family:Oswald,'Impact',sans-serif; font-weight:600; font-size:20px; text-transform:uppercase; letter-spacing:1px; }
.navlinks { display:flex; gap:20px; font-family:Oswald,sans-serif; font-size:14px; text-transform:uppercase; letter-spacing:1px; }
.navlinks span.on { color:#a92504; }
.search-wrap { display:flex; }
.search { border:1px solid #b2b7bb; padding:8px 12px; font-size:13px; width:220px; }
.orb { background:#ffff00; color:#161015; padding:8px 20px; font-family:Oswald,sans-serif; font-size:12px; text-transform:uppercase;
letter-spacing:1px; border-radius:9999px; margin-left:-1px; }
.hero { padding:30px 32px; text-align:left; }
.hero h1 { font-family:Oswald,sans-serif; font-size:32px; font-weight:500; text-transform:uppercase; margin:0 0 10px; letter-spacing:.5px; }
.hero p { font-size:14px; color:#b2b7bb; max-width:400px; margin:0 0 16px; }
.hero-cta { display:inline-block; background:#ffff00; color:#161015; font-family:Oswald,sans-serif; text-transform:uppercase;
letter-spacing:1px; padding:14px 32px; font-size:14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:8px 32px; }
.card { background:#fff; color:#161015; }
.thumb { height:100px; }
.t1 { background:linear-gradient(160deg,#42ceed,#161015); }
.t2 { background:linear-gradient(160deg,#6e9aa7,#161015); }
.t3 { background:linear-gradient(160deg,#a92504,#330033); }
.t4 { background:linear-gradient(160deg,#edc114,#161015); }
.cbody { padding:10px 12px; }
.badge { display:inline-block; font-family:Oswald,sans-serif; font-size:10px; text-transform:uppercase; letter-spacing:.5px;
padding:2px 8px; margin-bottom:6px; color:#fff; }
.bfmt { background:#6e9aa7; } .bnew { background:#ffff00; color:#161015; }
.name { font-family:Oswald,sans-serif; font-size:14px; text-transform:uppercase; margin:0 0 4px; letter-spacing:.3px; }
.price { font-size:14px; color:#a92504; font-weight:700; }
</style></head>
<body>
<nav>
<div class="logo">Elusive Disc</div>
<div class="navlinks"><span class="on">Vinyl</span><span>SACD</span><span>Turntables</span><span>Cables</span></div>
<div class="search-wrap"><span class="search">Search the catalog...</span><span class="orb">Go</span></div>
</nav>
<div class="hero">
<h1>Signal over noise.</h1>
<p>Audiophile vinyl, SACDs, and reference equipment for listeners who hear the difference.</p>
<div class="hero-cta">Shop New Pressings</div>
</div>
<div class="grid">
<div class="card"><div class="thumb t1"></div><div class="cbody"><span class="badge bfmt">SACD</span><p class="name">Blue Note Session</p><p class="price">$34.99</p></div></div>
<div class="card"><div class="thumb t2"></div><div class="cbody"><span class="badge bfmt">Vinyl</span><p class="name">Analog Heritage LP</p><p class="price">$42.99</p></div></div>
<div class="card"><div class="thumb t3"></div><div class="cbody"><span class="badge bnew">New</span><p class="name">Reference Cartridge</p><p class="price">$499.00</p></div></div>
<div class="card"><div class="thumb t4"></div><div class="cbody"><span class="badge bfmt">DVD-A</span><p class="name">Studio Master Series</p><p class="price">$29.99</p></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; background: #0057B8; color: #FFFFFF;
border: none; border-radius: 2px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; background: #FFFFFF; color: #0057B8;
border: 1px solid #0057B8; border-radius: 2px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #FFFFFF; color: #313131;
border: 1px solid #cccccc; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.3px; background: #E8600D; color: #FFFFFF;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; background:#ffffff; color:#444444; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.util{height:32px;background:#313131;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#fff;}
.logobar{height:64px;display:flex;align-items:center;gap:20px;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#313131;}
.searchbar{flex:1;height:40px;border:2px solid #0057B8;border-radius:2px;display:flex;align-items:center;padding:0 14px;font-size:13px;color:#666666;}
.searchbtn{width:44px;height:40px;background:#0057B8;margin-left:-44px;border-radius:0 2px 2px 0;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;}
.catrail{height:44px;background:#003E80;display:flex;align-items:center;gap:26px;padding:0 32px;font-size:13px;font-weight:700;color:#fff;}
.sec{padding:20px 32px 0;}
.secTitle{font-size:16px;font-weight:700;color:#313131;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;border:1px solid #DDDDDD;border-radius:2px;padding:14px;}
.thumb{height:80px;background:#F5F7FA;border-radius:2px;margin-bottom:10px;position:relative;overflow:hidden;}
.beaker{position:absolute;left:76px;top:14px;width:40px;height:52px;border-radius:0 0 12px 12px;border:3px solid #0057B8;border-top:none;}
.cat{font-family:'Courier New',monospace;font-size:11px;color:#666666;margin-bottom:4px;}
.ctitle{font-size:13px;font-weight:700;color:#313131;line-height:1.35;height:36px;overflow:hidden;margin-bottom:6px;}
.stock{display:inline-block;background:#2E7D32;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;padding:2px 6px;margin-bottom:8px;}
.priceRow{display:flex;justify-content:space-between;align-items:center;}
.cprice{font-size:18px;font-weight:700;color:#313131;}
.addbtn{background:#E8600D;color:#fff;font-size:12px;font-weight:700;padding:8px 14px;border-radius:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#003E80;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;color:#dedede;}
</style>
<div class="wrap">
<div class="util"><span>My Account · Order History</span><span>Ship To: United States</span></div>
<div class="logobar">
<div class="logo">Vwr Avantor</div>
<div class="searchbar">Search by catalog number, CAS number, or keyword...</div><div class="searchbtn">→</div>
</div>
<div class="catrail"><span>Chemicals</span><span>Lab Equipment</span><span>Cell Biology</span><span>Filtration</span><span>PPE & Safety</span></div>
<div class="sec">
<div class="secTitle">Filtration & Separation</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="beaker"></div></div><div class="cat">CAT #89026-000</div><div class="ctitle">Nylon Membrane Filter, 0.45 µm</div><div class="stock">In Stock</div><div class="priceRow"><div class="cprice">$84.12</div><div class="addbtn">Add to Quote</div></div></div>
<div class="card"><div class="thumb"><div class="beaker" style="border-color:#2f7bbf"></div></div><div class="cat">CAT #28298-020</div><div class="ctitle">Syringe Filter, PTFE, Sterile</div><div class="stock">In Stock</div><div class="priceRow"><div class="cprice">$142.50</div><div class="addbtn">Add to Quote</div></div></div>
<div class="card"><div class="thumb"><div class="beaker" style="border-color:#003E80"></div></div><div class="cat">CAT #10035-976</div><div class="ctitle">Vacuum Filtration Flask, 1000mL</div><div class="stock">In Stock</div><div class="priceRow"><div class="cprice">$63.90</div><div class="addbtn">Add to Quote</div></div></div>
</div>
</div>
<div class="footer"><span>© Lab Supply Procurement Platform</span><span>Request a Quote · Punchout Integration</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #4f4f4f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #4f4f4f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #4f4f4f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #1743b8; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f8f8f8; color: #1743b8;
border: 1px solid #1743b8; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f8f8f8; color: #4f4f4f;
border: 1px solid #cecece; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f47721; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f8f8; font-family:'Open Sans',Arial,sans-serif; color:#4f4f4f; }
*{box-sizing:border-box;}
.nav{height:64px;border-bottom:1px solid #dfdfdf;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:Georgia,serif;font-size:20px;font-weight:400;color:#1743b8;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;color:#4f4f4f;}
.navlinks div:first-child{color:#1743b8;}
.hero{height:220px;background:#1743b8;display:flex;align-items:center;padding:0 32px;position:relative;overflow:hidden;}
.herotext h1{font-family:Georgia,serif;font-size:34px;font-weight:400;color:#fff;margin:0 0 10px;line-height:1.15;max-width:400px;}
.herotext p{font-size:14px;color:#cfd7e3;margin:0 0 18px;max-width:360px;}
.cta{display:inline-block;background:#fff;color:#1743b8;font-size:15px;font-weight:600;padding:13px 27px;border-radius:8px;}
.kayak{position:absolute;right:60px;top:110px;width:260px;height:36px;background:linear-gradient(90deg,#f47721,#ea1332);border-radius:18px;transform:rotate(-4deg);}
.grid{display:flex;gap:16px;padding:20px 32px 0;}
.card{width:150px;background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.08);overflow:hidden;position:relative;}
.thumb{height:100px;}
.badge{position:absolute;top:8px;left:8px;background:#f47721;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.badgeg{background:#1cc286;}
.pname{font-size:13px;font-weight:600;color:#4f4f4f;padding:8px 10px 0;}
.pprice{font-size:13px;color:#6a6c77;padding:2px 10px 10px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:50px;background:#ededed;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:11px;color:#737373;}
.footer span{margin-left:16px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Oru Kayak</div>
<div class="navlinks"><div>Kayaks</div><div>Accessories</div><div>How It Folds</div><div>Compare</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Folds to a Duffel. Paddles Like a Kayak.</h1>
<p>Origami-engineered hulls that go from car trunk to open water.</p>
<div class="cta">Shop Kayaks</div>
</div>
<div class="kayak"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1743b8,#7f89b4)"></div><div class="badge">Sale</div><div class="pname">Oru Beach LT</div><div class="pprice">$1,299</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f47721,#1743b8)"></div><div class="pname">Oru Inlet</div><div class="pprice">$899</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f04860,#7f89b4)"></div><div class="badgeg badge">New</div><div class="pname">Oru Coast+ XT</div><div class="pprice">$1,599</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7f89b4,#1743b8)"></div><div class="pname">Carbon Paddle</div><div class="pprice">$219</div></div>
</div>
<div class="footer"><span>© Fold. Paddle. Repeat.</span><span>Warranty<span> How It Works<span> Support</span></span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0c64e6; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0c64e6; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8cb4ee; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fbbd41; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0c64e6; color: #fbbd41;
border: 1px solid #fbbd41; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0c64e6; color: #f5f5f5;
border: 1px solid #317be8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8cb4ee; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3272cc; color: #fbbd41;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#141618; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.band { padding:26px 40px; }
.band.dark { background:#283240; color:#ffffff; }
.band.tint { background:#f3f6ff; }
.band.soft { background:#fafbfc; }
.brand { font-size:20px; font-weight:700; color:#0c64e6; }
.headline { font-size:28px; font-weight:700; margin:10px 0 6px; line-height:1.3; max-width:640px; }
.sub { font-size:15px; color:#606a76; margin:0 0 16px; max-width:560px; }
.band.dark .sub { color:rgba(255,255,255,0.75); }
.cta-row { display:flex; gap:10px; }
.cta { border:none; border-radius:7px; height:52px; font-size:15px; font-weight:500; padding:0 20px; }
.cta-yellow { background:#fbbd41; color:#000000; }
.cta-blue { background:#3e79ff; color:#ffffff; }
.cta-dark { background:#2f3943; color:#ffffff; }
.refund-card { margin-top:-18px; margin-left:40px; margin-right:40px; background:#ffffff; border-radius:16px;
padding:22px 24px; box-shadow:none; border:1px solid #f0f1f2; display:flex; justify-content:space-between; align-items:center; }
.refund-card .lbl { font-size:13px; color:#788391; font-weight:500; }
.refund-card .amt { font-size:36px; font-weight:700; color:#0c64e6; margin-top:4px; }
.refund-card .chip { background:#f0f1f2; color:#788391; border-radius:10px; height:33px; padding:0 12px;
font-size:12px; font-weight:700; display:flex; align-items:center; }
.grid3 { display:flex; gap:16px; padding:18px 40px 0; }
.mini { flex:1; background:#ffffff; border:1px solid #f0f1f2; border-radius:16px; padding:16px; }
.mini .k { font-size:12px; color:#788391; font-weight:700; }
.mini .v { font-size:20px; font-weight:700; margin-top:6px; color:#141618; }
.kakao-row { display:flex; align-items:center; gap:14px; padding:18px 40px 0; }
.kakao-btn { background:#fae100; color:#141618; border-radius:18px; height:56px; padding:0 20px;
font-size:16px; font-weight:700; border:none; }
footer { position:absolute; bottom:0; left:0; right:0; padding:12px 40px; border-top:1px solid #f0f1f2;
font-size:11px; color:#a4acb4; background:#ffffff; }
</style></head>
<body>
<div class="band">
<span class="brand">3o3</span>
<div class="headline">Find your hidden refund money</div>
<p class="sub">Everyday hidden money, found simply — tax refunds and more, in one place.</p>
<div class="cta-row">
<button class="cta cta-yellow">Check My Refund</button>
<button class="cta cta-blue">File Safely Now</button>
<button class="cta cta-dark">Am I Eligible?</button>
</div>
</div>
<div class="refund-card">
<div><div class="lbl">Your estimated refund</div><div class="amt">₩487,200</div></div>
<span class="chip">How this is calculated</span>
</div>
<div class="grid3">
<div class="mini"><div class="k">Cumulative filers</div><div class="v">7,208,747</div></div>
<div class="mini"><div class="k">Total refunds processed</div><div class="v">₩2 trillion+</div></div>
<div class="mini"><div class="k">Average processing time</div><div class="v">3–5 days</div></div>
</div>
<div class="band dark" style="margin-top:18px;">
<div class="headline" style="font-size:20px;">Find hidden money you didn't know you had</div>
<p class="sub">A simple, honest platform — every claim comes with its basis.</p>
</div>
<div class="kakao-row">
<button class="kakao-btn">Continue with Kakao</button>
<span style="font-size:12px; color:#788391;">The app's single, simple sign-in</span>
</div>
<footer>
(Corp.) Jobis & Villains · CEO on file · Business registration on file · This is not tax consultation
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: #ff0000; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; background: #ffffff; color: #222222;
border: 1px solid #ff0000; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ff0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:'Open Sans',Helvetica,-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#222222; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.brand { font-family:'Abril Fatface',Georgia,serif; font-size:20px; color:#ffffff; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:600; text-transform:uppercase;
letter-spacing:0.5px; color:#ffffff; }
.navlinks span:nth-child(2) { color:#ff0000; }
.searchpill { background:#ffffff; border-radius:9999px; padding:8px 16px; font-size:12px; color:#777777; width:150px; }
.navicons { display:flex; gap:14px; align-items:center; }
.cartdot { background:#ff0000; color:#fff; border-radius:9999px; width:18px; height:18px;
display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; }
.tagstrip { height:38px; background:#f5f5f5; display:flex; align-items:center; gap:10px; padding:0 32px; }
.tag { border-radius:9999px; font-size:11px; font-weight:700; padding:5px 14px; background:#ffffff; color:#777777; }
.tag.active { background:#ff0000; color:#ffffff; }
.wrap { display:flex; height:calc(640px - 60px - 38px - 50px); }
.gallery { width:340px; background:#1e1e1e; display:flex; align-items:center; justify-content:center;
position:relative; }
.poster { width:180px; height:250px; background:linear-gradient(160deg,#ff0000 0%,#222222 70%);
border-radius:6px; position:relative; box-shadow:0 20px 44px rgba(0,0,0,0.5); }
.poster::before { content:''; position:absolute; top:20px; left:20px; right:20px; bottom:60px;
border:2px solid rgba(255,255,255,0.15); }
.badge-gold { position:absolute; top:18px; left:18px; background:#ffd658; color:#222222; font-size:11px;
font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.badge-red { position:absolute; top:18px; right:18px; background:#ff0000; color:#fff; font-size:11px;
font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.info { flex:1; padding:24px 32px; display:flex; flex-direction:column; gap:9px; }
.kicker { font-size:12px; color:#777777; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
h1 { font-family:'Abril Fatface',Georgia,serif; font-size:26px; font-weight:400; margin:0; line-height:1.25; }
.sub { font-size:13px; color:#292e31; margin:0; line-height:1.5; }
.stars { font-size:12px; color:#222222; }
.stars span { color:#777777; margin-left:6px; }
.price { font-size:22px; font-weight:700; margin-top:2px; }
.buyrow { display:flex; gap:10px; margin-top:2px; }
.btn-primary { background:#ff0000; color:#fff; border:none; border-radius:9999px; padding:12px 26px;
font-weight:700; font-size:14px; }
.btn-secondary { background:#fff; color:#222222; border:2px solid #222222; border-radius:9999px;
padding:10px 24px; font-weight:700; font-size:14px; }
.badgerow { display:flex; gap:8px; margin-top:2px; }
.bpill { border-radius:9999px; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:0.3px; padding:4px 12px; color:#fff; }
.bpill.green { background:#8bc027; }
.relgrid { margin-top:auto; display:flex; gap:10px; }
.relcard { flex:1; background:#f5f5f5; border-radius:8px; padding:8px; text-align:center; }
.relthumb { height:44px; border-radius:4px; margin-bottom:6px; background:linear-gradient(160deg,#ff0000,#222222); }
.relcard span { font-size:10px; color:#222222; font-weight:600; }
footer { height:50px; background:#1e1e1e; color:#aaaaaa; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; font-size:12px; }
</style></head>
<body>
<nav>
<div class="brand">Cult Epics</div>
<div class="navlinks"><span>Horror</span><span>Cult</span><span>Exploitation</span><span>4K UHD</span></div>
<div class="navicons"><span class="searchpill">Search titles</span><span class="cartdot">1</span></div>
</nav>
<div class="tagstrip">
<span class="tag active">Cult</span><span class="tag">Horror</span><span class="tag">Exploitation</span><span class="tag">Limited Edition</span>
</div>
<div class="wrap">
<div class="gallery">
<span class="badge-gold">Limited</span>
<span class="badge-red">Exclusive</span>
<div class="poster"></div>
</div>
<div class="info">
<div class="kicker">Special Edition · Blu-ray + Slipcover</div>
<h1>Midnight Vault: The Crimson Reel</h1>
<p class="sub">Restored 4K transfer with commentary, deleted scenes, and a reversible poster insert.</p>
<div class="stars">★★★★★ <span>4.6 · 214 reviews</span></div>
<div class="price">$29.99</div>
<div class="buyrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="badgerow"><span class="bpill green">In Stock</span></div>
<div class="relgrid">
<div class="relcard"><div class="relthumb"></div><span>Vol. II</span></div>
<div class="relcard"><div class="relthumb"></div><span>Soundtrack</span></div>
<div class="relcard"><div class="relthumb"></div><span>Poster Set</span></div>
</div>
</div>
</div>
<footer>
<span>© Cult Epics</span>
<span>About · Customer Service · Newsletter</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8a8a8a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #1199ff; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; background: #f6f6f6; color: #141414;
border: 1px solid #1199ff; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #141414;
border: 1px solid #bebebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #1199ff; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif; background:#f6f6f6; color:#141414; }
*{box-sizing:border-box;}
.nav{height:72px;background:#f6f6f6;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:19px;font-weight:700;letter-spacing:-.3px;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.3px;}
.hero{display:flex;height:280px;padding:0 40px;align-items:center;}
.left{width:50%;}
.left h1{font-size:36px;font-weight:700;letter-spacing:-.5px;line-height:1.2;margin:0 0 14px;}
.left p{font-size:16px;color:#545454;line-height:1.5;max-width:340px;margin:0 0 20px;}
.btn{display:inline-block;background:#1199ff;color:#fff;font-size:15px;font-weight:600;padding:12px 24px;border-radius:8px;}
.right{width:50%;height:220px;border-radius:16px;background:linear-gradient(135deg,#eeeeee,#dcdcdc);position:relative;}
.right:before{content:'';position:absolute;left:30px;top:30px;width:90px;height:130px;border-radius:16px;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.06);}
.right:after{content:'';position:absolute;right:40px;bottom:30px;width:70px;height:100px;border-radius:16px;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.06);}
.section{padding:20px 40px 0;}
.sectitle{font-size:24px;font-weight:600;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:8px;padding:14px;}
.thumb{height:100px;border-radius:8px;background:#eeeeee;margin-bottom:10px;}
.ptitle{font-size:16px;font-weight:600;margin-bottom:6px;}
.pprice{font-size:16px;color:#545454;}
.tag{display:inline-block;background:#1199ff;color:#fff;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:4px 8px;border-radius:4px;margin-bottom:8px;}
</style>
<div class="nav">
<div class="logo">Womaness</div>
<div class="navlinks"><div>Skin</div><div>Body</div><div>Wellness</div><div>Journal</div></div>
</div>
<div class="hero">
<div class="left">
<h1>Aging as an art, not a problem to solve.</h1>
<p>Menopause-informed skincare and body care made for the transition, not around it.</p>
<div class="btn">Shop Best Sellers</div>
</div>
<div class="right"></div>
</div>
<div class="section">
<div class="sectitle">Trusted Favorites</div>
<div class="grid">
<div class="card"><div class="tag">Bestseller</div><div class="thumb"></div><div class="ptitle">Cool Down Cream</div><div class="pprice">$38</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Overnight Glow Serum</div><div class="pprice">$52</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Calm Mind Supplement</div><div class="pprice">$34</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #00b4b1; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #1a1a1a;
border: 1px solid #00b4b1; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 1px; background: #ff6b35; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Montserrat',-apple-system,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #f0f0f0;}
.logo{font-size:19px;font-weight:700;color:#1a2b3b;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#333333;}
.cta{background:#00b4b1;color:#fff;font-size:13px;font-weight:600;border-radius:9999px;padding:10px 22px;}
.promo{height:32px;background:#00b4b1;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:600;}
.hero{height:236px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#f5f7f2;position:relative;overflow:hidden;}
.bub{position:absolute;border-radius:50%;background:rgba(0,180,177,0.18);}
.bub1{width:40px;height:40px;left:340px;top:40px;}
.bub2{width:24px;height:24px;left:560px;top:70px;}
.bub3{width:16px;height:16px;left:420px;top:150px;}
.herotext h1{font-size:32px;font-weight:600;color:#1a1a1a;margin:0 0 14px;}
.herocta{display:inline-block;background:#00b4b1;color:#fff;font-size:16px;font-weight:600;letter-spacing:.3px;border-radius:9999px;padding:14px 32px;}
.grid{display:flex;gap:16px;padding:20px 32px 0;justify-content:center;}
.card{width:198px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.05);}
.thumb{height:120px;background:#f5f7f2;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#ff6b35;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;border-radius:4px;padding:3px 8px;}
.body{padding:12px 14px;}
.ptitle{font-size:16px;font-weight:600;color:#1a1a1a;margin-bottom:4px;}
.pprice{font-size:20px;font-weight:700;color:#1a1a1a;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#1a2b3b;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.footer span{color:#e0e7ef;font-size:11px;opacity:.85;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="promo">Free Shipping on Orders $49+</div>
<div class="nav">
<div class="logo">Sodastream</div>
<div class="navlinks"><span>Machines</span><span>Flavors</span><span>Sustainability</span></div>
<div class="cta">Shop Now</div>
</div>
<div class="hero">
<div class="bub bub1"></div><div class="bub bub2"></div><div class="bub bub3"></div>
<div class="herotext">
<h1>Fizz, made at home.</h1>
<div class="herocta">Build Your Bundle</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00b4b1,#1a2b3b)"><span class="badge">New</span></div><div class="body"><div class="ptitle">Terra Sparkling Maker</div><div class="pprice">$99.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a2b3b,#00b4b1)"></div><div class="body"><div class="ptitle">CO2 Refill Cylinder</div><div class="pprice">$29.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f5a623,#00b4b1)"></div><div class="body"><div class="ptitle">Fruit Drops Flavor Pack</div><div class="pprice">$14.99</div></div></div>
</div>
<div class="footer"><span>© SodaStream — bottles saved: 2.1B+</span><span>Support · Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.25; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #3858e9; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #221155;
border: 1px solid #221155; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #212121;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e0dee7; color: #221155;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:Arial,'Helvetica Neue',sans-serif; color:#3f3f3f; }
*{box-sizing:border-box;}
.util{height:34px;background:#1a0d40;color:#fff;font-size:12px;display:flex;align-items:center;padding:0 30px;justify-content:space-between;}
.nav{height:58px;background:#221155;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:20px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;color:#fff;}
.hero{height:180px;background:linear-gradient(135deg,#221155,#3858e9);display:flex;align-items:center;padding:0 32px;}
.h1{font-size:30px;font-weight:700;color:#fff;margin:0 0 6px;}
.hsub{font-size:15px;font-weight:700;color:#f0b849;margin:0 0 14px;}
.hbtn{display:inline-block;background:#3858e9;color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;padding:11px 24px;border-radius:4px;}
.section{padding:16px 30px 0;}
.sectitle{font-size:15px;font-weight:700;color:#221155;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#fafafa;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;position:relative;}
.thumb{height:88px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:3px 8px;border-radius:4px;color:#fff;}
.pbody{padding:10px 12px 12px;}
.ptitle{font-size:14px;font-weight:600;color:#212121;}
.pprice{font-size:17px;font-weight:700;color:#221155;margin-top:6px;}
.seal{display:inline-flex;align-items:center;gap:4px;margin-top:6px;background:#f4f4f4;border:2px solid #4ab866;border-radius:4px;padding:3px 8px;font-size:10px;font-weight:700;color:#212121;}
</style>
<div class="util">Authenticated by PSA / JSA / Beckett · Free Shipping Over $99</div>
<div class="nav">
<div class="logo">Radtke Sports</div>
<div class="navlinks"><span>Baseball</span><span>Football</span><span>Basketball</span><span>Photos</span></div>
</div>
<div class="hero">
<div><div class="h1">Provenance-Grade Sports Memorabilia</div><div class="hsub">Every signature authenticated. Every item vault-worthy.</div><div class="hbtn">Shop Authenticated Items</div></div>
</div>
<div class="section">
<div class="sectitle">Featured Collectibles</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3858e9,#221155);"><div class="badge" style="background:#cc1818;">Sale</div></div><div class="pbody"><div class="ptitle">Signed Rookie Helmet</div><div class="pprice">$449.00</div><div class="seal">✓ Authenticated</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f0b849,#221155);"></div><div class="pbody"><div class="ptitle">Framed World Series Jersey</div><div class="pprice">$899.00</div><div class="seal">✓ Authenticated</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4ab866,#221155);"></div><div class="pbody"><div class="ptitle">Signed Championship Lithograph</div><div class="pprice">$249.00</div><div class="seal">✓ Authenticated</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0e5376,#221155);"><div class="badge" style="background:#f0b849;color:#221155;">Trophy Tier</div></div><div class="pbody"><div class="ptitle">Game-Used Signed Bat</div><div class="pprice">$1,299.00</div><div class="seal">✓ Authenticated</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.25px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #39ff14; color: #000000;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: transparent; color: #39ff14;
border: 1px solid #39ff14; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.57; background: #1a1a1a; color: #ffffff;
border: 1px solid #404040; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 600; line-height: 1.27; letter-spacing: 0.5px; background: #0d1f0d; color: #39ff14;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#000000; font-family:'Space Grotesk','Courier New',monospace; color:#cccccc; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #2a2a2a;}
.logo{font-size:18px;font-weight:700;letter-spacing:-0.5px;color:#ffffff;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:400;color:#cccccc;}
.search{color:#39ff14;font-size:14px;}
.hero{height:260px;display:flex;align-items:center;padding:0 32px;background:#000000;}
.heroText{width:460px;}
.h1{font-size:30px;font-weight:700;letter-spacing:-0.5px;line-height:1.2;color:#ffffff;margin:0 0 14px;}
.sub{font-size:14px;color:#cccccc;line-height:1.6;margin:0 0 22px;width:380px;}
.cta{display:inline-flex;align-items:center;justify-content:center;width:170px;height:44px;background:transparent;border:1px solid #39ff14;color:#39ff14;font-size:13px;font-weight:600;letter-spacing:0.3px;border-radius:2px;}
.crt{position:relative;width:340px;height:210px;}
.screen{position:absolute;left:60px;top:20px;width:220px;height:150px;border-radius:6px;background:#0d1f0d;border:2px solid #39ff14;box-shadow:0 0 30px rgba(57,255,20,0.35);}
.scanline{position:absolute;left:60px;top:90px;width:220px;height:2px;background:rgba(57,255,20,0.6);}
.sec{padding:22px 32px 0;}
.secTitle{font-size:14px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#666666;margin-bottom:14px;}
.grid{display:flex;gap:12px;}
.card{width:200px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:4px;padding:10px;position:relative;}
.thumb{height:110px;border-radius:2px;margin-bottom:10px;}
.format{position:absolute;top:20px;left:20px;background:transparent;border:1px solid #39ff14;color:#39ff14;font-size:9px;font-weight:600;letter-spacing:0.3px;padding:2px 6px;}
.pname{font-size:13px;font-weight:600;color:#ffffff;margin:0 0 4px;}
.pprice{font-size:13px;color:#39ff14;}
</style>
<div class="nav">
<div class="logo">Wicked Vision</div>
<div class="navlinks"><span>Blu-ray</span><span>4K UHD</span><span>Steelbooks</span></div>
<div class="search">⚲</div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Archival cult cinema. No apologies.</div>
<div class="sub">Limited steelbooks and restorations for the movies your streaming service pretends don't exist.</div>
<div class="cta">Add to Cart</div>
</div>
<div class="crt"><div class="screen"></div><div class="scanline"></div></div>
</div>
<div class="sec">
<div class="secTitle">New Releases</div>
<div class="grid">
<div class="card"><span class="format">4K UHD</span><div class="thumb" style="background:linear-gradient(135deg,#1a1a1a,#39ff14);"></div><div class="pname">Midnight Reel Vol. 3</div><div class="pprice">$39.99</div></div>
<div class="card"><span class="format">Blu-ray</span><div class="thumb" style="background:linear-gradient(135deg,#0d1f0d,#1a1a1a);"></div><div class="pname">Giallo Collection</div><div class="pprice">$29.99</div></div>
<div class="card"><span class="format">Limited Edition</span><div class="thumb" style="background:linear-gradient(135deg,#1a1a1a,#0d1f0d);"></div><div class="pname">Steelbook: Static</div><div class="pprice">$49.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #141619;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #141619;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #141619; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #636464; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ce2129; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #141619;
border: 1px solid #ce2129; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #141619;
border: 1px solid #c4c5c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #636464; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; letter-spacing: 0.5px; background: #ce2129; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#141619; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#1a1e21; }
.brand { font-size:16px; font-weight:700; color:#fff; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; color:#fff; }
.navlinks span.on { color:#ce2129; }
.util { font-size:12px; color:#d0d0d0; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 64px); }
.stage { padding:24px; border-right:1px solid #e2e3e5; display:flex; flex-direction:column; gap:10px; background:#f9fafb; }
.panel { flex:1; position:relative; overflow:hidden; }
.panel::before { content:''; position:absolute; left:50%; top:8%; width:56%; height:84%; transform:translateX(-50%); background:linear-gradient(180deg,#e9e9ea,#c4c5c7 55%,#8f9092); border-radius:6px; box-shadow:0 12px 26px rgba(0,0,0,0.15); }
.panel::after { content:''; position:absolute; left:50%; top:24%; width:40%; height:40%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,#2b2f33,#141619 70%); box-shadow:inset 0 0 0 6px #6a6a6a; }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; background:#f0f0f0; border:1px solid #e2e3e5; border-radius:4px; }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:13px; font-weight:500; color:#636464; }
h1 { margin:0; font-size:24px; font-weight:600; letter-spacing:-0.2px; }
.badge-row { display:flex; gap:6px; }
.badge { background:#ce2129; color:#fff; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:4px 8px; border-radius:4px; }
.badge-info { background:#cff4fc; color:#055160; font-size:12px; padding:4px 10px; border-radius:4px; }
.price { font-size:20px; font-weight:600; }
.spec-table { border-radius:8px; overflow:hidden; border:1px solid #e2e3e5; }
.spec-row { display:flex; justify-content:space-between; padding:10px 14px; font-size:13px; }
.spec-row:nth-child(odd) { background:#f9fafb; }
.spec-row .l { font-weight:500; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#ce2129; color:#fff; border:none; border-radius:4px; font-size:16px; font-weight:600; }
.btn-secondary { width:150px; height:48px; background:#fff; border:1px solid #cbccce; color:#141619; border-radius:4px; font-size:14px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Blomberg</p>
<div class="navlinks"><span class="on">Washers</span><span>Dryers</span><span>Dishwashers</span><span>Refrigerators</span></div>
<div class="util">Search Locator Cart (1)</div>
</nav>
<main>
<div class="stage">
<div class="panel"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Compact Laundry · 24"</span>
<h1>24" Front Load Washer, 2.4 cu ft</h1>
<div class="badge-row"><span class="badge">New</span><span class="badge-info">Energy Rated A+++</span></div>
<div class="price">$949.00</div>
<div class="spec-table">
<div class="spec-row"><span class="l">Capacity</span><span>2.4 cu ft</span></div>
<div class="spec-row"><span class="l">Spin Speed</span><span>1400 RPM</span></div>
<div class="spec-row"><span class="l">Noise Level</span><span>52 dB</span></div>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compare</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #252525;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #252525;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #252525; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #252525; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #252525;
border: 1px solid #252525; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #252525;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; background: #1e1f26; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#252525; font-family:Arial, 'Helvetica Neue', sans-serif; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #d9d9d9;}
.logo{font-size:20px;font-weight:700;color:#252525;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:700;letter-spacing:0.25px;color:#252525;}
.hero{height:280px;display:flex;background:#252525;color:#fff;}
.herotext{width:48%;padding:0 32px;display:flex;flex-direction:column;justify-content:center;}
.herotext .eyebrow{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#bfbfbf;margin-bottom:12px;}
.herotext h1{font-size:34px;font-weight:700;letter-spacing:-0.5px;margin:0 0 12px;line-height:1.15;}
.herotext p{font-size:14px;color:#d9d9d9;margin:0 0 18px;max-width:320px;line-height:1.5;}
.herocta{width:fit-content;background:#ffffff;color:#252525;font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:13px 26px;border:2px solid #ffffff;}
.heroimg{width:52%;position:relative;overflow:hidden;}
.machine{position:absolute;right:60px;top:40px;width:170px;height:200px;background:linear-gradient(160deg,#3a3a3a,#0e0e0e);border-radius:4px;}
.machine:before{content:'';position:absolute;left:30px;top:20px;width:110px;height:18px;background:#0e0e0e;border-radius:2px;}
.machine:after{content:'';position:absolute;left:65px;top:60px;width:40px;height:70px;background:#565656;border-radius:0 0 6px 6px;}
.award{background:#f5f5f5;padding:10px 32px;display:flex;gap:24px;border-bottom:1px solid #d9d9d9;}
.award span{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#949494;}
.grid{display:flex;gap:16px;padding:16px 32px 0;}
.card{width:216px;border:1px solid #d9d9d9;padding:16px;}
.thumb{height:96px;background:#f5f5f5;margin-bottom:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#1e1f26;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:3px 8px;}
.ptitle{font-size:18px;font-weight:700;color:#252525;}
.pbody{font-size:14px;color:#4a4a4a;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#bfbfbf;background:#1e1f26;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Rancilio</div>
<div class="navlinks"><div>Home</div><div>Professional</div><div>Parts</div><div>Find a Dealer</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="eyebrow">Since 1927 — Milan</div>
<h1>Engineered for the group head, not the counter.</h1>
<p>Commercial-grade espresso machines built on nearly a century of close-tolerance assembly.</p>
<div class="herocta">Find a Dealer</div>
</div>
<div class="heroimg"><div class="machine"></div></div>
</div>
<div class="award"><span>Coffee Trade Award 2024</span><span>SCA Certified Equipment</span><span>Barista Championship Sponsor</span></div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">Professional</div></div><div class="ptitle">Classe 5 S</div><div class="pbody">Commercial 2-group boiler</div></div>
<div class="card"><div class="thumb"><div class="badge">Home</div></div><div class="ptitle">Silvia Pro X</div><div class="pbody">Dual boiler, PID control</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Rocky SD Grinder</div><div class="pbody">Stepless dosing burr</div></div>
</div>
<div class="footer"><span>© Rancilio Group, Milan</span><span>Warranty Spec Sheets Service Network</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0F172A; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0F172A; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-size: 20px; font-weight:700; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-size: 12px; font-weight:400; line-height:1.4; margin: 0; color: #999ca4; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #005BB5; color: #ffffff;
border: none; border-radius: 999px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #0F172A; color: #005BB5;
border: 1px solid #005BB5; border-radius: 999px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #0F172A; color: #f5f5f5;
border: 1px solid #484e5d; border-radius: 8;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #999ca4; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #0d213d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: "Nunito Sans", system-ui, -apple-system, sans-serif; background: #F9FAFB; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
.shell { display: flex; height: 640px; }
.sidebar { width: 200px; background: #004C99; padding: 24px 16px; flex-shrink: 0; }
.sidebar .brand { color: #fff; font-size: 17px; font-weight: 800; margin: 0 0 28px 6px; }
.sidebar .item { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 8px; margin-bottom: 4px; color: #E6F2FF; font-size: 13px; font-weight: 600; }
.sidebar .item .ic { width: 18px; height: 18px; border-radius: 4px; background: rgba(255,255,255,0.35); }
.sidebar .item.on { background: #0066CC; color: #fff; }
.sidebar .item.on .ic { background: #FFBA00; }
.content { flex: 1; padding: 24px 32px; overflow: hidden; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.topbar h1 { font-size: 24px; font-weight: 800; color: #111827; margin: 0; }
.topbar .searchcta { display: flex; gap: 10px; align-items: center; }
.search { width: 200px; height: 36px; border-radius: 8px; background: #fff; border: 1px solid #D1D5DB; }
.newnf { background: #0066CC; color: #fff; border: none; border-radius: 8px; padding: 9px 16px; font-weight: 700; font-size: 13px; }
.cards { display: flex; gap: 16px; margin-bottom: 20px; }
.kpi { flex: 1; background: #fff; border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); }
.kpi .lbl { font-size: 12px; color: #6B7280; font-weight: 600; }
.kpi .val { font-size: 22px; font-weight: 800; color: #111827; margin-top: 4px; }
.kpi .delta { font-size: 11px; font-weight: 700; margin-top: 6px; display: inline-block; padding: 2px 6px; border-radius: 999px; }
.delta.up { background: #E6F2FF; color: #0066CC; }
.delta.ok { background: #E6F5EF; color: #008F5A; }
.delta.warn { background: #FFF3D6; color: #E6A800; }
.grid2 { display: flex; gap: 16px; }
.chartcard { flex: 1.4; background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); }
.chartcard h3 { margin: 0 0 14px; font-size: 15px; font-weight: 800; color: #111827; }
.bars { display: flex; align-items: flex-end; gap: 12px; height: 140px; }
.bars .bar { flex: 1; background: linear-gradient(180deg, #3D8FDB, #0066CC); border-radius: 6px 6px 0 0; }
.listcard { flex: 1; background: #fff; border-radius: 12px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); }
.listcard h3 { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: #111827; }
.row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid #F3F4F6; }
.row:last-child { border-bottom: none; }
.row .name { font-size: 12px; font-weight: 700; color: #374151; }
.row .sub { font-size: 11px; color: #9CA3AF; }
.status { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.status.paid { background: #E6F5EF; color: #008F5A; }
.status.due { background: #FFF3D6; color: #E6A800; }
</style>
<div class="shell">
<div class="sidebar">
<p class="brand">Conta Azul</p>
<div class="item on"><div class="ic"></div>Finance</div>
<div class="item"><div class="ic"></div>Sales</div>
<div class="item"><div class="ic"></div>Inventory</div>
<div class="item"><div class="ic"></div>Invoices</div>
<div class="item"><div class="ic"></div>Reports</div>
</div>
<div class="content">
<div class="topbar">
<h1>Financial overview</h1>
<div class="searchcta"><div class="search"></div><button class="newnf">+ New invoice</button></div>
</div>
<div class="cards">
<div class="kpi"><div class="lbl">Cash balance</div><div class="val">$48,230.00</div><span class="delta up">+12% this month</span></div>
<div class="kpi"><div class="lbl">Invoices issued</div><div class="val">312</div><span class="delta ok">Up to date</span></div>
<div class="kpi"><div class="lbl">Due in 7 days</div><div class="val">$6,140.00</div><span class="delta warn">Attention</span></div>
</div>
<div class="grid2">
<div class="chartcard">
<h3>Revenue — last 6 months</h3>
<div class="bars">
<div class="bar" style="height:52%"></div>
<div class="bar" style="height:64%"></div>
<div class="bar" style="height:58%"></div>
<div class="bar" style="height:78%"></div>
<div class="bar" style="height:70%"></div>
<div class="bar" style="height:95%"></div>
</div>
</div>
<div class="listcard">
<h3>Recent invoices</h3>
<div class="row"><div><div class="name">Sunrise Bakery</div><div class="sub">INV 00312</div></div><span class="status paid">Paid</span></div>
<div class="row"><div><div class="name">Studio Verde Co.</div><div class="sub">INV 00311</div></div><span class="status due">Due soon</span></div>
<div class="row"><div><div class="name">Silva Trading</div><div class="sub">INV 00310</div></div><span class="status paid">Paid</span></div>
<div class="row"><div><div class="name">Motor Workshop</div><div class="sub">INV 00309</div></div><span class="status due">Due soon</span></div>
</div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #0098ed; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #0098ed;
border: 1px solid #0098ed; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.38; background: #f7f7f7; color: #323232;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arimo,Arial,Helvetica,sans-serif; color:#323232; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dedede;}
.logo{font-size:20px;font-weight:700;color:#121212;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:400;color:#323232;}
.hero{height:250px;display:flex;background:#121212;}
.herotext{width:46%;padding:0 36px;display:flex;flex-direction:column;justify-content:center;}
h1{font-size:34px;font-weight:700;color:#fff;margin:0 0 12px;line-height:1.15;}
.sub{font-size:14px;color:#c9c9c9;margin:0 0 18px;max-width:310px;}
.cta{display:inline-block;background:#0098ed;color:#fff;font-size:14px;font-weight:700;padding:12px 26px;border-radius:4px;width:fit-content;}
.heroimg{width:54%;position:relative;background:linear-gradient(160deg,#1a1a1a,#121212);}
.router{position:absolute;left:80px;top:60px;width:180px;height:60px;background:#2a2a2a;border-radius:8px;}
.antenna{position:absolute;width:6px;height:70px;background:#0098ed;border-radius:3px;}
.a1{left:90px;top:0;}
.a2{left:150px;top:0;}
.a3{left:210px;top:0;}
.specstrip{display:flex;gap:1px;background:#dedede;}
.speccell{flex:1;background:#f7f7f7;text-align:center;padding:10px;}
.speclabel{font-size:10px;color:#444;text-transform:uppercase;letter-spacing:.5px;}
.specvalue{font-size:14px;font-weight:700;color:#121212;margin-top:2px;}
.sec{padding:18px 36px 0;}
.sectitle{font-size:16px;font-weight:700;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;border-radius:8px;border:1px solid #dedede;padding:10px;}
.thumb{height:84px;background:#f7f7f7;border-radius:6px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:400;margin-bottom:3px;}
.pprice{font-size:14px;font-weight:700;color:#0098ed;}
</style>
<div class="nav">
<div class="logo">Linksys</div>
<div class="navlinks"><span>Routers</span><span>Mesh Wi-Fi</span><span>Business</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Infrastructure That Just Works.</h1>
<div class="sub">Mesh routers specified for coverage, speed, and simultaneous connections.</div>
<div class="cta">Shop Routers</div>
</div>
<div class="heroimg"><div class="antenna a1"></div><div class="antenna a2"></div><div class="antenna a3"></div><div class="router"></div></div>
</div>
<div class="specstrip">
<div class="speccell"><div class="speclabel">Speed</div><div class="specvalue">AX6000</div></div>
<div class="speccell"><div class="speclabel">Coverage</div><div class="specvalue">3,000 sq ft</div></div>
<div class="speccell"><div class="speclabel">Devices</div><div class="specvalue">Up to 40</div></div>
<div class="speccell"><div class="speclabel">Bands</div><div class="specvalue">Tri-Band</div></div>
</div>
<div class="sec">
<div class="sectitle">Top Sellers</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="pname">Velop Mesh WiFi 6 (3-Pack)</div><div class="pprice">$299.99</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Hydra Pro 6E Router</div><div class="pprice">$219.99</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Business LRT214 Router</div><div class="pprice">$149.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #4285f4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #4285f4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ea4335; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4285f4; color: #000000;
border: 1px solid #ea4335; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #4285f4; color: #f5f5f5;
border: 1px solid #5f97f4; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5d7ad5; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#202124; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; position:relative; overflow:hidden;
background:linear-gradient(180deg,#F5F5F5,#AADAFF 140%); }
.park { position:absolute; width:160px; height:120px; background:#C8E6C9; border-radius:40% 60% 55% 45%; }
.p1 { top:60px; left:-30px; } .p2 { bottom:100px; right:-20px; }
.roadv { position:absolute; width:14px; top:0; bottom:0; background:#fff; }
.roadv.r1 { left:120px; } .roadv.r2 { left:220px; }
.roadh { position:absolute; height:14px; left:0; right:0; background:#fff; }
.roadh.h1 { top:180px; } .roadh.h2 { top:340px; }
.hwy { position:absolute; height:10px; left:0; right:0; top:260px; background:#FDF6E3; }
.searchbar { position:absolute; top:16px; left:16px; right:16px; height:48px; background:#fff; border-radius:24px;
display:flex; align-items:center; padding:0 12px; gap:10px; box-shadow:rgba(0,0,0,0.15) 0 2px 8px; z-index:3; }
.searchbar .av { width:28px; height:28px; border-radius:50%; background:#4285F4; }
.searchbar .ph { flex:1; font-size:14px; color:#5F6368; }
.chiprow { position:absolute; top:74px; left:16px; right:16px; display:flex; gap:8px; z-index:3; }
.chiprow span { background:#fff; border:1px solid #DADCE0; border-radius:18px; padding:7px 12px; font-size:12px; font-weight:500;
box-shadow:rgba(0,0,0,0.08) 0 1px 3px; white-space:nowrap; }
.chiprow span.act { background:#E8F0FE; border-color:#4285F4; color:#1967D2; }
.pin { position:absolute; width:28px; height:36px; background:#EA4335; border-radius:50% 50% 50% 6px;
transform:rotate(45deg); z-index:2; }
.pin::before { content:''; position:absolute; inset:8px; background:#fff; border-radius:50%; }
.pin1 { top:220px; left:150px; } .pin2 { top:340px; left:250px; }
.locdot { position:absolute; width:12px; height:12px; background:#4285F4; border:3px solid #fff; border-radius:50%;
top:150px; left:70px; box-shadow:0 0 0 12px rgba(66,133,244,0.18); }
.fab { position:absolute; bottom:100px; right:16px; width:56px; height:56px; border-radius:50%; background:#4285F4;
color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px;
box-shadow:rgba(0,0,0,0.2) 0 4px 12px; z-index:3; }
.sheet { position:absolute; bottom:0; left:0; right:0; height:180px; background:#fff; border-radius:16px 16px 0 0;
box-shadow:rgba(0,0,0,0.12) 0 -4px 20px; z-index:3; padding:14px 16px; }
.grabber { width:32px; height:4px; background:#DADCE0; border-radius:2px; margin:0 auto 12px; }
.placename { font-size:18px; font-weight:500; }
.placemeta { font-size:13px; color:#5F6368; margin:4px 0 10px; }
.actionrow { display:flex; gap:8px; }
.actionrow .dirbtn { background:#4285F4; color:#fff; border-radius:22px; padding:9px 16px; font-size:13px; font-weight:500; }
.actionrow .other { background:#F1F3F4; border-radius:22px; padding:9px 14px; font-size:13px; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:500; letter-spacing:-0.2px; margin:0; }
.brand span { color:#EA4335; }
.tag { font-size:14px; color:#5F6368; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:10px; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#5F6368; text-align:center; }
.typeblock .t1 { font-size:22px; font-weight:500; }
.typeblock .t2 { font-size:13px; color:#5F6368; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:500; padding:6px 12px; border-radius:999px;
background:#F1F3F4; border:1px solid #DADCE0; color:#5F6368; }
.footer { margin-top:auto; border-top:1px solid #DADCE0; padding-top:16px; font-size:11px; color:#80868B; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="park p1"></div><div class="park p2"></div>
<div class="hwy"></div>
<div class="roadv r1"></div><div class="roadv r2"></div>
<div class="roadh h1"></div><div class="roadh h2"></div>
<div class="pin pin1"></div><div class="pin pin2"></div>
<div class="locdot"></div>
<div class="searchbar"><span class="av"></span><span class="ph">Search here</span>🎙</div>
<div class="chiprow"><span class="act">Restaurants</span><span>Coffee</span><span>Hotels</span></div>
<div class="fab">➤</div>
<div class="sheet">
<div class="grabber"></div>
<div class="placename">Blue Bottle Coffee</div>
<div class="placemeta">4.5 ★ (2,345) · Coffee shop · $$ · 1.2 mi</div>
<div class="actionrow"><span class="dirbtn">Directions</span><span class="other">Save</span><span class="other">Call</span></div>
</div>
</div>
<div class="info">
<div>
<h1 class="brand">Google Maps (iOS)<span>.</span></h1>
<p class="tag">The map is the product — chrome floats as translucent pills and sheets over full-bleed geography.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#4285F4"></div><small>#4285F4</small></div>
<div class="sw"><div class="chip2" style="background:#EA4335"></div><small>#EA4335</small></div>
<div class="sw"><div class="chip2" style="background:#34A853"></div><small>#34A853</small></div>
<div class="sw"><div class="chip2" style="background:#FB8C00"></div><small>#FB8C00</small></div>
<div class="sw"><div class="chip2" style="background:#FBBC04"></div><small>#FBBC04</small></div>
</div>
<div class="typeblock">
<div class="t1">Blue Bottle Coffee</div>
<div class="t2">Google Sans + Roboto · tabular figures for distance, ETA, ratings</div>
</div>
<div class="taglist">
<span>Four-color pin system</span><span>Location accuracy halo</span><span>Bottom sheet detents</span>
<span>Route polyline + casing</span><span>Category chip rail</span>
</div>
<div class="footer">Map owns 60%+ of viewport · UI floats, never boxes the geography</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf9fd; color: #1a1b1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf9fd; color: #1a1b1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0; color: #1a1b1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #44474e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.14; letter-spacing: 0.5px; background: #004d9f; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.14; letter-spacing: 0.5px; background: #ffffff; color: #004d9f;
border: 1px solid #004d9f; border-radius: 4px;
padding: 9px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1b1f;
border: 1px solid #c2c2c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #44474e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.45; letter-spacing: 0.88px; background: #e5eff9; color: #004d9f;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#faf9fd; font-family:'Futura W01 Book','futura-book',Arial,Helvetica,sans-serif; color:#1a1b1f; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fff;border-bottom:1px solid #d0d6df;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:'Futura W01 Bold',sans-serif;font-size:19px;font-weight:700;color:#004d9f;}
.navlinks{display:flex;gap:20px;font-family:'Futura W01 Medium',sans-serif;font-size:14px;font-weight:500;}
.search{width:220px;height:36px;border:1px solid #d0d6df;border-radius:4px;display:flex;align-items:center;padding:0 12px;font-size:12px;color:#65708b;}
.hero{height:210px;background:#004d9f;display:flex;align-items:center;padding:0 40px;}
.herotext{width:440px;}
h1{font-family:'Futura W01 Bold',sans-serif;font-size:36px;font-weight:700;color:#fff;margin:0 0 10px;letter-spacing:-0.3px;}
.sub{font-family:'Futura W01 Medium',sans-serif;font-size:18px;font-weight:500;color:#e5eff9;margin:0 0 18px;}
.cta{display:inline-block;background:#fff;color:#004d9f;font-family:'Futura W01 Medium',sans-serif;font-size:13px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;padding:10px 22px;border-radius:4px;}
.sec{padding:22px 40px 0;}
.chips{display:flex;gap:8px;margin-bottom:16px;}
.chip{background:#fff;border:1px solid #d0d6df;border-radius:9999px;font-size:13px;padding:6px 14px;color:#44474e;}
.chip.active{background:#004d9f;color:#fff;border:none;}
.grid{display:flex;gap:14px;}
.card{width:230px;background:#fff;border:1px solid #d0d6df;border-radius:4px;padding:16px;}
.tags{display:flex;gap:6px;margin-bottom:8px;}
.tag{background:#e5eff9;color:#004d9f;font-family:'Futura W01 Medium',sans-serif;font-size:10px;font-weight:500;letter-spacing:0.6px;text-transform:uppercase;padding:3px 8px;border-radius:2px;}
.thumb{height:80px;background:#f4f6fa;margin-bottom:10px;}
.catno{font-size:11px;color:#65708b;letter-spacing:0.5px;margin-bottom:4px;}
.pname{font-family:'Futura W01 Medium',sans-serif;font-size:15px;font-weight:500;color:#1043aa;margin:0 0 6px;}
.pdesc{font-size:12px;color:#2f3033;}
</style>
<div class="nav">
<div class="logo">Qiagen</div>
<div class="navlinks"><span>Sample Technologies</span><span>PCR & RT-PCR</span><span>Genomics</span><span>Diagnostics</span></div>
<div class="search">Search catalog #, gene target...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Precision for Every Sample.</h1>
<div class="sub">Trusted kits and instrumentation for molecular research.</div>
<div class="cta">Request Quote</div>
</div>
</div>
<div class="sec">
<div class="chips">
<div class="chip active">All Applications</div>
<div class="chip">Genomics</div>
<div class="chip">Diagnostics</div>
</div>
<div class="grid">
<div class="card"><div class="tags"><span class="tag">Genomics</span></div><div class="thumb"></div><div class="catno">CAT# 51304</div><div class="pname">QIAamp DNA Mini Kit</div><div class="pdesc">Sample prep · 250 preps</div></div>
<div class="card"><div class="tags"><span class="tag">Diagnostics</span></div><div class="thumb"></div><div class="catno">CAT# 79254</div><div class="pname">RNeasy Mini Kit</div><div class="pdesc">RNA purification · 50 preps</div></div>
<div class="card"><div class="tags"><span class="tag">PCR</span></div><div class="thumb"></div><div class="catno">CAT# 203203</div><div class="pname">HotStar Taq Master Mix</div><div class="pdesc">PCR reagent · 1000 units</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f92c16; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f92c16; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f92c16; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f92c16; color: #f5f5f5;
border: 1px solid #f84c3a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d12512; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Helvetica Neue", Helvetica, Arial, "PingFang HK", "Microsoft JhengHei", sans-serif; }
* { box-sizing:border-box; }
.nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.nav .brand { font-size:18px; font-weight:500; }
.nav .links { display:flex; gap:26px; font-size:16px; }
.nav .lang { font-size:16px; color:#707070; }
.filterrow { display:flex; gap:26px; padding:6px 32px 18px; align-items:baseline; }
.filterrow .label { font-size:24px; font-weight:500; }
.filterrow .tag { font-size:16px; color:#bebebe; }
.filterrow .tag.on { color:#000000; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:120px; gap:2px; padding:0 2px; }
.tile { position:relative; display:flex; align-items:flex-end; padding:14px; color:#fff; font-size:14px; font-weight:500; }
.tile.big { grid-column:span 2; grid-row:span 2; height:242px; }
.t1{background:#f92c16;} .t2{background:#000000;} .t3{background:#4419fe;} .t4{background:#ff5529;} .t5{background:#126dff;} .t6{background:#e74118;}
.footer { display:flex; justify-content:space-between; padding:16px 32px 0; font-size:16px; }
</style></head>
<body>
<nav class="nav">
<div class="brand">Bito</div>
<div class="links"><span>Work</span><span>News</span><span>About</span><span>Bitween</span></div>
<div class="lang">EN / ZH</div>
</nav>
<div class="filterrow">
<span class="label">Genre</span>
<span class="tag on">Branding</span><span class="tag">Live Action</span><span class="tag">Event</span><span class="tag">Motion</span>
</div>
<div class="grid">
<div class="tile big t1">Momentum — Brand Film</div>
<div class="tile t2">Studio Reel 2026</div>
<div class="tile t3">Northline — Identity</div>
<div class="tile t4">Signal — Launch Event</div>
<div class="tile t5">Paperwave — Motion</div>
<div class="tile t6">Contact</div>
</div>
<div class="footer">
<span>© Bito — A Platform Full of Possibilities</span>
<span>Facebook · Instagram · [email protected]</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d6d6d6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:640px; }
.list { width:300px; flex:0 0 auto; background:#F2F2F7; border-right:1px solid #C6C6C8; }
.listhead { padding:18px 16px 10px; font-size:22px; font-weight:800; letter-spacing:-0.3px; }
.row { display:flex; gap:12px; padding:10px 16px; align-items:center; }
.row.on { background:#E9E9EB; }
.av { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#8e8e93,#c6c6c8); flex:0 0 auto; }
.rn { font-size:15px; font-weight:600; }
.rp { font-size:13px; color:#3C3C4399; margin-top:2px; }
.thread { flex:1; display:flex; flex-direction:column; }
.nav { height:64px; border-bottom:0.5px solid #3C3C434A; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.nav .av2 { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#8e8e93,#c6c6c8); margin-bottom:2px; }
.nav .nm { font-size:12px; font-weight:600; }
.msgs { flex:1; padding:20px 24px; display:flex; flex-direction:column; }
.bub { max-width:58%; padding:8px 14px; font-size:16px; line-height:1.3; margin-bottom:3px; position:relative; }
.in { align-self:flex-start; background:#E9E9EB; color:#000; border-radius:19px 19px 19px 6px; }
.out { align-self:flex-end; background:#007AFF; color:#fff; border-radius:19px 19px 6px 19px; }
.gap { margin-bottom:9px; }
.tapback-row { align-self:flex-start; position:relative; margin-bottom:16px; }
.tapback { position:absolute; top:-38px; left:10px; background:#fff; border-radius:20px; box-shadow:0 6px 18px rgba(0,0,0,0.18);
display:flex; padding:6px 10px; gap:8px; font-size:16px; }
.reactchip { position:absolute; top:-14px; right:-8px; background:#fff; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,0.2);
width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-size:14px; }
.typing { align-self:flex-start; background:#E9E9EB; border-radius:19px 19px 19px 6px; padding:12px 16px; display:flex; gap:5px; margin-top:6px; }
.typing i { width:7px; height:7px; border-radius:50%; background:#8E8E93; opacity:0.9; }
.receipt { align-self:flex-end; font-size:12px; color:#3C3C4399; margin-top:4px; margin-bottom:14px; }
.inputbar { padding:10px 14px 16px; display:flex; align-items:center; gap:10px; border-top:0.5px solid #3C3C434A; background:rgba(249,249,249,0.9); }
.plus { width:30px; height:30px; border-radius:50%; background:#E9E9EB; display:flex; align-items:center; justify-content:center; color:#8E8E93; font-weight:700; }
.field { flex:1; height:36px; border-radius:18px; border:1px solid #C6C6C8; display:flex; align-items:center; padding:0 14px; color:#8E8E93; font-size:15px; }
.sendbtn { width:30px; height:30px; border-radius:50%; background:#007AFF; display:flex; align-items:center; justify-content:center; color:#fff; }
</style></head>
<body>
<div class="wrap">
<div class="list">
<div class="listhead">Messages</div>
<div class="row on"><div class="av"></div><div><div class="rn">iMessage (iOS)</div><div class="rp">Perfect, see you then! · 9:41 AM</div></div></div>
<div class="row"><div class="av"></div><div><div class="rn">Mom</div><div class="rp">Don't forget dinner · Yesterday</div></div></div>
<div class="row"><div class="av"></div><div><div class="rn">Design Team</div><div class="rp">Alex: shipped it · Yesterday</div></div></div>
<div class="row"><div class="av"></div><div><div class="rn">Jordan</div><div class="rp">😂😂😂 · Mon</div></div></div>
</div>
<div class="thread">
<div class="nav"><div class="av2"></div><div class="nm">iMessage (iOS) ›</div></div>
<div class="msgs">
<div class="bub in gap">Are we still on for lunch tomorrow?</div>
<div class="tapback-row">
<div class="bub out">Yes! 12:30 at the usual spot</div>
<div class="reactchip">❤️</div>
</div>
<div class="bub in gap" style="margin-top:16px;">Perfect, see you then!</div>
<div class="typing"><i></i><i></i><i></i></div>
</div>
<div class="inputbar">
<div class="plus">+</div>
<div class="field">iMessage</div>
<div class="sendbtn">↑</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9e9e9e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #008e4f; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #008e4f;
border: 1px solid #008e4f; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9e9e9e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #008e4f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-size:22px;font-weight:700;letter-spacing:-.3px;text-transform:uppercase;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:700;text-transform:uppercase;}
.cart{background:#008e4f;color:#fff;height:36px;padding:0 16px;display:flex;align-items:center;font-size:13px;font-weight:700;text-transform:uppercase;border-radius:4px;}
.hero{height:220px;background:#008e4f;display:flex;align-items:center;padding:0 32px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:60px;top:20px;width:14px;height:150px;background:#412d00;border-radius:0 0 6px 6px;transform:rotate(18deg);}
.hero:after{content:'';position:absolute;right:110px;top:80px;width:60px;height:60px;border-radius:50%;border:6px solid #fff1e3;transform:rotate(18deg);}
.hero h1{color:#fff;font-size:36px;font-weight:700;line-height:1.1;max-width:420px;}
.hero span{display:block;background:#fff;color:#008e4f;font-size:14px;font-weight:700;text-transform:uppercase;padding:12px 26px;border-radius:4px;width:fit-content;margin-top:16px;}
.trust{height:44px;background:#eeeeee;display:flex;align-items:center;justify-content:center;gap:40px;font-size:13px;font-weight:600;color:#121212;}
.grid{display:flex;gap:16px;padding:20px 32px 0;}
.card{width:210px;background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.06);padding:12px;}
.thumb{height:120px;background:#fff1e3;border-radius:8px;margin-bottom:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#008e4f;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.pname{font-size:16px;font-weight:700;text-transform:uppercase;}
.pprice{font-size:20px;font-weight:700;color:#008e4f;margin-top:4px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Power Planter</div>
<div class="navlinks"><div>Augers</div><div>Bits</div><div>Batteries</div></div>
<div class="cart">Cart (2)</div>
</div>
<div class="hero">
<h1>Get things planted faster.<span>Shop Augers</span></h1>
</div>
<div class="trust">Free shipping over $75 • 2-year warranty • Made in the USA</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">Bestseller</div></div><div class="pname">4" Auger Bit</div><div class="pprice">$79.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">2" Auger Bit</div><div class="pprice">$54.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Drill Extension</div><div class="pprice">$39.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Battery Pack Pro</div><div class="pprice">$129.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6f6f6f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffff00; color: #1a1a1a;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #6f6f6f; color: #ffffff;
border: 1px solid #ffff00; border-radius: 9999px;
padding: 14px 32px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6f6f6f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #ffff00; color: #1a1a1a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Montserrat','Source Sans Pro',arial,sans-serif; background:#ffffff; color:#2b2b2b; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e6e6e6;}
.logo{font-family:'Playfair Display',Georgia,serif;font-size:20px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;letter-spacing:0.6px;text-transform:uppercase;}
.hero{height:230px;display:flex;background:#f5f5f5;}
.herotxt{width:48%;padding:26px 36px;display:flex;flex-direction:column;justify-content:center;}
.herotxt h1{font-family:'Playfair Display',Georgia,serif;font-size:32px;font-weight:700;margin:0 0 12px;line-height:1.2;}
.herotxt p{font-size:14px;color:#2b2b2b;margin:0 0 18px;max-width:280px;}
.cta{width:fit-content;font-size:12px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;background:#6f6f6f;color:#fff;padding:14px 30px;border-radius:9999px;}
.cable{width:52%;position:relative;background:repeating-linear-gradient(115deg,#e6e6e6 0 4px,#fff 4px 8px);}
.coil{position:absolute;left:50%;top:50%;width:150px;height:150px;border-radius:50%;border:14px solid #6f6f6f;transform:translate(-50%,-50%);}
.tip{position:absolute;left:50%;top:50%;width:26px;height:26px;background:#ffff00;transform:translate(-50%,-50%);border-radius:4px;}
.sec{padding:20px 36px 0;}
.sec h2{font-size:17px;font-weight:600;margin:0 0 14px;}
.grid{display:flex;gap:14px;}
.card{width:210px;padding:0;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:9px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;padding:2px 8px;border-radius:9999px;background:#ffff00;color:#1a1a1a;}
.cimg{height:110px;border-radius:8px;margin-bottom:8px;}
.ctitle{font-size:14px;font-weight:600;}
.cprice{font-size:13px;margin-top:4px;color:#6f6f6f;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;border-top:1px solid #e6e6e6;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:11px;color:#6f6f6f;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Native Union</div>
<div class="navlinks"><div>Cables</div><div>Chargers</div><div>Cases</div><div>Desk</div></div>
</div>
<div class="hero">
<div class="herotxt">
<h1>Objects built<br>to last</h1>
<p>Braided nylon, leather wraps, anodized metal — precision hardware for everyday carry.</p>
<div class="cta">Shop New Arrivals</div>
</div>
<div class="cable"><div class="coil"></div><div class="tip"></div></div>
</div>
<div class="sec">
<h2>Featured</h2>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="cimg" style="background:linear-gradient(135deg,#6f6f6f,#1a1a1a)"></div><div class="ctitle">Belt Cable USB-C, 1.2m</div><div class="cprice">$34.99</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#9e9e9e,#6f6f6f)"></div><div class="ctitle">Drop Wireless Charger</div><div class="cprice">$59.99</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#d4d4d4,#6f6f6f)"></div><div class="ctitle">Stow Leather Case</div><div class="cprice">$44.99</div></div>
</div>
</div>
<div class="footer"><span>Lifetime Warranty on Cables</span><span>Materials Register</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2d2d2d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2d2d2d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #2d2d2d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #8c8c8c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.5px; background: #f5a623; color: #000000;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #2d2d2d;
border: 1px solid #f5a623; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #2d2d2d;
border: 1px solid #cacaca; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #f5a623; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#2d2d2d; box-sizing:border-box;
font-family:'nowie-web',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.brand { font-size:20px; font-weight:600; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#4a4a4a; }
.btn-primary { background:#f5a623; color:#fff; border:none; border-radius:9999px; padding:11px 22px; font-size:13px; font-weight:600; }
main { display:flex; height:calc(640px - 68px - 44px); }
.gallery { width:380px; background:#f9f6f2; position:relative; display:flex; align-items:center; justify-content:center; }
.razor { width:16px; height:200px; border-radius:9999px; background:linear-gradient(180deg,#f7c5cc,#f5a623 60%,#d4891e); position:relative; }
.razor::before { content:''; position:absolute; top:-30px; left:-32px; width:80px; height:36px; border-radius:9999px; background:#f5a623; }
.badge-new { position:absolute; top:20px; left:20px; background:#f5a623; color:#fff; font-size:11px; font-weight:600; padding:4px 12px; border-radius:9999px; }
.info { flex:1; padding:30px 34px; display:flex; flex-direction:column; gap:14px; }
.cat { font-size:12px; color:#8c8c8c; }
h1 { font-size:24px; font-weight:600; margin:0; letter-spacing:-0.3px; }
.stars { color:#f5a623; font-size:13px; }
.price { font-size:20px; font-weight:600; }
.desc { font-size:13px; color:#4a4a4a; line-height:1.55; max-width:340px; }
.pillrow { display:flex; gap:8px; }
.pill { background:#f5f0eb; border-radius:9999px; padding:8px 16px; font-size:12px; color:#4a4a4a; }
.pill.on { background:#f5a623; color:#fff; }
.subs { display:flex; align-items:center; gap:10px; background:#e8e0d8; border-radius:9999px; padding:10px 16px; font-size:12px; color:#4a4a4a; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#f5a623; color:#fff; border:none; border-radius:9999px; padding:14px; font-size:14px; font-weight:600; }
.btn-sec { background:#fff; color:#2d2d2d; border:1px solid #dcdcdc; border-radius:9999px; padding:14px 20px; font-size:13px; font-weight:600; }
footer { padding:12px 34px; border-top:1px solid #eaeaea; font-size:11px; color:#8c8c8c; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Billie</div>
<div class="navlinks"><span>Shave</span><span>Body Care</span><span>Bundles</span><span>Our Story</span></div>
<button class="btn-primary">Subscribe & Save</button>
</nav>
<main>
<div class="gallery"><span class="badge-new">New Colorway</span><div class="razor"></div></div>
<div class="info">
<span class="cat">Starter Kit</span>
<h1>The Billie Razor + 2 Refills</h1>
<div class="stars">★★★★★ 4.7 (5,201 reviews)</div>
<div class="price">$9.00</div>
<p class="desc">Five-blade razor with a rounded, aloe-dipped head — built for curves, not just legs.</p>
<div class="pillrow"><span class="pill on">Peach</span><span class="pill">Lilac</span><span class="pill">Sage</span></div>
<div class="subs">Subscribe every 2 months → <b>save 20%</b></div>
<div class="btn-row">
<button class="btn-add">Add to Bag</button>
<button class="btn-sec">One-time Buy</button>
</div>
</div>
</main>
<footer><span>© Billie</span><span>We take care, not ourselves too seriously</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1b1b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1b1b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #1d1b1b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #9ca3af; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #2563eb; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #1d1b1b;
border: 1px solid #2563eb; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1d1b1b;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ca3af; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f40000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Holdit Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; background:#ffffff; color:#1d1b1b; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #ebebeb;}
.logo{font-size:20px;font-weight:700;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;}
.navlinks .active{color:#2563eb;}
.searchpill{background:#f5f5f5;border-radius:999px;height:36px;width:200px;font-size:12px;color:#9ca3af;padding:0 16px;line-height:36px;}
.hero{display:flex;align-items:center;padding:24px 36px;gap:30px;height:230px;}
.hero-visual{width:320px;height:200px;background:#ebebeb;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:11px;letter-spacing:.5px;position:relative;flex-shrink:0;}
.hero-visual::after{content:'';position:absolute;width:70px;height:70px;background:#2563eb;border-radius:999px;bottom:16px;right:16px;opacity:.15;}
.hero-txt h1{font-size:32px;font-weight:700;line-height:1.2;margin:0 0 10px;}
.hero-txt p{font-size:15px;color:#6b7280;margin:0 0 16px;max-width:340px;}
.btn{display:inline-block;background:#2563eb;color:#fff;font-weight:600;font-size:14px;padding:12px 26px;border-radius:999px;}
.section{padding:8px 36px;}
.section h2{font-size:18px;font-weight:600;margin:0 0 12px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{position:relative;}
.imgbox{height:100px;background:#f5f5f5;border-radius:12px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:10px;text-align:center;}
.badge{position:absolute;top:8px;left:8px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:4px;color:#fff;}
.badge.sale{background:#f40000;}
.badge.new{background:#2563eb;}
.pname{font-size:14px;font-weight:600;margin:0 0 2px;}
.price{font-size:14px;font-weight:600;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#1a1a1d;color:#898989;padding:14px 36px;display:flex;justify-content:space-between;font-size:11px;}
</style>
<div class="nav">
<div class="logo">Holdit</div>
<div class="navlinks"><span class="active">Phone Cases</span><span>MagSafe</span><span>Straps</span><span>Accessories</span></div>
<div class="searchpill">Search products…</div>
</div>
<div class="hero">
<div class="hero-visual">PRODUCT PHOTOGRAPHY</div>
<div class="hero-txt">
<h1>Soft-touch cases,<br>built to last.</h1>
<p>Swedish design meets everyday durability — silicone cases that feel as good as they look.</p>
<div class="btn">Shop New Arrivals</div>
</div>
</div>
<div class="section">
<h2>New Arrivals</h2>
<div class="grid">
<div class="card"><div class="badge new">New</div><div class="imgbox">Silicone Case</div><div class="pname">Silicone Case Sand</div><div class="price">$34.90</div></div>
<div class="card"><div class="badge sale">Sale</div><div class="imgbox">MagSafe Wallet</div><div class="pname">MagSafe Card Holder</div><div class="price">$24.90</div></div>
<div class="card"><div class="imgbox">Phone Strap</div><div class="pname">Woven Phone Strap</div><div class="price">$19.90</div></div>
<div class="card"><div class="imgbox">Charger</div><div class="pname">15W MagSafe Charger</div><div class="price">$39.90</div></div>
</div>
</div>
<div class="footer"><span>© Holdit</span><span>Shipping · Returns · Support · Terms</span></div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1e1e1e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1e1e1e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1e1e1e; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1e1e1e; color: #f5f5f5;
border: 1px solid #404040; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #424242; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#202429; box-sizing:border-box;
font-family:"Noto Sans KR", -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 28px;
border-bottom:1px solid #eee; }
.nav .brand { font-weight:700; font-size:18px; }
.nav .links { display:flex; gap:20px; font-size:13px; color:#666; }
.layout { display:flex; padding:24px 28px 0; gap:32px; }
.gallery { width:340px; }
.maximg { width:340px; height:340px; border-radius:6px; background:linear-gradient(150deg,#f7d9e4,#f2c6d6 55%,#e9aec3); position:relative; }
.maximg::after { content:''; position:absolute; top:14px; right:14px; width:26px; height:26px; border-radius:50%;
background:rgba(0,0,0,0.15); }
.thumbs { display:flex; gap:8px; margin-top:8px; }
.thumb { width:60px; height:60px; border-radius:4px; background:linear-gradient(150deg,#f7d9e4,#f2c6d6); }
.thumb.sel { outline:2px solid #1e1e1e; }
.detail { flex:1; }
.brandtag { font-size:12px; color:#808893; margin-bottom:6px; }
.title { font-size:18px; font-weight:500; margin:0 0 10px; line-height:1.4; }
.price { font-size:24px; font-weight:700; margin:0 0 4px; }
.badge { display:inline-block; background:#ebeef2; color:#808893; font-size:13px; font-weight:700; border-radius:6px; padding:2px 8px 3px; margin-bottom:14px; }
.promo { display:inline-block; background:#ff365d; color:#fff; font-size:12px; font-weight:700; border-radius:4px; padding:3px 8px; margin-left:8px; }
.options { border-top:1px solid #e6e6e6; padding-top:14px; }
.optlabel { font-size:13px; color:#666; margin-bottom:6px; }
.optbox { border:1px solid #e6e6e6; border-radius:6px; padding:10px 14px; font-size:13px; display:flex; justify-content:space-between; margin-bottom:20px; }
.optbox .dis { color:#e1e1e1; }
.actions { display:flex; gap:10px; }
.buy-direct { flex:1; height:56px; background:#1e1e1e; color:#fff; border-radius:6px; font-size:17px; font-weight:500;
display:flex; align-items:center; justify-content:center; }
.buy-partner { flex:1; height:56px; background:#00c73c; color:#fff; border-radius:6px; font-size:17px; font-weight:500;
display:flex; align-items:center; justify-content:center; }
</style></head>
<body>
<nav class="nav">
<div class="brand">Brandi</div>
<div class="links"><span>Women</span><span>Bags</span><span>Shoes</span><span>Beauty</span><span>Sale</span></div>
</nav>
<div class="layout">
<div class="gallery">
<div class="maximg"></div>
<div class="thumbs">
<div class="thumb sel"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div>
</div>
</div>
<div class="detail">
<div class="brandtag">MINJI STUDIO</div>
<h1 class="title">Belted Wrap Midi Dress — Dusty Rose</h1>
<div class="price">₩58,900 <span class="promo">-30%</span></div>
<span class="badge">Free shipping</span>
<div class="options">
<div class="optlabel">Size</div>
<div class="optbox"><span>Small</span><span>In stock</span></div>
<div class="optbox"><span>Medium</span><span>In stock</span></div>
<div class="optbox"><span class="dis">Large</span><span class="dis">Sold out</span></div>
</div>
<div class="actions">
<div class="buy-direct">Buy now</div>
<div class="buy-partner">Partner checkout</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #F5F0E8; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #F5F0E8; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.1px; background: #1B4332; color: #FFFFFF;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.1px; background: transparent; color: #1B4332;
border: 1px solid #1B4332; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #bebab4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.2px; background: #EDE9E1; color: #3D3D3D;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#F5F0E8; color:#1B4332; font-family:'Neue Haas Grotesk',Arial,sans-serif;
}
*, *::before, *::after { box-sizing:border-box; }
.wrap{ position:relative; width:960px; height:640px; }
.nav{ height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#1B4332; }
.logo{ font-size:19px; font-weight:700; color:#F5F0E8; }
.navlinks{ display:flex; gap:24px; }
.navlinks span{ font-size:12px; color:#cfe3d7; }
.navlinks span.active{ color:#ffffff; font-weight:700; }
.cta{ font-size:12px; font-weight:700; color:#1B4332; background:#F5F0E8; padding:10px 20px; border-radius:999px; }
.hero{ height:214px; display:flex; align-items:center; padding:0 34px; gap:26px; }
.hero-text{ width:390px; }
.kicker{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#2D6A4F; margin-bottom:10px; }
.h1{ font-size:30px; font-weight:700; line-height:1.2; color:#1B4332; margin-bottom:10px; }
.sub{ font-size:13px; line-height:1.55; color:#3d4a42; max-width:330px; margin-bottom:16px; }
.btn{ font-size:13px; font-weight:600; color:#F5F0E8; background:#1B4332; padding:14px 26px; border-radius:999px; width:fit-content; }
.quiz{ flex:1; height:180px; background:#ffffff; border-radius:12px; padding:18px 22px; position:relative; }
.dots{ display:flex; gap:8px; margin-bottom:14px; }
.dot{ width:8px; height:8px; border-radius:50%; background:#d8e5dd; }
.dot.on{ background:#1B4332; }
.qtext{ font-size:13px; font-weight:700; color:#1B4332; margin-bottom:12px; }
.qopt{ display:flex; align-items:center; justify-content:space-between; background:#F5F0E8; border-radius:8px; padding:10px 14px; margin-bottom:8px; font-size:12px; color:#1B4332; }
.section-title{ padding:14px 34px 8px; font-size:15px; font-weight:700; color:#1B4332; }
.grid{ display:flex; gap:16px; padding:0 34px; }
.card{ width:200px; background:#ffffff; border-radius:10px; padding:12px; }
.card-img{ width:100%; height:70px; border-radius:8px; margin-bottom:8px; }
.card-title{ font-size:12px; font-weight:700; color:#1B4332; margin-bottom:2px; }
.card-note{ font-size:10px; color:#6f7a73; margin-bottom:8px; }
.row{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-size:12px; font-weight:700; color:#1B4332; }
.tag{ font-size:9px; font-weight:700; text-transform:uppercase; color:#ffffff; background:#2D6A4F; padding:3px 9px; border-radius:999px; }
.strip{ margin:18px 34px 0; padding:16px 22px; background:#ffffff; border-radius:10px; display:flex; align-items:center; justify-content:space-between; }
.strip-label{ font-size:12px; font-weight:700; color:#1B4332; }
.strip-sub{ font-size:11px; color:#6f7a73; margin-top:3px; }
.strip-badge{ font-size:10px; font-weight:700; text-transform:uppercase; color:#ffffff; background:#1B4332; padding:6px 14px; border-radius:999px; }
.footer{ position:absolute; bottom:0; left:0; width:960px; height:48px; background:#1B4332; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.footer span{ font-size:10px; letter-spacing:0.04em; color:#cfe3d7; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Hims Men S HE 2</div>
<div class="navlinks">
<span class="active">Hair</span>
<span>Skin</span>
<span>Sex</span>
<span>Mental Health</span>
</div>
<div class="cta">Get Started</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="kicker">Deep Forest Green on Warm Cream</div>
<div class="h1">The whole argument, in two colors.</div>
<div class="sub">A condition-first approach that trades clinical blue for something warmer, without losing the seriousness of real treatment.</div>
<div class="btn">Take the Quiz</div>
</div>
<div class="quiz">
<div class="dots"><span class="dot on"></span><span class="dot on"></span><span class="dot"></span><span class="dot"></span></div>
<div class="qtext">How long have you noticed hair thinning?</div>
<div class="qopt">Less than a year</div>
<div class="qopt">1–3 years</div>
</div>
</div>
<div class="section-title">Shop by Condition</div>
<div class="grid">
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#1B4332,#2D6A4F);"></div>
<div class="card-title">Hair Loss</div>
<div class="card-note">Topical + Oral Rx</div>
<div class="row"><span class="price">$29/mo</span><span class="tag">Rx</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#2D6A4F,#c9c2b0);"></div>
<div class="card-title">Anti-Aging Skincare</div>
<div class="card-note">Retinoid Cream</div>
<div class="row"><span class="price">$35/mo</span><span class="tag">Rx</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#c9c2b0,#1B4332);"></div>
<div class="card-title">Performance Rx</div>
<div class="card-note">On-Demand or Daily</div>
<div class="row"><span class="price">$2/dose</span><span class="tag">Rx</span></div>
</div>
</div>
<div class="strip">
<div>
<div class="strip-label">Free shipping on every subscription</div>
<div class="strip-sub">Cancel anytime. Licensed U.S. providers review every request.</div>
</div>
<span class="strip-badge">Learn More</span>
</div>
<div class="footer">
<span>© Hims</span>
<span>Privacy · Providers · Support</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f6; color: #303030;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f6; color: #303030;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #303030; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #147bbb; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f4f4f6; color: #147bbb;
border: 1px solid #147bbb; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #303030;
border: 1px solid #e0e0e0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #00caaa; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f4f4f6; font-family:'acumin',-apple-system,Roboto,sans-serif; color:#272d45; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#fff;border-bottom:1px solid #e0e0e0;}
.logo{font-size:19px;font-weight:700;color:#147bbb;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#676986;}
.navcta{background:#00caaa;color:#fff;font-size:12px;font-weight:700;padding:9px 18px;border-radius:9999px;}
.hero{height:230px;display:flex;background:linear-gradient(120deg,#dcebf5 0%,#b2f9e9 100%);}
.herotext{width:440px;padding:28px 36px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#147bbb;margin-bottom:10px;}
.h1{font-size:28px;font-weight:700;line-height:1.25;color:#272d45;margin:0 0 10px;}
.sub{font-size:14px;color:#676986;margin:0 0 16px;max-width:340px;}
.btn{width:160px;text-align:center;background:#147bbb;color:#fff;font-size:13px;font-weight:700;padding:11px 0;border-radius:9999px;}
.heroimg{flex:1;position:relative;}
.brushhead{position:absolute;bottom:40px;left:80px;width:80px;height:120px;border-radius:40px 40px 12px 12px;background:linear-gradient(160deg,#00caaa,#147bbb);}
.bristles{position:absolute;bottom:150px;left:90px;width:60px;height:16px;background:#ff9579;border-radius:8px;}
.sec{padding:16px 36px 0;}
.sectitle{font-size:13px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#272d45;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:154px;background:#fff;border-radius:12px;padding:9px;position:relative;box-shadow:0 2px 8px rgba(39,45,69,.06);}
.thumb{height:96px;border-radius:10px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:600;line-height:1.3;height:30px;overflow:hidden;color:#272d45;}
.pprice{font-size:13px;font-weight:700;color:#147bbb;margin-top:3px;}
.tag{position:absolute;top:7px;left:7px;color:#fff;font-size:9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:3px 7px;border-radius:9999px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:34px;background:#272d45;color:#d3d4dd;font-size:11px;display:flex;align-items:center;padding:0 36px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Ojook</div>
<div class="navlinks"><span>Toothbrushes</span><span>Refills</span><span>Whitening</span><span>Kits</span></div>
<div class="navcta">Start a Subscription</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">A Ritual, Not A Chore</div>
<div class="h1">Brushing you'll<br>actually look forward to.</div>
<div class="sub">Sonic toothbrushes and clean-formula refills designed for the two minutes that matter.</div>
<div class="btn">Shop The Kit</div>
</div>
<div class="heroimg"><div class="brushhead"></div><div class="bristles"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><span class="tag" style="background:#00caaa;">New</span><div class="thumb" style="background:linear-gradient(150deg,#b2f9e9,#147bbb)"></div><div class="pname">Sonic Toothbrush</div><div class="pprice">$59.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#dcebf5,#00caaa)"></div><div class="pname">Whitening Toothpaste</div><div class="pprice">$12.00</div></div>
<div class="card"><span class="tag" style="background:#ff9579;">Sale</span><div class="thumb" style="background:linear-gradient(150deg,#ff9579,#147bbb)"></div><div class="pname">Brush Head 3-Pack</div><div class="pprice">$19.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#272d45,#00caaa)"></div><div class="pname">Travel Charging Case</div><div class="pprice">$29.00</div></div>
</div>
</div>
<div class="footer">© Ojook · Clean Formula, Clean Conscience</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.27; letter-spacing: -0.2px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #787878; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 1px; background: #313131; color: #ffffff;
border: none; border-radius: 0px; padding: 15px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 1px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 0px;
padding: 14px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787878; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 1px; background: #313131; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Ernesta — Home</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#4d4d4d;
font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;}
.page{width:960px;height:640px;display:flex;flex-direction:column;}
header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e2e2e2;}
.logo{font-size:20px;font-weight:300;letter-spacing:1px;color:#313131;}
nav{display:flex;gap:28px;}
nav a{font-size:12px;letter-spacing:0.3px;color:#313131;}
.icons{display:flex;gap:14px;font-size:13px;color:#313131;}
.hero{position:relative;height:290px;background:linear-gradient(120deg,#f2ede6,#e7ded2);display:flex;align-items:flex-end;padding:0 40px 26px;overflow:hidden;}
.hero::before{content:'';position:absolute;left:60%;right:-10%;top:0;bottom:0;background:linear-gradient(160deg,#d9cfc0,#cabfae);}
.rug{position:absolute;left:56%;bottom:10%;width:280px;height:130px;border-radius:6px;background:linear-gradient(100deg,#8c7a63,#a8927a 40%,#8c7a63 70%);box-shadow:0 10px 24px rgba(0,0,0,0.15);}
.rug::after{content:'';position:absolute;inset:14px;border:1px solid rgba(255,255,255,0.35);}
.hero-copy{position:relative;z-index:2;max-width:340px;}
.hero-copy .kicker{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#787878;margin-bottom:10px;}
.hero-copy h1{font-size:38px;font-weight:300;color:#313131;line-height:1.1;margin:0 0 14px;letter-spacing:-0.3px;}
.hero-cta{display:inline-block;border:1px solid #313131;color:#313131;padding:11px 24px;font-size:12px;letter-spacing:0.5px;}
main{flex:1;padding:22px 40px 0;}
.row-head{display:flex;justify-content:space-between;margin-bottom:14px;}
.row-head h2{font-size:15px;font-weight:400;letter-spacing:0.3px;margin:0;color:#313131;}
.row-head span{font-size:11px;color:#787878;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.card{}
.thumb{height:88px;background:linear-gradient(115deg,#e9e1d4,#d8cdb9);position:relative;margin-bottom:10px;}
.thumb::after{content:'';position:absolute;left:16px;right:16px;bottom:16px;top:40%;background:linear-gradient(100deg,#a8927a,#8c7a63);}
.card h4{font-size:12px;margin:0 0 4px;color:#313131;font-weight:400;}
.card .desc{font-size:10px;color:#787878;margin-bottom:6px;}
.card .swatches{display:flex;gap:5px;margin-bottom:6px;}
.card .swatches i{width:12px;height:12px;border-radius:999px;display:inline-block;box-shadow:0 0 0 1px #d4d4d4;}
.card .price{font-size:12px;color:#313131;}
footer{border-top:1px solid #e2e2e2;padding:14px 40px;display:flex;justify-content:space-between;margin-top:16px;}
footer span{font-size:10px;color:#787878;}
</style>
<div class="page">
<header>
<div class="logo">Ernesta</div>
<nav><a>Shop Rugs</a><a>Colors</a><a>Room Guide</a><a>Care</a></nav>
<div class="icons">Search · Account · Bag</div>
</header>
<div class="hero">
<div class="rug"></div>
<div class="hero-copy">
<div class="kicker">Made-to-Order Rugs</div>
<h1>A rug should feel like the room already had it.</h1>
<div class="hero-cta">Shop the Collection</div>
</div>
</div>
<main>
<div class="row-head"><h2>New This Season</h2><span>View All</span></div>
<div class="grid">
<div class="card"><div class="thumb"></div><h4>Anessa, Wool Blend</h4><div class="desc">8x10 · Low Pile</div><div class="swatches"><i style="background:#8c7a63"></i><i style="background:#c9beac"></i><i style="background:#4d4d4d"></i></div><div class="price">$895</div></div>
<div class="card"><div class="thumb"></div><h4>Marlow, Handwoven</h4><div class="desc">5x8 · Medium Pile</div><div class="swatches"><i style="background:#a8927a"></i><i style="background:#d9cfc0"></i></div><div class="price">$525</div></div>
<div class="card"><div class="thumb"></div><h4>Solstice, Jute Weave</h4><div class="desc">9x12 · Flatweave</div><div class="swatches"><i style="background:#c9beac"></i><i style="background:#8c7a63"></i></div><div class="price">$1,150</div></div>
<div class="card"><div class="thumb"></div><h4>Reverie, Cut & Loop</h4><div class="desc">6x9 · High Pile</div><div class="swatches"><i style="background:#4d4d4d"></i><i style="background:#8c7a63"></i><i style="background:#a8927a"></i></div><div class="price">$725</div></div>
</div>
</main>
<footer>
<span>© Ernesta — Rugs, Made to Order</span>
<span>Room Sizing Calculator · Fiber Care Guide · Trade Program</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #9fe870; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #9fe870; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #51723c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #163300; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #9fe870; color: #163300;
border: 1px solid #163300; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #9fe870; color: #111111;
border: 1px solid #88c661; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #51723c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #89cb5e; color: #163300;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0e0f0c; box-sizing:border-box;
font-family:Inter,-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:700; font-size:17px; color:#163300; }
.navlinks { display:flex; gap:20px; font-size:15px; color:#163300; font-weight:600; }
.row { display:flex; gap:10px; }
.pill { background:#9fe870; color:#163300; border-radius:9999px; height:44px; padding:0 22px; font-size:15px;
font-weight:600; display:flex; align-items:center; }
.pill-dark { background:#163300; color:#9fe870; border-radius:9999px; height:44px; padding:0 22px; font-size:15px;
font-weight:600; display:flex; align-items:center; }
.hero { text-align:center; padding:24px 32px 20px; }
.hero h1 { font-size:52px; font-weight:900; margin:0 0 14px; line-height:1.02; letter-spacing:-1px; }
.chips { display:flex; gap:10px; justify-content:center; margin-bottom:18px; }
.chip { border-radius:16px; height:32px; padding:0 16px; font-size:15px; font-weight:600; display:flex; align-items:center; }
.chip.on { background:#9fe870; color:#163300; }
.chip.off { background:transparent; color:#868685; border:1px solid #868685; }
.converter { background:#e8ebe6; border-radius:16px; margin:0 auto; max-width:520px; padding:20px; display:flex; align-items:center; gap:12px; }
.field { background:#ffffff; border-radius:10px; height:48px; flex:1; padding:0 16px; display:flex; align-items:center;
font-size:16px; color:#0e0f0c; }
.arrow { color:#454745; font-size:18px; }
.cardsrow { display:flex; gap:16px; padding:24px 32px 0; }
.card { flex:1; border:1px solid #e8ebe6; border-radius:16px; padding:18px; }
.card h3 { font-size:16px; margin:0 0 6px; }
.card p { font-size:13px; color:#454745; margin:0; line-height:1.5; }
</style></head>
<body>
<nav>
<span class="brand">Wise</span>
<div class="navlinks"><span>Personal</span><span>Business</span><span>Pricing</span></div>
<div class="row"><span class="pill-dark">Log in</span><span class="pill">Open an account</span></div>
</nav>
<section class="hero">
<h1>Money without borders</h1>
<div class="chips"><span class="chip on">Send money</span><span class="chip off">Spend</span><span class="chip off">Receive</span><span class="chip off">Hold</span></div>
<div class="converter">
<span class="field">1,000.00 USD</span>
<span class="arrow">→</span>
<span class="field">1,340,500 KRW</span>
</div>
</section>
<section class="cardsrow">
<div class="card"><h3>The real exchange rate</h3><p>No markups hidden in the rate — always the mid-market rate.</p></div>
<div class="card"><h3>Low, transparent fees</h3><p>See the exact fee before you send, every single time.</p></div>
<div class="card"><h3>Fast, most of the time instant</h3><p>Most transfers arrive within seconds, not days.</p></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0f62fe; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0f62fe; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8eb3f9; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0f62fe; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0f62fe; color: #f5f5f5;
border: 1px solid #347afd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8eb3f9; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #357bfe; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#161616; box-sizing:border-box;
font-family:"IBM Plex Sans","IBM Plex Sans KR",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing: border-box; }
.shell { height:48px; background:#161616; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 24px; }
.shell-left { display:flex; align-items:center; gap:10px; }
.shell-mark { width:16px; height:16px; background:#0f62fe; }
.shell-name { font-size:14px; font-weight:600; letter-spacing:0.02em; }
.shell-nav { display:flex; gap:22px; font-size:13px; opacity:0.72; }
.shell-right { display:flex; align-items:center; gap:14px; font-size:12px; opacity:0.72; }
.shell-dot { width:22px; height:22px; border-radius:0; background:#353535; display:flex;
align-items:center; justify-content:center; font-size:11px; }
.content { padding:28px 40px 0; }
.crumb { font-size:12px; font-weight:400; letter-spacing:0.32px; text-transform:uppercase;
color:#525252; margin:0 0 14px; }
h1 { font-size:38px; font-weight:300; line-height:1.14; letter-spacing:-0.2px; margin:0 0 12px;
max-width:560px; color:#161616; }
.lede { font-size:16px; font-weight:400; line-height:24px; color:#525252; margin:0 0 20px; max-width:480px; }
.cta-row { display:flex; align-items:center; gap:24px; margin-bottom:26px; }
.cta-primary { background:#0f62fe; color:#ffffff; border:1px solid transparent; border-radius:4px;
padding:14px 63px 14px 15px; height:48px; font-size:14px; font-weight:400; letter-spacing:0.16px;
line-height:18px; white-space:nowrap; }
.cta-link { color:#0062fe; font-size:14px; font-weight:400; text-decoration:underline; }
.tabs { display:flex; background:#f4f4f4; border:1px solid #c6c6c6; border-radius:4px; overflow:hidden;
width:fit-content; margin-bottom:24px; }
.tab { height:48px; padding:0 16px; display:flex; align-items:center; font-size:16px; font-weight:400;
color:#161616; border-right:1px solid #c6c6c6; }
.tab:last-child { border-right:none; }
.tab.selected { background:#ffffff; color:#0f62fe; box-shadow:inset 0 -2px 0 #0f62fe; }
.panes { display:flex; gap:24px; }
.accordion { flex:1 1 auto; border-top:1px solid #e0e0e0; }
.acc-item { height:40px; display:flex; align-items:center; justify-content:space-between;
padding:0 16px 0 0; border-bottom:1px solid #e0e0e0; font-size:16px; font-weight:400; color:#161616; }
.acc-item span.chev { color:#525252; font-size:14px; }
.side { width:264px; border:1px solid #c6c6c6; border-radius:4px; padding:20px; background:#ffffff; }
.side-label { font-size:12px; font-weight:400; letter-spacing:0.32px; text-transform:uppercase;
color:#525252; margin:0 0 8px; }
.side-case { font-size:16px; font-weight:600; color:#161616; margin:0 0 6px; }
.side-status { display:inline-flex; align-items:center; gap:6px; font-size:14px; color:#0f62fe; }
.side-dot { width:8px; height:8px; background:#0f62fe; }
.side-meta { margin-top:16px; font-size:14px; color:#525252; line-height:20px; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #c6c6c6; padding:14px 40px;
display:flex; justify-content:space-between; font-size:12px; color:#525252; background:#ffffff; }
</style></head>
<body>
<div class="shell">
<div class="shell-left">
<div class="shell-mark"></div>
<span class="shell-name">IBM</span>
</div>
<div class="shell-nav"><span>Cloud</span><span>Data & AI</span><span>Automation</span><span>Support</span></div>
<div class="shell-right"><span>EN</span><div class="shell-dot">JD</div></div>
</div>
<div class="content">
<p class="crumb">Products / Cloud Support</p>
<h1>Support built around your infrastructure</h1>
<p class="lede">One interface for cases, entitlements, and product health across your Cloud estate.</p>
<div class="cta-row">
<button class="cta-primary">Open a case</button>
<span class="cta-link">View documentation →</span>
</div>
<div class="tabs">
<div class="tab selected">Overview</div>
<div class="tab">Entitlements</div>
<div class="tab">Health</div>
</div>
<div class="panes">
<div class="accordion">
<div class="acc-item"><span>Case status and history</span><span class="chev">›</span></div>
<div class="acc-item"><span>Entitlement and coverage detail</span><span class="chev">›</span></div>
<div class="acc-item"><span>Known issues for this product</span><span class="chev">›</span></div>
</div>
<div class="side">
<p class="side-label">Open case</p>
<p class="side-case">Case #48213</p>
<span class="side-status"><span class="side-dot"></span>In progress</span>
<p class="side-meta">Assigned to Cloud Support · Updated 2 hours ago</p>
</div>
</div>
</div>
<footer>
<span>© IBM</span>
<span>IBM · Support · Documentation · Status</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #108474; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Lato',Arial,sans-serif; background:#ffffff; color:#3a3a3a; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;background:#111111;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Nunito Sans',Arial,sans-serif;font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:22px;font-family:'Nunito Sans',Arial,sans-serif;font-size:14px;font-weight:600;color:#fff;}
.navlinks span:first-child{color:#aaccaa;border-bottom:2px solid #aaccaa;padding-bottom:20px;}
.hero{height:230px;background:#111111;display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;}
.heroText h1{font-family:'Nunito Sans',Arial,sans-serif;font-size:34px;font-weight:700;color:#fff;margin:0 0 12px;letter-spacing:-0.3px;}
.heroText p{font-size:14px;color:#dedede;margin:0 0 18px;max-width:380px;}
.cta{display:inline-block;background:#108474;color:#fff;font-family:'Nunito Sans',Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:14px 28px;border-radius:8px;}
.bag{position:absolute;right:100px;top:60px;width:130px;height:110px;border-radius:6px 6px 16px 16px;background:linear-gradient(160deg,#707977,#111111);}
.strap{position:absolute;right:110px;top:36px;width:20px;height:40px;border:3px solid #aaccaa;border-bottom:none;border-radius:10px 10px 0 0;}
.sec{padding:20px 32px 0;}
.secTitle{font-family:'Nunito Sans',Arial,sans-serif;font-size:18px;font-weight:600;color:#111111;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;border:1px solid #eeeeee;border-radius:4px;padding:14px;}
.thumb{height:90px;background:#f9f9f9;border-radius:4px;margin-bottom:10px;position:relative;overflow:hidden;}
.bagmini{position:absolute;left:64px;top:14px;width:70px;height:64px;border-radius:4px 4px 12px 12px;}
.material{display:inline-block;color:#707977;font-size:11px;border:1px solid #aaccaa;border-radius:4px;padding:3px 8px;margin-bottom:8px;}
.ctitle{font-family:'Nunito Sans',Arial,sans-serif;font-size:16px;font-weight:600;color:#111111;margin-bottom:6px;}
.cprice{font-family:'Nunito Sans',Arial,sans-serif;font-size:16px;font-weight:700;color:#111111;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#111111;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#aaccaa;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Waterfield Designs</div>
<div class="navlinks"><span>Bags</span><span>Cases</span><span>Accessories</span></div>
</div>
<div class="hero">
<div class="heroText">
<h1>Hand-Cut in<br>San Francisco</h1>
<p>Waxed canvas and full-grain leather, built to carry your gear for decades.</p>
<div class="cta">Shop Bags</div>
</div>
<div class="bag"></div><div class="strap"></div>
</div>
<div class="sec">
<div class="secTitle">Featured Carriers</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="bagmini" style="background:linear-gradient(160deg,#707977,#111111)"></div></div><div class="material">Waxed Canvas</div><div class="ctitle">Muzetto Leather Bag</div><div class="cprice">$399</div></div>
<div class="card"><div class="thumb"><div class="bagmini" style="background:linear-gradient(160deg,#3a3a3a,#111111)"></div></div><div class="material">Full-Grain Leather</div><div class="ctitle">Cargo Backpack</div><div class="cprice">$349</div></div>
<div class="card"><div class="thumb"><div class="bagmini" style="background:linear-gradient(160deg,#aaccaa,#707977)"></div></div><div class="material">Kodra Nylon</div><div class="ctitle">Tech Folio Sleeve</div><div class="cprice">$99</div></div>
</div>
</div>
<div class="footer"><span>Made in San Francisco Since 1990</span><span>Lifetime Guarantee</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #bd2426; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #163959; color: #ffffff;
border: 1px solid #bd2426; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #272727;
border: 1px solid #c9c9c9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #9bca3e; color: #516b1d;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ebebeb; font-family:Arial,'Helvetica Neue',sans-serif; color:#272727; }
*{box-sizing:border-box;}
.nav{height:60px;background:#163959;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:20px;font-weight:700;color:#fff;text-transform:uppercase;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#fff;}
.navlinks .active{border-bottom:2px solid #bd2426;padding-bottom:4px;}
.hero{height:150px;background:#163959;display:flex;align-items:center;padding:0 30px;}
.hero h1{color:#fff;font-size:32px;font-weight:700;line-height:1.1;letter-spacing:-.5px;margin:0;}
.hero span{color:#0051c3;}
.filters{display:flex;gap:8px;padding:14px 30px 0;}
.pill{background:#ebebeb;color:#404040;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;border-radius:9999px;padding:8px 16px;}
.pill.active{background:#163959;color:#fff;}
.grid{display:flex;gap:14px;padding:16px 30px 0;}
.card{width:150px;background:#fff;border:1px solid #dedede;border-radius:8px;padding:8px;position:relative;}
.thumb{aspect-ratio:2/3;border-radius:6px;margin-bottom:8px;position:relative;overflow:hidden;border:3px solid #163959;}
.stripe{position:absolute;top:0;left:0;right:0;height:14px;}
.badge{position:absolute;top:8px;left:8px;background:#bd2426;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;border-radius:4px;padding:2px 6px;z-index:2;}
.sport{display:inline-block;background:#9bca3e;color:#516b1d;font-size:9px;font-weight:700;text-transform:uppercase;border-radius:4px;padding:2px 6px;margin-bottom:4px;}
.ptitle{font-size:13px;font-weight:700;color:#272727;line-height:1.3;}
.pprice{font-size:18px;font-weight:700;color:#bd2426;margin-top:4px;}
.rowlabel{padding:4px 30px 0;font-size:11px;font-weight:700;color:#737373;text-transform:uppercase;}
</style>
<div class="nav">
<div class="logo">Topps</div>
<div class="navlinks"><div class="active">Baseball</div><div>Basketball</div><div>Football</div><div>Soccer</div></div>
</div>
<div class="hero"><h1>2024 Chrome <span>Baseball</span> is here.</h1></div>
<div class="filters"><div class="pill active">All</div><div class="pill">Rookies</div><div class="pill">Autos</div><div class="pill">Sealed</div></div>
<div class="rowlabel">Featured</div>
<div class="grid">
<div class="card"><span class="badge">Hot</span><div class="thumb" style="background:linear-gradient(160deg,#9bca3e,#163959)"><div class="stripe" style="background:#bd2426"></div></div><span class="sport">Baseball</span><div class="ptitle">2024 Chrome Hobby Box</div><div class="pprice">$219.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#f68b1f,#163959)"><div class="stripe" style="background:#163959"></div></div><span class="sport" style="background:#f68b1f;color:#904b06">Basketball</span><div class="ptitle">Prizm Blaster Box</div><div class="pprice">$89.99</div></div>
<div class="card"><span class="badge" style="background:#0051c3">Graded</span><div class="thumb" style="background:linear-gradient(160deg,#0051c3,#163959)"><div class="stripe" style="background:#f68b1f"></div></div><span class="sport">Baseball</span><div class="ptitle">PSA 10 Rookie Card</div><div class="pprice">$449.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#163959,#9bca3e)"><div class="stripe" style="background:#bd2426"></div></div><span class="sport" style="background:#f68b1f;color:#904b06">Soccer</span><div class="ptitle">World Cup Sticker Set</div><div class="pprice">$14.99</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5356ee; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5356ee; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #acadf2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5356ee; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5356ee; color: #f5f5f5;
border: 1px solid #6d6fef; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #acadf2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #6f71f1; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Averta", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; padding:0 32px; border-bottom:1px solid #eeeeee; }
.brand { font-size:17px; font-weight:600; margin:0; color:#222222; }
.navlinks { display:flex; gap:20px; margin-left:30px; }
.navlinks span { font-size:14px; color:#222222; }
.sell-btn { margin-left:auto; background:#ffffff; color:#222222; border:1.5px solid #5356ee; border-radius:4px;
height:32px; padding:0 16px; display:flex; align-items:center; font-size:14px; font-weight:600; }
.toolbar { display:flex; align-items:center; gap:12px; padding:14px 32px 4px; }
.searchbar { flex:1; height:36px; border:1px solid #dddddd; border-radius:4px; display:flex; align-items:center;
padding:0 14px; font-size:13px; color:#6b6b6b; max-width:320px; }
.sell-cta { margin-left:auto; background:#5356ee; color:#ffffff; border-radius:4px; height:32px; padding:0 16px;
display:flex; align-items:center; font-size:14px; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; padding:14px 32px 20px; }
.listing { display:flex; flex-direction:column; gap:6px; }
.thumb { width:100%; aspect-ratio:1/1; border-radius:8px; }
.thumb.a{background:linear-gradient(140deg,#dfe0fb,#5356ee);} .thumb.b{background:linear-gradient(140deg,#f0eee6,#c9c2a8);}
.thumb.c{background:linear-gradient(140deg,#e6f0ea,#8fbf9f);} .thumb.d{background:linear-gradient(140deg,#f5e3e6,#e6a0ad);}
.thumb.e{background:linear-gradient(140deg,#e8e8ea,#9a9aa0);}
.listing .t { font-size:13px; color:#222222; line-height:1.3; height:34px; overflow:hidden; }
.listing .p { font-size:14px; font-weight:600; color:#222222; }
.listing .like { font-size:11px; color:#6b6b6b; }
.footer-strip { display:flex; gap:16px; padding:10px 32px; border-top:1px solid #eeeeee; }
.footer-strip .item { font-size:12px; color:#6b6b6b; }
</style></head>
<body>
<nav>
<p class="brand">Mercari</p>
<div class="navlinks"><span>Home</span><span>Categories</span><span>Saved</span><span>Inbox</span></div>
<div class="sell-btn">Sign in</div>
</nav>
<div class="toolbar">
<div class="searchbar">Search for items</div>
<div class="sell-cta">Sell now</div>
</div>
<div class="grid">
<div class="listing"><div class="thumb a"></div><span class="t">Ceramic table lamp, cream shade</span><span class="p">$24</span><span class="like">♡ 12</span></div>
<div class="listing"><div class="thumb b"></div><span class="t">Vintage denim jacket, size M</span><span class="p">$38</span><span class="like">♡ 31</span></div>
<div class="listing"><div class="thumb c"></div><span class="t">Potted snake plant, 10in</span><span class="p">$16</span><span class="like">♡ 8</span></div>
<div class="listing"><div class="thumb d"></div><span class="t">Kids bicycle, 16in wheels</span><span class="p">$45</span><span class="like">♡ 19</span></div>
<div class="listing"><div class="thumb e"></div><span class="t">Cast-iron skillet, 10in</span><span class="p">$22</span><span class="like">♡ 5</span></div>
<div class="listing"><div class="thumb b"></div><span class="t">Board game bundle, family pack</span><span class="p">$18</span><span class="like">♡ 14</span></div>
<div class="listing"><div class="thumb a"></div><span class="t">Wool throw blanket, gray</span><span class="p">$27</span><span class="like">♡ 9</span></div>
<div class="listing"><div class="thumb c"></div><span class="t">Hardcover book set, mystery</span><span class="p">$14</span><span class="like">♡ 3</span></div>
<div class="listing"><div class="thumb d"></div><span class="t">Leather crossbody bag</span><span class="p">$32</span><span class="like">♡ 22</span></div>
<div class="listing"><div class="thumb e"></div><span class="t">Desk organizer set</span><span class="p">$12</span><span class="like">♡ 4</span></div>
</div>
<div class="footer-strip"><span class="item">Shipping calculated at checkout</span><span class="item">Buyer protection included</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8fafa; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8fafa; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 300; line-height: 1.2; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #647b7d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: 0.06em; background: #647b7d; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: 0.06em; background: transparent; color: #1a1a1a;
border: 1px solid #647b7d; border-radius: 0px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8fafa; color: #1a1a1a;
border: 1px solid #c0c2c2; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #647b7d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 500; line-height: 1.4; letter-spacing: 0.12em; background: #dae2e2; color: #1a1a1a;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8fafa; color:#1a1a1a; box-sizing:border-box;
font-family:'Basel Grotesk',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #eaeaea; }
.brand { font-family:'Frame Head',Georgia,serif; font-size:19px; font-weight:300; letter-spacing:0.5px; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:12px; letter-spacing:0.04em; color:#1a1a1a; }
.navlinks span.active { color:#647b7d; border-bottom:1px solid #647b7d; padding-bottom:18px; }
.hero { padding:48px 32px 32px; }
.headline { font-family:'Frame Head',Georgia,serif; font-size:48px; font-weight:300; letter-spacing:-0.5px;
line-height:1.1; max-width:640px; margin-bottom:8px; }
.sub { font-size:12px; letter-spacing:0.04em; color:#647b7d; text-transform:uppercase; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:16px 32px 0; }
.exCard { }
.exPhoto { aspect-ratio:3/2; margin-bottom:12px; }
.e1 .exPhoto { background:linear-gradient(140deg,#dae2e2,#b2c4c5); }
.e2 .exPhoto { background:linear-gradient(140deg,#647b7d,#2e3f40); }
.exLabel { font-size:10px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:#647b7d; margin-bottom:6px; }
.exTitle { font-family:'Frame Head',Georgia,serif; font-size:22px; font-weight:300; margin-bottom:4px; }
.exMeta { font-size:11px; color:#647b7d; letter-spacing:0.03em; }
.artistRow { display:flex; gap:24px; padding:28px 32px 0; border-top:1px solid #eaeaea; margin-top:28px; }
.artist { flex:1; }
.artistPhoto { aspect-ratio:4/5; margin-bottom:8px; }
.a1 .artistPhoto { background:linear-gradient(140deg,#b2c4c5,#647b7d); }
.a2 .artistPhoto { background:linear-gradient(140deg,#dae2e2,#8fa5a6); }
.a3 .artistPhoto { background:linear-gradient(140deg,#647b7d,#3a4f50); }
.a4 .artistPhoto { background:linear-gradient(140deg,#c9d5d5,#94a8a9); }
.artistName { font-family:'Frame Head',Georgia,serif; font-size:16px; font-weight:300; }
.artistSub { font-size:11px; color:#647b7d; margin-top:2px; }
</style></head>
<body>
<nav>
<div class="brand">Gladstone Gallery</div>
<div class="navlinks">
<span class="active">Artists</span><span>Exhibitions</span><span>Fairs</span><span>Press</span>
</div>
</nav>
<div class="hero">
<div class="headline">Current Exhibitions</div>
<div class="sub">New York — Brussels — Seoul</div>
</div>
<div class="grid2">
<div class="exCard e1">
<div class="exPhoto"></div>
<div class="exLabel">Current Exhibition</div>
<div class="exTitle">Interior Weather</div>
<div class="exMeta">Sept 4 — Oct 18, 2026</div>
</div>
<div class="exCard e2">
<div class="exPhoto"></div>
<div class="exLabel">Upcoming</div>
<div class="exTitle">Field Notations</div>
<div class="exMeta">Oct 24 — Dec 6, 2026</div>
</div>
</div>
<div class="artistRow">
<div class="artist a1"><div class="artistPhoto"></div><div class="artistName">Mira Solheim</div><div class="artistSub">Painting, Oslo</div></div>
<div class="artist a2"><div class="artistPhoto"></div><div class="artistName">Tomas Reyes</div><div class="artistSub">Sculpture, Lima</div></div>
<div class="artist a3"><div class="artistPhoto"></div><div class="artistName">Amara Voss</div><div class="artistSub">Textile, Berlin</div></div>
<div class="artist a4"><div class="artistPhoto"></div><div class="artistName">Elin Park</div><div class="artistSub">Photography, Seoul</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5500; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5500; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5500; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5500; color: #f5f5f5;
border: 1px solid #fd6f27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff7029; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#333333; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.np { padding:26px 40px; text-align:center; }
.cover { width:220px; height:220px; margin:0 auto; border-radius:6px; background:linear-gradient(135deg,#ffb199,#ff5500);
box-shadow: rgba(0,0,0,0.18) 0 12px 32px; }
.track { font-size:22px; font-weight:700; margin-top:16px; }
.artist { font-size:14px; color:#999; margin-top:2px; }
.wave { display:flex; align-items:flex-end; gap:1.5px; height:64px; margin:18px 40px 4px; }
.bar { width:1.5px; background:#FF7700; opacity:.45; }
.bar.played { opacity:1; background:#FF5500; }
.time-row { display:flex; justify-content:space-between; padding:0 40px; font-size:11px; color:#999; }
.transport { display:flex; align-items:center; justify-content:center; gap:26px; margin-top:14px; }
.tr-ic { font-size:20px; color:#333; }
.play { width:64px; height:64px; border-radius:50%; background:#FF5500; display:flex; align-items:center; justify-content:center;
color:#fff; font-size:24px; box-shadow: rgba(255,85,0,0.32) 0 6px 20px; }
.actionbar { display:flex; justify-content:center; gap:30px; margin-top:14px; font-size:13px; color:#999; }
.actionbar .on { color:#FF5500; }
.comments { padding:20px 40px; }
.c-hdr { font-size:13px; font-weight:700; color:#999; margin-bottom:10px; }
.c-row { display:flex; gap:10px; align-items:center; margin-top:8px; }
.c-av { width:28px; height:28px; border-radius:50%; }
.ts-chip { font-size:11px; font-weight:500; color:#FF5500; }
.c-body { font-size:14px; }
</style></head>
<body>
<div style="position:absolute; top:10px; left:16px; font-size:10px; font-weight:700; color:#FF5500; letter-spacing:.3px; text-transform:uppercase;">SoundCloud (iOS)</div>
<div class="np">
<div class="cover"></div>
<div class="track">Never Be Like You</div>
<div class="artist">flume</div>
</div>
<div style="display:flex; align-items:flex-end; gap:1.5px; height:64px; margin:0 40px 4px;">
<div style="display:flex;flex:1;gap:1.5px;align-items:flex-end;">
<div class="bar played" style="height:30%"></div><div class="bar played" style="height:60%"></div><div class="bar played" style="height:40%"></div>
<div class="bar played" style="height:80%"></div><div class="bar played" style="height:50%"></div><div class="bar played" style="height:70%"></div>
<div class="bar played" style="height:35%"></div><div class="bar played" style="height:65%"></div><div class="bar played" style="height:45%"></div>
<div class="bar played" style="height:75%"></div><div class="bar played" style="height:55%"></div>
<div class="bar" style="height:40%"></div><div class="bar" style="height:70%"></div><div class="bar" style="height:30%"></div>
<div class="bar" style="height:60%"></div><div class="bar" style="height:50%"></div><div class="bar" style="height:80%"></div>
<div class="bar" style="height:35%"></div><div class="bar" style="height:65%"></div><div class="bar" style="height:45%"></div>
</div>
</div>
<div class="time-row"><span>1:23</span><span>-2:09</span></div>
<div class="transport"><span class="tr-ic">🔀</span><span class="tr-ic">⏮</span><div class="play">▶</div><span class="tr-ic">⏭</span><span class="tr-ic">🔁</span></div>
<div class="actionbar"><span class="on">♥ 1,204</span><span>🔁 312</span><span>💬 84</span><span>↗</span></div>
<div class="comments">
<div class="c-hdr">Comments</div>
<div class="c-row"><div class="c-av" style="background:linear-gradient(135deg,#89b,#456);"></div><span class="ts-chip">@1:24</span><span class="c-body">that drop though 🔥</span></div>
<div class="c-row"><div class="c-av" style="background:linear-gradient(135deg,#e9a,#c56);"></div><span class="ts-chip">@2:03</span><span class="c-body">on repeat all week</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0061ef; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0061ef; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b2f2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff7300; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0061ef; color: #ffffff;
border: 1px solid #ff7300; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0061ef; color: #f5f5f5;
border: 1px solid #2779f0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b2f2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #2964c9; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9f4f2; color:#2d2c2b; box-sizing:border-box;
font-family:"Apercu","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
background:#ffffff; }
.logo { font-size:20px; font-weight:700; display:flex; align-items:center; gap:8px; }
.logo .dot { width:22px; height:22px; border-radius:50%; background:#ff7300; }
.navlinks { display:flex; gap:22px; font-size:15px; color:#44423f; }
.btn-primary { background:#0061ef; color:#ffffff; border-radius:32px; padding:12px 22px; font-size:14px;
font-weight:700; }
.hero { text-align:center; padding:32px 40px 22px; }
.hero h1 { font-size:48px; font-weight:700; line-height:1.0; letter-spacing:-1.2px; margin:0 0 12px; }
.hero p { font-size:16px; color:#4b4c4d; margin:0 0 18px; max-width:480px; margin-left:auto; margin-right:auto; }
.row { display:flex; gap:10px; justify-content:center; }
.btn-dark { background:#2d2c2b; color:#ffffff; border-radius:32px; padding:14px 20px; font-size:16px; font-weight:700; }
.btn-soft { background:#f9f4f2; color:#44423f; border-radius:32px; padding:12px 24px; font-size:16px; font-weight:700;
border:1px solid #e2ded9; }
.chips { display:flex; gap:10px; justify-content:center; padding:0 40px 20px; }
.chip { border-radius:8px; padding:8px 14px; font-size:13px; font-weight:500; color:#ffffff; }
.chip.o1 { background:#ff7300; }
.chip.o2 { background:#ffa500; color:#000000; }
.chip.o3 { background:#3b197f; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 40px 24px; }
.card { border-radius:24px; padding:18px; }
.card.cream { background:#ffffff; }
.card.blue { background:#0061ef; color:#ffffff; }
.card.gold { background:#ffce00; color:#000000; }
.card h3 { font-size:16px; font-weight:700; margin:0 0 6px; }
.card p { font-size:12px; margin:0; opacity:0.85; }
footer { text-align:center; padding:12px 40px; font-size:12px; color:#44423f; }
</style></head>
<body>
<nav>
<span class="logo"><span class="dot"></span>Headspace</span>
<div class="navlinks"><span>Meditation</span><span>Sleep</span><span>Mindfulness</span></div>
<span class="btn-primary">Try for free</span>
</nav>
<section class="hero">
<h1>Be kind to your mind</h1>
<p>Live a healthier, happier, more well-rested life in just a few minutes a day.</p>
<div class="row">
<button class="btn-dark">Try for $0</button>
<button class="btn-soft">Learn more</button>
</div>
</section>
<div class="chips">
<span class="chip o1">Sleep</span>
<span class="chip o2">Meditate</span>
<span class="chip o3">Move</span>
</div>
<div class="cards">
<div class="card cream"><h3>Guided meditations</h3><p>Short daily sessions for every mood.</p></div>
<div class="card blue"><h3>Sleep resources</h3><p>Sleepcasts and soundscapes to wind down.</p></div>
<div class="card gold"><h3>Online therapy</h3><p>Clinician-led care when you need it most.</p></div>
</div>
<footer>© Headspace · The mental health app for every moment</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #272d45; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #fefefe; color: #272d45;
border: 1px solid #272d45; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fefefe; color: #121212;
border: 1px solid #c3c3c3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 10px; font-weight: 500; line-height: 1.2; letter-spacing: 0.8px; background: #ffcf2a; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fefefe; color:#121212; font-family:Figtree,Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e6e6e6;}
.logo{font-family:'ABCRepro-Regular',Georgia,serif;font-size:19px;}
.navlinks{display:flex;gap:20px;font-size:13px;letter-spacing:.5px;text-transform:uppercase;}
.navlinks .active{color:#272d45;border-bottom:2px solid #272d45;padding-bottom:22px;}
.hero{padding:44px 36px 30px;text-align:center;}
.hero h1{font-family:'ABCRepro-Regular',Georgia,serif;font-size:38px;font-weight:400;letter-spacing:-.8px;margin:0 0 12px;}
.hero p{font-size:14px;color:#666;margin:0 0 16px;}
.cta{display:inline-block;background:#272d45;color:#fff;font-size:14px;letter-spacing:.5px;text-transform:uppercase;padding:13px 28px;border-radius:8px;}
.grid{display:flex;gap:16px;padding:14px 36px;justify-content:center;}
.card{width:190px;background:#fff;border-radius:4px;}
.thumb{height:150px;background:#f4f4f6;border-radius:4px 4px 0 0;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#ffcf2a;color:#121212;font-family:'ABCReproMono-Medium',monospace;font-size:9px;letter-spacing:.5px;text-transform:uppercase;padding:3px 7px;border-radius:4px;}
.ptitle{font-family:'ABCRepro-Regular',Georgia,serif;font-size:14px;padding:8px 4px 2px;text-align:center;}
.pprice{font-size:13px;color:#666;padding-bottom:8px;text-align:center;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#f4f4f6;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:12px;color:#666;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Phlur</div>
<div class="navlinks"><div class="active">Fragrance</div><div>Discovery Set</div><div>Refillable</div><div>Journal</div></div>
</div>
<div class="hero">
<h1>Scent, quietly confident.</h1>
<p>Modern fine fragrance formulated with clean ingredients and no compromise.</p>
<div class="cta">Shop Fragrance</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#2e3192,#df6980)"><div class="badge">New</div></div><div class="ptitle">Missing Person</div><div class="pprice">$98</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#0e7a82,#a45cec)"></div><div class="ptitle">Not a Trace</div><div class="pprice">$98</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#334fb4,#ffcf2a)"></div><div class="ptitle">Ouai Body</div><div class="pprice">$72</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#df6980,#0881b0)"></div><div class="ptitle">Discovery Set</div><div class="pprice">$40</div></div>
</div>
<div class="footer"><span>© Phlur · Clean Fragrance</span><span>Ingredients · Refill Program</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #209cff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #209cff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff874d; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #209cff; color: #000000;
border: 1px solid #ff874d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #209cff; color: #f5f5f5;
border: 1px solid #42aafd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4499e3; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#333333; box-sizing:border-box;
font-family:"PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.nav { height:56px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.nav .brand { font-weight:700; font-size:18px; color:#209cff; }
.nav .links { display:flex; gap:22px; font-size:16px; }
.nav .links .cur { font-weight:700; }
.nav .links .off { color:#666; font-weight:400; }
.search { width:200px; height:36px; border:1px solid #cbcbcb; border-radius:4px; padding:0 10px; font-size:13px; color:#686868;
display:flex; align-items:center; }
.hero { margin:18px 28px 0; height:180px; border-radius:20px; background:linear-gradient(120deg,#209cff,#5cbcff);
display:flex; align-items:center; justify-content:space-between; padding:0 40px; color:#fff; position:relative; overflow:hidden; }
.hero::after { content:''; position:absolute; right:-40px; top:-40px; width:220px; height:220px; border-radius:50%;
background:rgba(255,255,255,0.15); }
.hero h1 { font-size:32px; font-weight:700; margin:0 0 8px; line-height:1.4; position:relative; z-index:2; }
.hero p { font-size:16px; margin:0; opacity:0.95; position:relative; z-index:2; }
.herobtn { background:#fff; color:#209cff; border-radius:100px; height:50px; padding:0 35px; font-size:16px; font-weight:700;
display:flex; align-items:center; position:relative; z-index:2; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:22px 28px 0; }
.card { background:#fff; border-radius:16px; padding:20px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,0.08); position:relative; }
.card .ic { width:44px; height:44px; border-radius:12px; margin:0 auto 10px; }
.i1{background:#e4f2ff;} .i2{background:#fff0e6;} .i3{background:#e4f2ff;} .i4{background:#fff0e6;}
.card h4 { font-size:15px; font-weight:700; margin:0 0 4px; }
.card p { font-size:12px; color:#666; margin:0; }
.badge { position:absolute; top:12px; right:12px; background:#ff874d; color:#fff; font-size:10px; font-weight:700;
border-radius:4px; padding:2px 6px; }
</style></head>
<body>
<nav class="nav">
<div class="brand">Chunghwa Telecom</div>
<div class="links"><span class="cur">Personal & Home</span><span class="off">Business Services</span><span class="off">International Services</span><span class="off">About Us</span></div>
<div class="search">Search services…</div>
</nav>
<div class="hero">
<div>
<h1>5G Unlimited Data<br>Limited-Time Offer</h1>
<p>New sign-ups get up to NT$8,000 off a phone</p>
</div>
<div class="herobtn">Learn More</div>
</div>
<div class="cards">
<div class="card"><div class="ic i1"></div><h4>5G Mobile Network</h4><p>Unlimited Plan</p></div>
<div class="card"><span class="badge">Limited</span><div class="ic i2"></div><h4>HiNet Fiber</h4><p>Up to 1G speed</p></div>
<div class="card"><div class="ic i3"></div><h4>MOD Streaming</h4><p>4K Channel Package</p></div>
<div class="card"><div class="ic i4"></div><h4>Enterprise Cloud</h4><p>ICT Integrated Services</p></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2a72e5; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2a72e5; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9abaee; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0957c8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2a72e5; color: #000000;
border: 1px solid #0957c8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2a72e5; color: #f5f5f5;
border: 1px solid #4a87e8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9abaee; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #256ee0; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#262626; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; overflow:hidden; background:#ffffff; }
nav { height:52px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #e1e1e1; }
.navleft { display:flex; align-items:center; gap:22px; }
.brand { font-size:15px; font-weight:700; color:#262626; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; font-weight:600; color:#4c4c4c; }
.navright { display:flex; align-items:center; gap:10px; }
.btn-outline { background:#ffffff; color:#262626; box-shadow:rgb(198,198,198) 0px 0px 0px 1px inset;
border:none; border-radius:8px; padding:0 14px; height:32px; font-size:13px; font-weight:500; }
.btn-cta-dark { background:#262626; color:#ffffff; border:none; border-radius:8px; padding:0 16px; height:32px;
font-size:13px; font-weight:500; }
main { flex:1 1 auto; display:flex; overflow:hidden; }
.files { width:178px; flex:0 0 auto; background:#f7f7f7; border-right:1px solid #e1e1e1; padding:14px 10px;
display:flex; flex-direction:column; gap:2px; overflow:hidden; }
.files .grouplabel { font-size:11px; font-weight:700; color:#a3a3a3; text-transform:uppercase; letter-spacing:0.05em;
padding:4px 8px 6px; }
.fitem { font-size:13px; color:#4c4c4c; padding:6px 8px; border-radius:6px; }
.fitem.on { background:#e1e1e1; color:#262626; font-weight:600; box-shadow:rgb(42,114,229) 3px 0 0 0 inset; }
.editor { flex:1 1 auto; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.toolbar { height:44px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
padding:0 20px; border-bottom:1px solid #e1e1e1; }
.tabs { display:flex; gap:20px; height:100%; }
.tab { display:flex; align-items:center; font-size:13px; font-weight:500; color:#4c4c4c; height:100%; }
.tab.on { color:#0957c8; box-shadow:#0957c8 0 -2px 0 0 inset; font-weight:600; }
.toolbtns { display:flex; gap:8px; }
.btn-secondary { background:#e1e1e1; color:#262626; border:none; border-radius:8px; padding:0 14px; height:30px;
font-size:13px; font-weight:500; }
.btn-primary { background:#2a72e5; color:#ffffff; border:none; border-radius:8px; padding:0 14px; height:30px;
font-size:13px; font-weight:500; }
.code { flex:1 1 auto; display:flex; padding:16px 0; overflow:hidden; font-family:Menlo,Consolas,monospace;
font-size:13px; line-height:1.9; }
.gutter { width:38px; flex:0 0 auto; text-align:right; padding-right:12px; color:#a3a3a3; }
.lines { flex:1 1 auto; color:#262626; white-space:pre; }
.kw { color:#0043b3; font-weight:700; }
.fn { color:#0957c8; }
.str { color:#058765; }
.cm { color:#a3a3a3; font-style:italic; }
.term { flex:0 0 auto; height:132px; background:#262626; padding:12px 24px; display:flex; flex-direction:column;
gap:8px; overflow:hidden; }
.term-head { display:flex; align-items:center; justify-content:space-between; }
.term-head span { font-size:12px; font-weight:700; color:#a3a3a3; text-transform:uppercase; letter-spacing:0.06em; }
.badges { display:flex; gap:8px; }
.badge { border-radius:9999px; padding:3px 11px; font-size:12px; font-weight:500; }
.badge.info { background:#c6e6ff; color:#0043b3; }
.badge.success { background:#bbecd7; color:#058765; }
.badge.warn { background:#ffd9c8; color:#a3401a; }
.term-lines { font-family:Menlo,Consolas,monospace; font-size:12.5px; color:#e1e1e1; line-height:1.7; }
.term-lines .p { color:#5d5d5d; }
</style></head>
<body>
<div class="page">
<nav>
<div class="navleft">
<p class="brand">goorm</p>
<div class="navlinks"><span>Product</span><span>Docs</span><span>Pricing</span></div>
</div>
<div class="navright">
<button class="btn-outline">View Docs</button>
<button class="btn-cta-dark">Get Started</button>
</div>
</nav>
<main>
<div class="files">
<span class="grouplabel">Project</span>
<div class="fitem">src</div>
<div class="fitem on"> main.ts</div>
<div class="fitem"> server.ts</div>
<div class="fitem"> utils.ts</div>
<div class="fitem">tests</div>
<div class="fitem">package.json</div>
<div class="fitem">README.md</div>
</div>
<div class="editor">
<div class="toolbar">
<div class="tabs"><span class="tab on">Code</span><span class="tab">Preview</span></div>
<div class="toolbtns">
<button class="btn-secondary">Cancel</button>
<button class="btn-primary">Save</button>
</div>
</div>
<div class="code">
<div class="gutter">1<br>2<br>3<br>4<br>5<br>6</div>
<div class="lines"><span class="cm">// greet a new learner</span><br><span class="kw">function</span> <span class="fn">greet</span>(name) {<br> <span class="kw">return</span> <span class="str">`Hello, ${name}! Welcome aboard.`</span>;<br>}<br><br><span class="fn">greet</span>(<span class="str">"Alex"</span>);</div>
</div>
</div>
</main>
<div class="term">
<div class="term-head">
<span>Terminal</span>
<div class="badges">
<span class="badge success">Build passed</span>
<span class="badge info">Deploy queued</span>
<span class="badge warn">1 warning</span>
</div>
</div>
<div class="term-lines">
<span class="p">$</span> npm run build<br>
<span class="p">$</span> compiled 42 modules in 1.8s — ready on port 8080
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #d63384;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #d63384;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #d63384; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #75b798; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #ffc720; color: #373b3e;
border: none; border-radius: 8px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #ffffff; color: #0d6efd;
border: 1px solid #ffc720; border-radius: 8px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #373b3e;
border: 1px solid #f5cce0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #75b798; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffc720; color: #373b3e;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:system-ui, 'Segoe UI', Roboto, Arial, sans-serif; background:#fff; color:#373b3e; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #dfe0e1;}
.logo{font-size:19px;font-weight:700;color:#373b3e;}
.logo span{color:#ffc720;}
.navlinks{display:flex;gap:18px;font-size:14px;font-weight:500;}
.search{width:230px;height:32px;border:1px solid #dfe0e1;border-radius:4px 0 0 4px;display:flex;align-items:center;padding:0 10px;font-size:12px;color:#666;}
.hero{height:200px;background:#373b3e;display:flex;align-items:center;padding:0 30px;color:#fff;}
.headline{font-size:32px;font-weight:700;max-width:440px;line-height:1.25;}
.headline span{color:#ffc720;}
.btn{display:inline-block;background:#ffc720;color:#373b3e;font-size:15px;font-weight:600;padding:11px 22px;border-radius:8px;margin-top:14px;}
.sec{padding:16px 30px;}
.sectitle{font-size:22px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:12px;}
.card{width:210px;background:#fff;border:1px solid #dfe0e1;border-radius:8px;padding:12px;}
.thumb{aspect-ratio:1/1;background:#e2e3e5;border-radius:8px;position:relative;}
.denom{position:absolute;bottom:6px;left:6px;background:#ffc720;color:#373b3e;font-size:11px;font-weight:600;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.title{font-size:16px;font-weight:600;margin-top:10px;}
.tags{display:flex;gap:6px;margin-top:6px;}
.tag{background:#cfe2ff;color:#0a58ca;font-size:11px;padding:3px 8px;border-radius:9999px;}
.tag2{background:#e2e3e5;color:#565e64;font-size:11px;padding:3px 8px;border-radius:9999px;}
.price{font-size:18px;font-weight:600;margin-top:8px;}
.collection{margin-top:16px;background:#e6dbb9;border-radius:8px;padding:16px;}
.collection h4{margin:0 0 6px;font-size:18px;font-weight:600;}
.collection p{margin:0;font-size:14px;color:#565e64;}
</style>
<div class="nav">
<div class="logo">Mintage World</div>
<div class="navlinks"><span>Coins</span><span>Stamps</span><span>Notes</span><span>Museum</span></div>
<div class="search">Search coins, stamps, notes...</div>
</div>
<div class="hero">
<div>
<div class="headline">Archive and marketplace, <span>struck in gold</span>.</div>
<div class="btn">Browse Collection</div>
</div>
</div>
<div class="sec">
<div class="sectitle">Featured Issues</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:radial-gradient(circle,#ffe088,#d4a800 75%)"><div class="denom">1oz Gold</div></div><div class="title">1933 Double Eagle Reproduction</div><div class="tags"><span class="tag">USA</span><span class="tag2">Modern</span></div><div class="price">$1,899</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle,#e2e3e5,#9a9d9f 75%)"></div><div class="title">Victorian Penny Black Stamp</div><div class="tags"><span class="tag">UK</span><span class="tag2">Colonial</span></div><div class="price">$420</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle,#f8d7da,#b02a37 75%)"></div><div class="title">First Republic Rupee Note</div><div class="tags"><span class="tag">India</span><span class="tag2">British India</span></div><div class="price">$65</div></div>
</div>
<div class="collection"><h4>Ancient Rome Coins</h4><p>A curated series spanning denarii to solidi, verified and graded.</p></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6e6e6e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #d63021; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: transparent; color: #121212;
border: 1px solid #d63021; border-radius: 0px;
padding: 12px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6e6e6e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #d63021; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Poppins',sans-serif; color:#4d4d4d; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.announce{height:30px;background:#d63021;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;}
.nav{height:56px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:18px;font-weight:700;color:#fff;}
.navicons{display:flex;gap:16px;color:#fff;font-size:12px;}
.hero{height:200px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.herotxt{max-width:340px;}
.h1{font-size:30px;font-weight:700;letter-spacing:-0.4px;color:#fff;margin:0 0 8px;line-height:1.15;}
.sub{font-size:14px;color:#fff;opacity:0.7;margin:0;}
.countdown{background:#121212;border:1px solid #d63021;padding:10px 16px;display:flex;gap:14px;}
.cbox{text-align:center;}
.cnum{font-size:24px;font-weight:700;color:#fff;letter-spacing:1px;}
.clabel{font-size:10px;color:#8a8a8a;text-transform:uppercase;}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:210px;border:1px solid #dedede;padding:12px;position:relative;}
.thumb{height:130px;background:#f5f5f5;position:relative;overflow:hidden;}
.art{position:absolute;inset:0;background:linear-gradient(135deg,#d63021,#0073ce);}
.scrim{position:absolute;inset:0;background:rgba(18,18,18,0.72);display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;}
.editionbadge{position:absolute;top:8px;left:8px;background:#d63021;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;padding:4px 8px;z-index:2;}
.exclusivebadge{position:absolute;top:8px;left:8px;background:#121212;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;padding:4px 8px;z-index:2;}
.ctitle{font-size:15px;font-weight:600;margin:10px 0 2px;color:#121212;}
.cprice{font-size:15px;font-weight:600;color:#121212;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#dadada;font-size:11px;}
</style>
<div class="wrap">
<div class="announce">Drop Window: Members Only Access Opens Friday</div>
<div class="nav">
<div class="logo">Mondo Action F 2</div>
<div class="navicons">Search · Account · Cart (2)</div>
</div>
<div class="hero">
<div class="herotxt">
<div class="h1">Cinema lobby lighting, retail intensity.</div>
<p class="sub">The next limited drop is timed. The scarcity is the point.</p>
</div>
<div class="countdown">
<div class="cbox"><div class="cnum">02</div><div class="clabel">Days</div></div>
<div class="cbox"><div class="cnum">14</div><div class="clabel">Hrs</div></div>
<div class="cbox"><div class="cnum">37</div><div class="clabel">Min</div></div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="editionbadge">Limited Edition</span><div class="art"></div><div class="scrim">Sold Out</div></div><div class="ctitle">Screen-Print Poster, 1/6 Scale</div><div class="cprice">$95.00</div></div>
<div class="card"><div class="thumb"><span class="exclusivebadge">Exclusive</span><div class="art"></div></div><div class="ctitle">Convention Variant Figure</div><div class="cprice">$149.00</div></div>
<div class="card"><div class="thumb"><div class="art"></div></div><div class="ctitle">Director's Cut Vinyl</div><div class="cprice">$44.00</div></div>
</div>
<div class="footer"><span>Figures · Prints · Music · Apparel</span><span>© Mondo Action F 2</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.2; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.8px; background: #112233; color: #fafafa;
border: none; border-radius: 2px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.8px; background: transparent; color: #112233;
border: 1px solid #112233; border-radius: 2px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c0c0c0; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #cc3b3b; color: #fafafa;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:'Rubik','Helvetica Neue',sans-serif; color:#272727; }
*{box-sizing:border-box;}
.nav{height:62px;background:#112233;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:20px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;color:#e99292;}
.hero{height:236px;display:flex;align-items:center;padding:0 40px;background:#ffffff;border-bottom:1px solid #eee;}
.heroText{width:440px;}
.headline{font-size:32px;font-weight:700;line-height:1.2;color:#112233;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.55;color:#4a4a4a;margin:0 0 20px;max-width:370px;}
.btn{display:inline-block;background:#cc3b3b;color:#fff;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:14px 28px;border-radius:2px;}
.nib{position:absolute;right:110px;top:70px;width:60px;height:140px;background:linear-gradient(180deg,#d7d7d7,#a0a0a0);clip-path:polygon(50% 0%,100% 30%,80% 100%,20% 100%,0% 30%);}
.nibline{position:absolute;right:139px;top:70px;width:2px;height:140px;background:#cc3b3b;}
.sec{position:relative;height:314px;padding:26px 40px;}
.secTitle{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#666;margin-bottom:12px;}
.inkrow{display:flex;gap:10px;margin-bottom:18px;}
.inkdot{width:28px;height:28px;border-radius:50%;border:2px solid transparent;}
.inkdot.sel{border-color:#112233;}
.grid{display:flex;gap:14px;}
.card{width:216px;background:#fff;border:1px solid #dedede;border-radius:4px;padding:12px;}
.thumb{height:110px;border-radius:2px;margin-bottom:10px;}
.cardTitle{font-size:14px;font-weight:500;color:#111111;margin-bottom:4px;}
.cardPrice{font-size:13px;font-weight:700;color:#cc3b3b;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;background:#112233;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#e99292;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">London Pen CO</div>
<div class="navlinks"><span>Fountain Pens</span><span>Inks</span><span>Notebooks</span><span>Engraving</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">The palette of a<br>well-stocked desk.</div>
<div class="sub">Fountain pens and inks built to millimeter precision, for people who still write things down.</div>
<div class="btn">Shop Fountain Pens</div>
</div>
<div class="nibline"></div>
<div class="nib"></div>
</div>
<div class="sec">
<div class="secTitle">Choose Your Ink</div>
<div class="inkrow">
<div class="inkdot sel" style="background:#112233"></div>
<div class="inkdot" style="background:#cc3b3b"></div>
<div class="inkdot" style="background:#e99292"></div>
<div class="inkdot" style="background:#272727"></div>
<div class="inkdot" style="background:#bd0000"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#112233,#272727)"></div><div class="cardTitle">Ink-Pool Navy Pen</div><div class="cardPrice">$145.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#cc3b3b,#112233)"></div><div class="cardTitle">Bottled Ink, 50ml</div><div class="cardPrice">$18.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e99292,#272727)"></div><div class="cardTitle">Leather Pen Roll</div><div class="cardPrice">$68.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#272727,#cc3b3b)"></div><div class="cardTitle">Engraved Nib Set</div><div class="cardPrice">$210.00</div></div>
</div>
</div>
<div class="footer"><span>© Precision Writing Instruments</span><span>Nib Engraving Guide</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #03c75a; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #03c75a; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #03c75a; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #03c75a; color: #000000;
border: 1px solid #2ace73; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #11b772; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c1c1c; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
.searchBar { padding:18px 40px 0; }
.logoRow { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.logoMark { width:26px; height:26px; border-radius:7px; background:#03c75a; }
.brand { font-size:16px; font-weight:700; color:#2e2e2e; margin:0; }
.searchAssembly { height:58px; border-bottom:2px solid #03c75a; display:flex; align-items:center; padding:0 4px; }
.queryText { flex:1; font-size:21px; font-weight:700; color:#000000; letter-spacing:-0.4px; }
.submitIcon { width:36px; height:36px; border-radius:9999px; background:#f2f2f2; display:flex; align-items:center;
justify-content:center; color:#2e2e2e; font-size:12px; }
.tabs { display:flex; gap:4px; padding:10px 36px 0; border-bottom:1px solid #e5e5e5; }
.tab { padding:6px 12px 14px; font-size:16px; font-weight:600; color:#8c8c8c; }
.tab.active { color:#1c1c1c; border-bottom:2px solid #03c75a; }
main { display:flex; gap:28px; padding:18px 36px 0; height:400px; }
.colLeft { flex:1; }
.chipsRow { display:flex; gap:8px; margin-bottom:14px; }
.chip { background:#ffffff; color:#0c43b7; border:1px solid #e5e5e5; border-radius:18px; padding:4px 12px 4px 10px;
font-size:13px; }
.card { background:#ffffff; border-radius:12px; padding:14px 0; border-bottom:1px solid #e5e5e5; }
.card:last-child { border-bottom:none; }
.cardUrl { font-size:12px; color:#03c75a; margin-bottom:3px; }
.cardTitle { font-size:18px; font-weight:600; color:#1c1c1c; line-height:1.33; margin:0 0 4px; letter-spacing:-0.16px; }
.cardSnippet { font-size:13px; color:#8c8c8c; line-height:1.5; max-width:520px; }
.colRight { width:230px; flex:0 0 auto; }
.panel { background:#ffffff; border:1px solid #e5e5e5; border-radius:12px; padding:16px; }
.panelTitle { font-size:13px; font-weight:600; color:#1c1c1c; margin:0 0 10px; }
.relatedChips { display:flex; flex-wrap:wrap; gap:8px; }
.relatedChip { background:#ffffff; color:#0c43b7; border:1px solid #e5e5e5; border-radius:18px; padding:4px 12px;
font-size:12px; }
.pagingRow { display:flex; gap:8px; padding:14px 36px 0; align-items:center; }
.pageBtn { background:#ffffff; color:#2e2e2e; border:1px solid rgba(0,0,0,.15); border-radius:9999px; height:32px;
padding:0 14px; display:flex; align-items:center; font-size:13px; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.pageBtn.current { background:#03c75a; color:#ffffff; border-color:#03c75a; }
footer { height:34px; border-top:1px solid #e5e5e5; padding:0 36px; display:flex; align-items:center;
justify-content:space-between; font-size:11px; color:#8c8c8c; background:#ffffff; margin-top:auto; }
</style></head>
<body>
<div class="searchBar">
<div class="logoRow">
<div class="logoMark"></div>
<p class="brand">Naver</p>
</div>
<div class="searchAssembly">
<span class="queryText">interior design ideas for small apartments</span>
<div class="submitIcon">Go</div>
</div>
</div>
<div class="tabs">
<div class="tab active">All</div>
<div class="tab">Images</div>
<div class="tab">VIEW</div>
<div class="tab">News</div>
<div class="tab">Shopping</div>
<div class="tab">Map</div>
</div>
<main>
<div class="colLeft">
<div class="chipsRow">
<div class="chip">Related Images</div>
<div class="chip">Recent Posts</div>
<div class="chip">Top Rated</div>
</div>
<div class="card">
<div class="cardUrl">home.example · design</div>
<p class="cardTitle">12 Small Apartment Layouts That Feel Twice as Big</p>
<p class="cardSnippet">A room-by-room breakdown of furniture placement, light color palettes, and multipurpose storage for compact living spaces.</p>
</div>
<div class="card">
<div class="cardUrl">studio.example · guide</div>
<p class="cardTitle">Studio Apartment Zoning: Sleep, Work, and Dine in One Room</p>
<p class="cardSnippet">How to use rugs, lighting, and low shelving to create visual boundaries without walls.</p>
</div>
<div class="card">
<div class="cardUrl">renters.example · tips</div>
<p class="cardTitle">Rental-Friendly Upgrades: No Drilling, Full Impact</p>
<p class="cardSnippet">Peel-and-stick finishes, tension rods, and modular shelving picked for easy move-out.</p>
</div>
</div>
<div class="colRight">
<div class="panel">
<p class="panelTitle">Related Keywords</p>
<div class="relatedChips">
<div class="relatedChip">Small Kitchen</div>
<div class="relatedChip">Studio Storage</div>
<div class="relatedChip">Compact Desk</div>
<div class="relatedChip">Loft Bed</div>
</div>
</div>
</div>
</main>
<div class="pagingRow">
<div class="pageBtn">Prev</div>
<div class="pageBtn current">1</div>
<div class="pageBtn">2</div>
<div class="pageBtn">3</div>
<div class="pageBtn">Next</div>
</div>
<footer>
<span>© Naver</span>
<span>Naver · Search · Shopping · Map</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #582c83; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #582c83; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #ae9bc2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7e57c2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #582c83; color: #ffffff;
border: 1px solid #7e57c2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #582c83; color: #f5f5f5;
border: 1px solid #714c95; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #ae9bc2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5e338d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#161325; color:#ECEAF5; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.map { position:absolute; inset:0; background:
radial-gradient(circle at 20% 30%, #1B3A2E 0%, transparent 30%),
radial-gradient(circle at 75% 70%, #16314A 0%, transparent 26%),
linear-gradient(135deg, #1A2138, #161325); }
.road { position:absolute; background:#2C3654; }
.r1 { top:180px; left:0; right:0; height:10px; transform:rotate(-4deg); }
.r2 { top:0; bottom:0; left:420px; width:10px; transform:rotate(6deg); }
.circlepill { position:absolute; top:20px; left:50%; transform:translateX(-50%); background:#1F1B33; border:1px solid #3D3759;
border-radius:999px; padding:10px 20px; font-size:14px; font-weight:700; box-shadow:0 8px 20px rgba(0,0,0,0.3); }
.pin { position:absolute; display:flex; flex-direction:column; align-items:center; }
.pinav { width:48px; height:48px; border-radius:50%; border:3px solid #fff; box-shadow:0 6px 14px rgba(0,0,0,0.35); }
.pinname { margin-top:4px; background:rgba(31,27,51,0.85); font-size:11px; font-weight:700; padding:2px 8px; border-radius:8px; }
.pin.p1 { top:110px; left:220px; } .pin.p1 .pinav { background:linear-gradient(135deg,#FFC94D,#e0a000); }
.pin.p2 { top:230px; left:560px; } .pin.p2 .pinav { background:linear-gradient(135deg,#4DD9C9,#1a9a89); }
.pin.p3 { top:330px; left:340px; } .pin.p3 .pinav { background:linear-gradient(135deg,#FF7AAE,#c93d76); }
.geofence { position:absolute; top:280px; left:600px; width:140px; height:140px; border-radius:50%;
background:rgba(126,87,194,0.14); border:2px solid rgba(126,87,194,0.5); }
.sheet { position:absolute; left:0; right:0; bottom:0; background:#211D36; border-radius:24px 24px 0 0; padding:16px 20px 20px;
box-shadow:0 -10px 30px rgba(0,0,0,0.35); }
.handle { width:40px; height:4px; background:#3D3759; border-radius:2px; margin:0 auto 14px; }
.member { display:flex; align-items:center; gap:12px; padding:10px 0; }
.mav { width:44px; height:44px; border-radius:50%; border:2px solid #fff; }
.m1 { background:linear-gradient(135deg,#FFC94D,#e0a000); }
.m2 { background:linear-gradient(135deg,#4DD9C9,#1a9a89); }
.m3 { background:linear-gradient(135deg,#FF7AAE,#c93d76); }
.mname { font-size:15px; font-weight:700; }
.mplace { font-size:12px; color:#A6A0C2; margin-top:2px; }
.battery { margin-left:auto; font-size:11px; color:#34C759; display:flex; align-items:center; gap:4px; }
.battery.low { color:#FF6B6B; }
</style></head>
<body>
<div class="map">
<div class="road r1"></div><div class="road r2"></div>
<div class="geofence"></div>
</div>
<div class="circlepill">The Life360 (iOS) ▾</div>
<div class="pin p1"><div class="pinav"></div><div class="pinname">Mia</div></div>
<div class="pin p2"><div class="pinav"></div><div class="pinname">Jordan</div></div>
<div class="pin p3"><div class="pinav"></div><div class="pinname">Dad</div></div>
<div class="sheet">
<div class="handle"></div>
<div class="member"><div class="mav m1"></div><div><div class="mname">Mia</div><div class="mplace">Lincoln High School · 4 min ago</div></div><div class="battery">🔋 82%</div></div>
<div class="member"><div class="mav m2"></div><div><div class="mname">Jordan</div><div class="mplace">Driving on I-90 · Just now</div></div><div class="battery low">🔋 14%</div></div>
<div class="member"><div class="mav m3"></div><div><div class="mname">Dad</div><div class="mplace">Home · 1 hr ago</div></div><div class="battery">🔋 96%</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.33; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; letter-spacing: 0.2px; background: #313131; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; letter-spacing: 0.2px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.3px; background: #2e7d32; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#313131; font-family:-apple-system, 'Helvetica Neue', Arial, sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #eeeeee;}
.logo{font-size:19px;font-weight:500;color:#313131;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;color:#313131;}
.navlinks .active{border-bottom:2px solid #313131;padding-bottom:18px;}
.breadcrumb{padding:14px 32px 0;font-size:13px;color:#757575;}
.breadcrumb span.cur{color:#313131;}
.hero{display:flex;padding:16px 32px 0;gap:28px;}
.bookimg{width:220px;height:280px;background:linear-gradient(160deg,#3c3126,#5a4839);border-radius:8px 8px 0 0;position:relative;flex-shrink:0;}
.bookimg:before{content:'';position:absolute;left:14px;top:24px;right:14px;height:2px;background:rgba(255,255,255,0.25);}
.bookimg:after{content:'';position:absolute;left:14px;top:34px;right:14px;height:2px;background:rgba(255,255,255,0.15);}
.info{flex:1;padding-top:6px;}
.info h1{font-size:24px;font-weight:400;margin:0 0 6px;letter-spacing:-0.3px;}
.author{font-size:15px;color:#757575;margin-bottom:14px;}
.price{font-size:22px;font-weight:500;margin-bottom:16px;}
.btnrow{display:flex;gap:10px;}
.btn{background:#313131;color:#fff;font-size:15px;font-weight:500;padding:12px 24px;border-radius:4px;}
.btn2{background:#fff;color:#313131;font-size:15px;font-weight:500;padding:11px 23px;border-radius:4px;border:1px solid #e0e0e0;}
.gold{background:#c9a84c;color:#fff;font-size:12px;font-weight:500;padding:8px 20px;border-radius:9999px;display:inline-block;margin-top:14px;}
.desc{font-size:14px;color:#4a4a4a;margin-top:16px;line-height:1.5;max-width:420px;}
.related{padding:16px 32px 0;}
.related .h{font-size:16px;font-weight:500;margin-bottom:10px;}
.grid{display:flex;gap:14px;}
.card{width:140px;}
.thumb{height:120px;border-radius:8px;background:linear-gradient(160deg,#4a3d30,#2b241c);margin-bottom:6px;}
.ptitle{font-size:14px;font-weight:500;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#313131;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Raptis Rare Books</div>
<div class="navlinks"><div class="active">First Editions</div><div>Association Copies</div><div>Sell Your Books</div></div>
</div>
<div class="breadcrumb">Home › First Editions › <span class="cur">American Literature</span></div>
<div class="hero">
<div class="bookimg"></div>
<div class="info">
<h1>The Old Man and the Sea</h1>
<div class="author">Ernest Hemingway — First Edition, 1952</div>
<div class="price">$4,800.00</div>
<div class="btnrow"><div class="btn">Add to Cart</div><div class="btn2">Inquire</div></div>
<div class="gold">Signed Association Copy</div>
<div class="desc">Original first printing dust jacket, near-fine condition. Housed in a custom archival clamshell case. Provenance documented from the author's estate.</div>
</div>
</div>
<div class="related">
<div class="h">You May Also Like</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ptitle">The Great Gatsby, 1925</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#5a4839,#2b241c);"></div><div class="ptitle">Moby-Dick, 1851</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#3c3126,#4a3d30);"></div><div class="ptitle">Walden, First Ed.</div></div>
</div>
</div>
<div class="footer"><span>© Est. rare book dealers</span><span>Authentication Appraisals Shipping</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8a8a8a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #52b7bd; color: #000000;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #fefefe; color: #0a0a0a;
border: 1px solid #52b7bd; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fefefe; color: #0a0a0a;
border: 1px solid #c1c1c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fd7021; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{
width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;
background:#fefefe;font-family:'Lexend','Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
color:#373737;
}
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:58px;background:#ffffff;border-bottom:1px solid #e6e6e6;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.logo{font-weight:700;font-size:18px;color:#0a0a0a;}
.logo span{color:#52b7bd;}
.navlinks{display:flex;gap:20px;}
.navlinks span{font-size:13px;font-weight:600;color:#373737;}
.navlinks span.active{color:#52b7bd;}
.search{background:#f7f7f7;border-radius:9999px;padding:8px 16px;font-size:12px;color:#8a8a8a;width:170px;}
.hero{background:#0c4d78;color:#fff;padding:26px 24px;display:flex;gap:22px;align-items:center;}
.heroText{flex:1.2;}
.heroText h1{font-size:28px;font-weight:700;line-height:1.2;margin:0 0 8px;}
.heroText p{font-size:14px;color:#cfe4ea;margin:0 0 14px;max-width:420px;}
.heroBtn{display:inline-block;background:#52b7bd;color:#fff;font-size:13px;font-weight:600;padding:11px 24px;border-radius:9999px;}
.heroPress{flex:1;height:140px;background:linear-gradient(160deg,#14294d,#0c4d78);border-radius:12px;position:relative;}
.heroPress .disc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,#c7b894 0%,#52b7bd 40%,#0a0a0a 70%);}
.heroPress .disc::after{content:"";position:absolute;top:44%;left:44%;width:12%;height:12%;border-radius:50%;background:#fefefe;}
.section{padding:16px 24px 0;}
.sectitle{font-size:15px;font-weight:600;margin:0 0 10px;color:#0a0a0a;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#ffffff;border:1px solid #eeeeee;border-radius:8px;overflow:hidden;}
.photo{aspect-ratio:1/1;background:linear-gradient(150deg,#f7f7f7,#e6e6e6);position:relative;}
.photo .disc2{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60%;height:60%;border-radius:50%;background:conic-gradient(#52b7bd,#0c4d78,#52b7bd);}
.badge{position:absolute;top:6px;left:6px;background:#fd7021;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 7px;border-radius:8px;}
.ctitle{font-size:13px;font-weight:600;color:#0a0a0a;padding:8px 10px 0;}
.cprice{font-size:14px;font-weight:700;color:#52b7bd;padding:2px 10px 10px;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#0c4d78;color:#cfe4ea;font-size:11px;padding:10px 24px;display:flex;justify-content:space-between;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Gotta Groove Records<span>.</span></div>
<div class="navlinks"><span class="active">Pressing</span><span>Mastering</span><span>Packaging</span><span>Process</span></div>
<div class="search">Search a project...</div>
</div>
<div class="hero">
<div class="heroText">
<h1>Vinyl, pressed with real craft.</h1>
<p>From lacquer to label copy — full-service record pressing for labels, bands, and audiophile reissues.</p>
<div class="heroBtn">Get A Pressing Quote</div>
</div>
<div class="heroPress"><div class="disc"></div></div>
</div>
<div class="section">
<div class="sectitle">Pressing Packages</div>
<div class="grid">
<div class="card"><div class="photo"><div class="badge">Limited</div><div class="disc2"></div></div>
<div class="ctitle">300-Unit Indie Pkg</div><div class="cprice">$1,850.00</div></div>
<div class="card"><div class="photo"><div class="disc2"></div></div>
<div class="ctitle">Test Pressing (5x)</div><div class="cprice">$225.00</div></div>
<div class="card"><div class="photo"><div class="disc2"></div></div>
<div class="ctitle">Full-Color Jacket Add-On</div><div class="cprice">$0.85 / unit</div></div>
<div class="card"><div class="photo"><div class="badge">Pre-Order</div><div class="disc2"></div></div>
<div class="ctitle">Audiophile 180g Reissue</div><div class="cprice">$2,400.00</div></div>
</div>
</div>
<div class="footer"><span>© Gotta Groove Records</span><span>Cleveland, Ohio · Family Owned</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.25px; background: #003388; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.25px; background: #ffffff; color: #003388;
border: 1px solid #003388; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #444444;
border: 1px solid #bbbbbb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #cf4e28; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#eeeeee; color:#444444; font-family:'PT Sans',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;background:#003388;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-family:'PT Serif',Georgia,serif;font-size:20px;font-weight:700;}
.navlinks{display:flex;gap:6px;}
.navlinks span{color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;padding:8px 12px;}
.navlinks .active{border-bottom:3px solid #cf4e28;}
.navicons{display:flex;gap:14px;color:#fff;font-size:12px;}
.hero{padding:20px 32px 0;}
.herobar{background:#003388;border-radius:12px;padding:24px 28px;display:flex;align-items:center;gap:24px;color:#fff;}
.herotext h1{font-family:'PT Serif',Georgia,serif;font-size:26px;font-weight:700;margin:0 0 6px;}
.herotext p{font-size:14px;color:#c4d4ee;margin:0 0 14px;max-width:340px;}
.cta{display:inline-block;background:#cf4e28;color:#fff;font-size:15px;font-weight:700;padding:10px 22px;border-radius:8px;}
.boxstack{width:150px;height:100px;position:relative;flex-shrink:0;margin-left:auto;}
.box{position:absolute;width:90px;height:90px;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.2);}
.box.b1{background:linear-gradient(135deg,#cf4e28,#468847);left:0;top:6px;transform:rotate(-6deg);}
.box.b2{background:linear-gradient(135deg,#4199fd,#003388);left:45px;top:0;transform:rotate(4deg);}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:200px;background:#fff;border-radius:12px;padding-bottom:14px;position:relative;}
.thumb{height:110px;border-radius:12px 12px 0 0;}
.badge{position:absolute;top:8px;left:8px;background:#cf4e28;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.ptitle{font-size:14px;font-weight:700;color:#222222;padding:8px 14px 2px;}
.pprice{font-size:15px;color:#222222;padding:0 14px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#003388;color:#c4d4ee;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Stonemaier Games</div>
<div class="navlinks"><span class="active">Games</span><span>Expansions</span><span>Accessories</span><span>Blog</span></div>
<div class="navicons"><span>Search</span><span>Cart (1)</span></div>
</div>
<div class="hero">
<div class="herobar">
<div class="herotext"><h1>Games with a story worth telling.</h1><p>Board games designed for tables that stay up past midnight.</p><div class="cta">Shop New Releases</div></div>
<div class="boxstack"><div class="box b1"></div><div class="box b2"></div></div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4199fd,#003388)"></div><span class="badge">Sale</span><div class="ptitle">Wingfall Reserve</div><div class="pprice">$54.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#468847,#00d084)"></div><div class="ptitle">Meadowcraft</div><div class="pprice">$44.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#579af6,#003388)"></div><span class="badge" style="background:#468847">New</span><div class="ptitle">Harbor Freight Co.</div><div class="pprice">$62.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3f4b5b,#003388)"></div><div class="ptitle">Lantern Bearer</div><div class="pprice">$38.00</div></div>
</div>
<div class="footer"><span>© Stonemaier Games</span><span>Store Fulfilled Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3dba90; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3dba90; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #255d4a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3e3e3e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3dba90; color: #3e3e3e;
border: 1px solid #3e3e3e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3dba90; color: #111111;
border: 1px solid #369f7c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #255d4a; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3da683; color: #3e3e3e;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#3e3e3e; box-sizing:border-box;
font-family:"Noto Sans TC", "Microsoft JhengHei", -apple-system, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:17px; font-weight:700; color:#3e3e3e; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:500; color:#3e3e3e; }
.right { display:flex; gap:10px; align-items:center; }
.login { color:#3dba90; font-weight:700; font-size:14px; }
.signup { background:#fff; border:1px solid #3dba90; color:#3dba90; border-radius:4px; height:40px;
padding:0 16px; font-size:14px; font-weight:700; display:flex; align-items:center; }
.hero { text-align:center; padding:16px 40px 18px; }
.hero h1 { font-size:34px; font-weight:900; line-height:1.4; letter-spacing:1px; margin:0 0 10px; color:#3e3e3e; }
.hero p { font-size:15px; color:#000000; margin:0 0 14px; }
.cta { display:inline-flex; background:#3dba90; color:#fff; border-radius:4px; height:48px; padding:0 26px;
font-size:14px; font-weight:500; align-items:center; }
.band { background:#f7f7f7; padding:16px 40px; }
.band h2 { text-align:center; font-size:22px; font-weight:700; letter-spacing:1px; margin:0 0 14px; color:#3e3e3e; }
.row { display:flex; gap:14px; }
.card { flex:1; background:#fff; border-radius:8px; padding:16px; box-shadow:rgba(0,0,0,0.06) 0px 2px 8px; }
.card .dot { width:34px; height:34px; border-radius:8px; margin-bottom:8px; }
.d1 { background:#5f54e0; } .d2 { background:#f5b849; } .d3 { background:#f26659; }
.card h3 { font-size:16px; font-weight:700; margin:0 0 4px; color:#3e3e3e; }
.card p { font-size:12px; color:#000; margin:0 0 6px; line-height:1.5; }
.learn { color:#3dba90; font-size:13px; font-weight:700; }
.tiers { display:flex; gap:12px; padding:14px 40px 0; }
.tier { flex:1; background:#fff; border:1px solid #dddddd; border-radius:8px; padding:12px; text-align:center; }
.tier.hi { border-color:#3dba90; }
.tier .name { font-size:13px; color:#3e3e3e; }
.tier .band-top { height:4px; background:#3dba90; border-radius:4px 4px 0 0; margin:-12px -12px 8px; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #dddddd; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#9b9b9b; }
</style></head>
<body>
<nav>
<div class="brand">SurveyCake</div>
<div class="navlinks"><span>Features</span><span>Pricing</span><span>Templates</span></div>
<div class="right"><span class="login">Log in</span><div class="signup">Sign up</div></div>
</nav>
<div class="hero">
<h1>Enterprise-grade cloud survey service</h1>
<p>Powerful professional features and question types, built for teams that trust data.</p>
<div class="cta">Create a free survey</div>
</div>
<div class="band">
<h2>Everything a survey team needs</h2>
<div class="row">
<div class="card"><div class="dot d1"></div><h3>Advanced logic</h3><p>Branching, skip logic, and scoring for complex forms.</p><span class="learn">Learn more</span></div>
<div class="card"><div class="dot d2"></div><h3>Team collaboration</h3><p>Shared workspaces and roles for growing organizations.</p><span class="learn">Learn more</span></div>
<div class="card"><div class="dot d3"></div><h3>Data security</h3><p>Enterprise compliance built for sensitive research data.</p><span class="learn">Learn more</span></div>
</div>
</div>
<div class="tiers">
<div class="tier"><div class="band-top"></div><div class="name">BASIC</div></div>
<div class="tier hi"><div class="band-top"></div><div class="name">PRO</div></div>
<div class="tier"><div class="band-top"></div><div class="name">TEAM</div></div>
<div class="tier"><div class="band-top"></div><div class="name">ENTERPRISE</div></div>
</div>
<footer><span>© SurveyCake</span><span>SurveyCake · Support Center · Privacy</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00a1ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00a1ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2f3438; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a1ff; color: #2f3438;
border: 1px solid #2f3438; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00a1ff; color: #f5f5f5;
border: 1px solid #27aefd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0890df; color: #2f3438;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#424242; box-sizing:border-box;
font-family:"Pretendard Variable", -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e0e0e0; }
.brand { font-size:18px; font-weight:700; color:#2f3438; }
.search { width:255px; height:32px; border:1px solid #e0e0e0; border-radius:4px; font-size:14px; color:#8c9094;
display:flex; align-items:center; padding:0 12px; }
.navcta { background:#00a1ff; color:#ffffff; font-size:14px; height:40px; border-radius:4px; padding:0 16px;
display:flex; align-items:center; }
.body { padding:18px 32px 0; }
.tabrow { display:flex; gap:18px; margin-bottom:14px; }
.tabrow span { font-size:16px; font-weight:700; color:#2f3438; }
.tabrow span.muted { color:#828c94; font-weight:400; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.card { display:flex; flex-direction:column; gap:6px; }
.thumb { width:100%; aspect-ratio:1/1; border-radius:4px; position:relative; overflow:hidden;
background-color:#f4f4f4;
background-image: linear-gradient(135deg, rgba(0,161,255,0.14), rgba(0,0,0,0.02)); }
.thumb::after { content:''; position:absolute; left:14%; right:14%; top:30%; bottom:30%;
background:rgba(0,0,0,0.05); border-radius:6px; }
.ptitle { font-size:15px; font-weight:400; color:#424242; }
.pprice { font-size:15px; font-weight:700; color:#2f3438; }
.pmeta { font-size:14px; color:#828c94; }
.floatbtn { position:absolute; right:24px; bottom:24px; width:48px; height:48px; border-radius:24px;
background:#ffffff; box-shadow:0 2px 5px rgba(63,71,77,0.15); }
</style></head>
<body>
<nav>
<span class="brand">Ohouse</span>
<span class="search">Search furniture, rooms, brands</span>
<span class="navcta">Write a Post</span>
</nav>
<div class="body">
<div class="tabrow">
<span>Today's Feed</span>
<span class="muted">Store</span>
<span class="muted">Community</span>
<span class="muted">Renovation</span>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ptitle">One-room studio in warm oak</div><div class="pmeta">128 likes</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Fabric Sofa 3-Seater</div><div class="pprice">₩389,000</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Minimal pendant lamp</div><div class="pprice">₩58,000</div></div>
<div class="card"><div class="thumb"></div><div class="ptitle">Small kitchen renovation diary</div><div class="pmeta">54 comments</div></div>
</div>
</div>
<div class="floatbtn"></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.25px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #1a6dcc; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #ffffff; color: #1a6dcc;
border: 1px solid #313131; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #e8f5eb; color: #2d7a3a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;font-family:Arial,'Helvetica Neue',Roboto,-apple-system,system-ui,sans-serif;color:#4a4a4a;}
*{box-sizing:border-box;}
.nav{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#313131;}
.logo{font-size:19px;font-weight:700;letter-spacing:-0.3px;color:#ffffff;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;color:#dddddd;text-transform:uppercase;letter-spacing:0.3px;}
.cta-nav{padding:8px 16px;background:#1a6dcc;color:#ffffff;font-size:12px;font-weight:700;border-radius:2px;}
.hero{height:158px;background:#f6f6f6;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #d4d4d4;}
.hero-text{width:520px;}
.headline{font-size:26px;font-weight:700;letter-spacing:-0.4px;line-height:1.25;color:#313131;margin-bottom:8px;}
.sub{font-size:13px;color:#767676;line-height:1.4;width:500px;margin-bottom:12px;}
.cta{display:inline-block;padding:11px 24px;background:#1a6dcc;color:#ffffff;border-radius:2px;font-size:13px;font-weight:700;}
.hero-badge{width:200px;background:#ffffff;border:1px solid #d4d4d4;border-radius:2px;padding:12px;}
.hb-row{display:flex;justify-content:space-between;font-size:11px;color:#4a4a4a;padding:4px 0;border-bottom:1px solid #ebebeb;}
.hb-row b{color:#313131;}
.section{padding:20px 40px 0 40px;display:flex;justify-content:space-between;align-items:baseline;}
.section-title{font-size:20px;font-weight:700;color:#313131;}
.section-link{font-size:12px;font-weight:600;color:#1a6dcc;}
.grid{display:flex;gap:22px;padding:14px 40px 0 40px;}
.card{width:206px;background:#ffffff;border:1px solid #d4d4d4;border-radius:2px;overflow:hidden;}
.swatch{height:88px;background:#eeeeee;position:relative;display:flex;align-items:center;justify-content:center;}
.swatch .unit{width:80px;height:56px;border-radius:2px;background:linear-gradient(135deg,#c9c9c9,#a0a0a0);border:1px solid #999999;}
.badge{position:absolute;left:6px;top:6px;background:#2d7a3a;color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:2px;}
.card-body{padding:9px 11px 12px 11px;}
.card-model{font-size:10px;color:#767676;letter-spacing:0.2px;margin-bottom:3px;}
.card-title{font-size:13px;font-weight:700;color:#313131;margin-bottom:6px;}
.specline{display:flex;justify-content:space-between;font-size:10.5px;color:#4a4a4a;padding:2px 0;border-top:1px solid #ebebeb;}
.card-price{font-size:15px;font-weight:700;color:#313131;margin-top:8px;}
</style>
<div class="nav">
<div class="logo">Hvacdirect</div>
<div class="navlinks"><span>Air Conditioners</span><span>Furnaces</span><span>Mini Splits</span><span>Parts</span></div>
<div class="cta-nav">Request Quote</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="headline">Contractor pricing.<br/>Direct to your job site.</div>
<div class="sub">HVAC equipment sold direct — no distributor markup, no minimum order. Same units, straight specs.</div>
<div class="cta">Shop Equipment</div>
</div>
<div class="hero-badge">
<div class="hb-row"><span>SEER2 Rating</span><b>16.0</b></div>
<div class="hb-row"><span>Tonnage</span><b>3.0 Ton</b></div>
<div class="hb-row"><span>Refrigerant</span><b>R-410A</b></div>
<div class="hb-row" style="border-bottom:none;"><span>Ship Weight</span><b>168 lbs</b></div>
</div>
</div>
<div class="section"><div class="section-title">Central Air Conditioners</div><div class="section-link">View full catalog</div></div>
<div class="grid">
<div class="card">
<div class="swatch"><div class="unit"></div><div class="badge">In Stock</div></div>
<div class="card-body"><div class="card-model">MODEL 4AC16L36P</div><div class="card-title">3 Ton 16 SEER2 Split AC</div><div class="specline"><span>SEER2</span><span>16.0</span></div><div class="specline"><span>Tonnage</span><span>3.0</span></div><div class="card-price">$1,849.00</div></div>
</div>
<div class="card">
<div class="swatch"><div class="unit"></div><div class="badge">In Stock</div></div>
<div class="card-body"><div class="card-model">MODEL GMVC96 </div><div class="card-title">96% AFUE Gas Furnace</div><div class="specline"><span>AFUE</span><span>96%</span></div><div class="specline"><span>BTU</span><span>80,000</span></div><div class="card-price">$2,299.00</div></div>
</div>
<div class="card">
<div class="swatch"><div class="unit"></div><div class="badge">In Stock</div></div>
<div class="card-body"><div class="card-model">MODEL MSZ-18</div><div class="card-title">18k BTU Mini Split</div><div class="specline"><span>SEER2</span><span>21.5</span></div><div class="specline"><span>BTU</span><span>18,000</span></div><div class="card-price">$1,399.00</div></div>
</div>
<div class="card">
<div class="swatch"><div class="unit"></div><div class="badge">In Stock</div></div>
<div class="card-body"><div class="card-model">MODEL RGF07</div><div class="card-title">Air Handler Coil Unit</div><div class="specline"><span>Tonnage</span><span>2.5</span></div><div class="specline"><span>Refrigerant</span><span>R-410A</span></div><div class="card-price">$679.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a1a1a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a1a1a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #929292; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff6c37; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ff6c37;
border: 1px solid #ff6c37; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a1a1a; color: #f5f5f5;
border: 1px solid #3d3d3d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929292; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3f271f; color: #ff6c37;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1A1A1A; color:#E8E8E8; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:'SF Mono', ui-monospace, Menlo, Consolas, monospace; }
.app { position:relative; width:960px; height:640px; background:#1A1A1A; }
.topbar { position:absolute; top:0; left:0; right:0; height:44px; display:flex; align-items:center;
justify-content:space-between; padding:0 18px; }
.topleft { display:flex; align-items:center; gap:10px; }
.roundel { width:24px; height:24px; border-radius:50%; background:#FF6C37; display:flex; align-items:center;
justify-content:center; color:#fff; font-size:12px; font-weight:800; }
.reqname { font-size:16px; font-weight:600; color:#E8E8E8; }
.saveaction { font-size:13px; font-weight:600; color:#FF6C37; display:flex; align-items:center; gap:6px; }
.savedot { width:6px; height:6px; border-radius:50%; background:#FF6C37; }
.urlbar { position:absolute; top:52px; left:18px; right:18px; height:44px; background:#212121;
border:1px solid #444444; border-radius:10px; display:flex; align-items:center; overflow:hidden; }
.methodpill { padding:0 14px; height:100%; display:flex; align-items:center; font-size:13px; font-weight:700;
letter-spacing:0.02em; color:#6BDD9A; border-right:1px solid #444444; }
.urlfield { flex:1; padding:0 12px; font-size:13px; color:#E8E8E8; white-space:nowrap; overflow:hidden; }
.sendbtn { height:100%; padding:0 22px; background:#FF6C37; color:#fff; font-size:13px; font-weight:700;
display:flex; align-items:center; font-family:-apple-system, BlinkMacSystemFont, sans-serif; }
.tabstrip { position:absolute; top:104px; left:18px; right:18px; height:32px; display:flex; align-items:center;
gap:20px; border-bottom:1px solid #3A3A3A; }
.rtab { font-size:13px; font-weight:500; color:#A6A6A6; padding-bottom:9px; position:relative; }
.rtab.active { font-weight:600; color:#E8E8E8; border-bottom:2px solid #FF6C37; }
.rtab .dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:#6BDD9A; margin-left:5px; vertical-align:middle; }
.kvsection { position:absolute; top:148px; left:18px; right:18px; }
.kveyebrow { font-size:12px; font-weight:500; letter-spacing:0.04em; color:#A6A6A6; margin:0 0 8px; text-transform:uppercase; }
.kvrow { display:flex; gap:8px; margin-bottom:8px; }
.kvcell { background:#212121; border:1px solid #3A3A3A; border-radius:6px; padding:9px 10px; font-size:12px; }
.kvkey { flex:0 0 38%; color:#74AEF6; }
.kvval { flex:1; color:#E8E8E8; }
.respsection { position:absolute; top:262px; left:18px; right:18px; bottom:64px; }
.resphead { display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.statuschip { font-size:12px; font-weight:700; letter-spacing:0.02em; padding:5px 10px; border-radius:999px;
background:rgba(107,221,154,0.08); border:1px solid rgba(107,221,154,0.4); color:#6BDD9A; }
.respmeta { font-size:14px; font-weight:400; color:#A6A6A6; }
.jsonblock { background:#161616; border:1px solid #3A3A3A; border-radius:8px; padding:14px; height:calc(100% - 42px);
font-size:12px; line-height:1.6; overflow:hidden; }
.jl { margin:0; white-space:pre; }
.jk { color:#74AEF6; }
.js { color:#6BDD9A; }
.jn { color:#C0A8E1; }
.jp { color:#6E6E6E; }
.tabbar { position:absolute; left:0; right:0; bottom:0; height:52px; background:rgba(26,26,26,0.94);
border-top:0.5px solid #3A3A3A; display:flex; align-items:center; justify-content:space-around; }
.tab { display:flex; flex-direction:column; align-items:center; gap:3px; }
.tab .ic { font-size:18px; color:#6E6E6E; }
.tab .lb { font-size:10px; font-weight:500; color:#6E6E6E; }
.tab.active .ic, .tab.active .lb { color:#FF6C37; }
</style></head>
<body>
<div class="app">
<div class="topbar">
<div class="topleft"><span class="roundel">Postman (iOS)</span><span class="reqname">Get User Profile</span></div>
<span class="saveaction"><span class="savedot"></span>Save</span>
</div>
<div class="urlbar">
<span class="methodpill mono">GET</span>
<span class="urlfield mono">https://api.example.com/v2/users/{{user_id}}/profile</span>
<span class="sendbtn">Send</span>
</div>
<div class="tabstrip">
<span class="rtab active">Params</span>
<span class="rtab">Headers<span class="dot"></span></span>
<span class="rtab">Body</span>
<span class="rtab">Auth</span>
<span class="rtab">Pre-request Script</span>
<span class="rtab">Tests</span>
</div>
<div class="kvsection">
<p class="kveyebrow">Query Params</p>
<div class="kvrow"><span class="kvcell kvkey mono">include</span><span class="kvcell kvval mono">avatar,stats</span></div>
<div class="kvrow"><span class="kvcell kvkey mono">locale</span><span class="kvcell kvval mono">en-US</span></div>
</div>
<div class="respsection">
<div class="resphead">
<span class="statuschip mono">200 OK</span>
<span class="respmeta mono">182 ms · 1.2 KB</span>
</div>
<div class="jsonblock mono">
<p class="jl"><span class="jp">{</span></p>
<p class="jl"> <span class="jk">"id"</span><span class="jp">:</span> <span class="jn">10492</span><span class="jp">,</span></p>
<p class="jl"> <span class="jk">"name"</span><span class="jp">:</span> <span class="js">"Alex Rivera"</span><span class="jp">,</span></p>
<p class="jl"> <span class="jk">"active"</span><span class="jp">:</span> <span class="jn">true</span><span class="jp">,</span></p>
<p class="jl"> <span class="jk">"stats"</span><span class="jp">: {</span></p>
<p class="jl"> <span class="jk">"requests"</span><span class="jp">:</span> <span class="jn">3841</span></p>
<p class="jl"> <span class="jp">}</span></p>
<p class="jl"><span class="jp">}</span></p>
</div>
</div>
<div class="tabbar">
<div class="tab active"><span class="ic">▶</span><span class="lb">REQUEST</span></div>
<div class="tab"><span class="ic">☰</span><span class="lb">COLLECTIONS</span></div>
<div class="tab"><span class="ic">↻</span><span class="lb">HISTORY</span></div>
<div class="tab"><span class="ic">⚙</span><span class="lb">ENVIRONMENTS</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #313131; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #27ae60; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',system-ui,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#313131; }
.brand { font-size:16px; font-weight:700; color:#fff; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; color:#fff; }
.navlinks span.active { text-decoration:underline; text-underline-offset:4px; }
.search { background:#fff; border-radius:999px; padding:8px 18px; font-size:12px; color:#757575; width:180px; }
.heading { padding:20px 32px 12px; border-bottom:1px solid #e0e0e0; }
.heading h2 { font-size:24px; font-weight:600; margin:0; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:16px 32px; }
.card { border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.08); overflow:hidden; }
.cover { height:130px; background:linear-gradient(160deg,#4a3826,#7a5c3a); position:relative; }
.cover::after { content:''; position:absolute; left:10px; top:10px; right:10px; height:2px; background:rgba(255,255,255,.4); }
.cbody { padding:10px 12px 12px; }
.cbody h3 { font-size:14px; font-weight:600; margin:0 0 4px; }
.cbody .author { font-size:12px; color:#757575; margin:0 0 6px; }
.price { font-size:15px; font-weight:600; }
.event { margin:0 32px; background:#fff; border-left:4px solid #2980b9; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; }
.event h4 { font-size:14px; font-weight:600; margin:0 0 2px; }
.event p { font-size:11px; color:#757575; margin:0; }
footer { position:absolute; bottom:0; left:0; right:0; height:44px; background:#313131; color:#fff;
display:flex; align-items:center; justify-content:space-between; padding:0 32px; font-size:11px; }
</style></head>
<body>
<nav>
<p class="brand">Beacon Hill Books</p>
<div class="navlinks"><span class="active">Featured</span><span>Staff Picks</span><span>Events</span><span>Gift Cards</span></div>
<div class="search">Search books...</div>
</nav>
<div class="heading"><h2>Staff Picks This Week</h2></div>
<div class="grid">
<div class="card">
<div class="cover"></div>
<div class="cbody"><h3>North Woods</h3><p class="author">Daniel Mason</p><div class="price">$28.00</div></div>
</div>
<div class="card">
<div class="cover"></div>
<div class="cbody"><h3>Tom Lake</h3><p class="author">Ann Patchett</p><div class="price">$27.00</div></div>
</div>
<div class="card">
<div class="cover"></div>
<div class="cbody"><h3>The Fraud</h3><p class="author">Zadie Smith</p><div class="price">$29.00</div></div>
</div>
<div class="card">
<div class="cover"></div>
<div class="cbody"><h3>Wandering Stars</h3><p class="author">Tommy Orange</p><div class="price">$27.00</div></div>
</div>
</div>
<div class="event">
<div><h4>Author Reading — Sarah Blake</h4><p>Thursday, 7:00 PM · In-Store</p></div>
<span style="font-size:12px; font-weight:600; color:#2980b9;">RSVP →</span>
</div>
<footer>
<span>© Beacon Hill Books</span>
<span>Beacon Hill Books · Hours · Newsletter · Events</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2f8fd; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f2f8fd; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfeff; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#2E2F32; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { position:relative; }
/* ---------- shared bits ---------- */
.spark { position:relative; }
.spark span { position:absolute; top:50%; left:50%; background:#FFC220; border-radius:3px; transform-origin:center; }
.spark-sm { width:28px; height:28px; }
.spark-sm span { width:5px; height:24px; margin:-12px 0 0 -2.5px; }
.spark-sm span:nth-child(1){ transform:rotate(0deg);} .spark-sm span:nth-child(2){ transform:rotate(60deg);} .spark-sm span:nth-child(3){ transform:rotate(120deg);}
.spark-lg { width:56px; height:56px; }
.spark-lg span { width:9px; height:48px; margin:-24px 0 0 -4.5px; border-radius:5px; }
.spark-lg span:nth-child(1){ transform:rotate(0deg);} .spark-lg span:nth-child(2){ transform:rotate(60deg);} .spark-lg span:nth-child(3){ transform:rotate(120deg);}
.star { display:inline-block; width:10px; height:10px; background:#FFB81C;
clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.glass { width:16px; height:16px; border:2px solid #74767C; border-radius:50%; position:relative; }
.glass::after { content:''; position:absolute; width:7px; height:2px; background:#74767C; right:-6px; bottom:1px; transform:rotate(45deg); border-radius:2px; }
/* ---------- right marketing panel ---------- */
.market { position:absolute; left:372px; top:0; width:588px; height:640px; background:#FFFFFF; padding:44px 48px; }
.m-brand { display:flex; align-items:center; gap:12px; margin-bottom:26px; }
.m-brand b { font-size:20px; font-weight:700; letter-spacing:-0.3px; }
.market h1 { font-size:44px; font-weight:700; letter-spacing:-1pt; margin:0 0 10px; line-height:1.05; max-width:460px; }
.market h1 em { font-style:normal; color:#0071DC; }
.market > p.sub { font-size:15px; color:#74767C; margin:0 0 26px; max-width:420px; line-height:1.5; }
.m-cats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:26px; }
.m-cat { background:#F2F8FD; border-radius:12px; padding:14px 10px; text-align:center; }
.m-cat .ico { width:34px; height:34px; border-radius:9px; margin:0 auto 8px; }
.m-cat span { font-size:13px; font-weight:600; color:#2E2F32; }
.m-price-card { background:#FFFFFF; border:1px solid #E2E8F0; border-radius:12px; padding:18px 20px; display:flex; align-items:center; gap:20px; box-shadow:0 1px 3px rgba(16,24,40,0.06); }
.m-price-card .thumb { width:64px; height:64px; border-radius:10px; background:linear-gradient(160deg,#D6E9FB,#F2F8FD); flex:none; }
.rollback-tag { display:inline-block; background:#FFC220; color:#2E2F32; font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; padding:3px 9px; border-radius:5px; margin-bottom:6px; }
.price-row { display:flex; align-items:baseline; gap:8px; }
.price-row .now { font-size:24px; font-weight:700; color:#2E2F32; }
.price-row .was { font-size:13px; color:#74767C; text-decoration:line-through; }
.save-line { font-size:13px; font-weight:600; color:#2A8703; margin-top:2px; }
.m-price-card .name { font-size:14px; font-weight:600; color:#2E2F32; margin-top:6px; }
/* ---------- phone ---------- */
.phone { position:absolute; left:40px; top:20px; width:300px; height:600px; background:#0B0C0D; border-radius:38px; padding:9px; box-shadow:0 24px 60px rgba(16,24,40,0.28); }
.screen { position:relative; width:100%; height:100%; background:#FFFFFF; border-radius:29px; overflow:hidden; }
.notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width:120px; height:22px; background:#0B0C0D; border-radius:0 0 12px 12px; z-index:9; }
.appbar { height:50px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; padding-top:14px; }
.loc-chip { font-size:12px; font-weight:600; color:#2E2F32; display:flex; align-items:center; gap:4px; }
.loc-chip small { color:#74767C; font-weight:400; }
.appbar .icons { display:flex; gap:10px; color:#74767C; font-size:16px; }
.searchbar { margin:2px 14px 0; height:36px; background:#F5F5F5; border-radius:18px; display:flex; align-items:center; gap:8px; padding:0 12px; }
.searchbar span.ph { font-size:13px; color:#74767C; flex:1; }
.eta-strip { margin:8px 14px 0; font-size:11px; color:#0071DC; font-weight:600; display:flex; align-items:center; gap:6px; }
.eta-strip .dot { width:6px; height:6px; border-radius:50%; background:#0071DC; }
.toggle { margin:8px 14px 0; background:#F2F8FD; border-radius:16px; height:32px; display:flex; padding:3px; }
.toggle .seg { flex:1; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; border-radius:14px; }
.toggle .seg.on { background:#FFFFFF; color:#0071DC; box-shadow:0 1px 3px rgba(16,24,40,0.15); }
.toggle .seg.off { color:#74767C; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:10px 12px 4px; }
.card { border:1px solid #E2E8F0; border-radius:12px; padding:9px; position:relative; }
.card .img { height:52px; background:#F5F5F5; border-radius:8px; margin-bottom:7px; position:relative; overflow:hidden; }
.card .img i { position:absolute; border-radius:50%; }
.card .best { background:#E6F1FC; color:#0071DC; font-size:9px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:2px 6px; border-radius:4px; display:inline-block; margin-bottom:5px; }
.card .now { font-size:16px; font-weight:700; }
.card .was { font-size:10px; color:#74767C; text-decoration:line-through; margin-left:4px; }
.card .title { font-size:11px; font-weight:600; line-height:1.3; margin:4px 0 5px; height:28px; overflow:hidden; }
.card .stars { display:flex; gap:2px; margin-bottom:6px; }
.card .add { background:#0071DC; color:#fff; border-radius:14px; height:28px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:54px; border-top:1px solid #E2E8F0; display:flex; background:#fff; }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:9px; font-weight:600; color:#74767C; }
.tab .shape { width:18px; height:18px; border-radius:5px; background:#74767C; opacity:0.55; }
.tab.active { color:#0071DC; }
.tab.active .shape { background:#0071DC; opacity:1; border-radius:50%; }
.tab .badge { position:absolute; margin:-20px 0 0 10px; background:#0071DC; color:#fff; font-size:8px; font-weight:700; width:13px; height:13px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
</style></head>
<body>
<div class="phone">
<div class="screen">
<div class="notch"></div>
<div class="appbar">
<div class="spark spark-sm"><span></span><span></span><span></span></div>
<div class="loc-chip">Sacramento SC <small>▾</small></div>
<div class="icons">♡ 🔔</div>
</div>
<div class="searchbar"><div class="glass"></div><span class="ph">Search Walmart</span></div>
<div class="eta-strip"><span class="dot"></span> Pickup today, 4pm · Delivery as soon as 2pm</div>
<div class="toggle"><div class="seg on">Pickup</div><div class="seg off">Delivery</div></div>
<div class="grid">
<div class="card">
<div class="img"><i style="width:38px;height:46px;left:26px;top:4px;background:#E9F2FB;"></i></div>
<div class="now">$3.98</div>
<div class="title">Great Value Whole Milk, 1 Gallon</div>
<div class="stars"><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star" style="opacity:.3"></span></div>
<div class="add">Add to cart</div>
</div>
<div class="card">
<span class="rollback-tag" style="font-size:9px;padding:2px 6px;">Rollback</span>
<div class="img"><i style="width:40px;height:30px;left:20px;top:12px;background:#FFF3C7;border-radius:40%;"></i></div>
<div><span class="now">$0.58</span><span class="was">$0.68</span></div>
<div class="title">Bananas, each</div>
<div class="stars"><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span></div>
<div class="add">Add to cart</div>
</div>
<div class="card">
<span class="rollback-tag" style="font-size:9px;padding:2px 6px;">Rollback</span>
<div class="img"><i style="width:34px;height:40px;left:24px;top:6px;background:#E9F2FB;border-radius:16%;"></i></div>
<div><span class="now">$12.48</span><span class="was">$18.96</span></div>
<div class="title">Tide PODS Laundry Detergent, 42 ct</div>
<div class="stars"><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star" style="opacity:.3"></span></div>
<div class="add">Add to cart</div>
</div>
<div class="card">
<span class="best">Best seller</span>
<div class="img"><i style="width:44px;height:24px;left:16px;top:14px;background:#F4E6CE;border-radius:30%;"></i></div>
<div class="now">$2.24</div>
<div class="title">Great Value White Bread, 20 oz</div>
<div class="stars"><span class="star"></span><span class="star"></span><span class="star"></span><span class="star" style="opacity:.3"></span><span class="star" style="opacity:.3"></span></div>
<div class="add">Add to cart</div>
</div>
</div>
<div class="tabbar">
<div class="tab active"><div class="shape"></div>Shop</div>
<div class="tab"><div class="shape"></div>Services</div>
<div class="tab"><div class="shape" style="width:22px;height:22px;border-radius:50%;background:#0071DC;color:#fff;"></div>Search</div>
<div class="tab"><div class="shape"></div>Cart<span class="badge">3</span></div>
<div class="tab"><div class="shape"></div>Account</div>
</div>
</div>
</div>
<div class="market">
<div class="m-brand">
<div class="spark spark-sm"><span></span><span></span><span></span></div>
<b>Walmart (iOS)</b>
</div>
<h1>Save money.<br><em>Live better.</em></h1>
<p class="sub">Everyday low prices on groceries, electronics and more — with Pickup and Delivery built into every shop.</p>
<div class="m-cats">
<div class="m-cat"><div class="ico" style="background:#D6E9FB;"></div><span>Grocery</span></div>
<div class="m-cat"><div class="ico" style="background:#F4E6CE;"></div><span>Electronics</span></div>
<div class="m-cat"><div class="ico" style="background:#DCEBD8;"></div><span>Home</span></div>
<div class="m-cat"><div class="ico" style="background:#F1D9DC;"></div><span>Pharmacy</span></div>
<div class="m-cat"><div class="ico" style="background:#E4DCF3;"></div><span>Toys</span></div>
<div class="m-cat"><div class="ico" style="background:#D8ECEC;"></div><span>Auto Care</span></div>
</div>
<div class="m-price-card">
<div class="thumb"></div>
<div>
<span class="rollback-tag">Rollback</span>
<div class="price-row"><span class="now">$12.48</span><span class="was">$18.96</span></div>
<div class="save-line">Save $6.48</div>
<div class="name">Tide PODS Laundry Detergent Pacs, 42 ct</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcb400; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcb400; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7b5a09; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1b61c9; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fcb400; color: #1b61c9;
border: 1px solid #1b61c9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fcb400; color: #111111;
border: 1px solid #d69a03; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b5a09; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d8a720; color: #1b61c9;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#181d26; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topnav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 24px;
border-bottom:1px solid #e0e2e6; background:#ffffff; }
.brand { display:flex; align-items:center; gap:8px; font-weight:700; font-size:16px; letter-spacing:-0.2px; }
.brand .sq { width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg,#fcb400,#ffce33); }
.navcrumb { display:flex; align-items:center; gap:6px; font-size:13px; color:#5b6270; }
.navcrumb b { color:#181d26; }
.navcrumb .chev { opacity:0.5; }
.navactions { display:flex; align-items:center; gap:10px; }
.btn-primary { background:#1b61c9; color:#fff; border:none; border-radius:12px; padding:8px 16px;
font-size:13px; font-weight:500; box-shadow: rgba(0,0,0,0.32) 0px 0px 1px, rgba(45,127,249,0.28) 0px 1px 3px; }
.avatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#254fad,#1b61c9); }
.workarea { display:flex; height:calc(640px - 56px); }
.sidebar { width:180px; border-right:1px solid #e0e2e6; padding:16px 12px; background:#f8fafc; }
.sidebar h4 { font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:#8a92a3; margin:4px 8px 10px; font-weight:700; }
.viewitem { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:8px; font-size:13px; color:#333d4b; margin-bottom:2px; }
.viewitem.active { background:#e8effc; color:#1b61c9; font-weight:600; }
.viewitem .dot { width:8px; height:8px; border-radius:3px; }
.g1 .dot{background:#1b61c9;} .g2 .dot{background:#00b8a3;} .g3 .dot{background:#8b6bf2;} .g4 .dot{background:#fcb400;}
.main { flex:1; display:flex; flex-direction:column; }
.toolbar { height:44px; display:flex; align-items:center; gap:10px; padding:0 18px; border-bottom:1px solid #e0e2e6; }
.pill { border:1px solid #e0e2e6; border-radius:8px; padding:5px 10px; font-size:12px; color:#5b6270; display:flex; align-items:center; gap:6px; }
.spacer { flex:1; }
.grid { flex:1; padding:0; overflow:hidden; }
table { border-collapse:collapse; width:100%; }
th { text-align:left; font-size:12px; font-weight:600; color:#5b6270; padding:10px 14px; border-bottom:1px solid #e0e2e6; border-right:1px solid #eceef1; background:#fbfcfd; }
th .fh { display:flex; align-items:center; gap:6px; }
th .fdot { width:7px; height:7px; border-radius:2px; }
td { padding:9px 14px; font-size:13px; border-bottom:1px solid #eceef1; border-right:1px solid #eceef1; color:#333d4b; }
tr:nth-child(even) td { background:#fbfcfd; }
.status { display:inline-block; padding:3px 10px; border-radius:6px; font-size:11px; font-weight:600; }
.s-live{background:#dff5e6;color:#0a7a3d;} .s-review{background:#fff2d6;color:#946200;} .s-plan{background:#e8effc;color:#1b61c9;}
.who { display:flex; align-items:center; gap:6px; }
.who .av{width:18px;height:18px;border-radius:50%;}
.addrow { padding:9px 14px; font-size:13px; color:#8a92a3; }
.addrow b { color:#1b61c9; font-weight:600; }
</style></head>
<body>
<nav class="topnav">
<div class="brand"><span class="sq"></span>Airtable</div>
<div class="navcrumb"><b>Marketing</b><span class="chev">›</span><span>Q3 Launch Plan</span><span class="chev">›</span><span>Grid view</span></div>
<div class="navactions"><button class="btn-primary">Share</button><div class="avatar"></div></div>
</nav>
<div class="workarea">
<aside class="sidebar">
<h4>Views</h4>
<div class="viewitem active g1"><span class="dot"></span>Grid view</div>
<div class="viewitem g2"><span class="dot"></span>Calendar</div>
<div class="viewitem g3"><span class="dot"></span>Kanban board</div>
<div class="viewitem g4"><span class="dot"></span>Timeline</div>
<h4 style="margin-top:22px;">Bases</h4>
<div class="viewitem"><span class="dot" style="background:#00b8a3;"></span>Content calendar</div>
<div class="viewitem"><span class="dot" style="background:#8b6bf2;"></span>Vendor tracker</div>
</aside>
<div class="main">
<div class="toolbar">
<div class="pill">Filter</div>
<div class="pill">Sort</div>
<div class="pill">Group</div>
<div class="spacer"></div>
<div class="pill">Row height</div>
</div>
<div class="grid">
<table>
<tr>
<th style="width:26%;"><div class="fh"><span class="fdot" style="background:#1b61c9;"></span>Task name</div></th>
<th style="width:16%;"><div class="fh"><span class="fdot" style="background:#fcb400;"></span>Status</div></th>
<th style="width:20%;"><div class="fh"><span class="fdot" style="background:#8b6bf2;"></span>Owner</div></th>
<th style="width:16%;"><div class="fh"><span class="fdot" style="background:#00b8a3;"></span>Due date</div></th>
<th style="width:22%;"><div class="fh"><span class="fdot" style="background:#e05fa1;"></span>Notes</div></th>
</tr>
<tr><td>Landing page copy</td><td><span class="status s-live">Live</span></td><td><div class="who"><div class="av" style="background:#f2b6c9;"></div>Jordan</div></td><td>Sep 12</td><td>Final pass approved</td></tr>
<tr><td>Partner asset review</td><td><span class="status s-review">In review</span></td><td><div class="who"><div class="av" style="background:#bfe0d0;"></div>Mina</div></td><td>Sep 14</td><td>Waiting on legal</td></tr>
<tr><td>Email sequence draft</td><td><span class="status s-plan">Planned</span></td><td><div class="who"><div class="av" style="background:#cdd6f2;"></div>Priya</div></td><td>Sep 18</td><td>3 of 5 drafted</td></tr>
<tr><td>Social teaser assets</td><td><span class="status s-live">Live</span></td><td><div class="who"><div class="av" style="background:#f2d9a6;"></div>Carlos</div></td><td>Sep 20</td><td>–</td></tr>
<tr><td>Press embargo list</td><td><span class="status s-review">In review</span></td><td><div class="who"><div class="av" style="background:#d9c8f2;"></div>Yuki</div></td><td>Sep 22</td><td>Confirming 6 outlets</td></tr>
<tr><td>Analytics dashboard</td><td><span class="status s-plan">Planned</span></td><td><div class="who"><div class="av" style="background:#bfe0d0;"></div>Mina</div></td><td>Sep 26</td><td>Blocked on API keys</td></tr>
</table>
<div class="addrow">+ <b>Add a record</b></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #1d5fa8; color: #ffffff;
border: none; border-radius: 2px; padding: 12px 22px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #1d5fa8;
border: 1px solid #1d5fa8; border-radius: 2px;
padding: 11px 21px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #313131;
border: 1px solid #d1d5db; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #f5f6f8; color: #313131;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#444444; font-family:Arial,'Helvetica Neue',sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;background:#154a87;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:18px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:700;color:#cfe0f2;}
.navcta{background:#ffffff;color:#154a87;font-size:11px;font-weight:700;padding:8px 16px;}
.hero{height:150px;display:flex;align-items:center;padding:0 34px;background:#f5f6f8;border-bottom:1px solid #d1d5db;}
.herotext h1{font-size:23px;font-weight:700;color:#313131;margin:0 0 6px;}
.herotext p{font-size:13px;color:#717171;margin:0;max-width:520px;}
.diagram{width:960px;background:#eef1f5;padding:16px 34px;display:flex;gap:16px;border-bottom:1px solid #d1d5db;}
.diagbox{width:180px;height:130px;background:#ffffff;border:1px solid #d1d5db;position:relative;}
.dline{position:absolute;background:#1d5fa8;}
.dl1{width:120px;height:1px;top:30px;left:30px;}
.dl2{width:1px;height:70px;top:30px;left:30px;}
.dl3{width:1px;height:70px;top:30px;left:150px;}
.ddim{position:absolute;bottom:6px;left:30px;font-size:9px;color:#1d5fa8;font-weight:700;}
.specs{flex:1;}
.spectitle{font-size:12px;font-weight:700;color:#313131;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;}
.specrow{display:flex;justify-content:space-between;font-size:12px;padding:5px 0;border-bottom:1px solid #d1d5db;color:#444444;}
.seclabel{font-size:13px;font-weight:700;color:#313131;padding:16px 34px 10px;}
.grid{display:flex;gap:14px;padding:0 34px;}
.card{width:150px;border:1px solid #d1d5db;padding:9px;background:#f8f9fa;}
.thumb{height:80px;margin-bottom:8px;background:#eef1f5;}
.ptitle{font-size:11px;font-weight:700;color:#313131;line-height:1.3;height:28px;overflow:hidden;}
.pspec{font-size:10px;color:#717171;margin-top:4px;}
.pcta{font-size:10px;color:#1d5fa8;font-weight:700;margin-top:5px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:10px;color:#717171;border-top:1px solid #d1d5db;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Terra Universal</div>
<div class="navlinks"><span>Cleanrooms</span><span>Environmental Monitoring</span><span>Flooring</span><span>Furniture</span><span>HVAC</span></div>
<div class="navcta">Request a Quote</div>
</div>
<div class="hero">
<div class="herotext"><h1>Precision-Engineered Cleanroom Infrastructure</h1><p>ISO-classified components, CAD drawings, and compliance documentation for controlled environments.</p></div>
</div>
<div class="diagram">
<div class="diagbox"><div class="dline dl1"></div><div class="dline dl2"></div><div class="dline dl3"></div><div class="ddim">48.0" x 30.0"</div></div>
<div class="specs">
<div class="spectitle">Model CR-4830 Specifications</div>
<div class="specrow"><span>ISO Classification</span><span>ISO 5 / Class 100</span></div>
<div class="specrow"><span>Wall Panel</span><span>Powder-Coated Steel</span></div>
<div class="specrow"><span>HEPA Filtration</span><span>99.99% @ 0.3 micron</span></div>
<div class="specrow"><span>Certification</span><span>CAD Drawing Available</span></div>
</div>
</div>
<div class="seclabel">Related Components</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1d5fa8,#8cb3d4)"></div><div class="ptitle">Modular Cleanroom Panel</div><div class="pspec">ISO 5-8 Rated</div><div class="pcta">Request Quote ›</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8cb3d4,#1d5fa8)"></div><div class="ptitle">Particle Counter Unit</div><div class="pspec">Real-Time Monitoring</div><div class="pcta">Request Quote ›</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#313131,#1d5fa8)"></div><div class="ptitle">ESD Workbench</div><div class="pspec">Stainless Steel</div><div class="pcta">Request Quote ›</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1d5fa8,#313131)"></div><div class="ptitle">HEPA Fan Filter Unit</div><div class="pspec">120V / 60Hz</div><div class="pcta">Request Quote ›</div></div>
</div>
<div class="footer"><span>© Controlled Environment Systems</span><span>Compliance Certificates on File</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #F8F6F2; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #F8F6F2; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.1px; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #6B6B6B; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #2A4420; color: #FFFFFF;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: transparent; color: #2A4420;
border: 1px solid #2A4420; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c0bfbc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B6B6B; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #F0EDE7; color: #2A4420;
border-radius: 12px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F8F6F2; color:#1A1A1A; box-sizing:border-box;
font-family:'AG1Sans','Graphik','GT America',-apple-system,'Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#F8F6F2; border-bottom:1px solid #E0DDD8; }
.brand { font-size:20px; font-weight:600; letter-spacing:0.02em; }
.navlinks { display:flex; gap:26px; font-size:13px; color:#3D3D3D; font-weight:500; }
.cart { background:#2A4420; color:#fff; font-size:12px; font-weight:600; padding:8px 16px; border-radius:8px; }
main { display:flex; height:576px; }
.gallery { width:400px; background:#2A4420; position:relative; display:flex; align-items:center; justify-content:center; }
.scoop { width:180px; height:180px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#4a6b38,#2A4420 70%);
box-shadow:0 20px 40px rgba(0,0,0,0.3); position:relative; }
.scoop::after { content:''; position:absolute; top:14px; left:14px; right:14px; bottom:14px;
border-radius:50%; background:linear-gradient(160deg,#6b8f52,#3a5a2a); opacity:0.8; }
.pouch { position:absolute; bottom:56px; width:90px; height:130px; background:#1D3316; border-radius:10px;
box-shadow:0 12px 24px rgba(0,0,0,0.3); }
.pouch::before { content:'AG1'; position:absolute; top:44px; left:0; right:0; text-align:center;
color:#C49A3C; font-size:13px; font-weight:700; letter-spacing:0.1em; }
.badge-trust { position:absolute; top:24px; left:24px; background:#C49A3C; color:#1D3316; font-size:10px;
font-weight:700; padding:5px 12px; border-radius:9999px; }
.info { flex:1; padding:30px 38px; display:flex; flex-direction:column; gap:10px; }
.eyebrow { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#2A4420; }
h1 { font-size:24px; font-weight:600; margin:0; line-height:1.28; }
.stars { font-size:12px; color:#C49A3C; }
.stars .n { color:#6B6B6B; margin-left:6px; font-size:11.5px; }
.price-card { background:#fff; border-radius:12px; padding:14px 16px; display:flex; align-items:center;
justify-content:space-between; box-shadow:0 1px 0 #E0DDD8 inset; }
.price-card .price { font-size:19px; font-weight:700; }
.price-card .save { font-size:11px; color:#C49A3C; font-weight:700; }
.check-list { display:flex; flex-direction:column; gap:6px; }
.check { font-size:12.5px; color:#3D3D3D; }
.check::before { content:'✓ '; color:#2A4420; font-weight:700; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#2A4420; color:#fff; border:none; border-radius:8px; padding:13px 18px;
font-size:14px; font-weight:600; }
.btn-outline { border:1.5px solid #2A4420; color:#2A4420; background:#fff; border-radius:8px; padding:11.5px 16px;
font-size:12.5px; font-weight:600; white-space:nowrap; }
.meta { font-size:11px; color:#6B6B6B; }
</style></head>
<body>
<nav>
<div class="brand">Ag1</div>
<div class="navlinks"><span>Shop</span><span>The Science</span><span>What's Inside</span><span>Reviews</span></div>
<div class="cart">Bag · 1</div>
</nav>
<main>
<div class="gallery">
<span class="badge-trust">Trusted by 1M+</span>
<div class="scoop"></div>
<div class="pouch"></div>
</div>
<div class="info">
<span class="eyebrow">Foundational Nutrition</span>
<h1>AG1 — Daily Greens Superfood Powder</h1>
<div class="stars">★★★★★ <span class="n">4.7 · 41,209 reviews</span></div>
<div class="price-card"><span class="price">$79.00 / mo</span><span class="save">Save $20 + free gift</span></div>
<div class="check-list">
<span class="check">75 vitamins, minerals & whole-food sourced ingredients</span>
<span class="check">Supports gut, immunity & energy</span>
<span class="check">Third-party tested for purity</span>
</div>
<div class="btn-row">
<button class="btn-primary">Subscribe & Save</button>
<button class="btn-outline">One-Time Purchase</button>
</div>
<span class="meta">Cancel or pause anytime</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f8fe; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f8fe; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; letter-spacing: 0.2px; background: #121f36; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; letter-spacing: 0.2px; background: #f4f8fe; color: #272727;
border: 1px solid #121f36; border-radius: 9999px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #272727;
border: 1px solid #c1c4c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.2px; background: #e6f7f4; color: #1c1c1c;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f8fe; color:#272727; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#f4f8fe; border-bottom:1px solid #eaeaea; }
.brand { font-size:18px; font-weight:600; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; color:#272727; }
.util { font-size:13px; color:#6b6b6b; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 64px); }
.stage { padding:26px; display:flex; flex-direction:column; gap:12px; background:#f5f5f5; }
.crumb { font-size:11px; color:#888888; }
.pan { flex:1; border-radius:8px; background:#ffffff; box-shadow:0 1px 3px rgba(0,0,0,0.08); position:relative; overflow:hidden; }
.pan::before { content:''; position:absolute; left:14%; top:20%; width:72%; height:60%; border-radius:12px; background:#121f36; opacity:0.9; }
.pan::after { content:''; position:absolute; left:22%; top:30%; width:56%; height:20%; border-radius:8px; background:#f4f8fe; }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; border-radius:8px; background:#ffffff; box-shadow:0 1px 3px rgba(0,0,0,0.08); }
.info { padding:24px 34px; display:flex; flex-direction:column; gap:11px; overflow:hidden; }
.cat { font-size:12px; font-weight:500; letter-spacing:0.1px; color:#6b6b6b; }
h1 { margin:0; font-size:28px; font-weight:600; line-height:1.25; letter-spacing:-0.3px; }
.rating { display:flex; align-items:center; gap:8px; font-size:12px; color:#6b6b6b; }
.stars { color:#121f36; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:16px; font-weight:400; }
.badge-new { background:#e6f7f4; color:#1c1c1c; font-size:11px; font-weight:600; letter-spacing:0.2px; text-transform:uppercase; padding:4px 10px; border-radius:9999px; }
.desc { font-size:16px; color:#333333; line-height:1.5; }
.swatches { display:flex; gap:10px; align-items:center; }
.swatch { width:24px; height:24px; border-radius:50%; border:1px solid #d1d5db; }
.swatch.on { border:2px solid #d0d0d0; }
.sw1{background:#121f36;} .sw2{background:#b1b7c3;} .sw3{background:#eaeaea;}
.trust { background:#d4edda; color:#155724; border-radius:8px; font-size:12px; padding:8px 12px; width:fit-content; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#121f36; color:#fff; border:none; height:48px; font-size:15px; font-weight:500; letter-spacing:0.2px; border-radius:9999px; }
.btn-secondary { width:150px; background:#f4f8fe; border:2px solid #272727; color:#272727; height:48px; font-size:15px; font-weight:500; border-radius:9999px; }
</style></head>
<body>
<nav>
<p class="brand">Brooklinen</p>
<div class="navlinks"><span>Sheets</span><span>Duvets</span><span>Towels</span><span>Sale</span></div>
<div class="util">Search Account Cart (1)</div>
</nav>
<main>
<div class="stage">
<div class="crumb">Brooklinen / Sheets / Luxe Core</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Luxe Core Collection</span>
<h1>Luxe Core Sheet Set</h1>
<div class="rating"><span class="stars">★★★★★</span> 4.8 · 24,610 reviews</div>
<div class="price-row"><span class="price">$149</span><span class="badge-new">New</span></div>
<p class="desc">470 thread count sateen weave, long-staple cotton — soft from the first night, softer with every wash.</p>
<div class="swatches">
<span class="swatch sw1 on"></span><span class="swatch sw2"></span><span class="swatch sw3"></span>
</div>
<div class="trust">In Stock · Ships within 24 hours</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Learn More</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fdf7f1; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fdf7f1; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #71a7f4; color: #000000;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #fdf7f1; color: #231f20;
border: 1px solid #71a7f4; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fdf7f1; color: #231f20;
border: 1px solid #c6c1bd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffcf9f; color: #231f20;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fdf7f1; font-family:'Inter',Arial,sans-serif; color:#231f20; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #efefef;background:#fdf7f1;}
.logo{font-size:20px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.hero{height:230px;display:flex;align-items:center;padding:0 32px;}
.heroText{width:50%;}
.heroText h1{font-size:32px;font-weight:700;letter-spacing:-.4px;margin:0 0 12px;line-height:1.25;}
.heroText p{font-size:14px;color:#444;max-width:320px;margin:0 0 16px;}
.btn{display:inline-block;background:#71a7f4;color:#fff;font-size:16px;font-weight:600;padding:14px 28px;border-radius:8px;}
.heroImg{width:50%;height:200px;position:relative;}
.bidet{position:absolute;right:60px;top:10px;width:130px;height:170px;border-radius:24px 24px 60px 60px;background:linear-gradient(180deg,#ffffff,#e8f0fe);border:2px solid #71a7f4;}
.bidet:before{content:'';position:absolute;left:24px;top:20px;width:82px;height:14px;border-radius:9999px;background:#ffcf9f;}
.badges{display:flex;gap:8px;padding:16px 32px 0;}
.badge-pill{background:#e5e5eb;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:6px 14px;border-radius:9999px;color:#231f20;}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:206px;background:#fff;border-radius:12px;padding:16px;box-shadow:0 1px 4px rgba(0,0,0,.06);position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:4px;z-index:2;}
.thumb{height:100px;border-radius:8px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;}
.tshape{width:70px;height:80px;border-radius:16px 16px 40px 40px;}
.ptitle{font-size:16px;font-weight:600;margin:0 0 4px;}
.pprice{font-size:16px;font-weight:400;color:#444;margin:0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Tushy</div>
<div class="navlinks"><span>Bidets</span><span>Accessories</span><span>Sustainability</span></div>
</div>
<div class="hero">
<div class="heroText">
<h1>Clean water. Cleaner conscience.</h1>
<p>Modern bidet attachments that cut toilet paper use and feel genuinely good every time.</p>
<div class="btn">Shop Bidets</div>
</div>
<div class="heroImg"><div class="bidet"></div></div>
</div>
<div class="badges">
<div class="badge-pill">Toilet-Paper-Free</div>
<div class="badge-pill">No Plumber Needed</div>
<div class="badge-pill">Fits Any Toilet</div>
</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#e60000;color:#fff;">Sale</span><div class="thumb"><div class="tshape" style="background:linear-gradient(180deg,#71a7f4,#346ab7)"></div></div><div class="ptitle">Classic 3.0</div><div class="pprice">$99</div></div>
<div class="card"><span class="badge" style="background:#71a7f4;color:#fff;">New</span><div class="thumb"><div class="tshape" style="background:linear-gradient(180deg,#487ecb,#346ab7)"></div></div><div class="ptitle">Spa 3.0 Warm Water</div><div class="pprice">$149</div></div>
<div class="card"><div class="thumb"><div class="tshape" style="background:linear-gradient(180deg,#ffcf9f,#fcb68c)"></div></div><div class="ptitle">Ambient Nightlight</div><div class="pprice">$25</div></div>
<div class="card"><div class="thumb"><div class="tshape" style="background:linear-gradient(180deg,#71a7f4,#487ecb)"></div></div><div class="ptitle">Deluxe Bidet Seat</div><div class="pprice">$399</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121417; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121417; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #baa35b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: #a72a2f; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; background: transparent; color: #fafafa;
border: 1px solid #d4d4d8; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #27272a; color: #fafafa;
border: 1px solid #d4d4d8; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #baa35b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #52525b; color: #fafafa;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#121417; font-family:'Soleil','Helvetica Neue',Helvetica,Arial,sans-serif; color:#c9c9cc; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #2a2a2e;}
.logo{font-family:'DIN 2014','Helvetica Neue',Arial,sans-serif;font-size:22px;font-weight:700;letter-spacing:-1px;color:#f2f2f3;text-transform:uppercase;}
.navlinks{display:flex;gap:28px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#8a8a90;}
.navlinks .on{color:#a72a2f;}
.hero{height:300px;display:flex;border-bottom:1px solid #2a2a2e;}
.heroL{width:440px;padding:44px 36px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#a72a2f;margin-bottom:14px;}
.h1{font-family:'DIN 2014','Helvetica Neue',Arial,sans-serif;font-size:44px;font-weight:700;letter-spacing:-1.5px;color:#f2f2f3;line-height:1.02;margin:0 0 16px;text-transform:uppercase;}
.sub{font-size:15px;line-height:1.6;color:#9a9a9f;max-width:340px;margin:0 0 22px;}
.cta{width:190px;height:48px;border-radius:4px;background:#a72a2f;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
.heroR{flex:1;position:relative;background:radial-gradient(circle at 65% 45%,#1e2024,#121417 70%);overflow:hidden;}
.chair{position:absolute;right:80px;top:34px;width:190px;height:230px;}
.chairback{position:absolute;top:0;left:20px;width:150px;height:150px;border-radius:14px 14px 30px 30px;background:linear-gradient(160deg,#3f3f46,#18181b);border-top:2px solid #a72a2f;}
.chairseat{position:absolute;top:150px;left:10px;width:170px;height:36px;border-radius:8px;background:#3f3f46;}
.chairleg{position:absolute;top:186px;left:80px;width:8px;height:44px;background:#26262a;border-radius:0 0 4px 4px;}
.specrow{display:flex;gap:1px;background:#2a2a2e;margin:0;}
.spec{flex:1;background:#18181b;text-align:center;padding:14px 8px;}
.speclabel{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#6f6f75;}
.specval{font-size:16px;color:#f2f2f3;margin-top:4px;font-family:'DIN 2014','Helvetica Neue',Arial,sans-serif;font-weight:700;}
.seclabel{padding:20px 36px 12px;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#6f6f75;}
.grid{display:flex;gap:14px;padding:0 36px;}
.card{width:200px;background:#1a1a1a;border-radius:4px;padding:12px;position:relative;}
.card:hover{}
.card:before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:transparent;border-radius:4px 4px 0 0;}
.thumb{height:100px;border-radius:4px;margin-bottom:10px;}
.pname{font-size:13px;font-weight:600;color:#e6e6e7;margin:0 0 6px;}
.pprice{font-size:14px;font-weight:700;color:#f2f2f3;}
.badge{position:absolute;top:10px;right:10px;background:#f59e0b;color:#1a1a1a;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 7px;border-radius:2px;}
</style>
<div class="nav">
<div class="logo">Secretlab Office</div>
<div class="navlinks"><div class="on">Chairs</div><div>Desks</div><div>Accessories</div><div>Support</div></div>
</div>
<div class="hero">
<div class="heroL">
<div class="kicker">Engineered Seating</div>
<div class="h1">Built Like<br>An Instrument.</div>
<div class="sub">Zero applied ornamentation. Depth comes from contrast alone, not shadow.</div>
<div class="cta">Configure Chair</div>
</div>
<div class="heroR">
<div class="chair"><div class="chairback"></div><div class="chairseat"></div><div class="chairleg"></div></div>
</div>
</div>
<div class="specrow">
<div class="spec"><div class="speclabel">Recline</div><div class="specval">165°</div></div>
<div class="spec"><div class="speclabel">Load Rating</div><div class="specval">130kg</div></div>
<div class="spec"><div class="speclabel">Foam</div><div class="specval">Cold-Cure</div></div>
<div class="spec"><div class="speclabel">Warranty</div><div class="specval">5 Years</div></div>
</div>
<div class="seclabel">Titan Series</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#a72a2f,#18181b 75%)"></div><div class="pname">Titan Evo Crimson</div><div class="pprice">$549</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#117937,#18181b 75%)"></div><div class="pname">Titan Evo Racing Green</div><div class="pprice">$549</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3f3f46,#18181b 75%)"></div><div class="pname">Magnus Pro Desk</div><div class="pprice">$899</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#22d3ee,#18181b 75%)"></div><div class="pname">Skele Head Pillow</div><div class="pprice">$59</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1f1f1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1f1f1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 300; line-height: 1.25; margin: 0; color: #1f1f1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: 0.03em; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.08em; background: #1f1f1f; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.08em; background: #ffffff; color: #1f1f1f;
border: 1px solid #1f1f1f; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.625; background: #ffffff; color: #1f1f1f;
border: 1px solid #c7c7c7; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: 0.1em; background: #ececec; color: #1f1f1f;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; background:#fff; color:#1f1f1f; }
*{box-sizing:border-box;}
.nav{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #ececec;}
.logo{font-size:22px;font-weight:300;letter-spacing:1px;}
.navlinks{display:flex;gap:28px;font-size:14px;font-weight:400;}
.hero{height:280px;background:#1f1f1f;color:#fff;display:flex;align-items:center;padding:0 40px;}
.herotext{max-width:520px;}
.headline{font-size:44px;font-weight:300;line-height:1.15;letter-spacing:-0.5px;margin-bottom:14px;}
.sub{font-size:15px;color:#dedede;margin-bottom:20px;max-width:420px;}
.btn{display:inline-block;border:1px solid #fff;color:#fff;font-size:13px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;padding:13px 30px;}
.sec{padding:20px 40px;}
.sectitle{font-size:14px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:#6b6b6b;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:220px;}
.thumb{height:130px;background:#f7f7f7;margin-bottom:10px;}
.badge{display:inline-block;background:#ececec;font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;padding:4px 10px;margin-bottom:8px;}
.title{font-size:16px;font-weight:500;}
.model{font-size:13px;color:#6b6b6b;margin-top:4px;letter-spacing:0.03em;}
.spectable{margin-top:16px;border-top:1px solid #ececec;}
.row{display:flex;border-bottom:1px solid #ececec;padding:8px 0;font-size:13px;}
.row .l{width:180px;font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:#6b6b6b;}
.row .v{color:#1f1f1f;}
</style>
<div class="nav">
<div class="logo">Miele</div>
<div class="navlinks"><span>Laundry</span><span>Kitchen</span><span>Coffee</span><span>Vacuum Cleaners</span></div>
<div>⚲ ♡ 🛒</div>
</div>
<div class="hero">
<div class="herotext">
<div class="headline">Immer besser.</div>
<div class="sub">Precision engineering for a lifetime of performance, built without compromise.</div>
<div class="btn">Discover the Range</div>
</div>
</div>
<div class="sec">
<div class="sectitle">Featured Appliances</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="badge">Test Winner</div><div class="title">W1 Front-Loading Washer</div><div class="model">WWG 660 WCS</div></div>
<div class="card"><div class="thumb"></div><div class="badge">Energy A+++</div><div class="title">Built-In Coffee System</div><div class="model">CM 7750 CH</div></div>
<div class="card"><div class="thumb"></div><div class="title">Combination Steam Oven</div><div class="model">DGC 7440 HC</div></div>
</div>
<div class="spectable">
<div class="row"><div class="l">Capacity</div><div class="v">9 kg drum volume</div></div>
<div class="row"><div class="l">Noise Level</div><div class="v">45 dB spin cycle</div></div>
<div class="row"><div class="l">Energy Class</div><div class="v">A+++ (-30%)</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f2ee; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f2ee; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #3e2015; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #f3f2ee; color: #121212;
border: 1px solid #3e2015; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f3f2ee; color: #121212;
border: 1px solid #bbbab7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #899df1; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f3f2ee; font-family:'Playfair Display',Georgia,serif; color:#242833; }
*{box-sizing:border-box;}
.nav{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #dedede;}
.logo{font-size:20px;font-weight:600;color:#121212;}
.navlinks{font-family:Arial,sans-serif;display:flex;gap:22px;font-size:13px;color:#6a6a6a;}
.cta{background:#3e2015;color:#fff;font-family:Arial,sans-serif;font-size:12px;font-weight:600;padding:9px 20px;border-radius:8px;}
.hero{height:250px;display:flex;background:#eceae2;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 34px;}
.herotext h1{font-size:34px;font-weight:600;margin:0 0 12px;line-height:1.2;color:#121212;}
.herotext p{font-family:Arial,sans-serif;font-size:13px;color:#6a6a6a;margin:0 0 16px;max-width:290px;}
.btn{display:inline-block;background:#3e2015;color:#fff;font-family:Arial,sans-serif;font-size:13px;font-weight:600;padding:12px 24px;border-radius:8px;width:fit-content;}
.heroimg{width:54%;position:relative;overflow:hidden;background:linear-gradient(160deg,#dedede,#899df1 70%);}
.plate{position:absolute;bottom:50px;left:110px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#f3f2ee 40%,#3e2015 100%);}
.plate2{position:absolute;bottom:30px;left:240px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,#f3f2ee 40%,#1990c6 100%);}
.sec{padding:20px 34px 0;}
.sectitle{font-family:Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#6a6a6a;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border-radius:12px;padding:10px;}
.thumb{height:96px;border-radius:8px;margin-bottom:8px;}
.pname{font-size:14px;font-weight:600;}
.pprice{font-family:Arial,sans-serif;font-size:13px;color:#6a6a6a;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Mora Ceramics</div>
<div class="navlinks"><span>Dinnerware</span><span>Serveware</span><span>Sets</span><span>Journal</span></div>
<div class="cta">Shop Sets</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Plates that carry the mark of the hand.</h1>
<p>Stoneware dinnerware honoring the clay it came from, one piece at a time.</p>
<div class="btn">Shop Dinnerware</div>
</div>
<div class="heroimg"><div class="plate2"></div><div class="plate"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:radial-gradient(circle,#f3f2ee,#3e2015)"></div><div class="pname">Speckled Dinner Plate</div><div class="pprice">$34</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle,#f3f2ee,#899df1)"></div><div class="pname">Cobalt Serving Bowl</div><div class="pprice">$58</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle,#f3f2ee,#1990c6)"></div><div class="pname">Mora 12-Piece Set</div><div class="pprice">$189</div></div>
<div class="card"><div class="thumb" style="background:radial-gradient(circle,#f3f2ee,#136f99)"></div><div class="pname">Handled Mug Set</div><div class="pprice">$46</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0d0d0d; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0d0d0d; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; background: #e5222a; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; background: transparent; color: #ffffff;
border: 1px solid #e5222a; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #141414; color: #ffffff;
border: 1px solid #4a4a4a; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #222222; color: #cccccc;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#0d0d0d; font-family:'Barlow Condensed',Arial,sans-serif; color:#fff; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #222;}
.logo{font-size:22px;font-weight:800;letter-spacing:-.5px;text-transform:uppercase;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#888;}
.navlinks .on{color:#e5222a;}
.hero{height:250px;display:flex;background:#141414;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;}
.herotext .spec{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#e5222a;margin-bottom:10px;letter-spacing:.5px;}
.herotext h1{font-size:44px;font-weight:800;text-transform:uppercase;letter-spacing:-1px;margin:0 0 12px;line-height:.95;}
.herotext p{font-family:'Open Sans',Arial,sans-serif;font-size:14px;color:#cccccc;margin:0 0 18px;max-width:300px;line-height:1.6;}
.btn{display:inline-block;background:#e5222a;color:#fff;font-size:15px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:14px 28px;border-radius:0;width:fit-content;}
.heroimg{width:54%;position:relative;background:#0d0d0d;}
.heroimg .chassis{position:absolute;left:60px;top:40px;width:170px;height:170px;background:linear-gradient(160deg,#222,#000);border:1px solid #333;}
.heroimg .chassis:before{content:'';position:absolute;left:20px;top:20px;width:130px;height:10px;background:#e5222a;}
.heroimg .chassis:after{content:'';position:absolute;left:20px;bottom:20px;width:60px;height:60px;border-radius:9999px;border:2px solid #444;}
.spectable{display:flex;gap:1px;background:#222;margin:0 40px;}
.speccell{flex:1;background:#141414;text-align:center;padding:10px;}
.speclabel{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:#888;}
.specvalue{font-family:'IBM Plex Mono',monospace;font-size:14px;color:#fff;margin-top:4px;}
.sec{padding:20px 40px 0;}
.sectitle{font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#888;margin-bottom:14px;}
.grid{display:flex;gap:1px;background:#222;}
.card{flex:1;background:#141414;padding:14px;border-left:2px solid #e5222a;}
.pname{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#fff;}
.pprice{font-family:'IBM Plex Mono',monospace;font-size:14px;color:#e5222a;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Maingear</div>
<div class="navlinks"><div class="on">Desktops</div><div>Laptops</div><div>Configure</div><div>Support</div></div>
</div>
<div class="hero">
<div class="herotext">
<div class="spec">UNIT// F132-RTX</div>
<h1>Built to spec, not to trend.</h1>
<p>Configuration terminal for hand-built systems, part-numbered and benchmarked.</p>
<div class="btn">Configure</div>
</div>
<div class="heroimg"><div class="chassis"></div></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">CPU</div><div class="specvalue">i9-14900K</div></div>
<div class="speccell"><div class="speclabel">GPU</div><div class="specvalue">RTX 4090</div></div>
<div class="speccell"><div class="speclabel">RAM</div><div class="specvalue">64GB</div></div>
<div class="speccell"><div class="speclabel">Storage</div><div class="specvalue">2TB NVMe</div></div>
</div>
<div class="sec">
<div class="sectitle">Configurations</div>
<div class="grid">
<div class="card"><div class="pname">F132 // TOWER-RTX4090</div><div class="pprice">$3,299.00</div></div>
<div class="card"><div class="pname">MG1 // COMPACT-RTX4080</div><div class="pprice">$2,499.00</div></div>
<div class="card"><div class="pname">MX17 // LAPTOP-RTX4070</div><div class="pprice">$2,899.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1f7ccc; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1f7ccc; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #95bfe3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a62ad; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1f7ccc; color: #000000;
border: 1px solid #0a62ad; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1f7ccc; color: #f5f5f5;
border: 1px solid #418fd3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #95bfe3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1c78c7; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#393c41; box-sizing:border-box;
font-family:"Open Sans","Noto Sans JP",-apple-system,"system-ui",Roboto,Arial,sans-serif; }
* { box-sizing:border-box; }
.layout { display:flex; height:100%; }
.sidebar { width:200px; background:#f7f8fa; border-right:1px solid #dee0e3; padding:22px 0; }
.sb-brand { padding:0 20px 18px; font-size:14px; font-weight:700; color:#1f2124; }
.sb-item { padding:9px 20px; font-size:13px; color:#585c63; }
.sb-item.active { color:#393c41; font-weight:700; background:#ffffff; border-left:3px solid #1f7ccc; }
.sb-group { padding:14px 20px 4px; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:#9297a1; }
.content { flex:1; padding:28px 34px; overflow:hidden; }
.crumb { font-size:12px; color:#767b85; margin-bottom:6px; }
h1 { font-size:24px; font-weight:700; margin:0 0 6px; }
.lead { font-size:14px; color:#585c63; max-width:520px; line-height:1.5; margin:0 0 24px; }
.mint-pill { display:inline-flex; align-items:center; background:#30f4c5; color:#0e7365; border-radius:4px; padding:3px 10px; font-size:12px; font-weight:600; margin-bottom:18px; }
.row { display:flex; gap:20px; }
.panel { flex:1; border:1px solid #dee0e3; border-radius:4px; padding:20px; }
.panel h3 { font-size:14px; font-weight:700; margin:0 0 14px; color:#1f2124; }
.btn-demo { display:flex; gap:10px; flex-wrap:wrap; }
.b1 { background:#000000; color:#ffffff; border-radius:4px; height:40px; padding:0 18px; display:flex; align-items:center; font-size:14px; box-shadow:rgba(0,0,0,0.12) 0px 1px 2px 0px; }
.b2 { background:#ffffff; color:#585c63; border:1px solid #585c63; border-radius:4px; height:40px; padding:0 18px; display:flex; align-items:center; font-size:14px; }
.b3 { background:#000000; color:#ffffff; border-radius:20px; height:32px; padding:0 16px; display:flex; align-items:center; font-size:13px; }
.field { margin-top:16px; }
.field label { display:block; font-size:12px; color:#767b85; margin-bottom:6px; }
.field .box { background:#ffffff; border:1px solid #dee0e3; border-radius:4px; height:40px; padding:0 16px; display:flex; align-items:center; font-size:14px; color:#9297a1; }
.field .box.focus { border:1px solid #1f7ccc; color:#393c41; }
.swatches { display:flex; gap:10px; margin-top:12px; }
.sw { flex:1; border-radius:4px; height:44px; display:flex; align-items:flex-end; padding:4px 6px; font-size:10px; color:#ffffff; font-weight:700; }
.badge-row { display:flex; gap:8px; margin-top:14px; }
.bp { border-radius:4px; padding:4px 10px; font-size:12px; }
.bp.pos { background:#1dc487; color:#ffffff; }
.bp.notice { background:#debf43; color:#393c41; }
.bp.neg { background:#cc1f24; color:#ffffff; }
.bp.att { background:#db7d42; color:#ffffff; }
</style></head>
<body>
<div class="layout">
<aside class="sidebar">
<div class="sb-brand">GMO Pepabo (Inhouse) — Inhouse</div>
<div class="sb-group">Foundation</div>
<div class="sb-item">Color</div>
<div class="sb-item">Typography</div>
<div class="sb-item">Elevation</div>
<div class="sb-group">Components</div>
<div class="sb-item active">Button</div>
<div class="sb-item">Textfield</div>
<div class="sb-item">Card</div>
<div class="sb-item">Avatar</div>
</aside>
<section class="content">
<div class="crumb">Inhouse / Components</div>
<h1>Button</h1>
<p class="lead">A neutral pepper base flavor — brand-swappable at the token layer so every GMO Pepabo (Inhouse) service can re-color it as its own.</p>
<div class="mint-pill">Flavor: pepabo</div>
<div class="row">
<div class="panel">
<h3>Button variants</h3>
<div class="btn-demo">
<div class="b1">Save</div>
<div class="b2">Cancel</div>
<div class="b3">Pill</div>
</div>
<div class="field">
<label>Textfield — default</label>
<div class="box focus">Enter a value</div>
</div>
</div>
<div class="panel">
<h3>Semantic intentions</h3>
<div class="swatches">
<div class="sw" style="background:#1f7ccc">Informative</div>
<div class="sw" style="background:#1dc487">Positive</div>
<div class="sw" style="background:#cc1f24">Negative</div>
</div>
<div class="badge-row">
<span class="bp pos">Positive</span>
<span class="bp notice">Notice</span>
<span class="bp neg">Negative</span>
<span class="bp att">Attention</span>
</div>
</div>
</div>
</section>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; margin: 0; color: #7e7e7e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 1.5px; background: #000000; color: #ffffff;
border: none; border-radius: 0px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 1.5px; background: transparent; color: #ffffff;
border: 1px solid #ffffff; border-radius: 0px;
padding: 16px 32px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5; background: #1a1a1a; color: #ffffff;
border: 1px solid #404040; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7e7e7e; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #242424; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.logo { display:flex; align-items:center; gap:8px; }
.mchip { display:flex; height:14px; border-radius:2px; overflow:hidden; }
.mchip span { width:6px; }
.m1 { background:#0066b1; } .m2 { background:#1c69d4; } .m3 { background:#e22718; }
.wordmark { font-size:14px; font-weight:700; letter-spacing:1px; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#bbbbbb; }
.heroband { position:relative; height:340px; display:flex; flex-direction:column; justify-content:center; padding:0 40px;
background:
radial-gradient(120% 90% at 75% 20%, rgba(226,39,24,0.18), transparent 60%),
linear-gradient(115deg,#1a1a1a 0%,#0d0d0d 55%,#000 100%); overflow:hidden; }
.heroband::after { content:''; position:absolute; right:-60px; bottom:-40px; width:520px; height:220px;
background:linear-gradient(100deg,#2b2b2b,#050505 70%); border-radius:8px; transform:rotate(-3deg); opacity:0.9; }
.heroband .content { position:relative; z-index:2; }
.heroband h1 { font-size:56px; font-weight:700; text-transform:uppercase; margin:0 0 8px; line-height:1.02; letter-spacing:0; max-width:560px; }
.heroband p { font-size:16px; font-weight:300; color:#bbbbbb; margin:0 0 16px; max-width:420px; }
.btnrow { display:flex; gap:14px; }
.btn { border:1px solid #fff; color:#fff; padding:13px 26px; font-size:13px; font-weight:700; letter-spacing:1.5px; }
.stripe { height:4px; background:linear-gradient(90deg,#0066b1 0 33%, #1c69d4 33% 66%, #e22718 66% 100%); }
.specrow { display:grid; grid-template-columns:repeat(4,1fr); }
.spec { background:#0d0d0d; padding:24px; border-right:1px solid #262626; }
.spec:last-child { border-right:none; }
.spec b { display:block; font-size:28px; font-weight:700; }
.spec span { font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#7e7e7e; }
</style></head>
<body>
<nav>
<div class="logo"><span class="mchip"><span class="m1"></span><span class="m2"></span><span class="m3"></span></span><span class="wordmark">BMW M</span></div>
<div class="navlinks"><span>Models</span><span>Topics</span><span>Magazine</span><span>Configurator</span><span>Fastlane</span></div>
<div class="navlinks"><span>EN</span><span>Search</span></div>
</nav>
<div class="heroband">
<div class="content">
<h1>THE ULTIMATE<br>DRIVING MACHINE</h1>
<p>Track-bred precision. Street-legal restraint. This is BMW M.</p>
<div class="btnrow"><span class="btn">EXPLORE M MODELS</span><span class="btn">CONFIGURE</span></div>
</div>
</div>
<div class="stripe"></div>
<div class="specrow">
<div class="spec"><b>0-100</b><span>km/h in 3.0s</span></div>
<div class="spec"><b>503 kW</b><span>M TwinPower Turbo</span></div>
<div class="spec"><b>305 km/h</b><span>Top track speed</span></div>
<div class="spec"><b>xDrive</b><span>M All-Wheel Drive</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.5px; background: #f92300; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.5px; background: #f7f7f7; color: #121212;
border: 1px solid #f92300; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #bebebe; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f92300; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f7f7f7; font-family:Arial,'Helvetica Neue',sans-serif; color:#3c3c3c; }
*{box-sizing:border-box;}
.nav{height:64px;background:#f7f7f7;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:18px;font-weight:700;color:#121212;text-transform:uppercase;letter-spacing:.5px;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:#121212;}
.hero{height:220px;background:#121212;color:#fff;display:flex;align-items:center;padding:0 30px;gap:30px;}
.herotext{width:320px;}
.herotext h1{font-size:32px;font-weight:700;line-height:1.2;margin:0 0 10px;}
.herotext p{font-size:14px;color:#c8cfd2;margin:0 0 16px;}
.cta{display:inline-block;background:#f92300;color:#fff;font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:14px 28px;}
.rack{flex:1;height:170px;position:relative;}
.strap{position:absolute;top:20px;left:80px;width:6px;height:130px;background:#4b556c;}
.biner{position:absolute;top:40px;left:60px;width:46px;height:60px;border:6px solid #f92300;border-radius:20px;}
.biner2{position:absolute;top:80px;left:180px;width:40px;height:52px;border:5px solid #9ebadc;border-radius:18px;}
.rowlabel{padding:14px 30px 8px;font-size:18px;font-weight:700;color:#121212;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:196px;background:#fff;padding:0;}
.thumb{height:110px;background:#f2f2f2;position:relative;display:flex;align-items:center;justify-content:center;}
.shape{width:46px;height:70px;border-radius:6px;}
.badge{position:absolute;top:8px;left:8px;background:#f92300;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:2px 8px;}
.body{padding:8px 0;}
.ptitle{font-size:15px;font-weight:600;color:#121212;padding:8px 0 4px;}
.pprice{font-size:14px;color:#595959;}
.saleprice{color:#ac1800;}
</style>
<div class="nav">
<div class="logo">Topologie</div>
<div class="navlinks"><div>Straps</div><div>Cases</div><div>Bags</div><div>Cord</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Built like your climbing rack.</h1>
<p>Utilitarian phone gear, raw webbing, and hardware that holds.</p>
<div class="cta">Shop New</div>
</div>
<div class="rack"><div class="strap"></div><div class="biner"></div><div class="biner2"></div></div>
</div>
<div class="rowlabel">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge">New</span><div class="shape" style="background:linear-gradient(160deg,#f92300,#4b556c)"></div></div><div class="body"><div class="ptitle">Cord Phone Strap</div><div class="pprice">$28.00</div></div></div>
<div class="card"><div class="thumb"><div class="shape" style="background:linear-gradient(160deg,#121212,#4b556c)"></div></div><div class="body"><div class="ptitle">Woven Wrist Lanyard</div><div class="pprice saleprice">$18.00</div></div></div>
<div class="card"><div class="thumb"><div class="shape" style="background:linear-gradient(160deg,#4b556c,#9ebadc)"></div></div><div class="body"><div class="ptitle">Carabiner Keychain</div><div class="pprice">$14.00</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #16264a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #16264a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9198a8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1c1c1c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #16264a; color: #ffffff;
border: 1px solid #1c1c1c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #16264a; color: #f5f5f5;
border: 1px solid #3a4765; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9198a8; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #172443; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1A1C; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; height:640px; }
.col { flex:1; overflow:hidden; }
.hero { height:220px; background:linear-gradient(160deg,#2c3f63,#16264A); position:relative; }
.eyebrow { position:absolute; top:18px; left:24px; font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#D2A23E; }
.hotelname { position:absolute; bottom:18px; left:24px; font-size:26px; font-weight:700; color:#fff; }
.location { position:absolute; bottom:18px; right:24px; font-size:12px; color:rgba(255,255,255,0.75); }
.memberpanel { margin:18px 24px; background:#16264A; border-radius:14px; padding:16px 20px; display:flex; align-items:center; }
.tier { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#D2A23E; }
.points { font-size:26px; font-weight:800; color:#fff; margin-top:4px; }
.progwrap { margin-left:auto; width:220px; }
.progtext { font-size:11px; color:rgba(255,255,255,0.7); margin-bottom:6px; }
.progtrack { height:6px; background:#243A66; border-radius:3px; overflow:hidden; }
.progtrack i { display:block; height:6px; background:#B3852A; }
.sectitle { margin:18px 24px 10px; font-size:13px; font-weight:700; color:#5C5C63; }
.ratecard { margin:0 24px 10px; border:1.5px solid #E3E1DA; border-radius:12px; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; }
.ratecard.sel { border-color:#B3852A; background:#F6F4EF; }
.ratename { font-size:14px; font-weight:700; }
.ratesub { font-size:11px; color:#5C5C63; margin-top:2px; }
.rateprice { font-size:15px; font-weight:700; }
.col2 { width:280px; flex:0 0 auto; padding:18px 20px; }
.keycard { background:#16264A; border-radius:16px; padding:18px; color:#fff; }
.keyeyebrow { font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#D2A23E; }
.keyglyph { font-size:32px; margin:12px 0; }
.keytext { font-size:13px; }
.tierbadges { display:flex; gap:6px; margin-top:16px; flex-wrap:wrap; }
.tb { font-size:10px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; padding:4px 8px; border-radius:999px; border:1px solid #E3E1DA; color:#5C5C63; }
.tb.on { border-color:#B3852A; color:#B3852A; }
.bookingbar { position:absolute; left:0; right:0; bottom:0; background:#fff; border-top:1px solid #E3E1DA; padding:14px 24px;
display:flex; align-items:center; justify-content:space-between; }
.bprice { font-size:18px; font-weight:700; }
.bpoints { font-size:11px; color:#5C5C63; }
.bookbtn { background:#B3852A; color:#fff; font-weight:700; font-size:14px; padding:10px 24px; border-radius:8px; }
</style></head>
<body>
<div class="wrap">
<div class="col">
<div class="hero"><span class="eyebrow">The Ritz-Carlton</span><span class="hotelname">Marriott Bonvoy (iOS)</span><span class="location">Kyoto, Japan · ★★★★★</span></div>
<div class="memberpanel">
<div><div class="tier">Titanium Elite</div><div class="points">124,500 pts</div></div>
<div class="progwrap"><div class="progtext">32,000 pts to next free night</div><div class="progtrack"><i style="width:74%"></i></div></div>
</div>
<div class="sectitle">Select a rate</div>
<div class="ratecard sel"><div><div class="ratename">Member Rate</div><div class="ratesub">Earn 2,480 points</div></div><div class="rateprice">$412/night</div></div>
<div class="ratecard"><div><div class="ratename">Points Redemption</div><div class="ratesub">No cash due</div></div><div class="rateprice">45,000 pts</div></div>
<div class="ratecard"><div><div class="ratename">Flexible</div><div class="ratesub">Free cancellation</div></div><div class="rateprice">$452/night</div></div>
</div>
<div class="col2">
<div class="keycard">
<div class="keyeyebrow">Mobile Key</div>
<div class="keyglyph">🔑</div>
<div class="keytext">Skip the front desk<br/>Tap to unlock · Room 1408</div>
</div>
<div class="tierbadges">
<span class="tb">Silver</span><span class="tb">Gold</span><span class="tb">Platinum</span><span class="tb on">Titanium</span><span class="tb">Ambassador</span>
</div>
</div>
</div>
<div class="bookingbar"><div><div class="bprice">$412 / night</div><div class="bpoints">Earn 2,480 points</div></div><div class="bookbtn">Book</div></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fa5014; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fa5014; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fa5014; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fa5014; color: #f5f5f5;
border: 1px solid #f96a38; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d24311; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard", "Malgun Gothic", "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #dcdcdc; }
.brand { font-size:19px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:14px; font-weight:500; color:#000000; }
.cta { background:#fa5014; color:#ffffff; border:none; border-radius:3px; height:36px; padding:0 20px;
font-size:13px; font-weight:700; box-shadow:rgba(0,0,0,0.2) 0px 2px 10px 0px; }
.statrow { display:flex; gap:14px; padding:16px 28px; }
.stat { flex:1; background:#ffffff; border-radius:16px; box-shadow:rgba(0,0,0,0.1) 0px 2px 20px 0px;
padding:14px 18px; position:relative; overflow:hidden; }
.stat .ghost { position:absolute; right:6px; bottom:-14px; font-size:64px; font-weight:700; color:#000000; opacity:0.05; }
.stat .num { font-size:24px; font-weight:700; margin:0; position:relative; }
.stat .lbl { font-size:12px; color:#666666; margin:4px 0 0; position:relative; }
.main { display:flex; gap:0; height:400px; }
.queue { width:340px; padding:0 28px; overflow:hidden; }
.queue h3 { font-size:14px; font-weight:700; margin:0 0 10px; }
.row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f0f0f0; }
.row .id { font-size:12px; color:#999999; width:56px; }
.row .addr { font-size:13px; color:#111111; flex:1; }
.pill { font-size:11px; font-weight:700; border-radius:9999px; padding:3px 10px; }
.pill.dispatch { background:#fff0ea; color:#fa5014; }
.pill.done { background:#f6f6f6; color:#999999; }
.mapzone { flex:1; margin-right:28px; background:#f6f6f6; border-radius:12px; position:relative; overflow:hidden; }
.route { position:absolute; left:12%; top:30%; width:60%; height:2px; border-top:2px dashed #fa5014; transform:rotate(8deg); }
.pin { position:absolute; width:14px; height:14px; border-radius:50%; background:#fa5014; box-shadow:0 0 0 4px rgba(250,80,20,0.18); }
.pin1{ left:14%; top:26%; } .pin2{ left:44%; top:44%; } .pin3{ left:72%; top:34%; }
.rider { position:absolute; width:10px; height:10px; border-radius:50%; background:#2d3ce6; }
.rider1{ left:30%; top:56%; } .rider2{ left:60%; top:60%; }
</style></head>
<body>
<nav>
<p class="brand">Barogo</p>
<div class="navlinks"><span>Dispatch</span><span>Riders</span><span>Stores</span><span>About</span></div>
<button class="cta">Contact sales</button>
</nav>
<div class="statrow">
<div class="stat"><span class="ghost">24</span><p class="num">1,842</p><p class="lbl">Active dispatches today</p></div>
<div class="stat"><span class="ghost">08</span><p class="num">6.4 min</p><p class="lbl">Avg. pickup time</p></div>
<div class="stat"><span class="ghost">99</span><p class="num">1,206</p><p class="lbl">Riders online now</p></div>
</div>
<div class="main">
<div class="queue">
<h3>Dispatch queue</h3>
<div class="row"><span class="id">#4821</span><span class="addr">Gangnam-daero 123, Store A</span><span class="pill dispatch">Dispatching</span></div>
<div class="row"><span class="id">#4820</span><span class="addr">Yeoksam-ro 45, Store B</span><span class="pill done">Delivered</span></div>
<div class="row"><span class="id">#4819</span><span class="addr">Seocho-daero 210, Store C</span><span class="pill dispatch">Dispatching</span></div>
<div class="row"><span class="id">#4818</span><span class="addr">Nonhyeon-ro 88, Store D</span><span class="pill done">Delivered</span></div>
<div class="row"><span class="id">#4817</span><span class="addr">Teheran-ro 152, Store E</span><span class="pill dispatch">Dispatching</span></div>
</div>
<div class="mapzone">
<div class="route"></div>
<div class="pin pin1"></div><div class="pin pin2"></div><div class="pin pin3"></div>
<div class="rider rider1"></div><div class="rider rider2"></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #00202c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #00202c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #00202c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #21a8ff; color: #ffffff;
border: none; border-radius: 8px; padding: 13px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #21a8ff;
border: 1px solid #21a8ff; border-radius: 8px;
padding: 12px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #00202c;
border: 1px solid #b4c3c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; background: #45c371; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:Figtree,Arial,sans-serif; color:#334d5a; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #b4c3c9;}
.logo{font-size:20px;font-weight:700;color:#00202c;}
.navlinks{display:flex;gap:24px;font-size:15px;font-weight:500;color:#00202c;}
.navbtn{background:#21a8ff;color:#fff;font-size:14px;font-weight:600;padding:11px 22px;border-radius:8px;}
.hero{height:230px;background:#00202c;display:flex;align-items:center;padding:0 40px;justify-content:space-between;}
.h1{font-size:34px;font-weight:700;color:#fff;margin:0 0 10px;letter-spacing:-0.5px;max-width:420px;}
.hsub{font-size:14px;color:#b4c3c9;max-width:380px;margin:0 0 16px;}
.hbtns{display:flex;gap:10px;}
.hbtn1{background:#21a8ff;color:#fff;font-size:14px;font-weight:600;padding:12px 24px;border-radius:8px;}
.hbtn2{background:transparent;border:1.5px solid #fff;color:#fff;font-size:14px;font-weight:600;padding:11px 23px;border-radius:8px;}
.dial{width:130px;height:130px;border-radius:50%;border:6px solid #45c371;position:relative;}
.dial:before{content:'45mi';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;font-weight:700;}
.section{padding:20px 40px 0;}
.sectitle{font-size:16px;font-weight:600;color:#00202c;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#fff;border-radius:12px;box-shadow:0 4px 16px rgba(0,32,44,0.10);padding:14px;}
.thumb{height:78px;background:#f0f4f6;border-radius:8px;margin-bottom:8px;}
.ptitle{font-size:15px;font-weight:600;color:#00202c;}
.pprice{font-size:14px;font-weight:600;color:#00202c;margin-top:4px;}
.chip{display:inline-block;margin-top:6px;background:#45c371;color:#fff;font-size:11px;font-weight:500;padding:3px 10px;border-radius:9999px;}
</style>
<div class="nav">
<div class="logo">Rachio</div>
<div class="navlinks"><span>Controllers</span><span>Sensors</span><span>App</span><span>Support</span></div>
<div class="navbtn">Shop Now</div>
</div>
<div class="hero">
<div><div class="h1">Smart Irrigation That Saves Real Water</div><div class="hsub">Connect the sprinkler system you already have to weather intelligence and cut water waste.</div><div class="hbtns"><div class="hbtn1">Shop Controllers</div><div class="hbtn2">See How It Works</div></div></div>
<div class="dial"></div>
</div>
<div class="section">
<div class="sectitle">Smart Controllers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#21a8ff,#00202c);"></div><div class="ptitle">Rachio 3 Controller</div><div class="pprice">$229.99</div><div class="chip">Zone Active</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#45c371,#00202c);"></div><div class="ptitle">Wireless Flow Meter</div><div class="pprice">$79.99</div><div class="chip">In Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#dfad72,#00202c);"></div><div class="ptitle">Soil Moisture Sensor</div><div class="pprice">$59.99</div><div class="chip" style="background:#8ea153;">New</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#6e94b1,#00202c);"></div><div class="ptitle">8-Zone Expansion Kit</div><div class="pprice">$149.99</div><div class="chip">In Stock</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f2f0eb; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f2f0eb; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #767573; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #edebe9; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f2f0eb; color: #000000;
border: 1px solid #edebe9; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f2f0eb; color: #111111;
border: 1px solid #ceccc8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767573; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f1efeb; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f2f0eb; color:rgba(0,0,0,.87); box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing:-.01em; }
* { box-sizing:border-box; }
nav { height:56px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-weight:600; font-size:16px; color:#006241; }
.navlinks { display:flex; gap:22px; font-size:13px; }
.pill50 { border-radius:50px; padding:7px 16px; font-size:14px; font-weight:600; border:none; }
.pill50.dark { background:#000; color:#fff; }
.pill50.outline { background:transparent; border:1px solid rgba(0,0,0,.87); color:rgba(0,0,0,.87); }
.hero { display:grid; grid-template-columns:1fr 1.2fr; gap:20px; padding:22px 32px; align-items:center; }
.herophoto { height:160px; border-radius:16px; background:radial-gradient(circle at 40% 40%, #ffe3d0, #e07a4a 70%); position:relative; }
.herophoto::after { content:''; position:absolute; left:40%; top:15%; width:22%; height:70%; background:rgba(255,255,255,.35); border-radius:8px; }
.hero h1 { font-size:32px; font-weight:600; color:#006241; margin:0 0 8px; }
.hero p { font-size:14px; color:rgba(0,0,0,.58); margin:0 0 14px; max-width:340px; }
.greenband { background:#1E3932; color:#fff; padding:20px 32px; }
.sizes { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.sizeopt { text-align:center; }
.cup { width:22px; height:30px; margin:0 auto 6px; background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.5));
clip-path:polygon(15% 0%,85% 0%,100% 100%,0% 100%); }
.sizeopt.active .cup { outline:2px solid #00754A; outline-offset:3px; border-radius:2px; }
.sizeopt .nm { font-size:13px; font-weight:700; color:#c2ef4e; color:#fff; }
.sizeopt .oz { font-size:10.5px; color:rgba(255,255,255,.7); }
.rewardrow { display:flex; align-items:center; gap:10px; }
.goldpill { border:1px solid #cba258; color:#cba258; border-radius:50px; padding:4px 12px; font-size:12px; font-weight:700; }
.addorder { background:#00754A; color:#fff; border:none; border-radius:50px; padding:12px 26px; font-size:14px; font-weight:700; margin-left:auto; }
.giftgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:16px 32px; }
.gift { height:64px; border-radius:12px; box-shadow:0 0 6px rgba(0,0,0,.1); }
.g1 { background:linear-gradient(135deg,#ffd8a8,#ff922b); }
.g2 { background:linear-gradient(135deg,#c1fbd4,#2f9e44); }
.g3 { background:linear-gradient(135deg,#ffc9de,#e64980); }
.g4 { background:linear-gradient(135deg,#d0ebff,#1c7ed6); }
.frap { position:absolute; right:24px; bottom:56px; width:56px; height:56px; border-radius:50%; background:#00754A;
box-shadow:0 0 6px rgba(0,0,0,.24), 0 8px 12px rgba(0,0,0,.14); display:flex; align-items:center; justify-content:center; }
.frap::after { content:'☕'; font-size:22px; }
footer { background:#1E3932; color:rgba(255,255,255,.7); padding:12px 32px; display:flex; justify-content:space-between;
font-size:11px; position:relative; }
</style></head>
<body>
<div style="position:relative;">
<nav>
<div class="brand">Starbucks</div>
<div class="navlinks"><span>Menu</span><span>Rewards</span><span>Gift Cards</span></div>
<div style="display:flex;gap:8px;"><button class="pill50 outline">Sign in</button><button class="pill50 dark">Join now</button></div>
</nav>
<section class="hero">
<div class="herophoto"></div>
<div>
<h1>Pink Energy Drink</h1>
<p>Strawberry açaí, coconut milk, and a scoop of freeze-dried strawberries.</p>
<button class="pill50" style="background:#00754A;color:#fff;">Give them a try</button>
</div>
</section>
<section class="greenband">
<div class="sizes">
<div class="sizeopt"><div class="cup"></div><div class="nm">Tall</div><div class="oz">12 fl oz</div></div>
<div class="sizeopt active"><div class="cup"></div><div class="nm">Grande</div><div class="oz">16 fl oz</div></div>
<div class="sizeopt"><div class="cup"></div><div class="nm">Venti</div><div class="oz">24 fl oz</div></div>
<div class="sizeopt"><div class="cup"></div><div class="nm">Trenta</div><div class="oz">30 fl oz</div></div>
</div>
<div class="rewardrow">
<span class="goldpill">★ 200★ item</span>
<button class="addorder">Add to Order</button>
</div>
</section>
<section class="giftgrid">
<div class="gift g1"></div><div class="gift g2"></div><div class="gift g3"></div><div class="gift g4"></div>
</section>
<div class="frap"></div>
<footer>
<span>© Starbucks</span>
<span>Starbucks · Rewards · Careers · Legal</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1d1b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1d1b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #1d1d1b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #7c7d7f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #2e5b66; color: #ffffff;
border: none; border-radius: 2px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: transparent; color: #2e5b66;
border: 1px solid #2e5b66; border-radius: 2px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1d1d1b;
border: 1px solid #c6c6c6; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7d7f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.8px; background: #e2e8ea; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eeece9; color:#1d1d1b; box-sizing:border-box;
font-family:'FS Elliot',Arial,'Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
nav { height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#ffffff; }
.brand { font-size:19px; font-weight:700; color:#2e5b66; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#444444; }
.btn-primary { background:#2e5b66; color:#fff; border:none; border-radius:2px; padding:11px 20px; font-size:13px; font-weight:600; }
main { display:flex; height:calc(640px - 66px - 44px); }
.gallery { width:390px; background:#f4f2f1; position:relative; display:flex; align-items:center; justify-content:center; }
.cabinet { width:120px; height:170px; background:linear-gradient(180deg,#2e5b66,#1c3b44); border-radius:2px; position:relative; }
.cabinet .drawer { position:absolute; left:8px; right:8px; height:36px; border:1px solid rgba(255,255,255,0.25); }
.d1 { top:8px; } .d2 { top:48px; } .d3 { top:88px; } .d4 { top:128px; }
.info { flex:1; padding:28px 32px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:12px; color:#7c7d7f; text-transform:uppercase; letter-spacing:0.4px; }
h1 { font-size:22px; font-weight:700; margin:0; }
.code { font-size:12px; color:#444444; }
.price { font-size:20px; font-weight:700; }
.swrow { display:flex; flex-direction:column; gap:6px; }
.swlabel { font-size:11px; color:#7c7d7f; }
.swatches { display:flex; gap:8px; }
.csw { width:28px; height:28px; border-radius:9999px; border:2px solid transparent; position:relative; }
.csw.on { border-color:#1d1d1b; }
.csw.on::after { content:''; position:absolute; inset:2px; border:2px solid #eeece9; border-radius:9999px; }
.c1 { background:#2e5b66; } .c2 { background:#5b819f; } .c3 { background:#7ababb; } .c4 { background:#bccfa1; } .c5 { background:#f6e5de; }
.desc { font-size:13px; color:#444444; line-height:1.5; max-width:340px; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-add { flex:1; background:#2e5b66; color:#fff; border:none; border-radius:2px; padding:14px; font-size:14px; font-weight:600; }
.btn-sec { background:#fff; color:#1d1d1b; border:1px solid #c3c2c2; border-radius:2px; padding:14px 18px; font-size:13px; font-weight:600; }
footer { padding:12px 34px; border-top:1px solid #c3c2c2; font-size:11px; color:#7c7d7f; display:flex; justify-content:space-between; }
</style></head>
<body>
<nav>
<div class="brand">Bisley</div>
<div class="navlinks"><span>Filing Cabinets</span><span>Lockers</span><span>Desks</span><span>Storage</span></div>
<button class="btn-primary">Request Sample</button>
</nav>
<main>
<div class="gallery"><div class="cabinet"><div class="drawer d1"></div><div class="drawer d2"></div><div class="drawer d3"></div><div class="drawer d4"></div></div></div>
<div class="info">
<span class="cat">4-Drawer Filing Cabinet</span>
<h1>Bisley MultiDrawer 4-High</h1>
<span class="code">Available in 28 colors</span>
<div class="price">£289.00</div>
<div class="swrow"><span class="swlabel">Powder-coat finish</span>
<div class="swatches"><span class="csw c1 on"></span><span class="csw c2"></span><span class="csw c3"></span><span class="csw c4"></span><span class="csw c5"></span></div>
</div>
<p class="desc">Precision-welded steel, ball-bearing runners, and anti-tilt mechanism — built to a millimeter tolerance.</p>
<div class="btn-row">
<button class="btn-add">Add to Cart</button>
<button class="btn-sec">Compare Sizes</button>
</div>
</div>
</main>
<footer><span>© Bisley</span><span>British-made · Precision Steel Storage</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #17cc5f; color: #000000;
border: none; border-radius: 6px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: transparent; color: #000000;
border: 1px solid #17cc5f; border-radius: 6px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1e1e1e;
border: 1px solid #c7c7c7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: 0.2px; background: #363131; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#1e1e1e; color:#ffffff; box-sizing:border-box; font-family:'CrealitySans',-apple-system,'Helvetica Neue',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;background:#1e1e1e;border-bottom:1px solid #363131;display:flex;align-items:center;justify-content:space-between;padding:0 26px;}
.nav .logo span{color:#17cc5f;}
.nav .logo{font-weight:700;font-size:16px;}
.nav .links{display:flex;gap:18px;font-size:14px;font-weight:500;}
.wrap{display:flex;height:584px;}
.left{width:400px;background:#1e1e1e;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;}
.printer{width:200px;height:220px;border:6px solid #383838;border-radius:8px;position:relative;background:#2a2a2a;}
.printer::before{content:'';position:absolute;top:20px;left:20px;right:20px;height:6px;background:#17cc5f;border-radius:3px;box-shadow:0 0 12px rgba(23,204,95,.6);}
.printer::after{content:'';position:absolute;bottom:20px;left:20px;right:20px;height:70px;border:1px solid #454545;background:rgba(0,187,255,.06);}
.badge-hot{position:absolute;top:24px;left:24px;background:#fa541c;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.right{flex:1;padding:28px 32px;display:flex;flex-direction:column;}
h1{font-size:24px;font-weight:700;margin:0 0 8px;}
.sub{color:#98999e;font-size:14px;margin:0 0 14px;}
.price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;}
.price{font-size:24px;font-weight:700;}
.strike{color:#98999e;text-decoration:line-through;font-size:14px;}
.spec-badges{display:flex;gap:8px;margin-bottom:18px;}
.spec-badge{background:#363131;color:#fff;font-size:13px;font-weight:500;padding:4px 10px;border-radius:6px;}
.desc{font-size:14px;color:#cbccd1;line-height:1.5;margin:0 0 18px;}
.chips{display:flex;gap:8px;margin-bottom:20px;}
.chip{background:#363131;color:#98999e;font-size:13px;border-radius:9999px;padding:6px 16px;height:34px;display:flex;align-items:center;}
.chip.active{background:#17cc5f;color:#1e1e1e;}
.actions{display:flex;gap:10px;margin-top:auto;}
.btn-primary{background:#17cc5f;color:#fff;font-size:16px;font-weight:600;letter-spacing:.5px;border-radius:6px;padding:12px 28px;height:44px;display:flex;align-items:center;}
.btn-secondary{background:transparent;color:#17cc5f;font-size:16px;font-weight:600;border:1.5px solid #17cc5f;border-radius:6px;padding:11px 27px;height:44px;display:flex;align-items:center;}
</style>
</head>
<body>
<div class="nav"><div class="logo">Creality</div><div class="links"><span>3D Printers</span><span>Filament</span><span>Parts</span><span>Support</span></div></div>
<div class="wrap">
<div class="left"><div class="badge-hot">Hot</div><div class="printer"></div></div>
<div class="right">
<h1>K1 Speed 3D Printer</h1>
<p class="sub">600mm/s Max Speed · Auto Bed Leveling</p>
<div class="price-row"><span class="price">$599.00</span><span class="strike">$699.00</span></div>
<div class="spec-badges"><span class="spec-badge">300×300×300mm</span><span class="spec-badge">Wi-Fi Enabled</span></div>
<p class="desc">Print at speeds up to 600mm/s without sacrificing layer quality. Full enclosure, auto bed leveling, and AI-powered failure detection built in.</p>
<div class="chips"><span class="chip active">Printers</span><span class="chip">Enclosed</span><span class="chip">Fast</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Compare</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f7f4; color: #1a202c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f7f4; color: #1a202c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.32; letter-spacing: -0.25px; margin: 0; color: #1a202c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.38; letter-spacing: 0.5px; margin: 0; color: #718096; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; background: #1e5c9a; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; background: #f9f7f4; color: #1e5c9a;
border: 1px solid #1e5c9a; border-radius: 8px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9f7f4; color: #1a202c;
border: 1px solid #c1c1c2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #718096; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #f4f0e9; color: #475569;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f7f4; font-family:Arial,'Helvetica Neue',Roboto,sans-serif; color:#2d3748; }
*{box-sizing:border-box;}
.utility{height:32px;background:#f4f0e9;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 32px;font-size:12px;color:#718096;border-bottom:1px solid #e2e8f0;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e2e8f0;}
.logo{font-size:19px;font-weight:600;color:#1a202c;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#2d3748;}
.search{width:260px;height:32px;border:1px solid #e2e8f0;border-radius:4px;display:flex;align-items:center;padding:0 12px;font-size:12px;color:#94a3b8;}
.hero{background:#f4f0e9;padding:24px 40px;border-bottom:1px solid #e2e8f0;}
.hero h1{font-size:24px;font-weight:600;color:#1a202c;margin:0 0 6px;}
.hero p{font-size:14px;color:#2d3748;margin:0;max-width:520px;}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:216px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:4px;padding:12px;}
.thumb{height:80px;border-radius:4px;margin-bottom:8px;}
.sku{font-family:'Courier New',monospace;font-size:12px;color:#718096;margin-bottom:2px;}
.ptitle{font-size:14px;font-weight:600;color:#1a202c;margin-bottom:6px;}
.badgerow{display:flex;gap:4px;margin-bottom:8px;}
.badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;padding:2px 6px;border-radius:4px;color:#fff;}
.b-hot{background:#d97706;} .b-hifi{background:#16a34a;} .b-epi{background:#7c3aed;}
.specrow{display:flex;justify-content:space-between;font-family:'Courier New',monospace;font-size:11px;color:#2d3748;background:#f4f0e9;padding:4px 8px;margin-bottom:1px;}
</style>
<div class="utility">Account · Cart · Distributor Finder</div>
<div class="nav">
<div class="logo">Neb New England Biolabs</div>
<div class="navlinks"><div>Polymerases</div><div>Restriction Enzymes</div><div>DNA Assembly</div><div>Epigenetics</div></div>
<div class="search">M0491S, R0101L...</div>
</div>
<div class="hero">
<h1>DNA-Modifying Enzymes, Since 1974</h1>
<p>Molecular biology reagents built for reproducibility — every SKU documented, every lot traceable.</p>
</div>
<div class="grid">
<div class="card">
<div class="thumb" style="background:linear-gradient(160deg,#1e5c9a,#2d3748)"></div>
<div class="sku">M0491S</div>
<div class="ptitle">Q5 High-Fidelity Polymerase</div>
<div class="badgerow"><span class="badge b-hifi">High Fidelity</span></div>
<div class="specrow"><span>Conc.</span><span>2,000 U/mL</span></div>
<div class="specrow"><span>Storage</span><span>-20°C</span></div>
</div>
<div class="card">
<div class="thumb" style="background:linear-gradient(160deg,#0e7c7b,#1e5c9a)"></div>
<div class="sku">M0494S</div>
<div class="ptitle">Hot Start Taq 2X Master Mix</div>
<div class="badgerow"><span class="badge b-hot">Hot Start</span></div>
<div class="specrow"><span>Conc.</span><span>500 U/mL</span></div>
<div class="specrow"><span>Storage</span><span>-20°C</span></div>
</div>
<div class="card">
<div class="thumb" style="background:linear-gradient(160deg,#7c3aed,#1e5c9a)"></div>
<div class="sku">M0290S</div>
<div class="ptitle">CpG Methyltransferase M.SssI</div>
<div class="badgerow"><span class="badge b-epi">Epigenetics</span></div>
<div class="specrow"><span>Conc.</span><span>4,000 U/mL</span></div>
<div class="specrow"><span>Storage</span><span>-20°C</span></div>
</div>
<div class="card">
<div class="thumb" style="background:linear-gradient(160deg,#1e5c9a,#0e7c7b)"></div>
<div class="sku">R0101L</div>
<div class="ptitle">EcoRI Restriction Enzyme</div>
<div class="badgerow"><span class="badge b-hifi">Cloning</span></div>
<div class="specrow"><span>Conc.</span><span>20,000 U/mL</span></div>
<div class="specrow"><span>Storage</span><span>-20°C</span></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.1px; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #334fb4; color: #ffffff;
border: none; border-radius: 999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #334fb4;
border: 1px solid #334fb4; border-radius: 999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #334fb4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Segoe UI', Arial, sans-serif; background:#fff; color:#3d3d3d; }
*{box-sizing:border-box;}
.announce{height:32px;background:#334fb4;color:#fff;font-size:13px;font-weight:500;text-align:center;line-height:32px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:20px;font-weight:700;color:#1a1a1a;}
.navlinks{display:flex;gap:20px;font-size:15px;font-weight:600;}
.hero{height:230px;display:flex;background:#f7f7f7;}
.herotext{width:420px;display:flex;flex-direction:column;justify-content:center;padding:0 32px;}
.headline{font-size:36px;font-weight:700;line-height:1.15;letter-spacing:-0.3px;margin-bottom:12px;}
.sub{font-size:15px;color:#3d3d3d;margin-bottom:16px;max-width:340px;}
.btn{display:inline-block;background:#334fb4;color:#fff;font-size:15px;font-weight:600;padding:14px 26px;border-radius:8px;width:fit-content;}
.heroimg{flex:1;position:relative;overflow:hidden;background:linear-gradient(160deg,#efefef,#dbe1f7);}
.heroimg:before{content:'';position:absolute;width:100px;height:100px;border-radius:50%;background:#334fb4;opacity:0.15;top:30px;left:60px;}
.heroimg:after{content:'';position:absolute;width:60px;height:60px;border-radius:50%;background:#334fb4;opacity:0.25;bottom:30px;right:100px;}
.sec{padding:16px 32px;}
.chips{display:flex;gap:8px;margin-bottom:14px;}
.chip{background:#efefef;border:1px solid #e0e0e0;border-radius:9999px;padding:6px 14px;font-size:12px;}
.chip.active{background:#334fb4;color:#fff;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#f6f6f6;border:1px solid #e0e0e0;border-radius:12px;padding:8px;}
.thumb{height:150px;border-radius:8px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#334fb4;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:4px;}
.title{font-size:15px;font-weight:600;margin-top:8px;}
.price{font-size:17px;font-weight:700;margin-top:4px;}
</style>
<div class="announce">Free shipping on orders over $50</div>
<div class="nav">
<div class="logo">Milk Barn</div>
<div class="navlinks"><span>New Baby</span><span>Rompers</span><span>Swaddles</span><span>Gifts</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="headline">Made with patience, worn with joy.</div>
<div class="sub">Hand-embroidered baby clothes for gifts that last longer than the giggle.</div>
<div class="btn">Shop New Arrivals</div>
</div>
<div class="heroimg"></div>
</div>
<div class="sec">
<div class="chips"><div class="chip active">All Ages</div><div class="chip">0–3M</div><div class="chip">3–6M</div><div class="chip">1–2Y</div></div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#dbe1f7,#334fb4)"><div class="badge">New</div></div><div class="title">Printed Swaddle Set</div><div class="price">$34</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#334fb4,#b3bfdf)"></div><div class="title">Snap-Front Romper</div><div class="price">$28</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#b3bfdf,#334fb4)"><div class="badge">Gift</div></div><div class="title">First Birthday Bodysuit</div><div class="price">$22</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FEFCF7; color: #1C1C1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FEFCF7; color: #1C1C1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.25; margin: 0; color: #1C1C1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #7A7570; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.4px; background: #F2C53D; color: #1C1C1A;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.4px; background: transparent; color: #1C1C1A;
border: 1px solid #F2C53D; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FEFCF7; color: #1C1C1A;
border: 1px solid #c6c4c0; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7A7570; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.2px; background: #F2C53D; color: #1C1C1A;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#FEFCF7; font-family:'Neue Haas Grotesk','Helvetica Neue',Helvetica,sans-serif; color:#3D3A35; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #DDD9D2;}
.logo{font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;color:#1C1C1A;letter-spacing:-0.2px;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;color:#1C1C1A;}
.cart{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7A7570;}
.hero{height:260px;display:flex;align-items:center;padding:0 40px;background:#F5F1E8;}
.herotext{width:420px;}
.eyebrow{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#7A7570;margin-bottom:16px;}
.headline{font-family:'Cormorant Garamond',Georgia,serif;font-size:42px;font-weight:400;color:#1C1C1A;margin-bottom:14px;line-height:1.1;}
.sub{font-size:14px;line-height:1.6;color:#3D3A35;margin-bottom:22px;max-width:340px;}
.btn{display:inline-block;background:#F2C53D;color:#1C1C1A;font-size:13px;font-weight:500;letter-spacing:.03em;padding:13px 28px;border-radius:4px;}
.pencils{width:250px;height:180px;margin-left:60px;position:relative;}
.pencil{position:absolute;width:190px;height:16px;background:#F2C53D;border-radius:0 8px 8px 0;}
.pencil:before{content:'';position:absolute;left:-14px;top:0;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:14px solid #1C1C1A;}
.sec{padding:20px 40px 0;}
.sectitle{font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#7A7570;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#FFFFFF;border:1px solid #DDD9D2;border-radius:2px;padding:14px;}
.thumb{height:88px;border-radius:2px;margin-bottom:12px;}
.pname{font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;color:#1C1C1A;margin-bottom:4px;}
.pprice{font-size:12px;color:#7A7570;}
</style>
<div class="nav">
<div class="logo">NO 2</div>
<div class="navlinks"><span>Notebooks</span><span>Pencils</span><span>Desk</span></div>
<div class="cart">Cart (0)</div>
</div>
<div class="hero">
<div class="herotext">
<div class="eyebrow">Paper Goods, Considered</div>
<div class="headline">Nothing decorative that isn't load-bearing.</div>
<div class="sub">Stationery built with the modest confidence of the object it's named after.</div>
<div class="btn">Shop the Collection</div>
</div>
<div class="pencils">
<div class="pencil" style="top:20px;left:40px;transform:rotate(-6deg);"></div>
<div class="pencil" style="top:60px;left:20px;transform:rotate(-2deg);"></div>
<div class="pencil" style="top:100px;left:44px;transform:rotate(4deg);"></div>
</div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#F2C53D,#1C1C1A)"></div><div class="pname">No. 2 Pencil Set of 12</div><div class="pprice">$14</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#C4A882,#F5F1E8)"></div><div class="pname">Field Notebook, Ruled</div><div class="pprice">$9</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1C1C1A,#F2C53D)"></div><div class="pname">Brass Desk Sharpener</div><div class="pprice">$28</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff4865; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff4865; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e91e63; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff4865; color: #000000;
border: 1px solid #e91e63; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff4865; color: #f5f5f5;
border: 1px solid #fd647c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fb4165; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0E0E12; color:#F4F4F6; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#0E0E12; padding:22px 16px; position:relative; }
.wm { font-size:20px; font-weight:700; margin-bottom:16px; }
.wm span { color:#FF4865; }
.timeline { position:relative; padding-left:26px; }
.spine { position:absolute; left:5px; top:6px; bottom:0; width:2px; background:#2A2A33; }
.tcard { background:#18181F; border:1px solid #2A2A33; border-radius:18px; padding:12px; margin-bottom:14px; position:relative; }
.dot { position:absolute; left:-21px; top:16px; width:12px; height:12px; border-radius:50%; background:#FF4865;
box-shadow:0 0 0 4px rgba(255,72,101,0.18); }
.trow { display:flex; align-items:center; gap:10px; }
.tav { width:56px; height:56px; border-radius:16px; background:linear-gradient(135deg,#FF7B93,#E91E63); flex-shrink:0; }
.tname { font-size:15px; font-weight:600; }
.tloc { font-size:12px; color:#A0A0AE; margin-top:2px; }
.tcount { font-size:12px; font-weight:600; color:#FF4865; margin-top:4px; }
.charm { margin-left:auto; width:40px; height:40px; border-radius:50%; background:#FF4865; display:flex;
align-items:center; justify-content:center; color:#fff; font-size:16px; flex-shrink:0;
box-shadow:0 6px 16px -4px rgba(255,72,101,0.5); }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:64px; background:rgba(14,14,18,0.94);
border-top:0.5px solid #2A2A33; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:#6C6C7A; text-align:center; }
.tab.on { color:#FF4865; font-weight:600; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:700; letter-spacing:-0.4px; margin:0; }
.brand span { color:#FF4865; }
.tag { font-size:14px; color:#A0A0AE; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:14px; border:1px solid #2A2A33; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#A0A0AE; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:600; }
.typeblock .t2 { font-size:13px; color:#A0A0AE; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:999px;
background:#21212B; border:1px solid #2A2A33; color:#A0A0AE; }
.footer { margin-top:auto; border-top:1px solid #2A2A33; padding-top:16px; font-size:11px; color:#6C6C7A; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<div class="wm">happ<span>n</span></div>
<div class="timeline">
<div class="spine"></div>
<div class="tcard">
<div class="dot"></div>
<div class="trow">
<div class="tav"></div>
<div><div class="tname">Camille, 27</div><div class="tloc">📍 Le Marais · 11 min ago</div><div class="tcount">You crossed paths 3 times</div></div>
<div class="charm">♥</div>
</div>
</div>
<div class="tcard">
<div class="dot"></div>
<div class="trow">
<div class="tav" style="background:linear-gradient(135deg,#C5B3E6,#FF4865)"></div>
<div><div class="tname">Léa, 24</div><div class="tloc">📍 Gare du Nord · 40 min ago</div><div class="tcount">You crossed paths 1 time</div></div>
<div class="charm" style="background:#21212B;box-shadow:none;border:1px solid #2A2A33">♡</div>
</div>
</div>
</div>
<div class="tabbar"><div class="tab on">Timeline</div><div class="tab">Map</div><div class="tab">Chats</div><div class="tab">Profile</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">happn (iOS)<span>.</span></h1>
<p class="tag">A diary of near-misses — a connector-line timeline of real-world crossings, sent forward with a one-tap pink Charm.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#FF4865"></div><small>#FF4865</small></div>
<div class="sw"><div class="chip2" style="background:#E91E63"></div><small>#E91E63</small></div>
<div class="sw"><div class="chip2" style="background:#C5B3E6"></div><small>#C5B3E6</small></div>
<div class="sw"><div class="chip2" style="background:#FFC24B"></div><small>#FFC24B</small></div>
<div class="sw"><div class="chip2" style="background:#0E0E12"></div><small>#0E0E12</small></div>
</div>
<div class="typeblock">
<div class="t1">You crossed paths 3 times</div>
<div class="t2">Poppins + Inter · the crossing count is always pink — the emotional hook</div>
</div>
<div class="taglist">
<span>Crossings timeline</span><span>Charm heart</span><span>Crush gold celebration</span>
<span>Map crossing pins</span><span>FlashNote opener</span>
</div>
<div class="footer">Graphite canvas #0E0E12 · gold reserved strictly for Crush + premium</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1d1d1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 0.8px; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #108474; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1d1d1d;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 1.2px; background: #f04f36; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Libre Franklin', Montserrat, Arial, sans-serif; color:#4d4d4d; }
*{box-sizing:border-box;}
.announce{height:34px;background:#108474;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;letter-spacing:0.8px;text-transform:uppercase;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e6e6e6;}
.logo{font-family:Baskerville,Georgia,serif;font-size:22px;color:#1d1d1d;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;color:#1d1d1d;}
.hero{height:236px;display:flex;background:#f6f6f6;}
.herotext{width:46%;padding:0 34px;display:flex;flex-direction:column;justify-content:center;}
.herotext h1{font-family:Baskerville,Georgia,serif;font-size:34px;font-weight:400;color:#1d1d1d;margin:0 0 10px;letter-spacing:-0.3px;}
.herotext p{font-size:14px;color:#4d4d4d;margin:0 0 16px;max-width:300px;}
.cta{display:inline-block;width:fit-content;background:#108474;color:#fff;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:14px 26px;border-radius:4px;}
.heroimg{width:54%;display:flex;align-items:center;justify-content:center;gap:10px;padding:20px;}
.swatch{width:56px;height:56px;border-radius:9999px;}
.swatchrow{display:flex;gap:12px;padding:16px 34px 0;}
.dot{width:20px;height:20px;border-radius:9999px;border:1.5px solid #1d1d1d;}
.section{padding:16px 34px 0;}
.seclabel{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#7b7b7b;margin-bottom:10px;}
.grid{display:flex;gap:14px;}
.card{width:150px;}
.thumb{height:110px;border-radius:4px;background:#f4f4f4;margin-bottom:8px;}
.ptitle{font-size:15px;font-weight:600;color:#1d1d1d;margin-bottom:4px;}
.pprice{font-size:16px;font-weight:600;color:#1d1d1d;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#1d1d1d;color:#939393;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">Free Shipping on Orders Over $75</div>
<div class="nav">
<div class="logo">Russell Hazel</div>
<div class="navlinks"><div>Desk</div><div>Notebooks</div><div>Trays</div><div>Gifting</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>A desk worth looking at twice.</h1>
<p>Acrylic trays and wire-coil notebooks, made for people who notice details.</p>
<div class="cta">Shop Colorways</div>
</div>
<div class="heroimg">
<div class="swatch" style="background:#108474"></div>
<div class="swatch" style="background:#f04f36"></div>
<div class="swatch" style="background:#1d1d1d"></div>
</div>
</div>
<div class="swatchrow">
<div class="dot" style="background:#108474"></div>
<div class="dot" style="background:#f04f36"></div>
<div class="dot" style="background:#046e82"></div>
<div class="dot" style="background:#84c4bb"></div>
<div class="dot" style="background:#1d1d1d;border-color:#1d1d1d"></div>
</div>
<div class="section">
<div class="seclabel">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#108474,#046e82)"></div><div class="ptitle">Acrylic Desk Tray</div><div class="pprice">$38.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f04f36,#f2614a)"></div><div class="ptitle">Wire-Coil Notebook</div><div class="pprice">$24.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1d1d1d,#4d4d4d)"></div><div class="ptitle">Pen Cup, Fourteen Colors</div><div class="pprice">$18.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#84c4bb,#108474)"></div><div class="ptitle">Letter Tray Set</div><div class="pprice">$52.00</div></div>
</div>
</div>
<div class="footer"><span>© Desk Worth Keeping</span><span>Colorways · Gifting · Returns</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #191919; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #191919; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #929292; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #191919; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #191919; color: #f5f5f5;
border: 1px solid #3c3c3c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929292; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3e3e3e; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#191919; box-sizing:border-box;
font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #e5e7eb; }
.brand { font-size:16px; font-weight:700; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; font-size:15px; font-weight:500; color:#5d6875; }
.navlinks span.on { color:#191919; }
.locale { border:1px solid transparent; border-radius:8px; padding:8px 10px; font-size:13px; color:#191919; }
.hero { padding:44px 40px 28px; display:flex; gap:36px; align-items:center; }
.hero-copy { flex:1; }
.badge { display:inline-block; background:#111111; color:#fff; border-radius:999px; padding:4px 12px;
font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:14px; }
.hero h1 { font-size:38px; font-weight:700; letter-spacing:-1.6px; line-height:1.15; margin:0 0 14px; }
.hero p { font-size:15px; color:#5d6875; max-width:400px; line-height:1.5; margin:0 0 20px; }
.row { display:flex; gap:10px; }
.btn-dark { background:#111111; color:#fff; border-radius:999px; padding:12px 22px; font-size:14px; font-weight:600; }
.btn-outline { background:#fff; color:#111111; border:1px solid #111111; border-radius:999px; padding:11px 22px; font-size:14px; font-weight:600; }
.link-blue { color:#007aff; font-size:13px; font-weight:600; align-self:center; }
.hero-visual { flex:1; height:210px; border-radius:16px; background:linear-gradient(135deg,#f2f5fa,#e9eef7);
position:relative; overflow:hidden; }
.chip { position:absolute; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:10px 14px;
font-size:12px; color:#5d6875; box-shadow:none; }
.chip b { color:#191919; font-size:18px; display:block; }
.chip.c1 { top:24px; left:24px; }
.chip.c2 { bottom:28px; left:60px; }
.chip.c3 { top:70px; right:30px; }
.curve { position:absolute; inset:0; }
.tabs { margin:0 40px; display:flex; gap:6px; background:#f2f5fa; border:1px solid rgba(25,25,25,0.1);
border-radius:999px; padding:5px; width:fit-content; }
.tab { padding:8px 16px; border-radius:999px; font-size:12px; color:#191919; }
.tab.sel { background:#fff; font-weight:600; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:22px 40px 0; }
.card { border:1px solid #e5e7eb; border-radius:10px; padding:18px; }
.card .tag { font-size:11px; font-weight:700; text-transform:uppercase; color:#5d6875; letter-spacing:0.05em; }
.card h3 { font-size:15px; margin:8px 0 6px; }
.card p { font-size:12.5px; color:#5d6875; line-height:1.5; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">Datarize</p>
<div class="navlinks"><span class="on">Audience</span><span>Campaigns</span><span>Analytics</span><span>Pricing</span></div>
<div class="locale">EN</div>
</nav>
<section class="hero">
<div class="hero-copy">
<span class="badge">Autonomous</span>
<h1>Behavior captured.<br>Growth automated.</h1>
<p>Turn every click, scroll, and pause into a campaign your store runs while you sleep.</p>
<div class="row">
<button class="btn-dark">Get started</button>
<button class="btn-outline">See plans</button>
<span class="link-blue">Watch demo →</span>
</div>
</div>
<div class="hero-visual">
<div class="chip c1">Repeat rate<b>+18.4%</b></div>
<div class="chip c2">Segments live<b>32</b></div>
<div class="chip c3">Revenue lift<b>$412K</b></div>
</div>
</section>
<div class="tabs">
<div class="tab sel">Monthly</div>
<div class="tab">Annual</div>
<div class="tab">Enterprise</div>
</div>
<section class="cards">
<div class="card"><span class="tag">Audience</span><h3>Behavior, segmented</h3><p>Build cohorts from real on-site signal, not guesswork demographics.</p></div>
<div class="card"><span class="tag">On-site</span><h3>Banners that adapt</h3><p>Show the next best offer to the shopper standing in front of it.</p></div>
<div class="card"><span class="tag">Metrics</span><h3>Growth you can trace</h3><p>Every campaign ties back to a number your CFO already trusts.</p></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf9f7; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf9f7; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9b9b9b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px; background: #d77e6a; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px; background: #faf9f7; color: #121212;
border: 1px solid #d77e6a; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #faf9f7; color: #121212;
border: 1px solid #c0bfbe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9b9b9b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d77e6a; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#faf9f7; font-family:'Lato','Helvetica Neue',Arial,sans-serif; color:#53575a; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:72px;background:#faf9f7;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e9e9e9;}
.logo{font-family:'Outfit','Lato',sans-serif;font-size:19px;font-weight:600;color:#121212;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;color:#53575a;}
.searchpill{width:180px;height:36px;border-radius:9999px;border:1px solid #dedede;background:#fff;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#9b9b9b;}
.hero{height:250px;display:flex;align-items:center;padding:0 32px;gap:30px;background:linear-gradient(120deg,#faf9f7 55%,#f0d0c8 130%);}
.herotxt{max-width:380px;}
.h1{font-family:'Outfit','Lato',sans-serif;font-size:30px;font-weight:600;color:#121212;margin:0 0 10px;line-height:1.2;}
.sub{font-size:15px;color:#53575a;line-height:1.5;margin:0 0 18px;}
.btn{display:inline-block;background:#d77e6a;color:#fff;font-size:15px;font-weight:600;letter-spacing:0.3px;padding:12px 24px;border-radius:8px;}
.jarimg{width:170px;height:190px;border-radius:12px;background:linear-gradient(160deg,#e2a192,#d77e6a 60%,#121212);position:relative;}
.grid{display:flex;gap:16px;padding:20px 32px 0;}
.card{width:210px;background:#fff;border-radius:12px;overflow:hidden;}
.thumb{height:150px;background:linear-gradient(135deg,#f0d0c8,#d77e6a);}
.ctitle{font-size:15px;font-weight:600;color:#121212;padding:10px 12px 2px;}
.rating{font-size:12px;color:#d77e6a;padding:0 12px 4px;}
.cprice{font-size:15px;font-weight:600;color:#121212;padding:0 12px 12px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#c6c6c6;font-size:11px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">MK Professional</div>
<div class="navlinks"><span>Color Care</span><span>Repair</span><span>Tools</span><span>Stylists</span></div>
<div class="searchpill">Search products...</div>
</div>
<div class="hero">
<div class="herotxt">
<div class="h1">Professional-grade care, salon warmth.</div>
<p class="sub">Formulas trusted by stylists, finished for the reception-area shelf.</p>
<div class="btn">Shop Best Sellers</div>
</div>
<div class="jarimg"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ctitle">Silk Repair Masque</div><div class="rating">★★★★★ 4.8</div><div class="cprice">$34</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Color Lock Shampoo</div><div class="rating">★★★★☆ 4.6</div><div class="cprice">$28</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Heat Shield Serum</div><div class="rating">★★★★★ 4.9</div><div class="cprice">$26</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Ceramic Styling Iron</div><div class="rating">★★★★☆ 4.5</div><div class="cprice">$89</div></div>
</div>
<div class="footer"><span>Trusted by stylists worldwide</span><span>© MK Professional</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1D1D1B;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1D1D1B;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #1D1D1B; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.6; margin: 0; color: #6B6B6B; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.1px; background: #0071B8; color: #FFFFFF;
border: none; border-radius: 2px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.1px; background: #FFFFFF; color: #0071B8;
border: 1px solid #0071B8; border-radius: 2px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1D1D1B;
border: 1px solid #c6c6c6; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B6B6B; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.4px; background: #E0F6FA; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#FFFFFF; font-family:'Neue Helvetica','Helvetica Neue',Arial,sans-serif; color:#3C3C3C; }
*{box-sizing:border-box;}
.nav{position:absolute; top:0; left:0; width:960px; height:64px; background:#fff; border-bottom:1px solid #D8D8D8; display:flex; align-items:center; justify-content:space-between; padding:0 40px;}
.logo{font-size:19px; font-weight:700; color:#0071B8;}
.navlinks{display:flex; gap:24px; font-size:15px; font-weight:500; color:#1D1D1B;}
.searchmini{width:180px; height:32px; border:2px solid #0071B8; border-radius:4px; display:flex; align-items:center; padding:0 10px; font-size:11px; color:#6B6B6B;}
.hero{position:absolute; top:64px; left:0; width:960px; height:270px; background:#002A4A; display:flex; align-items:center; padding:0 50px; color:#fff;}
.heroText{width:460px;}
.headline{font-size:38px; font-weight:700; line-height:1.15; letter-spacing:-0.5px; margin-bottom:14px;}
.sub{font-size:15px; color:#cfd9e2; margin-bottom:20px; width:400px;}
.btn{display:inline-block; background:#0071B8; color:#fff; font-size:15px; font-weight:600; padding:10px 22px; border-radius:2px;}
.scopeGraphic{position:absolute; right:70px; top:70px; width:300px; height:150px; background:#001a30; border-radius:6px; padding:14px; border:1px solid #00456e;}
.wave{width:100%; height:100%; background: repeating-linear-gradient(90deg, transparent, transparent 20px, #113355 20px, #113355 21px); position:relative;}
.tracepath{position:absolute; top:50%; left:0; width:100%; height:2px; background:#00B5CC;}
.sec{position:absolute; top:334px; left:0; width:960px; height:306px; padding:28px 40px;}
.secTitle{font-size:20px; font-weight:600; margin-bottom:16px; color:#1D1D1B;}
.grid{display:flex; gap:16px;}
.card{width:216px; background:#fff; border:1px solid #D8D8D8; border-radius:4px; padding:16px;}
.cardImg{width:100%; height:80px; background:#F4F7FB; border-radius:2px; display:flex; align-items:center; justify-content:center;}
.instrument{width:70px; height:44px; background:#1D1D1B; border-radius:4px; position:relative;}
.screen{position:absolute; width:40px; height:24px; background:#00B5CC; top:6px; left:6px; border-radius:2px;}
.cardTitle{font-size:16px; font-weight:600; margin-top:12px; color:#1D1D1B;}
.cardSpec{font-size:12px; color:#6B6B6B; margin-top:2px;}
.pill{display:inline-block; background:#E0F6FA; color:#00B5CC; border:1px solid #00B5CC; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; padding:3px 10px; border-radius:9999px; margin-top:8px;}
</style>
<div class="nav">
<div class="logo">Keysight Technologies</div>
<div class="navlinks"><span>Oscilloscopes</span><span>Network Analyzers</span><span>Signal Generators</span><span>Software</span></div>
<div class="searchmini">Search instruments...</div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">Precision Test.<br>Zero Ambiguity.</div>
<div class="sub">110 GHz bandwidth oscilloscopes and network analyzers built for engineers who measure twice.</div>
<div class="btn">Configure Instrument</div>
</div>
<div class="scopeGraphic"><div class="wave"><div class="tracepath"></div></div></div>
</div>
<div class="sec">
<div class="secTitle">Featured Instruments</div>
<div class="grid">
<div class="card"><div class="cardImg"><div class="instrument"><div class="screen"></div></div></div><div class="cardTitle">DSOX1200 Series</div><div class="cardSpec">Oscilloscope · 200 MHz</div><div class="pill">5G</div></div>
<div class="card"><div class="cardImg"><div class="instrument"><div class="screen"></div></div></div><div class="cardTitle">N5245B PNA-X</div><div class="cardSpec">Network Analyzer · 120 dB</div><div class="pill">Aerospace</div></div>
<div class="card"><div class="cardImg"><div class="instrument"><div class="screen"></div></div></div><div class="cardTitle">E8267D PSG</div><div class="cardSpec">Signal Generator · 44 GHz</div><div class="pill">Semiconductor</div></div>
<div class="card"><div class="cardImg"><div class="instrument"><div class="screen"></div></div></div><div class="cardTitle">UXR Series</div><div class="cardSpec">Oscilloscope · 110 GHz</div><div class="pill">Automotive</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fa0030; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fa0030; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0c0e13; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fa0030; color: #0c0e13;
border: 1px solid #0c0e13; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fa0030; color: #f5f5f5;
border: 1px solid #f92750; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #d4022b; color: #0c0e13;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0c0e13; box-sizing:border-box;
font-family:"Pretendard", -apple-system, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:700; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; }
.navlinks span.on { color:#fa0030; }
.enterprise { background:#0b495c; color:#fff; border-radius:6px; padding:8px 14px; font-size:13px; font-weight:700; }
.hero { text-align:center; padding:14px 40px 12px; }
.hero p.eyebrow { font-size:15px; font-weight:700; color:#fa0030; margin:0 0 6px; }
.hero h1 { font-size:26px; font-weight:700; margin:0 0 14px; line-height:1.3; }
.blocks { display:flex; gap:14px; padding:0 40px; }
.block { flex:1; border-radius:16px; padding:20px; color:#fff; height:150px; display:flex;
flex-direction:column; justify-content:space-between; }
.b1 { background:#d90b32; } .b2 { background:#0b495c; } .b3 { background:#8723ba; }
.block .tag { font-size:12px; opacity:0.85; }
.block h3 { font-size:18px; font-weight:700; margin:0; }
.tag-row { display:flex; gap:6px; }
.tag-g { background:#f0ffeb; color:#66d417; font-size:10px; font-weight:500; border-radius:4px; padding:0 4px; }
.tag-o { background:#ffeac7; color:#ff7300; font-size:10px; font-weight:500; border-radius:4px; padding:0 4px; }
.redband { margin-top:16px; background:#fa0030; color:#fff; padding:16px 40px; display:flex;
justify-content:space-between; align-items:center; }
.redband h2 { font-size:18px; font-weight:700; margin:0; }
.redband .btn { background:#fff; color:#fa0030; border-radius:8px; padding:10px 16px; font-size:14px; font-weight:700; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #e0e1e5; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#858793; }
</style></head>
<body>
<nav>
<div class="brand">Team Sparta</div>
<div class="navlinks"><span class="on">All Courses</span><span>Career Camp</span><span>Community</span><span>Reviews</span></div>
<div class="enterprise">Enterprise Training</div>
</nav>
<div class="hero">
<p class="eyebrow">Total Career Solution</p>
<h1>Custom AI education for every stage of your IT career</h1>
</div>
<div class="blocks">
<div class="block b1"><span class="tag">AI-Era Job Camp</span><h3>Career Bootcamp</h3><div class="tag-row"><span class="tag-g">Gov Funded</span></div></div>
<div class="block b2"><span class="tag">Beginner Friendly</span><h3>AI Basics</h3><div class="tag-row"><span class="tag-o">NEW</span></div></div>
<div class="block b3"><span class="tag">For Working Professionals</span><h3>Skill-Up</h3><div class="tag-row"><span class="tag-g">Gov Funded</span></div></div>
</div>
<div class="redband">
<h2>Wake up your potential at Team Sparta now</h2>
<div class="btn">Free Enrollment</div>
</div>
<footer><span>© Team Sparta</span><span>Team Sparta · Bootcamp · Community · Events</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0086ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0086ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0086ff; color: #000000;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0086ff; color: #f5f5f5;
border: 1px solid #2798fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0071d6; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f2f2f2; color:#000000d9; box-sizing:border-box;
font-family:Roboto,"Helvetica Neue",Helvetica,Arial,"PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif; }
* { box-sizing:border-box; }
header { height:52px; background:#00324e; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; }
.logo { color:#fff; font-weight:700; font-size:16px; }
.search { width:280px; height:32px; display:flex; }
.search input { flex:1; border:none; border-radius:4px 0 0 4px; padding:0 12px; font-size:13px; }
.search .go { width:40px; background:#006aa6; border-radius:0 4px 4px 0; color:#fff; display:flex;
align-items:center; justify-content:center; font-size:13px; }
.hactions { display:flex; gap:10px; align-items:center; }
.hactions span { color:#ffffffb3; font-size:13px; }
.dl { background:#3397cf; color:#fff; border-radius:8px; padding:7px 16px; font-size:13px; font-weight:500; }
.layout { display:flex; gap:12px; padding:14px 20px; }
.sider { width:150px; }
.sider .cat { font-size:12px; font-weight:500; color:#00000080; padding:6px 4px; }
.sider .item { font-size:14px; padding:8px 8px; border-radius:8px; color:#00000080; }
.sider .item.active { background:#e7f3f9; color:#000000d9; font-weight:500; }
.main { flex:1; display:flex; flex-direction:column; gap:10px; }
.tabs { display:flex; gap:20px; border-bottom:1px solid #0000001a; padding-bottom:8px; }
.tabs .t { font-size:14px; font-weight:500; color:#00000080; padding-bottom:8px; }
.tabs .t.active { color:#000000d9; border-bottom:2px solid #3397cf; }
.post { background:#fff; border-radius:4px; padding:16px 20px; display:flex; gap:14px; }
.post .avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#bf8ff0,#3397cf); flex-shrink:0; }
.post .body { flex:1; }
.post .meta { font-size:12px; font-weight:500; color:#00000080; margin-bottom:4px; }
.post .meta b { color:#cb3a6b; }
.post h4 { font-size:18px; font-weight:500; margin:0 0 6px; color:#000000d9; }
.post p { font-size:13px; color:#00000080; margin:0 0 10px; line-height:1.4; }
.post .foot { display:flex; gap:14px; font-size:13px; color:#00000080; }
.post .foot span.hot { color:#cb3a6b; }
.chip { display:inline-block; background:#bf8ff0; color:#fff; font-size:11px; font-weight:500; border-radius:4px;
padding:3px 7px; margin-right:6px; }
.aside { width:200px; display:flex; flex-direction:column; gap:10px; }
.aside .card { background:#fff; border-radius:4px; padding:14px; }
.aside .card h5 { font-size:13px; font-weight:600; margin:0 0 8px; color:#000000d9; }
.aside .card .row { display:flex; justify-content:space-between; font-size:12px; color:#00000080; padding:4px 0; }
</style></head>
<body>
<header>
<span class="logo">Dcard</span>
<div class="search"><input placeholder="Search Dcard"><div class="go">🔍</div></div>
<div class="hactions"><span>Sign in</span><span>Sign up</span><div class="dl">Download App</div></div>
</header>
<div class="layout">
<div class="sider">
<div class="cat">FORUMS</div>
<div class="item active">Girls</div>
<div class="item">Boys</div>
<div class="item">Relationships</div>
<div class="item">Mood</div>
<div class="item">Work</div>
<div class="item">Study Tips</div>
</div>
<div class="main">
<div class="tabs"><div class="t active">All</div><div class="t">Following</div></div>
<div class="post">
<div class="avatar"></div>
<div class="body">
<div class="meta">National Taiwan University · 3 hours ago <b>●</b></div>
<span class="chip">#study tips</span>
<h4>How do you actually stay focused during finals week?</h4>
<p>Tried every app, every playlist. Curious what's worked for people who don't have a study group.</p>
<div class="foot"><span class="hot">♥ 584</span><span>💬 179</span><span>💾 Save</span></div>
</div>
</div>
<div class="post">
<div class="avatar"></div>
<div class="body">
<div class="meta">NCCU · 5 hours ago</div>
<span class="chip">#dating advice</span>
<h4>Is it normal to feel nothing after a breakup?</h4>
<p>It's been two weeks and I mostly just feel relieved. Is that bad?</p>
<div class="foot"><span class="hot">♥ 213</span><span>💬 88</span><span>💾 Save</span></div>
</div>
</div>
</div>
<div class="aside">
<div class="card"><h5>Trending forums</h5>
<div class="row"><span>Work</span><span>+12%</span></div>
<div class="row"><span>Mood</span><span>+8%</span></div>
<div class="row"><span>Tech Industry</span><span>+5%</span></div>
</div>
<div class="card"><h5>Sponsored</h5>
<div class="row"><span>New semester gear</span><span>→</span></div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FAFAF7; color: #1C1712;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FAFAF7; color: #1C1712;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.2; margin: 0; color: #1C1712; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7A6A5A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #C47D2E; color: #FFFFFF;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #FAFAF7; color: #1C1712;
border: 1px solid #C47D2E; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FAFAF7; color: #1C1712;
border: 1px solid #DDD4C5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7A6A5A; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 1.2px; background: #F4EEE5; color: #3A2E24;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FAFAF7; color:#1C1712; box-sizing:border-box;
font-family:'Inter','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.announce { height:32px; background:#2C2620; color:#fff; font-size:12px; display:flex; align-items:center;
justify-content:center; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #DDD4C5; }
.brand { font-size:20px; font-weight:600; }
.navlinks { display:flex; gap:20px; }
.navlinks span { font-size:16px; font-weight:500; }
.hero { background:#FBF5EC; min-height:220px; display:flex; align-items:center; padding:0 32px; gap:30px; }
.heroText { flex:1; }
.headline { font-size:44px; font-weight:700; letter-spacing:-0.5px; line-height:1.12; margin-bottom:12px; }
.sub { font-size:16px; color:#3A2E24; margin-bottom:16px; max-width:340px; }
.heroBtn { display:inline-block; background:#C47D2E; color:#fff; border-radius:8px; padding:14px 28px; font-size:15px; font-weight:600; }
.heroImg { flex:1; height:150px; border-radius:50%; background:radial-gradient(circle at 40% 40%,#C47D2E,#7a4a18 75%); position:relative; }
.heroImg::after { content:''; position:absolute; left:15%; bottom:20px; width:70%; height:10px; border-radius:5px; background:rgba(28,23,18,0.15); }
.trust { background:#F2E8D6; border-top:1px solid #DDD4C5; border-bottom:1px solid #DDD4C5; padding:16px 32px;
display:flex; justify-content:space-around; }
.trustItem { text-align:center; font-size:13px; color:#3A2E24; }
.trustItem b { display:block; color:#C47D2E; font-size:14px; margin-bottom:2px; }
.section { padding:24px 32px 0; }
.section h2 { font-size:28px; font-weight:600; margin-bottom:16px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { background:#fff; border-radius:12px; padding:16px; }
.photo { aspect-ratio:4/5; border-radius:8px; margin-bottom:10px; }
.c1 { background:linear-gradient(150deg,#C47D2E,#6a3d10); }
.c2 { background:linear-gradient(150deg,#3A2E24,#1C1712); }
.c3 { background:linear-gradient(150deg,#E8C99A,#C47D2E); }
.c4 { background:linear-gradient(150deg,#A89282,#5a4a3a); }
.name { font-size:16px; font-weight:500; }
.price { font-size:20px; font-weight:600; margin-top:2px; }
</style></head>
<body>
<div class="announce">Free Shipping on Orders Over $75</div>
<nav>
<div class="brand">Goldilocks</div>
<div class="navlinks"><span>Shop</span><span>Recipes</span><span>Care Guide</span><span>About</span></div>
</nav>
<div class="hero">
<div class="heroText">
<div class="headline">Just right, for real cooking.</div>
<div class="sub">Carbon steel cookware, pre-seasoned and built to hit the sweet spot between light and heavy.</div>
<div class="heroBtn">Shop Cookware</div>
</div>
<div class="heroImg"></div>
</div>
<div class="trust">
<div class="trustItem"><b>500°F</b>Oven Safe</div>
<div class="trustItem"><b>2.4 lb</b>Pan Weight</div>
<div class="trustItem"><b>Lifetime</b>Warranty</div>
<div class="trustItem"><b>Pre-Seasoned</b>Ready to Cook</div>
</div>
<div class="section">
<h2>The Collection</h2>
<div class="grid">
<div class="card"><div class="photo c1"></div><div class="name">10" Frying Pan</div><div class="price">$115</div></div>
<div class="card"><div class="photo c2"></div><div class="name">12" Frying Pan</div><div class="price">$135</div></div>
<div class="card"><div class="photo c3"></div><div class="name">Wok</div><div class="price">$145</div></div>
<div class="card"><div class="photo c4"></div><div class="name">Griddle</div><div class="price">$125</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0059D5; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0059D5; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 28px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; margin: 0; color: #93b7e8; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background: #0059D5; color: #FFFFFF;
border: none; border-radius: 6px; padding: {spacing.2} {spacing.4};
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background: #FFFFFF; color: #0059D5;
border: 1px solid #0059D5; border-radius: 6px;
padding: {spacing.2} {spacing.4}; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; background: #FFFFFF; color: #0A0A0A;
border: 1px solid #B0B0B0; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #93b7e8; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 16px; background: #EEF5FF; color: #00255A;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', arial, sans-serif; background: #FFFFFF; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
.app { width: 960px; height: 640px; display: flex; }
.sidebar { width: 208px; flex: 0 0 208px; background: #FFFFFF; border-right: 1px solid #D1D1D1; display: flex; flex-direction: column; padding: 16px 12px; gap: 4px; }
.sidebrand { font-size: 15px; font-weight: 600; color: #0059D5; padding: 0 8px 14px; }
.navitem { font-size: 13px; font-weight: 500; color: #5D5D5D; padding: 9px 10px; border-radius: 6px; display: flex; align-items: center; gap: 8px; }
.navitem .ic { width: 8px; height: 8px; border-radius: 2px; background: #D1D1D1; }
.navitem.active { background: #EEF5FF; color: #00255A; font-weight: 600; }
.navitem.active .ic { background: #0059D5; }
.sidefoot { margin-top: auto; font-size: 11px; color: #6D6D6D; padding: 8px; border-top: 1px solid #E7E7E7; }
.main { flex: 1; display: flex; flex-direction: column; }
.topbar { height: 56px; flex: 0 0 56px; border-bottom: 1px solid #D1D1D1; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.topbar h1 { margin: 0; font-size: 20px; font-weight: 600; color: #0A0A0A; }
.btn { border-radius: 6px; font-size: 13px; font-weight: 500; padding: 8px 16px; border: none; }
.btn-primary { background: #0059D5; color: #FFFFFF; }
.btn-secondary { background: #FFFFFF; color: #0059D5; border: 1px solid #0059D5; }
.content { flex: 1; padding: 18px 24px; display: flex; flex-direction: column; gap: 14px; }
.statrow { display: flex; gap: 12px; }
.stat { flex: 1; background: #FFFFFF; border: 1px solid #D1D1D1; border-radius: 8px; padding: 12px 14px; }
.stat .slabel { font-size: 11px; color: #5D5D5D; }
.stat .sval { font-size: 20px; font-weight: 600; color: #0A0A0A; margin-top: 2px; }
.stat .sdelta { font-size: 10.5px; font-weight: 500; margin-top: 4px; }
.sdelta.up { color: #00935B; }
.sdelta.down { color: #930002; }
.tablecard { flex: 1; background: #FFFFFF; border: 1px solid #D1D1D1; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.tablehead { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #D1D1D1; }
.tablehead h2 { margin: 0; font-size: 14px; font-weight: 600; color: #0A0A0A; }
.tabs { display: flex; gap: 16px; font-size: 12px; font-weight: 500; color: #5D5D5D; }
.tabs span.on { color: #0059D5; border-bottom: 2px solid #0059D5; padding-bottom: 10px; }
table { width: 100%; border-collapse: collapse; }
thead td { background: #F6F6F6; font-size: 11px; font-weight: 500; color: #5D5D5D; padding: 8px 16px; text-transform: uppercase; letter-spacing: 0.02em; }
tbody td { font-size: 12.5px; color: #0A0A0A; padding: 9px 16px; border-top: 1px solid #F6F6F6; }
tbody tr:nth-child(even) td { background: #FBFBFB; }
.chip { display: inline-block; border-radius: 9999px; font-size: 10.5px; font-weight: 500; padding: 3px 10px; }
.chip.success { background: #DEFEF2; color: #001910; }
.chip.warning { background: #FEF2DE; color: #191000; }
.chip.danger { background: #FEDEDE; color: #190000; }
.mono { font-family: 'Roboto Mono', monospace; font-size: 12px; color: #5D5D5D; }
.tablefoot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid #F6F6F6; font-size: 11.5px; color: #5D5D5D; }
.pages { display: flex; gap: 6px; }
.pages span { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.pages span.on { background: #EEF5FF; color: #0059D5; font-weight: 600; }
.aiband { display: flex; align-items: center; gap: 10px; background: #E2DCFA; border-radius: 8px; padding: 10px 14px; }
.aiband .dot { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg,#0050C3,#4629BA,#D8446E); flex: 0 0 20px; }
.aiband p { margin: 0; font-size: 12px; color: #1F1254; font-weight: 500; }
.aiband span { margin-left: auto; font-size: 11px; font-weight: 600; color: #1F1254; }
</style>
<div class="app">
<aside class="sidebar">
<div class="sidebrand">Nuvemshop Nimbus</div>
<div class="navitem active"><span class="ic"></span>Orders</div>
<div class="navitem"><span class="ic"></span>Products</div>
<div class="navitem"><span class="ic"></span>Customers</div>
<div class="navitem"><span class="ic"></span>Marketing</div>
<div class="navitem"><span class="ic"></span>Statistics</div>
<div class="navitem"><span class="ic"></span>Settings</div>
<div class="sidefoot">Nimbus v3 · Admin</div>
</aside>
<div class="main">
<div class="topbar">
<h1>Orders</h1>
<div style="display:flex; gap:8px;">
<button class="btn btn-secondary">Export</button>
<button class="btn btn-primary">New order</button>
</div>
</div>
<div class="content">
<div class="statrow">
<div class="stat"><div class="slabel">Revenue today</div><div class="sval">$4,812</div><div class="sdelta up">▲ 12.4% vs yesterday</div></div>
<div class="stat"><div class="slabel">Orders today</div><div class="sval">86</div><div class="sdelta up">▲ 5.1%</div></div>
<div class="stat"><div class="slabel">Pending fulfillment</div><div class="sval">14</div><div class="sdelta down">▼ 2 since noon</div></div>
<div class="stat"><div class="slabel">Cart abandonment</div><div class="sval">31%</div><div class="sdelta down">▼ 1.8%</div></div>
</div>
<div class="aiband">
<span class="dot"></span>
<p>AI generative: auto-write product descriptions for 12 new items</p>
<span>Review</span>
</div>
<div class="tablecard">
<div class="tablehead">
<h2>Recent orders</h2>
<div class="tabs"><span class="on">All</span><span>Paid</span><span>Shipped</span><span>Refunded</span></div>
</div>
<table>
<thead><tr><td>Order</td><td>Customer</td><td>Total</td><td>Payment</td><td>Status</td></tr></thead>
<tbody>
<tr><td class="mono">#10482</td><td>Store customer</td><td>$128.00</td><td>Card</td><td><span class="chip success">Paid</span></td></tr>
<tr><td class="mono">#10481</td><td>Store customer</td><td>$64.50</td><td>Pix</td><td><span class="chip warning">Pending</span></td></tr>
<tr><td class="mono">#10480</td><td>Store customer</td><td>$212.90</td><td>Card</td><td><span class="chip success">Paid</span></td></tr>
<tr><td class="mono">#10479</td><td>Store customer</td><td>$39.00</td><td>Boleto</td><td><span class="chip danger">Failed</span></td></tr>
<tr><td class="mono">#10478</td><td>Store customer</td><td>$95.20</td><td>Card</td><td><span class="chip success">Paid</span></td></tr>
<tr><td class="mono">#10477</td><td>Store customer</td><td>$18.00</td><td>Pix</td><td><span class="chip success">Paid</span></td></tr>
</tbody>
</table>
<div class="tablefoot">
<span>Showing 6 of 86 orders</span>
<div class="pages"><span class="on">1</span><span>2</span><span>3</span><span>…</span><span>22</span></div>
</div>
</div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #a50034; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #1a1a1a;
border: 1px solid #a50034; border-radius: 4px;
padding: 11px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #4a7c59; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue',Arial,sans-serif; color:#1a1a1a; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #f4f4f4;}
.logo{font-size:20px;font-weight:700;color:#a50034;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#1a1a1a;}
.hero{height:260px;display:flex;background:#f4f4f4;}
.herotext{width:46%;padding:0 36px;display:flex;flex-direction:column;justify-content:center;}
h1{font-size:32px;font-weight:700;letter-spacing:-.5px;margin:0 0 12px;line-height:1.2;color:#1a1a1a;}
.sub{font-size:14px;color:#4a4a4a;margin:0 0 18px;max-width:320px;}
.cta{display:inline-block;background:#a50034;color:#fff;font-size:15px;font-weight:600;letter-spacing:.2px;padding:13px 28px;border-radius:4px;width:fit-content;}
.heroimg{width:54%;position:relative;background:#ffffff;}
.fridge{position:absolute;left:80px;top:20px;width:150px;height:220px;background:linear-gradient(160deg,#ffffff,#e8e8e8);border-radius:6px;box-shadow:0 4px 20px rgba(0,0,0,.08);}
.handle{position:absolute;left:222px;top:40px;width:6px;height:70px;background:#c9c9c9;border-radius:3px;}
.ecobadge{position:absolute;left:100px;top:180px;background:#4a7c59;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:4px 10px;border-radius:4px;}
.sec{padding:20px 36px 0;}
.sectitle{font-size:17px;font-weight:700;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#fff;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:10px;}
.thumb{height:88px;background:#f4f4f4;border-radius:6px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;margin-bottom:3px;}
.pprice{font-size:14px;font-weight:700;color:#a50034;}
</style>
<div class="nav">
<div class="logo">LG</div>
<div class="navlinks"><span>Refrigerators</span><span>Laundry</span><span>Kitchen</span><span>Support</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Cooling, Reimagined Quietly.</h1>
<div class="sub">Glass-finish steel and InstaView doors let the engineering speak for itself.</div>
<div class="cta">Explore Refrigerators</div>
</div>
<div class="heroimg"><div class="fridge"></div><div class="handle"></div><div class="ecobadge">ENERGY STAR</div></div>
</div>
<div class="sec">
<div class="sectitle">Featured Refrigerators</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="pname">InstaView Door-in-Door</div><div class="pprice">$2,499.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Counter-Depth French Door</div><div class="pprice">$2,199.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Top Freezer Refrigerator</div><div class="pprice">$999.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #003399; color: #ffffff;
border: none; border-radius: 8px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #ffffff; color: #003399;
border: 1px solid #003399; border-radius: 8px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #221155; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e6e6e6;}
.logo{font-size:20px;font-weight:700;color:#003399;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:600;letter-spacing:0.25px;}
.hero{height:230px;background:#003399;display:flex;align-items:center;padding:0 32px;gap:30px;}
.herotxt{max-width:400px;}
.h1{font-size:32px;font-weight:700;letter-spacing:-0.5px;color:#fff;margin:0 0 12px;line-height:1.25;}
.sub{font-size:16px;color:#fff;opacity:0.9;line-height:1.5;margin:0 0 18px;}
.btn{display:inline-block;background:#221155;color:#fff;font-size:16px;font-weight:600;letter-spacing:0.25px;padding:16px 32px;border-radius:8px;width:fit-content;}
.ballimg{width:170px;height:170px;border-radius:9999px;background:radial-gradient(circle at 35% 30%,#fff,#003399 55%,#221155);position:relative;}
.ballimg:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:9999px;background:repeating-linear-gradient(120deg,transparent,transparent 22px,rgba(0,0,0,0.08) 22px,rgba(0,0,0,0.08) 24px);}
.grid{display:flex;gap:16px;padding:22px 32px 0;}
.card{width:210px;background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.08);}
.thumb{height:130px;border-radius:12px 12px 0 0;background:linear-gradient(135deg,#003399,#221155);position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#221155;color:#fff;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:4px 8px;border-radius:2px;}
.ctitle{font-size:16px;font-weight:600;padding:10px 12px 2px;}
.cprice{font-size:16px;font-weight:600;padding:0 12px 12px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#221155;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#fff;font-size:12px;opacity:0.85;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Molten</div>
<div class="navlinks"><span>Volleyball</span><span>Basketball</span><span>Handball</span><span>Apparel</span></div>
</div>
<div class="hero">
<div class="herotxt">
<div class="h1">Precision equipment. No compromise.</div>
<p class="sub">Serious about sport, confident in heritage — built for the game, not the aisle.</p>
<div class="btn">Shop Balls</div>
</div>
<div class="ballimg"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge">Official</span></div><div class="ctitle">V5M5000 Volleyball</div><div class="cprice">$69.99</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">GG7X Basketball</div><div class="cprice">$54.99</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Team Bench Bag</div><div class="cprice">$39.99</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Handball Pro H1X5000</div><div class="cprice">$59.99</div></div>
</div>
<div class="footer"><span>Trusted by federations worldwide</span><span>© Molten</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #242833;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #242833;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.33; margin: 0; color: #242833; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; background: #899df1; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; background: #ffffff; color: #242833;
border: 1px solid #899df1; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #242833;
border: 1px solid #c8c9cc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 1.5px; background: #dff1ed; color: #242833;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#252525; font-family:'Proxima Nova',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-family:'Monotype Baskerville',Georgia,serif;font-size:22px;font-weight:400;color:#242833;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:400;letter-spacing:.8px;text-transform:uppercase;color:#242833;}
.catstrip{display:flex;gap:26px;padding:12px 32px;border-bottom:1px solid #dedede;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#757575;}
.catstrip .active{color:#242833;}
.hero{background:#feede3;padding:28px 32px;display:flex;align-items:center;gap:26px;}
.herotext h1{font-family:'Monotype Baskerville',Georgia,serif;font-size:36px;font-weight:400;color:#242833;margin:0 0 10px;line-height:1.15;}
.cta{display:inline-block;background:#899df1;color:#fff;font-size:13px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;padding:13px 26px;border-radius:8px;}
.plannercard{margin-left:auto;width:180px;background:#dff1ed;border-radius:12px;padding:18px;}
.plannercard .lbl{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#242833;margin-bottom:6px;}
.plannercard .val{font-family:'Monotype Baskerville',Georgia,serif;font-size:22px;color:#242833;}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:200px;}
.thumb{height:130px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#899df1;color:#fff;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 8px;}
.chip{position:absolute;bottom:8px;left:8px;background:#dff1ed;color:#242833;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:9999px;}
.ptitle{font-size:16px;font-weight:400;color:#252525;margin:10px 0 2px;}
.pprice{font-size:15px;font-weight:500;color:#252525;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#121212;color:#ffffff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:13px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="navlinks"><span>Planners</span><span>Notebooks</span></div>
<div class="logo">Sugar Paper</div>
<div class="navlinks"><span>Gift Sets</span><span>Sale</span></div>
</div>
<div class="catstrip"><span class="active">Planners</span><span>Memory Books</span><span>Cards</span><span>Desk Goods</span></div>
<div class="hero">
<div class="herotext"><h1>Writing things down,<br>on purpose.</h1><div class="cta">Shop Planners</div></div>
<div class="plannercard"><div class="lbl">2026 Edition</div><div class="val">Weekly Planner</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#899df1,#feede3)"><span class="badge">New</span></div><div class="ptitle">Periwinkle Weekly Planner</div><div class="pprice">$34.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#dff1ed,#899df1)"><span class="chip">Mint</span></div><div class="ptitle">Ruled Notebook Set</div><div class="pprice">$22.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#feede3,#899df1)"></div><div class="ptitle">Memory Book — Blush</div><div class="pprice">$28.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#899df1,#dff1ed)"></div><div class="ptitle">Card Set: Everyday</div><div class="pprice">$14.00</div></div>
</div>
<div class="footer"><span>© Sugar Paper</span><span>Gift Guide Wholesale</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #003388; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #003388;
border: 1px solid #003388; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #003388; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{
width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;
background:#ffffff;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
color:#333333;
}
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:54px;background:#003388;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.logo{color:#fff;font-weight:700;font-size:17px;letter-spacing:0.2px;}
.navlinks{display:flex;gap:22px;}
.navlinks span{color:#ffffff;font-size:12px;font-weight:400;}
.navlinks span.active{text-decoration:underline;}
.hero{padding:20px 24px 10px;text-align:center;}
.hero h1{font-size:22px;font-weight:400;color:#111111;margin:0 0 6px;}
.hero p{font-size:13px;color:#666666;margin:0;}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:10px 24px 0;}
.poster{aspect-ratio:2/3;background:linear-gradient(165deg,#003388,#111111);position:relative;}
.poster .title{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.55);color:#fff;font-size:10px;padding:6px 8px;}
.poster .frame{position:absolute;top:10%;left:10%;right:10%;bottom:28%;border:1px solid rgba(255,255,255,0.35);}
.sectitle{font-size:14px;font-weight:600;color:#111111;padding:16px 24px 8px;}
.filmrow{display:flex;gap:16px;padding:0 24px;}
.filminfo{flex:1;}
.ftitle{font-size:16px;font-weight:600;color:#111;margin-bottom:4px;}
.fmeta{font-size:12px;color:#666;margin-bottom:8px;}
.fbtn{display:inline-block;background:#003388;color:#fff;font-size:12px;font-weight:600;padding:9px 20px;border-radius:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#003388;color:#dddddd;font-size:11px;padding:10px 24px;display:flex;justify-content:space-between;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Grasshopper Film</div>
<div class="navlinks"><span class="active">Now Playing</span><span>Catalog</span><span>Educational</span><span>About</span></div>
</div>
<div class="hero">
<h1>Independent and international film, distributed with care.</h1>
<p>New restorations, festival premieres, and a catalog of over 200 titles.</p>
</div>
<div class="grid">
<div class="poster"><div class="frame"></div><div class="title">Salt Water Ledger</div></div>
<div class="poster"><div class="frame"></div><div class="title">The Quiet Harbor</div></div>
<div class="poster"><div class="frame"></div><div class="title">Winter Correspondence</div></div>
<div class="poster"><div class="frame"></div><div class="title">Paper Lanterns</div></div>
<div class="poster"><div class="frame"></div><div class="title">Field Recordings</div></div>
</div>
<div class="sectitle">Now Available on Digital & Blu-ray</div>
<div class="filmrow">
<div class="filminfo">
<div class="ftitle">The Quiet Harbor</div>
<div class="fmeta">Dir. M. Alvez · 2024 · 104 min · Not Rated</div>
<div class="fbtn">Rent or Buy</div>
</div>
</div>
<div class="footer"><span>© Grasshopper Film</span><span>New restorations every month</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1ed760; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1ed760; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #176a35; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1f1f1f; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1ed760; color: #1f1f1f;
border: 1px solid #1f1f1f; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1ed760; color: #111111;
border: 1px solid #1cb753; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #176a35; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1eba56; color: #1f1f1f;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#ffffff; box-sizing:border-box;
font-family:"SpotifyMixUI", -apple-system, sans-serif; }
* { box-sizing:border-box; }
.layout { display:grid; grid-template-columns:220px 1fr; height:640px; }
aside { background:#000000; padding:20px 16px; }
.brand { font-size:16px; font-weight:700; margin-bottom:20px; display:flex; align-items:center; gap:8px; }
.brand .dot { width:22px; height:22px; border-radius:50%; background:#1ed760; }
.navitem { padding:9px 4px; font-size:13px; color:#b3b3b3; font-weight:700; }
.navitem.on { color:#fff; }
main { padding:18px 26px; }
.topbar { display:flex; align-items:center; gap:14px; }
.search { flex:1; max-width:340px; background:#1f1f1f; border-radius:500px; height:40px;
padding:0 20px; display:flex; align-items:center; color:#fff; font-size:13px; }
.iconc { width:40px; height:40px; border-radius:50%; background:#1f1f1f; }
.outline-btn { border:1px solid #7c7c7c; border-radius:9999px; padding:6px 16px 6px 18px; font-size:12px; font-weight:700; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }
.card { background:#1a1a1a; border-radius:8px; padding:14px; }
.cover { height:96px; border-radius:6px; margin-bottom:10px; }
.c1 { background:linear-gradient(135deg,#1ed760,#0a3d1f); }
.c2 { background:linear-gradient(135deg,#4c2882,#0d0d0d); }
.c3 { background:linear-gradient(135deg,#e5484d,#450a0a); }
.card h4 { font-size:13px; margin:0 0 4px; }
.card span { font-size:11px; color:#b3b3b3; }
.playbar { position:absolute; bottom:0; width:960px; height:64px; background:#181818; border-top:1px solid #282828;
display:flex; align-items:center; justify-content:space-between; padding:0 20px; }
.nowplay { display:flex; align-items:center; gap:10px; font-size:12px; }
.nowplay .art { width:44px; height:44px; border-radius:4px; background:linear-gradient(135deg,#1ed760,#101010); }
</style></head>
<body>
<div class="layout">
<aside>
<div class="brand"><span class="dot"></span>Spotify</div>
<div class="navitem on">Home</div>
<div class="navitem">Search</div>
<div class="navitem">Your Library</div>
</aside>
<main>
<div class="topbar">
<div class="iconc"></div>
<div class="search">What do you want to play?</div>
<span class="outline-btn">Premium</span>
</div>
<div class="cards">
<div class="card"><div class="cover c1"></div><h4>Daily Mix 1</h4><span>Made for you</span></div>
<div class="card"><div class="cover c2"></div><h4>Release Radar</h4><span>New this week</span></div>
<div class="card"><div class="cover c3"></div><h4>Focus Flow</h4><span>Deep concentration</span></div>
</div>
</main>
</div>
<div class="playbar">
<div class="nowplay"><div class="art"></div><div>Midnight Drive<br><span style="color:#b3b3b3;">The Wavelength</span></div></div>
<span style="font-size:12px;color:#b3b3b3;">One note, one voice, one idea at a time</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #444444; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #df7a5d; color: #ffffff;
border: none; border-radius: 8px; padding: 13px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: transparent; color: #843134;
border: 1px solid #843134; border-radius: 8px;
padding: 11px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #444444; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #df7a5d; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{
width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;
background:#ffffff;font-family:'Figtree',sans-serif;
color:#323232;
}
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:56px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.logo{color:#fff;font-weight:700;font-size:18px;}
.logo span{color:#df7a5d;}
.navlinks{display:flex;gap:20px;}
.navlinks span{color:#f0f0f0;font-size:12px;font-weight:600;}
.trust{background:#843134;color:#fff;font-size:11px;font-weight:600;text-align:center;padding:6px 0;}
.hero{padding:20px 24px;display:flex;gap:22px;align-items:center;}
.heroText{flex:1.15;}
.heroText h1{font-size:28px;font-weight:700;color:#121212;line-height:1.2;margin:0 0 8px;}
.heroText p{font-size:13px;color:#323232;margin:0 0 14px;max-width:400px;}
.heroBtn{display:inline-block;background:#df7a5d;color:#fff;font-size:13px;font-weight:700;padding:11px 22px;border-radius:8px;}
.heroBtn2{display:inline-block;border:1px solid #843134;color:#843134;font-size:13px;font-weight:700;padding:10px 21px;border-radius:8px;margin-left:8px;}
.heroImg{flex:1;height:140px;background:linear-gradient(150deg,#f7f7f7,#dedede);border-radius:8px;position:relative;}
.heroImg .glass{position:absolute;bottom:0;left:20%;right:20%;top:12%;background:rgba(223,122,93,0.15);border:2px solid #df7a5d;border-radius:16px 16px 4px 4px;}
.cattiles{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:0 24px;}
.tile{background:#f7f7f7;border-top:3px solid #df7a5d;padding:10px 8px;font-size:11px;font-weight:600;color:#323232;text-align:center;}
.section{padding:14px 24px 0;}
.sectitle{font-size:14px;font-weight:700;color:#121212;margin:0 0 10px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.card{background:#fff;border:1px solid #dedede;border-radius:8px;overflow:hidden;}
.photo{aspect-ratio:1/1;background:linear-gradient(150deg,#f7f7f7,#dedede);position:relative;}
.photo .glass2{position:absolute;bottom:8%;left:16%;right:16%;top:14%;background:rgba(223,122,93,0.12);border:2px solid #df7a5d;border-radius:10px 10px 3px 3px;}
.ctitle{font-size:12px;font-weight:600;color:#121212;padding:8px 10px 0;}
.cprice{font-size:15px;font-weight:700;color:#843134;padding:2px 10px 10px;}
.footer{position:absolute;bottom:0;left:0;right:0;background:#121212;color:#dedede;font-size:11px;padding:10px 24px;display:flex;justify-content:space-between;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Greenhouse Megastore<span>.</span></div>
<div class="navlinks"><span>Greenhouses</span><span>Raised Beds</span><span>Cold Frames</span><span>Accessories</span></div>
</div>
<div class="trust">Free Shipping Over $99 · 30-Day Returns · Warranty on Every Frame</div>
<div class="hero">
<div class="heroText">
<h1>700+ SKUs of serious growing hardware.</h1>
<p>Greenhouses, raised beds, cold frames, and grow-light systems for hobbyists and commercial growers alike.</p>
<div class="heroBtn">Shop Greenhouses</div><div class="heroBtn2">View Catalog</div>
</div>
<div class="heroImg"><div class="glass"></div></div>
</div>
<div class="cattiles">
<div class="tile">Greenhouses</div><div class="tile">Raised Beds</div><div class="tile">Cold Frames</div><div class="tile">Grow Lights</div><div class="tile">Accessories</div>
</div>
<div class="section">
<div class="sectitle">Top Sellers</div>
<div class="grid">
<div class="card"><div class="photo"><div class="glass2"></div></div><div class="ctitle">8x12 Poly Greenhouse Kit</div><div class="cprice">$1,899.00</div></div>
<div class="card"><div class="photo"><div class="glass2"></div></div><div class="ctitle">Cedar Raised Bed 4x8</div><div class="cprice">$289.00</div></div>
<div class="card"><div class="photo"><div class="glass2"></div></div><div class="ctitle">Cold Frame Starter Kit</div><div class="cprice">$219.00</div></div>
<div class="card"><div class="photo"><div class="glass2"></div></div><div class="ctitle">Full-Spectrum LED Grow Light</div><div class="cprice">$149.00</div></div>
</div>
</div>
<div class="footer"><span>© Greenhouse Megastore</span><span>Serving growers since 1979</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e6007e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e6007e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e6007e; color: #000000;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #e6007e; color: #f5f5f5;
border: 1px solid #e82791; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #cf1091; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #ebebeb; background:#ffffff; }
.brand { font-size:19px; font-weight:800; margin:0; letter-spacing:-0.4px; color:#000000; }
.brand span { color:#e6007e; }
.navlinks { display:flex; gap:26px; font-size:14px; color:#000000; }
.cta { background:#e6007e; color:#ffffff; border:none; border-radius:20px; height:40px;
padding:0 30px; font-size:16px; font-weight:400; white-space:nowrap; }
.hero { flex:0 0 128px; display:flex; flex-direction:column; justify-content:center; gap:6px;
padding:0 40px; background:#ffffff; }
.hero .kicker { color:#e6007e; font-size:12px; font-weight:700; letter-spacing:0.04em; }
.hero h1 { font-size:28px; font-weight:700; margin:0; letter-spacing:-0.5px; color:#000000; }
.hero p { font-size:13px; color:#888888; margin:0; }
.plans { flex:1 1 auto; display:flex; gap:16px; padding:0 40px 24px; min-height:0; }
.plan { flex:1; border:1px solid #ebebeb; border-radius:8px; padding:18px; display:flex; flex-direction:column; gap:8px;
background:#ffffff; position:relative; }
.plan.pop { border:2px solid #e6007e; }
.plan .tag { position:absolute; top:-11px; left:16px; background:#e6007e; color:#ffffff; font-size:11px;
font-weight:700; border-radius:20px; padding:3px 10px; }
.plan h3 { font-size:16px; font-weight:700; margin:6px 0 0; color:#000000; }
.plan .price { font-size:22px; font-weight:700; color:#000000; }
.plan .price span { font-size:12px; font-weight:400; color:#888888; }
.plan .sub { font-size:12px; color:#888888; margin-bottom:2px; }
.infrow { border:1px solid #ebebeb; border-radius:8px; padding:12px 14px; height:44px; display:flex;
align-items:center; font-size:12.5px; font-weight:500; color:#222222; background:#f5f5f5; }
.infrow.plain { background:#ffffff; }
.plan .cta-row { margin-top:auto; background:#e6007e; color:#ffffff; border-radius:20px; text-align:center;
padding:9px; font-size:14px; font-weight:400; }
.plan.ghost .cta-row { background:#f5f5f5; color:#888888; }
footer { flex:0 0 40px; border-top:1px solid #ebebeb; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; font-size:12px; color:#888888; background:#ffffff; }
</style></head>
<body>
<nav>
<p class="brand">LG Uplus</p>
<div class="navlinks"><span>Mobile</span><span>Internet & TV</span><span>Smart Home</span><span>Enterprise</span></div>
<button class="cta">Check Plans</button>
</nav>
<section class="hero">
<span class="kicker">SIMPLY. LG Uplus</span>
<h1>Less complexity. More of what matters.</h1>
<p>Compare 5G plans and find the one that fits how you actually use your phone.</p>
</section>
<section class="plans">
<div class="plan ghost">
<h3>5G Basic</h3>
<div class="price">$29<span> / mo</span></div>
<div class="sub">6GB data · Unlimited calls</div>
<div class="infrow plain">Data sharing not included</div>
<div class="infrow plain">Streaming pass not included</div>
<div class="cta-row">Select Plan</div>
</div>
<div class="plan pop">
<span class="tag">Most Popular</span>
<h3>5G Standard</h3>
<div class="price">$49<span> / mo</span></div>
<div class="sub">100GB data · Unlimited calls</div>
<div class="infrow">Family data sharing included</div>
<div class="infrow">Streaming pass included</div>
<div class="cta-row">Select Plan</div>
</div>
<div class="plan ghost">
<h3>5G Premium</h3>
<div class="price">$69<span> / mo</span></div>
<div class="sub">Unlimited data · Unlimited calls</div>
<div class="infrow plain">Roaming data included</div>
<div class="infrow plain">Device protection included</div>
<div class="cta-row">Select Plan</div>
</div>
</section>
<footer>
<span>© LG Uplus</span>
<span>Mobile · Internet & TV · Smart Home · Enterprise</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0d6efd;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0d6efd;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.1px; margin: 0; color: #0d6efd; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.6; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #044123; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #044123;
border: 1px solid #044123; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #141619;
border: 1px solid #c2dbfe; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #044123; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'FoundersGrotesk','Helvetica Neue',Arial,sans-serif; color:#444444; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e7e7e7;}
.logo{font-family:Georgia,'Times New Roman',serif;font-size:22px;font-weight:600;color:#044123;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#141619;}
.navcta{background:#044123;color:#fff;font-size:12px;font-weight:600;padding:9px 18px;border-radius:2px;}
.hero{height:250px;display:flex;background:#f4f4f4;}
.herotext{width:46%;padding:36px 40px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#03b585;margin-bottom:12px;}
.herotext h1{font-family:Georgia,'Times New Roman',serif;font-size:36px;font-weight:500;color:#141619;margin:0 0 12px;letter-spacing:-0.3px;line-height:1.15;}
.herotext p{font-size:14px;color:#444;margin:0 0 18px;max-width:340px;line-height:1.5;}
.btn{background:#044123;color:#fff;font-size:13px;font-weight:600;padding:12px 24px;border-radius:2px;width:fit-content;}
.heropanel{width:54%;background:#141619;position:relative;padding:22px;}
.readout{background:#1e2124;border-radius:2px;padding:14px;height:100%;}
.rlabel{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#888;margin-bottom:8px;}
.rval{font-family:Consolas,'Courier New',monospace;font-size:30px;color:#32eb96;margin-bottom:14px;}
.bars{display:flex;gap:5px;align-items:flex-end;height:70px;}
.bars div{flex:1;background:#03b585;border-radius:1px;}
.spectable{display:flex;gap:1px;background:#e7e7e7;margin:0 36px;}
.speccell{flex:1;background:#f9fafb;text-align:center;padding:10px;}
.slabel{font-size:9px;letter-spacing:.5px;text-transform:uppercase;color:#777;}
.sval{font-size:15px;color:#141619;margin-top:3px;font-weight:600;}
.grid{display:flex;gap:14px;padding:16px 36px 0;}
.card{width:150px;border:1px solid #e7e7e7;border-radius:2px;padding:10px;}
.thumb{height:82px;border-radius:2px;margin-bottom:8px;background:#cddcc8;}
.pname{font-size:12px;font-weight:600;color:#141619;line-height:1.3;height:30px;overflow:hidden;}
.pprice{font-size:13px;font-weight:700;color:#044123;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">NI National Instruments</div>
<div class="navlinks"><span>DAQ</span><span>RF & Wireless</span><span>Oscilloscopes</span><span>Software</span></div>
<div class="navcta">Request Quote</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">PXI Platform · Now Shipping</div>
<h1>Instrumentation you can trust with data.</h1>
<p>Modular test systems engineered for the labs that read white papers before they sign purchase orders.</p>
<div class="btn">View Datasheet</div>
</div>
<div class="heropanel">
<div class="readout">
<div class="rlabel">Live Acquisition · Channel 03</div>
<div class="rval">2.441 V</div>
<div class="bars">
<div style="height:40%"></div><div style="height:65%"></div><div style="height:52%"></div>
<div style="height:80%"></div><div style="height:36%"></div><div style="height:60%"></div>
<div style="height:74%"></div><div style="height:48%"></div>
</div>
</div>
</div>
</div>
<div class="spectable">
<div class="speccell"><div class="slabel">Sample Rate</div><div class="sval">2 MS/s</div></div>
<div class="speccell"><div class="slabel">Resolution</div><div class="sval">18-bit</div></div>
<div class="speccell"><div class="slabel">Channels</div><div class="sval">32</div></div>
<div class="speccell"><div class="slabel">Slots</div><div class="sval">PXIe x8</div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#cddcc8,#044123)"></div><div class="pname">DAQ Module PXIe-4331</div><div class="pprice">$3,249</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#044123,#03b585)"></div><div class="pname">RF Vector Signal Analyzer</div><div class="pprice">$8,940</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#141619,#008053)"></div><div class="pname">Digital Oscilloscope 5124</div><div class="pprice">$5,120</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#03b585,#141619)"></div><div class="pname">Chassis PXIe-1092</div><div class="pprice">$2,610</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.35; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #2ea3f2; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #222222;
border: 1px solid #2ea3f2; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ea2c59; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eeeeee; color:#222222; box-sizing:border-box;
font-family:'Open Sans',Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
nav { height:80px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#003388; }
.brand { font-size:17px; font-weight:700; color:#fff; margin:0; text-transform:uppercase; letter-spacing:0.5px; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:#fff; }
.navlinks span.on { background:rgba(255,255,255,0.1); border-radius:8px; padding:8px 12px; }
.util { font-size:12px; color:#eee; }
main { display:grid; grid-template-columns:340px 1fr; height:calc(640px - 80px); }
.stage { padding:20px; display:flex; flex-direction:column; gap:10px; background:#fff; }
.panel { flex:1; position:relative; overflow:hidden; aspect-ratio:3/4; background:linear-gradient(180deg,#1b1b2e,#03030a); }
.panel::before { content:''; position:absolute; left:12%; top:8%; width:76%; height:2px; background:#2ea3f2; box-shadow:0 0 12px #2ea3f2; }
.panel::after { content:''; position:absolute; left:20%; top:30%; width:60%; height:40%; border-radius:50%; background:radial-gradient(circle,#f5795d55,transparent 70%); }
.thumbs { display:flex; gap:8px; }
.thumb { width:48px; height:48px; background:#f9f9f9; border:1px solid #e2e2e2; }
.info { padding:20px 28px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.cat { font-size:12px; color:#555555; }
h1 { margin:0; font-size:22px; font-weight:600; }
.badge-row { display:flex; gap:6px; }
.badge-new { background:#ea2c59; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:2px 8px; border-radius:8px; }
.badge-format { background:#f9f9f9; color:#555555; font-size:11px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:8px; }
.price { font-size:18px; font-weight:600; }
.desc { font-size:13px; color:#4e4e4e; line-height:1.5; }
.spec-row { display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px solid #eeeeee; }
.cta-row { display:flex; gap:8px; margin-top:auto; }
.btn-primary { flex:1; height:44px; background:#2ea3f2; color:#fff; border:none; border-radius:8px; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.btn-secondary { width:140px; height:44px; background:#fff; border:2px solid #e2e2e2; color:#222222; border-radius:8px; font-size:14px; font-weight:600; text-transform:uppercase; }
</style></head>
<body>
<nav>
<p class="brand">Blue Underground</p>
<div class="navlinks"><span class="on">Blu-ray</span><span>DVD</span><span>4K UHD</span><span>Sale</span></div>
<div class="util">Search Account Cart (1)</div>
</nav>
<main>
<div class="stage">
<div class="panel"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Cult Horror · 1979</span>
<h1>The Beyond — Limited Edition</h1>
<div class="badge-row"><span class="badge-new">New</span><span class="badge-format">4K UHD</span></div>
<div class="price">$44.95</div>
<p class="desc">Lucio Fulci's gate-to-hell classic, restored in 4K from the original camera negative with new audio commentary and rigid slipcase.</p>
<div class="spec-row"><span>Runtime</span><span>87 min</span></div>
<div class="spec-row"><span>Region</span><span>Region Free</span></div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Details</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eae8e4; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eae8e4; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #565656; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #00abc8; color: #ffffff;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #eae8e4; color: #744f28;
border: 1px solid #00abc8; border-radius: 12px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #b4b2b0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #565656; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #f5f5f5; color: #2a472b;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#eae8e4; color:#504545; box-sizing:border-box; font-family:'Cabin','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.promo { height:28px; background:#2a472b; color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; }
nav { height:56px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #dedede; }
.brand { font-family:'Petrona',Georgia,serif; font-size:20px; font-weight:700; color:#2a472b; margin:0; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:600; color:#504545; }
.search-pill { background:#f5f5f5; border-radius:999px; padding:8px 18px; font-size:12px; border:1px solid #dadada; color:#565656; }
.main { display:flex; gap:20px; padding:20px 32px; height:440px; }
.gallery { width:400px; background:#fff; border:1px solid #dadada; border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative; }
.seed-pack { width:150px; height:220px; background:linear-gradient(180deg,#77b11e,#00abc8); border-radius:8px; position:relative; }
.seed-pack::before { content:''; position:absolute; top:16px; left:16px; right:16px; height:80px; background:rgba(255,255,255,0.9); border-radius:4px; }
.badge-new { position:absolute; top:16px; left:16px; background:#00abc8; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:3px 8px; border-radius:4px; }
.cat-badge { position:absolute; bottom:16px; right:16px; background:#f5f5f5; border:1px solid #dadada; color:#2a472b; font-size:10px; font-weight:700; text-transform:uppercase; padding:4px 12px; border-radius:999px; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; }
.info h1 { font-family:'Petrona',Georgia,serif; font-size:26px; font-weight:600; margin:0; color:#2a472b; }
.price { font-size:20px; font-weight:600; color:#744f28; }
.desc { font-size:13px; line-height:1.6; color:#504545; max-width:440px; }
.grow-guide { background:#2a472b; color:#fff; border-radius:12px; padding:14px 18px; border-left:4px solid #00abc8; }
.grow-guide h4 { font-family:'Petrona',Georgia,serif; font-size:15px; margin:0 0 6px; font-weight:600; }
.grow-stats { display:flex; gap:18px; font-family:'Anonymous Pro','Courier New',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.5px; }
.grow-stats b { display:block; font-size:16px; color:#00abbc; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#00abc8; color:#fff; border:none; border-radius:12px; font-weight:700; font-size:15px; letter-spacing:0.5px; }
.btn-secondary { flex:1; height:48px; background:#eae8e4; color:#744f28; border:2px solid #744f28; border-radius:12px; font-weight:700; font-size:15px; }
.trust-strip { display:flex; gap:24px; padding:12px 32px; border-top:1px solid #dadada; border-bottom:1px solid #dadada; font-size:11px; color:#504545; }
.trust-strip span::before { content:'✓ '; color:#5d8b16; font-weight:700; }
</style></head>
<body>
<div class="promo">Free shipping on orders $50+ · Garden season is here 🌱</div>
<nav>
<p class="brand">Back TO The Roots</p>
<div class="navlinks"><span>Grow Kits</span><span>Seeds</span><span>Soil</span><span>Mushroom</span></div>
<div class="search-pill">🔍 Search varieties</div>
</nav>
<div class="main">
<div class="gallery">
<div class="badge-new">New</div>
<div class="seed-pack"></div>
<div class="cat-badge">Grow Kits</div>
</div>
<div class="info">
<h1>Windowsill Herb Grow Kit</h1>
<span class="price">$24.99</span>
<p class="desc">Everything you need to grow basil, cilantro, and parsley from seed — organic soil pucks, a bamboo tray, and a step-by-step grow guide. Great for classrooms and first-time growers.</p>
<div class="grow-guide">
<h4>Grow Guide</h4>
<div class="grow-stats">
<div><b>5-7</b>Days to Sprout</div>
<div><b>60</b>Days to Harvest</div>
<div><b>USDA</b>Organic Certified</div>
</div>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Grow Guide</button>
</div>
</div>
</div>
<div class="trust-strip">
<span>USDA Organic</span>
<span>Non-GMO Project</span>
<span>B-Corp Certified</span>
<span>Certified Regenerative</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #787878; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f5f5; color: #000000;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #f5f5f5; color: #111111;
border: 1px solid #d1d1d1; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #787878; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f7f7f7; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#F5F5F5; color:#252423; box-sizing:border-box;
font-family:'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
/* 좌측: Teams → Channels 트리 (시그니처 내비게이션) */
.tree { width:256px; height:640px; background:#FFFFFF; border-right:1px solid #E1E1E1; padding:16px 0; overflow:hidden; }
.tree-head { padding:0 16px 14px; display:flex; align-items:center; gap:8px; }
.tree-head .avatar { width:28px; height:28px; border-radius:50%; background:#6264A7; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:12px; position:relative; }
.tree-head .avatar::after { content:''; position:absolute; right:-2px; bottom:-2px; width:9px; height:9px; border-radius:50%; background:#6BB700; border:2px solid #fff; }
.tree-head b { font-size:16px; font-weight:700; }
.team { padding:0 0 6px; }
.team-row { height:44px; display:flex; align-items:center; gap:10px; padding:0 16px; }
.team-row .tavatar { width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg,#6264A7,#8B8CC7); flex-shrink:0; }
.team-row .tname { font-size:14px; font-weight:700; flex:1; }
.team-row .chev { font-size:10px; color:#8A8886; transform:rotate(90deg); }
.chan { height:36px; display:flex; align-items:center; gap:8px; padding:0 16px 0 42px; font-size:13px; color:#252423; position:relative; }
.chan .hash { color:#8A8886; font-size:13px; }
.chan.active { background:rgba(98,100,167,0.12); }
.chan.active::before { content:''; position:absolute; left:0; top:4px; bottom:4px; width:3px; background:#6264A7; border-radius:2px; }
.chan.active span { font-weight:700; color:#252423; }
.chan.unread span { font-weight:700; }
.chan .dot { width:7px; height:7px; border-radius:50%; background:#6264A7; margin-left:auto; }
.tabbar-mini { position:absolute; bottom:0; left:0; width:256px; height:0; }
/* 우측: 채널 대화 */
.main { flex:1; height:640px; display:flex; flex-direction:column; background:#F5F5F5; }
.topbar { height:52px; background:#FFFFFF; border-bottom:1px solid #E1E1E1; display:flex; align-items:center; padding:0 22px; gap:10px; }
.topbar .ttitle { font-size:16px; font-weight:700; }
.topbar .tsub { font-size:12px; color:#616161; }
.joinbar { margin:14px 22px 0; height:52px; border-radius:12px; background:#6264A7; display:flex; align-items:center; padding:0 18px; gap:12px; box-shadow:0 4px 16px rgba(98,100,167,0.35); }
.joinbar .jtxt { color:#fff; font-size:15px; font-weight:600; flex:1; }
.joinbar .jpill { background:#fff; color:#6264A7; font-size:13px; font-weight:700; padding:7px 18px; border-radius:999px; }
.feed { flex:1; padding:16px 22px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.msg { background:#FFFFFF; border-radius:8px; padding:12px; display:flex; gap:10px; }
.msg .av { width:32px; height:32px; border-radius:50%; background:#8B8CC7; flex-shrink:0; position:relative; }
.msg .av::after { content:''; position:absolute; right:-2px; bottom:-2px; width:10px; height:10px; border-radius:50%; border:2px solid #fff; }
.msg.a1 .av { background:#6BB700; } .msg.a1 .av::after { background:#6BB700; }
.msg.a2 .av { background:#C4314B; } .msg.a2 .av::after { background:#C4314B; }
.msg.a3 .av { background:#FFAA44; } .msg.a3 .av::after { background:#FFAA44; }
.msg .body { flex:1; }
.msg .row1 { display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.msg .author { font-size:15px; font-weight:600; }
.msg .time { font-size:13px; color:#616161; }
.msg .txt { font-size:15px; line-height:1.45; color:#252423; }
.msg .mention { background:rgba(98,100,167,0.12); color:#6264A7; padding:1px 5px; border-radius:4px; font-weight:600; }
.msg .reactions { display:flex; gap:6px; margin-top:8px; }
.chip { background:#F0F0F0; border-radius:999px; padding:3px 9px; font-size:12px; font-weight:600; display:flex; gap:4px; align-items:center; }
.msg .thread { margin-top:6px; font-size:13px; color:#616161; }
.composer { margin:0 22px 16px; height:44px; background:#FFFFFF; border:1px solid #E1E1E1; border-radius:8px; display:flex; align-items:center; padding:0 14px; gap:12px; }
.composer .ph { color:#8A8886; font-size:15px; flex:1; }
.composer .icons { display:flex; gap:14px; color:#616161; font-size:15px; }
.composer .send { width:32px; height:32px; border-radius:50%; background:#6264A7; }
</style></head>
<body>
<div class="app">
<nav class="tree">
<div class="tree-head"><div class="avatar">KJ</div><b>Microsoft Teams (iOS)</b></div>
<div class="team">
<div class="team-row"><div class="tavatar"></div><span class="tname">Design Guild</span><span class="chev">›</span></div>
<div class="chan active"><span class="hash">#</span><span>general</span></div>
<div class="chan unread"><span class="hash">#</span><span>weekly-sync</span><span class="dot"></span></div>
<div class="chan"><span class="hash">#</span><span>random</span></div>
</div>
<div class="team">
<div class="team-row"><div class="tavatar" style="background:linear-gradient(135deg,#C4314B,#E37D8D)"></div><span class="tname">Platform Eng</span><span class="chev">›</span></div>
<div class="chan"><span class="hash">#</span><span>incidents</span></div>
<div class="chan unread"><span class="hash">#</span><span>releases</span><span class="dot"></span></div>
</div>
</nav>
<div class="main">
<div class="topbar"><div><div class="ttitle"># general</div><div class="tsub">Design Guild · 24 members</div></div></div>
<div class="joinbar"><span class="jtxt">📹 Weekly Sync · in progress</span><span class="jpill">Join</span></div>
<div class="feed">
<div class="msg a1">
<div class="av"></div>
<div class="body">
<div class="row1"><span class="author">Priya Anand</span><span class="time">10:42 AM</span></div>
<div class="txt">Pushed the build, can someone review? <span class="mention">@Design Guild</span></div>
<div class="reactions"><span class="chip">👍 3</span><span class="chip">🎉 1</span></div>
<div class="thread">💬 3 replies · Last reply 2h ago</div>
</div>
</div>
<div class="msg a2">
<div class="av"></div>
<div class="body">
<div class="row1"><span class="author">Marcus Webb</span><span class="time">11:05 AM</span></div>
<div class="txt">On it — reviewing the Fluent tokens now.</div>
</div>
</div>
</div>
<div class="composer"><span class="icons">📎 😊</span><span class="ph">Type a message</span><div class="send"></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 1.5px; background: #313131; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 1.5px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 2px; background: #7eb5c4; color: #000000;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Georgia,'Times New Roman',serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;border-bottom:1px solid #d8d8d8;}
.logo{font-size:20px;letter-spacing:1px;}
.navlinks{display:flex;gap:34px;font-family:-apple-system,Arial,sans-serif;font-size:13px;font-weight:400;letter-spacing:1px;text-transform:uppercase;}
.navlinks span:first-child{border-bottom:1px solid #313131;padding-bottom:4px;}
.util{font-family:-apple-system,Arial,sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#888;}
.hero{height:300px;display:flex;padding:0 48px;align-items:center;gap:40px;background:#f9f8f6;}
.herotext{width:44%;}
.herotext h1{font-size:38px;font-weight:300;line-height:1.15;margin:0 0 16px;letter-spacing:-.5px;}
.herotext p{font-family:Georgia,serif;font-style:italic;font-size:17px;line-height:1.5;color:#4d4d4d;margin:0 0 24px;max-width:340px;}
.herocta{display:inline-block;background:#313131;color:#fff;font-family:-apple-system,Arial,sans-serif;font-size:12px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;padding:15px 34px;}
.heroimg{width:44%;height:220px;background:linear-gradient(160deg,#7eb5c4 0%,#313131 75%);position:relative;}
.heroimg:before{content:'';position:absolute;width:130px;height:170px;background:#ffffff;top:25px;left:70px;box-shadow:0 8px 24px rgba(0,0,0,0.15);}
.heroimg:after{content:'';position:absolute;width:110px;height:6px;background:#7eb5c4;top:50px;left:80px;}
.grid{display:flex;gap:30px;padding:26px 48px 0;}
.card{width:190px;}
.thumb{height:190px;background:#f5f1eb;margin-bottom:10px;}
.ptitle{font-size:14px;color:#313131;margin-bottom:3px;}
.pcat{font-family:-apple-system,Arial,sans-serif;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#888;margin-bottom:6px;}
.pprice{font-size:15px;color:#313131;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#313131;display:flex;align-items:center;justify-content:space-between;padding:0 48px;}
.footer span{color:#b4b4b4;font-family:-apple-system,Arial,sans-serif;font-size:11px;letter-spacing:.6px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Smythson</div>
<div class="navlinks"><span>Notebooks</span><span>Diaries</span><span>Leather Goods</span><span>Personalise</span></div>
<div class="util">Account · Bag</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Lined in Nile Blue since 1887.</h1>
<p>A single interior colour, unchanged for over a century, waiting inside every notebook we bind.</p>
<div class="herocta">Shop Notebooks</div>
</div>
<div class="heroimg"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#f5f1eb,#313131)"></div><div class="pcat">Featherweight</div><div class="ptitle">Panama Notebook</div><div class="pprice">£95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#7eb5c4,#f5f1eb)"></div><div class="pcat">Leather Goods</div><div class="ptitle">Mara Card Holder</div><div class="pprice">£175</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#313131,#7eb5c4)"></div><div class="pcat">Personalise</div><div class="ptitle">Monogram Diary</div><div class="pprice">£145</div></div>
</div>
<div class="footer"><span>© Smythson of Bond Street</span><span>Personalisation · Care</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00b347; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00b347; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b347; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00b347; color: #f5f5f5;
border: 1px solid #27be63; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #29bf64; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212529; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; flex-direction:column; height:640px; }
.topline { flex:0 0 26px; background:#f2f2f2; display:flex; align-items:center; justify-content:center;
font-size:12px; color:#212529; letter-spacing:0.01em; }
.topline b { color:#00b347; }
nav { flex:0 0 51px; display:flex; align-items:stretch; background:#ffffff; border-bottom:1px solid #e6e6e6; padding:0 24px; }
.navrow { display:flex; align-items:center; gap:2px; }
.navitem { height:51px; display:flex; align-items:center; padding:0 18px; font-size:14px; font-weight:700;
color:#7a7a7a; }
.navitem.active { background:#00b347; color:#212529; border-radius:0; }
.navspacer { flex:1; }
.navutil { display:flex; align-items:center; gap:8px; }
.util-btn { height:26px; padding:0 10px; background:#f2f2f2; color:#00b347; border-radius:3px; font-size:12px; font-weight:400;
display:flex; align-items:center; align-self:center; }
main { flex:1; min-height:0; padding:18px 24px; display:flex; flex-direction:column; gap:14px; }
.lede { display:flex; align-items:baseline; justify-content:space-between; }
.lede h1 { font-size:16px; font-weight:700; margin:0; color:#212529; }
.lede span { font-size:12px; color:#7a7a7a; }
.grid { flex:1; display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(2, 1fr); gap:10px; min-height:0; }
.cell { background:#f2f2f2; border-radius:3px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.swatch { width:34px; height:34px; border-radius:3px; }
.cell .title { font-size:14px; font-weight:700; color:#68b5ac; margin:0; }
.cell .desc { font-size:12px; color:#7a7a7a; margin:0; line-height:1.4; }
.cell .tag { align-self:flex-start; margin-top:auto; font-size:11px; font-weight:700; color:#212529; background:#ffffff;
border-radius:3px; padding:2px 7px; }
.s1 { background:#dff5e6; } .s2 { background:#fde9d9; } .s3 { background:#e4e9fb; } .s4 { background:#fbe4ee; }
.s5 { background:#f6f0da; } .s6 { background:#dff0f5; } .s7 { background:#efe4fb; } .s8 { background:#eaf5d9; }
footer { flex:0 0 40px; border-top:1px solid #e6e6e6; padding:0 24px; display:flex; align-items:center;
justify-content:space-between; font-size:11px; color:#7a7a7a; background:#ffffff; }
</style></head>
<body>
<div class="wrap">
<div class="topline">Open 24 hours · <b>New</b> fresh bakery arrives every morning</div>
<nav>
<div class="navrow">
<div class="navitem active">Convenience</div>
<div class="navitem">Fresh Food</div>
<div class="navitem">Store Map</div>
<div class="navitem">Membership</div>
</div>
<div class="navspacer"></div>
<div class="navutil">
<span class="util-btn">Find a store</span>
<span class="util-btn">Coupons</span>
</div>
</nav>
<main>
<div class="lede">
<h1>FamilyMart · today's categories</h1>
<span>Updated hourly at your nearest store</span>
</div>
<div class="grid">
<div class="cell s1"><span class="swatch" style="background:#00b347"></span><p class="title">Rice & Bento</p><p class="desc">Hot lunch sets, ready in minutes</p><span class="tag">In stock</span></div>
<div class="cell s2"><span class="swatch" style="background:#e08a3c"></span><p class="title">Fresh Bakery</p><p class="desc">Baked daily before store open</p><span class="tag">New</span></div>
<div class="cell s3"><span class="swatch" style="background:#4d6fd6"></span><p class="title">Hot Coffee</p><p class="desc">Self-serve counter, three roasts</p><span class="tag">In stock</span></div>
<div class="cell s4"><span class="swatch" style="background:#c2568f"></span><p class="title">Chilled Drinks</p><p class="desc">Tea, juice, and sports drinks</p><span class="tag">In stock</span></div>
<div class="cell s5"><span class="swatch" style="background:#c9a13a"></span><p class="title">Instant Noodles</p><p class="desc">Local and imported selection</p><span class="tag">In stock</span></div>
<div class="cell s6"><span class="swatch" style="background:#3ea6bf"></span><p class="title">Ice Cream</p><p class="desc">Single serve, family pack sizes</p><span class="tag">In stock</span></div>
<div class="cell s7"><span class="swatch" style="background:#8a5fc7"></span><p class="title">Snacks</p><p class="desc">Chips, biscuits, seasonal flavors</p><span class="tag">In stock</span></div>
<div class="cell s8"><span class="swatch" style="background:#5f9a3c"></span><p class="title">Daily Essentials</p><p class="desc">Batteries, tissues, phone cards</p><span class="tag">In stock</span></div>
</div>
</main>
<footer>
<span>© FamilyMart</span>
<span>Store Locator · Franchise · Careers</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffc72c; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffc72c; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c631d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #da291c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffc72c; color: #da291c;
border: 1px solid #da291c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffc72c; color: #111111;
border: 1px solid #d9aa28; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c631d; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #f9ae29; color: #da291c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1A1A; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.greet { display:flex; align-items:center; padding:18px 26px 8px; gap:12px; }
.arches { width:30px; height:26px; background:#FFC72C; clip-path:polygon(20% 100%, 20% 55%, 0 30%, 20% 0, 50% 35%, 80% 0, 100% 30%, 80% 55%, 80% 100%); }
.greet h1 { font-size:22px; font-weight:800; margin:0; letter-spacing:-0.4pt; }
.greet h1 span { color:#FFC72C; }
.bell { margin-left:auto; width:36px; height:36px; border-radius:50%; background:#F4F4F5; }
.content { padding:8px 26px 0; display:flex; gap:20px; }
.left { width:430px; }
.right { flex:1; }
.rewards { border-radius:16px; background:#F4F4F5; padding:18px; position:relative; overflow:hidden; }
.rewards::before { content:''; position:absolute; top:-30px; right:-30px; width:120px; height:120px; border-radius:50%;
background:radial-gradient(circle, rgba(255,199,44,0.35), transparent 70%); }
.rewards .eyebrow { font-size:12px; font-weight:700; letter-spacing:0.4pt; text-transform:uppercase; color:#5C5C5C; }
.rewards .pts { font-size:28px; font-weight:900; color:#FFC72C; margin:4px 0; }
.rewards .pts span { font-size:13px; font-weight:700; color:#5C5C5C; }
.track { height:8px; border-radius:4px; background:#E3E3E5; margin:10px 0 8px; }
.track .fill { height:8px; width:62%; border-radius:4px; background:linear-gradient(90deg,#FFC72C,#FFD75E); }
.rewards .cap { font-size:13px; color:#5C5C5C; }
.rewards .cap b { color:#1A1A1A; }
.sectionhead { font-size:19px; font-weight:800; letter-spacing:-0.3pt; margin:18px 0 10px; }
.deals { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.deal { border-radius:16px; background:#F4F4F5; overflow:hidden; }
.deal .photo { height:70px; position:relative; }
.deal .flag { position:absolute; top:8px; left:8px; background:#DA291C; color:#fff; font-size:11px; font-weight:800; letter-spacing:0.3pt;
padding:2px 8px; border-radius:6px; text-transform:uppercase; }
.deal .body { padding:10px 12px; }
.deal .name { font-size:14px; font-weight:800; }
.deal .off { font-size:12px; color:#5C5C5C; margin:2px 0; }
.deal .pts { font-size:11px; font-weight:800; color:#FFC72C; }
.p1 { background:linear-gradient(135deg,#f7d774,#e3a13a); }
.p2 { background:linear-gradient(135deg,#e08b6b,#c0503a); }
.modes { display:flex; gap:10px; margin-top:14px; }
.mode { flex:1; border-radius:12px; border:1.5px solid #E3E3E5; padding:14px 8px; text-align:center; }
.mode.active { border-color:#FFC72C; background:rgba(255,199,44,0.08); }
.mode .ic { width:22px; height:22px; margin:0 auto 6px; border-radius:5px; background:#8A8A8A; }
.mode.active .ic { background:#FFC72C; }
.mode .lbl { font-size:11px; font-weight:700; }
.mode.active .lbl { color:#FFC72C; }
.order-fab { position:absolute; right:36px; bottom:26px; width:56px; height:56px; border-radius:50%; background:#FFC72C;
box-shadow:rgba(255,199,44,0.4) 0 6px 16px; display:flex; align-items:center; justify-content:center; }
.order-fab .cart { width:22px; height:16px; border:2.5px solid #1A1A1A; border-top:none; border-radius:0 0 4px 4px; }
</style></head>
<body>
<div class="greet">
<div class="arches"></div>
<h1>Hi, <span>Alex</span></h1>
<div class="bell"></div>
</div>
<div class="content">
<div class="left">
<div class="rewards">
<div class="eyebrow">McDonald's (iOS) Rewards</div>
<div class="pts">2,150<span> points</span></div>
<div class="track"><div class="fill"></div></div>
<div class="cap">Just 350 points away from a <b>free McNuggets</b></div>
</div>
<div class="sectionhead">Start an order</div>
<div class="modes">
<div class="mode active"><div class="ic"></div><div class="lbl">Pickup</div></div>
<div class="mode"><div class="ic"></div><div class="lbl">Curbside</div></div>
<div class="mode"><div class="ic"></div><div class="lbl">Drive Thru</div></div>
<div class="mode"><div class="ic"></div><div class="lbl">Delivery</div></div>
</div>
</div>
<div class="right">
<div class="sectionhead">Deals & Rewards</div>
<div class="deals">
<div class="deal"><div class="photo p1"><span class="flag">Deal</span></div>
<div class="body"><div class="name">Big Mac</div><div class="off">Buy one, get one $1</div><div class="pts">★ or 1,900 pts</div></div></div>
<div class="deal"><div class="photo p2"><span class="flag">Free</span></div>
<div class="body"><div class="name">McNuggets 6pc</div><div class="off">Free with any purchase</div><div class="pts">★ or 900 pts</div></div></div>
</div>
</div>
</div>
<div class="order-fab"><div class="cart"></div></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00a39f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00a39f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #008485; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00a39f; color: #000000;
border: 1px solid #008485; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00a39f; color: #f5f5f5;
border: 1px solid #27b0ad; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #009e9b; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#555555; box-sizing:border-box;
font-family:"NotoSans","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #dbdbdb; }
.logo { font-size:22px; font-weight:700; color:#333333; }
.tabs { display:flex; }
.tabs span { padding:0 24px; font-size:18px; color:#000000; line-height:70px; }
.tabs span.active { font-weight:700; }
.btn-primary { background:#00a39f; color:#ffffff; border-radius:6px; padding:8px 18px; font-size:12px; }
.hero { background:linear-gradient(135deg,#00a39f,#008485); color:#ffffff; padding:28px 36px;
display:flex; justify-content:space-between; align-items:center; }
.hero h1 { font-size:24px; font-weight:700; margin:0 0 6px; }
.hero p { font-size:14px; margin:0; opacity:0.9; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:20px 36px; }
.card { background:#ffffff; border:2px solid #2dc396; border-radius:6px; padding:20px; font-size:12px; }
.card h3 { font-size:14px; color:#333333; margin:0 0 8px; }
.card p { margin:0; color:#555555; }
.feature { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 36px 20px; }
.feature .tealcard { background:#008485; color:#ffffff; padding:25px 15px 25px 30px; font-size:14px; font-weight:700; }
.feature .greycard { background:#f8f8f8; padding:20px; font-size:12px; color:#555555; }
footer { border-top:1px solid #dbdbdb; padding:12px 36px; display:flex; justify-content:space-between;
font-size:12px; color:#666666; }
</style></head>
<body>
<nav>
<span class="logo">Hana Bank</span>
<div class="tabs"><span class="active">Accounts</span><span>Transfer</span><span>Bills</span><span>Foreign Exchange</span><span>Products</span></div>
<span class="btn-primary">Log In</span>
</nav>
<section class="hero">
<div>
<h1>One Term Deposit</h1>
<p>Build a stronger safety net with a monthly compound savings plan for your paycheck</p>
</div>
</section>
<div class="grid">
<div class="card"><h3>Credit Loans</h3><p>Starting from 3.1%, simple application.</p></div>
<div class="card"><h3>Secured Loans</h3><p>Personalized consulting for mortgage loans.</p></div>
<div class="card"><h3>Wire Transfer</h3><p>Real-time exchange rates and transfers.</p></div>
</div>
<div class="feature">
<div class="tealcard">High-Yield Plus<br /><span style="font-weight:400;font-size:12px;">Up to 4.2% APY special deposit</span></div>
<div class="greycard">Wealth Builder Savings — grow a nest egg with automatic monthly transfers</div>
</div>
<footer>
<span>© Hana Bank</span>
<span>Brand Site · Network · Customer Center</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #313131; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #ffffff; color: #1a1a1a;
border: 1px solid #313131; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #d4d4d4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #c62828; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#313131; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #e8e8e8;}
.logo{font-weight:700;font-size:17px;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;}
.search{margin-left:auto;margin-right:20px;background:#f5f5f5;border-radius:9999px;padding:8px 16px;font-size:13px;color:#6b6b6b;}
.section{padding:20px 30px;}
.section h2{font-size:18px;font-weight:600;margin:0 0 4px;}
.section .sub{font-size:13px;color:#6b6b6b;margin:0 0 14px;}
.tags{display:flex;gap:8px;margin-bottom:16px;}
.tag{background:#f5f5f5;font-size:12px;font-weight:600;padding:6px 14px;border-radius:9999px;color:#313131;}
.tag.active{background:#313131;color:#fff;}
.grid{display:flex;gap:14px;}
.card{flex:1;border:1px solid #e8e8e8;border-radius:4px;overflow:hidden;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:2px;color:#fff;}
.b1{background:#c62828;}
.b2{background:#1565c0;}
.b3{background:#6a1b9a;}
.card .img{aspect-ratio:2/3;height:170px;}
.p1{background:linear-gradient(200deg,#8a0000,#1a1a1a 60%);}
.p2{background:linear-gradient(200deg,#c62828,#313131 55%,#000);}
.p3{background:linear-gradient(200deg,#4a0e4e,#1a1a1a);}
.info{padding:8px 10px;}
.card h3{font-size:14px;font-weight:600;margin:0 0 3px;}
.card .price{font-size:14px;font-weight:700;}
</style>
<div class="nav">
<div class="logo">Diabolikdvd</div>
<div class="navlinks"><span>Horror</span><span>Cult</span><span>Exploitation</span><span>Giallo</span></div>
<div class="search">Search titles…</div>
</div>
<div class="section">
<h2>New Arrivals</h2>
<div class="sub">Specialist horror, cult, and exploitation on Blu-ray & DVD</div>
<div class="tags"><div class="tag active">All</div><div class="tag">4K UHD</div><div class="tag">Blu-ray</div><div class="tag">Out of Print</div></div>
<div class="grid">
<div class="card"><span class="badge b1">New</span><div class="img p1"></div><div class="info"><h3>Blood Feast Redux</h3><div class="price">$24.99</div></div></div>
<div class="card"><span class="badge b2">Sale</span><div class="img p2"></div><div class="info"><h3>The Screaming Hour</h3><div class="price">$18.99</div></div></div>
<div class="card"><span class="badge b3">OOP</span><div class="img p3"></div><div class="info"><h3>Giallo Nights</h3><div class="price">$39.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #0f72b7; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #0f72b7;
border: 1px solid #0f72b7; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.8px; background: #0f72b7; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#1a1a1a; font-family:system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dddddd;}
.logo{font-size:19px;font-weight:700;color:#0f72b7;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;}
.hero{height:220px;background:#0f72b7;color:#fff;display:flex;align-items:center;padding:0 32px;}
.herotext{width:440px;}
.herotext h1{font-size:32px;font-weight:700;margin:0 0 10px;}
.herotext p{font-size:15px;margin:0 0 16px;color:#dceaf7;}
.cta{display:inline-block;background:#fff;color:#0f72b7;font-size:14px;font-weight:600;padding:12px 24px;border-radius:4px;}
.pennib{margin-left:auto;width:180px;height:140px;position:relative;}
.pennib:before{content:'';position:absolute;right:20px;top:10px;width:20px;height:120px;background:#054a7a;border-radius:6px;}
.pennib:after{content:'';position:absolute;right:16px;top:0;width:28px;height:24px;background:#fff;border-radius:14px 14px 0 0;}
.grid{display:flex;gap:14px;padding:18px 32px;}
.card{width:200px;border:1px solid #dddddd;border-radius:4px;padding:12px;}
.thumb{height:88px;background:#eeeeee;border-radius:4px;margin-bottom:10px;}
.ptitle{font-size:14px;font-weight:600;}
.psku{font-size:11px;color:#666;letter-spacing:.5px;margin-top:4px;}
.swatches{display:flex;gap:6px;margin-top:8px;}
.sw{width:16px;height:16px;border-radius:9999px;border:2px solid #dddddd;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#054a7a;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Pilot Pen</div>
<div class="navlinks"><div>Rollerball</div><div>Gel</div><div>Fountain Pens</div><div>Refills</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Precision that lasts a lifetime.</h1>
<p>Writing instruments engineered for the mark you leave behind.</p>
<div class="cta">Shop Pens</div>
</div>
<div class="pennib"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0f72b7,#054a7a)"></div><div class="ptitle">G2 Retractable Gel</div><div class="psku">SKU G2-07-BLK</div><div class="swatches"><span class="sw" style="background:#054a7a"></span><span class="sw" style="background:#0b598f"></span><span class="sw" style="background:#0f72b7"></span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#054a7a,#0b598f)"></div><div class="ptitle">Vanishing Point</div><div class="psku">SKU VP-M-BLU</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0b598f,#0f72b7)"></div><div class="ptitle">Precise V5 Rollerball</div><div class="psku">SKU PV5-EXFN</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0f72b7,#0b598f)"></div><div class="ptitle">FriXion Erasable Set</div><div class="psku">SKU FX-3PK</div></div>
</div>
<div class="footer"><span>© Pilot Pen · Since 1918</span><span>Products · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfaff; color: #1f2937;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfaff; color: #1f2937;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1f2937; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #492f8b; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #ffffff; color: #492f8b;
border: 1px solid #492f8b; border-radius: 9999px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1f2937;
border: 1px solid #c4c6cd; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff2857; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fbfaff; font-family:'ITC Avant Garde Gothic Pro','Poppins',sans-serif; color:#3f2021; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#fff;border-bottom:1px solid #f2f2f2;}
.logo{font-size:20px;font-weight:800;color:#492f8b;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#3f2021;}
.navcta{background:#492f8b;color:#fff;font-size:12px;font-weight:700;padding:10px 18px;border-radius:9999px;}
.hero{height:224px;display:flex;background:linear-gradient(120deg,#fbfaff 45%,#ffe5ef 100%);position:relative;overflow:hidden;}
.confetti{position:absolute;border-radius:50%;}
.herotext{width:440px;padding:26px 36px;display:flex;flex-direction:column;justify-content:center;z-index:2;}
.kicker{font-size:12px;font-weight:700;letter-spacing:.3px;color:#ff2857;margin-bottom:8px;}
.h1{font-size:29px;font-weight:800;line-height:1.2;color:#492f8b;margin:0 0 10px;}
.sub{font-size:14px;color:#3f2021;margin:0 0 16px;max-width:340px;}
.btn{width:160px;text-align:center;background:#492f8b;color:#fff;font-size:13px;font-weight:700;padding:11px 0;border-radius:9999px;}
.heroimg{flex:1;position:relative;}
.gummy{position:absolute;border-radius:50%;box-shadow:0 8px 18px rgba(73,47,139,.25);}
.strip{display:flex;gap:10px;padding:14px 36px 0;}
.chip{background:#fff;border:1px solid #f2f2f2;border-radius:9999px;padding:6px 14px;font-size:11px;font-weight:700;color:#492f8b;}
.sec{padding:14px 36px 0;}
.sectitle{font-size:13px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:#492f8b;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:154px;background:#fff;border:1px solid #f2f2f2;border-radius:14px;padding:9px;position:relative;}
.thumb{height:92px;border-radius:12px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;}
.candy{width:44px;height:44px;border-radius:50%;}
.pname{font-size:12px;font-weight:700;line-height:1.3;height:30px;overflow:hidden;}
.pprice{font-size:13px;font-weight:800;color:#492f8b;margin-top:3px;}
.badge{position:absolute;top:7px;left:7px;color:#fff;font-size:9px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;padding:3px 7px;border-radius:9999px;}
</style>
<div class="nav">
<div class="logo">Obvi</div>
<div class="navlinks"><span>Collagen</span><span>Skin</span><span>Hair & Nails</span><span>Bundles</span></div>
<div class="navcta">Shop Bestsellers</div>
</div>
<div class="hero">
<div class="confetti" style="width:22px;height:22px;background:#fc89e2;top:20px;left:410px;"></div>
<div class="confetti" style="width:14px;height:14px;background:#ffca56;top:70px;left:460px;"></div>
<div class="confetti" style="width:18px;height:18px;background:#33dfab;top:150px;left:430px;"></div>
<div class="confetti" style="width:12px;height:12px;background:#ff2857;top:30px;left:520px;"></div>
<div class="herotext">
<div class="kicker">Real Results, No Nonsense</div>
<div class="h1">Wellness that feels<br>like a treat, not a task.</div>
<div class="sub">Collagen and beauty supplements formulated to fit real, joyful, unfiltered bodies.</div>
<div class="btn">Shop Collagen</div>
</div>
<div class="heroimg">
<div class="gummy" style="width:110px;height:80px;background:radial-gradient(circle at 35% 30%,#ffd3bc,#fc89e2 70%);top:60px;left:60px;"></div>
<div class="gummy" style="width:70px;height:70px;background:radial-gradient(circle at 35% 30%,#ffca56,#e9ccff 70%);top:30px;left:180px;"></div>
<div class="gummy" style="width:60px;height:60px;background:radial-gradient(circle at 35% 30%,#33dfab,#10c6c6 70%);top:120px;left:200px;"></div>
</div>
</div>
<div class="strip">
<div class="chip">Gluten-Free</div>
<div class="chip">3rd Party Tested</div>
<div class="chip">1B+ Scoops Sold</div>
<div class="chip">Vegan Options</div>
</div>
<div class="sec">
<div class="sectitle">Shop The Line</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#ff2857;">Best Seller</span><div class="thumb" style="background:#fff6ea;"><div class="candy" style="background:radial-gradient(circle at 35% 30%,#ffd3bc,#fc89e2)"></div></div><div class="pname">Super Orange Collagen</div><div class="pprice">$39.99</div></div>
<div class="card"><div class="thumb" style="background:#f0f7cf;"><div class="candy" style="background:radial-gradient(circle at 35% 30%,#a8e6a1,#2e6e36)"></div></div><div class="pname">Daily Greens Superfoods</div><div class="pprice">$34.99</div></div>
<div class="card"><div class="thumb" style="background:#e9ccff;"><div class="candy" style="background:radial-gradient(circle at 35% 30%,#e9ccff,#7800bf)"></div></div><div class="pname">Beauty Gummies</div><div class="pprice">$24.99</div></div>
<div class="card"><span class="badge" style="background:#492f8b;">New</span><div class="thumb" style="background:#fff6dc;"><div class="candy" style="background:radial-gradient(circle at 35% 30%,#ffca56,#bc8100)"></div></div><div class="pname">Bloat Support Blend</div><div class="pprice">$29.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #003399; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #ffffff; color: #003399;
border: 1px solid #003399; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333333;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #cc0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; background:#ffffff; color:#1a1a1a; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:72px;display:flex;align-items:center;gap:26px;padding:0 34px;border-bottom:1px solid #f0f0f0;}
.logo{font-size:19px;font-weight:600;color:#003399;margin-right:10px;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:600;flex:1;}
.navlinks .on{color:#003399;border-bottom:2px solid #003399;padding-bottom:24px;}
.search{width:220px;height:36px;border-radius:9999px;background:#f5f5f5;border:1px solid #e0e0e0;}
.catstrip{display:flex;gap:20px;padding:10px 34px;border-bottom:1px solid #f0f0f0;font-size:13px;font-weight:600;color:#666;}
.catstrip .on{color:#003399;}
.hero{height:190px;background:#f5f5f5;display:flex;align-items:center;padding:0 34px;}
.herotxt{width:50%;}
.herotxt h1{font-size:28px;font-weight:600;margin:0 0 8px;}
.herotxt p{font-size:14px;color:#666;margin:0 0 14px;max-width:300px;}
.cta{width:fit-content;font-size:14px;font-weight:600;background:#003399;color:#fff;padding:11px 24px;border-radius:8px;}
.rec{width:50%;display:flex;justify-content:center;}
.disc{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#1a1a1a 0 8px,#003399 9px 12px,#1a1a1a 13px 60px,#333 61px 100%);}
.sec{padding:16px 34px 0;}
.sec h2{font-size:18px;font-weight:600;margin:0 0 12px;}
.grid{display:flex;gap:14px;}
.card{width:213px;border:1px solid #e0e0e0;border-radius:8px;padding:10px;}
.cimg{height:110px;border-radius:6px;margin-bottom:8px;position:relative;}
.cimg .hole{position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);}
.ctitle{font-size:14px;font-weight:600;line-height:1.3;height:32px;overflow:hidden;}
.cprice{font-size:14px;font-weight:600;color:#003399;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#1a1a1a;color:#999;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:11px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Music Direct</div>
<div class="navlinks"><div class="on">Vinyl</div><div>Turntables</div><div>Speakers</div><div>Cables</div></div>
<div class="search"></div>
</div>
<div class="catstrip"><div class="on">New Arrivals</div><div>180g Pressings</div><div>Analog Front End</div><div>Accessories</div></div>
<div class="hero">
<div class="herotxt">
<h1>Analog, done right.</h1>
<p>Audiophile-grade turntables and 180g pressings, curated for the listening room.</p>
<div class="cta">Shop Turntables</div>
</div>
<div class="rec"><div class="disc"></div></div>
</div>
<div class="sec">
<h2>Featured This Week</h2>
<div class="grid">
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#003399,#1a1a1a)"><div class="hole"></div></div><div class="ctitle">Kind of Blue — 180g LP</div><div class="cprice">$38.99</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#666,#1a1a1a)"><div class="hole"></div></div><div class="ctitle">Direct-Drive Turntable</div><div class="cprice">$1,299.00</div></div>
<div class="card"><div class="cimg" style="background:linear-gradient(135deg,#999,#333)"><div class="hole"></div></div><div class="ctitle">Bookshelf Speaker Pair</div><div class="cprice">$649.00</div></div>
</div>
</div>
<div class="footer"><span>© Audiophile Since 1990</span><span>Shipping Trade-In Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf9f5; color: #282a2c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf9f5; color: #282a2c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #282a2c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #fcbc3d; color: #282a2c;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: transparent; color: #282a2c;
border: 1px solid #fcbc3d; border-radius: 8px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #faf9f5; color: #282a2c;
border: 1px solid #c6c5c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.27; letter-spacing: 0.8px; background: #fcbc3d; color: #282a2c;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#faf9f5; font-family:Arial,'Helvetica Neue',sans-serif; color:#404040; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-size:20px;font-weight:700;color:#282a2c;}
.navlinks{display:flex;gap:24px;font-size:15px;font-weight:500;color:#282a2c;}
.btn-primary{background:#fcbc3d;color:#282a2c;font-size:14px;font-weight:600;padding:11px 24px;border-radius:8px;}
.hero{height:230px;background:#282a2c;display:flex;align-items:center;padding:0 40px;}
.h1{font-size:38px;font-weight:700;color:#faf9f5;margin:0 0 10px;letter-spacing:-0.3px;max-width:440px;}
.hsub{font-size:15px;color:#c9c9c9;max-width:380px;margin:0 0 16px;}
.hbtn{display:inline-block;background:#fcbc3d;color:#282a2c;font-size:16px;font-weight:600;padding:14px 30px;border-radius:8px;}
.section{padding:20px 32px 0;}
.sectitle{font-size:16px;font-weight:600;color:#282a2c;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#fff;border:1px solid #e7e7e7;border-radius:8px;overflow:hidden;}
.thumb{height:88px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;background:#fcbc3d;color:#282a2c;padding:3px 8px;border-radius:4px;}
.pbody{padding:10px 14px 14px;}
.ptitle{font-size:15px;font-weight:600;color:#282a2c;}
.pprice{font-size:17px;font-weight:700;color:#282a2c;margin-top:4px;}
.specs{display:flex;gap:6px;margin-top:6px;}
.pill{background:#f1efe5;color:#404040;font-size:10px;font-weight:600;text-transform:uppercase;padding:3px 8px;border-radius:4px;letter-spacing:0.5px;}
</style>
<div class="nav">
<div class="logo">Rad Power Bikes</div>
<div class="navlinks"><span>City</span><span>Cargo</span><span>Off-Road</span><span>Accessories</span></div>
<div class="btn-primary">Find a Ride</div>
</div>
<div class="hero">
<div><div class="h1">Electric Bikes Built to Actually Ride</div><div class="hsub">Comfortable, capable e-bikes for the commute, the cargo run, and everything in between.</div><div class="hbtn">Shop Ebikes</div></div>
</div>
<div class="section">
<div class="sectitle">Best Selling Models</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#fcbc3d,#282a2c);"><div class="badge">Best Seller</div></div><div class="pbody"><div class="ptitle">RadCity 5 Plus</div><div class="pprice">$1,499</div><div class="specs"><div class="pill">45mi</div><div class="pill">750W</div></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#cb4e17,#282a2c);"></div><div class="pbody"><div class="ptitle">RadWagon Cargo 4</div><div class="pprice">$1,899</div><div class="specs"><div class="pill">45mi</div><div class="pill">750W</div></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#078466,#282a2c);"></div><div class="pbody"><div class="ptitle">RadRover 6 Plus</div><div class="pprice">$1,699</div><div class="specs"><div class="pill">45mi</div><div class="pill">750W</div></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f3743c,#282a2c);"></div><div class="pbody"><div class="ptitle">RadRunner 3 Plus</div><div class="pprice">$1,999</div><div class="specs"><div class="pill">45mi</div><div class="pill">750W</div></div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7a29fa; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7a29fa; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #be99f7; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f4373d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7a29fa; color: #ffffff;
border: 1px solid #f4373d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7a29fa; color: #f5f5f5;
border: 1px solid #8e4af9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #be99f7; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #8e2bdc; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family: SUIT, "UI Frip", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; flex-direction:column; height:640px; }
nav { height:52px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
padding:0 24px; border-bottom:1px solid #e6e6e6; }
.logo { font-size:18px; font-weight:700; color:#000000; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:400; color:#000000; }
.navlinks .active { color:#7a29fa; font-weight:700; }
.navsearch { border:1px solid #dddddd; border-radius:20px; padding:6px 14px; font-size:12px; color:#999999; }
.main { flex:1 1 auto; overflow:hidden; padding:16px 24px 8px; display:flex; flex-direction:column; gap:14px; }
.shelf-title { display:flex; align-items:center; justify-content:space-between; }
.shelf-title h2 { font-size:18px; font-weight:700; margin:0; color:#000000; }
.shelf-title span { font-size:12px; color:#999999; }
.row1 { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.card { background:#ffffff; border:1px solid #e6e6e6; border-radius:5px; overflow:hidden; }
.thumb { height:118px; position:relative; }
.t1 { background:linear-gradient(135deg,#ffd9a0,#ff9776); }
.t2 { background:linear-gradient(135deg,#a0d8ff,#7a29fa); }
.t3 { background:linear-gradient(135deg,#c9f2c0,#4caf7d); }
.t4 { background:linear-gradient(135deg,#ffd0e6,#f4373d); }
.badge { position:absolute; top:8px; left:8px; border-radius:5px; padding:4px 6px; font-size:9px; font-weight:500; color:#ffffff; }
.b-excl { background:#f4373d; }
.b-super { background:#7a29fa; }
.cinfo { padding:8px 10px 10px; }
.ctitle { font-size:12px; font-weight:400; color:#333333; line-height:1.3; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cprice { display:flex; align-items:baseline; gap:5px; }
.disc { font-size:12px; font-weight:700; color:#ff3f33; }
.price { font-size:12px; font-weight:700; color:#333333; }
.pinkband { background:#fff4f7; border-radius:8px; padding:14px 16px; flex:1 1 auto; display:flex; flex-direction:column; gap:10px; min-height:0; }
.row2 { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.card2 { background:#ffffff; border:1px solid #e6e6e6; border-radius:5px; display:flex; overflow:hidden; }
.thumb2 { width:78px; flex:0 0 auto; }
.t5 { background:linear-gradient(135deg,#e0c3fc,#7a29fa); }
.t6 { background:linear-gradient(135deg,#ffe29f,#ffa751); }
.t7 { background:linear-gradient(135deg,#a1c4fd,#c2e9fb); }
.cinfo2 { padding:8px 10px; flex:1; min-width:0; }
.ctitle2 { font-size:11px; color:#333333; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.point { font-size:9px; font-weight:500; color:#e21d47; }
.appbar { flex:0 0 auto; height:45px; background:#333333; color:#ffffff; display:flex; align-items:center;
justify-content:center; font-size:12px; font-weight:700; letter-spacing:0.2px; }
</style></head>
<body>
<div class="wrap">
<nav>
<div class="logo">Frip</div>
<div class="navlinks">
<span class="active">Categories</span><span>Feed</span><span>Messages</span><span>Wishlist</span><span>My</span>
</div>
<div class="navsearch">Search experiences</div>
</nav>
<div class="main">
<div>
<div class="shelf-title"><h2>Weekly Top Picks 🏆</h2><span>See all →</span></div>
<div class="row1" style="margin-top:10px;">
<div class="card">
<div class="thumb t1"><span class="badge b-excl">Exclusive</span></div>
<div class="cinfo"><div class="ctitle">Sunset Pottery Studio Class</div>
<div class="cprice"><span class="disc">48%</span><span class="price">₩19,800</span></div></div>
</div>
<div class="card">
<div class="thumb t2"><span class="badge b-super">Superhost</span></div>
<div class="cinfo"><div class="ctitle">Han River Night Kayaking</div>
<div class="cprice"><span class="disc">30%</span><span class="price">₩38,000</span></div></div>
</div>
<div class="card">
<div class="thumb t3"></div>
<div class="cinfo"><div class="ctitle">Weekend Baking Workshop</div>
<div class="cprice"><span class="disc">20%</span><span class="price">₩25,000</span></div></div>
</div>
<div class="card">
<div class="thumb t4"><span class="badge b-excl">Exclusive</span></div>
<div class="cinfo"><div class="ctitle">Solo Hiking Day Trip</div>
<div class="cprice"><span class="disc">89%</span><span class="price">₩9,900</span></div></div>
</div>
</div>
</div>
<div class="pinkband">
<div class="shelf-title"><h2 style="font-size:15px;">Curated For Crew</h2><span>New Frip Energy x2</span></div>
<div class="row2">
<div class="card2">
<div class="thumb2 t5"></div>
<div class="cinfo2"><div class="ctitle2">Late-night Craft Beer Tasting</div><span class="point">Crew reward +2</span></div>
</div>
<div class="card2">
<div class="thumb2 t6"></div>
<div class="cinfo2"><div class="ctitle2">Small-group Camping Trip</div><span class="point">Crew reward +2</span></div>
</div>
<div class="card2">
<div class="thumb2 t7"></div>
<div class="cinfo2"><div class="ctitle2">Beginner Surf Lesson</div><span class="point">Crew reward +2</span></div>
</div>
</div>
</div>
</div>
<div class="appbar">Download the App · Frip</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00cd3c; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00cd3c; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00b523; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00cd3c; color: #000000;
border: 1px solid #00b523; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00cd3c; color: #000000;
border: 1px solid #27d35a; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00c938; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a1a1a; box-sizing:border-box;
font-family:"Pretendard", "Malgun Gothic", sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; padding:0 28px; border-bottom:1px solid #eeeeee; }
.brand { font-size:16px; font-weight:700; color:#00cd3c; margin:0; }
.navlinks { display:flex; gap:20px; margin-left:26px; }
.navlinks span { font-size:13px; color:#666666; }
.navlinks span.on { color:#00cd3c; }
.search { margin-left:auto; width:220px; height:30px; border:1px solid #eeeeee; display:flex; align-items:center;
padding:0 10px; font-size:12px; color:#999999; }
.login { background:#00d344; color:#ffffff; height:32px; padding:0 16px; display:flex; align-items:center;
font-size:13px; margin-left:12px; }
.chart { display:flex; gap:0; padding:14px 28px 0; }
.chart-col { flex:1; }
h2.title { font-size:14px; font-weight:600; color:#1a1a1a; margin:0 0 8px; }
.row { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid #f4f4f4; }
.rank { width:20px; font-size:13px; color:#1a1a1a; font-weight:600; }
.thumb { width:36px; height:36px; }
.thumb.a{background:linear-gradient(135deg,#00cd3c,#00b523);} .thumb.b{background:linear-gradient(135deg,#c9c9c9,#8a8a8a);}
.thumb.c{background:linear-gradient(135deg,#ffd76a,#ff8c42);}
.info { flex:1; min-width:0; }
.track { font-size:12px; color:#1a1a1a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.artist { font-size:12px; color:#666666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.play { width:20px; height:20px; background:#00cd3c; flex:none; }
.player { position:relative; margin-top:14px; height:64px; background:#f7f7f7; border-top:1px solid #eeeeee;
display:flex; align-items:center; padding:0 28px; gap:14px; }
.player .cover { width:40px; height:40px; background:linear-gradient(135deg,#00cd3c,#00b523); }
.player .meta { flex:none; }
.player .t { font-size:13px; color:#1a1a1a; }
.player .a { font-size:12px; color:#666666; }
.bar { flex:1; height:3px; background:#e5e5e5; position:relative; }
.bar::before { content:''; position:absolute; left:0; top:0; bottom:0; width:38%; background:#00cd3c; }
.ctrl { width:26px; height:26px; background:#00cd3c; flex:none; }
</style></head>
<body>
<nav>
<p class="brand">Melon</p>
<div class="navlinks"><span class="on">Chart</span><span>Latest</span><span>Genre</span><span>MY Music</span></div>
<div class="search">Search songs, artists</div>
<div class="login">Login</div>
</nav>
<div class="chart">
<div class="chart-col">
<h2 class="title">Realtime Chart</h2>
<div class="row"><span class="rank">1</span><div class="thumb a"></div><div class="info"><div class="track">Midnight Drive</div><div class="artist">Nova Kim</div></div><div class="play"></div></div>
<div class="row"><span class="rank">2</span><div class="thumb b"></div><div class="info"><div class="track">Paper Airplane</div><div class="artist">Seoyeon</div></div><div class="play"></div></div>
<div class="row"><span class="rank">3</span><div class="thumb c"></div><div class="info"><div class="track">City Lights (Remix)</div><div class="artist">Haneul & Jiho</div></div><div class="play"></div></div>
<div class="row"><span class="rank">4</span><div class="thumb a"></div><div class="info"><div class="track">Bloom</div><div class="artist">Yerin</div></div><div class="play"></div></div>
</div>
<div class="chart-col">
<h2 class="title">New Releases</h2>
<div class="row"><span class="rank">1</span><div class="thumb b"></div><div class="info"><div class="track">Winter Letter</div><div class="artist">Doyoon</div></div><div class="play"></div></div>
<div class="row"><span class="rank">2</span><div class="thumb c"></div><div class="info"><div class="track">Echoes</div><div class="artist">Minji Band</div></div><div class="play"></div></div>
<div class="row"><span class="rank">3</span><div class="thumb a"></div><div class="info"><div class="track">Neon Sign</div><div class="artist">Taeyang</div></div><div class="play"></div></div>
<div class="row"><span class="rank">4</span><div class="thumb c"></div><div class="info"><div class="track">Slow Rain</div><div class="artist">Areum</div></div><div class="play"></div></div>
</div>
</div>
<div class="player">
<div class="cover"></div>
<div class="meta"><div class="t">Midnight Drive</div><div class="a">Nova Kim</div></div>
<div class="ctrl"></div>
<div class="bar"></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #080341;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #080341;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #080341; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0.2px; background: #0057b8; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0.2px; background: #ffffff; color: #080341;
border: 1px solid #0057b8; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c1c0d0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #0057b8; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:64px;background:#080341;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:18px;font-weight:600;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#fff;}
.icons{display:flex;gap:14px;color:#fff;font-size:14px;}
.hero{height:210px;background:#080341;display:flex;align-items:center;padding:0 34px;}
.herotext{width:52%;}
.herotext h1{font-size:28px;font-weight:600;color:#fff;margin:0 0 10px;letter-spacing:-0.3px;}
.herotext p{font-size:14px;color:#9ca3af;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#0057b8;color:#fff;font-size:15px;font-weight:500;padding:12px 24px;border-radius:4px;}
.heroimg{width:44%;height:130px;border-radius:4px;background:linear-gradient(135deg,#3c3c3c,#080341);}
.spectable{display:flex;gap:1px;background:#e5e7eb;margin:0 34px;}
.speccell{flex:1;background:#f3f4f6;text-align:center;padding:8px;}
.speclabel{font-size:9px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:#6b7280;}
.specvalue{font-size:13px;color:#080341;margin-top:2px;font-weight:600;}
.section{padding:16px 34px 0;}
.seclabel{font-size:18px;font-weight:600;color:#080341;margin-bottom:10px;}
.grid{display:flex;gap:14px;}
.card{width:190px;border:1px solid #e5e7eb;border-radius:4px;padding:12px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#0057b8;color:#fff;font-size:10px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.badgestock{position:absolute;top:8px;right:8px;background:#3ed660;color:#fff;font-size:9px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.thumb{height:90px;border-radius:4px;background:#f3f4f6;margin-bottom:8px;}
.ptitle{font-size:15px;font-weight:500;color:#080341;margin-bottom:4px;}
.pprice{font-size:18px;font-weight:600;color:#080341;}
</style>
<div class="nav">
<div class="logo">Sabrent</div>
<div class="navlinks"><div>SSDs</div><div>Docks</div><div>Enclosures</div><div>Support</div></div>
<div class="icons">🔍 🛒</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Engineered Storage. No Excuses.</h1>
<p>NVMe speed, machined aluminum, and a five-year warranty on every drive.</p>
<div class="cta">Shop SSDs</div>
</div>
<div class="heroimg"></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Read Speed</div><div class="specvalue">7000 MB/s</div></div>
<div class="speccell"><div class="speclabel">Write Speed</div><div class="specvalue">6500 MB/s</div></div>
<div class="speccell"><div class="speclabel">Controller</div><div class="specvalue">PCIe 4.0</div></div>
<div class="speccell"><div class="speclabel">Warranty</div><div class="specvalue">5 Years</div></div>
</div>
<div class="section">
<div class="seclabel">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge">New</span><span class="badgestock">In Stock</span><div class="thumb" style="background:linear-gradient(135deg,#080341,#0057b8)"></div><div class="ptitle">Rocket 4 Plus 2TB NVMe</div><div class="pprice">$189.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3c3c3c,#080341)"></div><div class="ptitle">USB-C Multiport Dock</div><div class="pprice">$79.99</div></div>
<div class="card"><span class="badgestock">In Stock</span><div class="thumb" style="background:linear-gradient(135deg,#0057b8,#080341)"></div><div class="ptitle">Rocket XTRM-Q 4TB</div><div class="pprice">$449.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #640faf; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #640faf; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b48ed6; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ec0040; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #640faf; color: #ffffff;
border: 1px solid #ec0040; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #640faf; color: #f5f5f5;
border: 1px solid #7b34ba; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b48ed6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7a0d9d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Nanum Barun Gothic", "Pretendard", -apple-system, sans-serif; }
* { box-sizing:border-box; }
.utilbar { height:26px; background:#26292a; color:#929292; font-size:11px; display:flex; align-items:center;
gap:16px; padding:0 24px; }
.nav { height:50px; display:flex; align-items:center; padding:0 24px; gap:24px; border-bottom:1px solid #e5e5e5; }
.nav .brand { font-size:22px; font-weight:700; color:#640faf; }
.nav .links { display:flex; gap:18px; font-size:15px; }
.nav .links .cur { color:#640faf; }
.search { flex:1; max-width:300px; height:32px; border-bottom:2px solid #111; display:flex; align-items:center; font-size:13px; color:#929292; }
.banner { margin:16px 24px 0; height:100px; background:linear-gradient(100deg,#3d0a63,#640faf); border-radius:4px;
display:flex; align-items:center; justify-content:space-between; padding:0 30px; color:#fff; }
.banner .live { display:flex; align-items:center; gap:8px; font-size:13px; }
.live .dot { width:8px; height:8px; border-radius:50%; background:#ec0040; }
.banner h2 { font-size:20px; margin:4px 0; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px 24px 0; }
.card { border:1px solid #e5e5e5; border-radius:2px; overflow:hidden; }
.thumb { aspect-ratio:1/1; background:#f5f5f5; position:relative; }
.p1{background:linear-gradient(150deg,#f0e6f7,#dcc3ef);} .p2{background:linear-gradient(150deg,#fde6ea,#f8c0cc);}
.p3{background:linear-gradient(150deg,#e6f0fd,#c0d8f8);} .p4{background:linear-gradient(150deg,#f7f0e6,#efdcb8);}
.sale { position:absolute; top:6px; left:6px; background:rgba(0,0,0,0.2); color:#fff; font-size:11px; font-weight:700;
border-radius:2px; padding:2px 8px; }
.cbody { padding:8px 8px 10px; }
.cprice { font-size:16px; font-weight:700; }
.cprice .sale-pct { color:#ec0040; margin-right:4px; }
.ctitle { font-size:12px; color:#2a2a2a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.buybar { display:flex; gap:10px; padding:16px 24px 0; }
.buy-primary { flex:1; height:44px; background:#640faf; color:#fff; border-radius:4px; font-size:15px; font-weight:400;
display:flex; align-items:center; justify-content:center; }
.buy-wish { width:120px; height:44px; background:#fff; color:#111; border:1px solid #b2b2b2; border-radius:4px;
font-size:15px; display:flex; align-items:center; justify-content:center; }
</style></head>
<body>
<div class="utilbar">Track Order · Customer Service · Sign In · My Zone</div>
<nav class="nav">
<div class="brand">CJ ONSTYLE</div>
<div class="links"><span class="cur">Home</span><span>Deals</span><span>TV Shopping</span><span>Beauty</span><span>Fashion</span></div>
<div class="search">Search products, brands</div>
</nav>
<div class="banner">
<div>
<div class="live"><span class="dot"></span>LIVE Now</div>
<h2>New Fall Knit Collection Up to 40% Off</h2>
</div>
<span style="font-size:13px;">Watch Now ›</span>
</div>
<div class="grid">
<div class="card"><div class="thumb p1"><span class="sale">-40%</span></div>
<div class="cbody"><div class="cprice"><span class="sale-pct">40%</span>₩58,900</div><div class="ctitle">Wool Blend Crewneck Sweater</div></div></div>
<div class="card"><div class="thumb p2"><span class="sale">-20%</span></div>
<div class="cbody"><div class="cprice"><span class="sale-pct">20%</span>₩32,000</div><div class="ctitle">Daily Lip Tint Set of 3</div></div></div>
<div class="card"><div class="thumb p3"></div>
<div class="cbody"><div class="cprice">₩129,000</div><div class="ctitle">AirFit Running Shoes</div></div></div>
<div class="card"><div class="thumb p4"><span class="sale">-15%</span></div>
<div class="cbody"><div class="cprice"><span class="sale-pct">15%</span>₩89,000</div><div class="ctitle">Cashmere Blend Scarf</div></div></div>
</div>
<div class="buybar">
<div class="buy-primary">Buy Now</div>
<div class="buy-wish">Wishlist</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #dedede; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #dedede; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 800; line-height: 1.25; letter-spacing: 0.5px; background: #fdff00; color: #121212;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 800; line-height: 1.25; letter-spacing: 0.5px; background: #dedede; color: #121212;
border: 1px solid #fdff00; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #ababab; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 10px; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; background: #fdff00; color: #121212;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#dedede; font-family:'ABC Diatype Rounded','Helvetica Neue',Arial,sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:64px;background:#dedede;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:22px;font-weight:800;letter-spacing:-0.5px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:800;letter-spacing:0.4px;text-transform:uppercase;}
.navlinks span:first-child{border-bottom:3px solid #fdff00;padding-bottom:16px;}
.navlinks span:not(:first-child){color:#666666;}
.iconrow{display:flex;gap:8px;}
.icon{width:36px;height:36px;border-radius:9999px;background:#ffffff;}
.hero{height:230px;background:#fdff00;display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;}
.heroText{width:440px;z-index:2;}
.h1{font-size:34px;font-weight:900;line-height:1.08;letter-spacing:-0.8px;margin:0 0 12px;}
.sub{font-size:14px;font-weight:400;line-height:1.5;margin:0 0 18px;max-width:340px;}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 26px;border-radius:9999px;font-size:14px;font-weight:800;letter-spacing:0.3px;background:#121212;color:#fdff00;}
.star1{position:absolute;right:80px;top:40px;width:120px;height:120px;border-radius:9999px;background:#ff9cee;}
.star2{position:absolute;right:40px;top:120px;width:70px;height:70px;border-radius:9999px;background:#1990c6;}
.dot{position:absolute;width:14px;height:14px;border-radius:9999px;background:#121212;}
.d1{right:150px;top:170px;} .d2{right:60px;top:60px;}
.mono{position:absolute;left:40px;bottom:16px;font-family:'GT Pressura Mono Text',monospace;font-size:11px;letter-spacing:0.5px;text-transform:uppercase;}
.sec{height:346px;background:#dedede;padding:22px 32px;}
.sectitle{font-size:17px;font-weight:800;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:206px;background:#ffffff;border-radius:20px;padding:16px;position:relative;}
.pbadge{position:absolute;top:12px;left:12px;background:#fdff00;color:#121212;font-family:'GT Pressura Mono Text',monospace;font-size:9px;font-weight:400;letter-spacing:0.5px;text-transform:uppercase;padding:3px 10px;border-radius:9999px;z-index:2;}
.thumb{height:96px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.patch{width:44px;height:44px;border-radius:9999px;}
.ptitle{font-size:14px;font-weight:700;margin-bottom:4px;}
.pprice{font-size:14px;font-weight:800;}
</style>
<div class="nav">
<div class="logo">Starface</div>
<div class="navlinks"><span>Patches</span><span>Skincare</span><span>Sets</span></div>
<div class="iconrow"><div class="icon"></div><div class="icon"></div></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Spots are fine.<br>Have fun.</div>
<div class="sub">Hydrocolloid patches and skincare that turn breakouts into a party, not a problem.</div>
<div class="btn">Shop Patches</div>
</div>
<div class="star1"></div><div class="star2"></div>
<div class="dot d1"></div><div class="dot d2"></div>
<div class="mono">Dermatologist Tested</div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="pbadge">New</div><div class="thumb" style="background:#fdff00"><div class="patch" style="background:#ffffff"></div></div><div class="ptitle">Hydro-Stars Patch</div><div class="pprice">$12.99</div></div>
<div class="card"><div class="thumb" style="background:#ff9cee"><div class="patch" style="background:#ffffff"></div></div><div class="ptitle">Big Yellow Kit</div><div class="pprice">$24.00</div></div>
<div class="card"><div class="thumb" style="background:#1990c6"><div class="patch" style="background:#ffffff"></div></div><div class="ptitle">Silver Serum</div><div class="pprice">$19.99</div></div>
<div class="card"><div class="thumb" style="background:#dedede"><div class="patch" style="background:#ff9cee"></div></div><div class="ptitle">Party Pack Bundle</div><div class="pprice">$34.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1e1f26;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1e1f26;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #1e1f26; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6d6c6c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #003388; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; background: #ffffff; color: #003388;
border: 1px solid #003388; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1e1f26;
border: 1px solid #c7c7c9; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d6c6c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; background: #003388; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:system-ui,-apple-system,sans-serif; color:#1e1f26; }
*{box-sizing:border-box;}
.drop{height:36px;background:#fbb102;color:#1e1f26;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #f0f0f0;}
.logo{color:#003388;font-size:19px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.filters{display:flex;gap:10px;padding:14px 32px 0;}
.filter{border:1px solid #f0f0f0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:8px 16px;border-radius:9999px;color:#32373c;}
.filter.active{background:#003388;color:#fff;border-color:#003388;}
.grid{display:flex;gap:16px;padding:16px 32px 0;}
.card{width:210px;}
.frame{height:180px;background:linear-gradient(135deg,#ab2e31,#00a901);position:relative;}
.frame:nth-child(1){}
.badge{position:absolute;top:0;left:0;background:#003388;color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;}
.info{padding:8px 0;}
.title{font-family:serif;font-size:17px;font-weight:600;}
.artist{font-size:12px;color:#6d6c6c;text-transform:uppercase;letter-spacing:.06em;margin-top:4px;}
.price{font-size:16px;font-weight:600;margin-top:6px;border-top:1px solid #f0f0f0;padding-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#1e1f26;color:#fff;display:flex;align-items:center;justify-content:center;gap:26px;font-size:13px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="drop">New Drop: Friday 10am — Limited Runs</div>
<div class="nav">
<div class="logo">Print Club London</div>
<div class="navlinks"><span>Shop</span><span>Artists</span><span>Editions</span><span>Journal</span></div>
</div>
<div class="filters"><div class="filter active">All</div><div class="filter">Screen Print</div><div class="filter">Riso</div><div class="filter">Sold Out</div></div>
<div class="grid">
<div class="card"><div class="frame" style="background:linear-gradient(135deg,#ab2e31,#1e1f26)"><div class="badge">Limited</div></div><div class="info"><div class="title">Static Ridge</div><div class="artist">Mira Kowalczyk</div><div class="price">£65</div></div></div>
<div class="card"><div class="frame" style="background:linear-gradient(135deg,#e94c89,#003388)"></div><div class="info"><div class="title">Neon Terrace</div><div class="artist">Femi Adegoke</div><div class="price">£48</div></div></div>
<div class="card"><div class="frame" style="background:linear-gradient(135deg,#00a901,#1e1f26)"></div><div class="info"><div class="title">Split Horizon</div><div class="artist">Anouk Verbeek</div><div class="price">£72</div></div></div>
</div>
<div class="footer"><span>About</span><span>Artists</span><span>Shipping</span><span>Contact</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f4; color: #322130;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f4; color: #322130;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0; color: #322130; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #5e5e5e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #c71c2d; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #f4f4f4; color: #c71c2d;
border: 1px solid #c71c2d; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #322130;
border: 1px solid #c4bfc3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5e5e5e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #fbac24; color: #322130;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f4f4f4; font-family:'Source Sans Pro',Arial,sans-serif; color:#2f2f2f; }
*{box-sizing:border-box;}
.nav{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#fff;}
.logo{font-family:Arial Black,Arial,sans-serif;font-size:24px;font-weight:900;color:#c71c2d;}
.navlinks{display:flex;gap:10px;}
.pill{background:#f5f5f5;color:#2f2f2f;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;padding:9px 20px;border-radius:9999px;}
.pill.on{background:#c71c2d;color:#fff;}
.hero{height:170px;background:#f5f5f5;display:flex;align-items:center;padding:0 32px;justify-content:space-between;}
.h1{font-family:Arial Black,Arial,sans-serif;font-size:28px;font-weight:900;color:#322130;margin:0 0 8px;max-width:400px;}
.hsub{font-size:14px;color:#2f2f2f;max-width:340px;margin:0 0 12px;}
.hbtn{display:inline-block;background:#c71c2d;color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:12px 28px;border-radius:9999px;}
.wagon{width:150px;height:110px;position:relative;}
.wagonbody{position:absolute;bottom:20px;left:10px;width:130px;height:50px;background:#c71c2d;border-radius:6px;}
.wheel{position:absolute;bottom:0;width:34px;height:34px;border-radius:50%;background:#322130;}
.w1{left:20px;} .w2{left:96px;}
.section{padding:16px 32px 0;}
.sectitle{font-size:16px;font-weight:700;color:#322130;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#fff;border-radius:8px;overflow:hidden;}
.thumb{height:96px;background:#f5f5f5;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:3px 8px;border-radius:4px;}
.pbody{padding:10px 12px 12px;}
.ptitle{font-size:15px;font-weight:600;color:#322130;}
.pprice{font-size:16px;font-weight:700;color:#322130;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Radio Flyer</div>
<div class="navlinks"><div class="pill on">Wagons</div><div class="pill">Trikes</div><div class="pill">Scooters</div><div class="pill">Ride-Ons</div></div>
</div>
<div class="hero">
<div><div class="h1">The Wagon That Started It All</div><div class="hsub">Timeless red wagons and ride-on toys built for generations of backyard adventures.</div><div class="hbtn">Shop Wagons</div></div>
<div class="wagon"><div class="wagonbody"></div><div class="wheel w1"></div><div class="wheel w2"></div></div>
</div>
<div class="section">
<div class="sectitle">Shop Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c71c2d,#322130);"><div class="badge" style="background:#fbac24;color:#322130;">Best Seller</div></div><div class="pbody"><div class="ptitle">Classic Red Wagon</div><div class="pprice">$109.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1f468a,#322130);"><div class="badge" style="background:#8fcab9;color:#322130;">New</div></div><div class="pbody"><div class="ptitle">All-Terrain Trike</div><div class="pprice">$79.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c5b4e3,#322130);"></div><div class="pbody"><div class="ptitle">Lavender Scooter Deluxe</div><div class="pprice">$59.99</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#fbac24,#322130);"><div class="badge" style="background:#c71c2d;color:#fff;">Sale</div></div><div class="pbody"><div class="ptitle">Sunshine Ride-On Car</div><div class="pprice">$129.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: 0.5px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #112233; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fafafa; color: #112233;
border: 1px solid #112233; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #111111;
border: 1px solid #c0c0c0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #cc3b3b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:'Montserrat','Dosis',sans-serif; color:#111111; }
*{box-sizing:border-box;}
.nav{height:64px;background:#112233;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Oswald','Antonio',sans-serif;font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:#fff;}
.navlinks{display:flex;gap:6px;}
.navlinks div{color:#fff;font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:8px 12px;border-radius:4px;}
.navlinks div.on{background:#112255;}
.hero{height:230px;background:#040404;color:#fff;display:flex;align-items:center;padding:0 34px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;inset:0;background:#040404;opacity:.7;}
.herobody{position:relative;z-index:1;width:440px;}
.hkicker{font-family:'Oswald','Antonio',sans-serif;font-size:12px;letter-spacing:1px;color:#cc3b3b;text-transform:uppercase;margin-bottom:8px;}
.herobody h1{font-family:'Oswald','Antonio',sans-serif;font-size:38px;font-weight:700;letter-spacing:1px;text-transform:uppercase;line-height:1.15;margin:0 0 12px;}
.herobody p{font-size:14px;color:#e1e1e1;margin:0 0 16px;max-width:360px;}
.btn{display:inline-block;background:#cc3b3b;color:#fff;font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:12px 24px;border-radius:8px;}
.grid{display:flex;gap:12px;padding:16px 32px 0;}
.card{width:212px;background:#fff;border:1px solid #eeeeee;border-radius:4px;padding:12px;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#cc3b3b;color:#fff;font-family:'Oswald','Antonio',sans-serif;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;border-radius:4px;padding:2px 7px;}
.thumb{height:96px;background:#112233;border-radius:4px;margin-bottom:8px;}
.ptitle{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;margin:0;}
.pprice{font-size:14px;font-weight:700;margin-top:4px;}
.score{margin:16px 32px 0;background:#040404;border:1px solid #112255;border-radius:4px;padding:12px 20px;display:flex;justify-content:space-between;color:#fff;}
.score .lbl{font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#aaaaaa;}
.score .val{font-family:'Dosis','Exo',sans-serif;font-size:26px;font-weight:700;letter-spacing:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#112233;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;opacity:.9;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Paradox Arcades</div>
<div class="navlinks"><div class="on">Cabinets</div><div>Pinball</div><div>Redemption</div><div>Quote</div></div>
</div>
<div class="hero">
<div class="herobody">
<div class="hkicker">Commercial Grade</div>
<h1>Engineered to earn its keep.</h1>
<p>Precision-built arcade cabinets for operators who need uptime, not nostalgia.</p>
<div class="btn">Request a Quote</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb"></div><div class="ptitle">Classic Cab, 4-Player</div><div class="pprice">$5,499</div></div>
<div class="card"><div class="thumb" style="background:#0c5132;"></div><div class="ptitle">Pinball Machine, Deluxe</div><div class="pprice">$8,900</div></div>
<div class="card"><div class="thumb" style="background:#277158;"></div><div class="ptitle">Redemption Cabinet</div><div class="pprice">$6,750</div></div>
<div class="card"><div class="thumb" style="background:#112255;"></div><div class="ptitle">Control Deck, Replacement</div><div class="pprice">$1,290</div></div>
</div>
<div class="score"><div><div class="lbl">Top Score — Cabinet 04</div><div class="val">128,450</div></div><div><div class="lbl">Weekly Tournament</div><div class="val">FRI 7PM</div></div></div>
<div class="footer"><span>© Paradox Arcades — Precision Engineering</span><span>Support Warranty</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #002c5f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #002c5f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #879bb2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007fa8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #002c5f; color: #007fa8;
border: 1px solid #007fa8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #002c5f; color: #f5f5f5;
border: 1px solid #274c77; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #879bb2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00396b; color: #007fa8;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"HyundaiSansTextKR","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.logo { font-size:19px; font-weight:600; }
.navlinks { display:flex; gap:22px; font-size:16px; }
.hero { position:relative; height:280px; background:linear-gradient(135deg,#0a0a0a,#1c1c1c);
display:flex; align-items:flex-end; padding:26px 40px; }
.hero h1 { color:#ffffff; font-size:44px; font-weight:400; line-height:1.32; letter-spacing:-0.4px; margin:0; }
.dots { position:absolute; bottom:14px; right:40px; display:flex; gap:6px; }
.dots span { width:8px; height:8px; border-radius:0px; background:rgba(255,255,255,0.4); }
.dots span.active { background:#007fa8; border-radius:6px; width:18px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:24px 40px; }
.card { border:1px solid #eeeeee; }
.card .thumb { height:110px; background:#f4f4f4; }
.card .info { padding:12px; display:flex; justify-content:space-between; align-items:center; }
.card h3 { font-size:16px; font-weight:500; margin:0; }
.btn-navy { background:#002c5f; color:#ffffff; padding:8px 16px; font-size:14px; font-weight:500; }
.chatbot { position:absolute; bottom:20px; right:20px; width:44px; height:44px; border-radius:100%;
background:#00aad2; box-shadow:rgba(0,0,0,0.15) 0px 0px 20px 0px; }
footer { border-top:1px solid #eeeeee; padding:14px 40px; display:flex; justify-content:space-between;
font-size:12px; color:#444444; }
</style></head>
<body>
<nav>
<span class="logo">Hyundai</span>
<div class="navlinks"><span>Vehicles</span><span>Mobility</span><span>Brand</span></div>
</nav>
<section class="hero">
<h1>The New IONIQ</h1>
<div class="dots"><span></span><span class="active"></span><span></span></div>
</section>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="info"><h3>IONIQ 6</h3><span class="btn-navy">Explore</span></div></div>
<div class="card"><div class="thumb"></div><div class="info"><h3>Tucson</h3><span class="btn-navy">Explore</span></div></div>
<div class="card"><div class="thumb"></div><div class="info"><h3>Palisade</h3><span class="btn-navy">Explore</span></div></div>
</div>
<div class="chatbot"></div>
<footer>
<span>© Hyundai</span>
<span>Family Site</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #40c8f7; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #40c8f7; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #266378; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0092c2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #40c8f7; color: #000000;
border: 1px solid #0092c2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #40c8f7; color: #111111;
border: 1px solid #38abd2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #266378; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #36bfef; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#4a4a4a; box-sizing:border-box;
font-family:"PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; gap:20px; padding:0 32px; background:#ffffff; border-bottom:1px solid #dddfe1; }
.brand { font-size:18px; font-weight:700; color:#40c8f7; margin:0; }
.search { flex:1; display:flex; max-width:340px; height:34px; }
.search input { flex:1; border:1px solid #dddfe1; border-radius:4px 0 0 4px; padding:0 12px; font-size:13px; background:#fff; color:#000; }
.search .go { width:44px; background:#40c8f7; color:#fff; border-radius:0 4px 4px 0; display:flex; align-items:center; justify-content:center; font-size:13px; }
.navr { margin-left:auto; display:flex; gap:14px; align-items:center; font-size:13px; color:#666; }
.register { background:#40c8f7; color:#fff; border-radius:3px; padding:0 12px; height:28px; display:flex; align-items:center; font-weight:700; font-size:13px; }
.cattabs { display:flex; gap:6px; padding:10px 32px 0; background:#fff; border-bottom:1px solid #dddfe1; }
.cattab { font-family:"Songti TC", serif; font-size:15px; font-weight:700; color:#666; padding:8px 16px; border-radius:4px 4px 0 0; }
.cattab.active { background:#f2f2f2; color:#333; border-bottom:2px solid #40c8f7; }
.hero { padding:26px 32px 18px; text-align:center; background:#fff; }
.hero h1 { font-size:26px; font-weight:400; margin:0 0 8px; color:#212529; }
.hero p { font-size:14px; color:#666; margin:0 0 16px; }
.hero .pillrow { display:flex; gap:10px; justify-content:center; }
.pill { border-radius:25px; padding:6px 18px; font-size:13px; height:32px; display:flex; align-items:center; }
.pill.primary { background:#40c8f7; color:#fff; }
.pill.secondary { background:#e98192; color:#fff; }
.pill.grey { background:#f2f2f2; color:#333; }
.grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; padding:20px 32px; background:#fafafa; }
.book { background:#fff; border:1px solid #dddfe1; border-radius:4px; overflow:hidden; position:relative; }
.cover { height:118px; position:relative; }
.cover.g1 { background:linear-gradient(160deg,#40c8f7,#0092c2); }
.cover.g2 { background:linear-gradient(160deg,#c2f0ff,#40c8f7); }
.cover.g3 { background:linear-gradient(160deg,#e98192,#b5495a); }
.cover.g4 { background:linear-gradient(160deg,#f8b62d,#c98d10); }
.cover.g5 { background:linear-gradient(160deg,#666,#333); }
.cover.g6 { background:linear-gradient(160deg,#28a745,#1b6d30); }
.sale { position:absolute; top:6px; left:6px; background:#dc3545; color:#fff; font-size:9px; border-radius:3px; padding:1px 5px; }
.book .meta { padding:8px; }
.book .t { font-size:11px; color:#212529; font-weight:400; margin:0 0 3px; }
.book .a { font-size:10px; color:#9b9b9b; margin:0; }
.callout { margin:0 32px 16px; background:#c2f0ff; border-radius:4px; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; }
.callout h4 { font-size:15px; font-weight:700; color:#212529; margin:0; }
.callout .pill.primary { padding:5px 14px; height:28px; font-size:12px; }
footer { border-top:1px solid #dddfe1; padding:10px 32px; display:flex; justify-content:space-between; font-size:11px; color:#9b9b9b; background:#fff; }
</style></head>
<body>
<nav>
<p class="brand">Readmoo</p>
<div class="search"><input placeholder="Search by title, author, ISBN"><span class="go">Search</span></div>
<div class="navr"><span>Log In</span><span class="register">Sign Up</span></div>
</nav>
<div class="cattabs">
<span class="cattab active">Books</span>
<span class="cattab">Magazines</span>
<span class="cattab">Audiobooks</span>
<span class="cattab">Comics</span>
<span class="cattab">Light Novels</span>
</div>
<div class="hero">
<h1>Every Minute Is a Good Time to Read</h1>
<p>Open the door to easy reading — mooInk e-reader</p>
<div class="pillrow">
<span class="pill primary">Learn More</span>
<span class="pill secondary">Bundle Deals</span>
<span class="pill grey">Compare Specs</span>
</div>
</div>
<div class="grid">
<div class="book"><div class="cover g1"><span class="sale">21% OFF</span></div><div class="meta"><p class="t">Midnight Library</p><p class="a">Sarah Lin</p></div></div>
<div class="book"><div class="cover g2"></div><div class="meta"><p class="t">Sound of the Islands</p><p class="a">Alex Chen</p></div></div>
<div class="book"><div class="cover g3"><span class="sale">50% OFF</span></div><div class="meta"><p class="t">Coffee and Rain</p><p class="a">Amy Wong</p></div></div>
<div class="book"><div class="cover g4"></div><div class="meta"><p class="t">Stardust Chronicles</p><p class="a">John Wu</p></div></div>
<div class="book"><div class="cover g5"></div><div class="meta"><p class="t">Letters from Afar</p><p class="a">Grace Lee</p></div></div>
<div class="book"><div class="cover g6"><span class="sale">35% OFF</span></div><div class="meta"><p class="t">Trail Through the Fog</p><p class="a">Mark Chang</p></div></div>
</div>
<div class="callout">
<h4>Everyone Has Their Own Way to Read</h4>
<span class="pill primary">Learn About mooInk</span>
</div>
<footer>
<span>© Readmoo eBooks</span>
<span>Books · Magazines · Audiobooks · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #108474;
border: 1px solid #108474; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.3px; background: #fbcd0a; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#121212; box-sizing:border-box;
font-family:'Nunito Sans',Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
.promo { height:36px; background:#108474; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #eeeeee; }
.brand { color:#108474; font-size:18px; font-weight:700; margin:0; }
.search { background:#fff; border:1px solid #dedede; border-radius:8px; padding:10px 14px; font-size:13px; color:#7b7b7b; width:200px; }
main { display:flex; height:calc(640px - 100px); }
.gallery { width:36%; background:#edf5f5; display:flex; align-items:center; justify-content:center; }
.cartridge { width:70px; height:150px; border-radius:8px; background:linear-gradient(180deg,#108474,#0d7265); position:relative; }
.cartridge::before { content:''; position:absolute; left:15px; top:-10px; width:40px; height:14px; background:#fbcd0a; border-radius:2px; }
.details { width:64%; padding:22px 32px; }
.badges { display:flex; gap:6px; margin-bottom:12px; }
.badge { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; border-radius:4px; padding:3px 8px; }
.badge.sale { background:#fbcd0a; color:#121212; }
.badge.compat { background:#c1e6e6; color:#108474; }
h1 { font-size:24px; font-weight:700; margin:0 0 8px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.price { font-size:20px; font-weight:700; color:#fbcd0a; }
.price-old { font-size:14px; color:#a36710; text-decoration:line-through; }
.desc { font-size:14px; line-height:1.5; color:#555555; margin:0 0 16px; max-width:440px; }
.compattable { background:#edf5f5; border:1px solid #c1e6e6; border-radius:8px; padding:12px 16px; margin-bottom:18px; max-width:440px; }
.comprow { display:flex; justify-content:space-between; font-size:13px; padding:4px 0; color:#555555; }
.buyrow { display:flex; gap:10px; }
.btn-primary { background:#108474; color:#fff; border:none; border-radius:8px; padding:12px 24px; font-size:15px; font-weight:700; height:44px; }
.btn-secondary { background:#fff; color:#108474; border:2px solid #108474; border-radius:8px; padding:10px 22px; font-size:15px; font-weight:700; height:44px; }
</style></head>
<body>
<div class="promo">Free U.S. Shipping on All Orders</div>
<nav>
<p class="brand">Castle Ink</p>
<span class="search">Search by printer model…</span>
</nav>
<main>
<div class="gallery"><div class="cartridge"></div></div>
<div class="details">
<div class="badges"><span class="badge sale">Sale</span><span class="badge compat">Compatible</span></div>
<h1>HP 65XL Black Ink Cartridge (Remanufactured)</h1>
<div class="price-row"><span class="price">$18.99</span><span class="price-old">$26.99</span></div>
<p class="desc">High-yield remanufactured cartridge, tested to OEM standards, compatible with HP DeskJet and Envy printers.</p>
<div class="compattable">
<div class="comprow"><span>HP DeskJet 2600</span><span>Compatible</span></div>
<div class="comprow"><span>HP Envy 5000</span><span>Compatible</span></div>
</div>
<div class="buyrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compare Cartridges</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #181a1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #181a1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #181a1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #65666a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #df1c2f; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: transparent; color: #181a1d;
border: 1px solid #df1c2f; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #181a1d;
border: 1px solid #c5c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #65666a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #222529; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#181a1d; font-family:'Inter',-apple-system,system-ui,sans-serif; color:#fff; }
*{box-sizing:border-box;}
.nav{height:64px;background:#181a1d;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-family:'brandon-grotesque',Inter,sans-serif;font-size:20px;font-weight:700;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.25px;}
.navlinks div:nth-child(1){color:#df1c2f;border-bottom:2px solid #df1c2f;padding-bottom:20px;}
.navlinks div:not(:nth-child(1)){color:#888b93;}
.hero{height:230px;display:flex;align-items:center;padding:0 40px;}
.herotext{width:420px;}
.herotext h1{font-family:'brandon-grotesque',Inter,sans-serif;font-size:40px;font-weight:700;letter-spacing:-1px;line-height:1.1;margin:0 0 14px;}
.herotext p{font-size:14px;color:#888b93;margin:0 0 16px;max-width:340px;}
.btn{display:inline-block;background:#df1c2f;color:#fff;font-size:15px;font-weight:600;letter-spacing:.25px;padding:12px 26px;border-radius:8px;}
.heroart{flex:1;height:170px;border-radius:12px;background:linear-gradient(135deg,#222529,#df1c2f 75%);}
.grid{display:flex;gap:14px;padding:16px 30px 0;}
.card{width:210px;background:#222529;border-radius:12px;padding:14px;}
.thumb{height:100px;background:#333333;border-radius:8px;margin-bottom:8px;}
.ctitle{font-size:16px;font-weight:600;margin:0;}
.cmeta{font-size:12px;color:#888b93;margin-top:4px;}
.live{display:inline-block;background:#df1c2f;color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-radius:9999px;padding:3px 10px;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:96px;background:#181a1d;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;border-top:1px solid #333;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Peloton</div>
<div class="navlinks"><div>Bike</div><div>Tread</div><div>Row</div><div>App</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Motivation, on demand.</h1>
<p>Live and on-demand classes streamed to hardware built for the home.</p>
<div class="btn">Start Your Trial</div>
</div>
<div class="heroart"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"></div><div class="ctitle">Peloton Bike+</div><div class="cmeta">Interactive touchscreen</div></div>
<div class="card"><div class="thumb" style="background:#3a3a3a;"></div><div class="ctitle">Peloton Tread</div><div class="cmeta">Slat belt, 20" screen</div></div>
<div class="card"><div class="thumb" style="background:#4a4a4a;"></div><div class="ctitle">30 Min HIIT Ride</div><div class="cmeta">with Instructor Cody</div><div class="live">Live</div></div>
<div class="card"><div class="thumb" style="background:#222529;"></div><div class="ctitle">Peloton Row</div><div class="cmeta">Adjustable resistance</div></div>
</div>
<div class="footer"><span>© Peloton Interactive</span><span>Products Community Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.28; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.8px; margin: 0; color: #7a7a7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #2c5234; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #2c5234;
border: 1px solid #2c5234; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f7f6f3; color: #222222;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:'Source Sans Pro',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #e4e4e4; }
.brand { font-family:Georgia,serif; font-size:19px; font-weight:600; color:#2c5234; margin:0; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:500; letter-spacing:.8px; text-transform:uppercase; color:#626263; }
.heritage { background:#f1d600; color:#222; font-family:Georgia,serif; font-size:12px; font-weight:600; padding:5px 12px; letter-spacing:.5px; }
.hero { display:flex; height:280px; }
.hero-img { flex:1.1; background:linear-gradient(135deg,#e8ecdd 0%,#c8d4b8 55%,#2c5234 130%); position:relative; }
.hero-text { flex:1; background:#2c5234; color:#fff; padding:32px; display:flex; flex-direction:column; justify-content:center; }
.hero-text h1 { font-family:Georgia,serif; font-size:30px; font-weight:600; line-height:1.15; margin:0 0 12px; }
.hero-text p { font-size:14px; opacity:.85; margin:0 0 18px; max-width:280px; }
.btn { display:inline-block; background:#fff; color:#2c5234; font-size:13px; font-weight:600; letter-spacing:.3px; padding:11px 22px; width:fit-content; }
.collection-band { background:#f7f6f3; padding:20px 40px; }
.collection-band h2 { font-family:Georgia,serif; font-size:22px; font-weight:600; margin:0 0 4px; }
.collection-band p { font-size:13px; color:#626263; margin:0; max-width:500px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:16px 40px; }
.card { border:1px solid #efefef; border-radius:8px; overflow:hidden; }
.card-img { height:100px; background:#f3f1ec; position:relative; }
.card-img::after { content:''; position:absolute; left:12px; bottom:12px; width:60px; height:16px; border-radius:8px; background:#c9a961; opacity:.55; }
.card-body { padding:12px 14px; }
.card .cat { font-size:11px; color:#7a7a7c; }
.card h3 { font-size:15px; font-weight:600; margin:2px 0 4px; }
.card .price { font-size:15px; font-weight:600; }
.swatches { display:flex; gap:6px; margin-top:8px; }
.sw { width:18px; height:18px; border-radius:4px; border:1px solid #e4e4e4; }
footer { position:absolute; bottom:0; left:0; right:0; height:36px; background:#222; color:#9a9a9a;
display:flex; align-items:center; justify-content:center; font-size:10px; font-family:Georgia,serif; letter-spacing:.4px; }
</style></head>
<body>
<nav>
<p class="brand">Barlow Tyrie</p>
<div class="navlinks"><span>Dining</span><span>Lounge</span><span>Collections</span><span>Dealers</span></div>
<div class="heritage">Est. 1920</div>
</nav>
<section class="hero">
<div class="hero-img"></div>
<div class="hero-text">
<h1>Teak Furniture,<br>Built to Weather Everything</h1>
<p>Award-winning outdoor design for the terrace, the pool, and every English garden lunch in between.</p>
<span class="btn">Explore the Titan Collection</span>
</div>
</section>
<div class="collection-band">
<h2>The Equinox Collection</h2>
<p>Teak dining sets with clean architectural lines, finished by hand in solid grade-A teak.</p>
</div>
<div class="grid">
<div class="card">
<div class="card-img"></div>
<div class="card-body">
<div class="cat">Dining Table</div>
<h3>Titan Table 300</h3>
<div class="price">$4,850</div>
<div class="swatches"><div class="sw" style="background:#8a6d3c"></div><div class="sw" style="background:#c9c9c9"></div></div>
</div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="card-body">
<div class="cat">Lounge Chair</div>
<h3>Monaco Reclining Chair</h3>
<div class="price">$1,290</div>
<div class="swatches"><div class="sw" style="background:#8a6d3c"></div><div class="sw" style="background:#3a3a3a"></div></div>
</div>
</div>
<div class="card">
<div class="card-img"></div>
<div class="card-body">
<div class="cat">Parasol</div>
<h3>Aura Cantilever Umbrella</h3>
<div class="price">$980</div>
<div class="swatches"><div class="sw" style="background:#2c5234"></div><div class="sw" style="background:#dedad0"></div></div>
</div>
</div>
</div>
<footer>Barlow Tyrie — Award-Winning Outdoor Furniture Since 1920</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f2f2f2; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f2f2f2; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #1965e0; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ffffff; color: #111111;
border: 1px solid #1965e0; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111111;
border: 1px solid #bababa; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c10015; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f2f2f2; color:#111111; box-sizing:border-box;
font-family:'Segoe UI', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; background:#111111; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#fff; font-size:16px; font-weight:700; letter-spacing:0.3px; margin:0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#fff; opacity:0.8; font-size:13px; }
.cart { color:#1965e0; font-size:13px; font-weight:600; }
main { display:flex; height:582px; }
.stage { width:340px; background:#171717; display:flex; align-items:center; justify-content:center; }
.desk { width:220px; height:120px; position:relative; }
.desktop { width:220px; height:12px; background:linear-gradient(180deg,#e5e5e5,#c8c8c8); border-radius:4px; }
.leg { position:absolute; top:12px; width:8px; height:90px; background:#1965e0; }
.leg-l { left:14px; } .leg-r { right:14px; }
.monitor { position:absolute; top:-70px; left:60px; width:100px; height:60px; background:#0d0d0d; border-radius:3px;
border:2px solid #333; }
.monitor::after { content:''; position:absolute; inset:6px; background:linear-gradient(160deg,#1965e0,#0d3a8a); }
.info { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:11px; }
.badge-row { display:flex; gap:8px; }
.badge { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; padding:3px 9px; border-radius:4px; }
.b-sale { background:#c10015; color:#fff; }
.b-cat { background:#e5e5e5; color:#555; }
h1 { font-size:23px; font-weight:600; margin:0; letter-spacing:-0.1px; }
.sub { font-size:13px; color:#333; margin:0; max-width:440px; line-height:1.5; }
.specs-row { display:flex; gap:22px; font-size:11px; color:#555; margin-top:2px; }
.specs-row b { display:block; color:#111; font-size:14px; font-weight:600; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:6px; }
.price { font-size:24px; font-weight:700; color:#111; }
.price-strike { font-size:14px; color:#777; text-decoration:line-through; }
.actions { display:flex; gap:10px; margin-top:4px; }
.btn-primary { background:#1965e0; color:#fff; border-radius:8px; height:46px; padding:0 26px; display:flex;
align-items:center; font-weight:600; font-size:13px; }
.btn-secondary { background:#fff; border:1px solid #d4d4d4; color:#111; border-radius:8px; height:46px;
padding:0 20px; display:flex; align-items:center; font-size:13px; font-weight:500; }
.paylater { margin-top:auto; border-top:1px solid #e5e5e5; padding-top:12px; font-size:11px; color:#555; }
</style></head>
<body>
<nav>
<p class="brand">Autonomous</p>
<div class="navlinks"><span>Desks</span><span>Chairs</span><span>Storage</span><span>Deals</span></div>
<span class="cart">Cart (1)</span>
</nav>
<main>
<div class="stage">
<div class="desk"><div class="monitor"></div><div class="desktop"></div><div class="leg leg-l"></div><div class="leg leg-r"></div></div>
</div>
<div class="info">
<div class="badge-row"><span class="badge b-sale">Sale</span><span class="badge b-cat">Standing Desk</span></div>
<h1>SmartDesk Core — Dual Motor Standing Desk</h1>
<p class="sub">Motorized height adjustment from 29" to 48" with programmable memory presets and anti-collision sensing.</p>
<div class="specs-row">
<div><b>220 lb</b>Load Cap.</div>
<div><b>29–48"</b>Height Range</div>
<div><b>2</b>Memory Presets</div>
</div>
<div class="price-row"><span class="price">$379.00</span><span class="price-strike">$479.00</span></div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Compare Desks</div>
</div>
<div class="paylater">Or 4 interest-free payments of $94.75 with Klarna.</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.2; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #108474; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #f9fafb; color: #212121;
border: 1px solid #108474; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9fafb; color: #414141;
border: 1px solid #c3c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #2a8156; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; color:#212121; font-family:'Nunito Sans',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e9e9e9;}
.logo{font-family:'Jost',Arial,sans-serif;font-size:20px;font-weight:600;}
.navlinks{display:flex;gap:24px;font-family:'Jost',Arial,sans-serif;font-size:13px;font-weight:500;color:#212121;}
.searchpill{width:150px;height:36px;border-radius:9999px;border:1px solid #e9e9e9;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#7b7b7b;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;background:linear-gradient(120deg,#f9fafb 50%,#e6f5f2 100%);}
.htext{width:420px;}
.htext h1{font-family:'Jost',Arial,sans-serif;font-size:30px;font-weight:600;line-height:1.25;margin:0 0 14px;}
.htext p{font-size:14px;color:#4a4a4a;margin:0 0 20px;max-width:370px;}
.btn{display:inline-block;background:#108474;color:#fff;font-family:'Jost',Arial,sans-serif;font-size:14px;font-weight:600;padding:14px 30px;border-radius:9999px;}
.kb{position:absolute;right:80px;top:64px;width:220px;height:140px;background:#fff;border-radius:12px;padding:14px;box-shadow:0 8px 24px rgba(0,0,0,0.08);display:grid;grid-template-columns:repeat(8,1fr);grid-gap:5px;}
.key{background:#f0f0f0;border-radius:3px;height:18px;}
.key.hl{background:#e2ff3f;}
.key.hl2{background:#108474;}
.sec{padding:22px 40px 0;}
.sectitle{font-family:'Jost',Arial,sans-serif;font-size:18px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:216px;background:#fff;border:1px solid #e9e9e9;border-radius:12px;padding:14px;position:relative;box-shadow:0 2px 6px rgba(0,0,0,0.03);}
.badge{position:absolute;top:10px;left:10px;font-family:'Jost',Arial,sans-serif;font-size:9px;font-weight:600;text-transform:uppercase;padding:3px 9px;border-radius:9999px;color:#fff;}
.b-stock{background:#108474;}
.b-sold{background:#7b7b7b;}
.b-ltd{background:#ffeb3c;color:#212121;}
.thumb{width:100%;height:96px;border-radius:8px;margin:18px 0 10px;}
.cardtitle{font-family:'Jost',Arial,sans-serif;font-size:14px;font-weight:600;}
.cardprice{font-size:13px;color:#108474;margin-top:4px;font-weight:600;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#212121;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#bbbbbb;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Meletrix</div>
<div class="navlinks"><span>Keyboards</span><span>Switches</span><span>Artisan Keycaps</span></div>
<div class="searchpill">Search...</div>
</div>
<div class="hero">
<div class="htext">
<h1>Keyboards built like gallery pieces.</h1>
<p>Desktop art for typists who treat every keystroke as a small act of craftsmanship.</p>
<div class="btn">Shop Keyboards</div>
</div>
<div class="kb">
<div class="key"></div><div class="key hl"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key hl2"></div><div class="key"></div>
<div class="key"></div><div class="key"></div><div class="key"></div><div class="key hl"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
<div class="key"></div><div class="key"></div><div class="key hl2"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
</div>
</div>
<div class="sec">
<div class="sectitle">Featured Boards</div>
<div class="grid">
<div class="card"><span class="badge b-ltd">Limited</span><div class="thumb" style="background:linear-gradient(135deg,#ffeb3c,#212121);"></div><div class="cardtitle">Zoom65 Essential Edition</div><div class="cardprice">$219.00</div></div>
<div class="card"><span class="badge b-stock">In Stock</span><div class="thumb" style="background:linear-gradient(135deg,#108474,#212121);"></div><div class="cardtitle">Zoom TKL Extreme</div><div class="cardprice">$289.00</div></div>
<div class="card"><span class="badge b-sold">Sold Out</span><div class="thumb" style="background:linear-gradient(135deg,#5d6ac0,#212121);"></div><div class="cardtitle">Zoom98 Silent</div><div class="cardprice">$329.00</div></div>
<div class="card"><span class="badge b-stock">In Stock</span><div class="thumb" style="background:linear-gradient(135deg,#de3813,#212121);"></div><div class="cardtitle">Ryzen96 Kit</div><div class="cardprice">$259.00</div></div>
</div>
</div>
<div class="footer"><span>© Desktop Art Creator</span><span>Group Buys · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #0e2431; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #0e2431;
border: 1px solid #0e2431; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; background: #aaccaa; color: #121212;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f8f8; font-family:'Montserrat',Arial,sans-serif; color:#0e2431; }
*{box-sizing:border-box;}
.nav{height:72px;background:#0e2431;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:'Syncopate',Arial,sans-serif;font-size:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#f8f8f8;}
.navlinks{display:flex;gap:30px;font-size:13px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:#cfd9de;}
.navlinks .on{color:#debc82;}
.hero{display:flex;height:280px;}
.left{width:440px;padding:44px 40px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-family:'Syncopate',Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#debc82;margin-bottom:16px;}
.h1{font-size:38px;font-weight:300;line-height:1.2;color:#0e2431;margin:0 0 16px;}
.sub{font-size:15px;line-height:1.6;color:#4a5a63;max-width:340px;margin:0 0 24px;}
.cta{display:inline-block;background:#0e2431;color:#f8f8f8;font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:14px 30px;}
.right{flex:1;position:relative;background:linear-gradient(180deg,#0e2431,#1a3644);}
.horn{position:absolute;left:50%;top:20px;transform:translateX(-50%);width:22px;height:200px;background:linear-gradient(90deg,#debc82,#a5844f);border-radius:6px;}
.horn:before{content:'';position:absolute;bottom:-14px;left:-24px;width:70px;height:44px;border-radius:0 0 35px 35px;background:linear-gradient(180deg,#debc82,#8f6d3e);}
.key{position:absolute;width:12px;height:12px;border-radius:50%;background:#aaccaa;left:5px;}
.k1{top:34px;} .k2{top:66px;} .k3{top:98px;} .k4{top:130px;}
.sec{padding:22px 40px 0;}
.seclabel{font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#4a5a63;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:210px;background:#fff;padding:14px;}
.thumb{width:100%;aspect-ratio:4/3;background:#eceae4;margin-bottom:10px;}
.ptitle{font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:#0e2431;margin:0 0 6px;}
.pprice{font-size:14px;color:#4a5a63;}
</style>
<div class="nav">
<div class="logo">Selmer Paris</div>
<div class="navlinks"><div class="on">Saxophones</div><div>Clarinets</div><div>Mouthpieces</div><div>Heritage</div></div>
</div>
<div class="hero">
<div class="left">
<div class="kicker">Since 1885</div>
<div class="h1">Not a lifestyle.<br>A workshop.</div>
<div class="sub">Lacquer and engraving, the shadow between keys — the material truth of an instrument, not a narrative.</div>
<div class="cta">Explore Instruments</div>
</div>
<div class="right">
<div class="horn"></div>
<div class="key k1" style="left:calc(50% - 20px)"></div>
<div class="key k2" style="left:calc(50% + 6px)"></div>
<div class="key k3" style="left:calc(50% - 20px)"></div>
<div class="key k4" style="left:calc(50% + 6px)"></div>
</div>
</div>
<div class="sec">
<div class="seclabel">Featured Instruments</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#debc82,#0e2431)"></div><div class="ptitle">Reference 54 Alto</div><div class="pprice">€6,890</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0e2431,#debc82)"></div><div class="ptitle">Signature Tenor</div><div class="pprice">€8,450</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#aaccaa,#0e2431)"></div><div class="ptitle">Privilège Clarinet</div><div class="pprice">€3,290</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4a5a63,#debc82)"></div><div class="ptitle">Concept Mouthpiece</div><div class="pprice">€310</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1B1B1B;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1B1B1B;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 28px; margin: 0; color: #1B1B1B; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-size: 12px; font-weight:700; background: #043FBE; color: #ffffff;
border: none; border-radius: 999px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-size: 12px; font-weight:700; background: #FFFFFF; color: #043FBE;
border: 1px solid #043FBE; border-radius: 999px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #FFFFFF; color: #1B1B1B;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dce4f6; color: #043FBE;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width: 960px; height: 640px; margin: 0; padding: 0; overflow: hidden; font-family: 'Plus Jakarta Sans', Arial, -apple-system, BlinkMacSystemFont, sans-serif; background: #FFFFFF; color: #1B1B1B; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
.app { display:flex; width:960px; height:640px; }
.sidebar { width:208px; flex:0 0 208px; background:#002D8F; color:#FFFFFF; display:flex; flex-direction:column;
padding:20px 14px; gap:22px; }
.sb-brand { display:flex; align-items:center; gap:9px; padding:0 6px; }
.sb-brand .mark { width:26px; height:26px; border-radius:8px; background:#FFFFFF; color:#043FBE; font-weight:700;
font-size:14px; display:flex; align-items:center; justify-content:center; }
.sb-brand span { font-size:15px; font-weight:700; }
.sb-section { font-size:10.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#6791EA; padding:0 6px; margin-bottom:2px; }
.sb-nav { display:flex; flex-direction:column; gap:2px; }
.sb-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; font-size:13px; font-weight:500;
color:rgba(255,255,255,0.72); }
.sb-item .ic { width:16px; text-align:center; font-size:13px; }
.sb-item.active { background:rgba(255,255,255,0.14); color:#FFFFFF; font-weight:600; }
.sb-foot { margin-top:auto; display:flex; align-items:center; gap:9px; padding:10px 6px; border-top:1px solid rgba(255,255,255,0.14); }
.sb-avatar { width:28px; height:28px; border-radius:50%; background:#6791EA; flex:0 0 28px; }
.sb-foot .who { display:flex; flex-direction:column; }
.sb-foot .who b { font-size:12px; font-weight:600; }
.sb-foot .who small { font-size:10.5px; color:rgba(255,255,255,0.55); }
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:20px 28px 0; }
.topbar h1 { font-size:20px; font-weight:600; margin:0; line-height:28px; }
.theme-chips { display:flex; gap:6px; }
.chip { font-size:10.5px; font-weight:600; padding:4px 10px; border-radius:999px; background:#E7EDF8; color:#043FBE; }
.chip.on { background:#043FBE; color:#FFFFFF; }
.top-actions { display:flex; align-items:center; gap:10px; }
.search { display:flex; align-items:center; gap:6px; background:#F5F7FC; border:1px solid #E7EDF8; border-radius:8px;
padding:7px 12px; font-size:12px; color:#6b6b6b; width:170px; }
.btn-primary { background:#043FBE; color:#FFFFFF; border:none; border-radius:8px; padding:9px 16px;
font-weight:600; font-size:12.5px; white-space:nowrap; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:18px 28px 0; }
.stat { background:#FFFFFF; border:1px solid #E7EDF8; border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; }
.stat .label { font-size:11px; color:#6b6b6b; font-weight:500; }
.stat .value { font-size:22px; font-weight:700; color:#1B1B1B; letter-spacing:-0.3px; }
.stat .delta { font-size:11px; font-weight:600; }
.stat .delta.up { color:#168821; }
.stat .delta.warn { color:#DDAA01; }
.panel { margin:16px 28px 0; border:1px solid #E7EDF8; border-radius:12px; overflow:hidden; flex:1; display:flex; flex-direction:column; }
.panel-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #E7EDF8; }
.panel-head h2 { font-size:14px; font-weight:600; margin:0; }
.panel-head .link { font-size:12px; color:#043FBE; font-weight:600; }
table { width:100%; border-collapse:collapse; }
thead th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:0.04em; color:#6b6b6b;
font-weight:600; padding:10px 18px; background:#F5F7FC; }
tbody td { padding:11px 18px; font-size:12.5px; border-top:1px solid #F0F2F8; color:#1B1B1B; }
tbody tr:first-child td { border-top:none; }
.prod { display:flex; align-items:center; gap:9px; }
.swatch { width:26px; height:26px; border-radius:8px; flex:0 0 26px; }
.s1 { background:#6791EA; } .s2 { background:#DDAA01; } .s3 { background:#168821; } .s4 { background:#B3261E; }
.pill { font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:999px; display:inline-block; }
.pill.success { background:#EAF6EB; color:#168821; }
.pill.notice { background:#FCF3D9; color:#8a6a00; }
.pill.info { background:#E7EDF8; color:#0A4EE4; }
.pill.alert { background:#FBEAE9; color:#B3261E; }
</style>
<div class="app">
<aside class="sidebar">
<div class="sb-brand"><span class="mark">o</span><span>Olist</span></div>
<div>
<div class="sb-section">Store</div>
<div class="sb-nav">
<div class="sb-item active"><span class="ic">▦</span>Dashboard</div>
<div class="sb-item"><span class="ic">▤</span>Orders</div>
<div class="sb-item"><span class="ic">◧</span>Catalog</div>
<div class="sb-item"><span class="ic">◔</span>Fulfillment</div>
</div>
</div>
<div>
<div class="sb-section">Insights</div>
<div class="sb-nav">
<div class="sb-item"><span class="ic">◫</span>Reports</div>
<div class="sb-item"><span class="ic">✦</span>Promotions</div>
</div>
</div>
<div class="sb-foot">
<div class="sb-avatar"></div>
<div class="who"><b>Store Owner</b><small>Vnda plan</small></div>
</div>
</aside>
<div class="main">
<div class="topbar">
<div>
<h1>Seller Dashboard</h1>
</div>
<div class="top-actions">
<div class="theme-chips">
<span class="chip on">Base</span><span class="chip">Vnda</span><span class="chip">Tiny</span>
</div>
<div class="search">🔍 Search orders</div>
<button class="btn-primary">+ New listing</button>
</div>
</div>
<div class="stats">
<div class="stat"><span class="label">Revenue (30d)</span><span class="value">R$ 84.2k</span><span class="delta up">▲ 12.4%</span></div>
<div class="stat"><span class="label">Orders</span><span class="value">1,204</span><span class="delta up">▲ 6.8%</span></div>
<div class="stat"><span class="label">Fulfillment SLA</span><span class="value">97.1%</span><span class="delta up">▲ 1.2%</span></div>
<div class="stat"><span class="label">Returns</span><span class="value">2.3%</span><span class="delta warn">▲ 0.4%</span></div>
</div>
<div class="panel">
<div class="panel-head"><h2>Recent Orders</h2><span class="link">View all</span></div>
<table>
<thead><tr><th>Product</th><th>Buyer</th><th>Channel</th><th>Status</th><th>Total</th></tr></thead>
<tbody>
<tr><td><div class="prod"><span class="swatch s1"></span>Ceramic Mug Set</div></td><td>Buyer #4821</td><td>Marketplace</td><td><span class="pill success">Delivered</span></td><td>R$ 129,90</td></tr>
<tr><td><div class="prod"><span class="swatch s2"></span>Desk Lamp — Oak</div></td><td>Buyer #4790</td><td>Vnda Store</td><td><span class="pill notice">Processing</span></td><td>R$ 249,00</td></tr>
<tr><td><div class="prod"><span class="swatch s3"></span>Canvas Tote Bag</div></td><td>Buyer #4785</td><td>Marketplace</td><td><span class="pill info">In Transit</span></td><td>R$ 74,50</td></tr>
<tr><td><div class="prod"><span class="swatch s4"></span>Wireless Charger</div></td><td>Buyer #4760</td><td>Fulfillment</td><td><span class="pill alert">Delayed</span></td><td>R$ 189,90</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #292929;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #292929;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #292929; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #108474; color: #ffffff;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f9fafb; color: #292929;
border: 1px solid #108474; border-radius: 12px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9fafb; color: #444444;
border: 1px solid #c5c6c6; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #a89cc8; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f9fafb; color:#292929; box-sizing:border-box;
font-family:'Nunito Sans', -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; background:#f9fafb; border-bottom:1px solid #e9e9e9; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.logo { font-weight:700; font-size:19px; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:600; }
.navlinks .on { color:#108474; }
.navlinks .off { color:#888888; }
main { display:flex; padding:20px 32px 0; gap:32px; height:472px; }
.card { width:340px; background:#ffffff; border-radius:20px; box-shadow:0 10px 25px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04);
overflow:hidden; display:flex; flex-direction:column; }
.cardimg { height:260px; position:relative;
background:
radial-gradient(circle at 30% 25%, rgba(251,205,10,0.5), transparent 45%),
linear-gradient(160deg, #108474 0%, #0d6b5e 60%, #292929 130%); }
.cardimg::before { content:''; position:absolute; left:50%; top:50%; width:120px; height:190px;
transform:translate(-50%,-50%); background:linear-gradient(160deg,#bb731b,#8a5514); border-radius:10px; }
.badge-new { position:absolute; top:12px; left:12px; background:#a89cc8; color:#fff; font-size:11px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; border-radius:4px; padding:2px 8px; }
.cardfoot { padding:14px 16px; }
.cardfoot .t { font-size:18px; font-weight:600; margin-bottom:4px; }
.cardfoot .p { font-size:16px; color:#444444; }
.thumbrow { display:flex; gap:6px; padding:0 16px 14px; }
.thumbrow div { flex:1; height:44px; border-radius:8px; background:#f2f2f2; }
.thumbrow div:nth-child(1) { background:linear-gradient(160deg,#108474,#bb731b); }
.thumbrow div:nth-child(2) { background:linear-gradient(160deg,#fbcd0a,#108474); }
.thumbrow div:nth-child(3) { background:linear-gradient(160deg,#292929,#0d6b5e); }
.info { flex:1; display:flex; flex-direction:column; }
.eyebrow { font-size:13px; color:#bb731b; font-weight:700; letter-spacing:0.3px; margin-bottom:6px; text-transform:uppercase; }
.name { font-size:24px; font-weight:600; margin:0 0 8px; }
.stars { font-size:16px; color:#fbcd0a; margin-bottom:10px; }
.stars span { color:#888888; font-size:13px; margin-left:6px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.price { font-size:22px; font-weight:600; }
.sale { color:#e74c3c; }
.was { font-size:14px; color:#888888; text-decoration:line-through; }
.story { font-family:'Baskerville','Georgia',serif; font-size:15px; line-height:1.6; color:#444444; margin-bottom:16px; max-width:400px; }
.field .lbl { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; color:#888888; margin-bottom:8px; }
.colors { display:flex; gap:10px; margin-bottom:16px; }
.dot { width:26px; height:26px; border-radius:999px; border:2px solid transparent; }
.dot.a { background:#108474; border-color:#0d6b5e; }
.dot.b { background:#bb731b; }
.dot.c { background:#292929; }
.cta { margin-top:auto; display:flex; gap:10px; }
.btn-add { flex:1; background:#108474; color:#fff; border:none; border-radius:12px; height:48px;
font-size:16px; font-weight:600; }
.btn-ochre { background:#bb731b; color:#fff; border:none; border-radius:12px; height:48px; padding:0 20px; font-size:14px; font-weight:600; }
footer { border-top:none; margin-top:8px; padding:14px 32px; display:flex; justify-content:space-between;
background:#292929; color:#f9fafb; font-size:13px; }
</style></head>
<body>
<nav>
<div class="logo">Alto</div>
<div class="navlinks"><span class="on">Phone Cases</span><span class="off">Card Holders</span><span class="off">Wallets</span><span class="off">Bags</span></div>
</nav>
<main>
<div class="card">
<div class="cardimg"><span class="badge-new">New</span></div>
<div class="cardfoot"><div class="t">Terra Card Holder</div><div class="p">Full-grain leather</div></div>
<div class="thumbrow"><div></div><div></div><div></div></div>
</div>
<div class="info">
<div class="eyebrow">Leather Goods</div>
<h1 class="name">Terra Card Holder — Verdant Teal</h1>
<div class="stars">★★★★★ <span>4.9 (863 reviews)</span></div>
<div class="price-row"><span class="price sale">$48.00</span><span class="was">$64.00</span></div>
<p class="story">Cut from full-grain vegetable-tanned leather and finished by hand,
the Terra Card Holder ages into its own patina — a small, considered object built
to hold four cards and fold flat in a pocket.</p>
<div class="field">
<div class="lbl">Color — Verdant Teal</div>
<div class="colors"><span class="dot a"></span><span class="dot b"></span><span class="dot c"></span></div>
</div>
<div class="cta">
<button class="btn-add">Add to Cart</button>
<button class="btn-ochre">Gift Wrap</button>
</div>
</div>
</main>
<footer>
<span>© Alto</span>
<span>Shipping · Returns · Care Guide</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #262626;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #262626;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #262626; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #107c8c; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #262626;
border: 1px solid #107c8c; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #262626;
border: 1px solid #c9c9c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #ffebe8; color: #dd0000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Joybird Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'interstate','Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#262626; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e5e5e5;}
.logo{font-size:20px;font-weight:600;color:#107c8c;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;}
.navlinks .active{color:#107c8c;font-weight:600;border-bottom:2px solid #107c8c;padding-bottom:4px;}
.search{width:200px;height:36px;background:#f1f1f1;border-radius:8px;font-size:12px;color:#717171;line-height:36px;padding:0 12px;}
.hero{background:#f1f1f1;padding:28px 36px;display:flex;align-items:center;justify-content:space-between;}
.hero-text h1{font-size:32px;font-weight:600;line-height:1.15;margin:0 0 10px;letter-spacing:-.3px;}
.hero-text p{font-size:15px;color:#424242;max-width:340px;margin:0 0 14px;}
.btn{display:inline-block;background:#107c8c;color:#fff;padding:12px 26px;border-radius:8px;font-size:14px;font-weight:600;}
.hero-art{width:220px;height:130px;border-radius:12px;background:linear-gradient(135deg,#65beb3,#107c8c);box-shadow:0 4px 16px rgba(0,0,0,.12);}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:20px 36px;}
.card{background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.08);overflow:hidden;}
.imgbox{aspect-ratio:4/3;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:4px;background:#dd0000;color:#fff;}
.badge.new{background:#107c8c;}
.body{padding:10px 12px 12px;}
.title{font-size:14px;font-weight:500;}
.price{font-size:13px;color:#424242;margin-top:3px;}
</style>
<div class="nav">
<div class="logo">Joybird</div>
<div class="navlinks"><span class="active">Sofas</span><span>Sectionals</span><span>Chairs</span><span>Bedroom</span></div>
<div class="search">Search furniture…</div>
</div>
<div class="hero">
<div class="hero-text">
<h1>Design your<br>dream sofa.</h1>
<p>Mid-century modern furniture, handcrafted to order in over 500 fabric and leather options.</p>
<div class="btn">Start Customizing</div>
</div>
<div class="hero-art"></div>
</div>
<div class="grid">
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#f0d8a8,#c99a4a);"><div class="badge new">New</div></div>
<div class="body"><div class="title">Briar Sofa</div><div class="price">$2,199</div></div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#c9ded8,#5f9c8e);"></div>
<div class="body"><div class="title">Hugo Sectional</div><div class="price">$3,499</div></div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#e0c9c9,#a85f5f);"><div class="badge">Sale</div></div>
<div class="body"><div class="title">Sawyer Accent Chair</div><div class="price">$899</div></div>
</div>
<div class="card">
<div class="imgbox" style="background:linear-gradient(160deg,#d8d0e0,#8a6cae);"></div>
<div class="body"><div class="title">Astrid Ottoman</div><div class="price">$549</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0a0e2d; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0a0e2d; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8b8d9b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0e1438; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a0e2d; color: #ffffff;
border: 1px solid #0e1438; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0a0e2d; color: #f5f5f5;
border: 1px solid #30334d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8d9b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0b0f2f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0A0E2D; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-variant-numeric: tabular-nums; }
* { box-sizing:border-box; }
.screen { display:flex; flex-direction:column; width:960px; height:640px; }
nav { height:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.brandwrap { display:flex; align-items:center; gap:8px; }
.mountain { width:0; height:0; border-left:11px solid transparent; border-right:11px solid transparent;
border-bottom:16px solid #0064FF; }
.wordmark { font-size:17px; font-weight:800; }
.wordmark span { color:#0064FF; }
.navright { display:flex; gap:18px; color:#FFFFFF; font-size:16px; }
.hubs { flex:0 0 48px; display:flex; align-items:center; gap:8px; padding:0 24px; }
.hub { min-width:70px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:800; color:#fff; padding:0 12px; }
.hero { flex:0 0 190px; position:relative; margin:10px 0; display:flex; align-items:flex-end;
background:linear-gradient(120deg,#2a3a8f 0%, #0E1438 65%); overflow:hidden; }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(10,14,45,0.72) 68%, #0A0E2D 100%); }
.hero-content { position:relative; z-index:1; padding:0 24px 16px; }
.hero-eyebrow { font-size:11px; font-weight:800; letter-spacing:1.6pt; text-transform:uppercase; color:#4D9DFF; }
.hero-title { font-size:28px; font-weight:800; margin-top:4px; letter-spacing:-0.5px; }
.hero-meta { font-size:12px; color:#AEB4D6; margin-top:6px; }
.hero-btns { display:flex; gap:10px; margin-top:12px; }
.btn-play { background:#0064FF; color:#fff; font-size:14px; font-weight:700; padding:9px 20px; border-radius:6px; display:flex; align-items:center; gap:6px; }
.btn-glass { background:rgba(255,255,255,0.14); color:#fff; font-size:13px; font-weight:600; padding:9px 16px; border-radius:6px; }
.rows { flex:1; padding:0 0 0 24px; display:flex; flex-direction:column; gap:14px; overflow:hidden; }
.row-header { font-size:16px; font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.live-dot { width:7px; height:7px; border-radius:50%; background:#FF2D46; }
.row-scroll { display:flex; gap:10px; }
.poster { width:104px; height:150px; border-radius:8px; flex:0 0 104px; position:relative; }
.live-flag { position:absolute; top:6px; left:6px; background:#FF2D46; border-radius:4px; padding:2px 6px;
font-size:8px; font-weight:800; text-transform:uppercase; display:flex; align-items:center; gap:4px; }
.live-flag .dot { width:5px; height:5px; border-radius:50%; background:#fff; }
.poster-cap { font-size:11px; font-weight:500; color:#AEB4D6; margin-top:6px; }
.tabbar { flex:0 0 60px; display:flex; align-items:center; justify-content:space-around;
background:rgba(10,14,45,0.96); border-top:0.5px solid #2A3266; }
.tab { display:flex; flex-direction:column; align-items:center; gap:4px; }
.tab-dot { width:8px; height:8px; border-radius:2px; }
.tab.active .tab-dot { background:#4D9DFF; }
.tab:not(.active) .tab-dot { background:none; border:1.5px solid #6F77A6; }
.tab-label { font-size:12px; font-weight:600; }
.tab.active .tab-label { color:#4D9DFF; }
.tab:not(.active) .tab-label { color:#6F77A6; }
</style></head>
<body>
<div class="screen">
<nav>
<div class="brandwrap"><span class="mountain"></span><span class="wordmark">Paramount+ (iOS)<span>+</span></span></div>
<div class="navright"><span>⌕</span><span>◐</span></div>
</nav>
<div class="hubs">
<div class="hub" style="background:linear-gradient(135deg,#0064FF,#0040A8);">CBS</div>
<div class="hub" style="background:#141414;">PARAMOUNT NETWORK</div>
<div class="hub" style="background:linear-gradient(135deg,#C8102E,#7A0A1C);">MTV</div>
<div class="hub" style="background:linear-gradient(135deg,#FFB81C,#C98A00);color:#1a1400;">NICK</div>
<div class="hub" style="background:#5B2E90;">COMEDY CENTRAL</div>
<div class="hub" style="background:linear-gradient(135deg,#008C45,#045128);">SHOWTIME</div>
</div>
<div class="hero">
<div class="hero-content">
<div class="hero-eyebrow">Paramount+ (iOS) Original</div>
<div class="hero-title">Harbor & Static</div>
<div class="hero-meta">2024 · Crime Drama · TV-MA · S1 New Episodes Weekly</div>
<div class="hero-btns">
<div class="btn-play">▶ Play</div>
<div class="btn-glass">+ My List</div>
</div>
</div>
</div>
<div class="rows">
<div>
<div class="row-header"><span class="live-dot"></span>Live TV & Sports</div>
<div class="row-scroll">
<div class="poster" style="background:linear-gradient(135deg,#264a8a,#0f1f42);">
<div class="live-flag"><span class="dot"></span>Live</div>
</div>
<div class="poster" style="background:linear-gradient(135deg,#3a3a3a,#151515);">
<div class="live-flag"><span class="dot"></span>Live</div>
</div>
<div class="poster" style="background:linear-gradient(135deg,#7a2020,#2c0a0a);">
<div class="live-flag"><span class="dot"></span>Live</div>
</div>
<div class="poster" style="background:linear-gradient(135deg,#264a8a,#0f1f42);"></div>
</div>
</div>
<div>
<div class="row-header">Trending Now</div>
<div class="row-scroll">
<div class="poster" style="background:linear-gradient(135deg,#5a3a8f,#241535);"></div>
<div class="poster" style="background:linear-gradient(135deg,#8f5a3a,#351f15);"></div>
<div class="poster" style="background:linear-gradient(135deg,#3a8f6b,#15352a);"></div>
<div class="poster" style="background:linear-gradient(135deg,#8f3a5a,#350f1f);"></div>
</div>
</div>
</div>
<div class="tabbar">
<div class="tab active"><span class="tab-dot"></span><span class="tab-label">Home</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Live TV</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">Search</span></div>
<div class="tab"><span class="tab-dot"></span><span class="tab-label">My List</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #163959;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #163959;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; margin: 0; color: #163959; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.43; letter-spacing: 0.5px; background: #bd2426; color: #ffffff;
border: none; border-radius: 0px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.43; letter-spacing: 0.5px; background: #ffffff; color: #163959;
border: 1px solid #bd2426; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; background: #ffffff; color: #404040;
border: 1px solid #c5ced6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #de5052; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family: Arial, 'Helvetica Neue', Helvetica, Roboto, sans-serif; background:#fff; color:#404040; }
*{box-sizing:border-box;}
.topbar{height:24px;background:#163959;color:#dedede;font-size:11px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;letter-spacing:.3px;}
.nav{height:56px;background:#fff;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 20px;}
.logo{font-weight:700;font-size:20px;color:#163959;letter-spacing:-0.5px;}
.logo span{color:#bd2426;}
.navlinks{display:flex;gap:4px;font-size:14px;font-weight:600;color:#163959;}
.navlinks div{padding:8px 12px;border-radius:4px;}
.navlinks div.active{background:#f5f5f5;}
.navlinks div.accent{color:#2f7bbf;}
.searchwrap{display:flex;align-items:center;gap:10px;}
.search{width:190px;height:32px;border-radius:9999px;border:1px solid #dedede;background:#fff;font-size:12px;color:#595959;display:flex;align-items:center;padding:0 14px;}
.icon{width:28px;height:28px;border-radius:9999px;background:#f5f5f5;}
.hero{height:150px;background:#163959;display:flex;align-items:center;padding:0 24px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:-40px;top:-40px;width:220px;height:220px;background:#2f7bbf;opacity:.25;border-radius:50%;}
.hero:after{content:'';position:absolute;right:60px;bottom:-60px;width:140px;height:140px;background:#bd2426;opacity:.3;border-radius:50%;}
.herotext{position:relative;z-index:1;}
.herotext h1{color:#fff;font-size:26px;font-weight:700;margin:0 0 6px;letter-spacing:-.5px;}
.herotext p{color:#dedede;font-size:13px;margin:0 0 12px;}
.cta{display:inline-block;background:#f68b1f;color:#fff;font-size:13px;font-weight:600;padding:9px 18px;letter-spacing:.5px;}
.catstrip{height:34px;background:#f5f5f5;display:flex;align-items:center;gap:6px;padding:0 20px;font-size:12px;font-weight:600;color:#595959;}
.catstrip div{padding:5px 12px;border-radius:4px;}
.catstrip div.on{background:#bd2426;color:#fff;}
.grid{display:flex;gap:10px;padding:14px 20px;}
.card{width:150px;background:#fff;border:1px solid #ebebeb;border-radius:4px;padding:8px;position:relative;}
.thumb{height:96px;border-radius:4px;margin-bottom:6px;position:relative;overflow:hidden;}
.badge{position:absolute;top:4px;left:4px;font-size:9px;font-weight:700;color:#fff;padding:2px 6px;border-radius:2px;letter-spacing:.5px;text-transform:uppercase;}
.title{font-size:11px;color:#404040;line-height:1.3;height:28px;overflow:hidden;}
.price{font-size:13px;font-weight:700;color:#bd2426;margin-top:4px;}
.stock{font-size:10px;font-weight:700;color:#516b1d;margin-top:2px;text-transform:uppercase;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#163959;display:flex;align-items:center;justify-content:space-between;padding:0 20px;color:#dedede;font-size:11px;}
.footer span{color:#62a1d8;margin-left:14px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="topbar"><span>Worldwide shipping since 1996</span><span>Track Order · Help Center</span></div>
<div class="nav">
<div class="logo">J List</div>
<div class="navlinks">
<div class="active">Anime</div><div>Manga</div><div>Figures</div><div class="accent">Pre-Order</div><div>Snacks</div>
</div>
<div class="searchwrap">
<div class="search">Search 40,000+ items…</div>
<div class="icon"></div>
<div class="icon"></div>
</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Winter Import Restock</h1>
<p>New figures, doujinshi, and snack boxes landing weekly from Japan.</p>
<div class="cta">SHOP NEW ARRIVALS</div>
</div>
</div>
<div class="catstrip">
<div class="on">All</div><div>Figures</div><div>Apparel</div><div>Home Goods</div><div>Snacks</div><div>Limited Edition</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#62a1d8,#163959)"><span class="badge" style="background:#de5052">SALE</span></div><div class="title">Twilight Shrine Maiden Figure — 1/7 Scale</div><div class="price">$64.99</div><div class="stock">In Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#9bca3e,#516b1d)"><span class="badge" style="background:#62a1d8">NEW</span></div><div class="title">Ramune Soda Assorted Box — 30ct</div><div class="price">$28.50</div><div class="stock">In Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f68b1f,#904b06)"><span class="badge" style="background:#f68b1f">PRE-ORDER</span></div><div class="title">Neon District Acrylic Stand Set</div><div class="price">$18.00</div><div class="stock" style="color:#c16508">Ships March</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#737373,#404040)"><span class="badge" style="background:#737373">SOLD OUT</span></div><div class="title">Ink Wash Kimono Tapestry — Large</div><div class="price">$41.00</div><div class="stock" style="color:#737373">Out of Stock</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0051c3,#163959)"></div><div class="title">Retro Arcade Keychain Vol. 3</div><div class="price">$9.99</div><div class="stock">In Stock</div></div>
</div>
<div class="footer"><span>© Import Since 1996</span><span>Shipping<span> Returns</span><span> Contact</span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffbf7; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffbf7; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8a8aa0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #0066ff; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #fffbf7; color: #0066ff;
border: 1px solid #0066ff; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c3c0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8aa0; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #77ab94; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family: 'Arial', Helvetica, sans-serif; background:#fffbf7; color:#4a4a4a; }
*{box-sizing:border-box;}
.nav{height:60px;background:#0c1636;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{color:#fff;font-size:19px;font-weight:600;letter-spacing:.3px;}
.navlinks{display:flex;gap:20px;color:#e8e8ea;font-size:14px;font-weight:500;}
.navcta{background:#0066ff;color:#fff;font-size:13px;font-weight:600;padding:8px 16px;border-radius:6px;}
.diamondstage{height:270px;background:#100e31;display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:relative;overflow:hidden;}
.diamondstage:before{content:'';position:absolute;left:60%;top:50%;transform:translate(-50%,-50%);width:170px;height:170px;background:radial-gradient(circle at 35% 30%, #ffffff, #7fa8ff 45%, #100e31 78%);clip-path:polygon(50% 0%, 90% 38%, 73% 100%, 27% 100%, 10% 38%);}
.stagetext{max-width:330px;z-index:1;}
.stagetext .kicker{color:#77ab94;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;}
.stagetext h1{color:#fff;font-family:'Lora',Georgia,serif;font-size:32px;font-weight:600;margin:0 0 10px;line-height:1.2;}
.stagetext p{color:#b4b4b4;font-size:14px;margin:0 0 16px;}
.stagecta{display:inline-block;background:#0066ff;color:#fff;font-size:14px;font-weight:600;padding:12px 26px;border-radius:6px;}
.editorial{background:#fffbf7;padding:16px 30px;}
.stripgrid{display:flex;gap:12px;}
.card{width:150px;background:#f6f6f6;border-radius:8px;padding:8px;}
.thumb{height:100px;border-radius:6px;margin-bottom:6px;}
.ptitle{font-size:13px;font-weight:600;color:#1a1a1a;line-height:1.3;height:32px;overflow:hidden;}
.pprice{font-family:'Lora',Georgia,serif;font-size:18px;font-weight:700;color:#0c1636;margin-top:4px;}
.sagebadge{display:inline-block;background:#e6efe9;color:#77ab94;font-size:10px;font-weight:600;padding:2px 7px;border-radius:4px;margin-top:5px;letter-spacing:.3px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:42px;background:#0c1636;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;color:#8a8aa0;}
.footer span{margin-left:14px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">James Allen</div>
<div class="navlinks"><div>Engagement Rings</div><div>Loose Diamonds</div><div>Wedding Bands</div><div>Education</div></div>
<div class="navcta">Book a Video Call</div>
</div>
<div class="diamondstage">
<div class="stagetext">
<div class="kicker">360° HD Diamond Video</div>
<h1>Every Diamond, Examined Up Close</h1>
<p>Zoom into facet symmetry at 40× before it ever reaches your finger.</p>
<div class="stagecta">Build Your Ring</div>
</div>
</div>
<div class="editorial">
<div class="stripgrid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#151542,#0066ff)"></div><div class="ptitle">Cushion Halo Engagement Ring</div><div class="pprice">$2,890</div><div class="sagebadge">Ethically Sourced</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2c2c55,#77ab94)"></div><div class="ptitle">Round Brilliant Solitaire — 14K</div><div class="pprice">$4,120</div><div class="sagebadge">GIA Certified</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0066ff,#100e31)"></div><div class="ptitle">Vintage Milgrain Wedding Band</div><div class="pprice">$1,340</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#029af0,#151542)"></div><div class="ptitle">Emerald Cut Three-Stone Ring</div><div class="pprice">$5,640</div><div class="sagebadge">GIA Certified</div></div>
</div>
</div>
<div class="footer"><span>© Diamond Theater™</span><span>Ring Sizing<span> Returns</span><span> Financing</span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6d76; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #557b97; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.5px; background: #f6f6f6; color: #222222;
border: 1px solid #557b97; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fffefb; color: #414041;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6d76; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #aadddd; color: #222222;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6f6f6; color:#222222; box-sizing:border-box;
font-family:'Helvetica Neue', Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#fffefb; border-bottom:1px solid #cccccc; }
.brand { font-size:17px; font-weight:600; letter-spacing:0.02em; }
.navlinks { display:flex; gap:26px; font-size:13px; color:#414041; }
.navlinks span.on { color:#557b97; font-weight:600; }
.cart { width:32px; height:32px; border-radius:9999px; background:#557b97; color:#fff; display:flex;
align-items:center; justify-content:center; font-size:12px; font-weight:700; }
main { display:flex; height:576px; }
.gallery { width:420px; position:relative; background:
radial-gradient(circle at 30% 20%, #aadddd 0%, transparent 45%),
radial-gradient(circle at 75% 75%, #7a9e55 0%, transparent 40%),
linear-gradient(180deg, #ebe0d5 0%, #ccc3ba 100%);
display:flex; align-items:center; justify-content:center; }
.bottle { width:130px; height:280px; background:linear-gradient(180deg,#ffffff 0%,#f5f5f5 70%);
border-radius:20px; position:relative; box-shadow:0 24px 40px rgba(9,74,110,0.18); }
.bottle::before { content:''; position:absolute; top:-22px; left:50%; transform:translateX(-50%);
width:52px; height:34px; background:#094a6e; border-radius:10px 10px 4px 4px; }
.bottle::after { content:'ACT+ACRE'; position:absolute; top:130px; left:0; right:0; text-align:center;
font-size:9px; font-weight:700; letter-spacing:0.14em; color:#557b97; }
.badge-clean { position:absolute; top:24px; left:24px; background:#7a9e55; color:#fff; font-size:10px;
font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:5px 12px; border-radius:9999px; }
.info { flex:1; padding:34px 40px; display:flex; flex-direction:column; gap:14px; background:#fffefb; }
.cat { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#3a79a9; }
h1 { font-size:25px; font-weight:600; margin:0; letter-spacing:-0.2px; line-height:1.28; }
.stars { font-size:12px; color:#094a6e; display:flex; align-items:center; gap:6px; }
.stars .n { color:#414041; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:21px; font-weight:600; }
.desc { font-size:13.5px; color:#414041; line-height:1.55; max-width:360px; }
.ing-row { display:flex; gap:8px; flex-wrap:wrap; }
.ing { border:1px solid #cccccc; border-radius:9999px; padding:5px 12px; font-size:11px; color:#414041;
background:#f5f5f5; }
.size-row { display:flex; gap:8px; }
.size { border:1px solid #cccccc; border-radius:8px; padding:8px 16px; font-size:12.5px; font-weight:600; }
.size.on { border-color:#557b97; color:#557b97; background:#eef4f7; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#557b97; color:#fff; border:none; border-radius:8px; padding:13px 18px;
font-size:14px; font-weight:600; }
.btn-sub { border:1.5px solid #557b97; color:#557b97; background:#fff; border-radius:8px; padding:13px 16px;
font-size:12.5px; font-weight:600; white-space:nowrap; }
.trust { font-size:11px; color:#7a9e55; font-weight:600; }
</style></head>
<body>
<nav>
<div class="brand">Act Acre</div>
<div class="navlinks"><span class="on">Scalp Care</span><span>Hair Care</span><span>Scalp Quiz</span><span>About</span></div>
<div class="cart">1</div>
</nav>
<main>
<div class="gallery">
<span class="badge-clean">Clean · Vegan</span>
<div class="bottle"></div>
</div>
<div class="info">
<span class="cat">Scalp Serum</span>
<h1>Stimulating Scalp Serum</h1>
<div class="stars">★★★★★ <span class="n">4.8 (3,214 reviews)</span></div>
<div class="price-row"><span class="price">$52.00</span></div>
<p class="desc">A lightweight, nature-rooted serum that supports a balanced, healthy scalp — the foundation for stronger, fuller-looking hair over time.</p>
<div class="ing-row"><span class="ing">Biotinoyl Tripeptide</span><span class="ing">Piroctone Olamine</span><span class="ing">Squalane</span></div>
<div class="size-row"><span class="size on">1.7 oz</span><span class="size">3.4 oz</span></div>
<div class="btn-row">
<button class="btn-primary">Add to Bag — $52</button>
<button class="btn-sub">Subscribe, Save 15%</button>
</div>
<span class="trust">Cruelty-free · Vegan · Silicone-free</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #0088cc; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #ffffff; color: #0088cc;
border: 1px solid #0088cc; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #62c462; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;color:#555555;font-family:'Open Sans',Roboto,Arial,sans-serif;}
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;background:#222222;}
.logo{font-weight:700;font-size:20px;color:#fff;letter-spacing:.5px;}
.logo span{color:#0088cc;}
.navlinks{display:flex;gap:0;font-size:12px;font-weight:600;color:#eee;}
.navlinks span{padding:8px 14px;border-right:1px solid #3a3a3a;}
.strip{background:#0088cc;color:#fff;font-size:11px;padding:6px 26px;font-weight:600;}
.body{display:flex;padding:14px 26px;gap:16px;}
.col-l{width:160px;font-size:11px;}
.col-l h4{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:#777777;margin:0 0 6px;border-bottom:1px solid #eeeeee;padding-bottom:4px;}
.col-l div{padding:5px 0;color:#555;border-bottom:1px solid #f4f4f4;}
.col-l div.active{color:#0088cc;font-weight:700;}
.grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:#f4f4f4;padding:10px;border-radius:4px;}
.card{background:#ffffff;border-radius:4px;padding:10px;border:1px solid #e6e6e6;}
.box{height:76px;border-radius:2px;margin-bottom:8px;}
.b1{background:linear-gradient(160deg,#0088cc,#005f8f);}
.b2{background:linear-gradient(160deg,#222,#555);}
.b3{background:linear-gradient(160deg,#f89406,#c97400);}
.b4{background:linear-gradient(160deg,#468847,#2f5c31);}
.b5{background:linear-gradient(160deg,#3a87ad,#2b6580);}
.b6{background:linear-gradient(160deg,#0088cc,#0077b3);}
.gauge{font-size:11px;font-weight:700;color:#222222;margin:0 0 3px;}
.price{font-size:12px;font-weight:700;color:#f89406;}
</style>
<div class="nav">
<div class="logo">Ghs Strings<span>.</span></div>
<div class="navlinks"><span>Electric</span><span>Acoustic</span><span>Bass</span><span>Classical</span><span>Accessories</span></div>
</div>
<div class="strip">Making music wire since 1917 · String sets organized by instrument, gauge, and material</div>
<div class="body">
<div class="col-l">
<h4>String Type</h4>
<div class="active">Electric</div><div>Acoustic</div><div>Bass</div><div>Classical</div>
<h4 style="margin-top:12px;">Gauges</h4>
<div>.008 Extra Light</div><div>.010 Light</div><div>.011 Medium</div>
<h4 style="margin-top:12px;">Accessories</h4>
<div>String Cleaner</div><div>Winders</div>
</div>
<div class="grid">
<div class="card"><div class="box b1"></div><div class="gauge">GB10 Boomers .010-.046</div><div class="price">$9.95</div></div>
<div class="card"><div class="box b2"></div><div class="gauge">GBXL Boomers .009-.042</div><div class="price">$9.95</div></div>
<div class="card"><div class="box b3"></div><div class="gauge">BB1250 Bright Bronze .012</div><div class="price">$12.50</div></div>
<div class="card"><div class="box b4"></div><div class="gauge">M3045 Bass Boomers .045</div><div class="price">$29.95</div></div>
<div class="card"><div class="box b5"></div><div class="gauge">Classical Nylon Tension</div><div class="price">$14.95</div></div>
<div class="card"><div class="box b6"></div><div class="gauge">Fast Fret String Cleaner</div><div class="price">$8.95</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #3858e9; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #fafafa; color: #3858e9;
border: 1px solid #3858e9; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #1e1e1e;
border: 1px solid #c3c3c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #4ab866; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:'proxima-nova','Helvetica Neue',Arial,sans-serif; color:#32373c; }
*{box-sizing:border-box;}
.nav{position:absolute; top:0; left:0; width:960px; height:80px; background:#fafafa; border-bottom:1px solid #e0e0e0; display:flex; align-items:center; justify-content:space-between; padding:0 40px;}
.logo{font-family:'league-gothic','Impact',sans-serif; font-size:26px; font-weight:700; letter-spacing:-0.3px; color:#1e1e1e;}
.navlinks{display:flex; gap:22px; font-size:15px; font-weight:500; color:#1e1e1e;}
.cartWrap{position:relative;}
.cart{width:24px; height:24px; color:#1e1e1e;}
.cartBadge{position:absolute; top:-6px; right:-8px; background:#cc1818; color:#fff; font-size:10px; border-radius:9999px; width:16px; height:16px; display:flex; align-items:center; justify-content:center;}
.hero{position:absolute; top:80px; left:0; width:960px; height:270px; display:flex; align-items:center; padding:0 50px;}
.heroText{width:460px;}
.headline{font-family:'league-gothic','Impact',sans-serif; font-size:52px; font-weight:700; line-height:1.05; letter-spacing:-0.5px; color:#1e1e1e; margin-bottom:14px;}
.sub{font-size:16px; color:#32373c; margin-bottom:20px; width:400px;}
.btn{display:inline-block; background:#3858e9; color:#fff; font-size:16px; font-weight:600; padding:14px 28px; border-radius:8px;}
.kbGraphic{position:absolute; right:60px; top:60px; width:320px; height:170px; background:#fff; border:1px solid #e0e0e0; border-radius:12px; padding:14px; display:flex; gap:20px;}
.hump{width:130px; height:140px; border-radius:60px 60px 12px 12px; background:#e0e0e0; position:relative;}
.hump::after{content:''; position:absolute; top:20px; left:15px; width:100px; height:90px; border-radius:50px 50px 8px 8px; background:#f0f0f0;}
.sec{position:absolute; top:350px; left:0; width:960px; height:290px; padding:28px 40px;}
.secTitle{font-size:20px; font-weight:600; margin-bottom:16px; color:#1e1e1e;}
.grid{display:flex; gap:16px;}
.card{width:216px; background:#fff; border:1px solid #e0e0e0; border-radius:12px; padding:16px; position:relative;}
.cardImg{width:100%; height:80px; border-radius:8px; background:#f0f0f0; display:flex; align-items:center; justify-content:center;}
.miniHump{width:70px; height:60px; border-radius:30px 30px 8px 8px; background:#dadada;}
.cardTitle{font-size:18px; font-weight:600; margin-top:10px;}
.cardPrice{font-size:14px; color:#757575; margin-top:4px;}
.badgeStock{position:absolute; top:8px; left:8px; background:#4ab866; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:2px 8px; border-radius:4px;}
.badgeSale{position:absolute; top:8px; left:8px; background:#cc1818; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:2px 8px; border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Kinesis</div>
<div class="navlinks"><span>Keyboards</span><span>Accessories</span><span>Ergonomics</span></div>
<div class="cartWrap"><div class="cart">🛒</div><div class="cartBadge">2</div></div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">Built For<br>Hands That Move.</div>
<div class="sub">Ergonomic keyboards engineered with medical-device precision, not marketing gloss.</div>
<div class="btn">Shop Keyboards</div>
</div>
<div class="kbGraphic"><div class="hump"></div><div class="hump"></div></div>
</div>
<div class="sec">
<div class="secTitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="badgeStock">In Stock</div><div class="cardImg"><div class="miniHump"></div></div><div class="cardTitle">Advantage360</div><div class="cardPrice">$429</div></div>
<div class="card"><div class="badgeSale">Sale</div><div class="cardImg"><div class="miniHump"></div></div><div class="cardTitle">Freestyle Edge RGB</div><div class="cardPrice">$219</div></div>
<div class="card"><div class="cardImg"><div class="miniHump"></div></div><div class="cardTitle">Gaming TKO</div><div class="cardPrice">$189</div></div>
<div class="card"><div class="cardImg"><div class="miniHump"></div></div><div class="cardTitle">SavantElite2</div><div class="cardPrice">$149</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #565656; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #ee283b; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #ffffff; color: #141414;
border: 1px solid #ee283b; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #141414;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #565656; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ee283b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#141414; box-sizing:border-box;
font-family:'Proxima Nova W01','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #d9d9d9; }
.brand { font-size:19px; font-weight:700; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#444444; }
.util { font-size:13px; color:#565656; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 64px); }
.stage { padding:26px; display:flex; flex-direction:column; gap:12px; }
.crumb { font-size:11px; color:#8c8c8c; }
.pan { flex:1; border-radius:8px; background:#ececf6; position:relative; overflow:hidden; }
.pan::before { content:''; position:absolute; left:50%; top:50%; width:190px; height:190px; transform:translate(-50%,-50%); border-radius:50%;
background:radial-gradient(circle at 35% 30%,#ee283b,#7c151f 75%); box-shadow:0 18px 30px rgba(0,0,0,0.16); }
.pan::after { content:''; position:absolute; left:50%; top:50%; width:210px; height:70px; transform:translate(-50%,-50%); border-radius:12px;
background:#b79e69; opacity:0.85; }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; border-radius:8px; background:#ececf6; }
.info { padding:24px 34px; display:flex; flex-direction:column; gap:11px; overflow:hidden; }
.cat { font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#008827; }
h1 { margin:0; font-size:24px; font-weight:700; line-height:1.25; }
.rating { display:flex; align-items:center; gap:8px; font-size:13px; color:#565656; }
.stars { color:#ee283b; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:18px; font-weight:600; }
.badge-sale { background:#ee283b; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.desc { font-size:14px; color:#444444; line-height:1.5; }
.selectors { display:flex; gap:10px; }
.chip { background:#ececf6; color:#565656; border-radius:9999px; padding:6px 14px; font-size:13px; font-weight:600; }
.chip.on { background:#008827; color:#fff; }
.trust { font-size:12px; color:#565656; border-top:1px solid #d9d9d9; padding-top:10px; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#ee283b; color:#fff; border:none; height:48px; font-size:16px; font-weight:600; letter-spacing:0.25px; border-radius:9999px; }
.btn-secondary { width:150px; background:#fff; border:2px solid #141414; color:#141414; height:48px; font-size:16px; font-weight:600; border-radius:9999px; }
</style></head>
<body>
<nav>
<p class="brand">Brine</p>
<div class="navlinks"><span>Heads</span><span>Shafts</span><span>Goalie</span><span>Apparel</span></div>
<div class="util">Search Account Cart (1)</div>
</nav>
<main>
<div class="stage">
<div class="crumb">Brine / Heads / Attack</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Dynasty Series</span>
<h1>Dynasty Warrior Lacrosse Head</h1>
<div class="rating"><span class="stars">★★★★★</span> 4.6 · 388 reviews</div>
<div class="price-row"><span class="price">$99.99</span><span class="badge-sale">Sale</span></div>
<p class="desc">Low-profile scoop and mid-throat pinch built for quick release and precision passing — used on-field by NCAA attackmen.</p>
<div class="selectors">
<span class="chip on">Attack</span><span class="chip">Midfield</span><span class="chip">Defense</span>
</div>
<div class="trust">Unstrung · Legal in NCAA/NFHS play</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Continue Shopping</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #333333;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #333333;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; margin: 0; color: #333333; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.6; margin: 0; color: #707070; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; background: #e61e1e; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; background: #ffffff; color: #333333;
border: 1px solid #e61e1e; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.75; background: #ffffff; color: #333333;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #707070; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.5; background: #fce0e0; color: #e61e1e;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f9f9; font-family:'Hiragino Kaku Gothic ProN','Meiryo',sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fff;border-bottom:1px solid #ededed;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:22px;font-weight:700;color:#e61e1e;}
.navlinks{display:flex;gap:0;}
.tab{font-size:14px;font-weight:500;color:#707070;padding:12px 16px;border-bottom:2px solid transparent;}
.tab.active{color:#e61e1e;border-bottom:2px solid #e61e1e;}
.hero{height:200px;background:#f6f6f6;display:flex;align-items:center;padding:0 30px;}
.hero h1{font-size:32px;font-weight:700;line-height:1.4;margin:0 0 12px;color:#333;}
.cta{display:inline-block;background:#e61e1e;color:#fff;font-size:15px;font-weight:600;padding:14px 32px;border-radius:8px;}
.cats{display:flex;gap:12px;padding:16px 30px 0;}
.cat{flex:1;background:#fff;border:1px solid #e7e7e7;border-radius:12px;padding:14px;text-align:center;}
.icon{width:44px;height:44px;border-radius:9999px;margin:0 auto 8px;}
.cat b{font-size:14px;color:#333;}
.rowlabel{padding:16px 30px 8px;font-size:20px;font-weight:700;color:#333;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:196px;background:#fff;border:1px solid #e7e7e7;border-radius:12px;overflow:hidden;}
.thumb{aspect-ratio:1/1;background:#f6f6f6;display:flex;align-items:center;justify-content:center;padding:16px;}
.shape{width:60%;height:60%;border-radius:8px;}
.body{padding:12px;}
.badge{display:inline-block;font-size:11px;font-weight:700;border-radius:9999px;padding:3px 10px;margin-bottom:6px;}
.ptitle{font-size:14px;font-weight:600;color:#333;margin-bottom:4px;}
.pprice{font-size:14px;font-weight:700;color:#333;}
</style>
<div class="nav">
<div class="logo">Toshiba</div>
<div class="navlinks"><div class="tab active">Living</div><div class="tab">Cooling</div><div class="tab">Kitchen</div><div class="tab">Cooking</div></div>
</div>
<div class="hero">
<h1>Everyday appliances,<br>engineered for life.</h1>
<div class="cta">詳しく見る</div>
</div>
<div class="cats">
<div class="cat"><div class="icon" style="background:#fef7fb"></div><b>Living</b></div>
<div class="cat"><div class="icon" style="background:#f3f9fe"></div><b>Cooling</b></div>
<div class="cat"><div class="icon" style="background:#f0faf6"></div><b>Kitchen</b></div>
<div class="cat"><div class="icon" style="background:#fef9f0"></div><b>Cooking</b></div>
</div>
<div class="rowlabel">人気ランキング</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="shape" style="background:linear-gradient(135deg,#369ae9,#f9f9f9)"></div></div><div class="body"><span class="badge" style="background:#f3f9fe;color:#369ae9">Cooling</span><div class="ptitle">スティック扇風機</div><div class="pprice">¥8,980</div></div></div>
<div class="card"><div class="thumb"><div class="shape" style="background:linear-gradient(135deg,#03ad6b,#f9f9f9)"></div></div><div class="body"><span class="badge" style="background:#f0faf6;color:#03ad6b">Kitchen</span><div class="ptitle">オーブンレンジ</div><div class="pprice">¥32,780</div></div></div>
<div class="card"><div class="thumb"><div class="shape" style="background:linear-gradient(135deg,#f49b00,#f9f9f9)"></div></div><div class="body"><span class="badge" style="background:#fef9f0;color:#f49b00">Cooking</span><div class="ptitle">IH炊飯器</div><div class="pprice">¥19,800</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.4; background: #313131; color: #ffffff;
border: none; border-radius: 4px; padding: 6px 12px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.4; background: #f5f5f5; color: #1a1a1a;
border: 1px solid #313131; border-radius: 4px;
padding: 6px 12px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cc0000; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Dusty Groove Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
background:#ffffff; color:#1a1a1a;
}
*{box-sizing:border-box;}
.nav{height:40px;background:#313131;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:13px;}
.logo{font-weight:700;}
.navlinks{display:flex;gap:12px;}
.navlinks span{font-weight:700;}
.searchwrap{display:flex;gap:0;}
.searchbar{background:#fff;color:#313131;border-radius:4px 0 0 4px;padding:6px 8px;font-size:12px;width:160px;}
.searchbtn{background:#313131;border:1px solid #fff;color:#fff;border-radius:0 4px 4px 0;padding:6px 12px;font-size:12px;font-weight:600;}
.body-wrap{display:flex;}
.sidebar{width:150px;background:#f5f5f5;padding:12px;font-size:12px;color:#313131;}
.sidebar-title{font-weight:700;margin-bottom:8px;text-transform:uppercase;font-size:11px;color:#666;}
.sidebar a{display:block;color:#0066cc;margin-bottom:6px;}
.main{flex:1;padding:14px 16px;}
.breadcrumb{font-size:11px;color:#666;margin-bottom:10px;}
.grid{display:flex;gap:8px;}
.card{flex:1;border:1px solid #e0e0e0;padding:8px;}
.card-img{aspect-ratio:1/1;background:#f5f5f5;margin-bottom:6px;position:relative;}
.card-img.c1{background:linear-gradient(135deg,#313131,#999);}
.card-img.c2{background:linear-gradient(135deg,#666,#ccc);}
.card-img.c3{background:linear-gradient(135deg,#cc0000,#313131);}
.card-img.c4{background:linear-gradient(135deg,#999,#313131);}
.newbadge{position:absolute;top:3px;left:3px;background:#cc0000;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:1px 4px;}
.artist{color:#666;font-size:12px;}
.title{font-weight:600;font-size:14px;margin:2px 0;}
.price{color:#cc0000;font-weight:600;font-size:14px;}
.stock{color:#006600;font-size:11px;font-weight:600;}
</style>
<nav class="nav">
<div class="logo">Dusty Groove</div>
<div class="navlinks"><span>NEW ARRIVALS</span><span>JAZZ</span><span>SOUL</span><span>PRE-ORDERS</span></div>
<div class="searchwrap">
<div class="searchbar">Artist, label, catalog #</div>
<div class="searchbtn">GO</div>
</div>
</nav>
<div class="body-wrap">
<div class="sidebar">
<div class="sidebar-title">Genres</div>
<a>Jazz</a><a>Soul / Funk</a><a>Blues</a><a>Latin</a><a>Hip Hop</a><a>Rock</a><a>World</a>
</div>
<div class="main">
<div class="breadcrumb">Home > New Arrivals > Jazz</div>
<div class="grid">
<div class="card"><div class="card-img c1"><span class="newbadge">New</span></div><div class="artist">Sun Ra Arkestra</div><div class="title">Living Sky</div><div class="price">$24.99</div><div class="stock">In Stock</div></div>
<div class="card"><div class="card-img c2"></div><div class="artist">Idris Muhammad</div><div class="title">Power Of Soul</div><div class="price">$19.99</div><div class="stock">In Stock</div></div>
<div class="card"><div class="card-img c3"></div><div class="artist">Various Artists</div><div class="title">Deep Cuts Vol. 3</div><div class="price">$16.99</div><div class="stock" style="color:#cc0000;">Out of Stock</div></div>
<div class="card"><div class="card-img c4"></div><div class="artist">Roy Ayers</div><div class="title">Mystic Voyage</div><div class="price">$22.99</div><div class="stock">In Stock</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; background: #e8392a; color: #ffffff;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; background: #ffffff; color: #e8392a;
border: 1px solid #e8392a; border-radius: 6px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #fce3e1; color: #e8392a;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Proxima Nova','Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#333333; }
*{box-sizing:border-box;}
.topstrip{height:30px;background:#e8392a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dddddd;}
.logo{font-size:20px;font-weight:700;color:#1a1a1a;}
.mega{display:flex;gap:20px;font-size:13px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;}
.mega div:nth-child(1){color:#f07d2a;}
.mega div:nth-child(2){color:#1a6fb8;}
.mega div:nth-child(3){color:#3a9e4d;}
.mega div:nth-child(4){color:#8b4fc8;}
.hero{height:200px;display:flex;align-items:center;background:#f7f7f7;border-radius:12px;margin:14px 32px 0;padding:0 28px;}
.herotext h1{font-size:28px;font-weight:600;color:#1a1a1a;margin:0 0 10px;letter-spacing:-0.3px;}
.herotext p{font-size:14px;color:#333333;margin:0 0 14px;}
.cta{display:inline-block;background:#e8392a;color:#fff;font-size:15px;font-weight:500;padding:12px 24px;border-radius:6px;}
.section{padding:16px 32px 0;}
.sectitle{font-size:16px;font-weight:600;color:#1a1a1a;margin-bottom:10px;}
.grid{display:flex;gap:14px;}
.card{width:150px;background:#fff;border:1px solid #f0f0f0;border-radius:12px;padding:10px;position:relative;}
.thumb{aspect-ratio:1/1;border-radius:12px;margin-bottom:8px;}
.badgerow{display:flex;gap:4px;margin-bottom:4px;}
.subj{font-size:10px;font-weight:700;text-transform:uppercase;border-radius:9999px;padding:2px 8px;}
.subj.math{background:#fde8d0;color:#f07d2a;}
.subj.lit{background:#d6e9f7;color:#1a6fb8;}
.subj.sci{background:#d3eeda;color:#3a9e4d;}
.pname{font-size:15px;font-weight:600;color:#1a1a1a;}
.pprice{font-size:16px;font-weight:700;color:#1a1a1a;margin-top:4px;}
.newbadge{position:absolute;top:8px;left:8px;background:#e8392a;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;border-radius:9999px;padding:2px 8px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#1a1a1a;color:#cccccc;font-size:12px;border-top:3px solid #e8392a;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="topstrip">Free Shipping on Orders Over $49</div>
<div class="nav">
<div class="logo">Lakeshore Learning</div>
<div class="mega"><div>Math</div><div>Literacy</div><div>Science</div><div>Art</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Curriculum, color-coded for the classroom.</h1>
<p>Teacher-trusted learning materials, sorted the way you shop.</p>
<div class="cta">Shop New Arrivals</div>
</div>
</div>
<div class="section">
<div class="sectitle">New This Week</div>
<div class="grid">
<div class="card"><span class="newbadge">New</span><div class="thumb" style="background:linear-gradient(135deg,#f07d2a,#fde8d0)"></div><div class="badgerow"><div class="subj math">Math</div></div><div class="pname">Counting Bear Tiles</div><div class="pprice">$18.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a6fb8,#d6e9f7)"></div><div class="badgerow"><div class="subj lit">Literacy</div></div><div class="pname">Phonics Word Cards</div><div class="pprice">$22.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3a9e4d,#d3eeda)"></div><div class="badgerow"><div class="subj sci">Science</div></div><div class="pname">Weather Station Kit</div><div class="pprice">$34.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8b4fc8,#e8d8f7)"></div><div class="badgerow"><div class="subj" style="background:#e8d8f7;color:#8b4fc8">Art</div></div><div class="pname">Easy-Grip Crayon Set</div><div class="pprice">$14.99</div></div>
</div>
</div>
<div class="footer"><span>© Lakeshore Learning</span><span>Educator Discounts</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #007cff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #007cff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bffa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4b9cfb; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #007cff; color: #000000;
border: 1px solid #4b9cfb; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #007cff; color: #f5f5f5;
border: 1px solid #278ffd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bffa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0c81fe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #eeeeee; }
.brand { font-size:16px; font-weight:600; }
.navlinks { display:flex; gap:22px; font-size:14px; color:#616161; font-weight:500; }
.right { display:flex; gap:10px; }
.btn-out { background:#fff; border:1px solid #e5e5e5; color:#111; border-radius:6px; height:36px;
padding:0 16px; font-size:13px; font-weight:500; display:flex; align-items:center; }
.btn-fill { background:#111; color:#fff; border-radius:6px; height:36px; padding:0 16px; font-size:13px;
font-weight:600; display:flex; align-items:center; }
.hero { text-align:center; padding:22px 40px 18px; }
.hero .pill { display:inline-block; background:rgba(0,124,255,0.10); color:#007cff; border-radius:9999px;
padding:3px 10px; font-size:11px; font-weight:600; margin-bottom:10px; }
.hero h1 { font-size:38px; font-weight:600; letter-spacing:-0.02em; margin:0 0 10px; line-height:1.1; }
.hero p { font-size:15px; color:#333333; margin:0 0 16px; }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:6px 40px; }
.tile { background:#f7f7f7; border-radius:6px; height:150px; position:relative; overflow:hidden; }
.tile .grad { position:absolute; inset:0; }
.g1 { background:linear-gradient(135deg,#ffd9c2,#ff8a5c); }
.g2 { background:linear-gradient(135deg,#c9e8ff,#4b9cfb); }
.g3 { background:linear-gradient(135deg,#e0ffe0,#5cbf7d); }
.tile .label { position:absolute; left:10px; bottom:10px; background:#fff; border-radius:4px; padding:2px 8px;
font-size:11px; font-weight:600; }
.row2 { display:flex; gap:16px; padding:16px 40px 0; }
.card { flex:1; background:#fff; border:1px solid #eeeeee; border-radius:6px; padding:16px; }
.card h3 { font-size:15px; font-weight:600; margin:0 0 6px; }
.card p { font-size:12px; color:#616161; margin:0; line-height:1.5; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #eeeeee; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#616161; }
</style></head>
<body>
<nav>
<div class="brand">Studio</div>
<div class="navlinks"><span>Templates</span><span>Pricing</span><span>Community</span></div>
<div class="right"><div class="btn-out">Log in</div><div class="btn-fill">Start for free</div></div>
</nav>
<div class="hero">
<span class="pill">New</span>
<h1>The easiest way to build a beautiful website</h1>
<p>No code. All creative freedom.</p>
</div>
<div class="gallery">
<div class="tile"><div class="grad g1"></div><span class="label">Portfolio</span></div>
<div class="tile"><div class="grad g2"></div><span class="label">Agency site</span></div>
<div class="tile"><div class="grad g3"></div><span class="label">Landing page</span></div>
</div>
<div class="row2">
<div class="card"><h3>One canvas, every idea</h3><p>Sketch, prototype, and hand off — without leaving the file.</p></div>
<div class="card"><h3>Design and publish, all in one place</h3><p>Real responsive layout, interactions, and a fast hosted site.</p></div>
</div>
<footer><span>© Studio</span><span>Studio · Templates · Pricing · Community</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0078d4; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0078d4; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bde6; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #091f2c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0078d4; color: #091f2c;
border: 1px solid #091f2c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0078d4; color: #f5f5f5;
border: 1px solid #278cd9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bde6; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #016ab9; color: #091f2c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0e1726; box-sizing:border-box;
font-family:"Segoe UI Variable Text", "Segoe UI", -apple-system, sans-serif; }
* { box-sizing:border-box; }
.display { font-family:"Segoe UI Variable Display", "Segoe UI Variable Text", sans-serif; }
nav { height:54px; display:flex; align-items:center; padding:0 36px; }
.brand { font-size:15px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:0; margin-left:30px; }
.navlinks span { font-size:13px; color:#262626; padding:0 8px; }
.cta-blue { margin-left:auto; background:#0078d4; color:#ffffff; border-radius:8px; height:40px; padding:8px 16px;
display:flex; align-items:center; font-size:15px; font-weight:600; }
.hero { padding:16px 36px 20px; }
.hero h1 { font-size:40px; font-weight:500; line-height:1.17; letter-spacing:-1px; margin:0 0 12px; max-width:520px; }
.hero p { font-size:16px; color:#17253d; line-height:1.5; margin:0 0 16px; max-width:460px; }
.cta-dark { display:inline-flex; background:#091f2c; color:#ffffff; border-radius:8px; height:52px; padding:12px 16px;
align-items:center; font-size:15px; font-weight:600; }
.tabs { display:flex; gap:8px; padding:0 36px 14px; }
.tab { height:40px; border-radius:200px; padding:8px 24px; font-size:16px; font-weight:600; display:flex; align-items:center; color:#0e1726; }
.tab.active { background:#06161f; color:#ffffff; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 36px 20px; }
.card { background:#fefefe; border:1px solid #f2f2f2; border-radius:8px; padding:18px; display:flex; flex-direction:column; gap:8px; }
.card .icon { width:36px; height:36px; border-radius:6px; background:linear-gradient(135deg,#0078d4,#50b0f0); }
.card h3 { font-size:20px; font-weight:600; margin:0; letter-spacing:-0.5px; }
.card p { font-size:14px; color:#17253d; margin:0; line-height:1.4; }
.card .link { font-size:13px; color:#0067b8; }
footer { background:#f2f2f2; padding:10px 36px; display:flex; gap:20px; }
footer span { font-size:11px; color:#616161; }
</style></head>
<body>
<nav>
<p class="brand">Microsoft</p>
<div class="navlinks"><span>Products</span><span>Solutions</span><span>Support</span><span>Learn</span></div>
<div class="cta-blue">Sign in</div>
</nav>
<div class="hero">
<h1 class="display">Do more with less effort</h1>
<p>The apps, cloud, and AI tools that help every person and organization achieve more.</p>
<div class="cta-dark">See Microsoft 365 plans</div>
</div>
<div class="tabs">
<div class="tab active">For Home</div>
<div class="tab">For Business</div>
<div class="tab">For Enterprise</div>
</div>
<div class="cards">
<div class="card"><div class="icon"></div><h3>Copilot</h3><p>Your everyday AI companion, built into the apps you already use.</p><span class="link">Learn more ></span></div>
<div class="card"><div class="icon"></div><h3>Microsoft 365</h3><p>Word, Excel, Teams, and cloud storage, together in one subscription.</p><span class="link">View plans ></span></div>
<div class="card"><div class="icon"></div><h3>Azure</h3><p>Build, deploy, and scale applications on a trusted cloud platform.</p><span class="link">Explore Azure ></span></div>
</div>
<footer><span>© Microsoft</span><span>Privacy</span><span>Terms of use</span><span>Trademarks</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #0b0d0c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #0b0d0c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.25px; margin: 0; color: #0b0d0c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #108474; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #ffffff; color: #0b0d0c;
border: 1px solid #108474; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #0b0d0c;
border: 1px solid #b5b6b6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #a89cc8; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>InfinaCore</title>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#eeeeee;font-family:'Segoe UI',Arial,sans-serif;color:#2c2a2a;}
*{box-sizing:border-box;}
.nav{position:absolute;top:0;left:0;width:960px;height:64px;background:#0e0e0e;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-weight:700;font-size:18px;letter-spacing:0.5px;}
.logo b{color:#108474;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:0.5px;}
.cart{color:#108474;font-size:14px;font-weight:700;}
.hero{position:absolute;top:64px;left:0;width:960px;height:250px;background:#eeeeee;display:flex;align-items:center;justify-content:center;padding:0 40px;}
.ring-wrap{position:relative;width:180px;height:180px;margin-right:60px;}
.ring{position:absolute;inset:0;border-radius:50%;border:3px solid #108474;border-top-color:transparent;}
.puck{position:absolute;top:30px;left:30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a3a3a,#0b0d0c);}
.puck::after{content:'';position:absolute;top:40px;left:40px;width:40px;height:40px;border-radius:50%;background:#108474;opacity:0.8;}
.hero-copy h1{font-size:30px;font-weight:700;color:#0b0d0c;margin:0 0 10px 0;letter-spacing:-0.5px;}
.hero-copy p{font-size:15px;color:#2c2a2a;margin:0 0 18px 0;width:340px;line-height:1.5;}
.btn-primary{display:inline-block;background:#108474;color:#fff;border-radius:9999px;padding:13px 30px;font-size:15px;font-weight:600;letter-spacing:0.25px;}
.searchrow{position:absolute;top:330px;left:32px;width:896px;height:32px;display:flex;align-items:center;}
.searchpill{width:280px;height:32px;border-radius:9999px;background:#fff;border:1px solid #555555;font-size:12px;color:#555555;display:flex;align-items:center;padding:0 16px;}
.sectitle{position:absolute;top:378px;left:32px;font-size:22px;font-weight:600;color:#0b0d0c;}
.grid{position:absolute;top:420px;left:32px;width:896px;height:196px;display:flex;gap:16px;}
.card{width:207px;height:196px;background:#fff;border:1px solid #d1d1d1;border-radius:8px;overflow:hidden;position:relative;}
.imgbox{width:207px;height:100px;position:relative;}
.imgbox.a{background:linear-gradient(135deg,#1a1a1a,#108474);}
.imgbox.b{background:linear-gradient(135deg,#2a2a2a,#3a3a3a);}
.imgbox.c{background:linear-gradient(135deg,#108474,#0d6b5d);}
.imgbox.d{background:linear-gradient(135deg,#e9a220,#d18c14);}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;border-radius:4px;padding:2px 8px;color:#fff;}
.badge.new{background:#a89cc8;}
.badge.sale{background:#e9a220;color:#0b0d0c;}
.cardbody{padding:12px;}
.title{font-size:14px;font-weight:600;color:#0b0d0c;margin-bottom:4px;}
.stars{font-size:11px;color:#ffca10;margin-bottom:4px;}
.price{font-size:15px;font-weight:700;color:#108474;}
</style>
<div class="nav">
<div class="logo">Infinacore</div>
<div class="navlinks"><span>CABLES</span><span>CHARGERS</span><span>BUNDLES</span></div>
<div class="cart">CART (1)</div>
</div>
<div class="hero">
<div class="ring-wrap">
<div class="ring"></div>
<div class="puck"></div>
</div>
<div class="hero-copy">
<h1>Power that<br>keeps up.</h1>
<p>MagSafe pucks, braided cables, and GaN bricks engineered for the way you actually charge.</p>
<div class="btn-primary">Shop Chargers</div>
</div>
</div>
<div class="searchrow"><div class="searchpill">Search cables, bricks, bundles…</div></div>
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card">
<div class="imgbox a"><div class="badge new">New</div></div>
<div class="cardbody">
<div class="title">CorePuck 15W MagSafe</div>
<div class="stars">★★★★★ 4.8</div>
<div class="price">$39.99</div>
</div>
</div>
<div class="card">
<div class="imgbox b"></div>
<div class="cardbody">
<div class="title">Braided USB-C Cable 2m</div>
<div class="stars">★★★★☆ 4.6</div>
<div class="price">$19.99</div>
</div>
</div>
<div class="card">
<div class="imgbox c"></div>
<div class="cardbody">
<div class="title">65W GaN Duo Brick</div>
<div class="stars">★★★★★ 4.9</div>
<div class="price">$44.99</div>
</div>
</div>
<div class="card">
<div class="imgbox d"><div class="badge sale">Sale</div></div>
<div class="cardbody">
<div class="title">Desk Charging Stand</div>
<div class="stars">★★★★☆ 4.5</div>
<div class="price">$54.99</div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #4d4d4d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #4d4d4d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #4d4d4d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ff9900; color: #000000;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #4d4d4d;
border: 1px solid #ff9900; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #4d4d4d;
border: 1px solid #d2d2d2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff9900; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Exo 2','Exo',Arial,sans-serif; color:#717171; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dddddd;}
.logo{font-size:20px;font-weight:700;color:#4d4d4d;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#4d4d4d;}
.hero{height:222px;display:flex;align-items:center;padding:0 32px;background:#f7f7f7;}
.heroText{width:420px;}
.h1{font-size:29px;font-weight:700;line-height:1.25;color:#4d4d4d;margin:0 0 12px;letter-spacing:-.3px;}
.sub{font-size:14px;line-height:1.5;color:#717171;margin:0 0 18px;max-width:360px;}
.btn{display:inline-block;background:#ff9900;color:#fff;font-size:13px;font-weight:700;padding:12px 26px;border-radius:10px;}
.woodWrap{margin-left:auto;width:180px;height:150px;position:relative;}
.plank1{position:absolute;width:170px;height:26px;background:linear-gradient(90deg,#934400,#ff9900);border-radius:6px;top:20px;left:0;}
.plank2{position:absolute;width:140px;height:26px;background:linear-gradient(90deg,#ff9900,#934400);border-radius:6px;top:56px;left:20px;}
.plank3{position:absolute;width:110px;height:26px;background:linear-gradient(90deg,#934400,#221155);border-radius:6px;top:92px;left:40px;}
.sec{padding:20px 32px 0;}
.secTitle{font-size:17px;font-weight:700;color:#4d4d4d;margin-bottom:14px;}
.grid{display:flex;gap:12px;}
.card{width:224px;border:1px solid #dddddd;border-radius:10px;padding:10px;}
.thumb{height:92px;background:#f7f7f7;border-radius:8px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;color:#4d4d4d;margin:0 0 4px;}
.pprice{font-size:13px;font-weight:700;color:#ff9900;}
</style>
<div class="nav">
<div class="logo">Toast</div>
<div class="navlinks"><div>Cutting Boards</div><div>Kitchenware</div><div>Gifts</div><div>Care Guide</div></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Handcrafted wood, made to warm a room.</div>
<div class="sub">Hand-oiled boards and kitchen goods finished the slow way, one grain at a time.</div>
<div class="btn">Shop Boards</div>
</div>
<div class="woodWrap"><div class="plank1"></div><div class="plank2"></div><div class="plank3"></div></div>
</div>
<div class="sec">
<div class="secTitle">Hand-Oiled Favorites</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff9900,#934400);"></div><div class="pname">Walnut End-Grain Board</div><div class="pprice">$89</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00ddbe,#221155);"></div><div class="pname">Maple Serving Tray</div><div class="pprice">$54</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e73394,#ff9900);"></div><div class="pname">Cherry Utensil Set</div><div class="pprice">$36</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1dbbdf,#934400);"></div><div class="pname">Wood Conditioning Oil</div><div class="pprice">$18</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #3a46cd; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #3a46cd; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #a1a6e3; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a2232; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3a46cd; color: #ffffff;
border: 1px solid #1a2232; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #3a46cd; color: #f5f5f5;
border: 1px solid #5862d3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a1a6e3; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #3540b4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a2232; box-sizing:border-box;
font-family:"Pretendard",-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 44px; border-bottom:1px solid #d0d1d3; }
.brand { font-size:18px; font-weight:700; margin:0; color:#1a2232; }
.navlinks { display:flex; gap:16px; font-size:16px; font-weight:600; }
.navlinks span.cur { color:#3a46cd; }
.action { background:#727887; color:#ffffff; padding:1px 6px; height:58px; display:flex; align-items:center; font-size:10px; font-weight:700; }
.hero { padding:60px 44px 30px; }
.hero h1 { font-size:48px; font-weight:700; margin:0 0 14px; max-width:600px; }
.hero p { font-size:15px; color:#595e6b; max-width:480px; line-height:27px; margin:0 0 20px; }
.row { display:flex; gap:12px; }
.dl { background:transparent; border:1px solid #727887; color:#1a2232; padding:11px 24px; font-size:13px; font-weight:600; }
.fl { background:transparent; border:1px solid #d0d1d3; color:#595e6b; padding:6px 12px 6px 16px; height:34px; font-size:12px; font-weight:600; display:flex; align-items:center; }
</style></head>
<body>
<nav>
<p class="brand">SK Telecom</p>
<div class="navlinks"><span class="cur">TECHNOLOGY</span><span>TOMORROW</span><span>TOGETHER</span></div>
<span class="action">OPEN</span>
</nav>
<section class="hero">
<h1>Technology, Tomorrow, Together</h1>
<p>Building the next chapter of an AI Company through technology and services that benefit customers.</p>
<div class="row"><span class="dl">Download Brand Assets</span><span class="fl">Learn more ›</span></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0065bd; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0065bd; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b4dc; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2d3133; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0065bd; color: #ffffff;
border: 1px solid #2d3133; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0065bd; color: #f5f5f5;
border: 1px solid #277cc6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b4dc; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #075da7; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#2d3133; box-sizing:border-box;
font-family:"Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #e5e7eb; }
.brand { font-size:18px; font-weight:700; letter-spacing:1px; color:#2d3133; }
.navlinks { display:flex; gap:32px; font-size:14px; color:#51656f; }
.navlinks li { list-style:none; }
.navlinks ul { display:flex; gap:32px; margin:0; padding:0; }
.hero { display:flex; align-items:center; gap:0; padding:44px 40px 32px; }
.hero-txt { flex:1; }
.eyebrow { font-size:13px; color:#0065bd; font-weight:700; letter-spacing:2px; margin:0 0 12px; }
.hero h1 { font-size:34px; font-weight:700; line-height:1.5; margin:0 0 14px; color:#2d3133; }
.hero p { font-size:15px; color:#51656f; line-height:1.7; max-width:420px; margin:0; }
.hero-visual { width:280px; height:190px; position:relative; flex-shrink:0; }
.hero-visual .blob1 { position:absolute; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #eaf1f8, #f5f7fb); top:-10px; right:20px; }
.hero-visual .blob2 { position:absolute; width:110px; height:8px; background:#0065bd; top:70px; right:100px; opacity:0.5; }
.hero-visual .blob3 { position:absolute; width:70px; height:8px; background:#646d76; top:100px; right:150px; opacity:0.4; }
.divider { border-top:1px solid #e5e7eb; margin:0 40px; }
.list { padding:28px 40px; }
.list h2 { font-size:15px; font-weight:700; color:#2d3133; margin:0 0 6px; }
.navitem { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-top:1px solid #e5e7eb;
font-size:14px; color:#2d3133; font-weight:400; }
.navitem:last-child { border-bottom:1px solid #e5e7eb; }
.navitem .arrow { color:#646d76; font-size:13px; }
.side { display:flex; gap:22px; padding:0 40px 24px; }
.sidecard { flex:1; border:1px solid #e5e7eb; padding:22px; }
.sidecard h3 { font-size:16px; font-weight:700; margin:0 0 8px; color:#2d3133; }
.sidecard p { font-size:13px; color:#51656f; line-height:1.7; margin:0 0 14px; }
.sidecard .side-ctrl { font-size:13px; color:#0065bd; font-weight:400; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #e5e7eb; padding:14px 40px;
display:flex; justify-content:space-between; font-size:12px; color:#646d76; }
</style></head>
<body style="position:relative">
<nav>
<span class="brand">Recruit</span>
<div class="navlinks"><ul><li>Company</li><li>Sustainability</li><li>Investors</li><li>Careers</li></ul></div>
</nav>
<section class="hero">
<div class="hero-txt">
<p class="eyebrow">OPPORTUNITIES FOR LIFE</p>
<h1>Making your next choice easier to find.</h1>
<p>We back individual passion and support corporate productivity. Our matching platforms connect people and opportunity through technology, worldwide.</p>
</div>
<div class="hero-visual"><span class="blob1"></span><span class="blob2"></span><span class="blob3"></span></div>
</section>
<div class="divider"></div>
<section class="list">
<h2>Sustainability Initiatives</h2>
<div class="navitem"><span>Initiatives for Productivity Growth</span><span class="arrow">›</span></div>
<div class="navitem"><span>Programs That Support Employee Growth</span><span class="arrow">›</span></div>
<div class="navitem"><span>Value Creation Report 2026</span><span class="arrow">›</span></div>
</section>
<section class="side">
<div class="sidecard">
<h3>About RSS</h3>
<p>From a matching business connecting people and companies to a SaaS business supporting productivity — explore our journey of over 60 years.</p>
<span class="side-ctrl">View Company Info ›</span>
</div>
<div class="sidecard">
<h3>Vision, Mission, Values</h3>
<p>"Creating New Value," "Pursuing Individual Potential," "Valuing Social Impact" — the three values we hold dear.</p>
<span class="side-ctrl">Learn More ›</span>
</div>
</section>
<footer>
<span>© Recruit Holdings Co., Ltd.</span>
<span>Company · Sustainability · Investors</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #7fd7ff; color: #1a1a1a;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #1a1a1a;
border: 1px solid #7fd7ff; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.4; background: #7fd7ff; color: #1a1a1a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:'Inter', Arial, sans-serif; color:#242728; }
*{box-sizing:border-box;}
.nav{height:64px;background:#242728;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Montserrat',sans-serif;font-weight:700;font-size:20px;color:#fff;}
.navlinks{display:flex;gap:22px;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;color:#fff;letter-spacing:0.3px;}
.cta{background:#004d8b;color:#fff;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;padding:10px 18px;border-radius:4px;}
.hero{height:230px;display:flex;align-items:center;padding:0 32px;background:#242728;}
.herotext{width:420px;}
.herotext h1{font-family:'Montserrat',sans-serif;font-weight:700;font-size:34px;letter-spacing:-1px;color:#fff;margin:0 0 12px;line-height:1.15;}
.herotext p{color:#c9c9c9;font-size:15px;margin:0 0 18px;}
.swatches{display:flex;gap:10px;}
.sw{width:22px;height:22px;border-radius:9999px;}
.matrix{padding:20px 32px;}
.mtitle{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#555;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{flex:1;background:#f9fafb;border-radius:8px;padding:12px;}
.thumb{height:80px;border-radius:8px;margin-bottom:10px;position:relative;}
.dot{position:absolute;top:8px;right:8px;width:14px;height:14px;border-radius:9999px;border:2px solid #1a1a1a;}
.pname{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:600;margin:0 0 4px;}
.pprice{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:700;}
.spectable{background:#f2f2f2;border-radius:8px;margin:16px 32px 0;padding:12px 16px;}
.specrow{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #dfdfe1;font-family:'Basier Square Mono','Courier New',monospace;font-size:12px;}
.specrow:last-child{border-bottom:none;}
.speclabel{color:#555;}
.specval{color:#1a1a1a;}
</style>
<div class="nav">
<div class="logo">Rolling Square Cables A 2</div>
<div class="navlinks"><div>Cables</div><div>Hubs</div><div>Batteries</div></div>
<div class="cta">Add to Cart</div>
</div>
<div class="hero">
<div class="herotext">
<h1>One cable, six colorways.</h1>
<p>The paint-chip logic: color encodes the SKU, mono type confirms the amperage.</p>
<div class="swatches">
<div class="sw" style="background:#7fd7ff"></div><div class="sw" style="background:#108474"></div><div class="sw" style="background:#ffc100"></div><div class="sw" style="background:#ff7f7f"></div><div class="sw" style="background:#a89cc8"></div><div class="sw" style="background:#c1e6e6"></div>
</div>
</div>
</div>
<div class="matrix">
<div class="mtitle">inCharge 6 Multi-Cable — Colorways</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#7fd7ff"><div class="dot" style="background:#7fd7ff"></div></div><div class="pname">Sky</div><div class="pprice">$34.90</div></div>
<div class="card"><div class="thumb" style="background:#108474"><div class="dot" style="background:#108474"></div></div><div class="pname">Teal</div><div class="pprice">$34.90</div></div>
<div class="card"><div class="thumb" style="background:#ffc100"><div class="dot" style="background:#ffc100"></div></div><div class="pname">Amber</div><div class="pprice">$34.90</div></div>
<div class="card"><div class="thumb" style="background:#a89cc8"><div class="dot" style="background:#a89cc8"></div></div><div class="pname">Lavender</div><div class="pprice">$34.90</div></div>
</div>
</div>
<div class="spectable">
<div class="specrow"><span class="speclabel">Output</span><span class="specval">100W PD 3.1</span></div>
<div class="specrow"><span class="speclabel">Ports</span><span class="specval">USB-C / USB-A / Lightning</span></div>
<div class="specrow"><span class="speclabel">Length</span><span class="specval">130mm</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c88c; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c88c; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00dc9a; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c88c; color: #000000;
border: 1px solid #00dc9a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c88c; color: #000000;
border: 1px solid #27cf9d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #00cb8e; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Outfit","Segoe UI",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #dddddd; }
.logo { font-size:22px; font-weight:700; }
.navlinks { display:flex; gap:26px; font-size:16px; font-weight:600; color:#777777; }
.navlinks .active { color:#171717; }
.hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:36px 40px; gap:24px; }
.hero .tag { display:block; font-size:16px; font-weight:600; color:#00c88c; margin-bottom:10px; }
.hero h1 { font-family:"Outfit"; font-size:44px; font-weight:500; line-height:1.2; color:#133b55;
margin:0 0 14px; }
.hero p { font-size:16px; line-height:1.5; color:#303030; margin:0 0 20px; max-width:380px; }
.row { display:flex; gap:10px; }
.btn { border-radius:8px; height:52px; padding:14px 20px; font-size:16px; font-weight:700;
display:inline-flex; align-items:center; }
.btn-solid { background:#222222; color:#ffffff; }
.btn-outline { background:transparent; color:#222222; border:1px solid #222222; }
.hero-visual { background:#00c88c; border-radius:16px; height:220px; position:relative; overflow:hidden; }
.hero-visual::before { content:''; position:absolute; width:160px; height:160px; border-radius:16px;
background:#00dc9a; right:-30px; bottom:-40px; transform:rotate(-8deg); }
.hero-visual::after { content:'그린카'; position:absolute; left:24px; bottom:20px; color:#000000;
font-size:22px; font-weight:700; }
.band { background:#f6f6f6; padding:26px 40px; }
.band h2 { font-size:24px; font-weight:700; color:#222222; margin:0 0 16px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#ffffff; border:1px solid #dddddd; border-radius:12px; padding:16px;
box-shadow:rgba(0,0,0,0.08) 0px 4px 8px; }
.card .thumb { height:70px; border-radius:8px; background:#e6f8f2; margin-bottom:10px; }
.card h3 { font-size:15px; font-weight:700; margin:0 0 6px; color:#222222; }
.card p { font-size:12px; color:#5e5e5e; margin:0; line-height:1.4; }
footer { display:flex; justify-content:space-between; align-items:center; padding:14px 40px;
border-top:1px solid #dddddd; font-size:12px; color:#777777; }
footer a { color:#00c88c; font-weight:700; }
</style></head>
<body>
<nav>
<span class="logo">Greencar</span>
<div class="navlinks"><span class="active">Company</span><span>Service</span><span>Careers</span></div>
<button class="btn btn-solid" style="height:40px;padding:8px 18px;font-size:14px;">Go to app</button>
</nav>
<section class="hero">
<div>
<span class="tag">Premium Car Sharing</span>
<h1>Create a Better Life</h1>
<p>Greencar connects people, time, and space with a user-centered new mobility experience.</p>
<div class="row">
<button class="btn btn-solid">Learn more</button>
<button class="btn btn-outline">Browse cars</button>
</div>
</div>
<div class="hero-visual"></div>
</section>
<section class="band">
<h2>Full mobility line-up</h2>
<div class="cards">
<div class="card"><div class="thumb"></div><h3>Round-trip Car</h3><p>Book by the hour, return to the same zone.</p></div>
<div class="card"><div class="thumb"></div><h3>One-way Zone</h3><p>Pick up here, drop off anywhere in the zone.</p></div>
<div class="card"><div class="thumb"></div><h3>Biz Fleet</h3><p>Corporate mobility for growing teams.</p></div>
</div>
</section>
<footer>
<span>© Greencar</span>
<span><a href="#">Privacy Policy</a> · Terms of Service</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #090909; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #090909; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.8px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.14px; margin: 0; color: #999999; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; letter-spacing: -0.14px; background: #ffffff; color: #000000;
border: none; border-radius: 100px; padding: 10px 15px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.0; letter-spacing: -0.14px; background: #141414; color: #ffffff;
border: 1px solid #ffffff; border-radius: 100px;
padding: 10px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: -0.15px; background: #141414; color: #ffffff;
border: 1px solid #464646; border-radius: 10px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #999999; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #2b2b2b; color: #ffffff;
border-radius: 100px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#090909; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:16px; font-weight:500; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#ccc; }
.btn-white { background:#fff; color:#000; border:none; border-radius:100px; padding:8px 16px; font-size:13px; font-weight:500; }
.btn-dark { background:#1c1c1c; color:#fff; border:none; border-radius:100px; padding:8px 16px; font-size:13px; font-weight:500; }
.hero { text-align:center; padding:14px 40px 6px; }
.hero h1 { font-size:64px; font-weight:500; letter-spacing:-3.2px; line-height:0.9; margin:0 0 10px; }
.hero p { font-size:15px; color:#999; margin:0 auto 12px; max-width:420px; }
.grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:14px; padding:8px 36px 16px; height:300px; }
.spot { border-radius:30px; padding:22px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; }
.spot h3 { font-size:22px; font-weight:500; letter-spacing:-0.6px; margin:0; line-height:1.1; }
.violet { background:radial-gradient(120% 130% at 20% 10%, #8a6cf5, #6a4cf5 55%, #4a2fbd); }
.magenta { background:radial-gradient(120% 130% at 80% 10%, #ea6df5, #d44df0 55%, #a52bb8); }
.orange { background:radial-gradient(120% 130% at 30% 90%, #ff9a5d, #ff7a3d 55%, #c94e18); }
.charcoalcard { background:#141414; border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:8px; }
.browser { background:#1c1c1c; border-radius:10px; padding:8px; flex:1; display:flex; flex-direction:column; gap:6px; }
.dots { display:flex; gap:4px; }
.dots i { width:6px; height:6px; border-radius:50%; background:#3a3a3a; display:inline-block; }
.bar { height:6px; background:#262626; border-radius:3px; }
.pricingrow { display:flex; gap:12px; padding:0 36px 14px; }
.pcard { flex:1; background:#141414; border-radius:20px; padding:16px; }
.pcard.feat { background:#1c1c1c; }
.pcard h4 { font-size:14px; font-weight:700; letter-spacing:-0.5px; margin:0 0 4px; }
.pcard .price { font-size:22px; font-weight:500; letter-spacing:-1px; margin-bottom:6px; }
.pcard p { font-size:11px; color:#999; margin:0; }
footer { margin-top:auto; padding:12px 36px; display:flex; justify-content:space-between; font-size:11px; color:#999; }
</style></head>
<body>
<nav>
<span class="brand">Framer</span>
<div class="navlinks"><span>Product</span><span>Templates</span><span>Pricing</span><span>Learn</span></div>
<div style="display:flex;gap:8px"><button class="btn-dark">Sign in</button><button class="btn-white">Get started</button></div>
</nav>
<section class="hero">
<h1>Publish an<br>Awwwards-winning site.</h1>
<p>The design tool that builds real websites, no code required.</p>
</section>
<div class="grid">
<div class="spot violet"><h3>Built with Framer</h3></div>
<div class="charcoalcard">
<div class="dots"><i></i><i></i><i></i></div>
<div class="browser"><div class="bar" style="width:70%"></div><div class="bar" style="width:45%"></div><div class="bar" style="width:60%"></div></div>
</div>
<div class="spot magenta"><h3>Sites that convert</h3></div>
<div class="spot orange"><h3>Motion, made easy</h3></div>
<div class="charcoalcard">
<div class="dots"><i></i><i></i><i></i></div>
<div class="browser"><div class="bar" style="width:50%"></div><div class="bar" style="width:80%"></div><div class="bar" style="width:30%"></div></div>
</div>
</div>
<div class="pricingrow">
<div class="pcard"><h4>Mini</h4><div class="price">Free</div><p>For personal sites and side projects.</p></div>
<div class="pcard feat"><h4>Pro</h4><div class="price">$20/mo</div><p>Everything you need to launch and grow.</p></div>
<div class="pcard"><h4>Business</h4><div class="price">$40/mo</div><p>Advanced CMS and team collaboration.</p></div>
</div>
<footer>
<span>© Framer</span>
<span>Framer · Templates · Community · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #121212; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #121212; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8f8f8f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1db954; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #121212; color: #1db954;
border: 1px solid #1db954; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #121212; color: #f5f5f5;
border: 1px solid #363636; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f8f8f; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #142d1d; color: #1db954;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#ffffff; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.stage { position:relative; width:960px; height:640px;
background:
radial-gradient(120% 90% at 18% -10%, rgba(157,78,180,0.55), rgba(18,18,18,0) 55%),
linear-gradient(180deg, #3a2350 0%, #1c1226 32%, #121212 62%); }
.topbar { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; }
.topbar .chev { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,0.08);
display:flex; align-items:center; justify-content:center; font-size:14px; }
.topbar .src { font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:#b3b3b3; }
.topbar .more { font-size:18px; color:#fff; letter-spacing:2px; }
.layout { position:relative; z-index:2; display:flex; height:calc(640px - 56px); }
.player { width:600px; display:flex; flex-direction:column; align-items:center; padding:6px 40px 28px; }
.art { width:230px; height:230px; border-radius:6px; margin-top:6px;
background:
radial-gradient(circle at 30% 25%, #ff9a3c 0%, #ff5f6d 30%, #7b2ff7 62%, #2b1055 100%);
box-shadow: 0 22px 46px rgba(0,0,0,0.55);
position:relative; overflow:hidden; }
.art::after { content:''; position:absolute; inset:0;
background: repeating-linear-gradient(115deg, rgba(0,0,0,0.08) 0 8px, rgba(255,255,255,0.03) 8px 16px); }
.meta { width:100%; margin-top:22px; display:flex; align-items:flex-start; justify-content:space-between; }
.meta .txt h1 { font-size:22px; font-weight:700; margin:0 0 4px; letter-spacing:-0.3px; }
.meta .txt p { font-size:14px; color:#b3b3b3; margin:0; }
.meta .heart { width:24px; height:24px; color:#1DB954; font-size:20px; line-height:1; }
.scrub { width:100%; margin-top:18px; }
.track { position:relative; height:3px; background:#4d4d4d; border-radius:2px; }
.track .fill { position:absolute; left:0; top:0; height:3px; width:38%; background:#fff; border-radius:2px; }
.track .thumb { position:absolute; left:38%; top:50%; width:11px; height:11px; margin-left:-5.5px; margin-top:-5.5px;
background:#fff; border-radius:50%; }
.times { display:flex; justify-content:space-between; margin-top:7px; font-size:11px; color:#b3b3b3;
font-variant-numeric:tabular-nums; }
.controls { width:100%; margin-top:20px; display:flex; align-items:center; justify-content:center; gap:34px; }
.controls .side { font-size:15px; color:#b3b3b3; }
.controls .skip { font-size:24px; color:#fff; }
.playbtn { width:64px; height:64px; border-radius:50%; background:#1DB954;
display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.4); }
.playbtn .bars { display:flex; gap:4px; }
.playbtn .bars span { width:5px; height:20px; background:#000; border-radius:1px; }
.devices { width:100%; margin-top:20px; display:flex; align-items:center; justify-content:space-between; }
.devices .pill { display:flex; align-items:center; gap:8px; font-size:12px; color:#b3b3b3; }
.devices .pill .dot { width:8px; height:8px; border-radius:50%; background:#1DB954; }
.devices .share { font-size:13px; color:#b3b3b3; }
.queue { width:360px; border-left:1px solid rgba(255,255,255,0.08); padding:22px 24px; overflow:hidden; }
.queue h2 { font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#b3b3b3; margin:0 0 14px; }
.qrow { display:flex; align-items:center; gap:12px; padding:8px 0; }
.qrow .thumb { width:44px; height:44px; border-radius:6px; flex:none; }
.qrow .t1 { background:linear-gradient(135deg,#ffce54,#ed5565); }
.qrow .t2 { background:linear-gradient(135deg,#48cfad,#37bc9b); }
.qrow .t3 { background:linear-gradient(135deg,#5d9cec,#4a89dc); }
.qrow .t4 { background:linear-gradient(135deg,#ac92ec,#967adc); }
.qrow .t5 { background:linear-gradient(135deg,#fc6e51,#e9573f); }
.qrow .info h4 { font-size:14px; font-weight:600; margin:0 0 2px; color:#fff; }
.qrow .info p { font-size:12px; color:#b3b3b3; margin:0; }
.qrow.now .info h4 { color:#1DB954; }
.eq { display:flex; align-items:flex-end; gap:2px; width:12px; height:12px; }
.eq span { width:3px; background:#1DB954; }
.eq span:nth-child(1){ height:6px; } .eq span:nth-child(2){ height:12px; } .eq span:nth-child(3){ height:8px; }
.brandtag { position:absolute; left:28px; bottom:18px; font-size:11px; color:#6a6a6a; z-index:2; }
</style></head>
<body>
<div class="stage">
<div class="topbar">
<div class="chev">⌄</div>
<div class="src">Playing from queue</div>
<div class="more">⋯</div>
</div>
<div class="layout">
<div class="player">
<div class="art"></div>
<div class="meta">
<div class="txt">
<h1>Midnight Static</h1>
<p>Camila Voss</p>
</div>
<div class="heart">♥</div>
</div>
<div class="scrub">
<div class="track"><div class="fill"></div><div class="thumb"></div></div>
<div class="times"><span>1:24</span><span>-2:03</span></div>
</div>
<div class="controls">
<div class="side">⤮</div>
<div class="skip">⏮</div>
<div class="playbtn"><div class="bars"><span></span><span></span></div></div>
<div class="skip">⏭</div>
<div class="side">⟲</div>
</div>
<div class="devices">
<div class="pill"><span class="dot"></span>Spotify (iOS) Connect · Living Room speaker</div>
<div class="share">Share</div>
</div>
</div>
<div class="queue">
<h2>Next up</h2>
<div class="qrow now">
<div class="thumb t1"></div>
<div class="info"><h4>Midnight Static</h4><p>Camila Voss</p></div>
<div class="eq"><span></span><span></span><span></span></div>
</div>
<div class="qrow">
<div class="thumb t2"></div>
<div class="info"><h4>Slow Tide</h4><p>Reef & Wren</p></div>
</div>
<div class="qrow">
<div class="thumb t3"></div>
<div class="info"><h4>Glass Corridor</h4><p>Jordan Ames</p></div>
</div>
<div class="qrow">
<div class="thumb t4"></div>
<div class="info"><h4>Paper Weather</h4><p>Minji Park</p></div>
</div>
<div class="qrow">
<div class="thumb t5"></div>
<div class="info"><h4>Low Beam</h4><p>Reef & Wren</p></div>
</div>
</div>
</div>
<div class="brandtag">Spotify (iOS)</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f3f3; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f3f3; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #c93997; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f3f3f3; color: #080808;
border: 1px solid #c93997; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #f3f3f3; color: #262626;
border: 1px solid #b8b8b8; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.3px; background: #26c0c9; color: #080808;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#f3f3f3; color:#080808; box-sizing:border-box; font-family:'CosmicaRegularRegular',sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;background:#f3f3f3;border-bottom:1px solid #e2e2e2;display:flex;align-items:center;justify-content:space-between;padding:0 26px;}
.nav .logo{font-family:'CosmicaExtraBoldRegular',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.3px;}
.nav .links{display:flex;gap:18px;font-family:'CosmicaMediumRegular',sans-serif;font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.3px;color:#080808;}
.nav .links span:first-child{color:#c93997;border-bottom:2px solid #c93997;padding-bottom:4px;}
.wrap{display:flex;height:580px;}
.left{width:400px;background:linear-gradient(160deg,#fdedde,#ffe0ec);display:flex;align-items:center;justify-content:center;position:relative;padding:20px;}
.cup{width:150px;height:220px;border-radius:36px 36px 60px 60px;background:linear-gradient(180deg,#ffbb77,#ff6c63);box-shadow:0 16px 30px rgba(8,8,8,.15);position:relative;}
.cup::after{content:'';position:absolute;top:14px;left:50%;transform:translateX(-50%);width:60%;height:18px;border-radius:50%;background:rgba(255,255,255,.35);}
.lid{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:150px;height:26px;border-radius:16px;background:#26c0c9;}
.badge-corner{position:absolute;top:24px;left:24px;background:#26c0c9;color:#080808;font-family:'CosmicaSemiBoldRegular',sans-serif;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.3px;padding:4px 12px;border-radius:9999px;}
.right{flex:1;padding:28px 32px;display:flex;flex-direction:column;}
.title{font-family:'CosmicaExtraBoldRegular',sans-serif;font-size:28px;font-weight:800;letter-spacing:-.3px;margin:0 0 6px;line-height:1.15;}
.subtitle{color:#262626;font-size:16px;margin:0 0 12px;}
.price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;}
.price{font-family:'CosmicaMediumRegular',sans-serif;font-size:18px;font-weight:500;}
.sale{color:#ff6c63;}
.swatch-row{display:flex;gap:10px;margin-bottom:18px;}
.swatch{width:32px;height:32px;border-radius:9999px;border:2px solid #d2d2d2;}
.swatch.sel{border:3px solid #080808;}
.s1{background:#26c0c9;} .s2{background:#ff6c63;} .s3{background:#ffbb77;} .s4{background:#78a354;}
.desc{font-size:14px;color:#262626;line-height:1.5;margin:0 0 18px;}
.actions{display:flex;gap:10px;margin-top:auto;}
.btn-primary{background:#c93997;color:#fff;font-family:'CosmicaSemiBoldRegular',sans-serif;font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.5px;border-radius:9999px;padding:14px 28px;height:48px;display:flex;align-items:center;}
.btn-secondary{background:#f3f3f3;color:#080808;font-family:'CosmicaSemiBoldRegular',sans-serif;font-weight:600;font-size:15px;text-transform:uppercase;border:2px solid #080808;border-radius:9999px;padding:13px 27px;height:48px;display:flex;align-items:center;}
</style>
</head>
<body>
<div class="nav"><div class="logo">Corkcicle</div><div class="links"><span>Tumblers</span><span>Coolers</span><span>Barware</span><span>Sale</span></div></div>
<div class="wrap">
<div class="left">
<div class="badge-corner">Bestseller</div>
<div class="cup"><div class="lid"></div></div>
</div>
<div class="right">
<p class="title">Series A Sport Canteen 20oz</p>
<p class="subtitle">Triple-Wall Vacuum Insulation · Peach Colorway</p>
<div class="price-row"><span class="price">$34.95</span></div>
<div class="swatch-row">
<span class="swatch sel s1"></span>
<span class="swatch s2"></span>
<span class="swatch s3"></span>
<span class="swatch s4"></span>
</div>
<p class="desc">Keeps drinks ice cold for 25 hours or coffee steaming for 12. A splash of color-blocked confidence for the trail, the desk, or the beach cooler.</p>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Learn More</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f0f0f0; color: #32373c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f0f0f0; color: #32373c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #32373c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #949494; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #d42520; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #32373c;
border: 1px solid #d42520; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #444444;
border: 1px solid #c0c2c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949494; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #1ea0c3; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f0f0f0; font-family:'Georgia', serif; color:#32373c;
}
*{box-sizing:border-box;}
.nav{height:72px; background:#fff; display:flex; align-items:center; padding:0 24px; gap:20px; box-shadow:0 1px 0 #e5e5e5;}
.logo{font-size:26px; font-weight:bold; color:#d42520;}
.navlinks{display:flex; gap:18px; font-size:13px; color:#8a8f94;}
.navlinks span:first-child{color:#d42520; font-weight:bold;}
.navcta{margin-left:auto; background:#d42520; color:#fff; border-radius:999px; padding:9px 18px; font-size:12px; font-weight:bold;}
.hero{display:flex; align-items:center; padding:20px 24px; gap:24px;}
.heroText{flex:1;}
.heroText h1{font-size:34px; margin:0 0 8px; color:#32373c; line-height:1.15;}
.heroText p{font-size:14px; color:#5a5f64; margin:0 0 14px; line-height:1.5;}
.heroBtn{display:inline-block; background:#d42520; color:#fff; border-radius:999px; padding:11px 26px; font-size:13px; font-weight:bold;}
.heroArt{width:280px; height:180px; position:relative; flex-shrink:0;}
.blob{position:absolute; border-radius:50%;}
.b1{width:150px; height:150px; background:#ff9900; top:10px; left:10px; opacity:.85;}
.b2{width:110px; height:110px; background:#1ea0c3; bottom:0; right:20px; opacity:.9;}
.b3{width:70px; height:70px; background:#e94c89; top:30px; right:60px; opacity:.9;}
.b4{width:50px; height:50px; background:#02e49b; bottom:20px; left:80px; opacity:.9;}
.section{padding:6px 24px 0;}
.sectitle{font-size:18px; font-weight:bold; margin:0 0 12px; color:#32373c;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.card{background:#fff; border-radius:12px; padding:10px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.06);}
.thumb{height:78px; border-radius:12px; margin-bottom:8px; position:relative;}
.t1{background:linear-gradient(135deg,#ff9900,#ffcf7a);}
.t2{background:linear-gradient(135deg,#1ea0c3,#8fe0f5);}
.t3{background:linear-gradient(135deg,#e94c89,#ffb3d1);}
.t4{background:linear-gradient(135deg,#4280ff,#a9c4ff);}
.tag{position:absolute; top:6px; left:6px; font-size:8px; font-weight:bold; padding:3px 7px; border-radius:999px; color:#fff;}
.tagnew{background:#1ea0c3;}
.tagsale{background:#d42520;}
.taglim{background:#ff9900;}
.pname{font-size:12px; font-weight:bold; margin-bottom:4px; font-family:Georgia,serif;}
.pprice{font-size:12px; color:#d42520; font-weight:bold;}
.footer{position:absolute; bottom:0; left:0; right:0; background:#32373c; color:#9aa0a6; font-size:10px; text-align:center; padding:8px 0;}
</style>
<div class="nav">
<div class="logo">Hape</div>
<div class="navlinks"><span>Toys</span><span>Wooden Play</span><span>Learning</span><span>Baby</span></div>
<div class="navcta">Shop Now</div>
</div>
<div class="hero">
<div class="heroText">
<h1>Playtime, Beautifully Made</h1>
<p>Award-winning wooden and eco toys designed to spark curiosity — from first steps to imaginative worlds.</p>
<div class="heroBtn">Explore Collection</div>
</div>
<div class="heroArt">
<div class="blob b1"></div>
<div class="blob b2"></div>
<div class="blob b3"></div>
<div class="blob b4"></div>
</div>
</div>
<div class="section">
<div class="sectitle">Bestselling Toys</div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="tag tagnew">NEW</span></div>
<div class="pname">Rainbow Stacker</div>
<div class="pprice">$24.99</div>
</div>
<div class="card">
<div class="thumb t2"><span class="tag tagsale">SALE</span></div>
<div class="pname">Wonder Train Set</div>
<div class="pprice">$39.99</div>
</div>
<div class="card">
<div class="thumb t3"><span class="tag taglim">LIMITED</span></div>
<div class="pname">Little Chef Kitchen</div>
<div class="pprice">$54.99</div>
</div>
<div class="card">
<div class="thumb t4"><span class="tag tagnew">NEW</span></div>
<div class="pname">Sky Blocks Bundle</div>
<div class="pprice">$29.99</div>
</div>
</div>
</div>
<div class="footer">© Hape · Wooden Toys & Baby Gear · Loved Since 1960</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #404040;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #404040;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #404040; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #bd2426; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #404040;
border: 1px solid #bd2426; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #404040;
border: 1px solid #cfcfcf; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #62a1d8; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; color:#404040; }
*{box-sizing:border-box;}
.nav{height:48px;background:#404040;display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.logo{color:#fff;font-size:16px;font-weight:600;letter-spacing:0.5px;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:500;color:#fff;}
.navlinks .active{border-bottom:2px solid #bd2426;padding-bottom:14px;}
.search{background:#fff;border-radius:9999px;padding:6px 16px;font-size:13px;color:#404040;}
.strip{display:flex;gap:14px;padding:10px 24px;border-bottom:1px solid #dedede;font-size:13px;color:#737373;}
.strip .curr{color:#404040;font-weight:600;}
.grid{display:flex;gap:0;padding:16px 24px;}
.card{width:180px;padding:8px;}
.thumb{aspect-ratio:1/1;background:#f7f7f7;position:relative;}
.badge{position:absolute;top:6px;left:6px;font-size:11px;font-weight:700;text-transform:uppercase;color:#fff;padding:2px 6px;letter-spacing:0.3px;}
.artist{font-size:13px;color:#737373;margin-top:8px;}
.title{font-size:14px;font-weight:600;color:#404040;}
.price{font-size:16px;font-weight:600;margin-top:4px;}
.price.sale{color:#bd2426;}
.orig{font-size:13px;color:#bfbfbf;text-decoration:line-through;margin-left:6px;}
.hero{background:#f7f7f7;margin:8px 24px 0;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;}
.herotext h2{font-size:22px;font-weight:600;margin:0 0 6px;}
.herotext p{font-size:14px;color:#737373;margin:0;}
.btn{background:#bd2426;color:#fff;font-size:14px;font-weight:600;padding:10px 20px;}
</style>
<div class="nav">
<div class="logo">Rough Trade UK</div>
<div class="navlinks"><div class="active">New Releases</div><div>Vinyl</div><div>Merch</div><div>Stores</div></div>
<div class="search">Search records...</div>
</div>
<div class="strip"><span class="curr">New This Week</span><span>Pre-Orders</span><span>Reissues</span><span>Bargain Bin</span></div>
<div class="hero">
<div class="herotext"><h2>A record shop that never stopped being a record shop.</h2><p>No mega-menu, no gradients — just the shelf.</p></div>
<div class="btn">Browse Bins</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#e8e0d8"><span class="badge" style="background:#62a1d8">Pre-Order</span></div><div class="artist">Talking Heads</div><div class="title">Remain in Light</div><div class="price">£24.99</div></div>
<div class="card"><div class="thumb" style="background:#d8e0e8"><span class="badge" style="background:#9bca3e">In Stock</span></div><div class="artist">New Order</div><div class="title">Power, Corruption & Lies</div><div class="price sale">£18.99<span class="orig">£26.99</span></div></div>
<div class="card"><div class="thumb" style="background:#e0d8e8"><span class="badge" style="background:#f68b1f">Limited</span></div><div class="artist">The Slits</div><div class="title">Cut (Coloured Vinyl)</div><div class="price">£29.99</div></div>
<div class="card"><div class="thumb" style="background:#e8d8d8"><span class="badge" style="background:#bd2426">Sale</span></div><div class="artist">Wire</div><div class="title">Pink Flag</div><div class="price sale">£14.99<span class="orig">£21.99</span></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #141414;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #141414;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #141414; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8b8b8b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #141414; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #f6f6f6; color: #141414;
border: 1px solid #141414; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f6f6f6; color: #141414;
border: 1px solid #bebebe; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8b8b8b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #006400; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f6f6f6; color:#141414; box-sizing:border-box;
font-family:'Instrument Sans',Inter,-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#f6f6f6; }
.brand { font-size:18px; font-weight:400; margin:0; font-family:'Instrument Serif',Georgia,serif; letter-spacing:-0.5px; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; color:#8b8b8b; }
.navlinks span.on { color:#141414; }
.util { font-size:13px; color:#8b8b8b; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 72px); }
.stage { padding:24px; border-right:1px solid #c8c8c8; display:flex; flex-direction:column; gap:10px; }
.panel { flex:1; position:relative; overflow:hidden; border-radius:8px; background:#ffffff; }
.panel::before { content:''; position:absolute; left:50%; bottom:10%; width:26%; height:64%; transform:translateX(-50%); background:linear-gradient(180deg,#1a1a1a,#141414); border-radius:6px 6px 3px 3px; }
.panel::after { content:''; position:absolute; left:50%; bottom:70%; width:14%; height:10%; transform:translateX(-50%); background:#006400; border-radius:2px; }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; background:#fff; border-radius:8px; }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:13px; font-weight:500; color:#8b8b8b; }
h1 { margin:0; font-size:28px; font-weight:400; font-family:'Instrument Serif',Georgia,serif; line-height:1.15; }
.badge { background:#006400; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:2px 8px; border-radius:2px; display:inline-block; width:fit-content; }
.rating { font-size:14px; color:#141414; }
.price { font-size:18px; font-weight:600; }
.desc { font-size:16px; font-family:'Instrument Serif',Georgia,serif; color:#545454; line-height:1.6; }
.ing-row { display:flex; gap:6px; flex-wrap:wrap; }
.ing { background:#f6f6f6; color:#545454; font-size:12px; border-radius:999px; padding:6px 14px; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#141414; color:#fff; border:none; border-radius:4px; font-size:15px; font-weight:600; }
.btn-secondary { width:160px; height:48px; background:#fff; border:1px solid #c8c8c8; color:#141414; border-radius:4px; font-size:15px; font-weight:600; }
</style></head>
<body>
<nav>
<p class="brand">Blu Atlas</p>
<div class="navlinks"><span class="on">Skincare</span><span>Haircare</span><span>Body</span><span>Sets</span></div>
<div class="util">Search Account Cart (0)</div>
</nav>
<main>
<div class="stage">
<div class="panel"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Face Serum</span>
<h1>Vitamin C Face Serum</h1>
<span class="badge">Best Seller</span>
<div class="rating">★★★★★ 4.8 (2,410)</div>
<div class="price">$59.00</div>
<p class="desc">A clinical concentration of vitamin C and hyaluronic acid brightens and hydrates without the sting — formulated for daily wear.</p>
<div class="ing-row"><span class="ing">Vitamin C</span><span class="ing">Hyaluronic Acid</span><span class="ing">Aloe Vera</span></div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">View Ingredients</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a1d23; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a1d23; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #929496; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #3464f4; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1d23; color: #3464f4;
border: 1px solid #3464f4; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a1d23; color: #f5f5f5;
border: 1px solid #3d4045; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929496; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1e2844; color: #3464f4;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>IGAWorks</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#373f49; box-sizing:border-box;
font-family:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #e5e7eb; background:#ffffff; }
.brand { font-size:20px; font-weight:900; letter-spacing:-0.5px; color:#1a1d23; margin:0; }
.navlinks { display:flex; gap:26px; font-size:14px; }
.navlinks span { color:#4f5864; }
.navlinks span.active { color:#1a1d23; font-weight:500; }
.cta-ink { background:#1a1d23; color:#ffffff; border:none; border-radius:12px;
height:38px; padding:0 20px; font-size:14px; font-weight:500; display:inline-flex; align-items:center;
white-space:nowrap; box-shadow:none; }
.hero { display:flex; align-items:flex-start; justify-content:space-between; gap:28px;
padding:28px 40px 20px; }
.hero-left { max-width:460px; }
.badge-red { display:inline-flex; align-items:center; background:rgba(239,67,67,0.1); color:#ef4343;
border-radius:9999px; padding:4px 12px; font-size:12px; font-weight:600; box-shadow:none; }
.hero h1 { font-size:44px; font-weight:900; line-height:1.1; color:#1a1d23; margin:12px 0 0; letter-spacing:-0.5px; }
.hero p { font-size:15px; line-height:1.5; color:#373f49; margin:12px 0 0; max-width:410px; }
.hero-cta-row { display:flex; align-items:center; gap:16px; margin-top:16px; }
.cta-outline { background:#ffffff; color:#1a1d23; border:1px solid #e5e7eb; border-radius:12px;
height:38px; padding:0 18px; font-size:14px; font-weight:500; display:inline-flex; align-items:center;
box-shadow:none; white-space:nowrap; }
.link-blue { color:#3464f4; font-size:14px; font-weight:500; }
.data-panel { width:330px; height:198px; background:#f2f5f8; border-radius:12px; padding:16px 18px;
box-shadow:none; flex-shrink:0; position:relative; }
.data-panel .row-top { display:flex; align-items:center; justify-content:space-between; }
.data-panel .label { font-size:11px; font-weight:600; letter-spacing:0.06em; color:#4f5864; text-transform:uppercase; }
.live-pill { background:rgba(23,207,99,0.12); color:#17cf63; border-radius:9999px; padding:3px 10px;
font-size:11px; font-weight:700; }
.stat { font-size:28px; font-weight:900; color:#1a1d23; margin-top:10px; }
.stat-caption { font-size:12px; color:#4f5864; margin-top:2px; }
.bars { display:flex; align-items:flex-end; gap:7px; height:66px; margin-top:14px; }
.bar { width:22px; border-radius:4px 4px 0 0; background:#1a1d23; }
.bar.now { background:#3464f4; }
.solutions { padding:20px 40px 24px; }
.sol-label { font-size:12px; font-weight:600; letter-spacing:0.06em; color:#4f5864; text-transform:uppercase;
margin:0 0 14px; }
.sol-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.sol-card { background:#ffffff; border:1px solid #e5e7eb; border-radius:12px; padding:18px;
box-shadow:none; display:flex; flex-direction:column; gap:8px; }
.sol-tag { font-size:11px; font-weight:600; letter-spacing:0.05em; color:#4f5864; text-transform:uppercase; }
.sol-card h3 { font-size:18px; font-weight:700; color:#1a1d23; margin:0; }
.sol-card p { font-size:13px; line-height:1.5; color:#373f49; margin:0; }
.sol-btn { align-self:flex-start; margin-top:auto; background:#ffffff; color:#1a1d23; border:1px solid #e5e7eb;
border-radius:12px; height:30px; padding:0 14px; font-size:13px; font-weight:500; box-shadow:none; }
.newsletter { background:#f4f4f6; border-top:1px solid #e5e7eb; padding:14px 40px;
display:flex; align-items:center; justify-content:space-between; }
.nl-left b { display:block; font-size:14px; font-weight:700; color:#1a1d23; }
.nl-left span { display:block; font-size:12px; color:#4f5864; margin-top:2px; }
.nl-right { display:flex; align-items:center; gap:10px; }
.nl-input { background:#ffffff; border:1px solid #e5e7eb; border-radius:8px; height:36px; padding:0 14px;
font-size:13px; color:#4f5864; width:190px; display:flex; align-items:center; box-shadow:none; }
.nl-btn { background:#3464f4; color:#ffffff; border:none; border-radius:8px; height:36px; padding:0 18px;
font-size:13px; font-weight:500; box-shadow:none; white-space:nowrap; }
.copyright { font-size:11px; color:#4f5864; margin-left:16px; }
</style></head>
<body>
<nav>
<p class="brand">IGAWorks</p>
<div class="navlinks">
<span class="active">Solution</span><span>Data</span><span>Culture</span><span>Blog</span>
</div>
<button class="cta-ink">Contact Us</button>
</nav>
<section class="hero">
<div class="hero-left">
<span class="badge-red">LIVE MARKET DATA</span>
<h1>Built on Data.<br>Driven by AI.</h1>
<p>The measurement and audience infrastructure behind 4,000+ global brands.</p>
<div class="hero-cta-row">
<button class="cta-outline">Explore Solutions</button>
<span class="link-blue">See the data →</span>
</div>
</div>
<div class="data-panel">
<div class="row-top">
<span class="label">Market Index</span>
<span class="live-pill">● Live</span>
</div>
<div class="stat">+184.6%</div>
<div class="stat-caption">YoY audience growth</div>
<div class="bars">
<div class="bar" style="height:26px"></div>
<div class="bar" style="height:38px"></div>
<div class="bar" style="height:32px"></div>
<div class="bar" style="height:48px"></div>
<div class="bar" style="height:40px"></div>
<div class="bar now" style="height:62px"></div>
</div>
</div>
</section>
<section class="solutions">
<p class="sol-label">Solutions by IGAWorks</p>
<div class="sol-grid">
<div class="sol-card">
<span class="sol-tag">Data Infrastructure</span>
<h3>Audience Analytics</h3>
<p>Independent measurement and attribution across the entire mobile funnel.</p>
<button class="sol-btn">View Solution</button>
</div>
<div class="sol-card">
<span class="sol-tag">AI Action & Creative</span>
<h3>AI Creative Studio</h3>
<p>Generate and test performance creative at scale, guided by live data.</p>
<button class="sol-btn">View Solution</button>
</div>
<div class="sol-card">
<span class="sol-tag">Media & Network</span>
<h3>Audience Network</h3>
<p>Reach verified, high-intent audiences across a trusted media network.</p>
<button class="sol-btn">View Solution</button>
</div>
</div>
</section>
<section class="newsletter">
<div class="nl-left">
<b>Get weekly insights.</b>
<span>Data and AI, every Monday.</span>
</div>
<div class="nl-right">
<span class="nl-input">[email protected]</span>
<button class="nl-btn">Subscribe</button>
<span class="copyright">© IGAWorks</span>
</div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #191919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #191919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 26px; font-weight: 400; line-height: 1.22; margin: 0; color: #191919; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.08em; background: #191919; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.08em; background: #ffffff; color: #191919;
border: 1px solid #191919; border-radius: 0px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: #ffffff; color: #191919;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.02em; background: #f5f5f5; color: #777777;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Georgia,'Times New Roman',serif; color:#191919; }
*{box-sizing:border-box;}
.nav{height:60px;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-family:Arial,sans-serif;}
.logo{font-size:18px;font-weight:500;letter-spacing:0.3px;}
.navlinks{display:flex;gap:24px;font-size:12px;color:#393939;}
.icon{font-size:12px;color:#393939;}
.hero{display:flex;padding:26px 32px 0;gap:36px;}
.herotext{width:300px;padding-top:24px;}
.herotext h1{font-size:44px;font-weight:400;line-height:1.1;letter-spacing:-0.5px;margin:0 0 14px;}
.herotext p{font-family:Arial,sans-serif;font-size:13px;color:#777777;margin:0 0 20px;line-height:1.5;}
.cta{display:inline-block;background:#191919;color:#fff;font-family:Arial,sans-serif;font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;padding:14px 24px;}
.heroimg{width:220px;height:270px;background:linear-gradient(160deg,#f5f5f5 0%,#dedede 60%,#191919 100%);position:relative;}
.hoop{position:absolute;top:50px;left:60px;width:70px;height:70px;border:6px solid #dedede;border-radius:50%;}
.chips{display:flex;gap:8px;padding:20px 32px 0;font-family:Arial,sans-serif;}
.chip{border:1px solid #dedede;border-radius:9999px;font-size:11px;letter-spacing:0.4px;text-transform:uppercase;padding:6px 14px;color:#393939;}
.chip.on{background:#191919;color:#fff;}
.grid{display:flex;gap:20px;padding:18px 32px 0;font-family:Arial,sans-serif;}
.card{width:150px;}
.thumb{width:150px;height:170px;background:#f5f5f5;}
.ptitle{font-size:13px;color:#191919;margin-top:8px;}
.pprice{font-size:13px;color:#393939;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:48px;background:#121212;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-family:Arial,sans-serif;font-size:11px;}
.footer span{margin-left:16px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Otiumberg</div>
<div class="navlinks"><div>Rings</div><div>Earrings</div><div>Necklaces</div><div>Bracelets</div><div>New In</div></div>
<div class="icon">Bag (0)</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Jewelry, worn daily.</h1>
<p>Solid gold and sterling silver, designed to layer and last.</p>
<div class="cta">Shop New In</div>
</div>
<div class="heroimg"><div class="hoop"></div></div>
</div>
<div class="chips">
<div class="chip on">All</div><div class="chip">Gold Vermeil</div><div class="chip">Sterling Silver</div><div class="chip">Solid Gold</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#dedede,#191919)"></div><div class="ptitle">Chunky Hoop Earrings</div><div class="pprice">£65</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#f5f5f5,#aaaaaa)"></div><div class="ptitle">Beaded Chain Necklace</div><div class="pprice">£95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#aaaaaa,#191919)"></div><div class="ptitle">Twist Band Ring</div><div class="pprice">£55</div></div>
</div>
<div class="footer"><span>© London, Made to Layer</span><span>Journal<span> Care Guide<span> About</span></span></span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #dedada; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #dedada; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #847c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #f48120; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #006fcf; color: #ffffff;
border: 1px solid #f48120; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #444444;
border: 1px solid #dedada; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #847c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f48120; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#dedada; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#231f20; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#dedada;border-bottom:1px solid #c4c0c0;}
.logo{font-size:22px;font-weight:700;color:#231f20;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:#444;}
.cart{position:relative;font-size:12px;font-weight:700;color:#231f20;}
.cart .dot{position:absolute;top:-8px;right:-14px;width:16px;height:16px;border-radius:9999px;background:#f48120;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;}
.seclabel{padding:16px 32px 12px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#231f20;}
.genrerow{display:flex;gap:10px;padding:0 32px 14px;}
.genre{font-size:12px;font-weight:600;text-transform:uppercase;color:#847c7c;padding:6px 4px;}
.genre.on{color:#006fcf;border-bottom:2px solid #006fcf;}
.grid{display:flex;flex-wrap:wrap;gap:14px;padding:0 32px;}
.card{width:200px;background:#fff;border-radius:8px;padding:10px;position:relative;}
.thumb{aspect-ratio:1/1;border-radius:4px;margin-bottom:8px;}
.ptitle{font-size:13px;font-weight:600;line-height:1.3;height:32px;overflow:hidden;}
.pprice{font-size:14px;font-weight:700;color:#231f20;margin-top:4px;}
.badge{position:absolute;top:8px;left:8px;background:#f48120;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 7px;border-radius:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#231f20;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#dedada;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Shake IT Records</div>
<div class="navlinks"><div>New Arrivals</div><div>Used Vinyl</div><div>Turntables</div><div>Store Events</div></div>
<div class="cart">CART<span class="dot">3</span></div>
</div>
<div class="seclabel">A Cincinnati Institution Since 1999</div>
<div class="genrerow">
<div class="genre on">All</div><div class="genre">Rock</div><div class="genre">Soul</div><div class="genre">Jazz</div><div class="genre">Hip-Hop</div><div class="genre">Local</div>
</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#f48120,#231f20)"></div><div class="ptitle">Riverfront Sessions LP</div><div class="pprice">$22.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#006fcf,#231f20)"></div><div class="ptitle">Queen City Soul Vol. 4</div><div class="pprice">$18.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#847c7c,#231f20)"></div><div class="ptitle">Used: Blue Note Classics</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#231f20,#f48120)"></div><div class="ptitle">MTP-100 Turntable</div><div class="pprice">$129.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e16f27,#231f20)"></div><div class="ptitle">Northside Live Bootleg</div><div class="pprice">$26.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#231f20,#006fcf)"></div><div class="ptitle">45 RPM Adapter Set</div><div class="pprice">$4.99</div></div>
</div>
<div class="footer"><span>Store Hours: 11–8 Daily</span><span>Sign up for restock alerts</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -0.1px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #1174dc; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #1174dc;
border: 1px solid #1174dc; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ff9900; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#111111; box-sizing:border-box;
font-family:'Segoe UI', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 30px;
border-bottom:1px solid #f2f2f2; }
.brand { font-size:17px; font-weight:700; margin:0; color:#111; font-family:Georgia, 'Times New Roman', serif; }
.navlinks { display:flex; gap:22px; }
.navlinks span { font-size:13px; color:#222; }
.cart { background:#1174dc; color:#fff; font-size:12px; font-weight:600; border-radius:6px; padding:8px 14px; }
main { display:flex; height:582px; }
.stage { width:340px; background:#eff5f8; display:flex; align-items:center; justify-content:center; position:relative; }
.desk2 { width:220px; height:130px; position:relative; }
.desktop2 { width:220px; height:12px; background:linear-gradient(180deg,#fff,#e7f0ff); border:1px solid #d0e1fe; border-radius:6px; }
.legw { position:absolute; top:12px; width:10px; height:90px; background:#78b5f5; border-radius:2px; }
.lw-l { left:16px; } .lw-r { right:16px; }
.hub { position:absolute; top:-8px; right:36px; width:30px; height:12px; background:#1174dc; border-radius:3px; }
.info { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:11px; }
.badges { display:flex; gap:8px; }
.badge { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; border-radius:4px; padding:3px 9px; color:#fff; }
.b-deal { background:#ff9900; } .b-stock { background:#1ab759; }
h1 { font-family:'Georgia', 'Times New Roman', serif; font-size:25px; font-weight:700; margin:0; }
.sub { font-size:13px; color:#4a4a4a; margin:0; max-width:440px; line-height:1.55; }
.spectable { font-family:'Consolas', 'Courier New', monospace; font-size:11px; color:#333; background:#f5f5f5;
border-radius:6px; padding:10px 12px; margin-top:4px; line-height:1.7; }
.spectable b { color:#1174dc; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-top:6px; }
.price { font-family:Georgia, serif; font-size:26px; font-weight:700; color:#111; }
.actions { display:flex; gap:10px; margin-top:4px; }
.btn-primary { background:#1174dc; color:#fff; border-radius:6px; height:46px; padding:0 26px; display:flex;
align-items:center; font-weight:600; font-size:13px; }
.btn-secondary { background:#fafafa; border:1px solid #d3d3d3; color:#111; border-radius:6px; height:46px;
padding:0 20px; display:flex; align-items:center; font-size:13px; font-weight:500; }
</style></head>
<body>
<nav>
<p class="brand">Autonomous AI</p>
<div class="navlinks"><span>Configurator</span><span>Desks</span><span>Accessories</span><span>Specs</span></div>
<span class="cart">Cart · 1</span>
</nav>
<main>
<div class="stage">
<div class="desk2"><div class="hub"></div><div class="desktop2"></div><div class="legw lw-l"></div><div class="legw lw-r"></div></div>
</div>
<div class="info">
<div class="badges"><span class="badge b-deal">Deal Ends 12:04:11</span><span class="badge b-stock">In Stock</span></div>
<h1>Configurable AI Standing Desk Pro</h1>
<p class="sub">Build your desk from motor lift range, top material, and integrated USB-C hub — configured to your workflow.</p>
<div class="spectable">Load Capacity: <b>275 kg</b><br>Height Range: <b>60–125 cm</b><br>Lift Speed: <b>38 mm/s</b><br>Hub: <b>USB-C · 100W PD</b></div>
<div class="price-row"><span class="price">$549</span></div>
<div class="actions">
<div class="btn-primary">Configure & Buy</div>
<div class="btn-secondary">Compare Models</div>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -0.25px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #686e77; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #112337; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #112337;
border: 1px solid #112337; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #686e77; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #112337; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,Helvetica,sans-serif; color:#32373c; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.topband{height:36px;background:#0a1c4c;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;}
.nav{height:56px;background:#112337;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:18px;font-weight:700;color:#fff;letter-spacing:-0.3px;}
.navlinks{display:flex;gap:20px;font-size:14px;color:#fff;}
.hero{height:220px;background:#112337;display:flex;align-items:center;padding:0 32px;gap:30px;}
.herotxt{max-width:400px;}
.h1{font-size:34px;font-weight:700;color:#fff;margin:0 0 8px;line-height:1.2;}
.sub{font-size:15px;color:#dedede;margin:0 0 16px;}
.btn{display:inline-block;background:#fff;color:#112337;font-size:15px;font-weight:700;letter-spacing:0.3px;padding:12px 24px;border-radius:4px;}
.photoframe{width:140px;height:170px;background:linear-gradient(160deg,#585e6a,#112337);border:4px solid #e6e6e6;position:relative;}
.grid{display:flex;gap:14px;padding:20px 32px 0;}
.card{width:150px;background:#fff;border:1px solid #c4c4c4;padding:8px;position:relative;}
.thumb{height:120px;background:linear-gradient(160deg,#e6e6e6,#112337);position:relative;}
.coa{position:absolute;top:6px;left:6px;background:#112337;color:#fff;font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:3px 6px;border:1px solid #0a1c4c;}
.ctitle{font-size:13px;font-weight:700;margin-top:8px;}
.provenance{font-size:11px;color:#686e77;}
.cprice{font-size:18px;font-weight:700;color:#112337;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#0a1c4c;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#c4c4c4;font-size:11px;}
</style>
<div class="wrap">
<div class="topband">Authenticated · Certificate of Authenticity Included</div>
<div class="nav">
<div class="logo">Moments IN Time</div>
<div class="navlinks"><span>Autographs</span><span>Jerseys</span><span>Photographs</span><span>Featured Athletes</span></div>
</div>
<div class="hero">
<div class="herotxt">
<div class="h1">Provenance, not promotion.</div>
<p class="sub">Signed memorabilia authenticated to a standard collectors can verify.</p>
<div class="btn">Shop Authenticated Items</div>
</div>
<div class="photoframe"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="coa">COA Included</span></div><div class="ctitle">Signed Rookie Jersey</div><div class="provenance">Team-issued · Grade 9.5</div><div class="cprice">$2,450</div></div>
<div class="card"><div class="thumb"><span class="coa">Authenticated</span></div><div class="ctitle">Signed Team Photograph</div><div class="provenance">1969 Championship</div><div class="cprice">$895</div></div>
<div class="card"><div class="thumb"></div><div class="ctitle">Single-Signed Baseball</div><div class="provenance">Hall of Fame Era</div><div class="cprice">$650</div></div>
</div>
<div class="footer"><span>Every piece independently authenticated</span><span>© Moments IN Time</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.35; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #606266; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; background: #409eff; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; background: #ffffff; color: #409eff;
border: 1px solid #409eff; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #303133;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #606266; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.2px; background: #67c23a; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#303133; box-sizing:border-box;
font-family:'MiSans', 'Helvetica Neue', Helvetica, Arial, -apple-system, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; border-bottom:1px solid #dcdfe6; }
.brand { font-size:16px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:500; color:#303133; }
.navlinks span:hover, .navlinks .active { color:#409eff; }
.navlinks .active { border-bottom:2px solid #409eff; padding-bottom:20px; margin-bottom:-21px; }
.searchbox { width:150px; height:32px; border:1px solid #dcdfe6; border-radius:4px; background:#f5f7fa; }
main { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.hero { flex:1 1 auto; background:#1a1a1a; color:#ffffff; display:flex; align-items:center; gap:26px;
padding:0 30px; min-height:0; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0;
background:linear-gradient(180deg, transparent 40%, rgba(64,158,255,0.12) 100%); }
.hero-copy { position:relative; flex:1; }
.hero-copy h1 { font-size:30px; font-weight:700; margin:0 0 8px; line-height:1.2; }
.hero-copy p { font-size:14px; color:#c0c4cc; margin:0 0 14px; max-width:320px; }
.hero-copy button { background:#409eff; color:#fff; border:none; border-radius:4px; padding:10px 22px; font-size:14px; font-weight:500; }
.printer { position:relative; flex:0 0 260px; height:180px; border-radius:4px;
background:linear-gradient(160deg,#3a3a3a,#101010 70%); border:1px solid #303133; }
.printer::after { content:''; position:absolute; left:18px; right:18px; top:18px; bottom:18px; border:1px solid rgba(64,158,255,0.5);
box-shadow:inset 0 0 30px rgba(64,158,255,0.15); }
.grid { flex:0 0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:16px 30px 18px; }
.card { border:1px solid #e4e7ed; border-radius:8px; padding:12px; display:flex; flex-direction:column; gap:4px; }
.card .thumb { aspect-ratio:1/1; border-radius:4px; margin-bottom:4px; }
.thumb.p1 { background:linear-gradient(150deg,#e4e7ed,#409eff 140%); }
.thumb.p2 { background:linear-gradient(150deg,#e4e7ed,#67c23a 140%); }
.thumb.p3 { background:linear-gradient(150deg,#e4e7ed,#e6a23c 140%); }
.card .name { font-size:16px; font-weight:600; margin:0; }
.card .price { font-size:22px; font-weight:700; margin:2px 0 0; }
.badge { display:inline-block; font-size:11px; font-weight:600; letter-spacing:0.2px; text-transform:uppercase;
padding:2px 6px; border-radius:2px; color:#fff; margin-bottom:2px; }
.badge.new { background:#67c23a; }
.badge.sale { background:#f56c6c; }
footer { flex:0 0 auto; height:52px; background:#1a1a1a; color:#c0c4cc; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Anycubic</p>
<div class="navlinks"><span class="active">Resin Printers</span><span>FDM Printers</span><span>Materials</span><span>Parts</span></div>
<div class="searchbox"></div>
</nav>
<main>
<div class="hero">
<div class="hero-copy">
<h1>For Freedom to Make.</h1>
<p>Precision resin printing with an 8K mono LCD and a print speed that keeps up with your ideas.</p>
<button>Shop the Photon Line</button>
</div>
<div class="printer"></div>
</div>
<div class="grid">
<div class="card"><span class="badge new">New</span><div class="thumb p1"></div>
<p class="name">Photon Mono M5s</p><p class="price">$399.00</p></div>
<div class="card"><div class="thumb p2"></div>
<p class="name">Kobra 3 Combo</p><p class="price">$329.00</p></div>
<div class="card"><span class="badge sale">Sale</span><div class="thumb p3"></div>
<p class="name">Wash & Cure 3.0</p><p class="price">$179.00</p></div>
</div>
</main>
<footer>
<span>© Anycubic</span>
<span>Support · Warranty · Community Forum</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.2px; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #6B6B6B; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.2px; background: #3D6957; color: #FFFFFF;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.2px; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #3D6957; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B6B6B; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #F5F2EC; color: #1A1A1A;
border-radius: 12px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#F5F2EC; color:#333333; font-family:'Graphik',Arial,sans-serif;
}
*, *::before, *::after { box-sizing:border-box; }
.wrap{ position:relative; width:960px; height:640px; }
.nav{ height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#F5F2EC; }
.logo{ font-size:20px; font-weight:300; letter-spacing:0.02em; color:#1a1a1a; }
.navlinks{ display:flex; gap:24px; }
.navlinks span{ font-size:12px; color:#3d3d3d; }
.navstrip{ height:36px; display:flex; align-items:center; gap:26px; padding:0 34px; background:#efece3; }
.navstrip span{ font-size:11px; letter-spacing:0.04em; color:#5a5a5a; }
.navstrip span.active{ color:#3D6957; border-bottom:2px solid #3D6957; padding-bottom:10px; }
.cta{ font-size:12px; font-weight:600; color:#ffffff; background:#3D6957; padding:9px 18px; border-radius:4px; }
.hero{ height:220px; display:flex; align-items:center; padding:0 34px; gap:28px; }
.hero-text{ width:400px; }
.kicker{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#3D6957; margin-bottom:12px; }
.h1{ font-size:30px; font-weight:300; line-height:1.2; color:#1a1a1a; margin-bottom:12px; }
.sub{ font-size:14px; line-height:1.55; color:#3d3d3d; max-width:340px; margin-bottom:18px; }
.btn{ font-size:13px; font-weight:600; color:#ffffff; background:#3D6957; padding:14px 26px; border-radius:4px; width:fit-content; }
.hero-visual{ flex:1; height:170px; position:relative; background:#efece3; border-radius:4px; }
.bottle{ position:absolute; left:200px; top:14px; width:70px; height:130px; border-radius:6px; background:linear-gradient(160deg,#3D6957,#1a1a1a); }
.bottle-label{ position:absolute; left:210px; top:50px; width:50px; height:36px; background:#F5F2EC; border-radius:2px; }
.chip{ position:absolute; right:30px; top:24px; background:#3D6957; color:#F5F2EC; font-size:9px; letter-spacing:0.06em; text-transform:uppercase; padding:5px 12px; border-radius:999px; }
.section-title{ padding:14px 34px 8px; font-size:15px; font-weight:600; color:#1a1a1a; }
.grid{ display:flex; gap:16px; padding:0 34px; }
.card{ width:200px; background:#ffffff; border:1px solid #e5e0d3; padding:12px; }
.card-img{ width:100%; height:74px; margin-bottom:8px; }
.card-title{ font-size:12px; font-weight:600; color:#1a1a1a; margin-bottom:2px; }
.card-note{ font-size:10px; color:#8a8580; margin-bottom:8px; }
.row{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-size:12px; font-weight:700; color:#1a1a1a; }
.tag{ font-size:9px; font-weight:600; text-transform:uppercase; color:#3D6957; background:#e5efe9; padding:3px 9px; border-radius:2px; }
.footer{ position:absolute; bottom:0; left:0; width:960px; height:48px; background:#efece3; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.footer span{ font-size:11px; color:#8a8580; }
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Hims</div>
<div class="navlinks">
<span>Log In</span>
</div>
<div class="cta">Get Started</div>
</div>
<div class="navstrip">
<span class="active">Hair</span>
<span>Skin</span>
<span>Sexual Health</span>
<span>Mental Health</span>
</div>
<div class="hero">
<div class="hero-text">
<div class="kicker">Designed for Someone Who Cares Already</div>
<div class="h1">Not urgent care. Just care.</div>
<div class="sub">Sage green and warm cream, unhurried spacing, and a tone closer to a men's magazine than a medication leaflet.</div>
<div class="btn">Start Free Visit</div>
</div>
<div class="hero-visual">
<div class="chip">Subscribe & Save</div>
<div class="bottle"></div>
<div class="bottle-label"></div>
</div>
</div>
<div class="section-title">Shop by Category</div>
<div class="grid">
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#3D6957,#c9c2b0);"></div>
<div class="card-title">Hair Loss Treatment</div>
<div class="card-note">Finasteride + Minoxidil</div>
<div class="row"><span class="price">$29/mo</span><span class="tag">Rx</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#1a1a1a,#3D6957);"></div>
<div class="card-title">Daily Skincare Set</div>
<div class="card-note">Cleanser + Moisturizer</div>
<div class="row"><span class="price">$35/mo</span><span class="tag">Non-Rx</span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#c9c2b0,#3D6957);"></div>
<div class="card-title">ED Treatment</div>
<div class="card-note">Provider Consult</div>
<div class="row"><span class="price">$2/dose</span><span class="tag">Rx</span></div>
</div>
</div>
<div class="footer">
<span>© Hims</span>
<span>Privacy · Providers · Support</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a1a1a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a1a1a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #929292; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #242424; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a1a1a; color: #ffffff;
border: 1px solid #242424; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a1a1a; color: #f5f5f5;
border: 1px solid #3d3d3d; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #929292; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1c1c1c; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1A1A1A; color:#F5F5F5; box-sizing:border-box;
font-family:"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; font-variant-numeric: tabular-nums; }
.hdr { padding:22px 34px 0; display:flex; align-items:center; }
.wtitle { font-size:26px; font-weight:800; }
.finish { margin-left:auto; background:#2F80ED; color:#fff; font-size:13px; font-weight:700; padding:8px 16px; border-radius:8px; }
.stats-row { display:flex; gap:10px; padding:14px 34px 0; }
.pill { background:#2E2E2E; border-radius:7px; padding:5px 10px; font-size:12px; }
.pill span { color:#9A9A9A; font-weight:600; } .pill b { color:#2F80ED; font-weight:700; }
hr.hdr-div { border:none; border-top:1px solid #333333; margin:16px 0 0; }
.card { margin:14px 34px 0; background:#242424; border-radius:14px; padding:14px; }
.ex-hdr { display:flex; align-items:center; gap:10px; }
.thumb { width:34px; height:34px; border-radius:9px; background:#383838; color:#2F80ED; display:flex; align-items:center; justify-content:center; font-size:14px; }
.ex-name { color:#2F80ED; font-size:18px; font-weight:700; }
.cols { display:grid; grid-template-columns:36px 1fr 1fr 1fr 30px; gap:6px; padding:10px 0 4px; font-size:11px; font-weight:700; text-transform:uppercase; color:#9A9A9A; }
.set-row { display:grid; grid-template-columns:36px 1fr 1fr 1fr 30px; gap:6px; align-items:center; padding:6px 0; }
.idx { font-size:14px; font-weight:700; color:#9A9A9A; }
.prev { font-size:12px; color:#636363; }
.cell { height:34px; border-radius:7px; background:#2E2E2E; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; }
.check { width:24px; height:24px; border-radius:6px; border:1.5px solid #333333; }
.check.on { background:#27AE60; border:none; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; }
.set-row.done .cell { background:rgba(39,174,96,0.18); }
.addset { margin-top:8px; height:34px; border-radius:8px; background:#2E2E2E; color:#2F80ED; font-size:13px; font-weight:700;
display:flex; align-items:center; justify-content:center; }
.pr-flag { margin:12px 34px 0; background:rgba(242,201,76,0.18); color:#F2C94C; font-size:10px; font-weight:800;
text-transform:uppercase; padding:6px 12px; border-radius:8px; display:inline-block; }
</style></head>
<body>
<div class="hdr"><div class="wtitle">Push Day</div><div class="finish">Finish</div></div>
<div class="stats-row">
<div class="pill"><span>Time</span> <b>42:18</b></div>
<div class="pill"><span>Volume</span> <b>8,420 kg</b></div>
<div class="pill"><span>Sets</span> <b>14</b></div>
<div class="pill"><span>App</span> <b>Strong (iOS)</b></div>
</div>
<hr class="hdr-div">
<div class="card">
<div class="ex-hdr"><div class="thumb">🏋</div><div class="ex-name">Bench Press</div></div>
<div class="cols"><div>Set</div><div>Previous</div><div>kg</div><div>Reps</div><div></div></div>
<div class="set-row done"><div class="idx">1</div><div class="prev">95 × 5</div><div class="cell">100</div><div class="cell">5</div><div class="check on">✓</div></div>
<div class="set-row done"><div class="idx">2</div><div class="prev">95 × 5</div><div class="cell">100</div><div class="cell">5</div><div class="check on">✓</div></div>
<div class="set-row"><div class="idx">3</div><div class="prev">95 × 5</div><div class="cell">100</div><div class="cell">4</div><div class="check"></div></div>
<div class="addset">+ Add Set</div>
</div>
<div class="pr-flag">▲ PR · Est. 1RM 117 kg</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f4; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f4; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #4e4b66; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #1863dc; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #f4f4f4; color: #1863dc;
border: 1px solid #1863dc; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f4f4f4; color: #212121;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4e4b66; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #00d084; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f4f4; color:#2f2f2f; box-sizing:border-box;
font-family:'Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; background:#1863dc; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:20px; font-weight:700; color:#fff; }
.navlinks { display:flex; gap:20px; font-size:15px; font-weight:500; color:#fff; }
.navlinks span.active { border-bottom:2px solid #fff; padding-bottom:6px; }
.search-pill { width:180px; height:36px; border-radius:9999px; background:#f4f4f4; font-size:12px; color:#4e4b66;
display:flex; align-items:center; padding:0 16px; }
.catstrip { display:flex; gap:22px; padding:12px 36px; font-size:14px; font-weight:500; }
.catstrip span.active { color:#1863dc; border-bottom:2px solid #1863dc; padding-bottom:6px; }
.catstrip span:not(.active) { color:#4e4b66; }
.hero { height:150px; background:#eeeeee; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.hero h1 { font-size:28px; font-weight:700; color:#212121; margin:0 0 8px; max-width:400px; }
.hero p { font-size:14px; color:#4e4b66; margin:0; }
.plush { display:flex; gap:14px; }
.bear { width:60px; height:70px; border-radius:50% 50% 45% 45%; background:#eebf8e; position:relative; }
.bear::before, .bear::after { content:''; position:absolute; top:-10px; width:20px; height:20px; border-radius:50%; background:#eebf8e; }
.bear::before { left:2px; } .bear::after { right:2px; }
.grid { display:flex; gap:16px; padding:16px 36px 0; }
.card { flex:1; background:#ffffff; border-radius:12px; padding:12px; position:relative; }
.card .imgbox { height:90px; background:#eeeeee; border-radius:8px; margin-bottom:8px; }
.card .name { font-size:16px; font-weight:600; margin-bottom:4px; }
.card .price { font-size:15px; color:#212121; margin-bottom:6px; }
.cuddle { display:flex; gap:4px; }
.cd { width:12px; height:12px; border-radius:50%; background:#d8d8d8; }
.cd.fill { background:#1863dc; }
.badge { position:absolute; top:8px; left:8px; font-size:11px; font-weight:700; color:#fff; padding:2px 8px; border-radius:4px; text-transform:uppercase; }
.badge.new { background:#00d084; }
.badge.sale { background:#cd2653; }
footer { position:absolute; bottom:0; left:0; right:0; height:96px; background:#212121; color:#fff; display:flex;
align-items:center; justify-content:space-between; padding:0 36px; }
footer .col { font-size:12px; line-height:1.9; }
footer .col b { display:block; margin-bottom:3px; }
.wrap { position:relative; height:640px; }
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="brand">Douglas</div>
<div class="navlinks"><span class="active">Bears</span><span>Bunnies</span><span>Dogs</span><span>Cats</span></div>
<div class="search-pill">Search plush...</div>
</nav>
<div class="catstrip"><span class="active">All</span><span>Best Sellers</span><span>New Arrivals</span></div>
<div class="hero">
<div>
<h1>Soft friends, built to be loved forever.</h1>
<p>Plush bears, bunnies, and dogs rated on our own Cuddle Scale.</p>
</div>
<div class="plush"><div class="bear"></div><div class="bear" style="background:#d8c9b0;"></div></div>
</div>
<div class="grid">
<div class="card"><span class="badge new">New</span><div class="imgbox"></div><div class="name">Marlowe the Bear</div><div class="price">$34.00</div><div class="cuddle"><div class="cd fill"></div><div class="cd fill"></div><div class="cd fill"></div><div class="cd fill"></div><div class="cd"></div></div></div>
<div class="card"><span class="badge sale">Sale</span><div class="imgbox"></div><div class="name">Clementine Bunny</div><div class="price">$28.00</div><div class="cuddle"><div class="cd fill"></div><div class="cd fill"></div><div class="cd fill"></div><div class="cd"></div><div class="cd"></div></div></div>
<div class="card"><div class="imgbox"></div><div class="name">Biscuit the Pup</div><div class="price">$26.00</div><div class="cuddle"><div class="cd fill"></div><div class="cd fill"></div><div class="cd fill"></div><div class="cd fill"></div><div class="cd fill"></div></div></div>
<div class="card"><div class="imgbox"></div><div class="name">Juniper the Cat</div><div class="price">$24.00</div><div class="cuddle"><div class="cd fill"></div><div class="cd fill"></div><div class="cd"></div><div class="cd"></div><div class="cd"></div></div></div>
</div>
<footer>
<div class="col"><b>About</b>Our Story<br>Materials</div>
<div class="col"><b>Customer Service</b>Shipping<br>Returns</div>
<div class="col"><b>Douglas</b>Trusted since childhood.</div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #4e2a2a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #fac832; color: #121212;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #ffffff; color: #121212;
border: 1px solid #fac832; border-radius: 9999px;
padding: 14px 32px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #bdbdbd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #4e2a2a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fac832; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f6f6f6; color:#121212; font-family:'Instrument Sans','Inter',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:64px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:'Courier New',monospace;font-size:19px;font-weight:700;color:#fac832;letter-spacing:0.5px;}
.navlinks{display:flex;gap:22px;font-size:13px;color:#f6f6f6;}
.navcta{background:#fac832;color:#121212;font-size:13px;font-weight:700;padding:10px 20px;border-radius:9999px;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;background:#1e1e1e;}
.htext{width:430px;}
.htext h1{font-family:'Courier New',monospace;font-size:28px;font-weight:700;color:#fff;line-height:1.3;margin:0 0 14px;}
.htext p{font-size:14px;color:#bbbbbb;margin:0 0 20px;max-width:380px;}
.btn{display:inline-block;background:#fac832;color:#121212;font-size:14px;font-weight:700;padding:14px 30px;border-radius:9999px;}
.kb{position:absolute;right:76px;top:60px;width:230px;height:150px;background:#121212;border-radius:12px;padding:14px;display:grid;grid-template-columns:repeat(8,1fr);grid-gap:5px;border:1px solid #333333;}
.key{background:#2c2c2c;border-radius:3px;height:18px;}
.key.hl{background:#899df1;}
.key.hl2{background:#fac832;}
.sec{padding:24px 40px 0;}
.sectitle{font-family:'Courier New',monospace;font-size:16px;font-weight:700;margin-bottom:16px;}
.filterrow{display:flex;gap:8px;margin-bottom:14px;}
.chip{background:#fff;border:1px solid #dddddd;border-radius:9999px;padding:5px 14px;font-size:12px;}
.chip.active{background:#899df1;color:#fff;border-color:#899df1;}
.grid{display:flex;gap:16px;}
.card{width:216px;background:#fff;border-radius:12px;padding:14px;position:relative;}
.badge{position:absolute;top:10px;left:10px;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 9px;border-radius:9999px;color:#121212;}
.b-new{background:#fac832;}
.b-sale{background:#d32f2f;color:#fff;}
.thumb{width:100%;height:96px;border-radius:8px;margin:18px 0 10px;}
.cardtitle{font-size:14px;font-weight:600;}
.cardprice{font-size:13px;color:#121212;margin-top:4px;font-weight:700;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#999999;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Melgeek</div>
<div class="navlinks"><span>Keyboards</span><span>Kits</span><span>Keycaps</span></div>
<div class="navcta">Shop Now</div>
</div>
<div class="hero">
<div class="htext">
<h1>Built by people who actually build things.</h1>
<p>Custom mechanical keyboards for a workshop-meets-webstore kind of typist.</p>
<div class="btn">Browse Boards</div>
</div>
<div class="kb">
<div class="key"></div><div class="key"></div><div class="key hl"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
<div class="key"></div><div class="key hl2"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key hl"></div><div class="key"></div>
<div class="key"></div><div class="key"></div><div class="key"></div><div class="key hl2"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
</div>
</div>
<div class="sec">
<div class="sectitle">Shop Keyboards</div>
<div class="filterrow"><div class="chip active">All</div><div class="chip">75%</div><div class="chip">TKL</div><div class="chip">Full Size</div></div>
<div class="grid">
<div class="card"><span class="badge b-new">New</span><div class="thumb" style="background:linear-gradient(135deg,#fac832,#121212);"></div><div class="cardtitle">Mojo68 Keyboard Kit</div><div class="cardprice">$189.00</div></div>
<div class="card"><span class="badge b-sale">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#899df1,#121212);"></div><div class="cardtitle">Modern Pixel Pro</div><div class="cardprice">$219.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d32f2f,#121212);"></div><div class="cardtitle">Venus V2 Full Size</div><div class="cardprice">$259.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1e1e1e,#899df1);"></div><div class="cardtitle">M87 Keycap Set</div><div class="cardprice">$79.00</div></div>
</div>
</div>
<div class="footer"><span>© Workshop-Grade Keyboards</span><span>Group Buys · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #575b61;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #575b61;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #575b61; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #979797; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: #f1ce00; color: #575b61;
border: none; border-radius: 2px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; background: #227730; color: #ffffff;
border: 1px solid #227730; border-radius: 2px;
padding: 14px 32px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #575b61;
border: 1px solid #d5d6d8; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #979797; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #b1c823; color: #575b61;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body{width:960px;height:640px;margin:0;padding:0;overflow:hidden;box-sizing:border-box;background:#ffffff;font-family:Roboto,Arial,sans-serif;color:#575b61;}
*{box-sizing:border-box;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#227730;}
.logo{font-family:'Husqvarna Gothic',Montserrat,Arial,sans-serif;font-size:20px;font-weight:700;letter-spacing:-0.3px;color:#ffffff;}
.navlinks{display:flex;gap:24px;font-family:Montserrat,Arial,sans-serif;font-size:13px;font-weight:600;color:#ffffff;}
.cta-nav{padding:8px 18px;background:#f1ce00;color:#575b61;font-size:12px;font-weight:700;border-radius:2px;}
.hero{height:256px;display:flex;padding:30px 40px;gap:34px;background:#f4f4f4;}
.hero-text{width:400px;display:flex;flex-direction:column;justify-content:center;}
.eyebrow{display:inline-block;background:#b1c823;color:#2a2d32;font-size:11px;font-weight:700;padding:5px 12px;border-radius:2px;margin-bottom:14px;width:fit-content;text-transform:uppercase;letter-spacing:0.4px;}
.headline{font-family:'Husqvarna Gothic',Montserrat,Arial,sans-serif;font-size:32px;font-weight:700;letter-spacing:-0.3px;line-height:1.18;color:#2a2d32;margin-bottom:12px;}
.sub{font-size:14px;color:#575b61;line-height:1.5;width:365px;margin-bottom:18px;}
.cta{display:inline-block;padding:13px 28px;background:#f1ce00;color:#575b61;border-radius:2px;font-size:13px;font-weight:700;}
.hero-visual{flex:1;position:relative;}
.mower{position:absolute;left:40px;bottom:24px;width:180px;height:60px;border-radius:6px;background:linear-gradient(160deg,#227730,#1a5a24);}
.mower-wheel1{position:absolute;left:56px;bottom:14px;width:24px;height:24px;border-radius:12px;background:#2a2d32;}
.mower-wheel2{position:absolute;left:180px;bottom:14px;width:24px;height:24px;border-radius:12px;background:#2a2d32;}
.mower-handle{position:absolute;left:170px;bottom:64px;width:6px;height:56px;background:#575b61;transform:rotate(20deg);}
.grasspatch{position:absolute;left:0;right:0;bottom:0;height:14px;background:#8fbb93;}
.sun{position:absolute;right:60px;top:22px;width:44px;height:44px;border-radius:22px;background:#f1ce00;}
.section{padding:22px 40px 0 40px;display:flex;justify-content:space-between;align-items:baseline;}
.section-title{font-family:'Husqvarna Gothic',Montserrat,Arial,sans-serif;font-size:22px;font-weight:700;color:#2a2d32;}
.section-link{font-size:12px;font-weight:600;color:#227730;}
.grid{display:flex;gap:24px;padding:14px 40px 0 40px;}
.card{width:204px;background:#ffffff;border:1px solid #d0d0d0;border-radius:2px;overflow:hidden;}
.swatch{height:100px;background:#f4f4f4;position:relative;}
.badge{position:absolute;left:8px;top:8px;background:#d87d2b;color:#fff;font-size:9px;font-weight:700;padding:3px 8px;border-radius:2px;text-transform:uppercase;}
.badge.lime{background:#b1c823;color:#2a2d32;}
.card-body{padding:11px 13px 14px 13px;}
.card-title{font-size:14px;font-weight:600;color:#2a2d32;margin-bottom:6px;}
.card-price{font-family:'Husqvarna Gothic',Montserrat,Arial,sans-serif;font-size:16px;font-weight:700;color:#2a2d32;}
</style>
<div class="nav">
<div class="logo">Husqvarna</div>
<div class="navlinks"><span>Mowers</span><span>Chainsaws</span><span>Automower</span><span>Dealer Locator</span></div>
<div class="cta-nav">Find a Dealer</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="eyebrow">Since 1689 · Swedish Engineering</div>
<div class="headline">Built for the yard.<br/>Trusted by pros.</div>
<div class="sub">Chainsaws, mowers and robotic Automower lines engineered for precision cutting decks and long-term reliability.</div>
<div class="cta">Shop Equipment</div>
</div>
<div class="hero-visual">
<div class="sun"></div>
<div class="mower"></div>
<div class="mower-wheel1"></div>
<div class="mower-wheel2"></div>
<div class="mower-handle"></div>
<div class="grasspatch"></div>
</div>
</div>
<div class="section"><div class="section-title">Featured Equipment</div><div class="section-link">Shop all</div></div>
<div class="grid">
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#227730,#1a5a24);"><div class="badge">Sale</div></div>
<div class="card-body"><div class="card-title">Automower 315X</div><div class="card-price">$2,199.00</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#575b61,#2a2d32);"></div>
<div class="card-body"><div class="card-title">545 Mark II Chainsaw</div><div class="card-price">$549.00</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#b1c823,#227730);"><div class="badge lime">Battery</div></div>
<div class="card-body"><div class="card-title">120i Cordless Trimmer</div><div class="card-price">$229.00</div></div>
</div>
<div class="card">
<div class="swatch" style="background:linear-gradient(135deg,#227730,#5b9d4d);"></div>
<div class="card-body"><div class="card-title">TS 138 Lawn Tractor</div><div class="card-price">$3,199.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #05141f; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #05141f; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #899095; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #697278; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #05141f; color: #697278;
border: 1px solid #697278; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #05141f; color: #f5f5f5;
border: 1px solid #2b3841; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #899095; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #15232d; color: #697278;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#05141f; box-sizing:border-box;
font-family: Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
.topnav { width:960px; height:60px; background:#05141f; display:flex; align-items:center;
justify-content:space-between; padding:0 32px; }
.brand { color:#ffffff; font-size:18px; font-weight:700; letter-spacing:0.4px; }
.navlinks { display:flex; gap:26px; }
.navlinks span { color:#ffffff; font-size:14px; font-weight:400; opacity:0.82; }
.stage { width:960px; height:580px; display:flex; }
.photo { width:560px; height:580px; position:relative; overflow:hidden;
background: radial-gradient(120% 100% at 20% 0%, #12324a 0%, #05141f 55%, #010e18 100%); }
.road { position:absolute; left:0; right:0; bottom:0; height:210px;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.04) 100%); }
.roadline { position:absolute; left:-40px; bottom:60px; width:640px; height:2px; background:rgba(255,255,255,0.12);
transform:rotate(-2deg); }
.car-body { position:absolute; left:60px; bottom:96px; width:420px; height:78px; border-radius:38px;
background:linear-gradient(180deg,#37444d,#1c2a33); }
.car-cabin { position:absolute; left:150px; bottom:150px; width:210px; height:58px;
clip-path: polygon(8% 100%, 20% 0%, 80% 0%, 92% 100%);
background:linear-gradient(180deg,#3d4a53,#232f38); }
.car-glass { position:absolute; left:168px; bottom:158px; width:174px; height:36px;
clip-path: polygon(10% 100%, 22% 0%, 78% 0%, 90% 100%);
background:linear-gradient(120deg, rgba(120,180,210,0.55), rgba(20,30,38,0.5)); }
.wheel { position:absolute; bottom:78px; width:64px; height:64px; border-radius:50%;
background:radial-gradient(circle at 35% 35%, #4b5960, #05141f 70%); border:3px solid #0d1c26; }
.wheel.w1 { left:100px; } .wheel.w2 { left:380px; }
.badge { position:absolute; top:28px; left:32px; background:#f8f8f8; color:#05141f;
font-size:14px; font-weight:400; padding:6px 16px; }
.hero-title { position:absolute; left:32px; bottom:118px; color:#ffffff; font-size:42px;
font-weight:700; line-height:1.2; max-width:460px; }
.hero-sub { position:absolute; left:32px; bottom:88px; color:#c6ccd0; font-size:14px; font-weight:400;
max-width:420px; }
.panel { width:400px; height:580px; padding:28px 32px; display:flex; flex-direction:column;
background:#ffffff; }
.tabs { display:flex; gap:22px; border-bottom:1px solid #dadce0; padding-bottom:12px; margin-bottom:20px; }
.tab { font-size:16px; font-weight:700; color:#697278; padding-bottom:12px; position:relative; }
.tab.active { color:#05141f; }
.tab.active::after { content:""; position:absolute; left:0; right:0; bottom:-13px; height:2px; background:#05141f; }
.veh-name { font-size:26px; font-weight:700; margin:0 0 4px; }
.veh-cat { font-size:14px; font-weight:400; color:#697278; margin:0 0 20px; }
.specs { display:flex; flex-direction:column; }
.spec-row { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid #dadce0;
font-size:14px; }
.spec-row .k { color:#697278; font-weight:400; }
.spec-row .v { color:#05141f; font-weight:700; }
.price-row { display:flex; justify-content:space-between; align-items:baseline; margin:18px 0 20px; }
.price-label { font-size:13px; color:#697278; font-weight:400; }
.price-value { font-size:24px; color:#05141f; font-weight:700; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn { flex:1; height:48px; display:flex; align-items:center; justify-content:center;
font-size:14px; font-weight:700; border-radius:0px; }
.btn-primary { background:#05141f; color:#ffffff; border:1px solid #05141f; }
.btn-secondary { background:#ffffff; color:#05141f; border:1px solid #05141f; }
.card-note { margin-top:14px; display:flex; gap:8px; }
.swatch { width:18px; height:18px; border-radius:15px; border:1px solid #dadce0; }
.swatch.s1 { background:#05141f; } .swatch.s2 { background:#ffffff; } .swatch.s3 { background:#dadce0; }
.swatch-label { font-size:12px; color:#697278; align-self:center; }
</style></head>
<body>
<div class="topnav">
<div class="brand">Kia</div>
<div class="navlinks"><span>Vehicles</span><span>Purchase</span><span>Experience</span><span>Support</span></div>
</div>
<div class="stage">
<div class="photo">
<div class="road"></div>
<div class="roadline"></div>
<div class="car-body"></div>
<div class="wheel w1"></div>
<div class="wheel w2"></div>
<div class="car-cabin"></div>
<div class="car-glass"></div>
<div class="badge">Electric SUV</div>
<div class="hero-title">The 2026 Vantis EV</div>
<div class="hero-sub">Movement that inspires — long-range architecture with a 480km rated range.</div>
</div>
<div class="panel">
<div class="tabs">
<div class="tab active">Features</div>
<div class="tab">Specs</div>
<div class="tab">Gallery</div>
<div class="tab">Compare</div>
</div>
<div class="veh-name">Vantis EV</div>
<div class="veh-cat">Electric · All-wheel drive · 5 seats</div>
<div class="specs">
<div class="spec-row"><span class="k">Range</span><span class="v">480 km</span></div>
<div class="spec-row"><span class="k">0–100 km/h</span><span class="v">5.2 sec</span></div>
<div class="spec-row"><span class="k">Battery</span><span class="v">84 kWh</span></div>
<div class="spec-row"><span class="k">Charging (10–80%)</span><span class="v">18 min</span></div>
</div>
<div class="price-row">
<span class="price-label">Starting from</span>
<span class="price-value">₩58,900,000</span>
</div>
<div class="card-note">
<div class="swatch s1"></div><div class="swatch s2"></div><div class="swatch s3"></div>
<span class="swatch-label">3 exterior colors available</span>
</div>
<div class="btn-row">
<div class="btn btn-primary">Get a Quote</div>
<div class="btn btn-secondary">Book Test Drive</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9f5ec; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9f5ec; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 26px; font-weight: 400; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #7d7472; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.1em; background: #012e36; color: #f9f5ec;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.1em; background: transparent; color: #012e36;
border: 1px solid #012e36; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9f5ec; color: #121212;
border: 1px solid #dedede; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7d7472; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.12em; background: #e93f2c; color: #f9f5ec;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9f5ec; font-family:'Cormorant',Georgia,serif; color:#121212; }
*{box-sizing:border-box;}
.announce{height:32px;background:#012e36;color:#f9f5ec;display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif;font-size:11px;letter-spacing:0.3px;}
.nav{height:56px;background:#012e36;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{color:#f9f5ec;font-size:20px;letter-spacing:1px;}
.navlinks{display:flex;gap:24px;font-family:Arial,sans-serif;font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:#f9f5ec;}
.hero{display:flex;height:280px;}
.heroL{width:50%;background:#f0e6d9;display:flex;flex-direction:column;justify-content:center;padding:0 44px;}
.heroL .script{font-family:'Brush Script MT',cursive;font-size:22px;color:#012e36;margin-bottom:8px;}
.heroL h1{font-size:44px;font-weight:300;line-height:1.15;margin:0 0 14px;}
.btn{display:inline-block;background:transparent;border:1px solid #012e36;color:#012e36;font-family:Arial,sans-serif;font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;padding:12px 26px;width:fit-content;}
.heroR{width:50%;background:linear-gradient(150deg,#e0c9a0,#623529 70%);position:relative;}
.heroR:before{content:'';position:absolute;left:45%;top:35%;width:60px;height:60px;border-radius:50%;border:5px solid rgba(255,255,255,0.6);}
.sec{padding:20px 40px 0;}
.sectitle{font-family:Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#121212;margin-bottom:14px;}
.grid{display:flex;gap:20px;}
.card{width:200px;}
.thumb{aspect-ratio:3/4;background:#f0e6d9;margin-bottom:8px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#e93f2c;color:#f9f5ec;font-family:Arial,sans-serif;font-size:10px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;padding:3px 8px;}
.ptitle{font-family:Arial,sans-serif;font-size:13px;color:#121212;}
.pmat{font-family:Arial,sans-serif;font-size:11px;color:#7d7472;letter-spacing:0.3px;margin:2px 0;}
.pprice{font-family:Arial,sans-serif;font-size:13px;color:#393939;}
.footer{position:absolute;bottom:0;left:0;right:0;height:34px;background:#012e36;color:rgba(249,245,236,0.7);display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-family:Arial,sans-serif;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="announce">FREE SHIPPING ON ORDERS OVER $150</div>
<div class="nav">
<div class="logo">Kinn Studio</div>
<div class="navlinks"><div>Necklaces</div><div>Rings</div><div>Earrings</div><div>Bracelets</div></div>
</div>
<div class="hero">
<div class="heroL">
<div class="script">Everyday Gold</div>
<h1>Modern legacy —<br>then, now, always.</h1>
<div class="btn">Shop New Arrivals</div>
</div>
<div class="heroR"></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#f0e6d9,#e0c9a0)"><div class="badge">Sale</div></div><div class="ptitle">Cuban Link Chain</div><div class="pmat">14K Gold Vermeil</div><div class="pprice">$128</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e8e0d3,#c9b48a)"></div><div class="ptitle">Signet Ring</div><div class="pmat">Sterling Silver</div><div class="pprice">$88</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#f0e6d9,#a88a5a)"></div><div class="ptitle">Huggie Hoops</div><div class="pmat">Rose Gold Vermeil</div><div class="pprice">$68</div></div>
</div>
</div>
<div class="footer"><span>Materials · Care Guide</span><span>Gift Cards · Returns</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #e31837; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #e31837;
border: 1px solid #e31837; border-radius: 9999px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #e0e0e0; border-radius: 20px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 800; line-height: 1.2; letter-spacing: 0.5px; background: #f9c31f; color: #1a1a1a;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Nunito,'Poppins',-apple-system,sans-serif; background:#ffffff; color:#3d3d3d; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:20px;font-weight:800;color:#e31837;}
.navlinks{display:flex;gap:20px;font-size:15px;font-weight:600;color:#1a1a1a;}
.hero{height:220px;display:flex;align-items:center;background:#f5f5f5;padding:0 32px;}
.herotext{width:420px;}
.herotext h1{font-size:32px;font-weight:800;color:#1a1a1a;margin:0 0 10px;letter-spacing:-0.4px;line-height:1.2;}
.herotext p{font-size:16px;color:#3d3d3d;margin:0 0 16px;max-width:320px;}
.cta{display:inline-block;background:#e31837;color:#fff;font-size:16px;font-weight:700;padding:14px 28px;border-radius:9999px;}
.toybar{display:flex;gap:10px;margin-left:auto;}
.toy{width:70px;height:150px;border-radius:20px;}
.section{padding:18px 32px 0;}
.sectitle{font-size:18px;font-weight:700;color:#1a1a1a;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:150px;background:#fff;border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,0.07);padding:10px;position:relative;}
.age{position:absolute;top:8px;left:8px;font-size:10px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;border-radius:9999px;padding:3px 9px;}
.thumb{aspect-ratio:1/1;border-radius:12px;margin-bottom:20px;}
.pname{font-size:14px;font-weight:600;color:#1a1a1a;}
.pprice{font-size:16px;font-weight:700;color:#1a1a1a;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#1a1a1a;color:#fff;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Lamaze</div>
<div class="navlinks"><div>Rattles</div><div>Teethers</div><div>Soft Books</div><div>Activity Centers</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Bright color. Built for tiny hands.</h1>
<p>Developmental toys engineered to stimulate, one crinkle at a time.</p>
<div class="cta">Shop Toys</div>
</div>
<div class="toybar">
<div class="toy" style="background:linear-gradient(160deg,#f9c31f,#e31837)"></div>
<div class="toy" style="background:linear-gradient(160deg,#0072bc,#00a651)"></div>
</div>
</div>
<div class="section">
<div class="sectitle">Shop by Age</div>
<div class="grid">
<div class="card"><div class="age" style="background:#f9c31f;color:#1a1a1a">0-6mo</div><div class="thumb" style="background:linear-gradient(135deg,#f9c31f,#e31837)"></div><div class="pname">Freddie the Firefly</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="age" style="background:#0072bc;color:#fff">6-12mo</div><div class="thumb" style="background:linear-gradient(135deg,#0072bc,#f9c31f)"></div><div class="pname">Peekaboo Forest</div><div class="pprice">$18.99</div></div>
<div class="card"><div class="age" style="background:#00a651;color:#fff">12mo+</div><div class="thumb" style="background:linear-gradient(135deg,#00a651,#e31837)"></div><div class="pname">Stack & Roll Cups</div><div class="pprice">$16.99</div></div>
<div class="card"><div class="age" style="background:#e31837;color:#fff">0-6mo</div><div class="thumb" style="background:linear-gradient(135deg,#e31837,#0072bc)"></div><div class="pname">Crinkle Book</div><div class="pprice">$12.99</div></div>
</div>
</div>
<div class="footer"><span>© Lamaze</span><span>Safety Certifications · BPA-Free</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #696969; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; line-height: 1.25; background: #111111; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #111111;
border: 1px solid #111111; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #111111;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #696969; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #c8232c; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; color:#111111; font-family:'Barlow','Figtree',sans-serif; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-size:20px;font-weight:700;letter-spacing:-.3px;text-transform:uppercase;}
.navlinks{display:flex;gap:26px;font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;}
.navlinks .active{border-bottom:2px solid #111111;padding-bottom:4px;}
.navlinks .muted{color:#696969;}
.cartbadge{background:#c8232c;color:#fff;font-size:11px;border-radius:9999px;padding:2px 7px;}
.hero{height:250px;background:linear-gradient(120deg,#111111 40%,#363636 100%);display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;}
.herotext{max-width:440px;color:#fff;}
.herotext h1{font-size:32px;font-weight:700;line-height:1.15;margin:0 0 10px;}
.herotext p{font-size:15px;color:#d0d0d0;margin:0 0 18px;max-width:340px;}
.cta{display:inline-block;background:#c8232c;color:#fff;font-size:16px;font-weight:600;padding:14px 32px;border-radius:8px;}
.peak{position:absolute;right:60px;top:40px;width:220px;height:160px;background:linear-gradient(180deg,#4469af 0%,#dedede 55%,#8fa48b 100%);clip-path:polygon(50% 0%,80% 45%,100% 100%,0% 100%,20% 45%);}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:200px;}
.thumb{height:110px;border-radius:8px;margin-bottom:8px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#c8232c;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:4px 8px;border-radius:4px;}
.pname{font-size:16px;font-weight:600;margin:0 0 2px;}
.pprice{font-size:16px;color:#696969;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#111111;color:#a1a1a1;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Stone Glacier</div>
<div class="navlinks"><span class="active">Backpacks</span><span class="muted">Apparel</span><span class="muted">Optics</span><span class="muted">Guide Series</span></div>
<div class="navlinks"><span class="muted">Cart <span class="cartbadge">2</span></span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Built for the last mile in.</h1>
<p>Backcountry hunting systems tested above treeline, not in a lab.</p>
<div class="cta">Shop Backpacks</div>
</div>
<div class="peak"></div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#363636,#4469af)"><span class="badge">Sale</span></div><div class="pname">Sky Guide 5900</div><div class="pprice">$599.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#111111,#696969)"></div><div class="pname">Krux Meat Frame</div><div class="pprice">$379.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4469af,#111111)"></div><div class="pname">Sable Base Layer</div><div class="pprice">$129.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#696969,#111111)"><span class="badge" style="background:#1b9500">New</span></div><div class="pname">Solus Bino Harness</div><div class="pprice">$95.00</div></div>
</div>
<div class="footer"><span>© Stone Glacier — Above the Treeline</span><span>Shipping Warranty Dealers</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #272727;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #272727;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.27; margin: 0; color: #272727; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #595959; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; background: #bd2426; color: #ffffff;
border: none; border-radius: 2px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; background: #ffffff; color: #163959;
border: 1px solid #bd2426; border-radius: 2px;
padding: 7px 15px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #272727;
border: 1px solid #c9c9c9; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #595959; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; background: #9bca3e; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; color:#404040; }
*{box-sizing:border-box;}
.utility{height:32px;background:#163959;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:12px;color:#fff;}
.nav{height:56px;display:flex;align-items:center;gap:16px;padding:0 20px;border-bottom:1px solid #dedede;}
.logo{font-size:17px;font-weight:700;color:#163959;white-space:nowrap;}
.search{flex:1;height:32px;border:1px solid #dedede;border-radius:2px;display:flex;align-items:center;padding:0 10px;font-size:12px;color:#737373;}
.searchbtn{background:#bd2426;color:#fff;font-size:12px;font-weight:700;height:32px;padding:0 14px;display:flex;align-items:center;}
.catstrip{display:flex;gap:0;background:#ebebeb;border-bottom:1px solid #dedede;}
.cattile{font-size:12px;font-weight:700;color:#163959;padding:8px 14px;border-right:1px solid #dedede;}
.grid{display:flex;gap:10px;padding:16px 20px 0;}
.card{width:216px;border:1px solid #dedede;padding:8px;position:relative;}
.thumb{height:90px;background:#ebebeb;border:1px solid #ebebeb;margin-bottom:6px;}
.stock{position:absolute;top:14px;right:14px;background:#9bca3e;color:#fff;font-size:10px;font-weight:700;padding:2px 6px;}
.stockout{background:#bd2426;}
.title{font-size:14px;font-weight:700;color:#2f7bbf;margin-bottom:2px;}
.partno{font-family:courier,monospace;font-size:12px;color:#595959;margin-bottom:4px;}
.price{font-size:14px;font-weight:700;color:#bd2426;}
</style>
<div class="utility"><span>Free Shipping on Orders Over $99</span><span>1-800-555-0142 · Sign In · Cart (0)</span></div>
<div class="nav">
<div class="logo">Newport Fasteners</div>
<div class="search">Search by part number or spec...</div>
<div class="searchbtn">SEARCH</div>
</div>
<div class="catstrip">
<div class="cattile">Machine Screws</div>
<div class="cattile">Socket Cap Screws</div>
<div class="cattile">Hex Bolts</div>
<div class="cattile">Washers</div>
<div class="cattile">Nuts</div>
</div>
<div class="grid">
<div class="card"><span class="stock">In Stock</span><div class="thumb" style="background:linear-gradient(160deg,#163959,#2f7bbf)"></div><div class="title">Socket Cap Screw</div><div class="partno">#10-32 x 1-1/4 SS</div><div class="price">$0.12 / ea</div></div>
<div class="card"><span class="stock stockout">Backordered</span><div class="thumb" style="background:linear-gradient(160deg,#595959,#163959)"></div><div class="title">Hex Bolt Grade 8</div><div class="partno">1/2-13 x 2 ZN</div><div class="price">$0.38 / ea</div></div>
<div class="card"><span class="stock">In Stock</span><div class="thumb" style="background:linear-gradient(160deg,#9bca3e,#163959)"></div><div class="title">Flat Washer</div><div class="partno">3/8 SAE ZN</div><div class="price">$0.04 / ea</div></div>
<div class="card"><span class="stock">500+ available</span><div class="thumb" style="background:linear-gradient(160deg,#f68b1f,#163959)"></div><div class="title">Nylon Lock Nut</div><div class="partno">5/16-18 NC</div><div class="price">$0.08 / ea</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7f8084; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #fb637e; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #222222;
border: 1px solid #fb637e; border-radius: 8px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7f8084; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #fb637e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Dosis,sans-serif; color:#3d4246; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e6e6e6;}
.logo{font-size:19px;font-weight:700;color:#11151c;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;letter-spacing:.3px;}
.navlinks .active{color:#fb637e;border-bottom:2px solid #fb637e;padding-bottom:18px;}
.hero{height:230px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;padding:0 32px;}
.herocontent{text-align:center;}
.herocontent h1{font-size:32px;font-weight:700;color:#11151c;margin:0 0 10px;letter-spacing:-.5px;}
.herocontent p{font-size:16px;color:#7f8084;margin:0 0 16px;}
.cta{display:inline-block;background:#fb637e;color:#fff;font-size:16px;font-weight:600;letter-spacing:.5px;padding:12px 28px;border-radius:8px;}
.kbboard{margin:16px auto 0;width:360px;display:grid;grid-template-columns:repeat(14,1fr);gap:3px;}
.key{background:#eeeeee;border-radius:3px;height:14px;}
.key.hl{background:#c79b68;}
.grid{display:flex;gap:16px;padding:20px 32px 0;}
.card{width:206px;background:#eeeeee;border-radius:12px;padding:16px;}
.thumb{aspect-ratio:4/3;height:100px;margin-bottom:10px;position:relative;}
.badge{position:absolute;top:6px;left:6px;color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-radius:4px;padding:2px 8px;}
.ptitle{font-size:16px;font-weight:600;}
.pprice{font-size:20px;font-weight:700;margin-top:6px;}
.pprice.sale{color:#fb637e;}
.footer{position:absolute;bottom:0;left:0;right:0;height:48px;background:#121212;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:13px;color:#7f8084;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Varmilo</div>
<div class="navlinks"><div class="active">Keyboards</div><div>Keycaps</div><div>Switches</div><div>Limited Editions</div></div>
</div>
<div class="hero">
<div class="herocontent">
<h1>Keyboards worth framing.</h1>
<p>Calligraphy-inspired legends on mechanical boards built to last.</p>
<div class="cta">Shop Keyboards</div>
<div class="kbboard">
<div class="key"></div><div class="key"></div><div class="key hl"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
<div class="key"></div><div class="key hl"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key hl"></div><div class="key"></div>
</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#fb637e,#c79b68)"><div class="badge" style="background:#c79b68">Limited</div></div><div class="ptitle">VA108M Sakura Edition</div><div class="pprice">$139.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c79b68,#fb637e)"><div class="badge" style="background:#fb637e">Sale</div></div><div class="ptitle">Beijing Opera Facebook</div><div class="pprice sale">$99.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7f8084,#11151c)"></div><div class="ptitle">EC V2 Dark Wood</div><div class="pprice">$159.00</div></div>
</div>
<div class="footer"><span>© Artisan Mechanical Keyboards</span><span>Switches · Keycaps · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #003087; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #003087; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #879cc4; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0070ba; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #003087; color: #ffffff;
border: 1px solid #0070ba; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #003087; color: #f5f5f5;
border: 1px solid #275099; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #879cc4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #003a8f; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#001435; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
/* left phone-ish wallet column */
.wallet { width:340px; height:640px; background:#FFFFFF; border-right:1px solid #E5E8ED;
display:flex; flex-direction:column; }
.topbar { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 18px;
border-bottom:0.5px solid #E5E8ED; flex-shrink:0; }
.pp-mark { font-size:20px; font-weight:800; letter-spacing:-1px; }
.pp-mark .a { color:#0070BA; }
.pp-mark .b { color:#003087; margin-left:-6px; }
.topbar .icons { display:flex; gap:14px; color:#687173; font-size:14px; }
.wallet-scroll { flex:1; overflow:hidden; padding:18px; display:flex; flex-direction:column; gap:16px; }
.balance-card { background:#FFFFFF; border:1px solid #E5E8ED; border-radius:16px; padding:20px;
box-shadow:rgba(0,0,0,0.06) 0 2px 8px; display:flex; flex-direction:column; gap:10px; }
.balance-label { font-size:13px; font-weight:500; color:#687173; }
.balance-amt { font-size:36px; font-weight:700; letter-spacing:-0.5px; font-variant-numeric:tabular-nums; color:#001435; }
.balance-row { display:flex; gap:8px; margin-top:6px; }
.btn-blue { flex:1; background:#003087; color:#fff; border-radius:24px; padding:12px 0;
text-align:center; font-weight:700; font-size:14px; }
.btn-outline { flex:1; background:#fff; color:#003087; border:1.5px solid #003087; border-radius:24px;
padding:11px 0; text-align:center; font-weight:600; font-size:14px; }
.section-header { font-size:16px; font-weight:700; color:#001435; }
.activity-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:0.5px solid #E5E8ED; }
.a-icon { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
color:#fff; font-size:14px; font-weight:700; flex-shrink:0; }
.a-icon.sent { background:#003087; }
.a-icon.recv { background:#1C8B43; }
.a-icon.card { background:#0070BA; }
.a-mid { flex:1; min-width:0; }
.a-name { font-size:15px; font-weight:500; color:#001435; }
.a-sub { font-size:12px; color:#687173; margin-top:2px; }
.a-amt { font-size:16px; font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; }
.a-amt.pos { color:#1C8B43; }
.tabbar { height:56px; border-top:0.5px solid #E5E8ED; display:flex; align-items:center; justify-content:space-around;
flex-shrink:0; }
.tab { font-size:10px; color:#687173; display:flex; flex-direction:column; align-items:center; gap:4px; }
.tab .dot { width:20px; height:20px; border-radius:6px; background:#EEF1F4; }
.tab.active { color:#003087; }
.tab.active .dot { background:#003087; }
/* right: send money fullscreen */
.send { flex:1; height:640px; background:#F5F7FA; display:flex; flex-direction:column; }
.send-top { height:56px; display:flex; align-items:center; justify-content:center; position:relative;
border-bottom:0.5px solid #E5E8ED; background:#fff; flex-shrink:0; }
.send-top .title { font-size:17px; font-weight:500; color:#001435; }
.send-top .cancel { position:absolute; left:20px; font-size:15px; color:#0070BA; font-weight:500; }
.send-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.to-row { font-size:14px; color:#687173; }
.to-row b { color:#001435; font-weight:600; }
.send-amt { font-size:56px; font-weight:700; letter-spacing:-1px; color:#001435; font-variant-numeric:tabular-nums; }
.currency-chip { font-size:13px; font-weight:500; color:#687173; background:#EEF1F4; padding:5px 14px; border-radius:14px; }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:0 40px 18px; }
.key { text-align:center; padding:12px 0; font-size:22px; font-weight:500; color:#001435; }
.send-cta-wrap { padding:0 24px 22px; }
.send-cta { background:#003087; color:#fff; text-align:center; padding:15px 0; border-radius:24px;
font-weight:700; font-size:17px; }
.badge-pill { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase;
letter-spacing:0.05em; background:#E4F5EA; color:#1C8B43; padding:3px 10px; border-radius:4px; }
</style></head>
<body>
<div class="app">
<div class="wallet">
<div class="topbar">
<div class="pp-mark"><span class="a">P</span><span class="b">P</span></div>
<div class="icons">🔔 ?</div>
</div>
<div class="wallet-scroll">
<div class="balance-card">
<div class="balance-label">PayPal (iOS) balance</div>
<div class="balance-amt">$1,247.92</div>
<div class="balance-row">
<div class="btn-blue">Add Money</div>
<div class="btn-outline">Transfer</div>
</div>
</div>
<div class="section-header">Recent activity</div>
<div class="activity-row">
<div class="a-icon recv">↓</div>
<div class="a-mid">
<div class="a-name">Sarah Kim</div>
<div class="a-sub">Yesterday, 3:42 PM · Completed</div>
</div>
<div class="a-amt pos">+$24.50</div>
</div>
<div class="activity-row">
<div class="a-icon sent">↑</div>
<div class="a-mid">
<div class="a-name">Jordan Lee</div>
<div class="a-sub">Mon, 9:12 AM · Completed</div>
</div>
<div class="a-amt">−$60.00</div>
</div>
<div class="activity-row">
<div class="a-icon card">💳</div>
<div class="a-mid">
<div class="a-name">Visa debit ·4242</div>
<div class="a-sub">Sun, 6:03 PM · Completed</div>
</div>
<div class="a-amt">−$18.20</div>
</div>
<div><span class="badge-pill">Received</span></div>
</div>
<div class="tabbar">
<div class="tab active"><div class="dot"></div>Home</div>
<div class="tab"><div class="dot"></div>Send</div>
<div class="tab"><div class="dot"></div>Wallet</div>
<div class="tab"><div class="dot"></div>Activity</div>
<div class="tab"><div class="dot"></div>Finances</div>
</div>
</div>
<div class="send">
<div class="send-top"><span class="cancel">Cancel</span><span class="title">Send Money</span></div>
<div class="send-body">
<div class="to-row">To <b>Sarah Kim</b></div>
<div class="send-amt">$24.50</div>
<div class="currency-chip">USD ⌄</div>
</div>
<div class="keypad">
<div class="key">1</div><div class="key">2</div><div class="key">3</div>
<div class="key">4</div><div class="key">5</div><div class="key">6</div>
<div class="key">7</div><div class="key">8</div><div class="key">9</div>
<div class="key"></div><div class="key">0</div><div class="key">⌫</div>
</div>
<div class="send-cta-wrap"><div class="send-cta">Send $24.50</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #004dc1; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #004dc1; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87a9de; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0a2864; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #004dc1; color: #ffffff;
border: 1px solid #0a2864; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #004dc1; color: #f5f5f5;
border: 1px solid #2768c9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87a9de; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0247b2; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212529; box-sizing:border-box;
font-family:"Inter","Noto Sans KR",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:700; margin:0; color:#004dc1; }
.navlinks { display:flex; gap:22px; font-size:15px; font-weight:500; color:#1e1f21; }
.cta { background:#004dc1; color:#ffffff; border:1px solid #004dc1; border-radius:3px; padding:9px 20px; font-size:14px; font-weight:600; }
.hero { background:#0a2864; color:#ffffff; padding:44px 40px; text-align:center; }
.hero h1 { font-size:40px; font-weight:700; letter-spacing:-0.4px; margin:0 0 14px; }
.row { display:flex; gap:12px; justify-content:center; }
.ghost { background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.2); color:#ffffff; border-radius:3px; padding:12px 20px; font-size:14px; font-weight:600; }
.white { background:#ffffff; color:#004dc1; border:1px solid #ffffff; border-radius:2px; padding:12px 30px; font-size:14px; font-weight:600; box-shadow:0 8px 24px rgba(54,55,61,0.25); }
.band { background:#f4f7fb; padding:24px 40px; }
.band h2 { font-size:24px; font-weight:700; color:#1e1f21; letter-spacing:-0.4px; margin:0 0 14px; text-align:center; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#ffffff; border-radius:8px; padding:16px; box-shadow:0 8px 13px rgba(159,176,199,0.3); }
.card h3 { font-size:15px; font-weight:700; margin:0 0 6px; }
.card p { font-size:12px; color:#495057; margin:0; }
</style></head>
<body>
<nav>
<p class="brand">Shiftee</p>
<div class="navlinks"><span>Company</span><span>Schedule</span><span>Pricing</span></div>
<button class="cta">Free trial</button>
</nav>
<section class="hero">
<h1>Empower Your Workforce, Shiftee</h1>
<div class="row"><button class="ghost">Contact Us</button><button class="white">Free trial</button></div>
</section>
<div class="band">
<h2>Everything You Need for Workforce Management</h2>
<div class="cards">
<div class="card"><h3>Sophisticated Scheduling</h3><p>Shift plans built and shared in minutes.</p></div>
<div class="card"><h3>Automated T&A</h3><p>Attendance tracked, without the spreadsheets.</p></div>
<div class="card"><h3>Easy Leave Management</h3><p>Requests and approvals in one flow.</p></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0062e3; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0062e3; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b3ed; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #05203c; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0062e3; color: #05203c;
border: 1px solid #05203c; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0062e3; color: #f5f5f5;
border: 1px solid #277ae6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b3ed; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0157c8; color: #05203c;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#161616; box-sizing:border-box;
font-family:-apple-system,"Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
.hero { background:#05203c; padding:26px 44px 30px; color:#ffffff; }
nav { display:flex; align-items:center; justify-content:space-between; padding-bottom:20px; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:18px; font-size:14px; opacity:0.85; }
.tabs { display:flex; gap:8px; margin-bottom:16px; }
.tab { border-radius:100px; padding:0 16px; height:36px; display:flex; align-items:center; font-size:16px; }
.tab.active { background:#0062e3; color:#ffffff; }
.tab.inactive { background:transparent; color:#ffffff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5); }
.searchpanel { background:#ffffff; border-radius:12px; padding:8px; display:flex; gap:1px; }
.field { flex:1; height:72px; display:flex; align-items:center; padding:0 16px; color:#161616; font-size:16px; }
.submit { background:#0062e3; color:#ffffff; border-radius:8px; padding:0 24px; height:56px; display:flex; align-items:center; font-size:16px; font-weight:700; align-self:center; }
.results { padding:22px 44px 0; }
.card { background:#ffffff; border-radius:12px; padding:16px 20px; display:flex; justify-content:space-between; align-items:center;
box-shadow: 0 4px 8px rgba(0,0,0,0.08), 0 0 0 1px rgb(230,233,235); margin-bottom:12px; }
.card .route { font-size:15px; font-weight:600; }
.card .meta { font-size:13px; color:#626971; }
.card .price { font-size:20px; font-weight:700; color:#0062e3; }
</style></head>
<body>
<div class="hero">
<nav>
<p class="brand">Skyscanner</p>
<div class="navlinks"><span>Flights</span><span>Hotels</span><span>Car hire</span></div>
</nav>
<div class="tabs">
<span class="tab active">Flights</span>
<span class="tab inactive">Hotels</span>
<span class="tab inactive">Car hire</span>
</div>
<div class="searchpanel">
<div class="field">Seoul (ICN)</div>
<div class="field">Anywhere</div>
<div class="field">This weekend</div>
<span class="submit">Search</span>
</div>
</div>
<section class="results">
<div class="card"><div><div class="route">ICN → NRT</div><div class="meta">Direct · 2h 20m</div></div><div class="price">₩168,000</div></div>
<div class="card"><div><div class="route">ICN → BKK</div><div class="meta">Direct · 5h 55m</div></div><div class="price">₩312,000</div></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #534dff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #534dff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #aca9fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #403ae6; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #534dff; color: #ffffff;
border: 1px solid #403ae6; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #534dff; color: #f5f5f5;
border: 1px solid #6d68fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aca9fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #504afb; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#152632; box-sizing:border-box;
font-family:'Inter',-apple-system,"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 64px; display:flex; align-items:center; justify-content:space-between; padding:0 48px;
border-bottom:1px solid #e3e6eb; }
.brand { font-size:18px; font-weight:700; letter-spacing:-0.3px; color:#152632; margin:0; }
.navlinks { display:flex; gap:28px; font-size:14px; font-weight:500; color:#4a5360; }
.btn-primary { background:#534dff; color:#fff; border:none; border-radius:8px; height:38px; padding:0 20px;
font-size:14px; font-weight:700; }
.hero { flex:0 0 240px; position:relative; display:flex; flex-direction:column; align-items:flex-start;
justify-content:center; padding:0 48px; overflow:hidden;
background: radial-gradient(circle at 88% 20%, rgba(141,187,255,0.35), rgba(141,187,255,0) 55%),
radial-gradient(circle at 8% 90%, rgba(83,77,255,0.10), rgba(83,77,255,0) 55%);
}
.kicker { color:#534dff; font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; margin:0 0 14px; }
.hero h1 { font-size:38px; font-weight:700; line-height:1.28; letter-spacing:-0.5px; margin:0 0 12px; max-width:560px; color:#152632; }
.hero p { font-size:15px; color:#4a5360; margin:0 0 18px; max-width:480px; line-height:1.6; }
.hero .row { display:flex; gap:10px; }
.btn-ghost { background:#ffffff; color:#534dff; border:1.5px solid #cbd1d9; border-radius:8px; height:40px; padding:0 20px; font-size:14px; font-weight:600; }
.grid { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:24px 48px 0; }
.card { background:#ffffff; border:1px solid #e3e6eb; border-radius:16px; padding:20px;
box-shadow:0 4px 16px rgba(21,38,50,0.06); display:flex; flex-direction:column; gap:8px; }
.card .icon { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,#534dff,#7b6cff); }
.card h3 { font-size:17px; font-weight:700; margin:6px 0 0; color:#152632; }
.card p { font-size:12.5px; color:#6b7585; line-height:1.6; margin:0; }
footer { flex:0 0 56px; border-top:1px solid #e3e6eb; display:flex; align-items:center; justify-content:space-between;
padding:0 48px; font-size:12px; color:#9aa4b2; }
</style></head>
<body>
<nav>
<p class="brand">LayerX</p>
<div class="navlinks"><span>Bakuraku</span><span>Fintech</span><span>Company</span><span>Careers</span></div>
<button class="btn-primary">Contact sales</button>
</nav>
<section class="hero">
<p class="kicker">Compound startup</p>
<h1>Digitize all economic activity.</h1>
<p>Cloud back-office software for corporate spend, invoices, and expense management — built for calm, confident operations.</p>
<div class="row">
<button class="btn-primary">Get started</button>
<button class="btn-ghost">See Bakuraku</button>
</div>
</section>
<section class="grid">
<div class="card"><div class="icon"></div><h3>Spend management</h3><p>Real-time corporate card and expense visibility across every team.</p></div>
<div class="card"><div class="icon" style="background:#8dbbff"></div><h3>Invoice automation</h3><p>AI-assisted invoice capture and approval routing that removes paperwork.</p></div>
<div class="card"><div class="icon" style="background:#1fa971"></div><h3>Fintech infrastructure</h3><p>The compliance and ledger backbone trusted by finance teams at scale.</p></div>
</section>
<footer>
<span>© LayerX</span>
<span>LayerX · Bakuraku · Privacy · Terms</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #108474; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.2px; background: #ffffff; color: #222222;
border: 1px solid #108474; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #555555;
border: 1px solid #c3c4c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #f5af19; color: #222222;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:'Nunito Sans',Arial,sans-serif; color:#555555; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#108474;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;text-transform:uppercase;color:#fff;}
.navlinks span:first-child{color:#fffb00;}
.cart{position:relative;color:#fff;font-size:18px;}
.cartbadge{position:absolute;top:-6px;right:-10px;background:#f5af19;color:#222;font-size:9px;font-weight:700;border-radius:9999px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;}
.hero{height:160px;background:#108474;display:flex;align-items:center;padding:0 32px;}
.herotext h1{color:#fff;font-size:26px;font-weight:700;margin:0;}
.pillrow{display:flex;gap:10px;padding:14px 32px;background:#f9fafb;}
.pill{background:#f2f2f2;color:#555;font-size:12px;font-weight:600;border-radius:9999px;padding:8px 18px;}
.pill.active{background:#108474;color:#fff;}
.grid{display:flex;gap:14px;padding:6px 32px 0;}
.card{width:150px;background:#fff;border-radius:12px;padding:8px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#f5af19;color:#222;font-size:9px;font-weight:700;text-transform:uppercase;border-radius:4px;padding:2px 6px;z-index:2;}
.thumb{height:86px;border-radius:8px;margin-bottom:6px;}
.ptitle{font-size:13px;font-weight:600;color:#222;height:32px;overflow:hidden;}
.pprice{font-size:13px;color:#108474;font-weight:700;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#f2f2f2;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.footer span{color:#555;font-size:11px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Solaris Japan Movies A 2</div>
<div class="navlinks"><span>Movies</span><span>Anime</span><span>Merch</span><span>Box Sets</span></div>
<div class="cart">🛒<span class="cartbadge">4</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Rare Japanese cinema, region-free.</h1>
</div>
</div>
<div class="pillrow"><div class="pill active">All</div><div class="pill">Studio Ghibli</div><div class="pill">Kurosawa</div><div class="pill">Box Sets</div><div class="pill">Pre-Order</div></div>
<div class="grid">
<div class="card"><span class="badge">Limited</span><div class="thumb" style="background:linear-gradient(135deg,#108474,#f5af19)"></div><div class="ptitle">Ran (4K Steelbook)</div><div class="pprice">¥8,400</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f5af19,#108474)"></div><div class="ptitle">Spirited Away Box</div><div class="pprice">¥12,000</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7b7b7b,#108474)"></div><div class="ptitle">Anime Poster Set</div><div class="pprice">¥3,600</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c8102e,#108474)"></div><div class="ptitle">Director's Cut Bundle</div><div class="pprice">¥9,900</div></div>
</div>
<div class="footer"><span>© Solaris Japan Movies</span><span>Region Info · Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #0f172b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #0f172b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.27; margin: 0; color: #0f172b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 1px; background: #0f172b; color: #f8f8f8;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 1px; background: transparent; color: #0f172b;
border: 1px solid #3d5789; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f8f8; color: #0f172b;
border: 1px solid #bec0c5; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.27; letter-spacing: 1.2px; background: transparent; color: #8b8b8b;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#f8f8f8; color:#1d1d1d; box-sizing:border-box; font-family:Roboto,sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;background:#0f172b;color:#f8f8f8;display:flex;align-items:center;justify-content:space-between;padding:0 26px;}
.nav .logo{font-family:'Whyte-Regular',Roboto,sans-serif;font-weight:300;font-size:17px;}
.nav .links{display:flex;gap:18px;font-size:13px;letter-spacing:.5px;}
.wrap{display:flex;height:584px;}
.left{width:400px;background:#eeedec;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;}
.card{width:200px;height:140px;background:linear-gradient(160deg,#ffffff,#f8f8f8);border:1px solid #d8d8d8;box-shadow:0 10px 20px rgba(0,0,0,.08);position:relative;}
.card::before{content:'CB';position:absolute;top:20px;left:20px;font-family:'Whyte-Regular',serif;font-size:24px;color:#3d5789;font-weight:300;}
.banner-lavender{position:absolute;bottom:0;left:0;right:0;background:#ccb7ff;padding:10px 20px;font-size:11px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:#0f172b;text-align:center;}
.right{flex:1;padding:28px 32px;display:flex;flex-direction:column;}
.crumb{font-size:12px;color:#777;margin-bottom:10px;}
h1{font-family:'Whyte-Regular',Roboto,sans-serif;font-weight:300;font-size:28px;margin:0 0 8px;}
.sub{color:#1d1d1d;font-size:16px;font-weight:400;margin:0 0 14px;}
.price{font-family:'Whyte-Regular',serif;font-size:16px;margin:0 0 18px;}
.panel{background:#f5f5f5;padding:16px;margin-bottom:18px;}
.panel .label{font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:#777;margin-bottom:8px;}
.panel .mono{font-family:'Whyte-Regular',serif;font-size:24px;color:#1d1d1d;}
.desc{font-size:14px;color:#1d1d1d;line-height:1.6;margin:0 0 20px;}
.actions{display:flex;gap:0;margin-top:auto;}
.btn-primary{background:#0f172b;color:#f8f8f8;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:1px;border-radius:0;padding:14px 32px;height:48px;display:flex;align-items:center;margin-right:10px;}
.btn-secondary{background:transparent;color:#1d1d1d;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:1px;border:1px solid #1d1d1d;border-radius:0;padding:13px 31px;height:48px;display:flex;align-items:center;}
</style>
</head>
<body>
<div class="nav"><div class="logo">Crane And CO</div><div class="links"><span>Stationery</span><span>Wedding</span><span>Business Cards</span><span>Gifts</span></div></div>
<div class="wrap">
<div class="left"><div class="card"></div><div class="banner-lavender">Personalization Included</div></div>
<div class="right">
<div class="crumb">Home / Personalized / Business Cards</div>
<h1>Engraved Business Card</h1>
<p class="sub">Cotton Stock · Ink: Midnight Navy</p>
<p class="price">$185.00 / box of 100</p>
<div class="panel">
<div class="label">Monogram Preview</div>
<div class="mono">C.B.W.</div>
</div>
<p class="desc">Engraved on 100% cotton stock for a tactile impression that lasts. Choose from six ink colors and four classic typefaces to complete your personal mark.</p>
<div class="actions">
<div class="btn-primary">Personalize</div>
<div class="btn-secondary">Shop All</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfcf4; color: #242527;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfcf4; color: #242527;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: #242527; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #08c5bc; color: #000000;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #fcfcf4; color: #242527;
border: 1px solid #08c5bc; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #242527;
border: 1px solid #c6c6c1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.3px; background: #8c564b; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcfcf4; color:#242527; box-sizing:border-box;
font-family:'DM Sans', -apple-system, system-ui, 'Helvetica Neue', sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; background:#fcfcf4; border-bottom:1px solid #e5e7eb; }
.brand { font-family:'Petrona', Georgia, serif; font-size:22px; font-weight:600; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:28px; font-size:15px; font-weight:500; color:#4a4a4a; }
.navlinks span:first-child { color:#242527; border-bottom:2px solid #08c5bc; padding-bottom:4px; }
.navicons { display:flex; align-items:center; gap:18px; }
.icn { width:22px; height:22px; border-radius:6px; background:#f2f2ea; position:relative; }
.cart { width:22px; height:22px; border:1.5px solid #242527; border-radius:4px; position:relative; }
.cart::after { content:'2'; position:absolute; top:-8px; right:-8px; width:16px; height:16px; border-radius:999px;
background:#08c5bc; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.hero { display:flex; align-items:center; gap:40px; padding:36px 40px; }
.hero-copy { flex:1.1; }
.eyebrow { display:inline-block; background:#f5f5dc; color:#8c564b; font-size:11px; font-weight:600;
letter-spacing:0.3px; text-transform:uppercase; padding:4px 12px; border-radius:9999px; margin-bottom:14px; }
.hero h1 { font-family:'Petrona', Georgia, serif; font-size:34px; font-weight:600; line-height:1.15;
letter-spacing:-0.5px; margin:0 0 12px; }
.hero p { font-size:15px; color:#4a4a4a; line-height:1.5; margin:0 0 20px; max-width:400px; }
.row { display:flex; gap:12px; align-items:center; }
.btn-primary { background:#08c5bc; color:#fff; border:none; border-radius:9999px; padding:14px 28px;
font-family:'DM Sans'; font-size:15px; font-weight:600; height:48px; }
.btn-secondary { background:#fcfcf4; color:#242527; border:1.5px solid #242527; border-radius:9999px;
padding:13px 27px; font-size:15px; font-weight:600; height:48px; }
.hero-visual { flex:1; height:172px; border-radius:20px; background:linear-gradient(135deg,#f5f5dc,#f2f2ea);
position:relative; overflow:hidden; }
.hero-visual::before { content:''; position:absolute; width:130px; height:130px; border-radius:50%;
background:#dedede; opacity:0.6; right:-30px; bottom:-40px; }
.hero-visual::after { content:''; position:absolute; width:70px; height:70px; border-radius:16px;
background:#08c5bc; opacity:0.14; left:24px; top:24px; }
.section { padding:8px 40px 0; }
.sec-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.sec-head h2 { font-family:'Petrona', Georgia, serif; font-size:22px; font-weight:500; margin:0; }
.sec-head span { font-size:13px; color:#08c5bc; font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:#ffffff; border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.card .thumb { height:96px; border-radius:12px; position:relative; overflow:hidden; }
.t1 { background:linear-gradient(160deg,#f2f2ea,#dedede); }
.t2 { background:linear-gradient(160deg,#f5f5dc,#f2f2ea); }
.t3 { background:linear-gradient(160deg,#e9ece6,#cfe0dd); }
.badge { position:absolute; top:8px; left:8px; background:#8c564b; color:#fff; font-size:10px; font-weight:600;
letter-spacing:0.3px; text-transform:uppercase; padding:4px 10px; border-radius:9999px; }
.stars { color:#242527; font-size:11px; letter-spacing:1px; }
.rcount { color:#9ca3af; font-size:11px; margin-left:4px; }
.card h3 { font-size:14px; font-weight:600; margin:2px 0 0; }
.card .desc { font-size:12px; color:#777777; margin:0; line-height:1.4; }
.pricerow { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.price { font-size:15px; font-weight:600; }
.addbtn { background:#f2f2ea; color:#08c5bc; border:none; border-radius:9999px; font-size:12px; font-weight:600;
padding:6px 14px; }
footer { border-top:1px solid #e5e7eb; padding:14px 40px; display:flex; justify-content:space-between;
align-items:center; font-size:12px; color:#777777; }
footer a { color:#777777; margin-left:18px; }
</style></head>
<body>
<nav>
<p class="brand">Because</p>
<div class="navlinks"><span>Shop</span><span>Guides</span><span>Our Story</span><span>Help</span></div>
<div class="navicons"><div class="icn"></div><div class="cart"></div></div>
</nav>
<section class="hero">
<div class="hero-copy">
<span class="eyebrow">Because we understand</span>
<h1>Care that respects the whole person</h1>
<p>Thoughtfully designed bathing, incontinence, and comfort essentials — for the people who care for aging bodies, and the ones they love.</p>
<div class="row">
<button class="btn-primary">Take the quiz</button>
<button class="btn-secondary">See details</button>
</div>
</div>
<div class="hero-visual"></div>
</section>
<section class="section">
<div class="sec-head"><h2>Recommended for you</h2><span>View all</span></div>
<div class="grid">
<div class="card">
<div class="thumb t1"><span class="badge">Best seller</span></div>
<div class="stars">★★★★★<span class="rcount">(1,204)</span></div>
<h3>Overnight Protective Brief</h3>
<p class="desc">Maximum absorbency, soft cotton-feel liner.</p>
<div class="pricerow"><span class="price">$34.99</span><button class="addbtn">Add to cart</button></div>
</div>
<div class="card">
<div class="thumb t2"><span class="badge">New</span></div>
<div class="stars">★★★★☆<span class="rcount">(388)</span></div>
<h3>Bath Support Handle</h3>
<p class="desc">Suction-mount grip for safer bathing.</p>
<div class="pricerow"><span class="price">$28.00</span><button class="addbtn">Add to cart</button></div>
</div>
<div class="card">
<div class="thumb t3"></div>
<div class="stars">★★★★★<span class="rcount">(902)</span></div>
<h3>Barrier Cream, Fragrance-Free</h3>
<p class="desc">Gentle protection for sensitive skin.</p>
<div class="pricerow"><span class="price">$16.50</span><button class="addbtn">Add to cart</button></div>
</div>
</div>
</section>
<footer>
<span>© Because</span>
<div><a href="#">Help Center</a><a href="#">Caregiver Guides</a><a href="#">Track Order</a></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #262626;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #262626;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #262626; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.55; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 0.5px; background: #1c69d4; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 0.5px; background: #ffffff; color: #262626;
border: 1px solid #1c69d4; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.55; background: #ffffff; color: #262626;
border: 1px solid #c9c9c9; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.5px; background: #ffffff; color: #262626;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#262626; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 30px;
border-bottom:1px solid #e6e6e6; }
.brand { width:30px; height:30px; border-radius:999px; border:2px solid #1c69d4; display:flex; align-items:center;
justify-content:center; font-size:9px; font-weight:700; color:#1c69d4; }
.navlinks { display:flex; gap:24px; font-size:13px; font-weight:400; letter-spacing:0.3px; }
.hero { display:flex; align-items:center; justify-content:space-between; padding:30px 40px; height:220px; }
.hero .txt h1 { font-size:44px; font-weight:700; margin:0 0 10px; letter-spacing:0; }
.hero .txt p { font-size:16px; font-weight:300; color:#3c3c3c; margin:0 0 14px; max-width:340px; }
.hero .txt .link { font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
.car { width:340px; height:150px; border-radius:0;
background:linear-gradient(100deg,#dfe3e8,#aeb6c2 45%,#7d8896); position:relative; }
.car::after { content:''; position:absolute; left:20px; right:20px; bottom:-8px; height:14px; border-radius:50%;
background:rgba(0,0,0,0.18); filter:blur(4px); }
.cardgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:0 40px; }
.mcard { padding:20px; display:flex; flex-direction:column; gap:8px; }
.mplate { background:#fafafa; height:110px; display:flex; align-items:center; justify-content:center; }
.mplate .sil { width:120px; height:46px; border-radius:0; }
.sil1 { background:linear-gradient(100deg,#c7cdd6,#8b95a3); }
.sil2 { background:linear-gradient(100deg,#d7d2c8,#a89f8e); }
.sil3 { background:linear-gradient(100deg,#c2d0da,#7d94a3); }
.mcard h3 { font-size:18px; font-weight:700; margin:0; }
.mcard p { font-size:14px; font-weight:300; color:#3c3c3c; margin:0; }
.mcard .learn { font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
</style></head>
<body>
<nav>
<div class="brand">BMW</div>
<div class="navlinks"><span>Models</span><span>Next Generation</span><span>Pre-Owned</span><span>Dealers</span><span>Test Drive</span></div>
<div class="brand" style="border-radius:0;border:none;font-size:18px;color:#262626;width:auto;height:auto;">BMW</div>
</nav>
<div class="hero">
<div class="txt">
<h1>BMW iX3</h1>
<p>Pure electric power. Precision engineering. The next generation, arriving now.</p>
<span class="link">LEARN MORE ›</span>
</div>
<div class="car"></div>
</div>
<div class="cardgrid">
<div class="mcard"><div class="mplate"><div class="sil sil1"></div></div><h3>BMW iX3</h3><p>Fully electric. Fully engineered.</p><span class="learn">LEARN MORE ›</span></div>
<div class="mcard"><div class="mplate"><div class="sil sil2"></div></div><h3>BMW 5 Series</h3><p>The business of driving pleasure.</p><span class="learn">LEARN MORE ›</span></div>
<div class="mcard"><div class="mplate"><div class="sil sil3"></div></div><h3>BMW iX</h3><p>A bold step into the future.</p><span class="learn">LEARN MORE ›</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #191919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #191919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #191919; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #969696; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #e9514b; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #fafafa; color: #191919;
border: 1px solid #e9514b; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #191919;
border: 1px solid #e6e6e6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969696; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 1px; background: #e9514b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#191919; box-sizing:border-box;
font-family:'Open Sans',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #e6e6e6; background:#fafafa; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:600; color:#969696; }
.navlinks span.on { color:#191919; }
.util { font-size:12px; color:#969696; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 64px); }
.stage { padding:24px; border-right:1px solid #e9e9e9; display:flex; flex-direction:column; gap:10px; background:#232323; }
.panel { flex:1; position:relative; overflow:hidden; }
.panel .pencil { position:absolute; left:50%; top:8%; width:14px; height:84%; transform:translateX(-50%) rotate(-4deg); background:linear-gradient(90deg,#3a2a1a,#5a4028 40%,#3a2a1a); }
.panel .pencil::before { content:''; position:absolute; left:0; right:0; top:0; height:14%; background:#e9514b; }
.panel .pencil::after { content:''; position:absolute; left:-3px; right:-3px; bottom:0; height:8%; background:linear-gradient(180deg,#c9c7d2,#8b8b8b); clip-path:polygon(50% 100%,0 0,100% 0); }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; background:#323232; }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:13px; font-weight:500; letter-spacing:0.2px; color:#969696; }
h1 { margin:0; font-size:24px; font-weight:700; line-height:1.15; }
.mono-tag { display:inline-block; font-family:monospace; font-size:12px; letter-spacing:0.5px; border:1px solid #e6e6e6; padding:2px 6px; color:#969696; }
.price { font-size:20px; font-weight:700; }
.badge-edition { background:#e9514b; color:#fff; font-family:monospace; font-size:11px; letter-spacing:1px; text-transform:uppercase; padding:3px 8px; border-radius:4px; }
.swatches { display:flex; gap:8px; align-items:center; }
.swatch { width:24px; height:24px; border-radius:50%; border:2px solid transparent; }
.swatch.on { border-color:#191919; }
.desc { font-size:14px; color:#3c3c3c; line-height:1.5; }
.ingredient-row { display:flex; gap:6px; flex-wrap:wrap; }
.ing { background:#f8f8f8; color:#3c3c3c; font-size:12px; border-radius:999px; padding:5px 12px; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#e9514b; color:#fff; border:none; border-radius:4px; font-size:15px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.btn-secondary { width:150px; height:48px; background:#fafafa; color:#191919; border:1px solid #191919; border-radius:4px; font-size:15px; font-weight:600; text-transform:uppercase; }
</style></head>
<body>
<nav>
<p class="brand">Blackwing</p>
<div class="navlinks"><span class="on">Pencils</span><span>Sharpeners</span><span>Sets</span><span>Journals</span></div>
<div class="util">Search Account Cart (1)</div>
</nav>
<main>
<div class="stage">
<div class="panel"><div class="pencil"></div></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Volume 602 · Matte Graphite</span>
<h1>Blackwing 602 — Box of 12</h1>
<div class="badge-edition">Ltd Edition</div>
<div class="mono-tag">SKU BW-602-MTT</div>
<div class="price">$29.95</div>
<p class="desc">Firm graphite core for precise, controlled lines. Ferrule holds a flat replaceable eraser — the signature Blackwing mechanism since 1934.</p>
<div class="ingredient-row"><span class="ing">Firm Graphite</span><span class="ing">Cedar Barrel</span><span class="ing">Flat Eraser</span></div>
<div class="swatches">
<span class="swatch on" style="background:#191919"></span>
<span class="swatch" style="background:#e9514b"></span>
<span class="swatch" style="background:#338fb1"></span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Grade Guide</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5840ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5840ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #aea4fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1b1938; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5840ff; color: #1b1938;
border: 1px solid #1b1938; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5840ff; color: #f5f5f5;
border: 1px solid #715dfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aea4fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4e3adf; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#292827; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.hero { height:300px; position:relative; background:linear-gradient(160deg,#1b1938 0%,#2a2450 55%,#3a2f66 100%);
padding:24px 40px; color:#fff; }
nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.brand { font-size:16px; font-weight:600; color:#fff; }
.navlinks { display:flex; gap:22px; font-size:13px; color:rgba(255,255,255,0.8); }
.btn-cream-mini { background:#e9e5dd; color:#292827; border-radius:8px; padding:8px 16px; font-size:12px; font-weight:600; }
.hero-copy { text-align:center; margin-top:20px; }
.hero-copy h1 { font-size:44px; font-weight:540; line-height:0.96; margin:0 0 12px; letter-spacing:0; }
.hero-copy p { font-size:16px; color:rgba(255,255,255,0.8); margin:0 0 16px; }
.hero-cta { display:inline-flex; background:#e9e5dd; color:#292827; border-radius:8px; padding:14px 24px;
font-size:16px; font-weight:600; }
.glow { position:absolute; width:120px; height:120px; border-radius:50%; background:rgba(203,183,251,0.35);
filter:blur(2px); }
.glow.g1 { top:20px; right:60px; } .glow.g2 { bottom:-30px; left:80px; width:90px; height:90px; }
.content { padding:20px 40px 0; }
.content h2 { text-align:center; font-size:26px; font-weight:460; letter-spacing:-0.6px; margin:0 0 16px; }
.row { display:flex; gap:16px; }
.card { flex:1; background:#fff; border:1px solid #dcd7d3; border-radius:16px; padding:18px; }
.card h3 { font-size:18px; font-weight:540; margin:0 0 6px; }
.card p { font-size:13px; color:#292827; line-height:1.5; margin:0; }
.card .accent { color:#714cb6; font-size:12px; text-decoration:underline; margin-top:8px; display:inline-block; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #dcd7d3; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#714cb6; }
</style></head>
<body>
<div class="hero">
<div class="glow g1"></div><div class="glow g2"></div>
<nav>
<div class="brand">Superhuman</div>
<div class="navlinks"><span>Mail</span><span>Docs</span><span>AI</span><span>Pricing</span></div>
<div class="btn-cream-mini">Sign up</div>
</nav>
<div class="hero-copy">
<h1>Mail that works everywhere</h1>
<p>Save four hours a week. Time is the luxury.</p>
<div class="hero-cta">Get Superhuman</div>
</div>
</div>
<div class="content">
<h2>Your Superhuman suite</h2>
<div class="row">
<div class="card"><h3>Superhuman speed</h3><p>Keyboard-first email, tuned for inbox velocity.</p><span class="accent">See how it works</span></div>
<div class="card"><h3>AI everywhere</h3><p>Summaries and drafts across mail, docs, and calendar.</p><span class="accent">See how it works</span></div>
<div class="card"><h3>One suite</h3><p>Mail, Docs, and AI — a single premium workspace.</p><span class="accent">See how it works</span></div>
</div>
</div>
<footer><span>© Superhuman</span><span>Superhuman · Pricing · Company · Support</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #1a2352; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #1a2352; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9296ac; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #046cb8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1a2352; color: #046cb8;
border: 1px solid #046cb8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #1a2352; color: #f5f5f5;
border: 1px solid #3d456c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9296ac; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #162f62; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1a2352; box-sizing:border-box;
font-family:"Segoe UI", -apple-system, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.hero { background:#0d1230; padding:38px 40px 30px; color:#fff; position:relative; overflow:hidden; }
nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.brand { font-size:16px; font-weight:700; color:#fff; margin:0; }
.navlinks { display:flex; gap:24px; font-size:13px; color:rgba(255,255,255,0.75); }
.hero h1 { font-size:38px; font-weight:400; line-height:1.15; max-width:560px; margin:0 0 10px; }
.hero p { font-size:14px; color:rgba(255,255,255,0.65); max-width:460px; margin:0 0 18px; }
.pill-white { background:#fff; color:#1a2352; border-radius:50px; padding:11px 24px; font-size:14px; font-weight:600; }
.achieve { display:flex; gap:16px; padding:20px 40px; background:#fff; }
.a-item { flex:1; }
.a-item .eyebrow { font-size:13px; color:#046cb8; font-weight:600; margin-bottom:4px; }
.a-item .txt { font-size:15px; font-weight:600; }
.outline-pill { border:1px solid #000; border-radius:999px; color:#1a2352; font-size:11px; padding:4px 12px; margin-top:8px; display:inline-block; }
.moon { background:#402060; padding:24px 40px; display:flex; gap:16px; align-items:center; }
.m-card { flex:1; background:rgba(255,255,255,0.06); border-radius:16px; padding:16px; }
.m-card .k { color:#fff3b7; font-weight:600; font-size:15px; margin-bottom:4px; }
.m-card .v { color:rgba(255,255,255,0.7); font-size:12px; }
.stat { font-size:28px; font-weight:400; color:#fff3b7; }
</style></head>
<body>
<div class="hero">
<nav>
<p class="brand">Corca</p>
<div class="navlinks"><span>Product</span><span>About</span><span>Careers</span><span>Blog</span></div>
<button class="pill-white">Learn More</button>
</nav>
<h1>Corca is changing the world with AI technology</h1>
<p>From research to product — an AI lab proven by benchmarks.</p>
<button class="pill-white">Try it now</button>
</div>
<div class="achieve">
<div class="a-item"><div class="eyebrow">Named a 2024 Rising Unicorn!</div><div class="txt">Recognized as a next-generation AI startup</div></div>
<div class="a-item"><div class="eyebrow">Ranked #7 globally, #1 domestically!</div><div class="txt">Results announced from a global benchmark<span class="outline-pill">Read Article</span></div></div>
</div>
<div class="moon">
<div class="m-card"><div class="k">Moonlight</div><div class="v">AI Colleague for Research Papers</div><div class="stat">100,000+</div></div>
<div class="m-card"><div class="k">Papers Read</div><div class="v">Total papers processed</div><div class="stat">1.7M+</div></div>
<div class="m-card"><div class="k">Active Teams</div><div class="v">Adopted by labs and companies</div><div class="stat">150+</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #292929;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #292929;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #292929; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7c81; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #ba0e0e; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #f8f8f8; color: #ba0e0e;
border: 1px solid #ba0e0e; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #292929;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7c81; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ba0e0e; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f8f8; color:#292929; box-sizing:border-box;
font-family:'Nunito',Arial,sans-serif; }
* { box-sizing:border-box; }
h1,h2,.brand,.btn,.title { font-family:'Poppins',Arial,sans-serif; }
nav { height:64px; background:#262626; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:20px; font-weight:600; color:#fff; }
.navlinks { display:flex; gap:20px; font-size:15px; font-weight:600; color:#fff; }
.searchbox { display:flex; padding:16px 32px; background:#f3f3f8; align-items:center; gap:10px; }
.search-input { flex:1; height:44px; border-radius:12px; border:2px solid #ba0e0e; background:#fff; display:flex; align-items:center;
padding:0 16px; font-size:14px; color:#7b7c81; }
.search-btn { background:#ba0e0e; color:#fff; font-weight:600; padding:12px 22px; border-radius:8px; font-size:14px; }
.hero { height:130px; background:#262626; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.hero h1 { color:#fff; font-size:30px; font-weight:700; margin:0; max-width:460px; line-height:1.2; }
.hero .cta { background:#e32e00; color:#fff; font-weight:600; padding:12px 26px; border-radius:8px; font-size:14px; }
.swatches { display:flex; gap:8px; }
.swatch { width:20px; height:20px; border-radius:50%; border:2px solid #444; }
.trust-row { display:flex; gap:14px; padding:14px 32px; }
.trust { flex:1; background:#f3f3f8; border:1px solid #e6e6e6; border-radius:8px; padding:10px 14px; font-size:12px; color:#504d45; text-align:center; }
.trust b { display:block; color:#292929; font-size:12px; margin-bottom:2px; }
.grid { display:flex; gap:14px; padding:6px 32px 0; }
.card { flex:1; background:#ffffff; border:1px solid #e6e6e6; border-radius:12px; padding:14px; position:relative; }
.card .art { height:80px; background:#f8f8f8; border-radius:8px; margin-bottom:10px; display:flex; align-items:center; justify-content:center; }
.cartridge { width:24px; height:44px; border-radius:4px; background:#ba0e0e; }
.badge-row { display:flex; gap:6px; margin-bottom:6px; }
.badge { font-size:10px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:4px; letter-spacing:0.3px; }
.badge.usa { background:#ba0e0e; color:#fff; }
.badge.compat { background:#292929; color:#fff; }
.card .name { font-size:14px; font-weight:600; margin-bottom:3px; }
.card .price { font-size:22px; font-weight:700; color:#ba0e0e; }
footer { position:absolute; bottom:0; left:0; right:0; height:88px; background:#030303; color:#e6e6e6; display:flex;
align-items:center; justify-content:space-between; padding:0 32px; }
footer .col { font-size:12px; line-height:1.9; }
footer .col b { display:block; color:#fff; margin-bottom:3px; }
.wrap { position:relative; height:640px; }
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="brand">Doorstepink</div>
<div class="navlinks"><span>Black Cartridges</span><span>Color Cartridges</span><span>Combo Packs</span><span>High-Yield</span></div>
</nav>
<div class="searchbox">
<div class="search-input">Enter your printer model (e.g. HP 64XL)</div>
<div class="search-btn">Find Ink</div>
</div>
<div class="hero">
<h1>Ink cartridges made in the USA, delivered to your door.</h1>
<div style="display:flex; align-items:center; gap:20px;">
<div class="swatches"><div class="swatch" style="background:#ffcb67"></div><div class="swatch" style="background:#ed66b2"></div><div class="swatch" style="background:#86469c"></div><div class="swatch" style="background:#1b6109"></div></div>
<a class="cta">Shop Cartridges</a>
</div>
</div>
<div class="trust-row">
<div class="trust"><b>Made in USA</b>Every cartridge</div>
<div class="trust"><b>Fast Shipping</b>2-day delivery</div>
<div class="trust"><b>Satisfaction Guaranteed</b>100% refund</div>
<div class="trust"><b>Quality Tested</b>Page-yield verified</div>
</div>
<div class="grid">
<div class="card"><div class="badge-row"><span class="badge usa">USA</span><span class="badge compat">HP 64XL</span></div><div class="art"><div class="cartridge"></div></div><div class="name">Black Ink Cartridge</div><div class="price">$19.99</div></div>
<div class="card"><div class="badge-row"><span class="badge usa">USA</span><span class="badge compat">EPSON 220</span></div><div class="art"><div class="cartridge" style="background:#86469c;"></div></div><div class="name">Color Combo Pack</div><div class="price">$34.99</div></div>
<div class="card"><div class="badge-row"><span class="badge compat">CANON PG-245</span></div><div class="art"><div class="cartridge" style="background:#1b6109;"></div></div><div class="name">High-Yield Cartridge</div><div class="price">$27.99</div></div>
<div class="card"><div class="badge-row"><span class="badge usa">USA</span></div><div class="art"><div class="cartridge" style="background:#ffcb67;"></div></div><div class="name">Photo Ink Set</div><div class="price">$22.99</div></div>
</div>
<footer>
<div class="col"><b>Shop</b>By Printer<br>Combo Packs</div>
<div class="col"><b>Support</b>Yield Guide<br>Contact</div>
<div class="col"><b>Doorstepink</b>© Made in the USA</div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeefe9; color: #23251d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeefe9; color: #23251d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 21px; font-weight: 700; line-height: 1.4; letter-spacing: -0.5px; margin: 0; color: #23251d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; margin: 0; color: #6c6e63; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.5; background: #f7a501; color: #23251d;
border: none; border-radius: 6px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.5; background: #e5e7e0; color: #23251d;
border: 1px solid #f7a501; border-radius: 6px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #23251d;
border: 1px solid #bbbcb6; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c6e63; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.33; background: transparent; color: #4d4f46;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eeefe9; color:#23251d; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
/* 크림 캔버스 + 손그림 고슴도치 마스코트가 마진에 흩어진 스케치북 느낌 —
다크테크 장르 관례를 일부러 거부한다. */
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:16px; font-weight:800; margin:0; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#4d4f46; font-weight:700; }
.btn { background:#f7a501; color:#23251d; border:none; border-radius:6px; padding:9px 18px; font-weight:800; font-size:13px; }
.wrap { position:relative; padding:10px 40px 0; }
/* 손그림풍 고슴도치 — 원+삼각형 가시로 절제된 라인아트 */
.hog { position:absolute; width:54px; height:40px; }
.hog .body { position:absolute; width:40px; height:28px; background:#4d4f46; border-radius:50% 50% 40% 40%; left:6px; top:10px; }
.hog .spike { position:absolute; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:9px solid #4d4f46; top:2px; }
.hog .face { position:absolute; width:10px; height:8px; background:#f7a501; border-radius:50%; left:0; top:16px; }
.h1 { top:8px; right:70px; } .h1 .spike { left:14px; }
.h2 { top:64px; left:44px; transform:scaleX(-1); } .h2 .spike { left:14px; }
h1 { font-size:32px; font-weight:800; letter-spacing:-0.6px; margin:8px 0 6px; max-width:560px; line-height:1.3; }
.sub { font-size:13px; color:#4d4f46; max-width:480px; line-height:1.43; margin:0 0 18px; }
.row { display:flex; gap:14px; padding:0 40px; }
.codecard { flex:1; background:#ffffff; border:1px solid #bfc1b7; border-radius:6px; padding:14px;
font-family:"SF Mono","Cascadia Code",Menlo,Consolas,monospace; font-size:11px; line-height:1.6; color:#33342d; }
.codecard .k { color:#7c44a6; } .codecard .s { color:#2c8c66; }
.chartcard { flex:1; background:#ffffff; border:1px solid #bfc1b7; border-radius:6px; padding:14px; }
.chartcard h5 { font-size:12px; font-weight:700; margin:0 0 10px; color:#23251d; }
.bars { display:flex; align-items:flex-end; gap:6px; height:60px; }
.bar { flex:1; border-radius:3px 3px 0 0; }
.b1 { height:40%; background:#2c84e0; } .b2 { height:70%; background:#f7a501; } .b3 { height:55%; background:#2c8c66; }
.b4 { height:90%; background:#cd4239; } .b5 { height:60%; background:#7c44a6; }
footer { padding:16px 40px; font-size:11px; color:#6c6e63; display:flex; justify-content:space-between; margin-top:auto; }
</style></head>
<body>
<div class="hog h1"><span class="spike"></span><span class="body"></span><span class="face"></span></div>
<div class="hog h2"><span class="spike"></span><span class="body"></span><span class="face"></span></div>
<nav>
<p class="brand">PostHog</p>
<div class="navlinks"><span>Product</span><span>Docs</span><span>Pricing</span></div>
<button class="btn">Get started — free</button>
</nav>
<div class="wrap">
<h1>How developers build successful products</h1>
<p class="sub">Product analytics, session replay, feature flags, and A/B testing — in one platform.</p>
</div>
<div class="row">
<div class="codecard"><span class="k">posthog</span>.capture(<span class="s">'user_signed_up'</span>, {<br> plan: <span class="s">'growth'</span><br>})</div>
<div class="chartcard"><h5>Weekly active users</h5>
<div class="bars"><div class="bar b1"></div><div class="bar b2"></div><div class="bar b3"></div><div class="bar b4"></div><div class="bar b5"></div></div>
</div>
</div>
<footer>
<span>© PostHog</span>
<span>Product · Docs · Pricing · Blog</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #19212c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #19212c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; margin: 0; color: #19212c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ff8f1c; color: #000000;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #19212c; color: #ffffff;
border: 1px solid #ff8f1c; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #333132;
border: 1px solid #c6c8ca; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff8f1c; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#19212c; font-family:'Arial Narrow',Arial,sans-serif; color:#fff; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #2a3340;}
.logo{font-size:19px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#9ca3af;}
.navlinks .on{color:#ff8f1c;}
.stage{display:flex;height:300px;border-bottom:1px solid #2a3340;}
.preview{width:44%;position:relative;background:radial-gradient(circle at 45% 55%,#232c38,#19212c 70%);}
.pad{position:absolute;left:100px;top:80px;width:180px;height:120px;border-radius:50% 50% 40% 40%;background:linear-gradient(160deg,#232c38,#121212);}
.stick{position:absolute;left:130px;top:100px;width:34px;height:34px;border-radius:50%;background:#ff8f1c;}
.stick2{position:absolute;left:210px;top:130px;width:34px;height:34px;border-radius:50%;background:#2563eb;}
.badge{position:absolute;top:14px;right:14px;background:#ff8f1c;color:#19212c;font-size:10px;font-weight:800;letter-spacing:1px;padding:3px 8px;border-radius:3px;}
.opts{flex:1;padding:20px 30px;}
.tabs{display:flex;gap:16px;font-size:11px;font-weight:700;text-transform:uppercase;color:#9ca3af;margin-bottom:16px;}
.tabs .on{color:#ff8f1c;border-bottom:2px solid #ff8f1c;padding-bottom:6px;}
.opts h1{font-size:24px;font-weight:800;text-transform:uppercase;margin:0 0 8px;letter-spacing:.5px;}
.opts p{font-size:12.5px;color:#9ca3af;line-height:1.5;max-width:340px;margin:0 0 14px;}
.swatchlbl{font-size:10px;font-weight:700;text-transform:uppercase;color:#9ca3af;margin-bottom:8px;}
.swatchrow{display:flex;gap:8px;margin-bottom:16px;}
.swatch{width:22px;height:22px;border-radius:50%;border:2px solid #19212c;box-shadow:0 0 0 1px #444;}
.btn{width:fit-content;background:#ff8f1c;color:#19212c;font-size:13px;font-weight:800;text-transform:uppercase;padding:12px 24px;letter-spacing:.5px;}
.sec{padding:16px 34px 0;}
.seclabel{font-size:11px;font-weight:700;text-transform:uppercase;color:#9ca3af;margin-bottom:12px;letter-spacing:1px;}
.grid{display:flex;gap:14px;}
.card{width:150px;background:#232c38;padding:10px;position:relative;}
.tag{position:absolute;top:8px;left:8px;background:#2563eb;color:#fff;font-size:9px;font-weight:800;padding:2px 6px;}
.thumb{height:74px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:700;text-transform:uppercase;color:#fff;height:30px;overflow:hidden;line-height:1.3;}
.price{font-size:13px;font-weight:700;color:#ff8f1c;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Scuf Gaming</div>
<div class="navlinks"><div class="on">Configurator</div><div>Controllers</div><div>Accessories</div><div>Pro Circuit</div></div>
</div>
<div class="stage">
<div class="preview"><span class="badge">PRO</span><div class="pad"></div><div class="stick"></div><div class="stick2"></div></div>
<div class="opts">
<div class="tabs"><div class="on">Shell</div><div>Paddles</div><div>Triggers</div><div>Grip</div></div>
<h1>Instinct Pro Controller</h1>
<p>Configure trigger stops, paddle placement, and shell color for your exact playstyle.</p>
<div class="swatchlbl">Shell Color</div>
<div class="swatchrow">
<div class="swatch" style="background:#19212c;"></div>
<div class="swatch" style="background:#ece81a;"></div>
<div class="swatch" style="background:#ff0a02;"></div>
<div class="swatch" style="background:#3b8649;"></div>
<div class="swatch" style="background:#fafafa;"></div>
</div>
<div class="btn">Build Your Controller</div>
</div>
</div>
<div class="sec">
<div class="seclabel">Limited Series</div>
<div class="grid">
<div class="card"><span class="tag">LIMITED</span><div class="thumb" style="background:linear-gradient(140deg,#ff8f1c,#19212c)"></div><div class="pname">Envision Pro</div><div class="price">$219.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#3b8649,#19212c)"></div><div class="pname">Reflex Pro</div><div class="price">$179.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#2563eb,#19212c)"></div><div class="pname">Vantage 2</div><div class="price">$199.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #989898; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #c00000; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: transparent; color: #111111;
border: 1px solid #c00000; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #989898; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #c00000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#ffffff; color:#111111; box-sizing:border-box; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;background:#ffffff;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 26px;}
.nav .logo{font-weight:700;font-size:15px;letter-spacing:.5px;text-transform:uppercase;}
.nav .links{display:flex;gap:20px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.3px;}
.nav .links span:first-child{color:#c00000;}
.wrap{display:flex;height:584px;}
.left{width:340px;background:#ffffff;display:flex;align-items:center;justify-content:center;position:relative;padding:24px;border-right:1px solid #dedede;}
.cover{width:220px;height:300px;background:linear-gradient(160deg,#111111,#404040);position:relative;box-shadow:0 8px 20px rgba(0,0,0,.15);}
.cover::before{content:'';position:absolute;top:20px;left:20px;right:20px;height:3px;background:#c00000;}
.cover::after{content:'GRAPHIC DESIGN NOW';position:absolute;bottom:30px;left:20px;right:20px;color:#fff;font-size:14px;font-weight:700;letter-spacing:.5px;}
.badge{position:absolute;top:24px;left:24px;background:#c00000;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:4px;}
.right{flex:1;padding:28px 32px;display:flex;flex-direction:column;}
.crumb{font-size:13px;color:#989898;margin-bottom:10px;}
.crumb b{color:#111;font-weight:400;}
h1{font-size:24px;font-weight:600;margin:0 0 8px;}
.author{font-size:16px;font-weight:500;color:#121212;margin:0 0 12px;}
.price{font-size:16px;font-weight:500;color:#989898;margin:0 0 16px;}
.desc{font-size:14px;color:#121212;line-height:1.5;margin:0 0 18px;}
.specs{border:1px solid #dedede;border-radius:4px;font-size:13px;margin-bottom:18px;}
.spec-row{display:flex;padding:8px 14px;border-bottom:1px solid #dedede;}
.spec-row:last-child{border-bottom:none;}
.spec-row .k{width:110px;color:#989898;}
.spec-row .v{color:#121212;}
.actions{display:flex;gap:10px;margin-top:auto;}
.btn-primary{background:#c00000;color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;padding:12px 24px;height:44px;display:flex;align-items:center;}
.btn-secondary{background:transparent;color:#111;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border:1px solid #dedede;border-radius:4px;padding:11px 23px;height:44px;display:flex;align-items:center;}
</style>
</head>
<body>
<div class="nav"><div class="logo">Counter Print</div><div class="links"><span>Books</span><span>Zines</span><span>Journals</span><span>Prints</span></div></div>
<div class="wrap">
<div class="left"><div class="badge">Signed Edition</div><div class="cover"></div></div>
<div class="right">
<div class="crumb">Books / Design Studies / <b>Graphic Design Now</b></div>
<h1>Graphic Design Now: A Survey</h1>
<p class="author">Compiled by Robert Frost Press</p>
<p class="price">$34.00</p>
<p class="desc">A survey of contemporary graphic design practice, printed on uncoated stock and bound as a small-press catalog. Includes forty studio profiles and an index of typefaces used throughout.</p>
<div class="specs">
<div class="spec-row"><span class="k">Format</span><span class="v">Hardback, 240pp</span></div>
<div class="spec-row"><span class="k">Size</span><span class="v">210 × 280mm</span></div>
<div class="spec-row"><span class="k">Publisher</span><span class="v">Counter-Print</span></div>
</div>
<div class="actions">
<div class="btn-primary">Add to Cart</div>
<div class="btn-secondary">Continue Shopping</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #693bf2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #693bf2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #b6a1f4; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #693bf2; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #693bf2; color: #f5f5f5;
border: 1px solid #7f59f2; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #b6a1f4; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #815af4; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#293341; box-sizing:border-box;
font-family:Pretendard, "Apple SD Gothic Neo", -apple-system, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-size:18px; font-weight:700; }
.brand b { color:#693bf2; }
.cta { background:#693bf2; color:#fff; border-radius:6px; padding:7px 14px; font-size:13px; font-weight:500; }
.catrow { display:flex; gap:10px; padding:6px 30px; }
.pill { border-radius:16px; padding:8px 14px; font-size:14px; background:#f6f7f9; color:#293341; }
.pill.active { background:#293341; color:#fff; }
.search { margin:14px 30px 0; background:#f6f7f9; border-radius:8px; padding:12px 14px; color:#aab4bf; font-size:15px; max-width:420px; }
.regionrow { display:flex; gap:8px; padding:12px 30px 0; }
.chip { border-radius:36px; padding:6px 16px; background:#f6f7f9; color:#293341; font-size:13px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:18px 30px 0; }
.pcard { background:#ffffff; border:1px solid #e0e5eb; border-radius:8px; padding:14px; }
.pcard .top { display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.pcard .av { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#c8bdfb,#693bf2); }
.pcard h3 { font-size:15px; font-weight:700; margin:0; }
.pcard .rating { font-size:12px; color:#ffc300; }
.pcard .rating b { color:#293341; font-weight:400; margin-left:3px; }
.pcard p { font-size:12px; color:#6a7685; margin:8px 0 0; line-height:1.5; }
.tags { display:flex; gap:6px; margin-top:8px; }
.tag { background:#eff1f5; color:#1c242f; font-size:10.5px; border-radius:6px; padding:3px 7px; }
footer { position:absolute; bottom:0; width:960px; padding:12px 30px; border-top:1px solid #e0e5eb;
display:flex; justify-content:space-between; font-size:11px; color:#aab4bf; }
</style></head>
<body>
<nav>
<p class="brand"><b>Find</b>Soomgo</p>
<span class="cta">Become a Pro</span>
</nav>
<div class="catrow">
<span class="pill active">Cleaning</span><span class="pill">Tutoring</span><span class="pill">Interior</span>
<span class="pill">Events/Photo</span><span class="pill">Legal/Tax</span>
</div>
<div class="search">What service do you need?</div>
<div class="regionrow"><span class="chip">Seoul</span><span class="chip">Gyeonggi</span><span class="chip">Incheon</span></div>
<div class="cards">
<div class="pcard"><div class="top"><div class="av"></div><h3>Jane Kim</h3></div><div class="rating">★★★★★ <b>4.9 (128)</b></div>
<p>Moving cleanup specialist, same-day quotes available.</p><div class="tags"><span class="tag">Move-out</span><span class="tag">Seoul</span></div></div>
<div class="pcard"><div class="top"><div class="av"></div><h3>Mike Park</h3></div><div class="rating">★★★★★ <b>4.8 (74)</b></div>
<p>Middle school math tutoring, online or in-person.</p><div class="tags"><span class="tag">Tutoring</span><span class="tag">Math</span></div></div>
<div class="pcard"><div class="top"><div class="av"></div><h3>Sarah Lee Studio</h3></div><div class="rating">★★★★☆ <b>4.7 (52)</b></div>
<p>Wedding & profile photography, portfolio available.</p><div class="tags"><span class="tag">Photo</span><span class="tag">Wedding</span></div></div>
</div>
<footer>
<span>Find the hidden pro, Soomgo</span>
<span>Request Quote · Find a Pro · More</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.25; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #606060; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.08em; background: #a48b5f; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.08em; background: #ffffff; color: #222222;
border: 1px solid #a48b5f; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #606060; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.04em; background: #eae2d8; color: #353535;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#4a4a4a; font-family:'Chalet NewYork1960',Arial,sans-serif;
}
*, *::before, *::after { box-sizing:border-box; }
.wrap{ position:relative; width:960px; height:640px; }
.promo-strip{ height:26px; background:#2c251c; display:flex; align-items:center; justify-content:center; }
.promo-strip span{ font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:#ff9635; }
.nav{ height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#ffffff; }
.logo{ font-family:'Chronicle Display',Georgia,serif; font-weight:700; font-size:19px; color:#2c251c; }
.navlinks{ display:flex; gap:24px; }
.navlinks span{ font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:#4a4a4a; }
.navlinks span.active{ color:#a48b5f; }
.cta{ font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:#ffffff; background:#a48b5f; padding:9px 16px; }
.hero{ height:230px; display:flex; align-items:center; padding:0 34px; gap:26px; background:#faf7f0; }
.hero-text{ width:390px; }
.kicker{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#a48b5f; margin-bottom:10px; }
.h1{ font-family:'Chronicle Display',Georgia,serif; font-weight:300; font-size:32px; line-height:1.2; color:#2c251c; margin-bottom:10px; }
.sub{ font-size:13px; line-height:1.5; color:#4a4a4a; max-width:330px; margin-bottom:16px; }
.btn{ font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:#ffffff; background:#a48b5f; padding:13px 24px; width:fit-content; }
.fixture-area{ flex:1; height:200px; position:relative; }
.lamp-shade{ position:absolute; left:210px; top:20px; width:80px; height:56px; border-radius:2px 2px 40px 40px; background:linear-gradient(160deg,#a48b5f,#2c251c); }
.lamp-arm{ position:absolute; left:246px; top:76px; width:8px; height:60px; background:#2c251c; }
.lamp-base{ position:absolute; left:222px; top:134px; width:56px; height:10px; border-radius:4px; background:#2c251c; }
.badge-new{ position:absolute; right:24px; top:18px; background:#ff9635; color:#2c251c; font-size:10px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:5px 12px; }
.section-title{ padding:14px 34px 8px; font-size:15px; font-weight:700; color:#2c251c; }
.grid{ display:flex; gap:16px; padding:0 34px; }
.card{ width:200px; background:#ffffff; border:1px solid #ececec; padding:12px; }
.card-img{ width:100%; height:70px; margin-bottom:8px; }
.card-title{ font-family:'Chronicle Display',Georgia,serif; font-size:14px; font-weight:700; color:#2c251c; margin-bottom:2px; }
.card-note{ font-size:10px; color:#8a8a8a; margin-bottom:8px; }
.row{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-family:'Chronicle Display',Georgia,serif; font-size:13px; font-weight:700; color:#2c251c; }
.swatches{ display:flex; gap:5px; }
.sw{ width:12px; height:12px; border-radius:50%; }
.footer{ position:absolute; bottom:0; left:0; width:960px; height:48px; background:#2c251c; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }
.footer span{ font-size:11px; color:#c9bfa8; }
</style>
<div class="wrap">
<div class="promo-strip"><span>Fall Lighting Sale — Up to 30% Off Select Collections</span></div>
<div class="nav">
<div class="logo">Hinkley</div>
<div class="navlinks">
<span class="active">Chandeliers</span>
<span>Sconces</span>
<span>Outdoor</span>
<span>Ceiling Fans</span>
</div>
<div class="cta">Find a Dealer</div>
</div>
<div class="hero">
<div class="hero-text">
<div class="kicker">Brass, Not Chrome</div>
<div class="h1">Fixtures with the warmth of oiled hardware.</div>
<div class="sub">Antique brass and linen tones on a warm canvas — lighting built to look like it belongs in the room, not on a shelf.</div>
<div class="btn">Shop the Collection</div>
</div>
<div class="fixture-area">
<div class="badge-new">New</div>
<div class="lamp-shade"></div>
<div class="lamp-arm"></div>
<div class="lamp-base"></div>
</div>
</div>
<div class="section-title">Featured Fixtures</div>
<div class="grid">
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#a48b5f,#2c251c);"></div>
<div class="card-title">Somerset Chandelier</div>
<div class="card-note">Aged Brass · 5-Light</div>
<div class="row"><span class="price">$649</span><span class="swatches"><span class="sw" style="background:#a48b5f;"></span><span class="sw" style="background:#2c251c;"></span></span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#2c251c,#a48b5f);"></div>
<div class="card-title">Alder Sconce</div>
<div class="card-note">Linen Shade</div>
<div class="row"><span class="price">$189</span><span class="swatches"><span class="sw" style="background:#a48b5f;"></span></span></div>
</div>
<div class="card">
<div class="card-img" style="background:linear-gradient(160deg,#e02b27,#2c251c);"></div>
<div class="card-title">Harbor Outdoor Post</div>
<div class="card-note">Weather-Rated</div>
<div class="row"><span class="price">$329</span><span class="swatches"><span class="sw" style="background:#2c251c;"></span></span></div>
</div>
</div>
<div class="footer">
<span>© Hinkley Lighting</span>
<span>Dealer Locator · Warranty</span>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0f0f0f; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0f0f0f; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #00bcd4; color: #000000;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #222222; color: #ffffff;
border: 1px solid #00bcd4; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #222222; color: #ffffff;
border: 1px solid #121212; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.2px; background: #00bcd4; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Drop Mockup</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
background:#0f0f0f; color:#fff;
}
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #2a2a2a;}
.logo{font-size:18px;font-weight:600;letter-spacing:-0.5px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:0.2px;color:#999;}
.navlinks span.active{color:#00bcd4;border-bottom:2px solid #00bcd4;padding-bottom:16px;}
.searchbar{background:#222222;border:1px solid #2a2a2a;border-radius:9999px;padding:8px 16px;font-size:13px;color:#666;width:180px;}
.cart{position:relative;width:24px;height:24px;}
.cartbadge{position:absolute;top:-6px;right:-8px;background:#00bcd4;color:#fff;font-size:10px;border-radius:9999px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;}
.hero{height:200px;display:flex;align-items:center;padding:0 32px;background:linear-gradient(90deg,#141414,#0f0f0f);}
.hero h1{font-size:36px;font-weight:600;letter-spacing:-0.5px;margin:0 0 10px;max-width:480px;line-height:1.2;}
.hero p{color:#999;font-size:14px;max-width:420px;margin:0 0 16px;}
.herobtn{background:#00bcd4;color:#fff;font-size:16px;font-weight:600;padding:12px 24px;border-radius:4px;display:inline-block;}
.section{padding:16px 32px 0;}
.tabs{display:flex;gap:20px;margin-bottom:14px;border-bottom:1px solid #2a2a2a;padding-bottom:10px;}
.tab{font-size:14px;font-weight:600;color:#666;}
.tab.active{color:#00bcd4;border-bottom:2px solid #00bcd4;padding-bottom:10px;margin-bottom:-11px;}
.grid{display:flex;gap:14px;}
.card{flex:1;background:#222222;border:1px solid transparent;}
.card-img{height:120px;position:relative;}
.card-img.c1{background:linear-gradient(135deg,#3a3a3a,#00bcd4);}
.card-img.c2{background:linear-gradient(135deg,#c72d00,#3a3a3a);}
.card-img.c3{background:linear-gradient(135deg,#31862d,#3a3a3a);}
.card-img.c4{background:linear-gradient(135deg,#07ccd7,#1a1a1a);}
.badge{position:absolute;top:6px;left:6px;background:#00bcd4;color:#fff;font-size:9px;font-weight:600;letter-spacing:0.2px;text-transform:uppercase;padding:2px 6px;}
.stockbadge{position:absolute;top:6px;right:6px;background:#4caf50;color:#fff;font-size:9px;font-weight:600;text-transform:uppercase;padding:2px 6px;}
.card-body{padding:10px;}
.card-title{font-size:14px;font-weight:500;margin:0 0 4px;}
.stars{color:#ffc107;font-size:11px;margin-bottom:4px;}
.card-price{font-size:18px;font-weight:600;}
</style>
<nav class="nav">
<div class="logo">Drop</div>
<div class="navlinks">
<span class="active">Keyboards</span><span>Switches</span><span>Keycaps</span><span>Community</span>
</div>
<div style="display:flex;gap:12px;align-items:center;">
<div class="searchbar">Search parts…</div>
<div class="cart">🛒<div class="cartbadge">3</div></div>
</div>
</nav>
<div class="hero">
<div>
<h1>Built by the community.<br>Tuned for the switch.</h1>
<p>Custom mechanical keyboards, switches, and keycaps — engineered in the open.</p>
<div class="herobtn">Shop Keyboards</div>
</div>
</div>
<div class="section">
<div class="tabs">
<div class="tab active">Trending</div>
<div class="tab">New Drops</div>
<div class="tab">Group Buys</div>
</div>
<div class="grid">
<div class="card"><div class="card-img c1"><span class="badge">New</span><span class="stockbadge">In Stock</span></div><div class="card-body"><div class="card-title">CTRL Alps V3</div><div class="stars">★★★★★</div><div class="card-price">$349</div></div></div>
<div class="card"><div class="card-img c2"></div><div class="card-body"><div class="card-title">Halo Clears Set</div><div class="stars">★★★★☆</div><div class="card-price">$59</div></div></div>
<div class="card"><div class="card-img c3"></div><div class="card-body"><div class="card-title">SA Cannonkeys</div><div class="stars">★★★★★</div><div class="card-price">$95</div></div></div>
<div class="card"><div class="card-img c4"><span class="badge">New</span></div><div class="card-body"><div class="card-title">ALT Mechanical</div><div class="stars">★★★★☆</div><div class="card-price">$219</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f7f7; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f7f7f7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fefefe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#0E0F0C; box-sizing:border-box;
font-family:'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.tnum { font-variant-numeric: tabular-nums; }
.wrap { width:100%; height:100%; padding:24px 28px; display:flex; flex-direction:column; gap:14px; }
.hdr { height:32px; display:flex; align-items:center; justify-content:space-between; }
.brand { font-size:18px; font-weight:800; letter-spacing:-0.3px; color:#163300; margin:0; }
.hdr-icons { display:flex; gap:14px; align-items:center; }
.avatar-sm { width:28px; height:28px; border-radius:50%; background:#EAF9DC; border:1.5px solid #163300; }
.main { display:flex; gap:22px; flex:1; min-height:0; }
.lcol { width:360px; display:flex; flex-direction:column; gap:16px; }
.hero { background:#0E2200; border-radius:20px; padding:22px; box-shadow:0 12px 32px rgba(14,34,0,0.25);
display:flex; flex-direction:column; gap:10px; }
.hero .lbl { font-size:11px; font-weight:800; letter-spacing:0.6px; text-transform:uppercase; color:#9FE870; }
.hero .total { font-size:40px; font-weight:800; letter-spacing:-0.6px; color:#FFFFFF; line-height:1.05; }
.hero-row { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.chip { display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.08); border-radius:8px; padding:6px 10px; }
.chip .flag { width:18px; height:18px; border-radius:50%; background:#9FE870; }
.chip span { font-size:13px; font-weight:600; color:#FFFFFF; }
.add-money { background:#9FE870; color:#163300; font-size:13px; font-weight:800; border-radius:16px; padding:8px 14px; }
.stack { border:1px solid #E5E5E5; border-radius:16px; overflow:hidden; flex:1; }
.crow { display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid #E5E5E5; }
.crow:last-child { border-bottom:none; }
.flagchip { width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:800; color:#163300; }
.fc-gbp { background:#EAF9DC; } .fc-eur { background:#F0EFEA; } .fc-usd { background:#EAF9DC; }
.cinfo { margin-left:12px; flex:1; min-width:0; }
.ccode { font-size:16px; font-weight:600; color:#0E0F0C; }
.cname { font-size:12px; color:#6B6F66; }
.cbal { font-size:20px; font-weight:800; color:#0E0F0C; text-align:right; }
.rcol { flex:1; display:flex; flex-direction:column; gap:14px; min-width:0; }
.ticker { display:flex; align-items:center; gap:8px; padding:10px 16px; background:#F7F7F7; border-radius:12px; }
.ticker .dot { width:7px; height:7px; border-radius:50%; background:#2F8F4E; }
.ticker b { font-size:15px; font-weight:600; }
.ticker .g { font-size:11px; color:#6B6F66; margin-left:auto; }
.feecard { background:#FFFFFF; border:1px solid #E5E5E5; border-radius:16px; padding:20px; flex:1;
display:flex; flex-direction:column; gap:0; position:relative; }
.fline { display:flex; justify-content:space-between; align-items:center; padding:9px 0 9px 20px; position:relative; }
.fline::before { content:''; position:absolute; left:4px; top:50%; width:8px; height:8px; border-radius:50%;
background:#D2D2D2; transform:translateY(-50%); }
.fline::after { content:''; position:absolute; left:8px; top:-2px; bottom:-2px; width:1px; background:#E5E5E5; }
.fline:first-child::after { top:50%; }
.fline:last-child::after { bottom:50%; }
.fline .k { font-size:14px; color:#6B6F66; }
.fline .v { font-size:15px; font-weight:600; color:#0E0F0C; }
.fline.final { margin-top:6px; background:#EAF9DC; border-radius:10px; padding:12px 14px 12px 14px; }
.fline.final::before, .fline.final::after { display:none; }
.fline.final .k { font-size:14px; font-weight:700; color:#163300; }
.fline.final .v { font-size:20px; font-weight:800; color:#163300; }
.stepper { display:flex; align-items:center; justify-content:space-between; padding:12px 6px; }
.step { display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; flex:1; }
.step .rail { position:absolute; top:11px; left:calc(-50% + 12px); width:calc(100% - 24px); height:2px; background:#E5E5E5; z-index:0; }
.step:first-child .rail { display:none; }
.step.done .rail { background:#9FE870; }
.dotwrap { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:700; z-index:1; }
.step.done .dotwrap { background:#9FE870; color:#163300; }
.step.active .dotwrap { background:#163300; color:#FFFFFF; }
.step.todo .dotwrap { background:#E5E5E5; color:#9A9D95; }
.steplbl { font-size:11px; font-weight:600; color:#6B6F66; }
</style></head>
<body>
<div class="wrap">
<div class="hdr">
<p class="brand">Wise (iOS)</p>
<div class="hdr-icons">
<span style="font-size:13px;color:#6B6F66;font-weight:600;">Recipients</span>
<span style="font-size:13px;color:#6B6F66;font-weight:600;">Payments</span>
<div class="avatar-sm"></div>
</div>
</div>
<div class="main">
<div class="lcol">
<div class="hero">
<span class="lbl">Total balance</span>
<div class="total tnum">£12,480.65</div>
<div class="hero-row">
<div class="chip"><div class="flag"></div><span>3 currencies</span></div>
<div class="add-money">+ Add money</div>
</div>
</div>
<div class="stack">
<div class="crow">
<div class="flagchip fc-gbp">GB</div>
<div class="cinfo"><div class="ccode">GBP</div><div class="cname">British Pound</div></div>
<div class="cbal tnum">£9,300.10</div>
</div>
<div class="crow">
<div class="flagchip fc-eur">EU</div>
<div class="cinfo"><div class="ccode">EUR</div><div class="cname">Euro</div></div>
<div class="cbal tnum">€3,180.55</div>
</div>
<div class="crow">
<div class="flagchip fc-usd">US</div>
<div class="cinfo"><div class="ccode">USD</div><div class="cname">US Dollar</div></div>
<div class="cbal tnum">$0.00</div>
</div>
</div>
</div>
<div class="rcol">
<div class="ticker">
<div class="dot"></div>
<b>1 GBP = 1.1632 EUR</b>
<span class="g">Guaranteed for 24h</span>
</div>
<div class="feecard">
<div class="fline"><span class="k">You send</span><span class="v tnum">£1,000.00</span></div>
<div class="fline"><span class="k">Our fee</span><span class="v tnum">£4.31</span></div>
<div class="fline"><span class="k">Amount we convert</span><span class="v tnum">£995.69</span></div>
<div class="fline"><span class="k">Guaranteed rate</span><span class="v tnum">1.1632</span></div>
<div class="fline final"><span class="k">Recipient gets</span><span class="v tnum">€1,158.10</span></div>
</div>
<div class="stepper">
<div class="step done"><div class="dotwrap">✓</div><span class="steplbl">Recipient</span></div>
<div class="step done"><div class="rail"></div><div class="dotwrap">✓</div><span class="steplbl">Amount</span></div>
<div class="step active"><div class="rail"></div><div class="dotwrap">3</div><span class="steplbl">Review</span></div>
<div class="step todo"><div class="rail"></div><div class="dotwrap">4</div><span class="steplbl">Pay</span></div>
</div>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f5; color: #10201c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f5; color: #10201c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #10201c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #666e73; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #1d423c; color: #fdfcee;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #f8f8f5; color: #1d423c;
border: 1px solid #1d423c; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f8f8f5; color: #10201c;
border: 1px solid #bec2bf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666e73; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e3b052; color: #10201c;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f8f5; font-family:'sofia-pro',Helvetica,Arial,sans-serif; color:#3c454f; }
*{box-sizing:border-box;}
.nav{height:72px;background:#f8f8f5;border-bottom:1px solid #dad6c5;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:'Teodor',Georgia,serif;font-size:20px;color:#10201c;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#3c454f;}
.hero{background:#fdfcee;padding:36px 40px;display:flex;align-items:center;justify-content:space-between;}
.heroText{width:52%;}
.h1{font-family:'Teodor',Georgia,serif;font-size:40px;color:#10201c;line-height:1.2;margin:0 0 12px;max-width:400px;}
.sub{font-size:15px;color:#3c454f;line-height:1.6;max-width:340px;margin:0 0 18px;}
.cta{display:inline-block;background:#1d423c;color:#fdfcee;font-size:14px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;padding:14px 28px;border-radius:8px;}
.panbox{width:170px;height:130px;border-radius:9999px 9999px 0 0;background:radial-gradient(circle at 40% 30%,#3c3f42,#161010 80%);position:relative;}
.panbox:after{content:'';position:absolute;right:-40px;top:50px;width:60px;height:14px;background:#a86f5f;border-radius:8px;}
.grid{display:flex;gap:16px;padding:20px 40px 0;}
.card{width:200px;background:#fff;border:1px solid #dad6c5;border-radius:12px;overflow:hidden;position:relative;}
.thumb{height:110px;background:#fdfcee;}
.badge{position:absolute;top:8px;left:8px;background:#e3b052;color:#10201c;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.badge.terra{background:#d58552;color:#fff;}
.cardbody{padding:10px 14px 14px;}
.ptitle{font-family:'freight-text-pro',Georgia,serif;font-size:16px;font-weight:600;color:#10201c;}
.pprice{font-family:'freight-text-pro',Georgia,serif;font-size:18px;font-weight:600;color:#10201c;margin-top:4px;}
.pprice.sale{color:#d58552;}
.footer{position:absolute;bottom:0;left:0;right:0;height:48px;background:#1d423c;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:12px;color:#fdfcee;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Material Kitchen</div>
<div class="navlinks"><span>Cookware</span><span>Knives</span><span>Boards</span><span>Journal</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Tools built to outlast the meal.</div>
<div class="sub">Cast, forged, and finished with a weight that trusts materiality over trend.</div>
<div class="cta">Shop Cookware</div>
</div>
<div class="panbox"></div>
</div>
<div class="grid">
<div class="card"><div class="badge">Best Seller</div><div class="thumb"></div><div class="cardbody"><div class="ptitle">Forest Cast Skillet 10"</div><div class="pprice">$128</div></div></div>
<div class="card"><div class="badge terra">Sale</div><div class="thumb"></div><div class="cardbody"><div class="ptitle">Rift-Sawn Cutting Board</div><div class="pprice sale">$64</div></div></div>
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="ptitle">Umber Forged Chef's Knife</div><div class="pprice">$185</div></div></div>
</div>
<div class="footer"><span>© Material Kitchen Cookware</span><span>Care · Warranty · Gifting</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.2px; background: #0057A4; color: #FFFFFF;
border: none; border-radius: 4px; padding: 8px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.2px; background: #FFFFFF; color: #0057A4;
border: 1px solid #0057A4; border-radius: 4px;
padding: 7px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0.3px; background: #E6F0F9; color: #0057A4;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; background:#ffffff; color:#333333; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:56px;background:#0057A4;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:19px;font-weight:700;color:#ffffff;letter-spacing:0.2px;}
.searchbar{width:400px;height:32px;background:#ffffff;border-radius:2px;display:flex;align-items:center;padding:0 12px;font-size:13px;color:#666666;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:700;color:#ffffff;}
.crumbs{padding:10px 30px 0;font-size:11px;color:#666666;}
.crumbs b{color:#0057A4;}
.title{padding:6px 30px 10px;font-size:20px;font-weight:700;color:#1a1a1a;}
.rows{padding:0 30px;}
.row{display:flex;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid #DDDDDD;}
.row:nth-child(even){background:#F5F7FA;}
.rimg{width:56px;height:56px;border-radius:3px;flex-shrink:0;}
.rpart{width:150px;font-family:'Courier New',Courier,monospace;font-size:13px;font-weight:700;color:#0057A4;letter-spacing:0.3px;}
.rdesc{flex:1;font-size:13px;color:#333333;}
.rstock{width:90px;font-size:11px;font-weight:700;text-transform:uppercase;}
.rstock.in{color:#2D7D46;}
.rstock.low{color:#B35C00;}
.rprice{width:80px;font-size:16px;font-weight:700;color:#1A1A1A;text-align:right;}
.raddbtn{width:90px;height:30px;background:#0057A4;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;border-radius:3px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Plc Direct</div>
<div class="searchbar">Search part number, keyword, or cross-reference...</div>
<div class="navlinks"><span>PLCs</span><span>HMIs</span><span>Drives</span><span>I/O</span></div>
</div>
<div class="crumbs">Home / Automation / <b>Micro PLCs</b></div>
<div class="title">Micro PLC Systems — 24VDC, DIN-Rail Mount</div>
<div class="rows">
<div class="row"><div class="rimg" style="background:linear-gradient(135deg,#0057A4,#99BFD9);"></div><div class="rpart">D0-06DR-D</div><div class="rdesc">6-slot DIN-rail base, 24VDC, relay outputs</div><div class="rstock in">In Stock</div><div class="rprice">$189.00</div><div class="raddbtn">Add to Cart</div></div>
<div class="row"><div class="rimg" style="background:linear-gradient(135deg,#99BFD9,#0057A4);"></div><div class="rpart">H2-CTRIO2</div><div class="rdesc">High-speed counter I/O module, 2-channel</div><div class="rstock low">Low Stock</div><div class="rprice">$312.50</div><div class="raddbtn">Add to Cart</div></div>
<div class="row"><div class="rimg" style="background:linear-gradient(135deg,#0057A4,#1A1A1A);"></div><div class="rpart">C-MORE-HMI7</div><div class="rdesc">7-inch color touchscreen HMI panel</div><div class="rstock in">In Stock</div><div class="rprice">$429.00</div><div class="raddbtn">Add to Cart</div></div>
<div class="row"><div class="rimg" style="background:linear-gradient(135deg,#99BFD9,#1A1A1A);"></div><div class="rpart">GS2-22P5</div><div class="rdesc">2.5HP variable frequency drive, 230V 1-ph</div><div class="rstock in">In Stock</div><div class="rprice">$246.00</div><div class="raddbtn">Add to Cart</div></div>
<div class="row"><div class="rimg" style="background:linear-gradient(135deg,#0057A4,#99BFD9);"></div><div class="rpart">D0-10ND3</div><div class="rdesc">10-point discrete input module, sinking</div><div class="rstock in">In Stock</div><div class="rprice">$74.00</div><div class="raddbtn">Add to Cart</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f2e6; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f2e6; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #5a5a5a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #2a4532; color: #ffffff;
border: none; border-radius: 20px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f4f2e6; color: #2a4532;
border: 1px solid #2a4532; border-radius: 20px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #bcbab1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5a5a5a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #1990c6; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f4f2e6; font-family:'Sofia Sans',-apple-system,system-ui,'Helvetica Neue',sans-serif; color:#121212; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'matrix',Georgia,serif;font-size:20px;font-weight:700;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;letter-spacing:.3px;text-transform:uppercase;}
.navlinks span:first-child{color:#2a4532;border-bottom:2px solid #2a4532;padding-bottom:20px;}
.hero{padding:20px 32px 0;}
.hero h1{font-family:'matrix',Georgia,serif;font-size:36px;font-weight:700;max-width:480px;line-height:1.15;}
.hero span{display:block;background:#2a4532;color:#fff;font-size:15px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:14px 32px;border-radius:20px;width:fit-content;margin-top:16px;}
.grid{display:flex;gap:16px;padding:24px 32px 0;}
.card{width:210px;background:#fff;border-radius:12px;padding:16px;}
.thumb{height:110px;background:#ece8d8;border-radius:8px;margin-bottom:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#1990c6;color:#fff;font-size:11px;font-weight:600;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.badge.new{background:#136f99;}
.pname{font-size:16px;font-weight:500;}
.pprice{font-size:16px;color:#2a2a2a;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#2a4532;color:#fff;display:flex;align-items:center;justify-content:center;gap:26px;font-size:13px;opacity:.92;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Proclamation Goods</div>
<div class="navlinks"><span>Cookware</span><span>Kitchen Tools</span><span>Table</span></div>
</div>
<div class="hero"><h1>Heritage tools, made to be used daily.</h1><span>Shop the Collection</span></div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">Sale</div></div><div class="pname">Cast Iron Skillet, 10"</div><div class="pprice">$68.00</div></div>
<div class="card"><div class="thumb"><div class="badge new">New</div></div><div class="pname">Enamel Dutch Oven</div><div class="pprice">$149.00</div></div>
<div class="card"><div class="thumb"></div><div class="pname">Wooden Spoon Set</div><div class="pprice">$32.00</div></div>
</div>
<div class="footer"><span>Our Story</span><span>Care Guide</span><span>Shipping</span><span>Contact</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: 0.5px; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #737376; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #2932fc; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #2932fc;
border: 1px solid #2932fc; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #3a3a3a;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737376; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #286ef8; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#000000; font-family:'Poppins',Arial,sans-serif; color:#3a3a3a; }
*{box-sizing:border-box;}
.nav{height:60px;background:#000;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Fjalla One',sans-serif;font-size:22px;letter-spacing:1px;text-transform:uppercase;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;color:#fff;}
.navcta{background:#2932fc;color:#fff;font-size:12px;font-weight:600;padding:8px 16px;border-radius:8px;}
.hero{height:230px;background:radial-gradient(circle at 75% 30%,#2932fc 0%,#000 65%);display:flex;align-items:center;padding:0 32px;position:relative;overflow:hidden;}
.hero-left{width:440px;z-index:2;}
.kicker{font-family:'Fjalla One',sans-serif;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#fb8077;margin-bottom:10px;}
.h1{font-family:'Fjalla One',sans-serif;font-size:36px;letter-spacing:.5px;text-transform:uppercase;line-height:1.1;color:#fff;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.5;color:#d4d4d4;margin:0 0 18px;max-width:380px;}
.btn{display:inline-block;background:#fb8077;color:#000;font-family:'Fjalla One',sans-serif;font-size:13px;letter-spacing:.5px;text-transform:uppercase;padding:12px 24px;border-radius:8px;}
.covers{position:absolute;right:40px;top:36px;display:flex;gap:12px;}
.cover{width:80px;height:118px;border-radius:6px;box-shadow:0 10px 26px rgba(0,0,0,.5);}
.sec{background:#fff;padding:22px 32px 0;}
.seclabel{font-family:'Fjalla One',sans-serif;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:#121212;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:203px;background:#fff;border:1px solid #dedede;border-radius:8px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#286ef8;color:#fff;font-family:'Fjalla One',sans-serif;font-size:9px;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:4px;z-index:2;}
.thumb{height:110px;border-radius:6px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;color:#121212;margin:0 0 4px;}
.pprice{font-size:13px;color:#3a3a3a;font-weight:700;}
</style>
<div class="nav">
<div class="logo">Third Eye Comics</div>
<div class="navlinks"><span>New Releases</span><span>Back Issues</span><span>Games</span></div>
<div class="navcta">Find A Store</div>
</div>
<div class="hero">
<div class="hero-left">
<div class="kicker">New Arrivals Wall</div>
<div class="h1">Your Next Obsession Ships This Week.</div>
<div class="sub">Variant covers, back issues, and tabletop drops curated for people who read the room.</div>
<div class="btn">Browse New Releases</div>
</div>
<div class="covers">
<div class="cover" style="background:linear-gradient(160deg,#fb8077,#86469c);"></div>
<div class="cover" style="background:linear-gradient(160deg,#0da19a,#2932fc);"></div>
<div class="cover" style="background:linear-gradient(160deg,#ed66b2,#fb8077);"></div>
</div>
</div>
<div class="sec">
<div class="seclabel">This Week's Drops</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(150deg,#2932fc,#86469c);"></div><div class="pname">Nebula Rangers #4</div><div class="pprice">$4.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#0da19a,#2932fc);"></div><div class="pname">Ironclad Vol. 2 TPB</div><div class="pprice">$17.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#ed66b2,#fb8077);"></div><div class="pname">Starforge Deck Box</div><div class="pprice">$12.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#86469c,#2932fc);"></div><div class="pname">Glasswing #1 Variant</div><div class="pprice">$6.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffffe; color: #1b1b1b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffffe; color: #1b1b1b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #1b1b1b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #f00069; color: #fffffe;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #fffffe; color: #0a112d;
border: 1px solid #f00069; border-radius: 4px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fffffe; color: #1b1b1b;
border: 1px solid #c6c6c5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff9900; color: #1b1b1b;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fffffe; font-family:'Albert Sans','Museo Sans',Arial,sans-serif; color:#1b1b1b; }
*{box-sizing:border-box;}
.nav{height:60px;background:#0a112d;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:20px;font-weight:700;letter-spacing:-.3px;color:#fffffe;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;color:#fffffe;}
.navcta{background:#f00069;color:#fffffe;font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:8px 18px;border-radius:4px;}
.hero{height:230px;background:#0a112d;display:flex;align-items:center;padding:0 30px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:40px;top:20px;width:220px;height:190px;background:repeating-linear-gradient(0deg,#171b60 0 8px,#0a112d 8px 16px);border:2px solid #232153;border-radius:4px;}
.hero:after{content:'';position:absolute;right:70px;top:60px;width:60px;height:110px;background:#f00069;border-radius:2px;}
.herotext{width:520px;position:relative;z-index:2;}
.spec{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:#f00069;margin-bottom:10px;}
.herotext h1{font-size:34px;font-weight:700;color:#fffffe;margin:0 0 10px;line-height:1.1;letter-spacing:-.5px;}
.herotext p{font-size:14px;color:#dcdcde;margin:0 0 16px;max-width:340px;line-height:1.5;}
.btnrow{display:flex;gap:10px;}
.btn-primary{background:#f00069;color:#fffffe;font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:12px 22px;border-radius:4px;}
.btn-secondary{background:transparent;border:2px solid #fffffe;color:#fffffe;font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:10px 20px;border-radius:4px;}
.spectable{display:flex;gap:1px;background:#dcdcde;margin:16px 30px 0;}
.speccell{flex:1;background:#f6f7f7;text-align:center;padding:10px 4px;}
.speclabel{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#767676;}
.specvalue{font-size:15px;color:#1b1b1b;margin-top:3px;font-weight:600;}
.grid{display:flex;gap:14px;padding:16px 30px 0;}
.card{width:200px;background:#fbfcfe;border:1px solid #dcdcde;border-radius:8px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#ff9900;color:#1b1b1b;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:3px 7px;border-radius:4px;}
.thumb{height:88px;border-radius:4px;margin-bottom:8px;background:#f6f7f7;}
.ptitle{font-size:14px;font-weight:600;color:#1b1b1b;margin-bottom:4px;}
.pprice{font-size:13px;color:#3c434a;margin-bottom:6px;}
.pcta{background:#f00069;color:#fffffe;font-size:11px;font-weight:700;text-transform:uppercase;text-align:center;padding:7px;border-radius:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#1e1e1e;border-top:3px solid #f00069;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:11px;color:#aaaaaa;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Shopbot Tools</div>
<div class="navlinks"><div>Tools</div><div>Accessories</div><div>Software</div><div>Support</div></div>
<div class="navcta">Get a Quote</div>
</div>
<div class="hero">
<div class="herotext">
<div class="spec">Made in USA</div>
<h1>CNC precision built to spec.</h1>
<p>Desktop and shop-floor routers engineered for repeatable, tight-tolerance cuts.</p>
<div class="btnrow">
<div class="btn-primary">Get a Quote</div>
<div class="btn-secondary">View Specs</div>
</div>
</div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Cut Area</div><div class="specvalue">24 x 24"</div></div>
<div class="speccell"><div class="speclabel">Spindle</div><div class="specvalue">2.2 kW</div></div>
<div class="speccell"><div class="speclabel">Rapid Speed</div><div class="specvalue">400 ipm</div></div>
<div class="speccell"><div class="speclabel">Warranty</div><div class="specvalue">2 Years</div></div>
</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="thumb" style="background:linear-gradient(135deg,#0a112d,#171b60)"></div><div class="ptitle">Buddy Desktop CNC</div><div class="pprice">from $2,495</div><div class="pcta">Get a Quote</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#171b60,#003388)"></div><div class="ptitle">PRSalpha Router</div><div class="pprice">from $8,900</div><div class="pcta">Get a Quote</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#0a112d,#232153)"></div><div class="ptitle">PRSstandard Router</div><div class="pprice">from $14,200</div><div class="pcta">Get a Quote</div></div>
</div>
<div class="footer"><span>© Shopbot Tools — Precision Machines</span><span>Warranty · Spec Sheets</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #303133;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #303133;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #303133; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.571; margin: 0; color: #909399; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.43; letter-spacing: 0.5px; background: #e60033; color: #ffffff;
border: none; border-radius: 8px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.43; letter-spacing: 0.5px; background: #ffffff; color: #303133;
border: 1px solid #e60033; border-radius: 8px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.625; background: #ffffff; color: #303133;
border: 1px solid #cbcccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #909399; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.27; letter-spacing: 0.3px; background: #e60033; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Montserrat','Open Sans',sans-serif; color:#303133; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dcdfe6;}
.logo{font-size:19px;font-weight:700;letter-spacing:.2px;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#606266;}
.navlinks span:first-child{color:#e60033;}
.navcta{background:#e60033;color:#fff;font-size:12px;font-weight:600;padding:9px 18px;border-radius:6px;}
.hero{height:230px;display:flex;background:#f5f7fa;border-bottom:1px solid #e4e7ed;}
.herotext{width:440px;padding:30px 36px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#e60033;margin-bottom:10px;}
.h1{font-size:28px;font-weight:700;line-height:1.25;margin:0 0 10px;}
.sub{font-size:14px;color:#606266;margin:0 0 16px;max-width:340px;}
.btn{width:150px;text-align:center;background:#e60033;color:#fff;font-size:13px;font-weight:600;padding:11px 0;border-radius:6px;}
.heroimg{flex:1;position:relative;background:#303133;}
.lens{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#f56c6c,#e60033 55%,#303133 100%);box-shadow:0 0 0 10px #1c1d1f;}
.lens:after{content:'';position:absolute;top:34px;left:34px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.55);}
.led{position:absolute;top:24px;right:28px;width:10px;height:10px;border-radius:50%;background:#67c23a;box-shadow:0 0 8px #67c23a;}
.specbar{display:flex;gap:1px;background:#dcdfe6;}
.spec{flex:1;background:#f5f7fa;text-align:center;padding:9px;}
.slabel{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#909399;}
.sval{font-size:13px;font-weight:600;margin-top:2px;}
.sec{padding:16px 36px 0;}
.sectitle{font-size:13px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;margin-bottom:12px;color:#303133;}
.grid{display:flex;gap:14px;}
.card{width:154px;background:#fff;border:1px solid #e4e7ed;border-radius:6px;padding:9px;position:relative;}
.thumb{height:96px;border-radius:5px;margin-bottom:8px;background:#f5f7fa;display:flex;align-items:center;justify-content:center;}
.camdot{width:38px;height:38px;border-radius:50%;}
.pname{font-size:12px;font-weight:600;line-height:1.3;height:30px;overflow:hidden;}
.pprice{font-size:13px;font-weight:700;color:#e60033;margin-top:3px;}
.badge{position:absolute;top:7px;left:7px;background:#e60033;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 6px;border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Obsbot</div>
<div class="navlinks"><span>Webcams</span><span>Gimbals</span><span>AI Trackers</span><span>Support</span></div>
<div class="navcta">Compare Models</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">AI Framing, Zero Setup</div>
<div class="h1">Cameras that track<br>you, not the room.</div>
<div class="sub">AI-powered webcams and gimbals engineered for creators who never stop moving.</div>
<div class="btn">Shop Webcams</div>
</div>
<div class="heroimg"><div class="lens"></div><div class="led"></div></div>
</div>
<div class="specbar">
<div class="spec"><div class="slabel">Tracking</div><div class="sval">AI Gesture</div></div>
<div class="spec"><div class="slabel">Sensor</div><div class="sval">4K UHD</div></div>
<div class="spec"><div class="slabel">FOV</div><div class="sval">86°</div></div>
<div class="spec"><div class="slabel">Latency</div><div class="sval">< 40ms</div></div>
</div>
<div class="sec">
<div class="sectitle">Top Picks</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb"><div class="camdot" style="background:radial-gradient(circle at 35% 35%,#f56c6c,#e60033)"></div></div><div class="pname">Tiny 2 AI Webcam</div><div class="pprice">$269.00</div></div>
<div class="card"><div class="thumb"><div class="camdot" style="background:radial-gradient(circle at 35% 35%,#409eff,#303133)"></div></div><div class="pname">Meet 2 Conference Cam</div><div class="pprice">$199.00</div></div>
<div class="card"><div class="thumb"><div class="camdot" style="background:radial-gradient(circle at 35% 35%,#e6a23c,#303133)"></div></div><div class="pname">Tail Air Gimbal</div><div class="pprice">$429.00</div></div>
<div class="card"><div class="thumb"><div class="camdot" style="background:radial-gradient(circle at 35% 35%,#67c23a,#303133)"></div></div><div class="pname">Tiny SE Webcam</div><div class="pprice">$169.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #171616; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #171616; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #a0a0a0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #54496d; color: #ffffff;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: transparent; color: #ffffff;
border: 1px solid #54496d; border-radius: 6px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #222222; color: #dedede;
border: 1px solid #515050; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #a0a0a0; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #006fcf; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#171616; color:#dedede; box-sizing:border-box;
font-family:Figtree,Inter,-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#121212; }
.brand { font-size:19px; font-weight:600; color:#ffffff; }
.brand span { color:#006fcf; }
.nlinks { display:flex; gap:24px; }
.nlinks div { font-size:13px; font-weight:500; color:#a0a0a0; }
.nlinks div.on { color:#ffffff; }
.navcta { background:#54496d; color:#fff; font-size:13px; font-weight:600; border-radius:6px; padding:9px 18px; }
.hero { height:220px; background:linear-gradient(120deg,#121212,#1e1e1e 55%,#54496d 140%); display:flex;
align-items:center; padding:0 40px; position:relative; overflow:hidden; }
.hero::after { content:''; position:absolute; right:60px; top:30px; width:150px; height:150px; border-radius:50%;
background:radial-gradient(circle at 35% 30%,#006fcf,transparent 70%); opacity:0.4; }
.herotxt .k { color:#006fcf; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; }
.herotxt h1 { color:#ffffff; font-size:32px; font-weight:600; margin:8px 0 10px; }
.herotxt p { color:#dedede; font-size:14px; max-width:420px; margin:0 0 16px; }
.herobtn { display:inline-block; background:#006fcf; color:#fff; font-size:13px; font-weight:600; border-radius:6px; padding:12px 24px; }
.section { padding:20px 32px 0; }
.sechead { font-size:16px; font-weight:600; color:#ffffff; margin-bottom:14px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { background:#222222; border-radius:12px; padding:10px; }
.shot { aspect-ratio:1/1; border-radius:6px; position:relative; overflow:hidden; }
.c1 .shot { background:radial-gradient(circle at 40% 30%,#54496d,#171616 75%); }
.c2 .shot { background:radial-gradient(circle at 40% 30%,#006fcf,#171616 75%); }
.c3 .shot { background:radial-gradient(circle at 40% 30%,#8a7fa5,#171616 75%); }
.c4 .shot { background:radial-gradient(circle at 40% 30%,#3acf6a,#171616 75%); opacity:0.9; }
.badge { position:absolute; top:8px; left:8px; font-size:9px; font-weight:700; text-transform:uppercase;
padding:2px 8px; border-radius:2px; color:#fff; }
.badge.pre { background:#54496d; } .badge.ex { background:#006fcf; } .badge.sold { background:#808080; }
.ctitle { font-size:13px; font-weight:600; color:#ffffff; margin:8px 0 3px; }
.cprice { font-size:13px; color:#dedede; }
</style></head>
<body>
<nav>
<div class="brand">Dark Horse Direct</div>
<div class="nlinks"><div class="on">Statues</div><div>Busts</div><div>Pre-Orders</div><div>Vault</div></div>
<div class="navcta">Join VIP</div>
</nav>
<div class="hero">
<div class="herotxt">
<div class="k">A Gallery That Happens To Ship</div>
<h1>Premium Collectible Statues</h1>
<p>Museum-quality figures and limited editions, cast and painted for collectors who notice detail.</p>
<div class="herobtn">Shop Pre-Orders</div>
</div>
</div>
<div class="section">
<div class="sechead">Featured Collectibles</div>
<div class="grid">
<div class="card c1"><div class="shot"><span class="badge pre">Pre-Order</span></div>
<div class="ctitle">Shadow Marauder 1:6</div><div class="cprice">$389.99</div></div>
<div class="card c2"><div class="shot"><span class="badge ex">Exclusive</span></div>
<div class="ctitle">Voidwalker Statue</div><div class="cprice">$249.99</div></div>
<div class="card c3"><div class="shot"></div>
<div class="ctitle">Frostbrand Bust</div><div class="cprice">$179.99</div></div>
<div class="card c4"><div class="shot"><span class="badge sold">Sold Out</span></div>
<div class="ctitle">Ashen Sentinel 1:4</div><div class="cprice">$599.99</div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f5f6; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f5f6; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6b6b6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #5b5b5b; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #f4f5f6; color: #1a1a1a;
border: 1px solid #5b5b5b; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1a1a;
border: 1px solid #bebebf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6b6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.18; letter-spacing: 0.2px; background: #c1e9ff; color: #1a1a1a;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f5f6; color:#1a1a1a; box-sizing:border-box;
font-family:-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; }
.brand { font-size:16px; font-weight:500; margin:0; }
.navlinks { display:flex; gap:20px; font-size:15px; font-weight:500; }
.navlinks .active { color:#1a1a1a; }
.navlinks span:not(.active) { color:#6b6b6b; }
.search { width:180px; height:40px; border-radius:999px; background:#fff; border:1px solid #e8e8e8; }
main { flex:1 1 auto; display:flex; flex-direction:column; padding:0 30px; min-height:0; }
.hero { flex:1 1 auto; display:flex; align-items:center; gap:26px; border-radius:12px;
background:linear-gradient(120deg,#e1fcff,#c1e9ff 60%,#eceafb); min-height:0; padding:0 26px; }
.hero-copy { flex:1; }
.hero-copy h1 { font-size:28px; font-weight:500; margin:0 0 8px; }
.hero-copy p { font-size:14px; color:#333333; margin:0 0 14px; max-width:320px; }
.hero-copy button { background:#5b5b5b; color:#fff; border:none; border-radius:8px; padding:12px 24px; font-weight:500; font-size:16px; }
.hero-art { flex:0 0 210px; height:170px; border-radius:12px; background:#ffffff; position:relative; }
.hero-art::after { content:''; position:absolute; inset:20px; border-radius:999px; background:#eceafb; }
.tabs { flex:0 0 auto; display:flex; gap:8px; padding:14px 0; }
.tab { padding:8px 16px; border-radius:999px; font-size:14px; font-weight:500; color:#6b6b6b; }
.tab.active { background:#f0edfe; color:#1a1a1a; }
.grid { flex:0 0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding-bottom:18px; }
.card { background:#fff; border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:6px; }
.thumb { aspect-ratio:4/3; border-radius:8px; }
.t1 { background:linear-gradient(150deg,#bde7ff,#5b5b5b 140%); }
.t2 { background:linear-gradient(150deg,#eceafb,#5b5b5b 140%); }
.t3 { background:linear-gradient(150deg,#e1fcff,#5b5b5b 140%); }
.card h3 { font-size:16px; font-weight:500; margin:0; }
.card .price { font-size:18px; font-weight:500; margin:2px 0 0; }
.badge { display:inline-block; background:#c1e9ff; color:#1a1a1a; font-size:11px; font-weight:500; text-transform:uppercase;
letter-spacing:0.2px; padding:2px 8px; border-radius:4px; margin-bottom:2px; align-self:flex-start; }
footer { flex:0 0 auto; height:52px; background:#1a1a1a; color:#fff; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Arena</p>
<div class="navlinks"><span class="active">Equipment</span><span>Classes</span><span>Trainers</span></div>
<div class="search"></div>
</nav>
<main>
<div class="hero">
<div class="hero-copy">
<h1>A gym at 6am, before anyone arrives.</h1>
<p>Studio-quality equipment and class schedules, arranged in clean, accessible rows.</p>
<button>Shop Equipment</button>
</div>
<div class="hero-art"></div>
</div>
<div class="tabs">
<span class="tab active">All</span><span class="tab">Strength</span><span class="tab">Cardio</span><span class="tab">Recovery</span>
</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb t1"></div><h3>Adjustable Kettlebell</h3><p class="price">$129.00</p></div>
<div class="card"><div class="thumb t2"></div><h3>Foam Roller Pro</h3><p class="price">$38.00</p></div>
<div class="card"><span class="badge">Sale</span><div class="thumb t3"></div><h3>Resistance Band Set</h3><p class="price">$24.00</p></div>
</div>
</main>
<footer>
<span>© Arena</span>
<span>Class Schedule · Trainers · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #717171; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #ee3124; color: #ffffff;
border: none; border-radius: 0px; padding: 10px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #222222;
border: 1px solid #ee3124; border-radius: 0px;
padding: 9px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #444444;
border: 1px solid #c8c8c8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #717171; opacity: 0.8; }
.badge {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #ee3124; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Founders Grotesk',Georgia,serif; color:#444444; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #eeeeee;}
.logo{font-size:19px;font-weight:500;color:#222222;letter-spacing:.2px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:500;color:#444444;}
.hero{height:220px;display:flex;align-items:center;padding:0 34px;background:#f7f6ff;}
.heroText{width:440px;}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#ee3124;margin-bottom:10px;}
.h1{font-size:30px;font-weight:500;line-height:1.2;letter-spacing:-.4px;color:#222222;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.6;color:#444444;margin:0 0 18px;max-width:380px;}
.btn{display:inline-block;background:#ee3124;color:#fff;font-size:13px;font-weight:500;padding:11px 22px;border-radius:2px;}
.spine{margin-left:auto;display:flex;gap:8px;align-items:flex-end;}
.book{width:28px;border-radius:2px 2px 0 0;}
.sec{padding:20px 34px 0;}
.secTitle{font-size:15px;font-weight:500;color:#222222;margin-bottom:14px;border-bottom:1px solid #eeeeee;padding-bottom:8px;}
.grid{display:flex;gap:14px;}
.card{width:203px;padding:0;}
.thumb{height:130px;border-radius:2px;margin-bottom:8px;box-shadow:0 6px 14px rgba(0,0,0,.08);}
.ptitle{font-size:13px;font-weight:500;color:#222222;margin:0 0 3px;}
.pauthor{font-size:11px;color:#717171;margin-bottom:5px;}
.pprice{font-size:12px;color:#444444;}
</style>
<div class="nav">
<div class="logo">Tin House</div>
<div class="navlinks"><span>Fiction</span><span>Nonfiction</span><span>Poetry</span><span>The Magazine</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="eyebrow">Independent Press, Portland</div>
<div class="h1">Writing that earns its shelf space.</div>
<div class="sub">New fiction, essays, and poetry from a small press that has never chased a trend.</div>
<div class="btn">Shop New Releases</div>
</div>
<div class="spine">
<div class="book" style="height:150px;background:#ee3124;"></div>
<div class="book" style="height:170px;background:#222222;"></div>
<div class="book" style="height:140px;background:#0b0f5a;"></div>
<div class="book" style="height:160px;background:#717171;"></div>
</div>
</div>
<div class="sec">
<div class="secTitle">New & Notable</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#ee3124,#222222);"></div><div class="ptitle">The Long Interior</div><div class="pauthor">A novel by Renata Voss</div><div class="pprice">$26.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#222222,#0b0f5a);"></div><div class="ptitle">Field Notes on Leaving</div><div class="pauthor">Essays by D. Okafor</div><div class="pprice">$18.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#717171,#ee3124);"></div><div class="ptitle">Salt and Static</div><div class="pauthor">Poems by Iris Calloway</div><div class="pprice">$17.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#0b0f5a,#717171);"></div><div class="ptitle">Tin House No. 87</div><div class="pauthor">Quarterly Magazine</div><div class="pprice">$14.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafb; color: #282828;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafb; color: #282828;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #282828; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #8c8273; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #6b6257; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fafafb; color: #6b6257;
border: 1px solid #6b6257; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafb; color: #3a3a3a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8273; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e6e5e4; color: #6b6257;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafb; font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#3a3a3a; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;box-shadow:0 1px 3px rgba(0,0,0,0.08);}
.logo{font-family:Georgia,'Times New Roman',serif;font-size:22px;color:#282828;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;color:#282828;}
.navlinks .active{color:#6b6257;border-bottom:2px solid #6b6257;padding-bottom:24px;}
.hero{height:260px;background:#f6f5f3;display:flex;align-items:center;padding:0 44px;}
.herotext{width:52%;}
.herotext h1{font-family:Georgia,serif;font-size:38px;font-weight:400;color:#282828;margin:0 0 14px;letter-spacing:-0.4px;}
.herotext p{font-size:15px;color:#3a3a3a;margin:0 0 18px;max-width:340px;}
.cta{display:inline-block;background:#6b6257;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:16px 36px;border-radius:8px;}
.heroimg{width:40%;height:170px;border-radius:8px;background:linear-gradient(140deg,#d5aa63,#6b6257 75%);}
.section{padding:20px 40px 0;}
.seclabel{font-family:'Source Serif Pro',Georgia,serif;font-size:20px;font-weight:600;color:#282828;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:186px;background:#fff;border-radius:12px;overflow:hidden;position:relative;}
.thumb{height:96px;border-radius:12px 12px 0 0;background:#f6f5f3;}
.badge{position:absolute;top:8px;left:8px;background:#597554;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:3px 7px;border-radius:4px;}
.cardbody{padding:10px 12px 12px;}
.ptitle{font-family:'Source Serif Pro',Georgia,serif;font-size:15px;font-weight:600;color:#282828;}
.pprice{font-size:14px;color:#6b6257;margin-top:4px;}
.stars{color:#d5aa63;font-size:12px;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Saatva</div>
<div class="navlinks"><div class="active">Mattresses</div><div>Bedding</div><div>Furniture</div><div>Compare</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Sleep like it's a heritage craft.</h1>
<p>Handcrafted mattresses built with the same care your grandfather's tailor gave a suit.</p>
<div class="cta">Shop Mattresses</div>
</div>
<div class="heroimg"></div>
</div>
<div class="section">
<div class="seclabel">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="badge">Eco</span></div><div class="cardbody"><div class="ptitle">Classic Luxe Firm</div><div class="pprice">$1,395</div><div class="stars">★★★★★</div></div></div>
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="ptitle">Loom & Leaf Relaxed Firm</div><div class="pprice">$2,095</div><div class="stars">★★★★★</div></div></div>
<div class="card"><div class="thumb"></div><div class="cardbody"><div class="ptitle">Linen Duvet Set</div><div class="pprice">$249</div><div class="stars">★★★★☆</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1818;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1818;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.35; margin: 0; color: #1a1818; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #d04727; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #1a1818;
border: 1px solid #d04727; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1a1818;
border: 1px solid #c6c5c5; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #d04727; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Gotham','Helvetica Neue',Helvetica,Arial,sans-serif; color:#2b3033; }
*{box-sizing:border-box;}
.nav{height:72px;background:#fff;border-bottom:1px solid #d4d5d6;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:20px;font-weight:600;color:#1a1818;text-transform:uppercase;letter-spacing:0.5px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;color:#666666;}
.navlinks .on{color:#1a1818;border-bottom:2px solid #1a1818;padding-bottom:20px;}
.hero{height:230px;background:#f5f5f5;display:flex;align-items:center;padding:0 32px;}
.h1{font-size:28px;font-weight:500;color:#1a1818;margin:0 0 10px;max-width:400px;}
.sub{font-size:16px;color:#2b3033;margin:0 0 18px;max-width:360px;}
.btn{display:inline-block;background:#d04727;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:14px 24px;border-radius:8px;}
.fixture{margin-left:auto;width:200px;height:170px;position:relative;}
.shade{width:110px;height:70px;border-radius:0 0 55px 55px;background:linear-gradient(180deg,#896b27,#a88b4a);position:absolute;top:0;left:45px;}
.cord{width:3px;height:60px;background:#896b27;position:absolute;top:70px;left:98px;}
.bulb{width:20px;height:20px;border-radius:50%;background:#ffe9a8;position:absolute;top:126px;left:90px;box-shadow:0 0 24px 6px rgba(255,224,140,0.7);}
.strip{height:44px;display:flex;align-items:center;gap:8px;padding:0 32px;}
.pill{background:#896b27;color:#fff;font-size:12px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;padding:10px 20px;border-radius:9999px;}
.pill.alt{background:#f5f5f5;color:#2b3033;}
.grid{display:flex;gap:14px;padding:6px 32px 0;}
.card{width:206px;}
.thumb{height:110px;border-radius:8px;margin-bottom:8px;}
.ptitle{font-size:14px;font-weight:600;color:#1a1818;}
.pprice{font-size:14px;color:#666666;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#1a1818;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#999999;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Rejuvenation</div>
<div class="navlinks"><div class="on">Lighting</div><div>Hardware</div><div>Furniture</div><div>Outdoor</div></div>
</div>
<div class="hero">
<div>
<div class="h1">Industrial heritage, lived-in comfort.</div>
<div class="sub">Salvaged-inspired lighting and hardware for a well-edited workshop of a home.</div>
<div class="btn">Shop Lighting</div>
</div>
<div class="fixture"><div class="shade"></div><div class="cord"></div><div class="bulb"></div></div>
</div>
<div class="strip">
<div class="pill">Brass Hardware</div><div class="pill alt">Sconces</div><div class="pill alt">Pendants</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#896b27,#2b3033)"></div><div class="ptitle">Bistro Brass Sconce</div><div class="pprice">$189</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2b3033,#896b27)"></div><div class="ptitle">Foundry Pendant</div><div class="pprice">$249</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a88b4a,#1a1818)"></div><div class="ptitle">Workshop Cabinet Pull</div><div class="pprice">$18</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1a1818,#896b27)"></div><div class="ptitle">Salvage Wall Clock</div><div class="pprice">$129</div></div>
</div>
<div class="footer"><span>© Rejuvenation — quietly confident since the workshop era</span><span>Brass · Iron · Reclaimed Wood</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #5266eb; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #5266eb; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #acb5f0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #4354c8; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5266eb; color: #ffffff;
border: 1px solid #4354c8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #5266eb; color: #f5f5f5;
border: 1px solid #6c7ded; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #acb5f0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #5063e5; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#171721; color:#ededf3; box-sizing:border-box;
font-family:"Arcadia", -apple-system, "Helvetica Neue", Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; padding:0 40px; }
.brand { font-size:15px; font-weight:600; color:#ededf3; margin:0; }
.navlinks { display:flex; gap:24px; margin-left:36px; }
.navlinks span { font-size:14px; color:#ededf3; opacity:0.8; }
.pill { margin-left:auto; background:#5266eb; color:#ffffff; border-radius:9999px; height:34px; padding:0 20px;
display:flex; align-items:center; font-size:14px; font-weight:600; }
.hero { display:flex; align-items:center; padding:20px 40px 0; gap:30px; }
.hero-text { flex:1; }
.hero h1 { font-size:44px; font-weight:400; letter-spacing:0.4px; line-height:1.08; margin:0 0 14px; max-width:420px; }
.hero p { font-size:16px; color:#c3c3cc; line-height:1.55; margin:0 0 20px; max-width:380px; }
.hero .pill { margin:0; }
.glow-wrap { flex:1; position:relative; height:260px; }
.glow { position:absolute; width:280px; height:220px; border-radius:50%;
background:radial-gradient(circle, rgba(156,180,232,0.5), rgba(205,221,255,0.05) 70%); left:20px; top:10px; filter:blur(2px); }
.float-card { position:absolute; right:0; top:30px; width:260px; background:#1e1e2a; border:1px solid #272735;
border-radius:12px; padding:20px; box-shadow:0px 8px 32px rgba(0,0,0,0.4); }
.float-card .label { font-size:12px; color:#70707d; margin-bottom:6px; }
.float-card .amt { font-size:28px; font-weight:480; color:#ededf3; margin-bottom:14px; }
.float-card .row { display:flex; justify-content:space-between; font-size:13px; color:#c3c3cc; padding:6px 0;
border-top:1px solid #272735; }
.stats { display:flex; gap:16px; padding:24px 40px 0; }
.stat { flex:1; background:#1e1e2a; border:1px solid #272735; border-radius:12px; padding:16px 18px; }
.stat .v { font-size:22px; font-weight:480; color:#ededf3; }
.stat .l { font-size:12px; color:#70707d; margin-top:4px; }
</style></head>
<body>
<nav>
<p class="brand">Mercury</p>
<div class="navlinks"><span>Banking</span><span>Treasury</span><span>Credit Card</span><span>API</span></div>
<div class="pill">Open account</div>
</nav>
<div class="hero">
<div class="hero-text">
<h1>Banking for startups</h1>
<p>The financial stack ambitious companies run on — checking, treasury, and credit, in one calm dashboard.</p>
<div class="pill">Open account</div>
</div>
<div class="glow-wrap">
<div class="glow"></div>
<div class="float-card">
<div class="label">Total balance</div>
<div class="amt">$482,910.44</div>
<div class="row"><span>Operating</span><span>$312,400</span></div>
<div class="row"><span>Treasury</span><span>$170,510</span></div>
</div>
</div>
</div>
<div class="stats">
<div class="stat"><div class="v">200,000+</div><div class="l">Startups banked</div></div>
<div class="stat"><div class="v">$0</div><div class="l">Monthly fees</div></div>
<div class="stat"><div class="v">4.5% APY</div><div class="l">On idle cash</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #1f2937;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #1f2937;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #1f2937; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #3f2021; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #fafafa; color: #3f2021;
border: 1px solid #3f2021; border-radius: 4px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #fafafa; color: #1f2937;
border: 1px solid #c3c6c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e22120; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:'NewsGoth BT',Arial,sans-serif; color:#3f2021; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#3f2021;}
.logo{font-family:'Clarendon BT',Georgia,serif;font-size:20px;color:#fff;letter-spacing:.3px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#fff;}
.search{width:170px;height:30px;border-radius:9999px;border:1px solid #d3d3d3;background:#fff;}
.hero{height:250px;display:flex;background:#f0f9ff;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 34px;}
.herotext h1{font-family:'Clarendon BT',Georgia,serif;font-size:32px;font-weight:400;margin:0 0 12px;line-height:1.25;color:#3f2021;}
.herotext p{font-size:14px;color:#455560;margin:0 0 16px;max-width:290px;}
.btn{display:inline-block;background:#3f2021;color:#fff;font-size:13px;font-weight:600;padding:12px 26px;width:fit-content;}
.heroimg{width:54%;position:relative;overflow:hidden;background:linear-gradient(160deg,#f3e008,#22c55e 80%);}
.bottle{position:absolute;bottom:40px;left:150px;width:60px;height:130px;border-radius:8px 8px 20px 20px;background:#3f2021;}
.cap{position:absolute;bottom:170px;left:160px;width:40px;height:20px;border-radius:4px;background:#a6192e;}
.sec{padding:20px 34px 0;}
.sectitle{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#455560;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#a6192e;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 9px;z-index:2;}
.thumb{height:96px;border-radius:6px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;}
.pprice{font-size:13px;font-weight:700;color:#1878b9;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Mrs Meyer S</div>
<div class="navlinks"><span>Hand Soap</span><span>Cleaning</span><span>Laundry</span><span>Scents</span></div>
<div class="search"></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Garden-Fresh Clean, Bottled with Care</h1>
<p>Plant-derived cleaning essentials with scents that smell like a Sunday in the yard.</p>
<div class="btn">Shop Cleaning</div>
</div>
<div class="heroimg"><div class="bottle"></div><div class="cap"></div></div>
</div>
<div class="sec">
<div class="sectitle">Seasonal Scents</div>
<div class="grid">
<div class="card"><span class="badge">Limited</span><div class="thumb" style="background:linear-gradient(135deg,#3f2021,#f3e008)"></div><div class="pname">Basil Hand Soap</div><div class="pprice">$4.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a6192e,#22c55e)"></div><div class="pname">Lavender Multi-Surface</div><div class="pprice">$5.49</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#3f2021,#1878b9)"></div><div class="pname">Lemon Verbena Laundry</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f3e008,#3f2021)"></div><div class="pname">Rain Water Dish Soap</div><div class="pprice">$4.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #003cc5; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #f9fafb; color: #003cc5;
border: 1px solid #003cc5; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f9fafb; color: #444444;
border: 1px solid #bfc0c0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f9c9bf; color: #111111;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; font-family:Arial,Helvetica,sans-serif; color:#111111; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:19px;font-weight:700;color:#003cc5;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;}
.search{background:#fff;border-radius:9999px;padding:12px 20px;font-size:14px;color:#444;width:220px;}
.hero{padding:48px 0;text-align:center;}
.hero h1{font-size:32px;font-weight:700;margin:0 0 10px;}
.hero p{font-size:15px;color:#444;margin:0;}
.label{padding:14px 40px 12px;font-size:18px;font-weight:700;}
.grid{display:flex;gap:16px;padding:0 40px;}
.card{width:200px;background:#fff;border-radius:8px;overflow:hidden;}
.thumb{height:150px;background:#eeeeee;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;border-radius:4px;padding:2px 8px;}
.badge.new{background:#f9c9bf;color:#111;}
.badge.sale{background:#f4daa6;color:#111;}
.badge.event{background:#c9e1bd;color:#111;}
.info{padding:12px;}
.title{font-size:18px;font-weight:600;margin-bottom:4px;}
.price{font-size:16px;color:#444;}
</style>
<div class="nav">
<div class="logo">Rizzoli Bookstore</div>
<div class="navlinks"><span>Fiction</span><span>Art & Design</span><span>Children</span><span>Events</span></div>
<div class="search">Search books...</div>
</div>
<div class="hero">
<h1>The most beautiful bookstore in New York.</h1>
<p>Curated fiction, art books, and rare editions under the marble arches on 57th Street.</p>
</div>
<div class="label">Staff Picks</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge new">New</div></div><div class="info"><div class="title">The Painted Archive</div><div class="price">$28.00</div></div></div>
<div class="card"><div class="thumb" style="background:#e6e6e6"><div class="badge sale">Sale</div></div><div class="info"><div class="title">Marble Halls: A History</div><div class="price">$34.00</div></div></div>
<div class="card"><div class="thumb" style="background:#e6e6e6"><div class="badge event">Event</div></div><div class="info"><div class="title">Evening Reading Series</div><div class="price">$18.00</div></div></div>
<div class="card"><div class="thumb" style="background:#e6e6e6"></div><div class="info"><div class="title">Cartography of Light</div><div class="price">$42.00</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000175;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000175;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.1px; margin: 0; color: #000175; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #9ca3af; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #133cd1; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #ffffff; color: #133cd1;
border: 1px solid #133cd1; border-radius: 9999px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #000175;
border: 1px solid #bfc0dc; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ca3af; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.27; letter-spacing: 0.5px; background: #c8faa1; color: #000175;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000175; box-sizing:border-box;
font-family:'Sailec',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-bottom:1px solid #e5e7eb; }
.brand { font-size:16px; font-weight:700; margin:0; color:#133cd1; font-family:'GT-Pressura',sans-serif; }
.navlinks { display:flex; gap:22px; font-size:15px; font-weight:500; color:#000175; }
.navlinks span.on { color:#133cd1; }
.util { font-size:12px; color:#9ca3af; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 72px); }
.stage { padding:24px; border-right:1px solid #e3eafd; display:flex; flex-direction:column; gap:10px; background:#f0f7ff; }
.panel { flex:1; position:relative; overflow:hidden; border-radius:12px; background:#fff; }
.panel .tab { position:absolute; width:16%; height:16%; border-radius:6px; }
.panel .t1 { left:20%; top:24%; background:#fffcbb; }
.panel .t2 { left:42%; top:24%; background:#c8faa1; }
.panel .t3 { left:64%; top:24%; background:#fce5ff; }
.panel .bottle { position:absolute; left:50%; bottom:10%; width:26%; height:46%; transform:translateX(-50%); background:linear-gradient(180deg,#587bda,#133cd1); border-radius:8px 8px 4px 4px; }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; background:#fff; border-radius:12px; }
.info { padding:24px 32px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.cat { font-size:12px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:#9ca3af; }
h1 { margin:0; font-size:24px; font-weight:700; font-family:'GT-Pressura',sans-serif; }
.badge-row { display:flex; gap:6px; }
.eco { background:#c8faa1; color:#000175; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; padding:4px 10px; border-radius:999px; }
.refill { background:#deeaff; color:#133cd1; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; padding:4px 10px; border-radius:999px; }
.scent-row { display:flex; gap:8px; }
.scent { border-radius:999px; border:2px solid transparent; padding:4px 12px; font-size:13px; }
.scent.on { border-color:#133cd1; }
.sub-toggle { display:flex; background:#f0f7ff; border-radius:20px; border:1px solid #e3eafd; padding:4px; width:fit-content; }
.sub-seg { padding:8px 16px; border-radius:16px; font-size:13px; font-weight:600; color:#000175; }
.sub-seg.on { background:#133cd1; color:#fff; }
.price { font-size:20px; font-weight:700; font-family:'GT-Pressura',sans-serif; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; height:48px; background:#133cd1; color:#fff; border:none; border-radius:999px; font-size:16px; font-weight:700; }
.btn-secondary { width:170px; height:48px; background:#fff; border:2px solid #133cd1; color:#133cd1; border-radius:999px; font-size:16px; font-weight:700; }
</style></head>
<body>
<nav>
<p class="brand">Blueland</p>
<div class="navlinks"><span class="on">Cleaning</span><span>Starter Kits</span><span>Refills</span><span>Bundles</span></div>
<div class="util">Search Account Cart (3)</div>
</nav>
<main>
<div class="stage">
<div class="panel"><div class="tab t1"></div><div class="tab t2"></div><div class="tab t3"></div><div class="bottle"></div></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">Forever Bottle + Refill</span>
<h1>Multi-Surface Cleaner Refill Set</h1>
<div class="badge-row"><span class="eco">Plastic-Free</span><span class="refill">Refill Available</span></div>
<div class="scent-row">
<span class="scent on" style="background:#fffcbb">Citrus</span>
<span class="scent" style="background:#c8faa1">Eucalyptus</span>
<span class="scent" style="background:#fce5ff">Fresh Linen</span>
</div>
<div class="sub-toggle"><span class="sub-seg">One-time</span><span class="sub-seg on">Subscribe & Save</span></div>
<div class="price">$14.00</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Shop Starter Kit</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f5f6; color: #5b5b5b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f5f6; color: #5b5b5b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #5b5b5b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8a8a8a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #5b5b5b; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.25; background: #ffffff; color: #5b5b5b;
border: 1px solid #5b5b5b; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #5b5b5b;
border: 1px solid #cececf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8a8a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #c1e9ff; color: #5b5b5b;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f4f5f6; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:#5b5b5b; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e0e0e0;background:#fff;}
.logo{font-size:19px;font-weight:500;color:#3d3d3d;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;}
.cartbtn{background:#5b5b5b;color:#fff;font-size:14px;font-weight:500;padding:10px 22px;border-radius:9999px;}
.hero{height:230px;display:flex;align-items:center;padding:0 34px;background:linear-gradient(120deg,#eceafb 0%,#c1e9ff 55%,#e1fcff 100%);}
.heroL{width:440px;}
.h1{font-size:30px;font-weight:500;letter-spacing:-0.5px;margin:0 0 12px;line-height:1.25;color:#3d3d3d;}
.sub{font-size:15px;margin:0 0 18px;width:360px;}
.btn{display:inline-block;background:#5b5b5b;color:#fff;font-size:15px;font-weight:500;padding:12px 28px;border-radius:9999px;}
.orbwrap{position:relative;width:220px;height:180px;margin-left:auto;}
.orb1{position:absolute;width:120px;height:120px;border-radius:50%;background:#f0edfe;top:0;right:60px;}
.orb2{position:absolute;width:90px;height:90px;border-radius:50%;background:#bde7ff;bottom:0;right:0;}
.orb3{position:absolute;width:50px;height:50px;border-radius:50%;background:#f2be80;top:40px;right:10px;}
.section{padding:18px 34px 0;}
.stitle{font-size:18px;font-weight:500;margin-bottom:14px;color:#3d3d3d;}
.grid{display:flex;gap:16px;}
.card{width:150px;background:#fff;border-radius:12px;padding:12px;box-shadow:0 4px 12px rgba(0,0,0,0.06);}
.thumb{height:92px;border-radius:8px;margin-bottom:8px;}
.pname{font-size:15px;font-weight:500;color:#3d3d3d;margin-bottom:4px;}
.pprice{font-size:14px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:12px;background:#f4f5f6;border-top:1px solid #e0e0e0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Supergiant Games Store</div>
<div class="navlinks"><div>Games</div><div>Vinyl</div><div>Apparel</div><div>Art Books</div></div>
<div class="cartbtn">Cart</div>
</div>
<div class="hero">
<div class="heroL">
<div class="h1">A table at the convention, made digital.</div>
<div class="sub">Soundtracks, art prints, and apparel from the worlds we've built.</div>
<div class="btn">Browse Store</div>
</div>
<div class="orbwrap"><div class="orb1"></div><div class="orb2"></div><div class="orb3"></div></div>
</div>
<div class="section">
<div class="stitle">From Our Games</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#f2be80,#ac1212);"></div><div class="pname">Underworld Vinyl LP</div><div class="pprice">$32.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#8da1e9,#2e409e);"></div><div class="pname">Signal Art Print</div><div class="pprice">$24.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#e1fcff,#00a47c);"></div><div class="pname">Fortress Hoodie</div><div class="pprice">$58.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#eceafb,#8500d3);"></div><div class="pname">Companion Enamel Pin</div><div class="pprice">$12.00</div></div>
</div>
</div>
<div class="footer"><span>© Independent Studio Store</span><span>Support · Shipping · Newsletter</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #e8e6e5; color: #23211f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #e8e6e5; color: #23211f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #23211f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #db001c; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #e8e6e5; color: #23211f;
border: 1px solid #db001c; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #23211f;
border: 1px solid #b7b5b4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #db001c; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#e8e6e5; color:#23211f; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#e8e6e5;border-bottom:1px solid #cfcac6;}
.logo{font-family:Georgia,'Times New Roman',serif;font-size:22px;font-weight:600;color:#23211f;letter-spacing:.3px;}
.navlinks{display:flex;gap:28px;font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#23211f;}
.cart{font-size:13px;font-weight:700;color:#db001c;}
.hero{height:300px;display:flex;background:#23211f;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;}
.kicker{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#908580;margin-bottom:14px;}
.herotext h1{font-family:Georgia,'Times New Roman',serif;font-size:36px;font-weight:600;color:#e8e6e5;margin:0 0 14px;line-height:1.15;}
.herotext p{font-size:14px;color:#c9c4bf;margin:0 0 22px;max-width:320px;line-height:1.5;}
.btn{display:inline-block;background:#db001c;color:#fff;font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:14px 28px;border-radius:3px;width:fit-content;}
.heroimg{width:54%;position:relative;background:linear-gradient(160deg,#676986 0%,#3a3733 55%,#23211f 100%);overflow:hidden;}
.heroimg:before{content:'';position:absolute;left:40px;bottom:0;width:0;height:0;border-left:120px solid transparent;border-right:60px solid transparent;border-bottom:160px solid #908580;opacity:.5;}
.heroimg:after{content:'';position:absolute;right:60px;bottom:0;width:0;height:0;border-left:80px solid transparent;border-right:140px solid transparent;border-bottom:220px solid #23211f;opacity:.7;}
.sec{padding:24px 40px 0;}
.sectitle{font-family:Georgia,serif;font-size:18px;font-weight:600;margin-bottom:16px;color:#23211f;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border-radius:6px;overflow:hidden;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#db001c;color:#fff;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:3px;z-index:2;}
.thumb{height:110px;background:linear-gradient(135deg,#908580,#23211f);}
.pname{font-size:13px;font-weight:600;color:#23211f;padding:10px 10px 2px;letter-spacing:.2px;}
.pprice{font-size:14px;font-weight:700;color:#23211f;padding:0 10px 10px;}
</style>
<div class="nav">
<div class="logo">Lander</div>
<div class="navlinks"><span>Outerwear</span><span>Gear</span><span>Trail</span><span>Journal</span></div>
<div class="cart">CART (0)</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Built, Not Branded</div>
<h1>Functional gear for the long haul</h1>
<p>Weathered utilitarian pieces engineered to last without shouting about it.</p>
<div class="btn">Shop the Trail</div>
</div>
<div class="heroimg"></div>
</div>
<div class="sec">
<div class="sectitle">Trail Essentials</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb"></div><div class="pname">Waxed Field Jacket</div><div class="pprice">$248</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#23211f,#676986)"></div><div class="pname">Trail Duffel 40L</div><div class="pprice">$165</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#676986,#908580)"></div><div class="pname">Ridge Wool Beanie</div><div class="pprice">$38</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#908580,#23211f)"></div><div class="pname">Canvas Work Gloves</div><div class="pprice">$54</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #dedede; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #dedede; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #6a6a6a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #1990c6; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 1px; background: #dedede; color: #121212;
border: 1px solid #1990c6; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #ababab; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6a6a6a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #1990c6; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Segoe UI', 'Helvetica Neue', sans-serif; background:#dedede; color:#121212; }
*{box-sizing:border-box;}
.nav{height:64px;background:#dedede;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #dedede;}
.logo{font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:-0.5px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:1px;}
.navlinks .active{border-bottom:2px solid #121212;padding-bottom:4px;}
.hero{height:280px;background:#121212;color:#fff;display:flex;align-items:center;padding:0 32px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 75% 40%,rgba(25,144,198,0.25),transparent 60%);}
.herotext{position:relative;max-width:460px;}
.headline{font-size:44px;font-weight:700;text-transform:uppercase;letter-spacing:-1px;line-height:1.1;margin-bottom:14px;}
.btn{display:inline-block;background:#1990c6;color:#fff;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:14px 28px;}
.sec{padding:18px 32px;}
.sectitle{font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#6a6a6a;margin-bottom:14px;}
.grid{display:flex;gap:12px;}
.card{width:210px;background:#fff;}
.thumb{height:170px;position:relative;background:#f0f0f0;}
.badge{position:absolute;top:8px;left:8px;background:#1990c6;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:3px 8px;}
.badgesale{position:absolute;top:8px;left:8px;background:#121212;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:3px 8px;}
.title{font-size:16px;font-weight:600;margin-top:10px;padding:0 2px;}
.price{font-size:14px;color:#6a6a6a;margin-top:4px;padding:0 2px;}
</style>
<div class="nav">
<div class="logo">Milk Makeup</div>
<div class="navlinks"><span class="active">Face</span><span>Lip</span><span>Eye</span><span>Sets</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="headline">Just roll it on.</div>
<div class="btn">Shop Now</div>
</div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#1990c6,#136f99)"><div class="badge">New</div></div><div class="title">Cooling Water Jelly Tint</div><div class="price">$22</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#136f99,#1990c6)"><div class="badgesale">Sale</div></div><div class="title">Hydro Grip Primer</div><div class="price">$36</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#a0d4eb,#1990c6)"></div><div class="title">Vegan Milk Stick Blush</div><div class="price">$24</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#1990c6,#a0d4eb)"></div><div class="title">Sunshine Skin Tint</div><div class="price">$40</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfcfc; color: #2d2d2d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfcfc; color: #2d2d2d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 26px; font-weight: 500; line-height: 1.28; letter-spacing: 0.01em; margin: 0; color: #2d2d2d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #8c8c8c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 0.10em; background: #221155; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 0.10em; background: #fcfcfc; color: #221155;
border: 1px solid #221155; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfcfc; color: #2d2d2d;
border: 1px solid #c8c8c8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0.12em; background: #fdd314; color: #221155;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fcfcfc; font-family:Montserrat,Arial,Tahoma,sans-serif; color:#2d2d2d; }
*{box-sizing:border-box;}
.announce{height:34px;background:#221155;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;letter-spacing:0.05em;}
.announce span{color:#fdd314;margin-left:6px;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #e0e0e0;}
.logo{font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;color:#221155;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;letter-spacing:0.04em;color:#2d2d2d;}
.hero{height:250px;background:#221155;display:flex;align-items:center;padding:0 44px;}
.herotext{width:56%;}
.herotext h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:40px;font-weight:400;color:#fff;margin:0 0 14px;letter-spacing:0.02em;line-height:1.1;}
.herotext p{font-size:14px;color:#e0e0e0;margin:0 0 18px;max-width:340px;}
.cta{display:inline-block;background:#fdd314;color:#221155;font-size:13px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:14px 28px;}
.section{padding:20px 44px 0;}
.seclabel{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;color:#221155;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:190px;position:relative;}
.thumb{height:130px;background:#f9f9f9;position:relative;overflow:hidden;}
.medallion{position:absolute;inset:14px;border:2px solid rgba(34,17,85,0.25);border-radius:50%;}
.medallion:after{content:'';position:absolute;inset:14px;border:1px solid rgba(34,17,85,0.2);border-radius:50%;}
.badge{position:absolute;top:0;left:0;background:#fdd314;color:#221155;font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:4px 8px;}
.ptitle{font-size:14px;font-weight:400;margin-top:8px;}
.pprice{font-size:18px;font-weight:700;color:#221155;margin-top:2px;}
</style>
<div class="announce">Free Shipping Over $99 <span>· Est. 1914</span></div>
<div class="nav">
<div class="logo">Safavieh</div>
<div class="navlinks"><div>Rugs</div><div>Furniture</div><div>Lighting</div><div>Outdoor</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Heritage woven into every room.</h1>
<p>Persian-inspired rugs and furniture, crafted since 1914.</p>
<div class="cta">Shop the Collection</div>
</div>
</div>
<div class="section">
<div class="seclabel">Featured Rugs</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#221155,#fcfcfc)"><span class="badge">Sale</span><div class="medallion"></div></div><div class="ptitle">Vintage Medallion Rug</div><div class="pprice">$249.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#003399,#fcfcfc)"><div class="medallion"></div></div><div class="ptitle">Bohemian Wool Runner</div><div class="pprice">$189.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8c8c8c,#fcfcfc)"><span class="badge" style="background:#221155;color:#fff">New</span><div class="medallion"></div></div><div class="ptitle">Handwoven Kilim, 8x10</div><div class="pprice">$349.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.2px; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.4px; background: #313131; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#313131; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#313131; color:#fff; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:20px; font-size:14px; font-weight:500; }
.util { font-size:13px; }
.ticker { height:36px; display:flex; align-items:center; gap:22px; padding:0 32px; background:#1e1e1e; color:#fff; font-size:13px; font-weight:600; letter-spacing:0.2px; }
.ticker span.up { color:#1a7a2e; }
.ticker span.down { color:#b91c1c; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 64px - 36px); }
.stage { padding:26px; display:flex; flex-direction:column; gap:12px; background:#f7f7f7; }
.crumb { font-size:12px; color:#767676; }
.pan { flex:1; border-radius:4px; background:#ffffff; border:1px solid #e0e0e0; position:relative; overflow:hidden; }
.pan::before { content:''; position:absolute; left:50%; top:50%; width:190px; height:190px; transform:translate(-50%,-50%); border-radius:50%;
background:radial-gradient(circle at 35% 30%,#f2e2b0,#c9a84c 55%,#8a6f2e 100%); box-shadow:0 18px 30px rgba(0,0,0,0.18); }
.pan::after { content:''; position:absolute; left:50%; top:50%; width:190px; height:190px; transform:translate(-50%,-50%); border-radius:50%;
border:2px solid rgba(0,0,0,0.15); }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; border-radius:4px; background:#ffffff; border:1px solid #e0e0e0; }
.info { padding:24px 34px; display:flex; flex-direction:column; gap:11px; overflow:hidden; }
.cat { font-size:12px; font-weight:600; color:#767676; }
h1 { margin:0; font-size:28px; font-weight:700; line-height:1.25; letter-spacing:-0.3px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:24px; font-weight:700; }
.premium { font-size:12px; font-weight:600; color:#767676; }
.badge-value { background:#313131; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; padding:3px 8px; }
.desc { font-size:14px; color:#444444; line-height:1.57; }
.trust-row { display:flex; gap:8px; flex-wrap:wrap; }
.trust-badge { background:#f0f7ff; border:1px solid #b8d4f0; border-radius:4px; font-size:12px; color:#444444; padding:6px 12px; }
.metal-tabs { display:flex; gap:8px; }
.tab { border-radius:4px; padding:8px 20px; font-size:14px; font-weight:600; border:1px solid #e0e0e0; color:#767676; }
.tab.on { background:#313131; color:#fff; border-color:#313131; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#313131; color:#fff; border:none; height:50px; border-radius:4px; font-size:15px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.btn-secondary { width:170px; background:#ffffff; border:1px solid #313131; color:#313131; height:50px; border-radius:4px; font-size:15px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
</style></head>
<body>
<nav>
<p class="brand">Bullion Exchanges</p>
<div class="navlinks"><span>Gold</span><span>Silver</span><span>Platinum</span><span>Sell to Us</span></div>
<div class="util">Search Account Cart (1)</div>
</nav>
<div class="ticker">
<span>GOLD $2,384.10 <span class="up">▲ 0.42%</span></span>
<span>SILVER $28.62 <span class="down">▼ 0.11%</span></span>
<span>PLATINUM $982.30 <span class="up">▲ 0.08%</span></span>
</div>
<main>
<div class="stage">
<div class="crumb">Bullion Exchanges / Gold / American Eagle</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">1 oz Gold Coin</span>
<h1>American Gold Eagle 1 oz Coin</h1>
<div class="metal-tabs">
<span class="tab on">Gold</span><span class="tab">Silver</span><span class="tab">Platinum</span>
</div>
<div class="price-row"><span class="price">$2,431.90</span><span class="badge-value">Best Value</span></div>
<span class="premium">4.2% over spot · $47.80/oz premium</span>
<p class="desc">.9167 fine gold, backed by the U.S. Mint. Ships fully insured in protective capsule with authenticity certificate.</p>
<div class="trust-row">
<span class="trust-badge">Secure Checkout</span><span class="trust-badge">Authorized Dealer</span><span class="trust-badge">BBB A+</span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Add to Watchlist</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #283347;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #283347;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.33; margin: 0; color: #283347; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #00adef; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #283347;
border: 1px solid #00adef; border-radius: 9999px;
padding: 10px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #283347;
border: 1px solid #c9ccd1; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #00adef; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:'Avenir Next','Helvetica Neue',Arial,sans-serif; color:#515151; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #eeeeee;}
.logo{font-size:20px;font-weight:400;letter-spacing:-0.5px;color:#283347;text-transform:lowercase;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;}
.navlinks .on{color:#283347;border-bottom:2px solid #00adef;padding-bottom:20px;}
.navlinks span:not(.on){color:#7a7a7a;}
.hero{height:230px;background:#283347;display:flex;align-items:center;padding:0 40px;}
.h1{font-size:32px;font-weight:400;color:#fff;margin:0 0 10px;letter-spacing:-0.5px;}
.hsub{font-size:14px;color:#b5b5b5;max-width:400px;margin:0 0 16px;}
.btn{display:inline-block;background:#00adef;color:#fff;font-size:15px;font-weight:600;letter-spacing:0.3px;padding:12px 28px;border-radius:9999px;}
.section{padding:20px 40px 0;}
.sectitle{font-size:16px;font-weight:600;color:#283347;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:198px;padding:16px;border-radius:8px;}
.thumb{border-radius:4px;height:96px;margin-bottom:8px;position:relative;}
.badge{position:absolute;top:6px;left:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#fff;padding:2px 8px;border-radius:9999px;}
.ptitle{font-size:16px;font-weight:600;color:#283347;}
.pprice{font-size:16px;font-weight:600;color:#283347;margin-top:4px;}
.compare{font-size:13px;color:#7a7a7a;text-decoration:line-through;margin-left:6px;}
</style>
<div class="nav">
<div class="logo">Rabbit</div>
<div class="navlinks"><div class="on">Shoes</div><span>Apparel</span><span>Accessories</span><span>Journal</span></div>
</div>
<div class="hero">
<div><div class="h1">Built for the Long Run</div><div class="hsub">Running shoes and gear that trust the miles you actually put in — no neon noise, just the work.</div><div class="btn">Shop Running Shoes</div></div>
</div>
<div class="section">
<div class="sectitle">Just Dropped</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00adef,#283347);"><div class="badge" style="background:#00adef;">New</div></div><div class="ptitle">Trailfinder Runner</div><div class="pprice">$128.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e50122,#283347);"><div class="badge" style="background:#e50122;">Sale</div></div><div class="ptitle">Aero Windbreaker</div><div class="pprice">$89.00<span class="compare">$120.00</span></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#363636,#283347);"></div><div class="ptitle">Reflect Half-Zip</div><div class="pprice">$74.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00adef,#4a5764);"></div><div class="ptitle">Compression Calf Sleeve</div><div class="pprice">$32.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #111111; color: #fafafa;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #111111; color: #fafafa;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 700; line-height: 1.2; margin: 0; color: #fafafa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #cc3b3b; color: #fafafa;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: transparent; color: #fafafa;
border: 1px solid #cc3b3b; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1e1e1e; color: #fafafa;
border: 1px solid #4b4b4b; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #cc3b3b; color: #fafafa;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Poppins','Rubik',Arial,Helvetica,sans-serif; background:#111111; color:#eeeeee; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:56px;background:#040404;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:'Rubik','Poppins',sans-serif;font-size:20px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;color:#aaaaaa;}
.search{width:220px;height:30px;border-radius:9999px;background:#1e1e1e;display:flex;align-items:center;padding:0 14px;font-size:12px;color:#aaaaaa;}
.hero{height:200px;display:flex;align-items:center;padding:0 34px;background:#1e1e1e;}
.heroText{width:50%;}
.h1{font-family:'Rubik',sans-serif;font-size:28px;font-weight:700;color:#fff;line-height:1.2;margin:0 0 10px;}
.sub{font-size:13px;color:#aaaaaa;margin:0 0 16px;max-width:300px;}
.cta{display:inline-block;background:#cc3b3b;color:#fafafa;font-size:14px;font-weight:600;padding:11px 24px;border-radius:6px;width:fit-content;}
.heroImg{width:50%;height:140px;position:relative;}
.figbox{position:absolute;width:90px;height:110px;border-radius:8px;top:12px;left:60px;background:linear-gradient(135deg,#cc3b3b,#272727);}
.chase{position:absolute;top:8px;left:56px;background:#f5a623;color:#111;font-size:9px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;padding:2px 7px;border-radius:9999px;}
.sec{padding:16px 34px 0;}
.secTitle{font-family:'Rubik',sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#1e1e1e;border-radius:8px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:9px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;color:#fafafa;padding:2px 7px;border-radius:9999px;background:#cc3b3b;}
.thumb{height:96px;border-radius:6px;margin-bottom:8px;background:#272727;}
.ptitle{font-size:13px;font-weight:500;color:#fafafa;line-height:1.3;height:34px;overflow:hidden;}
.pprice{font-size:15px;font-weight:700;color:#fafafa;margin-top:4px;}
.psku{font-size:10px;color:#aaaaaa;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Popcult Online</div>
<div class="navlinks"><span>Vinyl Figures</span><span>Statues</span><span>Chase Variants</span></div>
<div class="search">Search collectibles...</div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Built for the shelf that matters most.</div>
<div class="sub">Chase variants, exclusives and grail-tier collectibles for the completionists.</div>
<div class="cta">Hunt Chase Variants</div>
</div>
<div class="heroImg"><div class="chase">Chase</div><div class="figbox"></div></div>
</div>
<div class="sec">
<div class="secTitle">Collector Picks</div>
<div class="grid">
<div class="card"><div class="badge">Chase</div><div class="thumb" style="background:linear-gradient(135deg,#cc3b3b,#272727);"></div><div class="ptitle">Limited Chase Variant Figure</div><div class="psku">SKU 88213-C</div><div class="pprice">$59.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#272727,#cc3b3b);"></div><div class="ptitle">Deluxe Statue, Numbered Edition</div><div class="psku">SKU 77104</div><div class="pprice">$149.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1e1e1e,#cc3b3b);"></div><div class="ptitle">Convention-Exclusive Figure Set</div><div class="psku">SKU 90045</div><div class="pprice">$74.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#cc3b3b,#1e1e1e);"></div><div class="ptitle">Blind Box Mystery Mini, Case of 12</div><div class="psku">SKU 65210</div><div class="pprice">$96.00</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #231f20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #231f20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #231f20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #5f6368; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #6b45ff; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #231f20;
border: 1px solid #6b45ff; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #231f20;
border: 1px solid #c8c7c7; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5f6368; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f48120; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:flex; flex-direction:column; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#231f20; box-sizing:border-box;
font-family:'Arial Narrow','Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
background:#6b45ff; }
.brand { font-size:20px; font-weight:700; color:#ffffff; letter-spacing:1px; text-transform:uppercase; }
.navlinks { display:flex; gap:24px; }
.navlinks span { font-size:13px; font-weight:700; color:#e6ddff; text-transform:uppercase; letter-spacing:0.5px; }
.cart { background:#ffffff; color:#6b45ff; font-size:12px; font-weight:700; padding:7px 16px; border-radius:4px; }
.hero { display:flex; align-items:center; gap:30px; padding:26px 40px 20px; }
.htext { max-width:400px; }
.htext .badge { display:inline-block; background:#f48120; color:#fff; font-size:11px; font-weight:700; padding:4px 10px;
border-radius:3px; margin-bottom:10px; text-transform:uppercase; }
.htext h1 { font-size:30px; font-weight:700; color:#231f20; margin:0 0 12px; line-height:1.2; letter-spacing:-0.5px; }
.htext p { font-size:14px; color:#5f6368; line-height:1.5; margin:0 0 16px; font-family:'Helvetica Neue',Arial,sans-serif; }
.btn { display:inline-block; background:#6b45ff; color:#fff; font-size:13px; font-weight:700; padding:11px 24px; border-radius:4px; }
.shelf { display:flex; gap:8px; flex-shrink:0; align-items:flex-end; }
.spine { width:36px; height:140px; border-radius:2px; }
.sp1{background:#6b45ff;} .sp2{background:#231f20;} .sp3{background:#f48120;} .sp4{background:#5a31f4;} .sp5{background:#dedede;}
.section { padding:0 40px; }
.section h2 { font-size:18px; font-weight:700; color:#231f20; margin:0 0 14px; text-transform:uppercase; letter-spacing:0.5px; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.card { position:relative; }
.cover { height:96px; border-radius:4px; margin-bottom:8px; }
.m1 .cover { background:linear-gradient(150deg,#6b45ff,#231f20); }
.m2 .cover { background:linear-gradient(150deg,#f48120,#7a3f0e); }
.m3 .cover { background:linear-gradient(150deg,#231f20,#5f6368); }
.m4 .cover { background:linear-gradient(150deg,#5a31f4,#231f20); }
.m5 .cover { background:linear-gradient(150deg,#f89f20,#231f20); }
.salebadge { position:absolute; top:6px; left:6px; background:#f48120; color:#fff; font-size:9px; font-weight:700;
padding:2px 6px; border-radius:2px; }
.card .t { font-size:12px; font-weight:700; margin:0 0 3px; }
.card .p { font-size:12px; font-weight:700; color:#6b45ff; }
.trust { margin-top:auto; flex-shrink:0; display:flex; padding:12px 40px; border-top:1px solid #dedede; }
.trust span { flex:1; text-align:center; font-size:11px; color:#5f6368; }
</style></head>
<body>
<nav>
<div class="brand">Gruv</div>
<div class="navlinks"><span>Movies</span><span>TV Shows</span><span>4K UHD</span><span>Deals</span></div>
<div class="cart">Cart 3</div>
</nav>
<div class="hero">
<div class="htext">
<div class="badge">Up to 40% Off</div>
<h1>Every title, every format, one shelf.</h1>
<p>Blu-ray, 4K UHD, and DVD — the physical-media crawl your streaming queue forgot it needed.</p>
<span class="btn">Shop Today's Deals</span>
</div>
<div class="shelf"><div class="spine sp1"></div><div class="spine sp2"></div><div class="spine sp3"></div><div class="spine sp4"></div><div class="spine sp5"></div></div>
</div>
<div class="section">
<h2>Price Drops This Week</h2>
<div class="grid">
<div class="card m1"><div class="salebadge">-30%</div><div class="cover"></div><div class="t">Midnight Run 4K</div><div class="p">$14.99</div></div>
<div class="card m2"><div class="salebadge">-25%</div><div class="cover"></div><div class="t">Season One Box Set</div><div class="p">$22.99</div></div>
<div class="card m3"><div class="salebadge">-15%</div><div class="cover"></div><div class="t">Director's Cut Ed.</div><div class="p">$19.99</div></div>
<div class="card m4"><div class="salebadge">-40%</div><div class="cover"></div><div class="t">Complete Series</div><div class="p">$34.99</div></div>
<div class="card m5"><div class="salebadge">-20%</div><div class="cover"></div><div class="t">Anniversary Set</div><div class="p">$27.99</div></div>
</div>
</div>
<div class="trust"><span>Fast Shipping</span><span>New Releases Weekly</span><span>Secure Checkout</span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fc4c02; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fc4c02; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fc4c02; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fc4c02; color: #f5f5f5;
border: 1px solid #fb6729; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fc692a; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#0E0E0E; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; font-variant-numeric: tabular-nums; }
.card { max-width:600px; margin:0 auto; padding:22px 0; }
.hdr { display:flex; align-items:center; gap:12px; padding:0 30px; }
.av { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#f7b267,#f4845f); }
.aname { font-size:15px; font-weight:600; }
.ts { font-size:13px; color:#666; margin-left:auto; }
.atitle { font-size:17px; font-weight:600; padding:10px 30px 0; }
.map { margin:12px 30px 0; height:220px; border-radius:6px; position:relative; overflow:hidden;
background:#E8E5DD; }
svg { width:100%; height:100%; display:block; }
.stats { display:flex; margin:0 30px; border-top:1px solid #F0F0F0; }
.stat { flex:1; text-align:center; padding:14px 0; border-right:1px solid #F0F0F0; }
.stat:last-child { border-right:none; }
.stat b { display:block; font-size:17px; font-weight:700; }
.stat span { font-size:11px; font-weight:600; text-transform:uppercase; color:#666; letter-spacing:.5px; }
.kudos-row { display:flex; align-items:center; gap:16px; padding:14px 30px 0; }
.kudos { color:#FC4C02; font-size:15px; font-weight:600; }
.comment { color:#666; font-size:15px; }
.view { margin-left:auto; color:#FC4C02; font-size:13px; font-weight:600; }
.side-list { max-width:280px; margin:0 auto; padding-top:10px; }
.seg-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:0.5px solid #E5E5E5; }
.rank { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#0E0E0E; }
</style></head>
<body>
<div class="card">
<div class="hdr"><div class="av"></div><div class="aname">Casey Reardon</div><div style="margin-left:8px; font-size:11px; font-weight:700; color:#FC4C02; letter-spacing:.2px;">Strava (iOS)</div><div class="ts">2 hours ago</div></div>
<div class="atitle">Tuesday Morning Run</div>
<div class="map">
<svg viewBox="0 0 560 220">
<rect width="560" height="220" fill="#E8E5DD"/>
<path d="M20,180 L100,150 L150,170 L220,90 L280,110 L340,50 L410,70 L470,30 L540,60" fill="none" stroke="rgba(252,76,2,0.3)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20,180 L100,150 L150,170 L220,90 L280,110 L340,50 L410,70 L470,30 L540,60" fill="none" stroke="#FC4C02" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="20" cy="180" r="6" fill="#fff" stroke="#FC4C02" stroke-width="2"/>
<circle cx="540" cy="60" r="6" fill="#FC4C02" stroke="#fff" stroke-width="2"/>
</svg>
</div>
<div class="stats">
<div class="stat"><b>8.2</b><span>Distance</span></div>
<div class="stat"><b>1:14:23</b><span>Time</span></div>
<div class="stat"><b>9:03</b><span>Pace</span></div>
</div>
<div class="kudos-row"><div class="kudos">👍 27</div><div class="comment">💬 5</div><div class="view">View Activity</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0f0f0f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0f0f0f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #0f0f0f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #727a71; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.25px; background: #003388; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.25px; background: #ffffff; color: #003388;
border: 1px solid #003388; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #0f0f0f;
border: 1px solid #c3c3c3; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #727a71; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.5px; background: #f0f0f0; color: #727a71;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial, Helvetica, sans-serif; color:#272725; }
*{box-sizing:border-box;}
.nav{height:60px;background:#ffffff;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:Georgia,serif;font-size:20px;font-weight:600;color:#003388;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#272725;}
.btn{height:38px;padding:0 20px;border-radius:4px;background:#003388;color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;}
.hero{height:220px;background:#f0f0f0;display:flex;align-items:center;padding:0 32px;}
.heroText{width:460px;}
.tag{display:inline-block;background:#727a71;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;padding:3px 10px;border-radius:4px;margin-bottom:10px;}
.h1{font-family:Georgia,serif;font-size:26px;font-weight:600;line-height:1.3;margin:0 0 10px;}
.sub{font-size:13px;color:#727a71;margin:0 0 16px;max-width:380px;}
.scene{width:400px;height:220px;position:relative;}
.desk{position:absolute;left:60px;bottom:40px;width:260px;height:14px;background:#949494;border-radius:2px;}
.leg{position:absolute;bottom:0;width:8px;height:40px;background:#727a71;}
.l1{left:70px;} .l2{left:302px;}
.chairback{position:absolute;left:140px;bottom:50px;width:70px;height:80px;border-radius:12px 12px 0 0;background:#003388;}
.chairseat{position:absolute;left:150px;bottom:44px;width:50px;height:16px;border-radius:6px;background:#001e5c;}
.sec{padding:18px 32px;}
.sectitle{font-size:15px;font-weight:600;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:216px;background:#fff;border:1px solid #f0f0f0;border-radius:4px;overflow:hidden;}
.thumb{height:88px;}
.pbody{padding:10px 12px 12px;}
.ptitle{font-size:13px;font-weight:600;margin-bottom:4px;}
.pmeta{font-size:11px;color:#949494;margin-bottom:6px;}
.pprice{font-size:14px;font-weight:600;color:#003388;}
.spectable{display:flex;gap:1px;background:#f0f0f0;margin:0 32px;}
.speccell{flex:1;background:#fff;text-align:center;padding:8px;}
.slabel{font-size:9px;font-weight:700;text-transform:uppercase;color:#727a71;}
.svalue{font-size:12px;color:#272725;margin-top:2px;}
</style>
<div class="nav">
<div class="logo">Steelcase</div>
<div class="navlinks"><span>Office</span><span>Education</span><span>Healthcare</span><span>Resources</span></div>
<div class="btn">Request a Quote</div>
</div>
<div class="hero">
<div class="heroText">
<div class="tag">Workplace Research</div>
<div class="h1">Furniture engineered<br>for how work happens.</div>
<div class="sub">Seating, desks and storage backed by decades of workplace research, built for real institutions.</div>
<div class="btn" style="display:inline-flex;">Explore Seating</div>
</div>
<div class="scene"><div class="desk"></div><div class="leg l1"></div><div class="leg l2"></div><div class="chairback"></div><div class="chairseat"></div></div>
</div>
<div class="spectable">
<div class="speccell"><div class="slabel">Warranty</div><div class="svalue">12 Years</div></div>
<div class="speccell"><div class="slabel">Adjustability</div><div class="svalue">Full Range</div></div>
<div class="speccell"><div class="slabel">Lead Time</div><div class="svalue">2-4 Weeks</div></div>
<div class="speccell"><div class="slabel">Fabric Options</div><div class="svalue">40+</div></div>
</div>
<div class="sec">
<div class="sectitle">Category Solutions</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:#003388"></div><div class="pbody"><div class="ptitle">Task Chair, Ergonomic</div><div class="pmeta">Office · Configurable</div><div class="pprice">from $899</div></div></div>
<div class="card"><div class="thumb" style="background:#727a71"></div><div class="pbody"><div class="ptitle">Height-Adjustable Desk</div><div class="pmeta">Office · Electric base</div><div class="pprice">from $1,199</div></div></div>
<div class="card"><div class="thumb" style="background:#32373c"></div><div class="pbody"><div class="ptitle">Modular Storage Wall</div><div class="pmeta">Education · Custom finish</div><div class="pprice">from $649</div></div></div>
<div class="card"><div class="thumb" style="background:#949494"></div><div class="pbody"><div class="ptitle">Patient Room Recliner</div><div class="pmeta">Healthcare · Bariatric rated</div><div class="pprice">from $2,299</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #050505; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #050505; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #898989; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #050505; color: #ffffff;
border: 1px solid #000000; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #050505; color: #f5f5f5;
border: 1px solid #2b2b2b; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #898989; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #040404; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gaudiy</title>
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#ffffff; color:#333333; box-sizing:border-box; font-family: "Noto Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid #000000; }
.logo { font-size:16px; font-weight:700; color:#050505; }
.nav-links { display:flex; gap:24px; }
.nav-links span { font-size:13px; color:#333333; }
.nav-links span.active { color:#050505; font-weight:700; }
.hero { padding:22px 28px 20px; display:flex; align-items:flex-end; justify-content:space-between; }
.hero-h { font-family:"Noto Sans JP", sans-serif; font-size:36px; font-weight:700; line-height:1.2; letter-spacing:-1.6px; color:#333333; margin:0; max-width:560px; }
.hero-cta { background:#000000; color:#ffffff; padding:9px 18px; font-size:14px; font-weight:400; white-space:nowrap; }
.band { background:#eeeeee; padding:16px 28px 18px; }
.band-label { font-family:"Noto Sans JP", sans-serif; font-size:15px; font-weight:700; letter-spacing:0.9px; color:#333333; margin:0 0 12px; }
.pressrow { display:flex; gap:12px; }
.press-card { flex:1; background:#ffffff; border:1px solid #000000; padding:10px 13px 9px; }
.press-tag { font-size:11px; color:#777777; margin-bottom:5px; }
.press-title { font-size:13px; color:#333333; line-height:1.4; margin:0; }
.feed { padding:16px 28px 0; }
.feed-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.feed-label { font-family:"Noto Sans JP", sans-serif; font-size:15px; font-weight:700; letter-spacing:0.9px; color:#333333; }
.feed-more { font-size:12px; color:#555555; }
.feedgrid { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.fan-card { border:2px solid #050505; padding:12px 15px 13px; display:flex; align-items:center; gap:12px; }
.avatar { width:36px; height:36px; background:#050505; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#ffffff; font-size:14px; font-weight:700; }
.fan-info { flex:1; }
.fan-name { font-size:13px; font-weight:700; color:#050505; margin-bottom:2px; }
.fan-note { font-size:12px; color:#555555; }
.fan-token { font-size:12px; font-weight:700; color:#050505; border:1px solid #050505; padding:2px 8px; white-space:nowrap; }
</style>
</head>
<body>
<div class="nav">
<div class="logo">Gaudiy</div>
<div class="nav-links">
<span class="active">Community</span>
<span>Tech Blog</span>
<span>AI Lab</span>
<span>Member note</span>
</div>
</div>
<div class="hero">
<div class="hero-h">With fans, advance the era.</div>
<div class="hero-cta">View details</div>
</div>
<div class="band">
<div class="band-label">Creating a nation of fans</div>
<div class="pressrow">
<div class="press-card">
<div class="press-tag">2026.02.14 — Partnership</div>
<p class="press-title">Major entertainment group joins as strategic partner</p>
</div>
<div class="press-card">
<div class="press-tag">2026.01.30 — Funding</div>
<p class="press-title">Pre-Series C round closed with legacy IP backers</p>
</div>
<div class="press-card">
<div class="press-tag">2025.11.08 — Product</div>
<p class="press-title">Fanlink launches digital collectible co-creation tool</p>
</div>
</div>
</div>
<div class="feed">
<div class="feed-head">
<div class="feed-label">Community feed</div>
<div class="feed-more">View all →</div>
</div>
<div class="feedgrid">
<div class="fan-card">
<div class="avatar">R</div>
<div class="fan-info">
<div class="fan-name">Alex R.</div>
<div class="fan-note">unlocked a new collectible tier</div>
</div>
<div class="fan-token">+120 FAN</div>
</div>
<div class="fan-card">
<div class="avatar">M</div>
<div class="fan-info">
<div class="fan-name">Jamie M.</div>
<div class="fan-note">co-created a community poll</div>
</div>
<div class="fan-token">+80 FAN</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #1d1d1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.3; margin: 0; color: #656b80; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #2f3a53; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #2f3a53;
border: 1px solid #2f3a53; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1d1d1d;
border: 1px solid #b9bcc5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #656b80; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.3px; background: #cc3011; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Graphik,Arial,sans-serif; color:#3a3a3a; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#2f3a53;}
.logo{font-family:Tiempos,Georgia,serif;font-size:20px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;color:#e5f5fd;}
.hero{height:250px;display:flex;background:#fff;}
.herotext{width:46%;padding:0 36px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#6fd0f5;margin-bottom:10px;}
.h1{font-family:Tiempos,Georgia,serif;font-size:30px;font-weight:700;line-height:1.2;color:#2f3a53;margin:0 0 12px;}
.sub{font-size:13px;color:#656b80;margin:0 0 18px;max-width:300px;}
.cta{display:inline-block;background:#2f3a53;color:#fff;font-size:13px;font-weight:700;padding:12px 24px;border-radius:2px;}
.heroimg{width:54%;position:relative;background:linear-gradient(135deg,#e5f5fd,#6fd0f5 90%);}
.card1{position:absolute;left:60px;top:60px;width:160px;height:100px;background:#fff;border-radius:6px;box-shadow:0 12px 24px rgba(47,58,83,.15);transform:rotate(-6deg);}
.card2{position:absolute;left:120px;top:100px;width:160px;height:100px;background:linear-gradient(135deg,#2f3a53,#003d62);border-radius:6px;box-shadow:0 12px 24px rgba(47,58,83,.2);transform:rotate(4deg);}
.sec{padding:22px 36px 0;}
.filterRow{display:flex;gap:10px;margin-bottom:14px;}
.chip{font-size:12px;padding:6px 14px;border-radius:9999px;border:1px solid #e6e6e6;color:#3a3a3a;}
.chip.eco{background:#e2f8e7;color:#117a5e;border-color:#e2f8e7;}
.chip.rush{background:#fff1de;color:#b94f07;border-color:#fff1de;}
.chip.life{background:#ffeeeb;color:#ffa497;border-color:#ffeeeb;}
.secTitle{font-family:Tiempos,Georgia,serif;font-size:18px;font-weight:700;color:#2f3a53;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border:1px solid #e6e6e6;border-radius:6px;padding:12px;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#cc3011;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:2px;z-index:2;}
.thumb{height:90px;border-radius:4px;margin-bottom:10px;}
.pname{font-size:13px;font-weight:600;color:#2f3a53;}
.pprice{font-size:13px;font-weight:700;color:#003d62;margin-top:8px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Vistaprint</div>
<div class="navlinks"><span>Business Cards</span><span>Marketing</span><span>Signage</span><span>Apparel</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Designed for Professionals</div>
<div class="h1">Print that looks like it took longer.</div>
<div class="sub">Business cards, signage, and marketing materials — designed and shipped fast.</div>
<div class="cta">Start Designing</div>
</div>
<div class="heroimg"><div class="card1"></div><div class="card2"></div></div>
</div>
<div class="sec">
<div class="filterRow"><div class="chip eco">Sustainable</div><div class="chip rush">Rush Shipping</div><div class="chip life">Lifestyle</div></div>
<div class="secTitle">Popular Products</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#2f3a53,#6fd0f5)"></div><div class="pname">Standard Business Cards</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#117a5e,#e2f8e7)"></div><div class="pname">Recycled Paper Cards</div><div class="pprice">$16.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b94f07,#fff1de)"></div><div class="pname">Same-Day Banners</div><div class="pprice">$39.99</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f3f3; color: #0c0c0c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f3f3; color: #0c0c0c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.3px; margin: 0; color: #0c0c0c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #7796a8; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f3f3f3; color: #0c0c0c;
border: 1px solid #7796a8; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f1f0f0; color: #121212;
border: 1px solid #dedede; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #334fb4; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Assistant','Helvetica Neue',Arial,sans-serif; background:#f3f3f3; color:#121212; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-family:'Open Sans Condensed',sans-serif;font-size:19px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#0c0c0c;}
.navlinks{display:flex;gap:22px;font-family:'Open Sans Condensed',sans-serif;font-size:15px;font-weight:600;letter-spacing:0.6px;text-transform:uppercase;color:#0c0c0c;}
.hero{padding:36px 34px;}
.hero h1{font-family:'Open Sans Condensed',sans-serif;font-size:30px;font-weight:700;color:#0c0c0c;margin:0 0 8px;letter-spacing:-0.3px;}
.hero p{font-size:15px;color:#767676;margin:0;max-width:460px;}
.sec{padding:12px 34px 0;}
.secTitle{font-size:14px;font-weight:600;color:#121212;margin-bottom:14px;}
.grid{display:flex;gap:18px;}
.card{width:180px;}
.thumb{height:150px;background:#f1f0f0;border-radius:8px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.cover{width:100px;height:130px;border-radius:2px;}
.spine{position:absolute;left:0;top:0;bottom:0;width:6px;}
.ctitle{font-size:16px;font-weight:600;color:#121212;margin-top:10px;}
.cauthor{font-size:13px;color:#767676;margin-top:2px;}
.cprice{font-size:15px;color:#767676;margin-top:6px;}
.badge{display:inline-block;background:#334fb4;color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;margin-bottom:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#0c0c0c;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:13px;color:#8f9cb5;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Wave Books</div>
<div class="navlinks"><span>Poetry</span><span>Essays</span><span>Authors</span><span>Journal</span></div>
</div>
<div class="hero">
<h1>New in Poetry — Fall Season</h1>
<p>An independent press publishing the poets who shape how a generation reads.</p>
</div>
<div class="sec">
<div class="secTitle">New Releases</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="spine" style="background:#7796a8"></div><div class="cover" style="background:linear-gradient(160deg,#7796a8,#0c0c0c)"></div></div><div class="badge">Signed Edition</div><div class="ctitle">The Tide Keeps Time</div><div class="cauthor">A collection of new poems</div><div class="cprice">$17.00</div></div>
<div class="card"><div class="thumb"><div class="spine" style="background:#334fb4"></div><div class="cover" style="background:linear-gradient(160deg,#dedede,#8f9cb5)"></div></div><div class="ctitle">Harbor Light Almanac</div><div class="cauthor">Selected poems</div><div class="cprice">$18.00</div></div>
<div class="card"><div class="thumb"><div class="spine" style="background:#5c7a8c"></div><div class="cover" style="background:linear-gradient(160deg,#121212,#5c7a8c)"></div></div><div class="ctitle">A Winter Correspondence</div><div class="cauthor">Essays & letters</div><div class="cprice">$16.00</div></div>
</div>
</div>
<div class="footer"><span>© An Independent Poetry Press</span><span>Subscribe to the Newsletter</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f1f1f1; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f1f1f1; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #464a4e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ff0375; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #f1f1f1; color: #111111;
border: 1px solid #ff0375; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #2f2f2f;
border: 1px solid #b9b9b9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #464a4e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #d39e00; color: #111111;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f1f1f1; font-family:'Open Sans','Roboto','Segoe UI',-apple-system,sans-serif; color:#2f2f2f; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #b9bbbe;}
.logo{font-size:19px;font-weight:700;color:#111111;}
.navlinks{display:flex;gap:20px;font-size:15px;font-weight:600;color:#111111;}
.navlinks .active{color:#ff0375;border-bottom:3px solid #ff0375;padding-bottom:20px;}
.hero{height:220px;background:#f1f1f1;display:flex;align-items:center;padding:0 44px;}
.herotext{width:52%;}
.herotext h1{font-size:32px;font-weight:700;color:#111111;margin:0 0 12px;letter-spacing:-0.4px;}
.herotext p{font-size:15px;color:#818182;margin:0 0 18px;max-width:320px;}
.cta{display:inline-block;background:#ff0375;color:#fff;font-size:16px;font-weight:600;padding:12px 24px;border-radius:8px;}
.heroimg{width:40%;height:150px;border-radius:0;background:linear-gradient(135deg,#ff0375,#ececf6);}
.section{padding:18px 44px 0;}
.seclabel{font-size:20px;font-weight:600;color:#111111;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:190px;background:#fff;border-radius:8px;padding:12px;}
.thumb{height:96px;background:#ececf6;margin-bottom:8px;}
.badge{display:inline-block;background:#ff0375;color:#fff;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;margin-bottom:6px;}
.ptitle{font-size:15px;font-weight:600;color:#111111;}
.pprice{font-size:15px;color:#111111;margin-top:4px;}
.saleprice{color:#721c24;font-weight:700;}
</style>
<div class="nav">
<div class="logo">Sargent Art</div>
<div class="navlinks"><div class="active">Paint</div><div>Crayons</div><div>Markers</div><div>Classroom</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Art supplies that get out of the way.</h1>
<p>Vivid color, low mess, trusted by classrooms since 1919.</p>
<div class="cta">Shop Best Sellers</div>
</div>
<div class="heroimg"></div>
</div>
<div class="section">
<div class="seclabel">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ff0375,#ececf6)"></div><div class="badge">New</div><div class="ptitle">Washable Tempera Paint, 8ct</div><div class="pprice">$8.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#116600,#f1f1f1)"></div><div class="ptitle">Classroom Crayons, 25pk</div><div class="pprice saleprice">$5.49</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#004085,#ececf6)"></div><div class="ptitle">Watercolor Marker Set</div><div class="pprice">$6.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #00c896; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #00c896; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #17a27e; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00c896; color: #000000;
border: 1px solid #17a27e; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #00c896; color: #000000;
border: 1px solid #27cfa5; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #04c292; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FAFAFB; color:#424242; box-sizing:border-box;
font-family:"Noto Sans KR", -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing:border-box; }
.nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:#fff; }
.nav .brand { font-weight:700; font-size:19px; color:#00C896; }
.nav .links { display:flex; gap:22px; font-size:14px; color:#424242; }
.navbtn { background:#00C896; color:#fff; border-radius:8px; padding:9px 18px; font-size:13px; font-weight:500; }
.hero { margin:20px 32px 0; border-radius:24px; padding:34px 40px; position:relative; overflow:hidden;
background:linear-gradient(120deg,#EFFFFA,#FAF5FF); }
.hero h1 { font-size:38px; font-weight:700; line-height:1.25; margin:0 0 10px;
background:linear-gradient(90deg,#00C896,#9F7AEA); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { font-size:15px; color:#424242; margin:0 0 16px; max-width:460px; }
.herobtn { background:#00C896; color:#fff; border-radius:8px; padding:10px 22px; font-size:14px; font-weight:600; display:inline-block; }
.segrow { display:flex; gap:14px; padding:20px 32px 0; }
.segcard { flex:1; background:#fff; border-radius:16px; padding:18px; box-shadow: rgba(0,0,0,0.08) 0px 0px 12px; }
.segcard .dot { width:34px; height:34px; border-radius:10px; margin-bottom:10px; }
.d1{background:#EFFFFA;} .d2{background:#FAF5FF;} .d3{background:#FFF3E8;}
.d1::after,.d2::after,.d3::after{content:'';display:block;width:16px;height:16px;border-radius:5px;margin:9px auto 0;}
.d1::after{background:#00C896;} .d2::after{background:#9F7AEA;} .d3::after{background:#ED8936;}
.segcard h4 { font-size:14px; font-weight:700; margin:0 0 4px; }
.segcard p { font-size:12px; color:#757575; margin:0; }
.banner { margin:20px 32px 0; background:#00C896; border-radius:24px; padding:26px 40px; color:#fff;
display:flex; align-items:center; justify-content:space-between; }
.banner h3 { font-size:20px; margin:0 0 6px; }
.banner p { font-size:13px; margin:0; opacity:0.9; }
.bannerbtn { background:#000; color:#fff; border-radius:8px; padding:10px 20px; font-size:13px; font-weight:500; }
</style></head>
<body>
<nav class="nav">
<div class="brand">Classting</div>
<div class="links"><span>For Schools</span><span>For Teachers</span><span>For Parents</span></div>
<button class="navbtn">Get started</button>
</nav>
<div class="hero">
<h1>Personalized learning<br>for every classroom</h1>
<p>AI-powered diagnostics connect teachers, students, and parents in one place.</p>
<span class="herobtn">Book a demo</span>
</div>
<div class="segrow">
<div class="segcard"><div class="dot d1"></div><h4>For Teachers</h4><p>Class feed, assignments, and instant grading.</p></div>
<div class="segcard"><div class="dot d2"></div><h4>For Students</h4><p>Adaptive practice that meets you where you are.</p></div>
<div class="segcard"><div class="dot d3"></div><h4>For Parents</h4><p>Real-time updates on progress and attendance.</p></div>
</div>
<div class="banner">
<div><h3>Talk to our education team</h3><p>Trusted by teachers across 99% of Korean K–12 schools.</p></div>
<div class="bannerbtn">Contact us</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eff5f5; color: #1c1d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eff5f5; color: #1c1d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #1c1d1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5f6368; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 1.5px; background: #006fcf; color: #ffffff;
border: none; border-radius: 9999px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 1.5px; background: transparent; color: #1c1d1d;
border: 1px solid #006fcf; border-radius: 9999px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #3d4246;
border: 1px solid #babfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5f6368; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #a26b25; color: #eff5f5;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eff5f5; color:#3d4246; box-sizing:border-box;
font-family:Georgia,'Times New Roman',serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#1c1d1d; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { color:#eff5f5; font-family:'Big Caslon',Georgia,serif; font-size:18px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-family:'Oswald',Helvetica,sans-serif; }
.navlinks span { color:#eff5f5; font-size:13px; font-weight:500; text-transform:uppercase; letter-spacing:1px; }
.navlinks span.active { color:#a26b25; border-bottom:2px solid #a26b25; padding-bottom:6px; }
main { display:flex; height:calc(640px - 64px); }
.gallery { width:36%; background:#ffffff; display:flex; align-items:center; justify-content:center; }
.poster { width:170px; height:255px; border-radius:8px; background:linear-gradient(160deg,#1c1d1d,#3d4246 60%,#a26b25);
box-shadow:0 12px 28px rgba(0,0,0,0.2); position:relative; }
.poster::after { content:''; position:absolute; left:20px; top:20px; right:20px; height:2px; background:rgba(255,255,255,0.3); }
.details { width:64%; padding:26px 36px; }
.badge { display:inline-block; background:#a26b25; color:#eff5f5; font-family:Helvetica,sans-serif; font-size:11px; font-weight:700;
letter-spacing:0.5px; text-transform:uppercase; border-radius:2px; padding:2px 8px; margin-bottom:12px; }
h1 { font-family:'Big Caslon',Georgia,serif; font-size:28px; font-weight:700; letter-spacing:-0.3px; margin:0 0 6px; }
.meta { font-family:Helvetica,sans-serif; font-size:12px; color:#5f6368; letter-spacing:0.2px; margin:0 0 14px; }
.price { font-size:18px; color:#3d4246; margin:0 0 16px; }
.desc { font-size:15px; line-height:1.6; margin:0 0 18px; max-width:420px; }
.buyrow { display:flex; gap:12px; }
.btn-primary { background:#006fcf; color:#fff; border:none; border-radius:9999px; padding:12px 28px;
font-family:'Oswald',Helvetica,sans-serif; font-size:14px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; }
.btn-gold { background:#a26b25; color:#eff5f5; border:none; border-radius:9999px; padding:12px 28px;
font-family:'Oswald',Helvetica,sans-serif; font-size:14px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; }
</style></head>
<body>
<nav>
<p class="brand">Carlotta Films</p>
<div class="navlinks"><span class="active">New Releases</span><span>Criterion</span><span>Collections</span><span>About</span></div>
</nav>
<main>
<div class="gallery"><div class="poster"></div></div>
<div class="details">
<span class="badge">Limited Edition</span>
<h1>Cléo from 5 to 7</h1>
<p class="meta">Agnès Varda · 1962 · Restored 4K Blu-ray</p>
<p class="price">€34.90</p>
<p class="desc">A newly restored edition of Varda's landmark New Wave film, presented with a new critical booklet and archival interviews.</p>
<div class="buyrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-gold">Pre-order Collector's Edition</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #faf8f4; color: #2b2b2b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #faf8f4; color: #2b2b2b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.32; margin: 0; color: #2b2b2b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7a7a7a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.8px; background: #2c4a3e; color: #ffffff;
border: none; border-radius: 3px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: 0.8px; background: #ffffff; color: #2c4a3e;
border: 1px solid #2c4a3e; border-radius: 3px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; background: #ffffff; color: #2b2b2b;
border: 1px solid #c6c5c2; border-radius: 3px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7a7a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.27; letter-spacing: 0.1px; background: #b09a6a; color: #ffffff;
border-radius: 3px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#faf8f4; font-family:'Georgia','Times New Roman',serif; color:#2b2b2b; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#fff;border-bottom:1px solid #e8e5de;}
.logo{font-size:21px;color:#2c4a3e;letter-spacing:0.3px;}
.navlinks{display:flex;gap:28px;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:500;letter-spacing:0.3px;color:#2b2b2b;}
.hero{height:280px;position:relative;background:linear-gradient(120deg,#8fae9c 0%,#4d6d5c 55%,#1e3a2e 100%);display:flex;align-items:center;overflow:hidden;}
.hero:before{content:'';position:absolute;left:40px;bottom:-30px;width:220px;height:70px;background:rgba(0,0,0,0.18);border-radius:4px;}
.hero:after{content:'';position:absolute;right:60px;top:40px;width:130px;height:130px;background:rgba(255,255,255,0.08);border-radius:0;}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,0.25);}
.herotext{position:relative;z-index:2;padding:0 60px;max-width:520px;color:#fff;}
.herotext .over{font-family:Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#b09a6a;margin-bottom:14px;}
.herotext h1{font-size:38px;font-weight:400;line-height:1.2;margin:0 0 14px;}
.herotext p{font-family:Arial,sans-serif;font-size:14px;line-height:1.5;color:#e8e5de;margin:0 0 18px;max-width:380px;}
.cta{display:inline-block;background:#2c4a3e;color:#fff;font-family:Arial,sans-serif;font-size:13px;font-weight:500;letter-spacing:0.8px;text-transform:uppercase;padding:14px 30px;}
.gateway{display:flex;gap:1px;background:#e8e5de;}
.gtile{flex:1;height:132px;position:relative;overflow:hidden;}
.gtile .fill{position:absolute;inset:0;}
.gtile .label{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-family:Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.4);}
.section{padding:20px 40px 0;}
.section .title{font-size:22px;font-weight:400;margin-bottom:14px;color:#2b2b2b;}
.grid{display:flex;gap:24px;}
.card{width:196px;}
.thumb{height:118px;margin-bottom:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#b09a6a;color:#fff;font-family:Arial,sans-serif;font-size:10px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;padding:3px 8px;}
.coll{font-family:Arial,sans-serif;font-size:11px;letter-spacing:0.5px;text-transform:uppercase;color:#7a7a7a;margin-bottom:2px;}
.ptitle{font-family:Arial,sans-serif;font-size:14px;font-weight:500;color:#2b2b2b;}
.pprice{font-family:Arial,sans-serif;font-size:15px;color:#2b2b2b;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#2c4a3e;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-family:Arial,sans-serif;font-size:11px;color:rgba(255,255,255,0.7);}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Kingsley Bate</div>
<div class="navlinks"><div>Dining</div><div>Seating</div><div>Lounging</div><div>Accessories</div><div>Collections</div></div>
</div>
<div class="hero">
<div class="scrim"></div>
<div class="herotext">
<div class="over">Grade A Teak, Since 1983</div>
<h1>Furniture built for the harbor view.</h1>
<p>Plantation-grown Javanese hardwood, mortise-and-tenon joinery, and marine-grade stainless — made to weather to silver.</p>
<div class="cta">Shop Collections</div>
</div>
</div>
<div class="gateway">
<div class="gtile"><div class="fill" style="background:linear-gradient(160deg,#e8e5de,#b09a6a)"></div><div class="label">Nantucket</div></div>
<div class="gtile"><div class="fill" style="background:linear-gradient(160deg,#7a9a8e,#2c4a3e)"></div><div class="label">Chelsea</div></div>
<div class="gtile"><div class="fill" style="background:linear-gradient(160deg,#d4d0c8,#8f8a7a)"></div><div class="label">Somerset</div></div>
</div>
<div class="section">
<div class="title">New Collection</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b09a6a,#3d3d3d)"><div class="badge">New</div></div><div class="coll">Nantucket</div><div class="ptitle">Teak Dining Table</div><div class="pprice">$4,295</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2c4a3e,#7a9a8e)"></div><div class="coll">Chelsea</div><div class="ptitle">Deep Seating Sofa</div><div class="pprice">$3,150</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8f8a7a,#d4d0c8)"><div class="badge">Bestseller</div></div><div class="coll">Somerset</div><div class="ptitle">Wicker Lounge Chair</div><div class="pprice">$1,895</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#7a9a8e,#2c4a3e)"></div><div class="coll">Nantucket</div><div class="ptitle">Aluminum Side Table</div><div class="pprice">$695</div></div>
</div>
</div>
<div class="footer"><span>Collections · Materials · Trade Program</span><span>Where to Buy</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6c757d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #3aaf4a; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #3aaf4a;
border: 1px solid #3aaf4a; border-radius: 8px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #333333;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c757d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fbcd0a; color: #1c1c1c;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Nunito Sans',Arial,Helvetica,sans-serif; background:#ffffff; color:#1c1c1c; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:19px;font-weight:700;color:#3aaf4a;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:600;}
.hero{height:250px;background:#f9fafb;display:flex;align-items:center;padding:0 44px;}
.left{width:52%;}
.left h1{font-size:30px;font-weight:700;line-height:1.25;margin:0 0 14px;}
.left p{font-size:16px;color:#333;max-width:340px;margin:0 0 18px;}
.btn{display:inline-block;background:#3aaf4a;color:#fff;font-size:16px;font-weight:600;letter-spacing:.5px;padding:12px 28px;border-radius:8px;}
.right{width:44%;height:160px;border-radius:12px;background:linear-gradient(135deg,#c1e6e6,#3aaf4a 70%);}
.section{padding:22px 40px 0;}
.sectitle{font-size:20px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.08);overflow:hidden;}
.thumb{height:90px;background:#e3f2e6;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#fbcd0a;color:#1c1c1c;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.cbody{padding:12px;}
.ptitle{font-size:16px;font-weight:600;}
.pprice{font-size:16px;font-weight:600;color:#3aaf4a;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Xlear</div>
<div class="navlinks"><div>Nasal Sprays</div><div>Oral Care</div><div>Kids</div></div>
</div>
<div class="hero">
<div class="left">
<h1>Health, evidence-based and naturally sweet.</h1>
<p>Xylitol-powered nasal and oral care that fights bacteria the natural way.</p>
<div class="btn">Shop Best Sellers</div>
</div>
<div class="right"></div>
</div>
<div class="section">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">Sale</div></div><div class="cbody"><div class="ptitle">Xylitol Nasal Spray</div><div class="pprice">$14.99</div></div></div>
<div class="card"><div class="thumb"></div><div class="cbody"><div class="ptitle">Xylitol Toothpaste</div><div class="pprice">$8.99</div></div></div>
<div class="card"><div class="thumb"></div><div class="cbody"><div class="ptitle">Kids Nasal Mist</div><div class="pprice">$11.99</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c1c1c;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c1c1c;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #1c1c1c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #7e838c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff5a2b; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #1c1c1c;
border: 1px solid #ff5a2b; border-radius: 0px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; background: #ffffff; color: #1c1c1c;
border: 1px solid #c6c6c6; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7e838c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #ff5a2b; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Incase</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#eaebef; font-family:Arial,Helvetica,sans-serif; color:#1c1c1c;
}
*{box-sizing:border-box;}
.nav{
height:60px; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #eaebef;
}
.logo{ font-size:18px; font-weight:700; letter-spacing:1px; color:#1c1c1c; text-transform:uppercase; }
.navlinks{ display:flex; gap:26px; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#415064; }
.cta-nav{ background:#ff5a2b; color:#fff; font-size:11px; font-weight:700; padding:9px 18px; border-radius:2px; text-transform:uppercase; letter-spacing:0.5px; }
.hero{
display:flex; height:280px; background:#1c1c1c;
}
.hero-copy{
width:360px; padding:0 40px; display:flex; flex-direction:column; justify-content:center; color:#fff;
}
.eyebrow{ font-size:10px; letter-spacing:2px; color:#7e838c; text-transform:uppercase; margin-bottom:12px; }
.headline{ font-size:30px; font-weight:700; line-height:1.15; margin-bottom:14px; }
.sub{ font-size:12px; color:#a3a4a8; line-height:1.6; margin-bottom:20px; max-width:280px; }
.cta{
background:#ff5a2b; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
padding:12px 24px; border-radius:2px; width:fit-content;
}
.swatchwall{
flex:1; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; padding:20px 30px;
}
.dot{ width:44px; height:44px; border-radius:50%; box-shadow:0 4px 10px rgba(0,0,0,0.3); }
.section{ padding:22px 40px; }
.sectitle{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#1c1c1c; margin-bottom:14px; }
.grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.card{
background:#ffffff; border-radius:4px; padding:14px; display:flex; flex-direction:column; gap:8px;
}
.swatchhero{ height:70px; border-radius:2px; position:relative; }
.dotmini{ position:absolute; bottom:8px; right:8px; display:flex; gap:4px; }
.dm{ width:10px; height:10px; border-radius:50%; border:1px solid #fff; }
.cname{ font-size:11px; font-weight:700; color:#1c1c1c; }
.ccat{ font-size:9px; color:#7e838c; text-transform:uppercase; letter-spacing:0.5px; }
.cprice{ font-size:12px; font-weight:700; color:#ff5a2b; margin-top:auto; }
</style>
<div class="nav">
<div class="logo">Incase</div>
<div class="navlinks">
<span>Laptop Sleeves</span><span>Backpacks</span><span>iPhone Cases</span><span>Travel</span>
</div>
<div class="cta-nav">Shop New</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="eyebrow">Fourteen Colorways</div>
<div class="headline">Protection, colored precisely.</div>
<div class="sub">Engineered laptop bags and cases in a full spectrum of considered colorways — the product is the palette.</div>
<div class="cta">Explore Colors</div>
</div>
<div class="swatchwall">
<div class="dot" style="background:#9fcc4b"></div>
<div class="dot" style="background:#ceea37"></div>
<div class="dot" style="background:#e71f7b"></div>
<div class="dot" style="background:#fda262"></div>
<div class="dot" style="background:#bfecf5"></div>
<div class="dot" style="background:#233246"></div>
<div class="dot" style="background:#40799d"></div>
<div class="dot" style="background:#fabee8"></div>
<div class="dot" style="background:#99c8b4"></div>
<div class="dot" style="background:#97293c"></div>
</div>
</div>
<div class="section">
<div class="sectitle">Compact Sleeve — All Colorways</div>
<div class="grid">
<div class="card">
<div class="swatchhero" style="background:#9fcc4b"><div class="dotmini"><div class="dm" style="background:#ceea37"></div><div class="dm" style="background:#233246"></div></div></div>
<div class="cname">Compact Sleeve 14"</div>
<div class="ccat">Lime</div>
<div class="cprice">$59.95</div>
</div>
<div class="card">
<div class="swatchhero" style="background:#e71f7b"><div class="dotmini"><div class="dm" style="background:#fabee8"></div></div></div>
<div class="cname">Compact Sleeve 14"</div>
<div class="ccat">Hot Pink</div>
<div class="cprice">$59.95</div>
</div>
<div class="card">
<div class="swatchhero" style="background:#40799d"><div class="dotmini"><div class="dm" style="background:#bfecf5"></div></div></div>
<div class="cname">Compact Sleeve 14"</div>
<div class="ccat">Steel</div>
<div class="cprice">$59.95</div>
</div>
<div class="card">
<div class="swatchhero" style="background:#fda262"><div class="dotmini"><div class="dm" style="background:#9fcc4b"></div></div></div>
<div class="cname">Compact Sleeve 14"</div>
<div class="ccat">Coral</div>
<div class="cprice">$59.95</div>
</div>
<div class="card">
<div class="swatchhero" style="background:#233246"><div class="dotmini"><div class="dm" style="background:#40799d"></div></div></div>
<div class="cname">Compact Sleeve 14"</div>
<div class="ccat">Navy</div>
<div class="cprice">$59.95</div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #50ffeb; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #50ffeb; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #2d7c73; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #321e37; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #50ffeb; color: #321e37;
border: 1px solid #321e37; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #50ffeb; color: #111111;
border: 1px solid #46d9c8; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #2d7c73; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4bdbce; color: #321e37;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f5f0; color:#321e37; box-sizing:border-box;
font-family:"Avantt", "Inter tight", sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#ffffff; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { font-size:18px; font-weight:600; }
.navlinks { display:flex; gap:20px; font-family:"CoFo Sans Semi-Mono",monospace; font-size:14px; font-weight:550; }
.cta { background:#50ffeb; color:#321e37; border-radius:4px; padding:10px 18px;
font-family:"CoFo Sans Semi-Mono",monospace; font-size:14px; font-weight:550; }
.hero { background:#321e37; color:#fff; padding:30px 34px; text-align:center; }
.hero h1 { font-size:38px; font-weight:550; line-height:1.125; margin:0 0 12px; }
.hero p { font-size:15px; color:#d9d2dc; margin:0 0 16px; }
.band { padding:22px 34px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:#ffffff; border:1px solid #d6d2d7; border-radius:8px; padding:18px; }
.card h3 { font-size:17px; font-weight:600; margin:0 0 6px; }
.card p { font-size:13px; color:#706273; margin:0; line-height:1.4; }
.accrow { display:flex; gap:12px; padding:0 34px 20px; }
.acc { flex:1; background:#f6efea; border-radius:8px; padding:16px; text-align:center; }
.acc h4 { font-size:14px; margin:0 0 4px; }
.acc span { font-size:11px; color:#706273; }
footer { position:absolute; bottom:0; width:960px; padding:12px 34px; display:flex; justify-content:space-between;
font-size:11.5px; color:#a3a9ba; border-top:1px solid #d6d2d7; }
</style></head>
<body>
<nav>
<p class="brand">Starling Bank</p>
<div class="navlinks"><span>Personal</span><span>Business</span><span>About</span><span>Help</span></div>
<span class="cta">Apply now</span>
</nav>
<section class="hero">
<h1>Good with money starts here.</h1>
<p>Fast technology, fair service and honest values. All at the tap of a phone.</p>
<span class="cta" style="display:inline-block;">Apply now</span>
</section>
<section class="band">
<div class="card"><h3>Spaces</h3><p>Set money aside automatically for the things that matter.</p></div>
<div class="card"><h3>Instant notifications</h3><p>Know the moment money moves — no surprises.</p></div>
<div class="card"><h3>Business banking</h3><p>Business banking. But better — built for sole traders too.</p></div>
</section>
<div class="accrow">
<div class="acc"><h4>Personal</h4><span>Everyday current account</span></div>
<div class="acc"><h4>Joint</h4><span>Do life together</span></div>
<div class="acc"><h4>Business</h4><span>Let's talk business</span></div>
<div class="acc"><h4>Under 16s</h4><span>Teach life skills</span></div>
</div>
<footer>
<span>Banking was broken — so we decided to fix it.</span>
<span>Starling Bank · Which? Recommended</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #191919;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #191919;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 300; line-height: 1.3; letter-spacing: 0.08em; margin: 0; color: #191919; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.65; letter-spacing: 0.02em; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.20em; background: #191919; color: #fafafa;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.20em; background: transparent; color: #191919;
border: 1px solid #191919; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.65; letter-spacing: 0.02em; background: #fafafa; color: #191919;
border: 1px solid #c2c2c2; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; background: transparent; color: #777777;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fafafa; color:#191919; box-sizing:border-box;
font-family:Raleway, sans-serif; }
* { box-sizing:border-box; }
nav { height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 42px;
border-bottom:1px solid #dedede; }
.brand { font-size:16px; font-weight:200; letter-spacing:0.18em; text-transform:uppercase; }
.navlinks { display:flex; gap:30px; font-size:11px; font-weight:300; letter-spacing:0.12em; text-transform:uppercase; color:#777777; }
.navlinks span.on { color:#191919; }
.cart-txt { font-size:11px; font-weight:300; letter-spacing:0.1em; text-transform:uppercase; }
main { display:flex; height:572px; }
.gallery { width:430px; background:#ffffff; display:flex; align-items:center; justify-content:center; position:relative; }
.ring-disp { width:150px; height:150px; border-radius:50%; border:14px solid #dedede; position:relative; }
.ring-disp::after { content:''; position:absolute; top:-4px; left:50%; transform:translateX(-50%);
width:22px; height:22px; border-radius:50%; background:#191919; }
.necklace { position:absolute; width:200px; height:2px; background:#dedede; top:280px;
border-radius:9999px; }
.info { flex:1; padding:44px 46px; display:flex; flex-direction:column; gap:16px; }
.cat { font-size:10.5px; font-weight:300; letter-spacing:0.14em; text-transform:uppercase; color:#777777; }
h1 { font-size:24px; font-weight:200; margin:0; letter-spacing:0.04em; line-height:1.4; }
.desc { font-size:13px; font-weight:300; color:#555555; line-height:1.7; max-width:340px; letter-spacing:0.02em; }
.spec-row { display:flex; flex-direction:column; gap:6px; font-size:11px; font-weight:300; letter-spacing:0.08em;
text-transform:uppercase; color:#555555; }
.spec-row span b { color:#191919; font-weight:500; }
.price-row { display:flex; align-items:baseline; gap:10px; padding-top:6px; }
.price { font-size:15px; font-weight:300; letter-spacing:0.04em; }
.btn-row { display:flex; gap:0; margin-top:auto; }
.btn-primary { flex:1; background:#191919; color:#fafafa; border:none; padding:15px 18px;
font-size:11px; font-weight:400; letter-spacing:0.14em; text-transform:uppercase; }
.note { font-size:10.5px; font-weight:300; letter-spacing:0.06em; color:#a0a0a0; text-transform:uppercase; }
</style></head>
<body>
<nav>
<div class="brand">Agmes</div>
<div class="navlinks"><span class="on">Rings</span><span>Necklaces</span><span>Earrings</span><span>Bracelets</span></div>
<div class="cart-txt">Bag (0)</div>
</nav>
<main>
<div class="gallery"><div class="ring-disp"></div><div class="necklace"></div></div>
<div class="info">
<span class="cat">Signet — Sterling Silver</span>
<h1>Wide Band Signet Ring</h1>
<p class="desc">Hand-cast in recycled sterling silver, finished with a hammered surface that catches light without demanding it.</p>
<div class="spec-row">
<span>Material — <b>Sterling Silver</b></span>
<span>Made in — <b>New York City</b></span>
</div>
<div class="price-row"><span class="price">$385.00</span></div>
<div class="btn-row"><button class="btn-primary">Add to Bag</button></div>
<span class="note">Made to order · 2–3 weeks</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0064ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0064ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b4fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0061fd; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0064ff; color: #ffffff;
border: 1px solid #0061fd; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0064ff; color: #f5f5f5;
border: 1px solid #277bfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b4fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0064ff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:Pretendard, -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-size:18px; font-weight:700; }
.navlinks { display:flex; gap:26px; }
.navlinks span { font-size:14px; font-weight:700; padding-bottom:16px; }
.navlinks span.active { color:#0064ff; border-bottom:4px solid #0064ff; }
.hero { text-align:center; padding:26px 40px 22px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.eyebrow { font-size:14px; font-weight:700; color:#0064ff; letter-spacing:0.02em; }
h1 { font-size:34px; font-weight:700; margin:0; letter-spacing:-0.5px; line-height:1.25; }
.pill { display:flex; align-items:center; gap:10px; background:#ffffff; border:1px solid #e2e2e2;
border-radius:35px; padding:14px 22px; font-size:14px; color:#000000; margin-top:6px; }
.pill .dot { width:8px; height:8px; border-radius:50%; background:#0064ff; }
.bands { display:flex; gap:16px; padding:6px 40px 30px; }
.panel { flex:1; border-radius:19px; padding:22px; display:flex; flex-direction:column; gap:8px; }
.panel.blue { background:#0061fd; color:#ffffff; }
.panel.grey { background:#f3f5f7; color:#000000; }
.panel.sky { background:linear-gradient(160deg,#f1f8ff,#d3e8ff); color:#000000; }
.panel .t { font-size:17px; font-weight:700; }
.panel .d { font-size:13px; opacity:0.85; line-height:1.4; }
.panel .icon { width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,0.35); margin-bottom:4px; }
.panel.grey .icon, .panel.sky .icon { background:rgba(0,100,255,0.14); }
.dots { display:flex; justify-content:center; gap:6px; padding-bottom:10px; }
.dots span { width:6px; height:6px; border-radius:9999px; background:#e2e2e2; }
.dots span.on { background:#0061fd; width:16px; }
</style></head>
<body>
<nav>
<span class="brand">TMAP Mobility</span>
<div class="navlinks">
<span class="active">Drive</span>
<span style="color:#000">Transit</span>
<span style="color:#000">EV Charge</span>
<span style="color:#000">Business</span>
</div>
<span style="width:40px"></span>
</nav>
<section class="hero">
<span class="eyebrow">TMAP MOBILITY VISION</span>
<h1>The fastest way to where<br>you're actually going</h1>
<div class="pill"><span class="dot"></span>Where to?</div>
</section>
<div class="bands">
<div class="panel blue">
<div class="icon"></div>
<span class="t">Driver service</span>
<span class="d">Real-time routing built on driver-scale data.</span>
</div>
<div class="panel grey">
<div class="icon"></div>
<span class="t">Transit service</span>
<span class="d">Bus and subway arrival, one tap away.</span>
</div>
<div class="panel sky">
<div class="icon"></div>
<span class="t">Business service</span>
<span class="d">Mobility data and APIs for fleet teams.</span>
</div>
</div>
<div class="dots"><span></span><span class="on"></span><span></span></div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #111111; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #111111; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #737373; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #dc9814; color: #111111;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #222222; color: #eeeeee;
border: 1px solid #dc9814; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #222222; color: #eeeeee;
border: 1px solid #111111; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #737373; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #dc9814; color: #111111;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#111111; font-family:'InterVariable',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; color:#eeeeee; }
*{box-sizing:border-box;}
.nav{height:64px;background:#111111;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-size:19px;font-weight:700;color:#eeeeee;}
.navlinks{display:flex;gap:20px;font-size:15px;font-weight:500;color:#737373;}
.navlinks .on{color:#eeeeee;}
.icons{display:flex;gap:14px;align-items:center;color:#737373;position:relative;}
.cartb{position:absolute;top:-6px;right:-10px;background:#df0202;color:#111111;border-radius:9999px;font-size:10px;font-weight:700;padding:1px 5px;}
.hero{height:170px;display:flex;align-items:center;padding:0 30px;background:#222222;}
.h1{font-size:30px;font-weight:700;letter-spacing:-0.4px;color:#eeeeee;margin:0 0 8px;max-width:420px;}
.sub{font-size:14px;color:#737373;max-width:380px;}
.grid{display:flex;gap:14px;padding:16px 30px 0;}
.card{width:206px;background:#222222;border-radius:8px;padding:12px;}
.thumb{height:104px;border-radius:4px;margin-bottom:8px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#dc9814;color:#111111;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.ptitle{font-size:16px;font-weight:500;color:#eeeeee;}
.rating{font-size:13px;color:#dc9814;margin-top:2px;}
.pprice{font-size:18px;font-weight:700;color:#dc9814;margin-top:6px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:48px;background:#111111;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;color:#6b7280;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Retro Vgames</div>
<div class="navlinks"><div class="on">Consoles</div><div>Cartridges</div><div>Accessories</div><div>Collections</div></div>
<div class="icons"><span>⌕</span><span>👤</span><span>🛒<span class="cartb">2</span></span></div>
</div>
<div class="hero">
<div>
<div class="h1">A well-lit game shop, after hours.</div>
<div class="sub">Every gold price tag feels like a find — the rest of the site stays quiet on purpose.</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="badge">Rare</div><div class="thumb" style="background:linear-gradient(135deg,#dc9814,#111111)"></div><div class="ptitle">CIB Console Bundle</div><div class="rating">★★★★★ 4.9</div><div class="pprice">$149.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#111111,#dc9814)"></div><div class="ptitle">Cartridge Trilogy Set</div><div class="rating">★★★★☆ 4.5</div><div class="pprice">$68.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#2074c1,#111111)"></div><div class="ptitle">Controller — Tested</div><div class="rating">★★★★★ 4.8</div><div class="pprice">$34.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#111111,#2074c1)"></div><div class="ptitle">Region-Free Adapter</div><div class="rating">★★★★☆ 4.3</div><div class="pprice">$22.00</div></div>
</div>
<div class="footer"><span>© Retro Vgames — collector-focused, gold means found</span><span>Shipping · Legal</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeeeee; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeeeee; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #aaaaaa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #edc236; color: #111111;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #eeeeee; color: #111111;
border: 1px solid #edc236; border-radius: 4px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #444444;
border: 1px solid #b7b7b7; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #aaaaaa; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #edc236; color: #111111;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#eeeeee; font-family:'Archivo Narrow',Arial,sans-serif; color:#444444; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#111111;}
.logo{font-size:20px;font-weight:700;color:#edc236;letter-spacing:.5px;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#eeeeee;}
.hero{height:250px;display:flex;background:#111111;}
.herotext{width:46%;padding:0 36px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#ffbe00;margin-bottom:12px;}
.h1{font-size:32px;font-weight:700;line-height:1.15;color:#fff;margin:0 0 12px;}
.sub{font-size:13px;color:#bbbbbb;margin:0 0 18px;max-width:300px;}
.cta{display:inline-block;background:#edc236;color:#111111;font-size:13px;font-weight:700;letter-spacing:.3px;padding:12px 26px;border-radius:2px;}
.heroimg{width:54%;position:relative;background:linear-gradient(160deg,#2a2a2a,#111111 70%);overflow:hidden;}
.reel{position:absolute;left:60px;top:60px;width:120px;height:120px;border-radius:50%;border:14px solid #edc236;}
.tape{position:absolute;left:200px;top:90px;width:80px;height:60px;background:#c62828;border-radius:4px;}
.sale{position:absolute;top:20px;right:30px;background:#ff2626;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:6px 12px;border-radius:2px;}
.sec{padding:22px 36px 0;}
.secTitle{font-size:18px;font-weight:700;color:#111111;margin-bottom:14px;letter-spacing:.3px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#fff;border-radius:4px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:4px;z-index:2;}
.badge-gold{background:#ffbe00;color:#111111;}
.badge-red{background:#c62828;color:#fff;}
.thumb{height:100px;border-radius:2px;margin-bottom:8px;}
.pname{font-size:14px;font-weight:700;color:#111111;}
.pmeta{font-size:11px;color:#aaaaaa;margin-top:3px;}
.pprice{font-size:14px;font-weight:700;color:#edc236;margin-top:6px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Vinegar Syndrome</div>
<div class="navlinks"><span>4K Restorations</span><span>Blu-ray</span><span>Membership</span><span>Archive</span></div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Every Print, Preserved</div>
<div class="h1">Cult film, restored frame by frame.</div>
<div class="sub">4K restorations of the forgotten, the banned, and the barely-seen.</div>
<div class="cta">Join the Archive</div>
</div>
<div class="heroimg"><div class="reel"></div><div class="tape"></div><div class="sale">Members Sale</div></div>
</div>
<div class="sec">
<div class="secTitle">New Restorations</div>
<div class="grid">
<div class="card"><span class="badge badge-gold">4K</span><div class="thumb" style="background:linear-gradient(135deg,#edc236,#111111)"></div><div class="pname">The Amber Reel</div><div class="pmeta">1974 · Restored</div><div class="pprice">$39.98</div></div>
<div class="card"><span class="badge badge-red">Ltd.</span><div class="thumb" style="background:linear-gradient(135deg,#c62828,#111111)"></div><div class="pname">Grindhouse Double Feature</div><div class="pmeta">1981 · Restored</div><div class="pprice">$44.98</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4fc3f7,#111111)"></div><div class="pname">Late Show Chiller</div><div class="pmeta">1978 · Blu-ray</div><div class="pprice">$29.98</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefdf9; color: #1f1f1f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefdf9; color: #1f1f1f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #1f1f1f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #63666a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #0762c8; color: #ffffff;
border: none; border-radius: 2px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #fefdf9; color: #0762c8;
border: 1px solid #0762c8; border-radius: 2px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fefdf9; color: #1f1f1f;
border: 1px solid #c6c6c2; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #63666a; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.5px; background: #0762c8; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Formlabs Mockup</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Roboto',sans-serif; background:#fefdf9; color:#1f1f1f; }
* { box-sizing:border-box; }
.page { width:960px; height:640px; display:flex; flex-direction:column; }
.nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; border-bottom:1px solid #ddd9cf; }
.logo { font-weight:700; font-size:19px; color:#0762c8; }
.navlinks { display:flex; gap:26px; font-size:13px; font-weight:500; color:#4b5563; }
.navcta { background:#0762c8; color:#fff; font-weight:700; font-size:13px; padding:9px 18px; border-radius:2px; }
.hero { display:flex; padding:36px 40px; gap:36px; align-items:center; }
.hero-copy { flex:1; }
.badge-new { display:inline-block; background:#ff5a00; color:#fff; font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:2px; margin-bottom:12px; text-transform:uppercase; letter-spacing:.5px; }
.hero h1 { font-size:34px; font-weight:700; letter-spacing:-.3px; line-height:1.18; margin:0 0 12px; }
.hero p { font-size:14.5px; color:#4b5563; line-height:1.6; max-width:400px; margin:0 0 18px; }
.btn-primary { background:#0762c8; color:#fff; font-weight:700; font-size:14px; padding:11px 22px; border-radius:2px; display:inline-block; }
.mono-spec { font-family:Consolas,Menlo,monospace; font-size:11px; color:#63666a; margin-top:16px; }
.hero-visual { flex:1; height:220px; background:#f3f3f3; border:1px solid #e0e0e0; display:flex; align-items:center; justify-content:center; }
.printer { width:120px; height:180px; position:relative; }
.printer .body-b { width:120px; height:130px; background:#e0e0e0; border:2px solid #d0d0ce; border-radius:6px; }
.printer .resin { position:absolute; bottom:10px; left:20px; width:80px; height:60px; background:linear-gradient(180deg,#5db5ff,#0762c8); border-radius:4px; }
.printer .led { position:absolute; top:10px; right:14px; width:10px; height:10px; border-radius:50%; background:#e1a200; }
.strip { display:flex; background:#003594; padding:10px 40px; gap:26px; }
.strip span { color:#fff; font-family:Consolas,Menlo,monospace; font-size:11px; }
.strip b { color:#5db5ff; }
.section { padding:22px 40px; flex:1; }
.section h2 { font-size:19px; font-weight:700; margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#f3f3f3; border:1px solid #ddd9cf; border-radius:2px; padding:14px; }
.card .ph { height:70px; border-radius:2px; margin-bottom:10px; background:linear-gradient(160deg,#e0e0e0,#d0d0ce); position:relative; }
.card .ph .accentbar { position:absolute; bottom:0; left:0; right:0; height:8px; background:#0762c8; }
.card .name { font-weight:700; font-size:13.5px; margin-bottom:2px; }
.card .desc { font-family:Consolas,Menlo,monospace; font-size:10.5px; color:#63666a; margin-bottom:8px; }
.card .pricerow { display:flex; justify-content:space-between; align-items:center; }
.card .price { font-weight:700; font-size:15px; }
.card .avail { font-size:10px; color:#e1a200; font-weight:700; }
</style>
<div class="page">
<div class="nav">
<div class="logo">Formlabs</div>
<div class="navlinks"><span>Printers</span><span>Materials</span><span>Software</span><span>Industries</span><span>Support</span></div>
<div class="navcta">Configure & Buy</div>
</div>
<div class="hero">
<div class="hero-copy">
<span class="badge-new">New — Form 4</span>
<h1>Precision that reads<br>like a spec sheet, not a pitch.</h1>
<p>SLA 3D printers built for professional print-configuration workflows — engineering confidence over marketing bravado.</p>
<div class="btn-primary">Configure Printer</div>
<div class="mono-spec">XY_RESOLUTION: 25µm LAYER_HEIGHT: 25-300µm BUILD_VOL: 200x125x210mm</div>
</div>
<div class="hero-visual"><div class="printer"><div class="body-b"></div><div class="resin"></div><div class="led"></div></div></div>
</div>
<div class="strip"><span>STATUS: <b>PRINTING</b></span><span>MATERIAL: <b>Rigid 10K Resin</b></span><span>ETA: <b>02:14:08</b></span></div>
<div class="section">
<h2>Materials & Printers</h2>
<div class="grid">
<div class="card"><div class="ph"><div class="accentbar"></div></div><div class="name">Form 4</div><div class="desc">SLA · 25µm resolution</div><div class="pricerow"><span class="price">$3,999</span><span class="avail">In Stock</span></div></div>
<div class="card"><div class="ph"><div class="accentbar"></div></div><div class="name">Form 4B</div><div class="desc">Biocompatible SLA</div><div class="pricerow"><span class="price">$4,999</span><span class="avail">Backorder</span></div></div>
<div class="card"><div class="ph"><div class="accentbar"></div></div><div class="name">Rigid 10K Resin</div><div class="desc">1L cartridge</div><div class="pricerow"><span class="price">$199</span><span class="avail">In Stock</span></div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d2124;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d2124;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #1d2124; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #545b62; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #6e1d46; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.3px; background: #ffffff; color: #6e1d46;
border: 1px solid #6e1d46; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1d2124;
border: 1px solid #c6c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #545b62; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #6e1d46; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Helvetica Neue', Arial, sans-serif; color:#383d41; }
*{box-sizing:border-box;}
.nav{position:absolute; top:0; left:0; width:960px; height:72px; background:transparent; display:flex; align-items:center; justify-content:space-between; padding:0 40px; border-bottom:1px solid #ececf6;}
.logo{font-size:20px; font-weight:700; color:#6e1d46;}
.navlinks{display:flex; gap:24px; font-size:14px; font-weight:500; color:#1d2124;}
.cart{font-size:13px; font-weight:600; color:#6e1d46;}
.hero{position:absolute; top:72px; left:0; width:960px; height:280px; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; background:#fafafa;}
.headline{font-size:32px; font-weight:700; color:#1d2124; margin-bottom:12px;}
.sub{font-size:16px; color:#545b62; margin-bottom:22px; width:480px;}
.btn{display:inline-block; background:#6e1d46; color:#fff; font-size:15px; font-weight:600; letter-spacing:0.3px; padding:12px 26px; border-radius:8px;}
.sec{position:absolute; top:352px; left:0; width:960px; height:288px; padding:28px 40px;}
.secTitle{font-size:22px; font-weight:600; margin-bottom:18px; color:#1d2124;}
.grid{display:flex; gap:16px;}
.card{width:216px; background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.08); padding:14px; position:relative;}
.cardImg{width:100%; height:100px; border-radius:8px; background:#f8f9fa; display:flex; align-items:center; justify-content:center;}
.bottle{width:36px; height:70px; border-radius:8px 8px 14px 14px; background:linear-gradient(180deg,#6e1d46,#4a1230);}
.cardTitle{font-size:16px; font-weight:600; margin-top:12px;}
.cardPrice{font-size:14px; color:#545b62; margin-top:4px;}
.badge{position:absolute; top:8px; left:8px; background:#6e1d46; color:#fff; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:2px 8px; border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Kindra</div>
<div class="navlinks"><span>Shop</span><span>Ingredients</span><span>Learn</span><span>About</span></div>
<div class="cart">Bag (0)</div>
</div>
<div class="hero">
<div class="headline">Vaginal Health,<br>Finally Said Out Loud</div>
<div class="sub">Clinically studied care for a category that deserves better than a whisper.</div>
<div class="btn">Shop Products</div>
</div>
<div class="sec">
<div class="secTitle">Shop Bestsellers</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="cardImg"><div class="bottle"></div></div><div class="cardTitle">Daily Balance Serum</div><div class="cardPrice">$32</div></div>
<div class="card"><div class="cardImg"><div class="bottle" style="background:linear-gradient(180deg,#818182,#545b62)"></div></div><div class="cardTitle">pH Balancing Wash</div><div class="cardPrice">$18</div></div>
<div class="card"><div class="cardImg"><div class="bottle" style="background:linear-gradient(180deg,#cba0b5,#6e1d46)"></div></div><div class="cardTitle">Soothing Cream</div><div class="cardPrice">$28</div></div>
<div class="card"><div class="cardImg"><div class="bottle" style="background:linear-gradient(180deg,#117a8b,#0d5f6b)"></div></div><div class="cardTitle">Probiotic Capsules</div><div class="cardPrice">$36</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f6; color: #272d45;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f6; color: #272d45;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: 0px; margin: 0; color: #272d45; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; margin: 0; color: #9a9db1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #eb001b; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f4f4f6; color: #272d45;
border: 1px solid #eb001b; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: 0px; background: #f4f4f6; color: #272d45;
border: 1px solid #c1c2ca; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9db1; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #4fc3f7; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f4f4f6; font-family:'Montserrat','Source Sans Pro',Arial,sans-serif; color:#676986; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#272d45;}
.logo{font-size:18px;font-weight:700;color:#fff;letter-spacing:.3px;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:600;color:#fff;}
.hero{height:238px;display:flex;background:#fff;}
.htext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 36px;}
.htext .k{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#00caaa;margin-bottom:12px;}
.htext h1{font-size:27px;font-weight:700;color:#272d45;margin:0 0 10px;line-height:1.25;}
.htext p{font-size:13.5px;line-height:1.5;color:#676986;margin:0 0 18px;max-width:290px;}
.btn{width:fit-content;background:#eb001b;color:#fff;font-size:13px;font-weight:700;padding:12px 24px;border-radius:8px;}
.himg{width:54%;position:relative;background:#f4f4f6;}
.bottle{position:absolute;left:130px;top:36px;width:54px;height:100px;border-radius:8px 8px 16px 16px;background:linear-gradient(180deg,#b97648,#272d45);}
.cap{position:absolute;left:142px;top:20px;width:30px;height:20px;border-radius:4px;background:#eb001b;}
.seclabel{padding:16px 36px 10px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#9a9db1;}
.grid{display:flex;gap:14px;padding:0 36px;}
.card{width:150px;background:#fff;border-radius:12px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#ffcf2a;color:#272d45;font-size:9px;font-weight:700;padding:2px 7px;border-radius:8px;}
.thumb{height:78px;border-radius:8px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:600;color:#272d45;height:30px;overflow:hidden;line-height:1.3;}
.price{font-size:13px;font-weight:700;color:#eb001b;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Scotch Porter</div>
<div class="navlinks"><div>Beard Care</div><div>Skincare</div><div>Hair</div><div>Gift Sets</div></div>
</div>
<div class="hero">
<div class="htext">
<div class="k">Natural Grooming</div>
<h1>Groomed with purpose, built to last.</h1>
<p>Natural-ingredient formulas for beard, skin, and hair — no filler, no compromise.</p>
<div class="btn">Shop Best Sellers</div>
</div>
<div class="himg"><div class="bottle"></div><div class="cap"></div></div>
</div>
<div class="seclabel">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge">Bestseller</span><div class="thumb" style="background:linear-gradient(140deg,#b97648,#272d45)"></div><div class="pname">Beard Growth Oil</div><div class="price">$24.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#00caaa,#272d45)"></div><div class="pname">Refreshing Face Wash</div><div class="price">$18.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#676986,#272d45)"></div><div class="pname">Matte Hair Cream</div><div class="price">$16.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(140deg,#ffcf2a,#b97648)"></div><div class="pname">Grooming Gift Set</div><div class="price">$58.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3fafe; color: #19448e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3fafe; color: #19448e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 900; line-height: 1.3; margin: 0; color: #19448e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0.2px; margin: 0; color: #949495; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #19448e; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #f3fafe; color: #19448e;
border: 1px solid #19448e; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: 0.2px; background: #ffffff; color: #55295b;
border: 1px solid #bccce2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #949495; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #e60033; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f3fafe; font-family:'Hiragino Kaku Gothic ProN','Hiragino Sans','M PLUS 1p',sans-serif; color:#55295b; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#fff;border-bottom:1px solid #e8ecef;}
.logo{font-family:'Arial Black',Impact,sans-serif;font-size:19px;font-weight:900;color:#19448e;}
.navlinks{display:flex;gap:20px;font-family:'M PLUS 1p',sans-serif;font-size:14px;font-weight:700;letter-spacing:0.3px;}
.navlinks .on{color:#19448e;border-bottom:2px solid #19448e;padding-bottom:20px;}
.tags{display:flex;gap:8px;padding:14px 32px;flex-wrap:wrap;}
.tag{border-radius:9999px;font-family:'M PLUS 1p',sans-serif;font-size:12px;font-weight:700;padding:6px 16px;color:#fff;}
.hero{height:150px;background:#19448e;display:flex;align-items:center;padding:0 32px;}
.h1{font-family:'Arial Black',Impact,sans-serif;font-size:28px;font-weight:900;color:#fff;letter-spacing:-0.3px;}
.sub{font-size:14px;color:#dbe7f7;margin-top:6px;}
.section{padding:18px 32px 0;}
.stitle{font-family:'M PLUS 1p',sans-serif;font-size:16px;font-weight:700;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:150px;background:#fff;border-radius:12px;padding:12px;}
.thumb{height:88px;border-radius:8px;margin-bottom:8px;}
.artist{font-size:12px;color:#949495;margin-bottom:2px;}
.pname{font-family:'M PLUS 1p',sans-serif;font-size:14px;font-weight:700;margin-bottom:4px;}
.pprice{font-family:Arial,sans-serif;font-size:15px;font-weight:700;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#19448e;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;color:#dbe7f7;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Technique</div>
<div class="navlinks"><div class="on">New Arrivals</div><div>Vinyl</div><div>CD</div><div>Merch</div></div>
</div>
<div class="tags">
<div class="tag" style="background:#e60033;">Jazz</div>
<div class="tag" style="background:#007b43;">City Pop</div>
<div class="tag" style="background:#e95295;">Electronic</div>
<div class="tag" style="background:#0095d9;">Ambient</div>
<div class="tag" style="background:#f39800;">Soundtrack</div>
</div>
<div class="hero">
<div><div class="h1">Independent Record Store</div><div class="sub">Curated vinyl and staff picks, one genre color at a time.</div></div>
</div>
<div class="section">
<div class="stitle">Staff Picks</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#19448e,#0095d9);"></div><div class="artist">Kaoru Ito</div><div class="pname">Midnight Transit LP</div><div class="pprice">¥3,200</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#e60033,#f39800);"></div><div class="artist">Sena Wakabayashi</div><div class="pname">Neon Harbor</div><div class="pprice">¥2,800</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#007b43,#c3d825);"></div><div class="artist">Yuudai Kondo</div><div class="pname">Rooftop Sessions</div><div class="pprice">¥3,500</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#884898,#e95295);"></div><div class="artist">Miu Tachibana</div><div class="pname">Paper Lantern EP</div><div class="pprice">¥1,900</div></div>
</div>
</div>
<div class="footer"><span>© Independent Record Store</span><span>Shipping · In-Store Pickup</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #0d0d0d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #0d0d0d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #0d0d0d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.25px; background: #ff0000; color: #ffffff;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.25px; background: #ffffff; color: #0d0d0d;
border: 1px solid #ff0000; border-radius: 12px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #0d0d0d;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#0d0d0d; box-sizing:border-box;
font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
background:#ffffff; border-bottom:1px solid #e5e5e5; }
.brand { font-size:17px; font-weight:600; letter-spacing:-0.02em; }
.navlinks { display:flex; gap:22px; font-size:13px; color:#1a1a1a; font-weight:600; }
.search { background:#f5f5f5; border:1px solid #e5e5e5; border-radius:6px; padding:8px 14px; font-size:12px;
color:#666666; width:180px; }
main { display:flex; height:576px; }
.gallery { width:400px; background:#f5f5f5; position:relative; display:flex; align-items:center; justify-content:center; }
.pad { width:230px; height:150px; background:#0d0d0d; border-radius:60px 60px 40px 40px; position:relative;
box-shadow:0 20px 40px rgba(0,0,0,0.2); }
.pad::before { content:''; position:absolute; top:50px; left:40px; width:32px; height:32px;
border-radius:9999px; background:#ff0000; }
.pad::after { content:''; position:absolute; top:50px; right:40px; width:32px; height:32px;
border-radius:9999px; background:#333333; box-shadow:0 0 0 6px #1a1a1a inset; }
.stick-l { position:absolute; top:20px; left:74px; width:36px; height:36px; border-radius:50%; background:#ff0000; }
.badge-custom { position:absolute; top:22px; left:22px; background:#1a1a1a; color:#fff; font-size:10px;
font-weight:700; padding:5px 12px; border-radius:9999px; text-transform:uppercase; }
.info { flex:1; padding:30px 36px; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#666666; }
h1 { font-size:22px; font-weight:600; margin:0; line-height:1.28; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:700; }
.desc { font-size:13px; color:#1a1a1a; line-height:1.5; max-width:340px; }
.step-row { display:flex; flex-direction:column; gap:6px; }
.step { display:flex; align-items:center; gap:8px; font-size:12.5px; color:#1a1a1a; border:1px solid #e5e5e5;
border-radius:8px; padding:9px 12px; background:#f5f5f5; }
.step .n { width:18px; height:18px; border-radius:50%; background:#ff0000; color:#fff; font-size:10px;
font-weight:700; display:flex; align-items:center; justify-content:center; }
.badges2 { display:flex; gap:6px; }
.badge2 { background:#ff0000; color:#fff; font-size:10px; font-weight:700; padding:4px 10px; border-radius:9999px;
text-transform:uppercase; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#ff0000; color:#fff; border:none; border-radius:12px; padding:13px 18px;
font-size:14px; font-weight:700; }
.btn-outline { border:1.5px solid #0d0d0d; color:#0d0d0d; background:#fff; border-radius:12px; padding:11.5px 16px;
font-size:12.5px; font-weight:700; white-space:nowrap; }
.meta { font-size:11px; color:#999999; }
</style></head>
<body>
<nav>
<div class="brand">Aimcontrollers</div>
<div class="navlinks"><span>Xbox</span><span>PS5</span><span>PC</span><span>Configurator</span></div>
<div class="search">Search part...</div>
</nav>
<main>
<div class="gallery">
<span class="badge-custom">Pro Series</span>
<div class="pad"><div class="stick-l"></div></div>
</div>
<div class="info">
<span class="cat">Custom Controller · PS5</span>
<h1>Aim Vantage Custom Controller</h1>
<div class="badges2"><span class="badge2">Pro Series</span><span class="badge2">Custom</span></div>
<div class="price-row"><span class="price">$189.99</span></div>
<p class="desc">Build your own — pick trigger stops, stick tension, and shell finish for zero-recoil, tournament-ready response.</p>
<div class="step-row">
<div class="step"><span class="n">1</span> Shell color: Crimson Red</div>
<div class="step"><span class="n">2</span> Trigger stops: Hair Trigger</div>
</div>
<div class="btn-row">
<button class="btn-primary">Continue Build</button>
<button class="btn-outline">Save Config</button>
</div>
<span class="meta">Ships in 3–5 business days</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #eeece7; color: #2a2a2a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #eeece7; color: #2a2a2a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 300; line-height: 1.2; margin: 0; color: #2a2a2a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: 0.01em; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.25; letter-spacing: 0.14em; background: #108474; color: #ffffff;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.25; letter-spacing: 0.14em; background: transparent; color: #108474;
border: 1px solid #108474; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; letter-spacing: 0.01em; background: #eeece7; color: #2a2a2a;
border: 1px solid #bdbcb8; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.12em; background: #ebdde2; color: #50463e;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#eeece7; color:#2a2a2a; box-sizing:border-box;
font-family:'Fraunces', serif; }
* { box-sizing:border-box; }
.announce { height:32px; background:#108474; color:#ffffff; display:flex; align-items:center; justify-content:center;
font-family:'Futura', Arial, sans-serif; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; }
.topbar { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
border-bottom:1px solid #dedede; }
.brand { font-size:22px; font-weight:400; }
.navlinks { display:flex; gap:26px; font-family:'Futura', Arial, sans-serif; font-size:11px; font-weight:600;
letter-spacing:0.1em; text-transform:uppercase; color:#7b7b7b; }
.layout { display:flex; height:calc(640px - 32px - 56px); }
.media { width:340px; flex-shrink:0; background:#fafafa; position:relative; display:flex; align-items:center; justify-content:center; }
.box { width:200px; height:200px; background:
repeating-linear-gradient(45deg, #108474 0 20px, #dfb734 20px 40px, #ebdde2 40px 60px);
box-shadow:0 8px 24px rgba(0,0,0,0.12); }
.piece-badge { position:absolute; top:18px; left:18px; background:#ebdde2; color:#50463e; font-family:'Futura', Arial, sans-serif;
font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.12em; border-radius:999px; padding:4px 12px; }
.detail { flex:1; padding:24px 34px; display:flex; flex-direction:column; gap:14px; }
.kicker { font-family:'Futura', Arial, sans-serif; font-size:11px; font-weight:600; letter-spacing:0.12em;
text-transform:uppercase; color:#7b7b7b; }
h1 { font-size:32px; font-weight:400; margin:0; line-height:1.15; }
.price { font-family:'Futura', Arial, sans-serif; font-size:20px; font-weight:500; }
.selector-row { display:flex; gap:10px; }
.piece-tile { border:1px solid #dedede; padding:10px 18px; min-width:80px; text-align:center; font-size:20px; font-weight:300; }
.piece-tile.active { background:#108474; color:#ffffff; border-color:#108474; }
.difficulty { display:inline-block; background:#dfb734; color:#412d00; font-family:'Futura', Arial, sans-serif; font-size:11px;
font-weight:600; letter-spacing:0.12em; text-transform:uppercase; padding:3px 10px; width:fit-content; }
.actions { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#108474; color:#ffffff; border:none; height:48px; font-family:'Futura', Arial, sans-serif;
font-size:13px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; }
.btn-secondary { background:transparent; color:#108474; border:1.5px solid #108474; height:48px; padding:0 24px;
font-family:'Futura', Arial, sans-serif; font-size:13px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; }
</style></head>
<body>
<div class="announce">Free shipping on orders over $50</div>
<div class="topbar">
<div class="brand">Cloudberries</div>
<div class="navlinks"><span>Landscapes</span><span>Art Series</span><span>Gifting</span></div>
</div>
<div class="layout">
<div class="media">
<div class="piece-badge">1000 pieces</div>
<div class="box"></div>
</div>
<div class="detail">
<div class="kicker">Landscapes Collection</div>
<h1>Meadow at Dusk</h1>
<div class="price">$28.00</div>
<div class="selector-row">
<div class="piece-tile">500</div>
<div class="piece-tile active">1000</div>
<div class="piece-tile">1500</div>
</div>
<div class="difficulty">Moderate</div>
<div class="actions">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Add to Wishlist</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f7f7; color: #2b2b2b;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f7f7; color: #2b2b2b;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #2b2b2b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5e5e5e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #436352; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #436352;
border: 1px solid #436352; border-radius: 8px;
padding: 10px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5e5e5e; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.3; background: #436352; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f7f7f7; font-family:'Futura','Century Gothic',Arial,sans-serif; color:#2b2b2b;
}
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#fff;border-bottom:1px solid #eee;}
.logo{font-size:19px;font-weight:600;color:#436352;}
.navlinks{display:flex;gap:24px;font-size:12.5px;color:#2b2b2b;}
.cta{background:#436352;color:#fff;padding:11px 20px;font-size:12px;font-weight:600;border-radius:6px;}
.hero{display:flex;padding:24px 32px 16px;gap:24px;align-items:center;}
.hero-copy{width:380px;}
.hero-title{font-size:32px;font-weight:600;line-height:1.2;margin-bottom:12px;color:#436352;}
.hero-sub{font-size:13.5px;line-height:1.6;color:#555;margin-bottom:8px;}
.tagline{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#869791;font-weight:600;margin-bottom:16px;}
.btn-main{display:inline-block;background:#436352;color:#fff;padding:13px 24px;font-size:12.5px;font-weight:600;border-radius:6px;}
.hero-visual{flex:1;height:200px;border-radius:12px;background:linear-gradient(135deg,#436352 0%,#2f4a3d 100%);position:relative;}
.badge-cert{position:absolute;top:16px;right:16px;background:#ffb400;color:#2b2b2b;font-size:9px;font-weight:700;padding:5px 10px;border-radius:999px;letter-spacing:.5px;text-transform:uppercase;}
.leafshape{position:absolute;width:70px;height:100px;border-radius:0 60% 0 60%;background:rgba(255,255,255,.15);bottom:20px;left:40px;}
.section{padding:6px 32px 0;}
.section-title{font-size:17px;font-weight:600;color:#436352;margin-bottom:14px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{background:#fff;border-radius:10px;padding:12px;box-shadow:0 2px 6px rgba(0,0,0,.06);}
.card-img{height:88px;border-radius:8px;margin-bottom:10px;background:linear-gradient(160deg,#c8dcd2,#436352);position:relative;}
.cert-mini{position:absolute;bottom:6px;left:6px;background:#436352;color:#fff;font-size:7.5px;font-weight:700;padding:3px 6px;border-radius:999px;}
.card-name{font-size:12.5px;font-weight:600;margin-bottom:4px;}
.card-price{font-size:12.5px;font-weight:700;color:#436352;}
</style>
<div class="nav">
<div class="logo">Eco BY Naty</div>
<div class="navlinks"><span>Diapers</span><span>Wipes</span><span>Skincare</span><span>Bundles</span></div>
<div class="cta">Shop Now</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="hero-title">Made for skin. Built for trust.</div>
<div class="hero-sub">Plant-based diapers and wipes, dermatologically tested and free from harsh chemicals — for the most sensitive skin.</div>
<div class="tagline">Certified Safe · Plant-Based · Hypoallergenic</div>
<div class="btn-main">Shop Diapers</div>
</div>
<div class="hero-visual">
<div class="leafshape"></div>
<div class="badge-cert">Certified Safe</div>
</div>
</div>
<div class="section">
<div class="section-title">Everyday Essentials</div>
<div class="grid">
<div class="card"><div class="card-img"><div class="cert-mini">SAFE</div></div><div class="card-name">Eco Diapers, Size 3</div><div class="card-price">$16.99</div></div>
<div class="card"><div class="card-img"><div class="cert-mini">SAFE</div></div><div class="card-name">Baby Wipes, 12-pack</div><div class="card-price">$24.99</div></div>
<div class="card"><div class="card-img"><div class="cert-mini">SAFE</div></div><div class="card-name">Calming Baby Balm</div><div class="card-price">$11.99</div></div>
<div class="card"><div class="card-img"><div class="cert-mini">SAFE</div></div><div class="card-name">Newborn Starter Bundle</div><div class="card-price">$39.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f6f6f6; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f6f6f6; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #0088cc; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; background: #f6f6f6; color: #222222;
border: 1px solid #0088cc; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f6f6f6; color: #494949;
border: 1px solid #c1c1c1; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #0cc485; color: #000000;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f6f6f6; color:#222; font-family:'Open Sans',Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box;}
.nav{height:56px;background:#494949;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{color:#fff;font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.5px;}
.logo b{color:#0088cc;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;text-transform:uppercase;color:#e1e1e1;}
.navlinks span.active{color:#fff;border-bottom:2px solid #0088cc;padding-bottom:6px;}
.hero{padding:26px 30px;display:flex;gap:24px;align-items:center;background:#f6f6f6;}
.hero .text{flex:1;}
.hero h1{font-size:32px;font-weight:700;line-height:1.2;margin:0 0 10px;}
.hero p{font-size:14px;color:#494949;margin:0 0 14px;max-width:340px;}
.cta{display:inline-block;background:#0088cc;color:#fff;font-weight:600;font-size:15px;letter-spacing:.2px;padding:12px 24px;border-radius:4px;}
.hero .img{flex:1;height:140px;border-radius:8px;background:linear-gradient(135deg,#222,#494949);position:relative;}
.hero .img::after{content:'';position:absolute;inset:20px;border:2px solid #0ae3eb;border-radius:8px;opacity:.5;}
.section{padding:0 30px 22px;}
.grid{display:flex;gap:14px;margin-top:10px;}
.card{flex:1;background:#fff;border:1px solid #e3e4e4;border-radius:8px;padding:12px;position:relative;}
.badge{position:absolute;top:10px;left:10px;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:2px 8px;border-radius:2px;color:#fff;}
.b1{background:#0cc485;}
.b2{background:#ff5216;}
.b3{background:#eb2771;}
.card .img{aspect-ratio:4/3;height:90px;border-radius:8px;margin-bottom:10px;}
.d1{background:linear-gradient(135deg,#0088cc,#222);}
.d2{background:linear-gradient(135deg,#ff5216,#222);}
.d3{background:linear-gradient(135deg,#0ae3eb,#494949);}
.card h3{font-size:15px;font-weight:600;margin:0 0 3px;}
.card .price{font-size:14px;color:#777;}
.bpm{margin-top:14px;background:#222;color:#0ae3eb;font-family:Consolas,'Courier New',monospace;font-size:20px;font-weight:700;letter-spacing:1px;padding:8px 16px;border-radius:4px;display:inline-block;}
</style>
<div class="nav">
<div class="logo">Denon DJ</div>
<div class="navlinks"><span class="active">Mixers</span><span>Controllers</span><span>Software</span><span>Support</span></div>
</div>
<div class="hero">
<div class="text">
<h1>Built for the booth.</h1>
<p>Professional DJ gear engineered for pressure — connectivity in blue, performance in orange.</p>
<a class="cta">Shop Gear</a>
</div>
<div class="img"></div>
</div>
<div class="section">
<div class="bpm">128.0 BPM</div>
<div class="grid">
<div class="card"><span class="badge b1">New</span><div class="img d1"></div><h3>Prime 4+</h3><div class="price">$1,699</div></div>
<div class="card"><span class="badge b2">Low Stock</span><div class="img d2"></div><h3>SC Live 4</h3><div class="price">$1,199</div></div>
<div class="card"><span class="badge b3">Sale</span><div class="img d3"></div><h3>X1850 Mixer</h3><div class="price">$799</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0c0c0c; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0c0c0c; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.3px; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9a9a9a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: #e2e0d7; color: #0c0c0c;
border: none; border-radius: 0px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.6px; background: transparent; color: #e2e0d7;
border: 1px solid #e2e0d7; border-radius: 0px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1a1a1a; color: #dedede;
border: 1px solid #0c0c0c; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a9a9a; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 1.2px; background: #e2e0d7; color: #0c0c0c;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0c0c0c; color:#dedede; box-sizing:border-box;
font-family:'Chivo', Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
.announce { height:32px; background:#e2e0d7; color:#0c0c0c; display:flex; align-items:center; justify-content:center;
font-size:12px; font-weight:500; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { color:#e2e0d7; font-size:18px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; letter-spacing:0.4px; color:#dedede; }
.btn-primary { background:#e2e0d7; color:#0c0c0c; border:none; border-radius:0; padding:12px 26px; font-size:13px;
font-weight:700; letter-spacing:0.6px; text-transform:uppercase; }
.hero { position:relative; min-height:230px; display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; padding:0 40px; background:radial-gradient(circle at 50% 120%,#3a2a1a,#0c0c0c 70%); }
.hero h1 { font-family:'Chivo',Arial,sans-serif; font-weight:800; font-size:38px; line-height:1.05; letter-spacing:-1px; margin:0 0 10px; max-width:560px; }
.hero p { font-size:14px; color:#dedede; margin:0 0 16px; max-width:420px; }
.ember { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:130px; height:70px;
background:radial-gradient(circle,#e2851a,#c9491c 60%,transparent 100%); opacity:0.55; filter:blur(2px); }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#3a3a3a; padding:0 40px; }
.card { background:#282828; padding:14px; position:relative; }
.card .imgbox { aspect-ratio:1/1; height:64px; background:#1a1a1a; margin-bottom:10px; }
.badge-new { position:absolute; top:10px; left:10px; background:#e2e0d7; color:#0c0c0c; font-size:10px; font-weight:700;
letter-spacing:0.4px; text-transform:uppercase; padding:3px 9px; }
.card h3 { font-size:15px; font-weight:600; margin:0 0 4px; color:#f2f2f2; }
.card .price { font-size:16px; font-weight:600; color:#e2e0d7; }
footer { background:#121212; border-top:1px solid #3a3a3a; padding:14px 40px; display:flex;
justify-content:space-between; align-items:center; font-size:12px; color:#9a9a9a; }
</style></head>
<body>
<div class="announce">Free shipping on all fire pits</div>
<nav>
<p class="brand">Breeo</p>
<div class="navlinks"><span>Fire Pits</span><span>X Series</span><span>Accessories</span></div>
<button class="btn-primary">Shop Now</button>
</nav>
<section class="hero">
<h1>Smokeless fire, engineered to last</h1>
<p>Double-wall airflow technology for a cleaner burn — built from stainless steel that ages with you, not against you.</p>
<button class="btn-primary">Shop the X Series</button>
<div class="ember"></div>
</section>
<section class="grid">
<div class="card"><div class="imgbox"><span class="badge-new">New</span></div><h3>X Series 19" Fire Pit</h3><div class="price">$399</div></div>
<div class="card"><div class="imgbox"></div><h3>X Series 24" Fire Pit</h3><div class="price">$549</div></div>
<div class="card"><div class="imgbox"></div><h3>Outpost Fire Pit Stand</h3><div class="price">$249</div></div>
</section>
<footer>
<span>© Breeo</span>
<span>Stainless Steel · Smokeless Airflow</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfbf8; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfbf8; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: 0.3px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7d7d7d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 1px; background: #32312f; color: #fcfbf8;
border: none; border-radius: 0px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 1px; background: transparent; color: #32312f;
border: 1px solid #32312f; border-radius: 0px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfbf8; color: #32312f;
border: 1px solid #c1c0be; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7d7d7d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #f7a674; color: #32312f;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcfbf8; color:#32312f; box-sizing:border-box;
font-family:'futura-pt','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#fcfbf8; }
.brand { font-size:18px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; color:#32312f; }
.util { font-size:13px; color:#7d7d7d; }
main { display:grid; grid-template-columns:400px 1fr; height:calc(640px - 72px); }
.stage { padding:26px; display:flex; flex-direction:column; gap:12px; background:#f6f3ef; }
.crumb { font-size:11px; color:#7d7d7d; }
.pan { flex:1; border-radius:4px; background:#ffffff; position:relative; overflow:hidden; }
.pan::before { content:''; position:absolute; left:50%; top:52%; width:36px; height:230px; transform:translate(-50%,-50%); border-radius:4px;
background:linear-gradient(180deg,#111111,#3a2a1a 50%,#111111); box-shadow:0 18px 30px rgba(0,0,0,0.14); }
.pan::after { content:''; position:absolute; left:50%; top:30%; width:26px; height:26px; transform:translate(-50%,0); border-radius:50%; background:#f7a674; opacity:0.8; }
.thumbs { display:flex; gap:8px; }
.thumb { width:52px; height:52px; border-radius:4px; background:#ffffff; border:1px solid #d1d1d1; }
.info { padding:24px 34px; display:flex; flex-direction:column; gap:11px; overflow:hidden; }
.cat { font-size:11px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; color:#7d7d7d; }
h1 { margin:0; font-size:24px; font-weight:500; line-height:1.25; letter-spacing:0.3px; }
.rating { display:flex; align-items:center; gap:8px; font-family:'Open Sans',sans-serif; font-size:12px; color:#7d7d7d; }
.stars { color:#f7a674; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-family:'Open Sans',sans-serif; font-size:16px; }
.desc { font-family:'Open Sans',sans-serif; font-size:14px; color:#32312f; line-height:1.6; }
.selectors { display:flex; gap:10px; }
.chip { border:1px solid #32312f; padding:10px 20px; font-size:12px; font-weight:500; letter-spacing:0.8px; text-transform:uppercase; }
.chip.on { background:#32312f; color:#fcfbf8; }
.cta-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#32312f; color:#fcfbf8; border:none; height:48px; font-size:14px; font-weight:500; letter-spacing:1px; text-transform:uppercase; }
.btn-secondary { width:170px; background:transparent; border:1px solid #32312f; color:#32312f; height:48px; font-size:14px; font-weight:500; letter-spacing:1px; text-transform:uppercase; }
</style></head>
<body>
<nav>
<p class="brand">Buffet Crampon</p>
<div class="navlinks"><span>Clarinets</span><span>Saxophones</span><span>Accessories</span><span>Repairs</span></div>
<div class="util">Search Cart (0)</div>
</nav>
<main>
<div class="stage">
<div class="crumb">Buffet Crampon / Clarinets / R13</div>
<div class="pan"></div>
<div class="thumbs"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div>
</div>
<div class="info">
<span class="cat">R13 Professional</span>
<h1>R13 Professional Bb Clarinet</h1>
<div class="rating"><span class="stars">★★★★★</span> 4.9 · 87 reviews</div>
<div class="price-row"><span class="price">$3,890.00</span></div>
<p class="desc">Grenadilla wood body with silver-plated keys, hand-finished for the warm, focused tone favored by professional orchestral players.</p>
<div class="selectors">
<span class="chip on">Standard Bore</span><span class="chip">Festival Bore</span>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">View Range</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #333333;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #333333;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #333333; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #656565; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #1c64f6; color: #ffffff;
border: none; border-radius: 12px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #333333;
border: 1px solid #1c64f6; border-radius: 12px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; background: #ffffff; color: #333333;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #656565; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #7bc7c7; color: #333333;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Montserrat',Arial,sans-serif; color:#4d4d4d; }
*{box-sizing:border-box;}
.nav{height:64px;background:#fff;border-bottom:1px solid #dedede;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:19px;font-weight:600;color:#333333;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:500;color:#4d4d4d;}
.search{width:180px;height:36px;border-radius:9999px;background:#f7f7f7;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#656565;}
.hero{height:230px;display:flex;align-items:center;padding:0 34px;gap:34px;background:#f7f7f7;}
.herotext{width:400px;}
h1{font-size:30px;font-weight:600;color:#333333;margin:0 0 12px;line-height:1.25;}
.sub{font-size:14px;color:#4d4d4d;line-height:1.6;margin:0 0 18px;width:360px;}
.cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 26px;background:#1c64f6;color:#fff;font-size:14px;font-weight:600;border-radius:12px;}
.patio{width:230px;height:170px;position:relative;}
.sofa{position:absolute;width:170px;height:70px;left:20px;bottom:20px;border-radius:16px;background:linear-gradient(160deg,#7bc7c7,#5487a0);}
.cushion{position:absolute;width:44px;height:30px;border-radius:8px;background:#7396a2;}
.c1{left:30px;bottom:60px;}.c2{left:90px;bottom:60px;}.c3{left:150px;bottom:60px;}
.fire{position:absolute;width:40px;height:40px;border-radius:9999px;right:10px;bottom:10px;background:radial-gradient(circle,#1c64f6,#7396a2 80%);}
.section{padding:0 34px;}
.sectitle{font-size:20px;font-weight:600;color:#333333;margin:18px 0 14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border:1px solid #dedede;border-radius:8px;padding:12px;}
.thumb{height:114px;border-radius:8px;margin-bottom:10px;}
.ptitle{font-size:14px;font-weight:600;color:#333333;line-height:1.3;height:36px;overflow:hidden;}
.pprice{font-size:14px;font-weight:600;color:#1c64f6;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Yardbird</div>
<div class="navlinks"><span>Seating</span><span>Dining</span><span>Fire Pits</span><span>Accessories</span></div>
<div class="search">Search furniture...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Furniture that lives outside.</h1>
<div class="sub">Deep-seated sofas and fire-pit sectionals built for the real backyard, not the showroom.</div>
<div class="cta">Shop Seating</div>
</div>
<div class="patio"><div class="sofa"></div><div class="cushion c1"></div><div class="cushion c2"></div><div class="cushion c3"></div><div class="fire"></div></div>
</div>
<div class="section">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#7bc7c7,#1c64f6)"></div><div class="ptitle">Sunday Sectional Sofa</div><div class="pprice">$2,899</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#7396a2,#333333)"></div><div class="ptitle">Fire Pit Table</div><div class="pprice">$1,299</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#5487a0,#1c64f6)"></div><div class="ptitle">Cologne Dining Set</div><div class="pprice">$1,899</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#1990c6,#136f99)"></div><div class="ptitle">Water-Resistant Cushion Set</div><div class="pprice">$199</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 24px; font-weight: 500; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #696969; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 600; line-height: 1.3; background: #fb6500; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 600; line-height: 1.3; background: #ffffff; color: #121212;
border: 1px solid #fb6500; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-size: 12px; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #696969; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 600; line-height: 1.2; background: #008a00; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Barlow',Arial,sans-serif; color:#222222; }
*{box-sizing:border-box;}
.nav{height:56px;background:#222222;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:600;color:#ffffff;}
.searchpill{width:220px;height:32px;border-radius:9999px;background:#ffffff;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#696969;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;color:#ffffff;}
.hero{height:260px;display:flex;background:#121212;}
.heroText{width:460px;padding:44px 36px;display:flex;flex-direction:column;justify-content:center;}
.h1{font-size:28px;font-weight:500;line-height:1.25;color:#ffffff;margin:0 0 14px;}
.sub{font-size:14px;color:#cccccc;line-height:1.5;margin:0 0 20px;width:360px;}
.cta{display:inline-flex;align-items:center;justify-content:center;width:150px;height:44px;background:#fb6500;color:#ffffff;font-size:14px;font-weight:600;border-radius:4px;}
.vinyl{position:relative;width:500px;height:260px;}
.disc{position:absolute;right:70px;top:44px;width:170px;height:170px;border-radius:9999px;background:radial-gradient(circle,#121212 0%,#121212 20%,#fb6500 22%,#fb6500 24%,#222222 26%,#222222 100%);}
.discCenter{position:absolute;right:145px;top:119px;width:20px;height:20px;border-radius:9999px;background:#ffbd00;}
.sec{padding:22px 32px 0;}
.secTitle{font-size:18px;font-weight:600;color:#121212;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;border:1px solid #cac9c9;border-radius:12px;padding:10px;position:relative;}
.thumb{height:110px;border-radius:6px;margin-bottom:10px;}
.stock{position:absolute;top:20px;left:20px;font-size:9px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;color:#ffffff;padding:3px 8px;border-radius:4px;}
.st-avail{background:#008a00;}
.st-pre{background:#fb6500;}
.pname{font-size:13px;font-weight:600;color:#222222;margin:0 0 4px;}
.pprice{font-size:14px;font-weight:600;color:#fb6500;}
.sale{color:#ffbd00;}
</style>
<div class="nav">
<div class="logo">White Noise Records</div>
<div class="navlinks"><span>New Arrivals</span><span>Genres</span><span>Turntables</span></div>
<div class="searchpill">Search records...</div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Dig deeper.<br>Find the record that finds you.</div>
<div class="sub">Curated vinyl for collectors who still flip through crates.</div>
<div class="cta">Shop New Arrivals</div>
</div>
<div class="vinyl"><div class="disc"></div><div class="discCenter"></div></div>
</div>
<div class="sec">
<div class="secTitle">This Week's Crate</div>
<div class="grid">
<div class="card"><span class="stock st-avail">In Stock</span><div class="thumb" style="background:linear-gradient(135deg,#fb6500,#121212);"></div><div class="pname">Late Night Sessions LP</div><div class="pprice">$28.00</div></div>
<div class="card"><span class="stock st-pre">Pre-Order</span><div class="thumb" style="background:linear-gradient(135deg,#222222,#fb6500);"></div><div class="pname">Basement Tapes Vol. II</div><div class="pprice sale">$24.00</div></div>
<div class="card"><span class="stock st-avail">In Stock</span><div class="thumb" style="background:linear-gradient(135deg,#121212,#ffbd00);"></div><div class="pname">Analog Warmth 180g</div><div class="pprice">$32.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #1A1A1A;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #1A1A1A;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; color: #1A1A1A; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.4; margin: 0; color: #6B6B6B; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #EA0016; color: #FFFFFF;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #FFFFFF; color: #EA0016;
border: 1px solid #EA0016; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #1A1A1A;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6B6B6B; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 1px; background: #F4F4F4; color: #6B6B6B;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1A1A1A; box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
border-bottom:1px solid #D9D9D9; }
.logo { width:36px; height:36px; border-radius:50%; background:#EA0016; display:flex; align-items:center;
justify-content:center; color:#fff; font-weight:700; font-size:13px; }
.navmid { display:flex; gap:22px; font-size:15px; font-weight:500; color:#1A1A1A; }
.navicons { display:flex; gap:14px; font-size:12px; color:#6B6B6B; }
.hero { display:flex; align-items:center; background:#F4F4F4; padding:24px 36px; gap:30px; min-height:230px; }
.hero-copy { flex:1; }
.hero h1 { font-size:34px; font-weight:700; line-height:1.1; margin:0 0 10px; letter-spacing:-0.4px; }
.hero p { font-size:14px; color:#3C3C3C; margin:0 0 14px; max-width:380px; }
.btn-primary { background:#EA0016; color:#fff; border:none; border-radius:4px; padding:12px 24px; font-size:15px; font-weight:600; }
.hero-visual { flex:0.8; height:170px; border-radius:4px; background:linear-gradient(150deg,#fff,#F4F4F4 60%,#D9D9D9); position:relative; }
.hero-visual::before { content:''; position:absolute; left:30%; top:20%; width:40%; height:60%; background:#fff;
border:2px solid #D9D9D9; border-radius:4px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:18px 36px; }
.card { background:#fff; border:1px solid #EBEBEB; border-radius:4px; padding:12px; }
.card .imgbox { aspect-ratio:4/3; height:70px; background:#F4F4F4; margin-bottom:10px; border-radius:4px; }
.series-badge { background:#F4F4F4; color:#6B6B6B; font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:0.6px; padding:2px 6px; }
.card h3 { font-size:15px; font-weight:600; margin:6px 0 4px; }
.stars { color:#EA0016; font-size:12px; }
.card .price { font-size:17px; font-weight:700; margin-top:4px; }
footer { background:#1A1A1A; color:#fff; padding:14px 36px; display:flex; justify-content:space-between;
align-items:center; font-size:12px; }
footer span:last-child { color:#D9D9D9; }
</style></head>
<body>
<nav>
<div class="logo">B</div>
<div class="navmid"><span>Refrigerators</span><span>Dishwashers</span><span>Ovens</span><span>Wi-Fi Home</span></div>
<div class="navicons"><span>Search</span><span>Wishlist</span><span>Cart</span></div>
</nav>
<section class="hero">
<div class="hero-copy">
<h1>500 Series French Door Refrigerator</h1>
<p>25 cu. ft. capacity, Wi-Fi connectivity, and precision cooling — engineered by Bosch for daily reliability.</p>
<button class="btn-primary">Add to Cart</button>
</div>
<div class="hero-visual"></div>
</section>
<section class="grid">
<div class="card"><div class="imgbox"></div><span class="series-badge">500 Series</span><h3>French Door Refrigerator</h3><div class="stars">★★★★★</div><div class="price">$2,199</div></div>
<div class="card"><div class="imgbox"></div><span class="series-badge">800 Series</span><h3>Ascenta Dishwasher</h3><div class="stars">★★★★☆</div><div class="price">$949</div></div>
<div class="card"><div class="imgbox"></div><span class="series-badge">300 Series</span><h3>Benchmark Wall Oven</h3><div class="stars">★★★★★</div><div class="price">$3,299</div></div>
</section>
<footer>
<span>© Bosch</span>
<span>Wi-Fi Home Connect · 2-Year Limited Warranty</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0f0e0d; color: #f0ece4;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0f0e0d; color: #f0ece4;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.2; margin: 0; color: #f0ece4; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #7a7268; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; background: #c9a84c; color: #0a0a09;
border: none; border-radius: 0px; padding: 12px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; background: transparent; color: #c9a84c;
border: 1px solid #c9a84c; border-radius: 0px;
padding: 11px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #1a1918; color: #f0ece4;
border: 1px solid #474643; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7a7268; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0.15em; background: #292416; color: #c9a84c;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#0f0e0d; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#f0ece4; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #383432;}
.logo{font-size:20px;font-weight:600;color:#c9a84c;letter-spacing:1px;}
.navlinks{display:flex;gap:24px;font-size:14px;color:#c4bdb5;}
.hero{height:280px;position:relative;overflow:hidden;display:flex;align-items:center;padding:0 60px;background:radial-gradient(circle at 75% 50%,#222120,#0f0e0d 70%);}
.herotext{width:420px;z-index:2;}
h1{font-family:Georgia,serif;font-size:44px;font-weight:300;letter-spacing:-1px;line-height:1.05;margin:0 0 16px;}
.sub{font-size:14px;color:#c4bdb5;margin:0 0 22px;max-width:340px;line-height:1.5;}
.cta{display:inline-block;background:#c9a84c;color:#0a0a09;font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:14px 30px;}
.guitar{position:absolute;right:70px;top:40px;width:180px;height:200px;}
.gbody{position:absolute;right:10px;top:40px;width:150px;height:150px;border-radius:50% 50% 50% 20%;background:radial-gradient(circle at 35% 35%,#e8907e 0%,#1a1918 65%);}
.gneck{position:absolute;right:130px;top:80px;width:90px;height:16px;background:linear-gradient(90deg,#383432,#111);}
.swatchrow{display:flex;gap:8px;padding:14px 60px 0;}
.swatch{width:20px;height:20px;border-radius:9999px;}
.sec{padding:20px 60px 0;}
.sectitle{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#7a7268;margin-bottom:12px;}
.grid{display:flex;gap:16px;}
.card{width:190px;background:#222120;border-radius:0;padding:14px;position:relative;border:1px solid #383432;}
.badge{position:absolute;top:10px;left:10px;background:#313131;color:#c9a84c;font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 8px;letter-spacing:1px;}
.thumb{height:92px;background:#1a1918;margin-bottom:12px;display:flex;align-items:center;justify-content:center;}
.tshape{width:44px;height:64px;border-radius:50% 50% 50% 20%;}
.pname{font-size:14px;font-weight:600;margin:0 0 6px;}
.pprice{font-family:Georgia,serif;font-size:18px;font-weight:400;}
</style>
<div class="nav">
<div class="logo">Prs Guitars</div>
<div class="navlinks"><span>Electric</span><span>Acoustic</span><span>Bass</span><span>Private Stock</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Materialized from<br>figured maple.</h1>
<p class="sub">Precision necks and candy finishes engineered for players who chase the impossible riff.</p>
<div class="cta">Find a Dealer</div>
</div>
<div class="guitar"><div class="gneck"></div><div class="gbody"></div></div>
</div>
<div class="swatchrow">
<div class="swatch" style="background:#724c8c"></div><div class="swatch" style="background:#00a7cb"></div><div class="swatch" style="background:#0066aa"></div><div class="swatch" style="background:#eb5505"></div>
</div>
<div class="sec">
<div class="sectitle">Featured Finishes</div>
<div class="grid">
<div class="card"><span class="badge">USA</span><div class="thumb"><div class="tshape" style="background:radial-gradient(circle at 35% 35%,#00a7cb,#1a1918 70%)"></div></div><div class="pname">Custom 24</div><div class="pprice">$3,499</div></div>
<div class="card"><span class="badge" style="color:#f0ece4">SE</span><div class="thumb"><div class="tshape" style="background:radial-gradient(circle at 35% 35%,#724c8c,#1a1918 70%)"></div></div><div class="pname">SE Standard 24</div><div class="pprice">$849</div></div>
<div class="card"><span class="badge">Private Stock</span><div class="thumb"><div class="tshape" style="background:radial-gradient(circle at 35% 35%,#eb5505,#1a1918 70%)"></div></div><div class="pname">McCarty 594</div><div class="pprice">$9,900</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffff00; color: #1a1a1a;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: transparent; color: #02537e;
border: 1px solid #02537e; border-radius: 4px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #c6c6c6; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 1.2px; background: #02537e; color: #ffffff;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff; font-family:Roboto,Arial,sans-serif; color:#333333; }
*{box-sizing:border-box;}
.nav{height:64px;background:#02537e;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-family:Montserrat,Arial,sans-serif;font-size:22px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:24px;font-family:Montserrat,Arial,sans-serif;font-size:14px;font-weight:500;color:#fff;}
.navlinks .on{color:#ffff00;}
.hero{height:200px;background:linear-gradient(rgba(2,83,126,0.75),rgba(2,83,126,0.9)),radial-gradient(circle at 80% 60%,#ffff00,#02537e 60%);display:flex;align-items:center;padding:0 40px;}
.h1{font-family:Montserrat,Arial,sans-serif;font-size:30px;font-weight:700;color:#fff;margin:0 0 10px;max-width:440px;}
.hsub{font-size:14px;color:#dbe9f2;max-width:380px;margin:0 0 16px;}
.hbtn{display:inline-block;background:#ffff00;color:#1a1a1a;font-family:Montserrat,Arial,sans-serif;font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;padding:14px 30px;border-radius:4px;}
.section{padding:18px 32px 0;}
.sectitle{font-family:Montserrat,Arial,sans-serif;font-size:16px;font-weight:700;color:#1a1a1a;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#fff;border:1px solid #d9d9d9;border-radius:8px;padding:12px;}
.thumb{height:80px;background:#f5f7f9;border-radius:4px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;}
.flame{width:26px;height:40px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;}
.category{display:inline-block;background:#02537e;color:#fff;font-family:Montserrat,Arial,sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:4px 10px;border-radius:9999px;margin-bottom:6px;}
.ptitle{font-family:Montserrat,Arial,sans-serif;font-size:14px;font-weight:600;color:#1a1a1a;}
.pprice{font-family:Montserrat,Arial,sans-serif;font-size:18px;font-weight:700;color:#02537e;margin-top:6px;}
.btu{font-size:11px;color:#666;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Radtec</div>
<div class="navlinks"><div class="on">Fire Pits</div><div>Tower Heaters</div><div>Infrared</div><div>Accessories</div></div>
</div>
<div class="hero">
<div><div class="h1">Extend the Season Outdoors</div><div class="hsub">Patio heaters and fire pits engineered for real BTU output, not lifestyle staging.</div><div class="hbtn">Shop Now</div></div>
</div>
<div class="section">
<div class="sectitle">Popular Now</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="flame" style="background:linear-gradient(180deg,#ffff00,#02537e);"></div></div><div class="category">Fire Pit</div><div class="ptitle">Cascade Gas Fire Table</div><div class="btu">50,000 BTU</div><div class="pprice">$899.00</div></div>
<div class="card"><div class="thumb"><div class="flame" style="background:linear-gradient(180deg,#ffff00,#02537e);"></div></div><div class="category">Tower Heater</div><div class="ptitle">Summit Tower Heater</div><div class="btu">40,000 BTU</div><div class="pprice">$399.00</div></div>
<div class="card"><div class="thumb"><div class="flame" style="background:linear-gradient(180deg,#fff566,#013f60);"></div></div><div class="category">Infrared</div><div class="ptitle">Radiant Wall Heater</div><div class="btu">1500W</div><div class="pprice">$249.00</div></div>
<div class="card"><div class="thumb"><div class="flame" style="background:linear-gradient(180deg,#ffff00,#333);"></div></div><div class="category">Fire Pit</div><div class="ptitle">Portable Steel Fire Bowl</div><div class="btu">Wood-Burning</div><div class="pprice">$149.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:Pretendard, "Apple SD Gothic Neo", sans-serif; }
* { box-sizing:border-box; }
.wrap { position:relative; height:100%; display:flex; flex-direction:column; }
.gnb { height:56px; background:#000000; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { color:#fff; font-size:16px; font-weight:700; letter-spacing:-0.3px; }
.gnb-links { display:flex; gap:0; }
.gnb-links span { color:rgba(255,255,255,0.8); font-size:16px; font-weight:500; padding:0 8px; height:56px;
display:flex; align-items:center; }
.gnb-links span.on { color:#fff; border-bottom:2px solid #fff; }
.search { width:220px; height:36px; border-radius:4px; background:#ffffff; color:#8a8a8a; font-size:14px;
display:flex; align-items:center; padding:0 12px; }
.banner { padding:16px 40px; display:flex; align-items:center; justify-content:space-between; }
.banner h1 { font-size:20px; font-weight:700; margin:0; }
.banner span { font-size:13px; color:#666666; }
.grid { flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid #ebebeb;
border-left:1px solid #ebebeb; margin:0 40px; }
.cell { border-right:1px solid #ebebeb; border-bottom:1px solid #ebebeb; padding:0; display:flex; flex-direction:column; }
.photo { aspect-ratio:1; position:relative; overflow:hidden;
background:linear-gradient(160deg,#f2f2f2,#e2e2e2); }
.photo .g { position:absolute; border-radius:4px; }
.g1 .photo .g { width:56%; height:70%; left:22%; top:12%; background:#dcdcdc; }
.g2 .photo .g { width:36%; height:60%; left:32%; top:20%; background:#d4d4d4; border-radius:50%; }
.g3 .photo .g { width:66%; height:34%; left:17%; bottom:18%; background:#dedede; }
.g4 .photo .g { width:40%; height:64%; left:30%; top:16%; background:#d9d9d9; }
.info { padding:8px 10px 10px; display:flex; flex-direction:column; gap:3px; }
.info .brand-n { font-size:12px; font-weight:600; }
.info .name { font-size:13px; color:#333; }
.info .price { font-size:14px; font-weight:700; }
.util { position:absolute; right:6px; bottom:6px; width:28px; height:28px; background:rgba(255,255,255,0.9);
border-radius:0; display:flex; align-items:center; justify-content:center; font-size:13px; color:#000; }
footer { height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-top:1px solid #ebebeb; font-size:11px; color:#666666; }
</style></head>
<body>
<div class="wrap">
<div class="gnb">
<div class="brand">Musinsa</div>
<div class="gnb-links"><span class="on">STORE</span><span>SNAP</span><span>MAGAZINE</span><span>RANK</span><span>BRAND</span></div>
<div class="search">Search brand, style, item</div>
</div>
<div class="banner"><h1>MUSINSA STANDARD</h1><span>New arrivals this week</span></div>
<div class="grid">
<div class="cell g1"><div class="photo"><div class="g"></div><div class="util">♡</div></div>
<div class="info"><span class="brand-n">MUSINSA STANDARD</span><span class="name">Oversized Cotton Tee</span><span class="price">₩29,000</span></div></div>
<div class="cell g2"><div class="photo"><div class="g"></div><div class="util">♡</div></div>
<div class="info"><span class="brand-n">MUSINSA STANDARD</span><span class="name">Wide Denim Pants</span><span class="price">₩59,000</span></div></div>
<div class="cell g3"><div class="photo"><div class="g"></div><div class="util">♡</div></div>
<div class="info"><span class="brand-n">MUSINSA STANDARD</span><span class="name">Light Padded Jacket</span><span class="price">₩89,000</span></div></div>
<div class="cell g4"><div class="photo"><div class="g"></div><div class="util">♡</div></div>
<div class="info"><span class="brand-n">MUSINSA STANDARD</span><span class="name">Crew Neck Knit</span><span class="price">₩39,000</span></div></div>
</div>
<footer>
<span>© Musinsa</span>
<span>Musinsa · Store · Snap · Magazine · Rank</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e8ff63; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #e8ff63;
border: 1px solid #e8ff63; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #252910; color: #e8ff63;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; background:#000000; color:#FFFFFF; box-sizing:border-box; font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
.stage { width:960px; height:640px; display:flex; flex-direction:column; align-items:center; padding:16px 0; }
.topbar { width:400px; display:flex; justify-content:space-between; align-items:center; }
.circbtn { width:34px; height:34px; border-radius:50%; background:#1C1C1E; display:flex; align-items:center; justify-content:center; font-size:15px; }
.screentitle { font-size:22px; font-weight:700; }
.card { width:400px; height:420px; border-radius:28px; margin-top:14px; position:relative; overflow:hidden; background:linear-gradient(150deg,#3a2a4a,#5a2a4a 50%,#2a1a3a); }
.grad { position:absolute; bottom:0; left:0; right:0; height:60%; background:linear-gradient(180deg,transparent,rgba(0,0,0,0.72) 60%,rgba(0,0,0,0.92)); }
.verified { position:absolute; top:20px; right:20px; background:rgba(0,0,0,0.5); backdrop-filter:blur(8px); border-radius:999px; padding:6px 10px; font-size:11px; font-weight:600; display:flex; align-items:center; gap:5px; }
.verified .ck { color:#E8FF63; font-weight:800; }
.cardbody { position:absolute; bottom:22px; left:22px; right:22px; }
.pname { font-size:26px; font-weight:700; letter-spacing:-0.4pt; }
.psub { font-size:14px; color:rgba(255,255,255,0.78); margin-top:4px; }
.chips { display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
.chip { padding:9px 15px; border-radius:999px; font-size:12px; font-weight:600; }
.chip.sel { background:#E8FF63; color:#000; }
.chip.unsel { background:#1C1C1E; border:1px solid #2A2A2A; color:#fff; }
.chip.emo { background:rgba(255,92,138,0.16); border:1px solid rgba(255,92,138,0.4); color:#FF5C8A; }
.actionrow { display:flex; align-items:center; gap:22px; margin-top:20px; }
.acbtn { border-radius:50%; display:flex; align-items:center; justify-content:center; }
.pass { width:52px; height:52px; background:#1C1C1E; border:1px solid #2A2A2A; color:#A8A8A8; font-size:22px; }
.like { width:64px; height:64px; background:#E8FF63; color:#000; font-size:28px; box-shadow:0 12px 30px -8px rgba(232,255,99,0.5); }
.wink { width:52px; height:52px; background:#1C1C1E; border:1px solid #2A2A2A; color:#C9B8FF; font-size:22px; }
</style>
</head>
<body>
<div class="stage">
<div style="font-size:11px;font-weight:700;letter-spacing:3pt;text-transform:uppercase;color:#E8FF63;margin-bottom:10px">Feeld (iOS)</div>
<div class="topbar"><div class="circbtn">☰</div><div class="screentitle">Discover</div><div class="circbtn">⚙</div></div>
<div class="card">
<div class="grad"></div>
<div class="verified"><span class="ck">✓</span> Verified</div>
<div class="cardbody">
<div class="pname">Robin & Sky</div>
<div class="psub">Couple · 31 & 29 · 2 km away</div>
<div class="chips">
<span class="chip sel">Non-monogamy</span>
<span class="chip unsel">Kink</span>
<span class="chip emo">Exploring</span>
<span class="chip unsel">ENM</span>
</div>
</div>
</div>
<div class="actionrow">
<div class="acbtn pass">✕</div>
<div class="acbtn like">♥</div>
<div class="acbtn wink">★</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #5e6977; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #008063; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #008063;
border: 1px solid #008063; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #222222;
border: 1px solid #c8c8c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5e6977; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; background: #008063; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f4f4f4; font-family:'Open Sans', Arial, 'Helvetica Neue', sans-serif; color:#43484d; }
*{box-sizing:border-box;}
.topstripe{height:32px;background:#008063;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#fff;}
.nav{height:60px;background:#ffffff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:19px;font-weight:700;color:#43484d;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:700;color:#43484d;}
.hero{height:220px;display:flex;align-items:center;padding:0 40px;background:#dae5e2;}
.heroText{width:460px;}
.headline{font-size:28px;font-weight:700;line-height:1.3;color:#233029;margin:0 0 10px;}
.sub{font-size:14px;line-height:1.5;color:#5e6977;margin:0 0 16px;max-width:390px;}
.btn{display:inline-block;background:#008063;color:#fff;font-size:14px;font-weight:700;padding:12px 24px;border-radius:4px;}
.coin{position:absolute;right:110px;top:55px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f2d98a,#8a6d3b 80%);box-shadow:0 8px 20px rgba(0,0,0,.15);border:4px solid #ffe9a8;}
.coin2{position:absolute;right:60px;top:90px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#cfd8dc,#607d8b 80%);border:3px solid #e0e0e0;}
.sec{position:relative;height:328px;padding:24px 40px;}
.secTitle{font-size:17px;font-weight:700;color:#233029;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:216px;background:#fff;border:1px solid #e0e0e0;border-radius:4px;padding:12px;position:relative;}
.gradebadge{position:absolute;top:8px;left:8px;background:#008063;color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;}
.errorbadge{background:#d32f2f;}
.thumb{height:100px;border-radius:4px;margin-bottom:10px;}
.cardTitle{font-size:13px;font-weight:700;color:#43484d;margin-bottom:4px;}
.cardSpec{font-size:11px;color:#5e6977;margin-bottom:6px;}
.cardPrice{font-size:14px;font-weight:700;color:#008063;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#ffffff;border-top:1px solid #e0e0e0;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:11px;color:#5e6977;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="topstripe"><span>Free Shipping on Orders Over $50</span><span>My Account</span></div>
<div class="nav">
<div class="logo">Littleton Coin Company</div>
<div class="navlinks"><span>U.S. Coins</span><span>World Coins</span><span>Currency</span><span>New Releases</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">Trusted grading.<br>Honest pricing.</div>
<div class="sub">Four decades of collector service, backed by a satisfaction guarantee on every coin we ship.</div>
<div class="btn">Shop New Releases</div>
</div>
<div class="coin2"></div>
<div class="coin"></div>
</div>
<div class="sec">
<div class="secTitle">Featured Releases</div>
<div class="grid">
<div class="card"><div class="gradebadge">MS-65</div><div class="thumb" style="background:radial-gradient(circle at 35% 30%,#f2d98a,#8a6d3b 80%)"></div><div class="cardTitle">1921 Morgan Silver Dollar</div><div class="cardSpec">90% Silver · BU</div><div class="cardPrice">$54.95</div></div>
<div class="card"><div class="gradebadge">PF-70</div><div class="thumb" style="background:radial-gradient(circle at 35% 30%,#cfd8dc,#607d8b 80%)"></div><div class="cardTitle">American Eagle Proof Set</div><div class="cardSpec">1 oz Fine Silver</div><div class="cardPrice">$89.95</div></div>
<div class="card"><div class="errorbadge gradebadge">Sale</div><div class="thumb" style="background:radial-gradient(circle at 35% 30%,#ffe9a8,#8a6d3b 80%)"></div><div class="cardTitle">1943 Steel Wartime Cent</div><div class="cardSpec">Circulated · Set of 3</div><div class="cardPrice">$12.95</div></div>
<div class="card"><div class="gradebadge">MS-63</div><div class="thumb" style="background:radial-gradient(circle at 35% 30%,#f2d98a,#607d8b 80%)"></div><div class="cardTitle">Buffalo Nickel Collection</div><div class="cardSpec">Set of 10 · Dated</div><div class="cardPrice">$39.95</div></div>
</div>
</div>
<div class="footer"><span>© Serving Collectors Since 1945</span><span>Grading Guide</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2d2926;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2d2926;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #2d2926; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #224433; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #224466; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #224466;
border: 1px solid #224466; border-radius: 8px;
padding: 12px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #223333;
border: 1px solid #cacac9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #224433; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #119977; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<title>Elfa</title>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; color:#2d2926; font-family:'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #f0f0f0; }
.logo { font-weight:500; font-size:20px; color:#224466; letter-spacing:.5px; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:600; text-transform:uppercase; }
.navlinks span.on { color:#224466; border-bottom:2px solid #224466; padding-bottom:24px; }
.navlinks span.off { color:#224433; opacity:.55; }
.btn { background:#224466; color:#fff; border-radius:8px; padding:12px 22px; font-size:14px; font-weight:600; }
.hero { height:210px; background:#2d2926; color:#fff; display:flex; align-items:center; padding:0 32px; gap:30px; }
.hero-copy { flex:1; }
.hero-copy h1 { font-size:28px; font-weight:500; margin:0 0 12px; line-height:1.25; }
.hero-copy p { font-size:14px; color:#cfcfcf; max-width:340px; margin:0 0 16px; }
.btn-inv { display:inline-block; background:#119977; color:#fff; border-radius:8px; padding:12px 24px; font-size:13px; font-weight:600; }
.hero-art { flex:1; height:160px; display:flex; gap:10px; align-items:flex-end; }
.shelf { flex:1; height:100%; background:linear-gradient(180deg,#3a4a5a,#224466); border-radius:8px; position:relative; }
.shelf::before, .shelf::after { content:''; position:absolute; left:8px; right:8px; height:2px; background:rgba(255,255,255,.25); }
.shelf::before { top:30%; } .shelf::after { top:65%; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:20px 32px; }
.card { background:#fff; border:1px solid #eeeeee; border-radius:12px; padding:0; overflow:hidden; }
.thumb { height:96px; border-radius:12px 12px 0 0; }
.th1 { background:linear-gradient(160deg,#dfe8ee,#224466); }
.th2 { background:linear-gradient(160deg,#d8efe8,#119977); }
.th3 { background:linear-gradient(160deg,#e2e2f5,#222299); }
.cbody { padding:14px; }
.badge { display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
color:#fff; border-radius:4px; padding:2px 8px; margin-bottom:8px; }
.bnew { background:#222299; } .bsale { background:#119977; }
.name { font-size:14px; font-weight:600; margin:0 0 4px; }
.price { font-size:16px; font-weight:700; color:#224466; }
</style></head>
<body>
<nav>
<div class="logo">Elfa</div>
<div class="navlinks"><span class="on">Closet</span><span class="off">Shelving</span><span class="off">Garage</span><span class="off">Pantry</span></div>
<div class="btn">Design Your Space</div>
</nav>
<div class="hero">
<div class="hero-copy">
<h1>A rightful place for everything.</h1>
<p>Modular shelving and closet systems built to last — Scandinavian design meets everyday order.</p>
<div class="btn-inv">Book a Free Consult</div>
</div>
<div class="hero-art"><div class="shelf"></div><div class="shelf"></div><div class="shelf"></div></div>
</div>
<div class="grid">
<div class="card"><div class="thumb th1"></div><div class="cbody"><span class="badge bnew">New</span><p class="name">Classic Shelf Unit</p><p class="price">$189.00</p></div></div>
<div class="card"><div class="thumb th2"></div><div class="cbody"><span class="badge bsale">Sale</span><p class="name">Sustainable Oak Drawer</p><p class="price">$249.00</p></div></div>
<div class="card"><div class="thumb th3"></div><div class="cbody"><p class="name">Modular Closet Kit</p><p class="price">$399.00</p></div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #313131; color: #ffffff;
border: none; border-radius: 2px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.3px; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 2px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #8b1a1a; color: #ffffff;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial, Helvetica, sans-serif; color:#4a4a4a; }
*{box-sizing:border-box;}
.nav{position:absolute; top:0; left:0; width:960px; height:48px; background:#313131; display:flex; align-items:center; justify-content:space-between; padding:0 30px;}
.logo{font-size:17px; font-weight:700; color:#fff;}
.navlinks{display:flex; gap:20px; font-size:13px; font-weight:700; color:#fff;}
.subnav{position:absolute; top:48px; left:0; width:960px; height:36px; background:#f6f6f6; border-bottom:1px solid #d6d6d6; display:flex; align-items:center; gap:20px; padding:0 30px; font-size:12px; font-weight:700; color:#313131;}
.hero{position:absolute; top:84px; left:0; width:960px; height:180px; background:#313131; display:flex; flex-direction:column; justify-content:center; padding:0 40px; color:#fff;}
.headline{font-size:30px; font-weight:700; margin-bottom:8px;}
.sub{font-size:14px; color:#dedede; width:520px;}
.searchRow{position:absolute; top:264px; left:0; width:960px; height:60px; padding:12px 40px; display:flex; gap:0;}
.searchInput{width:600px; height:38px; border:1px solid #d6d6d6; border-radius:2px 0 0 2px; display:flex; align-items:center; padding:0 12px; font-size:13px; color:#767676;}
.searchBtn{width:80px; height:38px; background:#8b1a1a; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; border-radius:0 2px 2px 0;}
.sec{position:absolute; top:334px; left:0; width:960px; height:306px; padding:20px 40px;}
.secTitle{font-size:20px; font-weight:700; margin-bottom:14px; color:#313131; border-left:3px solid #313131; padding-left:10px;}
.grid{display:flex; gap:16px;}
.card{width:216px; border:1px solid #d6d6d6; padding:10px; position:relative;}
.cardImg{width:100%; height:90px; background:#f6f6f6; display:flex; align-items:center; justify-content:center; position:relative;}
.stamp{width:60px; height:70px; background:repeating-linear-gradient(90deg,#8b1a1a,#8b1a1a 8px,#c0392b 8px,#c0392b 16px); border:3px dashed #fff; box-shadow:0 0 0 1px #8b1a1a;}
.catId{font-family:'Courier New',monospace; font-size:12px; color:#4a4a4a; margin-top:8px; letter-spacing:0.5px;}
.cardTitle{font-size:13px; margin-top:4px; color:#313131;}
.cardPrice{font-size:18px; font-weight:700; margin-top:6px;}
.badge{position:absolute; top:6px; left:6px; background:#8b1a1a; color:#fff; font-size:10px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; padding:2px 6px;}
</style>
<div class="nav">
<div class="logo">Kenmore Stamp Company</div>
<div class="navlinks"><span>Country Sets</span><span>Approval Service</span><span>Mint Sheets</span><span>Auctions</span></div>
</div>
<div class="subnav"><span>United States</span><span>British Commonwealth</span><span>Worldwide</span><span>Topical</span></div>
<div class="hero">
<div class="headline">Serious Philately. Serious Value.</div>
<div class="sub">Scott-cataloged lots, graded and centered, shipped from our approval service since 1962.</div>
</div>
<div class="searchRow">
<div class="searchInput">Search by Scott number, country, or topic...</div>
<div class="searchBtn">SEARCH</div>
</div>
<div class="sec">
<div class="secTitle">Featured Lots</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="cardImg"><div class="stamp"></div></div><div class="catId">SCOTT #C13</div><div class="cardTitle">Graf Zeppelin 65c</div><div class="cardPrice">$425.00</div></div>
<div class="card"><div class="cardImg"><div class="stamp" style="background:repeating-linear-gradient(90deg,#2c5f2e,#2c5f2e 8px,#3a7d3d 8px,#3a7d3d 16px)"></div></div><div class="catId">SCOTT #573</div><div class="cardTitle">1922 Regular Issue</div><div class="cardPrice">$18.50</div></div>
<div class="card"><div class="cardImg"><div class="stamp" style="background:repeating-linear-gradient(90deg,#313131,#313131 8px,#555 8px,#555 16px)"></div></div><div class="catId">SCOTT #245</div><div class="cardTitle">Columbian Exposition Set</div><div class="cardPrice">$310.00</div></div>
<div class="card"><div class="cardImg"><div class="stamp" style="background:repeating-linear-gradient(90deg,#8b1a1a,#8b1a1a 8px,#c0392b 8px,#c0392b 16px)"></div></div><div class="catId">SCOTT #1041</div><div class="cardTitle">Liberty Series Mint</div><div class="cardPrice">$6.75</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f5f6f8; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #000000;
border: 1px solid #f5f6f8; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fdfefe; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1D1D1F; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; width:960px; height:640px; }
.sidebar { width:250px; background:#FFFFFF; border-right:1px solid #ECECEC; padding:24px 14px; }
.sb-item { display:flex; align-items:center; gap:10px; height:40px; padding:0 10px; border-radius:8px; font-size:16px; color:#1D1D1F; }
.sb-item.active { background:rgba(79,151,255,0.10); font-weight:600; color:#4F97FF; }
.sb-item .cnt { margin-left:auto; font-size:15px; color:#8A8A8E; }
.sb-item.active .cnt { color:#4F97FF; }
.dot { width:18px; text-align:center; }
.main { flex:1; position:relative; padding:24px 40px; }
.listtitle { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.listtitle h1 { font-size:28px; font-weight:700; margin:0; letter-spacing:0.3px; }
.star { color:#FFD60A; font-size:22px; }
.heading { font-size:17px; font-weight:700; margin:24px 0 6px; padding-top:2px; }
.hr { height:1px; background:#ECECEC; margin-bottom:8px; }
.todo { display:flex; align-items:center; gap:12px; height:44px; }
.cb { width:22px; height:22px; border-radius:50%; border:1.5px solid #C7C7CC; flex-shrink:0; }
.cb.p3 { border-color:#246FE0; background:rgba(36,111,224,0.08); }
.cb.done { background:#4F97FF; border-color:#4F97FF; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; }
.title { font-size:17px; }
.title.done { color:#C7C7CC; text-decoration:line-through; }
.tag { margin-left:auto; font-size:13px; color:#8A8A8E; background:#F5F6F8; border-radius:999px; padding:3px 10px; }
.fab { position:absolute; right:32px; bottom:32px; width:56px; height:56px; border-radius:50%; background:#4F97FF;
color:#fff; font-size:26px; display:flex; align-items:center; justify-content:center; box-shadow:rgba(79,151,255,0.35) 0 8px 20px; }
</style></head>
<body>
<div class="app">
<div class="sidebar">
<div class="sb-item"><span class="dot">📥</span>Inbox<span class="cnt">3</span></div>
<div class="sb-item active"><span class="dot">★</span>Today<span class="cnt">5</span></div>
<div class="sb-item"><span class="dot">📅</span>Upcoming<span class="cnt">12</span></div>
<div class="sb-item"><span class="dot">◻</span>Anytime</div>
<div class="sb-item"><span class="dot">📦</span>Someday</div>
</div>
<div class="main">
<div class="listtitle"><h1>Today</h1><span class="star">★</span></div>
<div class="heading">This Morning</div>
<div class="hr"></div>
<div class="todo"><div class="cb done">✓</div><div class="title done">Reply to Things 3 (iOS) feedback</div></div>
<div class="todo"><div class="cb p3"></div><div class="title">Draft Q3 roadmap outline</div><div class="tag"># Work</div></div>
<div class="heading">This Evening</div>
<div class="hr"></div>
<div class="todo"><div class="cb"></div><div class="title">Pack for the weekend trip</div></div>
<div class="todo"><div class="cb"></div><div class="title">Call mom</div><div class="tag"># Personal</div></div>
<div class="todo"><div class="cb"></div><div class="title">Read one chapter</div></div>
<div class="fab">+</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #262626;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #262626;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #262626; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #8a9297; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ff6128; color: #ffffff;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #ff6128;
border: 1px solid #ff6128; border-radius: 4px;
padding: 10px 22px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #262626;
border: 1px solid #c9c9c9; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a9297; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #108474; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Enviro Safety Products — Home</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#f9fafb; color:#4a4a4a;
font-family:'Barlow',sans-serif;
}
*{box-sizing:border-box;}
.page{width:960px;height:640px;display:flex;flex-direction:column;}
.topbar{height:26px;background:#121f36;display:flex;align-items:center;justify-content:center;gap:6px;}
.topbar span{font-size:10px;color:#e6f7f4;font-weight:600;letter-spacing:0.4px;}
header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#ffffff;border-bottom:2px solid #ff6128;}
.logo{font-size:20px;font-weight:700;color:#262626;letter-spacing:-0.3px;}
.logo span{color:#ff6128;}
nav{display:flex;gap:20px;}
nav a{font-size:12px;font-weight:600;color:#262626;}
.nav-cta{background:#ff6128;color:#fff;padding:8px 16px;border-radius:4px;font-size:12px;font-weight:700;}
.hero{display:flex;background:#121f36;padding:26px 28px;gap:24px;}
.hero-copy{flex:1;}
.hero-copy .kicker{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#6dcff6;margin-bottom:6px;}
.hero-copy h1{font-size:30px;font-weight:700;color:#fff;margin:0 0 10px;line-height:1.15;}
.hero-copy p{font-family:'Poppins',sans-serif;font-size:12px;color:#c7ccd6;max-width:340px;margin:0 0 16px;line-height:1.6;}
.hero-cta{display:inline-block;background:#ff6128;color:#fff;padding:10px 20px;border-radius:6px;font-size:12px;font-weight:700;}
.hero-visual{width:280px;display:flex;gap:8px;align-items:flex-end;}
.helmet{width:70px;height:80px;border-radius:35px 35px 8px 8px;background:linear-gradient(160deg,#ff8850,#ff6128);}
.vest{width:70px;height:100px;border-radius:6px;background:linear-gradient(160deg,#2b3a55,#121f36);border:2px solid #ff6128;position:relative;}
.vest::after{content:'';position:absolute;left:8px;right:8px;top:20px;height:4px;background:#ffcc00;}
.vest::before{content:'';position:absolute;left:8px;right:8px;top:34px;height:4px;background:#ffcc00;}
.gloves{width:70px;height:66px;border-radius:8px;background:linear-gradient(160deg,#108474,#0c6a5d);}
main{flex:1;padding:16px 28px 0;}
.trust-row{display:flex;gap:12px;margin-bottom:16px;}
.trust-card{flex:1;background:#e6f7f4;border-radius:8px;padding:10px 12px;}
.trust-card b{display:block;font-size:12px;color:#108474;font-family:'Poppins',sans-serif;font-weight:600;}
.trust-card span{font-size:10px;color:#4a4a4a;}
.row-head{display:flex;justify-content:space-between;margin-bottom:10px;}
.row-head h2{font-size:16px;margin:0;color:#262626;}
.row-head span{font-size:11px;color:#108474;font-weight:700;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.card{background:#f9fafb;border:1px solid #e0e0e0;border-radius:8px;padding:10px;position:relative;}
.thumb{height:64px;border-radius:4px;background:linear-gradient(150deg,#edf5f5,#e6f7f4);margin-bottom:8px;}
.badge{position:absolute;top:6px;left:6px;font-size:8px;font-weight:700;padding:3px 6px;border-radius:4px;text-transform:uppercase;}
.b-instock{background:#00aa00;color:#fff;}
.b-oos{background:#ea0202;color:#fff;}
.card h4{font-size:11px;margin:0 0 4px;color:#262626;font-weight:600;}
.card .price{font-size:13px;font-weight:700;color:#262626;}
.card .sku{font-size:8.5px;color:#8a9297;}
footer{background:#ffffff;border-top:1px solid #e0e0e0;padding:12px 28px;display:flex;justify-content:space-between;margin-top:14px;}
footer span{font-size:10px;color:#8a9297;}
</style>
<div class="page">
<div class="topbar"><span>OSHA-Compliant PPE · Bulk Pricing Available · Ships Same Day</span></div>
<header>
<div class="logo">Enviro Safety Products<span>.</span></div>
<nav><a>Head Protection</a><a>High-Vis</a><a>Gloves</a><a>Respiratory</a><a>Bulk Orders</a></nav>
<div class="nav-cta">Get a Quote</div>
</header>
<div class="hero">
<div class="hero-copy">
<div class="kicker">Trusted by Safety Managers Since 1997</div>
<h1>Compliance gear, shipped when your crew needs it.</h1>
<p>Certified PPE, high-visibility apparel, and respiratory protection with volume pricing for procurement teams.</p>
<div class="hero-cta">Shop Safety Gear</div>
</div>
<div class="hero-visual"><div class="helmet"></div><div class="vest"></div><div class="gloves"></div></div>
</div>
<main>
<div class="trust-row">
<div class="trust-card"><b>ANSI / ISEA Certified</b><span>Every SKU verified to spec</span></div>
<div class="trust-card"><b>Bulk Pricing Tiers</b><span>Save more at 25 / 100 / 500 units</span></div>
<div class="trust-card"><b>Same-Day Dispatch</b><span>Orders before 3PM EST</span></div>
</div>
<div class="row-head"><h2>Best-Selling PPE</h2><span>View Catalog →</span></div>
<div class="grid">
<div class="card"><div class="badge b-instock">In Stock</div><div class="thumb"></div><h4>Class 3 Hi-Vis Jacket</h4><div class="sku">SKU EP-3310</div><div class="price">$38.50</div></div>
<div class="card"><div class="badge b-instock">In Stock</div><div class="thumb"></div><h4>Type II Hard Hat, Vented</h4><div class="sku">SKU EP-1104</div><div class="price">$14.99</div></div>
<div class="card"><div class="badge b-oos">Backorder</div><div class="thumb"></div><h4>N95 Respirator, Box/20</h4><div class="sku">SKU EP-9042</div><div class="price">$22.00</div></div>
<div class="card"><div class="badge b-instock">In Stock</div><div class="thumb"></div><h4>Cut-Resistant Gloves A4</h4><div class="sku">SKU EP-5521</div><div class="price">$9.75</div></div>
</div>
</main>
<footer>
<span>© Enviro Safety Products — Industrial & Safety Supply</span>
<span>Procurement Accounts · Net-30 Terms · Bulk RFQ</span>
</footer>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #2d2d2d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #2d2d2d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; color: #2d2d2d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #68696d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: #c9a861; color: #2d2d2d;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: 0.25px; background: transparent; color: #2d2d2d;
border: 1px solid #c9a861; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #2d2d2d;
border: 1px solid #cacaca; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #68696d; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.5px; background: #f7f3e9; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Public Sans', system-ui, sans-serif; color:#424242; }
*{box-sizing:border-box;}
.utility{position:absolute; top:0; left:0; width:960px; height:36px; background:#2d2d2d; color:#fff; font-size:11px; display:flex; align-items:center; justify-content:flex-end; gap:20px; padding:0 40px;}
.nav{position:absolute; top:36px; left:0; width:960px; height:64px; background:#fff; border-bottom:1px solid #d8d8d8; display:flex; align-items:center; justify-content:space-between; padding:0 40px;}
.logo{font-size:20px; font-weight:700; color:#2d2d2d;}
.navlinks{display:flex; gap:24px; font-size:14px; font-weight:500; color:#2d2d2d;}
.navlinks span:nth-child(1){border-bottom:2px solid #c9a861; padding-bottom:20px;}
.hero{position:absolute; top:100px; left:0; width:960px; height:270px; background:#2d2d2d; display:flex; align-items:center; padding:0 50px; color:#fff;}
.heroText{width:460px;}
.headline{font-size:44px; font-weight:700; line-height:1.1; letter-spacing:-0.5px; margin-bottom:14px;}
.sub{font-size:15px; color:#cfcfcf; margin-bottom:20px; width:400px;}
.btn{display:inline-block; background:#c9a861; color:#2d2d2d; font-size:15px; font-weight:600; letter-spacing:0.25px; padding:12px 24px; border-radius:4px;}
.lampGraphic{position:absolute; right:80px; top:40px; width:220px; height:190px;}
.lampShade{position:absolute; width:120px; height:70px; border-radius:0 0 60px 60px; background:linear-gradient(180deg,#c9a861,#96aeb7); top:20px; left:50px;}
.lampPole{position:absolute; width:6px; height:100px; background:#c9a861; top:88px; left:107px;}
.sec{position:absolute; top:370px; left:0; width:960px; height:270px; padding:26px 40px;}
.secTitle{font-size:20px; font-weight:600; margin-bottom:16px; color:#2d2d2d;}
.grid{display:flex; gap:16px;}
.card{width:216px; background:#fff; border:1px solid #e5e5e5; border-radius:4px; padding:14px; position:relative;}
.cardImg{width:100%; height:90px; background:#f6f6f6; display:flex; align-items:center; justify-content:center;}
.fixture{width:60px; height:70px; position:relative;}
.fshade{width:50px; height:30px; border-radius:0 0 25px 25px; background:#c9a861; position:absolute; top:0; left:5px;}
.fpole{width:4px; height:40px; background:#96aeb7; position:absolute; top:30px; left:28px;}
.cardTitle{font-size:16px; font-weight:600; margin-top:12px; color:#2d2d2d;}
.cardPrice{font-size:22px; font-weight:700; margin-top:6px;}
.badge{position:absolute; top:8px; left:8px; background:#c9a861; color:#2d2d2d; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:3px 8px; border-radius:4px;}
</style>
<div class="utility">Find a Showroom | Account</div>
<div class="nav">
<div class="logo">Kichler</div>
<div class="navlinks"><span>Outdoor</span><span>Pendants</span><span>Chandeliers</span><span>Landscape</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="headline">Lighting Built<br>To Spec</div>
<div class="sub">Outdoor wall lanterns, pendant housings, and landscape spotlights with IES photometric files included.</div>
<div class="btn">Find a Fixture</div>
</div>
<div class="lampGraphic"><div class="lampShade"></div><div class="lampPole"></div></div>
</div>
<div class="sec">
<div class="secTitle">Popular Fixtures</div>
<div class="grid">
<div class="card"><div class="badge">New</div><div class="cardImg"><div class="fixture"><div class="fshade"></div><div class="fpole"></div></div></div><div class="cardTitle">Barrington Lantern</div><div class="cardPrice">$189</div></div>
<div class="card"><div class="cardImg"><div class="fixture"><div class="fshade" style="background:#2d2d2d"></div><div class="fpole"></div></div></div><div class="cardTitle">Vivo Pendant</div><div class="cardPrice">$149</div></div>
<div class="card"><div class="cardImg"><div class="fixture"><div class="fshade" style="background:#96aeb7"></div><div class="fpole"></div></div></div><div class="cardTitle">Six-Light Chandelier</div><div class="cardPrice">$549</div></div>
<div class="card"><div class="cardImg"><div class="fixture"><div class="fshade" style="background:#c9a861"></div><div class="fpole"></div></div></div><div class="cardTitle">LED Spotlight</div><div class="cardPrice">$59</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5e8e2; color: #252121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5e8e2; color: #252121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0; color: #252121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6c4739; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #523228; color: #f5e8e2;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.5px; background: #f5e8e2; color: #252121;
border: 1px solid #523228; border-radius: 9999px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f5e8e2; color: #252121;
border: 1px solid #c1b6b2; border-radius: 9999px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c4739; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #e32c2b; color: #f5e8e2;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f5e8e2; font-family:Georgia,serif; color:#212121; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #e9d8d0;}
.logo{font-family:Impact,Arial,sans-serif;font-size:24px;color:#523228;letter-spacing:-.5px;}
.navlinks{display:flex;gap:22px;font-family:Arial,sans-serif;font-size:13px;color:#212121;}
.cart{width:96px;height:36px;border-radius:9999px;background:#523228;color:#f5e8e2;font-family:Arial,sans-serif;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.hero{height:250px;display:flex;align-items:center;padding:0 40px;gap:28px;}
.herotext{width:46%;}
.herotext h1{font-family:Impact,Arial,sans-serif;font-size:36px;font-weight:400;color:#212121;margin:0 0 12px;line-height:1.1;}
.herotext p{font-size:16px;color:#212121;margin:0 0 18px;max-width:300px;}
.herocta{display:inline-block;background:#523228;color:#f5e8e2;font-family:Arial,sans-serif;font-size:14px;font-weight:500;letter-spacing:.5px;border-radius:9999px;padding:14px 28px;}
.heroart{width:46%;height:180px;border-radius:20px;background:radial-gradient(circle at 35% 30%,#e32c2b,#523228 75%);position:relative;overflow:hidden;}
.heroart:before{content:'';position:absolute;width:56px;height:80px;background:#f5e8e2;border-radius:20px 20px 30px 30px;top:40px;left:60px;}
.heroart:after{content:'';position:absolute;width:34px;height:20px;background:#523228;border-radius:6px;top:26px;left:74px;}
.grid{display:flex;gap:16px;padding:20px 40px 0;}
.card{width:196px;background:#f7eee6;border-radius:12px;padding:14px;position:relative;}
.badge{position:absolute;top:10px;left:10px;background:#e32c2b;color:#f5e8e2;font-family:Arial,sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;border-radius:9999px;padding:3px 10px;}
.thumb{height:96px;border-radius:12px;margin-bottom:8px;}
.ptitle{font-family:Arial,sans-serif;font-size:15px;font-weight:500;color:#212121;letter-spacing:.3px;}
.pprice{font-size:14px;color:#6c4739;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#523228;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.footer span{color:#f5e8e2;font-family:Arial,sans-serif;font-size:11px;text-decoration:underline;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Snif</div>
<div class="navlinks"><span>Fragrance</span><span>Candles</span><span>Discovery Set</span><span>Journal</span></div>
<div class="cart">Bag (1)</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Scent for a cozy, candle-lit evening.</h1>
<p>Warm, curated fragrance for a room you actually want to sit in.</p>
<div class="herocta">Shop Fragrance</div>
</div>
<div class="heroart"></div>
</div>
<div class="grid">
<div class="card"><span class="badge">New</span><div class="thumb" style="background:linear-gradient(135deg,#523228,#e32c2b)"></div><div class="ptitle">Late Night Snif</div><div class="pprice">$68</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#6c4739,#e9d8d0)"></div><div class="ptitle">Rewind Candle</div><div class="pprice">$42</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#a3928a,#523228)"></div><div class="ptitle">Discovery Trio</div><div class="pprice">$35</div></div>
</div>
<div class="footer"><span>© Snif — scent, unserious about being serious</span><span>Find Your Scent</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -0.3px; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #8f9196; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #6f5cae; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0.3px; background: #ffffff; color: #212121;
border: 1px solid #6f5cae; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #212121;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f9196; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #8071b3; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html><html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#1a1a1a; color:#ffffff; box-sizing:border-box;
font-family:'Poppins','Microsoft Yahei',sans-serif; }
* { box-sizing:border-box; }
nav { height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 34px;
background:#212121; }
.brand { font-size:18px; font-weight:600; color:#6f5cae; }
.navlinks { display:flex; gap:22px; font-size:12.5px; color:#8f9196; font-weight:500; }
.search { background:#32373c; border-radius:9999px; padding:8px 16px; font-size:12px; color:#8f9196; width:170px; }
main { display:flex; height:578px; }
.gallery { width:400px; background:#121212; position:relative; display:flex; align-items:center; justify-content:center; }
.kb { width:260px; height:110px; background:#212121; border-radius:10px; position:relative;
box-shadow:0 20px 40px rgba(111,92,174,0.3); display:grid; grid-template-columns:repeat(8,1fr); gap:4px; padding:12px; }
.kb i { display:block; background:#32373c; border-radius:3px; }
.kb i:nth-child(3n) { background:#6f5cae; }
.cap-float { position:absolute; top:80px; right:120px; width:34px; height:34px; background:#8071b3;
border-radius:5px; box-shadow:0 10px 20px rgba(0,0,0,0.4); }
.badge-new { position:absolute; top:24px; left:24px; background:#8071b3; color:#fff; font-size:10px;
font-weight:600; padding:5px 12px; border-radius:9999px; text-transform:uppercase; }
.info { flex:1; padding:30px 36px; display:flex; flex-direction:column; gap:12px; background:#1a1a1a; }
.cat { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:#8f9196; }
h1 { font-size:22px; font-weight:600; margin:0; line-height:1.3; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-size:20px; font-weight:600; color:#f78da7; }
.desc { font-size:13px; color:#c8c8c8; line-height:1.5; max-width:340px; }
.switch-row { display:flex; gap:8px; }
.sw { border:1px solid #444444; border-radius:8px; padding:7px 14px; font-size:12px; color:#eeeeee; }
.sw.on { border-color:#6f5cae; color:#fff; background:#6f5cae; }
.btn-row { display:flex; gap:10px; margin-top:auto; }
.btn-primary { flex:1; background:#6f5cae; color:#fff; border:none; border-radius:9999px; padding:13px 18px;
font-size:14px; font-weight:600; }
.btn-outline { border:1.5px solid #8f9196; color:#eeeeee; background:transparent; border-radius:9999px; padding:11.5px 16px;
font-size:12.5px; font-weight:600; white-space:nowrap; }
.meta { font-size:11px; color:#8f9196; }
</style></head>
<body>
<nav>
<div class="brand">Akko</div>
<div class="navlinks"><span>Keyboards</span><span>Switches</span><span>Keycaps</span><span>Accessories</span></div>
<div class="search">Search switch type...</div>
</nav>
<main>
<div class="gallery">
<span class="badge-new">New</span>
<div class="kb"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div class="cap-float"></div>
</div>
<div class="info">
<span class="cat">75% Mechanical Keyboard</span>
<h1>Akko MOD007B-HE Wireless Keyboard</h1>
<div class="price-row"><span class="price">$99.99</span></div>
<p class="desc">Gasket-mounted, hot-swappable 75% board with translucent PBT keycaps and tri-mode connectivity.</p>
<div class="switch-row">
<span class="sw on">Linear</span>
<span class="sw">Tactile</span>
<span class="sw">Clicky</span>
</div>
<div class="btn-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-outline">Customize Keycaps</button>
</div>
<span class="meta">Free global shipping over $59</span>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #7c7c7c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fa4747; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #fa4747;
border: 1px solid #fa4747; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ffffff; color: #111111;
border: 1px solid #d9d9d9; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7c7c7c; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fee2e2; color: #fa4747;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#1D1D1F; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { display:flex; width:960px; height:640px; }
.phone { width:360px; height:640px; background:#fff; padding:22px 16px; position:relative; }
.navtitle { font-size:20px; font-weight:700; margin-bottom:12px; }
.legend { height:10px; border-radius:5px; background:linear-gradient(90deg,#34C759,#A8E6B8,#F5F5F7,#FFC7C7,#FA4747);
margin-bottom:6px; }
.legendlbl { display:flex; justify-content:space-between; font-size:10px; color:#6E6E73; margin-bottom:10px; }
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:16px; }
.cell { height:44px; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center;
font-size:12px; font-weight:600; }
.cell .p { font-size:8px; font-weight:600; }
.cell.sel { outline:2px solid #1D1D1F; outline-offset:-2px; }
.farecard { border:1px solid #E5E5EA; border-radius:16px; padding:14px; box-shadow:rgba(0,0,0,0.06) 0 4px 16px; }
.frow { display:flex; justify-content:space-between; font-size:13px; font-weight:700; margin-bottom:2px; }
.fmeta { font-size:11px; color:#6E6E73; margin-bottom:8px; }
.price { font-size:28px; font-weight:700; letter-spacing:-0.5px; }
.verdict { display:inline-block; background:#34C759; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase;
padding:4px 10px; border-radius:999px; margin-left:8px; }
.confbar { display:flex; gap:4px; margin:10px 0 4px; }
.confbar span { flex:1; height:6px; border-radius:3px; background:#34C759; }
.confbar span.e { background:#E5E5EA; }
.conftxt { font-size:11px; color:#6E6E73; }
.tabbar { position:absolute; bottom:0; left:0; right:0; height:56px; background:rgba(255,255,255,0.96);
border-top:0.5px solid #E5E5EA; display:flex; align-items:center; justify-content:space-around; }
.tab { font-size:9px; color:#6E6E73; text-align:center; }
.tab.on { color:#FA4747; font-weight:700; }
.info { flex:1; padding:44px 48px; display:flex; flex-direction:column; gap:26px; }
.brand { font-size:30px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.brand span { color:#FA4747; }
.tag { font-size:14px; color:#6E6E73; line-height:1.5; max-width:480px; margin:0; }
.swatches { display:flex; gap:10px; }
.sw { width:52px; }
.chip2 { width:52px; height:52px; border-radius:8px; border:1px solid #E5E5EA; }
.sw small { display:block; margin-top:6px; font-size:9px; color:#6E6E73; text-align:center; }
.typeblock .t1 { font-size:24px; font-weight:700; letter-spacing:-0.4px; }
.typeblock .t2 { font-size:13px; color:#6E6E73; margin-top:6px; }
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-size:11px; font-weight:600; padding:6px 12px; border-radius:999px;
background:#F5F5F7; border:1px solid #E5E5EA; color:#6E6E73; }
.footer { margin-top:auto; border-top:1px solid #E5E5EA; padding-top:16px; font-size:11px; color:#A1A1A6; }
</style></head>
<body>
<div class="wrap">
<div class="phone">
<p class="navtitle">SFO → JFK</p>
<div class="legend"></div>
<div class="legendlbl"><span>Buy</span><span>Wait</span></div>
<div class="cal">
<div class="cell" style="background:#34C759;color:#fff">10<span class="p">$189</span></div>
<div class="cell" style="background:#A8E6B8">11<span class="p">$212</span></div>
<div class="cell" style="background:#F5F5F7">12<span class="p">$247</span></div>
<div class="cell sel" style="background:#F5F5F7">13<span class="p">$247</span></div>
<div class="cell" style="background:#FFC7C7">14<span class="p">$298</span></div>
<div class="cell" style="background:#FA4747;color:#fff">15<span class="p">$355</span></div>
<div class="cell" style="background:#FFC7C7">16<span class="p">$302</span></div>
</div>
<div class="farecard">
<div class="frow"><span>SFO → JFK</span><span>United · Nonstop · 5h 42m</span></div>
<div class="fmeta">United · Nonstop · 5h 42m</div>
<div><span class="price">$247</span><span class="verdict">Wait</span></div>
<div class="confbar"><span></span><span></span><span></span><span class="e"></span></div>
<div class="conftxt">Hopper is 87% confident — likely cheaper soon</div>
</div>
<div class="tabbar"><div class="tab on">Home</div><div class="tab">Watches</div><div class="tab">Trips</div><div class="tab">Profile</div></div>
</div>
<div class="info">
<div>
<h1 class="brand">Hopper (iOS)<span>.</span></h1>
<p class="tag">A calendar that answers "buy now or wait?" — a green-to-red heatmap and a colored verdict pill on every fare.</p>
</div>
<div class="swatches">
<div class="sw"><div class="chip2" style="background:#FA4747"></div><small>#FA4747</small></div>
<div class="sw"><div class="chip2" style="background:#34C759"></div><small>#34C759</small></div>
<div class="sw"><div class="chip2" style="background:#FFC7C7"></div><small>#FFC7C7</small></div>
<div class="sw"><div class="chip2" style="background:#A8E6B8"></div><small>#A8E6B8</small></div>
<div class="sw"><div class="chip2" style="background:#F5F5F7"></div><small>#F5F5F7</small></div>
</div>
<div class="typeblock">
<div class="t1">$247</div>
<div class="t2">Inter · 28pt / 700 · the predicted price is always the hero, paired with a verdict pill</div>
</div>
<div class="taglist">
<span>Prediction heatmap</span><span>Buy/Wait verdict pill</span><span>Confidence bar</span>
<span>Watch-price toggle</span><span>Bunny mascot</span>
</div>
<div class="footer">Clean white canvas · red/green is a strict semantic pair, never decorative</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fcfaf5; color: #1f3041;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fcfaf5; color: #1f3041;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #1f3041; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b6d76; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #1f3041; color: #fcfaf5;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.5px; background: #fcfaf5; color: #1f3041;
border: 1px solid #1f3041; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fcfaf5; color: #525252;
border: 1px solid #c5c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6d76; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #b04e2d; color: #fcfaf5;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fcfaf5; font-family:Inconsolata,'Courier New',monospace; color:#1f3041; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dedede;}
.logo{font-size:20px;font-weight:700;}
.navlinks{display:flex;gap:26px;font-size:14px;letter-spacing:0.3px;}
.searchpill{background:#fcfaf5;border:1px solid #dedede;border-radius:9999px;padding:10px 20px;font-size:13px;color:#525252;width:200px;}
.hero{height:290px;display:flex;background:#ece8e0;}
.herotext{width:48%;padding:0 40px;display:flex;flex-direction:column;justify-content:center;}
.herotext h1{font-size:34px;font-weight:700;margin:0 0 14px;line-height:1.2;}
.herotext p{font-size:14px;color:#525252;margin:0 0 22px;max-width:340px;}
.cta{display:inline-block;background:#1f3041;color:#fcfaf5;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:13px 26px;border-radius:8px;width:fit-content;}
.heroimg{width:52%;position:relative;background:linear-gradient(160deg,#b04e2d 0%,#994422 55%,#1f3041 100%);overflow:hidden;}
.diamond{position:absolute;width:40px;height:40px;background:#fcfaf5;opacity:0.85;transform:rotate(45deg);}
.d1{top:60px;left:70px;} .d2{top:120px;left:150px;background:#e8e6db;} .d3{top:40px;left:200px;width:30px;height:30px;}
.rowlabel{padding:22px 40px 12px;font-size:12px;font-weight:600;letter-spacing:0.2px;}
.grid{display:flex;gap:16px;padding:0 40px;}
.card{width:200px;background:#e8e6db;border-radius:8px;overflow:hidden;}
.thumb{height:130px;background:#fafafa;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#b04e2d;color:#fcfaf5;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;border-radius:4px;padding:2px 8px;}
.body{padding:12px;}
.pname{font-size:14px;font-weight:600;margin-bottom:4px;}
.pprice{font-size:14px;color:#1f3041;}
</style>
<div class="nav">
<div class="logo">Revival Rugs</div>
<div class="navlinks"><span>Vintage</span><span>New Weaves</span><span>Runners</span><span>Sale</span></div>
<div class="searchpill">Search rugs...</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Better rugs, made with intention.</h1>
<p>One-of-a-kind vintage and handwoven rugs, restored with care and shipped to your door.</p>
<div class="cta">Shop New Arrivals</div>
</div>
<div class="heroimg"><div class="diamond d1"></div><div class="diamond d2"></div><div class="diamond d3"></div></div>
</div>
<div class="rowlabel">Newly Restored</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">New</div></div><div class="body"><div class="pname">Faded Terracotta Runner</div><div class="pprice">$340</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#e8e6db,#994422)"></div><div class="body"><div class="pname">Vintage Umber Kilim</div><div class="pprice">$620</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c9cace,#1f3041)"></div><div class="body"><div class="pname">Indigo Field Rug</div><div class="pprice">$780</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f9fafb; color: #333336;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f9fafb; color: #333336;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0; color: #333336; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #969595; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #aacc98; color: #333336;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #f9fafb; color: #333336;
border: 1px solid #aacc98; border-radius: 9999px;
padding: 12px 30px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f9fafb; color: #333336;
border: 1px solid #c8c8ca; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969595; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #47c1bf; color: #000000;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f9fafb; color:#333336; font-family:Nunito,sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;background:#333336;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{color:#fff;font-size:19px;font-weight:700;}
.navlinks{display:flex;gap:18px;color:#f9fafb;font-family:Hind,sans-serif;font-size:14px;font-weight:600;}
.strip{height:32px;background:#aacc98;color:#333336;font-family:Hind,sans-serif;font-size:12px;text-align:center;line-height:32px;}
.hero{background:#f0f6ed;padding:26px 32px;display:flex;align-items:center;gap:20px;}
.herotext h1{font-family:'VAGRN-Bold',Nunito,sans-serif;font-size:32px;font-weight:700;margin:0 0 10px;max-width:440px;}
.herotext p{font-size:14px;color:#5b5b5e;margin:0 0 14px;max-width:400px;}
.cta{display:inline-block;background:#aacc98;color:#333336;font-size:15px;font-weight:700;padding:12px 28px;border-radius:9999px;}
.grid{display:flex;gap:14px;padding:16px 32px;}
.card{width:196px;background:#f6f6f6;border-radius:12px;padding:14px;}
.thumb{height:88px;border-radius:12px;margin-bottom:8px;position:relative;}
.agebadge{position:absolute;top:6px;right:6px;background:#47c1bf;color:#fff;font-family:Hind,sans-serif;font-size:9px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:9999px;}
.domain{display:inline-block;background:#43467f;color:#fff;font-family:Hind,sans-serif;font-size:9px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;padding:2px 7px;border-radius:4px;margin-top:6px;}
.ptitle{font-size:14px;font-weight:700;margin-top:6px;}
.pprice{font-size:15px;font-weight:700;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:56px;background:#333336;color:#f9fafb;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.footer span:first-child{color:#aacc98;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Plantoys</div>
<div class="navlinks"><div>Toys</div><div>By Age</div><div>Sustainability</div></div>
</div>
<div class="strip">FSC Certified Wood · Non-Toxic Paint · Recycled Rubber</div>
<div class="hero">
<div class="herotext">
<h1>Play that grows with them.</h1>
<p>Sustainably made wooden toys designed around real developmental milestones.</p>
<div class="cta">Shop Toys</div>
</div>
</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#79c2d4,#aacc98)"><div class="agebadge">2+</div></div><div class="ptitle">Wobbling Sorting Bus</div><div class="domain">Motor Skills</div><div class="pprice">$29.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d21625,#ffff00)"><div class="agebadge">3-6</div></div><div class="ptitle">Rainbow Stacker</div><div class="domain">Creativity</div><div class="pprice">$24.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#37e983,#79c2d4)"><div class="agebadge">4+</div></div><div class="ptitle">Wooden Marble Run</div><div class="domain">Motor Skills</div><div class="pprice">$44.95</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#50248f,#e8909c)"><div class="agebadge">1+</div></div><div class="ptitle">First Push Elephant</div><div class="domain">Social</div><div class="pprice">$19.95</div></div>
</div>
<div class="footer"><span>Rooted in Thai Forests</span><span>© Plantoys · Sustainable Play</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #080a0f; color: #ffffff;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #080a0f; color: #ffffff;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.25; margin: 0; color: #ffffff; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #9ca3af; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #00befa; color: #000000;
border: none; border-radius: 9999px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: transparent; color: #00befa;
border: 1px solid #00befa; border-radius: 9999px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1d1d1f;
border: 1px solid #0d0f13; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ca3af; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #00befa; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#080a0f; color:#f2f2f2; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; }
.brand { font-size:17px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:24px; font-size:14px; color:#f2f2f2; }
.navlinks .active { color:#00befa; border-bottom:2px solid #00befa; padding-bottom:4px; }
.icons { display:flex; gap:14px; align-items:center; }
.icons span { width:16px; height:16px; border-radius:999px; border:1px solid #75787f; display:inline-block; }
main { flex:1 1 auto; display:flex; flex-direction:column; padding:0 32px; min-height:0; }
.hero { flex:1 1 auto; display:flex; align-items:center; gap:28px; min-height:0; }
.hero-copy { flex:1; }
.hero-copy .kicker { color:#00db84; font-size:12px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; margin:0 0 8px; }
.hero-copy h1 { font-size:34px; font-weight:700; letter-spacing:-1px; margin:0 0 10px; line-height:1.12; }
.hero-copy p { color:#9ca3af; font-size:14px; margin:0 0 16px; max-width:360px; }
.hero-copy button { background:#00befa; color:#ffffff; border:none; border-radius:999px; padding:13px 28px;
font-size:15px; font-weight:600; }
.hero-art { flex:0 0 300px; height:220px; border-radius:20px; position:relative;
background:radial-gradient(circle at 30% 30%, rgba(0,190,250,0.35), transparent 60%), #101319;
border:1px solid #22262e; }
.hero-art::after { content:''; position:absolute; left:24px; right:24px; bottom:24px; height:6px; border-radius:999px;
background:linear-gradient(90deg,#00db84,#00befa); }
.specs { flex:0 0 auto; display:flex; gap:14px; padding:16px 0 20px; }
.spec { flex:1; background:#f5f5f7; color:#1d1d1f; border-radius:12px; padding:14px 16px; }
.spec .label { font-size:12px; color:#75787f; text-transform:uppercase; letter-spacing:0.5px; margin:0 0 4px; }
.spec .value { font-family:SFMono-Regular, Consolas, monospace; font-size:16px; font-weight:600; margin:0; }
.badge-row { display:flex; gap:8px; margin-top:8px; }
.badge { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; padding:2px 8px; border-radius:4px; color:#fff; }
.badge.new { background:#00befa; }
.badge.eco { background:#00db84; }
footer { flex:0 0 auto; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; font-size:12px; color:#9ca3af; border-top:1px solid #1a1d24; }
</style></head>
<body>
<nav>
<p class="brand">Anker</p>
<div class="navlinks"><span class="active">Charging</span><span>Power Banks</span><span>Cables</span><span>Soundcore</span></div>
<div class="icons"><span></span><span></span></div>
</nav>
<main>
<div class="hero">
<div class="hero-copy">
<p class="kicker">GaN Prime 100W</p>
<h1>Never be unpowered again.</h1>
<p>A charger small enough for your pocket, fast enough for three devices at once.</p>
<button>Shop Now</button>
<div class="badge-row"><span class="badge new">New</span><span class="badge eco">Eco</span></div>
</div>
<div class="hero-art"></div>
</div>
<div class="specs">
<div class="spec"><p class="label">Output</p><p class="value">100W</p></div>
<div class="spec"><p class="label">Ports</p><p class="value">3 (2×C, 1×A)</p></div>
<div class="spec"><p class="label">Weight</p><p class="value">153g</p></div>
</div>
</main>
<footer>
<span>© Anker</span>
<span>Support · Warranty · Community</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #110011;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #110011;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.33; letter-spacing: 0.3px; margin: 0; color: #110011; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #3c596c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #137ac6; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #110011;
border: 1px solid #137ac6; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #2e2e2e;
border: 1px solid #c4bfc4; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #3c596c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #137ac6; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f4f4f4; color:#2e2e2e; font-family:'Barlow Semi Condensed',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:56px;background:#110011;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-family:'Didact Gothic',Arial,sans-serif;font-size:19px;letter-spacing:0.5px;color:#137ac6;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#8bbce0;}
.searchpill{background:#3c596c;border-radius:4px;padding:8px 18px;font-size:12px;color:#e0e0e0;}
.hero{height:96px;background:#3c596c;display:flex;align-items:center;padding:0 34px;}
.hero h1{font-family:'Didact Gothic',Arial,sans-serif;font-size:20px;color:#fff;margin:0 0 4px;}
.hero p{font-size:12px;color:#cfe0ee;margin:0;}
.seclabel{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#110011;padding:16px 34px 12px;}
.grid{display:flex;gap:12px;padding:0 34px;}
.card{width:150px;position:relative;}
.badge{position:absolute;top:6px;left:6px;background:#cc3727;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 7px;z-index:2;}
.cover{width:150px;height:150px;position:relative;}
.ptitle{font-size:12px;font-weight:600;color:#110011;line-height:1.3;height:30px;overflow:hidden;margin-top:6px;}
.pmeta{font-size:10px;color:#3c596c;margin-top:2px;}
.pprice{font-size:12px;font-weight:700;color:#137ac6;margin-top:3px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#110011;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:11px;color:#8bbce0;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Things From Another World</div>
<div class="navlinks"><span>New Releases</span><span>Back Issues</span><span>Collectibles</span></div>
<div class="searchpill">Search back issues...</div>
</div>
<div class="hero">
<div><h1>New Comic Book Day</h1><p>This week's pull list, fresh off the truck and into the long box.</p></div>
</div>
<div class="seclabel">New This Week</div>
<div class="grid">
<div class="card"><div class="badge">Sale</div><div class="cover" style="background:linear-gradient(135deg,#137ac6,#110011)"></div><div class="ptitle">Nightwatch #14</div><div class="pmeta">Variant Cover</div><div class="pprice">$4.99</div></div>
<div class="card"><div class="cover" style="background:linear-gradient(135deg,#cc3727,#3c596c)"></div><div class="ptitle">Starforged Vol. 2</div><div class="pmeta">Trade Paperback</div><div class="pprice">$19.99</div></div>
<div class="card"><div class="cover" style="background:linear-gradient(135deg,#3c596c,#137ac6)"></div><div class="ptitle">Deep Fathom Annual</div><div class="pmeta">Signed Edition</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="cover" style="background:linear-gradient(135deg,#110011,#137ac6)"></div><div class="ptitle">Iron Widow #1</div><div class="pmeta">1st Print</div><div class="pprice">$3.99</div></div>
</div>
<div class="footer"><span>© Comics, Toys & Collectibles</span><span>Subscribe to Your Pull List</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fff8e2; color: #1d1e20;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fff8e2; color: #1d1e20;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #1d1e20; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #727586; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #d63163; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #fff8e2; color: #1d1e20;
border: 1px solid #d63163; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fff8e2; color: #1d1e20;
border: 1px solid #c6c2b2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #727586; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffcd35; color: #1d1e20;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fff8e2; font-family:'DM Sans',Arial,Helvetica,sans-serif; color:#36344d; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:20px;font-weight:600;color:#1d1e20;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:500;color:#36344d;}
.hero{height:240px;display:flex;align-items:center;padding:0 44px;}
.herotext{width:52%;}
.herotext h1{font-size:36px;font-weight:600;color:#1d1e20;margin:0 0 14px;letter-spacing:-0.6px;line-height:1.15;}
.herotext p{font-size:15px;color:#36344d;margin:0 0 18px;max-width:320px;}
.cta{display:inline-block;background:#d63163;color:#fff;font-size:16px;font-weight:600;letter-spacing:0.3px;padding:14px 28px;border-radius:8px;}
.heroimg{width:40%;height:180px;border-radius:20px;background:radial-gradient(circle at 35% 35%,#8c85ff,#2f1c6a 80%);}
.section{padding:20px 44px 0;}
.seclabel{font-size:22px;font-weight:600;color:#1d1e20;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:190px;background:#fff;border-radius:20px;padding:14px;}
.thumb{height:100px;border-radius:12px;background:#f2f3f6;margin-bottom:8px;}
.ptitle{font-size:16px;font-weight:600;color:#1d1e20;}
.pprice{font-size:15px;color:#d63163;margin-top:4px;}
.badgenew{display:inline-block;background:#ffcd35;color:#1d1e20;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 10px;border-radius:9999px;margin-top:6px;}
</style>
<div class="nav">
<div class="logo">Sardel</div>
<div class="navlinks"><div>Cookware</div><div>Bakeware</div><div>Sale</div><div>Gift Guide</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Cookware built for the meals that matter.</h1>
<p>Tri-ply stainless designed for every day, made beautiful enough to keep on the stove.</p>
<div class="cta">Shop Cookware</div>
</div>
<div class="heroimg"></div>
</div>
<div class="section">
<div class="seclabel">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#673de6,#1d1e20)"></div><div class="ptitle">Sardel Dutch Oven, 5.5Qt</div><div class="pprice">$225.00</div><div class="badgenew">New</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d63163,#8c85ff)"></div><div class="ptitle">Stainless Steel Skillet Set</div><div class="pprice">$189.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00b090,#1d1e20)"></div><div class="ptitle">Saucepan, 3Qt with Lid</div><div class="pprice">$95.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1d1d1d;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1d1d1d;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #1d1d1d; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #005050; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #005050;
border: 1px solid #005050; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #1d1d1d;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #fbcd0a; color: #1d1d1d;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Brandon Text',Arial,sans-serif; color:#1d1d1d; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#005050;}
.logo{font-size:19px;font-weight:600;color:#fff;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:600;color:#a89cc8;}
.search{width:150px;height:30px;border-radius:9999px;background:#fff;opacity:.15;}
.hero{height:250px;display:flex;background:#f9fafb;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 34px;}
.herotext h1{font-size:32px;font-weight:600;margin:0 0 12px;line-height:1.2;color:#005050;}
.herotext p{font-size:14px;color:#555;margin:0 0 16px;max-width:290px;}
.btn{display:inline-block;background:#005050;color:#fff;font-size:13px;font-weight:600;padding:12px 26px;border-radius:8px;width:fit-content;}
.heroimg{width:54%;position:relative;overflow:hidden;background:linear-gradient(160deg,#00bec8,#005050 80%);}
.overlay{position:absolute;inset:0;background:rgba(0,80,80,.55);}
.case{position:absolute;bottom:40px;left:150px;width:110px;height:210px;border-radius:20px;background:linear-gradient(135deg,#108474,#007575);z-index:2;}
.sec{padding:20px 34px 0;}
.sectitle{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#555;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:200px;background:#f0f0f0;border-radius:12px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#fbcd0a;color:#1d1d1d;font-size:9px;font-weight:700;text-transform:uppercase;border-radius:9999px;padding:3px 9px;z-index:2;}
.thumb{height:96px;border-radius:8px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;}
.pprice{font-size:13px;font-weight:700;color:#005050;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Mous</div>
<div class="navlinks"><span>Phone Cases</span><span>Screen Protectors</span><span>Accessories</span></div>
<div class="search"></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Limitless protection. Featherlight feel.</h1>
<p>Aramid fiber cases engineered for drop protection that never feels bulky.</p>
<div class="btn">Shop Cases</div>
</div>
<div class="heroimg"><div class="overlay"></div><div class="case"></div></div>
</div>
<div class="sec">
<div class="sectitle">Clarity Collection</div>
<div class="grid">
<div class="card"><span class="badge">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#005050,#00bec8)"></div><div class="pname">Limitless 5.0 Case</div><div class="pprice">$44.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#108474,#007575)"></div><div class="pname">Aramid Carbon Case</div><div class="pprice">$54.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#00bec8,#a89cc8)"></div><div class="pname">Clarity Shield Glass</div><div class="pprice">$29.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#fbcd0a,#005050)"></div><div class="pname">Leather Wallet Case</div><div class="pprice">$49.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c1c1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c1c1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.25; letter-spacing: -0.24px; margin: 0; color: #1c1c1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #767672; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; letter-spacing: 0.28px; background: #4a6741; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.43; letter-spacing: 0.28px; background: #ffffff; color: #1c1c1a;
border: 1px solid #4a6741; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1c1c1a;
border: 1px solid #c6c6c6; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767672; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.45; letter-spacing: 0.66px; background: #f3f0eb; color: #3b3b38;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f7f5; font-family:'Söhne','Inter',-apple-system,'Helvetica Neue',sans-serif; color:#3b3b38; }
*{box-sizing:border-box;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 44px;border-bottom:1px solid #e0ddd8;}
.logo{font-size:20px;font-weight:300;letter-spacing:-0.4px;color:#1c1c1a;}
.navlinks{display:flex;gap:26px;font-size:13px;font-weight:500;letter-spacing:.2px;text-transform:uppercase;color:#767672;}
.cart{font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#4a6741;}
.hero{height:280px;display:flex;align-items:center;padding:0 44px;background:#ffffff;}
.herotext{width:430px;}
.kicker{font-size:11px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:#c8a97a;margin-bottom:14px;}
.headline{font-size:44px;font-weight:300;letter-spacing:-0.9px;line-height:1.1;color:#1c1c1a;margin-bottom:16px;}
.sub{font-size:15px;line-height:1.6;color:#767672;margin-bottom:22px;max-width:360px;}
.btn{display:inline-block;background:#4a6741;color:#fff;font-size:13px;font-weight:500;letter-spacing:.3px;padding:13px 28px;border-radius:9px;}
.vial{width:340px;height:210px;position:relative;margin-left:60px;}
.vialbody{position:absolute;left:130px;top:10px;width:80px;height:170px;border-radius:16px;background:linear-gradient(180deg,#f0e8da 0%,#4a6741 55%);box-shadow:0 20px 40px rgba(74,103,65,.18);}
.viallabel{position:absolute;left:140px;top:70px;width:60px;height:60px;background:#ffffff;border-radius:6px;}
.ring{position:absolute;width:220px;height:220px;border-radius:50%;border:1px solid #e0ddd8;top:-5px;left:60px;}
.sec{padding:26px 44px 0;}
.sectitle{font-size:11px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:#767672;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:200px;background:#fff;border:1px solid #e0ddd8;border-radius:10px;padding:14px;}
.thumb{height:96px;border-radius:8px;margin-bottom:12px;}
.pname{font-size:14px;font-weight:500;color:#1c1c1a;margin-bottom:4px;}
.pnote{font-size:11px;color:#767672;margin-bottom:8px;}
.pprice{font-size:14px;font-weight:600;color:#4a6741;}
</style>
<div class="nav">
<div class="logo">Nikalab</div>
<div class="navlinks"><span>Formulas</span><span>The Science</span><span>Your Panel</span></div>
<div class="cart">Bag (1)</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Precision Formulated</div>
<div class="headline">Made for your biology,<br>not the average one.</div>
<div class="sub">A supplement system built from your own panel data — nothing generic, nothing guessed at.</div>
<div class="btn">Take the Panel</div>
</div>
<div class="vial">
<div class="ring"></div>
<div class="vialbody"></div>
<div class="viallabel"></div>
</div>
</div>
<div class="sec">
<div class="sectitle">Your Formula, In Three Parts</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f0e8da,#4a6741)"></div><div class="pname">Foundation Blend</div><div class="pnote">Daily · AM</div><div class="pprice">$58 / mo</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4a6741,#1c1c1a)"></div><div class="pname">Recovery Complex</div><div class="pnote">Daily · PM</div><div class="pprice">$44 / mo</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c8a97a,#f3f0eb)"></div><div class="pname">Panel Re-Test Kit</div><div class="pnote">Every 90 days</div><div class="pprice">$65</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #38383a; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #38383a; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #090909; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#000000; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
.content { padding:20px 34px 0; height:520px; }
.top { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
h1.big { font-size:28px; font-weight:800; letter-spacing:-0.6px; margin:0; }
.brandtag { font-size:11px; font-weight:600; color:#98989F; }
.avatar { width:26px; height:26px; border-radius:50%; background:#2C2C2E; }
.hero { margin:0 12px; border-radius:16px; overflow:hidden; height:196px; position:relative;
background:linear-gradient(135deg,#1E3A5F 0%, #0F1E33 60%, #05090F 100%); }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.65) 72%, rgba(0,0,0,0.92) 100%); }
.heroc { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:16px 20px; }
.eyebrow { font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:#98989F; }
.herotitle { font-size:24px; font-weight:800; margin:6px 0 2px; letter-spacing:-0.4px; }
.herometa { font-size:11px; color:#98989F; margin-bottom:10px; }
.herobtns { display:flex; gap:10px; }
.playbtn { background:#fff; color:#000; font-size:12px; font-weight:600; padding:8px 20px; border-radius:12px; display:flex; align-items:center; gap:6px; }
.playbtn::before { content:''; border-left:7px solid #000; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.addbtn { width:32px; height:32px; border-radius:50%; background:rgba(120,120,128,0.36); display:flex; align-items:center; justify-content:center; font-size:16px; }
.rowhead { display:flex; justify-content:space-between; margin:18px 12px 8px; }
.rowhead h2 { font-size:17px; font-weight:700; margin:0; }
.more { font-size:11px; color:#0A84FF; }
.rail { display:flex; gap:10px; padding:0 12px; overflow:hidden; }
.thumb { width:150px; }
.art { height:84px; border-radius:10px; position:relative; }
.a1 { background:linear-gradient(150deg,#8E2A45,#2A0D18); }
.a2 { background:linear-gradient(150deg,#2A6E5A,#0B241C); }
.a3 { background:linear-gradient(150deg,#5A4A8E,#1A1530); }
.a4 { background:linear-gradient(150deg,#8E6A2A,#2A1D0B); }
.tag { position:absolute; top:6px; left:6px; background:rgba(0,0,0,0.4); font-size:7.5px; font-weight:700; padding:2px 5px; border-radius:5px; }
.resume { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,0.28); }
.resume::after { content:''; position:absolute; left:0; top:0; bottom:0; width:44%; background:#fff; }
.tt { font-size:12px; font-weight:600; margin:6px 0 1px; }
.ts { font-size:10.5px; color:#98989F; }
.mls { margin:16px 12px 0; display:flex; align-items:center; gap:12px; }
.mlschip { background:#ED1A6F; font-size:10px; font-weight:700; padding:5px 12px; border-radius:10px; }
.tabbar { position:absolute; left:0; right:0; bottom:0; height:60px; background:rgba(0,0,0,0.92);
backdrop-filter:blur(20px); border-top:1px solid #38383A; display:flex; align-items:center; }
.tab { flex:1; text-align:center; font-size:11px; font-weight:500; }
.tab .ic { width:20px; height:20px; margin:0 auto 3px; border-radius:5px; background:#636366; }
.tab.on { color:#0A84FF; }
.tab.on .ic { background:#0A84FF; }
</style></head>
<body>
<div class="content">
<div class="top"><h1 class="big">Watch Now</h1><span class="brandtag">Apple TV (iOS)</span><span class="avatar"></span></div>
<div class="hero">
<div class="heroc">
<span class="eyebrow">Apple TV+ · New Episode</span>
<div class="herotitle">Northbound</div>
<div class="herometa">S2 E4 · Drama · 48 min</div>
<div class="herobtns"><span class="playbtn">Play</span><span class="addbtn">+</span></div>
</div>
</div>
<div class="rowhead"><h2>Up Next</h2><span class="more">See All</span></div>
<div class="rail">
<div class="thumb"><div class="art a1"><span class="tag">Apple TV+</span><span class="resume"></span></div><div class="tt">Northbound</div><div class="ts">S2 E4 · 24 min left</div></div>
<div class="thumb"><div class="art a2"><span class="tag">Apple TV+</span><span class="resume"></span></div><div class="tt">Silent Harbor</div><div class="ts">S1 E1 · 6 min left</div></div>
<div class="thumb"><div class="art a3"><span class="tag">Apple TV+</span><span class="resume"></span></div><div class="tt">The Long Room</div><div class="ts">Movie · 41 min left</div></div>
<div class="thumb"><div class="art a4"><span class="tag">Apple TV+</span><span class="resume"></span></div><div class="tt">Ember Fields</div><div class="ts">S3 E8 · 12 min left</div></div>
</div>
<div class="mls"><span class="mlschip">MLS Season Pass</span><span style="font-size:11px;color:#98989F;">Live: Union FC vs. Crew — 2nd half</span></div>
</div>
<div class="tabbar">
<div class="tab on"><div class="ic"></div>Watch Now</div>
<div class="tab"><div class="ic"></div>TV+</div>
<div class="tab"><div class="ic"></div>Store</div>
<div class="tab"><div class="ic"></div>Search</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fbfaf8; color: #251f17;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fbfaf8; color: #251f17;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0; color: #251f17; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #7f9299; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #251f17; color: #fbfaf8;
border: none; border-radius: 4px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #fbfaf8; color: #251f17;
border: 1px solid #251f17; border-radius: 4px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fbfaf8; color: #251f17;
border: 1px solid #c6c3c0; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7f9299; opacity: 0.8; }
.badge {
font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #7f9299; color: #fbfaf8;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#fbfaf8; font-family:'Source Sans Pro',Arial,sans-serif; color:#251f17;
}
*{box-sizing:border-box;}
.mono{font-family:Consolas,'Courier New',monospace;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#251f17;}
.logo{font-size:19px;font-weight:700;color:#fbfaf8;}
.navlinks{display:flex;gap:24px;font-size:12px;color:#d4d0ca;}
.navlinks span.active{color:#fff;border-bottom:2px solid #a26300;padding-bottom:14px;}
.cta{background:#a26300;color:#fff;padding:10px 18px;font-size:11.5px;font-weight:600;border-radius:6px;}
.hero{display:flex;padding:24px 32px 16px;gap:26px;}
.hero-copy{width:370px;}
.hero-title{font-size:30px;font-weight:700;line-height:1.2;margin-bottom:12px;}
.hero-sub{font-size:13px;line-height:1.6;color:#4a4038;margin-bottom:16px;}
.btn-main{display:inline-block;background:#251f17;color:#fff;padding:12px 20px;font-size:12px;font-weight:600;border-radius:4px;}
.hero-visual{flex:1;height:210px;border-radius:8px;background:linear-gradient(160deg,#3a2f22,#251f17);position:relative;overflow:hidden;}
.violin-body{position:absolute;width:60px;height:150px;left:50%;top:28px;transform:translateX(-50%);border-radius:50% 50% 40% 40%/40% 40% 60% 60%;background:linear-gradient(160deg,#a26300,#5c3a10);}
.spec-line{position:absolute;bottom:12px;left:16px;right:16px;display:flex;justify-content:space-between;color:#d4d0ca;font-size:10px;}
.section{padding:6px 32px 0;}
.section-title{font-size:16px;font-weight:700;margin-bottom:12px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.card{background:#fff;border:1px solid #e5e1d8;border-radius:8px;overflow:hidden;}
.card-img{height:96px;background:linear-gradient(160deg,#d4d0ca,#7f9299);}
.card-body{padding:10px;}
.card-name{font-size:12px;font-weight:600;margin-bottom:4px;}
.card-spec{font-size:9.5px;color:#7f9299;margin-bottom:6px;}
.card-price{font-size:12.5px;font-weight:700;color:#251f17;}
</style>
<div class="nav">
<div class="logo">Eastman Strings</div>
<div class="navlinks"><span class="active">Violins</span><span>Violas</span><span>Cellos</span><span>Accessories</span><span>Workshop Notes</span></div>
<div class="cta">Find A Dealer</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="hero-title">Built by hand, documented like a workshop notebook.</div>
<div class="hero-sub">Every Eastman instrument ships with its own build specification — wood source, varnish formula, and setup details recorded in full.</div>
<div class="btn-main">View Instrument Specs</div>
</div>
<div class="hero-visual">
<div class="violin-body"></div>
<div class="spec-line mono"><span>TOP: SPRUCE</span><span>BACK: MAPLE</span><span>VARNISH: OIL</span></div>
</div>
</div>
<div class="section">
<div class="section-title">Featured Instruments</div>
<div class="grid">
<div class="card"><div class="card-img"></div><div class="card-body"><div class="card-name">Concertante Violin VL305</div><div class="card-spec mono">SPRUCE / MAPLE</div><div class="card-price">$3,450.00</div></div></div>
<div class="card"><div class="card-img"></div><div class="card-body"><div class="card-name">Master Series VL605</div><div class="card-spec mono">AGED SPRUCE</div><div class="card-price">$8,900.00</div></div></div>
<div class="card"><div class="card-img"></div><div class="card-body"><div class="card-name">Handcrafted Viola VA405</div><div class="card-spec mono">16" BODY</div><div class="card-price">$4,200.00</div></div></div>
<div class="card"><div class="card-img"></div><div class="card-body"><div class="card-name">Cello VC305, 4/4</div><div class="card-spec mono">SOLID WOOD</div><div class="card-price">$5,600.00</div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff5500; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff5500; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #e64d00; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff5500; color: #000000;
border: 1px solid #e64d00; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff5500; color: #f5f5f5;
border: 1px solid #fd6f27; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fb5400; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1A1A1A; box-sizing:border-box;
font-family:Pretendard, "Pretendard JP", "Noto Sans TC", system-ui, sans-serif; }
* { box-sizing:border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 26px; }
.brand { font-size:17px; font-weight:700; color:#FF5500; }
.tabs { display:flex; gap:16px; font-size:14px; font-weight:500; color:#767676; }
.tabs .on { color:#1A1A1A; font-weight:600; }
.row { display:flex; gap:8px; }
.cta { background:#FF5500; color:#fff; border-radius:999px; padding:10px 20px; font-size:14px; font-weight:600; }
.login { background:#fff; border:1px solid #FF5500; color:#FF5500; border-radius:999px; padding:4px 12px; font-size:12px; }
.chiprow { display:flex; gap:8px; padding:8px 26px; }
.chip { background:#F2F2F2; color:#333333; border-radius:12px; padding:4px 10px; font-size:12px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:10px 26px 0; }
.room { background:#ffffff; border:1px solid #E5E5E5; border-radius:12px; padding:12px; }
.top { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.av { width:44px; height:44px; border-radius:50%; border:2px solid #FF5500;
background:linear-gradient(135deg,#ffd7b8,#FF5500); }
.room h4 { font-size:13px; font-weight:600; margin:0; }
.room span { font-size:10.5px; color:#767676; }
.badge { background:#FF5500; color:#fff; border-radius:6px; font-size:9.5px; font-weight:600; padding:2px 5px; }
.band { display:flex; gap:14px; padding:18px 26px 0; }
.live-panel { flex:1; background:#1A1A1A; border-radius:16px; padding:18px; color:#fff; }
.live-panel h3 { font-size:15px; margin:0 0 8px; }
.gift { display:inline-block; background:rgba(255,179,0,0.15); color:#FFB300; border-radius:999px; padding:4px 10px; font-size:12px; font-weight:600; }
footer { position:absolute; bottom:0; width:960px; padding:12px 26px; display:flex; justify-content:space-between;
font-size:11px; color:#767676; border-top:1px solid #E5E5E5; }
</style></head>
<body>
<nav>
<p class="brand">Spoon</p>
<div class="tabs"><span class="on">Live</span><span>Podcast</span><span>Ranking</span></div>
<div class="row"><span class="login">Log In</span><span class="cta">Go Live</span></div>
</nav>
<div class="chiprow"><span class="chip">#Romance</span><span class="chip">#Stories</span><span class="chip">#Chat</span><span class="chip">#Music</span></div>
<div class="grid">
<div class="room"><div class="top"><div class="av"></div><h4>DJ Jiwoo<br><span class="badge">LIVE</span></h4></div><span>1,204 listening</span></div>
<div class="room"><div class="top"><div class="av"></div><h4>Late Night Radio<br><span class="badge">LIVE</span></h4></div><span>532 listening</span></div>
<div class="room"><div class="top"><div class="av"></div><h4>Karaoke Challenge<br><span class="badge">LIVE</span></h4></div><span>890 listening</span></div>
<div class="room"><div class="top"><div class="av"></div><h4>Advice Corner<br><span class="badge">LIVE</span></h4></div><span>341 listening</span></div>
</div>
<div class="band">
<div class="live-panel"><h3>Live right now</h3><span class="gift">Gift sent!</span></div>
</div>
<footer>
<span>A space where anyone can easily start an audio live stream</span>
<span>Spoon · Live · Podcast · Ranking</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #da3238; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #da3238; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #e99da0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fb5957; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #da3238; color: #ffffff;
border: 1px solid #fb5957; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #da3238; color: #f5f5f5;
border: 1px solid #de5156; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #e99da0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #df383d; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Pretendard", AppleSDGothicNeo-Regular, "Malgun Gothic", sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #d7d7d7; }
.brand { font-size:17px; font-weight:600; }
.navlinks { display:flex; gap:22px; font-size:16px; font-weight:600; color:#5f6b7c; }
.navlinks span.on { color:#18202a; }
.btn-login { background:#fb5957; color:#fff; border:1px solid #fb5957; border-radius:4px; height:36px;
padding:0 16px; font-size:13px; font-weight:600; display:flex; align-items:center; }
.hero { padding:14px 40px 10px; }
.search { background:#fff; border:2px solid #222222; border-radius:30px; height:52px; padding:0 20px;
display:flex; align-items:center; font-size:16px; color:#94969b; max-width:520px; }
.section { padding:12px 40px 0; }
.section h2 { font-size:16px; font-weight:600; margin:0 0 8px; }
.row { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid #d7d7d7; }
.rank { width:20px; height:16px; background:#e6e8ef; color:#939dac; font-size:9px; font-weight:600;
border-radius:4px; display:flex; align-items:center; justify-content:center; }
.row .title { font-size:14px; font-weight:600; flex:1; }
.row .cat { font-size:11px; color:#94969b; }
.cols { display:flex; gap:20px; padding:10px 40px 0; }
.col { flex:1; }
footer { position:absolute; bottom:0; left:0; right:0; border-top:1px solid #d7d7d7; padding:10px 40px;
display:flex; justify-content:space-between; font-size:11px; color:#94969b; }
</style></head>
<body>
<nav>
<div class="brand">Blind</div>
<div class="navlinks"><span class="on">Home</span><span>Channels</span><span>Company Reviews</span></div>
<div class="btn-login">Log in</div>
</nav>
<div class="hero">
<div class="search">Search for something you're curious about</div>
</div>
<div class="cols">
<div class="col">
<div class="section"><h2>Top Topics</h2>
<div class="row"><span class="rank">1</span><span class="title">Anyone else negotiate a return offer this week?</span></div>
<div class="row"><span class="rank">2</span><span class="title">Comp thread: senior engineer, Seoul</span></div>
<div class="row"><span class="rank">3</span><span class="title">Honest review of my team's new manager</span></div>
<div class="row"><span class="rank">4</span><span class="title">Anyone moved from finance to product?</span></div>
</div>
</div>
<div class="col">
<div class="section"><h2>Company Reviews</h2>
<div class="row"><span class="title">Sample Tech Co.</span><span class="cat">Reviews 1,204</span></div>
<div class="row"><span class="title">Bluebird Labs</span><span class="cat">Reviews 842</span></div>
<div class="row"><span class="title">Northfield Group</span><span class="cat">Reviews 610</span></div>
</div>
</div>
</div>
<footer><span>© Blind</span><span>Blind · Careers · Report Guide</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fefdfb; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #fefdfb;
border: 1px solid #fefdfb; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292828; color: #fefdfb;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fefdfb; color:#000000; box-sizing:border-box;
font-family:-apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.nav .brand { font-weight:700; font-size:18px; }
.nav .links { display:flex; gap:20px; font-size:14px; color:#79756d; }
.navbtn-dark { background:#000; color:#fefdfb; border-radius:12px; padding:8px 16px; font-size:13.92px; font-weight:500; }
.navbtn-light { background:#f3f2ed; color:#000; border-radius:12px; padding:8px 16px; font-size:13.92px; font-weight:500; }
.hero { text-align:center; padding:16px 60px 0; }
.hero h1 { font-size:38px; font-weight:700; margin:0 0 10px; }
.hero p { font-size:15px; color:#79756d; margin:0 0 18px; }
.tabs { display:flex; justify-content:center; gap:8px; }
.tab { background:#f4f3f0; border-radius:12px; padding:8px 16px; font-size:13px; font-weight:500; color:#000; }
.tab.active { background:#aaebfd; }
.diagram { margin:24px 32px 0; height:250px; border-radius:18px; background:#f4f3f0; position:relative; overflow:hidden; }
.node { position:absolute; background:#fff; border-radius:12px; padding:10px 14px; font-size:12px; font-weight:600;
box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.n1{top:30px;left:40px;background:#aaebfd;} .n2{top:100px;left:220px;} .n3{top:30px;left:400px;background:#ffd7ec;}
.n4{top:170px;left:70px;} .n5{top:170px;left:420px;background:#d7ffd0;} .n6{top:100px;left:580px;background:#fff2b8;}
.line { position:absolute; height:2px; background:#d8d5cb; }
.l1{top:56px;left:150px;width:80px;} .l2{top:120px;left:320px;width:90px;} .l3{top:180px;left:180px;width:100px;} .l4{top:120px;left:520px;width:70px;}
.logos { display:flex; gap:14px; padding:20px 32px 0; }
.logocard { background:#fefdfb; border:1px solid #e8e6de; border-radius:18px; padding:16px 20px; font-size:13px; font-weight:600; color:#79756d; flex:1; text-align:center; }
</style></head>
<body>
<nav class="nav">
<div class="brand">Clay</div>
<div class="links"><span>Product</span><span>Solutions</span><span>Pricing</span></div>
<div style="display:flex;gap:8px;"><button class="navbtn-light">Sign in</button><button class="navbtn-dark">Get started</button></div>
</nav>
<div class="hero">
<h1>Go-to-market infrastructure for revenue teams</h1>
<p>Data, agents, orchestration, and execution — one connected system.</p>
<div class="tabs">
<div class="tab active">Data</div><div class="tab">Agents</div><div class="tab">Orchestration</div><div class="tab">Execution</div>
</div>
</div>
<div class="diagram">
<div class="line l1"></div><div class="line l2"></div><div class="line l3"></div><div class="line l4"></div>
<div class="node n1">Enrichment</div>
<div class="node n2">Agent step</div>
<div class="node n3">Scoring</div>
<div class="node n4">CRM sync</div>
<div class="node n5">Sequence</div>
<div class="node n6">Slack alert</div>
</div>
<div class="logos">
<div class="logocard">Northwind</div>
<div class="logocard">Verdant Labs</div>
<div class="logocard">Fieldstone</div>
<div class="logocard">Harbor & Co</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #242320;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #242320;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; letter-spacing: -0.25px; margin: 0; color: #242320; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #7b7b7b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; background: #ff3533; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.33; background: #ffffff; color: #242320;
border: 1px solid #ff3533; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #242320;
border: 1px solid #c8c8c7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7b7b7b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.25px; background: #ffe3e2; color: #ff3533;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:#555555; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #dedede;}
.logo{font-size:19px;font-weight:700;color:#242320;}
.navlinks{display:flex;gap:24px;font-size:13px;font-weight:600;color:#555555;}
.navcta{background:#ff3533;color:#fff;font-size:12px;font-weight:700;padding:10px 18px;border-radius:4px;}
.hero{height:230px;display:flex;background:#f7f8f7;}
.herotext{width:440px;padding:28px 36px;display:flex;flex-direction:column;justify-content:center;}
.kicker{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#ff3533;margin-bottom:10px;}
.h1{font-size:27px;font-weight:700;line-height:1.25;color:#242320;margin:0 0 10px;}
.sub{font-size:14px;color:#555555;margin:0 0 16px;max-width:340px;}
.btn{width:170px;text-align:center;background:#ff3533;color:#fff;font-size:13px;font-weight:700;padding:11px 0;border-radius:4px;}
.heroimg{flex:1;background:#f9fafb;display:grid;grid-template-columns:repeat(4,1fr);grid-gap:10px;padding:40px;align-content:center;}
.sw{height:44px;background:#eeeeee;border-radius:4px;}
.sw.hl{background:#ff3533;}
.sw.hl2{background:#108474;}
.strip{display:flex;gap:1px;background:#dedede;}
.cell{flex:1;background:#f9f9f9;text-align:center;padding:9px;}
.clabel{font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#7b7b7b;}
.cval{font-size:13px;color:#242320;margin-top:2px;font-weight:700;}
.sec{padding:16px 36px 0;}
.sectitle{font-size:13px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#242320;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:154px;border:1px solid #dedede;border-radius:4px;padding:9px;background:#f9fafb;position:relative;}
.thumb{height:96px;border-radius:4px;margin-bottom:8px;}
.pname{font-size:12px;font-weight:600;line-height:1.3;height:30px;overflow:hidden;color:#242320;}
.pprice{font-size:13px;font-weight:700;color:#ff3533;margin-top:3px;}
.badge{position:absolute;top:7px;left:7px;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 6px;border-radius:4px;}
</style>
<div class="nav">
<div class="logo">Omnitype</div>
<div class="navlinks"><span>Switches</span><span>Keycaps</span><span>Lube & Tools</span><span>Colorways</span></div>
<div class="navcta">Shop Switches</div>
</div>
<div class="hero">
<div class="herotext">
<div class="kicker">Precision As Obsession</div>
<div class="h1">Switches tuned<br>to the thousandth.</div>
<div class="sub">Factory-lubed mechanical switches built with the honesty of a straight edge, no marketing gloss required.</div>
<div class="btn">Shop Bestsellers</div>
</div>
<div class="heroimg">
<div class="sw"></div><div class="sw hl"></div><div class="sw"></div><div class="sw"></div>
<div class="sw"></div><div class="sw"></div><div class="sw hl2"></div><div class="sw"></div>
<div class="sw hl"></div><div class="sw"></div><div class="sw"></div><div class="sw"></div>
</div>
</div>
<div class="strip">
<div class="cell"><div class="clabel">Actuation</div><div class="cval">45g / 62g</div></div>
<div class="cell"><div class="clabel">Housing</div><div class="cval">Nylon / POM</div></div>
<div class="cell"><div class="clabel">Factory Lube</div><div class="cval">Pre-Applied</div></div>
<div class="cell"><div class="clabel">Warranty</div><div class="cval">1M Cycle Tested</div></div>
</div>
<div class="sec">
<div class="sectitle">Switch Colorways</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#ff3533;">Sale</span><div class="thumb" style="background:linear-gradient(150deg,#ff3533,#f9fafb)"></div><div class="pname">Stop-Sign Linear, 45g</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(150deg,#c1e6e6,#f9fafb)"></div><div class="pname">Mint Tactile, 55g</div><div class="pprice">$27.99</div></div>
<div class="card"><span class="badge" style="background:#108474;">New</span><div class="thumb" style="background:linear-gradient(150deg,#108474,#f9fafb)"></div><div class="pname">Teal Silent Linear</div><div class="pprice">$29.99</div></div>
<div class="card"><span class="badge" style="background:#a89cc8;">Preorder</span><div class="thumb" style="background:linear-gradient(150deg,#cbaaff,#f9fafb)"></div><div class="pname">Limited Colorway Set</div><div class="pprice">$32.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2e2e2e; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2e2e2e; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9b9b9b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f7f7f7; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2e2e2e; color: #f7f7f7;
border: 1px solid #f7f7f7; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2e2e2e; color: #f5f5f5;
border: 1px solid #4e4e4e; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9b9b9b; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4e4e4e; color: #f7f7f7;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f7f7; color:#2e2e2e; box-sizing:border-box;
font-family:"Instrument Sans","Inter",Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.logo { font-size:18px; font-weight:600; letter-spacing:-0.36px; }
.navlinks { display:flex; gap:20px; font-size:16px; }
.btn-pill { background:#2e2e2e; color:#ffffff; border-radius:9999px; padding:8px 16px; font-size:16px;
font-weight:500; }
.hero { text-align:center; padding:30px 40px 22px; }
.hero h1 { font-size:44px; font-weight:500; letter-spacing:-1.4px; line-height:1.2; margin:0 0 14px; }
.hero p { font-size:16px; color:#6a6972; margin:0 0 18px; }
.row { display:flex; gap:10px; justify-content:center; }
.btn-dark { background:#2e2e2e; color:#ffffff; border-radius:10px; padding:14px 24px; font-size:16px;
font-weight:600; }
.btn-ghost { background:#fcfcfc; color:#2e2e2e; border:1px solid rgba(0,0,0,0.08); border-radius:10px;
padding:13px 23px; font-size:18px; font-weight:500; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:6px 40px 24px; }
.card { border-radius:8px; padding:16px; font-size:13px; }
.card.white { background:#ffffff; border:1px solid rgba(0,0,0,0.14); }
.card.warm { background:#f0f0ea; border:1px solid rgba(0,0,0,0.04); }
.card h3 { font-size:16px; margin:0 0 6px; }
.card p { margin:0; color:#6a6972; }
.card .hl { color:#207dff; }
.pricing { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding:0 40px 24px; }
.tier { background:rgba(252,252,252,0.7); border:1px solid rgba(0,0,0,0.08); border-radius:12px; padding:18px; }
.tier h3 { font-size:20px; font-weight:600; margin:0 0 8px; }
.tier .check { color:#75c33a; font-size:13px; margin:4px 0; }
</style></head>
<body>
<nav>
<span class="logo">Heptabase</span>
<div class="navlinks"><span>AI Tutor</span><span>Wiki</span><span>Pricing</span></div>
<span class="btn-pill">Get started</span>
</nav>
<section class="hero">
<h1>Master anything you learn.</h1>
<p>Do your best research and thinking on an infinite whiteboard of cards.</p>
<div class="row">
<button class="btn-dark">Get started on mobile</button>
<button class="btn-ghost">Download</button>
</div>
</section>
<div class="grid">
<div class="card white"><h3>Whiteboard</h3><p>Arrange sources as cards and draw connections.</p></div>
<div class="card warm"><h3><span class="hl">AI chat</span></h3><p>Ask AI to explain any sources you bring.</p></div>
<div class="card white"><h3>AI tutor</h3><p>Master hard courses with guided review.</p></div>
</div>
<div class="pricing">
<div class="tier"><h3>Free</h3><div class="check">✓ Unlimited cards</div><div class="check">✓ Basic AI chat</div></div>
<div class="tier"><h3>Pro</h3><div class="check">✓ Unlimited AI tutor</div><div class="check">✓ For anyone building a lifelong knowledge base</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #363535;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #363535;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: 0px; margin: 0; color: #363535; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; margin: 0; color: #8a8c91; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #3e34d3; color: #ffffff;
border: none; border-radius: 12px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; background: #fafafa; color: #363535;
border: 1px solid #3e34d3; border-radius: 12px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: 0px; background: #fafafa; color: #363535;
border: 1px solid #c9c9c9; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8a8c91; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #3e34d3; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:#5f6166; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#fafafa;}
.logo{font-size:20px;font-weight:400;color:#363535;letter-spacing:0.5px;}
.navlinks{display:flex;gap:24px;font-size:15px;color:#5f6166;}
.navlinks .active{color:#3e34d3;border-bottom:2px solid #3e34d3;padding-bottom:6px;}
.hero{background:#f7f7f7;padding:34px 36px;}
.hero h1{font-size:28px;font-weight:400;color:#363535;margin:0 0 8px;max-width:460px;line-height:1.3;}
.hero p{font-size:15px;color:#5f6166;margin:0 0 16px;max-width:420px;}
.herocta{display:inline-block;background:#3e34d3;color:#fff;font-size:15px;font-weight:600;letter-spacing:0.5px;padding:14px 32px;border-radius:12px;}
.grid{display:flex;gap:16px;padding:20px 36px 0;}
.card{width:198px;background:#fff;border-radius:8px;overflow:hidden;}
.thumb{height:120px;border-radius:8px 8px 0 0;}
.pbody{padding:14px 14px 16px;}
.ptitle{font-size:16px;font-weight:600;color:#363535;margin-bottom:4px;}
.pprice{font-size:16px;color:#3e34d3;}
.badge{display:inline-block;background:#a98f36;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:4px;margin-bottom:8px;}
.sec-heading{padding:20px 36px 0;font-size:24px;font-weight:400;color:#363535;}
</style>
<div class="nav">
<div class="logo">Neat Method</div>
<div class="navlinks"><div class="active">Services</div><div>Products</div><div>Our Story</div><div>Book Now</div></div>
</div>
<div class="hero">
<h1>A calm, orderly space<br>starts with one visit.</h1>
<p>Custom home organization by professionals who bring the labels, bins, and the quiet.</p>
<div class="herocta">Book a Consultation</div>
</div>
<div class="sec-heading">Featured Systems</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#3e34d3,#2c2e40)"></div><div class="pbody"><span class="badge">Gold</span><div class="ptitle">Velvet Hanger Set (50)</div><div class="pprice">$89.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#515a4e,#8a8c91)"></div><div class="pbody"><div class="ptitle">Custom Drawer Liners</div><div class="pprice">$34.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#a98f36,#515a4e)"></div><div class="pbody"><div class="ptitle">Pantry Label System</div><div class="pprice">$48.00</div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#2c2e40,#3e34d3)"></div><div class="pbody"><div class="ptitle">Closet Bin Collection</div><div class="pprice">$120.00</div></div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #12053a; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #12053a; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #8f89a1; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #1b0b4d; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #12053a; color: #ffffff;
border: 1px solid #1b0b4d; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #12053a; color: #f5f5f5;
border: 1px solid #362b58; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8f89a1; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #13063d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#12053A; color:#FFFFFF; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.topnav { height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.wordmark { font-size:22px; font-weight:800; letter-spacing:-0.3pt;
background:linear-gradient(90deg,#0046FF,#7B2FF7); -webkit-background-clip:text; background-clip:text; color:transparent; }
.avatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#0046FF,#7B2FF7); }
.billboard { position:relative; height:300px; background:linear-gradient(120deg,#1B0B4D,#2c1466 60%,#3a1c7a); overflow:hidden; }
.billboard .grain { position:absolute; inset:0; background:radial-gradient(circle at 70% 30%, rgba(123,47,247,0.35), transparent 60%); }
.billboard .fade { position:absolute; left:0; right:0; bottom:0; height:70%; background:linear-gradient(to bottom, rgba(18,5,58,0), #12053A); }
.billboard .content { position:absolute; left:24px; bottom:20px; z-index:2; }
.badge-orig { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:0.4pt; text-transform:uppercase;
padding:4px 10px; border-radius:999px; border:1px solid transparent;
background:linear-gradient(#1B0B4D,#1B0B4D) padding-box, linear-gradient(90deg,#0046FF,#7B2FF7) border-box; }
.billboard h1 { font-size:32px; font-weight:800; letter-spacing:-0.5pt; margin:8px 0 4px; }
.billboard .meta { font-size:13px; color:#B0A8D0; margin:0 0 12px; }
.actionrow { display:flex; align-items:center; gap:10px; }
.play-cta { display:flex; align-items:center; gap:8px; padding:12px 22px; border-radius:8px; font-size:16px; font-weight:800;
background:linear-gradient(135deg,#0046FF,#7B2FF7); box-shadow:rgba(91,43,224,0.35) 0 8px 24px; }
.play-cta .tri { width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid #fff; }
.sec-btn { padding:12px 18px; border-radius:8px; background:rgba(255,255,255,0.14); font-size:15px; font-weight:600; }
.rows { padding:18px 24px; }
.rowhead { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.rowhead h2 { font-size:20px; font-weight:800; letter-spacing:-0.3pt; margin:0; }
.rowhead span { font-size:13px; color:#B0A8D0; }
.tiles { display:flex; gap:12px; }
.tile { position:relative; width:160px; height:90px; border-radius:6px; flex-shrink:0; overflow:hidden; }
.tile .orig-badge { position:absolute; top:6px; left:6px; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.3pt;
padding:2px 6px; border-radius:999px; background:rgba(18,5,58,0.8); border:1px solid #7B2FF7; }
.t1 { background:linear-gradient(140deg,#1B0B4D,#0046FF); }
.t2 { background:linear-gradient(140deg,#250F5E,#7B2FF7); }
.t3 { background:linear-gradient(140deg,#36206E,#4a1e8f); }
.t4 { background:linear-gradient(140deg,#1B0B4D,#5a2be0); }
</style></head>
<body>
<div class="topnav">
<span class="wordmark">Max (iOS)</span>
<div class="avatar"></div>
</div>
<div class="billboard">
<div class="grain"></div>
<div class="fade"></div>
<div class="content">
<span class="badge-orig">Max Originals</span>
<h1>The Ink Line</h1>
<p class="meta">2024 · TV-MA · 1 Season · Drama</p>
<div class="actionrow">
<div class="play-cta"><div class="tri"></div>Play</div>
<div class="sec-btn">+ My List</div>
<div class="sec-btn">More Info</div>
</div>
</div>
</div>
<div class="rows">
<div class="rowhead"><h2>Max Originals</h2><span>See All</span></div>
<div class="tiles">
<div class="tile t1"><span class="orig-badge">Originals</span></div>
<div class="tile t2"><span class="orig-badge">Originals</span></div>
<div class="tile t3"><span class="orig-badge">Originals</span></div>
<div class="tile t4"><span class="orig-badge">Originals</span></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #222222;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #222222;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 21px; font-weight: 600; line-height: 1.4; margin: 0; color: #222222; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6f6f6f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #006080; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.3px; background: #f5f5f5; color: #222222;
border: 1px solid #006080; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #444444;
border: 1px solid #e5e5e5; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6f6f6f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #f04124; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f5; color:#222222; box-sizing:border-box;
font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:58px; background:#006080; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { color:#ffffff; font-size:17px; font-weight:600; }
.navlinks { display:flex; gap:22px; font-size:12px; color:#cfe6ee; }
.navlinks span.on { color:#ffffff; font-weight:700; }
.search { flex:1; max-width:280px; margin:0 20px; background:#ffffff; border-radius:8px; padding:7px 14px; font-size:11px; color:#6f6f6f; }
.wrap { display:flex; height:524px; padding:16px 30px; gap:26px; }
.photo { width:280px; flex-shrink:0; background:#ffffff; border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative; }
.disc { width:200px; height:200px; border-radius:50%; background:repeating-radial-gradient(circle,#1a1a1a 0,#1a1a1a 2px,#2b2b2b 3px,#2b2b2b 6px); position:relative; }
.disc::after { content:''; position:absolute; inset:0; margin:auto; width:70px; height:70px; border-radius:50%; background:#006080; }
.limited-badge { position:absolute; top:14px; left:14px; background:#f04124; color:#fff; font-size:10px; font-weight:700; padding:5px 10px; border-radius:8px; }
.instock-badge { position:absolute; top:14px; right:14px; background:#43ac6a; color:#fff; font-size:10px; font-weight:700; padding:5px 10px; border-radius:8px; }
.info { flex:1; display:flex; flex-direction:column; gap:12px; }
.cat { font-size:12px; color:#6f6f6f; }
.info h1 { font-size:24px; font-weight:700; margin:0; line-height:1.25; }
.press-row { display:flex; gap:8px; }
.press-opt { border:1px solid #e5e5e5; border-radius:8px; padding:8px 16px; font-size:12px; background:#ffffff; }
.press-opt.on { border-color:#006080; color:#006080; font-weight:700; }
.desc { font-size:13px; color:#444444; line-height:1.6; max-width:460px; }
.amber-note { font-size:11px; color:#794b02; }
.buy-row { display:flex; align-items:center; gap:16px; margin-top:auto; }
.price { font-size:22px; font-weight:700; color:#f04124; }
.btn-buy { flex:1; background:#006080; color:#fff; border:none; border-radius:8px; padding:13px; font-size:13px; font-weight:700; }
footer { height:56px; background:#e7e7e7; display:flex; align-items:center; justify-content:space-between; padding:0 30px; font-size:11px; color:#6f6f6f; }
</style></head>
<body>
<nav>
<p class="brand">Acoustic Sounds</p>
<div class="search">Search artist, title, or catalog #…</div>
<div class="navlinks"><span class="on">SACD</span><span>180g Vinyl</span><span>Reels</span></div>
</nav>
<div class="wrap">
<div class="photo"><span class="limited-badge">Limited Edition</span><span class="instock-badge">In Stock</span><div class="disc"></div></div>
<div class="info">
<span class="cat">Jazz · 180g LP · Analogue Remaster</span>
<h1>Midnight Session — Analogue Remaster</h1>
<div class="press-row">
<span class="press-opt on">180g Vinyl</span>
<span class="press-opt">Hybrid SACD</span>
<span class="press-opt">Reel-to-Reel</span>
</div>
<p class="desc">Mastered from the original analogue tapes and pressed to 180g vinyl at a boutique plant — the felt of the platter, the quiet glow of the preamp, nothing between you and the session.</p>
<span class="amber-note">Only 240 copies pressed for this release</span>
<div class="buy-row">
<span class="price">$39.98</span>
<button class="btn-buy">Add to Cart</button>
</div>
</div>
</div>
<footer><span>© Acoustic Sounds</span><span>Shipping · Returns · Mastering Notes</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0062df; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0062df; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b3eb; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #003597; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0062df; color: #ffffff;
border: 1px solid #003597; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0062df; color: #f5f5f5;
border: 1px solid #277ae3; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b3eb; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #005bd3; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#e9ecf1; color:#1a2434; box-sizing:border-box;
font-family:Roboto,"Noto Sans KR",AppleSDGothicNeo-Regular,"Malgun Gothic",Dotum,sans-serif; }
* { box-sizing:border-box; }
.app { display:flex; flex-direction:column; width:960px; height:640px; }
header { height:56px; background:#ffffff; border-bottom:1px solid #d6d8db; display:flex; align-items:center;
padding:0 24px; gap:28px; }
.brand { font-weight:700; font-size:17px; color:#1a2434; letter-spacing:-0.2px; }
.navlinks { display:flex; gap:20px; font-size:13px; color:#565d6a; }
.navlinks span:first-child { color:#0062df; font-weight:700; }
.spacer { flex:1; }
.searchbox { background:#f4f5f7; border-radius:4px; padding:6px 12px; font-size:12px; color:#8e929b; width:220px; }
main { flex:1; display:flex; gap:1px; background:#d6d8db; }
.pairs { width:250px; background:#ffffff; overflow:hidden; }
.pairs .ph { padding:10px 14px; font-size:11px; color:#8e929b; border-bottom:1px solid #d6d8db; }
.pair-row { display:flex; justify-content:space-between; align-items:center; padding:8px 14px;
font-size:12px; border-bottom:1px solid #f4f5f7; }
.pair-row.active { background:#f4f5f7; }
.pair-name { color:#1a2434; font-weight:500; }
.pair-name b { color:#8e929b; font-weight:400; font-size:10px; display:block; }
.up { color:#dd3c44; font-weight:700; }
.down { color:#1375ec; font-weight:700; }
.center { flex:1; background:#ffffff; display:flex; flex-direction:column; }
.ticker { padding:16px 24px 10px; display:flex; align-items:baseline; gap:14px; border-bottom:1px solid #d6d8db; }
.ticker .sym { font-size:16px; font-weight:700; }
.ticker .price { font-size:30px; font-weight:700; color:#dd3c44; }
.ticker .chg { font-size:13px; color:#dd3c44; font-weight:700; }
.ticker .sub { font-size:11px; color:#565d6a; margin-left:auto; text-align:right; line-height:1.5; }
.chart { flex:1; margin:14px 24px; background:linear-gradient(180deg,#f4f5f7,#ffffff); border:1px solid #d6d8db;
border-radius:4px; position:relative; overflow:hidden; }
.chart svg { position:absolute; inset:0; }
.book { width:270px; background:#ffffff; display:flex; flex-direction:column; }
.book .bh { padding:10px 14px; font-size:11px; color:#8e929b; border-bottom:1px solid #d6d8db;
display:flex; justify-content:space-between; }
.row2 { display:flex; justify-content:space-between; padding:4px 14px; font-size:11px; }
.panel { padding:14px; border-top:1px solid #d6d8db; }
.quickrow { display:flex; gap:6px; margin:8px 0; }
.qfill { border:1px solid #d6d8db; border-radius:4px; padding:1px 8px; font-size:12px; height:28px;
display:flex; align-items:center; color:#1a2434; background:#ffffff; }
.buysell { display:flex; gap:8px; margin-top:8px; }
.buy { flex:1; background:#dd3c44; color:#ffffff; border-radius:4px; text-align:center; padding:10px 0;
font-size:13px; font-weight:700; }
.sell { flex:1; background:#1375ec; color:#ffffff; border-radius:4px; text-align:center; padding:10px 0;
font-size:13px; font-weight:700; }
</style></head>
<body>
<div class="app">
<header>
<span class="brand">Upbit</span>
<div class="navlinks"><span>Exchange</span><span>Investments</span><span>NFT</span><span>Support</span></div>
<div class="spacer"></div>
<div class="searchbox">Search markets</div>
</header>
<main>
<div class="pairs">
<div class="ph">KRW MARKET</div>
<div class="pair-row active"><span class="pair-name">BTC<b>Bitcoin</b></span><span class="up">142,300,000</span></div>
<div class="pair-row"><span class="pair-name">ETH<b>Ethereum</b></span><span class="down">5,214,000</span></div>
<div class="pair-row"><span class="pair-name">XRP<b>Ripple</b></span><span class="up">812</span></div>
<div class="pair-row"><span class="pair-name">SOL<b>Solana</b></span><span class="up">231,400</span></div>
<div class="pair-row"><span class="pair-name">ADA<b>Cardano</b></span><span class="down">612</span></div>
<div class="pair-row"><span class="pair-name">DOGE<b>Dogecoin</b></span><span class="up">198</span></div>
<div class="pair-row"><span class="pair-name">AVAX<b>Avalanche</b></span><span class="down">41,200</span></div>
</div>
<div class="center">
<div class="ticker">
<span class="sym">BTC/KRW</span>
<span class="price">142,300,000</span>
<span class="chg">+2.84%</span>
<span class="sub">24H High 143,900,000<br>24H Low 137,050,000</span>
</div>
<div class="chart">
<svg viewBox="0 0 600 220" preserveAspectRatio="none">
<polyline points="0,150 40,140 80,160 120,120 160,130 200,90 240,110 280,70 320,95 360,60 400,80 440,50 480,65 520,40 560,55 600,30"
fill="none" stroke="#dd3c44" stroke-width="2"/>
</svg>
</div>
<div class="panel">
<div style="font-size:12px;color:#565d6a;">Quick fill</div>
<div class="quickrow">
<span class="qfill">10%</span><span class="qfill">25%</span><span class="qfill">50%</span><span class="qfill">100%</span>
</div>
<div class="buysell"><div class="buy">Buy</div><div class="sell">Sell</div></div>
</div>
</div>
<div class="book">
<div class="bh"><span>Price(KRW)</span><span>Qty(BTC)</span></div>
<div class="row2" style="color:#1375ec;"><span>142,340,000</span><span>0.042</span></div>
<div class="row2" style="color:#1375ec;"><span>142,330,000</span><span>0.118</span></div>
<div class="row2" style="color:#1375ec;"><span>142,320,000</span><span>0.203</span></div>
<div class="row2" style="background:#f4f5f7; font-weight:700;"><span>142,300,000</span><span>—</span></div>
<div class="row2" style="color:#dd3c44;"><span>142,290,000</span><span>0.301</span></div>
<div class="row2" style="color:#dd3c44;"><span>142,280,000</span><span>0.087</span></div>
<div class="row2" style="color:#dd3c44;"><span>142,270,000</span><span>0.145</span></div>
<div class="bh" style="margin-top:auto;"><span>Support</span><span>Notice</span></div>
</div>
</main>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #cee7e0; color: #003a48;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #cee7e0; color: #003a48;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.25px; margin: 0; color: #003a48; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #003a48; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: transparent; color: #003a48;
border: 1px solid #003a48; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #33616d;
border: 1px solid #9abcba; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #9574df; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#cee7e0; color:#003a48; font-family:'DM Sans', 'Be Vietnam Pro', sans-serif; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#fff;}
.logo{font-family:'Be Vietnam Pro','DM Sans',sans-serif;font-size:20px;font-weight:700;color:#003a48;}
.navlinks{display:flex;gap:22px;font-size:15px;font-weight:500;}
.navlinks .active{color:#003a48;border-bottom:2px solid #003a48;padding-bottom:22px;}
.navlinks .inactive{color:#9ca3af;}
.hero{height:220px;display:flex;background:#cee7e0;}
.herotext{width:48%;padding:0 32px;display:flex;flex-direction:column;justify-content:center;}
.herotext h1{font-family:'Be Vietnam Pro','DM Sans',sans-serif;font-size:30px;font-weight:700;letter-spacing:-0.5px;margin:0 0 10px;line-height:1.25;}
.herotext p{font-size:15px;color:#33616d;margin:0 0 14px;max-width:300px;}
.herocta{width:fit-content;background:#003a48;color:#fff;font-size:16px;font-weight:600;padding:14px 24px;border-radius:8px;}
.heroimg{width:52%;position:relative;overflow:hidden;}
.diaper{position:absolute;right:110px;top:50px;width:140px;height:100px;background:#fff;border-radius:16px;box-shadow:0 4px 14px rgba(0,0,0,0.08);}
.diaper:before{content:'';position:absolute;left:20px;top:30px;width:100px;height:40px;border-radius:9999px;background:#9574df;opacity:0.25;}
.grid{display:flex;gap:14px;padding:16px 32px 0;}
.card{width:206px;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.thumb{height:110px;border-radius:12px 12px 0 0;position:relative;background:#f3f3f3;}
.badge{position:absolute;top:8px;left:8px;background:#9574df;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:4px 8px;border-radius:4px;}
.badge.sale{background:#ec4899;}
.body{padding:12px 14px 14px;}
.ptitle{font-size:16px;font-weight:600;}
.pprice{font-size:16px;margin-top:4px;}
.tags{display:flex;gap:8px;padding:12px 32px 0;}
.tag{background:#f3f3f3;color:#33616d;font-size:12px;padding:8px 16px;border-radius:9999px;}
.tag.active{background:#003a48;color:#fff;}
.footer{position:absolute;bottom:0;left:0;right:0;height:36px;background:#003a48;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:12px;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Rascal Friends</div>
<div class="navlinks"><div class="active">Diapers</div><div class="inactive">Wipes</div><div class="inactive">Training Pants</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Premium care, plainly stated.</h1>
<p>Rascals Premium Diapers — no cutesy language, just quality that works.</p>
<div class="herocta">Shop Diapers</div>
</div>
<div class="heroimg"><div class="diaper"></div></div>
</div>
<div class="tags"><div class="tag active">All Sizes</div><div class="tag">Newborn</div><div class="tag">Size 3</div><div class="tag">Size 5</div></div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge">New</div></div><div class="body"><div class="ptitle">Premium Diapers, Size 3</div><div class="pprice">$32.99</div></div></div>
<div class="card"><div class="thumb"><div class="badge sale">Sale</div></div><div class="body"><div class="ptitle">Sensitive Wipes, 6-pack</div><div class="pprice">$18.99</div></div></div>
<div class="card"><div class="thumb"></div><div class="body"><div class="ptitle">Overnight Diapers, Size 4</div><div class="pprice">$28.99</div></div></div>
</div>
<div class="footer"><span>© Rascal + Friends</span><span>Subscribe & Save Support</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fd5744; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fd5744; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #f86453; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #fd5744; color: #000000;
border: 1px solid #f86453; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #fd5744; color: #f5f5f5;
border: 1px solid #fc7060; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #fc5946; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif; }
* { box-sizing: border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #f0f0f0; }
.brand { font-size:18px; font-weight:700; }
.search { flex:1; max-width:280px; margin:0 24px; background:#f0f0f0; border-radius:9999px; height:36px;
display:flex; align-items:center; padding:0 16px; font-size:13px; color:#6d6d6d; }
.navbtn { background:#000000; color:#fff; border-radius:9999px; padding:8px 16px; font-size:13px; font-weight:700; }
.cats { display:flex; gap:8px; padding:14px 32px 6px; }
.cat { background:#f0f0f0; color:#545454; border-radius:9999px; padding:6px 12px; font-size:12px; font-weight:700; }
.cat.on { background:#000000; color:#ffffff; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:14px 32px 24px; }
.card { display:flex; flex-direction:column; gap:6px; }
.thumb { height:100px; border-radius:8px; background:linear-gradient(145deg,#ffe2dc,#fd5744); position:relative; }
.thumb .flag { position:absolute; top:6px; left:6px; background:#fd5744; color:#fff; font-size:10px; font-weight:700; padding:2px 5px; border-radius:4px; }
.name { font-size:12px; color:#6d6d6d; }
.title { font-size:14px; font-weight:700; line-height:1.3; }
.bar { background:#f0f0f0; height:6px; border-radius:9999px; overflow:hidden; margin-top:2px; }
.bar .fill { height:100%; background:#fd5744; }
.pct { font-size:13px; font-weight:700; color:#fd5744; }
.days { font-size:11px; color:#6d6d6d; }
</style></head>
<body>
<nav>
<span class="brand">Tumblbug</span>
<span class="search">Search projects, creators</span>
<span class="navbtn">Start a project</span>
</nav>
<div class="cats">
<span class="cat on">Popular</span>
<span class="cat">New</span>
<span class="cat">Ending soon</span>
<span class="cat">Publishing</span>
<span class="cat">Music</span>
</div>
<div class="grid">
<div class="card"><div class="thumb"><span class="flag">NEW</span></div><span class="name">Studio Marlowe</span><span class="title">A hand-inked art book</span><div class="bar"><div class="fill" style="width:82%"></div></div><span class="pct">82% funded</span><span class="days">14 days left</span></div>
<div class="card"><div class="thumb"></div><span class="name">Analog Sound Co.</span><span class="title">First vinyl EP release</span><div class="bar"><div class="fill" style="width:152%"></div></div><span class="pct">152% funded</span><span class="days">3 days left</span></div>
<div class="card"><div class="thumb"><span class="flag">END</span></div><span class="name">Table Nine Games</span><span class="title">Cooperative board game</span><div class="bar"><div class="fill" style="width:61%"></div></div><span class="pct">61% funded</span><span class="days">1 day left</span></div>
<div class="card"><div class="thumb"></div><span class="name">Paper Crane Films</span><span class="title">Short documentary project</span><div class="bar"><div class="fill" style="width:38%"></div></div><span class="pct">38% funded</span><span class="days">20 days left</span></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #efecec; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #efecec; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #7f9c90; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #009d85; color: #ffffff;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #ffffff; color: #40524a;
border: 1px solid #009d85; border-radius: 9999px;
padding: 12px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #dedede; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #7f9c90; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #c0d8a5; color: #40524a;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#efecec; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; color:#2b2b2b;
}
*{box-sizing:border-box;}
.nav{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#efecec;}
.logo{font-size:20px;font-weight:700;color:#40524a;}
.navlinks{display:flex;gap:24px;font-size:13px;color:#40524a;}
.cta{background:#009d85;color:#fff;border-radius:999px;padding:11px 20px;font-size:12px;font-weight:700;}
.hero{display:flex;gap:0;padding:0 32px 20px;}
.hero-copy{width:400px;padding-top:24px;padding-right:24px;}
.hero-title{font-size:40px;font-weight:700;line-height:1.08;color:#40524a;margin-bottom:14px;}
.hero-sub{font-size:15px;line-height:1.55;color:#556;margin-bottom:16px;max-width:340px;}
.btn-main{display:inline-block;background:#009d85;color:#fff;border-radius:999px;padding:13px 26px;font-size:13px;font-weight:700;}
.hero-visual{flex:1;height:230px;border-radius:20px;background:linear-gradient(135deg,#c0d8a5 0%,#40524a 100%);position:relative;margin-top:16px;}
.petal{position:absolute;border-radius:50%;}
.p1{width:70px;height:70px;background:#ffec86;top:24px;left:30px;}
.p2{width:50px;height:50px;background:#f8d9e0;bottom:20px;right:60px;}
.p3{width:36px;height:36px;background:#dccec2;top:70px;right:30px;}
.cert{position:absolute;bottom:14px;left:14px;background:rgba(255,255,255,0.9);border-radius:999px;padding:5px 12px;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#40524a;}
.section{padding:6px 32px 0;}
.section-title{font-size:18px;font-weight:700;color:#40524a;margin-bottom:14px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.card{background:#fff;border-radius:20px;padding:14px;box-shadow:0 2px 8px rgba(64,82,74,.08);}
.card-img{height:86px;border-radius:14px;margin-bottom:10px;background:linear-gradient(160deg,#f8d9e0,#c0d8a5);}
.card-name{font-size:13px;font-weight:700;margin-bottom:4px;color:#2b2b2b;}
.card-tag{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#009d85;font-weight:700;margin-bottom:6px;}
.card-price{font-size:13px;font-weight:700;color:#40524a;}
</style>
<div class="nav">
<div class="logo">Earth Mama</div>
<div class="navlinks"><span>Pregnancy</span><span>Baby</span><span>Mom Care</span><span>Bundles</span><span>Our Story</span></div>
<div class="cta">Shop Bestsellers</div>
</div>
<div class="hero">
<div class="hero-copy">
<div class="hero-title">Organic care for the whole journey.</div>
<div class="hero-sub">Herbalist-crafted belly oils, nipple butters, and baby washes — safe, gentle, and third-party certified.</div>
<div class="btn-main">Shop Pregnancy Essentials</div>
</div>
<div class="hero-visual">
<div class="petal p1"></div><div class="petal p2"></div><div class="petal p3"></div>
<div class="cert">USDA Organic</div>
</div>
</div>
<div class="section">
<div class="section-title">Loved By Growing Families</div>
<div class="grid">
<div class="card"><div class="card-img"></div><div class="card-tag">Pregnancy</div><div class="card-name">Organic Belly Butter</div><div class="card-price">$16.99</div></div>
<div class="card"><div class="card-img"></div><div class="card-tag">Baby</div><div class="card-name">Calming Lavender Baby Wash</div><div class="card-price">$12.99</div></div>
<div class="card"><div class="card-img"></div><div class="card-tag">Mom Care</div><div class="card-name">Postpartum Sitz Bath Herbs</div><div class="card-price">$14.99</div></div>
<div class="card"><div class="card-img"></div><div class="card-tag">Bundle</div><div class="card-name">New Mama Starter Kit</div><div class="card-price">$48.00</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.45; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 330; line-height: 1.45; letter-spacing: -0.14px; margin: 0; color: #666666; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 480; line-height: 1.4; letter-spacing: -0.10px; background: #000000; color: #ffffff;
border: none; border-radius: 50px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 480; line-height: 1.4; letter-spacing: -0.10px; background: #ffffff; color: #000000;
border: 1px solid #000000; border-radius: 50px;
padding: 8px 18px 10px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 320; line-height: 1.45; letter-spacing: -0.26px; background: #ffffff; color: #000000;
border: 1px solid #bfbfbf; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #666666; opacity: 0.8; }
.badge {
font-size: 9px; font-weight:700; letter-spacing:0.04em; background: #dbdbdb; color: #000000;
border-radius: 50px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
/* 손으로 오려 붙인 듯한 파스텔 색블록 — 실제 각도를 살짝 어긋나게 회전시켜
"종이를 손으로 잘라 붙였다"는 느낌을 낸다. 배경이라 pointer-events 는
필요 없고(카드 자체가 클릭 대상), 흑백 그리드 위에 얹히는 순서만 중요. */
.paper { position:absolute; border-radius:28px; }
.p1 { width:260px; height:220px; left:-60px; top:-40px; background:#dceeb1; transform:rotate(-6deg); }
.p2 { width:230px; height:190px; right:-50px; top:60px; background:#c5b0f4; transform:rotate(8deg); }
.p3 { width:300px; height:170px; left:120px; bottom:-70px; background:#efd4d4; transform:rotate(4deg); }
.p4 { width:180px; height:180px; right:100px; bottom:-60px; background:#c8e6cd; transform:rotate(-9deg); }
nav { position:relative; z-index:2; height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #e6e6e6; background:#ffffff; }
.brand { font-size:18px; font-weight:700; margin:0; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:28px; color:#000; opacity:0.6; font-size:14px; }
.btn-primary { background:#000000; color:#ffffff; border:none; border-radius:999px;
padding:10px 22px; font-weight:600; font-size:14px; white-space:nowrap; cursor:default; }
.btn-secondary { background:#ffffff; color:#000000; border:1.5px solid #000000; border-radius:999px;
padding:9px 22px; font-weight:600; font-size:14px; white-space:nowrap; cursor:default; }
.hero { position:relative; z-index:2; padding:64px 40px 40px; text-align:center;
display:flex; flex-direction:column; align-items:center; gap:18px; }
.badge { background:#000000; color:#ffffff; border-radius:999px; padding:4px 12px;
font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; }
.hero h1 { font-size:52px; font-weight:340; letter-spacing:-1.4px; margin:0; max-width:680px; line-height:1.02; }
.hero p { font-size:16px; color:#3a3a3a; margin:0; max-width:480px; }
.row { display:flex; gap:12px; align-items:center; justify-content:center; }
.cards { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr);
gap:20px; padding:16px 40px 40px; }
.card { position:relative; border:1px solid #000000; border-radius:20px; padding:22px;
background:#ffffff; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.card::before { content:''; position:absolute; top:-30px; right:-30px; width:90px; height:90px;
border-radius:24px; opacity:0.9; }
.card.c1::before { background:#dceeb1; transform:rotate(-10deg); }
.card.c2::before { background:#efd4d4; transform:rotate(12deg); }
.card.c3::before { background:#c5b0f4; transform:rotate(-6deg); }
.card .tag { position:relative; font-size:11px; font-weight:700; text-transform:uppercase;
letter-spacing:0.05em; color:#000; opacity:0.55; }
.card h3 { position:relative; font-size:18px; font-weight:700; margin:0; }
.card p { position:relative; font-size:13px; color:#3a3a3a; margin:0; line-height:1.45; }
footer { position:relative; z-index:2; border-top:1px solid #e6e6e6; padding:16px 40px;
display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#3a3a3a;
background:#ffffff; }
</style></head>
<body>
<div class="paper p1"></div>
<div class="paper p2"></div>
<div class="paper p3"></div>
<div class="paper p4"></div>
<nav>
<p class="brand">Figma</p>
<div class="navlinks"><span>Design</span><span>Dev Mode</span><span>Community</span><span>Pricing</span></div>
<button class="btn-primary">Get started</button>
</nav>
<section class="hero">
<span class="badge">New</span>
<h1>Design that feels right</h1>
<p>A tool for serious work, made by people who like color.</p>
<div class="row">
<button class="btn-primary">Get started</button>
<button class="btn-secondary">See plans</button>
</div>
</section>
<section class="cards">
<div class="card c1"><span class="tag">Design</span><h3>One canvas, every idea</h3><p>Sketch, prototype, and hand off — without leaving the file.</p></div>
<div class="card c2"><span class="tag">Dev Mode</span><h3>Ship what you designed</h3><p>Inspect real values and generate ready-to-use code.</p></div>
<div class="card c3"><span class="tag">Community</span><h3>Made by people who like color</h3><p>Templates, plugins, and widgets from the community.</p></div>
</section>
<footer>
<span>© Figma</span>
<span>Figma · Product · Company · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #282828;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #282828;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.33; margin: 0; color: #282828; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #747474; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; background: #b81d48; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.33; background: #f8f8f8; color: #282828;
border: 1px solid #b81d48; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #f8f8f8; color: #444444;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #747474; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.2px; background: #ef432d; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f8f8f8; color:#444444; box-sizing:border-box;
font-family:'Inter',-apple-system,system-ui,'Segoe UI',Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#f8f8f8; border-bottom:1px solid #ebebeb; display:flex; align-items:center;
justify-content:space-between; padding:0 36px; }
.brand { font-size:20px; font-weight:600; color:#282828; }
.navlinks { display:flex; gap:22px; font-size:14px; font-weight:500; }
.navlinks span.active { color:#282828; border-bottom:2px solid #b81d48; padding-bottom:20px; }
.navlinks span:not(.active) { color:#747474; }
.search-box { width:190px; height:34px; border-radius:8px; border:1px solid #ebebeb; background:#fff; font-size:12px; color:#747474;
display:flex; align-items:center; padding:0 14px; }
.chips { display:flex; gap:10px; padding:12px 36px; }
.chip { background:#eeeeee; border:1px solid #ebebeb; border-radius:9999px; font-size:13px; color:#444; padding:6px 16px; }
.chip.active { background:#b81d48; color:#fff; }
.hero { height:150px; background:#282828; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.hero h1 { color:#f8f8f8; font-size:28px; font-weight:600; margin:0 0 8px; max-width:420px; letter-spacing:-0.25px; }
.hero p { color:#b2b2b2; font-size:14px; margin:0; }
.btn-crimson { background:#b81d48; color:#fff; font-size:15px; font-weight:500; padding:12px 24px; border-radius:8px; }
.books-stack { display:flex; }
.book { width:50px; height:76px; margin-left:-14px; border-radius:4px; background:linear-gradient(160deg,#3d4246,#282828); border:1px solid #555; }
.book:first-child { margin-left:0; }
.grid { display:flex; gap:16px; padding:16px 36px 0; }
.card { flex:1; background:#ffffff; border:1px solid #e8e9eb; border-radius:12px; padding:16px; position:relative; }
.card .imgbox { height:96px; background:#eeeeee; border-radius:8px; margin-bottom:8px; }
.badge { position:absolute; top:10px; left:10px; font-size:11px; font-weight:600; text-transform:uppercase; color:#fff;
padding:2px 8px; border-radius:4px; }
.badge.sale { background:#ef432d; }
.badge.best { background:#2e9e7b; }
.card .title { font-size:16px; font-weight:500; color:#282828; margin-bottom:2px; }
.card .author { font-size:13px; color:#747474; margin-bottom:6px; }
.card .price { font-size:16px; color:#b81d48; }
footer { position:absolute; bottom:0; left:0; right:0; height:90px; background:#282828; color:#f8f8f8; display:flex;
align-items:center; justify-content:space-between; padding:0 36px; }
footer .col { font-size:12px; color:#b2b2b2; line-height:1.9; }
footer .col b { display:block; color:#f8f8f8; margin-bottom:3px; }
.wrap { position:relative; height:640px; }
</style>
</head>
<body>
<div class="wrap">
<nav>
<div class="brand">Downpour</div>
<div class="navlinks"><span class="active">Audiobooks</span><span>Fiction</span><span>Nonfiction</span><span>Kids</span></div>
<div class="search-box">Search titles...</div>
</nav>
<div class="chips"><div class="chip active">New Releases</div><div class="chip">Bestsellers</div><div class="chip">Mystery</div><div class="chip">Sci-Fi</div></div>
<div class="hero">
<div>
<h1>Audiobooks, without the subscription tax.</h1>
<p>Own it once. Listen anywhere, on any device.</p>
</div>
<div style="display:flex; align-items:center; gap:20px;">
<div class="books-stack"><div class="book"></div><div class="book"></div><div class="book"></div></div>
<a class="btn-crimson">Browse Library</a>
</div>
</div>
<div class="grid">
<div class="card"><span class="badge sale">Sale</span><div class="imgbox"></div><div class="title">The Quiet Harbor</div><div class="author">M. Callahan</div><div class="price">$14.99</div></div>
<div class="card"><span class="badge best">Bestseller</span><div class="imgbox"></div><div class="title">Wires and Wind</div><div class="author">R. Okafor</div><div class="price">$18.99</div></div>
<div class="card"><div class="imgbox"></div><div class="title">A History of Rain</div><div class="author">L. Bergstrom</div><div class="price">$16.99</div></div>
<div class="card"><div class="imgbox"></div><div class="title">Nightshift Diaries</div><div class="author">J. Marsh</div><div class="price">$12.99</div></div>
</div>
<footer>
<div class="col"><b>Company</b>About<br>Careers</div>
<div class="col"><b>Support</b>Help Center<br>Device Setup</div>
<div class="col"><b>Downpour</b>© Own your library.</div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fffaf7; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fffaf7; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.5px; background: #d74015; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: 0.5px; background: #fffaf7; color: #d74015;
border: 1px solid #d74015; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fffaf7; color: #272d45;
border: 1px solid #c4c0be; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.3px; background: #872626; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fffaf7; font-family:'Scto Grotesk A Medium','Helvetica Neue',sans-serif; color:#272d45; }
*{box-sizing:border-box;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.logo{font-family:Georgia,serif;font-size:26px;color:#121212;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:500;letter-spacing:.4px;text-transform:uppercase;color:#272d45;}
.navlinks .active{color:#d74015;border-bottom:2px solid #d74015;padding-bottom:4px;}
.hero{height:230px;background:#f4f4f6;display:flex;align-items:center;padding:0 30px;gap:30px;}
.herotext{width:340px;}
.herotext h1{font-family:Georgia,serif;font-size:40px;font-weight:400;letter-spacing:-1px;line-height:1.15;margin:0 0 12px;color:#121212;}
.herotext p{font-size:14px;color:#676986;margin:0 0 18px;}
.cta{display:inline-block;background:#d74015;color:#fff;font-size:14px;font-weight:500;letter-spacing:.4px;text-transform:uppercase;padding:14px 28px;border-radius:8px;}
.circles{flex:1;height:180px;position:relative;}
.circ{position:absolute;border-radius:9999px;}
.rowlabel{padding:16px 30px 8px;font-family:Georgia,serif;font-size:20px;color:#121212;}
.grid{display:flex;gap:14px;padding:0 30px;}
.card{width:196px;background:#fff;border-radius:12px;padding:16px;position:relative;}
.thumb{height:90px;border-radius:8px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;}
.jar{width:44px;height:44px;border-radius:9999px;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.3px;border-radius:4px;padding:2px 6px;}
.ptitle{font-size:16px;font-weight:500;color:#121212;}
.pprice{font-size:14px;color:#272d45;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Tower 28</div>
<div class="navlinks"><div class="active">Blush</div><div>Lip</div><div>Setting Spray</div><div>Face</div></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Clean makeup,<br>California sunlight.</h1>
<p>Vegan, cruelty-free color that wears like second skin.</p>
<div class="cta">Shop Best Sellers</div>
</div>
<div class="circles">
<div class="circ" style="top:10px;left:40px;width:80px;height:80px;background:#d74015;"></div>
<div class="circ" style="top:60px;left:140px;width:60px;height:60px;background:#efe3f3;"></div>
<div class="circ" style="top:0;left:220px;width:100px;height:100px;background:#f9e5fc;"></div>
<div class="circ" style="top:90px;left:10px;width:40px;height:40px;background:#bcdbff;"></div>
</div>
</div>
<div class="rowlabel">Best Sellers</div>
<div class="grid">
<div class="card"><span class="badge" style="background:#b2f9e9;color:#121212">Clean</span><div class="thumb"><div class="jar" style="background:#d74015"></div></div><div class="ptitle">BeachPlease Cream Blush</div><div class="pprice">$20.00</div></div>
<div class="card"><span class="badge" style="background:#872626;color:#fff">Sale</span><div class="thumb"><div class="jar" style="background:#872626"></div></div><div class="ptitle">JuiceBalm Lip Tint</div><div class="pprice">$18.00</div></div>
<div class="card"><div class="thumb"><div class="jar" style="background:#efe3f3"></div></div><div class="ptitle">MakeWaves Setting Spray</div><div class="pprice">$24.00</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefe; color: #122940;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefe; color: #122940;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-weight: 400; line-height: 1.2; margin: 0; color: #122940; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #686868; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 1px; background: #122940; color: #fefefe;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 1px; background: #f7f8fb; color: #122940;
border: 1px solid #122940; border-radius: 8px;
padding: 14px 28px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fefefe; color: #122940;
border: 1px solid #e0e0e0; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #686868; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 1px; background: #dee3f0; color: #122940;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fefefe; font-family:'Montserrat',system-ui,sans-serif; color:#2b3d51; }
*{box-sizing:border-box;}
.nav{height:60px;background:#122940;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-family:'Brighton Std',Georgia,serif;font-size:20px;color:#fefefe;}
.navlinks{display:flex;gap:22px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fefefe;}
.hero{height:262px;display:flex;align-items:center;padding:0 40px;background:#f7f8fb;}
.heroText{width:440px;}
.h1{font-family:'Brighton Std',Georgia,serif;font-size:34px;font-weight:400;line-height:1.15;color:#122940;margin:0 0 14px;}
.sub{font-size:14px;color:#2b3d51;line-height:1.5;margin:0 0 20px;width:370px;}
.cta{display:inline-flex;align-items:center;justify-content:center;width:190px;height:46px;background:#122940;color:#fefefe;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;border-radius:8px;}
.unit{position:relative;width:340px;height:200px;}
.acbody{position:absolute;left:80px;top:44px;width:200px;height:110px;border-radius:8px;background:linear-gradient(135deg,#f2a682,#adc4eb);}
.vent{position:absolute;left:100px;top:74px;width:160px;height:44px;border-radius:4px;background:#122940;opacity:0.15;}
.sec{padding:22px 40px 0;}
.secTitle{font-family:'Brighton Std',Georgia,serif;font-size:20px;color:#122940;margin-bottom:14px;}
.grid{display:flex;gap:14px;}
.card{width:198px;background:#f2f4f7;border-radius:8px;padding:12px;position:relative;}
.thumb{height:96px;border-radius:6px;margin-bottom:10px;}
.tag{position:absolute;top:22px;left:22px;font-size:9px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;padding:3px 8px;border-radius:8px;}
.t1{background:#fff2d9;color:#122940;}
.t2{background:#e5ede0;color:#122940;}
.pname{font-size:13px;font-weight:600;color:#122940;margin:0 0 4px;}
.pprice{font-size:14px;font-weight:700;color:#ec5039;}
</style>
<div class="nav">
<div class="logo">Windmill Air</div>
<div class="navlinks"><span>Cooling</span><span>Heating</span><span>Air Quality</span></div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Air care that belongs in your living room.</div>
<div class="sub">Furniture-grade climate control, designed to be seen, not hidden.</div>
<div class="cta">Shop The Collection</div>
</div>
<div class="unit"><div class="acbody"></div><div class="vent"></div></div>
</div>
<div class="sec">
<div class="secTitle">Shop by Season</div>
<div class="grid">
<div class="card"><span class="tag t1">Heating</span><div class="thumb" style="background:linear-gradient(135deg,#f2a682,#ec5039);"></div><div class="pname">The Cozy Space Heater</div><div class="pprice">$349</div></div>
<div class="card"><span class="tag t2">Air Quality</span><div class="thumb" style="background:linear-gradient(135deg,#b2c8a1,#122940);"></div><div class="pname">Purifier + Fan</div><div class="pprice">$429</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#adc4eb,#122940);"></div><div class="pname">The Smart AC Unit</div><div class="pprice">$499</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #202020;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #202020;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.33; margin: 0; color: #202020; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #888888; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #0094c8; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #fafafa; color: #0094c8;
border: 1px solid #0094c8; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fafafa; color: #202020;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #888888; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #56b6ea; color: #000000;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#fafafa; font-family:'Lato',Arial,sans-serif; color:#555555; }
*{box-sizing:border-box;}
.nav{height:56px;background:#fff;border-bottom:1px solid #d0d0d0;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#0094c8;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:700;color:#202020;}
.searchpill{width:180px;height:32px;border-radius:9999px;border:1px solid #d0d0d0;background:#fafafa;display:flex;align-items:center;padding:0 14px;font-size:11px;color:#888888;}
.hero{height:222px;background:linear-gradient(120deg,#fafafa 55%,#e6f6fb 100%);display:flex;align-items:center;padding:0 32px;}
.heroText{width:420px;}
.h1{font-size:29px;font-weight:700;line-height:1.25;color:#202020;margin:0 0 12px;}
.sub{font-size:14px;line-height:1.5;color:#555555;margin:0 0 18px;max-width:360px;}
.btn{display:inline-block;background:#0094c8;color:#fff;font-size:13px;font-weight:700;padding:12px 26px;border-radius:8px;}
.figWrap{margin-left:auto;width:150px;height:170px;position:relative;}
.fig{position:absolute;width:90px;height:140px;background:linear-gradient(160deg,#0094c8,#d1aa00);border-radius:14px;top:15px;left:30px;}
.star{position:absolute;width:24px;height:24px;border-radius:50%;background:#c3d825;top:0;right:10px;}
.sec{padding:20px 32px 0;}
.secTitle{font-size:17px;font-weight:700;color:#202020;margin-bottom:14px;}
.grid{display:flex;gap:12px;}
.card{width:224px;background:#fff;border:1px solid #d0d0d0;border-radius:8px;padding:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:#c9171e;color:#fff;font-size:9px;font-weight:700;padding:2px 8px;border-radius:4px;}
.thumb{height:92px;background:#f0f0f0;border-radius:6px;margin-bottom:8px;}
.pname{font-size:13px;font-weight:600;color:#202020;margin:0 0 4px;}
.pprice{font-size:13px;font-weight:700;color:#0094c8;}
</style>
<div class="nav">
<div class="logo">Tokyo Otaku Mode</div>
<div class="navlinks"><div>Figures</div><div>Apparel</div><div>Manga</div><div>Pre-Orders</div></div>
<div class="searchpill">Search figures, series…</div>
</div>
<div class="hero">
<div class="heroText">
<div class="h1">Straight from Tokyo, to your shelf.</div>
<div class="sub">Licensed anime figures and merchandise, sourced and shipped by fans who get it.</div>
<div class="btn">Shop New Arrivals</div>
</div>
<div class="figWrap"><div class="fig"></div><div class="star"></div></div>
</div>
<div class="sec">
<div class="secTitle">Trending Figures</div>
<div class="grid">
<div class="card"><div class="badge">Pre-Order</div><div class="thumb" style="background:linear-gradient(135deg,#0094c8,#c3d825);"></div><div class="pname">Starlight Guardian Ver. A</div><div class="pprice">$189.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#d1aa00,#0094c8);"></div><div class="pname">Nendoroid Fox Spirit</div><div class="pprice">$54.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#c3d825,#0094c8);"></div><div class="pname">Ronin Blade Scale Figure</div><div class="pprice">$149.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#f08300,#0094c8);"></div><div class="pname">Acrylic Keychain Set</div><div class="pprice">$19.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.35; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #313131; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #313131;
border: 1px solid #313131; border-radius: 8px;
padding: 13px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,'Segoe UI',Arial,sans-serif; color:#1f1f1f; }
*{box-sizing:border-box;}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:19px;font-weight:600;letter-spacing:.5px;}
.navlinks{display:flex;gap:22px;font-size:14px;font-weight:500;text-transform:uppercase;color:#313131;}
.search{width:170px;height:36px;border-radius:9999px;background:#f2f2f2;display:flex;align-items:center;padding:0 16px;font-size:12px;color:#8a8a8a;}
.hero{height:250px;display:flex;background:#313131;}
.herotext{width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 40px;}
.herotext h1{font-size:28px;font-weight:600;color:#fff;margin:0 0 14px;line-height:1.3;}
.herotext p{font-size:14px;color:#c9c9c9;margin:0 0 20px;max-width:300px;line-height:1.5;}
.btn{display:inline-block;background:#fff;color:#313131;font-size:14px;font-weight:600;padding:14px 28px;border-radius:12px;width:fit-content;}
.heroimg{width:54%;position:relative;background:#1f1f1f;}
.heroimg .device{position:absolute;left:100px;top:40px;width:40px;height:170px;border-radius:20px;background:linear-gradient(160deg,#4a4a4a,#1f1f1f);}
.heroimg .device:before{content:'';position:absolute;left:6px;top:14px;width:28px;height:8px;background:#666;border-radius:4px;}
.sec{padding:22px 40px 0;}
.sectitle{font-size:19px;font-weight:600;margin-bottom:16px;}
.grid{display:flex;gap:16px;}
.card{width:206px;border:1px solid #e0e0e0;border-radius:12px;padding:10px;}
.thumb{height:110px;border-radius:8px;margin-bottom:10px;}
.pname{font-size:14px;font-weight:600;}
.stars{color:#f5c518;font-size:12px;margin-top:4px;}
.pprice{font-size:13px;color:#313131;font-weight:600;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Manscaped</div>
<div class="navlinks"><span>Trimmers</span><span>Body Care</span><span>Bundles</span></div>
<div class="search">Search products</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Grooming tools, engineered like tools.</h1>
<p>Precision trimmers and body care built with the confidence of a hardware company.</p>
<div class="btn">Shop Trimmers</div>
</div>
<div class="heroimg"><div class="device"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#313131,#e0e0e0);"></div><div class="pname">The Lawn Mower 5.0</div><div class="stars">★★★★★</div><div class="pprice">$69.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#4a4a4a,#e0e0e0);"></div><div class="pname">The Weed Whacker Trimmer</div><div class="stars">★★★★★</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#1f1f1f,#e0e0e0);"></div><div class="pname">The Complete Body Kit</div><div class="stars">★★★★☆</div><div class="pprice">$89.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f7f6f4; color: #1e1e1e;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f7f6f4; color: #1e1e1e;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; color: #1e1e1e; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6c7079; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #14293a; color: #ffffff;
border: none; border-radius: 4px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: transparent; color: #14293a;
border: 1px solid #14293a; border-radius: 4px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1e1e1e;
border: 1px solid #d8d6d2; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6c7079; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.3px; background: #38871f; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f7f6f4; color:#1e1e1e; box-sizing:border-box;
font-family:'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:72px; background:#ffffff; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; border-bottom:1px solid #d8d6d2; }
.brand { font-family:'Questrial', 'IBM Plex Sans', sans-serif; font-size:22px; font-weight:400;
letter-spacing:0.5px; color:#1e1e1e; margin:0; }
.navlinks { display:flex; gap:28px; }
.navlinks span { font-size:14px; font-weight:500; color:#1e1e1e; }
.navicons { display:flex; gap:16px; align-items:center; font-size:15px; color:#6c7079; }
.navicons .cta { background:#14293a; color:#ffffff; border-radius:4px; padding:9px 18px; font-size:13px;
font-weight:600; letter-spacing:0.2px; }
.hero { height:172px; background:#14293a; color:#ffffff; display:flex; flex-direction:column;
justify-content:center; padding:0 44px; gap:6px; }
.hero .over { font-size:12px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:#b8b6b6; }
.hero h1 { font-family:'Questrial', 'IBM Plex Sans', sans-serif; font-size:38px; font-weight:400;
letter-spacing:-0.4px; line-height:1.1; margin:2px 0; max-width:520px; }
.hero p { font-size:14px; color:#d8d6d2; margin:0 0 8px; max-width:460px; }
.hero button { align-self:flex-start; background:#ffffff; color:#14293a; border:none; border-radius:4px;
padding:12px 24px; font-size:14px; font-weight:600; letter-spacing:0.3px; cursor:default; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:18px 40px; }
.card { background:#ffffff; border:1px solid #d8d6d2; border-radius:8px; padding:14px; display:flex;
flex-direction:column; gap:6px; }
.thumb { position:relative; width:100%; height:104px; border-radius:6px; background:#f1f1f1; }
.t1 { background:linear-gradient(135deg,#dfe3e6,#9aa4ac 55%,#4c565e); }
.t2 { background:linear-gradient(135deg,#e5e0d6,#b4ac9a 55%,#6b6252); }
.t3 { background:linear-gradient(135deg,#dde7e3,#8fa89e 55%,#3f5a51); }
.badge { position:absolute; top:8px; right:8px; font-size:11px; font-weight:700; letter-spacing:0.3px;
text-transform:uppercase; padding:4px 8px; border-radius:4px; color:#ffffff; }
.badge.energy { background:#38871f; }
.badge.promo { background:#db0002; }
.card .title { font-size:16px; font-weight:600; margin:2px 0 0; }
.card .desc { font-size:13px; color:#5e5e5e; margin:0; line-height:1.4; }
footer { height:72px; background:#14293a; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 40px; }
.footcol span { display:block; font-size:12px; color:rgba(255,255,255,0.7); line-height:1.7; }
.footcol .head { font-size:12px; font-weight:600; color:#ffffff; margin-bottom:2px; }
</style></head>
<body>
<nav>
<p class="brand">Asko</p>
<div class="navlinks"><span>Laundry</span><span>Dishwashing</span><span>Cooking</span><span>Cooling</span></div>
<div class="navicons">⚲<span class="cta">Find a Retailer</span></div>
</nav>
<section class="hero">
<span class="over">Washing Machines</span>
<h1>Engineered for the long run</h1>
<p>Steel Seal drum construction and Active Drum wash motion, built to outlast the ordinary.</p>
<button>Explore the Range</button>
</section>
<section class="cards">
<div class="card">
<div class="thumb t1"><span class="badge energy">A+++</span></div>
<p class="title">W6098 Washing Machine</p>
<p class="desc">Steel Seal drum · Active Drum wash motion · 9 kg capacity</p>
</div>
<div class="card">
<div class="thumb t2"><span class="badge promo">New</span></div>
<p class="title">DFI644G Dishwasher</p>
<p class="desc">Pro Wash spray system · Fully integrated · 14 place settings</p>
</div>
<div class="card">
<div class="thumb t3"><span class="badge energy">A++</span></div>
<p class="title">HI1955G Induction Hob</p>
<p class="desc">Flush-mounted control panel · 4 cooking zones · Touch controls</p>
</div>
</section>
<footer>
<div class="footcol"><span class="head">Products</span><span>Laundry · Cooking</span></div>
<div class="footcol"><span class="head">Support</span><span>Warranty · Service</span></div>
<div class="footcol"><span class="head">Company</span><span>About Asko</span></div>
<div class="footcol"><span class="head">Asko</span><span>© Asko</span></div>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #515656;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #515656;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.25; margin: 0; color: #515656; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #777777; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 1.2px; background: #c52f24; color: #ffffff;
border: none; border-radius: 0px; padding: 12px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 1.2px; background: transparent; color: #515656;
border: 1px solid #c52f24; border-radius: 0px;
padding: 11px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; background: transparent; color: #515656;
border: 1px solid #d4d5d5; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #777777; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: 1.8px; background: transparent; color: #777777;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#eeebe9; color:#636969; font-family:'Formale-Grotesque',Arial,sans-serif; font-weight:300; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-size:16px;font-weight:400;letter-spacing:2px;text-transform:uppercase;color:#515656;}
.navlinks{display:flex;gap:26px;font-size:11px;font-weight:400;letter-spacing:1px;text-transform:uppercase;color:#636969;}
.hero{padding:20px 36px 30px;border-bottom:1px solid #d4d0ce;}
.kicker{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#c52f24;margin-bottom:14px;}
.hero h1{font-size:34px;font-weight:300;margin:0 0 14px;line-height:1.3;color:#515656;max-width:600px;}
.hero p{font-size:13px;color:#636969;margin:0;max-width:480px;line-height:1.7;}
.cities{display:flex;gap:24px;padding:16px 36px;font-size:12px;letter-spacing:0.5px;color:#636969;border-bottom:1px solid #d4d0ce;}
.cities span:first-child{color:#c52f24;}
.seclabel{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#636969;padding:20px 36px 14px;}
.rows{padding:0 36px;}
.exrow{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #d4d0ce;}
.exname{font-size:15px;font-weight:400;color:#515656;}
.explace{font-size:11px;color:#636969;letter-spacing:0.5px;}
.exdate{font-size:11px;color:#636969;background:#ffff80;padding:3px 10px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:11px;color:#777777;border-top:1px solid #d4d0ce;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Thaddaeus Ropac</div>
<div class="navlinks"><span>Exhibitions</span><span>Artists</span><span>Art Fairs</span><span>Publications</span></div>
</div>
<div class="hero">
<div class="kicker">Current Exhibition</div>
<h1>Works on the threshold of form and material.</h1>
<p>A new body of paintings and sculpture on view across our galleries, presented alongside a new monograph.</p>
</div>
<div class="cities"><span>Salzburg</span><span>Paris</span><span>London</span><span>Seoul</span></div>
<div class="seclabel">Exhibitions</div>
<div class="rows">
<div class="exrow"><span class="exname">Between Weather Systems</span><span class="explace">Paris — Pantin</span><span class="exdate">Through Nov 2</span></div>
<div class="exrow"><span class="exname">Studies for a Quiet Room</span><span class="explace">London — Ely House</span><span class="exdate">Opening Soon</span></div>
<div class="exrow"><span class="exname">Sediment and Light</span><span class="explace">Salzburg — Villa Kast</span><span class="exdate">Through Oct 18</span></div>
<div class="exrow"><span class="exname">New Works on Paper</span><span class="explace">Seoul</span><span class="exdate">Through Dec 5</span></div>
</div>
<div class="footer"><span>© Founded 1983</span><span>Press Inquiries</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #FFFFFF; color: #2C2C2C;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #FFFFFF; color: #2C2C2C;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.35; margin: 0; color: #2C2C2C; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.57; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; background: #28A99E; color: #FFFFFF;
border: none; border-radius: 9999px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; background: #FFFFFF; color: #28A99E;
border: 1px solid #28A99E; border-radius: 9999px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #FFFFFF; color: #2C2C2C;
border: 1px solid #cacaca; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.46; background: #F9F7F4; color: #4CAF7D;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#FFFFFF; color:#2C2C2C; box-sizing:border-box;
font-family:'Nunito','Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
* { box-sizing:border-box; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
.brand { font-size:19px; font-weight:800; color:#28A99E; }
.navlinks { display:flex; gap:22px; font-size:12px; color:#767676; font-weight:600; }
.navlinks span.on { color:#28A99E; }
.cart { background:#28A99E; color:#fff; border-radius:9999px; padding:8px 18px; font-size:12px; font-weight:700; }
.wrap { display:flex; height:518px; padding:0 36px; gap:32px; align-items:center; }
.photo { width:300px; height:88%; border-radius:28px; position:relative; overflow:hidden;
background:conic-gradient(from 45deg, #F07A5B 0deg 90deg, #F5C844 90deg 180deg, #B8A8D4 180deg 270deg, #7EC8E3 270deg 360deg); }
.photo::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.5) 0, transparent 40%),
radial-gradient(circle at 70% 70%, rgba(255,255,255,.4) 0, transparent 35%); }
.badge-new { position:absolute; top:16px; left:16px; background:#FFFFFF; color:#28A99E; font-size:11px; font-weight:700; padding:5px 12px; border-radius:9999px; }
.info { flex:1; display:flex; flex-direction:column; gap:14px; }
.cat { font-size:12px; color:#767676; font-weight:600; }
.info h1 { font-size:26px; font-weight:700; margin:0; }
.print-row { display:flex; gap:8px; }
.print { width:28px; height:28px; border-radius:9999px; }
.p1{background:#F07A5B}.p2{background:#F5C844}.p3{background:#B8A8D4}.p4{background:#7EC8E3}.p5{background:#28A99E}
.eco-strip { display:flex; gap:14px; font-size:11px; color:#4A4A4A; font-weight:600; }
.desc { font-size:13px; color:#4A4A4A; line-height:1.65; max-width:420px; }
.ships-note { font-size:12px; color:#28A99E; font-weight:700; }
.buy-row { display:flex; gap:12px; margin-top:auto; }
.btn-buy { flex:1; background:#28A99E; color:#fff; border:none; border-radius:9999px; padding:15px; font-size:13px; font-weight:700; }
.btn-wish { border:1.5px solid #E5E5E5; border-radius:9999px; padding:15px 20px; font-size:13px; background:#FDF6EE; }
footer { height:62px; background:#F9F7F4; display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-size:11px; color:#767676; }
</style></head>
<body>
<nav>
<p class="brand">Abby And Finn</p>
<div class="navlinks"><span>Diapers</span><span class="on">Prints</span><span>Wipes</span><span>How It Works</span></div>
<span class="cart">Box (0)</span>
</nav>
<div class="wrap">
<div class="photo"><span class="badge-new">New Print</span></div>
<div class="info">
<span class="cat">Diaper Subscription · Size 3</span>
<h1>Sunbeam Meadow Print</h1>
<div class="print-row"><div class="print p1"></div><div class="print p2"></div><div class="print p3"></div><div class="print p4"></div><div class="print p5"></div></div>
<div class="eco-strip"><span>✓ Plant-Based Core</span><span>✓ FSC Certified</span><span>✓ Fragrance-Free</span></div>
<p class="desc">Pick your print, we handle the rest — sized right, timed right, delivered every four weeks so nothing ever runs out at 2am.</p>
<span class="ships-note">Ships every 4 weeks · pause or skip anytime</span>
<div class="buy-row">
<button class="btn-buy">Add to Box</button>
<button class="btn-wish">♡</button>
</div>
</div>
</div>
<footer><span>© Abby And Finn</span><span>Sizing Guide · FAQ · Contact</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #212121;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #212121;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; margin: 0; color: #212121; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #6b6a6b; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #cad618; color: #231f20;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #212121;
border: 1px solid #cad618; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #212121;
border: 1px solid #c8c8c8; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b6a6b; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.18; letter-spacing: 0.5px; background: #145623; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#212121; box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #e8e9eb; }
.brand { font-family:'Galaxie Polaris Condensed','Helvetica Neue',Arial,sans-serif; font-size:20px; font-weight:700; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:20px; }
.navlinks span { font-family:'Galaxie Polaris','Helvetica Neue',Arial,sans-serif; font-size:14px; font-weight:600;
letter-spacing:0.5px; text-transform:uppercase; color:#212121; }
.navlinks span.active { color:#7a9a06; border-bottom:2px solid #cad618; padding-bottom:20px; }
.hero { background:#f3f3f3; padding:36px 32px; display:flex; align-items:center; gap:30px; }
.heroText { flex:1; }
.headline { font-family:'Galaxie Polaris Condensed','Helvetica Neue',Arial,sans-serif; font-size:36px; font-weight:700;
letter-spacing:-0.5px; line-height:1.1; margin-bottom:12px; }
.heroBtn { display:inline-block; background:#cad618; color:#231f20; border-radius:8px; padding:12px 24px; font-size:15px;
font-weight:600; letter-spacing:0.3px; }
.heroImg { flex:1; height:150px; border-radius:8px; background:linear-gradient(150deg,#2a2a2a,#111); position:relative; }
.heroImg::after { content:''; position:absolute; left:20px; bottom:20px; width:70%; height:16px; background:#cad618; border-radius:3px; }
.section { padding:24px 32px 0; }
.section h2 { font-size:24px; font-weight:600; margin-bottom:16px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card { background:#fff; border:1px solid #e8e9eb; border-radius:8px; }
.photo { aspect-ratio:1/1; border-radius:8px 8px 0 0; position:relative; }
.c1 .photo { background:linear-gradient(150deg,#333,#0d0d0d); }
.c2 .photo { background:linear-gradient(150deg,#cad618,#8ba00e); }
.c3 .photo { background:linear-gradient(150deg,#4a4a4a,#1a1a1a); }
.c4 .photo { background:linear-gradient(150deg,#1c9ad6,#0a5a8a); }
.body2 { padding:10px 12px 12px; }
.badge { position:absolute; top:6px; left:6px; background:#145623; color:#fff; font-size:10px; font-weight:600;
text-transform:uppercase; padding:2px 8px; border-radius:2px; }
.name { font-size:16px; font-weight:500; }
.price { font-size:18px; font-weight:600; margin-top:2px; }
</style></head>
<body>
<nav>
<div class="brand">Goal Zero</div>
<div class="navlinks"><span class="active">Power Stations</span><span>Solar Panels</span><span>Accessories</span><span>Camp</span></div>
</nav>
<div class="hero">
<div class="heroText">
<div class="headline">Power When It Matters</div>
<div class="heroBtn">Shop Power Stations</div>
</div>
<div class="heroImg"></div>
</div>
<div class="section">
<h2>Yeti Power Stations</h2>
<div class="grid">
<div class="card c1"><div class="photo"><div class="badge">In Stock</div></div><div class="body2"><div class="name">Yeti 500X</div><div class="price">$499.95</div></div></div>
<div class="card c2"><div class="photo"></div><div class="body2"><div class="name">Nomad 100 Solar</div><div class="price">$299.95</div></div></div>
<div class="card c3"><div class="photo"></div><div class="body2"><div class="name">Yeti 1500X</div><div class="price">$1,999.95</div></div></div>
<div class="card c4"><div class="photo"></div><div class="body2"><div class="name">Escape 1000</div><div class="price">$1,199.95</div></div></div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #7f0019; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #7f0019; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c08792; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #333333; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #7f0019; color: #ffffff;
border: 1px solid #333333; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #7f0019; color: #f5f5f5;
border: 1px solid #92273c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c08792; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #73081d; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#333333; box-sizing:border-box;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
.wrap { position:relative; height:100%; display:flex; flex-direction:column; }
nav { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-bottom:1px solid #dddddd; }
.brand { background:#7f0019; color:#fff; padding:4px 12px; font-size:13px; font-weight:400; letter-spacing:0.04em; }
.navlinks { display:flex; gap:26px; font-size:13px; color:#666666; letter-spacing:0.02em; }
.cart { border:1px solid #333333; padding:8px 18px; font-size:13px; }
.lead { padding:36px 40px 20px; }
.lead h1 { font-size:28px; font-weight:300; letter-spacing:0.02em; margin:0 0 8px; }
.lead p { font-size:14px; color:#666666; line-height:1.7; margin:0; max-width:560px; }
.grid { flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:8px 40px 24px; }
.card { display:flex; flex-direction:column; gap:8px; }
.photo { aspect-ratio:1; background:#f7f7f7; position:relative; overflow:hidden; }
.photo .obj { position:absolute; border-radius:2px; background:#e6e0d6; }
.c1 .photo .obj { width:60%; height:70%; left:20%; top:14%; background:#eee3d3; }
.c2 .photo .obj { width:40%; height:55%; left:30%; top:22%; background:#ded6c6; border-radius:50%; }
.c3 .photo .obj { width:70%; height:30%; left:15%; bottom:20%; background:#e3ddd0; }
.c4 .photo .obj { width:36%; height:66%; left:32%; top:16%; background:#e7e1d5; }
.tag { position:absolute; top:8px; left:8px; background:#7f0019; color:#fff; font-size:10px; padding:2px 8px; }
.title { font-size:13px; }
.price { font-size:14px; }
.price.sale { color:#7f0019; }
footer { height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 40px;
border-top:1px solid #dddddd; font-size:11px; color:#666666; }
</style></head>
<body>
<div class="wrap">
<nav>
<div class="brand">MUJI</div>
<div class="navlinks"><span>Clothing</span><span>Furniture</span><span>Stationery</span><span>Food</span></div>
<div class="cart">Cart (0)</div>
</nav>
<div class="lead">
<h1>No-brand quality goods</h1>
<p>Lower priced for a reason. Simple materials, honest process — the product speaks, the chrome stays silent.</p>
</div>
<div class="grid">
<div class="card c1"><div class="photo"><div class="obj"></div></div><span class="title">Organic Cotton Shirt</span><span class="price">$29.90</span></div>
<div class="card c2"><div class="photo"><div class="obj"></div><div class="tag">NEW</div></div><span class="title">Ceramic Mug</span><span class="price">$12.50</span></div>
<div class="card c3"><div class="photo"><div class="obj"></div></div><span class="title">Storage Box, Set of 3</span><span class="price sale">$18.00</span></div>
<div class="card c4"><div class="photo"><div class="obj"></div></div><span class="title">Gel Ink Pen</span><span class="price">$3.20</span></div>
<div class="card c1"><div class="photo"><div class="obj"></div></div><span class="title">Linen Cushion Cover</span><span class="price">$15.90</span></div>
<div class="card c2"><div class="photo"><div class="obj"></div></div><span class="title">Travel Pouch</span><span class="price">$9.50</span></div>
<div class="card c3"><div class="photo"><div class="obj"></div><div class="tag">NEW</div></div><span class="title">Aroma Diffuser</span><span class="price">$34.00</span></div>
<div class="card c4"><div class="photo"><div class="obj"></div></div><span class="title">Notebook, A5</span><span class="price sale">$4.50</span></div>
</div>
<footer>
<span>© MUJI</span>
<span>MUJI · Clothing · Furniture · Stationery · Food</span>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0D0D0D; color: #FFFFFF;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0D0D0D; color: #FFFFFF;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.5px; margin: 0; color: #FFFFFF; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.14; letter-spacing: 1.5px; background: #00FFC8; color: #0D0D0D;
border: none; border-radius: 4px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.14; letter-spacing: 1.5px; background: transparent; color: #00FFC8;
border: 1px solid #00FFC8; border-radius: 4px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #141414; color: #FFFFFF;
border: 1px solid #4a4a4a; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #7B2FE0; color: #FFFFFF;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#0D0D0D; color:#FFFFFF; box-sizing:border-box;
font-family:'Rajdhani','Share Tech',-apple-system,system-ui,sans-serif; }
* { box-sizing:border-box; }
body { position:relative; }
.diag { position:absolute; top:0; left:38%; width:1px; height:100%; background:linear-gradient(180deg,transparent,rgba(0,255,200,0.35),transparent); transform:skewX(-12deg); z-index:0; }
.glow { position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(123,47,224,0.25),transparent 70%); right:-140px; top:-140px; z-index:0; }
nav { position:relative; z-index:2; height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #2E2E2E; }
.brand { font-size:18px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#fff; margin:0; }
.brand span { color:#00FFC8; }
.navlinks { display:flex; gap:22px; font-size:12px; font-weight:500; color:#808080; letter-spacing:0.3px; }
.navlinks span.on { color:#00FFC8; }
.cart { display:flex; align-items:center; gap:6px; font-size:12px; color:#B8B8B8; }
.cart .dot { width:18px; height:18px; border-radius:3px; background:#00FFC8; color:#0D0D0D; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
main { position:relative; z-index:2; display:grid; grid-template-columns:420px 1fr; gap:0; height:calc(640px - 56px); }
.stage { position:relative; padding:28px; display:flex; flex-direction:column; gap:14px; border-right:1px solid #2E2E2E; }
.badge-row { display:flex; gap:8px; }
.badge-new { background:#7B2FE0; color:#fff; font-size:10px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; padding:4px 8px; border-radius:4px; }
.badge-sale { background:#00FFC8; color:#0D0D0D; font-size:10px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; padding:4px 8px; border-radius:4px; }
.render { flex:1; border-radius:4px; position:relative; overflow:hidden;
background:
linear-gradient(135deg, #1A1A1A 0%, #141414 60%),
repeating-linear-gradient(115deg, rgba(0,255,200,0.05) 0 2px, transparent 2px 26px); }
.render::before { content:''; position:absolute; left:20%; top:18%; width:60%; height:64%;
background:linear-gradient(160deg,#242424,#1a1a1a 55%,#0d0d0d);
clip-path:polygon(10% 0,100% 6%,92% 100%,0% 92%);
box-shadow:0 0 40px rgba(0,255,200,0.10) inset; }
.render::after { content:''; position:absolute; left:23%; top:44%; width:54%; height:3px; background:#00FFC8; filter:blur(1px); opacity:0.8; clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%); }
.render .tag { position:absolute; bottom:10px; left:10px; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:#5A5A5A; }
.info { padding:28px 36px; overflow:hidden; display:flex; flex-direction:column; gap:16px; }
.cat { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#00FFC8; }
h1 { margin:0; font-size:30px; font-weight:700; letter-spacing:-1px; line-height:1.05; }
.rating { display:flex; align-items:center; gap:8px; font-size:12px; color:#808080; }
.stars { color:#00FFC8; letter-spacing:2px; font-size:13px; }
.price-row { display:flex; align-items:baseline; gap:12px; }
.price { font-size:26px; font-weight:700; letter-spacing:-0.5px; color:#00FFC8; }
.price-from { font-size:11px; color:#808080; text-transform:uppercase; letter-spacing:0.5px; }
.spec-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#2E2E2E; border:1px solid #2E2E2E; border-radius:8px; overflow:hidden; }
.spec-item { background:#141414; padding:10px 12px; }
.spec-item .l { font-size:9px; font-weight:600; letter-spacing:0.6px; text-transform:uppercase; color:#5A5A5A; margin-bottom:4px; }
.spec-item .v { font-size:13px; font-weight:600; color:#fff; }
.config { display:flex; gap:10px; }
.config-opt { flex:1; border:1px solid #2E2E2E; border-radius:4px; padding:10px 12px; background:#1A1A1A; }
.config-opt.sel { border:2px solid #00FFC8; background:#242424; box-shadow:0 0 12px rgba(0,255,200,0.12); }
.config-opt .t { font-size:11px; font-weight:600; color:#fff; margin-bottom:2px; }
.config-opt .p { font-size:10px; color:#00FFC8; }
.cta-row { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#00FFC8; color:#0D0D0D; border:none; height:46px; font-size:13px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); display:flex; align-items:center; justify-content:center; }
.btn-secondary { width:150px; background:transparent; border:1px solid #00FFC8; color:#00FFC8; height:46px; font-size:13px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); display:flex; align-items:center; justify-content:center; }
</style></head>
<body>
<div class="diag"></div>
<div class="glow"></div>
<nav>
<p class="brand">Alienware<span>.</span></p>
<div class="navlinks"><span class="on">Laptops</span><span>Desktops</span><span>Monitors</span><span>Accessories</span></div>
<div class="cart">Cart <span class="dot">2</span></div>
</nav>
<main>
<div class="stage">
<div class="badge-row"><span class="badge-new">New</span><span class="badge-sale">Sale</span></div>
<div class="render"><span class="tag">Alienware · Legend 2.0 Chassis</span></div>
</div>
<div class="info">
<span class="cat">Alienware Aurora Line</span>
<h1>x16 R2 Gaming Desktop</h1>
<div class="rating"><span class="stars">★★★★☆</span> 4.4 · 1,208 reviews</div>
<div class="price-row"><span class="price-from">Starting at</span><span class="price">$2,499.00</span></div>
<div class="spec-grid">
<div class="spec-item"><div class="l">GPU</div><div class="v">RTX 4080</div></div>
<div class="spec-item"><div class="l">CPU</div><div class="v">Core i9-14900</div></div>
<div class="spec-item"><div class="l">RAM</div><div class="v">32GB DDR5</div></div>
</div>
<div class="config">
<div class="config-opt sel"><div class="t">1TB SSD</div><div class="p">Included</div></div>
<div class="config-opt"><div class="t">2TB SSD</div><div class="p">+$180</div></div>
<div class="config-opt"><div class="t">4TB SSD</div><div class="p">+$420</div></div>
</div>
<div class="cta-row">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Configure</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #000000; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #000000; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #878787; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #000000; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #000000; color: #f5f5f5;
border: 1px solid #272727; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #878787; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #292929; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:Inter,-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.brand { font-weight:700; font-size:16px; }
.navlinks { display:flex; gap:10px; }
.navlinks .pill { background:#f5f3f1; border-radius:9999px; padding:8px 16px; font-size:14px; }
.navlinks .pill.on { background:#000; color:#fff; }
.hero { text-align:center; padding:30px 40px 20px; }
.hero h1 { font-family:"Waldenburg",Inter,sans-serif; font-weight:300; font-size:48px; line-height:1.08; margin:0 0 16px; letter-spacing:-0.5px; }
.row { display:flex; gap:10px; justify-content:center; }
.btn-black { background:#000; color:#fff; border-radius:9999px; padding:0 20px; height:44px; display:flex;
align-items:center; font-size:15px; }
.btn-white { background:#fff; color:#000; border-radius:9999px; padding:0 20px; height:44px; display:flex;
align-items:center; font-size:15px; box-shadow:rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 4px; }
.tabs { display:flex; gap:8px; justify-content:center; padding:16px 0 0; }
.tab { border-radius:14px; padding:0 20px; height:36px; display:flex; align-items:center; font-size:16px; color:#777169; }
.tab.sel { background:#f5f3f1; color:#000; font-weight:500; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:24px 40px; }
.card { background:#fff; border-radius:16px; padding:16px; box-shadow:rgba(0,0,0,0.4) 0px 0px 1.143px, rgba(0,0,0,0.04) 0px 2px 4px; }
.card .wave { height:50px; border-radius:8px; background:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 6px);
margin-bottom:10px; opacity:0.85; }
.card h4 { font-size:14px; margin:0 0 4px; }
.card p { font-size:12px; color:#777169; margin:0; }
</style></head>
<body>
<nav>
<span class="brand">ElevenLabs</span>
<div class="navlinks"><span class="pill on">Agents</span><span class="pill">Creative</span><span class="pill">API</span></div>
</nav>
<section class="hero">
<h1>The most realistic<br>voice AI platform</h1>
<div class="row"><div class="btn-black">Sign up</div><div class="btn-white">Contact sales</div></div>
<div class="tabs">
<div class="tab sel">Text to Speech</div><div class="tab">Voice Cloning</div><div class="tab">Dubbing</div>
</div>
</section>
<section class="grid">
<div class="card"><div class="wave"></div><h4>Narrate a chapter</h4><p>Turn manuscript text into a lifelike audiobook voice.</p></div>
<div class="card"><div class="wave"></div><h4>Clone your own voice</h4><p>A few minutes of audio is enough to start.</p></div>
<div class="card"><div class="wave"></div><h4>Dub into 29 languages</h4><p>Preserve emotion and timing automatically.</p></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #2a1f60; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #2a1f60; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #9a95b2; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #2a1f60; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #2a1f60; color: #f5f5f5;
border: 1px solid #4a4178; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9a95b2; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #4c4379; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#000000; box-sizing:border-box;
font-family:"Apple SD Gothic Neo", -apple-system, "Segoe UI", Arial, sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
background:#2a1f60; }
.brand { color:#ffffff; font-size:18px; font-weight:700; }
.navlinks { display:flex; gap:20px; }
.navlinks span { color:#ffffff; font-size:15px; opacity:0.85; }
.navlinks span.on { opacity:1; font-weight:700; }
.body { padding:20px 32px 0; }
.sectitle { font-size:16px; font-weight:700; margin-bottom:12px; color:#000; }
.grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; }
.card { display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; }
.icon { width:72px; height:72px; border-radius:0px; background:linear-gradient(135deg, #2a1f60, #6a53c9);
position:relative; }
.icon::after { content:''; position:absolute; left:22px; top:22px; width:28px; height:28px; border-radius:6px;
background:rgba(255,255,255,0.35); }
.appname { font-size:13px; color:#000; }
.apprating { font-size:12px; color:#454545; }
.devbar { position:absolute; bottom:0; left:0; right:0; height:120px; background:#efefef; border-top:1px solid #767676;
padding:16px 32px; display:flex; align-items:center; gap:14px; }
.devlabel { font-size:14px; color:#000; }
.devinput { width:220px; height:21px; background:#ffffff; border:2px solid #767676; padding:1px 2px; font-size:13px; color:#000; }
.devbtn { background:#efefef; color:#000; border:2px solid #000; padding:0 20px; height:50px; font-size:13px;
display:flex; align-items:center; }
</style></head>
<body>
<nav>
<span class="brand">ONE store</span>
<div class="navlinks"><span class="on">Games</span><span>Apps</span><span>OnePlay</span><span>Story</span></div>
</nav>
<div class="body">
<div class="sectitle">Popular Games</div>
<div class="grid">
<div class="card"><div class="icon"></div><div class="appname">Rift Kingdoms</div><div class="apprating">★ 4.7</div></div>
<div class="card"><div class="icon"></div><div class="appname">Puzzle Garden</div><div class="apprating">★ 4.5</div></div>
<div class="card"><div class="icon"></div><div class="appname">Speed Circuit</div><div class="apprating">★ 4.3</div></div>
<div class="card"><div class="icon"></div><div class="appname">Tower Siege</div><div class="apprating">★ 4.6</div></div>
<div class="card"><div class="icon"></div><div class="appname">Farm Story</div><div class="apprating">★ 4.4</div></div>
</div>
</div>
<div class="devbar">
<span class="devlabel">Developer Login</span>
<span class="devinput"></span>
<span class="devbtn">Sign In</span>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #1c2431;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #1c2431;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; margin: 0; color: #1c2431; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; margin: 0; color: #6b7280; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #00b5c8; color: #000000;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; background: #ffffff; color: #000000;
border: 1px solid #00b5c8; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1c2431;
border: 1px solid #e5e7eb; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6b7280; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f0fbfd; color: #008fa0;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#1c2431; box-sizing:border-box;
font-family:Inter,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
.mono { font-family:'Courier New',Courier,monospace; }
nav { height:54px; background:#ffffff; border-bottom:1px solid #e5e7eb; display:flex; align-items:center;
justify-content:space-between; padding:0 30px; }
.brand { font-size:16px; font-weight:700; color:#00b5c8; }
.searchbar { flex:1; max-width:360px; margin:0 20px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; padding:8px 14px; font-size:12px; color:#6b7280; }
.acct { font-size:11px; color:#374151; }
.breadcrumb { height:22px; padding:5px 30px 0; font-size:10.5px; color:#6b7280; }
.wrap { display:flex; height:504px; padding:12px 30px; gap:24px; }
.photo-col { width:220px; flex-shrink:0; display:flex; flex-direction:column; gap:10px; }
.photo { height:220px; background:linear-gradient(135deg,#e0f7fa,#f0fbfd); border-radius:8px; border:1px solid #e5e7eb; position:relative; }
.photo::before { content:''; position:absolute; inset:20px; border-radius:50%; background:radial-gradient(circle,#00b5c8 0%,transparent 70%); opacity:.5; }
.val-badge { background:#dcfce7; color:#16a34a; font-size:10px; font-weight:600; padding:4px 10px; border-radius:9999px; width:fit-content; }
.cite-note { font-size:10.5px; color:#6b7280; }
.info { flex:1; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.cat-id { font-size:11px; color:#6b7280; }
.info h1 { font-size:19px; font-weight:700; margin:0; line-height:1.3; }
.spec-table { display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; font-size:11px; border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb; padding:10px 0; }
.spec-table div { display:flex; justify-content:space-between; color:#374151; }
.spec-table div b { color:#1c2431; font-weight:600; }
.app-chips { display:flex; gap:6px; flex-wrap:wrap; }
.app-chip { background:#f9fafb; border:1px solid #e5e7eb; border-radius:9999px; padding:4px 12px; font-size:10.5px; }
.app-chip.on { background:#00b5c8; color:#fff; border-color:#00b5c8; }
.price-row { display:flex; align-items:baseline; gap:12px; margin-top:auto; }
.price { font-size:19px; font-weight:700; }
.btn-buy { background:#00b5c8; color:#fff; border:none; border-radius:8px; padding:11px 26px; font-size:12px; font-weight:700; }
.btn-quote { border:1px solid #e5e7eb; border-radius:8px; padding:11px 18px; font-size:12px; color:#374151; }
footer { height:60px; background:#1c2431; color:#00b5c8; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; font-size:10.5px; border-top:2px solid #00b5c8; }
footer span:last-child { color:#9ca3af; }
</style></head>
<body>
<nav>
<p class="brand">Abcam</p>
<div class="searchbar">Search by target, catalog #, or citation…</div>
<span class="acct">Sign In</span>
</nav>
<div class="breadcrumb">Antibodies / Primary Antibodies / Anti-GAPDH</div>
<div class="wrap">
<div class="photo-col">
<div class="photo"></div>
<span class="val-badge">✓ Validated · WB, IHC, ICC</span>
<span class="cite-note">Cited in 412 publications</span>
</div>
<div class="info">
<span class="cat-id mono">ab8245 · Anti-GAPDH [6C5]</span>
<h1>Anti-GAPDH Antibody [6C5] — Loading Control</h1>
<div class="spec-table">
<div>Reactivity <b>Human, Mouse, Rat</b></div>
<div>Host <b>Mouse</b></div>
<div>Conjugation <b>Unconjugated</b></div>
<div>Isotype <b>IgM</b></div>
</div>
<div class="app-chips">
<span class="app-chip on">Western Blot</span>
<span class="app-chip">IHC-P</span>
<span class="app-chip">ICC/IF</span>
<span class="app-chip">Flow Cyt</span>
</div>
<div class="price-row">
<span class="price">$225.00</span>
<button class="btn-buy">Add to Cart</button>
<button class="btn-quote">Request Quote</button>
</div>
</div>
</div>
<footer><span>© Abcam</span><span>Certificate of Analysis · Regulatory Docs · Distributors</span></footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #22c55e; color: #000000;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #22c55e; color: #000000;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #00d992; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #22c55e; color: #000000;
border: 1px solid #00d992; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #22c55e; color: #000000;
border: 1px solid #44cd76; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #1dc866; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#050507; color:#f2f2f2; box-sizing:border-box;
font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
* { box-sizing:border-box; }
nav { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 32px;
border-bottom:1px solid #3d3a39; }
.brand { display:flex; align-items:center; gap:8px; font-weight:600; font-size:15px; }
.bolt { width:14px; height:20px; background:#00d992; clip-path:polygon(60% 0,0 55%,45% 55%,30% 100%,100% 40%,55% 40%); }
.navlinks { display:flex; gap:20px; font-size:13px; color:#b8b3b0; }
.btn { background:#101010; color:#2fd6a1; border:1px solid #3d3a39; border-radius:6px; padding:8px 14px; font-size:13px; }
.hero { padding:38px 32px 20px; }
.hero h1 { font-size:44px; font-weight:400; letter-spacing:-1.2px; line-height:1.02; margin:0 0 12px; max-width:640px; }
.hero h1 span { color:#00d992; }
.hero p { font-size:16px; color:#b8b3b0; margin:0 0 18px; max-width:520px; }
.code { background:#101010; border:3px solid #3d3a39; border-radius:8px; padding:14px 18px; font-family:"SFMono-Regular",monospace;
font-size:13px; color:#f2f2f2; display:inline-flex; align-items:center; gap:16px; }
.code .cmd::before { content:"$ "; color:#8b949e; }
.code .copy { color:#2fd6a1; font-weight:700; font-size:12px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:22px 32px 0; }
.card { background:#101010; border:1px solid #3d3a39; border-radius:8px; padding:18px; }
.card.active { border:2px solid #00d992; }
.card h3 { font-size:16px; margin:0 0 8px; }
.card p { font-size:12.5px; color:#8b949e; line-height:1.5; margin:0; }
.badge { display:inline-block; font-size:11px; font-weight:600; letter-spacing:2px; color:#818cf8; text-transform:uppercase;
margin-bottom:8px; }
</style></head>
<body>
<nav>
<span class="brand"><span class="bolt"></span>VoltAgent</span>
<div class="navlinks"><span>Product</span><span>Use Cases</span><span>Resources</span><span>★ 8.7K</span></div>
<span class="btn">Docs</span>
</nav>
<section class="hero">
<h1>Open source TypeScript <span>AI agent</span> framework</h1>
<p>Memory, RAG, guardrails, tools, and MCP in one type-safe package — with n8n-style observability built in.</p>
<div class="code"><span class="cmd">npm create voltagent-app@latest</span><span class="copy">Copy</span></div>
</section>
<section class="grid">
<div class="card active"><span class="badge">Memory</span><h3>Persistent agent state</h3><p>Give every agent a durable memory layer across sessions and tools.</p></div>
<div class="card"><span class="badge">VoltOps</span><h3>Observability by default</h3><p>Trace every step, tool call, and token — production-ready from day one.</p></div>
<div class="card"><span class="badge">MCP</span><h3>Connect any tool</h3><p>Bring your own tools and models through the Model Context Protocol.</p></div>
</section>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; margin: 0; color: #626262; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.08em; background: #2a2a2a; color: #ffffff;
border: none; border-radius: 0px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.08em; background: #ffffff; color: #2a2a2a;
border: 1px solid #2a2a2a; border-radius: 0px;
padding: 15px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #121212;
border: 1px solid #c4c4c4; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #626262; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.1em; background: #f7f7f7; color: #2a2a2a;
border-radius: 0px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden; position:relative;
background:#ffffff; color:#2a2a2a; box-sizing:border-box; font-family:'DM Sans',system-ui,-apple-system,sans-serif; }
* { box-sizing:border-box; }
.announce { height:32px; background:#282828; color:#fff; font-size:11px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase;
display:flex; align-items:center; justify-content:center; }
nav { height:56px; border-bottom:1px solid #dedede; display:flex; align-items:center; justify-content:center; position:relative; padding:0 32px; }
.brand { font-size:14px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; margin:0; }
.navlinks { position:absolute; left:32px; display:flex; gap:20px; font-size:12px; letter-spacing:0.04em; color:#2a2a2a; }
.icons { position:absolute; right:32px; display:flex; gap:16px; font-size:15px; }
.main { display:flex; height:452px; }
.gallery { width:460px; background:#fafafa; display:flex; align-items:center; justify-content:center; position:relative; }
.ring { width:150px; height:150px; border-radius:50%; border:22px solid; border-color:#dfb8a7 #dfb8a7 #2a2a2a #dfb8a7;
transform:rotate(-30deg); box-shadow:0 8px 24px rgba(0,0,0,0.12); }
.label-upper { position:absolute; top:24px; left:24px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#626262; }
.info { flex:1; padding:36px 40px; display:flex; flex-direction:column; gap:12px; }
.info h1 { font-family:'Newsreader',Georgia,serif; font-weight:400; font-size:32px; margin:0; line-height:1.15; }
.material-row { display:flex; gap:8px; }
.material-badge { background:#f7f7f7; border:1px solid #dedede; padding:4px 10px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#2a2a2a; }
.price { font-size:18px; }
.desc { font-size:14px; line-height:1.6; color:#2a2a2a; max-width:400px; }
.swatch-row { display:flex; gap:10px; margin-top:4px; }
.swatch { width:24px; height:24px; border-radius:50%; border:1px solid #dedede; }
.swatch.sel { border:2px solid #121212; }
.btn-primary { margin-top:auto; height:52px; background:#2a2a2a; color:#fff; border:none; font-size:13px; font-weight:500;
letter-spacing:0.08em; text-transform:uppercase; }
.btn-secondary { height:48px; background:#fff; color:#2a2a2a; border:1px solid #2a2a2a; font-size:13px; font-weight:500;
letter-spacing:0.08em; text-transform:uppercase; margin-top:8px; }
</style></head>
<body>
<div class="announce">Complimentary engraving on all rings</div>
<nav>
<div class="navlinks"><span>Rings</span><span>Necklaces</span><span>Earrings</span></div>
<p class="brand">Bagatiba</p>
<div class="icons"><span>🔍</span><span>♡</span><span>🛍</span></div>
</nav>
<div class="main">
<div class="gallery">
<span class="label-upper">14K Gold Vermeil</span>
<div class="ring"></div>
</div>
<div class="info">
<h1>Signet Band Ring</h1>
<div class="material-row">
<span class="material-badge">14K Gold Vermeil</span>
<span class="material-badge">Made to Order</span>
</div>
<span class="price">$185.00</span>
<p class="desc">Cast in solid vermeil and hand-polished to a soft, worn-in finish. A quiet signet form built for daily wear — pairs easily with stacked bands or worn alone.</p>
<div class="swatch-row">
<div class="swatch sel" style="background:#d8bd7a"></div>
<div class="swatch" style="background:#c9c9c9"></div>
<div class="swatch" style="background:#e0b8a0"></div>
</div>
<button class="btn-primary">Add to Bag</button>
<button class="btn-secondary">Add to Wishlist</button>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f4f4f6; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f4f4f6; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #676986; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #370078; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.5px; background: #f4f4f6; color: #370078;
border: 1px solid #370078; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #f4f4f6; color: #121212;
border: 1px solid #bcbcbd; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676986; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ffdd00; color: #121212;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f4f4f6; color:#121212; box-sizing:border-box;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;
background:#ffffff; border-bottom:1px solid #e5e5e5; }
.logo { font-size:19px; font-weight:600; letter-spacing:-0.3px; color:#370078; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:#272d45; }
.navlinks span:first-child { color:#370078; }
.search { background:#f4f4f6; border-radius:9999px; padding:9px 18px; font-size:13px; color:#676986; }
main { display:flex; height:498px; }
.shot { width:400px; background:#370078; position:relative; overflow:hidden; }
.shot::before { content:''; position:absolute; inset:0;
background: radial-gradient(circle at 30% 25%, rgba(255,221,0,0.25), transparent 45%),
radial-gradient(circle at 75% 75%, rgba(255,255,255,0.08), transparent 50%); }
.badge-sale { position:absolute; top:16px; left:16px; background:#ffdd00; color:#121212; font-size:11px;
font-weight:700; letter-spacing:0.5px; text-transform:uppercase; border-radius:4px; padding:5px 10px; }
.wand { position:absolute; left:50%; top:50%; width:56px; height:280px; transform:translate(-50%,-52%) rotate(-8deg);
background:linear-gradient(180deg,#ffffff 0%,#e5e5eb 70%,#ffdd00 70%,#ffdd00 100%); border-radius:28px; }
.thumbrow { position:absolute; bottom:0; left:0; right:0; display:flex; gap:1px; }
.thumbrow div { flex:1; height:52px; background:rgba(255,255,255,0.12); }
.info { flex:1; padding:26px 34px 0; display:flex; flex-direction:column; }
.eyebrow { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#370078; margin-bottom:6px; }
.name { font-size:28px; font-weight:600; letter-spacing:-0.4px; line-height:1.2; margin:0 0 8px; }
.stars { font-size:14px; color:#ffdd00; margin-bottom:8px; }
.stars span { color:#676986; font-weight:400; font-size:13px; margin-left:6px; }
.price { font-size:19px; font-weight:600; color:#370078; margin-bottom:16px; }
.field { margin-bottom:14px; }
.field .lbl { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; color:#676986; margin-bottom:8px; }
.colors { display:flex; gap:10px; }
.dot { width:28px; height:28px; border-radius:9999px; border:2px solid transparent; }
.dot.a { background:#370078; border-color:#121212; }
.dot.b { background:#1990c6; }
.dot.c { background:#ffdd00; }
.cta { margin-top:auto; display:flex; gap:10px; padding-bottom:14px; }
.btn-add { flex:1; background:#370078; color:#fff; border-radius:8px; height:48px; font-size:16px; font-weight:600; letter-spacing:0.25px; }
.btn-accent { background:#ffdd00; color:#121212; border-radius:8px; height:48px; padding:0 22px; font-size:16px; font-weight:600; white-space:nowrap; }
.crossrow { display:flex; gap:8px; padding-bottom:8px; }
.xcard { flex:1; background:#ffffff; border:1px solid #e5e5e5; border-radius:8px; padding:8px 10px; font-size:11px; color:#676986; }
.xcard b { display:block; font-size:12px; color:#121212; font-weight:600; margin-bottom:2px; }
footer { background:#370078; color:#fff; padding:12px 36px; display:flex; justify-content:space-between;
font-size:11px; letter-spacing:0.2px; }
</style></head>
<body>
<nav>
<div class="logo">Burst</div>
<div class="navlinks"><span>Toothbrushes</span><span>Replacement Heads</span><span>Whitening</span><span>Kids</span></div>
<div class="search">⌕ Search</div>
</nav>
<main>
<div class="shot">
<span class="badge-sale">Save 20%</span>
<div class="wand"></div>
<div class="thumbrow"><div></div><div></div><div></div><div></div></div>
</div>
<div class="info">
<div class="eyebrow">Sonic Toothbrush</div>
<h1 class="name">Burst Sonic Toothbrush — Pro Edition</h1>
<div class="stars">★★★★★ <span>4.8 (18,204 reviews)</span></div>
<div class="price">$89.00</div>
<div class="field">
<div class="lbl">Color — Deep Violet</div>
<div class="colors"><span class="dot a"></span><span class="dot b"></span><span class="dot c"></span></div>
</div>
<div class="cta">
<button class="btn-add">Add to Cart</button>
<button class="btn-accent">Subscribe & Save</button>
</div>
<div class="crossrow">
<div class="xcard"><b>Replacement Heads</b>3-pack, $19</div>
<div class="xcard"><b>Charging Base</b>USB-C, $24</div>
<div class="xcard"><b>Travel Case</b>$14</div>
</div>
</div>
</main>
<footer>
<span>© Burst</span>
<span>Shipping · Dentist-Approved · Rewards</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #111111;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #111111;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.27; margin: 0; color: #111111; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #808080; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #e83630; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.29; background: #ffffff; color: #111111;
border: 1px solid #e83630; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #c4c4c4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #808080; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; background: #e83630; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Open Sans',Roboto,Arial,sans-serif; color:#313131; }
*{box-sizing:border-box;}
.nav{height:60px;background:#111111;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:18px;font-weight:700;color:#fff;letter-spacing:0.5px;}
.navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;color:#fff;}
.navlinks .active{color:#e83630;}
.cart{background:#e83630;color:#fff;font-size:12px;font-weight:700;padding:6px 14px;border-radius:8px;}
.catstrip{height:40px;display:flex;align-items:center;gap:10px;padding:0 32px;background:#f7f7f7;}
.pill{font-size:12px;font-weight:600;padding:6px 14px;border-radius:9999px;border:1px solid #dddddd;background:#fff;color:#313131;}
.pill.active{background:#e83630;color:#fff;border-color:#e83630;}
.hero{height:180px;background:#111111;display:flex;align-items:center;padding:0 32px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:60px;top:20px;width:130px;height:140px;background:radial-gradient(circle at 40% 30%,#600040,#111111 70%);border-radius:12px;}
.herotext{max-width:440px;}
.herotext h1{font-size:24px;font-weight:700;color:#fff;margin:0 0 8px;}
.herotext p{font-size:14px;color:#bbbbbb;margin:0 0 14px;}
.herocta{display:inline-block;background:#e83630;color:#fff;font-size:14px;font-weight:600;padding:12px 24px;border-radius:8px;}
.grid{display:flex;gap:14px;padding:18px 32px 0;}
.card{width:216px;background:#fff;border-radius:12px;padding:12px;box-shadow:0 1px 4px rgba(0,0,0,0.08);position:relative;}
.thumb{height:110px;border-radius:12px;margin-bottom:8px;}
.badge{position:absolute;top:18px;left:18px;font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:4px;color:#fff;}
.b-new{background:#e83630;} .b-excl{background:#600040;} .b-sale{background:#ff6900;}
.ptitle{font-size:14px;font-weight:600;color:#111111;}
.pprice{font-size:16px;font-weight:700;color:#e83630;margin-top:4px;}
</style>
<div class="nav">
<div class="logo">Neca</div>
<div class="navlinks"><div class="active">Movies</div><div>TV</div><div>Comics</div><div>Video Games</div></div>
<div class="cart">CART (3)</div>
</div>
<div class="catstrip"><div class="pill active">All</div><div class="pill">7" Scale</div><div class="pill">Ultimate</div><div class="pill">Exclusives</div></div>
<div class="hero">
<div class="herotext">
<h1>7-Inch Scale, Full Fandom</h1>
<p>Deep-cut action figures for collectors who read the fine print on the box.</p>
<div class="herocta">Shop New Releases</div>
</div>
</div>
<div class="grid">
<div class="card"><span class="badge b-new">New</span><div class="thumb" style="background:linear-gradient(135deg,#600040,#111111)"></div><div class="ptitle">Aliens Series 14 — Warrior</div><div class="pprice">$34.99</div></div>
<div class="card"><span class="badge b-excl">Exclusive</span><div class="thumb" style="background:linear-gradient(135deg,#4054b2,#111111)"></div><div class="ptitle">Ultimate Dutch — Predator</div><div class="pprice">$44.99</div></div>
<div class="card"><span class="badge b-sale">Sale</span><div class="thumb" style="background:linear-gradient(135deg,#ff6900,#313131)"></div><div class="ptitle">TMNT Ultimate Leonardo</div><div class="pprice">$29.99</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#111111,#e83630)"></div><div class="ptitle">Universal Monsters — Wolf Man</div><div class="pprice">$39.99</div></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #222222; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #222222; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #969696; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #222222; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #222222; color: #f5f5f5;
border: 1px solid #444444; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #969696; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #454545; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; border-radius:0 !important; }
.wrap { display:flex; flex-direction:column; height:640px; }
header { flex:0 0 44px; display:flex; align-items:center; justify-content:space-between;
padding:0 28px; border-bottom:1px solid #e6e6e6; }
.navleft { display:flex; gap:22px; font-size:13px; }
.navleft span:first-child { font-weight:700; }
.wordmark { font-size:15px; font-weight:700; letter-spacing:0.14em; }
.navright { display:flex; gap:16px; font-size:14px; color:#727272; }
.announce { flex:0 0 26px; background:#f5f5f5; display:flex; align-items:center; justify-content:center;
font-size:12px; color:#222222; }
.hero { flex:0 0 232px; position:relative; background:
linear-gradient(120deg, #2a2a2a 0%, #6b6b6b 42%, #d8d8d8 78%, #efefef 100%); overflow:hidden; }
.hero::after { content:''; position:absolute; inset:0;
background:repeating-linear-gradient(100deg, rgba(255,255,255,0.05) 0 3px, transparent 3px 46px); }
.hero .cap { position:absolute; left:24px; bottom:18px; color:#ffffff; }
.hero .cap .k { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; opacity:0.8; }
.hero .cap h1 { font-size:28px; font-weight:700; margin:2px 0 0; letter-spacing:-0.3px; }
.grid { flex:1; min-height:0; display:grid; grid-template-columns:repeat(4, 1fr); }
.tile { border-right:1px solid #e6e6e6; display:flex; flex-direction:column; }
.tile:last-child { border-right:none; }
.tile .img { flex:1; }
.g1 .img { background:linear-gradient(160deg,#dedede,#9a9a9a); }
.g2 .img { background:linear-gradient(160deg,#c9c9c9,#6f6f6f); }
.g3 .img { background:linear-gradient(160deg,#e2e2e2,#8a8a8a); }
.g4 .img { background:linear-gradient(160deg,#d3d3d3,#5c5c5c); }
.tile .cap2 { padding:8px 12px 12px; }
.tile .brandn { font-size:13px; font-weight:700; margin:0; }
.tile .item { font-size:13px; color:#727272; margin:2px 0 0; }
footer { flex:0 0 62px; background:#222222; color:#ffffff; display:flex; align-items:center;
justify-content:space-between; padding:0 28px; font-size:12px; }
footer .cols { display:flex; gap:36px; }
footer .col b { display:block; font-size:12px; margin-bottom:4px; }
footer .col span { display:block; color:#c9c9c9; font-size:11.5px; line-height:1.8; }
</style></head>
<body>
<div class="wrap">
<header>
<div class="navleft"><span>Womenswear</span><span>Menswear</span><span>Kidswear</span></div>
<div class="wordmark">Farfetch</div>
<div class="navright"><span>Search</span><span>Wishlist</span><span>Account</span><span>Bag</span></div>
</header>
<div class="announce">New season: up to 60% off womenswear, menswear and kidswear</div>
<div class="hero">
<div class="cap">
<div class="k">Editorial</div>
<h1>New In</h1>
</div>
</div>
<div class="grid">
<div class="tile g1"><div class="img"></div><div class="cap2"><p class="brandn">LUNARIA</p><p class="item">Wool tailored coat</p></div></div>
<div class="tile g2"><div class="img"></div><div class="cap2"><p class="brandn">VESTRA NOIR</p><p class="item">Leather ankle boot</p></div></div>
<div class="tile g3"><div class="img"></div><div class="cap2"><p class="brandn">ORSAY MILAN</p><p class="item">Silk shirt dress</p></div></div>
<div class="tile g4"><div class="img"></div><div class="cap2"><p class="brandn">HALLE & CO</p><p class="item">Structured tote</p></div></div>
</div>
<footer>
<span>© Farfetch</span>
<div class="cols">
<div class="col"><b>Company</b><span>About us</span><span>Careers</span></div>
<div class="col"><b>Customer Service</b><span>Contact us</span><span>Returns and refunds</span></div>
<div class="col"><b>Help</b><span>Orders and delivery</span><span>FAQs</span></div>
</div>
</footer>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #816bff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #816bff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #c1b7fa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #6e58ff; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #816bff; color: #000000;
border: 1px solid #6e58ff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #816bff; color: #f5f5f5;
border: 1px solid #9481fd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #c1b7fa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #7e68ff; color: #000000;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#121212; color:#f7f7f7; box-sizing:border-box;
font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Noto Sans KR",sans-serif; }
* { box-sizing:border-box; }
nav { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 32px; border-bottom:1px solid #323232; }
.brand { font-size:17px; font-weight:700; color:#f7f7f7; }
.navlinks { display:flex; gap:22px; font-size:13px; font-weight:700; color:#e2e2e2; }
.navlinks .on { color:#816bff; }
.navbtns { display:flex; align-items:center; gap:10px; }
.search-dot { width:32px; height:32px; border-radius:50%; background:#242537; }
.badge { position:relative; width:32px; height:32px; border-radius:50%; background:#242537; }
.badge::after { content:'3'; position:absolute; top:-3px; right:-3px; width:17px; height:17px; border-radius:50%;
background:#816bff; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.hero { position:relative; height:280px; margin:16px 32px 0; border-radius:8px; overflow:hidden;
background:linear-gradient(120deg,#242537 0%,#191b2a 55%,#000000 100%); display:flex; align-items:flex-end; }
.hero::before { content:''; position:absolute; right:-40px; top:-40px; width:280px; height:280px; border-radius:50%;
background:radial-gradient(circle at 35% 35%, rgba(129,107,255,0.45), transparent 70%); }
.hero .content { position:relative; padding:24px 28px; max-width:520px; }
.hero .kicker { font-size:12px; font-weight:700; color:#816bff; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px; }
.hero h1 { font-size:32px; font-weight:700; margin:0 0 8px; line-height:1.25; }
.hero p { font-size:14px; color:#ababab; margin:0 0 16px; line-height:1.5; }
.hero .row { display:flex; gap:10px; }
.btn-primary { background:#816bff; color:#ffffff; border-radius:4px; height:44px; padding:0 20px;
font-size:15px; font-weight:700; display:flex; align-items:center; }
.btn-slight { background:rgba(240,237,255,0.12); color:#c9bfff; border-radius:4px; height:44px; padding:0 20px;
font-size:15px; font-weight:700; display:flex; align-items:center; }
.section { padding:18px 32px 4px; display:flex; align-items:baseline; justify-content:space-between; }
.section h2 { font-size:18px; font-weight:700; margin:0; }
.section span { font-size:12px; color:#8a8a8a; }
.rowgrid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; padding:0 32px 18px; }
.thumb { border-radius:4px; overflow:hidden; }
.thumb .art { height:96px; position:relative; }
.t1 .art { background:linear-gradient(160deg,#816bff,#3d2f8f); }
.t2 .art { background:linear-gradient(160deg,#f16361,#5a1f1f); }
.t3 .art { background:linear-gradient(160deg,#3f8f7c,#123c33); }
.t4 .art { background:linear-gradient(160deg,#8f7a3f,#3c2f12); }
.t5 .art { background:linear-gradient(160deg,#3f6b8f,#12233c); }
.t6 .art { background:linear-gradient(160deg,#8f3f7a,#3c1230); }
.art .ep { position:absolute; left:6px; bottom:6px; background:rgba(0,0,0,0.55); color:#fff; font-size:9px;
font-weight:700; padding:2px 6px; border-radius:2px; }
.tname { font-size:11px; margin-top:6px; color:#f7f7f7; font-weight:400; line-height:1.3; }
</style></head>
<body>
<nav>
<div class="brand">Laftel</div>
<div class="navlinks"><span class="on">Home</span><span>Ranking</span><span>New</span><span>Genres</span><span>Store</span></div>
<div class="navbtns"><span class="search-dot"></span><span class="badge"></span></div>
</nav>
<div class="hero">
<div class="content">
<div class="kicker">Seasonal · Ep 12 out now</div>
<h1>Midnight Cartographers</h1>
<p>A quiet team of mapmakers stumbles into a war between two worlds neither of them can leave.</p>
<div class="row"><span class="btn-primary">▶ Watch Now</span><span class="btn-slight">+ Add to List</span></div>
</div>
</div>
<div class="section"><h2>Picked by our biggest fan curators</h2><span>See all</span></div>
<div class="rowgrid">
<div class="thumb t1"><div class="art"><span class="ep">EP 12</span></div><div class="tname">Midnight Cartographers</div></div>
<div class="thumb t2"><div class="art"><span class="ep">EP 4</span></div><div class="tname">Iron Orchard Requiem</div></div>
<div class="thumb t3"><div class="art"><span class="ep">EP 1</span></div><div class="tname">Salt Garden</div></div>
<div class="thumb t4"><div class="art"><span class="ep">EP 24</span></div><div class="tname">The Last Delivery</div></div>
<div class="thumb t5"><div class="art"><span class="ep">EP 8</span></div><div class="tname">Paper Constellations</div></div>
<div class="thumb t6"><div class="art"><span class="ep">EP 2</span></div><div class="tname">Neon Wisteria</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #242021;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #242021;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #242021; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #77756f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #679650; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.29; letter-spacing: 0.5px; background: #ffffff; color: #679650;
border: 1px solid #679650; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #242021;
border: 1px solid #c8c7c8; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #77756f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.5px; background: #497136; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:'Raleway',Helvetica,Arial,sans-serif; color:#242021; }
*{box-sizing:border-box;}
.strip{height:32px;background:#679650;display:flex;align-items:center;padding:0 40px;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #d0d0cd;}
.logo{font-family:Georgia,cursive;font-size:24px;color:#4e7639;}
.navlinks{display:flex;gap:20px;font-size:13px;font-weight:600;color:#242021;}
.hero{height:230px;background:#4e7639;display:flex;align-items:center;padding:0 40px;position:relative;overflow:hidden;}
.hero:before{content:'';position:absolute;right:-40px;top:-20px;width:220px;height:220px;border-radius:50%;background:#679650;opacity:0.5;}
.hero:after{content:'';position:absolute;right:60px;top:60px;width:150px;height:150px;border-radius:50%;background:#84c271;opacity:0.6;}
.herotext{position:relative;z-index:2;width:440px;}
h1{font-family:Georgia,cursive;font-style:italic;font-size:38px;font-weight:700;color:#fff;margin:0 0 12px;line-height:1.1;}
.sub{font-size:14px;color:#e3f2d7;margin:0 0 18px;max-width:360px;}
.cta{display:inline-block;background:#ff6804;color:#fff;font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:14px 30px;border-radius:8px;}
.sec{padding:22px 40px 0;}
.sectitle{font-size:20px;font-weight:700;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:210px;background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.06);padding:0;overflow:hidden;}
.thumb{height:110px;}
.info{padding:12px;}
.badgerow{display:flex;gap:6px;margin-bottom:6px;}
.zbadge{font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:3px 6px;background:#497136;color:#fff;}
.sbadge{font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:3px 6px;background:#f6b308;color:#242021;}
.pname{font-size:15px;font-weight:700;margin:0 0 4px;}
.pbot{font-size:13px;font-style:italic;color:#77756f;margin:0;}
.dots{display:flex;gap:5px;margin-top:8px;}
.dot{width:14px;height:14px;border-radius:9999px;}
</style>
<div class="strip">Free Shipping on Orders Over $75 · National Award-Winning Plants</div>
<div class="nav">
<div class="logo">Proven Winners</div>
<div class="navlinks"><span>Annuals</span><span>Perennials</span><span>Shrubs</span><span>Plant Finder</span></div>
</div>
<div class="hero">
<div class="herotext">
<h1>Grown for Gardens<br>That Never Quit.</h1>
<p class="sub">Award-winning annuals and shrubs bred for bloom power, zone after zone.</p>
<div class="cta">Shop Now</div>
</div>
</div>
<div class="sec">
<div class="sectitle">National Winners</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#84c271,#497136)"></div><div class="info"><div class="badgerow"><span class="zbadge">Zone 4-8</span><span class="sbadge">Full Sun</span></div><div class="pname">Supertunia Vista</div><div class="pbot">Petunia hybrida</div><div class="dots"><div class="dot" style="background:#d62c7f"></div><div class="dot" style="background:#8c036a"></div><div class="dot" style="background:#f6b308"></div></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#82af00,#5d7334)"></div><div class="info"><div class="badgerow"><span class="zbadge">Zone 3-9</span><span class="sbadge">Part Shade</span></div><div class="pname">Proven Accents Fern</div><div class="pbot">Athyrium niponicum</div><div class="dots"><div class="dot" style="background:#037418"></div><div class="dot" style="background:#84c271"></div></div></div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#b45a97,#4e7639)"></div><div class="info"><div class="badgerow"><span class="zbadge">Zone 5-9</span><span class="sbadge">Full Sun</span></div><div class="pname">Endless Summer Hydrangea</div><div class="pbot">Hydrangea macrophylla</div><div class="dots"><div class="dot" style="background:#485eab"></div><div class="dot" style="background:#b45a97"></div></div></div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fefefd; color: #0a0a0a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fefefd; color: #0a0a0a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #0a0a0a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; margin: 0; color: #8c8c8c; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #0068ff; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; background: #fefefd; color: #0068ff;
border: 1px solid #0068ff; border-radius: 8px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #fefefd; color: #0a0a0a;
border: 1px solid #d1d3d4; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #8c8c8c; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.3px; background: #ec0b00; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fefefd; color:#0a0a0a; box-sizing:border-box;
font-family:Arial,-apple-system,sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; background:#fefefd; border-bottom:1px solid #e6e6e6; }
.brand { font-size:20px; font-weight:700; color:#0068ff; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:24px; font-size:14px; font-weight:500; color:#0a0a0a; }
.searchpill { background:#f2f2f2; border-radius:9999px; padding:8px 18px; font-size:13px; color:#8c8c8c; width:180px; }
.navicons { display:flex; gap:18px; align-items:center; }
.cartdot { background:#0068ff; color:#fff; border-radius:9999px; width:18px; height:18px;
display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; }
.wrap { display:flex; height:calc(640px - 65px - 52px); }
.gallery { width:380px; background:linear-gradient(135deg,#0068ff 0%,#3539f4 55%,#bd03f7 100%);
display:flex; align-items:center; justify-content:center; position:relative; }
.chip3d { width:170px; height:170px; background:#0a0a0a; border-radius:12px; position:relative;
box-shadow:0 20px 50px rgba(10,10,10,0.4); display:flex; align-items:center; justify-content:center; }
.chip3d::before { content:''; position:absolute; inset:14px; border:2px solid rgba(255,255,255,0.15); border-radius:6px; }
.chip3d span { color:#fff; font-weight:700; font-size:13px; letter-spacing:1px; }
.badge-new { position:absolute; top:20px; left:20px; background:#01ab01; color:#fff;
font-size:11px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.badge-compat { position:absolute; top:20px; right:20px; background:#e2f4ff; color:#0063f8;
font-size:11px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; padding:2px 8px; border-radius:4px; }
.info { flex:1; padding:26px 36px; display:flex; flex-direction:column; gap:10px; }
.kicker { font-size:12px; color:#8c8c8c; font-weight:400; }
h1 { font-size:26px; font-weight:400; letter-spacing:-0.5px; margin:0; line-height:1.15; }
.stars { font-size:12px; color:#0a0a0a; }
.stars span { color:#8c8c8c; margin-left:6px; }
.price { font-size:26px; font-weight:900; margin-top:4px; }
.buyrow { display:flex; gap:10px; margin-top:6px; }
.btn-primary { background:#0068ff; color:#fff; border:none; border-radius:8px; padding:12px 24px;
font-weight:700; font-size:15px; }
.btn-secondary { background:#fefefd; color:#0068ff; border:none; border-radius:8px; padding:12px 24px;
font-weight:700; font-size:15px; }
.spectable { margin-top:8px; border-top:1px solid #e6e6e6; }
.specrow { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #e6e6e6; font-size:13px; }
.speclabel { color:#4f5a6c; }
.specvalue { color:#0a0a0a; font-weight:500; }
.compat { margin-top:auto; background:#f2f2f2; border-radius:12px; padding:14px 16px; display:flex;
align-items:center; justify-content:space-between; }
.compat span { font-size:13px; color:#0a0a0a; }
.compat button { background:#0068ff; color:#fff; border:none; border-radius:8px; padding:8px 16px;
font-weight:700; font-size:13px; }
footer { height:52px; background:#0a0a0a; color:#bfbfbf; display:flex; align-items:center;
justify-content:space-between; padding:0 36px; font-size:12px; }
</style></head>
<body>
<nav>
<div class="brand">Crucial</div>
<div class="navlinks"><span>SSDs</span><span>DRAM</span><span>Storage</span><span>Compatibility</span></div>
<div class="navicons"><span class="searchpill">Search products</span><span class="cartdot">1</span></div>
</nav>
<div class="wrap">
<div class="gallery">
<span class="badge-new">New</span>
<span class="badge-compat">Compatible</span>
<div class="chip3d"><span>P310 SSD</span></div>
</div>
<div class="info">
<div class="kicker">Crucial P310 · Internal Solid State Drive</div>
<h1>P310 2TB PCIe Gen4 NVMe M.2 SSD</h1>
<div class="stars">★★★★★ <span>4.8 · 3,204 reviews</span></div>
<div class="price">$129.99</div>
<div class="buyrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Compare</button>
</div>
<div class="spectable">
<div class="specrow"><span class="speclabel">Capacity</span><span class="specvalue">2TB</span></div>
<div class="specrow"><span class="speclabel">Interface</span><span class="specvalue">PCIe Gen4 x4 NVMe</span></div>
<div class="specrow"><span class="speclabel">Sequential Read</span><span class="specvalue">Up to 7,100 MB/s</span></div>
</div>
<div class="compat">
<span>Find compatible systems for this drive</span>
<button>Find Compatible</button>
</div>
</div>
</div>
<footer>
<span>© Crucial</span>
<span>Products · Support · About · Legal</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #005ea2; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #005ea2; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87b1d0; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #5865f2; color: #ffffff;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #005ea2; color: #ffffff;
border: 1px solid #5865f2; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #005ea2; color: #f5f5f5;
border: 1px solid #2776af; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87b1d0; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #0e5faf; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#fcfcfc; color:#1b1b1b; box-sizing:border-box;
font-family:"Public Sans Web",-apple-system,Arial,sans-serif; }
* { box-sizing:border-box; }
.banner { background:#252f3e; color:#ffffff; font-size:11px; padding:5px 24px; display:flex; gap:6px; align-items:center; }
.banner .flag { width:12px; height:8px; background:linear-gradient(180deg,#b31942 0 20%,#fff 20% 30%,#b31942 30% 50%,#fff 50% 60%,#b31942 60% 80%,#fff 80% 100%); }
header { background:#252f3e; color:#ffffff; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; }
.brand { font-weight:700; font-size:17px; }
.navlinks { display:flex; gap:22px; font-size:13.5px; }
.search { display:flex; }
.search input { background:#13171f; border:none; color:#ffffff; padding:8px 12px; font-size:13px; width:170px; }
.search button { background:#2672de; color:#ffffff; border:none; padding:0 12px; height:38px; width:48px; border-radius:0 4px 4px 0; }
main { display:flex; height:520px; }
aside { width:220px; background:#ffffff; border-right:1px solid #e6e6e6; padding:16px 0; }
aside .grp { font-size:11px; font-weight:700; text-transform:uppercase; color:#71767a; padding:8px 20px 4px; }
aside .item { padding:8px 20px; font-size:14.5px; color:#1b1b1b; }
aside .item.active { background:#e7f6f8; border-left:4px solid #005ea2; font-weight:700; padding-left:16px; }
.content { flex:1; padding:28px 32px; overflow:hidden; }
.content h1 { font-size:28px; margin:0 0 6px; }
.content .sub { color:#5c5c5c; font-size:14px; margin-bottom:18px; }
.content p { font-size:16px; line-height:1.6; color:#1b1b1b; margin:0 0 14px; max-width:640px; }
.demo { background:#f0f0f0; border:1px solid #e6e6e6; padding:18px; margin:14px 0; }
.accordion-item { border-bottom:1px solid #e6e6e6; padding:12px 0; display:flex; justify-content:space-between; font-size:15px; }
.accordion-item.open { font-weight:700; }
.btnrow { display:flex; gap:10px; margin-top:16px; }
.btn { background:#005ea2; color:#ffffff; border:none; padding:10px 20px; font-size:15px; border-radius:4px; }
.btn-outline { background:#ffffff; color:#005ea2; border:1px solid #005ea2; padding:10px 20px; font-size:15px; border-radius:4px; }
</style></head>
<body>
<div class="banner"><span class="flag"></span>An official website of the United States government</div>
<header>
<span class="brand">U.S. Web Design System</span>
<div class="navlinks"><span>Design</span><span>Development</span><span>Components</span><span>Templates</span></div>
<div class="search"><input placeholder="Search components" /><button>Go</button></div>
</header>
<main>
<aside>
<div class="grp">Get started</div>
<div class="item">Design principles</div>
<div class="item">Developer setup</div>
<div class="grp">Components</div>
<div class="item active">Accordion</div>
<div class="item">Banner</div>
<div class="item">Button</div>
<div class="item">Form controls</div>
<div class="item">Side navigation</div>
</aside>
<div class="content">
<h1>Accordion</h1>
<div class="sub">An accordion is a list of headers that hide or reveal additional content when selected.</div>
<p>Accordions let users show and hide sections of related content on a page. Only enable the interaction pattern when the content benefits from being collapsed by default.</p>
<div class="demo">
<div class="accordion-item open"><span>Where can I download census data?</span><span>−</span></div>
<div class="accordion-item"><span>What are the eligibility requirements?</span><span>+</span></div>
<div class="accordion-item"><span>How do I contact a program office?</span><span>+</span></div>
</div>
<div class="btnrow"><button class="btn">Copy usage code</button><button class="btn-outline">View accessibility notes</button></div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #17120f;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #17120f;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #17120f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #727272; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #006dff; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #ffffff; color: #17120f;
border: 1px solid #006dff; border-radius: 8px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #17120f;
border: 1px solid #c5c4c3; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #727272; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #faaf43; color: #17120f;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Helvetica Neue',Arial,sans-serif; background:#ffffff; color:#3e3e3e; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;}
.logo{font-size:20px;font-weight:700;color:#17120f;letter-spacing:0.5px;}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#3e3e3e;}
.navlinks span:first-child{color:#17120f;border-bottom:2px solid #17120f;padding-bottom:20px;}
.searchpill{width:170px;height:36px;border-radius:9999px;background:#f8f8f8;font-size:12px;color:#727272;display:flex;align-items:center;padding:0 16px;}
.hero{height:250px;background:#f8f8f8;display:flex;align-items:center;padding:0 40px;}
.heroText h1{font-size:38px;font-weight:700;color:#17120f;margin:0 0 12px;letter-spacing:-0.5px;}
.heroText p{font-size:15px;color:#3e3e3e;margin:0 0 18px;max-width:380px;}
.cta{display:inline-block;background:#006dff;color:#fff;font-size:14px;font-weight:600;letter-spacing:0.3px;padding:13px 28px;border-radius:8px;}
.figure{position:absolute;right:120px;top:70px;width:140px;height:180px;border-radius:70px 70px 20px 20px;background:linear-gradient(160deg,#3e3e3e,#727272);}
.sec{padding:20px 36px 0;}
.secTitle{font-size:20px;font-weight:600;color:#17120f;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:200px;position:relative;}
.thumb{height:130px;border-radius:12px;background:#f8f8f8;position:relative;overflow:hidden;}
.tee{position:absolute;left:56px;top:20px;width:88px;height:100px;border-radius:12px 12px 6px 6px;}
.badge{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:3px 8px;border-radius:4px;color:#17120f;}
.badge.sale{background:#faaf43;}
.badge.new{background:#006dff;color:#fff;}
.ctitle{font-size:16px;font-weight:600;color:#17120f;margin-top:10px;}
.cprice{font-size:16px;font-weight:500;color:#3e3e3e;margin-top:2px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:12px;color:#3e3e3e;border-top:1px solid #e0e0e0;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Vuori</div>
<div class="navlinks"><span>Men</span><span>Women</span><span>Sale</span></div>
<div class="searchpill">Search...</div>
</div>
<div class="hero">
<div class="heroText">
<h1>Performance Meets<br>Everyday Comfort</h1>
<p>Coastal-crafted apparel built for movement, made to be lived in.</p>
<div class="cta">Shop Now</div>
</div>
<div class="figure"></div>
</div>
<div class="sec">
<div class="secTitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="badge new">New</div><div class="tee" style="background:linear-gradient(160deg,#3e3e3e,#727272)"></div></div><div class="ctitle">Ponto Performance Jogger</div><div class="cprice">$89</div></div>
<div class="card"><div class="thumb"><div class="tee" style="background:linear-gradient(160deg,#727272,#a0a0a0)"></div></div><div class="ctitle">Strato Tech Tee</div><div class="cprice">$68</div></div>
<div class="card"><div class="thumb"><div class="badge sale">Sale</div><div class="tee" style="background:linear-gradient(160deg,#17120f,#3e3e3e)"></div></div><div class="ctitle">Kore Short 7"</div><div class="cprice">$58</div></div>
</div>
</div>
<div class="footer"><span>Free Shipping Over $75</span><span>Sustainably Made</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ff3478; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ff3478; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #000000; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ff3478; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #ff3478; color: #f5f5f5;
border: 1px solid #fd538c; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #000000; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #ff548e; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#222222; box-sizing:border-box;
font-family:"Pretendard", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 30px;
border-bottom:1px solid #dfdfdf; position:relative; z-index:2; }
.brand { font-size:17px; font-weight:700; color:#ff3478; margin:0; }
.acct { border:1px solid #dfdfdf; color:#222; border-radius:2px; padding:0 16px; height:32px; display:flex; align-items:center; font-size:14px; }
.map { position:relative; height:420px; background:
linear-gradient(#eef2f5,#eef2f5) ,
repeating-linear-gradient(0deg, #dfe6ea 0, #dfe6ea 1px, transparent 1px, transparent 44px),
repeating-linear-gradient(90deg, #dfe6ea 0, #dfe6ea 1px, transparent 1px, transparent 44px); }
.searchbar { position:absolute; top:16px; left:16px; background:#fff; border:1px solid #ededed; border-radius:42px;
padding:7px 20px 7px 15px; font-size:14px; color:#222; box-shadow:0 1px 4px rgba(0,0,0,0.08); }
.dock { position:absolute; top:16px; right:16px; display:flex; gap:6px; }
.dockbtn { background:#fff; border:1px solid #dfdfdf; border-radius:2px; padding:0 11px 0 11px; height:32px; display:flex; align-items:center; font-size:13px; }
.pin { position:absolute; background:#326cf9; color:#fff; font-size:12px; font-weight:600; border-radius:16px; padding:5px 11px; box-shadow:0 2px 6px rgba(0,0,0,0.15); }
.p1 { top:80px; left:180px; } .p2 { top:150px; left:340px; } .p3 { top:230px; left:520px; }
.p4 { top:110px; left:650px; } .p5 { top:280px; left:220px; } .p6 { top:70px; left:430px; }
.list { display:flex; gap:14px; padding:16px 30px; }
.card { flex:1; background:#fff; border:1px solid #dfdfdf; border-radius:8px; padding:12px; }
.card .price { font-size:15px; font-weight:700; }
.card .type { font-size:12px; color:#767676; margin-top:2px; }
</style></head>
<body>
<nav>
<p class="brand">Dabang</p>
<span class="acct">My Account</span>
</nav>
<div class="map">
<div class="searchbar">Search listings in Yeoksam-dong</div>
<div class="dock"><span class="dockbtn">Map</span><span class="dockbtn">Filters</span></div>
<div class="pin p1">$400/mo, $2,100 dep.</div>
<div class="pin p2">$168,000 lump-sum</div>
<div class="pin p3">$540/mo, $1,400 dep.</div>
<div class="pin p4">$272,000 lump-sum</div>
<div class="pin p5">$330/mo, $2,300 dep.</div>
<div class="pin p6">$144,000 lump-sum</div>
</div>
<div class="list">
<div class="card"><div class="price">$168,800 lump-sum</div><div class="type">2BR · Yeoksam-dong · 5F</div></div>
<div class="card"><div class="price">$400/mo, $2,100 dep.</div><div class="type">Studio · Yeoksam-dong · 3F</div></div>
<div class="card"><div class="price">$540/mo, $1,400 dep.</div><div class="type">Officetel · Yeoksam-dong · 12F</div></div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #fafafa; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #fafafa; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.35; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #6f6f6f; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #4500ff; color: #ffffff;
border: none; border-radius: 8px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.3px; background: #fafafa; color: #1a1a1a;
border: 1px solid #4500ff; border-radius: 8px;
padding: 13px 27px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #1a1a1a;
border: 1px solid #c2c2c2; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6f6f6f; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #4500ff; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; font-family:'Muli','Graphie',sans-serif; background:#fafafa; color:#1a1a1a; }
*{box-sizing:border-box;}
.wrap{position:relative;height:640px;}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.logo{font-size:19px;font-weight:600;}
.navlinks{display:flex;gap:24px;font-size:15px;font-weight:600;}
.navlinks .a{color:#4500ff;border-bottom:2px solid #4500ff;padding-bottom:24px;}
.hero{height:250px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;}
.herotext{max-width:420px;}
.herotext h1{font-size:32px;font-weight:700;letter-spacing:-.5px;margin:0 0 12px;line-height:1.25;}
.herotext p{font-size:17px;color:#6f6f6f;margin:0 0 18px;max-width:400px;}
.hbtn{display:inline-block;background:#4500ff;color:#fff;font-size:14px;font-weight:600;letter-spacing:.3px;padding:14px 28px;border-radius:8px;}
.desk{width:260px;height:170px;border-radius:12px;background:linear-gradient(150deg,#8a6a4a,#4a3420);position:relative;box-shadow:0 14px 30px rgba(0,0,0,.12);}
.desk:after{content:'';position:absolute;left:20px;top:20px;width:80px;height:130px;border-radius:8px;background:#fafafa;opacity:.15;}
.sec{padding:18px 40px 0;}
.sectitle{font-size:18px;font-weight:600;margin-bottom:14px;}
.grid{display:flex;gap:16px;}
.card{width:196px;background:#fff;border-radius:12px;padding:14px;}
.thumb{aspect-ratio:1;height:96px;border-radius:12px;margin-bottom:10px;position:relative;}
.badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:4px 8px;border-radius:4px;color:#fff;background:#4500ff;}
.badge.eco{background:#108474;}
.ptitle{font-size:16px;font-weight:600;}
.pprice{font-size:16px;font-weight:600;margin-top:4px;}
.stars{color:#fbcd0a;font-size:13px;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:0;}
</style>
<div class="wrap">
<div class="nav"><div class="logo">Oakywood</div><div class="navlinks"><span class="a">Desk Organizers</span><span>Monitor Stands</span><span>Cable Management</span><span>About</span></div></div>
<div class="hero"><div class="herotext"><h1>A desk shaped by grain, not plastic.</h1><p>Hand-finished walnut and oak organizers made for a workspace that lasts.</p><div class="hbtn">Shop Desk Organizers</div></div><div class="desk"></div></div>
<div class="sec">
<div class="sectitle">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#8a6a4a,#3a2410)"><div class="badge">New</div></div><div class="ptitle">Walnut Desk Organizer</div><div class="pprice">$89</div><div class="stars">★★★★★</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#c9c9c9,#8a8a8a)"><div class="badge eco">Eco</div></div><div class="ptitle">Recycled Cork Mat</div><div class="pprice">$49</div><div class="stars">★★★★☆</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#6a5540,#2a1c10)"></div><div class="ptitle">Oak Monitor Stand</div><div class="pprice">$119</div><div class="stars">★★★★★</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#8a6a4a,#4a3420)"></div><div class="ptitle">Bamboo Cable Tray</div><div class="pprice">$39</div><div class="stars">★★★★☆</div></div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f8f8f8; color: #232323;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f8f8f8; color: #232323;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; color: #232323; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #5f6062; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #8dc63f; color: #000000;
border: none; border-radius: 12px; padding: 14px 28px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: transparent; color: #232323;
border: 1px solid #8dc63f; border-radius: 12px;
padding: 12px 26px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #232323;
border: 1px solid #dedede; border-radius: 12px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5f6062; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 800; line-height: 1.2; letter-spacing: 0.5px; background: #ef6454; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f8f8f8; color:#5f6062; font-family:'Montserrat','Futura',Arial,sans-serif; }
*{box-sizing:border-box;}
.nav{height:60px;background:#232323;display:flex;align-items:center;justify-content:space-between;padding:0 34px;}
.logo{font-size:20px;font-weight:800;color:#8dc63f;letter-spacing:0.5px;}
.navlinks{display:flex;gap:22px;font-size:13px;font-weight:700;color:#f8f8f8;}
.navcta{background:#8dc63f;color:#232323;font-size:12px;font-weight:800;padding:9px 18px;border-radius:12px;}
.hero{height:250px;display:flex;background:#232323;position:relative;overflow:hidden;}
.herotext{width:48%;display:flex;flex-direction:column;justify-content:center;padding:0 34px;color:#f8f8f8;}
.herotext h1{font-size:30px;font-weight:800;margin:0 0 12px;line-height:1.2;}
.herotext p{font-size:14px;color:#c8c8c8;margin:0 0 18px;max-width:300px;line-height:1.5;}
.cta{display:inline-block;background:#8dc63f;color:#232323;font-size:13px;font-weight:800;padding:12px 24px;border-radius:12px;width:fit-content;}
.blocks{width:52%;position:relative;}
.blk{position:absolute;border-radius:12px;}
.b1{width:100px;height:100px;background:#ffbb49;left:30px;top:40px;transform:rotate(-8deg);}
.b2{width:80px;height:130px;background:#ef6454;left:130px;top:20px;transform:rotate(6deg);}
.b3{width:120px;height:70px;background:#06bfe2;left:80px;top:150px;transform:rotate(4deg);}
.b4{width:60px;height:60px;background:#8dc63f;left:210px;top:120px;transform:rotate(-12deg);}
.seclabel{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:0.5px;color:#232323;padding:20px 34px 12px;}
.grid{display:flex;gap:14px;padding:0 34px;}
.card{width:150px;background:#fff;border-radius:12px;padding:10px;}
.thumb{height:96px;border-radius:8px;margin-bottom:8px;}
.ptitle{font-size:13px;font-weight:700;color:#232323;line-height:1.3;height:32px;overflow:hidden;}
.pprice{font-size:13px;font-weight:800;color:#8dc63f;margin-top:4px;}
.footer{position:absolute;bottom:0;left:0;right:0;height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:11px;color:#5f6062;border-top:1px solid #dedede;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Tegu</div>
<div class="navlinks"><span>Blocks</span><span>Vehicles</span><span>Gift Sets</span></div>
<div class="navcta">Shop All</div>
</div>
<div class="hero">
<div class="herotext">
<h1>Magnetic Wooden Blocks, Reinvented</h1>
<p>Sustainably harvested wood and rare-earth magnets built for a lifetime of building.</p>
<div class="cta">Shop Blocks</div>
</div>
<div class="blocks"><div class="blk b1"></div><div class="blk b2"></div><div class="blk b3"></div><div class="blk b4"></div></div>
</div>
<div class="seclabel">Best Sellers</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#8dc63f,#6fa832)"></div><div class="ptitle">Original 22 Piece Set</div><div class="pprice">$74.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ef6454,#ffbb49)"></div><div class="ptitle">Pocket Pouch Prism</div><div class="pprice">$28.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#06bfe2,#8dc63f)"></div><div class="ptitle">Magnetic Race Car Set</div><div class="pprice">$65.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(135deg,#ffbb49,#ef6454)"></div><div class="ptitle">Endless Alphabet Set</div><div class="pprice">$96.00</div></div>
</div>
<div class="footer"><span>© Sustainably Made</span><span>Ages 1+ Approved</span></div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f3f2f7; color: #282f37;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f3f2f7; color: #282f37;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #282f37; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #555555; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 900; line-height: 1.2; letter-spacing: 0.5px; background: #ff7700; color: #ffffff;
border: none; border-radius: 6px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 900; line-height: 1.2; letter-spacing: 0.5px; background: #ffffff; color: #282f37;
border: 1px solid #ff7700; border-radius: 6px;
padding: 11px 23px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #444444;
border: 1px solid #c0c1c7; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #555555; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 900; line-height: 1.2; letter-spacing: 0.3px; background: #ff7700; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#f3f2f7; font-family:Arial, 'Helvetica Neue', sans-serif; color:#282f37; }
*{box-sizing:border-box;}
.nav{height:56px;background:#282f37;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.logo{font-size:19px;font-weight:700;color:#fff;}
.navlinks{display:flex;gap:20px;font-size:12px;font-weight:600;color:#a9b0b8;}
.navlinks span:first-child{color:#ff7700;}
.btn{height:38px;padding:0 20px;border-radius:6px;background:#ff7700;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;}
.hero{height:230px;background:#f3f2f7;display:flex;align-items:center;padding:0 32px;position:relative;}
.heroText{width:440px;}
.h1{font-size:28px;font-weight:700;line-height:1.2;margin:0 0 10px;}
.sub{font-size:13px;color:#444444;margin:0 0 16px;max-width:340px;}
.flaskwrap{width:400px;height:230px;position:relative;}
.flaskneck{position:absolute;left:210px;top:30px;width:30px;height:40px;background:#e9e9eb;border-radius:4px;}
.flaskbody{position:absolute;left:170px;top:60px;width:110px;height:110px;border-radius:0 0 55px 55px / 0 0 55px 55px;background:#ff7700;}
.bubble{position:absolute;border-radius:9999px;background:#4592fe;}
.b1{left:190px;top:100px;width:16px;height:16px;} .b2{left:230px;top:120px;width:10px;height:10px;} .b3{left:210px;top:140px;width:20px;height:20px;}
.newflag{position:absolute;left:32px;top:20px;background:#ff7700;color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:9999px;}
.sec{padding:18px 32px;}
.sectitle{font-size:15px;font-weight:700;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:216px;background:#ffffff;border-radius:10px;padding:12px;position:relative;}
.agepill{position:absolute;top:10px;left:10px;background:#ff7700;color:#fff;font-size:10px;font-weight:700;padding:3px 10px;border-radius:9999px;z-index:2;}
.thumb{height:86px;border-radius:6px;margin-bottom:10px;}
.ptitle{font-size:13px;font-weight:700;margin-bottom:4px;}
.pprice{font-size:14px;font-weight:700;color:#ff7700;}
</style>
<div class="nav">
<div class="logo">Steve Spangler Science</div>
<div class="navlinks"><span>Chemistry</span><span>Physics</span><span>Kits</span><span>Classroom</span></div>
<div class="btn">Add to Cart</div>
</div>
<div class="hero">
<div class="newflag">NEW!</div>
<div class="heroText">
<div class="h1">Science you can do<br>on your kitchen table.</div>
<div class="sub">Geysers, color-changing crystals and hands-on kits that turn "wow" into learning.</div>
<div class="btn" style="display:inline-flex;">Shop Kits</div>
</div>
<div class="flaskwrap"><div class="flaskneck"></div><div class="flaskbody"></div><div class="bubble b1"></div><div class="bubble b2"></div><div class="bubble b3"></div></div>
</div>
<div class="sec">
<div class="sectitle">Best Selling Kits</div>
<div class="grid">
<div class="card"><div class="agepill">Ages 8+</div><div class="thumb" style="background:#ff7700"></div><div class="ptitle">Soda Geyser Tube Kit</div><div class="pprice">$14.99</div></div>
<div class="card"><div class="agepill">Ages 6+</div><div class="thumb" style="background:#4592fe"></div><div class="ptitle">Insta-Snow Powder Jar</div><div class="pprice">$9.99</div></div>
<div class="card"><div class="agepill">Ages 10+</div><div class="thumb" style="background:#282f37"></div><div class="ptitle">Color-Changing Crystal Kit</div><div class="pprice">$19.99</div></div>
<div class="card"><div class="agepill">Ages 5+</div><div class="thumb" style="background:#7fa9c5"></div><div class="ptitle">Mentos Geyser Launch Set</div><div class="pprice">$12.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #0078ff; color: #f5f5f5;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #0078ff; color: #f5f5f5;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: #f5f5f5; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; margin: 0; color: #87bdfa; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #ffffff; color: #111111;
border: none; border-radius: 8px; padding: 8px 16px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; background: #0078ff; color: #ffffff;
border: 1px solid #ffffff; border-radius: 8px;
padding: 8px 16px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 12px; font-weight: 400; background: #0078ff; color: #f5f5f5;
border: 1px solid #278cfd; border-radius: 6px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #87bdfa; opacity: 0.8; }
.badge {
font-family: -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; background: #298eff; color: #ffffff;
border-radius: 999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#ffffff; color:#354153; box-sizing:border-box;
font-family:Pretendard, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
header { height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 30px; }
.brand { font-size:18px; font-weight:700; display:flex; align-items:center; gap:8px; }
.mark { width:20px; height:14px; background:#0078ff; clip-path:polygon(15% 0,100% 0,85% 100%,0 100%); }
.navlinks { display:flex; gap:24px; font-size:15px; font-weight:600; color:#354153; }
.hero { padding:6px 30px 18px; text-align:center; }
.hero h1 { font-size:26px; font-weight:700; margin:0 0 18px; }
.booking { max-width:820px; margin:0 auto; background:#f9f9fb; border:1px solid #e5e8ef; border-radius:16px;
display:flex; gap:0; padding:10px; }
.field { flex:1; padding:12px 16px; border-right:1px solid #e5e8ef; }
.field:last-child { border-right:none; flex:0 0 130px; }
.field label { font-size:11px; color:#697383; display:block; margin-bottom:3px; }
.field .v { font-size:15px; font-weight:600; }
.search-btn { background:#0078ff; color:#fff; border-radius:12px; font-size:14px; font-weight:600;
display:flex; align-items:center; justify-content:center; }
.regions { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:20px 30px 0; }
.rcard { background:#ffffff; border:1px solid #e5e8ef; border-radius:14px; padding:20px 16px; text-align:center; }
.rcard .ic { width:38px; height:38px; margin:0 auto 10px; border-radius:12px;
background:linear-gradient(135deg,#d6e8ff,#0078ff33); }
.rcard h3 { font-size:16px; font-weight:600; margin:0; }
.rcard span { font-size:12px; color:#697383; }
.articles { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:22px 30px 0; }
.acard { background:#ffffff; border-radius:16px; box-shadow:rgba(0,0,0,0.1) 0px 4px 8px 0px; overflow:hidden; }
.acard .img { height:78px; background:linear-gradient(135deg,#bcd7ff,#7fb0ff); }
.acard .body { padding:12px 14px; }
.acard h4 { font-size:13.5px; font-weight:600; margin:0; line-height:1.4; }
footer { position:absolute; bottom:0; width:960px; background:#f5f5f5; padding:14px 30px; font-size:12px; color:#697383;
display:flex; justify-content:space-between; }
</style></head>
<body>
<header>
<p class="brand"><span class="mark"></span>SOCAR</p>
<div class="navlinks"><span>Book Now</span><span>Services</span><span>Blog</span></div>
<span></span>
</header>
<section class="hero">
<h1>Need a car? SOCAR.</h1>
<div class="booking">
<div class="field"><label>Pickup Location</label><div class="v">Gangnam Station Exit 3</div></div>
<div class="field"><label>Rental Period</label><div class="v">Today 3:00 PM - 7:00 PM</div></div>
<div class="field search-btn">Search</div>
</div>
</section>
<section class="regions">
<div class="rcard"><div class="ic"></div><h3>Jeju</h3><span>Popular</span></div>
<div class="rcard"><div class="ic"></div><h3>Seoul</h3><span>Airport</span></div>
<div class="rcard"><div class="ic"></div><h3>Busan</h3><span>Haeundae</span></div>
<div class="rcard"><div class="ic"></div><h3>Gangneung</h3><span>Beach</span></div>
</section>
<section class="articles">
<div class="acard"><div class="img"></div><div class="body"><h4>Top May Drive Routes 2026</h4></div></div>
<div class="acard"><div class="img"></div><div class="body"><h4>Spring Festivals in Busan & Ulsan</h4></div></div>
<div class="acard"><div class="img"></div><div class="body"><h4>Best Jeju Day-Trip Spots</h4></div></div>
</section>
<footer>
<span>Where do you want to go?</span>
<span>SOCAR · Car Zones · Support</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f2f1ee; color: #121212;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f2f1ee; color: #121212;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; color: #121212; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.43; margin: 0; color: #676767; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #582012; color: #ffffff;
border: none; border-radius: 8px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.3px; background: #f2f1ee; color: #121212;
border: 1px solid #582012; border-radius: 8px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #121212;
border: 1px solid #bab9b7; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #676767; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #ff0000; color: #ffffff;
border-radius: 4px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f2f1ee; color:#121212; box-sizing:border-box;
font-family:'Assistant','Harman-Sans',sans-serif; }
* { box-sizing:border-box; }
nav { height:64px; background:#582012; display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.brand { color:#fff; font-size:17px; font-weight:600; margin:0; }
.navlinks { display:flex; gap:22px; }
.navlinks span { color:#fff; font-size:15px; font-weight:500; }
.search { background:#fff; border-radius:9999px; padding:10px 20px; font-size:13px; color:#676767; width:150px; }
main { display:flex; height:calc(640px - 64px); }
.gallery { width:40%; background:#eeeeee; display:flex; align-items:center; justify-content:center; }
.phonecase { width:130px; height:250px; border-radius:20px; background:linear-gradient(160deg,#653c28,#593b26 70%);
box-shadow:0 14px 28px rgba(0,0,0,0.2); position:relative; }
.phonecase::before { content:''; position:absolute; left:15px; top:20px; right:15px; height:60px; border-radius:8px; background:rgba(255,255,255,0.15); }
.details { width:60%; padding:26px 34px; }
.badge { display:inline-block; background:#ff0000; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase;
letter-spacing:0.5px; border-radius:4px; padding:2px 8px; margin-bottom:12px; }
h1 { font-size:28px; font-weight:700; letter-spacing:-0.3px; margin:0 0 8px; }
.price { font-size:18px; font-weight:700; margin:0 0 14px; }
.desc { font-size:15px; line-height:1.5; color:#3a3a3a; margin:0 0 18px; max-width:400px; }
.stars { color:#121212; margin-bottom:18px; font-size:14px; }
.buyrow { display:flex; gap:12px; }
.btn-primary { background:#582012; color:#fff; border:none; border-radius:8px; padding:12px 24px; font-size:15px; font-weight:600; height:44px; }
.btn-secondary { background:#f2f1ee; color:#121212; border:none; border-radius:8px; padding:12px 24px; font-size:15px; font-weight:600; height:44px; }
</style></head>
<body>
<nav>
<p class="brand">Carved</p>
<div class="navlinks"><span>Wood Cases</span><span>Resin</span><span>AirTag Cases</span></div>
<span class="search">Search…</span>
</nav>
<main>
<div class="gallery"><div class="phonecase"></div></div>
<div class="details">
<span class="badge">Sale</span>
<h1>Live-Edge Walnut Phone Case</h1>
<p class="price">$44.95</p>
<p class="desc">Cut from real walnut with a live-edge contour and hand-finished resin inlay — no two cases are alike.</p>
<div class="stars">★★★★★ 4.7 (1,203 reviews)</div>
<div class="buyrow">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">View Details</button>
</div>
</div>
</main>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f5f5; color: #1a1a1a;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f5f5; color: #1a1a1a;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #1a1a1a; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #9ca3af; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #fff299; color: #1a1a1a;
border: none; border-radius: 9999px; padding: 12px 24px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.5px; background: #f5f5f5; color: #1a1a1a;
border: 1px solid #fff299; border-radius: 9999px;
padding: 12px 24px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #1a1a1a;
border: 1px solid #bebebe; border-radius: 8px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #9ca3af; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #d3efcd; color: #1a1a1a;
border-radius: 9999px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f5f5; color:#1a1a1a; box-sizing:border-box;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; }
* { box-sizing:border-box; }
body { display:flex; flex-direction:column; }
nav { flex:0 0 auto; height:64px; display:flex; align-items:center; justify-content:space-between;
padding:0 30px; border-bottom:1px solid #f0f0f0; }
.brand { font-size:16px; font-weight:700; margin:0; }
.navlinks { display:flex; gap:8px; font-size:14px; font-weight:500; letter-spacing:0.3px; text-transform:uppercase; }
.navlinks span { padding:8px 16px; border-radius:999px; }
.navlinks .active { background:#fff299; color:#1a1a1a; }
.search { width:150px; height:40px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; }
main { flex:1 1 auto; display:flex; flex-direction:column; padding:18px 30px; min-height:0; }
.hero { flex:0 0 auto; margin-bottom:14px; }
.hero h1 { font-size:26px; font-weight:700; margin:0 0 4px; }
.hero p { font-size:14px; color:#4a4a4a; margin:0; }
.grid { flex:1 1 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; min-height:0; }
.card { background:#ffffff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,0.04); display:flex;
flex-direction:column; overflow:hidden; position:relative; }
.thumb { aspect-ratio:1/1; }
.t1 { background:#fcd6d7; }
.t2 { background:#d3efcd; }
.t3 { background:#fff299; }
.t4 { background:#3a5792; }
.badge { position:absolute; top:8px; left:8px; font-size:11px; font-weight:700; text-transform:uppercase;
letter-spacing:0.5px; padding:2px 8px; border-radius:999px; }
.badge.new { background:#d3efcd; color:#1a1a1a; }
.badge.sale { background:#c72e2f; color:#fff; }
.heart { position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:999px; background:rgba(255,255,255,0.85); }
.info { padding:10px 12px 12px; }
.info h3 { font-size:14px; font-weight:500; margin:0 0 4px; }
.info .price { font-size:13px; color:#4a4a4a; margin:0; }
footer { flex:0 0 auto; height:52px; background:#f5f5f5; color:#4a4a4a; border-top:1px solid #e5e7eb;
display:flex; align-items:center; justify-content:space-between; padding:0 30px; font-size:12px; }
</style></head>
<body>
<nav>
<p class="brand">Areaware</p>
<div class="navlinks"><span class="active">Puzzles</span><span>Home Goods</span><span>Gifts</span></div>
<div class="search"></div>
</nav>
<main>
<div class="hero">
<h1>Objects with a little personality</h1>
<p>Design goods for the apartment that feels lived in.</p>
</div>
<div class="grid">
<div class="card"><span class="badge new">New</span><div class="heart"></div><div class="thumb t1"></div>
<div class="info"><h3>Marbled Shell Puzzle</h3><p class="price">$26.00</p></div></div>
<div class="card"><div class="heart"></div><div class="thumb t2"></div>
<div class="info"><h3>Sage Ceramic Tray</h3><p class="price">$34.00</p></div></div>
<div class="card"><span class="badge sale">Sale</span><div class="heart"></div><div class="thumb t3"></div>
<div class="info"><h3>Sun Puzzle, 500pc</h3><p class="price">$22.00</p></div></div>
<div class="card"><div class="heart"></div><div class="thumb t4"></div>
<div class="info"><h3>Navy Bookend Pair</h3><p class="price">$48.00</p></div></div>
</div>
</main>
<footer>
<span>© Areaware</span>
<span>Shipping · Returns · Wholesale</span>
</footer>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.46; margin: 0; color: #767676; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.6px; background: #e85d04; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: 0.6px; background: #ffffff; color: #313131;
border: 1px solid #e85d04; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #767676; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.8px; background: #1a3a6b; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<title>Industrial Safety</title>
<style>
:host, html, body {
width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box;
background:#ffffff; font-family:Arial,'Helvetica Neue',Roboto,sans-serif; color:#444444;
}
*{box-sizing:border-box;}
.nav{
height:56px; background:#313131; display:flex; align-items:center; justify-content:space-between;
padding:0 32px;
}
.logo{ font-size:16px; font-weight:700; color:#ffffff; letter-spacing:0.3px; }
.logo span{ color:#e85d04; }
.navlinks{ display:flex; gap:20px; font-size:11px; font-weight:700; color:#d4d4d4; text-transform:uppercase; letter-spacing:0.4px; }
.search{ background:#ffffff; height:30px; border-radius:4px; width:220px; display:flex; align-items:center; padding:0 10px; font-size:10px; color:#767676; }
.strip{
background:#1a3a6b; color:#fff; font-size:10px; padding:6px 32px; display:flex; gap:18px; align-items:center;
}
.chip{ background:#ffd600; color:#313131; font-size:9px; font-weight:700; padding:2px 7px; border-radius:4px; }
.body{ display:flex; }
.side{ width:170px; padding:16px; border-right:1px solid #d4d4d4; }
.side h4{ font-size:10px; text-transform:uppercase; letter-spacing:0.5px; color:#767676; margin:0 0 8px; }
.side .cat{ font-size:11px; color:#313131; padding:5px 0; border-bottom:1px solid #ebebeb; }
.main{ flex:1; padding:16px 24px; }
.hero{
background:#313131; border-radius:4px; padding:20px 26px; display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;
}
.hero h2{ font-size:20px; color:#fff; margin:0 0 6px; font-weight:700; }
.hero p{ font-size:11px; color:#c8c8c8; margin:0; max-width:380px; }
.hero-cta{ background:#e85d04; color:#fff; font-size:11px; font-weight:700; padding:11px 20px; border-radius:4px; }
.sectitle{ font-size:13px; font-weight:700; color:#313131; margin:0 0 10px; text-transform:uppercase; letter-spacing:0.3px; }
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card{ border:1px solid #d4d4d4; border-radius:4px; padding:12px; display:flex; flex-direction:column; gap:6px; }
.imgph{ height:56px; border-radius:4px; background:#ebebeb; display:flex; align-items:center; justify-content:center; }
.sku{ font-size:9px; color:#767676; }
.pname{ font-size:11px; font-weight:700; color:#313131; }
.badges{ display:flex; gap:5px; }
.b{ font-size:8px; font-weight:700; padding:2px 6px; border-radius:3px; color:#fff; }
.b.ansi{ background:#1a3a6b; }
.b.hiv{ background:#e85d04; }
.price{ font-size:12px; font-weight:700; color:#313131; margin-top:auto; }
</style>
<div class="nav">
<div class="logo">Industrial Safety <span>■</span></div>
<div class="search">Search 50,000+ SKUs…</div>
<div class="navlinks">
<span>Head Protection</span><span>Hand Protection</span><span>Respiratory</span><span>Hi-Vis Apparel</span><span>Account</span>
</div>
</div>
<div class="strip">
<span class="chip">ANSI Z535</span><span>Compliance-verified catalog</span><span class="chip">OSHA</span><span>Bulk procurement pricing available</span>
</div>
<div class="body">
<div class="side">
<h4>Category</h4>
<div class="cat">Hard Hats</div>
<div class="cat">Safety Glasses</div>
<div class="cat">Gloves</div>
<div class="cat">Respirators</div>
<div class="cat">Hi-Vis Vests</div>
<div class="cat">Fall Protection</div>
<h4 style="margin-top:14px;">Standard</h4>
<div class="cat">ANSI Z87.1</div>
<div class="cat">ANSI/ISEA 107</div>
<div class="cat">NIOSH Approved</div>
</div>
<div class="main">
<div class="hero">
<div>
<h2>PPE Procurement, Simplified</h2>
<p>Faceted filtering across 50,000 SKUs — cross-reference by ANSI class, hazard type, and compliance standard in one search.</p>
</div>
<div class="hero-cta">Browse Catalog</div>
</div>
<div class="sectitle">Head & Hand Protection</div>
<div class="grid">
<div class="card">
<div class="imgph"></div>
<div class="sku">SKU 40281-HC</div>
<div class="pname">Type II Hard Hat, Vented</div>
<div class="badges"><span class="b ansi">ANSI Z89.1</span></div>
<div class="price">$18.40</div>
</div>
<div class="card">
<div class="imgph"></div>
<div class="sku">SKU 40592-GL</div>
<div class="pname">Cut-Resistant Gloves, Lvl A4</div>
<div class="badges"><span class="b ansi">ANSI 105</span></div>
<div class="price">$6.95 / pr</div>
</div>
<div class="card">
<div class="imgph"></div>
<div class="sku">SKU 41120-VS</div>
<div class="pname">Class 3 Hi-Vis Safety Vest</div>
<div class="badges"><span class="b hiv">HI-VIS</span></div>
<div class="price">$14.20</div>
</div>
<div class="card">
<div class="imgph"></div>
<div class="sku">SKU 40877-RS</div>
<div class="pname">N95 Respirator, Box of 20</div>
<div class="badges"><span class="b ansi">NIOSH</span></div>
<div class="price">$34.99</div>
</div>
</div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #313131;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #313131;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0; color: #313131; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; color: #757575; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: #313131; color: #ffffff;
border: none; border-radius: 9999px; padding: 16px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0.25px; background: transparent; color: #313131;
border: 1px solid #313131; border-radius: 9999px;
padding: 14px 30px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #313131;
border: 1px solid #cccccc; border-radius: 0px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #757575; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.5px; background: #313131; color: #ffffff;
border-radius: 8px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:#4a4a4a; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #e0e0e0;}
.logo{font-size:20px;font-weight:700;color:#313131;}
.navlinks{font-size:13px;font-weight:600;color:#313131;}
.hero{display:flex;height:280px;}
.left{width:480px;padding:48px 40px;display:flex;flex-direction:column;justify-content:center;}
.h1{font-size:34px;font-weight:700;color:#313131;line-height:1.2;margin:0 0 16px;}
.sub{font-size:16px;line-height:1.6;color:#4a4a4a;max-width:360px;margin:0 0 22px;}
.pill{display:inline-block;background:#313131;color:#fff;font-size:14px;font-weight:600;padding:13px 30px;border-radius:9999px;width:fit-content;}
.right{flex:1;background:#f7f7f7;position:relative;}
.jar{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:130px;height:170px;border-radius:12px;background:linear-gradient(180deg,#e0e0e0,#f7f7f7 60%);border:2px solid #313131;}
.jarcap{position:absolute;left:50%;top:calc(50% - 105px);transform:translateX(-50%);width:70px;height:24px;border-radius:6px;background:#313131;}
.jarlabel{position:absolute;left:50%;top:calc(50% - 6px);transform:translateX(-50%);width:90px;height:44px;background:#fff;border:1px solid #a0a0a0;border-radius:2px;}
.callout{margin:0 40px;padding:14px 18px;border-left:4px solid #313131;background:#f7f7f7;font-size:13px;color:#313131;}
.section{padding:20px 40px 0;}
.seclabel{font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#313131;margin-bottom:14px;}
.grid{display:flex;gap:20px;}
.card{width:200px;}
.thumb{aspect-ratio:1/1;background:#f5f5f5;border-radius:4px;margin-bottom:8px;position:relative;}
.thumb .capsule{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:24px;border-radius:12px;background:linear-gradient(90deg,#313131 50%,#e0e0e0 50%);}
.ptitle{font-size:14px;font-weight:600;color:#313131;margin:0 0 4px;}
.pprice{font-size:13px;color:#4a4a4a;}
.underline{border:none;border-bottom:2px solid #a0a0a0;background:transparent;font-size:12px;color:#a0a0a0;padding:4px 0;width:140px;}
</style>
<div class="nav">
<div class="logo">Seed Vitamins 2</div>
<div class="navlinks">Shop</div>
</div>
<div class="hero">
<div class="left">
<div class="h1">A scientific<br>monograph, worn<br>as a routine.</div>
<div class="sub">No lifestyle gloss. Ingredient diagrams and microscope imagery carry the color the copy refuses to.</div>
<div class="pill">Build Your Routine</div>
</div>
<div class="right"><div class="jar"></div><div class="jarlabel"></div><div class="jarcap"></div></div>
</div>
<div class="callout">Clinically studied strains — dosed for survivability, not marketing round numbers.</div>
<div class="section">
<div class="seclabel">Vitamins & Minerals</div>
<div class="grid">
<div class="card"><div class="thumb"><div class="capsule"></div></div><div class="ptitle">Multivitamin+ Daily</div><div class="pprice">$34.99</div></div>
<div class="card"><div class="thumb"><div class="capsule" style="background:linear-gradient(90deg,#4a4a4a 50%,#e0e0e0 50%)"></div></div><div class="ptitle">Vitamin D3 + K2</div><div class="pprice">$24.99</div></div>
<div class="card"><div class="thumb"><div class="capsule" style="background:linear-gradient(90deg,#1a1a1a 50%,#e0e0e0 50%)"></div></div><div class="ptitle">Magnesium Complex</div><div class="pprice">$27.99</div></div>
</div>
</div>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #f5f4f2; color: #202223;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #f5f4f2; color: #202223;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; line-height: 1.3; margin: 0; color: #202223; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; color: #6d7175; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; background: #202223; color: #f5f4f2;
border: none; border-radius: 4px; padding: 14px 32px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; background: transparent; color: #202223;
border: 1px solid #c4d6e0; border-radius: 4px;
padding: 13px 31px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #fafafa; color: #202223;
border: 1px solid #c0c0be; border-radius: 4px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #6d7175; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.09em; background: #ff5757; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
:host, html, body { display:block; margin:0; padding:0; width:960px; height:640px; overflow:hidden;
background:#f5f4f2; color:#202223; box-sizing:border-box;
font-family:'Baskerville', Garamond, Georgia, 'Times New Roman', serif; }
* { box-sizing:border-box; }
.topbar { height:56px; display:flex; align-items:center; justify-content:space-between;
padding:0 36px; border-bottom:1px solid #dadada; }
.brand { font-size:19px; font-weight:500; letter-spacing:-0.3px; }
.navlinks { display:flex; gap:26px; font-family:Arial, sans-serif; font-size:11px; font-weight:600;
letter-spacing:0.09em; text-transform:uppercase; color:#6d7175; }
.navlinks span:first-child { color:#202223; border-bottom:2px solid #202223; padding-bottom:4px; }
.layout { display:flex; height:calc(640px - 56px); }
.media { width:400px; flex-shrink:0; position:relative;
background:linear-gradient(160deg, #c4d6e0 0%, #f7d0bb 55%, #e6d1ea 100%); }
.media::after { content:''; position:absolute; inset:0;
background:radial-gradient(ellipse at 50% 42%, rgba(255,255,255,0.55), transparent 60%); }
.ring-dot { position:absolute; left:50%; top:44%; width:120px; height:120px; transform:translate(-50%,-50%) rotate(45deg);
border:3px solid rgba(32,34,35,0.7); border-radius:6px; box-shadow:0 0 0 1px rgba(255,255,255,0.4) inset; }
.media-label { position:absolute; bottom:18px; left:18px; font-family:Arial, sans-serif; font-size:11px;
font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:#202223; background:#fafafa;
padding:6px 12px; border-radius:4px; }
.detail { flex:1; padding:28px 34px; display:flex; flex-direction:column; gap:14px; overflow:hidden; }
.kicker { font-family:Arial, sans-serif; font-size:11px; font-weight:600; letter-spacing:0.09em;
text-transform:uppercase; color:#6d7175; }
h1 { font-size:30px; font-weight:500; margin:0; line-height:1.15; letter-spacing:-0.3px; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price { font-family:Arial, sans-serif; font-size:22px; font-weight:400; }
.price-note { font-family:Arial, sans-serif; font-size:12px; color:#6d7175; }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { font-family:Arial, sans-serif; font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
border:1px solid #dadada; border-radius:999px; padding:6px 14px; background:#fafafa; }
.chip.active { background:#202223; color:#f5f4f2; border-color:#202223; }
.spec-table { display:flex; flex-direction:column; margin-top:2px; }
.spec-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #e0e0e0;
font-family:Arial, sans-serif; font-size:13px; }
.spec-row .k { text-transform:uppercase; font-size:11px; font-weight:600; letter-spacing:0.06em; color:#6d7175; }
.spec-row .v { color:#202223; }
.actions { display:flex; gap:12px; margin-top:auto; }
.btn-primary { flex:1; background:#202223; color:#f5f4f2; border:none; border-radius:4px; height:48px;
font-family:Arial, sans-serif; font-size:14px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; }
.btn-secondary { background:transparent; color:#202223; border:1px solid #202223; border-radius:4px; height:48px;
padding:0 22px; font-family:Arial, sans-serif; font-size:14px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; }
</style></head>
<body>
<div class="topbar">
<div class="brand">Clear Cut</div>
<div class="navlinks"><span>Diamonds</span><span>The 4Cs</span><span>Rings</span><span>Education</span></div>
</div>
<div class="layout">
<div class="media">
<div class="ring-dot"></div>
<div class="media-label">Round Brilliant · 1.2ct</div>
</div>
<div class="detail">
<div class="kicker">Engagement · Solitaire</div>
<h1>The Meridian Solitaire</h1>
<div class="price-row"><span class="price">$4,280</span><span class="price-note">14k recycled gold band</span></div>
<div class="chips">
<div class="chip active">1.20ct</div>
<div class="chip">1.50ct</div>
<div class="chip">2.00ct</div>
</div>
<div class="spec-table">
<div class="spec-row"><span class="k">Cut</span><span class="v">Excellent</span></div>
<div class="spec-row"><span class="k">Color</span><span class="v">F</span></div>
<div class="spec-row"><span class="k">Clarity</span><span class="v">VS1</span></div>
<div class="spec-row"><span class="k">Certificate</span><span class="v">GIA #2273819402</span></div>
</div>
<div class="actions">
<button class="btn-primary">Add to Cart</button>
<button class="btn-secondary">Book a Consultation</button>
</div>
</div>
</div>
</body></html>
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* :host 는 Shadow DOM 호스트 자신을 가리킨다(현재 렌더 방식). html/body
는 일반 문서로 단독 열었을 때를 위한 것 — 어느 한쪽만 있으면 다른
경로에서 배경이 통째로 사라진다(Shadow DOM 안에는 실제 <html>/<body>
엘리먼트가 없어 그 셀렉터가 아무것도 못 찾는다). */
:host, html, body {
display: block; margin: 0; padding: 0; width: 340px; height: 220px;
overflow: hidden; /* 내부 스크롤바 자체가 안 생기게 — 카드에 스크롤바가
보이면 안 된다는 요구사항의 근본 방어선 */
background: #ffffff; color: #080808;
box-sizing: border-box;
}
* { box-sizing: border-box; }
.scene {
width: 340px; height: 220px; padding: 18px;
background: #ffffff; color: #080808;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
overflow: hidden;
}
h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.28; letter-spacing: -0.25px; margin: 0; color: #080808; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.54; margin: 0; color: #5f6360; overflow: hidden; max-height: 2.6em; flex-shrink: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.btn-primary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: 0.2px; background: #116dff; color: #ffffff;
border: none; border-radius: 4px; padding: 10px 20px;
white-space: nowrap; cursor: default;
}
.btn-secondary {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.43; letter-spacing: 0.2px; background: #ffffff; color: #116dff;
border: 1px solid #116dff; border-radius: 4px;
padding: 9px 19px; white-space: nowrap; cursor: default;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; background: #ffffff; color: #080808;
border: 1px solid #c1c1c1; border-radius: 2px;
padding: 7px 10px; outline: none; width: 100%; max-width: 220px;
}
input::placeholder { color: #5f6360; opacity: 0.8; }
.badge {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.27; letter-spacing: 0.4px; background: #116dff; color: #ffffff;
border-radius: 2px; padding: 3px 9px; display: inline-block;
white-space: nowrap; text-transform: uppercase;
}
</style></head>
<body>
<div class="scene">
<h1>Design that feels right</h1>
<p>Crafted with a clear system of color, type, and space.</p>
<div class="row">
<button class="btn-primary">Get Started</button>
<button class="btn-secondary">Learn More</button>
</div>
<div class="row">
<input type="text" placeholder="Your email">
<span class="badge">New</span>
</div>
</div>
</body></html>
<style>
:host, html, body { width:960px; height:640px; margin:0; padding:0; overflow:hidden; box-sizing:border-box; background:#ffffff; font-family:Arial,Helvetica,sans-serif; color:#2c2c2c; }
*{box-sizing:border-box;}
.nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid #d8d9d8;}
.logo{font-size:18px;font-weight:700;color:#080808;}
.navlinks{display:flex;gap:22px;font-size:12px;font-weight:700;color:#2c2c2c;text-transform:uppercase;letter-spacing:.2px;}
.gsabadge{background:#b22234;color:#fff;font-size:10px;font-weight:700;padding:5px 10px;border-radius:2px;}
.hero{height:210px;display:flex;background:#f4f5f7;border-bottom:1px solid #d8d9d8;}
.herotext{width:440px;padding:26px 36px;display:flex;flex-direction:column;justify-content:center;}
.badgerow{display:flex;gap:8px;margin-bottom:10px;}
.mini{font-size:10px;font-weight:700;color:#5f6360;border:1px solid #d8d9d8;padding:3px 8px;border-radius:2px;background:#fff;}
.h1{font-size:24px;font-weight:700;line-height:1.3;color:#080808;margin:0 0 8px;}
.sub{font-size:13px;color:#5f6360;margin:0 0 14px;max-width:340px;}
.btn{width:170px;text-align:center;background:#116dff;color:#fff;font-size:12px;font-weight:700;padding:10px 0;border-radius:4px;}
.heroimg{flex:1;background:#fff;position:relative;}
.cabinet{position:absolute;bottom:24px;left:50px;width:120px;height:130px;background:#e9ebec;border:1px solid #d8d9d8;}
.cabinet:before,.cabinet:after{content:'';position:absolute;left:8px;right:8px;height:8px;background:#5f6360;}
.cabinet:before{top:36px;}
.cabinet:after{top:78px;}
.spectable{display:flex;gap:1px;background:#d8d9d8;}
.speccell{flex:1;background:#f4f5f7;text-align:center;padding:8px;}
.speclabel{font-size:9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#5f6360;}
.specvalue{font-size:12px;color:#080808;margin-top:2px;font-weight:700;}
.sec{padding:16px 36px 0;}
.sectitle{font-size:13px;font-weight:700;text-transform:uppercase;color:#080808;margin-bottom:12px;}
.grid{display:flex;gap:14px;}
.card{width:154px;border:1px solid #d8d9d8;padding:9px;background:#fff;}
.thumb{height:88px;margin-bottom:8px;background:#f4f5f7;}
.pname{font-size:12px;font-weight:700;color:#080808;line-height:1.3;height:30px;overflow:hidden;}
.pmeta{font-size:10px;color:#5f6360;margin-top:3px;}
.pprice{font-size:12px;font-weight:700;color:#116dff;margin-top:4px;}
.footerbar{position:absolute;bottom:0;left:0;right:0;height:3px;background:#116dff;}
.wrap{position:relative;height:640px;}
</style>
<div class="wrap">
<div class="nav">
<div class="logo">Office Specialty</div>
<div class="navlinks"><span>Filing</span><span>Seating</span><span>Modular</span><span>Accessories</span></div>
<div class="gsabadge">GSA Small Business</div>
</div>
<div class="hero">
<div class="herotext">
<div class="badgerow"><span class="mini">USA MADE</span><span class="mini">GSA CONTRACT</span></div>
<div class="h1">Specification-grade furniture for federal workspace.</div>
<div class="sub">Modular filing systems and seating built to procurement standard, configured to spec.</div>
<div class="btn">Request a Quote</div>
</div>
<div class="heroimg"><div class="cabinet"></div></div>
</div>
<div class="spectable">
<div class="speccell"><div class="speclabel">Lead Time</div><div class="specvalue">2-3 Weeks</div></div>
<div class="speccell"><div class="speclabel">ADA</div><div class="specvalue">Compliant</div></div>
<div class="speccell"><div class="speclabel">Warranty</div><div class="specvalue">Lifetime</div></div>
<div class="speccell"><div class="speclabel">Finish Options</div><div class="specvalue">14 Colors</div></div>
</div>
<div class="sec">
<div class="sectitle">Modular Systems Catalog</div>
<div class="grid">
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e9ebec,#f4f5f7)"></div><div class="pname">4-Drawer Lateral File</div><div class="pmeta">SKU OF-4420 · Steel Finish</div><div class="pprice">$612.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e9ebec,#f4f5f7)"></div><div class="pname">Task Seating, Mesh Back</div><div class="pmeta">SKU OF-1187 · ADA</div><div class="pprice">$289.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e9ebec,#f4f5f7)"></div><div class="pname">Mobile Pedestal Unit</div><div class="pmeta">SKU OF-3305 · Locking</div><div class="pprice">$344.00</div></div>
<div class="card"><div class="thumb" style="background:linear-gradient(160deg,#e9ebec,#f4f5f7)"></div><div class="pname">Modular Panel System</div><div class="pmeta">SKU OF-9012 · Configurable</div><div class="pprice">$1,120.00</div></div>
</div>
</div>
<div class="footerbar"></div>
</div>